/* =====================================================================
   GuessU – Web Design System (1:1 zu den App-Tokens)
   ===================================================================== */

/* Selbst gehostete Schriften – keine Anfrage an Google/Dritte (DSGVO-sicher).
   Variable woff2 (auf Latin subsettet). */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/Fraunces-var.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;src:url('fonts/Fraunces-Italic-var.woff2') format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/HankenGrotesk-var.woff2') format('woff2');}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/SpaceMono-400.woff2') format('woff2');}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/SpaceMono-700.woff2') format('woff2');}

:root{
  --bg:#120E0A; --surface:#1E1711; --surface2:#282018;
  --bone:#F1E9DC; --muted:#9B8E7C; --line:rgba(241,233,220,.13);
  --coral:#FF5A33; --coral-deep:#E03C1E; --cobalt:#7B87FF;
  --green:#3DCC8E; --red:#FF5A5A; --gold:#FFB23C;
  --maxw:1180px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--bone);
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-size:18px; line-height:1.55; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---- Typo ---- */
.display{font-family:'Fraunces',Georgia,serif;font-weight:600;line-height:1.02;letter-spacing:-.02em}
.logo{font-family:'Fraunces',Georgia,serif;font-weight:700;letter-spacing:-.02em}
.mono{font-family:'Space Mono',ui-monospace,monospace}
.eyebrow{
  font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--muted);
}
.lead{color:var(--muted);font-size:clamp(17px,2.1vw,21px);max-width:54ch}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:700;font-size:16px;
  padding:15px 26px;border-radius:40px;border:0;cursor:pointer;
  background:var(--coral);color:#fff;
  box-shadow:0 10px 34px rgba(255,90,51,.32);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .2s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(255,90,51,.42)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;color:var(--bone);border:1.5px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:rgba(241,233,220,.4)}
.btn:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px}

/* ---- Nav ---- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;
  backdrop-filter:blur(10px);
  background:linear-gradient(var(--bg),rgba(18,14,10,.0));
  transition:background .3s,border-color .3s;border-bottom:1px solid transparent;
}
.nav.scrolled{background:rgba(18,14,10,.82);border-bottom:1px solid var(--line)}
.nav .logo{font-size:23px}
.logo-dot{color:var(--coral)}
.nav-cta{display:flex;gap:12px;align-items:center}
.nav-cta .btn{padding:11px 20px;font-size:14px}

/* ---- Sektionen ---- */
section{position:relative;z-index:2}
.pad{padding:clamp(86px,12vh,150px) 0}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---- Footer ---- */
footer{
  border-top:1px solid var(--line);padding:54px 0 70px;
  color:var(--muted);font-size:14px;position:relative;z-index:2;background:var(--bg)
}
footer .wrap{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:flex-start}
footer a{color:var(--muted)}
footer a:hover{color:var(--bone)}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}

/* ---- Karten/Chips (App-Elemente) ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:26px}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.04em;
  padding:7px 14px;border-radius:30px;border:1px solid var(--line);color:var(--muted)
}

@media (max-width:720px){
  body{font-size:17px}
  .nav-cta .label-hide{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}
  .reveal{transition:none;opacity:1;transform:none}
}

/* =====================================================================
   Sprachumschalter DE / EN  (additiv – nichts oben wurde entfernt)
   ===================================================================== */
.lang-switch{
  display:inline-flex;align-items:center;gap:2px;
  border:1px solid var(--line);border-radius:30px;padding:3px;
  background:rgba(30,23,17,.45);
}
.lang-switch button{
  font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.06em;
  color:var(--muted);background:transparent;border:0;cursor:pointer;
  padding:6px 11px;border-radius:24px;line-height:1;
  transition:color .2s,background .2s,box-shadow .2s;
}
.lang-switch button.on{color:#fff;background:var(--coral);box-shadow:0 6px 16px rgba(255,90,51,.34)}
.lang-switch button:hover:not(.on){color:var(--bone)}
.lang-switch button:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
/* kompakte Variante für die Rechtstexte-Seiten */
.legal-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:30px}
.legal-top .back{margin-bottom:0}

/* Rechtstexte mit zwei Sprachblöcken (App-Datenschutz / AGB) */
#legal .lang{display:none}
#legal.de .lang[data-lang="de"]{display:block}
#legal.en .lang[data-lang="en"]{display:block}