/* VIRUS ORFEUS — REPLIKATION 2026 · medienwerkstatt006
   Eigene Formensprache: die Seite ist der Wirt. Reaktionsdiffusion als lebender Hintergrund,
   die epidemische Kurve S·I·R als Zeitleiste, das SD-Pixel als Maßeinheit (1 : 12),
   Ultramarin und Kadmiumgelb aus den Malereien des Projekts, Cormorant Garamond (Mantua 1607)
   gegen JetBrains Mono (Datenbank 2007). */
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --nacht:#070916; --nacht2:#0b0e22; --line:#1c2144; --line2:#2b3266;
  --papier:#f0ede2; --dim:#a6acc8; --dim2:#6a7195;
  --ultra:#1830d2; --ultra2:#3c55ff; --gelb:#f6e226; --gelb2:#fff27a;
  --ser:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --max:1280px; --px:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--mw4-height,70px) + 72px)}
body{margin:0;background:var(--nacht);color:var(--papier);font-family:var(--mono);font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:72px}
img{max-width:100%;height:auto;display:block}
a{color:var(--gelb);text-decoration:none;border-bottom:1px solid rgba(246,226,38,.35)}
a:hover,a:focus-visible{color:var(--gelb2);border-color:var(--gelb2)}
:focus-visible{outline:2px solid var(--gelb);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
@media(min-width:900px){.wrap{padding:0 40px}}
.dim{color:var(--dim)}
h2,h3{font-family:var(--ser);font-weight:600;letter-spacing:.005em;margin:0}
h2{font-size:clamp(30px,4.4vw,56px);line-height:1.04;margin:8px 0 30px}
h3{font-size:clamp(22px,2.4vw,30px);line-height:1.15}
p{margin:0 0 1.1em}
section{padding:78px 0;border-top:1px solid var(--line);position:relative}
.sec-k{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--gelb);margin:0 0 6px}
.lead{font-family:var(--ser);font-size:clamp(20px,2.1vw,27px);line-height:1.42;color:var(--papier);max-width:62ch}
.two{display:grid;gap:34px}
@media(min-width:900px){.two{grid-template-columns:1fr 1fr;gap:44px}}
.three{display:grid;gap:28px}
@media(min-width:900px){.three{grid-template-columns:1fr 1fr 1fr}}
.note{font-size:12px;color:var(--dim2);margin-top:14px}
.small{font-size:12.5px;color:var(--dim)}
em{font-family:var(--ser);font-size:1.12em;font-style:italic}

/* ---------- Kopf: lebender Wirt ---------- */
.hero{position:relative;background:#000;overflow:hidden;min-height:min(92vh,1100px);display:flex;align-items:flex-end}
.hero img.base{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;opacity:.9;image-rendering:auto}
.hero .over{position:relative;width:100%;padding:120px 20px 40px;
  background:linear-gradient(transparent,rgba(7,9,22,.55) 30%,rgba(7,9,22,.92) 70%,var(--nacht))}
@media(min-width:900px){.hero .over{padding:180px 40px 52px}}
.hero .wrap{padding:0}
.kick{font-size:11px;letter-spacing:.36em;text-transform:uppercase;color:var(--gelb);margin:0 0 20px}
h1{font-family:var(--ser);font-weight:700;font-size:clamp(46px,11.5vw,172px);line-height:.88;margin:0;letter-spacing:.02em;text-transform:uppercase}
h1 .q{display:block;font-family:var(--ser);font-weight:400;font-style:italic;text-transform:none;font-size:.36em;letter-spacing:0;margin-top:.22em;color:var(--gelb);line-height:1.1}
h1 .v{display:block;font-family:var(--mono);font-weight:400;font-size:.13em;letter-spacing:.34em;margin-top:1.2em;line-height:1.5;color:var(--papier)}
.hero .sub{font-family:var(--ser);font-size:clamp(19px,2.1vw,27px);line-height:1.4;max-width:64ch;margin:30px 0 14px}
.hero .who{font-size:12px;color:var(--dim);max-width:80ch;margin:0}
.hud{position:absolute;top:calc(var(--mw4-height,70px) + 22px);left:20px;right:20px;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);pointer-events:none}
@media(min-width:900px){.hud{left:40px;right:40px}}
.hud b{color:var(--gelb);font-weight:400}
.cap{font-size:11.5px;color:var(--dim2);margin:10px 20px 0;letter-spacing:.06em}
@media(min-width:900px){.cap{margin:10px 40px 0}}
.acts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:30px 0 0}
@media(min-width:900px){.acts{grid-template-columns:repeat(4,1fr)}}
.acts a{border:1px solid var(--line2);padding:16px 16px 14px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);background:rgba(11,14,34,.6);transition:.2s}
.acts a b{display:block;font-family:var(--ser);font-weight:600;font-size:22px;letter-spacing:0;text-transform:none;color:var(--papier);margin-top:6px;line-height:1.1}
.acts a:hover{border-color:var(--gelb);color:var(--gelb)}

/* ---------- Epidemische Kurve als Kapitelleiste ---------- */
.epi{position:sticky;top:var(--mw4-height,70px);z-index:30;background:rgba(7,9,22,.94);backdrop-filter:blur(8px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.epi .wrap{position:relative}
.epi svg{display:block;width:100%;height:46px}
.epi ol{list-style:none;margin:0;padding:0;display:flex;gap:0;height:38px}
.epi li a{display:block;height:100%;border:0;border-left:1px solid var(--line2);padding:6px 8px 0;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:.2s}
.epi li a b{font-family:var(--ser);font-weight:700;font-size:15px;letter-spacing:.02em;margin-right:8px;color:var(--papier)}
.epi li a:hover,.epi li.on a{color:var(--gelb);background:rgba(246,226,38,.06)}
.epi li.on a b{color:var(--gelb)}
.epi .leg{display:flex;justify-content:space-between;font-size:10px;color:var(--dim2);letter-spacing:.14em;text-transform:uppercase;padding:4px 0 6px}
@media(max-width:700px){.epi li a .t{display:none}.epi li a{padding:8px 6px 0;text-align:center}.epi li a b{margin:0}}

/* ---------- Fassungen ---------- */
.fr{position:relative;border:1px solid var(--line2);background:#000}
.fr .box{position:relative;aspect-ratio:16/9;background:#000}
.fr iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.fr .pend{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px;background:rgba(7,9,22,.86);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.fr .pend b{font-family:var(--ser);font-size:30px;letter-spacing:.02em;text-transform:none;color:var(--papier);font-weight:600}
.meta{font-size:12.5px;color:var(--dim);margin:12px 0 0;line-height:1.6}

/* ---------- Wirte: acht Clips als Pixelkacheln ---------- */
.hosts{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:34px}
@media(min-width:700px){.hosts{grid-template-columns:repeat(4,1fr)}}
.host{position:relative;border:1px solid var(--line2);background:#000;overflow:hidden}
.host img{width:100%;aspect-ratio:4/3;object-fit:cover;image-rendering:pixelated;image-rendering:crisp-edges;filter:saturate(.75) contrast(1.05);transition:.35s}
.host:hover img{filter:saturate(1.15) contrast(1.1)}
.host .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(7,9,22,.55) 1px,transparent 1px),linear-gradient(90deg,rgba(7,9,22,.55) 1px,transparent 1px);background-size:calc(100%/32) calc(100%/24);pointer-events:none;mix-blend-mode:multiply}
.host figcaption{padding:10px 12px 12px;font-size:11px;line-height:1.5;color:var(--dim);letter-spacing:.04em}
.host figcaption b{display:block;color:var(--papier);font-weight:400;font-size:12px}
.host .n{position:absolute;top:8px;left:10px;font-family:var(--ser);font-weight:700;font-size:26px;color:var(--gelb);text-shadow:0 0 6px #000}

/* ---------- Sieben Stadien ---------- */
.stadien{padding-top:0}
.stad{display:grid;gap:26px;padding:56px 0;border-top:1px solid var(--line)}
.stad:first-of-type{border-top:0}
@media(min-width:900px){.stad{grid-template-columns:7fr 5fr;gap:48px;align-items:start}.stad.rev .fig{order:2}}
.stad .fig{position:relative;border:1px solid var(--line2);background:#000;overflow:hidden}
.stad .fig img{width:100%;aspect-ratio:16/9;object-fit:cover}
.stad .fig .tc{position:absolute;right:10px;bottom:8px;font-size:10.5px;letter-spacing:.14em;color:var(--papier);background:rgba(7,9,22,.75);padding:3px 8px}
.stad .num{font-family:var(--ser);font-style:italic;font-weight:400;font-size:clamp(56px,7vw,110px);line-height:.8;color:var(--gelb);margin:0 0 8px}
.stad h3{font-size:clamp(28px,3.4vw,46px);text-transform:uppercase;letter-spacing:.06em;line-height:1}
.stad .ph{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--dim);margin:12px 0 18px}
.stad .ph b{color:var(--gelb);font-weight:400}
.stad p{font-size:14.5px;color:var(--papier)}
.stad .verf{border-left:2px solid var(--ultra2);padding:6px 0 6px 14px;font-size:12.5px;color:var(--dim);margin:0 0 14px}
.stad .verf b{color:var(--papier);font-weight:400;display:block;font-size:11px;letter-spacing:.28em;text-transform:uppercase;margin-bottom:4px}
.stad .src{font-size:11.5px;color:var(--dim2);letter-spacing:.04em}
.stad .bar{height:6px;background:var(--line);margin:0 0 22px;position:relative}
.stad .bar i{position:absolute;top:0;bottom:0;background:var(--gelb)}

/* ---------- 1 : 12 Vergleich ---------- */
.cmp{position:relative;border:1px solid var(--line2);background:#000;aspect-ratio:16/9;overflow:hidden;user-select:none;touch-action:none;cursor:ew-resize}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp img.a{image-rendering:pixelated;image-rendering:crisp-edges}
.cmp .b{position:absolute;inset:0;clip-path:inset(0 0 0 50%)}
.cmp .hl{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--gelb);box-shadow:0 0 10px rgba(246,226,38,.8);pointer-events:none}
.cmp .hl::after{content:"1 : 12";position:absolute;top:14px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.2em;background:var(--gelb);color:var(--nacht);padding:3px 8px;font-weight:700}
.cmp .lab{position:absolute;bottom:10px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;background:rgba(7,9,22,.8);padding:4px 8px;color:var(--papier);pointer-events:none}
.cmp .lab.l{left:10px}.cmp .lab.r{right:10px}
@media(max-width:700px){.cmp .lab{font-size:9px;letter-spacing:.1em;padding:3px 5px}.cmp .lab.r{bottom:auto;top:10px}}
.grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;margin-top:22px}
.grid12 i{aspect-ratio:1;background:var(--line2);display:block}
.grid12 i.on{background:var(--gelb)}
.grid12 i.r{background:#3a3f5c}

/* ---------- Zitat ---------- */
.quote{font-family:var(--ser);font-style:italic;font-size:clamp(26px,3.6vw,48px);line-height:1.2;color:var(--papier);max-width:26ch;margin:0 0 18px}
.quote::before{content:"„"}.quote::after{content:"“"}
.qsrc{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.bwv{font-family:var(--mono);font-size:11px;line-height:1.9;letter-spacing:.12em;text-transform:uppercase;color:var(--dim2);word-break:break-word;column-count:1}
@media(min-width:900px){.bwv{column-count:2;column-gap:40px}}
.bwv b{color:var(--gelb);font-weight:400}

/* ---------- Datenbank: Ansteckung ---------- */
.db{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:30px}
@media(min-width:700px){.db{grid-template-columns:repeat(8,1fr)}}
.db a{display:block;border:0;position:relative;aspect-ratio:1;overflow:hidden;background:#000;outline:2px solid transparent;outline-offset:-2px;transition:outline-color .25s}
.db a img{width:100%;height:100%;object-fit:cover;filter:grayscale(.85) brightness(.75);transition:filter .35s,transform .35s}
.db a:hover img,.db a.inf img{filter:none;transform:scale(1.04)}
.db a.inf{outline-color:var(--gelb)}
.db a.rec img{filter:grayscale(1) brightness(.55) sepia(.3) hue-rotate(200deg)}
.db a.rec{outline-color:var(--line2)}
.db a span{position:absolute;left:0;bottom:0;font-size:10px;padding:2px 6px;background:rgba(7,9,22,.7);color:var(--dim);letter-spacing:.08em}
.dbctl{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.dbctl button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--papier);background:transparent;border:1px solid var(--line2);padding:8px 14px;cursor:pointer}
.dbctl button:hover,.dbctl button[aria-pressed=true]{border-color:var(--gelb);color:var(--gelb)}
.dbctl .stat b{color:var(--gelb);font-weight:400}
.lb{position:fixed;inset:0;z-index:200;background:rgba(7,9,22,.96);display:none;align-items:center;justify-content:center;padding:20px}
.lb.open{display:flex}
.lb img{max-width:min(96vw,1400px);max-height:84vh;object-fit:contain;border:1px solid var(--line2)}
.lb .c{position:absolute;bottom:22px;left:0;right:0;text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.lb button{position:absolute;top:calc(var(--mw4-height,70px) + 10px);right:18px;font:inherit;background:transparent;border:1px solid var(--line2);color:var(--papier);padding:8px 14px;cursor:pointer;font-size:12px;letter-spacing:.2em}

/* ---------- Original 2007 ---------- */
.orig{display:grid;gap:34px}
@media(min-width:900px){.orig{grid-template-columns:5fr 7fr;gap:48px}}
.cred{font-size:13.5px;line-height:1.7}
.cred dt{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--dim2);margin-top:12px}
.cred dd{margin:0;color:var(--papier)}
.cred dd.y{color:var(--gelb)}

/* ---------- Chronik ---------- */
.chron{list-style:none;margin:0;padding:0;border-left:2px solid var(--line2)}
.chron li{position:relative;padding:0 0 22px 26px;font-size:13.5px;color:var(--dim)}
.chron li::before{content:"";position:absolute;left:-7px;top:9px;width:12px;height:12px;background:var(--nacht);border:2px solid var(--ultra2)}
.chron li.y::before{background:var(--gelb);border-color:var(--gelb)}
.chron b{display:block;font-family:var(--ser);font-weight:600;font-size:22px;color:var(--papier);line-height:1.1;margin-bottom:4px}

/* ---------- Tabellen / Referenzen ---------- */
.tscroll{overflow-x:auto}
.dat{border-collapse:collapse;width:100%;font-size:13px;min-width:640px}
.dat td{border-top:1px solid var(--line);padding:11px 14px 11px 0;vertical-align:top;color:var(--dim)}
.dat td:first-child{color:var(--gelb);white-space:nowrap;letter-spacing:.14em;text-transform:uppercase;font-size:11px;padding-top:14px;width:150px}
.refs{display:grid;gap:34px}
@media(min-width:900px){.refs{grid-template-columns:1fr 1fr 1fr}}
.refs h3{font-size:20px;margin:0 0 12px;color:var(--papier)}
.refs ul{list-style:none;margin:0;padding:0;font-size:13px}
.refs li{padding:6px 0;border-top:1px solid var(--line)}
.refs a{border:0}

/* ---------- SIR-Leiste fix am unteren Rand ---------- */
.sir{position:fixed;left:0;right:0;bottom:0;z-index:40;height:62px;background:rgba(7,9,22,.92);border-top:1px solid var(--line);backdrop-filter:blur(6px)}
.sir svg{position:absolute;inset:0;width:100%;height:100%}
.sir .lbl{position:absolute;left:20px;top:8px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.sir .lbl b{color:var(--gelb);font-weight:400}
.sir .tc{position:absolute;right:20px;top:8px;font-size:10px;letter-spacing:.2em;color:var(--papier)}
@media(min-width:900px){.sir .lbl{left:40px}.sir .tc{right:40px}}

/* ---------- Einblenden ---------- */
.io{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.io.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.io{opacity:1;transform:none;transition:none}}