/* ==========================================================================
   Taralumi Studio OS (Demo): freigegebene CI «Löwenzahn» (Studio_CI_Playbook 1.3, Freigabe Martin Bitzer 04.10.2026).
   Keine eigenmächtige Neugestaltung: Marke, Rollen, Layout und Namen folgen dem Playbook und der Masszeichnung (224/64/32/360/24/12).

   FARBEN. Marke (unverändert in beiden Themes): --c-forest-green #24583F, --c-leaf-green #4C7A45, --c-dandelion-yellow #F2C744,
   --c-mist-gray #E8EBE5, --c-white #FFFFFF, --c-ink #18231C (Namen des Brandkits); Kurznamen als Alias: --c-wald, --c-blatt, --c-gelb, --c-nebel, --c-weiss, --c-tinte.
   Rollen: --bg, --surface, --nav, --text, --text-2, --selected, --selected-text, --subtle, --rand, --fokus (Werte laut Playbook §8).
   Light = :root. Dark = Systemeinstellung (Medienabfrage für dunkel, ausser bei data-theme light) UND manuell per Attribut data-theme dunkel;
   das Attribut data-theme (light oder dark) hat Vorrang vor der Systemeinstellung. Der Themenschalter (System/Hell/Dunkel) setzt nur data-theme.
   Die älteren Namen (--flaeche, --karte, --akzent, --z-*, …) bleiben als abgeleitete Rollen erhalten, weil Ansichten sie nutzen.
   Zwei funktionale Neutralfarben (nicht Teil der Markenfarben, nur Kontrastzweck): --platzhalter (Platzhaltertext, aus Text-/Flächenfarbe abgeleitet: #566459 hell, #D5DDD7 dunkel) und --fehler-text (Formularfehler: #8C1B1B hell, #FFD6D1 dunkel, je >= 4.5:1 auf Seite und Karte).
   Text-Paare >= 4.5:1, Rahmen/Fokus >= 3:1; die Rechnung steht in tests/test_w1_shell.py. Gelbe Flächen tragen immer dunkle Schrift;
   gelber Text steht nie auf Weiss. Markengrün heisst nie «bestanden»: Zustände tragen FORM + WORT + FARBE.

   SCHRIFT. Titel und Überschriften (h1, h2, .titel-serif): elegante, leicht kursive Serif aus Systemschriften (--schrift-serif).
   Fliesstext, Navigation, Tabellen, Formulare (.fliesstext-sans, body): ruhige humanistische Sans aus Systemschriften (--schrift-sans).
   Lizenzierte Schrift noch offen: bis Martin reale Schriftdateien freigibt, wird keine Schriftdatei eingebettet (keine Schriftdeklaration, keine externen Fonts).

   KOMPONENTEN (Klassen)
   Rahmen      .huelle (Raster: Leiste | Seite) · .leiste (+ __logo, __wortmarke, __liste, __link, __symbol, __name, __marken, __grund, __fuss, [aria-current])
               .seite · .kopf · .kopfzeile · .demo-banner (+ __lang, __kurz, __mehr) · .demo-marke · .inhalt · .arbeitsraum (+ __kopf) · .titel-punkt · .kopf__avatar
               .ideenleiste (+ __symbol, __feld, __knopf) · .skip-link · .nur-lesegeraet
   Titel       .titel-serif (Seitentitel) · .titel-untertitel · .fliesstext-sans
   Zustand     <span class="zustand zustand--ruhig|beobachten|handeln|ohne_daten|gesperrt">
                 <span class="zustand__form" aria-hidden="true"></span><span class="zustand__wort">Wort</span></span>
               Form (Kreis, Dreieck, Raute, Ring, geteiltes Quadrat) + Wort + Farbe; «gesperrt» ist ein eigener Zugriffsstatus
               und wird NEBEN dem Zustand gezeigt, nie anstelle davon.
   Knöpfe      .knopf mit .knopf--primaer | .knopf--sekundaer | .knopf--ruhig (Text); auch auf <a> verwendbar
               .schaltflaeche (umrandet) mit .schaltflaeche--primaer (gelb gefüllt, dunkle Schrift) | .schaltflaeche--klein (kompakt, mind. 32 px)
   Listen      .liste (ohne Aufzählungspunkte, Abstand zwischen Einträgen)
   Kopf        .kopf__einstellungen (<details>: Scope, Sprache, Demo-Person, Themenschalter .themeschalter; breit als Auswahlfenster)
   Felder      .feld (input, select, textarea) in .feldgruppe mit <label class="feld__label"> und .feld__hilfe / .feld__fehler
   Karten      .karte (+ __titel)
   Tabellen    .tabelle (+ .tabelle--stapel: auf schmalen Breiten je Zeile gestapelt, td[data-label] liefert die Spaltenbeschriftung)
   Meldungen   .meldung .meldung--fehler | .meldung--leer | .meldung--hinweis mit <strong class="meldung__art"> (Wort) und Text
   Dialog      <dialog class="dialog"> mit .dialog__kopf, .dialog__inhalt, .dialog__fuss
   Suche       .suche (+ __liste, __gruppe, __option, __wirkung)

   LAYOUT (Studio_OS_Layout_Masse.md, CSS Grid). Ab 1280 px: Leiste 224, Kopfzeile 64, Innenabstand 32, Spaltenabstand 32 (Detailspalte 360 nur noch im Cockpit),
   Karten Padding 24, Radius 12, 8-px-Raster. 768 bis 1279 px: kompakte Leiste 72 (nur Symbole mit Namen), Karten unter dem Hauptbereich.
   Unter 768 px: Leiste als Drawer, eine Spalte, Innenabstand 16.
   ========================================================================== */

:root {
  --c-forest-green: #24583F;
  --c-leaf-green: #4C7A45;
  --c-dandelion-yellow: #F2C744;
  --c-mist-gray: #E8EBE5;
  --c-white: #FFFFFF;
  --c-ink: #18231C;
  --c-wald: var(--c-forest-green);
  --c-blatt: var(--c-leaf-green);
  --c-gelb: var(--c-dandelion-yellow);
  --c-nebel: var(--c-mist-gray);
  --c-weiss: var(--c-white);
  --c-tinte: var(--c-ink);
  --nav-text: #FFFFFF;
  --nav-hover: #4C7A45;
  --fokus-nav: #F2C744;
  --nav-breite: 224px;
  --nav-kompakt: 72px;
  --kopf-hoehe: 64px;
  --innen: 32px;
  --spalte: 32px;
  --details-breite: 360px;
  --karte-pad: 24px;
  --karte-abstand: 24px;
  --radius: 12px;
  --radius-klein: 8px;
  --ideen-hoehe: 56px;
  --ideen-abstand: 24px;
  --schrift-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --schrift-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

:root {
  color-scheme: light;
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --nav: #24583F;
  --text: #18231C;
  --text-2: #24583F;
  --selected: #F2C744;
  --selected-text: #18231C;
  --subtle: #E8EBE5;
  --rand: #4C7A45;
  --fokus: #24583F;
  --flaeche: #FFFFFF;
  --karte: #FFFFFF;
  --text-gedaempt: #24583F;
  --rand-leise: #E8EBE5;
  --akzent: #24583F;
  --akzent-hover: #18231C;
  --knopf-text: #18231C;
  --auswahl: #E8EBE5;
  --banner-flaeche: #E8EBE5;
  --info-text: #18231C;
  --platzhalter: #566459;
  --info-flaeche: #E8EBE5;
  --z-ruhig-text: #24583F;
  --z-ruhig-flaeche: #E8EBE5;
  --z-beobachten-text: #18231C;
  --z-beobachten-flaeche: #F2C744;
  --z-handeln-text: #8C1B1B;
  --fehler-text: #8C1B1B;
  --z-handeln-flaeche: #FBE1DE;
  --z-ohne_daten-text: #18231C;
  --z-ohne_daten-flaeche: #FFFFFF;
  --z-gesperrt-text: #FFFFFF;
  --z-gesperrt-flaeche: #18231C;
  --schatten: 0 2px 8px rgba(24, 35, 28, 0.14);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #18231C;
    --surface: #24583F;
    --nav: #24583F;
    --text: #FFFFFF;
    --text-2: #E8EBE5;
    --selected: #F2C744;
    --selected-text: #18231C;
    --subtle: #24583F;
    --rand: #E8EBE5;
    --fokus: #F2C744;
    --flaeche: #18231C;
    --karte: #24583F;
    --text-gedaempt: #E8EBE5;
    --rand-leise: #4C7A45;
    --akzent: #F2C744;
    --akzent-hover: #FFFFFF;
    --knopf-text: #18231C;
    --auswahl: #4C7A45;
    --banner-flaeche: #24583F;
    --info-text: #E8EBE5;
    --platzhalter: #D5DDD7;
    --info-flaeche: #18231C;
    --z-ruhig-text: #24583F;
    --z-ruhig-flaeche: #E8EBE5;
    --z-beobachten-text: #18231C;
    --z-beobachten-flaeche: #F2C744;
    --z-handeln-text: #8C1B1B;
    --fehler-text: #FFD6D1;
    --z-handeln-flaeche: #FBE1DE;
    --z-ohne_daten-text: #E8EBE5;
    --z-ohne_daten-flaeche: #18231C;
    --z-gesperrt-text: #18231C;
    --z-gesperrt-flaeche: #FFFFFF;
    --schatten: 0 2px 8px rgba(0, 0, 0, 0.6);
  }
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --nav: #24583F;
  --text: #18231C;
  --text-2: #24583F;
  --selected: #F2C744;
  --selected-text: #18231C;
  --subtle: #E8EBE5;
  --rand: #4C7A45;
  --fokus: #24583F;
  --flaeche: #FFFFFF;
  --karte: #FFFFFF;
  --text-gedaempt: #24583F;
  --rand-leise: #E8EBE5;
  --akzent: #24583F;
  --akzent-hover: #18231C;
  --knopf-text: #18231C;
  --auswahl: #E8EBE5;
  --banner-flaeche: #E8EBE5;
  --info-text: #18231C;
  --platzhalter: #566459;
  --info-flaeche: #E8EBE5;
  --z-ruhig-text: #24583F;
  --z-ruhig-flaeche: #E8EBE5;
  --z-beobachten-text: #18231C;
  --z-beobachten-flaeche: #F2C744;
  --z-handeln-text: #8C1B1B;
  --fehler-text: #8C1B1B;
  --z-handeln-flaeche: #FBE1DE;
  --z-ohne_daten-text: #18231C;
  --z-ohne_daten-flaeche: #FFFFFF;
  --z-gesperrt-text: #FFFFFF;
  --z-gesperrt-flaeche: #18231C;
  --schatten: 0 2px 8px rgba(24, 35, 28, 0.14);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #18231C;
  --surface: #24583F;
  --nav: #24583F;
  --text: #FFFFFF;
  --text-2: #E8EBE5;
  --selected: #F2C744;
  --selected-text: #18231C;
  --subtle: #24583F;
  --rand: #E8EBE5;
  --fokus: #F2C744;
  --flaeche: #18231C;
  --karte: #24583F;
  --text-gedaempt: #E8EBE5;
  --rand-leise: #4C7A45;
  --akzent: #F2C744;
  --akzent-hover: #FFFFFF;
  --knopf-text: #18231C;
  --auswahl: #4C7A45;
  --banner-flaeche: #24583F;
  --info-text: #E8EBE5;
  --platzhalter: #D5DDD7;
  --info-flaeche: #18231C;
  --z-ruhig-text: #24583F;
  --z-ruhig-flaeche: #E8EBE5;
  --z-beobachten-text: #18231C;
  --z-beobachten-flaeche: #F2C744;
  --z-handeln-text: #8C1B1B;
  --fehler-text: #FFD6D1;
  --z-handeln-flaeche: #FBE1DE;
  --z-ohne_daten-text: #E8EBE5;
  --z-ohne_daten-flaeche: #18231C;
  --z-gesperrt-text: #18231C;
  --z-gesperrt-flaeche: #FFFFFF;
  --schatten: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* ---- Grundlagen ---- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 1rem/1.5 var(--schrift-sans);
  background: var(--bg);
  color: var(--text);
  overflow-wrap: anywhere;
}
h1, h2, h3 { line-height: 1.25; margin: 0 0 0.5rem; }
/* Überschriften h1/h2 und Seitentitel: leicht kursive Serif (Systemschriften, lizenzierte Schrift noch offen); h3 und alles Übrige: Sans */
h1, h2, .titel-serif { font-family: var(--schrift-serif); font-style: italic; font-weight: 500; letter-spacing: -0.01em; }
.fliesstext-sans { font-family: var(--schrift-sans); font-style: normal; }
/* Typografische Skala (rem): Seitentitel 2.25 > Abschnitt 1.4 > Unterabschnitt 1.125 > Fliesstext 1 */
h1 { font-size: 2.25rem; line-height: 1.15; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.125rem; }
p { margin: 0 0 0.75rem; }
a { color: var(--akzent); text-underline-offset: 0.15em; }
a:hover { color: var(--akzent-hover); }
img, table, svg { max-width: 100%; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

.nur-lesegeraet {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.symbolblatt { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link {
  position: absolute; left: 0.5rem; top: 0; z-index: 100; padding: 0.5rem 1rem;
  background: var(--selected); color: var(--selected-text); font-weight: 700; border-radius: 0 0 var(--radius-klein) var(--radius-klein);
  transform: translateY(-120%);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ---- Rahmen: schmal = eine Spalte mit Drawer, mittel = kompakte Leiste, breit = Leiste 224 + Inhalt (keine rechte Spalte; das Cockpit baut seine zwei Spalten selbst) ---- */
.huelle { display: grid; min-height: 100vh; grid-template-columns: minmax(0, 1fr); grid-template-areas: "seite"; }
.seite { grid-area: seite; display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }
.kopf { background: var(--bg); border-bottom: 1px solid var(--rand-leise); }
.inhalt { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; padding: 0 16px; }
.arbeitsraum { min-width: 0; max-width: 1200px; padding: 16px 0; }
.leiste {
  display: flex; flex-direction: column; background: var(--nav); color: var(--nav-text);
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 70; width: min(18rem, 85vw); overflow: hidden;
}
body:not(.nav-offen) .leiste { display: none; }
body.nav-offen::after { content: ""; position: fixed; inset: 0; z-index: 60; background: rgba(24, 35, 28, 0.6); }
.leiste { z-index: 70; }
.nav-knopf { display: inline-flex; }

@media (min-width: 768px) {
  .huelle { grid-template-columns: var(--nav-kompakt) minmax(0, 1fr); grid-template-areas: "leiste seite"; }
  .leiste, body:not(.nav-offen) .leiste { display: flex; grid-area: leiste; position: sticky; top: 0; height: 100vh; width: auto; align-self: start; z-index: 30; }
  body.nav-offen::after { display: none; }
  .nav-knopf, .kopfzeile .nav-knopf { display: none; }
  .kopf { border-bottom: 0; }
  .inhalt { padding: 0 24px; }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .huelle { grid-template-columns: var(--nav-kompakt) minmax(0, 1fr); }
  .leiste__wortmarke, .leiste__name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .leiste__logo { padding: 16px 0 8px; }
  .leiste__logo img { width: 40px; height: 40px; }
  .leiste__link { position: relative; justify-content: center; padding: 0; }
  .leiste__marken { position: absolute; right: 4px; bottom: 4px; margin: 0; }
  .leiste__liste, .leiste__fuss { padding-left: 8px; padding-right: 8px; }
}

@media (min-width: 1280px) {
  .huelle { grid-template-columns: var(--nav-breite) minmax(0, 1fr); }
  .inhalt { padding: 0 var(--innen); }
  .arbeitsraum { padding-top: 24px; }
  .ideenleiste { margin-left: var(--innen); margin-right: var(--innen); }
}

@media (max-width: 767px) {
  h1 { font-size: 1.75rem; }
  /* Kopf einzeilig: Menüknopf, Marke, DEMO-Pille und Avatar; die Befehlsuche steht als eigene Zeile darunter */
  .kopfzeile { flex-wrap: wrap; min-height: 0; padding: 4px 16px 8px; gap: 4px 12px; }
  .kopfzeile .suche { flex: 1 1 100%; max-width: none; order: 3; }
  .kopfzeile__rechts { flex: 0 0 auto; margin-left: auto; }
  .kopf__marke { display: inline; }
  .arbeitsraum { padding-top: 8px; }
}

/* ---- Seitenleiste ---- */
.leiste__logo { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 16px 12px; color: var(--nav-text); text-decoration: none; }
.leiste__logo img { display: block; width: 120px; height: auto; aspect-ratio: 1; object-fit: contain; }
/* Kein hartes Quadrat: der grüne Bildgrund läuft über eine runde Maske in das Waldgrün der Leiste aus. */
.leiste__logo img { -webkit-mask-image: radial-gradient(circle at 50% 50%, black 56%, transparent 72%); mask-image: radial-gradient(circle at 50% 50%, black 56%, transparent 72%); }
.leiste__wortmarke { font-family: var(--schrift-serif); font-style: normal; font-size: 1.625rem; line-height: 1.2; text-align: center; }
.leiste__liste, .leiste__fuss { list-style: none; margin: 0; padding: 8px 12px; display: grid; gap: 4px; }
.leiste__liste { flex: 1 1 auto; overflow-y: auto; align-content: start; }
.leiste__fuss { border-top: 1px solid var(--c-blatt); padding-bottom: 16px; }
.leiste__link {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 12px; border-radius: var(--radius-klein);
  color: var(--nav-text); text-decoration: none; position: relative;
}
.leiste__link:hover { background: var(--nav-hover); color: var(--nav-text); }
.leiste__link[aria-current="page"] { background: var(--selected); color: var(--selected-text); font-weight: 700; }
.leiste :focus-visible { outline-color: var(--fokus-nav); }
.leiste__link[aria-current="page"]:focus-visible { outline-color: var(--c-white); }
.leiste__symbol { flex: none; width: 24px; height: 24px; }
.leiste__name { min-width: 0; }
.leiste__marken { display: flex; align-items: center; margin-left: auto; }
/* Leise Marke: nur ein kleiner Punkt (Form trägt die Information, keine Kachel) für «handeln» (Raute) und «beobachten» (Dreieck) */
.leiste__punkt { display: block; width: 12px; height: 12px; }
.leiste__punkt--handeln { background: var(--z-handeln-flaeche); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.leiste__punkt--beobachten { background: var(--z-beobachten-flaeche); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.leiste__link[aria-current="page"] .leiste__punkt--handeln { background: var(--z-handeln-text); }
.leiste__link[aria-current="page"] .leiste__punkt--beobachten { background: var(--selected-text); }
.leiste__fuss .leiste__link { min-height: 40px; font-size: 0.9375rem; }
.legende { margin-top: 1rem; font-size: 0.875rem; }
.legende summary { cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; }
.legende dl { margin: 0; display: grid; gap: 0.5rem; }
.legende dd { margin: 0.2rem 0 0; color: var(--text-2); }

/* ---- Kopf, Demo-Banner, Kennzeichnung ---- */
.demo-banner { padding: 4px 16px; background: var(--banner-flaeche); color: var(--text); font-size: 0.875rem; font-weight: 600; border-bottom: 1px solid var(--rand); }
.demo-banner__lang { display: none; }
.demo-banner__mehr { display: inline-block; margin-left: 0.5rem; }
.demo-banner__mehr summary { cursor: pointer; display: inline-block; min-height: 24px; text-decoration: underline; }
.demo-banner__mehr p { margin: 4px 0 0; font-weight: 400; }
@media (min-width: 768px) {
  .demo-banner { padding: 4px 24px; }
  .demo-banner__lang { display: inline; }
  .demo-banner__kurz, .demo-banner__mehr { display: none; }
}
@media (min-width: 1280px) {
  .demo-banner { padding: 4px var(--innen); }
}
.demo-marke {
  display: inline-block; flex: none; white-space: nowrap; padding: 2px 12px; border-radius: 999px; background: var(--selected); color: var(--selected-text);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle;
}
.kopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 16px; min-height: var(--kopf-hoehe); }
.kopfzeile .feldgruppe { margin: 0; }
.kopfzeile__rechts { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.kopf__marke { display: none; font-family: var(--schrift-serif); font-size: 1.25rem; line-height: 1.2; color: var(--text); }
@media (min-width: 768px) { .kopfzeile { flex-wrap: nowrap; height: var(--kopf-hoehe); padding: 0 24px; } }
@media (min-width: 1280px) { .kopfzeile { padding: 0 var(--innen); } }

/* Einstellungen (Scope, Sprache, Demo-Person, Darstellung): ein <details>; breit als Auswahlfenster, schmal im Fluss */
.kopf__einstellungen { position: relative; }
/* Runder Personen-Knopf (Avatar) wie im Entwurf; der Name steht als Text für Bildschirmleser darin */
.kopf__einstellungen__zusammenfassung {
  display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; min-height: 2.75rem; padding: 0; cursor: pointer; list-style: none;
  border: 1px solid var(--rand); border-radius: 50%; background: var(--subtle); color: var(--text-2);
}
.kopf__einstellungen__zusammenfassung::-webkit-details-marker { display: none; }
.kopf__einstellungen__zusammenfassung:hover { border-color: var(--akzent-hover); }
.kopf__einstellungen[open] .kopf__einstellungen__zusammenfassung { background: var(--selected); color: var(--selected-text); border-color: var(--selected-text); }
.kopf__avatar { width: 24px; height: 24px; }
.kopf__einstellungen__felder {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 80; display: flex; flex-direction: column; gap: 12px; width: 24rem; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 96px); overflow-y: auto; padding: var(--karte-pad); background: var(--surface); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schatten);
}
.kopf__einstellungen__felder .feldgruppe { flex: 1 1 auto; }
.kopf__einstellungen__person { margin: 0; font-weight: 600; }

/* Themenschalter System / Hell / Dunkel: Radiogruppe, ohne Wechsel der Prüfzustände */
.themeschalter { border: 0; margin: 0; padding: 0; min-width: 0; }
.themeschalter legend { padding: 0; font-size: 0.875rem; font-weight: 600; margin-bottom: 4px; }
.themeschalter__optionen { display: flex; gap: 8px; }
.themeschalter__option { flex: 1 1 auto; position: relative; display: block; }
.themeschalter__option input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.themeschalter__option span { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 2.5rem; padding: 4px 8px; font-weight: 600; white-space: nowrap; background: var(--surface); color: var(--text); border: 2px solid var(--rand); border-radius: var(--radius-klein); }
/* Gewählter Zustand: gelbe Fläche, dunkle Schrift UND Haken (Form, nicht nur Farbe); gilt ebenso für Knöpfe mit aria-pressed */
.themeschalter__option input:checked + span { background: var(--selected); color: var(--selected-text); border-color: var(--selected-text); }
.themeschalter__option input:checked + span::before { content: ""; flex: none; width: 1rem; height: 1rem; background: currentColor; -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0ibTUgMTIuNSA0LjUgNC41TDE5IDciIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=) center / contain no-repeat; mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0ibTUgMTIuNSA0LjUgNC41TDE5IDciIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=) center / contain no-repeat; }
[aria-pressed="true"] { background: var(--selected); color: var(--selected-text); border-color: var(--selected-text); }
[aria-pressed="true"]::before { content: ""; display: inline-block; flex: none; width: 1rem; height: 1rem; margin-right: 4px; vertical-align: -0.15em; background: currentColor; -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0ibTUgMTIuNSA0LjUgNC41TDE5IDciIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=) center / contain no-repeat; mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0ibTUgMTIuNSA0LjUgNC41TDE5IDciIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=) center / contain no-repeat; }
.themeschalter__option input:focus-visible + span { outline: 3px solid var(--fokus); outline-offset: -3px; }

/* Konto im Avatar-Menü (nur Betrieb): Name, Rollen, Passwort ändern, Abmelden */
.konto { display: flex; flex-direction: column; gap: 8px; }
.konto > p { margin: 0; }
.konto__name { font-weight: 700; }
.konto__rollen { color: var(--text-2); font-size: 0.9375rem; }
.konto__hinweis { margin: 0; }
.konto__befehl { display: block; overflow-wrap: anywhere; user-select: all; font-size: 0.875rem; }
.konto__aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.konto__formular { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid var(--rand-leise); }
.konto__formular .feldgruppe { margin: 0 0 8px; }
.konto__formular p { margin: 0 0 4px; }

/* ---- Anmeldeseite (login.html): zentrierte Karte auf ruhigem Grund; hell: Nebelgrau, dunkel: Seitenhintergrund ---- */
.anmeldung-seite { min-height: 100vh; padding: 16px; background: var(--subtle); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .anmeldung-seite { background: var(--bg); } }
html[data-theme="dark"] .anmeldung-seite { background: var(--bg); }
.anmeldung { max-width: 26rem; margin: 10vh auto 0; padding: 40px 32px 32px; box-shadow: var(--schatten); }
.anmeldung-seite { position: relative; overflow-x: hidden; }
/* Markenbild (grosse Blume) links neben der Karte; dekorativ. Hell: Bildgrund multipliziert auf Nebelgrau, alle Ränder laufen oval aus (rechts ist die Pusteblume angeschnitten). Dunkel: als gerahmtes Bild auf hellem Grund. */
.anmeldung__marke { display: none; }
@media (min-width: 56rem) {
  .anmeldung__marke {
    display: block; position: absolute; top: calc(10vh + 1rem); left: calc(50% - 13rem - 1.5rem - 14.7rem); width: 14.7rem; height: auto; pointer-events: none;
    mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(ellipse 56% 54% at 46% 52%, black 64%, transparent 100%); mask-image: radial-gradient(ellipse 56% 54% at 46% 52%, black 64%, transparent 100%);
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .anmeldung__marke { mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none; border-radius: var(--radius); box-shadow: var(--schatten); }
}
html[data-theme="dark"] .anmeldung__marke { mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none; border-radius: var(--radius); box-shadow: var(--schatten); }
.anmeldung__logo { display: block; width: 96px; height: 96px; margin: 0 auto 16px; }
/* .karte steht weiter unten und setzt margin/padding: die Anmeldekarte braucht die höhere Spezifität */
.karte.anmeldung { margin: 10vh auto 0; padding: 40px 32px 32px; }
.anmeldung h1 { font-family: var(--schrift-serif); font-size: 2rem; text-align: center; margin: 0 0 8px; }
.anmeldung h1::after { content: ""; display: inline-block; width: 0.16em; height: 0.16em; margin-left: 0.06em; border-radius: 50%; background: var(--c-gelb); }
.anmeldung .feld__hilfe { margin: 0 0 24px; font-size: 0.9375rem; text-align: center; }
.anmeldung form { text-align: left; }
.anmeldung #login-fehler:not(:empty) { margin: 0 0 16px; }
.anmeldung .meldung { margin: 0; }
.anmeldung .schaltflaeche { width: 100%; margin-top: 8px; }
@media (max-width: 480px) {
  .anmeldung-seite { padding: 12px; }
  .anmeldung { margin-top: 4vh; padding: 28px 20px 24px; }
  .karte.anmeldung { margin-top: 4vh; padding: 28px 20px 24px; }
  .anmeldung h1 { font-size: 1.75rem; }
}

/* ---- Titelblock ---- */
.arbeitsraum__kopf { min-height: 64px; margin-bottom: var(--karte-abstand); }
.arbeitsraum__kopf h1 { margin: 0; }
.titel-untertitel { margin: 4px 0 0; color: var(--text-2); font-size: 1.0625rem; }
/* Übersicht: grosser Serif-Titel und Untertitel mit gelbem Punkt; der Punkt ist reine Form (kein Textzeichen) */
.titel-punkt { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.05; }
.titel-punkt::after { content: ""; display: inline-block; width: 0.16em; height: 0.16em; margin-left: 0.06em; border-radius: 50%; background: var(--c-gelb); }
.titel-untertitel--punkt { font-size: 1.375rem; }
.titel-untertitel--punkt::after { content: ""; display: inline-block; width: 0.2em; height: 0.2em; margin-left: 0.06em; vertical-align: baseline; border-radius: 50%; background: var(--c-gelb); }

/* ---- Zustände: Form + Wort + Farbe (Graustufen- und Bildschirmleser-tauglich) ---- */
.zustand {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.1rem 0.5rem; border-radius: 0.25rem;
  font-size: 0.8125rem; font-weight: 600; line-height: 1.4; border: 1px solid currentColor;
  white-space: normal; overflow-wrap: anywhere; max-width: 100%; /* bricht um, auch wenn es auf einem Blockelement (div/p) liegt */
}
.zustand__wort { min-width: 0; }
.zustand__form { display: inline-block; flex: none; width: 0.8rem; height: 0.8rem; background: currentColor; }
.zustand--ruhig { color: var(--z-ruhig-text); background: var(--z-ruhig-flaeche); }
.zustand--ruhig .zustand__form { border-radius: 50%; }
.zustand--beobachten { color: var(--z-beobachten-text); background: var(--z-beobachten-flaeche); }
.zustand--beobachten .zustand__form { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.zustand--handeln { color: var(--z-handeln-text); background: var(--z-handeln-flaeche); }
.zustand--handeln .zustand__form { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.zustand--ohne_daten { color: var(--z-ohne_daten-text); background: var(--z-ohne_daten-flaeche); border-style: dashed; }
.zustand--ohne_daten .zustand__form { background: transparent; border: 2px solid currentColor; border-radius: 50%; }
.zustand--gesperrt { color: var(--z-gesperrt-text); background: var(--z-gesperrt-flaeche); }
.zustand--gesperrt .zustand__form { border-radius: 0.1rem; background: linear-gradient(currentColor 0 30%, transparent 30% 55%, currentColor 55% 100%); }

/* Prüf-Gates (Ansicht «Prüfung») nutzen dieselben Formen, Farben und Kontraste wie die vier Zustände:
   pass = ruhig (Kreis), uncertain = beobachten (Dreieck), fail und expired = handeln (Raute), pending und na = ohne Daten (Ring),
   unbekannt = ohne Daten. Das Wort steht immer im Text; Farbe allein trägt nie die Information. */
.zustand--pass { color: var(--z-ruhig-text); background: var(--z-ruhig-flaeche); }
.zustand--pass .zustand__form { border-radius: 50%; }
.zustand--uncertain { color: var(--z-beobachten-text); background: var(--z-beobachten-flaeche); }
.zustand--uncertain .zustand__form { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.zustand--fail, .zustand--expired { color: var(--z-handeln-text); background: var(--z-handeln-flaeche); }
.zustand--fail .zustand__form, .zustand--expired .zustand__form { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.zustand--pending, .zustand--na, .zustand--unbekannt { color: var(--z-ohne_daten-text); background: var(--z-ohne_daten-flaeche); border-style: dashed; }
.zustand--pending .zustand__form, .zustand--na .zustand__form, .zustand--unbekannt .zustand__form { background: transparent; border: 2px solid currentColor; border-radius: 50%; }

/* ---- Knöpfe: .schaltflaeche (umrandet), --primaer (gelb, dunkle Schrift), --klein (kompakt, mind. 32 px hoch); .knopf bleibt als gleichwertiger Name ---- */
.knopf, .schaltflaeche {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 2.75rem; padding: 0.4rem 1rem;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; border-radius: var(--radius-klein);
  border: 2px solid var(--akzent); background: transparent; color: var(--akzent);
}
.knopf:hover, .schaltflaeche:hover { border-color: var(--akzent-hover); color: var(--akzent-hover); }
.knopf--primaer, .schaltflaeche--primaer { background: var(--selected); color: var(--selected-text); border-color: var(--selected); }
.knopf--primaer:hover, .schaltflaeche--primaer:hover { background: var(--selected); color: var(--selected-text); border-color: var(--selected-text); }
.schaltflaeche--klein { min-height: 2.25rem; min-width: 2.25rem; padding: 0.15rem 0.6rem; font-size: 0.875rem; }
.knopf--sekundaer { background: var(--surface); }
.knopf--ruhig { border-color: transparent; }
.knopf[disabled], .knopf[aria-disabled="true"], .schaltflaeche[disabled], .schaltflaeche[aria-disabled="true"] { cursor: not-allowed; border-style: dashed; opacity: 0.7; }

/* ---- Listen ohne Aufzählungspunkte (.liste; ebenso Listen im Heute-Rahmen) ---- */
.liste, .heute ul { list-style: none; margin: 0; padding: 0; }
.liste > li, .heute ul > li { margin: 0 0 0.75rem; }
.liste > li:last-child, .heute ul > li:last-child { margin-bottom: 0; }

/* ---- Formularfelder ---- */
.feldgruppe { display: flex; flex-direction: column; gap: 0.2rem; margin: 0 0 1rem; min-width: 0; }
.feld__label { font-size: 0.875rem; font-weight: 600; }
.feld {
  font: inherit; min-height: 2.75rem; padding: 0.4rem 0.75rem; background: var(--surface); color: var(--text);
  border: 1px solid var(--rand); border-radius: var(--radius-klein); max-width: 100%; width: 100%;
}
textarea.feld { min-height: 6rem; resize: vertical; }
.feld[aria-invalid="true"] { border-width: 2px; border-style: double; }
.feld::placeholder { color: var(--platzhalter); opacity: 1; }
.feld__hilfe { font-size: 0.8125rem; color: var(--text-2); }
.feld__fehler { font-size: 0.875rem; color: var(--fehler-text); font-weight: 600; }
.feld__fehler::before { content: "\25C6\00a0"; }

/* ---- Figuren (ST-B12): Filterleiste als umbrechende Zeile, Felder höchstens 24 rem, sichtbarer Rand; Aktionsknöpfe ohne fokusfarbenen Rahmen ---- */
.figuren-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 1rem; margin: 0 0 1rem; }
.figuren-filter .feldgruppe { flex: 1 1 12rem; max-width: 24rem; margin: 0; }
.figuren-filter .feldgruppe:last-child { flex: 0 0 auto; }
.figuren-filter .feld { max-width: 24rem; border: 2px solid var(--rand); }
.figuren-filter input[type="search"] { -webkit-appearance: none; appearance: none; min-height: 2.25rem; padding-block: 0.25rem; }
.figuren-aktionen .schaltflaeche:not(.schaltflaeche--primaer) { border-color: var(--rand); color: var(--text); }
.figuren-aktionen .schaltflaeche:not(.schaltflaeche--primaer):hover { border-color: var(--text); }

/* ---- Samen neben dem Übersichtstitel: dekorativ, statisch, Farbe über currentColor und --c-gelb ---- */
.arbeitsraum__kopf--start { position: relative; }
.samen { position: absolute; top: -0.5rem; right: 0; width: min(25rem, 42%); height: 8.25rem; pointer-events: none; color: var(--text-2); }
.samen__bild { position: absolute; width: 5.5rem; height: 5.5rem; overflow: visible; opacity: 0.8; }
.samen__faden, .samen__stiel { fill: none; stroke: currentColor; stroke-linecap: round; }
.samen__faden { stroke-width: 1.3; }
.samen__stiel { stroke-width: 1.8; }
.samen__spitze { fill: var(--c-gelb); }
.samen__a { left: 6%; top: 1.5rem; width: 6.5rem; height: 6.5rem; transform: rotate(8deg); }
.samen__b { left: 38%; top: 0; transform: rotate(-12deg); }
.samen__c { left: 68%; top: 2rem; width: 4.5rem; height: 4.5rem; transform: rotate(24deg); }
.samen__d { left: 52%; top: 4.2rem; width: 4rem; height: 4rem; transform: rotate(-30deg); opacity: 0.65; }
@media (max-width: 47.99rem) { .samen { display: none; } }

/* ---- Wiese: schmaler Streifen am unteren Rand des Arbeitsraums, hinter und unter der Ideenleiste (nur ab 48 rem, nie klickbar) ----
   Er klebt wie die Ideenleiste am unteren Fensterrand; die Oberkante läuft weich aus, Inhalt taucht darin ab. Nach dem Seitenende bleibt Platz (Innenabstand),
   damit kein Text dauerhaft darunter liegt. Im Dunkeln liegt ein Overlay aus Markentinte darüber. Fokussierte Elemente scrollen über scroll-padding frei. */
@media (min-width: 48rem) {
  html { scroll-padding-bottom: 9rem; }
  .inhalt { padding-bottom: 3rem; }
  .seite::after {
    content: ""; display: block; flex: none; position: sticky; bottom: 0; z-index: 5; pointer-events: none;
    height: 5.75rem; margin-top: -5.75rem;
    background: url(/assets/wiese.jpg) center bottom / cover no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 60%); mask-image: linear-gradient(to bottom, transparent 0, black 60%);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .seite::after { background: linear-gradient(color-mix(in srgb, var(--c-tinte) 58%, transparent), color-mix(in srgb, var(--c-tinte) 58%, transparent)), url(/assets/wiese.jpg) center bottom / cover no-repeat; }
  }
  html[data-theme="dark"] .seite::after { background: linear-gradient(color-mix(in srgb, var(--c-tinte) 58%, transparent), color-mix(in srgb, var(--c-tinte) 58%, transparent)), url(/assets/wiese.jpg) center bottom / cover no-repeat; }
}

/* ---- Ideenleiste: dauerhaft unten im Inhalt ---- */
.ideenleiste {
  position: sticky; bottom: var(--ideen-abstand); z-index: 20; display: flex; align-items: center; gap: 12px;
  min-height: var(--ideen-hoehe); margin: var(--ideen-abstand) 16px; padding: 4px 4px 4px 16px;
  background: var(--surface); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schatten);
}
.ideenleiste__symbol { flex: none; width: 24px; height: 24px; color: var(--text-2); }
.ideenleiste .ideenleiste__feld { flex: 1 1 auto; min-width: 0; width: auto; border: 0; background: transparent; min-height: 48px; padding-left: 4px; }
.ideenleiste__knopf { flex: none; min-height: 48px; padding-left: 24px; padding-right: 24px; }
@media (min-width: 768px) { .ideenleiste { margin-left: 24px; margin-right: 24px; } }

/* Zielgrössen: Eingabefelder mindestens 2.75 rem (44 px), Linkziele mindestens 2.25 rem. Die allgemeine Regel steht in :where() (Spezifität 0),
   damit .feld, .ideenleiste__feld u. a. sie nicht ungewollt überstimmt; sie legt nur den Boden fest. Kontrollkästchen und Optionsfelder: Klickfläche mindestens 24 px, das Label ist klickbar. */
:where(select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])) { min-height: 2.75rem; }
:where(input[type="checkbox"], input[type="radio"]) { min-width: 1.5rem; min-height: 1.5rem; margin: 0; flex: none; }
.feld__option { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 1.5rem; cursor: pointer; }
.link-ziel { display: inline-flex; align-items: center; min-height: 2.25rem; }

/* ---- Karten ---- */
.karte { background: var(--surface); border: 1px solid var(--rand-leise); border-radius: var(--radius); padding: var(--karte-pad); margin: 0 0 var(--karte-abstand); }
.karte .karte__titel { margin-top: 0; margin-bottom: 16px; font-size: 1.375rem; }
/* ruhiger vertikaler Rhythmus (8-px-Raster) in Karten und Arbeitsraum */
.karte > :last-child, .arbeitsraum__inhalt > :last-child { margin-bottom: 0; }
.karte p, .karte ul, .karte ol, .karte .liste { margin-top: 0; margin-bottom: 16px; }
.karte h2, .karte h3 { margin-bottom: 16px; }
.karte .schaltflaeche, .karte .knopf { margin-top: 8px; }
.arbeitsraum__inhalt h2 { margin-top: 24px; }
.arbeitsraum__inhalt > h2:first-child { margin-top: 0; }
.arbeitsraum__inhalt p > .schaltflaeche + .schaltflaeche, .arbeitsraum__inhalt p > .knopf + .knopf { margin-left: 8px; }
.arbeitsraum nav ul, .arbeitsraum [role="tablist"] { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 16px; padding: 0; }

/* ---- Tabellen ---- */
.tabelle { width: 100%; border-collapse: collapse; background: var(--surface); }
.tabelle caption { text-align: left; font-weight: 700; padding: 0.5rem 0; }
.tabelle th, .tabelle td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--rand-leise); vertical-align: top; }
.tabelle thead th { border-bottom: 2px solid var(--rand); font-size: 0.875rem; }
@media (max-width: 40rem) {
  .tabelle--stapel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabelle--stapel, .tabelle--stapel tbody, .tabelle--stapel tr, .tabelle--stapel td { display: block; width: 100%; }
  .tabelle--stapel tr { border-bottom: 2px solid var(--rand); padding: 0.5rem 0; }
  .tabelle--stapel td { border-bottom: 0; padding: 0.2rem 0.75rem; }
  .tabelle--stapel td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; }
}

/* ---- Meldungen: Wort + Form + Farbe ---- */
.meldung {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; padding: 0.6rem 0.9rem; margin: 0 0 0.75rem;
  border: 1px solid currentColor; border-left-width: 0.4rem; border-radius: var(--radius-klein);
}
.meldung::before { content: ""; flex: none; width: 1.25rem; height: 1.25rem; align-self: center; }
.meldung__art { font-weight: 700; }
.meldung--fehler { color: var(--z-handeln-text); background: var(--z-handeln-flaeche); }
/* Symbole als Form: Fehler = Dreieck mit Ausrufezeichen, Hinweis = Kreis mit i, Leer = gestrichelter Ring; dazu immer das Wort */
.meldung--fehler::before { background: currentColor; -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDMuNSAyMiAyMC41SDJ6IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0xMiAxMHY1IiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMi40IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjE3LjgiIHI9IjEuMyIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==) center / contain no-repeat; mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDMuNSAyMiAyMC41SDJ6IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0xMiAxMHY1IiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMi40IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjE3LjgiIHI9IjEuMyIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==) center / contain no-repeat; }
.meldung--leer { color: var(--z-ohne_daten-text); background: var(--z-ohne_daten-flaeche); border-style: dashed; }
.meldung--leer::before { background: transparent; border: 2px solid currentColor; border-radius: 50%; }
.meldung--hinweis { color: var(--info-text); background: var(--info-flaeche); }
.meldung--hinweis::before { background: currentColor; -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iOSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiLz48cGF0aCBkPSJNMTIgMTF2NiIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIuNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSI3LjYiIHI9IjEuNCIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==) center / contain no-repeat; mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iOSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiLz48cGF0aCBkPSJNMTIgMTF2NiIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIuNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSI3LjYiIHI9IjEuNCIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==) center / contain no-repeat; }
.meldungen { position: fixed; left: 1rem; right: 1rem; bottom: calc(var(--ideen-hoehe) + 2 * var(--ideen-abstand) + 1rem); max-width: 40rem; z-index: 90; pointer-events: none; }
.meldungen .meldung { pointer-events: auto; margin-bottom: 0.5rem; box-shadow: var(--schatten); }

/* ---- Dialog-Muster (natives <dialog>, Fokus bleibt im Dialog, Esc schliesst) ---- */
.dialog { padding: 0; border: 2px solid var(--rand); border-radius: var(--radius); background: var(--surface); color: var(--text); max-width: min(36rem, calc(100vw - 2rem)); width: 100%; }
.dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.dialog__kopf { padding: 0.75rem 1rem; border-bottom: 1px solid var(--rand-leise); font-weight: 700; }
.dialog__inhalt { padding: 1rem; }
.dialog__fuss { padding: 0.75rem 1rem; border-top: 1px solid var(--rand-leise); display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }

/* ---- Sitzungen und frische Anmeldung (Betrieb): Dialoge aus shell_sitzungen.js; Zustände immer mit Form + Wort + Farbe ---- */
.sitzungen { max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow: auto; }
.sitzungen__titel, .frisch__titel { margin: 0; font-size: 1.125rem; }
.sitzungen .dialog__inhalt > p { margin: 0 0 0.75rem; }
.sitzungen__status { margin: 0 0 0.75rem; }
.sitzungen__status:empty { display: none; }
.sitzungen__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.sitzungen__zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.75rem; border: 1px solid var(--rand-leise); border-radius: var(--radius-klein); background: var(--surface); }
.sitzungen__zeile--aktuell { border: 2px solid var(--rand); }
.sitzungen__text { flex: 1 1 14rem; min-width: 0; }
.sitzungen__text p { margin: 0; }
.sitzungen__adresse { font-weight: 600; overflow-wrap: anywhere; }
.sitzungen__zeit { font-size: 0.875rem; color: var(--text-2); }
.sitzungen__marke { flex: none; }
.sitzungen__keine { margin: 0.75rem 0 0; }
.frisch__name { font-weight: 600; margin: 0 0 0.75rem; }
.frisch .dialog__inhalt > p { margin: 0 0 0.75rem; }
.frisch__form { margin: 0; }
.frisch .feldgruppe { margin: 0; }

/* ---- Befehlsuche ---- */
.suche { position: relative; flex: 1 1 18rem; max-width: 28rem; min-width: 0; }
.suche__liste {
  position: absolute; left: 0; right: 0; top: calc(100% + 0.25rem); z-index: 85; max-height: 60vh; overflow-y: auto;
  margin: 0; padding: 0.25rem; list-style: none; background: var(--surface); border: 2px solid var(--rand); border-radius: var(--radius-klein); box-shadow: var(--schatten);
}
.suche__gruppe { padding: 0.4rem 0.6rem 0.2rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; color: var(--text-2); }
.suche__option { padding: 0.45rem 0.6rem; border-left: 0.3rem solid transparent; border-radius: 0.25rem; cursor: pointer; min-height: 2.75rem; }
.suche__option[aria-selected="true"] { background: var(--selected); color: var(--selected-text); border-left-color: var(--selected-text); font-weight: 700; }
.suche__wirkung { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--text-2); }
.suche__option[aria-selected="true"] .suche__wirkung { color: var(--selected-text); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}