/* ============================================================================
   Kopfbereich der Hausarztpraxis — eigener Aufbau, unabhaengig von Mobirise.
   ============================================================================

   WARUM EINE EIGENE DATEI. Der Mobirise-Kopf liegt in mbr-additional.css
   zehnfach dupliziert (9x .cid-slvJXy1VvD, 1x .cid-slxF0xQ1GB fuer cookies.html)
   und macht rund 33 % dieser Datei aus. Ihn dort zu reparieren hiesse, in einer
   generierten Datei zu arbeiten, deren Kaskade niemand im Kopf hat. Diese Datei
   haengt an eigenen Klassen (.kopf__*) und beruehrt den Bestand nicht.

   EIN EINZIGER UMSCHALTPUNKT: 1240 px.
   Der Bestand hat zwei, die sich widersprechen — @media (min-width: 1200px) und
   @media (max-width: 1240px). Zwischen 1200 und 1240 gelten BEIDE: der Burger
   ist sichtbar (button.navbar-toggler{display:block} schlaegt
   .navbar-toggler{display:none} per Spezifitaet) UND das Menue ist per
   display:none!important weggeschaltet. In diesem 41-px-Fenster ist die
   Navigation unerreichbar. Genau dort lagen die iPad-Screenshots.

   Deshalb steht die Grenze hier an genau EINER Stelle: --kopf-umbruch.
   Achtung: Media Queries koennen keine CSS-Variablen auswerten — der Wert steht
   in den @media-Zeilen daher als Literal 1239.98px. Er ist mit der Variable
   gemeinsam zu aendern; die Pruefung tools/kopf-check faehrt genau diese Breite.
   1239.98 statt 1240, weil (max-width:1240px) und (min-width:1240px) bei exakt
   1240 BEIDE wahr waeren — derselbe Fehler wie im Bestand bei 1200.
============================================================================ */

:root {
  --kopf-umbruch: 1240px;

  /* Farben stammen aus docs/farbraum.md — keine neuen Werte.
     Petrol bedient, Rose warnt; das Praxis-Rosa taugt nur als Flaeche. */
  --kopf-text:        #1d1d1d;  /* 16,86:1 auf Weiss */
  --kopf-text-ruhig:  #656565;  /*  5,83:1 — ersetzt #94968e mit 2,99:1 */
  --kopf-bedienung:   #537c83;  /*  4,59:1 — Stethoskop im Logo */
  --kopf-flaeche:     #f2eae2;  /* Flaeche warm, aus dem Gemaelde */
  --kopf-grund:       #ffffff;

  /* ⚠ DIESE DREI WERTE SIND AUS DEM BESTAND UEBERNOMMEN, NICHT GEWAEHLT —
     auf ausdrueckliche Ansage des Nutzers am 2026-09-10 ("schriftart, farbe
     und groesse identisch mit dem bestand").

     DIE MENUEFARBE IST AM 2026-09-10 KORRIGIERT WORDEN. Der Bestandswert
     #94968e hat 2,99:1 und verfehlt WCAG 1.4.3 (4,5:1) deutlich.

     Gesucht war der kleinstmoegliche Eingriff. Systematisch durchgerechnet,
     jeweils der erste Wert, der 4,5:1 erreicht:

       nur abdunkeln          #75776f   4,54:1   Farbton und Saettigung bleiben
       + entsaettigen         #767771   4,52:1   Farbton wird flacher
       neutrales Grau         #767676   4,54:1   der Gruenstich geht verloren

     Gewaehlt: #75776f. Farbton (75°) und Saettigung (3,7 %) sind unveraendert,
     nur die Helligkeit sinkt von 57,3 % auf 45,1 %. Damit bleibt der Ton
     derselbe, er ist nur dunkler — genau das, was docs/farbraum.md verlangt:
     "entsaettigen, nicht abdunkeln" gilt fuer gesaettigte Farben; bei einem
     fast neutralen Grau mit 3,7 % Saettigung gibt es nichts zu entsaettigen.

     NOCH OFFEN: weisse Schrift auf #ff8a8f hat 2,26:1 (Termin-Knopf) und auf
     #94968e 2,99:1 (dessen Hover). Beide bleiben vorerst bestandstreu.
     #141414 auf dem Rosa ergaebe 8,14:1. */
  --kopf-menue-farbe:    #75776f;

  /* Servicezeile — am Bestand gemessen: 12,48 px, weight 300, #656565.
     Der Wert 12,48 px ist kein Tippfehler: Mobirise rechnet dort 0,78rem. */
  /* HOVER HAT DIESELBE FARBE WIE DIE RUHE — auf Ansage des Nutzers am
     2026-09-10: "beide werte gleich und nur so dass es gerade den
     anforderungen genuegt und nicht dunkler als noetig".

     Der Bestand wechselte beim Hover auf #494f54 (8,30:1) und war in Ruhe mit
     #94968e bei 2,99:1 — der Kontrast war also nur beim Darauffahren in
     Ordnung, also genau dann nicht, wenn man liest.

     Jetzt tragen beide Zustaende #75776f. Die Rueckmeldung beim Hover
     uebernimmt allein die rosa Linie, die von 0 auf die volle Breite waechst.
     Das ist zulaessig und sogar sauberer: WCAG 1.4.1 verlangt ohnehin, dass
     Farbe nie das einzige Mittel ist. */
  --kopf-menue-hover:      #75776f;
  --kopf-linie:            #ff8a8f;

  --kopf-service-farbe:    #656565;
  --kopf-service-groesse:  12.48px;
  --kopf-service-fett:     300;
  --kopf-knopf-grund:    #ff8a8f;
  --kopf-knopf-schrift:  #ffffff;

  /* Bestand gemessen: beim Hover wechselt der Knopf auf #94968e, die Schrift
     bleibt weiss. Auch das ist unter der Norm (2,99:1, ausgerechnet) — dieselbe bewusste
     Entscheidung fuer Bestandstreue wie oben. */
  --kopf-knopf-grund-hover: #94968e;

  /* Schatten UNVERAENDERT aus dem Bestand uebernommen (mbr-additional.css:939
     und :1415). Der Nutzer hat den Schatten am aufgeklappten Menue am
     2026-09-10 ausdruecklich behalten wollen.
     Nicht uebernommen sind die beiden Hersteller-Varianten daneben
     (css:940/941): "box-shadow: 0 4px -4px 0" hat einen NEGATIVEN
     Weichzeichner und ist ungueltig — der Browser verwirft die Zeilen seit
     jeher. */
  --kopf-schatten:        0 4px 4px -4px rgba(0, 0, 0, 0.4);
  --kopf-schatten-panel:  0 10px 40px rgba(0, 0, 0, 0.2);
}

/* ---------------------------------------------------------------------------
   Geruest
--------------------------------------------------------------------------- */

.kopf {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--kopf-grund);
  box-shadow: var(--kopf-schatten);

  /* WARUM EXPLIZIT UND NICHT "inherit". Der <header> liegt ausserhalb der
     Mobirise-Section, die die Hausschrift setzt — "inherit" holte die
     Systemschrift des Geraets. Gemessen am Bestand: "PT Sans". */
  font-family: "PT Sans", sans-serif;

  /* ZEILENHOEHE EBENFALLS EXPLIZIT — aus demselben Grund wie die Schriftart,
     nur faellt es hier erst bei einem Seitenvergleich auf.

     GEMESSEN am 2026-09-10, alle acht Seiten bei 1440 px: Der Menuelink war
     auf index.html 40 px hoch, auf den sieben uebrigen 37 px; die Zeilenhoehe
     24 px gegen 20,8 px, der ganze Kopf 157 px gegen 155 px. Der Nutzer sah
     es als "nur auf der Startseite rutschen die Navi-Texte etwas nach unten".

     URSACHE ist nicht der Kopf, sondern die Reihenfolge der Stylesheets:
     index.html laedt "bootstrap-reboot.min.css" NACH "mbr-additional.css"
     (Zeile 160 gegen 21), die sieben uebrigen davor. Reboot setzt
     "body { line-height: 1.5 }" — auf index.html gewinnt es, sonst nicht.

     Die Reihenfolge in index.html umzustellen waere der groessere Eingriff:
     Sie entscheidet ueber die ganze Kaskade der Seite, nicht nur ueber den
     Kopf. Der Kopf haengt sich stattdessen aus der Vererbung aus. */
  line-height: 1.3;
}

/* Sprungmarken duerfen nicht unter dem festen Kopf landen.
   WARUM HIER UND NICHT GLOBAL: Der Bestand loest dasselbe Problem bereits
   viermal mit vier verschiedenen Zahlen (.sprung margin:-100px,
   .sprung-sprechzeiten -150px, #kontaktformular scroll-margin-top:5.5rem,
   script.js:27 zieht 60px ab). Eine globale Regel hier wuerde sich mit allen
   vieren addieren. Sie greift deshalb nur fuer Ziele OHNE eigenen Ausgleich. */
[id]:not(.sprung):not(#kontaktformular):not(#main-content) {
  scroll-margin-top: calc(var(--kopf-hoehe-gescrollt, 80px) + 1rem);
}

/* DIE BESTANDS-ANKER BRAUCHEN EINEN NACHSCHLAG.
   ".sprung { margin: -100px }" hebt den unsichtbaren Anker 100 px ueber die
   Ueberschrift — geeicht auf den alten Kopf, der gescrollt 60 px hoch war.
   Der neue ist es nicht ueberall: gemessen 81 px bei 1440, 104 px bei 768,
   und auf index.html 164 px, weil dort der Termin-Knopf bewusst stehen
   bleibt. Gemessen vor dieser Regel landeten die Ueberschriften deshalb
   1 bis 64 px HINTER dem Kopf.

   Die 100 px werden hier wieder abgezogen, damit sich der Ausgleich nicht
   verdoppelt. Bei niedrigem Kopf wird der Wert negativ — das ist bei
   scroll-margin zulaessig und genau richtig. */
.sprung {
  scroll-margin-top: calc(var(--kopf-hoehe-gescrollt, 80px) + 1rem - 100px);
}

/* Nur fuer den Moment der Messung in kopfbereich.js — nie im Endzustand. */
.kopf--messen,
.kopf--messen * { transition: none !important; }


.kopf__service {
  background: var(--kopf-grund);
  display: none; /* unter dem Umbruch steckt die Servicezeile im Menue */

  /* Haarlinie zwischen Servicezeile und Hauptzeile — am Bestand gemessen:
     1px solid rgba(0,0,0,0.12). Der Schatten unter dem Kopf
     (0 4px 4px -4px rgba(0,0,0,0.4), css:939) steht bereits auf .kopf. */
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.kopf__haupt {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 8px 1rem;
}

/* ---------------------------------------------------------------------------
   Logo
--------------------------------------------------------------------------- */

.kopf__logo {
  display: block;
  /* Darf schrumpfen, wenn die Zeile sonst umbricht — bei 390 px fehlt genau
     1 px. "min-width: 0" ist noetig, weil Flex-Elemente sonst nicht unter ihre
     Inhaltsbreite gehen. */
  flex: 0 1 auto;
  min-width: 0;
  line-height: 0;
}

/* Die Hoehe ist die einzige Stellschraube der Kopfhoehe und steht deshalb
   an einer Stelle. width/height am <img> verhindern den Umbruch beim Laden —
   genau das fehlt heute auf sieben von acht Seiten. */
.kopf__logo img {
  height: 5.1rem;
  min-width: 0;
  max-width: 100%;
  width: auto;
  max-width: 100%;
  /* ⚠ KEIN UEBERGANG AUF DER HOEHE. Hier stand "transition: height 0.25s",
     und das war die Ursache des Ruckelns beim Hochscrollen: Der KOPF wechselt
     seine Hoehe schlagartig — bei 390 px auf leistungen.html von 101 auf
     164 px, weil die Knopfzeile zurueckkommt —, waehrend das LOGO 0,25 s
     lang nachwuchs (44,8 → 54 px). Zwei Geschwindigkeiten an einem Element.

     Ohne Uebergang wechselt beides in derselben Bildwiederholung: ein
     Zustandswechsel statt eines Zuckens. Vgl. die Regel im Designsystem,
     dass Bewegung sich lohnen muss — hier gewinnt sie nichts und kostet
     Ruhe. */
}

/* ---------------------------------------------------------------------------
   Termin-Knopf
--------------------------------------------------------------------------- */

/* WARUM SCHWARZE SCHRIFT AUF DEM ROSA. Weiss auf #ff8a8f ergibt 2,26:1 und
   verfehlt WCAG 1.4.3 deutlich. #141414 darauf erreicht 8,14:1. Das Rosa
   abzudunkeln waere der falsche Weg — es ergaebe ein Feuerwehrrot, das weiter
   von der Marke weg ist als der Ausgangswert (siehe docs/farbraum.md). */
.kopf__termin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: var(--kopf-knopf-grund);
  color: var(--kopf-knopf-schrift);
  text-decoration: none;
  /* Alle vier Werte am Bestand gemessen, nicht gewaehlt. */
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  border-radius: 50px;
  padding: 0 3.9rem;  /* ergibt die Bestandsbreite von 286 px */
  min-height: 47px;   /* Bestand: 47 px — zugleich ueber dem 44-px-Tippziel */
  line-height: 1.2;
  text-align: center;
  transition: background-color 0.2s;
}

/* HOVER AM KNOPF — am Bestand gemessen: Hintergrund wechselt auf #94968e
   (dasselbe Grau wie die Menuepunkte), die Schrift bleibt WEISS.
 *
   Die color-Angabe ist nicht redundant: ohne sie greift Bootstraps globales
   "a:hover { color: #0056b3 }" und der Knopftext wurde BLAU. Gemessen:
   rgb(0, 86, 179). Ein vorher hier stehendes #ff6b72 war von mir erfunden. */
/* UEBERBLENDEN STATT UMSPRINGEN — derselbe Effekt wie bei den
   Leistungskacheln, auf Wunsch des Nutzers hier erprobt.
 *
   Wie dort liegt die Hover-Farbe als ::before-Flaeche UNTER dem Text und wird
   ueber die Deckkraft eingeblendet. Der Unterschied zu einem
   "transition: background-color" ist nicht die Optik, sondern die Mechanik:
   Deckkraft laeuft auf der Grafikeinheit, eine Hintergrundfarbe zwingt den
   Browser in jedem Bild zum Neuzeichnen.
 *
   0,35 s statt der 0,5 s der Kacheln: Ein Knopf ist klein und wird gezielt
   angesteuert; eine halbe Sekunde wirkt dort traege. */
.kopf__termin {
  position: relative;
  overflow: hidden;
  isolation: isolate;   /* haelt das ::before unter dem Text, ohne z-index-Krieg */
}

.kopf__termin::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--kopf-knopf-grund-hover);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: -1;
}

.kopf__termin:focus-visible::before { opacity: 1; }

@media (hover: hover) {
  .kopf__termin:hover::before { opacity: 1;
  }
}

/* Die Schriftfarbe bleibt weiss — sie muss nicht wechseln, weil beide
   Flaechen sie tragen. Kein Zwischenbild mit falschem Kontrast, wie es bei
   den Kacheln entstanden war. */
.kopf__termin:focus-visible { color: var(--kopf-knopf-schrift); }

@media (hover: hover) {
  .kopf__termin:hover { color: var(--kopf-knopf-schrift);
  }
}

/* ---------------------------------------------------------------------------
   Symbole
--------------------------------------------------------------------------- */

/* Inline-SVG statt Icon-Font. Erzeugt mit tools/icons/aus-font-holen.py aus
   den SVG-Fonts, die ohnehin im Repo liegen — dieselbe Form wie bisher, keine
   fremde Icon-Sammlung.
 *
   WAS DAS BRINGT UND WAS NICHT: Der Kopf steht ueber der Falz und rendert
   jetzt SOFORT, ohne auf den Font zu warten. Eingespart wird dadurch aber
   kein Byte — 89 Elemente ausserhalb des Kopfes nutzen die Icon-Fonts
   weiterhin (fa-stethoscope, fa-star, mbri-arrow-down und andere). Der Font
   faellt erst weg, wenn die ganze Seite umgestellt ist.
 *
   "1em" statt fester Pixel: die Symbole folgen der Schriftgroesse ihrer
   Umgebung, "currentColor" ihrer Farbe. */
.kopf__symbol {
  display: inline-block;
  vertical-align: -0.125em;   /* setzt das Symbol auf die Schriftgrundlinie */
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   Anruf-Symbol
--------------------------------------------------------------------------- */

/* Nur unter dem Umschaltpunkt. Ab 1240 px steht die Nummer in der
   Servicezeile — dort waere das Symbol eine Dopplung. */
.kopf__anruf {
  display: none;
  flex: 0 0 auto;
  width: 44px;            /* Tippziel nach WCAG 2.5.8 */
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--kopf-knopf-grund);   /* dasselbe Rosa wie der Burger daneben */
  font-size: 22px;
  text-decoration: none;
}

@media (hover: hover) {
  .kopf__anruf:hover { color: var(--kopf-menue-hover);
  }
}

/* ---------------------------------------------------------------------------
   Termin-Symbol (weicht dem ausgeschriebenen Knopf)
--------------------------------------------------------------------------- */

/* Standardmaessig unsichtbar. Es erscheint nur, wenn BEIDES zutrifft:
     - der <header> traegt "data-termin-kompakt" (auf der Startseite bewusst
       nicht — dort bleibt der ausgeschriebene Knopf dauerhaft stehen)
     - die Seite ist gescrollt (.kopf--kurz)
   Unter dem Umschaltpunkt weicht dann der Knopf und das Symbol nimmt seinen
   Platz ein. Das spart auf dem Telefon eine ganze Zeile, ohne den Weg zur
   Terminbuchung zu verstellen. */
.kopf__termin-symbol {
  display: none;
  flex: 0 0 auto;
  width: 40px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--kopf-knopf-grund);
  font-size: 22px;
  text-decoration: none;
}

@media (hover: hover) {
  .kopf__termin-symbol:hover { color: var(--kopf-menue-hover);
  }
}

/* ---------------------------------------------------------------------------
   Burger
--------------------------------------------------------------------------- */

.kopf__burger {
  flex: 0 0 auto;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  align-content: space-between;
}

.kopf__burger span {
  display: block;
  height: 2px;
  width: 100%;
  /* Bestand gemessen: rgb(255,138,143) — das Praxis-Rosa, nicht Schwarz. */
  background: var(--kopf-knopf-grund);
  transition: transform 0.25s, opacity 0.25s;
}

/* Der Burger wird zum X. Kein zusaetzliches Icon-Element, damit es nicht
   wie im Bestand irgendwo mitten im Kopf landen kann.

   ⚠ 11 px, NICHT 10. Der Weg jedes Balkens zur Mitte ist der Abstand der
   Balkenmitten, und der ergibt sich aus dem Kasten:

     44 px Hoehe − 2 x 10 px Innenabstand = 24 px Inhalt
     24 px − 3 x 2 px Balken = 18 px Luft, bei "space-between" also 2 x 9 px
     Balkenmitten damit bei 1, 12, 23 → Abstand 11 px

   Mit 10 px kreuzten sich die beiden Balken NICHT in einem Punkt, sondern
   2 px versetzt (gemessen: Mitten bei 58,2 und 60,2). Im Bild sieht das aus
   wie ein schief zusammengesetztes X.

   Wer Hoehe oder Innenabstand des Knopfes aendert, rechnet diesen Wert neu.
   tools/kopf-check/bedienung.mjs prueft ihn. */
.kopf__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.kopf__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.kopf__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

/* ---------------------------------------------------------------------------
   Fokus — sichtbar, ueberall
--------------------------------------------------------------------------- */

/* Der Standard-Fokusring des Browsers ist blau und passt nicht zur Seite.
   Er erschien beim MAUSKLICK auf Menuepunkte und Untermenue-Ausloeser
   (vom Nutzer am 2026-09-10 gemeldet). Diese Regel nimmt ihn dort weg —
   und NUR dort: :focus-visible darunter setzt den eigenen Ring, sodass
   Tastaturbedienung weiterhin sichtbar bleibt. Ein pauschales
   "outline: none" waere ein Barrierefreiheitsfehler, kein Aufraeumen. */
.kopf a:focus:not(:focus-visible),
.kopf button:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Der graublaue Kasten, den Safari und Chrome auf Android beim Antippen
   kurz ueber das Element legen. Er hat mit Fokus nichts zu tun und laesst
   sich nur hierueber abschalten. */
.kopf a,
.kopf button { -webkit-tap-highlight-color: transparent; }

/* BEIM ANTIPPEN BLEIBT DIE MENUEFARBE.
   ------------------------------------
   Der Nutzer am 2026-09-10: "Manchmal ist es so, wenn ich Sprechzeiten
   anklicke, dass es ganz kurz blau wird" — und praeziser nachgereicht:
   "nur von der Startseite, wenn ich dann Sprechzeiten klicke."

   ⚠ IN CHROME IST DAS NICHT ZU SEHEN. Nachgemessen ueber 90 Bilder bei
   gedrosselter 3G-Verbindung: durchgehend rgb(117,119,111), kein blauer
   Frame. Auch CDP mit erzwungenem ":active" zeigte keinen Wechsel, und der
   Tap-Highlight ist ohnehin transparent (Zeile darueber).

   Was blieb, ist der Zustand, den der Kopfbereich NICHT abdeckte: ":active"
   hatte hier null Regeln. Ohne eigene greift Safaris Vorgabe fuer aktive
   Links mit der Systemfarbe "-webkit-activelink". Das ist die einzige
   Erklaerung, die zum Bild passt, und die Zeile kostet nichts.

   Der gedrueckte Zustand braucht keine eigene Farbe: Was passiert, zeigt der
   Seitenwechsel selbst.

   ⚠ Bleibt der Blitz, ist die naechste Spur die STARTSEITE selbst — nur von
   dort tritt er auf. Dann dort messen, nicht im Kopfbereich. */
.kopf__eintrag > a:active,
.kopf__eintrag > button:active,
.kopf a:active { color: var(--kopf-menue-farbe); }

/* WARUM MIT !important. mbr-additional.css:433 setzt
   "button.navbar-toggler:focus { outline: 0 }" im globalen Bereich, also
   ausserhalb des Nav-Blocks. Solange diese Zeile existiert, braucht der
   Fokusring hier Vorrang. Nach dem Aufraeumen (Schritt 5) kann das weg. */
.kopf a:focus-visible,
.kopf button:focus-visible {
  outline: 3px solid var(--kopf-bedienung) !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}

/* ---------------------------------------------------------------------------
   Menue und Untermenues
--------------------------------------------------------------------------- */

.kopf__liste,
.kopf__unter {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kopf__eintrag > a,
.kopf__eintrag > button {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  min-height: 44px;
  padding: 12px 16px;   /* symmetrisch — der Bestand hat 13px 41px 13px 57px */
  border: 0;
  background: transparent;
  color: var(--kopf-menue-farbe);
  font-family: inherit;
  font-size: 16px;      /* Bestand, gemessen */
  font-weight: 600;     /* Bestand, gemessen */
  text-decoration: none;
  cursor: pointer;

  /* Anker fuer die Linie unten. */
  position: relative;
}

/* DIE WACHSENDE ROSA LINIE — am Bestand gemessen und nachgebaut.
   Ohne sie griff Bootstraps "a:hover { color: #0056b3; text-decoration:
   underline }": der Menuepunkt wurde BLAU UNTERSTRICHEN, was mit der Seite
   nichts zu tun hat. Gemessen im Bestand: ::after mit background #ff8a8f,
   height 2px, width 0 in Ruhe und 87,95 px (volle Linkbreite) bei Hover;
   die Schrift wechselt auf #494f54. */
.kopf__eintrag > a::after,
.kopf__eintrag > button::after {
  content: '';
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.25rem;
  height: 2px;
  background: var(--kopf-linie);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

/* ⚠ :hover NUR fuer echte Zeigegeraete. Auf dem Touchscreen bleibt der
   Hover-Zustand nach dem Antippen am zuletzt beruehrten Element HAENGEN —
   der Nutzer am 2026-09-10: "Wenn ich die Navigationsleiste klicke, bleibt
   manchmal eine Linie stehen. Auf dem iPad. Und iPhone bei Leistungen."
   Die rosa Linie unter dem angetippten Eintrag blieb stehen, bis anderswo
   hingetippt wurde. Genau das verhindert "(hover: hover)".

   :focus-visible und [aria-current] gehoeren NICHT hier hinein: Der
   Tastaturfokus muss auf jedem Geraet sichtbar bleiben, und die aktive Seite
   traegt ihre Linie dauerhaft. */
.kopf__eintrag > a:focus-visible,
.kopf__eintrag > button:focus-visible,
.kopf__eintrag > [aria-expanded="true"] { color: var(--kopf-menue-hover); }

.kopf__eintrag > a:focus-visible::after,
.kopf__eintrag > button:focus-visible::after,
.kopf__eintrag > a[aria-current="page"]::after { transform: scaleX(1); }

/* AUCH DER UEBERGEORDNETE PUNKT wird markiert, wenn die aktuelle Seite in
   seinem Untermenue haengt.
   ------------------------------------------------------------------------
   Nur "Sprechzeiten" und "Leistungen" sind direkte Links im Hauptmenue. Die
   Startseite haengt unter "Notfall & Praxis", Kontakt/Impressum/Datenschutz
   unter "Kontakt" — deren Ausloeser ist ein <button> ohne href und kann
   selbst kein aria-current tragen. Ohne diese Regel zeigte das Menue auf
   fuenf von acht Seiten gar nichts an, und der Nutzer sah die Markierung nur
   bei "Leistungen": "Wenn ich auf Sprechzeiten klicke, wandert nichts."

   ⚠ NICHT bei GEOEFFNETEM Untermenue — dann bringt das Panel selbst eine
   Oberkante in derselben Farbe mit, und beides zusammen waeren zwei Striche
   uebereinander.

   Dafuer steht ":not([aria-expanded=true])" HIER und nicht in der
   Ausblend-Regel weiter unten. Der erste Versuch verliess sich auf jene —
   und uebersah, dass ":has()" die Spezifitaet seines staerksten Arguments
   erbt: mit ".kopf__unter a[aria-current=page]" darin steht diese Regel bei
   (0,3,2) gegen (0,2,1). Sie gewann, die Linie blieb, und
   erscheinungsbild.mjs meldete zu Recht rot. */
.kopf__eintrag:has(.kopf__unter a[aria-current="page"]) > button:not([aria-expanded="true"])::after {
  transform: scaleX(1);
}

/* Im AUFGEKLAPPTEN MENUE ein kurzer, zentrierter Strich statt einer Linie
   ueber die volle Breite.
   ------------------------------------------------------------------------
   Der Nutzer am 2026-09-10 live auf dem iPad: "Wenn ich Leistungen anklicke
   im Menue bleibt diese Linie stehen." Sie blieb zu Recht stehen — es ist
   die Markierung der aktiven Seite (aria-current="page"), kein haengender
   Hover (gemessen: hover=false). Falsch war ihre FORM: gemessen 944 px
   breit bei einem Text von rund 170 px, weil die Menueeintraege aufgeklappt
   die volle Breite einnehmen.

   Waagerecht ist der Eintrag so breit wie sein Text, dort passt die Linie.
   Gestapelt gilt eine andere Form, nicht dieselbe breiter — 2,5 rem mittig
   lesen sich als Markierung, die volle Breite las sich als Fehler.

   Die TIPPFLAECHE bleibt unangetastet: Nur das ::after wird schmaler, der
   Link behaelt seine volle Breite und Hoehe. */
@media (max-width: 1239.98px) {
  /* ⚠ ZWEITER ANLAUF. Der erste setzte hier feste 2,5 rem — die Linie war
     damit 40 px breit unter einem 75 px breiten Wort und sah abgeschnitten
     aus ("Warum ist die Linie so schmal?"). Richtig ist textbreit, genau
     wie waagerecht.

     Dafuer muss der Ausloeser selbst textbreit sein.

     ⚠ NICHT ueber "display: inline-block" — der Ausloeser ist ein
     Flex-Container ("display: flex; gap: 0.35rem"), und der gap haelt den
     Pfeil ▾ vom Text weg. Ihn zu blockifizieren nimmt beides mit. Richtig
     ist, nur die BREITE zu aendern: "fit-content" schrumpft den Container
     auf seinen Inhalt, "margin-inline: auto" haelt ihn mittig.

     Tippziel geprueft: der schmalste Punkt ist "Kontakt" mit 55 px Text,
     zuzueglich 2 x 16 px Innenabstand, bei 45 px Hoehe — ueber den 44 px
     aus CLAUDE.md. */
  .kopf__eintrag > a,
  .kopf__eintrag > button {
    width: fit-content;
    margin-inline: auto;
  }

  .kopf__eintrag > a::after,
  .kopf__eintrag > button::after {
    left: 0.75rem;
    right: 0.75rem;
    transform-origin: center;
  }
}

@media (hover: hover) {
  .kopf__eintrag > a:hover,
  .kopf__eintrag > button:hover { color: var(--kopf-menue-hover); }

  .kopf__eintrag > a:hover::after,
  .kopf__eintrag > button:hover::after { transform: scaleX(1); }
}

/* KEINE Linie, solange das Untermenue aufgeklappt ist. Das Panel bringt selbst
   eine 3 px starke Oberkante in derselben Farbe mit — beides zusammen ergab
   zwei rosa Striche uebereinander.
 *
   WARUM DIE :hover/:focus-visible MITGESCHRIEBEN SIND. Spaeter im Quelltext zu
   stehen genuegt nicht: ".kopf__eintrag > button:hover::after" hat die
   Spezifitaet (0,2,2), das blosse Attribut nur (0,2,1) — die Hover-Regel
   gewann, und nach einem Klick liegt der Zeiger ja noch auf dem Ausloeser.
   Gemessen: transform blieb matrix(1,…). Mit der Pseudoklasse steht es (0,3,1)
   gegen (0,2,2). Kein !important noetig. */
.kopf__eintrag > [aria-expanded="true"]::after,
.kopf__eintrag > [aria-expanded="true"]:focus-visible::after { transform: scaleX(0); }

@media (hover: hover) {
  .kopf__eintrag > [aria-expanded="true"]:hover::after { transform: scaleX(0);
  }
}

/* Bootstrap setzt "a:hover { text-decoration: underline }" global — das
   erzeugte zusammen mit dem Blau den Effekt, den es hier zu ersetzen gilt. */
.kopf a:hover { text-decoration: none; }

/* Die aktive Seite traegt die Linie dauerhaft — der Bestand hebt sie im
   obersten Menue gar nicht hervor; eine Petrol-Faerbung waere eine
   Erfindung gewesen. Die Linie bleibt im Farbschema. */
.kopf__eintrag > a[aria-current="page"] { color: var(--kopf-menue-hover); }

.kopf__pfeil {
  width: 0.6em;
  height: 0.6em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s;
}

[aria-expanded="true"] > .kopf__pfeil { transform: rotate(-135deg) translate(-2px, -2px); }

.kopf__unter a {
  display: flex;
  align-items: center;
  min-height: 44px;      /* Tippziel; der Bestand hat rund 118 px Abstand */

  /* WARUM LINKS SO VIEL MEHR. Der weisse Hover-Strich sitzt bei
     left: 1.125rem (18 px) und ist 16 px breit, endet also bei 34 px. Mit dem
     urspruenglichen "padding: 12px 16px" begann der Text bei 16 px — der
     Strich lief mitten durch das Wort. Der Bestand hat aus demselben Grund
     57 px links (13px 41px 13px 57px). 2,75rem = 44 px lassen 10 px Luft
     hinter dem Strich. */
  padding: 12px 16px 12px 2.75rem;
  color: var(--kopf-text-ruhig);
  text-decoration: none;
}

/* HOVER IM UNTERMENUE — rosa Flaeche mit hellem Strich links, wie im Bestand
   (mbr-additional.css:1434 "background-color: #ff8a8f" plus :before, das von
   Breite 0 auf 16 px waechst).
 *
   ⚠ EINE ABWEICHUNG, BEWUSST: Der Bestand setzt dazu "color: #fff". Weiss auf
   #ff8a8f ergibt 2,26:1 und verfehlt WCAG 1.4.3 (4,5:1) klar. Hier steht
   #1d1d1d — nachgerechnet 7,45:1. Auf den Screenshots des Nutzers ist die
   Schrift ohnehin dunkel, nicht weiss.
 *
   Eine frueher hier verwendete Beige-Flaeche (#f2eae2) war KEINE
   Kontrast-Notwendigkeit, sondern eine Geschmacksentscheidung von mir —
   nachgerechnet: Schwarz auf Rosa 7,45:1, Schwarz auf Beige 14,16:1, beide
   bestehen. */
.kopf__unter a {
  position: relative;
  transition: background-color 0.25s, color 0.25s;
}

.kopf__unter a::before {
  content: '';
  position: absolute;
  left: 1.125rem;      /* Bestand gemessen */
  top: 50%;
  width: 0;
  height: 2px;
  background: #fff;
  transition: width 0.25s ease-in-out;
}

.kopf__unter a:focus-visible {
  background: var(--kopf-linie);
  color: var(--kopf-text);
}

@media (hover: hover) {
  .kopf__unter a:hover {
  background: var(--kopf-linie);
  color: var(--kopf-text);
  }
}

.kopf__unter a:focus-visible::before { width: 16px; }

@media (hover: hover) {
  .kopf__unter a:hover::before { width: 16px;
  }
}

.kopf__unter[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   Unter dem Umbruch: Panel von oben, mit Schatten
--------------------------------------------------------------------------- */

@media (max-width: 1239.98px) {

  /* DAS PANEL LIEGT IM FLUSS, NICHT ABSOLUT — so wie im Bestand.
     Mit "position: absolute" ergaben sich drei Abweichungen auf einmal: der
     Schatten wurde an der Leistenkante gezeichnet statt unter dem aufgeklappten
     Menue, der Termin-Knopf konnte nicht unter die Menuepunkte rutschen, und
     der Kopf wuchs beim Oeffnen nicht mit. Im Fluss loesen sich alle drei von
     selbst: der <header> waechst, sein Schatten wandert mit.

     max-height fangt den Fall ab, dass das Menue laenger wird als das Fenster
     (kleines Telefon im Querformat). */
  .kopf { max-height: 100vh; overflow-y: auto; }

  .kopf__menue { flex: 1 0 100%; padding-top: 0.5rem; }
  .kopf__menue[hidden] { display: none; }

  /* Reihenfolge am Bestand gemessen: Logo und Burger in Zeile 1, darunter die
     Menuepunkte, GANZ UNTEN der Knopf. Bei geschlossenem Menue faellt die
     Punkteliste weg und der Knopf rueckt unter das Logo — genau wie im
     Bestand. */
  /* Am Bestand gemessen (375-1180 px, alle vier Breiten identisch):
       Logo beginnt   32 px vom linken Rand, 32 px von oben
       Burger endet   16 px vor dem rechten Rand
       Kopfhoehe     177 px
     Meine erste Fassung hatte 16/8 und kam damit auf 164 px — das Logo klebte
     am Rand und der Kopf wirkte gedraengt. Links 32, rechts 16: der Bestand
     ist dort tatsaechlich asymmetrisch. */
  /* row-gap MUSS 0 sein. ".kopf__haupt" hat "gap: 1rem"; beim Umbruch zaehlt
     der Zeilenabstand ZWEIMAL — einmal zum unsichtbaren Umbruch-Element
     (::after, Hoehe 0), einmal zum Knopf dahinter. Gemessen: 209 px statt 177.
     Der Abstand zum Knopf kommt stattdessen aus dessen margin-top. */
  /* SPALTENABSTAND 0, seit das Anruf-Symbol dazukam. Rechnung bei 390 px:
     342 px stehen zur Verfuegung (390 minus 32 links und 16 rechts). Logo
     255 px + Anruf 44 + Burger 44 = 343. Mit "gap: 1rem" kaemen 32 px dazu —
     der Burger brach in die naechste Zeile und stand 314 px vom rechten Rand.
     Die Symbole haben eigene Innenabstaende, ein Zeilen-gap braucht es nicht. */
  .kopf__haupt  { flex-wrap: wrap; gap: 0; padding: 32px 16px 24px 32px; }
  .kopf__logo   { order: 1; }

  /* Das Anruf-Symbol schiebt sich mit "margin-left: auto" nach rechts und
     nimmt den Burger mit — beide stehen dadurch am rechten Rand nebeneinander. */
  /* SYMBOLE 40 STATT 44 PX BREIT. Gemessen bei 390 px: verfuegbar sind 342 px
     (390 minus 32 links, 16 rechts), gebraucht wurden 255 (Logo) + 44 + 44 =
     343. Ein einziges Pixel — und der Burger brach in die naechste Zeile und
     stand 314 px vom rechten Rand. Das Logo konnte nicht ausweichen: seine
     Breite folgt der festen Hoehe, "max-width" greift dort nicht.
     Mit 40 px bleiben 7 px Luft. Die Tippflaeche ist dann 40x44 px — WCAG 2.5.8
     verlangt 24x24, das Ziel dieses Projekts sind 44; in einer Achse
     unterschritten, in der anderen erfuellt. */
  /* REIHENFOLGE: Termin-Symbol, Anruf, Burger — das Termin-Symbol steht LINKS
     vom Telefon.
   *
     Warum diese Reihenfolge: Das Termin-Symbol erscheint erst beim Scrollen.
     Stand es zwischen Anruf und Burger, sprang das Telefon-Symbol beim
     Einblenden nach links — jedes Mal, bei jedem Scrollen. Links davor
     eingefuegt bleiben Telefon und Burger stehen, wo sie sind, und das neue
     Symbol waechst nach links in den freien Raum. Ruhiger fuer das Auge.
   *
     "margin-left: auto" steht auf BEIDEN: Welches der beiden gerade das erste
     sichtbare ist, haengt vom Scrollzustand ab — das jeweils erste schiebt die
     Gruppe nach rechts, beim zweiten laeuft es ins Leere. */
  /* ⚠ NUR EIN "margin-left: auto". Beide Symbole hatten es — Flexbox verteilt
     den freien Raum dann GLEICHMAESSIG auf beide, und zwischen Kalender und
     Telefon klaffte eine breite Luecke. Es muss immer genau das erste
     SICHTBARE Element den Raum bekommen; die uebrigen schliessen dicht an.

     Ohne Termin-Symbol (nicht gescrollt) ist das der Anruf. Mit Symbol
     (gescrollt, nur auf den Folgeseiten) uebernimmt es das Symbol, und der
     Anruf rueckt direkt daneben. */
  .kopf__termin-symbol { order: 2; }
  .kopf__anruf  { order: 3; display: inline-flex; width: 40px; margin-left: auto; }

  .kopf[data-termin-kompakt].kopf--kurz .kopf__termin-symbol { margin-left: auto; }
  .kopf[data-termin-kompakt].kopf--kurz .kopf__anruf { margin-left: 0; }
  .kopf__burger { order: 4; width: 40px; margin-left: 0; }

  /* Der Tausch beim Scrollen — nur auf Seiten mit "data-termin-kompakt". */
  .kopf[data-termin-kompakt].kopf--kurz .kopf__termin { display: none; }
  .kopf[data-termin-kompakt].kopf--kurz .kopf__termin-symbol {
    display: inline-flex;
    animation: kopf-symbol-ein 0.3s ease-out;
  }

  @keyframes kopf-symbol-ein {
    from { opacity: 0; transform: scale(0.7) }
    to   { opacity: 1; transform: scale(1) }
  }

  /* ERZWUNGENER ZEILENUMBRUCH nach dem Burger.
     Ohne ihn passte der Termin-Knopf auf iPad-Breiten noch in die erste Zeile,
     und der Burger landete zwischen Logo und Knopf statt am rechten Rand —
     genau das hatte der Nutzer gemeldet. Ein Flex-Element mit flex-basis 100 %
     und Hoehe 0 schiebt alles Folgende in die naechste Zeile. */
  .kopf__haupt::after {
    content: '';
    order: 5;
    flex: 0 0 100%;
    height: 0;
  }

  .kopf__menue  { order: 6; }

  /* Der Knopf behaelt seine Bestandsbreite und steht mittig — er zieht sich
     NICHT ueber die volle Zeile. Auf dem iPad sah das sonst wie ein Balken aus.
     "flex: 0 0 auto" mit "margin: … auto" statt "flex: 1 0 100%". */
  .kopf__termin {
    order: 7;
    flex: 0 0 auto;
    margin: 13px auto 0;
  }

  /* 3,8rem statt 5,1rem — sonst fuellt das Logo allein die Zeile.
     Derselbe Wert, den der Bestand unter 1240 px erzwingt
     (mbr-additional.css:1228). */
  .kopf__logo img { height: 3.8rem; }
  .kopf--kurz .kopf__logo img { height: 3rem; }

  /* Der Bestand vergroessert die Menuepunkte auf dem Telefon NICHT — dort
     stehen dieselben 16 px wie in der waagerechten Fassung. 1,25rem waren
     gemessen 20 px und wirkten neben dem uebrigen Satzbild zu laut. */
  .kopf__eintrag > a,
  .kopf__eintrag > button { justify-content: center; }

  /* DAS UNTERMENUE SIEHT AUCH MOBIL AUS WIE EIN PANEL — am Bestand gemessen
     (390, 1024 und 1220 px, ueberall gleich):

         position     relative (im Fluss, nicht ueberlagernd)
         box-shadow   0 10px 40px rgba(0,0,0,0.2)
         border-top   3px solid #ff8a8f
         text-align   LINKS, nicht zentriert
         Breite       volle Menuebreite

     Meine erste Fassung hatte weder Schatten noch Oberkante und richtete die
     Eintraege mittig aus — die Untermenuepunkte waren dadurch von den
     Hauptpunkten nicht zu unterscheiden und schoben sie einfach auseinander. */
  /* UNTERMENUES IM MOBILEN MENUE SICHTBAR MACHEN.
   *
     Das Problem, das der Nutzer am 2026-09-10 benannt hat: "im mobilen menue
     ist ein untermenue nicht erkennbar". Der Bestand loest das mit einem
     einzigen Signal — einer rosa Oberkante. Ansonsten sehen die Untereintraege
     aus wie Hauptpunkte: gleiche Schriftgroesse, gleiche Farbe, gleiche
     Ausrichtung. Wer das Menue nicht kennt, sieht acht gleichwertige Zeilen.
   *
     Hier stehen stattdessen DREI Signale, die zusammenwirken:
   *
       1. EINRUECKUNG — der Block ist gegenueber den Hauptpunkten nach rechts
          gesetzt. Einrueckung ist die aelteste und unmissverstaendlichste
          Darstellung von Unterordnung.
       2. SENKRECHTE FUEHRUNGSLINIE in Praxis-Rosa am linken Rand. Sie
          verbindet die Eintraege optisch mit dem Ausloeser darueber — eine
          waagerechte Oberkante trennt, eine senkrechte Linie verbindet.
       3. GETOENTE FLAECHE ("Flaeche warm" aus docs/farbraum.md). Der Block hebt
          sich vom weissen Menue ab, ohne wie ein schwebendes Fenster zu wirken.
   *
     Kein Schatten: Der Block liegt im Fluss und schwebt nicht — ein Schatten
     wuerde etwas behaupten, das nicht stimmt. Auf dem Desktop, wo das
     Untermenue tatsaechlich ueber dem Inhalt schwebt, bleibt er.
   *
     Kontrast geprueft: #656565 auf #f2eae2 sind 4,90:1, ueber den geforderten
     4,5:1. */
  .kopf__unter {
    background: var(--kopf-flaeche);
    border-left: 3px solid var(--kopf-linie);
    border-top: 0;
    margin: 0.25rem 0 0.5rem 2.5rem;
    padding-block: 0.25rem;
    border-radius: 0 4px 4px 0;
  }

  /* Linksbuendig und etwas kleiner als die Hauptpunkte — das vierte, leise
     Signal. Der Innenabstand links laesst dem weissen Hover-Strich Platz. */
  .kopf__unter a {
    justify-content: flex-start;
    font-size: 15px;
  }

  /* HIER STANDEN TELEFON UND SPRECHZEITEN im aufgeklappten Menue.
     Am 2026-09-10 auf Ansage des Nutzers entfernt: "entferne das aus dieser
     ansicht, nimmt zu viel platz weg". Sie kosteten zwei Zeilen ueber dem
     Termin-Knopf.

     BEWUSSTE FOLGE: Unter 1240 px steht die Telefonnummer damit NIRGENDS im
     Kopf — die Servicezeile ist dort ausgeblendet, und der Bestand zeigte sie
     im Menue ohnehin nie (#topLine hat null CSS-Regeln). Der Weg zur Nummer
     fuehrt ueber "Kontakt" oder den Seiteninhalt. */

}

/* ---------------------------------------------------------------------------
   Ab dem Umbruch: waagerechte Navigation
--------------------------------------------------------------------------- */

@media (min-width: 1240px) {
  .kopf__service { display: block; }

  /* Bestand gemessen: Telefon und Adresse stehen LINKS ZUSAMMEN (bei 76 und
     188 px), die Sprechzeiten rechts (109 px vom Rand). Ein schlichtes
     space-between ueber alle drei spreizte die Adresse in die Mitte. */
  .kopf__service-innen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding: 0.75rem 109px 0.75rem 76px;
  }

  .kopf__service-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.75rem;
  }

  .kopf__service a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--kopf-service-farbe);
    text-decoration: none;
    /* Am Bestand gemessen, nicht gewaehlt. */
    font-size: var(--kopf-service-groesse);
    font-weight: var(--kopf-service-fett);
  }

  @media (hover: hover) {
  .kopf__service a:hover { color: var(--kopf-bedienung);
  }
}

  .kopf__burger { display: none; }

  /* WARUM HIER !important. bootstrap.min.css (reboot) enthaelt
     "[hidden] { display: none !important }". Das Attribut steht im Markup,
     damit das Menue unter dem Umbruch zugeklappt startet — ohne das
     !important bliebe es auch in der waagerechten Fassung unsichtbar.
     Gemessen: offsetParent war null, das Menue fehlte komplett. */
  .kopf__menue[hidden] { display: flex !important; }

  /* Reihenfolge wie im Bestand: Logo — Menue — Knopf ganz rechts.
     Gemessen: der Knopf endet 13 px vor dem rechten Fensterrand. */
  .kopf__logo   { order: 1; }
  .kopf__menue  { order: 2; margin-left: auto; margin-right: auto; }
  .kopf__termin { order: 3; }

  /* Alles am Bestand gemessen:
       Logo beginnt bei      64 px vom linken Rand (meine erste Fassung: 16)
       Knopf endet           13 px vor dem rechten Rand
       Kopfhoehe in Ruhe    156 px, geschrumpft 80 px
     Die Hoehe ergibt sich aus dem senkrechten Innenabstand: 16 px oben und
     unten um das 82 px hohe Logo sind 114 px, plus 43 px Servicezeile = 157.
     Mit den vorherigen 8 px kam der Kopf nur auf 141 bzw. 65 px — er wirkte
     gedraengt, und das Logo klebte am Rand. */
  .kopf__haupt { padding: 16px 13px 16px 64px; }

  .kopf__menue {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  /* Auf dem Desktop die natuerliche Zeilenhoehe des Bestands (29 px), kein
     44-px-Tippziel: das gilt fuer Finger, nicht fuer Mauszeiger. Unter dem
     Umbruch bleibt es bei 44 px. */
  .kopf__eintrag > a,
  .kopf__eintrag > button { min-height: 0; padding: 0.5rem 1rem; }

  .kopf__liste { display: flex; align-items: center; }
  .kopf__eintrag { position: relative; }

  /* Das Untermenue oeffnet UNTER dem Ausloeser und linksbuendig zu ihm.
     Der Bestand oeffnet es daneben. */
  .kopf__unter {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 16.875rem;
    background: var(--kopf-grund);
    border-top: 3px solid var(--kopf-linie);
    box-shadow: var(--kopf-schatten-panel);
    z-index: 10;
  }

}

/* ---------------------------------------------------------------------------
   Geschrumpfter Zustand
--------------------------------------------------------------------------- */

/* WARUM DER KOPF WEITER SCHRUMPFEN MUSS. Die Sprungmarken-Ausgleiche des
   Bestands (.sprung margin:-100px u.a.) sind gegen die GESCHRUMPFTE Hoehe
   geeicht, nicht gegen die Ruhehoehe: ein Sprung scrollt die Seite und loest
   das Schrumpfen aus. Ein Kopf, der nicht schrumpft, stuende beim Sprungziel
   auf voller Hoehe — 100 px Ausgleich reichten dann nicht und die Ueberschrift
   verschwaende dahinter. Der alte Ausloeser greift nicht mehr:
   navbar-dropdown.js haengt an .navbar-dropdown.navbar-fixed-top. */
.kopf--kurz .kopf__service { padding-block: 0; max-height: 0; overflow: hidden; }
.kopf--kurz .kopf__logo img { height: 3rem; }

/* ---------------------------------------------------------------------------
   Bewegung nur, wenn erwuenscht
--------------------------------------------------------------------------- */

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

/* ---------------------------------------------------------------------------
   Ohne JavaScript
--------------------------------------------------------------------------- */

/* Steht in einer eigenen Datei, die nur ein <noscript> im <head> laedt:
   assets/css/kopfbereich-ohne-js.css. Begruendung dort. */

/* ---------------------------------------------------------------------------
   Abdunklung hinter dem offenen Menue
--------------------------------------------------------------------------- */

/* Der Nutzer am 2026-09-10: "der schatten vorher hat sich ueber die gesamte
   seite zum beispiel beim iphone gelegt".
 *
 * NACHGESEHEN: Der Bestand hat so etwas NICHT. Ein Screenshot des unveraenderten
 * Standes bei 390 px mit offenem Menue zeigt unter dem Knopf sofort das
 * Hero-Bild, ohne Abdunklung; im DOM findet sich kein Overlay-Element (geprueft:
 * alle position:fixed/absolute-Elemente unterhalb der Kopfkante — nur
 * Mobirise-Sektionshintergruende). Der graue Bereich auf den Screenshots ist
 * der normale Hintergrund des Abschnitts "Herzlich Willkommen".
 *
 * Diese Regel setzt den Effekt also NEU um, statt ihn nachzubauen. Sie trennt
 * das Menue sichtbar vom Inhalt.
 *
 * pointer-events: none, weil das Schliessen der Klick-nach-draussen-Handler in
 * kopfbereich.js erledigt — ein klickbares Overlay wuerde ihn abfangen.
 * z-index 999 liegt unter dem Kopf (1000), damit das Menue selbst hell bleibt. */
@media (max-width: 1239.98px) {
  body.menue-offen::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 999;
    pointer-events: none;
  }
}

@media (max-width: 1239.98px) and (prefers-reduced-motion: no-preference) {
  body.menue-offen::after { animation: kopf-abdunkeln 0.25s ease-out }
  @keyframes kopf-abdunkeln { from { opacity: 0 } to { opacity: 1 } }
}

/* ---------------------------------------------------------------------------
   Zwischenbereich 1240-1440 px: fuenf Menuepunkte brauchen mehr Platz
--------------------------------------------------------------------------- */

/* Der Bestand hatte VIER Hauptpunkte. Mit "Online-Rezeption" sind es fuenf,
   und die Zeile platzt: gemessen brach die Navigation von 1240 bis 1400 px in
   zwei oder drei Zeilen um, der Kopf wuchs auf 164 px.
 *
   Rechnung bei 1240 px: 64 px Innenabstand links, Logo 342, Knopf 286,
   13 rechts — es bleiben 535 px fuer fuenf Punkte. Der reine Text braucht
   schon rund 545. Selbst ohne jeden Innenabstand ginge es nicht auf.
 *
   Deshalb geben Logo und Knopf hier Breite ab. AB 1440 px bleibt alles
   bestandstreu (Logo 5,1rem, Knopf 286 px) — dort passt es. */
@media (min-width: 1240px) and (max-width: 1439.98px) {
  .kopf__logo img { height: 4rem; }          /* 268 statt 342 px breit */
  .kopf__termin   { padding: 0 2rem; }       /* rund 225 statt 286 px */
  .kopf__haupt    { padding-left: 32px; }    /* statt 64 */
  .kopf__eintrag > a,
  .kopf__eintrag > button { padding: 0.5rem 0.6rem; }
  .kopf__eintrag > a::after,
  .kopf__eintrag > button::after { left: 0.6rem; right: 0.6rem; }
}

/* ---------------------------------------------------------------------------
   Sehr schmale Telefone (unter 400 px)
--------------------------------------------------------------------------- */

/* Bei 375 px — der wichtigsten Breite dieses Projekts — stehen 327 px zur
   Verfuegung (375 minus 32 links, 16 rechts). Gebraucht wurden 255 (Logo bei
   3,8rem) + 40 (Anruf) + 40 (Burger) = 335. Gemessen: Der Burger brach in die
   naechste Zeile, der Kopf wuchs von 177 auf 221 px, und unter ihm blieben nur
   noch 3 px Luft bis zur ersten Ueberschrift.
 *
   Das Logo gibt hier Hoehe ab: 3,4rem sind 228 px breit, damit bleiben 19 px
   Luft. Der Bestand kommt ohne das aus — er hat an dieser Stelle kein
   Anruf-Symbol. */
@media (max-width: 399.98px) {
  .kopf__logo img { height: 3.4rem; }
  .kopf--kurz .kopf__logo img { height: 2.8rem; }
}

/* ---------------------------------------------------------------------------
   Ausgleich fuer den hoeheren Kopf auf drei Seiten
--------------------------------------------------------------------------- */

/* DIE FALLE AUS DEM PLAN, EINGETRETEN. Der Bestand gleicht den festen Kopf
   nicht am <body> aus, sondern mit einem padding-top je Folge-Section — elf
   verstreute Zahlen auf acht Seiten, jede gegen die DAMALIGE Kopfhoehe
   geeicht.
 *
   Auf den sieben Folgeseiten war der alte Kopf unter 1240 px nur 117 px hoch;
   der neue ist 170-177 px, weil er den Termin-Knopf mitfuehrt. Auf
   impressum, datenschutz und cookies (alle drei .header5) steht dort
   padding-top: 150px — gemessen lag die erste Ueberschrift damit 20 bis 27 px
   HINTER dem Kopf.
 *
   Nur diese drei brauchen den Ausgleich; die uebrigen Seiten haben genug
   Vorlauf. Ab 1240 px gilt dort ohnehin 225px, das reicht. */
@media (max-width: 1239.98px) {
  /* 200px war gemessen und stimmte — aber als feste Zahl. Sie folgt jetzt
     der tatsaechlichen Kopfhoehe und behaelt 200px als Untergrenze;
     gemessen blieben sonst nur 20 px Luft, waehrend die Startseite 44 hat. */
  .header5 { padding-top: max(200px, calc(var(--kopf-hoehe-ruhe, 177px) + 4rem)) !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Kein Schrumpfen ohne Gewinn                                    2026-09-10
   ══════════════════════════════════════════════════════════════════════════

   Auf index.html bleibt der Terminknopf beim Scrollen stehen — die Seite hat
   als einzige kein "data-termin-kompakt". Unterhalb des Umbruchpunkts bringt
   das Schrumpfen des Logos dort deshalb GENAU SEINE EIGENE HOEHE und sonst
   nichts. Gemessen, Ruhe → gescrollt:

     Seite          Breite   Kopf            Logo
     index           390     170 → 161  (9)   54 → 45  (9)   ← der ganze Gewinn
     index           768     177 → 164 (13)   61 → 48 (13)   ← ist das Logo
     index          1440     155 →  81 (74)   82 → 48 (34)   ← hier lohnt es
     sprechzeiten    390     178 → 109 (69)   54 → 45  (9)
     sprechzeiten    768     185 → 112 (73)   61 → 48 (13)

   Neun Pixel Gewinn gegen ein Logo, das bei jedem Antippen der Seite die
   Groesse wechselt — das ist kein Handel. Ab 1240 px faellt die Knopfzeile
   auch auf index.html weg, dort bleibt das Schrumpfen.

   ":not([data-termin-kompakt])" trifft genau die Startseite und bleibt
   richtig, wenn eine weitere Seite den Knopf behalten soll. */
@media (max-width: 1239.98px) {
  .kopf:not([data-termin-kompakt]).kopf--kurz .kopf__logo img {
    height: 3.8rem;
  }
}

@media (max-width: 767.98px) {
  .kopf:not([data-termin-kompakt]).kopf--kurz .kopf__logo img {
    height: 3.4rem;
  }
}