/* Zenitra Web, Tatort-Bausteine (08.11.2026, Die Unbekannte). Zum Thema "nacht": Schriften --schmal und --maschine von dort.
   Scroll-Szenen ohne Bibliothek: tatort.js setzt je Szene --p (0 bis 1) und die Klasse .tz-an auf <html>.
   Ohne .tz-an (kein Skript, weniger Bewegung) steht alles im Endzustand. */

:root {
  --tz-band: #f2c400; --tz-band-tinte: #0b0a08; --tz-papier: #e9e1cf; --tz-papier-tinte: #24201b;
  --tz-kraft: #c9a86a; --tz-kraft-tief: #b08e52; --tz-innen: #d9cba8; --tz-blau: rgba(43, 92, 255, .38);
  --tz-blut: var(--akzent, #be0a14); --tz-blut-tief: var(--signal, #7a0009);
}
.tz h2, .tz h3, .tz-titel, .tz-licht-text p, .tz-tafel, .tz-stempel, .tz-band, .tz-knopf, .tz-deckel strong, .tz-vertraulich {
  font-family: var(--schmal); text-transform: uppercase; font-weight: 700;
}
.tz strong { color: var(--tz-blut); font-weight: inherit; }

/* Körnung über der ganzen Seite, sobald ein Tatort da ist */
.tz-korn { position: fixed; inset: -50%; pointer-events: none; z-index: 60; opacity: .08;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: tz-korn 1.2s steps(6) infinite; }
@keyframes tz-korn { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 2%); } 100% { transform: translate(0, 0); } }

/* Bühnen: der Abschnitt ist hoch, die Bühne klebt oben, --p läuft beim Durchscrollen von 0 bis 1 */
.tz-tatort, .tz-spuren { position: relative; background: #000; color: var(--buehne-text, #e8e8e4); --p: 1; }
.tz-an .tz-tatort { height: 230vh; --p: 0; }
.tz-an .tz-spuren { height: 250vh; --p: 0; }
.tz-buehne { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; display: grid; place-items: center; }
.tz-an .tz-buehne { position: sticky; top: 0; }

/* 1 tatort */
.tz-motiv { position: absolute; inset: -6%; width: 112%; height: 112%; max-width: none; object-fit: cover; object-position: 62% 40%;
  opacity: .75; filter: saturate(1.1) contrast(1.05); transform-origin: 62% 46%; }
.tz-an .tz-motiv { opacity: calc(.75 - var(--p) * .4); transform: scale(calc(1 + var(--p) * .35)); }
.tz-regen { position: absolute; inset: 0; width: 100%; height: 100%; }
.tz-vignette { position: absolute; inset: 0; background: radial-gradient(75% 65% at 55% 45%, transparent 30%, rgba(7, 6, 10, .85) 75%, var(--bg, #07060a) 100%); }
.tz-blau { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(60% 40% at 0% 0%, var(--tz-blau), transparent 70%), radial-gradient(60% 40% at 100% 0%, rgba(190, 10, 20, .32), transparent 70%); }
.tz-an .tz-tatort.tz-blaulicht .tz-blau { animation: tz-blau 1.1s steps(1) infinite; }
@keyframes tz-blau { 0% { opacity: .9; } 18% { opacity: .1; } 30% { opacity: .75; } 52% { opacity: .05; } 100% { opacity: .05; } }

.tz-titelblock { position: relative; z-index: 5; text-align: center; padding: 0 var(--rand, 18px); max-width: 100%; }
.tz-an .tz-titelblock { opacity: clamp(0, 1 - (var(--p) - .15) * 2.2, 1); transform: scale(clamp(.82, 1 - (var(--p) - .15) * .4, 1)); }
.tz-augenbraue { font-family: var(--maschine); font-size: clamp(13px, 1.6vw, 16px); letter-spacing: .12em; text-transform: uppercase; color: var(--buehne-leise, #d6d6d2); margin: 0; }
.tz-titel { font-size: clamp(64px, 13vw, 190px); line-height: .86; letter-spacing: .04em; margin: .12em 0 .1em; color: var(--buehne-text, #ecebe7);
  text-shadow: 0 0 1px rgba(0, 0, 0, .6), 3px 3px 0 var(--tz-blut-tief); }
.tz-titel-wortmarke { margin: .35em auto .3em; width: min(880px, 88vw); }
.tz-titel-wortmarke svg { width: 100%; height: auto; fill: var(--buehne-text, #ecebe7); filter: drop-shadow(4px 4px 0 var(--tz-blut-tief)); }
.tz-slogan { font-family: var(--maschine); font-size: clamp(17px, 2.4vw, 26px); margin: 0; }
.tz-slogan strong { background: var(--tz-blut); color: #fff; padding: 0 .25em; }
.tz-wege { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.tz-wege .tz-knopf { border-color: var(--buehne-text, #ecebe7); color: var(--buehne-text, #ecebe7); }

.tz-band { position: absolute; left: -20vw; width: 140vw; height: clamp(44px, 6vw, 64px); z-index: 8; display: flex; align-items: center; overflow: hidden; white-space: nowrap;
  background: repeating-linear-gradient(-45deg, var(--tz-band) 0 34px, #e0b400 34px 36px, var(--tz-band) 36px 70px); color: var(--tz-band-tinte);
  font-size: clamp(18px, 2.6vw, 30px); letter-spacing: .18em; box-shadow: 0 12px 30px rgba(0, 0, 0, .55); }
.tz-band-a { top: 12%; transform: translateY(calc(var(--p) * -34vh)) rotate(calc(-7deg - var(--p) * 11deg)); }
.tz-band-b { top: 76%; transform: translateY(calc(var(--p) * 34vh)) rotate(calc(6deg + var(--p) * 10deg)); }
.tz-an .tz-band { opacity: clamp(0, 1 - var(--p) * 1.6, 1); }
.tz-band-a, .tz-band-b { will-change: transform; }
:root:not(.tz-an) .tz-band { display: none; }
.tz-lauf { display: inline-flex; padding-top: .12em; }
.tz-lauf span { padding-right: 1.4em; }
.tz-an .tz-lauf { animation: tz-lauf 40s linear infinite alternate; }
.tz-an .tz-band-b .tz-lauf { animation-direction: alternate-reverse; }
@keyframes tz-lauf { to { transform: translateX(-25%); } }
.tz-hinweis { position: absolute; bottom: max(28px, env(safe-area-inset-bottom, 0px)); left: 0; right: 0; z-index: 9; margin: 0; text-align: center;
  font-family: var(--maschine); font-size: 14px; letter-spacing: .1em; color: var(--buehne-leise, #d6d6d2); opacity: clamp(0, 1 - var(--p) * 5, 1); }
:root:not(.tz-an) .tz-hinweis { display: none; }
.tz-hinweis i { display: block; width: 1px; height: 38px; margin: 10px auto 0; background: linear-gradient(currentColor, transparent); animation: tz-tropf 1.6s ease-in-out infinite; }
@keyframes tz-tropf { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* 2 spuren */
.tz-spuren .tz-buehne { background: var(--bg, #07060a); }
.tz-spur { position: absolute; inset: 0; }
.tz-kreide { position: absolute; left: 50%; top: 77%; width: min(440px, 76vw); transform: translate(-50%, -50%) rotate(-6deg); opacity: .85; overflow: visible; }
.tz-kreide path { fill: none; stroke: var(--buehne-text, #ecebe7); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: clamp(0, 1 - var(--p) * 1.25, 1); }
.tz-tafel { position: absolute; width: 46px; height: 42px; display: grid; place-items: end center; padding-bottom: 5px; font-size: 22px; color: var(--tz-band-tinte); isolation: isolate;
  --t: clamp(0, (var(--p) - var(--ab)) * 6, 1); transform: translateY(calc((1 - var(--t)) * -120px)); opacity: var(--t); }
.tz-tafel::before { content: ""; position: absolute; inset: 0; background: var(--tz-band); clip-path: polygon(50% 0, 100% 100%, 0 100%); z-index: -1; }
.tz-tafel-1 { left: 22%; top: 30%; --ab: .2; }
.tz-tafel-2 { left: 71%; top: 36%; --ab: .28; }
.tz-tafel-3 { left: 58%; top: 74%; --ab: .36; }
.tz-tafel-4 { left: 12%; top: 70%; --ab: .44; }
.tz-licht-text { position: relative; z-index: 3; max-width: 760px; text-align: center; padding: 0 var(--rand, 18px); }
.tz-licht-text p { font-size: clamp(40px, 7.5vw, 104px); line-height: .92; margin: 0; letter-spacing: .02em;
  --t: clamp(0, (var(--p) - .3) * 4, 1); opacity: var(--t); transform: translateY(calc((1 - var(--t)) * 40%)); }
.tz-licht-text p + p { --t: clamp(0, (var(--p) - .42) * 4, 1); }
.tz-licht-text small { display: block; margin-top: 18px; font-family: var(--maschine); font-size: 16px; color: var(--buehne-leise, #d6d6d2); opacity: clamp(0, (var(--p) - .62) * 4, 1); }
.tz-maske { position: absolute; inset: 0; z-index: 6; pointer-events: none; display: none;
  background: radial-gradient(circle var(--r, 180px) at var(--x, 50%) var(--y, 50%), rgba(255, 244, 214, .06) 0, rgba(7, 6, 10, .15) 45%, rgba(7, 6, 10, .97) 100%); }
.tz-an .tz-maske { display: block; }

/* Köpfe der ruhigen Abschnitte */
.tz-asservate, .tz-wand, .tz-akte { padding: clamp(80px, 12vh, 140px) 0; }
.tz-kopf { margin-bottom: 48px; }
.tz-akte-zeile, .tz-aktenzeichen { margin: 0; }
.tz-kopf .tz-aktenzeichen { font-family: var(--maschine); color: var(--akzent-text, #ff5a62); letter-spacing: .14em; text-transform: uppercase; font-size: 14px; }
.tz-kopf h2 { font-size: clamp(44px, 7vw, 88px); line-height: .95; margin: .15em 0 .25em; text-wrap: balance; letter-spacing: .01em; }
.tz-vorspann { max-width: 62ch; color: var(--leise, #b9b4ae); }
.tz-schritt { --p: 1; }

/* 3 asservate */
.tz-tisch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); }
.tz-beutel { position: relative; min-width: 0; padding: 20px 20px 26px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 6px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03) 40%, rgba(255, 255, 255, .08)); }
.tz-beutel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16px; border-radius: 6px 6px 0 0;
  background: repeating-linear-gradient(90deg, rgba(190, 10, 20, .85) 0 10px, rgba(190, 10, 20, .55) 10px 12px); }
.tz-an .tz-beutel { opacity: var(--p); transform: translateY(calc((1 - var(--p)) * 140px)) rotate(calc((1 - var(--p)) * var(--dreh, 0deg))); }
.tz-beutel:nth-child(1) { --dreh: -8deg; }
.tz-beutel:nth-child(3) { --dreh: 8deg; }
.tz-etikett { margin-top: 14px; padding: 16px 16px 18px; background: var(--tz-papier); color: var(--tz-papier-tinte); font-family: var(--maschine); transform: rotate(-1.2deg); box-shadow: 0 8px 18px rgba(0, 0, 0, .45); }
.tz-nr { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px dashed rgba(36, 32, 27, .5); font-size: 13px; letter-spacing: .06em; }
.tz-etikett h3 { font-size: 30px; line-height: 1; margin: 0 0 8px; letter-spacing: .02em; color: var(--tz-papier-tinte); }
.tz-etikett p:last-child { margin: 0; font-size: 15px; line-height: 1.45; }
.tz-stempel { position: absolute; right: 14px; bottom: -14px; padding: 2px 10px; border: 3px solid var(--tz-blut); color: var(--tz-blut); font-size: 22px; letter-spacing: .12em;
  transform: rotate(-14deg); opacity: .92; }
.tz-an .tz-stempel { --t: clamp(0, (var(--p) - .7) * 3.4, 1); opacity: calc(var(--t) * .92); transform: rotate(-14deg) scale(calc(2.6 - var(--t) * 1.6)); }

/* 4 wand */
.tz-wand { background: radial-gradient(120% 80% at 50% 0%, #1d1612 0%, #120e0c 60%, var(--bg, #07060a) 100%); }
.tz-kork { position: relative; min-height: 720px; --p: 1; }
.tz-faeden { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; }
.tz-faeden path { fill: none; stroke: var(--tz-blut); stroke-width: 2.2; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
.tz-an .tz-faeden path { stroke-dashoffset: clamp(0, 1 - (var(--p) - var(--ab, 0)) * 2.4, 1); }
.tz-faeden path:nth-child(2) { --ab: .12; }
.tz-faeden path:nth-child(3) { --ab: .24; }
.tz-faeden path:nth-child(4) { --ab: .36; }
.tz-zettel, .tz-foto { position: absolute; z-index: 3; box-shadow: 0 14px 28px rgba(0, 0, 0, .55); }
.tz-zettel { width: min(300px, 42%); padding: 18px 18px 20px; background: var(--tz-papier); color: var(--tz-papier-tinte); font-family: var(--maschine); }
.tz-zettel h3 { font-size: 26px; line-height: 1; margin: 0 0 6px; color: var(--tz-papier-tinte); }
.tz-zettel p { margin: 0; font-size: 15px; line-height: 1.45; }
.tz-zettel::before, .tz-foto::before { content: ""; position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 35% 35%, #ff6a72, var(--tz-blut) 60%, #4a0006); box-shadow: 0 3px 4px rgba(0, 0, 0, .5); }
.tz-foto { width: min(270px, 40%); margin: 0; padding: 10px 10px 38px; background: #f4f1ea; left: 39%; top: 22%; }
.tz-foto::before { background: radial-gradient(circle at 35% 35%, #fff3a0, var(--tz-band) 60%, #5a4800); }
.tz-foto img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; filter: grayscale(.3) contrast(1.1); }
.tz-foto figcaption { position: absolute; left: 12px; bottom: 10px; font-family: var(--maschine); font-size: 14px; color: var(--tz-papier-tinte); }
.tz-z1 { left: 2%; top: 4%; } .tz-z2 { right: 2%; top: 2%; } .tz-z3 { left: 4%; top: 70%; } .tz-z4 { right: 4%; top: 74%; }
.tz-an .tz-zettel, .tz-an .tz-foto { opacity: var(--p); transform: translateY(calc((1 - var(--p)) * 60px)) rotate(calc((1 - var(--p)) * var(--dreh, -9deg))); }
.tz-z2, .tz-z4 { --dreh: 9deg; }

/* 5 akte */
.tz-mappe { position: relative; max-width: 820px; margin: 0 auto; perspective: 1600px; --p: 1; }
.tz-innen { min-height: 420px; padding: clamp(28px, 5vw, 56px); border-radius: 4px 10px 10px 4px; background: var(--tz-innen); color: var(--tz-papier-tinte); font-family: var(--maschine); box-shadow: 0 30px 60px rgba(0, 0, 0, .6); }
.tz-innen .tz-akte-zeile { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
.tz-innen h2 { font-size: clamp(40px, 6vw, 72px); line-height: .95; margin: .1em 0 .3em; color: var(--tz-papier-tinte); }
.tz-innen p { max-width: 56ch; font-size: 17px; }
.tz-innen .tz-klein { font-size: 15px; opacity: .8; }
.tz-mail { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; max-width: 100%; padding: 12px 16px; background: var(--tz-papier-tinte); color: var(--tz-papier); font-size: 17px; }
.tz-adresse { text-decoration: none; overflow-wrap: anywhere; }
.tz-kopieren { font: inherit; background: var(--tz-blut); color: #fff; border: 0; padding: 6px 12px; cursor: pointer; }
.tz-kopieren:focus-visible, .tz-knopf:focus-visible { outline: 3px solid var(--tz-band); outline-offset: 3px; }
.tz-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.tz-knopf { display: inline-flex; align-items: baseline; gap: 6px; padding: 10px 18px; border: 2px solid var(--tz-papier-tinte); color: var(--tz-papier-tinte); text-decoration: none; font-size: 18px; letter-spacing: .08em; }
a.tz-knopf:hover { background: var(--tz-papier-tinte); color: var(--tz-papier); }
.tz-knopf small { font-family: var(--maschine); text-transform: none; letter-spacing: 0; font-size: 13px; opacity: .7; }
.tz-deckel { position: absolute; inset: 0; z-index: 4; display: none; flex-direction: column; justify-content: center; padding: clamp(28px, 5vw, 56px); border-radius: 4px 10px 10px 4px;
  background: linear-gradient(135deg, var(--tz-kraft), var(--tz-kraft-tief)); color: var(--tz-papier-tinte); transform-origin: left center; backface-visibility: hidden; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); transform: rotateY(calc(clamp(0, (var(--p) - .1) * 1.3, 1) * -168deg)); }
.tz-an .tz-deckel { display: flex; }
.tz-reiter { position: absolute; top: -28px; left: 40px; width: 180px; height: 30px; background: var(--tz-kraft); border-radius: 8px 8px 0 0; }
.tz-deckel strong { font-size: clamp(34px, 6vw, 64px); line-height: .95; color: var(--tz-papier-tinte); }
.tz-deckel em { font-family: var(--maschine); font-style: normal; margin-top: 10px; }
.tz-vertraulich { position: absolute; right: 28px; bottom: 28px; padding: 2px 12px; border: 3px solid var(--tz-blut); color: var(--tz-blut); font-size: 26px; transform: rotate(-8deg); }

@media (max-width: 760px) {
  .tz-tisch { grid-template-columns: 1fr; }
  .tz-kork { min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 34px; }
  .tz-zettel, .tz-foto { position: relative; inset: auto; width: min(340px, 100%); }
  .tz-faeden { display: none; }
  .tz-an .tz-tatort { height: 200vh; }
  .tz-an .tz-spuren { height: 220vh; }
}
@media (prefers-reduced-motion: reduce) {
  .tz-korn, .tz-hinweis i, .tz-lauf { animation: none !important; }
}