/*
Theme Name: fA live 2
Theme URI: https://fa-live.de
Author: fA live
Description: Scrollgetriebene Website für fischerAppelt live marketing. Jede Sektion des abgenommenen Entwurfs ist als ACF-Block zeichengleich übernommen; die Choreografie liegt je Seitentyp in einem Skript. Sektions-Einstellungen sind Overrides mit dem Standard „Wie im Entwurf“.
Version: 2.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: proprietär
Text Domain: fa-live
*/

/* ---------------------------------------------------------------------------
   1 — Basis. Wörtlich aus dem <style>-Block der Mockups.
--------------------------------------------------------------------------- */

html { scroll-behavior:smooth; background:#08080a; }
body { margin:0; background:#08080a; color:#f2f2f2; overflow-x:clip; -webkit-font-smoothing:antialiased; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; }
a { color:#ff005f; text-decoration:none; }
a:hover { color:#ffffff; }
::selection { background:#ff005f; color:#08080a; }
section[id] { scroll-margin-top:0; }

/* ---------------------------------------------------------------------------
   2 — Keyframes. Wörtlich aus den Mockups, unter den Originalnamen.
   Ausnahme: „heartbeat“ existiert in zwei Fassungen (Startseite, Case-Detail);
   die Case-Fassung heißt hier „heartbeat-case“. Ungenutzte Keyframes der
   Mockups (marquee, riseIn, fadeOut) sind nicht übernommen.
--------------------------------------------------------------------------- */

@keyframes draw { from { stroke-dashoffset:var(--len,1600); } to { stroke-dashoffset:0; } }
@keyframes fillUp { from { top:1.2183em; } to { top:-0.1195em; } }
@keyframes zielBracketL { 0% { opacity:0; transform:translateX(-1.2em); } 60% { opacity:1; transform:translateX(0.08em); } 100% { opacity:1; transform:translateX(0); } }
@keyframes zielBracketR { 0% { opacity:0; transform:translateX(1.2em); } 60% { opacity:1; transform:translateX(-0.08em); } 100% { opacity:1; transform:translateX(0); } }
@keyframes zielScan { 0% { opacity:0; transform:translateX(-115%); } 12% { opacity:1; } 88% { opacity:1; } 100% { opacity:0; transform:translateX(115%); } }
@keyframes zielUnderline { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes zielLock { 0% { letter-spacing:0.16em; filter:blur(5px); opacity:0.35; } 55% { letter-spacing:-0.01em; filter:blur(0); opacity:1; } 70% { text-shadow:0 0 26px rgba(255,0,95,0.85); } 100% { letter-spacing:0; filter:blur(0); opacity:1; text-shadow:0 0 0 rgba(255,0,95,0); } }
@keyframes zielPulse { 0%,100% { opacity:0.28; } 50% { opacity:0.7; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes heartbeat { 0%,100% { transform:scale(1); } 7% { transform:scale(1.028); } 15% { transform:scale(1); } 23% { transform:scale(1.05); } 36% { transform:scale(1); } }
@keyframes scan { 0% { transform:translateX(-8%); opacity:0; } 12% { opacity:1; } 88% { opacity:1; } 100% { transform:translateX(108%); opacity:0; } }
@keyframes spinSlow { to { transform:rotate(360deg); } }
@keyframes drift { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-16px); } }
@keyframes ticker { 0%,100% { opacity:0.25; } 50% { opacity:1; } }
@keyframes gefuehl-beat { 0%,100% { transform:scale(1); text-shadow:0 0 0 rgba(255,0,95,0); } 12% { transform:scale(1.07); text-shadow:0 0 46px rgba(255,0,95,0.6); } 24% { transform:scale(1.01); } 34% { transform:scale(1.05); text-shadow:0 0 34px rgba(255,0,95,0.45); } 50% { transform:scale(1); text-shadow:0 0 0 rgba(255,0,95,0); } }
@keyframes fa-cue { 0% { transform:translateY(-100%) } 100% { transform:translateY(100%) } }
@keyframes fa-flicker { 0%,100% { opacity:1 } 41% { opacity:1 } 43% { opacity:.24 } 45% { opacity:.92 } 47% { opacity:.4 } 49% { opacity:1 } 72% { opacity:1 } 74% { opacity:.55 } 76% { opacity:1 } }
@keyframes fa-flicker-hard { 0% { opacity:1 } 8% { opacity:.1 } 16% { opacity:1 } 24% { opacity:.06 } 32% { opacity:1 } 44% { opacity:.2 } 56% { opacity:1 } 70% { opacity:.08 } 84% { opacity:1 } 92% { opacity:.3 } 100% { opacity:1 } }

/* Case-Detail: Ziel-Emotion-Wort */
@keyframes heartbeat-case { 0%,100% { transform:scale(1); } 7% { transform:scale(1.02); } 15% { transform:scale(1); } 23% { transform:scale(1.04); } 36% { transform:scale(1); } }

/* ---------------------------------------------------------------------------
   3 — Hover-Zustände. Im Mockup stehen sie als style-hover-Attribut; die
   Runtime erzeugt daraus eine :hover-Regel und hängt an jede Deklaration
   !important, sonst verlöre sie gegen den Inline-Stil. Genau das hier.
--------------------------------------------------------------------------- */

.hov-zeile:hover { background:linear-gradient(90deg,rgba(255,0,95,0.16),transparent) !important; padding-left:20px !important; }
.hov-stadt:hover { color:#ff005f !important; transform:translateY(-6px) !important; }
.hov-stadt-gelb:hover { color:#ffcd64 !important; transform:translateY(-6px) !important; }
.hov-rand-hell:hover { border-color:#f2f2f2 !important; }
.hov-hell:hover { color:#f2f2f2 !important; }
.hov-rand-magenta:hover { border-color:#ff005f !important; color:#ff005f !important; }
.hov-fuellung:hover { background:#ff005f !important; color:#08080a !important; }
.hov-fuellung-rand:hover { background:#ff005f !important; border-color:#ff005f !important; color:#08080a !important; }

/* ---------------------------------------------------------------------------
   4 — Fallback-Seiten ohne Blöcke (Suche, 404, Beiträge). Kein Entwurf.
--------------------------------------------------------------------------- */

.fa-fallback { position:relative; padding:22vh 6vw 12vh; max-width:1100px; }
.fa-fallback h1 { font-size:clamp(40px,8vw,140px); font-weight:700; letter-spacing:-0.05em; line-height:0.9; margin:0 0 6vh; }
.fa-fallback p, .fa-fallback li { font-size:19px; line-height:1.7; color:#e2e2e2; max-width:70ch; }