/* ============================================================
   01 · Typografie & Text
   ============================================================ */
code{font:500 .86em var(--mono);padding:1px 5px;border-radius:5px;background:var(--linie)}

/* Kaskade */
.t-kaskade{margin:0;text-align:center;font:650 clamp(2rem,4vw,3rem)/1.05 var(--sans);letter-spacing:-.045em}
.t-kaskade .wort{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.t-kaskade .b{display:inline-block;transform:translateY(110%) rotate(10deg);transform-origin:0 100%;transition:transform .9s var(--sanft);transition-delay:calc(var(--i) * 32ms)}
.t-kaskade.an .b{transform:none}

/* Scramble */
.t-scramble-box{text-align:center}
.t-scramble{margin:0;font:600 clamp(1.5rem,3vw,2.2rem)/1.2 var(--mono);letter-spacing:-.03em}
.t-scramble-zeile{margin:16px 0 0;font-size:14px;color:var(--a2);min-height:1.4em}
.dud{color:var(--akzent);opacity:.8}

/* Schreibmaschine */
.t-tipp{margin:0;font:600 clamp(1.7rem,3.4vw,2.5rem)/1.2 var(--sans);letter-spacing:-.04em}
.t-tipp-wort{background:linear-gradient(90deg,var(--a2),var(--akzent));-webkit-background-clip:text;background-clip:text;color:transparent}
.t-caret{display:inline-block;width:3px;height:1em;margin-left:3px;vertical-align:-.12em;background:var(--akzent);border-radius:2px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}

/* Wort-Rotation */
.t-rotate{margin:0;font:600 clamp(1.6rem,3.2vw,2.4rem)/1.2 var(--sans);letter-spacing:-.04em;text-align:center}
.t-slot{display:inline-grid;vertical-align:bottom;height:1.2em;overflow:hidden;transition:width .55s var(--sanft);text-align:left}
.t-slot span{grid-area:1/1;transform:translateY(110%);opacity:0;transition:transform .6s var(--sanft),opacity .4s;white-space:nowrap;color:var(--akzent)}
.t-slot span.jetzt{transform:none;opacity:1}
.t-slot span.raus{transform:translateY(-110%);opacity:0}

/* Verlauf & Glanz */
.t-verlauf{margin:0;font:700 clamp(2.2rem,5vw,3.6rem)/1 var(--sans);letter-spacing:-.05em;
  background:linear-gradient(90deg,var(--a2),var(--akzent),var(--a3),var(--a4),var(--a2));background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:verlauf 7s linear infinite}
@keyframes verlauf{to{background-position:300% 0}}
.t-glanz{margin:14px 0 0;font-size:17px;font-weight:500;
  background:linear-gradient(110deg,var(--text-3) 38%,var(--text) 50%,var(--text-3) 62%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:glanz 2.8s ease-in-out infinite}
@keyframes glanz{from{background-position:120% 0}to{background-position:-120% 0}}

/* Umriss → Füllung */
.t-umriss{position:relative;margin:0;font:800 clamp(3.5rem,9vw,6rem)/1 var(--sans);letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.5px var(--text-2)}
.t-umriss::before{content:attr(data-text);position:absolute;inset:0;color:var(--akzent);-webkit-text-stroke:0;clip-path:inset(0 100% 0 0);
  transition:clip-path .8s var(--sanft);text-shadow:0 0 40px color-mix(in oklab,var(--akzent) 60%,transparent)}
.t-umriss:hover::before{clip-path:inset(0 0 0 0)}

/* Textmarker */
.t-marker{margin:0;max-width:440px;font:500 clamp(1.3rem,2.4vw,1.75rem)/1.45 var(--sans);letter-spacing:-.02em}
.t-marker mark{color:inherit;background:linear-gradient(transparent 58%,color-mix(in oklab,var(--a4) 60%,transparent) 58%,color-mix(in oklab,var(--a4) 60%,transparent) 92%,transparent 92%) no-repeat;
  background-size:0% 100%;transition:background-size 1.1s var(--sanft);padding:0 .1em;border-radius:3px}
.t-marker mark:nth-of-type(2){transition-delay:.35s}.t-marker mark:nth-of-type(3){transition-delay:.7s}
.t-marker.an mark{background-size:100% 100%}
[data-thema="hell"] .t-marker mark{background-image:linear-gradient(transparent 58%,color-mix(in oklab,var(--akzent) 30%,transparent) 58%,color-mix(in oklab,var(--akzent) 30%,transparent) 92%,transparent 92%)}

/* Variable Schrift */
.t-variabel{margin:0;font:200 clamp(2.4rem,6vw,4.4rem)/1 var(--sans);letter-spacing:-.03em;user-select:none;white-space:nowrap}
.t-variabel .b{display:inline-block;transition:font-weight .12s linear,color .2s}

/* Glitch */
.t-glitch{position:relative;margin:0;font:800 clamp(3rem,8vw,5rem)/1 var(--sans);letter-spacing:.02em;color:#fff}
.t-glitch::before,.t-glitch::after{content:attr(data-text);position:absolute;inset:0;mix-blend-mode:screen}
.t-glitch::before{color:#00e5ff;animation:glitch-a 2.6s infinite steps(1)}
.t-glitch::after{color:#ff2bd6;animation:glitch-b 2.2s infinite steps(1)}
@keyframes glitch-a{0%{clip-path:inset(0 0 88% 0);transform:translate(-3px,0)}8%{clip-path:inset(42% 0 38% 0);transform:translate(-6px,1px)}16%{clip-path:inset(78% 0 6% 0);transform:translate(4px,0)}24%{clip-path:inset(12% 0 70% 0);transform:translate(-2px,-1px)}32%,100%{clip-path:inset(0 0 0 0);transform:translate(-1.5px,0)}}
@keyframes glitch-b{0%{clip-path:inset(70% 0 10% 0);transform:translate(3px,0)}10%{clip-path:inset(5% 0 80% 0);transform:translate(6px,-1px)}20%{clip-path:inset(50% 0 30% 0);transform:translate(-4px,1px)}30%,100%{clip-path:inset(0 0 0 0);transform:translate(1.5px,0)}}

/* Welle */
.t-welle{margin:0;font:650 clamp(2rem,4.5vw,3.2rem)/1 var(--sans);letter-spacing:-.04em;user-select:none}
.t-welle .b{display:inline-block}
.t-welle.los .b{animation:huepf .7s var(--feder) both;animation-delay:calc(var(--i) * 40ms)}
@keyframes huepf{0%,100%{transform:none}40%{transform:translateY(-.38em) rotate(-8deg);color:var(--a2)}}

/* Nebel */
.t-nebel{margin:0;max-width:440px;text-align:center;font:400 clamp(1.4rem,2.6vw,1.9rem)/1.35 var(--serif)}
.t-nebel .w{display:inline-block;opacity:0;filter:blur(12px);transform:translateY(6px);transition:opacity .9s,filter .9s,transform .9s var(--sanft);transition-delay:calc(var(--i) * 85ms)}
.t-nebel.an .w{opacity:1;filter:none;transform:none}

/* Neon */
.t-neon{margin:0;font:400 clamp(3rem,7vw,4.6rem)/1 var(--serif);font-style:italic;color:#fff0fb;
  text-shadow:0 0 4px #fff,0 0 12px #ff4fd8,0 0 28px #ff4fd8,0 0 60px #ff1fb4,0 0 90px #ff1fb4}
.t-neon span{color:#eafcff;text-shadow:0 0 4px #fff,0 0 12px #22d3ee,0 0 28px #22d3ee,0 0 60px #0891b2;animation:flackern 5s infinite}
@keyframes flackern{0%,18%,22%,25%,53%,57%,100%{opacity:1}20%,24%,55%{opacity:.25;text-shadow:none}}

/* Kreistext */
.t-kreis{position:relative;width:200px;height:200px;user-select:none}
.t-kreis svg{width:100%;height:100%;overflow:visible}
.t-kreis text{font:600 13px var(--mono);letter-spacing:.18em;fill:var(--text)}
.t-kreis-mitte{position:absolute;inset:0;display:grid;place-items:center;font-size:44px;color:var(--akzent)}
.t-kreis::before{content:"";position:absolute;inset:44px;border-radius:50%;background:var(--akzent-zart);box-shadow:inset 0 0 0 1px var(--linie-2)}

/* Odometer */
.t-odo{display:flex;align-items:flex-end;font:300 clamp(3rem,8vw,5rem)/1 var(--sans);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.odo-ziffer{display:inline-block;height:1em;overflow:hidden}
.odo-streifen{display:flex;flex-direction:column;transition:transform 1.6s var(--sanft)}
.odo-streifen span{height:1em;line-height:1em}
.odo-trenner{opacity:.4}

/* Würfelwort */
.t-wuerfel{margin:0;font:600 clamp(1.6rem,3.2vw,2.3rem)/1.2 var(--sans);letter-spacing:-.04em;perspective:700px}
.wuerfel{--h:.62em;display:inline-block;position:relative;height:1.24em;width:var(--breite,5em);vertical-align:bottom;transform-style:preserve-3d;
  transform:translateZ(calc(var(--h) * -1)) rotateX(var(--rx,0deg));transition:transform .9s var(--feder)}
.wuerfel .seite{position:absolute;inset:0;display:flex;align-items:center;white-space:nowrap;backface-visibility:hidden;color:var(--akzent);
  background:var(--bg-2)}
.wuerfel .seite:nth-child(1){transform:rotateX(0deg) translateZ(var(--h))}
.wuerfel .seite:nth-child(2){transform:rotateX(-90deg) translateZ(var(--h));color:var(--a2)}
.wuerfel .seite:nth-child(3){transform:rotateX(-180deg) translateZ(var(--h));color:var(--a3)}
.wuerfel .seite:nth-child(4){transform:rotateX(-270deg) translateZ(var(--h));color:var(--a4)}
[data-thema="hell"] .wuerfel .seite:nth-child(4){color:#65a30d}

/* Lebendige Füllung */
.t-video{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#000}
.t-video canvas{position:absolute;inset:0;width:100%;height:100%}
.t-video-maske{position:absolute;inset:0;display:grid;place-items:center;background:#000;color:#fff;mix-blend-mode:multiply;
  font:900 clamp(5rem,15vw,9rem)/1 var(--sans);letter-spacing:-.06em}
[data-thema="hell"] .t-video{background:#fff}
[data-thema="hell"] .t-video-maske{background:#fff;color:#000;mix-blend-mode:screen}

/* ASCII */
.t-ascii{margin:0;font:600 9px/1 var(--mono);letter-spacing:.02em;color:#a5f3fc;text-shadow:0 0 8px rgba(34,211,238,.45);white-space:pre}
@media (max-width:420px){.t-ascii{font-size:6.5px}}

/* Geteilt */
.t-geteilt{position:relative;margin:0;font:900 clamp(3.5rem,9vw,6rem)/1 var(--sans);letter-spacing:-.04em;color:transparent;user-select:none}
.t-geteilt::before,.t-geteilt::after{content:attr(data-text);position:absolute;inset:0;color:var(--text);transition:transform .6s var(--feder)}
.t-geteilt::before{clip-path:inset(0 0 50% 0)}
.t-geteilt::after{clip-path:inset(50% 0 0 0);color:var(--akzent)}
.t-geteilt:hover::before{transform:translateX(-.12em) translateY(-.04em)}
.t-geteilt:hover::after{transform:translateX(.12em) translateY(.04em)}