/* =========================================================================
   Variante 11 "Pop-Futur" - Pop-Art x Futurista.
   Nachtviolett, Magenta, Cyan, Neongelb. Schwarze Konturen, Rasterpunkte,
   Neon-Schatten. Bungee + Chakra Petch.
   ========================================================================= */

@font-face { font-family: 'Bungee'; src: url('fonts/bungee-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Chakra Petch'; src: url('fonts/chakra-petch-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Chakra Petch'; src: url('fonts/chakra-petch-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
    --nacht: #1A0B2E;
    --nacht-2: #2A1250;
    --magenta: #FF2BD6;
    --cyan: #00E5FF;
    --gelb: #F9F871;
    --weiss: #FFF8FE;
    --b: 'Bungee', 'Impact', sans-serif;
    --rand: clamp(1rem, 4vw, 3.5rem);
    --punkte-magenta: radial-gradient(circle, rgba(255, 43, 214, .35) 25%, transparent 27%);
    --punkte-cyan: radial-gradient(circle, rgba(0, 229, 255, .3) 25%, transparent 27%);

    --fv-scrim: rgba(26, 11, 46, .85);
    --fv-bg: var(--weiss);
    --fv-fg: #120720;
    --fv-muted: #4b3a63;
    --fv-line: #120720;
    --fv-accent: var(--magenta);
    --fv-accent-fg: #fff;
    --fv-radius: 0;
    --fv-feld-radius: 0;
    --fv-rand: 5px;
    --fv-schatten: 10px 10px 0 var(--cyan);
    --fv-font: 'Chakra Petch', sans-serif;
    --fv-font-titel: var(--b);

    --gal-bg: #0E0519;
    --gal-fg: var(--weiss);
    --gal-muted: rgba(255, 248, 254, .7);
    --gal-accent: var(--magenta);
    --gal-accent-fg: #fff;
    --gal-font: 'Chakra Petch', sans-serif;
    --gal-rand: 4px solid #000;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background-color: var(--nacht); background-image: var(--punkte-magenta); background-size: 18px 18px; color: var(--weiss); font-family: 'Chakra Petch', sans-serif; font-size: 1.1rem; line-height: 1.55; overflow-x: clip; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--gelb); outline-offset: 3px; }

.pf-titel { font-family: var(--b); font-weight: 400; font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1.02; color: var(--gelb); text-shadow: 3px 3px 0 #000, 6px 6px 0 var(--magenta); margin-bottom: 2.5rem; }

.pf-knopf { display: inline-flex; align-items: center; gap: .6rem; padding: .9rem 1.4rem; cursor: pointer; text-decoration: none; font-family: var(--b); font-size: 1rem; background: var(--magenta); color: #fff; border: 4px solid #000; box-shadow: 5px 5px 0 #000, 0 0 24px rgba(255, 43, 214, .7); transition: transform .12s ease, box-shadow .12s ease; }
.pf-knopf:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #000, 0 0 34px rgba(255, 43, 214, .9); }
.pf-knopf:active { transform: translate(5px, 5px); box-shadow: 0 0 0 #000, 0 0 14px rgba(255, 43, 214, .6); }
.pf-knopf-gelb { background: var(--gelb); color: #000; box-shadow: 5px 5px 0 #000, 0 0 24px rgba(249, 248, 113, .6); }
.pf-knopf-klein { padding: .4rem .8rem; font-size: .8rem; border-width: 3px; box-shadow: 3px 3px 0 #000; }
.pf-knoepfe { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 2rem; }

/* --- Kopf -------------------------------------------------------------- */
.pf-kopf { position: relative; z-index: 5; display: flex; align-items: center; gap: 1rem; padding: .8rem var(--rand); background: #0E0519; border-bottom: 4px solid #000; box-shadow: 0 4px 0 var(--cyan); }
.pf-logo { margin-right: auto; font-family: var(--b); font-size: 1.15rem; text-decoration: none; color: var(--cyan); text-shadow: 2px 2px 0 #000; }
.pf-logo span { color: var(--magenta); }
.pf-variante { display: none; font-size: .9rem; color: rgba(255, 248, 254, .75); }
.pf-variante a { color: var(--gelb); }
@media (min-width: 800px) { .pf-variante { display: inline; } }
.pf-sprache { display: flex; gap: .3rem; font-family: var(--b); font-size: .8rem; }
.pf-sprache a { text-decoration: none; padding: .15rem .45rem; border: 3px solid transparent; }
.pf-sprache a.ist-aktiv { background: var(--cyan); color: #000; border-color: #000; }

/* --- Hero -------------------------------------------------------------- */
.pf-hero { display: grid; gap: 2rem; align-items: center; padding: 3.5rem var(--rand) 5rem; }
@media (min-width: 1000px) { .pf-hero { grid-template-columns: 1.4fr 1fr; gap: 3rem; } }
.pf-hero-panel { position: relative; background: var(--nacht-2); border: 5px solid #000; box-shadow: 10px 10px 0 #000, 0 0 50px rgba(0, 229, 255, .35); padding: 0 clamp(1.25rem, 3vw, 2.5rem) 2.5rem; }
.pf-erzaehler { margin: 0 calc(-1 * clamp(1.25rem, 3vw, 2.5rem)) 2rem; padding: .5rem 1rem; background: var(--gelb); color: #000; border-bottom: 4px solid #000; font-weight: 600; text-transform: uppercase; font-size: .9rem; letter-spacing: .04em; }
.pf-hero h1 { font-family: var(--b); font-weight: 400; font-size: clamp(2.4rem, 6vw, 5rem); line-height: 1.02; color: #fff; text-shadow: 4px 4px 0 #000, -3px 0 0 var(--cyan), 3px 0 0 var(--magenta); }
.pf-hero h1 span { color: var(--cyan); text-shadow: 4px 4px 0 #000, 8px 8px 0 var(--magenta); }
.pf-lead { margin-top: 1.5rem; max-width: 34rem; font-size: 1.2rem; }
.pf-robo-buehne { position: relative; justify-self: center; width: min(80vw, 24rem); }
.pf-robo { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 30px rgba(0, 229, 255, .5)); }
.pf-blase { position: relative; margin: 0 0 1rem auto; width: fit-content; max-width: 15rem; background: #fff; color: #000; border: 4px solid #000; border-radius: 50% / 45%; padding: 1rem 1.3rem; font-family: var(--b); font-size: 1rem; line-height: 1.1; text-align: center; }
.pf-blase::after { content: ''; position: absolute; left: 25%; bottom: -1.4rem; width: 1.6rem; height: 1.5rem; background: #fff; border-right: 4px solid #000; border-bottom: 4px solid #000; clip-path: polygon(0 0, 100% 0, 100% 100%); transform: skewX(-25deg); }
.pf-zap { position: absolute; left: -1rem; bottom: 3rem; font-family: var(--b); font-size: 3rem; color: var(--gelb); text-shadow: 3px 3px 0 #000, 6px 6px 0 var(--magenta); transform: rotate(-14deg); }
@media (prefers-reduced-motion: no-preference) {
    .pf-robo-koerper { animation: pf-schweben 3.5s ease-in-out infinite; }
    .pf-robo-augen { animation: pf-blinzeln 4.5s infinite; transform-origin: 160px 146px; }
    .pf-zap { animation: pf-puls 1.4s ease-in-out infinite; }
    @keyframes pf-schweben { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(-1.5deg); } }
    @keyframes pf-blinzeln { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
    @keyframes pf-puls { 0%, 100% { transform: rotate(-14deg) scale(1); } 50% { transform: rotate(-10deg) scale(1.12); } }
}

/* --- Countdown --------------------------------------------------------- */
.pf-countdown { padding: 4rem var(--rand) 5rem; }
.pf-countdown ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 760px) { .pf-countdown ol { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1150px) { .pf-countdown ol { grid-template-columns: repeat(4, 1fr); } }
.pf-countdown li { position: relative; padding: 1.4rem 1.4rem 1.6rem; border: 5px solid #000; box-shadow: 8px 8px 0 #000; color: #000; background-size: 12px 12px; }
.pf-c3 { background-color: var(--cyan); background-image: radial-gradient(circle, rgba(0, 0, 0, .15) 25%, transparent 27%); }
.pf-c2 { background-color: var(--gelb); background-image: radial-gradient(circle, rgba(0, 0, 0, .12) 25%, transparent 27%); transform: rotate(1deg); }
.pf-c1 { background-color: var(--magenta); color: #fff; background-image: radial-gradient(circle, rgba(0, 0, 0, .18) 25%, transparent 27%); transform: rotate(-1deg); }
.pf-c0 { background-color: #fff; background-image: var(--punkte-cyan); }
.pf-countdown b { display: block; font-family: var(--b); font-weight: 400; font-size: 5rem; line-height: .9; text-shadow: 4px 4px 0 rgba(0, 0, 0, .25); }
.pf-c0 b { color: var(--magenta); -webkit-text-stroke: 2px #000; text-shadow: 4px 4px 0 #000; font-size: 4rem; }
.pf-countdown span { display: block; font-family: var(--b); font-size: 1.15rem; margin: .5rem 0 .4rem; }
.pf-countdown p { font-weight: 600; }

/* --- Missionen --------------------------------------------------------- */
.pf-missionen { padding: 5rem var(--rand); background: #0E0519; border-top: 4px solid #000; border-bottom: 4px solid #000; }
.pf-karten { display: grid; gap: 1.5rem; }
@media (min-width: 800px) { .pf-karten { grid-template-columns: 1fr 1fr; } }
.pf-karte { position: relative; padding: 2rem 1.6rem 1.6rem; background: var(--nacht-2); border: 4px solid #000; box-shadow: 0 0 0 3px var(--cyan), 8px 8px 0 3px #000; }
.pf-karte:nth-child(even) { box-shadow: 0 0 0 3px var(--magenta), 8px 8px 0 3px #000; }
.pf-laut { position: absolute; right: 1rem; top: -1.4rem; font-family: var(--b); font-size: 1.6rem; color: var(--gelb); text-shadow: 2px 2px 0 #000, 4px 4px 0 var(--magenta); transform: rotate(6deg); }
.pf-karte h3 { font-family: var(--b); font-weight: 400; font-size: 1.4rem; color: var(--cyan); margin-bottom: .5rem; }
.pf-karte:nth-child(even) h3 { color: var(--magenta); }

/* --- Roentgen ---------------------------------------------------------- */
.pf-roentgen { padding: 5rem var(--rand); display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1000px) { .pf-roentgen { grid-template-columns: 1.2fr 1fr; gap: 4rem; } }
.pf-roentgen p { margin-bottom: 2rem; max-width: 36rem; }
.pf-fakten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.pf-fakten li { aspect-ratio: 1; display: grid; place-content: center; text-align: center; gap: .3rem; background: #000; border: 4px solid var(--cyan); box-shadow: 0 0 22px rgba(0, 229, 255, .45), inset 0 0 22px rgba(0, 229, 255, .25); font-size: .85rem; font-weight: 600; text-transform: uppercase; }
.pf-fakten li:nth-child(even) { border-color: var(--magenta); box-shadow: 0 0 22px rgba(255, 43, 214, .45), inset 0 0 22px rgba(255, 43, 214, .25); }
.pf-fakten b { font-family: var(--b); font-weight: 400; font-size: 2.6rem; line-height: 1; color: var(--gelb); }

/* --- Hefte ------------------------------------------------------------- */
.pf-hefte { padding: 5rem var(--rand); background: var(--nacht-2); border-top: 4px solid #000; }
.pf-heftreihe { display: grid; gap: 2rem; }
@media (min-width: 900px) { .pf-heftreihe { grid-template-columns: repeat(3, 1fr); } }
.pf-heft { position: relative; display: block; text-decoration: none; background: var(--gelb); color: #000; border: 5px solid #000; box-shadow: 8px 8px 0 #000; padding: .8rem .8rem 1rem; transition: transform .15s ease; }
.pf-heft:nth-child(2) { background: var(--cyan); transform: rotate(1.5deg); }
.pf-heft:nth-child(3) { background: var(--magenta); color: #fff; transform: rotate(-1.5deg); }
.pf-heft:hover { transform: rotate(0) scale(1.03); }
.pf-nr { position: absolute; left: -1rem; top: -1rem; z-index: 1; width: 3.4rem; height: 3.4rem; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #000; border: 4px solid #000; font-family: var(--b); font-size: 1.1rem; }
.pf-heft img { display: block; width: 100%; height: 14rem; object-fit: cover; object-position: top; border: 4px solid #000; filter: contrast(1.15) saturate(1.4); }
.pf-heft b { display: block; margin-top: .8rem; font-family: var(--b); font-weight: 400; font-size: 1.2rem; line-height: 1.1; }
.pf-heft small { font-size: .95rem; font-weight: 600; }
.pf-stimme { margin: 4rem 0 0; max-width: 46rem; position: relative; background: #fff; color: #000; border: 5px solid #000; box-shadow: 8px 8px 0 var(--magenta); padding: 1.6rem 1.8rem; }
.pf-stimme blockquote { margin: 0; font-family: var(--b); font-size: clamp(1.1rem, 2.3vw, 1.6rem); line-height: 1.25; }
.pf-es { margin-top: .7rem; font-style: italic; }
.pf-stimme figcaption { margin-top: .8rem; font-weight: 600; }

/* --- Design ------------------------------------------------------------ */
.pf-design { padding: 5rem var(--rand); }
.pf-design-text { display: grid; gap: 1.5rem 3rem; }
@media (min-width: 900px) { .pf-design-text { grid-template-columns: 1fr 1fr; } }
.pf-design-text p { background: rgba(14, 5, 25, .85); border: 3px solid var(--cyan); padding: 1.3rem 1.5rem; }
.pf-design-text p + p { border-color: var(--magenta); }

/* --- Schluss ----------------------------------------------------------- */
.pf-schluss { padding: 5rem var(--rand) 6rem; text-align: left; border-top: 4px solid #000; background: #0E0519; }
.pf-schluss h2 { font-family: var(--b); font-weight: 400; font-size: clamp(2.6rem, 8vw, 6.5rem); line-height: 1; color: var(--cyan); text-shadow: 4px 4px 0 #000, 8px 8px 0 var(--magenta); max-width: 14ch; }

.fv-galerie { border-top: 4px solid #000; }
.pf-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 1.5rem var(--rand) 2rem; background: #000; color: rgba(255, 248, 254, .75); font-size: .9rem; }
.pf-fuss nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* Popups */
.fv-kopf { background: var(--cyan); border-bottom: 4px solid #000; }
.fv-titel { font-weight: 400; font-size: 1.4rem; }
.fv-intro { color: #120720; }
.fv-input { border-width: 3px; border-color: #000; }
.fv-input:focus { border-color: var(--magenta); }
.fv-senden, .fv-knopf { border: 4px solid #000; box-shadow: 5px 5px 0 #000; font-family: var(--b); font-weight: 400; font-size: .9rem; }
.fv-knopf-zweit { background: #fff; color: #000; }

/* Schmale Schirme */
.pf-roentgen > * { min-width: 0; }
.pf-fakten li { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 600px) {
    .pf-kopf { gap: .5rem; }
    .pf-logo { font-size: .85rem; }
    .pf-knopf-klein { font-size: .7rem; padding: .35rem .5rem; }
    .pf-fakten { gap: .6rem; }
    .pf-fakten li { font-size: .7rem; }
    .pf-fakten b { font-size: 1.9rem; }
    .pf-titel { overflow-wrap: anywhere; }
}