/* GLAESS Excel-Landkarte — Stylesheet
   Optik und Verhalten übernommen aus excel-landkarte-demo.html.
   Keine externen Abhängigkeiten, damit die CSP ohne Ausnahmen streng bleibt. */

/* Schriften — selbst gehostet, keine Anfrage an fonts.googleapis.com: die CSP
   erlaubt keine fremden Quellen, und sonst ginge die IP jedes Zuhörers an
   einen Dritten (siehe SECURITY.md). Beide Familien stehen unter der SIL Open
   Font License 1.1, die Lizenztexte liegen in assets/fonts/.
   Je Familie zwei Schnitte: "latin" lädt immer, "latin-ext" nur, wenn ein
   Zeichen daraus auf der Seite vorkommt. Fehlen die Dateien, greift der
   Fallback auf Systemschriften. */
@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight:400 800;font-stretch:100%;font-display:swap;font-style:normal;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  font-weight:400 800;font-stretch:100%;font-display:swap;font-style:normal;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-latin.woff2") format("woff2");
  font-weight:400 600;font-display:swap;font-style:normal;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-latin-ext.woff2") format("woff2");
  font-weight:400 600;font-display:swap;font-style:normal;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-latin.woff2") format("woff2");
  font-weight:400;font-display:swap;font-style:normal;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-latin-ext.woff2") format("woff2");
  font-weight:400;font-display:swap;font-style:normal;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#F2F5F8; --surface:#FFFFFF; --surface-2:#E9EEF3; --ink:#0F2232; --muted:#5A6B7B; --line:#D3DCE5;
  --brand:#005A9C; --brand-ink:#FFFFFF; --accent:#E8A000; --accent-ink:#231800;
  --rot:#CF3F35; --gelb:#E9B90E; --gruen:#2F8A57; --excel:#1D6F42; --mail:#E8A000;
  --grid:rgba(0,90,156,.08); --shadow:0 1px 2px rgba(15,34,50,.06),0 6px 18px rgba(15,34,50,.08);
  --f-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --f-body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0B1620; --surface:#122332; --surface-2:#18293A; --ink:#E5EDF4; --muted:#93A5B6; --line:#26394B;
  --brand:#4FA3E0; --brand-ink:#04121E; --accent:#F0B429; --accent-ink:#231800;
  --rot:#F0675C; --gelb:#F2CB3A; --gruen:#4CB57C; --excel:#3FA36B; --mail:#F0B429;
  --grid:rgba(79,163,224,.09); --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 22px rgba(0,0,0,.35); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0B1620; --surface:#122332; --surface-2:#18293A; --ink:#E5EDF4; --muted:#93A5B6; --line:#26394B;
  --brand:#4FA3E0; --brand-ink:#04121E; --accent:#F0B429; --accent-ink:#231800;
  --rot:#F0675C; --gelb:#F2CB3A; --gruen:#4CB57C; --excel:#3FA36B; --mail:#F0B429;
  --grid:rgba(79,163,224,.09); --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 22px rgba(0,0,0,.35); color-scheme:dark}

*{box-sizing:border-box}
/* Das hidden-Attribut muss stärker sein als jedes display aus diesen Regeln —
   sonst zeigen sich Bereiche wie die Sperrseite trotz hidden. */
[hidden]{display:none!important}
html{color-scheme:light dark}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55;margin:0;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:1120px;margin:0 auto}
h1,h2,h3{font-family:var(--f-display);line-height:1.08;text-wrap:balance;margin:0}
h2{font-size:clamp(1.5rem,3.2vw,2.1rem);font-weight:700;letter-spacing:-.01em}
h3{font-size:1.1rem;font-weight:700}
p{margin:0}
a{color:var(--brand)}
.eyebrow{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
section{padding-block:clamp(28px,5vw,56px)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.pt-s{padding-top:8px}
.mt-0{margin-top:0}
.mw-0{min-width:0}
.gap-18{display:grid;gap:18px}

/* Kopf */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:18px;flex-wrap:wrap}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.mark-logo{display:grid;place-items:center;width:38px;height:38px;border-radius:8px;background:var(--brand);color:var(--brand-ink);
  font-family:var(--f-display);font-weight:800;font-size:1.25rem;position:relative;overflow:hidden}
.mark-logo img,.mark-logo svg{width:100%;height:100%;object-fit:contain}
.mark-logo.is-placeholder::after{content:"";position:absolute;right:-3px;bottom:-3px;width:11px;height:11px;background:var(--accent);border-radius:2px}

/* Logo. Zwei Dateien statt `filter: invert()`: Das Invertieren würde auch die
   vier Markenpunkte umkehren — aus Blau würde Orange, aus Rot Grün. Eine
   Marke dreht man nicht um. In der hellen Fassung ist nur die Schrift weiß,
   die Punkte bleiben (siehe tools/logo-ableiten.php). */
.logo{display:block;height:34px;width:auto;max-width:min(60vw,260px);object-fit:contain}
.logo-fuer-dunkel{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo-fuer-hell{display:none}
  :root:not([data-theme="light"]) .logo-fuer-dunkel{display:block}
}
:root[data-theme="dark"] .logo-fuer-hell{display:none}
:root[data-theme="dark"] .logo-fuer-dunkel{display:block}
@media (max-width:480px){.logo{height:28px}}
.mark-name{font-family:var(--f-display);font-weight:800;font-size:1.15rem;letter-spacing:.04em;line-height:1}
.mark-name small{display:block;font-family:var(--f-body);font-weight:500;font-size:.72rem;letter-spacing:.02em;color:var(--muted);margin-top:3px}
.top-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.badge{font-family:var(--f-mono);font-size:.72rem;padding:5px 10px;border:1px dashed var(--accent);border-radius:999px;color:var(--ink);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.badge.ok{border-style:solid;border-color:var(--gruen);background:color-mix(in srgb,var(--gruen) 12%,transparent)}
.icon-btn{border:1px solid var(--line);background:var(--surface);border-radius:8px;width:38px;height:38px;display:grid;place-items:center;cursor:pointer;padding:0}
.icon-btn:hover{border-color:var(--brand)}
.icon-btn svg{width:18px;height:18px}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:end;padding-block:clamp(20px,4vw,44px) clamp(20px,3vw,32px)}
.hero h1{font-size:clamp(2.3rem,6.4vw,4.6rem);font-weight:800;letter-spacing:-.025em}
.hero h1 .strike{position:relative;white-space:nowrap}
.hero h1 .strike::after{content:"";position:absolute;left:-2%;right:-2%;top:55%;height:.09em;background:var(--accent);transform-origin:left;animation:strike .7s .5s var(--ease) both}
.hero .lead{margin-top:18px;font-size:clamp(1.05rem,1.8vw,1.25rem);max-width:58ch;color:var(--ink)}
.hero .lead b{font-weight:600;color:var(--brand)}
.fact{border-left:3px solid var(--accent);padding:4px 0 4px 18px;display:grid;gap:6px}
.fact-num{font-family:var(--f-display);font-weight:800;font-size:clamp(3rem,7vw,4.4rem);line-height:.95;color:var(--brand);font-variant-numeric:tabular-nums}
.fact-num span{font-size:.45em;color:var(--muted);font-weight:700}
.fact p{font-size:.98rem}
.fact cite{font-style:normal;font-size:.78rem;color:var(--muted)}
.privacy{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:.88rem;padding:8px 12px;border-radius:8px;background:var(--surface);border:1px solid var(--line)}
.privacy svg{flex:none;color:var(--gruen)}
.reveal{animation:rise .7s var(--ease) both}
.reveal.d1{animation-delay:.08s}.reveal.d2{animation-delay:.16s}.reveal.d3{animation-delay:.24s}
@keyframes rise{from{opacity:.001;transform:translateY(14px)}}
@keyframes strike{from{transform:scaleX(0)}}

/* Landkarte */
.mapbar{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.mapbar .firm{display:grid;gap:4px;min-width:0}
.firm-name{font-family:var(--f-display);font-weight:700;font-size:1.35rem}
.seg{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:4px}
.seg button{position:relative;z-index:1;border:0;background:none;padding:9px 18px;border-radius:7px;cursor:pointer;font-weight:600;font-size:.95rem;color:var(--muted);transition:color .3s}
.seg button[aria-pressed="true"]{color:var(--brand-ink)}
.seg .pill{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:7px;background:var(--brand);transition:transform .5s var(--ease)}
.seg[data-mode="order"] .pill{transform:translateX(100%)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--lvl,var(--muted));flex:none}

.map{position:relative;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden;transition:height .8s var(--ease);height:520px}
.map::before,.map::after{content:"";position:absolute;inset:0;pointer-events:none;transition:opacity .8s}
.map::before{background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:84px 26px;opacity:1}
.map::after{background-image:radial-gradient(var(--grid) 1.4px,transparent 1.5px);background-size:22px 22px;opacity:0}
.map.is-order::before{opacity:0}.map.is-order::after{opacity:1}
.map svg.lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transition:opacity .5s}
.map.is-order svg.lines{opacity:0}
.map svg.lines line{stroke:var(--mail);stroke-width:1.5;stroke-dasharray:5 5;opacity:.75}
.map svg.lines circle{fill:var(--mail)}
.dept{position:absolute;left:0;top:0;border-radius:10px;background:color-mix(in srgb,var(--brand) 5%,var(--surface));border:1px solid var(--line);opacity:0;transform:scale(.97);transition:opacity .5s,transform .6s var(--ease)}
.map.is-order .dept{opacity:1;transform:none;transition-delay:.35s}
.dept-h{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 10px 0;font-family:var(--f-display);font-weight:700;font-size:.95rem}
.dept-h span{font-family:var(--f-mono);font-weight:400;font-size:.72rem;color:var(--muted)}
.chip{position:absolute;left:0;top:0;height:52px;display:grid;grid-template-columns:26px minmax(0,1fr);align-items:center;gap:8px;padding:0 10px 0 8px;
  border:1px solid var(--line);border-radius:6px;background:var(--surface);cursor:pointer;text-align:left;box-shadow:var(--shadow);
  transition:transform .95s var(--ease),box-shadow .4s,border-color .3s;will-change:transform}
.chip:hover{border-color:var(--brand)}
.chip.sel{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 30%,transparent),var(--shadow)}
.chip .ic{width:24px;height:24px;border-radius:4px;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:.8rem;transition:background .4s,border-radius .4s}
.map.is-chaos .chip .ic{background:var(--excel);color:#fff}
.map.is-order .chip .ic{background:var(--lvl);border-radius:50%;color:transparent;transform:scale(.6)}
.chip .t{min-width:0;display:grid;line-height:1.2}
.chip .nm{font-size:.84rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip .fl{font-family:var(--f-mono);font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip .sub{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.map.is-chaos .chip .nm,.map.is-order .chip .fl{display:none}
.chip.pop{animation:pop .7s var(--ease)}
@keyframes pop{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 70%,transparent)}100%{box-shadow:0 0 0 18px transparent}}
.map-empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;color:var(--muted)}
.map-cta{position:absolute;right:max(14px,env(safe-area-inset-right,0px));bottom:14px;z-index:5;border:0;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:700;padding:11px 18px;cursor:pointer;box-shadow:var(--shadow);transition:transform .2s,opacity .3s}
.map-cta:hover{transform:translateY(-2px)}
.map.is-order .map-cta{opacity:0;pointer-events:none}
.map-caption{margin-top:10px;font-size:.88rem;color:var(--muted);max-width:70ch}

/* Detail und Auswertung */
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:20px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;min-width:0}
.panel h3{margin-bottom:12px}
.detail-empty{color:var(--muted);font-size:.95rem}
.lvl-rot{--lvl:var(--rot)}.lvl-gelb{--lvl:var(--gelb)}.lvl-gruen{--lvl:var(--gruen)}
.d-head{display:flex;justify-content:space-between;gap:12px;align-items:start}
.d-file{font-family:var(--f-mono);font-size:.8rem;color:var(--muted);word-break:break-all}
.d-zweck{margin:8px 0 12px;font-size:.95rem}
.meter{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:.88rem}
.meter-bar{flex:1;height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.meter-bar i{display:block;height:100%;background:var(--lvl);border-radius:99px;transition:width .6s var(--ease)}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;font-size:.88rem;margin:0}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:500}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tag{font-size:.75rem;font-weight:600;padding:4px 9px;border-radius:999px;background:color-mix(in srgb,var(--rot) 12%,transparent);color:var(--ink);border:1px solid color-mix(in srgb,var(--rot) 35%,transparent)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.stat b{display:block;font-family:var(--f-display);font-size:2rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.stat span{font-size:.8rem;color:var(--muted)}
.stack{display:flex;height:12px;border-radius:99px;overflow:hidden;background:var(--surface-2);margin-bottom:8px}
.stack i{display:block;height:100%;transition:flex-grow .6s var(--ease)}
.stack-l{display:flex;gap:14px;flex-wrap:wrap;font-size:.8rem;color:var(--muted);margin-bottom:18px}
.stack-l span{display:inline-flex;align-items:center;gap:6px}
.top3{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.top3 li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.top3 li:hover{border-color:var(--brand)}
.rank{font-family:var(--f-display);font-weight:800;font-size:1.3rem;color:var(--brand)}
.top3 .n{font-weight:600;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top3 .r{font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.score{font-family:var(--f-mono);font-size:.8rem;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:6px}
.d-act{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px}

/* Erfassungsbogen */
.form-head{display:grid;gap:10px;margin-bottom:22px;max-width:70ch}
form.bogen{display:grid;gap:18px;position:relative}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.fld{display:grid;gap:6px;min-width:0}
.fld>label,.fld legend{font-weight:600;font-size:.92rem;padding:0}
fieldset.fld{border:0;margin:0;padding:0}
.hint{font-size:.78rem;color:var(--muted)}
.hint.warn{color:var(--ink)}
.hint.warn::before{content:"!";display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:.7rem;margin-right:6px}
input[type=text],input[type=email],select,textarea{width:100%;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:10px 12px;min-width:0}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opts label{position:relative;cursor:pointer}
.opts input{position:absolute;opacity:0;pointer-events:none}
.opts span{display:block;padding:8px 13px;border:1px solid var(--line);border-radius:999px;font-size:.86rem;background:var(--surface);transition:background .2s,border-color .2s,color .2s}
.opts input:checked+span{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.opts input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.preview{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;border-radius:10px;background:var(--surface-2)}
.preview .dot{width:14px;height:14px}
.btn{border:0;border-radius:9px;padding:12px 20px;font-weight:700;cursor:pointer;transition:transform .15s,background .2s;text-align:center}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--brand);color:var(--brand-ink)}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--brand)}
.btn-danger{background:transparent;border:1px solid var(--rot);color:var(--ink)}
.btn-accent{background:var(--accent);color:var(--accent-ink)}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.err{color:var(--rot);font-size:.86rem;font-weight:600}
.ok-msg{color:var(--gruen);font-size:.86rem;font-weight:600}

/* Vorschau-Modus: Bogen sichtbar, aber gesperrt (D2) */
.locked{position:relative}
.locked fieldset,.locked input,.locked select,.locked textarea,.locked .btn-primary{pointer-events:none}
.locked fieldset,.locked .row2,.locked>.fld,.locked .preview{opacity:.45;filter:saturate(.4)}
.lock-note{display:grid;gap:10px;justify-items:start;padding:16px;border:1px dashed var(--brand);border-radius:12px;
  background:color-mix(in srgb,var(--brand) 6%,var(--surface))}
.lock-note b{font-family:var(--f-display);font-size:1.05rem}
.lock-note p{font-size:.92rem;color:var(--muted);max-width:62ch}

/* Freischaltung */
.gate{position:fixed;inset:0;z-index:60;display:none;place-items:center;padding:16px;
  background:color-mix(in srgb,var(--ink) 55%,transparent);backdrop-filter:blur(3px)}
.gate[open],.gate.on{display:grid}
.gate-box{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  width:min(460px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:clamp(20px,4vw,28px);display:grid;gap:16px}
.gate-box h2{font-size:1.5rem}
.gate-step{display:grid;gap:16px}
.gate-step[hidden]{display:none}
.gate-head{display:flex;justify-content:space-between;align-items:start;gap:12px}
.gate-close{border:0;background:none;cursor:pointer;color:var(--muted);font-size:1.4rem;line-height:1;padding:4px 8px;border-radius:6px}
.gate-close:hover{color:var(--ink);background:var(--surface-2)}
.check{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;font-size:.9rem;cursor:pointer}
.check input{width:22px;height:22px;margin:0;accent-color:var(--brand);cursor:pointer}
.check a{color:var(--brand)}
.honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Code-Eingabe: sechs Felder, ein Wert */
.code{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.code input{text-align:center;font-family:var(--f-mono);font-size:1.5rem;padding:12px 4px;letter-spacing:.05em;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);transition:border-color .2s,box-shadow .2s,transform .2s}
.code input:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent);transform:translateY(-1px)}
.code input.filled{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 6%,var(--surface))}
.code.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.code-ok .code input{border-color:var(--gruen);background:color-mix(in srgb,var(--gruen) 10%,var(--surface))}

/* Sperrseite */
.blocked{display:grid;gap:16px;padding:clamp(20px,4vw,36px);border:1px solid var(--line);border-radius:16px;background:var(--surface);margin-block:32px}
.blocked h2{color:var(--ink)}

/* Daten */
.data textarea{font-family:var(--f-mono);font-size:.76rem;min-height:120px;resize:vertical}
.merge-report{font-size:.86rem;color:var(--muted)}

/* Abschluss */
.cta{background:var(--brand);color:var(--brand-ink);border-radius:18px;padding:clamp(24px,4vw,44px);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:28px;align-items:center}
.cta h2{color:inherit}
.cta p{margin-top:12px;max-width:56ch;opacity:.92}
.cta .eyebrow{color:inherit;opacity:.8}
.steps{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.steps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:baseline}
.steps b{font-family:var(--f-display);color:var(--accent)}
.contact{background:var(--surface);color:var(--ink);border-radius:12px;padding:18px;display:grid;gap:10px}
.contact .line{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.contact .val{font-family:var(--f-mono);font-size:.88rem;user-select:all;word-break:break-all}
.copy{border:1px solid var(--line);background:var(--surface-2);border-radius:6px;padding:4px 10px;font-size:.78rem;cursor:pointer}
.consent-offer{margin-top:18px;padding:14px 16px;border-radius:12px;background:color-mix(in srgb,var(--surface) 92%,transparent);color:var(--ink);display:grid;gap:10px}

footer{padding-block:28px 40px;font-size:.8rem;color:var(--muted);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:32px}
footer nav{display:flex;gap:16px;flex-wrap:wrap}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,40px);opacity:0;background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:10px;font-weight:600;font-size:.9rem;z-index:70;transition:transform .4s var(--ease),opacity .3s;pointer-events:none;max-width:calc(100% - 32px)}
.toast.on{transform:translate(-50%,0);opacity:1}

/* Rechtstexte */
.legal{max-width:78ch;display:grid;gap:14px}
.legal h2{margin-top:18px}
.legal h3{margin-top:12px}
.legal ul{margin:0;padding-left:22px;display:grid;gap:6px}
.platzhalter{border-left:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);padding:12px 16px;border-radius:0 8px 8px 0;font-size:.9rem}

@media (max-width:820px){
  .hero,.grid2,.cta,.row2{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .code{gap:6px}
  .code input{font-size:1.25rem;padding:10px 2px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}