@font-face{font-family:'Host Grotesk';src:url('/assets/fonts/HostGrotesk.woff2') format('woff2');
  font-weight:300 800;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/Inter.woff2') format('woff2');
  font-weight:100 900;font-display:swap}

:root{
  /* Grundwerte */
  --nacht:#0B0B0D; --papier:#FFFFFF; --limette:#A2CE2A;
  /* Rollen, werden je Blatt getauscht. Voreinstellung ist hell,
     weil ungefaehr zwei Drittel der Seite hell sind. */
  --grund:#FFFFFF; --tief:#F4F4F2; --linie:#E4E4E0;
  --weiss:#0B0B0D; --neben:#5F6470; --signal:#0B0B0D;
  --rand:clamp(20px,5vw,64px); --spalte:1280px;
  /* Takt. Fuenf Abstaende, sonst keine. Runde 7 hatte an 19 Stellen eigene
     rem- und clamp-Werte, und die Blaetter atmeten alle verschieden. */
  --t1:8px; --t2:16px; --t3:clamp(22px,2.6vw,32px);
  --t4:clamp(38px,5vh,64px); --t5:clamp(72px,11vh,128px);
  --weich:cubic-bezier(.22,.61,.36,1);
  --kopf:'Host Grotesk',Helvetica,sans-serif;
  --text:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
/* Muss oben stehen: jede Klassenregel mit display schlaegt sonst das eingebaute
   [hidden]. Hat in diesem Projekt schon zweimal Schaden angerichtet. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;background:var(--grund)}
/* Dunkles Blatt: dieselben Bauteile, getauschte Rollen. */
.dunkel{--grund:#0B0B0D;--tief:#16161A;--linie:#2A2C31;
  --weiss:#F4F4F0;--neben:#949AA1;--signal:#A2CE2A;
  background:var(--grund);color:var(--weiss)}
.hell{--grund:#FFFFFF;--tief:#F4F4F2;--linie:#E4E4E0;
  --weiss:#0B0B0D;--neben:#5F6470;--signal:#0B0B0D;
  background:var(--grund);color:var(--weiss)}
body{margin:0;background:var(--grund);color:var(--weiss);
  font:400 17px/1.62 var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit}
/* Nur zwei Schriften: Host Grotesk fuer Ueberschriften und Zahlen, Inter fuer alles
   andere. Eine dritte, kantige Mono liest sich sofort als Baukasten. */
.mono{font-family:var(--text);letter-spacing:.1em;font-weight:500}

/* Korn liegt in der FLAECHE, nicht ueber dem Fenster. Als fixe Schicht ueber
   allem stand es beim Scrollen still und las sich als Bildschirmfilter, nicht als
   Material. Jetzt scrollt es mit. Auf Papier ein Hauch, auf Nacht deutlich, dort
   traegt es auch etwas. Alte Regel "nie staerker als 4 Prozent" ist damit ersetzt
   durch "fein auf Papier, deutlich auf Nacht". */
.hell,.dunkel,.fuss{position:relative;isolation:isolate}
.hell::after,.dunkel::after,.fuss::after{content:"";position:absolute;inset:0;
  pointer-events:none;z-index:6;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px}
.hell::after{opacity:.024;mix-blend-mode:multiply}
.dunkel::after,.fuss::after{opacity:.075;mix-blend-mode:screen}
/* Zweite, groebere Schicht nur auf Nacht: Staub und Schlieren. Auf Weiss wuerde
   dasselbe sofort schmutzig aussehen, auf Schwarz sieht es nach Film aus. */
.dunkel::before,.fuss::before{content:"";position:absolute;inset:0;pointer-events:none;
  z-index:6;opacity:.05;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.028' numOctaves='3' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23d)'/%3E%3C/svg%3E");background-size:420px 420px}

.skip{position:absolute;left:-9999px;top:0;padding:14px 20px;background:var(--limette);
  color:var(--nacht);z-index:300;font-family:var(--text);font-weight:500;}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--limette);outline-offset:3px}

.wrap{max-width:var(--spalte);margin:0 auto;padding:0 var(--rand)}
.wrap.schmal{max-width:780px}

/* ---------------------------------------------------------------- Ladeschirm */
/* Der Grinder dreht sich, danach oeffnet sich die Seite.

   Sichtbar NUR unter html.laedt, und diese Klasse setzt allein das Inline-
   Skript im Kopf. Ohne JavaScript erscheint der Schirm also nie und jeder
   Verweis fuehrt direkt zum Ziel.

   position:fixed und keine Layoutwirkung, damit er CLS nicht beruehrt. Er
   verdeckt den Inhalt, er verschiebt ihn nicht. */
.ladeschirm{position:fixed;inset:0;z-index:400;display:flex;align-items:center;
  justify-content:center;background:#0B0B0D;opacity:0;visibility:hidden;
  transition:opacity .34s var(--weich),visibility 0s linear .34s}
html.laedt .ladeschirm{opacity:1;visibility:visible;transition-delay:0s}
html.laedt{overflow:hidden}
/* Runde 24: Seitenwechsel ist nur eine Blende, ohne Grinder und kuerzer. */
html.weiter .ladeschirm{transition-duration:.25s,0s;transition-delay:0s,.25s}
html.laedt.weiter .ladeschirm{transition-delay:0s}
html.weiter .ladeschirm>*{display:none}
/* Uebergang: der Grund blendet aus, der Grinder faehrt per transform auf den
   Hero-Grinder (luma.js misst beide). Danach nimmt zu() die Klasse laedt weg. */
html.laedt.flug .ladeschirm{background:transparent;pointer-events:none;transition:background .5s var(--weich)}
html.laedt.flug .grinder__zahl,html:not(.laedt) .ladeschirm .grinder__zahl{opacity:0;transition:opacity .2s}
.ladeschirm .grinder{transform-origin:50% 50%;will-change:transform}
.ladeschirm .grinder.fliegt{transition:transform .68s cubic-bezier(.22,1,.36,1)}
/* Der Grinder, zwei Scheiben in CSS-3D (Runde 8, vorher flache Scheibe mit
   Ringen, "Oreo"). Die Buehne hat Perspektive, .grinder__kipp kippt von
   Aufsicht auf 64 Grad, der Deckel hebt sich ab, beide Teile drehen
   gegenlaeufig mit einer Kurve je Umdrehung: greifen, drehen, ausklingen.
   Die Waende sind gestapelte Ringe je vier Pixel tiefer, in der Kippung
   lesen sie sich als Kante.

   Runde 10 hatte kurz eine Abfolge (flach, kippen, heben, drehen, Zahl) und
   eine groebere Zeichnung. Der Kunde wollte den Runde-9-Grinder zurueck:
   alles zugleich, fein gezeichnet, gestrichelte Waende. Geblieben sind
   will-change auf Kipp und Dreh und die Ruckel-Behebung im JavaScript (die
   Ursachen lagen dort, nicht in der Zeichnung). */
.grinder{display:flex;flex-direction:column;align-items:center;gap:26px}
.grinder__buehne{width:clamp(104px,14vw,160px);aspect-ratio:1;perspective:640px;
  perspective-origin:50% 30%}
.grinder__kipp{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  will-change:transform;animation:grinder-kipp 1.1s cubic-bezier(.22,1,.36,1) both}
@keyframes grinder-kipp{from{transform:rotateX(0deg) rotateZ(-8deg)}
  to{transform:rotateX(64deg) rotateZ(-8deg)}}
.grinder__teil{position:absolute;inset:0;transform-style:preserve-3d;color:var(--limette)}
.grinder__deckel{animation:grinder-heben 1.1s cubic-bezier(.22,1,.36,1) both}
@keyframes grinder-heben{from{transform:translateZ(2px)}to{transform:translateZ(42px)}}
.grinder__boden{transform:translateZ(0);
  color:color-mix(in srgb,var(--limette) 74%,#0B0B0D)}
.grinder__dreh{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;
  animation:mahlen 1.7s cubic-bezier(.5,.02,.18,1) infinite}
.grinder__boden .grinder__dreh{animation-direction:reverse;animation-duration:2.1s}
.grinder__dreh svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.grinder__wand{position:absolute;inset:3%;border-radius:50%;
  border:2px dashed color-mix(in srgb,currentColor 62%,#0B0B0D)}
@keyframes mahlen{to{transform:rotate(360deg)}}
.grinder__zahl{font-family:var(--kopf);font-weight:800;font-size:clamp(22px,2.6vw,30px);
  letter-spacing:-.03em;color:var(--limette);font-variant-numeric:tabular-nums;
  line-height:1;display:flex;align-items:baseline;gap:2px}
.grinder__zahl span{font-size:.6em;color:#949AA1;font-weight:500}
/* Im Styleguide laeuft er als Schleife ohne Zahl. */
.grinder--klein .grinder__buehne{width:96px}

/* ---------------------------------------------------------------- Zeiger */
/* Runde 8: ein Punkt, kein Grinder mehr. Der Grinder hat genau eine Rolle,
   den Ladeschirm. Der Punkt folgt der Maus mit Nachlauf, wird an Knoepfen und
   Navigation magnetisch (der Knopf rueckt ihm entgegen, siehe luma.js) und
   waechst ueber verlinkten Medien zu einem Ring mit Label. Der Systemzeiger
   bleibt sichtbar, nur ueber Medien nicht (dort sagt das Label, was ein Klick
   tut). Nur bei feinem Zeiger, nie auf Touch, nie bei reduzierter Bewegung. */
.zeiger{position:fixed;left:0;top:0;z-index:250;pointer-events:none;width:0;height:0;
  opacity:0;will-change:transform;transition:opacity .25s var(--weich)}
.zeiger.da{opacity:1}
.zeiger__punkt{position:absolute;left:-5px;top:-5px;width:10px;height:10px;
  border-radius:50%;background:var(--limette);box-sizing:border-box;
  border:0 solid var(--limette);box-shadow:0 0 0 1px rgba(11,11,13,.18);
  transition:width .28s var(--weich),height .28s var(--weich),left .28s var(--weich),
    top .28s var(--weich),background .2s,border-width .2s}
/* am Magnet verschwindet er, der Knopf uebernimmt. Ein kleiner Punkt auf
   dem Knopf las sich wie ein Tippfehler im Wort. */
.zeiger.magnet .zeiger__punkt{width:0;height:0;left:0;top:0;opacity:0}
/* ueber Medien ein Ring */
.zeiger.ring .zeiger__punkt{width:46px;height:46px;left:-23px;top:-23px;
  background:transparent;border-width:1.5px;box-shadow:none}
.zeiger__text{position:absolute;left:34px;top:-14px;opacity:0;transform:translateX(-6px);
  font-family:var(--text);font-weight:600;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:#F4F4F0;white-space:nowrap;
  background:color-mix(in srgb,#0B0B0D 74%,transparent);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  padding:7px 13px;border-radius:999px;
  transition:opacity .22s var(--weich),transform .22s var(--weich)}
.zeiger.ring .zeiger__text{opacity:1;transform:none}
/* Ueber verlinkten Medien den Systemzeiger ausblenden, sonst stehen zwei da. */
[data-cursor]{cursor:none}
/* Magnete: weich zurueckfedern, wenn der Zeiger geht. Solange er zieht,
   setzt luma.js den Versatz direkt und die Feder ist aus. */
[data-magnet]{will-change:transform;
  transition:transform .6s cubic-bezier(.34,1.56,.64,1),background .25s,
    border-color .25s,color .25s}
[data-magnet].magnet{transition:transform .1s ease-out,background .25s,
    border-color .25s,color .25s}
@media (hover:none),(pointer:coarse){.zeiger{display:none}}

/* ---------------------------------------------------------------- Navigation */
.pille{position:fixed;top:clamp(.7rem,1.6vh,1.2rem);left:50%;transform:translateX(-50%);
  z-index:200;width:min(calc(100% - 2*var(--rand)),var(--spalte));
  display:flex;align-items:center;gap:1rem;
  padding:.45rem .5rem .45rem 1.1rem;border-radius:999px;
  /* Die Pille passt sich an, was gerade hinter ihr liegt. Eine feste dunkle
     Fuellung wirkt ueber hellen Blaettern wie ein grauer Balken. */
  background:color-mix(in srgb,#0B0B0D 56%,transparent);
  border:1px solid rgba(244,244,240,.14);color:#F4F4F0;
  backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);
  transition:background .35s var(--weich),border-color .35s var(--weich)}
/* Dauerhaft sichtbar, auch ganz oben. Beim Scrollen wird die Fuellung dichter. */
.pille.dicht{background:color-mix(in srgb,#0B0B0D 84%,transparent)}
.pille.auf-hell{background:color-mix(in srgb,#FFFFFF 72%,transparent);
  border-color:rgba(11,11,13,.12);color:#0B0B0D}
.pille.auf-hell.dicht{background:color-mix(in srgb,#FFFFFF 88%,transparent)}
.pille.auf-hell .pille__marke{color:#0B0B0D}
.pille.auf-hell .pille__weg a{color:#5F6470}
.pille.auf-hell .pille__weg a:hover{color:#0B0B0D}
.pille__marke{display:flex;align-items:center;min-height:44px;flex:none}
.pille__marke{color:#F4F4F0;transition:color .25s}
.pille__marke svg{height:27px;width:auto}
@media(max-width:520px){.pille__marke svg{height:24px}}
/* Runde 23: Logo R2-1. Der Mond (Klasse m) ist auf Nacht Limette, auf hellem
   Grund in Schriftfarbe. Gesteuert ueber --mond, nicht ueber feste Farben. */
.marke-svg .m{fill:var(--mond,currentColor)}
.dunkel,.hero,.fuss,.ladeschirm,#tor,.pille:not(.auf-hell){--mond:var(--limette)}
.hell{--mond:currentColor}
.pille__marke:hover{color:var(--limette)}
.pille__weg{display:flex;gap:1.5rem;margin-left:auto;font-size:14px;font-weight:500}
.pille__weg a{text-decoration:none;color:rgba(244,244,240,.62);display:inline-flex;align-items:center;
  min-height:44px;position:relative;transition:color .2s}
.pille__weg a::after{content:"";position:absolute;left:0;right:100%;bottom:12px;height:1px;
  background:var(--limette);transition:right .3s var(--weich)}
.pille__weg a:hover{color:#F4F4F0}
.pille__weg a:hover::after{right:0}
/* Der aktive Eintrag hing an var(--signal). Die Pille liegt ausserhalb jeder
   Flaeche und erbt damit aus :root, also #0B0B0D: schwarz auf schwarzer
   Leiste. Und die Regel .pille.auf-hell .pille__weg a hat hoehere Spezifitaet
   als a[aria-current], auf hellem Grund war der aktive Eintrag deshalb
   farblich nicht mehr vom inaktiven zu unterscheiden. Beides fest setzen,
   nicht erben, plus einen Strich, der nicht von Farbe abhaengt. */
.pille__weg a[aria-current]{color:#F4F4F0}
.pille.auf-hell .pille__weg a[aria-current]{color:#0B0B0D}
.pille__weg a[aria-current]::after{right:0}
@media(max-width:920px){.pille__weg{display:none}}

.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:50px;padding:0 28px;border-radius:999px;border:1px solid var(--limette);
  background:var(--limette);color:var(--nacht);text-decoration:none;cursor:pointer;
  font-family:var(--text);font-weight:600;font-size:15px;position:relative;overflow:hidden;
  transition:transform .2s var(--weich),background .25s}
/* Kein Hover-Versatz mehr, den macht der Magnet. Zwei Transformationen auf
   demselben Knopf ueberschreiben sich sonst gegenseitig. */
.knopf:hover{filter:brightness(1.06)}
.knopf.leer{background:transparent;color:var(--signal)}
.knopf.leer:hover{background:var(--limette);color:var(--nacht)}
.pille .knopf{min-height:44px;padding:0 22px;font-size:14px}

/* ---------------------------------------------------------------- Hero */
/* Runde 9: der Grinder mahlt die Seite. Links (Schreibtisch) oder unten (Mobil)
   der Text, die Buehne .muehle traegt den Grinder oben und den Haufenboden
   unten. Die Kacheln (.kruemel) sind absolut, ihre Lage setzt luma.js per
   transform; der statische Haufen ohne JavaScript liegt ueber --x/--y/--r. */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;padding:clamp(88px,12vh,140px) 0 clamp(24px,4vh,48px);overflow:hidden}
.hero__in{position:relative;z-index:3;display:grid;gap:var(--t3);align-items:center;
  min-height:calc(100svh - clamp(88px,12vh,140px) - clamp(24px,4vh,48px))}
@media(min-width:900px){.hero__in{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
@media(max-width:899px){.hero__in{grid-template-rows:auto auto}.muehle{order:-1}}
.hero__text{position:relative;z-index:2}
.hero__marke{margin:0;line-height:0;color:var(--weiss)}
.hero__marke svg{width:min(100%,640px);height:auto}
.hero__unter{max-width:38ch;font-size:clamp(17px,2vw,22px);color:var(--neben);margin:1.2rem 0 0}
.hero__knoepfe{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}
.hero__hinweis{margin:var(--t3) 0 0;font-family:var(--text);font-weight:500;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--neben);transition:opacity .5s var(--weich)}
.hero.gedreht .hero__hinweis{opacity:0}
html.nojs .nur-js{display:none}
.nur-lesegeraet{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Die Buehne. touch-action:pan-y: waagerechtes Wischen dreht, senkrecht scrollt
   die Seite, sonst kaeme man auf dem Telefon nicht am Kopf vorbei. */
/* overflow:hidden, weil die gekippte 3D-Buehne des Grinders sonst 8 px ueber
   den Rand ragt und die Seite bei 390 px waagerecht scrollt. */
.muehle{position:relative;min-height:max(380px,min(62svh,560px));height:100%;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;
  border-radius:24px;isolation:isolate;overflow:hidden}
@media(max-width:899px){.muehle{min-height:max(340px,min(56svh,480px))}}
.muehle.zieht{cursor:grabbing}
.muehle__grinder{position:absolute;left:50%;top:6%;transform:translateX(-50%);z-index:2;
  pointer-events:none}
.grinder--hero .grinder__buehne{width:clamp(220px,32vw,400px);perspective:900px;perspective-origin:50% 20%}
@media(max-width:899px){.grinder--hero .grinder__buehne{width:min(62vw,300px)}}
/* Im Hero dreht luma.js, nicht das CSS. Die Kippung laeuft parallel zum
   Ladeschirm (beide starten beim ersten Anstrich), so passt der Flug bei
   700 ms zum Hero. Runde 10 hatte den Hero kurz fest im Endzustand. */
.grinder--hero .grinder__dreh{animation:none}
.grinder--hero .grinder__deckel .grinder__dreh{transform:rotate(var(--wd,0deg))}
.grinder--hero .grinder__boden .grinder__dreh{transform:rotate(var(--wb,0deg))}
.muehle__haufen{position:absolute;inset:0;z-index:1;overflow:hidden;border-radius:24px}
/* Kachel. Breite je Seitenverhaeltnis, Bild deckend, Etikett der Saeule. */
.kruemel{position:absolute;left:0;top:0;width:var(--w,120px);aspect-ratio:var(--ar,16/9);
  border-radius:10px;overflow:hidden;background:#16161A;display:block;
  transform:translate(var(--x,0),var(--y,0)) rotate(var(--r,0deg));transform-origin:50% 50%;
  will-change:transform;box-shadow:0 10px 30px rgba(0,0,0,.45);cursor:pointer;
  outline:1px solid rgba(244,244,240,.12);outline-offset:-1px;opacity:1;transition:opacity .4s}
.kruemel.weg{opacity:0;pointer-events:none}
.kruemel img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.kruemel i{position:absolute;left:8px;bottom:8px;font-style:normal;font-family:var(--text);
  font-weight:600;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--nacht);background:var(--limette);padding:3px 7px;border-radius:999px;pointer-events:none}
.kruemel[data-ar="9/16"]{--ar:9/16;--w:clamp(72px,7vw,96px)}
.kruemel[data-ar="1/1"]{--ar:1/1;--w:clamp(84px,8vw,112px)}
.kruemel[data-ar="16/9"]{--ar:16/9;--w:clamp(118px,11vw,156px)}
/* Statischer Haufen (ohne JS, reduzierte Bewegung): Prozentlagen am Boden. */
.kruemel--statisch{left:var(--x);top:var(--y);transform:rotate(var(--r))}
/* Halo hinter dem Grinder, damit er auf Nacht nicht schwebt wie ausgeschnitten. */
.muehle::before{content:"";position:absolute;left:50%;top:22%;width:min(70%,520px);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(162,206,42,.16) 0%,rgba(162,206,42,.05) 45%,transparent 70%)}

/* ---------------------------------------------------------------- Blatt */
.blatt{padding:var(--t5) 0;position:relative}
.blatt__kopf{display:flex;align-items:center;gap:1rem;margin-bottom:var(--t4);
  font-family:var(--text);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--neben)}
.blatt__linie{flex:1;height:1px;background:var(--linie)}
/* Runde 22: Mond am Ende jeder Kopfzeile, nimmt ueber die Startseite zu. */
.blatt__kopf .blatt__mond{width:18px;height:18px}
.blatt__kopf .mondlauf__scheibe{stroke-width:6}
.schluss__mond{display:flex;justify-content:center;margin-bottom:var(--t3)}
.schluss__mond .blatt__mond{width:44px;height:44px}

/* Runde 22: Deko. Beide Ebenen liegen hinter dem Inhalt und sind im Blatt
   beschnitten, damit nichts die Seite verbreitert (Falle 13 und 42). */
.blatt:has(> .deko-ebene){isolation:isolate}
.deko-ebene{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.lichtfleck{position:absolute;z-index:-1;pointer-events:none;width:min(62vw,760px);aspect-ratio:1;
  border-radius:50%;filter:blur(10px);
  background:radial-gradient(circle,rgba(162,206,42,.20) 0%,rgba(162,206,42,.07) 42%,transparent 68%);
  animation:lichtwandern 26s var(--weich) infinite alternate}
.lichtfleck--1{left:-18%;top:8%}
.lichtfleck--2{right:-20%;top:-10%;animation-duration:32s;animation-direction:alternate-reverse}
.lichtfleck--3{left:30%;bottom:-30%;animation-duration:29s}
@keyframes lichtwandern{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6%,8%,0) scale(1.12)}}
.kruemelzug{position:absolute;inset:0;z-index:-1;pointer-events:none}
.kruemelzug__k{position:absolute;top:var(--y);width:clamp(54px,5.4vw,84px);aspect-ratio:var(--ar);max-height:150px;
  border-radius:10px;overflow:hidden;transform:rotate(var(--r));
  box-shadow:0 14px 34px rgba(11,11,13,.18);opacity:.92;will-change:transform}
.kruemelzug--rechts .kruemelzug__k{right:var(--x)}
.kruemelzug--links .kruemelzug__k{left:var(--x)}
.kruemelzug__k img{width:100%;height:100%;object-fit:cover;display:block}
/* Nur wo neben .wrap genug Rand frei ist, sonst laegen sie auf dem Text. */
@media(max-width:1359px){.kruemelzug{display:none}}
@media(prefers-reduced-motion:reduce){.lichtfleck{animation:none}}
/* Runde 23: Erdschein-Ringe als Linie, im Anschnitt. */
.erdring{position:absolute;width:min(78vw,980px);aspect-ratio:1;stroke:var(--signal);
  stroke-width:.5;opacity:.14;will-change:transform}
.erdring circle+circle{stroke:var(--limette);opacity:1;stroke-width:.7}
.erdring--rechts{right:-34%;top:-18%}
.erdring--links{left:-38%;bottom:-40%}
.dunkel .erdring{opacity:.22}

h1,h2,h3{font-family:var(--kopf);font-weight:800;letter-spacing:-.03em;margin:0}
/* Ohne balance entschied allein max-width, wo umbrochen wird, und die erste
   Zeile geriet regelmaessig zu lang. Wo der Rhythmus zaehlt, steht zusaetzlich
   ein harter Umbruch im Text. Der muss vor SplitText stehen, weil SplitText den
   fertigen Umbruch einfriert. */
h2{font-size:clamp(34px,5.6vw,68px);line-height:.98;margin-bottom:.5em;max-width:18ch;
  text-wrap:balance}
h3{font-size:clamp(21px,2.4vw,29px);line-height:1.12}
p{margin:0 0 1.1em;max-width:62ch}
.lede{font-size:clamp(18px,2.1vw,24px);line-height:1.48;max-width:50ch}
.neben{color:var(--neben)}
.klein{font-size:13px;color:var(--neben)}

.fn{font-family:var(--text);font-weight:500;font-size:.6em;vertical-align:super;color:var(--limette);
  padding-left:.12em;text-decoration:none}
.fussnoten{margin-top:var(--t4);padding-top:16px;border-top:1px solid var(--linie);
  font-family:var(--text);font-weight:500;font-size:12px;line-height:1.8;color:var(--neben);max-width:70ch}
.fussnoten ol{margin:0;padding-left:1.4em}

/* ---------------------------------------------------------------- Ueber mich */
/* Runde 7 hatte die zwei Portraits versetzt (eins gross, eins nach rechts
   geschoben). Der Versatz war genau der Weissraum, den der Kunde meinte.
   Jetzt: die Bilder haben KEINE eigene Hoehe, sie fuellen die Hoehe des
   Textblocks daneben, oben buendig mit der Ueberschrift, unten mit dem
   letzten Absatz. Auf schmalen Schirmen stehen sie nebeneinander im 4:5. */
.person{display:grid;gap:var(--t4);align-items:stretch}
@media(min-width:900px){.person{grid-template-columns:1fr 1fr}}
/* Runde 21: ein grosses Portrait statt zwei kleiner. object-position kommt
   aus dem Gesichtsfokus (kundenfotos.fokus), inline am Bild. */
.person__bilder{display:grid}
.person__bilder figure{margin:0;overflow:hidden;background:var(--tief);
  border-radius:22px;position:relative;min-height:0;aspect-ratio:4/5}
.person__bilder img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--weich),filter .5s}
@media(min-width:900px){
  .person__bilder figure{aspect-ratio:auto;min-height:100%}
  /* absolut, damit das Bild keine Eigenhoehe in die Zeile traegt */
  .person__bilder img{position:absolute;inset:0}
}
.person__bilder figure:hover img{transform:scale(1.04)}

/* ---------------------------------------------------------------- Reichweite */
/* Frueher fuenf gleich grosse Kacheln. Darin standen Follower neben Streams,
   also Werte ohne gemeinsame Einheit. Gleich gross nebeneinander behauptet das
   eine Vergleichbarkeit, die es nicht gibt: Spotify sprengte die Kachel und
   Twitch sah daneben aus wie ein Versehen. Jetzt eine Leitzahl, die stimmt,
   darunter die Aufschluesselung, und die Musik als eigener Satz. */
.reich{display:grid;gap:var(--t4);align-items:start}
@media(min-width:900px){.reich{grid-template-columns:.85fr 1.15fr}}
.reich__leit{font-family:var(--kopf);font-weight:800;letter-spacing:-.045em;
  font-size:clamp(58px,9.5vw,124px);line-height:.86;margin:0}
.reich__leitwas{font-size:clamp(17px,2vw,21px);color:var(--neben);
  margin:.7rem 0 0;max-width:20ch}
.reich__liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.reich__zeile{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(12px,2vw,24px);padding:clamp(13px,1.9vh,19px) 0;min-height:56px;
  border-bottom:1px solid var(--linie);text-decoration:none;
  transition:padding-left .3s var(--weich),color .25s,border-color .25s}
.reich__zeile:hover{padding-left:.55rem;color:var(--signal);border-color:var(--limette)}
/* Der Fuellgrad der Sichel ist das Verhaeltnis zum groessten Kanal. Genau das
   behauptet der Begleittext seit Runde 4, gebaut war es nie. */
.reich__mond{width:28px;height:28px;flex:none;fill:currentColor}
.reich__wer{display:flex;flex-direction:column;gap:.12rem;min-width:0}
.reich__wer b{font-weight:600;font-size:16px}
.reich__wer i{font-style:normal;font-size:12px;color:var(--neben)}
.reich__wert{text-align:right;min-width:0}
.reich__wert b{display:block;font-family:var(--kopf);font-weight:800;line-height:1;
  font-size:clamp(23px,2.7vw,32px);letter-spacing:-.035em}
.reich__wert i{font-style:normal;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--neben)}
.reich__musik{margin:var(--t3) 0 0;font-size:clamp(17px,2vw,21px);
  line-height:1.5;max-width:36ch}
.reich__musik b{font-family:var(--kopf);font-weight:800;letter-spacing:-.03em;
  font-size:1.22em}
.reich__musik a{color:var(--signal);text-underline-offset:3px}

/* ---------------------------------------------------------------- Kanalblatt */
.kanal__kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;
  flex-wrap:wrap;margin-bottom:var(--t3)}
.kanal__logo{width:38px;height:38px;fill:var(--limette);margin-bottom:1rem}
.kanal__zahl{font-family:var(--kopf);font-weight:800;letter-spacing:-.04em;
  font-size:clamp(40px,6vw,76px);line-height:.92;color:var(--signal)}
.kanal__was{font-family:var(--text);font-weight:500;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--neben);margin-top:.5rem}
.kanal__link{display:inline-flex;align-items:center;gap:.7rem;min-height:50px;
  padding:0 24px;border-radius:999px;border:1px solid var(--linie);text-decoration:none;
  font-weight:600;font-size:15px;transition:border-color .25s,background .25s,color .25s}
.kanal__link svg{width:19px;height:19px;fill:currentColor}
.kanal__link:hover{border-color:var(--limette);background:var(--limette);color:var(--nacht)}
/* Mehrere Wege nebeneinander, bei Twitch sind es drei. */
.kanal__wege{display:flex;flex-wrap:wrap;gap:.7rem;max-width:none}
/* Kopf und Text links, ein Bild rechts. Bei Spotify das eine Auftrittsbild.
   Das Bild laeuft ueber die volle Hoehe der linken Spalte mit, deshalb steht
   der Kanalkopf mit drin und nicht darueber. */
.kanal__zweispalt{display:grid;gap:var(--t4);align-items:stretch}
@media(min-width:900px){.kanal__zweispalt{grid-template-columns:1fr minmax(0,340px)}}
.kanal__bild{margin:0;display:flex;flex-direction:column}
.kanal__bild img{width:100%;height:100%;object-fit:cover;object-position:center 22%;
  display:block;border-radius:16px;background:var(--tief);aspect-ratio:4/5}
.kanal__bild figcaption{padding-top:10px;font-size:12px;color:var(--neben)}
/* Im Zweispalter darf der Kanalkopf nicht mehr auseinanderlaufen, dafuer ist
   die Spalte zu schmal. */
@media(min-width:900px){
  .kanal__zweispalt .kanal__kopf{display:block}
  .kanal__zweispalt .kanal__zahl{margin-top:1.6rem}
}

/* ---------------------------------------------------------------- Videoband */
.band{position:relative;margin-top:var(--t4);overflow:hidden}
.band__spur{display:flex;gap:clamp(10px,1.4vw,18px);width:max-content;will-change:transform}
.clip--quer{width:clamp(280px,30vw,420px)!important;aspect-ratio:16/9!important}
.clip--quadrat{width:clamp(200px,21vw,280px)!important;aspect-ratio:1/1!important}
.clip--hoch{width:clamp(180px,20vw,268px)!important;aspect-ratio:4/5!important}
figure.clip{margin:0}
.clip{position:relative;flex:none;width:clamp(170px,19vw,262px);aspect-ratio:9/16;
  background:#141418;overflow:hidden;text-decoration:none;display:block;border-radius:14px}
.clip img,.clip video{width:100%;height:100%;object-fit:cover}
.clip video{position:absolute;inset:0;opacity:0;transition:opacity .45s var(--weich)}
.clip video.laeuft{opacity:1}
.clip__rahmen{position:absolute;inset:0;border:1px solid transparent;border-radius:14px;
  transition:border-color .3s;z-index:2}
.clip:hover .clip__rahmen{border-color:var(--signal)}
/* Die Schrift stand auf var(--weiss). Auf einem hellen Blatt ist das #0B0B0D,
   also schwarze Schrift auf schwarzem Verlauf. Betraf YouTube und Spotify.
   Der Verlauf ist immer dunkel, also gehoert hier ein fester heller Wert hin. */
.clip__marke{position:absolute;left:0;bottom:0;right:0;padding:12px 13px;z-index:3;
  display:grid;gap:.14rem;
  font-family:var(--text);font-weight:500;font-size:11px;letter-spacing:.04em;color:#F4F4F0;
  background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.46) 54%,transparent)}
.clip__marke b{font-weight:600;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
/* Zweite Zeile und Pfeil kommen erst beim Ueberfahren. Auf Tastgeraeten setzt
   der erste Tipp .offen, erst der zweite folgt dem Link. */
.clip__marke em,.clip__marke i{font-style:normal;opacity:0;transform:translateY(5px);
  transition:opacity .28s var(--weich),transform .28s var(--weich)}
.clip__marke em{color:rgba(244,244,240,.72)}
.clip__marke i{color:var(--limette);transition-delay:.05s}
.clip:hover .clip__marke em,.clip:hover .clip__marke i,
.clip.offen .clip__marke em,.clip.offen .clip__marke i{opacity:1;transform:none}
.band__hinweis{margin-top:var(--t2);font-family:var(--text);font-weight:500;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--neben)}

/* ---------------------------------------------------------------- Leistungen */
.karten{display:grid;gap:clamp(12px,1.4vw,18px)}
@media(min-width:880px){.karten{grid-template-columns:repeat(3,1fr)}}
.karte{background:var(--tief);border:1px solid var(--linie);border-radius:20px;
  padding:clamp(26px,3.2vw,42px);display:flex;flex-direction:column;
  transition:transform .3s var(--weich),box-shadow .3s var(--weich),border-color .3s}
.karte:hover{transform:translateY(-4px);border-color:var(--limette);
  box-shadow:0 18px 44px rgba(0,0,0,.16)}
.dunkel .karte:hover{box-shadow:0 18px 50px rgba(0,0,0,.6)}
.karte__nr{font-family:var(--text);font-weight:600;font-size:11px;letter-spacing:.16em;
  color:var(--signal);margin-bottom:1.4rem}
.karte__kurz{font-family:var(--kopf);font-weight:500;font-size:19px;color:var(--signal);
  margin:.6rem 0 1rem}
.karte p{font-size:15px;color:var(--neben)}
.karte__link{margin-top:auto;padding-top:1.4rem;font-weight:600;font-size:15px;
  text-decoration:none;display:inline-flex;align-items:center;min-height:44px;gap:.6rem;
  transition:color .2s}
.karte__link:hover{color:var(--signal)}

/* Runde 21: Karten mit echtem Material. Das Bild sitzt randlos oben, der Text
   darunter traegt das Padding. Hover hebt, zoomt das Bild, der Mond nimmt zu. */
.buchen__kopf{display:grid;gap:var(--t2);margin-bottom:var(--t4)}
@media(min-width:900px){.buchen__kopf{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:end}}
.buchen__h2{margin:0}
.buchen__unter{margin:0;max-width:40ch}
.karte--bild{padding:0;overflow:hidden}
.karte__bild{margin:0;position:relative;aspect-ratio:5/4;overflow:hidden;background:var(--nacht)}
.karte__bild img,.karte__bild video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transition:transform 1.1s var(--weich),opacity .5s}
.karte__bild video{opacity:0}
.karte__bild video.laeuft{opacity:1}
.karte:hover .karte__bild img,.karte:hover .karte__bild video{transform:scale(1.045)}
.karte__marke{position:absolute;left:14px;bottom:12px;padding:5px 11px;border-radius:999px;
  background:rgba(11,11,13,.72);color:#F4F4F0;font:600 11px/1.2 var(--text);letter-spacing:.08em;
  text-transform:uppercase;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.karte__inhalt{padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;flex:1}
.karte__kopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.karte__kopf .karte__nr{margin:0}
.mondlauf{width:26px;height:26px;flex:none;fill:var(--signal);overflow:visible}
.mondlauf__scheibe{fill:none;stroke:var(--signal);stroke-width:5;opacity:.45}

/* Runde 21: Schluss auf Nacht, dahinter die Clip-Wand. */
.schluss{position:relative;overflow:hidden;isolation:isolate}
.clipwand{position:absolute;inset:-12% 0;z-index:-1;display:grid;gap:14px;
  grid-template-columns:repeat(5,minmax(0,1fr));padding:0 14px;opacity:.62;pointer-events:none}
.clipwand::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 70% at center,rgba(11,11,13,.62) 0%,rgba(11,11,13,.25) 70%,rgba(11,11,13,.7) 100%)}
.clipwand__spalte{display:grid;gap:14px;align-content:start;will-change:transform}
.clipwand__spalte:nth-child(even){margin-top:-18%}
.clipwand__clip{position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#16171A}
.clipwand__clip img,.clipwand__clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.clipwand__clip{aspect-ratio:3/4}
.clipwand__clip video{opacity:0;transition:opacity .6s}
.clipwand__clip video.laeuft{opacity:1}
@media(max-width:760px){
  .clipwand{grid-template-columns:repeat(2,minmax(0,1fr))}
  .clipwand__spalte:nth-child(n+3){display:none}
  .clipwand video{display:none}
}
.schluss__karte{max-width:760px;margin-inline:auto;background:color-mix(in srgb,#0B0B0D 70%,transparent);
  backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1)}
.schluss__karte h2{margin-bottom:0}
.schluss__karte::before{opacity:.55}
.schluss .wrap{padding-block:var(--t4)}
.schluss__unter{margin:var(--t2) auto 0;max-width:38ch;color:var(--neben);font-size:clamp(16px,1.3vw,19px)}
.schluss__knopf{margin:var(--t4) 0 0}

/* ---------------------------------------------------------------- Partner */
.partnerband{overflow:hidden;position:relative;padding:var(--t3) 0;
  border-block:1px solid var(--linie)}
.partnerband::before,.partnerband::after{content:"";position:absolute;top:0;bottom:0;
  width:14%;z-index:2;pointer-events:none}
/* Die Kanten standen fest auf --nacht und lagen als zwei dunkle Balken auf dem
   hellen Blatt. Sie muessen der Flaeche folgen, nicht der Grundfarbe. */
.partnerband::before{left:0;background:linear-gradient(to right,var(--grund),transparent)}
.partnerband::after{right:0;background:linear-gradient(to left,var(--grund),transparent)}
.partnerband__spur{display:flex;align-items:center;gap:clamp(40px,6vw,96px);
  width:max-content;will-change:transform}
.partner{display:flex;align-items:center;justify-content:center;min-height:56px;
  text-decoration:none;flex:none;opacity:.55;
  transition:opacity .3s,transform .3s var(--weich)}
.partner:hover{opacity:1;transform:scale(1.06)}
/* Hier stand brightness(0) invert(1), also "faerbe alles reinweiss". Auf dem
   hellen Partnerblatt war damit jedes Logo unsichtbar und tauchte erst beim
   Ueberfahren auf. Jetzt traegt das SVG currentColor und folgt der Flaeche,
   das eine Rasterlogo wird entsaettigt. */
.partner img,.partner svg{height:clamp(26px,3vw,38px);width:auto}
.partner svg{fill:currentColor}
.partner img{filter:grayscale(1) contrast(1.08);transition:filter .3s}
.partner:hover img{filter:none}

/* ---------------------------------------------------------------- Formulare */
.feld{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.2rem}
.feld>span{font-family:var(--text);font-weight:500;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--neben)}
.feld input,.feld select,.feld textarea{width:100%;min-height:56px;padding:14px 0;
  background:transparent;border:0;border-bottom:1px solid var(--linie);
  color:var(--weiss);font:400 19px var(--text)}
.feld textarea{min-height:120px;resize:vertical}
.feld select option{background:var(--tief);color:var(--weiss)}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:0;
  border-bottom-color:var(--signal)}
.paar{display:grid;gap:1.2rem}
@media(min-width:680px){.paar{grid-template-columns:1fr 1fr}}
fieldset,legend{border:0;padding:0;margin:0}
legend{display:block;width:100%}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.schritt{display:none}
.schritt.an{display:block}
html.nojs .schritt{display:block;margin-bottom:2.8rem}
html.nojs .fortschritt{display:none}
.frage{font-family:var(--kopf);font-weight:800;font-size:clamp(28px,4.6vw,54px);
  line-height:.98;letter-spacing:-.03em;margin-bottom:var(--t3);max-width:17ch;
  text-wrap:balance}
.fortschritt{display:flex;align-items:center;gap:1rem;margin-bottom:var(--t4);
  font-family:var(--text);font-weight:500;font-size:11px;letter-spacing:.12em;color:var(--neben)}
.fortschritt__balken{flex:1;height:2px;background:var(--linie)}
.fortschritt__fuell{display:block;height:100%;width:0;background:var(--limette);
  transition:width .5s var(--weich)}
.wahlen{display:grid;gap:10px}
@media(min-width:680px){.wahlen{grid-template-columns:repeat(3,1fr)}}
.wahl input{position:absolute;opacity:0;width:0;height:0}
.wahl span{display:flex;flex-direction:column;gap:.35rem;padding:1.2rem;min-height:96px;
  border:1px solid var(--linie);cursor:pointer;
  transition:border-color .25s,background .25s,transform .25s var(--weich)}
.wahl span:hover{border-color:var(--limette);transform:translateY(-2px)}
.wahl b{font-family:var(--kopf);font-weight:800;font-size:19px;letter-spacing:-.02em}
.wahl i{font-style:normal;font-size:13px;color:var(--neben)}
.wahl input:checked+span{background:var(--limette);border-color:var(--limette);
  color:var(--nacht)}
.wahl input:checked+span i{color:color-mix(in srgb,var(--nacht) 72%,transparent)}
.wahl input:focus-visible+span{outline:2px solid var(--limette);outline-offset:3px}
.form__fuss{display:flex;gap:.8rem;margin-top:var(--t4);flex-wrap:wrap;align-items:center}

/* ---------------------------------------------------------------- Stufen */
.stufen{display:grid;gap:var(--t2);margin:var(--t4) 0}
@media(min-width:720px){.stufen{grid-template-columns:repeat(3,1fr)}}
.stufe{background:var(--tief);border:1px solid var(--linie);border-radius:20px;
  padding:clamp(22px,2.8vw,32px);display:flex;flex-direction:column;
  transition:transform .3s var(--weich),box-shadow .3s var(--weich),border-color .3s}
.stufe:hover{transform:translateY(-4px);border-color:var(--limette);
  box-shadow:0 18px 44px rgba(0,0,0,.16)}
.stufe__bild{margin-top:auto;padding-top:1.6rem;display:flex;
  align-items:flex-end;justify-content:center}
/* Runde 14: Emoji statt Produktfoto. Eigene Schriftfamilie, Inter hat keine
   Emoji und faellt sonst auf irgendetwas zurueck. line-height 1 und flex-end
   am Elternteil setzen alle drei auf dieselbe Standlinie. */
.stufe__zeichen{display:block;line-height:1;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  transition:transform .3s var(--weich)}
.stufe:hover .stufe__zeichen{transform:translateY(-3px) rotate(-4deg)}
.stufe__n{font-family:var(--text);font-weight:600;font-size:11px;letter-spacing:.14em;color:var(--signal)}
.stufe__w{font-family:var(--kopf);font-weight:800;font-size:clamp(26px,3.2vw,38px);
  margin-top:.4rem;letter-spacing:-.03em}
.stufe__p{font-size:14px;color:var(--neben);margin-top:.6rem}
.stufe__zus{font-size:12px;color:var(--neben);opacity:.72;margin-top:.3rem}


/* ---------------------------------------------------------------- Lichtkarte */
/* Die gerahmte Karte mit Mondlicht dahinter. Runde 7 hatte sie nur als
   Schluss der Startseite (.schluss__karte). Seit Runde 8 traegt sie auch die
   Stufen und das Einreichen auf /clipper/, deshalb ein gemeinsamer Name.
   Vorher war der Schluss ein vollflaechig schwarzes Blatt: dunkel kommt auf
   der Seite schon dreimal vor, und eine Einladung soll offen wirken. */
.lichtkarte{position:relative;overflow:hidden;isolation:isolate;
  border:1px solid var(--linie);border-radius:clamp(22px,3.2vw,42px);background:var(--tief);
  padding:clamp(40px,6vw,88px) clamp(24px,5vw,72px)}
.lichtkarte::before{content:"";position:absolute;left:50%;bottom:-46%;z-index:-1;
  width:min(128%,960px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(162,206,42,.30) 0%,rgba(162,206,42,.11) 44%,transparent 70%)}
.lichtkarte--mitte{text-align:center;padding:clamp(46px,7.5vw,104px) clamp(24px,5vw,72px)}
.lichtkarte--mitte h2,.lichtkarte--mitte p{margin-inline:auto}
/* Stufen in der Lichtkarte: die Karte ist die Flaeche, die Stufen tragen nur
   noch eine Linie. Karte in Karte war zu viel Rahmen. */
.lichtkarte .stufen{margin:var(--t4) 0 0}
.lichtkarte .stufe{background:transparent;border-color:var(--linie)}
.lichtkarte .stufe:hover{transform:none;box-shadow:none;border-color:var(--limette)}

/* ---------------------------------------------------------------- Signatur */
/* Credit unten LINKS, fest an der Ecke (Runde 13). Links, weil unten rechts
   nach dem Deploy die Einblendung von Netlify sitzt.
   Dunkle Pille wie die Kopfnavigation, damit sie ueber hellen und dunklen
   Blaettern gleich traegt. Zwei Zeilen: das Wort, darunter die Marke.
   Liegt UNTER Navigation (300) und Dialogen (Top Layer), aber ueber dem
   Inhalt. Verschwindet hinter dem Ladeschirm und bei offenem Dialog, sonst
   klebte sie auf dem Pop-up. */
.signatur{position:fixed;right:clamp(12px,2vw,24px);bottom:clamp(12px,2vw,24px);z-index:240;
  display:inline-flex;align-items:center;min-height:44px;padding:11px 16px;
  border-radius:999px;background:rgba(11,11,13,.88);border:1px solid rgba(244,244,240,.14);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-decoration:none;
  transition:border-color .2s,transform .2s}
.signatur img{height:22px;width:auto;display:block;opacity:.9}
.signatur:hover{border-color:var(--limette);transform:translateY(-2px)}
.signatur:hover img{opacity:1}
html.laedt .signatur,html.dialog-offen .signatur{opacity:0;pointer-events:none}
/* Auf schmalen Schirmen nur das Zeichen, der Daumen braucht den Platz. */
@media(max-width:699px){
  .signatur{padding:10px;right:10px;bottom:10px}
  .signatur img{height:24px}
}
@media (prefers-reduced-motion:reduce){.signatur{transition:none}
  .stufe__zeichen{transition:none}
  .stufe:hover .stufe__zeichen{transform:none}}

/* ---------------------------------------------------------------- Kolophon */
.kolophon{margin-top:var(--t5);padding-top:var(--t4);border-top:1px solid var(--linie)}
.kol{display:grid;gap:0;margin:0;max-width:66ch}
.kol__z{display:grid;gap:4px;padding:var(--t2) 0;border-top:1px solid var(--linie)}
@media(min-width:700px){.kol__z{grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:var(--t2)}}
.kol dt{font-family:var(--text);font-weight:600;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--neben);margin:0}
.kol dd{margin:0;font-size:15px;color:var(--neben);line-height:1.65}
.kol dd a{color:var(--weiss);text-decoration:underline;
  text-decoration-color:var(--limette);text-underline-offset:3px}

/* Datenschutzhinweis am Formular */
.dshinweis{font-size:13px;color:var(--neben);margin:var(--t2) 0 0;max-width:58ch}
/* Runde 22: Altersbestaetigung im Clip-Formular */
.haken{display:flex;gap:12px;align-items:flex-start;margin-top:var(--t3);font-size:15px;cursor:pointer;min-height:44px}
.haken input{width:22px;height:22px;margin:1px 0 0;flex:none;accent-color:var(--limette)}
.dshinweis a{color:var(--weiss);text-decoration:underline;
  text-decoration-color:var(--limette);text-underline-offset:3px}
.ds__offen{font-size:14px;color:var(--neben);margin-top:var(--t1)}

/* ---------------------------------------------------------------- Impressum */
/* Runde 11: das Impressum liegt auf der Seite, nicht mehr bei einem Dienst.
   Fehlende Pflichtangaben stehen sichtbar als offen da, mit Limette markiert.
   Das ist die einzige Stelle, an der ein sichtbarer Platzhalter erwuenscht
   ist: ein still unvollstaendiges Impressum ist abmahnfaehig. */
.imp__warnung{margin:var(--t3) 0 0;padding:var(--t3);border:1px solid var(--limette);
  border-radius:18px;font-size:15px;color:var(--weiss);line-height:1.6;max-width:62ch}
.imp__warnung a{color:var(--weiss);text-decoration:underline;
  text-decoration-color:var(--limette);text-underline-offset:3px}
.imp{margin:var(--t4) 0 0;display:grid;gap:0;max-width:66ch}
.imp__z{display:grid;gap:4px;padding:var(--t2) 0;border-top:1px solid var(--linie)}
@media(min-width:700px){.imp__z{grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:var(--t2);align-items:baseline}}
.imp dt{font-family:var(--text);font-weight:600;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--neben);margin:0}
.imp dd{margin:0;font-size:16px;color:var(--weiss);line-height:1.6}
.imp dd a{color:var(--weiss);text-decoration:underline;
  text-decoration-color:var(--limette);text-underline-offset:3px}
.imp__z--offen dd{color:var(--neben);font-size:14.5px}
.imp__offen{display:inline-block;font-family:var(--text);font-weight:600;font-size:11px;
  letter-spacing:.06em;color:var(--nacht);background:var(--limette);
  padding:3px 9px;border-radius:999px;margin-right:6px}

/* ---------------------------------------------------------------- Wege (Clipper) */
.wege{display:grid;gap:var(--t2);margin-top:var(--t4)}
@media(min-width:760px){.wege{grid-template-columns:1fr 1fr}}
.weg{display:flex;flex-direction:column;gap:var(--t2);padding:var(--t3);
  border:1px solid var(--linie);border-radius:20px;background:var(--tief)}
.weg__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:var(--t2);flex-wrap:wrap}
.weg__kopf h3{font-size:clamp(21px,2.2vw,27px)}
.weg__aufwand{font-family:var(--text);font-weight:600;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--nacht);background:var(--limette);
  padding:5px 11px;border-radius:999px;white-space:nowrap}
.weg p{font-size:15px;color:var(--neben);margin:0}
.weg ol{margin:0;padding-left:1.3em;font-size:14px;color:var(--neben);line-height:1.7}
.weg ol li::marker{color:var(--signal);font-weight:600}
.weg__auf{margin-top:auto;padding-top:var(--t1)}
.wege__vod{margin-top:var(--t3);font-size:14px}
/* Pop-up je Weg (Runde 10). Der dialog selbst ist transparent und ohne
   Padding, der Kasten ist .wegdialog__in: so trifft der Klick daneben genau
   den Backdrop (ev.target === dialog) und nie den Rand des Kastens. Ohne
   JavaScript liegt der Dialog als Block unter den Karten (html.nojs). */
.wegdialog{padding:0;border:0;background:transparent;color:var(--weiss);
  width:min(720px,calc(100% - 2*var(--rand)));max-width:none;
  max-height:calc(100dvh - 2*var(--t3));margin:auto;overflow:visible}
.wegdialog::backdrop{background:rgba(11,11,13,.72)}
.wegdialog__in{background:var(--grund);color:var(--weiss);border:1px solid var(--linie);
  border-radius:24px;padding:var(--t3);max-height:calc(100dvh - 2*var(--t3));overflow:auto;
  overscroll-behavior:contain}
.wegdialog__kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--t2);
  margin-bottom:var(--t3)}
.wegdialog__weg{font-family:var(--text);font-weight:600;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--limette);margin:0 0 .5em}
.wegdialog__kopf h3{font-size:clamp(22px,2.4vw,30px);line-height:1.05;margin:0}
.wegdialog__zu{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--linie);
  background:transparent;color:var(--weiss);display:grid;place-items:center;cursor:pointer}
.wegdialog__zu svg{width:18px;height:18px}
.wegdialog__zu:hover{border-color:var(--limette);color:var(--limette)}
.wegdialog .fortschritt{margin-bottom:var(--t3)}
.wegdialog__nr{font-family:var(--text);font-weight:600;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--neben);margin:0 0 .6em}
.wegdialog__titel{font-size:clamp(20px,2vw,26px);margin:0 0 .5em;outline:0}
.wegdialog__text{font-size:16px;color:var(--neben);margin:0 0 var(--t2);max-width:58ch}
.wegdialog__werkzeug{font-size:14px;margin:0 0 var(--t2);padding:10px 14px;border-radius:12px;
  background:var(--tief);border:1px solid var(--linie)}
.wegdialog__werkzeug span{display:block;font-family:var(--text);font-weight:600;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--neben);margin-bottom:2px}
.wegdialog__vod{font-size:14px;margin:0 0 var(--t2);padding:10px 14px;border-radius:12px;
  border:1px solid var(--limette);color:var(--weiss)}
.wegdialog__liste{margin:0;padding-left:1.4em;font-size:15px;line-height:1.65;color:var(--weiss)}
.wegdialog__liste li{margin-bottom:.55em}
.wegdialog__liste li::marker{color:var(--limette);font-weight:600}
.wegdialog__ende{margin:var(--t3) 0 0}
.wegdialog .schritt.an{display:block}
html.dialog-offen .zeiger{display:none}
html.dialog-offen{overflow:hidden}
@media(max-width:699px){
  .wegdialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0}
  .wegdialog__in{border-radius:0;border:0;min-height:100dvh;max-height:100dvh;padding:var(--t3) var(--rand) 0}
  /* Zurueck und Weiter kleben unten, sonst liegen sie unter dem Falz */
  .wegdialog .form__fuss{position:sticky;bottom:0;margin:var(--t2) calc(-1*var(--rand)) 0;
    padding:var(--t2) var(--rand);background:var(--grund);border-top:1px solid var(--linie)}
}
/* Ohne JavaScript: alle vier Anleitungen stehen offen unter den Karten. */
html.nojs .wegdialog{display:block;position:static;width:auto;max-height:none;margin:var(--t3) 0 0}
html.nojs .wegdialog__in{max-height:none;overflow:visible}
html.nojs .wegdialog .schritt{display:block;margin-bottom:var(--t3)}
/* Muster (Clipper): sechs bis acht Regeln mit Beispiel */
.zweispalt{display:grid;gap:var(--t4);align-items:start}
@media(min-width:900px){.zweispalt{grid-template-columns:1fr 1fr}}
.zweispalt p{font-size:15px;color:var(--neben)}
.zweispalt h3{margin-bottom:var(--t2)}

/* ---------------------------------------------------------------- Woche (Sendeplan) */
/* Sieben Kaestchen, die Sendetage in Limette mit Startzeit. Gleiche Quelle
   wie der interne Generator (inhalt.SENDEPLAN). */
.woche{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--t1);margin-top:var(--t3);
  max-width:640px}
.woche__tag{display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:12px 4px 10px;border:1px solid var(--linie);border-radius:14px;
  font-family:var(--text);font-weight:600;font-size:13px;color:var(--neben);min-height:64px;
  justify-content:center}
.woche__tag i{font-style:normal;font-size:10.5px;letter-spacing:.06em;font-weight:500;
  white-space:nowrap}
.woche__tag.an{background:var(--limette);border-color:var(--limette);color:var(--nacht)}
.woche__satz{margin:var(--t2) 0 0;font-size:14px;color:var(--neben);max-width:44ch}

/* ---------------------------------------------------------------- Fuss */
.anfrage__kopf{display:grid;gap:var(--t4);align-items:center;
  margin-bottom:var(--t4)}
@media(min-width:900px){.anfrage__kopf{grid-template-columns:1.2fr .8fr}}
.anfrage__bild{overflow:hidden;border-radius:22px;background:var(--tief)}
.anfrage__bild img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}

/* Der Fuss setzte nur Grund und Schriftfarbe fest, die Rollen erbte er aus
   :root, also aus dem HELLEN Satz. Folge: --weiss war #0B0B0D, das Logo also
   schwarz auf schwarzem Grund, --signal ebenso, der Hover damit unsichtbar,
   und --neben lag bei 2,6:1. Der Fuss braucht den dunklen Rollensatz. */
.fuss{--grund:#0B0B0D;--tief:#16161A;--linie:#2A2C31;
  --weiss:#F4F4F0;--neben:#949AA1;--signal:#A2CE2A;
  background:var(--grund);color:var(--weiss);padding:var(--t5) 0 var(--t3);
  border-top:1px solid var(--linie)}
.fuss__oben{display:grid;gap:var(--t4);padding-bottom:var(--t4);
  border-bottom:1px solid var(--linie)}
@media(min-width:800px){.fuss__oben{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.fuss__marke{color:var(--weiss)}
.fuss__marke svg{height:26px;width:auto;margin-bottom:1rem}
.fuss h4{font-family:var(--text);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--neben);margin:0 0 .8rem}
.fuss ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.fuss a{text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;
  min-height:44px;color:var(--neben);transition:color .2s}
.fuss a:hover{color:var(--signal)}
.fuss a svg{width:15px;height:15px;fill:currentColor}
/* Runde 20: Intern als Knopf im Fuss, die Regel .fuss a wuerde ihn sonst zur Textzeile machen. */
.fuss a.fuss__intern{margin-top:var(--t2);padding:0 20px;font-size:14px;color:var(--weiss);justify-content:center}
.fuss a.fuss__intern:hover{color:var(--nacht);background:var(--limette);border-color:var(--limette)}
.fuss__unten{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-top:1.5rem;font-family:var(--text);font-weight:500;font-size:11px;letter-spacing:.08em;
  color:var(--neben)}

.auf{opacity:1}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .auf{opacity:1!important;transform:none!important}
  .zeiger{display:none}
  [data-cursor]{cursor:auto}
  .ladeschirm{display:none}
  .grinder--hero .grinder__kipp{animation:none;transform:rotateX(64deg) rotateZ(-8deg)}
  .grinder--hero .grinder__deckel{animation:none;transform:translateZ(42px)}
  /* Die Phase steht sofort fertig da, sie zieht nur nicht auf. */
  .wand{filter:grayscale(.3) contrast(1.05)}
  .clip video{display:none}
  .clip__marke em,.clip__marke i{opacity:1!important;transform:none!important}
}