/* Oberflow — Stylesheet
 *
 * Gebaut nach der Recherche vom 28.07.2026. Die drei Befunde, die alles treiben:
 *
 * 1. ABSTAENDE WAREN KAPUTT. Vorher: 99px Sektionspolster, also 198px zwischen
 *    zwei Sektionen — bei einer groessten Stufe von 60px im GOV.UK-System.
 *    Dazu 27px Abstand INNERHALB einer Gruppe gegen 198px ZWISCHEN Gruppen:
 *    Verhaeltnis 7:1, wo die Gestalt-Regel etwa 2:1 bis 3:1 verlangt.
 *    Jetzt: feste Stufenleiter, Sektionsabstand ~96px, Verhaeltnis 3:1.
 *
 * 2. TOTER RAUM RECHTS. Eine 68ch-Textspalte (~612px) in einer 1242px-Huelle
 *    liess 630px leer. Jetzt zwei Huellenbreiten: schmal fuer Fliesstext,
 *    breit nur fuer Raster — und Zweispalter, die die Breite wirklich nutzen.
 *
 * 3. KEIN RHYTHMUS. Sechs Sektionen, alle dasselbe Kartenraster. Jetzt
 *    wechselnde Muster, darunter eine dunkle Vollbreiten-Sektion als Zaesur.
 *
 * Unveraendert gilt: keine externen Ressourcen, kein JavaScript, keine
 * Webfonts. outline:none kommt nirgends vor. Grafiken sind Inline-SVG.
 */

/* ---------- Token ----------
 *
 * UMGESTELLT AM 07.08.2026 auf einen Look nach Apple-Vorbild: fast schwarze
 * Typografie auf Weiss, ein einziger Akzent, Pillen-Schaltflaechen, viel Luft,
 * Flaechen statt Rahmen. Geaendert wurde NUR dieses Stylesheet — kein HTML,
 * kein Text, kein Claim.
 *
 * 🔴 DIE FARBEN SIND NICHT VON APPLE UEBERNOMMEN, SONDERN NACHGERECHNET.
 * Apples eigenes Sekundaergrau #86868b liegt auf Weiss bei **3.62:1** und auf
 * seiner Flaeche #f5f5f7 bei **3.33:1** — beides unter den 4.5:1, die
 * WCAG 1.4.3 fuer normalen Text verlangt. Apple erfuellt die Norm an dieser
 * Stelle selbst nicht. Fuer eine Seite, die Barrierefreiheit verkauft, waere
 * das Uebernehmen des Originalwerts der teuerste denkbare Fehler.
 * Ersetzt durch #5c5c61: **6.65:1** auf Weiss, **6.11:1** auf der Flaeche.
 *
 * Nachgerechnet, nicht geschaetzt (WCAG-Formel, relative Luminanz):
 *   #1d1d1f auf #ffffff  16.83:1   Fliesstext
 *   #1d1d1f auf #f5f5f7  15.46:1   Fliesstext auf Flaeche
 *   #5c5c61 auf #ffffff   6.65:1   Sekundaertext
 *   #5c5c61 auf #f5f5f7   6.11:1   Sekundaertext auf Flaeche
 *   #1D7268 auf #ffffff   5.74:1   Akzent, Links
 *   #ffffff auf #1D7268   5.74:1   Knopfbeschriftung
 *   #ffffff auf #1d1d1f  16.83:1   dunkle Sektion
 *   #a8a8ad auf #1d1d1f   7.11:1   leise auf dunkel
 *   #6ee7d4 auf #1d1d1f  11.26:1   Akzent auf dunkel
 *
 * ⚠️ Die Flaeche #f5f5f7 liegt gegen Weiss bei 1.09:1 und die Trennlinie
 * #d2d2d7 bei 1.51:1 — beide tragen deshalb NIE allein eine Bedeutung.
 * Wo eine Grenze etwas bedeutet (aktiver Menuepunkt, betonte Karte), steht
 * eine Farbe mit mindestens 3:1 nach WCAG 1.4.11.
 *
 * Das Oberflow-Gruen bleibt. Es steckt in Briefen, PDFs, dem Ampel-Generator
 * und den LinkedIn-Bildern — ein Wechsel auf Apple-Blau haette alles andere
 * inkonsistent gemacht. Apple-Look heisst hier: Typografie, Raum und Form,
 * nicht fremde Markenfarbe.
 */
:root {
  --text: #1d1d1f;
  --text-leise: #5c5c61;
  --aktion: #1d7268;
  --aktion-dunkel: #155a52;
  --akzent: #1d7268;
  --flaeche: #f5f5f7;
  --dunkel: #1d1d1f;
  --auf-dunkel-leise: #a8a8ad;
  --weiss: #ffffff;
  --rahmen: #d2d2d7;
  --rahmen-stark: #86868b;

  /* Stufenleiter — jeder Abstand kommt hieraus, nichts wird frei erfunden */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 2.5rem;
  --s8: 3rem;

  /* Sektionspolster: 38px mobil bis 49px Desktop -> ~98px zwischen Sektionen.
     Gegen die Gruppen-Luecke von 34px ergibt das 2.9:1 — im Zielband der
     Gestalt-Regel (aussen > innen, aber nicht um ein Vielfaches). */
  /* Apple laesst deutlich mehr Luft als das bisherige System. Von ~46px auf
     ~80px Sektionspolster, also rund 160px zwischen zwei Sektionen. Die
     Gruppen-Luecke waechst mit (--s6 auf --s8), damit das Verhaeltnis
     aussen:innen im Zielband bleibt und nicht ins Beliebige kippt. */
  --luft: clamp(3.25rem, 6vw, 5rem);

  --huelle-breit: 71rem;
  --huelle-schmal: 42rem;
  --spalte: 66ch;

  /* Apple arbeitet mit grossen Radien und Pillen. 18px an Karten, 980px an
     Schaltflaechen — der zweite Wert ist so gross, dass jede Hoehe rund wird. */
  --radius: 18px;
  --radius-pille: 980px;
  --schatten: 0 4px 24px rgba(0, 0, 0, 0.06);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 106.25%;
  -webkit-text-size-adjust: 100%;
} /* 17px Basis */

body {
  margin: 0;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif;
  line-height: 1.6;
  color: var(--text);
  background: var(--weiss);
  overflow-wrap: break-word;
}

/* Typo-Stufenleiter, Verhaeltnis 1.25 (Major Third) — traegt Fliesstext und
   dichte Oberflaechen gleichermassen, laut Recherche die sichere Wahl. */
/* Apple setzt Ueberschriften deutlich groesser, schwerer und enger als ueblich:
   grosse Grade, Zeilenhoehe um 1.05-1.1, negatives Letter-Spacing bis -0.03em.
   Die Stufenleiter bleibt, die Werte wachsen. */
h1,
h2,
h3 {
  line-height: 1.08;
  text-wrap: balance;
  margin: 0 0 var(--s4);
  font-weight: 700;
}
h1 {
  font-size: clamp(2.15rem, 6vw, 3.9rem);
  letter-spacing: -0.032em;
}
h2 {
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  letter-spacing: -0.028em;
}
h3 {
  font-size: clamp(1.15rem, 1.9vw, 1.35rem);
  letter-spacing: -0.018em;
  line-height: 1.2;
}

p,
li {
  max-width: var(--spalte);
}
p {
  margin: 0 0 var(--s4);
}
p:last-child,
ul:last-child,
ol:last-child {
  margin-bottom: 0;
}

a {
  color: var(--aktion);
  text-underline-offset: 0.18em;
}
a:hover {
  color: var(--aktion-dunkel);
}

:focus-visible {
  outline: 2px solid var(--aktion);
  outline-offset: 2px;
  border-radius: 3px;
}
.dunkel :focus-visible {
  outline-color: #7fd4c6;
}

img,
svg {
  max-width: 100%;
}

/* ---------- Skip-Link ---------- */
.skip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
  transform: translateY(-120%);
  background: var(--aktion);
  color: var(--weiss);
  padding: var(--s3) var(--s5);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus {
  transform: translateY(0);
  color: var(--weiss);
}

/* ---------- Huellen ---------- */
.huelle,
.huelle-schmal {
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
}
.huelle {
  max-width: var(--huelle-breit);
}
.huelle-schmal {
  max-width: var(--huelle-schmal);
}

section {
  padding-block: var(--luft);
}
.flaeche {
  background: var(--flaeche);
}

.dunkel {
  background: var(--dunkel);
  color: var(--weiss);
}
.dunkel h2,
.dunkel h3 {
  color: var(--weiss);
}
.dunkel a {
  color: #7fd4c6;
}
.dunkel a:hover {
  color: var(--weiss);
}
.dunkel .leise {
  color: var(--auf-dunkel-leise);
}

/* Sektionskopf — Abstand nach unten aus der Leiter, nicht frei gegriffen */
.kopf-block {
  max-width: var(--spalte);
  margin-bottom: var(--s6);
}
.kopf-block > p {
  color: var(--text-leise);
  font-size: 1.02rem;
  margin-bottom: 0;
}
.dunkel .kopf-block > p {
  color: var(--auf-dunkel-leise);
}

.augenbraue {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--aktion);
  margin-bottom: var(--s2);
}
.dunkel .augenbraue {
  color: #7fd4c6;
}

/* ---------- Kopfzeile ---------- */
/* Apple laesst die Kopfzeile mitlaufen und den Inhalt darunter durchscheinen.
   Beides ohne JavaScript moeglich: position:sticky und backdrop-filter.
   Der Ruecktritt auf eine deckende Flaeche steht davor, damit Browser ohne
   backdrop-filter (und der Druck) trotzdem lesbaren Text zeigen. */
.seitenkopf {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid var(--rahmen);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .seitenkopf {
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}
/* Wer Bewegung reduziert haben will, bekommt eine ruhende Kopfzeile.
   prefers-reduced-motion meint auch mitlaufende Elemente, nicht nur Animation. */
@media (prefers-reduced-motion: reduce) {
  .seitenkopf {
    position: static;
    background: var(--weiss);
  }
}
.seitenkopf .huelle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3) var(--s5);
  padding-block: var(--s3);
}
.marke {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  text-decoration: none;
  color: var(--text);
}
.marke-name {
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.marke-zusatz {
  font-size: 0.78rem;
  color: var(--text-leise);
}

.navi ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.navi a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--text);
  border-bottom: 3px solid transparent;
}
.navi a:hover {
  color: var(--aktion);
}
.navi a[aria-current='page'] {
  border-bottom-color: var(--akzent);
}

/* ---------- Schaltflaechen ---------- */
/* Pillen-Schaltflaeche nach Apple-Vorbild. Der Rahmen bleibt in der Farbe der
   Flaeche stehen — er ist unsichtbar, aber er haelt die Hoehe stabil, wenn
   jemand im Browser "Rahmen erzwingen" aktiviert hat. */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: var(--s3) var(--s7);
  background: var(--aktion);
  color: var(--weiss);
  font-size: 1.02rem;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid var(--aktion);
  border-radius: var(--radius-pille);
}
.knopf:hover {
  background: var(--aktion-dunkel);
  border-color: var(--aktion-dunkel);
  color: var(--weiss);
}

.dunkel .knopf {
  background: #6ee7d4;
  border-color: #6ee7d4;
  color: #10231f;
}
.dunkel .knopf:hover {
  background: var(--weiss);
  border-color: var(--weiss);
  color: #10231f;
}

.knopf-zweit {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  font-weight: 600;
  text-decoration: underline;
}

.tat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4) var(--s5);
  margin-top: var(--s5);
}
.tat .neben {
  font-size: 0.92rem;
  color: var(--text-leise);
  max-width: 32ch;
  margin: 0;
}
.dunkel .tat .neben {
  color: var(--auf-dunkel-leise);
}

/* ---------- Hero ---------- */
.hero {
  padding-block: clamp(2.5rem, 5.5vw, 4rem) var(--luft);
}
.hero-raster {
  display: grid;
  gap: var(--s7) var(--s8);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 62rem) {
  .hero-raster {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}
.hero h1 {
  margin-bottom: var(--s5);
}
/* Apple setzt die Unterzeile gross und in Grau — sie ist kein Kleingedrucktes,
   sondern der zweite Satz der Aussage. */
.hero .subline {
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  max-width: 46ch;
  color: var(--text-leise);
  margin-bottom: 0;
}
.frist {
  display: block;
  max-width: 52ch;
  margin-bottom: var(--s5);
  padding-left: var(--s3);
  border-left: 3px solid var(--akzent);
  font-size: 0.94rem;
  color: var(--text-leise);
}
.vertrauen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  list-style: none;
  margin: var(--s6) 0 0;
  padding: 0;
  font-size: 0.92rem;
  color: var(--text-leise);
}
.vertrauen li {
  max-width: none;
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.vertrauen li::before {
  content: '';
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--akzent);
}

/* ---------- Zweispalter Text + Grafik ---------- */
.zwei {
  display: grid;
  gap: var(--s7) var(--s8);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 56rem) {
  .zwei {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .zwei.gedreht > :first-child {
    order: 2;
  }
}
.zwei > * {
  min-width: 0;
}
.zwei p,
.zwei li {
  max-width: 46ch;
}

/* ---------- Raster ---------- */
.raster {
  display: grid;
  gap: var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.raster > li,
.raster > div {
  max-width: none;
  min-width: 0;
}

/* Apple trennt mit FLAECHE, nicht mit Linie. Die Karte bekommt deshalb den
   hellgrauen Grund und keinen Rahmen — auf weissem Untergrund liegt der
   Unterschied bei 1.09:1 und traegt bewusst keine Bedeutung: Was die Karten
   trennt, ist der Abstand, und was sie benennt, ist ihre Ueberschrift. */
.karte {
  background: var(--flaeche);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: var(--s6);
  box-shadow: none;
}
.karte h3 {
  margin-bottom: var(--s3);
}
.karte p,
.karte li {
  max-width: none;
  font-size: 0.98rem;
}
.flaeche .karte {
  background: var(--weiss);
}
.dunkel .karte {
  background: rgba(255, 255, 255, 0.07);
  border-color: transparent;
  box-shadow: none;
}

/* Hier traegt die Grenze sehr wohl Bedeutung — sie hebt eine Karte aus der
   Reihe heraus. Deshalb Farbe statt Flaeche: #1D7268 auf #ffffff = 5.74:1,
   ueber den 3:1 aus WCAG 1.4.11. */
.karte-betont {
  border: 2px solid var(--aktion);
  background: var(--weiss);
}
.flaeche .karte-betont {
  background: var(--weiss);
}
.marke-band {
  display: inline-block;
  margin-bottom: var(--s3);
  padding: 0.1rem 0.55rem;
  background: var(--aktion);
  color: var(--weiss);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---------- Preise ---------- */
.preis {
  display: block;
  margin: var(--s4) 0 var(--s1);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.preis-zusatz {
  display: block;
  font-size: 0.86rem;
  color: var(--text-leise);
}
.dunkel .preis-zusatz {
  color: var(--auf-dunkel-leise);
}

.preistabelle {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--s5);
  font-size: 0.97rem;
}
.preistabelle caption {
  text-align: left;
  color: var(--text-leise);
  font-size: 0.9rem;
  margin-bottom: var(--s3);
}
.preistabelle th,
.preistabelle td {
  text-align: left;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--rahmen);
}
.preistabelle thead th {
  border-bottom: 2px solid var(--rahmen-stark);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.preistabelle td + td,
.preistabelle th + th {
  text-align: right;
  white-space: nowrap;
}
.tabellenrahmen {
  overflow-x: auto;
}

/* ---------- Listen ---------- */
.haken {
  list-style: none;
  margin: var(--s4) 0 0;
  padding: 0;
}
.haken li {
  position: relative;
  padding-left: var(--s5);
  margin-bottom: var(--s2);
}
.haken li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.62rem;
  height: 0.62rem;
  border-left: 2px solid var(--aktion);
  border-bottom: 2px solid var(--aktion);
  transform: rotate(-45deg);
}
.dunkel .haken li::before {
  border-color: #7fd4c6;
}

/* Nummerierte Liste — noetig, wo der Fliesstext auf (1)/(2)/(3) verweist.
   Ohne sichtbare Nummern laeuft so ein Verweis ins Leere (Fund 30.07.). */
.nummeriert {
  margin: var(--s4) 0 0;
  padding-left: var(--s5);
}
.nummeriert li {
  margin-bottom: var(--s2);
  padding-left: var(--s1);
}

/* Folgt eine Ueberschrift direkt auf eine Liste, klebt sie sonst am Block
   darueber statt an dem, den sie einleitet — die Gliederung kippt optisch.
   Kein Werkzeug meldet das; gefunden im Selbst-Audit-Gate 30.07. */
.haken + h2,
.haken + h3,
.nein + h2,
.nein + h3,
.nummeriert + h2,
.nummeriert + h3 {
  margin-top: var(--s6);
}

.nein {
  list-style: none;
  margin: var(--s4) 0 0;
  padding: 0;
}
.nein li {
  position: relative;
  padding-left: var(--s5);
  margin-bottom: var(--s2);
}
.nein li::before {
  content: '';
  position: absolute;
  left: 0.05rem;
  top: 0.72em;
  width: 0.7rem;
  height: 2px;
  background: var(--rahmen-stark);
}

/* ---------- Ablauf ---------- */
.ablauf {
  counter-reset: schritt;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.ablauf > li {
  counter-increment: schritt;
  max-width: none;
  padding-top: var(--s4);
  border-top: 3px solid var(--akzent);
}
.ablauf > li::before {
  content: counter(schritt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  margin-bottom: var(--s3);
  border-radius: 50%;
  background: var(--aktion);
  color: var(--weiss);
  font-size: 0.92rem;
  font-weight: 700;
}
.ablauf h3 {
  margin-bottom: var(--s1);
}
.ablauf p {
  font-size: 0.96rem;
  margin-bottom: var(--s1);
}
.ablauf .dauer {
  font-size: 0.88rem;
  color: var(--text-leise);
}

/* ---------- Grafiken ---------- */
.grafik {
  margin: 0;
  background: var(--weiss);
  border: 1px solid var(--rahmen);
  border-radius: var(--radius);
  padding: var(--s5);
  box-shadow: var(--schatten);
}
.grafik svg {
  display: block;
  width: 100%;
  height: auto;
}
.grafik figcaption {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--rahmen);
  font-size: 0.88rem;
  color: var(--text-leise);
}
.dunkel .grafik {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}
.dunkel .grafik figcaption {
  color: var(--auf-dunkel-leise);
  border-top-color: rgba(255, 255, 255, 0.16);
}

/* ---------- Befund-Beispiel ---------- */
.befund {
  margin: var(--s6) 0 0;
  padding: var(--s5);
  background: var(--weiss);
  border: 1px solid var(--rahmen);
  border-left: 4px solid var(--akzent);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.befund p:last-child {
  margin-bottom: 0;
}
.befund figcaption {
  margin-top: var(--s4);
  font-size: 0.88rem;
  color: var(--text-leise);
}

/* ---------- FAQ ---------- */
.faq details {
  border-bottom: 1px solid var(--rahmen);
}
.faq details:first-of-type {
  border-top: 1px solid var(--rahmen);
}
.faq summary {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 44px;
  padding: var(--s4) 0;
  font-weight: 600;
  font-size: 1.02rem;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::before {
  content: '';
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--aktion);
  border-bottom: 2px solid var(--aktion);
  transform: rotate(45deg);
  margin-top: -0.2rem;
}
.faq details[open] summary::before {
  transform: rotate(-135deg);
  margin-top: 0.2rem;
}
.faq .antwort {
  padding: 0 0 var(--s5) var(--s5);
}

/* ---------- Kontakt ---------- */
.kontakt {
  list-style: none;
  margin: var(--s6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.kontakt > li {
  max-width: none;
}
.kontakt .art {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-bottom: var(--s1);
}
.dunkel .kontakt .art {
  color: var(--auf-dunkel-leise);
}
.kontakt a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: 1.05rem;
  font-weight: 600;
}
.kontakt .hinweis {
  display: block;
  font-size: 0.87rem;
  color: var(--text-leise);
  margin-top: 0;
}
.dunkel .kontakt .hinweis {
  color: var(--auf-dunkel-leise);
}

/* ---------- Fuss ---------- */
.fuss {
  border-top: 1px solid var(--rahmen);
  padding-block: var(--s7) var(--s8);
  font-size: 0.92rem;
  color: var(--text-leise);
}
.fuss .huelle > * + * {
  margin-top: var(--s4);
}
.fuss ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.fuss a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}
.fuss p {
  max-width: var(--spalte);
}

/* ---------- Kontakt in der Kopfzeile (Rang 2) ----------
   Der staerkste Erstkontaktkanal gehoert auf jede Seite, nicht nur auf zwei. */
.kopf-kontakt {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}
.kopf-kontakt:hover {
  color: var(--aktion);
}
.kopf-kontakt .zeiten {
  font-weight: 400;
  color: var(--text-leise);
  font-size: 0.86rem;
}
@media (max-width: 40rem) {
  .kopf-kontakt .zeiten {
    display: none;
  }
}

/* ---------- Ausweg unter jedem Knopf (Rang 2) ---------- */
.ausweg {
  margin: var(--s3) 0 0;
  font-size: 0.9rem;
  color: var(--text-leise);
  max-width: 52ch;
}
.dunkel .ausweg {
  color: var(--auf-dunkel-leise);
}
.ausweg a {
  font-weight: 600;
}

/* ---------- Wer das macht (Rang 4) ---------- */
.person {
  border-left: 3px solid var(--akzent);
  padding-left: var(--s5);
  max-width: var(--spalte);
}
.person h2 {
  margin-bottom: var(--s3);
}

/* ---------- Der Satz zum Weitersagen (Rang 12) ---------- */
.merksatz {
  margin: var(--s4) 0 0;
  padding: var(--s5);
  background: rgba(255, 255, 255, 0.08);
  border-left: 4px solid #7fd4c6;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1.06rem;
  line-height: 1.5;
}
.merksatz p {
  max-width: none;
  margin: 0;
}
section:not(.dunkel) .merksatz {
  background: var(--flaeche);
  border-left-color: var(--aktion);
}

/* ---------- Arbeitsschritte (Rang 5) ---------- */
.schritte {
  counter-reset: sr;
  list-style: none;
  margin: var(--s4) 0 0;
  padding: 0;
}
.schritte > li {
  counter-increment: sr;
  position: relative;
  padding-left: var(--s7);
  margin-bottom: var(--s4);
  max-width: var(--spalte);
}
.schritte > li::before {
  content: counter(sr);
  position: absolute;
  left: 0;
  top: 0.05em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  background: var(--aktion);
  color: var(--weiss);
  font-size: 0.85rem;
  font-weight: 700;
}
.dunkel .schritte > li::before {
  background: #7fd4c6;
  color: #0e2438;
}

/* ---------- Ampel-PDF (Rang 1) ---------- */
.ampel-blatt {
  background: var(--weiss);
  border: 1px solid var(--rahmen-stark);
  border-radius: 4px;
  padding: var(--s5);
  box-shadow: var(--schatten);
  max-width: 30rem;
}
.ampel-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 2px solid var(--dunkel);
  margin-bottom: var(--s4);
}
.ampel-kopf strong {
  font-size: 1.05rem;
}
.ampel-kopf span {
  font-size: 0.8rem;
  color: var(--text-leise);
}
.ampel-zeile {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s3);
  align-items: start;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--rahmen);
  font-size: 0.92rem;
}
.ampel-zeile:last-of-type {
  border-bottom: 0;
}
.punkt {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  margin-top: 0.32em;
  flex: 0 0 auto;
}
.punkt-rot {
  background: #b3261e;
}
.punkt-gelb {
  background: #8a6100;
}
.punkt-gruen {
  background: var(--aktion);
}
.ampel-stufe {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ---------- Befundtabelle (Pruefbericht) ---------- */
.befundtabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin-top: var(--s4);
}
.befundtabelle caption {
  text-align: left;
  color: var(--text-leise);
  font-size: 0.88rem;
  margin-bottom: var(--s3);
}
.befundtabelle th,
.befundtabelle td {
  text-align: left;
  padding: var(--s3);
  border-bottom: 1px solid var(--rahmen);
  vertical-align: top;
}
.befundtabelle thead th {
  border-bottom: 2px solid var(--rahmen-stark);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}
.status::before {
  content: '';
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
}
.status-behoben::before {
  background: var(--aktion);
}
.status-offen::before {
  background: #8a6100;
}
.status-offen {
  color: #8a6100;
}

/* ---------- Quellenangaben (Rang 11) ---------- */
.quellen {
  list-style: none;
  margin: var(--s4) 0 0;
  padding: 0;
  font-size: 0.92rem;
}
.quellen li {
  margin-bottom: var(--s2);
  max-width: var(--spalte);
}
.quellen a {
  font-weight: 600;
}

/* ---------- Hilfen ---------- */
.eng {
  margin-top: var(--s4);
}
.weit {
  margin-top: var(--s6);
}
.textbreite {
  max-width: var(--spalte);
}
.leise {
  color: var(--text-leise);
}

.nur-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Hero-Szene: der Kunde, der nicht durchkommt ----------
   Bewegte Erklaerung ohne Videodatei und ohne JavaScript — reines CSS
   auf dem Inline-SVG. Kein Drittserver, wenige hundert Byte statt MB.

   Sie laeuft EINMAL in 4,2 s und bleibt dann stehen (forwards).
   Damit greift WCAG 2.2.2 (Pause, Stop, Hide) nicht: die Vorschrift
   gilt erst fuer Bewegung, die laenger als 5 s laeuft.

   prefers-reduced-motion braucht hier KEINE eigene Regel: die globale
   Regel unten drueckt jede Dauer auf 0,01 ms, und weil alle Keyframes
   mit forwards enden, steht dann sofort der Endzustand — drei Haken,
   der rote Schlusspunkt, kein Blinken. Das ist Absicht, nicht Zufall.

   Kontraste im Verlauf gerechnet (Nicht-Text, Mindestwert 3:1):
   #6E7C8B auf #F4F6F8 = 3.94:1 · #1D7268 auf #F4F6F8 = 5.30:1
   #B3261E auf #F4F6F8 = 6.03:1 · Weiss auf #6E7C8B  = 4.27:1        */

.szene .fokus {
  fill: none;
  stroke: #1d7268;
  stroke-width: 2.5;
  stroke-dasharray: 6 4;
  opacity: 0;
  animation: szene-fokus 4.2s linear forwards;
}

.szene .halt {
  fill: #6e7c8b;
}
.szene .halt-1 {
  animation: szene-halt-1 4.2s linear forwards;
}
.szene .halt-2 {
  animation: szene-halt-2 4.2s linear forwards;
}
.szene .halt-3 {
  animation: szene-halt-3 4.2s linear forwards;
}

.szene .haken {
  opacity: 0;
}
.szene .haken-1 {
  animation: szene-haken-1 4.2s linear forwards;
}
.szene .haken-2 {
  animation: szene-haken-2 4.2s linear forwards;
}
.szene .haken-3 {
  animation: szene-haken-3 4.2s linear forwards;
}

.szene .sperre {
  fill: #6e7c8b;
  animation: szene-sperre 4.2s linear forwards;
}
.szene .kreuz {
  opacity: 0;
  animation: szene-schluss 4.2s linear forwards;
}
.szene .schluss {
  opacity: 0;
  animation: szene-schluss 4.2s linear forwards;
}

/* Der Fokusrahmen wandert Station fuer Station nach unten und bleibt
   beim dritten Schritt stehen. Ab 61 % schlaegt er zweimal kurz nach
   Warnrot um, ohne sich zu bewegen: zweimal Tabulator gedrueckt,
   nichts passiert. Genau so verhaelt sich eine echte Tastatursperre —
   der Fokus ruckt nicht, er kommt gar nicht erst weiter.

   Warum Farbwechsel und nicht Ausblenden: Ein Aufblitzen ueber die
   Transparenz haette den Rahmen kurz auf 1.32:1 gedrueckt und damit
   unter den 3:1-Mindestwert fuer Nicht-Text. Beide Farben halten:
   #1D7268 = 5.30:1, #B3261E = 6.03:1 gegen #F4F6F8.
   Zwei Wechsel in 4,2 s liegen zudem weit unter der Drei-Blitze-
   Grenze aus WCAG 2.3.1.                                             */
@keyframes szene-fokus {
  0% {
    opacity: 0;
    transform: translateY(0);
    stroke: #1d7268;
  }
  4%,
  18% {
    opacity: 1;
    transform: translateY(0);
    stroke: #1d7268;
  }
  20%,
  38% {
    opacity: 1;
    transform: translateY(49px);
    stroke: #1d7268;
  }
  40%,
  61% {
    opacity: 1;
    transform: translateY(98px);
    stroke: #1d7268;
  }
  64%,
  66% {
    opacity: 1;
    transform: translateY(98px);
    stroke: #b3261e;
  }
  69%,
  71% {
    opacity: 1;
    transform: translateY(98px);
    stroke: #1d7268;
  }
  74%,
  76% {
    opacity: 1;
    transform: translateY(98px);
    stroke: #b3261e;
  }
  79%,
  100% {
    opacity: 1;
    transform: translateY(98px);
    stroke: #1d7268;
  }
}

@keyframes szene-halt-1 {
  0%,
  16% {
    fill: #6e7c8b;
  }
  19%,
  100% {
    fill: #1d7268;
  }
}
@keyframes szene-halt-2 {
  0%,
  36% {
    fill: #6e7c8b;
  }
  39%,
  100% {
    fill: #1d7268;
  }
}
@keyframes szene-halt-3 {
  0%,
  56% {
    fill: #6e7c8b;
  }
  59%,
  100% {
    fill: #1d7268;
  }
}

@keyframes szene-haken-1 {
  0%,
  17% {
    opacity: 0;
  }
  21%,
  100% {
    opacity: 1;
  }
}
@keyframes szene-haken-2 {
  0%,
  37% {
    opacity: 0;
  }
  41%,
  100% {
    opacity: 1;
  }
}
@keyframes szene-haken-3 {
  0%,
  57% {
    opacity: 0;
  }
  61%,
  100% {
    opacity: 1;
  }
}

@keyframes szene-sperre {
  0%,
  80% {
    fill: #6e7c8b;
  }
  88%,
  100% {
    fill: #b3261e;
  }
}
@keyframes szene-schluss {
  0%,
  82% {
    opacity: 0;
  }
  90%,
  100% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Hinweis-Band (09.09.2026) ----------
   Muster aus der Vorbild-Recherche vom 09.09.2026: eine schmale Nachrichtenzeile
   ganz oben, wie sie Compliance-Anbieter fuer Fristen und Neuigkeiten nutzen.
   Kontraste stehen in der Token-Tabelle oben: Weiss auf #1d1d1f = 16.83:1,
   #6ee7d4 auf #1d1d1f = 11.26:1. Kein JavaScript, nicht sticky — die Zeile
   scrollt weg, die Kopfzeile bleibt. Steht NACH dem Skip-Link im HTML. */
.hinweis-band {
  background: var(--dunkel);
  color: var(--weiss);
  font-size: 0.92rem;
}
.hinweis-band .huelle {
  padding-block: var(--s2);
}
.hinweis-band p {
  margin: 0;
  max-width: none;
  text-align: center;
}
.hinweis-band a {
  color: #6ee7d4;
  font-weight: 600;
}
.hinweis-band a:hover {
  color: var(--weiss);
}
.hinweis-band :focus-visible {
  outline-color: #7fd4c6;
}

/* Weisse Karten auf grauer Flaeche bekommen den weichen Schatten der Grafiken —
   dieselbe Tiefenstaffelung wie .grafik, keine neue Bedeutung: Trennung tragen
   weiterhin Abstand und Ueberschrift, die betonte Karte weiterhin ihr Rahmen. */
.flaeche .karte,
.karte-betont {
  box-shadow: var(--schatten);
}

/* ---------- Kompakter Kopf auf schmalen Bildschirmen (09.09.2026) ----------
   Befund aus dem Browser-Test: Auf 375 px nahm der Seitenkopf rund zwei
   Drittel der ersten Bildschirmhoehe ein, der Hero-CTA rutschte an die Falz.
   Der Markenzusatz und die Telefonzeile weichen auf Handys — die Nummer steht
   dort im Hero (Zweitlink) und im Fuss jeder Seite. */
@media (max-width: 40rem) {
  .marke-zusatz {
    display: none;
  }
  .kopf-kontakt {
    display: none;
  }
  .navi a {
    min-height: 40px;
    font-size: 0.92rem;
  }
  .navi ul {
    gap: 0 var(--s4);
  }
  .seitenkopf .huelle {
    padding-block: var(--s2);
  }
}

/* ---------- Druckansicht (09.09.2026) ----------
   Browser drucken ohne Hintergrundfarben: die dunklen Sektionen wuerden als
   weisser Text auf weissem Papier enden. Beim Druck bekommen sie dunkle Schrift,
   Bedienelemente ohne Papier-Nutzen verschwinden. */
@media print {
  .dunkel,
  .dunkel h2,
  .dunkel h3,
  .dunkel p,
  .dunkel li,
  .dunkel a,
  .dunkel .augenbraue,
  .dunkel .kopf-block > p {
    color: #1d1d1f;
    background: none;
  }
  .skip,
  .hinweis-band,
  .navi,
  .kopf-kontakt,
  .knopf,
  .knopf-zweit {
    display: none;
  }
}

/* ---------- Bildmarke im Seitenkopf (09.09.2026) ----------
   Nachbau von logo-A-hell-300.png als Inline-SVG (Ring #3A9E8C, Balken
   #0B211E) — Logofarben sind von den WCAG-Kontrastpflichten ausgenommen
   (Logos/Wortmarken, WCAG 1.4.3). Der Schriftzug daneben bleibt der Name. */
.marke {
  flex-direction: row;
  align-items: center;
  gap: var(--s3);
}
.marke-zeichen {
  width: 42px;
  height: 42px;
  flex: none;
}
.marke-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 40rem) {
  .marke-zeichen {
    width: 34px;
    height: 34px;
  }
}

/* ---------- Einblenden beim Scrollen (Fassung 2, 09.09.2026 nachts) ----------
   Felix' Safari kennt animation-timeline nicht — deshalb jetzt ueber einen
   kleinen Beobachter (einblenden.js, ~1 KB, eigener Host): laeuft in jedem
   Browser. Die Klasse .mit-einblendung setzt NUR das Skript — ohne JavaScript
   oder mit reduzierter Bewegung ist alles sofort sichtbar. */
@media (prefers-reduced-motion: no-preference) {
  .mit-einblendung .karte,
  .mit-einblendung .grafik,
  .mit-einblendung .kopf-block,
  .mit-einblendung .bildtext,
  .mit-einblendung .preisblock,
  .mit-einblendung .leistung,
  .mit-einblendung .merksatz,
  .mit-einblendung .befund,
  .mit-einblendung .zustand,
  .mit-einblendung .ablauf > li,
  .mit-einblendung .einordnung > div {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity 0.6s ease-out,
      transform 0.6s ease-out;
  }
  .mit-einblendung .sichtbar,
  .mit-einblendung .ablauf > li.sichtbar,
  .mit-einblendung .einordnung > div.sichtbar {
    opacity: 1;
    transform: none;
  }
  /* Kartenreihen kommen leicht versetzt — das "Einfliegen" wird sichtbar. */
  .mit-einblendung .raster > *:nth-child(2),
  .mit-einblendung .ablauf > li:nth-child(2) {
    transition-delay: 0.1s;
  }
  .mit-einblendung .raster > *:nth-child(3),
  .mit-einblendung .ablauf > li:nth-child(3) {
    transition-delay: 0.2s;
  }
  .mit-einblendung .raster > *:nth-child(4),
  .mit-einblendung .ablauf > li:nth-child(4) {
    transition-delay: 0.3s;
  }
  /* Die Messbalken wachsen, sobald sie im Bild sind. */
  .mit-einblendung .bildtext .balken-voll {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.1s ease-out 0.3s;
  }
  .mit-einblendung .bildtext.sichtbar .balken-voll {
    transform: scaleX(1);
  }
}

/* Karten reagieren auf den Zeiger — dezentes Anheben, kein Zirkus. */
@media (prefers-reduced-motion: no-preference) {
  .karte,
  .preisblock,
  .grafik {
    transition:
      transform 0.25s ease,
      box-shadow 0.25s ease;
  }
  .karte:hover,
  .preisblock:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }
}

/* Vier gleichrangige Karten brechen im auto-fit-Raster als 3+1 um — die
   vierte haengt allein unter der Reihe (Felix-Befund 10.09.). Als Paar-Raster
   stehen sie 2x2. */
@media (min-width: 62rem) {
  .raster-vier {
    grid-template-columns: 1fr 1fr;
  }
}