/*
 * 02-kopfzeile.css — Hinweisband, Topbar, Kopfzeile, Flyout, mobiles Menü,
 * Dock, rechte Seitenleiste.
 *
 * Zwei Haltepunkte, keine weiteren: 1200px (Navigation) und 900px (Layout).
 */

/* === Hinweisband ======================================================== */

.db-hinweisband {
  background: var(--db-gruen);
  color: var(--db-creme-warm);
  font-size: var(--db-ui-klein-size);
  padding-block: 10px;
  text-align: center;
}

/* === Topbar ============================================================= */

.db-topbar {
  background: var(--db-weiss);
  border-bottom: 1px solid var(--db-linie-hell-08);
}
.db-topbar__innen {
  min-height: var(--db-topbar-hoehe);
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.db-topbar__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* 44px Klickfläche durch Polsterung, nicht durch feste Höhe. */
  padding-block: 13px;
  font-size: var(--db-ui-size);
  color: var(--db-text-leise);
  transition: color var(--db-t-menuelink) ease;
}
.db-topbar__link:hover { color: var(--db-gruen); }

.db-topbar__sprachen {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--db-ui-size);
  color: var(--db-text-menue);
}
.db-topbar__sprachen-label { color: var(--db-text-leise); }
.db-topbar__trenner {
  width: 1px;
  height: 12px;
  background: var(--db-linie-hell-18);
}

@media (max-width: 899px) {
  .db-topbar__telefon { display: none; }
  .db-topbar__sprachen { margin-left: 0; }
}

/* === Kopfzeile ========================================================== */

/* Kein Zwei-Zustands-Wechsel: immer weiß, immer 104px, kein Schatten. */
.db-kopfzeile {
  position: sticky;
  top: 0;
  z-index: var(--db-z-kopfzeile);
  background: var(--db-weiss);
}
.db-kopfzeile__innen {
  height: var(--db-kopfzeile-hoehe);
  display: flex;
  align-items: center;
  gap: 32px;
}

.db-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.db-logo__bild { height: 66px; width: auto; }
.db-logo--mobil .db-logo__bild { height: 52px; }
.db-logo__ersatz {
  font-size: var(--db-h3-person-size);
  font-weight: var(--db-w-halbfett);
  color: var(--db-gruen);
  letter-spacing: -.02em;
}

/* --- Hauptmenü --- */

.db-menue { margin-left: auto; }
.db-menue__liste {
  display: flex;
  align-items: center;
  gap: 4px;
}
.db-menue__punkt { position: relative; }

.db-menue__liste > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* 44px durch Polsterung. 13px oben/unten plus Zeilenhöhe. */
  padding: 13px 12px;
  border-bottom: 2px solid transparent;
  font-size: var(--db-menue-size);
  font-weight: var(--db-w-normal);
  color: var(--db-text-menue);
  white-space: nowrap;
  transition: color var(--db-t-menuelink) ease,
              border-color var(--db-t-menuelink) ease;
}
.db-menue__liste > li > a:hover,
.db-menue__liste > li > a:focus-visible {
  color: var(--db-gruen);
  border-bottom-color: var(--db-gruen);
}

/* Aktiver Punkt über die WordPress-Klassen, nicht über den Dateinamen.
   OHNE Unterstreichung: Christians Vorgabe vom 27.08.2026 — die Startseite
   muss nicht markiert werden, das wirkt ruhiger. Der Unterstrich bleibt dem
   Hover vorbehalten. */
.db-menue__liste > li.current-menu-item > a,
.db-menue__liste > li.current-menu-ancestor > a,
.db-menue__liste > li.current-page-ancestor > a {
  color: var(--db-gruen);
  font-weight: var(--db-w-halbfett);
  border-bottom-color: transparent;
}
.db-menue__liste > li.current-menu-item > a:hover,
.db-menue__liste > li.current-menu-ancestor > a:hover {
  border-bottom-color: var(--db-gruen);
}

/* Pfeilchen am Elternpunkt */
.db-menue__punkt--hat-flyout > a::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .55;
}

/* --- Flyout --- */

.db-menue__punkt--hat-flyout > .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 256px;
  padding: 10px;
  background: var(--db-weiss);
  border: 1px solid var(--db-linie-hell-10);
  border-radius: var(--db-r-panel);
  box-shadow: var(--db-schatten-flyout);

  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--db-t-ui) var(--db-kurve-weich),
              transform var(--db-t-ui) var(--db-kurve-weich);
}

/* Hover UND Tastatur. :focus-within ist der Grund, warum das Menü ohne Maus
   bedienbar ist — ohne diese Zeile ist das Untermenü per Tab unerreichbar. */
.db-menue__punkt--hat-flyout:hover > .sub-menu,
.db-menue__punkt--hat-flyout:focus-within > .sub-menu,
.db-menue__punkt--hat-flyout.db-offen > .sub-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.db-menue__punkt--hat-flyout > .sub-menu a {
  display: block;
  padding: 12px 14px;
  border-radius: var(--db-r-karte);
  font-size: var(--db-ui-size);
  color: var(--db-text-menue);
  transition: background var(--db-t-schnell) ease,
              color var(--db-t-schnell) ease;
}
.db-menue__punkt--hat-flyout > .sub-menu a:hover,
.db-menue__punkt--hat-flyout > .sub-menu a:focus-visible {
  background: var(--db-sand-hell);
  color: var(--db-gruen);
}
.db-menue__punkt--hat-flyout > .sub-menu .current-menu-item > a {
  background: var(--db-sand);
  color: var(--db-gruen);
}

/* --- Burger --- */

.db-burger {
  display: none;
  width: 48px; height: 48px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  margin-left: auto;
  border: 1px solid var(--db-linie-hell-16);
  border-radius: var(--db-r-pille);
}
.db-burger__strich {
  display: block;
  width: 18px; height: 2px;
  background: var(--db-tinte);
  transition: transform var(--db-t-ui) var(--db-kurve-weich);
}

/* === Mobiles Menü ======================================================= */

.db-menue-mobil {
  position: fixed;
  inset: 0;
  z-index: var(--db-z-menue);
  background: var(--db-weiss);
  display: flex;
  flex-direction: column;
  padding: 24px var(--db-seitenrand) 32px;
  overflow-y: auto;
  overscroll-behavior: contain;

  /* Einblenden über Deckkraft, nicht als Einschub von rechts. */
  opacity: 0;
  transition: opacity var(--db-t-menue) var(--db-kurve-weich);
}
.db-menue-mobil[hidden] { display: none; }
.db-menue-mobil.db-offen { opacity: 1; }

.db-menue-mobil__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
.db-schliessen {
  width: 48px; height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--db-linie-hell-18);
  border-radius: var(--db-r-pille);
  color: var(--db-tinte);
}

.db-menue-mobil__liste > li { border-bottom: 1px solid var(--db-linie-hell-12); }
.db-menue-mobil__liste > li > a {
  display: block;
  padding: 14px 0;
  font-size: var(--db-menue-mobil-size);
  font-weight: var(--db-w-mittel);
  line-height: var(--db-menue-mobil-lh);
  letter-spacing: var(--db-menue-mobil-ls);
  color: var(--db-tinte);

  /* Staffelung: 55ms je Index, gesetzt von website.js über --db-index. */
  opacity: 0;
  transform: translateY(14px);
}
.db-menue-mobil.db-offen .db-menue-mobil__liste > li > a {
  opacity: 1;
  transform: none;
  transition: opacity var(--db-t-menue-punkt) var(--db-kurve-weich) calc(var(--db-index, 0) * 55ms),
              transform var(--db-t-menue-punkt) var(--db-kurve-weich) calc(var(--db-index, 0) * 55ms);
}

/* Aufklapper der zweiten Ebene. max-height statt <details>: Safari kann
   ::details-content, aber nicht interpolate-size — eine Weiche nur auf das
   erste ließe das Akkordeon dort schlagartig aufspringen. */
.db-menue-mobil__trigger {
  position: absolute;
  right: 0; top: 8px;
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--db-linie-hell-20);
  border-radius: var(--db-r-pille);
  font-size: var(--db-plus-size);
  line-height: 1;
  color: var(--db-text-menue);
}
.db-menue-mobil__liste > li { position: relative; }

.db-menue-mobil__liste .sub-menu {
  max-height: 0;
  overflow: hidden;
  border-left: 1px solid var(--db-linie-hell-14);
  padding-left: 16px;
  margin-left: 2px;
  transition: max-height var(--db-t-unter) var(--db-kurve-aufklappen);
}
.db-menue-mobil__liste .sub-menu > li > a {
  display: block;
  padding: 11px 0;
  font-size: var(--db-lauftext-klein-size);
  color: var(--db-text);
  opacity: 0;
  transition: opacity var(--db-t-unter-op) ease var(--db-t-unter-verz);
}
.db-menue-mobil__liste li.db-offen .sub-menu > li > a { opacity: 1; }

.db-menue-mobil__fuss {
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.db-menue-mobil__telefon {
  font-size: var(--db-telefon-mobil-size);
  font-weight: var(--db-w-mittel);
  color: var(--db-gruen);
  padding-block: 12px;
}

/* === Dock =============================================================== */

.db-dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--db-z-dock);
  height: var(--db-dock-hoehe);
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--db-linie-dunkel-20);
}
.db-dock__knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: var(--db-lauftext-klein-size);
  font-weight: var(--db-w-mittel);
  color: var(--db-creme);
}
.db-dock__knopf--eins { background: var(--db-gruen); }
.db-dock__knopf--zwei { background: var(--db-gruen-hover); }

/* === Rechte Seitenleiste ================================================ */

.db-seitenleiste {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--db-z-seitenleiste);
  display: flex;
  flex-direction: column;
  /* align-items:flex-end ist der Punkt: ohne das streckt der Flexbehälter
     ALLE Kinder auf die Breite des breitesten — fährt eines aus, fahren alle
     mit. Gemessen und behoben am 27.08.2026. */
  align-items: flex-end;
  /* Gemessen im Entwurf: 2px, nicht 8px. */
  gap: 2px;
}

/* Drei Schaltflächen, nicht zwei — im Entwurf gemessen. Jede hat ihr eigenes
   Farbpaar, und die mittlere hovert gegen die Richtung der anderen: sie wird
   dunkler, nicht heller. */
.db-rail {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  /* Keine Polsterung: das Symbol sitzt in einem 58px breiten Feld und ist
     damit im eingefahrenen Zustand mittig. Im Entwurf gemessen padding:0. */
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border-radius: var(--db-r-rail);
  transition: width var(--db-t-pfeil-kachel) var(--db-kurve-weich),
              background var(--db-t-ui) ease;
}
.db-rail:hover,
.db-rail:focus-visible { width: 212px; }

.db-rail__symbol {
  width: 58px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.db-rail__text {
  font-size: var(--db-ui-size);
  font-weight: var(--db-w-mittel);
  /* Schrumpft im eingefahrenen Zustand auf null und wird vom overflow:hidden
     des Fähnchens abgeschnitten — so ist der Entwurf gebaut. */
  flex-shrink: 1;
  white-space: nowrap;
}

.db-rail--eins { background: var(--db-gruen);       color: var(--db-weiss); }
.db-rail--eins:hover, .db-rail--eins:focus-visible { background: var(--db-gruen-hover); }

.db-rail--zwei { background: var(--db-gruen-hover); color: var(--db-weiss); }
.db-rail--zwei:hover, .db-rail--zwei:focus-visible { background: var(--db-gruen); }

/* Helle Sandschaltfläche auf grüner Leiste — eine vierte Buttonvariante, die
   01-tokens.json unter "schaltflaeche" nicht kennt. */
.db-rail--drei { background: var(--db-sand);        color: var(--db-gruen); }
.db-rail--drei:hover, .db-rail--drei:focus-visible { background: var(--db-sand-tief); }

/* Beim Öffnen des Menüs darf nichts darüber liegen. */
body.db-menue-offen { overflow: hidden; }
body.db-menue-offen .db-dock,
body.db-menue-offen .db-seitenleiste { display: none; }


/* === Umschaltpunkt Navigation: 1200px ===================================
 *
 * STEHT AM DATEIENDE, und das mit Absicht: die Grundregel .db-dock setzt
 * display:grid. Stünde die Medienabfrage davor, gewänne die Grundregel bei
 * gleicher Spezifität — das Dock liefe dann auch im Desktop mit.
 */

@media (max-width: 1199px) {
  .db-menue,
  .db-kopfzeile__termin { display: none; }
  .db-burger { display: inline-flex; }
  .db-seitenleiste { display: none; }
  .db-dock { display: grid; }
  /* Platz für das Dock, sonst verdeckt es den Seitenschluss. */
  body { padding-bottom: var(--db-dock-hoehe); }
}

@media (min-width: 1200px) {
  .db-dock { display: none; }
  body { padding-bottom: 0; }
}