/* ============================================================================
   tenantletter — Oberfläche der Scan-Anwendung
   ----------------------------------------------------------------------------
   Gleiches Farb- und Schriftsystem wie tenantletter.eu: weisser Grund, ein
   Signalblau (#0067b8), Segoe UI mit systemnahem Rückfall. Die Rundungen
   entsprechen der Marketing-Seite (8px Bedienelemente, 12px Karten).

   Die Tokens unten werden von rund 1000 Zeilen Regeln weiter unten benutzt;
   getauscht werden deshalb nur die Werte, nicht die Struktur.

   KEINE Webfonts: die Seite wirbt mit „keine Cookies, kein Tracking, keine
   Fremdinhalte". Segoe UI liegt auf Windows vor, sonst greift system-ui.
   Mono bleibt als eigener Stack für CIS-IDs und Zahlen mit tabular-nums —
   dort trägt die feste Zeichenbreite eine Funktion, sie ist keine Dekoration.
   ============================================================================ */

:root {
  /* --- Grundton: weisser Showroom, grauer Absatz --- */
  --paper:      #ffffff;   /* Seitengrund */
  --surface:    #ffffff;   /* Karten-/Inhaltsfläche */
  --surface-2:  #f2f2f2;   /* leicht abgesetzte Fläche, Fusszeile */
  --ink:        #000000;   /* Überschriften */
  --ink-2:      #262626;   /* kräftiger Fliesstext */
  --body:       #262626;   /* Fliesstext */
  --muted:      #616161;   /* sekundär, Captions */
  --faint:      #616161;   /* tertiär — bewusst gleich: hellere Grautöne
                              unterschreiten auf Weiss den AA-Kontrast */

  /* --- Ein Signal-Akzent --- */
  --accent:       #0067b8;
  --accent-hover: #005a9e;
  --accent-tint:  #e5f1fa;
  --accent-line:  #a6d1f0;

  /* --- Linien --- */
  --rule:        #dedede;
  --rule-strong: #000000;
  --rule-soft:   #e5e5e5;

  /* --- Status-Semantik. Bleibt farbig: im Bericht trägt sie Bedeutung,
         und sie ist überall zusätzlich beschriftet, nie nur Farbe. --- */
  --pass:    #1e7a55;  --pass-bg:    #e9f5ef;
  --fail:    #b43a5a;  --fail-bg:    #fbedf0;
  --manual:  #a14b18;  --manual-bg:  #fdf0e7;
  --error:   #616161;  --error-bg:   #f2f2f2;
  --partial: #8a6412;  --partial-bg: #f8f1df;

  /* --- Masse / Grid --- */
  --maxw:   1152px;   /* wie --wrap auf der Marketing-Seite */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --radius: 8px;
  --radius-card: 12px;

  /* --- Erhebung nur für Karten, wie auf der Marketing-Seite --- */
  --lift: 0 3px 7px rgba(0, 0, 0, 0.13), 0 1px 2px rgba(0, 0, 0, 0.11);
  /* Bestandsalias — ältere App-Regeln referenzieren --shadow */
  --shadow: var(--lift);

  /* --- Schrift-Stacks, ohne Webfonts --- */
  /* Identisch zu --font-sans der Marketing-Seite. Open Sans wird lokal
     ausgeliefert, damit Geraete ohne Segoe UI dieselbe Schrift zeigen. */
  --sans: "Segoe UI", "Open Sans", system-ui, sans-serif;
  /* Die Marketing-Seite hat Monospace bewusst abgeschafft (--font-mono:
     var(--font-sans) in web/src/styles/site.css). Hier derselbe Schritt:
     ein Alias statt 28 Einzelaenderungen. Wer echte Monospace braucht
     (Ziffernkolonnen), nutzt .tnum fuer tabellarische Ziffern. */
  --mono: var(--sans);

  font-family: var(--sans);
  color: var(--body);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

h1, h2, h3, h4 {
  color: var(--ink);
  /* Marketing-Seite: font-weight 600, letter-spacing normal, line-height 1.2. */
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  margin: 0;
}

/* --- Instrument-Utilities: Mono + tabellarische Ziffern --- */
.mono { font-family: var(--mono); }
.tnum { font-variant-numeric: tabular-nums; }

/* =========================================================================
   LAYOUT-PRIMITIVE
   ========================================================================= */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* Index-Label: gesperrte Mono-Marke mit Nummer (Compliance-Index) */
.ix {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.ix::before {
  content: attr(data-ix);
  color: var(--accent);
  font-weight: 600;
  letter-spacing: normal;
}

/* Wiederverwendbares Logomark (Inline-<use href="#argos-eye">) */
/* Wie .brand-mark auf der Marketing-Seite: Koerper in Textfarbe, die beiden
   Winkel sind im Symbol selbst auf --accent gesetzt. */
.mark { display: block; width: 26px; height: 26px; flex: none; color: var(--ink); }

/* =========================================================================
   TOP-STATUS-BAND (dunkel)
   ========================================================================= */
/* Entspricht .brand-strip der Marketing-Seite: heller Grund, feine Linie,
   11px, normale Schreibweise — keine schwarze Leiste, keine Versalien. */
.topband { background: var(--surface-2); border-bottom: 1px solid var(--rule-soft); color: var(--muted); }
.topband .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 28px;
  font-size: 11px; letter-spacing: normal; text-transform: none;
}
.topband .wrap > span { display: inline-flex; align-items: center; gap: 0.4rem; }
.topband b { color: var(--ink-2); font-weight: 600; }
.topband .sep { color: var(--rule); }
.topdot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--pass);
  box-shadow: 0 0 0 3px rgba(30, 122, 85, 0.18);
}

/* =========================================================================
   NAV (sticky, Logomark)
   ========================================================================= */
.nav {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.nav .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; height: 56px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 18px; color: var(--ink);
  letter-spacing: normal; line-height: 1;
}
/* Wie .brand__suffix auf der Marketing-Seite: "letter" tritt zurueck.
   Vorher war der halbe Schriftzug blau — das gibt es dort nirgends. */
.brand span span { color: var(--muted); font-weight: 400; }

/* Entspricht .site-nav/.nav-link der Marketing-Seite: die Links sitzen in
   einer hellen Pille, aktiv/hover wird als weisses Feld hervorgehoben.
   Vorher: freistehende Links mit einfahrender Unterstreichung — ein Muster,
   das es auf der Hauptseite nicht gibt. */
/* Die Pille umfasst nur die Navigationslinks. Der Haupt-Knopf steht daneben,
   wie .header-actions auf der Marketing-Seite. */
.nav nav { display: flex; align-items: center; gap: 18px; }
.nav nav a:not(.cta):first-of-type { margin-left: 0; }
.nav .navlinks { display: flex; align-items: center; gap: 2px; background: var(--surface-2); padding: 4px; border-radius: 8px; }
.nav nav a:not(.cta) {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--ink-2); font-size: 13px; font-weight: 400;
  letter-spacing: normal; padding: 6px 10px; border-radius: 6px;
}
.nav nav a:not(.cta):hover { background: var(--surface); color: var(--ink); text-decoration: none; }
.nav nav a:not(.cta)[aria-current="page"] { background: var(--surface); color: var(--accent); font-weight: 600; }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--accent); color: #fff; font-weight: 600;
  font-size: 0.9rem; letter-spacing: -0.005em;
  padding: 0.72rem 1.25rem; border-radius: var(--radius);
  border: 1px solid var(--accent); cursor: pointer; font-family: inherit;
  transition: background 0.16s ease;
  white-space: nowrap;
}
/* Die Marketing-Seite hebt Knoepfe beim Ueberfahren nicht an und wirft
   keinen farbigen Schatten — nur der Farbton wechselt. */
.cta:hover {
  background: var(--accent-hover); border-color: var(--accent-hover);
  color: #fff; text-decoration: none;
}
.cta .arrow { transition: transform 0.18s ease; }
.cta:hover .arrow { transform: translateX(3px); }

/* Outline-Sekundär — graphit-scharf, mit MS-Vierfarb-Kachel im Hero */
.cta.secondary {
  background: transparent; color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  box-shadow: none;
}
.cta.secondary:hover {
  background: var(--ink); color: var(--paper);
  border-color: var(--ink); box-shadow: none;
}
.cta.secondary .ms-tile { flex: none; }
.nav .cta { padding: 0.6rem 1.1rem; }

.fineprint {
  color: var(--muted); font-size: 0.82rem; margin-top: 0.9rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.fineprint .shield { flex: none; color: var(--accent); }
.fineprint .mono { color: var(--ink-2); }

/* =========================================================================
   HERO
   ========================================================================= */
.hero { padding: clamp(3rem, 7vw, 5.5rem) 0 0; }
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.heroCopy { border-top: 2px solid var(--rule-strong); padding-top: 1.4rem; }
.heroCopy .ix { margin-bottom: 1.6rem; }
.hero h1 {
  font-size: 37px;   /* wie .hero h1 der Marketing-Seite */
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 1.35rem;
  max-width: 22ch;   /* wie .hero h1 der Marketing-Seite */
}
.hero h1 .accent { color: var(--accent); }
.lede {
  color: var(--ink-2); font-size: clamp(1.02rem, 1.4vw, 1.16rem);
  line-height: 1.6; margin: 0 0 1.9rem; max-width: 44ch;
}
.lede strong { color: var(--ink); font-weight: 600; }

.heroActions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* Meta-Leiste unter den Buttons: spezifikationsartig, mono */
.heroSpecs {
  margin-top: 2.2rem; padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(3, auto); gap: 1.6rem 2.2rem;
  justify-content: start;
}
.heroSpec .k {
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: normal;
  text-transform: none; color: var(--muted); margin-bottom: 0.25rem;
}
.heroSpec .v {
  font-size: 1.55rem; font-weight: 700; color: var(--ink);
  letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums;
}
.heroSpec .v small { font-size: 0.78rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }

/* --- PRODUKT-BEWEIS: dokument-artige Report-Karte --- */
.proof {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  box-shadow: var(--lift);
  position: relative;
  animation: rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.proofHead {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.85rem 1.15rem; border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 0.8125rem; letter-spacing: normal;
  text-transform: none; color: var(--muted);
}
.proofHead .who { display: inline-flex; align-items: center; gap: 0.5rem; }
.proofHead .who .mark { width: 18px; height: 18px; }
.proofHead .live { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--ink-2); }
.proofHead .live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pass);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(31, 122, 61, 0.45); }
  50% { box-shadow: 0 0 0 5px rgba(31, 122, 61, 0); }
}

.proofScore {
  display: grid; grid-template-columns: auto 1fr; gap: 1.25rem;
  align-items: center; padding: 1.35rem 1.15rem 1.2rem;
  border-bottom: 1px solid var(--rule-soft);
}

/* --- Ring-Gauge (Hero) --- */
.gauge { position: relative; width: 104px; height: 104px; flex: none; }
.gauge svg { transform: rotate(-90deg); display: block; }
.gauge .track { stroke: var(--rule); fill: none; }
.gauge .meter {
  stroke: var(--accent); fill: none; stroke-linecap: butt;
  animation: ringIn 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
/* Aufzähl-Animation: Ring „füllt" sich beim Erscheinen */
@keyframes ringIn { from { stroke-dashoffset: var(--ring-len, 289); } }
.gauge .num {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.gauge .num b {
  font-size: 1.9rem; font-weight: 600; color: var(--ink);
  letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums;
}
.gauge .num span {
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: normal;
  text-transform: none; color: var(--muted); margin-top: 0.2rem;
}

.scoreMeta .title { font-size: 0.95rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.scoreMeta .sub { font-family: var(--mono); font-size: 0.8125rem; color: var(--muted); margin-top: 0.2rem; }
.pillrow { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.75rem; }
.pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--mono); font-size: 0.8125rem; font-weight: 500;
  padding: 0.18rem 0.5rem; border: 1px solid var(--rule);
  color: var(--ink-2); background: var(--surface-2);
  font-variant-numeric: tabular-nums;
}
.pill .d { width: 7px; height: 7px; border-radius: 50%; }
.pill .d.pass { background: var(--pass); }
.pill .d.fail { background: var(--fail); }
.pill .d.manual { background: var(--manual); }
.pill .d.partial { background: var(--partial); }

/* Check-Zeilen im Beweis */
.proofRows { padding: 0.35rem 0 0.5rem; }
.pRow {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 0.75rem;
  padding: 0.6rem 1.15rem;
  border-top: 1px solid var(--rule-soft);
  border-left: 3px solid transparent;
  font-size: 0.86rem;
}
.pRow:first-child { border-top: none; }
.pRow.pass { border-left-color: var(--pass); }
.pRow.fail { border-left-color: var(--fail); }
.pRow.manual { border-left-color: var(--manual); }
.pRow .pid { font-family: var(--mono); font-size: 0.74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pRow .ptitle { color: var(--ink-2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbadge {
  font-family: var(--mono); font-size: 0.75rem; font-weight: 600;
  letter-spacing: normal; text-transform: none;
  padding: 0.12rem 0.42rem; border: 1px solid transparent; white-space: nowrap;
}
.sbadge.pass   { color: var(--pass);   background: var(--pass-bg);   border-color: color-mix(in srgb, var(--pass) 22%, transparent); }
.sbadge.fail   { color: var(--fail);   background: var(--fail-bg);   border-color: color-mix(in srgb, var(--fail) 22%, transparent); }
.sbadge.manual { color: var(--manual); background: var(--manual-bg); border-color: color-mix(in srgb, var(--manual) 22%, transparent); }

.proofFoot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 1.15rem; border-top: 1px solid var(--rule);
  background: var(--surface-2);
  font-family: var(--mono); font-size: 0.8125rem; color: var(--muted); letter-spacing: normal;
}
.proofFoot a { font-weight: 600; }

/* =========================================================================
   TRUST-STRIP (Scan-Umfang + Garantien)
   ========================================================================= */
.truststrip {
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  margin-top: clamp(3rem, 6vw, 5rem);
}
.truststrip .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; align-items: stretch; }
.tcell {
  padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.35rem;
  border-left: 1px solid var(--rule);
}
.tcell:first-child { border-left: none; padding-left: 0; }
.tcell .ic { color: var(--accent); }
.tcell .lab { font-weight: 700; color: var(--ink); font-size: 0.95rem; letter-spacing: -0.01em; }
.tcell .desc { font-size: 0.8rem; color: var(--muted); line-height: 1.4; }

/* Greifbarer Scan-Umfang (eine schmale Mono-Leiste mit den Workloads) */
.scopebar {
  border-bottom: 1px solid var(--rule); background: var(--surface-2);
}
.scopebar .wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.4rem;
  padding-top: 0.9rem; padding-bottom: 0.9rem;
}
.scopebar .lbl {
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: normal;
  text-transform: none; color: var(--muted);
}
.scopebar .item {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.86rem; font-weight: 600; color: var(--ink-2);
}
.scopebar .item svg { color: var(--accent); flex: none; }

/* =========================================================================
   SECTION-SCAFFOLD (index-nummerierte Marketing-Bänder)
   ========================================================================= */
.section-band { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section-band.tinted {
  background: var(--surface-2);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.secHead { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.secHead .ix { margin-bottom: 1.1rem; }
.secHead h2 { font-size: 30px; letter-spacing: normal; max-width: 26ch; font-weight: 600; }
.secHead p.kick { color: var(--body); font-size: 1.05rem; max-width: 56ch; margin: 1rem 0 0; }

/* =========================================================================
   MARKETING-BÄNDER (Klassen-Vertrag: .band / .band.alt / .ctaBand)
   ----------------------------------------------------------------------------
   .band ist die generische Marketing-Sektion (auf Unterseiten genutzt);
   .band.alt = getöntes Wechselband. Auf der Startseite kommen die
   index-nummerierten .section-band-Layouts zum Einsatz.
   ========================================================================= */
.band { padding: clamp(3rem, 6vw, 4.5rem) 0; }
.band + .band { border-top: 1px solid var(--rule); }
.band.alt {
  background: var(--surface-2);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.band h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: normal; margin: 0 0 1.25rem; }
.band p { color: var(--body); max-width: 56ch; }
.band p strong { color: var(--ink); }

/* =========================================================================
   SO FUNKTIONIERT'S — .steps (3 Spalten, indexiert, geteilte Hairlines)
   ========================================================================= */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 2px solid var(--rule-strong);
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  padding: 1.6rem 1.6rem 1.8rem;
  border-left: 1px solid var(--rule);
  position: relative;
  color: var(--body);
}
.steps li:first-child { border-left: none; padding-left: 0; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono); font-size: 0.82rem; font-weight: 600;
  color: var(--accent); letter-spacing: normal;
  display: block; margin-bottom: 1rem;
}
.steps li strong {
  display: block; font-size: 1.15rem; color: var(--ink); font-weight: 700;
  letter-spacing: -0.015em; margin-bottom: 0.5rem;
}
.steps li span { color: var(--body); font-size: 0.95rem; }

/* =========================================================================
   FEATURE-GRID — .grid (dokument-Zeilen, geteilte Rahmen, gap:0)
   ========================================================================= */
.grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 1px solid var(--rule);
  border-bottom: none;
  background: var(--surface);
}
.grid article {
  padding: 1.85rem 1.7rem 2rem;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  position: relative;
  transition: background 0.2s ease;
}
.grid article:hover { background: var(--surface-2); }
.grid article::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); transform: scaleY(0); transform-origin: top;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.grid article:hover::after { transform: scaleY(1); }
.grid .tag {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: none; color: var(--accent);
  margin-bottom: 1rem;
}
.grid .tag::before { content: "\25B8"; margin-right: 0.45rem; color: var(--accent); }
/* Promo-Variante: einziger warmer Akzent (Bestands-Vertrag) */
.grid .tag.promo, .tag.promo, .badge.promo {
  color: #5a3d00; background: #f3d27a; border-color: #d9b24e;
}
.grid .tag.promo::before { color: #5a3d00; }
.grid h3 { font-size: 1.18rem; letter-spacing: -0.018em; margin-bottom: 0.6rem; font-weight: 700; }
.grid p { margin: 0; color: var(--body); font-size: 0.92rem; line-height: 1.55; }
.grid ul { margin: 0.7rem 0 0; padding: 0; list-style: none; }
.grid ul li {
  font-size: 0.88rem; color: var(--body); padding: 0.28rem 0 0.28rem 1.2rem;
  position: relative; border-top: 1px solid var(--rule-soft);
}
.grid ul li:first-child { border-top: none; }
.grid ul li::before {
  content: ""; position: absolute; left: 0; top: 0.78rem;
  width: 6px; height: 1px; background: var(--accent);
}
.gridMore { margin-top: 1.6rem; }
.gridMore a { font-family: var(--mono); font-size: 0.85rem; font-weight: 600; }

/* =========================================================================
   PROOF #2 — Drift + Framework-Coverage (Marketing-Splitrow)
   ========================================================================= */
.splitRow {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--rule); background: var(--surface);
}
.splitCell { padding: 1.7rem 1.7rem 1.9rem; border-left: 1px solid var(--rule); }
.splitCell:first-child { border-left: none; }
.splitCell h4 {
  font-size: 0.78rem; font-family: var(--mono); letter-spacing: 0.1em;
  text-transform: none; color: var(--muted); font-weight: 600; margin-bottom: 1.1rem;
}
.driftLine {
  display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: baseline;
  padding: 0.5rem 0; border-top: 1px solid var(--rule-soft); font-size: 0.88rem;
}
.driftLine:first-of-type { border-top: none; }
.driftLine .dmark { font-family: var(--mono); font-weight: 700; font-size: 0.8rem; }
.driftLine.fix .dmark { color: var(--pass); }
.driftLine.reg .dmark { color: var(--fail); }
.driftLine .dtxt { color: var(--ink-2); }
.driftLine .dtxt em { font-style: normal; color: var(--muted); font-family: var(--mono); font-size: 0.78rem; }

.fwRow {
  display: grid; grid-template-columns: 1fr auto auto; gap: 0.8rem; align-items: center;
  padding: 0.55rem 0; border-top: 1px solid var(--rule-soft); font-size: 0.88rem;
}
.fwRow:first-of-type { border-top: none; }
.fwRow .fname { color: var(--ink-2); font-weight: 600; }
.fwBar { width: 92px; height: 6px; background: var(--rule); position: relative; }
.fwBar i { position: absolute; inset: 0 auto 0 0; background: var(--accent); }
.fwRow .fpct { font-family: var(--mono); font-size: 0.8rem; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }

/* =========================================================================
   DATENSCHUTZ / HOSTING — Trust-Karte
   ========================================================================= */
.privacy .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.privacyCopy { border-left: 2px solid var(--accent); padding-left: 1.6rem; }
.privacyCopy p { color: var(--body); font-size: 1.02rem; max-width: 52ch; }
.privacyCopy p strong { color: var(--ink); font-weight: 600; }
.privCard { background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--lift); }
.privCard .ph {
  padding: 0.85rem 1.2rem; border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: none; color: var(--muted);
  display: flex; align-items: center; justify-content: space-between;
}
.privCard .ph .ok { color: var(--pass); }
.pLine {
  display: grid; grid-template-columns: 24px 1fr auto; gap: 0.8rem;
  align-items: center; padding: 0.95rem 1.2rem; border-top: 1px solid var(--rule-soft);
}
.pLine:first-of-type { border-top: none; }
.pLine .ico { color: var(--accent); display: flex; }
.pLine .pt { font-weight: 600; color: var(--ink); font-size: 0.92rem; display: block; }
.pLine .ps { font-size: 0.8rem; color: var(--muted); margin-top: 0.1rem; display: block; }
.pLine .chk { color: var(--pass); font-weight: 700; }

/* =========================================================================
   ABSCHLUSS-CTA (dunkles Band) — .finalCta / .ctaBand
   ========================================================================= */
.finalCta, .ctaBand.dark { background: var(--ink); color: #d7d4cb; }
.finalCta .wrap { padding: clamp(3.5rem, 7vw, 5.5rem) var(--gutter); text-align: center; }
.finalCta .ix { color: #8a8f96; justify-content: center; margin-bottom: 1.4rem; }
.finalCta .ix::before { color: #7d93cf; }
.finalCta h2 { color: #fff; font-size: clamp(2rem, 4.5vw, 3.2rem); letter-spacing: normal; margin: 0 auto 1.1rem; max-width: 20ch; }
.finalCta p { color: #b4b8be; font-size: 1.08rem; max-width: 50ch; margin: 0 auto 2rem; }
.finalCta .heroActions { justify-content: center; }
.finalCta .cta.secondary { color: #fff; border-color: #4a4e54; }
.finalCta .cta.secondary:hover { background: #fff; color: var(--ink); border-color: #fff; }
.finalCta .fineprint { color: #8a8f96; justify-content: center; }
.finalCta .fineprint .mono { color: #d7d4cb; }
.finalCta .feye { width: 44px; height: 44px; color: #7d93cf; margin: 0 auto 1.3rem; }

/* Generisches .ctaBand (Bestands-Vertrag, auf Unterseiten zentriert) */
.ctaBand { text-align: center; }
.ctaBand h2 { margin-bottom: 0.75rem; }
.ctaBand p { margin-left: auto; margin-right: auto; }
.ctaBand .heroActions { margin-top: 1.5rem; justify-content: center; }

/* =========================================================================
   FOOTER — footer (Bestands-Vertrag) + footer.site (Startseite mit Logomark)
   ========================================================================= */
footer {
  text-align: center; color: var(--muted);
  background: var(--surface-2); border-top: 1px solid var(--rule);
  padding: 2rem; font-size: 0.82rem;
}
footer a { color: var(--muted); }
footer a:hover { color: var(--accent); }

footer.site { text-align: left; padding: 0; }
footer.site .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-top: 2.2rem; padding-bottom: 2.2rem; flex-wrap: wrap;
}
footer.site .fbrand { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--ink); font-weight: 600; }
footer.site .fbrand .mark { width: 22px; height: 22px; }
footer.site .meta { font-size: 12px; letter-spacing: normal; color: var(--muted); }

/* =========================================================================
   UNTERSEITEN — Seitentitel / Intro / Coverage-Hinweis
   ========================================================================= */
.pageHead { padding: clamp(2.5rem, 5vw, 3.5rem) 0 0; }
.pageHead h1 { font-size: 37px;   /* wie .pagehero h1 der Marketing-Seite */ letter-spacing: normal; margin: 0 0 0.75rem; }
.intro { color: var(--body); font-size: 1.05rem; max-width: 60ch; margin: 0 0 2rem; }
.intro strong { color: var(--ink); }
.coverageNote {
  color: var(--muted); font-size: 0.85rem; margin: 0.2rem 0 1rem;
  border-left: 2px solid var(--accent-line); padding-left: 0.75rem;
}

/* Eyebrow-Kicker (Bestands-Vertrag, auf Unterseiten über Seitentiteln) —
   Mono-Index-Anmutung, dekorativ → nicht das interaktive Akzentblau. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--mono); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: normal; text-transform: none; color: var(--muted);
  margin: 0 0 0.7rem;
}
.eyebrow::before { content: "—"; color: var(--accent); }

/* Trust-Chips (Bestands-Vertrag) — scharfkantige Hairline-Chips mit Status-neutralem Punkt */
.trustbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.trustbar span {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-card);
  padding: 0.4rem 0.85rem; font-size: 0.85rem; color: var(--ink-2);
}
.trustbar span::before {
  content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent);
}

/* =========================================================================
   ===================  APP / DASHBOARD / REPORT  ==========================
   Datendichtes Instrument-System über den vollen Klassen-Vertrag.
   Score-Karte = Dokument-Header (border-top accent). Status sind die Ampeln.
   ========================================================================= */
main { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
main.dash { padding-top: 2.25rem; padding-bottom: 3rem; }

.dash { padding: 2.25rem 0; }
.dash > h1 { font-size: 30px; letter-spacing: normal; margin: 0 0 1.25rem; }
.dash > h2 { font-size: 1.2rem; letter-spacing: -0.015em; margin: 2rem 0 0.85rem; }

/* --- Score-Karte: Dokument-Header mit Akzent-Oberkante + Ring-Aufzählung --- */
.scoreCard {
  display: flex; align-items: center; gap: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--rule); border-top: 3px solid var(--accent);
  border-radius: var(--radius-card); box-shadow: var(--lift);
  padding: 1.6rem 1.75rem; margin-bottom: 1.5rem;
}
.scoreNum {
  font-size: 2.8rem; font-weight: 600; color: var(--ink); line-height: 1;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
  /* Aufzähl-Eindruck beim Erscheinen des Dokument-Headers (siehe scoreIn) */
  animation: scoreIn 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes scoreIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Falls ein SVG-Score-Ring im Dashboard verwendet wird, erbt er ringIn. */
.scoreCard svg .meter, .scoreCard .ring-fg {
  animation: ringIn 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.meta { color: var(--muted); font-size: 0.85rem; margin: 0.2rem 0; font-variant-numeric: tabular-nums; }

.pills { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.pills span {
  display: inline-flex; align-items: center; font-size: 0.88rem; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; margin-right: 0.35rem; flex: none; }
.dot.pass { background: var(--pass); }
.dot.fail { background: var(--fail); }
.dot.manual { background: var(--manual); }
.dot.error { background: var(--error); }
.dot.partial { background: var(--partial); }

/* --- Filter-Leiste --- */
.filterBar {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
  justify-content: space-between; margin-bottom: 1rem;
}
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.frameworkbar { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }

/* Chips sind interaktiv → aktiver Zustand trägt das Akzentblau */
.chip {
  background: var(--surface); color: var(--muted);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 0.5rem 0.85rem; font-size: 0.85rem; line-height: 1;
  cursor: pointer; font: inherit; min-height: 44px;
  display: inline-flex; align-items: center;
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.chip:hover { color: var(--ink); border-color: var(--rule-strong); }
.chip.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.chip.active:hover { background: var(--accent-hover); color: #fff; }

.search {
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 0 0.75rem; min-height: 44px; min-width: 240px; font: inherit;
}
.search::placeholder { color: var(--muted); }
.search:focus-visible { border-color: var(--accent); }

/* --- Export-Toolbar --- */
.exportbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1.25rem; }
.exportbar .cta { padding: 0.55rem 1.05rem; }

/* --- Aufklappbare Sektion (Report / Lizenz-SKU) --- */
details.section {
  border: 1px solid var(--rule); border-radius: var(--radius-card);
  margin-bottom: 0.6rem; background: var(--surface); overflow: hidden;
}
details.section > summary {
  cursor: pointer; list-style: none; padding: 0.85rem 1rem;
  font-weight: 700; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 44px; transition: background 0.14s ease;
}
details.section > summary:hover { background: var(--surface-2); }
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary .cisid { font-weight: 600; }
details.section > summary .checkTitle { flex: 1; }
.secCounts {
  color: var(--muted); font-weight: 400; font-size: 0.82rem; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0.2rem;
  font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.secCounts .dot { margin-right: 0.1rem; }

/* --- Einzel-Check (border-left = Statusfarbe) --- */
.check {
  padding: 0.8rem 1rem; border-top: 1px solid var(--rule);
  border-left: 3px solid transparent;
}
.check.fail { border-left-color: var(--fail); }
.check.error { border-left-color: var(--error); }
.check.manual { border-left-color: var(--manual); }
.check.pass { border-left-color: var(--pass); }
.check.partial { border-left-color: var(--partial); }
.checkHead { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.cisid {
  color: var(--muted); font-family: var(--mono); font-variant-numeric: tabular-nums;
  white-space: nowrap; font-size: 0.85rem;
}
.checkTitle { font-weight: 700; flex: 1; color: var(--ink); letter-spacing: -0.01em; }

/* --- Status-Badge: solider 1px-Statusrahmen als Basis (scharfkantig) --- */
.badge {
  font-family: var(--mono); font-size: 0.75rem; font-weight: 600;
  letter-spacing: normal; text-transform: none;
  padding: 0.12rem 0.45rem; border-radius: var(--radius-card);
  border: 1px solid var(--rule); color: var(--ink-2); background: var(--surface-2);
  white-space: nowrap;
}
.badge.pass    { color: var(--pass);   background: var(--pass-bg);    border-color: color-mix(in srgb, var(--pass) 35%, transparent); }
.badge.fail    { color: var(--fail);   background: var(--fail-bg);    border-color: color-mix(in srgb, var(--fail) 35%, transparent); }
.badge.manual  { color: var(--manual); background: var(--manual-bg);  border-color: color-mix(in srgb, var(--manual) 35%, transparent); }
.badge.error   { color: var(--error);  background: var(--error-bg);   border-color: var(--rule); }
.badge.partial { color: var(--partial);background: var(--partial-bg); border-color: color-mix(in srgb, var(--partial) 35%, transparent); }
/* Confidence-Badges der Lizenz-Seite (high/medium/low/ok) — neutral umgemappt */
.badge.high   { color: var(--pass);   background: var(--pass-bg);    border-color: color-mix(in srgb, var(--pass) 35%, transparent); }
.badge.medium { color: var(--manual); background: var(--manual-bg);  border-color: color-mix(in srgb, var(--manual) 35%, transparent); }
.badge.low    { color: var(--error);  background: var(--error-bg);   border-color: var(--rule); }
.badge.ok     { color: var(--muted);  background: var(--surface-2);  border-color: var(--rule); }

.doc { font-size: 0.78rem; white-space: nowrap; color: var(--accent); font-weight: 600; }
.evidence { color: var(--body); font-size: 0.9rem; margin-top: 0.35rem; }
.rationale { color: var(--muted); font-size: 0.85rem; margin-top: 0.2rem; }
.statusMsg { color: var(--muted); padding: 2rem 0; }
.lbl { color: var(--ink-2); font-weight: 600; }

.license {
  font-family: var(--mono); font-size: 0.8125rem; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--rule);
  border-radius: var(--radius-card); padding: 0.05rem 0.4rem; white-space: nowrap;
}

/* --- Live-Fortschritt --- */
.progress { padding: 1.25rem 0; }
.progressTrack {
  height: 8px; background: var(--surface-2); border: 1px solid var(--rule);
  border-radius: var(--radius); overflow: hidden;
}
.progressFill { height: 100%; background: var(--accent); transition: width 0.3s ease; }
.progressMeta {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 0.6rem; font-size: 0.9rem; color: var(--muted);
}
.progressMeta .tally { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* =========================================================================
   VERÄNDERUNGS-BOX (Drift) — NEU GESTYLT
   report.js: .driftBox > .driftReg|.driftFix > <ul> > <li class="fail|pass">
              > <span class="cisid">  (Hairline-Box, li mit border-left)
   ========================================================================= */
.driftBox {
  border: 1px solid var(--rule); border-top: 3px solid var(--accent);
  background: var(--surface); border-radius: var(--radius-card);
  padding: 1.1rem 1.25rem; margin-bottom: 1.5rem; font-size: 0.9rem; color: var(--ink-2);
}
.driftBox > strong { color: var(--ink); font-weight: 700; }
.driftReg, .driftFix { margin-top: 0.25rem; }
.driftReg + .driftFix { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule-soft); }
.driftReg > strong { color: var(--fail); font-weight: 700; display: block; margin-bottom: 0.5rem; }
.driftFix > strong { color: var(--pass); font-weight: 700; display: block; margin-bottom: 0.5rem; }
.driftBox ul { list-style: none; margin: 0; padding: 0; }
.driftBox li {
  padding: 0.4rem 0 0.4rem 0.75rem;
  border-left: 3px solid var(--rule);
  border-top: 1px solid var(--rule-soft);
  color: var(--ink-2); display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
}
.driftBox li:first-child { border-top: none; }
.driftBox li.fail { border-left-color: var(--fail); }
.driftBox li.pass { border-left-color: var(--pass); }
.driftBox li .cisid { color: var(--muted); }

/* =========================================================================
   DASHBOARD-SPARKLINE (Trend) — NEU GESTYLT
   app.js: .trendBox > .trendLabel + svg.sparkline(stroke=currentColor) + .sparkVal
   Sparkline trägt den Akzent (Markenkurve), NICHT die Statusfarbe.
   ========================================================================= */
.trendBox {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  border: 1px solid var(--rule); background: var(--surface);
  border-radius: var(--radius-card); padding: 1rem 1.25rem; margin-bottom: 1.5rem;
}
.trendLabel {
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: normal;
  text-transform: none; color: var(--muted);
}
.sparkline {
  color: var(--accent);            /* currentColor → Akzentblau, keine Statusfarbe */
  display: block; overflow: visible;
}
.sparkVal {
  font-family: var(--mono); font-size: 1.05rem; font-weight: 700;
  color: var(--ink); font-variant-numeric: tabular-nums; margin-left: auto;
}

/* =========================================================================
   LIZENZ-SEITE — Findings / Legende
   ========================================================================= */
.ufinding { border-top: 1px solid var(--rule); }
.ufinding:first-child { border-top: none; }
.ufinding.active { background: var(--surface-2); }
.ufinding.active .upn { color: var(--muted); }
.urow {
  display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline;
  padding: 0.5rem 1rem 0.15rem; font-size: 0.9rem;
}
.urow .upn { flex: 1; min-width: 12rem; color: var(--ink-2); }
.urow .rec { color: var(--muted); }
.urow .save { font-weight: 700; color: var(--ink); min-width: 5rem; text-align: right; font-variant-numeric: tabular-nums; }
.why { color: var(--muted); font-size: 0.82rem; padding: 0 1rem 0.45rem; }

.legend {
  border: 1px solid var(--rule); border-radius: var(--radius-card);
  background: var(--surface); margin-bottom: 1rem; padding: 0 1rem;
}
.legend > summary {
  cursor: pointer; list-style: none; padding: 0.85rem 0; font-weight: 700; color: var(--ink);
  min-height: 44px; display: flex; align-items: center;
}
.legend > summary::-webkit-details-marker { display: none; }
.legend > summary::before { content: "\24D8\00A0"; color: var(--accent); }
.legendList { list-style: none; padding: 0; margin: 0 0 0.75rem; }
.legendList li { margin: 0.45rem 0; color: var(--muted); font-size: 0.9rem; }
.legendList .recname { font-weight: 700; color: var(--ink); }
.legendSub { font-weight: 700; color: var(--ink); margin: 0.6rem 0 0.3rem; font-size: 0.9rem; }
.legendNote { color: var(--muted); font-size: 0.85rem; margin: 0.25rem 0 0.85rem; }

/* =========================================================================
   SCAN-LISTE — .scanrow (Touch-freundliche Zeilen)
   ========================================================================= */
.scanrow {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.9rem 1rem; min-height: 44px;
  border: 1px solid var(--rule); border-left: 3px solid var(--rule);
  border-radius: var(--radius-card); background: var(--surface);
  margin-bottom: 0.6rem; color: var(--ink-2);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.scanrow:hover {
  border-color: var(--rule); border-left-color: var(--accent);
  box-shadow: var(--lift); text-decoration: none;
}
.scanDate { color: var(--muted); font-size: 0.9rem; min-width: 11rem; font-variant-numeric: tabular-nums; }
.scanScore { font-weight: 700; color: var(--ink); min-width: 3.5rem; font-variant-numeric: tabular-nums; }
.scanrow .pills { margin-top: 0; }
.scanrow .doc { margin-left: auto; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 940px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .hero { padding-top: 2.5rem; }
  .truststrip .wrap { grid-template-columns: 1fr 1fr; }
  .tcell { border-left: 1px solid var(--rule); padding-left: 1.5rem; }
  .tcell:nth-child(odd) { border-left: none; padding-left: 0; }
  .tcell:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .steps { grid-template-columns: 1fr; border-top: 2px solid var(--rule-strong); }
  .steps li { border-left: none; border-top: 1px solid var(--rule); padding-left: 0; padding-right: 0; }
  .steps li:first-child { border-top: none; }
  .grid { grid-template-columns: 1fr 1fr; }
  .splitRow { grid-template-columns: 1fr; }
  .splitCell { border-left: none; border-top: 1px solid var(--rule); }
  .splitCell:first-child { border-top: none; }
  .privacy .wrap { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .topband .wrap > span.hideSm { display: none; }
  .nav nav a:not(.cta) { display: none; }
  .nav nav { gap: 0.9rem; }
  .heroSpecs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.1rem 1.2rem; }
  .heroSpec { min-width: 0; }
  .heroSpec .k { overflow-wrap: anywhere; }
  .grid { grid-template-columns: 1fr; }
  .grid article { border-right: none; }
  .truststrip .wrap { grid-template-columns: 1fr; }
  .tcell { border-left: none !important; border-top: 1px solid var(--rule); padding-left: 0; }
  .tcell:first-child { border-top: none; }
  .proofScore { grid-template-columns: 1fr; justify-items: start; }
  footer.site .wrap { flex-direction: column; align-items: flex-start; }
  .scoreCard { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .filterBar { align-items: stretch; }
  .search { min-width: 0; width: 100%; }
  .trendBox { gap: 0.6rem; }
  .sparkVal { margin-left: 0; }
}

/* =========================================================================
   MOTION — granular neutralisiert (kein globaler Wildcard-!important)
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Marketing-Animationen */
  .proof { animation: none; opacity: 1; transform: none; }
  .gauge .meter, .scoreCard svg .meter, .scoreCard .ring-fg { animation: none; }
  .scoreNum { animation: none; }
  .proofHead .live::before { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  /* Interaktive Dashboard-Elemente gezielt entschärfen */
  .cta, .cta .arrow { transition: none; }
  .cta:hover { transform: none; box-shadow: none; }
  .cta:hover .arrow { transform: none; }
  .chip { transition: none; }
  details.section > summary { transition: none; }
  .grid article, .grid article::after { transition: none; }
  .scanrow { transition: none; }
  .progressFill { transition: none; }
  .nav nav a:not(.cta)::after { transition: none; }
}

/* Dezente Reveal-on-scroll — nur aktiv, wenn JS Motion zulässt (html.reveal-on).
   Ohne JS oder bei prefers-reduced-motion bleibt der Inhalt sichtbar (kein opacity:0). */
html.reveal-on .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
html.reveal-on .reveal.in { opacity: 1; transform: none; }

/* =========================================================================
   DRUCK (PDF via Browser) — dunkle Bänder hell mappen, Status erhalten (R6)
   ========================================================================= */
@media print {
  @page { margin: 1.5cm; }

  body { background: #fff; color: #000; }

  /* Chrome / Interaktives ausblenden */
  .nav, .topband, .scopebar, .truststrip,
  .filterBar, .exportbar, .frameworkbar, .doc { display: none !important; }

  main, main.dash { max-width: none; padding: 0; }

  /* Dunkle Bänder → hell, Text → Tinte */
  .finalCta, .ctaBand.dark { background: #fff !important; color: #000 !important; }
  .finalCta h2, .finalCta p, .finalCta .ix, .finalCta .fineprint { color: #000 !important; }
  footer.site { background: #fff !important; }

  /* Karten flach drucken, Umbruch schützen */
  .scoreCard, .check, details.section, .driftBox, .trendBox, .scanrow, .privCard, .proof {
    break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #ccc;
  }
  details.section[open] > summary { border-bottom: 1px solid #ccc; }

  /* Status-Semantik + border-left exakt erhalten */
  .dot, .badge, .sbadge, .scoreNum, .scoreCard, .driftBox,
  .check, .pRow, .scanrow, .driftBox li, .pill {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .check.fail { border-left: 3px solid var(--fail) !important; }
  .check.error { border-left: 3px solid var(--error) !important; }
  .check.manual { border-left: 3px solid var(--manual) !important; }
  .check.pass { border-left: 3px solid var(--pass) !important; }
  .check.partial { border-left: 3px solid var(--partial) !important; }
  .driftBox li.fail { border-left: 3px solid var(--fail) !important; }
  .driftBox li.pass { border-left: 3px solid var(--pass) !important; }
  .scoreCard { border-top: 3px solid var(--accent) !important; }
  .sparkline { color: var(--accent) !important; }

  a { color: #000; text-decoration: none; }
}

/* ============================================================================
   SELBST-GEHOSTETE SCHRIFTEN (DSGVO — kein Google-Fonts-CDN, vom eigenen Server)
   Open Sans (latin-Subset) als Ersatz fuer Segoe UI — identisch zur
   Marketing-Seite (web/src/styles/fonts.css). Keine Google-Fonts-CDN.
   Stimme": CIS-IDs, Scores, Coverage). font-display: swap → Text sofort sichtbar
   (System-Fallback), Swap auf die Webfont nach dem Laden. Dateien unter /fonts.
   ============================================================================ */
@font-face {
  font-family: "Open Sans";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/open-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/open-sans-latin-600-normal.woff2") format("woff2");
}

/* ---------------------------------------------------------------------------
   Freemium-Sperre: Hinweis auf die zurueckgehaltenen Befunde.
   Bewusst KEIN Weichzeichner ueber Platzhaltertext — die Inhalte sind nicht im
   Browser, ein unscharfer Fake-Befund waere eine Attrappe. Stattdessen die
   ehrliche Zahl und der Weg zur Freischaltung.
   --------------------------------------------------------------------------- */
.lockedBox {
  margin-top: 1.25rem;
  padding: 1.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  background: var(--surface-2);
}
.lockedBox h3 { margin: 0 0 0.875rem; color: var(--ink); font-size: 1.125rem; }

/* Angedeutete Zeilen. Bewusst leere Balken statt erfundener Texte: hier steht
   kein Scheinbefund, der bei genauem Hinsehen als Attrappe auffliegt. */
.lockedRows { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; }
.lockedRow { display: flex; align-items: center; gap: 0.625rem; }
.lockedBar {
  height: 0.75rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #d0d0d0 0%, #dcdcdc 50%, #d0d0d0 100%);
  filter: blur(2.5px);
  opacity: 0.75;
}
.lockedRow.fail .lockedBar { background: linear-gradient(90deg, #e6c3c3 0%, #f0d6d6 50%, #e6c3c3 100%); }
.lockedMore { margin: 0 0 0.75rem; color: var(--muted); font-size: 0.8125rem; }
.lockedHint { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .lockedBar { filter: blur(2px); }
}
.lockedBox p { margin: 0 0 0.5rem; color: var(--body); max-width: 65ch; }
.lockedBox .lockedMeta { color: var(--muted); font-size: 0.875rem; }
.lockedBox .cta { margin-top: 0.75rem; }