/* ══════════════════════════════════════════════════════════════════════════
   KRYPTIK — ZUSAMMENBAU
   Teil 1 = Entwurf C (Neon-Noir-Raum) als Hero + Profil
   Teil 2 = Entwurf B (Manga-Doppelseiten) im Anschluss
   Dazwischen die Übergangszone „Das Licht wird Tusche".

   Die Gestaltung beider Entwürfe ist unverändert. Zusammengeführt wurde
   ausschließlich das Technische:

   1 · NAMENSRÄUME. Beide Entwürfe hatten eigene :root-Variablen und
       gleichnamige Klassen (.hero, .panel, .caption, .wordmark, .glow).
       Jede Variable und jede Klasse trägt jetzt ein Vorzeichen:
       --nr-… / .nr-…  = Noir      ·  --mg-… / .mg-…  = Manga
       Global bleiben nur die drei Scroll-Regler --p, --pb, --pm sowie
       .rv/.is-in/.sr — die sind absichtlich geteilt.
   2 · EIN Einblende-Mechanismus statt zwei. Sichtbar ist der Grundzustand;
       der versteckte Startzustand hängt an html.anim (siehe Abschnitt 9).
   3 · STAPELUNG. .noir (z-index 0) und .manga (z-index 1) sind zwei
       getrennte Stapelkontexte. Alle Innenwerte beider Entwürfe wirken
       deshalb nur im eigenen Teil und können sich nicht mehr kreuzen.
   4 · MASKE UND SCHATTEN NIE AUF DEMSELBEN ELEMENT. mask-clip kappt
       drop-shadow an der Elementkante — genau daraus entstehen die
       billigen Kästen. In der Übergangszone trägt deshalb immer die
       Hülle die Maske und das Kind den Filter.
   5 · Verlaufsmasken stehen auf exakt 0/90/180deg. Ein abweichender
       Winkel lässt die Iso-Linie wandern und erzeugt eine sichtbare Kante.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --p:  0;      /* Licht im Noir-Raum, 0…1, per JS geglättet             */
  --pb: 0;      /* Flächen-Übergang in der Zone: Punkte, Glut, Naht      */
  --pf: 0;      /* Falz: 0 wenn die erste Doppelseite die Fensterunter-  */
                /* kante erreicht, 1 wenn sie auf 45 % Höhe steht.       */
}

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

html{
  background:#04020a;
  scroll-behavior:smooth;
}
body{
  margin:0;
  background:#04020a;
  color:#efe6f7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Absichtlich KEIN overflow auf html/body: das würde einen Scroll-Container
   erzeugen und die klebende Bühne des Noir-Teils aushebeln. Der Querlauf
   wird dort abgefangen, wo er entsteht — an den beiden Teil-Hüllen. */

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,figure,dl{ margin:0; }

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}


/* ══════════════════════════════════════════════════════════════════════════
   TEIL 1 · NEON-NOIR
   Grundsatz (unverändert aus Entwurf C): Es gibt keine Kästen und keine
   Rahmen. Der Raum entsteht aus Licht, Dunkelheit, Nebel und Spiegelung.
   Jede „Kante" ist ein Leuchten. Die Lichtrichtung ist überall dieselbe.
   ══════════════════════════════════════════════════════════════════════ */

.noir{
  position:relative;
  z-index:0;
  --nr-vp: 100svh;                   /* Höhe der Bühne = ein Fenster       */

  --nr-hz: 73svh;                    /* Horizont — Wand trifft Asphalt     */
  --nr-hzp: calc(var(--nr-hz) + var(--p) * -3.4svh);

  --nr-bh: 88svh;                                    /* Höhe der Klinge    */
  --nr-bw: calc(var(--nr-bh) * 900 / 1144);          /* Breite folgt Maß   */
  --nr-bx: 48%;                                      /* linke Kante        */
  --nr-bc: calc(var(--nr-bx) + var(--nr-bw) / 2);    /* Mitte              */

  --nr-lila:       #a855f7;
  --nr-lila-hell:  #cf93ff;
  --nr-lila-blass: #e9c9ff;
  --nr-kern:       #fffaff;          /* weißglühender Kern                 */

  --nr-emblem: url("../img/kryptik-symbol-white.webp");
  --nr-wort:   url("../img/kryptik-wordmark-only.webp");

  /* SELBST GEHOSTET, damit die Seite auf JEDEM Rechner gleich aussieht.
     Vorher standen hier Windows-Systemschnitte an erster Stelle — auf einem
     Mac oder Linux-Rechner fiel die Seite auf Ersatzschriften zurück und sah
     anders aus. Die alten Namen bleiben als Rückfall dahinter stehen.
     --nr-masse   Anton                 (war Haettenschweiler)  — Plakat-Wucht
     --nr-technik Barlow Semi Condensed (war Bahnschrift SemiCond) — DIN-Signaletik
     --nr-mono    JetBrains Mono        (war Cascadia Mono)      — technische Marken
     Die @font-face-Regeln stehen in assets/css/fonts.css.                */
  --nr-masse:   "Anton", "Haettenschweiler", "Franklin Gothic Medium Cond", "Arial Narrow", Impact, sans-serif;
  --nr-technik: "Barlow Semi Condensed", "Bahnschrift SemiCondensed", "Bahnschrift", "Franklin Gothic Medium Cond", "Arial Narrow", sans-serif;
  --nr-mono:    "JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;

  font-family: var(--nr-mono);
}

/* ── Die Bühne. Klebt, solange der Noir-Teil läuft, und scrollt danach von
      selbst weg. Das ersetzt das feste `position:fixed` aus Entwurf C: ein
      festes Element hätte den Manga-Teil mit Vignette, Scrim und Filmkorn
      überzogen. Sichtbar bleibt es identisch — der Inhalt wandert hindurch,
      nicht der Raum. ── */
.nr-room{
  position:sticky; top:0;
  height:var(--nr-vp);
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  translate: 0 calc(var(--p) * -2.4svh);            /* Kamera senkt sich   */
  /* Der Raum erlischt am FALZ, nicht in der Zone. Gemessen am 09.08.: hing
     das Ausblenden an --pb, war der Raum genau in dem Moment weg, in dem die
     erste Doppelseite ins Bild kam — zwischen erloschener Lichtnaht und
     erstem Panel stand dann ein knapp 600 px hohes leeres Feld, und der
     Übergang zerfiel in zwei Teile. An --pb hängt jetzt nur noch die Fläche;
     das Erlöschen läuft über --pf und damit ÜBER die Ankunft der Doppelseite
     hinweg: für einen Moment sind Noir-Boden oben und Tuschpanel unten
     gleichzeitig im Bild. Das ist die eigentliche Nahtstelle. */
  opacity: calc(1 - var(--pf));
  /* Weiche Unterkante — aber NUR am Falz. Solange --pf auf 0 steht, ist der
     erste Farbstopp voll deckend und der Raum sieht aus wie in Entwurf C;
     wichtig, denn im Hero ist die Unterkante des Raums die Fensterunterkante.
     Ohne diese Maske endet der noch halb sichtbare Raum an der Nahtstelle
     hart. Der Verlauf steht auf exakt 0deg (von unten nach oben): jeder
     andere Winkel lässt die Iso-Linie wandern und erzeugt selbst eine Kante.
     Maske und Filter liegen nie auf demselben Element — .nr-room trägt keinen
     Filter, die Filter sitzen auf den Kindern. */
  -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,calc(1 - var(--pf))) 0%, #000 26%);
          mask-image: linear-gradient(0deg, rgba(0,0,0,calc(1 - var(--pf))) 0%, #000 26%);
}

/* Der Inhalt wird über die Bühne gezogen. Der negative Rand ist der ganze
   Trick — ohne ihn stünde der Inhalt unter dem Raum statt darin. */
.noir__body{
  position:relative;
  z-index:1;
  margin-top: calc(var(--nr-vp) * -1);
}

/* ── Die Luft. Der Werteaufbau trägt das ganze Bild:
      oben fast schwarz, am Horizont aufgeladen, unten wieder schwarz. ── */
.nr-air{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    #04020a 0%, #06030d 18%, #0a0618 34%, #140a28 48%, #23104a 58%,
    #331868 65%, #1d0c3c 71%, #0b0518 82%, #050209 100%);
}

/* ── Kaltes Gegenlicht links: lässt das Lila überhaupt erst lila wirken ── */
.nr-kalt{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(61,92,255,.13) 0%, rgba(61,92,255,.04) 14%, transparent 30%),
    radial-gradient(50vw 40svh at 2% 12%, rgba(70,110,255,.10), transparent 72%);
  mix-blend-mode:screen;
}

/* ── Der Dunst über dem Boden. Trägt fast die ganze Raumwirkung. ── */
.nr-haze{
  position:absolute; inset:0;
  background:radial-gradient(72svh 34svh at var(--nr-bc) var(--nr-hzp),
    rgba(233,201,255,.34) 0%, rgba(168,85,247,.20) 30%,
    rgba(90,30,170,.10) 56%, transparent 76%);
  filter:blur(16px);
  opacity: calc(.82 + var(--p) * .18);
}

/* ── Ferne Neonröhren an der Wand: unscharf, weit hinten ── */
.nr-tube{
  position:absolute; width:6px; border-radius:99px;
  filter:blur(24px);
  mix-blend-mode:screen;
  background:linear-gradient(180deg, transparent, var(--nr-lila) 24%, var(--nr-lila-blass) 62%, transparent);
}
.nr-tube--l{
  left:13%; top:12svh; height:46svh;
  opacity: calc(.42 - var(--p) * .28);
  rotate:2.5deg;
  translate: 0 calc(var(--p) * 5svh);
}
.nr-tube--r{
  left:93%; top:22svh; height:34svh;
  opacity: calc(.3 - var(--p) * .2);
  rotate:-3deg;
  translate: 0 calc(var(--p) * 7svh);
}

/* ── Volumenlicht: schmale, gesättigte Strahlen. Nicht grau werden lassen. ── */
.nr-shaft{ position:absolute; mix-blend-mode:screen; filter:blur(38px); }
.nr-shaft--a{
  top:-30svh; left:2%; width:17vw; height:118svh;
  rotate:-19deg;
  translate: calc(var(--p) * 3vw) 0;
  background:linear-gradient(97deg, transparent 0%, rgba(150,72,240,.13) 32%,
    rgba(214,168,255,.20) 50%, rgba(140,60,235,.10) 70%, transparent 100%);
  opacity: calc(.9 - var(--p) * .4);
}
.nr-shaft--b{
  top:-24svh; left:62%; width:12vw; height:112svh;
  rotate:-12deg;
  translate: calc(var(--p) * -2vw) 0;
  background:linear-gradient(95deg, transparent 0%, rgba(90,110,255,.10) 42%,
    rgba(207,147,255,.13) 60%, transparent 100%);
  opacity: calc(.72 - var(--p) * .34);
}

/* ── DIE KANTE. Eine Linie, die den ganzen Raum erklärt.
      Kein Rahmen — ein Leuchten mit Kern und Abstrahlung.

      ÜBERGANG: In der Zone legt sich dieselbe Linie um -2,2° schräg — das
      ist der Winkel, in dem die ersten Manga-Panels geschnitten sind — und
      wechselt das Material. nr-tusche liegt pixelgenau darüber (gleiche
      Kanten, gleiche Drehung) und wird gegen sie eingeblendet. Deswegen
      entsteht keine zweite, versetzte Linie und nichts überlappt. ── */
.nr-horizon, .nr-tusche{
  position:absolute; left:-6vw; right:-6vw;
  top: var(--nr-hzp);
  rotate: calc(var(--pb) * -2.2deg);
}
.nr-horizon{
  height:2px;
  /* Der helle Kern liegt UNTER der Klinge, nicht in der Bildmitte — dort
     steht die Lichtquelle. */
  background:linear-gradient(90deg,
    transparent 0%, rgba(140,60,220,.10) 12%, rgba(186,120,250,.46) 40%,
    rgba(226,190,255,.92) 62%, var(--nr-kern) 72%, rgba(207,147,255,.60) 84%,
    rgba(150,70,225,.14) 94%, transparent 100%);
  box-shadow:
    0 0 6px   rgba(233,201,255,.85),
    0 0 24px  rgba(168,85,247,.55),
    0 0 76px  rgba(122,40,210,.34),
    0 0 190px rgba(80,22,150,.22);
  opacity: calc(1 - var(--pb));
}
/* Dieselbe Linie in Tusche: 1,7 px Papierweiß — exakt die Konturstärke der
   Manga-Panelränder in Teil 2. Kein Leuchten mehr, nur Strich. */
.nr-tusche{
  height:1.7px;
  background:linear-gradient(90deg,
    transparent 0%, rgba(242,237,251,.28) 9%, rgba(242,237,251,.86) 34%,
    #f2edfb 58%, #f2edfb 74%, rgba(242,237,251,.62) 88%, transparent 100%);
  opacity: var(--pb);
}

/* ── Nasser Asphalt unter der Kante. Fällt schnell in Schwarz ab. ── */
.nr-floor{
  position:absolute; left:0; right:0;
  top: var(--nr-hzp);
  bottom:-12svh;
  background:
    /* Seitlicher Abfall: ohne ihn zieht sich die helle Kante als
       „Regalbrett" über die ganze Breite. */
    linear-gradient(90deg,
      rgba(3,1,8,.90) 0%, rgba(3,1,8,.34) 16%, transparent 36%,
      transparent 64%, rgba(3,1,8,.38) 84%, rgba(3,1,8,.90) 100%),
    radial-gradient(40vw 15svh at var(--nr-bc) 0%, rgba(233,201,255,.26), transparent 74%),
    /* Viele enge Stopps: mit weiten Sprüngen entsteht eine sichtbare
       Bandkante quer durchs Bild. */
    linear-gradient(180deg,
      rgba(112,52,190,.20) 0%, rgba(78,32,142,.30) 5%, rgba(50,18,98,.44) 11%,
      rgba(32,12,66,.60) 17%, rgba(20,7,42,.74) 24%, rgba(12,4,26,.86) 31%,
      rgba(7,2,16,.94) 39%, rgba(4,1,10,.98) 48%, #020106 60%, #010104 100%);
}
/* Wasserfilm: senkrechte Schlieren, die das Licht ziehen. */
.nr-streaks{
  position:absolute; left:0; right:0;
  top: var(--nr-hzp);
  height:34svh;
  opacity:.42;
  background:
    repeating-linear-gradient(90.4deg,
      transparent 0 17px, rgba(233,201,255,.09) 17px 20px, transparent 20px 53px),
    repeating-linear-gradient(89.5deg,
      transparent 0 29px, rgba(168,85,247,.07) 29px 33px, transparent 33px 91px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.32) 34%, transparent 76%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.32) 34%, transparent 76%);
  filter:blur(3px);
  mix-blend-mode:screen;
}

/* ── DAS KLINGEN-EMBLEM ALS LICHTOBJEKT ───────────────────────────────────
   Kein <img> mit Farbfilter — eine Lichtfläche, aus der die Emblemform
   ausgeschnitten ist. Zwei Masken-Ebenen verschnitten: die Emblemform UND
   eine Alpha-Rampe, die nach oben auf Null läuft. Dadurch löst sich die
   Spitze wirklich im Raum auf, statt als graue Fläche stehenzubleiben. ── */
.nr-blade, .nr-bloom{
  position:absolute;
  left: var(--nr-bx);
  bottom: calc(100% - var(--nr-hzp));
  width: var(--nr-bw);
  height: var(--nr-bh);
  -webkit-mask-image: var(--nr-emblem),
    linear-gradient(180deg, transparent 3%, rgba(0,0,0,.07) 20%,
                    rgba(0,0,0,.30) 38%, rgba(0,0,0,.72) 56%, #000 72%);
          mask-image: var(--nr-emblem),
    linear-gradient(180deg, transparent 3%, rgba(0,0,0,.07) 20%,
                    rgba(0,0,0,.30) 38%, rgba(0,0,0,.72) 56%, #000 72%);
  -webkit-mask-size:100% 100%, 100% 100%;   mask-size:100% 100%, 100% 100%;
  -webkit-mask-repeat:no-repeat, no-repeat; mask-repeat:no-repeat, no-repeat;
  -webkit-mask-composite:source-in;         mask-composite:intersect;
  translate: calc(var(--p) * 9vw) calc(var(--p) * 8svh);
}
.nr-blade{
  z-index:2;
  /* Enger Abfall: die Flügel liegen weit vom Kern und fallen ins Dunkel.
     Licht fällt mit dem Abstand ab, sonst ist es Farbe, nicht Licht. */
  background:radial-gradient(60% 34% at 50% 100%,
    #ffffff 0%, var(--nr-kern) 8%, var(--nr-lila-blass) 22%,
    var(--nr-lila-hell) 37%, var(--nr-lila) 53%,
    #7526cf 68%, #43107f 82%, #220845 93%, #140430 100%);
  opacity: calc(1 - var(--p) * .90);
}
/* Bloom: dieselbe Form, groß verschmiert dahinter = echtes Glühen */
.nr-bloom{
  z-index:1;
  background:radial-gradient(80% 54% at 50% 96%,
    #fbf0ff 0%, var(--nr-lila-hell) 22%, #9333ea 46%, #55159e 68%, transparent 90%);
  filter:blur(58px);
  scale:1.09;
  opacity: calc(.95 - var(--p) * .88);
  mix-blend-mode:screen;
}
/* Auftrittspunkt: ohne ihn schwebt jedes Objekt — mit ihm steht es. */
.nr-contact{
  position:absolute;
  left: var(--nr-bc);
  top: calc(var(--nr-hzp) - 6svh);
  width:30vw; height:10svh;
  margin-left:-15vw;
  background:radial-gradient(closest-side ellipse,
    rgba(255,250,255,.42) 0%, rgba(233,201,255,.22) 30%,
    rgba(168,85,247,.10) 54%, transparent 76%);
  filter:blur(16px);
  mix-blend-mode:screen;
  z-index:3;
  opacity: calc(1 - var(--p) * .85);
  translate: calc(var(--p) * 9vw) 0;
}

/* ── Spiegelung im nassen Asphalt ─────────────────────────────────────────
   Gekippte Kopie + Rippel-Bänder + Ausblendung nach unten. <i> ist exakt so
   hoch wie das Original und wird um seine eigene Mitte gekippt — dadurch
   liegt der FUSS oben am Horizont. ── */
.nr-mirror{
  position:absolute;
  overflow:hidden;
  pointer-events:none;
  z-index:2;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.34) 44%, transparent 90%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.34) 44%, transparent 90%);
}
/* Die Wasserbänder werden AUSMASKIERT, nicht dunkel übermalt: eine dunkle
   Deckschicht mit `multiply` multipliziert gegen Transparenz statt gegen den
   Boden und ergibt einen schwarzen Kasten. */
.nr-mirror .nr-rip{
  position:absolute; inset:0; display:block;
  -webkit-mask-image: linear-gradient(180deg, #000 0 62%, rgba(0,0,0,.20) 62%);
          mask-image: linear-gradient(180deg, #000 0 62%, rgba(0,0,0,.20) 62%);
  -webkit-mask-size:100% 5px;  mask-size:100% 5px;
  -webkit-mask-repeat:repeat;  mask-repeat:repeat;
}
.nr-mirror .nr-rip > i{
  position:absolute; left:0; right:0; top:0; display:block;
  -webkit-mask-size:100% 100%;   mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  transform:scaleY(-1);
  transform-origin:center;
}
.nr-mirror--blade{
  left: var(--nr-bx);
  top: var(--nr-hzp);
  width: var(--nr-bw);
  height:24svh;
  translate: calc(var(--p) * 9vw) calc(var(--p) * 8svh);
  opacity: calc(.52 - var(--p) * .46);
  filter:blur(3px);
}
.nr-mirror--blade .nr-rip > i{
  height: var(--nr-bh);
  -webkit-mask-image: var(--nr-emblem); mask-image: var(--nr-emblem);
  background:linear-gradient(180deg,
    var(--nr-kern) 0%, var(--nr-lila-blass) 8%, var(--nr-lila) 26%, #6b1fc0 52%, transparent 78%);
}

/* ── Nebel VOR dem Objekt — ohne diese Ebene bleibt alles flach ── */
.nr-fog{ position:absolute; mix-blend-mode:screen; pointer-events:none; }
/* Bodennebel-Band: legt sich VOR den Fuß der Klinge und verschluckt ihn
   halb. Stärkster Tiefen-Hinweis der ganzen Seite. */
.nr-fog--band{
  left:-12%; right:-12%;
  top: calc(var(--nr-hzp) - 11svh);
  height:24svh; z-index:4;
  background:linear-gradient(180deg, transparent 0%, rgba(224,190,255,.14) 34%,
    rgba(196,140,255,.22) 54%, rgba(140,72,225,.13) 74%, transparent 100%);
  filter:blur(26px);
  opacity: calc(.95 - var(--p) * .3);
  animation: nr-driftC 54s ease-in-out infinite alternate;
}
.nr-fog--near{
  left:20%; top: calc(var(--nr-hz) - 30svh);
  width:60vw; height:42svh; z-index:4;
  background:radial-gradient(closest-side ellipse,
    rgba(214,168,255,.17) 0%, rgba(150,80,240,.10) 46%, transparent 78%);
  filter:blur(50px);
  opacity: calc(.9 - var(--p) * .4);
  animation: nr-driftA 46s ease-in-out infinite alternate;
}
.nr-fog--low{
  left:-16%; top: calc(var(--nr-hz) + 4svh);
  width:70vw; height:30svh; z-index:4;
  background:radial-gradient(closest-side ellipse,
    rgba(180,120,255,.13) 0%, rgba(90,40,180,.07) 50%, transparent 80%);
  filter:blur(54px);
  opacity: calc(.85 - var(--p) * .25);
  animation: nr-driftB 62s ease-in-out infinite alternate;
}
@keyframes nr-driftA{
  from{ transform:translate3d(-5vw,0,0) scale(1); }
  to  { transform:translate3d(7vw,-3svh,0) scale(1.14); }
}
@keyframes nr-driftB{
  from{ transform:translate3d(4vw,1svh,0) scale(1.06); }
  to  { transform:translate3d(-6vw,-2svh,0) scale(1); }
}
@keyframes nr-driftC{
  from{ transform:translate3d(-3vw,.6svh,0); }
  to  { transform:translate3d(3vw,-.6svh,0); }
}

/* Vignette — Noir ohne abgedunkelte Ecken gibt es nicht. Unverändert aus
   Entwurf C: sie verschwindet mit dem Raum, weil der Raum selbst am Falz
   ausblendet. Ein eigener Regler wäre eine zweite Wahrheit. */
.nr-vignette{
  position:absolute; inset:0; z-index:5;
  background:radial-gradient(128% 108% at var(--nr-bc) 52%,
    transparent 34%, rgba(4,2,9,.34) 66%, rgba(3,1,7,.72) 86%, rgba(2,1,5,.92) 100%);
}
/* Scrim — man geht tiefer in den Tunnel, es wird dunkler */
.nr-scrim{
  position:absolute; inset:0; z-index:6;
  background:radial-gradient(120vw 100svh at var(--nr-bc) 34%,
    rgba(6,3,11,.34) 0%, rgba(4,2,8,.82) 60%, #030106 100%);
  opacity: calc(var(--p) * .9);
}
/* Filmkorn — nimmt dem Licht das Vektor-Billige. Wert unverändert aus
   Entwurf C. Am Falz sinkt es mit der Deckkraft des Raums von .46 auf 0,
   während das feine Papierkorn der Zone auf .07 aufzieht: das Korn springt
   dadurch nicht, es wird übergeben. */
.nr-grain{
  position:absolute; inset:-50%; z-index:7;
  background-image: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='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.46;
  mix-blend-mode:overlay;
}

/* ── HERO ───────────────────────────────────────────────────────────────── */
.nr-hero{
  position:relative;
  min-height:100svh;
  padding: clamp(20px, 3.4vw, 54px);
}
.nr-credit{
  position:absolute;
  top: clamp(20px, 3.4vw, 54px);
  left: clamp(20px, 3.4vw, 54px);
  font-size:10px; letter-spacing:.30em; text-transform:uppercase;
  color:rgba(214,166,255,.70);
}
.nr-credit--r{
  left:auto; right: clamp(20px, 3.4vw, 54px);
  color:rgba(233,201,255,.46);
}
/* Senkrechte Randnotiz — Asymmetrie, kein Ornament */
.nr-edge{
  position:absolute; left: clamp(18px, 3.2vw, 50px);
  top:46svh;
  transform-origin:left center;
  rotate:-90deg;
  translate:-6px -50%;
  font-size:10px; letter-spacing:.34em; text-transform:uppercase;
  color:rgba(233,201,255,.40);
  white-space:nowrap;
}

/* Der Schriftzug steht AUF der Kante und überlappt die Klinge */
.nr-stage{ position:absolute; inset:0; }

.nr-wordmark{
  position:absolute;
  left: clamp(20px, 5vw, 88px);
  bottom: calc(100% - var(--nr-hzp) + 3px);
  width: clamp(300px, 54vw, 800px);
  aspect-ratio: 1800 / 304;
  z-index:3;
  -webkit-mask-image: var(--nr-wort);  mask-image: var(--nr-wort);
  -webkit-mask-size:100% 100%;         mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;       mask-repeat:no-repeat;
  /* Glanzsprung folgt der Lichtrichtung: heller zur Klinge hin (rechts) */
  background:linear-gradient(97deg,
    #6b3aa8 0%, #a869e8 22%, var(--nr-lila-hell) 46%,
    var(--nr-lila-blass) 62%, var(--nr-kern) 74%, #ddaaff 86%, #9a52e4 100%);
  filter:
    drop-shadow(0 0 16px rgba(168,85,247,.60))
    drop-shadow(0 0 58px rgba(122,40,210,.42));
  translate: 0 calc(var(--p) * -4svh);
}
.nr-mirror--word{
  left: clamp(20px, 5vw, 88px);
  top: calc(var(--nr-hzp) + 3px);
  width: clamp(300px, 54vw, 800px);
  height: calc(clamp(300px, 54vw, 800px) * (304 / 1800) * .82);
  z-index:3;
  opacity:.19;
  filter:blur(3.4px);
  translate: 0 calc(var(--p) * -4svh);
}
.nr-mirror--word .nr-rip > i{
  height: calc(clamp(300px, 54vw, 800px) * (304 / 1800));
  -webkit-mask-image: var(--nr-wort); mask-image: var(--nr-wort);
  background:linear-gradient(180deg,
    var(--nr-lila-blass) 0%, var(--nr-lila) 40%, rgba(120,40,210,.3) 72%, transparent);
}

.nr-role{
  position:absolute;
  left: clamp(22px, 5.2vw, 91px);
  top: calc(var(--nr-hzp) + clamp(52px, 8.6vw, 124px));
  display:flex; align-items:center; gap:14px;
  font-size: clamp(10px, .8vw, 12px);
  letter-spacing:.40em; text-transform:uppercase;
  color:rgba(244,234,255,.88);
  z-index:8;
  text-shadow: 0 0 26px rgba(90,26,170,.95), 0 1px 2px rgba(0,0,0,.6);
}
.nr-dot{
  width:3px; height:3px; border-radius:50%;
  background: var(--nr-lila-hell);
  box-shadow: 0 0 9px var(--nr-lila-hell);
}
.nr-cue{
  position:absolute;
  right: clamp(20px, 3.4vw, 54px);
  bottom: clamp(20px, 3.4vw, 54px);
  display:flex; align-items:center; gap:12px;
  font-size:9px; letter-spacing:.34em; text-transform:uppercase;
  color:rgba(233,201,255,.52);
  z-index:8;
}
.nr-cue > i{
  display:block; width:74px; height:1px;
  background:linear-gradient(90deg, transparent, var(--nr-lila-hell));
  box-shadow:0 0 10px rgba(207,147,255,.7);
  animation: nr-zieh 2.6s ease-in-out infinite;
}
@keyframes nr-zieh{
  0%,100%{ transform:scaleX(.55); transform-origin:left; opacity:.5; }
  50%    { transform:scaleX(1);   transform-origin:left; opacity:1;  }
}

/* ── PROFIL ─────────────────────────────────────────────────────────────── */
.nr-profil{
  position:relative;
  overflow-x:clip;                 /* der weiche Schatten hinter den Credits
                                      erzeugte sonst 5 px Querlauf */
  min-height:106svh;
  padding: clamp(60px,10svh,150px) clamp(20px,3.4vw,54px) clamp(56px,9svh,120px);
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(220px,28%);
  column-gap: clamp(24px,4vw,80px);
  align-content:center;
}
.nr-eyebrow{
  grid-column:1 / -1;
  margin:0 0 clamp(18px,3.6svh,46px);
  padding-left: clamp(2px,1.4vw,22px);
  font-size:10px; letter-spacing:.42em; text-transform:uppercase;
  color:rgba(214,166,255,.66);
}
/* Die drei Genres liegen in DREI TIEFEN — Größe, Unschärfe und Leuchtkraft
   staffeln sich, sie überlappen leicht. Raum statt Liste. */
.nr-triad{
  grid-column:1;
  display:flex; flex-direction:column; align-items:flex-start;
  font-family: var(--nr-masse);
  font-weight:400;                 /* Haettenschweiler ist von sich aus schwer */
  text-transform:uppercase;
  line-height:.94;
  letter-spacing:.002em;
}
.nr-triad__w{
  display:block;
  background-clip:text; -webkit-background-clip:text;
  color:transparent;
  white-space:nowrap;
}
.nr-triad__w--far{
  font-size: clamp(2.1rem,4.8vw,4.8rem);
  margin-left: clamp(40px,19vw,340px);
  background-image:linear-gradient(100deg,#33125e 0%,#5a2199 46%,#7f3ecb 78%,#431082 100%);
  filter:blur(1.5px);              /* mehr Unschärfe liest sich als Fehler */
  opacity:.92;
  translate: calc(var(--p) * -2vw) 0;
}
.nr-triad__w--mid{
  font-size: clamp(3.3rem,8.4vw,8.6rem);
  margin-left: clamp(14px,8.5vw,154px);
  margin-top:-.02em;
  background-image:linear-gradient(100deg,#5b2199 0%,#9a52ea 40%,var(--nr-lila-hell) 74%,#8a3fd8 100%);
  filter:blur(.6px);
  translate: calc(var(--p) * -1vw) 0;
}
.nr-triad__w--near{
  font-size: clamp(5rem,15.4vw,16rem);
  margin-top:-.02em;
  background-image:linear-gradient(99deg,
    #8a3fd8 0%, #c884ff 20%, var(--nr-lila-blass) 46%,
    var(--nr-kern) 64%, #d69cff 80%, #9b4fe8 100%);
  filter:drop-shadow(0 0 44px rgba(168,85,247,.45));
}

/* Credits: Editorial-Block mit hängenden Marken. Keine Zellen, keine
   Rahmen, keine gleich langen Zeilen. */
.nr-credits{
  position:relative;
  grid-column:2;
  align-self:center;
  margin: clamp(30px,6svh,84px) 0 0;
  display:flex; flex-direction:column;
  gap: clamp(20px,3.4svh,40px);
}
/* Kein Kasten hinter der Schrift — ein weicher Schatten ohne Kante, damit
   die Zeilen nicht auf den hellen Flügeln der Klinge liegen. */
.nr-credits::before{
  content:'';
  position:absolute; inset:-12% -4% -12% -30%;
  background:radial-gradient(closest-side ellipse at 44% 50%,
    rgba(4,2,10,.86) 0%, rgba(4,2,10,.60) 46%, rgba(4,2,10,.22) 74%, transparent 100%);
  filter:blur(22px);
  z-index:-1;
}
.nr-credits__row{ position:relative; padding-left:20px; }
/* die einzige „Linie" hier ist ein Lichtpunkt, kein Strich */
.nr-credits__row::before{
  content:'';
  position:absolute; left:0; top:.62em;
  width:5px; height:5px;
  background: var(--nr-lila-hell);
  box-shadow: 0 0 9px var(--nr-lila-hell), 0 0 22px rgba(168,85,247,.7);
  transform:rotate(45deg);
}
.nr-credits dt{
  font-size:9.5px; letter-spacing:.38em; text-transform:uppercase;
  color:rgba(214,166,255,.62);
  margin-bottom:7px;
}
.nr-credits dd{
  margin:0;
  font-family: var(--nr-technik);
  font-weight:600;
  font-size: clamp(1.4rem,2.2vw,2.05rem);
  line-height:1.05;
  letter-spacing:.006em;
  color:#f6efff;
  text-shadow:0 0 28px rgba(122,40,210,.8);
}
.nr-credits__sub{
  display:block; margin-top:6px;
  font-family: var(--nr-mono); font-weight:400;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(233,201,255,.48);
  text-shadow:none;
}


/* ══════════════════════════════════════════════════════════════════════════
   ÜBERGANGSZONE · „DAS LICHT WIRD TUSCHE"
   Die Zone gehört noch zum Noir-Teil, trägt aber schon die Oberfläche des
   Manga-Teils: dieselben Rasterpunkte, derselbe Strahlenstoß, dieselbe
   violette Tiefe, dasselbe Papierkorn. Beide Oberflächen leben hier
   gleichzeitig, deshalb liegt der Wechsel MITTEN in der Zone und nicht an
   einer Dokumentkante.
   `overflow:clip` sorgt dafür, dass keine dieser Ebenen in den Abschnitt
   darüber oder darunter reicht — messbar keine Überlappung.
   ══════════════════════════════════════════════════════════════════════ */
.bruecke{
  position:relative;
  /* Kurz halten. 78svh waren gemessen zu viel: die Zone bekam eine leere
     Mitte und las sich als zwei Seiten statt als ein Übergang. 54svh sind
     ein Atemzug — lang genug für die Choreografie, kurz genug, dass die
     Lichtnaht und die erste Panelkante im selben Blick liegen. */
  height: clamp(360px, 54svh, 560px);
  overflow:clip;
  pointer-events:none;
  /* Grundton wechselt vom Seitenschwarz #04020a auf das Papierschwarz des
     Manga-Teils #08060d. Beide unterscheiden sich um drei bis vier Stufen —
     als Verlauf ist das unsichtbar, als Kante an der Nahtstelle war es
     messbar. Gemessen am 09.08.: Sprung von 2–3 Stufen über die ganze
     Breite genau auf der Grenzzeile. */
  background: linear-gradient(180deg, rgba(8,6,13,0) 0%, #08060d 72%);
}

/* Die violette Tiefe der ersten Doppelseite, nach OBEN fortgesetzt.
   Nicht „dieselben Werte", sondern dieselben Ellipsen: .mg-glow sitzt in einer
   100svh hohen Seite, diese Zone ist 54svh hoch. Beide Mittelpunkte und beide
   Radien sind deshalb auf die Höhe DIESER Box umgerechnet und um eine ganze
   Seitenhöhe nach unten geschoben:
     Mitte   26%·100svh  ->  (54+26)/54  = 148%      82%  ->  252%
     Radius  46%·100svh  ->   46/54      =  85%      40%  ->   74%
   Damit stimmt der Wert an der Unterkante auf den Punkt mit dem Wert am
   Seitenanfang überein — und an der Oberkante der Zone ist die Ellipse
   rechnerisch schon aus. Beide Kanten sind so ohne Sprung, ohne dass eine
   zusätzliche Maske nötig wäre. Gemessen am 09.08.: mit einer eigenen,
   box-eigenen Glut standen an der Ober- UND Unterkante sichtbare Bänder. */
.bruecke__glut{
  position:absolute; inset:0;
  background:
    radial-gradient(58% 85% at 74% 148%, rgba(176,38,255,.30), transparent 70%),
    radial-gradient(46% 74% at 12% 252%, rgba(92,15,176,.26), transparent 72%);
}

/* Die Ben-Day-Punkte fallen aus dem Bodennebel aus: erst unscharf, dann
   körnig scharf. Am unteren Ende stehen sie exakt in Raster (7 px), Farbe
   und Deckkraft (.55) des Manga-Teils — die Fortsetzung ist lückenlos.
   MASKE auf der Hülle, UNSCHÄRFE im Kind: beides auf einem Element würde
   mask-clip den Filter an der Kante kappen. */
.bruecke__raster{
  position:absolute; inset:0;
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.45) 24%, rgba(0,0,0,.90) 58%, #000 100%),
    radial-gradient(120% 100% at 78% 112%, #000 0%, rgba(0,0,0,.35) 45%, transparent 82%);
          mask-image:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.45) 24%, rgba(0,0,0,.90) 58%, #000 100%),
    radial-gradient(120% 100% at 78% 112%, #000 0%, rgba(0,0,0,.35) 45%, transparent 82%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
  opacity: var(--pb);
}
.bruecke__raster > i{
  position:absolute; inset:0; display:block;
  background-image:radial-gradient(rgba(176,38,255,.42) .9px, transparent 1.5px);
  background-size:7px 7px;
  opacity:.55;
  filter: blur(calc((1 - var(--pb)) * 2.6px));
}

/* Das Volumenlicht schärft sich zum Speedline-Strahlenstoß: gleiche
   Strahlenteilung (4°) und gleiche Maske wie im Manga-Teil, nur am Anfang
   weichgezeichnet. Das ist der lesbarste Beat des Übergangs — dieselbe
   Physik, einmal als Licht, einmal als Tusche. */
.bruecke__strahlen{
  /* Größe und Teilung wie der Strahlenstoß der Doppelseiten (dort 78%×84%
     einer 100svh-Seite): hier 76%×150% einer 54svh-Zone, also derselbe
     Strahlenfächer in derselben Größe. Klein gerechnet las er sich als
     versehener Fleck statt als Lichtbündel.
     Die Lage ist RECHNERISCH so gesetzt, dass die Maske vor der Unterkante
     der Zone auf Null läuft: Mitte bei 0,48·Höhe, Sichtradius 0,66·0,66·Höhe
     ≈ 0,44·Höhe, Summe 0,92·Höhe. Gemessen am 09.08.: tiefer gesetzt wurde
     der Fächer an der Nahtstelle hart abgeschnitten — 4,4 Helligkeitsstufen
     Sprung im Streifen x=1050…1300. Genau die Kante, die hier nicht sein
     darf. */
  position:absolute; right:-16%; top:-18%;
  width:76%; height:150%;
  -webkit-mask-image: radial-gradient(closest-side circle at 50% 44%,
              transparent 4%, #000 17%, rgba(0,0,0,.5) 40%, transparent 66%);
          mask-image: radial-gradient(closest-side circle at 50% 44%,
              transparent 4%, #000 17%, rgba(0,0,0,.5) 40%, transparent 66%);
  /* Leiser als in den Doppelseiten (dort .30 bzw. .26). Dort liegt der Fächer
     hinter Zeichnungen, hier steht er frei auf dem Asphalt — bei gleicher
     Stärke wäre er das Hauptmotiv des Übergangs statt seiner Textur. */
  opacity: calc(var(--pb) * .17);
  mix-blend-mode:screen;
}
.bruecke__strahlen > i{
  position:absolute; inset:0; display:block;
  background: repeating-conic-gradient(from 0deg at 50% 44%,
              transparent 0deg 2.7deg,
              rgba(235,196,255,.9) 2.7deg 4deg);
  filter: blur(calc((1 - var(--pb)) * 12px));
}

/* Papierkorn des Manga-Teils, exakt dessen Werte (.07 / overlay). Der
   Maskenverlauf verhindert eine Kante an der Oberkante der Zone: das feine
   Korn wächst hinein, statt dort anzufangen. */
.bruecke__korn{
  position:absolute; inset:0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
  background-image: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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: calc(var(--pb) * .07);
  mix-blend-mode:overlay;
}


/* ══════════════════════════════════════════════════════════════════════════
   TEIL 2 · MANGA-DOPPELSEITEN
   Zwei Doppelseiten. Diagonale, ungleiche, überlappende Panels, Speedlines,
   Ben-Day-Raster, Onomatopoesie, Ausbrecher. Keine Karten, keine 1px-Rahmen,
   kein Raster von Kästchen.
   ══════════════════════════════════════════════════════════════════════ */

.manga{
  position:relative;
  z-index:1;
  overflow-x:clip;                 /* fängt die Ausbrecher ab, ohne einen
                                      Scroll-Container zu erzeugen */
  --mg-ink:      #08060d;          /* Papier-Schwarz, violett gebrochen */
  --mg-ink-2:    #100a1c;
  --mg-ink-3:    #17102a;
  --mg-paper:    #f2edfb;          /* Manga-Papierweiß */
  --mg-neon:     #b026ff;          /* Leitfarbe: Neon-Lila */
  --mg-neon-hi:  #e3b0ff;
  --mg-neon-lo:  #5c0fb0;
  --mg-neon-dk:  #2c0755;

  --mg-gut:  clamp(5px,.62vw,11px);    /* Panel-Gosse (Ink dazwischen) */
  --mg-rail: clamp(20px,3.4vw,58px);   /* Seitenschiene für Randtexte  */

  --mg-disp: 'Dela Gothic One','Yu Gothic','MS Gothic',Impact,sans-serif;
  --mg-body: 'Zen Kaku Gothic New','Yu Gothic','Segoe UI',sans-serif;
  --mg-ease: cubic-bezier(.16,.84,.24,1);

  background: var(--mg-ink);
  color: var(--mg-paper);
  font-family: var(--mg-body);
}

/* ── 1 · Die Seite: Papier, Raster, Rauschen, Speedlines ── */
.mg-spread{
  position:relative;
  padding:0 var(--mg-rail);
  background: var(--mg-ink);
  isolation:isolate;
}
/* Ben-Day-Rasterpunkte, über die ganze Seite, sehr fein */
.mg-spread::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(176,38,255,.42) .9px, transparent 1.5px);
  background-size:7px 7px;
  -webkit-mask-image: radial-gradient(120% 100% at 78% 8%, #000 0%, rgba(0,0,0,.35) 45%, transparent 82%);
          mask-image: radial-gradient(120% 100% at 78% 8%, #000 0%, rgba(0,0,0,.35) 45%, transparent 82%);
  opacity:.55;
}
/* Papierkorn */
.mg-spread::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image: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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.07; mix-blend-mode:overlay;
}
/* Echte Manga-Speedlines: ein kompakter Strahlenstoß, kein Streifenmuster.
   90 Strahlen (4° Teilung). Enger geht nicht: bei feinerer Teilung entsteht
   ein Moiré statt Strahlen — auf dem Schirm gemessen. */
.mg-speedlines{
  position:absolute; z-index:0; pointer-events:none;
  background: repeating-conic-gradient(from 0deg at 50% 44%,
              transparent 0deg 2.7deg,
              rgba(235,196,255,.9) 2.7deg 4deg);
  -webkit-mask-image: radial-gradient(closest-side circle at 50% 44%,
              transparent 4%, #000 17%, rgba(0,0,0,.5) 40%, transparent 66%);
          mask-image: radial-gradient(closest-side circle at 50% 44%,
              transparent 4%, #000 17%, rgba(0,0,0,.5) 40%, transparent 66%);
  opacity:.30;
  mix-blend-mode:screen;
  transform: rotate(var(--mg-slr,0deg)) scale(var(--mg-sls,1));
}
/* Brennpunkt Seite 01: rechte Ink-Lücke zwischen Skyline- und Deck-Panel */
.mg-speedlines--a{ top:8%; left:42%; width:78%; height:84%; }
/* Seite 02: Brennpunkt in die untere rechte Ink-Fläche. ÜBER der Zeichnung
   erzeugte der Strahlenstoß ein Moiré mit dem Rasterpunkt-Muster der
   Panels — deshalb liegt er hier hinter den Panels. */
.mg-speedlines--b{ top:auto; bottom:-10%; left:auto; right:-16%; width:56%; height:52%; opacity:.26; }

/* Violette Tiefe hinter allem */
.mg-glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 46% at 74% 26%, rgba(176,38,255,.30), transparent 70%),
    radial-gradient(46% 40% at 12% 82%, rgba(92,15,176,.26), transparent 72%);
}

.mg-grid{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-template-rows:repeat(12,1fr);
  height:100%;
}

/* ── 2 · Panels — geklippte, gekippte, überlappende Flächen ── */
.mg-panel{
  position:relative;
  margin: var(--mg-gut);
  transform: translate3d(0, var(--mg-py,0px), 0);
  filter:
    drop-shadow(10px 12px 0 rgba(2,1,5,.92))
    drop-shadow(0 0 2px rgba(176,38,255,.9))
    drop-shadow(0 0 26px rgba(176,38,255,.20));
  z-index:1;
}
/* Bild-Panels tragen einen echten Tuschrahmen, der der Diagonale folgt:
   vier gestapelte Schlagschatten ohne Weichzeichnung = Konturlinie entlang
   der geklippten Form. KEIN CSS-border — ein Rechteck-Rahmen wäre genau
   das, was hier nicht sein darf. Deshalb liegt der Filter auf .mg-panel und
   die Form (clip-path) auf .mg-p: Maske und Schatten nie auf einem Element. */
.mg-panel--art{
  filter:
    drop-shadow(1.7px 0 0 rgba(242,237,251,.92))
    drop-shadow(-1.7px 0 0 rgba(242,237,251,.92))
    drop-shadow(0 1.7px 0 rgba(242,237,251,.92))
    drop-shadow(0 -1.7px 0 rgba(242,237,251,.92))
    drop-shadow(11px 13px 0 rgba(2,1,5,.94))
    drop-shadow(0 0 30px rgba(176,38,255,.28));
}
.mg-p{
  position:relative;
  height:100%; width:100%;
  overflow:hidden;
  background: var(--mg-ink-2);
  clip-path: var(--mg-clip, none);
  transform: rotate(var(--mg-tilt,0deg));
}
.mg-panel img{
  width:100%; height:100%; object-fit:cover;
  filter:contrast(1.14) saturate(.86) brightness(.92);
  transition: transform 1.4s var(--mg-ease), filter .6s ease;
}
/* Violette Lasur + Vignette in jedem Panel — vereinheitlicht die Motive */
.mg-p::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(200deg, rgba(176,38,255,.20), transparent 46%, rgba(8,6,13,.72)),
    radial-gradient(120% 90% at 30% 10%, transparent 30%, rgba(8,6,13,.55));
  mix-blend-mode:multiply;
}
/* Screentone-Keil in der Panel-Ecke */
.mg-p::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
  background-image:radial-gradient(rgba(227,176,255,.55) 1px, transparent 1.7px);
  background-size:6px 6px;
  -webkit-mask-image: linear-gradient(215deg, #000 0%, transparent 34%);
          mask-image: linear-gradient(215deg, #000 0%, transparent 34%);
  opacity:.5;
}
.mg-panel:hover img{ transform:scale(1.045); filter:contrast(1.2) saturate(1) brightness(1); }

/* ── 3 · Seitenkopf — Manga-Titelzeile, keine Navigationsleiste ── */
.mg-head{
  grid-area:1 / 1 / 2 / 13;
  z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:0 var(--mg-gut);
}
.mg-mark{ display:flex; align-items:center; gap:.62rem; }
.mg-mark__sym{
  width:clamp(19px,1.5vw,26px); aspect-ratio:900/1144;
  background:linear-gradient(170deg,var(--mg-neon-hi),var(--mg-neon) 55%,var(--mg-neon-lo));
  -webkit-mask:url('../img/kryptik-symbol-white.webp') center/contain no-repeat;
          mask:url('../img/kryptik-symbol-white.webp') center/contain no-repeat;
  filter:drop-shadow(0 0 8px rgba(176,38,255,.8));
}
.mg-mark__txt{
  font-family:var(--mg-body); font-weight:900;
  font-size:clamp(.62rem,.78vw,.78rem);
  letter-spacing:.42em; text-transform:uppercase;
  color:var(--mg-paper);
}
.mg-tabs{ display:flex; gap:.4rem; }
.mg-tab{
  font-weight:900; text-transform:uppercase;
  font-size:clamp(.56rem,.72vw,.72rem); letter-spacing:.24em;
  padding:.62rem 1.5rem .62rem 1.7rem;
  background:var(--mg-ink);
  color:var(--mg-paper);
  clip-path:polygon(11% 0, 100% 0, 89% 100%, 0 100%);
  box-shadow:inset 0 0 0 100px rgba(176,38,255,0);
  transition:color .28s ease, box-shadow .28s ease, letter-spacing .28s ease;
}
.mg-tab:hover{ box-shadow:inset 0 0 0 100px var(--mg-neon-lo); letter-spacing:.3em; }
.mg-tab--hot{
  background:linear-gradient(100deg,var(--mg-neon),var(--mg-neon-lo));
  color:#fff;
}
.mg-tab--hot:hover{ box-shadow:inset 0 0 0 100px rgba(255,255,255,.14); }

/* ── 4 · Seite 01 ── */
.mg-hero{ height:100svh; min-height:680px; overflow:hidden; }

.mg-panel--crowd{ grid-area:2 / 1 / 13 / 7;  --mg-tilt:-.7deg;
  --mg-clip:polygon(0 0, 100% 3.2%, 100% 100%, 0 96.5%); z-index:1; }
.mg-panel--sky{   grid-area:2 / 6 / 6 / 13;  --mg-tilt:.5deg;
  --mg-clip:polygon(7% 0, 100% 0, 100% 89%, 0 100%); z-index:2; }
.mg-panel--deck{  grid-area:8 / 8 / 13 / 13; --mg-tilt:-1.1deg;
  --mg-clip:polygon(0 9%, 100% 0, 100% 91%, 3% 100%); z-index:2; }
/* Die weiße Hand im Deck-Motiv ist heller als der Rest — in die Lila-Tiefe holen */
.mg-panel--deck img{ filter:contrast(1.2) saturate(.7) brightness(.68) hue-rotate(-6deg); }
.mg-panel--deck:hover img{ filter:contrast(1.24) saturate(.9) brightness(.82); }

/* Der Ausbrecher: Emblem bricht über den rechten Seitenrand hinaus. Es liegt
   HINTER den Panels und zeigt sich nur in den Ink-Lücken — dadurch
   verschmiert es die Zeichnungen nicht. */
.mg-breakout-sym{
  position:absolute; z-index:0; pointer-events:none;
  top:22%; right:calc(var(--mg-rail) * -5);
  width:min(38vw,520px); aspect-ratio:900/1144;
  background:linear-gradient(160deg,var(--mg-neon-hi),var(--mg-neon) 48%,var(--mg-neon-dk));
  -webkit-mask:url('../img/kryptik-symbol-white.webp') center/contain no-repeat;
          mask:url('../img/kryptik-symbol-white.webp') center/contain no-repeat;
  opacity:.34;
  transform:rotate(14deg) translate3d(0,var(--mg-py,0px),0);
  filter:drop-shadow(0 0 60px rgba(176,38,255,.4));
}

/* Titelblock — sitzt über der Gosse, nicht in der Mitte */
.mg-title{
  grid-area:5 / 2 / 9 / 12;
  z-index:6;
  display:flex; flex-direction:column; justify-content:center;
  gap:.5rem;
  padding-left:clamp(0px,1vw,18px);
}
.mg-title__kick{
  display:flex; align-items:center; gap:.7rem;
  font-weight:900; font-size:clamp(.56rem,.72vw,.72rem);
  letter-spacing:.36em; text-transform:uppercase; color:var(--mg-neon-hi);
}
.mg-title__kick i{
  display:block; width:clamp(28px,4vw,70px); height:3px; background:var(--mg-neon);
  box-shadow:0 0 12px var(--mg-neon);
}
.mg-wordmark{
  display:block;
  width:min(72vw,940px); aspect-ratio:1800/304;
  background:linear-gradient(96deg,
    var(--mg-paper) 0%, var(--mg-paper) 34%,
    var(--mg-neon-hi) 54%, var(--mg-neon) 78%, var(--mg-neon-lo) 100%);
  -webkit-mask:url('../img/kryptik-wordmark-only.webp') left center/contain no-repeat;
          mask:url('../img/kryptik-wordmark-only.webp') left center/contain no-repeat;
  transform:rotate(-1.6deg);
  filter:
    drop-shadow(7px 8px 0 rgba(4,2,9,.9))
    drop-shadow(0 0 34px rgba(176,38,255,.6));
}
.mg-title__sub{
  display:flex; align-items:baseline; gap:clamp(.6rem,1.4vw,1.4rem);
  flex-wrap:wrap;
  font-family:var(--mg-disp);
  font-size:clamp(.82rem,1.36vw,1.34rem);
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--mg-paper);
  margin-left:.2rem;
}
.mg-title__sub b{ color:var(--mg-neon-hi); font-weight:400; }
.mg-title__sub s{ text-decoration:none; color:var(--mg-neon); }

/* Manga-Kastentext: schiefes, aufgeklebtes Ink-Viereck. Kein Rechteck-
   Kästchen, und die Kontur ist ein Schlagschatten, kein border. */
.mg-cap{
  position:relative;
  z-index:7;
  align-self:end;
  padding:clamp(.9rem,1.6vw,1.6rem) clamp(1.2rem,2.4vw,2.4rem);
  filter:drop-shadow(8px 9px 0 rgba(2,1,5,.9)) drop-shadow(0 0 1.6px rgba(242,237,251,.85));
}
.mg-cap > *{ position:relative; z-index:2; }
.mg-cap::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(120deg,var(--mg-ink-3),var(--mg-ink) 68%);
  clip-path:polygon(0 6%, 98.5% 0, 100% 91%, 2.2% 100%);
}
.mg-cap p{
  font-weight:500;
  font-size:clamp(.68rem,.88vw,.9rem);
  line-height:1.7; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(242,237,251,.86);
}
.mg-cap p + p{ margin-top:.42rem; }
.mg-cap p:last-child{ color:var(--mg-neon-hi); letter-spacing:.3em; font-weight:900; }
.mg-hero__cap{ grid-area:11 / 2 / 13 / 8; margin:var(--mg-gut); }

/* Onomatopoesie — Umriss-Lettering, senkrecht wie im Manga. Eigener
   Schriftstapel: die Kana müssen auch stehen, wenn Dela Gothic nicht
   geladen ist — Yu Gothic/Meiryo liegen auf jedem Windows. */
.mg-sfx{
  font-family:'Dela Gothic One','Noto Sans JP','Yu Gothic','Meiryo','MS Gothic',sans-serif;
  font-weight:900;
  color:transparent;
  -webkit-text-stroke:2px rgba(242,237,251,.62);
  pointer-events:none; user-select:none;
  line-height:.92;
}
/* Seite 01: die Kana laufen als senkrechter Satzspiegel auf der Zeichnung
   mit — Manga-Umschlag-Konvention. Bewusst Textur, kein Schlagwort. */
.mg-sfx--go{
  grid-area:2 / 1 / 8 / 3;
  z-index:8;
  writing-mode:vertical-rl;
  font-size:clamp(1rem,1.85vw,1.95rem);
  letter-spacing:.14em;
  justify-self:start; align-self:start;
  margin:clamp(1.4rem,3vw,3rem) 0 0 clamp(1.2rem,2.8vw,2.8rem);
  -webkit-text-stroke:1.3px rgba(242,237,251,.6);
  opacity:.7;
  text-shadow:0 0 18px rgba(176,38,255,.5);
}

/* Schienen-Texte am Blattrand */
.mg-rail{
  position:absolute; z-index:15;
  writing-mode:vertical-rl;
  font-weight:900; text-transform:uppercase;
  font-size:clamp(.5rem,.64vw,.64rem); letter-spacing:.44em;
  color:rgba(242,237,251,.42);
  display:flex; align-items:center; gap:.9rem;
}
.mg-rail i{ display:block; width:2px; height:clamp(26px,5vh,58px); background:var(--mg-neon); box-shadow:0 0 10px var(--mg-neon); }
.mg-rail--l{ left:calc(var(--mg-rail) * .22); top:22%; }
.mg-rail--r{ right:calc(var(--mg-rail) * .22); bottom:8%; color:var(--mg-neon-hi); }

.mg-folio{
  position:absolute; z-index:15;
  left:calc(var(--mg-rail) * .1); bottom:5%;
  font-family:var(--mg-disp); font-size:clamp(.9rem,1.5vw,1.5rem);
  color:rgba(176,38,255,.55);
  transform:rotate(90deg); transform-origin:center;
  letter-spacing:.1em;
}

/* ── 5 · Seite 02 ── */
.mg-page2{
  min-height:100svh;
  padding-top:clamp(2.2rem,5vh,4.4rem);
  padding-bottom:clamp(2.2rem,5vh,4.4rem);
  overflow:visible;                /* damit der Ausbrecher heraustreten darf */
  z-index:2;
}
.mg-page2 .mg-grid{ min-height:min(1040px,96svh); }

.mg-page2__head{
  grid-area:1 / 1 / 2 / 13; z-index:12;
  display:flex; align-items:center; gap:1.1rem;
  padding:0 var(--mg-gut);
}
.mg-page2__head span{
  font-family:var(--mg-disp); font-size:clamp(1rem,1.9vw,1.9rem);
  color:var(--mg-neon); letter-spacing:.04em;
  text-shadow:4px 4px 0 rgba(4,2,9,.85);
}
.mg-page2__head em{
  font-style:normal; font-weight:900;
  font-size:clamp(.56rem,.72vw,.72rem); letter-spacing:.4em; text-transform:uppercase;
  color:rgba(242,237,251,.5);
}
.mg-page2__head i{ flex:1; height:2px; background:linear-gradient(90deg,var(--mg-neon),transparent); }

.mg-panel--figure{ grid-area:2 / 1 / 13 / 6;  --mg-tilt:.6deg;
  --mg-clip:polygon(0 2.4%, 100% 0, 100% 97%, 0 100%); z-index:2; }
.mg-panel--type{   grid-area:2 / 5 / 7 / 13;  --mg-tilt:-.5deg;
  --mg-clip:polygon(4.5% 0, 100% 2.4%, 100% 100%, 0 94%); z-index:3; }
.mg-panel--label{  grid-area:7 / 6 / 11 / 10; --mg-tilt:.9deg;
  --mg-clip:polygon(0 8%, 100% 0, 96% 100%, 2% 92%); z-index:3; }
.mg-panel--mgmt{   grid-area:7 / 10 / 11 / 13;--mg-tilt:-1.3deg;
  --mg-clip:polygon(3% 0, 100% 6%, 100% 94%, 0 100%); z-index:3; }

/* ── EINHÄNGEPUNKT PRESSEBILD ───────────────────────────────────────────
   Diese beiden Regeln sind aktiv, greifen aber erst, wenn das Panel im HTML
   existiert (siehe den auskommentierten Block in Seite 02). Solange es fehlt,
   trifft `.mg-panel--press` nichts und `:has()` bleibt falsch — die
   Doppelseite bleibt genau so, wie sie freigegeben wurde. Sobald der Block
   eingehängt ist, verkürzt sich das Figuren-Panel von selbst und das
   Pressebild bekommt die untere linke Spalte. Kein weiterer CSS-Eingriff. */
.mg-panel--press{
  grid-area:8 / 1 / 13 / 6; --mg-tilt:-.8deg;
  --mg-clip:polygon(0 4%, 100% 0, 100% 96%, 2% 100%); z-index:4;
}
.mg-page2:has(.mg-panel--press) .mg-panel--figure{ grid-row:2 / 8; }

/* Panels ohne Bild: Ink + Raster statt Foto */
.mg-panel--type > .mg-p, .mg-panel--label > .mg-p, .mg-panel--mgmt > .mg-p{
  background:
    radial-gradient(90% 120% at 88% 6%, rgba(176,38,255,.24), transparent 62%),
    linear-gradient(155deg, var(--mg-ink-3), var(--mg-ink) 62%);
}
/* Rasterpunkt-Keil im Lettering-Panel — füllt die rechte Fläche als Screentone */
.mg-panel--type > .mg-p{
  background:
    radial-gradient(rgba(227,176,255,.22) 1.1px, transparent 2px) 0 0/11px 11px,
    radial-gradient(90% 120% at 88% 6%, rgba(176,38,255,.28), transparent 62%),
    linear-gradient(155deg, var(--mg-ink-3), var(--mg-ink) 62%);
}
.mg-panel--type > .mg-p::after,
.mg-panel--label > .mg-p::after,
.mg-panel--mgmt > .mg-p::after{ mix-blend-mode:normal; background:none; }

/* Lettering-Panel — die Genres SIND das Bild */
.mg-lettering{
  position:relative; z-index:3;
  height:100%;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(1rem,2.6vw,2.6rem) clamp(1.2rem,3vw,3rem);
  font-family:var(--mg-disp);
  line-height:.83;
  text-transform:uppercase;
}
.mg-lettering span{ display:block; white-space:nowrap; }
.mg-lettering .l1{
  font-size:clamp(1.9rem,5.3vw,5rem);
  color:var(--mg-paper);
  text-shadow:7px 7px 0 var(--mg-neon-lo);
  transform:rotate(-1.1deg);
}
.mg-lettering .l2{
  font-size:clamp(2.15rem,6vw,5.7rem);
  color:transparent; -webkit-text-stroke:2.4px var(--mg-paper);
  transform:rotate(.7deg) translateX(clamp(6px,1.4vw,26px));
  margin:.06em 0;
}
.mg-lettering .l3{
  font-size:clamp(1.75rem,4.9vw,4.6rem);
  color:var(--mg-neon);
  -webkit-text-stroke:1.5px var(--mg-paper);
  paint-order:stroke fill;
  text-shadow:0 0 30px rgba(176,38,255,.85), 6px 6px 0 rgba(4,2,9,.8);
  transform:rotate(-.5deg);
}
.mg-lettering__foot{
  margin-top:clamp(.7rem,1.6vh,1.3rem);
  font-family:var(--mg-body); font-weight:900;
  font-size:clamp(.54rem,.7vw,.7rem); letter-spacing:.42em;
  color:rgba(227,176,255,.72);
}

/* Impact-Burst hinter dem Label — als KONTUR, nicht als Fläche. Der innere
   Zwilling stanzt die Mitte wieder aus, so bleibt der Text lesbar. */
.mg-burst, .mg-burst::after{
  clip-path:polygon(50% 0%,57% 17%,73% 5%,72% 25%,90% 19%,83% 37%,100% 43%,86% 55%,97% 71%,78% 69%,80% 89%,61% 78%,50% 100%,38% 79%,21% 91%,22% 69%,3% 73%,14% 55%,0% 45%,16% 37%,6% 19%,27% 25%,26% 5%,43% 17%);
}
.mg-burst{
  position:absolute; inset:-3% -1%;
  background:linear-gradient(150deg,var(--mg-neon),var(--mg-neon-lo));
  opacity:.34;
}
.mg-burst::after{
  content:''; position:absolute; inset:5.5%;
  background:linear-gradient(155deg,var(--mg-ink-3),var(--mg-ink) 62%);
}
.mg-stack{
  position:relative; z-index:3; height:100%;
  display:flex; flex-direction:column; justify-content:center; gap:.45rem;
  padding:clamp(.9rem,2vw,1.8rem) clamp(1rem,2.2vw,2rem);
}
.mg-stack__key{
  font-weight:900; font-size:clamp(.5rem,.64vw,.64rem);
  letter-spacing:.42em; text-transform:uppercase; color:var(--mg-neon-hi);
}
.mg-stack__val{
  font-family:var(--mg-disp);
  font-size:clamp(1.05rem,2.1vw,1.95rem);
  line-height:1; text-transform:uppercase; color:var(--mg-paper);
  text-shadow:4px 4px 0 rgba(4,2,9,.8);
}
.mg-stack__amp{
  font-family:var(--mg-disp); line-height:1;
  font-size:clamp(.8rem,1.4vw,1.3rem);
  color:var(--mg-neon-hi);
  margin:.12em 0 .04em;
  text-shadow:0 0 16px rgba(176,38,255,.8);
}
.mg-panel--label .mg-stack__val{ font-size:clamp(.95rem,1.75vw,1.62rem); }
.mg-stack__note{
  font-weight:500; font-size:clamp(.58rem,.74vw,.74rem);
  letter-spacing:.2em; text-transform:uppercase; color:rgba(242,237,251,.6);
}
.mg-stack__av{
  width:clamp(88px,11vw,150px); aspect-ratio:1000/259; margin-top:.35rem;
  background:rgba(242,237,251,.9);
  -webkit-mask:url('../img/activated-wordmark.webp') left center/contain no-repeat;
          mask:url('../img/activated-wordmark.webp') left center/contain no-repeat;
}
.mg-page2__cap{ grid-area:11 / 5 / 13 / 12; margin:var(--mg-gut); align-self:center; }

/* Seite 02: der Ton auf der Zeichnung. Senkrechter Kana-Satz plus
   lateinische Umschrift daneben — genau so setzen lizenzierte Manga-
   Ausgaben ihre SFX. Groß und flächig gefüllt war es unleserlich. */
.mg-sfx--dodo{
  grid-area:6 / 3 / 12 / 6;
  z-index:9;
  align-self:center; justify-self:end;
  display:flex; align-items:flex-start; gap:.5em;
  margin-right:clamp(1.5rem,4vw,4rem);
  transform:rotate(-3deg);
}
.mg-sfx--dodo b{
  writing-mode:vertical-rl;
  font:inherit; font-weight:900;
  font-size:clamp(1.5rem,2.9vw,3rem);
  letter-spacing:.06em;
  color:rgba(176,38,255,.95);
  -webkit-text-stroke:1.8px var(--mg-paper);
  paint-order:stroke fill;
  text-shadow:5px 6px 0 rgba(2,1,5,.9), 0 0 30px rgba(176,38,255,.8);
}
.mg-sfx--dodo i{
  writing-mode:vertical-rl;
  font-family:var(--mg-body); font-style:normal; font-weight:900;
  font-size:clamp(.5rem,.68vw,.68rem); letter-spacing:.5em;
  text-transform:uppercase;
  color:rgba(242,237,251,.72);
  -webkit-text-stroke:0;
  margin-top:.4em;
}

/* Der zweite Ausbrecher: bricht über die obere Seitenkante in Seite 01 */
.mg-breakout2{
  position:absolute; z-index:30; pointer-events:none;
  top:clamp(-84px,-6vw,-40px); left:52%;
  display:flex; align-items:center; gap:clamp(.5rem,1.2vw,1.2rem);
  transform:rotate(-9deg);
}
.mg-breakout2 b{
  width:clamp(46px,5.4vw,84px); aspect-ratio:900/1144;
  background:linear-gradient(160deg,var(--mg-paper),var(--mg-neon-hi) 55%,var(--mg-neon));
  -webkit-mask:url('../img/kryptik-symbol-white.webp') center/contain no-repeat;
          mask:url('../img/kryptik-symbol-white.webp') center/contain no-repeat;
  filter:drop-shadow(6px 7px 0 rgba(4,2,9,.9)) drop-shadow(0 0 26px rgba(176,38,255,.85));
}
.mg-breakout2 span{
  font-family:var(--mg-disp);
  font-size:clamp(1.5rem,3.4vw,3.2rem);
  color:var(--mg-paper);
  text-shadow:6px 7px 0 var(--mg-neon-lo), 0 0 30px rgba(176,38,255,.5);
  letter-spacing:.02em;
}

/* ── 6 · Fußstreifen — ein schmales Ink-Band, schräg angeschnitten ── */
.mg-foot{
  position:relative; z-index:3;
  margin-top:clamp(1.4rem,4vh,3rem);
  background:linear-gradient(100deg,var(--mg-ink-3),var(--mg-ink) 70%);
  clip-path:polygon(0 14%, 100% 0, 100% 100%, 0 100%);
  padding:clamp(1.6rem,3.4vh,2.6rem) var(--mg-rail) clamp(.9rem,2vh,1.4rem);
  display:flex; align-items:center; justify-content:space-between; gap:1rem 1.6rem; flex-wrap:wrap;
  font-weight:900; font-size:clamp(.5rem,.66vw,.66rem);
  letter-spacing:.34em; text-transform:uppercase; color:rgba(242,237,251,.5);
}
.mg-foot a:hover{ color:var(--mg-neon-hi); }
.mg-foot__l{ display:flex; align-items:center; gap:.8rem; }
.mg-foot__r{ display:flex; gap:1.4rem; }
.mg-foot__sym{
  width:14px; aspect-ratio:900/1144; background:var(--mg-neon);
  -webkit-mask:url('../img/kryptik-symbol-white.webp') center/contain no-repeat;
          mask:url('../img/kryptik-symbol-white.webp') center/contain no-repeat;
}


/* ══════════════════════════════════════════════════════════════════════════
   9 · EINBLENDUNGEN — EIN Mechanismus für beide Teile
   Sichtbar ist der Grundzustand. Der versteckte Startzustand hängt an
   html.anim und kommt erst dazu, wenn das Skript läuft. Fällt JS aus oder
   wird die Zeitleiste eingefroren (unsichtbarer Tab, Headless-Aufnahme),
   steht der Inhalt einfach da — er kann nicht in einer Animation hängen
   bleiben. Bewusst KEIN `animation … both`: das hält den Anfangszustand fest.
   ══════════════════════════════════════════════════════════════════════ */
html.anim .rv{
  opacity:0; transform:translateY(30px);
  transition: opacity .62s ease-out, transform .78s cubic-bezier(.16,.84,.24,1);
  transition-delay: calc(120ms + var(--d,0) * 110ms);
}
html.anim .rv.is-in{ opacity:1; transform:none; }
/* Die gedrehte Randnotiz blendet nur auf — sie darf nicht wandern, sonst
   kämpft transform gegen rotate/translate. */
html.anim .nr-edge.rv{ transform:none; }

html.anim .mg-panel > .mg-p{
  transform:rotate(var(--mg-tilt,0deg)) translateY(28px) scale(.982);
  opacity:0;
  transition: transform 820ms cubic-bezier(.22,1.16,.36,1), opacity 440ms ease-out;
  transition-delay: calc(300ms + var(--d,0) * 110ms);
}
html.anim .mg-panel.is-in > .mg-p{
  transform:rotate(var(--mg-tilt,0deg)) translateY(0) scale(1);
  opacity:1;
}


/* ══════════════════════════════════════════════════════════════════════════
   10 · KLEINE BILDSCHIRME — Effekte an der Breite gekoppelt.
   Die Schwellen bleiben die der Entwürfe: 860 px für den Noir-Teil,
   900 px für die Manga-Doppelseiten.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px){
  .mg-hero{ height:auto; min-height:0; padding-bottom:clamp(1.5rem,4vh,3rem); }
  .mg-hero .mg-grid,
  .mg-page2 .mg-grid{
    display:flex; flex-direction:column; gap:var(--mg-gut);
    grid-template-columns:none; grid-template-rows:none;
    min-height:0;
  }
  .mg-panel{ margin:0; }
  .mg-panel--crowd > .mg-p{ aspect-ratio:4/5; }
  .mg-panel--sky > .mg-p,
  .mg-panel--deck > .mg-p{ aspect-ratio:16/9; }
  .mg-panel--figure > .mg-p,
  .mg-panel--press > .mg-p{ aspect-ratio:4/5; }
  .mg-panel--type > .mg-p{ aspect-ratio:auto; }
  .mg-panel--label > .mg-p, .mg-panel--mgmt > .mg-p{ min-height:150px; }
  .mg-title{ padding:clamp(1rem,4vw,2rem) 0 .4rem; }
  .mg-wordmark{ width:100%; }
  .mg-hero__cap, .mg-page2__cap{ margin:0; }
  .mg-sfx--go{ display:none; }
  .mg-sfx--dodo{ transform:rotate(-5deg); font-size:clamp(2.2rem,14vw,4rem); align-self:start; }
  .mg-breakout-sym{ top:auto; bottom:2%; width:56vw; opacity:.26; }
  .mg-breakout2{ position:static; transform:rotate(-5deg); margin-bottom:.6rem; }
  .mg-rail, .mg-folio{ display:none; }
  .mg-head{ padding:clamp(.9rem,3vw,1.4rem) 0; }
  .mg-lettering{ padding:clamp(1.2rem,5vw,2rem); }
  .mg-lettering span{ white-space:normal; }
  .mg-foot{ font-size:.56rem; }
}

@media (max-width: 860px){
  .noir{ --nr-hz:58svh; --nr-bh:58svh; --nr-bx:38%; }
  .nr-edge, .nr-tube--r, .nr-shaft--b, .nr-fog--near{ display:none; }
  /* Gemessen am 09.08. bei 375 px: die linke Kopfzeile („Management —
     ACTIVATED Agency") und die rechte („seit 08/2026") liefen ineinander.
     Die rechte entfällt hier — dieselbe Angabe steht im Profil-Block als
     „Management · ACTIVATED Agency · seit August 2026". Es geht also keine
     Information verloren, und die Reihe der Handy-Reduktionen von Entwurf C
     wird nur um einen Eintrag verlängert. */
  .nr-credit--r{ display:none; }
  .nr-wordmark, .nr-mirror--word{ width:min(86vw,520px); }
  .nr-mirror--word{ height:calc(min(86vw,520px) * (304/1800) * .82); }
  .nr-mirror--word .nr-rip > i{ height:calc(min(86vw,520px) * (304/1800)); }
  .nr-mirror--blade{ height:20svh; }
  .nr-contact{ width:90vw; margin-left:-45vw; }
  .nr-grain{ opacity:.32; }
  .nr-profil{ grid-template-columns:1fr; min-height:auto; }
  .nr-credits{ grid-column:1; margin-top:clamp(44px,8svh,90px); }
  .nr-triad__w--far{ margin-left:clamp(20px,12vw,90px); }
  /* Auf dem Handy noch knapper: dort ist ein Fenster viel höher als breit,
     eine lange Zone wäre reiner Leerlauf. */
  .bruecke{ height:clamp(240px,40svh,360px); }
}


/* ══════════════════════════════════════════════════════════════════════════
   11 · RUHE-MODUS — schaltet ALLES ab, nicht nur abgeschwächt.
   Ohne Scroll-Regler bleiben --p und --pb bei 0. Damit die Übergangszone
   dann nicht als leeres Feld dasteht, tragen ihre Ebenen hier feste Werte:
   der Übergang ist statisch ablesbar statt choreografiert.
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  .rv{ opacity:1 !important; transform:none !important; }
  .mg-panel > .mg-p{ opacity:1; transform:rotate(var(--mg-tilt,0deg)); }
  .mg-panel, .mg-speedlines{ transform:none; }
  .mg-breakout-sym{ transform:rotate(14deg); }
  .nr-room, .nr-blade, .nr-bloom, .nr-mirror--blade, .nr-mirror--word,
  .nr-wordmark, .nr-shaft, .nr-tube, .nr-triad__w, .nr-contact{
    translate:none !important;
  }
  .bruecke__raster{ opacity:.9; }
  .bruecke__raster > i{ filter:none; }
  .bruecke__strahlen{ opacity:.24; }
  .bruecke__strahlen > i{ filter:none; }
  .bruecke__korn{ opacity:.07; }
  .nr-tusche{ opacity:.55; }
  .nr-horizon{ opacity:1; }
}