/* ---------------------------------------------------------------------------
   Farbrollen. Alle Apps beziehen ihre Flächen und Texte hierüber, damit ein
   einziger Schalter das ganze Telefon umstellt. Wer hier einen festen Hexwert
   einträgt statt einer Rolle, baut die nächste Dark-Mode-Lücke.
   --------------------------------------------------------------------------- */
:root {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --phone-w: 420px;
  --phone-h: 860px;
  --text-scale: 1;

  /* -------------------------------------------------------------------------
     Skalen. Vorher standen hier 39 Schriftgrößen und 26 Eckenradien nebeneinander
     — das ist keine Gestaltung, sondern eine Entscheidung pro Fundstelle. Wer
     einen Zwischenwert braucht, hat meist das falsche Element gewählt.

     Schriftgrößen ausnahmslos in rem: html trägt calc(16px * var(--text-scale)),
     px-Werte hängen sich davon ab und brechen die Textgrößen-Einstellung.
     ------------------------------------------------------------------------- */
  --text-2xs: .625rem;      /* 10px · Chips, Zeitstempel, Kleinstbeschriftung */
  --text-xs: .6875rem;      /* 11px · Abschnittsköpfe, Metazeilen */
  --text-sm: .75rem;        /* 12px · Sekundärtext, Listenzweitzeile */
  --text-md: .8125rem;      /* 13px · Fließtext */
  --text-lg: .9375rem;      /* 15px · Listentitel, Hervorhebung */
  --text-xl: 1.125rem;      /* 18px · Bildschirmtitel */
  --text-2xl: 1.5rem;       /* 24px · große Titel */
  --text-display: 4rem;     /* 64px · die große Uhrzeit, überall dieselbe */

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Zwei Dauern, eine Kurve. html.reduced-motion schaltet beides ab. */
  --motion-quick: 120ms;
  --motion-calm: 240ms;
  --motion-none: 0s;
  --motion-ease: cubic-bezier(.2, .7, .3, 1);

  /* Der Einstiegsbildschirm liegt immer auf dunklem Grund. Der Akzent stand hier
     als --intro-accent: var(--intro-accent) — eine zirkuläre Definition, die die
     Variable ungültig macht. Fortschrittspunkte, Kicker und die gewählte
     Profiloption verloren dadurch ihre Farbe: ausgerechnet in den ersten fünf
     Minuten des Spiels. Aufgehelltes Schieferblau, lesbar auf dunklem Grund. */
  --intro-danger: #ffb3bf;
  --intro-accent: #8fb6d6;
}

/* Helles Erscheinungsbild.
   Die Farbwerte stammen aus der eigenen Art Direction „dokumentarische Unruhe":
   Schieferblau, Betongrau, verblasstes Grün, warmes Papier, kommunales Rot als
   Warnfarbe. Vorher stand hier ein Standard-Lila ohne Bezug zum Spiel. */
:root, html[data-theme="light"] {
  color-scheme: light;
  --ink: #1a2029;
  --muted: #6b7684;
  --paper: #f4f5f6;           /* Betongrau, sehr hell */
  --surface: #fff;
  --surface-raised: #fafbfc;   /* Sheets und schwebende Bedienelemente */
  --surface-soft: #eceff2;     /* ruhige Flächen, Chips, Felder */
  --surface-sunken: #fff;      /* Eingaben */
  --paper-warm: #fffdf3;       /* Notizen, Dokumente, Storyfäden */
  --paper-warm-edge: #ded8bd;
  --line: rgba(26, 32, 41, .12);
  --line-strong: rgba(26, 32, 41, .22);
  --accent: #38607f;           /* Schieferblau */
  --accent-veil: rgba(56, 96, 127, .22);
  --accent-soft: #e6edf3;
  --accent-ink: #2b4d67;
  --danger: #a8412f;           /* kommunales Rot */
  --danger-soft: #f8e9e5;
  --success-ink: #47705a;      /* verblasstes Grün */
  --success-soft: #e2eee7;
  --warning-ink: #8a6a24;
  --warning-soft: #f8eed4;
  --shadow-card: 0 3px 12px rgba(23, 32, 44, .045);
  --shadow-float: 0 2px 10px rgba(20, 30, 45, .18);
  --chrome: rgba(249, 250, 252, .92);   /* Kopfzeile, Tabs, Eingabeleiste */
  --tab-active-bg: #242a36;
  --tab-active-ink: #fff;
}

/* Dunkles Erscheinungsbild */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e8edf5;
  --muted: #98a3b4;
  --paper: #12161d;
  --surface: #1c222c;
  --surface-raised: #232a36;
  --surface-soft: #272f3c;
  --surface-sunken: #161c25;
  --paper-warm: #211f18;
  --paper-warm-edge: #4a442f;
  --line: rgba(255, 255, 255, .1);
  --line-strong: rgba(255, 255, 255, .2);
  --accent: #7fa8c9;
  --accent-veil: rgba(127, 168, 201, .26);
  --accent-soft: #24313d;
  --accent-ink: #a9c9e2;
  --danger: #e5a292;
  --danger-soft: #3a2622;
  --success-ink: #9cc4a9;
  --success-soft: #23302a;
  --warning-ink: #d9bd82;
  --warning-soft: #332d1e;
  --shadow-card: 0 3px 12px rgba(0, 0, 0, .3);
  --shadow-float: 0 2px 12px rgba(0, 0, 0, .5);
  --chrome: rgba(24, 29, 38, .92);
  --tab-active-bg: #e8edf5;
  --tab-active-ink: #12161d;
}

/* „Automatisch" folgt dem Betriebssystem. Ohne diese Regel war die Voreinstellung
   faktisch immer hell — data-theme="system" traf zuvor keine einzige Regel. */
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    color-scheme: dark;
    --ink: #e8edf5;
    --muted: #98a3b4;
    --paper: #12161d;
    --surface: #1c222c;
    --surface-raised: #232a36;
    --surface-soft: #272f3c;
    --surface-sunken: #161c25;
    --paper-warm: #211f18;
    --paper-warm-edge: #4a442f;
    --line: rgba(255, 255, 255, .1);
    --line-strong: rgba(255, 255, 255, .2);
    --accent: #7fa8c9;
  --accent-soft: #24313d;
    --accent-ink: #a9c9e2;
    --danger: #e5a292;
    --danger-soft: #3a2622;
    --success-ink: #9cc4a9;
    --success-soft: #23302a;
    --warning-ink: #d9bd82;
    --warning-soft: #332d1e;
    --shadow-card: 0 3px 12px rgba(0, 0, 0, .3);
    --shadow-float: 0 2px 12px rgba(0, 0, 0, .5);
    --chrome: rgba(24, 29, 38, .92);
    --tab-active-bg: #e8edf5;
    --tab-active-ink: #12161d;
  }
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
/* Textgrößen-Regler aus den Einstellungen: alle rem-Maße hängen hieran. */
html { font-size: calc(16px * var(--text-scale)); }
body {
  margin: 0;
  color: #fff;
  /* Schieferblau und verblasstes Grün statt des früheren Lila-Türkis-Verlaufs:
     Der Raum um das Telefon soll nach Aldersbrück aussehen, nicht nach Vorlage. */
  background:
    radial-gradient(circle at 22% 15%, rgba(56, 96, 127, .3), transparent 34%),
    radial-gradient(circle at 78% 78%, rgba(71, 112, 90, .2), transparent 38%),
    #0e1116;
}
/* Grafik: Gerätehardware und Icon-Flächen, themenunabhängig. */
.phone-skip-link { position: fixed; z-index: 1000; left: 12px; top: 8px; transform: translateY(-160%); padding: 9px 12px; border-radius: var(--radius-sm); color: #111; background: #ffbf47; font-weight: 800; }
.phone-skip-link:focus { transform: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
/* Ziehgesten (Entsperren, Karte ziehen, Pull-Reflexe) dürfen keinen OS-Text
   blau markieren — nichts sagt lauter „Webseite". Eingaben und Dokumentpapier
   bleiben wählbar: Belege muss man zitieren können. */
* { -webkit-user-select: none; user-select: none; }
/* Auch Chat, Posts und Kommentare sind zitierbares Material: Wer eine Aussage
   in seine Notizen übernehmen will, muss sie kopieren können (Eigenplaytest
   19.08., UI-Notiz "Man kann nichts von Nachrichten kopieren"). */
input, textarea, [contenteditable="true"], .document-paper, .accessible-transcript,
.bubble-text, .post-text, .comment-body p, .post-quote span, .voice-transcript { -webkit-user-select: text; user-select: text; }
img { -webkit-user-drag: none; }
button, a, input, textarea, select, summary { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid #ffbf47; outline-offset: 3px; }

.stage {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(270px, 410px) minmax(360px, 520px);
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 7vw, 120px);
  padding: 32px;
}

.player-build:not(.developer-mode) .debug-panel { display: none; }
.player-build:not(.developer-mode) .stage { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.developer-mode .stage { align-items: stretch; padding-block: 22px; }

/* Entwicklerpanel: eigene Scrollfläche, damit lange Listen die Seite nicht dehnen. */
.debug-panel { max-height: calc(100vh - 44px); overflow-y: auto; scrollbar-width: thin; padding: 14px 16px 20px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(14,18,26,.72); color: #cbd2de; font-size: 12px; line-height: 1.45; }
.dbg-head { position: sticky; z-index: 2; top: -14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -14px -16px 12px; padding: 12px 16px; background: rgba(14,18,26,.96); border-bottom: 1px solid rgba(255,255,255,.09); }
.dbg-head strong { display: block; color: #fff; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.dbg-head small { color: #7e899b; font-size: 11px; }
.dbg-section { margin-bottom: 8px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.03); }
.dbg-section > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; color: #e4e8ef; font-weight: 700; cursor: pointer; }
.dbg-body { padding: 0 12px 12px; }
.dbg-block { margin-top: 12px; }
.dbg-block h4, .dbg-body h4 { margin: 0 0 6px; color: #8e99ac; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.dbg-detail { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.09); }
.dbg-detail h3 { margin: 0; color: #fff; font-size: 14px; }
.dbg-input { width: 100%; margin-bottom: 8px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; color: #e6eaf1; background: rgba(255,255,255,.06); font: inherit; outline: none; }
.dbg-input:focus { border-color: var(--accent); }
.dbg-list { max-height: 210px; overflow-y: auto; scrollbar-width: thin; }
.dbg-row { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 0; border-radius: 7px; color: #d3d9e4; background: transparent; text-align: left; font: inherit; }
.dbg-row:hover { background: rgba(255,255,255,.07); }
.dbg-row.active { color: #fff; background: rgba(124,109,242,.34); }
.dbg-row small { flex: 0 0 auto; color: #808b9d; font-size: 10px; }
.dbg-rows { display: grid; grid-template-columns: minmax(74px, auto) 1fr; gap: 3px 10px; margin: 0; }
.dbg-rows.wide { grid-template-columns: minmax(150px, auto) 1fr; }
.dbg-rows dt { color: #808b9d; }
.dbg-rows dd { margin: 0; color: #dfe4ec; overflow-wrap: anywhere; }
.dbg-grid { display: grid; gap: 8px; }
.dbg-card { margin: 7px 0; padding: 8px 9px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(255,255,255,.04); }
.dbg-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.dbg-card-head strong { min-width: 0; color: #e8ecf3; font-size: 11px; font-weight: 700; overflow-wrap: anywhere; }
.dbg-card-head small { flex: 0 0 auto; color: #808b9d; font-size: 10px; }
.dbg-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.dbg-json { max-height: 180px; overflow: auto; margin: 7px 0 0; padding: 7px 8px; border-radius: 7px; background: rgba(0,0,0,.22); color: #dbe2ec; font: 10px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.dbg-meter { display: grid; grid-template-columns: 88px 1fr 38px; align-items: center; gap: 7px; margin: 3px 0; font-size: 11px; }
.dbg-meter-label { color: #9aa4b5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbg-meter-track { position: relative; height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.dbg-meter-track i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.dbg-meter.signed .dbg-meter-track::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.25); }
.dbg-meter-value { color: #cfd5e0; text-align: right; font-variant-numeric: tabular-nums; }
.dbg-sub { margin: 3px 0; color: #aab3c2; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.dbg-tag { display: inline-block; padding: 1px 6px; border-radius: var(--radius-full); background: rgba(255,255,255,.1); color: #c3cad7; font-size: 10px; font-weight: 700; }
.dbg-tag.pursued, .dbg-tag.active, .dbg-tag.prioritized { background: rgba(108,217,149,.2); color: #8fe0b0; }
.dbg-tag.blocked, .dbg-tag.failed { background: rgba(221,89,107,.22); color: #f0a2ac; }
.dbg-tag.used { background: rgba(108,217,149,.24); color: #8fe0b0; }
.dbg-memory { margin: 6px 0; padding: 7px 9px; border-left: 2px solid rgba(255,255,255,.12); border-radius: 0 8px 8px 0; background: rgba(255,255,255,.04); }
.dbg-memory.used { border-left-color: #6cd995; background: rgba(108,217,149,.09); }
.dbg-memory-head { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.dbg-memory-text { color: #e2e6ee; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.dbg-memory-ref { display: block; margin-top: 3px; color: #6f7a8c; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 9px; overflow-wrap: anywhere; }
.dbg-goal { margin: 7px 0; padding: 7px 9px; border-radius: 9px; background: rgba(255,255,255,.04); }
.dbg-goal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dbg-goal-head strong { color: #e8ecf3; font-size: 11px; font-weight: 650; }
.dbg-rel { margin: 5px 0; }
.dbg-rel > summary { padding: 4px 0; color: #d3d9e4; cursor: pointer; }
.dbg-quote { margin: 8px 0 0; padding: 8px 10px; border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; background: rgba(124,109,242,.1); color: #e2e6ee; font-size: 11px; }
.dbg-empty { margin: 4px 0; color: #6f7a8c; font-size: 11px; }
.dbg-count { color: #7e899b; font-size: 11px; font-weight: 500; }
.dbg-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.dbg-button { padding: 6px 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; color: #dfe4ec; background: rgba(255,255,255,.07); font: inherit; font-size: 11px; font-weight: 650; }
.dbg-button:hover { background: rgba(255,255,255,.13); }
.dbg-button.danger { border-color: rgba(221,89,107,.4); color: #f0a2ac; background: rgba(221,89,107,.14); }
.dbg-command { display: grid; gap: 6px; }
.dbg-note { margin: 8px 0 0; color: #6f7a8c; font-size: 10px; line-height: 1.45; }
.debug-panel::-webkit-scrollbar, .dbg-list::-webkit-scrollbar { width: 8px; }
.debug-panel::-webkit-scrollbar-thumb, .dbg-list::-webkit-scrollbar-thumb { border-radius: 4px; background: rgba(255,255,255,.16); }

.phone-shell { width: min(100%, 520px); display: flex; justify-content: center; }
.phone-bezel {
  position: relative;
  width: min(var(--phone-w), calc(100vw - 28px));
  height: min(var(--phone-h), calc(100vh - 34px));
  min-height: 650px;
  overflow: hidden;
  border: 8px solid #050608;
  border-radius: 52px;   /* Grafik: Gehäusekrümmung des Telefons, kein Bedienelement. */
  background: #0a0c12;
  box-shadow: 0 35px 100px rgba(0,0,0,.68), 0 0 0 1px #343842, inset 0 0 0 1px rgba(255,255,255,.1);
}
.phone-wallpaper {
  position: absolute; inset: 0;
  background:
    linear-gradient(160deg, rgba(8,12,20,.12), rgba(8,12,20,.62)),
    radial-gradient(circle at 72% 22%, #4d7893 0, transparent 32%),
    radial-gradient(circle at 24% 64%, #3d6154 0, transparent 43%),
    linear-gradient(145deg, #2a3d4d, #172530 54%, #0f151b);
  transition: opacity var(--motion-calm);
}
.phone-bezel.in-app .phone-wallpaper { opacity: 0; }
/* pointer-events: none aus demselben Grund wie beim Home-Indikator: reine
   Gehaeusezier (aria-hidden) ueber dem Inhalt. 112x31 px oben mitte - der
   Streifen deckte die Statusleiste teilweise ab. Gefunden nicht von einer
   Persona, sondern von der Regelpruefung zum Home-Indikator-Befund. */
/* Grafik: Gerätehardware und Icon-Flächen, themenunabhängig. */
.dynamic-island { position: absolute; z-index: 50; top: 11px; left: 50%; transform: translateX(-50%); width: 112px; height: 31px; border-radius: var(--radius-lg); background: #050608; pointer-events: none; }
/* Grafik: Gerätehardware und Icon-Flächen, themenunabhängig. */
.dynamic-island i { display: block; width: 7px; height: 7px; margin: 12px 0 0 88px; border-radius: 50%; background: #15233d; box-shadow: inset 0 0 3px #294786; }
.statusbar { position: absolute; z-index: 45; top: 0; left: 0; right: 0; height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 7px 22px 0; pointer-events: none; }
.statusbar button { pointer-events: auto; border: 0; color: inherit; background: transparent; font-size: var(--text-sm); font-weight: 750; padding: 7px 4px; }
/* Die Uhr in der Statusleiste ist der Einstieg ins Zeitmodell und öffnet die
   Uhr-App — als nackter Text wird sie nie angetippt. Dezente Pille in der
   jeweiligen Leistenfarbe, damit sie als Bedienelement lesbar ist. */
.status-time { border-radius: var(--radius-full); padding: 5px 11px; background: color-mix(in srgb, currentColor 17%, transparent); }
.status-time:hover { background: color-mix(in srgb, currentColor 28%, transparent); }
/* Grafik: Statussymbole in fester Größe — sie sind Gerätechrome und dürfen
   nicht mit der Textgrößen-Einstellung wachsen. */
.status-icons { display: flex; gap: 4px; align-items: center; }
.status-icons svg { height: 11px; width: auto; display: block; }
.status-icons .status-akku { height: 12px; }
.status-right { display: flex; align-items: center; gap: 2px; pointer-events: auto; }
/* Grafik: Gerätechrome, feste Größe. */
.status-lock { display: grid; place-items: center; opacity: .78; }
.status-lock svg { width: 15px; height: 15px; display: block; }
.status-lock:hover { opacity: 1; }
/* Die Statusleiste ist Gerätechrome und muss unantastbar sein: vorher schob
   sich gescrollter Formulartext sichtbar unter Uhrzeit und Island durch. In
   Apps trägt sie denselben Grund wie der App-Kopf direkt darunter; außerhalb
   (Einstieg, Sperrbildschirm, Homescreen) hält ein weicher dunkler Schleier
   die weiße Uhrzeit über scrollendem Inhalt lesbar. */
.phone-bezel.in-app .statusbar { color: var(--ink); background: var(--chrome); backdrop-filter: blur(18px); }
.phone-bezel:not(.in-app) .statusbar { background: linear-gradient(180deg, rgba(9,13,21,.8), rgba(9,13,21,.3) 76%, rgba(9,13,21,0)); backdrop-filter: blur(10px); }

.app-header { position: absolute; z-index: 35; top: 52px; left: 0; right: 0; height: 56px; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; padding: 0 8px; color: var(--ink); background: var(--chrome); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.app-header.hidden { display: none; }
/* Grafik: Glyphengröße gehört zum festen Kasten und darf nicht mit der Textgröße wachsen. */
/* Grafik: Gerätechrome. Vorher trugen diese Knöpfe die Zeichen ‹ und ⌂ in
   31 px — eine feste Pixelgröße, die ohnehin nicht mit der Textgröße wuchs. */
.app-nav-button { display: grid; place-items: center; border: 0; width: 40px; height: 40px; border-radius: 50%; background: transparent; color: var(--ink); }
.app-nav-button svg { width: 22px; height: 22px; display: block; }
/* Der Zurück-Knopf entfällt auf App-Wurzeln, behält aber seine Rasterspalte —
   sonst rutscht der mittig gesetzte Titel nach links. visibility statt display
   nimmt ihn zugleich aus Tabreihenfolge und Vorlesereihenfolge. */
.app-header .app-nav-button[hidden] { display: block; visibility: hidden; }
.app-nav-button:hover { background: var(--surface-soft); }
.home-button { font-size: var(--text-2xl); }
.app-title-wrap { min-width: 0; text-align: center; }
.app-title { font-weight: 760; font-size: var(--text-xl); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-subtitle { color: var(--muted); font-size: var(--text-2xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.screen { position: absolute; z-index: 10; inset: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; color: var(--ink); background: var(--paper); container-type: inline-size; container-name: screen; }
.screen::-webkit-scrollbar { display: none; }
.phone-bezel.in-app .screen { padding-top: 108px; padding-bottom: 30px; }
.phone-bezel.in-app .screen:has(.composer), .phone-bezel.in-app .screen:has(.map-app) { overflow: hidden; }
.phone-bezel:not(.in-app) .screen { background: transparent; color: #fff; }
.boot-screen { height: 100%; display: grid; place-content: center; text-align: center; color: rgba(255,255,255,.65); font-size: var(--text-sm); letter-spacing: .03em; }
/* Grafik: Glyphengröße gehört zum festen Kasten und darf nicht mit der Textgröße wachsen. */
.boot-mark { display: grid; place-items: center; width: 66px; height: 66px; margin: auto; border-radius: var(--radius-lg); background: var(--accent); color: #fff; font-size: 40px; font-weight: 900; box-shadow: 0 14px 40px var(--accent-veil); }
/* pointer-events: none, weil der Streifen reine Geraetezier ist (aria-hidden)
   und mit z-index 60 ueber dem Inhalt liegt: Ohne das schluckt er Klicks auf
   alles, was unter ihm endet - fuer jeden Spieler, nicht nur im Test.
   Blindlauf VL4: Playwright nannte ihn woertlich als abfangenden Knoten. */
.home-indicator { position: absolute; z-index: 60; left: 50%; bottom: 8px; width: 132px; height: 5px; transform: translateX(-50%); border-radius: var(--radius-xs); background: rgba(0,0,0,.75); mix-blend-mode: difference; pointer-events: none; }

.home-screen { min-height: 100%; padding: 64px 22px 42px; display: flex; flex-direction: column; }
.home-date { color: rgba(255,255,255,.72); font-size: var(--text-lg); text-align: center; }
.home-time { margin-top: -4px; font-size: var(--text-display); line-height: 1.1; letter-spacing: -.065em; font-weight: 220; text-align: center; text-shadow: 0 2px 22px rgba(0,0,0,.22); }
.home-lock { align-self: center; min-height: 36px; margin-top: 4px; padding: 6px 11px; border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius-full); color: rgba(255,255,255,.72); background: rgba(10,14,20,.22); font-size: var(--text-2xs); }
/* Einstieg und App-Vorstellung: eigener Vollbildschirm über dem Hintergrundbild.
   Dunkles Glas wie der Sperrbildschirm, unabhängig vom Erscheinungsbild — es ist
   der Moment vor dem Telefon, nicht im Telefon. */
.intro-screen { min-height: 100%; display: flex; flex-direction: column; padding: 62px 24px 34px; color: #fff; background: linear-gradient(165deg, rgba(9,13,21,.3), rgba(9,13,21,.82)); text-align: center; }
.intro-dots { display: flex; justify-content: center; gap: 7px; margin-bottom: auto; }
.intro-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.24); transition: width var(--motion-calm), background var(--motion-calm); }
.intro-dots i.done { background: rgba(255,255,255,.5); }
.intro-dots i.active { width: 22px; border-radius: var(--radius-xs); background: var(--intro-accent); }
.intro-body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 26px 0; }
.intro-art { width: 84px; height: 84px; margin-bottom: 14px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-lg); color: var(--intro-accent); background: rgba(255,255,255,.07); }
.intro-art svg { width: 46px; height: 46px; }
.intro-kicker { color: var(--intro-accent); font-size: var(--text-2xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.intro-screen h1 { margin: 6px 0 0; font-size: var(--text-2xl); line-height: 1.2; letter-spacing: -.02em; }
.intro-screen p { margin: 10px 0 0; max-width: 30ch; color: rgba(255,255,255,.78); font-size: var(--text-md); line-height: 1.55; }
.intro-hint { color: rgba(255,255,255,.55) !important; font-size: var(--text-xs) !important; }
.intro-apps { margin-top: 22px; }
.intro-apps > small { display: block; margin-bottom: 10px; color: rgba(255,255,255,.45); font-size: var(--text-2xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.intro-app-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.intro-app { display: grid; gap: 6px; justify-items: center; }
.intro-app /* Grafik: Glyphengröße gehört zum festen Kasten und darf nicht mit der Textgröße wachsen. */
.app-icon { width: 46px; height: 46px; border-radius: 22.4%; font-size: var(--text-2xl); }
.intro-app small { color: rgba(255,255,255,.72); font-size: var(--text-2xs); }
.intro-form { width: 100%; margin-top: 20px; display: grid; gap: 11px; text-align: left; }
.intro-form > label { display: grid; gap: 5px; font-size: var(--text-sm); font-weight: 650; }
.intro-form legend { color: rgba(255,255,255,.74); font-size: var(--text-sm); font-weight: 700; }
.intro-form fieldset { border: 0; padding: 0; margin: 8px 0 0; }
.intro-form .field { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }
.intro-form .field::placeholder { color: rgba(255,255,255,.5); }
/* Grafik: Gerätehardware und Icon-Flächen, themenunabhängig. */
.intro-form .field option { color: #17202c; }
.intro-form .profile-choices label { color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); }
.intro-form .profile-choices label:has(:checked) { border-color: var(--intro-accent); background: var(--accent-veil); font-weight: 650; }
.intro-form .profile-choices input { accent-color: var(--intro-accent); }
.intro-form.needs-name input[name="displayName"] { border-color: var(--intro-danger); box-shadow: 0 0 0 3px rgba(255,138,155,.18); }
/* Der Hinweis steht am Feld, nicht nur als Einblendung unten: Die Einblendung
   liegt über der Aktionsleiste und verdeckt genau den Knopf, den man gerade
   gedrückt hat. */
.field-error { display: none; margin-top: 5px; color: var(--danger); font-size: var(--text-2xs); font-weight: 650; line-height: 1.4; }
.needs-name .field-error { display: block; }
.intro-form .field-error { color: var(--intro-danger); }
/* Die Aktionen bleiben am unteren Rand sichtbar. Ohne sticky schob das lange
   Profilformular sie aus dem Bild — der Einstieg wirkte dann wie eingefroren.
   Der Grund läuft schnell ins Opake: durch den früheren Halbschleier schienen
   die „Stärken"-Kästchen mitten im Primärknopf durch. */
.intro-actions { position: sticky; bottom: -34px; z-index: 2; display: grid; gap: 10px; margin-top: auto; padding: 16px 0 34px; background: linear-gradient(180deg, transparent, rgba(9,13,21,.94) 22%, #0b0f16 70%); }
.intro-actions .primary-button { width: 100%; justify-content: center; padding: 14px; font-size: var(--text-lg); }
.intro-skip { border: 0; padding: 8px; color: rgba(255,255,255,.6); background: transparent; font: inherit; font-size: var(--text-sm); }
.intro-skip:hover { color: #fff; }
/* Grafik: Glyphengröße gehört zum festen Kasten und darf nicht mit der Textgröße wachsen. */
.app-intro .intro-icon { width: 76px; height: 76px; margin-bottom: 16px; border-radius: var(--radius-lg); font-size: 34px; }
html.reduced-motion .intro-dots i { transition: none; }
.home-widget { margin: 18px 0 0; padding: 15px 16px; border: 1px solid rgba(255,255,255,.17); border-radius: var(--radius-lg); color: #fff; background: rgba(22,26,37,.39); backdrop-filter: blur(20px); box-shadow: inset 0 1px rgba(255,255,255,.09); text-align: left; }
.widget-label { font-size: var(--text-2xs); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.widget-title { margin-top: 5px; font-size: var(--text-lg); font-weight: 700; }
.widget-meta { margin-top: 3px; font-size: var(--text-sm); color: rgba(255,255,255,.63); }
/* „Als Nächstes" ist eine Zeitangabe, „Du kannst weitermachen" eine Empfehlung.
   Beide sahen gleich aus und lasen sich dadurch als Dopplung. Die Empfehlung
   trägt jetzt eine Akzentkante und etwas mehr Gewicht — sie ist das Angebot,
   die Zeitangabe bleibt ruhige Information. */
.gap-direction { display: grid; gap: 3px; margin: 10px 0 4px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.13); border-left: 3px solid var(--intro-accent); border-radius: var(--radius-lg); color: #fff; background: rgba(20,25,34,.42); backdrop-filter: blur(16px); text-align: left; }
.gap-direction > span { color: var(--intro-accent); font-size: var(--text-2xs); font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.gap-direction strong { font-size: var(--text-md); }
.gap-direction small { color: rgba(255,255,255,.64); font-size: var(--text-2xs); line-height: 1.4; }
.return-digest { margin: 14px 0 12px; padding: 14px; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-lg); color: #fff; background: rgba(13,18,27,.6); backdrop-filter: blur(24px); box-shadow: 0 12px 36px rgba(0,0,0,.18); }
.digest-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.digest-head span { color: var(--accent-ink); font-size: var(--text-2xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.digest-head h2 { margin: 3px 0 0; font-size: var(--text-xl); }
.return-digest > p { margin: 8px 0 12px; color: rgba(255,255,255,.72); font-size: var(--text-2xs); line-height: 1.45; }
.return-digest .mini-button { color: #fff; background: rgba(255,255,255,.12); }
.digest-level { margin-top: 10px; }
.digest-level h3 { margin: 0 0 5px; color: rgba(255,255,255,.48); font-size: var(--text-2xs); letter-spacing: .08em; text-transform: uppercase; }
.digest-level button { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 8px 0; border: 0; border-top: 1px solid rgba(255,255,255,.08); color: #fff; background: transparent; text-align: left; font-size: var(--text-xs); line-height: 1.35; }
.digest-level button small { color: rgba(255,255,255,.45); font-size: var(--text-2xs); white-space: nowrap; }
/* Drei Spalten statt vier: neun Apps ergaben 4 + 4 + 1, das neunte Icon stand
   allein in einer eigenen Reihe. 3 × 3 geht glatt auf und macht die Ziele größer.
   Kein margin-top:auto mehr — das drückte das Raster an den unteren Rand und
   riss mitten in den Homescreen ein Loch von rund 300 px. */
.app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 10px; margin-top: var(--space-6); }
.app-icon-button { position: relative; border: 0; min-width: 0; color: #fff; background: transparent; text-align: center; padding: 0; }
/* Dezentes Anheben beim Zeigen, kurzes Eindrücken beim Tippen. Der globale
   Schalter html.reduced-motion (weiter unten) legt beides still. */
.app-icon-button .app-icon { transition: transform var(--motion-quick) var(--motion-ease), box-shadow var(--motion-quick) var(--motion-ease); }
.app-icon-button:hover:not(.locked) .app-icon,
.app-icon-button:focus-visible:not(.locked) .app-icon { transform: translateY(-3px) scale(1.03); box-shadow: 0 13px 24px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.3); }
.app-icon-button:active:not(.locked) .app-icon { transform: translateY(-1px) scale(.94); transition-duration: .09s; }
.app-icon-button:hover:not(.locked) .app-icon-label { opacity: 1; }
.app-grid .app-icon-button { animation: app-icon-in .34s cubic-bezier(.2,.9,.3,1) backwards; }
@keyframes app-icon-in { from { transform: translateY(9px) scale(.9); opacity: 0; } }
.app-icon-button.locked { opacity: .48; }
/* Grafik: Kartenlegende und Icon-Zustand, themenunabhängig. */
.app-icon-button.locked .app-icon::after { content: "·"; position: absolute; display: grid; place-items: center; width: 20px; height: 20px; margin: 42px 0 0 42px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; color: #fff; background: #252b35; font-size: var(--text-lg); }
/* Grafik: Glyphengröße gehört zum festen Kasten und darf nicht mit der Textgröße wachsen. */
/* 22,4 % Eckenradius ist die Superellipse, mit der iOS seine Icons schneidet —
   ein normaler Rundrahmen sieht daneben immer nach Android aus. Schattenlage
   darunter, Lichtkante innen oben.
   Grafik: Kachelmaß und Ersatzglyphe sind fest, sie sind Gerätechrome. */
.app-icon { display: grid; place-items: center; width: 62px; height: 62px; margin: auto; border-radius: 22.4%; color: #fff; background: var(--app-color); box-shadow: 0 6px 14px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.22), inset 0 .5px 0 rgba(255,255,255,.34); font-size: 28px; font-weight: 800; }
/* Grafik: Gerätehardware und Icon-Flächen, themenunabhängig. */
.app-icon.dark { color: #20232a; }
.app-icon.art { overflow: hidden; padding: 0; background: var(--app-color); }
.app-icon.art svg { display: block; width: 100%; height: 100%; }
.app-icon-label { display: block; margin-top: 6px; font-size: var(--text-xs); white-space: nowrap; text-shadow: 0 1px 4px rgba(0,0,0,.7); overflow: hidden; text-overflow: ellipsis; }
.app-badge { position: absolute; top: -5px; right: calc(50% - 35px); min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--radius-sm); background: var(--danger); color: #fff; border: 2px solid rgba(20,25,34,.75); font-size: var(--text-xs); font-weight: 800; line-height: 16px; }

.section-pad { padding: 15px; }
.app-tabs { position: sticky; z-index: 8; top: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 8px 12px; background: var(--chrome); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.app-tab { border: 0; border-radius: var(--radius-sm); padding: 8px 6px; color: var(--muted); background: transparent; font-size: var(--text-sm); font-weight: 680; }
.app-tab.active { color: var(--tab-active-ink); background: var(--tab-active-bg); }
/* Primärnavigation von PARALLAX in der Daumenzone. Sie klebt unten am Bildschirm
   statt oben am Inhalt: ein Telefon wird mit dem Daumen bedient, und bei 200 %
   Textgröße lief die obere Zeile aus dem 420-px-Rahmen. */
.tab-bar { position: sticky; z-index: 9; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 6px 8px calc(30px + env(safe-area-inset-bottom)); background: var(--chrome); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
/* Der Bildschirm hält sonst unten 30 px für den Home-Indicator frei. Bei einer
   Tableiste übernimmt die Leiste diesen Streifen selbst — sonst scrollt der
   Feed sichtbar unter ihr hindurch. */
.phone-bezel.in-app .screen:has(.tab-bar) { padding-bottom: 0; }
.tab-bar .app-tab { padding: 9px 4px; border-radius: var(--radius-sm); font-size: var(--text-xs); }
/* Der Inhalt darüber muss die Restfläche füllen, sonst steht die Leiste bei
   kurzen Ansichten mitten im Bildschirm. Keine gerechnete Leistenhöhe: die
   ändert sich mit der Textgröße. Der Inhalt wächst, die Leiste bleibt unten und
   klebt beim Scrollen langer Ansichten am Rand. */
.screen:has(.tab-bar) { display: flex; flex-direction: column; }
.tabbed-view { flex: 1 0 auto; padding-bottom: var(--space-2); }
.empty-state { padding: 70px 28px; text-align: center; color: var(--muted); }
.empty-state .empty-title { margin: 0 0 8px; color: var(--ink); font-size: var(--text-lg); font-weight: 700; }
.empty-state .muted { margin: 0; line-height: 1.5; }
/* Grafik: Glyphengröße gehört zum festen Kasten und darf nicht mit der Textgröße wachsen. */
.empty-icon { display: block; margin-bottom: 12px; font-size: 42px; opacity: .55; }
.empty-icon svg { width: 40px; height: 40px; color: var(--muted); }
/* Rückfallebene für Aufrufer, die noch ein Schriftzeichen statt eines Symbols
   übergeben — die Größe kommt von .empty-icon. */
.empty-glyph { line-height: 1; }
/* Ein Leerzustand ohne Ausweg ist eine Sackgasse. Wo es eine sinnvolle nächste
   Handlung gibt, steht sie hier. */
.empty-action { margin-top: var(--space-4); }

.feed { padding: 10px 10px 28px; }
.post-card, .surface-card, .clock-card { margin-bottom: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); overflow: hidden; }
/* Ziel eines Faden- oder Beitragslinks: kurz hervorheben, damit klar ist,
   WOHIN die Weitermachen-Karte geführt hat. */
.post-card.post-highlight { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.post-head { display: flex; align-items: center; gap: 10px; padding: 13px 14px 8px; }
.avatar { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); color: #fff; background: var(--avatar-color, #667); font-size: var(--text-2xl); box-shadow: inset 0 1px rgba(255,255,255,.24); }
.post-author { min-width: 0; flex: 1; }
.post-name { font-size: var(--text-md); font-weight: 760; }
.post-meta, .muted { color: var(--muted); font-size: var(--text-xs); }
.post-text { padding: 4px 14px 13px; font-size: var(--text-lg); line-height: 1.48; white-space: pre-wrap; overflow-wrap: anywhere; }
.post-media { display: block; width: 100%; max-height: 330px; object-fit: cover; background: var(--surface-soft); cursor: pointer; }
/* Ein Wort wie „Kommentieren" darf nie schmaler werden als es selbst ist:
   flex:1 mit min-width würde es unter overflow:hidden der Karte abschneiden. */
.post-actions { display: flex; align-items: center; gap: 4px; padding: 6px 8px 8px; border-top: 1px solid rgba(20,30,44,.07); }
.post-actions .text-button { flex: 0 1 auto; min-width: max-content; padding: 8px 9px; white-space: nowrap; }
.post-actions .post-more { flex: 0 0 auto; margin-left: auto; min-width: 36px; font-size: var(--text-lg); line-height: 1; }
.danger-text { color: var(--danger) !important; }
.public-composer { display: grid; gap: 9px; margin-bottom: 12px; padding: 13px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(145deg, var(--surface), var(--accent-soft)); box-shadow: 0 5px 18px rgba(70,55,150,.08); }
/* Stabile eine Spalte (Eigenplaytest 19.08. U10): Eingeblendete Zeilen hängen
   sich per order ans Ende, statt Textfeld und Posten-Knopf zu verschieben —
   das Layout wächst nur nach unten und springt beim Tippen nicht mehr. */
.public-composer > textarea { order: 1; }
.public-composer > button { order: 2; }
.public-composer > label { order: 3; }
.public-composer > small { order: 4; }
.public-composer textarea { min-height: 2.6em; resize: none; field-sizing: content; max-height: 40vh; border: 0; border-bottom: 1px solid var(--line); padding: 6px 3px 10px; color: var(--ink); background: transparent; font: inherit; line-height: 1.45; outline: none; }
.public-composer fieldset { display: grid; gap: 6px; border: 0; padding: 0; color: var(--ink); font-size: var(--text-xs); }
.profile-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 7px; margin-top: 6px; }
.profile-choices label { display: flex; align-items: flex-start; gap: 7px; min-height: 34px; padding: 7px 9px; border-radius: var(--radius-sm); background: var(--surface-soft); font-size: var(--text-sm); }
.collection-toolbar { padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.collection-toolbar .search-box { padding-bottom: 8px; }
/* Horizontal scrollbar statt dreispaltigem Grid: die Labels dürfen ihre volle
   Länge behalten, statt auf ~120px zusammengequetscht zu werden. */
.filter-row { display: flex; gap: 7px; padding: 0 12px 8px; overflow-x: auto; scrollbar-width: none; }
.filter-row::-webkit-scrollbar { display: none; }
.filter-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--radius-full); color: var(--muted); background: var(--surface); font-size: var(--text-xs); font-weight: 650; white-space: nowrap; }
.filter-chip.active { border-color: var(--accent); color: #fff; background: var(--accent); }
.filter-chip .chip-caret { display: inline-flex; opacity: .55; }
.filter-chip .chip-caret svg { width: 13px; height: 13px; }
.filter-chip .chip-clear { display: inline-flex; line-height: 1; }
.filter-chip .chip-clear svg { width: 13px; height: 13px; }
.sort-chip { margin-left: auto; }
.collection-count { display: flex; align-items: center; gap: 6px; padding: 0 13px 9px; color: var(--muted); font-size: var(--text-2xs); }
.collection-reset { flex: 0 0 auto; min-height: 0; padding: 0; color: var(--accent); font-size: var(--text-2xs); text-decoration: underline; }
.facet-option.selected .list-title { color: var(--accent); font-weight: 800; }
.facet-check { color: var(--accent); font-weight: 900; }
.feed-more { width: calc(100% - 24px); margin: 0 12px 18px; }
.calendar-conflict { margin: 6px 0; padding: 6px 8px; border-left: 3px solid #bd6a42; border-radius: var(--radius-xs); background: var(--warning-soft); color: var(--warning-ink); font-size: var(--text-xs); }
/* Untereinander statt nebeneinander: zwei Spalten ergeben im Telefonrahmen
   ~155px Inhaltsbreite, in der deutsche Labels buchstabenweise umbrechen. */
.file-compare-view { display: grid; gap: 10px; padding: 12px; }
.file-compare-view dl { display: grid; grid-template-columns: minmax(76px, auto) 1fr; gap: 6px 12px; margin: 10px 0 0; font-size: var(--text-xs); }
.file-compare-view dt { color: var(--muted); }
.file-compare-view dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.compare-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.compare-card-head h3 { margin: 0; font-size: var(--text-lg); }
.compare-side { color: var(--muted); font-size: var(--text-2xs); font-weight: 800; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
.compare-summary { margin: 10px 0 0; font-size: var(--text-sm); line-height: 1.45; }
/* Ab ~560px Screenbreite (Tablet-Bezel) passen zwei Spalten. Container statt
   Media Query: der Viewport ist auf dem Desktop immer breit, der Bezel nicht. */
@container screen (min-width: 560px) {
  .file-compare-view { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.file-comparison-form { display: grid; gap: 9px; }
.file-comparison-form label { display: grid; gap: 5px; font-size: var(--text-xs); font-weight: 700; color: var(--muted); }
.file-comparison-form small { color: var(--muted); font-size: var(--text-2xs); line-height: 1.45; }
.compare-card { display: grid; align-content: start; }
.compare-preview { margin: 11px 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); }
.compare-preview > summary { padding: 8px 11px; color: var(--ink); font-size: var(--text-xs); font-weight: 700; cursor: pointer; }
.compare-preview-body { max-height: 240px; overflow: auto; overscroll-behavior: contain; padding: 0 9px 9px; }
.compare-preview-body .document-paper { padding: 13px 14px; box-shadow: none; }
.compare-preview-body .media-controls, .compare-preview-body .media-boundary { display: none; }
.compare-result { scroll-margin-top: 120px; }
.settings-group fieldset { border: 0; padding: 0; margin: 10px 0; }
.settings-group legend { font-size: var(--text-sm); font-weight: 700; color: var(--muted); }
.public-composer legend { width: 100%; margin-bottom: 4px; color: var(--muted); font-size: var(--text-2xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

/* Der Verfassen-Bereich fraß die halbe erste Seite, bevor ein Beitrag kam. Jetzt
   ist er eine Zeile hoch und wächst mit dem Text. Bewusst ohne <details> und ohne
   JS-Zustand: render() baut den Bildschirm regelmäßig neu auf, ein gemerkter
   Aufklappzustand ginge dabei verloren. :focus-within und :placeholder-shown
   ergeben sich dagegen jedes Mal neu aus dem, was tatsächlich dasteht. */
/* Der Absendeknopf bleibt sichtbar. Eingeklappt waren Beschriftung, Hinweis UND
   Knopf verborgen — ein Textfeld ohne jedes Bedienelement liest sich als Defekt,
   und genau so hat es ein Blindtester gemeldet. Die Platzersparnis tragen die
   beiden anderen Elemente; der Knopf kostet eine Zeile und beantwortet die
   Frage, ob man hier überhaupt etwas absenden kann. */
.public-composer > label, .public-composer > small { display: none; }
/* Getrennte Regeln, nicht eine Liste: Eine Selektorliste fällt komplett aus,
   sobald ein Selektor darin nicht unterstützt wird. Stünde :focus-within mit
   :has() zusammen, bliebe in einem Browser ohne :has() der Posten-Knopf für
   immer verborgen — man könnte nichts mehr veröffentlichen. */
.public-composer:focus-within > label,
.public-composer:focus-within > small { display: revert; }
.public-composer:has(textarea:not(:placeholder-shown)) > label,
.public-composer:has(textarea:not(:placeholder-shown)) > small { display: revert; }
.public-composer small { color: var(--muted); font-size: var(--text-2xs); line-height: 1.4; }
.comment-stack { padding: 8px 14px; border-top: 1px solid var(--line); background: var(--surface-raised); }
/* Ein Kommentar ist eine Äußerung einer Person, keine Textzeile: Absender,
   Zeitpunkt und Gesicht gehören dazu — sonst kann der Spieler die öffentliche
   Reaktion, aus der sich sein Ruf speist, gar nicht lesen. */
/* Grenze zwischen dem, was seit dem letzten Besuch dazugekommen ist, und dem,
   was schon dastand. Sie steht bewusst still, solange der Feed offen ist. */
/* Ankunft eines Fadensprungs: ein Satz statt nur einer Rahmenfarbe. */
.feed-anchor { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 3px 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); }
.feed-anchor span { color: var(--muted); font-size: var(--text-2xs); font-weight: 750; }
.unread-divider { display: flex; align-items: center; gap: 9px; margin: var(--space-3) var(--space-1); color: var(--accent-ink); font-size: var(--text-2xs); font-weight: 800; letter-spacing: .04em; }
.unread-divider::before, .unread-divider::after { content: ""; height: 1px; flex: 1; background: var(--accent-veil); }
/* Kennzeichen für Konten, hinter denen keine Person steht. Die Art steht als
   Klartext in der Metazeile darunter — das Zeichen ist nur der schnelle Blick. */
.institution-mark { display: inline-flex; margin-left: 5px; color: var(--accent-ink); vertical-align: -.15em; }
.institution-mark svg { width: 1em; height: 1em; }
.comment { display: flex; gap: 8px; padding: 6px 0; }
.comment + .comment { border-top: 1px solid var(--line); }
.comment-avatar { width: 26px; height: 26px; border-radius: var(--radius-sm); font-size: var(--text-md); }
.comment-body { min-width: 0; flex: 1; }
.comment-head { display: flex; align-items: baseline; gap: 6px; }
.comment-head strong { font-size: var(--text-xs); }
.comment-head strong, .comment-name { font-size: var(--text-xs); font-weight: 700; }
.comment-name { padding: 0; border: 0; color: inherit; background: none; font-family: inherit; text-align: left; }
.comment-name:active { opacity: 0.6; }
/* Playtest 25.08. (Joy): Antworten auf Kommentare. Die Antwort rückt ein und
   trägt eine Kante — der Strang ist damit auf einen Blick als Strang lesbar,
   ohne eine zweite Verschachtelungsebene zu brauchen. */
.comment-answer { margin-left: 26px; padding-left: 8px; border-left: 2px solid var(--line); }
.comment-reply { margin-top: 4px; padding: 0; border: 0; color: var(--accent-ink); background: none; font: inherit; font-size: var(--text-2xs); font-weight: 700; }
.comment-reply:active { opacity: 0.6; }
.reply-target { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--surface-raised); font-size: var(--text-2xs); }
.comment-head time { color: var(--muted); font-size: var(--text-2xs); }
.comment-body p { margin: 2px 0 0; font-size: var(--text-xs); line-height: 1.4; overflow-wrap: anywhere; }
.comment-more { width: 100%; margin-top: 4px; padding: 8px 0; border: 0; border-top: 1px solid var(--line); color: var(--accent-ink); background: none; font: inherit; font-size: var(--text-xs); font-weight: 700; text-align: left; }
.comment-list { display: grid; }
/* Eingabefeld direkt im Kommentar-Sheet: Schreiben und Lesen bleiben eine
   Ansicht (Eigenplaytest 19.08. — der alte Sheet-Wechsel wirkte wie ein Bug). */
.comment-composer { display: grid; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.comment-composer textarea { min-height: 2.4em; resize: vertical; }
/* Chat-Anhänge (Eigenplaytest 19.08. U3/M8): Foto in der Blase, zitierte
   Beitragskarte, Anhang-Picker. */
.bubble-photo { display: block; max-width: 100%; margin-bottom: 4px; border-radius: var(--radius-sm); }
/* Absendername im Gruppenchat (Eigenplaytest 19.08. U4). */
.bubble-sender { display: block; margin-bottom: 2px; color: var(--accent-ink); font-size: var(--text-2xs); font-weight: 750; }
.post-quote { display: grid; gap: 2px; width: 100%; margin-bottom: 4px; padding: 8px 10px; border: 0; border-left: 3px solid var(--accent); border-radius: var(--radius-xs); background: var(--surface-soft); font: inherit; font-size: var(--text-xs); text-align: left; }
.post-quote strong { color: var(--accent-ink); }
.post-quote span { color: var(--muted); overflow-wrap: anywhere; }
.post-quote-missing { display: block; padding: 8px 10px; color: var(--muted); font-size: var(--text-2xs); }
.attach-section { margin: 10px 0 6px; font-size: var(--text-xs); color: var(--muted); }
.attach-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.attach-photo { padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: none; overflow: hidden; }
.attach-photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
/* Fester Profil-Einstieg am Feedanfang (Eigenplaytest 19.08. U2). */
.feed-self { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-raised); font: inherit; text-align: left; }
.context-banner { display: grid; gap: 4px; margin-bottom: 11px; padding: 12px; border-left: 4px solid var(--accent); border-radius: var(--radius-xs) 13px 13px 4px; color: var(--ink); background: var(--accent-soft); font-size: var(--text-xs); line-height: 1.4; }
.context-banner strong { color: var(--accent-ink); font-size: var(--text-md); }
.resonance-card { padding: 13px; }
.resonance-card h3 { margin: 0 0 9px; font-size: var(--text-lg); }
/* Angespanntes Standing: Quittung und Ausweg in Warnfarbe, aber ohne Alarm —
   es ist ein sozialer Zustand, kein Fehler. */
.resonance-card.strained { border-left: 3px solid var(--warning-ink); }
.strain-note { margin: 6px 0 8px; color: var(--warning-ink); font-size: var(--text-xs); line-height: 1.45; }
.context-banner.formal-review { border-left-color: var(--warning-ink); background: var(--warning-soft); color: var(--warning-ink); }
.context-banner.formal-review strong { color: var(--warning-ink); }
.reputation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.reputation-grid span { padding: 7px 5px; border-radius: var(--radius-sm); color: var(--muted); background: var(--surface-soft); font-size: var(--text-2xs); text-align: center; }
.reputation-grid b { display: block; margin-top: 2px; color: var(--ink); font-size: var(--text-lg); }
.text-button, .mini-button, .primary-button, .secondary-button, .danger-button { border: 0; border-radius: var(--radius-sm); font-weight: 680; }

/* Strichsymbole in Fließtextzeilen: eine Größe, currentColor, damit sie die
   Farbe ihres Knopfes annehmen — auch im aktiven Zustand und im Dunkelmodus. */
.glyph { width: 1.15em; height: 1.15em; vertical-align: -.2em; flex: 0 0 auto; }
.text-button .glyph { margin-right: 2px; }
.text-button { flex: 1; padding: 8px 5px; color: var(--muted); background: transparent; font-size: var(--text-xs); }
.text-button.active { color: var(--accent); background: var(--accent-soft); }
.mini-button { padding: 7px 9px; color: var(--ink); background: var(--surface-soft); font-size: var(--text-xs); }
.primary-button, .secondary-button, .danger-button { padding: 11px 14px; font-size: var(--text-md); }
.primary-button { color: #fff; background: var(--accent); }
.secondary-button { color: var(--ink); background: var(--surface-soft); }
.danger-button { color: var(--danger); background: var(--danger-soft); }
.secondary-button { display: inline-flex; align-items: center; text-decoration: none; }
.primary-button:disabled { opacity: .55; cursor: default; }
.button-row { display: flex; gap: 8px; flex-wrap: wrap; }

.group-list, .chat-list, .file-list, .note-list { padding: 10px; }
.list-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left; }
.list-row:last-child { border-bottom: 0; }
.list-main { min-width: 0; flex: 1; }
.list-title { font-size: var(--text-lg); font-weight: 730; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-sub { margin-top: 3px; color: var(--muted); font-size: var(--text-sm); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row-chevron { display: inline-flex; align-items: center; color: var(--muted); opacity: .6; }
.row-chevron svg { width: 17px; height: 17px; }
.unread-dot { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-sm); background: var(--accent); color: #fff; font-size: var(--text-2xs); font-weight: 800; }

.group-hero { padding: 22px 18px 16px; text-align: center; background: linear-gradient(150deg, var(--accent-soft), var(--surface-soft)); border-bottom: 1px solid var(--line); }
/* Grafik: Glyphengröße gehört zum festen Kasten und darf nicht mit der Textgröße wachsen. */
.group-avatar { display: grid; place-items: center; width: 68px; height: 68px; margin: auto auto 9px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 8px 26px rgba(32,45,66,.12); font-size: 34px; }
.group-name { font-size: var(--text-xl); font-weight: 790; }
.group-description { margin-top: 5px; color: var(--muted); font-size: var(--text-sm); line-height: 1.4; }
.search-box { padding: 10px 12px; }
.field, .note-editor textarea, .note-editor input { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 12px; color: var(--ink); background: var(--surface); outline: none; }

/* Suchfelder übernehmen die Sprache der Karte: schwebende Pille mit weichem
   Schatten statt eckigem Formularfeld. Die Karte hatte dieses Muster als
   einzige — jetzt sehen Suche, Gruppen, Dateien und Sammlung gleich aus. */
.search-input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  padding: 0 var(--space-4);
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  font-size: var(--text-md);
  outline: none;
  transition: border-color var(--motion-quick) var(--motion-ease), box-shadow var(--motion-quick) var(--motion-ease);
}
.search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-input::placeholder { color: var(--muted); }
.field:focus, .note-editor textarea:focus, .note-editor input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---------------------------------------------------------------------------
   Anfassgefühl. Vorher gab es im ganzen Spiel zwei Druckzustände; alles andere
   reagierte beim Antippen gar nicht. Ein Element, das sich unter dem Finger
   nicht bewegt, fühlt sich wie ein Bild an und nicht wie ein Bedienelement.
   --------------------------------------------------------------------------- */
.primary-button, .secondary-button, .danger-button, .mini-button, .text-button,
.list-row, .filter-chip, .app-tab, .note-row, .source-card, .chat-contact,
.map-controls button, .app-nav-button, .setting-row {
  transition: transform var(--motion-quick) var(--motion-ease),
              background var(--motion-quick) var(--motion-ease),
              border-color var(--motion-quick) var(--motion-ease);
}
.primary-button:active, .secondary-button:active, .danger-button:active,
.mini-button:active, .text-button:active, .filter-chip:active,
.map-controls button:active, .app-nav-button:active { transform: scale(.96); }
.list-row:active, .note-row:active, .source-card:active,
.chat-contact:active, .setting-row:active { transform: scale(.988); }
/* Flächen ohne eigenen Rahmen zeigen den Druck über die Fläche statt über Größe. */
.list-row:active, .note-row:active, .source-card:active,
.chat-contact:active, .setting-row:active { background: var(--surface-soft); }
html.reduced-motion .primary-button, html.reduced-motion .secondary-button,
html.reduced-motion .danger-button, html.reduced-motion .mini-button,
html.reduced-motion .text-button, html.reduced-motion .list-row,
html.reduced-motion .filter-chip, html.reduced-motion .app-tab,
html.reduced-motion .note-row, html.reduced-motion .source-card,
html.reduced-motion .chat-contact, html.reduced-motion .map-controls button,
html.reduced-motion .app-nav-button, html.reduced-motion .setting-row { transition: none; }
html.reduced-motion *:active { transform: none !important; }

/* ---------------------------------------------------------------------------
   Bedienelemente. Vorher zeigte das Telefon an diesen Stellen unformatierte
   Browser-Elemente: Auswahlfelder mit Systempfeil, Systemkästchen und einen
   knallblauen Systemregler — das einzige Blau der App, im Dunkelmodus komplett
   ungestylt. Alles hier folgt den Farbrollen und stimmt damit in jedem Thema.
   --------------------------------------------------------------------------- */
select.field, select.search-input {
  appearance: none;
  padding-right: 34px;
  /* Pfeil als Maske, nicht als Bild: So nimmt er die Textfarbe des Themas an. */
  background-image: none;
}
.select-shell { position: relative; display: block; }
select.field { background-repeat: no-repeat; background-position: right var(--space-3) center; background-size: 11px 7px; }
select.field {
  background-image: linear-gradient(45deg, transparent 49%, currentColor 50%, currentColor 60%, transparent 61%),
                    linear-gradient(-45deg, transparent 49%, currentColor 50%, currentColor 60%, transparent 61%);
  background-size: 7px 7px, 7px 7px;
  background-position: right 18px center, right var(--space-3) center;
}

input[type="checkbox"], input[type="radio"] {
  appearance: none;
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin: 0;
  display: inline-grid;
  place-content: center;
  border: 1.5px solid var(--line-strong);
  background: var(--surface-sunken);
  cursor: pointer;
  transition: border-color var(--motion-quick) var(--motion-ease), background var(--motion-quick) var(--motion-ease);
}
input[type="checkbox"] { border-radius: var(--radius-xs); }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]::after {
  content: "";
  width: 10px;
  height: 6px;
  border: 2px solid #fff;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  transition: transform var(--motion-quick) var(--motion-ease);
}
input[type="radio"]::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform var(--motion-quick) var(--motion-ease);
}
input[type="checkbox"]:checked, input[type="radio"]:checked { border-color: var(--accent); background: var(--accent); }
input[type="checkbox"]:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
input[type="radio"]:checked::after { transform: scale(1); }

input[type="range"] {
  appearance: none;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: var(--radius-full); background: var(--surface-soft); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: var(--radius-full); background: var(--surface-soft); }
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  margin-top: -7px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: var(--shadow-float);
}
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: var(--shadow-float);
}
html.reduced-motion input[type="checkbox"], html.reduced-motion input[type="radio"],
html.reduced-motion input[type="checkbox"]::after, html.reduced-motion input[type="radio"]::after { transition: none; }
.collection { padding: 2px 10px 24px; }
.collection-card { margin: 9px 0; padding: 13px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.collection-kind { color: var(--muted); font-size: var(--text-2xs); font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.collection-title { margin: 4px 0; font-size: var(--text-lg); font-weight: 760; }
.collection-summary { color: var(--muted); font-size: var(--text-sm); line-height: 1.42; }
.access-pill { display: inline-flex; margin-top: 9px; padding: 5px 8px; border-radius: var(--radius-sm); color: var(--muted); background: var(--surface-soft); font-size: var(--text-2xs); font-weight: 700; }
.access-pill.pending { color: var(--warning-ink); background: var(--warning-soft); }
.access-pill.open { color: var(--success-ink); background: var(--success-soft); }

.thread { min-height: calc(100vh - 138px); display: flex; flex-direction: column; }
.screen:has(.composer) .thread { height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.screen:has(.composer) .thread::-webkit-scrollbar { display: none; }
.live-scene { margin: 10px 12px 0; padding: 13px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(145deg, var(--accent-soft), var(--surface)); box-shadow: 0 6px 20px rgba(76,61,170,.1); }
.live-scene.active { border-color: var(--danger); background: linear-gradient(145deg, var(--danger-soft), var(--surface)); }
.live-scene-head { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 8px; }
.live-scene-head div { display: grid; gap: 2px; }
.live-scene-head small { color: var(--danger); font-size: var(--text-2xs); font-weight: 900; letter-spacing: .12em; }
.live-scene-head strong { font-size: var(--text-md); }
.live-scene-head time { color: var(--muted); font-size: var(--text-2xs); }
.live-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 4px rgba(221,89,107,.13); }
.live-scene:not(.active) .live-pulse { background: var(--accent); box-shadow: 0 0 0 4px rgba(125,111,240,.13); }
.live-scene p { margin: 9px 0; color: var(--muted); font-size: var(--text-2xs); line-height: 1.45; }
.live-scene .primary-button, .live-scene .secondary-button { width: 100%; justify-content: center; }
.scene-progress { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0; color: var(--danger); font-size: var(--text-2xs); }
.scene-moments { display: grid; gap: 4px; margin: 8px 0; }
.scene-moments span { color: var(--muted); font-size: var(--text-2xs); }
.scene-note { display: block; margin-top: 8px; color: var(--muted); font-size: var(--text-2xs); line-height: 1.4; }
.chat-contact { position: sticky; z-index: 6; top: 0; width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--line); color: inherit; background: var(--chrome); backdrop-filter: blur(14px); text-align: left; }
/* Bleibt ein 44-px-Touchziel (siehe .screen button), trägt aber nur noch eine
   Zeile — Name und Handle stehen im App-Kopf darüber. */
.chat-contact .avatar { width: 28px; height: 28px; border-radius: var(--radius-sm); font-size: var(--text-md); }
.chat-contact-name { min-width: 0; flex: 1; display: grid; gap: 2px; }
.chat-contact-name strong { font-size: var(--text-md); }
.chat-contact-name small { color: var(--muted); font-size: var(--text-2xs); }
.contact-presence { display: inline-flex; align-items: center; gap: 5px; }
.contact-presence::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex: none; }
.contact-presence.available::before { background: var(--success-ink); }
.contact-presence.occupied::before { background: var(--warning-ink); }
.contact-presence.travelling::before { background: var(--accent); }
/* Verankert kurze Gespräche unten am Composer statt oben unter dem Kontaktkopf:
   ein Verlauf aus drei Nachrichten stand vorher am oberen Rand und darunter
   800 px Leere — kein Messenger verhält sich so.
   flex:1 wäre hier falsch. Es lässt die Liste den freien Raum selbst auffüllen,
   danach ist für margin-top:auto nichts mehr übrig und die Verankerung bleibt
   wirkungslos. flex:0 0 auto lässt den Raum frei, den die Automarge braucht;
   längere Verläufe wachsen über die Höhe hinaus und .thread scrollt. */
.messages { flex: 0 0 auto; margin-top: auto; padding: 12px 12px 90px; }
.message { display: flex; margin: 8px 0; }
/* Zeitachse des Verlaufs. Ohne sie liest der Spieler Nachrichten von gestern,
   als wären sie von eben — in einem Spiel über Abwesenheit und Rückkehr ist das
   die wichtigste fehlende Information. */
.day-divider { display: flex; align-items: center; gap: 9px; margin: 16px 2px 10px; color: var(--muted); font-size: var(--text-2xs); font-weight: 700; letter-spacing: .04em; }
.day-divider::before, .day-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.gap-marker { margin: 4px 2px 12px; color: var(--muted); font-size: var(--text-2xs); text-align: center; font-style: italic; }
/* Zustellzustand der eigenen letzten Nachricht. „Stille" ist eine bewusste
   Mechanik des Spiels — sie muss sichtbar sein, sonst wirkt sie wie ein Fehler. */
/* Steht neben der Blase, nicht darin: die Blase ist fit-content, ein langer
   Zustandssatz würde eine kurze Nachricht auf volle Breite aufziehen. */
.bubble-state { margin: -4px 2px 8px; color: var(--muted); font-size: var(--text-2xs); text-align: right; }
.bubble-state.waiting { color: var(--warning-ink); }
/* Ein technischer Ausfall darf nicht wie eine Figurenentscheidung aussehen. */
.bubble-state.failed { color: var(--danger); }
.composer-closed { margin: 0; padding: 14px 16px; border-top: 1px solid var(--line); color: var(--muted); background: var(--surface-soft); font-size: var(--text-2xs); line-height: 1.5; text-align: center; }
.contact-presence.deceased { color: var(--muted); font-style: italic; }
.message.mine { justify-content: flex-end; }
/* width:fit-content statt Vollbreite: kurze Nachrichten sollen nicht auf 82%
   aufgezogen werden. min-width hält Zeitstempel und Text auf einer Höhe lesbar. */
.bubble { width: fit-content; min-width: 4.5rem; max-width: min(82%, 34rem); padding: 9px 12px; border-radius: var(--radius-lg) 17px 17px 5px; background: var(--surface); box-shadow: 0 2px 8px rgba(20,30,45,.05); font-size: var(--text-md); line-height: 1.42; overflow-wrap: anywhere; }
.bubble-text { display: block; white-space: pre-wrap; }
.mine .bubble { border-radius: var(--radius-lg) 17px 5px 17px; color: #fff; background: var(--accent); }
.bubble-time { display: block; margin-top: 5px; color: var(--muted); font-size: var(--text-2xs); text-align: right; }
/* Meldeknopf (Mobile-Port Etappe 5.4): leise neben der Uhrzeit, nur an
   Figurenblasen. Sichtbar genug für den Store-Prüfer, unauffällig im Spiel. */
.bubble-report { border: 0; margin-left: 8px; padding: 0 2px; color: var(--muted); background: transparent; font-size: var(--text-2xs); line-height: 1; opacity: .55; cursor: pointer; }
.bubble-report:hover, .bubble-report:focus-visible { opacity: 1; }
.report-form { display: grid; gap: 10px; }
.report-quote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--line-strong); color: var(--muted); font-size: var(--text-sm); }
.typing-bubble { display: flex; align-items: center; gap: 4px; min-height: 34px; color: var(--muted); }
.typing-bubble span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: typing-pulse 1.2s infinite ease-in-out; }
.typing-bubble span:nth-child(2) { animation-delay: .15s; }
.typing-bubble span:nth-child(3) { animation-delay: .3s; }
.typing-bubble small { margin-left: 5px; font-size: var(--text-2xs); }
@keyframes typing-pulse { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-3px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .typing-bubble span { animation: none; } }
.mine .bubble-time { color: rgba(255,255,255,.65); }
.agreement-card, .attachment-card { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 8px; padding: 9px; border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-sm); color: inherit; background: rgba(255,255,255,.12); text-align: left; font-size: var(--text-xs); }
.message:not(.mine) .agreement-card, .message:not(.mine) .attachment-card { border-color: var(--line); background: var(--surface-soft); color: var(--ink); }
.choice-card { display: grid; gap: 7px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.choice-card strong { font-size: var(--text-xs); line-height: 1.35; }
.choice-option { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface-soft); text-align: left; font-size: var(--text-xs); line-height: 1.35; }
.choice-option:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.choice-option.selected { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); font-weight: 750; }
.choice-option:disabled { cursor: default; opacity: .62; }
.composer { position: absolute; z-index: 24; left: 0; right: 0; bottom: 22px; display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; background: var(--chrome); backdrop-filter: blur(18px); border-top: 1px solid var(--line); }
.composer-input { min-width: 0; flex: 1; display: grid; gap: 5px; }
.composer input { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 10px 13px; color: var(--ink); background: var(--surface); outline: none; }
.composer > button { flex: 0 0 44px; display: grid; place-items: center; border: 0; width: 44px; height: 44px; border-radius: 50%; color: #fff; background: var(--accent); }
.composer > button svg { width: 21px; height: 21px; }
.composer > .voice-input-button { display: grid; place-items: center; color: var(--ink); background: var(--surface-soft); }
.composer > .voice-input-button.recording { color: #fff; background: var(--danger); box-shadow: 0 0 0 4px rgba(196,68,82,.17); animation: recording-pulse 1.25s ease-in-out infinite; }
.composer > .voice-input-button:disabled { cursor: wait; opacity: .65; }
/* Leeres Feld: Senden ist sichtbar nicht bereit, statt scheinbar zu funktionieren. */
.composer > button[type="submit"]:disabled { cursor: default; color: var(--muted); background: var(--surface-soft); }
.voice-input-status { padding: 0 4px; color: var(--muted); font-size: var(--text-2xs); line-height: 1.35; }
.voice-input-status.error { color: var(--danger); }
.thread:has(.composer.has-voice-status) .messages { padding-bottom: 125px; }
@keyframes recording-pulse { 50% { box-shadow: 0 0 0 8px rgba(196,68,82,.08); } }

/* Sprachnachricht in der Blase: Player + Dauer, Transkript ausklappbar.
   Das Audio-Element darf die Blase auf dem 320-px-Profil nie sprengen. */
.voice-message { display: flex; align-items: center; gap: 7px; min-width: min(72vw, 15rem); }
.voice-message svg { flex: 0 0 18px; width: 18px; height: 18px; opacity: .75; }
.voice-message audio { min-width: 0; flex: 1; max-width: 100%; height: 36px; }
.voice-duration { flex: 0 0 auto; color: var(--muted); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
.mine .voice-duration { color: rgba(255,255,255,.65); }
.voice-message.pending { color: var(--muted); font-size: var(--text-xs); animation: voice-pending-pulse 1.6s ease-in-out infinite; }
.mine .voice-message.pending { color: rgba(255,255,255,.75); }
@keyframes voice-pending-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .voice-message.pending { animation: none; } }
.voice-transcript { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); }
.mine .voice-transcript { border-top-color: rgba(255,255,255,.25); }
.voice-transcript summary { cursor: pointer; color: var(--muted); font-size: var(--text-2xs); }
.mine .voice-transcript summary { color: rgba(255,255,255,.7); }
.voice-transcript .bubble-text { margin-top: 5px; font-size: var(--text-xs); }

/* Karten-App im Stil gängiger Kartendienste: die Karte füllt die Fläche,
   Suche und Steuerung schweben darüber, die Ortsliste liegt in einem Sheet. */
.map-app { position: relative; height: 100%; display: flex; flex-direction: column; }
.map-canvas { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--map-ground); touch-action: none; cursor: grab; }
.map-canvas:active { cursor: grabbing; }
.city-map { display: block; width: 100%; height: 100%; }
.map-canvas.dragging { cursor: grabbing; }
.map-ground { fill: var(--map-ground); }

/* Das Luftbild ist eine Aufnahme bei bedecktem Tageslicht. Im dunklen
   Erscheinungsbild schalten alle --map-*-Token auf Nacht um, das Foto aber
   nicht: Dann leuchtete die einzige Fläche der App in voller Tageshelligkeit
   in einem sonst dunklen Gerät. Deshalb wird es abgesenkt und leicht kühler
   gestimmt, statt die Farbtoken für nichts umzuschalten. */
.map-ortho { filter: var(--map-ortho-filter, none); }
:root, html[data-theme="light"] { --map-ortho-filter: none; }
html[data-theme="dark"] { --map-ortho-filter: brightness(.68) saturate(.82) contrast(1.06) hue-rotate(-6deg); }
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] { --map-ortho-filter: brightness(.68) saturate(.82) contrast(1.06) hue-rotate(-6deg); }
}

.map-searchbar { position: absolute; z-index: 3; top: 10px; left: 10px; right: 10px; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px 0 12px; border-radius: var(--radius-full); background: var(--surface); box-shadow: 0 2px 10px rgba(20,30,45,.18); }
.map-search-icon { color: var(--muted); font-size: var(--text-lg); }
.map-search-input { min-width: 0; flex: 1; border: 0; padding: 0; color: var(--ink); background: transparent; font-size: var(--text-md); outline: none; }
/* Grafik: Glyphengröße gehört zum festen Kasten und darf nicht mit der Textgröße wachsen. */
.map-layer-button { flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 50%; color: var(--ink); background: var(--surface-soft); font-size: var(--text-lg); }
.map-layer-button.active { color: #fff; background: var(--map-historical); }
.map-layer-button:disabled { opacity: .4; cursor: not-allowed; }
.map-badge { position: absolute; z-index: 2; top: 62px; left: 10px; display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--radius-full); background: var(--surface); box-shadow: var(--shadow-float); color: var(--ink); font-size: var(--text-2xs); font-weight: 650; }
.weather-mark { width: 8px; height: 8px; border-radius: 50%; background: var(--map-water, var(--accent)); box-shadow: 0 0 0 3px rgba(143,194,202,.25); }
.map-controls { position: absolute; z-index: 2; right: 10px; bottom: 14px; display: grid; gap: 8px; }
/* Grafik: Glyphengröße gehört zum festen Kasten und darf nicht mit der Textgröße wachsen. */
.map-controls button { width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink); font-size: var(--text-xl); font-weight: 700; box-shadow: 0 2px 8px rgba(20,30,45,.22); }
.map-scale { position: absolute; z-index: 2; left: 10px; bottom: 14px; padding: 4px 9px; border-radius: var(--radius-full); background: var(--surface); color: var(--muted); font-size: var(--text-2xs); }


/* Kartenfarben als Rollen, damit die Karte im dunklen Erscheinungsbild nicht
   als einzige Fläche hell leuchtet. */
:root, html[data-theme="light"] {
  /* Palette nach Google Maps hell: nahezu neutrales Land, weiße Straßen,
     graue Gebäude, gesättigtes Grün, helles Blau. Die Farbe tragen Grün und
     Wasser — Land und Bebauung bleiben zurückhaltend. */
  --map-ground: #f2f0eb; --map-water: #a4cdec; --map-water-minor: #b6d8ef; --map-water-edge: #90bfe3;
  --map-park: #c3e5b5; --map-park-edge: #a9d3ab; --map-field: #dcecd2; --map-field-edge: #b3d6ac;
  --map-district: #f0eee8; --map-district-edge: #ded6c4;
  --map-industry: #ebe7e2; --map-industry-edge: #d6bcbc; --map-industry-dead: #e4ded6; --map-industry-dead-edge: #bd9c9c;
  --map-campus: #e6eee6; --map-campus-edge: #b0cfbc; --map-sport: #ecead0; --map-sport-edge: #d8bd9c;
  --map-building: #e6e3dd; --map-building-edge: #d8d4cc;
  --map-road: #fff; --map-road-minor: #fff; --map-rail: #b8bcc2; --map-route: #cfc7ba;
  --map-label: #6a6f76; --map-halo: rgba(255,255,255,.9); --map-place-ink: #3c4048;
  --map-street: #fff; --map-street-edge: #e2ded6; --map-path: #f7f5f0; --map-path-edge: #e2ded6;
  --map-road-edge: #d9d2c6; --map-forest: #bcd9b8; --map-forest-edge: #a3c79f; --map-allotment: #ddebc4; --map-allotment-edge: #c3d6a6;
  --map-plaza: #efe7d6; --map-plaza-edge: #dbd0ba; --map-historical: #b07a3a; --map-historical-soft: rgba(176,122,58,.16);
}
html[data-theme="dark"] {
  --map-ground: #1b2029; --map-water: #24405c; --map-water-minor: #2b4b6b; --map-water-edge: #35597c;
  --map-park: #22382a; --map-park-edge: #2d4634; --map-field: #253a2c; --map-field-edge: #2f4736;
  --map-district: #2a2b26; --map-district-edge: #3a3a31;
  --map-industry: #33272a; --map-industry-edge: #45343a; --map-industry-dead: #3d2b30; --map-industry-dead-edge: #4f383e;
  --map-campus: #223530; --map-campus-edge: #2e453e; --map-sport: #38301f; --map-sport-edge: #4a4029;
  --map-building: #3a4049; --map-building-edge: #4a515c;
  --map-road: #4a515c; --map-road-minor: #3d434d; --map-rail: #5c6470; --map-route: #464a52;
  --map-label: #8b95a3; --map-halo: rgba(10,13,18,.85); --map-place-ink: #d6dce6;
  --map-street: #444b56; --map-street-edge: #2c313a; --map-path: #363c45; --map-path-edge: #262b33;
  --map-road-edge: #2b303a; --map-forest: #1e3325; --map-forest-edge: #27412e; --map-allotment: #2b3a24; --map-allotment-edge: #35472c;
  --map-plaza: #33383f; --map-plaza-edge: #3f454e; --map-historical: #d8a05a; --map-historical-soft: rgba(216,160,90,.2);
}
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --map-ground: #1b2029; --map-water: #24405c; --map-water-minor: #2b4b6b; --map-water-edge: #35597c;
    --map-park: #22382a; --map-park-edge: #2d4634; --map-field: #253a2c; --map-field-edge: #2f4736;
    --map-district: #2a2b26; --map-district-edge: #3a3a31;
    --map-industry: #33272a; --map-industry-edge: #45343a; --map-industry-dead: #3d2b30; --map-industry-dead-edge: #4f383e;
    --map-campus: #223530; --map-campus-edge: #2e453e; --map-sport: #38301f; --map-sport-edge: #4a4029;
    --map-building: #3a4049; --map-building-edge: #4a515c;
    --map-road: #4a515c; --map-road-minor: #3d434d; --map-rail: #5c6470; --map-route: #464a52;
    --map-label: #8b95a3; --map-halo: rgba(10,13,18,.85); --map-place-ink: #d6dce6;
    --map-street: #444b56; --map-street-edge: #2c313a; --map-path: #363c45; --map-path-edge: #262b33;
    --map-road-edge: #2b303a; --map-forest: #1e3325; --map-forest-edge: #27412e; --map-allotment: #2b3a24; --map-allotment-edge: #35472c;
    --map-plaza: #33383f; --map-plaza-edge: #3f454e; --map-historical: #d8a05a; --map-historical-soft: rgba(216,160,90,.2);
  }
}

/* Flächen und Linien, Farbwelt an Kartendiensten orientiert */
/* Ufer als eigener Strich: eine reine Füllfläche liest sich als Farbfleck,
   erst die Kante macht daraus ein Gewässer. */
.map-water { fill: var(--map-water); stroke: var(--map-water-edge); stroke-width: .32; }
.map-river { fill: none; stroke: var(--map-water); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.map-river-minor { fill: none; stroke: var(--map-water-minor); stroke-width: 1.5; stroke-linecap: round; }
.map-park { fill: var(--map-park); stroke: none; }
.map-field { fill: var(--map-field); stroke: none; }
.map-district { fill: var(--map-district); stroke: none; }
.map-industry { fill: var(--map-industry); stroke: none; }
.map-industry-dead { fill: var(--map-industry-dead); stroke: none; }
.map-campus { fill: var(--map-campus); stroke: none; }
.map-sport { fill: var(--map-sport); stroke: none; }
.map-building { fill: var(--map-building); stroke: var(--map-building-edge); stroke-width: .05; opacity: .92; }
/* Wald bekommt eine Kronentextur statt einer glatten Fläche. Das Muster liegt
   als SVG-Pattern in der Karte (siehe renderMaps). */
.map-forest { fill: var(--map-forest); stroke: none; }
.map-forest-textur { display: none; }
.map-allotment { fill: var(--map-allotment); stroke: none; }
.map-plaza { fill: var(--map-plaza); stroke: var(--map-plaza-edge); stroke-width: .25; }

/* Straßen bekommen eine Kante: erst die breitere dunkle Linie, darüber die
   schmalere helle. Das ist der Trick, der Striche wie Straßen aussehen lässt. */
.map-road-casing { fill: none; stroke: var(--map-road-edge); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.map-road { fill: none; stroke: var(--map-road); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.map-minor-road-casing { fill: none; stroke: var(--map-road-edge); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.map-minor-road { fill: none; stroke: var(--map-road-minor); stroke-width: .88; stroke-linecap: round; }
.map-street-casing { fill: none; stroke: var(--map-street-edge); stroke-width: .82; stroke-linecap: round; stroke-linejoin: round; }
.map-street { fill: none; stroke: var(--map-street); stroke-width: .58; stroke-linecap: round; stroke-linejoin: round; }
.map-path-casing { fill: none; stroke: var(--map-path-edge); stroke-width: .72; stroke-linecap: round; }
.map-path { fill: none; stroke: var(--map-path); stroke-width: .46; stroke-linecap: round; }
/* Bahn zweilagig: durchgehender Strang plus Schwellen quer darüber — so wird
   aus einer gestrichelten Linie eine Bahnstrecke. */
.map-rail-bett { fill: none; stroke: var(--map-rail); stroke-width: .5; stroke-linecap: round; opacity: .5; }
.map-rail { fill: none; stroke: var(--map-rail); stroke-width: .95; stroke-dasharray: .32 1.5; stroke-linecap: butt; opacity: .75; }

/* Historische Ebene liegt als Auflage über der Karte, nicht an ihrer Stelle. */
.map-historical-water { fill: var(--map-historical-soft); stroke: var(--map-historical); stroke-width: .4; stroke-dasharray: 1.6 1.1; }
.map-historical-road, .map-historical-minor-road { fill: none; stroke: var(--map-historical); stroke-width: .7; stroke-dasharray: 1.8 1.2; stroke-linecap: round; }
.map-historical-building { fill: var(--map-historical-soft); stroke: var(--map-historical); stroke-width: .35; }
.map-historical-district { fill: none; stroke: var(--map-historical); stroke-width: .5; stroke-dasharray: 1.6 1.1; }

/* Wege zu einem ausgewählten Ort — bewusst gepunktet, damit sie nicht mit
   Straßen verwechselt werden. */
.map-route { stroke: var(--accent); stroke-width: .55; fill: none; stroke-linecap: round; stroke-dasharray: .1 1.5; opacity: .85; }
.map-route.private { stroke-dasharray: 1.4 1.1; opacity: .5; }
/* Grafik: SVG-Text in Kartenmaßeinheiten, nicht in Bildschirmpixeln. */
/* Grafik: Straßennamen laufen als SVG-Text auf ihrer Straße mit, Maße daher in
   Kartenmaßeinheiten. */
.map-street-label { fill: var(--map-label); font-weight: 500; letter-spacing: .02px; text-anchor: middle; paint-order: stroke; stroke: var(--map-halo); stroke-linejoin: round; }
/* Grafik: SVG-Text in Kartenmaßeinheiten, nicht in Bildschirmpixeln. */
.map-area-label { fill: var(--map-label); font-size: 2.9px; font-weight: 600; letter-spacing: .04px; text-anchor: middle; paint-order: stroke; stroke: var(--map-halo); stroke-width: .8px; stroke-linejoin: round; }

/* Marker als Tropfen mit Spitze auf der Koordinate. Die Farbe kommt aus der
   Kategorie des Ortes (steht im World Release), das Symbol aus der Tabelle
   in app.mjs — statt 35 identisch roter Nadeln. */
.map-place { cursor: pointer; --pin: #ea4335; }
.map-place.cat-civic { --pin: #4a7fd4; }
.map-place.cat-culture { --pin: #b055c4; }
.map-place.cat-commerce { --pin: #e07a2f; }
.map-place.cat-home { --pin: #d2453f; }
.map-place.cat-transport { --pin: #5d6b7d; }
.map-place.cat-industry { --pin: var(--map-historical); }
.map-place.cat-water { --pin: #2b8fbd; }
.map-place.cat-nature { --pin: #4a9d5a; }
.map-place .pin-shape { fill: var(--pin); stroke: var(--map-halo); stroke-width: .28; filter: drop-shadow(0 .45px .7px rgba(0,0,0,.3)); transition: transform var(--motion-quick) cubic-bezier(.2,.8,.3,1); transform-box: fill-box; transform-origin: 50% 100%; }
.map-place .pin-glyph { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.map-place.restricted { --pin: var(--muted); }
.map-place.historical { --pin: #c7912f; }
.map-place.focused { --pin: #1a73e8; }
.map-place:hover .pin-shape { transform: scale(1.12); }
.map-place.activity-2 .pin-shape, .map-place.activity-3 .pin-shape { filter: drop-shadow(0 0 1.5px color-mix(in srgb, var(--pin) 70%, transparent)); }
.map-place text { fill: var(--map-place-ink); font-weight: 650; letter-spacing: .04px; text-anchor: middle; paint-order: stroke; stroke: var(--map-halo); stroke-linejoin: round; }
.map-place.focused text { fill: var(--pin); font-weight: 800; }
html.reduced-motion .map-place .pin-shape { transition: none; }

/* Ortsliste als ziehbares Sheet über der Karte */
.map-sheet { position: relative; z-index: 4; flex: 0 0 auto; max-height: 52%; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg) 20px 0 0; background: var(--surface); box-shadow: 0 -4px 18px rgba(20,30,45,.16); transition: max-height var(--motion-calm); }
.map-sheet.collapsed { max-height: 62px; }
.map-sheet-grip { width: 100%; min-height: 22px !important; padding: 8px 0 4px; border: 0; background: transparent; }
.map-sheet-grip i { display: block; width: 40px; height: 4px; margin: auto; border-radius: var(--radius-xs); background: var(--line-strong); }
.map-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px 8px; font-size: var(--text-md); }
.map-sheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 0 4px 14px; }
.map-sheet-body::-webkit-scrollbar { display: none; }
.map-sheet-body .list-row.focused { background: var(--accent-soft); }
.map-row-pin { flex: 0 0 auto; width: 12px; height: 16px; background: var(--pin, #ea4335); clip-path: path("M6,16 C1,9 0,7 0,5 A6,6 0 1,1 12,5 C12,7 11,9 6,16 Z"); }
.map-row-pin.cat-civic { --pin: #4a7fd4; }
.map-row-pin.cat-culture { --pin: #b055c4; }
.map-row-pin.cat-commerce { --pin: #e07a2f; }
.map-row-pin.cat-home { --pin: #d2453f; }
.map-row-pin.cat-transport { --pin: #5d6b7d; }
.map-row-pin.cat-industry { --pin: var(--map-historical); }
.map-row-pin.cat-water { --pin: #2b8fbd; }
.map-row-pin.cat-nature { --pin: #4a9d5a; }
.map-row-pin.restricted { --pin: var(--muted); }
.map-controls button svg { width: 20px; height: 20px; display: block; margin: auto; }
.map-legend { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: var(--text-2xs); }
html.reduced-motion .map-sheet { transition: none; }
.group-about dl { display: grid; grid-template-columns: 90px 1fr; gap: 7px 12px; margin: 16px 0; }
.group-about dt { color: var(--muted); }
.group-about dd { margin: 0; font-weight: 650; }
.member-list { display: grid; gap: 8px; margin: 10px 0 16px; }
.member-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.member-row { width: 100%; border-width: 0 0 1px; background: transparent; color: inherit; text-align: left; }
.member-name { min-width: 0; flex: 1; display: grid; gap: 3px; }
.member-name strong { font-size: var(--text-md); line-height: 1.25; }
.member-row small { color: var(--muted); font-size: var(--text-xs); line-height: 1.25; }
.avatar-button { border: 0; padding: 0; flex: 0 0 auto; }
.profile-head { display: flex; align-items: center; gap: 14px; }
.profile-head h3, .profile-head p { margin: 0; }
.profile-avatar { width: 62px; height: 62px; font-size: var(--text-2xl); }
.profile-sheet > h4 { margin: 18px 0 7px; }

.profile-page { position: relative; padding: 0 18px 16px; text-align: center; background: var(--surface); border-bottom: 1px solid var(--line); }
.profile-cover { height: 96px; margin: 0 -18px; background: linear-gradient(150deg, rgba(255,255,255,.22), rgba(20,26,38,.42)), var(--avatar-color, #60756b); }
/* Grafik: Glyphengröße gehört zum festen Kasten und darf nicht mit der Textgröße wachsen. */
.profile-page .profile-avatar { width: 84px; height: 84px; margin: -42px auto 0; border: 4px solid var(--surface); border-radius: var(--radius-lg); font-size: 2rem; }
.profile-page h2 { margin: 10px 0 0; font-size: var(--text-2xl); line-height: 1.2; }
.profile-handle { margin: 3px 0 0; color: var(--muted); font-size: var(--text-md); }
.profile-role { margin: 7px 0 0; color: var(--ink); font-size: var(--text-md); line-height: 1.4; }
.profile-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 11px; }
.profile-facts span { padding: 5px 9px; border-radius: var(--radius-full); color: var(--ink); background: var(--surface-soft); font-size: var(--text-xs); font-weight: 650; }
.profile-actions { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.profile-actions button { flex: 1 1 0; min-width: 0; justify-content: center; }
.profile-self { margin-top: 12px; font-size: var(--text-xs); }
.profile-bio p { margin: 0; font-size: var(--text-md); line-height: 1.55; }
.profile-info { display: grid; grid-template-columns: minmax(84px, auto) 1fr; gap: 8px 12px; margin: 0; font-size: var(--text-sm); }
.profile-info dt { color: var(--muted); font-weight: 700; }
.profile-info dd { margin: 0; line-height: 1.45; }
.profile-list { margin: 8px 0 0; padding-left: 18px; font-size: var(--text-sm); line-height: 1.6; }
.contact-standing { border-left: 3px solid var(--accent); }
.contact-standing h3 { margin: 0; font-size: var(--text-md); }
.contact-standing h4 { margin: 12px 0 0; font-size: var(--text-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.standing-stage { margin: 6px 0 0; font-size: var(--text-md); line-height: 1.55; }
.standing-commitments small { color: var(--muted); }
.contact-chronicle h3 { margin: 0 0 8px; font-size: var(--text-md); }
.chronicle-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.chronicle-list li { display: grid; gap: 3px; padding-left: 12px; border-left: 2px solid var(--surface-sunken); }
.chronicle-meta { font-size: var(--text-2xs); color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.chronicle-text { font-size: var(--text-sm); line-height: 1.5; }
.chronicle-hint { display: block; margin-top: 10px; font-size: var(--text-2xs); color: var(--muted); }
.profile-page + .app-tabs { top: 0; }
.section-pad > .surface-card h3 { margin: 0; font-size: var(--text-md); }
.section-pad > .surface-card + .surface-card { margin-top: 10px; }
.search-submit-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; }
/* Warm/kalt-Hinweis: verweist auf eine offene Frage aus den Fäden — Navigation
   in der Stimme des Journals, kein Befund und keine Wertung. */
.finding-hint { margin: 7px 0 0; padding: 6px 8px; border-left: 3px solid var(--line); color: var(--muted); font-size: var(--text-2xs); line-height: 1.45; background: var(--surface-soft); border-radius: var(--radius-xs); }
/* Kein capitalize: Die Bezeichnungen sind ausformulierte deutsche Sätze
   ("Was der Beleg nicht belegt"), Großschreibung jedes Wortes zerstört sie. */
/* Google-Kalender-Look (02.09.): feste Wochentagszeile, ruhiges Raster,
   heutiger Tag als Kreis, fremde Monatstage gedimmt, Einträge als Chips. */
.calendar-nav { display: flex; align-items: center; gap: 6px; margin: 0 12px 8px; }
.calendar-nav-label { margin-left: auto; font-size: var(--text-sm); }
.calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin: 4px 12px 0; }
.calendar-weekday { padding: 4px 2px; color: var(--muted); font-size: var(--text-xs); text-align: center; text-transform: uppercase; letter-spacing: 0.04em; }
.calendar-grid { display: grid; gap: 1px; margin: 4px 12px 24px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.calendar-grid.week { grid-template-columns: repeat(7, 1fr); }
.calendar-grid.month { grid-template-columns: repeat(7, 1fr); }
.calendar-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 4px 3px; background: var(--surface); }
.calendar-grid.week .calendar-cell { min-height: 160px; }
.calendar-grid.month .calendar-cell { min-height: 74px; }
.calendar-cell.other-month { background: color-mix(in srgb, var(--surface) 82%, var(--line)); }
.calendar-cell.other-month .calendar-daynum { color: var(--muted); }
.calendar-daynum { align-self: center; width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); font-size: var(--text-sm); font-weight: 650; }
.calendar-cell.today .calendar-daynum { background: var(--accent); color: var(--surface); }
.calendar-chip { display: grid; width: 100%; min-width: 0; padding: 3px 4px; border: 0; border-radius: var(--radius-xs); background: var(--accent-soft); color: var(--ink); text-align: left; }
.calendar-chip time { font-size: var(--text-xs); font-weight: 750; }
.calendar-chip span { overflow: hidden; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.calendar-more { border: 0; background: transparent; color: var(--muted); font-size: var(--text-xs); text-align: left; padding: 0 4px; }
.share-post-preview { margin: 10px 0; padding: 10px 12px; }
.share-post-preview p { margin: 4px 0 0; color: var(--muted); }
.note-pin { display: flex; gap: 8px; align-items: center; margin: 8px 0; color: var(--muted); }
/* Grafik: Kartenlegende und Icon-Zustand, themenunabhängig. */
.map-legend i { display: inline-block; width: 8px; height: 8px; margin: 0 3px 0 5px; border-radius: 50%; background: var(--muted); }
/* Zugängliche Orte tragen die Farbe ihrer Kategorie, nicht eine Zugangsfarbe.
   Die Legende behauptete früher „rot = zugänglich" — auf der Karte kam Rot aber
   nur bei Wohnorten vor. Der Farbkranz sagt jetzt, was tatsächlich gilt. */
.map-legend i.by-category { background: conic-gradient(#4a7fd4 0 25%, #e07a2f 0 50%, #4a9d5a 0 75%, #b055c4 0); }
.map-legend i.restricted { background: var(--muted); }
.map-legend i.historical { background: var(--map-historical); }
.map-place-facts { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0; }
.state-chip { display: inline-flex; align-items: center; min-height: 18px; padding: 2px 7px; border-radius: var(--radius-full); color: var(--ink); background: var(--surface-soft); font-size: var(--text-2xs); line-height: 1.2; }
.state-chip.available { color: var(--success-ink); background: var(--success-soft); }
.state-chip.restricted { color: var(--danger); background: var(--danger-soft); }
.place-sheet-map.restricted { background: linear-gradient(145deg, #eadbd5, #f5eeee); }

.photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; padding: 3px; }
.photo-tile { position: relative; border: 0; padding: 0; aspect-ratio: 1; background: var(--surface-soft); overflow: hidden; }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; }
.photo-check { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: rgba(20,25,35,.62); border: 2px solid #fff; font-size: var(--text-sm); }
.photo-check.selected { background: var(--accent); }
.compare-bar { position: sticky; z-index: 5; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; background: var(--surface); border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.compare-view { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; }
.compare-view figure { margin: 0; background: var(--surface); }
.compare-view img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.compare-view figcaption { padding: 8px; font-size: var(--text-2xs); line-height: 1.35; }

.agenda { padding: 12px; }
.day-heading { margin: 17px 3px 7px; color: var(--muted); font-size: var(--text-xs); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
/* Vierte Spalte für das Überlaufmenü: Erledigt, Bearbeiten und Löschen standen
   vorher dauerhaft in der Zeile, wobei „Löschen" in Rot das auffälligste
   Element eines Termins war. */
.agenda-item { display: grid; grid-template-columns: 52px 4px 1fr auto; gap: 10px; align-items: start; padding: 10px 7px; border-bottom: 1px solid var(--line); }
/* Karteninhalt als Knopf zum Detail-Sheet (Eigenplaytest 19.08. U9). */
.agenda-body { display: block; min-width: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; }
.agenda-note { color: var(--muted); font-size: var(--text-2xs); line-height: 1.4; overflow-wrap: anywhere; }
.agenda-more { align-self: center; border: 0; min-width: 40px; border-radius: var(--radius-sm); color: var(--muted); background: transparent; }
.agenda-more:hover { background: var(--surface-soft); }
.agenda-empty-day { margin: 4px 7px 2px; color: var(--muted); font-size: var(--text-xs); }
.agenda-time { font-size: var(--text-xs); color: var(--muted); text-align: right; }
.agenda-line { border-radius: var(--radius-xs); background: var(--accent); }
.agenda-item.completed .agenda-line { background: var(--success-ink); }
.agenda-title { font-size: var(--text-md); font-weight: 700; }
.agenda-sub { margin-top: 3px; color: var(--muted); font-size: var(--text-2xs); }
.compact-actions { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.promise-list h3, .result-ledger h3 { margin: 0 0 8px; font-size: var(--text-sm); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.appointment-list h3 { margin: 0 0 8px; color: var(--muted); font-size: var(--text-sm); letter-spacing: .05em; text-transform: uppercase; }
.appointment-card { padding: 12px; }
.appointment-card.ready { border-color: var(--accent); box-shadow: 0 4px 18px var(--accent-veil); }
.appointment-head { display: flex; justify-content: space-between; gap: 10px; }
.appointment-head > div { display: grid; gap: 2px; }
.appointment-head small { color: var(--muted); font-size: var(--text-2xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.appointment-head strong { font-size: var(--text-md); }
.appointment-head > span { align-self: start; padding: 4px 7px; border-radius: var(--radius-full); color: var(--accent-ink); background: var(--accent-soft); font-size: var(--text-2xs); }
.appointment-card p { color: var(--muted); font-size: var(--text-2xs); line-height: 1.4; }
.appointment-card .primary-button { width: 100%; margin: 3px 0 8px; justify-content: center; }
.promise-card, .action-result-card { display: grid; gap: 7px; margin-bottom: 8px; padding: 11px; }
.promise-card > span { color: var(--muted); font-size: var(--text-2xs); }
.action-result-card dl, .action-proposal dl { display: grid; grid-template-columns: 92px 1fr; gap: 6px 9px; margin: 5px 0 0; font-size: var(--text-2xs); line-height: 1.4; }
.action-result-card dt, .action-proposal dt { color: var(--muted); font-weight: 750; }
.action-result-card dd, .action-proposal dd { margin: 0; }

/* 100% statt calc(100vh - …): der Verlauf soll den Bezel füllen, nicht den
   Viewport — sonst reißt er auf hohen Fenstern ab oder scrollt grundlos. */
/* Die Uhr führte lange eine eigene Farbwelt mit eigenen Dunkelmodus-Blöcken.
   Ihre Karten sahen dadurch grau-in-grau aus, während Feed und Einstellungen
   weiße Karten zeigten. Jetzt benutzt sie dieselben Rollen wie alle anderen. */
.clock-app {
  min-height: 100%; padding: var(--space-6) var(--space-5) 40px;
  color: var(--ink);
  background: var(--paper);
}
.clock-face { text-align: center; }
.clock-date { color: var(--muted); font-size: var(--text-md); }
.clock-time { margin: 3px 0 25px; font-size: var(--text-display); font-weight: 220; letter-spacing: -.06em; }
.clock-card { margin: var(--space-3) 0; padding: var(--space-4); }
.clock-card h3 { margin: 0 0 10px; font-size: var(--text-sm); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.jump-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.jump-button { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 8px; color: var(--ink); background: var(--surface); font-size: var(--text-sm); font-weight: 680; }
.clock-next { width: 100%; display: grid; grid-template-columns: 54px 1fr; gap: 9px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line); color: inherit; background: transparent; text-align: left; }
.clock-next:last-child { border-bottom: 0; }
.clock-next time { color: var(--muted); font-size: var(--text-2xs); }
.clock-next span { font-size: var(--text-xs); line-height: 1.35; }
.clock-app .field { border-color: var(--line); color: var(--ink); background: var(--surface); }
.clock-app .mini-button { color: var(--ink); background: var(--surface); }
.clock-app .muted { color: var(--muted); }

.alarm-hint { margin: -4px 0 12px; color: var(--muted); font-size: var(--text-xs); line-height: 1.45; }
.alarm-form { display: grid; gap: 9px; }
.alarm-form label { display: grid; gap: 5px; color: var(--muted); font-size: var(--text-2xs); font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.alarm-time .field { font-size: var(--text-2xl); font-weight: 300; letter-spacing: .02em; }
.alarm-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.alarm-list { margin-top: 14px; border-top: 1px solid var(--line); }
.alarm-row { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "when switch remove" "label switch remove"; align-items: center; gap: 2px 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.alarm-row:last-child { border-bottom: 0; }
.alarm-row.off { opacity: .5; }
.alarm-when { grid-area: when; display: flex; align-items: baseline; gap: 9px; }
.alarm-when time { font-size: var(--text-2xl); font-weight: 300; letter-spacing: -.02em; }
.alarm-when small { color: var(--muted); font-size: var(--text-2xs); }
.alarm-label { grid-area: label; color: var(--ink); opacity: .82; font-size: var(--text-xs); }
.alarm-switch { grid-area: switch; width: 46px; height: 27px; padding: 0; border: 0; border-radius: var(--radius-full); background: var(--line-strong); transition: background var(--motion-quick); }
.alarm-switch[aria-checked="true"] { background: var(--accent); }
.alarm-switch i { display: block; width: 21px; height: 21px; margin-left: 3px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform var(--motion-quick); }
.alarm-switch[aria-checked="true"] i { transform: translateX(19px); }
.alarm-remove { grid-area: remove; display: grid; place-items: center; width: 34px; border: 0; color: var(--muted); background: transparent; }
.alarm-remove:hover { color: var(--danger); }
html.reduced-motion .alarm-switch, html.reduced-motion .alarm-switch i { transition: none; }
.tempo-card p { margin: 0 0 10px; font-size: var(--text-sm); line-height: 1.45; }
.tempo-card .muted { color: var(--muted); }
.tempo-stats { display: flex; flex-wrap: wrap; gap: 5px; }
.tempo-stats span { padding: 5px 7px; border-radius: var(--radius-sm); color: var(--ink); background: var(--surface); font-size: var(--text-2xs); }
.adaptation-card summary { cursor: pointer; color: var(--muted); font-size: var(--text-sm); font-weight: 750; letter-spacing: .04em; }
.adaptation-card > p, .adaptation-card > small { display: block; color: var(--muted); font-size: var(--text-2xs); line-height: 1.5; }
.adaptation-summary { display: grid; grid-template-columns: 1fr 1.2fr; gap: 6px 9px; margin: 12px 0; font-size: var(--text-2xs); }
.adaptation-summary span { color: var(--muted); }
.adaptation-summary strong { color: var(--ink); }
.adaptation-card form { display: grid; gap: 8px; margin: 11px 0; }
.adaptation-card form label { display: grid; gap: 5px; color: var(--muted); font-size: var(--text-2xs); }
.adaptation-card .secondary-button { width: 100%; justify-content: center; margin-bottom: 8px; color: var(--ink); background: var(--surface); }

.note-list-head, .files-head { display: flex; justify-content: space-between; align-items: center; padding: 13px 14px 4px; }
.note-list-head h2, .files-head h2 { margin: 0; font-size: var(--text-2xl); }
.note-row-wrap { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
.note-row-wrap:last-child { border-bottom: 0; }
.note-row { display: block; min-width: 0; flex: 1; padding: 13px; border: 0; color: var(--ink); background: transparent; text-align: left; }
.note-delete { flex: 0 0 auto; display: grid; place-items: center; width: 44px; border: 0; color: var(--muted); background: transparent; }
.note-delete:hover { color: var(--danger); background: var(--danger-soft); }
.icon-trash { width: 18px; height: 18px; display: block; }
.note-title { font-size: var(--text-lg); font-weight: 760; }
.note-preview { margin-top: 4px; color: var(--muted); font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-editor { padding: 12px; }
.note-editor input { font-size: var(--text-2xl); font-weight: 760; }
.note-organizer { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 9px 0; }
.note-organizer .field { font-size: var(--text-xs); font-weight: 500; }
.note-organizer label { grid-column: 1 / -1; color: var(--muted); font-size: var(--text-xs); }
.note-structure { margin: 9px 0 13px; padding: 9px 11px; border: 1px solid var(--paper-warm-edge); border-radius: var(--radius-md); background: var(--paper-warm); }
.note-structure summary { cursor: pointer; color: var(--warning-ink); font-size: var(--text-xs); font-weight: 760; }
.note-structure label { display: grid; gap: 4px; margin-top: 9px; color: var(--muted); font-size: var(--text-2xs); }
.note-structure textarea.field { min-height: 72px; margin-top: 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: var(--text-2xs); font-weight: 450; }
.tag-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tag-row span { padding: 3px 6px; border-radius: var(--radius-xs); color: var(--warning-ink); background: var(--warning-soft); font-size: var(--text-2xs); }
.investigation-form { display: grid; gap: 8px; padding: 12px; }
.investigation-form h3 { margin: 0; font-size: var(--text-md); }
.investigation-form textarea { min-height: 72px; resize: vertical; }
.investigation-form label { color: var(--muted); font-size: var(--text-2xs); }
/* Fertig-Zeichen am zuletzt erzeugten Befund: Vier Ergebnisse sehen einander
   gleich, und ohne Markierung war nicht zu sehen, welches gerade entstand
   (Blindlauf VL4, P4). */
.result-fresh { justify-self: start; padding: 2px var(--space-2); border-radius: var(--radius-full); background: var(--success-soft); color: var(--success-ink); font-size: var(--text-2xs); font-weight: 600; letter-spacing: .03em; }
/* --------------------------------------------------------------- Vergleichen
   Redesign 01.09.2026. Der Reiter besteht aus nummerierten Schritten statt aus
   einem Formular: Auswahl, Frage, Befund. Alles, was hier steht, muss auf
   420 px lesbar bleiben und bei 200 % Textgröße noch umbrechen — deshalb
   überall Grid statt fester Spaltenbreiten. */
.compare-workspace { display: grid; gap: var(--space-3); }
.compare-step { display: grid; gap: var(--space-2); }
.compare-step > h3 { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; font-size: var(--text-lg); }
.step-number { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-full); background: var(--accent); color: #fff; font-size: var(--text-2xs); font-weight: 800; }
.compare-step-hinweis { margin: 0; font-size: var(--text-sm); line-height: 1.45; }
.compare-step-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* Die Ablage: was gerade nebeneinanderliegt. Ohne sie war die Auswahl nur ein
   Zustand in drei Auswahlfeldern und nach jedem Blick weg wieder vergessen. */
.compare-tray { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.compare-chip { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-2); padding: 9px 10px; border: 1px solid var(--accent-veil); border-radius: var(--radius-sm); background: var(--accent-soft); }
.chip-kind { grid-column: 1; color: var(--accent-ink); font-size: var(--text-2xs); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.chip-label { grid-column: 1; color: var(--ink); font-size: var(--text-md); font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.chip-weg { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--radius-full); color: var(--accent-ink); background: transparent; }
.chip-weg:hover { background: var(--surface); }
.compare-tray-leer { margin: 0; padding: 11px 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); color: var(--muted); font-size: var(--text-sm); line-height: 1.45; }

/* Der Quellenwähler. „Gemerkt" zuerst, alles Übrige erst auf Verlangen —
   ungefiltert stehen hier mehrere hundert Zeilen. */
.quellen-waehler { display: grid; gap: var(--space-2); }
.waehler-gruppe { display: grid; gap: 6px; }
.waehler-gruppe h4 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin: 0; color: var(--muted); font-size: var(--text-xs); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.waehler-gruppe h4 span { color: var(--muted); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0; }
.waehler-leer { margin: 0; font-size: var(--text-sm); line-height: 1.45; }
.waehler-zeile { align-items: center; }
.waehler-haken { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-full); color: var(--muted); background: var(--surface-soft); }
.waehler-zeile.gewaehlt { background: var(--accent-soft); }
.waehler-zeile.gewaehlt .waehler-haken { color: #fff; background: var(--accent); }
.waehler-zeile.gewaehlt .list-title { color: var(--accent-ink); font-weight: 760; }

/* Fragen statt Werkzeugnamen. Eine gesperrte Frage bleibt sichtbar und nennt
   ihren Grund — daran lernt man, wofür das Werkzeug da ist. */
.frage-liste { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.frage-knopf { display: grid; gap: 3px; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); text-align: left; }
.frage-text { color: var(--ink); font-size: var(--text-lg); font-weight: 700; line-height: 1.3; }
.frage-erklaerung { color: var(--muted); font-size: var(--text-sm); line-height: 1.4; }
.frage-status { margin-top: 3px; color: var(--muted); font-size: var(--text-2xs); font-weight: 700; }
.frage.moeglich .frage-knopf { border-color: var(--accent-veil); box-shadow: 0 1px 0 var(--accent-veil); }
.frage.moeglich .frage-status { color: var(--accent-ink); }
.frage-knopf[disabled] { opacity: 1; background: var(--surface-soft); cursor: not-allowed; }
.frage-knopf[disabled] .frage-text { color: var(--muted); }
.frage-knopf[disabled] .frage-status { color: var(--warning-ink); }

/* Befund. Die Antwort steht als Satz obenan; darunter je Merkmal ein Block, in
   dem die Quellen untereinander stehen und Abweichungen markiert sind. Vorher
   war das eine Definitionsliste roher Feldnamen je Quelle. */
.befund { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.befund-kopf { display: grid; gap: 4px; padding: 12px; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.befund-frage { color: var(--muted); font-size: var(--text-2xs); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.befund-antwort { color: var(--ink); font-size: var(--text-lg); font-weight: 700; line-height: 1.4; }
.befund.is-new { border-color: var(--success-ink); }
.befund-koerper { padding: var(--space-3); }
.befund > .finding-hint { margin: var(--space-3) var(--space-3) 0; }
.befund-fuss { display: grid; gap: var(--space-2); padding: 10px 12px; border-top: 1px solid var(--line); background: var(--surface-soft); }
.befund-fuss p { margin: 0; color: var(--muted); font-size: var(--text-2xs); line-height: 1.4; }
.befund-felder { display: grid; gap: 7px; }
.befund-feld { padding: 9px 10px; border-radius: var(--radius-sm); background: var(--surface-soft); }
.befund-feld.abweichend { border-left: 3px solid var(--warning-ink); background: var(--warning-soft); }
.feld-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.feld-kopf strong { font-size: var(--text-xs); }
.feld-kopf span { flex: 0 0 auto; color: var(--muted); font-size: var(--text-2xs); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.befund-feld.abweichend .feld-kopf span { color: var(--warning-ink); }
.feld-wert { display: grid; gap: 1px; margin-top: 5px; }
.feld-wert span { color: var(--muted); font-size: var(--text-2xs); }
.feld-wert b { font-size: var(--text-sm); font-weight: 650; overflow-wrap: anywhere; }
.befund-gleich { margin-top: 2px; }
.befund-gleich > summary { padding: 7px 2px; color: var(--muted); font-size: var(--text-xs); font-weight: 700; cursor: pointer; }
.befund-gleich > .befund-feld { margin-top: 5px; }

/* Zeitachse: der Abstand gehört zwischen die Einträge, nicht in eine Spalte. */
.befund-zeitachse { display: grid; gap: 0; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--line-strong); list-style: none; }
.befund-zeitachse li { position: relative; padding-bottom: 10px; }
.befund-zeitachse li::before { content: ""; position: absolute; top: 7px; left: -19px; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--accent); }
.zeit-abstand { display: block; margin-bottom: 4px; color: var(--muted); font-size: var(--text-2xs); font-weight: 700; }
.befund-zeitachse li:first-child .zeit-abstand { display: none; }
.zeit-eintrag { display: grid; gap: 1px; }
.zeit-eintrag strong { font-size: var(--text-md); overflow-wrap: anywhere; }
.zeit-eintrag span { color: var(--ink); font-size: var(--text-sm); }
.zeit-eintrag small { color: var(--muted); font-size: var(--text-2xs); }

.befund-text .document-paper { padding: 13px 14px; box-shadow: none; }
.befund-unsicher, .beweisgrenze { margin-top: 9px; padding: 9px 10px; border-left: 3px solid var(--warning-ink); border-radius: var(--radius-xs); background: var(--warning-soft); }
.befund-unsicher strong, .beweisgrenze strong { display: block; color: var(--warning-ink); font-size: var(--text-xs); }
.befund-unsicher ul, .beweisgrenze ul { margin: 5px 0 0; padding-left: 16px; font-size: var(--text-sm); line-height: 1.45; }
.befund-kette + .befund-kette { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line); }
.befund-kette h4 { margin: 0 0 6px; font-size: var(--text-md); }
.kette-zustand, .kette-herkunft { margin: 0 0 7px; font-size: var(--text-sm); }
.custody-liste { display: grid; gap: 7px; margin: 0; padding-left: 16px; font-size: var(--text-sm); line-height: 1.4; }

/* ------------------------------------------------------------------ Gemerkt
   Alles Abgelegte an einem Ort. Jede Zeile führt zurück zum Original und
   daneben direkt in den Vergleich. */
.gemerkt-liste { display: grid; gap: var(--space-3); }
.gemerkt-gruppe { display: grid; gap: 6px; }
.gemerkt-gruppe h3 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin: 0; color: var(--muted); font-size: var(--text-xs); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.gemerkt-gruppe h3 span { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0; }
.gemerkt-zeile { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
.gemerkt-zeile:last-child { border-bottom: 0; }
.gemerkt-zeile > .list-row { flex: 1; min-width: 0; border-bottom: 0; }
.gemerkt-vergleich { flex: 0 0 auto; display: grid; place-items: center; gap: 1px; width: 62px; padding: 6px 2px; border: 0; border-left: 1px solid var(--line); color: var(--accent-ink); background: transparent; }
.gemerkt-vergleich small { font-size: var(--text-2xs); font-weight: 700; }
.gemerkt-vergleich:hover { background: var(--accent-soft); }

/* Anhänge einer Notiz: Art vor Titel, damit man sieht, was man da angeheftet
   hat, ohne es zu öffnen. */
.source-kind { display: block; margin-bottom: 3px; color: var(--muted); font-size: var(--text-2xs); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.note-anhang-zahl { margin-top: 5px; color: var(--accent-ink); font-size: var(--text-2xs); font-weight: 700; }
.puzzle-prepare { width: 100%; margin: 9px 0 2px; justify-content: center; }

.hypothesis-card { padding: 11px; border: 1px solid var(--paper-warm-edge); border-radius: var(--radius-md); background: var(--paper-warm); }
.hypothesis-card > span { color: var(--warning-ink); font-size: var(--text-2xs); font-weight: 800; text-transform: uppercase; }
.hypothesis-card p { margin: 6px 0 9px; font-size: var(--text-sm); line-height: 1.4; }
.hypothesis-card.withdrawn { opacity: .62; text-decoration: line-through; }
.story-thread-list { display: grid; gap: 10px; }
.story-thread-card { overflow: hidden; border: 1px solid var(--paper-warm-edge); border-radius: var(--radius-md); background: var(--paper-warm); box-shadow: 0 7px 20px rgba(72,61,20,.06); }
.story-thread-card > header { display: flex; align-items: start; justify-content: space-between; gap: 9px; padding: 12px; border-bottom: 1px solid var(--paper-warm-edge); background: linear-gradient(135deg,#fff9d9,#fffdf5); }
.story-thread-card > header span { display: block; color: var(--warning-ink); font-size: var(--text-2xs); font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.story-thread-card > header h3 { margin: 3px 0 0; font-size: var(--text-lg); }
.story-thread-card > header > strong { flex: 0 0 auto; padding: 5px 7px; border-radius: var(--radius-sm); color: #736323; background: rgba(227,202,78,.16); font-size: var(--text-2xs); }
.story-thread-card h4 { margin: 0 0 7px; color: var(--muted); font-size: var(--text-2xs); letter-spacing: .06em; text-transform: uppercase; }
.thread-evidence, .thread-puzzles { padding: 11px 12px 2px; }
.thread-evidence > div { display: grid; grid-template-columns: 8px 1fr; gap: 7px; align-items: center; padding: 4px 0; color: var(--muted); font-size: var(--text-xs); }
.thread-evidence i { width: 6px; height: 6px; border: 1px solid #a28c34; border-radius: 50%; background: #f9df70; }
.thread-empty { margin: 0; padding: 12px; color: var(--muted); font-size: var(--text-2xs); line-height: 1.45; }
.thread-puzzle { margin-bottom: 8px; padding: 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.thread-puzzle.completed { border-color: #c9dfd1; background: var(--success-soft); }
.thread-puzzle > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 7px; }
.thread-puzzle > div span { color: var(--muted); font-size: var(--text-2xs); font-weight: 750; text-transform: uppercase; }
.thread-puzzle > div strong { font-size: var(--text-2xs); }
.thread-puzzle p { margin: 6px 0 8px; color: var(--muted); font-size: var(--text-2xs); line-height: 1.4; }
.thread-sources { display: flex; flex-wrap: wrap; gap: 4px; }
.thread-sources button, .thread-sources span { padding: 4px 6px; border: 1px solid var(--line); border-radius: var(--radius-xs); color: var(--muted); background: var(--surface-soft); font-size: var(--text-2xs); text-align: left; }
.thread-sources button { cursor: pointer; }
.thread-sources span { opacity: .6; }
/* Die fehlende Quelle bleibt gedämpft, ihr Beschaffungsweg nicht: Er ist der
   Satz, der den Spieler weiterbringt, und stand vorher nirgends. */
.thread-sources span.source-missing { flex-basis: 100%; opacity: 1; color: var(--muted); }
.thread-sources span.source-missing small { display: block; margin-top: 3px; color: var(--muted); font-size: var(--text-2xs); line-height: 1.4; }
/* „Entsteht noch" ist kein Auftrag, sondern ein Wartezustand: gestrichelt und
   ruhig, damit niemand einen Beschaffungsweg sucht, den es nicht gibt. */
.thread-sources span.source-missing.pending { border-style: dashed; }
.thread-sources span.source-missing.pending small { font-style: italic; }
.chat-overdue { margin: 0 12px 6px; padding: 7px 9px; border: 1px solid var(--line); border-left: 3px solid #b4763a; border-radius: var(--radius-xs); color: var(--muted); background: var(--surface-soft); font-size: var(--text-2xs); line-height: 1.4; }
.chat-overdue small { display: block; margin-top: 2px; opacity: .85; }
.standing-commitments li.overdue small { color: #b4763a; }
/* „Zuletzt bewegt": der Puls des Fadens — beantwortet „stecke ich fest oder
   wartet die Welt", ohne etwas zu versprechen. */
.thread-movement { margin: 2px 12px 0; color: var(--muted); font-size: var(--text-2xs); }
.quote-journal .quote-list { margin: 0; padding: 0 12px 4px; list-style: none; }
.quote-journal .quote-list li { margin-bottom: 6px; }
.quote-open { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); text-align: left; }
.quote-meta { color: var(--muted); font-size: var(--text-2xs); font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.quote-text { font-size: var(--text-2xs); line-height: 1.45; }
.quote-anlass { color: var(--muted); font-size: var(--text-2xs); line-height: 1.4; }
.resonance-scope { margin: 0 0 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); font-size: var(--text-2xs); line-height: 1.45; }
.thread-readiness { display: flex; align-items: baseline; gap: 6px; margin: 4px 12px 0; color: var(--muted); font-size: var(--text-2xs); line-height: 1.4; }
.thread-readiness span { flex: none; padding: 1px 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.thread-readiness.is-bereit span { background: var(--success-soft); color: var(--ink); }
.story-thread-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px 11px; border-top: 1px solid var(--paper-warm-edge); }
.story-thread-card > footer small { max-width: 175px; color: var(--muted); font-size: var(--text-2xs); line-height: 1.35; }
.artifact-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--line); }
.artifact-tools h4 { flex-basis: 100%; margin: 0 0 2px; font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .07em; }
.action-status-list { padding-bottom: 0; }
.action-status { padding: 11px; }
.action-status > div:first-child { display: flex; justify-content: space-between; gap: 8px; font-size: var(--text-xs); }
.action-status > div span { color: var(--muted); font-size: var(--text-2xs); }
.progress-track { height: 5px; margin: 9px 0; overflow: hidden; border-radius: var(--radius-xs); background: var(--surface-soft); }
.progress-track i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width var(--motion-calm); }
.action-status p { margin: 0 0 8px; color: var(--muted); font-size: var(--text-2xs); }
.note-editor textarea { min-height: 240px; margin-top: 9px; resize: vertical; line-height: 1.5; }
.source-list { margin-top: 14px; }
.source-heading { display: flex; align-items: baseline; gap: var(--space-2); margin: 0 0 7px; color: var(--muted); font-size: var(--text-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.source-heading span { font-weight: 600; letter-spacing: 0; }
.source-card { display: block; width: 100%; margin: 7px 0; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: #364356; background: var(--surface); text-align: left; }
.source-label { font-size: var(--text-md); font-weight: 740; line-height: 1.35; }
.source-quote { margin-top: 5px; color: var(--muted); font-size: var(--text-xs); line-height: 1.4; }

.file-icon { display: grid; place-items: center; width: 44px; height: 52px; border-radius: var(--radius-xs); color: #fff; background: #4c8fdd; font-size: var(--text-2xs); font-weight: 800; }
.file-folder { padding: 0 10px 12px; }
.file-folder h3 { display: flex; justify-content: space-between; margin: 9px 4px 7px; color: var(--muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .07em; }

.notification-list { padding: 10px; }
.notification-toolbar { position: sticky; z-index: 7; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 13px; border-bottom: 1px solid var(--line); background: rgba(246,247,249,.96); backdrop-filter: blur(14px); }
.notification-toolbar > div { display: grid; gap: 2px; }
.notification-toolbar strong { font-size: var(--text-sm); }
.notification-toolbar small { color: var(--muted); font-size: var(--text-2xs); }
.notification-group > h3 { margin: 12px 4px 7px; color: var(--muted); font-size: var(--text-2xs); letter-spacing: .06em; text-transform: uppercase; }
.notification-card { display: flex; gap: 11px; margin-bottom: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.notification-card.unread { border-color: var(--accent-veil); background: var(--accent-soft); }
.notification-card.priority-critical { border-left: 4px solid #b72f42; }
.notification-card.priority-high { border-left: 4px solid #d18a31; }
.notification-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-sm); color: #fff; background: var(--accent); font-size: var(--text-xl); font-weight: 800; }
/* Titel, Text und Metazeile sind eigene Zeilen — als Inline-Spans liefen sie
   zu einem Absatz zusammen („PARALLAXTheo dokumentiert …"). */
.notification-main { min-width: 0; flex: 1; display: grid; gap: 3px; text-align: left; }
.notification-title { font-size: var(--text-sm); font-weight: 780; }
.notification-body { color: var(--muted); font-size: var(--text-xs); line-height: 1.4; }

/* Mitteilungs-Vorhang: fällt von oben über den aktuellen Bildschirm, wie die
   Benachrichtigungszentrale eines echten Telefons. Er deckt auch Statusleiste
   und Island — der Vorhang IST in diesem Moment die Gerätechrome. */
/* Die Statusleiste (z-45) bleibt bedienbar: Der Vorhang legte sich vorher mit
   z-70 über sie und fing jeden Klick auf Home und Glocke ab — zweimal
   reproduziert, nur mit Escape aufzulösen. Deshalb liegt die Ebene jetzt unter
   der Statusleiste und beginnt erst unter ihr. */
.shade-layer { position: absolute; z-index: 40; inset: 52px 0 0; background: rgba(8,11,16,.35); backdrop-filter: blur(3px); }
.shade-layer.hidden { display: none; }
.shade-panel { position: absolute; top: 0; left: 0; right: 0; max-height: 80%; display: flex; flex-direction: column; padding: 8px 10px 4px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); color: var(--ink); background: var(--surface-raised); box-shadow: 0 18px 44px rgba(0,0,0,.4); animation: shade-in .2s var(--motion-ease); }
@keyframes shade-in { from { transform: translateY(-26px); opacity: .4; } }
html.reduced-motion .shade-panel { animation: none; }
.shade-head { display: flex; align-items: center; gap: 10px; padding: 0 6px 10px; border-bottom: 1px solid var(--line); }
.shade-head > div { flex: 1; display: grid; gap: 2px; }
.shade-head strong { font-size: var(--text-lg); }
.shade-head small { color: var(--muted); font-size: var(--text-2xs); }
.shade-close { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; color: var(--muted); background: var(--surface-soft); }
.shade-close svg { width: 16px; height: 16px; }
.shade-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 10px 2px; display: grid; gap: 8px; }
.shade-list::-webkit-scrollbar { display: none; }
.shade-list .notification-card { margin-bottom: 0; }
.shade-empty { margin: 0; padding: 28px 0; color: var(--muted); text-align: center; font-size: var(--text-sm); }
.shade-more { border: 0; border-top: 1px solid var(--line); min-height: 46px; color: var(--accent-ink); background: transparent; font: inherit; font-size: var(--text-sm); font-weight: 720; }

.sheet-layer { position: absolute; z-index: 80; inset: 0; display: flex; align-items: flex-end; padding: 12px; background: rgba(8,11,16,.48); backdrop-filter: blur(4px); }
.sheet-layer.hidden { display: none; }
.sheet-card { width: 100%; max-height: 86%; overflow: auto; border-radius: var(--radius-lg); color: var(--ink); background: var(--surface-raised); box-shadow: 0 20px 60px rgba(0,0,0,.35); animation: sheet-in .22s ease-out; }
@keyframes sheet-in { from { transform: translateY(35px); opacity: 0; } }
.sheet-grip { width: 42px; height: 5px; margin: 9px auto 2px; border-radius: var(--radius-xs); background: var(--line-strong); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 16px 13px; border-bottom: 1px solid var(--line); }
.sheet-head h2 { margin: 0; font-size: var(--text-xl); }
.sheet-close { display: grid; place-items: center; border: 0; width: 31px; height: 31px; border-radius: 50%; color: var(--muted); background: var(--surface-soft); }
.sheet-close svg { width: 16px; height: 16px; }
.sheet-body { padding: 14px; }
.share-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.share-option { border: 0; color: var(--muted); background: transparent; font-size: var(--text-2xs); }
.share-option i { display: grid; place-items: center; width: 49px; height: 49px; margin: auto auto 5px; border-radius: var(--radius-md); color: #fff; background: var(--muted); font-style: normal; font-size: var(--text-2xl); }
.share-option i.art { overflow: hidden; }
.share-option i.art svg { display: block; width: 100%; height: 100%; }
/* Katalogsatz statt Dokument: Ein Bestand ohne Digitalisat bekommt eine Karte,
   die als Karte gelesen wird. Vorher stand hier die Zusammenfassung auf Papier. */
.bestandskarte { display: grid; gap: 7px; padding: 14px 15px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.bestandskarte h4 { color: var(--ink); font-size: var(--text-xs); font-weight: 750; }
.bestandskarte p { color: var(--muted); font-size: var(--text-xs); line-height: 1.5; }
.bestandskarte-form b { color: var(--ink); margin-right: 6px; }
.document-paper { padding: 24px 20px; border: 1px solid var(--paper-warm-edge); border-radius: var(--radius-xs); color: var(--ink); background: var(--paper-warm); box-shadow: 0 8px 25px rgba(63,50,32,.09); font-family: Georgia, serif; font-size: var(--text-md); line-height: 1.58; white-space: pre-wrap; overflow-wrap: anywhere; }
.artifact-photo { width: 100%; max-height: 430px; object-fit: contain; border-radius: var(--radius-md); background: var(--surface-soft); }
.artifact-photo-viewport { height: 270px; overflow: hidden; border-radius: var(--radius-md); background: var(--surface-soft); }
.artifact-photo-viewport .artifact-photo { width: 100%; height: 100%; max-height: none; object-fit: contain; border-radius: 0; transition: transform var(--motion-quick) ease-out; will-change: transform; }
.media-controls { display: grid; gap: 7px; margin-top: 9px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.media-controls label { display: grid; grid-template-columns: 105px 1fr 42px; align-items: center; gap: 6px; color: var(--muted); font-size: var(--text-2xs); }
.media-controls label:not(:first-child) { grid-template-columns: 105px 1fr; }
.media-controls input { width: 100%; }
.media-controls output { color: var(--muted); font-size: var(--text-2xs); text-align: right; }
.media-boundary { margin: 7px 2px 0; color: var(--muted); font-size: var(--text-2xs); line-height: 1.4; }
.media-alternative, .av-viewer details { margin-top: 9px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.media-alternative summary, .av-viewer summary { color: var(--ink); font-size: var(--text-xs); font-weight: 750; cursor: pointer; }
.media-alternative p, .accessible-transcript { color: var(--muted); font-size: var(--text-xs); line-height: 1.5; }
.av-viewer audio, .av-viewer video { display: block; width: 100%; max-height: 350px; border-radius: var(--radius-md); background: #11151c; }

.system-banner { position: sticky; z-index: 30; top: 0; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 13px; border-bottom: 1px solid; color: #553f18; background: var(--warning-soft); font-size: var(--text-2xs); line-height: 1.4; }
.system-banner strong { font-size: var(--text-xs); }
.system-banner span { grid-column: 1; }
.system-banner button { grid-column: 2; grid-row: 1 / span 2; align-self: center; min-height: 36px; border: 0; border-radius: var(--radius-sm); color: inherit; background: rgba(0,0,0,.07); font-size: var(--text-2xs); font-weight: 750; }
.system-banner.error { color: #702c39; background: var(--danger-soft); }

.lock-screen { min-height: 100%; padding: 78px 22px 45px; color: #fff; background: linear-gradient(160deg, rgba(9,13,21,.12), rgba(9,13,21,.7)); text-align: center; }
.lock-date { color: rgba(255,255,255,.72); font-size: var(--text-lg); }
.lock-time { margin: -3px 0 24px; font-size: var(--text-display); font-weight: 200; letter-spacing: -.06em; }
.lock-unlock { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: grid; gap: 0; min-width: 100px; border: 0; color: #fff; background: transparent; }
.lock-unlock .lock-chevron { display: grid; place-items: center; }
.lock-unlock .lock-chevron svg { width: 24px; height: 24px; }
.lock-unlock small { font-size: var(--text-2xs); }
.lock-notifications { display: grid; gap: 8px; text-align: left; }
.lock-notifications article { display: grid; gap: 3px; padding: 12px 13px; border: 1px solid rgba(255,255,255,.17); border-radius: var(--radius-md); background: rgba(18,23,32,.48); backdrop-filter: blur(18px); }
.lock-notifications strong { font-size: var(--text-xs); }
.lock-notifications span { color: rgba(255,255,255,.68); font-size: var(--text-2xs); line-height: 1.35; }

.system-search { position: sticky; z-index: 7; top: 0; display: grid; gap: 8px; padding: 12px; border-bottom: 1px solid var(--line); background: var(--chrome); backdrop-filter: blur(14px); }
.system-search small { color: var(--muted); font-size: var(--text-2xs); }
.search-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }

.settings-page { padding: 10px 11px 30px; }
.settings-group { margin-bottom: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.settings-group > h2 { margin: 0; padding: 12px 13px 7px; color: var(--muted); font-size: var(--text-2xs); letter-spacing: .08em; text-transform: uppercase; }
.setting-row, .setting-field { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 54px; padding: 10px 13px; border: 0; border-top: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left; }
.setting-row > span { display: grid; gap: 3px; }
.setting-row strong, .setting-field > span { font-size: var(--text-sm); }
.setting-row small { color: var(--muted); font-size: var(--text-2xs); line-height: 1.35; }
.setting-field { display: grid; grid-template-columns: 1fr minmax(125px, 45%); }
.setting-field input[type=range] { width: 100%; }
.setting-field output { color: var(--muted); font-size: var(--text-2xs); }
.switch { position: relative; flex: 0 0 auto; width: 46px; height: 27px; border-radius: var(--radius-full); background: var(--line-strong); transition: background var(--motion-quick) var(--motion-ease); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: transform var(--motion-quick); }
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(19px); }
.data-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 10px 13px; border-top: 1px solid var(--line); }
.data-summary span { padding: 8px; border-radius: var(--radius-sm); color: var(--muted); background: var(--surface-soft); font-size: var(--text-2xs); text-align: center; }
.settings-group > .secondary-button { margin: 0 13px 13px; }
.accessibility-contract { padding-bottom: 12px; }
.accessibility-contract p, .accessibility-contract small { display: block; margin: 5px 13px; color: var(--muted); font-size: var(--text-2xs); line-height: 1.45; }

/* Die früheren sechs Dark-Regeln sind entfallen: sie setzten die Tokens auf
   .screen statt aufs Dokument, weshalb das Sheet (liegt neben #screen) und die
   Gerätechrome immer hell blieben. Jetzt trägt der :root-Block alles. */

/* Hoher Kontrast, je nach Erscheinungsbild in die richtige Richtung. */
html.high-contrast { --accent: #1d4b6b; --line: rgba(0,0,0,.4); --line-strong: rgba(0,0,0,.6); --ink: #000; --muted: #2c2c2c; }
html.high-contrast[data-theme="dark"] { --accent: #a5cbe4; --line: rgba(255,255,255,.42); --line-strong: rgba(255,255,255,.62); --ink: #fff; --muted: #d5dae2; --surface: #0d1116; --surface-raised: #151a21; --surface-soft: #1c222b; --paper: #05070a; }
@media (prefers-color-scheme: dark) {
  html.high-contrast[data-theme="system"] { --accent: #a5cbe4; --line: rgba(255,255,255,.42); --line-strong: rgba(255,255,255,.62); --ink: #fff; --muted: #d5dae2; --surface: #0d1116; --surface-raised: #151a21; --surface-soft: #1c222b; --paper: #05070a; }
}
html.high-contrast button, html.high-contrast input, html.high-contrast textarea, html.high-contrast select { border-color: currentColor; }
html.reduced-motion *, html.reduced-motion *::before, html.reduced-motion *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }

.screen button, .sheet-card button, .screen a { min-height: 44px; }
.statusbar button, .app-nav-button { min-width: 44px; min-height: 44px; }

@media (max-width: 374px) {
  .home-screen { padding-inline: 14px; }
  .home-time, .lock-time { font-size: 3.5rem; }
  .app-grid { gap: 17px 6px; }
  .app-icon { width: 54px; height: 54px; border-radius: var(--radius-md); }
  .app-icon-label { font-size: var(--text-2xs); }
  .app-tabs { overflow-x: auto; grid-auto-columns: minmax(74px, 1fr); }
  .post-actions .text-button { padding: 8px 6px; }
  .search-filters, .setting-field { grid-template-columns: 1fr; }
  .compare-view { grid-template-columns: 1fr; }
  .share-options { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) and (max-width: 1199px) {
  :root { --phone-w: 500px; --phone-h: 900px; }
}
.action-proposal { margin: 11px 0; padding: 11px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-soft); }
.action-proposal > strong { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; }
.form-label { display: grid; gap: 5px; margin-top: 9px; color: var(--muted); font-size: var(--text-2xs); }
.artifact-title { margin: 13px 0 4px; font-size: var(--text-xl); }
.artifact-meta { display: grid; grid-template-columns: 84px 1fr; gap: 6px 10px; margin: 13px 0; color: var(--muted); font-size: var(--text-xs); }
.artifact-meta b { color: var(--muted); }
.artifact-statements { margin: 10px 0; padding: 11px 13px; border-left: 3px solid #c4a36d; background: var(--paper-warm); color: var(--ink); font-size: var(--text-xs); line-height: 1.5; }
.provenance-card { margin: 12px 0; padding: 12px 13px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-soft); color: var(--ink); font-size: var(--text-2xs); line-height: 1.45; }
.provenance-card h4 { margin: 0 0 6px; color: #263b31; font-size: var(--text-xs); }
.provenance-card h4:not(:first-child) { margin-top: 10px; }
.provenance-card p { margin: 5px 0; }
.provenance-card ol, .provenance-card ul { margin: 6px 0; padding-left: 18px; }
.provenance-card li + li { margin-top: 5px; }
.place-sheet-map { height: 110px; margin: -14px -14px 13px; background: linear-gradient(145deg, #dbe8dd, #b9d4cb); position: relative; overflow: hidden; }
.place-sheet-map::after { content: ""; position: absolute; width: 190px; height: 190px; right: -48px; top: -50px; border: 18px solid rgba(84,146,157,.38); border-radius: 48%; transform: rotate(-14deg); }
/* Gleiche Tropfenform und Farbe wie die Marker auf der Karte. */
.place-pin { position: absolute; z-index: 2; left: 50%; top: 50%; width: 26px; height: 26px; transform: translate(-50%, -60%) rotate(45deg); border-radius: 50% 50% 50% 0; background: var(--pin, #ea4335); box-shadow: 0 3px 8px rgba(0,0,0,.25); }
.place-sheet-map { --pin: #ea4335; }
.place-sheet-map.cat-civic { --pin: #4a7fd4; }
.place-sheet-map.cat-culture { --pin: #b055c4; }
.place-sheet-map.cat-commerce { --pin: #e07a2f; }
.place-sheet-map.cat-home { --pin: #d2453f; }
.place-sheet-map.cat-transport { --pin: #5d6b7d; }
.place-sheet-map.cat-industry { --pin: var(--map-historical); }
.place-sheet-map.cat-water { --pin: #2b8fbd; }
.place-sheet-map.cat-nature { --pin: #4a9d5a; }
.place-category { position: absolute; z-index: 2; left: 12px; bottom: 10px; padding: 3px 9px; border-radius: var(--radius-full); background: var(--surface); color: var(--ink); font-size: var(--text-2xs); font-weight: 700; box-shadow: var(--shadow-float); }
.place-pin::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; }
.place-sheet-map.restricted { --pin: var(--muted); }

/* Der Toast lag auf bottom: 34px und damit genau über der untersten App-Reihe —
   „Profil angelegt" verdeckte das Einstellungen-Icon. Am unteren Rand ist kein
   Platz: dort steht auf dem Homescreen das Raster und in Chats die
   Eingabeleiste. Er sitzt deshalb oben, unterhalb der Statusleiste und, sobald
   eine App offen ist, unterhalb des App-Kopfs. */
.toast { position: absolute; z-index: 100; left: 18px; right: 18px; top: 60px; padding: 12px 14px; border-radius: var(--radius-md); color: #fff; background: rgba(22,26,35,.92); backdrop-filter: blur(14px); box-shadow: 0 12px 30px rgba(0,0,0,.3); font-size: var(--text-sm); line-height: 1.4; text-align: center; pointer-events: none; transition: opacity var(--motion-calm) var(--motion-ease), transform var(--motion-calm) var(--motion-ease); }
.phone-bezel.in-app .toast { top: 118px; }
.toast.hidden { opacity: 0; transform: translateY(-15px); pointer-events: none; visibility: hidden; transition: opacity var(--motion-calm) var(--motion-ease), transform var(--motion-calm) var(--motion-ease), visibility var(--motion-none) linear var(--motion-calm); }
.chat-action-list { display: grid; flex: 0 0 auto; gap: 10px; padding: 8px 12px 96px; }
.chat-action-card { display: grid; gap: 8px; padding: 12px; }
.chat-action-card small, .chat-action-card span { color: var(--muted); font-size: var(--text-md); }
.chat-action-card .primary-button { width: 100%; }

@media (max-width: 860px) {
  .stage { display: block; padding: 0; }
  .debug-panel { display: none; }
  .phone-shell { width: 100%; max-width: none; }
  /* Höhe in drei Stufen: 100vh für alte Browser, 100dvh für die einklappende
     Adressleiste, --viewport-height (engine2/platform/pwa.mjs, aus
     visualViewport) für die Bildschirmtastatur — iOS Safari verkleinert weder
     vh noch dvh, wenn die Tastatur aufgeht; ohne die Variable liegt die
     Eingabeleiste unter der Tastatur. min-height fällt deshalb weg. */
  .phone-bezel { width: 100vw; height: 100vh; height: 100dvh; height: var(--viewport-height, 100dvh); min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
  /* Sichere Zonen (viewport-fit=cover): Die echte Statusleiste und der echte
     Home-Indikator des Telefons liegen über dem Inhalt. Die simulierte
     Statusleiste (#statusbar, die Spieluhr) bleibt Fiktion und rückt unter die
     echte; alles, was oben oder unten anliegt, weicht um die Einbuchtung aus.
     Die gezeichnete Kamera-Insel entfällt — das Telefon hat seine eigene. */
  .dynamic-island { display: none; }
  .statusbar { top: env(safe-area-inset-top, 0px); }
  .app-header { top: calc(52px + env(safe-area-inset-top, 0px)); }
  .phone-bezel.in-app .screen { padding-top: calc(108px + env(safe-area-inset-top, 0px)); padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)); }
  .phone-bezel.in-app .screen:has(.tab-bar) { padding-bottom: 0; }
  .home-screen { padding-top: calc(64px + env(safe-area-inset-top, 0px)); padding-bottom: calc(42px + env(safe-area-inset-bottom, 0px)); }
  .intro-screen { padding-top: calc(62px + env(safe-area-inset-top, 0px)); padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px)); }
  .lock-screen { padding-top: calc(78px + env(safe-area-inset-top, 0px)); padding-bottom: calc(45px + env(safe-area-inset-bottom, 0px)); }
  .toast { top: calc(60px + env(safe-area-inset-top, 0px)); }
  .phone-bezel.in-app .toast { top: calc(118px + env(safe-area-inset-top, 0px)); }
  .shade-panel { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
  .home-indicator { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .composer { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
  .messages { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
  .thread:has(.composer.has-voice-status) .messages { padding-bottom: calc(125px + env(safe-area-inset-bottom, 0px)); }
  .chat-action-list { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .sheet-layer { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* Niedrige Desktop-Fenster. Vorher stand hier transform: scale(.8) — das
   verkleinert auch die Schrift auf effektiv 80 % und unterläuft damit den
   Textgrößenregler aus den Einstellungen. Stattdessen darf der Rahmen wirklich
   kürzer werden: min-height fällt weg, height greift auf die Fensterhöhe, und
   der Inhalt fließt in echter Schriftgröße weiter. */
@media (max-height: 720px) and (min-width: 861px) {
  .phone-bezel { min-height: 0; }
}

/* Dokument im Feed: den Blattkopf zeigen statt der Blattmitte, unten weich in
   die Karte auslaufen — das ganze Blatt liegt hinter dem Antippen im
   Belegbetrachter. */
.post-media-doc { position: relative; display: block; }
.post-media-doc > .post-media { object-position: top center; max-height: 400px; }
.post-media-doc::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: linear-gradient(180deg, transparent, var(--surface)); pointer-events: none; }
.post-media-doc > i {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  font-style: normal; font-size: .75rem; white-space: nowrap;
  padding: 4px 12px; border-radius: var(--radius-full); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card);
  pointer-events: none;
}
/* Mehrbild-Beitrag: bis zu drei Blätter nebeneinander. Jede Kachel behält den
   Dokument-Kopfanschnitt und die weiche Unterkante; die Ziffer sagt, welches
   Blatt der Antipp im Belegbetrachter öffnet. */
.post-media-galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.post-media-galerie[data-anzahl="2"] { grid-template-columns: repeat(2, 1fr); }
.post-media-galerie .post-media-doc { border: 1px solid var(--line); border-radius: var(--radius-xs); overflow: hidden; }
.post-media-galerie .post-media { max-height: 250px; height: 250px; object-fit: cover; object-position: top center; }
.post-media-galerie .post-media-doc::after { height: 48px; }
.post-media-galerie .post-media-doc > i { bottom: 6px; padding: 2px 9px; font-size: var(--text-2xs); pointer-events: none; }

/* Hochformatige Blätter bekommen im Betrachter ein höheres Fenster — im
   270-px-Fenster war eine ganze Liste nur briefmarkengroß. */
.artifact-photo-viewport.media-portrait { height: 430px; }

/* Direkte Gesten im Belegbetrachter: greifbarer Ausschnitt (Ziehen) und
   Mausrad-Zoom. Während des Ziehens keine Transform-Übergänge, sonst hängt
   das Bild dem Zeiger hinterher. */
.artifact-photo-viewport { touch-action: none; cursor: grab; user-select: none; }
.artifact-photo-viewport.dragging { cursor: grabbing; }
.artifact-photo-viewport.dragging .artifact-photo { transition: none; }
.artifact-photo-viewport .artifact-photo { -webkit-user-drag: none; }