:root {
    --brand: #173A5E;        /* Navy (Logo) */
    --brand-dark: #0F2A45;   /* dunkleres Navy – Hover & Verlauf */
    --brand-light: #2A5A86;  /* helleres Stahlblau – Verlauf */
    --accent: #F4B81F;       /* Gold (Logo) */
    --accent-dark: #D99E0A;  /* dunkleres Gold – Hover */
    --ink: #14253A;          /* sehr dunkles Navy – Text & Footer */
    --muted: #6b7280;
    --line: #e5e7eb;
    --bg-soft: #f7f8fa;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }

h1, h2, h3 { line-height: 1.2; }
/* FocusOnNavigate setzt programmatisch Fokus auf h1 – kein sichtbarer Rahmen auf nicht-interaktiven Überschriften */
h1:focus, h2:focus, h3:focus { outline: none; }

/* ---------- Header ----------
   Default = solide/weiss (Unterseiten, kein Flash, funktioniert auch ohne JS).
   Auf Hero-Seiten (body:has(.hero)) ist der Header transparent, bis gescrollt wird
   (JS setzt dann .scrolled). So gibt es keinen Zustand mit weisser Schrift auf Weiss. */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 2px 18px rgba(15,23,42,.06);
    transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.header-inner {
    max-width: 1180px; margin: 0 auto; padding: 12px 24px;
    display: flex; align-items: center; gap: 28px;
    transition: padding .25s ease;
}

/* Marke / Logo */
.brand { display: flex; align-items: center; text-decoration: none; }
.brand-logo { height: 52px; width: auto; display: block; transition: filter .25s ease; }

/* Navigation */
.main-nav { display: flex; gap: 26px; margin-left: auto; align-items: center; }
.main-nav a {
    color: var(--ink); font-weight: 500; font-size: .98rem; letter-spacing: .01em;
    padding: 4px 0; border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
.main-nav a:hover, .main-nav a.active { color: var(--brand); border-bottom-color: var(--accent); }

/* Rechte Aktionen: Sprache + CTA */
.header-actions { display: flex; align-items: center; gap: 18px; }
.lang { display: flex; gap: 10px; align-items: center; font-size: .82rem; font-weight: 600; }
.lang a { color: var(--muted); transition: color .15s; }
.lang a:hover { color: var(--brand); }
.lang a.active { color: var(--brand); position: relative; }
.lang a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; background: var(--accent); border-radius: 2px; }

.btn-cta {
    background: var(--accent); color: var(--brand-dark); font-weight: 700; font-size: .92rem;
    padding: 9px 20px; border-radius: 999px; white-space: nowrap;
    transition: transform .15s, box-shadow .15s, background .15s;
}
.btn-cta:hover { color: var(--brand-dark); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.18); }

.acct-link { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 600; font-size: .92rem; padding: 6px 10px; border-radius: 8px; transition: color .15s, background .15s; }
.acct-link:hover { color: var(--brand); background: var(--bg-soft); }

/* Hero-Seiten: Header transparent über dem Hero, solange nicht gescrollt */
body:has(.hero) .site-header:not(.scrolled) {
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
}
body:has(.hero) .site-header:not(.scrolled) .header-inner { padding-top: 20px; padding-bottom: 20px; }
body:has(.hero) .site-header:not(.scrolled) .brand-logo { filter: brightness(0) invert(1); }
body:has(.hero) .site-header:not(.scrolled) .main-nav a { color: #fff; }
body:has(.hero) .site-header:not(.scrolled) .acct-link { color: #fff; }
body:has(.hero) .site-header:not(.scrolled) .acct-link:hover { color: #fff; background: rgba(255,255,255,.14); }
body:has(.hero) .site-header:not(.scrolled) .lang a { color: rgba(255,255,255,.78); }
body:has(.hero) .site-header:not(.scrolled) .lang a:hover,
body:has(.hero) .site-header:not(.scrolled) .lang a.active { color: #fff; }

/* ---------- Main / Footer ---------- */
main { min-height: 60vh; }
/* Seiten ohne Hero: Inhalt unter den fixierten Header schieben */
main:not(:has(.hero)) { padding-top: 76px; }

.site-footer { background: var(--ink); color: #cbd5e1; margin-top: 64px; }
.footer-inner {
    max-width: 1180px; margin: 0 auto; padding: 40px 16px;
    display: flex; gap: 32px; flex-wrap: wrap; align-items: flex-start;
}
.site-footer strong { color: #fff; }
.footer-nav { display: flex; gap: 18px; flex-wrap: wrap; margin-left: auto; }
.site-footer a { color: #cbd5e1; }
.site-footer a:hover { color: var(--accent); }
.footer-copy { width: 100%; border-top: 1px solid #374151; padding-top: 16px; margin-top: 8px; font-size: .85rem; color: #9ca3af; }

/* ---------- Buttons ---------- */
.btn-brand {
    display: inline-block; background: var(--brand); color: #fff; font-weight: 600;
    padding: 12px 22px; border-radius: 8px; border: none; cursor: pointer; transition: background .15s;
}
.btn-brand:hover { background: var(--brand-dark); color: #fff; }

.btn-outline {
    display: inline-block; background: #fff; color: var(--ink); border: 1px solid var(--line); font-weight: 600;
    padding: 11px 20px; border-radius: 8px; cursor: pointer; transition: border-color .15s;
}
.btn-outline:hover { border-color: var(--brand); }

/* Auth-Formulare (gemeinsam) */
.auth-page { max-width: 460px; margin: 0 auto; padding: 36px 16px 64px; }
.auth-page h1 { font-size: 1.7rem; font-weight: 800; margin: 0 0 8px; }
.auth-page > p { color: var(--muted); margin: 0 0 22px; }
.auth-back { margin-top: 18px; font-size: .9rem; }
.auth-forgot { display: inline-block; margin-top: 10px; font-size: .85rem; }
.auth-field { display: block; margin-bottom: 14px; }
.auth-field > span { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.auth-field input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; color: var(--ink); background: #fff; box-sizing: border-box; }
.auth-field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(23,58,94,.12); }
.auth-error { background: #fdecec; border: 1px solid #f5c2c2; color: #b42318; border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; font-size: .92rem; }
.auth-info { background: #ecfdf3; border: 1px solid #a6f4c5; color: #067647; border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; font-size: .92rem; }

@media (max-width: 860px) {
    .header-inner { gap: 16px; padding: 16px 18px; }
    .main-nav { gap: 18px; font-size: .92rem; }
    .wm-main { font-size: 1.3rem; }
    .wm-sub { font-size: .62rem; }
}
@media (max-width: 680px) {
    /* TODO: mobiles Menü (Hamburger) – vorerst Nav/Sprache ausblenden */
    .main-nav, .lang { display: none; }
    .header-actions { margin-left: auto; }
    .brand img { height: 40px; }
}

/* ---------- Blazor (beibehalten) ---------- */
.blazor-error-boundary {
    background: #b32121; padding: 1rem; color: white; border-radius: 6px;
}
.blazor-error-boundary::after { content: "Ein Fehler ist aufgetreten."; }