/* Noir Media, Seite (Quelle; ausgeliefert wird assets/seite.<hash>.css über tools/bauen.mjs).
   Aufbau: Richtung D „Kombi“, von Janik am 20.10.2026 abgenommen (Monatsring + Transkript mit Marker und Schnitt).
   Look seit dem Relaunch (Janik 02.11.2026): Marshmallow White #F0F0F0, Galactic Violet #573FFF, Bubblegum Pink #FF6AD3,
   hell und lebendig, Verläufe Violett → Pink auf hellem Grund. Pink ist nie Textfarbe auf Hell; Text auf Violett ist weiß,
   auf Pink dunkel (WCAG AA). Kopfzeile als schwebende Kapsel mit Abspielleiste, feine Körnung über dem Grund, darunter ein
   ruhiger Farbschimmer (quelle/js/grund.js). Farben tragen Bedeutung: Violett = Handlung, freigegeben und geplant;
   Pink = „das nehmen wir“ (Marker), aktives Wort, wartet auf Freigabe. */
@font-face { font-family: "Outfit"; src: url("/fonts/outfit-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; 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: "Outfit"; src: url("/fonts/outfit-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; src: url("/fonts/source-serif-4-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/fonts/source-serif-4-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/fonts/source-serif-4-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("/fonts/caveat-400-normal-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  color-scheme: light;
  --grund: #F0F0F0;          /* Marshmallow White */
  --violett: #573FFF;        /* Galactic Violet: Weiß darauf 5,9:1, auf Marshmallow 5,2:1 */
  --violett-tief: #4430D6;   /* Knopf gedrückt/gezeigt: Weiß darauf 7,6:1 */
  --pink: #FF6AD3;           /* Bubblegum Pink: nie Textfarbe auf Hell (2,2:1); Tinte darauf 6,9:1 */
  --tinte: #17122E;          /* Untertitel-Kästen, Überschriften, starke Schrift */
  --text: #2B2740;
  --leise: #55516A;          /* 6,6:1 auf Marshmallow, 7,6:1 auf Weiß */
  --blatt: #FFFFFF;
  --flaeche: #E6E3F0;        /* ruhende Flächen (Schalter, Weiche); --leise darauf 6:1 */
  --flieder: #DCD5FF;        /* Marker für Zahlen (Tinte darauf 12:1) */
  --linie: rgba(23, 18, 46, .1);
  --verlauf: linear-gradient(90deg, var(--violett), var(--pink));
  --schatten: 0 1px 2px rgba(23, 18, 46, .06), 0 22px 48px -22px rgba(87, 63, 255, .32);
  --sans: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --hand: "Caveat", "Bradley Hand", cursive;
  --rand: 20px;
  --kapsel-rand: 12px;
  --nav-h: 60px;
  --weich: cubic-bezier(.2, .7, .1, 1);
  /* Körnung: Tinte und Licht als feine Punkte (SVG-Rauschen, statisch, eine Kachel); liegt über Grund und Schimmer */
  --korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .07 0 0 0 0 .18 3.1 0 0 0 -1.62'/%3E%3C/filter%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 3 0 0 0 -1.5'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23d)'/%3E%3Crect width='220' height='220' filter='url(%23h)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
/* Grund: nur html trägt die Farbe. body bleibt durchsichtig, sonst lägen Schimmer (z -2) und Körnung (z -1) darunter.
   Ohne WebGL (und bis der Schimmer bereit ist) zwei ruhige Lichtflecken aus CSS (body::after); grund.js blendet sie aus. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 28px); background: var(--grund); }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; color: var(--text); font-family: var(--sans); font-size: 1rem; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--korn); background-size: 220px; opacity: .2; }
body::after { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(60% 45% at 6% 8%, rgba(87, 63, 255, .1), transparent 70%), radial-gradient(55% 50% at 96% 62%, rgba(255, 106, 211, .12), transparent 72%); transition: opacity 1.4s var(--weich); }
.grund-an body::after { opacity: 0; }
.grund { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--weich); }
.grund.ist-bereit { opacity: 1; }
a { color: inherit; }
::selection { background: var(--pink); color: var(--tinte); }
:focus-visible { outline: 3px solid var(--violett); outline-offset: 3px; }
.sprung { position: absolute; left: -9999px; }
.sprung:focus { left: var(--rand); top: var(--rand); z-index: 400; background: var(--tinte); color: #fff; padding: .6rem .9rem; border-radius: 10px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Kopfzeile: schwebende Kapsel. Links die Marke, in der Mitte die Wege, rechts Bewegung, Sprache und Erstgespräch,
   unten die Abspielleiste (Fortschritt, Lücken an den Kapiteln; nav.js setzt --np und --kapitel) ---------- */
/* bleibt beim Scrollen stehen: Anhalten jederzeit erreichbar, Abspielleiste immer sichtbar (03.11.2026) */
.nav { position: fixed; top: 10px; left: 0; right: 0; z-index: 300; height: var(--nav-h); pointer-events: none; }
.nav-innen { position: relative; pointer-events: auto; height: 100%; width: min(100% - 2 * var(--kapsel-rand), 1280px); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 7px 0 18px; border-radius: 999px; border: 1px solid rgba(23, 18, 46, .08); background: rgba(255, 255, 255, .58); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 12px 32px -22px rgba(23, 18, 46, .45); transition: background-color .35s ease, box-shadow .35s ease; }
.nav.ist-fest .nav-innen, .menue-offen .nav-innen { background: rgba(255, 255, 255, .86); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 18px 44px -22px rgba(87, 63, 255, .5); }
/* Licht unter dem Weg, auf den man zeigt (nav.js setzt --px und --pw) */
.nav-innen::before { content: ""; position: absolute; left: 0; top: 50%; height: 38px; width: var(--pw, 0px); border-radius: 999px; background: rgba(87, 63, 255, .09); transform: translate(var(--px, 0px), -50%); opacity: 0; pointer-events: none; transition: transform .4s var(--weich), width .4s var(--weich), opacity .25s; }
.nav-innen.zeigt::before { opacity: 1; }
.nav-innen.sofort::before { transition: none; }
.marke { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-weight: 680; letter-spacing: -0.025em; font-size: 1.15rem; text-decoration: none; color: var(--tinte); white-space: nowrap; }
/* Zeichen: der Monatsring als kleiner Ring im Verlauf Violett → Pink */
.marke::before { content: ""; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: conic-gradient(from 210deg, var(--violett), var(--pink), var(--violett)); -webkit-mask: radial-gradient(circle, transparent 0 .26rem, #000 .27rem); mask: radial-gradient(circle, transparent 0 .26rem, #000 .27rem); flex: none; }
.nav-links { display: none; align-items: center; gap: 2px; }
.nav-links > a, .nav-knopf { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; font: inherit; font-size: .9375rem; font-weight: 560; color: var(--text); background: none; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap; transition: color .2s; }
.nav-links > a:hover, .nav-knopf:hover, .nav-mega.ist-offen .nav-knopf { color: var(--tinte); }
html:not(.js) .nav-links > a:hover, html:not(.js) .nav-knopf:hover { background: rgba(87, 63, 255, .09); }
.nav-knopf svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--weich); }
.nav-mega { position: relative; }
.nav-mega.ist-offen .nav-knopf svg { transform: rotate(180deg); }
.nav-rechts { display: flex; align-items: center; gap: 6px; }
.nav .knopf.nav-cta { display: none; min-height: 44px; padding: 0 1.15rem; font-size: .9375rem; }
/* Bewegung anhalten: ein Knopf für alles, was sich von selbst bewegt (WCAG 2.2.2); Zeichen wechselt, Name bleibt */
.nav-pause { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; padding: 0; background: none; color: var(--tinte); cursor: pointer; transition: background-color .2s; }
.nav-pause[hidden] { display: none; }
.nav-pause:hover { background: rgba(87, 63, 255, .09); }
.nav-pause svg { width: 16px; height: 16px; fill: currentColor; }
.nav-pause .spielen, .nav-pause[aria-pressed="true"] .halten { display: none; }
.nav-pause[aria-pressed="true"] .spielen { display: block; }
/* Sprachen als Schalter: EN, DE, ES; die aktuelle Sprache hell hinterlegt */
.sprachen { display: flex; align-items: center; padding: 3px; border-radius: 999px; background: rgba(23, 18, 46, .065); }
.sprachen a { display: inline-grid; place-items: center; min-width: 34px; min-height: 32px; padding: 0 .5rem; border-radius: 999px; font-size: .8125rem; font-weight: 650; letter-spacing: .02em; color: var(--leise); text-decoration: none; transition: color .2s, background-color .2s; }
.sprachen a:hover { color: var(--tinte); }
.sprachen a[aria-current="page"] { background: var(--blatt); color: var(--tinte); box-shadow: 0 1px 2px rgba(23, 18, 46, .14); }
/* Abspielleiste: Spur mit Lücken an den Kapiteln, darüber der Fortschritt im Verlauf (Farbe wandert mit) */
.nav-fortschritt { position: absolute; left: 26px; right: 26px; bottom: -1px; height: 2px; pointer-events: none; -webkit-mask-image: var(--kapitel, none); mask-image: var(--kapitel, none); }
.nav-fortschritt::before, .nav-fortschritt::after { content: ""; position: absolute; inset: 0; border-radius: 2px; }
.nav-fortschritt::before { background: rgba(23, 18, 46, .09); }
.nav-fortschritt::after { background: var(--verlauf); clip-path: inset(0 calc(100% - var(--np, 0) * 100%) 0 0); }
/* Einstiege: die vier Wege aus „Wo drückt es?“ (Weiche), darunter der eine Monat und das Erstgespräch */
.mega { position: absolute; left: -10px; top: calc(100% + 14px); width: min(42rem, calc(100vw - 2 * var(--kapsel-rand))); padding: 8px; border-radius: 26px; border: 1px solid rgba(23, 18, 46, .08); background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 30px 70px -30px rgba(23, 18, 46, .5), 0 0 0 1px rgba(255, 255, 255, .6) inset; opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.985); transform-origin: 20% 0; transition: opacity .2s, transform .4s var(--weich), visibility 0s .4s; }
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-mega.ist-offen .mega, html:not(.js) .nav-mega:hover .mega, html:not(.js) .nav-mega:focus-within .mega { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .45s var(--weich), visibility 0s; }
.mega-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.mega-liste a { display: grid; gap: .25rem; height: 100%; padding: .85rem 1rem .9rem; border-radius: 18px; text-decoration: none; transition: background-color .2s; }
.mega-liste a:hover, .mega-liste a:focus-visible { background: rgba(87, 63, 255, .07); }
.mega-liste .wort, .menue-einstiege .wort { font-family: var(--serif); font-style: italic; font-size: 1.0625rem; line-height: 1.35; color: var(--tinte); }
.mega-liste .titel, .menue-einstiege .titel { font-size: .8125rem; font-weight: 600; color: var(--leise); }
.mega-fuss { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 4px; padding: .9rem .9rem .9rem 1.1rem; border-radius: 20px; background: radial-gradient(120% 140% at 0% 0%, rgba(87, 63, 255, .12), transparent 60%), radial-gradient(90% 120% at 100% 100%, rgba(255, 106, 211, .16), transparent 60%), var(--grund); }
.mega-fuss p { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--tinte); max-width: 24rem; }
.mega-fuss .knopf { flex: none; min-height: 44px; padding: 0 1.1rem; font-size: .9375rem; }
/* Menü auf schmalen Bildschirmen */
.burger { display: none; position: relative; width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid rgba(23, 18, 46, .14); background: rgba(255, 255, 255, .5); cursor: pointer; padding: 0; }
.js .burger { display: block; }
.burger span { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--tinte); border-radius: 2px; transition: transform .4s var(--weich), top .4s var(--weich); }
.burger span:first-child { top: 17px; }
.burger span:last-child { top: 25px; }
.menue-offen .burger span:first-child { top: 21px; transform: rotate(45deg); }
.menue-offen .burger span:last-child { top: 21px; transform: rotate(-45deg); }
.menue { position: fixed; inset: 0; z-index: 250; display: flex; flex-direction: column; gap: 1.8rem; padding: calc(var(--nav-h) + 34px) var(--rand) 28px; background: rgba(240, 240, 240, .95); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transition: opacity .4s var(--weich), visibility 0s .4s; }
.menue-offen .menue { opacity: 1; visibility: visible; transition: opacity .4s var(--weich), visibility 0s; }
html:not(.js) .menue { display: none; }
.menue-links { display: grid; }
.menue-links a { display: block; padding: .6rem 0; font-size: clamp(1.45rem, 6.6vw, 2.1rem); font-weight: 720; letter-spacing: -0.03em; line-height: 1.2; color: var(--tinte); text-decoration: none; border-bottom: 1px solid var(--linie); transform: translateY(14px); opacity: 0; transition: transform .55s var(--weich), opacity .55s; }
.menue-offen .menue-links a { transform: none; opacity: 1; }
.menue-einstiege { display: grid; gap: .5rem; }
.menue-einstiege > p { margin: 0 0 .1rem; font-weight: 640; color: var(--tinte); }
.menue-einstiege ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.menue-einstiege a { display: grid; gap: .2rem; height: 100%; padding: .75rem .85rem; border-radius: 16px; background: var(--blatt); text-decoration: none; box-shadow: 0 1px 2px rgba(23, 18, 46, .06); }
.menue-fuss { display: grid; gap: .8rem; margin-top: auto; }
.menue-fuss .knopf { width: 100%; }
.menue-fuss .menue-pause { justify-self: center; font: inherit; font-size: .9375rem; color: var(--leise); background: none; border: 0; min-height: 44px; padding: 0 .6rem; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.menue-fuss .menue-pause[hidden] { display: none; }
@media (max-width: 459px) { .menue-einstiege ul { grid-template-columns: 1fr; } }
@media (max-width: 379px) { .nav-rechts .nav-pause { display: none; } .nav-innen { padding-left: 14px; } .marke { font-size: 1.05rem; } }
@media (min-width: 760px) {
  :root { --kapsel-rand: 20px; --nav-h: 64px; }
  .nav .knopf.nav-cta { display: inline-flex; }
}
/* Wege in der Kapsel erst ab 1180 px: darunter passen die spanischen Wege samt Sprache und Erstgespräch nicht sicher (Menü) */
@media (min-width: 1180px) {
  .nav-links { display: flex; }
  .js .burger { display: none; }
  .menue { display: none; }
}

/* ---------- Untertitel-Kästen: Überschriften wie eingebrannte Untertitel, das gesprochene Wort leuchtet Pink ---------- */
.kasten { margin: 0; font-weight: 760; letter-spacing: -0.022em; color: #fff; line-height: 1; }
.kasten .zeile { display: block; width: fit-content; background: var(--tinte); padding: .1em .28em .15em; border-radius: .14em; margin-bottom: .1em; text-wrap: balance; }
.kasten .w { display: inline-block; }
.kasten .w.an { color: var(--pink); }
h1.kasten { font-size: clamp(2.3rem, 9.4vw, 5rem); }
h2.kasten { font-size: clamp(1.75rem, 7.4vw, 3.15rem); }
h3 { margin: 0; color: var(--tinte); font-weight: 640; letter-spacing: -0.01em; }

.serif { font-family: var(--serif); }
.lead { font-family: var(--serif); font-size: 1.25rem; line-height: 1.5; color: var(--text); max-width: 33rem; margin: 1.5rem 0 0; }
.versprechen { margin: 1rem 0 0; font-weight: 600; color: var(--tinte); display: flex; gap: .6rem; align-items: center; }
.versprechen::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--violett); box-shadow: 0 0 0 4px rgba(255, 106, 211, .38); flex: none; }
.handlungen { display: flex; flex-wrap: wrap; gap: .7rem 1.4rem; align-items: center; margin: 1.8rem 0 0; font-family: var(--sans); }
.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; background: var(--violett); color: #fff; text-decoration: none; font-family: var(--sans); font-weight: 600; padding: .8rem 1.45rem; border-radius: 999px; line-height: 1.2; text-align: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 12px 26px -14px rgba(87, 63, 255, .85); transition: transform .2s ease, box-shadow .3s ease, background-color .2s ease; }
.knopf:hover { background: var(--violett-tief); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 16px 34px -12px rgba(255, 106, 211, .9); }
.knopf:active { transform: translateY(0); }
.leise { font-weight: 560; color: var(--tinte); text-decoration-color: var(--violett); text-decoration-thickness: 2px; text-underline-offset: .25em; }
.fuer { margin: 1.4rem 0 0; color: var(--leise); font-size: .9375rem; max-width: 34rem; }

/* ---------- Kapitel mit Bühne ---------- */
.kapitel { position: relative; }
.buehne {
  position: relative; height: 54svh; min-height: 330px; margin-top: 0; touch-action: pan-y; cursor: grab;
  background: radial-gradient(70% 62% at 50% 46%, #FAFAFA 0%, var(--grund) 58%, #E2DFEC 100%);
}
.buehne:active { cursor: grabbing; }
.buehne canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.buehne .standbild { position: absolute; inset: 14% 12% 18%; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(87, 63, 255, .18); }
.webgl .buehne .standbild { display: none; }
.buehne .hinweis { position: absolute; left: var(--rand); right: var(--rand); bottom: .7rem; margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .8125rem; color: var(--leise); }
.buehne .hinweis button { font: inherit; color: var(--tinte); background: none; border: 0; min-height: 44px; padding: 0 .3rem; text-decoration: underline; text-decoration-color: var(--violett); text-underline-offset: .2em; cursor: pointer; }

.inhalt-spalte > .abschnitt { padding: 4.8rem var(--rand) 1rem; }
.einleitung { font-family: var(--serif); font-size: 1.1875rem; line-height: 1.55; max-width: 36rem; margin: 1.3rem 0 0; }
.quelle { font-size: .8125rem; color: var(--leise); margin: .6rem 0 0; }

/* Transkript (aus Richtung A): Papier, Schnitt in Violett, Marker in Pink */
.blatt { position: relative; margin: 2.2rem 0 0; background: var(--blatt); border-radius: 6px; padding: 1.3rem 1.2rem 1.4rem; box-shadow: var(--schatten); }
.blatt-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; margin-bottom: .9rem; }
.blatt-kopf p { margin: 0; }
.blatt-kopf .frage { font-family: var(--serif); font-weight: 600; color: var(--tinte); max-width: 30rem; line-height: 1.4; }
.blatt-kopf .frage span { display: block; font-weight: 400; color: var(--leise); font-size: .9375rem; }
.blatt-kopf .bsp { font-family: var(--serif); font-style: italic; color: var(--leise); font-size: .875rem; }
.zeilen { list-style: none; margin: 0; padding: 0; }
.zeilen li { display: grid; grid-template-columns: 3rem 1fr; gap: 0 .6rem; padding: .55rem 0; }
.zeilen time { font-size: .8125rem; color: var(--leise); font-variant-numeric: tabular-nums; padding-top: .3rem; }
.zeilen p { margin: 0; font-family: var(--serif); font-size: 1.125rem; line-height: 1.66; }
.raus { position: relative; white-space: nowrap; color: color-mix(in srgb, var(--text) 70%, #fff); } /* 70 %: 5,4:1 auf Weiß */
.raus::after { content: ""; position: absolute; left: -.08em; right: -.08em; top: 54%; height: 2px; background: var(--violett); transform: scaleX(var(--s, 1)); transform-origin: left; border-radius: 1px; }
.bewegt .raus { --s: 0; }
.schnitt { color: var(--violett); font-weight: 600; display: inline-block; padding: 0 .12em; transform: scale(var(--k, 1)); font-family: var(--sans); }
.bewegt .schnitt { --k: 0; }
mark.hook { color: inherit; background: linear-gradient(var(--pink), var(--pink)) no-repeat 0 62% / var(--h, 100%) 82%; padding: 0 .08em; margin: 0 -.08em; }
.bewegt mark.hook { --h: 0%; }
.notiz { position: absolute; font-family: var(--hand); color: var(--violett); font-size: 1.5rem; line-height: 1; white-space: nowrap; pointer-events: none; transform: rotate(-5deg); opacity: var(--o, 1); }
.bewegt .notiz { --o: 0; }
.blatt-fuss { margin: 1rem 0 0; font-family: var(--serif); font-style: italic; color: var(--leise); }
.flug { position: fixed; z-index: 20; pointer-events: none; font-family: var(--serif); font-size: 1.05rem; line-height: 1.45; color: var(--tinte); background: var(--pink); padding: .15em .35em; border-radius: 3px; box-shadow: 0 14px 34px rgba(87, 63, 255, .3); will-change: transform; max-width: 32rem; }
.reel-mobil { display: none; }

/* Wert-Stapel */
.stapel-liste { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0; max-width: 40rem; }
.stapel-liste li { display: grid; grid-template-columns: 2.4rem 1fr; gap: .2rem .9rem; padding: 1rem 0; border-top: 1px solid var(--linie); }
.stapel-liste li::before { content: ""; width: 1.5rem; height: 1.5rem; margin-top: .1rem; border-radius: 50%; grid-row: span 2; box-shadow: inset 0 0 0 .42rem var(--violett), inset 0 0 0 1.5rem var(--pink); }
.stapel-liste b { color: var(--tinte); font-weight: 640; }
.stapel-liste span { color: var(--leise); font-family: var(--serif); font-size: 1.0625rem; }
.wer-prueft { margin: 0; padding: 1rem 0 0; border-top: 1px solid var(--linie); max-width: 40rem; font-family: var(--serif); font-size: 1.0625rem; color: var(--leise); }
.wer-prueft a { color: var(--tinte); text-decoration-color: var(--violett); text-underline-offset: .2em; }
.karte { margin: 1.6rem 0 0; max-width: 30rem; background: var(--blatt); border-radius: 16px; padding: 1.1rem 1.2rem 1rem; box-shadow: var(--schatten); position: relative; overflow: hidden; }
.karte::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--verlauf); }
.karte .block { margin: 0; display: flex; justify-content: space-between; gap: 1rem; font-size: .875rem; color: var(--leise); }
.karte .block b { color: var(--violett); }
.karte q { display: block; margin: .6rem 0 0; font-family: var(--serif); font-style: italic; font-size: 1.35rem; line-height: 1.32; color: var(--tinte); quotes: "„" "“"; min-height: 3.6em; }
.karte .steuer { display: flex; align-items: center; gap: 1rem; margin-top: .8rem; }
.karte button { font: inherit; font-weight: 600; background: var(--violett); color: #fff; border: 0; border-radius: 999px; min-height: 44px; padding: 0 1.1rem; cursor: pointer; }
.karte button:hover { background: var(--violett-tief); }
.karte output { font-size: .875rem; color: var(--leise); font-variant-numeric: tabular-nums; }

/* Einwand KI */
.grenzen { display: grid; gap: .8rem; margin: 2.2rem 0 0; }
.grenze { padding: 1.2rem 1.25rem 1.3rem; border-radius: 18px; }
.grenze h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.grenze p { margin: 0; font-family: var(--serif); font-size: 1.0625rem; }
.grenze.ki { background: var(--flaeche); }
.grenze.mensch { background: var(--blatt); box-shadow: 0 1px 2px rgba(23, 18, 46, .05); }
.grenze.mensch p span { background: linear-gradient(var(--pink), var(--pink)) no-repeat 0 64% / var(--h, 100%) 78%; }
.bewegt .grenze.mensch p span { --h: 0%; }
.grenze.nie { background: var(--tinte); color: #EDEBF5; }
.grenze.nie h3 { color: #fff; }
.grenze.nie ul { list-style: none; padding: 0; margin: .3rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: 1.15rem; }
.grenze.nie li { position: relative; white-space: nowrap; }
.grenze.nie li::after { content: ""; position: absolute; left: -.08em; right: -.08em; top: 55%; height: 2.5px; background: var(--pink); transform: scaleX(var(--s, 1)); transform-origin: left; }
.bewegt .grenze.nie li { --s: 0; }
.grenzen-satz { margin: 1.4rem 0 0; font-family: var(--serif); font-style: italic; max-width: 36rem; }

/* Aufwand: ein Monat als Leiste (Dreh, Schnitt, Freigabe in Pink, Beiträge in Violett) */
.leiste-tage { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 2px; height: 2.4rem; margin: 2.2rem 0 0; }
.leiste-tage span { background: #D9D6E6; border-radius: 3px; }
/* eigene Klassen t-…: „schnitt“ ist schon das Schnittzeichen im Transkript (skaliert dort auf 0, hier blieben die Tage 2–4 leer) */
.leiste-tage .t-dreh { background: var(--tinte); }
.leiste-tage .t-schnitt { background: #8E89A8; }
.leiste-tage .t-frei { background: var(--pink); }
.leiste-tage .t-post { background: var(--violett); }
.stationen { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.2rem; counter-reset: s; }
.stationen li { padding-left: 2.5rem; position: relative; }
.stationen li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--tinte); color: #fff; font-weight: 640; font-size: .875rem; display: grid; place-items: center; }
.stationen li.s-frei::before { background: var(--pink); color: var(--tinte); }
.stationen li.s-post::before { background: var(--violett); }
.stationen .wann { display: block; font-size: .8125rem; color: var(--leise); }
.stationen h3 { font-size: 1.15rem; }
.stationen p { margin: .2rem 0 0; font-family: var(--serif); }
.erster { margin: 1.6rem 0 0; font-family: var(--serif); color: var(--leise); max-width: 36rem; }

/* Pakete */
.wahl { margin: 2rem 0 0; max-width: 34rem; border: 0; padding: 0; }
.wahl legend { font-weight: 640; color: var(--tinte); margin-bottom: .6rem; padding: 0; }
.schalter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--flaeche); border-radius: 16px; padding: 4px; gap: 4px; }
.schalter label { text-align: center; padding: .75rem .4rem; border-radius: 12px; cursor: pointer; font-weight: 640; line-height: 1.15; color: var(--text); transition: background-color .2s ease; }
.schalter label small { display: block; font-weight: 450; font-size: .8125rem; color: var(--leise); margin-top: .15rem; }
.schalter input { position: absolute; opacity: 0; pointer-events: none; }
.schalter label:has(input:checked) { background: var(--blatt); box-shadow: 0 1px 2px rgba(23, 18, 46, .08), 0 8px 20px -8px rgba(87, 63, 255, .35); color: var(--tinte); }
.schalter label:has(input:focus-visible) { outline: 3px solid var(--violett); outline-offset: 2px; }
/* Spanisch: „publicaciones“ passt am Handy in keine Drittel-Spalte, die Stufen stehen dort untereinander */
@media (max-width: 599px) {
  :lang(es) .schalter { grid-template-columns: 1fr; }
  :lang(es) .schalter label > span { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; text-align: left; padding: 0 .35rem; }
  :lang(es) .schalter label small { margin: 0; text-align: right; }
}
.preis-ausgabe { margin: 1.4rem 0 0; display: grid; gap: .4rem; }
.preis-ausgabe .satz { margin: 0; font-family: var(--serif); font-size: clamp(1.35rem, 4.6vw, 1.7rem); line-height: 1.35; color: var(--tinte); max-width: 32rem; }
.preis-ausgabe .satz b { font-family: var(--sans); font-weight: 680; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.preis-ausgabe .dazu { margin: 0; font-family: var(--serif); color: var(--leise); max-width: 32rem; }
.monat-mini { display: none; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 2px; height: 1.6rem; margin: 1rem 0 0; }
.monat-mini span { background: #D9D6E6; border-radius: 2px; transition: background-color .25s ease; }
.monat-mini span.post { background: var(--violett); }
.zusage-box { margin: 1.6rem 0 0; padding: 1.1rem 1.2rem; background: var(--blatt); border-radius: 16px; max-width: 34rem; display: grid; gap: .35rem; box-shadow: 0 1px 2px rgba(23, 18, 46, .05); }
.zusage-box b { color: var(--tinte); font-size: 1.05rem; }
.zusage-box p { margin: 0; font-family: var(--serif); color: var(--leise); }
.kapazitaet { margin: 1rem 0 0; font-size: .9375rem; color: var(--text); max-width: 34rem; }
.kaufweg { margin: .6rem 0 0; font-size: .9375rem; color: var(--text); max-width: 34rem; }
/* manueller Weg: keine vierte Preisstufe, sondern das Gespräch */
.individuell { margin: 1.4rem 0 0; padding: 1rem 1.15rem; max-width: 34rem; border-radius: 16px; border: 1.5px dashed rgba(87, 63, 255, .4); display: grid; gap: .3rem; }
.individuell b { color: var(--tinte); }
.individuell p { margin: 0; font-family: var(--serif); color: var(--text); }

/* nach dem Kapitel */
.voll { padding: 5rem var(--rand) 1rem; }
.passt { display: grid; gap: 1.2rem; margin: 2rem 0 0; }
.passt div { padding: 1.3rem 1.3rem; border-radius: 18px; background: var(--blatt); box-shadow: 0 1px 2px rgba(23, 18, 46, .05); }
.passt div.nein { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(23, 18, 46, .14); }
.passt h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.passt ul { margin: 0; padding-left: 1.1rem; font-family: var(--serif); font-size: 1.0625rem; }
.passt li + li { margin-top: .35rem; }
.passt div:not(.nein) li::marker { color: var(--violett); }
.fragen { margin: 2rem 0 0; max-width: 46rem; }
.fragen details { border-top: 1px solid var(--linie); }
.fragen details:last-child { border-bottom: 1px solid var(--linie); }
.fragen summary { cursor: pointer; list-style: none; padding: 1.05rem 2rem 1.05rem 0; font-weight: 600; color: var(--tinte); position: relative; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: ""; position: absolute; right: .3rem; top: 1.35rem; width: .7rem; height: .7rem; border-right: 2px solid var(--violett); border-bottom: 2px solid var(--violett); transform: rotate(45deg); transition: transform .2s ease; }
.fragen details[open] summary::after { transform: rotate(-135deg); top: 1.6rem; }
.fragen details p { margin: 0 0 1.1rem; font-family: var(--serif); font-size: 1.0625rem; max-width: 40rem; }
.schluss { position: relative; padding-bottom: 5rem; isolation: isolate; }
.schluss::before { content: ""; position: absolute; inset: 1rem 0 0; z-index: -1; pointer-events: none; background: radial-gradient(42% 70% at 18% 55%, rgba(87, 63, 255, .12), transparent 70%), radial-gradient(36% 64% at 62% 50%, rgba(255, 106, 211, .14), transparent 72%); }
.schluss p { font-family: var(--serif); font-size: 1.1875rem; max-width: 34rem; margin: 1.2rem 0 0; }
.fuss { padding: 2rem var(--rand) 2.6rem; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: .9375rem; color: var(--leise); border-top: 1px solid var(--linie); }
.fuss span { flex-basis: 100%; color: var(--text); }
.fuss a { text-underline-offset: .2em; }

/* ---------- Handy ---------- */
@media (max-width: 1099px) {
  .reel-mobil { display: block; position: relative; margin: 1.6rem auto 0; width: min(62vw, 240px); aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; color: #fff; background: var(--tinte); isolation: isolate; box-shadow: 0 26px 54px -18px rgba(87, 63, 255, .55); transform-origin: 50% 100%; }
  .reel-mobil .licht { position: absolute; inset: -20%; z-index: -1; background: radial-gradient(45% 32% at 64% 30%, rgba(255, 106, 211, .55), transparent 70%), radial-gradient(60% 45% at 28% 76%, rgba(87, 63, 255, .6), transparent 72%), linear-gradient(160deg, #2A2248, #120E24 72%); }
  .reel-mobil .ut { position: absolute; left: 8%; right: 8%; bottom: 22%; text-align: center; font-weight: 800; font-size: 1.15rem; line-height: 1.12; text-shadow: 0 2px 0 #000, 0 0 14px rgba(0, 0, 0, .6); min-height: 2.3em; }
  .reel-mobil .ut .w.an { color: var(--pink); }
  .reel-mobil .kopfzeile { position: absolute; left: 8%; right: 8%; top: 6%; display: flex; justify-content: space-between; font-size: .75rem; color: rgba(255, 255, 255, .85); }
  .reel-mobil .leiste { position: absolute; left: 8%; right: 8%; bottom: 8%; height: 3px; background: rgba(255, 255, 255, .25); border-radius: 2px; }
  .reel-mobil .leiste i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--verlauf); }
  .monat-mini { display: grid; }
}
@media (min-width: 760px) {
  :root { --rand: 44px; }
  .grenzen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .passt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stationen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss span { flex-basis: auto; margin-right: auto; }
}

/* ---------- Schreibtisch: Inhalt links, Bühne rechts klebend ---------- */
@media (min-width: 1100px) {
  :root { --rand: 5vw; }
  .kapitel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); align-items: start; }
  /* gemessen: längste Zeile „Einmal im Monat drehen.“ = 11,58 em, „Die meisten Chefs posten nicht.“ = 14,36 em (samt Kasten); Textspalte innen ≈ 47,4 vw */
  h1.kasten { font-size: min(4vw, 4.2rem); }
  h2.kasten { font-size: min(3.2vw, 3.15rem); }
  .voll h2.kasten { font-size: min(3.4vw, 3.15rem); }
  .inhalt-spalte { grid-column: 1; grid-row: 1; }
  .buehnen-spalte { grid-column: 2; grid-row: 1; position: sticky; top: 0; height: 100svh; }
  .buehne { height: 100%; border-radius: 0; }
  .inhalt-spalte > .abschnitt { padding-left: var(--rand); padding-right: 3.2vw; }
  .grenzen { grid-template-columns: 1fr; }
  .grenze { display: grid; grid-template-columns: 12rem 1fr; gap: 1rem; align-items: baseline; }
  .grenze h3 { margin: 0; }
  .stationen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 2rem; }
  .voll { padding-left: var(--rand); padding-right: var(--rand); }
  .voll > * { max-width: 72rem; }
}

/* ---------- Rechtsseiten und 404 ---------- */
.rechtstext { max-width: 46rem; padding: calc(var(--nav-h) + 3.4rem) var(--rand) 4rem; }
.rechtstext h1.kasten { font-size: clamp(2rem, 7vw, 3rem); margin-bottom: 1.6rem; }
.rechtstext h2 { font-size: 1.15rem; color: var(--tinte); font-weight: 640; margin: 1.8rem 0 .4rem; }
.rechtstext p { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.6; margin: 0 0 .6rem; }
.rechtstext .handlungen { margin-top: 1.6rem; }

/* ---------- ohne JavaScript: Preise als Liste ---------- */
.preis-liste { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .6rem; max-width: 36rem; font-family: var(--serif); }
.preis-liste b { font-family: var(--sans); }
/* ---------- Drei Treiber: Entlastung, bessere Kunden, Bewerber (Reihenfolge von Janik) ---------- */
.treiber { list-style: none; counter-reset: treiber; margin: 2.2rem 0 0; padding: 0; display: grid; gap: 2rem; max-width: 36rem; }
.treiber li { position: relative; padding-left: 3.1rem; counter-increment: treiber; }
.treiber li::before { content: counter(treiber); position: absolute; left: 0; top: .1rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 2px solid var(--violett); color: var(--violett); font-weight: 700; display: grid; place-items: center; font-size: .9375rem; }
.kasten-klein { font-size: 1.35rem; }
.treiber p { margin: .7rem 0 0; font-family: var(--serif); font-size: 1.125rem; line-height: 1.55; }
.treiber mark, .gruende mark { background: linear-gradient(var(--flieder), var(--flieder)) no-repeat 0 70% / 100% 72%; color: inherit; padding: 0 .1em; }
.treiber .quelle { font-family: var(--sans); font-size: .8125rem; line-height: 1.45; color: var(--leise); }
.drehtag { margin: 1rem 0 0; max-width: 36rem; padding: .9rem 1rem; border-radius: 14px; background: var(--blatt); box-shadow: 0 1px 2px rgba(23, 18, 46, .05); }

/* ---------- Auftakt: Kopf aus Worten (quelle/js/wortkopf.js) ---------- */
.auftakt { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav-h) + 3rem) var(--rand) 3.2rem; }
/* Bühnenlicht hinter dem Kopf: Violett von links, Pink von rechts (wie die Farbfolien am Set) */
.auftakt::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(34% 44% at 72% 44%, rgba(87, 63, 255, .15), transparent 70%), radial-gradient(26% 36% at 86% 60%, rgba(255, 106, 211, .17), transparent 72%); }
@media (max-aspect-ratio: 9/10) { .auftakt::before { background: radial-gradient(60% 24% at 40% 20%, rgba(87, 63, 255, .15), transparent 70%), radial-gradient(46% 20% at 70% 26%, rgba(255, 106, 211, .18), transparent 72%); } }
.held-text { position: relative; z-index: 2; max-width: 40rem; }
.wortkopf { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 1; }
.bewegt .wortkopf { position: fixed; z-index: 6; } /* über dem Inhalt: die Zeichen fliegen ins Transkript */
/* Untertitel in fester Spalte, der Anhalten-Knopf daneben: sein Platz hängt nicht an der Satzbreite (Fehlklick 22.10.).
   Mindesthöhe zwei Untertitelzeilen, sonst verschiebt ein Wechsel 1 ↔ 2 Zeilen den mittig gesetzten Auftakt samt Knopf */
.sprecher { display: grid; grid-template-columns: minmax(0, 34rem) auto; justify-content: start; align-items: start; gap: .4rem 1rem; margin: 1.6rem 0 0; min-height: calc(2 * 1.9 * 1.125rem); }
.untertitel { margin: 0; font-weight: 640; font-size: 1.125rem; max-width: 34rem; }
.untertitel .zeile:not(:empty) { background: var(--tinte); color: #fff; padding: .18em .42em; line-height: 1.9; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.untertitel b { background: var(--pink); color: var(--tinte); font-weight: 640; }
/* Trefferfläche 44 × 44 px, Schrift mittig auf Höhe der ersten Untertitelzeile (1,9 × 1,125rem) */
.pause-kopf { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-top: calc(1.06875rem - 22px); font: inherit; font-size: .8125rem; color: var(--leise); background: none; border: 0; padding: 0; text-decoration: underline; text-decoration-color: var(--violett); text-underline-offset: .2em; cursor: pointer; }
.pause-kopf[hidden] { display: none; }
/* ohne Bewegung (oder ohne JavaScript) spricht der Kopf nicht: kein leerer Platz für Untertitel zwischen Versprechen und Knopf */
html:not(.bewegt) .sprecher { display: none; }
.zeilen { transition: opacity .35s ease; }
.blatt.wartet .zeilen { opacity: 0; }
@media (max-aspect-ratio: 9/10) {
  .js .auftakt { justify-content: flex-start; padding-top: 41svh; }
  /* Fünf-Sekunden-Test mobil: Überschrift, Satz und Knopf im ersten Bild, die Untertitel danach */
  .held-text { display: flex; flex-direction: column; }
  .held-text .handlungen { order: 1; margin-top: 1.2rem; }
  .held-text .sprecher { order: 2; }
  .held-text .fuer { order: 3; }
  .auftakt .lead { font-size: 1.125rem; margin-top: 1.1rem; }
}
/* schmal: erst das Transkript (dort landen die Zeichen aus dem Auftakt), dann der Ring, dann der Rest */
@media (max-width: 1099px) {
  .kapitel { display: flex; flex-direction: column; }
  .inhalt-spalte { display: contents; }
  #worte { order: 1; }
  .buehnen-spalte { order: 2; margin-top: 2.4rem; }
  .inhalt-spalte > section:not(#worte) { order: 3; }
}
/* Auftakt im Querformat unter 1100 px (Tablet quer, kleine Laptops; Live-Befund 03.11.2026): Text in fester Spalte links mit
   der Schriftgröße des Schreibtischs, der Kopf rechts daneben (wortkopf.js misst die Zeilen und hält in jeder Drehung Abstand) */
@media (min-aspect-ratio: 9/10) and (min-width: 560px) and (max-width: 1099px) {
  .held-text { max-width: min(44rem, 52vw); }
  .auftakt h1.kasten { font-size: min(4vw, 4.2rem); }
  .auftakt .lead { font-size: clamp(1.0625rem, .9rem + .6vw, 1.25rem); }
}
@media (min-width: 1100px) {
  .held-text { max-width: min(44rem, 50vw); }
  /* die Bühne beginnt unter dem Auftakt: oben weich einblenden statt harter Kante */
  .buehnen-spalte { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%); mask-image: linear-gradient(to bottom, transparent 0, #000 14%); }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; } }

/* ---------- Vorher: warum bei Ihnen nichts regelmäßig kommt (Janik 29.10.2026: Scrollen erzählt vorher → nachher) ---------- */
.gruende { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: 1.4rem; max-width: 36rem; }
.gruende li { padding-left: 1.1rem; border-left: 3px solid transparent; border-image: linear-gradient(var(--violett), var(--pink)) 1; }
.gruende h3 { margin: 0; font-size: 1.15rem; color: var(--tinte); }
.gruende p { margin: .45rem 0 0; font-family: var(--serif); font-size: 1.0625rem; line-height: 1.55; }
#vorher > .quelle { max-width: 36rem; }
/* Was im Betrieb herumliegt: neutral, erst im Plan violett (geplant) */
.fragmente { position: relative; margin: 1.8rem 0 2.2rem; max-width: 36rem; }
.haufen { position: relative; height: 15rem; }
.fragment { position: absolute; display: grid; gap: .05rem; padding: .5rem .75rem .55rem 2.3rem; background: var(--blatt); border-radius: 10px; box-shadow: 0 1px 2px rgba(23, 18, 46, .06), 0 12px 26px -10px rgba(23, 18, 46, .16); font-size: .875rem; line-height: 1.25; white-space: nowrap; transform: rotate(var(--r, 0deg)); will-change: transform; }
.fragment b { font-weight: 600; color: var(--tinte); }
.fragment small { color: var(--leise); font-size: .8125rem; }
.fragment::before { content: ""; position: absolute; left: .7rem; top: 50%; width: 1.05rem; height: 1.05rem; margin-top: -.525rem; border-radius: 4px; background: var(--flaeche); }
.f-ton::before { border-radius: 50%; background: var(--tinte); box-shadow: inset 0 0 0 .3rem #fff, inset 0 0 0 1rem var(--tinte); }
.f-video::before { background: var(--tinte); clip-path: polygon(22% 12%, 88% 50%, 22% 88%); border-radius: 0; }
.f-frage::before { content: "„"; background: none; font-family: var(--serif); font-size: 1.6rem; line-height: .9; color: var(--tinte); width: auto; height: auto; margin-top: -.75rem; }
.f-datei::before { clip-path: polygon(0 0, 66% 0, 100% 34%, 100% 100%, 0 100%); border-radius: 0; background: #C8C4D6; }
.f-notiz::before { transform: rotate(-8deg); background: #DAD5E4; }
.f-chat::before { border-radius: 50% 50% 50% 0; background: #C8C4D6; }
.f-bild::before { background: linear-gradient(135deg, #D6D2E2 0 45%, #9C97B0 45% 100%); }
.fragment:nth-child(1) { left: 0; top: .2rem; --r: -5deg; }
.fragment:nth-child(2) { right: 4%; top: 0; --r: 4deg; }
.fragment:nth-child(3) { left: 8%; top: 3.8rem; --r: 2deg; }
.fragment:nth-child(4) { right: 0; top: 4.6rem; --r: -3deg; }
.fragment:nth-child(5) { left: 2%; top: 8rem; --r: 6deg; }
.fragment:nth-child(6) { right: 6%; top: 8.6rem; --r: -6deg; }
.fragment:nth-child(7) { left: 30%; top: 11.2rem; --r: -2deg; }
.fragment:nth-child(8) { right: 0; top: 12rem; --r: 3deg; }
.fragment:nth-child(9) { left: 0; top: 12.2rem; --r: -4deg; }
.fragmente-bsp { position: absolute; right: 0; bottom: -1.7rem; font-family: var(--serif); font-style: italic; font-size: .8125rem; color: var(--leise); }
/* Variante B „In den Plan“: vier Wochen mit je drei Plätzen (etwa drei Beiträge pro Woche) über dem Haufen */
.plan { display: none; position: absolute; inset: .4rem 0 auto; gap: .55rem; opacity: 0; pointer-events: none; }
.vorher-b .plan { display: grid; }
.plan-woche { display: grid; grid-template-columns: 4.4rem repeat(3, minmax(0, 1fr)); gap: .45rem; align-items: center; }
.plan-woche i { font-style: normal; font-size: .8125rem; color: var(--leise); }
.slot { height: 2.6rem; border-radius: 8px; border: 1.5px dashed rgba(87, 63, 255, .32); }
.fragment.im-plan { background: var(--blatt); }
.fragment.im-plan::after { content: ""; position: absolute; right: -.35rem; top: -.35rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--violett); box-shadow: 0 0 0 2.5px var(--blatt); }
/* Variante A „Ins Handy“: nach dem Flug bleibt eine Zeile */
.fragmente-status { display: none; position: absolute; inset: 0 0 auto; height: 15rem; margin: 0; align-items: center; justify-content: center; font-weight: 600; color: var(--tinte); }
.fragmente-status span::before { content: ""; display: inline-block; width: .7rem; height: .7rem; margin-right: .55rem; border-radius: 50%; background: var(--violett); box-shadow: 0 0 0 4px rgba(255, 106, 211, .38); }
.fragmente.leer .fragmente-status { display: flex; }

/* ---------- Weiche: wo drückt es bei Ihnen? (Einstiege, Recruiting vorn; Janik 29.10.2026) ---------- */
.weiche { margin: 2rem 0 0; max-width: 40rem; display: grid; gap: 1rem; }
.weiche-karten { display: grid; gap: .6rem; grid-template-columns: 1fr; }
.weiche-karte { font: inherit; text-align: left; display: grid; align-content: start; gap: .4rem; padding: 1rem 1.05rem 1.1rem; border: 0; border-radius: 16px; background: var(--flaeche); color: var(--text); cursor: pointer; transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.weiche-karte:hover { background: #DAD6EA; }
.weiche-karte .wort { font-family: var(--serif); font-style: italic; font-size: 1.125rem; line-height: 1.35; color: var(--tinte); }
.weiche-karte .titel { font-size: .875rem; font-weight: 600; color: var(--leise); }
/* gewählt: wie ein Untertitel-Kasten, Tinte mit pinkem Titel */
.weiche-karte[aria-pressed="true"] { background: var(--tinte); box-shadow: 0 16px 34px -18px rgba(87, 63, 255, .8); }
.weiche-karte[aria-pressed="true"] .wort { color: #fff; }
.weiche-karte[aria-pressed="true"] .titel { color: var(--pink); }
.weiche-ziele { display: grid; gap: .8rem; }
.weiche-ziel { background: var(--blatt); border-radius: 16px; padding: 1.1rem 1.2rem 1.2rem; box-shadow: var(--schatten); }
.weiche-ziel[hidden] { display: none; }
.weiche-ziel h3 { margin: 0; font-size: 1.1rem; color: var(--tinte); }
.weiche-ziel p { margin: .45rem 0 0; font-family: var(--serif); font-size: 1.0625rem; }
.weiche-ziel a { text-decoration-color: var(--violett); text-underline-offset: .2em; }
.weiche-ziel .weiter { font-style: italic; color: var(--leise); }
.weiche-regel { margin: 1.2rem 0 0; font-weight: 600; color: var(--tinte); max-width: 36rem; }
.weiche-preis { margin: .3rem 0 0; font-size: .9375rem; color: var(--leise); max-width: 36rem; }
.preis-hinweis { margin: 1rem 0 0; font-family: var(--serif); color: var(--text); max-width: 34rem; }
@media (min-width: 560px) { .weiche-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Anführungszeichen je Sprache (Fragen-Karte, Weiche, Einstiege im Menü) */
.weiche-karte .wort::before, .mega-liste .wort::before, .menue-einstiege .wort::before { content: "„"; }
.weiche-karte .wort::after, .mega-liste .wort::after, .menue-einstiege .wort::after { content: "“"; }
:lang(en) .karte q { quotes: "“" "”"; }
:lang(en) .weiche-karte .wort::before, :lang(en) .mega-liste .wort::before, :lang(en) .menue-einstiege .wort::before { content: "“"; }
:lang(en) .weiche-karte .wort::after, :lang(en) .mega-liste .wort::after, :lang(en) .menue-einstiege .wort::after { content: "”"; }
:lang(es) .karte q { quotes: "«" "»"; }
:lang(es) .weiche-karte .wort::before, :lang(es) .mega-liste .wort::before, :lang(es) .menue-einstiege .wort::before { content: "«"; }
:lang(es) .weiche-karte .wort::after, :lang(es) .mega-liste .wort::after, :lang(es) .menue-einstiege .wort::after { content: "»"; }
:lang(en) .f-frage::before { content: "“"; }
:lang(es) .f-frage::before { content: "«"; font-size: 1.3rem; margin-top: -.6rem; }
html.menue-offen { overflow: hidden; }

/* ---------- Sprachwahl unter / (nur ohne Weiterleitung sichtbar) und Fehlerseite: drei Sprachen untereinander ---------- */
.nav-schlicht .nav-innen { padding-right: 7px; }
.sprach-block { margin: 2rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid var(--linie); }
.sprach-block h2 { margin: 0 0 .5rem; font-size: 1.35rem; color: var(--tinte); font-weight: 700; letter-spacing: -0.015em; }
.sprach-block .handlungen { margin-top: 1rem; }
.sprachwahl .sprach-block:first-of-type { border-top: 0; padding-top: 0; }