/* ═════════════════════════════════════════════════════════════════════
   MAKE IT — Röhre
   Gemeinsame Gestaltung für die Startseite (Fernseher im Raum) und für
   die Unterseiten (das Innere der Röhre im Vollbild).
   ═════════════════════════════════════════════════════════════════════ */

/* ── Schriften ────────────────────────────────────────────────────── */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;
  font-display:swap;src:url('fonts/archivo-variable.woff2') format('woff2-variations')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;
  font-display:swap;src:url('fonts/jetbrains-mono-variable.woff2') format('woff2-variations')}

/* ── Marken-Tokens und Geometrie des Fernsehers ───────────────────── */
:root{
  --mi-ink:#14140E; --mi-deep:#1D1D14; --mi-forest:#292E1D;
  --mi-moss:#3D4A32; --mi-sage:#6C805E; --mi-haze:#B2C2A7;
  --mi-bone:#F1EBDE; --mi-sand:#C2A87C;
  --mi-display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mi-mono:'JetBrains Mono',Menlo,Consolas,monospace;

  --room:#050704;
  /* Grundton der Bildröhre — Startseite und Unterseiten teilen ihn sich,
     damit der Wechsel im Rauschen nicht auffällt. */
  --tube:radial-gradient(78% 68% at 50% 46%, #13160F 0%, #090A07 62%, #06070A 100%);

  /* Lage der freigestellten Bildröhre im Bild, in % — nicht ändern,
     solange assets/tv.webp unverändert bleibt */
  --hole-x:25.384%; --hole-y:12.796%; --hole-w:36.742%; --hole-h:68.246%;

  /* Bild 6181 x 2532 = 2.44115 : 1 — Mitte der Röhre bei 43.755% / 46.919% */
  --tv-ar:2.44115;

  /* Grundregel: das Bild füllt die Fensterhöhe.
     Zweiter Wert bremst nur, wenn die Röhre sonst breiter würde als das
     Fenster — auf Hochformaten. 2.6128 = 96% Fensterbreite / 36.742%.  */
  /* svh statt vh: Am Handy klappt die Adressleiste beim Scrollen und beim
     Seitenwechsel ein und aus — mit vh ändert sich dabei die Größe des
     Fernsehers mitten in der Bewegung, und alles verrutscht. svh ist die
     kleinste Fenstergröße und bleibt deshalb konstant. */
  --W:min( calc(100vh * 2.44115), calc(100vw * 2.6128) );
  --H:calc(var(--W) / var(--tv-ar));
}
@supports (height: 100svh){
  :root{
    --W:min( calc(100svh * 2.44115), calc(100vw * 2.6128) );
    --H:calc(var(--W) / var(--tv-ar));
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--mi-ink)}
body{font-family:var(--mi-display);color:var(--mi-bone);-webkit-font-smoothing:antialiased}

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

/* ═════════════════════════════════════════════════════════════════════
   GEMEINSAME RÖHRENEFFEKTE
   ═════════════════════════════════════════════════════════════════════ */
.noise{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  image-rendering:pixelated;opacity:1;transition:opacity .5s ease}

.fx{position:absolute;inset:0;pointer-events:none}
.fx--lines{background:repeating-linear-gradient(to bottom,
  rgba(0,0,0,0) 0 2px, rgba(0,0,0,.46) 2px 4px);mix-blend-mode:multiply}
.fx--roll{background:linear-gradient(to bottom,
  rgba(241,235,222,0) 0%, rgba(241,235,222,.055) 42%, rgba(241,235,222,.12) 50%,
  rgba(241,235,222,.055) 58%, rgba(241,235,222,0) 100%);
  height:26%;animation:roll 9s linear infinite}
@keyframes roll{from{transform:translateY(-140%)}to{transform:translateY(560%)}}
.fx--vig{background:radial-gradient(115% 120% at 50% 50%,
  rgba(0,0,0,0) 42%, rgba(0,0,0,.55) 88%, rgba(0,0,0,.8) 100%)}

/* Kanalwechsel: kurzer heller Schlag */
.flash{position:absolute;inset:0;z-index:40;background:var(--mi-bone);
  opacity:0;pointer-events:none}
.flash.is-on{animation:flash .5s ease-out forwards}
@keyframes flash{0%{opacity:.9} 14%{opacity:.05} 22%{opacity:.7} 100%{opacity:0}}

/* ═════════════════════════════════════════════════════════════════════
   STARTSEITE — Raum und Fernseher
   ═════════════════════════════════════════════════════════════════════ */
/* Die Höhe des Raums muss zu der Einheit passen, mit der der Fernseher
   bemessen ist. Sonst wird er in einem zu hohen Raum zentriert und
   rutscht nach unten — genau das passierte, als --W auf svh umgestellt
   wurde, der Raum aber bei inset:0 blieb. */
.room{position:fixed;inset:0;overflow:hidden;background:
  radial-gradient(120% 100% at 44% 40%, #0D110B 0%, #070906 58%, var(--room) 100%)}
@supports (height: 100svh){
  .room{height:100svh}
}
/* Klappt die Adressleiste ein, bleibt unten ein Streifen frei. Er hat die
   Farbe, in die der Raum ohnehin ausläuft, und fällt deshalb nicht auf. */
body.startseite{overflow:hidden;background:var(--room)}

/* Ausgerichtet wird am Gerät, nicht an der Bildröhre: der Kasten hat seine
   Mitte bei 49.029% der Bildbreite, die Röhre wegen des Lautsprecherfelds
   rechts schon bei 43.755%. Zwei Bremsen: kein freier Streifen am
   Fensterrand (min) und die Röhre bleibt ganz im Bild (max). */
.tv{position:absolute;width:var(--W);height:var(--H);
  left:max(
        min( calc(50% - var(--W) * 0.49029), max(0px, calc(100% - var(--W))) ),
        calc(2% - var(--W) * 0.25384)
      );
  top: min( calc(50% - var(--H) * 0.46919), max(0px, calc(100% - var(--H))) );
  /* Dreh- und Angelpunkt beim Hineinzoomen ist die Mitte der Bildröhre */
  transform-origin:43.755% 46.919%;
  will-change:transform}

/* Hochformat: hier ist die Röhre der ganze Bildausschnitt, also wird sie
   zentriert — das Gerät ist seitlich ohnehin angeschnitten. */
@media (max-aspect-ratio:934/1000){
  .tv{left:min( calc(50% - var(--W) * 0.43755), max(0px, calc(100% - var(--W))) )}

  /* Das Bild füllt die Höhe nicht mehr — oben und unten bleibt Raum
     frei, und die gerade Schnittkante des Fotos steht hart darin.

     Früher lag hier ein Farbverlauf über der Kante. Das ging nicht auf:
     Der Raum ist ein Verlauf, seine Farbe ändert sich mit der Höhe, und
     ein fester Farbwert trifft sie nie genau — es blieb ein Band
     sichtbar, das ins Grünliche kippte. Jetzt wird stattdessen das Foto
     selbst an den Rändern durchsichtig. Dann gibt es keine Farbe, die
     passen müsste, sondern nur noch das Bild, das in den Raum
     übergeht. */
  .tv__shell{
    -webkit-mask-image:linear-gradient(to bottom,
      rgba(0,0,0,0) 0%, #000 8%, #000 86%, rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(to bottom,
      rgba(0,0,0,0) 0%, #000 8%, #000 86%, rgba(0,0,0,0) 100%)}
}

.tv__shell{position:absolute;inset:0;z-index:2;width:100%;height:100%;
  pointer-events:none;user-select:none;-webkit-user-drag:none}

/* Lichtschein der Röhre auf Rahmen und Wand */
.tv__spill{position:absolute;z-index:3;pointer-events:none;
  left:calc(var(--hole-x) - 6%); top:calc(var(--hole-y) - 9%);
  width:calc(var(--hole-w) + 12%); height:calc(var(--hole-h) + 18%);
  background:radial-gradient(closest-side, rgba(178,194,167,.20), rgba(178,194,167,0) 72%);
  mix-blend-mode:screen;opacity:0;transition:opacity 1.4s ease}
.room[data-phase="sign"] .tv__spill,
.room[data-phase="logo"] .tv__spill,
.room[data-phase="menu"] .tv__spill{opacity:1}

/* ── Die Bildröhre ────────────────────────────────────────────────── */
.screen{position:absolute;z-index:1;
  left:var(--hole-x); top:var(--hole-y); width:var(--hole-w); height:var(--hole-h);
  container-type:inline-size;
  background:var(--tube);
  overflow:hidden;
  transform-origin:50% 50%}

/* Einschaltmoment: Strich zieht auf */
.room[data-phase="off"] .screen{transform:scaleY(.004) scaleX(1);filter:brightness(3)}
.room[data-phase="strike"] .screen{animation:strike .62s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes strike{
  0%{transform:scaleY(.004) scaleX(1);filter:brightness(4)}
  38%{transform:scaleY(.02) scaleX(1);filter:brightness(3.4)}
  100%{transform:scaleY(1) scaleX(1);filter:brightness(1)}
}

.room[data-phase="sign"] .noise{opacity:.30}
.room[data-phase="logo"] .noise{opacity:.22}
.room[data-phase="menu"] .noise{opacity:.13}

/* Spurfehler: waagrechter Versatz, alle paar Sekunden */
.screen.is-tracking .plate{animation:tracking .42s steps(3) 1}
@keyframes tracking{
  0%{transform:translateX(0)} 20%{transform:translateX(-2.2%)}
  55%{transform:translateX(1.6%)} 80%{transform:translateX(-.7%)}
  100%{transform:translateX(0)}
}

/* ── Inhalt der Röhre ─────────────────────────────────────────────── */
.plate{position:absolute;inset:0;z-index:2;overflow:hidden;
  display:flex;flex-direction:column;
  padding:6.5cqw 8cqw 6cqw;
  text-shadow:.09cqw 0 rgba(194,168,124,.45), -.09cqw 0 rgba(108,128,94,.45)}

.osd{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mi-mono);font-size:max(9px,2.05cqw);letter-spacing:.1em;
  color:var(--mi-sand);opacity:0;transition:opacity .6s ease}
.room[data-phase="menu"] .osd{opacity:.85}
.osd__play::before{content:'\25B6';margin-right:.5em;font-size:.85em}

/* ── Logo ──────────────────────────────────────────────────────────────
   Die Marke liegt im Textfluss immer schon dort, wo sie im Menü steht.
   Größe und Weg zur Bildmitte macht ausschließlich transform, deshalb muss
   der Browser beim Hochgleiten nichts neu umbrechen. --mark-lift setzt das
   Skript, sobald die Maße feststehen. */
.mark{position:relative;flex:0 0 auto;margin:1.5cqw 0 0;opacity:0;
  font-weight:inherit;will-change:transform;
  transform:translateY(var(--mark-lift,0px)) scale(3.1);
  transition:transform .82s cubic-bezier(.22,.9,.25,1), opacity .45s ease}
.mark.is-measuring{transform:none!important;transition:none!important}
/* Beim Messen müssen Röhre UND Gerät unverschoben sein. Stand der
   Fernseher noch im Zoom, kamen vorher Werte aus dem vergrößerten
   Koordinatensystem heraus — daher die verrutschten Menüs. */
.screen.is-measuring,
.tv.is-measuring{transform:none!important;animation:none!important;
  transition:none!important}
.mark.is-settling{transition:none!important}

/* Der Kasten hat die Maße der Wortmarke. Das Signet sitzt deckungsgleich
   auf deren linkem Drittel — beide gleich hoch, damit die Striche passen. */
.mark__box{position:relative;display:block;width:34cqw;margin:0 auto;
  transform:translateX(34.72%);
  transition:transform .7s cubic-bezier(.22,.9,.25,1)}
.mark__word{display:block;width:100%;height:auto;opacity:0;
  transition:opacity .5s ease .12s}
.mark__sign{position:absolute;left:0;top:0;height:100%;width:auto;
  opacity:.96;transition:opacity .34s ease}

.mark__claim{position:absolute;top:100%;left:50%;margin-top:2.2cqw;
  transform:translateX(-50%);white-space:nowrap;
  font-family:var(--mi-mono);font-size:1.15cqw;
  letter-spacing:.42em;color:var(--mi-haze);
  opacity:0;transition:opacity .6s ease}

.room[data-phase="sign"] .mark{opacity:1;
  transform:translateY(var(--mark-lift,0px)) scale(2.6);
  animation:punch .46s ease-out}
.room[data-phase="sign"] .mark__claim{opacity:1;transition-delay:.3s}
@keyframes punch{from{filter:blur(.5cqw)} to{filter:blur(0)}}

/* Verwandlung: der Kasten klappt nach rechts auf, das Signet gibt ab */
.room[data-phase="logo"] .mark{opacity:1;
  transform:translateY(var(--mark-lift,0px)) scale(1.8235)}
.room[data-phase="logo"] .mark__box{transform:translateX(0)}
.room[data-phase="logo"] .mark__sign{opacity:0}
.room[data-phase="logo"] .mark__word{opacity:1}
.room[data-phase="logo"] .mark__claim{opacity:1}

.room[data-phase="menu"] .mark{opacity:1;transform:none}
.room[data-phase="menu"] .mark__box{transform:translateX(0)}
.room[data-phase="menu"] .mark__sign{opacity:0}
.room[data-phase="menu"] .mark__word{opacity:1}
.room[data-phase="menu"] .mark__claim{opacity:0;transition-duration:.25s}

/* ── Menü ─────────────────────────────────────────────────────────── */
.menu{display:none;margin:auto 0;flex-direction:column;align-items:flex-start;
  align-self:center}
.room[data-phase="menu"] .menu{display:flex}

/* WICHTIG: Die Einträge sind von sich aus sichtbar. Die Animation macht
   nur den Auftritt — sie lässt sie über "backwards" während der Wartezeit
   verschwinden und wieder auftauchen. Läuft sie nicht durch, weil das
   Gerät im Energiesparmodus Animationen unterdrückt, steht trotzdem
   alles da. Vorher hing die Sichtbarkeit am Ende der Animation, und
   einzelne Einträge blieben unsichtbar. */
.menu__item{position:relative;display:block;text-decoration:none;color:var(--mi-haze);
  font-weight:520;font-stretch:96%;letter-spacing:.19em;text-transform:uppercase;
  font-size:max(13px,4.3cqw);line-height:1.62;
  background:none;border:0;cursor:pointer;text-align:left;font-family:inherit;
  transition:color .14s linear}
.room[data-phase="menu"] .menu__item{animation:wipe .26s ease backwards;
  animation-delay:calc(var(--i) * 70ms + 120ms)}
@keyframes wipe{
  from{opacity:0;transform:translateX(-1.4cqw)}
  to{opacity:1;transform:translateX(0)}
}

.menu__item::before{content:'\25B6';position:absolute;left:-1.5em;
  color:var(--mi-sand);opacity:0;font-size:.62em;top:.62em;
  transform:translateX(-.4em)}
.menu__item[aria-current="true"]{color:var(--mi-bone)}
.menu__item[aria-current="true"]::before{opacity:1;transform:translateX(0);
  transition:transform .12s steps(2), opacity .12s linear}
.menu__item:focus-visible{outline:2px solid var(--mi-sand);outline-offset:.3em}

.menu__rule{width:26cqw;height:1px;background:var(--mi-sage);
  margin:2cqw 0 1.6cqw}
.room[data-phase="menu"] .menu__rule{animation:wipe .3s ease backwards;
  animation-delay:calc(var(--i) * 70ms + 120ms)}
.menu__item--minor{font-size:max(9px,2.2cqw);letter-spacing:.24em;
  font-family:var(--mi-mono);color:var(--mi-sage)}
.menu__extra{display:flex;flex-direction:column;align-items:flex-start}

.foot{display:flex;justify-content:space-between;align-items:baseline;gap:2cqw;
  font-family:var(--mi-mono);font-size:max(9px,1.95cqw);letter-spacing:.09em;
  color:var(--mi-sage);opacity:0;transition:opacity .6s ease}
.room[data-phase="menu"] .foot{opacity:1}
.foot__desc{color:var(--mi-haze);text-align:center;flex:1 1 auto}
.foot__keys{white-space:nowrap}

/* ═════════════════════════════════════════════════════════════════════
   ÜBERGANG — in die Röhre hinein und wieder heraus
   Beim Auswählen fährt der Fernseher auf die Bildröhre zu, bis sie das
   Fenster füllt; gleichzeitig zieht das Rauschen auf volle Deckung. Am
   Ende ist nur noch Rauschen zu sehen, und genau damit beginnt die
   Unterseite — deshalb fällt der Seitenwechsel nicht auf.
   ═════════════════════════════════════════════════════════════════════ */
.room.is-zoom .tv{transition:transform .64s cubic-bezier(.55,.06,.30,1)}
.room.is-zoom .plate,
.room.is-zoom .screen .fx{opacity:0;transition:opacity .30s ease}

/* Die Vignette der kleinen Röhre wird beim Zoomen gegen eine
   fenstergroße getauscht. Dadurch ist die Abdunklung am Rand im Moment
   des Seitenwechsels auf beiden Seiten exakt dieselbe. */
.raum-vig{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:0;
  background:radial-gradient(115% 120% at 50% 50%,
    rgba(0,0,0,0) 42%, rgba(0,0,0,.55) 88%, rgba(0,0,0,.8) 100%);
  transition:opacity .30s ease}
.room.is-zoom .raum-vig,
.room.is-ankunft-still .raum-vig{opacity:1}
.room.is-ankunft .raum-vig{opacity:0;transition:opacity .55s ease .15s}

/* Bei der Ankunft aus einer Unterseite steht die Marke schon im Menü —
   sie soll nicht erst aus dem Vorspann-Zustand heranfahren. Ohne das
   blieb am Handy das halb aufgeklappte Signet stehen. */
.room.is-ankunft-still .mark,
.room.is-ankunft-still .mark__box,
.room.is-ankunft-still .mark__word,
.room.is-ankunft-still .mark__sign,
.room.is-ankunft-still .menu__item,
.room.is-ankunft-still .menu__rule{transition:none!important;animation:none!important}

/* Ankunft aus einer Unterseite: gleicher Weg rückwärts.
   1s, und die Kurve ist bewusst nicht kopflastig. Vorher lagen bei
   .72s mit cubic-bezier(.2,.75,.3,1) schon nach der halben Zeit 92
   Prozent der Strecke hinter dem Fernseher — er schoss heraus und
   kroch den Rest. Jetzt beginnt die Fahrt ruhig, hat ihre Kraft in
   der Mitte und setzt weich auf, passend zum Hineinzoomen. Die Dauer
   steht als ANKUNFT_MS auch in roehre.js. */
.room.is-ankunft .tv{animation:ankunftFahrt 1s cubic-bezier(.45,.08,.25,1) backwards}
@keyframes ankunftFahrt{
  from{transform:var(--zoom)}
  to{transform:none}
}
.room.is-ankunft-still .plate,
.room.is-ankunft-still .screen .fx{opacity:0}
/* Menü und Röhreneffekte kommen mit der Fahrt, nicht vorweg: sie sind
   kurz vor dem Aufsetzen des Fernsehers da. */
.room.is-ankunft .plate,
.room.is-ankunft .screen .fx{transition:opacity .62s ease .26s}

/* ═════════════════════════════════════════════════════════════════════
   UNTERSEITEN — das Innere der Röhre im Vollbild
   ═════════════════════════════════════════════════════════════════════ */
body.unterseite{overflow:hidden;background:#090A07}

.tube{position:fixed;inset:0;overflow:hidden;background:var(--tube)}
/* Schichtung genau wie in der kleinen Röhre der Startseite:
   Inhalt, Zeilenraster, dann Rauschen, und ganz oben die Vignette.
   Nur so sieht der Moment des Seitenwechsels auf beiden Seiten gleich
   aus — bis in die abgedunkelten Ränder hinein. */
.tube .noise{position:fixed;z-index:28}
.tube .fx{position:fixed;z-index:26}
.tube .fx--vig{z-index:30}
/* Über langen Fließtext gehört ein feineres Zeilenraster als über
   vier Menüzeilen. */
.tube .fx--lines{background:repeating-linear-gradient(to bottom,
  rgba(0,0,0,0) 0 2px, rgba(0,0,0,.26) 2px 4px)}

/* Beim Ankommen und beim Verlassen deckt das Rauschen alles zu */
.tube[data-state="still"] .noise{opacity:1;transition:none}
.tube[data-state="still"] .fx--lines,
.tube[data-state="still"] .fx--roll,
.tube[data-state="still"] .seite,
.tube[data-state="still"] .leiste{opacity:0}
.tube[data-state="an"] .noise{opacity:.11}
.tube[data-state="weg"] .noise{opacity:1;transition:opacity .30s ease}
.tube[data-state="weg"] .seite,
.tube[data-state="weg"] .leiste{opacity:0;transition:opacity .22s ease}

.tube .fx--lines,
.tube .fx--roll,
.tube .seite,
.tube .leiste{transition:opacity .7s ease}

/* Spurfehler auf der Unterseite */
.tube.is-tracking .seite{animation:tracking .42s steps(3) 1}

/* ── Betriebsanzeige oben, Kanalleiste unten ──────────────────────── */
.leiste{position:fixed;left:0;right:0;z-index:32;
  display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  padding:0 clamp(1.1rem, 4vw, 3.4rem);
  font-family:var(--mi-mono);letter-spacing:.11em;
  font-size:clamp(9px, 1.5vw, 12px);color:var(--mi-sand)}
/* Weicher Schleier, damit gescrollter Text hinter den Leisten
   verschwindet statt sie zu kreuzen */
.schleier{position:fixed;left:0;right:0;z-index:31;pointer-events:none;
  height:clamp(4rem, 11vh, 6.5rem)}
.schleier--oben{top:0;background:linear-gradient(to bottom,
  #090A07 18%, rgba(9,10,7,.72) 52%, rgba(9,10,7,0))}
.schleier--unten{bottom:0;background:linear-gradient(to top,
  #090A07 32%, rgba(9,10,7,.78) 62%, rgba(9,10,7,0))}

.leiste--oben{top:clamp(.9rem, 2.6vh, 1.8rem)}
/* Unten stehen die Kanalwechsel — die einzigen anklickbaren Dinge der
   Leiste. Die gehören heller als der Claim in der Mitte, der nur
   mitläuft. Vorher war es umgekehrt, und die Links verschwanden fast
   im Hintergrund. */
.leiste--unten{bottom:clamp(.9rem, 2.6vh, 1.8rem);color:var(--mi-sand)}
.leiste--unten .leiste__mitte{color:var(--mi-sage)}
.leiste a{color:inherit;text-decoration:none;white-space:nowrap}
.leiste a:hover,.leiste a:focus-visible{color:var(--mi-bone)}
.leiste__mitte{flex:1 1 auto;text-align:center;color:var(--mi-haze);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Scrollbereich und Satzspiegel ────────────────────────────────── */
/* Kein z-index hier: Sonst sperrt dieser Bereich alles darin unter die
   Röhreneffekte ein, und die Bilder könnten nicht darüber steigen. */
.tube__scroll{position:absolute;inset:0;
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--mi-moss) transparent}
.tube__scroll::-webkit-scrollbar{width:7px}
.tube__scroll::-webkit-scrollbar-thumb{background:var(--mi-moss);border-radius:4px}

.seite{max-width:62rem;margin:0 auto;
  padding:clamp(5rem, 13vh, 7.5rem) clamp(1.1rem, 4vw, 3.4rem) clamp(6.5rem, 17vh, 9.5rem);
  text-shadow:.6px 0 rgba(194,168,124,.32), -.6px 0 rgba(108,128,94,.32)}

.seite__nummer{font-family:var(--mi-mono);font-size:clamp(10px,1.6vw,13px);
  letter-spacing:.3em;color:var(--mi-sand);display:block;margin-bottom:.9rem}
.seite__titel{font-weight:560;font-stretch:94%;letter-spacing:.17em;
  text-transform:uppercase;line-height:1.05;color:var(--mi-bone);
  font-size:clamp(1.9rem, 7vw, 4.1rem)}
.seite__strich{width:min(16rem,42%);height:1px;background:var(--mi-sage);
  margin:clamp(1.3rem,3.5vh,2.1rem) 0}
.lede{font-size:clamp(1.02rem, 2.3vw, 1.35rem);line-height:1.62;
  color:var(--mi-bone);max-width:44ch;font-weight:380}

.block{margin-top:clamp(2.6rem, 7vh, 4.4rem)}
.block__titel{font-family:var(--mi-mono);font-size:clamp(10px,1.6vw,13px);
  letter-spacing:.3em;text-transform:uppercase;color:var(--mi-sand);
  margin-bottom:1.1rem}
.block p{color:var(--mi-haze);line-height:1.72;max-width:58ch;
  font-size:clamp(.95rem,1.9vw,1.06rem);font-weight:360}
.block p + p{margin-top:.95rem}
.block strong{color:var(--mi-bone);font-weight:560}

/* Aufzählung im Stil der Kanalliste */
.liste{list-style:none;max-width:58ch}
.liste li{position:relative;padding-left:1.7em;color:var(--mi-haze);
  line-height:1.7;font-size:clamp(.95rem,1.9vw,1.06rem);font-weight:360}
.liste li + li{margin-top:.6rem}
.liste li::before{content:'\25B8';position:absolute;left:0;top:0;
  color:var(--mi-sand);font-size:.85em;line-height:1.95}

/* ── Werkliste: jeder Eintrag wie ein Kanal im Programm ───────────── */
.werke{display:grid;gap:1px;background:var(--mi-moss);
  border-block:1px solid var(--mi-moss);margin-top:1.4rem}
.werk{display:grid;grid-template-columns:4.5rem 1fr auto;gap:1.2rem;
  align-items:baseline;padding:1.15rem .2rem;background:#0A0C08;
  color:var(--mi-haze);text-decoration:none}
.werk__ch{font-family:var(--mi-mono);font-size:clamp(10px,1.5vw,12px);
  letter-spacing:.22em;color:var(--mi-sand)}
.werk__titel{font-weight:520;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mi-bone);font-size:clamp(.95rem,2.1vw,1.15rem)}
.werk__was{display:block;margin-top:.35rem;letter-spacing:0;text-transform:none;
  color:var(--mi-haze);font-size:clamp(.85rem,1.7vw,.95rem);font-weight:360}
.werk__jahr{font-family:var(--mi-mono);font-size:clamp(10px,1.5vw,12px);
  color:var(--mi-sage)}

/* ── Hinweiskasten für noch einzutragende Angaben ─────────────────── */
.platzhalter{border:1px dashed var(--mi-moss);padding:1rem 1.2rem;
  margin-top:1rem;color:var(--mi-sage);font-family:var(--mi-mono);
  font-size:clamp(11px,1.7vw,13px);line-height:1.75;max-width:52ch}
.platzhalter b{color:var(--mi-sand);font-weight:500}

/* ── Kontaktzeilen ────────────────────────────────────────────────── */
.zeilen{display:grid;gap:.75rem;margin-top:1.2rem}
.zeile{display:grid;grid-template-columns:9.2rem 1fr;gap:1.1rem;align-items:baseline}
.zeile dt{font-family:var(--mi-mono);font-size:clamp(10px,1.6vw,12px);
  letter-spacing:.2em;text-transform:uppercase;color:var(--mi-sage);
  overflow-wrap:anywhere}
.zeile dd{color:var(--mi-bone);font-size:clamp(.95rem,1.9vw,1.06rem)}
.zeile a{color:var(--mi-bone);text-decoration:none;
  border-bottom:1px solid var(--mi-moss);padding-bottom:.1em}
.zeile a:hover{border-bottom-color:var(--mi-sand);color:var(--mi-sand)}

/* ── Großer Rücksprung am Seitenende ──────────────────────────────── */
.weiter{display:flex;flex-wrap:wrap;gap:1.6rem 2.6rem;align-items:baseline;
  margin-top:clamp(3rem,8vh,5rem);padding-top:1.6rem;
  border-top:1px solid var(--mi-moss)}
.weiter a{font-family:var(--mi-mono);font-size:clamp(11px,1.8vw,13px);
  letter-spacing:.22em;text-transform:uppercase;color:var(--mi-haze);
  text-decoration:none}
.weiter a:hover,.weiter a:focus-visible{color:var(--mi-sand)}

/* ── Hochformat: Kanalleiste unten verschlankt ────────────────────── */
@media (max-width:560px){
  .leiste--unten .leiste__mitte{display:none}
  .werk{grid-template-columns:3.4rem 1fr;gap:.9rem}
  .werk__jahr{grid-column:2;margin-top:.3rem}
  .zeile{grid-template-columns:1fr;gap:.2rem}
}

/* ═════════════════════════════════════════════════════════════════════
   Für Menschen, die Bewegung reduziert haben
   ═════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .fx--roll{display:none}
  .room[data-phase="strike"] .screen{animation:none;transform:none;filter:none}
  .room[data-phase="sign"] .mark,
  .room[data-phase="logo"] .mark,
  .room[data-phase="menu"] .menu__item,
  .room[data-phase="menu"] .menu__rule{animation:none;opacity:1;transform:none}
  .screen.is-tracking .plate,
  .tube.is-tracking .seite{animation:none}
  .flash.is-on{animation:none}
  .mark,.mark__box,.mark__word,.mark__sign{transition:none;animation:none}
  .room[data-phase="sign"] .mark__sign,
  .room[data-phase="logo"] .mark{transform:translateY(var(--mark-lift,0px)) scale(1.8235)}
  .room.is-zoom .tv,.room.is-ankunft .tv{transition:none}
}

/* Sehr flache Fenster: Logo weg, Platz gehört dem Menü */
@media (max-height:430px) and (orientation:landscape){
  .room[data-phase="menu"] .mark{display:none}
  .plate{padding:4cqw 7cqw}
}

/* ── Kleine Röhre: Handy im Hochformat ─────────────────────────────────
   Ohne Maus bringt die Fußzeile nichts — weder die Tastenhilfe noch die
   Erklärzeile, die sonst beim Überfahren erscheint. Der Platz geht an die
   Einträge: größere Schrift, größere Tippflächen, und Impressum und
   Datenschutz rücken nebeneinander in eine Zeile. */
@container (max-width: 430px){
  .foot{display:none}
  .plate{padding:4cqw 6cqw}
  .menu__item{font-size:max(17px,5.4cqw);line-height:1.5;padding-block:.32em;
    letter-spacing:.15em}
  .menu__item--minor{font-size:max(10px,3cqw);padding-block:.26em;
    letter-spacing:.18em}
  .menu__rule{width:34cqw;margin:1.3cqw 0 1cqw}
  /* Fünf Hauptpunkte brauchen Platz — die Marke rückt enger und kleiner */
  .mark{margin-top:1cqw}
  .mark__box{width:31cqw}
  .menu__extra{flex-direction:row;gap:2.2em;align-items:baseline}
}

@container (max-width: 330px){
  .plate{padding:2.6cqw 5cqw}
  .menu__item{padding-block:.14em;line-height:1.38}
  .menu__extra{gap:1.6em}
}

/* ═════════════════════════════════════════════════════════════════════
   FILM AUF DER STARTSEITE
   Liegt in der Röhre unter dem Rauschen, deshalb legt sich Körnung und
   Zeilenraster darüber wie über alles andere. Zwei Betriebsarten, siehe
   FILM_MODUS in roehre.js: "dauer" läuft durch, "vorspann" friert ein,
   sobald das Menü steht.
   ═════════════════════════════════════════════════════════════════════ */
.film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;pointer-events:none;transition:opacity 1.1s ease}
.room[data-phase="sign"] .film,
.room[data-phase="logo"] .film{opacity:.72}
.room[data-phase="menu"] .film{opacity:.62}
.room[data-film="aus"] .film{display:none}

/* ═════════════════════════════════════════════════════════════════════
   BILDSTRECKEN
   ═════════════════════════════════════════════════════════════════════ */
/* Umschalter zwischen mehreren Strecken — die Kanalwahl der Seite.
   Auf schmalen Geräten darf die Reihe seitlich geschoben werden, statt
   umzubrechen; so bleibt erkennbar, dass noch mehr dahinter liegt. */
.strecken__wahl{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.25rem}
.strecken__knopf{display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--mi-mono);font-size:clamp(10px, 1.6vw, 12px);
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--mi-sage);background:none;cursor:pointer;
  border:1px solid var(--mi-moss);border-radius:0;
  padding:.72em 1.15em;
  transition:color .18s ease, border-color .18s ease, background .18s ease}
.strecken__knopf:hover{color:var(--mi-haze);border-color:var(--mi-sage)}
.strecken__knopf:focus-visible{outline:2px solid var(--mi-sand);outline-offset:3px}
.strecken__knopf.is-an{color:var(--mi-bone);border-color:var(--mi-sand);
  background:rgba(194,168,124,.09)}
.strecken__zahl{color:var(--mi-sand);font-size:.86em;letter-spacing:.14em}
.strecken__knopf.is-an .strecken__zahl{color:var(--mi-sand)}

/* Die Strecke selbst blendet beim Wechsel kurz auf, damit der Sprung
   nicht hart wirkt. */
.strecke[hidden]{display:none}
.strecke.is-wechsel .galerie{animation:streckeAuf .34s ease backwards}
@keyframes streckeAuf{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .strecke.is-wechsel .galerie{animation:none}
}

.galerie{columns:3 230px;column-gap:10px;margin-top:1.5rem}
.kachel{position:relative;display:block;break-inside:avoid;margin:0 0 10px;
  background:#0A0C08;overflow:hidden;cursor:zoom-in;border:0;padding:0;width:100%}
.kachel img{display:block;width:100%;height:auto;
  filter:saturate(.94) brightness(.97);
  transition:filter .35s ease, transform .6s cubic-bezier(.2,.8,.3,1)}
.kachel:hover img,.kachel:focus-visible img{filter:none;transform:scale(1.03)}
.kachel:focus-visible{outline:2px solid var(--mi-sand);outline-offset:2px}
.kachel__nr{position:absolute;left:.55rem;bottom:.45rem;
  font-family:var(--mi-mono);font-size:10px;letter-spacing:.22em;
  color:var(--mi-sand);opacity:0;transition:opacity .2s ease;
  text-shadow:0 1px 4px rgba(0,0,0,.9)}
.kachel:hover .kachel__nr,.kachel:focus-visible .kachel__nr{opacity:1}

/* Lichtkasten — bleibt unter Zeilenraster, Rauschen und Vignette, damit
   auch das große Bild in der Röhre liegt und nicht davor. */
.kasten{position:fixed;inset:0;z-index:34;display:none;
  background:rgba(6,8,5,.985);place-items:center}
.kasten.is-auf{display:grid}
.kasten__bild{max-width:93vw;max-height:82vh;object-fit:contain;
  box-shadow:0 0 90px rgba(0,0,0,.8)}
.kasten__kopf,.kasten__fuss{position:absolute;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:0 clamp(1.1rem,4vw,3.4rem);
  font-family:var(--mi-mono);font-size:clamp(10px,1.6vw,12px);
  letter-spacing:.2em;color:var(--mi-sage)}
.kasten__kopf{top:clamp(1.4rem,4vh,2.4rem)}
.kasten__fuss{bottom:clamp(1.4rem,4vh,2.4rem)}
.kasten button{background:none;border:0;color:var(--mi-haze);cursor:pointer;
  font:inherit;letter-spacing:.2em;padding:.5em .2em}
.kasten button:hover{color:var(--mi-sand)}
.kasten__zaehler{color:var(--mi-sand)}

/* Solange ein Bild groß offen ist, treten Korn und Zeilenraster zurück —
   sonst frisst die Röhre das Foto auf, das man gerade ansehen will. */
.tube.is-kasten .noise{opacity:.04;transition:opacity .35s ease}
.tube.is-kasten .fx--lines{opacity:.2}
.tube.is-kasten .fx--roll{opacity:0}
.tube .fx--lines,.tube .fx--roll{transition:opacity .35s ease}

/* ═════════════════════════════════════════════════════════════════════
   VORHER UND NACHHER
   Unten liegt das gegradete Bild, darüber das ungegradete, seitlich
   beschnitten. Der Regler ist ein echtes input[type=range], damit
   Tastatur, Maus und Finger ohne Zusatzarbeit funktionieren.
   ═════════════════════════════════════════════════════════════════════ */
.vgl{position:relative;margin-top:1.4rem;background:#0A0C08;overflow:hidden;
  touch-action:pan-y}
.vgl img{display:block;width:100%;height:auto}
.vgl__vorher{position:absolute;inset:0;
  clip-path:inset(0 calc(100% - var(--p,50%)) 0 0)}
.vgl__vorher img{width:100%;height:100%;object-fit:cover}
.vgl__strich{position:absolute;top:0;bottom:0;width:1px;background:var(--mi-bone);
  left:var(--p,50%);pointer-events:none;box-shadow:0 0 12px rgba(0,0,0,.7)}
.vgl__knauf{position:absolute;top:50%;left:var(--p,50%);width:2.3rem;height:2.3rem;
  margin:-1.15rem 0 0 -1.15rem;border:1px solid var(--mi-bone);border-radius:50%;
  pointer-events:none;background:rgba(6,8,5,.45);
  display:grid;place-items:center;color:var(--mi-bone);
  font-family:var(--mi-mono);font-size:11px;letter-spacing:-.05em}
.vgl__regler{position:absolute;inset:0;width:100%;height:100%;margin:0;
  opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:none}
.vgl__regler:focus-visible{opacity:1;outline:2px solid var(--mi-sand);
  outline-offset:-2px;background:none}
.vgl__marke{position:absolute;bottom:.7rem;font-family:var(--mi-mono);
  font-size:clamp(9px,1.5vw,11px);letter-spacing:.24em;pointer-events:none;
  text-shadow:0 1px 5px rgba(0,0,0,.9)}
.vgl__marke--vorher{left:.9rem;color:var(--mi-haze)}
.vgl__marke--nachher{right:.9rem;color:var(--mi-sand)}
.vgl__titel{font-family:var(--mi-mono);font-size:clamp(10px,1.6vw,12px);
  letter-spacing:.22em;text-transform:uppercase;color:var(--mi-sage);
  margin-top:.7rem}

/* ═════════════════════════════════════════════════════════════════════
   REEL
   ═════════════════════════════════════════════════════════════════════ */
.reel{position:relative;margin-top:1.5rem;background:#070906}
.reel video{display:block;width:100%;height:auto}
.reel__hinweis{font-family:var(--mi-mono);font-size:clamp(10px,1.6vw,12px);
  letter-spacing:.18em;color:var(--mi-sage);margin-top:.7rem}

/* ── Videoliste: untereinander, jedes Stück über die volle Breite ── */
.filme{display:grid;gap:clamp(2rem, 5.5vh, 3.4rem);margin-top:1.6rem}
.film-eintrag__bild{background:#070906;border:1px solid var(--mi-moss)}
.film-eintrag video{display:block;width:100%;height:auto}
.film-eintrag__kopf{display:flex;align-items:baseline;gap:1rem;
  margin-top:.85rem;border-top:1px solid var(--mi-moss);padding-top:.7rem}
.film-eintrag__nr{font-family:var(--mi-mono);font-size:clamp(10px,1.5vw,12px);
  letter-spacing:.22em;color:var(--mi-sand);flex:0 0 auto}
.film-eintrag__titel{flex:1 1 auto;font-weight:520;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mi-bone);
  font-size:clamp(.98rem,2.1vw,1.18rem)}
.film-eintrag__jahr{font-family:var(--mi-mono);font-size:clamp(10px,1.5vw,12px);
  color:var(--mi-sage);flex:0 0 auto}
.film-eintrag__text{margin-top:.5rem;color:var(--mi-haze);line-height:1.7;
  max-width:58ch;font-size:clamp(.92rem,1.8vw,1.02rem);font-weight:360}

.vollbreit{max-width:none;margin-top:1.5rem}
.vollbreit img{display:block;width:100%;height:auto}

@media (max-width:560px){
  .galerie{columns:2 140px;column-gap:7px}
  .kachel{margin-bottom:7px}
}

/* ═════════════════════════════════════════════════════════════════════
   HANDY UND TABLET
   Gemessen auf 320 bis 844 px: Tippflächen lagen bei 12 bis 19 px,
   Beschriftungen bei 9 bis 10 px. Am Bildschirm mit Maus geht das, am
   Daumen nicht. Richtwert für eine Tippfläche sind 44 px, für Text
   mindestens 12 px — darunter zoomen Browser von selbst hinein.
   ═════════════════════════════════════════════════════════════════════ */
@media (hover:none), (max-width:760px){

  /* ── Die Leisten oben und unten ──────────────────────────────────
     Die Schrift bleibt klein, die Fläche darum wächst: Abstand nach
     außen statt größerer Buchstaben. */
  .leiste{font-size:max(11px, 1.5vw)}
  .leiste a{padding:.75em .5em;margin:-.75em -.5em;   /* Fläche ohne Verschiebung */
    display:inline-block}

  /* ── Rücksprünge am Seitenende ───────────────────────────────── */
  .weiter{gap:.2rem 1.4rem}
  .weiter a{font-size:max(12px, 1.8vw);padding:.8em .2em;display:inline-block}

  /* ── Verweise im Fließtext ───────────────────────────────────── */
  .zeile dd a{padding:.5em 0;display:inline-block}
  .block p a,.liste a{padding:.35em 0;display:inline-block}

  /* ── Beschriftungen: nie unter 11 px ─────────────────────────── */
  .seite__nummer,.block__titel,.zeile dt,.vgl__titel,
  .film-eintrag__nr,.film-eintrag__jahr{font-size:max(11px, 1.6vw)}
  .platzhalter{font-size:max(12px, 1.7vw)}
  .vgl__marke{font-size:max(10px, 1.5vw)}

  /* ── Fließtext ───────────────────────────────────────────────── */
  .block p,.liste li,.zeile dd{font-size:max(15px, 1.9vw)}
  .lede{font-size:max(16px, 2.3vw)}

  /* ── Regler für Vorher und Nachher ───────────────────────────────
     Am Daumen ist der Knauf das Ziel, nicht der Strich. */
  .vgl__knauf{width:3.1rem;height:3.1rem;margin:-1.55rem 0 0 -1.55rem;
    font-size:14px;background:rgba(6,8,5,.6)}

  /* ── Lichtkasten ─────────────────────────────────────────────── */
  .kasten__kopf,.kasten__fuss{font-size:max(11px, 1.6vw)}
  .kasten button{padding:.9em .6em}
  .kasten__bild{max-height:72vh}
}

/* Der Claim schrumpft im Vorspann mit der Röhre — auf kleinen Geräten
   bis zur Unlesbarkeit (gemessen: 4,3 px). */
.mark__claim{font-size:max(9px, 1.15cqw)}

/* Betriebsanzeige in der Röhre: nie unter 10 px. Sie ist Zierde, kein
   Bedienelement — deshalb reicht hier knapp lesbar. */
.osd{font-size:max(10px, 2.05cqw)}

/* Impressum und Datenschutz sind anklickbar und waren mit 17 px zu klein
   für einen Daumen. Die Schrift bleibt untergeordnet, die Tippfläche
   wächst nach oben und unten. */
@media (hover:none), (max-width:760px){
  .menu__item--minor{font-size:max(12px, 2.2cqw);padding-block:.55em}
  .menu__item{padding-block:.38em}
  /* Der gewonnene Platz geht von Trennlinie und Rändern ab, damit
     das Menü weiterhin in die Röhre passt. */
  .menu__rule{margin:.6cqw 0 .3cqw}
  .room[data-phase="menu"] .mark{margin-top:.2cqw}
}
/* Die größeren Tippflächen oben kosten Höhe. Auf berührungsfähigen
   Geräten gibt der Rand sie wieder her — je kleiner die Röhre, desto
   knapper. Gemessen auf Handy, Tablet und flachem Querformat. */
@container (max-width: 900px){
  .plate{padding-block:3.4cqw}
}
@container (max-width: 560px){
  .plate{padding-block:2.4cqw}
}

/* ═════════════════════════════════════════════════════════════════════
   KONTAKTFORMULAR
   Eingabefelder als dunkle Zeilen auf der Röhre, mit einem Strich unten,
   der beim Tippen auf Sand wandert. Die Beschriftung sitzt direkt auf
   dem Feld, damit beides als ein Ding gelesen wird.
   ═════════════════════════════════════════════════════════════════════ */
.formular{max-width:38rem;margin-top:1.3rem}
.formular__paar{margin-bottom:1.15rem}
.formular__paar label{display:flex;align-items:baseline;gap:.6em;
  font-family:var(--mi-mono);font-size:clamp(10px,1.6vw,11.5px);
  letter-spacing:.22em;text-transform:uppercase;color:var(--mi-sand);
  margin-bottom:.3rem}
.formular__pflicht{font-size:.82em;letter-spacing:.14em;color:var(--mi-sage);
  opacity:.75;text-transform:none}

.formular input,
.formular textarea{width:100%;display:block;font:inherit;color:var(--mi-bone);
  background:rgba(12,14,9,.75);border:1px solid var(--mi-forest);
  border-bottom:1px solid var(--mi-moss);border-radius:0;
  padding:.62em .75em;line-height:1.45;
  font-size:clamp(.98rem,2vw,1.05rem);
  transition:border-color .18s ease, background .18s ease}
.formular textarea{min-height:6.5em;resize:vertical}
.formular input:hover,
.formular textarea:hover{border-bottom-color:var(--mi-sage)}
.formular input:focus,
.formular textarea:focus{outline:0;border-color:var(--mi-moss);
  border-bottom-color:var(--mi-sand);background:rgba(18,21,13,.9)}
.formular input::placeholder,
.formular textarea::placeholder{color:var(--mi-sage);opacity:.6}
.formular input[aria-invalid="true"],
.formular textarea[aria-invalid="true"]{border-bottom-color:#C97A5E}

/* Der Honigtopf — für Menschen unsichtbar, für Automaten verlockend.
   Nicht display:none, das durchschauen manche. */
.formular__topf{position:absolute;left:-9999px;width:1px;height:1px;
  overflow:hidden}

/* Absenden sieht aus wie ein Menüeintrag der Startseite */
.formular__senden{position:relative;display:inline-block;margin-top:.4rem;
  font-family:var(--mi-display);font-weight:520;font-stretch:96%;
  letter-spacing:.19em;text-transform:uppercase;
  font-size:clamp(.92rem,2vw,1.05rem);
  color:var(--mi-bone);background:none;border:1px solid var(--mi-sage);
  border-radius:0;cursor:pointer;padding:.7em 1.5em .7em 2.5em;
  transition:border-color .16s ease, color .16s ease, background .16s ease}
.formular__senden::before{content:'\25B6';position:absolute;left:1.15em;
  color:var(--mi-sand);font-size:.62em;top:50%;transform:translateY(-45%)}
.formular__senden:hover,
.formular__senden:focus-visible{border-color:var(--mi-sand);
  background:rgba(194,168,124,.08)}
.formular__senden:focus-visible{outline:2px solid var(--mi-sand);outline-offset:3px}
.formular__senden[disabled]{opacity:.5;cursor:default}

/* Rückmeldung nach dem Absenden */
.formular__stand{margin-top:1rem;font-family:var(--mi-mono);
  font-size:clamp(11px,1.7vw,13px);line-height:1.7;letter-spacing:.06em;
  padding:.8em 1em;border:1px solid var(--mi-moss);display:none}
.formular__stand.zeigt{display:block}
.formular__stand.gut{color:var(--mi-haze);border-color:var(--mi-sage)}
.formular__stand.schlecht{color:#D9A892;border-color:#7A4A38}

.formular__fuss{font-family:var(--mi-mono);font-size:clamp(10px,1.6vw,12px);
  color:var(--mi-sage);line-height:1.75;margin-top:1.1rem;max-width:46ch}
.formular__fuss a{color:var(--mi-haze)}

@media (hover:none), (max-width:760px){
  .formular input,.formular textarea{font-size:16px}  /* sonst zoomt iOS hinein */
  .formular__senden{width:100%;padding-block:.88em}
}

/* ═════════════════════════════════════════════════════════════════════
   VORSPANN — die eigene Eröffnung einer Unterseite
   Liegt über dem Inhalt, aber unter Zeilenraster, Rauschen und
   Vignette: so läuft der Schriftzug durch dieselbe Röhre wie alles
   andere, statt davor zu kleben.
   ═════════════════════════════════════════════════════════════════════ */
.vorspann{position:fixed;inset:0;z-index:33;
  display:grid;place-content:center;
  padding:0 clamp(1.1rem, 5vw, 3.4rem);
  background:#090A07;
  background-image:radial-gradient(78% 68% at 50% 46%,
    #13160F 0%, #090A07 62%, #06070A 100%);
  opacity:0;pointer-events:none;
  transition:opacity .62s ease}
.vorspann[hidden]{display:none}

/* Während der Vorspann läuft, nimmt er die Klicks (zum Überspringen)
   und der Inhalt darunter scrollt nicht mit. */
.tube.is-vorspann .vorspann{opacity:1;pointer-events:auto;
  transition:opacity .3s ease}
.tube.is-vorspann .tube__scroll{overflow:hidden}

.vorspann__zeile{display:flex;flex-wrap:wrap;
  align-items:baseline;justify-content:center;gap:0 .32em;
  font-weight:600;font-stretch:88%;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.06;
  font-size:clamp(1.5rem, 7vw, 4.6rem);
  text-shadow:.8px 0 rgba(194,168,124,.34), -.8px 0 rgba(108,128,94,.34)}
.vorspann__fest{color:var(--mi-bone)}

/* Das getippte Wort und der Schreibzeiger bleiben zusammen, auch wenn
   die Zeile auf schmalen Geräten umbricht. Die Mindestbreite setzt das
   Skript auf das längste Wort — sonst wandert "MAKE IT" bei jedem
   Buchstaben ein Stück nach links. */
.vorspann__tipp{white-space:nowrap;display:inline-flex;align-items:baseline;
  min-width:var(--tipp-min, 0px);
  transition:min-width .6s cubic-bezier(.2,.75,.2,1)}
.vorspann__wort{color:var(--mi-sand)}
.vorspann__zeiger{flex:none;width:.075em;height:.76em;
  background:var(--mi-sand);align-self:center;margin-left:.06em;
  animation:zeiger 1.02s steps(1) infinite}
@keyframes zeiger{0%,48%{opacity:1}49%,100%{opacity:0}}

/* Steht das letzte Wort, hört der Zeiger auf zu blinken */
.vorspann.is-fertig .vorspann__zeiger{animation:none;opacity:0;
  transition:opacity .45s ease}

/* Das Schlusswort bekommt einen Farbzug — auf der Grading-Seite ist das
   die Signatur, nicht Dekoration. Ohne background-clip:text bliebe die
   Schrift unsichtbar, deshalb die Abfrage. */
@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .vorspann__wort.is-schluss{
    background-image:linear-gradient(100deg,
      #C2A87C 0%, #F1EBDE 20%, #9FD0C0 40%,
      #C2A87C 60%, #E2B07A 80%, #C2A87C 100%);
    background-size:240% 100%;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    text-shadow:none;
    animation:farbzug 3.6s ease-in-out .08s both}
}
@keyframes farbzug{
  from{background-position:118% 0}
  to{background-position:-38% 0}
}

.vorspann__unter{margin:clamp(.95rem, 3.2vh, 1.9rem) auto 0;text-align:center;
  max-width:46ch;line-height:1.95;text-wrap:balance;
  font-family:var(--mi-mono);font-size:clamp(9px, 1.7vw, 12px);
  letter-spacing:.3em;text-transform:uppercase;color:var(--mi-sage);
  opacity:0;transition:opacity .8s ease .2s}
/* Auf schmalen Geräten bricht die Zeile ohnehin um — dann lieber
   enger gesperrt und in der Mitte gehalten als von Rand zu Rand. */
@media (max-width: 560px){
  .vorspann__unter{letter-spacing:.2em;max-width:28ch}
}
.vorspann.is-fertig .vorspann__unter{opacity:1}

.vorspann__weiter{position:absolute;left:0;right:0;
  bottom:clamp(1.3rem, 5vh, 3rem);text-align:center;
  padding-inline:clamp(1.1rem, 5vw, 3.4rem);
  font-family:var(--mi-mono);font-size:clamp(9px, 1.5vw, 11px);
  letter-spacing:.26em;text-transform:uppercase;color:var(--mi-moss);
  opacity:0;animation:weiterZeigen .9s ease 1.5s forwards}
@keyframes weiterZeigen{to{opacity:1}}

@media (prefers-reduced-motion: reduce){
  .vorspann__tipp{transition:none}
  .vorspann__zeiger{animation:none}
  .vorspann__wort.is-schluss{animation:none;background-position:40% 0}
  .vorspann__weiter{animation:none;opacity:1}
}

/* ═════════════════════════════════════════════════════════════════════
   YOUTUBE, ERST AUF KLICK
   Vor dem Klick ist hier nichts als ein Standbild vom eigenen Server.
   Der Player kommt erst, wenn jemand ihn wirklich sehen will.
   ═════════════════════════════════════════════════════════════════════ */
.jt{position:relative;aspect-ratio:16/9;overflow:hidden;background:#070906}
.jt__start{position:absolute;inset:0;width:100%;height:100%;
  padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center}
.jt__start:focus-visible{outline:2px solid var(--mi-sand);outline-offset:-4px}

.jt__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.92) brightness(.78);
  transition:filter .35s ease, transform .6s cubic-bezier(.2,.8,.3,1)}

/* Ein Standbild kann in der Mitte hell sein — ein Fenster, ein
   Scheinwerfer —, und dann verschwindet der Abspielknopf darin.
   Diese Schicht legt genau dort etwas Dunkelheit hin, wo Knopf und
   Hinweiszeile stehen, und lässt den Rest des Bildes unberührt. */
.jt__start::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(40% 44% at 50% 50%, rgba(6,8,5,.52) 0%, rgba(6,8,5,0) 72%),
    linear-gradient(to top, rgba(6,8,5,.8) 0%, rgba(6,8,5,0) 24%)}
.jt__start:hover .jt__bild,
.jt__start:focus-visible .jt__bild{filter:saturate(1) brightness(.92);transform:scale(1.02)}

.jt__knopf{position:relative;z-index:1;display:grid;place-items:center;
  width:clamp(3rem, 7vw, 4.4rem);aspect-ratio:1;
  border:1px solid var(--mi-sand);border-radius:50%;
  color:var(--mi-sand);font-size:clamp(.95rem, 2.1vw, 1.35rem);
  padding-left:.14em;background:rgba(9,10,7,.62);
  box-shadow:0 2px 16px rgba(0,0,0,.55);
  transition:background .2s ease, color .2s ease, border-color .2s ease}
.jt__start:hover .jt__knopf,
.jt__start:focus-visible .jt__knopf{background:rgba(194,168,124,.22);
  color:var(--mi-bone);border-color:var(--mi-bone)}

.jt__fuss{position:absolute;left:0;right:0;bottom:.55rem;z-index:1;
  text-align:center;padding-inline:1rem;
  font-family:var(--mi-mono);font-size:clamp(9px, 1.5vw, 11px);
  letter-spacing:.2em;text-transform:uppercase;color:var(--mi-haze);
  text-shadow:0 1px 5px rgba(0,0,0,.95)}

.jt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

@media (prefers-reduced-motion: reduce){
  .jt__bild{transition:none}
  .jt__start:hover .jt__bild{transform:none}
}

/* Eigene Filme bekommen denselben Knopf wie die YouTube-Einbindung.
   Hier liegt kein Hinweis am unteren Rand, deshalb nur die runde
   Abdunklung in der Mitte und kein Verlauf nach unten. */
.film-eintrag__bild--eigen{position:relative}
.jt__start--knopf::after{
  background:radial-gradient(40% 44% at 50% 50%,
    rgba(6,8,5,.52) 0%, rgba(6,8,5,0) 72%)}

/* ═════════════════════════════════════════════════════════════════════
   MEDIEN LIEGEN VOR DER SCHEIBE
   Rauschen, Zeilenraster und Rollbalken sind eine Schicht über der
   ganzen Seite — über dem Text wirkt das richtig, über einem Foto nicht.
   Wer eine Arbeit ansieht, will sie sehen, nicht durch eine Röhre
   hindurch raten. Bilder, Videos und Vorher-Nachher-Vergleiche steigen
   deshalb über die Effekte; Leisten, Schleier und Lichtkasten liegen
   wiederum darüber, damit beim Scrollen nichts durcheinandergerät.
   ═════════════════════════════════════════════════════════════════════ */
.kachel,
.vgl,
.reel,
.vollbreit,
.film-eintrag__bild{position:relative;z-index:29}

/* Die Vignette des Fensters bleibt darüber: Sie dunkelt nur die
   äußersten Ränder ab und hält die Seite im Gehäuse zusammen. */
.tube .fx--vig{z-index:30}