/* =========================================================================
   SentaLaw Website: Stylesheet.
   Grundsaetze: keine fetten Schriften (max. Gewicht 500), alle Ueberschriften
   in der Serifen-Schrift, Navy #00224f als einzige Akzentfarbe, keine Emojis
   oder Pfeil-Glyphen. Illustrationen sind reine CSS-Wireframes.
   ========================================================================= */

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

:root {
  --navy: #00224f;
  --navy-2: #002868;
  --ink: #16181d;
  --body: #4a4f57;
  --line: #e4e6ea;
  --bg: #ffffff;
  --bg-soft: #eef1f5;
  --dark: #070f1e;
  --gold: #e0b34a;
  --serif: "Playfair Display", "Didot", Georgia, serif;
  --sans: "Hanken Grotesk", -apple-system, "Segoe UI", sans-serif;

  /* Farben fuer helle Schrift auf dunklem Grund. Sie gelten global, weil die
     Hero-Bausteine (.hero-mail, .hero-status) auch in der dunklen
     Schluss-Sektion wiederverwendet werden — laegen sie nur im Header,
     verschwaende dort der Rahmen des E-Mail-Feldes. body.hero-light
     ueberschreibt sie ausschliesslich INNERHALB des Heros. */
  --hero-fg: #fff;
  --hero-fg-soft: rgba(255,255,255,.87);
  --hero-fg-dim: rgba(255,255,255,.55);
  --hero-line: rgba(255,255,255,.32);
  --hero-line-soft: rgba(255,255,255,.18);
  --hero-veil: rgba(5,10,20,.45);
  --hero-hover: rgba(255,255,255,.12);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  font-size: 17px;
  line-height: 1.6;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 500; }

/* ---------- Navigation ---------- */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px;
  padding: 18px 40px;
  transition: background .25s, box-shadow .25s;
  color: #fff;
}
nav.solid { background: #fff; color: var(--ink); box-shadow: 0 1px 0 var(--line); }
/* Ueber dem Hero steht das Logo rein weiss, ab der weissen Leiste in
   seinen eigenen Farben. brightness(0) invert(1) faerbt jedes sichtbare
   Pixel weiss und laesst die Transparenz unberuehrt. */
.logo { display: flex; align-items: center; text-decoration: none; }
.logo img {
  display: block; height: 46px; width: auto;
  filter: brightness(0) invert(1);
  transition: filter .25s;
}
nav.solid .logo img { filter: none; }
.nav-center { display: flex; align-items: center; justify-content: center; gap: 28px; }
nav > .logo { justify-self: start; }
nav > .btn-sm-nav { justify-self: end; }
nav a.nav-link { color: inherit; text-decoration: none; font-size: 15px; opacity: .85; }
nav a.nav-link:hover { opacity: 1; }

/* Burger + Vollbild-Menue (nur mobil sichtbar, s. Media-Block) */
.nav-burger {
  display: none; width: 44px; height: 40px; padding: 8px 10px;
  background: none; border: 0; cursor: pointer; justify-self: end;
  flex-direction: column; justify-content: center; gap: 6px;
}
.nav-burger i { display: block; height: 2px; width: 24px; background: currentColor; transition: transform .2s, opacity .2s; }
nav.menu-open .nav-burger i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
nav.menu-open .nav-burger i:nth-child(2) { opacity: 0; }
nav.menu-open .nav-burger i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
nav.menu-open { background: #fff; color: var(--ink); box-shadow: 0 1px 0 var(--line); }
nav.menu-open .logo img { filter: none; }
html.no-scroll { overflow: hidden; }
/* Das Panel liegt als Kind der fixen Leiste hinter Logo/Burger (z-index -1),
   aber ueber der Seite, weil die Leiste selbst einen Stapelkontext bildet. */
.mobile-menu { display: none; position: fixed; inset: 0; z-index: -1; background: #fff; overflow-y: auto; padding: 100px 24px 44px; }
nav.menu-open .mobile-menu { display: block; }
.mm-link {
  display: block; font-family: var(--serif); font-size: 26px; color: var(--ink);
  text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--line);
}
.mm-group { border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.mm-label {
  display: block; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: #9aa0aa; padding: 22px 0 6px;
}
.mm-sub { display: block; font-family: var(--serif); font-size: 22px; color: var(--ink); text-decoration: none; padding: 9px 0; }
.mm-cta {
  display: block; margin-top: 30px; padding: 15px;
  background: var(--navy); border: 1px solid var(--navy); color: #fff;
  text-align: center; text-decoration: none; font-weight: 500; font-size: 15px;
}
.nav-dropdown { display: flex; align-items: center; }
.nav-menu-trigger {
  appearance: none; border: 0; background: transparent; color: inherit;
  font: inherit; font-size: 15px; cursor: pointer; opacity: .85;
  display: flex; align-items: center; gap: 9px; padding: 12px 0;
}
.nav-menu-trigger:hover, .nav-dropdown:focus-within .nav-menu-trigger { opacity: 1; }
.mega-menu {
  position: absolute; top: calc(100% - 18px); left: 40px; right: 40px;
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 24px 65px rgba(7, 15, 30, .16);
  padding: 30px; opacity: 0; visibility: hidden; transform: translateY(-8px);
  pointer-events: none; transition: opacity .18s, transform .18s, visibility .18s;
}
.nav-dropdown:hover .mega-menu, .nav-dropdown:focus-within .mega-menu, .nav-dropdown.open .mega-menu {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
.mega-menu-head { display: flex; align-items: baseline; gap: 24px; margin-bottom: 22px; }
.mega-menu-head > span { font-family: var(--serif); font-size: 24px; }
.mega-menu-head p { color: var(--body); font-size: 14px; }
.mega-menu-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mega-menu-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega-menu-card {
  position: relative; min-height: 164px; padding: 24px 22px; color: var(--ink);
  text-decoration: none; display: flex; gap: 16px; transition: background .16s;
}
.mega-menu-card + .mega-menu-card { border-left: 1px solid var(--line); }
.mega-menu-card:hover, .mega-menu-card:focus { background: var(--bg-soft); outline: 0; }
.mega-code { color: var(--navy); font-family: var(--serif); font-size: 14px; }
.mega-copy { display: block; padding-right: 8px; }
.mega-title { display: block; font-family: var(--serif); font-size: 19px; line-height: 1.25; margin-bottom: 9px; }
.mega-description { display: block; color: var(--body); font-size: 13.5px; line-height: 1.5; }
.mega-corner { position: absolute; right: 18px; bottom: 18px; width: 11px; height: 11px; border-right: 1px solid var(--navy); border-bottom: 1px solid var(--navy); }
.btn-sm-nav { border: 1px solid currentColor; padding: 9px 16px; font-size: 14px; font-weight: 500; text-decoration: none; color: inherit; }
.btn-sm-nav:hover { background: rgba(255,255,255,.12); }
nav.solid .btn-sm-nav:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---------- Buttons (ohne Pfeile) ---------- */
.btn {
  display: inline-block; text-decoration: none;
  font-weight: 500; font-size: 16px; line-height: 1;
  padding: 16px 30px;
  border: 1px solid var(--ink);
  background: #fff; color: var(--ink);
  transition: background .15s, color .15s;
}
.btn:hover { background: var(--ink); color: #fff; }
.btn-navy { border-color: var(--navy); background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-2); color: #fff; }

/* ---------- Hero (gepinnt: Tagline blendet beim Scrollen zum Zitat ueber) ---------- */
header#top { position: relative; height: 200vh; color: var(--hero-fg); }
.hero-sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero-photo {
  position: absolute; inset: 0;
  /* Foto: Kloessing (Quelldatei in landing-quellen/). Geertje sitzt bei
     ~62 % Bildbreite — die Position haelt ihr Gesicht im Ausschnitt,
     links bleibt Raum fuer die Headline. */
  background-image: url("../assets/img/hero-geertje-kloessing.jpg");
  background-size: cover;
  background-position: 62% center;
}
.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(5,10,20,.5) 0%, rgba(5,10,20,0) 160px),
    linear-gradient(90deg, rgba(7,15,30,.93) 0%, rgba(7,15,30,.78) 34%, rgba(7,15,30,.38) 62%, rgba(7,15,30,.22) 100%);
}
.hero-inner { position: relative; padding: 0 40px 90px; max-width: 1200px; width: 100%; }
.hero-stage { position: relative; }
.hero-phase { will-change: opacity, transform; }
.hero-phase.phase2 {
  position: absolute; left: 0; bottom: 0; width: 100%;
  opacity: 0; pointer-events: none;
}
/* Die Tagline im Hero. Alle anderen h1 der Seite haben eigene Groessenregeln
   (.sec-head, .detail-hero, .blog-head, .article-head, .legalpage, .fakt-head,
   .fakt-page), diese hier greift also nur oben. Der Startwert von 44px bleibt:
   er gilt erst unter 846px Fensterbreite, dort steht die Zeile schon am Rand. */
h1 {
  font-size: clamp(44px, 5.2vw, 68px); line-height: 1.08; letter-spacing: .01em;
  margin-bottom: 26px;
}
.sub {
  font-size: clamp(16.5px, 1.5vw, 20px);
  color: var(--hero-fg-soft); max-width: 620px; margin-bottom: 14px;
}
.sub:last-child { margin-bottom: 0; }

/* Zitat (Phase 2) */
.quote {
  font-family: var(--sans); font-style: italic; font-weight: 300;
  font-size: clamp(20px, 2.1vw, 29px); line-height: 1.5;
  max-width: min(1020px, 100%); margin-bottom: 24px;
  color: var(--hero-fg);
}
.quote-attr { font-size: 15px; color: var(--hero-fg-soft); }
.quote-attr .role { display: block; font-size: 13px; color: var(--hero-fg-dim); }

/* E-Mail-Feld (subtil) */
.hero-mail {
  margin-top: 46px; display: flex; max-width: 660px;
  border: 1px solid var(--hero-line);
  background: var(--hero-veil); backdrop-filter: blur(6px);
}
.hero-mail input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  color: var(--hero-fg); padding: 14px 18px; font: inherit; font-size: 15px;
}
.hero-mail input::placeholder { color: var(--hero-fg-dim); }
.hero-mail button {
  background: transparent; border: 0; border-left: 1px solid var(--hero-line);
  color: var(--hero-fg); padding: 14px 20px; font: inherit; font-size: 14.5px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
}
.hero-mail button:hover { background: var(--hero-hover); }
.hero-mail button:disabled { opacity: .55; cursor: default; }
/* Honigtopf: fuer Menschen unsichtbar, fuer einfache Bots ein Pflichtfeld.
   Nicht display:none, das ueberspringen manche Bots gezielt. */
.hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

/* Einwilligung mit Kontrollkaestchen */
.hero-consent {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; max-width: 100%;
}
.hero-consent input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px; flex: 0 0 15px; margin: 0;
  border: 1px solid var(--hero-line); background: transparent;
  cursor: pointer; position: relative;
}
.hero-consent input[type="checkbox"]:checked { border-color: var(--gold); }
.hero-consent input[type="checkbox"]:checked::after {
  content: ""; position: absolute; inset: 2px; background: var(--gold);
}
.hero-consent label { font-size: 12.5px; line-height: 1.5; color: var(--hero-fg-dim); cursor: pointer; white-space: nowrap; }
.hero-consent a { color: var(--hero-fg-soft); }

/* Rueckfrage Pilotprogramm (erscheint nach der Anmeldung) */
.hero-pilot { display: none; margin-top: 4px; max-width: 560px; }
.hero-pilot.show { display: block; }
.hero-pilot p { font-size: 15.5px; color: var(--hero-fg-soft); margin-bottom: 14px; }
.hero-pilot .opts { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-pilot button {
  background: transparent; border: 1px solid var(--hero-line); color: var(--hero-fg);
  padding: 12px 20px; font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer;
}
.hero-pilot button:hover { background: var(--hero-hover); }
.hero-status { font-size: 13.5px; color: var(--hero-fg-dim); margin-top: 12px; max-width: 520px; }
.hero-status:empty { display: none; }
.hero-status.ok { color: #7ed3a4; }
.hero-status.err { color: #f0b4b4; }

/* Vertrauensleiste */
.trustbar {
  position: relative; border-top: 1px solid var(--hero-line-soft);
  display: flex; align-items: center;
  background: var(--hero-veil); backdrop-filter: blur(4px);
}
.marquee { overflow: hidden; flex: 1; }
.marquee-track { display: flex; gap: 64px; padding: 18px 0; width: max-content; animation: slide 36s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.trust-item { font-size: 14px; color: var(--hero-fg-soft); white-space: nowrap; }
.trust-pill {
  flex-shrink: 0; margin: 0 24px; padding: 11px 18px;
  border: 1px solid var(--hero-line); color: var(--hero-fg);
  font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.trust-pill:hover { background: var(--hero-hover); }

/* ---------- Heller Hero (body.hero-light) ----------
   Helles Foto statt dunklem: dieselben Bausteine, nur andere Farben. Der
   Schleier liegt jetzt in Weiss ueber der linken Haelfte, damit die dunkle
   Schrift auf den hellen Fensterflaechen trotzdem ruhig steht. Zum
   Zurueckschalten die Klasse in index.html entfernen. */
body.hero-light header#top {
  --hero-fg: var(--ink);
  --hero-fg-soft: #333a45;
  --hero-fg-dim: #6a7280;
  --hero-line: rgba(22,24,29,.28);
  --hero-line-soft: rgba(22,24,29,.12);
  --hero-veil: rgba(255,255,255,.62);
  --hero-hover: rgba(22,24,29,.06);
}
body.hero-light .hero-photo {
  background-image: url("../assets/img/hero-geertje-hell.jpg");
  /* Y bewusst weit oben (8 %, nicht center): das Foto ist im Querformat, auf
     breiten oder flachen Fenstern wird oben viel abgeschnitten und der Kopf
     liefe sonst aus dem Bild. So bleiben ueberall ~30 bis 45 px Kopffreiheit. */
  background-position: 63% 8%;
}
body.hero-light .hero-shade {
  /* Nur ein ganz leichter Schleier am linken Rand, ausdruecklich so gewaehlt:
     das Foto soll stehen. Der Verlauf ist bei 700px auf null und damit vor
     Geertje, auf ihr liegt bei keiner Fensterbreite etwas.

     Er laeuft in PIXELN, nicht in Prozent, weil der Hero-Text linksbuendig und
     hoechstens 1200px breit ist: seine Kaesten liegen bei jeder Fensterbreite
     an denselben Pixeln. In Prozent gerechnet wuerde der Verlauf mit jeder
     Fensterbreite ueber sie hinweg wandern.

     Bewusst in Kauf genommen: das Zeilenende von Ueberschrift und Subtext
     laeuft ueber ihr dunkles Jackett, dort bleibt der Kontrast unter WCAG AA
     (gemessen 1.0:1 bis 2.9:1 statt 4.5:1). Ein linker Schleier kann das
     nicht heilen, weil er genau dort schon aus ist. */
  background: linear-gradient(90deg,
    rgba(255,255,255,.45) 0,
    rgba(255,255,255,.22) 380px,
    rgba(255,255,255,0)   700px);
}
/* Im hellen Hero endet die Textspalte frueher: rechts davon steht ihr dunkles
   Jackett, dort waere dunkle Schrift nicht lesbar. Im dunklen Hero durfte das
   Zitat breit laufen, weil helle Schrift auf dem Jackett funktioniert. */
body.hero-light .quote { max-width: min(640px, 100%); }
/* Diese Regeln MUESSEN auf den Header begrenzt bleiben: dieselben Bausteine
   stehen noch einmal in der dunklen Schluss-Sektion. */
body.hero-light header#top .hero-mail { backdrop-filter: none; }
body.hero-light header#top .hero-consent input[type="checkbox"]:checked { border-color: var(--navy); }
body.hero-light header#top .hero-consent input[type="checkbox"]:checked::after { background: var(--navy); }
body.hero-light header#top .hero-status.ok { color: #1d7a4c; }
body.hero-light header#top .hero-status.err { color: #b03a3a; }
/* Leiste ueber dem hellen Hero: dunkle Schrift, Logo schwarz. Die Farben
   bekommt es erst mit der weissen Leiste beim Scrollen (nav.solid). */
body.hero-light nav:not(.solid):not(.menu-open) { color: var(--ink); }
body.hero-light nav:not(.solid):not(.menu-open) .logo img { filter: brightness(0); }
body.hero-light nav:not(.solid):not(.menu-open) .btn-sm-nav:hover { background: rgba(22,24,29,.06); }

/* ---------- Sektionen allgemein ---------- */
section { padding: 110px 40px; }
.wrap { max-width: 1200px; margin: 0 auto; }
.wrap-narrow { max-width: 880px; margin: 0 auto; }
h2 {
  font-size: clamp(34px, 4.2vw, 54px); line-height: 1.15;
  text-align: center; margin-bottom: 18px;
}
.section-intro { text-align: center; color: var(--body); max-width: 620px; margin: 0 auto 70px; }

/* ---------- Ein-Satz-Sektion ---------- */
.statement { padding: 130px 40px; }
.statement p {
  font-size: clamp(23px, 2.8vw, 36px); line-height: 1.55;
  max-width: 1020px; margin: 0 auto; text-align: center; color: var(--ink);
}
.chip {
  display: inline-block;
  border: 1px solid var(--line); background: #fff;
  padding: 3px 16px; margin: 0 2px;
  box-shadow: 0 2px 6px rgba(10,20,40,.06);
  font-size: .68em; font-weight: 500; vertical-align: middle;
}

/* ---------- Annotation-Label ---------- */
.anno {
  position: relative; display: inline-block;
  border: 1px solid var(--navy); color: var(--navy);
  font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  padding: 9px 18px; background: #fff;
  text-align: center; line-height: 1.7;
  max-width: 100%; box-sizing: border-box;
}
.anno::before, .anno::after,
.anno .c::before, .anno .c::after {
  content: ""; position: absolute; width: 7px; height: 7px;
  border-color: var(--navy); border-style: solid;
}
.anno::before { top: -5px; left: -5px; border-width: 1px 0 0 1px; }
.anno::after  { top: -5px; right: -5px; border-width: 1px 1px 0 0; }
.anno .c::before { bottom: -5px; left: -5px; border-width: 0 0 1px 1px; }
.anno .c::after  { bottom: -5px; right: -5px; border-width: 0 1px 1px 0; }

/* ---------- Wireframe-Bausteine ---------- */
.wf {
  background: #fff; border: 1px solid var(--line);
  padding: 24px; box-shadow: 0 10px 30px rgba(10,20,40,.05);
}
.ln { height: 10px; background: #e8eaee; margin-bottom: 10px; border-radius: 2px; }
.ln:last-child { margin-bottom: 0; }
.ln.w40 { width: 40%; } .ln.w60 { width: 60%; } .ln.w75 { width: 75%; } .ln.w90 { width: 90%; }
.ln.hl { background: #f3c9c9; }
.dash { width: 42px; border-top: 2px dashed #c9ccd3; flex-shrink: 0; }
.mini-doc {
  width: 54px; height: 66px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 3px 8px rgba(10,20,40,.07); padding: 10px 9px; flex-shrink: 0;
}
.mini-doc i { display: block; height: 5px; background: #e8eaee; margin-bottom: 6px; border-radius: 1px; }
.mini-doc i:nth-child(2) { width: 70%; }
.mini-doc i:last-child { margin-bottom: 0; width: 85%; }
.mini-box {
  min-width: 54px; height: 66px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 3px 8px rgba(10,20,40,.07); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #9aa0aa;
  padding: 0 10px;
}
.dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dot.rot { background: #c62b2b; }
.dot.gruen { background: #1d7a3f; }

/* ---------- Problem-Sektion (scaile-Kartenstil) ---------- */
.problems { background: var(--bg); padding-bottom: 90px; }
.problems h2 { margin-bottom: 34px; }
.problem-intro {
  color: var(--ink); font-family: var(--serif); font-weight: 500;
  font-size: clamp(25px, 2.8vw, 35px); line-height: 1.24;
  text-align: center; margin-bottom: 18px;
}
/* minmax(0, 1fr): sonst zwingt die breiteste Illustration ihre Spalte auf,
   und die uebrigen Spalten werden gequetscht.
   subgrid: Ueberschrift, Text und Illustration teilen sich ueber alle drei
   Spalten dieselben Zeilen, also beginnen sie immer auf gleicher Hoehe. */
.problem-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.problem-col {
  padding: 52px 40px 56px;
  display: grid; grid-row: span 3; grid-template-rows: subgrid;
}
.problem-col + .problem-col { border-left: 1px solid var(--line); }
.problem-col h3 { font-size: 26px; line-height: 1.25; margin-bottom: 14px; }
.problem-col > p { color: var(--body); font-size: 15.5px; margin-bottom: 40px; }
.problem-visual { display: flex; flex-direction: column; align-items: center; gap: 0; }
.problem-visual .wf { width: 100%; }
.problem-visual .anno { margin-top: -18px; background: #fff; }
.cloud-flow { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 0 28px; }
.cloud-flow .dash { width: 20px; }
.chain { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 0 28px; }
.chain .step {
  width: 40px; height: 40px; flex-shrink: 0;
  border: 1px solid var(--line); background: #fff;
  box-shadow: 0 3px 8px rgba(10,20,40,.07);
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; letter-spacing: .08em; color: #9aa0aa;
}
.chain .step.on { border-color: var(--navy); color: var(--navy); }
.chain .dash { width: 12px; }
.problem-punch {
  text-align: center; font-family: var(--serif);
  font-size: clamp(30px, 3.6vw, 46px); line-height: 1.2; margin-top: 84px;
}

/* ---------- Weg eines Mandats (horizontales Scrollen) ----------
   Der Titel sitzt oben, die Karten direkt darunter. Der freie Raum liegt
   unten: dort schiebt sich am Ende der naechste, helle Abschnitt darueber
   (siehe .why margin-top), waehrend die letzte Karte stehen bleibt. */
.weg { background: var(--bg-soft); padding: 0; height: 340vh; position: relative; }
.weg-sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 34px;
  padding: 128px 0 0;
}
.weg-head { text-align: center; padding: 0 40px; }
.weg-head h2 { margin-bottom: 20px; }
.weg-progress { width: 260px; height: 2px; background: #d5dae2; margin: 0 auto; }
.weg-progress i { display: block; height: 100%; width: 0; background: var(--navy); transition: width .1s linear; }
.weg-viewport { flex: 0 0 auto; display: flex; align-items: flex-start; }
.weg-track {
  display: flex; align-items: stretch; gap: 48px;
  padding: 0 calc((100vw - var(--panel-w)) / 2);
  will-change: transform;
}
.panel {
  width: var(--panel-w); flex-shrink: 0;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 14px 40px rgba(10,20,40,.06);
  padding: 54px 58px;
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 52px; align-items: center;
}
.panel h3 {
  display: flex; align-items: baseline; gap: 16px;
  font-size: clamp(26px, 2.4vw, 34px); line-height: 1.2; margin-bottom: 14px;
}
.panel h3 .no { color: var(--navy); font-size: .82em; }
.panel p { color: var(--body); font-size: 16px; }
.panel-visual { display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0; }
.panel-visual .anno { margin-top: -16px; }

/* Station 1: Formular */
.intake { width: 88%; }
.intake .field-row { display: flex; gap: 10px; margin-bottom: 12px; }
.intake .field { flex: 1; height: 34px; border: 1px solid var(--line); background: #fafbfc; }
.intake .upload {
  height: 64px; border: 1.5px dashed #c9ccd3; background: #fafbfc;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: #9aa0aa;
}

/* Station 2: zwei Szenarien */
.decision { width: 100%; display: flex; flex-direction: column; gap: 18px; margin-bottom: 26px; }
.scenario { border: 1px solid var(--line); background: #fff; padding: 20px 22px; box-shadow: 0 6px 18px rgba(10,20,40,.05); }
.scenario-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.scenario-tag { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); }
.scenario p { font-size: 14.5px; color: var(--body); }

/* Station 3: drehbare Walze. --bitem ist die Zeilenhoehe; Fenster = 3 Zeilen,
   Listen-Padding = 1 Zeile, damit der aktive Eintrag mittig steht. Mobil wird
   --bitem groesser, weil die Texte dort umbrechen (s. Media-Block). */
.barrel { --bitem: 96px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.barrel-window {
  position: relative; width: 100%; height: calc(var(--bitem) * 3); overflow: hidden;
  border: 1px solid var(--line); background: #fff;
  box-shadow: 0 10px 30px rgba(10,20,40,.05);
  cursor: grab; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}
.barrel-window:active { cursor: grabbing; }
.barrel-list { list-style: none; margin: 0; padding: var(--bitem) 0; transition: transform .45s cubic-bezier(.22,.61,.36,1); }
.barrel-item {
  height: var(--bitem); padding: 0 30px;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  opacity: .3; transform: scale(.94);
  transition: opacity .35s, transform .35s;
}
.barrel-item.on { opacity: 1; transform: scale(1); }
.barrel-eyebrow {
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--navy);
}
.barrel-title { font-size: 17px; line-height: 1.35; color: var(--ink); }
.barrel-nav {
  width: 34px; height: 26px; padding: 0; cursor: pointer;
  background: transparent; border: 0; color: #9aa0aa;
  display: flex; align-items: center; justify-content: center;
}
.barrel-nav:hover { color: var(--navy); }
.barrel-nav i {
  display: block; width: 9px; height: 9px;
  border-left: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
}
.barrel-nav.up i { transform: rotate(45deg) translate(1px, 1px); }
.barrel-nav.down i { transform: rotate(-135deg) translate(1px, 1px); }

/* Station 4: Portal */
.portal { width: 92%; display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.portal-row {
  display: flex; align-items: center; gap: 16px;
  border: 1px solid var(--line); background: #fff; padding: 14px 18px;
  box-shadow: 0 3px 8px rgba(10,20,40,.05);
}
.portal-row .name { font-size: 14px; font-weight: 500; min-width: 130px; }
.portal-row .ln { flex: 1; margin: 0; }

/* ---------- Warum SentaLaw und Gruenderteam ---------- */
.why { background: var(--bg); position: relative; z-index: 2; padding-top: 120px; }
.why-intro { max-width: 860px; }
.why-intro strong { display:block; font-weight: 600; color: var(--ink); margin-top:28px; }

.founder-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 30px; margin: 78px 0 24px;
}
.founder-head h3 { font-size: clamp(30px, 3.2vw, 42px); line-height: 1.12; }
.founder-accordion {
  display: flex; width: 100%; height: min(660px, 72vh); min-height: 560px;
  overflow: hidden; border: 1px solid var(--line); background: var(--bg-soft);
}
.founder-card {
  position: relative; display: block; flex: .72 1 0; min-width: 0;
  overflow: hidden; border: 0; border-right: 1px solid rgba(255,255,255,.65);
  background: #dfe4ea; color: #fff; text-align: left; text-decoration: none;
  font: inherit; cursor: pointer;
  transition: flex .58s cubic-bezier(.2,.72,.24,1), filter .3s;
}
.founder-card:last-child { border-right: 0; }
.founder-card.active { flex: 2.2 1 0; }
.founder-card:focus-visible { outline: 2px solid var(--navy); outline-offset: -4px; }
.founder-photo {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: cover; filter: saturate(.86); transition: transform .7s cubic-bezier(.2,.72,.24,1), filter .3s;
}
/* Beide Portraits sollen mit der Kopfoberkante auf gleicher Hoehe stehen.
   Den groben Abgleich macht der Zuschnitt: in emil-zawadzki-portrait.jpg
   beginnt der Kopf bei 3.9 % der Bildhoehe, genauso wie bei Geertje. Damit
   passt derselbe Ausschnitt in beiden Kartenzustaenden, und es braucht keine
   Sonderregel mehr fuer die aufgeklappte Karte. Beim Neuzuschnitt eines der
   beiden Fotos also die 3.9 % halten. */
.founder-card:first-child .founder-photo { object-position: center 1%; }
.founder-card:nth-child(2) .founder-photo { object-position: center top; }
.founder-card.active .founder-photo { transform: scale(1.018); filter: saturate(.96); }
.founder-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,15,30,.03) 28%, rgba(7,15,30,.82) 100%);
}
.founder-card-copy {
  position: absolute; left: 34px; right: 34px; bottom: 34px;
  display: flex; flex-direction: column; align-items: flex-start;
}
.founder-name {
  display: block; margin-bottom: 10px; color: rgba(255,255,255,.8);
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
}
.founder-title {
  display: block; max-width: 650px; font-family: var(--serif);
  font-size: clamp(25px, 2.8vw, 39px); line-height: 1.17;
}
.founder-text {
  display: block; max-width: 690px; max-height: 0; margin-top: 0;
  overflow: hidden; opacity: 0; transform: translateY(12px);
  color: rgba(255,255,255,.9); font-size: 16px; line-height: 1.55;
  transition: opacity .3s .15s, transform .4s .12s, max-height .4s, margin .4s;
}
.founder-card.active .founder-text {
  max-height: 190px; margin-top: 15px; opacity: 1; transform: translateY(0);
}
.founder-card:not(.active) .founder-card-copy { left: 24px; right: 24px; }
.founder-card:not(.active) .founder-title { font-size: clamp(20px, 1.65vw, 25px); }

/* CLP bleibt bewusst ruhiger und heller. Logo und Wortmarke sitzen hoch,
   damit sie auch in der schmalen, geschlossenen Karte sofort erkennbar sind. */
.founder-clp { background: #f7f4ee; color: #16233a; }
.founder-clp-brand {
  position: absolute; top: 42px; left: 30px; right: 30px;
  display: flex; align-items: center; gap: 13px; color: #16233a;
}
.founder-clp-brand img { display: block; width: auto; height: 43px; }
.founder-clp-brand span { font-family: var(--serif); font-size: 29px; line-height: 1; letter-spacing: .055em; }
.founder-clp .founder-shade {
  background: linear-gradient(180deg, rgba(247,244,238,0) 34%, rgba(239,231,216,.96) 100%);
}
.founder-clp .founder-name { color: #8c6d48; }
.founder-clp .founder-text { color: #47505c; }

/* Schmaler Sicherheitsblock unterhalb des Gruenderteams. */
.why-security-strip {
  display: grid; grid-template-columns: 245px minmax(0, 1fr);
  align-items: center; gap: 28px; margin-top: 28px;
  border: 1px solid var(--line); padding: 26px 30px;
}
.security-strip-head h3 { font-size: 29px; line-height: 1.2; margin-bottom: 7px; }
.security-strip-head p { color: var(--body); font-size: 16px; line-height: 1.45; }
.security-strip-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.security-strip-point { min-width: 0; padding: 0 22px; }
.security-strip-point + .security-strip-point { border-left: 1px solid var(--line); }
.security-strip-point span {
  display: block; color: var(--ink); font-family: var(--serif);
  font-size: 21px; line-height: 1.25; margin-bottom: 6px;
}
.security-strip-point p { color: var(--body); font-size: 15px; line-height: 1.6; }

/* Datensicherheits-Punkte auf der Unterseite */
.sec-points { display: flex; flex-direction: column; gap: 16px; margin-bottom: 30px; }
.sec-point { border-left: 1px solid var(--navy); padding-left: 16px; }
.sec-point .t { display: block; font-weight: 500; margin-bottom: 2px; }
.sec-point .d { display: block; color: var(--body); font-size: 15px; }
.more-link {
  color: var(--navy); font-weight: 500; text-decoration: none;
  border-bottom: 1px solid var(--navy); padding-bottom: 2px;
}
.more-link:hover { color: var(--navy-2); }
.security-more {
  display: inline-block; margin-top: 17px; padding: 9px 15px;
  border: 1px solid var(--navy); font-size: 14px; line-height: 1.2;
}
.security-more:hover { background: var(--navy); color: #fff; }

/* ---------- Plan ---------- */
.plan {
  position: relative; z-index: 2; background: var(--bg);
  padding-top: 148px; padding-bottom: 80px;
}
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 46px; }
.plan-step { border: 1px solid var(--line); padding: 30px 28px; }
.plan-step .no { font-family: var(--serif); font-size: 42px; color: var(--navy); display: block; margin-bottom: 8px; }
.plan-step h3 { font-size: 21px; margin-bottom: 6px; }
.plan-step p { color: var(--body); font-size: 15px; }
.plan-note { text-align: center; color: var(--body); font-size: 16px; }
.plan-note + .plan-note { margin-top: 8px; }

/* ---------- Leadmagnet ---------- */
.lead { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 70px 40px; }
.lead .wrap { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.lead h3 { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 6px; }
.lead p { color: var(--body); max-width: 560px; }

/* ---------- Dunkle Schluss-Sektion ---------- */
.final { background: var(--dark); color: #fff; padding: 120px 40px; }
.final .wrap { display: block; max-width: 840px; }
.final h2 { text-align: left; margin-bottom: 20px; }
.final .affirm { color: rgba(255,255,255,.87); font-size: 18px; margin-bottom: 16px; }
.final .pilot-note { color: rgba(255,255,255,.87); font-size: 18px; max-width: 680px; }
.final .hero-mail { max-width: 460px; }

/* ---------- FAQ ---------- */
.faq h2 { text-align: left; }
.faq-head { display: flex; align-items: baseline; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: 50px; }
.faq-head a { color: var(--navy); }
details { border-top: 1px solid var(--line); }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  padding: 24px 4px; font-size: 18px; font-weight: 500;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 26px; font-weight: 400; color: var(--navy); transition: transform .2s; }
details[open] summary::after { transform: rotate(45deg); }
details .answer { padding: 0 4px 26px; color: var(--body); max-width: 760px; }

/* ---------- Unterseite: Sicherheit und Transparenz ---------- */
.secpage { padding-top: 70px; }
.sec-head { padding: 100px 40px 30px; text-align: center; }
.sec-head h1 { font-size: clamp(38px, 4.6vw, 60px); line-height: 1.12; margin-bottom: 16px; }
.sec-intro { color: var(--body); max-width: 560px; margin: 0 auto; }

.sec-flow { padding: 70px 40px 90px; }
.flow-row, .flow-connector {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 0 70px; align-items: center;
}
.flow-row { padding: 30px 0; }
.flow-left { display: flex; align-items: center; gap: 0; }
/* DE und LLM stehen exakt untereinander: gleiche feste Spalte am rechten
   Rand der Diagrammhaelfte, die Punktlinie laeuft mittig dazwischen. */
.flow-left-end { justify-content: flex-end; }
.flow-slot { width: 200px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; }
.flow-connector .flow-left { justify-content: flex-end; }
.flow-node { display: flex; flex-direction: column; align-items: center; gap: 14px; flex-shrink: 0; }
.flow-caption {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: #9aa0aa; text-align: center; max-width: 190px; line-height: 1.6;
}
.flow-box {
  width: 118px; height: 118px;
  border: 1.5px solid var(--navy); color: var(--navy); background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 34px; letter-spacing: .04em;
  box-shadow: 0 10px 30px rgba(10,20,40,.07);
}
.doc-fan { position: relative; width: 96px; height: 92px; }
.doc-fan .mini-doc { position: absolute; top: 0; left: 0; }
.doc-fan .mini-doc:nth-child(2) { top: 10px; left: 18px; }
.doc-fan .mini-doc:nth-child(3) { top: 20px; left: 36px; }

/* Durchgezogen = bleibt im Haus */
.flow-line { flex: 1; position: relative; margin: 0 22px 42px; }
.flow-line::before { content: ""; display: block; }
.solid-line::before { border-top: 2px solid var(--navy); }
.flow-line span {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy); white-space: nowrap;
}

/* Gepunktet und senkrecht = nur zur Verarbeitung, Beschriftung links daneben */
.vline { position: relative; height: 110px; width: 0; border-left: 2px dotted #a6adba; }
.vline span {
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: #9aa0aa; white-space: nowrap;
}

.flow-text h3 { font-size: 24px; margin-bottom: 10px; }
.flow-text > p { color: var(--body); font-size: 15.5px; margin-bottom: 20px; }
.flow-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.flow-chips .chip { font-size: 13px; padding: 5px 14px; }
.flow-text .sec-points { margin-bottom: 0; }

/* ---------- Digitalisierungs-Check ---------- */
.ck-meta { color: #767c86; font-size: 14.5px; margin: 22px auto 30px; max-width: 520px; }
.sec-head .ck-start { margin: 0 auto; }
.ck-quiz { padding: 60px 40px 90px; }
.ck-result { padding: 70px 40px 90px; }
.ck-quiz.is-hidden, .ck-result.is-hidden, .sec-head.is-hidden, .ck-preview.is-hidden { display: none; }

.ck-progress { display: flex; align-items: center; gap: 16px; margin-bottom: 34px; }
.ck-progress span:first-child {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #9aa0aa; white-space: nowrap;
}
.ck-bar { flex: 1; height: 2px; background: var(--line); position: relative; }
.ck-bar i { position: absolute; inset: 0 auto 0 0; background: var(--navy); transition: width .25s; }

.ck-q { font-size: clamp(24px, 3vw, 32px); line-height: 1.25; margin-bottom: 10px; text-align: left; }
.ck-hint { color: var(--body); font-size: 15px; margin-bottom: 28px; }

.ck-options { display: flex; flex-direction: column; gap: 10px; }
.ck-opt {
  font-family: var(--sans); text-align: left; cursor: pointer;
  border: 1px solid var(--line); background: #fff; padding: 15px 20px;
  display: flex; align-items: baseline; gap: 10px; transition: border-color .15s, background .15s;
}
.ck-opt:hover { border-color: var(--navy); }
.ck-opt.is-on { border-color: var(--navy); background: var(--navy); color: #fff; }
.ck-opt-label { font-size: 16px; }
.ck-opt-note { font-size: 13px; color: #9aa0aa; }
.ck-opt.is-on .ck-opt-note { color: rgba(255,255,255,.7); }

/* Zwei Rechtsgebietsspalten, damit die 22 Optionen nicht endlos scrollen */
.ck-options:has(.ck-opt:nth-child(12)) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.ck-matrix { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ck-matrix th { font-weight: 400; text-align: left; }
.ck-matrix thead th:first-child { width: 36%; }
.ck-matrix thead th {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #9aa0aa;
  padding: 0 4px 10px; text-align: center; width: 16%;
}
.ck-matrix tbody tr { border-top: 1px solid var(--line); }
.ck-matrix tbody th { padding: 14px 16px 14px 0; }
.ck-mrow { display: block; font-size: 15.5px; }
.ck-mhint { display: block; font-size: 13px; color: #9aa0aa; margin-top: 2px; }
.ck-matrix td { padding: 6px 3px; }
.ck-cell {
  width: 100%; cursor: pointer; font-family: var(--sans); font-size: 12px;
  border: 1px solid var(--line); background: #fff; color: #9aa0aa; padding: 12px 2px;
  transition: border-color .15s, background .15s, color .15s;
}
/* Auf dem Desktop stehen die Stufen in der Kopfzeile, die Zelle zeigt deshalb
   nur ein Ziel. Ohne diesen Punkt sieht ein leeres Rechteck nicht anklickbar
   aus. Auf dem Telefon faellt die Kopfzeile weg und die Beschriftung wandert
   in die Zelle. */
.ck-cell span { display: none; }
.ck-cell::before {
  content: ""; display: block; width: 11px; height: 11px; margin: 0 auto;
  border: 1px solid #c4c9d1; border-radius: 50%; transition: background .15s, border-color .15s;
}
.ck-cell:hover { border-color: var(--navy); }
.ck-cell:hover::before { border-color: var(--navy); }
.ck-cell.is-on { border-color: var(--navy); background: var(--navy); }
.ck-cell.is-on::before { background: #fff; border-color: #fff; }

.ck-warn { color: #a3352f; font-size: 14px; min-height: 20px; margin-top: 16px; }
.ck-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 12px; }
.ck-back, .ck-restart {
  font-family: var(--sans); font-size: 14px; background: none; border: none; cursor: pointer;
  color: var(--body); text-decoration: underline; text-underline-offset: 4px; padding: 8px 0;
}
.ck-restart { margin-top: 46px; }

/* Ergebnis */
.ck-r-title { font-size: 22px; text-align: left; margin: 10px 0 6px; }
.ck-figure { font-family: var(--serif); font-size: clamp(46px, 7vw, 76px); line-height: 1; color: var(--navy); }
.ck-about { font-family: var(--sans); font-size: 17px; color: #9aa0aa; letter-spacing: .02em; }
.ck-figure-unit { color: var(--body); font-size: 15px; margin-top: 12px; }
.ck-cap { color: #767c86; font-size: 14px; margin-top: 14px; max-width: 640px; }
.ck-r-sub { font-size: 20px; text-align: left; margin: 54px 0 20px; }

.ck-befunde { display: flex; flex-direction: column; gap: 2px; }
.ck-befund { border-left: 2px solid var(--navy); padding: 16px 0 18px 18px; }
.ck-befund-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 8px; }
.ck-befund-label { font-weight: 500; font-size: 16.5px; }
.ck-befund-std { font-family: var(--serif); font-size: 19px; color: var(--navy); white-space: nowrap; }
.ck-befund p { color: var(--body); font-size: 15px; margin-bottom: 4px; }
.ck-befund p b { font-weight: 500; color: var(--ink); }
.ck-bleibt { color: #767c86; }
.ck-befund-extra { border-left-color: var(--gold); }

.ck-risiko { border: 1px solid var(--line); padding: 24px 26px; }
.ck-risiko-label {
  display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--navy); margin-bottom: 10px;
}
.ck-risiko p { color: var(--body); font-size: 15.5px; }
.ck-risiko-2 { border-left: 3px solid var(--gold); }
.ck-risiko-2 .ck-risiko-label { color: #9a7418; }
.ck-risiko-3 { border-left: 3px solid #a3352f; }
.ck-risiko-3 .ck-risiko-label { color: #a3352f; }

.ck-exit { background: var(--bg-soft); padding: 34px 32px; margin-top: 54px; }
.ck-exit h3 { font-size: 22px; text-align: left; margin-bottom: 10px; }
.ck-exit p { color: var(--body); margin-bottom: 22px; }
.ck-exit-zusatz { background: none; border: 1px solid var(--line); margin-top: 2px; }
.ck-link { color: var(--navy); text-decoration: underline; text-underline-offset: 4px; font-size: 15px; }

.ck-mail { margin-top: 54px; padding-top: 42px; border-top: 1px solid var(--line); }
.ck-mail h3 { font-size: 20px; text-align: left; margin-bottom: 8px; }
.ck-mail > p { color: var(--body); font-size: 15px; margin-bottom: 20px; max-width: 640px; }
.ck-mail-row { display: flex; gap: 10px; max-width: 620px; }
.ck-mail-row input {
  flex: 1; font-family: var(--sans); font-size: 15px; padding: 14px 16px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
}
.ck-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 13.5px; color: var(--body); max-width: 620px; }
.ck-mail-status { font-size: 14px; min-height: 20px; margin-top: 12px; }
.ck-mail-status.ok { color: var(--navy); }
.ck-mail-status.err { color: #a3352f; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.ck-model { margin-top: 40px; border-top: 1px solid var(--line); }
.ck-model summary { font-size: 16px; padding: 22px 4px; }
.ck-model > p, .ck-model .ck-steps { max-width: 820px; color: var(--body); }

/* Was der Check fragt und wie er rechnet: steht vor dem Start sichtbar auf der
   Seite und ist damit zugleich der Inhalt, den Crawler sehen. */
.ck-preview { background: var(--bg-soft); border-top: 1px solid var(--line); padding: 84px 40px 96px; }
.ck-preview h2 { text-align: left; font-size: 28px; margin-bottom: 14px; }
.ck-preview-intro { color: var(--body); max-width: 820px; margin-bottom: 30px; }
.ck-preview-sub { font-size: 20px; text-align: left; margin: 50px 0 18px; }
.ck-steps { color: var(--body); font-size: 15px; max-width: 820px; padding-left: 20px; }
.ck-steps li { margin-bottom: 12px; }
.ck-taetigkeiten { max-width: 900px; }
.ck-taetigkeiten dt { font-weight: 500; margin-top: 18px; }
.ck-taetigkeiten dd { color: var(--body); font-size: 15px; margin-top: 4px; }
.ck-taetigkeiten dd b { font-weight: 500; color: var(--ink); }
.ck-disclaimer { color: #767c86; font-size: 13.5px; max-width: 820px; margin-top: 34px; }

/* Umschalter SentaLaw / verbreiteter Aufbau */
.flow-switch { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.flow-switch-label {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #9aa0aa;
}
.flow-switch-buttons { display: inline-flex; border: 1px solid var(--line); background: #fff; }
.flow-tab {
  font-family: var(--sans); font-size: 14px; padding: 9px 20px; cursor: pointer;
  background: none; border: none; color: var(--body); transition: background .15s, color .15s;
}
.flow-tab + .flow-tab { border-left: 1px solid var(--line); }
.flow-tab:hover { background: var(--bg-soft); }
.flow-tab.is-on { background: var(--navy); color: #fff; }
.flow-panel.is-hidden { display: none; }

.flow-badge { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 22px 0 4px; }
.flow-badge strong {
  font-family: var(--serif); font-size: 26px; font-weight: 400; color: var(--navy);
}
.flow-badge span { color: var(--body); font-size: 15px; }
.flow-theirs .flow-badge strong { color: #a3352f; }
.flow-theirs .flow-box { border-color: #a3352f; color: #a3352f; }
.flow-theirs .sec-point { border-left-color: #a3352f; }

/* Mehrere Empfaenger statt einem: 2x2 in derselben Spaltenbreite */
.flow-boxes { display: grid; grid-template-columns: repeat(2, 56px); gap: 6px; margin-bottom: 14px; }
.flow-box-sm {
  width: 56px; height: 56px; border: 1.5px solid #a3352f; color: #a3352f; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 14px; letter-spacing: .02em;
  box-shadow: 0 6px 18px rgba(10,20,40,.06);
}
.flow-note { color: #767c86; font-size: 14px; max-width: 760px; margin-top: 26px; }

/* Drei Fragen an jeden Anbieter */
.sec-fragen { border-top: 1px solid var(--line); padding: 84px 40px 90px; }
.sec-fragen h2 { text-align: left; margin-bottom: 14px; }
.fragen-intro { color: var(--body); max-width: 760px; margin-bottom: 38px; }
.fragen-list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; counter-reset: frage; }
.fragen-list li { counter-increment: frage; border-top: 2px solid var(--navy); padding-top: 18px; }
.fragen-list li::before {
  content: counter(frage); display: block; font-family: var(--serif); font-size: 26px;
  color: var(--gold); margin-bottom: 8px;
}
.fragen-q { display: block; font-weight: 500; font-size: 17px; margin-bottom: 8px; }
.fragen-a { display: block; color: var(--body); font-size: 15px; }

/* Warum Pseudonymisierung nicht die Antwort ist */
.pseudo { margin-top: 56px; padding-top: 46px; border-top: 1px solid var(--line); }
.pseudo h3 { font-size: 26px; margin-bottom: 12px; }
.pseudo-intro { color: var(--body); max-width: 900px; margin-bottom: 30px; }
.pseudo .sec-points { max-width: 900px; margin-bottom: 0; }
.pseudo-concl-title {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #9aa0aa;
  margin: 38px 0 16px;
}
.pseudo-concl .sec-point { border-left-color: var(--gold); }
.pseudo-note { color: #767c86; font-size: 14.5px; max-width: 900px; margin-top: 30px; }

.sec-trust { background: var(--bg-soft); border-top: 1px solid var(--line); padding: 100px 40px 110px; }
.sec-trust h2 { text-align: left; margin-bottom: 26px; }
.sec-trust p { color: var(--body); max-width: 1100px; margin-bottom: 18px; }
.sec-trust p:last-child { margin-bottom: 0; }

/* ---------- Unterseite: Funktionen ---------- */
.fxpage { padding-top: 70px; }
.fx-section { padding: 80px 40px; }
.fx-alt { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fx-points {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 60px; max-width: 940px; margin: 0 auto;
}
.fx-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.wf-card {
  background: #fff; border: 1px solid var(--line);
  padding: 34px 32px 38px;
  box-shadow: 0 10px 30px rgba(10,20,40,.05);
}
.fx-pill {
  display: inline-block; background: #e9eef6; color: var(--navy);
  font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  padding: 8px 16px; margin-bottom: 20px;
}
.wf-card h3 { font-size: 23px; line-height: 1.25; margin-bottom: 8px; }
.wf-card .sub { color: var(--body); font-size: 15px; margin-bottom: 26px; }
.wf-row { display: flex; gap: 14px; margin-bottom: 18px; }
.wf-row:last-child { margin-bottom: 0; }
.fx-ico {
  width: 38px; height: 38px; flex: 0 0 38px; background: #e9eef6;
  display: flex; align-items: center; justify-content: center;
}
.fx-ico i { width: 8px; height: 8px; background: var(--navy); display: block; }
.wf-row .t { display: block; font-weight: 500; margin-bottom: 2px; }
.wf-row .d { display: block; color: var(--body); font-size: 14px; }
.fx-note { text-align: center; color: var(--body); margin-top: 44px; }
.fx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.fx-tile { border: 1px solid var(--line); background: #fff; padding: 28px 26px; }
.fx-tile .t { font-family: var(--serif); font-size: 21px; display: block; margin-bottom: 6px; }
.fx-tile .d { color: var(--body); font-size: 14.5px; }
.fx-addins p { color: var(--body); max-width: 860px; margin: 0 auto; text-align: center; }

/* ---------- Funktions-Detailseiten ---------- */
.detailpage { padding-top: 82px; }
.detail-hero { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 96px 40px 88px; }
.detail-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 90px; align-items: center; }
.detail-eyebrow { display: block; color: var(--navy); font-size: 12px; letter-spacing: .17em; text-transform: uppercase; margin-bottom: 22px; }
.detail-hero h1 { font-size: clamp(44px, 5.2vw, 70px); line-height: 1.07; max-width: 720px; margin-bottom: 22px; }
body[data-page="portal"] .detail-hero h1 { font-size: clamp(40px, 4.35vw, 60px); }
.detail-hero p { color: var(--body); max-width: 650px; font-size: 18px; }
.detail-hero-visual { background: #fff; border: 1px solid var(--line); padding: 26px; box-shadow: 0 18px 48px rgba(7,15,30,.07); }
.detail-visual-label { display: inline-block; color: var(--navy); border: 1px solid var(--navy); padding: 6px 10px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 22px; }
.detail-hero-row { display: grid; grid-template-columns: 30px minmax(60px, 1fr) 230px; gap: 14px; align-items: center; padding: 15px 0; border-top: 1px solid var(--line); }
.detail-hero-row span { color: var(--navy); font-family: var(--serif); font-size: 13px; }
.detail-hero-row i { height: 1px; background: var(--line); }
.detail-hero-row b { font-weight: 400; font-size: 14px; }
.detail-sections { padding: 30px 40px 70px; }
.detail-section { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; padding: 90px 0; border-bottom: 1px solid var(--line); }
.detail-section.reverse .detail-illustration { order: 2; }
.detail-section.reverse .detail-copy { order: 1; }
.detail-copy h2 { text-align: left; font-size: clamp(34px, 4vw, 50px); line-height: 1.15; margin-bottom: 20px; }
.detail-copy > p { color: var(--body); margin-bottom: 28px; max-width: 570px; }
.detail-points { display: grid; gap: 12px; }
.detail-points span { display: flex; align-items: center; gap: 12px; font-size: 14.5px; }
.detail-points i { width: 20px; height: 1px; background: var(--navy); flex: 0 0 20px; }
.detail-illustration { position: relative; min-height: 430px; background: linear-gradient(145deg, #e9edf3, #f6f7f9); border: 1px solid #d9dee7; display: grid; place-items: center; overflow: hidden; }
.detail-chat, .detail-status { width: 66%; display: grid; gap: 15px; }
.detail-chat i { display: block; height: 46px; border: 1px solid #bdc6d4; background: #fff; }
.detail-chat i:nth-child(even) { margin-left: 22%; border-color: var(--navy); }
.detail-docs { position: relative; width: 200px; height: 210px; }
.detail-docs i { position: absolute; inset: 0; background: #fff; border: 1px solid #bdc6d4; box-shadow: 0 10px 24px rgba(7,15,30,.06); }
.detail-docs i:nth-child(1) { transform: rotate(-8deg) translate(-30px, 8px); }
.detail-docs i:nth-child(2) { transform: rotate(7deg) translate(28px, 7px); }
.detail-video { width: 72%; height: 230px; border: 1px solid #bdc6d4; background: #fff; position: relative; display: grid; place-items: center; }
.detail-video span { width: 76px; height: 76px; border-radius: 50%; border: 1px solid var(--navy); }
.detail-video i { position: absolute; bottom: 20px; width: 42px; height: 8px; background: #d6dde7; }
.detail-video i:first-of-type { left: 35%; }.detail-video i:last-child { right: 35%; }
.detail-paper { width: 220px; height: 270px; border: 1px solid #bdc6d4; background: #fff; padding: 46px 30px; display: grid; gap: 18px; box-shadow: 0 14px 30px rgba(7,15,30,.07); }
.detail-paper i { display: block; height: 1px; background: #bdc6d4; }
.detail-paper b { display: block; height: 36px; border-bottom: 1px solid var(--navy); transform: rotate(-4deg); }
.detail-status i { height: 58px; border: 1px solid #bdc6d4; background: #fff; position: relative; }
.detail-status i::before { content: ""; position: absolute; left: 18px; top: 50%; width: 10px; height: 10px; border: 1px solid var(--navy); transform: translateY(-50%); }
.detail-archive { width: 230px; height: 180px; border: 1px solid var(--navy); background:#fff; position:relative; }
.detail-archive span { position:absolute; left:30px; right:30px; top:45px; height:1px; background:#bdc6d4; box-shadow:0 30px #bdc6d4, 0 60px #bdc6d4; }
.detail-archive i { position:absolute; left:80px; right:80px; top:-18px; height:32px; border:1px solid var(--navy); background:#fff; }
.detail-chain { display:flex; align-items:center; width:78%; }
.detail-chain i { width:72px; height:72px; border:1px solid var(--navy); background:#fff; flex:0 0 72px; }
.detail-chain b { height:1px; background:#9ba8b9; flex:1; }
.detail-analysis { width:70%; background:#fff; border:1px solid #bdc6d4; padding:36px; display:grid; gap:20px; }
.detail-analysis i { height:1px; background:#bdc6d4; }.detail-analysis span { height:42px; border-left:3px solid var(--navy); background:#e9eef6; }
.detail-app { width:220px; height:240px; border:1px solid #bdc6d4; background:#fff; padding:26px; display:grid; gap:24px; }
.detail-app strong { font-family:var(--serif); font-weight:400; font-size:54px; color:var(--navy); }.detail-app i { height:1px; background:#bdc6d4; }
.detail-bridge { width:80%; display:flex; align-items:center; gap:20px; }.detail-bridge span { border:1px solid var(--navy); background:#fff; padding:28px 18px; flex:0 0 145px; text-align:center; font-size:13px; }.detail-bridge i { height:1px; background:var(--navy); flex:1; }
.detail-closing { background: var(--bg-soft); color:var(--ink); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding: 70px 40px; }
.detail-closing .wrap { display:flex; align-items:center; justify-content:flex-start; }
.detail-closing p { font-family:var(--serif); font-size:clamp(26px,3vw,38px); line-height:1.3; max-width:1000px; }

/* Staerkere, produktaehnliche Funktionsgrafiken */
.mock-window { width:min(88%, 470px); min-height:300px; background:#fff; border:1px solid #cbd3df; box-shadow:0 20px 46px rgba(7,15,30,.12); position:relative; overflow:hidden; }
.mock-top { height:52px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 22px; }
.mock-top span { font-family:var(--serif); font-size:17px; }.mock-top i { width:8px; height:8px; border:1px solid var(--navy); }
.mock-conversation { display:grid; grid-template-columns:72px 1fr; grid-template-rows:52px 1fr; }
.mock-conversation .mock-top { grid-column:1 / -1; }.mock-sidebar { background:#e8edf5; border-right:1px solid #d5dce7; padding:22px; display:grid; align-content:start; gap:18px; }
.mock-sidebar b { width:26px; height:26px; border:1px solid var(--navy); background:#fff; }.mock-messages { padding:25px 28px; display:grid; gap:18px; align-content:center; }
.mock-messages p { max-width:78%; }.mock-messages p.own { margin-left:auto; }.mock-messages i { display:block; color:#7b8491; font-style:normal; font-size:10px; text-transform:uppercase; letter-spacing:.12em; margin-bottom:4px; }
.mock-messages span { display:block; padding:12px 14px; background:#eef2f7; border-left:2px solid #bdc8d7; font-size:12px; }.mock-messages .own span { background:#e5edf8; border-color:var(--navy); }
.mock-upload { padding-bottom:22px; }.upload-progress { margin:20px 22px 12px; height:8px; background:#e7ebf1; position:relative; }.upload-progress b { display:block; width:75%; height:100%; background:var(--navy); }.upload-progress span { position:absolute; right:0; top:14px; font-size:10px; color:#7a8491; }
.upload-progress.complete b { width:100%; }
.upload-list { margin:30px 22px 14px; display:grid; grid-template-columns:1fr 1fr; gap:9px; }.upload-list p { border:1px solid #d7dde6; padding:10px; font-size:11px; }.upload-list .done { border-color:#9bb2d0; background:#edf3fb; }.upload-list .done::before { content:""; display:inline-block; width:7px; height:7px; background:var(--navy); margin-right:8px; }
.upload-list .optional { color:#707986; }.upload-list small { display:block; margin-left:15px; color:#9aa2ad; font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.upload-zone { margin:0 22px; border:1px dashed #8798ad; color:var(--navy); padding:14px; text-align:center; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.mock-video { display:grid; grid-template-columns:1.35fr .65fr; grid-template-rows:1fr 48px; }.video-stage { background:#15233a; color:#fff; display:grid; place-items:center; align-content:center; gap:10px; }.video-person { width:78px; height:78px; border-radius:50%; background:#dce4ef; position:relative; }.video-person::after { content:""; position:absolute; width:110px; height:54px; border-radius:60px 60px 0 0; background:#dce4ef; left:50%; top:62px; transform:translateX(-50%); }.video-stage p { margin-top:48px; font-size:11px; opacity:.7; }.video-note { padding:26px 18px; }.video-note i { display:block; width:22px; height:22px; border:1px solid var(--navy); margin-bottom:16px; }.video-note span { font-family:var(--serif); font-size:14px; }.video-note b { display:block; height:1px; background:#cbd3df; margin-top:18px; box-shadow:0 18px #cbd3df, 0 36px #cbd3df; }.video-controls { grid-column:1/-1; background:#fff; border-top:1px solid var(--line); display:flex; justify-content:center; align-items:center; gap:14px; }.video-controls i { width:22px; height:22px; border:1px solid var(--navy); border-radius:50%; }
.mock-signature { padding-bottom:20px; }.signature-doc { width:66%; margin:22px auto 18px; border:1px solid #ccd4df; padding:18px; }.signature-doc b { font-family:var(--serif); font-weight:400; font-size:15px; }.signature-doc i { display:block; height:1px; background:#d5dbe4; margin-top:15px; }.signature-route { display:flex; align-items:center; margin:0 22px 18px; }.signature-route span { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--navy); }.signature-route b { flex:1; height:1px; background:#aeb9c8; margin:0 8px; }.signature-action,.sign-action { margin:0 22px; background:var(--navy); color:#fff; padding:11px; text-align:center; font-size:11px; letter-spacing:.07em; text-transform:uppercase; }
.mock-selfsign { padding-bottom:22px; }.sign-preview { width:78%; margin:26px auto 20px; height:176px; border:1px solid #cbd3df; padding:24px; position:relative; }.sign-preview i { display:block; height:1px; background:#d7dde5; margin-bottom:18px; }.sign-preview b { position:absolute; left:24px; bottom:45px; font-weight:400; font-size:10px; color:#7b8491; text-transform:uppercase; letter-spacing:.1em; }.sign-preview span { position:absolute; left:24px; right:24px; bottom:18px; font-family:var(--serif); font-style:italic; font-size:clamp(14px,4.4vw,20px); white-space:nowrap; border-bottom:1px solid var(--navy); }
.mock-archive { padding-bottom:22px; }.archive-file { margin:24px 22px 18px; padding:18px; border:1px solid #a9bad0; background:#edf3fb; position:relative; }.archive-file b,.archive-file span { display:block; }.archive-file b { font-family:var(--serif); font-weight:400; }.archive-file span { color:#667587; font-size:11px; margin-top:4px; }.archive-file i { position:absolute; width:18px; height:18px; right:17px; top:50%; border:2px solid var(--navy); transform:translateY(-50%); }.archive-recipients { margin:0 22px; }.archive-recipients p { display:flex; justify-content:space-between; padding:10px 0; border-top:1px solid var(--line); font-size:11px; }.archive-recipients span { color:var(--navy); }
.mock-office { display:grid; grid-template-columns:54px 1fr 150px; }.office-rail { background:#e5ebf4; padding:18px 12px; display:grid; align-content:start; gap:18px; }.office-rail strong { font-family:var(--serif); font-size:30px; color:var(--navy); font-weight:400; }.office-rail i { width:22px; height:22px; border:1px solid #8ea0b8; }.office-mail { padding:28px 22px; }.office-mail span,.office-mail b { display:block; }.office-mail span { color:#7b8491; font-size:10px; text-transform:uppercase; letter-spacing:.1em; }.office-mail b { font-family:var(--serif); font-weight:400; margin:10px 0 26px; }.office-mail i { display:block; height:1px; background:#d2d9e2; margin-bottom:20px; }.office-pane { border-left:1px solid #cbd3df; padding:25px 16px; background:#f7f8fa; }.office-pane em { font-family:var(--serif); font-style:normal; color:var(--navy); }.office-pane p { border:1px solid #d3dae4; background:#fff; padding:9px; margin-top:12px; font-size:10px; }
.mock-bridge { min-height:260px; display:flex; align-items:center; padding:36px; }.bridge-app { width:150px; min-height:126px; border:1px solid #9dadc1; display:flex; flex-direction:column; justify-content:center; padding:18px; }.bridge-app strong { font-family:var(--serif); font-weight:400; }.bridge-app span { color:#7b8491; font-size:10px; margin-top:8px; }.bridge-app.senta { border-color:var(--navy); background:#edf3fb; }.bridge-flow { flex:1; display:flex; align-items:center; }.bridge-flow i { flex:1; height:2px; background:var(--navy); }.bridge-flow b { font-weight:400; font-size:9px; text-transform:uppercase; letter-spacing:.09em; padding:0 9px; text-align:center; }

/* Eigene Darstellung der Rechtsgebiets-Workflows */
.workflow-showcase { padding:90px 0 105px; background:#fff; overflow:hidden; }
.workflow-showcase-head { max-width:940px; margin:0 auto 52px; text-align:center; }
.workflow-showcase-head h2 { font-size:clamp(34px,4vw,52px); line-height:1.16; margin-bottom:16px; }
.workflow-showcase-head p { color:var(--body); font-size:17px; }
.workflow-carousel { position:relative; }
.workflow-carousel-viewport { overflow-x:auto; scrollbar-width:none; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:10px 0 26px; cursor:grab; }
.workflow-carousel-viewport.dragging { cursor:grabbing; scroll-snap-type:none; user-select:none; }
.workflow-carousel-viewport::-webkit-scrollbar { display:none; }
.workflow-carousel-track { --workflow-card-w:min(560px, 80vw); display:flex; gap:28px; width:max-content; padding:0 calc((100vw - var(--workflow-card-w)) / 2); }
.workflow-example { width:var(--workflow-card-w); min-height:510px; flex:0 0 auto; scroll-snap-align:center; background:#fff; border:1px solid #cfd7e2; padding:32px 34px 34px; box-shadow:0 16px 42px rgba(7,15,30,.08); display:grid; grid-template-rows:auto 72px 62px 1fr; opacity:.42; transform:scale(.95); transition:opacity .24s, transform .24s, box-shadow .24s; }
.workflow-example.active { opacity:1; transform:scale(1); box-shadow:0 22px 55px rgba(7,15,30,.13); }
.workflow-area { display:inline-flex; align-items:center; align-self:start; justify-self:start; color:var(--navy); border:1px solid var(--navy); padding:7px 13px; font-size:10px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:20px; }
.workflow-example h3 { font-size:26px; line-height:1.22; align-self:start; }
.workflow-example > p { color:#687587; font-size:16px; line-height:1.5; max-width:490px; align-self:start; }
.workflow-card-steps { display:grid; align-content:start; margin-top:10px; border-top:1px solid var(--line); }
.workflow-card-step { position:relative; padding:15px 0 14px 24px; border-bottom:1px solid var(--line); }
.workflow-card-step::before { content:""; position:absolute; left:1px; top:22px; width:7px; height:7px; border-radius:50%; background:var(--navy); }
.workflow-card-step:not(:last-child)::after { content:""; position:absolute; left:4px; top:30px; bottom:-8px; width:1px; background:#bfc9d6; }
.workflow-card-step b,.workflow-card-step > span > i { display:block; }
.workflow-card-step b { font-weight:500; font-size:13.5px; line-height:1.35; }
.workflow-card-step > span > i { color:#687587; font-style:normal; font-size:12.5px; line-height:1.45; margin-top:3px; }
.workflow-carousel-controls { display:flex; align-items:center; justify-content:flex-end; gap:15px; max-width:1200px; margin:20px auto 0; }
.workflow-carousel-controls button { width:44px; height:44px; background:#fff; border:1px solid var(--navy); display:grid; place-items:center; cursor:pointer; }
.workflow-carousel-controls button i { width:9px; height:9px; border-right:1px solid var(--navy); border-bottom:1px solid var(--navy); transform:rotate(135deg); }
.workflow-carousel-controls button:last-child i { transform:rotate(-45deg); }
.workflow-carousel-controls button:hover { background:var(--navy); }
.workflow-carousel-controls button:hover i { border-color:#fff; }
.workflow-position { font-size:13px; color:#7a8491; min-width:42px; text-align:center; }
.workflow-position b { color:var(--navy); font-weight:500; }

.workflow-functions { background:var(--bg-soft); border-top:1px solid var(--line); padding:100px 40px 110px; }
.workflow-functions-head { max-width:960px; margin-bottom:56px; }
.workflow-functions-head h2 { text-align:left; font-size:clamp(36px,4.2vw,56px); line-height:1.12; margin-bottom:17px; }
.workflow-functions-head p { color:var(--body); max-width:760px; font-size:17px; }
.workflow-deep-dives { border-top:1px solid #cfd5df; }
.workflow-deep-dive { display:grid; grid-template-columns:1fr 1fr; gap:82px; align-items:center; padding:88px 0; border-bottom:1px solid #cfd5df; }
.workflow-deep-dive[id] { scroll-margin-top:92px; }
.workflow-deep-dive.reverse .workflow-function-visual { order:2; }
.workflow-deep-dive.reverse .detail-copy { order:1; }
.workflow-deep-dive .detail-copy > p { font-size:17px; line-height:1.65; max-width:590px; }
.workflow-deep-dive .detail-copy h2 { font-size:clamp(32px,3.6vw,48px); }
.workflow-function-visual { min-height:420px; display:grid; place-items:center; background:linear-gradient(145deg,#e7ebf1,#f8f9fa); border:1px solid #d3dae4; }
.workflow-small-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:auto auto; margin-top:70px; border-top:1px solid #cfd5df; border-left:1px solid #cfd5df; }
.workflow-small-tile { min-height:220px; background:#fff; border-right:1px solid #cfd5df; border-bottom:1px solid #cfd5df; padding:30px 26px; display:grid; grid-row:span 2; grid-template-rows:subgrid; row-gap:14px; }
.workflow-small-tile h3 { font-size:22px; line-height:1.25; margin-bottom:0; }
.workflow-small-tile p { color:#687587; font-size:15px; line-height:1.55; }

/* Detailgrafiken fuer die KI-Funktionsbereiche */
.suite-document { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:52px 1fr; min-height:330px; }
.suite-document .mock-top { grid-column:1/-1; }
.suite-doc { padding:28px 24px; border-right:1px solid var(--line); }
.suite-doc b { font-family:var(--serif); font-weight:400; font-size:15px; }
.suite-doc i { display:block; height:2px; background:#d6dce5; margin-top:22px; }
.suite-doc i.marked { height:24px; border-left:3px solid var(--navy); background:#e7eef8; }
.suite-doc i.short { width:68%; }
.suite-findings { padding:24px 20px; }
.suite-findings em { font-style:normal; color:var(--navy); font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.suite-findings p { padding:15px 0; border-top:1px solid var(--line); }
.suite-findings p:first-of-type { margin-top:15px; }
.suite-findings b,.suite-findings span { display:block; }
.suite-findings b { font-weight:500; font-size:12px; }
.suite-findings span { color:#687587; font-size:10px; margin-top:3px; }
.suite-drafting { display:grid; grid-template-columns:145px 1fr; grid-template-rows:52px 1fr; min-height:330px; }
.suite-drafting .mock-top { grid-column:1/-1; }
.draft-nav { padding:22px 16px; background:#e8edf4; border-right:1px solid #d2d9e3; }
.draft-nav p { color:#687587; font-size:9px; text-transform:uppercase; letter-spacing:.09em; margin-bottom:5px; }
.draft-nav b { display:block; font-weight:500; font-size:10px; margin-bottom:22px; }
.draft-page { margin:22px; padding:26px; border:1px solid #ccd4df; position:relative; }
.draft-page strong { font-family:var(--serif); font-weight:400; }
.draft-page i { display:block; height:1px; background:#d5dbe4; margin-top:18px; }
.draft-page i.change { height:22px; background:#eef5ea; border-left:3px solid #5b8d57; }
.draft-page span { position:absolute; right:12px; bottom:12px; color:#5b8d57; font-size:9px; }
.suite-chat { padding-bottom:18px; min-height:340px; }
.chat-context { display:flex; justify-content:space-between; padding:13px 20px; background:#e9eef5; }
.chat-context b,.chat-context span { font-size:10px; }
.chat-context b { font-weight:500; }
.chat-context span { color:var(--navy); }
.chat-prompt { margin:17px 20px 10px 25%; background:#e7eef8; border-right:2px solid var(--navy); padding:12px 14px; font-size:11px; }
.chat-answer { margin:0 25% 13px 20px; border-left:2px solid #93a4b9; background:#f4f6f8; padding:12px 14px; }
.chat-answer em { color:var(--navy); font-style:normal; font-size:9px; text-transform:uppercase; letter-spacing:.1em; }
.chat-answer p { font-size:11px; margin:5px 0; }
.chat-answer span { font-size:9px; color:#687587; }
.prompt-chips { display:flex; flex-wrap:wrap; gap:6px; padding:0 20px; }
.prompt-chips i { border:1px solid #cbd4df; padding:5px 8px; font-style:normal; font-size:9px; }
.suite-research { padding-bottom:18px; min-height:340px; }
.research-question { margin:18px 20px; border:1px solid #cbd4df; padding:13px; font-family:var(--serif); font-size:13px; }
.research-answer { margin:0 20px 15px; padding:15px; background:#eef2f7; }
.research-answer b { font-weight:500; font-size:11px; }
.research-answer i { display:block; height:1px; background:#cbd3dd; margin-top:12px; }
.research-cites { margin:0 20px; }
.research-cites p { display:grid; grid-template-columns:24px 1fr auto; align-items:center; gap:8px; padding:9px 0; border-top:1px solid var(--line); }
.research-cites span { color:var(--navy); font-family:var(--serif); font-size:10px; }
.research-cites b { font-weight:500; font-size:10px; }
.research-cites em { color:#5b8d57; font-style:normal; font-size:9px; text-transform:uppercase; }

/* ---------- News und Blog ---------- */
.blog-page, #blog-article { padding-top:82px; }
.blog-head { padding:100px 40px 54px; background:#fff; }
.blog-head .wrap { max-width:1200px; }
.blog-eyebrow,.blog-category {
  display:block; color:var(--navy); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; margin-bottom:16px;
}
.blog-head h1 { max-width:850px; font-size:clamp(48px,6vw,78px); }
.blog-head > .wrap > p { max-width:700px; color:var(--body); font-size:19px; }
.blog-filters { display:flex; flex-wrap:wrap; gap:8px; margin-top:48px; }
.blog-filters span { border:1px solid var(--line); padding:8px 14px; color:var(--body); font-size:13px; }
.blog-filters span.active { border-color:var(--navy); color:var(--navy); }
.blog-listing { background:var(--bg-soft); border-top:1px solid var(--line); padding:72px 40px 110px; }
.blog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; }
.blog-card { background:#fff; border:1px solid #d5dbe4; min-width:0; }
.blog-card-visual { display:block; color:inherit; text-decoration:none; background:#e4e9f0; border-bottom:1px solid #d5dbe4; }
.blog-card-body { padding:34px 34px 30px; }
.blog-card h2 { font-size:clamp(27px,2.6vw,36px); line-height:1.23; margin-bottom:17px; }
.blog-card h2 a { color:var(--ink); text-decoration:none; }
.blog-card h2 a:hover { color:var(--navy); }
.blog-card-body > p { color:var(--body); font-size:16px; line-height:1.6; min-height:78px; }
.blog-meta { display:flex; gap:22px; flex-wrap:wrap; color:#747d89; font-size:12.5px; margin-top:30px; }
/* Autorenzeile: das Autoritaetssignal des Beitrags, deshalb in der Akzentfarbe
   statt im Grau der uebrigen Metadaten. Gewicht bleibt bei 500 (Designregel). */
.article-author { color:var(--navy); font-weight:500; }
.blog-visual { height:330px; position:relative; overflow:hidden; }
.citation-visual { display:grid; grid-template-columns:1fr .8fr; align-items:center; gap:24px; padding:44px 9%; background:linear-gradient(145deg,#e7ebf1,#f8f9fa); }
.citation-paper { height:230px; background:#fff; border:1px solid #c8d0dc; padding:35px 28px; box-shadow:0 16px 35px rgba(7,15,30,.09); }
.citation-paper i { display:block; height:7px; background:#e0e4e9; margin-bottom:18px; }
.citation-paper i:nth-child(2) { width:74%; }
.citation-paper i.marked { height:30px; background:#e5edf8; border-left:3px solid var(--navy); }
.citation-check { background:#fff; border:1px solid #c8d0dc; padding:24px; box-shadow:0 16px 35px rgba(7,15,30,.07); }
.citation-check span { color:var(--navy); font-size:10px; text-transform:uppercase; letter-spacing:.14em; }
.citation-check b { display:block; height:1px; background:#cbd3dd; margin-top:22px; position:relative; }
.citation-check b::after { content:""; position:absolute; right:0; top:-4px; width:8px; height:8px; border:1px solid var(--navy); border-radius:50%; background:#fff; }
.security-visual { display:flex; align-items:center; justify-content:center; gap:28px; padding:44px 8%; background:linear-gradient(145deg,#dfe6ef,#f7f8fa); }
.security-core { width:142px; height:142px; border:1px solid var(--navy); background:#fff; display:grid; place-items:center; position:relative; box-shadow:0 16px 35px rgba(7,15,30,.08); }
.security-core span { font-family:var(--serif); color:var(--navy); font-size:38px; }
.security-core i { position:absolute; inset:12px; border:1px solid #d7dde6; }
.security-route { flex:1; max-width:210px; display:flex; align-items:center; }
.security-route i { flex:1; border-top:1px dotted var(--navy); }
.security-route b { font-weight:400; color:var(--navy); font-size:11px; border:1px solid var(--navy); background:#fff; padding:7px 9px; }
.security-docs { width:150px; height:150px; position:relative; }
.security-docs span { position:absolute; width:92px; height:116px; background:#fff; border:1px solid #c8d0dc; box-shadow:0 12px 28px rgba(7,15,30,.07); }
.security-docs span:nth-child(1) { left:6px; top:20px; transform:rotate(-7deg); }
.security-docs span:nth-child(2) { left:30px; top:10px; }
.security-docs span:nth-child(3) { left:52px; top:23px; transform:rotate(7deg); }

.article-head { padding:92px 40px 70px; background:#fff; }
.article-head .wrap-narrow { max-width:930px; }

/* Brotkrume. Sie ersetzt auf den Unterseiten den frueheren einzelnen
   Zuruecklink und uebernimmt dessen Schriftgrad und Farbe, damit die Seiten
   optisch gleich beginnen. Der Trenner steckt im ::before der Geschwister,
   so bleibt das Markup frei von Dekorationszeichen (landing/build.mjs liest
   genau dieses Markup aus und macht daraus die BreadcrumbList). */
/* ⚠️ Die Regel `nav { position:fixed; display:grid; … }` ganz oben trifft JEDES
   nav-Element, also auch dieses. Eine Brotkrume ist semantisch eine Navigation
   und soll ein nav bleiben, deshalb setzt sie die vier Eigenschaften zurueck,
   die sie sonst in die Kopfleiste schoeben. Die Grid-Angaben der Basisregel
   werden durch display:block wirkungslos. */
.crumbs {
  position:static; display:block; z-index:auto; padding:0; color:inherit;
  font-size:13px; line-height:1.9; margin-bottom:30px;
}
.crumbs a { color:var(--navy); text-decoration:underline; text-underline-offset:3px; }
.crumbs a:hover { color:var(--navy-2); }
/* inline-block haelt den Trenner aus der Unterstreichung des Links heraus:
   text-decoration faerbt keine atomaren Inline-Boxen mit ein. */
.crumbs a::after { content:"/"; display:inline-block; margin:0 9px; color:var(--body); opacity:.55; text-decoration:none; }
.crumbs [aria-current] { color:var(--body); }

/* Verweise im Fliesstext, erzeugt von rich() in main.js. Bis 08/2026 gab es im
   Fliesstext ueberhaupt keine Links, deshalb fehlte auch die Regel: sie kamen
   im Browserblau #0000EE heraus.

   ⚠️ Diese Links sind ABSICHTLICH zurueckgenommen: Schriftfarbe wie der Absatz,
   darunter nur eine Haarlinie. Im Lesefluss sollen sie nicht als Auszeichnung
   auffallen, der Werbetext soll Werbetext bleiben. Erst beim Ueberfahren oder
   im Tastaturfokus treten sie in Navy hervor.

   Bewusst NICHT ganz unsichtbar: ohne jeden Hinweis findet sie niemand, der mit
   Tastatur oder Vorleseprogramm arbeitet (WCAG 1.4.1 verlangt ein Merkmal, das
   nicht nur Farbe ist), und eine Unterstreichung, die erst beim Ueberfahren
   erscheint, sieht wie ein Fehler aus. Die Haarlinie ist der Kompromiss. Wer
   sie weiter abschwaechen will, senkt den Anteil in text-decoration-color,
   loescht die Zeile aber nicht. */
.sec-intro a, .detail-hero p a, details .answer a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--body) 30%, transparent);
  text-underline-offset: 3px;
  transition: color .15s, text-decoration-color .15s;
}
.sec-intro a:hover, .detail-hero p a:hover, details .answer a:hover,
.sec-intro a:focus-visible, .detail-hero p a:focus-visible, details .answer a:focus-visible {
  color: var(--navy); text-decoration-color: var(--navy);
}
.article-head h1 { font-size:clamp(45px,5.4vw,70px); line-height:1.08; max-width:930px; }
.article-dek { color:var(--body); font-size:20px; line-height:1.55; max-width:820px; }
.article-head .blog-meta { margin-top:28px; }
.article-hero-visual { padding:0 40px 82px; background:#fff; }
.article-hero-visual .wrap { max-width:1120px; }
.article-hero-visual .blog-visual { height:470px; }
.article-hero-visual .citation-paper { height:315px; }
.article-layout { display:grid; grid-template-columns:300px minmax(0,720px); justify-content:space-between; gap:90px; padding:92px 0 120px; }
.article-takeaway { align-self:start; position:sticky; top:115px; border-top:2px solid var(--navy); background:var(--bg-soft); padding:24px 24px 28px; }
.article-takeaway > span { display:block; font-family:var(--serif); font-size:21px; margin-bottom:18px; }
.article-takeaway ul { list-style:none; }
.article-takeaway li { color:var(--body); font-size:14px; line-height:1.55; padding:11px 0 11px 18px; border-top:1px solid #d3d9e2; position:relative; }
.article-takeaway li::before { content:""; position:absolute; left:0; top:20px; width:6px; height:6px; background:var(--navy); border-radius:50%; }
.article-body > section { padding:0 0 64px; }
.article-body h2 { text-align:left; font-size:clamp(31px,3vw,42px); line-height:1.2; margin-bottom:22px; }
.article-body p { color:var(--body); font-size:18px; line-height:1.72; margin-bottom:20px; }
.article-body ol { list-style:none; counter-reset:article-list; margin:28px 0; border-top:1px solid var(--line); }
.article-body ol li { counter-increment:article-list; position:relative; padding:19px 12px 19px 52px; border-bottom:1px solid var(--line); color:var(--body); font-size:17px; }
.article-body ol li::before { content:counter(article-list,decimal-leading-zero); position:absolute; left:0; color:var(--navy); font-family:var(--serif); }
.article-body blockquote { margin:34px 0 4px; border-left:2px solid var(--navy); padding:8px 0 8px 27px; color:var(--ink); font-family:var(--serif); font-size:25px; line-height:1.45; }
.article-sources { border-top:1px solid var(--line); padding-top:54px !important; }
.article-sources ul { list-style:none; margin-bottom:26px; }
.article-sources li { padding:11px 0; border-bottom:1px solid var(--line); }
.article-sources a { color:var(--navy); font-size:15px; }
.article-sources p { font-size:14px; color:#747d89; }

/* ---------- Rechtsseiten (Impressum, Datenschutz) ---------- */
.legalpage { padding: 170px 40px 100px; }
.legalpage h1 { font-size: clamp(34px, 4vw, 48px); margin-bottom: 10px; }
.legalpage .updated { color: var(--body); font-size: 13.5px; margin-bottom: 44px; }
.legalpage h2 { font-size: 21px; text-align: left; margin: 40px 0 10px; }
.legalpage p { color: var(--body); margin-bottom: 12px; }
.legalpage .card {
  background: var(--bg-soft); border: 1px solid var(--line);
  padding: 18px 22px; line-height: 1.75;
}
.legalpage a { color: var(--navy); }
.legalpage .muted { font-size: 13.5px; }
.notfound-links { list-style: none; margin-top: 34px; }
.notfound-links li { border-top: 1px solid var(--line); padding: 14px 0; }
.notfound-links a { color: var(--navy); text-decoration: none; }
.notfound-links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--line); padding: 44px 40px; }
footer .wrap { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
footer .logo { margin-right: auto; }
footer .logo img { height: 46px; filter: none; }
footer a { color: var(--body); text-decoration: none; font-size: 14.5px; }
footer a:hover { color: var(--ink); }

/* ---------- Responsive ---------- */
:root { --panel-w: min(1080px, 86vw); }

@media (max-width: 980px) {
  .problem-grid { grid-template-columns: minmax(0, 1fr); width:100%; min-width:0; overflow:hidden; }
  .problem-col { min-width:0; padding-left:24px; padding-right:24px; }
  .problem-col + .problem-col { border-left: 0; border-top: 1px solid var(--line); }
  .founder-head { margin-top: 60px; }
  .founder-accordion { display: grid; height: auto; min-height: 0; }
  .founder-card, .founder-card.active { min-height: 520px; flex: none; border-right: 0; border-bottom: 1px solid #fff; }
  .founder-card:last-child { border-bottom: 0; }
  .founder-card .founder-text, .founder-card.active .founder-text {
    max-height: 220px; margin-top: 15px; opacity: 1; transform: none;
  }
  .founder-card:not(.active) .founder-card-copy { left: 34px; right: 34px; }
  .founder-card:not(.active) .founder-title { font-size: clamp(25px, 5.4vw, 39px); }
  .why-security-strip { grid-template-columns: 1fr; align-items: start; }
  .security-strip-points { grid-template-columns: 1fr; }
  .security-strip-point { padding: 16px 0; }
  .security-strip-point + .security-strip-point { border-left: 0; border-top: 1px solid var(--line); }
  .plan-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  nav { grid-template-columns:1fr auto; padding: 16px 20px; gap: 16px; }
  .nav-center { display: none; }
  /* Burger statt Launch-Knopf; der CTA wandert ins Menue */
  .btn-sm-nav { display: none; }
  .nav-burger { display: flex; }
  footer .logo { display: none; }
  section { padding: 80px 20px; }
  .hero-inner { padding: 0 20px 90px; }
  /* Schmales Fenster: weiter in die Bildmitte ruecken, sonst steht nur
     die Ziegelwand im Bild und die Person ist abgeschnitten. */
  .hero-photo { background-position: 66% center; }
  /* Heller Hero auf schmalen Fenstern: der Text kann hier nicht neben die
     Person ausweichen, also wird der Schleier von UNTEN aufgezogen statt von
     links. Unten deckt er den Text, oben bleibt ihr Gesicht klar. */
  body.hero-light .hero-photo { background-position: 63% center; }
  /* Mobil bleibt der Verlauf von unten, wie er war. "Links" gibt es hier nicht:
     der Text steht unter ihr statt neben ihr, die Ueberschrift liegt komplett
     auf ihrem dunklen Jackett und waere ohne Grund nicht zu lesen. */
  body.hero-light .hero-shade {
    background:
      linear-gradient(0deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.96) 48%, rgba(255,255,255,.34) 76%, rgba(255,255,255,.05) 100%);
  }
  .hero-mail { flex-direction: column; max-width: 100%; }
  .hero-mail button { border-left: 0; border-top: 1px solid rgba(255,255,255,.32); }
  .hero-consent label { white-space: normal; }

  /* Funktionen-Seite einspaltig */
  .fx-points, .fx-cards, .fx-grid { grid-template-columns: 1fr; }
  .detail-hero, .detail-sections, .detail-closing { padding-left: 20px; padding-right: 20px; }
  /* minmax(0,…) + Trennung: sonst setzt das laengste Wort (z. B.
     "Mandantenkommunikation") die Mindestbreite der Spalte und die Seite
     scrollt seitwaerts. */
  .detail-hero-grid, .detail-section { grid-template-columns: minmax(0, 1fr); gap: 45px; }
  h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
  .detail-hero h1 { font-size: clamp(30px, 9vw, 42px); }
  .detail-section.reverse .detail-illustration, .detail-section.reverse .detail-copy { order: initial; }
  .detail-illustration { min-height: 300px; }
  .detail-closing .wrap { flex-direction: column; align-items: flex-start; }
  .detail-hero-row { grid-template-columns:30px minmax(40px,1fr) minmax(150px,210px); }
  .workflow-showcase-head { padding:0 20px; }
  .workflow-carousel-track { --workflow-card-w:calc(100vw - 40px); }
  .workflow-example { min-height:0; grid-template-rows:auto auto auto 1fr; }
  .workflow-carousel-controls { padding:0 20px; }
  .workflow-functions { padding-left:20px; padding-right:20px; }
  .workflow-deep-dive { grid-template-columns:1fr; gap:42px; padding:65px 0; }
  .workflow-deep-dive.reverse .workflow-function-visual,.workflow-deep-dive.reverse .detail-copy { order:initial; }
  .workflow-function-visual { min-height:320px; }
  .workflow-small-grid { grid-template-columns:1fr; grid-template-rows:none; }
  .workflow-small-tile { display:block; grid-row:auto; min-height:0; }
  .workflow-small-tile h3 { margin-bottom:12px; }
  .blog-grid { grid-template-columns:1fr; }
  .article-layout { grid-template-columns:1fr; gap:55px; padding-left:20px; padding-right:20px; }
  .article-takeaway { position:static; }
  .article-hero-visual .blog-visual { height:360px; }
  /* Office-Mock: die SentaLaw-Flaeche bleibt RECHTS (Emil), alles eine Stufe kleiner */
  .mock-window { width:min(96%, 470px); }
  .mock-office { grid-template-columns:36px 1fr 104px; }
  .office-rail { padding:12px 8px; gap:12px; }
  .office-rail strong { font-size:22px; }
  .office-rail i { width:16px; height:16px; }
  .office-mail { padding:18px 14px; }
  .office-mail b { font-size:14px; margin:8px 0 16px; }
  .office-mail i { margin-bottom:14px; }
  .office-pane { padding:14px 9px; }
  .office-pane em { font-size:13px; }
  .office-pane p { font-size:9px; padding:7px 6px; margin-top:9px; }
  /* E-Signatur: Unterschrift einzeilig, Karte nutzt die Breite */
  .sign-preview { width:90%; padding:18px; }
  .sign-preview b { left:18px; }
  .sign-preview span { left:18px; right:18px; }

  /* Unterseite: Diagramm einspaltig. Beide Grafikteile eine Stufe kleiner,
     Beschriftungen duerfen umbrechen — nichts laeuft mehr aus dem Bild. */
  .sec-flow { padding: 50px 16px 70px; }
  .flow-row, .flow-connector { grid-template-columns: 1fr; gap: 30px; }
  .flow-left, .flow-left-end, .flow-connector .flow-left { justify-content: center; }
  .doc-fan { width: 72px; height: 74px; }
  .doc-fan .mini-doc:nth-child(2) { top: 8px; left: 14px; }
  .doc-fan .mini-doc:nth-child(3) { top: 16px; left: 28px; }
  .mini-doc { width: 44px; height: 56px; padding: 8px 7px; }
  .flow-slot { width: 128px; }
  .flow-box { width: 92px; height: 92px; font-size: 26px; }
  /* Check: die Matrix wird zum Block je Taetigkeit, sonst ist sie auf dem
     Telefon nicht bedienbar. Die Stufenbeschriftung wandert in die Zelle. */
  .ck-quiz { padding: 40px 16px 70px; }
  .ck-result { padding: 46px 16px 70px; }
  .ck-preview { padding: 56px 16px 64px; }
  .ck-options:has(.ck-opt:nth-child(12)) { grid-template-columns: 1fr; }
  .ck-matrix, .ck-matrix tbody, .ck-matrix tr, .ck-matrix td, .ck-matrix th { display: block; width: auto; }
  .ck-matrix thead { display: none; }
  .ck-matrix tbody tr { padding: 18px 0; }
  .ck-matrix tbody th { padding: 0 0 12px; }
  .ck-matrix tbody { display: block; }
  .ck-matrix tbody tr { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ck-matrix tbody th { grid-column: 1 / -1; }
  .ck-matrix td { padding: 0; }
  .ck-cell { padding: 13px 6px; font-size: 13px; }
  .ck-cell span { display: inline; }
  .ck-cell::before { display: none; }
  .ck-cell.is-on { color: #fff; }
  .ck-exit { padding: 26px 20px; }
  .ck-mail-row { flex-direction: column; }
  .ck-befund-head { flex-direction: column; gap: 2px; }
  .flow-switch { flex-direction: column; align-items: flex-start; gap: 10px; }
  .flow-switch-buttons { width: 100%; }
  .flow-tab { flex: 1; padding: 10px 8px; }
  .flow-badge { padding-top: 26px; }
  .flow-boxes { grid-template-columns: repeat(2, 46px); }
  .flow-box-sm { width: 46px; height: 46px; font-size: 12px; }
  .sec-fragen { padding: 56px 16px 60px; }
  .fragen-list { grid-template-columns: 1fr; gap: 26px; }
  .pseudo { margin-top: 42px; padding-top: 36px; }
  .flow-caption { font-size: 9.5px; letter-spacing: .09em; max-width: 128px; }
  .flow-line { margin: 0 10px 44px; }
  .flow-line span {
    font-size: 9.5px; letter-spacing: .09em; white-space: normal;
    text-align: center; width: max-content; max-width: 27vw; line-height: 1.55;
    left: 50%; transform: translateX(-50%);
  }
  .vline { height: 96px; }
  .vline span {
    right: auto; left: 16px; white-space: normal;
    width: max-content; max-width: 40vw; font-size: 9.5px; letter-spacing: .09em; line-height: 1.6;
  }

  /* Weg: auf Mobil vertikal statt horizontal, ohne Ueberlappung.
     Schmale Raender, damit die Karten die Breite nutzen. */
  .plan { margin-top: 0 !important; padding-top: 90px; }
  .weg { height: auto; padding: 80px 12px; }
  .weg-sticky { position: static; height: auto; overflow: visible; padding: 0; }
  .weg-viewport { display: block; }
  .weg-track { flex-direction: column; transform: none !important; gap: 24px; }
  .panel { width: 100%; grid-template-columns: 1fr; padding: 30px 16px; gap: 30px; }
  .weg-progress { display: none; }
  /* Walze: hoehere Zeilen, weil Eyebrow + Titel umbrechen; Labels kompakter */
  .barrel { --bitem: 128px; }
  .barrel-item { padding: 0 14px; }
  .barrel-eyebrow { font-size: 10px; letter-spacing: .09em; }
  .barrel-title { font-size: 15.5px; }
  .panel .anno { font-size: 10px; letter-spacing: .1em; padding: 8px 12px; }
}

@media (max-width: 620px) {
  nav { padding:12px 14px; gap:10px; }
  nav .logo img { height:38px; }
  .btn-sm-nav { max-width:170px; padding:7px 9px; font-size:11.5px; line-height:1.25; text-align:center; }
  .blog-head,.blog-listing,.article-head,.article-hero-visual { padding-left:20px; padding-right:20px; }
  .blog-card-body { padding:27px 24px; }
  .blog-card-body > p { min-height:0; }
  .blog-visual { height:260px; }
  .citation-visual { grid-template-columns:1fr; }
  .citation-paper { height:150px; }
  .citation-check { display:none; }
  .security-visual { gap:12px; padding:30px 7%; }
  .security-core { width:104px; height:104px; }
  .security-docs { width:98px; transform:scale(.75); transform-origin:center; }
  .article-hero-visual .blog-visual { height:280px; }
  .article-head h1 { font-size:42px; }
  .article-dek { font-size:18px; }
}

/* ---------- Faktenschicht ----------
   Nachschlagewerk fuer Menschen und Maschinen: ruhig, tabellarisch, ohne
   Illustrationen. Nutzt die Tokens der uebrigen Seiten (Navy als einzige
   Akzentfarbe, Serife in den Ueberschriften, kein Gewicht ueber 500). */
.fakt-shell { padding: 150px 0 110px; }
.fakt-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 54px; }
.fakt-head .eyebrow { color: var(--navy); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.fakt-head h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.15; }
.fakt-intro { color: var(--body); max-width: 62ch; }
.fakt-entity-link { color: var(--navy); font-size: 14px; text-decoration: none; border-bottom: 1px solid var(--line); align-self: flex-start; }
.fakt-entity-link:hover { border-bottom-color: var(--navy); }

.fakt-group { margin-bottom: 54px; }
/* Das globale h2 ist gross und zentriert (Marketingsektionen). Im
   Nachschlagewerk waere das falsch: hier zaehlt Scanbarkeit, nicht Wirkung. */
.fakt-group h2 { font-size: 22px; margin-bottom: 20px; text-align: left; }
/* auto-FIT, nicht auto-fill: sonst legt der Browser leere Spalten an, deren
   Rasterhintergrund als graue Kachel sichtbar wird. */
.fakt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.fakt-card { background: var(--bg); padding: 22px; display: flex; flex-direction: column; gap: 9px; text-decoration: none; transition: background .18s; }
.fakt-card:hover { background: var(--bg-soft); }
.fakt-kind { color: #747d89; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
.fakt-card-title { font-family: var(--serif); font-size: 19px; color: var(--ink); }
.fakt-card-sum { color: var(--body); font-size: 14px; line-height: 1.55; }

.fakt-page { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
/* Sonst streckt der Flex-Container den Zurueck-Link auf volle Breite und seine
   Unterlinie sieht aus wie eine Trennlinie. */
.fakt-page > .crumbs { align-self: flex-start; }
.fakt-page > .fakt-list, .fakt-page > .fakt-summary, .fakt-page > p { align-self: stretch; }
.fakt-page h1 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.18; }
.fakt-summary { color: var(--ink); font-size: 18px; line-height: 1.6; max-width: 62ch; }
.fakt-list { display: grid; grid-template-columns: minmax(150px, 240px) 1fr; border-top: 1px solid var(--line); margin-top: 8px; }
.fakt-list dt { padding: 12px 20px 12px 0; border-bottom: 1px solid var(--line); color: #747d89; font-size: 14px; }
.fakt-list dd { padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 15px; }
.fakt-list dd a, .fakt-list dt a { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--line); }
.fakt-meta { display: flex; flex-wrap: wrap; gap: 24px; color: #747d89; font-size: 12.5px; margin-top: 6px; }
.fakt-meta a { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--line); }
.fakt-related { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px; margin-top: 10px; }
.fakt-related span { color: #747d89; font-size: 12.5px; }
.fakt-related a { color: var(--navy); font-size: 14px; text-decoration: none; border-bottom: 1px solid var(--line); }
.fakt-disclaimer { color: #747d89; font-size: 12.5px; max-width: 62ch; margin-top: 34px; }

@media (max-width: 700px) {
  .fakt-shell { padding: 120px 0 80px; }
  .fakt-list { grid-template-columns: 1fr; }
  .fakt-list dt { padding-bottom: 2px; border-bottom: 0; }
}

/* ---------- Rechtsprechungs-Tracker ----------
   Nachschlagetabelle. Auf schmalen Fenstern scrollt sie in ihrem eigenen
   Container, damit die Seite nie seitlich wandert. */
.tr-stand { color:#747d89; font-size:12.5px; }
.tr-wrap { overflow-x:auto; border:1px solid var(--line); }
.tr-table { border-collapse:collapse; width:100%; font-size:15px; background:var(--bg); }
.tr-table th {
  text-align:left; font-weight:500; color:#747d89; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase;
  padding:14px 18px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.tr-table td { padding:16px 18px; border-bottom:1px solid var(--line); vertical-align:top; }
.tr-table tr:last-child td { border-bottom:0; }
.tr-gericht { color:var(--ink); white-space:nowrap; }
.tr-datum { color:var(--body); white-space:nowrap; font-variant-numeric:tabular-nums; }
.tr-az { color:var(--body); white-space:nowrap; }
.tr-art { display:block; color:#747d89; font-size:11.5px; }
.tr-kern { color:var(--ink); line-height:1.55; min-width:320px; }
.tr-meta { display:flex; flex-wrap:wrap; gap:14px; margin-top:8px; font-size:12px; }
.tr-meta a { color:var(--navy); text-decoration:none; border-bottom:1px solid var(--line); }
.tr-meta a:hover { border-bottom-color:var(--navy); }
/* Offenlegung der Grundlage: Volltext geprueft steht in der Akzentfarbe,
   blosse Fachpresse bleibt grau. Der Unterschied soll auffallen. */
.tr-basis { color:#747d89; }
.tr-basis[data-basis="volltext"] { color:var(--navy); }
.tr-hint { color:var(--body); font-size:14px; margin-top:26px; }
/* Abgrenzung: was NICHT in der Liste steht und warum. Ruhig gesetzt, aber
   sichtbar — sie ist das Qualitaetsmerkmal der Uebersicht. */
.tr-grenzen { margin-top:46px; padding-top:26px; border-top:1px solid var(--line); }
.tr-grenzen h2 { font-size:19px; text-align:left; margin-bottom:14px; }
.tr-grenzen ul { padding-left:20px; display:flex; flex-direction:column; gap:9px; max-width:70ch; }
.tr-grenzen li { color:var(--body); font-size:14.5px; line-height:1.6; }