/* ============================================================
   Schriften — selbst gehostet. Kein externer Request,
   keine IP an Dritte. Das ist der Grund, nicht die Ladezeit.
   Quelle: Fontsource (Originaldateien der Foundries)
   Space Grotesk: SIL OFL 1.1 · IBM Plex: SIL OFL 1.1
   ============================================================ */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/space-grotesk-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/space-grotesk-latin-700-normal.woff2") format("woff2")}

@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2")}

@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}

/* ============================================================
   Landing — Slate Blue. Eigenstaendig, nichts geteilt.
   ============================================================ */
:root{
  --base:#0E1116;
  --surface:#161B22;
  --surface2:#1F2630;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.16);
  --text:#E6ECF2;
  --dim:#7E8A99;
  --accent:#E6B24C;
  --accent2:#4F9FE6;
  --glow:#7AC0FF;
  --ok:#4FD08A;
  --warn:#E67E4F;      /* Orange — traegt hier das Startdatum */

  --f-display:"Space Grotesk",system-ui,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;

  --pad:clamp(20px,5vw,64px);
  --max:1240px;
  --nav-h:62px;
}

html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{
  margin:0;background:var(--base);color:var(--text);
  font-family:var(--f-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
h1,h2{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(38px,6.2vw,74px);line-height:1.02}
h2{font-size:clamp(26px,3.2vw,40px);line-height:1.1}
p{margin:0}

.eyebrow{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);margin:0 0 18px;
}
.eyebrow b{color:var(--accent2);font-weight:500}

/* ---------- Header: gleiche Optik wie die Site, ohne Menuepunkte ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  background:rgba(14,17,22,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex;align-items:center;height:var(--nav-h)}
.nav .brand{margin-right:auto}
.brand{
  font-family:var(--f-display);font-weight:700;font-size:17px;letter-spacing:.16em;
  display:inline-flex;align-items:center;gap:10px;
}
.brand .ring{
  width:18px;height:18px;border:2px solid var(--accent);border-radius:50%;
  position:relative;flex:none;
}
.brand .ring::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--accent2)}
.brand-sm{font-size:15px}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding-top:var(--nav-h)}
#field{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,var(--base) 0%,rgba(14,17,22,.92) 34%,rgba(14,17,22,.15) 68%,rgba(14,17,22,.6) 100%);
}
.hero .wrap{position:relative;z-index:2;width:100%;padding-block:140px 100px}
.hero-copy{max-width:640px}
.hero h1 span{color:var(--accent)}
.hero .lead{font-size:clamp(16px,1.5vw,19px);color:var(--dim);margin-top:24px;max-width:520px}
.claim{
  font-family:var(--f-display);font-weight:700;font-size:clamp(20px,2.2vw,27px);
  letter-spacing:-.01em;margin-top:28px;
}
.claim span{color:var(--accent);letter-spacing:.08em}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* ---------- Startdatum ---------- */
.date-band{
  border-block:1px solid rgba(230,126,79,.35);
  background:linear-gradient(180deg,rgba(230,126,79,.10),rgba(230,126,79,.03));
  padding-block:clamp(32px,4vw,48px);
}
.date-inner{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.date-band .eyebrow{color:var(--warn)}
.date-big{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(30px,4.4vw,54px);line-height:1;letter-spacing:-.02em;color:var(--warn);
}
.date-sub{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:12px}
.date-right{display:flex;gap:clamp(18px,3vw,38px)}
.cd{text-align:right}
.cd b{
  display:block;font-family:var(--f-mono);font-size:clamp(22px,2.6vw,32px);
  font-weight:500;color:var(--text);line-height:1;font-variant-numeric:tabular-nums;
}
.cd span{
  display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin-top:8px;
}
@media(max-width:620px){ .date-inner{align-items:flex-start} .cd{text-align:left} }

/* ---------- Newsletter ---------- */
#notify{scroll-margin-top:calc(var(--nav-h) + 20px);padding-block:clamp(64px,8vw,110px)}
.notify{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:clamp(28px,4vw,48px)}
.notify h2{max-width:520px}
.notify>p{color:var(--dim);margin-top:14px;max-width:520px}

.form{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap;align-items:stretch}
.form input{
  background:var(--base);border:1px solid var(--line-strong);color:var(--text);
  font-family:var(--f-mono);font-size:13px;padding:13px 15px;border-radius:3px;
}
#mail{flex:1 1 260px;min-width:0}
.form input::placeholder{color:var(--dim)}
.form input:focus{outline:none;border-color:var(--accent)}
.form input.bad{border-color:var(--warn)}

.capbox{
  display:flex;align-items:center;gap:10px;background:var(--base);
  border:1px solid var(--line-strong);border-radius:3px;padding-left:14px;flex:0 0 auto;
}
.capbox:focus-within{border-color:var(--accent)}
.capq{
  font-family:var(--f-mono);font-size:13px;color:var(--dim);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
#cap{width:62px;border:none;background:none;padding-inline:0 14px;text-align:center}
#cap:focus{outline:none}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  padding:11px 20px;border-radius:3px;border:1px solid transparent;cursor:pointer;
  transition:background .15s,color .15s;white-space:nowrap;
}
.btn-ghost{border-color:var(--line-strong);color:var(--text);background:none}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-primary{background:var(--accent);color:#151009;font-weight:500}
.btn-primary:hover{background:#F3C466}
.btn:disabled{opacity:.5;cursor:default}

/* Honeypot: aus dem Blickfeld, aber nicht display:none (das erkennen Bots) */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.msg{font-family:var(--f-mono);font-size:12px;margin-top:16px;min-height:18px;letter-spacing:.05em}
.msg.ok{color:var(--ok)}
.msg.err{color:var(--warn)}
.fine-note{color:var(--dim);font-size:13px;margin-top:22px;max-width:560px}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);padding-block:40px}
.tagline{color:var(--dim);font-size:13px;margin-top:10px}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ---------- Einwilligung: Pflicht-Checkbox ---------- */
.consent{display:flex;gap:11px;align-items:flex-start;margin-top:20px;max-width:620px}
.consent input[type=checkbox]{
  appearance:none;-webkit-appearance:none;flex:none;
  width:17px;height:17px;margin:2px 0 0;border:1px solid var(--line-strong);
  border-radius:3px;background:var(--base);cursor:pointer;position:relative;
  transition:border-color .15s,background .15s;
}
.consent input[type=checkbox]:hover{border-color:var(--dim)}
.consent input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
.consent input[type=checkbox]:checked::after{
  content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid #151009;border-width:0 2px 2px 0;transform:rotate(43deg);
}
.consent input[type=checkbox].bad{border-color:var(--warn);box-shadow:0 0 0 3px rgba(230,126,79,.16)}
.consent label{color:var(--dim);font-size:13.5px;line-height:1.5;cursor:pointer}

/* ---------- Einwilligung: Pflicht-Checkbox ---------- */
.consent{display:flex;gap:11px;align-items:flex-start;margin-top:20px;max-width:620px}
.consent input[type=checkbox]{
  appearance:none;-webkit-appearance:none;flex:none;
  width:17px;height:17px;margin:2px 0 0;border:1px solid var(--line-strong);
  border-radius:3px;background:var(--base);cursor:pointer;position:relative;
  transition:border-color .15s,background .15s;
}
.consent input[type=checkbox]:hover{border-color:var(--dim)}
.consent input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
.consent input[type=checkbox]:checked::after{
  content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid #151009;border-width:0 2px 2px 0;transform:rotate(43deg);
}
.consent input[type=checkbox].bad{border-color:var(--warn);box-shadow:0 0 0 3px rgba(230,126,79,.16)}
.consent label{color:var(--dim);font-size:13.5px;line-height:1.5;cursor:pointer}

/* ---------- Dokumentseiten (privacy, spaeter legal/terms) ---------- */
h3{font-family:var(--f-display);font-weight:700;font-size:19px;letter-spacing:-.01em;margin:0}
.mono{font-family:var(--f-mono)}
.lnk-in{color:var(--accent2)}
.lnk-in:hover{color:var(--accent)}
.mt-1{margin-top:18px}

.phead{padding-block:calc(var(--nav-h) + 72px) 56px;border-bottom:1px solid var(--line)}
.phead h1{font-size:clamp(34px,4.8vw,58px)}
.phead p{color:var(--dim);margin-top:20px;max-width:660px;font-size:clamp(15px,1.4vw,18px)}
section{padding-block:clamp(64px,8vw,116px)}

.doc{display:grid;grid-template-columns:210px 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.doc-nav{position:sticky;top:calc(var(--nav-h) + 28px)}
.doc-nav a{
  display:block;font-family:var(--f-mono);font-size:12px;color:var(--dim);
  padding:7px 0 7px 12px;border-left:1px solid var(--line);letter-spacing:.04em;
}
.doc-nav a:hover{color:var(--text);border-left-color:var(--accent)}
.doc-body h2{font-size:clamp(22px,2.4vw,28px);margin-top:52px;scroll-margin-top:calc(var(--nav-h) + 24px)}
.doc-body h2:first-of-type{margin-top:0}
.doc-body h3{margin-top:30px}
.doc-body p{margin-top:14px;color:var(--dim);font-size:15px}
.doc-body ul{margin-top:14px;padding-left:20px;color:var(--dim);font-size:15px}
.doc-body li{margin-top:7px}
.doc-body strong{color:var(--text);font-weight:500}
.doc-body .stamp{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--dim);
  border:1px solid var(--line);border-radius:3px;padding:12px 14px;margin-bottom:34px;
}
.todo{
  background:rgba(230,126,79,.08);border:1px solid rgba(230,126,79,.35);
  border-radius:3px;padding:12px 14px;font-family:var(--f-mono);font-size:12px;
  color:var(--warn);margin-top:14px;letter-spacing:.03em;
}
@media(max-width:820px){
  .doc{grid-template-columns:1fr}
  .doc-nav{position:static;display:flex;flex-wrap:wrap;gap:4px 18px;border-bottom:1px solid var(--line);padding-bottom:18px}
  .doc-nav a{border-left:none;padding:4px 0}
}

.tbl-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:4px}
table{border-collapse:collapse;width:100%;min-width:560px;background:var(--surface)}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:top}
thead th{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);background:var(--surface2);
}
tbody th{font-weight:500;color:var(--text)}
tr:last-child th,tr:last-child td{border-bottom:none}