/* SESTOS Gestaltungsmuster, Modul 0, im Stil von 5keys.me (Andy, 26.10.2026).
   Handy zuerst. Schrift Poppins, gruene Hauptknoepfe, Lila als Akzent, Nachtblau-Lila im Kopf,
   weisse Karten auf hellem Lavendel, Regenbogen-Strich in den Key-Farben.
   Farbe ist nie die einzige Unterscheidung: immer Text oder Zeichen dazu. */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("schrift/poppins-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("schrift/poppins-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("schrift/poppins-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("schrift/poppins-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("schrift/poppins-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("schrift/poppins-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("schrift/poppins-800-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("schrift/poppins-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  /* Farben nach 5keys.me */
  --grund: #FAFBFD;          /* Seitenflaeche */
  --grund-lila: #F5F3FC;     /* helle Lavendel-Abschnitte */
  --karte: #FFFFFF;
  --titel: #1D1D3A;          /* Ueberschriften, fast Schwarz-Blau */
  --text: #47566A;           /* Fliesstext */
  --text-leise: #5F6980;     /* Zusatzangaben; Nachtrag 60 (B11): auch auf Lila-Hell ueber 4,5 zu 1 */
  --gruen-hell: #22E6A0;     /* Knopf-Verlauf oben */
  --gruen: #12B87A;          /* Knopf-Verlauf unten */
  --gruen-schrift: #06301F;  /* Schrift auf gruenem Knopf */
  --gruen-text: #0A7F53;     /* gruene Schrift auf hellem Grund (lesbar) */
  --gruen-leucht: #1CD991;   /* gruene Schrift auf dunklem Grund */
  --lila: #7A2BD0;           /* Akzent, Auswahl */
  --lila-hell: #F1EAFC;
  --nacht: #1D1D3A;
  --kopf: #454B6C;           /* Kopfleiste wie auf 5keys.me */
  --band-von: #2B0F63;       /* Kopfband-Verlauf */
  --band-bis: #5A22A8;
  --gold: #B89B68;           /* Zeichen, Marke */
  --rahmen: #E7E3F3;         /* nur Karten und Linien (Schmuck) */
  --rahmen-feld: #7C839B;    /* Nachtrag 60 (B10): Rand von Feldern, Auswahl, Schaltern, 3,8 zu 1 auf Weiss */
  --fokus: #1D1D3A;          /* Nachtrag 60 (B9): Fokus-Ring dunkel aussen, weiss innen */
  --fehler: #A61B3A;
  --fehler-hell: #FCE8EC;
  --hinweis: #2747C9;
  --hinweis-hell: #EAEEFD;
  /* Key-Farben von 5KEYS (nur Schmuck, nie Bedeutung) */
  --key1: #FFB400; --key2: #FF00FF; --key3: #00D84A; --key4: #2020E0; --key5: #00D5F0;

  /* Raster aus 8 Pixeln */
  --a1: 8px; --a2: 16px; --a3: 24px; --a4: 32px; --a6: 48px;
  --rund: 20px;
  --rund-knopf: 12px;
  --rund-klein: 12px;
  --schatten: 0 10px 30px rgba(60, 40, 140, .08), 0 1px 3px rgba(29, 29, 58, .06);
  --knopf-hoehe: 52px;
  --leiste-hoehe: 68px;
  font-size: 106.25%;        /* Nachtrag 60 (B12): 17 px bei Standardschrift, folgt der Schrift des Geraets */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: "Poppins", system-ui, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: var(--lila); }

.symbol { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.symbol.gross { width: 30px; height: 30px; }

/* Kopfleiste (dunkel, wie 5keys.me) */
.kopfleiste { background: var(--kopf); color: #fff; }
.kopf { max-width: 480px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: var(--a2); padding: 12px var(--a2); }
.marke { display: flex; align-items: center; gap: 10px; min-height: 48px; text-decoration: none; color: #fff; }
.marke-zeichen { width: 40px; height: 40px; }
.marke-wort { font-weight: 800; letter-spacing: .12em; font-size: 1.15rem; color: var(--gold); }

/* Sprachwahl */
.sprachwahl { position: relative; }
.sprachwahl summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
  min-height: 48px; min-width: 48px; padding: 0 14px; border-radius: var(--rund-knopf);
  border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.1); color: #fff;
  font-weight: 700; font-size: .85rem; }
.sprachwahl summary::-webkit-details-marker { display: none; }
.sprachwahl ul { position: absolute; right: 0; top: 56px; z-index: 20; list-style: none; margin: 0; padding: 6px;
  background: var(--karte); border: 1px solid var(--rahmen); border-radius: var(--rund-klein);
  box-shadow: var(--schatten); min-width: 190px; }
.sprachwahl li a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px;
  padding: 0 12px; border-radius: 8px; color: var(--titel); text-decoration: none; font-weight: 600; }
.sprachwahl li a[aria-current="true"] { background: var(--lila-hell); color: var(--lila); }

/* Kopfband (Lila-Verlauf, wie der obere Bereich von 5keys.me) */
.band { background: radial-gradient(120% 90% at 30% 20%, var(--band-bis) 0%, var(--band-von) 75%); color: #fff;
  padding: var(--a4) 0 var(--a6); text-align: center; }
.band-innen { max-width: 480px; margin: 0 auto; padding: 0 var(--a2); }
/* Schriftgroesse waechst mit der Bildschirmbreite: lange Woerter wie GESTALTUNGSMUSTER
   passen auch auf ein 360-Pixel-Handy, ohne mitten im Wort zu brechen. */
.band h1 { color: #fff; text-transform: uppercase; font-size: clamp(1.3rem, 6.4vw, 1.9rem); letter-spacing: -.01em;
  margin: var(--a2) 0 12px; }
.band h1 .gruen { color: var(--gruen-leucht); }
.band p { color: rgba(255,255,255,.85); }
.pille { display: inline-block; padding: 8px 18px; border-radius: 999px; border: 1px solid rgba(28,217,145,.45);
  background: rgba(255,255,255,.06); color: var(--gruen-leucht); font-weight: 700; font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase; }

/* Regenbogen-Strich in den Key-Farben von 5KEYS */
.keystrich { width: 96px; height: 5px; border-radius: 5px; margin: 0 auto;
  background: linear-gradient(90deg, var(--key1), var(--key2), var(--key3), var(--key4), var(--key5)); }

/* Rahmen der Seite */
.seite { max-width: 480px; margin: 0 auto; padding: 0 var(--a2) var(--a6); }
.band + .seite { margin-top: calc(-1 * var(--a4)); }

/* Schrift */
h1, h2, h3 { color: var(--titel); font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: 1.75rem; line-height: 1.2; margin: var(--a3) 0 var(--a1); }
h2 { font-size: 1.3rem; line-height: 1.3; margin: var(--a1) 0 var(--a2); }
h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 4px; }
p { margin: 0 0 var(--a2); }
.leise { color: var(--text-leise); }
.klein { font-size: .85rem; }
.oberzeile { display: block; color: var(--gruen-text); font-weight: 700; font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 6px; }
.oberzeile.lila { color: var(--lila); }

/* Karten */
.karte { background: var(--karte); border: 1px solid var(--rahmen); border-radius: var(--rund);
  padding: var(--a3) var(--a2); box-shadow: var(--schatten); }
.karte + .karte { margin-top: var(--a2); }

/* Knoepfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--knopf-hoehe); padding: 0 var(--a3); border-radius: var(--rund-knopf); border: 2px solid transparent;
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.knopf.breit { width: 100%; }
.knopf-haupt { background: linear-gradient(135deg, var(--gruen-hell), var(--gruen)); color: var(--gruen-schrift);
  border: none; box-shadow: 0 8px 20px rgba(18, 184, 122, .25); }
.knopf-haupt:hover { filter: brightness(1.04); }
.knopf-zweit { background: var(--karte); color: var(--lila); border-color: var(--lila); }
.knopf-hell { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.5); }
.knopf-leise { background: transparent; color: var(--titel); text-decoration: underline; text-underline-offset: 4px;
  padding: 0 var(--a2); }
.knopf:focus-visible, a:focus-visible, summary:focus-visible, button:focus-visible, [tabindex="-1"]:focus-visible {
  outline: 3px solid var(--fokus); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }
.knopf-reihe { display: flex; flex-direction: column; gap: 12px; }
.knopf-reihe.nebeneinander { flex-direction: row; flex-wrap: wrap; }

/* Mikrofon-Knopf: rund und gross, gruen */
.mikro { width: 72px; height: 72px; border-radius: 50%; border: none; flex: none; cursor: pointer;
  background: linear-gradient(135deg, var(--gruen-hell), var(--gruen)); color: var(--gruen-schrift);
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(18, 184, 122, .3); }
.mikro .symbol { width: 32px; height: 32px; }

/* Kacheln der Startseite */
.kachel { display: flex; align-items: center; gap: var(--a2); padding: var(--a2); min-height: 88px;
  background: var(--karte); border: 1px solid var(--rahmen); border-radius: var(--rund); box-shadow: var(--schatten);
  color: var(--titel); text-decoration: none; }
.kachel + .kachel { margin-top: 12px; }
/* Kachel als Knopf (startet sofort, z. B. das Gespraech zu einem Thema) */
button.kachel { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.kachel-form { margin: 0; }
.kachel-zeichen { width: 56px; height: 56px; border-radius: 16px; background: var(--lila-hell); color: var(--lila);
  display: flex; align-items: center; justify-content: center; flex: none; }
.kachel-text { flex: 1; min-width: 0; }
.kachel-text strong { display: block; font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.kachel-text span { color: var(--text-leise); font-size: .85rem; line-height: 1.4; display: block; margin-top: 4px; }
.kachel .pfeil { color: var(--text-leise); }
.kachel.einladung { background: radial-gradient(120% 120% at 20% 0%, var(--band-bis), var(--band-von)); border: none; color: #fff; }
.kachel.einladung .kachel-zeichen { background: linear-gradient(135deg, var(--gruen-hell), var(--gruen)); color: var(--gruen-schrift); }
.kachel.einladung .kachel-text span { color: var(--gruen-leucht); font-weight: 700; }
.kachel.einladung .pfeil { color: #fff; }
.kachel-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.kachel-paar .kachel { margin: 0; flex-direction: column; align-items: flex-start; min-height: 150px;
  border-top: 5px solid var(--key3); }
.kachel-paar .kachel + .kachel { border-top-color: var(--key2); }

/* Abzeichen fuer Freigabestufen: Zeichen + Name, Farbe nur zusaetzlich */
.abzeichen-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.abzeichen { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px 0 10px;
  border-radius: 999px; font-weight: 700; font-size: .82rem; border: 1.5px solid currentColor; background: var(--karte); }
.abzeichen .symbol { width: 18px; height: 18px; }
.stufe-nur_ich { color: #47566A; }
.stufe-familie { color: #0A7F53; }
.stufe-freunde { color: #2747C9; }
.stufe-kunden { color: #7A2BD0; }
.stufe-oeffentlich { color: #9A5B00; }

/* Verfassung: grosse Waehl-Knoepfe mit Zeichen und Wort */
.wahl-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wahl { display: flex; align-items: center; gap: 10px; min-height: 64px; min-width: 0; padding: 0 12px;
  overflow-wrap: break-word;
  border: 2px solid var(--rahmen-feld); border-radius: var(--rund-klein); background: var(--karte); font: inherit;
  font-weight: 700; color: var(--titel); cursor: pointer; text-align: left; }
.wahl[aria-pressed="true"] { border-color: var(--lila); background: var(--lila-hell); color: var(--lila); }
.wahl[aria-pressed="true"]::after { content: ""; margin-left: auto; width: 22px; height: 22px; border-radius: 50%;
  background: var(--lila) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat; }

/* Meldungen: Zeichen + Text */
.meldung { display: flex; gap: 12px; align-items: flex-start; padding: 14px var(--a2); border-radius: var(--rund-klein);
  border-left: 5px solid currentColor; }
.meldung + .meldung { margin-top: 12px; }
.meldung p { margin: 0; color: var(--titel); }
.meldung-erfolg { color: var(--gruen-text); background: #E4F9F0; }
.meldung-hinweis { color: var(--hinweis); background: var(--hinweis-hell); }
.meldung-fehler { color: var(--fehler); background: var(--fehler-hell); }
/* Schluessel-Seite: das Feld, das die Meldung nennt, bekommt einen deutlichen Rahmen (Meldung nennt es auch in Worten) */
#sl input[aria-invalid="true"] { border-color: var(--fehler); box-shadow: 0 0 0 2px var(--fehler); }

/* Eingabe */
.feld-titel { display: block; font-weight: 700; color: var(--titel); margin-bottom: 8px; }
.eingabe-zeile { display: flex; align-items: flex-end; gap: 12px; }
textarea, input[type="text"], input[type="number"] { width: 100%; font: inherit; color: var(--titel); background: var(--karte);
  border: 2px solid var(--rahmen-feld); border-radius: var(--rund-klein); padding: 14px; min-height: 56px; }
textarea { min-height: 120px; resize: vertical; }
textarea:focus, input:focus { outline: none; border-color: var(--lila); }

/* Zustandsliste der Startseite */
.zustand { list-style: none; margin: 0; padding: 0; }
.zustand li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rahmen); }
.zustand li:last-child { border-bottom: none; }
.zustand .name { flex: 1; color: var(--text-leise); }
.zustand .wert { font-weight: 700; color: var(--titel); display: inline-flex; align-items: center; gap: 6px; text-align: right; }
.zustand .ok { color: var(--gruen-text); }
.zustand .schlecht { color: var(--fehler); }
/* Nachtrag 69 (K1): Verlauf im Konto, lange Texte und Gruende brechen um (Handy ab 320 px) */
.zustand.konto-verlauf li { flex-wrap: wrap; gap: 4px 12px; }
.zustand.konto-verlauf .wert { display: block; flex: 1 1 100%; min-width: 0; text-align: left; overflow-wrap: anywhere; }

.qr { display: flex; justify-content: center; padding: var(--a1); background: #fff; border-radius: var(--rund-klein); }
.qr svg { display: block; }
.adresse { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.05rem; font-weight: 700;
  color: var(--titel); word-break: break-all; text-align: center; padding: 12px; background: var(--grund-lila);
  border-radius: var(--rund-klein); }
/* Jemanden empfehlen: grosser QR, darunter der Link zum Kopieren (Nachtrag 74 Affiliate-Link und Empfehlen) */
.empfehlen-qr svg { width: min(100%, 280px); height: auto; }
.empfehlen-link { display: block; width: 100%; box-sizing: border-box; border: 0; margin: 8px 0 0; }
.empfehlen-knoepfe { flex-direction: column; margin-top: 16px; }

/* Farbmuster */
.farben { display: grid; grid-template-columns: 1fr; gap: 12px; }
.farbe { display: flex; align-items: center; gap: 12px; }
.farbe .feld { width: 56px; height: 56px; border-radius: 14px; border: 1px solid rgba(0,0,0,.1); flex: none; }
.farbe code { font-size: .78rem; color: var(--text-leise); }

.abstand-reihe { display: flex; align-items: flex-end; gap: 12px; }
.abstand { background: var(--lila-hell); border: 1px solid var(--lila); border-radius: 4px; width: 100%; }
.abstand-beschriftung { font-size: .8rem; text-align: center; color: var(--text-leise); }

/* Untere Leiste */
.leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--karte);
  border-top: 1px solid var(--rahmen); padding-bottom: env(safe-area-inset-bottom); }
.leiste.im-muster { position: static; border: 1px solid var(--rahmen); border-radius: var(--rund); overflow: hidden;
  box-shadow: var(--schatten); }
.leiste ul { max-width: 480px; margin: 0 auto; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); }
.leiste a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--leiste-hoehe); color: var(--text-leise); text-decoration: none; font-size: .78rem; font-weight: 600; }
.leiste a[aria-current="page"] { color: var(--lila); font-weight: 700; }
.leiste a[aria-current="page"] .symbol { stroke-width: 2.6; }

.abschnitt { margin-top: var(--a6); }
.abschnitt-kopf { text-align: center; margin-bottom: var(--a3); }
.abschnitt-kopf .keystrich { margin-bottom: var(--a2); }
.zurueck { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; color: #fff; text-decoration: none; font-weight: 700; }

/* ===== Modul 1: Anmeldung, Formulare, Verwaltung ===== */
.kopf-rechts { display: flex; align-items: center; gap: 8px; }
.kopf-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; min-width: 48px;
  padding: 0 12px; border-radius: var(--rund-knopf); border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.1);
  color: #fff; text-decoration: none; font-weight: 700; font-size: .8rem; }
.kopf-knopf-text { display: none; }
@media (min-width: 420px) { .kopf-knopf-text { display: inline; } }
.bereichsleiste { background: var(--nacht); color: var(--gruen-leucht); font-weight: 700; font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 16px; }
.bereichsleiste .symbol { width: 16px; height: 16px; }
.band-links { text-align: left; }
.band-links .band-innen { text-align: left; }

body.mit-leiste .seite { padding-bottom: calc(var(--leiste-hoehe) + var(--a3)); }
.leiste ul.zwei { grid-template-columns: repeat(2, 1fr); }
.leiste ul.drei { grid-template-columns: repeat(3, 1fr); }
.leiste ul.vier { grid-template-columns: repeat(4, 1fr); }

.feld { margin-bottom: var(--a2); }
.feld-hilfe { font-size: .82rem; color: var(--text-leise); margin: 6px 0 0; }
input[type="password"], input[type="email"], input[type="tel"], input[type="date"], input[type="search"], select {
  width: 100%; font: inherit; color: var(--titel); background: var(--karte); border: 2px solid var(--rahmen-feld);
  border-radius: var(--rund-klein); padding: 12px 14px; min-height: 52px; }
input:focus, select:focus { outline: none; border-color: var(--lila); }
input.code-feld { font-size: 1.6rem; letter-spacing: .3em; text-align: center; font-weight: 700; }

.schalter-zeile { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; cursor: pointer; min-height: 48px; }
.schalter-zeile + .schalter-zeile { border-top: 1px solid var(--rahmen); }
.schalter-zeile input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--lila); flex: none; }
.schalter-text strong { display: block; color: var(--titel); }
.schalter-text span { display: block; font-size: .82rem; color: var(--text-leise); }

.schritte { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--a2); }
.schritt { width: 28px; height: 6px; border-radius: 6px; background: var(--rahmen); }
.schritt.erledigt { background: linear-gradient(90deg, var(--gruen-hell), var(--gruen)); }
.schritte-text { margin-left: 8px; font-size: .8rem; color: var(--text-leise); font-weight: 600; }

.formular .knopf-reihe { margin-top: var(--a3); }
.link-zeile { text-align: center; margin-top: var(--a2); }
.link-zeile a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

.geheimnis { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 700; color: var(--titel);
  background: var(--grund-lila); border-radius: var(--rund-klein); padding: 12px; text-align: center; word-break: break-all;
  letter-spacing: .06em; }
.codes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.codes li { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 700; font-size: 1.05rem;
  color: var(--titel); background: var(--grund-lila); border-radius: 10px; padding: 10px; text-align: center; }

.knopf-gefahr { background: var(--karte); color: var(--fehler); border-color: var(--fehler); }

/* Listen in der Verwaltung und bei Rechten */
.eintrag { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rahmen);
  color: var(--titel); text-decoration: none; min-height: 64px; }
.eintrag:last-child { border-bottom: none; }
.eintrag-text { flex: 1; min-width: 0; }
.eintrag-text strong { display: block; overflow-wrap: anywhere; }
.eintrag-text span { display: block; font-size: .82rem; color: var(--text-leise); overflow-wrap: anywhere; }
.marken { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.marke-klein { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px 2px 8px; border-radius: 999px;
  font-size: .8rem; font-weight: 700; border: 1.5px solid currentColor; color: var(--text); background: var(--karte); }
.marke-klein .symbol { width: 14px; height: 14px; }
.marke-klein.lila { color: var(--lila); }
.marke-klein.gruen { color: var(--gruen-text); }
.marke-klein.rot { color: var(--fehler); }

.zahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: var(--a3); }
.zahl { background: var(--karte); border: 1px solid var(--rahmen); border-radius: var(--rund); padding: var(--a2);
  box-shadow: var(--schatten); }
.zahl strong { display: block; font-size: 1.8rem; font-weight: 800; color: var(--titel); line-height: 1.1; }
.zahl span { font-size: .82rem; color: var(--text-leise); }

.recht-karte summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 56px; }
.recht-karte summary::-webkit-details-marker { display: none; }
.recht-karte[open] summary { margin-bottom: var(--a2); }
.recht-karte .eintrag-text strong { font-size: 1.02rem; }

.protokoll { list-style: none; margin: 0; padding: 0; }
.protokoll li { padding: 10px 0; border-bottom: 1px solid var(--rahmen); }
.protokoll li:last-child { border-bottom: none; }
.protokoll strong { display: block; color: var(--titel); font-size: .95rem; }
.protokoll span { font-size: .8rem; color: var(--text-leise); }
.kachel-bald { background: var(--grund-lila); box-shadow: none; border-style: dashed; }
.kachel-bald .kachel-zeichen { background: var(--karte); color: var(--text-leise); }
.anleitung { margin: 0 0 var(--a2); padding-left: 22px; color: var(--titel); }
.anleitung li { margin-bottom: 8px; }
a { -webkit-tap-highlight-color: transparent; }
summary, button, a.kachel, a.eintrag { -webkit-tap-highlight-color: transparent; }

.loeschen-bereich > summary { list-style: none; cursor: pointer; }
.loeschen-bereich > summary::-webkit-details-marker { display: none; }
.papierkorb-eintrag + .papierkorb-eintrag { border-top: 1px solid var(--rahmen); }
.papierkorb-eintrag .eintrag { border-bottom: none; }
.warnung-band { text-decoration: none; margin-bottom: 16px; min-height: 48px; }
.warnung-band p { font-weight: 700; }

/* ===== Modul 2: Brain, Lebensbereiche, Personenregister ===== */
.unsichtbar { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.unterkopf { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; margin: 24px 0 12px; }
.kachel-klein { min-height: 72px; }
.kachel-klein .kachel-zeichen { width: 44px; height: 44px; border-radius: 12px; }
.fragenliste { margin: 8px 0 0; padding-left: 26px; color: var(--titel); }
.fragenliste li { padding: 8px 0; border-bottom: 1px solid var(--rahmen); line-height: 1.45; overflow-wrap: break-word; }
.fragenliste li:last-child { border-bottom: none; }
fieldset.themen { border: none; margin: 8px 0 16px; padding: 0; min-width: 0; }
fieldset.themen legend { padding: 0; }
.themen-liste { margin-left: 36px; border-left: 2px solid var(--rahmen); padding-left: 12px; }
.themen-liste .schalter-zeile { padding: 8px 0; }
.schalter-zeile input[type="radio"] { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--lila); flex: none; }
.unter-aktion { margin: 0 0 12px 68px; }
.unter-aktion summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700;
  color: var(--lila); }
.vorlage-zeile { border-bottom: 1px solid var(--rahmen); }
.vorlage-zeile:last-child { border-bottom: none; }
.vorlage-zeile .eintrag { border-bottom: none; }
.vorlage-zeile .verschieben { margin: -8px 0 8px 68px; gap: 4px; }
.vorlage-zeile .verschieben .knopf { min-height: 44px; padding: 0 12px; }
/* Marken in Listen: die allgemeine Regel ".eintrag-text span" (Block) darf sie nicht strecken */
.eintrag-text .marken { display: flex; }
.eintrag-text .marken .marke-klein { display: inline-flex; margin-top: 0; }

/* --- Modul 3: Interviewer, Diktat, Tagebuch --------------------------------------------------- */
.wahl-radio { position: relative; }
.wahl-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wahl-radio span { min-width: 0; }
.wahl-radio:has(input:checked) { border-color: var(--lila); background: var(--lila-hell); color: var(--lila); }
.wahl-radio { gap: 8px; padding: 0 10px; font-size: .95rem; overflow-wrap: normal; }
/* Das Haekchen sitzt als Plakette auf der Ecke: es nimmt dem Wort keinen Platz weg */
.wahl-radio:has(input:checked)::after { content: ""; position: absolute; top: -9px; right: -9px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--lila) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat; }
.wahl-radio:has(input:focus-visible) { outline: 3px solid var(--lila); outline-offset: 2px; }
fieldset.feld { border: none; padding: 0; margin: 0 0 var(--a3); min-width: 0; }
fieldset.feld legend { padding: 0; margin-bottom: 12px; }
.gewaehlt .oberzeile { display: flex; align-items: center; gap: 6px; }
.gewaehlt-name { font-size: 1.25rem; color: var(--titel); margin: 4px 0 8px; overflow-wrap: break-word; }
.stufen-hinweis { display: flex; align-items: center; gap: 8px; }
.kachel-haupt { border: 2px solid var(--gruen); }

.interview-kopf { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--a2) 0 8px; }
.pille-klein { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 8px; border-radius: 999px;
  background: var(--lila-hell); color: var(--titel); font-size: .8rem; font-weight: 600; }
.pille-klein .symbol { width: 16px; height: 16px; }
.interview-thema { color: var(--text-leise); font-size: .85rem; font-weight: 700; margin: 0 0 12px; overflow-wrap: break-word; }
.frage-karte { background: radial-gradient(120% 120% at 20% 0%, var(--band-bis), var(--band-von)); color: #fff;
  border-radius: var(--rund); padding: var(--a3) var(--a2); margin-bottom: var(--a2); }
.frage-karte .oberzeile { color: var(--gruen-leucht); display: flex; align-items: center; gap: 6px; }
.frage-karte h1 { color: #fff; font-size: 1.35rem; line-height: 1.35; margin: 8px 0 0; letter-spacing: -.01em;
  overflow-wrap: break-word; hyphens: auto; }

.diktat { text-align: center; margin: var(--a3) 0 var(--a2); }
.mikro-knopf { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; background: none; border: none;
  font: inherit; color: var(--titel); cursor: pointer; padding: 0; }
.mikro-rund { width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gruen-hell), var(--gruen)); color: var(--gruen-schrift);
  box-shadow: 0 10px 30px rgba(18,184,122,.35); }
.mikro-rund .symbol { width: 44px; height: 44px; }
.mikro-text { font-weight: 800; font-size: 1.05rem; }
.nimmt-auf .mikro-rund { background: var(--fehler); color: #fff; box-shadow: 0 0 0 10px var(--fehler-hell);
  animation: puls 1.4s ease-in-out infinite; }
.nimmt-auf .mikro-rund .symbol { display: none; }
.nimmt-auf .mikro-rund::before { content: ""; width: 34px; height: 34px; border-radius: 6px; background: #fff; }
.sendet .mikro-rund { opacity: .5; }
@keyframes puls { 50% { box-shadow: 0 0 0 18px var(--fehler-hell); } }
@media (prefers-reduced-motion: reduce) { .nimmt-auf .mikro-rund { animation: none; } }
.diktat-zustand { min-height: 1.5em; margin: 12px 0 0; font-weight: 700; color: var(--titel); }
.diktat-zustand[data-art="fehler"] { color: var(--fehler); }
.ersatz-aufnahme { text-align: left; margin-top: var(--a2); display: grid; gap: 12px; }
.ersatz-aufnahme[hidden] { display: none; }
.datei-knopf { position: relative; }
.datei-knopf input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tippen summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; min-height: 48px; }
.tippen summary::-webkit-details-marker { display: none; }
.tippen textarea { width: 100%; margin: var(--a2) 0 12px; }
.interview-fuss { margin-top: var(--a3); }

.verlauf { padding: 12px var(--a2); margin-bottom: var(--a2); }
.verlauf summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer;
  list-style: none; min-height: 44px; font-weight: 700; color: var(--titel); }
.verlauf summary::-webkit-details-marker { display: none; }
.gespraech { list-style: none; margin: 0; padding: 0; }
.gespraech.karte { padding: 8px var(--a2); }
.gespraech li { padding: 12px 0; border-bottom: 1px solid var(--rahmen); overflow-wrap: break-word; }
.gespraech li:last-child { border-bottom: none; }
.g-wer { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .8rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-leise); margin-bottom: 4px; }
.g-wer .symbol { width: 16px; height: 16px; }
.g-frage > span:not(.g-wer) { font-weight: 700; color: var(--titel); }
.g-zeit { margin-left: auto; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.gespraech audio { display: block; width: 100%; margin-top: 8px; height: 44px; }
.abschnitte { margin-top: 8px; font-size: .85rem; }
.abschnitte summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--lila); font-weight: 600; }
.abschnitte ul { list-style: none; padding: 0; margin: 0; }
.abschnitte li { padding: 4px 0; border: none; }
.zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: var(--a2) 0; }
.zahlen div { background: var(--lila-hell); border-radius: var(--rund-klein); padding: 10px; min-width: 0; }
.zahlen dt { font-size: .8rem; font-weight: 700; color: var(--text-leise); line-height: 1.3; }
@media (max-width: 374px) { .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.zahlen dd { margin: 4px 0 0; font-size: 1.2rem; font-weight: 800; color: var(--titel); font-variant-numeric: tabular-nums; }
/* "hidden" gilt immer, auch fuer Knoepfe mit eigener display-Angabe */
[hidden] { display: none !important; }
#wiederherstellen, #nochmal-senden { margin-top: 12px; }

/* --- Kinder-Oberflaeche (Andy 27.10.2026): gross, bunt, wenig Text, jedes Zeichen mit Wort ------------- */
.kind-start { text-align: center; padding-top: var(--a3); }
.kind-hallo { display: inline-flex; align-items: center; gap: 10px; font-size: 1.6rem; font-weight: 800; color: var(--titel);
  margin: 0 0 var(--a3); }
.kind-hallo .symbol { width: 34px; height: 34px; color: #F5A524; }
.kind-mikro { display: flex; flex-direction: column; align-items: center; gap: 14px; text-decoration: none; color: var(--titel);
  margin: 0 auto var(--a4); }
.kind-mikro-rund { width: 168px; height: 168px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, #FFD36E, #FF8A3D 55%, #F0567A); color: #fff;
  box-shadow: 0 0 0 12px #FFE9D6, 0 18px 40px rgba(240,86,122,.35); }
.kind-mikro-rund .symbol { width: 72px; height: 72px; }
.kind-mikro-text { font-size: 1.5rem; font-weight: 800; line-height: 1.25; max-width: 16ch; }
.kind-mikro:focus-visible .kind-mikro-rund { outline: 4px solid var(--lila); outline-offset: 6px; }
.kind-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.kind-kachel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 132px;
  padding: 14px 10px; border-radius: 22px; background: var(--karte); border: 3px solid #E8DDFB; color: var(--titel);
  text-decoration: none; text-align: center; min-width: 0; }
.kind-kachel strong { font-size: 1.05rem; line-height: 1.25; overflow-wrap: normal; hyphens: auto; }
.kind-kachel-bild { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center;
  background: #EAF7FF; color: #1E78C8; }
.kind-kachel:nth-child(2) .kind-kachel-bild { background: #E7FAF1; color: var(--gruen-text); }
.kind-kachel:nth-child(3) .kind-kachel-bild { background: #FFF1E0; color: #B4590B; }
.kind-kachel:nth-child(4) .kind-kachel-bild { background: var(--lila-hell); color: var(--lila); }
.kind-kachel-bild .symbol { width: 32px; height: 32px; }
.kind-bald { border-style: dashed; opacity: .85; }
.kind-marke { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--text-leise); }
.kind-marke .symbol { width: 14px; height: 14px; }
.kind-geheim { display: flex; align-items: center; justify-content: center; gap: 8px; margin: var(--a3) 0 0;
  color: var(--text-leise); font-size: .9rem; }
.kind-gefuehl { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.05rem; color: var(--titel); }
.kind-eltern { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 12px 0 4px; }
.kind-person { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 96px; max-width: 140px;
  padding: 10px 8px; border-radius: 22px; color: var(--titel); text-decoration: none; text-align: center; }
.kind-person strong { font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.kind-foto { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; font-size: 1.9rem;
  font-weight: 800; background: #FFF1D6; color: #9A5B00; border: 4px solid #FFD27A; }
.kind-foto-gross { width: 140px; height: 140px; font-size: 3.6rem; margin: var(--a3) auto 0; }

/* Kleine Fahnen fuer Sprachen (Andy 27.10.2026) */
.fahne { width: 22px; height: 15px; flex: none; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.18); }
.mit-fahne { display: inline-flex; align-items: center; gap: 10px; }
/* Beginnt die Seite ohne Karte (z. B. Tagebuch-Beginn), darf das Formular nicht unter das Band rutschen */
.band + .seite > main > .formular:first-child { margin-top: calc(var(--a4) + 8px) !important; }

/* Gespraechsansicht (Modul 3, Nachbesserung Andy 27.10.2026): wie ein Chat, Stopp sendet sofort */
.gs-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0 6px;
  position: sticky; top: 0; z-index: 5; background: var(--grund); }
.gs-zurueck { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -10px; color: var(--titel); flex: none; }
.gs-zurueck .symbol { width: 22px; height: 22px; }
.gs-thema { font-weight: 800; color: var(--titel); font-size: 1.1rem; margin: 0 auto 0 0; }
.gs-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px 4px 8px; border-radius: 999px;
  border: 1.5px solid var(--rahmen); background: var(--karte); color: var(--titel); font: inherit; font-size: .85rem; font-weight: 600; }
.gs-chip .symbol { width: 16px; height: 16px; }
.gs-chip.stufe { border-color: var(--lila); color: var(--lila); }
.gs-chip .pfeil-runter { width: 12px; height: 12px; transform: rotate(90deg); }

.gs-liste { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.blase { max-width: 86%; padding: 12px 14px; border-radius: 20px; line-height: 1.45; position: relative; }
.blase-sestos { align-self: flex-start; background: var(--karte); border: 1px solid var(--rahmen); border-bottom-left-radius: 6px;
  color: var(--titel); font-weight: 600; box-shadow: var(--schatten); }
.blase-sestos .wer { display: flex; align-items: center; gap: 6px; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-leise); font-weight: 700; margin-bottom: 4px; }
.blase-sestos .wer .symbol { width: 18px; height: 18px; }
.blase-ich { align-self: flex-end; background: var(--lila-hell); color: var(--titel); border-bottom-right-radius: 6px; }
.blase-ich .fuss { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: .78rem; color: var(--text-leise); }
.blase-ich .abspielen { display: inline-flex; align-items: center; gap: 6px; border: none; background: #fff; border-radius: 999px;
  min-height: 32px; padding: 0 12px 0 8px; color: var(--lila); font: inherit; font-weight: 700; font-size: .8rem; }
.blase-ich .mehr { margin-left: auto; border: none; background: none; min-width: 40px; min-height: 32px; color: var(--text-leise);
  font: inherit; font-weight: 800; font-size: 1.1rem; letter-spacing: 2px; }
.blase-ich.live { background: #fff; border: 2px dashed #C9B5F0; color: var(--text); }
.blase-ich.live .cursor { display: inline-block; width: 2px; height: 1.1em; background: var(--lila); vertical-align: -3px; margin-left: 2px; }
.blase-ich.entwurf { background: #fff; border: 2px solid var(--lila); }
.blase-ich.entwurf .marke-entwurf { font-size: .8rem; font-weight: 700; color: var(--lila); text-transform: uppercase; letter-spacing: .08em; }

/* Unten fest: Mikrofon und zwei leise Knoepfe */
.dock { position: fixed; left: 0; right: 0; bottom: 0; background: rgba(250,251,253,.96); backdrop-filter: blur(8px);
  border-top: 1px solid var(--rahmen); padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); z-index: 30; }
.dock-innen { max-width: 480px; margin: 0 auto; }
.dock-reihe { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.dock-seite { display: flex; flex-direction: column; align-items: center; gap: 4px; border: none; background: none; color: var(--text);
  font: inherit; font-size: .78rem; font-weight: 600; min-height: 56px; }
.dock-seite .symbol { width: 24px; height: 24px; }
.dock-mikro { width: 76px; height: 76px; border-radius: 50%; border: none; display: grid; place-items: center; color: #fff;
  background: linear-gradient(160deg, #FFB45C, #FF6B4A); box-shadow: 0 0 0 8px #FFE9DC, 0 10px 24px rgba(255,107,74,.35); }
.dock-mikro .symbol { width: 34px; height: 34px; }
.dock-mikro.stopp { background: var(--fehler); box-shadow: 0 0 0 8px var(--fehler-hell); }
.dock-mikro .quadrat { width: 26px; height: 26px; border-radius: 6px; background: #fff; }
.dock-hinweis { text-align: center; font-size: .8rem; color: var(--text-leise); margin: 6px 0 0; }

.welle { display: block; width: 100%; height: 40px; margin-bottom: 6px; }
.uhr { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; color: var(--fehler); font-size: .9rem; margin-bottom: 6px; }
.uhr .uhr-max { margin-left: -6px; color: var(--text-leise); font-weight: 600; }
.uhr .punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--fehler); }

.pruef-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pruef-reihe .knopf { min-height: 52px; }
.pruef-reihe .ganz { grid-column: 1 / -1; }

/* Blatt von unten */
.schleier { position: fixed; inset: 0; background: rgba(29,29,58,.45); z-index: 40; }
.blatt { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; background: #fff; border-radius: 24px 24px 0 0;
  padding: 10px 16px calc(18px + env(safe-area-inset-bottom)); }
.blatt-innen { max-width: 480px; margin: 0 auto; }
.blatt-griff { width: 44px; height: 5px; border-radius: 3px; background: var(--rahmen); margin: 0 auto 12px; }
.blatt h2 { font-size: 1.05rem; margin: 0 0 4px; color: var(--titel); }
.blatt .zitat { color: var(--text-leise); font-size: .9rem; margin: 0 0 12px; }
.blatt-zeile { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px; border: none; background: none;
  border-top: 1px solid var(--rahmen); font: inherit; font-weight: 600; color: var(--titel); text-align: left; padding: 6px 4px; }
.blatt-zeile .symbol { width: 24px; height: 24px; color: var(--lila); flex: none; }
.blatt-zeile small { display: block; font-weight: 400; color: var(--text-leise); font-size: .8rem; }
.blatt-zeile.gefahr, .blatt-zeile.gefahr .symbol { color: var(--fehler); }
.blatt-zeile .wahl-punkt { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--rahmen-feld); flex: none; }
.blatt-zeile.an .wahl-punkt { border: 7px solid var(--lila); }
.blatt-zeile.an { color: var(--lila); }
.blase-sestos.tippt .punkte { display: inline-flex; gap: 5px; padding: 4px 0; }
.blase-sestos.tippt .punkte i { width: 8px; height: 8px; border-radius: 50%; background: #B9A6E6; }
.blase-sestos.tippt .punkte i:nth-child(2) { background: #9A82DA; } .blase-sestos.tippt .punkte i:nth-child(3) { background: #7A2BD0; }
.gs-liste { margin-bottom: calc(200px + env(safe-area-inset-bottom)); }
.gs-notiz { margin: 12px 0 0; }
.blase-ich .nicht-erkannt { display: flex; align-items: center; gap: 6px; color: var(--fehler); font-weight: 600; margin-bottom: 8px; }
.blase-ich .nicht-erkannt .symbol { width: 18px; height: 18px; flex: none; }
/* Fehler 04.11.2026: erkennt gerade (kein Fehler, nur Warten) und der Grund unter der Meldung */
.nicht-erkannt.erkennt-gerade { color: var(--text); font-weight: 600; }
.erkennung-grund { display: block; margin-bottom: 8px; }
[data-loesung] { margin-bottom: 8px; }  /* Abstand zum Knopf "Jetzt erkennen" darunter */
.g-antwort .nicht-erkannt { display: flex; align-items: center; gap: 6px; color: var(--fehler); font-weight: 600; margin-bottom: 8px; }
.g-antwort .nicht-erkannt.erkennt-gerade { color: var(--text); }
.g-antwort .nicht-erkannt .symbol { width: 18px; height: 18px; flex: none; }
.blase-ich.live:empty::before { content: "…"; }
.blase-ich.sendet { opacity: .75; }
.blase-ich.sendet .cursor { display: none; }
.dock-form { display: contents; }
.dock-form[hidden], .dock-seite[hidden] { display: none !important; }
.dock-mikro .quadrat { display: none; }
.dock-mikro.laeuft { background: var(--fehler); box-shadow: 0 0 0 8px var(--fehler-hell); }
.dock-mikro.laeuft .symbol { display: none; }
.dock-mikro.laeuft .quadrat { display: block; }
.dock-mikro:disabled { opacity: .5; }
.pause-zeichen { font-weight: 900; font-size: 1.2rem; line-height: 24px; letter-spacing: 1px; }
.dock .diktat-zustand { text-align: center; margin: 0 0 6px; min-height: 0; }
.dock .diktat-zustand:empty { display: none; }
.dock #nochmal-senden, .dock #wiederherstellen, .dock .ersatz-aufnahme { margin-bottom: 10px; }
.blatt .formular { margin: 4px 0 8px; }
.blatt textarea { width: 100%; }
@media (max-width: 359px) {
  .dock-seite { font-size: .8rem; }
  .gs-chip { font-size: .8rem; }
}
.stufen-wahl .blatt-zeile:first-of-type { border-top: none; }
.loeschen-zeile { margin-top: 24px; text-align: center; }
.gefahr-text { color: var(--fehler); }
.gefahr-text .symbol { color: var(--fehler); }
.papierkorb-eintrag { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rahmen); }
.papierkorb-eintrag:first-of-type { border-top: none; }
.papierkorb-eintrag .eintrag-text { flex: 1; min-width: 0; }
.papierkorb-eintrag .eintrag-text strong { display: block; overflow-wrap: anywhere; }
.papierkorb-eintrag form { flex: none; }
/* Tippflaechen mindestens 44 px (Handy-Pruefung) */
.gs-chip.stufe { min-height: 44px; }
.blase-ich .abspielen { min-height: 44px; }
.blase-ich .mehr { min-height: 44px; min-width: 44px; }
.blase-ich .fuss { margin-top: 4px; }
/* Tippflaechen mindestens 44 px (Handy-Pruefung) */
.gs-chip.stufe { min-height: 44px; }
.blase-ich .abspielen { min-height: 44px; }
.blase-ich .mehr { min-height: 44px; min-width: 44px; }
.blase-ich .fuss { margin-top: 4px; }
/* Test-Adresse: immer sichtbar, damit niemand Test und echtes Brain verwechselt */
.test-band { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 16px;
  background: #FFE7A8; color: #5A3B00; font-size: .85rem; font-weight: 700; text-align: center; }
.test-band .symbol { width: 18px; height: 18px; flex: none; }
#verwerfen.sicher { color: var(--fehler); font-weight: 800; }
#verwerfen.sicher .symbol { color: var(--fehler); }

/* Modul 4: Bausteine, "Neu im Brain", Hochladen, "Hier starten" */
.segment { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; margin: var(--a2) 0;
  background: var(--grund-lila); border-radius: 16px; }
.segment a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; border-radius: 12px;
  font-weight: 700; color: var(--titel); text-decoration: none; font-size: .92rem; }
.segment a .symbol { width: 18px; height: 18px; }
.segment a[aria-current="page"] { background: var(--karte); box-shadow: var(--schatten); color: var(--lila); }
.baustein-gruppe .unterkopf { display: flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0;
  font-size: .82rem; }
.baustein-gruppe .unterkopf .symbol { width: 18px; height: 18px; }
.baustein-karte { display: block; padding: 14px var(--a2); margin-bottom: 10px; background: var(--karte);
  border: 1px solid var(--rahmen); border-radius: 16px; box-shadow: var(--schatten); color: var(--titel); text-decoration: none; }
.baustein-text { margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: break-word; line-height: 1.5; }
.baustein-gross { margin-top: var(--a2); }
.baustein-text-gross { margin: 0 0 8px; font-size: 1.05rem; color: var(--titel); line-height: 1.6; overflow-wrap: break-word;
  white-space: pre-line; }
.aufklapp > summary { list-style: none; cursor: pointer; }
.aufklapp > summary::-webkit-details-marker { display: none; }
.aufklapp > summary.knopf-leise { min-height: 44px; padding-left: 0; padding-right: 0; justify-content: flex-start; }
.aufklapp[open] > summary { margin-bottom: 8px; }
.aufklapp textarea, .karte textarea { width: 100%; font: inherit; padding: 12px; border: 2px solid var(--rahmen-feld);
  border-radius: var(--rund-klein); color: var(--titel); background: var(--karte); resize: vertical; margin-bottom: 12px; }
.etiketten { margin: var(--a2) 0 0; background: var(--karte); border: 1px solid var(--rahmen); border-radius: var(--rund);
  box-shadow: var(--schatten); padding: 4px var(--a2); }
.etiketten > div { padding: 12px 0; border-bottom: 1px solid var(--rahmen); }
.etiketten > div:last-child { border-bottom: none; }
.etiketten dt { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-leise); }
.etiketten dd { margin: 4px 0 0; color: var(--titel); overflow-wrap: break-word; }
.etikett-grund { display: block; font-size: .85rem; color: var(--text-leise); margin-top: 4px; }
.etikett-zeile { display: block; }
.etiketten .blatt-zeile { padding: 0; min-height: 52px; }
.karte-titel { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: 700; color: var(--titel); margin: 0 0 8px; }
.karte-titel .nummer, .anleitung-text .nummer { width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center; background: var(--lila); color: #fff; font-weight: 800; font-size: .9rem; }
.datei-wahl { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 12px var(--a2); margin: 8px 0 var(--a2);
  border: 2px dashed var(--lila); border-radius: var(--rund-klein); background: var(--lila-hell); color: var(--lila); cursor: pointer; }
.datei-wahl strong { display: block; color: var(--titel); overflow-wrap: anywhere; }
.datei-wahl small { display: block; color: var(--text-leise); font-size: .8rem; }
.datei-wahl:focus-within { outline: 3px solid var(--lila); outline-offset: 2px; }
.karte select, .formular select { width: 100%; min-height: 52px; font: inherit; padding: 0 12px; border: 2px solid var(--rahmen-feld);
  border-radius: var(--rund-klein); background: var(--karte); color: var(--titel); }
.karte + .karte, .hs-teil { margin-top: var(--a2); }
.aufklapp-karte > summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; list-style: none; cursor: pointer; }
.aufklapp-karte > summary::-webkit-details-marker { display: none; }
.aufklapp-karte > summary .karte-titel { margin: 0; }
.aufklapp-karte > summary .pfeil { transform: rotate(90deg); transition: transform .2s; }
/* Review 03.11.2026 (F-C5c): geschlossen zeigt der Pfeil nach unten, offen nach oben (wie .pfeil-runter); unter der
   offenen Ueberschrift steht Abstand, damit die erste Beschriftung nicht an ihr klebt */
.aufklapp-karte[open] > summary .pfeil { transform: rotate(-90deg); }
.aufklapp-karte[open] > summary { margin-bottom: var(--a2); }
.klein-zeichen { width: 44px; height: 44px; border-radius: 12px; }
.kopf-knopf.dunkel { color: var(--lila); }
.rot-text { color: var(--fehler) !important; font-weight: 700; }
progress { width: 100%; height: 12px; border-radius: 6px; overflow: hidden; appearance: none; border: none; background: var(--rahmen); }
progress::-webkit-progress-bar { background: var(--rahmen); border-radius: 6px; }
progress::-webkit-progress-value { background: linear-gradient(90deg, var(--gruen-hell), var(--gruen)); border-radius: 6px; }
progress::-moz-progress-bar { background: var(--gruen); }
.lauf { padding: 14px var(--a2); }
.lauf + .lauf { margin-top: 10px; }
.lauf-quellen { margin-top: 8px; }
.lauf-quellen summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--lila); font-weight: 600; }
.lauf-quellen .eintrag-text strong { overflow-wrap: anywhere; }
.lauf-titel { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--titel); overflow-wrap: anywhere; }
.anleitung-schritte { list-style: none; padding: 0; margin: var(--a2) 0; }
.anleitung-schritt { margin-bottom: 12px; }
.anleitung-text { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 12px; color: var(--titel); }
.anleitung-bild { display: block; width: 100%; border-radius: 12px; border: 1px solid var(--rahmen); }
.menue-bild { border: 1px solid var(--rahmen); border-radius: 14px; background: var(--grund); padding: 6px; }
.menue-zeile { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 10px;
  color: var(--text); font-size: .9rem; border: 2px solid transparent; }
.menue-zeile.markiert { border-color: var(--lila); background: var(--karte); color: var(--titel); font-weight: 700; }
.menue-zeile.markiert .symbol { color: var(--lila); width: 18px; height: 18px; }
.menue-zeile em { margin-left: auto; font-style: normal; font-size: .8rem; font-weight: 700; color: var(--lila);
  text-transform: uppercase; letter-spacing: .08em; }
.kachel-neu { display: flex; align-items: center; gap: 8px; margin-top: 12px; min-height: 48px; padding: 0 var(--a2);
  border-radius: 14px; background: var(--lila-hell); color: var(--lila); font-weight: 700; text-decoration: none; }
.lauf { padding: 10px 0; border-top: 1px solid var(--rahmen); }
.link-knopf { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.link-felder input { margin-bottom: 8px; }
input[type="url"] { width: 100%; font: inherit; color: var(--titel); background: var(--karte); min-height: 52px;
  padding: 0 14px; border: 2px solid var(--rahmen-feld); border-radius: var(--rund-klein); }
input[type="url"]:focus { outline: none; border-color: var(--lila); }

/* Aufklappbare Karten der Themenseite: Titel links, Wert rechts, Pfeil dreht sich */
.aufklapp-karte > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; }
.aufklapp-karte > summary::-webkit-details-marker { display: none; }
.aufklapp-karte > summary .oberzeile { margin: 0; flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
/* F-E7d: Namen in normaler dunkler Schrift (Gruen heisst "ausgewaehlt"), die Nachfrage vor dem Entfernen */
.aufklapp-karte > summary .aufklapp-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  color: var(--titel); font-weight: 600; overflow-wrap: anywhere; }
.aufklapp-name > .symbol { flex: none; color: var(--text-leise); }
.entfernen-nachfrage { margin-top: 16px; padding-top: 4px; border-top: 1px solid var(--rahmen); }
.entfernen-nachfrage .knopf-reihe { align-items: center; }
/* F-E7a: drei Felder "Fuer wen"; das dritte bekommt die ganze Breite */
/* Andy 04.11.2026: die fuenf Schluessel zeigen ihre Farbe aus dem Farbleitsystem als kleinen Punkt, nie als Flaeche */
.key-punkt { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px;
  vertical-align: -1px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.key-punkt.key-1 { background: var(--key1); } .key-punkt.key-2 { background: var(--key2); }
.key-punkt.key-3 { background: var(--key3); } .key-punkt.key-4 { background: var(--key4); }
.key-punkt.key-5 { background: var(--key5); }
.vorlage-fuer .wahl:last-child:nth-child(odd) { grid-column: 1 / -1; }
fieldset[data-feld="fuer"] { margin-top: 24px; }
.aufklapp-karte .aufklapp-wert { color: var(--titel); font-size: .9rem; }
.aufklapp-karte .pfeil-runter { transform: rotate(90deg); transition: transform .2s; color: var(--text-leise); }
.aufklapp-karte[open] .pfeil-runter { transform: rotate(-90deg); }
/* M11-U5: Zeitzone: ein langer Wert ("Asia/Dubai · automatisch") rutscht am Handy in die naechste Zeile statt ueber den Titel */
.aufklapp-karte[data-feld="zeitzone"] > summary { flex-wrap: wrap; }
.aufklapp-karte[data-feld="zeitzone"] > summary .oberzeile { flex: 1 0 auto; }
.aufklapp-karte[data-feld="zeitzone"] .aufklapp-wert { margin-left: auto; text-align: right; }
/* Startseite: die Kacheln ragen ins Band, aber nicht ueber den Gruss (Andy 28.10.2026, Kopf schlank 02.11.2026) */
.mein-brain-hoch { position: relative; margin-top: -4px; }
/* KI-Kosten (Administration) */
.monats-wahl { margin-bottom: 16px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.monats-wahl a { white-space: nowrap; padding: 0 10px; }
/* Review E3c (Andy 03.11.2026): der gewaehlte Monat sieht aus wie jede Auswahl aus B6: gruene Flaeche, dunkle Schrift,
   vorne ein Haken. Die Werte hinter den Variablen gelten, solange B6 noch nicht da ist. */
.monats-wahl a { border: 2px solid transparent; }
/* E3a: die Teile einer Kostenzeile stehen nebeneinander und brechen nur zwischen den Teilen um */
.eintrag-text [data-teil] { display: inline; white-space: nowrap; }
.monats-wahl a[aria-current="page"] { background: var(--an-grund, #D3F5E6); border-color: var(--an-rand, var(--gruen-text));
  color: var(--an-schrift, #06301F); box-shadow: none; font-weight: 700; }
.monats-wahl a[aria-current="page"]::before { content: "\2713"; font-weight: 800; color: var(--an-rand, var(--gruen-text)); }
.kosten-betrag { flex: none; color: var(--titel); font-size: 1rem; }
/* Zahlen-Kacheln der Administration: zwei Spalten (die Regel fuer die dreispaltigen Zahlen gilt nur dort) */
.zahlen:has(> .zahl) { grid-template-columns: 1fr 1fr; }
.zahl strong { white-space: nowrap; }
/* Lebensstationen (Andy 28.10.2026) */
.kategorie-wahl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.kategorie-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 22px;
  background: var(--lila-hell); color: var(--lila); font-weight: 600; font-size: .88rem; text-decoration: none; }
.kategorie-chip .symbol { width: 18px; height: 18px; }
.kategorie-chip small { color: var(--text-leise); font-weight: 400; }
.kategorie-chip.an { background: var(--lila); color: #fff; }
.kategorie-chip.an small { color: rgba(255,255,255,.8); }
.zeitleiste-liste { list-style: none; margin: 16px 0 0; padding: 0 0 0 14px; border-left: 3px solid var(--lila-hell); }
.station-karte { position: relative; background: var(--karte); border: 1px solid var(--rahmen); border-radius: var(--rund);
  box-shadow: var(--schatten); margin: 0 0 12px 8px; }
.station-karte::before { content: ""; position: absolute; left: -29px; top: 26px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--lila); border: 3px solid var(--hintergrund, #fff); }
.station-link { display: flex; align-items: center; gap: 12px; padding: 14px var(--a2); color: var(--titel); text-decoration: none; }
.station-link .eintrag-text { flex: 1; min-width: 0; }
.station-link .eintrag-text strong { display: block; overflow-wrap: anywhere; }
.station-link .eintrag-text span { display: block; color: var(--text-leise); font-size: .85rem; margin-top: 2px; }
.station-erzaehlen { padding: 0 var(--a2) 14px; }
.station-erzaehlen .knopf { width: 100%; }
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ort-zeile { display: grid; grid-template-columns: 1fr 96px; gap: 8px; margin-bottom: 10px; }
.ort-zeile select { grid-column: 1 / -1; }
.station-orte { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: var(--titel); }
.station-orte .symbol { color: var(--lila); }
.station-notizen { white-space: pre-line; margin: 10px 0 0; color: var(--text); }
.vorschlag-zeile { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 0; border-top: 1px solid var(--rahmen); }
.vorschlag-zeile input { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.vorschlag-zeile span { overflow-wrap: anywhere; }
.geschichte-text { font-weight: 500; overflow-wrap: anywhere; }
.medien-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 12px; }
.medium { position: relative; margin: 0; border-radius: var(--rund-klein); overflow: hidden; background: var(--lila-hell); aspect-ratio: 1; }
.medium img, .medium video { width: 100%; height: 100%; object-fit: cover; display: block; }
.medium form { position: absolute; top: 6px; right: 6px; }
.medium-weg { background: rgba(255,255,255,.9); }
.vorschlag-karte .oberzeile { display: flex; align-items: center; gap: 6px; }
/* Zukunft (Andy 28.10.2026) */
.zukunft-karte + .zukunft-karte { margin-top: 12px; }
.zukunft-karte summary .eintrag-text .marke-klein { display: inline-flex; margin-top: 4px; }
.zukunft-konzept { margin: 12px 0 0; }
.zukunft-konzept dt { font-weight: 700; color: var(--titel); margin-top: 10px; font-size: .9rem; }
.zukunft-konzept dd { margin: 4px 0 0; color: var(--text); line-height: 1.5; }
/* Nachtrag 51: "Schon da" klein unter den Plaenen, ein Haken je Eintrag, aufklappbar */
.zukunft-schon-da { border-top: 1px solid var(--rahmen); }
.zukunft-erreicht { border-bottom: 1px solid var(--rahmen); }
.zukunft-erreicht summary { display: flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; list-style: none;
  font-size: .92rem; }
.zukunft-erreicht summary::-webkit-details-marker { display: none; }
.zukunft-erreicht summary .symbol { width: 18px; height: 18px; flex: none; color: var(--gruen-text); }
.zukunft-erreicht summary .pfeil-runter { color: var(--text-leise); margin-left: auto; }
.zukunft-erreicht summary .eintrag-text strong { font-weight: 600; color: var(--titel); }
.zukunft-erreicht .zukunft-konzept { margin: 0 0 12px 28px; font-size: .9rem; }
/* Video zu einer Antwort (Andy 28.10.2026) */
.antwort-video { display: block; width: 100%; max-height: 70vh; margin-top: 10px; border-radius: var(--rund-klein); background: #000; }
.sprung { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 6px 0; min-height: 44px; font: inherit; color: inherit; cursor: pointer; }
/* Zwei runde Knoepfe: Mikrofon und Kamera (Andy 28.10.2026) */
.dock-knoepfe { display: flex; align-items: center; justify-content: center; gap: 16px; }
.dock-kamera { background: linear-gradient(160deg, #8B5CF6, #5B21B6); box-shadow: 0 0 0 8px var(--lila-hell), 0 10px 24px rgba(91,33,182,.35); }
@media (max-width: 360px) { .dock-knoepfe { gap: 10px; } .dock-knoepfe .dock-mikro { width: 64px; height: 64px; } }
/* Video im Hochformat 9:16 mit Hilfslinien fuer Quadrat und 16:9 */
.video-rahmen { position: relative; width: min(100%, calc(46vh * 9 / 16)); aspect-ratio: 9 / 16; margin: 0 auto 8px;
  border-radius: var(--rund-klein); overflow: hidden; background: #000; }
.video-vorschau { display: block; width: 100%; height: 100%; }
.hilfslinie { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); border-top: 1px solid rgba(255,255,255,.55);
  border-bottom: 1px solid rgba(255,255,255,.55); pointer-events: none; }
.quadrat-linie { aspect-ratio: 1 / 1; }
.breit-linie { aspect-ratio: 16 / 9; border-style: dashed; }
.hilfslinie small { position: absolute; left: 6px; top: 4px; color: rgba(255,255,255,.8); font-size: .65rem; font-weight: 700; }
.breit-linie small { top: auto; bottom: 4px; }
.kamera-drehen { position: absolute; right: 8px; bottom: 8px; width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: rgba(0,0,0,.5); color: #fff; display: grid; place-items: center; }
.kamera-drehen .symbol { width: 22px; height: 22px; }
/* Selfie-Kamera: die Vorschau wie ein Spiegel, die Aufnahme bleibt richtig herum */
.video-vorschau.gespiegelt { transform: scaleX(-1); }
/* Sammlungen: Einordnen ueber den ganzen Bildschirm (Andy 28.10.2026) */
.einordnen { min-height: calc(100vh - 80px); display: flex; flex-direction: column; }
.einordnen-kopf { display: flex; align-items: center; gap: 8px; padding: 10px 0 6px; }
.einordnen-text { margin: 8px 0 18px; padding: 16px 18px; background: var(--karte); border-radius: var(--rund); border-left: 4px solid var(--lila);
  font-size: 1.05rem; line-height: 1.55; color: var(--titel); white-space: pre-line; overflow-wrap: anywhere; box-shadow: var(--schatten); }
.einordnen-form { display: flex; flex-direction: column; flex: 1; }
.sammlung-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 18px; }
.sammlung-knopf { position: relative; display: inline-flex; }
.sammlung-knopf input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sammlung-knopf span { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 18px; border-radius: 24px;
  border: 2px solid var(--rahmen-feld); background: var(--karte); color: var(--titel); font-weight: 600; overflow-wrap: anywhere; }
.sammlung-knopf span .symbol { width: 16px; height: 16px; color: var(--lila); }
.sammlung-knopf input:checked + span { background: var(--lila); border-color: var(--lila); color: #fff; }
.sammlung-knopf input:checked + span .symbol { color: #fff; }
.sammlung-knopf input:checked + span::before { content: "\2713"; font-weight: 800; }
.sammlung-knopf input:focus-visible + span { outline: 3px solid var(--gruen); outline-offset: 2px; }
/* F9: widerspruechliche Angaben in "Bitte bestaetigen" */
.bb-widerspruch { border-left: 4px solid var(--hinweis); }
.bb-wert { padding: 10px 0; border-top: 1px solid var(--rahmen); }
.bb-wert p { margin: 0 0 8px; overflow-wrap: anywhere; }
/* P7b: Freigabe als Auswahl, kleine Antipp-Knoepfe in einer Zeile */
.freigabe-wahl { margin: 8px 0 14px; }
.einordnen-knoepfe { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; }
.sammlung-eintrag > summary { list-style: none; cursor: pointer; }
.sammlung-eintrag > summary::-webkit-details-marker { display: none; }
.sammlung-aktionen { display: flex; flex-direction: column; gap: 10px; padding: 0 0 14px; }
.blase-video { display: block; width: 100%; max-height: 60vh; margin-top: 8px; border-radius: 12px; background: #000; }
a.gs-chip { min-height: 44px; text-decoration: none; }
.mensch-frage { border: 0; padding: 0; margin: 0 0 6px; }
.mensch-frage legend { font-weight: 600; color: var(--titel); margin-bottom: 4px; }
/* Offene Faeden zum Antippen (Andy 28.10.2026) */
.faden-zeile { font-weight: 400; line-height: 1.45; }
.faden-zeile span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* Wer darf diesen Abschnitt hoeren? Unter jeder Antwort (Andy 28.10.2026) */
.abschnitt-stufe { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 10px; border: 1px solid currentColor;
  border-radius: 999px; background: none; font: inherit; font-size: .78rem; color: inherit; opacity: .85; cursor: pointer; }
.abschnitt-stufe .symbol { width: 16px; height: 16px; }
.abschnitt-stufe.eigen { opacity: 1; font-weight: 700; }
.blase-ich .fuss { flex-wrap: wrap; row-gap: 4px; }
/* Warten auf das Zerlegen direkt nach dem Erzaehlen */
.lade-kreis { display: inline-block; width: 36px; height: 36px; border-radius: 50%; border: 4px solid var(--rahmen);
  border-top-color: var(--lila); animation: drehen 1s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lade-kreis { animation: none; } }
/* Gerade gesagt: bleibt im Blick, mit Haken (Andy 28.10.2026) */
.blase-ich.frisch { box-shadow: 0 0 0 3px var(--lila); }
.frisch-marke { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.frisch-marke .symbol { width: 16px; height: 16px; }
/* Zuletzt erzaehlt und Herkunft der Faeden */
.vorschau { font-style: italic; }
.faden-herkunft { display: block; font-size: .78rem; color: var(--text-leise); margin: -4px 0 8px 38px; }
/* Fotos von Personen: rund, klein in Listen, groesser auf der Personenseite */
.person-foto { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; display: block; }
.person-foto-leer { background: var(--lila-hell); color: var(--lila); display: inline-flex; align-items: center;
  justify-content: center; }
.person-kopf { display: flex; align-items: center; gap: var(--a2); margin-bottom: 16px; }
.person-kopf .person-foto { width: 96px; height: 96px; }
.person-kopf-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.person-kopf-text form { margin: 0; }
.person-kopf-text .knopf { min-height: 44px; }
.mini-foto { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; }
/* Nachtrag 47: Stand einer Person am Zeichen. Gruen hell, roetlich gedaempft und dunkler; mit Foto ein feiner Ring */
.mini-zeichen { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; flex: none; font-style: normal; }
.kachel-zeichen.person-stand-ok, .mini-zeichen.person-stand-ok { background: #E3F7EE; color: var(--gruen-text); }
.kachel-zeichen.person-stand-offen, .mini-zeichen.person-stand-offen { background: #F4C9D6; color: #9C3D63; }
.sammlung-knopf span .mini-zeichen.person-stand-ok .symbol { color: var(--gruen-text); }
.sammlung-knopf span .mini-zeichen.person-stand-offen .symbol { color: #9C3D63; }
img.person-stand-ok { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #4CC08E; }
img.person-stand-offen { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #B0506D; }
/* Tipp auf eine rosa Person springt zum fehlenden Feld; die Ueberschrift des Feldes bleibt sichtbar */
#f-kennen, #f-seit { scroll-margin-top: 96px; }
/* Nachtrag 48 und 50: dieselben Farben fuer Orte, Listen und die Kacheln unter "Brain befuettern"; ohne Eintrag
   bleibt das Zeichen neutral blau. Der Stand steht klein im Untertitel, die Kachel wird nicht hoeher. */
.kachel-zeichen.stand-leer { background: var(--hinweis-hell); color: var(--hinweis); }
#f-art, #f-bedeutung, #f-von, #f-jahr, #f-name { scroll-margin-top: 96px; }
.ort-wann { border: 0; padding: 0; margin: 0; }
.eintrag .kachel-zeichen.klein-zeichen, .station-link .kachel-zeichen.klein-zeichen { flex: none; }
/* Ereignisse nach Jahr */
.jahr-kopf { font-weight: 800; font-size: 1.1rem; color: var(--titel); margin: 20px 0 8px; font-variant-numeric: tabular-nums; }
.ev-neu { display: grid; grid-template-columns: 112px 1fr; gap: 8px 12px; align-items: end; }
.ev-neu .breit-feld { grid-column: 1 / -1; }
.ev-neu label { display: block; }
/* Passt: der Rest unter "Weitere anzeigen"; im Gespraech ein klarer "Fertig"-Knopf (Andy 28.10.2026) */
.weitere { margin: 4px 0 8px; }
.weitere > summary { list-style: none; min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; }
.weitere > summary::-webkit-details-marker { display: none; }
.weitere[open] > summary { margin-bottom: 8px; }
a.gs-chip.gs-fertig { background: linear-gradient(135deg, var(--gruen-hell), var(--gruen)); border-color: transparent;
  color: var(--gruen-schrift); font-weight: 800; }

/* Brain befragen, Spiegel, Vorlesen (Modul 5) */
.fr-reiter { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: var(--a3) 0 12px; }
.fr-reiter a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 999px;
  border: 1.5px solid var(--rahmen); background: var(--karte); color: var(--titel); font-weight: 700; text-decoration: none; }
.fr-reiter a .symbol { width: 20px; height: 20px; }
.fr-reiter a[aria-current="page"] { border-color: var(--lila); background: var(--lila-hell); color: var(--lila); }
.fr-erklaer { color: var(--text); margin: 12px 0 16px; }
.band + .seite > main > .fr-erklaer:first-child { margin-top: var(--a3); }
.fr-liste { margin: 8px 0 16px !important; }
.fr-antwort { max-width: 92%; font-weight: 500; }
.fr-antwort.fr-neu { border: 2px solid var(--lila); scroll-margin-top: 80px; }
.fr-text { margin: 0; white-space: pre-line; }
.fr-weitergabe { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: .88rem; color: var(--text-leise); font-weight: 600; }
.fr-weitergabe .symbol { width: 16px; height: 16px; flex: none; }
.fr-leise { display: flex; align-items: flex-start; gap: 6px; font-size: .82rem; color: var(--text-leise); font-weight: 500; margin: 8px 0 0; }
.fr-leise .symbol { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.fr-ergaenzung { margin-top: 10px; padding: 10px 12px; border-radius: 14px; border: 1.5px dashed var(--hinweis); background: var(--hinweis-hell); font-weight: 500; }
.fr-ergaenzung p { margin: 4px 0 0; }
/* Nachtrag 52: Vermutung von SESTOS im Satz, Gewichtung klein mit Info-Zeichen */
.fr-vermutung { font-style: italic; }
.fr-anteil { margin: 0; font-size: .8rem; color: var(--text-leise); font-weight: 600; }
.fr-anteil summary { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; list-style: none; min-height: 44px; }
.fr-anteil summary::-webkit-details-marker { display: none; }
.fr-anteil-i { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; border-radius: 50%;
  border: 1px solid currentColor; font-size: .6rem; font-weight: 800; font-style: normal; line-height: 1; }
.fr-anteil p { margin: 4px 0 0; font-weight: 500; }
/* F1.2: Gewichtung und "wohin geht die Frage" in einer kleinen Zeile unter der Antwort */
.fr-unterzeile { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; }
.fr-unterzeile .fr-anteil[open] { flex-basis: 100%; }
.fr-hinweis-klein { font-size: .78rem; color: var(--text-leise); font-weight: 600; font-style: normal; }
.bb-ki { border-left: 3px dashed var(--hinweis); padding-left: 8px; }
.fr-ergaenzung-titel { display: flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--hinweis); }
.fr-ergaenzung-titel .symbol { width: 16px; height: 16px; }
/* Stufe 2a: in der Pruef-Ansicht der Tuer ist der ergaenzte Satz markiert (E38) */
.aus-ergaenzt { background: var(--hinweis-hell); color: inherit; border-bottom: 1.5px dashed var(--hinweis); padding: 0 2px; }
.aus-ergaenzt .symbol { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }
.fr-fuss { margin-top: 10px; }
.fr-vorlesen { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px;
  border: 1.5px solid var(--lila); background: #fff; color: var(--lila); font: inherit; font-weight: 700; font-size: .9rem; }
.fr-vorlesen .symbol { width: 20px; height: 20px; }
.fr-vorlesen.spielt { background: var(--lila); color: #fff; }
.fr-stimme-hinweis { margin: 8px 0 0; font-size: .85rem; color: var(--fehler); font-weight: 600; }
.fr-pruef { margin-top: 10px; border-top: 1px solid var(--rahmen); padding-top: 4px; font-weight: 500; }
.fr-pruef summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; color: var(--lila); font-weight: 700; font-size: .9rem; }
.fr-pruef summary .symbol { width: 18px; height: 18px; }
.fr-pruef ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fr-pruef li a { color: var(--titel); display: block; min-height: 44px; font-size: .9rem; }
.fr-pruef-marken { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.fr-notiz { margin-top: 12px; border-top: 1px solid var(--rahmen); padding-top: 4px; font-weight: 500; }
.fr-notiz summary { display: flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; color: var(--lila); font-weight: 700; }
.fr-notiz summary .symbol { width: 18px; height: 18px; flex: none; }
.fr-notiz textarea { width: 100%; }
.fr-notiz-da { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; color: var(--gruen-text); font-weight: 700; font-size: .9rem; }
.fr-notiz-da .symbol { width: 18px; height: 18px; }
.fr-form { margin-top: 8px; }
.fr-form textarea, .fr-form input[type=text] { width: 100%; }
.fr-form.denkt textarea { opacity: .6; }
.fr-knoepfe { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 12px; }
.fr-knoepfe .knopf { min-height: 56px; }
.fr-mikro { display: inline-flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 18px 0 14px; border-radius: 999px; border: none;
  color: #fff; font: inherit; font-weight: 700; background: linear-gradient(160deg, #FFB45C, #FF6B4A); }
.fr-mikro .symbol { width: 24px; height: 24px; }
.fr-mikro.laeuft { background: var(--fehler); }
.fr-mikro[hidden] { display: none; }
.fr-knoepfe:has(.fr-mikro[hidden]) { grid-template-columns: 1fr; }
.fr-zustand { min-height: 1.4em; margin: 8px 0 0; color: var(--text-leise); font-size: .9rem; text-align: center; }
.fr-leer p { display: flex; align-items: flex-start; gap: 8px; margin: 0; }
.fr-leer .symbol { width: 20px; height: 20px; flex: none; color: var(--lila); }
.fr-mehr { display: flex; flex-direction: column; gap: 0; margin-top: var(--a4); }
.fr-mehr .link-knopf { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; }
.fr-mehr .link-knopf .symbol { width: 18px; height: 18px; }
.fr-damals { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fr-damals-eintrag p { margin: 6px 0 0; white-space: pre-line; }
.fr-spiegel-notiz { border-style: dashed; border-color: var(--lila); }
.fr-jahre { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fr-jahr { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 14px; border-radius: 16px; background: var(--karte);
  border: 1.5px solid var(--rahmen); color: var(--titel); text-decoration: none; }
.fr-jahr strong { font-size: 1.15rem; min-width: 3.2em; }
.fr-jahr span { color: var(--text-leise); margin-right: auto; }
.fr-jahr.an { border-color: var(--lila); background: var(--lila-hell); }
.fr-jahr-liste { list-style: none; margin: 8px 0 4px 12px; padding: 0 0 0 12px; border-left: 2px solid var(--lila-hell); display: flex; flex-direction: column; gap: 6px; }
.fr-jahr-liste a { display: block; min-height: 44px; color: var(--titel); font-size: .92rem; }
.fr-luecke { display: flex; align-items: center; gap: 8px; padding: 6px 14px; color: var(--text-leise); font-size: .9rem; border-left: 2px dashed var(--rahmen); margin-left: 12px; }
.fr-luecke .symbol { width: 16px; height: 16px; flex: none; }
.stimme-zeile { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 0; color: var(--titel); }
.stimme-zeile .symbol { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--gruen-text); }
.stimme-problem, .stimme-problem .symbol { color: var(--fehler); }
.stimme-liste { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.stimme-wahl { min-height: 56px; }
/* Review F-D3a (Andy 03.11.2026, farbenblind): die gewaehlte Stimme (und der gewaehlte Ersatz) sehen aus wie jede
   Auswahl aus B6: gruene Flaeche, dunkle Schrift, vorne ein Haken; die lila Ecken-Plakette entfaellt. Die Farben kommen
   aus B6 (--an-grund, --an-rand, --an-schrift), die Werte dahinter gelten, solange B6 noch nicht da ist. */
[data-feld="stimme-wahl"] .wahl-radio:has(input:checked), [data-feld="rueckfall"] .wahl-radio:has(input:checked),
[data-feld="eb-wahl"] .wahl-radio:has(input:checked), [data-feld="eb-art"] .wahl-radio:has(input:checked) {
  background: var(--an-grund, #D3F5E6); border-color: var(--an-rand, var(--gruen-text)); color: var(--an-schrift, #06301F); }
[data-feld="stimme-wahl"] .wahl-radio:has(input:checked) .symbol,
[data-feld="rueckfall"] .wahl-radio:has(input:checked) .symbol,
[data-feld="eb-wahl"] .wahl-radio:has(input:checked) .symbol, [data-feld="eb-art"] .wahl-radio:has(input:checked) .symbol { color: var(--an-schrift, #06301F); }
[data-feld="stimme-wahl"] .wahl-radio:has(input:checked)::before, [data-feld="rueckfall"] .wahl-radio:has(input:checked)::before,
[data-feld="eb-wahl"] .wahl-radio:has(input:checked)::before, [data-feld="eb-art"] .wahl-radio:has(input:checked)::before {
  content: "\2713"; flex: none; font-weight: 800; color: var(--an-rand, var(--gruen-text)); margin-right: 2px; }
[data-feld="stimme-wahl"] .wahl-radio:has(input:checked)::after,
[data-feld="rueckfall"] .wahl-radio:has(input:checked)::after,
[data-feld="eb-wahl"] .wahl-radio:has(input:checked)::after, [data-feld="eb-art"] .wahl-radio:has(input:checked)::after { content: none; }
/* Mit dem Haken vorne passt "Stimme des Geraets" nicht mehr in eine halbe Breite: die beiden stehen untereinander wie
   die Stimmen darueber */
[data-feld="rueckfall"] .wahl-raster { grid-template-columns: 1fr; gap: 10px; }
[data-feld="rueckfall"] .wahl { min-height: 56px; }
/* F-D3b: "Andere Stimme waehlen" klappt auf und sieht nicht aus wie eine Stimme (Pruefer 03.11.): gestrichelter Rahmen
   ohne Flaeche, Stift statt Person, lila Schrift; offen zeigt der Pfeil nach oben, die Stimmen stehen abgesetzt darunter */
.stimme-andere { margin-top: 10px; }
.stimme-andere > summary { min-height: 52px; padding: 0 12px; border: 2px dashed var(--lila);
  border-radius: var(--rund-klein); background: transparent; font-weight: 700; color: var(--lila); }
.stimme-andere > .stimme-liste { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rahmen); }
.stimme-andere > summary:focus-visible { outline: 3px solid var(--lila); outline-offset: 2px; }
.stimme-andere-titel { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.stimme-andere-titel .symbol { width: 20px; height: 20px; flex: none; }
.stimme-andere > summary .pfeil-runter { width: 18px; height: 18px; flex: none; }
.stimme-anleitung { margin: 8px 0 16px; padding-left: 1.3em; display: flex; flex-direction: column; gap: 8px; color: var(--text); }
.kind-fragen .kind-foto-gross { margin-top: 0; }
.fr-form-kind textarea { font-size: 1.15rem; }
.fr-form-kind .fr-mikro { min-height: 64px; font-size: 1.05rem; }
.wert-link { display: inline-flex; align-items: center; min-height: 44px; }

/* Nachbesserung nach Andys Blick (28.10.2026): Karten ueber dem Band, Sprechen untereinander, Abstaende */
.band + .seite > main > .fr-erklaer:first-child { margin-top: 0; background: var(--karte); border: 1px solid var(--rahmen);
  border-radius: var(--rund); padding: var(--a2); box-shadow: var(--schatten); position: relative; }
.oberzeile > .symbol { width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; }
.fr-form.karte { margin-top: 16px; }
.fr-senden { margin-top: 12px; min-height: 56px; }
.fr-sprechen[hidden] { display: none; }
.fr-oder { display: flex; align-items: center; gap: 12px; margin: 16px 0 8px; color: var(--text-leise); font-size: .85rem; }
.fr-oder::before, .fr-oder::after { content: ""; flex: 1; height: 1px; background: var(--rahmen); }
.fr-mikro { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; min-height: 0; padding: 4px 0;
  border: none; background: none; color: var(--titel); font: inherit; font-weight: 700; border-radius: 16px; }
.fr-mikro .fr-mikro-rund { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(160deg, #FFB45C, #FF6B4A); box-shadow: 0 0 0 7px #FFE9DC, 0 10px 24px rgba(255,107,74,.3); margin-top: 6px; }
.fr-mikro .fr-mikro-rund .symbol { width: 32px; height: 32px; }
.fr-mikro.laeuft { background: none; }
.fr-mikro.laeuft .fr-mikro-rund { background: var(--fehler); box-shadow: 0 0 0 7px var(--fehler-hell); }
.fr-form-kind .fr-mikro .fr-mikro-rund { width: 96px; height: 96px; }
.fr-form-kind .fr-mikro { min-height: 0; font-size: 1.05rem; }
.fr-reiter { position: relative; }
html:has(body.mit-leiste) { scroll-padding-bottom: 110px; } /* nichts verschwindet unter der unteren Leiste */

/* Testmodul und echte Fragen (Modul 6) */
.test-rolle { width: 100%; min-height: 52px; font: inherit; color: var(--titel); background: var(--karte); padding: 0 12px;
  border: 2px solid var(--rahmen-feld); border-radius: var(--rund-klein); }
.test-notiz-feld summary, .test-mehr summary { display: flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer;
  color: var(--lila); font-weight: 700; }
.test-notiz-feld summary .symbol, .test-mehr summary .symbol { width: 18px; height: 18px; flex: none; }
.test-notiz-feld textarea, .test-mehr textarea { width: 100%; }
.test-titel { font-size: 1.05rem; color: var(--titel); margin: var(--a4) 0 12px; }
.test-frage { margin-top: 12px; }
.test-frage.test-anders { border: 2px solid var(--key1); }
.test-anders-marke { color: #7A4A00; font-weight: 700; }
.test-marken { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.test-frage-text { margin: 10px 0 6px; font-weight: 700; color: var(--titel); }
.test-antwort { margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: var(--grund-lila); }
.test-antwort p { margin: 4px 0 0; white-space: pre-line; }
.test-antwort .fr-ergaenzung-titel { color: var(--lila); }
.test-bewertung { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.test-wahl { min-height: 48px; padding: 0 8px; justify-content: center; font: inherit; font-weight: 700; font-size: .9rem; }
.test-wahl .symbol { width: 18px; height: 18px; flex: none; }
.test-wahl[aria-pressed="true"]::after { display: none; }
.test-aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.test-aktionen .knopf, .test-aktionen form { width: 100%; }
.test-aktionen .knopf { min-height: 48px; padding: 0 10px; font-size: .9rem; }
.test-lauf-zeile { display: flex; align-items: center; gap: 10px; min-height: 52px; margin-bottom: 12px; color: var(--titel); }
.test-lauf-zeile span { margin-right: auto; }
.test-lauf-zeile .symbol { width: 20px; height: 20px; flex: none; }
.test-fortschritt { width: 100%; height: 12px; margin-top: 12px; }
.test-alt-neu { display: grid; gap: 8px; }
.test-alt { background: #F3F3F6; }
.test-verlauf-eintrag { margin-top: 16px; }
.test-verlauf-datum { display: flex; align-items: center; gap: 8px; color: var(--text-leise); font-size: .85rem; margin: 0 0 4px; }
.test-verlauf-datum .symbol { width: 16px; height: 16px; }
.test-vorschlag { margin-top: 12px; }
.ef-thema { display: block; margin-top: 12px; color: var(--titel); text-decoration: none; }
.ef-kopf { display: flex; align-items: flex-start; gap: 8px; }
.ef-name { font-size: 1.05rem; margin-right: auto; }
.ef-zahlen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ef-fertig { margin: 8px 0 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.fr-freigeben { margin-top: 6px; }
.fr-freigeben .link-knopf { border: none; background: none; padding: 0; color: var(--lila); font: inherit; font-size: .85rem;
  font-weight: 700; gap: 6px; text-align: left; }
.fr-freigeben .symbol { width: 16px; height: 16px; flex: none; }
.ef-thema .symbol, .ef-zahlen .symbol { width: 16px; height: 16px; }
.test-wahl span { white-space: nowrap; }
.ef-bereich small { display: flex; align-items: center; gap: 4px; font-weight: 500; font-size: .8rem; color: var(--text-leise); margin-top: 2px; }
.ef-bereich small .symbol { width: 14px; height: 14px; }
.ef-bereich > span { display: flex; flex-direction: column; }
.ef-reicht-nicht small { color: var(--fehler); }

/* Erinnerungen (Modul 7): Kacheln, Bildleiste unter Antworten, Hochladen mit Fortschritt, Brain-Bild rund */
.er-reihe { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; margin: 8px 0; }
.er-zeitleiste .er-kachel { width: 64px; height: 64px; border-radius: 10px; }
.er-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 var(--a2); }
.er-kachel { position: relative; display: block; flex: none; width: 92px; height: 92px; border-radius: 14px; overflow: hidden;
  background: var(--lila-hell); color: var(--lila); }
.er-raster .er-kachel { width: 100%; height: auto; aspect-ratio: 1; }
.er-kachel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.er-ohne { display: grid; place-items: center; width: 100%; height: 100%; }
.er-ohne .symbol { width: 34px; height: 34px; }
.er-spiel { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 4px;
  border-radius: 999px; background: rgba(29,29,58,.72); color: #fff; font-size: .8rem; font-weight: 700; }
.er-spiel .symbol { width: 14px; height: 14px; }
.er-leiste { margin: 10px 0 2px; }
.er-video { display: block; width: 100%; max-height: 70vh; border-radius: 14px; background: #000; margin: 8px 0; }
.er-audio { display: block; width: 100%; margin: 8px 0; }
.er-dok { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0; color: var(--lila); font-weight: 600;
  overflow-wrap: anywhere; }
.er-gross { margin: var(--a3) 0 12px; }
.er-gross img, .er-gross video { display: block; width: 100%; max-height: 75vh; object-fit: contain; border-radius: var(--rund);
  background: var(--nacht); }
.er-gross audio { width: 100%; }
.er-wer-sieht { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; color: var(--titel); font-weight: 600; }
.er-kontingent { margin: 12px 0 var(--a2); }
.er-balken { display: block; height: 8px; border-radius: 999px; background: var(--rahmen); overflow: hidden; }
.er-balken i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gruen-hell), var(--gruen)); }
.er-hoch, .er-oben { margin-top: calc(var(--a4) + 8px); }
.er-fortschritt { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 10px; }
.er-fortschritt li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; font-size: .9rem; }
.er-fortschritt .er-name { overflow-wrap: anywhere; color: var(--titel); }
.er-fortschritt .er-balken { grid-column: 1 / -1; }
.er-fortschritt .fertig .er-zahl { color: var(--gruen-text); font-weight: 700; }
.er-fortschritt .fehler .er-zahl { color: var(--fehler); grid-column: 1 / -1; }
.er-laedt label { opacity: .5; pointer-events: none; }
.er-platz { display: flex; gap: 6px; align-items: center; margin: 12px 0 0; }
.er-bild-form { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 12px; }
.er-bild-form .link-knopf { align-self: center; }
.er-vorschlag { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; }
.er-vorschlag + .er-vorschlag { border-top: 1px solid var(--rahmen); }
.er-vorschlag-text { flex: 1; min-width: 0; display: grid; gap: 6px; }
.er-wahl { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.er-korb { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; flex-wrap: wrap; }
.er-korb span { overflow-wrap: anywhere; min-width: 0; }
.er-geschichten .sammlung-knopf span { text-align: left; }
.er-spaeter { display: block; margin: 12px auto 0; text-align: center; }
.er-sitzung { margin: calc(var(--a4) + 8px) 0 12px; }
.er-kind .kind-mikro { margin: var(--a3) auto; }
.kind-fertig { display: flex; align-items: center; justify-content: center; min-height: 48px; margin: var(--a2) 0;
  color: var(--text-leise); font-weight: 600; }
img.kind-foto { object-fit: cover; padding: 0; }
.kachel-foto { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; border: 3px solid var(--lila-hell); }
.bb-jetzt { display: flex; align-items: center; gap: var(--a2); margin-top: calc(var(--a4) + 8px); }
.bb-rund { flex: none; }
.bb-zuschnitt { display: grid; gap: 10px; margin-top: 12px; }
.bb-flaeche { position: relative; width: min(100%, 300px); aspect-ratio: 1; margin: 0 auto; overflow: hidden; border-radius: 50%;
  touch-action: none; cursor: grab; background: var(--nacht); box-shadow: 0 0 0 4px var(--lila-hell); }
.bb-flaeche img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; user-select: none; pointer-events: none; }
#bb-zoom { width: 100%; }

/* Modul 8: Familie und fremde Brains */
.fa-tag { display: grid; gap: 12px; }
.fa-tag-text { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: var(--titel); font-weight: 600; }
.fa-tag-text .symbol { flex: none; margin-top: 2px; }
.fa-tag form { display: grid; gap: 8px; }
.fa-tag form p { margin: 0; text-align: center; }
.fa-gruppe-titel { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 1.05rem; color: var(--titel); }
.fa-eintraege { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.fa-eintraege li { display: grid; gap: 4px; padding: 10px 0; overflow-wrap: anywhere; }
.fa-eintraege li + li { border-top: 1px solid var(--rahmen); }
.fa-eintraege p { margin: 0; color: var(--text); }
.fa-eintraege a { color: var(--titel); text-decoration: none; }
.fa-meine { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.fa-meine li { display: grid; gap: 4px; overflow-wrap: anywhere; }
.fa-beitrag { display: grid; gap: 10px; }
.fa-beitrag .oberzeile { margin: 0; }
.fa-original summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--text-leise); font-size: .9rem; }
.fa-original p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 0; }
.fa-person { border: 1px solid var(--rahmen); border-radius: var(--rund-klein); padding: 8px 12px 4px; margin: 0 0 12px; min-width: 0; }
.fa-person legend { padding: 0 6px; font-weight: 700; color: var(--titel); overflow-wrap: anywhere; }

/* Etwas, das sich bewegt, solange SESTOS arbeitet (Andy 29.10.2026): ueberall dieselben drei Punkte.
   Mit "Bewegung reduzieren" stehen sie still, der Text bleibt. */
.ki-wartet { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--titel); font-weight: 600; }
.ki-punkte { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.ki-punkte i { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--lila);
  animation: ki-puls 1.2s ease-in-out infinite; }
.ki-punkte i:nth-child(2) { animation-delay: .2s; }
.ki-punkte i:nth-child(3) { animation-delay: .4s; }
@keyframes ki-puls { 0%, 80%, 100% { transform: scale(.55); opacity: .35; } 40% { transform: scale(1); opacity: 1; } }
.knopf.wartet { cursor: progress; opacity: 1; filter: saturate(.7); }
.knopf.wartet .symbol { animation: ki-puls 1.2s ease-in-out infinite; }
.warten-seite .ki-punkte { margin: 8px auto; }
.warten-seite .ki-punkte i { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) {
  .ki-punkte i, .knopf.wartet .symbol { animation: none; opacity: .8; transform: none; }
}

/* Modul 10: groessere Schrift (Einstellungen -> Geraete). Alles ist in rem gesetzt und waechst mit. */
:root.schrift-gross { font-size: 118.75%; } /* 19 px bei Standardschrift, gut ein Achtel groesser */
.wa-zeile { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; overflow-wrap: anywhere; }
.wa-zeile .symbol { flex: none; }
.wa-schritte { margin: 8px 0 0; padding-left: 1.2em; color: var(--text); }
.wa-schritte li { margin: 4px 0; }
/* SESTOS als App anbieten (Startseite, nur am Handy im Browser) */
.app-angebot { margin-top: 16px; }


/* Kacheln zum Einrichten (Nachtrag 45, Andy 30.10.2026: "Das Icon, nicht die ganze Flaeche ... Dezent. Apple-Prinzip."):
   nur das Zeichen links ist hinterlegt. Keine Zusatzzeile; der Zustand steht fuer Vorleseprogramme unsichtbar im Text. */
.kachel.einrichten.offen .kachel-zeichen { background: var(--hinweis-hell); color: var(--hinweis); }
.kachel.einrichten.ok .kachel-zeichen { background: #E6F8F0; color: var(--gruen-text); }
/* Nachtrag 50: eine Signalfarbe fuer ganz SESTOS. Blau neutral, Gruen erledigt, zart Rosa Handlungsbedarf (statt Orange) */
.kachel.einrichten.problem .kachel-zeichen { background: #F4C9D6; color: #9C3D63; }
.kachel-text .kachel-unter { display: grid; margin-top: 4px; }
.kachel-text .kachel-unter > span { grid-area: 1 / 1; margin-top: 0; }
.kachel-text .kachel-platz { visibility: hidden; }
.kachel-text .kachel-hinweis { color: #8A3357; }
/* Zustand in Kartentiteln und Angaben: ein kleines, leicht hinterlegtes Zeichen, keine eigene Zeile */
.zustand-marke { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex: none; }
.zustand-marke .symbol { width: 16px; height: 16px; }
.zustand-marke.offen { background: var(--hinweis-hell); color: var(--hinweis); }
.zustand-marke.ok { background: #E6F8F0; color: var(--gruen-text); }
.zustand-marke.problem { background: #F4C9D6; color: #8A3357; } /* B11: 5,3 zu 1 */
.karte-titel .zustand-marke { margin: 0 0 0 auto; }
.zustand-marke.mit-text { display: inline-flex; align-items: center; width: auto; padding: 0 10px; border-radius: 14px; gap: 4px; font-size: .8rem; font-weight: 700;
  white-space: nowrap; }
.meldung p a { display: inline-flex; align-items: center; min-height: 44px; }

.uebersetzungen { margin-top: 8px; }
.uebersetzungen summary { display: flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; color: var(--text-leise); font-size: .9rem; }
.uebersetzungen textarea, .uebersetzungen input { margin-bottom: 8px; }


/* Stufe 2a, Produkte (P1): Seiten, Preis und Bedingungen */
.seite-zeile { border-bottom: none; }
.seite-aktionen { padding: 0 0 12px 58px; border-bottom: 1px solid var(--rahmen); }
.seite-aktionen:last-of-type { border-bottom: none; }
.seite-aktionen .knopf-reihe { margin-top: 8px; }
.angabe { padding: 14px 0; border-top: 1px solid var(--rahmen); }
.angabe:first-of-type { border-top: none; }
.angabe-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.angabe-kopf .zustand-marke { margin: 0; }
.angabe-wert { font-size: 1.15rem; font-weight: 700; color: var(--titel); margin: 6px 0 2px; overflow-wrap: anywhere; }
.angabe .knopf-reihe { margin-top: 10px; }
/* Stufe 2a, Produkt-Ampel (P2): Zeichen und Wort zu jeder Farbe, nie nur Farbe */
.ampel-zeile { border-top: 1px solid var(--rahmen); padding: 4px 0; }
.ampel-zeile:first-of-type { border-top: none; }
.ampel-kopf { display: flex; align-items: center; gap: 12px; min-height: 56px; color: inherit; text-decoration: none; }
.ampel-licht { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; }
.ampel-licht .symbol { width: 22px; height: 22px; }
.ampel-licht.gruen { background: #DDF5E6; color: #08714A; } /* B11: 5,3 zu 1 */
.ampel-licht.gelb { background: #FFF1C9; color: #7A5600; }
.ampel-licht.rot { background: #FDE2E0; color: var(--fehler); }
.ampel-text { flex: 1; min-width: 0; }
.ampel-text strong { display: block; color: var(--titel); overflow-wrap: anywhere; }
.ampel-wort { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; font-weight: 700; margin-top: 2px; }
.ampel-wort .symbol { width: 15px; height: 15px; }
.ampel-wort.gruen { color: var(--gruen-text); }
.ampel-wort.gelb { color: #7A5600; }
.ampel-wort.rot { color: var(--fehler); }
.ampel-fehlt { margin: 0 0 8px 52px; padding: 0; list-style: none; font-size: .88rem; color: var(--text-leise); }
.ampel-fehlt li { padding: 2px 0; }
.ampel-fehlt a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.ampel-klein { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.marke-klein.ampel-gruen { color: var(--gruen-text); }
.marke-klein.ampel-gelb { color: #7A5600; }
.marke-klein.ampel-rot { color: var(--fehler); }/* P8: eine Einordnen-Seite je Gespraech (Nachtrag 43 e) */
.aw-titel { font-size: 1.35rem; margin: 4px 0 4px; color: var(--titel); overflow-wrap: anywhere; }
.aw-erzaehlt { margin: 4px 0 14px; }
.aw-erzaehlt > summary { list-style: none; min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; }
.aw-erzaehlt > summary::-webkit-details-marker { display: none; }
.aw-abschnitt { padding: 10px 12px; margin: 6px 0; background: var(--karte); border-left: 4px solid var(--lila); border-radius: 12px; }
.aw-abschnitt p { margin: 0 0 4px; white-space: pre-line; overflow-wrap: anywhere; }
.aw-korrektur { margin: -10px 0 14px; }
.aw-korrektur > summary { list-style: none; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.aw-korrektur > summary::-webkit-details-marker { display: none; }
.aw-korrektur input { display: block; width: 100%; margin: 6px 0; }
.aw-ergaenzen-zeile { display: flex; gap: 8px; align-items: center; }
.aw-ergaenzen-zeile input { flex: 1; min-width: 0; }
.aw-mikro { flex: none; width: 48px; height: 48px; border-radius: 50%; border: none; color: #fff; display: inline-flex;
  align-items: center; justify-content: center; background: linear-gradient(160deg, #FFB45C, #FF6B4A); }
.aw-mikro .symbol { width: 22px; height: 22px; }
.aw-mikro.laeuft { background: var(--fehler); }
.aw-mikro[hidden] { display: none; }
.aw-zustand { min-height: 1.2em; margin: 4px 0 0; }
.aw-abweichend { margin: 0 0 14px; padding: 12px; border: 1.5px dashed var(--rahmen); border-radius: 16px; }
.aw-abweichend p { margin: 0 0 8px; overflow-wrap: anywhere; }
.aw-abweichend .feld-hilfe { display: flex; gap: 6px; align-items: flex-start; }
.aw-abweichend .feld-hilfe .symbol { width: 18px; height: 18px; flex: none; color: var(--lila); }
.er-ordnen { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.er-ordnen .gs-chip { min-height: 44px; text-decoration: none; }
.er-ordnen .gs-chip.an { background: var(--lila); border-color: var(--lila); color: #fff; }
/* F2.1: "Rueckgaengig" nach dem Loeschen; F2.2: wo das Uebernommene steht. Nachtrag 60 (keine Zeitgrenze): der Knopf
   bleibt stehen, bis man weitertippt; wie lange es geht, entscheidet der Server (einige Minuten) */
.bb-rueck { display: flex; align-items: center; justify-content: space-between; gap: var(--a2); flex-wrap: wrap; }
.bb-rueck span { overflow-wrap: anywhere; }
.bb-neu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--a2); }
/* F13 Zeitleiste (Andy 31.10.2026): Jahre als zugeklappte Karten, Geschichten als kleine Karten, Bilder gebuendelt */
.zl-jahre { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.zl-jahr { padding: 0; overflow: hidden; }
.zl-kopf { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px; cursor: pointer; list-style: none; }
.zl-kopf::-webkit-details-marker { display: none; }
.zl-zahl { font-size: 1.3rem; min-width: 3.2em; color: var(--titel); }
.zl-zaehler { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-right: auto; color: var(--text-leise); font-size: .88rem; }
.zl-zaehler > span { display: inline-flex; align-items: center; gap: 4px; }
.zl-zaehler .symbol { width: 16px; height: 16px; }
.zl-ungefaehr-marke { padding: 0 8px; border-radius: 999px; background: var(--lila-hell); color: var(--titel); }
.zl-jahr[open] .zl-kopf { border-bottom: 1px solid var(--rahmen); background: var(--lila-hell); }
.zl-jahr[open] .pfeil-runter { transform: rotate(180deg); }
.zl-jahr .er-zeitleiste { padding: 4px 14px 0; }
.zl-mehr { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 10px; background: var(--lila-hell);
  color: var(--titel); font-weight: 600; text-decoration: none; }
.zl-liste { list-style: none; margin: 0; padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.zl-eintrag { display: flex; align-items: flex-start; gap: 10px; min-height: 48px; padding: 10px 12px; border: 1px solid var(--rahmen);
  border-radius: 12px; background: var(--karte); color: var(--text); text-decoration: none; }
.zl-eintrag > .symbol { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--lila); }
.zl-eintrag > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zl-eintrag strong { color: var(--titel); font-size: .95rem; overflow-wrap: anywhere; }
.zl-eintrag small { color: var(--text-leise); font-size: .85rem; overflow-wrap: anywhere; }
.zl-ist-ungefaehr .zl-eintrag { border-style: dashed; }
.zl-jahr-frage { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 4px 0; }
.zl-jahr-frage form { margin: 0; }
.zl-jahr-anders { display: flex; gap: 6px; align-items: center; }
.zl-jahr-anders input { width: 5.5em; min-height: 44px; }

/* F16 (Andy 31.10.2026): Geraete mit Namen, Entfernen mit Rueckfrage */
.geraet { padding: 8px 0; border-bottom: 1px solid var(--rahmen); }
.geraet:last-child { border-bottom: 0; }
.geraet-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0 56px; }
.geraet-mehr > summary { list-style: none; cursor: pointer; padding: 0 14px; min-height: 44px; }
.geraet-mehr > summary::-webkit-details-marker { display: none; }
.geraet-mehr[open] { flex-basis: 100%; }
.geraet-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.geraet-form input[type=text] { flex: 1 1 180px; min-width: 0; }
@media (max-width: 480px) { .geraet-knoepfe { margin-left: 0; } }
.zl-tipp { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 12px; }
.zl-tipp p { margin: 0; flex: 1 1 220px; }

/* F12.1 (Andy 31.10.2026): Profilfoto klein und rund neben der Begruessung */
.band-profil { display: flex; align-items: center; gap: 14px; }
.band-profil h1 { margin: 0; min-width: 0; }
.profil-rund { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; display: grid;
  place-items: center; background: rgba(255, 255, 255, .16); border: 2px solid rgba(255, 255, 255, .7); color: #fff;
  font-weight: 800; font-size: 1.35rem; text-decoration: none; }
.profil-rund img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profil-rund:focus-visible { outline: 3px solid var(--gruen-leucht); outline-offset: 2px; }

/* F1.1 (Andy 31.10.2026): "Frage stellen" und "Spiegel" mittig auf der Kante zwischen Kopfband und heller Flaeche */
main > .fr-reiter:first-child { margin-top: -24px; position: relative; z-index: 2; }
main > .fr-reiter:first-child a { box-shadow: 0 4px 14px rgba(29, 29, 58, .14); }
main > .fr-reiter:first-child + .fr-erklaer { margin-top: 12px; }
/* F1.7: das Fragefeld fest unten wie bei WhatsApp, fruehere Fragen zugeklappt */
.fr-form.fr-fest { position: sticky; bottom: calc(var(--leiste-hoehe) + env(safe-area-inset-bottom) + 8px); z-index: 5;
  margin-top: 16px; padding: 10px 10px 6px; box-shadow: 0 -4px 22px rgba(29, 29, 58, .12); }
body:not(.mit-leiste) .fr-form.fr-fest { bottom: calc(env(safe-area-inset-bottom) + 8px); }
.fr-form.fr-fest .fr-zustand:empty { display: none; }
.fr-frueher { margin: 8px 0 12px; }
.fr-frueher > summary { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; cursor: pointer;
  color: var(--lila); font-weight: 700; list-style: none; }
.fr-frueher > summary::-webkit-details-marker { display: none; }
.fr-frueher[open] > summary { margin-bottom: 8px; }
.fr-antwort { scroll-margin-bottom: 170px; }
.fr-verfassung { margin: 0 0 8px; }
/* F10.6: Mikro und Senden im Feld */
.fr-zeile { display: flex; align-items: flex-end; gap: 8px; }
.fr-anonym { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; cursor: pointer; } /* Nachtrag 73 */
.fr-anonym input { width: 24px; height: 24px; margin: 0; accent-color: var(--lila); flex: none; }
.fr-zeile textarea { flex: 1 1 auto; min-width: 0; min-height: 48px; resize: none; max-height: 40vh; }
.fr-mikro-klein, .fr-senden-rund { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; border: none; display: grid;
  place-items: center; cursor: pointer; }
.fr-mikro-klein { background: var(--lila-hell); color: var(--lila); }
.fr-senden-rund { background: linear-gradient(180deg, var(--gruen-hell), var(--gruen)); color: var(--gruen-schrift); }
.fr-mikro-klein .symbol, .fr-senden-rund .symbol { width: 24px; height: 24px; }
.fr-mikro-klein[hidden] { display: none; }
.fr-senden-rund:disabled { opacity: .55; }
/* F10.4: die Aufnahme lebt sichtbar */
.fr-mikro-klein.laeuft { background: var(--fehler); color: #fff; animation: aufnahme-puls 1.2s ease-in-out infinite; }
.fr-mikro.laeuft .fr-mikro-rund { animation: aufnahme-puls 1.2s ease-in-out infinite; }
@keyframes aufnahme-puls { 0%, 100% { box-shadow: 0 0 0 0 var(--fehler-hell); } 50% { box-shadow: 0 0 0 12px var(--fehler-hell); } }
.fr-aufnahme { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; color: var(--fehler); font-weight: 700; }
.fr-aufnahme[hidden] { display: none; }
.fr-pegel { display: inline-flex; align-items: center; gap: 3px; height: 28px; }
.fr-pegel i { display: block; width: 4px; height: 6px; border-radius: 2px; background: var(--fehler); transition: height .08s linear; }
.fr-zeit { font-variant-numeric: tabular-nums; min-width: 3.2em; }
@media (prefers-reduced-motion: reduce) { .fr-mikro-klein.laeuft, .fr-mikro.laeuft .fr-mikro-rund { animation: none; } }
/* B4 (Andy 03.11.2026): die Eingabeleiste "Tippen oder sprechen ..." ist EIN abgerundetes Feld, kein Kasten im Kasten.
   Mikro und Senden sitzen innen rechts mit gleichem Abstand. Ueberall gleich: Brain befragen, Spiegel, Testmodul,
   Training, Einordnen, Botschaft. Der Fokus zeigt sich am ganzen Feld (lila Rand und Ring). */
.fr-zeile, .aw-ergaenzen-zeile { display: flex; align-items: flex-end; gap: 6px; padding: 4px 4px 4px 16px;
  border: 1.5px solid var(--rahmen); border-radius: 26px; background: var(--karte); }
.fr-zeile:focus-within, .aw-ergaenzen-zeile:focus-within { border-color: var(--lila); box-shadow: 0 0 0 3px var(--lila-hell); }
.fr-zeile textarea, .aw-ergaenzen-zeile textarea, .aw-ergaenzen-zeile input { flex: 1 1 auto; min-width: 0; margin: 0;
  border: none; border-radius: 0; background: transparent; box-shadow: none; min-height: 44px; padding: 10px 0;
  line-height: 1.5; }
.fr-zeile textarea, .aw-ergaenzen-zeile textarea { resize: none; max-height: 40vh; }
.fr-zeile textarea:focus, .aw-ergaenzen-zeile textarea:focus, .aw-ergaenzen-zeile input:focus { outline: none; border: none; }
.fr-mikro-klein, .fr-senden-rund, .aw-mikro { flex: 0 0 auto; width: 44px; height: 44px; margin: 0; border-radius: 50%;
  border: none; display: grid; place-items: center; cursor: pointer; }
.aw-mikro { background: var(--lila-hell); color: var(--lila); }
.aw-mikro.laeuft { background: var(--fehler); color: #fff; animation: aufnahme-puls 1.2s ease-in-out infinite; }
.fr-mikro-klein .symbol, .fr-senden-rund .symbol, .aw-mikro .symbol { width: 22px; height: 22px; }
.fr-mikro-klein[hidden], .aw-mikro[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .aw-mikro.laeuft { animation: none; } }
/* Das feste Fragefeld unten: nur die Leiste mit Schatten, ohne Karte drumherum */
.fr-form.fr-fest { background: transparent; border: none; box-shadow: none; padding: 0; }
.fr-form.fr-fest .fr-zeile { box-shadow: 0 6px 24px rgba(29, 29, 58, .16); }
.fr-form.fr-fest .fr-zeile:focus-within { box-shadow: 0 0 0 3px var(--lila-hell), 0 6px 24px rgba(29, 29, 58, .16); }
.fr-form.fr-fest .fr-aufnahme:not([hidden]), .fr-form.fr-fest .fr-zustand:not(:empty) { background: var(--karte);
  border-radius: 12px; padding: 4px 12px; margin: 6px auto 0; width: fit-content; max-width: 100%; }
/* F4.1/F6.1: ein Bild auf das Fotofeld ziehen */
.ziehen-ueber { outline: 3px dashed var(--lila); outline-offset: 4px; border-radius: var(--rund-klein); background: var(--lila-hell); }

/* --- Nachtrag 54: Botschaft an mich ------------------------------------------------------------- */
/* Der Nachrichten-Knopf auf der Startseite: Brief mit Punkt, wenn jetzt eine Botschaft dran ist */
.bo-knopf { display: flex; align-items: center; gap: 12px; margin-top: 12px; min-height: 64px; padding: 8px var(--a2);
  border-radius: 16px; background: var(--karte); border: 1px solid var(--rahmen); color: var(--titel); text-decoration: none; }
.bo-knopf-neu { border: 2px solid var(--lila); background: linear-gradient(135deg, #FFF 0%, var(--lila-hell) 100%); }
.bo-knopf-zeichen { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; background: var(--lila-hell); color: var(--lila); }
.bo-knopf-zeichen .symbol { width: 24px; height: 24px; }
.bo-punkt { position: absolute; top: -4px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--key2); border: 2px solid #FFF; color: #FFF; font-style: normal; font-size: .78rem; font-weight: 700;
  line-height: 16px; text-align: center; }
/* Rund im Band neben der Begruessung (Kopf schlank, 02.11.2026) */
.bo-rund { display: inline-flex; flex: none; text-decoration: none; border-radius: 50%; }
.bo-rund .bo-knopf-zeichen { border: 1px solid var(--rahmen); background: var(--karte); }
.bo-rund.bo-knopf-neu .bo-knopf-zeichen { background: var(--lila); color: #FFF; border-color: var(--lila);
  box-shadow: 0 6px 16px rgba(122, 43, 208, .35); }
.bo-rund:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }  /* Nachtrag 60 (B9) */
.bo-knopf-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bo-knopf-text span { font-size: .85rem; color: var(--text-leise); overflow-wrap: break-word; }
.bo-knopf-neu .bo-knopf-text span { color: var(--lila); font-weight: 700; }
/* "Deine Botschaft fuer Dich": ohne Skript steht sie auf der Seite, mit Skript oeffnet sie sich ueber allem */
.bo-dialog { position: static; display: block; width: auto; max-width: none; margin: 16px 0 0; padding: var(--a2);
  border: 2px solid var(--lila); border-radius: var(--rund); background: var(--karte); color: var(--text); }
.bo-dialog:not([open]) { display: none; }
.bo-dialog.bo-modal { position: fixed; margin: auto; width: min(92vw, 480px); max-height: 88vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(29, 29, 58, .35); }
.bo-dialog::backdrop { background: rgba(29, 29, 58, .55); }
.bo-dialog-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.bo-dialog-kopf h2 { flex: 1; min-width: 0; margin: 0; font-size: 1.2rem; color: var(--titel); }
.bo-dialog-zeichen { flex: none; display: inline-flex; color: var(--lila); }
.bo-dialog-zeichen .symbol { width: 32px; height: 32px; }
.bo-schliessen { min-height: 44px; padding: 0 12px; border: none; background: none; color: var(--lila); font: inherit;
  font-weight: 700; cursor: pointer; }
.bo-ueberschrift { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; color: var(--titel); margin: 0 0 12px; }
.bo-ueberschrift .symbol { color: var(--lila); }
.bo-karte { background: var(--grund-lila); border-radius: 16px; padding: var(--a2); }
.bo-karte + .bo-karte { margin-top: 12px; }
.bo-text { margin: 0 0 6px; font-size: 1.15rem; line-height: 1.45; color: var(--titel); font-weight: 600; overflow-wrap: break-word; white-space: pre-line; }
.bo-wann { margin: 0 0 8px; }
.bo-anhoeren { margin-bottom: 12px; }
.bo-anhoeren .fr-vorlesen { min-height: 44px; }
.bo-reaktion-frage { margin: 12px 0 8px; text-align: center; }
.bo-reaktionen { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.bo-reaktion { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--lila); background: var(--karte);
  color: var(--lila); font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; }
.bo-reaktion:hover, .bo-reaktion:focus-visible { background: var(--lila-hell); }
/* Liste */
.bo-eintrag-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; }
.eintrag-text .bo-stand { display: inline-block; margin-top: 4px; font-size: .78rem; font-weight: 700; color: var(--text-leise); }
.eintrag-text .bo-stand-jetzt { color: var(--lila); }
/* Formular: nur die passenden Felder zum gewaehlten "Wann" */
.bo-wann-wahl { grid-template-columns: 1fr 1fr 1fr; }
.bo-wann-wahl .wahl { justify-content: center; text-align: center; padding: 0 6px; font-size: .88rem; }
.bo-form:not(:has(input[name=wann][value=einmal]:checked)) .bo-nur-einmal { display: none; }
.bo-form:not(:has(input[name=wann][value=wochentage]:checked)) .bo-nur-tage { display: none; }
.bo-tage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.bo-tag { position: relative; display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 12px;
  border: 2px solid var(--rahmen-feld); background: var(--karte); font-weight: 700; font-size: .85rem; color: var(--titel); cursor: pointer; }
.bo-tag input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bo-tag:has(input:checked) { border-color: var(--lila); background: var(--lila); color: #FFF; }
.bo-tag:has(input:focus-visible) { outline: 3px solid var(--lila); outline-offset: 2px; }
.bo-text-zeile { align-items: flex-start; }
.bo-text-zeile textarea { flex: 1; min-width: 0; min-height: 96px; }
input[type="time"] { width: 100%; font: inherit; color: var(--titel); background: var(--karte); min-height: 52px;
  padding: 0 14px; border: 2px solid var(--rahmen-feld); border-radius: var(--rund-klein); }  /* Nachtrag 60 (B10) */

/* Nachtrag 60 (Barrierefreiheit Stufe 1) */
.sprung:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprung:focus { position: absolute; left: 8px; top: 8px; z-index: 100; max-width: calc(100% - 16px); background: var(--karte);
  color: var(--titel); padding: 12px 16px; border-radius: var(--rund-klein); font-weight: 700; }
.sprungziel:focus, .sprungziel:focus-visible { outline: none; box-shadow: none; }
.neu-laden { margin: var(--a2) 0; }
.fr-stimme-hinweis:empty { margin: 0; }

/* Nachtrag 53 Stufe 1: Produktaufbau. Drei Farben je Themenblock, immer mit Zeichen und Wort (Andy ist farbenblind).
   Rot (von der KI, noch nicht bestaetigt) ist weiss mit kraeftig rotem Rand und gestrichelter Kante, damit es nie wie
   das gefuellte Rosa der Einrichte-Hinweise aussieht. Blassgruen = bestaetigt, sattgruen (gefuellt) = selbst ergaenzt. */
a.karte.block-karte { display: block; color: inherit; text-decoration: none; }
.block-karte { border-left: 6px solid var(--rahmen); }
.block-karte.rot { border: 2px dashed #B71C1C; border-left: 6px dashed #B71C1C; }
.block-karte.blassgruen { border-left-color: #8FD3B4; }
.block-karte.sattgruen { border-left-color: #0A7F53; }
.block-karte.leer { border-left-color: var(--hinweis-hell); }
.block-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0; }
.block-vorschau { display: block; margin-top: 6px; overflow-wrap: anywhere; }
.block-abweichung { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: #B71C1C; font-weight: 700; }
.block-abweichung .symbol { width: 16px; height: 16px; flex: none; }
.block-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0; }
.block-marke { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; min-height: 28px; border-radius: 14px;
  font-size: .8rem; font-weight: 700; white-space: nowrap; border: 2px solid transparent; }
.block-marke .symbol { width: 16px; height: 16px; flex: none; }
.block-marke.rot { background: #fff; border-color: #B71C1C; color: #B71C1C; }
.block-marke.blassgruen { background: #E6F8F0; border-color: #8FD3B4; color: var(--gruen-text); }
.block-marke.sattgruen { background: #0A7F53; border-color: #0A7F53; color: #fff; }
.block-marke.leer { background: var(--hinweis-hell); color: var(--hinweis); }
#farb-legende { display: flex; flex-wrap: wrap; gap: 6px; }
.zustand-marke.abgelaufen { background: var(--rahmen); color: var(--text); }
[data-preis] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
@media (max-width: 420px) { .block-marke { white-space: normal; } }
/* Zwei Datumsfelder nebeneinander (Rabattcodes): nie breiter als die Karte, auf schmalen Handys untereinander */
.feld-paar > .feld { min-width: 0; }
.feld-paar input[type="date"] { min-width: 0; max-width: 100%; }
@media (max-width: 400px) { #code-neu .feld-paar { grid-template-columns: 1fr; gap: 0; } }

/* Nachtrag 61: Abschluss-Turbo (Stand, Heisse Kontakte, Angebote an der Tuer) */
.ab-zeile { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; overflow-wrap: anywhere; }
.ab-zeile .symbol { flex: none; margin-top: 2px; }
.ab-erreichbar { margin-top: 12px; border-top: 1px solid var(--rahmen); padding-top: 4px; }
.ab-erreichbar .knopf { margin-top: 12px; }
.ab-kontakt { padding: 12px 0; overflow-wrap: anywhere; }
.ab-kontakt + .ab-kontakt { border-top: 1px solid var(--rahmen); }
.ab-kopf { margin: 0; }
.ab-marken { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.ab-frage { margin: 6px 0; font-style: italic; }
.ab-ergebnis { margin-top: 8px; gap: 8px; }
.ab-ergebnis .knopf { flex: 1 1 auto; min-width: 0; }
.ab-nacht select { width: 100%; margin-bottom: 8px; }
.aus-angebot { margin-top: 10px; }
.aus-wa-hinweis { margin: 6px 0 0; }

/* Nachtrag 63: Hilfe und Tutorials an der richtigen Stelle */
.band-titel { display: flex; align-items: center; justify-content: center; gap: 10px; }
.band-links .band-titel { justify-content: flex-start; }
.band-titel h1 { min-width: 0; }
/* Stufe 2 (wie auf 5keys.me): das SESTOS-Icon an jeder Stelle, auch ohne Video */
.hilfe-zeichen { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,.55);
  background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.hilfe-zeichen img { width: 40px; height: 40px; border-radius: 50%; display: block; }
.hilfe-zeichen:hover, .hilfe-zeichen[aria-expanded="true"] { transform: scale(1.06); box-shadow: 0 0 0 3px rgba(28,217,145,.45); }
/* Im dunklen Band gruen (wie .profil-rund); das Gesicht unten liegt auf heller Seite: dort gilt der dunkle Ring (B9) */
.hilfe-zeichen:focus-visible { outline: 3px solid var(--gruen-leucht); outline-offset: 2px; }
.seite .hilfe-zeichen { border-color: var(--rahmen); }
.hilfe-zeichen-hervor { box-shadow: 0 0 0 4px var(--gruen-leucht); }
.hilfe-platz { flex: none; min-width: 44px; height: 44px; border: 2px dashed var(--gruen-leucht); border-radius: 18px;
  background: rgba(28,217,145,.12); color: inherit; font: inherit; font-weight: 700; font-size: .8rem; cursor: pointer; padding: 0 10px; }
.seite .hilfe-platz { border-color: var(--lila); color: var(--lila); }
/* Der allgemeine Hilfe-Knopf (Stufe 2, F3, Andy 03.11.2026: "Unten wie 5keys.me"): unten links, am Handy direkt ueber
   der Leiste. Die Seite bekommt unten so viel Platz, dass er nichts verdeckt. F-H1 (04.11.2026): Aussehen 1:1 wie
   .sestos-gen der Plattform (sestos-tutorials/assets/css/front.css 0.2.2): Gesicht, Fragezeichen, "Hier fragen". */
.sestos-gen{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:11;margin:0;padding:0 !important;border:0 !important;border-radius:0 !important;background:none !important;box-shadow:none !important;cursor:pointer;line-height:0;-webkit-tap-highlight-color:transparent;}
.sestos-gen{width:auto;height:auto;transition:bottom .2s ease;display:flex;flex-direction:column;align-items:center;gap:3px;}
.sestos-gen__fig{position:relative;display:block;width:56px;height:56px;}
.sestos-gen__img{display:block;width:56px;height:56px;object-fit:contain;transition:transform .12s ease,filter .12s ease;}
.sestos-gen:hover .sestos-gen__img{transform:scale(1.08);filter:drop-shadow(0 3px 6px rgba(18,43,70,.45));}
.sestos-gen:focus-visible{outline:none !important;}
.sestos-gen:focus-visible .sestos-gen__img{filter:drop-shadow(0 0 2px #122B46) drop-shadow(0 0 5px #E6CA96);}
.sestos-gen__q{position:absolute;top:-4px;right:-8px;width:22px;height:22px;border-radius:50%;background:#E6CA96;color:#122B46;border:2px solid #fff;font:700 13px/18px Poppins,system-ui,sans-serif;text-align:center;box-shadow:0 2px 6px rgba(18,43,70,.3);}
.sestos-gen__lbl{display:block;text-transform:none !important;letter-spacing:normal !important;padding:5px 11px;border-radius:999px;background:#122B46;color:#fff;font:600 12px/1.1 Poppins,system-ui,sans-serif;white-space:nowrap;box-shadow:0 3px 10px rgba(18,43,70,.3);transition:background .12s ease,color .12s ease;}
.sestos-gen:hover .sestos-gen__lbl,.sestos-gen:focus-visible .sestos-gen__lbl{background:#E6CA96;color:#122B46;}
.sestos-gen.is-waving .sestos-gen__img{animation:sestosWave 1.4s ease-in-out;transform-origin:50% 90%;}
.sestos-gen.is-waving .sestos-gen__q{animation:sestosHop 1.4s ease-in-out;}
@keyframes sestosWave{0%,100%{transform:rotate(0)}15%{transform:rotate(-12deg)}30%{transform:rotate(10deg)}45%{transform:rotate(-10deg)}60%{transform:rotate(8deg)}75%{transform:rotate(-4deg)}}
@keyframes sestosHop{0%,100%{transform:translateY(0) scale(1)}30%{transform:translateY(-6px) scale(1.15)}55%{transform:translateY(0) scale(1)}70%{transform:translateY(-3px) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.sestos-gen.is-waving .sestos-gen__img,.sestos-gen.is-waving .sestos-gen__q{animation:none;}.sestos-gen,.sestos-gen__img{transition:none;}}
@media (max-width:640px){.sestos-gen{left:12px;bottom:calc(12px + env(safe-area-inset-bottom));}.sestos-gen__fig,.sestos-gen__img{width:50px;height:50px;}.sestos-gen__lbl{font-size:11px;padding:4px 9px;}}
/* SESTOS: am Handy ueber der Leiste; solange das Fenster offen ist, ist der Knopf weg (wie .sestos-win-open dort) */
body.mit-leiste .sestos-gen{bottom:calc(var(--leiste-hoehe) + 12px + env(safe-area-inset-bottom));}
.ssup-open .sestos-gen{display:none;}

body.mit-hilfe .seite { padding-bottom: calc(84px + 16px + var(--a3)); }
body.mit-hilfe.mit-leiste .seite { padding-bottom: calc(var(--leiste-hoehe) + 84px + 12px + var(--a3)); }
/* am Handy ist der Knopf kleiner (50 px Gesicht, 11 px Schrift: 74 px hoch), so passt die Startseite weiter auf einen
   Bildschirm (m2) */
@media (max-width:640px) {
  body.mit-hilfe .seite { padding-bottom: calc(74px + 12px + var(--a3)); }
  body.mit-hilfe.mit-leiste .seite { padding-bottom: calc(var(--leiste-hoehe) + 74px + 12px + var(--a3)); }
}
html:has(body.mit-hilfe) { scroll-padding-bottom: 150px; }
.hilfe-blatt { max-height: 88vh; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain; }
/* Kopf wie das Support-Fenster der Plattform: SESTOS, Titel, wo Du bist */
.hilfe-kopf { display: flex; align-items: center; gap: 12px; background: var(--titel); color: #fff;
  margin: -4px -16px 12px; padding: 12px 16px; border-radius: 18px 18px 0 0; }
.hilfe-kopf-text { flex: 1; min-width: 0; }
.blatt .hilfe-kopf h2 { margin: 0; outline: none; color: #fff; }
.hilfe-gesicht { width: 44px; height: 44px; border-radius: 50%; background: #fff; flex: none; }
.hilfe-kopf .hilfe-ort { margin: 2px 0 0; font-size: .82rem; color: rgba(255,255,255,.82); }
.hilfe-kopf .hilfe-ort strong { color: #fff; }
.hilfe-kopf .hilfe-zu { color: #fff; font-size: 1.6rem; line-height: 1; min-width: 44px; justify-content: center; }
.hilfe-zu { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; border: none; background: none;
  color: var(--lila); font: inherit; font-weight: 700; cursor: pointer; padding: 0 4px; }
.hilfe-zu .symbol { width: 18px; height: 18px; }
.hilfe-video h3 { font-size: 1rem; margin: 6px 0; }
.hilfe-rahmen { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #1D1D3A; border-radius: 12px; overflow: hidden; }
.hilfe-rahmen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hilfe-nav { display: flex; justify-content: space-between; gap: 8px; margin: 10px 0 4px; }
.hilfe-nav .knopf { min-height: 44px; font-size: .85rem; max-width: 49%; }
.hilfe-nav .knopf span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hilfe-nav [data-weiter] { margin-left: auto; }
.hilfe-bewertung { border: none; margin: 10px 0 6px; padding: 0; }
.hilfe-bewertung legend { font-weight: 700; color: var(--titel); margin-bottom: 8px; }
.hilfe-wahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hilfe-wahl .knopf { min-height: 48px; }
.hilfe-wahl .knopf[aria-pressed="true"] { background: var(--lila); color: #fff; border-color: var(--lila); }
.hilfe-frage { margin-top: 10px; }
.hilfe-frage textarea { width: 100%; }
.hilfe-antwort { margin: 12px 0; padding: 12px 14px; border-radius: 12px; background: var(--lila-hell); outline: none; }
.hilfe-antwort p { margin: 0 0 8px; } .hilfe-antwort p:last-child { margin-bottom: 0; }
.hilfe-antwort.laedt { color: var(--text-leise); }
.hilfe-antwort.fehler { background: var(--fehler-hell); color: var(--fehler); }
.hilfe-antwort.notlage { background: #FFF4E5; color: var(--titel); border: 2px solid #E8A33D; font-weight: 600; }
.hilfe-vermutung { font-style: italic; }
.hilfe-ampel { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .85rem; }
.hilfe-ampel i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; }
.hilfe-ampel.gruen i { background: var(--gruen, #1CA672); } .hilfe-ampel.gelb i { background: #E8A33D; }
.hilfe-ampel.rot i { background: var(--fehler); }
.hilfe-stelle code, .hilfe-stellen code { font-size: .8rem; word-break: break-all; }
.hilfe-stellen .eintrag { align-items: flex-start; }
.hilfe-rahmen.quadrat { aspect-ratio: 1 / 1; }
/* Der Verlauf: Deine Frage rechts (wie "me" im Support-Fenster), die Antwort von SESTOS links */
.hilfe-ich { margin: 12px 0 0 auto; max-width: 85%; width: fit-content; padding: 10px 14px; border-radius: 14px 14px 4px 14px;
  background: var(--lila); color: #fff; white-space: pre-wrap; overflow-wrap: anywhere; }
.hilfe-antwort { border-radius: 14px 14px 14px 4px; }

/* Die drei Daumen (im Feld und im Fenster) */
.hilfe-daumen { border: none; margin: 10px 0 6px; padding: 0; min-width: 0; }
.hilfe-daumen legend { font-weight: 700; color: var(--titel); margin-bottom: 8px; font-size: .9rem; padding: 0; }
.hilfe-daumen-wahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.hilfe-daumen-wahl button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 56px; padding: 6px 4px; border: 1px solid var(--rahmen); border-radius: 12px; background: #fff;
  color: var(--titel); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; }
.hilfe-daumen-wahl button:hover { border-color: var(--lila); }
.hilfe-daumen-wahl button[aria-pressed="true"] { background: var(--lila); color: #fff; border-color: var(--lila); }
.hilfe-daumen-wahl .symbol { width: 22px; height: 22px; }
.daumen-quer { transform: rotate(-90deg); }
.daumen-runter { transform: rotate(180deg); }
.hilfe-gruende { margin-top: 10px; }
.hilfe-gruende p { margin: 0 0 6px; color: var(--text-leise); }
.hilfe-gruende-wahl { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.hilfe-gruende-wahl button { min-height: 44px; padding: 6px 12px; border-radius: 22px; border: 1px solid var(--rahmen);
  background: var(--lila-hell); color: var(--titel); font: inherit; font-size: .8rem; cursor: pointer; text-align: left; }
.hilfe-gruende-wahl button[aria-pressed="true"] { background: var(--lila); color: #fff; border-color: var(--lila); }
.hilfe-gewaehlt { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  font-size: .85rem; color: var(--titel); }

/* Das Feld am Icon (wie .sestos-pop der Plattform): schwebt unter dem Icon, ohne Schleier */
.hilfe-feld { position: fixed; z-index: 45; width: min(272px, calc(100vw - 24px)); max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; background: #fff; color: var(--titel);
  border: 1px solid var(--rahmen); border-radius: 16px; box-shadow: 0 12px 32px rgba(29,29,58,.22); padding: 10px 12px 12px;
  text-align: left; }
.hilfe-feld-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.hilfe-feld h2 { font-size: .95rem; margin: 6px 0 8px; color: var(--titel); outline: none; overflow-wrap: anywhere; }
.hilfe-feld-zu { flex: none; min-width: 44px; min-height: 44px; margin: -6px -8px 0 0; border: none; background: none;
  font-size: 1.5rem; line-height: 1; color: var(--text-leise); cursor: pointer; }
.hilfe-feld-text { margin: 0 0 6px; font-size: .9rem; line-height: 1.45; }
.hilfe-feld-video .link-knopf { margin-top: 6px; }
.hilfe-feld-frage { margin-top: 8px; min-height: 44px; }
.hilfe-feld [hidden] { display: none !important; }
/* Knoepfe, die wie ein Link aussehen ("Aendern", "Gross ansehen") */
.hilfe-feld button.link-knopf { gap: 6px; padding: 0; border: none; background: none; font: inherit; font-weight: 700;
  color: var(--lila); text-decoration: underline; cursor: pointer; }
.hilfe-feld button.link-knopf .symbol { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) {
  .hilfe-blatt { scroll-behavior: auto; }
  .hilfe-zeichen { transition: none; }
  .hilfe-zeichen:hover, .hilfe-zeichen[aria-expanded="true"] { transform: none; }
}
/* Nachtrag 66: Registrierung ohne Einladung */
.fangfeld { display: none; }  /* nur in der Gestaltung versteckt: einfache Programme fuellen es trotzdem aus */

/* Kopf schlank (Andy 02.11.2026): jede Angabe genau einmal. Oben die Marke und darunter klein, welches Brain es ist;
   im Band nur Foto und Begruessung in normaler Schreibweise, links buendig, rechts die Botschaften. */
.marke { min-width: 0; }
.marke-zeichen { flex: none; }
.marke-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
/* F-H3 (Andy 04.11.2026): "Beta" neben dem Logo. Nur Text, ohne Rahmen und Flaeche (kein Knopf) und ausserhalb des
   Links (nicht anklickbar). Kleinste Lesegroesse 0,78 rem (Nachtrag 60). */
.marke-gruppe { display: flex; align-items: center; gap: 6px; min-width: 0; }
.marke-beta { flex: none; color: rgba(255, 255, 255, .9); font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  line-height: 1; cursor: default; user-select: none; }
/* Mit Brain-Name darunter liegen Link und Beta uebereinander im selben Feld: Beta rechts von SESTOS (4,5 em breit),
   der Name darf unter Beta weiterlaufen */
.marke-gruppe.mit-brain { display: grid; grid-template-columns: minmax(0, 1fr); }
.marke-gruppe.mit-brain > * { grid-area: 1 / 1; }
.marke-gruppe.mit-brain .marke-beta { align-self: start; justify-self: start;
  margin: 8px 0 0 calc(50px + 1.15rem * 4.5 + 6px); }
/* Sehr lange Namen (bis 80 Zeichen) hoechstens zwei Zeilen; den ganzen Namen sagt das aria-label, zeigt der title */
.marke-brain { color: rgba(255, 255, 255, .9); font-size: .8rem; font-weight: 600; letter-spacing: .01em;
  overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.band-profil h1 { flex: 1; text-align: left; text-transform: none; font-size: clamp(1.3rem, 5.6vw, 1.7rem);
  line-height: 1.25; letter-spacing: 0; }
/* Ohne Zeile "Mein Brain" ist das Band niedriger: unten mehr Platz fuer die Kacheln, die hineinragen */
.band-start { padding-bottom: 64px; }
/* Nachtrag 63 Stufe 2: rechts im Gruss der Botschaften-Knopf und darunter das SESTOS-Icon, der Gruss behaelt die Breite */
.band-rechts { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; margin: -16px 0; }
.band-rechts:empty { display: none; }
/* Nachtrag 70: "Der KI etwas erklaeren" und der Leitfaden "So redet mein Brain" */
.lf-link { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; min-height: 56px; }
.lf-link > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lf-form { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.lf-sprechfeld { display: flex; flex-direction: column; gap: 8px; }
.lf-sprechfeld textarea { width: 100%; font: inherit; padding: 12px; border: 2px solid var(--rahmen-feld); border-radius: 12px; }
.lf-feld-hinweis, .lf-gilt { margin: 0; }
.lf-aufnahme[hidden] { display: none; }
.lf-aufnahme.laeuft { background: var(--fehler); border-color: var(--fehler); color: #fff; }
.lf-antwort > summary { justify-content: flex-start; }
.lf-text { white-space: pre-line; line-height: 1.55; overflow-wrap: anywhere; }
.lf-verstanden { border-left: 4px solid var(--hinweis); }
.lf-liste { margin: 4px 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.lf-liste-titel { margin: 8px 0 0; display: flex; align-items: center; gap: 6px; }
.lf-erklaerung, .lf-stand { border-top: 1px solid var(--rahmen); padding-top: 12px; margin-top: 12px; }
.lf-wortlaut, .lf-stand-text { white-space: pre-line; overflow-wrap: anywhere; margin: 4px 0 8px; }
.lf-selbst, .lf-erklaerungen, .lf-staende { margin-top: 16px; }

/* Nachtrag "Tuer 5keys.me": Andys Antwort hat den Support nach 3 Tagen nicht erreicht (nie nur die Farbe: der Text sagt es) */
.tuer5k-gescheitert { color: var(--fehler); font-weight: 600; }
/* Name, Wortlaut, Nachfragen und Ticketnummer kommen von aussen: lange Woerter ohne Leerzeichen brechen um, sonst
   wird die Seite am Handy breiter als der Bildschirm */
[data-tuer5k] { overflow-wrap: anywhere; }
/* Nachtrag 69 (K2): Band "Mit Deinem Paket geht das gerade nicht", gelb wie "offen", vor dem Absenden */
.paket-band { display: flex; gap: 12px; align-items: flex-start; padding: 14px var(--a2); margin-bottom: 16px;
  border-radius: var(--rund-klein); border-left: 5px solid currentColor; color: #7A5600; background: #FFF4D6; }
.paket-band p { margin: 0; color: var(--titel); }
/* Nachtrag 69 C1 (8.5): Credits leer, rosa mit Warndreieck, nie nur die Farbe (der Text sagt es) */
.credits-band { display: flex; gap: 12px; align-items: flex-start; padding: 14px var(--a2); margin-bottom: 16px;
  border-radius: var(--rund-klein); border-left: 5px solid var(--fehler); color: var(--fehler);
  background: var(--fehler-hell); overflow-wrap: anywhere; }
.credits-band > div { flex: 1 1 auto; min-width: 0; }
.credits-band p { margin: 0 0 6px; color: var(--titel); }
.credits-band .credits-band-titel { font-weight: 700; }
.credits-band .knopf-reihe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.credits-band .knopf-reihe form { margin: 0; }
.credits-band-vorab { border-left-color: var(--fehler); }
/* Kontobuch in der Konto-Seite: eine Zeile je Buchung */
.kv-buchungen { list-style: none; margin: 16px 0 0; padding: 0; }
.kv-buchungen li { padding: 8px 0; border-top: 1px solid rgba(0, 0, 0, .08); overflow-wrap: anywhere; }
.kv-buchungen li .leise { margin-right: 8px; }

/* Nachtrag 72: Assistenz. Das Band sagt auf jeder Seite, fuer wen sie gerade arbeitet; Privates ist ausgegraut */
.as-band { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px;
  background: var(--hinweis-hell); color: var(--hinweis); border-bottom: 2px solid var(--hinweis); }
.as-band p { margin: 0; flex: 1 1 12em; color: var(--titel); font-weight: 700; overflow-wrap: anywhere; }
.as-band form { margin: 0; }
.as-band-link { min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px;
  border: 1.5px solid var(--hinweis); background: var(--karte); color: var(--hinweis); font: inherit; font-weight: 700;
  font-size: .9rem; text-decoration: none; cursor: pointer; }
.as-karte + .as-karte { margin-top: 12px; }
.as-karte .knopf, .as-karte .aufklapp { margin-top: 8px; }
.as-name { margin: 0 0 4px; overflow-wrap: anywhere; }
.as-mail, .as-link code { overflow-wrap: anywhere; word-break: break-all; }
.as-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; padding: 0; list-style: none; }
.as-chips .abzeichen { color: var(--gruen-text); }
.as-freigaben fieldset { border: none; margin: 8px 0 0; padding: 0; }
.as-qr .qr-feld { display: flex; justify-content: center; margin: 12px 0; }
.as-qr .qr-feld svg { max-width: 100%; height: auto; }
.as-taten { list-style: none; padding: var(--a2); margin: 0; }
.as-taten li { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 8px 0; border-bottom: 1px solid var(--rahmen); overflow-wrap: anywhere; }
.as-taten li:last-child { border-bottom: none; }
.as-privat { list-style: none; margin: 0; padding: 0; }
.as-privat .kachel + .kachel, .as-privat li + li { margin-top: 12px; }
.kachel-aus { opacity: .55; box-shadow: none; background: var(--grund); cursor: not-allowed; }
.kachel-aus .kachel-zeichen { background: var(--rahmen); color: var(--text-leise); }

/* ===== F2.3 Design-Durchgang "Linien und Abstaende" (Zwischenabnahme Teil 2) ===== */
/* Ueberschriften mit Zeichen: Zeichen und Wort auf einer Linie, mit Luft zur Karte darueber */
h2.unterkopf:has(> .symbol) { display: flex; align-items: center; gap: 8px; }
h2.unterkopf > .symbol { width: 18px; height: 18px; flex: none; }
/* Info-Zeile unter den Karten: buendig mit dem Inhalt der Karte, Zeichen oben am Text, Abstand wie zwischen Karten */
.stufen-hinweis { align-items: flex-start; margin: var(--a2) 0 0; padding: 0 var(--a2); }
.stufen-hinweis > .symbol { flex: none; margin-top: 2px; }
/* In einer Karte oder einem Formular ist der Rand schon da: dort nicht noch einmal einruecken */
.karte .stufen-hinweis, form .stufen-hinweis { padding: 0; }
/* Bitte bestaetigen: ein Abstand fuer alles in der Karte (12 px), leise Knoepfe als eine Zeile unter feiner Linie */
.bb-eintrag { display: flex; flex-direction: column; gap: 12px; }
.bb-eintrag > p, .bb-eintrag > .fr-unterzeile, .bb-eintrag .ef-zahlen { margin: 0; }
.bb-eintrag > .knopf-reihe > form, .bb-eintrag > .knopf-reihe > details { margin: 0; }
.bb-leise { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 var(--a2);
  border-top: 1px solid var(--rahmen); padding-top: 4px; margin-bottom: calc(-1 * var(--a1)); }
.bb-leise form { margin: 0; }
.bb-leise .knopf-leise, .bb-leise .link-knopf { min-height: 44px; padding: 0 var(--a1); font-size: .95rem; }
.bb-leise .link-knopf { color: var(--lila); text-decoration: underline; text-underline-offset: 4px; }

/* F9.5 bis F9.7 (Zwischenabnahme Teil 2): Preis in der Ampel-Zeile, Dossier-Vorschlag, Ziel-Vorschlaege */
.ampel-fehlt li.ampel-preis { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--text); font-weight: 600; }
.ampel-preis-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.ampel-preis-knoepfe form { margin: 0; }
.ampel-preis-knoepfe .knopf { min-height: 44px; padding: 0 14px; font-size: .92rem; }
.ampel-fehlt .ampel-preis-knoepfe a.knopf { font-weight: 600; }
.dossier-vorschlag { display: flex; flex-direction: column; gap: 10px; border: 2px solid #B71C1C; border-radius: 14px; padding: var(--a2); margin: 0 0 var(--a2); }
.dossier-vorschlag > p { margin: 0; }
.dossier-vorschlag .dv-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dossier-vorschlag .bb-leise { margin-bottom: 0; }
.dossier-ohne { margin: 0 0 var(--a2); }
[data-dossier-wahl] { margin: 0 0 var(--a2); }
.zv-liste form { margin: 0; }
.zv-liste .blatt-zeile small { display: block; }

/* F9.8 und F9.9 (Zwischenabnahme Teil 2): Fragen trainieren */
.kf-los-leiste { position: sticky; bottom: calc(var(--leiste-hoehe) + env(safe-area-inset-bottom) + 8px); z-index: 5;
  margin-top: var(--a2); }
.kf-los-leiste .knopf { box-shadow: 0 -4px 22px rgba(29, 29, 58, .18); }
body:not(.mit-leiste) .kf-los-leiste { bottom: calc(env(safe-area-inset-bottom) + 8px); }
.kf-reihe { display: flex; align-items: stretch; gap: 8px; border-bottom: 1px solid var(--rahmen); }
.kf-reihe:last-child { border-bottom: none; }
.kf-reihe > .kf-zeile { flex: 1; min-width: 0; border-bottom: none; }
.kf-antworten { flex: none; align-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 64px; min-height: 52px; margin: 8px 0; padding: 4px 6px; border: 2px solid var(--lila); border-radius: 12px;
  background: #fff; color: var(--lila); font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; }
.kf-antworten .symbol { width: 20px; height: 20px; }
.kf-weitere { display: flex; flex-direction: column; gap: 8px; margin-top: var(--a2); border-top: 1px solid var(--rahmen); padding-top: var(--a2); }
.kf-weitere > form, .kf-weitere > details { margin: 0; width: 100%; }
.kf-weitere > details > summary.knopf { width: 100%; justify-content: center; }
.kf-weitere .knopf { justify-content: center; }
.kf-erledigt { align-items: center; gap: 12px; }
.kf-erledigt .zustand-marke.ok { flex: none; }

/* F6.3 und F6.4 (Zwischenabnahme Teil 2): neue Person und neuer Ort beim Bild, Datum ungefaehr, Ortsvorschlag */
.er-neu { margin-top: 10px; }
.er-ungefaehr { display: flex; gap: 8px; align-items: flex-start; color: var(--text); }
.er-ungefaehr > .symbol { flex: none; margin-top: 2px; }
.sammlung-knopf.er-vorschlag span { border-style: dashed; }
/* Nachtrag 63 Stufe 2: Landkarte der Hilfe mit Filter, Sprachen und "Ansehen" */
.hilfe-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.hilfe-filter label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; font-weight: 600; }
.hilfe-filter select { min-height: 44px; }
.hilfe-filter .knopf { min-height: 44px; }
.hilfe-filter p { flex-basis: 100%; margin: 0; }
.hilfe-sprachen { display: flex; flex-wrap: wrap; gap: 4px; }
.hilfe-stelle-links { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.hilfe-stelle-links .link-knopf { min-height: 44px; }
/* F-E6a: Landkarte wie die Uebersicht auf 5KEYS, nur fuer den PC gebaut (Andy 03.11.2026) */
body:has(.hilfe-stellen) .seite, body:has(.hilfe-stellen) .band-innen { max-width: 1200px; }
.hilfe-werkzeuge { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; align-items: start; }
.hilfe-zahlen { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.hilfe-filter-ohne { flex-direction: row !important; align-items: center; gap: 8px !important; min-height: 44px; }
.hilfe-filter-ohne input { width: 20px; height: 20px; }
.hilfe-bereich { padding-top: 6px; padding-bottom: 6px; }
.hilfe-bereich > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-height: 48px;
  cursor: pointer; }
.hilfe-tabelle { width: 100%; border-collapse: collapse; margin: 6px 0 4px; font-size: .9rem; }
.hilfe-tabelle th { text-align: left; font-size: .8rem; color: var(--text-leise); padding: 6px 8px;
  border-bottom: 2px solid var(--rahmen); }
.hilfe-tabelle td { vertical-align: top; padding: 8px; border-bottom: 1px solid var(--rahmen); }
.hilfe-tabelle td.hilfe-name { width: 27%; }
.hilfe-tabelle td.hilfe-daumen { min-width: 210px; }
/* Sprachen in einer Zeile wie der Status auf 5KEYS: kleine Zeichen mit Fahne, Kuerzel und ✓ oder – */
.hilfe-tabelle .hilfe-sprachen { flex-wrap: nowrap; gap: 3px; }
.hilfe-sprachen .abzeichen { min-height: 0; padding: 2px 6px; gap: 4px; font-size: .78rem; white-space: nowrap; }
.hilfe-sprachen .fahne { width: 16px; height: 11px; }
.eintrag-text .hilfe-sprachen { display: flex; flex-wrap: wrap; margin: 4px 0; }
.eintrag-text .hilfe-sprachen .abzeichen { display: inline-flex; color: inherit; }
.hilfe-tabelle td.hilfe-stand { min-width: 180px; }
/* Aufklapper sichtbar machen wie bei .aufklapp-karte: ein Pfeil, der sich beim Oeffnen dreht */
.hilfe-bereich > summary, .hilfe-details > summary { list-style: none; }
.hilfe-bereich > summary::-webkit-details-marker, .hilfe-details > summary::-webkit-details-marker { display: none; }
.hilfe-bereich > summary .pfeil-runter { margin-left: auto; transform: rotate(90deg); transition: transform .2s;
  color: var(--text-leise); }
.hilfe-bereich[open] > summary .pfeil-runter { transform: rotate(-90deg); }
.hilfe-details > summary { gap: 4px; color: var(--lila); }
.hilfe-details > summary .pfeil-runter { width: 14px; height: 14px; transition: transform .2s; }
.hilfe-details[open] > summary .pfeil-runter { transform: rotate(90deg); }
.hilfe-tabelle .hilfe-stelle-links { display: table-cell; white-space: nowrap; }
.hilfe-details > summary { cursor: pointer; font-size: .8rem; font-weight: 600; min-height: 32px; display: flex;
  align-items: center; }
.hilfe-details dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 10px; margin: 4px 0 0;
  font-size: .8rem; }
.hilfe-details dd { margin: 0; word-break: break-all; }
.hilfe-weg { margin: 6px 0 10px 1.2em; padding: 0; }
.hilfe-weg li { margin: 0 0 6px; }

/* B6 (Andy 03.11.2026, farbenblind): EIN Aussehen fuer "ausgewaehlt" an jedem Antipp-Knopf (Stufen, Kategorien beim
   Einordnen, Filter, Reiter, Wochentage, Bewertungen): gruene Flaeche, dunkle Schrift, vorne ein Haken. Nicht
   ausgewaehlt: weisser Grund mit Rahmen, ohne Haken. Neue Knoepfe bekommen die Klasse "antipp" und dazu
   aria-pressed="true", aria-current="page" oder ein angehaktes Feld; die alten Muster stehen hier mit in der Liste. */
:root { --an-grund: #D3F5E6; --an-rand: var(--gruen-text); --an-schrift: #06301F; }
.antipp { background: var(--karte); border: 2px solid var(--rahmen-feld); color: var(--titel); }
.antipp[aria-pressed="true"], .antipp[aria-current="page"], .antipp:has(input:checked),
.sammlung-knopf input:checked + span,
.wahl[aria-pressed="true"], .wahl-radio:has(input:checked),
.bo-tag:has(input:checked),
.segment a[aria-current="page"], .fr-reiter a[aria-current="page"], .kv-reiter a[aria-current="page"],
.er-ordnen .gs-chip.an,
.hilfe-wahl .knopf[aria-pressed="true"], .hilfe-daumen-wahl button[aria-pressed="true"],
.hilfe-gruende-wahl button[aria-pressed="true"] {
  background: var(--an-grund); border-color: var(--an-rand); color: var(--an-schrift); box-shadow: none; }
.antipp[aria-pressed="true"] .symbol, .antipp[aria-current="page"] .symbol, .antipp:has(input:checked) .symbol,
.sammlung-knopf input:checked + span .symbol, .wahl[aria-pressed="true"] .symbol, .wahl-radio:has(input:checked) .symbol,
.segment a[aria-current="page"] .symbol, .fr-reiter a[aria-current="page"] .symbol, .er-ordnen .gs-chip.an .symbol,
.hilfe-daumen-wahl button[aria-pressed="true"] .symbol { color: var(--an-schrift); }
.antipp[aria-pressed="true"]::before, .antipp[aria-current="page"]::before, .antipp:has(input:checked)::before,
.sammlung-knopf input:checked + span::before,
.wahl[aria-pressed="true"]::before, .wahl-radio:has(input:checked)::before,
.bo-tag:has(input:checked)::before,
.segment a[aria-current="page"]::before, .fr-reiter a[aria-current="page"]::before, .kv-reiter a[aria-current="page"]::before,
.er-ordnen .gs-chip.an::before,
.hilfe-wahl .knopf[aria-pressed="true"]::before, .hilfe-daumen-wahl button[aria-pressed="true"]::before,
.hilfe-gruende-wahl button[aria-pressed="true"]::before {
  content: "\2713"; flex: none; font-weight: 800; color: var(--an-rand); margin-right: 2px; }
/* Die alten Haken-Plaketten auf der Ecke entfallen: der Haken steht jetzt vorne */
.wahl[aria-pressed="true"]::after, .wahl-radio:has(input:checked)::after { content: none; }
.bo-tag:has(input:checked)::before { margin-right: 1px; font-size: .8rem; }
/* Nicht ausgewaehlte Reiter: weiss mit Rahmen (vorher lila Grund ohne Rahmen) */
.segment a { background: var(--karte); border: 2px solid var(--rahmen-feld); }
.segment a[aria-current="page"] { border-width: 2px; }
/* Ein Auswahl-Blatt (eine Zeile von mehreren): der Punkt rechts wird gruen mit Haken */
.blatt-zeile.an, .blatt-zeile[aria-current="true"] { color: var(--an-schrift); background: var(--an-grund); }
.blatt-zeile.an .wahl-punkt, .blatt-zeile[aria-current="true"] .wahl-punkt { border: none; background: var(--an-rand)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/16px no-repeat; }

/* B6: reine Etiketten (Stufe, Oeffentlich, einzeln eingestellt, Routine, Thema, Zeit) sind keine Knoepfe: flach, klein,
   grau, mit Zeichen. Farbige Etiketten (Ampel, Fehler) behalten ihre Farbe, aber auch ohne Pille. */
.marke-klein { padding: 0; border: none; border-radius: 0; background: none; font-size: .8rem; font-weight: 600;
  color: var(--text-leise); gap: 4px; }
.marke-klein.lila { color: var(--text-leise); }
.marken { gap: 4px 12px; }

/* B4 (Andy 03.11.2026): der Umschalter direkt unter dem Kopfband ("Frage stellen | Spiegel", Neu | Alle, Monate) sitzt
   genau mittig auf der Kante zwischen Lila und Weiss. Die Seite rueckt um --a4 ins Band (.band + .seite); von dort
   schiebt ihn translateY um (--a4 - halbe eigene Hoehe) nach unten. So stimmt die Mitte auch, wenn er umbricht. */
.band + .seite > main > :is(.fr-reiter, .segment):first-child { margin-top: 0; position: relative; z-index: 2;
  transform: translateY(calc(var(--a4) - 50%)); }
.band + .seite > main > :is(.fr-reiter, .segment):first-child + * { margin-top: 28px; }
.band + .seite > main > .segment:first-child { background: var(--karte); box-shadow: 0 4px 14px rgba(29, 29, 58, .14); }
/* Schmale Handys (320 px): die Reiter sind so breit wie ihr Wort, beim gewaehlten ersetzt der Haken das Zeichen.
   Der Feldtext "Tippen oder sprechen ..." passt neben Mikro und Senden nicht in eine Zeile (unter 16 px zoomt das
   iPhone): dann steht er zweizeilig im leeren Feld, statt abgeschnitten zu werden. */
.aw-ergaenzen-zeile input::placeholder { text-overflow: ellipsis; }
@media (max-width: 374px) {
  .fr-reiter { display: flex; }
  .fr-reiter a { flex: 1 1 auto; gap: 6px; padding: 0 10px; font-size: .92rem; }
  .fr-reiter a[aria-current="page"] .symbol { display: none; }
  .fr-zeile textarea { font-size: max(16px, .88rem); }
  .fr-zeile textarea:placeholder-shown { min-height: 68px; }
}

/* B7 (Andy 03.11.2026): zwischen dem letzten Feld und dem Knopf zum Anlegen/Speichern steht ueberall derselbe Abstand,
   12 px (Sammlungen, Orte, Produkte, Personen). Im Raster der Ereignisse macht ihn schon der gap. */
.formular:not(.ev-neu) > button[type="submit"] { margin-top: 12px; }
.formular > .feld:has(+ button[type="submit"]) { margin-bottom: 0; }
.formular > .feld:has(+ button[type="submit"]) > :last-child { margin-bottom: 0; }
.formular > .feld:has(+ button[type="submit"]) textarea { display: block; }

/* Zwischenabnahme F15.4 bis F15.7: Einladen fuer wen und wie, QR-Code, reduzierte Startseite */
.ei-wahl { grid-template-columns: 1fr 1fr; }
.ei-wahl .wahl { justify-content: center; text-align: center; }
/* Credit-Konzept C5 Mein Brain verkaufen: Varianten untereinander, Hinweis je Variante, Rechner */
.bv-alles { border: 0; padding: 0; margin: 0; min-width: 0; }
.bv-alles:disabled { opacity: .55; }
.bv-wahl { grid-template-columns: 1fr; }
.bv-wahl .wahl { min-height: 72px; padding: 10px 12px; }
.bv-wahl .wahl > span { display: flex; flex-direction: column; gap: 2px; }
.bv-wahl .wahl .klein { font-weight: 400; }
.bv-wahl + .meldung, .bv-wahl ~ .bv-nur-selbst { margin-top: 12px; }
.bv-form:not(:has(input[name="variante"][value="sestos"]:checked)) .bv-nur-sestos,
.bv-form:not(:has(input[name="variante"][value="selbst"]:checked)) .bv-nur-selbst { display: none; }
.bv-gross { font-size: 1.15rem; font-weight: 700; margin: 8px 0; overflow-wrap: anywhere; }
.bv-liste { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 4px; overflow-wrap: anywhere; }
.ei-form:has(input[name=fuer][value=kind]:checked) .ei-nicht-kind { display: none; }
.ei-form:not(:has(input[name=fuer][value=kind]:checked)) .ei-nur-kind { display: none; }
.ei-form:has(input[name=weg][value=qr]:checked):not(:has(input[name=fuer][value=kind]:checked)) .ei-nicht-qr { display: none; }
.ei-form:is(:not(:has(input[name=weg][value=qr]:checked)), :has(input[name=fuer][value=kind]:checked)) .ei-nur-qr { display: none; }
.ei-form:not(:has(input[name=produkte]:checked)) .ei-nur-produkte { display: none; }
.ei-nur-produkte { margin-top: 12px; }
.ei-qr { text-align: center; }
.ei-qr-bild svg { width: min(100%, 260px); height: auto; }
.ei-qr-link { overflow-wrap: anywhere; margin: 8px 0 0; }
.gast-karte .eintrag { padding: 0 0 12px; }
.gast-karte .eintrag + .knopf, .gast-karte .oberzeile + .eintrag { margin-top: 4px; }

/* Zwischenabnahme B9: Rueckmeldung beim Hochladen (static/hochladen.js) */
.hochladen-meldung { margin: 12px 0 0; }
.hochladen-meldung[data-zustand="laeuft"]::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 3px solid currentColor; border-right-color: transparent; animation: hochladen-dreht 0.9s linear infinite; }
@keyframes hochladen-dreht { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hochladen-meldung[data-zustand="laeuft"]::before { animation: none; } }
[aria-disabled="true"] { opacity: .6; pointer-events: none; }

/* Zwischenabnahme B13: /beitraege erklaert, wie die Familie dahin kommt */
.fa-anleitung { margin-bottom: 16px; }
.fa-anleitung summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; list-style: none; }
.fa-anleitung summary::-webkit-details-marker { display: none; }
.fa-anleitung[open] .pfeil-runter { transform: rotate(180deg); }
.fa-schritte { margin: 10px 0 12px; padding-left: 22px; }
.fa-schritte li { margin: 6px 0; line-height: 1.45; }
/* Zwischenabnahme B14b: "Im Katalog" nach dem Klick auf einen Vorschlag (farbenblind: gruene Flaeche plus Haken) */
.test-im-katalog { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; padding: 8px 12px; border-radius: 10px;
  background: var(--gruen); color: var(--gruen-schrift); font-weight: 700; }
.test-im-katalog .symbol { width: 20px; height: 20px; flex: none; }
.test-frage.test-neu { outline: 3px solid var(--gruen); outline-offset: 2px; scroll-margin-top: 96px; animation: test-neu 1.6s ease-out 1; }
@keyframes test-neu { from { box-shadow: 0 0 0 12px rgba(18, 184, 122, .35); } to { box-shadow: 0 0 0 0 rgba(18, 184, 122, 0); } }
@media (prefers-reduced-motion: reduce) { .test-frage.test-neu { animation: none; } }

/* Review C1: "xx % vollstaendig" in der Produktliste. Zahl als Text, duenner Balken; Farbe nur zusaetzlich */
.pr-prozent { display: flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; }
.pr-balken { flex: 0 0 64px; height: 6px; border-radius: 3px; background: var(--rahmen); overflow: hidden; }
.pr-balken i { display: block; height: 100%; border-radius: 3px; }
.pr-prozent.wenig .pr-balken i { background: var(--fehler); }
.pr-prozent.mitte .pr-balken i { background: var(--key1); }
.pr-prozent.voll .pr-balken i { background: var(--gruen); }
.pr-prozent.voll { color: var(--gruen-text); }

/* Review C2a (Andy 03.11.2026): auch eine Auswahl-Zeile mit Radio zeigt das Gewaehlte wie ueberall (B6): gruene Flaeche
   und ein Haken im Kreis, nie nur ein lila Punkt */
.schalter-zeile:has(> input[type="radio"]) { padding: 12px; border-radius: 12px; }
.schalter-zeile > input[type="radio"] { -webkit-appearance: none; appearance: none; border: 2px solid var(--rahmen-feld);
  border-radius: 50%; background: var(--karte); cursor: pointer; }
.schalter-zeile > input[type="radio"]:checked { border-color: var(--an-rand); background: var(--an-rand)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/16px no-repeat; }
.schalter-zeile > input[type="radio"]:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.schalter-zeile:has(> input[type="radio"]:checked) { background: var(--an-grund); color: var(--an-schrift); }
.schalter-zeile:has(> input[type="radio"]:checked) .schalter-text span { color: var(--an-schrift); }

/* Zwischenabnahme B15 (Andy 03.11.2026): eine Ueberschrift oder lose Zeile direkt nach dem Band sitzt nicht halb auf
   der Kante zwischen Lila und Weiss, sondern mit Abstand darunter (die Seite rueckt um --a4 ins Band) */
.band + .seite > main > :is(h2, h3, .unterkopf, .test-titel, p:not(.meldung):not(.fr-erklaer)):first-child {
  margin-top: calc(var(--a4) + 16px); }
/* Review C2b: Kopfzeile im laufenden Ausprobieren-Gespraech: Status links, Pruef-Ansicht rechts, auf weisser Karte */
.aus-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; margin-bottom: 16px; }
.aus-kopf .knopf { min-height: 44px; }

/* Zwischenabnahme B8/B7: steht der Hinweis zwischen Titel und Feld, hat er unten Luft statt oben */
.feld-titel + .feld-hilfe { margin: 0 0 6px; }

/* Review 03.11.2026 (F-C4a): ein Beispiel im Feld steht mit "z. B." und schraeg da, nie wie ein eingetragener Wert (Farbe
   wie Zusatzangaben, ueber 4,5 zu 1) */
.mit-beispiel ::placeholder { color: var(--text-leise); font-style: italic; opacity: 1; }
/* Review F-C4d: Antipp-Wahl. Angetippt = gruene Flaeche mit Haken, sonst weiss mit Rahmen (Andy ist farbenblind: nie nur Farbe) */
.haken-wahlen { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.haken-wahl { position: relative; display: inline-flex; max-width: 100%; }
.haken-wahl input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.haken-wahl span { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 18px; border-radius: 24px;
  border: 2px solid var(--rahmen-feld); background: var(--karte); color: var(--titel); font-weight: 600; overflow-wrap: anywhere; }
/* gleiches Aussehen wie jede Auswahl (B6): --an-grund, --an-rand, --an-schrift */
.haken-wahl input:checked + span { background: var(--an-grund); border-color: var(--an-rand); color: var(--an-schrift); }
.haken-wahl input:checked + span::before { content: "\2713"; font-weight: 800; }
.haken-wahl input:focus-visible + span { outline: 3px solid var(--lila); outline-offset: 2px; }
.code-ohne-produkt { margin: 8px 0; padding: 12px; border-left: 4px solid #8A3357; background: #FBEFF3; border-radius: 8px; }
.code-ohne-produkt p { margin: 0 0 6px; }
/* Review F-D1b: Abschnitte der Sicherheitsseite zuklappbar; Ueberzeile und Ueberschrift links, der Pfeil rechts */
.sich-abschnitt > summary { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: center; }
.sich-abschnitt > summary .oberzeile, .sich-abschnitt > summary h2 { grid-column: 1; margin: 0; }
.sich-abschnitt > summary h2 { margin-top: 4px; }
.sich-abschnitt > summary .pfeil { grid-column: 2; grid-row: 1 / span 2; }
.sich-abschnitt ~ .sich-abschnitt { margin-top: 16px; }
/* Review F-D1a: "Weiteres Geraet hinzufuegen" sichtbar vom eingetragenen Geraet getrennt */
.pk-neu { margin-top: 12px; }
/* nur ein Trennstrich: die Linie unter dem letzten Geraet faellt weg, wenn das Anlegen folgt */
#passkeys .eintrag:has(+ .pk-neu) { border-bottom: none; }
.pk-neu.mit-trenner { margin-top: 20px; padding-top: 20px; border-top: 2px solid var(--rahmen); }
.pk-neu-titel { font-size: 1rem; color: var(--titel); margin: 0 0 12px; }

/* Administration (Review-Funde F-E1f, 03.11.2026): die Kacheln stehen unter drei Ueberschriften, im Stil der
   Ueberschrift "Reichweite" */
.vw-gruppe { margin: 0 0 var(--a3, 24px); }
.vw-gruppe-titel { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem;
  color: var(--text-leise); margin: 0 0 12px; }
/* Admin am PC breit (Andy 04.11.2026, Variante A): die Seiten unter /verwaltung sind ab Desktop-Breite breit wie der
   Admin-Bereich bei 5KEYS. Alles andere bleibt die schmale Spalte, am Handy aendert sich nichts. */
@media (min-width: 1024px) {
  body.admin-breit .kopf, body.admin-breit .band-innen, body.admin-breit .seite { max-width: 1200px; }
  body.admin-breit .kopf, body.admin-breit .band-innen { padding-left: var(--a4); padding-right: var(--a4); }
  body.admin-breit .seite { padding-left: var(--a4); padding-right: var(--a4); }
  /* Kacheln einer Gruppe stehen nebeneinander, drei in einer Reihe */
  body.admin-breit .vw-gruppe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
    align-items: stretch; }
  body.admin-breit .vw-gruppe > .vw-gruppe-titel { grid-column: 1 / -1; margin-bottom: 0; }
  body.admin-breit .vw-gruppe > .kachel { margin-top: 0; }
  body.admin-breit .zahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Formulare bleiben lesbar schmal, auch wenn die Seite breit ist */
  body.admin-breit main .formular { max-width: 720px; }
  /* Ein breiter Knopf fuellt am PC nicht die ganze Seite, er bleibt so breit wie am Handy */
  body.admin-breit .knopf-reihe { align-items: flex-start; }
  body.admin-breit .knopf.breit { width: auto; min-width: 360px; }
}

/* F-E8b (Andy 03.11.2026): Warnband oben auf jeder Seite, solange eine Monatsgrenze voll ist. Symbol und Wort
   ("Achtung:", "Hinweis:") sagen die Stufe, die Farbe nur zusaetzlich; der Knopf fuehrt direkt zur Loesung */
.warnband { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; padding: 12px 16px;
  border-bottom: 3px solid currentColor; }
.warnband > .symbol { width: 24px; height: 24px; flex: none; margin-top: 1px; }
.warnband p { margin: 0; flex: 1 1 14em; min-width: 0; color: var(--titel); overflow-wrap: anywhere; }
.warnband-voll { color: var(--fehler); background: var(--fehler-hell); }
.warnband-voll p { font-weight: 700; }
.warnband-bald, .warnband-frei { color: #7A5600; background: #FFF4D6; }
.warnband-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; padding-left: 36px; }
.warnband-knopf { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px;
  border: 2px solid currentColor; background: var(--karte); color: inherit; font-weight: 700; text-decoration: none; }
.warnband-voll .warnband-knopf:first-child { background: var(--fehler); border-color: var(--fehler); color: #fff; }
@media (max-width: 400px) { .warnband-knoepfe { padding-left: 0; } .warnband-knopf { flex: 1 1 100%; justify-content: center; } }
.warnband-hilfe { flex: none; }
/* Nachtrag 53 Stufe 3a: Abschnitt "Einbinden" am Ende der Produktseite. Die Wahl ist gruen mit Haken (oben bei der
   Stimme), der Code steht lesbar in Festbreite, die Vorschau ist das echte Feld auf hellem Grund wie eine Landingpage. */
.einbinden { margin-top: 24px; }
.einbinden .karte-titel { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.einbinden > .meldung { margin-top: 12px; }
.eb-wahl { margin: 16px 0 0; padding: 0; border: none; min-width: 0; }
.eb-wahl .wahl-raster { margin-top: 6px; }
.eb-teil { margin-top: 12px; }
.eb-teil[hidden] { display: none; }
.eb-teil > .feld-titel, .eb-teil > .feld { margin-top: 14px; }
.eb-vorschau { margin: 6px 0 4px; padding: 16px 8px; border: 1px dashed var(--rahmen); border-radius: 16px;
  background: linear-gradient(180deg, #F6F3FD, #FFFFFF); }
.eb-vorschau iframe { display: block; width: 100%; max-width: 720px; height: 150px; margin: 0 auto; border: 0; }
.eb-code, .eb-kurz { width: 100%; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .8rem;
  line-height: 1.45; color: var(--titel); }
.eb-code { min-height: 120px; resize: vertical; white-space: pre; overflow-x: auto; }
[data-kopieren][data-erledigt] { background: var(--an-grund, #D3F5E6); color: var(--an-schrift, #06301F); }
/* Die zwei Fassungen als Bildchen: gross = Feld unter dem Hero, klein = Knopf in der Ecke (nie nur Farbe: dazu das Wort) */
.eb-art-wahl { min-height: 72px; }
.eb-bildchen { position: relative; flex: none; width: 46px; height: 34px; border: 1.5px solid currentColor; border-radius: 6px;
  background: #fff; overflow: hidden; }
.eb-bildchen i { position: absolute; left: 0; right: 0; top: 0; height: 11px; background: var(--rahmen, #E4DFF0); }
.eb-bild-gross b { position: absolute; left: 6px; right: 6px; top: 16px; height: 7px; border-radius: 4px; background: var(--lila); }
.eb-bild-knopf b { position: absolute; right: 4px; bottom: 4px; width: 14px; height: 7px; border-radius: 4px; background: var(--lila); }
.eb-vorschau-knopf { padding: 0; overflow: hidden; }
.eb-vorschau-knopf iframe { max-width: none; height: 640px; }
.eb-code-zeile { min-height: 84px; white-space: pre-wrap; overflow-wrap: anywhere; }
[data-eb-art][hidden] { display: none; }
@media (max-width: 420px) { .eb-wahl .wahl-raster { grid-template-columns: 1fr; } }

/* Andy 04.11.2026: die drei Haken unter "Wer darf es hoeren?" ("Ab 18", "Erst nach meinem Tod", "Besondere
   Vertraulichkeit"). Als Anzeige ein ruhiges Etikett ohne Rahmen und Flaeche, damit es nie wie ein Knopf aussieht. */
.freigabe-zusatz { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 0; background: none;
  border: 0; font-size: .8rem; font-weight: 400; color: var(--text-leise); white-space: nowrap; }
.freigabe-zusatz .symbol { width: 14px; height: 14px; color: var(--text-leise); }
.freigabe-zusatz-titel { margin: 14px 0 6px; }