/* ==========================================================================
   stratdata — OSINT-Arbeitsplatz
   Marke: Syne (Display) + DM Sans (Text), Navy-Basis, Verlauf Violett→Blau.
   Haltung: hell, rund, viel Luft, weiche Flächen statt harter Kanten.
   Schriften liegen lokal — beim Besuch geht keine Anfrage an Google.
   ========================================================================== */

/* ─────────────────────────────────────────────────────────── Schriften ──
   Wortgleich mit assets/css/style.css, nur mit dem Pfad dieser Ebene — beide
   Flaechen greifen auf denselben Bestand in assets/fonts/ zu.

   Der Auftrag nannte eine variable DM Sans mit Gewichtsachse 300-700 und dem
   Latin-Ext-Bereich. Beides passt nicht auf das, was dort liegt: die zwei
   DM-Sans-Dateien fuehren zwar eine Variationsachse, aber nur opsz (optische
   Groesse 9-40) und keine wght — ihr Gewicht ist fest 400 beziehungsweise 500.
   Und sie sind der Latin-Teilbereich; von den 1162 Zeichen des genannten
   Latin-Ext-Bereichs enthalten sie sechs. Mit jenem unicode-range fiele der
   gesamte gewoehnliche Text auf Helvetica zurueck. Darum je Datei ein Gewicht
   und ein unicode-range, der die tatsaechliche Abdeckung umschliesst.
   Nachgeladen wird nichts: keine Anfrage an Google, das ist Absicht. */
/* DM Sans als VARIABLE Schrift mit Gewichtsachse 300–700.
   Vorher lagen hier zwei feste Schnitte (400 und 500). Alles dazwischen und
   alles darüber musste der Browser fälschen — er zieht die Buchstaben dann
   künstlich in die Breite, was die Formen verzerrt. Deshalb stand in den
   Rechtsseiten der Vermerk «700 würde der Browser fälschen»; mit der
   Gewichtsachse ist das erledigt und 600 wie 700 sind echte Schnitte.
   Zwei Teilbereiche: latin lädt immer, latin-ext nur, wenn ein Zeichen daraus
   wirklich vorkommt — der Browser entscheidet das anhand der unicode-range,
   und ein deutscher Text braucht ihn selten. */
@font-face{font-family:'DM Sans';src:url(../../../assets/fonts/dmsans-var-latin.woff2)format('woff2');
  font-style:normal;font-weight:300 700;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';src:url(../../../assets/fonts/dmsans-var-latin-ext.woff2)format('woff2');
  font-style:normal;font-weight:300 700;font-display:swap;
  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:Syne;src:url(../../../assets/fonts/syne-600.woff2)format('woff2');font-style:normal;font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0102,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Syne;src:url(../../../assets/fonts/syne-700.woff2)format('woff2');font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0102,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Syne;src:url(../../../assets/fonts/syne-800.woff2)format('woff2');font-style:normal;font-weight:800;font-display:swap;unicode-range:U+0000-00FF,U+0102,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Platz für die Scrollleiste IMMER freihalten. Ohne das ist eine kurze Seite
   1440 px breit und eine lange 1430 — beim Wechsel rutscht die komplette
   Seite samt Menü um die Leistenbreite zur Seite. Genau dieses Zucken liest
   sich als «mal so, mal so ausgerichtet». */
html{scrollbar-gutter:stable}

:root{
  --paper:#ffffff;
  --tint:#eef2ff;              /* das Lavendel der Marke */
  --tint-2:#f6f8ff;
  --ink:#0a0f1e;               /* Navy der Marke */
  --ink-2:#4a5680;
  --ink-3:#646f93;          /* 4.96:1 — vorher #8899bb mit nur 2.87:1 */
  --line:#e6eaf5;
  --line-2:#d3daed;

  --violet:#7c5cff;
  --blue:#0072ff;
  --cyan:#00c6ff;
  --amber:#f0b429;
  --coral:#ff3c5a;
  --link:#5b3df5;              /* 6.1:1 — für Text; --violet/--blue nur für Flächen */
  --grad:linear-gradient(120deg,var(--violet) 0%,var(--blue) 58%,var(--cyan) 100%);
  --grad-soft:linear-gradient(160deg,#f3f0ff 0%,#eaf1ff 45%,#ffffff 100%);

  /* Überschriften laufen jetzt in DM Sans, nicht mehr in Syne.
     Syne ist eine Plakatschrift: sehr weite Versalien, ungewöhnliche
     Formen, im Gewicht 800 sehr dominant. Als Zeile über einem Absatz
     funktioniert das, über einer ganzen Anwendung erschlägt es den
     Inhalt — und lange deutsche Wörter brechen darin über drei Zeilen.
     Mit der Gewichtsachse 300-700 kann DM Sans beides: ruhiger Text
     bei 400 und tragende Überschrift bei 700, aus EINER Schriftdatei
     und ohne zweiten Netzabruf. Syne bleibt als Ersatz stehen, damit
     nichts bricht, falls die Variable einmal nicht lädt. */
  --display:'DM Sans',Syne,"Avenir Next",system-ui,sans-serif;
  --body:'DM Sans',"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:Menlo,Monaco,"DejaVu Sans Mono",Consolas,monospace;

  /* Ziffernschrift. DM Sans bringt in diesem Ausschnitt weder das tnum-Merkmal
     noch gleich breite Ziffern mit — die 1 ist knapp halb so breit wie die 0.
     Ein hochzaehlender Wert in DM Sans ruckelt deshalb, und font-variant-
     numeric allein aendert daran nichts, weil das Merkmal in der Datei fehlt.
     Syne dagegen hat tnum; wo Zahlen im Titelschnitt stehen — Preise,
     Kennzahlen, Schrittnummern —, bleiben sie darum in Syne. */
  --num:var(--mono);

  /* ── Schrifttreppe ───────────────────────────────────────────────────────
     Dieselbe Reihe wie im Arbeitsplatz (assets/css/style.css). Die kleinen
     Stufen haengen als feste Verhaeltnisse am Grundmass --fs-base statt an
     absoluten Pixeln: so bleiben die Abstaende zwischen den Stufen auf beiden
     Flaechen gleich, obwohl der Arbeitsplatz dichter gesetzt ist. Nur das
     Grundmass unterscheidet sich — hier rund 15-16.5px, dort rund 13.5px.
     Die Ueberschriften brauchen eine eigene Reihe, weil sie mit der
     Fensterbreite wachsen muessen und nicht mit der Textgroesse; --type-scale
     verdichtet sie im Arbeitsplatz um einen einzigen Faktor und steht hier
     deshalb auf 1. clamp() erspart einen eigenen Wert je Umbruchpunkt. */
  --fs-base:clamp(.94rem,1vw,1.03rem);
  --type-scale:1;

  --fs-2xs:calc(var(--fs-base) * .70);
  --fs-xs: calc(var(--fs-base) * .80);
  --fs-sm: calc(var(--fs-base) * .90);
  --fs-md: var(--fs-base);
  --fs-lg: calc(var(--fs-base) * 1.12);
  --fs-xl: calc(var(--fs-base) * 1.26);

  --fs-display:calc(clamp(2.2rem,5.2vw,4.3rem)   * var(--type-scale));
  --fs-h1:     calc(clamp(1.95rem,4.2vw,3.3rem)  * var(--type-scale));
  /* Zweite Stufe für schmale Karten (Konto, Anmeldung). Eine einzige h1-Grösse
     kann nicht beides bedienen: clamp() misst am FENSTER, nicht am Behälter,
     und 4.2vw von 1280px sind 53px — in einer 430px breiten Karte bricht das
     um. Also zwei benannte Stufen statt fünf zufälliger Werte. */
  --fs-h1-k:   calc(clamp(1.62rem,2.6vw,2.05rem)  * var(--type-scale));
  --fs-h2:     calc(clamp(1.7rem,3.3vw,2.6rem)   * var(--type-scale));
  --fs-h3:     calc(clamp(1.14rem,1.55vw,1.4rem) * var(--type-scale));
  --fs-h4:     calc(clamp(1rem,1.15vw,1.08rem)   * var(--type-scale));

  /* Laufweite: grosse Titel ruecken zusammen, kleine Versalien gehen auf.
     Bei 60px trennen die Wortbilder sich von selbst, da stoert jeder
     Zwischenraum; bei 11px Grossbuchstaben verkleben sie ohne Zugabe. */
  --ls-display:-.03em;
  --ls-tight:-.02em;
  --ls-label:.04em;
  --ls-caps:.08em;

  --r:18px;                    /* Grundrundung */
  --r-lg:28px;
  --edge:clamp(20px,5vw,72px);
  --maxw:1180px;
  --ease:cubic-bezier(.22,.68,.28,1);
  --shadow:0 1px 2px rgba(10,15,30,.04),0 18px 46px -22px rgba(10,15,30,.18);
  --shadow-lg:0 2px 4px rgba(10,15,30,.05),0 34px 70px -30px rgba(60,40,180,.28);

  /* Anschluss an assets/css/ui.css */
  --ctl-surface:#ffffff; --ctl-surface-2:#f6f8ff; --ctl-line:#d3daed;
  --ctl-line-soft:#e6eaf5; --ctl-ink:#0a0f1e; --ctl-ink-2:#4a5680;
  --ctl-accent:#5b3df5; --ctl-accent-soft:#eceaff; --ctl-hover:#f2f5ff;
  --ctl-danger:#ff3c5a;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--body);color:var(--ink);background:var(--paper);
  font-size:var(--fs-md);line-height:1.62;letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
::selection{background:var(--violet);color:#fff}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:4px}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-9999px;background:var(--ink);color:#fff;padding:12px 18px;z-index:99}
.skip:focus{left:0;top:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--edge)}

/* ═════════════════════════════════════════════════════════ Typografie ══
   Blanke h1-h4 kommen im Markup dieser Seite kaum vor — die Klassen unten
   tragen die Arbeit. Aber die Kontoseite setzt ein h1, und alles, was spaeter
   dazukommt, soll nicht auf die Browservorgabe zurueckfallen. Darum zuerst die
   Ebenen, dann die Klassen, die dieselben Stufen benutzen. */
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);margin:0 0 .5em;line-height:1.14}
h1{font-size:var(--fs-h1);font-weight:700;letter-spacing:var(--ls-display)}
h2{font-size:var(--fs-h2);font-weight:700;letter-spacing:var(--ls-display)}
h3{font-size:var(--fs-h3);font-weight:600;letter-spacing:var(--ls-tight)}
h4{font-size:var(--fs-h4);font-weight:600;letter-spacing:var(--ls-tight)}

/* Lange deutsche Komposita in Überschriften.
   «Allgemeine Geschäftsbedingungen» braucht bei 52px rund 566px — in einer
   346px breiten Spalte auf dem Telefon lief die Seite dadurch waagerecht über.
   hyphens:auto trennt an den richtigen Stellen (die Seiten tragen lang="de",
   sonst wüsste der Browser die Regeln nicht); overflow-wrap greift erst, wenn
   selbst das nicht reicht. Bewusst NICHT word-break:break-all — das zerhackt
   auch dort, wo eine Trennstelle vorhanden wäre. */
h1,h2,h3,h4{overflow-wrap:break-word;hyphens:auto}

.display{
  font-family:var(--display);font-weight:700;
  font-size:var(--fs-display);line-height:1.05;letter-spacing:var(--ls-display);margin:0;
  max-width:16ch;                 /* bricht an Wortgrenzen, in jeder Sprache */
  overflow-wrap:normal;word-break:normal;hyphens:none;
}
.h2{
  font-family:var(--display);font-weight:700;
  font-size:var(--fs-h2);line-height:1.12;letter-spacing:var(--ls-display);
  margin:0 0 .5em;max-width:21ch;
}
.h3{font-family:var(--display);font-weight:600;font-size:var(--fs-h3);
    letter-spacing:var(--ls-tight);margin:0 0 .45em;line-height:1.24}
.lede{font-size:var(--fs-lg);line-height:1.62;color:var(--ink-2);max-width:54ch;margin:0}
.eyebrow{
  display:inline-flex;align-items:center;gap:7px;margin:0;
  padding:5px 13px;border-radius:999px;background:var(--tint);color:var(--link);
  font-size:var(--fs-2xs);font-weight:500;letter-spacing:var(--ls-label);
}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ═══════════════════════════════════════════════════════════ Kopfzeile ══ */
.masthead{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.78);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease);
}
.masthead.stuck{border-bottom-color:var(--line)}
.masthead-in{
  display:flex;align-items:center;gap:clamp(14px,3vw,34px);
  max-width:var(--maxw);margin:0 auto;padding:14px var(--edge);
}
.mark{display:flex;align-items:center;gap:9px;flex:none;
      font-family:Syne,var(--display);font-weight:700;font-size:var(--fs-lg);
      letter-spacing:var(--ls-display)}
.mark-dot{
  width:24px;height:24px;border-radius:8px;flex:none;background:var(--grad);
  position:relative;
}
.mark-dot::after{content:'';position:absolute;inset:7px;border-radius:3px;background:#fff}
/* Gleich breite Spalten statt natürlicher Breiten.
   Vorher war die Navigation ein flex-Streifen: jede Beschriftung nahm die
   Breite, die ihr Text gerade brauchte, und weil «Akte» im Französischen
   «Dossier» heisst und im Englischen «Case file», verschob ein Sprachwechsel
   alles Nachfolgende — gemessen bis zu 54px. Das sieht aus wie ein Ruck durch
   die ganze Kopfzeile.
   Mit einem Raster aus gleich breiten Spalten steht jeder Eintrag fest an
   seinem Platz, egal welche Sprache. Die Breite richtet sich weiterhin nach
   dem Fenster — fest heisst hier «unabhängig vom Inhalt», nicht «in Pixeln
   festgenagelt». */
.nav{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  gap:clamp(6px,1vw,14px);
  font-size:var(--fs-sm);color:var(--ink-2);
  text-align:center;
}
/* Die Unterseiten fuehren echte Seitennamen im Menue, keine kurzen
   Sprungmarken. Gleich breite Spalten (1fr) wuerden das laengste Wort
   beschneiden — «Nachschlagewerk» stand als «Nachschlagew…» da. Hier
   bekommt jede Spalte die Breite ihres Wortes. */
.nav-seiten{grid-auto-columns:max-content}

.nav a{
  position:relative;padding:5px 2px;
  /* Eine sehr lange Übersetzung soll die Spalte nicht sprengen, sondern
     gekürzt werden — ein Umbruch in der Kopfzeile wäre schlimmer. */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nav a::after{
  /* Der Unterstrich folgt der Textbreite, nicht der Spaltenbreite — sonst
     zöge er sich bei kurzen Wörtern unschön über die ganze Zelle. */
  content:'';position:absolute;left:50%;width:max-content;max-width:100%;
  transform:translateX(-50%) scaleX(0);bottom:0;height:2px;border-radius:2px;
  background:var(--grad);transform-origin:center;
  transition:transform .3s var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a.on::after{transform:translateX(-50%) scaleX(1)}
/* Die Knöpfe der Kopfzeile bekommen eine Mindestbreite, die zur LÄNGSTEN
   Übersetzung passt. Ohne sie wanderte die ganze Gruppe beim Sprachwechsel —
   gemessen 159px —, weil sie rechtsbündig sitzt und jede Breitenänderung nach
   links durchschlägt. Die Werte stammen aus der Messung aller vier Sprachen,
   nicht aus dem Gefühl; sie stehen in rem, damit sie mit der Schrift wachsen.
   Etwas Luft im Englischen ist der Preis dafür, dass nichts mehr springt. */
.masthead-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.masthead-actions .btn{min-width:7.5rem}
.masthead-actions .btn.btn-fill{min-width:9.5rem}
@media(max-width:720px){
  /* Auf schmalen Fenstern zählt Platz mehr als Ruhe — dort darf der Knopf
     wieder auf seine natürliche Breite. */
  .masthead-actions .btn,.masthead-actions .btn.btn-fill{min-width:0}
}
.lang{display:flex;gap:2px;background:var(--tint-2);border-radius:999px;padding:3px}
/* DE FR IT EN stehen durchgehend in Versalien — die brauchen Zugabe. */
.lang button{
  /* DE FR IT EN sind zwei Zeichen breit, aber nicht gleich breit — «IT» ist
     schmaler als «DE». Eine feste Mindestbreite hält die vier Schalter an
     ihrem Platz, damit der Umschalter beim Wechsel nicht selbst zuckt. */
  min-width:2.6em;text-align:center;
  background:none;border:none;padding:5px 9px;cursor:pointer;border-radius:999px;
  font:inherit;font-size:var(--fs-2xs);font-weight:500;letter-spacing:var(--ls-caps);
  color:var(--ink-3);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.lang button[aria-pressed="true"]{background:var(--paper);color:var(--link);box-shadow:0 1px 3px rgba(10,15,30,.1)}
.lang button:hover:not([aria-pressed="true"]){color:var(--ink)}

/* ═══════════════════════════════════════════════════════════════ Hero ══ */
.hero{position:relative;padding:clamp(48px,8vw,104px) 0 clamp(40px,6vw,76px)}
.hero::before{
  content:'';position:absolute;inset:0 0 auto;height:150%;z-index:-1;
  background:var(--grad-soft);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
}
.hero-in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(34px,4.6vw,58px)}
@media(min-width:960px){.hero-in{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:center}}
.hero .eyebrow{margin-bottom:22px}
.hero .display{max-width:16ch}
.hero .lede{margin-top:clamp(18px,2.2vw,28px)}
.hero-cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:clamp(22px,2.8vw,34px)}
.hero-fine{margin:16px 0 0;font-size:var(--fs-xs);color:var(--ink-3);
           font-variant-numeric:tabular-nums}

/* ── Konsolen-Demo ─────────────────────────────────────────────────────── */
.demo{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);
  box-shadow:var(--shadow-lg);overflow:hidden;
}
.demo-bar{
  display:flex;align-items:center;gap:7px;padding:13px 18px;
  border-bottom:1px solid var(--line);background:var(--tint-2);
}
.demo-dot{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.demo-dot:nth-child(1){background:#ffbfc9}.demo-dot:nth-child(2){background:#ffe0a3}
.demo-dot:nth-child(3){background:#bfe3c6}
.demo-title{margin-left:8px;font-size:var(--fs-2xs);font-weight:500;color:var(--ink-3);
            letter-spacing:var(--ls-label)}
.demo-body{padding:20px 18px 22px}
/* In die Demo tippt sich fortlaufend eine IP, eine Domain, eine Koordinate.
   Der Text wird Zeichen fuer Zeichen ersetzt — mit unterschiedlich breiten
   Ziffern zuckte die Zeile bei jedem Anschlag. */
.demo-in{
  display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:999px;
  border:1px solid var(--line-2);font-family:var(--mono);font-size:var(--fs-sm);
  background:var(--paper);font-variant-numeric:tabular-nums;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.demo-in.hot{border-color:var(--violet);box-shadow:0 0 0 4px rgba(124,92,255,.12)}
.demo-q{color:var(--ink);white-space:nowrap;overflow:hidden}
.demo-caret{width:1.5px;height:15px;background:var(--violet);flex:none;
            animation:blink 1.05s steps(2,end) infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.demo-type{
  margin:16px 0 10px;display:flex;align-items:center;gap:8px;font-size:var(--fs-2xs);
  color:var(--ink-3);
  opacity:0;transform:translateY(4px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.demo-type.show{opacity:1;transform:none}
.demo-type b{background:var(--grad);color:#fff;padding:3px 11px;border-radius:999px;
             font-size:var(--fs-2xs);font-weight:500}
.demo-list{display:flex;flex-direction:column;gap:6px}
.demo-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 14px;border-radius:12px;background:var(--tint-2);font-size:var(--fs-sm);
  opacity:0;transform:translateY(8px);
}
.demo-item.show{opacity:1;transform:none;transition:opacity .42s var(--ease),transform .42s var(--ease)}
.demo-item b{font-weight:500}
.demo-item span{font-family:var(--num);font-size:var(--fs-2xs);color:var(--ink-3);
                white-space:nowrap;font-variant-numeric:tabular-nums}

/* ═════════════════════════════════════════════════════════════ Zahlen ══ */
.stats{
  max-width:var(--maxw);margin:0 auto;padding-inline:var(--edge);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:clamp(10px,1.4vw,18px);
}
.stat{
  background:var(--tint-2);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,2.6vw,30px) 18px;text-align:center;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.stat:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
/* Die Kennzahlen zaehlen beim Erscheinen von 0 hoch. Ohne feste Ziffernbreite
   waechst und schrumpft die Kachel dabei sichtbar.
   lining-nums ist hier der eigentliche Fund: Syne setzt von sich aus
   Mediaevalziffern, und tabular-nums allein greift auf die tabellarische
   Mediaevalvariante (.tosf) — die 3, 7 und 9 haengen dann unter die Grundlinie.
   In einer 43px-Kennzahl sieht das aus wie ein Satzfehler. lining-nums holt
   die Versalziffern, erst zusammen ergeben beide, was gemeint war. */
.stat b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:var(--fs-h2);letter-spacing:var(--ls-display);line-height:1;
  font-variant-numeric:lining-nums tabular-nums;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat span{display:block;margin-top:8px;font-size:var(--fs-2xs);color:var(--ink-3)}

/* ═══════════════════════════════════════════════════════════ Sektionen ══ */
.section{padding:clamp(58px,8vw,112px) 0}
.section.tint{background:var(--tint-2)}
.section-head{max-width:62ch;margin-bottom:clamp(30px,4vw,54px)}
.section-head .eyebrow{margin-bottom:18px}

.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(256px,1fr));gap:clamp(14px,1.9vw,22px)}
.feature{
  padding:clamp(24px,2.6vw,32px);border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--paper);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.feature:hover{transform:translateY(-4px);border-color:transparent;box-shadow:var(--shadow-lg)}
.feature .ic{
  width:42px;height:42px;border-radius:13px;background:var(--grad);color:#fff;
  display:grid;place-items:center;margin-bottom:18px;font-size:17px;
}
.feature p{margin:0;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.6}

.steps{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:0}
.steps::before{content:'';position:absolute;left:19px;top:22px;bottom:22px;width:2px;
               background:linear-gradient(180deg,var(--violet),var(--cyan));opacity:.22;border-radius:2px}
.steps li{position:relative;padding:0 0 clamp(24px,2.8vw,36px) 58px}
.steps li:last-child{padding-bottom:0}
/* 01 02 03 04 stehen genau untereinander — jede Ziffer muss gleich breit sein,
   sonst sitzt die Zahl in jedem Kreis anders. lining-nums, weil Syne sonst
   Mediaevalziffern liefert und die 3 unter die Grundlinie faellt. Dieselbe
   Behandlung wie .as-steps im Arbeitsplatz. */
.steps .no{
  position:absolute;left:0;top:0;width:40px;height:40px;border-radius:13px;
  background:var(--paper);border:1px solid var(--line-2);display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:var(--fs-xs);color:var(--ink-3);
  font-variant-numeric:lining-nums tabular-nums;letter-spacing:var(--ls-label);
  transition:background .35s var(--ease),color .35s var(--ease),
             border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.steps li.in .no{background:var(--grad);border:0;color:#fff}
.steps p{margin:.35em 0 0;color:var(--ink-2);font-size:var(--fs-sm);max-width:56ch}

/* ═══════════════════════════════════════════════════════════════ Preis ══ */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:clamp(14px,1.8vw,22px);align-items:start}
.plan{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(26px,3vw,34px);
  background:var(--paper);position:relative;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.plan.main{
  border-color:transparent;box-shadow:var(--shadow-lg);
  background:linear-gradient(var(--paper),var(--paper)) padding-box,var(--grad) border-box;
  border:1.5px solid transparent;
}
.plan-flag{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--grad);color:#fff;padding:5px 14px;border-radius:999px;
  font-size:var(--fs-2xs);font-weight:500;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
/* Der Betrag wird beim Waehrungswechsel neu gesetzt (14 / 15 / 16 …) und steht
   in drei Karten nebeneinander. Gleiche Ziffernbreiten halten die Grundlinie
   der drei Preise ruhig; lining-nums, weil Syne sonst Mediaevalziffern setzt. */
.plan-price{display:flex;align-items:baseline;gap:.28em;margin:.25em 0 .1em;
            font-family:var(--display);font-weight:700;font-size:var(--fs-h2);
            letter-spacing:var(--ls-display);line-height:1;
            font-variant-numeric:lining-nums tabular-nums}
.plan-price .cur,.plan-price .per{font-family:var(--body);font-weight:400;
                                  font-size:var(--fs-xs);color:var(--ink-3);
                                  font-variant-numeric:tabular-nums}
/* "Gratis" und "Auf Anfrage" stehen an der Stelle des Betrags. Als Wort
   brauchen sie weniger Flaeche als eine Zahl, aber mehr Gewicht als der
   Planname darueber — zwei Drittel der Betragsstufe treffen genau dazwischen
   und bleiben an die Treppe gebunden. */
.plan-price .word{font-size:calc(var(--fs-h2) * .66)}
.plan-sub{margin:.5em 0 1.6em;font-size:var(--fs-xs);color:var(--ink-3)}
.plan ul{list-style:none;margin:0 0 1.8em;padding:0}
.plan li{position:relative;padding:8px 0 8px 27px;font-size:var(--fs-sm)}
.plan li::before{
  content:'';position:absolute;left:1px;top:13px;width:16px;height:16px;border-radius:50%;
  background:var(--tint);
}
.plan li::after{
  content:'';position:absolute;left:5.5px;top:17px;width:7px;height:4px;
  border-left:1.6px solid var(--link);border-bottom:1.6px solid var(--link);
  transform:rotate(-45deg);
}
.plan-fine{margin:1em 0 0;font-size:var(--fs-2xs);color:var(--ink-3);text-align:center}

/* ═════════════════════════════════════════════════════════════════ FAQ ══ */
.faq{max-width:80ch}
.faq details{
  border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  margin-bottom:10px;transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.faq details[open]{border-color:var(--line-2);box-shadow:var(--shadow)}
.faq summary{
  list-style:none;cursor:pointer;padding:18px 48px 18px 20px;position:relative;
  font-size:var(--fs-md);font-weight:500;letter-spacing:var(--ls-tight);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after,.faq summary::before{
  content:'';position:absolute;right:20px;top:50%;background:var(--violet);border-radius:2px;
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.faq summary::after{width:12px;height:2px;margin-top:-1px}
.faq summary::before{width:2px;height:12px;right:25px;margin-top:-6px}
.faq details[open] summary::before{transform:rotate(90deg);opacity:0}
.faq p{margin:0 20px 20px;color:var(--ink-2);font-size:var(--fs-sm);max-width:66ch}

/* ═════════════════════════════════════════════════════════════ Schluss ══ */
.closing{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(64px,9vw,124px) 0;
}
.closing-card{
  max-width:var(--maxw);margin:0 auto;padding:clamp(44px,6vw,84px) var(--edge);
  border-radius:var(--r-lg);background:var(--grad-soft);border:1px solid var(--line);
}
.closing .display{margin-bottom:clamp(22px,2.8vw,34px)}

/* ═══════════════════════════════════════════════════════════ Fusszeile ══ */
.colophon{border-top:1px solid var(--line);padding:clamp(36px,5vw,60px) 0 clamp(28px,4vw,46px)}
.colophon-in{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:26px;
  max-width:var(--maxw);margin:0 auto;padding-inline:var(--edge);
}
.colophon .col{display:flex;flex-direction:column;gap:9px;font-size:var(--fs-sm);color:var(--ink-2)}
.colophon a:hover{color:var(--link)}
.colophon .note{font-size:var(--fs-2xs);color:var(--ink-3);line-height:1.7}

/* ── Abzeichen in der Fusszeile ────────────────────────────────────────────
   Nur Aussagen, die nachprüfbar sind. Ein Siegel, das einer Prüfung nicht
   standhält, kostet bei einer Sicherheitsfirma mehr Vertrauen, als es je
   erzeugt — und genau die Kunden, um die es geht, prüfen so etwas.
   Inline-SVG statt Bilddatei: keine zusätzliche Anfrage, skaliert scharf,
   nimmt über currentColor die Farbe des Themas an. */
.siegel{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;
        margin:clamp(18px,3vw,28px) 0 0;padding-top:clamp(16px,2.5vw,22px);
        border-top:1px solid var(--line)}
.siegel a,.siegel span{display:inline-flex;align-items:center;gap:7px;
        font-size:var(--fs-2xs);line-height:1.4;color:var(--ink-3);
        border:1px solid var(--line);border-radius:999px;padding:5px 11px;
        text-decoration:none;transition:border-color .15s,color .15s}
.siegel a:hover{border-color:var(--line-2);color:var(--ink-2)}
.siegel .m{height:18px;width:auto;flex:none;border-radius:2px}
.siegel .m-eu{height:15px;border-radius:2px}
.siegel b{color:var(--ink-2);font-weight:600}
@media (max-width:640px){ .siegel{gap:8px 10px} }

/* ══════════════════════════════════════════════════════════════ Zahlen ══
   Wo Zahlen untereinander stehen oder sich fortlaufend aendern, muss jede
   Ziffer gleich breit sein — sonst wandert die Zeile bei jeder Aenderung
   seitlich, und das Auge liest sie neu, statt nur den Wert zu erfassen.

   .zahl ist der Griff dafuer im Markup: ein Betrag, ein Zaehler, ein
   Zeitstempel bekommt die Klasse und ist damit ruhig gestellt. Sie steht hier
   an einer Stelle und nicht bei jedem Bauteil einzeln, weil sonst jede neue
   Stelle wieder vergessen wird. Gleiche Klasse, gleiche Bedeutung wie im
   Arbeitsplatz (assets/css/style.css).

   .status dd ist die Abo-Uebersicht der Kontoseite: Plan, Zustand, Datum
   untereinander. Die Seite deklariert dort bereits tabular-nums, was in
   DM Sans aber wirkungslos bleibt — die Ziffernschrift fehlte noch. */
.zahl,
.status dd{
  font-family:var(--num);
  font-variant-numeric:tabular-nums;
}
/* Zahlen im Titelschnitt bleiben in Syne — sie sollen wie Zahlen der Marke
   aussehen, nicht wie Terminalausgabe. lining-nums ist dort Pflicht: sonst
   liefert Syne Mediaevalziffern mit Unterlaenge. */
.zahl-titel{
  font-family:var(--display);
  font-variant-numeric:lining-nums tabular-nums;
  letter-spacing:var(--ls-tight);
}

/* Die Verkaufsseite und die Kontoseite tragen kein data-theme und haben in
   dieser Datei keine dunkle Palette — der Umschalter sitzt im Arbeitsplatz
   und im Wiki. Die Schrifttreppe hier ist farbfrei und gilt darum in jedem
   Thema; sollte spaeter eine dunkle Palette dazukommen, greift sie ohne
   Aenderung an diesen Regeln. Die optische Korrektur fuer helle Schrift auf
   dunklem Grund steht in assets/css/style.css, wo das Thema existiert. */

/* ══════════════════════════════════════════════════════════════ Toast ══ */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:13px 24px;border-radius:999px;
  font-size:var(--fs-sm);z-index:99;max-width:90vw;box-shadow:0 18px 44px -18px rgba(10,15,30,.6);
  animation:toastIn .32s var(--ease);
}
.toast.bad{background:var(--coral)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}

/* ═════════════════════════════════════════════════════════════ Motion ══ */
/* Der Inhalt ist grundsätzlich sichtbar. Erst wenn JavaScript läuft, darf er
   für die Enthüllung kurz ausgeblendet werden — sonst bliebe die Seite leer,
   falls das Skript scheitert oder der Beobachter nie auslöst. */
.js [data-reveal]{opacity:0;transform:translateY(18px)}
.js [data-reveal].in{opacity:1;transform:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
                       transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none}
}

/* ═════════════════════════════════════════════════════════ Responsive ══ */

/* Die Startseite trägt zusätzlich die Sprachwahl (DE/FR/IT/EN) in der Kopfzeile.
   Mit dem einheitlichen 7-teiligen Menü passt das dort nie neben Logo und
   Knöpfe — es bekommt deshalb IMMER eine eigene Zeile (erkannt an der .lang-
   Gruppe, die nur die Startseite hat). Die Unterseiten ohne Sprachwahl behalten
   das Menü inline und brechen erst unter 1200px um. */
.masthead-in:has(.lang){flex-wrap:wrap}
.masthead-in:has(.lang) .nav{order:4;flex-basis:100%;justify-content:flex-start;
  gap:10px 22px;padding-top:12px;border-top:1px solid var(--line);margin-top:4px}
.masthead-in:has(.lang) .nav-seiten{display:flex;flex-wrap:wrap;grid-auto-columns:unset}

@media(max-width:1200px){
  /* Das Menü trägt inzwischen sieben Ziele (Tools, Wissen, Leitfaden,
     Betrugswarner, Nachschlagewerk, MCP-Server, KI-Agent). Neben Logo und
     Anmelde-Knöpfen passt das erst ab ~1200px in eine Zeile — darunter
     bekommt das Menü eine eigene Zeile unter dem Logo, statt die Knöpfe aus
     dem Bild zu schieben. */
  .nav{order:4;flex-basis:100%;justify-content:flex-start;gap:10px 22px;padding-top:12px;
       border-top:1px solid var(--line);margin-top:4px}
  .masthead-in{flex-wrap:wrap;padding-bottom:10px}
  /* Die Unterseiten-Navigation trägt echte Seitennamen und feste Spaltenbreiten
     (max-content). Die schrumpfen auf dem Handy nicht, sondern liefen rechts aus
     dem Bild. Auf schmalen Schirmen deshalb umbrechendes Flex: die Namen bleiben
     ganz, verteilen sich aber auf zwei Zeilen statt über den Rand. */
  .nav-seiten{display:flex;flex-wrap:wrap;grid-auto-columns:unset;gap:10px 18px}
}
@media(max-width:560px){
  .masthead-actions .btn-quiet{display:none}
  .hero-cta .btn{width:100%}
}
@media print{.masthead,.hero-cta,.closing,.toast{display:none}}