/* ===========================================================================
   Vorlage "kino" (Spec 2026-09-22, Abschnitt 12) - kommt nach website.css.

   Idee: Die Seite ist ein Trailer. Eine gezeichnete Szene (vier Silhouetten-
   Ebenen: ferne Kette, Berge mit Burg, Wald mit Ruinen, Boden) steht fest
   hinter der ganzen Seite; der Inhalt zieht darueber hinweg wie ein Abspann.
   Beim Scrollen legt sich ein Schleier ueber die Szene, damit der Text ruhig
   und kontraststark liegt - ganz unten, im Abspann, taucht der Horizont
   wieder auf. Eine einzige warme Akzentfarbe (Glut am Horizont), sonst
   Nacht, Haarlinien und Mono-Kapitaelchen.

   Vertrag: alles unter html[data-vorlage="kino"]. Der Renderer liefert
   `data-held` (ja/nein), `data-opt-landschaft` und `data-opt-parallaxe`
   (1/0) am <html> und `--w-opt-bewegung`, `--w-opt-schleier` (0-1) in
   designCss; dazu das Element `.w-szene` mit vier <span>-Ebenen als erstes
   Kind von <body> und die Haken `.w-held-deko`, `.w-banner-leer`,
   `.w-textbild-ohne-bild`. Jede Klasse, die website-html.ts ausgibt, hat
   hier eine Regel (Pruefung: test/website-vorlage-kino.test.ts).

   Farben: ausschliesslich aus den --w-*-Tokens (die Farbwaehler im Editor
   wirken); Materialtoene per color-mix bzw. - wo der Browser es kann - per
   relativer Farbe. Der Himmel ist die Nacht (`--w-bg`, nach unten heller),
   die ferne Kette behaelt den Farbton der Felsen (`--w-karte`). Die
   Silhouetten sind weisse SVG-Formen als mask-image, ihre Farbe kommt aus
   background-color:
     ferne Kette  = --w-karte, aufgehellt     Berge mit Burg = --w-karte
     Wald/Ruinen  = --w-bg                    Boden          = --w-bg-tief
   Erzeugt werden die SVGs von tools/website-vorlagen/kino-szene.mjs.

   Lesbarkeit ueber der Szene: die hellste Stelle ist die Glut am Horizont.
   Schleier (Vignette, innen 64 %) und Glut sind so abgestimmt, dass
   dezenter Fliesstext (--w-dezent) mit den Standardfarben auch direkt ueber
   der Glut >= 4,5 : 1 erreicht: auf Seiten ohne Kopfbereich sofort, auf
   Seiten mit Kopfbereich, sobald der erste Absatz die Horizontlinie
   erreicht (Schleier nach einer Bildschirmhoehe voll, die Glut sinkt beim
   Scrollen auf 60 %). Nur der Regler "Schleier" ganz links unterschreitet
   das bewusst (der Editor sagt es dazu).

   Scrollen: Schleier, Glut, Tiefe der Ebenen (Parallaxe) und Kopf haengen
   an der CSS-Scroll-Zeitachse. Browser ohne sie bekommen die Werte von
   website.js: data-kino-scroll="js" am <html>, --k-scroll und
   --k-scroll-tiefe an der Szene, --k-scroll-kopf am Seitenkopf (jeweils
   0-1, gleiche Wege wie die Zeitachse).

   Schriften: Ueberschriften --w-schrift-display, Fliesstext
   --w-schrift-text (Vorlage: beide Inter). Zwei Nebenrollen: JetBrains
   Mono fuer Marke, Menue, Knoepfe, Beschriftungen und Ziffern, Lora kursiv
   als "Stimme des Trailers" (Unterzeile, Zitate). Weicht eine Schrift im
   Editor von der Vorlage ab, uebernimmt sie ihre Nebenrollen (Marke, Menue
   und Knoepfe bzw. Stimme und Fuss); Beschriftungen und Werte bleiben Mono.

   Bewusst nicht beachtet (Editor-Hinweis "wirken hier kaum" bzw. "gar
   nicht"): Kartenstil, Eckenradius (Kino hat keine runden Ecken) und
   Aurora (gar nicht). Die Ornament-Staerke regelt nur das Linienraster
   hinter Abschnitten mit Hintergrund "Ornament".

   Reihenfolge: Tokens - Grundlagen - Szene - Bewegung - Kopf - Held -
   Abschnitt - Typografie - Knoepfe - Bausteine - Live-Bausteine - Fuss -
   Breakpoints - Ruhe - Druck. Handy zuerst (375 px), dann 600/900/1180.
   =========================================================================== */

/* --------------------------------------------------------------------- Tokens */
html[data-vorlage="kino"] {
  color-scheme: dark;

  /* Materialtoene - alle aus den Tokens abgeleitet. Der Himmel ist die Nacht
     (--w-bg), nur Berge und ferne Kette kommen aus --w-karte. */
  --k-tief: var(--w-bg-tief);
  --k-nacht: var(--w-bg);
  --k-fels: var(--w-karte);
  --k-fern: color-mix(in srgb, var(--w-karte), var(--w-dezent) 6%);
  --k-himmel-hoch: color-mix(in srgb, var(--w-bg) 85%, var(--w-karte));
  --k-himmel-mitte: color-mix(in srgb, var(--w-bg) 45%, var(--w-karte));
  --k-himmel: color-mix(in srgb, var(--w-bg), var(--w-dezent) 12%);
  --k-horizont: color-mix(in srgb, var(--w-bg), var(--w-dezent) 20%);
  --k-dunst: color-mix(in srgb, var(--w-bg) 92%, var(--w-akzent));
  --k-glut: var(--w-akzent);
  --k-glut-hell: var(--w-gold);
  --k-glut-tief: color-mix(in srgb, var(--w-akzent) 70%, var(--w-bg-tief));
  --k-glut-licht: color-mix(in srgb, var(--w-gold), var(--w-text) 50%);
  --k-auf-glut: var(--w-bg-tief);

  --k-text: var(--w-text);
  --k-dezent: var(--w-dezent);
  /* Nur fuer Schmuck (Kapitelmarke, Bildnummer, Plus, Marker): 5,5:1 auf
     der Vorlagen-Nacht, ueber der Glut weniger - lesbare Angaben wie
     Laufzeit, Listenziffern und Hinweise nehmen --k-dezent. */
  --k-still: color-mix(in srgb, var(--w-dezent) 78%, var(--w-bg));
  --k-linie: var(--w-rand);
  --k-linie-stark: color-mix(in srgb, var(--w-rand), var(--w-text) 18%);
  --k-flaeche: color-mix(in srgb, var(--w-bg-tief) 55%, transparent);
  --k-flaeche-dicht: color-mix(in srgb, var(--w-bg-tief) 90%, transparent);

  /* Schriftrollen. */
  --k-display: var(--w-schrift-display);
  --k-sans: var(--w-schrift-text);
  --k-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --k-serif: "Lora", Georgia, "Times New Roman", serif;
  /* Nebenrollen, die einer eigenen Schriftwahl im Editor folgen
     (data-schrift-eigen, siehe unten): Marke, Menue und Knoepfe; Stimme des
     Trailers (Unterzeile, Zitate, Bannertext); Text im Fuss. */
  --k-marke: var(--k-mono);
  --k-stimme: var(--k-serif);
  --k-fuss: var(--k-mono);

  /* Mass und Raum. */
  --k-gasse: 20px;
  --k-bahn-schmal: 40rem;
  --k-bahn: 52rem;
  --k-bahn-breit: 72rem;
  --k-kopf: 56px;
  --k-luft-eng: 48px;
  --k-luft: 92px;
  --k-luft-weit: 136px;

  /* Szene: Kachelbreite, -hoehe, Abstand vom unteren Rand, Bildausschnitt
     (verschiebt die Kachel so, dass Burg und Ruinen auch auf schmalen
     Schirmen im Bild stehen), Wanderdauer je Kachel und Tiefe der Parallaxe.
     Naehere Ebenen wandern schneller und sinken weiter. */
  --k-b1: 1500px; --k-h1: 263px; --k-y1: 30vh; --k-x1: 0px;     --k-d1: 500s; --k-t1: 3vh;
  --k-b2: 1900px; --k-h2: 412px; --k-y2: 21vh; --k-x2: -1035px; --k-d2: 422s; --k-t2: 6vh;
  --k-b3: 1400px; --k-h3: 198px; --k-y3: 6vh;  --k-x3: -250px;  --k-d3: 233s; --k-t3: 11vh;
  --k-b4: 1100px; --k-h4: 92px;  --k-y4: 0vh;  --k-x4: 0px;     --k-d4: 137s; --k-t4: 16vh;
  /* 1, sobald "Bewegung" ueber 0 steht, sonst 0 (Weg der Wanderung). */
  --k-lauf: min(1, calc(var(--w-opt-bewegung, .5) * 1000));

  /* Schleier: Anfang (oben auf der Seite), Ende (nach einer
     Bildschirmhoehe) und Ruhewert ohne Scroll-Zeitachse. Der Regler
     "Schleier" verschiebt alle drei; 0,5 ist der Entwurf. Die Vignette ist
     innen am hellsten (Deckkraft --k-vignette), aussen fast dicht. */
  --k-schleier-von: calc(var(--w-opt-schleier, .5) * .16);
  --k-schleier-bis: min(1, calc(.72 + var(--w-opt-schleier, .5) * .42));
  --k-schleier-ruhe: calc(.58 + var(--w-opt-schleier, .5) * .3);
  --k-vignette: 64%;
  /* Glut am Horizont: oben auf der Seite, wenn der Schleier liegt, und
     ohne Scroll-Zeitachse; der Faktor nimmt sie ohne Landschaft zurueck. */
  --k-glut-oben: 1;
  --k-glut-unten: .6;
  --k-glut-ruhe: .8;
  --k-glut-faktor: 1;
  /* Luft je Abschnittsart (Knopfreihen und Platzhalter stehen enger). */
  --k-dichte: 1;

  background-color: var(--k-tief);
  background-image: none;
  scroll-padding-top: calc(var(--k-kopf) + 16px);
}
/* Wo es relative Farben gibt, behaelt die ferne Kette den Farbton der
   Felsen (Aufhellen durch Multiplizieren statt Mischen mit Grau), und der
   Himmel ist die Nacht, nach unten heller und bunter: Helligkeit plus einen
   festen Schritt, Buntheit mal Faktor mit Deckel (keine grellen Himmel bei
   bunter Nacht), zum Horizont und Dunst hin leicht im Farbton gedreht. Mit
   den Standardfarben sind das die Toene des Entwurfs. */
@supports (color: oklch(from red l c h)) {
  html[data-vorlage="kino"] {
    --k-fern: rgb(from var(--w-karte) calc(r * 1.55) calc(g * 1.53) calc(b * 1.35));
    --k-himmel-hoch: oklch(from var(--w-bg) calc(l + .013) min(c * 2.3, .05) h);
    --k-himmel-mitte: oklch(from var(--w-bg) calc(l + .052) min(c * 2.12, .05) h);
    --k-himmel: oklch(from var(--w-bg) calc(l + .123) min(c * 3.7, .075) h);
    --k-horizont: oklch(from var(--w-bg) calc(l + .163) min(c * 3.7, .075) calc(h + 10));
    --k-dunst: oklch(from var(--w-bg) calc(l + .056) min(c * 2.2, .05) calc(h + 25));
  }
}
/* Eigene Schriften aus dem Editor (weichen sie von der Vorlage ab, nennt der
   Renderer sie in data-schrift-eigen): Ueberschriften gelten dann auch fuer
   Marke, Menue und Knoepfe, Fliesstext auch fuer Stimme und Fuss. Kleine
   Beschriftungen und Werte bleiben JetBrains Mono. */
html[data-vorlage="kino"][data-schrift-eigen~="display"] { --k-marke: var(--k-display); }
html[data-vorlage="kino"][data-schrift-eigen~="text"] { --k-stimme: var(--k-sans); --k-fuss: var(--k-sans); }
/* Seiten ohne Kopfbereich (Regeln, Mitmachen, Impressum ...) fangen sofort
   mit Text an - dort darf die Szene nicht bis in die Ueberschriften
   leuchten: dichterer Schleier von Anfang an, gedaempfte Glut. */
html[data-vorlage="kino"][data-held="nein"] {
  --k-schleier-von: calc(.5 + var(--w-opt-schleier, .5) * .16);
  --k-schleier-ruhe: calc(.62 + var(--w-opt-schleier, .5) * .3);
  --k-glut-oben: .6;
  --k-glut-ruhe: .6;
}

/* ----------------------------------------------------------------- Grundlagen */
html[data-vorlage="kino"] body.w-seite {
  color: var(--k-text);
  font-family: var(--k-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
}
/* Aurora gibt es in Kino nicht - die Szene ist das Bild. */
html[data-vorlage="kino"] body.w-seite::before { display: none; }
/* Korn aus website.css, aber leiser: nimmt dem Verlauf das Digitale. */
html[data-vorlage="kino"] body.w-seite::after { opacity: calc(var(--w-koernung) * .32); }

html[data-vorlage="kino"] a {
  color: var(--k-glut-hell);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--k-glut-hell) 40%, transparent);
}
html[data-vorlage="kino"] a:hover { text-decoration-color: currentColor; }
html[data-vorlage="kino"] :focus-visible { outline: 2px solid var(--k-glut); outline-offset: 3px; border-radius: 0; }
html[data-vorlage="kino"] ::selection { background: var(--k-glut); color: var(--k-auf-glut); }

/* ---------------------------------------------------------------------- Szene */
/* Himmel und Glut auf dem Element selbst, die vier Silhouetten als <span>,
   darueber der Schleier (::after). Alles fest hinter der Seite; das Korn
   aus website.css (body::after, z -1) liegt noch darueber. */
html[data-vorlage="kino"] .w-szene {
  display: block;
  position: fixed; inset: 0; z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--k-nacht);
  background-image:
    linear-gradient(180deg,
      var(--k-tief) 0%, var(--k-himmel-hoch) 24%, var(--k-himmel-mitte) 44%, var(--k-himmel) 60%,
      var(--k-horizont) 70%, var(--k-dunst) 84%, var(--k-tief) 100%);
}
/* Glut am Horizont: Restlicht der untergegangenen Sonne. Ohne
   Scroll-Zeitachse steht sie auf dem Ruhewert, sonst sinkt sie beim
   Scrollen (Bewegung). */
html[data-vorlage="kino"] .w-szene::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(116% 34% at 50% 68%, color-mix(in srgb, var(--k-glut) 40%, transparent), transparent 62%),
    radial-gradient(56% 15% at 50% 67%, color-mix(in srgb, var(--k-glut-licht) 34%, transparent), transparent 70%);
  opacity: calc(var(--k-glut-ruhe) * var(--k-glut-faktor));
}
html[data-vorlage="kino"] .w-szene > span {
  position: absolute; left: 0;
  bottom: var(--k-y);
  width: calc(100% + var(--k-b));
  height: var(--k-h);
  background-color: var(--k-farbe);
  -webkit-mask-image: var(--k-form);
  mask-image: var(--k-form);
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: var(--k-b) 100%;
  mask-size: var(--k-b) 100%;
  -webkit-mask-position: var(--k-x) 0;
  mask-position: var(--k-x) 0;
  backface-visibility: hidden;
}
html[data-vorlage="kino"] .w-szene > span:nth-child(1) {
  --k-b: var(--k-b1); --k-h: var(--k-h1); --k-y: var(--k-y1); --k-x: var(--k-x1); --k-dauer: var(--k-d1); --k-tiefe: var(--k-t1);
  --k-farbe: var(--k-fern); --k-form: url("/website/vorlagen/kino/szene-1-fern.svg");
  opacity: .96;
}
html[data-vorlage="kino"] .w-szene > span:nth-child(2) {
  --k-b: var(--k-b2); --k-h: var(--k-h2); --k-y: var(--k-y2); --k-x: var(--k-x2); --k-dauer: var(--k-d2); --k-tiefe: var(--k-t2);
  --k-farbe: var(--k-fels); --k-form: url("/website/vorlagen/kino/szene-2-berge.svg");
  opacity: .96;
}
html[data-vorlage="kino"] .w-szene > span:nth-child(3) {
  --k-b: var(--k-b3); --k-h: var(--k-h3); --k-y: var(--k-y3); --k-x: var(--k-x3); --k-dauer: var(--k-d3); --k-tiefe: var(--k-t3);
  --k-farbe: var(--k-nacht); --k-form: url("/website/vorlagen/kino/szene-3-wald.svg");
}
html[data-vorlage="kino"] .w-szene > span:nth-child(4) {
  --k-b: var(--k-b4); --k-h: var(--k-h4); --k-y: var(--k-y4); --k-x: var(--k-x4); --k-dauer: var(--k-d4); --k-tiefe: var(--k-t4);
  --k-farbe: var(--k-tief); --k-form: url("/website/vorlagen/kino/szene-4-boden.svg");
}
/* Schleier: oben fast nichts (die Szene ist das Bild), nach einer
   Bildschirmhoehe fast alles (der Text ist der Inhalt). Zugleich Vignette. */
html[data-vorlage="kino"] .w-szene::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(124% 96% at 50% 34%,
    color-mix(in srgb, var(--k-tief) var(--k-vignette), transparent),
    color-mix(in srgb, var(--k-tief) 97%, transparent) 100%);
  opacity: var(--k-schleier-ruhe);
}
/* Schalter "Landschaft" aus: nur Nachthimmel und ein Rest Glut (auch der
   Horizont im Abspann faellt weg, siehe Fusszeile). */
html[data-vorlage="kino"][data-opt-landschaft="0"] { --k-glut-faktor: .45; }
html[data-vorlage="kino"][data-opt-landschaft="0"] .w-szene > span { display: none; }

/* -------------------------------------------------------------------- Bewegung */
/* Wandern (Zeit) laeuft ueber `transform`, die Tiefe (Scrollen) ueber
   `translate` - zwei Eigenschaften, damit sich beide nicht ueberschreiben.
   Jede Ebene wandert genau eine Kachelbreite: die Schleife ist nahtlos.
   `--k-lauf` ist 1, sobald der Regler "Bewegung" ueber 0 steht, sonst 0 -
   dann ist der Weg null und die Szene steht (die Parallaxe beim Scrollen
   bleibt davon unberuehrt). */
@keyframes kino-wandern { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-1 * var(--k-b) * var(--k-lauf, 1)), 0, 0); } }
@keyframes kino-tiefe { from { translate: 0 0; } to { translate: 0 var(--k-tiefe); } }
@keyframes kino-schleier { from { opacity: var(--k-schleier-von); } to { opacity: var(--k-schleier-bis); } }
@keyframes kino-glut {
  from { opacity: calc(var(--k-glut-oben) * var(--k-glut-faktor)); }
  to { opacity: calc(var(--k-glut-unten) * var(--k-glut-faktor)); }
}
@keyframes kino-kopf {
  from { background-color: transparent; border-bottom-color: transparent; }
  to { background-color: color-mix(in srgb, var(--w-bg-tief) 82%, transparent); border-bottom-color: var(--w-rand); }
}
@keyframes kino-auftritt { from { opacity: 0; transform: translate3d(0, 34px, 0); } to { opacity: 1; transform: none; } }
@keyframes kino-einblenden { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes kino-glimmen { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* Wandern: Regler "Bewegung" (0,5 = Entwurf, 1 = doppelt so schnell). */
@media (prefers-reduced-motion: no-preference) {
  html[data-vorlage="kino"] .w-szene > span {
    will-change: transform;
    animation: kino-wandern linear infinite;
    animation-duration: calc(var(--k-dauer) * .5 / max(var(--w-opt-bewegung, .5), .01));
  }
}

/* Alles Scroll-Gesteuerte haengt an @supports: wo es keine Scroll-Zeitachse
   gibt, liefert website.js dieselben Fortschritte (Zweig darunter); ohne
   Skript bleibt die Seite ruhig stehen (Schleier auf dem Ruhewert). */
@supports (animation-timeline: scroll()) {
  /* Schleier und Glut: nach einer Bildschirmhoehe liegt der Schleier ganz
     und die Glut ist auf 60 % gesunken - dann erreicht der erste Absatz
     unter dem Kopfbereich die Horizontlinie. */
  html[data-vorlage="kino"] .w-szene::after {
    animation: kino-schleier linear both;
    animation-timeline: scroll(root);
    animation-range: 0 100vh;
  }
  html[data-vorlage="kino"] .w-szene::before {
    animation: kino-glut linear both;
    animation-timeline: scroll(root);
    animation-range: 0 100vh;
  }
  html[data-vorlage="kino"][data-held="nein"] .w-szene::after,
  html[data-vorlage="kino"][data-held="nein"] .w-szene::before { animation-range: 0 50vh; }

  @media (prefers-reduced-motion: no-preference) {
    /* Parallaxe: Wandern und Tiefe zusammen, zwei Zeitachsen. */
    html[data-vorlage="kino"][data-opt-parallaxe="1"] .w-szene > span {
      animation: kino-wandern linear infinite, kino-tiefe linear both;
      animation-duration: calc(var(--k-dauer) * .5 / max(var(--w-opt-bewegung, .5), .01)), auto;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 240vh;
    }
    html[data-vorlage="kino"][data-kopf="fest"] header.w-kopf {
      animation: kino-kopf linear both;
      animation-timeline: scroll(root);
      animation-range: 0 160px;
    }
  }
}
/* Dasselbe ohne Scroll-Zeitachse: website.js schreibt die Fortschritte
   (0-1), die Werte laufen linear zwischen denselben Enden wie die
   Keyframes oben. Bei reduzierter Bewegung setzt website.js nichts - dann
   gelten die Ruhewerte (Abschnitt "Weniger Bewegung"). */
@supports not (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    html[data-vorlage="kino"][data-kino-scroll="js"] .w-szene::after {
      opacity: calc(var(--k-schleier-von) + (var(--k-schleier-bis) - var(--k-schleier-von)) * var(--k-scroll, 0));
    }
    html[data-vorlage="kino"][data-kino-scroll="js"] .w-szene::before {
      opacity: calc((var(--k-glut-oben) + (var(--k-glut-unten) - var(--k-glut-oben)) * var(--k-scroll, 0)) * var(--k-glut-faktor));
    }
    html[data-vorlage="kino"][data-kino-scroll="js"][data-opt-parallaxe="1"] .w-szene > span {
      translate: 0 calc(var(--k-tiefe) * var(--k-scroll-tiefe, 0));
    }
    html[data-vorlage="kino"][data-kino-scroll="js"][data-kopf="fest"] header.w-kopf {
      background-color: color-mix(in srgb, var(--w-bg-tief) calc(82% * var(--k-scroll-kopf, 0)), transparent);
      border-bottom-color: color-mix(in srgb, var(--w-rand) calc(100% * var(--k-scroll-kopf, 0)), transparent);
    }
  }
}

/* Langsame Einblendungen beim Hereinscrollen. Bloecke (Text, Bild, Zahlen,
   Status, Knoepfe ...) kommen als Ganzes herauf; Listen laufen wie ein
   Abspann: Titel und jede Zeile einzeln, jeweils wenn sie ins Bild kommt.
   Der Kopfbereich bleibt aussen vor (seine Ebenen haengen am Abschnitt). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html[data-vorlage="kino"] :is(.w-typ-text, .w-typ-textBild, .w-typ-knoepfe, .w-typ-zahlen, .w-typ-serverStatus, .w-typ-video, .w-typ-bildBanner, .w-typ-trenner) > .w-bahn,
    html[data-vorlage="kino"] .w-abschnitt:has(> .w-bahn > .w-spaeter) > .w-bahn {
      animation: kino-auftritt cubic-bezier(.16, .8, .3, 1) both;
      animation-timeline: view();
      animation-range: entry 2% cover 24%;
    }
    html[data-vorlage="kino"] :is(.w-typ-regeln, .w-typ-faq, .w-typ-schritte, .w-typ-team, .w-typ-onlineSpieler, .w-typ-rangliste, .w-typ-spielzeit, .w-typ-raenge) :is(.w-abschnitt-titel, .w-spieler-zahl, .w-leer-hinweis, .w-regel, .w-frage, .w-schritt, .w-person, .w-kopf-liste > .w-kopf, .w-rang, .w-zeit, .w-rangkarte) {
      animation: kino-einblenden cubic-bezier(.16, .8, .3, 1) both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }
  }
}
/* Der Titel des Kopfbereichs blendet einmal ein wie eine Titelkarte. */
@media (prefers-reduced-motion: no-preference) {
  html[data-vorlage="kino"] .w-held-inhalt > * { animation: kino-einblenden .9s cubic-bezier(.16, .8, .3, 1) both; }
  html[data-vorlage="kino"] .w-held-inhalt > :nth-child(2) { animation-delay: .08s; }
  html[data-vorlage="kino"] .w-held-inhalt > :nth-child(3) { animation-delay: .16s; }
  html[data-vorlage="kino"] .w-held-inhalt > :nth-child(n+4) { animation-delay: .24s; }
}

/* ------------------------------------------------------- Sprunglink, Baender */
html[data-vorlage="kino"] .w-skip {
  left: 16px; top: -100px; z-index: 60;
  padding: 12px 18px;
  background: var(--k-glut); color: var(--k-auf-glut);
  border: 0; border-radius: 0;
  font-family: var(--k-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
}
html[data-vorlage="kino"] .w-skip:focus { top: 14px; }

html[data-vorlage="kino"] .w-band {
  padding: 9px var(--k-gasse);
  font-family: var(--k-mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--k-text);
  border-bottom: 1px solid var(--k-linie);
  background: var(--k-flaeche-dicht);
}
html[data-vorlage="kino"] .w-band-vorschau { color: var(--k-glut-hell); }
html[data-vorlage="kino"] .w-band-wartung { color: var(--k-auf-glut); background: var(--k-glut); border-bottom-color: var(--k-glut); }

/* ------------------------------------------------------------------ Breitenbahn */
html[data-vorlage="kino"] .w-bahn { max-width: var(--k-bahn); padding-inline: var(--k-gasse); }
html[data-vorlage="kino"] .w-breite-schmal > .w-bahn { max-width: var(--k-bahn-schmal); }
html[data-vorlage="kino"] .w-breite-normal > .w-bahn { max-width: var(--k-bahn); }
html[data-vorlage="kino"] .w-breite-breit > .w-bahn { max-width: var(--k-bahn-breit); }
html[data-vorlage="kino"] .w-breite-voll > .w-bahn { max-width: none; }

/* ------------------------------------------------------------------------ Kopf */
/* Dezent und klein: nur Wortmarke und Mono-Kapitaelchen, keine Flaeche -
   die legt sich erst beim Scrollen darunter. `header.` trennt den Kopf von
   den Spielerkoepfen (li.w-kopf) der Live-Liste. */
html[data-vorlage="kino"] header.w-kopf {
  display: block;
  position: relative; z-index: 30;
  padding: 0; gap: 0;
  border: 0; border-bottom: 1px solid transparent; border-radius: 0;
  background: var(--k-flaeche);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}
html[data-vorlage="kino"][data-kopf="fest"] header.w-kopf { position: sticky; top: 0; }

/* Innenabstand so, dass Menueknopf (42 px) bzw. Navigation genau in
   --k-kopf passen - der Kopfbereich rutscht um genau diese Hoehe darunter. */
html[data-vorlage="kino"] .w-kopf-bahn {
  max-width: var(--k-bahn-breit);
  min-height: var(--k-kopf);
  padding-block: 7px;
  gap: 14px;
}
html[data-vorlage="kino"] .w-marke {
  gap: 10px;
  color: var(--k-text);
  font-family: var(--k-marke);
  font-size: 13px; font-weight: 700;
  letter-spacing: .34em; text-transform: uppercase;
}
html[data-vorlage="kino"] .w-marke-bild { width: 26px; height: 26px; border-radius: 0; }
/* Auf dem Handy etwas enger gesperrt, damit auch ein laengerer Name neben
   den Menueknopf passt; ab 600 px die volle Sperrung der Marke. */
html[data-vorlage="kino"] .w-marke-text { letter-spacing: .24em; }
/* Der Punkt links der Marke: der einzige Farbfleck im Kopf. */
html[data-vorlage="kino"] .w-marke::before {
  content: ""; flex: none;
  width: 7px; height: 7px;
  background: var(--k-glut);
  box-shadow: 0 0 12px color-mix(in srgb, var(--k-glut) 90%, transparent);
}

html[data-vorlage="kino"] .w-nav { display: none; gap: 2px; }
html[data-vorlage="kino"] .w-nav-link {
  padding: 9px 12px;
  color: var(--k-dezent);
  border-radius: 0; background: none;
  font-family: var(--k-marke); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
  transition: color .3s ease;
}
html[data-vorlage="kino"] .w-nav-link:hover { color: var(--k-text); background: none; }
html[data-vorlage="kino"] .w-nav .w-nav-aktiv { color: var(--k-text); }
html[data-vorlage="kino"] .w-nav .w-nav-aktiv::after {
  height: 1px; margin-top: 6px; border-radius: 0;
  background: var(--k-glut);
}

/* Mobiles Menue: reines <details>. */
html[data-vorlage="kino"] .w-menue { display: block; }
html[data-vorlage="kino"] .w-menue-knopf {
  gap: 10px;
  min-height: 42px; padding: 10px 2px 10px 12px;
  font-family: var(--k-marke); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--k-dezent);
  background: none; border: 0; border-radius: 0;
}
html[data-vorlage="kino"] .w-menue-knopf::after {
  width: 18px; height: 7px;
  border: 0; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: none;
  transition: transform .3s ease;
}
html[data-vorlage="kino"] .w-menue[open] .w-menue-knopf { color: var(--k-text); }
html[data-vorlage="kino"] .w-menue[open] .w-menue-knopf::after { transform: scaleY(-1); }
html[data-vorlage="kino"] .w-menue-nav {
  top: calc(100% + 10px);
  min-width: min(78vw, 250px);
  padding: 10px 6px; gap: 0;
  background: color-mix(in srgb, var(--w-bg-tief) 97%, transparent);
  border: 1px solid var(--k-linie); border-radius: 0;
  box-shadow: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
html[data-vorlage="kino"] .w-menue-nav .w-nav-link { padding: 12px 14px; color: var(--k-text); }
html[data-vorlage="kino"] .w-menue-nav .w-nav-aktiv { color: var(--k-glut-hell); background: none; }

/* ----------------------------------------------------------------------- Haupt */
html[data-vorlage="kino"] .w-main { counter-reset: kino-kapitel; }
html[data-vorlage="kino"] .w-leer { min-height: 46vh; }

/* -------------------------------------------------------------------- Abschnitt */
html[data-vorlage="kino"] .w-abschnitt {
  isolation: isolate;
  --k-oben: var(--k-luft);
  --k-breite: var(--k-bahn);
  padding-block: calc(var(--k-oben) * var(--k-dichte));
}
html[data-vorlage="kino"] .w-breite-schmal { --k-breite: var(--k-bahn-schmal); }
html[data-vorlage="kino"] .w-breite-breit { --k-breite: var(--k-bahn-breit); }
html[data-vorlage="kino"] .w-breite-voll { --k-breite: 100%; }
html[data-vorlage="kino"] .w-abstand-eng { --k-oben: var(--k-luft-eng); }
html[data-vorlage="kino"] .w-abstand-normal { --k-oben: var(--k-luft); }
html[data-vorlage="kino"] .w-abstand-weit { --k-oben: var(--k-luft-weit); }
/* Eine Knopfreihe gehoert zum Text davor, ein Platzhalter spaeterer
   Etappen (nur in der Vorschau) ist eine Randnotiz: beide mit halber Luft. */
html[data-vorlage="kino"] .w-typ-knoepfe { --k-dichte: .5; }
html[data-vorlage="kino"] .w-abschnitt:has(> .w-bahn > .w-spaeter) { --k-dichte: .4; }

/* Die Hintergrund-Ebenen aus website.css (::before) sind hier aus - Kino
   legt seine eigenen auf ::after, ::before traegt die Kapitelmarke. */
html[data-vorlage="kino"] .w-abschnitt::before {
  background: none;
  -webkit-mask-image: none; mask-image: none;
  opacity: 1;
}
/* Kapitelmarke: die Abschnitte sind durchnummeriert wie Einstellungen im
   Schnittplan. Nur auf breiten Schirmen und nur dort, wo wirklich Inhalt
   steht (Held, Trenner, Leerraum, Knopfreihen und Platzhalter zaehlen
   nicht mit). */
html[data-vorlage="kino"] .w-abschnitt:not(.w-typ-held, .w-typ-trenner, .w-typ-abstand, .w-typ-knoepfe, :has(> .w-bahn > .w-spaeter)) { counter-increment: kino-kapitel; }
html[data-vorlage="kino"] .w-abschnitt:not(.w-typ-held, .w-typ-trenner, .w-typ-abstand, .w-typ-knoepfe, :has(> .w-bahn > .w-spaeter))::before {
  content: counter(kino-kapitel, decimal-leading-zero);
  position: absolute; inset: auto; top: calc(var(--k-oben) * var(--k-dichte)); left: 0;
  display: none;
  font-family: var(--k-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .12em;
  color: var(--k-still);
}

/* Hintergrundarten - in Kino alle sehr zurueckgenommen. "Keiner" heisst
   wirklich keiner: keine eigene Ebene, die Szene liegt frei. */
html[data-vorlage="kino"] .w-hg-keiner::after { content: none; }
html[data-vorlage="kino"] :is(.w-hg-verlauf, .w-hg-bild, .w-hg-ornament)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
html[data-vorlage="kino"] .w-hg-verlauf:not(.w-typ-held)::after {
  background-image: linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--w-a-farbe, var(--k-tief)) 35%, transparent) 62%,
    color-mix(in srgb, var(--w-a-farbe, var(--k-tief)) 86%, transparent) 100%);
}
/* Ornament: senkrechtes Linienraster wie Filmkader, zur Mitte hin sichtbar.
   Die Ornament-Staerke steckt in der Deckkraft der Linien; eine Farbe aus
   dem Editor zeichnet die Linien und liegt als leiser Schein (22 %) im Band -
   ohne Farbe bleibt es beim Rand-Ton des Entwurfs. */
html[data-vorlage="kino"] .w-hg-ornament::after {
  background-image:
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--w-a-farbe, var(--k-linie)) calc(min(1, var(--w-ornamente) * 1.6) * 100%), transparent) 0 1px,
      transparent 1px 64px),
    linear-gradient(color-mix(in srgb, var(--w-a-farbe, transparent) 22%, transparent), color-mix(in srgb, var(--w-a-farbe, transparent) 22%, transparent));
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, #000 60%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 40%, #000 60%, transparent);
}
html[data-vorlage="kino"] .w-hg-bild::after {
  background-image:
    linear-gradient(color-mix(in srgb, var(--w-a-farbe, var(--k-tief)) calc(var(--w-a-dunkel, .55) * 100%), transparent), color-mix(in srgb, var(--w-a-farbe, var(--k-tief)) calc(var(--w-a-dunkel, .55) * 100%), transparent)),
    var(--w-a-bild, none);
  background-size: cover; background-position: center;
}
/* "Karte" ist in Kino kein Kasten, sondern ein eingerueckter Block mit
   Haarlinie links - ruhig, aber deutlich abgesetzt. Eine Farbe aus dem
   Editor liegt als eigener Schein ueber dem Schimmer (links 28 %, bis 70 %
   auslaufend) und faerbt die Haarlinie. */
html[data-vorlage="kino"] .w-hg-karte > .w-bahn {
  padding-block: clamp(26px, 5vw, 44px);
  padding-inline: clamp(20px, 5vw, 44px);
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--w-a-farbe, transparent) 28%, transparent),
      color-mix(in srgb, var(--w-a-farbe, transparent) 8%, transparent) 70%,
      transparent),
    linear-gradient(90deg,
      color-mix(in srgb, var(--w-a-farbe, var(--k-glut)) 5%, transparent),
      color-mix(in srgb, var(--k-text) 1.2%, transparent) 42%,
      transparent);
  border: 0; border-left: 1px solid var(--w-a-farbe, var(--k-glut-tief));
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* Eckzier der Kartenstile gibt es in Kino nicht. */
html[data-vorlage="kino"] :is(.w-status, .w-hg-karte > .w-bahn)::before,
html[data-vorlage="kino"] :is(.w-status, .w-hg-karte > .w-bahn)::after { display: none; }

/* ------------------------------------------------------------------------ Held */
/* Bildschirmfuellende Szene, der Claim sitzt im unteren Drittel links. Der
   Abschnitt selbst bekommt keinen Kasten, keine Karte, keinen Rahmen. Steht
   er ganz oben (data-held="ja"), rutscht er unter den Kopf: genau ein
   Bildschirm, der Kopf liegt als Glas darauf. */
html[data-vorlage="kino"] .w-typ-held {
  min-height: 100svh;
  padding-block: calc(var(--k-kopf) + 16px) 0;
  display: grid;
  align-items: end;
  overflow: clip;
}
html[data-vorlage="kino"][data-held="ja"] .w-main > .w-typ-held:first-child { margin-top: calc(-1 * (var(--k-kopf) + 1px)); }
/* Bahn und Held ohne eigene Lage: Bild und Verlauf beziehen sich auf den
   ganzen Abschnitt (randlos), nicht nur auf die Textspalte. */
html[data-vorlage="kino"] .w-typ-held > .w-bahn {
  position: static;
  max-width: var(--k-bahn-breit); width: 100%;
  padding-bottom: clamp(56px, 14vh, 128px);
}
html[data-vorlage="kino"] .w-held { position: static; text-align: left; }
/* Das Tor gehoert der Festung - in Kino ist die Szene der Rahmen. */
html[data-vorlage="kino"] .w-held-tor { display: none; }
html[data-vorlage="kino"] .w-held-hintergrund { position: absolute; inset: 0; z-index: 0; border-radius: 0; }
html[data-vorlage="kino"] .w-held-hintergrund::after {
  background: linear-gradient(180deg, color-mix(in srgb, var(--k-tief) 45%, transparent), color-mix(in srgb, var(--k-tief) 90%, transparent));
}
/* Ein eigenes Bild ersetzt die Szene im Kopfbereich: als Standbild, leicht
   entsaettigt, damit die eine Glutfarbe die einzige kraeftige bleibt. */
html[data-vorlage="kino"] .w-held-bild {
  object-position: center 35%;
  filter: saturate(.72) contrast(1.06) brightness(.9);
}
/* Eigener Fussverlauf: garantiert Kontrast unter dem Claim, egal wie hell
   die Glut gerade steht (Haken aus website-html.ts). */
html[data-vorlage="kino"] .w-held-deko {
  display: block;
  position: absolute; inset: auto 0 0 0; z-index: 1;
  height: 72%;
  pointer-events: none;
  background-image: linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--k-tief) 55%, transparent) 46%,
    color-mix(in srgb, var(--k-tief) 92%, transparent) 100%);
}
html[data-vorlage="kino"] .w-held-inhalt {
  position: relative; z-index: 2;
  align-items: flex-start;
  gap: 26px;
}
/* Statt Wappen: eine Haarlinie mit Glut - die "Einblendung" des Titels. */
html[data-vorlage="kino"] .w-held-inhalt::before {
  width: clamp(120px, 30vw, 260px); height: 1px;
  margin-bottom: 2px;
  background: linear-gradient(90deg, var(--k-glut), transparent);
  -webkit-mask-image: none; mask-image: none;
  opacity: 1; filter: none;
}
html[data-vorlage="kino"] .w-held-titel {
  font-family: var(--k-display);
  font-size: clamp(56px, 17vw, 200px);
  font-weight: 800;
  line-height: .84;
  letter-spacing: -.055em;
  color: var(--k-text);
  max-width: 100%;
  hyphens: auto;
  overflow-wrap: anywhere;
}
html[data-vorlage="kino"] .w-held-unter {
  max-width: 32rem;
  font-family: var(--k-stimme); font-style: italic; font-weight: 400;
  font-size: clamp(18px, 4.2vw, 25px);
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--k-dezent);
}
/* Adresse: nackte Zeile zwischen zwei Haarlinien, kein Kasten. */
html[data-vorlage="kino"] .w-ip {
  justify-content: flex-start; gap: 16px;
  width: 100%; max-width: 30rem;
  padding: 14px 0;
  border: 0; border-top: 1px solid var(--k-linie); border-bottom: 1px solid var(--k-linie);
  border-radius: 0;
  background: none;
}
html[data-vorlage="kino"] .w-ip-text {
  font-family: var(--k-mono);
  font-size: clamp(17px, 4.6vw, 22px);
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--k-text);
  margin-right: auto;
}
html[data-vorlage="kino"] .w-held-knoepfe { justify-content: flex-start; }

/* ---------------------------------------------------------------- Typografie */
html[data-vorlage="kino"] .w-abschnitt-titel {
  font-family: var(--k-display);
  font-size: clamp(30px, 7.4vw, 54px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.04em;
  text-wrap: balance;
  hyphens: auto;
  overflow-wrap: break-word;
  margin: 0 0 28px;
  max-width: 20ch;
}
html[data-vorlage="kino"] .w-abschnitt-titel::after { content: none; }
/* Ausrichtung: links ist die Grundhaltung des Abspanns. */
html[data-vorlage="kino"] .w-aus-links { text-align: left; }
html[data-vorlage="kino"] .w-aus-mitte .w-abschnitt-titel { margin-inline: auto; }
html[data-vorlage="kino"] .w-aus-rechts .w-abschnitt-titel { margin-inline-start: auto; }
/* Listen-Bausteine: etwas mehr Luft zwischen Titel und erster Haarlinie;
   beim Video folgt der Text direkt. */
html[data-vorlage="kino"] :is(.w-regeln, .w-faq, .w-schritte, .w-zahlen, .w-team, .w-raenge) > .w-abschnitt-titel { margin-bottom: clamp(26px, 4vw, 36px); }
html[data-vorlage="kino"] .w-video > .w-abschnitt-titel { margin-bottom: 16px; }

html[data-vorlage="kino"] .w-fliess { color: var(--k-text); font-size: 1.0625rem; }
html[data-vorlage="kino"] .w-fliess p { margin: 0 0 1.15em; color: var(--k-dezent); }
html[data-vorlage="kino"] .w-fliess > :last-child { margin-bottom: 0; }
html[data-vorlage="kino"] :is(.w-fliess h3, .w-fliess h4) {
  font-family: var(--k-display);
  font-weight: 700; letter-spacing: -.025em; line-height: 1.2;
  color: var(--k-text);
}
html[data-vorlage="kino"] .w-fliess h3 { font-size: clamp(20px, 4vw, 26px); margin: 2.2em 0 .7em; }
html[data-vorlage="kino"] .w-fliess h4 { font-size: 17px; margin: 1.9em 0 .5em; }
html[data-vorlage="kino"] .w-fliess > :is(h3, h4):first-child { margin-top: 0; }
html[data-vorlage="kino"] .w-fliess strong { color: var(--k-text); font-weight: 600; }
html[data-vorlage="kino"] .w-fliess em { font-family: var(--k-stimme); font-style: italic; }
html[data-vorlage="kino"] :is(.w-fliess ol, .w-fliess ul) { margin: 0 0 1.3em; padding-left: 0; list-style: none; }
html[data-vorlage="kino"] .w-fliess li { margin: .5em 0; color: var(--k-dezent); padding-left: 26px; position: relative; }
html[data-vorlage="kino"] .w-fliess ul > li::before {
  content: ""; position: absolute; left: 0; top: .82em;
  width: 8px; height: 1px;
  background: var(--k-glut);
  -webkit-mask-image: none; mask-image: none;
}
html[data-vorlage="kino"] .w-fliess ol { counter-reset: kino-punkt; }
html[data-vorlage="kino"] .w-fliess ol > li { counter-increment: kino-punkt; }
html[data-vorlage="kino"] .w-fliess ol > li::before {
  content: counter(kino-punkt, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--k-mono); font-size: 11px; line-height: 2.1;
  color: var(--k-dezent);
}
html[data-vorlage="kino"] .w-fliess blockquote {
  margin: 1.8em 0; padding: 0 0 0 24px;
  border: 0; border-left: 1px solid var(--k-glut-tief); border-radius: 0;
  background: none;
  font-family: var(--k-stimme); font-style: italic;
  font-size: clamp(19px, 3.4vw, 23px); line-height: 1.5;
  color: var(--k-text);
}
html[data-vorlage="kino"] .w-fliess code {
  font-family: var(--k-mono); font-size: .88em;
  color: var(--k-glut-hell);
  padding: 1px 5px; border-radius: 0;
  background: color-mix(in srgb, var(--k-glut) 9%, transparent);
}
html[data-vorlage="kino"] .w-fliess hr { border: 0; border-top: 1px solid var(--k-linie); margin: 2.4em 0; }
html[data-vorlage="kino"] .w-fliess a { color: var(--k-text); text-decoration-color: var(--k-glut); }
html[data-vorlage="kino"] .w-fliess a:hover { color: var(--k-glut-hell); }

/* Eine Spalte: ruhige Zeilenlaenge. Zwei Spalten (ab 720 px, website.css)
   nutzen die ganze Bahn - jede Spalte hat dann schon ihr Mass. */
html[data-vorlage="kino"] .w-text.w-spalten-1 .w-fliess { max-width: 68ch; }
html[data-vorlage="kino"] .w-text.w-spalten-2 .w-fliess { max-width: none; }
html[data-vorlage="kino"] .w-aus-mitte .w-fliess li { display: inline-block; text-align: left; }

/* ------------------------------------------------------------------- Knoepfe */
html[data-vorlage="kino"] .w-knoepfe { align-items: center; gap: 14px; }
html[data-vorlage="kino"] .w-knopf {
  gap: 10px;
  min-height: 48px; padding: 14px 26px;
  border: 1px solid transparent; border-radius: 0;
  font-family: var(--k-marke); font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  box-shadow: none;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
html[data-vorlage="kino"] .w-knopf:hover, html[data-vorlage="kino"] .w-knopf:active { transform: none; }
html[data-vorlage="kino"] .w-knopf-ok { color: var(--k-auf-glut); background: var(--k-glut); }
html[data-vorlage="kino"] .w-knopf-ok:hover {
  background: var(--k-glut-hell);
  box-shadow: 0 10px 44px color-mix(in srgb, var(--k-glut) 35%, transparent);
}
html[data-vorlage="kino"] .w-knopf-leise { color: var(--k-text); background: transparent; border-color: var(--k-linie-stark); }
html[data-vorlage="kino"] .w-knopf-leise:hover { color: var(--k-text); border-color: var(--k-text); background: color-mix(in srgb, var(--k-text) 5%, transparent); }
html[data-vorlage="kino"] .w-knopf-gefahr { color: var(--k-glut-hell); background: transparent; border-color: var(--k-glut-tief); }
html[data-vorlage="kino"] .w-knopf-gefahr:hover { color: var(--k-auf-glut); background: var(--k-glut); border-color: var(--k-glut); }

/* Kopier-Knopf: Text mit Haarlinie, kein Kasten. */
html[data-vorlage="kino"] .w-ip-knopf {
  min-height: 34px; padding: 4px 0;
  font-family: var(--k-marke); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--k-dezent); background: none;
  border: 0; border-bottom: 1px solid var(--k-linie-stark); border-radius: 0;
  transition: color .25s ease, border-color .25s ease;
}
html[data-vorlage="kino"] .w-ip-knopf:hover { color: var(--k-text); border-bottom-color: var(--k-text); }
html[data-vorlage="kino"] .w-ip-knopf[data-kopiert="ja"] { color: var(--w-ok); border-bottom-color: var(--w-ok); }
html[data-vorlage="kino"] .w-ip-knopf[data-kopiert="nein"] { color: var(--w-fehler); border-bottom-color: var(--w-fehler); }

/* --------------------------------------------------------------- Statuspunkt */
/* Online glimmt in der Glut - die eine Akzentfarbe steht fuer "lebt". */
html[data-vorlage="kino"] .w-punkt {
  width: 7px; height: 7px;
  background: var(--k-still);
  box-shadow: none;
  animation: none;
}
html[data-vorlage="kino"] .w-punkt[data-status="online"] { background: var(--k-glut); box-shadow: 0 0 14px color-mix(in srgb, var(--k-glut) 95%, transparent); }
html[data-vorlage="kino"] .w-punkt:is([data-status="wartung"], [data-status="startet"]) { background: color-mix(in srgb, var(--w-gold) 60%, var(--w-text)); }
html[data-vorlage="kino"] .w-punkt[data-status="offline"] { background: color-mix(in srgb, var(--w-fehler) 45%, var(--w-bg)); }
@media (prefers-reduced-motion: no-preference) {
  html[data-vorlage="kino"] .w-punkt[data-status="online"] { animation: kino-glimmen 3.4s ease-in-out infinite; }
}

/* =========================================================== Bausteine */
/* Alle Kartenflaechen aus website.css sind in Kino keine Kaesten:
   Haarlinien und Luft statt Flaeche, Rahmen und Schatten. */
html[data-vorlage="kino"] :is(.w-kachel, .w-status, .w-schritt, .w-regel, .w-frage, .w-person, .w-rangkarte, .w-spieler, .w-rangliste, .w-spielzeit) {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* -------------------------------------------------------------- Text mit Bild */
html[data-vorlage="kino"] .w-textbild { gap: clamp(22px, 5vw, 56px); }
html[data-vorlage="kino"] .w-textbild .w-abschnitt-titel { margin-bottom: 20px; }
html[data-vorlage="kino"] .w-textbild-text { min-width: 0; }
/* Ohne Bild steht der Text allein - mit derselben Zeilenlaenge wie ein
   Textabschnitt statt ueber die ganze Bahn. */
html[data-vorlage="kino"] .w-textbild-ohne-bild .w-textbild-text { max-width: 68ch; }
html[data-vorlage="kino"] .w-textbild-figur { position: relative; }
/* Das Bild als Filmstandbild: randlos, mit Haarlinie und Glutkante unten. */
html[data-vorlage="kino"] .w-textbild-bild { border-radius: 0; box-shadow: none; border: 1px solid var(--k-linie); }
html[data-vorlage="kino"] .w-textbild-figur::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 56px; height: 1px;
  background: var(--k-glut);
}

/* --------------------------------------------------------------------- Zahlen */
/* Nackte Ziffern, nur durch Haarlinien getrennt. Keine Kacheln. */
html[data-vorlage="kino"] .w-kacheln {
  display: grid; gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--k-linie);
}
html[data-vorlage="kino"] .w-kachel {
  flex-direction: row; align-items: baseline; gap: 20px;
  padding: 22px 0;
  text-align: left;
  border-bottom: 1px solid var(--k-linie);
}
html[data-vorlage="kino"] .w-kachel-wert {
  font-family: var(--k-display);
  font-size: clamp(48px, 15vw, 96px);
  white-space: nowrap;
  font-weight: 800;
  line-height: .88;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums lining-nums;
  background: none;
  -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--k-text);
}
html[data-vorlage="kino"] .w-kachel-label {
  font-family: var(--k-mono); font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--k-dezent);
  overflow-wrap: anywhere;
}
/* Ab drei Kacheln wird die Spalte schmal: kleinere Ziffern, Beschriftung
   darunter statt daneben. */
html[data-vorlage="kino"] .w-kacheln:has(.w-kachel:nth-child(3)) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
html[data-vorlage="kino"] .w-kacheln:has(.w-kachel:nth-child(3)) .w-kachel { flex-direction: column; align-items: flex-start; gap: 8px; }
html[data-vorlage="kino"] .w-kacheln:has(.w-kachel:nth-child(3)) .w-kachel-wert { font-size: clamp(40px, 10vw, 72px); }
html[data-vorlage="kino"] .w-kacheln:has(.w-kachel:nth-child(5)) .w-kachel-wert { font-size: clamp(34px, 8vw, 56px); }

/* ---------------------------------------------------------------- Serverstatus */
html[data-vorlage="kino"] .w-status { gap: 22px; padding: 0; }
/* In den Raster-Bausteinen traegt der Abstand des Rasters, nicht der Titel. */
html[data-vorlage="kino"] :is(.w-status, .w-spieler, .w-rangliste, .w-spielzeit) > .w-abschnitt-titel { margin-bottom: 0; }
/* In der schmalen Titelspalte der Statuskarte bricht der Riesentitel sonst mitten
   im Wort ("Serverstatu-s"): kleiner setzen und nur an Silbengrenzen trennen. */
html[data-vorlage="kino"] .w-status > .w-abschnitt-titel { font-size: clamp(28px, 3.1vw, 40px); overflow-wrap: normal; word-break: normal; hyphens: auto; }
html[data-vorlage="kino"] .w-status-zustand {
  gap: 12px;
  font-family: var(--k-mono); font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--k-text);
}
html[data-vorlage="kino"] .w-status-text { font-weight: 500; }
html[data-vorlage="kino"] .w-status-daten { gap: 0; border-top: 1px solid var(--k-linie); }
html[data-vorlage="kino"] .w-status-feld {
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--k-linie);
}
html[data-vorlage="kino"] .w-status-feld dt {
  font-family: var(--k-mono); font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--k-dezent);
}
html[data-vorlage="kino"] .w-status-feld dd {
  gap: 16px;
  font-family: var(--k-mono); font-size: 15px; font-weight: 400; color: var(--k-text);
}
html[data-vorlage="kino"] .w-status-feld code { font-family: var(--k-mono); color: var(--k-glut-hell); }
html[data-vorlage="kino"] .w-status-hinweis { color: var(--k-dezent); }

/* ------------------------------------------------------------------- Schritte */
html[data-vorlage="kino"] .w-schritt-liste { gap: 0; border-top: 1px solid var(--k-linie); counter-reset: kino-schritt; }
html[data-vorlage="kino"] .w-schritt {
  grid-template-columns: 1fr; gap: 6px;
  padding: 28px 0;
  border-bottom: 1px solid var(--k-linie);
  counter-increment: kino-schritt;
}
/* Die Ziffer des Renderers (aria-hidden) wird durch den Zaehler ersetzt -
   so wird aus "1" die Einstellung "01" und aus "10" nicht "010". */
html[data-vorlage="kino"] .w-schritt-nummer {
  display: block;
  width: auto; height: auto; border-radius: 0;
  background: none;
  font-size: 0; line-height: 1;
}
html[data-vorlage="kino"] .w-schritt-nummer::before {
  content: counter(kino-schritt, decimal-leading-zero);
  font-family: var(--k-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .2em; color: var(--k-glut);
}
html[data-vorlage="kino"] .w-schritt-titel {
  margin: 0 0 8px;
  font-family: var(--k-display);
  font-size: clamp(20px, 4.4vw, 27px); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.15;
}
html[data-vorlage="kino"] .w-schritt-inhalt .w-fliess { max-width: 54ch; }
html[data-vorlage="kino"] .w-schritt-bild { margin-top: 16px; border-radius: 0; border: 1px solid var(--k-linie); }

/* --------------------------------------------------------------- Regeln / FAQ */
html[data-vorlage="kino"] :is(.w-regel-liste, .w-faq-liste) { gap: 0; border-top: 1px solid var(--k-linie); }
html[data-vorlage="kino"] :is(.w-regel, .w-frage) { overflow: visible; border-bottom: 1px solid var(--k-linie); }
html[data-vorlage="kino"] :is(.w-regel-kopf, .w-frage-kopf) {
  gap: 16px;
  padding: 22px 0; min-height: 56px;
  font-family: var(--k-display);
  font-size: clamp(17px, 3.8vw, 21px); font-weight: 600;
  letter-spacing: -.02em;
  color: var(--k-text);
  transition: color .25s ease;
}
html[data-vorlage="kino"] :is(details > .w-regel-kopf, .w-frage-kopf):hover { color: var(--k-glut-hell); background: none; }
/* Plus, das sich beim Oeffnen zum Kreuz dreht. */
html[data-vorlage="kino"] :is(details > .w-regel-kopf, .w-frage-kopf)::after {
  width: 13px; height: 13px;
  border: 0;
  transform: none; transform-origin: 50% 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 13px 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 13px no-repeat;
  color: var(--k-still);
  transition: transform .35s cubic-bezier(.16, .8, .3, 1), color .25s ease;
}
html[data-vorlage="kino"] :is(.w-regel, .w-frage)[open] > :is(.w-regel-kopf, .w-frage-kopf)::after { transform: rotate(135deg); color: var(--k-glut); }
html[data-vorlage="kino"] .w-regel-nummern .w-regel-kopf::before {
  content: counter(w-regel, decimal-leading-zero);
  font-family: var(--k-mono); font-size: 11px;
  letter-spacing: .12em; color: var(--k-glut);
}
html[data-vorlage="kino"] .w-regel-icon { font-size: 15px; opacity: .8; filter: grayscale(1) contrast(1.2); }
html[data-vorlage="kino"] .w-regel-titel { flex: 1 1 auto; text-wrap: pretty; }
html[data-vorlage="kino"] :is(.w-regel-text, .w-antwort) { padding: 0 0 26px; max-width: 62ch; color: var(--k-dezent); }
html[data-vorlage="kino"] :is(.w-regel-text, .w-antwort) p { color: var(--k-dezent); margin-bottom: 0; }

/* ---------------------------------------------------------------------- Video */
/* Das Video ist eine Einstellung im Breitbild: Vorschaubild und Platzhalter
   stehen beide im Kinoformat 2,39 : 1, unten links die Glutkante wie beim
   Standbild im Text mit Bild. */
html[data-vorlage="kino"] .w-video-text { margin: 0 0 20px; color: var(--k-dezent); }
html[data-vorlage="kino"] .w-video-link { border: 1px solid var(--k-linie); border-radius: 0; }
html[data-vorlage="kino"] .w-video-link::after {
  content: ""; position: absolute; left: 0; bottom: 0; z-index: 1;
  width: 56px; height: 1px;
  background: var(--k-glut);
}
html[data-vorlage="kino"] .w-video-bild { aspect-ratio: 2.39 / 1; object-fit: cover; filter: saturate(.85); }
/* Ohne Vorschaubild: die gezeichnete Szene im Breitbild (2,39 : 1). */
html[data-vorlage="kino"] .w-video-platz {
  position: relative;
  aspect-ratio: 2.39 / 1;
  background-color: var(--k-tief);
  background-image: radial-gradient(90% 60% at 50% 96%, color-mix(in srgb, var(--k-glut) 40%, transparent), transparent 70%);
}
html[data-vorlage="kino"] :is(.w-video-platz, .w-banner-leer)::before,
html[data-vorlage="kino"] :is(.w-video-platz, .w-banner-leer)::after {
  content: ""; position: absolute; left: 0; right: 0;
  pointer-events: none;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  -webkit-mask-position: left 0 bottom 0; mask-position: left 0 bottom 0;
}
html[data-vorlage="kino"] .w-video-platz::before {
  bottom: 24px; height: 208px;
  background-color: var(--k-fels);
  -webkit-mask-image: url("/website/vorlagen/kino/szene-2-berge.svg"); mask-image: url("/website/vorlagen/kino/szene-2-berge.svg");
  -webkit-mask-size: 1200px 208px; mask-size: 1200px 208px;
}
html[data-vorlage="kino"] .w-video-platz::after {
  bottom: 0; height: 128px;
  background-color: var(--k-nacht);
  -webkit-mask-image: url("/website/vorlagen/kino/szene-3-wald.svg"); mask-image: url("/website/vorlagen/kino/szene-3-wald.svg");
  -webkit-mask-size: 900px 128px; mask-size: 900px 128px;
}
html[data-vorlage="kino"] .w-video-play {
  z-index: 1;
  width: 64px; height: 64px; border-radius: 0;
  font-size: 20px;
  color: var(--k-text);
  background: color-mix(in srgb, var(--k-tief) 60%, transparent);
  border: 1px solid var(--k-linie-stark);
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
html[data-vorlage="kino"] .w-video-link:hover .w-video-play { background: var(--k-glut); color: var(--k-auf-glut); border-color: var(--k-glut); }

/* ------------------------------------------------------------------ Bildbanner */
/* Ein Banner ist in Kino eine "Einstellung": Breitbild-Fenster zwischen
   zwei Haarlinien, Untertitel unten links. Ohne Bild zeigt es die
   gezeichnete Szene (Haken .w-banner-leer). */
html[data-vorlage="kino"] .w-typ-bildBanner { padding-block: var(--k-luft-eng); }
html[data-vorlage="kino"] .w-banner { border-block: 1px solid var(--k-linie); }
html[data-vorlage="kino"] .w-banner-bild { filter: saturate(.85); }
html[data-vorlage="kino"] .w-banner-mittel .w-banner-bild { height: clamp(180px, 42vw, 300px); }
html[data-vorlage="kino"] .w-banner-klein .w-banner-bild { height: clamp(130px, 28vw, 200px); }
html[data-vorlage="kino"] .w-banner-gross .w-banner-bild { height: clamp(240px, 58vw, 460px); }
html[data-vorlage="kino"] .w-banner-beschriftung {
  padding: clamp(20px, 5vw, 44px);
  text-align: left;
  background: linear-gradient(0deg, color-mix(in srgb, var(--k-tief) 92%, transparent), color-mix(in srgb, var(--k-tief) 10%, transparent));
}
html[data-vorlage="kino"] .w-banner-titel {
  margin: 0 0 8px; max-width: 24ch;
  font-family: var(--k-display);
  font-size: clamp(24px, 6vw, 44px); font-weight: 700; letter-spacing: -.04em; line-height: 1.04;
}
html[data-vorlage="kino"] .w-banner-text { color: var(--k-dezent); font-family: var(--k-stimme); font-style: italic; }
html[data-vorlage="kino"] .w-banner-leer {
  isolation: isolate;
  min-height: clamp(200px, 34vw, 340px);
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  background-color: var(--k-tief);
  background-image: radial-gradient(80% 46% at 50% 100%, color-mix(in srgb, var(--k-glut) 45%, transparent), transparent 72%);
}
html[data-vorlage="kino"] .w-banner-leer.w-banner-klein { min-height: clamp(150px, 24vw, 220px); }
html[data-vorlage="kino"] .w-banner-leer.w-banner-gross { min-height: clamp(260px, 48vw, 460px); }
html[data-vorlage="kino"] .w-banner-leer::before {
  z-index: -1; bottom: 30px; height: 244px;
  background-color: var(--k-fels);
  -webkit-mask-image: url("/website/vorlagen/kino/szene-2-berge.svg"); mask-image: url("/website/vorlagen/kino/szene-2-berge.svg");
  -webkit-mask-size: 1400px 244px; mask-size: 1400px 244px;
}
html[data-vorlage="kino"] .w-banner-leer::after {
  z-index: -1; bottom: 0; height: 142px;
  background-color: var(--k-nacht);
  -webkit-mask-image: url("/website/vorlagen/kino/szene-3-wald.svg"); mask-image: url("/website/vorlagen/kino/szene-3-wald.svg");
  -webkit-mask-size: 1000px 142px; mask-size: 1000px 142px;
}
html[data-vorlage="kino"] .w-banner-leer .w-banner-beschriftung {
  position: relative;
  border-radius: 0;
  background: linear-gradient(0deg, color-mix(in srgb, var(--k-tief) 95%, transparent), color-mix(in srgb, var(--k-tief) 25%, transparent));
}

/* -------------------------------------------------------------------- Trenner */
/* Kein Ornament: eine Haarlinie, die aus dem Nichts kommt und wieder
   verschwindet, mit einem Glutpunkt in der Mitte. */
html[data-vorlage="kino"] .w-typ-trenner { padding-block: var(--k-luft-eng); }
html[data-vorlage="kino"] .w-trenner { align-items: center; }
html[data-vorlage="kino"] .w-trenner-figur {
  position: relative;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--k-linie-stark) 22%, var(--k-linie-stark) 78%, transparent);
  -webkit-mask-image: none; mask-image: none;
  opacity: 1;
}
html[data-vorlage="kino"] .w-trenner-ornament .w-trenner-figur::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 5px; height: 5px;
  background: var(--k-glut);
  box-shadow: 0 0 16px color-mix(in srgb, var(--k-glut) 80%, transparent);
}
html[data-vorlage="kino"] .w-trenner-linie .w-trenner-figur {
  background: linear-gradient(90deg, transparent, var(--k-linie) 20%, var(--k-linie) 80%, transparent);
}
html[data-vorlage="kino"] .w-trenner-wappen .w-trenner-figur {
  width: 44px; height: 44px;
  background: var(--k-glut);
  -webkit-mask-image: url("/website/vorlagen/kino/scheibe.svg"); mask-image: url("/website/vorlagen/kino/scheibe.svg");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* -------------------------------------------------------------------- Abstand */
html[data-vorlage="kino"] :is(.w-leerraum, .w-leerraum-mittel) { height: 48px; }
html[data-vorlage="kino"] .w-leerraum-klein { height: 24px; }
html[data-vorlage="kino"] .w-leerraum-gross { height: 96px; }

/* ------------------------------------------------------------- Spaetere Etappen */
html[data-vorlage="kino"] .w-spaeter {
  padding: 20px 0;
  border: 0; border-block: 1px solid var(--k-linie); border-radius: 0;
  font-family: var(--k-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; text-align: left;
  color: var(--k-dezent);
}

/* =========================================================== Live-Bausteine
   Team, Spieler online, Rangliste, Spielzeit, Raenge (Etappe 2) - in der
   Handschrift des Abspanns: Mono-Beschriftung, grosse Namen, Haarlinien.
   ========================================================================= */

/* "Kein Signal": Hinweis, wenn eine Live-Quelle nichts liefert. */
html[data-vorlage="kino"] .w-leer-hinweis {
  display: flex; align-items: center; gap: 14px;
  margin: 0; padding: 20px 0;
  border-block: 1px solid var(--k-linie);
  font-family: var(--k-mono); font-size: 11px; line-height: 1.8;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--k-dezent);
}
html[data-vorlage="kino"] .w-leer-hinweis::before {
  content: ""; flex: none;
  width: 7px; height: 7px;
  border: 1px solid var(--k-still);
}

/* Bilder und Platzhalter: kantig, Mono-Buchstabe, leicht entsaettigt. */
html[data-vorlage="kino"] :is(.w-person-bild, .w-person-platz, .w-kopf-bild, .w-kopf-platz, .w-rang-bild, .w-rang-platz, .w-zeit-bild, .w-zeit-platz) {
  border-radius: 0;
  background: color-mix(in srgb, var(--k-fels) 70%, var(--k-glut) 8%);
  color: var(--k-glut-hell);
  font-family: var(--k-mono); font-weight: 600;
}

/* ----------------------------------------------------------------------- Team */
/* Die Besetzung: Rolle in Mono ueber dem Namen, wie im Abspann. */
html[data-vorlage="kino"] .w-team-liste { gap: 0; grid-template-columns: 1fr; border-top: 1px solid var(--k-linie); }
html[data-vorlage="kino"] .w-person {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: start;
  gap: 0 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--k-linie);
}
html[data-vorlage="kino"] :is(.w-person-bild, .w-person-platz) {
  width: 64px; height: 64px; font-size: 22px;
  border: 1px solid var(--k-linie);
  filter: grayscale(.35) contrast(1.05);
  transition: filter .5s ease;
}
html[data-vorlage="kino"] .w-person:hover :is(.w-person-bild, .w-person-platz) { filter: none; }
html[data-vorlage="kino"] .w-person-inhalt { display: flex; flex-direction: column; }
html[data-vorlage="kino"] .w-person-name {
  order: 2;
  margin: 0;
  font-family: var(--k-display);
  font-size: clamp(21px, 4.6vw, 27px); font-weight: 700;
  letter-spacing: -.035em; line-height: 1.1;
  color: var(--k-text);
  overflow-wrap: anywhere;
}
html[data-vorlage="kino"] .w-person-rolle {
  order: 1;
  margin: 2px 0 8px;
  font-family: var(--k-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--k-glut);
}
html[data-vorlage="kino"] .w-person-text { order: 3; margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--k-dezent); }

/* -------------------------------------------------------------- Spieler online */
html[data-vorlage="kino"] .w-spieler { gap: 22px; padding: 0; }
html[data-vorlage="kino"] .w-spieler-zahl { align-items: baseline; gap: 10px 18px; }
html[data-vorlage="kino"] .w-spieler-wert {
  font-family: var(--k-display);
  font-size: clamp(48px, 13vw, 88px); font-weight: 800;
  line-height: .88; letter-spacing: -.055em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--k-text);
}
html[data-vorlage="kino"] .w-spieler-label {
  font-family: var(--k-mono); font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--k-dezent);
}
/* Aufnahme laeuft: Glutpunkt vor der Zahl, aber nur, wenn wirklich Namen
   da sind (ohne Liste ist die Zahl eine Momentaufnahme oder fehlt). */
html[data-vorlage="kino"] .w-spieler:has(.w-kopf-liste) .w-spieler-zahl::before {
  content: ""; flex: none; align-self: center;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--k-glut);
  box-shadow: 0 0 16px color-mix(in srgb, var(--k-glut) 90%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  html[data-vorlage="kino"] .w-spieler:has(.w-kopf-liste) .w-spieler-zahl::before { animation: kino-glimmen 3.4s ease-in-out infinite; }
}
/* Kontaktabzug: jedes Bild ein Feld mit Haarlinien und Bildnummer. */
html[data-vorlage="kino"] .w-kopf-liste {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 156px), 1fr));
  border-top: 1px solid var(--k-linie);
  border-left: 1px solid var(--k-linie);
  counter-reset: kino-bild;
}
/* `.w-kopf` heisst auch der Seitenkopf: dessen Lage, Ebene und Unschaerfe
   aus website.css (auch das Kleben bei data-kopf="fest") gelten hier nicht. */
html[data-vorlage="kino"] .w-kopf-liste > .w-kopf {
  position: relative; top: auto; z-index: auto;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-areas: "bild name" "bild zeit";
  align-items: center; align-content: center;
  gap: 2px 12px;
  min-height: 72px;
  padding: 14px 30px 14px 14px;
  background: none;
  border: 0; border-right: 1px solid var(--k-linie); border-bottom: 1px solid var(--k-linie);
  border-radius: 0;
  counter-increment: kino-bild;
}
html[data-vorlage="kino"] .w-kopf-liste > .w-kopf::after {
  content: counter(kino-bild, decimal-leading-zero);
  position: absolute; top: 9px; right: 10px;
  font-family: var(--k-mono); font-size: 10px; letter-spacing: .1em;
  color: var(--k-still);
}
html[data-vorlage="kino"] :is(.w-kopf-bild, .w-kopf-platz) { grid-area: bild; width: 40px; height: 40px; font-size: 16px; }
html[data-vorlage="kino"] .w-kopf-name { grid-area: name; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--k-text); }
html[data-vorlage="kino"] .w-kopf-zeit {
  grid-area: zeit;
  font-family: var(--k-mono); font-size: 11px; letter-spacing: .06em;
  color: var(--k-dezent);
}

/* ------------------------------------------------- Rangliste und Spielzeit */
/* Die Liste wie ein Abspann: Platz in Mono, die ersten drei als
   Hauptrollen mit grossem Namen. */
html[data-vorlage="kino"] :is(.w-rangliste, .w-spielzeit) { gap: 22px; padding: 0; }
html[data-vorlage="kino"] :is(.w-rang-liste, .w-zeit-liste) { gap: 0; border-top: 1px solid var(--k-linie); }
html[data-vorlage="kino"] :is(.w-rang, .w-zeit) {
  gap: 16px;
  padding: 12px 0; min-height: 60px;
  border-bottom: 1px solid var(--k-linie);
}
html[data-vorlage="kino"] :is(.w-rang-liste > .w-rang > .w-rang-nummer, .w-zeit-liste > .w-zeit > .w-zeit-nummer) {
  width: 2.6em; text-align: left;
  font-family: var(--k-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .12em;
  color: var(--k-glut);
}
html[data-vorlage="kino"] :is(.w-rang-bild, .w-rang-platz, .w-zeit-bild, .w-zeit-platz) { width: 36px; height: 36px; font-size: 15px; }
html[data-vorlage="kino"] :is(.w-rang-name, .w-zeit-name) {
  font-size: 16px; font-weight: 600; line-height: 1.25;
  color: var(--k-text);
}
html[data-vorlage="kino"] :is(.w-rang, .w-zeit):nth-child(-n+3) :is(.w-rang-name, .w-zeit-name) {
  font-family: var(--k-display);
  font-size: clamp(19px, 4.4vw, 24px); font-weight: 700;
  letter-spacing: -.03em;
}
html[data-vorlage="kino"] :is(.w-rang, .w-zeit):first-child :is(.w-rang-name, .w-zeit-name) {
  font-size: clamp(24px, 6.4vw, 36px); font-weight: 800;
  letter-spacing: -.045em;
}
html[data-vorlage="kino"] :is(.w-rang-level, .w-zeit-wert) {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--k-mono); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--k-dezent);
  white-space: nowrap;
}
/* Rangfarbe als kleines Leuchtfeld vor dem Level - der Text bleibt lesbar,
   egal wie dunkel die Farbe der Discord-Rolle ist. */
html[data-vorlage="kino"] .w-rang-level::before {
  content: ""; flex: none;
  width: 7px; height: 7px;
  background: var(--w-rang-farbe, var(--k-glut));
  box-shadow: 0 0 10px color-mix(in srgb, var(--w-rang-farbe, var(--k-glut)) 70%, transparent);
}
html[data-vorlage="kino"] .w-zeit-wert { color: var(--k-text); }

/* --------------------------------------------------------------------- Raenge */
/* Jeder Rang eine Spalte des Abspanns: Rangfarbe als Glutkante oben,
   Preis in Mono, Vorteile mit Glutstrich. */
html[data-vorlage="kino"] .w-rang-karten { gap: 0 40px; grid-template-columns: 1fr; }
/* Karten: jeder Rang eine Spalte (ab 600 px zwei, ab 900 px so viele,
   wie nebeneinander passen), die Laufzeit steht in allen Spalten auf einer
   Linie ganz unten. Liste: eine Zeile je Rang (Breakpoints). */
html[data-vorlage="kino"] .w-raenge-karten .w-rangkarte { display: flex; flex-direction: column; }
html[data-vorlage="kino"] .w-raenge-karten .w-rangkarte-laufzeit { margin-top: auto; padding-top: 6px; }
html[data-vorlage="kino"] .w-rangkarte {
  position: relative;
  gap: 12px;
  padding: 28px 0 32px;
  border-top: 1px solid var(--k-linie);
}
html[data-vorlage="kino"] .w-rangkarte::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 56px; height: 1px;
  background: var(--w-rang-farbe, var(--k-glut));
  box-shadow: 0 0 14px color-mix(in srgb, var(--w-rang-farbe, var(--k-glut)) 80%, transparent);
}
html[data-vorlage="kino"] .w-rangkarte-name {
  font-family: var(--k-display);
  font-size: clamp(26px, 5.4vw, 34px); font-weight: 800;
  letter-spacing: -.045em; line-height: 1;
  color: var(--k-text);
}
html[data-vorlage="kino"] .w-rangkarte-preis {
  font-family: var(--k-mono); font-size: 13px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--k-glut-hell);
}
html[data-vorlage="kino"] .w-rangkarte-text { color: var(--k-dezent); font-size: 15px; line-height: 1.6; }
html[data-vorlage="kino"] .w-rangkarte-perks { gap: 8px; margin-top: 4px; }
html[data-vorlage="kino"] .w-rangkarte-perks li { position: relative; display: block; padding-left: 22px; font-size: 15px; line-height: 1.5; color: var(--k-text); }
html[data-vorlage="kino"] .w-rangkarte-perks li::before {
  content: ""; position: absolute; left: 0; top: .75em;
  width: 8px; height: 1px;
  background: var(--k-glut);
}
html[data-vorlage="kino"] .w-rangkarte-laufzeit {
  font-family: var(--k-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--k-dezent);
}

/* ------------------------------------------------------------------- Fusszeile */
/* Abspann: hier taucht der Horizont wieder auf (eigene Ebenen, weil der
   Schleier der Seite fest liegt und kein Loch bekommen kann). */
html[data-vorlage="kino"] .w-fuss {
  position: relative;
  isolation: isolate;
  padding-block: clamp(150px, 26vw, 260px) 40px;
  border-top: 1px solid var(--k-linie);
  overflow: clip;
  background: radial-gradient(72% 34% at 50% 100%, color-mix(in srgb, var(--k-glut) 34%, transparent), transparent 70%);
}
html[data-vorlage="kino"] .w-fuss::before,
html[data-vorlage="kino"] .w-fuss::after {
  content: ""; position: absolute; left: 0; right: 0; z-index: -1;
  pointer-events: none;
  opacity: .9;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  -webkit-mask-position: left 0 bottom 0; mask-position: left 0 bottom 0;
}
html[data-vorlage="kino"] .w-fuss::before {
  bottom: 30px; height: 296px;
  background-color: var(--k-fels);
  -webkit-mask-image: url("/website/vorlagen/kino/szene-2-berge.svg"); mask-image: url("/website/vorlagen/kino/szene-2-berge.svg");
  -webkit-mask-size: 1700px 296px; mask-size: 1700px 296px;
}
html[data-vorlage="kino"] .w-fuss::after {
  bottom: -30px; height: 184px;
  background-color: var(--k-nacht);
  -webkit-mask-image: url("/website/vorlagen/kino/szene-3-wald.svg"); mask-image: url("/website/vorlagen/kino/szene-3-wald.svg");
  -webkit-mask-size: 1300px 184px; mask-size: 1300px 184px;
}
html[data-vorlage="kino"][data-opt-landschaft="0"] .w-fuss::before,
html[data-vorlage="kino"][data-opt-landschaft="0"] .w-fuss::after { display: none; }
html[data-vorlage="kino"] .w-fuss > .w-bahn { max-width: var(--k-bahn-breit); }
/* Wie im Abspann stehen die kurzen Linklisten schon auf dem Handy zu zweit
   nebeneinander; eine einzelne Spalte nimmt die ganze Breite. */
html[data-vorlage="kino"] .w-fuss-spalten { gap: 34px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-vorlage="kino"] .w-fuss-spalte:only-child { grid-column: 1 / -1; }
html[data-vorlage="kino"] .w-fuss-titel {
  margin: 0 0 14px;
  font-family: var(--k-marke); font-size: 10px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--k-dezent);
}
html[data-vorlage="kino"] .w-fuss-liste { gap: 10px; }
html[data-vorlage="kino"] .w-fuss-link { color: var(--k-dezent); font-size: 15px; }
html[data-vorlage="kino"] .w-fuss-link:hover { color: var(--k-text); text-decoration: none; }
html[data-vorlage="kino"] .w-sozial { gap: 10px; margin-top: 36px; }
html[data-vorlage="kino"] .w-sozial-link {
  min-height: 40px; padding: 10px 18px;
  border: 1px solid var(--k-linie); border-radius: 0;
  color: var(--k-dezent);
  background: color-mix(in srgb, var(--k-tief) 40%, transparent);
  font-family: var(--k-marke); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  transition: color .25s ease, border-color .25s ease;
}
html[data-vorlage="kino"] .w-sozial-link:hover { color: var(--k-text); border-color: var(--k-linie-stark); }
/* Sperrung hinter dem letzten Buchstaben ausgleichen (Text sitzt mittig). */
html[data-vorlage="kino"] .w-sozial-text { margin-right: -.16em; }
/* Kanaele wie im Abspann mit kleinem Zeichen davor: Discord ist der
   Treffpunkt der Community und traegt den Glutpunkt der Marke; die
   Videokanaele ein Abspiel-Dreieck; Bild- und Textkanaele einen leeren
   Rahmen. Beim Darueberfahren gluehen die Zeichen. */
html[data-vorlage="kino"] :is(.w-sozial-discord, .w-sozial-youtube, .w-sozial-twitch, .w-sozial-tiktok, .w-sozial-instagram, .w-sozial-x) { gap: 10px; }
html[data-vorlage="kino"] :is(.w-sozial-discord, .w-sozial-youtube, .w-sozial-twitch, .w-sozial-tiktok, .w-sozial-instagram, .w-sozial-x)::before {
  content: ""; flex: none;
  width: 6px; height: 6px;
  transition: background-color .25s ease, border-color .25s ease;
}
html[data-vorlage="kino"] .w-sozial-discord { color: var(--k-text); }
html[data-vorlage="kino"] .w-sozial-discord::before {
  background: var(--k-glut);
  box-shadow: 0 0 10px color-mix(in srgb, var(--k-glut) 80%, transparent);
}
html[data-vorlage="kino"] :is(.w-sozial-youtube, .w-sozial-twitch, .w-sozial-tiktok)::before {
  width: 6px; height: 8px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
html[data-vorlage="kino"] :is(.w-sozial-instagram, .w-sozial-x)::before {
  border: 1px solid currentColor;
}
html[data-vorlage="kino"] :is(.w-sozial-youtube, .w-sozial-twitch, .w-sozial-tiktok):hover::before { background: var(--k-glut); }
html[data-vorlage="kino"] :is(.w-sozial-instagram, .w-sozial-x):hover::before { border-color: var(--k-glut); }
html[data-vorlage="kino"] .w-fuss-text {
  margin: 44px 0 0; padding-top: 22px;
  border-top: 1px solid var(--k-linie);
  font-family: var(--k-fuss); font-size: 11px; line-height: 1.8;
  letter-spacing: .04em;
  color: var(--k-dezent);
  max-width: 54ch;
}

/* ============================================================================
   KONTEN (Etappe 3) - die Abspann-Karte
     Kopf       „Anmelden“ in Mono-Kapitaelchen wie das Menue; angemeldet
                ein kleines Standbild und der Name, das Menue wie das Handy-Menue
     Anmelden   zwei Zeilen wie im Abspann: Glutpunkt bzw. Rahmen, grosser
                Titel, Mono-Unterzeile, Haarlinien statt Kaesten
     Code       eine Titelkarte: riesige Ziffern mit Glutlinie, die Anweisung
                als Stimme des Trailers
     Profil     der Ausweis ist eine Abspann-Karte - Rolle in Glut, Name
                gross, Werte als Zeilen mit Funktion rechts und Wert links der
                Achse; die Teile trennen Haarlinien
   ========================================================================== */

/* ---- Kopf ---- */
html[data-vorlage="kino"] .w-kontoplatz { margin-left: 4px; }
html[data-vorlage="kino"] .w-kontomenue-name { max-width: 16ch; }
html[data-vorlage="kino"] .w-kontoplatz-anmelden {
  gap: 10px;
  min-height: 42px; padding: 10px 2px 10px 12px;
  border: 0; border-radius: 0; background: none;
  font-family: var(--k-marke); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--k-text);
  transition: color .3s ease;
}
html[data-vorlage="kino"] .w-kontoplatz-anmelden::before {
  content: ""; flex: none; width: 6px; height: 6px;
  background: var(--k-glut);
  box-shadow: 0 0 10px color-mix(in srgb, var(--k-glut) 80%, transparent);
}
html[data-vorlage="kino"] .w-kontoplatz-anmelden:hover { color: var(--k-glut-hell); border-color: transparent; }
html[data-vorlage="kino"] .w-kontomenue-knopf {
  gap: 10px;
  min-height: 42px; padding: 6px 2px 6px 8px;
  border: 0; border-radius: 0; background: none;
  font-family: var(--k-marke); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--k-dezent);
  transition: color .3s ease;
}
html[data-vorlage="kino"] :is(.w-kontomenue-knopf:hover, .w-kontomenue[open] .w-kontomenue-knopf) { color: var(--k-text); }
html[data-vorlage="kino"] :is(.w-kontomenue-bild, .w-kontomenue-platz) {
  width: 26px; height: 26px;
  border: 1px solid var(--k-linie); border-radius: 0;
  background: color-mix(in srgb, var(--k-fels) 70%, var(--k-glut) 8%);
  color: var(--k-glut-hell);
  font-family: var(--k-mono); font-size: 12px; font-weight: 600;
  filter: grayscale(.35) contrast(1.05);
}
html[data-vorlage="kino"] .w-kontomenue[open] :is(.w-kontomenue-bild, .w-kontomenue-platz) { filter: none; border-color: var(--k-glut-tief); }
html[data-vorlage="kino"] .w-kontomenue-liste {
  top: calc(100% + 10px);
  min-width: 220px;
  padding: 10px 6px; gap: 0;
  background: color-mix(in srgb, var(--w-bg-tief) 97%, transparent);
  border: 1px solid var(--k-linie); border-radius: 0;
  box-shadow: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
html[data-vorlage="kino"] .w-kontomenue-link {
  padding: 12px 14px; border-radius: 0;
  font-family: var(--k-marke); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--k-text);
}
html[data-vorlage="kino"] .w-kontomenue-link:hover { background: none; color: var(--k-glut-hell); }

/* ---- Rahmen, Meldungen ---- */
html[data-vorlage="kino"] :is(.w-konto, .w-profil) { gap: 22px; }
/* Konto-Seiten und der Konto-Block stehen etwas enger als eine Einstellung. */
html[data-vorlage="kino"] :is(.w-typ-konto, .w-typ-profil) { --k-dichte: .8; }
html[data-vorlage="kino"] :is(.w-konto-anmelden, .w-konto-codeseite) { max-width: 40rem; }
html[data-vorlage="kino"] :is(.w-konto-codeknoepfe, .w-profil-knoepfe) { gap: 14px; }
html[data-vorlage="kino"] .w-konto-bestaetigen { gap: 14px; }
html[data-vorlage="kino"] .w-konto-mcname { font-family: var(--k-mono); color: var(--k-text); }
html[data-vorlage="kino"] .w-konto-warnung { color: var(--k-dezent); }
html[data-vorlage="kino"] .w-konto-status:is([data-art="stoerung"], [data-art="bestaetigen"], [data-art="rueckfrage"]) { color: var(--k-glut); }
html[data-vorlage="kino"] .w-konto-befehl[data-aktiv="ja"] code { background: color-mix(in srgb, var(--k-glut) 26%, transparent); color: var(--k-text); }
html[data-vorlage="kino"] .w-konto-neuerweg {
  padding: 6px 0 6px 20px;
  border: 0; border-left: 1px solid var(--k-glut); border-radius: 0;
  background: none;
  font-family: var(--k-stimme); font-style: italic; font-size: 18px; line-height: 1.5;
  color: var(--k-glut-hell);
}
html[data-vorlage="kino"] .w-konto-verlauf ul { font-family: var(--k-mono); font-size: 11px; line-height: 1.8; letter-spacing: .04em; color: var(--k-dezent); }
html[data-vorlage="kino"] .w-konto-verlauf time { color: var(--k-text); }
html[data-vorlage="kino"] .w-profil-gast { gap: 20px; }
html[data-vorlage="kino"] .w-profil-text { min-width: 0; }
html[data-vorlage="kino"] :is(.w-konto-hinweis, .w-konto-erklaerung) { font-size: 1.0625rem; color: var(--k-dezent); }
html[data-vorlage="kino"] .w-konto-klein { font-family: var(--k-mono); font-size: 11px; line-height: 1.8; letter-spacing: .04em; color: var(--k-dezent); }
html[data-vorlage="kino"] .w-konto-klein a { color: var(--k-text); text-decoration-color: var(--k-glut); }
html[data-vorlage="kino"] :is(.w-konto-fehler, .w-konto-erfolg) {
  padding: 6px 0 6px 20px;
  border: 0; border-left: 1px solid var(--w-fehler); border-radius: 0;
  background: none;
  font-family: var(--k-stimme); font-style: italic; font-size: 18px; line-height: 1.5;
  color: var(--w-fehler);
}
html[data-vorlage="kino"] .w-konto-erfolg { border-left-color: var(--w-ok); color: var(--w-ok); }
html[data-vorlage="kino"] .w-konto-status {
  font-family: var(--k-mono); font-size: 11px; line-height: 1.8;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--k-dezent);
}
html[data-vorlage="kino"] .w-konto-status[data-art="ok"] { color: var(--w-ok); }
html[data-vorlage="kino"] .w-konto-status:is([data-art="fehler"], [data-art="abgelaufen"]) { color: var(--w-fehler); }

/* ---- Anmelden: zwei Zeilen im Abspann ---- */
html[data-vorlage="kino"] .w-konto-wege { gap: 0; grid-template-columns: 1fr; border-top: 1px solid var(--k-linie); }
html[data-vorlage="kino"] .w-konto-weg-karte {
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 6px 16px;
  min-height: 0;
  padding: 24px 0;
  background: none;
  border: 0; border-bottom: 1px solid var(--k-linie); border-radius: 0;
  box-shadow: none;
  color: var(--k-text);
  transition: color .3s ease;
}
html[data-vorlage="kino"] .w-konto-weg-karte:hover { transform: none; border-color: var(--k-linie); }
html[data-vorlage="kino"] .w-konto-weg-karte:hover .w-konto-weg-titel { color: var(--k-glut-hell); }
html[data-vorlage="kino"] .w-konto-weg-titel {
  font-family: var(--k-display); font-size: clamp(24px, 5.6vw, 34px); font-weight: 700;
  letter-spacing: -.035em; line-height: 1.08;
  color: var(--k-text);
  transition: color .3s ease;
}
html[data-vorlage="kino"] .w-konto-weg-text {
  font-family: var(--k-mono); font-size: 11px; font-weight: 500; line-height: 1.8;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--k-dezent);
}
html[data-vorlage="kino"] .w-konto-weg-zeichen {
  align-self: center;
  width: 7px; height: 7px;
  border-radius: 0;
  background: var(--k-glut);
  box-shadow: 0 0 12px color-mix(in srgb, var(--k-glut) 90%, transparent);
}
html[data-vorlage="kino"] .w-konto-minecraft .w-konto-weg-zeichen { border-radius: 0; background: none; border: 1px solid var(--k-text); box-shadow: none; }
html[data-vorlage="kino"] .w-konto-discord .w-konto-weg-zeichen { border-radius: 0; }

/* ---- Code: die Titelkarte ---- */
html[data-vorlage="kino"] .w-konto-codeansicht { gap: 20px; padding-top: 8px; }
html[data-vorlage="kino"] .w-konto-code { gap: clamp(4px, 1.6vw, 12px); }
html[data-vorlage="kino"] .w-konto-ziffer {
  width: auto; min-width: .62em; height: auto;
  padding: 0 0 8px;
  border: 0; border-bottom: 1px solid var(--k-glut-tief); border-radius: 0;
  background: none;
  font-family: var(--k-display); font-weight: 700;
  font-size: clamp(50px, 15.5vw, 108px); line-height: 1; letter-spacing: -.04em;
  color: var(--k-text);
  text-shadow: 0 0 40px color-mix(in srgb, var(--k-glut) 28%, transparent);
}
html[data-vorlage="kino"] .w-konto-codeansicht:is([data-zustand="abgelaufen"], [data-zustand="fehler"]) .w-konto-ziffer { opacity: 1; color: var(--k-still); text-shadow: none; border-bottom-color: var(--k-linie); }
html[data-vorlage="kino"] .w-konto-befehl-text { font-family: var(--k-stimme); font-style: italic; font-size: clamp(18px, 3.4vw, 22px); color: var(--k-text); }
html[data-vorlage="kino"] .w-konto-befehl code {
  padding: 4px 10px; border-radius: 0;
  background: color-mix(in srgb, var(--k-glut) 9%, transparent);
  font-family: var(--k-mono); font-size: 15px;
  color: var(--k-glut-hell);
}
html[data-vorlage="kino"] .w-konto-uhr { font-family: var(--k-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--k-dezent); }
html[data-vorlage="kino"] .w-konto-rest { font-weight: 600; color: var(--k-glut-hell); }
html[data-vorlage="kino"] .w-konto-rest[data-knapp="ja"] { color: var(--w-fehler); }
html[data-vorlage="kino"] .w-konto-bis { color: var(--k-dezent); }
html[data-vorlage="kino"] .w-konto-codeansicht .w-konto-status[data-art="warten"]::before {
  width: 7px; height: 7px; border-radius: 0;
  background: var(--k-glut);
  box-shadow: 0 0 14px color-mix(in srgb, var(--k-glut) 95%, transparent);
  animation: none;
}

/* ---- Profil: die Abspann-Karte ---- */
html[data-vorlage="kino"] .w-konto-profil { grid-template-columns: minmax(0, 1fr); gap: 34px; }
html[data-vorlage="kino"] .w-konto-ausweis {
  justify-items: center;
  gap: 26px;
  padding: clamp(40px, 8vw, 72px) 0;
  background: none;
  border: 0; border-block: 1px solid var(--k-linie); border-radius: 0;
  box-shadow: none;
  text-align: center;
}
html[data-vorlage="kino"] .w-konto-kopf { flex-direction: column; gap: 22px; }
html[data-vorlage="kino"] .w-konto-kopf-text { display: flex; flex-direction: column; align-items: center; }
html[data-vorlage="kino"] :is(.w-konto-bild, .w-konto-bild-platz) {
  width: 88px; height: 88px;
  border: 1px solid var(--k-linie); border-radius: 0;
  background: color-mix(in srgb, var(--k-fels) 70%, var(--k-glut) 8%);
  color: var(--k-glut-hell);
  font-family: var(--k-mono); font-weight: 600;
  filter: grayscale(.35) contrast(1.05);
}
html[data-vorlage="kino"] .w-konto-rolle {
  margin: 0 0 12px;
  font-family: var(--k-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .26em;
  color: var(--k-glut);
}
html[data-vorlage="kino"] .w-konto-name {
  font-family: var(--k-display); font-size: clamp(30px, 9vw, 68px); font-weight: 700;
  line-height: 1; letter-spacing: -.045em;
  color: var(--k-text);
}
html[data-vorlage="kino"] .w-konto-seit { margin-top: 14px; font-family: var(--k-stimme); font-style: italic; font-size: 18px; color: var(--k-dezent); }
/* Werte wie Abspann-Zeilen: die Funktion rechts, der Wert links der Mittelachse. */
html[data-vorlage="kino"] .w-konto-werte { width: 100%; max-width: 36rem; grid-template-columns: minmax(0, 1fr); gap: 12px; }
html[data-vorlage="kino"] .w-konto-wert {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; gap: 26px;
  padding: 0;
  border: 0; border-radius: 0;
}
html[data-vorlage="kino"] .w-konto-wert-raenge { grid-column: auto; }
html[data-vorlage="kino"] .w-konto-wert dt {
  text-align: right;
  font-family: var(--k-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .2em;
  color: var(--k-dezent);
}
html[data-vorlage="kino"] .w-konto-wert dd {
  margin: 0; text-align: left;
  font-family: var(--k-display); font-size: 20px; font-weight: 700; letter-spacing: -.02em;
  color: var(--k-text);
}
html[data-vorlage="kino"] .w-konto-wert-raenge dd { color: var(--k-glut-hell); }
html[data-vorlage="kino"] .w-konto-ausweis .w-konto-werte-leer { max-width: 40ch; font-family: var(--k-stimme); font-style: italic; font-size: 17px; color: var(--k-dezent); }

/* ---- Profil: Teile hinter Haarlinien ---- */
html[data-vorlage="kino"] .w-konto-teil {
  gap: 18px;
  padding: 28px 0 0;
  background: none;
  border: 0; border-top: 1px solid var(--k-linie); border-radius: 0;
  box-shadow: none;
}
html[data-vorlage="kino"] .w-konto-titel {
  font-family: var(--k-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--k-glut);
}
html[data-vorlage="kino"] .w-konto-gefahrzone { border-top-color: var(--k-glut-tief); }
html[data-vorlage="kino"] .w-konto-gefahrzone .w-konto-titel { color: var(--w-fehler); }
/* Seite /einspruch: die Linie oben der Karten des Banns und der Entscheidung traegt die Farbe (die allgemeine Regel setzt eine Haarlinie und gewaenne sonst). */
html[data-vorlage="kino"] .w-konto-teil.w-einspruch-bann { border-top-color: var(--w-fehler); }
html[data-vorlage="kino"] .w-konto-teil.w-einspruch-entscheidung[data-art="angenommen"] { border-top-color: var(--w-ok); }
html[data-vorlage="kino"] .w-konto-teil.w-einspruch-entscheidung[data-art="abgelehnt"] { border-top-color: var(--w-fehler); }
html[data-vorlage="kino"] .w-konto-wege-liste { gap: 0; border-top: 1px solid var(--k-linie); }
html[data-vorlage="kino"] .w-konto-weg {
  gap: 8px 16px;
  padding: 16px 0;
  border: 0; border-bottom: 1px solid var(--k-linie); border-radius: 0;
}
html[data-vorlage="kino"] .w-konto-weg .w-konto-weg-zeichen { width: 7px; height: 7px; }
html[data-vorlage="kino"] .w-konto-weg-aus .w-konto-weg-zeichen { background: none; border: 1px solid var(--k-still); box-shadow: none; }
html[data-vorlage="kino"] .w-konto-weg-name { min-width: 120px; font-family: var(--k-display); font-size: 21px; font-weight: 700; letter-spacing: -.03em; color: var(--k-text); }
html[data-vorlage="kino"] .w-konto-weg-wert { font-family: var(--k-mono); font-size: 12px; letter-spacing: .08em; color: var(--k-dezent); }
html[data-vorlage="kino"] .w-konto-weg-an .w-konto-weg-wert { color: var(--w-ok); }
html[data-vorlage="kino"] .w-konto-weg-aus .w-konto-weg-wert { font-style: normal; }
/* Name einzeilig (website.css kuerzt mit Auslassungspunkten), die Plattform als Untertitel darunter. */
html[data-vorlage="kino"] .w-konto-weg-konto { line-height: 1.4; }
html[data-vorlage="kino"] .w-konto-weg-plattform { margin-top: 4px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--k-dezent); }
html[data-vorlage="kino"] .w-konto-weg-hinweis { font-family: var(--k-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--k-dezent); }
html[data-vorlage="kino"] .w-konto-weg .w-knopf { min-height: 38px; padding: 9px 16px; font-size: 11px; }
html[data-vorlage="kino"] .w-knopf[data-sicher="ja"] { color: var(--k-auf-glut); background: var(--k-glut); border-color: var(--k-glut); }
html[data-vorlage="kino"] .w-konto-form { gap: 18px; }
html[data-vorlage="kino"] .w-konto-feld {
  gap: 8px;
  font-family: var(--k-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--k-dezent);
}
/* Eingaben ohne Kasten: eine Linie wie unter einem Titel. */
html[data-vorlage="kino"] .w-konto-feld :is(input, textarea) {
  min-height: 48px; padding: 10px 0;
  border: 0; border-bottom: 1px solid var(--k-linie-stark); border-radius: 0;
  background: none;
  font-family: var(--k-sans); font-size: 19px; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--k-text);
}
html[data-vorlage="kino"] .w-konto-feld :is(input, textarea):focus-visible { outline: 0; border-bottom-color: var(--k-glut); box-shadow: 0 1px 0 var(--k-glut); }
/* Das mehrzeilige Feld behaelt seine Hoehe (die Regel fuer Felder setzt eine Mindesthoehe von einer Zeile). */
html[data-vorlage="kino"] .w-konto-feld textarea { min-height: 7.5em; resize: vertical; line-height: 1.5; }
html[data-vorlage="kino"] .w-konto-loeschen .w-konto-feld input { border-bottom-color: var(--k-glut-tief); }

/* ---- Abschnitt `profil` ---- */
html[data-vorlage="kino"] .w-profil-mitglied {
  gap: 16px 22px;
  padding: 26px 0;
  background: none;
  border: 0; border-block: 1px solid var(--k-linie); border-radius: 0;
  box-shadow: none;
}
html[data-vorlage="kino"] :is(.w-profil-bild, .w-profil-platz) {
  width: 64px; height: 64px;
  border: 1px solid var(--k-linie); border-radius: 0;
  background: color-mix(in srgb, var(--k-fels) 70%, var(--k-glut) 8%);
  color: var(--k-glut-hell);
  font-family: var(--k-mono); font-weight: 600;
  filter: grayscale(.35) contrast(1.05);
}
html[data-vorlage="kino"] .w-profil-gruss { font-family: var(--k-mono); font-size: 11px; font-weight: 500; letter-spacing: .2em; color: var(--k-glut); }
html[data-vorlage="kino"] .w-profil-name { margin-top: 6px; font-family: var(--k-display); font-size: clamp(26px, 5.4vw, 34px); letter-spacing: -.035em; line-height: 1.05; color: var(--k-text); }

@media (prefers-reduced-motion: no-preference) {
  html[data-vorlage="kino"] .w-konto-codeansicht .w-konto-status[data-art="warten"]::before { animation: kino-glimmen 3.4s ease-in-out infinite; }
}

/* ---------------------------------------------------------------- Breakpoints */
@media (min-width: 600px) {
  html[data-vorlage="kino"] { --k-gasse: 32px; --k-luft: 112px; --k-luft-weit: 160px; }
  html[data-vorlage="kino"] .w-marke-text { letter-spacing: inherit; }
  html[data-vorlage="kino"] .w-kacheln { grid-template-columns: repeat(2, 1fr); column-gap: 40px; }
  html[data-vorlage="kino"] .w-schritt { grid-template-columns: 90px 1fr; gap: 0 24px; }
  html[data-vorlage="kino"] .w-schritt-nummer { padding-top: 10px; }
  html[data-vorlage="kino"] .w-team-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  html[data-vorlage="kino"] .w-raenge-karten .w-rang-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  html[data-vorlage="kino"] {
    --k-gasse: 44px;
    --k-kopf: 64px;
    --k-luft-eng: 64px;
    --k-luft: 144px;
    --k-luft-weit: 208px;
    --k-b1: 2000px; --k-h1: 350px; --k-d1: 667s;
    --k-b2: 2400px; --k-h2: 520px; --k-d2: 533s; --k-x2: -430px;
    --k-b3: 1800px; --k-h3: 255px; --k-d3: 300s; --k-x3: -120px;
    --k-b4: 1400px; --k-h4: 117px; --k-d4: 175s;
  }
  html[data-vorlage="kino"] body.w-seite { font-size: 17px; }
  html[data-vorlage="kino"] .w-kopf-bahn { padding-block: 10px; }
  html[data-vorlage="kino"] .w-nav { display: flex; }
  html[data-vorlage="kino"] .w-menue { display: none; }
  html[data-vorlage="kino"] .w-fuss-spalten { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 44px; }
  /* Zahlen: so viele Spalten, wie nebeneinander passen (die Handy-Regel
     fuer drei und mehr Kacheln hat dieselbe Spezifitaet und wird hier
     mit abgeloest); genau vier: zwei mal zwei, erst ab 1180 px eine Reihe. */
  html[data-vorlage="kino"] .w-kacheln,
  html[data-vorlage="kino"] .w-kacheln:has(.w-kachel:nth-child(3)) { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); column-gap: 48px; }
  html[data-vorlage="kino"] .w-kacheln:has(> .w-kachel:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Drei Spalten sind je gut 200 px breit: Ziffern so gross, dass auch
     "99,8 %" ohne Umbruch hineinpasst. */
  html[data-vorlage="kino"] .w-kacheln:has(.w-kachel:nth-child(3)) .w-kachel-wert { font-size: clamp(40px, 5vw, 64px); }
  html[data-vorlage="kino"] .w-spalten-2 .w-fliess { column-gap: 56px; }
  /* Text mit Bild: gemeint ist immer die Breite der BILD-Spalte (die Figur
     steht bei "links" per order vorn, siehe website.css). Ohne Bild bleibt
     eine Spalte. */
  html[data-vorlage="kino"] .w-textbild.w-bild-mittel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  html[data-vorlage="kino"] .w-textbild.w-bild-rechts.w-bild-klein { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
  html[data-vorlage="kino"] .w-textbild.w-bild-rechts.w-bild-gross { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); }
  html[data-vorlage="kino"] .w-textbild.w-bild-links.w-bild-klein { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); }
  html[data-vorlage="kino"] .w-textbild.w-bild-links.w-bild-gross { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
  html[data-vorlage="kino"] .w-textbild.w-textbild-ohne-bild:is(.w-bild-links, .w-bild-rechts) { grid-template-columns: minmax(0, 1fr); }
  /* Der Serverstatus steht als zweispaltige Tafel ruhiger. */
  html[data-vorlage="kino"] .w-status { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 0 56px; align-items: start; }
  html[data-vorlage="kino"] :is(.w-status .w-abschnitt-titel, .w-status-zustand) { grid-column: 1; }
  html[data-vorlage="kino"] .w-status-daten { grid-column: 2; grid-row: 1 / span 2; }
  html[data-vorlage="kino"] .w-status-zustand { margin-top: 20px; }
  html[data-vorlage="kino"] .w-status-hinweis { grid-column: 2; grid-row: 3; margin-top: 14px; }
  /* Spieler online: Zahl links, Kontaktabzug rechts; die Zahl wird in der
     schmalen Spalte kleiner und bricht ausgewogen um. */
  html[data-vorlage="kino"] .w-spieler:has(.w-kopf-liste) { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 22px 56px; align-items: start; }
  html[data-vorlage="kino"] .w-spieler:has(.w-kopf-liste) > :not(.w-kopf-liste) { grid-column: 1; }
  html[data-vorlage="kino"] .w-spieler:has(.w-kopf-liste) > .w-kopf-liste { grid-column: 2; grid-row: 1 / span 3; }
  html[data-vorlage="kino"] .w-spieler:has(.w-kopf-liste) .w-spieler-zahl { flex-direction: column; align-items: flex-start; gap: 14px; }
  html[data-vorlage="kino"] .w-spieler:has(.w-kopf-liste) .w-spieler-zahl::before { align-self: flex-start; }
  html[data-vorlage="kino"] .w-spieler:has(.w-kopf-liste) .w-spieler-wert { font-size: clamp(44px, 5.4vw, 72px); text-wrap: balance; }
  html[data-vorlage="kino"] .w-team-liste { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); column-gap: 56px; }
  html[data-vorlage="kino"] .w-raenge-karten .w-rang-karten { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  /* Raenge als Liste: links Name, Preis, Laufzeit - rechts Text und Vorteile. */
  html[data-vorlage="kino"] .w-raenge-liste .w-rangkarte {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    grid-auto-flow: dense;
    gap: 10px 48px;
  }
  html[data-vorlage="kino"] .w-raenge-liste :is(.w-rangkarte-name, .w-rangkarte-preis, .w-rangkarte-laufzeit) { grid-column: 1; }
  html[data-vorlage="kino"] .w-raenge-liste :is(.w-rangkarte-text, .w-rangkarte-perks) { grid-column: 2; }
  html[data-vorlage="kino"] .w-raenge-liste .w-rangkarte-text { grid-row: 1; }
  html[data-vorlage="kino"] .w-raenge-liste .w-rangkarte-perks { grid-row: 2 / span 3; margin-top: 0; }
}

@media (min-width: 1180px) {
  html[data-vorlage="kino"] .w-breite-breit .w-kacheln:has(> .w-kachel:nth-child(4):last-child),
  html[data-vorlage="kino"] .w-breite-voll .w-kacheln:has(> .w-kachel:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html[data-vorlage="kino"] .w-abschnitt:not(.w-typ-held, .w-typ-trenner, .w-typ-abstand, .w-typ-knoepfe, :has(> .w-bahn > .w-spaeter))::before {
    display: block;
    left: max(10px, calc(50% - var(--k-breite) / 2 - 68px));
  }
}

/* -------------------------------------------------------------- Weniger Bewegung */
/* Ohne Bewegung steht die Szene still, Schleier und Glut stehen auf festen,
   lesbaren Werten - das Bild bleibt, nur nichts bewegt sich. */
@media (prefers-reduced-motion: reduce) {
  html[data-vorlage="kino"] { --k-schleier-ruhe: calc(.62 + var(--w-opt-schleier, .5) * .36); }
  html[data-vorlage="kino"] .w-szene > span,
  html[data-vorlage="kino"] .w-szene::before,
  html[data-vorlage="kino"] .w-szene::after,
  html[data-vorlage="kino"] .w-held-inhalt > *,
  html[data-vorlage="kino"] .w-abschnitt > .w-bahn,
  html[data-vorlage="kino"] :is(.w-abschnitt-titel, .w-spieler-zahl, .w-leer-hinweis, .w-regel, .w-frage, .w-schritt, .w-person, .w-kopf-liste > .w-kopf, .w-rang, .w-zeit, .w-rangkarte),
  html[data-vorlage="kino"] .w-punkt,
  html[data-vorlage="kino"] .w-spieler-zahl::before { animation: none; transform: none; translate: none; }
  html[data-vorlage="kino"] .w-szene::before { opacity: calc(var(--k-glut-ruhe) * var(--k-glut-faktor)); }
  html[data-vorlage="kino"] .w-szene::after { opacity: var(--k-schleier-ruhe); }
  html[data-vorlage="kino"] header.w-kopf {
    animation: none;
    background-color: color-mix(in srgb, var(--w-bg-tief) 80%, transparent);
    border-bottom-color: var(--k-linie);
  }
  html[data-vorlage="kino"] :is(.w-person-bild, .w-person-platz) { transition: none; }
}

/* ----------------------------------------------------------------------- Druck */
/* Fuer Impressum und Datenschutz: nur Text, schwarz auf weiss. */
@media print {
  html[data-vorlage="kino"] .w-szene,
  html[data-vorlage="kino"] .w-held-deko,
  html[data-vorlage="kino"] .w-fuss::before,
  html[data-vorlage="kino"] .w-fuss::after,
  html[data-vorlage="kino"] .w-abschnitt::after,
  html[data-vorlage="kino"] .w-held-inhalt::before,
  html[data-vorlage="kino"] .w-sozial-discord::before,
  html[data-vorlage="kino"] .w-video-link::after,
  html[data-vorlage="kino"] .w-marke::before { display: none !important; }
  html[data-vorlage="kino"] .w-main > .w-typ-held:first-child { margin-top: 0 !important; }
  html[data-vorlage="kino"] .w-typ-held { min-height: 0 !important; }
  html[data-vorlage="kino"] .w-bahn,
  html[data-vorlage="kino"] :is(.w-abschnitt-titel, .w-spieler-zahl, .w-leer-hinweis, .w-regel, .w-frage, .w-schritt, .w-person, .w-kopf-liste > .w-kopf, .w-rang, .w-zeit, .w-rangkarte) { animation: none !important; opacity: 1 !important; transform: none !important; }
  html[data-vorlage="kino"] .w-hg-karte > .w-bahn { border-left: 2px solid #999; padding-left: 12pt; background: none !important; }
  html[data-vorlage="kino"] :is(.w-held-titel, .w-schritt-titel, .w-person-name, .w-rangkarte-name, .w-rang-name, .w-zeit-name, .w-spieler-wert, .w-held-unter, .w-kachel-label, .w-person-text, .w-rangkarte-text, .w-fliess li, .w-fliess p) { color: #000 !important; }
  html[data-vorlage="kino"] :is(.w-fliess code, .w-status-feld code) { color: #000 !important; background: none !important; }
  html[data-vorlage="kino"] .w-schritt-nummer::before { color: #000 !important; }
  html[data-vorlage="kino"] :is(.w-kachel, .w-schritt, .w-regel, .w-frage, .w-status-feld, .w-person, .w-rang, .w-zeit, .w-rangkarte) { border-color: #999 !important; }
  html[data-vorlage="kino"] .w-fuss { padding-block: 12pt !important; background: none !important; }
}