/* Gemeinsame Bausteine fuer alle SPSR-Mockup-Seiten (Nav, Ticker, Cookiebanner). */

/* --- Seiten-Navigation --------------------------------------------------- */
.spsr-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.spsr-nav a{font-family:"Press Start 2P",monospace;font-size:9px;letter-spacing:.06em;text-decoration:none;color:var(--ink);border:2px solid var(--tv-dark);background:var(--tv);padding:9px 11px;box-shadow:3px 3px 0 var(--tv-dark);-webkit-tap-highlight-color:transparent}
.spsr-nav a:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--tv-dark)}
.spsr-nav a[aria-current="page"]{background:var(--ink);color:var(--bg);border-color:var(--ink);box-shadow:3px 3px 0 var(--tv-dark)}

/* --- Referenzen-Ticker ---------------------------------------------------
   Kein CSS-Transform mehr: der Track wird nativ horizontal gescrollt und per
   JS weiterbewegt. Dadurch laesst er sich auf Touch-Geraeten wischen und die
   Links bleiben antippbar, auch waehrend er laeuft.                        */
.press{margin-top:46px;padding:22px 0;border-top:2px solid var(--tv-dark);border-bottom:2px solid var(--tv-dark)}
.press-viewport{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
.press-viewport::-webkit-scrollbar{display:none}
.press-track{display:flex;width:max-content;gap:38px;padding:0 8px;animation:none}
.press-track span{font-family:"Press Start 2P",monospace;font-size:13px;white-space:nowrap;color:var(--ink)}
.press-track a{color:var(--ink);text-decoration:underline;display:inline-block;padding:8px 2px}
.press-hint{margin:12px 0 0;text-align:center;font-family:"Press Start 2P",monospace;font-size:7px;letter-spacing:.08em;color:var(--muted)}

/* --- Cookiebanner (16-Bit) ----------------------------------------------- */
.ck{position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;padding:12px;font-family:"Press Start 2P",monospace}
.ck.show{display:block}
.ck-box{width:min(560px,100%);margin:0 auto;background:#1b1b1b;color:#f2efe6;border:4px solid #f2efe6;box-shadow:0 0 0 4px #1b1b1b,0 0 0 8px #8f8571,10px 10px 0 rgba(0,0,0,.35);padding:16px 16px 14px;image-rendering:pixelated}
.ck-title{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.06em;color:#ffd35c;margin:0 0 12px}
.ck-title::before{content:"";width:10px;height:10px;background:#7fe38a;box-shadow:0 0 0 2px #1b1b1b,0 0 0 4px #7fe38a;animation:ck-blink 1.1s steps(1) infinite}
@keyframes ck-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.ck-text{margin:0 0 14px;font-family:VT323,monospace;font-size:19px;line-height:1.45;color:#ded9cb}
.ck-text a{color:#7fe38a}
.ck-actions{display:flex;flex-wrap:wrap;gap:8px}
.ck-btn{flex:1 1 150px;font-family:"Press Start 2P",monospace;font-size:9px;letter-spacing:.05em;padding:12px 8px;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;color:#06170a;background:#7fe38a;box-shadow:0 4px 0 #3f9a4c}
.ck-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #3f9a4c}
.ck-btn.is-alt{background:#d9cdb4;box-shadow:0 4px 0 #8f8571}
.ck-btn.is-alt:active{box-shadow:0 1px 0 #8f8571}
.ck-btn.is-ghost{flex:1 1 100%;background:transparent;color:#ded9cb;box-shadow:inset 0 0 0 2px #8f8571;font-size:8px}
.ck-btn.is-ghost:active{transform:translateY(2px)}
.ck-opts{display:none;margin:14px 0 0;border-top:2px dashed #8f8571;padding-top:12px}
.ck-opts.show{display:block}
.ck-opt{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;font-family:VT323,monospace;font-size:18px;line-height:1.35;color:#ded9cb}
.ck-opt input{width:18px;height:18px;margin:2px 0 0;flex-shrink:0;accent-color:#7fe38a}
.ck-opt b{display:block;font-family:"Press Start 2P",monospace;font-size:8px;letter-spacing:.05em;color:#f2efe6;margin-bottom:4px}
.ck-reopen{position:fixed;left:14px;bottom:14px;z-index:60;display:none;font-family:"Press Start 2P",monospace;font-size:8px;padding:8px 10px;border:0;background:var(--tv);color:var(--ink);box-shadow:3px 3px 0 var(--tv-dark);cursor:pointer}
.ck-reopen.show{display:block}
@media(prefers-reduced-motion:reduce){.ck-title::before{animation:none}}
@media(max-width:480px){.ck-btn{flex:1 1 100%}}

/* --- Footer mit den Rechtsseiten ---------------------------------------- */
.spsr-footer{margin-top:40px;padding-top:18px;border-top:2px solid var(--tv-dark);text-align:center}
.spsr-footer nav{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px}
.spsr-footer a{font-family:"Press Start 2P",monospace;font-size:8px;letter-spacing:.06em;color:var(--muted);text-decoration:none;padding:8px 4px;-webkit-tap-highlight-color:transparent}
.spsr-footer a:hover,.spsr-footer a:focus-visible{color:var(--ink);text-decoration:underline}
.spsr-footer a[aria-current="page"]{color:var(--ink);text-decoration:underline}
.spsr-footer p{margin:10px 0 0;font-family:VT323,monospace;font-size:16px;color:var(--muted)}
.spsr-footer .credit{margin-top:4px;font-size:17px}
.spsr-footer .credit a{font-weight:700;color:var(--ink);text-decoration:underline}
.spsr-footer .credit a:hover,.spsr-footer .credit a:focus-visible{opacity:.7}

/* --- Plattenspieler (auf allen Seiten identisch) ------------------------- */
.vinyl{position:fixed;top:18px;right:18px;z-index:40;display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.vinyl-disc{width:64px;height:64px;border-radius:50%;background:repeating-radial-gradient(circle at center,#111 0 2px,#222 2px 4px);box-shadow:0 4px 14px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;animation:spin 3s linear infinite;animation-play-state:paused}
.vinyl-label{font-family:"Press Start 2P",monospace;font-size:6px;line-height:1.5;letter-spacing:.03em;color:var(--muted);text-align:center;max-width:76px}
.vinyl.playing .vinyl-disc{animation-play-state:running}
.vinyl-disc span{width:22px;height:22px;border-radius:50%;background:#b5443b;display:flex;align-items:center;justify-content:center;font-family:"Press Start 2P",monospace;font-size:5px;color:#f4ede0}
@keyframes spin{to{transform:rotate(360deg)}}
.mini-tv{width:122px;background:#141414;border-radius:10px;padding:8px 8px 12px;box-shadow:0 12px 26px rgba(0,0,0,.35),inset 0 0 0 2px #000;display:none}
.mini-tv.show{display:block}
.mini-tv-top{display:flex;justify-content:center;gap:5px;margin-bottom:6px}
.mini-tv-top span{width:4px;height:4px;border-radius:50%;background:#3a3a3a}
.mini-tv-screen{position:relative;aspect-ratio:4/3;background:#000;border-radius:4px;overflow:hidden;box-shadow:inset 0 0 0 4px #000,inset 0 0 14px rgba(0,0,0,.85)}
.mini-tv-screen video{width:100%;height:100%;object-fit:cover;display:block}
.mini-tv-screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(rgba(0,0,0,0) 0px,rgba(0,0,0,0) 1px,rgba(0,0,0,.22) 2px,rgba(0,0,0,.22) 3px)}
.mini-tv-base{margin-top:7px;height:5px;border-radius:2px;background:repeating-linear-gradient(90deg,#000 0 2px,#2a2a2a 2px 5px)}
@media(prefers-reduced-motion:reduce){.vinyl-disc{animation:none!important}}
@media(max-width:480px){
  .vinyl{top:10px;right:10px;gap:4px}
  .vinyl-disc{width:44px;height:44px}
  .vinyl-disc span{width:16px;height:16px;font-size:4px}
  .vinyl-label{font-size:5px;max-width:54px}
  .brand{padding:0 62px}
}

/* --- Wortmarke ----------------------------------------------------------- */
.brand-logo{margin:0 0 14px;line-height:0}
.brand-logo img{width:min(100%,266px);height:auto;display:inline-block}

/* --- Hero-Video ---------------------------------------------------------- */
.hero{position:relative;margin:0 0 26px;border:3px solid var(--tv-dark);box-shadow:6px 6px 0 var(--tv-dark);background:#000;line-height:0}
.hero video{width:100%;height:auto;display:block}
.hero-fs{position:absolute;right:10px;bottom:10px;z-index:3;font-family:"Press Start 2P",monospace;font-size:8px;letter-spacing:.05em;line-height:1.4;padding:9px 11px;border:0;cursor:pointer;color:#06170a;background:#7fe38a;box-shadow:0 4px 0 #3f9a4c;-webkit-tap-highlight-color:transparent}
.hero-fs:active{transform:translateY(3px);box-shadow:0 1px 0 #3f9a4c}
/* Im Vollbild fuellt das Video den Schirm, der Rahmen stoert dort nur. */
.hero:fullscreen{border:0;box-shadow:none;margin:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#000}
.hero:fullscreen video{width:100%;height:100%;object-fit:contain}
.hero:-webkit-full-screen{border:0;box-shadow:none;background:#000}
.hero:-webkit-full-screen video{width:100%;height:100%;object-fit:contain}