/* Kopie aus der gerenderten Astro-Website (http://127.0.0.1:8099, site/navigation/ui/mobil.css, kompiliert mit Autoprefixer), Stand 07.10.2026. Nicht von Hand angleichen, sondern neu kopieren. */
/* Mobiles Menü (Welle N1-B, flach seit NV-3) — auf Dunkel wie der Kopf
 * (Token-Umkehr in kopf.css, PL-1). Gilt nur innerhalb von .bm-mobilmenue
 * (Scope-Klasse bm-neu sitzt am selben Element, weil die Komponente per
 * Portal außerhalb des .bm-neu-Wrappers hängen kann).
 *
 * Aufbau: eine Liste der Hauptpunkte; ein Tippen klappt den Hauptpunkt auf,
 * darunter stehen alle Gruppen und Einträge untereinander (kein Drill-down).
 * Aufklappen über grid-template-rows (bewegung.md „Weiches Aufklappen").
 *
 * Dauer/Kurve (Z0-A, tokens.css): `--bm-menue-dauer`, `--bm-menue-ease`.
 *
 * Fokusrahmen (P3-A): --bm-fokus kommt mit dem Ton der Leiste (kopf.css,
 * header[data-ton]); das aufgeklappte Fach (--bm-bg-alt) steht im selben Ton.
 */
.bm-mobilmenue {
  position: fixed;
  /* Kopfhöhe --bm-kopf-h (unter 1024 px 64 px, PL-1); der
     Kopf bleibt beim offenen Menü sichtbar, der Drawer beginnt darunter. */
  top: var(--bm-kopf-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--bm-z-menue);
  background: var(--bm-bg);
  color: var(--bm-text);
  font-family: var(--bm-font);
  opacity: 0;
  pointer-events: none;
  /* Weiches Öffnen: blendet auf und rückt ein kleines Stück nach unten. */
  translate: 0 -0.5rem;
  transition: opacity var(--bm-menue-dauer) var(--bm-menue-ease), translate var(--bm-menue-dauer) var(--bm-menue-ease);
}

.bm-mobilmenue--offen {
  opacity: 1;
  translate: none;
  pointer-events: auto;
}

.bm-mobilmenue:focus {
  outline: none;
}

.bm-mobilmenue__buehne {
  box-sizing: border-box;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--bm-linie);
}

.bm-mobilmenue__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bm-mobilmenue__punkt { border-bottom: 1px solid var(--bm-linie); }

/* Hauptpunkt: Knopf in der Titelschrift, ruhig (TY-1) */
.bm-mobilmenue__eintrag {
  text-decoration: none;          /* auch als Link (Arbeiten) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-sizing: border-box;
  width: 100%;
  background: none;
  border: 0;
  margin: 0;
  padding: 1.0625rem var(--bm-rand);
  font-family: var(--bm-font-titel);
  font-size: var(--bm-t-h3);
  font-weight: var(--bm-g-normal);
  font-synthesis: none;
  line-height: var(--bm-zh-titel);
  text-align: left;
  color: var(--bm-text);
  cursor: pointer;
  scroll-margin-top: 0;
}
.bm-mobilmenue__eintrag:focus-visible { color: var(--bm-signal-dunkel); }
/* Hover nur mit echtem Zeiger – auf Touch bliebe die Farbe nach dem Tippen stehen (P1-A) */
@media (hover: hover) {
  .bm-mobilmenue__eintrag:hover,
  .bm-mobilmenue__ziel:hover { color: var(--bm-signal-dunkel); }
  .bm-mobilmenue__ziele--unter .bm-mobilmenue__ziel:hover,
  .bm-mobilmenue__recht a:hover { color: var(--bm-text); }
}
.bm-mobilmenue__eintrag:focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: var(--bm-fokus-versatz-innen); }
.bm-mobilmenue__eintrag--aktiv {
  color: var(--bm-signal-dunkel);
  box-shadow: inset 1px 0 0 var(--bm-signal-kontur);   /* feine Markierung statt Fettung (TY-1) */
}

.bm-mobilmenue__pfeil {
  flex: none;
  color: var(--bm-text-leise);
  font-size: 1.25em;
  line-height: 1;
  transition: rotate var(--bm-dauer) var(--bm-ease);
}
.bm-mobilmenue__eintrag[aria-expanded='true'] .bm-mobilmenue__pfeil { rotate: 90deg; }

/* Fach eines Hauptpunkts: alle Gruppen und Einträge untereinander */
.bm-mobilmenue__fach {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--bm-dauer) var(--bm-ease), visibility var(--bm-dauer) var(--bm-ease);
}
.bm-mobilmenue__fach.ist-offen {
  grid-template-rows: 1fr;
  visibility: visible;
  transition-duration: var(--bm-dauer), 0s;   /* sofort fokussierbar */
}
.bm-mobilmenue__fach-innen {
  min-height: 0;
  overflow: hidden;
  background: var(--bm-bg-alt);
}
.bm-mobilmenue__fach-innen > :first-child { margin-top: 0.75rem; }
.bm-mobilmenue__fach-innen > :last-child { margin-bottom: 1.25rem; }

.bm-mobilmenue__uebersicht {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;          /* Tippfläche 44 px */
  margin-inline: var(--bm-rand);
  font-size: var(--bm-t-nav);
  font-weight: var(--bm-g-normal);
  line-height: var(--bm-zh-kompakt);
  letter-spacing: var(--bm-sp-knopf);
  color: var(--bm-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.bm-mobilmenue__uebersicht:focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: var(--bm-fokus-versatz, 2px); }

.bm-mobilmenue__gruppe + .bm-mobilmenue__gruppe { margin-top: 1.25rem; }
.bm-mobilmenue__gruppentitel {
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  min-height: 2.75rem;          /* gleiche Höhe mit und ohne Link */
  margin: 0 var(--bm-rand) 0.25rem;
  padding: 0.75rem 0 0.5rem;
  border-bottom: 1px solid var(--bm-linie);
  font-family: var(--bm-font-titel);
  font-size: var(--bm-t-h4);
  font-weight: var(--bm-g-normal);
  font-synthesis: none;
  line-height: var(--bm-zh-titel);
  color: var(--bm-text);
}

/* Gruppentitel als Link zur Übersichtsseite der Gruppe (Anmerkung 2219cda9) */
.bm-mobilmenue__titel-link {
  display: flex;
  flex: 1;
  align-items: flex-end;
  min-height: 2.75rem;          /* Tippfläche 44 px */
  margin-block: -0.75rem -0.5rem;
  padding-block: 0.75rem 0.5rem;
  color: inherit;
  text-decoration: none;
}
.bm-mobilmenue__titel-link:is(:focus-visible, [aria-current='page']) { color: var(--bm-signal-dunkel); }
.bm-mobilmenue__titel-link:focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: var(--bm-fokus-versatz-innen); }
@media (hover: hover) { .bm-mobilmenue__titel-link:hover { color: var(--bm-signal-dunkel); } }

.bm-mobilmenue__ziele { list-style: none; margin: 0; padding: 0; }
.bm-mobilmenue__ziel {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: 2.75rem;          /* Tippfläche 44 px */
  padding: 0.5rem var(--bm-rand);
  font-size: var(--bm-t-nav);   /* P1-A: 15 px (vorher --bm-t-fest, 16 px) */
  font-weight: var(--bm-g-normal);
  line-height: var(--bm-zh-kompakt);
  letter-spacing: var(--bm-sp-knopf);
  color: var(--bm-text);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.bm-mobilmenue__ziel:focus-visible { color: var(--bm-signal-dunkel); outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: var(--bm-fokus-versatz-innen); }
.bm-mobilmenue__ziel[aria-current='page'] {
  color: var(--bm-signal-dunkel);
  box-shadow: inset 1px 0 0 var(--bm-signal-kontur);
}
/* Unterseiten eines Eintrags: eingerückt, feine Linie links, leiser */
.bm-mobilmenue__ziele--unter {
  margin: 0 var(--bm-rand) 0.5rem calc(var(--bm-rand) + 0.25rem);
  border-left: 1px solid var(--bm-linie);
}
.bm-mobilmenue__ziele--unter .bm-mobilmenue__ziel {
  padding-inline: 1rem 0;
  font-size: var(--bm-t-klein);   /* eine Stufe kleiner und leiser */
  color: var(--bm-text-leise);
}
.bm-mobilmenue__ziele--unter .bm-mobilmenue__ziel:is(:focus-visible, [aria-current='page']) { color: var(--bm-text); }

.bm-mobilmenue__kontakt {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--bm-knopf-hoehe);
  margin: 2rem var(--bm-rand) 1.5rem;
  position: relative;
  isolation: isolate;
  border: 1px solid var(--bm-signal-kontur);
  border-radius: var(--bm-radius-pille);
  background: var(--bm-signal-verlauf) border-box;   /* Primärknopf: Verlauf, Text --bm-signal-text */
  color: var(--bm-signal-text);
  font-weight: var(--bm-g-mittel);
  font-size: var(--bm-t-knopf);
  letter-spacing: var(--bm-sp-knopf);
  text-decoration: none;
}
/* Hover: Schleier über dem Verlauf (Richtung Hover-Ton, kein Farbsprung) */
.bm-mobilmenue__kontakt::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -1px;
  border-radius: inherit;
  background: var(--bm-signal-schleier);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--bm-dauer) var(--bm-ease);
}
.bm-mobilmenue__kontakt:is(:hover, :focus-visible)::after { opacity: 1; }
.bm-mobilmenue__kontakt:focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: var(--bm-fokus-versatz, 3px); }

/* Anmelden: nur unter 360 px (dort fehlt das Symbol im Kopf, kopf.css) */
.bm-mobilmenue__anmelden { display: none; }
@media (max-width: 359px) {
  .bm-mobilmenue__anmelden {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;          /* Tippfläche 44 px */
    margin: -0.5rem var(--bm-rand) 1rem;
    font-size: var(--bm-t-nav);
    font-weight: var(--bm-g-normal);
    line-height: var(--bm-zh-kompakt);
    letter-spacing: var(--bm-sp-knopf);
    color: var(--bm-text);
    text-decoration: none;
  }
  .bm-mobilmenue__anmelden:focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: var(--bm-fokus-versatz-innen); }
}
@media (max-width: 359px) and (hover: hover) { .bm-mobilmenue__anmelden:hover { color: var(--bm-signal-dunkel); } }

.bm-mobilmenue__recht {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin: 0;
  padding: 0 var(--bm-rand) 2rem;
  list-style: none;
}
.bm-mobilmenue__recht a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;          /* Tippfläche 44 px */
  font-size: var(--bm-t-klein);
  line-height: var(--bm-zh-kompakt);
  color: var(--bm-text-leise);
  text-decoration: none;
}
.bm-mobilmenue__recht a:focus-visible { color: var(--bm-text); outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: var(--bm-fokus-versatz, 2px); }

@media (prefers-reduced-motion: reduce) {
  .bm-mobilmenue,
  .bm-mobilmenue--offen,
  .bm-mobilmenue__fach,
  .bm-mobilmenue__pfeil,
  .bm-mobilmenue__kontakt,
  .bm-mobilmenue__kontakt::after {
    transition: none !important;
  }
}

/* Kontaktwege unter dem Kontakt-Knopf */
.bm-mobilmenue__kontaktwege { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1.25rem; margin: -0.75rem var(--bm-rand) 1.5rem; padding: 0; }
.bm-mobilmenue__kontaktwege a { display: inline-flex; align-items: center; min-height: 44px; color: var(--bm-text); font-size: var(--bm-t-nav); text-decoration: underline; text-underline-offset: 0.25em; }