/**
 * Kanton Zürich Theme Override
 * -----------------------------------------------------------------------------
 * Build-sicheres Re-Branding-Layer. Wird in Stylesheet.fusion NACH Main.css und
 * Hermes.css geladen und überschreibt deren Design-System-Tokens (:root) auf die
 * offizielle Kanton-Zürich-Palette und -Typografie.
 *
 * WICHTIG: Diese Datei wird NICHT vom PostCSS-Build erzeugt (der kompiliert nur
 * Main.pcss -> Main.css) und bleibt daher bei `yarn build` erhalten.
 *
 * Farbwerte abgeleitet aus dem ZH-Designsystem:
 *   Blau #0070B4 · Dunkelblau #00407C · Softblau #EDF5FA · Hellblau #7AB6E2
 *   Neutral: #000 #333 #666 #949494 #CCC #F0F0F0 #F7F7F7
 *   Aktiv/Cyan #009EE0 · Fehler #D93C1A · Erfolg #1A7F1F
 * Quelle: https://www.zh.ch/.../designsystem/design-grundlagen/farben.html
 */

/* Selbst gehostete ZH-Schrift Inter (variabel, latin) – CSP-konform via font-src 'self'.
   Ersetzt das per CSP blockierte Google-Fonts-Stylesheet. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../Fonts/inter-variable-latin.woff2') format('woff2');
}

:root {
    /* Primär = ZH-Blau (war: Bund-Rot) ------------------------------------ */
    --color-primary-50: #edf5fa;  /* ZH Softblau */
    --color-primary-100: #d6e8f3;
    --color-primary-200: #b0d3e8;
    --color-primary-300: #7ab6e2; /* ZH Hellblau */
    --color-primary-400: #3f97ce;
    --color-primary-500: #1a80be;
    --color-primary-600: #0070b4; /* ZH Blau (Akzent) */
    --color-primary-700: #005e97;
    --color-primary-800: #004e80;
    --color-primary-900: #00407c; /* ZH Dunkelblau */

    /* Sekundär = ZH-Neutralgrau/Schwarz (Footer, dunkle Flächen) ---------- */
    --color-secondary-50: #f7f7f7;  /* Black 5 ZH */
    --color-secondary-100: #f0f0f0; /* Black 10 ZH */
    --color-secondary-200: #cccccc; /* Black 20 ZH */
    --color-secondary-300: #949494; /* Black 40 ZH */
    --color-secondary-400: #666666; /* Black 60 ZH */
    --color-secondary-500: #4d4d4d;
    --color-secondary-600: #333333; /* Black 80 ZH – Footer-Info */
    --color-secondary-700: #1a1a1a; /* Footer-Navigation (near black) */
    --color-secondary-800: #0d0d0d;
    --color-secondary-900: #000000; /* Black 100 ZH */

    /* Tailwind-Theme-Variablen (prose-Links, Ring, etc.) ----------------- */
    --color-light: 0 112 180; /* #0070B4 */
    --color-dark: 0 64 124;   /* #00407C */
}

/**
 * Typografie: Helvetica Now ist lizenzpflichtig, daher die offiziell
 * freigegebene ZH-Alternative "Inter" mit den vom Designsystem geforderten
 * OpenType-Features. Überschreibt die DS-Aliase Font-Regular/Font-Bold/…
 * (= Frutiger Neue) per !important, da das DS font-family explizit setzt.
 */
body,
button,
input,
select,
textarea,
p, li, a, span, label, div,
h1, h2, h3, h4, h5, h6,
.prose,
[class*="text--"],
[class*="h1"], [class*="h2"], [class*="h3"],
[class*="h4"], [class*="h5"], [class*="h6"] {
    font-family: 'Inter', 'Helvetica Now Text', 'Helvetica Neue', Arial, sans-serif !important;
    font-feature-settings: 'ss07', 'ss08', 'cv03', 'cv04', 'cv10';
}

/* Offizielle Kanton-Zürich-Lockup-Marke (Wappen + Schriftzug) im Logo-Slot */
.logo__flag {
    width: auto;
    height: 2.75rem;
    max-width: 100%;
}

/* Eidgenössischer Wortmarken-Schriftzug entfällt im Kanton-Zürich-Branding */
.logo__name {
    display: none;
}

/* ============================================================
   Feinschliff Richtung zh.ch – Top-Bar, Buttons, Hero, Footer, Typografie
   ============================================================ */

/* --- Top-Bar: Wappenblau des Kantons Zürich (Hintergrundton des Wappens) --- */
.top-bar {
    background-color: #0070b4; /* Wappenblau rgb(0,112,180) – Hintergrundton des Kanton-Zürich-Wappens */
}

/* --- Buttons: zh.ch-typisches Verhalten – Outline füllt sich bei Hover/Fokus solide ZH-blau --- */
.btn--outline {
    font-weight: 500;
    border-width: 2px;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn--outline:hover,
.btn--outline:focus {
    background-color: var(--color-primary-600); /* ZH Blau */
    border-color: var(--color-primary-600);
    color: #ffffff;
}

/* --- Überschriften: kräftigere Inter-Gewichte (ZH nutzt Helvetica Now Black) --- */
h1, .h1, h2, .h2, h3, .h3 {
    font-weight: 700;
    letter-spacing: -0.01em;
}
h4, .h4, h5, .h5, h6, .h6 {
    font-weight: 600;
}

/* --- Hero / Seitentitel: ZH-blauer Akzentstrich unter dem H1 --- */
main .h1 {
    position: relative;
    padding-bottom: 0.5rem;
}
main .h1::after {
    content: "";
    display: block;
    width: 3rem;
    height: 4px;
    margin-top: 0.75rem;
    background-color: var(--color-primary-600); /* ZH Blau */
}

/* --- Lead-Text etwas grösser/ruhiger (zh.ch-Einstieg) --- */
.lead {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--color-secondary-700);
}

/* --- Footer-Links: Unterstreichung bei Hover für klarere Interaktion --- */
.footer__link:hover,
.footer__link:focus {
    text-decoration: underline;
}

/* --- Top-Bar-Dropdown (Methoden-Auswahl): Wappenblau wie die Top-Bar-Zeile --- */
.top-bar .input--negative,
.top-bar select.input--negative {
    background-color: #0070b4; /* Wappenblau – wie die Bar */
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
}
.top-bar .input--negative:hover,
.top-bar .input--negative:focus {
    background-color: #00608f; /* dezent dunkler bei Hover */
    color: #ffffff;
}
/* Aufgeklappte Options ebenfalls in Wappenblau */
.top-bar .input--negative option {
    background-color: #0070b4;
    color: #ffffff;
}
/* Platzhalter „Bitte auswählen“ ist eine disabled-Option und wird vom Browser
   abgeblendet/ausgegraut dargestellt – darum wirkt nur er kontrastarm. Hier auf
   volles, deckendes Weiss erzwungen, damit er so klar lesbar ist wie die
   übrigen Optionen (Feld & restliche Optionen bleiben unverändert). */
.top-bar .input--negative option:disabled,
.top-bar .input--negative option[value=""] {
    color: #ffffff;
    opacity: 1;
}
.top-bar select.input--negative {
    -webkit-text-fill-color: #ffffff; /* deckende Anzeige des Platzhalters in WebKit/Blink */
}

/* --- Fusszeilen in ZH-Blautönen statt Grau/Schwarz --- */
#footer-information-container {
    background-color: #0070b4; /* Wappenblau rgb(0,112,180) – Hintergrundton des Kanton-Zürich-Wappens (obere Fusszeile) */
}
#footer-navigation-container {
    background-color: #002c52; /* dunkler – unterste Leiste */
}
/* Hover der "Weitere Informationen"-Links: dunkleres ZH-Blau statt Schwarz (secondary-700) */
.footer-information__links .footer__link:hover,
.footer-information__links .footer__link:focus {
    background-color: #002c52;
    color: #ffffff;
}

/* ============================================================
   Blauer Portal-Header im zh.ch-Startseiten-Stil
   (Header-Band ZH-Blau, weisses Wappen + weisse Schrift)
   ============================================================ */
.top-header {
    background-color: #0070b4; /* ZH Blau */
    color: #ffffff;
}
/* Wappen-Logo: KEINE CSS-Umfärbung. Die Heraldik (Löwe) ist direkt im SVG weiss
   eingefärbt, das blau-weisse Zürich-Quadrat behält seine Farben (#009ee0/weiss). */
/* Seitentitel weiss + grösser (Portal-Look) */
.top-header .logo__title {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1.1;
}
.top-header__mobile-title {
    background-color: #0070b4 !important; /* hellblau wie das Header-Band (Mobil: graue Leiste ersetzen) */
    color: #ffffff;
}
.top-header .logo__separator {
    background-color: rgba(255, 255, 255, 0.5);
}
/* Meta-Navigation, Logo-Link, Suche-Text weiss */
.top-header a,
.top-header .meta-navigation a,
.top-header .meta-navigation a span,
.top-header .search__button__title {
    color: #ffffff;
}
/* Icons (Suche etc.) weiss – Logo bleibt <img>, daher nicht betroffen */
.top-header .icon,
.top-header .search__button__icon,
.top-header svg {
    fill: #ffffff;
}
/* Burger-Linien weiss – die Linien sind border-top (2px), daher border-color + currentColor setzen */
.top-header .burger,
.top-header .burger__icon {
    color: #ffffff !important;
}
.top-header .burger__bar {
    background-color: transparent !important;
}
.top-header .burger__bar::after,
.top-header .burger__bar::before {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}

/* Wappen/Logo im blauen Header grösser */
.top-header .logo__flag {
    height: 5rem;
}

/* Sprachumschalter ausblenden (nur Deutsch aktiv) */
.top-bar .language-switcher {
    display: none !important;
}
/* Suchfeld-Linie auf Blau sichtbar */
.top-header .search__group,
.top-header .input--outline {
    border-color: rgba(255, 255, 255, 0.6);
}

/* ============================================================
   Methodenabbildung: automatisch verlinkte SVG-Grafik
   (Content.Methodenabbildung – Link-Overlays vom MethodenabbildungLinker:
   <a class="me-link"> mit transparentem <rect class="me-hit">)
   ============================================================ */
.methodenabbildung {
    width: 100%;
    /* Kein overflow-x:auto hier: horizontales Scrollen auf schmalen Viewports
       übernimmt der Grafik-Container (.methodenabbildung__grafik, siehe Hermes.css). */
}
/* Bewusst auf __grafik gescopet (nicht ".methodenabbildung svg"): sonst träfe die
   Regel auch das Lupen-Icon-SVG. Kein max-width-Deckel mehr (war 1070px =
   Originalgrösse): das Big Picture ist eine Vektorgrafik und füllt die volle
   Inhaltsspalte (siehe Hermes.css). */
.methodenabbildung__grafik svg {
    display: block;
    width: 100%;
    height: auto;
}
/* Mobile/schmale Viewports: das Diagramm ist zu detailliert, um es auf
   Handybreite zu verkleinern -> feste, lesbare Breite + horizontal scrollbar
   (der Grafik-Container scrollt, siehe Hermes.css). */
@media (max-width: 800px) {
    .methodenabbildung__grafik svg {
        width: 760px;
        max-width: none;
        margin: 0;
    }
}
.methodenabbildung a.me-link {
    cursor: pointer;
}
.methodenabbildung a.me-link .me-hit {
    fill: transparent;
    transition: fill 0.12s ease, stroke 0.12s ease;
}
/* Hover/Fokus: Label dezent ZH-blau hervorheben */
.methodenabbildung a.me-link:hover .me-hit,
.methodenabbildung a.me-link:focus .me-hit {
    fill: rgba(0, 112, 180, 0.18); /* ZH Wappenblau, transparent */
    stroke: #0070b4;
    stroke-width: 1.5;
}
.methodenabbildung a.me-link:focus {
    outline: none;
}
.methodenabbildung a.me-link:focus-visible .me-hit {
    fill: rgba(0, 112, 180, 0.25);
    stroke: #002c52;
    stroke-width: 2;
}

/* Backend-Bereich des Methodenabbildung-Elements (nur im Editor sichtbar) */
.methodenabbildung__backend {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px dashed #b0bec5;
    border-radius: 4px;
    background: #f7f9fb;
    font-size: 0.9rem;
}
.methodenabbildung__hinweis {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-left: 4px solid #e8a800; /* Warn-Gelb: noch nicht verlinkt */
    background: #fff8e6;
}
.methodenabbildung__hinweis ul {
    margin: 0.4rem 0;
    padding-left: 1.2rem;
    columns: 2;
}
.methodenabbildung__hinweis li {
    list-style: disc;
}
.methodenabbildung__tipp {
    margin: 0.4rem 0 0;
    color: #4a6072;
    font-style: italic;
}
.methodenabbildung__zuordnungen-titel {
    font-weight: 600;
    color: #002c52;
    margin-bottom: 0.4rem;
}
.methodenabbildung__zuordnung {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid #e3e8ec;
}
.methodenabbildung__zuordnung-label {
    font-weight: 600;
}
.methodenabbildung__zuordnung-pfeil {
    color: #0070b4;
}
.methodenabbildung__zuordnung-ziel {
    color: #002c52;
}

/* Kantonales Methodenelement: Wappen-Badge hinter dem Titel (KantonWappen.fusion).
   Seit 2026-09-14 ein INLINE-Span mit dem Wappen als Hintergrundbild und einem geschützten
   Leerzeichen als Inhalt: Browser brechen vor einem <img> (atomarer Inline) trotz &nbsp; um,
   vor einem Textzeichen nicht. So bleibt das Wappen garantiert am letzten Wort, und das Wort
   darf trotzdem umbrechen bzw. silbengetrennt werden («Datenschutzfolge-abschätzung»). Die
   frühere nowrap-Lösung machte lange Einwort-Titel unumbrechbar → Beziehungstabellen liefen
   über die Inhaltsspalte hinaus (Befund Jan, Rollenseite Anwendervertreter). */
.kanton-wappen-badge {
    display: inline;
    background-repeat: no-repeat;
    background-position: right 55%;
    background-size: auto 0.95em;
    padding-left: 0.85em;   /* Wappen 100:120 → Breite ≈ 0.8em bei 0.95em Höhe */
    margin-left: 0.05em;
    text-decoration: none;
}

/* Letztes Wort des Titels + Wappen: darf jetzt umbrechen und silbentrennen; das Zusammen-
   halten mit dem Badge übernimmt das geschützte Leerzeichen im Badge-Span (siehe oben). */
.kanton-wappen-nowrap {
    white-space: normal;
    -webkit-hyphens: auto;
    hyphens: auto;
}