/* ============================================================
   kintso.care — EIN Stylesheet für die ganze Seite.

   Die Werte stammen aus src/core/theme/tokens.ts, damit die Seite
   nicht neben der App steht, sondern dazugehört.

   ⚠ ZWEI ABWEICHUNGEN VOM BESTAND, BEIDE ABSICHTLICH:

   (1) --ink-soft ist #63605A, nicht das #8A8A8A der App. Der
       App-Wert liegt bei 3,45:1 und ist eine bekannte offene
       Rechnung (273 Stellen). Eine neue Fläche erbt keine
       Kontrast-Schuld.

   (2) GOLD IST HIER NIEMALS SCHRIFT. Gemessen (docs/feedback/
       p20-kontrast-messung.md): #D4AF37 auf Sand = 1,85:1,
       #B8960C = 2,50–2,84:1. Gold erscheint auf dieser Seite
       ausschliesslich als Strich in den beiden Marken-Zeichen —
       dem Logo-Naht und dem Goldenen Faden. Das ist zugleich die
       gepinnte Regel der App: Gold ist ein Moment, keine
       Dekoration.

   Keine externe Anfrage. Keine Schriftart von einem CDN — Google
   Fonts über das CDN überträgt die IP des Besuchers in die USA,
   und auf einer Seite, deren Zweck eine glaubwürdige
   Datenschutzerklärung ist, wäre das ein Widerspruch in sich.
   ============================================================ */

:root {
  --ground: #f5f0e8;
  --card: #ffffff;
  --card-2: #f3f3f1;
  --ink: #2c2c2c;
  --ink-soft: #63605a;
  --ink-faint: #8f8a80;
  --sage-text: #5a6b63;
  --sage-fill: #9eaca2;
  /* ⚠ EIGENES ROLLEN-PAAR FÜR KNÖPFE (2026-08-25). `--sage-fill`
     ist eine FLÄCHEN-Farbe und trägt keine weisse Schrift: #9eaca2
     mit #fff ergibt 2,37:1, im Dunkeln #6d7f75 mit #fff 4,25:1 —
     beide unter 4,5. Gemessen am `.oeffnen`-Knopf auf /pair/, der
     einzigen öffentlich erreichbaren funktionalen Seite.
     ⚠ Und es sind ZWEI Werte, nicht einer: im Dunkeln muss der
     Grund hell und die Schrift dunkel werden. Ein Token für beide
     Rollen fällt im Hellen nie auf und bricht in der zweiten
     Palette — dieselbe Klasse, die CLAUDE.md als eigene Disziplin
     führt. */
  --knopf-bg: #5a6b63;
  --knopf-text: #ffffff;
  --sage-light: #d2ddd0;
  --sand: #d8c3a5;
  --gold: #d4af37;
  --rule: #e5ddd0;
  --shadow: 0 1px 2px rgba(44, 44, 44, 0.03), 0 10px 30px rgba(44, 44, 44, 0.04);
  /* ⚠ `"Noto Serif"` ans Ende, vor dem generischen `serif` (2026-08-25).
     Android liefert KEINEN der Namen davor — es fiel bisher auf Noto
     Serif durch, aber unausgesprochen. Der Name kostet null Bytes und
     macht sichtbar, was auf der zweiten Zielplattform wirklich
     erscheint. */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
    Georgia, "Noto Serif", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #1e1b17;
    --card: #272320;
    --card-2: #2f2a25;
    --ink: #ede6d9;
    --ink-soft: #b3aa9b;
    --ink-faint: #857c6f;
    --sage-text: #a9baaf;
    --sage-fill: #6d7f75;
    /* Rollen getauscht: heller Grund, dunkle Schrift → 8,96:1. */
    --knopf-bg: #a9baaf;
    --knopf-text: #131615;
    --sage-light: #3a4540;
    --sand: #8a7658;
    --gold: #d4af37;
    --rule: #3a342c;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.22);
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--sage-light);
  color: var(--ink);
}

a {
  color: var(--sage-text);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

@media (hover: hover) {
  a:hover {
    color: var(--ink);
  }
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--sage-fill);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   ZUM INHALT SPRINGEN — WCAG 2.4.1, Stufe A.
   ═══════════════════════════════════════════════════════════════════

   ⚠ WARUM DAS HIER MEHR IST ALS EINE PFLICHTÜBUNG. Vor dem ersten
   Satz stehen fünf Fokus-Ziele (Marke plus vier Navigations-Links),
   auf `/privacy/` zusätzlich 16 Inhaltsverzeichnis-Anker — 21
   Tab-Anschläge, auf jeder Seite neu. Landmarken (`<main>`) helfen
   Screenreadern; sie helfen NICHT jemandem, der ohne Screenreader
   mit der Tastatur navigiert, weil er motorisch keine Maus führen
   kann. Für eine Seite, deren Zweck die ERREICHBARKEIT einer
   Datenschutzerklärung ist, ist das keine Kür.

   ⚠ NICHT `display: none` und nicht `visibility: hidden` — beides
   nimmt das Ziel auch der Tastatur. Der Link steht im Fluss und wird
   nur aus dem Sichtfeld geschoben; bei Fokus kommt er zurück.
*/
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 11px 20px;
  border-radius: 0 0 12px 12px;
  background: var(--knopf-bg);
  color: var(--knopf-text);
  font: 600 15px/1 var(--sans);
  text-decoration: none;
  transition: top .16s ease;
}
.skip:focus {
  top: 0;
}
@media (prefers-reduced-motion: reduce) {
  .skip { transition: none; }
}

/* ── Gerüst ────────────────────────────────────────────── */

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}

.wrap--wide {
  max-width: 940px;
}

/* ── Kopfleiste ────────────────────────────────────────── */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
}

.brand svg {
  display: block;
  width: 34px;
  height: 34px;
}

.brand span {
  font-family: var(--serif);
  font-size: 21px;
  letter-spacing: 0.01em;
}

.top nav {
  display: flex;
  gap: 20px;
  font-size: 14.5px;
  flex-wrap: wrap;
}

.top nav a {
  color: var(--ink-soft);
  text-decoration: none;
  /* ⚠ POLSTERUNG STATT NACKTEM LINK. Ohne sie ergibt 14,5 px Schrift
     mit der geerbten `line-height: 1.68` rund 24 px Trefferfläche —
     gegen die 44 px, die das Haus für die App verlangt (Apple HIG).
     Der negative Rand hält die Leiste optisch dort, wo sie war;
     gewachsen ist nur, was der Finger trifft. */
  display: inline-block;
  padding: 10px 4px;
  margin: -10px 0;
}

/* ⚠ `[aria-current]` bleibt AUSSERHALB der Hover-Abfrage: die
   aktuelle Seite ist auch auf dem Telefon markiert. */
.top nav a[aria-current="page"] {
  color: var(--ink);
}

@media (hover: hover) {
  .top nav a:hover { color: var(--ink); }
}

/* ── Woher der Name kommt ──────────────────────────────── */
/* ⚠ Der eine Ort, an dem Kintsugi BENANNT wird (2026-08-27). Die App
   zeigt das Bild an sieben Stellen — Logo, 45 Glyphen mit je einem
   goldenen Akzent, die Schalen, die Bruch-Heilungs-Animation — und
   nennt es nirgends. Hier steht der Satz, der den NAMEN einordbar
   macht; alles andere bleibt beim Zeigen.

   Zeichen links, Text rechts; auf schmalen Geräten untereinander.
   Das Zeichen ist DEKORATIV (aria-hidden) — die Überschrift trägt
   die Bedeutung. */
.herkunft {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  margin-top: 40px;
  padding-top: 34px;
  border-top: 1px solid var(--rule);
}

.herkunft-zeichen {
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  display: block;
  /* Der Zeichnungs-Anlauf der Naht: dieselbe Kurve wie im Kopf, aber
     hier darf sie sich einmal zeigen. ⚠ Nur, wenn Bewegung erwünscht
     ist — die Abschaltung steht unten. */
  opacity: 0;
  animation: einblenden .9s ease-out .2s both;
}

.herkunft h2 {
  margin: 0 0 10px;
}

.herkunft p {
  margin: 0;
}

@media (max-width: 560px) {
  .herkunft {
    flex-direction: column;
    gap: 18px;
    align-items: center;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .herkunft-zeichen {
    animation: none;
    opacity: 1;
  }
}

/* ── Der Goldene Faden als Trenner ─────────────────────── */
/* Der Pfad ist zeichengleich der ConnectionGlyph der App:
   M2 10 Q 11 -2, 20 10 T 38 10 — eine quadratische Bézier.
   Gerade Linien sind für dieses Zeichen ausdrücklich verboten. */

.thread {
  display: block;
  margin: 0 auto;
  width: 76px;
  height: 38px;
  overflow: visible;
}

.thread path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.sep {
  padding: 44px 0;
}

/* ── Typografie ────────────────────────────────────────── */

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 600;
  text-wrap: balance;
  margin: 0;
  letter-spacing: -0.005em;
}

h1 {
  font-size: clamp(34px, 6.4vw, 52px);
  line-height: 1.12;
}

h2 {
  font-size: clamp(24px, 3.6vw, 31px);
  line-height: 1.24;
}

h3 {
  font-size: 19.5px;
  line-height: 1.35;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-text);
  margin: 0;
}

p {
  margin: 0;
}

.lede {
  font-size: 19.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.small {
  font-size: 14.5px;
  color: var(--ink-soft);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.stack--tight {
  gap: 11px;
}

.stack--loose {
  gap: 30px;
}

/* ── Startseite ────────────────────────────────────────── */

.hero {
  padding: 76px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.hero .lede {
  max-width: 34ch;
}

.quote {
  font-family: var(--serif);
  font-size: 23px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  max-width: 30ch;
}

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.pillar {
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* ⚠ DIE GLYPHEN DER TAB-LEISTE, nicht neu gezeichnete (2026-08-25).
   Wer die App später öffnet, sieht dieselben vier Zeichen wieder —
   das ist der einzige Wiedererkennungswert, den eine Website ohne
   Bildschirmfotos aufbauen kann. Eingebettet, nicht als <img>:
   Safari wertet Media Queries im Bild-Puffer nicht aus, und bei
   einer iOS-ersten App wäre das der falsche Browser zum Ausfallen.
   Zusammen unter 700 Byte. */
.pillar-glyph {
  display: block;
  width: 26px;
  height: 26px;
  margin-bottom: 12px;
  color: var(--sage-text);
}

.pillar h3 {
  color: var(--ink);
}

.pillar p {
  font-size: 15.5px;
  color: var(--ink-soft);
  line-height: 1.6;
}

.promise {
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.promise ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.promise li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 16px;
  color: var(--ink-soft);
}

.promise li svg {
  width: 22px;
  height: 11px;
  margin-top: 8px;
  overflow: visible;
}

.promise li b {
  color: var(--ink);
  font-weight: 600;
}

.numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
}

.numbers div {
  background: var(--card);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.numbers b {
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.numbers span {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
}

.note {
  background: var(--card-2);
  border-radius: 16px;
  padding: 22px 24px;
  font-size: 15.5px;
  color: var(--ink-soft);
  line-height: 1.62;
}

.note b {
  color: var(--ink);
  font-weight: 600;
}

/* ── Rechtstexte ───────────────────────────────────────── */

.legal {
  padding: 56px 0 0;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.legal section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.legal h2 {
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}

.legal h3 {
  margin-top: 8px;
}

.legal p,
.legal li {
  color: var(--ink-soft);
  font-size: 16.5px;
}

.legal strong {
  color: var(--ink);
  font-weight: 600;
}

.legal ul,
.legal ol {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.legal li::marker {
  color: var(--ink-faint);
}

.toc {
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 22px 24px;
}

.toc ol {
  margin: 0;
  padding-left: 20px;
  columns: 2;
  column-gap: 26px;
  font-size: 15px;
}

.toc li {
  margin-bottom: 6px;
  break-inside: avoid;
}

.toc a {
  text-decoration: none;
}

@media (hover: hover) {
  .toc a:hover {
    text-decoration: underline;
  }
}

/* Datentabelle — die Empfänger-Übersicht */
.tw {
  overflow-x: auto;
  border-radius: 16px;
  box-shadow: var(--shadow);
  background: var(--card);
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
  font-size: 14.5px;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 13px 16px;
  border-bottom: 1px solid var(--rule);
  line-height: 1.5;
}

thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

tbody th {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

td {
  color: var(--ink-soft);
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: none;
}

/* Der Platzhalter-Block — sichtbar, nicht versteckt */
.fill {
  background: var(--card-2);
  border-left: 3px solid var(--sage-fill);
  border-radius: 0 16px 16px 0;
  padding: 20px 22px;
  font-size: 15.5px;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fill b {
  color: var(--ink);
  font-weight: 600;
}

.fill code {
  font-family: var(--mono);
  font-size: 13.5px;
  background: var(--ground);
  padding: 2px 6px;
  border-radius: 5px;
  color: var(--ink);
}

.stand {
  font-size: 14px;
  color: var(--ink-faint);
}

/* ── Fusszeile ─────────────────────────────────────────── */

footer.site {
  margin-top: 72px;
  border-top: 1px solid var(--rule);
  padding: 30px 0 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-items: baseline;
  justify-content: space-between;
  font-size: 14.5px;
  color: var(--ink-faint);
}

footer.site nav {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

footer.site a {
  color: var(--ink-soft);
  text-decoration: none;
  /* Dieselbe Rechnung wie in der Kopfleiste. */
  display: inline-block;
  padding: 9px 4px;
  margin: -9px 0;
}

@media (hover: hover) {
  footer.site a:hover {
    color: var(--ink);
    text-decoration: underline;
  }
}

/* ── Bewegung nur, wenn sie erwünscht ist ──────────────── */

@media (prefers-reduced-motion: no-preference) {
  .thread path {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: zeichnen 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
  @keyframes zeichnen {
    to {
      stroke-dashoffset: 0;
    }
  }
}

@media (max-width: 560px) {
  body {
    font-size: 16.5px;
  }
  .wrap {
    padding: 0 18px;
  }
  .hero {
    padding: 48px 0 4px;
  }
  .toc ol {
    columns: 1;
  }
  .promise {
    padding: 26px 22px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ZWEI BEWEGUNGEN — und beide darf man abstellen.
   ═══════════════════════════════════════════════════════════════════

   ⚠ WARUM ÜBERHAUPT BEWEGUNG, auf einer Seite, die Ruhe verspricht.
   Zwei Dinge an Kintso lassen sich in Worten kaum erklären und in
   einem Standbild gar nicht: dass der Echo-Dialog ZEITVERSETZT läuft
   (einer schreibt, der andere liest später und spiegelt), und dass
   die Auszeit BEIDE Geräte betrifft, nicht nur das eigene.

   ⚠ UND WARUM SIE HIER ANDERS IST ALS BEIM WETTBEWERB. Gemessen am
   2026-08-14: Paired animiert `parallax-flip-x`, `orbit-200px` und
   `ping` — und kennt `prefers-reduced-motion` in seinen Stylesheets
   kein einziges Mal. Genau dort liegt die Kante. Nicht mehr
   Bewegung, sondern die einzige, die man abschalten kann, ohne dass
   Bedeutung verschwindet.

   ⚠⚠ DIE TRAGENDE REGEL: DER RUHEZUSTAND IST DER FERTIGZUSTAND.
   Ohne JavaScript, ohne Animation, bei „Bewegung reduzieren" steht
   das Bild VOLLSTÄNDIG da — alle Beiträge sichtbar, der Schleier
   liegt, der Kreis ruht. Die Animation fügt nichts hinzu, was man
   sonst nicht sähe; sie zeigt nur die REIHENFOLGE. Wer sie abstellt,
   verliert Zeit, nicht Inhalt.

   Timing und Werte stammen aus der App (`BreathingCircle.tsx`,
   `tokens.ts`), nicht aus dem Gefühl.
   ═══════════════════════════════════════════════════════════════════ */

.buehne {
  background: var(--card);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── 1 · Das Echo-Protokoll ─────────────────────────────────────── */

.echo ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.beitrag {
  max-width: min(84%, 30rem);
  border-radius: 18px;
  padding: 15px 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.beitrag--a { align-self: flex-start; background: var(--sage-light); }
.beitrag--b {
  align-self: flex-end;
  background: var(--card-2, #f3f3f1);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.beitrag .wer {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-text);
}
.beitrag--b .wer { color: var(--ink-soft); }
/* ⚠ --ink-soft, NICHT --ink-faint: #8F8A80 misst auf der Karte
   3,43:1 und fällt bei 16 px durch AA. #63605A misst 6,27:1. */
.beitrag .satz { font-size: 16px; line-height: 1.55; color: var(--ink); }

/* Die Marke dazwischen: „später am Abend" — sie trägt die ganze
   Aussage der Fläche. */
.spanne {
  align-self: center;
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.spanne::before,
.spanne::after {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--rule);
}

.wieder {
  align-self: center;
  background: none;
  border: 0;
  padding: 8px 15px;
  cursor: pointer;
  font: inherit;
  font-size: 14.5px;
  color: var(--sage-text);
  border-radius: 999px;
}
@media (hover: hover) {
  .wieder:hover { color: var(--ink); background: var(--card-2, #f3f3f1); }
}
.wieder:focus-visible { outline: 2px solid var(--sage-fill); outline-offset: 2px; }

/* ── 2 · Die gemeinsame Auszeit ─────────────────────────────────── */

.geraete { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.geraet {
  position: relative;
  width: 132px;
  height: 236px;
  border-radius: 22px;
  overflow: hidden;
  background: var(--card-2, #f3f3f1);
  box-shadow: inset 0 0 0 1px var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ruhe {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 22px 16px;
  align-items: center;
  justify-content: center;
}
.ruhe i { display: block; height: 7px; border-radius: 4px; background: var(--rule); width: 100%; }
.ruhe i:nth-child(2) { width: 72%; }
.ruhe i:nth-child(3) { width: 86%; }

/* ⚠ DER KRISEN-RAUM KIPPT NICHT MIT DEM THEME. In der App ist er
   in beiden Paletten derselbe; ein heller Krisenbildschirm wäre ein
   anderer Ort. Werte aus `tokens.ts` (focus.krisenGrund).
   --krise-ink ist bewusst NICHT krisenInk (#D2DDD0): das ergibt auf
   krisenGrund 4,07:1 und reicht für 15-px-Text nicht. #F1ECE4 misst
   4,86:1 und besteht AA. */
.schleier {
  position: absolute;
  inset: 0;
  background: #5a6b63;
  clip-path: inset(0 0 0 0);
}
.krisen-inhalt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.atem { display: block; width: 72px; height: 72px; overflow: visible; }
/* 0,8 und 0,44 sind die RUHEWERTE des Bauteils in der App:
   BreathingCircle setzt bei „Bewegung reduzieren" exakt scale 0.8,
   und opacity = 0.15 + scale·0.35 ergibt dort 0,43. */
.atem .puls { transform-origin: 50% 50%; transform: scale(0.8); opacity: 0.44; fill: var(--gold); }
.atem .ring {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  opacity: 0.5;
  stroke-linecap: round;
  stroke-dasharray: 207;
  stroke-dashoffset: 15;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.uhr {
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: #f1ece4;
}

/* ── Die Bewegung selbst — NUR wenn erwünscht ───────────────────── */

@media (prefers-reduced-motion: reduce) {
  /* Ohne Bewegung gibt es nichts zu wiederholen. */
  .wieder { display: none; }
}

@media (prefers-reduced-motion: no-preference) {

  /* — Echo —
     Jeder Schritt hält dank `both` seinen Anfangszustand, solange
     seine Verzögerung läuft. Deshalb genügt EINE Klasse am Container.

     ⚠ DIE ZAHLEN SIND DIE AUSSAGE. Die leere Blase erscheint bei
     2,6 s, ihre WORTE erst bei 3,8 s — 1,2 Sekunden Abstand. Genau
     das ist die Asynchronität: erst ist da jemand, dann kommt, was
     er sagt. Zieht man die Lücke zu, wird daraus ein Chat. */
  .echo.spielt .beitrag,
  .echo.spielt .spanne { animation: auftauchen 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  .echo.spielt .satz { animation: einblenden 0.9s ease-out both; }

  .echo.spielt .b1 { animation-delay: 0s; }
  .echo.spielt .b1 .satz { animation-delay: 0.15s; }
  .echo.spielt .s1 { animation-delay: 1.6s; }
  .echo.spielt .b2 { animation-delay: 2.6s; }
  .echo.spielt .b2 .satz { animation-delay: 3.8s; }
  .echo.spielt .s2 { animation-delay: 5.6s; }
  .echo.spielt .b3 { animation-delay: 6.6s; }
  .echo.spielt .b3 .satz { animation-delay: 7.6s; }

  @keyframes auftauchen {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }

  /* — Auszeit —
     ⚠ 220 ms Versatz zwischen den beiden Schleiern. Das ist die
     ganze Aussage: nicht gleichzeitig (das wirkt wie ein
     Seiteneffekt), nicht weit auseinander (das wirkt wie ein
     Fehler). Zwei Geräte, ein Vorgang. */
  .pause.spielt .geraet--a .schleier { animation: wischen 0.55s ease-in-out 0.7s both; }
  .pause.spielt .geraet--b .schleier { animation: wischen 0.55s ease-in-out 0.92s both; }
  .pause.spielt .krisen-inhalt { animation: einblenden 0.6s ease-out 1.6s both; }
  .pause.spielt .puls {
    animation:
      atmen 8s cubic-bezier(0.42, 0, 0.58, 1) 2.2s 1 both,
      ruhelage 0.8s ease-out 10.2s both;
  }

  @keyframes wischen {
    from { clip-path: inset(0 0 100% 0); }
    to { clip-path: inset(0 0 0 0); }
  }
  /* 4 s ein, 4 s aus — dieselbe Länge wie in der App. */
  @keyframes atmen {
    0% { transform: scale(0.6); opacity: 0.36; }
    50% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(0.6); opacity: 0.36; }
  }
  @keyframes ruhelage { to { transform: scale(0.8); opacity: 0.44; } }
}

@media (max-width: 560px) {
  .beitrag { max-width: 92%; }
  .geraet { width: 118px; height: 210px; }
  .buehne { padding: 24px 18px; }
}