:root{
  color-scheme:dark; /* native Controls (select-Popups auf Windows, dialog, Scrollbars) dunkel */
  --bg:#08080b; --bg-2:#0e0e13; --panel:#14141a; --panel-2:#1b1b22;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.17);
  --ink:#f7f6f8; --ink-2:rgba(247,246,248,.70); --ink-3:rgba(247,246,248,.44);
  --ember:#ff8a73; --ember-deep:#e0563c; --iris:#7b6bff;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1180px; --r:20px; --hd-h:72px;
  --ease:cubic-bezier(.22,.7,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.62;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:rgba(255,138,115,.28)}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px}
/* Die Kopfzeile liegt `fixed` ueber allem, also muss der erste Abschnitt
   selbst Platz fuer sie schaffen. Genau EINMAL, am ersten Kind. */
main>section:first-child,main>article:first-child{padding-top:calc(var(--hd-h) + 34px)}

/* CJK braucht eine hoehere Zeilenbox als Latein (Noto Sans JP ~1.45em gegen
   ~1.21em). Die App macht dasselbe (ds_type.dart `_h`); ohne das werden die
   Zeichen oben und unten beschnitten. */
html[lang="ja"] body,html[lang="zh"] body,html[lang="ko"] body{line-height:1.8}
html[lang="ja"] h1,html[lang="zh"] h1,html[lang="ko"] h1{line-height:1.35;letter-spacing:0}
html[lang="ja"] .sec-h,html[lang="zh"] .sec-h,html[lang="ko"] .sec-h{line-height:1.4;letter-spacing:0}
html[lang="ja"] .card h3,html[lang="zh"] .card h3,html[lang="ko"] .card h3{line-height:1.45;letter-spacing:0}

/* ── Kopfzeile ─────────────────────────────────────────────────
   Eine schwebende, mittige Pille statt einer Leiste ueber die ganze Breite
   (Vincent, 10.09.: "abgerundet, in der Mitte, Richtung liquid glass").

   Was "liquid glass" hier heisst und was NICHT: kein Plastikglanz, sondern
   drei Lagen, wie Apple sie baut — eine starke Unschaerfe mit Saettigung
   (das Glas nimmt die Farbe dessen an, was darunter durchlaeuft), eine
   helle Innenkante oben und eine dunkle unten (die Dicke des Materials),
   und ein weicher Schlagschatten (es SCHWEBT, es klebt nicht).
   `backdrop-filter` kann fehlen; dann greift der @supports-Rueckfall mit
   einem deckenderen Grund, sonst waere die Schrift auf hellen Bildern weg. */
/* Der Hintergrund laeuft UNTER der Kopfzeile normal weiter.
   Zwei Anlaeufe waren noetig, und der erste war der falsche: die Kopfzeile
   durchsichtig zu machen reichte nicht, weil sie als `sticky` weiterhin
   72 px FLUSS einnahm. Der Hero begann also erst darunter, und sein
   Ember-Schein sitzt in `.hero::before` hinter einem `overflow:hidden`.
   Ergebnis war ein exakt kopfzeilenhoher, flacher Streifen ganz oben, mit
   sichtbarer Kante da, wo der Schein anfing.
   `fixed` nimmt die Leiste ganz aus dem Fluss: der Hero beginnt bei y=0,
   sein Schein laeuft bis unter die Pille, und die Leiste schwebt darueber.
   Den Platz fuer die Leiste schafft stattdessen der erste Abschnitt selbst
   (siehe --hd-h weiter unten), damit kein Inhalt darunter verschwindet. */
.hd{position:fixed;top:0;left:0;right:0;z-index:60;padding:14px 16px 0;
  background:transparent;pointer-events:none}
.hd-bar{pointer-events:auto;display:flex;align-items:center;gap:18px;
  width:100%;max-width:960px;margin:0 auto;height:58px;padding:0 10px 0 16px;
  border-radius:999px;
  background:rgba(22,22,29,.55);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.08),
    0 18px 40px -18px rgba(0,0,0,.9);
  transition:background .25s var(--ease),box-shadow .25s var(--ease)}
@supports not (backdrop-filter:blur(2px)){.hd-bar{background:rgba(16,16,21,.95)}}
/* Beim Scrollen wird das Glas etwas dichter, damit Text darunter nie
   durchschlaegt. Die Klasse setzt site.js. */
.hd-bar.solid{background:rgba(20,20,27,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.4),
    0 0 0 1px rgba(255,255,255,.10),0 22px 50px -20px rgba(0,0,0,.95)}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.02em;flex:none}
.brand img{width:28px;height:28px;border-radius:8px}
.nav{display:flex;gap:20px;margin:0 auto;font-size:14.5px;color:var(--ink-2)}
.nav a{position:relative;padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--ember);transition:right .25s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{right:0}
.hd-right{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
.hd .btn{padding:10px 18px;font-size:14.5px}
.sr{position:absolute;left:-9999px}
@media(max-width:900px){.nav{display:none}.hd-bar{max-width:none}}
@media(max-width:560px){.brand span{display:none}.hd-bar{gap:10px;padding-right:8px}}

/* Sprachwahl: ein natives select, damit es auf jedem Geraet funktioniert
   und ohne JavaScript bedienbar bleibt. */
.langmenu{position:relative}
.lm-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 12px;background:rgba(255,255,255,.03);
  border:1px solid var(--line-2);border-radius:100px;color:var(--ink-2);cursor:pointer;font:inherit;
  transition:color .2s,border-color .2s,background .2s}
.lm-btn:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.lm-code{font-size:11px;font-weight:600;letter-spacing:.13em}
.lm-chev{opacity:.55;transition:transform .2s}
.langmenu.open .lm-chev{transform:rotate(180deg)}
.lm-flag{display:inline-flex;width:20px;height:14px;border-radius:3px;overflow:hidden;flex:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.lm-flag svg{width:100%;height:100%;display:block}
.lm-pop{position:absolute;top:calc(100% + 10px);right:0;min-width:196px;max-height:min(62vh,480px);overflow:auto;
  padding:7px;background:var(--panel);border:1px solid var(--line-2);border-radius:16px;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.85),0 4px 14px rgba(0,0,0,.4);z-index:90;
  opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;pointer-events:none;
  transition:opacity .16s,transform .16s}
.langmenu.open .lm-pop{opacity:1;transform:none;pointer-events:auto}
.lm-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--ink);
  font-size:14.5px;font-weight:500;text-decoration:none;transition:background .15s}
.lm-item:hover{background:rgba(255,255,255,.05)}
.lm-name{flex:1;min-width:0}
.lm-check{width:16px;height:16px;color:var(--ember);flex:none;opacity:0}
.lm-item.on .lm-check{opacity:1}
@media(max-width:420px){.lm-code{display:none}.lm-btn{padding:0 10px}}
/* Reddit in der Fusszeile: offizielles Zeichen in Reddit-Orange */
.ft-top .reddit{display:inline-flex;align-items:center;gap:7px}
.ft-top .reddit svg{width:15px;height:15px;color:#FF4500;flex:none}

/* ── "App holen"-Dialog ────────────────────────────────────────
   Der Knopf oben fragt WO, statt stumpf in den Play Store zu springen —
   die Seite laeuft in 14 Sprachen, und iPhone-Leser auf einem Play-Link
   sind eine Sackgasse. `<dialog>` bringt Escape, Fokusfalle und Streulicht
   vom Browser mit. */
.getapp{border:0;padding:0;background:transparent;color:var(--ink);
  max-width:min(440px,92vw);width:100%;overflow:visible}
.getapp::backdrop{background:rgba(4,4,7,.72);backdrop-filter:blur(6px)}
.ga-in{position:relative;background:rgba(22,22,29,.86);
  backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  border-radius:26px;padding:30px 26px 26px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(255,255,255,.09),
    0 40px 90px -30px rgba(0,0,0,.95)}
@supports not (backdrop-filter:blur(2px)){.ga-in{background:#15151b}}
.ga-in h2{font-family:var(--serif);font-weight:400;font-size:29px;line-height:1.15;
  margin:0 0 8px;letter-spacing:-.01em}
.ga-in>p{color:var(--ink-2);margin:0 0 22px;font-size:15.5px}
.ga-x{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--ink-2);
  display:grid;place-items:center;cursor:pointer}
.ga-x svg{width:16px;height:16px}
.ga-x:hover{color:var(--ink);background:rgba(255,255,255,.1)}
.ga-opts{display:grid;gap:10px}
.ga-opts a{display:flex;align-items:center;gap:14px;padding:14px 14px 14px 16px;
  border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.04);
  transition:background .18s var(--ease),border-color .18s var(--ease)}
.ga-opts a:hover{background:rgba(255,255,255,.09);border-color:var(--line-2)}
.ga-opts a>svg:first-child{width:26px;height:26px;flex:none}
.ga-opts span{display:flex;flex-direction:column;line-height:1.25}
.ga-opts b{font-size:16px;font-weight:600;letter-spacing:-.012em}
.ga-opts i{font-style:normal;font-size:13px;color:var(--ink-3)}
.ga-opts .ring-arrow{margin-left:auto;color:var(--ember)}

/* Pfeil im Ring — dieselbe Marke wie die Schritt-Ziffern, und dasselbe,
   was in der App neben antippbaren Zeilen steht. */
.ring-arrow{width:34px;height:34px;flex:none;color:var(--ember);
  transition:transform .2s var(--ease)}
a:hover>.ring-arrow{transform:translateX(3px)}

/* ── Store-Abzeichen ───────────────────────────────────────────
   Zweizeilig mit Marken-Logo, wie auf der alten Seite: die kleine Zeile
   sagt WO, die grosse WAS. Ein einfarbiger Knopf mit "Google Play" darauf
   sieht aus wie ein Eigenbau; ein Abzeichen erkennt man ohne zu lesen. */
.store-btn{display:inline-flex;align-items:center;gap:11px;height:56px;
  padding:0 20px;border:1px solid var(--line-2);border-radius:14px;
  background:rgba(255,255,255,.035);
  transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease)}
.store-btn:hover{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.28);
  transform:translateY(-1px)}
.store-btn svg{width:23px;height:23px;flex:none}
.store-btn .sb-label{display:flex;flex-direction:column;line-height:1.12;text-align:left}
.store-btn .sb-top{font-size:10.5px;letter-spacing:.055em;text-transform:uppercase;color:var(--ink-3)}
.store-btn .sb-main{font-size:16px;font-weight:600;letter-spacing:-.012em}
@media(max-width:520px){.store-btn{flex:1 1 100%;justify-content:center}}

/* Google Preferred Sources. Google rendert den Knopf selbst und uebersetzt
   ihn in die Sprache des Lesers, deshalb steht hier nur der Platz dafuer.
   Wer x-friend.app als bevorzugte Quelle markiert, gewichtet uns in Suche,
   Discover und AI Overviews hoeher. */
.pref{margin-top:16px;min-height:40px}

/* ── Knoepfe ───────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--ember);color:#1a0d09;border:0;border-radius:999px;
  padding:14px 26px;font-weight:600;font-size:16px;letter-spacing:-.01em;
  transition:transform .18s var(--ease),filter .18s var(--ease)}
.btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.btn.ghost:hover{background:rgba(255,255,255,.05);filter:none}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* ── Hero ──────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding:78px 0 66px}
main>section.hero:first-child{padding-top:calc(var(--hd-h) + 58px)}
.hero::before{content:"";position:absolute;inset:-40% -20% auto -20%;height:120%;
  background:
    radial-gradient(46% 38% at 30% 22%,rgba(255,138,115,.20),transparent 70%),
    radial-gradient(40% 34% at 76% 12%,rgba(123,107,255,.15),transparent 72%);
  pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("assets/grain.png");background-size:210px;opacity:.16;mix-blend-mode:overlay}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ember);margin:0 0 18px}
/* Werte 1:1 aus ds_type.dart: display = Serif w400, Zeile 1.08, Laufweite
   -0.015em. Vorher stand hier 1.04/-0.02em, also enger als die App. */
h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,5.4vw,64px);
  line-height:1.08;letter-spacing:-.015em;margin:0 0 20px;text-wrap:balance}
.lead{font-size:19px;color:var(--ink-2);margin:0 0 30px;max-width:34em}
.trust{margin:18px 0 0;font-size:14px;color:var(--ink-3);display:flex;gap:16px;flex-wrap:wrap}
.shot{position:relative;border-radius:26px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85)}
@media(max-width:900px){
  .hero{padding:64px 0 54px}
  .hero .wrap{grid-template-columns:1fr;gap:36px}
  .shot{max-width:420px}
}

/* ── Telefon ───────────────────────────────────────────────────
   1:1 die Werte der alten Seite (pages.css :116-136). Der Rahmen ist CSS,
   kein Bild: er skaliert scharf und wiegt nichts. Was ihn echt macht sind
   die Details, die die Zwischenfassung weggelassen hatte — Metallkante als
   Vier-Punkt-Verlauf (Licht faellt von links oben ein und wieder rechts
   unten heraus), zwei Innenkanten, die Kameralinse in der Notch, der
   Home-Balken und die physischen Seitentasten. */
.device{position:relative;width:330px;flex:none;margin:0 auto;
  border-radius:54px;padding:12px;transform:rotate(2deg);
  background:linear-gradient(155deg,#55545e,#1c1b22 30%,#15141b 72%,#56555f);
  box-shadow:0 60px 110px -30px rgba(0,0,0,.85),
    inset 0 0 0 1.5px rgba(255,255,255,.22),
    inset 0 0 0 4px rgba(0,0,0,.8)}
.device-screen{position:relative;border-radius:42px;overflow:hidden;
  background:#0b0b0f;height:680px;box-shadow:inset 0 0 0 2px #000}
.device-screen video,.device-screen img{width:100%;height:100%;object-fit:cover}
/* Glanzstreifen ueber dem Glas, ueber allem und fuer Klicks durchlaessig. */
.device-screen::after{content:"";position:absolute;inset:0;z-index:40;
  pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,rgba(255,255,255,.05),transparent 30%)}
.device-notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:96px;height:28px;background:#000;border-radius:20px;z-index:30}
.device-notch::after{content:"";position:absolute;right:7px;top:50%;
  transform:translateY(-50%);width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#2a3340,#0a0d12 65%)}
.device-home{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);
  width:118px;height:5px;border-radius:3px;background:rgba(255,255,255,.9);z-index:30}
.device-btn{position:absolute;left:-2.5px;width:3px;border-radius:2px 0 0 2px;
  background:linear-gradient(90deg,#4c4b54,#1b1a21);box-shadow:-1px 1px 2px rgba(0,0,0,.55)}
.device-btn.action{top:112px;height:26px}
.device-btn.vol-up{top:158px;height:46px}
.device-btn.vol-down{top:212px;height:46px}
.device-btn.power{left:auto;right:-2.5px;top:178px;height:74px;border-radius:0 2px 2px 0;
  background:linear-gradient(90deg,#1b1a21,#4c4b54);box-shadow:1px 1px 2px rgba(0,0,0,.55)}
@media(max-width:900px){.device{transform:none}}
@media(max-width:420px){
  /* Unter 400 px passt das 330er-Geraet nicht mehr. Statt Breite und Hoehe
     getrennt zu pflegen, wird das GANZE Geraet skaliert — so bleiben Notch,
     Tasten und Radien im Verhaeltnis. */
  .device{transform:scale(.86);transform-origin:top center;margin-bottom:-95px}
}

/* Store-Bilder je Sprache: sie tragen Rahmen und uebersetzte Ueberschrift
   bereits in sich, deshalb ohne weiteres Beiwerk nebeneinander. */
.screens{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.screens img{border-radius:18px;border:1px solid var(--line);width:100%}
@media(max-width:760px){
  .screens{grid-auto-flow:column;grid-template-columns:none;
    grid-auto-columns:74%;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:8px;scrollbar-width:none}
  .screens::-webkit-scrollbar{display:none}
  .screens img{scroll-snap-align:center}
}

/* ── 18+-Band ──────────────────────────────────────────────────
   Vorher: zwei Bilder in einem 620-px-Kasten am linken Rand, rechts eine
   halbe Seite Leere. Jetzt ein eigenes Band mit Ember-Schein, Text links,
   drei gestaffelte Bilder rechts. Die Staffelung ist kein Schmuck: sie
   bricht die Reihe auf, damit drei Hochformate nebeneinander nicht wie ein
   Kontaktabzug wirken.

   Bewusst andeutend statt explizit — die Seite wird von Google indexiert
   und ist aus dem Play-Eintrag verlinkt. */
.spicy-band{position:relative;overflow:hidden;padding:78px 0;
  background:linear-gradient(180deg,var(--bg),#0c0a0e 45%,var(--bg));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.spicy-band::before{content:"";position:absolute;inset:auto -10% -50% 30%;height:130%;
  background:radial-gradient(46% 44% at 60% 60%,rgba(255,138,115,.16),transparent 70%);
  pointer-events:none}
.spicy-band .wrap{position:relative;display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:56px;align-items:center}
.sb-text .sec-p{margin-bottom:24px}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ticks li{position:relative;padding-left:28px;color:var(--ink-2);font-size:15.5px}
.ticks li::before{content:"";position:absolute;left:0;top:.52em;width:15px;height:9px;
  border-left:1.6px solid var(--ember);border-bottom:1.6px solid var(--ember);
  transform:rotate(-45deg) translateY(-2px)}

.spicy{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
.spicy figure{margin:0;position:relative;border-radius:18px;overflow:hidden;
  border:1px solid var(--line-2);
  box-shadow:0 30px 60px -26px rgba(0,0,0,.9)}
/* Die mittlere sitzt tiefer, die aeusseren hoeher — eine Welle statt einer
   Kante. */
.spicy figure:nth-child(2){transform:translateY(30px)}
.spicy img{width:100%;aspect-ratio:9/16;object-fit:cover}
.spicy figure::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 52%,rgba(8,8,11,.85))}
.spicy figcaption{position:absolute;left:13px;right:13px;bottom:11px;z-index:2;
  font-size:13.5px;color:var(--ink-2);text-shadow:0 1px 10px rgba(0,0,0,.8)}
.age{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);
  border-radius:999px;padding:5px 12px;font-size:12.5px;color:var(--ink-3);margin-bottom:16px}
@media(max-width:980px){
  .spicy-band .wrap{grid-template-columns:1fr;gap:38px}
  .spicy figure:nth-child(2){transform:none}
}
@media(max-width:520px){
  .spicy{grid-template-columns:1fr 1fr}
  .spicy figure:nth-child(3){display:none}
}

/* ── Abschnitte ────────────────────────────────────────────── */
section{padding:64px 0}
/* displaySm: Serif w400, Zeile 1.15, Laufweite -0.01em. */
.sec-h{font-family:var(--serif);font-weight:400;font-size:clamp(27px,3.4vw,38px);
  line-height:1.15;letter-spacing:-.01em;margin:0 0 12px;text-wrap:balance}
.sec-p{color:var(--ink-2);margin:0 0 38px;max-width:44em}
.rule{height:1px;background:var(--line);border:0;margin:0}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:860px){.grid3,.grid2{grid-template-columns:1fr}}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px}

/* Die drei Schritte. Vorher waren es Kaesten mit einer 30px-Serifenziffer
   obendrauf, was nach Vorlage aussah. Jetzt: Haarlinie oben, die Ziffer als
   kleine Marke daneben, kein Kasten. Ruhiger und teurer. */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.step{border-top:1px solid var(--line-2);padding-top:20px}
.step-n{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:999px;border:1px solid var(--ember);
  color:var(--ember);font-size:13px;font-weight:600;margin-bottom:14px}
.step h3{font-size:19px;font-weight:600;line-height:1.25;letter-spacing:-.012em;margin:0 0 8px}
.step p{color:var(--ink-2);margin:0;font-size:15.5px}
@media(max-width:860px){.steps{grid-template-columns:1fr;gap:26px}}

/* Weiterlesen. Vorher Kaesten mit abgeschnittenem Fliesstext und "…", was
   billig wirkte. Jetzt Zeilen mit Haarlinie und — Vincents Vorgabe vom
   10.09. — dem Pfeil im Ember-Ring rechts, so wie ihn die App neben jeder
   antippbaren Zeile setzt. Das Schluesselwort rutscht dafuer nach innen. */
.more{display:grid;gap:0}
.more a{display:flex;align-items:center;gap:18px;padding:19px 4px;
  border-bottom:1px solid var(--line);transition:padding-left .2s var(--ease)}
.more a:first-child{border-top:1px solid var(--line)}
.more a:hover{padding-left:12px}
.more .m-t{font-family:var(--serif);font-weight:400;font-size:clamp(19px,2.1vw,24px);
  line-height:1.2;letter-spacing:-.01em}
.more .m-k{margin-left:auto;font-size:13px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);flex:none}
.more a:hover .m-k{color:var(--ember)}
.more .ring-arrow{margin-left:0}
@media(max-width:620px){.more .m-k{display:none}.more .ring-arrow{margin-left:auto}}
/* title: Sans w600, Zeile 1.25, Laufweite -0.012em. */
.card h3{font-size:18px;font-weight:600;line-height:1.25;margin:0 0 9px;letter-spacing:-.012em}
.card p{color:var(--ink-2);margin:0;font-size:15.5px}
.num{font-family:var(--serif);font-size:30px;color:var(--ember);line-height:1;margin:0 0 14px}

/* Wechselnde Bild-Text-Bloecke */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:20px 0}
.split:nth-child(even) .split-media{order:2}
/* Feste Bildhoehe: ohne sie richtet sich der Block nach der Bildbreite und
   die kurze Textspalte laesst 200 px Totraum stehen. Mit object-fit bleibt
   der Bildausschnitt sauber, egal welches Seitenverhaeltnis die Quelle hat. */
.split-media img{border-radius:var(--r);border:1px solid var(--line);
  width:100%;height:340px;object-fit:cover}
.split h3{font-family:var(--serif);font-weight:400;font-size:clamp(23px,2.6vw,31px);
  line-height:1.14;margin:0 0 12px}
.split p{color:var(--ink-2);margin:0}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:24px}.split:nth-child(even) .split-media{order:0}}

/* ── "Bau dir deinen eigenen" ──────────────────────────────────
   Loest den reinen Figuren-Streifen ab (Vincent, 10.09.). Der Streifen
   zeigte nur, WEN es gibt; die Sektion soll zeigen, dass man selbst einen
   macht — und dass man dabei die Wahl hat, ihn zu veroeffentlichen oder
   fuer sich zu behalten.

   Links die Anleitung in drei Schritten plus die beiden Sichtbarkeiten,
   rechts zwei getrennt beschriftete Reihen: was andere veroeffentlicht
   haben, und unsere eigenen Vorlagen. Die Trennung IST die Aussage, also
   traegt jede Reihe eine Bezeichnung. */
.make{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:52px;align-items:start}
.mk-steps{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:20px}
.mk-steps li{display:flex;gap:14px}
.mk-steps div{display:flex;flex-direction:column;gap:3px}
.mk-steps b{font-size:16.5px;font-weight:600;letter-spacing:-.012em}
.mk-steps span:not(.mk-n){color:var(--ink-2);font-size:15px;line-height:1.55}
.mk-n{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:26px;height:26px;margin-top:2px;border-radius:999px;
  border:1px solid var(--ember);color:var(--ember);font-size:13px;font-weight:600}
/* Die beiden Sichtbarkeiten in einem eigenen Kasten: sie sind eine
   Entscheidung, die man trifft, kein weiterer Schritt in der Reihenfolge. */
.mk-vis{border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;
  background:rgba(255,255,255,.025)}
.mk-vis-h{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;
  letter-spacing:-.012em;margin-bottom:5px}
.mk-vis-h+p{margin:0 0 18px;color:var(--ink-2);font-size:14.5px;line-height:1.55}
.mk-vis p:last-child{margin-bottom:0}
.dot{width:8px;height:8px;border-radius:999px;flex:none}
.dot-pub{background:var(--ember);box-shadow:0 0 0 4px rgba(255,138,115,.16)}
.dot-priv{background:var(--iris);box-shadow:0 0 0 4px rgba(123,107,255,.16)}
.mk-lab{font-size:12.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 12px;display:flex;flex-wrap:wrap;gap:4px 10px;
  align-items:baseline}
/* Was die Zahl in den Kacheln bedeutet, einmal statt sechsmal. */
.mk-lab em{font-style:normal;font-weight:400;font-size:12px;letter-spacing:0;
  text-transform:none;color:var(--ink-3);opacity:.75}
.mk-gal .cast+.mk-lab{margin-top:26px}

/* Die Portraets sind echte Selfies an sehr verschiedenen Orten (Loft, Café,
   Auto, Gym, Nacht, Kueche). Nebeneinander wirkten die Hintergruende unruhig
   und wie zusammengewuerfelt. Ein Verlauf nach unten bindet sie zu EINER
   Reihe, ohne die Bilder zu beschneiden. Der Name unten macht aus dem Bild
   eine Person. */
.cast{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.cast figure{margin:0;position:relative;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);background:var(--panel)}
.cast img{aspect-ratio:3/4;object-fit:cover;width:100%;
  filter:saturate(.92) contrast(1.03)}
.cast figure::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,11,.10) 0%,transparent 34%,rgba(8,8,11,.78) 100%)}
.cast figcaption{position:absolute;left:9px;right:9px;bottom:7px;z-index:2;
  font-size:12.5px;font-weight:500;letter-spacing:-.01em;
  display:flex;align-items:baseline;gap:7px;
  text-shadow:0 1px 10px rgba(0,0,0,.7)}
/* Wie oft jemand diesen Charakter uebernommen hat. Echte Zahl aus der
   Datenbank, deshalb steht sie da: sie ist der einzige Sozialbeweis auf
   dieser Seite, den wir nicht selbst geschrieben haben. */
.cast .cl{margin-left:auto;font-size:11.5px;font-weight:600;letter-spacing:.01em;
  color:var(--ember);opacity:.95;flex:none;font-variant-numeric:tabular-nums}
/* Unsere Vorlagen sind freigestellte PNGs ohne Hintergrund. Auf dem dunklen
   Grund schwebten die Koepfe im Nichts; ein eigener Sockel gibt ihnen einen
   Boden und haelt beide Reihen optisch auf derselben Hoehe. */
.cast.presets figure{background:linear-gradient(180deg,#1c1b24,#121118)}
.cast.presets img{object-fit:contain;filter:none}
@media(max-width:1080px){.make{grid-template-columns:1fr;gap:36px}}
@media(max-width:760px){.cast{grid-template-columns:repeat(3,1fr)}}
@media(max-width:420px){.cast{grid-template-columns:repeat(2,1fr)}}

/* Szenen */
.scenes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.scene{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.scene img{aspect-ratio:4/3;object-fit:cover}
.scene span{position:absolute;left:14px;bottom:12px;font-size:14.5px;font-weight:500;
  text-shadow:0 2px 14px rgba(0,0,0,.8)}
@media(max-width:860px){.scenes{grid-template-columns:1fr 1fr}}

/* FAQ, reines HTML ohne JavaScript */
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq summary{cursor:pointer;list-style:none;font-size:17.5px;font-weight:500;
  display:flex;justify-content:space-between;gap:18px;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ember);font-size:22px;line-height:1;flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq p{color:var(--ink-2);margin:12px 0 0;max-width:48em}

/* Aufruf-Band */
.band{background:linear-gradient(180deg,var(--bg-2),var(--bg));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
.band .sec-h{margin-bottom:8px}
.band .btns{justify-content:center;margin-top:26px}

/* Weiterlesen */
.links{display:flex;flex-wrap:wrap;gap:10px}
.links a{border:1px solid var(--line);border-radius:999px;padding:9px 15px;
  font-size:14.5px;color:var(--ink-2)}
.links a:hover{color:var(--ink);border-color:var(--line-2)}

/* Artikel */
.prose{max-width:44em}
.prose h2{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.5vw,29px);
  line-height:1.15;margin:44px 0 12px}
.prose p{color:var(--ink-2);margin:0 0 18px}
.meta{color:var(--ink-3);font-size:14px;margin:0 0 32px}

/* ── Fusszeile ─────────────────────────────────────────────── */
.ft{border-top:1px solid var(--line);padding:52px 0 64px;color:var(--ink-3);font-size:14.5px}
.ft-top{display:flex;flex-wrap:wrap;gap:26px;align-items:center;margin-bottom:28px}
.ft a:hover{color:var(--ink)}
.ft-langs{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0 0 26px;padding:0;list-style:none}
.ft-langs a{color:var(--ink-3)}
.ft-note{max-width:46em;margin:0}

/* ── Artikel ───────────────────────────────────────────────────
   Eine Lesespalte, keine Landeseite. Deshalb hier andere Regeln als
   ueberall sonst: Fliesstext geht auf ~62 Zeichen Zeilenlaenge, die
   Ueberschriften stehen naeher am Text als am Weissraum darueber, und
   Tabellen duerfen auf dem Handy seitlich scrollen statt zu brechen.

   Die Struktur ist zugleich die Bruchkante, an der ein Sprachmodell den
   Text zerlegt: <h2> als Frage, direkt darunter der Absatz mit der
   Antwort. Deshalb ist der erste Absatz nach jeder <h2> hervorgehoben,
   und die `speakable`-Auszeichnung zeigt genau auf diese Auswahl. */
.art article{padding:56px 0 24px}
main.art>article:first-child{padding-top:calc(var(--hd-h) + 44px)}
.art .wrap{max-width:760px}
.art h1{font-size:clamp(32px,4.4vw,52px);margin-bottom:14px}
.art .eyebrow{margin-bottom:14px}
.art .eyebrow a{color:var(--ember);border-bottom:1px solid rgba(255,138,115,.35)}
.art-meta{color:var(--ink-3);font-size:14px;margin:0 0 26px}
.art-lede{font-size:20px;line-height:1.6;color:var(--ink);margin:0 0 34px;
  padding-left:18px;border-left:2px solid var(--ember)}
.art h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.9vw,33px);
  line-height:1.16;letter-spacing:-.01em;margin:48px 0 14px;text-wrap:balance}
.art h2+p{color:var(--ink);font-size:18px}
.art p{color:var(--ink-2);margin:0 0 17px;max-width:62ch}
.art ul{margin:0 0 20px;padding:0;list-style:none;max-width:62ch}
.art ul li{position:relative;padding-left:22px;margin-bottom:9px;color:var(--ink-2)}
.art ul li::before{content:"";position:absolute;left:2px;top:.72em;width:5px;height:5px;
  border-radius:999px;background:var(--ember)}
.art .faq{margin-top:6px}
.art .src{margin-top:6px;font-size:14px}
.art .src li{color:var(--ink-3)}

/* Der Kennzahlen-Streifen. Er steht so weit oben, weil genau diese Zeilen
   aus einem Artikel zitiert werden: kurz, mit Zahl, ohne Kontext lesbar. */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin:0 0 40px;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--line)}
.facts div{background:var(--panel);padding:18px 18px 16px;display:flex;
  flex-direction:column;gap:5px}
.facts b{font-family:var(--serif);font-weight:400;font-size:27px;line-height:1;
  color:var(--ember)}
.facts span{font-size:13.5px;line-height:1.4;color:var(--ink-3)}
@media(max-width:620px){.facts{grid-template-columns:1fr}}

/* Tabellen. Sie tragen den Vergleich, den ein Modell als Struktur uebernimmt,
   also duerfen sie nicht umbrechen, sondern scrollen. */
/* Tabellen duerfen aus der Lesespalte heraustreten: eine Sechs-Spalten-
   Vergleichstabelle in 62 Zeichen Breite zu quetschen macht sie unlesbar,
   und genau diese Tabelle ist der Teil, den ein Modell als Struktur
   uebernimmt. Ausserhalb des Lesebereichs, aber innerhalb des Rasters. */
.tw{overflow-x:auto;margin:0 0 24px;border:1px solid var(--line);
  border-radius:var(--r);-webkit-overflow-scrolling:touch;
  width:min(calc(100vw - 44px),960px);
  margin-left:calc((min(100%,760px) - min(calc(100vw - 44px),960px)) / 2)}
@media(max-width:1010px){.tw{width:100%;margin-left:0}}
.art table{border-collapse:collapse;width:100%;min-width:600px;font-size:14.5px}
.art th,.art td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.art th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;background:rgba(255,255,255,.03);
  white-space:nowrap}
.art td{color:var(--ink-2)}
.art tbody tr:last-child td{border-bottom:0}
.art td:first-child{color:var(--ink);font-weight:500;white-space:nowrap}

/* Uebersicht */
.acards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px}
.acard{display:flex;flex-direction:column;gap:9px;padding:24px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  transition:border-color .18s var(--ease),transform .18s var(--ease)}
.acard:hover{border-color:var(--line-2);transform:translateY(-2px)}
.acard .ak{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ember)}
.acard .ah{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.18;
  letter-spacing:-.01em}
.acard .ad{color:var(--ink-2);font-size:14.5px;line-height:1.55}
.acard .am{margin-top:auto;padding-top:8px;font-size:12.5px;color:var(--ink-3)}
@media(max-width:760px){.acards{grid-template-columns:1fr}}

/* ── Charakterseiten ───────────────────────────────────────────
   Zwanzig Landeseiten, je eine Suchabsicht. Der Aufbau folgt dem, was ein
   Leser in dieser Reihenfolge wissen will: wer ist das (Bild + Name), was
   kann sie mir geben (Ueberschrift = die Suchabsicht), wie redet sie, und
   dann der Beweis in Form eines Gespraechs.

   Das Gespraech ist bewusst KEIN Screenshot: als Text bleibt es lesbar,
   uebersetzbar und zitierbar. Ein Bild waere haerter zu bauen und fuer eine
   Suchmaschine wertlos. */
.chr-top{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:52px;align-items:start}
.chr-top figure{margin:0;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line-2);position:relative;
  box-shadow:0 50px 100px -40px rgba(0,0,0,.95)}
.chr-top figure::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 60%,rgba(8,8,11,.45))}
.chr-top img{width:100%;aspect-ratio:3/4;object-fit:cover}
.chr h1{font-size:clamp(30px,4.1vw,50px);margin-bottom:12px}
.chr-meta{color:var(--ember);font-size:14.5px;letter-spacing:.01em;margin:0 0 18px}
.chr-blurb p{color:var(--ink-2);margin:0 0 16px;max-width:46ch}
.chr-blurb p:first-child{color:var(--ink);font-size:18px}
.chr-note{color:var(--ink-3);font-size:13px;margin:14px 0 0;max-width:40ch}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 22px;padding:0;list-style:none}
.chips li{border:1px solid var(--line);border-radius:999px;padding:5px 12px;
  font-size:13px;color:var(--ink-3)}
.chr-wrap{max-width:820px}
@media(max-width:900px){.chr-top{grid-template-columns:1fr;gap:30px}
  .chr-top figure{max-width:340px}}

/* Das Beispielgespraech. Zwei Sprecher, zwei Seiten, wie im Chat der App:
   das Wiedererkennen macht die Seite glaubwuerdiger als jede Beschreibung. */
.talk{display:flex;flex-direction:column;gap:10px;margin-top:22px;max-width:640px}
.talk .t{display:flex;flex-direction:column;gap:3px;max-width:80%}
.talk .t span{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);padding:0 4px}
.talk .t p{margin:0;padding:12px 16px;border-radius:18px;font-size:15.5px;
  line-height:1.5}
.talk .t-sie{align-self:flex-start}
.talk .t-sie p{background:var(--panel);border:1px solid var(--line);
  border-bottom-left-radius:6px;color:var(--ink)}
.talk .t-du{align-self:flex-end;align-items:flex-end}
.talk .t-du p{background:var(--ember);color:#1a0d09;border-bottom-right-radius:6px}
/* Zwei Nachrichten desselben Sprechers hintereinander ruecken zusammen,
   wie im echten Chat. */
.talk .t+.t{margin-top:-4px}
.talk .t-sie+.t-sie span,.talk .t-du+.t-du span{display:none}

/* Weitere Charaktere, als Streifen */
.chr-row{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:26px}
.chr-row a{position:relative;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);display:block;
  transition:border-color .18s var(--ease),transform .18s var(--ease)}
.chr-row a:hover{border-color:var(--line-2);transform:translateY(-2px)}
.chr-row img{aspect-ratio:3/4;object-fit:cover;width:100%}
/* Nur der Name auf den VERLINKTEN Kacheln. Ohne das `a >` traf die Regel
   auch die Klon-Zahl in der Community-Reihe, riss sie aus dem Textfluss und
   legte sie absolut positioniert ueber die Bildunterschrift. */
.chr-row a>span{position:absolute;left:10px;bottom:8px;z-index:2;font-size:13px;
  font-weight:500;text-shadow:0 1px 10px rgba(0,0,0,.8)}
.chr-row a::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(8,8,11,.8))}
@media(max-width:900px){.chr-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.chr-row{grid-template-columns:repeat(2,1fr)}}

/* Die Community-Reihe. Gleiche Kachelform wie „weitere Charaktere", aber
   nicht anklickbar: diese Figuren haben keine eigene Seite (community.py).
   Deshalb <figure> statt <a>, ohne Hover-Anhebung, die etwas verspräche. */
.chr-row.comm{grid-template-columns:repeat(6,1fr);margin-top:22px}
.chr-row.comm figure{margin:0;position:relative;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);background:var(--panel)}
.chr-row.comm img{aspect-ratio:3/4;object-fit:cover;width:100%}
.chr-row.comm figure::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,11,.10) 0%,transparent 34%,rgba(8,8,11,.8) 100%)}
.chr-row.comm figcaption{position:absolute;left:9px;right:9px;bottom:7px;z-index:2;
  display:flex;align-items:baseline;gap:6px;font-size:13px;font-weight:500;
  letter-spacing:-.01em;text-shadow:0 1px 10px rgba(0,0,0,.75)}
.chr-row.comm figcaption i{font-style:normal;font-size:11px;font-weight:400;color:var(--ink-3)}
.chr-row.comm figcaption .cl{margin-left:auto;font-size:11.5px;font-weight:600;
  color:var(--ember);font-variant-numeric:tabular-nums}
@media(max-width:900px){.chr-row.comm{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.chr-row.comm{grid-template-columns:repeat(2,1fr)}}

/* Uebersicht */
.ccards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px}
.ccard{display:flex;flex-direction:column;gap:0;border-radius:var(--r);
  overflow:hidden;border:1px solid var(--line);background:var(--panel);
  transition:border-color .18s var(--ease),transform .18s var(--ease)}
.ccard:hover{border-color:var(--line-2);transform:translateY(-3px)}
.ccard img{aspect-ratio:3/4;object-fit:cover;width:100%}
.ccard .cn{display:flex;align-items:baseline;gap:7px;padding:14px 16px 3px;
  font-size:17px;font-weight:600;letter-spacing:-.012em}
.ccard .cn i{font-style:normal;font-size:13px;font-weight:400;color:var(--ink-3)}
.ccard .cg{padding:0 16px 16px;color:var(--ink-2);font-size:14px;line-height:1.45}
@media(max-width:900px){.ccards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.ccards{grid-template-columns:1fr}}

/* Aufblenden beim Scrollen */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .btn:hover{transform:none}
}