/* AUGENBLICK · Buehnenbild. Palette streng nach DESIGN.md Abschnitt 2. */

:root{
  --nacht:#241033;
  --tiefe:#1A0B26;
  --papier:#FFE7F2;
  --tinte:#14061F;
  --r1:#7A1FD0;
  --r2:#A62BF0;
  --r3:#C93BE0;
  --r4:#E5309F;
  --r5:#F43D77;
  --ease-in-soft:cubic-bezier(0.16,1,0.3,1);
}

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

html,body{
  position:fixed;
  inset:0;
  width:100%;
  height:100svh;
  height:100dvh;
  overflow:hidden;
  overscroll-behavior:none;
  background:var(--nacht);
  color:var(--papier);
}

body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- Canvas ---------- */
#ab-canvas{
  position:fixed;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  touch-action:none;
  z-index:0;
}

/* ---------- Buehne, 12 Spalten ---------- */
#ab-stage{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  align-content:center;
  padding:0 clamp(16px,3vw,48px);
}

.chapter{
  grid-column:1 / -1;
  grid-row:1;
  display:grid;
  grid-template-columns:subgrid;
  align-items:center;
}
@supports not (grid-template-columns:subgrid){
  .chapter{grid-template-columns:repeat(12,1fr)}
}

.chapter .block{
  opacity:0;
  transform:translate3d(0,12px,0);
  will-change:opacity,transform;
  position:relative;
}
.chapter.side-l .block{grid-column:2 / 6}
.chapter.side-r .block{grid-column:8 / 12}

/* Kein Kapitel-Scrim mehr (DESIGN 14.1): die Figur weicht ueber cx zur
   textfreien Seite aus. Lesbarkeit tragen nur noch enge Plaketten, volldeckend
   in nacht, harte Kanten, exakt auf Textbreite. Das Kapitelwort bekommt keine,
   dort traegt das Doppeldruck-Echo. */
.label{
  width:fit-content;
  background:var(--nacht);
  padding:14px 22px;
}

.label{
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,231,242,.62);
  margin-bottom:.65em;
}
.label .num{color:var(--r4);opacity:1;margin-right:.55em}

.word{
  position:relative;
  font-family:"Shrikhand","ManropeFallback",Georgia,serif;
  font-weight:400;
  font-style:normal;
  font-size:clamp(2.9rem,6.6vw,6rem);
  line-height:1.05;
  letter-spacing:-.005em;
  text-wrap:balance;
  color:var(--papier);
  margin-bottom:.42em;
}
.word .word-face{position:relative;display:block}
.word .word-echo{
  position:absolute;
  left:6px;
  top:6px;
  display:block;
  color:transparent;
  -webkit-text-stroke:2px var(--r2);
  pointer-events:none;
}

/* Die Poemzeile bricht auf zwei Zeilen um. Als Block-Plakette war die Flaeche
   darum so breit wie das max-width-Limit und nicht wie der Text: rechts standen
   je nach Kapitel bis zu 55 Pixel leeres nacht ueber, und unter einer kurzen
   Schlusszeile lief das Rechteck in voller Breite durch. 14.1 verlangt exakt
   die Textbreite. Die Plakette sitzt deshalb auf einem INLINE-Element und wird
   pro Zeilenfragment geklont: jede Zeile bekommt ihre eigene volldeckende
   Flaeche mit 14px vertikalem und 22px horizontalem Padding, harte Kanten.
   Der Zeilenabstand muss dafuer mindestens so gross sein wie eine Plakette
   hoch ist, sonst deckt die Plakette der zweiten Zeile die Unterlaengen der
   ersten zu (Chrome zeichnet Zeilenkasten fuer Zeilenkasten, Hintergrund und
   Text je Fragment nacheinander). Die Plakettenhoehe ist die Inhaltsflaeche
   der Schrift plus zweimal 14px Padding, darum line-height als calc mit
   genau diesem Aufbau und etwas Luft in der em-Zahl. */
.poem{
  font-size:clamp(1.1rem,1.55vw,1.25rem);
  font-weight:400;
  line-height:calc(1.3em + 28px);
  max-width:calc(26ch + 44px);
  color:rgba(255,231,242,.85);
}
.poem span{
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  background:var(--nacht);
  padding:14px 22px;
}

/* ---------- Fortschrittsring ---------- */
#ab-ring{
  position:fixed;
  right:clamp(16px,2.6vw,34px);
  bottom:clamp(16px,2.6vw,34px);
  z-index:3;
  display:flex;
  align-items:center;
  gap:.7em;
  flex-direction:row-reverse;
  pointer-events:none;
}
#ab-ring .dot{fill:var(--papier);fill-opacity:.34;transition:none}
#ab-ring .dot.on{fill:var(--r4);fill-opacity:1;r:3.5}
.ring-label{
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--papier);
  opacity:.64;
  white-space:nowrap;
}
#ab-ringnum{color:var(--papier);opacity:1}

/* ---------- Footer ---------- */
#ab-footer{
  position:fixed;
  left:clamp(16px,2.6vw,34px);
  bottom:clamp(16px,2.6vw,34px);
  z-index:3;
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--papier);
  opacity:.64;
}
#ab-footer a{color:var(--papier);text-decoration:none;border-bottom:1px solid rgba(229,48,159,.7)}
#ab-footer a:hover{color:var(--r5);border-bottom-color:var(--r5)}

/* ---------- Intro ---------- */
#ab-intro{
  position:fixed;
  inset:0;
  z-index:4;
  display:grid;
  place-items:center;
  text-align:center;
  pointer-events:none;
  padding:5vw;
  transition:opacity .3s ease-in;
}
#ab-intro.gone{opacity:0}
#ab-intro[hidden]{display:none}
.intro-in{
  position:relative;
  padding:clamp(20px,3vw,40px);
}
/* Kein Block-Scrim mehr (Fix Runde 6). Das halbdeckende Rechteck ueber der
   ganzen Grid-Zelle war rund 830 mal 290 Pixel gross, waehrend nur die
   Titelzeile es ausfuellte: seine harten Kanten schnitten quer durch die
   Auge-Figur, und das ist das erste Bild der Seite. Ersatz ist dieselbe
   Plakat-Logik wie in 14.1, enge volldeckende Plaketten exakt auf Textbreite.
   Der Titel bekommt wie das Kapitelwort keine, er traegt sich selbst.
   Zusaetzlich weicht die Figur waehrend des Intros nach rechts aus
   (engine.js, introShift). */
.intro-sub,
.intro-hint{
  width:fit-content;
  margin-left:auto;
  margin-right:auto;
  background:var(--nacht);
  padding:14px 22px;
}
.intro-title{
  font-family:"Shrikhand","ManropeFallback",Georgia,serif;
  font-size:clamp(2.6rem,7.5vw,6rem);
  line-height:1.05;
  color:var(--papier);
  letter-spacing:.01em;
}
.intro-sub{
  margin-top:.7em;
  font-size:clamp(1rem,1.5vw,1.2rem);
  color:var(--papier);
  opacity:.85;
}
.intro-hint{
  margin-top:2.1em;
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--papier);
  opacity:.72;
}
.i1,.i2,.i3{opacity:0;transform:translate3d(0,14px,0);animation:ab-in .72s var(--ease-in-soft) forwards}
.i1{animation-delay:.10s}
.i2{animation-delay:.22s}
.i3{animation-delay:.34s}
@keyframes ab-in{to{opacity:1;transform:translate3d(0,0,0)}}

/* ---------- HUD ---------- */
#ab-hud{
  position:fixed;
  left:clamp(16px,2.6vw,34px);
  top:clamp(16px,2.6vw,34px);
  z-index:5;
  font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--papier);
  background:rgba(26,11,38,.86);
  border:1px solid rgba(166,43,240,.5);
  padding:8px 11px;
  white-space:pre;
  pointer-events:none;
}
#ab-hud[hidden]{display:none}
#ab-hud.hot{color:var(--r5);border-color:var(--r5)}

/* ---------- A11y ---------- */
.sr-only{
  position:absolute!important;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;border:0;
}
.skip{
  position:absolute;
  left:12px;top:-64px;
  z-index:9;
  background:var(--r4);
  color:var(--tinte);
  font-weight:700;
  padding:10px 16px;
  text-decoration:none;
  transition:top .18s ease-in;
}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--r5);outline-offset:3px}

#ab-noscript{
  position:fixed;
  inset:0;
  z-index:8;
  background:var(--nacht);
  color:var(--papier);
  padding:clamp(24px,6vw,80px);
  overflow:auto;
}
#ab-noscript .ns-title{
  font-family:"Shrikhand","ManropeFallback",Georgia,serif;
  font-size:clamp(2.4rem,7vw,5rem);
  margin-bottom:.4em;
}
#ab-noscript ol{margin:1.4em 0 1.4em 1.3em;max-width:46ch}
#ab-noscript li{margin-bottom:.5em}
#ab-noscript a{color:var(--r5)}

/* ---------- Mobil ---------- */
@media (max-width:720px){
  #ab-stage{padding:0 20px;align-content:end;padding-bottom:19vh}
  .chapter.side-l .block,.chapter.side-r .block{grid-column:1 / -1}
  .word{font-size:clamp(3rem,15vw,5rem)}
  .word .word-echo{left:4px;top:4px;-webkit-text-stroke-width:1.5px}
  .poem{max-width:calc(24ch + 44px)}
  #ab-footer{font-size:.68rem;max-width:52vw}
  .ring-label{display:none}
}

@media (prefers-reduced-motion:reduce){
  .i1,.i2,.i3{animation:none;opacity:1;transform:none}
  #ab-intro{transition:none}
  .skip{transition:none}
}