/* Kopfnavigation, Sprungmarke und Fusszeile der Anwendung.
 *
 * Liegt getrennt von stil.css: Der Grundstil wird aus dem Projektstamm
 * uebernommen und soll dort aenderbar bleiben, ohne dass die Navigation
 * jedes Mal mitwandert.
 *
 * KEIN style-ATTRIBUT UND KEIN style-BLOCK: Die Richtlinie steht auf
 * style-src 'self'. Alles Gestaltete gehoert in eine Datei wie diese.
 */

/* --- Sprungmarke ---------------------------------------------------------
 * Die erste fokussierbare Stelle der Seite. Sichtbar erst bei Fokus - wer
 * mit der Tastatur ankommt, soll das Menue ueberspringen koennen, ohne dass
 * der Hinweis allen anderen im Weg steht.
 */
.sprungmarke {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--kt-grund);
  color: var(--kt-rot);
  padding: var(--kt-luft-3) var(--kt-luft-4);
  border: var(--kt-rahmen-2) solid var(--kt-rot);
  border-radius: var(--kt-radius-1);
  font-family: var(--kt-schrift-text);
  font-weight: 600;
  text-decoration: none;
}
.sprungmarke:focus {
  left: var(--kt-luft-4);
  top: var(--kt-luft-4);
}

/* --- Der Kopf ------------------------------------------------------------ */
.seitenkopf .bahn {
  flex-wrap: wrap;
  row-gap: var(--kt-luft-3);
}

.marke picture { display: block; }

.marke img {
  height: 64px;
  width: auto;
  border-radius: var(--kt-radius-1);
  display: block;
}

/* --- Das Hauptmenue, breite Schirme --------------------------------------
 *
 * KIND-SELEKTOR, NICHT NACHFAHRE: ".hauptmenue ul" traefe auch die
 * Unterliste. Deren "display: none" hat nur die Spezifitaet 0-1-0 und
 * verloere gegen 0-1-1 - das Untermenue stuende dann immer offen. Genau das
 * ist beim ersten Bau passiert und war im Bildschirmfoto zu sehen.
 */
.hauptmenue > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kt-luft-2) var(--kt-luft-4);
}

.hauptmenue a {
  font-family: var(--kt-schrift-text);
  font-size: var(--kt-groesse-2);
  font-weight: 600;
  color: var(--kt-text);
  text-decoration: none;
  padding: var(--kt-luft-2) 0;
  display: inline-block;
  position: relative;
  transition: color .18s ease, transform .12s ease;
}

/* DIE UNTERKANTE WAECHST AUS DER MITTE (E18). Sie liegt als ::after
 * immer da, nur auf Breite null zusammengeschoben - so springt nichts,
 * wenn sie erscheint, und der Text behaelt seinen Platz. transform statt
 * width, weil transform ohne Neuberechnung des Layouts animiert. */
.hauptmenue a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--kt-rahmen-kante);
  background: var(--kt-rot);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}

.hauptmenue a:hover,
.hauptmenue a:focus-visible {
  color: var(--kt-rot);
}
.hauptmenue a:hover::after,
.hauptmenue a:focus-visible::after {
  transform: scaleX(1);
}
.hauptmenue a:active { transform: translateY(1px); }

/* DER AKTUELLE PUNKT IST NICHT NUR FARBIG.
 *
 * Farbe allein ist kein Merkmal fuer Menschen, die sie nicht unterscheiden -
 * etwa acht Prozent der Maenner. Deshalb traegt der aktive Punkt zusaetzlich
 * die volle Unterkante, und im Markup aria-current="page" fuer
 * Vorleseprogramme. "im-bereich" ist der Oberpunkt einer Unterseite -
 * gleiches Bild, ohne aria-current (das gehoert der Seite selbst).
 */
.hauptmenue a[aria-current="page"],
.hauptmenue a.im-bereich {
  color: var(--kt-rot);
}
.hauptmenue a[aria-current="page"]::after,
.hauptmenue a.im-bereich::after {
  transform: scaleX(1);
}

/* --- Unterpunkte ---------------------------------------------------------
 * Auf breiten Schirmen klappen sie bei Hover oder Tastaturfokus auf. Kein
 * Skript noetig: :focus-within traegt die Tastaturbedienung.
 */
.hat-unterpunkte {
  position: relative;
}

.hauptmenue .unterpunkte {
  /* Unsichtbar, aber im Layout - so laesst sich das Aufklappen weich
   * blenden. visibility nimmt es zugleich aus der Tab-Reihenfolge. */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  /* Die Unterliste ist eine ul in einer li: Ohne diese Zeile erbt sie
   * den Kreis-Punkt verschachtelter Listen. */
  list-style: none;
  margin: 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 13rem;
  background: var(--kt-grund);
  border: var(--kt-rahmen-1) solid var(--kt-linie);
  border-radius: var(--kt-radius-2);
  box-shadow: var(--kt-schatten-tief);
  padding: var(--kt-luft-2);
  z-index: 50;
}

.hauptmenue .hat-unterpunkte:hover > .unterpunkte,
.hauptmenue .hat-unterpunkte:focus-within > .unterpunkte {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

.unterpunkte a {
  display: block;
  padding: var(--kt-luft-2) var(--kt-luft-3);
  border-radius: var(--kt-radius-1);
  transition: background .15s ease, color .15s ease;
}
.unterpunkte a::after { display: none; }

.unterpunkte a:hover,
.unterpunkte a:focus-visible {
  background: var(--kt-rot-sanft);
}

/* --- Kontakt im Kopf ----------------------------------------------------- */
.kopfkontakt {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--kt-luft-1);
}

.knopf.termin {
  font-size: var(--kt-groesse-1);
  padding: var(--kt-luft-2) var(--kt-luft-4);
}

.kopftelefon {
  font-family: var(--kt-schrift-text);
  font-weight: 700;
  font-size: var(--kt-groesse-2);
  color: var(--kt-rot);
  text-decoration: none;
  white-space: nowrap;
}

/* --- Der Umschalter ------------------------------------------------------
 * Ohne Skript bleibt er versteckt (hidden im Markup) und das Menue
 * sichtbar. Das Skript nimmt das hidden weg und klappt ein.
 */
.menueschalter {
  display: none;
  align-items: center;
  gap: var(--kt-luft-2);
  background: var(--kt-grund);
  color: var(--kt-text);
  font-family: var(--kt-schrift-text);
  font-size: var(--kt-groesse-2);
  font-weight: 600;
  border: var(--kt-rahmen-2) solid var(--kt-feldlinie);
  border-radius: var(--kt-radius-1);
  padding: var(--kt-luft-2) var(--kt-luft-3);
  cursor: pointer;
}

.menueschalter[hidden] { display: none; }

.menueschalter-strich,
.menueschalter-strich::before,
.menueschalter-strich::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  content: "";
}
.menueschalter-strich { position: relative; }
.menueschalter-strich::before { position: absolute; top: -6px; }
.menueschalter-strich::after  { position: absolute; top: 6px; }

/* --- Schmale Schirme -----------------------------------------------------
 * DER UMBRUCH LIEGT BEI 1060px, NICHT BEI 390px.
 *
 * .bahn ist auf 1060px begrenzt. Acht Hauptpunkte plus Logo, Terminknopf und
 * Telefonnummer fuellen diese Breite fast vollstaendig aus - darunter bricht
 * die Zeile. Der Umbruch gehoert deshalb dorthin, wo es eng wird, und nicht
 * erst ans Telefon.
 */
@media (max-width: 1060px) {
  .menueschalter:not([hidden]) { display: flex; }

  .hauptmenue {
    flex-basis: 100%;
    order: 10;
  }

  /* DER KOPF BRAUCHT ZWEI ZEILEN, NICHT DREI.
   *
   * Ohne diese Regel entscheidet der Umbruch selbst, wer wo landet - und
   * bei 390px stand jedes der drei Stuecke allein auf einer Zeile. Die
   * erste Bildschirmhoehe ist laut Designuebergabe die wichtigste Flaeche;
   * sie mit Kopfzeile zu fuellen ist die teuerste Art, Platz zu verlieren.
   *
   * Jetzt: Zeile 1 traegt Logo und Menueknopf, Zeile 2 Termin und Telefon.
   */
  .kopfkontakt {
    flex-basis: 100%;
    order: 5;
    justify-content: flex-start;
  }

  /* DAS MENUE KLAPPT WEICH AUF (E18): Ein Raster, dessen einzige Zeile
   * zwischen 0fr und 1fr wechselt - die Hoehe animiert, ohne dass eine
   * feste max-height geraten werden muss. Zugeklappt ist es zugleich
   * unsichtbar (visibility), damit kein Punkt im Verborgenen den
   * Tastaturfokus bekommt. Ohne Skript gibt es kein data-eingeklappt,
   * das Menue steht offen. */
  .hauptmenue {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows .28s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0s;
  }
  .hauptmenue > ul { overflow: hidden; min-height: 0; }
  .hauptmenue[data-eingeklappt="ja"] {
    grid-template-rows: 0fr;
    visibility: hidden;
    transition-delay: 0s, .28s;
  }

  .hauptmenue ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .hauptmenue > ul > li {
    border-top: var(--kt-rahmen-1) solid var(--kt-linie);
  }

  .hauptmenue a {
    display: block;
    padding: var(--kt-luft-3) 0;
    /* Die Kante wandert nach links: Eine Unterkante saehe in einer
     * senkrechten Liste wie ein Trenner aus. */
    border-left: var(--kt-rahmen-kante) solid transparent;
    padding-left: var(--kt-luft-3);
    transition: color .18s ease, background .18s ease, border-color .18s ease;
  }
  .hauptmenue a::after { display: none; }
  .hauptmenue a:active { transform: none; }

  .hauptmenue a:hover,
  .hauptmenue a:focus-visible { background: var(--kt-rot-sanft); }

  .hauptmenue a[aria-current="page"],
  .hauptmenue a.im-bereich {
    border-left-color: var(--kt-rot);
    background: var(--kt-rot-sanft);
  }

  /* Auf schmalen Schirmen stehen die Unterpunkte offen und eingerueckt.
   * Ein Aufklapp im Aufklapp ist mit dem Daumen kaum zu treffen. */
  .hauptmenue .unterpunkte {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
    position: static;
    border: 0;
    box-shadow: none;
    padding: 0 0 0 var(--kt-luft-5);
    background: transparent;
  }


  .kopfkontakt {
    flex-direction: row;
    align-items: center;
    gap: var(--kt-luft-3);
  }
}

@media (max-width: 560px) {
  /* DIE RICHTUNG ZURUECK AUF row.
   *
   * stil.css stellt den Kopf hier auf flex-direction: column. Das war
   * richtig, solange er nur Logo und Kontaktzeile trug - mit dem
   * Menueknopf zwingt es jedes der drei Stuecke auf eine eigene Zeile,
   * und der Kopf frisst ein Viertel der ersten Bildschirmhoehe.
   *
   * navigation.css wird nach stil.css geladen und hat dieselbe
   * Spezifitaet, gewinnt also. Die Zeile steht hier und nicht in
   * stil.css, weil stil.css zugleich die statische Seite traegt - die
   * hat keinen Menueknopf und braucht die Aenderung nicht.
   */
  .seitenkopf .bahn {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .marke picture { display: block; }

.marke img { height: 52px; }
}

/* --- Bewegung mit Mass ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hauptmenue,
  .hauptmenue a,
  .hauptmenue a::after,
  .hauptmenue .unterpunkte,
  .menueschalter {
    transition: none;
  }
}