/* ============================================================
   DIKTAVO - editorial light
   Production stylesheet. Self-hosted, no external fonts or CDNs.
   ============================================================ */

/* ------------------------------------------------------------
   SELF-HOSTED FONTS
   Schibsted Grotesk: primary sans, used for display AND body.
   IBM Plex Mono: reserved for true data readouts only.
   Two @font-face per weight (latin-ext + latin) with unicode-range.
   Latin already covers German umlauts. font-display:swap.
   ------------------------------------------------------------ */

/* Schibsted Grotesk 400 */
@font-face{
  font-family:"Schibsted Grotesk";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/schibsted-400-latinext.woff2") format("woff2");
  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:"Schibsted Grotesk";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/schibsted-400-latin.woff2") format("woff2");
  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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Schibsted Grotesk 500 */
@font-face{
  font-family:"Schibsted Grotesk";font-style:normal;font-weight:500;font-display:swap;
  src:url("/fonts/schibsted-500-latinext.woff2") format("woff2");
  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:"Schibsted Grotesk";font-style:normal;font-weight:500;font-display:swap;
  src:url("/fonts/schibsted-500-latin.woff2") format("woff2");
  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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Schibsted Grotesk 600 */
@font-face{
  font-family:"Schibsted Grotesk";font-style:normal;font-weight:600;font-display:swap;
  src:url("/fonts/schibsted-600-latinext.woff2") format("woff2");
  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:"Schibsted Grotesk";font-style:normal;font-weight:600;font-display:swap;
  src:url("/fonts/schibsted-600-latin.woff2") format("woff2");
  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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Schibsted Grotesk 700 */
@font-face{
  font-family:"Schibsted Grotesk";font-style:normal;font-weight:700;font-display:swap;
  src:url("/fonts/schibsted-700-latinext.woff2") format("woff2");
  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:"Schibsted Grotesk";font-style:normal;font-weight:700;font-display:swap;
  src:url("/fonts/schibsted-700-latin.woff2") format("woff2");
  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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* IBM Plex Mono 400 */
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/plexmono-400-latinext.woff2") format("woff2");
  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:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/plexmono-400-latin.woff2") format("woff2");
  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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* IBM Plex Mono 500 */
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("/fonts/plexmono-500-latinext.woff2") format("woff2");
  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:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("/fonts/plexmono-500-latin.woff2") format("woff2");
  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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

*{box-sizing:border-box;margin:0;padding:0}

:root{
  --paper:#FBFBFD;
  --ink:#0B0C0F;
  --ink-2:#3A3D45;
  --ink-3:#5C606A;
  --line:#E2E3E8;
  --line-2:#CDCFD6;
  --cobalt:#1B4DFF;
  --cobalt-hover:#1443E6;
  --cobalt-ink:#12227A;
  --alert:#E5484D;
  --wash:#F1F2F6;
  --mono:"IBM Plex Mono","Consolas","SFMono-Regular","Menlo","Liberation Mono","Courier New",monospace;
  /* Schibsted Grotesk: self-hosted neo-grotesque for display AND body.
     Neo-grotesque fallbacks keep the same feel before the webfont swaps in. */
  --disp:"Schibsted Grotesk","Helvetica Neue","Arial","system-ui",sans-serif;
  --body:"Schibsted Grotesk","Helvetica Neue","Arial","system-ui",sans-serif;
  --maxw:1360px;
  --wide:1560px;
  --gut:clamp(18px,4vw,48px);
}

/* scroll-padding-top keeps anchor targets and keyboard focus clear of the 66px
   sticky header (WCAG 2.2 SC 2.4.11 Focus Not Obscured). */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;scroll-padding-top:80px}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.55;
  letter-spacing:-0.003em;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.wrap--wide{max-width:var(--wide)}

a{color:inherit;text-decoration:none}
img,svg{display:block}
img{max-width:100%;height:auto}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--paper);padding:12px 18px;
  font-family:var(--disp);font-weight:600;border-radius:0 0 3px 0;
}
.skip-link:focus{left:0}

/* Focus */
a:focus-visible,button:focus-visible,summary:focus-visible,.btn:focus-visible{
  outline:2.5px solid var(--cobalt);outline-offset:3px;border-radius:1px;
}

/* Type roles */
.disp{font-family:var(--disp);font-weight:700;letter-spacing:-0.02em;line-height:0.98}
.eyebrow{
  font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ink-3);display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--line-2);display:inline-block}
.eyebrow.on-cobalt{color:rgba(255,255,255,.88)}
.eyebrow.on-cobalt::before{background:rgba(255,255,255,.38)}

/* Buttons */
.btn{
  font-family:var(--disp);font-weight:600;letter-spacing:.01em;font-size:16px;
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 22px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  cursor:pointer;transition:transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease;
  border-radius:2px;
}
.btn:hover{transform:translateY(-1px)}
.btn--cobalt{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.btn--cobalt:hover{background:var(--cobalt-hover)}
.btn--big{padding:16px 26px;font-size:16.5px;border-radius:11px}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--link{background:transparent;border-color:transparent;color:var(--ink);padding:13px 6px}
.btn--link:hover{color:var(--cobalt)}
.btn svg{width:16px;height:16px}

/* Header download button.

   Der Knopf traegt dieselbe eckige Hauskante wie jeder andere Knopf der Seite,
   damit oben und unten nicht zwei Formsprachen nebeneinander stehen.

   Am Seitenanfang ist er ausgeblendet: dort steht der Hero-Knopf, und zwei
   gleichzeitige Downloadknoepfe teilen die Aufmerksamkeit ohne Gewinn. Sobald
   der Hero-Knopf nach oben aus dem Bild gescrollt ist, faehrt er ein und bleibt
   ab da der ständig erreichbare Weg zum Download.

   Der Versteckzustand haengt an .navcta-ready auf <html>. Die Klasse setzt app.js
   erst, wenn die Einblendlogik wirklich laeuft. Ohne JS, vor dem Skript oder nach
   einem Fehler bleibt der Knopf damit dauerhaft sichtbar. */
.nav__download{
  border-radius:2px;padding:11px 20px;font-size:15px;font-weight:600;letter-spacing:.005em;
  color:#fff;border:1px solid var(--cobalt);
  background:var(--cobalt);
  transition:transform .12s ease, background .15s ease, opacity .2s ease;
}
.nav__download:hover{
  background:var(--cobalt-hover);border-color:var(--cobalt-hover);transform:translateY(-1px);
}
.nav__download:active{transform:translateY(0) scale(.985)}
.nav__download svg{width:15px;height:15px}

.navcta-ready .nav:not(.is-past-hero) .nav__download{
  opacity:0;transform:translateY(-6px);pointer-events:none;
}
@media(prefers-reduced-motion:reduce){
  .nav__download{transition:opacity .2s ease}
  .navcta-ready .nav:not(.is-past-hero) .nav__download{transform:none}
}

/* ---------- NAV ---------- */
.nav{
  position:sticky;top:0;z-index:60;background:rgba(251,251,253,.86);
  backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);transition:box-shadow .2s ease;
}
.nav.is-stuck{box-shadow:0 6px 24px -18px rgba(11,12,15,.5)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:14px;height:66px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:700;
  font-size:22px;letter-spacing:-0.01em;flex:none}
.brand__mark{width:26px;height:26px}
.nav__links{display:flex;gap:30px;align-items:center}
.nav__links a{font-size:15px;color:var(--ink-2);letter-spacing:.01em}
.nav__links a:hover{color:var(--ink)}
.nav__cta{display:flex;align-items:center;gap:clamp(10px,1.6vw,18px);flex:none}

/* ---------- Sprachwahl ----------
   Ein <details> mit echten Links darin. Damit funktioniert das Menue ohne
   JavaScript, ist von Haus aus mit der Tastatur bedienbar, und jede Sprache
   ist ein Link, den man kopieren und teilen kann. Zwanzig Eintraege waeren als
   Knopfreihe unlesbar, deshalb eine aufklappende Liste in zwei Spalten. */
.lang{position:relative;display:inline-block;font-family:var(--body)}
/* Gleiche Hoehe und gleiche Kante wie der Download-Knopf daneben: zwei
   verschieden hohe Bedienelemente nebeneinander sind der Hauptgrund, warum
   eine Kopfzeile unruhig wirkt. */
.lang > summary{
  list-style:none;cursor:pointer;user-select:none;
  display:inline-flex;align-items:center;gap:7px;
  font-weight:600;font-size:13px;letter-spacing:.005em;color:var(--ink-3);
  border:1px solid var(--line);border-radius:2px;padding:9px 11px;line-height:1;
  transition:border-color .15s ease, color .15s ease;
}
.lang > summary::-webkit-details-marker{display:none}
.lang > summary:hover{color:var(--ink);border-color:var(--ink-3)}
.lang > summary svg{width:15px;height:15px;stroke:currentColor;fill:none;flex:none}
.lang > summary .lang__caret{width:9px;height:9px;opacity:.6;transition:transform .15s ease}
.lang[open] > summary .lang__caret{transform:rotate(180deg)}
.lang[open] > summary{color:var(--ink);border-color:var(--ink)}

/* Zwei Spalten mit einer Trennlinie in der Mitte, feste Zeilenhoehe, Kuerzel in
   eigener Spalte. Dadurch stehen Namen und Kuerzel auf durchgehenden Achsen,
   statt je Zeile zu wandern. */
.lang__menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:80;
  background:var(--paper);border:1px solid var(--line);border-radius:4px;
  box-shadow:0 24px 50px -30px rgba(11,12,15,.5);
  padding:6px;display:grid;grid-template-columns:repeat(2,minmax(146px,1fr));
  column-gap:13px;row-gap:0;
  max-height:min(62vh,420px);overflow:auto;
}
.lang__menu::before{
  content:"";position:absolute;top:12px;bottom:12px;left:50%;width:1px;
  background:var(--line);pointer-events:none;
}
[dir="rtl"] .lang__menu{right:auto;left:0}
.lang__menu a{
  display:grid;grid-template-columns:minmax(0,1fr) 20px;align-items:center;column-gap:10px;
  height:34px;padding:0 9px;border-radius:2px;
  font-size:14px;color:var(--ink-2);text-decoration:none;white-space:nowrap;
}
.lang__menu a > span:first-child{overflow:hidden;text-overflow:ellipsis}
.lang__menu a:hover{background:var(--wash);color:var(--ink)}
.lang__menu a[aria-current="true"]{background:var(--wash);color:var(--ink);font-weight:600}
.lang__code{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--line-2);text-align:right;
}
.lang__menu a:hover .lang__code{color:var(--ink-3)}
.lang__menu a[aria-current="true"] .lang__code{color:var(--cobalt)}

/* Hinweisstreifen, wenn die Seite in einer anderen Sprache vorliegt als der
   Browser erwartet. Kein Zwangswechsel: der Besucher entscheidet.
   Faehrt beim Erscheinen sanft von oben ein und beim Schliessen wieder hinaus. */
.langhint{
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--paper),var(--wash));
  color:var(--ink-2);
  transform:translateY(-100%);opacity:0;
  transition:transform .34s cubic-bezier(.22,.61,.36,1), opacity .34s ease;
  will-change:transform,opacity;
}
.langhint.is-in{transform:translateY(0);opacity:1}
.langhint.is-leaving{transform:translateY(-100%);opacity:0}
.langhint__in{
  display:flex;align-items:center;justify-content:center;gap:14px;
  flex-wrap:wrap;padding:11px var(--gut);max-width:var(--maxw);margin:0 auto;
}
.langhint__ic{
  display:inline-flex;color:var(--cobalt);flex:none;
}
.langhint__ic svg{width:18px;height:18px}
.langhint__txt{font-size:14px;font-weight:500;letter-spacing:.005em}

/* Hauptweg als kompakte, gefuellte Pille mit Pfeil, der beim Ueberfahren
   ein Stueck weiterwandert. */
.langhint__go{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--cobalt);color:#fff;font-weight:600;font-size:13.5px;
  padding:7px 14px;border-radius:999px;text-decoration:none;
  box-shadow:0 6px 16px -10px rgba(27,77,255,.8);
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.langhint__go:hover{background:var(--cobalt-hover);transform:translateY(-1px);
  box-shadow:0 10px 22px -10px rgba(27,77,255,.85)}
.langhint__go:active{transform:translateY(0) scale(.98)}
.langhint__arrow{width:15px;height:15px;transition:transform .15s ease}
.langhint__go:hover .langhint__arrow{transform:translateX(3px)}
[dir="rtl"] .langhint__arrow{transform:scaleX(-1)}
[dir="rtl"] .langhint__go:hover .langhint__arrow{transform:scaleX(-1) translateX(3px)}

/* Ablehnen als leises Kreuz, tritt erst beim Ueberfahren hervor. */
.langhint__x{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;
  background:transparent;color:var(--ink-3);
  transition:background .15s ease, color .15s ease;
}
.langhint__x svg{width:15px;height:15px}
.langhint__x:hover{background:rgba(11,12,15,.06);color:var(--ink)}

@media(prefers-reduced-motion:reduce){
  .langhint{transition:opacity .2s ease;transform:none}
  .langhint.is-leaving{transform:none}
  .langhint__go,.langhint__arrow{transition:none}
}
@media(max-width:560px){
  .langhint__in{gap:10px;padding:10px 16px}
  .langhint__txt{flex:1 1 100%;text-align:center;order:1}
  .langhint__ic{order:0}
  .langhint__go{order:2}
  .langhint__x{order:3;position:absolute;right:8px;top:8px}
  .langhint{position:relative}
}

.nav__burger{display:none;background:none;border:1px solid var(--line-2);border-radius:3px;
  cursor:pointer;padding:7px;width:44px;height:44px;align-items:center;justify-content:center}
.nav__burger svg{width:22px;height:22px;stroke:var(--ink);display:block}
.nav__burger .x{display:none}

@media(max-width:860px){
  .nav__links{display:none}
  .nav__cta .lang{display:none}
  .nav__burger{display:inline-flex}
  /* keep the "free" signal visible on mobile, tighten the button a touch */
  .nav__cta .btn{padding:11px 16px;font-size:15px}
}
/* Phones: drop the "free" suffix in the nav download button so brand +
   button + burger always fit on one line without wrapping or side scroll.
   The threshold is generous because the German label ("Herunterladen") is
   much longer than the English one ("Download"). */
@media(max-width:520px){
  .nav__cta .btn .long{display:none}
}
@media(max-width:400px){
  .nav__cta .btn{padding:10px 13px}
  .brand{font-size:20px;gap:9px}
  /* Reclaim the download arrow's width: the German label "Herunterladen"
     needs the whole content box on the smallest phones. The icon is pure
     decoration (the button text already says it downloads), so dropping it
     here removes ~26px (16px glyph + 9px gap) and gives the label margin
     to sit on one line without tipping into overflow. */
  .nav__cta .btn svg{display:none}
  .nav__cta .btn{gap:0}
}

/* Mobile menu sheet */
.mnav{
  position:fixed;inset:66px 0 0;z-index:55;background:var(--paper);
  border-top:1px solid var(--line);
  transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  display:flex;flex-direction:column;padding:6px var(--gut) 40px;overflow-y:auto;
}
.mnav.open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.mnav a.mnav__link{
  font-family:var(--disp);font-weight:700;letter-spacing:-0.02em;
  font-size:clamp(28px,7vw,40px);color:var(--ink);
  padding:22px 0;border-bottom:1px solid var(--line);display:flex;
  align-items:center;justify-content:space-between;
}
.mnav a.mnav__link span{font-family:var(--body);font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.mnav__foot{margin-top:auto;padding-top:30px;display:flex;flex-direction:column;gap:16px}
.mnav__foot .btn{justify-content:center}
.mnav__micro{font-family:var(--body);font-weight:500;font-size:12px;color:var(--ink-3);letter-spacing:.02em;text-align:center}
.mnav__lang{display:flex;justify-content:center}
/* Im mobilen Menue klappt die Sprachliste im Fluss auf, nicht schwebend,
   sonst laege sie ueber den Menuepunkten. */
.mnav__lang .lang{width:100%}
.mnav__lang .lang > summary{width:100%;justify-content:center;padding:13px 18px;font-size:14.5px}
.mnav__lang .lang__menu{position:static;max-height:none;box-shadow:none;margin-top:8px;
  border-color:var(--line)}
.mnav__lang .lang__menu a{padding:11px 10px;min-height:44px}
body.menu-open{overflow:hidden}

/* ---------- HERO ---------- */
.hero{border-bottom:1px solid var(--line);position:relative}
.hero__in{display:grid;grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);gap:clamp(32px,5vw,80px);
  padding-top:clamp(48px,7vw,100px);padding-bottom:clamp(44px,6vw,84px);align-items:center}
.hero__h1{
  font-family:var(--disp);font-weight:700;letter-spacing:-0.03em;line-height:0.92;
  font-size:clamp(46px,7.2vw,100px);margin:22px 0 0;
}
.hero__h1 .em{color:var(--cobalt)}
.hero__sub{font-size:clamp(17px,1.4vw,20px);color:var(--ink-2);max-width:32ch;margin-top:22px}
.hero__ctas{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:30px}
.hero__micro{font-family:var(--body);font-weight:500;font-size:12.5px;color:var(--ink-3);letter-spacing:.01em}
.hero__micro b{color:var(--ink);font-weight:600}
@media(max-width:860px){
  .hero__in{grid-template-columns:1fr;gap:clamp(30px,5vw,44px);
    padding-top:clamp(40px,7vw,64px);padding-bottom:clamp(36px,6vw,56px)}
  .hero__copy{max-width:none}
  /* On a stacked tablet the demo would otherwise stretch too wide; cap it and
     centre it so it stays a device, not a banner. */
  .demo{max-width:560px;margin-left:auto;margin-right:auto;width:100%}
  .hero__sub{max-width:46ch}
}

/* --- Signature demo device --- */
.demo{
  border:1px solid var(--line-2);border-radius:8px;background:#fff;
  box-shadow:0 1px 0 rgba(11,12,15,.03),0 30px 60px -34px rgba(11,12,15,.28);
  overflow:hidden;
}
.demo__bar{display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;
  border-bottom:1px solid var(--line);background:var(--wash)}
.demo__dot{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.demo__dot:nth-child(1){background:#E4636A}
.demo__dot:nth-child(2){background:#E8B23C}
.demo__dot:nth-child(3){background:#4FB477}
.demo__addr{margin-left:10px;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);
  letter-spacing:.02em}
.demo__cap{padding:14px clamp(16px,4.4vw,22px) 0;font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.demo__cap b{color:var(--cobalt);font-weight:600}
.demo__body{display:grid;grid-template-rows:auto auto;gap:0;position:relative}

/* Voice side */
.voice{padding:18px clamp(16px,4.4vw,22px) 20px;border-bottom:1px dashed var(--line-2);position:relative;
  background:linear-gradient(180deg,#fff,#FCFCFE)}
.voice__label{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;
  gap:10px;flex-wrap:wrap}
.tag{font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);display:flex;align-items:center;gap:8px;
  transition:color .35s ease}
.tag svg{stroke:currentColor;transition:stroke .35s ease}

/* small rec dot beside "You speak", visible only while recording */
.tag__rec{width:8px;height:8px;border-radius:50%;background:var(--alert);
  opacity:0;transform:scale(.6);transition:opacity .3s ease,transform .3s ease}

/* SPEAKING phase: voice side lights up recording red, clearly and strongly */
.voice.is-recording .tag--speak{color:var(--alert);font-weight:700}
.voice.is-recording .tag--speak svg{stroke:var(--alert)}
.voice.is-recording .tag__rec{opacity:1;transform:scale(1);
  animation:recBlink 1.1s ease-in-out infinite, recRing 1.5s ease-out infinite}
@keyframes recBlink{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes recRing{0%{box-shadow:0 0 0 0 rgba(229,72,77,.55)}
  70%{box-shadow:0 0 0 8px rgba(229,72,77,0)}100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}}

/* TYPING phase: written side becomes the active label in cobalt */
.written.is-active .tag--typed{color:var(--cobalt)}

/* Hotkey pill: at rest normally, PRESSED down only while recording, released after. */
.pill{display:inline-flex;align-items:center;gap:9px;padding:7px 12px;border-radius:999px;
  background:var(--ink);color:#fff;font-family:var(--mono);font-size:12px;letter-spacing:.02em;
  box-shadow:0 3px 10px -6px rgba(11,12,15,.5);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease}
.voice.is-recording .pill{transform:translateY(2px) scale(.95);background:#000;
  box-shadow:inset 0 3px 8px rgba(0,0,0,.55), 0 0 0 2px rgba(27,77,255,.35)}
.pill .rec{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.38);transition:background .16s ease}
.voice.is-recording .pill .rec{background:var(--cobalt);
  box-shadow:0 0 0 0 rgba(27,77,255,.6);animation:pulse 1.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(27,77,255,.55)}70%{box-shadow:0 0 0 8px rgba(27,77,255,0)}100%{box-shadow:0 0 0 0 rgba(27,77,255,0)}}
.wave{display:flex;align-items:center;gap:3px;height:52px;transition:opacity .35s ease}
.wave i{flex:1;background:var(--ink);border-radius:2px;height:14%;transform-origin:center;
  opacity:.85;transition:height .32s cubic-bezier(.4,0,.2,1),background .3s ease}
.wave.live i{animation:eq 900ms ease-in-out infinite}
.wave i:nth-child(3n){background:var(--cobalt)}
/* settled state: waveform collapses to a flat baseline as text takes over */
.wave.settled i{animation:none !important;height:8% !important;opacity:.35;background:var(--line-2)}
.wave.settled i:nth-child(3n){background:var(--line-2)}
@keyframes eq{
  0%,100%{height:14%}
  25%{height:70%}
  50%{height:34%}
  75%{height:92%}
}

/* travelling token that crosses the divider: makes spoken to written one motion */
.token{
  position:absolute;left:clamp(16px,4.4vw,34px);top:64px;z-index:3;
  max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis;
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:#fff;
  background:var(--cobalt);border-radius:999px;padding:4px 11px;white-space:nowrap;
  box-shadow:0 6px 18px -6px rgba(27,77,255,.6);
  opacity:0;transform:translateY(0) scale(.9);pointer-events:none;
}
.token.fly{animation:fly 900ms cubic-bezier(.5,0,.2,1) forwards}
@keyframes fly{
  0%{opacity:0;transform:translateY(0) scale(.85)}
  18%{opacity:1;transform:translateY(6px) scale(1)}
  70%{opacity:1;transform:translateY(96px) scale(1)}
  100%{opacity:0;transform:translateY(128px) scale(.9)}
}

/* Written side */
.written{padding:20px clamp(16px,4.4vw,22px) 22px}
.written__label{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.typed{
  font-family:var(--disp);font-weight:600;letter-spacing:-0.015em;line-height:1.14;
  font-size:clamp(22px,2.5vw,30px);color:var(--ink);min-height:2.28em;
}
.typed .caret{display:inline-block;width:3px;height:1.05em;background:var(--cobalt);
  margin-left:2px;vertical-align:-0.16em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.written__foot{display:flex;align-items:center;gap:14px;margin-top:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.written__foot .lat{color:var(--cobalt)}
.written__foot .app{display:inline-flex;align-items:center;gap:6px}
.written__foot svg{width:13px;height:13px;stroke:currentColor}
.written__foot .spec{margin-left:auto;color:var(--ink-3);letter-spacing:.02em}

/* ---------- TRUST ROW ---------- */
.trust{border-bottom:1px solid var(--line);background:#fff}
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin-left:calc(-1*var(--gut));margin-right:calc(-1*var(--gut))}
.trust__item{padding:26px var(--gut);display:flex;align-items:center;gap:15px;
  border-left:1px solid var(--line)}
.trust__grid .trust__item:first-child{border-left:0}
.trust__ic{flex:none;width:42px;height:42px;border-radius:10px;
  background:rgba(27,77,255,.08);display:flex;align-items:center;justify-content:center}
.trust__ic svg{width:22px;height:22px;stroke:var(--cobalt);fill:none;
  transition:stroke .25s ease}
.trust__txt{display:flex;flex-direction:column;min-width:0}
.trust__t{font-family:var(--disp);font-weight:600;font-size:15.5px;letter-spacing:-0.01em;color:var(--ink)}
.trust__s{font-size:12.5px;color:var(--ink-3);letter-spacing:.005em;margin-top:2px}
@media(max-width:860px){
  .trust__grid{grid-template-columns:1fr 1fr;margin:0}
  .trust__item{padding:22px var(--gut);border-left:1px solid var(--line);border-top:1px solid var(--line)}
  .trust__grid .trust__item:nth-child(odd){border-left:0}
  .trust__grid .trust__item:nth-child(-n+2){border-top:0}
}
/* Narrow phones and the cramped low end of the two-up band: one calm column so
   longer labels ("On-device processing") never wrap unbalanced beside the icon.
   Raised from 440 to 500 so the tight ~441px two-column case is avoided. */
@media(max-width:500px){
  .trust__grid{grid-template-columns:1fr}
  .trust__item{border-left:0}
  .trust__grid .trust__item:nth-child(odd){border-left:0}
  .trust__grid .trust__item:nth-child(-n+2){border-top:1px solid var(--line)}
  .trust__grid .trust__item:first-child{border-top:0}
}

/* ---------- SECTION scaffolding ---------- */
.sec{padding-top:clamp(52px,6vw,84px);padding-bottom:clamp(52px,6vw,84px);border-bottom:1px solid var(--line)}
.sec--wash{background:var(--wash)}
.sec__head{max-width:64ch}
.sec__title{font-family:var(--disp);font-weight:700;letter-spacing:-0.025em;
  font-size:clamp(32px,4.4vw,54px);line-height:1.0;margin-top:16px}
.sec__lede{color:var(--ink-2);font-size:clamp(16px,1.3vw,18.5px);margin-top:18px;max-width:52ch}

/* ---------- HOW (breaks the measure, wider) ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(44px,5vw,60px);
  border-top:2px solid var(--ink)}
.step{padding:36px clamp(24px,3vw,36px) 42px;border-left:1px solid var(--line);position:relative;background:#fff;
  display:flex;flex-direction:column}
.steps .step:first-child{border-left:0}
.step__n{font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.1em;color:var(--cobalt);
  display:flex;align-items:center;gap:10px}
.step__n::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}
.step__kicker{font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin:24px 0 6px}
.step__t{font-family:var(--disp);font-weight:600;font-size:clamp(22px,1.7vw,27px);letter-spacing:-0.02em;line-height:1.04}
.step__d{color:var(--ink-2);font-size:15.5px;max-width:34ch;margin-top:10px}
/* Glyph sits at the base of the cell; it must never clip. The inner SVG scales
   down to the column width and keeps its aspect ratio, so the drawn key / wave /
   text stays fully visible at every breakpoint (fixes the cut-off bug). */
.step__glyph{margin-top:auto;padding-top:28px;min-height:52px;display:flex;align-items:flex-end;gap:3px}
.step__glyph svg{stroke:var(--ink);max-width:100%;height:auto;overflow:visible}
.mini-wave{display:flex;align-items:flex-end;gap:2.5px;height:36px}
.mini-wave i{width:4px;background:var(--ink);border-radius:2px}
.mini-wave i:nth-child(3n){background:var(--cobalt)}
@media(max-width:820px){
  .steps{grid-template-columns:1fr}
  .step{border-left:0;border-top:1px solid var(--line)}
  .steps .step:first-child{border-top:0}
  .step__glyph{margin-top:24px}
}

/* ---------- FEATURES (bento) ----------
   Six-column bento, softer than boxed grids: rounded cells, generous
   whitespace, one dark hero cell and one cobalt accent cell leading the grid. */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.4vw,20px);align-items:stretch;
  margin-top:clamp(44px,5vw,60px)}
.bento__cell--dark,.bento__cell--cobalt{align-self:stretch}
.bento__cell{
  grid-column:span 2;border:1px solid var(--line);border-radius:14px;background:#fff;
  padding:clamp(26px,2.2vw,34px);display:flex;flex-direction:column;gap:18px;
  transition:box-shadow .25s ease,transform .25s ease,border-color .2s ease;
}
.bento__cell--2{grid-column:span 2}
.bento__cell--4{grid-column:span 4}
.bento__cell:hover{transform:translateY(-2px);border-color:var(--line-2);
  box-shadow:0 26px 52px -40px rgba(11,12,15,.4)}
.bento__body{display:flex;flex-direction:column}
.bento__ic{width:46px;height:46px;border-radius:11px;flex:none;
  background:rgba(27,77,255,.08);display:flex;align-items:center;justify-content:center}
.bento__ic svg{width:23px;height:23px;stroke:var(--cobalt);stroke-width:1.5;fill:none}
.bento__t{font-family:var(--disp);font-weight:600;font-size:clamp(19px,1.5vw,23px);
  letter-spacing:-0.02em;line-height:1.1}
.bento__d{color:var(--ink-2);font-size:15px;line-height:1.55;margin-top:9px;max-width:44ch}
.bento__stat{font-family:var(--disp);font-weight:700;letter-spacing:-0.04em;line-height:.9;
  font-size:clamp(44px,4.4vw,72px);margin-top:clamp(20px,2.4vw,30px);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.bento__stat span{font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:0;
  color:var(--ink-3)}
.bento__stat--ink{color:var(--ink)}
.bento__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.bento__tag{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.02em;
  border:1px solid var(--line-2);border-radius:999px;padding:5px 12px;color:var(--ink-3)}
/* Dark hero cell */
.bento__cell--dark{background:var(--ink);border-color:var(--ink);color:#fff}
.bento__cell--dark .bento__d{color:rgba(255,255,255,.72)}
.bento__cell--dark .bento__ic{background:rgba(255,255,255,.1)}
.bento__cell--dark .bento__ic svg{stroke:#fff}
.bento__cell--dark .bento__stat{color:#fff}
.bento__cell--dark .bento__stat span{color:rgba(255,255,255,.6)}
.bento__cell--dark:hover{box-shadow:0 30px 60px -38px rgba(11,12,15,.7)}
/* Cobalt accent cell */
.bento__cell--cobalt{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.bento__cell--cobalt .bento__d{color:rgba(255,255,255,.86)}
.bento__cell--cobalt .bento__ic{background:rgba(255,255,255,.16)}
.bento__cell--cobalt .bento__ic svg{stroke:#fff}
.bento__cell--cobalt:hover{box-shadow:0 30px 60px -38px rgba(27,77,255,.7)}
/* License split cell: text left, big stat right */
.bento__cell--split{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.bento__cell--split .bento__split{display:flex;flex-direction:column;gap:18px;min-width:0}
.bento__cell--split .bento__stat{margin-top:0}
@media(max-width:1000px){
  .bento{grid-template-columns:repeat(4,1fr)}
  .bento__cell--4{grid-column:span 4}
  .bento__cell--2{grid-column:span 2}
}
@media(max-width:620px){
  .bento{grid-template-columns:1fr;gap:14px}
  .bento__cell,.bento__cell--2,.bento__cell--4{grid-column:span 1}
  .bento__cell--split{flex-direction:column;align-items:flex-start}
}

/* ---------- COMPARISON (full-bleed dark band, two columns) ----------
   A calm dark band closes the "why local" argument. Restyled from variant B
   onto the current tokens: ink background, cobalt accents, Schibsted display. */
.cmp-sec{background:var(--ink);color:#fff;border-bottom:1px solid var(--ink);position:relative;overflow:hidden}
.cmp-sec::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(72% 100% at 88% 0%,rgba(27,77,255,.22),transparent 58%);
}
.cmp-sec .wrap{position:relative;z-index:1}
.cmp-sec .sec__title{color:#fff}
.cmp-sec .sec__lede{color:rgba(255,255,255,.66)}
.eyebrow.on-dark{color:rgba(255,255,255,.7)}
.eyebrow.on-dark::before{background:rgba(255,255,255,.4)}
.cmp2{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:clamp(40px,5vw,60px);
  border:1px solid rgba(255,255,255,.12);border-radius:14px;overflow:hidden}
.cmp2__col{padding:clamp(30px,3vw,46px)}
.cmp2__col--us{background:linear-gradient(180deg,rgba(27,77,255,.16),rgba(27,77,255,.04));
  border-right:1px solid rgba(255,255,255,.12)}
.cmp2__col--them{background:rgba(255,255,255,.02)}
.cmp2__flag{font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;display:block;margin-bottom:8px}
.cmp2__col--us .cmp2__flag{color:#8AA0FF}
.cmp2__col--them .cmp2__flag{color:rgba(255,255,255,.5)}
.cmp2__h{font-family:var(--disp);font-weight:700;font-size:clamp(22px,2vw,28px);
  letter-spacing:-0.03em;margin-bottom:22px}
.cmp2__list{list-style:none;display:flex;flex-direction:column}
.cmp2__list li{display:flex;gap:14px;align-items:flex-start;padding:16px 0;
  border-top:1px solid rgba(255,255,255,.1);font-size:15.5px;line-height:1.45}
.cmp2__list li:first-child{border-top:0}
.cmp2__col--them .cmp2__list li{color:rgba(255,255,255,.6)}
.cmp2__ic{width:20px;height:20px;flex:none;margin-top:1px;fill:none;stroke-width:2}
.cmp2__ic--yes{stroke:#8AA0FF}
.cmp2__ic--no{stroke:#6B6F7C}
@media(max-width:760px){
  .cmp2{grid-template-columns:1fr}
  .cmp2__col--us{border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}
}

/* ---------- PRICING ---------- */
.price{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px;align-items:stretch}
.card{border:1px solid var(--line-2);border-radius:8px;background:#fff;padding:30px 28px;
  display:flex;flex-direction:column}
.card--feat{border:1.5px solid var(--cobalt);background:linear-gradient(180deg,#fff,#FAFBFF);
  box-shadow:0 30px 60px -40px rgba(27,77,255,.5);position:relative}
.card__flag{position:absolute;top:-13px;left:28px;right:auto;background:var(--cobalt);color:#fff;
  font-family:var(--body);font-weight:600;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  padding:5px 11px;border-radius:3px;white-space:nowrap;max-width:calc(100% - 28px)}
.card__name{font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.card__price{font-family:var(--disp);font-weight:700;letter-spacing:-0.03em;line-height:1;
  font-size:clamp(40px,4.5vw,54px);margin:18px 0 2px}
.card__price small{font-family:var(--body);font-size:16px;font-weight:400;color:var(--ink-3);letter-spacing:0}
.card__note{color:var(--ink-3);font-size:13.5px;min-height:1.4em}
.card__list{list-style:none;margin:22px 0 26px;display:flex;flex-direction:column;gap:11px}
.card__list li{display:flex;gap:10px;font-size:14.5px;color:var(--ink-2);align-items:flex-start}
.card__list svg{width:16px;height:16px;stroke:var(--cobalt);stroke-width:1.8;fill:none;flex:none;margin-top:2px}
.card .btn{width:100%;justify-content:center;margin-top:auto}
.card__save{font-family:var(--body);font-weight:600;font-size:11.5px;color:var(--cobalt);margin-top:8px;letter-spacing:.02em}
/* Grosse Zahl = Monats-Aequivalenzpreis. Der echte Jahres-Gesamtpreis (49) steht
   direkt darunter klein, aber klar lesbar (nicht kleingedruckt): Gesamtpreis muss
   vor dem Kauf klar genannt sein, aber nicht die grosse Zahl sein. */
.card__total{font-family:var(--body);font-weight:600;font-size:13.5px;color:var(--ink-2);margin:2px 0 2px}
.js-approx{font-size:.5em;font-weight:600;color:var(--ink-3);vertical-align:.14em}
.card__renew{font-family:var(--body);font-weight:500;font-size:11.5px;color:var(--ink-3);margin-top:8px;line-height:1.45}
.card__foot-note{font-family:var(--body);font-weight:500;font-size:11px;color:var(--ink-3);margin-top:12px;text-align:center;letter-spacing:.02em}
.price__guarantee{margin-top:30px;text-align:center;font-family:var(--body);font-weight:500;font-size:12.5px;
  color:var(--ink-3);letter-spacing:.01em;display:flex;align-items:center;justify-content:center;gap:9px}
.price__guarantee svg{width:16px;height:16px;stroke:var(--cobalt);fill:none;flex:none}
@media(max-width:860px){
  .price{grid-template-columns:1fr;gap:26px}
  .card--feat{order:-1}
}

/* ---------- Two-plan layout + Monthly/Yearly toggle ---------- */
.price--two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;margin-left:auto;margin-right:auto}
@media(max-width:860px){ .price--two{grid-template-columns:1fr} }

.card__per{font-size:13px;color:var(--ink-3);letter-spacing:.01em}

.billing{margin-top:34px;display:flex;flex-direction:column;align-items:center;gap:10px}
/* inline-grid with two equal columns: both options same width, so the
   50 % sliding thumb lines up even though "Yearly" carries a save badge. */
.billing__track{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;
  border:1px solid var(--line-2);border-radius:999px;background:#fff}
.billing__opt{position:relative;z-index:1;border:0;background:transparent;cursor:pointer;
  font-family:var(--body);font-weight:600;font-size:14px;color:var(--ink-3);letter-spacing:.01em;
  padding:9px 20px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:color .22s ease}
.billing__opt.is-on{color:#fff}
.billing__opt:hover:not(.is-on){color:var(--ink)}
.billing__save{font-size:11px;font-weight:700;letter-spacing:.02em;padding:2px 7px;border-radius:999px;
  background:rgba(27,77,255,.12);color:var(--cobalt-ink);transition:background .22s ease,color .22s ease}
.billing__opt.is-on .billing__save{background:rgba(255,255,255,.22);color:#fff}
/* Sliding thumb: sits under the active option. Two options, so 50 % each. */
.billing__thumb{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);
  border-radius:999px;background:var(--cobalt);
  box-shadow:0 8px 20px -10px rgba(27,77,255,.7);
  transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.billing__track[data-billing="yearly"] .billing__thumb{transform:translateX(100%)}
.billing__track[data-billing="monthly"] .billing__thumb{transform:translateX(0)}
.billing__note{font-family:var(--body);font-weight:500;font-size:12.5px;color:var(--ink-3);
  letter-spacing:.01em;text-align:center;margin:0}
.price__signin{margin-top:24px;text-align:center;font-family:var(--body);font-weight:500;
  font-size:12.5px;color:var(--ink-3);letter-spacing:.01em}
@media(prefers-reduced-motion:reduce){ .billing__thumb{transition:none} }

/* ---------- FAQ (split: heading beside the list) ---------- */
.faq-split{display:grid;grid-template-columns:0.72fr 1.28fr;gap:clamp(32px,5vw,72px);align-items:start}
.faq-split__head{position:sticky;top:90px}
.faq-split__head .sec__title{margin-top:16px}
.faq-split__head .sec__lede{margin-top:18px}

/* Kontaktkarte statt nacktem Mail-Link: Symbol, Anlass und Adresse getrennt
   lesbar, Pfeil zeigt die Handlung. Ruhiger als die Sprachwahl-Pille, weil
   hier niemand zu einer Entscheidung gedraengt werden soll. */
.faq__contact{
  margin-top:16px;display:inline-flex;align-items:center;gap:13px;
  padding:13px 18px;border:1px solid var(--line-2);border-radius:10px;
  background:var(--paper);text-decoration:none;max-width:100%;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.faq__contact:hover{
  border-color:var(--cobalt);transform:translateY(-1px);
  box-shadow:0 12px 28px -18px rgba(27,77,255,.45);
}
.faq__contact:active{transform:translateY(0)}
.faq__contact-ic{
  flex:none;width:36px;height:36px;border-radius:9px;
  background:#EAF0FF;color:var(--cobalt);
  display:flex;align-items:center;justify-content:center;
}
.faq__contact-ic svg{width:18px;height:18px}
.faq__contact-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.faq__contact-label{font-size:12px;font-weight:600;letter-spacing:.02em;
  color:var(--ink-3);text-transform:uppercase}
.faq__contact-addr{font-size:15px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.faq__contact-arrow{flex:none;width:15px;height:15px;color:var(--ink-3);
  transition:transform .15s ease, color .15s ease}
.faq__contact:hover .faq__contact-arrow{transform:translateX(3px);color:var(--cobalt)}
@media(max-width:900px){
  .faq-split{grid-template-columns:1fr;gap:clamp(24px,4vw,36px)}
  .faq-split__head{position:static}
}

/* ---------- FAQ ---------- */
.faq{margin-top:44px;border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 40px 24px 0;position:relative;
  font-family:var(--disp);font-weight:600;font-size:clamp(18px,1.8vw,21px);letter-spacing:-0.01em;
  display:flex;gap:16px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary .fq{font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.06em;
  color:var(--ink-3);flex:none;transform:translateY(-1px)}
.faq summary::after{content:"";position:absolute;right:4px;top:28px;width:14px;height:14px;
  background:
    linear-gradient(var(--ink),var(--ink)) center/14px 1.6px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/1.6px 14px no-repeat;
  transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] summary{color:var(--cobalt)}
.faq details[open] summary .fq{color:var(--cobalt)}
.faq details[open] summary::after{background:
    linear-gradient(var(--cobalt),var(--cobalt)) center/14px 1.6px no-repeat,
    linear-gradient(var(--cobalt),var(--cobalt)) center/1.6px 14px no-repeat}
.faq p{color:var(--ink-2);font-size:16px;max-width:66ch;padding:0 0 26px;margin-left:34px}
.faq p a{color:var(--cobalt);text-decoration:underline;text-underline-offset:2px}
@media(max-width:560px){.faq p{margin-left:0}}

/* ---------- FINAL CTA (centred dark band, variant B) ---------- */
.final{background:#0B0C0F;color:#fff;border:0}
.final .wrap{padding-top:clamp(68px,8vw,108px);padding-bottom:clamp(68px,8vw,108px);
  display:flex;flex-direction:column;align-items:center}
.final__in{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:44rem}
.final__eyebrow{justify-content:center}
.final__h{font-family:var(--disp);font-weight:700;letter-spacing:-0.03em;line-height:0.98;
  font-size:clamp(36px,5.4vw,68px);margin-top:22px}
.final__accent{color:var(--cobalt)}
.final__p{color:rgba(255,255,255,.72);margin-top:20px;font-size:clamp(16px,1.4vw,18.5px);max-width:42ch}
.final__ctas{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:34px}
.final .btn{background:var(--cobalt);color:#fff;border-color:var(--cobalt)}
.final .btn:hover{background:var(--cobalt-hover);border-color:var(--cobalt-hover)}
.final .btn.btn--ghost-on-cobalt{background:transparent;color:#fff;border-color:rgba(255,255,255,.32)}
.final .btn.btn--ghost-on-cobalt:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.7);color:#fff}
.final__micro{font-family:var(--body);font-weight:500;font-size:12.5px;color:rgba(255,255,255,.62);margin-top:20px;letter-spacing:.01em}
/* The typed echo sits quietly below the CTA as a live signature. */
.final__type{font-family:var(--disp);font-weight:700;letter-spacing:-0.02em;
  font-size:clamp(18px,2.2vw,26px);line-height:1.2;color:rgba(255,255,255,.92);
  text-align:center;margin-top:clamp(40px,5vw,64px);padding-top:clamp(28px,4vw,40px);
  border-top:1px solid rgba(255,255,255,.18);max-width:44rem;
  overflow-wrap:break-word;min-width:0}
.final__type .c{display:inline-block;width:2px;height:1em;background:var(--cobalt);vertical-align:-0.13em;
  margin-left:3px;animation:blink 1s steps(1) infinite}
.final__type .q{color:rgba(255,255,255,.5)}

/* ---------- FOOTER ---------- */
.foot{padding-top:56px;padding-bottom:40px}
.foot__top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;
  padding-bottom:34px;border-bottom:1px solid var(--line)}
.foot__brand{max-width:34ch}
.foot__brand .brand{margin-bottom:14px}
.foot__brand p{color:var(--ink-3);font-size:14.5px}
.foot__cols{display:flex;gap:clamp(32px,6vw,64px);flex-wrap:wrap}
.foot__col h4{font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:14px}
.foot__col a{display:block;color:var(--ink-2);font-size:14.5px;margin-bottom:7px;padding:2px 0}
.foot__col a:hover{color:var(--cobalt)}
.foot__bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:24px;font-family:var(--body);font-weight:500;font-size:12px;color:var(--ink-3);letter-spacing:.01em}
.foot__bot a:hover{color:var(--ink)}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .wave.live i,.pill .rec,.typed .caret,.final__type .c,.token,
  .pill,.tag__rec{animation:none}
  .wave i{height:44% !important}
  .btn:hover{transform:none}
  /* calm resolved state: no recording, written side reads as the result */
  .pill{transform:none;box-shadow:none}
  .tag__rec{display:none}
  .written .tag--typed{color:var(--cobalt)}
}

/* ============================================================
   SUBPAGE CHROME (legal + thank-you): simplified sticky header
   ============================================================ */
.subnav{
  position:sticky;top:0;z-index:60;background:rgba(251,251,253,.86);
  backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.subnav__in{display:flex;align-items:center;gap:20px;height:66px}
.subnav__back{
  font-family:var(--body);font-weight:500;font-size:12.5px;letter-spacing:.01em;color:var(--ink-3);
  display:inline-flex;align-items:center;gap:8px;transition:color .15s ease;
}
.subnav__back:hover{color:var(--ink)}
.subnav__back svg{width:14px;height:14px;stroke:currentColor;fill:none}
.subnav__spacer{margin-left:auto}
.subnav .lang{margin-left:0}
@media(max-width:560px){
  .subnav__back span{display:none}
  .subnav__in{gap:14px}
}

/* ============================================================
   LEGAL reading layout: narrow measure, calm hierarchy
   ============================================================ */
.legal{
  max-width:40rem; /* about 68 characters at this body size */
  margin:0 auto;
  padding-top:clamp(48px,7vw,84px);
  padding-bottom:clamp(64px,9vw,104px);
}
/* Rechtstexte liegen zweisprachig im selben HTML (data-lang-only="de"/"en").
   Die 18 uebrigen Sprachordner filtern beim Bauen bereits auf einen Block
   (tools/i18n-build.mjs); die englische Wurzelseite (website/legal/*.html)
   ist dagegen die unveraenderte Autorenquelle und enthaelt IMMER beide
   Bloecke - sie darf beim Build nie ueberschrieben werden (sonst waere beim
   naechsten Lauf kein deutscher Text mehr zum Bearbeiten da). Diese Regel
   blendet je nach <html lang> serverseitig unveraendert den falschen Block
   aus, greift ueberall (auch bei den schon gefilterten Ordnern, dort auf
   ohnehin leere Bloecke, harmlos) und ist reversibel/nicht destruktiv. */
html[lang="de"] [data-lang-only="en"],
html:not([lang="de"]) [data-lang-only="de"]{display:none}
.legal__eyebrow{
  font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);display:flex;align-items:center;gap:10px;margin-bottom:18px;
}
.legal__eyebrow::before{content:"";width:22px;height:1px;background:var(--line-2);display:inline-block}
.legal h1{
  font-family:var(--disp);font-weight:700;letter-spacing:-0.025em;line-height:1.02;
  font-size:clamp(32px,5vw,46px);color:var(--ink);
}
.legal .note{
  font-family:var(--body);font-weight:500;font-size:13px;line-height:1.6;letter-spacing:.005em;
  color:var(--ink-3);margin-top:18px;padding:14px 16px;
  background:var(--wash);border-left:2px solid var(--line-2);border-radius:0 3px 3px 0;
}
.legal .trans-note{
  font-size:14.5px;color:var(--ink-3);font-style:italic;margin-top:20px;
  padding-bottom:18px;border-bottom:1px solid var(--line);
}
.legal h2{
  font-family:var(--disp);font-weight:700;letter-spacing:-0.015em;line-height:1.15;
  font-size:clamp(20px,2.4vw,24px);color:var(--ink);
  margin-top:2.4em;padding-top:1.4em;border-top:1px solid var(--line);
}
.legal h2:first-of-type{margin-top:2em}
.legal h3{
  font-family:var(--disp);font-weight:600;font-size:17.5px;letter-spacing:-0.01em;
  color:var(--ink);margin-top:1.8em;
}
.legal p{color:var(--ink-2);font-size:16.5px;line-height:1.62;margin-top:1em}
.legal h2 + p,.legal h3 + p{margin-top:.85em}
.legal strong{color:var(--ink);font-weight:600}
.legal a{color:var(--cobalt);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px}
.legal a:hover{text-decoration-thickness:2px}
.legal ul{list-style:none;margin-top:1.1em;display:flex;flex-direction:column;gap:.9em}
.legal ul li{
  position:relative;padding-left:22px;color:var(--ink-2);font-size:16px;line-height:1.58;
}
.legal ul li::before{
  content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;
  background:var(--cobalt);border-radius:1px;
}
.legal ol{margin-top:1.1em;padding-left:1.3em;display:flex;flex-direction:column;gap:.7em}
.legal ol li{color:var(--ink-2);font-size:16px;line-height:1.58;padding-left:6px}
.legal ol li::marker{color:var(--cobalt);font-family:var(--body);font-weight:600;font-size:14px}
.legal code{
  font-family:var(--mono);font-size:.9em;background:var(--wash);
  padding:2px 6px;border-radius:3px;color:var(--ink);
}
.legal address{font-style:normal;color:var(--ink-2);font-size:16.5px;line-height:1.7}
.legal__foot{margin-top:3em;padding-top:1.6em;border-top:1px solid var(--line)}
.legal__foot a{
  font-family:var(--body);font-weight:500;font-size:13px;letter-spacing:.01em;color:var(--ink-3);
  text-decoration:none;display:inline-flex;align-items:center;gap:8px;
}
.legal__foot a:hover{color:var(--cobalt)}
.legal__foot svg{width:14px;height:14px;stroke:currentColor;fill:none}

/* ============================================================
   THANK-YOU page
   ============================================================ */
.thanks{
  max-width:40rem;margin:0 auto;
  padding-top:clamp(56px,9vw,104px);padding-bottom:clamp(64px,9vw,104px);
}
.thanks__eyebrow{
  font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cobalt);display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;
}
.thanks__eyebrow svg{width:16px;height:16px;stroke:var(--cobalt);fill:none;flex:none}
.thanks h1{
  font-family:var(--disp);font-weight:700;letter-spacing:-0.025em;line-height:1.02;
  font-size:clamp(34px,5.5vw,52px);color:var(--ink);
}
.thanks__lead{color:var(--ink-2);font-size:clamp(17px,1.4vw,19px);line-height:1.58;
  margin-top:20px;max-width:38ch}
.thanks__steps{
  list-style:none;counter-reset:step;margin:36px 0 0;border-top:2px solid var(--ink);
}
.thanks__steps li{
  counter-increment:step;position:relative;
  padding:22px 0 22px 52px;border-bottom:1px solid var(--line);
  color:var(--ink-2);font-size:16.5px;line-height:1.55;
}
.thanks__steps li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:22px;
  font-family:var(--body);font-size:12px;letter-spacing:.06em;color:var(--cobalt);
  font-weight:600;
}
.thanks__steps a{color:var(--cobalt);text-decoration:underline;text-underline-offset:2px}
.thanks__steps strong{color:var(--ink);font-weight:600}
.thanks__foot{
  font-family:var(--body);font-weight:500;font-size:12.5px;line-height:1.7;color:var(--ink-3);
  letter-spacing:.005em;margin-top:28px;
}
.thanks__foot a{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
.thanks__foot a:hover{color:var(--cobalt)}
.thanks__cta{margin-top:32px}

/* ============================================================
   ADDITIVE POLISH LAYER
   Structural texture, scroll reveals, refined hovers, and an
   upgraded FAQ. Additive only: no layout, order, or color-system
   changes. Every effect degrades gracefully and respects
   prefers-reduced-motion.
   ============================================================ */

/* ---- Quiet structural texture ----
   A faint dot grid, barely there, so the large calm bands read as
   intentional negative space rather than empty. Sits behind content. */
.hero,.final{position:relative}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(11,12,15,.05) 1px,transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.7),transparent 72%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.7),transparent 72%);
}
.hero__in{position:relative;z-index:1}
/* A single hairline under the hero eyebrow line reads as an editorial register mark. */
.final::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1.4px);
  background-size:30px 30px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 78%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 78%);
}
.final .wrap{position:relative;z-index:1}

/* Faint section index label in the washed comparison band, so the
   wide empty margin above the table feels deliberate. */
.sec--wash{position:relative}
.sec--wash::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,var(--line-2),transparent 40%);pointer-events:none;
}

/* ---- Hero vertical rhythm: tighten and balance ---- */
.hero__copy{max-width:38rem}
.hero .eyebrow{margin-bottom:2px}
.hero__sub{line-height:1.5}
.hero__micro{display:inline-flex;align-items:center;gap:8px}
/* Der Punkt atmet: der Ring wird weit und wieder eng, gleichmaessig in beide
   Richtungen. Bewusst NICHT die Regel pulse weiter unten, die schiebt den Ring
   nach aussen und laesst ihn verschwinden, das wirkt wie ein Radarimpuls.
   Hier bleibt der Ring immer sichtbar, nur seine Weite und Tiefe wechseln. */
@keyframes atem{
  0%,100%{box-shadow:0 0 0 2px rgba(27,77,255,.10)}
  50%    {box-shadow:0 0 0 5px rgba(27,77,255,.22)}
}
.hero__micro::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--cobalt);
  flex:none;box-shadow:0 0 0 3px rgba(27,77,255,.14);
  animation:atem 3.2s ease-in-out infinite;
}
@media(prefers-reduced-motion:reduce){
  .hero__micro::before{animation:none;box-shadow:0 0 0 3px rgba(27,77,255,.14)}
}

/* ---- Refined hover micro-interactions ---- */
/* Buttons gain a whisper of depth on hover, calm on active. */
.btn{will-change:transform}
.btn--cobalt:hover,.btn--dark:hover{box-shadow:0 10px 24px -14px rgba(11,12,15,.55)}
.btn:active{transform:translateY(0) scale(.985)}

/* Step cells lift a hair on hover. (The feature grid uses .bento__cell,
   which carries its own hover lift where it is defined above.) */
.step{transition:background .2s ease,box-shadow .25s ease,transform .25s ease}
.step:hover{background:#fff;box-shadow:0 20px 40px -34px rgba(11,12,15,.4);
  transform:translateY(-2px);position:relative;z-index:1}

/* Pricing cards: gentle raise and border warm on hover. */
.card{transition:transform .25s ease,box-shadow .25s ease,border-color .2s ease}
.card:hover{transform:translateY(-3px);border-color:var(--line-2);
  box-shadow:0 26px 52px -38px rgba(11,12,15,.42)}
.card--feat:hover{border-color:var(--cobalt);
  box-shadow:0 34px 64px -40px rgba(27,77,255,.55)}

/* Trust row items warm their icon on hover for a touch of life. */
.trust__item{transition:background .2s ease}
.trust__item svg{transition:stroke .25s ease}
.trust__item:hover{background:rgba(27,77,255,.03)}
.trust__item:hover svg{stroke:var(--cobalt)}

/* ---- Scroll reveal ----
   The hidden start state is gated behind .reveal-ready on <html>, which
   app.js adds only once it is running and able to animate elements back
   in. Without JS, or before it runs, everything renders fully visible. */
.reveal-ready .reveal{opacity:0;transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.reveal-ready .reveal.is-in{opacity:1;transform:none}
/* Stagger children of a revealed group (steps, feats, cards). */
.reveal-ready .reveal-group > *{opacity:0;transform:translateY(18px);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
.reveal-ready .reveal-group.is-in > *{opacity:1;transform:none}
.reveal-ready .reveal-group.is-in > *:nth-child(2){transition-delay:.06s}
.reveal-ready .reveal-group.is-in > *:nth-child(3){transition-delay:.12s}
.reveal-ready .reveal-group.is-in > *:nth-child(4){transition-delay:.18s}
.reveal-ready .reveal-group.is-in > *:nth-child(5){transition-delay:.24s}
.reveal-ready .reveal-group.is-in > *:nth-child(6){transition-delay:.30s}

/* ---- FAQ upgrade ----
   Two-column arrangement on wide screens, a clearer plus/minus
   affordance, and a smooth height animation via grid-template-rows.
   Keeps native details/summary semantics and keyboard behaviour. */
.faq--grid{display:grid;grid-template-columns:1fr;gap:0 44px;
  border-top:2px solid var(--ink);align-content:start}
.faq--grid details{border-bottom:1px solid var(--line)}
.faq--grid summary{padding-right:44px}
/* Hide the old shared ::after glyph in the grid variant; use .faq__mark. */
.faq--grid summary::after{display:none}
.faq__q{flex:1}
.faq__mark{position:absolute;right:2px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;flex:none;
  background:
    linear-gradient(var(--ink),var(--ink)) center/16px 1.6px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/1.6px 16px no-repeat;
  transition:transform .28s cubic-bezier(.22,.61,.36,1),background .2s ease}
.faq--grid summary{align-items:center}
.faq--grid details[open] .faq__mark{transform:translateY(-50%) rotate(135deg);
  background:
    linear-gradient(var(--cobalt),var(--cobalt)) center/16px 1.6px no-repeat,
    linear-gradient(var(--cobalt),var(--cobalt)) center/1.6px 16px no-repeat}
/* Smooth open/close height: the body is a grid row that grows 0fr -> 1fr. */
.faq__body{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .32s cubic-bezier(.22,.61,.36,1)}
.faq__body > p{overflow:hidden;min-height:0;margin-left:34px;padding:0 0 24px}
.faq--grid details[open] .faq__body{grid-template-rows:1fr}
/* Keep the answer collapsed until opened even where details isn't [open]. */
.faq--grid details:not([open]) .faq__body > p{padding-bottom:0}
@media(min-width:820px){
  .faq--grid{grid-template-columns:1fr 1fr}
}
/* Inside the split layout the list sits in the narrower right column, so keep
   it a single column and remove its own top margin to align with the heading. */
.faq-split .faq--grid{grid-template-columns:1fr;margin-top:0}
@media(max-width:560px){
  .faq__body > p{margin-left:0}
  /* On phones a long question wraps to two lines; anchor the plus/minus mark to
     the first line (not the block centre) so it reads with the question, not
     stranded between the two lines. */
  .faq--grid summary{align-items:flex-start}
  .faq__mark{top:22px;transform:none}
  .faq--grid details[open] .faq__mark{transform:rotate(135deg)}
}

/* ---- Reduced motion: keep it all calm ---- */
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-group > *{opacity:1 !important;transform:none !important;transition:none !important}
  .step,.card,.btn,.trust__item,.bento__cell{transition:none}
  .step:hover,.card:hover,.card--feat:hover,.bento__cell:hover{transform:none}
  .faq__body{transition:none}
  .faq__mark{transition:none}
}

/* ============================================================
   RESPONSIVE POLISH LAYER
   Additive breakpoint hardening. Verified conceptually at
   360, 375, 414, 768, 1024, 1280, 1440, 1920. No layout,
   order, or color-system changes: only overflow safety,
   smoother fluid scaling, and comfortable touch targets.
   ============================================================ */

/* ---- 1. No sideways scroll, ever ----
   overflow-x:hidden clips; these rules stop content from
   demanding the width in the first place. Grid and flex text
   children default to min-width:auto, which lets a long word or
   an animated element push a track wider than its column. Reset
   that so every track can shrink to its column, and the page
   width is always the viewport width. */
/* max-width guard reinforces the existing overflow-x:hidden on
   html/body. We deliberately keep that hidden (not clip) so the
   sticky nav's containing block behaviour is unchanged. */
html,body{max-width:100%}
.hero__in,.trust__grid,.steps,.bento,.price,.faq--grid,
.final__in,.foot__top,.foot__cols,.nav__in,.written__foot,
.voice__label,.hero__ctas,.demo__cap{min-width:0}
.hero__in > *,.final__in > *,.foot__top > *{min-width:0}
/* Long unbroken strings (URLs, e-mail addresses in copy) wrap
   instead of stretching their container on the narrowest phones. */
.faq p a,.foot__col a,.hero__sub,.sec__lede,.final__p{overflow-wrap:break-word}

/* ---- 2. Hero: gentler headline floor and a safe demo ----
   The old floor (46px) is a touch tall at 360px in German, where
   "getippt." sits on its own line. A slightly lower floor with a
   fluid middle keeps the two-line lockup intact without shrinking
   the desktop size. */
.hero__h1{font-size:clamp(40px,10.5vw,86px)}
/* Smallest phones (<=380px): the German second line "Und schon getippt." at a
   40px floor in a ~324px box can spill onto a third line against the hard <br>.
   Drop the floor a touch here so the two-line lockup holds; still a commanding
   display size, and EN "See it typed." keeps two lines comfortably. */
@media(max-width:380px){
  .hero__h1{font-size:clamp(34px,9.6vw,40px)}
}
@media(min-width:861px){
  /* Once the grid is two columns, use the wider, more confident scale that
     fills the wide canvas (variant A proportion). */
  .hero__h1{font-size:clamp(46px,7.2vw,100px)}
}
/* The drawn window never dictates page width: it fills its column
   and its inner readouts wrap rather than push. */
.demo{max-width:100%}
/* The travelling token's fly path (top:64px + up to 128px) is calibrated to
   cross the voice/written divider at desktop demo proportions. On a narrow
   phone the demo fills the full column and the divider sits at a different y,
   so the token would land over the wrong text or overhang the pill. Its motion
   is a delight, not information (aria-hidden), so retire it below the tablet
   breakpoint; the spoken-to-written story still reads through the wave settle,
   the caret, and the label colour change. */
@media(max-width:620px){
  .token{display:none}
}
.written__foot{gap:10px 14px}
/* When the foot readout wraps, drop the auto-push so the spec label
   does not strand itself against a hard right edge on a narrow demo, and let
   the three mono readouts breathe onto tidy lines instead of a dense stack:
   the latency and cursor labels share the first line, the model spec takes the
   next, each with a hair more line spacing at a slightly smaller size. */
@media(max-width:420px){
  .written__foot{gap:8px 14px;font-size:11px;line-height:1.35}
  .written__foot .spec{margin-left:0;flex-basis:100%}
}

/* ---- 3. Nav fits from 360 up, in EN and the longer DE labels ----
   Below 400 the download label ("Herunterladen" in German) is the
   only elastic element; let it hold on one line while the brand and
   burger keep their fixed footprint, and tighten the row gap. */
@media(max-width:400px){
  .nav__in{gap:10px}
  .nav__cta{gap:8px}
  /* Icon hidden (see NAV block above); label holds one line, tight but safe. */
  .nav__cta .btn{white-space:nowrap;font-size:14px;padding:10px 12px;gap:0;min-height:44px}
  .nav__cta .btn svg{display:none}
  /* The longer German hotkey pill ("Halten . Strg+Leertaste") is tight in the
     demo label at this width; trim its horizontal padding and gap so it holds
     its line as long as possible, and left-align it when it does wrap so it
     reads as a tidy second line under "Sie sprechen", never a stranded chip. */
  .voice__label{justify-content:flex-start;column-gap:8px}
  .voice__label .tag{margin-right:auto}
  .voice__label .pill{padding:7px 9px;gap:7px}
}
@media(max-width:340px){
  .brand{font-size:18px}
  .nav__cta .btn{padding:9px 11px}
}

/* ---- 4. Comfortable touch targets on phones (min ~44px) ---- */
@media(max-width:860px){
  /* FAQ rows: the summary already runs tall through padding; make the
     hit area explicit and keep the mark clear of the text. */
  .faq summary{min-height:44px}
  /* Footer links get a little more vertical room to tap cleanly. */
  .foot__col a{padding:3px 0;margin-bottom:6px}
  /* Sprachwahl erreicht ueberall das Ziel von 44px Hoehe. */
  .lang > summary{min-height:44px}
  .lang__menu a{min-height:44px}
}

/* ---- 5. Tablet band (768 to ~1024): keep two-up grids honest ----
   Features and the FAQ are two columns here; make sure their inner
   copy never forces a horizontal scroll and the cells stay even. */
@media(min-width:561px) and (max-width:900px){
  .bento,.bento__cell{min-width:0}
}

/* ---- 6. Very wide screens (1440 to 1920): hold the measure ----
   Content already caps at --maxw / --wide and centres. Nudge the
   gutter up a touch past 1600 so the capped column is not marooned
   in an ocean of paper, keeping the editorial margin intentional. */
@media(min-width:1600px){
  :root{--gut:clamp(48px,5vw,72px)}
}

/* ============================================================
   MOTION: app marquee, count-up numbers, comparison check draw-in
   ============================================================ */
.countup{font-variant-numeric:tabular-nums}

.logos{padding:26px 0;border-bottom:1px solid var(--line);background:#fff;overflow:hidden}
.logos__label{text-align:center;font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 18px}
.logos__mask{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.logos__track{display:flex;gap:clamp(28px,4vw,56px);width:max-content;animation:marquee 34s linear infinite}
.logos__track span{font-family:var(--disp);font-weight:600;font-size:clamp(18px,1.8vw,24px);
  letter-spacing:-0.01em;color:var(--ink-2);white-space:nowrap}
.logos:hover .logos__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

.reveal-ready .cmp2__ic--yes path{stroke-dasharray:30;stroke-dashoffset:30}
.cmp2.is-in .cmp2__ic--yes path{animation:draw .5s cubic-bezier(.5,0,.2,1) forwards}
.cmp2.is-in .cmp2__list li:nth-child(2) .cmp2__ic--yes path{animation-delay:.1s}
.cmp2.is-in .cmp2__list li:nth-child(3) .cmp2__ic--yes path{animation-delay:.2s}
.cmp2.is-in .cmp2__list li:nth-child(4) .cmp2__ic--yes path{animation-delay:.3s}
@keyframes draw{to{stroke-dashoffset:0}}

@media(prefers-reduced-motion:reduce){
  .logos__track{animation:none}
  .reveal-ready .cmp2__ic--yes path{stroke-dashoffset:0}
}

/* ============================================================
   1.0.15 SECTIONS: accuracy, leaderboard, safeguards.
   Built on the existing tokens and reveal system. Additive only.
   ============================================================ */

/* ---- Shared feature-point list (accuracy + leaderboard) ---- */
.acc__points{list-style:none;display:flex;flex-direction:column;gap:22px;margin-top:clamp(28px,3vw,36px)}
.acc__points li{display:flex;gap:16px;align-items:flex-start}
.acc__ic{flex:none;width:42px;height:42px;border-radius:11px;
  background:rgba(27,77,255,.08);display:flex;align-items:center;justify-content:center}
.acc__ic svg{width:22px;height:22px;stroke:var(--cobalt);fill:none}
.acc__t{font-family:var(--disp);font-weight:600;font-size:17.5px;letter-spacing:-0.01em;color:var(--ink)}
.acc__d{color:var(--ink-2);font-size:15px;line-height:1.55;margin-top:5px;max-width:46ch}

/* ---- Accuracy: copy + auto-select engine panel ---- */
.acc{display:grid;grid-template-columns:1.02fr 0.98fr;gap:clamp(32px,5vw,72px);align-items:center}
.acc__panel{display:flex;justify-content:center;min-width:0}
.engine{width:100%;max-width:440px;border:1px solid var(--line);border-radius:16px;background:#fff;
  padding:clamp(22px,2.4vw,30px);box-shadow:0 30px 60px -46px rgba(11,12,15,.4)}
.engine__label{font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
.engine__ladder{list-style:none;display:flex;flex-direction:column;gap:12px}
.engine__row{display:grid;grid-template-columns:118px 1fr auto;gap:12px;align-items:center}
.engine__name{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);letter-spacing:.01em}
.engine__track{height:8px;border-radius:999px;background:var(--wash);overflow:hidden}
.engine__fill{display:block;height:100%;width:var(--w);border-radius:999px;background:var(--line-2)}
.engine__pick{font-family:var(--body);font-weight:600;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cobalt)}
.engine__row.is-active .engine__name{color:var(--ink);font-weight:500}
.engine__row.is-active .engine__fill{background:var(--cobalt)}
.engine__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--line)}
.engine__chip{font-family:var(--body);font-size:11.5px;font-weight:600;letter-spacing:.02em;
  border:1px solid var(--line-2);border-radius:999px;padding:5px 11px;color:var(--ink-3);white-space:nowrap}

/* ---- Leaderboard: board mock + copy ---- */
.lb{display:grid;grid-template-columns:0.95fr 1.05fr;gap:clamp(32px,5vw,72px);align-items:center}
.lb__panel{display:flex;justify-content:center;min-width:0}
.board{width:100%;max-width:440px;border:1px solid var(--line);border-radius:16px;background:#fff;
  padding:clamp(20px,2.2vw,26px);box-shadow:0 30px 60px -46px rgba(11,12,15,.4)}
.board__tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.board__tabs span{font-family:var(--body);font-weight:600;font-size:11.5px;letter-spacing:.02em;
  color:var(--ink-3);padding:6px 11px;border-radius:999px;background:var(--wash)}
.board__tabs .is-active{background:var(--ink);color:var(--paper)}
.board__rows{list-style:none;display:flex;flex-direction:column;gap:8px}
.board__row{display:grid;grid-template-columns:34px auto 1fr;gap:12px;align-items:center;
  padding:8px 10px;border-radius:10px}
.board__rk{font-family:var(--disp);font-weight:700;font-size:14px;color:var(--ink-3);text-align:center}
.board__who{display:flex;align-items:center;gap:9px}
.board__av{width:22px;height:22px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--line-2),var(--wash))}
.board__name{width:64px;height:8px;border-radius:999px;background:var(--line)}
.board__track{height:8px;border-radius:999px;background:var(--wash);overflow:hidden}
.board__fill{display:block;height:100%;width:var(--w);border-radius:999px;background:var(--line-2)}
.board__row--you{background:rgba(27,77,255,.06);outline:1px solid rgba(27,77,255,.18)}
.board__row--you .board__rk{color:var(--cobalt);font-size:12px;letter-spacing:.04em}
.board__row--you .board__av{background:linear-gradient(135deg,var(--cobalt),#7d97ff)}
.board__row--you .board__name{background:rgba(27,77,255,.28)}
.board__row--you .board__fill{background:var(--cobalt)}
.board__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.board__chip{font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--cobalt);
  background:rgba(27,77,255,.08);border-radius:999px;padding:5px 11px}
.board__meta{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.01em}

/* ---- Safeguards strip under the comparison table (dark band) ---- */
.cmp2__more{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.cmp2__more-label{font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.5);flex:none}
.cmp2__safe{list-style:none;display:flex;flex-wrap:wrap;gap:10px;min-width:0}
.cmp2__safe li{font-family:var(--body);font-size:13px;font-weight:500;letter-spacing:.005em;
  color:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.16);border-radius:999px;
  padding:8px 14px;background:rgba(255,255,255,.03)}

/* ---- Pricing sign-in note ---- */
.price__signin{margin-top:10px}

/* ---- Responsive: new sections ---- */
@media(max-width:900px){
  .acc,.lb{grid-template-columns:1fr;gap:clamp(28px,5vw,40px)}
  /* Copy leads, the abstract panel follows, on both stacked layouts. */
  .acc__copy,.lb__copy{order:1}
  .acc__panel,.lb__panel{order:2}
  .engine,.board{max-width:520px;margin:0 auto}
}
@media(max-width:520px){
  .engine__row{grid-template-columns:92px 1fr auto;gap:10px}
  .board__row{grid-template-columns:30px auto 1fr;gap:10px}
}

/* ============================================================
   VERSION ARCHIVE (versionen.html)
   Eigene Klassen statt .legal: dort ist alles auf 40rem Fliesstext ausgelegt,
   und .legal a faerbt jeden Link kobaltblau samt Unterstreichung. Die
   Downloadknoepfe sahen dadurch aus wie kaputte Textlinks auf schwarzem Kasten.

   Aufbau bewusst zweistufig statt einer gleichfoermigen Liste: die neueste
   Version bekommt einen eigenen Block mit offenen Aenderungen, weil fast jeder
   genau deswegen hier ist. Alles davor sind ruhige Zeilen. Eine Reihe
   identischer Eintraege las sich wie ein Datenbankauszug.
   ============================================================ */
.arch{
  max-width:min(64rem, 100%);
  margin:0 auto;
  padding-top:clamp(44px,6vw,76px);
  padding-bottom:clamp(64px,9vw,104px);
}

/* ---- Kopfbereich ---- */
.arch__title{
  font-family:var(--disp);font-weight:700;letter-spacing:-0.03em;line-height:1.02;
  font-size:clamp(36px,5.4vw,58px);color:var(--ink);margin:0;text-wrap:balance;
}
.arch__lead{
  font-family:var(--body);font-size:17px;line-height:1.6;color:var(--ink-2);
  margin:16px 0 0;max-width:38rem;text-wrap:pretty;
}
.arch__meta{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-family:var(--body);font-size:13px;color:var(--ink-3);margin:20px 0 0;
}
.arch__dot{width:3px;height:3px;border-radius:50%;background:var(--line-2);flex:none}

/* ---- Neueste Version: eigener Block ---- */
.arch__list{margin-top:clamp(32px,4.5vw,48px)}
.arch__state{font-family:var(--body);font-size:15px;color:var(--ink-3);padding:28px 0}
.arch__state a{color:var(--cobalt);text-decoration:underline;text-underline-offset:2px}

.arch__latest{
  /* Der Block traegt Kobalt als Flaeche, nicht nur als Akzentstrich: er ist die
     eine Sache, die Besucher hier wollen, und darf das auch zeigen. */
  background:var(--cobalt);color:#fff;border-radius:14px;
  padding:clamp(24px,3.4vw,34px);max-width:none;
}
.arch__latestHead{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.arch__latestIdent{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.arch__latestTag{
  font-family:var(--body);font-weight:600;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.42);border-radius:999px;padding:4px 10px;
}
.arch__latestNo{
  font-family:var(--disp);font-weight:700;font-size:clamp(28px,3.4vw,38px);
  letter-spacing:-0.03em;color:#fff;margin:0;
}
.arch__latestMeta{
  font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.92);
  margin:10px 0 0;letter-spacing:.01em;
}
.arch__latestNotes{
  list-style:none;margin:22px 0 0;padding:22px 0 0;
  border-top:1px solid rgba(255,255,255,.22);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:12px 30px;
}
.arch__latestNotes li{
  font-family:var(--body);font-size:14px;line-height:1.55;color:rgba(255,255,255,.94);
  padding-left:16px;position:relative;
}
.arch__latestNotes li::before{
  content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;
  background:rgba(255,255,255,.55);
}

/* ---- Aeltere Versionen ---- */
.arch__olderTitle{
  font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
  margin:clamp(40px,5vw,60px) 0 0;
}
.arch__rows{display:flex;flex-direction:column;margin-top:14px}
.arch__row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  column-gap:20px;row-gap:6px;padding:20px 2px;border-top:1px solid var(--line);
}
.arch__row:last-child{border-bottom:1px solid var(--line)}
.arch__no{
  grid-column:1;font-family:var(--disp);font-weight:700;font-size:19px;
  letter-spacing:-0.02em;color:var(--ink);margin:0;min-width:4.4rem;
}
.arch__meta{grid-column:2}
.arch__row .arch__meta{
  font-family:var(--mono);font-size:12px;color:var(--ink-3);margin:0;
  display:block;
}
.arch__more{grid-column:2;grid-row:2}
.arch__more summary{
  font-family:var(--body);font-size:12.5px;font-weight:600;color:var(--ink-3);
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:7px;padding:2px 0;
}
.arch__more summary::-webkit-details-marker{display:none}
.arch__more summary::before{
  content:"";width:6px;height:6px;border-right:1.5px solid var(--line-2);
  border-bottom:1.5px solid var(--line-2);transform:rotate(-45deg);
  transition:transform .18s cubic-bezier(.22,1,.36,1);
}
.arch__more[open] summary::before{transform:rotate(45deg)}
.arch__more summary:hover{color:var(--ink)}
/* Zugeklappt hart verstecken: die allgemeine .legal-ul-Regel setzt display:flex
   und schlaegt sonst den Browser-Stil, der den Inhalt verbergen wuerde. */
.arch__more:not([open]) .arch__notes{display:none}
.arch__notes{
  list-style:none;margin:12px 0 2px;padding:0;
  display:flex;flex-direction:column;gap:7px;max-width:44rem;
}
.arch__notes li{
  font-family:var(--body);font-size:14px;line-height:1.58;color:var(--ink-2);
  padding-left:16px;position:relative;
}
.arch__notes li::before{
  content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;
  background:var(--line-2);
}

/* ---- Downloadknoepfe ---- */
/* Eigene Klasse statt .btn: .legal-Regeln und .btn-Varianten kollidierten hier,
   und ein Knopf, der wie ein unterstrichener Link aussieht, wirkt kaputt. */
.arch__dl{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  font-family:var(--body);font-weight:600;font-size:14px;letter-spacing:.01em;
  color:var(--ink);background:transparent;text-decoration:none;
  border:1px solid var(--line-2);border-radius:8px;padding:9px 15px;
  transition:border-color .16s ease, background .16s ease, color .16s ease;
}
.arch__dl svg{width:14px;height:14px;flex:none}
.arch__dl:hover{border-color:var(--ink);background:var(--wash);color:var(--ink)}
.arch__dl:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
.arch__dl--latest{
  background:#fff;border-color:#fff;color:var(--cobalt-ink);
  font-size:15px;padding:12px 20px;border-radius:9px;
}
.arch__dl--latest:hover{background:rgba(255,255,255,.9);border-color:rgba(255,255,255,.9);color:var(--cobalt-ink)}
.arch__dl--latest:focus-visible{outline-color:#fff}

.arch__note{
  font-family:var(--body);font-size:13.5px;line-height:1.65;color:var(--ink-3);
  margin:clamp(36px,4.5vw,52px) 0 0;padding-top:20px;border-top:1px solid var(--line);
  max-width:40rem;
}

/* ---- Versions-Link in der Unterseiten-Kopfleiste ---- */
.subnav__links{display:flex;align-items:center;gap:22px;margin-left:26px}
.subnav__links a{
  font-family:var(--body);font-size:14px;color:var(--ink-3);letter-spacing:.01em;
  text-decoration:none;
}
.subnav__links a:hover{color:var(--ink)}

@media(max-width:720px){
  .arch__row{grid-template-columns:1fr auto;column-gap:14px}
  .arch__no{grid-column:1;grid-row:1}
  .arch__row .arch__meta{grid-column:1;grid-row:2}
  .arch__more{grid-column:1;grid-row:3;margin-top:4px}
  .arch__dl{grid-column:2;grid-row:1 / span 2;align-self:center}
  .subnav__links{gap:16px;margin-left:16px}
  .subnav__links a{font-size:13px}
}
@media(max-width:520px){
  .arch__latestHead{align-items:flex-start;flex-direction:column;gap:16px}
  .arch__dl--latest{width:100%;justify-content:center}
  .subnav__back span{display:none}
}
@media (prefers-reduced-motion: reduce){
  .arch__more summary::before,.arch__dl{transition:none}
}

/* Dezenter Weg zum Versionsarchiv, direkt neben dem Hauptknopf. Bewusst ein
   Textlink und kein zweiter Knopf: die Startseite hat genau EINE Handlung, und
   eine zweite Schaltflaeche daneben wuerde sie schwaechen. */
.hero__older{
  font-family:var(--body);font-size:12.5px;font-weight:500;color:var(--ink-3);
  text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:1px;
  align-self:center;white-space:nowrap;
}
.hero__older:hover{color:var(--ink);border-bottom-color:var(--ink-3)}

/* ---------- Download-Abschnitt ----------
   Links der Knopf mit den nackten Angaben zur Datei, rechts die Erklaerung zur
   Warnung von Windows. Bewusst nebeneinander statt untereinander: wer die
   Warnung schon kennt, laedt sofort; wer sie fuerchtet, findet die Erklaerung
   im selben Blick statt auf einer Unterseite. */
.dl__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(24px,3.4vw,52px);margin-top:clamp(28px,3vw,44px);align-items:start;
}
.dl__btn{width:fit-content}
.dl__facts{
  margin:26px 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:20px;row-gap:0;font-size:13.5px;
}
.dl__facts > div{display:contents}
.dl__facts dt{color:var(--ink-3);padding:9px 0;border-top:1px solid var(--line);white-space:nowrap}
.dl__facts dd{margin:0;padding:9px 0;border-top:1px solid var(--line);color:var(--ink);
  font-family:var(--mono);font-size:12.5px;overflow-wrap:anywhere}
.dl__alt{margin-top:18px;font-size:13px}
.dl__alt a{color:var(--ink-3);border-bottom:1px solid var(--line-2);padding-bottom:1px}
.dl__alt a:hover{color:var(--ink);border-bottom-color:var(--ink-3)}

.dl__note{background:var(--wash);border:1px solid var(--line);border-radius:4px;
  padding:clamp(20px,2.2vw,28px)}
.dl__noteTitle{font-family:var(--disp);font-weight:700;font-size:clamp(17px,1.5vw,19.5px);
  letter-spacing:-0.015em;margin:0 0 12px}
.dl__noteText{font-size:14.5px;color:var(--ink-2);margin:0 0 14px;max-width:56ch}
.dl__steps{margin:0 0 14px;padding-left:20px;font-size:14.5px;color:var(--ink-2)}
.dl__steps li{margin-bottom:7px}
.dl__steps li::marker{color:var(--ink-3);font-family:var(--mono);font-size:12.5px}
.dl__steps strong{color:var(--ink);font-weight:600}
.dl__links{display:flex;flex-wrap:wrap;gap:8px 22px;margin:18px 0 0;font-size:13.5px}
.dl__links a{color:var(--cobalt);font-weight:600;border-bottom:1px solid transparent}
.dl__links a:hover{border-bottom-color:var(--cobalt)}

@media(max-width:860px){
  .dl__grid{grid-template-columns:1fr}
  .dl__btn{width:100%;justify-content:center}
}

/* ---------- Bewegung der drei Schrittsymbole ----------
   Ein Ablauf ueber 6 Sekunden, der die Bedienung eins zu eins nachspielt:
   Taste runter, Taste BLEIBT unten waehrend gesprochen wird, Taste hoch, erst
   dann erscheint der Text. Genau so steht es in den drei Ueberschriften.

   Kein Feld faellt dabei in Starre. Die Balken haben zwei Ebenen: eine ruhige
   Huellkurve fuer den Ablauf und darunter ein eigenes, unregelmaessiges Zappeln
   je Balken. Der Schreibstrich blinkt in eigenem Takt, unabhaengig vom Ablauf.
   Wer nur kurz hinsieht, sieht immer Bewegung.

   Die Taste federt beim Aufsetzen kurz nach. Das gibt der Reihe Koerper, ohne
   verspielt zu wirken, und ist der einzige Ort mit ueberschwingender Kurve. */

/* Ein Ablauf, drei Phasen, klar getrennt:
   Phase 1 (4-14%):  Taste sinkt UND der Pegel schiesst hoch, gleichzeitig.
   Phase 2 (14-56%): Taste bleibt gedrueckt, Pegel bleibt laut. Es wird gesprochen.
   Phase 3 (56-62%): Taste kommt hoch, Pegel faellt. Losgelassen.
   Phase 4 (66-88%): ERST JETZT wird der Text geschrieben.
   Alle vier Bewegungen liegen auf 3 Sekunden und werden von app.js auf denselben
   Startpunkt gelegt, damit die Reihenfolge nie auseinanderlaeuft. */

/* 01 Taste: sinkt, federt kurz nach, bleibt gedrueckt, kommt beim Loslassen zurueck. */
@keyframes glyphPress{
  0%,4%   {transform:translateY(0)}
  10%     {transform:translateY(3px)}
  14%     {transform:translateY(2px)}
  56%     {transform:translateY(2px)}
  62%     {transform:translateY(0)}
  100%    {transform:translateY(0)}
}
/* Farbe statt Deckkraft: in Ruhe normales Blau, im gedrueckten Moment hell.
   Deckkraft blieb sonst immer blau und wirkte nur ausgeblichen; jetzt kehrt
   sich die Farbe wirklich um, wie bei einer aufleuchtenden Taste. */
@keyframes glyphLit{
  0%,4%   {fill:var(--cobalt)}
  12%,56% {fill:#EAF0FF}
  62%,100%{fill:var(--cobalt)}
}
.glyph__key{
  transform-box:fill-box;transform-origin:center;
  animation:glyphPress 3s cubic-bezier(.34,1.56,.64,1) infinite,
            glyphLit 3s ease-in-out infinite;
}

/* 02 Pegel: schiesst mit dem Tastendruck hoch (Phase 1), bleibt laut solange die
   Taste unten ist (Phase 2), faellt beim Loslassen (Phase 3). Huellkurve am
   Container, Zappeln an den einzelnen Balken darunter. */
@keyframes glyphEnv{
  0%,4%   {transform:scaleY(.18)}
  12%     {transform:scaleY(1)}
  56%     {transform:scaleY(1)}
  62%     {transform:scaleY(.18)}
  100%    {transform:scaleY(.18)}
}
@keyframes glyphJit{
  0%,100%{transform:scaleY(.55)}
  25%    {transform:scaleY(1)}
  50%    {transform:scaleY(.4)}
  75%    {transform:scaleY(.85)}
}
.mini-wave{transform-origin:bottom;animation:glyphEnv 3s cubic-bezier(.34,1.3,.64,1) infinite}
.mini-wave i{transform-origin:bottom;animation:glyphJit .6s ease-in-out infinite}
.mini-wave i:nth-child(1){animation-duration:.62s;animation-delay:0s}
.mini-wave i:nth-child(2){animation-duration:.54s;animation-delay:.05s}
.mini-wave i:nth-child(3){animation-duration:.70s;animation-delay:.10s}
.mini-wave i:nth-child(4){animation-duration:.48s;animation-delay:.03s}
.mini-wave i:nth-child(5){animation-duration:.66s;animation-delay:.12s}
.mini-wave i:nth-child(6){animation-duration:.52s;animation-delay:.07s}
.mini-wave i:nth-child(7){animation-duration:.74s;animation-delay:.02s}
.mini-wave i:nth-child(8){animation-duration:.58s;animation-delay:.09s}
.mini-wave i:nth-child(9){animation-duration:.68s;animation-delay:.14s}
.mini-wave i:nth-child(10){animation-duration:.50s;animation-delay:.06s}
.mini-wave i:nth-child(11){animation-duration:.72s;animation-delay:.11s}

/* 03 Der Satz wird geschrieben. Der Strich ist die rechte Kante des Ausschnitts
   und steht damit zwangslaeufig hinter dem letzten Zeichen, statt fest am
   Zeilenende zu kleben. Die unsichtbare Kopie darunter haelt die volle Breite
   frei, deshalb springt beim Uebersetzen nichts: laengere Saetze bekommen
   automatisch mehr Platz. */
/* Nichts bis zum Loslassen der Taste (62%). Erst danach laeuft der Text ein. */
@keyframes glyphWrite{
  0%,66%  {width:0}
  88%,100%{width:100%}
}
@keyframes glyphBlink{
  0%,100%{border-right-color:var(--cobalt)}
  50%    {border-right-color:transparent}
}
.s3type{
  position:relative;display:inline-block;
  font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:-0.02em;
  line-height:1.25;color:var(--ink);
  /* Gleiche Bauhoehe wie die beiden Zeichnungen daneben, damit die drei
     Symbole auf einer Grundlinie sitzen. */
  padding-top:12px;
}
.s3type__ghost{visibility:hidden}
.s3type__clip{
  position:absolute;left:0;top:auto;bottom:0;height:1.25em;width:0;
  overflow:hidden;white-space:nowrap;
  border-right:2px solid var(--cobalt);
  animation:glyphWrite 3s steps(14) infinite,
            glyphBlink 1.06s step-end infinite;
}

@media(prefers-reduced-motion:reduce){
  .glyph__key,.mini-wave,.mini-wave i,.s3type__clip{animation:none}
  .s3type__clip{width:100%;border-right-color:var(--cobalt)}
}

/* ---------- FAQ: Show-more statt einer langen Liste ----------
   Ohne JavaScript sind alle zehn Fragen sichtbar (display:contents macht den
   Wrapper unsichtbar, die Details bleiben normale Grid-Kinder). Erst wenn
   app.js bestaetigt, dass es laeuft, wird der Rest eingeklappt und der Knopf
   erscheint. So verliert niemand ohne JS eine Antwort. */
.faq__more{display:contents}
.faqmore-ready .faq__more{display:none}
.faqmore-ready .faq__more.is-open{
  display:contents;
}
.faqmore-ready .faq__more.is-open details{
  animation:faqMoreIn .38s cubic-bezier(.22,.61,.36,1) both;
}
.faqmore-ready .faq__more.is-open details:nth-of-type(2){animation-delay:.05s}
.faqmore-ready .faq__more.is-open details:nth-of-type(3){animation-delay:.1s}
.faqmore-ready .faq__more.is-open details:nth-of-type(4){animation-delay:.15s}
@keyframes faqMoreIn{
  from{opacity:0;transform:translateY(-8px)}
  to  {opacity:1;transform:translateY(0)}
}

.faq__moreBtn{
  display:none;
}
.faqmore-ready .faq__moreBtn{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:22px;padding:11px 18px;
  border:1px solid var(--line-2);border-radius:999px;
  background:transparent;color:var(--ink-2);
  font-family:var(--body);font-weight:600;font-size:14px;
  cursor:pointer;transition:border-color .15s ease, color .15s ease, opacity .2s ease;
}
.faqmore-ready .faq__moreBtn:hover{border-color:var(--ink);color:var(--ink)}
.faqmore-ready .faq__moreBtn svg{width:14px;height:14px;transition:transform .15s ease}
.faqmore-ready .faq__moreBtn:hover svg{transform:translateY(1px)}
.faqmore-ready .faq__moreBtn.is-done{opacity:0;pointer-events:none}

@media(prefers-reduced-motion:reduce){
  .faqmore-ready .faq__more.is-open details{animation:none}
}

/* ---------- Illustration der Windows-SmartScreen-Warnung ----------
   Reines HTML und CSS statt eines Rasterbilds: bleibt auf jedem Bildschirm
   und bei jeder Zoomstufe gestochen scharf, weil nichts skaliert werden
   muss. Text im Kasten bleibt bewusst Englisch (lang="en"), er ist eine
   Abbildung des echten Windows-Dialogs, keine uebersetzbare Aussage der
   Website; die tatsaechliche Handlungsanweisung fuer jede Sprache steht
   bereits daneben im Fliesstext mit den echten Windows-Beschriftungen. */
.dl__mock{
  margin-bottom:20px;border-radius:6px;overflow:hidden;
  background:#0F62C2;
  box-shadow:0 20px 44px -22px rgba(11,12,15,.45), 0 1px 0 rgba(255,255,255,.08) inset;
  font-family:"Segoe UI","Schibsted Grotesk",var(--body),sans-serif;
}
.dl__mockBar{
  display:flex;justify-content:flex-end;padding:9px 9px 0;
}
.dl__mockClose{
  width:28px;height:22px;display:flex;align-items:center;justify-content:center;
  background:#fff;color:#1a1a1a;font-size:15px;line-height:1;border-radius:1px;
}
.dl__mockBody{padding:6px 26px 18px}
.dl__mockTitle{
  color:#fff;font-size:21px;font-weight:400;letter-spacing:-0.01em;
  margin:6px 0 14px;
}
.dl__mockText{
  color:rgba(255,255,255,.92);font-size:13.5px;line-height:1.5;
  max-width:46ch;margin:0 0 10px;
}
.dl__mockLink{
  display:inline-block;color:#fff;font-size:13.5px;
  text-decoration:underline;text-underline-offset:2px;
}
.dl__mockFoot{
  display:flex;justify-content:flex-end;padding:16px 22px 22px;
}
.dl__mockBtn{
  display:inline-block;background:#fff;color:#1a1a1a;
  font-size:13.5px;font-weight:600;padding:8px 18px;border-radius:1px;
}

@media(max-width:420px){
  .dl__mockTitle{font-size:18px}
  .dl__mockBody{padding:4px 18px 14px}
  .dl__mockFoot{padding:12px 16px 18px}
}

/* ---------- SHA-256-Zeile im Download-Kasten ----------
   Der volle Hash ist zu lang fuer eine Tabellenzeile, deshalb steht er gekuerzt
   da (title-Attribut traegt den vollen Wert fuer den Mauszeiger), und ein
   Knopf kopiert den VOLLEN Wert aus dem data-hash-Attribut in die
   Zwischenablage. Ohne JavaScript ist der Knopf weiterhin sichtbar, klickt
   aber ins Leere; da .dl__hashValue selbst den gekuerzten Text traegt, bleibt
   die Seite auch dann informativ. */
.dl__hashRow{display:flex;align-items:center;gap:8px}
.dl__hashValue{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.dl__hashCopy{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:5px;border:1px solid var(--line-2);
  background:var(--paper);color:var(--ink-3);cursor:pointer;padding:0;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.dl__hashCopy:hover{border-color:var(--ink-3);color:var(--ink)}
.dl__hashCopy svg{width:13px;height:13px}
.dl__hashCopy .dl__hashIcDone{display:none}
.dl__hashCopy.is-copied{border-color:#1D9E75;color:#1D9E75;background:#EAF7F2}
.dl__hashCopy.is-copied .dl__hashIcCopy{display:none}
.dl__hashCopy.is-copied .dl__hashIcDone{display:block}
.dl__hashHint{margin:8px 0 0;font-size:12px;color:var(--ink-3)}

/* Fuer Screenreader lesbar, visuell unsichtbar; traegt die Kopiert-Meldung. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

@media(max-width:420px){
  .dl__hashValue{max-width:120px}
}

/* ---------- Download-Abschnitt: rechter Kasten buendig mit dem Titel ----------
   .sec__head (Eyebrow/Titel/Lede) und .dl__grid (Knopf+Facts links, Kasten
   rechts) sind zwei Geschwister-Bloecke; der Kasten begann deshalb erst auf
   Hoehe des Knopfs, nicht auf Hoehe der Ueberschrift. Ab hier spannt sich ein
   gemeinsames Grid ueber beide: die Kopfzeilen-Elemente und der linke Block
   werden per display:contents zu direkten Grid-Kindern befoerdert und explizit
   in Spalte 1 gestapelt, der Kasten steht fest in Spalte 2 ueber die volle
   Hoehe. Das haelt auch bei laengeren/kuerzeren Sprachen buendig, weil das
   Grid nach tatsaechlichem Inhalt ausrichtet statt nach einem festen Versatz.
   Nur ab der Breite, wo ueberhaupt zwei Spalten sichtbar sind. */
@media(min-width:861px){
  .dl .wrap{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    column-gap:clamp(24px,3.4vw,52px);align-items:start;
  }
  .dl .sec__head{display:contents}
  .dl .eyebrow{grid-column:1;grid-row:1}
  .dl .sec__title{grid-column:1;grid-row:2}
  .dl .sec__lede{grid-column:1;grid-row:3}
  .dl__grid{display:contents}
  .dl__main{grid-column:1;grid-row:4;margin-top:clamp(24px,2.6vw,32px)}
  /* .sec__title traegt einen eigenen margin-top:16px (Abstand zur Eyebrow, aus
     der allgemeinen Ueberschriften-Regel). Der zaehlt fuer die Grid-Linie
     selbst nicht mit, der Kasten stuende sonst 16px zu hoch. Ausgleich hier
     statt am Titel, damit der normale Abstand zur Eyebrow erhalten bleibt.
     16px ist ein fester CSS-Wert, unabhaengig von Sprache oder Zeilenlaenge. */
  .dl__note{grid-column:2;grid-row:2 / span 3;margin-top:16px}
}