/* SPSR Desktop - Startseite im Stil eines 16-Bit-Schreibtischs.
   Ordner und Miniscreens liegen frei auf der Flaeche, Inhalte oeffnen sich
   in Retro-Fenstern. Schrift, Palette und Pixelrahmen wie im Rest des Mockups. */
:root{--bg:#eeede9;--ink:#020202;--muted:#77746d;--tv:#d9cdb4;--tv-dark:#8f8571;--screen:#0b1f13;
      --f-yellow:#e6e34a;--f-red:#b5443b;--f-green:#7fe38a;--f-blue:#6fa8dc;--f-grey:#b9b6ae;--f-gold:#d8ad36;--f-black:#1b1b1b;--f-sand:#d9cdb4;--f-rose:#e8a5b3}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:VT323,monospace;overflow-x:hidden}
a{color:inherit}
button{font:inherit}

/* --- Kopf- und Fusszeile --------------------------------------------------- */
.bar{position:fixed;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:18px 22px;font-family:"Press Start 2P",monospace;font-size:9px;letter-spacing:.06em}
.bar-top{top:0}
.bar-bottom{bottom:0;justify-content:center;flex-direction:column;gap:8px;padding-bottom:16px}
.bar a,.bar button{color:var(--ink);text-decoration:none;background:none;border:0;padding:6px 4px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bar a:hover,.bar button:hover{text-decoration:underline}
.bar-logo img{height:22px;width:auto;display:block}
.bar-links{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center}
.bar-links span{color:var(--muted)}
.bar-credit{font-family:VT323,monospace;font-size:16px;color:var(--muted);letter-spacing:0}
.bar-credit a{font-weight:700;color:var(--ink);text-decoration:underline;padding:0}

/* Sprache: beide Fassungen liegen im Markup, <html lang> entscheidet */
html[lang="de"] .i18n-en,html[lang="en"] .i18n-de{display:none}
.lang{display:flex;align-items:center;gap:4px}
.lang span{color:var(--muted)}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--bg);text-decoration:none}
.lang button{padding:6px 7px}

/* Musik-Schalter oben rechts: kleine Platte, dreht sich beim Abspielen */
.vinyl{position:static;display:flex;align-items:center;gap:8px;cursor:pointer}
.vinyl-disc{width:18px;height:18px;border-radius:50%;background:repeating-radial-gradient(circle at center,#111 0 1px,#333 1px 2px);display:flex;align-items:center;justify-content:center;animation:spin 2.4s linear infinite;animation-play-state:paused}
.vinyl-disc span{width:6px;height:6px;border-radius:50%;background:var(--f-red)}
.vinyl.playing .vinyl-disc{animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}
.mini-tv{display:none}

/* --- Schreibtisch --------------------------------------------------------- */
.desk{position:relative;min-height:100svh;padding:90px 0 120px}
@media(min-width:1001px) and (min-height:701px){.desk{min-height:max(100svh,760px)}}
.item{position:absolute;display:flex;flex-direction:column;align-items:center;gap:10px;background:none;border:0;padding:8px;cursor:pointer;color:var(--ink);-webkit-tap-highlight-color:transparent;text-decoration:none}
.item:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.item:hover .label,.item:focus-visible .label{background:var(--ink);color:var(--bg)}
.label{font-family:"Press Start 2P",monospace;font-size:9px;letter-spacing:.04em;padding:5px 7px;white-space:nowrap}
.label small{display:block;margin-top:5px;font-family:VT323,monospace;font-size:14px;letter-spacing:0;color:var(--muted)}

/* Pixel-Ordner: SVG mit harten Kanten, Farbe via currentColor */
.folder{width:86px;height:70px;color:var(--folder,var(--f-sand));filter:drop-shadow(4px 4px 0 rgba(0,0,0,.28));transition:transform .12s steps(2)}
.item:hover .folder,.item:focus-visible .folder{transform:translate(-2px,-2px)}
.folder svg{width:100%;height:100%;display:block;shape-rendering:crispEdges}

/* Miniscreens: kleines TV-Gehaeuse mit laufendem Inhalt */
.mini{width:150px;background:var(--tv);border:3px solid var(--tv-dark);box-shadow:5px 5px 0 var(--tv-dark);padding:8px 8px 7px;transition:transform .12s steps(2)}
.item:hover .mini,.item:focus-visible .mini{transform:translate(-2px,-2px)}
.mini-screen{position:relative;aspect-ratio:4/3;background:var(--screen);overflow:hidden;box-shadow:inset 0 0 0 3px #1c1a16}
.mini-screen video,.mini-screen img,.mini-screen canvas{width:100%;height:100%;object-fit:cover;display:block;image-rendering:pixelated}
.mini-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,.2) 2px,rgba(0,0,0,.2) 3px)}
.mini-screen .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"Press Start 2P",monospace;font-size:8px;color:#d7f3d7;text-shadow:0 0 4px #3fae55;animation:blink 1s steps(1) infinite}
.mini-base{display:flex;align-items:center;justify-content:flex-end;gap:5px;padding-top:6px}
.mini-base i{width:7px;height:7px;border-radius:50%;background:var(--tv-dark)}
.mini-base b{flex:1;height:6px;max-width:60px;background:repeating-linear-gradient(90deg,var(--tv-dark) 0 2px,transparent 2px 5px)}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* Positionen auf grossen Schirmen - bewusst unregelmaessig wie ein echter Desktop */
.pos-about{left:8%;top:22%}
.pos-press{left:30%;top:19%}
.pos-video{left:54%;top:25%}
.pos-appointment{left:82%;top:24%}
.pos-lookbook{left:12%;top:54%}
.pos-game{left:38%;top:54%}
.pos-faq{left:66%;top:55%}
.pos-wedding{left:88%;top:56%}
.pos-trunks{left:22%;top:82%}
.pos-referenzen{left:50%;top:83%}
.pos-instagram{left:78%;top:81%}
.item{transform:translate(-50%,-50%)}
.item:hover,.item:focus-visible{transform:translate(-50%,-50%)}

/* --- Fenster ------------------------------------------------------------- */
.win{position:fixed;z-index:50;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,560px);max-height:min(86svh,760px);display:none;flex-direction:column;background:var(--bg);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.win.open{display:flex}
.win.front{z-index:60}
.win-bar{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 12px;background:var(--ink);color:var(--bg);font-family:"Press Start 2P",monospace;font-size:9px;letter-spacing:.06em;cursor:move;user-select:none;touch-action:none}
.win-bar .dots{display:flex;gap:4px;margin-right:auto}
.win-bar .dots i{width:6px;height:6px;background:var(--bg);opacity:.5}
.win-close{width:28px;height:24px;border:2px solid var(--bg);background:transparent;color:var(--bg);font-family:"Press Start 2P",monospace;font-size:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.win-close:hover{background:var(--bg);color:var(--ink)}
.win-body{overflow:auto;padding:18px;font-size:20px;line-height:1.5;-webkit-overflow-scrolling:touch}
.win-body.tight{padding:0}
.win-body h3{font-family:"Press Start 2P",monospace;font-size:10px;line-height:1.7;letter-spacing:.05em;margin:0 0 12px}
.win-body p{margin:0 0 14px}
.win-body p:last-child{margin-bottom:0}
.win-body .kicker{font-family:"Press Start 2P",monospace;font-size:8px;letter-spacing:.1em;color:var(--muted);margin:0 0 10px}
.win-body .quote{margin-bottom:12px}
.win-body .note{color:#5d5a53;font-size:19px}
.win-body .tagline{font-family:"Press Start 2P",monospace;font-size:10px;line-height:1.8;letter-spacing:.05em;text-align:center;margin:22px 0 4px}
.win-body .divider{border:0;border-top:2px dashed var(--tv-dark);margin:18px 0}

/* Referenzen */
.win-body .press{margin:0 -18px 16px;padding:14px 0}
.refs{list-style:none;margin:0 0 14px;padding:0}
.refs li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 0;border-bottom:2px dashed var(--tv-dark)}
.refs li:last-child{border-bottom:0}
.ref-name{font-family:"Press Start 2P",monospace;font-size:10px;letter-spacing:.04em}
.ref-name a{text-decoration:underline}
.ref-tag{font-size:17px;color:var(--muted);white-space:nowrap}

/* Lookbook */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;border:3px solid var(--tv-dark);box-shadow:4px 4px 0 var(--tv-dark)}

/* Video-Fenster */
.win-video{width:min(94vw,820px)}
.hero{position:relative;margin:0;border:0;box-shadow:none;background:#000;line-height:0}
.hero video{width:100%;height:auto;display:block;max-height:70svh}
.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:var(--f-green);box-shadow:0 4px 0 #3f9a4c;-webkit-tap-highlight-color:transparent}
.hero-fs:active{transform:translateY(3px);box-shadow:0 1px 0 #3f9a4c}
.hero:fullscreen{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.hero:fullscreen video{width:100%;height:100%;max-height:none;object-fit:contain}

/* Spiel-Fenster: das TV-Gehaeuse aus der alten Startseite */
.win-game{width:min(94vw,760px);max-height:min(94svh,980px)}
.tv{background:var(--tv);padding:22px 22px 18px;box-shadow:inset 0 0 0 3px var(--tv-dark);position:relative}
.tv-top{display:flex;justify-content:flex-end;gap:8px;margin-bottom:10px;padding-right:4px}
.tv-dot{width:8px;height:8px;border-radius:50%;background:var(--tv-dark)}
.tv-screen{position:relative;aspect-ratio:4/3;background:var(--screen);overflow:hidden;box-shadow:inset 0 0 0 7px #1c1a16,inset 0 0 26px rgba(0,0,0,.85)}
.tv-screen canvas{width:100%;height:100%;display:block;image-rendering:pixelated;touch-action:manipulation}
.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,.16) 2px,rgba(0,0,0,.16) 3px)}
.tv-screen::before{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 40px rgba(0,0,0,.5)}
.hud{position:absolute;top:6px;left:8px;font-family:"Press Start 2P",monospace;font-size:9px;color:#d7f3d7;text-shadow:0 0 4px #3fae55;z-index:2;pointer-events:none}
.hint{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-family:"Press Start 2P",monospace;font-size:7px;letter-spacing:.06em;color:#bfe8c4;opacity:.85;z-index:2;pointer-events:none}
.msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"Press Start 2P",monospace;font-size:clamp(14px,4vw,20px);color:#fff;text-shadow:0 0 8px #000;opacity:0;transition:opacity .15s;z-index:3;pointer-events:none}
.msg.show{opacity:1}
.overlay{position:absolute;inset:0;background:rgba(6,14,8,.86);display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:4;cursor:pointer}
.overlay.show{display:flex}
.overlay p{margin:0;font-family:"Press Start 2P",monospace;color:#fff;font-size:clamp(11px,3.4vw,15px);text-align:center;line-height:1.6;padding:0 10px}
.overlay span{font-family:"Press Start 2P",monospace;color:#7fe38a;font-size:9px;letter-spacing:.06em}
.coin{font-family:"Press Start 2P",monospace;font-size:11px;letter-spacing:.08em;color:#ffd35c!important;animation:blink 1s steps(1) infinite}
.overlay button{font-family:"Press Start 2P",monospace;font-size:10px;letter-spacing:.06em;color:#06170a;background:#7fe38a;border:0;border-radius:4px;padding:10px 16px;cursor:pointer;box-shadow:0 3px 0 #3f9a4c;-webkit-tap-highlight-color:transparent}
.overlay button:active{transform:translateY(2px);box-shadow:0 1px 0 #3f9a4c}
.overlay button span{color:inherit;font-size:inherit;letter-spacing:inherit}
.controls{display:flex;gap:10px;justify-content:center;padding:12px 6px 0}
.btn{flex:1;max-width:200px;font-family:"Press Start 2P",monospace;font-size:18px;padding:16px 0;border:0;border-radius:6px;background:#b5443b;color:#fff;box-shadow:0 4px 0 #7a2a24;cursor:pointer;-webkit-tap-highlight-color:transparent}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #7a2a24}
.btn:nth-child(2){background:#2f7d3a;box-shadow:0 4px 0 #1f5226}
.btn:nth-child(2):active{box-shadow:0 1px 0 #1f5226}
.tv-base{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:12px 6px 0}
.knob{width:14px;height:14px;border-radius:50%;background:var(--tv-dark);box-shadow:inset 0 -2px 3px rgba(0,0,0,.3)}
.speaker{flex:1;height:12px;background:repeating-linear-gradient(90deg,var(--tv-dark) 0 3px,transparent 3px 7px);border-radius:2px;max-width:120px}

/* Kontaktformular */
.field{display:block;width:100%;height:42px;margin-bottom:14px;border:0;border-bottom:2px solid var(--tv-dark);background:transparent;color:var(--ink);font:20px VT323,monospace;padding:0 4px;outline:0}
select.field{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--tv-dark) 50%),linear-gradient(135deg,var(--tv-dark) 50%,transparent 50%);background-position:calc(100% - 16px) 20px,calc(100% - 10px) 20px;background-size:6px 6px;background-repeat:no-repeat}
.message{width:100%;min-height:100px;margin-bottom:16px;border:2px solid var(--tv-dark);background:#fff;color:var(--ink);padding:10px;font:20px VT323,monospace;outline:0;resize:vertical}
.check{display:flex;gap:10px;align-items:center;font-size:17px;margin-bottom:20px;color:var(--muted)}
.check input{width:18px;height:18px;margin:0;flex-shrink:0}
.send{display:block;margin:0 auto;font-family:"Press Start 2P",monospace;font-size:12px;padding:12px 26px;border:0;background:var(--ink);color:var(--bg);cursor:pointer;box-shadow:0 4px 0 #444;-webkit-tap-highlight-color:transparent}
.send:active{transform:translateY(3px);box-shadow:0 1px 0 #444}

/* FAQ im Fenster */
.faq-group{margin-bottom:22px}
.faq-group>h3{color:var(--muted);font-size:9px}
.faq-item{border:3px solid var(--tv-dark);background:var(--tv);box-shadow:4px 4px 0 var(--tv-dark);margin-bottom:12px}
.faq-q{width:100%;display:flex;align-items:flex-start;gap:10px;text-align:left;background:transparent;border:0;padding:13px 12px;cursor:pointer;font-family:"Press Start 2P",monospace;font-size:8px;line-height:1.75;letter-spacing:.03em;color:var(--ink);-webkit-tap-highlight-color:transparent}
.faq-q .mark{flex-shrink:0;width:14px;color:#b5443b}
.faq-item.open .faq-q .mark{color:#2f7d3a}
.faq-a{display:none;padding:0 12px 14px 36px;font-size:19px;line-height:1.5;color:#33312d}
.faq-item.open .faq-a{display:block}
.faq-a p{margin:0 0 10px}

.mockup-badge{position:fixed;right:14px;bottom:60px;z-index:40;background:var(--ink);color:var(--bg);font-family:VT323,monospace;font-size:14px;padding:6px 10px}
.ck-reopen{bottom:60px}

@media(prefers-reduced-motion:reduce){.vinyl-disc,.play,.coin,.mini-screen .play{animation:none!important}}

/* --- Handy: lockeres Raster statt freier Positionen ----------------------- */
@media(max-width:1000px),(max-height:700px){
  .bar{padding:14px 14px}
  .bar-top{font-size:8px}
  /* Fusszeile laeuft im Fluss mit, sonst verdeckt sie die letzten Elemente. */
  .bar-bottom{position:static;padding:26px 14px 18px;border-top:2px solid var(--tv-dark);margin:0 14px}
  .desk{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 8px;justify-items:center;align-content:start;padding:78px 14px 20px;min-height:auto}
  .item{position:static;transform:none!important}
  .folder{width:70px;height:57px}
  .mini{width:150px}
  /* Video und Spiel zuerst, jeweils ueber die volle Breite */
  .pos-video,.pos-game{grid-column:span 2;order:-1}
  .win{width:100vw;height:100svh;max-height:none;left:0;top:0;transform:none;border-width:0;box-shadow:none}
  .win-video,.win-game{width:100vw}
  .win-bar{cursor:default}
  .mockup-badge{top:auto;bottom:8px;right:8px;font-size:12px}
  .ck-reopen{bottom:8px;left:8px}
}

/* --- Elfmeterkoenig Highscore ------------------------------------------ */
.hs-form{display:flex;gap:6px;width:min(260px,86%)}
.hs-name{flex:1;min-width:0;font-family:"Press Start 2P",monospace;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:#d7f3d7;background:#0b1f10;border:2px solid #7fe38a;border-radius:3px;padding:8px}
.hs-name::placeholder{color:#5d8f66}
.hs-name:focus{outline:2px solid #ffd35c;outline-offset:1px}
.hs-form button{padding:8px 10px;font-size:9px}
.hs-form button:disabled{opacity:.5;cursor:wait}
.hs-status:empty{display:none}
.hs{width:min(300px,86%);font-family:"Press Start 2P",monospace;color:#d7f3d7}
.hs-title{display:block;text-align:center;margin-bottom:6px;color:#ffd35c!important}
.hs-list{list-style:none;margin:0;padding:0;counter-reset:hs;font-size:8px;line-height:1.2}
.hs-list li{display:flex;align-items:baseline;gap:8px;padding:4px 2px;border-bottom:1px dotted rgba(127,227,138,.3)}
.hs-list li:not(.hs-empty)::before{counter-increment:hs;content:counter(hs) ".";width:2.4em;opacity:.6}
.hs-list .hs-n{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit;font-size:inherit}
.hs-list .hs-s{color:#7fe38a;font-size:inherit}
.hs-list .hs-me{background:#ffd35c;color:#06170a}
.hs-list .hs-me .hs-s{color:#06170a}
.hs-empty{font-family:VT323,monospace;font-size:16px;opacity:.7;justify-content:center}

/* --- Ordner ziehen ------------------------------------------------------ */
@media(min-width:1001px) and (min-height:701px){
  .item{touch-action:none;user-select:none;-webkit-user-select:none}
  .item.dragging{cursor:grabbing;z-index:30}
  .item.dragging .folder,.item.dragging .mini{transform:translate(-3px,-3px);filter:drop-shadow(6px 6px 0 rgba(0,0,0,.25))}
}
#overlay{gap:10px;overflow-y:auto;padding:10px 0}

/* --- Hinweis: Ordner verschiebbar --------------------------------------- */
.drag-tip{position:fixed;left:50%;top:64px;z-index:45;display:flex;align-items:center;gap:12px;transform:translate(-50%,-8px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;font-family:"Press Start 2P",monospace;font-size:8px;letter-spacing:.06em;line-height:1.5;color:#f2efe6;background:#1b1b1b;padding:10px 10px 10px 14px;box-shadow:0 0 0 2px #1b1b1b,0 0 0 4px #ffd35c,6px 6px 0 rgba(0,0,0,.25)}
.drag-tip::before{content:"";width:8px;height:8px;flex-shrink:0;background:#ffd35c;animation:ck-blink 1.1s steps(1) infinite}
.drag-tip.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.drag-tip button{border:0;background:none;color:#ffd35c;font:inherit;font-size:10px;cursor:pointer;padding:2px 4px}
@media(max-width:1000px),(max-height:700px){.drag-tip{display:none}}
@media(prefers-reduced-motion:reduce){.drag-tip{transition:none}.drag-tip::before{animation:none}}

/* --- Kontaktformular: Captcha + Datenschutzhinweis ----------------------- */
.captcha{display:block;margin:4px 0 0}
.captcha-q{display:block;font-family:"Press Start 2P",monospace;font-size:8px;letter-spacing:.06em;line-height:1.6;margin:6px 0 4px}
.form-privacy{font-family:VT323,monospace;font-size:17px;line-height:1.3;opacity:.8;margin:8px 0}
.form-privacy a{color:inherit;text-decoration:underline}