/* Pro Tier — Header: durchgehend Corporate-Blau, zentrierte Achse (ECOTHERM)

   Der GESAMTE Header-Block liegt im Corporate-Blau (--header-bg): ContactBar,
   Topbar, Logo-Zeile und Navigation. Darauf mittig das Logo, darunter — durch
   eine helle Haarlinie abgesetzt — die ebenfalls mittige Hauptnavigation.

   Warum symmetrisch statt Logo-links/Nav-rechts: Die zentrierte Achse ist
   die klassische Anmutung (Kanzlei, Notariat, Traditionshaus) und passt zum
   Portikus-Logo. Sie führt das Auge auf einer Linie von oben nach unten,
   statt es über die volle Breite springen zu lassen — für die Zielgruppe
   die ruhigere Leseführung.

   ⚠ LOGO: Auf blauem Grund braucht es die HELLE/weisse Logo-Variante
   (wie auf der Bestandsseite). Ein dunkles SVG waere hier unsichtbar.

   ⚠ GOLD NICHT auf Blau: --color-brand-gold (#A9762D) erreicht gegen
   #0061AA nur 1,6:1 — als Nav-Unterstreichung oder Text im Header
   unbrauchbar. Aktive Zustaende laufen hier ueber Weiss. */

:root {
  /* Header-Flaechenfarben an einer Stelle.

     Der Kopf ist in drei Baendern abgestuft — von hell nach dunkel, damit
     er trotz der grossen Flaeche Tiefe bekommt statt als ein Klotz zu wirken:

       1. Topline (Kontakt + Service)  --color-band          helles Grau
       2. Logo-Band                    --header-bg           Original-Blau #0061AA
       3. Hauptnavigation              --header-nav-bg       vertieftes Blau

     Die Navigation traegt damit das dunkelste Band und schliesst den Kopf
     nach unten sichtbar ab — zugleich steht die weisse Schrift dort auf dem
     hoechsten Kontrast (9,3:1 statt 6,4:1). */
  --header-bg:        var(--color-brand-blue);
  --header-nav-bg:    var(--color-primary);
  --header-on-bg:     hsl(0 0% 100%);
  --header-rule:      hsl(0 0% 100% / 0.22);
}

/* Header-Block im Blauton — auch auf Mobile/Tablet, deshalb ausserhalb der
   Desktop-Media-Query. Die inneren Baender erben die Flaeche, statt eigene
   Hintergruende zu setzen.

   AUSGENOMMEN: die oberste Zeile (Kontaktangaben + Service-Nav). Die bleibt
   im hellen Grau — siehe Topline-Block in der Desktop-Query. */
#site-header,
#site-header #topbar,
#site-header #brand {
  background: var(--header-bg);
  color: var(--header-on-bg);
}

/* Navigation eine Stufe dunkler — schliesst den Kopf nach unten ab. */
#site-header #main-nav {
  background: var(--header-nav-bg);
  color: var(--header-on-bg);
}

#site-header #topbar a {
  color: var(--header-on-bg);
}

@media (min-width: 79.5rem),
       (min-width: 45rem) and (orientation: landscape) {
  #site-header {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "topline"
      "topbar"
      "brand"
      "nav";
    border-bottom: none;
  }

  /* ---- Topline: Kontaktzeile + Service-Nav in EINER Reihe ----------
     Muster aus _vorlage/header.css. Spart die Höhe einer kompletten
     Leiste; beide Inhalte sind kurz (Firmenname/Telefon/E-Mail links,
     Kontakt/Anfahrt/Merkliste rechts), nebeneinander bleibt Luft.

     Beide liegen in DERSELBEN Fläche und werden per justify-self
     auseinandergezogen, statt je eine Spalte zu belegen — so bleiben die
     Breiten der Zeilen darunter unabhängig.

     ⚠️ In einer gemeinsamen Fläche weichen sie einander nicht aus: Werden
     die Inhalte deutlich länger, überlappen sie, statt umzubrechen. Im
     Zweifel auf schmalen Tablet-Breiten den Firmennamen ausblenden.

     Die Zeile für #topbar bleibt bestehen, obwohl dieses Projekt keinen
     #topbar hat — eine Grid-Zeile ohne Inhalt ist 0 hoch, kostet also
     nichts, falls er dazukommt. */

  /* Zwei IDs statt einer: Der Kernel setzt `#contact-bar { background:
     var(--color-bg-alt) }` in 04-layout.css. Gleiche Gewichtung und eine
     Frage der Ladereihenfolge — mit dem zusätzlichen `#site-header`
     gewinnt die Regel unabhängig davon, wann die Datei geladen wird. */
  #site-header #contact-bar {
    grid-area: topline;

    /* Füllt die Zeile und trägt damit die durchgehende Fläche. Die
       Service-Nav liegt in derselben Fläche rechts und sitzt darauf.
       Der Kernel setzt `space-between`, wodurch die Icons bei voller
       Breite unter der Service-Nav landeten — `flex-start` hält die
       Gruppe links zusammen. */
    justify-self: stretch;
    align-self: stretch;
    justify-content: flex-start;

    /* Helles Grau statt des Header-Blaus: die Zeile setzt sich als
       ruhige Service-Leiste vom Markenblock darunter ab. Derselbe Ton
       wie die übrigen Bänder (aus --color-bg-dark aufgehellt), trägt
       also denselben Hue. */
    background: var(--color-band);
    color: var(--color-text-muted);

    /* Bewusst KEINE Trennlinie — der Farbwechsel Grau → Blau grenzt die
       Zeile bereits deutlich genug ab. */
    border-bottom: none;

    /* Schrift wie in der Service-Nav daneben: Der Kernel gibt der
       Kontaktzeile --text-xs, der Service-Nav auf Desktop gar keine
       Größe (erbt also die Grundschrift) — in einer gemeinsamen Zeile
       fiele der Unterschied auf. */
    font-size: inherit;
  }

  #site-header #contact-bar a {
    color: var(--color-text-muted);
  }

  #site-header > .service {
    grid-area: topline;
    justify-self: end;
    align-self: center;
    background: transparent;
    color: var(--color-text-muted);

    /* An den SEITENRAND, nicht an die Content-Kante.
       Die Vorlage nutzt hier --header-inset, weil dort die Hauptnavigation
       rechtsbündig auf der Content-Linie sitzt und die Service-Nav damit
       fluchtet. In diesem Projekt ist die Navigation ZENTRIERT — es gibt
       keine rechte Content-Kante, an der sich etwas ausrichten könnte.
       --header-inset waere hier ein reiner Versatz: auf breiten Viewports
       schiebt `calc((100vw - 95rem)/2 + 1.5rem)` die Leiste bis zu 970 px
       nach innen (gemessen), sie stuende dann mitten im Nichts.
       --padding-page setzt sie spiegelbildlich zur Kontaktzeile links. */
    padding-inline-end: var(--padding-page);
  }

  #topbar {
    grid-area: topbar;
  }

  /* max-width/margin-auto aus layout.css aufheben → Grid füllen.
     Beide Zeilen bekommen symmetrisches Innen-Padding, damit die
     Mittelachse tatsächlich die Viewport-Mitte ist. */
  #site-header #brand,
  #site-header #main-nav {
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--padding-page);
  }

  /* ---- Logo-Zeile ------------------------------------------------ */
  #site-header #brand {
    grid-area: brand;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-5);
  }

  /* WICHTIG: Der Kernel gibt #logo ein `flex: 1 1 0%` — als Flex-Item mit
     flex-grow zieht sich der Container ueber die gesamte Zeilenbreite, das
     Bild klebt dann links und justify-content am #brand laeuft ins Leere.
     `flex: 0 1 auto` erlaubt Schrumpfen, aber kein Dehnen → Icon + Logo
     bilden eine Gruppe, die tatsaechlich in der Viewport-Mitte sitzt.
     (Verifiziert an der Live-Seite: Abweichung 1 px.) */
  #site-header #brand #logo {
    flex: 0 1 auto;
    width: auto;
  }

  /* Freistehend und mittig darf die Wortmarke deutlich größer stehen als
     in der gedrängten Links-Position — sie ist hier das Hauptmotiv.
     max-height gehoert auf das <img> im <picture>, nicht auf den
     #logo-Container (der ist ein DIV ohne eigene Bildhoehe). */
  #site-header #brand #logo img {
    max-height: 4.5rem;
    width: auto;
  }

  /* ---- Navigations-Zeile ------------------------------------------ */
  #site-header #main-nav {
    grid-area: nav;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Keine Trennlinie: Seit die Navigation ein eigenes, dunkleres Blau
       traegt, grenzt der Farbwechsel sie deutlich genug ab — wie bei der
       Topline darueber. Eine zusaetzliche Haarlinie waere ein dritter
       Trenner auf engem Raum. */
    border-top: none;
  }

  #site-header #main-nav > ul {
    justify-content: center;
  }

  /* Order-Variablen nicht nötig — Grid-Areas übernehmen */
  #contact-bar,
  #topbar,
  #site-header > .service,
  #site-header #brand,
  #site-header #main-nav {
    order: unset;
  }

  /* Lang-Switch: einfache Inline-Links auf dunklem Topbar.
     Layout (display/align/gap/font-size) kommt vom Kernel-Default in
     components/lang-switch.css, hier nur Topbar-spezifische Farben.
     Derzeit inaktiv (active_languages = ['de']) — Regeln bleiben stehen,
     damit eine spätere Zweitsprache ohne Nacharbeit korrekt aussieht.
     > a (direct child) statt deszendierendem Selektor: greift nur auf die
     Inline-Topbar-Links (2-5 Sprachen), NICHT auf <a> im Dropdown-Panel
     (#lang-switch > ul > li > a). Sonst würde der Dropdown-Inhalt weiß auf
     hellem BG werden → bisher mit !important in lang-switch.css gefixt. */
  #lang-switch > a {
    color: var(--color-topbar-text);
    transition: opacity var(--transition);
  }
  #lang-switch > a:hover {
    opacity: 0.7;
  }
  #lang-switch > span[aria-current] {
    color: var(--color-topbar-text);
    opacity: 0.6;
  }

  /* Dropdown-Modus (6+ Sprachen): lang-switch sitzt INSIDE der .service-nav
     im dunklen Topbar. Globaler Hover (var(--color-bg-alt) ≈ weiß) würde
     hier "weiß auf weiß" erzeugen — Override mit hellem Tint auf dunkel. */
  #site-header .service #lang-switch {
    margin-inline-end: var(--padding-page);
  }
  #site-header .service #lang-switch > button:hover,
  #site-header .service #lang-switch > button[aria-expanded="true"] {
    background: transparent;
    border-color: transparent;
  }

  /* Service-Hover — durchgängig Opacity (Icons + Text).
     > a (direct child) damit Lang-Switch-Dropdown-Items (.service > #lang-switch
     > ul > li > a) NICHT die Leisten-Textfarbe erben.

     Zwei Kontexte, zwei Farben: Die Service-Nav in der grauen Topline
     (#site-header > .service) braucht dunklen Text — weiss waere dort
     unsichtbar. Liegt sie dagegen im blauen #topbar, bleibt sie weiss. */
  #site-header > .service > a {
    color: var(--color-text-muted);
    transition: opacity var(--transition);
  }
  #site-header #topbar > .service > a {
    color: var(--color-topbar-text);
    transition: opacity var(--transition);
  }
  #site-header #topbar > .service > a:hover,
  #site-header > .service > a:hover {
    opacity: 0.7;
  }

  /* Main-Nav auf blauem Grund: weisse Schrift, aktiver Zustand als weisse
     Unterstreichung. Klickziele bewusst großzügig: mehr Padding = größere
     Trefferfläche, was bei nachlassender Feinmotorik spürbar hilft.
     Schrift eine Spur größer als der Kernel-Default. */
  #site-header #main-nav > ul > li > a {
    color: var(--header-on-bg);
    font-size: var(--text-base);
    padding-block: var(--space-4);
    padding-inline: var(--space-4);
    border-bottom: 0.1875rem solid transparent;
    transition: border-color var(--transition), opacity var(--transition);
  }
  #site-header #main-nav > ul > li > a:hover,
  #site-header #main-nav > ul > li:hover > a {
    color: var(--header-on-bg);
    border-bottom-color: var(--header-rule);
  }
  #site-header #main-nav > ul > li.active > a,
  #site-header #main-nav > ul > li > a[aria-current="page"] {
    color: var(--header-on-bg);
    border-bottom-color: var(--header-on-bg);
  }

  /* Dropdown-Menü: klassischer Look (heller BG, normale Border + Shadow) */
  #site-header #main-nav ul ul,
  #site-header #main-nav li.open > ul {
    background: var(--color-bg);
    border: 0.0625rem solid var(--color-border);
    box-shadow: var(--shadow-lg);
  }

  /* Dropdown-Item Hover/Active: klassischer Background-Change */
  #site-header #main-nav ul ul a:hover,
  #site-header #main-nav ul ul a[aria-current="page"] {
    background: var(--color-bg-alt);
    color: var(--color-primary);
  }
}

/* Mobile/Tablet-Portrait Brand+Burger-Block jetzt zentral in
   components/header.css — war hier byte-identisch zu default. */

/* Mobile/Tablet-Portrait Sichtbarkeit + Hover-Override für lang-switch
   leben jetzt zentral in components/lang-switch.css (tier-unabhängig). */

@media (min-width: 45rem) and (max-width: 79.499rem) and (orientation: portrait) {
  #logo {
    display: none;
  }
}

/* Pro-Tier Tablet + Mobile: Lang-Switch nutzt Kernel-Default-Layout +
   Topbar-Text-Color/Hover-Opacity (analog Desktop), linksbuendig via
   margin-inline-end: auto statt rechts. */
@media screen and (max-width: 79.499rem) {
  #site-header #lang-switch {
    margin-inline-end: auto;
    margin-inline-start: -.5rem;
  }
  #site-header #lang-switch > a {
    color: var(--color-topbar-text);
    transition: opacity var(--transition);
  }
  #site-header #lang-switch > a:hover {
    opacity: 0.7;
  }
  #site-header #lang-switch > span[aria-current] {
    color: var(--color-topbar-text);
    opacity: 0.6;
  }
}

/* Tablet-Landscape läuft über den Desktop-Block oben (zentrierte Achse).
   Das Logo bleibt dort sichtbar — in der eigenen, mittigen Zeile ist der
   Platz vorhanden, der in der früheren Links/Rechts-Aufteilung fehlte.
   Nur die Höhe wird zurückgenommen, damit der Header nicht zu viel vom
   Viewport frisst. */
@media (min-width: 45rem) and (max-width: 79.499rem) and (orientation: landscape) {
  #site-header #brand {
    padding-block: var(--space-4);
  }
  #site-header #brand #logo {
    max-height: 3.25rem;
  }
}

/* Sehr schmale Smartphones: Logo komplett raus, Brand reduziert sich auf das Icon. */
@media (max-width: 22rem) {
  #logo {
    display: none;
  }
}


/* ============================================================================
   TEASER-TINT — Goldstich auf dem Hero-Bild
   ============================================================================

   ⚠️ WARUM STEHT DAS IN header.css?
   Der Kernel laedt aus dem Tier-Ordner ausschliesslich DREI Dateien:
   card.css, header.css, variables.css (im Quelltext der Live-Seite geprueft).
   Eine eigene teaser.css — wie sie _vorlage/ mitbringt — wuerde NICHT
   eingebunden. Der Block liegt deshalb hier, direkt hinter dem Kopfbereich,
   dem der Teaser optisch angehoert.

   Uebernommen aus _vorlage/teaser.css, umgestellt auf den ECOTHERM-Goldton
   (--color-brand-gold, gemessen auf im-ecotherm.de).

   Wirkung der Filterkette:
     sepia      legt einen warmen Braunton ueber das ganze Bild
     saturate   holt die vom sepia geschluckte Farbigkeit zurueck
     hue-rotate schiebt den Braunton Richtung Orange/Gold
     contrast   faengt die Flauheit auf, die sepia mitbringt

   Umgesetzt als Filter auf dem Bild, NICHT als eigene Ebene: Der Kernel legt
   seinen Scrim auf .bg::after — ein zweiter Hintergrund dort wuerde ihn
   ERSETZEN statt ergaenzen, und damit ginge die Abdunklung verloren, die den
   weissen Text ueber hellen Bildpartien lesbar haelt. (An der Live-Seite
   geprueft: .bg::after ist belegt, .bg::before war frei.)

   ─── Staerke einstellen ───────────────────────────────────────────────────
   Ueber die Variablen unten. --teaser-tint-sepia ist der Hauptregler:
     0.30  deutlich (aktuell) · 0.18 zurueckhaltend · 0.08 nur ein Hauch
   --teaser-tint-hue steuert die Richtung: staerker negativ = oranger,
   Richtung 0 = neutraler Sepiaton.

   ⚠️ Auf Motiven mit viel Himmel faellt der Effekt am staerksten auf — das
   Blau entsaettigt sichtbar. Das ist gewollt (warme, einheitliche Stimmung),
   sollte aber bei jedem neuen Teaser-Bild gegengeprueft werden. */

:root {
  --teaser-tint-sepia:      0.30;
  --teaser-tint-saturate:   1.30;
  --teaser-tint-hue:      -10deg;
  --teaser-tint-brightness: 1.02;
  --teaser-tint-contrast:   1.04;

  /* Deckkraft des Rasters (siehe unten).
     0.10 deutlich · 0.06 zurueckhaltend · 0.03 kaum wahrnehmbar. */
  --teaser-dither-opacity:  0.06;
}

#teaser-slider .bg img {
  filter:
    sepia(var(--teaser-tint-sepia))
    saturate(var(--teaser-tint-saturate))
    hue-rotate(var(--teaser-tint-hue))
    brightness(var(--teaser-tint-brightness))
    contrast(var(--teaser-tint-contrast));
}

/* Auf den kompakten Baendern der Unterseiten schwaecher dosiert.
   Dort ist nur ein flacher Ausschnitt zu sehen und der Text liegt dichter
   ueber dem Motiv — in voller Staerke kippt ein knapper Bildstreifen schnell
   ins Braeunliche und liest sich als Fehler statt als Stimmung. Etwa die
   halbe Sepia-Dosis; die Hue-Rotation bleibt gleich, damit die Richtung
   dieselbe ist. */
#teaser-slider.teaser-compact .bg img {
  --teaser-tint-sepia:    0.15;
  --teaser-tint-saturate: 1.16;
  --teaser-tint-contrast: 1.02;
}

/* ─── Feines Raster ueber dem Bild („Dither") ──────────────────────────────
   2x2-Muster aus einem goldgetoenten und einem neutralen Feld, gekachelt auf
   3px. `mix-blend-mode: overlay` verrechnet es mit dem Bild, statt es zu
   ueberdecken — das Motiv behaelt seine Farben und bekommt eine feine Textur.

   ⚠️ Im overlay-Modus ist hsl(0 0% 50%) NEUTRAL — der Effekt entsteht allein
   aus dem Abstand zu diesem Mittelwert. Schwaecher heisst also: die Werte
   NAEHER an 50 % ruecken, nicht weiter weg.

   Liegt bewusst auf .bg::before (frei) und damit UNTER dem Kernel-Scrim auf
   .bg::after: Das Raster gehoert aufs Motiv, nicht auf die Abdunklung, die
   den Text lesbar haelt. */
#teaser-slider .bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: repeating-conic-gradient(
    var(--color-brand-gold) 0% 25%,
    hsl(0 0% 50%) 0% 50%
  );
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  opacity: var(--teaser-dither-opacity);
}

/* Auf den kompakten Baendern feiner: Der sichtbare Bildstreifen ist flach,
   ein groeberes Raster liefe dort als sichtbare Streifung quer durchs Bild. */
#teaser-slider.teaser-compact .bg::before {
  background-size: 2px 2px;
  --teaser-dither-opacity: 0.07;
}