/* =========================================================================
   Liwede Webdesign · v4 · Die Welten der Startseite
   Sieben Welten laufen beim Scrollen weich ineinander:
   Papier · Riviera · Juwelier · Club · Skizze · Pixel · Tiefblau.

   Regeln: Der Rahmen bleibt fest (Wortmarke, Kopf, Knopfform im Kopf), die
   Räume dazwischen wechseln. Vor jeder neuen Welt steht ein Kapitel-Übergang,
   der den Wechsel erklärt. Die Schrift eines Abschnitts steht fest, damit beim
   Lesen nichts springt: es wechseln Farben, Flächen, Radien, Hintergrundebene
   und Schmuck. Flächen, die ein Bild tragen (Samt, Kirschholz), haben feste
   Schriftfarben und folgen den Token nicht, sonst steht beim Wechsel Text ohne
   Kontrast auf dem Bild.

    1 Tokens registrieren   2 Werte der Welten   3 Übergang     4 Ebenen
    5 Gemeinsame Bauteile   6 Kapitel-Übergang   7 Riviera      8 Juwelier
    9 Club                 10 Skizze            11 Pixel       12 Tiefblau
   13 Handy und Tablet     14 Ruhe
   ========================================================================= */

/* ---------- 1 Tokens registrieren: nur so lassen sie sich überblenden ---------- */
@property --canvas{syntax:'<color>';inherits:true;initial-value:#F2F1ED}
@property --canvas-sunk{syntax:'<color>';inherits:true;initial-value:#E9E7E1}
@property --panel{syntax:'<color>';inherits:true;initial-value:#FAF9F6}
@property --ink{syntax:'<color>';inherits:true;initial-value:#0F0F0E}
@property --ink-2{syntax:'<color>';inherits:true;initial-value:#46443F}
@property --ink-3{syntax:'<color>';inherits:true;initial-value:#5F5C55}
@property --line{syntax:'<color>';inherits:true;initial-value:#D8D5CD}
@property --line-strong{syntax:'<color>';inherits:true;initial-value:#8C887F}
@property --deep{syntax:'<color>';inherits:true;initial-value:#0F0F0E}
@property --deep-2{syntax:'<color>';inherits:true;initial-value:#1A1A18}
@property --on-deep{syntax:'<color>';inherits:true;initial-value:#F2F1ED}
@property --on-deep-2{syntax:'<color>';inherits:true;initial-value:#A8A49B}
@property --accent{syntax:'<color>';inherits:true;initial-value:#F0461C}
@property --accent-ink{syntax:'<color>';inherits:true;initial-value:#B5310D}
@property --accent-on-deep{syntax:'<color>';inherits:true;initial-value:#FF6A3D}
@property --fokus{syntax:'<color>';inherits:true;initial-value:#F0461C}
@property --fokus-deep{syntax:'<color>';inherits:true;initial-value:#F0461C}
@property --fehler-deep{syntax:'<color>';inherits:true;initial-value:#FF6A3D}
@property --stage{syntax:'<color>';inherits:true;initial-value:#E3DFD6}
@property --stage-line{syntax:'<color>';inherits:true;initial-value:#D6D1C6}
@property --glow{syntax:'<color>';inherits:true;initial-value:rgba(240,70,28,0)}
@property --rahmen{syntax:'<color>';inherits:true;initial-value:rgba(184,146,87,0)}
@property --flaeche{syntax:'<color>';inherits:true;initial-value:#F2F1ED}
@property --flaeche-text{syntax:'<color>';inherits:true;initial-value:#0F0F0E}
@property --flaeche-hover{syntax:'<color>';inherits:true;initial-value:#FFFFFF}
@property --buehne-deep{syntax:'<color>';inherits:true;initial-value:#0F0F0E}
/* Schaltender Zwilling: gleiche Werte wie --canvas, springt mit der Schrift. */
@property --canvas-2{syntax:'<color>';inherits:true;initial-value:#F2F1ED}
@property --r-stage{syntax:'<length>';inherits:true;initial-value:40px}
@property --r-card{syntax:'<length>';inherits:true;initial-value:20px}
@property --r-field{syntax:'<length>';inherits:true;initial-value:12px}
@property --r-btn{syntax:'<length>';inherits:true;initial-value:26px}

/* ---------- 2 Werte der Welten ---------- */
/* Briefing v5 §5.1: Papier. Atelier im Tageslicht. */
html[data-aktiv]{
  --canvas:#F3F1EC;--canvas-sunk:#EAE7DF;--panel:#FBFAF7;
  --ink:#121211;--ink-2:#55524C;--ink-3:#55524C;--line:#D9D5CC;--line-strong:#8C887F;
  --deep:#121211;--deep-2:#1D1D1A;--on-deep:#F3F1EC;--on-deep-2:#A8A49B;
  --accent:#E8401C;--accent-ink:#B3300F;--accent-on-deep:#FF6A3D;
  --fokus:#E8401C;--fokus-deep:#E8401C;--fehler-deep:#FF6A3D;
  --stage:#EAE7DF;--stage-line:#D9D5CC;--glow:rgba(232,64,28,0);--rahmen:rgba(184,146,87,0);
  --flaeche:#F3F1EC;--flaeche-text:#121211;--flaeche-hover:#FFFFFF;--buehne-deep:#121211;--canvas-2:#F3F1EC;
  --schatten:44 38 29;
  --r-stage:40px;--r-card:20px;--r-field:12px;--r-btn:26px;
}
/* Briefing v5 §5.2: Kalkstein #EFE6D8 als Grund, Leinen #F8F3EA als Fläche, Espresso #2B2119 als
   Schrift, Terrakotta #B4532A als Akzent (als Text #8A3A1A), Olive #5E6B3F für Linien und Zeichen,
   Meerblau #1E4A66 für Kleinteile. Die Vergleichsbühne ist in dieser Welt kein dunkler Kasten mehr,
   sondern ein Passepartout aus Leinen: deshalb tragen --deep und --on-deep hier helle Werte.
   Der Schatten ist warm getönt (§4: nie Schwarz), die Radien sind die eines Briefbogens. */
html[data-aktiv="riviera"]{
  --canvas:#EFE6D8;--canvas-sunk:#E4D8C5;--panel:#F8F3EA;
  --ink:#2B2119;--ink-2:#4A3A2B;--ink-3:#5C4A38;--line:#DCCDB6;--line-strong:#8A7154;
  --deep:#F8F3EA;--deep-2:#F1E8DA;--on-deep:#2B2119;--on-deep-2:#5C4A38;
  --accent:#B4532A;--accent-ink:#8A3A1A;--accent-on-deep:#8A3A1A;
  --fokus:#8A3A1A;--fokus-deep:#8A3A1A;--fehler-deep:#9B2C16;
  --stage:#E4D8C5;--stage-line:#D2C1A6;--glow:rgba(255,214,160,.22);
  --flaeche:#F8F3EA;--flaeche-text:#2B2119;--flaeche-hover:#FFFFFF;--buehne-deep:#F8F3EA;--canvas-2:#EFE6D8;
  --schatten:74 48 20;
  --r-stage:4px;--r-card:4px;--r-field:4px;--r-btn:26px;
}
/* Briefing v5 §5.3: Juwelier ist eine Weißgold-Boutique im Tageslicht. Carrara als Grund,
   Perlgrau als Fläche, Tinte als Text, Champagner nur als Haarlinie (als Text die dunklere
   Bronze #7D6330), Smaragdsamt für die eine dunkle Vitrine, Elfenbein darauf.
   Radien 2px: in dieser Welt ist jede Kante geschliffen. */
html[data-aktiv="juwelier"]{
  --canvas:#F5F3F0;--canvas-sunk:#E7E3DD;--panel:#FBFAF8;
  --ink:#1D1A17;--ink-2:#45403A;--ink-3:#5E564D;--line:#DDD6C8;--line-strong:#8A7F70;
  --deep:#133A2E;--deep-2:#1A4436;--on-deep:#F4EDE0;--on-deep-2:#CFC3AC;
  --accent:#B99B5F;--accent-ink:#7D6330;--accent-on-deep:#E2C36A;
  --fokus:#7D6330;--fokus-deep:#E2C36A;--fehler-deep:#FF8A66;
  --stage:#E7E3DD;--stage-line:#D5CEC2;--glow:rgba(185,155,95,.14);--rahmen:rgba(185,155,95,.55);
  --flaeche:#FBFAF8;--flaeche-text:#1D1A17;--flaeche-hover:#FFFFFF;--buehne-deep:#133A2E;--canvas-2:#EFECE7;
  --schatten:60 45 20;
  --r-stage:2px;--r-card:2px;--r-field:2px;--r-btn:2px;
}
/* Club: Barbier und Herrenclub. Schwarz, Creme, ein kräftiges Rot; Gold nur als Haarlinie. */
html[data-aktiv="club"]{
  --canvas:#0D0C0B;--canvas-sunk:#171512;--panel:#1D1A16;
  --ink:#EDE3CF;--ink-2:#CBBFA6;--ink-3:#A29679;--line:#2D2924;--line-strong:#7B7160;
  --deep:#EDE3CF;--deep-2:#E3D8C2;--on-deep:#141210;--on-deep-2:#4A4238;
  --accent:#B3262E;--accent-ink:#E4C55C;--accent-on-deep:#9E1F27;
  --fokus:#E4C55C;--fokus-deep:#9E1F27;--fehler-deep:#9E1F27;
  --stage:#171512;--stage-line:#3A342C;--glow:rgba(179,38,46,.14);--rahmen:rgba(176,141,60,.55);
  --flaeche:#EDE3CF;--flaeche-text:#0D0C0B;--flaeche-hover:#FFFFFF;--buehne-deep:#171512;--canvas-2:#0D0C0B;
  --r-stage:2px;--r-card:2px;--r-field:2px;--r-btn:2px;
}
/* Skizze: Bleistift auf Papier. Graphit, Schraffur, Handschrift, ein Rotstift für Fehler. */
html[data-aktiv="skizze"]{
  --canvas:#FAFAF7;--canvas-sunk:#F1F0EA;--panel:#FFFFFF;
  --ink:#2E2E2E;--ink-2:#6A6A66;--ink-3:#6A6A66;--line:#CDCDC7;--line-strong:#7A7A76;
  --deep:#FFFFFF;--deep-2:#FFFFFF;--on-deep:#2E2E2E;--on-deep-2:#6A6A66;
  --accent:#B8322A;--accent-ink:#B8322A;--accent-on-deep:#B8322A;
  --fokus:#2E2E2E;--fokus-deep:#2E2E2E;--fehler-deep:#B8322A;
  --stage:#FFFFFF;--stage-line:#2E2E2E;--glow:rgba(0,0,0,0);--rahmen:rgba(46,46,46,.9);
  --flaeche:#FFFFFF;--flaeche-text:#2E2E2E;--flaeche-hover:#EDEDEA;--buehne-deep:#FFFFFF;--canvas-2:#FAFAF7;
  --r-stage:2px;--r-card:2px;--r-field:2px;--r-btn:2px;
  /* Blaustift trägt nur Konstruktionslinien, Rotstift nur Randnotizen und Pfeile. */
  --blaustift:#7FB8D6;--rotstift:#B8322A;
  /* Grundfarbe als Zahlen für den Verlauf unter dem Schwellenbild, Schattenfarbe in Graphit. */
  --grund-rgb:250 250 247;--schatten:46 46 46;
}
/* Automotive: eine dunkle Halle, ein Wagen, blaue Lichtkanten. Schwarz #050607 als Grund,
   Graphit #151A1E als Fläche, Eisblau als Schrift auf Dunkel, Electric Blue #1687E8 als
   einziger Akzent. Blau bezeichnet, es füllt nie eine Fläche. */
html[data-aktiv="auto"]{
  --canvas:#050607;--canvas-sunk:#0B0E10;--panel:#151A1E;
  --ink:#EAF4FF;--ink-2:#9FB3C4;--ink-3:#8496A5;--line:#1B2329;--line-strong:#4A5C6B;
  --deep:#0B0E10;--deep-2:#151A1E;--on-deep:#EAF4FF;--on-deep-2:#9FB3C4;
  --accent:#1687E8;--accent-ink:#B9E5FF;--accent-on-deep:#8CD0FF;
  --fokus:#1687E8;--fokus-deep:#8CD0FF;--fehler-deep:#FF8A66;
  --stage:#0B0E10;--stage-line:#1F2A33;--glow:rgba(22,135,232,.18);--rahmen:rgba(185,229,255,.28);
  --flaeche:#B9E5FF;--flaeche-text:#050607;--flaeche-hover:#EAF4FF;--buehne-deep:#0B0E10;--canvas-2:#050607;
  /* Technische Welt: fast rechte Winkel, nichts Rundes. */
  --r-stage:2px;--r-card:2px;--r-field:2px;--r-btn:2px;
  --schatten:1 3 6;
}
/* Wald: feuchtes Moos, dunkles Holz, Licht durch das Blätterdach. Waldschwarz #07140E als
   Grund, Tannengrün #0D2518 als Fläche, warmes Licht #DCE8DD als Schrift auf Dunkel.
   Der Akzent ist zwei Stufen heller als das Smaragd der Vorgabe: #1F7A4A hielte auf dem
   Grund nur 3,8 zu 1 und wäre für Fließtext zu dunkel, #2E9E63 hält 5,3 zu 1. */
html[data-aktiv="wald"]{
  --canvas:#07140E;--canvas-sunk:#0D2518;--panel:#0D2518;
  --ink:#DCE8DD;--ink-2:#A9C2B0;--ink-3:#8AA592;--line:#173A25;--line-strong:#5E8A6C;
  --deep:#0D2518;--deep-2:#173A25;--on-deep:#DCE8DD;--on-deep-2:#A9C2B0;
  --accent:#2E9E63;--accent-ink:#7DD6A0;--accent-on-deep:#7DD6A0;
  --fokus:#2E9E63;--fokus-deep:#7DD6A0;--fehler-deep:#FF8A66;
  --stage:#0D2518;--stage-line:#284630;--glow:rgba(31,122,74,.2);--rahmen:rgba(125,169,138,.32);
  --flaeche:#DCE8DD;--flaeche-text:#07140E;--flaeche-hover:#FFFFFF;--buehne-deep:#0D2518;--canvas-2:#07140E;
  /* Organische Welt: weiche Ecken, nichts Geschnittenes. */
  --r-stage:20px;--r-card:14px;--r-field:10px;--r-btn:26px;
  --schatten:3 10 7;
}

/* ---------- 3 Übergang ---------- */
/* ---------- 2b Die Fahrt zwischen zwei Welten ---------- */
/* ERZEUGT von tools/fahrt-bauen.js. Nicht von Hand ändern: die Werte stehen in den
   Blöcken darüber, dieses Stück leitet sie nur ab.

   Jede Welt hält ihren Satz unter eigenem Namen. Zwei sind gleichzeitig im Spiel:
   --v-... ist die Welt, aus der gescrollt wird, --b-... die, in die hinein gescrollt
   wird. --mix sagt, wie weit die Fahrt ist. welten.js schreibt --mix aus der
   Scrollstellung, nicht aus einer Uhr: langsames Scrollen fährt langsam, schnelles
   schnell, Zurückscrollen fährt rückwärts. */
@property --mix{syntax:'<number>';inherits:true;initial-value:0}
@property --schatten-farbe{syntax:'<color>';inherits:true;initial-value:rgb(44 38 29)}

/* Die 7 Sätze: papier, riviera, juwelier, club, skizze, auto, wald. */
:root{
  --w-papier-canvas:#F3F1EC;--w-papier-canvas-2:#F3F1EC;--w-papier-canvas-sunk:#EAE7DF;--w-papier-panel:#FBFAF7;--w-papier-ink:#121211;--w-papier-ink-2:#55524C;--w-papier-ink-3:#55524C;--w-papier-line:#D9D5CC;--w-papier-line-strong:#8C887F;--w-papier-deep:#121211;--w-papier-deep-2:#1D1D1A;--w-papier-on-deep:#F3F1EC;--w-papier-on-deep-2:#A8A49B;--w-papier-accent:#E8401C;--w-papier-accent-ink:#B3300F;--w-papier-accent-on-deep:#FF6A3D;--w-papier-fokus:#E8401C;--w-papier-fokus-deep:#E8401C;--w-papier-fehler-deep:#FF6A3D;--w-papier-stage:#EAE7DF;--w-papier-stage-line:#D9D5CC;--w-papier-glow:rgba(232,64,28,0);--w-papier-rahmen:rgba(184,146,87,0);--w-papier-flaeche:#F3F1EC;--w-papier-flaeche-text:#121211;--w-papier-flaeche-hover:#FFFFFF;--w-papier-buehne-deep:#121211;--w-papier-schatten-farbe:rgb(44 38 29);--w-papier-r-stage:40px;--w-papier-r-card:20px;--w-papier-r-field:12px;--w-papier-r-btn:26px;
  --w-riviera-canvas:#EFE6D8;--w-riviera-canvas-2:#EFE6D8;--w-riviera-canvas-sunk:#E4D8C5;--w-riviera-panel:#F8F3EA;--w-riviera-ink:#2B2119;--w-riviera-ink-2:#4A3A2B;--w-riviera-ink-3:#5C4A38;--w-riviera-line:#DCCDB6;--w-riviera-line-strong:#8A7154;--w-riviera-deep:#F8F3EA;--w-riviera-deep-2:#F1E8DA;--w-riviera-on-deep:#2B2119;--w-riviera-on-deep-2:#5C4A38;--w-riviera-accent:#B4532A;--w-riviera-accent-ink:#8A3A1A;--w-riviera-accent-on-deep:#8A3A1A;--w-riviera-fokus:#8A3A1A;--w-riviera-fokus-deep:#8A3A1A;--w-riviera-fehler-deep:#9B2C16;--w-riviera-stage:#E4D8C5;--w-riviera-stage-line:#D2C1A6;--w-riviera-glow:rgba(255,214,160,.22);--w-riviera-rahmen:rgba(184,146,87,0);--w-riviera-flaeche:#F8F3EA;--w-riviera-flaeche-text:#2B2119;--w-riviera-flaeche-hover:#FFFFFF;--w-riviera-buehne-deep:#F8F3EA;--w-riviera-schatten-farbe:rgb(74 48 20);--w-riviera-r-stage:4px;--w-riviera-r-card:4px;--w-riviera-r-field:4px;--w-riviera-r-btn:26px;
  --w-juwelier-canvas:#F5F3F0;--w-juwelier-canvas-2:#EFECE7;--w-juwelier-canvas-sunk:#E7E3DD;--w-juwelier-panel:#FBFAF8;--w-juwelier-ink:#1D1A17;--w-juwelier-ink-2:#45403A;--w-juwelier-ink-3:#5E564D;--w-juwelier-line:#DDD6C8;--w-juwelier-line-strong:#8A7F70;--w-juwelier-deep:#133A2E;--w-juwelier-deep-2:#1A4436;--w-juwelier-on-deep:#F4EDE0;--w-juwelier-on-deep-2:#CFC3AC;--w-juwelier-accent:#B99B5F;--w-juwelier-accent-ink:#7D6330;--w-juwelier-accent-on-deep:#E2C36A;--w-juwelier-fokus:#7D6330;--w-juwelier-fokus-deep:#E2C36A;--w-juwelier-fehler-deep:#FF8A66;--w-juwelier-stage:#E7E3DD;--w-juwelier-stage-line:#D5CEC2;--w-juwelier-glow:rgba(185,155,95,.14);--w-juwelier-rahmen:rgba(185,155,95,.55);--w-juwelier-flaeche:#FBFAF8;--w-juwelier-flaeche-text:#1D1A17;--w-juwelier-flaeche-hover:#FFFFFF;--w-juwelier-buehne-deep:#133A2E;--w-juwelier-schatten-farbe:rgb(60 45 20);--w-juwelier-r-stage:2px;--w-juwelier-r-card:2px;--w-juwelier-r-field:2px;--w-juwelier-r-btn:2px;
  --w-club-canvas:#0D0C0B;--w-club-canvas-2:#0D0C0B;--w-club-canvas-sunk:#171512;--w-club-panel:#1D1A16;--w-club-ink:#EDE3CF;--w-club-ink-2:#CBBFA6;--w-club-ink-3:#A29679;--w-club-line:#2D2924;--w-club-line-strong:#7B7160;--w-club-deep:#EDE3CF;--w-club-deep-2:#E3D8C2;--w-club-on-deep:#141210;--w-club-on-deep-2:#4A4238;--w-club-accent:#B3262E;--w-club-accent-ink:#E4C55C;--w-club-accent-on-deep:#9E1F27;--w-club-fokus:#E4C55C;--w-club-fokus-deep:#9E1F27;--w-club-fehler-deep:#9E1F27;--w-club-stage:#171512;--w-club-stage-line:#3A342C;--w-club-glow:rgba(179,38,46,.14);--w-club-rahmen:rgba(176,141,60,.55);--w-club-flaeche:#EDE3CF;--w-club-flaeche-text:#0D0C0B;--w-club-flaeche-hover:#FFFFFF;--w-club-buehne-deep:#171512;--w-club-schatten-farbe:rgb(44 38 29);--w-club-r-stage:2px;--w-club-r-card:2px;--w-club-r-field:2px;--w-club-r-btn:2px;
  --w-skizze-canvas:#FAFAF7;--w-skizze-canvas-2:#FAFAF7;--w-skizze-canvas-sunk:#F1F0EA;--w-skizze-panel:#FFFFFF;--w-skizze-ink:#2E2E2E;--w-skizze-ink-2:#6A6A66;--w-skizze-ink-3:#6A6A66;--w-skizze-line:#CDCDC7;--w-skizze-line-strong:#7A7A76;--w-skizze-deep:#FFFFFF;--w-skizze-deep-2:#FFFFFF;--w-skizze-on-deep:#2E2E2E;--w-skizze-on-deep-2:#6A6A66;--w-skizze-accent:#B8322A;--w-skizze-accent-ink:#B8322A;--w-skizze-accent-on-deep:#B8322A;--w-skizze-fokus:#2E2E2E;--w-skizze-fokus-deep:#2E2E2E;--w-skizze-fehler-deep:#B8322A;--w-skizze-stage:#FFFFFF;--w-skizze-stage-line:#2E2E2E;--w-skizze-glow:rgba(0,0,0,0);--w-skizze-rahmen:rgba(46,46,46,.9);--w-skizze-flaeche:#FFFFFF;--w-skizze-flaeche-text:#2E2E2E;--w-skizze-flaeche-hover:#EDEDEA;--w-skizze-buehne-deep:#FFFFFF;--w-skizze-schatten-farbe:rgb(46 46 46);--w-skizze-r-stage:2px;--w-skizze-r-card:2px;--w-skizze-r-field:2px;--w-skizze-r-btn:2px;
  --w-auto-canvas:#050607;--w-auto-canvas-2:#050607;--w-auto-canvas-sunk:#0B0E10;--w-auto-panel:#151A1E;--w-auto-ink:#EAF4FF;--w-auto-ink-2:#9FB3C4;--w-auto-ink-3:#8496A5;--w-auto-line:#1B2329;--w-auto-line-strong:#4A5C6B;--w-auto-deep:#0B0E10;--w-auto-deep-2:#151A1E;--w-auto-on-deep:#EAF4FF;--w-auto-on-deep-2:#9FB3C4;--w-auto-accent:#1687E8;--w-auto-accent-ink:#B9E5FF;--w-auto-accent-on-deep:#8CD0FF;--w-auto-fokus:#1687E8;--w-auto-fokus-deep:#8CD0FF;--w-auto-fehler-deep:#FF8A66;--w-auto-stage:#0B0E10;--w-auto-stage-line:#1F2A33;--w-auto-glow:rgba(22,135,232,.18);--w-auto-rahmen:rgba(185,229,255,.28);--w-auto-flaeche:#B9E5FF;--w-auto-flaeche-text:#050607;--w-auto-flaeche-hover:#EAF4FF;--w-auto-buehne-deep:#0B0E10;--w-auto-schatten-farbe:rgb(1 3 6);--w-auto-r-stage:40px;--w-auto-r-card:2px;--w-auto-r-field:2px;--w-auto-r-btn:2px;
  --w-wald-canvas:#07140E;--w-wald-canvas-2:#07140E;--w-wald-canvas-sunk:#0D2518;--w-wald-panel:#0D2518;--w-wald-ink:#DCE8DD;--w-wald-ink-2:#A9C2B0;--w-wald-ink-3:#8AA592;--w-wald-line:#173A25;--w-wald-line-strong:#5E8A6C;--w-wald-deep:#0D2518;--w-wald-deep-2:#173A25;--w-wald-on-deep:#DCE8DD;--w-wald-on-deep-2:#A9C2B0;--w-wald-accent:#2E9E63;--w-wald-accent-ink:#7DD6A0;--w-wald-accent-on-deep:#7DD6A0;--w-wald-fokus:#2E9E63;--w-wald-fokus-deep:#7DD6A0;--w-wald-fehler-deep:#FF8A66;--w-wald-stage:#0D2518;--w-wald-stage-line:#284630;--w-wald-glow:rgba(31,122,74,.2);--w-wald-rahmen:rgba(125,169,138,.32);--w-wald-flaeche:#DCE8DD;--w-wald-flaeche-text:#07140E;--w-wald-flaeche-hover:#FFFFFF;--w-wald-buehne-deep:#0D2518;--w-wald-schatten-farbe:rgb(3 10 7);--w-wald-r-stage:40px;--w-wald-r-card:14px;--w-wald-r-field:10px;--w-wald-r-btn:26px;
}

/* Welche zwei Sätze gerade gelten. */
html[data-von="papier"]{--v-canvas:var(--w-papier-canvas);--v-canvas-2:var(--w-papier-canvas-2);--v-canvas-sunk:var(--w-papier-canvas-sunk);--v-panel:var(--w-papier-panel);--v-ink:var(--w-papier-ink);--v-ink-2:var(--w-papier-ink-2);--v-ink-3:var(--w-papier-ink-3);--v-line:var(--w-papier-line);--v-line-strong:var(--w-papier-line-strong);--v-deep:var(--w-papier-deep);--v-deep-2:var(--w-papier-deep-2);--v-on-deep:var(--w-papier-on-deep);--v-on-deep-2:var(--w-papier-on-deep-2);--v-accent:var(--w-papier-accent);--v-accent-ink:var(--w-papier-accent-ink);--v-accent-on-deep:var(--w-papier-accent-on-deep);--v-fokus:var(--w-papier-fokus);--v-fokus-deep:var(--w-papier-fokus-deep);--v-fehler-deep:var(--w-papier-fehler-deep);--v-stage:var(--w-papier-stage);--v-stage-line:var(--w-papier-stage-line);--v-glow:var(--w-papier-glow);--v-rahmen:var(--w-papier-rahmen);--v-flaeche:var(--w-papier-flaeche);--v-flaeche-text:var(--w-papier-flaeche-text);--v-flaeche-hover:var(--w-papier-flaeche-hover);--v-buehne-deep:var(--w-papier-buehne-deep);--v-schatten-farbe:var(--w-papier-schatten-farbe);--v-r-stage:var(--w-papier-r-stage);--v-r-card:var(--w-papier-r-card);--v-r-field:var(--w-papier-r-field);--v-r-btn:var(--w-papier-r-btn)}
html[data-von="riviera"]{--v-canvas:var(--w-riviera-canvas);--v-canvas-2:var(--w-riviera-canvas-2);--v-canvas-sunk:var(--w-riviera-canvas-sunk);--v-panel:var(--w-riviera-panel);--v-ink:var(--w-riviera-ink);--v-ink-2:var(--w-riviera-ink-2);--v-ink-3:var(--w-riviera-ink-3);--v-line:var(--w-riviera-line);--v-line-strong:var(--w-riviera-line-strong);--v-deep:var(--w-riviera-deep);--v-deep-2:var(--w-riviera-deep-2);--v-on-deep:var(--w-riviera-on-deep);--v-on-deep-2:var(--w-riviera-on-deep-2);--v-accent:var(--w-riviera-accent);--v-accent-ink:var(--w-riviera-accent-ink);--v-accent-on-deep:var(--w-riviera-accent-on-deep);--v-fokus:var(--w-riviera-fokus);--v-fokus-deep:var(--w-riviera-fokus-deep);--v-fehler-deep:var(--w-riviera-fehler-deep);--v-stage:var(--w-riviera-stage);--v-stage-line:var(--w-riviera-stage-line);--v-glow:var(--w-riviera-glow);--v-rahmen:var(--w-riviera-rahmen);--v-flaeche:var(--w-riviera-flaeche);--v-flaeche-text:var(--w-riviera-flaeche-text);--v-flaeche-hover:var(--w-riviera-flaeche-hover);--v-buehne-deep:var(--w-riviera-buehne-deep);--v-schatten-farbe:var(--w-riviera-schatten-farbe);--v-r-stage:var(--w-riviera-r-stage);--v-r-card:var(--w-riviera-r-card);--v-r-field:var(--w-riviera-r-field);--v-r-btn:var(--w-riviera-r-btn)}
html[data-von="juwelier"]{--v-canvas:var(--w-juwelier-canvas);--v-canvas-2:var(--w-juwelier-canvas-2);--v-canvas-sunk:var(--w-juwelier-canvas-sunk);--v-panel:var(--w-juwelier-panel);--v-ink:var(--w-juwelier-ink);--v-ink-2:var(--w-juwelier-ink-2);--v-ink-3:var(--w-juwelier-ink-3);--v-line:var(--w-juwelier-line);--v-line-strong:var(--w-juwelier-line-strong);--v-deep:var(--w-juwelier-deep);--v-deep-2:var(--w-juwelier-deep-2);--v-on-deep:var(--w-juwelier-on-deep);--v-on-deep-2:var(--w-juwelier-on-deep-2);--v-accent:var(--w-juwelier-accent);--v-accent-ink:var(--w-juwelier-accent-ink);--v-accent-on-deep:var(--w-juwelier-accent-on-deep);--v-fokus:var(--w-juwelier-fokus);--v-fokus-deep:var(--w-juwelier-fokus-deep);--v-fehler-deep:var(--w-juwelier-fehler-deep);--v-stage:var(--w-juwelier-stage);--v-stage-line:var(--w-juwelier-stage-line);--v-glow:var(--w-juwelier-glow);--v-rahmen:var(--w-juwelier-rahmen);--v-flaeche:var(--w-juwelier-flaeche);--v-flaeche-text:var(--w-juwelier-flaeche-text);--v-flaeche-hover:var(--w-juwelier-flaeche-hover);--v-buehne-deep:var(--w-juwelier-buehne-deep);--v-schatten-farbe:var(--w-juwelier-schatten-farbe);--v-r-stage:var(--w-juwelier-r-stage);--v-r-card:var(--w-juwelier-r-card);--v-r-field:var(--w-juwelier-r-field);--v-r-btn:var(--w-juwelier-r-btn)}
html[data-von="club"]{--v-canvas:var(--w-club-canvas);--v-canvas-2:var(--w-club-canvas-2);--v-canvas-sunk:var(--w-club-canvas-sunk);--v-panel:var(--w-club-panel);--v-ink:var(--w-club-ink);--v-ink-2:var(--w-club-ink-2);--v-ink-3:var(--w-club-ink-3);--v-line:var(--w-club-line);--v-line-strong:var(--w-club-line-strong);--v-deep:var(--w-club-deep);--v-deep-2:var(--w-club-deep-2);--v-on-deep:var(--w-club-on-deep);--v-on-deep-2:var(--w-club-on-deep-2);--v-accent:var(--w-club-accent);--v-accent-ink:var(--w-club-accent-ink);--v-accent-on-deep:var(--w-club-accent-on-deep);--v-fokus:var(--w-club-fokus);--v-fokus-deep:var(--w-club-fokus-deep);--v-fehler-deep:var(--w-club-fehler-deep);--v-stage:var(--w-club-stage);--v-stage-line:var(--w-club-stage-line);--v-glow:var(--w-club-glow);--v-rahmen:var(--w-club-rahmen);--v-flaeche:var(--w-club-flaeche);--v-flaeche-text:var(--w-club-flaeche-text);--v-flaeche-hover:var(--w-club-flaeche-hover);--v-buehne-deep:var(--w-club-buehne-deep);--v-schatten-farbe:var(--w-club-schatten-farbe);--v-r-stage:var(--w-club-r-stage);--v-r-card:var(--w-club-r-card);--v-r-field:var(--w-club-r-field);--v-r-btn:var(--w-club-r-btn)}
html[data-von="skizze"]{--v-canvas:var(--w-skizze-canvas);--v-canvas-2:var(--w-skizze-canvas-2);--v-canvas-sunk:var(--w-skizze-canvas-sunk);--v-panel:var(--w-skizze-panel);--v-ink:var(--w-skizze-ink);--v-ink-2:var(--w-skizze-ink-2);--v-ink-3:var(--w-skizze-ink-3);--v-line:var(--w-skizze-line);--v-line-strong:var(--w-skizze-line-strong);--v-deep:var(--w-skizze-deep);--v-deep-2:var(--w-skizze-deep-2);--v-on-deep:var(--w-skizze-on-deep);--v-on-deep-2:var(--w-skizze-on-deep-2);--v-accent:var(--w-skizze-accent);--v-accent-ink:var(--w-skizze-accent-ink);--v-accent-on-deep:var(--w-skizze-accent-on-deep);--v-fokus:var(--w-skizze-fokus);--v-fokus-deep:var(--w-skizze-fokus-deep);--v-fehler-deep:var(--w-skizze-fehler-deep);--v-stage:var(--w-skizze-stage);--v-stage-line:var(--w-skizze-stage-line);--v-glow:var(--w-skizze-glow);--v-rahmen:var(--w-skizze-rahmen);--v-flaeche:var(--w-skizze-flaeche);--v-flaeche-text:var(--w-skizze-flaeche-text);--v-flaeche-hover:var(--w-skizze-flaeche-hover);--v-buehne-deep:var(--w-skizze-buehne-deep);--v-schatten-farbe:var(--w-skizze-schatten-farbe);--v-r-stage:var(--w-skizze-r-stage);--v-r-card:var(--w-skizze-r-card);--v-r-field:var(--w-skizze-r-field);--v-r-btn:var(--w-skizze-r-btn)}
html[data-von="auto"]{--v-canvas:var(--w-auto-canvas);--v-canvas-2:var(--w-auto-canvas-2);--v-canvas-sunk:var(--w-auto-canvas-sunk);--v-panel:var(--w-auto-panel);--v-ink:var(--w-auto-ink);--v-ink-2:var(--w-auto-ink-2);--v-ink-3:var(--w-auto-ink-3);--v-line:var(--w-auto-line);--v-line-strong:var(--w-auto-line-strong);--v-deep:var(--w-auto-deep);--v-deep-2:var(--w-auto-deep-2);--v-on-deep:var(--w-auto-on-deep);--v-on-deep-2:var(--w-auto-on-deep-2);--v-accent:var(--w-auto-accent);--v-accent-ink:var(--w-auto-accent-ink);--v-accent-on-deep:var(--w-auto-accent-on-deep);--v-fokus:var(--w-auto-fokus);--v-fokus-deep:var(--w-auto-fokus-deep);--v-fehler-deep:var(--w-auto-fehler-deep);--v-stage:var(--w-auto-stage);--v-stage-line:var(--w-auto-stage-line);--v-glow:var(--w-auto-glow);--v-rahmen:var(--w-auto-rahmen);--v-flaeche:var(--w-auto-flaeche);--v-flaeche-text:var(--w-auto-flaeche-text);--v-flaeche-hover:var(--w-auto-flaeche-hover);--v-buehne-deep:var(--w-auto-buehne-deep);--v-schatten-farbe:var(--w-auto-schatten-farbe);--v-r-stage:var(--w-auto-r-stage);--v-r-card:var(--w-auto-r-card);--v-r-field:var(--w-auto-r-field);--v-r-btn:var(--w-auto-r-btn)}
html[data-von="wald"]{--v-canvas:var(--w-wald-canvas);--v-canvas-2:var(--w-wald-canvas-2);--v-canvas-sunk:var(--w-wald-canvas-sunk);--v-panel:var(--w-wald-panel);--v-ink:var(--w-wald-ink);--v-ink-2:var(--w-wald-ink-2);--v-ink-3:var(--w-wald-ink-3);--v-line:var(--w-wald-line);--v-line-strong:var(--w-wald-line-strong);--v-deep:var(--w-wald-deep);--v-deep-2:var(--w-wald-deep-2);--v-on-deep:var(--w-wald-on-deep);--v-on-deep-2:var(--w-wald-on-deep-2);--v-accent:var(--w-wald-accent);--v-accent-ink:var(--w-wald-accent-ink);--v-accent-on-deep:var(--w-wald-accent-on-deep);--v-fokus:var(--w-wald-fokus);--v-fokus-deep:var(--w-wald-fokus-deep);--v-fehler-deep:var(--w-wald-fehler-deep);--v-stage:var(--w-wald-stage);--v-stage-line:var(--w-wald-stage-line);--v-glow:var(--w-wald-glow);--v-rahmen:var(--w-wald-rahmen);--v-flaeche:var(--w-wald-flaeche);--v-flaeche-text:var(--w-wald-flaeche-text);--v-flaeche-hover:var(--w-wald-flaeche-hover);--v-buehne-deep:var(--w-wald-buehne-deep);--v-schatten-farbe:var(--w-wald-schatten-farbe);--v-r-stage:var(--w-wald-r-stage);--v-r-card:var(--w-wald-r-card);--v-r-field:var(--w-wald-r-field);--v-r-btn:var(--w-wald-r-btn)}
html[data-bis="papier"]{--b-canvas:var(--w-papier-canvas);--b-canvas-2:var(--w-papier-canvas-2);--b-canvas-sunk:var(--w-papier-canvas-sunk);--b-panel:var(--w-papier-panel);--b-ink:var(--w-papier-ink);--b-ink-2:var(--w-papier-ink-2);--b-ink-3:var(--w-papier-ink-3);--b-line:var(--w-papier-line);--b-line-strong:var(--w-papier-line-strong);--b-deep:var(--w-papier-deep);--b-deep-2:var(--w-papier-deep-2);--b-on-deep:var(--w-papier-on-deep);--b-on-deep-2:var(--w-papier-on-deep-2);--b-accent:var(--w-papier-accent);--b-accent-ink:var(--w-papier-accent-ink);--b-accent-on-deep:var(--w-papier-accent-on-deep);--b-fokus:var(--w-papier-fokus);--b-fokus-deep:var(--w-papier-fokus-deep);--b-fehler-deep:var(--w-papier-fehler-deep);--b-stage:var(--w-papier-stage);--b-stage-line:var(--w-papier-stage-line);--b-glow:var(--w-papier-glow);--b-rahmen:var(--w-papier-rahmen);--b-flaeche:var(--w-papier-flaeche);--b-flaeche-text:var(--w-papier-flaeche-text);--b-flaeche-hover:var(--w-papier-flaeche-hover);--b-buehne-deep:var(--w-papier-buehne-deep);--b-schatten-farbe:var(--w-papier-schatten-farbe);--b-r-stage:var(--w-papier-r-stage);--b-r-card:var(--w-papier-r-card);--b-r-field:var(--w-papier-r-field);--b-r-btn:var(--w-papier-r-btn)}
html[data-bis="riviera"]{--b-canvas:var(--w-riviera-canvas);--b-canvas-2:var(--w-riviera-canvas-2);--b-canvas-sunk:var(--w-riviera-canvas-sunk);--b-panel:var(--w-riviera-panel);--b-ink:var(--w-riviera-ink);--b-ink-2:var(--w-riviera-ink-2);--b-ink-3:var(--w-riviera-ink-3);--b-line:var(--w-riviera-line);--b-line-strong:var(--w-riviera-line-strong);--b-deep:var(--w-riviera-deep);--b-deep-2:var(--w-riviera-deep-2);--b-on-deep:var(--w-riviera-on-deep);--b-on-deep-2:var(--w-riviera-on-deep-2);--b-accent:var(--w-riviera-accent);--b-accent-ink:var(--w-riviera-accent-ink);--b-accent-on-deep:var(--w-riviera-accent-on-deep);--b-fokus:var(--w-riviera-fokus);--b-fokus-deep:var(--w-riviera-fokus-deep);--b-fehler-deep:var(--w-riviera-fehler-deep);--b-stage:var(--w-riviera-stage);--b-stage-line:var(--w-riviera-stage-line);--b-glow:var(--w-riviera-glow);--b-rahmen:var(--w-riviera-rahmen);--b-flaeche:var(--w-riviera-flaeche);--b-flaeche-text:var(--w-riviera-flaeche-text);--b-flaeche-hover:var(--w-riviera-flaeche-hover);--b-buehne-deep:var(--w-riviera-buehne-deep);--b-schatten-farbe:var(--w-riviera-schatten-farbe);--b-r-stage:var(--w-riviera-r-stage);--b-r-card:var(--w-riviera-r-card);--b-r-field:var(--w-riviera-r-field);--b-r-btn:var(--w-riviera-r-btn)}
html[data-bis="juwelier"]{--b-canvas:var(--w-juwelier-canvas);--b-canvas-2:var(--w-juwelier-canvas-2);--b-canvas-sunk:var(--w-juwelier-canvas-sunk);--b-panel:var(--w-juwelier-panel);--b-ink:var(--w-juwelier-ink);--b-ink-2:var(--w-juwelier-ink-2);--b-ink-3:var(--w-juwelier-ink-3);--b-line:var(--w-juwelier-line);--b-line-strong:var(--w-juwelier-line-strong);--b-deep:var(--w-juwelier-deep);--b-deep-2:var(--w-juwelier-deep-2);--b-on-deep:var(--w-juwelier-on-deep);--b-on-deep-2:var(--w-juwelier-on-deep-2);--b-accent:var(--w-juwelier-accent);--b-accent-ink:var(--w-juwelier-accent-ink);--b-accent-on-deep:var(--w-juwelier-accent-on-deep);--b-fokus:var(--w-juwelier-fokus);--b-fokus-deep:var(--w-juwelier-fokus-deep);--b-fehler-deep:var(--w-juwelier-fehler-deep);--b-stage:var(--w-juwelier-stage);--b-stage-line:var(--w-juwelier-stage-line);--b-glow:var(--w-juwelier-glow);--b-rahmen:var(--w-juwelier-rahmen);--b-flaeche:var(--w-juwelier-flaeche);--b-flaeche-text:var(--w-juwelier-flaeche-text);--b-flaeche-hover:var(--w-juwelier-flaeche-hover);--b-buehne-deep:var(--w-juwelier-buehne-deep);--b-schatten-farbe:var(--w-juwelier-schatten-farbe);--b-r-stage:var(--w-juwelier-r-stage);--b-r-card:var(--w-juwelier-r-card);--b-r-field:var(--w-juwelier-r-field);--b-r-btn:var(--w-juwelier-r-btn)}
html[data-bis="club"]{--b-canvas:var(--w-club-canvas);--b-canvas-2:var(--w-club-canvas-2);--b-canvas-sunk:var(--w-club-canvas-sunk);--b-panel:var(--w-club-panel);--b-ink:var(--w-club-ink);--b-ink-2:var(--w-club-ink-2);--b-ink-3:var(--w-club-ink-3);--b-line:var(--w-club-line);--b-line-strong:var(--w-club-line-strong);--b-deep:var(--w-club-deep);--b-deep-2:var(--w-club-deep-2);--b-on-deep:var(--w-club-on-deep);--b-on-deep-2:var(--w-club-on-deep-2);--b-accent:var(--w-club-accent);--b-accent-ink:var(--w-club-accent-ink);--b-accent-on-deep:var(--w-club-accent-on-deep);--b-fokus:var(--w-club-fokus);--b-fokus-deep:var(--w-club-fokus-deep);--b-fehler-deep:var(--w-club-fehler-deep);--b-stage:var(--w-club-stage);--b-stage-line:var(--w-club-stage-line);--b-glow:var(--w-club-glow);--b-rahmen:var(--w-club-rahmen);--b-flaeche:var(--w-club-flaeche);--b-flaeche-text:var(--w-club-flaeche-text);--b-flaeche-hover:var(--w-club-flaeche-hover);--b-buehne-deep:var(--w-club-buehne-deep);--b-schatten-farbe:var(--w-club-schatten-farbe);--b-r-stage:var(--w-club-r-stage);--b-r-card:var(--w-club-r-card);--b-r-field:var(--w-club-r-field);--b-r-btn:var(--w-club-r-btn)}
html[data-bis="skizze"]{--b-canvas:var(--w-skizze-canvas);--b-canvas-2:var(--w-skizze-canvas-2);--b-canvas-sunk:var(--w-skizze-canvas-sunk);--b-panel:var(--w-skizze-panel);--b-ink:var(--w-skizze-ink);--b-ink-2:var(--w-skizze-ink-2);--b-ink-3:var(--w-skizze-ink-3);--b-line:var(--w-skizze-line);--b-line-strong:var(--w-skizze-line-strong);--b-deep:var(--w-skizze-deep);--b-deep-2:var(--w-skizze-deep-2);--b-on-deep:var(--w-skizze-on-deep);--b-on-deep-2:var(--w-skizze-on-deep-2);--b-accent:var(--w-skizze-accent);--b-accent-ink:var(--w-skizze-accent-ink);--b-accent-on-deep:var(--w-skizze-accent-on-deep);--b-fokus:var(--w-skizze-fokus);--b-fokus-deep:var(--w-skizze-fokus-deep);--b-fehler-deep:var(--w-skizze-fehler-deep);--b-stage:var(--w-skizze-stage);--b-stage-line:var(--w-skizze-stage-line);--b-glow:var(--w-skizze-glow);--b-rahmen:var(--w-skizze-rahmen);--b-flaeche:var(--w-skizze-flaeche);--b-flaeche-text:var(--w-skizze-flaeche-text);--b-flaeche-hover:var(--w-skizze-flaeche-hover);--b-buehne-deep:var(--w-skizze-buehne-deep);--b-schatten-farbe:var(--w-skizze-schatten-farbe);--b-r-stage:var(--w-skizze-r-stage);--b-r-card:var(--w-skizze-r-card);--b-r-field:var(--w-skizze-r-field);--b-r-btn:var(--w-skizze-r-btn)}
html[data-bis="auto"]{--b-canvas:var(--w-auto-canvas);--b-canvas-2:var(--w-auto-canvas-2);--b-canvas-sunk:var(--w-auto-canvas-sunk);--b-panel:var(--w-auto-panel);--b-ink:var(--w-auto-ink);--b-ink-2:var(--w-auto-ink-2);--b-ink-3:var(--w-auto-ink-3);--b-line:var(--w-auto-line);--b-line-strong:var(--w-auto-line-strong);--b-deep:var(--w-auto-deep);--b-deep-2:var(--w-auto-deep-2);--b-on-deep:var(--w-auto-on-deep);--b-on-deep-2:var(--w-auto-on-deep-2);--b-accent:var(--w-auto-accent);--b-accent-ink:var(--w-auto-accent-ink);--b-accent-on-deep:var(--w-auto-accent-on-deep);--b-fokus:var(--w-auto-fokus);--b-fokus-deep:var(--w-auto-fokus-deep);--b-fehler-deep:var(--w-auto-fehler-deep);--b-stage:var(--w-auto-stage);--b-stage-line:var(--w-auto-stage-line);--b-glow:var(--w-auto-glow);--b-rahmen:var(--w-auto-rahmen);--b-flaeche:var(--w-auto-flaeche);--b-flaeche-text:var(--w-auto-flaeche-text);--b-flaeche-hover:var(--w-auto-flaeche-hover);--b-buehne-deep:var(--w-auto-buehne-deep);--b-schatten-farbe:var(--w-auto-schatten-farbe);--b-r-stage:var(--w-auto-r-stage);--b-r-card:var(--w-auto-r-card);--b-r-field:var(--w-auto-r-field);--b-r-btn:var(--w-auto-r-btn)}
html[data-bis="wald"]{--b-canvas:var(--w-wald-canvas);--b-canvas-2:var(--w-wald-canvas-2);--b-canvas-sunk:var(--w-wald-canvas-sunk);--b-panel:var(--w-wald-panel);--b-ink:var(--w-wald-ink);--b-ink-2:var(--w-wald-ink-2);--b-ink-3:var(--w-wald-ink-3);--b-line:var(--w-wald-line);--b-line-strong:var(--w-wald-line-strong);--b-deep:var(--w-wald-deep);--b-deep-2:var(--w-wald-deep-2);--b-on-deep:var(--w-wald-on-deep);--b-on-deep-2:var(--w-wald-on-deep-2);--b-accent:var(--w-wald-accent);--b-accent-ink:var(--w-wald-accent-ink);--b-accent-on-deep:var(--w-wald-accent-on-deep);--b-fokus:var(--w-wald-fokus);--b-fokus-deep:var(--w-wald-fokus-deep);--b-fehler-deep:var(--w-wald-fehler-deep);--b-stage:var(--w-wald-stage);--b-stage-line:var(--w-wald-stage-line);--b-glow:var(--w-wald-glow);--b-rahmen:var(--w-wald-rahmen);--b-flaeche:var(--w-wald-flaeche);--b-flaeche-text:var(--w-wald-flaeche-text);--b-flaeche-hover:var(--w-wald-flaeche-hover);--b-buehne-deep:var(--w-wald-buehne-deep);--b-schatten-farbe:var(--w-wald-schatten-farbe);--b-r-stage:var(--w-wald-r-stage);--b-r-card:var(--w-wald-r-card);--b-r-field:var(--w-wald-r-field);--b-r-btn:var(--w-wald-r-btn)}

/* Die Mischung. In oklab, damit der Weg von Hell nach Dunkel gleichmäßig aussieht und
   nicht in der Mitte absackt. @media screen, weil der Druckbogen eigene Werte setzt. */
@supports (color:color-mix(in oklab,#000,#fff)){
@media screen{
  html[data-von][data-bis]{
    --canvas:color-mix(in oklab,var(--b-canvas) calc(var(--mix) * 100%),var(--v-canvas));
    --canvas-2:color-mix(in oklab,var(--b-canvas-2) calc(var(--mix) * 100%),var(--v-canvas-2));
    --canvas-sunk:color-mix(in oklab,var(--b-canvas-sunk) calc(var(--mix) * 100%),var(--v-canvas-sunk));
    --panel:color-mix(in oklab,var(--b-panel) calc(var(--mix) * 100%),var(--v-panel));
    --ink:color-mix(in oklab,var(--b-ink) calc(var(--mix) * 100%),var(--v-ink));
    --ink-2:color-mix(in oklab,var(--b-ink-2) calc(var(--mix) * 100%),var(--v-ink-2));
    --ink-3:color-mix(in oklab,var(--b-ink-3) calc(var(--mix) * 100%),var(--v-ink-3));
    --line:color-mix(in oklab,var(--b-line) calc(var(--mix) * 100%),var(--v-line));
    --line-strong:color-mix(in oklab,var(--b-line-strong) calc(var(--mix) * 100%),var(--v-line-strong));
    --deep:color-mix(in oklab,var(--b-deep) calc(var(--mix) * 100%),var(--v-deep));
    --deep-2:color-mix(in oklab,var(--b-deep-2) calc(var(--mix) * 100%),var(--v-deep-2));
    --on-deep:color-mix(in oklab,var(--b-on-deep) calc(var(--mix) * 100%),var(--v-on-deep));
    --on-deep-2:color-mix(in oklab,var(--b-on-deep-2) calc(var(--mix) * 100%),var(--v-on-deep-2));
    --accent:color-mix(in oklab,var(--b-accent) calc(var(--mix) * 100%),var(--v-accent));
    --accent-ink:color-mix(in oklab,var(--b-accent-ink) calc(var(--mix) * 100%),var(--v-accent-ink));
    --accent-on-deep:color-mix(in oklab,var(--b-accent-on-deep) calc(var(--mix) * 100%),var(--v-accent-on-deep));
    --fokus:color-mix(in oklab,var(--b-fokus) calc(var(--mix) * 100%),var(--v-fokus));
    --fokus-deep:color-mix(in oklab,var(--b-fokus-deep) calc(var(--mix) * 100%),var(--v-fokus-deep));
    --fehler-deep:color-mix(in oklab,var(--b-fehler-deep) calc(var(--mix) * 100%),var(--v-fehler-deep));
    --stage:color-mix(in oklab,var(--b-stage) calc(var(--mix) * 100%),var(--v-stage));
    --stage-line:color-mix(in oklab,var(--b-stage-line) calc(var(--mix) * 100%),var(--v-stage-line));
    --glow:color-mix(in oklab,var(--b-glow) calc(var(--mix) * 100%),var(--v-glow));
    --rahmen:color-mix(in oklab,var(--b-rahmen) calc(var(--mix) * 100%),var(--v-rahmen));
    --flaeche:color-mix(in oklab,var(--b-flaeche) calc(var(--mix) * 100%),var(--v-flaeche));
    --flaeche-text:color-mix(in oklab,var(--b-flaeche-text) calc(var(--mix) * 100%),var(--v-flaeche-text));
    --flaeche-hover:color-mix(in oklab,var(--b-flaeche-hover) calc(var(--mix) * 100%),var(--v-flaeche-hover));
    --buehne-deep:color-mix(in oklab,var(--b-buehne-deep) calc(var(--mix) * 100%),var(--v-buehne-deep));
    --schatten-farbe:color-mix(in oklab,var(--b-schatten-farbe) calc(var(--mix) * 100%),var(--v-schatten-farbe));
    --r-stage:calc(var(--v-r-stage) + (var(--b-r-stage) - var(--v-r-stage)) * var(--mix));
    --r-card:calc(var(--v-r-card) + (var(--b-r-card) - var(--v-r-card)) * var(--mix));
    --r-field:calc(var(--v-r-field) + (var(--b-r-field) - var(--v-r-field)) * var(--mix));
    --r-btn:calc(var(--v-r-btn) + (var(--b-r-btn) - var(--v-r-btn)) * var(--mix));
    /* Keine Zeitblende mehr: der Wert steht schon da, wo das Scrollen ihn hingestellt hat. */
    transition:none;
  }
}
}

/* Rückfall für Browser ohne color-mix: die alte Zeitblende, unverändert. */
@supports not (color:color-mix(in oklab,#000,#fff)){
html[data-aktiv]{
    --welt-t:1.15s;--welt-kurve:cubic-bezier(.33,0,.15,1);
    transition:
      --canvas var(--welt-t) var(--welt-kurve),--canvas-2 var(--welt-t) var(--welt-kurve),
      --canvas-sunk var(--welt-t) var(--welt-kurve),--panel var(--welt-t) var(--welt-kurve),
      --line var(--welt-t) var(--welt-kurve),--line-strong var(--welt-t) var(--welt-kurve),
      --deep var(--welt-t) var(--welt-kurve),--deep-2 var(--welt-t) var(--welt-kurve),
      --stage var(--welt-t) var(--welt-kurve),--stage-line var(--welt-t) var(--welt-kurve),
      --glow var(--welt-t) var(--welt-kurve),--rahmen var(--welt-t) var(--welt-kurve),
      --flaeche var(--welt-t) var(--welt-kurve),--flaeche-hover var(--welt-t) var(--welt-kurve),
      --flaeche-text var(--welt-t) var(--welt-kurve),--buehne-deep var(--welt-t) var(--welt-kurve),
      --ink var(--welt-t) var(--welt-kurve),--ink-2 var(--welt-t) var(--welt-kurve),--ink-3 var(--welt-t) var(--welt-kurve),
      --on-deep var(--welt-t) var(--welt-kurve),--on-deep-2 var(--welt-t) var(--welt-kurve),
      --accent var(--welt-t) var(--welt-kurve),--accent-ink var(--welt-t) var(--welt-kurve),
      --accent-on-deep var(--welt-t) var(--welt-kurve),--fokus var(--welt-t) var(--welt-kurve),
      --fokus-deep var(--welt-t) var(--welt-kurve),--fehler-deep var(--welt-t) var(--welt-kurve),
      --r-stage var(--welt-t) var(--welt-kurve),--r-card var(--welt-t) var(--welt-kurve),
      --r-field var(--welt-t) var(--welt-kurve),--r-btn var(--welt-t) var(--welt-kurve);
  }
}

/* Kopf, Knöpfe, Reiter, Felder und Ablaufmarken haben für den Mauszeiger eigene, kurze Farbübergänge.
   Während eines Weltwechsels setzen sie aus und folgen den Token direkt, sonst laufen sie der Seite
   hinterher und stehen kurz grau auf grau. */
html.welten-fahrt .kopf,html.welten-fahrt .kopf.an,
html.welten-fahrt .btn,html.welten-fahrt .reiter button,html.welten-fahrt .umschalter button,
html.welten-fahrt .feld input,html.welten-fahrt .feld select,html.welten-fahrt .feld textarea,
html.welten-fahrt .zustimmung input,html.welten-fahrt .schritt::before,
html.welten-fahrt section[data-welt="club"].prozess .schritt__nr::before{transition-duration:0s}
html.welten-fahrt .kopf .wrap,html.welten-sofort .kopf .wrap{transition:none}
/* Beim Laden mitten im Dokument steht die Welt sofort, ohne Übergang. */
html.welten-sofort .kopf,html.welten-sofort .kopf.an{transition:transform .4s var(--ease-out)}

/* ---------- 4 Ebenen: fest hinter dem Inhalt ---------- */
.welten{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:-2;pointer-events:none;overflow:hidden;contain:layout paint style}
/* Briefing v5 §2: die alte Ebene blendet aus, während die neue einblendet. Die neue skaliert dabei
   in 1600 ms von 1.04 auf 1. Keine Verzögerung, damit nie der nackte Grund durchscheint. */
/* Keine Blende und keine Dauer. Deckung und Größe stehen da, wo das Scrollen sie hinstellt.
   Die abziehende Ebene wächst um dreieinhalb Prozent, die ankommende setzt sich aus 105
   Prozent herunter: so bewegt sich der Raum, statt dass ein Bild über einem anderen liegt. */
/* will-change lag vorher auf allen sechs Ebenen dauerhaft. Das hält sechs bildschirmgroße
   Texturen im Grafikspeicher, bei doppelter Punktdichte gut 150 MB. Es tragen nur noch die
   beiden Ebenen, die gerade im Spiel sind. */
.welt{position:absolute;inset:0;opacity:0;transform:scale(1.04);transition:none}
.welt[data-rolle]{will-change:opacity,transform}
.welt[data-rolle="von"]{opacity:calc(1 - var(--mix));transform:scale(calc(1 + var(--mix) * .035))}
.welt[data-rolle="bis"]{opacity:var(--mix);transform:scale(calc(1.05 - var(--mix) * .05))}
/* Bei reduzierter Bewegung bleibt die Überblendung, die Fahrt entfällt. Die Farbe folgt
   weiter dem Scrollen: das ist keine Bewegung, sondern eine Stellung. */
@media (prefers-reduced-motion:reduce){
  .welt[data-rolle="von"],.welt[data-rolle="bis"]{transform:none}
}
.still .welt[data-rolle="von"],.still .welt[data-rolle="bis"]{transform:none}

/* Die Fotos der Ebenen laden erst, wenn ihre Welt aktiv ist oder direkt davor oder danach liegt. Eine Ebene ist sonst
   unsichtbar, und das Bild der nächsten Welt kommt so mindestens einen Bildschirm vor dem Wechsel an. */
/* Briefing v5 §5.2: dieselbe Terrasse wie im Schwellenbild, Schleier höchstens 35 Prozent oben und
   70 Prozent unten (vorher 50 bis 95). Der Ausschnitt steht bei 10 Prozent von links: dort liegen
   Sonne, Meer und Balustrade, die dunklen Zypressen am rechten Bildrand fallen heraus. Gemessen an
   2560, 1920, 1680, 1440, 1280, 1024, 820, 768, 390 und 360 Pixeln Fensterbreite hält Espresso damit
   an der dunkelsten Stelle noch 4,69:1 (dunkelste Fläche #968C6C). */
.welt--riviera[data-nah]{background:
  linear-gradient(180deg,rgb(239 230 216/.35),rgb(239 230 216/.68) 30%,rgb(239 230 216/.7)),
  url("welten/riviera/terrasse-1920.webp") 10% 50%/cover no-repeat}
/* Briefing v5 §5.3: Der graue Küchenmarmor ist ersatzlos weg. Übrig bleibt Tageslicht auf
   Carrara, das nach unten eine Spur kühler wird. Ohne Foto gibt es hier nichts nachzuladen. */
.welt--juwelier{background:linear-gradient(180deg,#FBFAF8,#F5F3F0 44%,#EEEBE5)}
/* Der Ring auf Carrara lag bisher nur im Band über den Leistungen. Jetzt trägt ihn die Ebene
   und blendet ihn mit. Der Schleier ist dicht: das Foto ist Stimmung, nicht Motiv. */
.welt--juwelier[data-nah]{background:
  linear-gradient(180deg,rgb(245 243 240/.62),rgb(245 243 240/.78) 50%,rgb(245 243 240/.90)),
  url("welten/juwelier/ring-1920.webp") center 38%/cover no-repeat}
@media (min-width:1600px){
  .welt--juwelier[data-nah]{background-image:
    linear-gradient(180deg,rgb(245 243 240/.62),rgb(245 243 240/.78) 50%,rgb(245 243 240/.90)),
    url("welten/juwelier/ring-2560.webp")}
}
/* Club: die Nussbaumvertäfelung C2, dasselbe Bild wie im Schwellenband, nur gedimmt.
   Briefing v5 §5.4: Schleier rgb(15 12 10 / .55) oben bis .80 unten. Die Breite wählt --club-bild;
   AVIF nur, wo image-set mit Typangabe verstanden wird, sonst bleibt WebP stehen. */
.welt--club{--club-bild:url("welten/club/vertaefelung-1920.webp")}
@media (max-width:1000px){.welt--club{--club-bild:url("welten/club/vertaefelung-1280.webp")}}
@media (min-width:1600px){.welt--club{--club-bild:url("welten/club/vertaefelung-2560.webp")}}
@supports (background-image:image-set(url("a.avif") type("image/avif"))){
  .welt--club{--club-bild:image-set(url("welten/club/vertaefelung-1920.avif") type("image/avif"),url("welten/club/vertaefelung-1920.webp") type("image/webp"))}
  @media (max-width:1000px){.welt--club{--club-bild:image-set(url("welten/club/vertaefelung-1280.avif") type("image/avif"),url("welten/club/vertaefelung-1280.webp") type("image/webp"))}}
  @media (min-width:1600px){.welt--club{--club-bild:image-set(url("welten/club/vertaefelung-2560.avif") type("image/avif"),url("welten/club/vertaefelung-2560.webp") type("image/webp"))}}
}
.welt--club[data-nah]{background:
  linear-gradient(180deg,rgb(15 12 10/.55),rgb(15 12 10/.68) 55%,rgb(15 12 10/.80)),
  var(--club-bild) center/cover no-repeat}
/* Skizze: Zeichenpapier mit 5-mm-Raster in Blaustift (Briefing v5 §5.5). Millimeter als Einheit,
   damit das Raster auf jedem Bildschirm dieselbe reale Größe hat wie auf dem Papier. */
.welt--skizze{background:
  repeating-linear-gradient(90deg,rgba(127,184,214,.12) 0 1px,transparent 1px 5mm),
  repeating-linear-gradient(180deg,rgba(127,184,214,.12) 0 1px,transparent 1px 5mm),
  #FAFAF7}
/* Die gezeichnete Altstadtgasse lag bisher nur im Band über dem Website-Check. Jetzt liegt sie
   unter dem Raster auf dem Papier, so blass, dass das Raster oben bleibt. */
.welt--skizze[data-nah]{background:
  repeating-linear-gradient(90deg,rgba(127,184,214,.12) 0 1px,transparent 1px 5mm),
  repeating-linear-gradient(180deg,rgba(127,184,214,.12) 0 1px,transparent 1px 5mm),
  linear-gradient(180deg,rgb(250 250 247/.82),rgb(250 250 247/.90) 60%,rgb(250 250 247/.94)),
  url("welten/skizze/gasse-1920.webp") center 22%/cover no-repeat,
  #FAFAF7}
/* Ab 1441 die Fassung in doppelter Größe: aus jedem Bildpunkt sind vier geworden, das Bild
   sieht gleich aus, aber der Browser rechnet nicht mehr eine bildschirmgroße Textur mit
   Nächster-Nachbar-Rasterung hoch. Auf 1920 ist der Faktor eins. */

/* Abnahme 19.09. (K28): Die Fotos sind 1200px breit (Pixel 640px) und werden mit cover über das ganze Fenster
   gezogen: bei 1600px um Faktor 1,33, bei 2560px um 2,13. Küste und Marmor verlieren dabei Zeichnung. Bis die
   breiten Fassungen vorliegen (in WAS-ICH-BRAUCHE.md beschrieben), liegt ab 1600px ein dichterer Schleier in der
   Weltfarbe darüber; die weiche Zeichnung fällt dann nicht mehr auf. Club ist mit 0,74 bis 0,97 schon dicht genug,
   Pixel steht auf image-rendering: pixelated und bleibt unberührt. */
@media (min-width:1600px){
  /* Briefing v5 §5.2: Ab 1600px trägt die breite Fassung die Zeichnung, nicht ein dichterer Schleier. */
  .welt--riviera[data-nah]{
    background-image:linear-gradient(180deg,rgb(239 230 216/.35),rgb(239 230 216/.68) 30%,rgb(239 230 216/.7)),url("welten/riviera/terrasse-2560.webp")}
}
/* Briefing v5 §5.7: die feste Ebene der Welt Tiefblau ist nur noch Mitternacht. Der Raum aus fünf Wänden,
   die Fahrt des Rasters, der Lichtschein bei 52 Prozent Fensterhöhe und die Bildratenmessung sind weg.
   Der Lichtschein war der Fehler, der am Seitenende auf den Fußzeilenlinks lag: die Ebene ist fixiert, der
   Fleck stand also immer auf halber Fensterhöhe, ganz unten genau über der Spalte „Seiten“. Gemessene Spitze
   dort #2D7694, die Spaltenüberschrift hielt 3,76:1. Das Licht liegt jetzt im Video hinter dem
   Schlussabschnitt und endet mit ihm. */
/* Der Waldgrund. Das Licht fällt von oben, der Boden bleibt fast schwarz. */
.welt--wald{background:
  radial-gradient(110% 80% at 52% 6%,rgba(40,70,48,.7),rgba(7,20,14,0) 62%),
  radial-gradient(90% 60% at 20% 88%,rgba(13,37,24,.8),rgba(7,20,14,0) 70%),
  #07140E}

/* ---------- 5 Gemeinsame Bauteile folgen der Welt ---------- */
::selection{background:var(--ink);color:var(--canvas)}
:focus-visible{outline-color:var(--fokus)}
.on-deep :focus-visible{outline-color:var(--fokus-deep)}
/* Der Kopf bleibt der feste Anker: Pille, Wortmarke, roter Strich. */
.kopf .btn{border-radius:999px}
.kopf .marke i{background:#F0461C}
.btn--ink{color:var(--canvas-2)}
.btn--ink:hover{background:var(--ink-2)}
.skip{color:var(--canvas-2)}
.stempel{background:var(--canvas-2)}
.btn--hell{background:var(--flaeche);color:var(--flaeche-text)}
.btn--hell:hover{background:var(--flaeche-hover)}
main .btn,.stempel,.kennung{border-radius:var(--r-btn)}
/* Nachtrag 20.09.: Die Bühnen enden nicht mehr an einer Linie. Die oberen und unteren --naht
   Pixel ihrer Fläche laufen in den Grund der Welt aus. Dort liegt nur Innenpolster, kein Text,
   die Kontraste ändern sich also nicht. color-mix hält den Farbton der Fläche fest, deshalb
   blendet der Verlauf nicht über Grau, und er folgt der Farbfahrt beim Weltwechsel mit. */
.vergleich,.check{
  --naht:clamp(40px,5vw,88px);
  background-color:transparent;
  background-image:linear-gradient(180deg,
    color-mix(in srgb,var(--buehne-deep) 0%,transparent) 0,
    var(--buehne-deep) var(--naht),
    var(--buehne-deep) calc(100% - var(--naht)),
    color-mix(in srgb,var(--buehne-deep) 0%,transparent) 100%)}
/* Zwei Ausnahmen: Riviera rahmt die Bühne als Passepartout aus Leinen, Skizze zeichnet sie als
   Umriss mit versetzter Doppellinie. Beide brauchen ihre Kante, und beide liegen ohnehin fast
   auf der Grundfarbe ihrer Welt, es gibt dort also nichts aufzulösen. */
[data-welt="riviera"] .vergleich,[data-welt="skizze"] .check{
  background-color:var(--buehne-deep);background-image:none}
.ich::before{background:var(--stage);box-shadow:inset 0 0 0 1px var(--stage-line)}
.reiter button[aria-selected="true"],.umschalter button[aria-pressed="true"]{color:var(--deep)}
.check .zustimmung input::after{border-color:var(--deep)}
.etikett--alt{background:#0F0F0E;color:#F2F1ED}
.etikett--neu{background:#F2F1ED;color:#0F0F0E}
.check .feld input{border-color:var(--on-deep-2)}
.check .feld input:hover{border-color:var(--on-deep)}
.check .zustimmung input{box-shadow:inset 0 0 0 1.5px var(--on-deep-2)}
.check .feld [aria-invalid="true"]{border-color:var(--fehler-deep);box-shadow:inset 0 0 0 1px var(--fehler-deep)}
.check .feld__fehler{color:var(--fehler-deep)}
.check .feld__fehler::before{background:var(--fehler-deep);color:#FFFFFF}
.check .formular__fehler{box-shadow:inset 0 0 0 1.5px var(--fehler-deep)}
.check .formular__fehler a{color:var(--fehler-deep)}
.check .zustimmung input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--fehler-deep)}

/* ---------- 6 Weltgrenze ---------- */
/* Briefing v5 §3: Die Seite kündigt ihre Welten nicht mehr an. Zwischen zwei Welten steht kein
   Kapitel mehr, nur der Abschnittsabstand. Der Wechsel erklärt sich dadurch, dass er sauber läuft. */

/* ---------- 7 Riviera: Vorher und Nachher, Arbeiten ---------- */
/* Briefing v5 §5.2: Grandhotel an der Küste, goldene Stunde. Die Welt beginnt mit dem Schwellenbild;
   darauf liegt die Vergleichsbühne als Passepartout aus Leinen, und darunter stehen drei Postkarten.
   Genau zwei Bewegungen: die Parallaxe im Schwellenbild und der wandernde Lichtschimmer. */
[data-welt="riviera"]{
  --display:"Cormorant Garamond",Georgia,serif;
  --leinen:#F8F3EA;--espresso:#2B2119;--terrakotta:#B4532A;--terrakotta-text:#8A3A1A;--olive:#5E6B3F;--meerblau:#1E4A66;
  /* Der Verlauf am Fuß des Schwellenbildes endet genau im Kalkstein der Welt. */
  --grund-rgb:239 230 216;--schwelle-schrift:#2B2119;
  /* Bandhöhe wie in site.css, damit sich die Überlappung des Passepartouts daran rechnen lässt. */
  --band:clamp(420px,62vh,720px);--mount:calc(var(--band) / 3);
  /* Strecke, über die der lokale Verlauf hinter der Überschrift aufzieht. */
  --verlauf:clamp(44px,6vw,96px);
}
/* §5.2: Cormorant Garamond gibt es in 300 und 400. Die bisherigen 600 waren eine vom Browser
   gefälschte Fettung. H2 clamp(46px,4.8vw,80px), Zeilenhöhe 1.0. */
[data-welt="riviera"] .h2,[data-welt="riviera"] .vergleich h2{font-weight:400;font-size:clamp(46px,4.8vw,80px);line-height:1;letter-spacing:0}
[data-welt="riviera"] h3{font-weight:400;letter-spacing:0}
[data-welt="riviera"] p,[data-welt="riviera"] li{font-family:var(--body)}

/* --- Schwellenbild --- */
/* picture wäre sonst ein zweites Rasterfeld und schöbe die Überschrift aus dem Band.
   .wrap trägt margin-inline:auto und schrumpfte als Rasterfeld auf Inhaltsbreite. */
[data-welt="riviera"] .schwelle .wrap{position:relative;isolation:isolate;width:100%;padding-bottom:calc(var(--mount) + clamp(24px,3vw,44px))}
[data-welt="riviera"] .schwelle h2{max-width:min(100%,22ch)}
/* §4: Die Überschrift steht über einem lokalen Verlauf. Weil das Passepartout das untere Drittel des
   Bildes deckt, sitzt sie höher als der Fuß des Bandes; der Verlauf des Bauteils reicht dort noch
   nicht. Dieser hier hängt an der Überschrift selbst: er zieht auf der Strecke --verlauf über ihrer
   Oberkante auf und steht ab da voll, gleich wie viele Zeilen sie hat und wie hoch das Band ist.
   Gemessen an der dunkelsten Stelle hinter der Zeile hält Espresso damit über 4,5:1.
   Er läuft über die volle Fensterbreite; .schwelle schneidet ihn ab. */
[data-welt="riviera"] .schwelle .wrap::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;width:100vw;transform:translateX(-50%);top:calc(-1 * var(--verlauf));bottom:0;
  background:linear-gradient(180deg,rgb(var(--grund-rgb)/0),rgb(var(--grund-rgb)/.82) var(--verlauf),rgb(var(--grund-rgb)/.82));
}

/* --- Das Passepartout --- */
/* §5.2: höchstens 1200px breit, Innenabstand 40 bis 56px, Radius 4px, innen eine doppelte Haarlinie
   in Terrakotta mit 10px Abstand, Schatten 0 30px 60px -30px rgb(74 48 20 / .35). Es überlappt das
   untere Drittel des Bildes. Die drei Einsatzschatten bauen die Doppellinie: 1px Terrakotta, darunter
   ein 11px breiter Ring in Leinen, darunter ein 12px breiter Ring in Terrakotta. */
[data-welt="riviera"] .vergleich{
  position:relative;isolation:isolate;overflow:clip;
  max-width:1200px;margin:calc(-1 * var(--mount)) auto 0;
  padding:clamp(40px,4vw,56px);border-radius:4px;
  box-shadow:
    inset 0 0 0 1px var(--terrakotta),
    inset 0 0 0 11px var(--leinen),
    inset 0 0 0 12px var(--terrakotta),
    0 30px 60px -30px rgb(74 48 20/.35);
}
/* Die Schnittmarken sind das Zeichen der Welt Papier. Hier rahmt die Doppellinie. */
[data-welt="riviera"] .vergleich .mk{display:none}
/* Signatur-Bewegung 2: ein warmer Lichtschimmer, radial und bei 9 Prozent, wandert in 20 s über das
   Passepartout. Er läuft als transform, nicht als Hintergrundlauf, und liegt unter dem Inhalt. */
[data-welt="riviera"] .vergleich::before{
  content:"";position:absolute;z-index:-1;inset:-30% -60%;pointer-events:none;
  background:radial-gradient(closest-side,rgb(255 206 138/.09),rgb(255 206 138/0));
  animation:schimmer-lauf 20s linear infinite;
}
@keyframes schimmer-lauf{from{transform:translate3d(-38%,0,0)}to{transform:translate3d(38%,0,0)}}
[data-welt="riviera"] .vergleich__kopf{grid-template-columns:minmax(0,1fr);gap:0;margin-bottom:clamp(26px,3vw,38px)}
[data-welt="riviera"] .vergleich .lede{font-size:clamp(18px,1.4vw,21px);color:var(--on-deep-2);max-width:var(--lesebreite)}

/* Reiter: Cormorant-Kursiv 22px, der Unterstrich in Terrakotta gleitet in 300 ms zwischen ihnen.
   Drei gleich breite Felder, damit der Unterstrich ohne Skript weiß, wie weit er wandert;
   :has liest, welcher Reiter gewählt ist. */
[data-welt="riviera"] .steuer{align-items:flex-end;gap:16px 32px;margin-bottom:clamp(22px,2.4vw,32px)}
[data-welt="riviera"] .reiter{
  position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  gap:0;padding:0 0 10px;border-radius:0;background:none;box-shadow:none;overflow:visible;
  border-bottom:1px solid rgb(180 83 42/.3);
}
[data-welt="riviera"] .reiter button{
  min-height:44px;padding:0 clamp(12px,1.6vw,26px);border-radius:0;background:none;
  font:400 22px/1.2 var(--display);font-style:italic;letter-spacing:0;color:var(--on-deep-2);
  transition:color var(--t-mikro) var(--ease);
}
[data-welt="riviera"] .reiter button:hover,[data-welt="riviera"] .reiter button[aria-selected="true"]{background:none;color:var(--on-deep)}
[data-welt="riviera"] .reiter::after{
  content:"";position:absolute;left:0;bottom:-1px;width:calc(100% / 3);height:2px;background:var(--terrakotta);
  transform:translate3d(calc(var(--n,0) * 100%),0,0);transition:transform var(--t-bedienung) var(--ease-inout);
}
[data-welt="riviera"] .reiter:has(button:nth-child(2)[aria-selected="true"])::after{--n:1}
[data-welt="riviera"] .reiter:has(button:nth-child(3)[aria-selected="true"])::after{--n:2}

/* Geräteschalter: ein kleines Segment in Leinen und Espresso. */
[data-welt="riviera"] .umschalter{gap:0;border-radius:3px;overflow:hidden;box-shadow:inset 0 0 0 1px rgb(43 33 25/.32)}
[data-welt="riviera"] .umschalter button{min-height:40px;padding:0 18px;border-radius:0;box-shadow:none;font:600 15px/1 var(--body);color:var(--on-deep-2)}
[data-welt="riviera"] .umschalter button + button{box-shadow:inset 1px 0 0 rgb(43 33 25/.32)}
[data-welt="riviera"] .umschalter button[aria-pressed="true"]{background:var(--espresso);color:var(--leinen)}

/* „Eine Konzeptstudie, kein Kundenauftrag“ ist hier ein normaler kleiner Satz, keine Marke: keine
   Kapsel, kein Punkt, keine Versalien, kein Mono. */
[data-welt="riviera"] .vergleich__hinweis{display:grid;gap:4px;margin:0 0 clamp(20px,2.4vw,28px)}
[data-welt="riviera"] .vergleich .kennung{
  justify-self:start;display:block;padding:0;border-radius:0;box-shadow:none;white-space:normal;
  font:400 19px/1.35 var(--display);font-style:italic;letter-spacing:0;text-transform:none;color:var(--accent-on-deep);
}
[data-welt="riviera"] .vergleich .kennung::before{display:none}
[data-welt="riviera"] .vergleich__hinweis p{font:400 16px/1.6 var(--body);color:var(--on-deep-2);max-width:var(--lesebreite)}

/* Heller Browserrahmen, vollständiger Screenshot, Naht und Griff in Terrakotta. */
[data-welt="riviera"] .seiten{font:400 17px/1 var(--display);font-style:italic;letter-spacing:.01em;text-transform:none;color:var(--on-deep-2);margin-bottom:12px}
[data-welt="riviera"] .bildschirm{border-radius:4px;box-shadow:0 18px 40px -22px rgb(74 48 20/.45)}
[data-welt="riviera"] .browserleiste{height:34px;background:#E7DCC9;border-radius:4px 4px 0 0;box-shadow:inset 0 0 0 1px rgb(43 33 25/.1)}
[data-welt="riviera"] .browserleiste i{background:#BCA98C}
[data-welt="riviera"] .browserleiste span{color:#5C4A38}
[data-welt="riviera"] .schirm{border-radius:0 0 4px 4px;background:var(--canvas-sunk)}
[data-welt="riviera"] .vergleich[data-geraet="phone"] .bildschirm .schirm{border-radius:26px;box-shadow:0 0 0 8px #E7DCC9,0 0 0 9px rgb(43 33 25/.16)}
[data-welt="riviera"] .griff{background:var(--terrakotta);box-shadow:0 0 0 5px rgb(180 83 42/.22),0 6px 16px -6px rgb(74 48 20/.5)}

/* Die drei Änderungen: Linienzeichen in Olive, Haarlinien in Olive. */
[data-welt="riviera"] .aenderungen{border-top:1px solid rgb(94 107 63/.35)}
[data-welt="riviera"] .aenderungen li{grid-template-columns:30px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid rgb(94 107 63/.35);font-size:18px;align-items:start}
[data-welt="riviera"] .aend__mal{color:var(--olive)}
[data-welt="riviera"] .vergleich .btn--hell{background:var(--espresso);color:var(--leinen);border-radius:3px}
[data-welt="riviera"] .vergleich .btn--hell:hover{background:#3C2E22}
/* Meerblau, sparsam: die Adresse der Vollansicht und die Zeitangabe an der Naht. */
[data-welt="riviera"] .naht__hilfe{color:var(--meerblau)}
[data-welt="riviera"] .naht__hilfe i{background:var(--meerblau)}

/* --- Arbeiten: drei Postkarten --- */
/* §5.2: Studienfoto 4:5 auf Leinen, das Handy überlappt es unten rechts mit 38 Prozent Breite und
   trägt die dritte Tiefenstufe. Darunter Name in Cormorant 30px und Ergebnissatz in 17px.
   Versatz 0/64/32px. Überfahren: Foto 1.03, Handy hebt sich 8px. */
[data-welt="riviera"] .postkarten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--rinne);row-gap:clamp(32px,4vw,56px);align-items:start}
[data-welt="riviera"] .postkarte{display:grid;text-decoration:none;color:inherit;margin-top:calc(var(--v,0) * 1px)}
[data-welt="riviera"] .postkarte__bild{
  position:relative;display:block;padding:clamp(10px,1vw,14px);background:var(--panel);
  border-radius:3px;box-shadow:var(--e2),var(--lichtkante);
}
[data-welt="riviera"] .postkarte__rahmen{display:block;overflow:clip;border-radius:2px;aspect-ratio:4/5;background:var(--canvas-sunk)}
[data-welt="riviera"] .postkarte__foto{width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:transform var(--t-bedienung) var(--ease-out)}
[data-welt="riviera"] .postkarte__handy{
  position:absolute;right:6%;bottom:-18px;width:38%;z-index:2;
  background:#241C15;border-radius:15px;padding:4px;box-shadow:var(--e3);
  transition:transform var(--t-bedienung) var(--ease-out);
}
[data-welt="riviera"] .postkarte__handy img{display:block;width:100%;aspect-ratio:390/844;object-fit:cover;object-position:top;border-radius:12px}
[data-welt="riviera"] .postkarte__text{display:grid;gap:6px;padding:clamp(30px,3vw,42px) 2px 0}
[data-welt="riviera"] .postkarte__name{font:400 30px/1.15 var(--display);color:var(--ink)}
/* Der Ergebnissatz steht auf der Hintergrundebene, nicht auf Leinen. In Espresso hält er dort an der
   dunkelsten Stelle 4,69:1; die zweite Schriftfarbe der Welt käme nur auf 4,08:1. Der Unterschied zum
   Namen kommt deshalb aus Größe und Schriftart, nicht aus der Farbe. */
[data-welt="riviera"] .postkarte__satz{font:400 17px/1.5 var(--body);color:var(--ink)}
[data-welt="riviera"] .postkarte:hover .postkarte__foto{transform:scale(1.03)}
[data-welt="riviera"] .postkarte:hover .postkarte__handy{transform:translate3d(0,-8px,0)}
[data-welt="riviera"] .postkarte:hover .postkarte__name{text-decoration:underline;text-underline-offset:.16em;text-decoration-thickness:1px}

/* Tablet: zwei Spalten plus eine volle Zeile. Die volle Zeile stellt Foto und Text nebeneinander;
   ein 4:5-Foto über die ganze Breite wäre über tausend Pixel hoch, und die Zeile bliebe halb leer.
   Damit stehen die Postkarten auch bei 820px in ihrer Spalte statt in einem 330px-Streifen mit
   zweimal 207px leerem Rand. */
@media (max-width:1180px){
  [data-welt="riviera"] .postkarten{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-welt="riviera"] .postkarte{margin-top:0}
  [data-welt="riviera"] .postkarte:nth-child(2){margin-top:clamp(28px,5vw,56px)}
  /* Der Text steht auf der Grundlinie des Fotos, nicht in der Mitte der Spalte: sonst schwebt er
     in einer halb leeren Fläche. */
  [data-welt="riviera"] .postkarte:nth-child(3){grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(24px,4vw,48px);align-items:end}
  [data-welt="riviera"] .postkarte:nth-child(3) .postkarte__text{padding:0 0 clamp(4px,1vw,12px)}
}
@media (max-width:1024px){
  [data-welt="riviera"]{--band:max(52vh,360px)}
}
@media (max-width:720px){
  [data-welt="riviera"]{--band:max(44vh,320px)}
  [data-welt="riviera"] .vergleich{padding:clamp(24px,6vw,40px) clamp(18px,4.5vw,32px) clamp(28px,6vw,40px);
    box-shadow:inset 0 0 0 1px var(--terrakotta),inset 0 0 0 7px var(--leinen),inset 0 0 0 8px var(--terrakotta),0 24px 44px -26px rgb(74 48 20/.35)}
  [data-welt="riviera"] .reiter button{font-size:19px;padding:0 8px}
  [data-welt="riviera"] .postkarten{grid-template-columns:minmax(0,1fr);row-gap:clamp(40px,10vw,64px)}
  [data-welt="riviera"] .postkarte,[data-welt="riviera"] .postkarte:nth-child(2),[data-welt="riviera"] .postkarte:nth-child(3){
    margin-top:0;grid-column:auto;grid-template-columns:minmax(0,1fr);column-gap:0}
  [data-welt="riviera"] .postkarte:nth-child(3) .postkarte__text{padding-top:clamp(30px,8vw,42px)}
  [data-welt="riviera"] .postkarte__name{font-size:27px}
}
/* Ruhe: der Schimmer steht still, die Parallaxe schreibt site.js dann nicht mehr. */
@media (prefers-reduced-motion:reduce){
  [data-welt="riviera"] .vergleich::before{animation:none}
  [data-welt="riviera"] .reiter::after,[data-welt="riviera"] .postkarte__foto,[data-welt="riviera"] .postkarte__handy{transition:none}
}
.still [data-welt="riviera"] .vergleich::before{animation:none}
.still [data-welt="riviera"] .reiter::after,.still [data-welt="riviera"] .postkarte__foto,.still [data-welt="riviera"] .postkarte__handy{transition:none}

/* ---------- 8 Juwelier: Weißgold-Boutique. Die Leistungen stehen in Vitrinen ---------- */
/* Briefing v5 §5.3: Bodoni Moda, Satzschreibung. --grund-rgb ist die Grundfarbe der Welt und
   steht am Abschnitt, nicht an html: das Schwellenbild braucht sie auch in dem Augenblick,
   in dem es einläuft und noch die vorige Welt aktiv ist. */
[data-welt="juwelier"]{--display:"Bodoni Moda",Georgia,serif;--grund-rgb:245 243 240}
/* Die Welt beginnt mit dem Schwellenbild, oben bleibt deshalb kein Abstand. */
[data-welt="juwelier"] .h2{font-weight:400;font-size:clamp(44px,4.4vw,72px);line-height:1.06;letter-spacing:-.005em;color:var(--ink)}
/* Briefing v5 §4: Juwelier trägt kein Korn. Das Papierkorn geht mit dem Weltwechsel aus. */
body::before{transition:opacity var(--welt-t) var(--welt-kurve)}
html[data-aktiv="juwelier"] body::before{opacity:0}

/* Schwellenbild: der Ring steht im rechten Drittel, die Überschrift im ruhigen Marmor links.
   Ohne position:absolute wäre picture ein zweites Rasterfeld und schöbe die Überschrift
   aus dem unteren Rand des Bandes. */
/* .wrap trägt margin-inline:auto. Als Rasterfeld schrumpft es damit auf Inhaltsbreite und
   rückt in die Mitte; die Überschrift stünde dann nicht am Seitenrand der Seite. */
[data-welt="juwelier"] .schwelle .wrap{width:100%}
[data-welt="juwelier"] .schwelle h2{max-width:min(52%,17ch)}

/* Die Vitrinen. Kernvitrine in Smaragdsamt über die volle Breite, Bild in den Spalten 1 bis 5,
   darunter drei Glasvitrinen mit Bild oben und Text unten. Keine Trennlinien, keine Ziffern. */
[data-welt="juwelier"] .vitrinen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--rinne);row-gap:clamp(28px,3.4vw,48px);margin-top:clamp(56px,7vw,96px)}
/* Glas: eine helle Scheibe, innen oben eine Lichtkante, außen eine Haarlinie in Champagner,
   Radius 2px. Der Schatten ist warm getönt, nie grau. */
[data-welt="juwelier"] .vitrine{
  position:relative;isolation:isolate;overflow:hidden;border-radius:2px;
  display:grid;grid-template-rows:auto 1fr;
  background:linear-gradient(180deg,rgb(255 255 255/.78),rgb(255 255 255/.55)) #F5F3F0;
  box-shadow:inset 0 1px 0 rgb(255 255 255/.9),inset 0 0 0 1px rgb(185 155 95/.45),
             0 1px 0 rgb(0 0 0/.04),0 30px 50px -30px rgb(60 45 20/.28);
}
[data-welt="juwelier"] .vitrine--kern{
  grid-column:1/-1;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto;
  background:linear-gradient(158deg,#1A4436,#133A2E 62%) #133A2E;color:var(--on-deep);
}
[data-welt="juwelier"] .vitrine__bild{position:relative;overflow:hidden;aspect-ratio:4/5}
[data-welt="juwelier"] .vitrine__bild picture{position:absolute;inset:0;display:block}
[data-welt="juwelier"] .vitrine__bild img{width:100%;height:100%;object-fit:cover;object-position:var(--bild,50% 50%);transition:transform 1.2s var(--ease-out)}
[data-welt="juwelier"] .vitrine--kern .vitrine__bild{aspect-ratio:auto;min-height:clamp(300px,25vw,420px)}
[data-welt="juwelier"] .vitrine__text{padding:clamp(28px,2.6vw,36px)}
[data-welt="juwelier"] .vitrine--kern .vitrine__text{padding:clamp(32px,3.4vw,56px);align-self:center}

/* Drei Stufen statt einer Fläche: die Gravur nennt die Leistung, der Satz in Bodoni trägt sie,
   die ruhige Zeile erklärt sie. Gesperrte Versalien sind hier erlaubt, sie wirken wie graviert. */
[data-welt="juwelier"] .vitrine h3{font:500 15px/1.5 var(--display);text-transform:uppercase;letter-spacing:.16em;color:var(--accent-ink);margin:0 0 16px}
[data-welt="juwelier"] .vitrine--kern h3{color:var(--accent-on-deep);margin-bottom:20px}
[data-welt="juwelier"] .vitrine__satz{font:400 clamp(21px,1.75vw,26px)/1.28 var(--display);letter-spacing:-.005em;color:var(--ink);margin:0 0 14px;max-width:28ch}
[data-welt="juwelier"] .vitrine--kern .vitrine__satz{font-size:clamp(28px,2.9vw,42px);line-height:1.14;max-width:17ch;color:var(--on-deep);margin-bottom:18px}
[data-welt="juwelier"] .vitrine__ruhe{font:400 18px/1.6 var(--body);color:var(--ink-2);margin:0;max-width:34ch}
[data-welt="juwelier"] .vitrine--kern .vitrine__ruhe{color:var(--on-deep-2);max-width:40ch}

/* Signatur-Bewegung, die einzige in dieser Welt: ein Lichtstreif zieht schräg über jede Vitrine,
   sobald sie ins Bild kommt, 1,6 s lang und je Vitrine 120 ms später. Über dem Glas liegt ein
   schmaler Schatten neben dem hellen Kern, sonst bliebe Weiß auf Weiß unsichtbar. */
[data-welt="juwelier"] .vitrine__glanz{
  position:absolute;inset:0 -40%;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 36%,rgb(125 99 48/.09) 45%,rgb(255 255 255/.95) 50%,rgb(125 99 48/.09) 55%,transparent 64%);
}
[data-welt="juwelier"] .vitrine--kern .vitrine__glanz{background:linear-gradient(105deg,transparent 38%,rgb(255 255 255/.16) 50%,transparent 62%)}
.js [data-welt="juwelier"] .vitrine__glanz{opacity:1;transform:translateX(-120%);transition:transform 1.6s var(--ease-out) calc(var(--i,0) * 120ms)}
.js [data-welt="juwelier"] .vitrine.in .vitrine__glanz{transform:translateX(120%)}
/* Briefing v5 §4: sonst Ruhe. Die Klasse auf ist hier nur der Auslöser des Beobachters,
   das Einblenden und Hochschieben ist abgeschaltet. */
.js [data-welt="juwelier"] .vitrine.auf{opacity:1;transform:none;transition:none}
@media (hover:hover){
  [data-welt="juwelier"] .vitrine:hover .vitrine__bild img{transform:scale(1.03)}
}

/* Die ruhige Zeile unter den Vitrinen. Der Pfeil gehört nur an den Hauptknopf (§4), hier
   trägt der Link dieselbe Gravur wie die Leistungsnamen. */
[data-welt="juwelier"] .vitrinen__fuss{display:flex;justify-content:space-between;align-items:baseline;gap:14px 32px;flex-wrap:wrap;margin-top:clamp(30px,3.2vw,48px)}
[data-welt="juwelier"] .vitrinen__fuss p{font-size:18px;color:var(--ink-2)}
[data-welt="juwelier"] .gravur-link{
  font:500 15px/1.5 var(--display);text-transform:uppercase;letter-spacing:.16em;color:var(--accent-ink);
  text-decoration:none;padding-block:6px;border-bottom:1px solid rgb(185 155 95/.55);
  transition:color var(--t-bedienung) var(--ease-out),border-bottom-color var(--t-bedienung) var(--ease-out);
}
[data-welt="juwelier"] .gravur-link:hover{color:var(--ink);border-bottom-color:var(--accent)}

/* ---------- 9 Club: Barbier und Herrenclub. Der Ablauf als Preistafel ---------- */
/* Briefing v5 §5.4: Big Shoulders Display 800 für Überschrift und Schrittnamen, Playfair kursiv für die
   Ergebnisse. Die Farben und --grund-rgb stehen am Abschnitt, nicht an html: der Verlauf des Schwellenbilds
   muss schon in Ebenholz auslaufen, bevor die Welt an der 60-Prozent-Linie umschaltet. Die Tiefenstufen
   folgen §4, nur mit Ebenholz statt Grau: auf dunklem Grund trägt ein blasser Schatten nichts. */
[data-welt="club"]{
  --display:"Big Shoulders Display","Schibsted Grotesk",sans-serif;--kursiv:"Playfair Display",Georgia,serif;
  --ebenholz:#0F0C0A;--elfenbein:#EDE3CF;--ochsenblut:#7A1F1F;--ochsenblut-schrift:#6B1A1A;--messing:#B38E55;
  --grund-rgb:15 12 10;--schwelle-schrift:#EDE3CF;--tafelabstand:clamp(56px,7vw,96px);
  --e2:0 1px 2px rgb(15 12 10/.5),0 14px 32px -14px rgb(15 12 10/.8);
  --e3:0 2px 6px rgb(15 12 10/.5),0 30px 60px -22px rgb(15 12 10/.75),0 90px 140px -60px rgb(15 12 10/.9);
}
[data-welt="club"] .h2{font-weight:800;text-transform:uppercase;font-size:clamp(48px,5vw,84px);line-height:1.02;letter-spacing:.015em}
[data-welt="club"] h3{font-weight:800;letter-spacing:.04em}
/* Briefing v5 §4: Club trägt 5 % Filmkorn, global sind es 3,5. */
html[data-aktiv="club"] body::before{opacity:.05}

/* Das Schwellenband trägt die echte Überschrift und darunter eine Messinglinie. Der Abschnitt beginnt
   deshalb ohne eigenen Abstand nach oben. Das Bild liegt absolut, damit es keine Rasterzeile belegt. */
section[data-welt="club"].prozess{padding-top:0}
[data-welt="club"] .schwelle{--bildpunkt:50% 46%}
[data-welt="club"] .schwelle .wrap{display:grid;justify-items:start;gap:clamp(16px,1.8vw,26px)}
[data-welt="club"] .messinglinie{width:min(100%,460px);height:2px;background:linear-gradient(90deg,#E7CF9A,var(--messing) 34%,rgb(179 142 85/0))}

/* Briefing v5 §5.4: Tafel in Spalte 1 bis 7, Foto C1 in Spalte 8 bis 12. Vorher war die Tafel auf rund
   1000px gedeckelt und stand linksbündig im 1336er Rahmen, rechts blieben 141 bis 453px leer. */
[data-welt="club"] .tafelraster{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--rinne);align-items:start;margin-top:var(--tafelabstand)}
[data-welt="club"] .tafelraster > .schritte{grid-column:1/8}
[data-welt="club"] .clubfoto{grid-column:8/13}
/* Das Band endet in vollem Ebenholz, die Hintergrundebene darunter zeigt die Vertäfelung wieder zu
   20 bis 45 %. Diese Stufe läuft im Abstand zwischen Band und Tafel aus, damit keine Kante steht. */
[data-welt="club"] .tafelraster::before{content:"";position:absolute;left:-50vw;right:-50vw;bottom:100%;height:var(--tafelabstand);
  background:linear-gradient(180deg,rgb(var(--grund-rgb)/1),rgb(var(--grund-rgb)/0));pointer-events:none}

/* Die Tafel: Elfenbein mit Papierkorn, Messingrahmen 1px, 8px Abstand, 1px. Die Ringe liegen 10px
   außerhalb des Kastens, deshalb rückt er 10px ein: der sichtbare Rahmen füllt die sieben Spalten
   und seine Oberkante liegt auf einer Höhe mit dem Rahmen des Fotos. */
section[data-welt="club"].prozess .schritte{
  grid-template-columns:1fr;gap:0;position:relative;margin:10px;max-width:none;border-radius:0;
  padding:clamp(28px,3.2vw,52px) clamp(24px,2.8vw,48px);
  color:var(--ebenholz);
  background:var(--elfenbein) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow:0 0 0 1px var(--messing),0 0 0 9px var(--ebenholz),0 0 0 10px var(--messing),var(--e3);
}
section[data-welt="club"].prozess .schritte__linie{display:none}
/* Jede Zeile: Marke, Schrittname, Punktlinie, Ergebnis wie ein Preis, darunter die Beschreibung. */
section[data-welt="club"].prozess .schritt{
  display:grid;grid-template-columns:34px auto minmax(20px,1fr) auto;column-gap:16px;row-gap:6px;
  padding:16px 0 18px;
}
section[data-welt="club"].prozess .schritt::before{display:none}
section[data-welt="club"].prozess .schritt h3{grid-area:1/2;font-size:26px;line-height:1.12;text-transform:uppercase;hyphens:manual;color:var(--ebenholz)}
section[data-welt="club"].prozess .schritt__punkte{grid-area:1/3;align-self:baseline;border-bottom:2px dotted rgb(15 12 10/.3)}
section[data-welt="club"].prozess .schritt__ergebnis{grid-area:1/4;align-self:baseline;font:italic 400 20px/1.2 var(--kursiv);color:var(--ochsenblut-schrift);white-space:nowrap}
section[data-welt="club"].prozess .schritt p{grid-area:2/2/3/5;font-size:16px;line-height:1.55;color:rgb(15 12 10/.75);max-width:var(--lesebreite)}

/* Messingmarke mit eingeprägter Nummer. Ohne Skript und bei ausgeschalteter Bewegung stehen alle
   Marken gefüllt, die Ziffer ist in beiden Zuständen Ebenholz. */
section[data-welt="club"].prozess .schritt__nr{
  grid-area:1/1;position:relative;align-self:start;margin-top:2px;overflow:hidden;isolation:isolate;
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font:700 12px/1 var(--body);letter-spacing:0;color:var(--ebenholz);
  box-shadow:inset 0 0 0 1px var(--messing);
}
section[data-welt="club"].prozess .schritt__nr::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#E7CF9A,#B38E55 45%,#7A5A2E);
  transition:opacity 400ms var(--ease-out);
}
/* Signatur-Bewegung der Welt: die Marke füllt sich mit kurzem Glanz, sobald ihre Zeile 60 % der
   Fensterhöhe erreicht (400 ms). Sonst bewegt sich hier nichts außer dem Barbierstab. */
.js section[data-welt="club"].prozess .schritt:not(.erreicht) .schritt__nr::before{opacity:0}
section[data-welt="club"].prozess .schritt__nr::after{content:"";position:absolute;inset:-40%;opacity:0;
  background:linear-gradient(100deg,rgb(255 255 255/0) 38%,rgb(255 255 255/.92) 50%,rgb(255 255 255/0) 62%)}
.js section[data-welt="club"].prozess .schritt.erreicht .schritt__nr::after{animation:club-glanz 400ms var(--ease-out)}
@keyframes club-glanz{from{opacity:0;transform:translate3d(-90%,0,0)}45%{opacity:1}to{opacity:0;transform:translate3d(90%,0,0)}}

/* Foto C1: sticky neben der Tafel, Rahmen 2px Messing, 8px Ebenholz, 1px Messing. Es wächst beim
   Durchscrollen der Tafel von 1 auf 1.06; --p schreibt site.js an den Abschnitt. */
[data-welt="club"] .clubfoto{
  position:sticky;top:calc(var(--kopf) + 32px);margin:0;padding:8px;
  height:min(760px,calc(100svh - var(--kopf) - 64px));
  border:2px solid var(--messing);background:var(--ebenholz);box-shadow:var(--e3);
}
[data-welt="club"] .clubfoto picture{display:block;height:100%;overflow:clip;border:1px solid rgb(179 142 85/.8)}
[data-welt="club"] .clubfoto img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;transform:scale(calc(1 + var(--p,0) * .06))}
/* Der Barbierstab an der linken Rahmenkante. Er ist der einzige Barbierstreifen dieser Welt.
   Ein Umlauf dauert 12 s; das Band läuft genau drei Streifenlängen weit, deshalb ist der Sprung
   am Ende unsichtbar, und es steht oben und unten weit genug über. */
[data-welt="club"] .clubfoto__stab{position:absolute;left:0;top:0;bottom:0;width:10px;overflow:clip;z-index:1}
[data-welt="club"] .clubfoto__stab i{position:absolute;left:0;right:0;top:-180px;bottom:-180px;
  background:repeating-linear-gradient(-45deg,#7A1F1F 0 8px,#EDE3CF 8px 16px,#0F0C0A 16px 24px);
  animation:club-stab 12s linear infinite}
@keyframes club-stab{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-101.82px,0)}}

/* Briefing v5 §5.4: bei abgeschalteter Bewegung stehen Stab, Glanz und Foto still. */
@media (prefers-reduced-motion:reduce){
  [data-welt="club"] .clubfoto__stab i,[data-welt="club"] .schritt__nr::after{animation:none}
  [data-welt="club"] .clubfoto img{transform:none}
  [data-welt="club"] .schritt__nr::before{transition:none}
}
.still [data-welt="club"] .clubfoto__stab i,.still [data-welt="club"] .schritt__nr::after{animation:none}
.still [data-welt="club"] .clubfoto img{transform:none}

/* ---------- 10 Skizze: Bleistift auf Papier ---------- */
[data-welt="skizze"]{--display:"Barlow Condensed","Schibsted Grotesk",sans-serif;--hand:"Caveat","Segoe Script","Bradley Hand",cursive}
[data-welt="skizze"] h2{font-weight:700;text-transform:uppercase;line-height:1.08;letter-spacing:0}
/* Briefing v5 §5.5: Barlow Condensed 700 in Versalien, H2 clamp(44px,4.6vw,76px). */
[data-welt="skizze"] .h2,[data-welt="skizze"] .schwelle h2{font-size:clamp(44px,4.6vw,76px)}
/* Überschriften massiv in Graphit mit Bleistiftkante (SVG-Filter). Der Bleistiftstrich darunter liegt
   auf ::after, damit er sich zeichnen kann, ohne den Text zu beschneiden. */
[data-welt="skizze"] .h2,[data-welt="skizze"] .schwelle h2{
  color:var(--ink);position:relative;padding-bottom:18px;filter:url(#bleistift);
}
[data-welt="skizze"] :is(.h2,.schwelle h2)::after{
  content:"";position:absolute;left:0;bottom:0;width:min(100%,420px);height:12px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M4,8 C60,4 120,11 180,6 C222,3 262,10 296,6' fill='none' stroke='%232E2E2E' stroke-opacity='.55' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M8,11 C70,8 130,13 190,9' fill='none' stroke='%232E2E2E' stroke-opacity='.3' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left bottom/100% 12px;
}
/* Das Schwellenband: die Gasse liegt mit 55 Prozent auf dem Rasterpapier, wie eine Vorzeichnung.
   Der Verlauf unten kommt aus site.css und endet in --grund-rgb. */
[data-welt="skizze"] .schwelle > picture{display:contents}
/* Das Band ist ein Gitter mit einer Spur; die Spur wuchs nur bis zur Textbreite der Überschrift, die
   stand dadurch mittig und nicht auf der Seitenkante (1440: linke Kante 165 statt 60). */
[data-welt="skizze"] .schwelle > .wrap{width:100%}
[data-welt="skizze"] .pfeil-link{border-bottom-width:2px}
/* Das Zeichenblatt: weißes Blatt auf dem Rasterpapier. Der Rahmen besteht aus vier Randstreifen mit
   fester Strichhöhe (40px), die nur in der Länge mitwachsen; ein hohes Blatt am Handy zieht die Striche
   so nicht in die Höhe. Die Streifen sind an je einer Ecke verankert, deshalb kann das Blatt sich in
   der Signatur-Bewegung von zwei Ecken aus selbst zeichnen.
   Fläche gegen Grund war 1,04:1 und ohne Schatten; jetzt trägt das Blatt --e2 aus §4 in Graphit. */
[data-welt="skizze"] .check{
  position:relative;isolation:auto;color:var(--on-deep);border-radius:2px;
  box-shadow:var(--e2);
  background-color:var(--buehne-deep);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 40' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%232E2E2E' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M0,15 C260,10 520,19 1000,12' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M8,24 C300,19 560,27 992,21' stroke-opacity='.35' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 40' preserveAspectRatio='none'%3E%3Cpath d='M0,26 C380,21 700,31 1000,24' fill='none' stroke='%232E2E2E' stroke-width='1.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 1000' preserveAspectRatio='none'%3E%3Cpath d='M14,0 C9,300 18,600 12,1000' fill='none' stroke='%232E2E2E' stroke-width='1.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 1000' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%232E2E2E' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M26,0 C31,200 22,600 27,1000' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M19,8 C23,300 16,700 21,992' stroke-opacity='.35' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");
  background-size:calc(100% - 20px) 40px,calc(100% - 20px) 40px,40px calc(100% - 16px),40px calc(100% - 16px);
  background-position:10px top,right 10px bottom,left top 8px,right bottom 8px;background-repeat:no-repeat;
}
/* Die Konstruktionslinien stehen an den Ecken über: zwei Blaustiftlinien, 10px über Kante. */
[data-welt="skizze"] .check::before{
  content:"";position:absolute;pointer-events:none;left:-10px;top:-10px;right:-10px;bottom:-10px;
  background:
    linear-gradient(90deg,var(--blaustift) 0 34px,transparent 34px) left 0 top 10px/100% 1px no-repeat,
    linear-gradient(90deg,transparent calc(100% - 34px),var(--blaustift) calc(100% - 34px)) left 0 bottom 10px/100% 1px no-repeat,
    linear-gradient(180deg,var(--blaustift) 0 34px,transparent 34px) left 10px top 0/1px 100% no-repeat,
    linear-gradient(180deg,transparent calc(100% - 34px),var(--blaustift) calc(100% - 34px)) right 10px top 0/1px 100% no-repeat;
}
/* Der schraffierte Schatten unten rechts bleibt. */
[data-welt="skizze"] .check::after{
  content:"";position:absolute;z-index:-1;left:14px;top:14px;right:-14px;bottom:-14px;
  background:repeating-linear-gradient(-45deg,rgba(46,46,46,.55) 0 1px,transparent 1px 5px);
}
/* Ab 961px zwei Spalten: links die Lede, unten in derselben Spalte das Schriftfeld, rechts das Formular.
   site.css stapelt .check__raster unter 1181px; hier gewinnt die Welt, weil beide Spalten Inhalt tragen.
   Unter 961px stapelt alles in Quellreihenfolge, dann fluchten alle rechten Kanten mit dem Blattrand. */
@media (min-width:961px){
  [data-welt="skizze"] .check__raster{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);grid-template-rows:auto minmax(0,1fr)}
  [data-welt="skizze"] .check__text{grid-column:1;grid-row:1}
  [data-welt="skizze"] .check__formular{grid-column:2;grid-row:1 / span 2}
  [data-welt="skizze"] .schriftfeld{grid-column:1;grid-row:2;align-self:end}
}
/* Gestapelt fluchten Lede, Formular und Schriftfeld an derselben rechten Kante. Das Maß gibt die Lede
   mit 66 Zeichen vor; bis 820px ist das Blatt schmaler als 66 Zeichen, dann gilt die Blattbreite.
   Vorher endeten hier drei Blöcke bei 490, 642 und 749 Pixeln. */
@media (max-width:960px){
  [data-welt="skizze"] .check__raster{max-width:66ch}
  [data-welt="skizze"] .check .lede{max-width:none}
}
/* Im Zeichenblatt sind die Linien des Schriftfelds Bleistiftstriche, keine helle Kante. */
[data-welt="skizze"] .schriftfeld{--sf-linie:rgba(46,46,46,.5)}
/* Die Rotstift-Notiz am Absendeknopf, mit gezeichnetem Pfeil. Unter 721px entfällt sie (§5.5). */
[data-welt="skizze"] .formular__senden{position:relative;display:grid;justify-items:start;gap:6px}
[data-welt="skizze"] .check__notiz{
  font:600 21px/1.15 var(--hand);color:var(--rotstift);transform:rotate(-1.5deg);transform-origin:left center;
  padding-right:54px;position:relative;
}
[data-welt="skizze"] .check__notiz::after{
  content:"";position:absolute;right:0;top:4px;width:48px;height:40px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 60'%3E%3Cpath d='M6,10 C34,8 58,18 72,40' fill='none' stroke='%23B8322A' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M57,36 L75,43 L69,25' fill='none' stroke='%23B8322A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
/* Felder nach §5.5: 1,5px Graphitrand, Radius 2px, Beschriftung darüber in Public Sans 15px/600. */
[data-welt="skizze"] .check .feld label{font:600 15px/1.35 var(--body)}
[data-welt="skizze"] .check__stempel{font:600 16px/1 var(--hand);letter-spacing:0;text-transform:none;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);transform:rotate(2deg);padding:9px 14px}
[data-welt="skizze"] .check__stempel::before{background:var(--ink)}
/* Abnahme 19.09. (K5, K4): Feldbeschriftungen, der Zusatz „(freiwillig)“ und der Einwilligungssatz standen in Caveat,
   die Hilfstexte daneben in Public Sans. Im Formular steht jetzt alles, was gelesen und unterschrieben wird, in
   Public Sans; die Handschrift bleibt Kicker, Überschrift und Stempel. */
[data-welt="skizze"] .check .feld label{color:var(--on-deep)}
[data-welt="skizze"] .check .feld input{border-width:1.5px;border-radius:2px;box-shadow:inset 0 0 0 1px transparent,0 0 0 1px transparent}
[data-welt="skizze"] .check .feld input:focus{box-shadow:0 0 0 3px var(--fokus-deep)}
[data-welt="skizze"] .check .feld input:hover,[data-welt="skizze"] .check .feld input:focus{border-color:var(--on-deep)}
[data-welt="skizze"] .check .zustimmung input{border-radius:2px}
[data-welt="skizze"] .check .btn--hell{border-radius:2px;box-shadow:inset 0 0 0 2px var(--on-deep);outline:1px solid var(--on-deep);outline-offset:3px}
[data-welt="skizze"] .check .btn--hell:focus-visible{outline:3px solid var(--fokus-deep);outline-offset:5px}
/* Über mich: ein weißes Blatt mit gezeichnetem Rahmen, darauf die Porträtskizze mit Schraffur.
   Der Rahmen liegt als Maske in --ink auf einem zweiten Pseudoelement (gleiche Randstreifen wie beim Check) und folgt so
   der Welt: im Pixel-Moment hell auf Violett statt Graphit. Die Skizze steht oben am Kicker, nicht in der Spaltenmitte. */
[data-welt="skizze"] .ich{align-items:start}
[data-welt="skizze"] .ich::before{left:var(--gut);right:var(--gut);box-shadow:var(--e2);border-radius:2px;background:var(--stage)}
[data-welt="skizze"] .ich::after{
  content:"";position:absolute;z-index:-1;left:var(--gut);right:var(--gut);top:0;bottom:0;pointer-events:none;background:var(--ink);
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 40' preserveAspectRatio='none'%3E%3Cpath d='M0,15 C260,10 520,19 1000,12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 40' preserveAspectRatio='none'%3E%3Cpath d='M0,26 C380,21 700,31 1000,24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 1000' preserveAspectRatio='none'%3E%3Cpath d='M14,0 C9,300 18,600 12,1000' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 1000' preserveAspectRatio='none'%3E%3Cpath d='M26,0 C31,200 22,600 27,1000' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 40' preserveAspectRatio='none'%3E%3Cpath d='M0,15 C260,10 520,19 1000,12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 40' preserveAspectRatio='none'%3E%3Cpath d='M0,26 C380,21 700,31 1000,24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 1000' preserveAspectRatio='none'%3E%3Cpath d='M14,0 C9,300 18,600 12,1000' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 1000' preserveAspectRatio='none'%3E%3Cpath d='M26,0 C31,200 22,600 27,1000' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  -webkit-mask-size:calc(100% - 20px) 40px,calc(100% - 20px) 40px,40px calc(100% - 16px),40px calc(100% - 16px);mask-size:calc(100% - 20px) 40px,calc(100% - 20px) 40px,40px calc(100% - 16px),40px calc(100% - 16px);
  -webkit-mask-position:10px top,right 10px bottom,left top 8px,right bottom 8px;mask-position:10px top,right 10px bottom,left top 8px,right bottom 8px;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
[data-welt="skizze"] .ich > div:last-child{max-width:640px;padding-right:clamp(16px,2.5vw,40px)}
/* Briefing v5 §5.5: Auf dem Porträtplatz steht S2, der Zeichentisch, im Format 4:5 und im selben
   Blattrahmen, den später das Foto bekommt. Der gezeichnete Rahmen liegt als Maske in --ink darüber. */
[data-welt="skizze"] .portrait{
  max-width:420px;margin-left:clamp(24px,4vw,56px);border-radius:2px;
  background:var(--panel);box-shadow:var(--e2);
}
[data-welt="skizze"] .portrait--zeichnung > picture{display:contents}
[data-welt="skizze"] .portrait--zeichnung img{width:100%;height:100%;object-fit:cover;border-radius:2px}
[data-welt="skizze"] .portrait::after{
  content:"";position:absolute;inset:0;pointer-events:none;background:var(--ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 260' preserveAspectRatio='none'%3E%3Cpath d='M7,9 C62,4 138,11 193,6 C197,72 189,140 194,252 C132,257 68,249 8,255 C4,182 10,88 7,9 Z' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 260' preserveAspectRatio='none'%3E%3Cpath d='M7,9 C62,4 138,11 193,6 C197,72 189,140 194,252 C132,257 68,249 8,255 C4,182 10,88 7,9 Z' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
/* Abnahme 19.09. (K2): Der Porträtplatz sagt nicht mehr selbst, dass die Seite unfertig ist; er zeigt in jeder Welt die LP-Fläche. */
[data-welt="skizze"] .ich__name b{color:var(--ink)}
/* Weniger leeres Papier über dem Blatt. */
section[data-welt="skizze"]#ueber-mich{padding-top:calc(var(--sect) * .45)}
/* Das Schwellenband fährt oben ohne Abstand ins Fenster. */
section[data-welt="skizze"]#check{padding-top:0}
/* §4: Pro Welt genau eine Signatur-Bewegung. Das globale Einblenden-und-Hochschieben aus site.css
   ist in dieser Welt abgeschaltet, sonst käme es zu jedem Zeichnen noch ein Auftritt dazu. */
.js [data-welt="skizze"] .auf{opacity:1;transform:none;transition:none}

/* Signatur-Bewegung: alles Gezeichnete zeichnet sich einmal selbst.
   Die vier Randstreifen der beiden Blätter wachsen aus zwei Ecken heraus, die Unterstreichungen laufen
   von links durch, der Pfeil des Rotstifts danach. Zuletzt blendet die Schraffur ein. */
.js [data-welt="skizze"] .check.auf{
  background-size:0 40px,0 40px,40px 0,40px 0;
  transition:background-size 1.1s var(--ease-inout);
}
.js [data-welt="skizze"] .check.auf.in{background-size:calc(100% - 20px) 40px,calc(100% - 20px) 40px,40px calc(100% - 16px),40px calc(100% - 16px)}
.js [data-welt="skizze"] .check.auf::before{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease-inout)}
.js [data-welt="skizze"] .check.auf.in::before{clip-path:inset(0)}
/* Das Blatt von Über mich hat keine eigene Auftrittsklasse; es hängt an der Zeichnung darin. */
.js [data-welt="skizze"] .ich::after{
  -webkit-mask-size:0 40px,0 40px,40px 0,40px 0;mask-size:0 40px,0 40px,40px 0,40px 0;
  transition:-webkit-mask-size 1.1s var(--ease-inout),mask-size 1.1s var(--ease-inout);
}
.js [data-welt="skizze"] .ich:has(.portrait.in)::after{
  -webkit-mask-size:calc(100% - 20px) 40px,calc(100% - 20px) 40px,40px calc(100% - 16px),40px calc(100% - 16px);
  mask-size:calc(100% - 20px) 40px,calc(100% - 20px) 40px,40px calc(100% - 16px),40px calc(100% - 16px);
}
.js [data-welt="skizze"] .h2.auf::after,.js [data-welt="skizze"] .schwelle h2::after{clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--ease-inout) .1s}
.js [data-welt="skizze"] .h2.auf.in::after{clip-path:inset(0)}
/* Das Schwellenband trägt keine Auftrittsklasse: es zeichnet, sobald die Welt umschaltet, und das ist
   genau der Augenblick, in dem das Band ins Fenster fährt. */
html.js[data-aktiv="skizze"] [data-welt="skizze"] .schwelle h2::after{clip-path:inset(0)}
.js [data-welt="skizze"] .check.auf .check__notiz::after{clip-path:inset(0 100% 0 0);transition:clip-path .9s var(--ease-inout) .9s}
.js [data-welt="skizze"] .check.auf.in .check__notiz::after{clip-path:inset(0)}
.js [data-welt="skizze"] .check.auf::after{opacity:0;transition:opacity .6s var(--ease) 1.1s}
.js [data-welt="skizze"] .check.auf.in::after{opacity:1}

/* ---------- 12 Tiefblau: Schluss im Lichtraum ---------- */
[data-welt="wald"] .h2{letter-spacing:-.04em}

/* Briefing v5 §5.7: die Videoschleife liegt hinter dem Schlussabschnitt, nicht fixiert und nicht hinter der
   Fußzeile. Sie endet mit dem Abschnitt, deshalb steckt sie im Abschnitt und nicht auf der festen Ebene.
   Unter dem Video liegt immer das Standbild: fehlt das Video (reduzierte Bewegung, Save-Data, Fehler,
   Format nicht abspielbar), bleibt einfach das Bild stehen, ohne dass irgendeine Weiche greifen muss. */
.schluss__raum{position:absolute;inset:0;z-index:-1;overflow:clip;background:#07140E;pointer-events:none}
.schluss__raum img,.schluss__raum video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;border:0}
.schluss__raum video{opacity:0;transition:opacity var(--t-auftritt) var(--ease-out)}
.schluss__raum video.laeuft{opacity:1}
/* Vignette: nach außen in Mitternacht, oben und unten ein Saum. Der Saum unten trägt das Band bis zur
   Fußzeile, damit die Fahrt nicht an einer Kante abbricht. */
.schluss__raum::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgb(7 20 14/.55),rgb(7 20 14/0) 20%,rgb(7 20 14/0) 56%,rgb(7 20 14/.86) 92%,rgb(7 20 14/1)),
    radial-gradient(118% 88% at 50% 44%,rgb(7 20 14/0) 28%,rgb(7 20 14/.58) 70%,rgb(7 20 14/.92))}

/* Der Schlussabschnitt ist mindestens ein Bildschirm hoch, der Inhalt steht in seiner Mitte.
   Die Luft verteilt sich 5 zu 1 nach oben: oben schaut der Korridor in die Tiefe, unten bleibt das
   Band zur Fußzeile kurz. Genau dieses Band war der beanstandete blaue Streifen ohne einen Buchstaben. */
[data-welt="wald"].schluss{
  position:relative;isolation:isolate;
  min-height:100svh;display:grid;padding-block:0;
  grid-template-rows:minmax(clamp(72px,8vw,120px),5fr) auto minmax(clamp(16px,1.6vw,24px),1fr);
}
[data-welt="wald"].schluss > .wrap{grid-row:2}

/* Die Glasbühne: 1200px, die Fläche lässt das Video gedämpft durchscheinen. Kein Weichzeichner mehr,
   denn ein backdrop-filter über einem laufenden Video wird je Bild neu gerechnet; die Fläche bei
   90 Prozent hält auch über den hellsten Linien des Films 12,6:1 für den Text. */
[data-welt="wald"] .schluss__buehne{
  max-width:1200px;margin-inline:auto;
  padding:clamp(44px,4.6vw,68px) clamp(24px,4vw,56px) clamp(36px,3.6vw,52px);
  background:rgb(13 37 24/.9);
  box-shadow:inset 0 1px 0 rgb(220 232 221/.24),inset 0 0 0 1px rgb(125 214 160/.16),0 70px 110px -60px rgb(2 5 14/.9);
}
/* Die Karte füllt ihre Spalte bis unten aus, sonst blieb unter ihr die leere Ecke stehen. */
[data-welt="wald"] .schluss__oben{margin-bottom:clamp(44px,4.8vw,72px)}
[data-welt="wald"] .schluss__oben .schluss__check{align-self:stretch;align-content:center}
[data-welt="wald"] .schluss__check{background:rgb(23 58 37/.82);box-shadow:inset 0 1px 0 rgb(220 232 221/.18),inset 0 0 0 1px rgb(125 214 160/.2)}
/* Drei Spalten, alle drei tragen Inhalt. Vorher füllte die Zeile 43 Prozent ihrer Breite. */
[data-welt="wald"] .schluss__kontakt{grid-template-columns:repeat(3,minmax(0,1fr));border-top-color:rgb(125 214 160/.16)}
[data-welt="wald"] .btn--hell{box-shadow:0 0 0 1px rgb(125 214 160/.3),0 0 30px -6px rgb(46 158 99/.45)}
[data-welt="wald"].schluss .lede{text-wrap:balance}

/* Die alte Fassung im Schlusssatz trug #8A877F und #4A6BD8, zwei Farben der Welt Papier. Hier stehen
   Weißblau gedämpft und ein aufgehelltes Kobalt: die Linie hält 3,2:1 auf der Glasbühne, die Schrift 6,2:1. */
[data-welt="wald"] .satz__alt{color:#8AA592;text-decoration-color:#2E9E63}

/* Briefing v5 §5.7: der Fuß steht ruhig in Mitternacht, ohne Leuchtfleck, Haarlinien Eisblau 12 Prozent.
   Sein Abstand nach oben ist kurz, weil das Band darüber schon aus dem Film kommt. */
html[data-aktiv="wald"] .fuss{padding-block:clamp(28px,2.8vw,40px) 40px}
html[data-aktiv="wald"] .fuss__unten{margin-top:clamp(36px,3.6vw,52px);border-top-color:rgb(138 216 255/.12)}

@media (max-width:960px){
  /* Zwei Spalten, der Ort nimmt die ganze Zeile: keine halb leere Reihe. */
  [data-welt="wald"] .schluss__kontakt{grid-template-columns:1fr 1fr}
  [data-welt="wald"] .schluss__kontakt > div:last-child{grid-column:1/-1}
}
@media (max-width:720px){
  [data-welt="wald"] .schluss__kontakt{grid-template-columns:1fr}
}

/* ---------- 13 Handy und Tablet ---------- */
@media (max-width:1180px){
  [data-welt="skizze"] .ich > div:last-child{padding-inline:clamp(16px,4vw,28px)}
  [data-welt="skizze"] .ich::before{top:0}
  [data-welt="skizze"] .ich{padding-block:clamp(28px,6vw,48px)}
  [data-welt="skizze"] .portrait{margin-left:clamp(12px,3vw,24px);max-width:300px}
  /* Briefing v5 §5.4, Tablet: das Foto steht als 16:9-Band über der Tafel und nicht mehr sticky,
     die Tafel läuft über die volle Breite. Keine Zeile bleibt halb leer. */
  [data-welt="club"] .tafelraster{grid-template-columns:1fr;gap:clamp(28px,4vw,48px)}
  [data-welt="club"] .tafelraster > .schritte{grid-column:auto}
  [data-welt="club"] .clubfoto{grid-column:auto;order:-1;position:relative;top:auto;height:auto;aspect-ratio:16/9}
  [data-welt="club"] .clubfoto img{object-position:50% 34%}
  [data-welt="juwelier"] .vitrinen{grid-template-columns:minmax(0,1fr)}
  [data-welt="juwelier"] .vitrine--kern{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto}
  [data-welt="juwelier"] .vitrine--kern .vitrine__bild{aspect-ratio:16/9;min-height:0}
  [data-welt="juwelier"] .vitrine:not(.vitrine--kern){grid-template-columns:minmax(0,40fr) minmax(0,60fr);grid-template-rows:auto}
  [data-welt="juwelier"] .vitrine:not(.vitrine--kern) .vitrine__bild{aspect-ratio:auto;min-height:clamp(230px,27vw,320px)}
  [data-welt="juwelier"] .schwelle h2{max-width:min(62%,15ch)}
}
@media (max-width:720px){
  /* Briefing v5 §5.4, Handy: Foto 4:3, keine Punktlinie, das Ergebnis steht unter dem Schrittnamen. */
  [data-welt="club"] .clubfoto{aspect-ratio:4/3}
  section[data-welt="club"].prozess .schritt{grid-template-columns:34px minmax(0,1fr);row-gap:4px}
  section[data-welt="club"].prozess .schritt h3{font-size:22px}
  section[data-welt="club"].prozess .schritt__punkte{display:none}
  section[data-welt="club"].prozess .schritt__ergebnis{grid-area:2/2;white-space:normal}
  section[data-welt="club"].prozess .schritt p{grid-area:3/2/4/3;hyphens:auto;-webkit-hyphens:auto}
  section[data-welt="club"].prozess .schritte{margin-inline:6px;padding:clamp(22px,5vw,30px) clamp(16px,4vw,24px);box-shadow:0 0 0 1px var(--messing),0 0 0 5px var(--ebenholz),0 0 0 6px var(--messing)}
  [data-welt="juwelier"] .vitrine:not(.vitrine--kern){grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto}
  [data-welt="juwelier"] .vitrine:not(.vitrine--kern) .vitrine__bild{aspect-ratio:4/5;min-height:0}
  [data-welt="juwelier"] .vitrine--kern .vitrine__bild{min-height:0}
  [data-welt="juwelier"] .schwelle h2{max-width:none}
  html[data-aktiv]{--r-stage:26px}
  html[data-aktiv="riviera"]{--r-stage:4px}
  html[data-aktiv="juwelier"]{--r-stage:2px}
  html[data-aktiv="club"]{--r-stage:2px}
  html[data-aktiv="skizze"]{--r-stage:2px}
  html[data-aktiv="wald"]{--r-stage:16px}
  /* Audit 19.09.: Am Handy ist die Heldenzeile clamp(25px, 10vw - 8px, 54px), also klein, weil ihre fünf Zeilen nicht
  /* Die Bühnen-Headline hat am Handy 44px (Regelwerk Schrift), die Riviera-Serife folgt ihr. */
  /* §5.5: Über mich einspaltig mit der Zeichnung oben, höchstens 360px breit. Der linke Rand ist
     derselbe wie der des Textes darunter, sonst stehen Zeichnung und Text auf zwei Kanten. */
  [data-welt="skizze"] .portrait{max-width:min(360px,calc(100% - 2 * clamp(16px,4vw,28px)));margin-left:clamp(16px,4vw,28px)}
  [data-welt="skizze"] .ich{grid-template-columns:minmax(0,1fr)}
  /* §5.5: Die Randnotiz entfällt unter 720px, mit ihr der Pfeil. */
  [data-welt="skizze"] .check__notiz{display:none}
  [data-welt="skizze"] .check::after{left:10px;top:10px;right:-10px;bottom:-10px}
  [data-welt="skizze"] .check::before{left:-6px;top:-6px;right:-6px;bottom:-6px}
}
@media (max-width:359px){
  /* Bei 320px bleibt für die Gravur „Webdesign und Entwicklung“ wenig Platz. Sie rückt enger
     zusammen; das weiche Trennzeichen im Markup fängt Ersatzschriften ab. */
  [data-welt="juwelier"] .vitrine h3{letter-spacing:.1em;hyphens:manual;-webkit-hyphens:manual}
  [data-welt="juwelier"] .vitrine__text{padding:22px 20px 26px}
}

/* ---------- 14 Ruhe: reduzierte Bewegung und Welt beim Laden ---------- */
@media (prefers-reduced-motion:reduce){
  /* Briefing v5 §2: der Wechsel bleibt sichtbar, aber kurz und ohne Skalierung. */
  html[data-aktiv]{transition-duration:.2s !important}
  .welt{transition:opacity .2s linear !important;transform:none !important}
  .welt{transform:none}
  .js [data-welt="skizze"] .check.auf{background-size:calc(100% - 20px) 40px,calc(100% - 20px) 40px,40px calc(100% - 16px),40px calc(100% - 16px)}
  .js [data-welt="skizze"] .ich::after{-webkit-mask-size:calc(100% - 20px) 40px,calc(100% - 20px) 40px,40px calc(100% - 16px),40px calc(100% - 16px);mask-size:calc(100% - 20px) 40px,calc(100% - 20px) 40px,40px calc(100% - 16px),40px calc(100% - 16px)}
  .js [data-welt="skizze"] .h2.auf::after,.js [data-welt="skizze"] .schwelle h2::after,
  .js [data-welt="skizze"] .check.auf::before,.js [data-welt="skizze"] .check.auf .check__notiz::after{clip-path:none}
  .js [data-welt="skizze"] .check.auf::after{opacity:1}
  [data-welt="juwelier"] .vitrine__glanz{display:none}
  [data-welt="juwelier"] .vitrine__bild img{transition:none !important;transform:none !important}
  .schluss__raum video{display:none}
}
.still [data-welt="skizze"] .check.auf,.still [data-welt="skizze"] .check.auf::before,.still [data-welt="skizze"] .ich::after,
.still [data-welt="skizze"] .h2.auf::after,.still [data-welt="skizze"] .schwelle h2::after,
.still [data-welt="skizze"] .check.auf .check__notiz::after{transition:none !important}
.still [data-welt="skizze"] .check.auf{background-size:calc(100% - 20px) 40px,calc(100% - 20px) 40px,40px calc(100% - 16px),40px calc(100% - 16px) !important}
.still [data-welt="skizze"] .ich::after{-webkit-mask-size:calc(100% - 20px) 40px,calc(100% - 20px) 40px,40px calc(100% - 16px),40px calc(100% - 16px) !important;mask-size:calc(100% - 20px) 40px,calc(100% - 20px) 40px,40px calc(100% - 16px),40px calc(100% - 16px) !important}
.still [data-welt="skizze"] .h2.auf::after,.still [data-welt="skizze"] .schwelle h2::after,
.still [data-welt="skizze"] .check.auf::before,.still [data-welt="skizze"] .check.auf .check__notiz::after{clip-path:none !important}
.still [data-welt="skizze"] .check.auf::after{opacity:1 !important}
.still [data-welt="juwelier"] .vitrine__glanz{display:none}
.still [data-welt="juwelier"] .vitrine__bild img{transition:none !important;transform:none !important}
.still .welt{transform:none}
.still .schluss__raum video{display:none}


/* ---------- Welt Automotive ---------- */
/* Der Wagen ist das eine große Element. Alles andere ordnet sich unter: die Überschrift steht
   klein darüber, die Messpunkte sitzen auf dem Blech, die Tafel öffnet in den dunklen Raum
   daneben. Kein zweites Motiv, keine Partikel, kein Leuchten ohne Anlass. */
[data-welt="auto"]{
  --grund-rgb:5 6 7;
  --display:"Barlow Condensed","Schibsted Grotesk",system-ui,sans-serif;
  --blau:#1687E8;--eis:#B9E5FF;
}
[data-welt="auto"] h2,[data-welt="auto"] .h2{font-weight:700;text-transform:uppercase;letter-spacing:.005em;line-height:.96}
[data-welt="auto"] h3{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.02em}

/* Die feste Ebene: eine Halle, kein Foto. Das Licht kommt von oben links und fällt zum Rand ab. */
.welt--auto{background:
  radial-gradient(120% 92% at 30% 20%,rgba(11,32,52,.85),rgba(5,6,7,0) 62%),
  radial-gradient(92% 70% at 74% 94%,rgba(7,26,43,.6),rgba(5,6,7,0) 70%),
  #050607}

/* Ein Standbild. Die Szene hat keinen eigenen Weg mehr und die Bühne bleibt nicht stehen:
   sie läuft im normalen Fluss mit. Alle sechs Messpunkte stehen von Anfang an auf dem Blech
   und sind sofort anklickbar. --p gibt es nicht mehr, und damit auch keine Messung bei
   jedem Scrollschritt. */
.autoszene{position:relative}
/* Genau eine Spalte. Ohne sie legt die automatische Platzierung für jede weitere Tafel in
   Reihe 2 ein neues Feld daneben an, und die Bühne wird doppelt so breit wie das Fenster. */
.autoszene__buehne{min-height:min(86svh,820px);display:grid;
  grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;
  align-items:center;overflow:clip;isolation:isolate;
  padding-block:clamp(10px,2vh,28px)}

/* Ein stehender Lichtkegel über dem Wagen und ein flacher Bodenstreifen, auf dem seine
   Spiegelung sitzt. Beide bewegen sich nicht. */
.autoszene__licht{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 56% at 46% 47%,rgba(22,135,232,.17),rgba(5,6,7,0) 68%)}
.autoszene__boden{position:absolute;left:0;right:0;bottom:0;height:32%;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,6,7,0),rgba(9,22,36,.6))}

.autoszene__kopf{grid-area:1/1;justify-self:center;text-align:center;max-width:min(92vw,760px);z-index:2}
.autoszene__kopf .kennung{margin-bottom:10px}
.autoszene__kopf h2{font-size:clamp(28px,4.4vw,60px);color:var(--ink)}
.autoszene__kopf p{margin:10px auto 0;font-size:clamp(15px,1.2vw,17px);color:var(--ink-2);max-width:56ch}

/* Der Wagen. Das Bild bringt seinen eigenen dunklen Raum mit und steht deshalb ohne Rahmen
   und ohne Kante im Grund der Welt. */
/* Der Kasten trägt das Seitenverhältnis des Bildes. Nur so decken sich Kasten und Bild,
   und nur dann sitzen die Messpunkte, die in Prozent dieses Kastens stehen, auf dem Blech. */
.autoszene__wagen{grid-area:2/1;position:relative;margin:0;justify-self:center;align-self:center;
  width:min(100%,1300px);aspect-ratio:1344/576;max-height:100%}
.autoszene__wagen picture{display:contents}
/* Die Kanten des Bildes lösen sich in den Grund der Welt auf. Ohne das setzt das Bild oben
   mit einer sichtbaren waagerechten Linie an, weil sein eigenes Schwarz ein anderes ist als
   das der Seite. Zwei Verläufe, in der Schnittmenge: einer für oben und unten, einer für
   links und rechts. */
.autoszene__wagen img{width:100%;height:100%;object-fit:contain;display:block;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 92%,transparent 100%),
    linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 92%,transparent 100%),
    linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}

/* Die Messpunkte. Ein Punkt, ein Ring, eine Beschriftung. Kein Puls, kein Pluszeichen. */
.autoszene__punkte{position:absolute;inset:0;pointer-events:none;z-index:2}
.punkt{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  pointer-events:auto;appearance:none;background:none;border:0;padding:0;cursor:pointer;
  width:46px;height:46px;display:grid;place-items:center}
.punkt::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--eis);
  box-shadow:0 0 0 1px rgba(185,229,255,.55),0 0 14px 2px rgba(22,135,232,.5);
  transition:transform var(--t-mikro) var(--ease),box-shadow var(--t-mikro) var(--ease),background var(--t-mikro) var(--ease)}
/* Der Ring ist das Zeichen, dass hier etwas anzuklicken ist. Er steht ruhig da und wird
   beim Zeigen hell; ohne ihn sähe der Punkt aus wie ein Reflex auf dem Lack. */
.punkt::after{content:"";position:absolute;inset:10px;border:1px solid rgba(185,229,255,.3);
  border-radius:50%;opacity:.45;transform:scale(.86);
  transition:opacity var(--t-bedienung) var(--ease),transform var(--t-bedienung) var(--ease)}
.punkt:hover::before,.punkt:focus-visible::before{transform:scale(1.4);
  box-shadow:0 0 0 1px var(--eis),0 0 22px 5px rgba(22,135,232,.75)}
.punkt:hover::after,.punkt:focus-visible::after,.punkt[aria-expanded="true"]::after{opacity:1;transform:scale(1)}
.punkt[aria-expanded="true"]::before{background:var(--blau);box-shadow:0 0 0 1px var(--eis),0 0 26px 7px rgba(22,135,232,.85)}
.punkt__name{position:absolute;left:28px;top:50%;transform:translateY(-50%);white-space:nowrap;
  font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--eis);
  background:rgba(5,6,7,.78);padding:5px 9px;opacity:0;pointer-events:none;
  transition:opacity var(--t-mikro) var(--ease)}
.punkt--links .punkt__name{left:auto;right:28px}
.punkt:hover .punkt__name,.punkt:focus-visible .punkt__name{opacity:1}

/* Die Tafel steht im dunklen Raum rechts und verdeckt den Wagen nicht. */
/* Unten rechts: dort liegt im Bild die Bodenspiegelung, der unwichtigste Teil der Szene.
   Die Front des Wagens, auf die es ankommt, bleibt in jedem Fall frei. */
.autoszene__tafel{grid-area:2/1;justify-self:end;align-self:end;z-index:3;
  width:min(92vw,352px);margin:0 clamp(0px,3vw,52px) clamp(4px,2vh,28px) 0;
  background:rgba(11,14,16,.94);border:1px solid var(--stage-line);border-left:2px solid var(--blau);
  padding:22px 22px 24px;opacity:0;visibility:hidden;transform:translate3d(16px,0,0);
  transition:opacity var(--t-bedienung) var(--ease),transform var(--t-bedienung) var(--ease),visibility 0s linear var(--t-bedienung)}
/* Solange die Tafel zu ist, fängt sie keine Klicks. Ohne das bliebe sie die 300
   Millisekunden ihrer Ausblendzeit über den beiden Messpunkten liegen, die unter ihr
   sitzen, und schluckte den nächsten Klick. */
.autoszene__tafel{pointer-events:none}
.autoszene__tafel[data-offen]{opacity:1;visibility:visible;transform:none;transition-delay:0s;pointer-events:auto}
.tafel__kopf{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  border-bottom:1px solid var(--stage-line);padding-bottom:10px;margin-bottom:18px}
.tafel__kopf h3{font-size:20px;color:var(--eis);margin:0}
.tafel__zu{appearance:none;background:none;border:0;color:var(--ink-3);cursor:pointer;
  font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:4px}
.tafel__zu:hover{color:var(--eis)}
.tafel__werte{display:grid;gap:15px;margin:0 0 16px}
.tafel__wert{display:grid;gap:3px}
.tafel__wert dt{font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.tafel__wert dd{margin:0;font:700 27px/1 var(--display);letter-spacing:.01em;color:var(--ink)}
.tafel__wert dd small{font:500 12px/1 var(--mono);letter-spacing:.08em;color:var(--ink-2);margin-left:7px}
.tafel__satz{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2)}

.autoszene__fuss{grid-area:3/1;justify-self:center;text-align:center;max-width:92vw;
  font:500 11px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* Ohne JavaScript gibt es nichts anzuklicken: die Punkte verschwinden, die Angaben stehen
   als Liste unter dem Wagen. */
html:not(.js) .autoszene__punkte{display:none}
html:not(.js) .autoszene__tafel{position:static;opacity:1;visibility:visible;transform:none;
  width:auto;margin:0;grid-row:3;justify-self:stretch}
html:not(.js) .tafel__zu{display:none}

/* Das Datenblatt in der Automotive-Welt. Die Schrift der Werte ist dieselbe wie in den
   Tafeln am Wagen: verdichtete Versalien, eisblau. Beim Zeigen fährt links ein blauer
   Strich hoch und ein flacher Schimmer läuft in die Zeile, sonst bewegt sich nichts. */
[data-welt="auto"] .datenblatt{border-top:1px solid var(--line)}
[data-welt="auto"] .datenblatt__leiste{border-bottom-color:var(--line-strong)}
[data-welt="auto"] .dbz{transition:background var(--t-bedienung) var(--ease)}
[data-welt="auto"] .dbz::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:2px;
  background:var(--blau);transform:scaleY(0);transform-origin:50% 0;
  transition:transform var(--t-bedienung) var(--ease)}
[data-welt="auto"] .dbz:hover{background:linear-gradient(90deg,rgba(22,135,232,.09),rgba(22,135,232,0) 52%)}
[data-welt="auto"] .dbz:hover::before{transform:scaleY(1)}
[data-welt="auto"] .dbz h3{font-family:var(--display);font-size:clamp(17px,1.4vw,21px);
  letter-spacing:.02em;color:var(--ink);margin:0 0 8px}
[data-welt="auto"] .dbz p{font-size:15px;line-height:1.6;color:var(--ink-2)}
[data-welt="auto"] .dbz__wert b{font:700 clamp(24px,2.2vw,34px)/1 var(--display);
  letter-spacing:.01em;color:var(--eis)}
[data-welt="auto"] .dbz__balken i{background:var(--line)}
[data-welt="auto"] .dbz__balken i::before{background:linear-gradient(90deg,var(--blau),var(--eis))}
@media (prefers-reduced-motion:reduce){[data-welt="auto"] .dbz::before{transition:none}}

@media (max-width:1024px){
  .autoszene__tafel{align-self:end;justify-self:center;margin:0 0 clamp(4px,2vh,24px);
    width:min(96%,540px);transform:translate3d(0,16px,0)}
  .autoszene__wagen{width:min(100%,900px)}
}
@media (max-width:720px){
  .autoszene__buehne{min-height:0;padding-block:clamp(18px,4vh,36px);
    grid-template-rows:auto auto auto auto;row-gap:18px}
  /* Am Handy steht die Tafel unter dem Wagen, nicht darüber: die Fläche ist zu klein,
     um beides gleichzeitig zu zeigen. */
  .autoszene__wagen{grid-area:2/1;width:100%;max-height:none}
  /* Gemessen bei 390 x 844: sechs geschlossene Tafeln im Fluss ließen 414 Pixel leeren
     Raum zwischen Wagen und Fußzeile stehen. Am Handy sind sie deshalb ganz weg,
     solange sie zu sind. Ohne JavaScript bleiben sie als Liste stehen. */
  .js .autoszene__tafel:not([data-offen]){display:none}
  .autoszene__tafel{grid-area:3/1;position:static;justify-self:stretch;margin:0}
  .autoszene__fuss{grid-area:4/1}
  .punkt{width:40px;height:40px}
  .punkt__name{display:none}
  .autoszene__tafel{width:100%;margin-top:16px;transform:none}
  .autoszene__kopf h2{font-size:clamp(26px,7.6vw,36px)}
  .autoszene__licht{background:radial-gradient(90% 46% at 50% 44%,rgba(22,135,232,.15),rgba(5,6,7,0) 70%)}
}