/* 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); }

/* 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); }

/* 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; }
.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[open] > summary .pfeil { transform: rotate(90deg); }
.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; }
.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); }
/* 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(88px, 1fr)); }
.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; }
.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; }


/* 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-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; } }
/* 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; }
.hilfe-zeichen { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.12); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; }
.hilfe-zeichen .symbol { width: 20px; height: 20px; }
.hilfe-zeichen:focus-visible, .hilfe-knopf:focus-visible { outline: 3px solid var(--gruen-leucht); outline-offset: 2px; }
.seite .hilfe-zeichen { border-color: var(--rahmen); background: var(--lila-hell); color: var(--lila); }
.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: oben rechts in der Kopfleiste, er liegt ueber keinem Inhalt und keiner Leiste */
.hilfe-knopf { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border-radius: 22px; border: 1px solid rgba(255,255,255,.55); background: transparent; color: #fff;
  font: inherit; font-weight: 700; cursor: pointer; }
.hilfe-knopf .symbol { width: 22px; height: 22px; }
.hilfe-blatt { max-height: 88vh; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain; }
.hilfe-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hilfe-kopf h2 { margin: 0; outline: none; }
.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-ort { margin: 4px 0 10px; }
.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; }
@media (prefers-reduced-motion: reduce) { .hilfe-blatt { scroll-behavior: auto; } }
/* 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; }
/* 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 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); }