/* Das Seiten-Menü (☰ oben links) — Optik zu lib/nav.php.
 *
 * Stand bis 2026-08-20 im Block „site menu" von assets/site.css. Herausgelöst,
 * weil seither auch die /admin/-Seiten das Menü tragen (Andy: „alle Seiten sollen
 * aus dem Menü erreichbar sein") — die bringen aber ihr eigenes Inline-<style>
 * mit rosé getöntem Papier mit und dürfen site.css NICHT laden (andere Schrift,
 * andere Grundgrößen, .doc/.app-Layouts). Zwei Kopien derselben Menü-Regeln waren
 * die Alternative; genau dagegen ist site.css 2026-08-11 angetreten.
 *
 * Einbinden:
 *   öffentliche Seiten — gar nicht, site.css @import-iert diese Datei;
 *   /admin/*           — <link rel="stylesheet" href="/assets/menu.css"> direkt,
 *                        VOR dem eigenen <style> der Seite.
 *
 * Die :root-Werte unten sind DEFAULTS, keine Wahrheit: site.css setzt dieselben
 * Namen später nochmal (gewinnt auf den öffentlichen Seiten), und die Admin-Seiten
 * überschreiben --ink/--muted/--card/--line mit ihren rosé Tönen. Übrig bleiben im
 * Admin genau die --accent-*, die dort sonst niemand definiert.
 */

:root {
  --accent:      #413B8F;
  --accent-dark: #2A266A;
  --accent-soft: #ECE4F4;
  --ink:   #33302B;
  --muted: #6F6A62;
  --card:  #FFFFFF;
  --line:  #EAE2D6;
}

/* Rendered by lib/nav.php on every public page except fehler.php (which must
   stay dependency-free), plus every /admin/ page since 2026-08-20.
   A <details> hamburger, NOT an always-visible bar (Andy, 2026-08-11):
   button top-left; open = slide-in sidebar on desktop, dropdown card on
   phones. Works without JS — the summary toggles natively. */

/* ABSOLUTE, nicht fixed (Andy 2026-08-23) — der Knopf klebt am Seitenanfang und
   scrollt mit weg, statt beim Runterscrollen mitzuwandern und dabei über
   Formularen und Tabellen zu liegen. Genau das war der offene Punkt §44 im TODO;
   entschieden ist damit die Variante „oben festnageln".
   Der Weg zurück nach oben ist der Pfeil rechts unten (site_top_button() in
   lib/nav.php, nur im Admin). Das Panel selbst bleibt position:fixed — es geht
   ohnehin nur auf, solange der Knopf sichtbar ist, also am Seitenanfang. */
.site-menu {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 50;
}
.site-menu > summary {
  list-style: none;               /* no ▸ marker */
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  padding: 9px 16px 9px 14px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(51, 48, 43, .07);
  position: relative;
  z-index: 2;                     /* stays clickable above the scrim (= the ✕) */
}
.site-menu > summary::-webkit-details-marker { display: none; }
.site-menu > summary:hover { border-color: var(--accent); color: var(--accent-dark); }

/* The three bars, morphing into a ✕ while open. */
.menu-bars { display: inline-flex; flex-direction: column; gap: 4px; width: 18px; }
.menu-bars i {
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transition: transform .2s ease, opacity .2s ease;
}
.site-menu[open] .menu-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-menu[open] .menu-bars i:nth-child(2) { opacity: 0; }
.site-menu[open] .menu-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.menu-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(51, 48, 43, .35);
  z-index: 0;
}
.site-menu[open] .menu-scrim { display: block; }

/* Desktop default: sidebar sliding in from the left. */
.menu-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 300px;
  max-width: 85vw;
  overflow-y: auto;
  background: var(--card);
  border-right: 1px solid var(--line);
  box-shadow: 14px 0 36px rgba(51, 48, 43, .12);
  padding: 74px 16px 24px;        /* clears the fixed ✕ button */
  z-index: 1;
  transition: transform .22s ease;
  /* column so the contact block can sit at the very bottom of the sidebar */
  display: flex;
  flex-direction: column;
}
/* <details> content goes display:none when closed, so a plain transition has
   no start state; @starting-style provides one. Browsers without it simply
   show the panel instantly — fine. */
@starting-style {
  .site-menu[open] .menu-panel { transform: translateX(-100%); }
}

.menu-panel ul { list-style: none; margin: 0 0 14px; padding: 0; }
/* WICHTIG: "ul a", nicht "a". Der Kontaktblock steht ebenfalls im .menu-panel,
   und als reines ".menu-panel a" traf diese Regel auch Telefon, Mail, Impressum
   und Datenschutz — die bekamen damit display:block, 12px Polster und 16.5px,
   egal was .menu-contact sagte (gleiche Spezifität, nur Farbe/Fett wurden
   überschrieben). Genau das war Andys „so viel Abstand zwischen den Items"
   am 2026-08-19: nicht die line-height, sondern 24px Polster pro Link. */
.menu-panel ul a {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.menu-panel ul a:hover { background: var(--accent-soft); color: var(--accent-dark); }
.menu-panel ul a.active {
  background: var(--accent-soft);
  color: var(--accent);
  /* aria-current + Fläche, nicht nur Farbe */
}

/* ------------------------------------------------------------ Admin-Teil -- */
/* Nur sichtbar, solange die Session eingeloggt ist (lib/nav.php entscheidet).
   Seit 2026-08-20 laufen ALLE Admin-Wege hierüber — die Linkleisten oben auf
   den Admin-Seiten sind dafür ersatzlos entfallen (Andy). Optisch bewusst
   kleiner und ruhiger als die öffentlichen Punkte: es ist ein Werkzeugkasten,
   kein Teil der Website. */
.menu-sep {
  margin: 4px 0 10px;
  border: 0;
  border-top: 1px solid var(--line);
}
.menu-head {
  margin: 0 0 4px;
  padding: 0 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
.menu-panel ul.menu-admin a {
  padding: 8px 14px;
  font-size: 15px;
  color: var(--accent-dark);
}
/* Abmelden ist ein POST (CSRF-Token), sieht aber aus wie die Links darüber. */
.menu-logout { margin: 0 0 14px; }
.menu-logout button {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 8px 14px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--rose-dark, #B04A55);
  cursor: pointer;
}
.menu-logout button:hover { background: var(--rose-soft, #F9E2E4); }

/* Nina's contact at the bottom of the panel (Andy 2026-08-11). margin-top:auto
   pushes it to the sidebar's foot on desktop; in the auto-height mobile
   dropdown it is inert and the block simply follows the links.
   2026-08-19 (Andy): deliberately SMALL. It is a footnote under the menu, not a
   second navigation — at the old 14.5px it ate a third of the phone dropdown.
   The links above stay at their size; only this block shrank. */
.menu-contact {
  margin-top: auto;
  padding: 9px 14px 0;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  /* 2026-08-19, zweite Runde (Andy): die Schriftgröße passt, der ABSTAND war das
     Problem. Name/Telefon/Mail sind <br>-getrennt, ihr Abstand IST die
     line-height — deshalb hier so eng wie noch lesbar, statt weiter zu
     verkleinern. Gilt auch für die Rechtszeile darunter. */
  line-height: 1.25;
  color: var(--muted);
}
.menu-contact p { margin: 0 0 2px; }
.menu-contact strong { font-size: 12.5px; color: var(--ink); }
.menu-contact a {
  /* explizit inline + polsterfrei, damit eine spätere .menu-panel-Regel den
     Block nicht wieder aufbläht (siehe Kommentar bei .menu-panel ul a) */
  display: inline;
  padding: 0;
  font-size: inherit;
  color: var(--accent-dark);
  font-weight: 600;
  text-decoration: none;
}
.menu-contact a:hover { text-decoration: underline; }
.menu-contact .menu-legal { margin: 0; line-height: 1.2; }
.menu-contact .menu-legal a { color: var(--muted); font-weight: 500; font-size: 11.5px; }

/* Phones: dropdown card under the button instead of a sidebar. */
@media (max-width: 640px) {
  .menu-panel {
    top: 66px;
    left: 10px;
    right: 10px;
    bottom: auto;
    width: auto;
    max-width: none;
    max-height: calc(100vh - 80px);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 14px 36px rgba(51, 48, 43, .18);
    padding: 10px;
  }
  @starting-style {
    .site-menu[open] .menu-panel { transform: translateY(-8px); }
  }
  /* The phone dropdown is where the contact block hurt most — it has no
     margin-top:auto to absorb it, so every pixel is card height. */
  .menu-contact { padding-top: 8px; font-size: 12px; line-height: 1.22; }
  .menu-contact p { margin: 0 0 2px; }
}

/* ── Zurück nach oben (Andy 2026-08-23) ──────────────────────────────────────
   Gegenstück dazu, dass das Menü oben stehen bleibt: ein Pfeil rechts unten,
   der zum Seitenanfang zurückbringt — und damit zum Menü. Markup kommt aus
   site_top_button() in lib/nav.php und steht NUR auf den /admin/-Seiten (Andy:
   „nicht auf der Hauptseite"); die Regeln hier laufen auf öffentlichen Seiten
   also ins Leere.

   Es ist ein <a href="#site-menu">, kein <button>: ohne JavaScript springt der
   Link trotzdem an den Seitenanfang, wo das Menü sitzt. Das Script in nav.php
   blendet ihn nur aus, solange man ohnehin schon oben ist, und scrollt weich. */
.top-link {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 45;                    /* unter dem Menü-Scrim (50), über dem Rest */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 19px;
  line-height: 1;
  text-decoration: none;
  color: var(--accent-dark);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(51, 48, 43, .12);
  transition: opacity .18s ease, transform .18s ease, background .18s ease;
}
.top-link:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Nah am Seitenanfang weg — dort führt der Pfeil nirgendwohin. Die Klasse setzt
   das Script; ohne JavaScript steht der Pfeil immer da und funktioniert auch. */
.top-link.is-off {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
@media (max-width: 640px) {
  .top-link { right: 12px; bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-panel, .menu-bars i, .top-link { transition: none; }
}
@media print {
  .site-menu, .top-link { display: none; }
}