/* ==========================================================================
   ETA – Kopfzeile
   Aufbau und Verhalten nach der internen Bauvorlage (Vorlage
   ~/team/etaneu/gemeinsam/navigation.md), in der ETA-Marke gesetzt:

     .kopf-hinweis   Puder-Zeile: Beratung in der Schweiz mit Adresse
     .kopf-oben      Weiss: Logo links, rechts Telefon · Suche · Sprache · Knopf
     .kopf-menue     Rose-Band mit den neun Menuepunkten und ihren Feldern
                     (ab 1280 px Mega-Menue, darunter Akkordeon im Panel)

   Diese Datei wird nach style.css geladen und traegt die gesamte Kopfzeile.
   In style.css steht dazu nichts mehr.
   ========================================================================== */

.site-header {
  /* ---- Farben der Kopfzeile ------------------------------------------
     Aus dem Markenhandbuch. Reines Rose #BE6F74 traegt weisse Schrift nur
     mit 3.68:1 — zu wenig fuer 15 px. Das Band steht deshalb in Rose 700
     (#7D494D, 7.15:1 mit Weiss), der Hover eine Stufe heller in Rose 600
     (#9C5B60, 5.15:1). Reines Rose bleibt der Akzent fuer Linien und
     Markierungen, wo es keine Schrift traegt. */
  --kopf-band:        #7D494D;   /* Rose 700 – Menueband, Knopf             */
  --kopf-band-hover:  #9C5B60;   /* Rose 600 – Hover auf dem Band           */
  --kopf-band-tief:   #5F383B;   /* Rose 800 – Knopf-Hover                  */
  --kopf-rose:        #BE6F74;   /* Rose 500 – Markierung, Linien, Ikonen   */
  --kopf-bordeaux:    #8E4A50;   /* 6.47:1 auf Weiss – Telefon, Hinweis     */
  --kopf-puder:       #F7EEEC;
  --kopf-anthrazit:   #231F20;   /* 16.3:1 auf Weiss – Flyout-Schrift       */
  --kopf-grau:        #5A5758;   /* Neutral 700, 7.0:1 auf Weiss            */
  --kopf-linie:       #E8CDCE;   /* Rose 200                                */
  --kopf-linie-band:  rgba(255, 255, 255, .22);

  /* ---- Grund des Mega-Menues (ab 1280 px) -----------------------------
     Erste Fassung: die ganze Flaeche in Bordeaux 100. Weisse Felder auf
     weisser Seite waren vorher verschwommen, der getoente Grund machte das
     Feld aber truebe und flach (Janine 14.10.: «nicht schoen»).
     Jetzt traegt nicht die Flaeche die Abgrenzung, sondern die Kante: ein
     fast weisser Grund mit einem Hauch Rose, eine feine Rose-Linie ringsum
     und ein ruhiger, tiefer Schatten. Rose und Bordeaux bleiben Akzent —
     Gruppentitel, Linien, Hover, Fusszeile.
     Rose 500 als Kante hat 3.64:1 zur weissen Seite und erfuellt damit
     WCAG 1.4.11 fuer die Umrandung eines Bedienelements. Schrift auf dem
     Feld: Anthrazit 16.2:1, Bordeaux 700 10.4:1 — beide weit ueber AA. */
  --kopf-feld:        #FFFDFD;   /* fast Weiss, ein Hauch Rose              */
  --kopf-feld-ruhe:   #F3E5E6;   /* Rose 100 – Hover- und Fussflaeche;
                                    Bordeaux 700 darauf 8.6:1, Anthrazit
                                    13.4:1                                  */
  --kopf-feld-rand:   #BE6F74;   /* Rose 500 – Kante, 3.64:1 zur Seite      */
  --kopf-feld-akzent: #603237;   /* Bordeaux 700 – 10.4:1 / 8.6:1           */
  --kopf-feld-leise:  #5A5758;   /* Neutral 700 – 6.9:1 auf dem Feld        */
  --kopf-feld-schatten:
    0 1px 2px rgba(68, 40, 43, .07),
    0 14px 28px -10px rgba(68, 40, 43, .26),
    0 36px 64px -32px rgba(68, 40, 43, .34);

  /* Dieselbe Kante wie jedes Inhaltsband (style.css: .hero, .section …):
     Logo, Menue und Text stehen so auf einer Linie (Gregor 13.10.). */
  --kopf-rand: max(var(--rand), calc((100% - var(--satz)) / 2));
  /* Das komplette Logo mit «Europe · Turkey · Asia» (Gregor 13.10.: «darf
     nicht abgeschnitten werden»). Die Unterzeile ist 5,25 % der Bildhoehe
     hoch. Gregor 13.10.: 118–148 px war «viel zu gross» – jetzt 76 px am
     Handy bis 92 px, ab 1280 px 96 px. Vollstaendig bleibt es trotzdem. */
  --kopf-logo-hoehe: clamp(76px, 2vw + 68px, 92px);

  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--kopf-linie);
  /* Nie durchsichtig ueber dem Aufmacher: das Vorbild hat eine deckende
     Leiste von der ersten Bildzeile an, und weisse Schrift auf wechselndem
     Motiv war der haeufigste Lesbarkeitsmangel der alten Leiste. */
  font-family: var(--sans);

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "hinweis hinweis"
    "logo    burger"
    "menue   menue"
    "werkzeuge werkzeuge";
}

/* ---------------------------------------------------------- Hinweiszeile */

.kopf-hinweis {
  grid-area: hinweis;
  margin: 0; padding: var(--raum-1) var(--kopf-rand);
  background: var(--kopf-puder); color: var(--kopf-bordeaux);
  font-size: var(--t-200); line-height: 1.45; text-align: center;
  letter-spacing: 0.02em;
}
/* Beratung in der Schweiz mit Adresse (Gregor 11.10.). Titel und Adresse
   brechen nur als Ganzes um: am Handy stehen sie sauber in zwei Zeilen,
   nie wird «St. Margrethen» abgeschnitten oder zerrissen. */
.kopf-hinweis-link {
  display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 0 var(--raum-2);
  color: inherit; text-decoration: none;
}
.kopf-hinweis-link .ikon { flex: 0 0 auto; color: var(--kopf-rose); }
.kopf-hinweis-titel { font-weight: 600; white-space: nowrap; }
.kopf-hinweis-adresse { white-space: nowrap; text-decoration: underline;
  text-decoration-color: var(--kopf-linie); text-underline-offset: 3px; }
.kopf-hinweis-trenner { color: var(--kopf-rose); }
.kopf-hinweis-link:hover .kopf-hinweis-adresse { text-decoration-color: currentColor; }
.kopf-hinweis-link:focus-visible { outline: 2px solid var(--kopf-band); outline-offset: 2px; }
@media (max-width: 560px) {
  /* Zwei Zeilen statt einer: der Trenner wuerde sonst am Zeilenende haengen. */
  .kopf-hinweis-trenner { display: none; }
  .kopf-hinweis-adresse { flex-basis: 100%; }
}

/* --------------------------------------------------------- Obere Zeile */

.kopf-oben { display: contents; }

.kopf-logo {
  grid-area: logo;
  display: flex; align-items: center;
  min-height: var(--ziel);
  padding: var(--raum-2) 0 var(--raum-2) var(--kopf-rand);
}
.kopf-logo img {
  display: block; height: var(--kopf-logo-hoehe); width: auto;
  /* Nie stauchen oder beschneiden: das Bild behaelt seine volle Groesse,
     auch wenn die Zeile knapp wird. */
  flex: 0 0 auto; max-width: none; object-fit: contain;
  transition: opacity var(--ueber);
}
.kopf-logo:hover img { opacity: .85; }

.kopf-werkzeuge {
  grid-area: werkzeuge;
  display: flex; align-items: center; gap: var(--raum-3); min-width: 0;
}

/* -------------------------------------------------------------- Telefon */

.kopf-telefon {
  display: inline-flex; align-items: center; gap: var(--raum-2);
  /* Feste Hoehe statt «min-height»: in der oberen Zeile stehen Telefon,
     Suchfeld, Sprache und Knopf nebeneinander und muessen gleich hoch sein.
     Die Zeilenhoehe des Fliesstextes hatte das Telefon auf 50 px getrieben. */
  height: var(--ziel); line-height: 1; padding-inline: var(--raum-2);
  color: var(--kopf-bordeaux); font-size: var(--t-200); font-weight: 500;
  white-space: nowrap; text-decoration: none;
}
.kopf-telefon:hover { color: var(--kopf-band); text-decoration: underline; }
.kopf-telefon .ikon { flex: 0 0 auto; color: var(--kopf-rose); }
/* «a[href^="tel:"]» aus style.css (inline-block, 12 px oben/unten) wiegt
   schwerer als eine einzelne Klasse und schob das Zeichen in der Pille an
   den linken Rand. Hier gewinnt wieder die Kopfleiste. */
.site-header a.kopf-telefon { display: inline-flex; align-items: center; gap: var(--raum-2); padding-block: 0; }
.site-header a.kopf-telefon-klein { display: flex; padding: 0; }

/* --------------------------------------------------------------- Suche */

.kopf-suche {
  position: relative; display: flex; align-items: center;
  flex: 1 1 200px; min-width: 0; max-width: 300px; margin: 0;
}
.suche-feld {
  flex: 1 1 auto; min-width: 0; height: var(--ziel);
  border: 1px solid var(--kopf-linie); border-radius: var(--radius-klein);
  background: #fff; color: var(--kopf-anthrazit);
  /* Rechts bleibt Platz fuer die Lupe. */
  padding-block: var(--raum-2); padding-inline: var(--raum-3) var(--raum-7);
  font-family: var(--sans);
  /* 17 px: darunter zoomt iOS beim Hineintippen und zoomt nicht zurueck. */
  font-size: var(--t-300);
}
.suche-feld::placeholder { color: var(--kopf-grau); opacity: 1; }
.suche-feld::-webkit-search-cancel-button { display: none; }
.suche-feld:hover { border-color: var(--kopf-rose); }
.suche-feld:focus-visible { outline: 2px solid var(--kopf-band); outline-offset: 1px; }
.suche-lupe {
  position: absolute; inset-inline-end: var(--raum-3); top: 50%;
  transform: translateY(-50%); display: flex;
  color: var(--kopf-grau); pointer-events: none;
}
.suche-liste {
  position: absolute; top: calc(100% + var(--raum-1)); inset-inline: 0; z-index: 60;
  margin: 0; padding: var(--raum-1) 0; list-style: none;
  background: #fff; border: 1px solid var(--kopf-linie);
  border-radius: var(--radius-klein); box-shadow: var(--schatten-1);
  max-height: min(60svh, 420px); overflow-y: auto; overscroll-behavior: contain;
}
.suche-liste[hidden] { display: none; }
.suche-option {
  display: flex; flex-direction: column; justify-content: center;
  min-height: var(--ziel); padding: var(--raum-2) var(--raum-3);
  font-size: var(--t-200); color: var(--kopf-anthrazit); cursor: pointer;
}
.suche-option[aria-selected="true"],
.suche-option:hover { background: var(--kopf-puder); color: var(--kopf-band); }
.suche-option .suche-kat { font-size: var(--t-100); color: var(--kopf-grau); }
.suche-leer {
  padding: var(--raum-2) var(--raum-3); font-size: var(--t-200); color: var(--kopf-grau);
}

/* ------------------------------------------------------------- Sprache */

.kopf-sprache { position: relative; flex: 0 0 auto; }
.sprache-knopf {
  display: inline-flex; align-items: center; gap: var(--raum-1);
  height: var(--ziel); padding-inline: var(--raum-2);
  background: none; border: 1px solid var(--kopf-linie);
  border-radius: var(--radius-klein);
  color: var(--kopf-anthrazit); cursor: pointer;
  font-family: var(--sans); font-size: var(--t-200); font-weight: 500;
}
.sprache-knopf:hover { border-color: var(--kopf-rose); color: var(--kopf-band); }
.sprache-knopf .ikon { color: var(--kopf-rose); }
.sprache-knopf .pfeil-unten { transition: transform var(--ueber); }
.sprache-knopf[aria-expanded="true"] .pfeil-unten { transform: rotate(180deg); }
.sprache-jetzt { letter-spacing: 0.06em; }

.sprache-feld {
  position: absolute; top: calc(100% + var(--raum-1)); inset-inline-end: 0; z-index: 60;
  display: flex; flex-direction: column; min-width: 150px;
  background: #fff; border: 1px solid var(--kopf-linie);
  border-radius: var(--radius-klein); box-shadow: var(--schatten-1);
  padding-block: var(--raum-1);
}
.sprache-feld[hidden] { display: none; }
.sprache-feld a {
  display: flex; align-items: center; min-height: var(--ziel);
  padding-inline: var(--raum-3); font-size: var(--t-200);
  color: var(--kopf-anthrazit); text-decoration: none;
}
.sprache-feld a:hover { background: var(--kopf-puder); color: var(--kopf-band); }
.sprache-feld a.active { color: var(--kopf-band); font-weight: 500; }
.sprache-feld a.active::after {
  content: "✓"; margin-inline-start: auto; color: var(--kopf-rose);
}

/* ------------------------------------------------- Knopf «Jetzt anfragen» */

.kopf-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--ziel); padding-inline: var(--raum-5);
  background: var(--kopf-band); color: #fff;            /* 7.15:1 */
  border-radius: var(--radius-klein);
  font-size: var(--t-200); font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; text-indent: 0.2em;
  white-space: nowrap; text-decoration: none;
  transition: background-color var(--ueber);
}
.kopf-knopf:hover { background: var(--kopf-band-tief); color: #fff; }

/* ----------------------------------------------------------- Menueknopf */

/* Telefon und Menueknopf stehen auf dem Handy nebeneinander ganz rechts —
   der Anruf ist dort der kuerzeste Weg und soll nicht erst im Panel liegen. */
.kopf-schnell {
  grid-area: burger; align-self: center;
  display: flex; align-items: center; gap: var(--raum-2);
  padding: var(--raum-2) var(--kopf-rand) var(--raum-2) 0;
}
.kopf-telefon-klein {
  display: flex; align-items: center; justify-content: center;
  width: var(--ziel); height: var(--ziel);
  background: var(--kopf-puder); color: var(--kopf-band);
  border-radius: var(--radius-klein);
}
.kopf-telefon-klein:hover { background: var(--kopf-band); color: #fff; }
.kopf-telefon-klein .ikon { color: currentColor; }

.nav-toggle {
  display: flex; align-items: center; justify-content: center;
  width: var(--ziel); height: var(--ziel); flex: 0 0 auto;
  background: var(--kopf-band); color: #fff;
  border: none; border-radius: var(--radius-klein); cursor: pointer;
}
.nav-toggle:hover { background: var(--kopf-band-tief); }
.nav-toggle .ikon-x { display: none; }
.nav-toggle[aria-expanded="true"] .ikon-burger { display: none; }
.nav-toggle[aria-expanded="true"] .ikon-x { display: block; }

/* ======================================================== Menueband ===== */

.kopf-menue { grid-area: menue; background: var(--kopf-band); }

.menue-band {
  display: flex; flex-direction: column;
  margin: 0; padding: 0; list-style: none;
}
.menue-punkt { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; }

.menue-link {
  display: flex; align-items: center; flex: 1 1 auto; min-width: 0;
  min-height: var(--ziel-gross); padding-inline: var(--kopf-rand);
  color: #fff; font-size: var(--t-200); font-weight: 500;
  letter-spacing: 0.02em; text-decoration: none;
  transition: color var(--ueber), background-color var(--ueber);
}
.menue-link:hover,
.menue-punkt.offen > .menue-link { background: var(--kopf-band-hover); color: #fff; }
/* Die Seite, auf der man gerade steht. Rose 500 auf Rose 700 traegt nur
   1.95:1 und waere als Markierung nicht zu sehen — deshalb Puder. */
.menue-link.active { box-shadow: inset 0 -3px 0 var(--kopf-puder); }

.menue-pfeil {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 var(--ziel-gross); min-height: var(--ziel-gross);
  background: none; border: none; cursor: pointer; color: #fff;
  font-family: var(--sans); font-size: var(--t-200);
  transition: transform var(--ueber), background-color var(--ueber);
}
.menue-pfeil:hover { background: var(--kopf-band-hover); }
.menue-punkt.offen > .menue-pfeil { background: var(--kopf-band-hover); }

/* Fokus bleibt auf dem Band sichtbar: weisser Ring auf Rose. */
.kopf-menue :focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

/* ------------------------------------------------------------- Flyouts */

.menue-flyout { display: none; }
.menue-punkt.offen > .menue-flyout,
.flyout-gruppe.offen > .menue-flyout { display: block; }

.flyout-liste { margin: 0; padding: 0; list-style: none; }
.flyout-liste li { display: flex; flex-wrap: wrap; align-items: stretch; position: relative; }
.flyout-liste a {
  display: flex; align-items: center; flex: 1 1 auto; min-width: 0;
  min-height: var(--ziel); padding: var(--raum-2) var(--raum-4);
  font-size: var(--t-200); color: var(--kopf-anthrazit); text-decoration: none;
  transition: color var(--ueber), background-color var(--ueber);
}
.flyout-liste a:hover,
.flyout-gruppe.offen > .flyout-link { color: var(--kopf-band); background: var(--kopf-puder); }

.flyout-pfeil { display: none; }
.menue-pfeil .pfeil-rechts,
.flyout-gruppe > .menue-pfeil {
  color: inherit;
}
.flyout-gruppe > .menue-pfeil {
  flex: 0 0 var(--ziel); min-height: var(--ziel);
  color: var(--kopf-grau);
}
.flyout-gruppe > .menue-pfeil:hover,
.flyout-gruppe.offen > .menue-pfeil { color: var(--kopf-band); background: var(--kopf-puder); }

/* «Alle ansehen» hebt sich vom Rest der Spalte ab — der Verweis wurde als
   schlichter Textlink am Spaltenende uebersehen (Kundenvideo 29.09., 0:09). */
.flyout-abschluss { border-top: 1px solid var(--kopf-linie); }
.flyout-alle {
  gap: var(--raum-2); color: var(--kopf-band) !important; font-weight: 500;
}
.flyout-alle:hover { background: var(--kopf-puder); }
.flyout-alle-zahl { color: var(--kopf-grau); font-size: var(--t-100); }
.pfeil-zeichen { margin-inline-start: auto; color: var(--kopf-rose); line-height: 1; }

/* ====================================================== Handy und iPad ===
   Bis 1279 px traegt der Menueknopf alles: das Band wird zum Panel ueber die
   volle Breite, die Flyouts werden zu Akkordeons, und Telefon, Knopf, Suche
   und Sprache stehen unten darin. Der Umbruch liegt deutlich hoeher als beim
   Vorbild (dort ~991 px): die ETA-Leiste traegt neun Punkte statt sieben, und
   die deutschen Namen sind lang. Gemessen brauchen sie 1136 px reine
   Satzbreite («Medizinische Fachbereiche» allein 204 px); mit dem Polster
   passen sie ab 1280 px mit rund 40 px Luft. Englisch und Tuerkisch sind
   kuerzer — der Umbruch richtet sich nach der laengsten Sprache.
   ======================================================================== */

@media (max-width: 1279px) {
  .kopf-menue,
  .kopf-werkzeuge { display: none; }

  body.menue-offen .site-header {
    max-height: 100svh;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }
  body.menue-offen .kopf-menue {
    display: block; overflow-y: auto; overscroll-behavior: contain;
  }
  body.menue-offen .kopf-werkzeuge {
    display: grid; gap: var(--raum-3);
    padding: var(--raum-4) var(--kopf-rand) max(var(--raum-4), env(safe-area-inset-bottom));
    background: var(--kopf-puder); border-top: 1px solid var(--kopf-linie);
  }
  body.menue-offen { overflow: hidden; }

  /* Im Panel steht alles untereinander und in voller Breite. */
  .kopf-werkzeuge .kopf-suche { max-width: none; flex: 1 1 auto; }
  .kopf-werkzeuge .kopf-telefon,
  .kopf-werkzeuge .kopf-knopf { justify-content: center; }
  .kopf-werkzeuge .kopf-sprache { justify-self: stretch; }
  .kopf-werkzeuge .sprache-knopf { width: 100%; justify-content: center; background: #fff; }
  /* Suchvorschlaege und Sprachliste klappen im Panel nach OBEN auf: unter dem
     Feld steht nur noch der Rand des Bildschirms, der letzte Vorschlag war
     dort angeschnitten. */
  .sprache-feld { inset-inline: 0; top: auto; bottom: calc(100% + var(--raum-1)); }
  .kopf-werkzeuge .suche-liste {
    top: auto; bottom: calc(100% + var(--raum-1)); max-height: min(50svh, 320px);
  }

  /* Akkordeon statt Flyout. */
  .menue-punkt + .menue-punkt { border-top: 1px solid var(--kopf-linie-band); }
  .menue-flyout {
    position: static; flex: 1 0 100%;
    background: #fff; border-top: 1px solid var(--kopf-linie);
  }
  .flyout-liste a { padding-inline-start: var(--raum-6); min-height: var(--ziel-gross); }
  /* Zweite Ebene im Akkordeon: die Behandlungen einer Gruppe klappen an
     ihrem Platz auf. Bewusst OHNE eigene Hoehe und ohne «overflow»: rollen
     darf allein das Panel (.kopf-menue), nie ein Bereich darin — sonst
     rollt man im Rollen (Janine 13.10.). */
  .mega-liste {
    display: none; flex: 1 0 100%;
    border-top: 1px solid var(--kopf-linie);
  }
  .flyout-gruppe.offen > .mega-liste { display: block; }
  .mega-liste a { padding-inline-start: var(--raum-8); }
  .flyout-liste li + li { border-top: 1px solid var(--kopf-linie); }
  .flyout-gruppe > .menue-pfeil { flex: 0 0 var(--ziel-gross); min-height: var(--ziel-gross); }
  .menue-pfeil { border-inline-start: 1px solid var(--kopf-linie-band); }
  .flyout-gruppe > .menue-pfeil { border-inline-start-color: var(--kopf-linie); }
}

/* ========================================================= Ab 1025 px ===
   Zwei Zeilen wie beim Vorbild: Weiss mit Logo und Werkzeugen, darunter das
   Rose-Band. Die Flyouts oeffnen beim Darueberfahren.
   ======================================================================== */

@media (min-width: 1280px) {
  .site-header { display: block; }
  .kopf-schnell { display: none; }

  .kopf-oben {
    display: flex; align-items: center; gap: var(--raum-5);
    padding: var(--raum-3) var(--kopf-rand);
  }
  .kopf-logo { padding: 0; flex: 0 0 auto; }
  .kopf-logo img { height: 96px; }
  .kopf-werkzeuge { margin-inline-start: auto; gap: var(--raum-4); }

  .menue-band {
    flex-direction: row; align-items: stretch;
    padding-inline: var(--kopf-rand);
    /* Neun Punkte in Gross-/Kleinschreibung brauchen gemessene 1136 px;
       versal und um 0.2em gesperrt waeren es ueber 1500 px und damit mehr,
       als selbst 1440 px hergeben. Deshalb steht hier als einziges Element
       der Marke kein Versalsatz — der Knopf «Jetzt anfragen» daneben
       traegt ihn. */
    gap: clamp(2px, 0.4vw, var(--raum-2));
    /* Notbremse: waechst die Schrift durch Zoom oder eine Benutzereinstellung
       ueber das Gemessene hinaus, bricht das Band in eine zweite Zeile um,
       statt die ganze Seite querscrollen zu lassen. */
    flex-wrap: wrap;
  }
  .menue-punkt { flex: 0 0 auto; flex-wrap: nowrap; }
  .menue-link {
    flex: 0 0 auto; padding-inline: var(--raum-2);
    min-height: 52px; white-space: nowrap;
  }
  .menue-punkt.hat-feld > .menue-link { padding-inline-end: 2px; }
  .menue-pfeil {
    flex: 0 0 auto; min-width: 20px; min-height: 52px; padding: 0;
  }
  /* Der Menuepunkt und sein Pfeil gehoeren optisch zusammen: der Hover faerbt
     beide, egal welches der beiden Elemente unter dem Zeiger liegt. */
  .menue-punkt:hover > .menue-link,
  .menue-punkt:hover > .menue-pfeil { background: var(--kopf-band-hover); }
  .menue-pfeil .pfeil-unten { transition: transform var(--ueber); }
  .menue-punkt.offen > .menue-pfeil .pfeil-unten,
  .menue-punkt:hover > .menue-pfeil .pfeil-unten { transform: rotate(180deg); }

  /* -------------------------------------------------------- Mega-Menue ---
     Janine 13.10.: «Der Header muss geaendert werden, das muss nicht
     scrollbar sein, sondern alles auf einen Blick, direkt.» Ab 1280 px
     klappt deshalb kein zweistufiges Flyout mehr auf, sondern EIN breites
     Feld unter dem ganzen Band: alle Gruppen mit allen Behandlungen
     gleichzeitig, nebeneinander in Spalten. Kein Rollbereich, kein zweites
     Aufklappen, kein Wandern des Zeigers in eine zweite Spalte.

     Das Feld haengt am Band und nicht am einzelnen Punkt — nur so kann es
     den Satzspiegel ausfuellen und laeuft nie ueber den Rand. Deshalb steht
     der Punkt hier auf «static» und das Band auf «relative». */
  .kopf-menue { position: relative; }
  .menue-punkt.hat-feld { position: static; }

  .site-header {
    /* Spaltenmass. 20rem traegt die laengste Behandlung («Dehnungsstreifen-
       und Pigmentflecken-Behandlung», gemessen 327 px) ohne Umbruch; in rem,
       damit es mit einer groesseren Browserschrift mitwaechst. Wie viele
       Spalten eine Kategorie bekommt, entscheidet kopf_einsetzen.py anhand
       ihres Umfangs und setzt es als Klasse mega-s1 … mega-s4. */
    --mega-spalte: 20rem;
    /* Luft zwischen den Spalten. Weiter als das Innenmass der Zeilen, damit
       die Spalten ohne Trennstrich als Spalten zu lesen sind. */
    --mega-luft: var(--raum-5);
    /* Die vier Masse, die ueber die Hoehe des Feldes entscheiden. Sie stehen
       hier und nicht in den Regeln, weil ein flaches Fenster sie weiter
       unten zusammenrueckt — dort zaehlt jeder Pixel, auf einem hohen
       Bildschirm darf das Feld atmen. */
    --mega-zeilenluft:  var(--raum-1);   /* zwischen zwei Behandlungen    */
    --mega-gruppenluft: var(--raum-5);   /* zwischen zwei Gruppen         */
    --mega-polster-y:   var(--raum-4);   /* oben und unten im Feld        */
    --mega-zeilenhoehe: 1.35;            /* innerhalb eines Eintrags      */
  }
  .mega-s1 { --mega-spalten: 1; }
  .mega-s2 { --mega-spalten: 2; }
  .mega-s3 { --mega-spalten: 3; }
  .mega-s4 { --mega-spalten: 4; }

  /* Heller Grund, feine Kante, tragender Schatten: das Feld liegt sichtbar
     ueber der Seite, der Text dahinter stoert nicht mehr — und es bleibt
     leicht. Die drei Pixel Bordeaux oben binden es an das Band, die runden
     Ecken unten geben ihm die weiche Form der Marke. */
  .menue-flyout {
    position: absolute; top: 100%; inset-inline-start: 0; z-index: 55;
    background: var(--kopf-feld); border: 1px solid var(--kopf-feld-rand);
    border-top: 3px solid var(--kopf-band);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--kopf-feld-schatten);
  }
  .menue-flyout--mega {
    /* So breit, wie die Spalten brauchen — hoechstens so breit wie der
       Satzspiegel. Kurze Felder («Zaehne», «Gut zu wissen») bleiben dadurch
       schmal, «Haut & Beauty» nimmt die ganze Breite. */
    --mega-breite: min(
      calc(100% - 2 * var(--kopf-rand)),
      calc(var(--mega-spalten) * var(--mega-spalte)
           + (var(--mega-spalten) - 1) * var(--mega-luft)
           + 2 * var(--raum-4)));
    min-width: 0;
    width: var(--mega-breite);
    max-width: calc(100% - 2 * var(--kopf-rand));
    /* Das Feld steht unter seinem eigenen Menuepunkt, laeuft aber nie ueber
       den Satzspiegel hinaus: links nicht vor die Kante von Logo und Text,
       rechts nicht darueber. kopf.js meldet dazu nur die Lage des Punktes in
       «--mega-x»; die beiden Grenzen zieht clamp(). Ohne JavaScript steht
       das Feld an der linken Kante — der Rueckfallwert. */
    inset-inline-start: clamp(
      var(--kopf-rand),
      var(--mega-x, var(--kopf-rand)),
      calc(100% - var(--kopf-rand) - var(--mega-breite)));
    inset-inline-end: auto;
    padding: var(--mega-polster-y) var(--raum-4);
    /* Notbremse fuer sehr flache Fenster oder starken Zoom: dann rollt das
       Feld doch, statt unten abgeschnitten zu werden. Bei 1280x720 und
       1440x900 greift sie in Deutsch, Englisch und Tuerkisch nicht; nur
       Portugiesisch, die laengste Sprache, rollt bei 1280x720 um gut zehn
       Pixel. «--kopf-jetzt»
       setzt kopf.js auf die gemessene Hoehe der Leiste; der Rueckfallwert
       entspricht ihr bei 1280 px. */
    max-height: calc(100svh - var(--kopf-jetzt, 207px) - var(--raum-2));
    overflow-y: auto; overscroll-behavior: contain;
  }

  /* Die Spalten. «column-span: all» setzt «Alle ansehen» quer darunter. */
  .menue-flyout--mega .mega-spalten {
    column-count: var(--mega-spalten, 2);
    column-gap: var(--mega-luft);
  }
  /* Im Feld ist jede Zeile ein Block, keine Flex-Reihe: nur so koennen sich
     die Gruppen auf die Spalten verteilen. */
  .menue-flyout--mega .flyout-liste li { display: block; position: static; }
  /* Eine Gruppe bleibt immer mit ihrer Ueberschrift zusammen: keine Spalte
     faengt mit einer Behandlung an, deren Titel in der Spalte davor steht
     (Janine 14.10.: «Hautverjuengung» lief ohne Titel in Spalte 3 weiter,
     «Laser» in Spalte 4). Dafuer ist das Feld ein paar Zeilen hoeher —
     lieber ein hoeheres Feld als eine Liste ohne Herkunft. */
  .menue-flyout--mega .mega-gruppe { break-inside: avoid; }
  .menue-flyout--mega .mega-gruppe + .mega-gruppe { margin-top: var(--mega-gruppenluft); }
  .menue-flyout--mega .mega-liste li { break-inside: avoid; }
  /* Der Aufklappknopf der Gruppe gehoert zum Akkordeon unter 1280 px. */
  .menue-flyout--mega .mega-pfeil { display: none; }

  /* Gruppenname als Spaltentitel: Jost versal und gesperrt, Bordeaux 700
     ueber einer feinen Rose-Linie — derselbe Satz wie die Vorzeile der
     Seitenabschnitte (.eyebrow in style.css), nur kleiner. So traegt der
     Titel die Gruppe sichtbar, ohne lauter zu sein als die Behandlungen.
     Bordeaux 700 auf dem Feld: 10.4:1. */
  .menue-flyout--mega .mega-titel {
    display: block; min-height: 0;
    padding: 0 0 var(--raum-1); margin-bottom: var(--raum-1);
    border-bottom: 1px solid var(--kopf-linie);
    color: var(--kopf-feld-akzent);
    font-size: var(--t-100); font-weight: 600; line-height: 1.3;
    letter-spacing: 0.1em; text-transform: uppercase;
    break-after: avoid;
  }
  /* Die Behandlungen. Enger Zeilenabstand INNERHALB eines Eintrags, Luft
     ZWISCHEN den Eintraegen, und die zweite Zeile rueckt ein: so ist
     «Dehnungsstreifen- und Pigmentflecken-Behandlung» als ein Eintrag zu
     lesen und nicht als zwei (Janine 14.10.). Die Hover-Flaeche geht ueber
     die ganze Spaltenbreite — mit der Maus gut zu treffen (ab 1280 px gibt
     es nur Zeigergeraete; die Tippziele von 44 px tragen weiter das
     Akkordeon darunter). Anthrazit auf dem Feld: 16.2:1. */
  .menue-flyout--mega .mega-link {
    display: block; min-height: 0;
    padding-block: 0;
    padding-inline: calc(var(--raum-2) + 12px) var(--raum-2);
    text-indent: -12px;
    line-height: var(--mega-zeilenhoehe);
    border-radius: var(--radius-klein);
    color: var(--kopf-anthrazit);
    transition: color var(--ueber), background-color var(--ueber);
  }
  .menue-flyout--mega .mega-liste li + li { margin-top: var(--mega-zeilenluft); }

  /* Hover: der Eintrag bekommt eine weiche Rose-Flaeche in der Form der
     Marke und Bordeaux-Schrift. Ruhig, ohne Sprung — nichts verschiebt
     sich, nur Farbe. Eine Kante am Zeilenanfang waere an der runden Ecke
     zur Sichel geworden; die Flaeche allein ist sauberer. */
  .menue-flyout--mega .flyout-liste a:hover {
    background: var(--kopf-feld-ruhe); color: var(--kopf-feld-akzent);
  }
  /* Im Mega-Feld steht die ganze Gruppe offen. Der Gruppenname darf sich
     deshalb nicht mitfaerben, wenn der Zeiger irgendwo in der Gruppe steht,
     sondern nur, wenn er auf ihm selbst liegt. */
  .menue-flyout--mega .flyout-gruppe:hover > .mega-titel,
  .menue-flyout--mega .flyout-gruppe.offen > .mega-titel {
    background: none; color: var(--kopf-feld-akzent); box-shadow: none;
  }
  .menue-flyout--mega .flyout-gruppe > .mega-titel:hover {
    background: none; color: var(--kopf-band);
    border-bottom-color: var(--kopf-rose);
  }
  /* «Alle Behandlungen ansehen» quer unter allen Spalten: eine eigene
     Flaeche statt einer blossen Linie — als Textzeile am Spaltenende wurde
     der Verweis uebersehen (Kundenvideo 29.09.; Janine 14.10.). */
  .menue-flyout--mega .flyout-abschluss {
    column-span: all;
    margin-top: var(--raum-4); padding-top: 0; border-top: 0;
  }
  .menue-flyout--mega .flyout-alle {
    display: flex; align-items: center; gap: var(--raum-2);
    min-height: 0; padding: var(--raum-2) var(--raum-3);
    background: var(--kopf-feld-ruhe);
    border: 1px solid var(--kopf-linie);
    border-radius: var(--radius-klein);
    font-weight: 600; letter-spacing: 0.02em;
  }
  .menue-flyout--mega .flyout-alle:hover {
    background: var(--kopf-feld); border-color: var(--kopf-rose);
    box-shadow: none;
  }
  .flyout-alle { color: var(--kopf-feld-akzent) !important; }        /* 10.4:1 */
  .flyout-alle-zahl { color: var(--kopf-feld-leise); }               /*  6.9:1 */
  .pfeil-zeichen { color: var(--kopf-feld-akzent); }

  /* Fokusring: der weisse Ring des Rose-Bandes waere auf dem hellen Feld
     gar nicht zu sehen. Im Feld deshalb Rose 700 — 7.1:1 auf dem Grund,
     5.9:1 auf der Rose-Flaeche des Hovers, beide weit ueber den geforderten
     3:1. Auf dem Band selbst bleibt der Ring weiss. */
  .kopf-menue .menue-flyout :focus-visible { outline-color: var(--kopf-band); }

  /* ---- Flache Fenster ------------------------------------------------
     Auf einem Laptop mit 720 px Bildhoehe bleiben unter der Leiste rund
     500 px. «Haut & Beauty» mit sechs Gruppen, die nicht mehr zerrissen
     werden, braucht mehr. Statt zu rollen (Janine 13.10.: «alles auf einen
     Blick, direkt») rueckt das Feld dort zusammen: die Luft zwischen den
     Zeilen geht weg, Gruppenabstand und Polster werden eine Stufe kleiner.
     Auf jedem hoeheren Bildschirm bleibt der ruhige Satz von oben. */
  @media (max-height: 800px) {
    .site-header {
      --mega-zeilenluft:  0px;
      --mega-gruppenluft: var(--raum-3);
      --mega-polster-y:   var(--raum-2);
      --mega-zeilenhoehe: 1.3;
    }
    .menue-flyout--mega .flyout-abschluss { margin-top: var(--raum-3); }
    .menue-flyout--mega .flyout-alle { padding-block: var(--raum-1); }
  }

  /* Geoeffnet wird ab hier von kopf.js: nur so gibt es die kleine
     Verzoegerung beim Verlassen und den flackerfreien Wechsel zwischen zwei
     Hauptpunkten. Laeuft kein JavaScript, fehlt die Klasse «kopf-js» und
     das Darueberfahren oeffnet wie bisher allein per CSS. */
  @media (hover: hover) and (pointer: fine) {
    html:not(.kopf-js) .menue-punkt:hover > .menue-flyout { display: block; }
  }
}

/* ======================================================== Rechtslaeufig */

[dir="rtl"] .kopf-knopf { letter-spacing: normal; text-indent: 0; }

/* ======================================================= Wenig Bewegung */

@media (prefers-reduced-motion: reduce) {
  .site-header *,
  .site-header *::before { transition: none !important; }
}