/* ===========================================================================
   webpflicht.de - Gestaltung fuer alle Seiten
   ===========================================================================

   EINE Datei fuer alle 24 Seiten. Vorher trug jede Seite ihre eigene Kopie im
   Kopf - 30 KB, siebenmal leicht verschieden, und eine Aenderung an der
   Schriftgroesse hiess: siebenmal suchen. Die Ratgeber-Artikel erbten den
   Block per Textkopie aus index.html; wer die Startseite umbaute, baute
   ungewollt 17 Artikel mit um.

   WARUM EINE EXTERNE DATEI TROTZ EINES ZUSAETZLICHEN ABRUFS:
   Sie wird einmal geladen und gilt dann fuer jeden weiteren Seitenaufruf.
   Wer einen Ratgeber-Artikel liest und dann den naechsten oeffnet, laedt sie
   nicht erneut. Bei 17 Artikeln ist das der klar bessere Handel.

   DIE ADRESSE TRAEGT EINE FASSUNGSNUMMER (stil.css?v=...). Ohne sie zeigte
   ein Browser nach einer Aenderung tagelang die alte Gestaltung, und niemand
   koennte das von aussen erkennen. Die Nummer steht in scripts/stil-fassung.js
   und wird von den Bau-Skripten in jede Seite geschrieben.

   KEIN JAVASCRIPT - NICHT AUS BESCHEIDENHEIT, SONDERN PER RICHTLINIE:
   Die Sicherheitskopfzeile des Servers sagt "default-src 'none'" ohne
   script-src. Jedes Skript waere wirkungslos. Alle Bewegung hier ist deshalb
   reines CSS, und alles, was sie zeigt, steht auch ohne sie da.
   ======================================================================== */

/* --- Farben, Abstaende, Schatten ---------------------------------------- */
:root {
  /* Marke. Die Werte sind mit scripts/kontrast.js gemessen; wer sie
     aendert, misst neu - jede Kombination hier liegt ueber 4,5:1. */
  --marine: #0b3b5a;
  --marine-tief: #082c44;
  --marine-nacht: #061f31;
  --tinte: #0e2a3c;
  --akzent: #a34700;
  --akzent-dunkel: #8a3c00;
  --akzent-hell: #f0a95c;

  --papier: #ffffff;
  --papier-alt: #f5f8fa;
  --papier-warm: #fbf8f4;
  --linie: #d5dee5;
  --linie-zart: #e6edf2;
  --text: #1d2d3a;
  --gedaempft: #42586a;
  --text-invers: #eef4f8;
  --gedaempft-invers: #b7ccdb;

  --rot: #b3261e;
  --gelb: #d99a06;
  --gruen: #1c6b34;

  /* Ein Schatten, der nach Papier aussieht statt nach Kasten: zwei Lagen,
     die untere weit und weich, die obere eng und dunkler. */
  --schatten-1: 0 1px 2px rgba(8, 44, 68, .06), 0 2px 8px rgba(8, 44, 68, .05);
  --schatten-2: 0 2px 4px rgba(8, 44, 68, .06), 0 14px 32px rgba(8, 44, 68, .10);
  --schatten-3: 0 4px 8px rgba(8, 44, 68, .08), 0 24px 56px rgba(8, 44, 68, .14);

  --rund: 14px;
  --rund-klein: 8px;

  /* Abstandsskala. clamp() statt Umbruchpunkten: Der Abstand waechst mit dem
     Fenster, statt an drei Stellen zu springen. */
  --luft-s: clamp(1rem, .8rem + .6vw, 1.4rem);
  --luft-m: clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem);
  --luft-l: clamp(3rem, 2rem + 4vw, 5.5rem);
  --luft-xl: clamp(4rem, 2.5rem + 6vw, 7.5rem);

  --breite: 1120px;
  --breite-schmal: 760px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 5.5rem;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  /* Deutsche Komposita sind lang: "Barrierefreiheitsstaerkungsgesetz" hat 32
     Zeichen. Auf einem 320-Pixel-Geraet sprengt so ein Wort jede Spalte, und
     die ganze Seite laesst sich seitlich schieben. Am 27.08.2026 gemessen:
     333 statt 320 Pixel. */
  overflow-wrap: break-word;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--papier);
  /* Ziffern in Tabellen und Preisen sollen untereinander stehen. */
  font-variant-numeric: proportional-nums;
  text-rendering: optimizeLegibility;
}

/* --- Typografie ---------------------------------------------------------- */
h1, h2, h3, h4 {
  color: var(--tinte);
  line-height: 1.18;
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin: 0 0 .6rem;
}
h1 { font-size: clamp(1.95rem, 1.3rem + 2.1vw, 2.9rem); letter-spacing: -0.028em; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.35rem); margin-top: 0; }
h3 { font-size: clamp(1.1rem, 1.02rem + .35vw, 1.3rem); letter-spacing: -0.01em; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
strong { color: var(--tinte); font-weight: 650; }
small { font-size: .8em; }

.kicker {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--akzent);
  margin: 0 0 .7rem;
}
.dunkel .kicker { color: var(--akzent-hell); }

.lead {
  font-size: clamp(1.1rem, 1.02rem + .45vw, 1.3rem);
  line-height: 1.6;
  color: var(--gedaempft);
  text-wrap: pretty;
}
.dunkel .lead { color: var(--gedaempft-invers); }

/* Fliesstext bleibt lesbar breit - auch in einem 1120px-Raster. */
.wrap { max-width: var(--breite); margin: 0 auto; padding: 0 1.25rem; }
.wrap.schmal { max-width: var(--breite-schmal); }

/* --- Verweise ------------------------------------------------------------ */
main a:not(.btn):not(.karte-verweis) {
  color: var(--marine);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(11, 59, 90, .35);
  transition: color .15s ease, text-decoration-color .15s ease;
}
main a:not(.btn):hover {
  color: var(--akzent);
  text-decoration-color: currentColor;
}
.dunkel a:not(.btn) { color: var(--akzent-hell); text-decoration-color: rgba(240, 169, 92, .5); }
.dunkel a:not(.btn):hover { color: #ffd7a8; }

/* Fokus: der wichtigste Stil auf dieser Seite. Wir verkaufen Bedienbarkeit -
   ein unsichtbarer Fokus waere die peinlichste Art, sich zu widersprechen. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 3px;
  border-radius: 3px;
}
.dunkel a:focus-visible,
.dunkel button:focus-visible { outline-color: var(--akzent-hell); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--akzent);
  color: #fff;
  padding: .8rem 1.2rem;
  font-weight: 600;
  border-radius: 0 0 var(--rund-klein) 0;
}
.skip-link:focus { left: 0; }

/* --- Kopfzeile ----------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--linie-zart);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 5.4rem;
  flex-wrap: wrap;
}
/* Marke: Zeichen, Name und Leitsatz gehoeren zusammen. Der Leitsatz traegt
   die Firma ueber das erste Produkt hinaus - unter derselben Marke folgen die
   naechsten digitalen Pflichten. Deshalb steht dort nicht "Barrierefreiheit". */
.marke { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.leitsatz {
  margin: 0;
  padding-left: 1.05rem;
  border-left: 1px solid var(--linie);
  font-size: .88rem;
  line-height: 1.3;
  color: var(--gedaempft);
}
/* Unter 1080 px braucht die Navigation den Platz. Der Leitsatz geht dabei
   nicht verloren: Er steht im Titelbereich und in der Fusszeile noch einmal. */
@media (max-width: 1080px) { .leitsatz { display: none; } }

.fuss-leitsatz {
  font-size: 1.05rem !important;
  font-weight: 600;
  color: var(--text-invers) !important;
  letter-spacing: -0.01em;
  margin-bottom: .8rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: 1.38rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--marine);
  text-decoration: none;
}
.logo svg { display: block; }

/* --- Der Haken funkelt ---------------------------------------------------
   Zwei Dinge zusammen ergeben ein Funkeln statt eines Blinkens:

   1. Ein Lichtreflex laeuft ueber den Haken. Er ist kein harter Strich,
      sondern ein Verlauf (siehe funkelverlauf im SVG) - aussen durchsichtig,
      in der Mitte fast weiss mit Goldstich. Deshalb wird der Haken heller,
      wo das Licht gerade steht, statt an- und auszugehen.
   2. Genau wenn der Reflex die Spitze erreicht, blitzt dort ein kleiner
      vierzackiger Funke auf, waechst kurz ueber seine Groesse hinaus und
      verschwindet wieder. Das ist der Teil, den das Auge als "Funkeln" liest.

   Der Takt: einmal je 1,2 Sekunden, vier Mal - zusammen 4,8 Sekunden.

   WARUM NICHT ENDLOS, obwohl es technisch nichts kosten wuerde:
   WCAG 2.2.2 verlangt fuer Bewegung, die von selbst startet und laenger als
   fuenf Sekunden dauert, eine Moeglichkeit zum Anhalten. Ein Dauerfunkeln im
   Kopf jeder Seite waere genau das - auf der Website einer Firma, die
   Barrierefreiheit verkauft, waere das mit einem Prueflauf in Minuten
   nachweisbar. Nach 4,8 Sekunden steht der Haken also ruhig. Wer mit der Maus
   darueberfaehrt oder mit der Tastatur hinspringt, sieht es erneut.          */
.logo-glanz {
  stroke-dasharray: 6 44;
  stroke-dashoffset: 26;
  opacity: 0;
}
.logo-funke {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .logo-glanz { animation: funkeln-reflex 1.2s ease-in-out 4; }
  .logo-funke { animation: funkeln-funke 1.2s ease-out 4; }
  /* Eigene Namen, damit es beim Darueberfahren neu startet - dieselbe
     Animation ist bereits gelaufen und wuerde nicht erneut ausgeloest. */
  .logo:hover .logo-glanz,
  .logo:focus-visible .logo-glanz { animation: funkeln-reflex-erneut 1.2s ease-in-out 2; }
  .logo:hover .logo-funke,
  .logo:focus-visible .logo-funke { animation: funkeln-funke-erneut 1.2s ease-out 2; }
}
@keyframes funkeln-reflex {
  0%        { stroke-dashoffset: 26; opacity: 0; }
  6%        { opacity: 1; }
  40%       { stroke-dashoffset: -6; opacity: 1; }
  50%, 100% { stroke-dashoffset: -6; opacity: 0; }
}
@keyframes funkeln-funke {
  0%, 30%   { transform: scale(0) rotate(-25deg); opacity: 0; }
  38%       { transform: scale(1.25) rotate(10deg); opacity: 1; }
  46%       { transform: scale(.85) rotate(25deg); opacity: .85; }
  58%, 100% { transform: scale(0) rotate(45deg); opacity: 0; }
}
@keyframes funkeln-reflex-erneut {
  0%        { stroke-dashoffset: 26; opacity: 0; }
  6%        { opacity: 1; }
  40%       { stroke-dashoffset: -6; opacity: 1; }
  50%, 100% { stroke-dashoffset: -6; opacity: 0; }
}
@keyframes funkeln-funke-erneut {
  0%, 30%   { transform: scale(0) rotate(-25deg); opacity: 0; }
  38%       { transform: scale(1.25) rotate(10deg); opacity: 1; }
  46%       { transform: scale(.85) rotate(25deg); opacity: .85; }
  58%, 100% { transform: scale(0) rotate(45deg); opacity: 0; }
}

.hauptnav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin: 0;
  padding: 0;
}
.hauptnav a {
  display: block;
  padding: .55rem .8rem;
  border-radius: var(--rund-klein);
  font-size: 1rem;
  font-weight: 550;
  color: var(--gedaempft);
  text-decoration: none;
  transition: color .15s ease, background-color .15s ease;
}
.hauptnav a:hover { color: var(--marine); background: var(--papier-alt); }

/* --- Knoepfe ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--rund-klein);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: background-color .15s ease, color .15s ease; }
}
.btn-primary { background: var(--akzent); color: #fff; box-shadow: var(--schatten-1); }
.btn-primary:hover { background: var(--akzent-dunkel); box-shadow: var(--schatten-2); transform: translateY(-1px); }
.btn-dunkel { background: var(--marine); color: #fff; }
.btn-dunkel:hover { background: var(--marine-tief); transform: translateY(-1px); box-shadow: var(--schatten-2); }
.btn-ghost { border-color: rgba(238, 244, 248, .45); color: var(--text-invers); }
.btn-ghost:hover { background: rgba(238, 244, 248, .1); border-color: var(--text-invers); }
.btn-hell { background: #fff; color: var(--marine); }
.btn-hell:hover { background: var(--papier-alt); transform: translateY(-1px); }

/* --- Abschnitte ---------------------------------------------------------- */
.abschnitt { padding: var(--luft-xl) 0; }
.abschnitt.alt { background: var(--papier-alt); border-block: 1px solid var(--linie-zart); }
.abschnitt-kopf { max-width: 46rem; margin-bottom: var(--luft-m); }
.abschnitt-kopf p:not(.kicker) { font-size: 1.08rem; color: var(--gedaempft); }

.dunkel { background: var(--marine-tief); color: var(--text-invers); }
.dunkel h1, .dunkel h2, .dunkel h3 { color: #fff; }
.dunkel p { color: var(--gedaempft-invers); }

/* --- Titelbereich -------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: var(--luft-l) 0;
  background:
    radial-gradient(120% 120% at 15% 0%, #10486d 0%, rgba(16, 72, 109, 0) 55%),
    radial-gradient(90% 90% at 100% 15%, #0d3f61 0%, rgba(13, 63, 97, 0) 60%),
    var(--marine-nacht);
}
/* Feines Raster im Hintergrund - gibt der Flaeche Tiefe, ohne ein Bild zu
   laden. Rein dekorativ, deshalb aria-frei und nicht anklickbar. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 25%, transparent 75%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 25%, transparent 75%);
  pointer-events: none;
}
.hero .wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: var(--luft-m);
  align-items: center;
}
.hero h1 { color: #fff; margin-bottom: 1.1rem; }
.hero .lead { max-width: 34rem; }
.cta-zeile { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.8rem 0 1rem; }
.disclaimer { font-size: .9rem; color: var(--gedaempft-invers); margin: 0; }

/* Merkmalzeile unter dem Titel: drei Zusagen, die die Marke tragen. */
.hero-merkmale {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 1.4rem 0 0;
  border-top: 1px solid rgba(238, 244, 248, .16);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.6rem;
  font-size: .93rem;
  color: var(--gedaempft-invers);
}
.hero-merkmale li { display: flex; align-items: center; gap: .45rem; }

@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; }
  /* Das Bild folgt dem Text, es geht ihm nicht voraus: Wer die Seite auf dem
     Telefon oeffnet, soll zuerst lesen, worum es geht. Auch die Reihenfolge
     im Quelltext bleibt so die, die man sieht. */
  .hero-bild { max-width: 520px; }
}

/* Kopfzeile auf kleinen Geraeten: zwei ruhige Zeilen statt eines
   Klappmenues. Ein Klappmenue braucht entweder JavaScript (ist hier per
   Richtlinie gesperrt) oder ein <details>, dessen Aufklappen sich auf dem
   Desktop nicht zuverlaessig ueberschreiben laesst. Zwei Zeilen zeigen alle
   sechs Ziele, ohne dass jemand erst etwas oeffnen muss. */
@media (max-width: 720px) {
  .site-header .wrap { min-height: 0; padding-top: .55rem; padding-bottom: .45rem; gap: .2rem; }
  .hauptnav { width: 100%; }
  .hauptnav ul { gap: .1rem; }
  .hauptnav a { padding: .5rem .55rem; font-size: .9rem; }
  html { scroll-padding-top: 1rem; }

  /* NICHT klebend auf dem Telefon. Zwei Navigationszeilen sind 133 Pixel -
     auf einem Bildschirm von 780 Pixeln ein Sechstel der Flaeche, dauerhaft.
     Am Rechner ist die klebende Kopfzeile ein Gewinn, auf dem Telefon nimmt
     sie mehr weg, als sie bringt. */
  .site-header { position: static; }

  /* Die Nummer des Schrittes steht ueber dem Text statt daneben: 3,4 rem
     Einzug sind bei 280 Pixeln Textbreite ein Fuenftel der Zeile. */
  .schritte li { padding: var(--luft-s); }
  .schritte li::before { position: static; margin-bottom: .7rem; }
}

/* --- Die Prueflauf-Animation im Titelbereich ------------------------------
   Sie zeigt genau das, was wir verkaufen: Eine Seite wird durchgegangen,
   Befunde erscheinen, die Ampel steht am Ende auf ROT.

   Drei Regeln, an die sie sich haelt:
   1. Sie laeuft EINMAL und bleibt dann stehen (animation-fill-mode: forwards).
      Eine Schleife im Blickfeld zieht beim Lesen dauerhaft Aufmerksamkeit ab.
   2. Ohne sie fehlt nichts: Der Endzustand ist die Aussage, die Bewegung nur
      der Weg dorthin.
   3. Bei "prefers-reduced-motion: reduce" steht sofort der Endzustand da.
      Wer Bewegung abschaltet, hat dafuer einen Grund - oft einen
      gesundheitlichen. Eine Firma, die Barrierefreiheit verkauft und das
      ignoriert, hat ihr eigenes Produkt nicht verstanden.                  */
.hero-bild { position: relative; width: 100%; }
.hero-bild svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .35)); }

/* Der Schalter selbst ist unsichtbar, aber vorhanden - kein display:none,
   sonst waere er nicht mit der Tastatur erreichbar. Sichtbar ist die
   Beschriftung daneben, und die schaltet mit. */
.anim-schalter {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
/* Die ganze Bildflaeche schaltet: ein Klick irgendwo darauf haelt den
   Prueflauf an. Der kleine Hinweis unten rechts bleibt trotzdem sichtbar -
   ein Bedienelement, das niemand bemerkt, ist im Sinne von WCAG 2.2.2 keines. */
.anim-flaeche { display: block; position: relative; cursor: pointer; }
.anim-knopf {
  position: absolute;
  right: .6rem;
  bottom: .6rem;
  opacity: .82;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .75rem;
  border-radius: 999px;
  background: rgba(6, 31, 49, .72);
  color: var(--text-invers);
  font-size: .8rem;
  font-weight: 550;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color .15s ease;
}
.anim-flaeche:hover .anim-knopf { background: rgba(6, 31, 49, .9); opacity: 1; }
.anim-knopf span { display: inline-flex; align-items: center; gap: .4rem; }
/* Der Fokusrahmen liegt um die ganze Flaeche - sie ist das Bedienelement. */
.anim-schalter:focus-visible ~ .anim-flaeche {
  outline: 3px solid var(--akzent-hell);
  outline-offset: 4px;
  border-radius: 6px;
}
.anim-schalter:focus-visible ~ .anim-flaeche .anim-knopf { opacity: 1; }
/* Die Beschriftung wechselt mit dem Zustand - und zwar durch Ein- und
   Ausblenden echter Textknoten, nicht ueber CSS-Inhalte. So aendert sich auch
   der Name, den eine Vorlesesoftware ansagt. */
.wenn-pausiert { display: none !important; }
.anim-schalter:checked ~ .anim-flaeche .wenn-laeuft { display: none !important; }
.anim-schalter:checked ~ .anim-flaeche .wenn-pausiert { display: inline-flex !important; }
/* Ohne Bewegung braucht es keinen Schalter fuer Bewegung. */
@media (prefers-reduced-motion: reduce) {
  .anim-knopf, .anim-schalter { display: none; }
  .anim-flaeche { cursor: default; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Dauerlauf, hoch und runter - wie ein Monitoring, das nicht aufhoert.
     Zulaessig ist das nur MIT dem Schalter darunter: WCAG 2.2.2 verlangt fuer
     Bewegung, die von selbst startet und laenger als fuenf Sekunden dauert,
     eine Moeglichkeit zum Anhalten. Die gibt es hier - ohne JavaScript, mit
     der Tastatur bedienbar, und sie haelt auch die Befunde an. */
  .scan-strahl { animation: strahl 3.6s ease-in-out .35s infinite alternate; }
  .anim-schalter:checked ~ .anim-flaeche svg * { animation-play-state: paused; }
  .befund { opacity: 0; animation: befund-auf .55s ease-out forwards; }
  .befund-1 { animation-delay: 1.35s; }
  .befund-2 { animation-delay: 1.75s; }
  .befund-3 { animation-delay: 2.15s; }
  .ampel-rot { opacity: 0; animation: befund-auf .5s ease-out 2.75s forwards; }
  .ampel-grau { animation: befund-zu .5s ease-out 2.75s forwards; }
}
@keyframes strahl {
  0% { transform: translateY(0); opacity: .35; }
  8% { opacity: .95; }
  92% { opacity: .95; }
  100% { transform: translateY(200px); opacity: .35; }
}
@keyframes befund-auf { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes befund-zu { to { opacity: 0; } }

/* --- Zahlenband: die eigene Messung -------------------------------------- */
.zahlen { background: var(--papier-warm); border-block: 1px solid var(--linie-zart); padding: var(--luft-l) 0; }
.zahlen-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: var(--luft-s);
  margin-top: var(--luft-m);
}
.zahl { padding-left: 1.1rem; border-left: 3px solid var(--akzent); }
.zahl dt { font-size: .95rem; color: var(--gedaempft); order: 2; }
.zahl dd {
  margin: 0 0 .2rem;
  font-size: clamp(1.9rem, 1.4rem + 1.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--marine);
  font-variant-numeric: tabular-nums;
  /* "39 von 40" darf nicht nach dem "von" umbrechen - eine Zahl, die auf
     zwei Zeilen steht, liest sich als zwei Zahlen. */
  white-space: nowrap;
  order: 1;
}
.zahl { display: flex; flex-direction: column; }

/* --- Karten -------------------------------------------------------------- */
.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--luft-s);
}
.karte {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  padding: var(--luft-s);
  box-shadow: var(--schatten-1);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.karte:hover { transform: translateY(-3px); box-shadow: var(--schatten-2); border-color: #c3d2dd; }
@media (prefers-reduced-motion: reduce) { .karte:hover { transform: none; } }
.karte .icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--papier-alt);
  border: 1px solid var(--linie-zart);
  margin-bottom: .9rem;
}
.karte p { color: var(--gedaempft); font-size: .98rem; }

.kernsatz {
  margin: var(--luft-m) 0 0;
  padding: 1.2rem 1.4rem;
  border-left: 4px solid var(--akzent);
  background: var(--papier-alt);
  border-radius: 0 var(--rund-klein) var(--rund-klein) 0;
  font-size: 1.08rem;
  font-weight: 550;
  color: var(--tinte);
}
.abschnitt.alt .kernsatz { background: var(--papier); }

.fussnote { margin-top: var(--luft-s); font-size: .9rem; color: var(--gedaempft); }

/* --- Faktenliste --------------------------------------------------------- */
.fakten { padding: var(--luft-l) 0; background: var(--papier); }
.fakten ul {
  list-style: none;
  margin: var(--luft-m) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--luft-s);
}
.fakten li { padding-top: 1rem; border-top: 3px solid var(--marine); }
.fakten strong { display: block; font-size: 1.08rem; margin-bottom: .35rem; }
.fakten p { color: var(--gedaempft); font-size: .98rem; margin: 0; }

/* --- Gegenueberstellung -------------------------------------------------- */
.vergleich { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--luft-s); }
.vergleich-panel {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  padding: var(--luft-s);
  box-shadow: var(--schatten-1);
}
.vergleich-panel h3 { display: flex; align-items: center; gap: .5rem; }
.vergleich-panel.negativ { border-top: 4px solid var(--rot); }
.vergleich-panel.positiv { border-top: 4px solid var(--gruen); }
.vergleich-panel ul { list-style: none; margin: 1rem 0 0; padding: 0; }
.vergleich-panel li {
  display: grid;
  grid-template-columns: 1.3rem 1fr;
  gap: .6rem;
  align-items: start;
  margin-bottom: .8rem;
  font-size: .97rem;
  color: var(--gedaempft);
}
.vergleich-panel li span { padding-top: .25rem; }

/* --- Schritte ------------------------------------------------------------ */
.schritte { list-style: none; counter-reset: schritt; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--luft-s); }
.schritte li {
  counter-increment: schritt;
  position: relative;
  padding: var(--luft-s) var(--luft-s) var(--luft-s) calc(var(--luft-s) + 3.4rem);
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  box-shadow: var(--schatten-1);
}
.schritte li::before {
  content: counter(schritt);
  position: absolute;
  left: var(--luft-s);
  top: var(--luft-s);
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--marine);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.schritte p { color: var(--gedaempft); }
.ampel-legende { font-size: .9rem; }
.punkt { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .3rem; vertical-align: baseline; }
.punkt.rot { background: var(--rot); }
.punkt.gelb { background: var(--gelb); }
.punkt.gruen { background: var(--gruen); }

/* --- Preise -------------------------------------------------------------- */
.preis-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: var(--luft-s); align-items: start; }
.preis-karte {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  overflow: hidden;
  box-shadow: var(--schatten-1);
  display: flex;
  flex-direction: column;
}
.preis-karte.hervor { border-color: var(--marine); box-shadow: var(--schatten-3); }
.preis-kopf { padding: 1.2rem var(--luft-s) 0; }
.preis-karte.hervor .preis-kopf { background: var(--marine); color: #fff; padding-bottom: 1.2rem; }
.preis-karte.hervor .preis-kopf h3 { color: #fff; }
.badge {
  display: inline-block;
  margin-bottom: .5rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: var(--akzent);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.preis-inhalt { padding: var(--luft-s); display: flex; flex-direction: column; flex: 1; }
.preis-betrag {
  font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--marine);
  margin: 0 0 1rem;
  font-variant-numeric: tabular-nums;
}
.preis-betrag small { display: block; font-size: .8rem; font-weight: 500; letter-spacing: 0; color: var(--gedaempft); }
.preis-inhalt ul { list-style: none; margin: 0 0 1.4rem; padding: 0; flex: 1; }
.preis-inhalt li {
  display: grid;
  grid-template-columns: 1.3rem 1fr;
  gap: .55rem;
  align-items: start;
  margin-bottom: .7rem;
  font-size: .96rem;
  color: var(--gedaempft);
}
.preis-inhalt li span { padding-top: .25rem; }
.preis-hinweis { font-size: .9rem; color: var(--gedaempft); margin-top: var(--luft-s); }

/* --- FAQ ----------------------------------------------------------------- */
.faq-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; }
.faq-item {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  padding: var(--luft-s);
}
.faq-item h3 { margin-bottom: .5rem; }
.faq-item p { color: var(--gedaempft); font-size: .98rem; }

/* --- Formular ------------------------------------------------------------ */
.kontakt-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: var(--luft-m); align-items: start; }
.kontakt-info p { color: var(--gedaempft); }
.formular {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  padding: var(--luft-s);
  box-shadow: var(--schatten-2);
}
.feld { margin-bottom: 1.1rem; }
.feld label, .check label { font-weight: 600; font-size: .95rem; color: var(--tinte); }
.feld label { display: block; margin-bottom: .35rem; }
.feld input {
  width: 100%;
  padding: .8rem .9rem;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--papier);
  border: 1px solid #b9c8d4;
  border-radius: var(--rund-klein);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.feld input:hover { border-color: #93a8b8; }
.feld input:focus { border-color: var(--marine); box-shadow: 0 0 0 3px rgba(11, 59, 90, .12); outline-offset: 1px; }
.hilfe { font-size: .87rem; color: var(--gedaempft); margin: .35rem 0 0; }
.check { display: grid; grid-template-columns: 1.6rem 1fr; gap: .6rem; margin-bottom: 1.3rem; align-items: start; }
/* 24 Pixel sind das Mindestmass fuer ein Ziel, das kein Fliesstext-Verweis
   ist (WCAG 2.2, 2.5.8). Das Kaestchen war 18 Pixel gross. */
.check input { width: 1.5rem; height: 1.5rem; margin-top: .1rem; accent-color: var(--marine); }
.check label { font-weight: 400; font-size: .92rem; color: var(--gedaempft); }
.formular .btn { width: 100%; }
.formular-hinweis { font-size: .85rem; color: var(--gedaempft); margin: .8rem 0 0; text-align: center; }
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Fusszeile -----------------------------------------------------------
   Die Fusszeile bringt ihre hellen Verweisfarben SELBST mit und verlaesst
   sich nicht auf die Klasse "dunkel" daneben. Genau daran ist es am
   27.08.2026 gescheitert: Sechs Unterseiten hatten <footer class="site-footer">
   ohne "dunkel", der Hintergrund kam trotzdem dunkel - und die Verweise
   blieben im Browser-Blau auf Nachtblau. Kontrast 1,79:1, sechs Verstoesse
   auf der Website einer Firma, die Barrierefreiheit verkauft.              */
.site-footer { padding: var(--luft-l) 0 var(--luft-m); background: var(--marine-nacht); color: var(--text-invers); }
.site-footer p { font-size: .92rem; color: var(--gedaempft-invers); max-width: 62rem; }
.site-footer h2, .site-footer h3 { color: #fff; }
.site-footer a:not(.btn) {
  color: var(--akzent-hell);
  text-decoration: underline;
  text-decoration-color: rgba(240, 169, 92, .5);
  text-underline-offset: 3px;
}
.site-footer a:not(.btn):hover { color: #ffd7a8; text-decoration-color: currentColor; }
.site-footer a:focus-visible { outline-color: var(--akzent-hell); }
.fussnav ul { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 0 0 var(--luft-s); padding: 0 0 var(--luft-s); border-bottom: 1px solid rgba(238, 244, 248, .14); }
/* Fusszeilen-Verweise sind Navigation, kein Fliesstext - sie brauchen eine
   Flaeche, die ein Daumen trifft. */
.fussnav a { display: inline-block; padding: .35rem 0; font-weight: 550; font-size: .95rem; }

/* --- Ratgeber: Artikel und Uebersicht ------------------------------------ */
.seiten-kopf { padding: var(--luft-l) 0 var(--luft-m); background: var(--papier-alt); border-bottom: 1px solid var(--linie-zart); }
.brotkrumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.2rem; padding: 0; font-size: .88rem; color: var(--gedaempft); }
.brotkrumen li + li::before { content: "›"; margin-right: .4rem; color: var(--linie); }
.artikel-meta { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin-top: var(--luft-s); font-size: .88rem; color: var(--gedaempft); }
.artikel-meta p { margin: 0; }
.inhalt { padding: var(--luft-m) 0 var(--luft-xl); }
.inhalt h2 { margin-top: var(--luft-m); scroll-margin-top: 6rem; }
.inhalt h3 { margin-top: var(--luft-s); }
.inhalt ul, .inhalt ol { padding-left: 1.3rem; }
.inhalt li { margin-bottom: .5rem; }

.toc {
  background: var(--papier-alt);
  border: 1px solid var(--linie-zart);
  border-radius: var(--rund);
  padding: var(--luft-s);
  margin-bottom: var(--luft-m);
}
.toc h2 { font-size: 1rem; margin: 0 0 .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gedaempft); }
.toc ol { margin: 0; padding-left: 1.2rem; }
.toc li { margin-bottom: .35rem; }

.tabelle-scroll { overflow-x: auto; margin: var(--luft-s) 0; border: 1px solid var(--linie); border-radius: var(--rund-klein); }
.tabelle-scroll table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.tabelle-scroll th, .tabelle-scroll td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--linie-zart); vertical-align: top; }
.tabelle-scroll th { background: var(--papier-alt); font-weight: 650; color: var(--tinte); }
.tabelle-scroll tr:last-child td { border-bottom: 0; }

.hinweis, .warnung, .muster, .befunde, .checkliste, .legende, .info-box, .hinweis-box {
  border-radius: var(--rund);
  padding: var(--luft-s);
  margin: var(--luft-s) 0;
  font-size: .97rem;
}
.hinweis, .info-box, .hinweis-box { background: var(--papier-alt); border-left: 4px solid var(--marine); }
.warnung { background: #fdf3f2; border-left: 4px solid var(--rot); }
.muster, .checkliste { background: var(--papier-warm); border: 1px dashed #c9b79c; }
.befunde, .legende { background: var(--papier-alt); border: 1px solid var(--linie-zart); }
.hinweis > :first-child, .warnung > :first-child, .muster > :first-child { margin-top: 0; }

.weiterlesen, .cta-kasten {
  margin-top: var(--luft-m);
  padding: var(--luft-s);
  border-radius: var(--rund);
}
.weiterlesen { background: var(--papier-alt); border: 1px solid var(--linie-zart); }
.weiterlesen ul { margin: 0; padding-left: 1.2rem; }
.cta-kasten { background: var(--marine); color: #fff; box-shadow: var(--schatten-2); }
.cta-kasten h2 { color: #fff; margin-top: 0; }
.cta-kasten p { color: var(--gedaempft-invers); }
.quellen { margin-top: var(--luft-m); font-size: .87rem; color: var(--gedaempft); }

.artikel-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--luft-s); }
.artikel-karte {
  display: flex;
  flex-direction: column;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  padding: var(--luft-s);
  box-shadow: var(--schatten-1);
  transition: transform .18s ease, box-shadow .18s ease;
}
.artikel-karte:hover { transform: translateY(-3px); box-shadow: var(--schatten-2); }
@media (prefers-reduced-motion: reduce) { .artikel-karte:hover { transform: none; } }
.artikel-karte h3 { margin-bottom: .4rem; }
.artikel-karte p { color: var(--gedaempft); font-size: .96rem; flex: 1; }
.karte-meta { font-size: .85rem; color: var(--gedaempft); margin-top: .8rem; }

/* --- Kleinseiten (Impressum, Datenschutz, Danke, Abbruch) ---------------- */
.zurueck { display: inline-block; margin-top: var(--luft-s); }
.status { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }
.aktionen { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: var(--luft-s); }
.liste li { margin-bottom: .5rem; }

/* --- Bewegung beim Scrollen ----------------------------------------------
   KEINE Deckkraft in dieser Animation - nur eine Verschiebung.

   Die erste Fassung begann bei "opacity: 0". Im Browser sah das gut aus, im
   Ganzseiten-Bild war die halbe Seite leer: Was noch nicht "eingetreten" ist,
   bleibt unsichtbar. Damit haengt die Lesbarkeit des gesamten Inhalts an
   einer Animation - an einer Browser-Faehigkeit, einem Druckvorgang, einem
   Lesemodus, einem Werkzeug, das die Seite anders scrollt. Bei einer Firma,
   die Barrierefreiheit verkauft, ist das der schlechteste denkbare Fehler.

   Jetzt bewegt sich der Abschnitt nur 16 Pixel nach oben. Faellt die
   Animation aus, steht er 16 Pixel tiefer - und niemand merkt es.          */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .enthuellen {
      animation: aufsteigen linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 45%;
    }
    /* Feine Linie, die sich unter jeder Abschnitts-Ueberschrift aufzieht.
       Rein dekorativ: Sie traegt keine Aussage, nur Rhythmus. */
    .abschnitt-kopf h2::after {
      content: "";
      display: block;
      width: 3.5rem;
      height: 3px;
      margin-top: .9rem;
      border-radius: 2px;
      background: var(--akzent);
      transform-origin: left center;
      animation: linie-ziehen linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 50%;
    }
  }
}
@keyframes aufsteigen {
  from { transform: translateY(16px); }
  to { transform: translateY(0); }
}
@keyframes linie-ziehen {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media print {
  .site-header, .hero-bild, .skip-link, .cta-zeile { display: none; }
  body { color: #000; background: #fff; font-size: 11pt; }
  .abschnitt { padding: 1rem 0; }
}