/* SPDX-FileCopyrightText: 2026 Kontrollfeld GmbH */
/* SPDX-License-Identifier: AGPL-3.0-or-later */
/* Self-hosted IBM Plex Sans (OFL) — keine Google-Fonts-Uebertragung (Datenschutz) */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/operator/fonts/ibm-plex-sans-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/operator/fonts/ibm-plex-sans-ext-400.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/operator/fonts/ibm-plex-sans-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/operator/fonts/ibm-plex-sans-ext-500.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/operator/fonts/ibm-plex-sans-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/operator/fonts/ibm-plex-sans-ext-600.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/operator/fonts/ibm-plex-sans-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/operator/fonts/ibm-plex-sans-ext-700.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* Landing page — whosit.
 * Tokens & Regeln: die Design-Tokens stehen in :root von public/style.css — dort ist die Quelle.
 * Mobile-first, Flexbox/Grid, keine Frameworks. */

:root {
  color-scheme: light;
  --bg: #f5f8fc;
  --bg-tint: #eef3fa;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --border: #e3e9f2;
  --border-strong: #cfd8e6;
  --navy: #0f172a;
  --text: #1b2433;
  --text-muted: #5d6b85;
  --text-faint: #94a3b8;
  --accent: #0369a1;
  --accent-strong: #075e8c;
  --accent-soft: #e3f0f9;
  --on-accent: #ffffff;
  --ok: #059669;
  --ok-strong: #047857;
  --ok-soft: #e2f5ee;
  --ok-border: rgba(5, 150, 105, 0.25);
  --glow-a: rgba(3, 105, 161, 0.1);
  --glow-b: rgba(0, 68, 148, 0.08);
  --eu-gold: #FFCC00;
  --feed-a1: #dbe6f3;
  --feed-a2: #c6d6ea;
  --feed-b1: #ebe5dc;
  --feed-b2: #dcd2c3;
  --tag-bg: rgba(15, 23, 42, 0.66);
  --r-sm: 9px;
  --r: 13px;
  --r-lg: 18px;
  --r-pill: 999px;
  --shadow: 0 18px 40px -22px rgba(15, 23, 42, 0.28);
  --shadow-sm: 0 4px 14px -8px rgba(15, 23, 42, 0.22);
  --shadow-btn: 0 8px 18px -8px rgba(3, 105, 161, 0.5);
  --t: 180ms cubic-bezier(0.2, 0.7, 0.3, 1);
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Dark theme — same values as the dark block in public/style.css. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1220;
  --bg-tint: #0d1626;
  --surface: #121d32;
  --surface-2: #1b2942;
  --border: #243450;
  --border-strong: #37496c;
  --navy: #ecf2fb;
  --text: #d7e1f0;
  --text-muted: #9db0cc;
  --text-faint: #66779a;
  --accent: #4aabe0;
  --accent-strong: #7cc4ec;
  --accent-soft: #14283f;
  --on-accent: #06111d;
  --ok: #34d399;
  --ok-strong: #7fe7c3;
  --ok-soft: #0d2b23;
  --ok-border: rgba(52, 211, 153, 0.4);
  --glow-a: rgba(74, 171, 224, 0.08);
  --glow-b: rgba(74, 130, 224, 0.06);
  --eu-gold: #FFD633;
  --feed-a1: #1c2a42;
  --feed-a2: #24375a;
  --feed-b1: #2a2520;
  --feed-b2: #3a3228;
  --tag-bg: rgba(6, 11, 20, 0.72);
  --shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.75);
  --shadow-sm: 0 4px 14px -8px rgba(0, 0, 0, 0.65);
  --shadow-btn: 0 8px 18px -8px rgba(74, 171, 224, 0.35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b1220;
    --bg-tint: #0d1626;
    --surface: #121d32;
    --surface-2: #1b2942;
    --border: #243450;
    --border-strong: #37496c;
    --navy: #ecf2fb;
    --text: #d7e1f0;
    --text-muted: #9db0cc;
    --text-faint: #66779a;
    --accent: #4aabe0;
    --accent-strong: #7cc4ec;
    --accent-soft: #14283f;
    --on-accent: #06111d;
    --ok: #34d399;
    --ok-strong: #7fe7c3;
    --ok-soft: #0d2b23;
    --ok-border: rgba(52, 211, 153, 0.4);
    --glow-a: rgba(74, 171, 224, 0.08);
    --glow-b: rgba(74, 130, 224, 0.06);
    --eu-gold: #FFD633;
    --feed-a1: #1c2a42;
    --feed-a2: #24375a;
    --feed-b1: #2a2520;
    --feed-b2: #3a3228;
    --tag-bg: rgba(6, 11, 20, 0.72);
    --shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.75);
    --shadow-sm: 0 4px 14px -8px rgba(0, 0, 0, 0.65);
    --shadow-btn: 0 8px 18px -8px rgba(74, 171, 224, 0.35);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background:
    radial-gradient(820px 460px at 50% -6%, var(--glow-a), transparent 60%),
    radial-gradient(640px 460px at 100% 0%, var(--glow-b), transparent 55%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ---- shared ---- */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.icon { width: 20px; height: 20px; flex: none; }
h1, h2, h3 { color: var(--navy); line-height: 1.2; margin: 0 0 0.5em; }
p { margin: 0 0 1em; }
.muted { color: var(--text-muted); }

.skip-link {
  position: absolute; left: -999px; top: 8px;
  background: var(--surface); color: var(--accent);
  padding: 10px 16px; border-radius: var(--r-sm); box-shadow: var(--shadow-sm); z-index: 100;
}
.skip-link:focus { left: 8px; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 26px;
  border: none; border-radius: var(--r-sm);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform var(--t), filter var(--t), background var(--t), box-shadow var(--t);
}
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-btn); }
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn-ghost { background: var(--surface); color: var(--navy); border: 1px solid var(--border-strong); }
.btn-ghost:hover { background: var(--surface-2); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent); }

/* ---- header ---- */
.site-header { padding: 18px 0; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
/* Im Kopf steht das Logo als Datei aus logo/, nie nachgebaut aus Bildmarke und Text: Schriftzug,
   Stern und Claim sind Teil der Datei (MARKENBLATT.md). Auf schmalen Schirmen 168 px, nie unter
   der Mindestbreite von 160 px für das Logo mit Claim. Für dunklen Grund die weiße Fassung,
   umgeschaltet wie das Theme. */
.logo-lockup { display: block; width: 200px; height: auto; }
@media (max-width: 640px) { .logo-lockup { width: 168px; } }
.logo-dunkel { display: none; }
:root[data-theme="dark"] .logo-hell { display: none; }
:root[data-theme="dark"] .logo-dunkel { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-hell { display: none; }
  :root:not([data-theme="light"]) .logo-dunkel { display: block; }
}
.app-visual .brand-mark { width: 140px; height: 140px; filter: drop-shadow(0 16px 32px rgba(0, 59, 142, 0.22)); }
.header-cta { min-height: 40px; padding: 8px 18px; font-size: 0.9rem; }

/* ---- Kopfnavigation ----
   Auf breiten Schirmen eine Reihe neben dem Logo, darunter ein Feld, das unter der Kopfzeile
   aufklappt. Der Umschalter erscheint ausschließlich unter `html.js-nav`, also erst, wenn
   nav.js wirklich läuft: Ein Hamburger-Knopf, der nichts tut, weil das Skript fehlt, wäre
   schlimmer als gar keiner — dann bliebe die Navigation unerreichbar. Ohne Skript umbricht
   die Reihe stattdessen in eine zweite Zeile, wofür der Kopf `flex-wrap` trägt. */
.site-header { position: relative; z-index: 20; }
.site-header .wrap { position: relative; flex-wrap: wrap; }
.site-nav { display: flex; align-items: center; gap: 22px; }
.site-nav a:not(.btn) {
  color: var(--text-muted); text-decoration: none;
  font-size: 0.92rem; font-weight: 600; white-space: nowrap;
  transition: color var(--t), background var(--t);
}
.site-nav a:not(.btn):hover { color: var(--accent); }
.site-nav a[aria-current="page"] { color: var(--navy); }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0;
  background: var(--surface); color: var(--navy);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  cursor: pointer; transition: color var(--t), border-color var(--t);
}
.nav-toggle:hover { color: var(--accent); border-color: var(--accent); }
.nav-toggle:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .nav-x, .site-header.nav-open .nav-toggle .nav-balken { display: none; }
.site-header.nav-open .nav-toggle .nav-x { display: block; }

@media (max-width: 767px) {
  .js-nav .nav-toggle { display: inline-flex; }
  .js-nav .site-nav {
    display: none;
    /* 20px = der waagerechte Innenabstand von .wrap. Ohne das legt sich das Feld über die
       Bildschirmkanten, weil `left: 0` am Polsterrand misst, nicht am Textrand. */
    position: absolute; top: calc(100% + 14px); left: 20px; right: 20px;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r); box-shadow: var(--shadow); padding: 10px;
  }
  .js-nav .site-header.nav-open .site-nav { display: flex; }
  .js-nav .site-nav a:not(.btn) {
    padding: 12px 14px; border-radius: var(--r-sm); font-size: 1rem;
  }
  .js-nav .site-nav a:not(.btn):hover { background: var(--surface-2); }
  .js-nav .site-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-strong); }
  .js-nav .site-nav .btn { margin-top: 8px; width: 100%; justify-content: center; }
}

/* ---- hero ----
   Mobil eine Spalte, die Animation direkt unter der Überschrift: So steht sie zusammen mit
   „Jetzt Anruf starten“ im ersten sichtbaren Bereich. Untertitel, Hinweis, Label und Plaketten
   rücken darunter (`order`, dafür löst sich .hero-text mobil per `display: contents` auf).
   Ab 860 px zwei Spalten, Text links, Animation rechts. */
.hero { padding: clamp(24px, 6vw, 80px) 0 clamp(32px, 6vw, 64px); }
.hero-grid { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-text { display: contents; }
.hero .eyebrow {
  order: 6;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--ok-soft); color: var(--ok-strong);
  border: 1px solid var(--ok-border);
  padding: 5px 14px; border-radius: var(--r-pill);
  font-size: 0.8rem; font-weight: 650; letter-spacing: 0.02em;
  margin: 20px 0 0;
}
.hero .eyebrow .icon { width: 14px; height: 14px; }
.hero h1 {
  order: 1;
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  letter-spacing: -0.02em; font-weight: 700;
  max-width: 17em; margin: 0 auto 14px;
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-anim { order: 2; width: 100%; margin: 0 0 22px; }
.hero .cta-row { order: 3; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hero .sub {
  order: 4;
  max-width: 640px; margin: 22px auto 0;
  color: var(--text-muted); font-size: 1.1rem;
}
.hero .cta-note { order: 5; margin: 14px 0 0; font-size: 0.86rem; color: var(--text-faint); }
.hero .name { order: 5; max-width: 640px; margin: 10px auto 0; font-size: 0.9rem; color: var(--text-muted); }
.hero .name strong { color: var(--text); }
.hero .trust-badges { order: 7; margin-top: 18px; }
@media (min-width: 860px) {
  .hero-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 56px; align-items: center; text-align: left;
  }
  .hero-text { display: block; }
  .hero .eyebrow { margin: 0 0 20px; }
  .hero h1 { font-size: clamp(2.2rem, 3.4vw, 2.8rem); margin: 0 0 14px; }
  .hero .sub { margin: 0 0 28px; font-size: 1.06rem; }
  .hero .name { margin: 10px 0 0; }
  .hero .cta-row, .hero .trust-badges { justify-content: flex-start; }
  .hero .trust-badges { margin-top: 22px; }
  .hero-anim { margin: 0; }
}

/* Technische Trust-Badges. Absichtlich kantig (keine Pill-Radien wie .eyebrow): sie
 * gehoeren zur Architektur-Aussage, nicht zum Marketing-Ton, und sollen wie ein
 * Datenblatt-Vermerk lesen. */
.trust-badges {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  list-style: none; margin: 24px 0 0; padding: 0;
}
.trust-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  background: var(--surface); color: var(--text-muted);
  border: 1px solid var(--border-strong);
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.01em;
}
.trust-badge .icon { width: 13px; height: 13px; flex: none; color: var(--accent); }
@media (max-width: 480px) { .trust-badge { font-size: 0.72rem; padding: 5px 10px; } }

/* ---- sections ---- */
.section { padding: clamp(40px, 7vw, 80px) 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.section-head h2 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); letter-spacing: -0.01em; }
.section-head p { color: var(--text-muted); }

/* ---- how it works ---- */
.steps { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
/* 4-Schritte-Flow: auf Tablet 2x2 (vier Spalten waeren dort zu schmal fuer die
 * Ueberschriften), ab Desktop eine Reihe. */
@media (min-width: 768px) { .steps-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) {
  .steps-4 { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .steps-4 .step { padding: 24px 20px 22px; }
  .steps-4 .step h3 { font-size: 1rem; }
}
.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 26px 24px 24px;
}
.step .step-no {
  position: absolute; top: 22px; right: 22px;
  color: var(--text-faint); font-weight: 700; font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}
.step .step-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--r);
  background: var(--accent-soft); color: var(--accent);
  margin-bottom: 16px;
}
.step .step-icon .icon { width: 22px; height: 22px; }
.step h3 { font-size: 1.05rem; }
.step p { color: var(--text-muted); font-size: 0.94rem; margin: 0; }

/* ---- eIDAS 2.0 & Privacy-by-Design ----
 * Visuell abgesetzt vom Rest der Seite: eigener Grundton, durchgehend rechte Winkel
 * (kein border-radius), Akzentkante oben. Das geradlinige Raster ist hier kein Stil-Gag —
 * es unterscheidet die regulatorische Aussage von den Produkt-Sektionen, die bewusst
 * weicher gestaltet sind. */
.arch-section {
  background: var(--bg-tint);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.arch-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 14px; padding: 5px 12px;
  background: var(--surface); color: var(--text-muted);
  border: 1px solid var(--border-strong);
  font-size: 0.74rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase;
}
.arch-eyebrow .icon { width: 13px; height: 13px; flex: none; color: var(--eu-gold); }

/* gap:1px + Flaechenhintergrund = durchgehende Trennlinien statt schwebender Karten:
 * drei Saeulen EINER Architektur, nicht drei Features. */
.arch-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border-strong); }
@media (min-width: 860px) { .arch-grid { grid-template-columns: repeat(3, 1fr); } }
.arch-card {
  position: relative;
  /* Spalte + auto-Margin auf .arch-proof: die Belegzeilen liegen auf EINER Grundlinie,
   * auch wenn die Fliesstexte unterschiedlich lang sind. */
  display: flex; flex-direction: column;
  background: var(--surface);
  border-top: 3px solid var(--accent);
  padding: 26px 24px 24px;
}
.arch-card .arch-num {
  position: absolute; top: 24px; right: 22px;
  color: var(--text-faint); font-weight: 700; font-size: 0.8rem;
  font-variant-numeric: tabular-nums; letter-spacing: 0.06em;
}
.arch-card .arch-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: var(--accent-soft); color: var(--accent);
  margin-bottom: 15px;
}
.arch-card .arch-icon .icon { width: 20px; height: 20px; }
.arch-card h3 { font-size: 1.04rem; letter-spacing: -0.01em; margin-bottom: 8px; padding-right: 32px; }
/* Mindestabstand liegt auf dem Fliesstext, nicht auf .arch-proof — dessen auto-Margin
 * schiebt nur nach unten und wuerde bei vollem Text sonst auf 0 zusammenfallen. */
.arch-card p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; margin: 0 0 14px; }
/* Belegzeile: wo die Zusage im Code erzwungen wird. Damit "nachpruefbar" nicht nur
 * behauptet, sondern verortet ist. */
.arch-card .arch-proof {
  margin: auto 0 0; padding-top: 11px;
  border-top: 1px solid var(--border);
  color: var(--text-faint); font-size: 0.78rem; line-height: 1.5;
}
.arch-card .arch-proof code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.94em; color: var(--text-muted);
}
.arch-card .arch-proof a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Editionen-Vergleich (editionen.html) ----
 * Die Tabelle ist breites Inhaltsformat: sie scrollt in ihrem EIGENEN Container,
 * damit die Seite selbst nie horizontal scrollt. */
.ed-tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.ed-table { width: 100%; border-collapse: collapse; font-size: 0.93rem; min-width: 520px; }
.ed-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-2); color: var(--navy);
  text-align: left; font-weight: 650; font-size: 0.82rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 12px 16px; border-bottom: 1px solid var(--border-strong);
}
.ed-table thead th:nth-child(2), .ed-table thead th:nth-child(3) { text-align: center; width: 132px; }
.ed-table td { padding: 11px 16px; border-bottom: 1px solid var(--border); color: var(--text); }
.ed-table td:nth-child(2), .ed-table td:nth-child(3) { text-align: center; font-weight: 600; }
.ed-table tbody tr:last-child td { border-bottom: none; }
.ed-table tbody tr:hover td { background: var(--bg-tint); }
/* Gruppenkopf: trennt die Kategorien ohne eine zweite Tabelle zu brauchen. */
.ed-table .ed-group {
  text-align: left; padding: 16px 16px 8px;
  color: var(--accent-strong); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--bg-tint); border-bottom: 1px solid var(--border-strong);
}
.ed-table .yes { color: var(--ok-strong); }
/* „–" ist bewusst zurueckhaltend statt eines roten Kreuzes: die Zeile fehlt in einer
 * Edition, sie ist kein Fehler. Rot wuerde Community wie defekt aussehen lassen. */
.ed-table .no { color: var(--text-faint); }
.ed-table .soon { color: var(--text-muted); font-weight: 500; font-size: 0.84rem; font-style: italic; }

.ed-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: baseline; }
.ed-dot.ed-c { background: var(--ok); }
.ed-dot.ed-p { background: var(--accent); }

.ed-note { margin: 16px 2px 0; color: var(--text-muted); font-size: 0.88rem; line-height: 1.55; }

/* Nur fuer Screenreader — die Tabelle braucht eine Beschriftung, sichtbar waere sie
 * doppelt zur Ueberschrift darueber. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- tech & privacy ---- */
.privacy { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .privacy { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
.privacy-card {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 22px;
}
.privacy-card .p-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-sm);
  background: var(--ok-soft); color: var(--ok-strong);
}
.privacy-card h3 { font-size: 1rem; margin-bottom: 4px; }
.privacy-card p { color: var(--text-muted); font-size: 0.92rem; margin: 0; }

/* ---- final CTA ---- */
.cta-final {
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: clamp(32px, 6vw, 56px) 24px;
}
.cta-final h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.cta-final p { color: var(--text-muted); max-width: 480px; margin: 0 auto 24px; }

/* ---- footer ---- */
.site-footer { padding: 40px 0 48px; }
.site-footer .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--border); padding-top: 24px;
  font-size: 0.85rem; color: var(--text-faint);
}
.site-footer a { color: var(--text-muted); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 18px; }

/* Theme toggle (footer meta pill). */
.theme-toggle {
  min-height: 36px; width: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--text-faint);
  font: inherit;
  cursor: pointer;
  transition: color var(--t), border-color var(--t);
}
.theme-toggle:hover { color: var(--text-muted); border-color: var(--border-strong); }
.theme-toggle:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.theme-toggle svg { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* Logo: der Gold-Sternkranz dreht sich sehr langsam (nur transform, GPU). Das Schild
 * bleibt statisch. Respektiert prefers-reduced-motion (dann steht der Kranz still). */

/* ---- Testphase-Hinweis ---- */
.notice-section { padding: 0 0 8px; }
.notice {
  display: flex; gap: 14px; align-items: flex-start;
  max-width: 900px; margin: 0 auto;
  background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: 18px 22px;
}
.notice .n-icon { flex: none; color: var(--accent); margin-top: 1px; }
.notice h2 { font-size: 1.05rem; margin: 0 0 4px; color: var(--navy); }
.notice p { margin: 0; color: var(--text); font-size: 0.95rem; }
.notice p a { color: var(--accent); }
/* Der Launch-Partner-Hinweis ist eine Nachricht, der Testphasen-Hinweis eine Einschränkung —
   deshalb trägt der erste die Akzentfarbe und steht zuerst. */
.notice-accent { border-color: var(--accent-border); background: var(--accent-soft); }
.notice-accent .n-icon { color: var(--accent); }
/* Der Hinweiskasten kennt keinen Knopf — der Organisationen-Kasten braucht einen.
   Alles andere an ihm ist bewusst derselbe Kasten. */
.notice-cta { margin-top: 14px !important; }
@media (max-width: 560px) { .notice-cta .btn { width: 100%; justify-content: center; } }

.notice-zusatz { margin-top: 8px !important; color: var(--text-muted) !important; font-size: 0.9rem !important; }

/* ---- "NEU"-Badge (EU-Gold, sparsam) ---- */
.badge-new {
  display: inline-block; vertical-align: middle;
  background: var(--eu-gold); color: #1b2433;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em;
  padding: 2px 8px; border-radius: var(--r-pill); margin-left: 6px;
}

/* ---- App / TestFlight ---- */
.app-panel {
  display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: clamp(28px, 5vw, 44px);
}
@media (min-width: 768px) { .app-panel { grid-template-columns: 200px 1fr; gap: 36px; } }
.app-visual { display: flex; justify-content: center; }
/* App-Demo: wird nur eingesetzt, wenn die Instanz sie bereitstellt (siehe theme.js). Hochkant
   9:16 wie aufgenommen; die Höhe begrenzt, damit der Abschnitt auf dem Laptop nicht auseinander-
   fällt. */
.app-demo { position: relative; display: block; width: 100%; max-width: 264px; aspect-ratio: 9 / 16;
  border: 0; padding: 0; background: #0b1220; border-radius: 26px; overflow: hidden; cursor: pointer;
  box-shadow: 0 18px 40px rgba(0, 59, 142, 0.22); }
.app-demo video, .app-demo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.app-demo .app-demo-play { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; background: rgba(6, 17, 29, 0.32);
  transition: opacity .35s ease, background .15s ease; }
.app-demo:hover .app-demo-play { background: rgba(6, 17, 29, 0.18); }
.app-demo .app-demo-play svg { width: 64px; height: 64px; filter: drop-shadow(0 4px 12px rgba(0,0,0,.4)); }
/* Fading rather than switching off: the film starts on its own once scrolled to, and a hard cut
   at that moment reads as a glitch. Pointer events go through so the whole tile stays clickable. */
.app-demo[data-playing] .app-demo-play { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .app-demo .app-demo-play { transition: none; } }
.app-visual .app-logo { width: 140px; height: 140px; filter: drop-shadow(0 16px 32px rgba(0, 59, 142, 0.22)); }
.app-text h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-top: 6px; }
.app-perks { list-style: none; margin: 4px 0 22px; padding: 0; display: grid; gap: 10px; }
.app-perks li {
  position: relative; padding-left: 26px; color: var(--text-muted); font-size: 0.95rem; line-height: 1.45;
}
.app-perks li strong { color: var(--navy); font-weight: 600; }
.app-perks li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--ok-strong); font-weight: 800;
}
.app-text .cta-note { margin-top: 12px; text-align: left; }

/* ---- Rechtsseiten (Impressum) ---- */
.prose { max-width: 760px; margin: 0 auto; }
.prose h1 { font-size: clamp(1.6rem, 3vw, 2rem); margin: 0 0 4px; }
.prose h2 { font-size: 1.05rem; margin: 26px 0 6px; color: var(--navy); }
.prose p { color: var(--text); line-height: 1.6; }
.prose .muted { color: var(--text-muted); }

/* Entwurfs-Markierungen auf Rechtsseiten */
.legal-todo { background: var(--warn-soft); border: 1px solid var(--warn-border); color: var(--warn-text); border-radius: var(--r); padding: 12px 16px; margin: 18px 0; font-size: 0.9rem; }
.legal-todo-inline { background: var(--warn-soft); color: var(--warn-text); border-radius: 4px; padding: 0 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* =====================================================================================
 * Animationen der Startseite (anruf-animation.js)
 * Oben der verifizierte Anruf (#vc-call), weiter unten das Zusammenarbeiten (#vc-docs).
 * Jede Animation wählt ihre Form nach der eigenen Breite: ab 440 px beide Seiten
 * nebeneinander (.duo), darunter die Sicht von Anna auf einem Handy (.solo).
 * Zustände kommen als Klassen `at-<schritt>` vom Skript.
 * ===================================================================================== */
.vc { container: vc / inline-size; width: 100%; max-width: 560px; margin: 0 auto; }
.vc-stage { position: relative; text-align: left; transition: opacity 0.35s ease; }
.vc.is-fade .vc-stage { opacity: 0; }
.vc.no-tr *, .vc.rm * { transition: none !important; animation: none !important; }

/* ---- Desktop: beide Seiten ---- */
.duo { position: relative; display: grid; grid-template-columns: 1fr 60px 1fr; align-items: center; }
.solo { display: none; }
.cap-solo { display: none; }
@container vc (max-width: 439px) {
  .duo, .cap-duo { display: none; }
  .solo { display: block; }
  .cap-solo { display: inline; }
}

.tile {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow);
  transition: opacity 0.5s ease;
}
.feed { position: absolute; inset: 0; }
.feed svg, .s-feed svg { display: block; width: 100%; height: 100%; }
.blur { filter: blur(9px) saturate(0.45); transform: scale(1.1); transition: filter 0.9s ease, transform 0.9s ease; }
.at-connected .blur { filter: none; transform: none; }

.tag {
  position: absolute; left: 9px; top: 9px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px 3px 8px; border-radius: var(--r-pill);
  background: var(--tag-bg); color: #fff;
  font-size: 11.5px; font-weight: 600; line-height: 1.5; white-space: nowrap;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.tag svg { width: 12px; height: 12px; }
.t-id { opacity: 0; transform: translateY(-4px); }
.at-shared .t-unknown { opacity: 0; transform: translateY(-4px); }
.at-shared .t-id { opacity: 1; transform: none; }
.at-connected .t-id { opacity: 0; }

.badge {
  position: absolute; left: 9px; right: 9px; bottom: 9px; z-index: 2;
  display: flex; gap: 8px; align-items: center;
  padding: 7px 10px; border-radius: 11px;
  background: var(--surface); border: 1px solid var(--ok-border); box-shadow: var(--shadow-sm);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.45s ease 0.35s, transform 0.45s ease 0.35s;
}
.at-connected .badge { opacity: 1; transform: none; }
.badge .ok-dot { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ok-soft); color: var(--ok-strong); }
.badge .ok-dot svg { width: 13px; height: 13px; }
.badge b { display: block; color: var(--navy); font-size: 12.5px; line-height: 1.25; }
.badge small { display: block; color: var(--ok-strong); font-size: 10.5px; font-weight: 600; line-height: 1.3; }

/* Wallet-Blatt */
.wallet {
  position: absolute; left: 7px; right: 7px; bottom: 7px; z-index: 3;
  padding: 10px 10px 9px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow);
  font-size: 11.5px; line-height: 1.35; color: var(--text);
  transform: translateY(calc(100% + 14px));
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tile-b .wallet { transition-delay: 0.28s; }
.at-wallet .wallet { transform: none; }
.at-review .wallet, .at-review .tile-b .wallet { transform: translateY(calc(100% + 14px)); transition-delay: 0s; }
.w-head { display: flex; align-items: center; font-weight: 700; color: var(--navy); font-size: 12px; }
.w-head svg { width: 15px; height: 15px; color: var(--accent); }
.w-req { color: var(--text-muted); margin-bottom: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0 0 8px; padding: 0; }
.chips li { padding: 1px 7px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; font-size: 11px; }
.w-btn {
  position: relative; overflow: hidden;
  display: grid; place-items: center; height: 28px; border-radius: 8px;
  background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 12px;
  transition: background 0.3s ease;
}
.w-btn > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 5px; transition: opacity 0.25s ease; }
.w-btn svg { width: 13px; height: 13px; }
.w-btn .b2 { opacity: 0; }
.at-shared .w-btn { background: var(--ok); animation: press 0.4s ease; }
.at-shared .w-btn .b1 { opacity: 0; }
.at-shared .w-btn .b2 { opacity: 1; }
.tile-b .w-btn { transition-delay: 0.28s; }
.tile-b .w-btn > span { transition-delay: 0.28s; }
.at-shared .tile-b .w-btn { animation-delay: 0.28s; }
.w-btn::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px;
  border-radius: 50%; background: rgba(255, 255, 255, 0.55); opacity: 0;
}
.at-shared .w-btn::after { animation: ripple 0.55s ease-out; }
.at-shared .tile-b .w-btn::after { animation-delay: 0.28s; }
@keyframes press { 0%, 100% { transform: scale(1); } 40% { transform: scale(0.94); } }
@keyframes ripple { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(14); } }

/* d-you im Wallet-Blatt */
.w-head { gap: 8px; margin-bottom: 7px; }
/* Neutrales Wallet-Symbol statt App-Icon, bis die Freigabe für das d-you-Icon vorliegt. */
.w-logo { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 24%; background: var(--accent-soft); color: var(--accent); }
.w-logo svg { width: 16px; height: 16px; }
.w-name { display: block; font-weight: 700; color: var(--navy); font-size: 12.5px; line-height: 1.15; }
.w-sub { display: block; font-weight: 500; color: var(--text-muted); font-size: 10.5px; line-height: 1.25; }
.w-doc {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px; padding: 4px 7px;
  border-radius: 7px; background: var(--surface-2); border: 1px solid var(--border);
  font-weight: 600; color: var(--navy);
}
.w-doc svg { flex: none; width: 15px; height: 15px; color: var(--accent); }

/* Sprechen. Anna und Ben reden abwechselnd, wie in einem echten Gespräch:
   Wer spricht, bekommt einen Rahmen und einen Pegel im Namensschild, bewegt Kiefer und Kopf.
   Wer zuhört, nickt. Beide blinzeln. Ein Takt dauert 3,6 s, Ben ist um 1,8 s versetzt. */
.head { transform-box: view-box; transform-origin: 50px 82px; }
.eye { transform-box: fill-box; transform-origin: center; animation: blink 4.7s infinite; }
.eye-b { animation-duration: 5.4s; animation-delay: -2.3s; }
.m-open { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0.22); }
.at-connected .m-open-a { animation: talk 3.6s ease-in-out 0.9s infinite; }
.at-connected .m-open-b { animation: talk 3.6s ease-in-out 2.7s infinite; }
.at-connected .head-a { animation: head 3.6s ease-in-out 0.9s infinite; }
.at-connected .head-b { animation: head 3.6s ease-in-out 2.7s infinite; }
.tile::after, .pip::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit; box-shadow: inset 0 0 0 2.5px var(--accent); opacity: 0;
}
.at-connected .tile-a::after, .at-connected .pip::after { animation: ring 3.6s linear 0.9s infinite; }
.at-connected .tile-b::after { animation: ring 3.6s linear 2.7s infinite; }
.eq { flex: none; margin-left: auto; display: flex; align-items: center; gap: 2px; height: 14px; }
.eq i { display: block; width: 3px; height: 14px; border-radius: 2px; background: var(--accent); transform: scaleY(0.22); }
.at-connected .eq-a i:nth-child(1) { animation: eq1 3.6s linear 0.9s infinite; }
.at-connected .eq-a i:nth-child(2) { animation: eq2 3.6s linear 0.9s infinite; }
.at-connected .eq-a i:nth-child(3) { animation: eq3 3.6s linear 0.9s infinite; }
.at-connected .eq-b i:nth-child(1) { animation: eq1 3.6s linear 2.7s infinite; }
.at-connected .eq-b i:nth-child(2) { animation: eq2 3.6s linear 2.7s infinite; }
.at-connected .eq-b i:nth-child(3) { animation: eq3 3.6s linear 2.7s infinite; }
.vc.is-paused .m-open, .vc.is-paused .head, .vc.is-paused .eye, .vc.is-paused .eq i,
.vc.is-paused .tile::after, .vc.is-paused .pip::after { animation-play-state: paused; }

/* Silben: Kiefer auf, halb zu, auf … mit einer kurzen Pause zwischen zwei Wörtern */
@keyframes talk {
  0% { transform: scaleY(0.22); }
  3% { transform: scaleY(0.85); }
  6% { transform: scaleY(0.35); }
  9% { transform: scaleY(0.7); }
  12% { transform: scaleY(0.26); }
  15% { transform: scaleY(1); }
  18% { transform: scaleY(0.45); }
  21%, 24% { transform: scaleY(0.22); }
  27% { transform: scaleY(0.8); }
  30% { transform: scaleY(0.3); }
  33% { transform: scaleY(0.95); }
  36% { transform: scaleY(0.4); }
  39% { transform: scaleY(0.65); }
  43%, 100% { transform: scaleY(0.22); }
}
/* Sprechen: leichtes Neigen. Zuhören: zweimal nicken, während der andere spricht. */
@keyframes head {
  0% { transform: none; }
  9% { transform: rotate(-1.6deg) translateY(-0.4px); }
  21% { transform: rotate(1.1deg); }
  33% { transform: rotate(-0.8deg) translateY(-0.3px); }
  44%, 60% { transform: none; }
  65% { transform: translateY(1.3px) rotate(0.5deg); }
  70% { transform: none; }
  75% { transform: translateY(0.9px) rotate(0.3deg); }
  80%, 100% { transform: none; }
}
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(0.1); } }
@keyframes ring { 0% { opacity: 0; } 3%, 40% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes eq1 { 0% { transform: scaleY(0.22); } 4% { transform: scaleY(0.9); } 8% { transform: scaleY(0.4); } 12% { transform: scaleY(1); } 16% { transform: scaleY(0.5); } 20% { transform: scaleY(0.3); } 25% { transform: scaleY(0.7); } 30% { transform: scaleY(1); } 35% { transform: scaleY(0.45); } 40% { transform: scaleY(0.8); } 43%, 100% { transform: scaleY(0.22); } }
@keyframes eq2 { 0% { transform: scaleY(0.22); } 3% { transform: scaleY(0.6); } 7% { transform: scaleY(1); } 11% { transform: scaleY(0.35); } 15% { transform: scaleY(0.85); } 19% { transform: scaleY(0.25); } 24% { transform: scaleY(1); } 29% { transform: scaleY(0.5); } 33% { transform: scaleY(0.9); } 38% { transform: scaleY(0.4); } 43%, 100% { transform: scaleY(0.22); } }
@keyframes eq3 { 0% { transform: scaleY(0.22); } 5% { transform: scaleY(0.5); } 9% { transform: scaleY(0.8); } 13% { transform: scaleY(0.3); } 17% { transform: scaleY(0.65); } 22% { transform: scaleY(0.9); } 27% { transform: scaleY(0.35); } 31% { transform: scaleY(0.7); } 36% { transform: scaleY(1); } 40% { transform: scaleY(0.3); } 43%, 100% { transform: scaleY(0.22); } }

/* Verbindungslinie */
.link { position: relative; height: 40px; display: grid; place-items: center; }
.link svg.line { position: absolute; left: -2px; right: -2px; top: 50%; width: calc(100% + 4px); height: 6px; margin-top: -3px; overflow: visible; }
.l-dash { stroke: var(--border-strong); stroke-width: 2; stroke-dasharray: 3 5; }
.l-solid { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 70; stroke-dashoffset: 70; transition: stroke-dashoffset 0.7s ease; }
.at-connected .l-solid { stroke-dashoffset: 0; }
.lock {
  position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-faint);
  transition: background 0.4s ease 0.4s, color 0.4s ease 0.4s, border-color 0.4s ease 0.4s, transform 0.4s ease 0.4s;
}
.lock svg { width: 15px; height: 15px; }
.at-connected .lock { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: scale(1.12); }
.l-label {
  position: absolute; top: calc(50% + 20px); left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--accent); white-space: nowrap;
  opacity: 0; transition: opacity 0.4s ease 0.6s;
}
.at-connected .l-label { opacity: 1; }

/* Prüfkarte */
.review {
  position: absolute; left: 50%; top: 50%; z-index: 5;
  width: min(330px, 78%);
  padding: 13px 14px 12px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow);
  font-size: 12.5px; line-height: 1.4;
  opacity: 0; transform: translate(-50%, -46%) scale(0.97);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}
.at-review .review { opacity: 1; transform: translate(-50%, -50%); }
.at-connected .review { opacity: 0; transform: translate(-50%, -54%) scale(0.98); }
.at-review .tile { opacity: 0.4; }
.at-connected .tile { opacity: 1; }
.r-head { display: flex; align-items: center; gap: 7px; font-weight: 700; color: var(--navy); font-size: 13px; margin-bottom: 6px; }
.r-head svg { width: 16px; height: 16px; color: var(--accent); }
.r-tab { width: 100%; font: inherit; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.r-tab th, .r-tab td { padding: 4px 0; text-align: left; border-bottom: 1px solid var(--border); }
.r-tab thead th { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); padding-top: 0; }
.r-tab tbody th { font-weight: 500; color: var(--text-muted); width: 38%; }
.r-tab td { width: 31%; }
.cell { display: grid; }
.cell > span { grid-area: 1 / 1; transition: opacity 0.35s ease, transform 0.35s ease; }
.cell .m { color: var(--text-faint); letter-spacing: 0.12em; }
.cell .v { color: var(--navy); font-weight: 600; opacity: 0; transform: translateY(4px); }
.at-open .cell .m { opacity: 0; }
.at-open .cell .v { opacity: 1; transform: none; }
.r-no { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; margin: 8px 0 10px; font-size: 11.5px; }
.r-no span { font-weight: 600; color: var(--text-muted); }
.r-no s { color: var(--text-faint); text-decoration-thickness: 1.5px; }
.consent { display: flex; flex-wrap: wrap; gap: 6px; }
.c {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 4px; border-radius: var(--r-pill);
  border: 1px solid var(--border-strong); color: var(--text-muted);
  font-size: 11.5px; font-weight: 600;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.c i {
  display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
  border: 1.5px solid var(--border-strong); color: transparent;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.c i svg { width: 11px; height: 11px; }
.at-consentA .c-a, .at-consentB .c-b { background: var(--ok-soft); border-color: var(--ok-border); color: var(--ok-strong); }
.at-consentA .c-a i, .at-consentB .c-b i { background: var(--ok); border-color: var(--ok); color: var(--surface); }

/* ---- Mobil: deine Sicht ---- */
.solo {
  position: relative; aspect-ratio: 16 / 11; overflow: hidden;
  border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow);
}
.s-feed { position: absolute; inset: 0; }
.s-top { position: absolute; left: 9px; top: 9px; right: 86px; z-index: 2; }
.s-top .tag { left: 0; top: 0; }
.s-badge {
  position: absolute; left: 0; top: 0; display: flex; gap: 8px; align-items: center;
  padding: 6px 11px 6px 7px; border-radius: 11px; z-index: 2;
  background: var(--surface); border: 1px solid var(--ok-border); box-shadow: var(--shadow-sm);
  opacity: 0; transform: translateY(-6px);
  transition: opacity 0.45s ease 0.35s, transform 0.45s ease 0.35s;
}
.at-connected .s-badge { opacity: 1; transform: none; }
.s-badge .ok-dot { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ok-soft); color: var(--ok-strong); }
.s-badge .ok-dot svg { width: 13px; height: 13px; }
.s-badge b { display: block; color: var(--navy); font-size: 12.5px; line-height: 1.25; }
.s-badge small { display: block; color: var(--ok-strong); font-size: 10.5px; font-weight: 600; line-height: 1.3; }
.pip {
  position: absolute; right: 9px; top: 9px; z-index: 2;
  width: 66px; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden;
  border: 2px solid var(--surface); box-shadow: var(--shadow-sm);
}
.pip svg { display: block; width: 100%; height: 100%; }
.pip-ok {
  position: absolute; right: 3px; bottom: 3px; display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%; background: var(--ok); color: #fff;
  transform: scale(0); transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) 0.2s;
}
.pip-ok svg { width: 11px; height: 11px; }
.at-shared .pip-ok { transform: scale(1); }
.sheet {
  position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 4;
  padding: 11px 12px 10px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow);
  font-size: 12px; line-height: 1.35;
  transform: translateY(calc(100% + 14px));
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.s-wallet .chips { margin-bottom: 9px; }
.s-wallet .w-btn { height: 32px; }
.at-wallet .s-wallet { transform: none; }
.at-review .s-wallet { transform: translateY(calc(100% + 14px)); }
.at-review .s-review { transform: none; }
.at-connected .s-review { transform: translateY(calc(100% + 14px)); }
.s-review .r-tab th, .s-review .r-tab td { padding: 2px 0; }
.s-review .r-no { margin: 5px 0 7px; }
.s-bar {
  position: absolute; left: 50%; bottom: 10px; z-index: 3; transform: translate(-50%, 16px);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent); font-size: 11.5px; font-weight: 600;
  opacity: 0; transition: opacity 0.4s ease 0.6s, transform 0.4s ease 0.6s;
}
.s-bar svg { width: 13px; height: 13px; }
.at-connected .s-bar { opacity: 1; transform: translate(-50%, 0); }


/* ---- Szenen 5–7: Zusammenarbeiten ----
   Die Kacheln rücken klein in die Ecke, das Gespräch läuft dort weiter. */
.duo .tile { transform-origin: top right; transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.at-work .tile { opacity: 1; }
.at-work .tile-b { transform: translate(-8px, 8px) scale(0.34); }
.at-work .tile-a { transform: translate(calc(100% + 52px), calc(34% + 16px)) scale(0.34); }
.at-work .badge, .at-work .tag { opacity: 0; transition-delay: 0s; }
.link { transition: opacity 0.4s ease; }
.at-work .link { opacity: 0; }

.work {
  position: absolute; z-index: 4; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); text-align: left;
  opacity: 0; transform: scale(0.97); pointer-events: none;
  transition: opacity 0.5s ease 0.25s, transform 0.5s ease 0.25s;
}
.duo .work {
  left: 0; top: 0; bottom: 0; right: calc((100% - 60px) / 2 * 0.34 + 16px);
  border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.solo .work { inset: 0; border-radius: inherit; }
.at-work .work { opacity: 1; transform: none; }

.w-top {
  position: relative; flex: none; display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px; border-bottom: 1px solid var(--border);
  font-size: 12px; font-weight: 700; color: var(--navy);
}
.wb { position: absolute; left: 12px; top: 0; height: 100%; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; opacity: 0; transition: opacity 0.35s ease; }
.wb svg { width: 15px; height: 15px; color: var(--accent); }
.w-e2e { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--ok-strong); }
.w-e2e svg { width: 11px; height: 11px; }
.at-work .wb-chat { opacity: 1; }
.at-share .wb-chat { opacity: 0; }
.at-share .wb-share { opacity: 1; }
.at-sign .wb-share { opacity: 0; }
.at-sign .wb-sign { opacity: 1; }

.w-body { position: relative; flex: 1; display: grid; padding: 10px 12px 12px; min-height: 0; }
.pane { grid-area: 1 / 1; min-height: 0; opacity: 0; transition: opacity 0.4s ease; }
.at-work .pane-chat { opacity: 1; }
.at-share .pane-chat { opacity: 0; }
.at-share .pane-share { opacity: 1; }
.at-sign .pane-share { opacity: 0; }
.at-sign .pane-sign { opacity: 1; }

/* Chat */
.pane-chat { display: flex; flex-direction: column; gap: 7px; font-size: 12px; line-height: 1.35; }
.msg {
  max-width: 80%; padding: 6px 10px; border-radius: 12px;
  opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.35s ease;
}
.msg-in { align-self: flex-start; background: var(--surface-2); color: var(--text); border-bottom-left-radius: 4px; }
.msg-out { align-self: flex-end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 4px; }
.at-chat .m1 { opacity: 1; transform: none; transition-delay: 0.3s; }
.at-file .m2, .at-reply .m3 { opacity: 1; transform: none; }
.msg-file { display: flex; align-items: center; gap: 8px; width: 80%; border: 1px solid var(--border); background: var(--surface); }
.f-ico { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); }
.f-ico svg { width: 15px; height: 15px; }
.f-txt { flex: 1; min-width: 0; }
.f-txt b, .doc-row b { display: block; color: var(--navy); font-size: 12px; }
.f-txt small, .doc-row small { display: block; color: var(--text-muted); font-size: 10.5px; }
.prog { display: block; height: 3px; margin-top: 4px; border-radius: 2px; background: var(--border); overflow: hidden; }
.prog span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 1.2s ease-in-out 0.3s; }
.at-file .prog span { transform: scaleX(1); }
.f-ok { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ok); color: #fff; transform: scale(0); transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1) 1.5s; }
.f-ok svg { width: 11px; height: 11px; }
.at-file .f-ok { transform: scale(1); }

/* Bildschirm teilen */
.pane-share { display: flex; }
.screen { position: relative; flex: 1; display: flex; flex-direction: column; border: 1px solid var(--border-strong); border-radius: 9px; overflow: hidden; background: var(--surface-2); }
.scr-bar { flex: none; display: flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; background: var(--surface); border-bottom: 1px solid var(--border); font-size: 10px; font-weight: 600; color: var(--text-muted); }
.scr-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
.scr-bar span { margin-left: 6px; }
.scr-page {
  flex: 1; display: flex; flex-direction: column; gap: 5px;
  width: 78%; margin: 8px auto 0; padding: 10px 12px; overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-sm); border-radius: 3px 3px 0 0;
}
.pg-title { font-size: 12px; color: var(--navy); margin-bottom: 2px; }
.ln { display: block; height: 5px; border-radius: 3px; background: var(--border); }
.ln-s { width: 64%; }
.ln-m { width: 82%; }
.para { display: flex; flex-direction: column; gap: 5px; margin: 2px -6px; padding: 5px 6px; border-radius: 6px; transition: background 0.4s ease 0.7s, box-shadow 0.4s ease 0.7s; }
.para b { font-size: 11px; color: var(--navy); }
.at-point .p4 { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.cursor { position: absolute; left: 82%; top: 82%; width: 14px; height: 18px; transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1), top 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.at-point .cursor { left: 58%; top: 52%; }

/* Signieren */
.pane-sign { display: flex; flex-direction: column; gap: 7px; font-size: 12px; }
.doc-row { display: flex; align-items: center; gap: 8px; }
.sig { display: grid; border: 1.5px dashed var(--border-strong); border-radius: 10px; padding: 6px 10px; min-height: 40px; align-items: center; transition: background 0.35s ease, border-color 0.35s ease; }
.sig > span { grid-area: 1 / 1; transition: opacity 0.3s ease; }
.sig-pend { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-muted); }
.sig-btn { flex: none; padding: 3px 10px; border-radius: 7px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 600; }
.sig-done { opacity: 0; }
.sig-done b { display: flex; align-items: center; gap: 5px; color: var(--ok-strong); font-size: 12px; }
.sig-done b svg { width: 13px; height: 13px; }
.sig-done small { display: block; color: var(--text-muted); font-size: 10.5px; padding-left: 18px; }
.at-signA .sig-a, .at-signB .sig-b { border-style: solid; border-color: var(--ok-border); background: var(--ok-soft); }
.at-signA .sig-a .sig-pend, .at-signB .sig-b .sig-pend { opacity: 0; }
.at-signA .sig-a .sig-done, .at-signB .sig-b .sig-done { opacity: 1; transition-delay: 0.15s; }
.at-signA .sig-a .sig-btn, .at-signB .sig-b .sig-btn { animation: press 0.35s ease; }
.sig-all {
  display: flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 8px;
  background: var(--accent-soft); color: var(--accent-strong); font-size: 11px; font-weight: 600;
  opacity: 0; transform: translateY(4px); transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
}
.sig-all svg { flex: none; width: 13px; height: 13px; }
.at-signed .sig-all { opacity: 1; transform: none; }

/* Mobil: kleine Bilder oben rechts über der Arbeitsfläche */
.pip { z-index: 6; transition: width 0.5s ease; }
.pip-ben { right: 57px; width: 42px; opacity: 0; transition: opacity 0.4s ease 0.3s; }
.at-work .pip { width: 42px; }
.at-work .pip-ben { opacity: 1; }
.solo .w-top { padding-right: 112px; }
.solo .w-e2e { display: none; }
.solo .w-body { padding: 8px 10px 10px; }
.solo .pane-chat { gap: 5px; }
.solo .scr-page { gap: 4px; padding: 7px 10px; }
.at-work .s-badge, .at-work .s-bar { opacity: 0; transition-delay: 0s; }
@container vc (max-width: 439px) {
  .dots .d-l { display: none; }
}

.duo .tile-b { grid-column: 3; }
.demo {
  margin-left: 6px; padding: 0 6px; border-radius: var(--r-pill);
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-muted);
  font-size: 9.5px; font-style: normal; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.6;
}
.vc-note { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--border); font-size: 0.78rem; line-height: 1.5; color: var(--text-muted); text-align: left; }
.vc-note strong { color: var(--navy); }

/* Mobil hat die Arbeitsfläche mehr Höhe als der Anruf oben: Sie steht nicht an der Faltkante,
   und der Inhalt beginnt erst unter den beiden kleinen Bildern. */
/* Desktop: Die Arbeitsfläche ist so breit wie die Bühne des Anrufs oben. Anna und Ben schweben
   klein unten rechts darüber, wie die Videobilder in einem echten Call. */
#vc-docs .duo { aspect-ratio: 16 / 11; }
/* Nur ab 440 px: ohne die Abfrage schlägt die ID-Regel das Ausblenden oben, und mobil stehen beide Formen untereinander. */
@container vc (min-width: 440px) { #vc-docs .duo { display: block; } }
#vc-docs .duo .work { inset: 0; }
#vc-docs .duo .tile { position: absolute; bottom: 12px; z-index: 5; width: 64px; transform: none; border-radius: 10px; box-shadow: var(--shadow); }
#vc-docs .duo .tile-a { right: 84px; }
#vc-docs .duo .tile-b { right: 12px; }
#vc-docs .solo { aspect-ratio: 1 / 1; max-height: 380px; width: 100%; }
#vc-docs .solo .w-body { padding-top: 30px; }

/* Abschnitt „Vom Videoanruf zur digitalen Unterschrift“ */
.docs-grid { display: flex; flex-direction: column; gap: 24px; }
.docs-text h2 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); letter-spacing: -0.01em; }
.kicker {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px;
  padding: 4px 12px; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent-strong); border: 1px solid var(--accent);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em;
}
.kicker .icon { width: 14px; height: 14px; }
.qes { margin: 22px 0 0; max-width: 34em; border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.qes-row { display: grid; grid-template-columns: 6.4em minmax(0, 1fr); gap: 12px; padding: 12px 16px; }
.qes-row + .qes-row { border-top: 1px solid var(--border); }
.qes dt { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); padding-top: 2px; }
.qes dd { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--text-muted); }
.qes-next { background: var(--accent-soft); }
.qes-next dt { color: var(--accent-strong); }
.qes-next dd { color: var(--text); }
@media (max-width: 520px) {
  .qes-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
.docs-text p { color: var(--text-muted); max-width: 34em; }
@media (min-width: 860px) {
  .docs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; align-items: center; }  /* dieselben Spalten wie der Hero: beide Bühnen gleich breit */
}

/* ---- Bildunterschrift und Steuerung ---- */
.vc-foot { margin-top: 14px; }
.cap {
  margin: 0 0 10px; min-height: 2.9em;
  font-size: 0.95rem; line-height: 1.45; font-weight: 500; color: var(--navy); text-align: center;
}
@container vc (max-width: 439px) {
  .cap { min-height: 1.45em; font-size: 0.9rem; margin-bottom: 8px; }
}
.vc-ctrl { display: flex; align-items: center; gap: 10px; }
.dots { flex: 1; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 6px; list-style: none; margin: 0; padding: 0; }
.dot {
  width: 100%; padding: 6px 0 0; border: 0; background: none; cursor: pointer;
  font: inherit; text-align: left; color: var(--text-faint);
}
.dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.d-bar { display: block; height: 4px; border-radius: 2px; background: var(--border-strong); overflow: hidden; }
.d-fill { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left center; }
.dot.done .d-fill { transform: scaleX(1); }
.dot.cur .d-fill { animation: fill var(--dur, 3s) linear forwards; animation-delay: var(--off, 0s); }
.vc.is-paused .dot.cur .d-fill { animation-play-state: paused; }
.vc.is-static .dot.cur .d-fill { animation: none; transform: scaleX(1); }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.d-l { display: block; margin-top: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
.dot.cur .d-l { color: var(--navy); }
.pp {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin-top: 2px;
  border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--navy); cursor: pointer;
}
.pp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pp svg { width: 15px; height: 15px; }
.pp .i-play { display: none; }
.vc.user-paused .pp .i-play { display: block; }
.vc.user-paused .pp .i-pause { display: none; }
.vc.is-static .pp { display: none; }

@media (prefers-reduced-motion: reduce) {
  .vc * { transition: none !important; animation: none !important; }
}