/* huelle.css - die Huelle des Programms (Bauplan Grundgeruest 010; Werte uebernommen aus dem bisherigen Programm,
   Programm-Look seit dem Feinschliff 05.10.2026): schwebende Seitenleiste mit Logo, Gruppen je Bereich und Wellen,
   auf Symbole einklappbar; obere Leiste mit Suche, Neu, Glocke und Kuerzel; am Handy Tab-Leiste, runder Knopf und die
   Leiste als Schublade von unten. Nur Tokens. */

/* ── Aufbau: Leiste links, rechts obere Leiste und Blatt ─────────── */
/* Als App vom Home-Bildschirm liegt die iPhone-Statusleiste ueber dem Programm (viewport-fit=cover). Der Streifen
   dahinter haelt die weisse Uhr lesbar, alles andere beginnt darunter (14.10.2026). Im Browser ist er 0 hoch. */
body::before { content: ""; position: fixed; left: 0; right: 0; top: 0; height: var(--sicher-oben); background: var(--statusleiste-grund); z-index: var(--ebene-statusleiste); pointer-events: none; }
.app { display: grid; grid-template-columns: calc(var(--leiste-breite) + var(--r-3)) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 100dvh; padding: var(--sicher-oben) var(--sicher-rechts) 0 var(--sicher-links); background: var(--grund); background-image: var(--app-grund); }
.app.leiste-schmal { grid-template-columns: calc(var(--leiste-schmal) + var(--r-3)) minmax(0, 1fr); }

/* ── Dunkle Seitenleiste ────────────────────────────────────────────── */
.leiste { position: relative; margin: var(--r-3) 0 var(--r-3) var(--r-3); border-radius: var(--rundung-leiste); box-shadow: var(--schatten-leiste); background: var(--leiste-grund); background-image: var(--leiste-verlauf); color: var(--leiste-text); display: flex; flex-direction: column; min-width: 0; overflow: hidden; transition: transform var(--dauer) var(--kurve); }
.leiste-kopf, .leiste-baum, .leiste-fuss { position: relative; z-index: 1; }
.leiste-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--r-2); padding: var(--r-4) var(--r-2) var(--r-3) var(--r-4); }
.leiste-marke { display: inline-flex; border-radius: var(--rundung-klein); min-width: 0; }
.leiste-logo { display: block; height: 44px; width: auto; }
.leiste-griff { display: none; }
.leiste-zu { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--rundung-klein); color: var(--leiste-text-leise); flex: 0 0 auto; }
.leiste-zu:hover { background: var(--leiste-hover); color: var(--leiste-text-an); }
.leiste-baum { flex: 1 1 auto; overflow-y: auto; padding: 0 var(--r-2) var(--r-3); }
.leiste-abschnitt { font-size: var(--groesse-0); letter-spacing: .08em; text-transform: uppercase; color: var(--leiste-text-leise); padding: var(--r-4) var(--r-2) var(--r-1); font-weight: var(--fett); white-space: nowrap; }
.leiste-punkt { position: relative; display: flex; align-items: center; border-radius: var(--rundung-mittel); }
.leiste-punkt.tief { padding-left: var(--r-5); }
.leiste-punkt { transition: background var(--dauer-kurz); }
.leiste-punkt:hover { background: var(--leiste-hover); }
.leiste-punkt.aktiv::before { content: ""; position: absolute; left: 0; top: var(--r-2); bottom: var(--r-2); width: 3px; border-radius: var(--rundung-pille); background: var(--leiste-akzent); }
.leiste-punkt.aktiv { background: var(--leiste-an); }
.leiste-punkt.aktiv .leiste-titel { font-weight: var(--halbfett); color: var(--leiste-text-an); }
.leiste-punkt.aktiv .leiste-symbol { color: var(--leiste-akzent); }
.leiste-link { display: flex; align-items: center; gap: var(--r-3); flex: 1 1 auto; min-width: 0; padding: var(--r-2); text-decoration: none; font-size: var(--groesse-2); color: var(--leiste-text); min-height: 40px; text-align: left; }
.leiste-symbol { width: 24px; display: inline-flex; justify-content: center; flex: 0 0 auto; color: var(--leiste-text-leise); }
.leiste-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.leiste-zahl { margin-left: auto; margin-right: var(--r-1); min-width: 20px; padding: 0 var(--r-2); border-radius: var(--rundung-pille); background: var(--tonerde-dunkel); color: var(--weiss); font-size: var(--groesse-0); font-weight: var(--fett); line-height: 1.7; text-align: center; flex: 0 0 auto; }
.leiste-zahl.leise { background: var(--leiste-zahl); }
.leiste-gruppe-kopf { width: 100%; }
.leiste-gruppe-kopf .leiste-titel { white-space: normal; line-height: var(--zeile-eng); }   /* lange Bereichsnamen brechen um statt "…" */
.leiste-pfeil svg { width: 18px; height: 18px; }
.leiste-pfeil { display: inline-flex; color: var(--leiste-text-leise); transition: transform var(--dauer-kurz); flex: 0 0 auto; }
/* Der Name eines Bereichs fuehrt zu seiner Willkommensseite, der Pfeil daneben klappt (Willkommensseiten 08.10.2026). */
.leiste-klapp { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 36px; height: 36px; margin-right: var(--r-1);
  padding: 0; border: 0; border-radius: var(--rundung-klein); background: transparent; color: var(--leiste-text-leise); cursor: pointer; }
.leiste-klapp:hover { background: var(--leiste-hover); color: var(--leiste-text-an); }
.leiste-klapp[aria-expanded="false"] .leiste-pfeil { transform: rotate(-90deg); }
.leiste-gruppe.hier > .leiste-punkt .leiste-symbol { color: var(--leiste-akzent); }
.leiste-gruppe.hier > .leiste-punkt .leiste-titel { color: var(--leiste-text-an); font-weight: var(--halbfett); }
.leiste-dazu .leiste-link { color: var(--leiste-text-leise); }
.leiste-fuss { padding: var(--r-2) var(--r-2) calc(var(--wellen-hoehe) + var(--r-1)); border-top: 1px solid var(--leiste-linie); font-size: var(--groesse-1); color: var(--leiste-text-leise); }
.leiste-fuss .leiste-link { min-height: 36px; }
.leiste-wellen { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: var(--wellen-hoehe); z-index: 0; pointer-events: none; }
.welle-a { fill: var(--petrol-hell); opacity: .22; }
.welle-b { fill: var(--nebel); opacity: .12; }
.welle-c { fill: var(--petrol-dunkel); opacity: .55; }
.leiste-schatten { display: none; }

/* Eingeklappt: nur Symbole (Computer). Namen stehen als Hinweis am Symbol (title). */
.app.leiste-schmal .leiste-kopf { justify-content: center; padding: var(--r-4) 0 var(--r-3); }
.app.leiste-schmal .leiste-marke, .app.leiste-schmal .leiste-titel, .app.leiste-schmal .leiste-pfeil,
.app.leiste-schmal .leiste-gruppe-seiten, .app.leiste-schmal .leiste-abschnitt, .app.leiste-schmal .leiste-klapp { display: none; }
.app.leiste-schmal .leiste-link { justify-content: center; padding: var(--r-2) 0; }
.app.leiste-schmal .leiste-zahl { position: absolute; top: 2px; right: var(--r-1); margin: 0; min-width: 16px; padding: 0 var(--r-1); line-height: 1.5; }
.app.leiste-schmal .leiste-baum::before { content: ""; display: block; height: 1px; margin: var(--r-2) var(--r-2) var(--r-3); background: var(--leiste-linie); }

/* ── Obere Leiste: Suche in der Mitte, rechts Neu, Glocke, Kuerzel ─── */
.haupt { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.kopf { display: flex; align-items: center; gap: var(--r-3); height: var(--hoehe-kopfzeile); padding: var(--r-3) var(--r-5) 0; flex: 0 0 auto; }
.marke { display: none; align-items: center; gap: var(--r-2); padding: var(--r-1); border-radius: var(--rundung-klein); min-width: 0; text-decoration: none; }
.marke-logo { height: 30px; width: auto; display: block; }
.marke-name { font: var(--fett) var(--groesse-2)/1.25 var(--schrift-kopf); color: var(--petrol); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kopf-suche { flex: 0 1 var(--suche-breite); margin: 0 auto; display: flex; align-items: center; gap: var(--r-2); min-height: 38px; padding: 0 var(--r-2) 0 var(--r-3); border: 1px solid var(--linie); border-radius: var(--rundung-mittel); background: var(--flaeche); color: var(--tinte-leise); font-size: var(--groesse-2); text-align: left; min-width: 0; }
.kopf-suche:hover { border-color: var(--linie-stark); color: var(--tinte); }
.kopf-suche-text { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kopf-rechts { display: flex; align-items: center; gap: var(--r-2); flex: 0 0 auto; }
.kopf-neu { gap: var(--r-2); padding: 0 var(--r-2) 0 var(--r-3); }
.kopf-neu .taste { background: var(--leiste-zahl); color: var(--creme); }
.aufklapp { position: relative; }
.kopf-rund { position: relative; width: 38px; height: 38px; border-radius: var(--rundung-mittel); background: var(--flaeche); border: 1px solid var(--linie); display: inline-flex; align-items: center; justify-content: center; color: var(--tinte-leise); }
.kopf-rund:hover, .kopf-rund[aria-expanded="true"] { color: var(--tinte); border-color: var(--linie-stark); }
.glocke-zahl { position: absolute; top: -6px; right: -6px; min-width: 18px; padding: 0 var(--r-1); border-radius: var(--rundung-pille); background: var(--tonerde-dunkel); color: var(--weiss); font-size: var(--groesse-0); font-weight: var(--fett); line-height: 1.6; text-align: center; box-shadow: 0 0 0 2px var(--grund); }
.kopf-ich { width: 38px; height: 38px; border-radius: 50%; background: var(--salbei); color: var(--petrol); font-weight: var(--fett); font-size: var(--groesse-1); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; flex: 0 0 auto; }
.kopf-ich:hover, .kopf-ich[aria-expanded="true"] { box-shadow: var(--fokus-ring); }
.kopf-ich.gross { width: 40px; height: 40px; }
body.ohne-kuerzel .kuerzel { display: none; }
/* Runder Symbolknopf (auch fuer Dialoge der Bereiche, z. B. Schliessen) */
.kopf-knopf-rund { width: var(--hoehe-bedien); height: var(--hoehe-bedien); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--tinte-leise); text-decoration: none; flex: 0 0 auto; }
.kopf-knopf-rund:hover { background: var(--flaeche-leise); color: var(--tinte); }
.taste { font: var(--fett) var(--groesse-0)/1.5 var(--schrift); padding: 0 var(--r-1); border-radius: var(--r-1); background: var(--sand-hell); color: var(--tinte-leise); white-space: nowrap; }

/* Aufklapp-Felder: Glocke und Konto */
.klapp-feld { position: absolute; top: calc(100% + var(--r-2)); right: 0; width: min(var(--glocke-feld-breite), calc(100vw - 2 * var(--r-4))); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rundung-panel); box-shadow: var(--hebung-3); z-index: var(--ebene-menue); overflow: hidden; }
.ich-feld { width: min(280px, calc(100vw - 2 * var(--r-4))); }
.klapp-kopf { display: flex; align-items: center; gap: var(--r-2); padding: var(--r-3) var(--r-4); border-bottom: 1px solid var(--linie-zart); }
.klapp-kopf h2 { margin: 0; font: var(--fett) var(--groesse-2)/var(--zeile-eng) var(--schrift); }
.ich-kopf { gap: var(--r-3); }
.klapp-liste { list-style: none; margin: 0; padding: var(--r-2); max-height: 60vh; overflow-y: auto; }
.klapp-punkt { display: flex; align-items: center; gap: var(--r-3); width: 100%; padding: var(--r-2) var(--r-3); min-height: var(--treffer-min); border-radius: var(--rundung-mittel); color: var(--tinte); text-decoration: none; font-size: var(--groesse-2); text-align: left; }
a.klapp-punkt:hover, button.klapp-punkt:hover { background: var(--flaeche-leise); }
.klapp-punkt > .ic { color: var(--tinte-leise); }
/* Glocke: je Hinweis ein Haken "Gelesen" rechts, oben "Alle gelesen" (09.10.2026) */
.glocke-punkt { display: flex; align-items: center; gap: var(--r-1); }
.glocke-punkt > .klapp-punkt { flex: 1; min-width: 0; }
.glocke-gelesen { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--treffer-min); height: var(--treffer-min); border: 1px solid var(--linie); border-radius: var(--rundung-mittel); background: var(--flaeche); color: var(--tinte); cursor: pointer; }
.glocke-gelesen:hover { background: var(--flaeche-leise); color: var(--tinte); }
.klapp-kopf .glocke-alle { margin-left: auto; }
.klapp-text { display: flex; flex-direction: column; min-width: 0; }
.klapp-text small { color: var(--tinte-leise); font-size: var(--groesse-1); }
.klapp-trenner { border-top: 1px solid var(--linie-zart); margin-top: var(--r-1); padding-top: var(--r-1); }
.klapp-leer { display: flex; align-items: center; gap: var(--r-2); margin: 0; padding: var(--r-4); color: var(--tinte-leise); font-size: var(--groesse-2); }
.klapp-leer .ic { color: var(--ok); }

/* ── Runder Knopf und Tab-Leiste (nur Handy) ───────────────────────── */
.neu-rund, .tab-leiste { display: none; }

@media (max-width: 767px) {
  .app, .app.leiste-schmal { grid-template-columns: minmax(0, 1fr); }
  /* Am Handy reicht die weisse Kopfzeile bis unter die Statusleiste; der Streifen (body::before) liegt darueber. */
  .app { padding-top: 0; }
  .kopf { height: calc(var(--hoehe-kopf-handy) + var(--sicher-oben)); padding: var(--sicher-oben) var(--r-2) 0 var(--r-3); background: var(--flaeche); border-bottom: 1px solid var(--linie); gap: var(--r-2); }
  .marke { display: inline-flex; margin-right: auto; min-height: var(--treffer-min); }
  .kopf-suche, .kopf-neu { display: none; }
  .kopf-rund, .kopf-ich { width: var(--treffer-min); height: var(--treffer-min); }
  .kopf-rund { border: 0; background: none; }
  .kopf-ich.gross { width: 40px; height: 40px; }
  /* Die Leiste als Schublade von unten (Tab "Bereiche") */
  .leiste { position: fixed; left: 0; right: 0; bottom: 0; top: auto; margin: 0; max-height: var(--schublade-hoehe); border-radius: var(--rundung-leiste) var(--rundung-leiste) 0 0; z-index: var(--ebene-banner); box-shadow: var(--hebung-3); padding-bottom: env(safe-area-inset-bottom); }
  .app.leiste-weg .leiste { transform: translateY(100%); visibility: hidden; }
  .app:not(.leiste-weg) .leiste-schatten { display: block; position: fixed; inset: 0; background: var(--schleier); z-index: calc(var(--ebene-banner) - 1); }
  .leiste-kopf { padding: var(--r-2) var(--r-2) 0 var(--r-4); }
  .leiste-marke, .leiste .nur-gross { display: none; }
  .leiste-griff { display: block; position: absolute; left: 50%; top: var(--r-2); width: 40px; height: 4px; margin-left: -20px; border-radius: var(--rundung-pille); background: var(--leiste-zahl); }
  .leiste-kopf::before { content: "Bereiche"; font: var(--fett) var(--groesse-3)/var(--zeile-eng) var(--schrift); color: var(--leiste-text-an); padding-top: var(--r-3); }
  .leiste-baum .leiste-abschnitt { display: none; }
  .leiste-fuss { padding-bottom: var(--r-3); }
  .leiste-wellen { display: none; }
  .leiste-zu { width: var(--treffer-min); height: var(--treffer-min); }
  /* Platz unter dem Inhalt: Tab-Leiste plus runder Knopf plus Luft, damit der Knopf nie Text verdeckt (17.10.2026) */
  .blatt { padding-bottom: calc(var(--hoehe-tab-leiste) + env(safe-area-inset-bottom) + var(--rund-knopf) + var(--r-6)); }
  /* Was den Fokus bekommt, scrollt ueber die Tab-Leiste und den runden Knopf (WCAG 2.4.11) */
  html, .blatt { scroll-padding-bottom: calc(var(--hoehe-tab-leiste) + env(safe-area-inset-bottom) + var(--rund-knopf) + var(--r-4)); }
  .tab-leiste { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--hoehe-tab-leiste) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--flaeche); border-top: 1px solid var(--linie); z-index: var(--ebene-leiste); }
  .tab-leiste .tab { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: var(--groesse-0); color: var(--tinte-leise); text-decoration: none; min-height: var(--treffer-min); min-width: 0; border-radius: 0; }
  .tab-leiste .tab > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 var(--r-1); }
  .tab-leiste .tab.aktiv { color: var(--petrol); font-weight: var(--fett); }
  .tab-symbol { position: relative; display: inline-flex; }
  .tab-zahl { position: absolute; top: -4px; right: -10px; min-width: 16px; padding: 0 var(--r-1); border-radius: var(--rundung-pille); background: var(--tonerde-dunkel); color: var(--weiss); font-size: var(--groesse-0); font-weight: var(--fett); line-height: 1.5; text-align: center; }
  .neu-rund { display: inline-flex; position: fixed; right: var(--r-4); bottom: calc(var(--hoehe-tab-leiste) + env(safe-area-inset-bottom) + var(--r-4)); width: var(--rund-knopf); height: var(--rund-knopf); border-radius: 50%; align-items: center; justify-content: center; background: var(--petrol); color: var(--creme); box-shadow: var(--hebung-3); z-index: var(--ebene-leiste); }
  .neu-rund[hidden] { display: none; }
  .meldung { bottom: calc(var(--hoehe-tab-leiste) + env(safe-area-inset-bottom) + var(--rund-knopf) + var(--r-5)); }
  /* Trefferflaechen: jede Bedienflaeche mindestens 44 px */
  .leiste-klapp { width: var(--treffer-min); height: var(--treffer-min); }
  .leiste-link, .leiste-fuss .leiste-link, .marke, .tab-leiste .tab, .meldung button, .krume a, .klapp-punkt { min-height: var(--treffer-min); }
  .kopf-knopf-rund { width: var(--treffer-min); height: var(--treffer-min); }
  .krume > a:nth-last-child(3) { display: inline-flex; align-items: center; }
}

/* ── Feinschliff Huelle (Gesamtdurchsicht 17.10.2026) ─────────────────────
   Ruhige Rollbalken, die Tab-Leiste am Handy zeigt den aktiven Punkt als Pille, die Meldung gleitet weich herein. */
.blatt, .leiste-baum, .seitenfeld-koerper { scrollbar-width: thin; scrollbar-color: var(--linie-stark) transparent; }
.leiste-baum { scrollbar-color: var(--leiste-zahl) transparent; }
.meldung { transition: opacity var(--dauer-mittel) var(--kurve-weich), transform var(--dauer-mittel) var(--kurve-weich); }
@media (max-width: 767px) {
  .tab-leiste { box-shadow: 0 -8px 24px var(--linie-zart); }
  .tab-leiste .tab .tab-symbol { padding: 2px var(--r-3); border-radius: var(--rundung-pille); transition: background var(--dauer-mittel) var(--kurve-weich); }
  .tab-leiste .tab.aktiv .tab-symbol { background: var(--nebel); }
  .neu-rund { background-image: linear-gradient(160deg, var(--petrol-hell), var(--petrol) 60%); transition: transform var(--dauer-kurz); }
  .neu-rund:active { transform: scale(.94); }
}
.nach-oben { position: fixed; right: var(--r-5); bottom: var(--r-5); z-index: var(--ebene-leiste); width: var(--treffer-min); height: var(--treffer-min); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--flaeche); color: var(--petrol); border: 1px solid var(--linie-stark); box-shadow: var(--hebung-2); animation: rein var(--dauer-mittel) var(--kurve-weich); }
.nach-oben:hover { background: var(--flaeche-leise); }
@media (max-width: 767px) { .nach-oben { right: var(--r-4); bottom: calc(var(--hoehe-tab-leiste) + env(safe-area-inset-bottom) + var(--rund-knopf) + var(--r-6)); } }