/* =========================================================================
   Don E Design – alle Seiten (Stufe 3)

   Richtung: Klavierlack-Grund, Licht und Layout wie „Glut“, alles
   scharfkantig. Mobile-first: Grundregeln gelten fürs Handy, größere
   Schirme kommen per min-width dazu.
   ========================================================================= */

/* ---------- Schriften, selbst gehostet (assets/schriften/) ----------
   Liegen auf dem eigenen Server statt bei Google: Beim Besuch geht keine
   Verbindung an fremde Server. Je Schrift zwei Teile: „latin“ (Deutsch,
   Englisch, Italienisch …) lädt immer, „latin-ext“ nur, wenn ein Text
   Zeichen daraus enthält (unicode-range). Quelle und Lizenz: README.md. */

@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/schriften/dm-serif-display-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/schriften/dm-serif-display-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "DM Serif Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/schriften/dm-serif-display-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "DM Serif Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/schriften/dm-serif-display-latin-ext-400-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Hanken Grotesk als variable Schrift: eine Datei für alle Stärken. */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/schriften/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/schriften/hanken-grotesk-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fraunces und Archivo: Schriften der Portal-Gestaltung (Startseite in
   Bordeaux, seit 03.10.2026). Beide unter SIL Open Font License, die
   Lizenztexte liegen neben den Dateien. Nur der Zeichensatz „latin“. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/schriften/fraunces-latin-opsz-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/schriften/fraunces-latin-opsz-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/assets/schriften/archivo-latin-wdth-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Source Serif 4 und IBM Plex Sans: Schriften der Welt Corporate
   („Geschäftsbericht“, seit 05.10.2026). Beide unter SIL Open Font License,
   die Lizenztexte liegen neben den Dateien. Nur der Zeichensatz „latin“.
   Der Browser lädt sie erst, wenn die Welt gewählt ist. */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/schriften/source-serif-4-latin-opsz-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/schriften/source-serif-4-latin-opsz-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("/assets/schriften/ibm-plex-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Design-Welten ----------
   Jede Welt ist ein Satz dieser Variablen; Aufbau und Bausteine bleiben
   überall gleich. Bordeaux ist der Hausstil und gilt ohne Angabe. Andere
   Welten setzt welt-vorbereitung.js als data-welt auf <html>, ihre Werte
   stehen weiter unten („Welt: …“). Dieselben Selektoren gelten auch für
   einzelne Elemente mit data-welt: Die Karten der Designauswahl und die
   Blende beim Wechsel zeigen so schon die Farben ihrer Welt.
   Jede Welt muss alle Variablen dieses Blocks setzen (abgeleitete Werte
   werden je Element berechnet, nicht vererbt). */

:root,
[data-welt="bordeaux"] {
  color-scheme: dark;

  /* Farben: Bordeaux-Lack mit Elfenbein (Richtung „Bühne“, 01.10.2026).
     Kein Rosé mehr: Akzent, Knopf, Linien und leiser Text sind warm.
     Kontraste stehen in CLAUDE.md. */
  --grund: #150308;
  --grund-mitte: #24060D;
  --grund-hell: #3D0C18;
  --flaeche: #1D050C;
  --text: #F5EEF0;
  --text-leise: #D9CCC6;
  --neutral: #E8DFD6;
  --knopf-grund: #EFE3D0;
  --knopf-hover: #FAF4EA;
  --knopf-kante: #FBF7EF;
  --knopf-schatten: rgba(0, 0, 0, 0.85);
  --akzent: #EFE3D0;
  --akzent-text: #2A0811;
  --knopf-text: #2A0811;
  --linie: rgba(239, 227, 208, 0.14);
  --linie-stark: rgba(239, 227, 208, 0.34);
  --feld-rand: #857069; /* Rand von Feldern und Kästchen, mindestens 3:1 */
  --kopf-grund: rgba(21, 3, 8, 0.94);
  --kopf-glas: rgba(21, 3, 8, 0.78);
  --feld-hinweis: #AE9C95;
  --fehler: #FFA898;
  --schatten: rgba(21, 3, 8, 0.55);
  --browser-farbe: #24060D;

  /* Licht: Mausschein, Kantenlicht der Kacheln, Glut in Flächen */
  --schein-innen: rgba(176, 36, 58, 0.26);
  --schein-aussen: rgba(142, 27, 50, 0.1);
  --zeichen-schein: rgba(176, 36, 58, 0.2);
  --logo-schatten: rgba(8, 1, 3, 0.55);
  --kante-licht: rgba(239, 227, 208, 0.95);
  --kante-licht-aussen: rgba(176, 36, 58, 0.45);
  --glut: rgba(142, 27, 50, 0.22);
  --glut-stark: rgba(142, 27, 50, 0.35);
  --wasserzeichen: url("assets/logo/dd-wasserzeichen.svg");

  /* 3D-Kette (logo-3d.js liest diese Werte): Lack, Rillenboden, Umgebung
     der Spiegelungen. Das Logo-SVG behält in Bordeaux seine eigenen Farben
     aus logo.mjs; andere Welten färben es über --logo-* (unten). */
  --kette-lack: #5C1122;
  --kette-rille: #1D050C;
  --kette-umgebung: #160409;
  --kette-klarlack: 1;
  --kette-rauheit: 0.45;
  /* Auftritt der Kette: logo (erscheint als Logo, das untere D rutscht
     ein) oder kran (schwebt am Seil ein, Farbe des Seils) */
  --kette-auftritt: logo;
  --kette-seil: #EFE3D0;
  --kette-seil-bleibt: 0;

  /* Form: scharfkantig. Eine Regel für alles, damit nichts gemischt wirkt. */
  --ecke: 2px;
  --kursiv: italic;

  /* Schrift (entschieden 28.09.2026): DM Serif Display für Überschriften,
     Hanken Grotesk für Text. DM Serif gibt es nur in einer Stärke. */
  --f-titel: "DM Serif Display", "Bodoni 72", Didot, Georgia, serif;
  --f-text: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titel-gewicht: 400;
  --titel-sperrung: -0.01em;
  --marke-gewicht: 400;
}

:root {
  --f-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Bewegung: schwer und gelassen wie ein Vorhang. Dinge kommen entschieden
     an und stehen dann still. Zwei Kurven (aus dem Skill „animate“), für
     reine Farb- und Deckkraftwechsel `ease`. Dieselben Werte stehen für die
     Skripte in bewegung.js; wer hier ändert, ändert dort mit. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* Ankommen */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* Öffnen und Schließen */
  --dauer-kurz: 150ms; /* Reaktion auf Finger und Maus */
  --dauer-mittel: 220ms; /* kleine Wege: Menü, Auswahl, Hinweise */
  --dauer-gleiten: 300ms; /* Flächen, die den Platz wechseln */
  --dauer-lang: 600ms; /* Nachziehen hinter der Maus */
  --dauer-auftritt: 900ms; /* Inhalte kommen ins Bild */
  --dauer-szene: 1200ms; /* Vorhang, Film, Lichtwechsel */
  --versatz: 80ms; /* Abstand zwischen Geschwistern beim Auftritt */

  /* Maße */
  --rand: clamp(16px, 5vw, 56px);
  --breite: 1240px;
  --innen: max(var(--rand), calc((100% - var(--breite)) / 2));
  /* Wie --innen, aber am Fenster gemessen: für Text in Szenen, deren
     Bild über die volle Breite läuft. */
  --innen-fest: max(var(--rand), calc((100vw - var(--breite)) / 2));
  --kopf-hoehe: 64px; /* wird per ResizeObserver überschrieben */
}

/* Welt: Corporate, Richtung „Geschäftsbericht“ (vom User gewählt am
   04.10.2026, freigegeben am 05.10.2026). Die frühere Fassung (Graphit und
   Royalblau, Aufbau wie eine Skyline) fand er zu verspielt und zu digital:
   Die Welt soll professionell wirken, für große Firmen und Leute mit
   Bürokratie. Jetzt liest sich die Seite wie der Jahresbericht eines soliden
   Hauses: warmes Papier, Tinte, Marineblau, wenig Messing. Serifen für
   Überschriften und Zahlen, eine nüchterne Grotesk für Text. Die einzige
   helle Welt. Kein Mauslicht, kein Glanz, keine 3D-Kette.
   Kontraste (gerechnet 05.10.2026): Tinte auf Papier 14,3:1, leiser Text
   7,4:1, Marineblau 10,9:1, Messing 5,2:1, Knopftext auf Marineblau 10,9:1. */
[data-welt="corporate"] {
  color-scheme: light;

  --grund: #F5F1E8;
  --grund-mitte: #F1ECE0;
  --grund-hell: #FBF8F2;
  --flaeche: #EDE7D9;
  --text: #1A2233;
  --text-leise: #4A5263;
  --neutral: #4A5263;
  --knopf-grund: #1F3557;
  --knopf-hover: #1A2233;
  --knopf-kante: rgba(26, 34, 51, 0);
  --knopf-schatten: rgba(26, 34, 51, 0);
  --akzent: #1F3557;
  --akzent-text: #F5F1E8;
  --knopf-text: #F5F1E8;
  --linie: #D9D2C2;
  --linie-stark: #B9B09C;
  --feld-rand: #7A7566;
  --kopf-grund: rgba(245, 241, 232, 0.97);
  --kopf-glas: rgba(245, 241, 232, 0.92);
  --feld-hinweis: #5E6676;
  --fehler: #A12A2A;
  --schatten: rgba(26, 34, 51, 0.18);
  --browser-farbe: #F5F1E8;

  --schein-innen: rgba(31, 53, 87, 0);
  --schein-aussen: rgba(31, 53, 87, 0);
  --zeichen-schein: rgba(31, 53, 87, 0);
  --logo-schatten: rgba(26, 34, 51, 0);
  --kante-licht: rgba(31, 53, 87, 0);
  --kante-licht-aussen: rgba(31, 53, 87, 0);
  --glut: rgba(31, 53, 87, 0);
  --glut-stark: rgba(31, 53, 87, 0);
  --wasserzeichen: none;

  /* Die 3D-Kette lädt in dieser Welt nicht (script.js). Die Werte stehen
     nur hier, weil jede Welt alle Variablen setzen muss. */
  --kette-lack: #1F3557;
  --kette-rille: #EDE7D9;
  --kette-umgebung: #F5F1E8;
  --kette-klarlack: 0.2;
  --kette-rauheit: 0.6;
  --kette-auftritt: logo;
  --kette-seil: #1F3557;
  --kette-seil-bleibt: 0;
  /* Logo flächig in Marineblau. */
  --logo-hell: #1F3557;
  --logo-mitte: #1F3557;
  --logo-tief: #1F3557;
  --logo-glanz: rgba(255, 255, 255, 0);

  --ecke: 0px;
  --kursiv: italic;

  --f-titel: "Source Serif 4", Georgia, "Times New Roman", serif;
  --f-text: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titel-gewicht: 400;
  --titel-sperrung: -0.012em;
  --marke-gewicht: 600;

  /* Nur in dieser Welt: Messing für Nummern und feine Marken, Breite der
     Randspalte neben den Kapiteln. */
  --messing: #7D5F26;
  --c-spalte: 200px;
}

/* Welt: Wildlife (Nachtarbeit 29./30.09.2026, Konzept in DECISIONS.md):
   Reise vom nächtlichen Dschungel in die Savanne im Abendlicht. Hinter der
   Seite liegt eine Landschaft (welten/wildnis/), durch die man beim
   Scrollen reist, mit Tiger und Löwe. Farben: Dschungelgrün fast schwarz,
   Elfenbein, Savannengold. Kräftige Titel, weiche Ecken. Kontraste in
   CLAUDE.md (Tabelle Wildlife); hellste Stelle der Landschaft hinter Text
   ist das Horizontglühen #3A2C18. */
[data-welt="wildlife"] {
  color-scheme: dark;

  --grund: #0D1611;
  --grund-mitte: #122019;
  --grund-hell: #1B2E23;
  --flaeche: rgba(19, 33, 26, 0.9);
  --text: #F2ECDC;
  --text-leise: #BFBAA5;
  --neutral: #D8D0B8;
  --knopf-grund: #E2A64A;
  --knopf-hover: #F0B85E;
  --knopf-kante: rgba(255, 240, 210, 0.4);
  --knopf-schatten: rgba(0, 0, 0, 0.6);
  --akzent: #E8B45C;
  --akzent-text: #1B1206;
  --knopf-text: #1B1206;
  --linie: rgba(242, 236, 220, 0.12);
  --linie-stark: rgba(242, 236, 220, 0.26);
  --feld-rand: #7C8374;
  --kopf-grund: rgba(13, 22, 17, 0.94);
  --kopf-glas: rgba(13, 22, 17, 0.8);
  --feld-hinweis: #9EA396;
  --fehler: #FF9E86;
  --schatten: rgba(0, 0, 0, 0.55);
  --browser-farbe: #0D1611;

  --schein-innen: rgba(232, 180, 92, 0.12);
  --schein-aussen: rgba(90, 140, 70, 0.06);
  --zeichen-schein: rgba(232, 180, 92, 0.12);
  --logo-schatten: rgba(0, 0, 0, 0.55);
  --kante-licht: rgba(232, 180, 92, 0.85);
  --kante-licht-aussen: rgba(120, 170, 90, 0.35);
  --glut: rgba(120, 170, 90, 0.12);
  --glut-stark: rgba(232, 180, 92, 0.14);
  --wasserzeichen: url("assets/logo/dd-wasserzeichen.svg");

  /* Die Kette hängt an einer Liane und ist aus Bernsteinlack */
  --kette-lack: #8A5418;
  --kette-rille: #0D1611;
  --kette-umgebung: #10190F;
  --kette-klarlack: 0.8;
  --kette-rauheit: 0.38;
  --kette-auftritt: kran;
  --kette-seil: #8A9A4A;
  --kette-seil-bleibt: 1;
  --logo-hell: #F0C27A;
  --logo-mitte: #C98A34;
  --logo-tief: #7A4E16;
  --logo-glanz: rgba(255, 240, 200, 0.2);

  --ecke: 12px;
  --kursiv: normal;

  --f-titel: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-text: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titel-gewicht: 800;
  --titel-sperrung: -0.035em;
  --marke-gewicht: 800;
}

/* Welt: Cinematic (Nachtarbeit 29./30.09.2026): Filmpremiere. Schwarz mit
   Petrol in den Schatten, Orange im Licht (die Farbkorrektur großer
   Kinofilme), Titel wie auf Filmplakaten in Versalien mit Serifen, harte
   Kanten. Beim Wechsel baut eine Filmcrew das alte Set ab
   (welten/cinematic.js). Kontraste in CLAUDE.md (Tabelle Cinematic). */
[data-welt="cinematic"] {
  color-scheme: dark;

  --grund: #0A0D0E;
  --grund-mitte: #0E1416;
  --grund-hell: #15222A;
  --flaeche: #11181B;
  --text: #F4F1EA;
  --text-leise: #AEB7B9;
  --neutral: #D5D2CA;
  --knopf-grund: #FF9F4A;
  --knopf-hover: #FFB36E;
  --knopf-kante: rgba(255, 220, 190, 0.4);
  --knopf-schatten: rgba(0, 0, 0, 0.7);
  --akzent: #FFA95C;
  --akzent-text: #170C03;
  --knopf-text: #170C03;
  --linie: rgba(244, 241, 234, 0.1);
  --linie-stark: rgba(244, 241, 234, 0.24);
  --feld-rand: #7A8588;
  --kopf-grund: rgba(10, 13, 14, 0.95);
  --kopf-glas: rgba(10, 13, 14, 0.82);
  --feld-hinweis: #939D9F;
  --fehler: #FF8F7A;
  --schatten: rgba(0, 0, 0, 0.6);
  --browser-farbe: #0A0D0E;

  --schein-innen: rgba(255, 159, 74, 0.22);
  --schein-aussen: rgba(40, 140, 160, 0.08);
  --zeichen-schein: rgba(255, 159, 74, 0.1);
  --logo-schatten: rgba(0, 0, 0, 0.6);
  --kante-licht: rgba(255, 169, 92, 0.85);
  --kante-licht-aussen: rgba(40, 140, 160, 0.35);
  --glut: rgba(40, 140, 160, 0.12);
  --glut-stark: rgba(255, 159, 74, 0.14);
  --wasserzeichen: url("assets/logo/dd-wasserzeichen.svg");

  /* Die Kette als schwarzes Chrom mit warmen Spiegelungen */
  --kette-lack: #1D2327;
  --kette-rille: #0A0D0E;
  --kette-umgebung: #1A120A;
  --kette-klarlack: 1;
  --kette-rauheit: 0.28;
  --kette-auftritt: logo;
  --kette-seil: #FFA95C;
  --kette-seil-bleibt: 0;
  --logo-hell: #FFC58A;
  --logo-mitte: #E8863A;
  --logo-tief: #8C4516;
  --logo-glanz: rgba(255, 240, 220, 0.3);

  --ecke: 0px;
  --kursiv: italic;

  --f-titel: "DM Serif Display", "Bodoni 72", Didot, Georgia, serif;
  --f-text: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titel-gewicht: 400;
  --titel-sperrung: 0.04em;
  --marke-gewicht: 400;
}

/* Logo in anderen Welten: Die Verläufe des Sprites (logo.mjs) nehmen die
   drei Töne der Welt an. Bordeaux hat kein data-welt und behält die
   Originalfarben. Reihenfolge der Stopps wie in logo.mjs: Band vier,
   Kanten je drei, Glanz fünf und zwei. */
:root[data-welt] #dd-band stop:nth-child(odd) {
  stop-color: var(--logo-mitte);
}

:root[data-welt] #dd-band stop:nth-child(even) {
  stop-color: var(--logo-tief);
}

:root[data-welt] #dd-rand-a stop:nth-child(1),
:root[data-welt] #dd-rand-b stop:nth-child(3) {
  stop-color: var(--logo-hell);
}

:root[data-welt] #dd-rand-a stop:nth-child(2),
:root[data-welt] #dd-rand-b stop:nth-child(2) {
  stop-color: var(--logo-mitte);
}

:root[data-welt] #dd-rand-a stop:nth-child(3),
:root[data-welt] #dd-rand-b stop:nth-child(1) {
  stop-color: var(--logo-tief);
}

:root[data-welt] #dd-glanz stop,
:root[data-welt] #dd-glanzpunkt stop {
  stop-color: var(--logo-glanz);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + 16px);
  /* Platz für die Bildlaufleiste bleibt reserviert, auch wenn das Intro das
     Scrollen sperrt. Sonst rutscht die Kopfzeile danach zur Seite, und das
     Intro-Logo landet neben dem echten. */
  scrollbar-gutter: stable;
  background: var(--grund);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--f-text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3 {
  font-family: var(--f-titel);
  font-weight: var(--titel-gewicht);
  letter-spacing: var(--titel-sperrung);
  text-wrap: balance;
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
}

/* ---------- Sprunglink: unsichtbar, bis er per Tab den Fokus bekommt ---------- */

.sprung {
  position: absolute;
  left: 16px;
  top: 12px;
  z-index: 30;
  padding: 12px 16px;
  background: var(--knopf-grund);
  color: var(--knopf-text);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--ecke);
  transform: translateY(-200%);
}

.sprung:focus-visible {
  transform: none;
}

/* ---------- Knöpfe und Textlinks ---------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  /* Als <button> (Formular) bringt der Browser sonst seinen eigenen Rahmen mit. */
  border: 0;
  background: var(--knopf-grund);
  color: var(--knopf-text);
  font: 600 1rem/1 var(--f-text);
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  border-radius: var(--ecke);
  box-shadow: inset 0 1px 0 var(--knopf-kante), 0 14px 32px -16px var(--knopf-schatten);
  transition:
    transform var(--dauer-kurz) var(--ease-out),
    background-color var(--dauer-kurz) ease;
}

.knopf:active {
  transform: scale(0.97);
}

.textlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--linie-stark);
  text-underline-offset: 6px;
  transition: text-decoration-color var(--dauer-kurz) ease;
}

@media (hover: hover) and (pointer: fine) {
  .knopf:hover {
    background: var(--knopf-hover);
  }

  .textlink:hover {
    text-decoration-color: var(--akzent);
  }
}

/* ---------- Kopfzeile ----------
   Immer eine Zeile. Unter 1024 px stehen rechts der Knopf „Design“ und der
   Menüknopf; die Navigation ist dann ein Feld unter der Kopfzeile, das der
   Menüknopf auf- und zuklappt (script.js), mit dem Hauptknopf am Ende. Ab
   1024 px stehen Navigation und Hauptknopf in der Zeile.
   Ohne JavaScript (kein .js an <html>, siehe welt-vorbereitung.js) gibt es
   keinen Menüknopf: Die Navigation bricht dann unter der Marke um, und die
   Kopfzeile scrollt mit der Seite weg, statt ein Viertel des Bildschirms
   zu belegen. */

.kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--kopf-grund);
  border-bottom: 1px solid var(--linie);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .kopf {
    background: var(--kopf-glas);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
  }
}

.kopf-innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 24px;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 8px var(--rand);
}

/* Der freie Platz liegt immer rechts von der Marke */
.marke {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-right: auto;
  color: var(--text);
  text-decoration: none;
}

/* Unsichtbarer Speicher für das Logo (nicht display:none – sonst zeichnen
   manche Browser die Verläufe darin nicht). */
.dd-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Logo oben links: klar und ruhig, ohne Bewegung */
/* Das Logo steht hochkant (viewBox 633,45 × 750,46). */
.marke-zeichen {
  display: block;
  width: 29px;
  height: 34px;
}

@media (min-width: 1024px) {
  .marke-zeichen {
    width: 34px;
    height: 40px;
  }
}

.marke-wort {
  font-family: var(--f-titel);
  font-weight: var(--marke-gewicht);
  font-size: 1.1875rem;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

/* Hauptknopf in der Kopfzeile, etwas kleiner als auf der Seite. Die
   Gastwelten zeigen ihn als Umriss, Bordeaux füllt ihn (Abschnitt „Bühne“). */
.knopf-kopf {
  order: 4;
  min-height: 44px;
  padding: 0 16px;
  font-size: 0.875rem;
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--linie-stark);
  transition:
    transform var(--dauer-kurz) var(--ease-out),
    box-shadow var(--dauer-kurz) ease;
}

@media (hover: hover) and (pointer: fine) {
  .knopf-kopf:hover {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--neutral);
  }
}

/* Menüknopf: zwei Balken, die sich beim Öffnen zum Kreuz drehen. Nur am
   Handy und nur mit JavaScript sichtbar (weiter unten). Die Ränder holen die
   Balken an den Seitenrand und nah an den Knopf „Design“; die Tippfläche
   bleibt 44 px. */
.menue-knopf {
  display: none;
  order: 3;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 -11px 0 -24px;
  padding: 0;
  color: var(--text);
  background: none;
  border: 0;
  border-radius: var(--ecke);
  cursor: pointer;
}

.menue-zeichen {
  position: relative;
  display: block;
  width: 22px;
  height: 10px;
}

.menue-zeichen::before,
.menue-zeichen::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform var(--dauer-mittel) var(--ease-out);
}

.menue-zeichen::before {
  top: 0;
}

.menue-zeichen::after {
  bottom: 0;
}

.menue-knopf[aria-expanded="true"] .menue-zeichen::before {
  transform: translateY(4px) rotate(45deg);
}

.menue-knopf[aria-expanded="true"] .menue-zeichen::after {
  transform: translateY(-4px) rotate(-45deg);
}

/* Grundform (Handy ohne JavaScript): eigene Zeile unter der Marke, bricht
   um, statt seitlich zu scrollen */
.navigation {
  position: relative;
  order: 5;
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 0 22px;
  min-width: 0;
}

.navigation a:not(.knopf) {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 44px;
  color: var(--text-leise);
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--dauer-kurz) ease;
}

.navigation a:not(.knopf)[aria-current] {
  color: var(--text);
}

.navigation a:not(.knopf):focus-visible {
  outline-offset: -3px;
}

@media (hover: hover) and (pointer: fine) {
  .navigation a:not(.knopf):hover {
    color: var(--text);
  }
}

/* Hauptknopf im aufgeklappten Menü; sonst steht er in der Kopfzeile */
.navigation-knopf {
  display: none;
}

/* Ein einziger Balken, der per transform gleitet: 1 px breit, auf die
   Linkbreite skaliert. Auf der Startseite ist kein Punkt aktiv, dort
   erscheint er nur unter dem Punkt, auf den man zeigt. */
.navigation-balken {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 2px;
  background: var(--neutral);
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
}

.navigation-balken.gleitet {
  transition:
    transform var(--dauer-gleiten) var(--ease-in-out),
    opacity var(--dauer-kurz) ease;
}

@media (max-width: 1023.98px) {
  /* Ohne JavaScript: Kopfzeile scrollt mit weg (sie ist dann mehrzeilig) */
  :root:not(.js) .kopf {
    position: relative;
  }

  .js .knopf-kopf {
    display: none;
  }

  .js .menue-knopf {
    display: inline-flex;
  }

  /* Das Feld „Design“ hängt an der Kopfzeile statt am Knopf, damit es am
     Handy die ganze Breite nutzen kann */
  .js .welt {
    position: static;
    order: 2;
  }

  .js .welt-wahl {
    top: calc(100% + 6px);
    right: var(--rand);
    width: min(360px, calc(100% - 2 * var(--rand)));
  }

  /* Die Navigation als Feld unter der Kopfzeile, bis zum unteren Rand.
     Geschlossen ist sie unsichtbar und für Tastatur und Screenreader nicht
     erreichbar (visibility), offen blendet sie weich ein. */
  .js .navigation {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-flow: column nowrap;
    gap: 0;
    height: calc(100vh - var(--kopf-hoehe));
    height: calc(100dvh - var(--kopf-hoehe));
    padding: 8px var(--rand) calc(28px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--grund);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition:
      opacity var(--dauer-kurz) ease,
      transform var(--dauer-mittel) var(--ease-out),
      visibility 0s linear var(--dauer-mittel);
  }

  .js .kopf--offen .navigation {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition:
      opacity var(--dauer-mittel) var(--ease-out),
      transform var(--dauer-gleiten) var(--ease-out),
      visibility 0s;
  }

  .js .navigation a:not(.knopf) {
    flex: none;
    min-height: 64px;
    color: var(--text);
    font-family: var(--f-titel);
    font-weight: var(--titel-gewicht);
    font-size: 1.75rem;
    letter-spacing: var(--titel-sperrung);
    border-bottom: 1px solid var(--linie);
  }

  .js .navigation a:not(.knopf)[aria-current] {
    color: var(--akzent);
  }

  .js .navigation-knopf {
    display: inline-flex;
    flex: none;
    margin-top: 24px;
  }

  .js .navigation-balken {
    display: none;
  }

  /* Solange das Menü offen ist, scrollt die Seite dahinter nicht mit */
  .menue-offen,
  .menue-offen body {
    overflow: hidden;
  }
}

@media (min-width: 1024px) {
  .kopf-innen {
    flex-wrap: nowrap;
    padding-block: 12px;
  }

  .navigation {
    order: 2;
    flex: 0 1 auto;
    flex-wrap: nowrap;
    gap: 24px;
  }

  /* Innenabstand des Knopfs mit eingerechnet: sichtbar gleich weit von
     Navigation und Hauptknopf */
  .welt {
    order: 3;
    margin: 0 -16px 0 -8px;
  }

  .knopf-kopf {
    margin-left: 8px;
  }
}

@media (min-width: 1100px) {
  .navigation {
    gap: 30px;
  }
}

/* ---------- Knopf „Design“: Auswahl der Design-Welten ----------
   Aufklappbar (Knopf mit aria-expanded), Verhalten in script.js. Jede
   Karte trägt data-welt und damit die Farben und Schriften ihrer Welt. */

.welt {
  position: relative;
  order: 4;
  flex: none;
}

.welt[hidden] {
  display: none;
}

.welt-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  color: var(--text-leise);
  background: none;
  border: 0;
  border-radius: var(--ecke);
  font: 500 0.9375rem/1 var(--f-text);
  cursor: pointer;
  transition:
    color var(--dauer-kurz) ease,
    box-shadow var(--dauer-kurz) ease;
}

.welt-knopf[aria-expanded="true"] {
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--linie-stark);
}

.welt-symbol {
  display: block;
  width: 20px;
  height: 20px;
}

/* Am Handy und in engen Kopfzeilen nur das Zeichen; der Name bleibt für
   Screenreader im aria-label. */
.welt-knopf-text {
  display: none;
}

@media (min-width: 1100px) {
  .welt-knopf-text {
    display: inline;
  }
}

@media (hover: hover) and (pointer: fine) {
  .welt-knopf:hover {
    color: var(--text);
  }
}

.welt-wahl {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 20;
  width: min(360px, calc(100vw - 2 * var(--rand)));
  padding: 16px;
  color: var(--text);
  background: var(--grund-mitte);
  border-radius: var(--ecke);
  box-shadow: 0 0 0 1px var(--linie-stark), 0 24px 48px var(--schatten);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  transition:
    opacity var(--dauer-kurz) ease,
    transform var(--dauer-kurz) var(--ease-out);
}

.welt-wahl[hidden] {
  display: none;
}

.welt-wahl.ist-offen {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dauer-mittel) var(--ease-out),
    transform var(--dauer-mittel) var(--ease-out);
}

.welt-wahl-titel {
  margin: 0 0 12px;
  color: var(--neutral);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.welt-liste {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.welt-liste li[hidden] {
  display: none;
}

.welt-karte {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  row-gap: 2px;
  width: 100%;
  min-height: 72px;
  padding: 12px;
  color: var(--text);
  text-align: left;
  background: var(--grund);
  border: 0;
  border-radius: var(--ecke);
  box-shadow: inset 0 0 0 1px var(--linie);
  font: inherit;
  cursor: pointer;
  transition: box-shadow var(--dauer-kurz) ease;
}

.welt-karte[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1.5px var(--akzent);
}

@media (hover: hover) and (pointer: fine) {
  .welt-karte[aria-pressed="false"]:hover {
    box-shadow: inset 0 0 0 1px var(--linie-stark);
  }
}

/* Drei Streifen der Welt: Grund, Akzent, Knopf */
.welt-muster {
  display: grid;
  grid-row: span 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: var(--ecke);
  box-shadow: inset 0 0 0 1px var(--linie);
}

.welt-muster i:nth-child(1) {
  background: var(--grund-hell);
}

.welt-muster i:nth-child(2) {
  background: var(--akzent);
}

.welt-muster i:nth-child(3) {
  background: var(--knopf-grund);
}

.welt-name {
  align-self: end;
  font-family: var(--f-titel);
  font-weight: var(--titel-gewicht);
  letter-spacing: var(--titel-sperrung);
  font-size: 1.25rem;
  line-height: 1.1;
}

.welt-text {
  align-self: start;
  color: var(--text-leise);
  font-size: 0.875rem;
  line-height: 1.4;
}

.welt-wahl-hinweis {
  margin: 12px 0 0;
  color: var(--text-leise);
  font-size: 0.8125rem;
  line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
  .welt-wahl,
  .welt-wahl.ist-offen {
    transform: none;
  }
}

/* ---------- Blende beim Wechsel der Welt ----------
   script.js baut sie auf: Teile schließen sich in den Farben der neuen Welt
   (data-welt auf der Blende), in der Mitte erscheint kurz das Logo, dann
   öffnet sich die Seite im neuen Stil. Jede Welt hat ihren eigenen Auftritt;
   hier steht nur das erste Bild, bewegt wird per Web Animations API. */

.welt-blende {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  overflow: hidden;
}

.welt-blende-teil {
  flex: 1 1 0;
  background: var(--grund);
  will-change: transform;
}

.welt-blende-mitte {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  color: var(--text-leise);
  opacity: 0;
}

.welt-blende-zeichen {
  display: block;
  width: 64px;
  height: auto;
  overflow: visible;
}

.welt-blende-name {
  padding-left: 0.5em;
  font: 500 11px/1 var(--f-text);
  letter-spacing: 0.5em;
  text-transform: uppercase;
}

/* Bordeaux: Vorhänge wie im Intro, Farben von dort */
.welt-blende[data-welt="bordeaux"] .welt-blende-teil:first-child {
  background: radial-gradient(ellipse at 100% 50%, #2E0913 0%, #120306 65%);
}

.welt-blende[data-welt="bordeaux"] .welt-blende-teil + .welt-blende-teil {
  background: radial-gradient(ellipse at 0% 50%, #2E0913 0%, #120306 65%);
}

.welt-blende[data-welt="bordeaux"] .welt-blende-mitte {
  color: #D9CCC6;
}

.welt-blende-linie {
  display: none;
  width: 120px;
  height: 1px;
  background: var(--akzent);
  transform: scaleX(0);
}

/* Corporate: Streifen wie ein Raster, getrennt durch feine Linien; unter
   dem Logo zieht sich eine royalblaue Linie auf wie mit dem Lineal. */
.welt-blende[data-welt="corporate"] .welt-blende-teil + .welt-blende-teil {
  box-shadow: inset 1px 0 0 var(--linie);
}

.welt-blende[data-welt="corporate"] .welt-blende-linie {
  display: block;
}

/* ---------- Einstieg ---------- */

.einstieg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 28px;
  padding: clamp(28px, 6vw, 88px) var(--innen) clamp(48px, 7vw, 104px);
  background: radial-gradient(120% 90% at 20% 0%, var(--grund-hell) 0%, var(--grund-mitte) 45%, var(--grund) 100%);
}

/* Schein, der dem Mauszeiger folgt. Er bewegt sich nur per transform
   (script.js), damit der Browser ihn nicht in jedem Bild neu zeichnet.
   Ruhelage: 72 % / 42 % – dieselben Werte stehen in script.js. */
.einstieg-schein {
  position: absolute;
  left: 72%;
  top: 42%;
  z-index: -1;
  width: 64vmax;
  aspect-ratio: 1;
  margin: -32vmax 0 0 -32vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--schein-innen), var(--schein-aussen) 50%, transparent);
  pointer-events: none;
  transition: transform var(--dauer-lang) var(--ease-out);
  will-change: transform;
}

.einstieg-text {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  align-content: center;
  max-width: 44rem;
}

.einstieg h1 {
  font-size: clamp(2.6rem, 1.3rem + 6vw, 6.25rem);
  line-height: 1;
  padding-bottom: 0.06em;
}

.einstieg h1 em {
  font-style: var(--kursiv);
  color: var(--akzent);
}

.einstieg-unterzeile {
  margin: 0;
  max-width: 36ch;
  color: var(--text-leise);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.55;
}

.einstieg-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
}

.einstieg-zeichen {
  position: relative;
  order: -1;
  width: min(34vw, 150px);
}

/* Am Handy steht das Logo über der Überschrift. Als Kette hängt das untere
   D tiefer (bis Logo-y 960 statt 738), dafür bleibt darunter Platz. Der
   Prozentwert bezieht sich auf die Breite der ganzen Zeile. */
.mit-bewegung .einstieg-zeichen {
  margin-bottom: 9%;
}

/* Ruhiges Leuchten hinter dem Monogramm */
.einstieg-zeichen::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: -1;
  background: radial-gradient(closest-side, var(--zeichen-schein), transparent);
  pointer-events: none;
}

.monogramm {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

@media (min-width: 900px) {
  .einstieg {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    align-items: center;
    gap: 4vw;
  }

  .einstieg-zeichen {
    order: 0;
    width: 100%;
    max-width: 300px;
    justify-self: center;
  }

  .mit-bewegung .einstieg-zeichen {
    margin-bottom: 0;
  }
}

/* Auftritt beim Laden: kurz versetzt, nie länger als nötig.
   Nur transform und opacity, Kurve aus „animate“. */
.einstieg-text > * {
  animation: auftauchen var(--dauer-auftritt) var(--ease-out) both;
}

.einstieg-text > :nth-child(2) {
  animation-delay: var(--versatz);
}

.einstieg-text > :nth-child(3) {
  animation-delay: calc(var(--versatz) * 2);
}

@keyframes auftauchen {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes einblenden {
  from {
    opacity: 0;
  }
}

/* Logo im Einstieg: Satin mit Gloss-Finish, fest und ohne Dauerbewegung.
   Nur ein einmaliger, ruhiger Auftritt beim Laden. */
.monogramm {
  filter: drop-shadow(0 26px 38px var(--logo-schatten));
  animation: logo-auftritt var(--dauer-auftritt) var(--ease-out) calc(var(--versatz) * 1.5) both;
}

@keyframes logo-auftritt {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

/* ---------- Abschnitte (Leistungen und alle weiteren) ---------- */

.abschnitt {
  padding: clamp(56px, 9vw, 120px) var(--innen);
  background: var(--grund);
  border-top: 1px solid var(--linie);
}

.abschnitt-kopf {
  display: grid;
  gap: 12px;
  max-width: 48rem;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.abschnitt h2 {
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.5rem);
  line-height: 1.05;
}

.abschnitt-kopf p {
  margin: 0;
  color: var(--text-leise);
  font-size: 1.125rem;
}

.kacheln {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.kachel {
  --x: -400px;
  --y: -400px;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 200px;
  padding: clamp(20px, 2.4vw, 28px);
  overflow: hidden;
  background: var(--flaeche);
  border-radius: var(--ecke);
}

/* Kante: 1 px Silberlinie, die dort aufleuchtet, wo die Maus ist.
   --x/--y setzt script.js direkt auf jeder Kachel. */
.kachel::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background:
    radial-gradient(260px circle at var(--x) var(--y), var(--kante-licht), var(--kante-licht-aussen) 40%, transparent 72%),
    linear-gradient(var(--linie), var(--linie));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* Leuchten innen, weicher und breiter */
.kachel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(420px circle at var(--x) var(--y), var(--glut), transparent 62%);
  pointer-events: none;
}

.kachel h3 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.1;
}

.kachel p {
  margin: 0;
  max-width: 52ch;
  color: var(--text-leise);
  font-size: 1rem;
  line-height: 1.6;
}

.kachel .textlink {
  align-self: flex-start;
  margin-top: auto;
}

/* Große Kachel: Monogramm als Wasserzeichen, damit nicht alle Kacheln gleich aussehen */
.kachel-websites {
  background:
    var(--wasserzeichen) right -24px bottom -40px / 250px auto no-repeat,
    var(--flaeche);
}

.kachel-ads {
  background:
    radial-gradient(120% 100% at 100% 0%, var(--glut-stark), transparent 60%),
    var(--flaeche);
}

.merkmale {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.merkmale li {
  padding: 6px 10px;
  color: var(--neutral);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  border-radius: var(--ecke);
  box-shadow: inset 0 0 0 1px var(--linie-stark);
}

@media (min-width: 700px) {
  .kacheln {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kachel-websites {
    grid-column: span 2;
  }
}

@media (min-width: 1000px) {
  .kacheln {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .kachel {
    grid-column: span 2;
  }

  .kachel-websites {
    grid-column: span 4;
  }
}

/* Zwei Spalten statt Bento, für Angebotslisten der Unterseiten */
@media (min-width: 700px) {
  .kacheln--zwei {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kacheln--zwei .kachel {
    grid-column: auto;
  }
}

.abschnitt-mehr {
  margin: clamp(24px, 3vw, 40px) 0 0;
}

/* Sprungziele (etwa /preise/#einzeln) nicht unter der Kopfzeile verstecken */
.abschnitt[id] {
  scroll-margin-top: calc(var(--kopf-hoehe) + 16px);
}

/* ---------- Belege im Einstieg: drei kurze Fakten ---------- */

.belege {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-leise);
  font-size: 0.9375rem;
}

.belege li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.belege li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--akzent);
  border-radius: var(--ecke);
}

/* ---------- Bald: automatische Vorschau ---------- */

.bald {
  display: grid;
  gap: 14px;
  max-width: 52rem;
  padding: clamp(24px, 4vw, 44px);
  background:
    radial-gradient(120% 140% at 0% 0%, var(--glut), transparent 60%),
    var(--flaeche);
  border-radius: var(--ecke);
  box-shadow: inset 0 0 0 1px var(--linie-stark);
}

.bald-marke,
.preis-marke {
  margin: 0;
  padding: 6px 10px;
  color: var(--akzent-text);
  background: var(--akzent);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: var(--ecke);
}

.bald-marke {
  justify-self: start;
}

.bald h2 {
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.05;
}

.bald p:not(.bald-marke) {
  margin: 0;
  max-width: 56ch;
  color: var(--text-leise);
  font-size: 1.0625rem;
}

/* ---------- Preise ----------
   Vier Pakete, eins empfohlen (Marke und Akzentkante). Ab 720 px zwei mal
   zwei, ab 1200 px alle vier nebeneinander. */

.kacheln--preise {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1200px) {
  :root .kacheln--preise {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 720px) {
  .kacheln--preise {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kacheln--preise .kachel {
    grid-column: auto;
  }

  /* Die Karten teilen sich die Zeilen (Name, Preis, Satz, Liste, Fuß):
     bricht ein Name um, rücken die Preise daneben mit, alles bleibt auf
     einer Linie. Volle Karte 5 Zeilen, Kurzfassung auf der Startseite 3. */
  @supports (grid-template-rows: subgrid) {
    .kacheln--preise .preis {
      display: grid;
      grid-row: span 5;
      grid-template-rows: subgrid;
      row-gap: 12px;
    }

    .kacheln--preise .preis--kurz {
      grid-row: span 3;
    }

    /* Name sitzt direkt über dem Preis; Listen nicht strecken */
    .kacheln--preise .preis h3 {
      align-self: end;
    }

    .kacheln--preise .preis-liste {
      align-content: start;
    }
  }
}

/* Oben Platz für die Marke, bei allen Karten gleich, damit Namen und
   Preise auf einer Linie stehen */
.preis {
  padding-top: calc(clamp(20px, 2.4vw, 28px) + 18px);
}

/* .kachel davor, weil ".kachel p" sonst Farbe und Größe überschreibt */
.kachel .preis-marke {
  position: absolute;
  top: 0;
  right: 0;
  max-width: none;
  color: var(--akzent-text);
  font-size: 0.75rem;
  border-radius: 0 0 0 var(--ecke);
}

.preis--empfohlen::before {
  padding: 2px;
  background:
    radial-gradient(260px circle at var(--x) var(--y), var(--kante-licht), var(--kante-licht-aussen) 40%, transparent 72%),
    linear-gradient(var(--akzent), var(--akzent));
}

.preis h3 {
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
}

.kachel .preis-betrag {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  max-width: none;
  margin: 0;
}

.preis-zahl {
  color: var(--text);
  font-family: var(--f-titel);
  font-size: clamp(2.4rem, 1.8rem + 2vw, 3.25rem);
  line-height: 1;
}

.preis-takt {
  color: var(--text-leise);
  font-size: 0.875rem;
}

.preis-danach {
  flex-basis: 100%;
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.preis-liste {
  display: grid;
  gap: 10px;
  margin: 8px 0 0;
  padding: 18px 0 0;
  list-style: none;
  border-top: 1px solid var(--linie);
}

.preis-liste li {
  position: relative;
  padding-left: 26px;
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Häkchen */
.preis-liste li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.38em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--akzent);
  border-bottom: 2px solid var(--akzent);
  transform: rotate(-45deg);
}

.preis-fuss {
  display: grid;
  gap: 14px;
  margin-top: auto;
  padding-top: 12px;
}

/* Der Knopftext darf umbrechen, statt aus der Spalte zu laufen. */
.preis-fuss .knopf {
  width: 100%;
  padding: 12px;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}

/* Steuerhinweis direkt unter den Preisen (Kleinunternehmer, § 19 UStG). */
.preis-steuer {
  max-width: none;
  margin: 24px 0 0;
  color: var(--text-leise);
  font-size: 0.875rem;
  text-align: center;
}

/* Einzelleistungen: Zeilen statt Karten, damit sie nicht mit den Paketen
   konkurrieren */
.einzeln {
  display: grid;
  border-top: 1px solid var(--linie);
}

.einzeln-zeile {
  display: grid;
  gap: 12px 40px;
  padding: 26px 0;
  border-bottom: 1px solid var(--linie);
}

.einzeln-text {
  display: grid;
  gap: 8px;
}

.einzeln h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.2;
}

.einzeln-text p {
  margin: 0;
  max-width: 60ch;
  color: var(--text-leise);
}

.einzeln .preis-betrag {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0;
}

.einzeln .preis-zahl {
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
}

.einzeln-zeile .textlink {
  justify-self: start;
}

@media (min-width: 860px) {
  .einzeln-zeile {
    grid-template-columns: minmax(0, 1fr) 13rem auto;
    align-items: center;
  }

  .einzeln .preis-betrag {
    justify-content: flex-end;
  }
}

.hinweise {
  display: grid;
  gap: 14px;
  max-width: 52rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hinweise li {
  position: relative;
  padding-left: 24px;
  color: var(--text-leise);
  line-height: 1.6;
}

.hinweise li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 10px;
  height: 1px;
  background: var(--akzent);
}

/* ---------- Direkt schreiben: WhatsApp, SMS, E-Mail ---------- */

.direkt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 20px;
  margin: 0;
  color: var(--text-leise);
  font-size: 0.9375rem;
}

.direkt a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.einstieg-text .direkt {
  margin-top: clamp(8px, 1.5vw, 16px);
}

/* Links im Fließtext */
p a:not(.textlink):not(.knopf) {
  color: var(--akzent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* Noch offen: sichtbar gelb statt erfunden (Skill webseite-neu). Vor dem
   Onlinegang darf keine .platzhalter-Klasse mehr in den Seiten stehen. */
.platzhalter {
  padding: 0 0.2em;
  background: #fff6cc;
  outline: 2px dashed #b08900;
  outline-offset: 2px;
  color: #4a3a00;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- Unterseiten: Kopf wie der Einstieg, ohne Logo ---------- */

.einstieg--seite {
  padding-top: clamp(40px, 8vw, 112px);
  padding-bottom: clamp(40px, 6vw, 88px);
}

.einstieg--seite .einstieg-text {
  max-width: 52rem;
}

.einstieg--seite h1 {
  font-size: clamp(2.4rem, 1.4rem + 4.4vw, 5rem);
}

@media (min-width: 900px) {
  .einstieg--seite {
    grid-template-columns: minmax(0, 1fr);
  }
}

.oberzeile {
  margin: 0;
  color: var(--akzent);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.linkliste {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Punkte: Grundsätze, Arbeitsweise ---------- */

.punkte {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linie);
}

.punkte li {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 24px 0;
  border-bottom: 1px solid var(--linie);
}

.punkte h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.2;
}

.punkte p {
  margin: 0;
  max-width: 60ch;
  color: var(--text-leise);
}

@media (min-width: 900px) {
  .punkte {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    column-gap: 40px;
    row-gap: 40px;
    border-top: 0;
  }

  .punkte li {
    padding: 24px 0 0;
    border-top: 1px solid var(--linie-stark);
    border-bottom: 0;
  }
}

/* ---------- Schritte: Ablauf, nächste Schritte ---------- */

.schritte {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.schritte li {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--flaeche);
  border-radius: var(--ecke);
  box-shadow: inset 0 0 0 1px var(--linie);
}

.schritt-nummer {
  color: var(--akzent);
  font-family: var(--f-titel);
  font-size: 2.5rem;
  font-style: var(--kursiv);
  line-height: 1;
}

.schritte h3 {
  font-size: 1.5rem;
  line-height: 1.15;
}

.schritte p {
  margin: 0;
  color: var(--text-leise);
}

@media (min-width: 700px) {
  .schritte {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .schritte {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

/* ---------- Häufige Fragen: aufklappbar, ohne Skript ---------- */

.fragen {
  max-width: 56rem;
  border-top: 1px solid var(--linie);
}

.frage {
  border-bottom: 1px solid var(--linie);
}

.frage summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 64px;
  padding: 16px 0;
  font-family: var(--f-titel);
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.25;
  list-style: none;
  cursor: pointer;
}

.frage summary::-webkit-details-marker {
  display: none;
}

/* Plus, das sich beim Öffnen zum Kreuz dreht */
.frage summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--akzent), var(--akzent)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--akzent), var(--akzent)) center / 1.5px 100% no-repeat;
  transition: transform var(--dauer-mittel) var(--ease-out);
}

.frage[open] summary::after {
  transform: rotate(45deg);
}

.antwort p {
  margin: 0 0 24px;
  max-width: 62ch;
  color: var(--text-leise);
}

/* ---------- Über uns: Kurzfassung, Foto, Team ---------- */

.ueber-kurz {
  display: grid;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

.foto-rahmen,
.projekt-bild {
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  color: var(--text-leise);
  background: radial-gradient(120% 90% at 20% 0%, var(--grund-hell), var(--grund-mitte) 60%, var(--grund));
  border-radius: var(--ecke);
  box-shadow: inset 0 0 0 1px var(--linie);
}

.foto-rahmen {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 4 / 5;
}

.ueber-kurz-text {
  display: grid;
  gap: 16px;
  max-width: 40rem;
}

.ueber-kurz-text p {
  margin: 0;
  color: var(--text-leise);
  font-size: 1.125rem;
}

@media (min-width: 900px) {
  .ueber-kurz {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }

  /* Solange es kein Teamfoto gibt: nur der Text, eine Spalte. */
  .ueber-kurz--ohne-foto {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Team auf „Über uns“: Karten wie die Projekte, Foto oben. */
.team {
  display: grid;
  gap: 16px;
}

.person {
  display: grid;
  align-content: start;
  gap: 10px;
  overflow: hidden;
  padding-bottom: clamp(20px, 2.4vw, 28px);
  background: var(--flaeche);
  border-radius: var(--ecke);
  box-shadow: inset 0 0 0 1px var(--linie);
}

.person .foto-rahmen {
  max-width: none;
  margin-bottom: 10px;
  border-radius: 0;
  box-shadow: none;
}

.person > :not(.foto-rahmen) {
  margin: 0;
  padding-inline: clamp(20px, 2.4vw, 28px);
}

.person-rolle {
  color: var(--akzent);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.person h3 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.1;
}

.person p:last-child {
  color: var(--text-leise);
}

@media (min-width: 640px) {
  .team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .team {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Arbeiten ---------- */

.projekte {
  display: grid;
  gap: 16px;
}

.projekt {
  display: grid;
  overflow: hidden;
  background: var(--flaeche);
  border-radius: var(--ecke);
  box-shadow: inset 0 0 0 1px var(--linie);
}

.projekt-bild {
  aspect-ratio: 16 / 10;
  border-radius: 0;
  box-shadow: none;
}

.projekt-text {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(20px, 2.4vw, 32px);
}

.projekt-art {
  margin: 0;
  color: var(--akzent);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.projekt h2,
.projekt h3 {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
  line-height: 1.1;
}

.projekt p {
  margin: 0;
  color: var(--text-leise);
}

.projekt .projekt-heute {
  color: var(--text);
}

.projekt .textlink {
  justify-self: start;
}

@media (min-width: 900px) {
  .projekt {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }

  .projekt-bild {
    min-height: 320px;
    aspect-ratio: auto;
  }

  /* Mit Vorschau: Fenster über die volle Breite, Text darunter */
  .projekt--vorschau {
    grid-template-columns: minmax(0, 1fr);
  }

  .projekt--vorschau .projekt-text {
    max-width: 46rem;
  }
}

/* ---------- Projektvorschau: echte Kundenseite im Fenster ----------
   Die Seite (Kopie unter /projekte/) läuft in einem iframe. script.js
   zeichnet sie in Rechnerbreite und verkleinert sie, oder zeigt sie in
   Handybreite. Ohne JavaScript füllt sie einfach die Bühne. */

.vorschau {
  display: grid;
  /* Sonst drückt das iframe (Handybreite 390 px) die Karte auseinander */
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  margin: 0;
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
}

.vorschau-leiste {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px 6px 14px;
  border-bottom: 1px solid var(--linie);
}

.vorschau-punkte {
  display: none;
  gap: 6px;
}

.vorschau-punkte i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--linie-stark);
}

.vorschau-adresse {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--text-leise);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.vorschau-schalter {
  display: flex;
  flex-shrink: 0;
  gap: 4px;
}

.vorschau-schalter[hidden] {
  display: none;
}

.vorschau-schalter button {
  min-height: 44px;
  padding: 0 14px;
  color: var(--text-leise);
  background: none;
  border: 0;
  border-radius: var(--ecke);
  box-shadow: inset 0 0 0 1px var(--linie);
  font: 600 0.8125rem/1 var(--f-text);
  cursor: pointer;
  transition: color var(--dauer-kurz) ease, background-color var(--dauer-kurz) ease;
}

.vorschau-schalter button[aria-pressed="true"] {
  color: var(--knopf-text);
  background: var(--neutral);
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .vorschau-schalter button[aria-pressed="false"]:hover {
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--linie-stark);
  }
}

.vorschau-buehne {
  position: relative;
  height: clamp(440px, 64vh, 680px);
  overflow: hidden;
}

/* Frage „Zur echten Seite?“ über dem Fenster, wenn in der Vorschau etwas
   Gesperrtes angeklickt wird (Absenden, Anrufen, Links nach außen). */
.vorschau-frage {
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: 2;
  display: grid;
  gap: 4px;
  width: min(440px, calc(100% - 32px));
  padding: 18px 20px 16px;
  color: var(--text);
  background: var(--grund-mitte);
  border-radius: var(--ecke);
  box-shadow: 0 0 0 1px var(--linie-stark), 0 18px 40px var(--schatten);
  opacity: 0;
  transform: translate(-50%, 8px);
  transition:
    opacity var(--dauer-mittel) var(--ease-out),
    transform var(--dauer-mittel) var(--ease-out);
}

.vorschau-frage[hidden] {
  display: none;
}

.vorschau-frage.ist-offen {
  opacity: 1;
  transform: translate(-50%, 0);
}

.vorschau-frage p {
  margin: 0;
}

.vorschau-frage-zeile {
  color: var(--text-leise);
  font-size: 0.875rem;
}

/* Doppelte Klasse, weil „.projekt p“ sonst die leise Farbe erzwingt */
.vorschau-frage .vorschau-frage-text {
  color: var(--text);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
}

.vorschau-frage-knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-top: 12px;
}

.vorschau-frage-nein {
  min-height: 44px;
  padding: 0 2px;
  color: var(--text-leise);
  background: none;
  border: 0;
  font: 600 0.9375rem/1 var(--f-text);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .vorschau-frage-nein:hover {
    color: var(--text);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vorschau-frage {
    transform: translate(-50%, 0);
    transition: opacity var(--dauer-mittel) ease;
  }
}

.vorschau-buehne iframe {
  display: block;
  width: 100%;
  height: 100%;
  margin-inline: auto;
  border: 0;
  background: #fff;
  transform-origin: 0 0;
}

.vorschau[data-ansicht="handy"] .vorschau-buehne iframe {
  box-shadow: 0 0 0 1px var(--linie-stark);
}

.vorschau-hinweis {
  padding: 10px 14px;
  color: var(--text-leise);
  font-size: 0.8125rem;
  border-top: 1px solid var(--linie);
}

@media (min-width: 560px) {
  .vorschau-punkte {
    display: flex;
  }
}

/* ---------- Einstieg in die Anfrage: Leistung wählen ---------- */

/* Sechs Leistungen: am Rechner zwei Reihen zu drei, nie fünf plus eine */
.wahl {
  display: grid;
  gap: 12px;
}

@media (min-width: 560px) {
  .wahl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .wahl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.wahl-kachel {
  display: grid;
  align-content: center;
  gap: 6px;
  min-height: 96px;
  padding: 20px 22px;
  color: var(--text);
  text-decoration: none;
  background: var(--flaeche);
  border-radius: var(--ecke);
  box-shadow: inset 0 0 0 1px var(--linie-stark);
  transition:
    background-color var(--dauer-kurz) ease,
    box-shadow var(--dauer-kurz) ease;
}

.wahl-titel {
  font-family: var(--f-titel);
  font-size: 1.375rem;
  line-height: 1.15;
}

.wahl-text {
  color: var(--text-leise);
  font-size: 0.9375rem;
}

@media (hover: hover) and (pointer: fine) {
  .wahl-kachel:hover {
    background: var(--grund-mitte);
    box-shadow: inset 0 0 0 1px var(--akzent);
  }
}

/* ---------- Abschluss-Aufruf ---------- */

.aufruf {
  background:
    radial-gradient(90% 120% at 100% 100%, var(--glut-stark), transparent 60%),
    var(--grund);
}

.aufruf-innen {
  display: grid;
  gap: 16px;
  max-width: 44rem;
}

.aufruf h2 {
  font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4rem);
  line-height: 1.02;
}

.aufruf p {
  margin: 0;
  color: var(--text-leise);
  font-size: 1.125rem;
}

.aufruf-aktionen {
  margin-top: 8px;
}

/* ---------- Anfrage: Formular ----------
   Ohne JavaScript stehen alle Schritte untereinander. anfrage.js setzt
   .formular--schritte und zeigt dann immer nur einen Schritt. */

.formular {
  display: grid;
  gap: clamp(40px, 5vw, 64px);
  max-width: 52rem;
}

.formular--schritte {
  gap: 28px;
}

.schritt {
  display: grid;
  gap: 24px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* hidden muss gewinnen, auch gegen display-Regeln der Knöpfe und Raster */
.schritt[hidden],
.bedingt[hidden],
.fortschritt[hidden],
.formular-steuerung [hidden] {
  display: none;
}

.schritt-kopf {
  display: grid;
  gap: 8px;
}

.schritt-zaehler {
  margin: 0;
  color: var(--akzent);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.schritt-titel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.75rem);
  line-height: 1.1;
}

.schritt-titel:focus {
  outline: none;
}

.schritt-text {
  margin: 0;
  color: var(--text-leise);
}

.feld-marke {
  color: var(--text-leise);
  font-family: var(--f-text);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.feld-marke--pflicht {
  color: var(--akzent);
}

/* Leistungen als große Kacheln */
.auswahl {
  display: grid;
  gap: 10px;
}

@media (min-width: 560px) {
  .auswahl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .auswahl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.auswahl-kachel {
  position: relative;
  display: grid;
  align-content: center;
  gap: 4px;
  min-height: 88px;
  padding: 18px 20px 18px 52px;
  cursor: pointer;
  background: var(--flaeche);
  border-radius: var(--ecke);
  box-shadow: inset 0 0 0 1px var(--linie-stark);
  transition:
    background-color var(--dauer-kurz) ease,
    box-shadow var(--dauer-kurz) ease;
}

/* Echtes Kästchen, gestaltet: bleibt per Tastatur bedienbar */
.auswahl-kachel input,
.chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.auswahl-kachel::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-radius: var(--ecke);
  box-shadow: inset 0 0 0 1.5px var(--feld-rand);
  transition:
    background-color var(--dauer-kurz) ease,
    box-shadow var(--dauer-kurz) ease;
}

.auswahl-kachel:has(:checked) {
  background: var(--grund-mitte);
  box-shadow: inset 0 0 0 1px var(--akzent);
}

.auswahl-kachel:has(:checked)::before {
  background: var(--akzent);
  box-shadow: none;
}

/* Häkchen als Maske, damit es die Textfarbe der Welt annimmt */
.auswahl-kachel:has(:checked)::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background: var(--akzent-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.5l3.2 3L14 5.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.5l3.2 3L14 5.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / 18px no-repeat;
}

.auswahl-kachel:has(:focus-visible),
.chip:has(:focus-visible) {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
}

.auswahl-titel {
  font-family: var(--f-titel);
  font-size: 1.3rem;
  line-height: 1.15;
}

.auswahl-text {
  color: var(--text-leise);
  font-size: 0.9375rem;
}

@media (hover: hover) and (pointer: fine) {
  .auswahl-kachel:hover {
    box-shadow: inset 0 0 0 1px var(--akzent);
  }
}

/* Kleine Auswahl als Chips */
.gruppe {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.gruppe legend,
.feld label {
  padding: 0;
  font-weight: 600;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  cursor: pointer;
  color: var(--text-leise);
  border-radius: var(--ecke);
  box-shadow: inset 0 0 0 1px var(--linie-stark);
  transition:
    background-color var(--dauer-kurz) ease,
    color var(--dauer-kurz) ease,
    box-shadow var(--dauer-kurz) ease;
}

.chip:has(:checked) {
  color: var(--knopf-text);
  background: var(--knopf-grund);
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .chip:hover {
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--akzent);
  }

  .chip:has(:checked):hover {
    color: var(--knopf-text);
  }
}

/* Eingabefelder */
.feld {
  display: grid;
  gap: 8px;
}

.feld input,
.feld textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  color: var(--text);
  font: inherit;
  background: var(--flaeche);
  border: 0;
  border-radius: var(--ecke);
  box-shadow: inset 0 0 0 1px var(--feld-rand);
  transition: box-shadow var(--dauer-kurz) ease;
}

.feld textarea {
  resize: vertical;
}

.feld input::placeholder,
.feld textarea::placeholder {
  color: var(--feld-hinweis);
}

.feld input:focus-visible,
.feld textarea:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}

.feld [aria-invalid="true"] {
  box-shadow: inset 0 0 0 1.5px var(--fehler);
}

/* Offene Vorgabe im Platzhaltertext: vor dem Onlinegang klären */
.feld [data-offen] {
  outline: 2px dashed #B08900;
  outline-offset: 2px;
}

.feld-fehler {
  margin: 0;
  color: var(--fehler);
  font-size: 0.9375rem;
  font-weight: 500;
}

.bedingt {
  display: grid;
  gap: 20px;
  padding: 20px;
  border-radius: var(--ecke);
  box-shadow: inset 0 0 0 1px var(--linie);
}

.bedingt h3 {
  font-size: 1.25rem;
}

.formular-datenschutz,
.formular-entwurf {
  margin: 0;
  color: var(--text-leise);
  font-size: 0.9375rem;
}

/* Nur für Programme sichtbar: Wer es ausfüllt, ist keiner. */
.lockfeld {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular-steuerung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

.formular-steuerung button.textlink {
  padding: 0;
  font: inherit;
  font-weight: 500;
  background: none;
  border: 0;
  cursor: pointer;
}

.formular-kurz {
  margin-left: auto;
}

.knopf[disabled] {
  cursor: progress;
  opacity: 0.7;
}

/* Fortschritt: nur mit JavaScript */
.fortschritt {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fortschritt li {
  display: grid;
  gap: 8px;
  color: var(--text-leise);
  font-size: 0.8125rem;
}

.fortschritt li::before {
  content: "";
  height: 2px;
  background: var(--linie-stark);
  border-radius: 1px;
  transition: background-color var(--dauer-mittel) var(--ease-out);
}

.fortschritt-erledigt::before,
.fortschritt [aria-current="step"]::before {
  background: var(--akzent);
}

.fortschritt [aria-current="step"] {
  color: var(--text);
}

.fortschritt-nummer {
  display: none;
}

.fortschritt-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 699px) {
  /* Am Handy nur die Leiste, der Name steht im Schritt selbst */
  .fortschritt-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}

/* ---------- Rechtstexte: ruhig und gut lesbar ---------- */

/* minmax(0, 1fr): lange Wörter dürfen die Spalte nicht verbreitern */
.rechtstext {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  max-width: 46rem;
}

.rechtstext-abschnitt {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  scroll-margin-top: calc(var(--kopf-hoehe) + 16px);
}

/* Silbentrennung für Wörter wie „Verbraucherstreitbeilegung“, die in
   breiten Titelschriften am Handy nicht in eine Zeile passen */
.rechtstext h2 {
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.875rem);
  line-height: 1.2;
  hyphens: auto;
  overflow-wrap: break-word;
}

.rechtstext p,
.rechtstext li {
  margin: 0;
  color: var(--text);
  line-height: 1.7;
}

.rechtstext ul,
.rechtstext ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 1.25em;
}

.rechtstext-verzeichnis {
  display: grid;
  gap: 12px;
  padding: 24px;
  border-radius: var(--ecke);
  box-shadow: inset 0 0 0 1px var(--linie);
}

.rechtstext-verzeichnis h2 {
  font-family: var(--f-text);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--neutral);
}

.rechtstext-verzeichnis a {
  color: var(--text-leise);
  text-decoration-color: var(--linie-stark);
  text-underline-offset: 4px;
}

.rechtstext-stand {
  color: var(--text-leise);
  font-size: 0.9375rem;
}

/* ---------- Fußzeile ---------- */

.fuss {
  padding: clamp(48px, 7vw, 88px) var(--innen) 32px;
  background: var(--grund);
  border-top: 1px solid var(--linie);
}

.fuss-innen {
  display: grid;
  gap: 36px;
}

.fuss-marke {
  display: grid;
  gap: 16px;
  max-width: 22rem;
}

.fuss-marke p {
  margin: 0;
  color: var(--text-leise);
}

.fuss-spalte h2 {
  margin: 0 0 8px;
  color: var(--neutral);
  font-family: var(--f-text);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.fuss-spalte ul {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fuss-spalte li {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-leise);
}

.fuss-spalte a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-leise);
  text-decoration: none;
  transition: color var(--dauer-kurz) ease;
}

@media (hover: hover) and (pointer: fine) {
  .fuss-spalte a:hover {
    color: var(--text);
  }
}

.fuss-hinweis {
  margin: 6px 0 0;
  color: var(--text-leise);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.fuss-unten {
  margin: 40px 0 0;
  padding-top: 24px;
  color: var(--text-leise);
  font-size: 0.875rem;
  border-top: 1px solid var(--linie);
}

@media (min-width: 700px) {
  .fuss-innen {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fuss-marke {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1000px) {
  .fuss-innen {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  }

  .fuss-marke {
    grid-column: auto;
  }

  /* Neben den Spalten wird die Marke auf deren Höhe gestreckt; ohne diese
     Zeile verteilt sich der Platz und das Logo rutscht unter die
     Spaltenüberschriften. Nur Bordeaux, die Gastwelten bleiben, wie sie sind. */
  :root:not([data-welt]) .fuss-marke {
    align-content: start;
  }
}

/* ---------- Bewegungssystem (GSAP, Lenis, Three.js) ----------
   Leitidee „Licht auf Lack“. Große Auftritte nach dem Skill
   „cinematic-gsap-lenis-motion-system“, Knöpfe und Menü nach „animate“.
   mit-bewegung setzt script.js nur, wenn GSAP geladen ist und Bewegung
   erwünscht ist; ohne die Klasse bleibt alles sichtbar wie bisher. */

.mit-bewegung [data-auftritt] {
  visibility: hidden;
}

/* Den Einstieg übernimmt GSAP, der CSS-Auftritt entfällt dann. */
.mit-bewegung .einstieg-text > * {
  animation: none;
}

/* Zeilenmasken von SplitText: etwas Luft nach unten, damit Unterlängen
   (g, p) und die Kursive nicht abgeschnitten werden. */
.zeile-mask {
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

/* Weiches Scrollen (Lenis), Regeln aus lenis.css */
html.lenis,
html.lenis body {
  height: auto;
}

html.lenis {
  scroll-behavior: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  /* Magnetknopf: translate gleitet weich hinter der Maus her. */
  [data-magnet] {
    transition:
      transform var(--dauer-kurz) var(--ease-out),
      background-color var(--dauer-kurz) ease,
      translate var(--dauer-lang) var(--ease-out);
  }

  /* Neigung der Kacheln zur Maus */
  .kachel {
    transition: transform var(--dauer-lang) var(--ease-out);
  }
}

/* Das DD als 3D-Kette (logo-3d.js). Die Bühne ist größer als das SVG: Das
   untere D hängt in Ruhe tiefer, und beide schwingen aus. In Logo-Einheiten
   reicht sie von x −260 bis 760 und y −60 bis 1080; die Kamera richtet sich
   danach. Erscheint per script. */
.logo-3d {
  position: absolute;
  left: -40.1%;
  top: -7.2%;
  width: 161%;
  height: 151.9%;
  opacity: 0;
  pointer-events: none;
}

/* Wildlife: Die Kette schwebt an der Liane von oben ein, dafür reicht die
   Bühne bis über den Einstieg hinaus (dort schneidet ihn der Einstieg ab). */
[data-welt="wildlife"] .logo-3d {
  top: -70%;
  height: 214.7%;
}

/* ---------- Bordeaux: Kopfzeile ----------
   Gilt nur in Bordeaux (kein data-welt), auf allen Seiten. Die Szenen der
   früheren Richtung „Bühne“ (Lackfilm, Lack-Fotos) sind seit dem
   Portal-Look entfernt. */

/* Kopfzeile: oben auf der Seite ohne Fläche über dem Einstieg. Sobald
   gescrollt wird, blendet eine deckende Fläche ein (script.js nimmt
   .kopf--oben weg), ebenso bei offenem Menü. Ohne JavaScript ist sie von
   Anfang an deckend. */
:root:not([data-welt]) .kopf--buehne {
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

:root:not([data-welt]) .kopf--buehne::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grund);
  box-shadow: 0 1px 0 var(--linie);
  transition: opacity var(--dauer-gleiten) ease;
}

:root:not([data-welt]) .kopf--oben::before {
  opacity: 0;
}

:root:not([data-welt]) .kopf--offen::before {
  opacity: 1;
}

:root:not([data-welt]) .kopf--buehne .knopf-kopf {
  background: var(--knopf-grund);
  color: var(--knopf-text);
  box-shadow: none;
}

:root:not([data-welt]) .kopf--buehne .navigation-balken {
  background: var(--akzent);
}

@media (hover: hover) and (pointer: fine) {
  :root:not([data-welt]) .kopf--buehne .knopf-kopf:hover {
    background: var(--knopf-hover);
    box-shadow: none;
  }
}

/* Einstieg: Der Film reicht bis unter die Kopfzeile. Der Rand oben wächst
   um dieselbe Höhe, der Inhalt bleibt also, wo er war. */

/* Die Überschrift richtet sich nach ihrer Spalte (cqi = 1 % der
   Spaltenbreite), nicht nach dem Fenster: Am Handy füllt „entscheiden.“
   die Breite (auf niedrigen Handys etwas kleiner, damit der Knopf im
   ersten Bild bleibt), am Rechner passt „Erst sehen, dann“ genau in eine
   Zeile. Dort bleibt sie immer zweizeilig: Eine dritte Zeile reichte auf
   großen Bildschirmen in den hellen Teil des Films (Kontrast 2,4:1). Ohne
   cqi (ältere Browser) bleibt die bisherige Größe. */

/* Schleier über dem Film: oben zusätzlich dunkel, damit die Kopfzeile
   lesbar bleibt, darunter offen für die Kette, dann dunkel für den Text. */

/* Zweiter Schleier, der am Text hängt statt an der Kopfzeile: Auf schmalen
   Handys (320 px) ist die Kopfzeile zweizeilig und der Text beginnt früher,
   als der Schleier oben dunkel wird (Kontrast der Oberzeile 4,0:1). Er
   läuft nach oben und unten weich aus, bleibt also ohne Kante, und liegt
   unter der Kette. */

/* Unten endet der Einstieg im reinen Grundton: Dort beginnt die Szene. */

/* Niedrige Fenster am Handy (bis 720 px, also auch ein übliches iPhone mit
   eingeblendeter Adressleiste): Kette und Abstände etwas kleiner, damit der
   Hauptknopf ganz im ersten Bild steht. Am Handy liegt er nicht mehr in der
   Kopfzeile, sondern im Menü. */

/* Szene „Leistungen“: Das Foto füllt das Fenster und bleibt stehen
   (sticky), solange der Abschnitt durchläuft. Überschrift und Leistungen
   liegen in denselben Rasterzeilen darüber. Kein Vorfahre darf overflow
   setzen, sonst bleibt das Foto nicht stehen. */

/* Der Zoom beim Scrollen (script.js) geht vom Lichtband aus. */

/* Handy: Das Foto steht zuerst kurz offen. Dann läuft der Text mit einem
   dunklen Schleier darüber, der mitscrollt. Oben und unten geht die Szene
   in den Grundton über. Der Text beginnt bald nach dem Einstieg und endet
   kurz vor dem Szenenende: Das Foto läuft unter den letzten Zeilen aus,
   statt danach eine leere Strecke zu füllen. */

/* Die Größen folgen der Textbreite: „Anfragen bekommen.“ (9,4
   Schriftgrößen breit) passt in eine Zeile, die Überschrift steht also
   dreizeilig. Dasselbe gilt unten für „Unternehmensprofil“. */

/* Leistungen als Zeilen mit Nummer statt als Kacheln: keine Fläche, kein
   Rahmen, kein Kantenlicht. Bewusst kompakt: fünf Zeilen sollen als eine
   Liste lesbar sein, nicht als fünf Bildschirme. */

/* Die Größe folgt der Textbreite: Die längste Überschrift,
   „Google-Unternehmensprofil“ (12,2 Schriftgrößen breit), passt in eine
   Zeile. */

/* Merkmale als Zeile mit Punkten davor (wie die Belege im Einstieg) statt
   als umrandete Schildchen */

/* Querformat ab 900 px: Der Text steht links auf der dunklen Seite des
   Fotos, das Lichtband bleibt rechts frei. Der Schleier liegt fest auf dem
   Foto. Die Textbreite endet vor dem Lichtband (bei etwa 55 % der
   Fensterbreite). */

/* ---------- Bordeaux: Bühne auf der ganzen Seite ----------
   Die ruhigen Abschnitte sprechen dieselbe Sprache wie die Szenen: große
   Überschriften, Zeilen mit Haarlinie und Nummer statt Karten, keine
   Flächen, keine Rahmen, keine Schildchen. Die Szene „Leistungen“ bleibt
   unberührt, ihre Regeln oben sind genauer. */

/* Unterseiten: Der Kopf reicht wie auf der Startseite bis unter die
   Kopfzeile, der Rand oben wächst um deren Höhe. */
:root:not([data-welt]) .einstieg--seite {
  margin-top: calc(-1 * var(--kopf-hoehe));
  padding-top: calc(var(--kopf-hoehe) + clamp(40px, 8vw, 112px));
}

:root:not([data-welt]) .einstieg--seite h1 {
  font-size: clamp(2.4rem, 1.2rem + 6vw, 6.5rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
}

/* Lange Wörter wie „Widerrufsbelehrung“ passen am schmalen Handy nicht in
   eine Zeile. Nur dort trennen, und nur Wörter ab zwölf Buchstaben. */
@media (max-width: 599px) {
  :root:not([data-welt]) :is(h1, h2) {
    overflow-wrap: anywhere;
    hyphens: auto;
    hyphenate-limit-chars: 12 5 5;
  }
}

:root:not([data-welt]) .abschnitt-kopf {
  gap: clamp(14px, 1.6vw, 22px);
  max-width: 60rem;
  margin-bottom: clamp(32px, 5vw, 72px);
}

:root:not([data-welt]) :is(.abschnitt-kopf, .ueber-kurz-text) h2 {
  font-size: clamp(2rem, 1rem + 5vw, 5rem);
  line-height: 1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

:root:not([data-welt]) .abschnitt-kopf p {
  max-width: 38rem;
}

/* Kacheln werden Zeilen: Haarlinie oben, Nummer statt Kantenlicht. */
:root:not([data-welt]) .kacheln {
  gap: 0 clamp(24px, 4vw, 64px);
  counter-reset: zeile;
}

:root:not([data-welt]) .kachel {
  min-height: 0;
  padding: clamp(20px, 2.4vw, 28px) 0 clamp(28px, 3.4vw, 44px);
  overflow: visible;
  background: none;
  border-radius: 0;
  box-shadow: inset 0 1px 0 var(--linie-stark);
  counter-increment: zeile;
}

:root:not([data-welt]) .kachel::before {
  content: counter(zeile, decimal-leading-zero);
  position: static;
  inset: auto;
  padding: 0;
  color: var(--akzent);
  font: 600 0.8125rem/1 var(--f-text);
  letter-spacing: 0.14em;
  background: none;
  border-radius: 0;
  -webkit-mask: none;
  mask: none;
}

:root:not([data-welt]) .kachel::after {
  content: none;
}

:root:not([data-welt]) .merkmale {
  gap: 6px 22px;
  margin: 2px 0 0;
}

:root:not([data-welt]) .merkmale li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  border-radius: 0;
  box-shadow: none;
}

:root:not([data-welt]) .merkmale li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  background: var(--akzent);
  border-radius: var(--ecke);
}

/* Preise: Spalten statt Karten. Das empfohlene Paket trägt eine Akzentlinie
   und seine Marke als Zeile über dem Namen. */
:root:not([data-welt]) .kacheln--preise {
  gap: 12px clamp(24px, 3vw, 48px);
}

:root:not([data-welt]) .preis {
  padding-top: calc(clamp(20px, 2.4vw, 28px) + 22px);
}

:root:not([data-welt]) .preis::before {
  content: none;
}

:root:not([data-welt]) .preis--empfohlen {
  box-shadow: inset 0 2px 0 var(--akzent);
}

:root:not([data-welt]) .kachel .preis-marke {
  top: 16px;
  right: auto;
  left: 0;
  padding: 0;
  color: var(--akzent);
  background: none;
  border-radius: 0;
}

/* Der Zusatz steht immer unter dem Betrag, sonst bricht er je nach Länge
   mal um und mal nicht, und die drei Spalten sehen ungleich aus. */
:root:not([data-welt]) .kachel .preis-betrag {
  display: grid;
  gap: 8px;
}

/* Nur das empfohlene Paket trägt den gefüllten Knopf. Die beiden anderen
   bleiben Umriss, damit nicht drei gleich laute Knöpfe nebeneinander stehen. */
:root:not([data-welt]) .preis:not(.preis--empfohlen) .preis-fuss .knopf {
  color: var(--text);
  background: none;
  box-shadow: inset 0 0 0 1px var(--akzent);
}

@media (hover: hover) and (pointer: fine) {
  :root:not([data-welt]) .preis:not(.preis--empfohlen) .preis-fuss .knopf:hover {
    color: var(--knopf-text);
    background: var(--knopf-grund);
  }
}

:root:not([data-welt]) .bald {
  max-width: 60rem;
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

:root:not([data-welt]) .bald-marke {
  padding: 0;
  color: var(--akzent);
  background: none;
  border-radius: 0;
}

:root:not([data-welt]) .bald h2 {
  font-size: clamp(2rem, 1rem + 4.2vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.015em;
}

:root:not([data-welt]) .schritte {
  gap: 0 clamp(24px, 4vw, 56px);
}

:root:not([data-welt]) .schritte li {
  gap: 12px;
  padding: 20px 0 clamp(28px, 3.4vw, 44px);
  background: none;
  border-radius: 0;
  box-shadow: inset 0 1px 0 var(--linie-stark);
}

:root:not([data-welt]) .schritt-nummer {
  font: 600 0.8125rem/1 var(--f-text);
  letter-spacing: 0.14em;
}

:root:not([data-welt]) .schritte h3 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.08;
}

:root:not([data-welt]) .team {
  gap: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 56px);
}

:root:not([data-welt]) .person {
  overflow: visible;
  padding-bottom: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

:root:not([data-welt]) .person > :not(.foto-rahmen) {
  padding-inline: 0;
}

:root:not([data-welt]) :is(.foto-rahmen, .projekt-bild) {
  box-shadow: none;
}

:root:not([data-welt]) .projekte {
  gap: clamp(40px, 6vw, 88px);
}

:root:not([data-welt]) .projekt {
  gap: clamp(16px, 2.4vw, 32px) clamp(24px, 4vw, 56px);
  overflow: visible;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

:root:not([data-welt]) .projekt-text {
  padding: 0;
}

/* Das Gerätefenster ist ein Gegenstand und behält deshalb seinen Rand. */
:root:not([data-welt]) .vorschau {
  border-bottom: 0;
  box-shadow: 0 0 0 1px var(--linie-stark);
}

/* Wahl der Leistung: Zeilen mit Pfeil statt Kacheln. */
:root:not([data-welt]) .wahl {
  gap: 0 clamp(24px, 4vw, 56px);
}

:root:not([data-welt]) .wahl-kachel {
  position: relative;
  min-height: 88px;
  padding: 18px 32px 18px 0;
  background: none;
  border-radius: 0;
  box-shadow: inset 0 1px 0 var(--linie-stark);
}

:root:not([data-welt]) .wahl-kachel::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6px;
  width: 9px;
  height: 9px;
  margin-top: -5px;
  border-top: 1.5px solid var(--akzent);
  border-right: 1.5px solid var(--akzent);
  transform: rotate(45deg);
  transition: transform var(--dauer-kurz) ease;
}

:root:not([data-welt]) .wahl-titel {
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
}

@media (hover: hover) and (pointer: fine) {
  :root:not([data-welt]) .wahl-kachel:hover {
    background: none;
    box-shadow: inset 0 1px 0 var(--akzent);
  }

  :root:not([data-welt]) .wahl-kachel:hover::after {
    transform: translateX(4px) rotate(45deg);
  }
}

/* Formular: Die Auswahl steht als Zeile mit Kästchen, die Felder bleiben
   Felder. */
:root:not([data-welt]) .auswahl {
  gap: 0 clamp(20px, 3vw, 40px);
}

:root:not([data-welt]) .auswahl-kachel {
  min-height: 72px;
  padding: 16px 0 16px 34px;
  background: none;
  border-radius: 0;
  box-shadow: inset 0 -1px 0 var(--linie-stark);
}

:root:not([data-welt]) .auswahl-kachel::before,
:root:not([data-welt]) .auswahl-kachel:has(:checked)::after {
  left: 0;
}

:root:not([data-welt]) .auswahl-kachel:has(:checked) {
  background: none;
  box-shadow: inset 0 -1px 0 var(--akzent);
}

@media (hover: hover) and (pointer: fine) {
  :root:not([data-welt]) .auswahl-kachel:hover {
    box-shadow: inset 0 -1px 0 var(--akzent);
  }
}

:root:not([data-welt]) .bedingt {
  padding: 4px 0 4px 20px;
  border-radius: 0;
  box-shadow: inset 1px 0 0 var(--linie-stark);
}

:root:not([data-welt]) .rechtstext-verzeichnis {
  padding: 20px 0;
  border-radius: 0;
  box-shadow: inset 0 1px 0 var(--linie-stark), inset 0 -1px 0 var(--linie-stark);
}

/* ---------- Bordeaux, Startseite: Portal ----------
   Art déco auf einer Mittelachse (Entwurf „Portal“, freigegeben am
   03.10.2026). Der erste Bildschirm ist ein Portal: doppelter Goldrahmen mit
   gestuften Ecken, dahinter der Schweif: sehr feine Fäden in Rot und Gold,
   die kreuz und quer übereinander liegen und zusammen einen großen Schwung
   von oben links nach unten rechts bilden. Unter dem Portal begleitet er
   die ganze Seite: Durch jeden Abstand zwischen zwei Abschnitten zieht ein
   Schwung in derselben Richtung, dahinter läuft er dünner zurück. Er wächst
   beim Scrollen mit. Vorbild ist das Lackbild des Users („DD WEBPAGE
   INSPO“), vom User am 05.10.2026 freigegeben. Gezeichnet wird er von
   portal-schweif.js mit WebGL, samt Wind, Lichtpulsen und dem Licht um
   Maus und Finger. Verworfen sind davor: der Fächer aus der Mitte, die
   geraden Randsträhnen, der dünne gezeichnete Faden, Seidenfotos („zu
   haarig und echt“), ein Band paralleler Linien und ein glattes Lackband.
   Der Ablauf steht als Fries mit römischen Ziffern, die Leistungen als
   Karte mit Punktlinien und Preisen. Schrift: Fraunces und Archivo.
   Geltungsbereich: Bordeaux. Was alle Seiten tragen (Farben, Schriften,
   Kerbrahmen, Knöpfe, Kopfzeile, Abschnittsköpfe, Fries, Karte) beginnt mit
   :root:not([data-welt])[data-look="portal"], das Portal mit Schweif nur
   auf der Startseite mit :root:not([data-welt])[data-seite="start"]. Die
   Unterseiten ergänzt der Block „Bordeaux, Unterseiten“ weiter unten. Die
   Gastwelten behalten ihre eigene Sprache.
   Bewegung: bewegt werden nur transform, translate und opacity. Die langen
   Umlaufzeiten (9 bis 70 s) und das langsame Einblenden des Schmucks
   stehen bewusst außerhalb der Bewegungsskala: Es sind Dauerschleifen im
   Hintergrund, keine Auftritte. */

/* Gastwelten: Der Schmuck entfällt, die Hüllen lösen sich auf. Ihr Inhalt
   steht dann wie früher direkt im Abschnitt. */
.portal-locken,
.portal-zier,
.portal-straehnen,
.portal-trenner,
.portal-ziffer,
.portal-frei,
.portal-punkte,
.portal-preis,
.portal-karte-fuss {
  display: none;
}

.portal-rahmen,
.portal-rahmen-innen,
.portal-karte {
  display: contents;
}

/* Farbe der Browserleiste am Handy (script.js liest sie hier ab). */
:root:not([data-welt])[data-look="portal"] {
  --browser-farbe: #150308;
}

/* Die Werte hängen an #seite und nicht an :root, damit das Intro (liegt
   außerhalb von #seite) seine eigenen Farben und seine Schrift behält.
   --p-k ist die Größe der Eckstufe, --p-lb die Breite der Seitensträhne
   (ihre Kachel ist sechsmal so hoch wie breit). */
:root:not([data-welt])[data-look="portal"] #seite {
  --p-gold: #C9A45C;
  --p-beige: #E9DCC3;
  --p-wein: #2B0A14;
  --p-linie: rgba(201, 164, 92, 0.4);
  --p-rand: clamp(12px, 3vw, 40px);
  --p-px: clamp(14px, 5vw, 64px);
  --p-k: 12px;
  --p-lb: clamp(56px, 10vw, 168px);
  --p-kh: calc(var(--p-lb) * 6);

  --f-titel: "Fraunces", "Bodoni 72", Didot, Georgia, serif;
  --f-text: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titel-gewicht: 300;
  --titel-sperrung: -0.015em;
  --akzent: var(--p-gold);
  --akzent-text: #150308;
  --text-leise: var(--p-beige);
  --neutral: var(--p-beige);
  --knopf-grund: var(--p-gold);
  --knopf-hover: var(--p-gold);
  --knopf-text: #150308;
  --linie: rgba(201, 164, 92, 0.22);
  --linie-stark: var(--p-linie);
  --ecke: 0px;

  /* body hat die Schrift schon aufgelöst und vererbt Hanken Grotesk. */
  font: 400 1rem/1.55 var(--f-text);
}

@media (min-width: 900px) {
  :root:not([data-welt])[data-look="portal"] #seite {
    --p-k: 20px;
  }
}

:root:not([data-welt])[data-look="portal"] h3 {
  font-weight: 400;
}

/* Kerbrahmen: eine Haarlinie in Gold, deren Ecken als Quadrat nach innen
   gestuft sind. Zwei Flächen liegen übereinander (Gold, 1 px kleiner die
   Füllung), beide mit derselben Form beschnitten. So bleibt überall genau
   1 px Gold stehen, ohne Bilddatei. */
:root:not([data-welt])[data-look="portal"] :is(.portal-rahmen, .portal-rahmen-innen, .portal-karte)::before,
:root:not([data-welt])[data-look="portal"] :is(.portal-rahmen, .portal-rahmen-innen, .portal-karte)::after {
  content: "";
  position: absolute;
  z-index: -1;
}

:root:not([data-welt])[data-look="portal"] :is(.portal-rahmen, .portal-rahmen-innen, .portal-karte)::before {
  inset: 0;
  background: var(--p-gold);
}

:root:not([data-welt])[data-look="portal"] :is(.portal-rahmen, .portal-rahmen-innen, .portal-karte)::after {
  inset: 1px;
  background: var(--grund);
}

:root:not([data-welt])[data-look="portal"] :is(.portal-rahmen, .portal-rahmen-innen, .portal-karte)::before,
:root:not([data-welt])[data-look="portal"] :is(.portal-rahmen, .portal-rahmen-innen, .portal-karte)::after,
:root:not([data-welt])[data-look="portal"] .knopf,
:root:not([data-welt])[data-look="portal"] .knopf::before {
  clip-path: polygon(
    var(--p-k) 0, calc(100% - var(--p-k)) 0, calc(100% - var(--p-k)) var(--p-k),
    100% var(--p-k), 100% calc(100% - var(--p-k)), calc(100% - var(--p-k)) calc(100% - var(--p-k)),
    calc(100% - var(--p-k)) 100%, var(--p-k) 100%, var(--p-k) calc(100% - var(--p-k)),
    0 calc(100% - var(--p-k)), 0 var(--p-k), var(--p-k) var(--p-k)
  );
}

/* Rauten auf der oberen Rahmenlinie */
:root:not([data-welt])[data-look="portal"] .portal-zier {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  background: var(--grund);
  transform: translate(-50%, -50%);
}

:root:not([data-welt])[data-look="portal"] .portal-zier span {
  width: 5px;
  height: 5px;
  background: var(--p-gold);
  transform: rotate(45deg);
}

:root:not([data-welt])[data-look="portal"] .portal-zier span:nth-child(2) {
  width: 8px;
  height: 8px;
}

/* Ebenen: main wird zur Ebenengruppe. Darin liegen unter dem Inhalt die
   Fläche der Karte (−2) und darunter die Seitensträhnen (−3). Die
   Abschnitte haben deshalb keinen eigenen Grund, er würde beide verdecken.
   Die Fußzeile deckt wieder. */
:root:not([data-welt])[data-seite="start"] main {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

:root:not([data-welt])[data-seite="start"] .fuss {
  position: relative;
  z-index: 1;
  background: var(--grund);
}

/* Der Abstand nach oben ist groß: Dort zieht der Schweif mit einem dicken
   Schwung quer durchs Bild (portal-schweif.js liest die Maße). */
:root:not([data-welt])[data-seite="start"] .abschnitt {
  padding: clamp(104px, 19svh, 210px) max(var(--innen), calc(var(--p-lb) * 0.46)) 0;
  background: none;
  border-top: 0;
}

:root:not([data-welt])[data-seite="start"] .abschnitt:last-child {
  padding-bottom: clamp(96px, 16svh, 180px);
}

@media (min-width: 1200px) {
  :root:not([data-welt])[data-seite="start"] .abschnitt {
    padding-inline: max(var(--innen), calc(var(--p-lb) * 0.74));
  }
}

/* --- Knopf und Textlink --- */

:root:not([data-welt])[data-look="portal"] .knopf {
  --p-k: 7px;
  min-height: 0;
  padding: 17px 20px;
  background: var(--p-gold);
  color: var(--grund);
  font: 700 0.76rem/1.25 var(--f-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  white-space: normal;
  border-radius: 0;
  box-shadow: none;
  transition:
    transform var(--dauer-lang) var(--ease-out),
    translate var(--dauer-lang) var(--ease-out);
}

/* Die Kerbform schneidet einen Fokusrahmen außen ab, deshalb sitzt er innen. */
:root:not([data-welt])[data-look="portal"] .knopf:focus-visible {
  outline: 2px solid var(--grund);
  outline-offset: -6px;
}

@media (min-width: 480px) {
  :root:not([data-welt])[data-look="portal"] .knopf {
    padding: 18px 32px;
    font-size: 0.8rem;
    letter-spacing: 0.16em;
  }
}

/* Umriss-Knöpfe (Preise, die nicht empfohlenen Pakete): dieselbe Kerbform
   als Haarlinie. Der Knopf selbst ist die goldene Linie, die Füllung liegt
   1 px kleiner darüber und verschwindet beim Zeigen. */
:root:not([data-welt])[data-look="portal"] .preis:not(.preis--empfohlen) .preis-fuss .knopf {
  position: relative;
  isolation: isolate;
  color: var(--p-gold);
  background: var(--p-gold);
  box-shadow: none;
}

:root:not([data-welt])[data-look="portal"] .preis:not(.preis--empfohlen) .preis-fuss .knopf::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1px;
  background: var(--grund);
  transition: opacity var(--dauer-kurz) ease;
}

:root:not([data-welt])[data-look="portal"] .preis:not(.preis--empfohlen) .preis-fuss .knopf:focus-visible {
  outline-color: var(--p-gold);
}

:root:not([data-welt])[data-look="portal"] .textlink {
  font: 600 0.72rem/1.3 var(--f-text);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration-color: var(--p-gold);
  text-underline-offset: 7px;
}

@media (hover: hover) and (pointer: fine) {
  :root:not([data-welt])[data-look="portal"] .knopf:hover {
    transform: translateY(-3px);
  }

  :root:not([data-welt])[data-look="portal"] .preis:not(.preis--empfohlen) .preis-fuss .knopf:hover {
    color: var(--grund);
  }

  :root:not([data-welt])[data-look="portal"] .preis:not(.preis--empfohlen) .preis-fuss .knopf:hover::before {
    opacity: 0;
  }

  :root:not([data-welt])[data-look="portal"] .textlink:hover {
    text-decoration-color: transparent;
  }
}

:root:not([data-welt])[data-look="portal"] .knopf:active {
  transform: scale(0.97);
}

/* --- Kopfzeile: Marke in gesperrten Versalien, Logo in Gold --- */

:root:not([data-welt])[data-look="portal"] .marke-wort {
  font: 600 0.8rem/1 var(--f-text);
  font-stretch: 125%;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* Das Logo wird flächig Gold: Bordeaux auf fast schwarzem Grund wäre kaum
   zu sehen. Die Farbe steht hier fest, weil der Logo-Speicher außerhalb von
   #seite liegt. Ändert logo.mjs die Verläufe, die Regeln anpassen. */
:root:not([data-welt])[data-look="portal"] :is(#dd-band, #dd-rand-a, #dd-rand-b) stop {
  stop-color: #C9A45C;
}

:root:not([data-welt])[data-look="portal"] :is(#dd-glanz, #dd-glanzpunkt) stop {
  stop-opacity: 0;
}

/* Der Hauptknopf oben ist hier nur goldene Schrift: Der gefüllte Knopf
   steht schon im Portal, zwei davon wären im ersten Bild einer zu viel. */
:root:not([data-welt])[data-look="portal"] .kopf--buehne .knopf-kopf {
  min-height: 44px;
  padding: 0;
  background: none;
  color: var(--p-gold);
  font: 500 0.7rem/1 var(--f-text);
  letter-spacing: 0.16em;
  white-space: nowrap;
  clip-path: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: transparent;
  text-underline-offset: 7px;
  transition: text-decoration-color var(--dauer-kurz) ease;
}

:root:not([data-welt])[data-look="portal"] .kopf--buehne .knopf-kopf:focus-visible {
  outline: 2px solid var(--p-gold);
  outline-offset: 3px;
}

@media (min-width: 1024px) {
  :root:not([data-welt])[data-look="portal"] .navigation a:not(.knopf) {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
}

:root:not([data-welt])[data-look="portal"] .welt-knopf {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Gesperrte Versalien brauchen Platz. Bis 1280 px rückt die Kopfzeile
   deshalb enger zusammen, und der Knopf „Design“ zeigt nur sein Zeichen. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  :root:not([data-welt])[data-look="portal"] .kopf-innen {
    column-gap: 16px;
  }

  :root:not([data-welt])[data-look="portal"] .marke-wort {
    font-stretch: 110%;
    letter-spacing: 0.2em;
  }

  :root:not([data-welt])[data-look="portal"] .navigation {
    gap: 16px;
  }

  :root:not([data-welt])[data-look="portal"] .navigation a:not(.knopf) {
    letter-spacing: 0.1em;
  }

  :root:not([data-welt])[data-look="portal"] .welt-knopf-text {
    display: none;
  }

  :root:not([data-welt])[data-look="portal"] .kopf--buehne .knopf-kopf {
    letter-spacing: 0.08em;
  }
}

@media (hover: hover) and (pointer: fine) {
  :root:not([data-welt])[data-look="portal"] .kopf--buehne .knopf-kopf:hover {
    background: none;
    transform: none;
    text-decoration-color: var(--p-gold);
  }
}

/* --- Einstieg: das Portal --- */

:root:not([data-welt])[data-seite="start"] .einstieg {
  display: block;
  padding: 10px var(--p-rand) 0;
  background: none;
}

/* Mausschein und Kette gehören zur früheren Gestaltung und zu den
   Gastwelten. Im Portal tragen die Strähnen und ihr Licht das Bild. */
:root:not([data-welt])[data-seite="start"] :is(.einstieg-schein, .einstieg-zeichen) {
  display: none;
}

:root:not([data-welt])[data-seite="start"] .portal-rahmen {
  display: block;
  position: relative;
  isolation: isolate;
  padding: 7px;
}

/* Der innere Rahmen ist ein Raster mit festen Zeilen: Luft, Oberzeile,
   Titel, Text, Knopf, Luft, Sockel. .einstieg-text löst sich auf, seine
   Kinder stehen direkt im Raster. So kann der Sockel (die Belege) am Fuß des
   Rahmens stehen und bleibt trotzdem Teil von .einstieg-text.
   Die Rahmenflächen rücken eine Ebene tiefer, damit die Strähnen zwischen
   Füllung und Text liegen. Der warme Schein am Ursprung des Fächers gehört
   zur Füllung, so liegt er unter den Strähnen. */
:root:not([data-welt])[data-seite="start"] .portal-rahmen-innen {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows:
    minmax(clamp(40px, 8svh, 88px), 1fr) auto auto auto auto
    minmax(clamp(36px, 7svh, 72px), 1fr) auto;
}

:root:not([data-welt])[data-seite="start"] .portal-rahmen-innen::before,
:root:not([data-welt])[data-seite="start"] .portal-rahmen-innen::after {
  z-index: -2;
}

:root:not([data-welt])[data-seite="start"] .portal-rahmen-innen::after {
  background:
    radial-gradient(ellipse 64% 60% at 50% 42%, rgba(58, 11, 23, 0.8), rgba(58, 11, 23, 0) 74%),
    var(--grund);
}

@media (min-width: 900px) {
  :root:not([data-welt])[data-seite="start"] .einstieg {
    padding-top: 6px;
  }

  :root:not([data-welt])[data-seite="start"] .portal-rahmen {
    padding: 9px;
  }

  /* Das Portal füllt das erste Bild: Fensterhöhe abzüglich Kopfzeile,
     Rahmenrand und etwas Luft darunter. */
  :root:not([data-welt])[data-seite="start"] .portal-rahmen-innen {
    min-height: calc(100svh - var(--kopf-hoehe) - 34px);
  }
}

/* Schweif im Einstieg: Die Fläche hinter dem Text, in die portal-schweif.js
   seine Leinwand hängt. Der Schwung zieht von oben links nach unten rechts
   über den Rahmen hinaus. Ohne Skript oder WebGL bleibt die Fläche leer.
   Sie belegt die Rasterzeilen über dem Sockel. */
:root:not([data-welt])[data-seite="start"] .portal-straehnen {
  /* Ruhige Zone hinter dem Text: Dort bleibt der Schweif leiser, damit auch
     die kleine goldene Schrift genug Kontrast behält. Auf schmalen
     Bildschirmen füllt der Text fast den ganzen Rahmen, die Zone ist dort
     breiter und dafür etwas weniger gedämpft. */
  --ruhe: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0, 0, 0, 0.29) 62%, #000 100%);
  display: block;
  position: absolute;
  z-index: -1;
  grid-row: 1 / 7;
  grid-column: 1;
  inset: 1px 1px 0;
  overflow: hidden;
  pointer-events: none;
  /* Nur die oberen Ecken sind gestuft, unten schließt der Sockel an. */
  clip-path: polygon(
    var(--p-k) 0, calc(100% - var(--p-k)) 0, calc(100% - var(--p-k)) var(--p-k),
    100% var(--p-k), 100% 100%, 0 100%, 0 var(--p-k), var(--p-k) var(--p-k)
  );
  -webkit-mask-image: var(--ruhe);
  mask-image: var(--ruhe);
  animation: einblenden 2.6s ease 0.1s both;
}

@media (min-width: 900px) {
  :root:not([data-welt])[data-seite="start"] .portal-straehnen {
    --ruhe: radial-gradient(ellipse 50% 62% at 50% 47%, rgba(0, 0, 0, 0.26) 50%, #000 92%);
  }
}

/* In flachen Fenstern rückt die goldene Oberzeile dicht an den oberen Rand
   des Rahmens. Die ruhige Zone reicht dort weiter nach oben. */
@media (min-width: 900px) and (max-height: 799px) {
  :root:not([data-welt])[data-seite="start"] .portal-straehnen {
    --ruhe: radial-gradient(ellipse 52% 72% at 50% 44%, rgba(0, 0, 0, 0.26) 52%, #000 92%);
  }
}

/* Ohne WebGL (oder wenn das Modul nicht lädt) ein Standbild des Schweifs.
   Der Browser holt es nur, wenn diese Regel greift. Aufgenommen bei
   1600 × 900, der Fäden-Bereich liegt darin bei 50 bis 1550 × 85 bis 830:
   Größe und Lage legen genau diesen Bereich in die Fläche, mindestens so
   hoch wie das Fenster. Am Handy reicht „cover“. */
:root:not([data-welt])[data-seite="start"].portal-ohne-webgl .portal-straehnen {
  background: url("/assets/portal/schweif-standbild.webp") 50% 55% / max(106.667%, calc(100svh * 1.9)) auto no-repeat;
}

@media (max-width: 899px) {
  :root:not([data-welt])[data-seite="start"].portal-ohne-webgl .portal-straehnen {
    background-position: center;
    background-size: cover;
  }
}

/* Leinwände von portal-schweif.js. Sie blenden ein, sobald das erste Bild
   gezeichnet ist (.portal-schweif-an an <html>). */
:root:not([data-welt])[data-seite="start"] .portal-schweif {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--dauer-auftritt) ease;
}

:root:not([data-welt])[data-seite="start"].portal-schweif-an .portal-schweif {
  opacity: 1;
}

/* Kleine Schrift vor den Fäden: Ein dunkler Hof in der Farbe des Grunds
   hält sie lesbar, auch wenn das Licht gerade dahinter steht. Vor dunklem
   Grund ist er nicht zu sehen. */
:root:not([data-welt])[data-seite="start"] .einstieg .oberzeile,
:root:not([data-welt])[data-seite="start"] .einstieg .einstieg-unterzeile,
:root:not([data-welt])[data-seite="start"] .einstieg .textlink {
  text-shadow: 0 0 4px var(--grund), 0 0 10px var(--grund), 0 0 18px var(--grund);
}

/* Solange das Intro deckt, wartet auch der Schmuck. */
:root:not([data-welt])[data-seite="start"].intro-bereit .portal-straehnen {
  animation-play-state: paused;
}

:root:not([data-welt])[data-seite="start"] .einstieg-text {
  display: contents;
}

:root:not([data-welt])[data-seite="start"] .einstieg-text > * {
  grid-column: 1;
  justify-self: center;
  margin-inline: var(--p-px);
  text-align: center;
}

:root:not([data-welt])[data-seite="start"] .einstieg .oberzeile {
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.24em;
  text-wrap: balance;
}

:root:not([data-welt])[data-seite="start"] .einstieg .oberzeile::before,
:root:not([data-welt])[data-seite="start"] .einstieg .oberzeile::after {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  background: var(--p-gold);
  transform: rotate(45deg);
}

/* Am Handy wächst der Titel schneller (10,6vw), damit er die Rahmenbreite
   nutzt; ab etwa 735 px übernimmt die flachere Steigung für große Schirme.
   Jede Zeile des Titels ist ein eigener Block: Der Umbruch steht fest und
   ist während des Auftritts derselbe wie danach. */
:root:not([data-welt])[data-seite="start"] .einstieg h1 {
  grid-row: 3;
  margin-top: clamp(20px, 4svh, 36px);
  font: 300 clamp(2rem, max(7.4vw, min(10.6vw, 3.4rem)), 6.6rem)/0.98 var(--f-titel);
  letter-spacing: -0.022em;
}

:root:not([data-welt])[data-seite="start"] .einstieg h1 .portal-zeile {
  display: block;
}

:root:not([data-welt])[data-seite="start"] .einstieg-unterzeile {
  grid-row: 4;
  max-width: 34rem;
  margin-top: clamp(20px, 3.5svh, 30px);
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  line-height: 1.55;
}

:root:not([data-welt])[data-seite="start"] .einstieg-aktionen {
  grid-row: 5;
  display: grid;
  justify-items: center;
  gap: 14px;
  margin-top: clamp(26px, 4.5svh, 40px);
}

/* Sockel: Die drei Belege tragen das Portal. Er lässt die Haarlinie des
   Rahmens frei (1 px Rand) und folgt unten dessen gestuften Ecken. */
:root:not([data-welt])[data-seite="start"] .einstieg .belege {
  --p-kk: calc(var(--p-k) - 1px);
  grid-row: 7;
  justify-self: stretch;
  display: grid;
  gap: 0;
  margin: 0 1px 1px;
  border-top: 1px solid var(--p-linie);
  background: var(--grund);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  clip-path: polygon(
    0 0, 100% 0, 100% calc(100% - var(--p-kk)), calc(100% - var(--p-kk)) calc(100% - var(--p-kk)),
    calc(100% - var(--p-kk)) 100%, var(--p-kk) 100%, var(--p-kk) calc(100% - var(--p-kk)),
    0 calc(100% - var(--p-kk))
  );
}

:root:not([data-welt])[data-seite="start"] .einstieg .belege li {
  display: block;
  padding: 13px 14px;
  text-align: center;
}

:root:not([data-welt])[data-seite="start"] .einstieg .belege li::before {
  content: none;
}

:root:not([data-welt])[data-seite="start"] .einstieg .belege li + li {
  border-top: 1px solid var(--p-linie);
}

@media (min-width: 760px) {
  :root:not([data-welt])[data-seite="start"] .einstieg .belege {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  :root:not([data-welt])[data-seite="start"] .einstieg .belege li {
    padding: 16px 14px;
  }

  :root:not([data-welt])[data-seite="start"] .einstieg .belege li + li {
    border-top: 0;
    border-left: 1px solid var(--p-linie);
  }
}

/* --- Schweif unter dem Portal: Er begleitet die ganze Seite und liegt
   unter allem anderen, auch unter der Karte. Weg, Fäden, Licht und das
   Wachsen beim Scrollen kommen aus portal-schweif.js (WebGL); ohne Skript
   bleibt die Bühne leer.
   .portal-locken ist die Bühne: vom Fuß des Portals bis zum Ende von main.
   Sie schneidet alles Überstehende ab. Als absolut gesetztes Kind des
   Rasters von main beginnt sie an dessen zweiter Zeile, ohne eine eigene
   Hülle um die Abschnitte. Die Leinwand darin ist nur etwa zwei Fenster hoch
   und rückt beim Scrollen nach (transform, Höhe setzt das Skript). --- */

:root:not([data-welt])[data-seite="start"] .portal-locken {
  display: block;
  position: absolute;
  z-index: -3;
  grid-row-start: 2;
  grid-column: 1;
  inset: -34vh 0 0;
  overflow: hidden;
  overflow: clip;
  pointer-events: none;
}

:root:not([data-welt])[data-seite="start"] .portal-schweif-seite {
  height: 200vh;
}

/* --- Abschnittsköpfe: auf der Mittelachse, mit Raute zwischen zwei Linien --- */

:root:not([data-welt])[data-look="portal"] .abschnitt-kopf {
  justify-items: center;
  gap: 0;
  max-width: 46rem;
  margin: 0 auto clamp(40px, 7svh, 72px);
  text-align: center;
}

:root:not([data-welt])[data-look="portal"] .portal-trenner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 28px;
}

:root:not([data-welt])[data-look="portal"] .portal-trenner::before,
:root:not([data-welt])[data-look="portal"] .portal-trenner::after {
  content: "";
  width: min(120px, 22vw);
  height: 1px;
  background: var(--p-gold);
}

:root:not([data-welt])[data-look="portal"] .portal-trenner span {
  width: 8px;
  height: 8px;
  background: var(--p-gold);
  transform: rotate(45deg);
}

:root:not([data-welt])[data-look="portal"] :is(.abschnitt-kopf, .ueber-kurz-text, .bald) h2 {
  font: 300 clamp(2rem, 4.6vw, 3.6rem)/1.06 var(--f-titel);
  letter-spacing: -0.015em;
}

:root:not([data-welt])[data-look="portal"] .abschnitt-kopf p {
  max-width: none;
  margin-top: 18px;
  font-size: 1.05rem;
}

:root:not([data-welt])[data-look="portal"] .abschnitt-mehr {
  text-align: center;
}

/* --- Fries: vier Schritte, römisch gezählt --- */

:root:not([data-welt])[data-look="portal"] .schritte {
  gap: 0;
  max-width: 78rem;
  margin: 0 auto;
  border-top: 1px solid var(--p-linie);
  border-bottom: 1px solid var(--p-linie);
}

:root:not([data-welt])[data-look="portal"] .schritte li {
  justify-items: center;
  gap: 0;
  padding: 30px 20px 34px;
  text-align: center;
  background: none;
  box-shadow: none;
}

:root:not([data-welt])[data-look="portal"] .schritte li + li {
  border-top: 1px solid var(--p-linie);
}

:root:not([data-welt])[data-look="portal"] .schritt-nummer {
  display: none;
}

:root:not([data-welt])[data-look="portal"] .portal-ziffer {
  display: block;
  grid-row: 1;
  font: 300 clamp(3.2rem, 5vw, 4.4rem)/1 var(--f-titel);
  color: var(--p-gold);
}

:root:not([data-welt])[data-look="portal"] .schritte h3 {
  grid-row: 2;
  margin-top: 16px;
  font: 600 0.8rem/1.3 var(--f-text);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

:root:not([data-welt])[data-look="portal"] .portal-frei {
  display: block;
  grid-row: 3;
  align-self: center;
  margin-top: 12px;
  padding: 4px 10px 3px;
  border: 1px solid var(--p-gold);
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--p-gold);
}

:root:not([data-welt])[data-look="portal"] .schritte p {
  grid-row: 4;
  max-width: 36ch;
  margin-top: 14px;
  font-size: 0.95rem;
}

@media (min-width: 600px) {
  :root:not([data-welt])[data-look="portal"] .schritte {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Feste Zeile für das Etikett, damit die Texte aller Spalten auf einer
     Höhe beginnen, auch bei den Schritten ohne „Kostenlos“. */
  :root:not([data-welt])[data-look="portal"] .schritte li {
    grid-template-rows: auto auto 40px auto;
  }

  :root:not([data-welt])[data-look="portal"] .schritte li:nth-child(even) {
    border-left: 1px solid var(--p-linie);
  }

  :root:not([data-welt])[data-look="portal"] .schritte li:nth-child(2) {
    border-top: 0;
  }
}

/* So viele Spalten wie Schritte (Startseite vier, Danke-Seite drei). */
@media (min-width: 1000px) {
  :root:not([data-welt])[data-look="portal"] .schritte {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  :root:not([data-welt])[data-look="portal"] .schritte li + li {
    border-top: 0;
    border-left: 1px solid var(--p-linie);
  }
}

/* --- Karte: Leistungen mit Preisen, gesetzt wie eine Speisekarte --- */

:root:not([data-welt])[data-seite="start"] .abschnitt.leistungen {
  padding-inline: var(--p-rand);
}

/* Die Karte bildet keine eigene Ebenengruppe: Ihre beiden Flächen liegen in
   der Ebenengruppe von main, über den Seitensträhnen und unter dem Text. */
:root:not([data-welt])[data-look="portal"] .portal-karte {
  display: block;
  position: relative;
  max-width: 62rem;
  margin: 0 auto;
  padding: clamp(44px, 7vw, 84px) clamp(20px, 6vw, 84px) clamp(40px, 6vw, 72px);
}

:root:not([data-welt])[data-look="portal"] .portal-karte::before,
:root:not([data-welt])[data-look="portal"] .portal-karte::after {
  z-index: -2;
}

:root:not([data-welt])[data-look="portal"] .portal-karte::after {
  background: var(--p-wein);
}

/* Die Rauten sitzen auf der Kante: oben Seitengrund, unten Karte. */
:root:not([data-welt])[data-look="portal"] .portal-karte > .portal-zier {
  background: linear-gradient(to bottom, var(--grund) 50%, var(--p-wein) 50%);
}

:root:not([data-welt])[data-look="portal"] .portal-karte .abschnitt-kopf {
  margin-bottom: clamp(36px, 6svh, 56px);
}

:root:not([data-welt])[data-seite="start"] .leistungen .kacheln {
  display: block;
}

:root:not([data-welt])[data-seite="start"] .leistungen .kachel {
  display: block;
  padding: 24px 0;
  border-top: 1px solid var(--p-linie);
  box-shadow: none;
}

:root:not([data-welt])[data-seite="start"] .leistungen .kachel:last-child {
  border-bottom: 1px solid var(--p-linie);
}

:root:not([data-welt])[data-seite="start"] .leistungen .kachel::before {
  content: none;
}

/* Am Handy steht der Preis unter dem Titel. Die Punktlinie kommt erst dazu,
   wenn Titel und Preis sicher in eine Zeile passen. */
:root:not([data-welt])[data-seite="start"] .portal-posten-kopf {
  display: grid;
  gap: 8px;
}

:root:not([data-welt])[data-seite="start"] .leistungen .kachel h3 {
  font: 400 clamp(1.4rem, 2.6vw, 1.9rem)/1.15 var(--f-titel);
  letter-spacing: -0.01em;
}

:root:not([data-welt])[data-seite="start"] .leistungen .portal-preis {
  display: block;
  max-width: none;
  margin: 0;
  font: 600 0.76rem/1.3 var(--f-text);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--p-gold);
}

@media (min-width: 700px) {
  :root:not([data-welt])[data-seite="start"] .portal-posten-kopf {
    display: flex;
    align-items: baseline;
    gap: 12px;
  }

  :root:not([data-welt])[data-seite="start"] .portal-punkte {
    display: block;
    flex: 1;
    min-width: 28px;
    border-bottom: 1px dotted var(--p-gold);
    transform: translateY(-0.3em);
  }
}

:root:not([data-welt])[data-seite="start"] .leistungen .kachel > p {
  max-width: 58ch;
  margin-top: 10px;
  font-size: 0.98rem;
  line-height: 1.55;
}

:root:not([data-welt])[data-seite="start"] .leistungen .merkmale {
  margin-top: 14px;
}

:root:not([data-welt])[data-seite="start"] .merkmale li::before {
  transform: rotate(45deg);
}

:root:not([data-welt])[data-seite="start"] .leistungen .kachel .textlink {
  margin-top: 6px;
}

:root:not([data-welt])[data-seite="start"] .portal-karte-fuss {
  display: grid;
  justify-items: center;
  gap: 24px;
  margin-top: clamp(40px, 6svh, 60px);
  text-align: center;
}

:root:not([data-welt])[data-seite="start"] .portal-karte-fuss p {
  margin: 0;
  font: italic 300 clamp(1.6rem, 3.2vw, 2.4rem)/1.15 var(--f-titel);
  color: var(--p-gold);
}

/* --- Übrige Abschnitte: dieselbe Achse und dieselben Marken --- */

:root:not([data-welt])[data-look="portal"] .bald {
  justify-items: center;
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

:root:not([data-welt])[data-look="portal"] .bald-marke {
  justify-self: center;
  padding: 4px 10px 3px;
  border: 1px solid var(--p-gold);
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.2em;
}

:root:not([data-welt])[data-look="portal"] .ueber-kurz-text {
  justify-items: center;
  gap: 0;
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

:root:not([data-welt])[data-look="portal"] .ueber-kurz-text p {
  margin-top: 18px;
  font-size: 1.05rem;
}

:root:not([data-welt])[data-look="portal"] .fragen {
  margin-inline: auto;
}

:root:not([data-welt])[data-look="portal"] .anfrage-einstieg .direkt {
  justify-content: center;
  margin-top: clamp(24px, 4svh, 40px);
}

/* --- Weniger Bewegung: Der Schweif steht als ruhiges Bild in voller Länge,
   ohne Wind und Zeigerlicht (das regelt portal-schweif.js). Hier nur der
   Knopf. --- */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-welt])[data-seite="start"] .portal-schweif {
    transition: none;
  }

  :root:not([data-welt])[data-look="portal"] .knopf {
    transition: none;
  }

  :root:not([data-welt])[data-look="portal"] .knopf:hover,
  :root:not([data-welt])[data-look="portal"] .knopf:active {
    transform: none;
  }
}

/* ---------- Bordeaux, Unterseiten: Portal ohne Schweif (seit 06.10.2026) ----------
   Die Unterseiten tragen den Look der Startseite (Regeln oben mit
   [data-look="portal"]), aber ohne die Fäden: Der User wollte sie dort
   nicht, auch wegen der Leistung. Stattdessen steht ein Sternenhimmel über der
   Seite (portal-sterne.js, Wunsch des Users vom 06.10.2026). Die frühere
   Lichtebene und der Mausschein sind entfernt.
   Kopf: ein kleineres Portal, Goldrahmen mit gestuften Ecken, innen ein
   ruhiger Weinschein. Schluss: eine Karte wie die Leistungen der
   Startseite, statt des Lack-Fotos der früheren Bühne. */

:root:not([data-welt])[data-look="portal"] .einstieg-schein {
  display: none;
}

:root:not([data-welt])[data-look="portal"] .einstieg--seite {
  display: block;
  margin-top: 0;
  padding: 10px var(--p-rand) 0;
  background: none;
}

:root:not([data-welt])[data-look="portal"] .einstieg--seite .portal-rahmen {
  display: block;
  position: relative;
  isolation: isolate;
  padding: 7px;
}

:root:not([data-welt])[data-look="portal"] .einstieg--seite .portal-rahmen-innen {
  display: block;
  position: relative;
  isolation: isolate;
  padding: clamp(64px, 12svh, 128px) var(--p-px) clamp(56px, 10svh, 112px);
}

:root:not([data-welt])[data-look="portal"] .einstieg--seite .portal-rahmen-innen::after {
  background:
    radial-gradient(ellipse 64% 72% at 50% 42%, rgba(58, 11, 23, 0.8), rgba(58, 11, 23, 0) 74%),
    var(--grund);
}

@media (min-width: 900px) {
  :root:not([data-welt])[data-look="portal"] .einstieg--seite {
    padding-top: 6px;
  }

  :root:not([data-welt])[data-look="portal"] .einstieg--seite .portal-rahmen {
    padding: 9px;
  }
}

/* Sternenhimmel (portal-sterne.js): fest über der Seite, unter Kopfzeile (10)
   und Menü. Klicks gehen hindurch. Höhe 100lvh, damit die einblendende
   Adressleiste am Handy die Leinwand nicht ständig neu vermisst. */
.portal-sterne {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dauer-szene) var(--ease-out);
}

.portal-sterne.ist-da {
  opacity: 1;
}

.portal-sterne canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Wie auf der Startseite trennen Abstand und Raute die Abschnitte, keine
   Linie über die volle Breite. */
:root:not([data-welt])[data-look="portal"] .abschnitt {
  border-top: 0;
}

:root:not([data-welt])[data-look="portal"] .einstieg--seite .einstieg-text {
  display: grid;
  justify-items: center;
  max-width: 56rem;
  margin: 0 auto;
  text-align: center;
}

:root:not([data-welt])[data-look="portal"] .einstieg--seite .oberzeile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.24em;
}

:root:not([data-welt])[data-look="portal"] .einstieg--seite .oberzeile::before,
:root:not([data-welt])[data-look="portal"] .einstieg--seite .oberzeile::after {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  background: var(--p-gold);
  transform: rotate(45deg);
}

:root:not([data-welt])[data-look="portal"] .einstieg--seite h1 {
  margin-top: clamp(18px, 3svh, 30px);
  font: 300 clamp(2.2rem, 5.4vw, 5rem)/1.02 var(--f-titel);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

:root:not([data-welt])[data-look="portal"] .einstieg--seite .einstieg-unterzeile {
  max-width: 38rem;
  margin-top: clamp(18px, 3svh, 28px);
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  line-height: 1.55;
}

:root:not([data-welt])[data-look="portal"] .einstieg--seite .einstieg-aktionen {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin-top: clamp(24px, 4svh, 36px);
}

:root:not([data-welt])[data-look="portal"] .einstieg--seite :is(.direkt, .linkliste) {
  justify-content: center;
  margin-top: clamp(24px, 4svh, 36px);
}

/* Team: Spalten nur für die vorhandenen Personen, mittig unter dem Kopf. */
@media (min-width: 640px) {
  :root:not([data-welt])[data-look="portal"] .team {
    grid-template-columns: repeat(auto-fit, minmax(0, 24rem));
    justify-content: center;
  }
}

/* Das Formular steht auf derselben Mittelachse wie der Kopf darüber. */
:root:not([data-welt])[data-look="portal"] .formular {
  margin-inline: auto;
}

/* Schluss: Karte auf Weingrund, mittig gesetzt wie die Abschnittsköpfe */
:root:not([data-welt])[data-look="portal"] .aufruf {
  padding: clamp(88px, 14svh, 160px) var(--p-rand);
  background: none;
}

/* Eigene Ebenengruppe: Auf der Startseite liegen Rahmen und Weingrund der
   Karte in der Gruppe von main, hier in der Karte selbst. */
:root:not([data-welt])[data-look="portal"] .aufruf .portal-karte {
  isolation: isolate;
}

:root:not([data-welt])[data-look="portal"] .aufruf-innen {
  justify-items: center;
  gap: 0;
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}

:root:not([data-welt])[data-look="portal"] .aufruf h2 {
  font: 300 clamp(2rem, 4.6vw, 3.6rem)/1.06 var(--f-titel);
  letter-spacing: -0.015em;
}

:root:not([data-welt])[data-look="portal"] .aufruf p:not(.direkt) {
  margin-top: 18px;
  font-size: 1.05rem;
}

:root:not([data-welt])[data-look="portal"] .aufruf-aktionen {
  margin-top: clamp(28px, 4svh, 40px);
}

:root:not([data-welt])[data-look="portal"] .aufruf .direkt {
  justify-content: center;
  margin-top: 24px;
}

/* ---------- Welt Wildlife: Landschaft hinter der Seite (welten/wildnis/) ----------
   Die Landschaft liegt fest hinter allem; die Seite darüber wird dafür
   durchsichtig. Kacheln und Kopfzeile behalten ihre (leicht durchsichtige)
   Fläche, damit Text dort immer auf ruhigem Grund steht. */
.wildnis {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}

.wildnis.ist-da {
  opacity: 1;
}

.wildnis canvas {
  display: block;
  width: 100%;
  height: 100%;
}

[data-welt="wildlife"] #seite {
  position: relative;
  z-index: 1;
}

[data-welt="wildlife"] .einstieg,
[data-welt="wildlife"] .einstieg--seite,
[data-welt="wildlife"] .abschnitt {
  background: transparent;
}

[data-welt="wildlife"] .fuss {
  background: rgba(10, 17, 13, 0.88);
}

/* Blende beim Wechsel: Blätter schieben sich von beiden Seiten ins Bild
   und teilen sich wieder, wie beim Weg durchs Dickicht. */
.welt-blende[data-welt="wildlife"] {
  display: block;
}

.welt-blende[data-welt="wildlife"] .welt-blende-teil {
  position: absolute;
  inset: 0;
  background: #0A120D;
}

.welt-blende-blatt {
  position: absolute;
  width: 70vmax;
  height: auto;
  will-change: transform;
}

.welt-blende[data-welt="wildlife"] .welt-blende-mitte {
  color: #D8D0B8;
}

/* ---------- Welt Cinematic: Filmplakat, Staub, Szenenleiste, Filmdreh (welten/cinematic.js) ---------- */

/* Titel wie auf einem Filmplakat: Versalien, etwas gesperrt, kleiner, weil
   Versalien breiter laufen. */
[data-welt="cinematic"] h1,
[data-welt="cinematic"] h2 {
  text-transform: uppercase;
}

[data-welt="cinematic"] .einstieg h1 {
  font-size: clamp(2.1rem, 1rem + 4.6vw, 4.9rem);
  line-height: 1.02;
}

[data-welt="cinematic"] .abschnitt h2 {
  font-size: clamp(1.7rem, 1rem + 2.5vw, 2.9rem);
}

/* Mausschein als breiter Linsenreflex (anamorphotisch) */
[data-welt="cinematic"] .einstieg-schein {
  width: 110vmax;
  height: 7vmax;
  aspect-ratio: auto;
  margin: -3.5vmax 0 0 -55vmax;
  background:
    radial-gradient(closest-side, rgba(255, 214, 170, 0.5), transparent 18%),
    radial-gradient(closest-side, var(--schein-innen), var(--schein-aussen) 55%, transparent);
}

/* Staub im Projektorlicht und Vignette über allem. Der Staub ersetzt seit
   04.10.2026 das Filmkorn, das als matter Schleier über der Seite lag:
   wenige helle Körner schweben langsam schräg durchs Bild, Schwarz bleibt
   tief. Lage, Größe, Weg, Tempo und Helligkeit je Korn setzt
   welten/cinematic.js als Variablen. Bewegt werden nur transform und
   opacity; an den Enden des Wegs blendet jedes Korn aus, so fällt der
   Neubeginn nicht auf. */
.kino-staub {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  pointer-events: none;
}

.kino-staub i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--g);
  height: var(--g);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 228, 196, var(--a)) 30%, rgba(255, 228, 196, 0));
  animation: kino-staub var(--t) linear var(--v) infinite;
}

@keyframes kino-staub {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  12%, 88% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0); }
}

@media (prefers-reduced-motion: reduce) {
  .kino-staub i {
    animation: none;
  }
}

.kino-vignette {
  position: fixed;
  inset: 0;
  z-index: 59;
  pointer-events: none;
  background: radial-gradient(130% 110% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}

/* Szenenleiste unten: Nummer und Titel der Szene (Abschnitt in der
   Bildmitte), oben eine feine Linie für den Fortschritt des Films */
.kino-leiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 61;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 34px;
  padding: 0 var(--rand) env(safe-area-inset-bottom, 0px);
  color: #AEB7B9;
  background: #000;
  font: 500 11px/1 var(--f-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
  transform: translateY(100%);
  transition: transform 500ms var(--ease-out);
}

.kino-leiste.ist-da {
  transform: none;
}

.kino-nummer {
  flex: none;
  color: var(--akzent);
  font-variant-numeric: tabular-nums;
}

.kino-szene {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.kino-lauf {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--akzent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

@media (max-width: 599px) {
  .kino-leiste {
    gap: 10px;
    height: 30px;
    font-size: 10px;
  }
}

[data-welt="cinematic"] .fuss {
  padding-bottom: 34px;
}

/* Szenenschnitt: Jeder Abschnitt liegt hinter einer schwarzen Blende, die
   sich beim Hineinscrollen mit einem Spalt Licht öffnet. Die Kanten der
   Blende leuchten warm, solange sie auseinanderfahren. */
[data-welt="cinematic"] main > .abschnitt {
  position: relative;
}

.kino-szenenblende {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

.kino-szenenblende i {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.5%;
  background: #000;
}

.kino-szenenblende i:first-child {
  top: 0;
}

.kino-szenenblende i:nth-child(2) {
  bottom: 0;
}

/* Leuchtende Kante, nur solange die Blende aufgeht */
.kino-szenenblende i span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 169, 92, 0.7);
  opacity: 0;
}

.kino-szenenblende i:first-child span {
  bottom: 0;
  box-shadow: 0 6px 26px 2px rgba(255, 159, 74, 0.22);
}

.kino-szenenblende i:nth-child(2) span {
  top: 0;
  box-shadow: 0 -6px 26px 2px rgba(255, 159, 74, 0.22);
}

.kino-szenenblende b {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: linear-gradient(90deg, transparent, rgba(255, 214, 170, 0.95) 30%, rgba(255, 214, 170, 0.95) 70%, transparent);
  box-shadow: 0 0 18px rgba(255, 159, 74, 0.6);
  opacity: 0;
}

/* Filmdreh beim Wechsel: Bühne hinter der Seite, Crew davor. Die Kulisse
   fährt seitlich aus dem Bild, ohne dass eine Bildlaufleiste entsteht. */
.kino-dreh,
.kino-dreh body {
  overflow-x: clip;
}

.kino-dreh #seite {
  position: relative;
  z-index: 1;
  background: var(--grund);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.kino-buehne {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(60% 45% at 50% 38%, rgba(255, 190, 130, 0.16), transparent 70%),
    radial-gradient(70% 22% at 50% 88%, rgba(255, 190, 130, 0.14), transparent 70%),
    linear-gradient(180deg, #121212 0%, #26211D 58%, #0E0C0B 58.3%, #1B1714 100%);
}

.kino-buehne::before {
  /* Wand aus Bahnen */
  content: "";
  position: absolute;
  inset: 0 0 38% 0;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 120px);
}

.kino-lichtkegel {
  position: absolute;
  top: -10vh;
  width: 60vw;
  height: 130vh;
  transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(255, 196, 140, 0.28), rgba(255, 196, 140, 0.04) 70%, transparent);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.kino-vorn {
  position: fixed;
  inset: 0;
  z-index: 95;
  overflow: hidden;
  pointer-events: none;
}

.kino-balken {
  position: absolute;
  left: 0;
  right: 0;
  height: 11vh;
  background: #000;
}

.kino-balken--oben {
  top: 0;
  transform-origin: 50% 0;
}

.kino-balken--unten {
  bottom: 0;
  transform-origin: 50% 100%;
}

/* Silhouetten mit feiner Lichtkante (Gegenlicht), damit sie auch vor der
   dunklen Kulisse lesbar bleiben */
.kino-figur {
  position: absolute;
  bottom: 11vh;
  left: 0;
  height: 30vh;
  width: auto;
  overflow: visible;
  transform-origin: 50% 100%;
  fill: #030404;
  filter: drop-shadow(0 0 1.5px rgba(255, 196, 140, 0.7)) drop-shadow(0 0 10px rgba(255, 160, 90, 0.18));
}

.kino-kran {
  position: absolute;
  right: 4vw;
  bottom: 11vh;
  height: 62vh;
  width: auto;
  overflow: visible;
  fill: #030404;
  filter: drop-shadow(0 0 1.5px rgba(255, 196, 140, 0.6));
}

.kino-kran .arm {
  transform-box: view-box;
}

@media (max-width: 599px) {
  .kino-figur {
    height: 21vh;
  }

  .kino-kran {
    right: -6vw;
    height: 40vh;
  }
}

.kino-klappe {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(360px, 70vw);
  height: auto;
  margin-left: calc(min(360px, 70vw) / -2);
  overflow: visible;
}

.kino-klappe text {
  fill: #F4F1EA;
  font-family: var(--f-mono);
  letter-spacing: 0.08em;
}

.kino-klappe .stock {
  transform-box: view-box;
}

.kino-aktion {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: -0.6em;
  color: #F4F1EA;
  font: 400 clamp(2rem, 6vw, 4.5rem)/1.2 "DM Serif Display", Georgia, serif;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
}

/* ---------- Bausteinsprache der drei Gastwelten ----------
   Die Motive stehen auch ohne Maus und JavaScript da. Fokus, Auswahl und
   offene Fragen verstärken dieselbe Kante; Bordeaux bleibt unangetastet. */

/* Wildlife: deckende Blattflächen, warme Säume und ruhige Lichtungen.
   Kein Motiv liegt vor Text; das helle Abendlicht bleibt hinter Deckung. */
[data-welt="wildlife"] :is(.kachel, .bald, .person, .projekt, .schritte li, .wahl-kachel, .auswahl-kachel) {
  background: #13211A;
  box-shadow: inset 0 1px 0 rgba(232, 180, 92, 0.32), inset 0 0 0 1px var(--linie);
  border-radius: 12px;
}
[data-welt="wildlife"] .kachel::before {
  background: linear-gradient(135deg, rgba(232, 180, 92, 0.5), var(--linie) 45%, rgba(120, 170, 90, 0.3));
}
[data-welt="wildlife"] .kachel::after {
  inset: auto -24px -42px auto;
  width: 130px;
  height: 180px;
  border-radius: 90% 0 90% 0;
  transform: rotate(24deg);
  background: linear-gradient(110deg, transparent 49%, rgba(232, 180, 92, 0.1) 50%, transparent 51%), rgba(120, 170, 90, 0.045);
}
/* Nur ein leichter Schleier: Jeder Text hat eigene Deckung, die Landschaft
   soll zwischen den Blöcken sichtbar bleiben. */
[data-welt="wildlife"] .abschnitt {
  background: linear-gradient(90deg, rgba(13, 22, 17, 0.45), rgba(13, 22, 17, 0.1));
}
[data-welt="wildlife"] :is(.einstieg-text, .abschnitt-kopf, .ueber-kurz-text, .hinweise, .abschnitt-mehr, .linkliste),
[data-welt="wildlife"] .abschnitt > .direkt {
  padding: clamp(16px, 2.4vw, 28px);
  background: rgba(13, 22, 17, 0.92);
  border-radius: 12px;
}
/* Im Einstieg ist die Nacht dunkel; 75 % Deckung reichen auch vor dem hellen
   Bauch des Tigers für 4,5:1, und der Tiger bleibt hinter dem Text sichtbar. */
[data-welt="wildlife"] .einstieg-text { background: rgba(13, 22, 17, 0.75); }
[data-welt="wildlife"] .kopf { background: #0D1611; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-welt="wildlife"] .einstieg-schein { opacity: 0.45; }
[data-welt="wildlife"] :is(.abschnitt-kopf, .schritt-kopf, .aufruf-innen) { border-top: 1px solid var(--linie-stark); padding-top: 20px; }
[data-welt="wildlife"] :is(.oberzeile, .person-rolle, .projekt-art) { letter-spacing: 0.1em; }
[data-welt="wildlife"] .knopf { border-radius: 12px 4px 12px 4px; box-shadow: inset 0 1px 0 var(--knopf-kante), 0 8px 24px -16px #E2A64A; }
[data-welt="wildlife"] .belege li::before { width: 8px; height: 12px; border-radius: 100% 0 100% 0; box-shadow: none; }
[data-welt="wildlife"] .merkmale li { border-radius: 12px 2px 12px 2px; background: var(--grund); }
[data-welt="wildlife"] .preis--empfohlen::before { background: var(--akzent); }
[data-welt="wildlife"] .preis-zahl { font-weight: 800; letter-spacing: -0.04em; }
[data-welt="wildlife"] :is(.punkte li, .einzeln-zeile) { padding-inline: 16px; background: rgba(13, 22, 17, 0.65); border-radius: 12px; }
[data-welt="wildlife"] .schritt-nummer { font-size: 2rem; font-weight: 800; width: fit-content; border-bottom: 2px solid var(--akzent); padding-bottom: 10px; }
[data-welt="wildlife"] .fragen { border: 0; }
[data-welt="wildlife"] .frage { padding-inline: 18px; margin-bottom: 10px; background: #13211A; border: 1px solid var(--linie); border-radius: 12px; }
[data-welt="wildlife"] .frage[open] { border-color: var(--akzent); }
[data-welt="wildlife"] .frage summary { font-weight: 800; }
[data-welt="wildlife"] :is(.foto-rahmen, .projekt-bild) { background: linear-gradient(145deg, #1B2E23, #13211A 60%, #292719); }
[data-welt="wildlife"] .ueber-kurz-text { border-left: 2px solid var(--akzent); padding-left: 20px; }
[data-welt="wildlife"] .vorschau-leiste { background: #13211A; border-bottom-color: var(--linie-stark); }
[data-welt="wildlife"] .vorschau-schalter button[aria-pressed="true"] { background: var(--knopf-grund); }
[data-welt="wildlife"] :is(.direkt a, .linkliste a) { text-decoration-color: var(--akzent); text-underline-offset: 6px; }
[data-welt="wildlife"] .aufruf { background: linear-gradient(120deg, #13211A, #272416); }
[data-welt="wildlife"] :is(.formular, .rechtstext) { padding: clamp(16px, 3vw, 32px); background: #0D1611; border-radius: 12px; }
[data-welt="wildlife"] :is(.feld input, .feld textarea, .bedingt, .rechtstext-verzeichnis) { background: #13211A; }
[data-welt="wildlife"] .fortschritt li::before { height: 5px; border-radius: 100% 0 100% 0; }
[data-welt="wildlife"] .rechtstext-abschnitt { border-top: 1px solid var(--linie); padding-top: 20px; }
[data-welt="wildlife"] .fuss { background: #0D1611; border-top-color: var(--linie-stark); }
[data-welt="wildlife"] .fuss-spalte h2 { color: var(--akzent); }

@media (pointer: coarse) {
  /* Die Browserleiste darf weder Bitmap noch Kamera während der Reise ändern. */
  [data-welt="wildlife"] .wildnis { bottom: auto; height: 100vh; height: 100lvh; }
}

/* Cinematic: Titelkarten, Bildränder und ein schmaler Lichtspalt. */
[data-welt="cinematic"] .kopf { background: #0A0D0E; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: var(--linie-stark); }
[data-welt="cinematic"] .einstieg-schein { opacity: 0.16; }
[data-welt="cinematic"] :is(h1, h2, h3, .wahl-titel, .auswahl-titel) { font-style: normal; text-transform: uppercase; }
[data-welt="cinematic"] h1 em { font-style: normal; }
[data-welt="cinematic"] :is(.kachel, .bald, .person, .projekt, .schritte li, .wahl-kachel, .auswahl-kachel) {
  background: #11181B;
  border-radius: 0;
  box-shadow: inset 0 1px 0 var(--linie-stark), inset 0 -4px 0 #080B0C;
}
[data-welt="cinematic"] .kachel::before { background: linear-gradient(90deg, var(--akzent), var(--linie) 28%, var(--linie) 72%, #3D7781); }
[data-welt="cinematic"] .kachel::after {
  inset: auto 22px 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--akzent), transparent);
  opacity: 0.65;
}
[data-welt="cinematic"] .abschnitt { border-top: 8px solid #080B0C; }
[data-welt="cinematic"] :is(.abschnitt-kopf, .schritt-kopf, .aufruf-innen) { border-left: 2px solid var(--akzent); padding-left: clamp(16px, 2vw, 28px); }
[data-welt="cinematic"] :is(.einstieg-unterzeile, .ueber-kurz-text) { border-left: 1px solid var(--linie-stark); padding-left: 16px; }
[data-welt="cinematic"] :is(.oberzeile, .projekt-art, .person-rolle, .schritt-zaehler) { letter-spacing: 0.2em; }
[data-welt="cinematic"] .knopf { box-shadow: none; border-block: 2px solid var(--knopf-kante); letter-spacing: 0.06em; }
[data-welt="cinematic"] .belege li::before { width: 12px; height: 2px; border-radius: 0; box-shadow: none; }
[data-welt="cinematic"] .merkmale li { background: #0A0D0E; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--linie-stark); }
[data-welt="cinematic"] .preis--empfohlen::before { background: var(--akzent); }
[data-welt="cinematic"] .schritt-nummer { font-style: normal; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--akzent); padding-bottom: 12px; }
[data-welt="cinematic"] :is(.punkte li, .einzeln-zeile, .rechtstext-abschnitt) { border-top: 1px solid var(--linie-stark); padding-top: 24px; }
[data-welt="cinematic"] .frage { padding-inline: 16px; background: #11181B; border-bottom: 4px solid #080B0C; }
[data-welt="cinematic"] .frage[open] { box-shadow: inset 2px 0 0 var(--akzent); }
[data-welt="cinematic"] .antwort { border-top: 1px solid var(--linie-stark); padding-top: 16px; }
[data-welt="cinematic"] :is(.foto-rahmen, .projekt-bild) { background: linear-gradient(125deg, #15222A, #0A0D0E 70%); border-block: 12px solid #080B0C; }
[data-welt="cinematic"] .vorschau-leiste { background: #080B0C; border-bottom-color: var(--akzent); }
[data-welt="cinematic"] .vorschau-schalter button[aria-pressed="true"] { background: var(--knopf-grund); }
[data-welt="cinematic"] .vorschau-punkte i { height: 3px; border-radius: 0; }
[data-welt="cinematic"] :is(.direkt, .linkliste) { border-bottom: 1px solid var(--linie-stark); padding-bottom: 8px; }
[data-welt="cinematic"] .aufruf { background: linear-gradient(110deg, #15222A, #0A0D0E 80%); border-bottom: 1px solid var(--akzent); }
[data-welt="cinematic"] :is(.feld input, .feld textarea, .bedingt, .rechtstext-verzeichnis) { background: #11181B; border-radius: 0; }
[data-welt="cinematic"] :is(.bedingt, .rechtstext-verzeichnis) { border-left: 2px solid var(--akzent); }
[data-welt="cinematic"] .fortschritt li::before { height: 3px; border-radius: 0; }
[data-welt="cinematic"] .fuss { padding-bottom: 76px; background: #080B0C; border-top: 1px solid var(--akzent); }
[data-welt="cinematic"] .fuss-spalte h2 { color: var(--akzent); letter-spacing: 0.2em; }

/* Gleiche Rückmeldung mit Maus, Tastatur und Finger. Farbe wechselt sofort;
   nur die Unterstreichung wird per transform bewegt. */
:is([data-welt="corporate"], [data-welt="wildlife"], [data-welt="cinematic"]) :is(.wahl-titel, .auswahl-titel) { font-weight: var(--titel-gewicht); }
:is([data-welt="corporate"], [data-welt="wildlife"], [data-welt="cinematic"]) :is(.knopf, .textlink, .wahl-kachel, .auswahl-kachel, .chip, .feld input, .feld textarea, .fuss-spalte a, .vorschau-schalter button, .fortschritt li::before, .auswahl-kachel::before) {
  transition: transform 160ms var(--ease-out), opacity 160ms var(--ease-out);
}
:is([data-welt="corporate"], [data-welt="wildlife"], [data-welt="cinematic"]) .textlink { position: relative; }
:is([data-welt="corporate"], [data-welt="wildlife"], [data-welt="cinematic"]) .textlink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 1px;
  background: var(--akzent);
  transform: scaleX(0.2);
  transform-origin: left;
  transition: transform 220ms var(--ease-out);
  pointer-events: none;
}
:is([data-welt="corporate"], [data-welt="wildlife"], [data-welt="cinematic"]) :is(.textlink:focus-visible, .textlink:active)::after { transform: scaleX(1); }
:is([data-welt="corporate"], [data-welt="wildlife"], [data-welt="cinematic"]) :is(.wahl-kachel:active, .wahl-kachel:focus-visible, .auswahl-kachel:has(:checked)) {
  background: var(--grund-mitte);
  box-shadow: inset 3px 0 0 var(--akzent), inset 0 0 0 1px var(--akzent);
}
:is([data-welt="corporate"], [data-welt="wildlife"], [data-welt="cinematic"]) :is(.kachel:focus-within, .projekt:focus-within, .frage:focus-within) { outline: 2px solid var(--akzent); outline-offset: 3px; }
:is([data-welt="corporate"], [data-welt="wildlife"], [data-welt="cinematic"]) :is(.feld input:focus-visible, .feld textarea:focus-visible) { border-color: var(--akzent); }
:is([data-welt="corporate"], [data-welt="wildlife"], [data-welt="cinematic"]) .feld [aria-invalid="true"] { border-color: var(--fehler); }

@media (hover: hover) and (pointer: fine) {
  :is([data-welt="corporate"], [data-welt="wildlife"], [data-welt="cinematic"]) .textlink:hover::after { transform: scaleX(1); }
  :is([data-welt="corporate"], [data-welt="wildlife"], [data-welt="cinematic"]) :is(.kachel:hover, .wahl-kachel:hover, .auswahl-kachel:hover) { box-shadow: inset 0 0 0 1px var(--akzent); }
}
@media (hover: none) {
  :is([data-welt="corporate"], [data-welt="wildlife"], [data-welt="cinematic"]) .textlink::after { transform: scaleX(1); }
}
@media (max-width: 599px) {
  :is([data-welt="corporate"], [data-welt="wildlife"], [data-welt="cinematic"]) :is(h1, h2, h3, .wahl-titel, .auswahl-titel) { overflow-wrap: anywhere; hyphens: auto; }
  [data-welt="cinematic"] .kachel h3 { font-size: 1.375rem; letter-spacing: 0.015em; }
}
@media (prefers-reduced-motion: reduce) {
  [data-welt="cinematic"] .kino-leiste { transform: none; opacity: 0; transition: opacity 300ms ease; }
  [data-welt="cinematic"] .kino-leiste.ist-da { opacity: 1; }
  :is([data-welt="corporate"], [data-welt="wildlife"], [data-welt="cinematic"]) :is(.knopf, .textlink::after, .frage summary::after) { transition: opacity 160ms ease; }
  :is([data-welt="corporate"], [data-welt="wildlife"], [data-welt="cinematic"]) .knopf:active { transform: none; }
}

/* ---------- Welt Corporate: Geschäftsbericht (seit 05.10.2026) ----------
   Die Seite liest sich wie ein Bericht (Farben und Schriften: Variablenblock
   oben). Jeder Abschnitt ist ein Kapitel: oben eine Linie in Tinte, in der
   Randspalte die Nummer in Messing und der Name des Kapitels, daneben der
   Inhalt. Leistungen und Angebote stehen als Positionen in Zeilen, mit Preis
   in der rechten Spalte, wo es einen gibt. Der Einstieg der Startseite trägt
   ein Inhaltsverzeichnis, die drei Belege stehen als Kennzahlen darunter.
   Bewusst nicht: dunkler Grund, Leuchten, Verläufe, Kacheln mit Fläche,
   Aufbau wie eine Skyline, 3D-Kette. Bewegung nur als leises Einblenden
   (welten/corporate.js).
   Diese Regeln stehen nach den gemeinsamen Regeln der Gastwelten, damit sie
   bei gleichem Gewicht gewinnen. */

/* Zusätze im Markup, die nur diese Welt zeigt (werkzeuge/seiten.mjs). */
.verzeichnis,
.tabellenkopf {
  display: none;
}

/* --- Kopfzeile: Doppellinie wie im Kopf eines Berichts --- */

[data-welt="corporate"] .kopf {
  background: var(--grund);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--text);
  box-shadow: 0 4px 0 var(--grund), 0 5px 0 var(--linie);
}

[data-welt="corporate"] .knopf-kopf {
  background: var(--knopf-grund);
  color: var(--knopf-text);
  box-shadow: none;
}

[data-welt="corporate"] .navigation-balken { background: var(--messing); }

/* --- Knopf, Textlink, kleine Etiketten --- */

[data-welt="corporate"] .knopf {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-weight: 500;
}

[data-welt="corporate"] [data-magnet] { translate: none !important; }
[data-welt="corporate"] .knopf:active { transform: translateY(1px); }

[data-welt="corporate"] .textlink {
  text-decoration-color: var(--messing);
  text-underline-offset: 5px;
}

[data-welt="corporate"] .textlink::after { content: none; }

[data-welt="corporate"] :is(h1, h2) { color: var(--akzent); }
[data-welt="corporate"] :is(h3, .wahl-titel, .auswahl-titel, .frage summary) { font-weight: 600; }

[data-welt="corporate"] :is(.oberzeile, .person-rolle, .projekt-art, .schritt-zaehler, .preis-marke, .bald-marke, .tabellenkopf) {
  padding: 0;
  background: none;
  font: 500 0.74rem/1.5 var(--f-text);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-leise);
}

@media (hover: hover) and (pointer: fine) {
  [data-welt="corporate"] .knopf-kopf:hover {
    background: var(--knopf-hover);
    box-shadow: none;
  }

  [data-welt="corporate"] .textlink:hover { text-decoration-color: currentColor; }
}

/* --- Einstieg: Titelblatt. Links die Randspalte mit der Oberzeile, daneben
   Titel und Text, auf der Startseite rechts das Verzeichnis. .einstieg-text
   löst sich auf, seine Kinder stehen direkt im Raster. --- */

[data-welt="corporate"] .einstieg {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
  overflow: visible;
  padding-top: clamp(40px, 8vw, 104px);
  padding-bottom: 0;
  background: var(--grund);
}

[data-welt="corporate"] :is(.einstieg-schein, .einstieg-zeichen) { display: none; }
[data-welt="corporate"] .einstieg-text { display: contents; }

[data-welt="corporate"] .einstieg .oberzeile { margin-bottom: 14px; }

[data-welt="corporate"] .einstieg h1 {
  padding-bottom: 0;
  font: 400 clamp(2.5rem, 6.2vw, 4.75rem)/1.05 var(--f-titel);
  letter-spacing: -0.015em;
}

[data-welt="corporate"] .einstieg--seite h1 { font-size: clamp(2.2rem, 5vw, 4rem); }

[data-welt="corporate"] .einstieg-unterzeile {
  max-width: 38rem;
  margin-top: clamp(18px, 2.4vw, 28px);
  font-size: clamp(1.08rem, 1.3vw, 1.22rem);
}

[data-welt="corporate"] .einstieg-aktionen {
  gap: 16px 28px;
  margin-top: clamp(26px, 3.4vw, 40px);
}

[data-welt="corporate"] .einstieg-text .direkt { margin-top: clamp(20px, 3vw, 32px); }

/* Verzeichnis: Name, Punktlinie, Nummer */
[data-welt="corporate"] .verzeichnis {
  display: block;
  order: 1;
  margin-top: clamp(32px, 5vw, 48px);
  padding-top: 14px;
  border-top: 1px solid var(--text);
}

[data-welt="corporate"] .verzeichnis ol {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

[data-welt="corporate"] .verzeichnis a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  font-size: 0.98rem;
  text-decoration: none;
  color: var(--text);
}

[data-welt="corporate"] .vz-linie {
  flex: 1;
  border-bottom: 1px dotted var(--linie-stark);
  transform: translateY(-0.25em);
}

[data-welt="corporate"] .vz-nr {
  font: 400 0.9rem/1 var(--f-titel);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--messing);
}

/* Kennzahlen: die drei Belege als Zeile unter dem Titelblatt */
[data-welt="corporate"] .einstieg .belege {
  display: grid;
  order: 2;
  gap: 0;
  margin-top: clamp(28px, 5vw, 56px);
  border-top: 1px solid var(--text);
  font: 400 clamp(1.25rem, 2vw, 1.6rem)/1.25 var(--f-titel);
  font-variant-numeric: lining-nums;
  color: var(--akzent);
}

[data-welt="corporate"] .einstieg .belege li {
  display: block;
  padding: 16px 0 18px;
  border-bottom: 1px solid var(--linie);
}

[data-welt="corporate"] .einstieg .belege li::before { content: none; }

@media (min-width: 760px) {
  [data-welt="corporate"] .einstieg .belege { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  [data-welt="corporate"] .einstieg .belege li { padding: 20px 28px 24px 0; }

  [data-welt="corporate"] .einstieg .belege li + li {
    padding-left: 28px;
    border-left: 1px solid var(--linie);
  }
}

@media (min-width: 1000px) {
  [data-welt="corporate"] .einstieg {
    grid-template-columns: var(--c-spalte) minmax(0, 1fr);
    column-gap: clamp(28px, 4vw, 56px);
  }

  [data-welt="corporate"][data-seite="start"] .einstieg {
    grid-template-columns: var(--c-spalte) minmax(0, 1fr) minmax(250px, 290px);
  }

  [data-welt="corporate"] .einstieg-text > * { grid-column: 2; }

  /* Das Etikett steht in der Randspalte auf der Höhe der ersten Titelzeile. */
  [data-welt="corporate"] .einstieg-text > .oberzeile {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    padding-top: 1.1rem;
  }

  [data-welt="corporate"] .einstieg-text > h1 { grid-row: 1; }

  [data-welt="corporate"] .einstieg .verzeichnis {
    grid-column: 3;
    grid-row: 1 / span 3;
    margin-top: 1.1rem;
  }

  [data-welt="corporate"] .einstieg .belege { grid-column: 1 / -1; }
}

/* --- Kapitel: Jeder Abschnitt zählt mit. Die Linie in Tinte ist ein
   Hintergrund, so breit wie der Inhalt. Nummer (::before) und Name
   (::after, aus data-kapitel) stehen am Handy in einer Zeile über dem
   Inhalt, ab 1000 px in der Randspalte und bleiben beim Scrollen stehen. --- */

[data-welt="corporate"] main { counter-reset: kapitel; }

[data-welt="corporate"] main > .abschnitt:not(.aufruf) {
  --c-oben: clamp(56px, 9vw, 120px);
  counter-increment: kapitel;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 14px;
  align-items: start;
  padding: calc(var(--c-oben) + 14px) var(--innen) 0;
  border-top: 0;
  background:
    linear-gradient(var(--text), var(--text)) no-repeat center var(--c-oben) / calc(100% - 2 * var(--innen)) 1px,
    var(--grund);
}

[data-welt="corporate"] main > .abschnitt:not(.aufruf):last-child,
[data-welt="corporate"] main > .abschnitt:not(.aufruf):has(+ .aufruf) {
  padding-bottom: clamp(56px, 9vw, 120px);
}

[data-welt="corporate"] main > .abschnitt:not(.aufruf)::before {
  content: counter(kapitel, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1;
  font: 400 1.9rem/1 var(--f-titel);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--messing);
}

[data-welt="corporate"] main > .abschnitt:not(.aufruf)::after {
  content: attr(data-kapitel);
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font: 500 0.74rem/1.5 var(--f-text);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-leise);
}

[data-welt="corporate"] main > .abschnitt:not(.aufruf) > * { grid-column: 1 / -1; }
[data-welt="corporate"] main > .abschnitt:not(.aufruf) > :first-child { margin-top: 18px; }

@media (min-width: 1000px) {
  [data-welt="corporate"] main > .abschnitt:not(.aufruf) {
    grid-template-columns: var(--c-spalte) minmax(0, 1fr);
    column-gap: clamp(28px, 4vw, 56px);
  }

  /* Über viele (leere) Zeilen gespannt, damit Nummer und Name neben dem
     ganzen Kapitel stehen bleiben können. */
  [data-welt="corporate"] main > .abschnitt:not(.aufruf)::before,
  [data-welt="corporate"] main > .abschnitt:not(.aufruf)::after {
    grid-column: 1;
    grid-row: 1 / span 12;
    align-self: start;
    position: sticky;
    top: calc(var(--kopf-hoehe) + 24px);
  }

  [data-welt="corporate"] main > .abschnitt:not(.aufruf)::before { font-size: 3rem; }
  [data-welt="corporate"] main > .abschnitt:not(.aufruf)::after { margin-top: 3.7rem; }
  [data-welt="corporate"] main > .abschnitt:not(.aufruf) > * { grid-column: 2; }
  [data-welt="corporate"] main > .abschnitt:not(.aufruf) > :first-child { margin-top: 0; }
}

[data-welt="corporate"] .abschnitt-kopf {
  display: block;
  max-width: 46rem;
  margin-bottom: clamp(28px, 4vw, 48px);
}

[data-welt="corporate"] :is(.abschnitt, .ueber-kurz-text, .bald) h2 {
  font: 400 clamp(1.9rem, 3.8vw, 3rem)/1.12 var(--f-titel);
  letter-spacing: -0.01em;
}

[data-welt="corporate"] .abschnitt-kopf p {
  max-width: 38rem;
  margin-top: clamp(14px, 2vw, 22px);
  font-size: clamp(1.05rem, 1.25vw, 1.18rem);
}

/* --- Schritte: nummeriert wie Unterkapitel (1.1, 1.2 …) --- */

[data-welt="corporate"] .schritte {
  counter-reset: schritt;
  gap: 0 32px;
  border-top: 1px solid var(--linie);
}

[data-welt="corporate"] .schritte li {
  counter-increment: schritt;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 12px;
  padding: 18px 0 24px;
  background: none;
  box-shadow: none;
  border-bottom: 1px solid var(--linie);
}

[data-welt="corporate"] .schritte li > * { grid-column: 1 / -1; }

/* Die Nummer im Markup („01“) weicht der Zählung des Kapitels. */
[data-welt="corporate"] .schritte .schritt-nummer {
  grid-column: 1;
  grid-row: 1;
  min-height: 1.6rem;
  font-size: 0;
  font-style: normal;
}

[data-welt="corporate"] .schritt-nummer::before {
  content: counter(kapitel) "." counter(schritt);
  font: 400 0.95rem/1.6rem var(--f-titel);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--messing);
}

[data-welt="corporate"] .schritte .portal-frei {
  display: block;
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  align-self: center;
  padding: 3px 7px 2px;
  border: 1px solid var(--akzent);
  font: 500 0.66rem/1.3 var(--f-text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--akzent);
}

[data-welt="corporate"] .schritte h3 {
  margin-top: 10px;
  font-size: 1.25rem;
  line-height: 1.25;
}

[data-welt="corporate"] .schritte p {
  margin-top: 8px;
  font-size: 0.98rem;
}

/* Neben der Randspalte ist der Inhalt schmaler als in den anderen Welten:
   feste Spaltenzahl statt „so viele wie passen“. */
@media (min-width: 1100px) {
  [data-welt="corporate"] .schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Positionen: Kacheln werden Zeilen einer Tabelle. Nummer, Leistung,
   Preis (wenn die Zeile einen trägt). Die Preiskarten bleiben Spalten und
   sind hier ausgenommen. --- */

[data-welt="corporate"] .portal-karte { display: block; }

[data-welt="corporate"] .tabellenkopf {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  padding-bottom: 10px;
}

[data-welt="corporate"] .tabellenkopf span:last-child { text-align: right; }

[data-welt="corporate"] .kacheln:not(.kacheln--preise) {
  display: block;
  counter-reset: posten;
  border-top: 1px solid var(--text);
}

[data-welt="corporate"] .kachel:not(.preis) {
  counter-increment: posten;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  padding: 22px 0 24px;
  overflow: visible;
  background: none;
  border-bottom: 1px solid var(--linie);
  box-shadow: none;
}

[data-welt="corporate"] .kachel:not(.preis):has(.portal-preis) {
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
}

[data-welt="corporate"] .kachel:not(.preis)::before {
  content: counter(kapitel) "." counter(posten);
  position: static;
  grid-column: 1;
  grid-row: 1 / span 6;
  padding: 0;
  background: none;
  -webkit-mask: none;
  mask: none;
  font: 400 0.95rem/1.9 var(--f-titel);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--messing);
}

[data-welt="corporate"] .kachel::after { content: none; }

[data-welt="corporate"] .kachel:not(.preis) > *,
[data-welt="corporate"] .kachel:not(.preis) h3 {
  grid-column: 2;
}

[data-welt="corporate"] .portal-posten-kopf { display: contents; }

[data-welt="corporate"] .kachel:not(.preis) h3 {
  font-size: 1.3rem;
  line-height: 1.25;
}

[data-welt="corporate"] .kachel .portal-preis {
  display: block;
  grid-column: 3;
  grid-row: 1;
  max-width: none;
  margin: 0;
  padding-left: 24px;
  text-align: right;
  white-space: nowrap;
  font: 500 1.08rem/1.6 var(--f-titel);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--akzent);
}

[data-welt="corporate"] .kachel:not(.preis) > p {
  max-width: 60ch;
  margin-top: 6px;
  font-size: 0.98rem;
}

/* Merkmale: eine ruhige Zeile statt Schildchen */
[data-welt="corporate"] .merkmale {
  gap: 2px 0;
  margin-top: 10px;
}

[data-welt="corporate"] .merkmale li {
  padding: 0;
  background: none;
  box-shadow: none;
  font-size: 0.88rem;
  color: var(--text-leise);
}

[data-welt="corporate"] .merkmale li + li::before {
  content: "·";
  margin: 0 0.6em;
  color: var(--messing);
}

[data-welt="corporate"] .kachel:not(.preis) .textlink {
  margin-top: 8px;
  font-size: 0.92rem;
}

[data-welt="corporate"] .portal-karte-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: clamp(28px, 4vw, 44px);
}

[data-welt="corporate"] .portal-karte-fuss p {
  flex-basis: 100%;
  margin: 0;
  font: italic 400 clamp(1.3rem, 2.2vw, 1.6rem)/1.3 var(--f-titel);
  color: var(--akzent);
}

/* Am Handy passt die Preisspalte nicht neben den Text: Der Preis rückt
   unter die Zeile, der Tabellenkopf entfällt. */
@media (max-width: 699px) {
  [data-welt="corporate"] .tabellenkopf { display: none; }

  [data-welt="corporate"] .kachel:not(.preis),
  [data-welt="corporate"] .kachel:not(.preis):has(.portal-preis) {
    grid-template-columns: 2.8rem minmax(0, 1fr);
  }

  [data-welt="corporate"] .kachel .portal-preis {
    order: 9;
    grid-column: 2;
    grid-row: auto;
    padding: 10px 0 0;
    text-align: left;
    white-space: normal;
  }
}

/* --- Preise: drei Spalten mit Linie statt Karten --- */

[data-welt="corporate"] .kacheln--preise { gap: 12px clamp(24px, 3vw, 48px); }

[data-welt="corporate"] .preis {
  padding-inline: 0;
  background: none;
  box-shadow: none;
  border-top: 1px solid var(--text);
}

[data-welt="corporate"] .preis::before { content: none; }
[data-welt="corporate"] .preis--empfohlen { border-top: 3px solid var(--akzent); }
[data-welt="corporate"] .kachel .preis-marke { color: var(--akzent); }

[data-welt="corporate"] .preis-zahl {
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--akzent);
}

[data-welt="corporate"] .preis:not(.preis--empfohlen) .preis-fuss .knopf {
  background: none;
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--text);
}

@media (hover: hover) and (pointer: fine) {
  [data-welt="corporate"] :is(.kachel:hover, .wahl-kachel:hover, .auswahl-kachel:hover) { box-shadow: none; }

  [data-welt="corporate"] .preis:not(.preis--empfohlen) .preis-fuss .knopf:hover {
    background: var(--text);
    color: var(--grund);
  }
}

/* --- Übrige Bausteine: Linien statt Flächen --- */

[data-welt="corporate"] .bald {
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 36px);
  background: var(--flaeche);
  box-shadow: none;
  border-left: 3px solid var(--akzent);
}

[data-welt="corporate"] .fragen { border-top: 1px solid var(--text); }
[data-welt="corporate"] .frage summary { font-family: var(--f-titel); }

[data-welt="corporate"] :is(.person, .projekt) {
  background: none;
  box-shadow: none;
}

[data-welt="corporate"] :is(.foto-rahmen, .projekt-bild) {
  background: var(--flaeche);
  box-shadow: inset 0 0 0 1px var(--linie-stark);
}

[data-welt="corporate"] .vorschau { box-shadow: 0 0 0 1px var(--text); }
[data-welt="corporate"] .vorschau-leiste { background: var(--flaeche); border-bottom-color: var(--text); }
[data-welt="corporate"] .vorschau-schalter button[aria-pressed="true"] { background: var(--knopf-grund); color: var(--knopf-text); }

/* Wahl der Leistung und Auswahl im Formular: Zeilen, die gewählte trägt
   eine Kante in Marineblau. */
[data-welt="corporate"] .wahl {
  gap: 0 32px;
  border-top: 1px solid var(--text);
}

[data-welt="corporate"] .wahl-kachel {
  padding: 18px 12px 18px 0;
  background: none;
  box-shadow: none;
  border-bottom: 1px solid var(--linie);
}

[data-welt="corporate"] .auswahl-kachel {
  background: var(--grund-hell);
  box-shadow: inset 0 0 0 1px var(--linie-stark);
}

[data-welt="corporate"] :is(.wahl-kachel:active, .wahl-kachel:focus-visible) {
  background: var(--flaeche);
  box-shadow: none;
}

[data-welt="corporate"] .auswahl-kachel:has(:checked) {
  background: var(--flaeche);
  box-shadow: inset 3px 0 0 var(--akzent), inset 0 0 0 1px var(--akzent);
}

[data-welt="corporate"] :is(.punkte li, .einzeln-zeile, .rechtstext-abschnitt) {
  border-top: 1px solid var(--linie);
  padding-top: 20px;
}

[data-welt="corporate"] :is(.direkt, .linkliste) {
  border-top: 1px solid var(--linie);
  padding-top: 8px;
}

[data-welt="corporate"] :is(.feld input, .feld textarea, .feld select) {
  background: var(--grund-hell);
  border-radius: 0;
}

[data-welt="corporate"] :is(.bedingt, .rechtstext-verzeichnis) {
  background: var(--flaeche);
  border-left: 3px solid var(--akzent);
}

[data-welt="corporate"] .fortschritt li::before { height: 3px; border-radius: 0; }

/* Abschluss der Unterseiten: die Rückseite des Berichts in Marineblau.
   Die Farben wechseln nur innerhalb dieser Fläche. */
[data-welt="corporate"] .aufruf {
  --text: #F5F1E8;
  --text-leise: #D8DCE4;
  --akzent: #F5F1E8;
  --knopf-grund: #F5F1E8;
  --knopf-hover: #FFFFFF;
  --knopf-text: #1F3557;
  --linie: rgba(245, 241, 232, 0.24);
  --messing: #D9BC7C;
  background: #1F3557;
  color: var(--text);
}

[data-welt="corporate"] .fuss {
  background: var(--flaeche);
  border-top: 1px solid var(--text);
}

[data-welt="corporate"] .fuss-spalte h2 {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--linie-stark);
  color: var(--text-leise);
}

/* ---------- Intro: Logo-Inszenierung beim ersten Besuch ----------
   Aus der Übergabe vom 28.09.2026, Maße unverändert. Die Farben gelten nur
   hier und folgen seit Richtung A der Seite: Vorhänge im dunklen Bordeaux
   des Grunds, Linie, Glanz und Text in Elfenbein statt Rosé (Kontrast des
   Texts auf dem Vorhang 11,5:1). Abweichungen: Hanken Grotesk statt „Segoe UI“, weil es
   Segoe UI nur unter Windows gibt (am iPhone wäre es Arial), und die Fläche
   für das Logo ist hochkant, seit das Logo hochkant steht (neues Logo vom
   28.09.). Bewegt wird alles von script.js; hier steht nur das erste Bild. */

.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-text);
  color: #F4EFE9;
}

.intro[hidden] {
  display: none;
}

/* Vom Vorbereiter im <head> angekündigt: schon beim ersten Zeichnen da. */
.intro-bereit .intro[hidden] {
  display: flex;
}

.intro-bereit body,
.intro-laeuft body {
  overflow: hidden;
}

/* Solange das Intro die Seite verdeckt, wartet deren eigener Auftritt.
   script.js gibt ihn frei, wenn sich die Vorhänge öffnen. */
.intro-bereit .einstieg-text > *,
.intro-bereit .monogramm {
  animation-play-state: paused;
}

.intro-vorhang {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.1%;
  will-change: transform;
}

.intro-vorhang-links {
  left: 0;
  background: radial-gradient(ellipse at 100% 50%, #2E0913 0%, #120306 65%);
}

.intro-vorhang-rechts {
  right: 0;
  background: radial-gradient(ellipse at 0% 50%, #2E0913 0%, #120306 65%);
}

.intro-linie {
  position: absolute;
  left: 50%;
  width: 1px;
  height: 100%;
  background: linear-gradient(0deg, transparent, #EFE3D066, transparent);
  transform: scaleY(0);
}

.intro-zeichen {
  position: absolute;
  top: calc(50% - 118px);
  left: calc(50% - 81px);
  width: 162px;
  height: 189px;
  overflow: hidden;
  will-change: transform, opacity;
}

/* Das mitgelieferte Logo als Maske: zwei gleich große, versetzte D. */
.intro-logo {
  width: 100%;
  height: 100%;
  /* Bordeaux statt der Rosé-Töne der Übergabe (Wunsch des Users vom 28.09.,
     passend zum Kopfzeilen-Logo, auf dem es landet), der Glanz in Elfenbein.
     Aufbau wie übergeben. */
  background: linear-gradient(120deg, #4A0F1E 5%, #9B2C45 34%, #F3E6D6 46%, #8C2238 57%, #5A1224 80%);
  -webkit-mask: url("assets/logo/dd-intro.svg") center / contain no-repeat;
  mask: url("assets/logo/dd-intro.svg") center / contain no-repeat;
  opacity: 0;
}

.intro-licht {
  position: absolute;
  inset: -20%;
  background: linear-gradient(110deg, transparent 40%, #FFF6E8BB 49%, transparent 58%);
  transform: translateX(-100%);
  mix-blend-mode: screen;
  -webkit-mask: url("assets/logo/dd-intro.svg") center / 72% no-repeat;
  mask: url("assets/logo/dd-intro.svg") center / 72% no-repeat;
}

.intro-name {
  position: absolute;
  top: calc(50% + 86px);
  padding-left: 0.5em;
  font-size: 11px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  opacity: 0;
}

.intro-unterzeile {
  position: absolute;
  top: calc(50% + 118px);
  font-size: 10px;
  color: #D9CCC6;
  opacity: 0;
}

.intro-ueberspringen {
  position: absolute;
  right: 6%;
  bottom: 25px;
  display: flex;
  gap: 24px;
  padding: 15px 0;
  border: 0;
  background: none;
  color: #D9CCC6;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.intro-ueberspringen:focus-visible {
  outline: 2px solid #EFE3D0;
  outline-offset: 6px;
}

@media (min-width: 701px) {
  .intro-zeichen {
    top: calc(50% - 150px);
    left: calc(50% - 108px);
    width: 216px;
    height: 252px;
  }

  .intro-name {
    top: calc(50% + 120px);
    font-size: 13px;
  }

  .intro-unterzeile {
    top: calc(50% + 158px);
    font-size: 11px;
  }

  .intro-ueberspringen {
    right: 5.2%;
    bottom: 35px;
  }
}

/* ---------- Seitenwechsel: der Vorhang aus dem Intro ----------
   Beim Wechsel zwischen zwei Seiten schließen sich zwei Vorhanghälften über
   der alten Seite und öffnen sich über der neuen; getauscht wird, solange sie
   geschlossen sind. Technik: View Transitions über Dokumente hinweg (Chrome,
   Edge, Safari). Browser ohne sie wechseln wie gewohnt. Bewegt werden nur
   transform und opacity.
   Die Hälften sind zwei 1 px große Marken im Markup (seiten.mjs). Ihre Fläche
   bekommen sie erst während des Wechsels, über ihre Gruppe im Übergang.
   Nur Bordeaux und nicht vor dem Intro. Die Gastwelten wechseln hart wie
   bisher, bei reduzierter Bewegung blendet die Seite nur kurz über. */
@view-transition {
  navigation: auto;
}

.blende {
  position: fixed;
  top: 0;
  z-index: 99;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.blende-links {
  left: 0;
  view-transition-name: blende-links;
}

.blende-rechts {
  right: 0;
  view-transition-name: blende-rechts;
}

:root:is([data-welt], .intro-bereit)::view-transition-group(*),
:root:is([data-welt], .intro-bereit)::view-transition-old(*),
:root:is([data-welt], .intro-bereit)::view-transition-new(*) {
  animation: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* Alte Seite bleibt stehen, bis der Vorhang zu ist, dann steht die neue da. */
  :root:not([data-welt], .intro-bereit)::view-transition-old(root) {
    animation: seite-geht var(--dauer-gleiten) step-end both;
  }

  :root:not([data-welt], .intro-bereit)::view-transition-new(root) {
    animation: seite-kommt var(--dauer-gleiten) step-end both;
  }

  :root:not([data-welt], .intro-bereit)::view-transition-group(blende-links),
  :root:not([data-welt], .intro-bereit)::view-transition-group(blende-rechts) {
    width: 50.1%;
    height: 100%;
    border: 0 solid rgb(239 227 208 / 0.35);
    animation:
      blende-zu var(--dauer-gleiten) var(--ease-out) both,
      blende-auf var(--dauer-lang) var(--ease-in-out) var(--dauer-gleiten) forwards;
  }

  :root:not([data-welt], .intro-bereit)::view-transition-group(blende-links) {
    --weg: -100%;
    border-right-width: 1px;
    background: radial-gradient(ellipse at 100% 50%, #2E0913 0%, #120306 65%);
  }

  :root:not([data-welt], .intro-bereit)::view-transition-group(blende-rechts) {
    --weg: 100%;
    left: auto;
    right: 0;
    border-left-width: 1px;
    background: radial-gradient(ellipse at 0% 50%, #2E0913 0%, #120306 65%);
  }

  /* Die Marken selbst sind leer; gezeigt wird nur die Fläche der Gruppe. */
  ::view-transition-image-pair(blende-links),
  ::view-transition-image-pair(blende-rechts) {
    display: none;
  }
}

@keyframes seite-geht {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes seite-kommt {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes blende-zu {
  from {
    transform: translateX(var(--weg));
  }

  to {
    transform: translateX(0);
  }
}

@keyframes blende-auf {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(var(--weg));
  }
}

/* ---------- Reduzierte Bewegung: weniger und sanfter, nicht nichts ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* Seitenwechsel: kein Vorhang, nur eine kurze Überblendung. */
  :root:not([data-welt])::view-transition-old(root),
  :root:not([data-welt])::view-transition-new(root) {
    animation-duration: var(--dauer-mittel);
  }

  /* Das Intro entfällt ganz, die Seite erscheint mit ihrem sanften Auftritt. */
  .intro,
  .intro-bereit .intro[hidden] {
    display: none;
  }

  .einstieg-text > * {
    animation-name: einblenden;
    animation-duration: var(--dauer-gleiten);
  }

  .monogramm {
    animation-name: einblenden;
    animation-duration: var(--dauer-gleiten);
  }

  .einstieg-schein {
    transition: none;
  }

  /* Kein Film: Es bleibt beim Standbild (script.js lädt dann auch nichts). */
  

  .knopf,
  .knopf-kopf {
    transition: background-color var(--dauer-kurz) ease, box-shadow var(--dauer-kurz) ease;
  }

  .knopf:active {
    transform: none;
  }

  .navigation-balken.gleitet {
    transition: opacity var(--dauer-kurz) ease;
  }

  /* Menü am Handy: nur einblenden, nichts schieben oder drehen */
  .js .navigation,
  .js .kopf--offen .navigation {
    transform: none;
  }

  .menue-zeichen::before,
  .menue-zeichen::after {
    transition: none;
  }
}