/*
Theme Name: SWF3 - das Phänomen
Description: Block-Theme für das Archiv „SWF3 - das Phänomen“. Kopf Variante B, Tokens und Schriften aus Prototyp v6.12; Timeline kommt aus dem Plugin archiv-eintrag.
Version: 0.9
Requires at least: 6.7
Requires PHP: 8.1
Text Domain: swf3
Versionshistorie
v0.9 — 2026-09-17 01:10 — Menüschrift +4 px; Logo auf Unterseiten größer (52 px) mit „- das Phänomen“ daneben.
v0.8 — 2026-09-17 00:05 — Studiobild läuft rechts weich aus (keine Kante); Kopfleiste links/rechts eingerückt wie Bild und Bedienleiste.
v0.7 — 2026-09-16 23:50 — T13: Hero ×1,1 auf großen Bildschirmen (Obergrenzen Logo/Überschrift/Text, Kopfleiste ab 1600 px); Studiobild endet rechts bündig mit der Bedienleiste; Spotify-Zwei-Klick (.spotify).
v0.6 — 2026-09-16 23:15 — Hero: Randabstand wächst mit der Fensterbreite (24–64 px), Logo/Überschrift kleben nicht mehr am linken Rand.
v0.5 — 2026-09-17 02:20 — Asset-Version (Adminleiste aus, functions.php).
v0.4 — 2026-09-17 02:05 — Asset-Version (Preload Studiobild in functions.php).
v0.3 — 2026-09-17 00:50 — Scanline-Overlay auf eigener Ebene (will-change), gleiche Optik, weniger Neuzeichnen beim Scrollen.
v0.2 — 2026-09-16 23:35 — Archiv als Block aus dem Plugin.
v0.1 — 2026-09-16 21:50 — Angelegt (Bauplan Frontend v2.1, T2): Tokens, lokale Fonts, Kopfleiste + Hero B, Fuß, Seiten-/Eintrag-Vorlagen.
*/

/* ============ Tokens (Prototyp v6.12, verbindlich) ============ */
:root{
  --rot:#E30613; --blau:#0065AD;
  --ink:#12100E; --panel:#1D1A16; --karte:#272320;
  --alu:#B8B1A4; --alu-dim:#8A8276; --light:#F0ECE4;
  --rail:2px; --r:3px; --knopf:999px;
  --rand:clamp(24px,4.5vw,64px);   /* v0.6 Schutzraum links/rechts im Hero */
  --kond:"Barlow Condensed","Arial Narrow",sans-serif;
  --serif:"Source Serif 4",Georgia,serif;
}
*{box-sizing:border-box;}
[hidden]{display:none!important;}
html{scroll-behavior:smooth;background:var(--ink);}
body{margin:0;background:var(--ink);color:var(--light);font-family:var(--serif);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(120% 78% at 50% -8%,rgba(0,101,173,.28),transparent 62%),
             repeating-linear-gradient(0deg,rgba(0,0,0,.15) 0 1px,transparent 1px 3px);
  mix-blend-mode:screen;opacity:.5;will-change:transform;}
button{font:inherit;}
:focus-visible{outline:2px solid var(--blau);outline-offset:2px;}
.wp-site-blocks{padding:0;}
.wp-site-blocks > *{margin-top:0!important;}

/* ============ Kopfleiste (D5 + v6.4 über dem Hero, v6.5 Anmelden) ============ */
.kopfleiste{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;gap:20px;padding:14px max(24px,calc((100% - 78rem) / 2));}   /* v0.8 eingerückt wie .bf-innen */
.kopfleiste.kl-statisch{position:relative;border-bottom:1px solid rgba(184,177,164,.16);}
.kl-logo{display:flex;align-items:center;gap:10px;color:var(--light);text-decoration:none;
  font-family:var(--kond);font-weight:600;font-size:24px;letter-spacing:.06em;text-transform:uppercase;}   /* v0.9 war 13px */
.kl-logo img{display:block;height:52px;width:auto;}   /* v0.9 war 34px */
.kl-menue{margin:0 0 0 auto;padding:0;list-style:none;display:flex;gap:22px;}
.kl-menue a{color:var(--alu);text-decoration:none;font-family:var(--kond);font-size:18px;   /* v0.9 war 14px */
  letter-spacing:.14em;
  text-transform:uppercase;padding:4px 0;border-bottom:2px solid transparent;}
.kl-menue a:hover{color:var(--light);}
.kl-menue a[aria-current="page"]{color:var(--light);border-bottom-color:var(--rot);}
.kl-burger{display:none;margin-left:auto;background:none;border:1px solid rgba(184,177,164,.35);color:var(--light);
  width:40px;height:36px;border-radius:var(--knopf);font-size:18px;cursor:pointer;}
.kl-menue .nur-redaktion{display:none;}
.redaktion .kl-menue .nur-redaktion{display:block;}
.nur-redaktion a{color:#6FB3E6!important;}
.kl-menue .zahl{background:var(--rot);color:#fff;border-radius:999px;padding:0 7px;font-size:12px;letter-spacing:0;}
.nur-besucher .login-link{display:flex;align-items:center;gap:8px;}
.login-link svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;}
.kl-menue .login-text{display:none;}
.redaktion .kl-menue .nur-besucher{display:none;}

/* ============ Hero, Kopf-Variante B (v6.2–v6.12) ============ */
.hero{position:relative;z-index:2;min-height:86vh;display:flex;flex-direction:column;
  justify-content:center;padding:80px 0 60px;overflow:hidden;isolation:isolate;}
.hero-bild{position:absolute;top:-20px;right:max(1.5rem,calc((100% - 78rem) / 2));bottom:-20px;left:28%;   /* v0.7 rechts bündig mit .bf-innen (war right:-20px;width:72%) */
  -webkit-mask-image:linear-gradient(90deg,#000 78%,transparent);mask-image:linear-gradient(90deg,#000 78%,transparent);   /* v0.8 weicher Auslauf rechts */
  z-index:-2;background:url(assets/bilder/studio.webp) 60% 50%/cover;filter:blur(3px) saturate(.95) brightness(1.1);opacity:.8;}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 30%,rgba(18,16,14,.43) 55%,rgba(18,16,14,.13) 100%),   /* v6.12 Desktop .43/.13 */
  linear-gradient(180deg,transparent 60%,var(--ink));}
.hero > .logo,.hero-text{width:100%;max-width:1296px;margin-left:auto;margin-right:auto;padding:0 var(--rand);}
.logo{position:relative;opacity:0;animation:auf .8s .05s forwards;}
.logo img{display:block;width:clamp(170px,21vw,330px);height:auto;}
.hero-text{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:72px;align-items:end;}
.hero h1{font-family:var(--kond);font-weight:700;font-size:clamp(36px,6.6vw,106px);line-height:.9;margin:0;
  text-transform:uppercase;letter-spacing:-.012em;text-wrap:balance;}
.hero h1 span{display:block;opacity:0;transform:translateY(22px);animation:aufhoch .9s forwards;}
.hero h1 span:nth-child(1){animation-delay:.2s;}
.hero h1 span:nth-child(2){animation-delay:.32s;color:var(--rot);}
.hero .unter{max-width:42ch;margin:0 0 8px;color:#E4DED4;font-size:clamp(15px,1.5vw,21px);line-height:1.6;text-wrap:pretty;opacity:0;animation:auf .9s .52s forwards;}
.dial{position:relative;margin:44px 0 44px;height:56px;pointer-events:none;opacity:0;animation:auf 1.2s .6s forwards;}
.dial .linie{position:absolute;left:0;right:0;top:28px;height:1px;
  background:linear-gradient(90deg,rgba(184,177,164,.55),rgba(184,177,164,.55) 70%,transparent);}
.dial .ticks{position:absolute;left:0;right:0;top:14px;height:28px;
  background-image:repeating-linear-gradient(90deg,rgba(184,177,164,.4) 0 1px,transparent 1px 34px);animation:drift 26s linear infinite;}
.dial .nadel{position:absolute;top:0;left:calc(max(var(--rand),50% - 648px + var(--rand)) + clamp(170px,21vw,330px) + 40px);width:2px;height:56px;background:var(--rot);box-shadow:0 0 18px var(--rot);}
@keyframes auf{to{opacity:1;}}
@keyframes aufhoch{to{opacity:1;transform:translateY(0);}}
@keyframes drift{from{background-position:0 0;}to{background-position:-340px 0;}}

/* ============ Seiteninhalt (Podcast, Mitmachen, Kontakt …) ============ */
.seite{position:relative;z-index:2;padding:40px 24px 120px;}
.seite h1,.seite h2,.seite h3{font-family:var(--kond);font-weight:700;text-transform:uppercase;line-height:1.05;letter-spacing:.01em;}
.seite h1{font-size:clamp(34px,5vw,64px);margin:0 0 24px;}
.seite h2{font-size:clamp(24px,3vw,36px);margin:36px 0 12px;}
.seite h3{font-size:22px;margin:28px 0 8px;font-weight:600;}
.seite p,.seite li{font-size:17px;max-width:70ch;}
.seite a{color:var(--rot);}
.seite a:hover{color:var(--light);}
.seite .wp-block-post-content > *{margin-left:0;}
.seite .hinweis-leer{color:var(--alu-dim);}

/* ============ Fuß (D5) ============ */
.fuss{position:relative;z-index:2;border-top:1px solid rgba(184,177,164,.16);padding:26px 24px 110px;color:var(--alu-dim);font-size:14px;}
.fuss-innen{max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;}
.fuss .name{font-family:var(--kond);font-weight:600;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--light);}
.fuss nav{display:flex;flex-wrap:wrap;gap:18px;margin-left:auto;}
.fuss nav a{color:var(--alu);text-decoration:none;font-family:var(--kond);font-size:14px;letter-spacing:.12em;text-transform:uppercase;}
.fuss nav a:hover{color:var(--light);}

/* ============ Tablet/Handy (D6, v6.7/v6.8, v6.12) ============ */
/* v0.7 Kopfleiste ×1,1 auf großen Bildschirmen */
@media (min-width:1600px){
  .kopfleiste{padding-top:15px;padding-bottom:15px;gap:22px;}
  .kl-logo img{height:56px;}
  .kl-menue{gap:24px;}
  .kl-menue a{font-size:19.5px;}
  .login-link svg{width:22px;height:22px;}
}

/* v0.7 Spotify Zwei-Klick: Player lädt erst nach Klick */
.spotify{position:relative;max-width:720px;height:352px;margin:24px 0;border-radius:12px;overflow:hidden;background:var(--panel);border:1px solid rgba(184,177,164,.2);}
.spotify iframe{display:block;width:100%;height:100%;border:0;}
.spotify-start{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;
  background:none;border:0;color:var(--light);cursor:pointer;text-align:center;}
.spotify-start img{width:96px;height:auto;}
.spotify-start .knopf{width:74px;height:52px;border-radius:12px;background:rgba(227,6,19,.94);display:flex;align-items:center;justify-content:center;font-size:22px;transition:transform .15s;}
.spotify-start:hover .knopf{transform:scale(1.08);}
.spotify-start .txt{font-family:var(--kond);font-size:15px;letter-spacing:.12em;text-transform:uppercase;line-height:1.5;max-width:40ch;}
.spotify-start small{display:block;margin-top:4px;font-family:var(--serif);font-size:14px;letter-spacing:0;text-transform:none;color:var(--alu);}

@media (max-width:1024px){
  .hero::before{background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 30%,rgba(18,16,14,.51) 55%,rgba(18,16,14,.26) 100%),linear-gradient(180deg,transparent 60%,var(--ink));}   /* v6.12 Tablet .51/.26 */
  .hero > .logo img{margin:0 auto;}
  .dial .nadel{left:50%!important;transform:translateX(-50%);}
  .hero-text{grid-template-columns:1fr;gap:18px;justify-items:center;text-align:center;}
  .hero h1{text-align:center;}
  .hero .unter{margin:0 auto;max-width:52ch;text-align:center;}
}
@media (min-width:601px) and (max-width:1024px){
  .hero > .logo img{width:clamp(190px,26vw,250px);}
  .hero-text{gap:22px;}
}
@media (max-width:800px){
  .kl-menue{display:none;position:absolute;left:16px;right:16px;top:60px;flex-direction:column;gap:0;background:var(--panel);
    border:1px solid rgba(184,177,164,.25);border-radius:var(--r);padding:6px 0;z-index:40;}
  .kl-menue.offen{display:flex;}
  .kl-menue a{display:block;padding:12px 16px;border-bottom:0;}
  .kl-menue a[aria-current="page"]{border-left:3px solid var(--rot);}
  .kl-menue .login-text{display:inline;}
  .kl-burger{display:block;}
  .kopfleiste{padding:10px 16px;}
  .kl-logo{font-size:19px;} .kl-logo img{height:40px;}
  .hero{padding-top:64px;padding-bottom:70px;min-height:72svh;}
  .hero::before{background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 30%,rgba(18,16,14,.44) 55%,rgba(18,16,14,.19) 100%),linear-gradient(180deg,transparent 60%,var(--ink));}   /* v6.12 Handy .44/.19 */
  .hero-bild{left:auto;right:-20px;width:100%;opacity:.55;-webkit-mask-image:none;mask-image:none;}   /* v0.7 Handy: weiter bis an den Rand */
  .dial{margin:28px 0;}
  .logo img{width:140px;} .hero > .logo,.hero-text{padding:0 16px;}
  .seite{padding:28px 16px 80px;}
  .fuss{padding-left:16px;padding-right:16px;}
  .fuss nav{margin-left:0;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;} *{animation:none!important;transition:none!important;}
  .logo,.hero h1 span,.hero .unter,.dial{opacity:1;transform:none;}
}