/* dreamboy — Design-System
 *
 * Wird ZUSAETZLICH zu site.css geladen. Ueberschreibt nur Tokens und einzelne
 * Komponenten. Jede Regel haengt an .db (Body-Klasse) — ohne Ausnahme, damit
 * hetero (/) und gay (/gay/) unberuehrt bleiben.
 *
 * Schriften kommen aus site.css (@font-face Fraunces 500/600, Sora 400/600).
 * Keine externen Font-CDNs.
 */

/* ——————————————————————————————————————————————————————————
   1. Palette — Tinte, Pflaume, Messing, gebrochenes Creme
   ────────────────────────────────────────────────────────── */
.db {
  /* Tinte: der Grund. Blauschwarz, kein Neutralgrau. */
  --db-tinte-900: #0b0910;
  --db-tinte-800: #120f18;
  --db-tinte-700: #1a1522;
  --db-tinte-600: #241d2d;

  /* Pflaume: Waerme im Schatten, seine Seite. */
  --db-pflaume-800: #241729;
  --db-pflaume-700: #311e37;
  --db-pflaume-600: #432a49;
  --db-pflaume-500: #5a3a5e;

  /* Messing: das einzige Metall. Kein Gold, kein Glanz. */
  --db-messing-700: #6f5326;
  --db-messing-600: #8f6b32;
  --db-messing-500: #b0873f;
  --db-messing-400: #c9a05a;
  --db-messing-300: #dfc08b;

  /* Creme: gebrochen, nie Weiss. */
  --db-creme-100: #f2ece0;
  --db-creme-200: #e4dbcb;
  --db-creme-400: #b9ac9b;
  --db-creme-600: #8a7d70;

  /* Signale, gedaempft. */
  --db-gruen: #8faa87;
  --db-rost: #b4694f;

  /* —— Ueberschreibung der site.css-Tokens —— */
  --bg: var(--db-tinte-900);
  --bg2: var(--db-tinte-800);
  --ink: var(--db-creme-100);
  --muted: var(--db-creme-400);
  --accent: var(--db-messing-500);
  --accent2: var(--db-messing-300);
  --line: rgba(226, 214, 196, 0.12);
  --ok: var(--db-gruen);
  --warn: var(--db-messing-300);
  --think: #9aa8bd;

  /* Text ist hier das Produkt: mehr Zeilenhoehe, mehr Zeilenlaenge. */
  --phi: 1.72;

  /* Genau zwei Maße, und es bleiben zwei.
   *
   *   --col       die Schale. Rahmen, Panels, das Chat-Raster enden hier.
   *   --db-read   das Lesemaß. Jeder Fließtext endet hier, ohne Ausnahme.
   *
   * Vorher stand in dieser Datei ein Dutzend einzelner max-width-Angaben in
   * ch: 24ch fuers Hero-Zitat, 42ch fuer den Vorspann, 38ch fuer den
   * Fließtext, 40ch fuer den Lead, 34ch fuers Onboarding. Auf dem Telefon
   * faellt das nicht auf, weil dort ohnehin alles an derselben Kante klebt.
   * Auf dem Desktop endeten dadurch sechs Bloecke auf sechs verschiedenen
   * Kanten — 394, 489, 533, 630, 698, 752 px in einem einzigen Fenster —
   * und die Seite sah aus wie zusammengeweht. Wer hier eine dritte Zahl
   * braucht, braucht sie wirklich und schreibt daneben, wofuer. */
  --col: min(calc(100% - 2 * var(--gutter)), 64rem);
  --db-read: min(calc(100% - 2 * var(--gutter)), 38rem);
  --gutter: 1.15rem;

  --db-font-serif: "Fraunces", Iowan Old Style, Palatino, Georgia, serif;
  --db-font-sans: "Sora", system-ui, -apple-system, sans-serif;
  --font-display: var(--db-font-serif);
  --font-body: var(--db-font-sans);

  --db-radius: 0.55rem;
  --db-radius-sm: 0.3rem;
  --db-shadow: 0 1.4rem 3rem -1.6rem rgba(0, 0, 0, 0.85);
}

/* ——————————————————————————————————————————————————————————
   2. Grundflaeche
   ────────────────────────────────────────────────────────── */
.db {
  background:
    radial-gradient(58rem 30rem at 50% -10%, #2b1a30 0%, transparent 62%),
    radial-gradient(34rem 26rem at 96% 22%, #1e1424 0%, transparent 58%),
    linear-gradient(172deg, var(--db-tinte-900), var(--db-tinte-800) 62%, #0d0a11);
  background-attachment: fixed;
  color: var(--ink);
  letter-spacing: 0.005em;
}
.db a { color: var(--db-messing-300); }
.db a:hover { color: var(--db-creme-100); }

.db ::selection {
  background: var(--db-pflaume-600);
  color: var(--db-creme-100);
}

/* Fokus bleibt sichtbar. Ueberall. */
.db :focus-visible {
  outline: 2px solid var(--db-messing-400);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Serif fuer alles, was er sagt oder was zitiert wird. */
.db blockquote,
.db .db-quote {
  font-family: var(--db-font-serif);
  font-weight: 500;
  font-size: 1.14rem;
  line-height: 1.62;
  color: var(--db-creme-200);
  border-left: 2px solid var(--db-messing-600);
  margin: var(--s3) 0;
  padding: 0.1rem 0 0.1rem var(--s2);
  max-width: var(--db-read);
}

/* ——————————————————————————————————————————————————————————
   3. Bestehende Komponenten, umgefaerbt
   ────────────────────────────────────────────────────────── */
.db .gate {
  background:
    radial-gradient(ellipse 82% 52% at 50% 38%, rgba(90, 58, 94, 0.42), transparent 72%),
    rgba(11, 9, 16, 0.94);
}
.db .gate-brand { letter-spacing: -0.025em; }
.db .gate-brand span { color: var(--db-messing-400); }
.db .gate-copy {
  font-size: 1.08rem;
  line-height: var(--phi);
  max-width: 26ch;
  color: var(--db-creme-200);
}
.db .gate-note { color: rgba(185, 172, 155, 0.72); }

.db .topnav {
  background: rgba(11, 9, 16, 0.86);
  border-bottom-color: var(--line);
}
.db .logo span { color: var(--db-messing-400); }
.db .pill {
  color: var(--db-messing-300);
  border-color: rgba(201, 160, 90, 0.32);
  letter-spacing: 0.09em;
}

.db .btn {
  border-radius: var(--db-radius-sm);
  letter-spacing: 0.015em;
  font-weight: 600;
}
.db .btn-primary {
  background: var(--db-messing-500);
  color: #17110a;
}
.db .btn-primary:hover { background: var(--db-messing-400); }
.db .btn-ghost {
  color: var(--db-creme-200);
  border-color: var(--line);
  background: rgba(226, 214, 196, 0.03);
}
.db .btn-ghost:hover { border-color: rgba(201, 160, 90, 0.45); }

.db .hero-media::after {
  background:
    linear-gradient(
      180deg,
      rgba(11, 9, 16, 0.14) 0%,
      rgba(11, 9, 16, 0.08) 44%,
      rgba(18, 12, 22, 0.24) 66%,
      rgba(13, 10, 17, 0.5) 76%,
      rgba(11, 9, 16, 0.82) 88%,
      var(--db-tinte-900) 100%
    ),
    linear-gradient(90deg, rgba(11, 9, 16, 0.32) 0%, transparent 42%);
}
.db .hero-media img.hero-fg { filter: saturate(0.94) contrast(1.02); }
.db .hero-brand span { color: var(--db-messing-400); }
.db .hero-h {
  font-family: var(--db-font-serif);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.01em;
  max-width: var(--db-read);
}
.db .hero-p {
  line-height: var(--phi);
  max-width: var(--db-read);
  color: var(--db-creme-400);
}

/* Ueberschriften hielten sich an gar kein Maß und liefen deshalb ueber die
 * volle Schale, waehrend der Text darunter bei 38rem endete — die auffaelligste
 * der sechs Kanten. Sie gehoeren zum Fließtext, also ans Lesemaß. */
.db .hero-brand,
.db .pitch-h,
.db .section > h2,
.db .section > h3 { max-width: var(--db-read); }

.db .pitch-h { letter-spacing: -0.025em; line-height: 1.12; }
.db .pitch-body {
  font-size: clamp(1.06rem, 2vw, 1.18rem);
  line-height: 1.72;
  max-width: var(--db-read);
}
.db .pitch-body p { color: var(--db-creme-200); }
.db .pitch-body .pitch-close {
  font-family: var(--db-font-serif);
  font-weight: 500;
  color: var(--db-creme-100);
}

.db .section .lead { max-width: var(--db-read); line-height: var(--phi); }
.db .panel {
  border-color: var(--line);
  background: linear-gradient(168deg, rgba(67, 42, 73, 0.22), rgba(26, 21, 34, 0.55));
  border-radius: var(--db-radius);
  box-shadow: var(--db-shadow);
}

/* Chat — der Kern. */
.db .tama-ring-fg { stroke: var(--db-messing-400); }
.db .tama-bar > span {
  background: linear-gradient(90deg, var(--db-messing-600), var(--db-messing-300));
}
.db .tama-name { letter-spacing: -0.015em; }
.db .tama-chip {
  border-color: var(--line);
  background: rgba(226, 214, 196, 0.04);
  border-radius: var(--db-radius-sm);
  padding: 0.4rem 0.62rem;
}
.db .tama-chip:hover { border-color: rgba(201, 160, 90, 0.5); }
.db .tama-chip.is-ready,
.db .tama-actions .btn.is-ready {
  border-color: var(--db-messing-500);
  color: var(--db-creme-100);
  box-shadow: 0 0 0 1px rgba(176, 135, 63, 0.28);
}
.db .tama-fomo { color: var(--db-messing-300); }

.db #log { gap: 0.8rem; max-height: 48vh; }
.db .bubble {
  border-radius: var(--db-radius);
  line-height: 1.62;
  font-size: 0.97rem;
  padding: 0.82rem 1rem;
  max-width: 84%;
}
.db .bubble.bot {
  font-family: var(--db-font-serif);
  font-weight: 500;
  font-size: 1.03rem;
  line-height: 1.66;
  background: linear-gradient(160deg, rgba(67, 42, 73, 0.5), rgba(36, 23, 41, 0.55));
  border-color: rgba(226, 214, 196, 0.14);
  border-bottom-left-radius: 0.15rem;
}
.db .bubble.user {
  background: rgba(226, 214, 196, 0.07);
  border-color: var(--line);
  border-bottom-right-radius: 0.15rem;
}
.db .meta { color: var(--db-creme-600); letter-spacing: 0.02em; }
.db textarea {
  background: rgba(11, 9, 16, 0.55);
  border-radius: var(--db-radius-sm);
  line-height: 1.5;
  padding: 0.85rem 1rem;
}
.db .tama.is-typing .composer textarea {
  box-shadow: 0 0 0 1px rgba(201, 160, 90, 0.35);
}
.db .status.err { color: var(--db-rost); }
.db .note { color: var(--db-creme-600); line-height: 1.55; }
.db .pack-label { color: var(--db-creme-600); letter-spacing: 0.09em; }

.db .loot-card {
  background: var(--db-tinte-700);
  border-color: var(--line);
  border-radius: var(--db-radius);
  box-shadow: var(--db-shadow);
}

/* Feed — Beiwerk, nicht Hauptsache. Kein Neonring. */
.db .story img {
  background: linear-gradient(145deg, var(--db-messing-600) 0%, var(--db-messing-300) 55%, var(--db-pflaume-500) 100%);
  box-shadow: 0 0 0 1px rgba(11, 9, 16, 0.6);
}
.db .story.seen img { background: #3b3340; opacity: 0.7; }
.db .grid button.grid-item,
.db .profile-grid button { background: var(--db-tinte-700); }
.db .grid img { background: var(--db-tinte-600); }
.db .ig-media img { filter: contrast(1.02) saturate(0.96); }
.db .ig-lock {
  background: linear-gradient(180deg, rgba(11, 9, 16, 0.18), rgba(11, 9, 16, 0.78));
  color: var(--db-creme-100);
  font-weight: 500;
  font-family: var(--db-font-serif);
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.95rem;
}
.db .ig-lock::before {
  content: "Noch nicht";
  font-family: var(--db-font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--db-messing-300);
  margin-bottom: 0.4rem;
}
.db .ig-caption {
  font-family: var(--db-font-serif);
  font-weight: 500;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--db-creme-200);
}
.db .ig-caption strong {
  font-family: var(--db-font-sans);
  font-size: 0.86rem;
  color: var(--db-creme-100);
}
.db .modal-caption {
  font-family: var(--db-font-serif);
  font-size: 1rem;
  line-height: 1.62;
}
.db .modal-card { background: var(--db-tinte-700); border-radius: var(--db-radius); }
.db .slide-dots .dot.on { background: var(--db-messing-400); }
.db .slide-dots .dot.lock { outline-color: var(--db-messing-600); }

.db .pass-bar { letter-spacing: 0.01em; }
.db .pass-status.on { color: var(--db-gruen); }

.db .dm { background: var(--db-tinte-900); }
.db .abo-strip,
.db .abo-form input { background: var(--db-tinte-700); border-radius: var(--db-radius); }
.db .abo-kicker { color: var(--db-messing-300); letter-spacing: 0.06em; }
.db .footer { color: var(--db-creme-600); line-height: 1.7; }
.db .footer a { color: var(--db-creme-400); }

/* ——————————————————————————————————————————————————————————
   4. Neue Komponenten
   ────────────────────────────────────────────────────────── */

/* 4.1 .db-onboard — drei Stufen, Karten zum Antippen
 *
 * Stand vorher zentriert im Lesemaß und hatte damit als einziger Block der
 * Seite eine eigene linke Kante. Jetzt beginnt es links wie alles andere;
 * die Karten sind Rahmen, kein Fließtext, und duerfen die Schale nutzen.
 * Der Text darin bleibt am Lesemaß. */
.db .db-onboard {
  width: 100%;
  margin: 0;
  padding: var(--s4) 0 var(--s5);
  display: grid;
  gap: var(--s3);
}
.db .db-onboard-step { color: var(--db-creme-600); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; margin: 0; }
.db .db-onboard-h {
  font-family: var(--db-font-serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 4.5vw, 2.3rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin: 0.2rem 0 0.35rem;
}
.db .db-onboard-sub { margin: 0; color: var(--db-creme-400); line-height: var(--phi); max-width: var(--db-read); }
/* auto-fit statt 1fr 1fr: Schritt 1 hat drei Karten, Schritt 2 hat vier. Mit
 * zwei festen Spalten stand bei den Typen eine Karte allein in der zweiten
 * Reihe. Jetzt fuellt jede Stufe ihre Reihe aus. */
.db .db-onboard-grid {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.db .db-onboard-dots { display: flex; gap: 0.4rem; align-items: center; }
.db .db-onboard-dots i {
  width: 1.6rem; height: 2px;
  background: rgba(226, 214, 196, 0.16);
  display: block;
}
.db .db-onboard-dots i.is-done { background: var(--db-messing-600); }
.db .db-onboard-dots i.is-current { background: var(--db-messing-300); }
.db .db-onboard-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2); margin-top: var(--s1);
}

/* 4.2 .db-choice — eine Auswahlkarte (Archetyp / Szenario) */
.db .db-choice {
  appearance: none;
  display: grid;
  gap: 0.35rem;
  text-align: left;
  width: 100%;
  padding: 0.95rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: var(--db-radius);
  background: linear-gradient(162deg, rgba(67, 42, 73, 0.2), rgba(26, 21, 34, 0.5));
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.22s ease, background 0.22s ease, transform 0.18s ease;
}
.db .db-choice:hover { border-color: rgba(201, 160, 90, 0.4); }
.db .db-choice:active { transform: scale(0.995); }
.db .db-choice.is-selected {
  border-color: var(--db-messing-500);
  background: linear-gradient(162deg, rgba(90, 58, 94, 0.4), rgba(36, 23, 41, 0.6));
  box-shadow: inset 0 0 0 1px rgba(176, 135, 63, 0.22);
}
.db .db-choice-t {
  font-family: var(--db-font-serif);
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.db .db-choice-d { font-size: 0.86rem; line-height: 1.58; color: var(--db-creme-400); }
.db .db-choice-meta {
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--db-messing-300);
}
.db .db-choice-media {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--db-radius-sm);
  margin-bottom: 0.15rem;
  filter: saturate(0.9);
}

/* 4.3 .db-chapter-rail — Kapitel statt Pack-Rail */
.db .db-chapter-rail {
  display: grid;
  gap: 0;
  margin: var(--s3) 0;
  position: relative;
  padding-left: 1.15rem;
}
.db .db-chapter-rail::before {
  content: "";
  position: absolute;
  left: 0.31rem; top: 0.9rem; bottom: 0.9rem;
  width: 1px;
  background: linear-gradient(180deg, var(--db-messing-700), rgba(226, 214, 196, 0.1));
}
.db .db-chapter-rail-h {
  margin: 0 0 0.5rem -1.15rem;
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--db-creme-600);
}

/* 4.4 .db-chapter — offen / verschlossen / aktuell */
.db .db-chapter {
  position: relative;
  display: grid;
  gap: 0.18rem;
  padding: 0.7rem 0.2rem 0.75rem 0.75rem;
  border: 0;
  background: none;
  text-align: left;
  color: inherit;
  cursor: pointer;
  border-radius: var(--db-radius-sm);
}
.db .db-chapter::before {
  content: "";
  position: absolute;
  left: -1.15rem; top: 1.05rem;
  width: 0.62rem; height: 0.62rem;
  border-radius: 50%;
  background: var(--db-tinte-900);
  border: 1px solid var(--db-messing-700);
}
.db .db-chapter-num {
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--db-creme-600);
}
.db .db-chapter-t {
  font-family: var(--db-font-serif);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.db .db-chapter-sub { font-size: 0.83rem; line-height: 1.55; color: var(--db-creme-400); max-width: var(--db-read); }

.db .db-chapter.is-open::before { background: var(--db-messing-600); border-color: var(--db-messing-600); }
.db .db-chapter.is-open .db-chapter-t { color: var(--db-creme-200); }

.db .db-chapter.is-current {
  background: linear-gradient(96deg, rgba(90, 58, 94, 0.28), transparent 80%);
}
.db .db-chapter.is-current::before {
  background: var(--db-messing-300);
  border-color: var(--db-messing-300);
  box-shadow: 0 0 0 3px rgba(201, 160, 90, 0.16);
}
.db .db-chapter.is-current .db-chapter-t { color: var(--db-creme-100); }
.db .db-chapter.is-current .db-chapter-num { color: var(--db-messing-300); }

.db .db-chapter.is-locked { cursor: default; }
.db .db-chapter.is-locked::before { background: var(--db-tinte-700); border-color: rgba(226, 214, 196, 0.16); }
.db .db-chapter.is-locked .db-chapter-t { color: var(--db-creme-600); }
.db .db-chapter.is-locked .db-chapter-sub { color: rgba(138, 125, 112, 0.75); }
.db .db-chapter.is-locked .db-chapter-num::after {
  content: " · verschlossen";
  letter-spacing: 0.06em;
  text-transform: none;
}

/* 4.5 .db-voice — Sprachnachricht: Knopf, Zustandswort, Laufzeit.
   Die Waveform-Regeln standen hier bis dreamboy.js die 28 Balken gestrichen
   hat — sie zeichneten die Huellkurve eines Tons, den niemand gemessen hat. */
.db .db-voice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  align-self: flex-start;
  max-width: 84%;
  padding: 0.6rem 0.9rem 0.6rem 0.6rem;
  border: 1px solid rgba(226, 214, 196, 0.14);
  border-radius: var(--db-radius);
  border-bottom-left-radius: 0.15rem;
  background: linear-gradient(160deg, rgba(67, 42, 73, 0.5), rgba(36, 23, 41, 0.55));
}
.db .db-voice-play {
  flex: 0 0 auto;
  width: 2.4rem; height: 2.4rem;
  border: 0;
  border-radius: 50%;
  background: var(--db-messing-500);
  color: #17110a;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  line-height: 1;
  transition: background 0.18s ease;
}
.db .db-voice-play:hover { background: var(--db-messing-400); }
.db .db-voice-label { flex: 1 1 auto; font-size: 0.88rem; color: var(--db-creme-400); }
.db .db-voice-time {
  flex: 0 0 auto;
  font-size: 0.72rem;
  color: var(--db-creme-600);
  font-variant-numeric: tabular-nums;
}
.db .db-voice.is-locked .db-voice-play { background: rgba(226, 214, 196, 0.14); color: var(--db-creme-400); }

/* 4.6 .db-memory — "Er weiss:" mit Erinnerungs-Chips */
.db .db-memory {
  border: 1px solid var(--line);
  border-left: 2px solid var(--db-messing-600);
  border-radius: var(--db-radius-sm);
  background: rgba(36, 23, 41, 0.45);
  padding: 0.8rem 0.95rem;
  margin: var(--s2) 0;
}
.db .db-memory-h {
  margin: 0 0 0.55rem;
  font-family: var(--db-font-serif);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  color: var(--db-creme-200);
}
.db .db-memory-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.db .db-memory-chip {
  font-size: 0.76rem;
  line-height: 1.4;
  padding: 0.3rem 0.55rem;
  border-radius: 99px;
  border: 1px solid rgba(201, 160, 90, 0.26);
  background: rgba(201, 160, 90, 0.07);
  color: var(--db-creme-200);
}
.db .db-memory-chip.is-new { border-color: var(--db-messing-400); color: var(--db-creme-100); }

/* 4.7 war die Ungelesen-Zeile mit Punkt und Uhrzeit. Sie ist samt ihrem
   JavaScript gestrichen: die einzige Zahl, aus der sie ihre Zeit gerechnet
   hat, war der Seitenabgang der Besucherin — nicht sein Schreiben. */

/* 4.8 .db-msg-his / .db-msg-hers — der Chat */
.db .db-msg-his,
.db .db-msg-hers {
  max-width: 84%;
  padding: 0.82rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--db-radius);
  white-space: pre-wrap;
}
.db .db-msg-his {
  align-self: flex-start;
  font-family: var(--db-font-serif);
  font-weight: 500;
  font-size: 1.04rem;
  line-height: 1.68;
  letter-spacing: 0.004em;
  color: var(--db-creme-100);
  background: linear-gradient(160deg, rgba(67, 42, 73, 0.55), rgba(36, 23, 41, 0.55));
  border-color: rgba(226, 214, 196, 0.14);
  border-bottom-left-radius: 0.15rem;
}
.db .db-msg-his em { font-style: italic; color: var(--db-creme-200); }
.db .db-msg-hers {
  align-self: flex-end;
  font-family: var(--db-font-sans);
  font-size: 0.94rem;
  line-height: 1.56;
  color: var(--db-creme-200);
  background: rgba(226, 214, 196, 0.07);
  border-bottom-right-radius: 0.15rem;
}
.db .db-msg-note {
  align-self: center;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--db-creme-600);
  padding: 0.2rem 0;
}

/* 4.9 .db-safety — Grenzen und Diskretion, leise */
.db .db-safety {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--db-creme-600);
  letter-spacing: 0.02em;
  padding: 0.5rem 0;
  margin: 0;
}
.db .db-safety::before {
  content: "·";
  color: var(--db-messing-600);
}
.db .db-safety a { color: var(--db-creme-400); text-decoration: underline; text-underline-offset: 0.2em; }
.db .db-safety a:hover { color: var(--db-creme-100); }
.db .db-safety-bar {
  border-top: 1px solid var(--line);
  padding: 0.6rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  justify-content: center;
}

/* ——————————————————————————————————————————————————————————
   5. Der Chat auf dem Desktop — zwei Spalten
   ──────────────────────────────────────────────────────────
   Unter 68rem bleibt alles wie gehabt: er, das Gespraech und der Verlauf
   fliessen in Markup-Reihenfolge untereinander. Darueber wandern "er" und
   "Verlauf" in eine schmale Spalte links, das Gespraech steht rechts daneben
   und laeuft ueber beide Reihen.

   Der Chat ist das Produkt, nicht der Feed — auf dem Desktop sah man davon
   bisher nichts: eine schmale Spalte Text, rechts das halbe Fenster leer.
   Jetzt steht er dauerhaft im Bild, waehrend sie schreibt, und die Kapitel
   liegen neben dem Gespraech statt darunter.

   Die drei Huellen stehen in dreamboy/index.html. Ohne sie muesste jedes
   einzelne Kind von .tama seine Rasterzelle selbst benennen, und alles
   spaeter Hinzugefuegte faende von allein keinen Platz.
   ────────────────────────────────────────────────────────── */

.db .db-er,
.db .db-gespraech,
.db .db-verlauf { min-width: 0; }

/* Ein Abstand fuer alle drei, statt der gesammelten Aussenabstaende der
 * einzelnen Absaetze — sonst steht in der schmalen Spalte zwischen Stimmung,
 * Tagesereignis und Streak jeweils etwas anderes. */
.db .db-er { display: flex; flex-direction: column; gap: 0.6rem; }
.db .db-er > * { margin-top: 0; margin-bottom: 0; }

.db .db-gespraech { display: flex; flex-direction: column; gap: var(--s2); }
.db .db-verlauf { margin-top: var(--s3); }

@media (min-width: 68rem) {
  .db .tama {
    display: grid;
    grid-template-columns: 19rem minmax(0, 1fr);
    grid-template-areas:
      "er      gespraech"
      "verlauf gespraech";
    column-gap: 2.75rem;
    row-gap: var(--s3);
    align-items: start;
  }
  .db .db-er { grid-area: er; }
  .db .db-gespraech { grid-area: gespraech; }
  .db .db-verlauf { grid-area: verlauf; margin-top: 0; }

  /* In der schmalen Spalte steht sein Bild ueber dem Namen statt daneben und
   * darf dabei groesser werden. Das Portraet ist der Grund, warum es die
   * linke Spalte ueberhaupt gibt. */
  .db .tama-head {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 0.85rem;
  }
  .db .tama-avatar-wrap { width: 7.2rem; height: 7.2rem; }

  /* Das Gespraech traegt die Seite, also darf es hoch werden. Die Untergrenze
   * bleibt klein: beim ersten Aufschlagen steht dort eine Nachricht, und
   * jedes rem Mindesthoehe darueber ist sichtbares Loch zwischen seiner
   * Sprachnachricht und dem Eingabefeld. */
  .db #log { max-height: 62vh; min-height: 9rem; }
}

/* site.css sortiert unter 520px die Eingabe vor den Verlauf, damit sie in
 * Daumennaehe bleibt. Die Regeln dort zielen auf direkte Kinder von .tama —
 * seit den drei Huellen sind das nicht mehr dieselben Elemente, und ohne
 * Ersatz faellt jedes Kind auf order 0 zurueck. Genau das war schon vorher
 * kaputt: .db-memory und .db-chapter-rail hatten in site.css nie ein order
 * bekommen, standen also auf kleinen Schirmen ueber seinem Avatar. */
@media (max-width: 520px) {
  .db .db-gespraech .composer { order: 1; }
  .db .db-gespraech #log { order: 2; min-height: 28vh; }
  .db .db-gespraech .status { order: 3; }
  .db .db-gespraech .db-memory { order: 4; }
}

/* ——————————————————————————————————————————————————————————
   6. Bewegung nur, wenn erwuenscht
   ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .db,
  .db *,
  .db *::before,
  .db *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}