/* =============================================================================================
   Schwärzwerk — gemeinsame Grundlage von index.html und pruefen.html.

   Hier steht, was auf beiden Seiten gleich aussehen muss: Schriften, Tokens, Typo-Skala, Kopf- und
   Fusszeile, Knöpfe, FAQ, Wartelistenkasten. Seitenspezifisches bleibt im <style> der jeweiligen
   Seite. SSOT der Werte ist second-brain/company/design-system.md.

   `datenschutz.html` hängt BEWUSST nicht mit drin. Die Seite bringt ihr eigenes, engeres Layout
   mit (760er Satzspiegel, kleinere Überschriften, keine Nav) und überschriebe die Hälfte von hier
   ohnehin wieder. Sie hat dadurch weiter eine eigene Schriftdefinition, was ein bekannter, kleiner
   Rest ist und kein Versehen.

   Warum eine Datei statt einer Kopie je Seite: die Kopie ist auseinandergelaufen. Der
   Schwärzungs-Check trug einen schwarzen statt blauen Hauptknopf und eine zweite, selbstgebaute
   FAQ, weil beides zweimal gepflegt werden musste. Wer die Tokens ändert, ändert sie jetzt einmal.

   Achtung bei Pfaden: url() löst RELATIV ZU DIESER DATEI auf, nicht zur HTML-Seite. Die Schriften
   liegen daneben, also `fonts/…` und nicht `assets/fonts/…`.
   ========================================================================================== */

/* =============================================================================================
   SCHRIFTEN — Geist + Geist Mono, variabel (100-900), SIL OFL, self-hosted.
   Eine Familie, Display vs. Body ist Gewicht + Tracking. Es gibt keine Serife.
   ========================================================================================== */
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/geist-latin-ext-wght-normal.woff2) format('woff2-variations');
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/geist-latin-wght-normal.woff2) format('woff2-variations');
  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:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/geist-mono-latin-ext-wght-normal.woff2) format('woff2-variations');
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/geist-mono-latin-wght-normal.woff2) format('woff2-variations');
  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;}

/* =============================================================================================
   TOKENS — SSOT: second-brain/company/design-system.md
   Ein Blau. Kühle Neutrale (alles Richtung 40,40,50). Radius 11.
   ========================================================================================== */
:root{
  --background:#eeedf0; --surface:#ffffff; --card:#ffffff; --paper:#f4f4f6; --secondary:#e4e3e8;
  --ink:#16161a; --ink-soft:#6b6b76; --ink-faint:#9a9aa4;
  --line:rgba(40,40,50,.10); --line-strong:rgba(40,40,50,.18);
  --highlight:#4d67d5; --highlight-deep:#4159c4; --highlight-bright:#8aa0ec;
  --success:#577b3b; --warning:#9c4c06; --error:#e13b59;
  --radius:11px; --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(20,20,30,.05), 0 2px 8px rgba(20,20,30,.04);
  --shadow-md:0 2px 4px rgba(20,20,30,.05), 0 12px 32px rgba(20,20,30,.07);
  --ink-panel:linear-gradient(165deg,#23232b 0%,#131318 100%);
  --wrap:1180px;
  /* Kategoriefarben = funktional, spiegeln exakt die Palette des Produkts (app/pdf_redactor.py).
     Kein dekorativer Zweitakzent: sie kodieren ausschließlich eine Datenart. */
  --c-PERSON:#5b8def; --c-ADDRESS:#3fb27f; --c-EMAIL:#a974e8; --c-PHONE:#e0913a;
  --c-IBAN:#e5544b; --c-BANK:#a86e33; --c-DATE:#7c8696; --c-AKTENZEICHEN:#16b3a4; --c-ORG:#6d6bef;
  --c-HEALTH:#e0559b; --c-RELIGION:#cf5be0; --c-AMOUNT:#e0b020; --c-FACE:#3aa9c9; --c-LOGO:#7a8b5a;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--background); color:var(--ink);
  font-family:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px; line-height:1.62; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:'cv11','ss01';
}
img,canvas{max-width:100%; display:block}
a{color:inherit}
button,input{font:inherit; color:inherit}

/* --- Typo-Skala: Tracking ist größenabhängig, je größer desto enger ------- */
h1,h2,h3,h4{margin:0; font-weight:500}
h1{font-size:clamp(38px,5.4vw,60px); line-height:1.04; letter-spacing:-.026em}
h2{font-size:clamp(27px,3.3vw,36px); line-height:1.12; letter-spacing:-.022em}
h3{font-size:17px; line-height:1.25; letter-spacing:-.012em; font-weight:550}
h4{font-size:13px; letter-spacing:-.005em; font-weight:550}
p{margin:0}
/* Betonung in Headlines = Farbe, nicht Kursiv. */
em{font-style:normal; color:var(--highlight)}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px}
section{padding:104px 0}
@media(max-width:760px){section{padding:72px 0}}

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Geist Mono',ui-monospace,monospace; font-size:11.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.09em; color:var(--highlight-deep);
}
.eyebrow .ix{
  font-variant-numeric:tabular-nums; color:var(--ink-faint);
  border:1px solid var(--line-strong); border-radius:5px; padding:1px 5px; letter-spacing:.04em;
}
.lede{font-size:16.5px; line-height:1.6; color:var(--ink-soft)}
.small{font-size:12.5px}
.mono{font-family:'Geist Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums}

/* .source — Mono-Kleintext unter jeder belegten Zahl. Ehrlichkeitskonvention. */
.source{
  font-family:'Geist Mono',ui-monospace,monospace; font-size:11.5px; line-height:1.5;
  color:var(--ink-faint); letter-spacing:-.01em;
}
.source a{color:var(--ink-faint); text-underline-offset:2px}

/* .chip — Status-Pille mit Punkt. Sagt, was in Produktion ist und was nicht. */
.chip{
  display:inline-flex; align-items:center; gap:6px; flex:none;
  font-family:'Geist Mono',ui-monospace,monospace; font-size:10.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.06em;
  padding:2.5px 8px 2.5px 7px; border-radius:99px; border:1px solid var(--line-strong);
  background:var(--paper); color:var(--ink-soft); white-space:nowrap;
}
.chip::before{content:''; width:5px; height:5px; border-radius:99px; background:currentColor}
.chip.live{color:var(--success); border-color:color-mix(in srgb,var(--success) 30%,transparent); background:color-mix(in srgb,var(--success) 8%,var(--surface))}
.chip.pilot{color:var(--warning); border-color:color-mix(in srgb,var(--warning) 30%,transparent); background:color-mix(in srgb,var(--warning) 8%,var(--surface))}
.chip.dev{color:var(--ink-faint)}

.sect-head{max-width:660px; margin-bottom:44px}
.sect-head h2{margin:14px 0 16px}

/* --- Buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:11px 19px; border-radius:var(--radius); border:1px solid transparent;
  font-size:14px; font-weight:500; letter-spacing:-.006em; text-decoration:none;
  cursor:pointer; transition:background .18s, border-color .18s, color .18s, transform .18s;
}
.btn svg{width:16px; height:16px; flex:none}
.btn-primary{background:var(--highlight); color:#fff}
.btn-primary:hover{background:var(--highlight-deep)}
.btn-outline{background:var(--surface); border-color:var(--line-strong); color:var(--ink)}
.btn-outline:hover{border-color:var(--ink-faint); background:var(--paper)}
.btn-ghost{background:transparent; color:var(--ink-soft); padding:9px 13px}
.btn-ghost:hover{color:var(--ink)}
.btn[disabled]{opacity:.45; pointer-events:none}
.btn:active{transform:translateY(1px)}

/* =============================================================================================
   NAV
   ========================================================================================== */
.nav{
  position:sticky; top:0; z-index:60; background:color-mix(in srgb,var(--background) 82%,transparent);
  backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .2s, background .2s;
}
.nav.scrolled{border-bottom-color:var(--line); background:color-mix(in srgb,var(--background) 92%,transparent)}
.nav-in{max-width:var(--wrap); margin:0 auto; padding:13px 28px; display:flex; align-items:center; gap:26px}
.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:550; letter-spacing:-.014em}
.seal{width:26px; height:26px; border-radius:7px; background:#fff; border:1.5px solid #16161a; display:grid; place-items:center; flex:none}
.seal i{display:block; width:14px; height:3.6px; border-radius:1.4px; background:#16161a}
.brand span{color:var(--ink-faint); font-weight:400}
.nav-links{display:flex; gap:22px; margin-left:auto; font-size:13.5px; color:var(--ink-soft)}
.nav-links a{text-decoration:none; transition:color .16s}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current]{color:var(--ink); font-weight:500}
@media(max-width:900px){.nav-links{display:none}}
/* Auf schmalen Geräten bricht „Schwärzwerk von Respeak" zweizeilig und schiebt die Navigation
   auseinander. Der Zusatz ist dort verzichtbar, die Marke bleibt lesbar. */
@media(max-width:430px){.brand span{display:none}}
.nav .btn{padding:8px 15px; font-size:13.5px; margin-left:auto}
@media(min-width:901px){.nav .btn{margin-left:0}}

/* =============================================================================================
   INK-PANEL — der dunkle Abschnitt. Beide Seiten benutzen ihn.
   ========================================================================================== */
.ink{background:var(--ink-panel); color:#f4f4f6; position:relative; overflow:hidden}
.grain{
  position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}
.ink .wrap{position:relative; z-index:1}
.ink .eyebrow{color:var(--highlight-bright)}
.ink em{color:var(--highlight-bright)}
.ink .lede{color:#b9b9c4}
.ink .source{color:#82828e}
.ink h2{color:#fff}

/* =============================================================================================
   FAQ — echte <details>, im DOM (crawlbar) + für KI/Chatbots faktendicht
   ========================================================================================== */
.faq{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:10px}
.faq details{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.faq details[open]{border-color:var(--line-strong)}
.faq summary{
  list-style:none; cursor:pointer; padding:16px 20px; display:flex; align-items:center; gap:14px;
  font-size:15px; font-weight:550; letter-spacing:-.01em; color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pl{margin-left:auto; flex:none; width:16px; height:16px; position:relative; transition:transform .2s}
.faq summary .pl::before,.faq summary .pl::after{
  content:''; position:absolute; top:50%; left:50%; width:12px; height:2px; border-radius:2px;
  background:var(--ink-faint); transform:translate(-50%,-50%);
}
.faq summary .pl::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary .pl{transform:rotate(45deg)}
.faq details[open] summary{color:var(--highlight-deep)}
.faq .a{padding:0 20px 18px; font-size:14px; line-height:1.62; color:var(--ink-soft); max-width:70ch}
.faq .a code{font-family:'Geist Mono',ui-monospace,monospace; font-size:12.5px; color:var(--ink-faint)}
:focus-visible.faq summary,.faq summary:focus-visible{outline:2px solid var(--highlight); outline-offset:-2px}

/* =============================================================================================
   WARTELISTE + FUSSZEILE
   ========================================================================================== */
.cta-card{background:var(--ink-panel); color:#f4f4f6; border-radius:var(--radius-lg); padding:52px 44px; position:relative; overflow:hidden; text-align:center}
@media(max-width:640px){.cta-card{padding:38px 24px}}
.cta-card .wrapin{position:relative; z-index:1; max-width:560px; margin:0 auto}
.cta-card h2{margin:14px 0 14px}
.cta-card em{color:var(--highlight-bright)}
.cta-card .eyebrow{color:var(--highlight-bright)}
.cta-card p{color:#b9b9c4; font-size:15px}
.cta-form{display:flex; gap:9px; margin:26px auto 0; max-width:440px}
@media(max-width:520px){.cta-form{flex-direction:column}}
.cta-form input[type=email]{
  flex:1; padding:11px 15px; border-radius:var(--radius); font-size:14px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); color:#fff;
}
.cta-form input[type=email]::placeholder{color:#7f7f8c}
.cta-form input[type=email]:focus{outline:none; border-color:var(--highlight-bright); background:rgba(255,255,255,.1)}
.cta-ok{display:none; margin-top:14px; font-size:13.5px; color:#9ed07a}
.cta-ok.on{display:block}
.cta-err{display:none; margin-top:14px; font-size:13.5px; color:#ffa0b0}
.cta-err.on{display:block}
.cta-sub{display:flex; justify-content:center; flex-wrap:wrap; gap:8px 22px; margin-top:24px; font-size:12.5px; color:#9a9aa6}
.cta-sub span{display:inline-flex; align-items:center; gap:7px}
.cta-sub svg{width:13px; height:13px}

footer{border-top:1px solid var(--line); padding:48px 0 30px; background:var(--paper)}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px}
@media(max-width:800px){.foot-grid{grid-template-columns:1fr 1fr; gap:26px}}
.foot-brand p{font-size:12.5px; color:var(--ink-soft); margin-top:12px; max-width:34ch}
.foot-col h5{margin:0 0 12px; font-family:'Geist Mono',ui-monospace,monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); font-weight:500}
.foot-col a{display:block; font-size:13px; color:var(--ink-soft); text-decoration:none; margin-bottom:8px}
.foot-col a:hover{color:var(--ink)}
.foot-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:38px; padding-top:20px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-faint)}

/* --- Reveal (nur Einblenden beim Eintritt, kein scrollgesteuertes Motion) -- */
.js .reveal{opacity:0; transform:translateY(14px)}
.js .reveal.in{opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1)}
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1 !important; transform:none !important}
  .bar .bt span{transition:none}
  *{scroll-behavior:auto !important}
}
:focus-visible{outline:2px solid var(--highlight); outline-offset:2px; border-radius:4px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:12px; z-index:99; background:var(--surface); padding:9px 14px; border-radius:var(--radius); border:1px solid var(--line-strong)}

/* =============================================================================================
   DARK — flippt die Neutralen, --highlight-deep wird zu --highlight-bright.
   ========================================================================================== */
@media(prefers-color-scheme:dark){
  :root{
    --background:#16161a; --surface:#1e1e24; --card:#1e1e24; --paper:#1a1a20; --secondary:#26262e;
    --ink:#f4f4f6; --ink-soft:#a3a3ae; --ink-faint:#75757f;
    --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16);
    --highlight-deep:#8aa0ec;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 2px 4px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.36);
  }
}