/* Nubro Digital · Kino-Editorial · Stand 09.10.2026 (Maskottchen: Nubro, der Igel)
   Dunkle Bühne mit Kinobalken beim Auftritt; der E-Book-Bereich liegt als helle Buchseite darauf. Bewegung nur mit html.bewegung
   (gesetzt im Kopf der Seite, entfernt bei reduzierter Bewegung oder Schalter „Animationen“).
   Techniken angelehnt an Muster auf 21st.dev, u. a. designali-in „Book“, hyperiux „Parallax Strip Slider“,
   soralabs „Text Reveal (Mask)“, kedhareswer „Giant Wordmark Footer“; kein fremder Code übernommen. */

@font-face{font-family:'Geist';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/Geist-normal-300_700.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(../fonts/Geist_Mono-normal-400_500.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/Instrument_Serif-normal-400.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/Instrument_Serif-italic-400.woff2) format('woff2')}
/* Schriften des E-Books (SIL Open Font License, Lizenztexte in fonts/) */
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/source-serif-4-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/source-serif-4-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/source-serif-4-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:600;font-display:swap;src:url(../fonts/source-serif-4-latin-600-italic.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2')}
/* Fraunces für den Namen des Planeten Designs auf der Startseite (SIL Open Font License, fonts/LIZENZ-fraunces.txt) */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/Fraunces-Soft-300.ttf) format('truetype')}

:root{
  --nacht:#070B10;--nacht-2:#0B1119;--tinte:#E8EDF2;--stahl:#9AA5B1;--stahl-2:#8793A0;
  --blau:#5B9DFF;--gruen:#38D9A0;--licht:#F5DDBA;--weiss:#F3F5F7;--dunkel:#04121A;
  --verlauf:linear-gradient(100deg,var(--blau),var(--gruen));
  --linie:rgba(232,237,242,.12);--glas:rgba(232,237,242,.045);
  --rand:clamp(16px,4.4vw,72px);
  --sans:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --mono:'Geist Mono',ui-monospace,Menlo,Consolas,monospace;
  --kino:cubic-bezier(.7,0,.2,1);--auftritt:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;   /* bewusst nur dunkel: Formularfelder und Scrollleisten passen sich an */
}

/* Grundlagen */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
@media (prefers-reduced-motion:no-preference){html:not(.bewegung){scroll-behavior:smooth}}
body{margin:0;background:var(--nacht);color:var(--tinte);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg,canvas{display:block;max-width:100%}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--gruen);outline-offset:3px;border-radius:4px}
::selection{background:var(--blau);color:var(--dunkel)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:200;padding:10px 16px;border-radius:999px;background:var(--weiss);color:var(--dunkel);font-weight:600}
.skip:focus{top:12px}
.container{width:min(1360px,100% - 2*var(--rand));margin-inline:auto}

/* Ebenen für den Auftritt: Kinobalken und Filmkorn (der Name im Vorspann ist seit 11.10.2026 entfernt) */
.balken{display:none}
.bewegung .balken{display:block;position:fixed;left:0;right:0;height:50.5vh;background:#000;z-index:95;pointer-events:none;will-change:transform}
.balken--oben{top:0;transform-origin:50% 0}
.balken--unten{bottom:0;transform-origin:50% 100%}
.korn{position:fixed;inset:-10%;z-index:90;pointer-events:none;opacity:.045;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.bewegung .korn{animation:korn 1s steps(6) infinite}
@keyframes korn{0%,100%{transform:translate(0,0)}17%{transform:translate(-6%,4%)}33%{transform:translate(4%,-7%)}50%{transform:translate(-3%,8%)}67%{transform:translate(7%,2%)}83%{transform:translate(-8%,-3%)}}
.vignette{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(125% 95% at 50% 42%,transparent 58%,rgba(0,0,0,.5))}

/* Navigation */
.nav{position:fixed;z-index:80;top:clamp(10px,2vw,24px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:clamp(10px,2.2vw,30px);width:max-content;max-width:calc(100% - 24px);padding:7px 7px 7px 20px;border-radius:999px;background:none;border:1px solid transparent}
/* Kopfleiste durchsichtig: kein Balken, nur ein weicher Schatten von oben über die ganze Breite,
   damit Inhalt, der beim Scrollen darunter durchläuft, die Links nicht verdeckt */
.nav::before{content:"";position:absolute;z-index:-1;left:50%;top:calc(-1 * clamp(10px,2vw,24px));width:100vw;height:calc(100% + clamp(10px,2vw,24px) + 48px);transform:translateX(-50%);background:linear-gradient(to bottom,rgba(6,9,15,.86),rgba(6,9,15,.76) 50%,rgba(6,9,15,0));pointer-events:none}
.nav__marke{display:flex;align-items:center;gap:10px;font-weight:600;font-size:16px;letter-spacing:-.01em;white-space:nowrap}
.nav__zusatz{white-space:pre;margin-left:-10px}   /* seit 12.10.2026 im selben Stil wie „Nubro“; -10px hebt den Abstand der Marke auf, es bleibt ein Wortleerzeichen */
.punkt{width:11px;height:11px;border-radius:50%;background:var(--verlauf);flex:none}
.nav__links{display:flex;gap:24px;font-size:14px;color:var(--stahl)}
.nav__links a{white-space:nowrap;transition:color .2s}
.nav__links a:hover{color:var(--tinte)}
.nav__schalter{display:inline-flex;align-items:center;gap:8px;padding:8px 6px;border:0;background:none;color:var(--stahl);font:500 12px var(--mono);letter-spacing:.04em}
.nav__schalter i{position:relative;width:28px;height:16px;border-radius:99px;background:rgba(232,237,242,.16);transition:background .3s}
.nav__schalter i::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--stahl);transition:transform .3s var(--kino),background .3s}
.nav__schalter[aria-pressed="true"] i{background:rgba(56,217,160,.35)}
.nav__schalter[aria-pressed="true"] i::after{transform:translateX(12px);background:var(--gruen)}
.nav__schalter:disabled{opacity:.5;cursor:not-allowed}
.nav__cta{padding:11px 20px;border-radius:999px;background:var(--weiss);color:var(--dunkel);font-size:14px;font-weight:600;white-space:nowrap;transition:filter .2s}
.nav__cta:hover{filter:brightness(1.06)}
@media (max-width:1080px){.nav__links{display:none}}
@media (max-width:560px){.nav__zusatz{display:none}.nav{padding-left:14px}.nav__schalter span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.nav__cta{padding:10px 14px;font-size:13px}}

/* Bausteine: Überschriften, Fließtext, Knöpfe */
.titel{font-weight:600;font-size:clamp(40px,6.2vw,100px);line-height:.95;letter-spacing:-.048em;text-wrap:balance}
.titel--m{font-size:clamp(36px,4.4vw,68px)}
.titel em,.empf__titel em,.abspann__titel em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-right:.08em}
.lead{font-size:clamp(17px,1.3vw,20px);line-height:1.6;color:var(--stahl);max-width:54ch;text-wrap:pretty}
.hinweis{font-size:13px;line-height:1.5;color:var(--stahl-2)}
.hinweis a{text-decoration:underline;text-underline-offset:2px}

.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:17px 28px;border-radius:999px;border:1px solid transparent;font-weight:600;font-size:15px;line-height:1.2;white-space:nowrap;text-align:center;transition:color .45s var(--kino),border-color .45s var(--kino)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;clip-path:inset(0 100% 0 0 round 999px);transition:clip-path .55s var(--kino)}
.btn:hover::before,.btn:focus-visible::before{clip-path:inset(0 0 0 0 round 999px)}
.btn--voll{background:var(--verlauf);color:var(--dunkel)}
.btn--voll::before{background:var(--weiss)}
.btn--rand{background:none;border-color:rgba(232,237,242,.3);color:var(--tinte)}
.btn--rand::before{background:var(--verlauf)}
.btn--rand:hover,.btn--rand:focus-visible{color:var(--dunkel);border-color:transparent}
.btn--hell{background:var(--weiss);color:var(--dunkel)}
.btn--hell::before{background:var(--verlauf)}
.btn--dunkel{background:var(--dunkel);color:var(--weiss)}
.btn--dunkel::before{background:var(--verlauf)}
.btn--dunkel:hover,.btn--dunkel:focus-visible{color:var(--dunkel)}
.btn--klein{padding:13px 20px;font-size:14px}
@media (prefers-reduced-motion:reduce){.btn,.btn::before{transition:none}}

/* Nubro mit Helm in den Abschnitten: Figur, Augen-Pflaster zum Blinzeln, Schweben (Bewegung in site.js „Nubro“) */
.nubro{position:relative;aspect-ratio:3/4}
.nubro::before{content:"";position:absolute;inset:14% 8% 10%;border-radius:50%;background:radial-gradient(closest-side,rgba(91,157,255,.2),rgba(56,217,160,.07) 60%,transparent);filter:blur(10px);pointer-events:none}
.nubro__flug,.nubro__schwebe{position:absolute;inset:0}
.nubro__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 28px 34px rgba(0,0,0,.42))}
.nubro__blinzeln{position:absolute;left:var(--l);top:var(--t);width:var(--b);height:var(--h);opacity:0;pointer-events:none}
.nubro.blinzelt .nubro__blinzeln{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .bewegung .nubro__schwebe{animation:nubro-schweben 7s ease-in-out infinite}
  .bewegung .nubro--springen .nubro__schwebe{animation-duration:5.6s;animation-delay:-2s}
  .bewegung .nubro--abspann .nubro__schwebe{animation-duration:6.4s;animation-delay:-4s}
}
@keyframes nubro-schweben{0%,100%{transform:translate(0,0) rotate(-2deg)}30%{transform:translate(4px,-14px) rotate(1.5deg)}65%{transform:translate(-5px,-6px) rotate(3deg)}}

/* Start: Film. Die Schleuse öffnet sich ins Cockpit, Nubro schwebt vor dem Bildschirm, die Kamera fliegt hinein.
   Ohne Bewegung (System, Schalter, kein JS): ruhiges Standbild des Cockpits, der Text steht darunter. */
.film{position:relative;background:transparent}
.film__rahmen{position:relative}
.film__buehne{position:relative;z-index:0;height:100vh;height:100svh;overflow:hidden;background:transparent;isolation:isolate}
.film__poster,.film__video,.film__szene{position:absolute;inset:0;width:100%;height:100%;display:block}
.film__poster,.film__video{object-fit:cover}
.film__poster{z-index:0}
.film__video{z-index:1;opacity:0}
.film__szene{z-index:2;overflow:hidden}
html:not(.bewegung) .film__poster,html:not(.bewegung) .film__video{display:none}
/* Schleier hinter Titel und Zeile (nur solange Schrift zu schützen ist) und Abfall oben und unten */
.film__buehne::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(ellipse 62% 44% at 50% 50%,rgba(5,7,13,.64),rgba(5,7,13,0) 72%);opacity:var(--film-schleier,0)}
.film__buehne::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(5,7,13,.5),rgba(5,7,13,0) 24%,rgba(5,7,13,0) 66%,rgba(5,7,13,.66));opacity:var(--film-rand,1)}
.film__glyphen,.film__schein,.film__lochtext{font-family:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:700;letter-spacing:.02em}
.film__schein{fill:url(#film-verlauf);opacity:.6}

.film__titel,.film__zeile,.film__hinweis,.film__skip,.film__leiste{display:none}
.bewegung .film__titel{display:grid;place-items:center;position:absolute;inset:0;z-index:2;margin:0;padding:0 6%;text-align:center;font:600 clamp(40px,7.2vw,118px)/.95 var(--sans);letter-spacing:-.045em;color:var(--weiss);text-shadow:0 4px 30px rgba(0,0,0,.55);text-wrap:balance;pointer-events:none;will-change:transform,filter,opacity}
.bewegung .film__zeile{display:block;position:absolute;z-index:2;left:clamp(20px,6vw,96px);right:auto;max-width:min(24ch,46vw);bottom:clamp(84px,15vh,150px);margin:0;text-align:left;font:italic 400 clamp(22px,2.5vw,40px)/1.2 var(--serif);color:var(--licht);text-shadow:0 3px 22px rgba(0,0,0,.75);text-wrap:balance;opacity:0;pointer-events:none}
.bewegung .film__hinweis{display:flex;flex-direction:column;align-items:center;gap:8px;position:absolute;z-index:3;left:50%;bottom:clamp(22px,5vh,44px);transform:translateX(-50%);font:500 13px/1 var(--sans);letter-spacing:.04em;color:rgba(240,244,248,.78);transition:opacity .4s;pointer-events:none}
.bewegung .film__hinweis svg{animation:film-pfeil 1.6s ease-in-out infinite}
@keyframes film-pfeil{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(5px);opacity:1}}
.bewegung .film__skip{display:inline-flex;align-items:center;position:absolute;z-index:5;left:clamp(16px,3vw,32px);bottom:clamp(18px,4vh,32px);min-height:40px;padding:0 16px;border-radius:999px;background:rgba(5,7,13,.62);border:1px solid rgba(232,237,242,.24);color:var(--tinte);font:500 13px/1 var(--sans);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .2s,border-color .2s,opacity .3s}
/* KI-Hinweis im Hero: klein, aber lesbar; steht auch ohne Bewegung */
.film__ki{position:absolute;z-index:5;right:clamp(16px,3vw,32px);bottom:clamp(18px,4vh,32px);max-width:min(34ch,52vw);margin:0;padding:8px 12px;border-radius:10px;background:rgba(5,7,13,.6);border:1px solid rgba(232,237,242,.16);color:rgba(240,244,248,.9);font:500 12.5px/1.4 var(--sans);letter-spacing:.01em;text-align:right;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none}
@media (max-width:899.98px){.film__ki{bottom:clamp(18px,4vh,32px);font-size:12px;max-width:48vw}}
html:not(.bewegung) .film__ki{right:auto;left:clamp(16px,3vw,32px);text-align:left}   /* ohne Bewegung steht rechts der Chat-Knopf */
.film__skip:hover{background:rgba(5,7,13,.86);border-color:rgba(232,237,242,.5)}
.film__skip[hidden],.film__ki[hidden]{display:none}
/* Bis die Bewegung startet, steht nur das Startbild (Schleuse) mit Titel; die Szene darüber malt site.js */
.bewegung .film__cockpit,.bewegung .film__glas,.bewegung .film__all,.bewegung .film__spiegel,.bewegung .film__feld,.bewegung .film__schein,.bewegung .film__nubro{opacity:0}
.bewegung .film__leiste{display:block;position:absolute;z-index:3;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.12)}
.film__leiste i{display:block;height:100%;background:var(--verlauf);transform-origin:0 50%;transform:scaleX(0)}

.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.zl-mask{padding-bottom:.16em;margin-bottom:-.16em}   /* Unterlängen nicht abschneiden, solange die Zeilen aus der Maske steigen */
@media (max-width:899.98px){
  .bewegung .film__hinweis{bottom:84px}
  .bewegung .film__zeile{left:6%;right:6%;max-width:none;text-align:center;bottom:clamp(110px,15vh,150px)}
}
@media (prefers-reduced-motion:reduce){.film__hinweis svg{animation:none}}

/* Erde: Einleitung nach dem Film. Die Erde geht unten auf, ihre untere Hälfte liegt unter dem nächsten Abschnitt.
   Mit Bewegung breitet sie sich beim Scrollen aus (site.js „Erde“). */
/* Film und Erde teilen einen Sternenhimmel (.weltall), darum hat die Erde selbst keinen Hintergrund außer ihrem Schein */
.weltall{position:relative;z-index:1;background:url("erde/sterne.svg") 0 0/320px 320px,#06090F}
.erde{--erde:min(110vw,1400px);position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;min-height:100vh;min-height:100svh;padding:clamp(120px,19vh,200px) 0 0;overflow:hidden;text-align:center;outline:none;
  background:radial-gradient(60% 46% at 50% 100%,rgba(91,200,255,.16),transparent 72%)}
/* Mit Bewegung kommt die Erde schon während der letzten halben Bildschirmhöhe des Films (dort ist der Film durchsichtig) */
.bewegung .erde{margin-top:-50vh;margin-top:-50svh}
html:not(.bewegung) .erde{min-height:108vh;min-height:108svh}   /* ohne Bewegung steht die Erde still: genug Abstand zum Text */
.erde__himmel{position:absolute;inset:0;pointer-events:none}
.erde__sonne{position:absolute;top:1%;right:3%;width:clamp(180px,24vw,400px);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,#FFFDF4,#FFF1CF 12%,rgba(255,213,138,.42) 30%,rgba(255,180,92,.1) 60%,transparent)}
/* Mond: links unten neben dem Untertitel, groß genug für Krater und Meere; Licht wie bei der Sonne von oben rechts */
.erde__mond{position:absolute;left:clamp(-30px,3vw,64px);top:42%;width:clamp(150px,21vw,330px);aspect-ratio:1;border-radius:50%;box-shadow:0 0 80px 4px rgba(196,212,232,.09)}
.erde__mond img{display:block;width:100%;height:100%}
/* Nubro beim Abflug: liegt im Himmel und damit hinter der Erde; zu sehen nur, solange site.js ihn fliegen lässt */
.erde__schiff{position:absolute;z-index:0;left:0;top:0;width:min(11vw,190px);opacity:0;visibility:hidden;pointer-events:none}
.erde__schiff img{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 26px rgba(0,0,0,.5))}
/* Ab 900 px mit Bewegung: die Erde ganz zeigen, die untere Hälfte läuft in die Reise hinein */
@media (min-width:900px){
  .bewegung .erde{overflow:visible;background:none}   /* der Lichtschein endete sonst sichtbar an der Abschnittskante; die Erde hat ihren eigenen */
  /* Herausgezoomt und höher: Abstand über dem Titel halbiert, Erde kleiner, Mond und Sonne höher */
  .bewegung .erde{--erde:min(58vw,820px,92vh);padding-top:clamp(28px,5vh,60px)}
  .bewegung .erde__mond{top:22%;width:clamp(130px,15vw,250px)}
  .bewegung .erde__sonne{top:-4%}
  /* Der Himmel des Weltalls läuft unter der Erde weiter (hinter der Reise), die Sterne der Reise setzen erst danach ein */
  .bewegung .weltall::after{content:"";position:absolute;left:0;right:0;top:100%;z-index:-1;height:170vh;background:inherit;pointer-events:none}
  .bewegung .weltall + .reise::before{background:url("erde/sterne.svg") var(--abflug-x,0px) 0/320px 320px;-webkit-mask:linear-gradient(to bottom,transparent 140vh,#000 170vh);mask:linear-gradient(to bottom,transparent 140vh,#000 170vh)}
}
.erde__text{position:relative;z-index:2;display:grid;justify-items:center;gap:clamp(16px,1.7vw,24px)}
/* Überschrift wie der Titel am Anfang eines Films: Versalien, dünn, weit gesperrt. Die Sperrung steht in --sperr, damit
   die Zeilen beim Auftritt aus einer weiten Sperrung zusammenlaufen können (site.js „Erde“). */
.erde__titel{--sperr:.3em;display:grid;justify-items:center;gap:.16em;margin:0 0 clamp(2px,.6vw,8px);font-weight:300;font-size:clamp(25px,4.1vw,68px);line-height:1.08;text-transform:uppercase;color:#F1F4F8;text-shadow:0 0 30px rgba(6,9,15,.6)}
.erde__zeile{display:block;padding-left:var(--sperr);letter-spacing:var(--sperr);white-space:nowrap}   /* Ausgleich: die Sperrung steht auch hinter dem letzten Buchstaben */
.erde__strich{display:block;width:clamp(56px,6vw,96px);height:1px;background:var(--verlauf)}
.erde__unter{max-width:44ch;font-size:clamp(17px,1.45vw,21px);line-height:1.55;color:rgba(232,237,242,.9);text-wrap:balance}
.erde__wer{font-size:clamp(13px,1vw,15px);letter-spacing:.02em;color:var(--stahl)}
.erde__planet{position:absolute;left:50%;bottom:0;z-index:1;width:var(--erde);aspect-ratio:1;transform:translate(-50%,60%) scale(.76);pointer-events:none}
.erde__planet::before{content:"";position:absolute;inset:-9%;border-radius:50%;background:radial-gradient(closest-side,rgba(91,200,255,.32) 78%,rgba(91,157,255,.08) 90%,transparent)}
.erde__planet img{position:relative;display:block;width:100%;height:100%;will-change:transform}
/* Der nächste Abschnitt (Reise) legt sich über die untere Kante der Erde, siehe „Startseite im Weltraum“ */
@media (max-width:899.98px){
  .erde,html:not(.bewegung) .erde{--erde:220vw;min-height:92vh;min-height:92svh;padding-top:clamp(104px,16vh,140px)}
  .erde__titel{--sperr:.2em}
  .erde__sonne{top:1%;right:-10%;width:clamp(150px,40vw,240px)}
  .erde__mond{left:-9vw;top:auto;bottom:24%;width:clamp(120px,34vw,200px)}
}

/* Über der hellen Buchseite (E-Book-Seite, ebook.js): dunkle Schrift, heller Schatten nur in der Breite der Seite */
.nav--hell::before{width:min(1360px,100vw - 2*var(--rand));background:linear-gradient(to bottom,rgba(251,248,242,.96),rgba(251,248,242,.86) 50%,rgba(251,248,242,0))}
.nav--hell .nav__marke,.nav--hell .nav__links:not(.offen) a,.nav--hell .nav__links:not(.offen) a:hover{color:#16202A}
.nav--hell .nav__menue{color:#16202A;border-color:rgba(22,32,42,.3)}
.nav--hell .nav__cta{background:var(--dunkel);color:var(--weiss)}
.nav--hell :focus-visible{outline-color:#0B3F39}

/* Kopfleiste und Chat-Knopf erst nach dem Film: im Film nur Bild, danach gleiten sie herein */
.nav{transition:transform .9s var(--auftritt),opacity .6s ease}
.launcher{transition:filter .2s,transform .9s var(--auftritt),opacity .6s ease}
.bewegung:not(.film-vorbei) .nav{opacity:0;transform:translate(-50%,-150%);pointer-events:none}
.bewegung:not(.film-vorbei) .launcher{opacity:0;transform:translateY(28px) scale(.9);pointer-events:none}
.bewegung:not(.film-vorbei) .nav:focus-within{opacity:1;transform:translateX(-50%);pointer-events:auto}
.bewegung:not(.film-vorbei) .launcher:focus-visible{opacity:1;transform:none;pointer-events:auto}
.bewegung.film-vorbei .nav>*{animation:nav-rein .8s var(--auftritt) both}
.bewegung.film-vorbei .nav>:nth-child(2),.bewegung.film-vorbei .nav>:nth-child(3){animation-delay:.08s}
.bewegung.film-vorbei .nav>:nth-child(4){animation-delay:.16s}
.bewegung.film-vorbei .nav>:nth-child(5){animation-delay:.24s}
@keyframes nav-rein{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* Abschnitte allgemein */
.szene{position:relative;padding-top:clamp(96px,12vw,180px)}

/* Webdesign mit Filmstreifen */
.web__kopf{display:grid;grid-template-columns:minmax(0,1fr);align-items:end;gap:clamp(24px,4vw,64px)}
.web__text{display:grid;gap:24px}

.streifen{position:relative;margin-top:clamp(40px,5vw,80px)}
.streifen__spur{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);width:min(1360px,100% - 2*var(--rand));margin-inline:auto;padding:46px 0}
.streifen__spur::before,.streifen__spur::after{content:"";position:absolute;left:0;right:0;height:14px;opacity:.16;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='14'%3E%3Crect x='6' y='2' width='14' height='10' rx='2.5' fill='%23E8EDF2'/%3E%3C/svg%3E") repeat-x}
.streifen__spur::before{top:14px}
.streifen__spur::after{bottom:14px}
.bild{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:end;gap:clamp(18px,2vw,32px);padding:clamp(16px,1.6vw,24px);border-radius:12px;background:linear-gradient(180deg,#0E1621,#0A0F16);border:1px solid var(--linie)}
.bild__rahmen{display:grid;place-items:center;aspect-ratio:16/10;border-radius:8px;overflow:hidden;border:1px solid rgba(232,237,242,.06);background:radial-gradient(120% 90% at 30% 20%,rgba(91,157,255,.14),transparent 60%),radial-gradient(90% 80% at 90% 100%,rgba(56,217,160,.1),transparent 60%),var(--nacht)}
.bild__grafik{width:88%;height:auto}
.bild h3{font-weight:600;font-size:clamp(24px,2.3vw,34px);line-height:1.05;letter-spacing:-.03em;margin:0 0 12px;text-wrap:balance}
.bild__text p:last-child{color:var(--stahl);font-size:16px;line-height:1.55}
.bewegung .tippt{animation:tippt 1.2s ease-in-out infinite}
.bewegung .tippt:nth-child(2){animation-delay:.15s}
.bewegung .tippt:nth-child(3){animation-delay:.3s}
@keyframes tippt{0%,80%,100%{opacity:.25}40%{opacity:1}}
.streifen__leiste{display:none}
@media (min-width:900px){
  .bewegung .streifen{height:100vh;display:flex;flex-direction:column;justify-content:center;gap:8px;overflow:hidden;margin-top:0}
  .bewegung .streifen__spur{display:flex;width:max-content;margin:0;padding:52px var(--rand)}
  .bewegung .bild{flex:0 0 min(60vw,860px)}
  .bewegung .streifen__leiste{display:block;width:min(1360px,100% - 2*var(--rand));margin:0 auto;height:2px;border-radius:2px;background:var(--linie);overflow:hidden}
  .bewegung .streifen__leiste i{display:block;height:100%;background:var(--verlauf);transform-origin:0 50%;transform:scaleX(0)}
}
@media (max-width:1100px){.bild{grid-template-columns:1fr}}
@media (max-width:899.98px){
  .web__kopf{grid-template-columns:1fr}
  .streifen__spur{grid-template-columns:1fr}
}

/* Beispiele: Karussell nach „Squeeze Carousel“ (21st.dev). Eine offene Karte (16:9 aus der Höhe), drei schmalere Spalten,
   der Rest als Lamellen. Breiten rechnet CSS über Container-Einheiten, ohne zu messen. */
.beispiele__kopf{display:grid;gap:20px;margin-bottom:clamp(24px,3vw,40px)}
.sq{container-type:inline-size;--sq-h:clamp(200px,30cqi,380px);--sq-gap:16px;--sq-slat:8px;--sq-slat-gap:8px;--sq-radius:12px;--sq-ms:.9s;--sq-ease:cubic-bezier(.16,1,.3,1);
  --sq-hero:calc(var(--sq-h) * 16 / 9);--sq-room:calc(100cqi - var(--sq-hero) - var(--sq-lamellen,3) * (var(--sq-slat-gap) + var(--sq-slat)) - 3 * var(--sq-gap))}
.sq[hidden]{display:none}
.js .sq__daten{display:none}
.sq__daten{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.sq__daten li{padding:18px 20px;border-radius:14px;background:var(--glas);border:1px solid var(--linie);color:var(--stahl);font-size:15px;line-height:1.5}
.sq__daten strong{color:var(--tinte);font-weight:600}
.sq__pfeile{display:flex;justify-content:flex-end;gap:8px;margin-bottom:16px}
.sq__pfeil{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid rgba(232,237,242,.22);background:rgba(232,237,242,.04);color:var(--tinte);transition:background .2s,border-color .2s}
.sq__pfeil:hover{background:var(--verlauf);border-color:transparent;color:var(--dunkel)}
.sq__pfeil svg{width:16px;height:16px;fill:currentColor}
.sq__fenster{height:var(--sq-h);overflow:hidden}
@container (max-width:640px){.sq__fenster,.sq__spur,.sq__karte{--sq-h:calc(100cqi * .74 * 9 / 16)}}
.sq__spur{display:flex;height:100%;width:max-content;transition:transform var(--sq-ms) var(--sq-ease)}
.sq__karte{position:relative;isolation:isolate;flex:none;height:100%;padding:0;border:0;overflow:hidden;background:#0E1621;cursor:pointer;color:#fff;
  transition:width var(--sq-ms) var(--sq-ease),margin-left var(--sq-ms) var(--sq-ease),border-radius var(--sq-ms) var(--sq-ease)}
.sq--still,.sq--still .sq__karte{transition:none!important}
.sq__karte:focus-visible{outline:2px solid var(--gruen);outline-offset:-3px}
/* Das Bild ist immer ein 16:9-Block in der Mitte: wird die Karte schmaler, sieht man nur weniger davon */
.sq__bild{position:absolute;inset-block:0;left:50%;width:var(--sq-hero);min-width:100%;transform:translateX(-50%);display:grid;place-items:center;
  background:radial-gradient(70% 70% at 78% 12%,rgba(255,255,255,.2),transparent 60%),linear-gradient(150deg,var(--a),var(--b))}
.sq__bild::before{content:"";position:absolute;inset:0;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(75% 70% at 50% 50%,#000 30%,transparent 80%);mask-image:radial-gradient(75% 70% at 50% 50%,#000 30%,transparent 80%)}
.sq__name{position:relative;font:italic 400 clamp(26px,4.6cqi,60px)/1 var(--serif);letter-spacing:-.01em;white-space:nowrap;text-shadow:0 2px 24px rgba(0,0,0,.35);opacity:0;transition:opacity var(--sq-ms) var(--sq-ease)}
.sq__karte.ist-vorn .sq__name{opacity:1}   /* in schmalen Karten würde der Name mitten im Wort abgeschnitten */
.sq__karte img{position:absolute;inset-block:0;left:50%;width:var(--sq-hero);min-width:100%;height:100%;max-width:none;transform:translateX(-50%);object-fit:cover}
.sq__marke{position:absolute;inset:auto 0 0 0;padding:44px 18px 16px;text-align:left;font:500 13px var(--sans);background:linear-gradient(to top,rgba(0,0,0,.55),transparent);opacity:0;transition:opacity var(--sq-ms) var(--sq-ease);pointer-events:none}
.sq__karte.ist-vorn .sq__marke{opacity:1}
.sq__texte{display:grid;margin-top:24px}
.sq__tafel{grid-area:1/1;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px 40px;opacity:0;visibility:hidden;transition:opacity var(--sq-ms) var(--sq-ease),visibility var(--sq-ms)}
.sq__tafel.ist-offen{opacity:1;visibility:visible}
.sq__tafel p{max-width:46rem;font-size:clamp(15px,1.2vw,17px);line-height:1.6;color:var(--stahl);text-wrap:pretty}
.sq__tafel p strong{color:var(--tinte);font-weight:600}
.sq__aktionen{display:flex;flex-wrap:wrap;gap:10px}
.sq__bald{display:inline-flex;align-items:center;padding:11px 18px;border-radius:999px;border:1px dashed rgba(232,237,242,.3);color:var(--stahl);font-size:14px;white-space:nowrap}
.sq__daten .sq__bald{margin-top:10px;padding:6px 12px;font-size:12.5px}

/* Preis als Kinokarte */
.preis__raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,5vw,88px);align-items:center}
.preis__text{display:grid;gap:24px}
.ticket-huelle{filter:drop-shadow(0 34px 60px rgba(91,157,255,.26)) drop-shadow(0 10px 18px rgba(0,0,0,.4))}
.ticket{--abriss:clamp(210px,31%,300px);--loch:16px;display:grid;grid-template-columns:minmax(0,1fr) var(--abriss);color:var(--dunkel);border-radius:24px;
  background:radial-gradient(480px 320px at 100% 0,rgba(91,157,255,.3),transparent 70%),radial-gradient(420px 300px at 0 100%,rgba(56,217,160,.26),transparent 70%),var(--weiss);
  -webkit-mask:radial-gradient(circle var(--loch) at calc(100% - var(--abriss)) 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--loch) at calc(100% - var(--abriss)) 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle var(--loch) at calc(100% - var(--abriss)) 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--loch) at calc(100% - var(--abriss)) 100%,#0000 98%,#000) bottom/100% 51% no-repeat}
.ticket__haupt{display:grid;gap:28px;padding:clamp(26px,3.4vw,48px)}
.ticket__kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 16px;font:500 12px var(--mono);color:#4B5662}
.ticket__kopf b{font-weight:500;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--dunkel)}
.ticket__liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px 24px;font-weight:500;font-size:17px}
.ticket__liste li{display:flex;align-items:center;gap:12px}
.ticket__liste svg{flex:none;width:22px;height:22px;border-radius:6px;background:rgba(31,95,224,.12)}
.haken{fill:none;stroke:#1F5FE0;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ticket__aktion{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.ticket__link{font-size:14px;color:#2F3A45;text-decoration:underline;text-underline-offset:3px}
.ticket__link:hover{color:var(--dunkel)}
.ticket__abriss{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:28px 18px;border-left:2px dashed rgba(4,18,26,.22);text-align:center}
.ticket__klein{font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#4B5662}
.ticket__preis{font:400 clamp(72px,7.2vw,116px)/.86 var(--serif);letter-spacing:-.03em;color:var(--dunkel);white-space:nowrap}
.ticket__zahl{display:inline-block;min-width:2.6ch;text-align:right;font-variant-numeric:tabular-nums lining-nums}
.ticket__eur{font-size:.48em;margin-left:.06em;background:linear-gradient(100deg,#2B65F0,#0E9F72);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:900px){.preis__raster{grid-template-columns:1fr}}
@media (max-width:640px){
  .ticket{grid-template-columns:1fr;-webkit-mask:none;mask:none}
  .ticket__abriss{border-left:0;border-top:2px dashed rgba(4,18,26,.22)}
  .ticket__liste{grid-template-columns:1fr}
}

/* E-Book: helle Buchseite im Look der E-Book-Abteilung (vorlage.css: Papier, Tinte, Grün, Merksatz-Block,
   Source Serif 4 für Titel und Lesetext, IBM Plex Sans für Beschriftungen). Nur dieser Bereich ist hell. */
.ebook{--papier:#FBF8F2;--sand:#F4F0E6;--e-hell:#EEE9DF;--e-tinte:#1B2430;--e-grau:#5B6470;--e-linie:#D9D3C7;--e-gruen:#0F6E63;--e-gruen-dunkel:#0B3F39;--e-gruen-hell:#E6F0ED;--e-petrol:#2D7A6A;--e-auf-dunkel:#F1EBDD;--e-auf-dunkel-leise:#A8CFC6;--e-serif:'Source Serif 4',Georgia,'Times New Roman',serif;--e-sans:'IBM Plex Sans','Segoe UI',Arial,sans-serif}
.seite{position:relative;display:grid;gap:clamp(44px,5.5vw,80px);padding:clamp(28px,5.5vw,88px) clamp(20px,5.5vw,88px) clamp(28px,4vw,56px);border-radius:6px;background:var(--papier);color:var(--e-tinte);font:400 17px/1.6 var(--e-sans);color-scheme:light;box-shadow:0 50px 120px -50px rgba(0,0,0,.9)}
.seite ::selection{background:var(--e-gruen);color:#fff}
.seite :focus-visible{outline-color:var(--e-gruen-dunkel)}
.ebook__raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,96px);align-items:center}

/* Cover nach dem Vorbild der echten Hefte: dunkelgrüner Verlauf, Serif-Titel, ein kursives Wort in Mint */
.buch{display:grid;place-items:center;padding:clamp(8px,2vw,32px) 0;perspective:1100px}
.buch__kipp{transform-style:preserve-3d;transform:rotateY(-24deg) rotateX(4deg)}
.buch__koerper{--w:clamp(220px,24vw,330px);--d:22px;position:relative;width:var(--w);aspect-ratio:3/4;transform-style:preserve-3d}
.buch__vorn,.buch__rueck{position:absolute;inset:0;border-radius:3px 8px 8px 3px}
.buch__rueck{background:#072A26;transform:translateZ(calc(-1 * var(--d)))}
.buch__seiten{position:absolute;top:4px;bottom:4px;left:0;width:calc(var(--d) - 2px);background:repeating-linear-gradient(90deg,#F4EFE6 0 1px,#D9D3C7 1px 2px);transform:translateX(calc(var(--w) - var(--d) / 2 - 3px)) rotateY(90deg) translateX(calc(var(--d) / 2))}
.buch__vorn{display:flex;flex-direction:column;overflow:hidden;padding:clamp(18px,2vw,28px);color:#F4EFE6;background:radial-gradient(120% 70% at 100% 0,rgba(201,230,224,.16),transparent 60%),linear-gradient(165deg,#105A51,#0B3F39 55%,#082F2B);box-shadow:inset 4px 0 6px rgba(0,0,0,.28),0 34px 60px -24px rgba(27,36,48,.55)}
.buch__vorn::before{content:"";position:absolute;inset:0 auto 0 0;width:8%;z-index:2;mix-blend-mode:overlay;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25) 30%,transparent 50%,rgba(0,0,0,.5) 75%,rgba(0,0,0,.15) 85%,transparent)}
.buch__vorn::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(60% 50% at var(--gx,30%) var(--gy,20%),rgba(255,255,255,.12),transparent 70%)}
.buch__vorn>span{position:relative;z-index:1}
.buch__reihe{font:600 10px var(--e-sans);letter-spacing:.3em;text-transform:uppercase;color:#9FCBC3}
.buch__titel{margin-top:clamp(20px,3vw,40px);font:600 clamp(30px,3.1vw,44px)/1.1 var(--e-serif);color:#F4EFE6;text-wrap:balance}
.buch__titel i{font-style:italic;font-weight:400;color:#C9E6E0}
.buch__unter{margin-top:12px;max-width:22ch;font:400 13px/1.45 var(--e-sans);color:#D5E6E2}
.buch__fuss{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:10px;padding-top:12px;border-top:1px solid rgba(244,239,230,.25)}
.buch__autor{font:400 14px var(--e-serif);color:#F4EFE6}
.buch__pille{padding:4px 9px;border:1px solid rgba(201,230,224,.45);border-radius:999px;font:500 10px var(--e-sans);letter-spacing:.04em;color:#C9E6E0;white-space:nowrap}

.ebook__text{display:grid;gap:clamp(18px,2.2vw,28px)}
.ebook__titel{font:600 clamp(38px,4.6vw,68px)/1.08 var(--e-serif);letter-spacing:-.015em;color:var(--e-tinte);text-wrap:balance}
.ebook__titel em{font-style:italic;font-weight:400;color:var(--e-gruen)}
.ebook__lead{max-width:52ch;font:400 clamp(18px,1.4vw,21px)/1.6 var(--e-serif);color:#3A434F;text-wrap:pretty}
/* Der Merksatz trägt wie im Heft das Ereignis: einzige dunkle Fläche auf der Seite */
.merke{max-width:46ch;padding:clamp(18px,2vw,24px) clamp(20px,2.4vw,28px);border-radius:2px;background:var(--e-gruen-dunkel);color:var(--e-auf-dunkel)}
.merke__titel{margin-bottom:6px;font:600 11px var(--e-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--e-auf-dunkel-leise)}
.merke__satz{font:400 clamp(20px,1.8vw,25px)/1.4 var(--e-serif);color:#fff;text-wrap:balance}

/* Lernpfad in vier Stufen; Stufenkopf wie die Kapitelköpfe im Heft (Nummer über dem Titel, dunkle Linie) */
.stufen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
.stufe__name{padding-top:12px;border-top:2.5px solid var(--e-gruen-dunkel);font:600 clamp(21px,1.7vw,24px)/1.2 var(--e-serif);color:var(--e-tinte)}
.stufe__nr{display:block;margin-bottom:6px;font:600 11px var(--e-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--e-petrol)}
.kapitel{margin-top:14px}
.kapitel li{display:grid;grid-template-columns:2.4ch minmax(0,1fr) auto;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--e-linie)}
.kapitel__nr{font:600 13px var(--e-sans);color:var(--e-grau);font-variant-numeric:tabular-nums}
.kapitel__titel{font:400 17px/1.35 var(--e-serif);color:var(--e-tinte);hyphens:auto}
.chip{padding:5px 11px;border:0;border-radius:999px;background:var(--e-hell);color:var(--e-tinte);font:500 13px/1.3 var(--e-sans);white-space:nowrap;font-variant-numeric:tabular-nums}
.chip--gratis{background:var(--e-gruen-hell);color:var(--e-gruen-dunkel)}
.chip--kauf{transition:background .25s,color .25s}
.chip--kauf:hover{background:var(--e-gruen);color:#fff}

.kauf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:16px}
.kauf__paket{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:24px;padding:clamp(22px,2.4vw,30px);border-radius:3px;background:var(--e-gruen-dunkel);color:#F4EFE6}
.kauf__paket small{display:block;font:600 11px var(--e-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--e-auf-dunkel-leise)}
.kauf__paket strong{display:block;margin-top:6px;font:600 clamp(44px,4.4vw,60px)/1 var(--e-serif);letter-spacing:-.01em;color:#fff}
.kauf__info{margin-top:12px;max-width:34ch;font-size:15px;line-height:1.5;color:#D5E6E2}
.kauf__paket :focus-visible{outline-color:#C9E6E0}
.kauf__gratis{display:flex;flex-direction:column;gap:12px;padding:clamp(22px,2.4vw,30px);border-radius:3px;background:var(--sand);border:1px solid var(--e-linie)}
.ebook__stand{max-width:70ch}
.btn--papier{background:#FBF8F2;color:#0B3F39}
.btn--papier::before{background:#C9E6E0}
.btn--gruen{background:#0B3F39;color:#F4EFE6}
.btn--gruen::before{background:#0F6E63}
.seite .lbl{font:600 12px var(--e-sans);letter-spacing:.08em;color:var(--e-grau)}
.seite .input{border-color:#B3AC9F;background:#fff;color:var(--e-tinte);font-family:var(--e-sans)}
.seite .input::placeholder{color:#6E7681}
.seite .input:focus{border-color:var(--e-gruen);box-shadow:0 0 0 3px rgba(15,110,99,.18)}
.seite .hinweis{font-size:14px;color:var(--e-grau)}
.seite .status{color:var(--e-gruen)}
.seite .fehler{color:#9A4321}
.seite .input[aria-invalid="true"]{border-color:#9A4321}
@media (max-width:1100px){.stufen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1000px){.ebook__raster{grid-template-columns:1fr}.merke{max-width:none}}
@media (max-width:760px){.kauf{grid-template-columns:1fr}}
@media (max-width:560px){.stufen{grid-template-columns:1fr}}

/* Preis „Limitiert“: Rot und Gold nur an dieser Stelle */
.preis__karte{display:grid}
.limit{display:inline-flex;align-items:center;gap:8px;margin-bottom:8px;padding:7px 12px 7px 10px;border:1px solid #E9B949;border-radius:999px;background:linear-gradient(100deg,#7F1D1D,#9A2A12);color:#F7CF6A;font:600 13px/1 var(--sans);letter-spacing:.02em;box-shadow:0 8px 20px -10px rgba(127,29,29,.9);transition:filter .2s}
.limit:hover{filter:brightness(1.15)}
.limit i{flex:none;width:7px;height:7px;border-radius:50%;background:#F7CF6A}
.bewegung .limit i{animation:limitPuls 1.6s ease-out 3}   /* dreimal, unter 5 s (WCAG 2.2.2) */
@keyframes limitPuls{0%{box-shadow:0 0 0 0 rgba(247,207,106,.65)}100%{box-shadow:0 0 0 8px rgba(247,207,106,0)}}
.limit::after{content:"";width:6px;height:6px;margin-left:2px;border-right:1.5px solid;border-bottom:1.5px solid;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--kino)}
.limit[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)}
.limit-info{margin-top:18px;padding:clamp(20px,2.4vw,28px);border-radius:20px;background:linear-gradient(160deg,rgba(127,29,29,.32),rgba(10,15,21,.92) 62%);border:1px solid rgba(233,185,73,.45)}
.limit-info[hidden]{display:none}
.limit-info__titel{margin-bottom:8px;font-weight:600;font-size:clamp(18px,1.6vw,21px);letter-spacing:-.01em;color:#F7CF6A}
.limit-info p{font-size:15.5px;line-height:1.55;color:var(--stahl)}
.limit-info__plaetze{display:grid;grid-template-columns:repeat(25,minmax(0,1fr));gap:clamp(3px,.5vw,6px);margin:18px 0 12px}
.limit-info__plaetze i{aspect-ratio:1;border-radius:50%;border:1.5px solid #E9B949;background:rgba(233,185,73,.14)}
.limit-info__plaetze i.weg{border-color:#B4401A;background:#B4401A}
.limit-info .limit-info__stand strong{color:var(--tinte);font-weight:600}

/* Empfehlen */
.empf__raster{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.riesig{position:relative;margin:clamp(12px,2vw,24px) 0 clamp(8px,1vw,16px);font:400 clamp(140px,22vw,360px)/.8 var(--serif);letter-spacing:-.045em;white-space:nowrap}
.riesig__umriss{display:block;color:transparent;-webkit-text-stroke:1.5px rgba(91,157,255,.6)}
.riesig__fuellung{position:absolute;inset:0;background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent}
.empf__titel{font-weight:600;font-size:clamp(28px,2.8vw,42px);line-height:1.08;letter-spacing:-.03em;max-width:18ch}
.empf__rechts{display:grid;gap:18px;justify-items:end}
.nubro--springen{width:min(100%,300px);margin-bottom:-14px}
.schritte{display:grid;gap:12px;width:100%}
.schritte li{display:flex;align-items:center;gap:18px;padding:20px 22px;border-radius:18px;background:var(--glas);border:1px solid var(--linie);font-size:17px;line-height:1.45}
.schritte b{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid;font:500 14px var(--mono)}
.schritte li:nth-child(1) b{color:var(--blau);border-color:var(--blau);background:rgba(91,157,255,.14)}
.schritte li:nth-child(2) b{color:var(--gruen);border-color:var(--gruen);background:rgba(56,217,160,.14)}
.schritte li:nth-child(3){background:var(--weiss);color:var(--dunkel);font-weight:500;border-color:transparent}
.schritte li:nth-child(3) b{background:var(--dunkel);color:var(--weiss);border-color:var(--dunkel)}
@media (max-width:900px){.empf__raster{grid-template-columns:1fr}.empf__rechts{justify-items:stretch}.nubro--springen{justify-self:center}}

/* Fußbereich */
.abspann{position:relative;margin-top:clamp(40px,5vw,80px);padding:clamp(24px,3vw,40px) 0 36px;overflow:hidden}
.abspann__oben{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:32px}
.abspann__text{display:grid;gap:24px}
.abspann__titel{font-weight:600;font-size:clamp(56px,10.4vw,178px);line-height:.88;letter-spacing:-.055em}
.abspann__cta{display:flex;flex-wrap:wrap;gap:12px}
.nubro--abspann{width:clamp(170px,19vw,280px)}
/* Newsletter als Glaskarte über dem Sternenhimmel (11.10.2026): links Text, rechts Formular */
.abspann__news{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:22px 56px;margin:0 0 clamp(36px,4.5vw,60px);padding:clamp(28px,3.4vw,48px);border:1px solid rgba(232,237,242,.12);border-radius:28px;background:radial-gradient(120% 150% at 0 0,rgba(91,157,255,.14),transparent 55%),radial-gradient(90% 130% at 100% 100%,rgba(56,217,160,.11),transparent 60%),rgba(9,13,21,.74);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 50px 90px -60px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05)}
.abspann__news-text{display:grid;gap:12px}
.abspann__vorzeile{display:inline-flex;align-items:center;gap:10px;font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gruen)}
.abspann__vorzeile::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gruen);box-shadow:0 0 12px var(--gruen)}
.abspann__news h3{max-width:24ch;font-weight:600;font-size:clamp(22px,2.2vw,32px);line-height:1.15;letter-spacing:-.025em;text-wrap:balance}
.abspann__news .hinweis{max-width:52ch;font-size:13px;color:var(--stahl-2)}
.abspann__news-form{display:grid;gap:10px}
.abspann__news form{display:flex;flex-wrap:wrap;gap:10px;width:100%}
.abspann__news .input{flex:1;min-width:0;border-radius:999px;padding:16px 22px;background:rgba(255,255,255,.04)}
@media (max-width:760px){.abspann__news{grid-template-columns:1fr}}
.fuss{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px 40px;padding:28px 0;border-top:1px solid var(--linie);font-size:15px;color:var(--stahl)}
.fuss__wer strong{margin-right:10px;font-weight:600;color:var(--tinte)}
.fuss__links{display:flex;flex-wrap:wrap;gap:6px 22px}
.fuss__links a{text-decoration:underline;text-decoration-color:rgba(232,237,242,.3);text-underline-offset:4px;transition:text-decoration-color .2s,color .2s}
.fuss__links a:hover{color:var(--tinte);text-decoration-color:var(--gruen)}
.abspann__ki{font-size:13px;color:var(--stahl-2);text-wrap:pretty}
.abspann__marke{margin-top:clamp(40px,6vw,80px);font-weight:600;font-size:clamp(64px,22vw,360px);line-height:.78;letter-spacing:-.07em;text-align:center;white-space:nowrap;background:linear-gradient(180deg,rgba(232,237,242,.18),rgba(232,237,242,.02));-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none}
.abspann__copy{margin-top:20px;text-align:center;font:500 12px var(--mono);color:var(--stahl-2)}
@media (max-width:760px){.abspann__oben{grid-template-columns:1fr}.nubro--abspann{justify-self:center}}

/* Formulare */
.lbl{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--stahl)}
.input{width:100%;padding:15px 16px;border-radius:12px;border:1px solid rgba(232,237,242,.4);background:rgba(232,237,242,.05);font:400 15px var(--sans);color:var(--tinte)}
.input::placeholder{color:var(--stahl-2)}
.input:focus{outline:none;border-color:var(--gruen);box-shadow:0 0 0 3px rgba(56,217,160,.2)}
.status{min-height:1.5em;font-size:14px;color:var(--gruen)}
.status:empty{min-height:0}

/* Fragen-Chat */
.launcher{position:fixed;right:24px;bottom:24px;z-index:70;display:flex;align-items:center;gap:10px;padding:8px 22px 8px 8px;border:0;border-radius:999px;background:var(--verlauf);color:var(--dunkel);font-weight:600;font-size:16px;box-shadow:0 16px 40px -10px rgba(56,217,160,.5)}
.launcher:hover{filter:brightness(1.06)}
.launcher img{width:36px;height:36px;border-radius:50%;object-fit:cover;background:#F3EAD7}
.chat{position:fixed;right:24px;bottom:100px;z-index:70;display:flex;flex-direction:column;width:min(400px,calc(100vw - 32px));max-height:min(620px,calc(100dvh - 116px));border-radius:24px;overflow-y:auto;background:rgba(10,15,21,.95);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(232,237,242,.12);box-shadow:0 30px 90px -20px rgba(0,0,0,.7),0 0 0 1px rgba(91,157,255,.15);transform-origin:bottom right;animation:auf .22s var(--auftritt) both}
.chat[hidden]{display:none}
@keyframes auf{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.chat__head{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--linie)}
.chat__av{flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover;background:#F3EAD7}
.chat__head strong{display:block;font-weight:600;font-size:18px;letter-spacing:-.01em}
.chat__head small{font-size:13px;color:var(--stahl)}
.chat__x{flex:none;margin-left:auto;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--linie);background:transparent;color:var(--tinte);font-size:20px;line-height:1}
.chat__x:hover{background:rgba(232,237,242,.08)}
.chat__log{flex:1;min-height:min(180px,22dvh);overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:20px}
.msg{max-width:82%;padding:13px 17px;font-size:15px;line-height:1.55;animation:pop .25s ease both}
.msg--bot{align-self:flex-start;background:rgba(232,237,242,.06);border:1px solid var(--linie);border-radius:18px 18px 18px 6px}
.msg--me{align-self:flex-end;background:var(--verlauf);color:var(--dunkel);font-weight:500;border-radius:18px 18px 6px 18px}
.msg a{text-decoration:underline}
.typing{display:flex;gap:5px;align-items:center}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--stahl);animation:blink 1s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.chat__qs{display:flex;flex-wrap:wrap;gap:8px;max-height:44%;overflow-y:auto;padding:16px 20px 20px;border-top:1px solid var(--linie)}
.chat__qs p{width:100%;margin-bottom:4px;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--stahl-2)}
.q{padding:10px 15px;border-radius:999px;background:rgba(91,157,255,.1);border:1px solid rgba(91,157,255,.35);font-size:14px;line-height:1.3;text-align:left}
.q:hover{background:rgba(91,157,255,.2)}
.q[aria-disabled="true"]{opacity:.45;cursor:default}
.q--alt{background:rgba(56,217,160,.1);border-color:rgba(56,217,160,.35)}
@media (max-width:560px){.chat{right:16px;bottom:88px}.launcher{right:16px;bottom:16px}}

/* Kontaktfenster */
.modal{width:min(720px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;border:1px solid rgba(232,237,242,.12);border-radius:28px;color:var(--tinte);background:radial-gradient(520px 300px at 100% 0,rgba(91,157,255,.18),transparent 70%),radial-gradient(420px 260px at 0 100%,rgba(56,217,160,.12),transparent 70%),#0A0F15;box-shadow:0 40px 120px -20px rgba(0,0,0,.8)}
.modal::backdrop{background:rgba(4,7,10,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal[open]{animation:auf .25s var(--auftritt) both}
.form{display:flex;flex-direction:column;gap:16px;padding:clamp(24px,4vw,40px)}
.modal__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:8px}
.modal__head h2{font-weight:600;font-size:clamp(28px,3vw,38px);line-height:1.05;letter-spacing:-.03em}
.modal__head .sub{margin-top:8px;font-size:15px;color:var(--stahl)}
.seg{display:flex;gap:4px;width:max-content;max-width:100%;margin:0;padding:4px;border:0;border-radius:999px;background:rgba(232,237,242,.06);min-inline-size:0}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{padding:11px 20px;border-radius:999px;font-weight:600;font-size:14px;color:var(--stahl);cursor:pointer}
.seg input:checked+label{background:var(--verlauf);color:var(--dunkel)}
.seg input:focus-visible+label{outline:2px solid var(--gruen);outline-offset:2px}
.seg--sm label{padding:9px 16px;font-size:13px}
.fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.fields label{display:flex;flex-direction:column;gap:6px}
.fields .full{grid-column:1/-1}
.fields [hidden]{display:none!important}
.fields fieldset{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;border:0;min-inline-size:0}
select.input{appearance:none;-webkit-appearance:none;padding-right:44px;background-image:linear-gradient(45deg,transparent 50%,var(--stahl) 50%),linear-gradient(135deg,var(--stahl) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat}
select.input option{background:#0A0F15;color:var(--tinte)}
.check{display:flex;gap:12px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--stahl)}
.check input{margin-top:3px;accent-color:var(--gruen)}
.check a{text-decoration:underline}
.form .btn{padding:18px;font-size:16px}
.fehler{font:500 13px/1.4 var(--sans);color:#FF9A8A;text-transform:none;letter-spacing:0}
.input[aria-invalid="true"]{border-color:#FF9A8A}
@media (max-width:560px){.fields{grid-template-columns:1fr}.seg{flex-direction:column;width:100%;border-radius:20px}.seg label{text-align:center}}

/* Newsletter-Hinweis */
.promo{position:fixed;left:24px;bottom:24px;z-index:69;max-height:calc(100dvh - 104px);overflow-y:auto;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 16px;width:min(400px,calc(100vw - 32px));padding:22px;border-radius:24px;background:rgba(10,15,21,.95);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(232,237,242,.12);box-shadow:0 30px 90px -20px rgba(0,0,0,.7),0 0 0 1px rgba(56,217,160,.18);animation:auf .3s var(--auftritt) both}
.promo[hidden]{display:none}
@media (min-width:1100px){.bewegung .promo{bottom:64px}}
.promo__bang{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--verlauf);color:var(--dunkel);font-weight:700;font-size:24px}
.bewegung .promo__bang{animation:ping 2s ease-out 2}   /* zweimal, unter 5 s (WCAG 2.2.2) */
@media (max-height:480px){.promo{grid-template-columns:1fr}.promo__bang{display:none}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(56,217,160,.45)}70%{box-shadow:0 0 0 14px rgba(56,217,160,0)}100%{box-shadow:0 0 0 0 rgba(56,217,160,0)}}
.promo h2{padding-right:36px;font-weight:600;font-size:18px;letter-spacing:-.01em}
.promo p{margin-top:6px;font-size:14px;line-height:1.5;color:var(--stahl)}
.promo form{grid-column:1/-1;display:flex;gap:8px}
.promo .input{flex:1;min-width:0;border-radius:999px;padding:12px 16px}
.promo .hinweis,.promo .status,.promo .fehler{grid-column:1/-1;margin:0;font-size:12.5px}
.abspann__news .fehler{flex-basis:100%}
.promo .chat__x{position:absolute;top:14px;right:14px;width:32px;height:32px;font-size:18px}
@media (max-width:560px){.promo{left:16px;bottom:88px}}

@media (prefers-reduced-motion:reduce){
  .korn,.tippt,.msg,.typing i,.chat,.promo,.promo__bang,.modal[open]{animation:none!important}
}
main{padding-bottom:0}

/* Barrierefreiheit: Fokus auf hellen Flächen dunkel, Sprungziele ohne Rahmen um ganze Abschnitte */
.ticket :focus-visible,.schritte li:nth-child(3) :focus-visible{outline-color:var(--dunkel)}
[tabindex="-1"]:focus{outline:none}
@media (max-width:560px){.btn{white-space:normal}}
/* Schalter „Animationen“ aus: auch Übergänge und Einblendungen der Bedienelemente ruhig stellen */
.bewegung-aus *,.bewegung-aus *::before,.bewegung-aus *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}

/* Menü für schmale Fenster (ersetzt die ausgeblendeten Sprungmarken) */
.nav__menue{display:none;padding:9px 12px;border:1px solid rgba(232,237,242,.2);border-radius:999px;background:none;color:var(--tinte);font:500 13px var(--sans)}
@media (max-width:1080px){
  .nav__menue{display:inline-flex}
  .nav__links.offen{display:flex;flex-direction:column;gap:4px;position:absolute;top:calc(100% + 8px);left:0;right:0;padding:10px;border-radius:20px;background:rgba(9,14,20,.96);border:1px solid rgba(232,237,242,.12);font-size:16px}
  .nav__links.offen a{padding:10px 14px;border-radius:12px;color:var(--tinte)}
  .nav__links.offen a:hover{background:rgba(232,237,242,.06)}
}

/* Film-Kacheln, die zu einem großen Fenster aufgehen (nach „Morphing Dialog“, Motion Primitives) */
.kachel{display:flex;flex-direction:column;width:100%;padding:0;overflow:hidden;border:1px solid rgba(232,237,242,.1);border-radius:12px;background:#0E1621;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .25s}
.kachel:hover{border-color:rgba(232,237,242,.22)}
.kachel:focus-visible{outline:2px solid var(--gruen);outline-offset:3px}
.kachel__bild{display:block;aspect-ratio:16/9;background:#0A0F16}
.kachel__video{display:block;width:100%;height:100%;object-fit:cover}
.kachel__fuss{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:12px 14px 14px}
.kachel__titel{display:block;font-weight:600;font-size:17px;line-height:1.3;color:var(--tinte)}
.kachel__unter{display:block;font-size:14px;line-height:1.4;color:var(--stahl)}
.kachel__plus{flex:none;display:grid;place-items:center;width:26px;height:26px;border:1px solid rgba(232,237,242,.16);border-radius:8px;color:var(--stahl);transition:color .2s,border-color .2s,background .2s}
.kachel:hover .kachel__plus,.kachel:focus-visible .kachel__plus{color:var(--dunkel);background:var(--weiss);border-color:var(--weiss)}
.kachel-dialog{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;padding:clamp(12px,4vw,48px)}
.kachel-dialog[hidden]{display:none}
.kachel-dialog__schleier{position:absolute;inset:0;background:rgba(4,7,12,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.kachel-dialog__box{position:relative;display:flex;flex-direction:column;width:min(960px,100%,max(520px,calc((100vh - 470px) * 1.7778)));max-height:100%;overflow:hidden;border:1px solid rgba(232,237,242,.12);border-radius:24px;background:#0E1621;box-shadow:0 40px 120px -20px rgba(0,0,0,.7)}
.kachel-dialog__bild{flex:none;aspect-ratio:16/9;background:#0A0F16}
.kachel-dialog__bild video{display:block;width:100%;height:100%;object-fit:cover}
.kachel-dialog__text{padding:clamp(18px,2.4vw,28px);overflow:auto}
.kachel-dialog__titel{margin:0;font-weight:600;font-size:clamp(22px,2.2vw,30px);line-height:1.2;letter-spacing:-.02em}
.kachel-dialog__unter{margin:4px 0 0;color:var(--stahl);font-size:16px}
.kachel-dialog__beschreibung{margin:16px 0 20px;max-width:60ch;color:var(--stahl)}
.kachel-dialog__knoepfe{display:flex;flex-wrap:wrap;gap:10px}
.kachel-dialog__zu{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:rgba(4,7,12,.62);color:#F3F5F7;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.kachel-dialog__zu:hover{background:rgba(4,7,12,.86)}
.kachel-dialog__zu:focus-visible{outline:2px solid var(--gruen);outline-offset:2px}
/* Pfeil-Link (E-Book-Seite) */
.pfeil-link{display:inline-flex;align-items:center;gap:8px;color:var(--tinte);text-decoration:underline;text-decoration-color:rgba(232,237,242,.3);text-underline-offset:4px}
.pfeil-link::after{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .25s}
.pfeil-link:hover{text-decoration-color:var(--gruen)}
.pfeil-link:hover::after{transform:translateX(4px)}

/* Formular „Kapitel 1 gratis“ im Fenster der E-Book-Kachel */
.kachel-dialog__extra{display:grid;gap:14px;margin:0 0 20px}
.kachel-dialog__extra[hidden]{display:none}
.gratis{display:grid;gap:8px}
.gratis__zeile{display:flex;flex-wrap:wrap;gap:10px}
.gratis__zeile .input{flex:1 1 240px;min-width:0;border-radius:999px;padding:12px 18px}
.kachel-dialog .hinweis{margin:0;font-size:13px;line-height:1.5;color:var(--stahl-2)}
.kachel-dialog .status:empty{display:none}
.kachel-dialog__extra--nach{margin:16px 0 0}

/* ═══════════ Planeten (seit 11.10.2026) ═══════════
   Jede Dienstleistung ist ein Planet mit eigenen Farben aus ihrem Film. Die Seiten setzen <body data-planet="…">,
   die Startseite setzt das Merkmal an jeden Planeten-Halt. Eigene Schrift und eigenes Layout je Planet stehen in
   assets/planet-<name>.css. */
:root{--p1:var(--blau);--p2:var(--gruen);--p-grund:var(--nacht);--p-flaeche:var(--nacht-2);--p-linie:var(--linie);--p-tinte:var(--tinte);--p-leise:var(--stahl);--p-verlauf:var(--verlauf);--p-auf:var(--dunkel)}
/* Landingpage: Website-Film (Blau und Mint auf Nacht) */
[data-planet="website"]{--p1:#5B9CFF;--p2:#34D399;--p-grund:#0A0D10;--p-flaeche:#10161C;--p-linie:#26313A;--p-tinte:#F2EFE9;--p-leise:#9AA3AB;--p-verlauf:linear-gradient(100deg,#5B9CFF,#34D399);--p-auf:#04130D}
/* Werbevideo: Werbevideo-Film (Orange auf Graphit) */
[data-planet="video"]{--p1:#FF6B1A;--p2:#D9D9DB;--p-grund:#1C1D1F;--p-flaeche:#26282B;--p-linie:#3A3C40;--p-tinte:#FFFFFF;--p-leise:#A3A5A8;--p-verlauf:linear-gradient(100deg,#FF6B1A,#FF9A5C);--p-auf:#1C1D1F}
/* Designs: warme Töne aus dem Design-Film (Pfirsich, Taupe, ein wenig Waldgrün) auf warmem Anthrazit */
[data-planet="design"]{--p1:#ECD9CB;--p2:#2F8A58;--p-grund:#16181B;--p-flaeche:#1E2125;--p-linie:#33373C;--p-tinte:#F2EFE9;--p-leise:#B9AEA2;--p-verlauf:linear-gradient(100deg,#ECD9CB,#A99E92);--p-auf:#16181B}
/* E-Book: E-Book-Film (Papier und Tannengrün), helle Seite */
[data-planet="ebook"]{--p1:#0F4A40;--p2:#1F7A64;--p-grund:#F3EFE6;--p-flaeche:#F6F2E9;--p-linie:#DDD6C6;--p-tinte:#1B2430;--p-leise:#5B6470;--p-verlauf:linear-gradient(100deg,#0F4A40,#1F7A64);--p-auf:#F3EFE6}

/* Kopfleiste: Planeten-Links färben sich beim Zeigen in ihrer Farbe, die aktuelle Seite trägt einen Punkt */
.nav__links a[data-ziel="website"]{--nav-farbe:#7FB2FF}
.nav__links a[data-ziel="video"]{--nav-farbe:#FF8A47}
.nav__links a[data-ziel="design"]{--nav-farbe:#ECD9CB}
.nav__links a[data-ziel="ebook"]{--nav-farbe:#7CCBB2}
.nav__links a[data-ziel="nubro"]{--nav-farbe:#7ED957}
.nav__links:not(.offen) a[data-ziel]:hover{color:var(--nav-farbe)}
.nav__links a[aria-current="page"]{position:relative;color:var(--tinte)}
.nav__links a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:-9px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--nav-farbe,var(--p1))}
.nav--hell .nav__links a[aria-current="page"]{color:#0B3F39}
.nav--hell .nav__links a[data-ziel="ebook"]{--nav-farbe:#0F4A40}
body[data-nav-hell="immer"] .nav--hell::before{width:100vw}
/* Im offenen Menü (schmale Fenster) steht der Punkt rechts in der Zeile statt mitten unter dem Link */
.nav__links.offen a[aria-current="page"]::after{left:auto;right:14px;top:50%;bottom:auto;margin:-2.5px 0 0}
/* Auf heller Kopfleiste kräftigere Farben beim Zeigen, sonst verschwinden Hellblau, Orange und Pfirsich auf Papier */
.nav--hell .nav__links a[data-ziel="website"]{--nav-farbe:#2F6FD6}
.nav--hell .nav__links a[data-ziel="video"]{--nav-farbe:#C9500F}
.nav--hell .nav__links a[data-ziel="design"]{--nav-farbe:#8A6E5C}

/* ── Glanzknopf: nach „Shiny Borders Button“ (21st.dev), ohne React und Tailwind nachgebaut.
   Heller Lichtrand oben rechts, farbiger Schein unten links in der Farbe des Planeten (--g-farbe). */
.glanzknopf{--g-farbe:var(--p1);position:relative;isolation:isolate;display:inline-flex;padding:2px;border:0;border-radius:16px;background:radial-gradient(circle 80px at 80% -10%,#fff,#181b1b);color:#fff;font:600 15px/1.2 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer}
.glanzknopf::before{content:"";position:absolute;z-index:-1;top:0;right:0;width:65%;height:60%;border-radius:120px;box-shadow:0 0 20px rgba(255,255,255,.22);transition:box-shadow .3s var(--auftritt)}
.glanzknopf::after{content:"";position:absolute;z-index:1;left:0;bottom:0;width:50px;height:50%;border-radius:17px;background:radial-gradient(circle 60px at 0% 100%,var(--g-farbe),color-mix(in srgb,var(--g-farbe) 32%,transparent),transparent);box-shadow:-2px 9px 40px color-mix(in srgb,var(--g-farbe) 25%,transparent);pointer-events:none;transition:width .3s var(--auftritt),box-shadow .3s var(--auftritt)}
.glanzknopf__innen{position:relative;z-index:2;display:inline-flex;align-items:center;gap:.55em;padding:14px 24px;border-radius:14px;background:radial-gradient(circle 80px at 80% -50%,#777,#0f1111);transition:transform .3s var(--auftritt)}
.glanzknopf__innen::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(circle 60px at 0% 100%,color-mix(in srgb,var(--g-farbe) 14%,transparent),transparent)}
.glanzknopf:hover::before,.glanzknopf:focus-visible::before{box-shadow:0 0 40px rgba(255,255,255,.38)}
.glanzknopf:hover::after,.glanzknopf:focus-visible::after{width:90px;box-shadow:-4px 1px 45px color-mix(in srgb,var(--g-farbe) 40%,transparent)}
.glanzknopf:hover .glanzknopf__innen,.glanzknopf:focus-visible .glanzknopf__innen{transform:scale(1.04)}
.glanzknopf:focus-visible{outline:2px solid var(--g-farbe);outline-offset:4px}
.glanzknopf--klein .glanzknopf__innen{padding:11px 18px;font-size:14px}

/* ── Leuchtrand-Karte: nach „Glow Card Grid“ (21st.dev), ohne React nachgebaut. Ein unscharfes Licht (.glutkarte__licht,
   z. B. das Planetenbild) liegt hinter dem Inhalt und folgt dem Mauszeiger (assets/gemeinsam.js setzt --px und --py);
   der Rand (.glutkarte__rand) zeigt es verstärkt. Ohne Maus steht das Licht oben in der Mitte. */
.glutkarte{--glut-r:20px;position:relative;isolation:isolate;overflow:hidden;border-radius:var(--glut-r);background:var(--p-flaeche);box-shadow:inset 0 0 0 1px var(--p-linie)}
.glutkarte__licht{position:absolute;inset:0;z-index:0;display:grid;place-items:center;pointer-events:none;transform:translate3d(calc(var(--px,0) * 50%),calc(var(--py,-.55) * 50%),0) scale(4);filter:blur(26px) saturate(4) brightness(1.25);opacity:.32;transition:transform .5s var(--auftritt)}
.glutkarte__licht > *{width:84px;height:84px;border-radius:50%;object-fit:cover}
.glutkarte__licht--farbe > *{background:radial-gradient(circle,var(--p1),var(--p2) 70%)}
.glutkarte__inhalt{position:relative;z-index:1}
.glutkarte__rand{position:absolute;inset:0;z-index:2;border:3px solid transparent;border-radius:inherit;pointer-events:none;-webkit-backdrop-filter:blur(10px) brightness(2.5) contrast(2.5) saturate(4.2);backdrop-filter:blur(10px) brightness(2.5) contrast(2.5) saturate(4.2);-webkit-mask:linear-gradient(#fff 0 0) border-box,linear-gradient(#fff 0 0) padding-box;-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) border-box exclude,linear-gradient(#fff 0 0) padding-box}
@media (prefers-reduced-motion:reduce){.glutkarte__licht{transition:none}}

/* ═══════════ Startseite im Weltraum (11.10.2026) ═══════════
   Nach der Erde fliegt Nubro mit seinem Schiff zu den vier Planeten (Reise), ganz unten sitzt Dominik mit Nubro auf
   der Brücke. Bewegung in site.js „Reise“ und „Brücke“. */
@property --reise-farbe{syntax:'<color>';inherits:true;initial-value:#7FB2FF}

/* Reise: der Abschnitt legt sich über die untere Kante der Erde. Sein Sternenhimmel blendet von oben ein, so versinkt
   die Erde im Dunkel, statt an einer Kante abgeschnitten zu werden. */
.reise{position:relative;z-index:2;isolation:isolate;padding:clamp(96px,12vw,180px) 0 clamp(48px,6vw,96px)}
.reise::before{content:"";position:absolute;inset:0;z-index:-1;background:url("erde/sterne.svg") var(--abflug-x,0px) 0/320px 320px,#06090F;-webkit-mask:linear-gradient(to bottom,transparent,#000 var(--reise-ueber,0px));mask:linear-gradient(to bottom,transparent,#000 var(--reise-ueber,0px));pointer-events:none}
.weltall + .reise{--reise-ueber:clamp(120px,18vh,220px);margin-top:calc(-1 * var(--reise-ueber));padding-top:calc(var(--reise-ueber) + clamp(48px,7vw,110px))}
.reise__kopf{display:grid;justify-items:start;gap:clamp(16px,1.6vw,22px)}
.reise__titel{max-width:12ch;font-weight:600;font-size:clamp(40px,6.2vw,100px);line-height:.95;letter-spacing:-.048em;text-wrap:balance}
.reise__lead{max-width:44ch;font-size:clamp(17px,1.3vw,20px);line-height:1.6;color:var(--stahl);text-wrap:pretty}
.reise__ust{margin-top:clamp(28px,4vw,48px)}

/* Schmal oder ohne Bewegung: das Schiff vorweg, darunter die Planeten, ab 700 px Planet und Karte im Wechsel nebeneinander */
.reise__buehne{--reise-farbe:#7FB2FF;position:relative;isolation:isolate;margin-top:clamp(40px,6vw,80px)}
.reise__schiff{position:relative;z-index:3;width:min(46vw,280px);margin:0 0 clamp(28px,5vw,56px) var(--rand);pointer-events:none}
.reise__schiff img{width:100%;height:auto;transform-origin:58% 56%;filter:drop-shadow(0 26px 36px rgba(0,0,0,.55))}
@media (prefers-reduced-motion:no-preference){.bewegung .reise__schiff{animation:schiff-schweben 5.6s cubic-bezier(.45,0,.55,1) infinite}}
@keyframes schiff-schweben{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(6px,-14px,0)}}
.reise__spur{display:grid;gap:clamp(64px,10vw,128px);width:min(1360px,100% - 2*var(--rand));margin:0 auto;padding:0;list-style:none;counter-reset:halt}
.reise__halt{counter-increment:halt;display:grid;justify-items:center;gap:clamp(20px,3vw,36px)}
.reise__planet{width:min(78vw,480px);aspect-ratio:1;margin:0}
.reise__planet img{width:100%;height:100%;object-fit:contain}
.reise__karte{width:min(100%,520px)}
@media (min-width:700px){
  .reise__halt{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
  .reise__planet{width:min(100%,480px)}
  .reise__halt:nth-child(even) .reise__planet{order:2}
}

/* Karte eines Planeten: Nummer, Name in der Schrift seiner Seite, ein Satz, Preis, Landen oder Film ansehen */
.reise__karte .glutkarte__inhalt{display:grid;gap:14px;padding:clamp(24px,2.4vw,34px)}
.reise__name{color:var(--p-tinte);font-weight:700;font-size:clamp(38px,3.6vw,58px);line-height:1;letter-spacing:-.045em}
.reise__name::before{content:"Planet " counter(halt,decimal-leading-zero);display:block;margin-bottom:14px;font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--p1)}
.reise__text{max-width:38ch;font-size:16px;line-height:1.55;color:var(--p-leise);text-wrap:pretty}
.reise__preis{display:grid;gap:3px;font-size:14px;line-height:1.45;color:var(--p-leise)}
.reise__preis b{font-weight:600;font-size:clamp(28px,2.3vw,36px);line-height:1.1;letter-spacing:-.03em;color:var(--p-tinte)}
.reise__knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:8px}

/* Jeder Planet spricht in der Schrift seiner Seite; --halt-farbe färbt die Bühne (site.js), wenn er vorn steht */
.reise__halt[data-planet="website"]{--halt-farbe:#7FB2FF}
.reise__halt[data-planet="video"]{--halt-farbe:#FF7A2E}
.reise__halt[data-planet="design"]{--halt-farbe:#ECD9CB}
.reise__halt[data-planet="ebook"]{--halt-farbe:#5FBFA2}
.reise__halt[data-planet="website"] .reise__name{background:var(--p-verlauf);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.reise__halt[data-planet="video"] .reise__name{font-size:clamp(36px,3.3vw,54px);letter-spacing:-.025em;text-transform:uppercase}
.reise__halt[data-planet="video"] .reise__name em{padding-right:.05em;font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;text-transform:none;color:var(--p1)}
.reise__halt[data-planet="design"] .reise__name{font-family:'Fraunces',Georgia,'Times New Roman',serif;font-weight:300;font-size:clamp(42px,4vw,64px);letter-spacing:-.03em;color:var(--p1)}
.reise__halt[data-planet="ebook"] .reise__name{font-family:'Source Serif 4',Georgia,'Times New Roman',serif;font-weight:600;letter-spacing:-.02em}
.reise__halt[data-planet="ebook"] .reise__text{font-family:'Source Serif 4',Georgia,'Times New Roman',serif;font-size:17px}
.reise__halt[data-planet="ebook"] .reise__karte{box-shadow:inset 0 0 0 1px var(--p-linie),0 40px 80px -32px rgba(0,0,0,.65)}
.reise__halt[data-planet="ebook"] .glutkarte__licht{opacity:.2;mix-blend-mode:multiply}
.reise__halt[data-planet="ebook"] :focus-visible{outline-color:var(--p1)}

/* Kleine Film-Kachel in der Karte: Vorschaubild mit Abspielzeichen, daneben „Film ansehen“ und die Länge.
   Ein Klick öffnet wie bisher das große Fenster (site.js „Kacheln“). */
.kachel--klein{flex-direction:row;align-items:center;gap:12px;width:auto;padding:5px 14px 5px 5px;border-color:var(--p-linie);border-radius:14px;background:color-mix(in srgb,var(--p-tinte) 5%,transparent);transition:border-color .25s,background .25s}
.kachel--klein:hover{border-color:color-mix(in srgb,var(--p1) 60%,transparent);background:color-mix(in srgb,var(--p1) 10%,transparent)}
.kachel--klein:focus-visible{outline-color:var(--p1)}
.kachel--klein .kachel__bild{position:relative;flex:none;width:76px;border-radius:10px;overflow:hidden}
.kachel--klein .kachel__bild::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:rgba(6,9,15,.58) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M9 7.2l6 3.8-6 3.8z' fill='%23fff'/%3E%3C/svg%3E") center/100% no-repeat;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.kachel--klein .kachel__fuss{align-items:center;padding:0}
.kachel--klein .kachel__titel{font-size:14px;color:var(--p-tinte)}
.kachel--klein .kachel__unter{font-size:12px;color:var(--p-leise)}
.kachel--klein .kachel__plus{display:none}

/* Routenleiste: nur auf der Bühne, der Punkt des Planeten vorn leuchtet in seiner Farbe */
.reise__route{display:none}
.reise__punkt{--punkt-farbe:#7FB2FF;display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border:0;border-radius:999px;background:none;color:var(--stahl);font:500 13px/1 var(--sans);white-space:nowrap;transition:color .25s,background .25s}
.reise__punkt::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--punkt-farbe);opacity:.45;transition:opacity .25s,box-shadow .3s,transform .4s var(--auftritt)}
.reise__punkt[data-ziel="video"]{--punkt-farbe:#FF7A2E}
.reise__punkt[data-ziel="design"]{--punkt-farbe:#ECD9CB}
.reise__punkt[data-ziel="ebook"]{--punkt-farbe:#5FBFA2}
.reise__punkt:hover{color:var(--tinte)}
.reise__punkt[aria-current="true"]{background:rgba(232,237,242,.09);color:var(--tinte)}
.reise__punkt[aria-current="true"]::before{opacity:1;transform:scale(1.2);box-shadow:0 0 0 4px color-mix(in srgb,var(--punkt-farbe) 22%,transparent),0 0 14px var(--punkt-farbe)}

/* Bühne ab 900 px mit Bewegung: der Abschnitt hält an, die Planeten ziehen von rechts nach links vorbei. Das Schiff
   steht links in der Mitte und fliegt auf sie zu; Karte und Planet bilden eine Einheit, die Karte liegt vor dem Rand
   des Planeten. Die Sterne wandern langsamer mit (--sterne-x aus site.js), der Schein hinter dem Planeten nimmt seine
   Farbe an (--reise-farbe, weich überblendet). */
@media (min-width:900px){
  .bewegung .reise__buehne{height:100vh;height:100svh;margin-top:clamp(24px,4vw,56px);overflow-x:clip;overflow-y:visible;background:#06090F;transition:--reise-farbe 1s var(--auftritt)}
  .bewegung .reise__buehne::before{content:"";position:absolute;z-index:-2;inset:0 -30vw 0 0;background:url("erde/sterne.svg") 0 0/320px 320px;transform:translate3d(var(--sterne-x,0px),0,0);pointer-events:none}
  .bewegung .reise__buehne::after{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(44% 58% at 71% 50%,color-mix(in srgb,var(--reise-farbe) 17%,transparent),transparent 74%);pointer-events:none}
  .bewegung .reise__spur{display:flex;gap:0;width:max-content;height:100%;margin:0}
  /* Karte schräg links oben neben dem Planeten: Oberkante auf Höhe der Planetenoberkante, rechts
     endet sie vor der Kugel, damit der ganze Planet zu sehen ist */
  .bewegung .reise__halt{--planet-b:min(40vw,72vh);--planet-r:5vw;position:relative;display:block;flex:none;width:100vw;height:100%}
  .bewegung .reise__planet{position:absolute;top:50%;right:var(--planet-r);width:var(--planet-b);transform:translateY(-50%)}
  .bewegung .reise__karte{position:absolute;z-index:1;top:calc(50% - var(--planet-b) / 2 - 2vh);right:calc(var(--planet-r) + var(--planet-b) * .95 + 1.2vw);width:min(440px,31vw);transition:opacity .6s var(--auftritt)}
  .bewegung .reise__halt:not(.ist-da) .reise__karte{opacity:.4}
  .bewegung .reise__schiff{position:absolute;top:50%;left:var(--rand);width:min(16vw,280px);margin:-5.5vw 0 0}
  .bewegung .reise__route{position:absolute;z-index:4;left:50%;bottom:clamp(18px,3.4vh,34px);display:flex;gap:2px;padding:5px;border:1px solid var(--linie);border-radius:999px;background:rgba(6,9,15,.62);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transform:translateX(-50%)}
}
@media (min-width:900px) and (max-height:760px){
  .bewegung .reise__karte .glutkarte__inhalt{gap:10px;padding:22px 24px}
  .bewegung .reise__name{font-size:clamp(32px,3vw,44px)}
  .bewegung .reise__name::before{margin-bottom:10px}
  .bewegung .reise__text{font-size:15px}
}

/* Brücke: das Bild füllt den Abschnitt, der Text steht links vor dem dunklen Fenster. Schmal: Bild oben, Text darunter. */
.bruecke{position:relative;isolation:isolate;display:grid;align-items:center;min-height:100vh;min-height:100svh;overflow:hidden;background:#06090F}
.bruecke__bild{position:absolute;inset:0;z-index:-1;margin:0}
.bruecke__bild img{width:100%;height:100%;object-fit:cover;object-position:88% 72%}
.bruecke__bild::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(6,9,15,.9) 0,rgba(6,9,15,.62) 30%,rgba(6,9,15,0) 56%),linear-gradient(0deg,rgba(6,9,15,.75),rgba(6,9,15,0) 24%),linear-gradient(180deg,#06090F,rgba(6,9,15,0) 16%)}
.bruecke__bild figcaption{position:absolute;z-index:1;left:var(--rand);bottom:clamp(14px,2vw,24px);max-width:52ch;font:500 11px/1.5 var(--mono);letter-spacing:.04em;color:rgba(232,237,242,.66)}
.bruecke__raster{position:relative;padding:clamp(120px,16vh,180px) 0}
.bruecke__text{display:grid;gap:18px;max-width:min(520px,40vw)}
.bruecke__titel{margin-bottom:6px;font-weight:600;font-size:clamp(48px,6.4vw,104px);line-height:.92;letter-spacing:-.05em}
.bruecke__text p{max-width:44ch;font-size:clamp(16px,1.2vw,18px);line-height:1.65;color:rgba(232,237,242,.86);text-wrap:pretty}
.bruecke__knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:10px}
@media (max-width:899.98px){
  .bruecke{display:block;min-height:0}
  .bruecke__bild{position:relative;inset:auto}
  .bruecke__bild img{height:auto;aspect-ratio:4/3;object-position:100% 70%}
  .bruecke__bild::after{background:linear-gradient(0deg,#06090F,rgba(6,9,15,0) 34%),linear-gradient(180deg,#06090F,rgba(6,9,15,0) 18%)}
  .bruecke__bild figcaption{position:relative;left:auto;bottom:auto;padding:10px var(--rand) 0}
  .bruecke__raster{padding:clamp(20px,5vw,36px) 0 0}
  .bruecke__text{max-width:none}
}

/* Ein Sternenhimmel für die ganze Startseite. Er liegt fest hinter
   allem und zieht beim Scrollen langsam mit, beim Abflug und bei der Fahrt zu den Planeten auch seitlich (site.js
   „Himmel“). Die Abschnitte der Startseite haben dafür keinen eigenen Hintergrund mehr. */
/* Genau wie der Weltraum hinter der Scheibe im Intro (film__all): Grund #03060B, das Sternenmuster wächst mit dem
   Bildschirm (320 px bei 1920 x 1080, wie das Bild des Films), darüber eine zweite Lage, gedreht, kleiner, 70 % deckend */
.himmel,.himmel__zwei{display:none}
body[data-seite="start"]{background:#03060B}
html body[data-seite="start"] .himmel{--kachel:max(16.667vw,29.63vh);display:block;position:fixed;inset:calc(var(--kachel) * -1);z-index:-1;pointer-events:none;background:url("erde/sterne.svg") 0 0/var(--kachel) var(--kachel),#03060B;will-change:transform}
html body[data-seite="start"] .himmel__zwei{--kachel:calc(max(16.667vw,29.63vh) * .62);display:block;position:fixed;left:50%;top:50%;z-index:-1;width:calc(142vmax + 40vh);height:calc(142vmax + 40vh);pointer-events:none;opacity:.7;background:url("erde/sterne.svg") 0 0/var(--kachel) var(--kachel);transform:translate(-50%,-50%) rotate(63deg);will-change:transform}
html body[data-seite="start"] .weltall{background:none}
html body[data-seite="start"] .weltall::after,html body[data-seite="start"] .weltall + .reise::before,html body[data-seite="start"] .reise::before{content:none}
html body[data-seite="start"] .bruecke{background:none}
/* Das Bild der Brücke blendet oben und unten weich in den Himmel aus statt in eine dunkle Fläche */
html body[data-seite="start"] .bruecke__bild{-webkit-mask:linear-gradient(180deg,transparent,#000 14%,#000 80%,transparent);mask:linear-gradient(180deg,transparent,#000 14%,#000 80%,transparent)}
html body[data-seite="start"] .bruecke__bild::after{background:linear-gradient(90deg,rgba(3,6,11,.9) 0,rgba(3,6,11,.62) 30%,rgba(3,6,11,0) 56%)}
@media (max-width:899.98px){
  html body[data-seite="start"] .bruecke__bild::after{background:none}
  html body[data-seite="start"] .bruecke__bild{-webkit-mask:linear-gradient(180deg,transparent,#000 14%,#000 72%,transparent);mask:linear-gradient(180deg,transparent,#000 14%,#000 72%,transparent)}
}
@media (min-width:900px){
  html.bewegung body[data-seite="start"] .reise__buehne{background:none}
  html.bewegung body[data-seite="start"] .reise__buehne::before{content:none}
}
/* Schmal oder ohne Bewegung schneidet der Erde-Abschnitt die Kugel unten ab: dort weich in den Himmel ausblenden */
html body[data-seite="start"] .erde{-webkit-mask:linear-gradient(to bottom,#000 calc(100% - 36vh),transparent);mask:linear-gradient(to bottom,#000 calc(100% - 36vh),transparent)}
@media (min-width:900px){html.bewegung body[data-seite="start"] .erde{-webkit-mask:none;mask:none}}

/* ── Holzschild an der Landingpage-Karte: „50 € Cashback, wenn du 2 Kunden wirbst“,
   rechts unten an die Karte genagelt. Holz nur aus CSS: Verlauf, Maserung (SVG-Rauschen, stark gestreckt) und feine
   Fugen; Schrift wie eingebrannt. Führt zu den Bedingungen (baukasten.html#empfehlen). Halter: .reise__karte--schild. */
.reise__karte--schild{position:relative}
.reise__karte--schild > .glutkarte{height:100%}
.holzschild{--holz-hell:#D29A5E;--holz:#B07640;--holz-dunkel:#7C4A24;--brand:#3B200E;
  position:absolute;z-index:3;right:-26px;bottom:-86px;display:grid;justify-items:center;gap:1px;
  width:clamp(136px,10vw,152px);padding:15px 12px 9px;border-radius:8px;
  color:var(--brand);text-align:center;text-decoration:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='140'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008 .34' numOctaves='3' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .15 0 0 0 0 .05 1.5 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E") 0 0/240px 140px,
    repeating-linear-gradient(177deg,transparent 0 9px,rgba(92,50,20,.10) 9px 10px,transparent 10px 17px),
    radial-gradient(120% 90% at 30% 20%,rgba(255,214,160,.28),transparent 60%),
    linear-gradient(180deg,var(--holz-hell),var(--holz) 52%,var(--holz-dunkel));
  box-shadow:inset 0 1px 0 rgba(255,228,186,.6),inset 0 -2px 0 rgba(66,32,10,.45),inset 0 0 0 1px rgba(74,40,16,.6),
    0 16px 28px -12px rgba(0,0,0,.75),0 4px 8px rgba(0,0,0,.35);
  transform:rotate(-6deg);transform-origin:50% 0;transition:transform .6s var(--auftritt)}
/* Zwei Nägel oben */
.holzschild::before,.holzschild::after{content:"";position:absolute;top:7px;width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#F4EFE6,#A9A49C 42%,#57524C 72%);box-shadow:0 1px 1px rgba(40,20,6,.7),0 0 0 1px rgba(60,32,12,.35)}
.holzschild::before{left:10px}
.holzschild::after{right:10px}
.holzschild__betrag,.holzschild__wort,.holzschild__klein{text-shadow:0 1px 0 rgba(255,224,178,.45),0 -1px 0 rgba(42,20,6,.35)}
.holzschild__betrag{font:600 clamp(26px,2vw,30px)/1 'Fraunces',Georgia,serif;letter-spacing:-.02em}
.holzschild__wort{font:600 13px/1.1 'Fraunces',Georgia,serif;letter-spacing:.14em;text-transform:uppercase}
.holzschild__link{margin-top:4px;font:600 11px/1.2 var(--sans);text-decoration:underline;text-underline-offset:2px;color:#3B200E}
.holzschild__klein{margin-top:3px;padding-top:4px;border-top:1px solid rgba(66,34,12,.35);font:600 11px/1.25 var(--sans);color:#3B200E}
.holzschild:hover{transform:rotate(-2.5deg) translateY(-2px)}
.holzschild:focus-visible{outline:2px solid #FFD58A;outline-offset:4px}
.bewegung-aus .holzschild,.bewegung-aus .holzschild:hover{transition:none}
@media (prefers-reduced-motion:reduce){.holzschild{transition:none}}
/* Ohne angehaltene Reise stehen die Karten untereinander: Platz für das Schild darunter lassen */
.reise__karte--schild{margin-bottom:76px}
@media (min-width:900px){.bewegung .reise__karte--schild{margin-bottom:0}}
@media (max-width:899px){.holzschild{right:-8px;bottom:-78px}}
@media (max-width:560px){.holzschild{right:-4px}}

/* ── Dateien anhängen (seit 12.10.2026; Logik in gemeinsam.js „4 · Dateien anhängen“). Das native Dateifeld bleibt
   bedienbar (Tastatur, Ziehen und Ablegen), es bekommt nur einen gestrichelten Rahmen und einen Knopf in Seitenfarbe. */
.dateien{display:grid;gap:8px}
.dateien__input{width:100%;padding:18px 16px;border:1.5px dashed var(--p-linie,rgba(232,237,242,.28));border-radius:12px;background:color-mix(in srgb,var(--p-flaeche,#11161D) 70%,transparent);font:400 14px/1.4 var(--sans);color:var(--p-leise,#AEB8C2);cursor:pointer;transition:border-color .2s,background-color .2s}
.dateien__input:hover,.dateien__input:focus-visible{border-color:var(--p1,#7FB2FF)}
.dateien__input:focus-visible{outline:2px solid var(--p1,#7FB2FF);outline-offset:3px}
.dateien__input::file-selector-button{margin-right:14px;padding:9px 16px;border:0;border-radius:999px;background:var(--p1,#7FB2FF);color:var(--p-auf,#0B1119);font:600 13px/1 var(--sans);cursor:pointer}
.dateien__input[aria-invalid="true"]{border-color:#E5484D}
.dateien__liste{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.dateien__liste:empty{display:none}
.dateien__eintrag{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding:8px 12px;border-radius:8px;background:color-mix(in srgb,var(--p1,#7FB2FF) 10%,transparent);font-size:13.5px;line-height:1.4}
.dateien__name{min-width:0;overflow-wrap:anywhere;color:var(--p-tinte,inherit)}
.dateien__info{color:var(--p-leise,#AEB8C2);font-variant-numeric:tabular-nums}
.dateien__eintrag--falsch{background:rgba(229,72,77,.12)}
.dateien__eintrag--falsch .dateien__info{color:#E5484D}

/* ── „Beispiele ansehen“ an der Design-Karte (12.10.2026): sieht aus wie die kleine Filmkachel, ist aber ein Link */
.beispiel-link{display:flex;align-items:center;gap:12px;padding:5px 14px 5px 5px;border:1px solid var(--p-linie,rgba(232,237,242,.1));border-radius:14px;background:color-mix(in srgb,var(--p-tinte,#E8EDF2) 5%,transparent);color:inherit;text-decoration:none;transition:border-color .25s,background .25s}
.beispiel-link:hover{border-color:color-mix(in srgb,var(--p1) 60%,transparent);background:color-mix(in srgb,var(--p1) 10%,transparent)}
.beispiel-link:focus-visible{outline:2px solid var(--p1);outline-offset:3px}
.beispiel-link__bild{position:relative;flex:none;width:76px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#0A0F16}
.beispiel-link__bild img{display:block;width:100%;height:100%;object-fit:cover}
.beispiel-link__ki{position:absolute;right:3px;bottom:3px;padding:1px 4px;border-radius:4px;background:rgba(6,9,15,.75);color:#F2EFE9;font:600 8.5px/1.3 var(--sans);letter-spacing:.04em}
.beispiel-link__worte{display:grid}
.beispiel-link__titel{font-weight:600;font-size:14px;line-height:1.3;color:var(--p-tinte)}
.beispiel-link__unter{font-size:12px;line-height:1.4;color:var(--p-leise)}

/* ── KI-Etikett am Bild der Brücke: im voll sichtbaren Bereich rechts oben, wie bei den Design-Beispielen */
.bruecke__ki{position:absolute;z-index:1;top:max(16%,96px);right:var(--rand);padding:4px 9px 5px;border-radius:999px;background:rgba(6,9,15,.72);box-shadow:inset 0 0 0 1px rgba(232,237,242,.16);color:#E8EDF2;font:600 11px/1.2 var(--sans);letter-spacing:.04em;pointer-events:none}
@media (max-width:899.98px){.bruecke__ki{top:31%;right:12px;font-size:10px}}

/* ── Planet 5 „Nubro“ (12.10.2026): die App, die gerade entsteht. Farben aus Nubro selbst: Grün und Gelb wie sein Shirt,
   Mint wie das Licht im Film, auf dunklem Waldgrau. Kein Knopf, nur ein Hinweis (siehe Kommentar in index.html). */
[data-planet="nubro"]{--p1:#7ED957;--p2:#F2C94C;--p-grund:#0D1410;--p-flaeche:#121A15;--p-linie:#28362C;--p-tinte:#F2EFE9;--p-leise:#A7B3A2;--p-verlauf:linear-gradient(100deg,#7ED957,#F2C94C);--p-auf:#0D1410}
.reise__halt[data-planet="nubro"]{--halt-farbe:#7ED957}
.reise__halt[data-planet="nubro"] .reise__name{background:var(--p-verlauf);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.reise__halt[data-planet="nubro"] .reise__preis b{color:var(--p2)}
.reise__bald{display:flex;gap:10px;align-items:flex-start;margin-top:4px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--p1) 9%,transparent);font-size:13.5px;line-height:1.45;color:var(--p-leise)}
.reise__bald::before{content:"";flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--p1);box-shadow:0 0 0 4px color-mix(in srgb,var(--p1) 20%,transparent)}
.reise__punkt[data-ziel="nubro"]{--punkt-farbe:#7ED957}

/* ── Holzschild quer über einem Planeten („Demnächst“): Startseite (Planet 5) und nubro.html.
   Holz, Nägel und Schrift kommen aus .holzschild; Nägel links und rechts in der Mitte. */
.holzschild--quer{left:50%;top:48%;right:auto;bottom:auto;width:58%;padding:clamp(16px,2vw,26px) 24px clamp(12px,1.6vw,20px);transform:translate(-50%,-50%) rotate(-9deg);transform-origin:50% 50%}
.holzschild--quer{container-type:inline-size}
.holzschild--quer .holzschild__betrag{font-size:clamp(20px,15.5cqw,76px);letter-spacing:-.01em;white-space:nowrap}   /* Schrift wächst mit dem Schild */
.holzschild--quer::before,.holzschild--quer::after{top:50%;margin-top:-5px;width:10px;height:10px}
.holzschild--quer::before{left:14px}
.holzschild--quer::after{right:14px}
.holzschild--quer:hover{transform:translate(-50%,-50%) rotate(-7deg)}
.reise__planet--schild{position:relative}
.reise__planet--schild .holzschild--quer{width:62%}

/* ── Planet Nubro so groß wie die anderen. Wegen seines Rings füllt die Kugel
   nur 70,5 % des Bildes (die anderen rund 90 %), darum ist sein Bild 1,28-mal so breit, bei gleicher Mitte; der Ring ragt
   über den Rahmen hinaus. Die Karte richtet sich weiter nach --planet-b und --planet-r und steht so wie bei den anderen
   vor der Kugel. Das Schild wächst mit und liegt quer über der ganzen Kugel. */
.reise__halt[data-planet="nubro"] .reise__planet{width:min(99vw,615px)}
@media (min-width:700px){.reise__halt[data-planet="nubro"] .reise__planet{width:min(128%,615px)}}
@media (min-width:900px){.bewegung .reise__halt[data-planet="nubro"] .reise__planet{width:calc(var(--planet-b) * 1.28);right:calc(var(--planet-r) - var(--planet-b) * .14)}}
.reise__halt[data-planet="nubro"] .holzschild--quer{width:68%}

/* ── Milchstraße: ein schräges Lichtband mit Sternwolken und Staubstreifen, über dem ersten
   Sternenmuster und unter der zweiten Lage. Selbst berechnet (keine KI). Ein großes Bild
   statt Kacheln; es zieht nur wenig mit (site.js „Himmel“), darum ist es größer als der Bildschirm. */
.himmel__strasse{display:none}
html body[data-seite="start"] .himmel__strasse{display:block;position:fixed;left:50%;top:50%;z-index:-1;width:max(150vw,266.67vh);aspect-ratio:16/9;pointer-events:none;background:url("erde/milchstrasse.webp") 50% 50%/cover no-repeat;transform:translate(-50%,-50%);will-change:transform}

/* ── iPhone, Startseite: Lenis statt ScrollSmoother (site.js „weichScroll“).
   1) Empfohlener Stil von Lenis 1.3.26 (MIT, darkroomengineering/lenis, dist/lenis.css). */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch],.lenis [data-lenis-prevent-vertical],.lenis [data-lenis-prevent-horizontal]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
/* 2) Nichts darf seitlich über die Seite hinausragen: auf dem iPhone verschob sich sonst die ganze Seite beim Wischen
   (Überschriften links abgeschnitten). Auch am html, weil Safari den Wert vom body sonst nur ans Fenster weitergibt. */
html{overflow-x:clip}
/* 3) Der Himmel liegt in einem festen Rahmen in Fenstergröße; die großen Ebenen darin sind absolut und werden am
   Rahmen beschnitten. Das erste Sternenmuster braucht nur rechts und unten eine Kachel Vorrat (site.js verschiebt es
   immer um 0 bis minus eine Kachel). Unter 900 px fällt die zweite, gedrehte Lage weg und die Milchstraße ist nur so
   groß wie nötig (dort zieht sie nur nach oben): zusammen spart das auf dem iPhone ein Mehrfaches an Grafikspeicher. */
.himmel-rahmen{display:none}
html body[data-seite="start"] .himmel-rahmen{display:block;position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
html body[data-seite="start"] .himmel-rahmen .himmel,html body[data-seite="start"] .himmel-rahmen .himmel__strasse,html body[data-seite="start"] .himmel-rahmen .himmel__zwei{position:absolute}
html body[data-seite="start"] .himmel-rahmen .himmel{inset:0 calc(var(--kachel) * -1) calc(var(--kachel) * -1) 0}
@media (max-width:899.98px){
  html body[data-seite="start"] .himmel-rahmen .himmel__zwei{display:none}
  html body[data-seite="start"] .himmel-rahmen .himmel__strasse{width:100%;height:150%;aspect-ratio:auto}
}
/* 4) Filmkorn: die Fläche bleibt in Fenstergröße, nur ihr Muster (Pseudo-Element, Hintergrund wie .korn oben) ist
   größer und wackelt */
.korn{inset:0;overflow:hidden;background:none}
.bewegung .korn{animation:none}
.bewegung .korn::before{animation:korn 1s steps(6) infinite}
@media (prefers-reduced-motion:reduce){.korn::before{animation:none!important}}
.korn::before{content:"";position:absolute;inset:-10%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* 5) Reise schmal: die Spalte darf nicht breiter werden als ihr Inhalt verlangt (sonst
   ragten die Planeten-Karten 13 px und das Holzschild 28 px über den Rand, und das iPhone verschob die Seite) */
.reise__spur{grid-template-columns:minmax(0,1fr)}
@media (max-width:699.98px){.reise__halt{grid-template-columns:minmax(0,1fr)}}

/* ── Schwarzes Loch weit hinten zwischen Clips und Designs. Liegt im Halt „Designs“ an dessen linkem
   Rand, also in der Lücke zum Halt davor; klein, gedämpft und hinter Planeten und Karten. site.js zieht es gegen die Fahrt
   mit (xPercent), dadurch wandert es langsamer als die Planeten und wirkt weiter weg. Nur mit Bewegung ab 900 px,
   schmal gibt es die Lücke nicht (und kein zusätzliches Bild auf dem Handy). */
.reise__tiefe{display:none}
@media (min-width:900px){
  .bewegung .reise__tiefe{display:block;position:absolute;z-index:-1;left:-9vw;top:15%;width:min(24vw,460px);opacity:.55;pointer-events:none;filter:saturate(.9)}
  .bewegung .reise__tiefe img{display:block;width:100%;height:auto}
}
/* Ringplanet (Saturn-Look) weit hinten zwischen Designs und E-Book, tiefer als das Schwarze Loch;
   gleiche Regeln wie .reise__tiefe, nur Lage und Größe anders. Selbst berechnet. */
@media (min-width:900px){
  .bewegung .reise__tiefe--ring{left:-11vw;top:57%;width:min(20vw,380px);opacity:.5}
}

/* ── Intro: Buchstaben „NUBRO“ als einfacher Text für die ruhige Phase (13.10.2026, iPhone-Video: Safari zeichnete die
   Schnittmaske #film-schrift nicht, nur der weiche Schein war zu sehen). site.js blendet ihn ein, solange die Kamera
   steht, und übergibt beim Zoom an .film__feld. Mit Bewegung startet er unsichtbar wie das Feld. */
.film__wort{pointer-events:none}
.bewegung .film__wort{opacity:0}

/* ── Leistung. 
   Intro: Nubro liegt auf eigener Ebene (.film__ebene), der weiche Schein ist ein fertiges Bild (.film__scheinbild);
   site.js schreibt nur noch geänderte Werte und setzt die Loch-Maske erst, wenn der Buchstabe durchsichtig wird. */
.film__ebene{pointer-events:none}
.bewegung .film__scheinbild{opacity:0}
/* Geräte mit Finger (Handy, Tablet): nichts, was Safari bei jeder Bewegung neu rechnen muss. Unschärfe hinter halb
   durchsichtigen Flächen (backdrop-filter) wird zu einer etwas dichteren Fläche, das kaum sichtbare Filmkorn (eigene
   Vollbild-Ebene) fällt weg, der Leuchtrand der Planetenkarten ist ein fester Verlauf in den Planetenfarben. */
@media (hover:none) and (pointer:coarse){
  .korn{display:none}
  .bewegung .film__skip{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(5,7,13,.8)}
  .film__ki{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(5,7,13,.8)}
  .abspann__news{-webkit-backdrop-filter:none;backdrop-filter:none}
  .kachel--klein .kachel__bild::after{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(6,9,14,.72)}
  .glutkarte__rand{-webkit-backdrop-filter:none;backdrop-filter:none;border-width:2px;background:linear-gradient(165deg,color-mix(in srgb,var(--p1,#7FB2FF) 70%,#1f3bff) 0%,var(--p1,#7FB2FF) 28%,color-mix(in srgb,var(--p2,#38D9A0) 75%,transparent) 62%,color-mix(in srgb,var(--p1,#7FB2FF) 55%,#1f3bff) 100%) border-box;opacity:.9}
}
/* Nubro im Intro als Bild (13.10.2026): Bezugsgröße 543,5 x 724,9 Einheiten der Szene, site.js setzt Lage, Drehung und
   Maßstab per transform (Ursprung oben links). Ohne Skript bleibt er unsichtbar. */
.film__ebene{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.film__nubro{position:absolute;left:0;top:0;width:543.5px;height:724.9px;transform-origin:0 0;visibility:hidden;will-change:transform}
.film__nubro img{position:absolute;left:0;top:0;width:543.5px;height:724.9px;max-width:none}
.film__nubro img.film__blinzeln{left:155.39px;top:90px;width:296.72px;height:215.16px;opacity:0}
/* Kontakt ohne Formular (Livegang 13.10.2026): E-Mail und Telefon als Links, auf allen Seiten gleich.
   Farben erbt der Satz von seiner Umgebung, darum passt er auf dunkle und helle Planeten. */
.ersatz{font-size:clamp(17px,1.4vw,19px);line-height:1.5;text-wrap:pretty}
.ersatz a{font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;overflow-wrap:anywhere;white-space:nowrap}
.ersatz a:hover{text-decoration-thickness:2px}
.ersatz--fuss{margin:0 0 clamp(28px,3.4vw,44px)}
/* Rechtsseiten (impressum.html, datenschutz.html): ruhiger Lesetext in der Seitenvorlage, Wortlaut der IT-Recht Kanzlei */
.recht{padding:clamp(120px,14vw,170px) 0 0}
.recht__text{max-width:76ch;font-size:16px;line-height:1.65;color:var(--stahl)}
.recht__titel,.recht__text h1{margin:0 0 28px;font-weight:600;font-size:clamp(34px,4.6vw,56px);line-height:1.05;letter-spacing:-.035em;color:var(--tinte)}
.recht__text h2{margin:40px 0 12px;font-weight:600;font-size:clamp(20px,2vw,24px);line-height:1.25;letter-spacing:-.015em;color:var(--tinte)}
.recht__text p{margin:0 0 14px}
.recht__text ul{margin:0 0 14px;padding-left:1.3em;list-style:disc}
.recht__text li{margin:0 0 4px}
.recht__text b{color:var(--tinte)}
.recht__text a{text-decoration:underline;text-underline-offset:3px}
.recht__text img{display:inline-block;height:auto}
.recht-seite .bk-fuss{margin-top:clamp(90px,10vw,140px);padding-bottom:36px}
.recht__text #itkanzlei_img_copyright{padding:6px 10px;border-radius:8px;background:#F3F5F7}