/*
  Produktseite /start der FinSales Engine.
  Handgeschrieben, ohne Tailwind, ohne Skript, ohne fremde Schriften.
  Die Content-Security-Policy fuer /start (vercel.json) erlaubt nur diese Datei
  und eigene Bilder; <style>-Bloecke und style=""-Attribute wuerden verworfen.

  Farben: dieselben Marken-Tokens wie die App, Werte aus src/index.css (:root),
  Stand origin/main 89ef1f91. Bei einer Markenaenderung beide Stellen anpassen.
  Schriften: Systemschriften, bis Inter und Plus Jakarta Sans selbst gehostet
  werden (Entscheidung offen, verlangt einen Download).

  Bewegung: nur CSS, ganz unten unter "Bewegung", ausschliesslich innerhalb von
  prefers-reduced-motion: no-preference. Ohne sie ist alles sofort sichtbar.
  FALLE: overflow: hidden macht ein Element zum Scroll-Container, die
  View-Timeline seiner Kinder haengt dann daran und bleibt am Anfang stehen.
  Deshalb overflow: clip (mit hidden als Rueckfall fuer alte Browser).
*/

:root {
  --background: 224 50% 8%;
  --foreground: 45 30% 96%;
  --card: 224 45% 12%;
  --popover: 224 50% 11%;
  --primary: 41 90% 60%;
  --primary-foreground: 224 62% 10%;
  --primary-glow: 45 95% 70%;
  --secondary: 224 35% 18%;
  --muted-foreground: 220 15% 65%;
  --accent: 41 50% 22%;
  --accent-foreground: 45 90% 75%;
  --border: 224 30% 22%;
  --ring: 41 90% 60%;
  --sidebar-background: 224 60% 6%;
  --radius: 0.875rem;

  /* Nur auf dieser Seite: Fliesstext eine Stufe weicher als foreground (Kontrast 12:1 auf background) */
  --foreground-soft: 222 20% 82%;

  --gradient-gold: linear-gradient(135deg, hsl(45 95% 70%) 0%, hsl(38 90% 55%) 100%);
  --gradient-text-gold: linear-gradient(120deg, hsl(45 95% 75%), hsl(38 90% 60%));
  --gradient-card: linear-gradient(180deg, hsl(224 45% 14% / 0.85) 0%, hsl(224 50% 11% / 0.85) 100%);
  --shadow-gold: 0 10px 30px -10px hsl(41 90% 60% / 0.55);
  --shadow-tief: 0 30px 60px -20px hsl(224 80% 2% / 0.85);

  --schrift: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Grundlagen ---------- */

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

/* Platz fuer den klebenden Kopf beim Scrollen zu Ankern UND zum Tastaturfokus
   (WCAG 2.2, 2.4.11). scroll-margin an [id] wirkte nur auf Ankerspruenge,
   Umschalt+Tab schob Fragen ganz unter den Kopf (Gegenpruefung 17.09.2026).
   Unten dasselbe fuer die Demo-Leiste auf dem Handy. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 5.5rem;
  scroll-padding-bottom: 5.5rem;
}

@media (min-width: 640px) {
  html {
    scroll-padding-bottom: 0;
  }
}

body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--schrift);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

img {
  height: auto;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}

a {
  color: inherit;
}

sup {
  line-height: 0;
}

/* Die Ziffer selbst ist rund 9 mal 14 Pixel gross. Das ::after vergroessert
   nur die Trefferflaeche auf ueber 24 mal 24 Pixel (WCAG 2.2, 2.5.8), nicht das
   Schriftbild. Ohne das war der Sprung zur Fussnote auf dem Handy mit dem
   Finger kaum zu treffen (gemessen 18.09.2026). */
sup a {
  position: relative;
  padding-inline: 0.15em;
  color: hsl(var(--accent-foreground));
  font-size: 0.8em;
  font-weight: 700;
  text-decoration: none;
}

sup a::after {
  content: "";
  position: absolute;
  inset: -0.5rem;
}

:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 3px;
  border-radius: 6px;
}

.ikon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sprunglink {
  position: absolute;
  left: 1rem;
  top: -6rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 600;
  text-decoration: none;
}

.sprunglink:focus {
  top: 1rem;
}

.rahmen {
  width: 100%;
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 640px) {
  .rahmen {
    padding-inline: 1.5rem;
  }
}

@media (min-width: 1080px) {
  .rahmen {
    padding-inline: 2rem;
  }
}

.gold {
  color: hsl(var(--primary));
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gold {
    background: var(--gradient-text-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

@media (forced-colors: active) {
  .gold {
    background: none;
    -webkit-text-fill-color: currentColor;
  }
}

.platzhalter__marke {
  display: inline-block;
  justify-self: start;
  padding: 0.125rem 0.5rem;
  border: 1px dashed hsl(var(--primary));
  border-radius: 0.375rem;
  color: hsl(var(--primary));
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.6;
  text-transform: uppercase;
}

/* ---------- Knoepfe und Links ---------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  max-width: 100%;
  min-height: 3.25rem;
  padding: 0.8rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.knopf--haupt {
  color: hsl(var(--primary-foreground));
  background: var(--gradient-gold);
  box-shadow: var(--shadow-gold), inset 0 1px 0 hsl(0 0% 100% / 0.35);
}

.knopf--haupt:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 40px -10px hsl(41 90% 60% / 0.75), inset 0 1px 0 hsl(0 0% 100% / 0.35);
}

.knopf--haupt:active {
  transform: translateY(0) scale(0.98);
}

.knopf--klein {
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border-radius: 0.625rem;
  font-size: 0.9375rem;
}

.knopf__pfeil {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.knopf--haupt:hover .knopf__pfeil {
  transform: translateX(3px);
}

.textlink {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: hsl(var(--foreground-soft));
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: hsl(var(--primary) / 0.5);
  text-underline-offset: 4px;
}

.textlink:hover {
  color: hsl(var(--accent-foreground));
  text-decoration-color: hsl(var(--primary));
}

.cta {
  display: grid;
  justify-items: start;
  gap: 0.625rem;
  margin-top: 2.5rem;
}

.cta--mitte {
  justify-items: center;
  text-align: center;
}

.cta .knopf {
  width: 100%;
  max-width: 24rem;
}

.mikrotext {
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
  line-height: 1.5;
}

@media (min-width: 640px) {
  .cta .knopf {
    width: auto;
  }
}

/* ---------- Kopf ---------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: hsl(var(--background) / 0.82);
  border-bottom: 1px solid hsl(var(--border) / 0.6);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
}

.kopf__innen {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4rem;
}

.kopf__marke {
  display: inline-flex;
  flex-shrink: 0;
}

.kopf__marke img {
  width: auto;
  height: 2.125rem;
}

.kopf__nav {
  display: none;
  gap: 2rem;
  margin-left: 2.5rem;
  font-size: 0.9375rem;
}

.kopf__nav a {
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  transition: color 0.2s ease;
}

.kopf__nav a:hover {
  color: hsl(var(--foreground));
}

.kopf__aktionen {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: auto;
}

.kopf__anmelden {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 0.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.kopf__anmelden:hover {
  color: hsl(var(--primary));
}

/* Unter 640px steht der Knopf in der Demo-Leiste am unteren Rand. */
.kopf__demo {
  display: none;
}

@media (min-width: 640px) {
  .kopf__demo {
    display: inline-flex;
  }
}

@media (min-width: 1080px) {
  .kopf__innen {
    min-height: 4.5rem;
  }

  .kopf__nav {
    display: flex;
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding-block: 1.75rem 3rem;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(hsl(var(--border) / 0.35) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--border) / 0.35) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 75% 0%, black 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 80% 70% at 75% 0%, black 0%, transparent 70%);
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -22rem;
  right: -18rem;
  width: 60rem;
  height: 44rem;
  background: radial-gradient(closest-side, hsl(var(--primary) / 0.16), transparent);
  pointer-events: none;
}

.hero__raster {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.dachzeile {
  position: relative;
  margin-bottom: 0.875rem;
  padding-left: 2.25rem;
  color: hsl(var(--accent-foreground));
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  line-height: 1.5;
  text-transform: uppercase;
}

.dachzeile::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 0;
  width: 1.5rem;
  height: 1px;
  background: hsl(var(--primary));
}

.hero h1 {
  font-size: clamp(1.875rem, 1.2rem + 3.4vw, 3.625rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  -webkit-hyphens: manual;
  hyphens: manual;
}

.hero__unterzeile {
  max-width: 36rem;
  margin-top: 1.25rem;
  color: hsl(var(--foreground-soft));
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
}

/* Handy: Knopf, Mikrotext, Preise untereinander. Ab 640px Preise neben dem Knopf. */
.hero__aktion {
  display: grid;
  gap: 0.5rem 1.5rem;
  margin-top: 1.5rem;
}

.hero__aktion .knopf {
  width: 100%;
}

.hero__aktion .textlink {
  justify-self: center;
  margin-top: -0.25rem;
}

.hero__beweis {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  margin-top: 0.75rem;
  color: hsl(var(--foreground-soft));
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Satz und Fussnotenziffer zusammen als EIN Flex-Element. Sonst wird der
   nackte Textknoten zum anonymen Flex-Element und die Ziffer zu einem zweiten:
   Beim Umbruch stand sie allein am rechten Rand statt hinter dem letzten Wort
   (gemessen bei 390 px, 18.09.2026). */
.hero__satz {
  min-width: 0;
}

.hero__punkt {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: hsl(var(--primary));
  box-shadow: 0 0 0 4px hsl(var(--primary) / 0.2);
  transform: translateY(-1px);
}

.hero__bild {
  position: relative;
}

/* Goldener Rand. Der Winkel laeuft unter "Bewegung" einmal um, sonst steht er. */
@property --winkel {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.hero__bild::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--radius) + 1px);
  background: conic-gradient(from calc(var(--winkel) + 300deg), hsl(var(--primary) / 0.7), transparent 22%, transparent 50%, hsl(var(--primary) / 0.3) 72%, hsl(var(--primary) / 0.7));
}

@media (min-width: 640px) {
  .hero {
    padding-block: 3rem 4rem;
  }

  .dachzeile {
    margin-bottom: 1.25rem;
    letter-spacing: 0.06em;
  }

  .hero__aktion {
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: center;
    margin-top: 2.25rem;
  }

  .hero__aktion .textlink {
    grid-area: 1 / 2;
    justify-self: start;
    margin-top: 0;
  }

  .hero__mikro {
    grid-column: 1 / -1;
  }

  .hero__beweis {
    margin-top: 1.25rem;
  }
}

@media (min-width: 1080px) {
  .hero {
    padding-block: 5rem 4.5rem;
  }

  .hero__raster {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: 4rem;
  }

  .dachzeile {
    letter-spacing: 0.04em;
  }
}

/* ---------- Fenster und Abbildungen ---------- */

.fenster {
  position: relative;
  overflow: hidden;
  overflow: clip;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--popover));
  background-clip: padding-box;
  box-shadow: var(--shadow-tief), 0 0 80px -30px hsl(var(--primary) / 0.25);
}

.fenster--hero {
  border-color: transparent;
}

.fenster__leiste {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  height: 1.75rem;
  padding-inline: 0.75rem;
  background: hsl(var(--sidebar-background));
  border-bottom: 1px solid hsl(var(--border));
}

.fenster__leiste span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: hsl(var(--border));
}

.fenster img,
.telefon img {
  width: 100%;
}

.fenster--dialog {
  border-radius: 0.75rem;
  border-color: hsl(var(--primary) / 0.25);
  box-shadow: 0 24px 60px -12px hsl(224 80% 2% / 0.9);
}

.telefon {
  overflow: hidden;
  overflow: clip;
  border: 4px solid hsl(var(--secondary));
  border-radius: 1.5rem;
  background: hsl(var(--sidebar-background));
  box-shadow: 0 24px 60px -12px hsl(224 80% 2% / 0.9), 0 0 0 1px hsl(var(--border));
}

.abbildung {
  position: relative;
}

/* Unter 900px stehen Haupt- und Nebenbild untereinander. Ueberlagert verdeckte
   das Nebenbild auf dem Handy rund die Haelfte des Hauptbilds, und beide waren
   zu klein zum Lesen (Gegenpruefung 17.09.2026). */
.abbildung__neben {
  margin-top: 1rem;
}

.abbildung--dialog .abbildung__neben {
  max-width: 32rem;
}

.abbildung--telefon .abbildung__neben {
  width: 15rem;
  max-width: 100%;
  margin-inline: auto;
}

@media (min-width: 900px) {
  .abbildung__neben {
    position: absolute;
    margin-top: 0;
  }

  .abbildung--dialog {
    padding-right: 12%;
    padding-bottom: 14%;
  }

  .abbildung--dialog .abbildung__neben {
    right: 0;
    bottom: 0;
    width: 46%;
    max-width: none;
  }

  .abbildung--telefon {
    padding-left: 16%;
    padding-bottom: 14%;
  }

  .abbildung--telefon .abbildung__neben {
    bottom: 0;
    left: 0;
    width: 30%;
    margin-inline: 0;
  }

  .telefon {
    border-width: 6px;
    border-radius: 1.75rem;
  }
}

/* ---------- Abschnitte ---------- */

.abschnitt {
  padding-block: 4.5rem;
}

.abschnitt__kopf {
  max-width: 44rem;
  margin-bottom: 2.5rem;
}

.abschnitt__kopf--mitte {
  margin-inline: auto;
  text-align: center;
}

h2 {
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.625rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.einleitung {
  margin-top: 1rem;
  color: hsl(var(--foreground-soft));
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
}

.einleitung a,
.frage__antwort a {
  color: hsl(var(--accent-foreground));
  text-underline-offset: 3px;
}

.karte {
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  background: var(--gradient-card);
  transition: border-color 0.2s ease;
}

@media (hover: hover) {
  .karte:hover {
    border-color: hsl(var(--primary) / 0.4);
  }
}

.abschnitt--bereiche,
.abschnitt--vergleich,
.abschnitt--presse,
.abschnitt--fragen {
  border-block: 1px solid hsl(var(--border) / 0.6);
  background: hsl(var(--sidebar-background));
}

@media (min-width: 900px) {
  .abschnitt {
    padding-block: 6.5rem;
  }

  .abschnitt__kopf {
    margin-bottom: 3.5rem;
  }
}

/* ---------- Belege ---------- */

.belege {
  padding-bottom: 3.5rem;
}

.belege__liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* minmax(0, 1fr) und der Umbruch sind Pflicht, nicht Geschmack: Bei 320 und
   360 px ist eine Kachel rund 140 px breit, "Versicherungsagenturen" ist
   breiter. Ohne beides schob die Kachel die ganze Seite waagerecht auf
   (gemessen 343 px Inhalt bei 320 px Fenster, 17.09.2026). hyphens: auto
   trennt mit lang="de" an den richtigen Stellen, break-word faengt den Rest. */
.beleg {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0.5rem;
  padding: 1.25rem 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  background: var(--gradient-card);
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

.beleg::before {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline: 1rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.8), transparent);
}

.beleg__wert {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.beleg--text .beleg__wert {
  font-size: clamp(1.125rem, 1rem + 0.8vw, 1.5rem);
}

.beleg__text {
  color: hsl(var(--foreground-soft));
  font-size: 0.9375rem;
  line-height: 1.45;
}

.beleg--platzhalter {
  border-style: dashed;
  border-color: hsl(var(--primary) / 0.5);
  background: none;
}

.belege__fussnoten {
  display: grid;
  gap: 0.375rem;
  max-width: 60rem;
  margin: 1.5rem 0 0;
  padding-left: 1.25rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
  line-height: 1.5;
}

.belege__fussnoten li::marker {
  color: hsl(var(--primary));
}

.belege__hinweis {
  margin-top: 0.5rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
}

@media (min-width: 900px) {
  .belege__liste {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }

  .beleg {
    padding: 1.5rem;
  }
}

/* ---------- Alltag ---------- */

.alltag__karten {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.alltag__karte {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}

.alltag__karte .symbol {
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1.125rem;
  padding: 0.625rem;
  border: 1px solid hsl(var(--primary) / 0.25);
  border-radius: 0.75rem;
  background: hsl(var(--accent) / 0.6);
  color: hsl(var(--primary));
}

.alltag__karte h3 {
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
}

.alltag__karte p {
  flex: 1;
  color: hsl(var(--muted-foreground));
}

.alltag__loesung {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  margin-top: 0.5rem;
  color: hsl(var(--accent-foreground));
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.alltag__loesung:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.alltag__pfeil {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}

.alltag__loesung:hover .alltag__pfeil {
  transform: translateX(3px);
}

.agitation {
  max-width: 46rem;
  margin: 3.5rem auto 0;
  padding: 2rem 1.25rem;
  border: 1px solid hsl(var(--border));
  border-radius: 1.25rem;
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, hsl(var(--primary) / 0.09), transparent 70%),
    hsl(var(--sidebar-background));
  text-align: center;
}

.agitation h3 {
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
}

.agitation p {
  margin-top: 1rem;
  color: hsl(var(--foreground-soft));
  font-size: 1.0625rem;
}

.agitation .agitation__frage {
  color: hsl(var(--foreground));
  font-weight: 600;
}

.alltag__schluss {
  position: relative;
  max-width: 46rem;
  margin: 3rem auto 0;
  padding-top: 2.5rem;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.4rem);
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
}

.alltag__schluss::before,
.zwischenruf::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 3rem;
  height: 2px;
  background: hsl(var(--primary));
  transform: translateX(-50%);
}

@media (min-width: 640px) {
  .alltag__karten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .alltag__karte:last-child {
    grid-column: 1 / -1;
  }

  .agitation {
    padding: 2.5rem 3rem;
  }
}

@media (min-width: 1080px) {
  .alltag__karten {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .alltag__karte {
    grid-column: span 2;
    padding: 1.75rem;
  }

  .alltag__karte:nth-child(n + 4) {
    grid-column: span 3;
  }
}

/* ---------- Bereiche ---------- */

.abschnitt--bereiche {
  border-bottom: 0;
  background: linear-gradient(180deg, hsl(var(--sidebar-background)) 0%, hsl(var(--background)) 22rem);
}

.bereichsnav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}

.bereichsnav a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  background: hsl(var(--card) / 0.6);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.bereichsnav a:hover {
  border-color: hsl(var(--primary) / 0.6);
}

.bereichsnav__nr {
  color: hsl(var(--primary));
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.bereich {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  padding-block: 3rem;
}

.bereich + .bereich {
  border-top: 1px solid hsl(var(--border) / 0.5);
}

.kennzeichen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.kennzeichen__name,
.kennzeichen__zusatz {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  line-height: 1.5;
}

.kennzeichen__name {
  border: 1px solid hsl(var(--primary) / 0.3);
  background: hsl(var(--accent) / 0.7);
  color: hsl(var(--accent-foreground));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kennzeichen__zusatz {
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground-soft));
  font-weight: 600;
}

.bereich h3 {
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  line-height: 1.2;
}

/* Lesbare Zeilenlaenge, solange der Bereich einspaltig ist (unter 900px). */
.bereich__text {
  max-width: 35rem;
}

.bereich__einleitung {
  margin-top: 1rem;
  color: hsl(var(--foreground-soft));
  font-size: 1.0625rem;
}

.haken {
  display: grid;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.haken li {
  position: relative;
  padding-left: 2rem;
  line-height: 1.55;
}

.haken li::before {
  content: "";
  position: absolute;
  top: 0.2em;
  left: 0;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid hsl(var(--primary) / 0.35);
  border-radius: 50%;
  background: hsl(var(--accent) / 0.8);
}

.haken li::after {
  content: "";
  position: absolute;
  top: calc(0.2em + 0.28rem);
  left: 0.45rem;
  width: 0.35rem;
  height: 0.6rem;
  border: solid hsl(var(--primary));
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.mehr {
  margin-top: 0.75rem;
}

.mehr summary {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  cursor: pointer;
  color: hsl(var(--accent-foreground));
  font-size: 0.9375rem;
  font-weight: 600;
  list-style: none;
}

.mehr summary::-webkit-details-marker {
  display: none;
}

.mehr summary::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.mehr[open] summary::after {
  transform: translateY(2px) rotate(225deg);
}

.mehr .haken {
  margin-top: 0.5rem;
}

.kleingedruckt {
  margin-top: 1.5rem;
  padding: 0.875rem 1rem;
  border-left: 2px solid hsl(var(--primary) / 0.6);
  border-radius: 0 0.5rem 0.5rem 0;
  background: hsl(var(--card) / 0.5);
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
}

.team {
  margin-top: 3rem;
  padding: 2rem 1.5rem;
}

.team h3 {
  margin-bottom: 1.5rem;
  font-size: 1.375rem;
}

.team__punkte {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.team__punkte li {
  padding-left: 1rem;
  border-left: 2px solid hsl(var(--primary) / 0.5);
  color: hsl(var(--foreground-soft));
}

.team__punkte strong {
  color: hsl(var(--foreground));
  font-weight: 650;
}

.zwischenruf {
  position: relative;
  margin-top: 3.5rem;
  padding-top: 2rem;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 600;
  text-align: center;
}

.zwischenruf + .cta {
  margin-top: 1.5rem;
}

@media (min-width: 900px) {
  .bereich {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 4.5rem;
    padding-block: 4.5rem;
  }

  .bereich--gespiegelt {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }

  .bereich--gespiegelt .bereich__text {
    order: 2;
  }

  .team {
    margin-top: 4rem;
    padding: 2.5rem 3rem;
  }

  .team__punkte {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
}

/* ---------- Vergleich ----------
   Unter 900px wird jede Zeile zur Karte. Jede Zelle traegt ihren Spaltennamen
   als echten Text (.vergleich__spalte), ab 900px nur fuer Bildschirmleser. */

.vergleich {
  display: block;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  text-align: left;
}

.vergleich thead {
  display: none;
}

.vergleich tbody {
  display: grid;
  gap: 0.75rem;
}

.vergleich tr,
.vergleich th,
.vergleich td {
  display: block;
}

.vergleich tbody tr {
  overflow: hidden;
  overflow: clip;
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  background: var(--gradient-card);
}

.vergleich tbody th {
  padding: 1rem 1rem 0.625rem;
  font-size: 1rem;
  font-weight: 650;
}

.vergleich td {
  display: grid;
  grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
  align-items: start;
  column-gap: 0.75rem;
  padding: 0.625rem 1rem;
  border-top: 1px solid hsl(var(--border) / 0.6);
}

.vergleich__spalte {
  grid-row: 1 / 3;
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
}

.vergleich td.vergleich__wir {
  background: hsl(var(--accent) / 0.35);
}

.vergleich__wir .vergleich__spalte {
  color: hsl(var(--accent-foreground));
  font-weight: 650;
}

.stand {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 650;
}

.stand::before {
  content: "";
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  border: 1px solid hsl(var(--border));
  border-radius: 50%;
  background: linear-gradient(hsl(var(--muted-foreground)), hsl(var(--muted-foreground))) center / 0.5rem 2px no-repeat;
}

.stand--ja::before {
  border-color: hsl(var(--primary));
  background: var(--gradient-gold);
}

.stand--ja::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.36rem);
  left: 0.4rem;
  width: 0.32rem;
  height: 0.58rem;
  border: solid hsl(var(--primary-foreground));
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.stand--teilweise::before {
  border-color: hsl(var(--primary) / 0.7);
  background: linear-gradient(90deg, hsl(var(--primary)) 50%, transparent 50%);
}

.stand--nein {
  color: hsl(var(--muted-foreground));
}

.vergleich__detail {
  grid-column: 2;
  color: hsl(var(--foreground-soft));
  font-size: 0.875rem;
}

.vergleich__fussnote {
  max-width: 48rem;
  margin: 1.25rem auto 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
  text-align: center;
}

@media (min-width: 900px) {
  .vergleich {
    display: table;
    table-layout: fixed;
  }

  .vergleich thead {
    display: table-header-group;
  }

  .vergleich tbody {
    display: table-row-group;
  }

  .vergleich tr,
  .vergleich tbody tr {
    display: table-row;
    border: 0;
    background: none;
  }

  .vergleich th,
  .vergleich td,
  .vergleich tbody th {
    display: table-cell;
    padding: 1rem 1.25rem;
    border-top: 1px solid hsl(var(--border) / 0.6);
    vertical-align: top;
  }

  .vergleich thead th {
    padding-block: 1.25rem;
    border-top: 0;
    color: hsl(var(--foreground-soft));
    font-size: 0.9375rem;
    font-weight: 650;
  }

  .vergleich thead th:first-child {
    width: 28%;
  }

  .vergleich tbody th {
    font-size: 0.9375rem;
    font-weight: 600;
  }

  .vergleich__spalte {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .vergleich__detail {
    display: block;
    margin-top: 0.25rem;
  }

  .vergleich .vergleich__wir {
    border-inline: 1px solid hsl(var(--primary) / 0.45);
    background: hsl(var(--accent) / 0.3);
  }

  .vergleich thead .vergleich__wir {
    border-top: 1px solid hsl(var(--primary) / 0.45);
    border-radius: 1rem 1rem 0 0;
    color: hsl(var(--accent-foreground));
    box-shadow: 0 -20px 60px -30px hsl(var(--primary) / 0.5);
  }

  .vergleich tbody tr:last-child .vergleich__wir {
    border-bottom: 1px solid hsl(var(--primary) / 0.45);
    border-radius: 0 0 1rem 1rem;
  }

  @media (hover: hover) {
    .vergleich tbody tr:hover > * {
      background-color: hsl(var(--card) / 0.5);
    }
  }
}

/* ---------- Ablauf ---------- */

.schritte {
  display: grid;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.schritt {
  position: relative;
  padding-left: 4rem;
}

.schritt__nr {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid hsl(var(--primary) / 0.6);
  border-radius: 50%;
  background: hsl(var(--background));
  box-shadow: 0 0 24px -6px hsl(var(--primary) / 0.5);
  color: hsl(var(--primary));
  font-weight: 700;
}

.schritt:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 2.75rem;
  bottom: -2rem;
  left: 1.375rem;
  width: 1px;
  background: linear-gradient(hsl(var(--primary) / 0.5), hsl(var(--border)));
}

.schritt h3 {
  margin-bottom: 0.375rem;
  padding-top: 0.55rem;
  font-size: 1.125rem;
}

.schritt p {
  color: hsl(var(--muted-foreground));
}

@media (min-width: 900px) {
  .schritte {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .schritt {
    padding-top: 4.25rem;
    padding-left: 0;
  }

  .schritt:not(:last-child)::before {
    top: 1.375rem;
    right: -2rem;
    bottom: auto;
    left: 3.25rem;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, hsl(var(--primary) / 0.5), hsl(var(--border)));
  }

  .schritt h3 {
    padding-top: 0;
  }
}

/* ---------- Presse ---------- */

/* Presse als Ausschnitt, ohne Logo und ohne Link. "Anzeige" steht lesbar als
   Marke auf jedem Bild und am Anfang jeder Bildunterschrift, die Ueberschrift
   sagt es noch einmal (siehe PRESSE in inhalt.mjs). Kein Goldrahmen, damit die
   Ausschnitte nicht wie ein Siegel wirken.

   EIGENER ABSCHNITT SEIT 26.09.2026: Vorher stand die Leiste in der Textspalte
   des Gruenderbereichs und trennte sich von den Fakten mit einer Linie. Jetzt
   steht sie mittig fuer sich, die Trennung leisten die Abschnittsraender. Die
   Breiten bleiben unveraendert (42rem, ab 900px 28rem), sonst stimmten die
   sizes-Angaben in seite.mjs nicht mehr. Das Gruender-CSS (Raster, Foto und
   Fotoplatzhalter, Name, Geschichte, Faktenliste) ist mit dem Abschnitt
   entfallen; kommt er zurueck, kommt es aus der Versionsgeschichte.

   Mittig ueber `margin-inline: auto` an den Bildern und `text-align` am Titel,
   NICHT ueber ein Raster mit `justify-items: center` an der Leiste: Die Bilder
   tragen `width: 100%`, in einem mittig gestellten Rasterelement waere die
   Breite ihre Eigenbreite (800 px je Ausschnitt, gekappt bei 42rem), und die
   Seite liefe auf dem Handy seitwaerts ueber. */
.presseleiste__titel {
  margin: 0 0 1rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

/* Zwei Spalten auf jeder Breite (18.09.2026): Die Ausschnitte stehen im
   Hochformat 4:5, untereinander kosteten sie auf dem Handy rund 1.000 Pixel. */
.presseleiste__bilder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  max-width: 42rem;
  margin-inline: auto;
}

.presse {
  position: relative;
  margin: 0;
}

.presse__marke {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  background: hsl(var(--background));
  font-size: 0.75rem;
  font-weight: 700;
}

/* Solange die Aufnahme fehlt, traegt der Ausschnitt eine sichtbare Marke
   (Conversion-Pruefung 18.09.2026, damals dieselbe wie am Gruenderfoto). Ohne
   sie sah ein Platzhalterbild mit richtigem Dateinamen wie ein fertiger Beleg
   aus. */
.presse--platzhalter .platzhalter__marke {
  margin-bottom: 0.5rem;
}

.presse--platzhalter .presse__bild {
  border-style: dashed;
  border-color: hsl(var(--primary) / 0.5);
}

.presse__bild {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  background: hsl(var(--popover));
  object-fit: cover;
}

/* Keine automatische Trennung: Sie trennte das Pflichtwort "Anzeige" (An- /
   zeige) bei 320 bis 350, 535 bis 665 und 915 bis 1110 px. */
.presse figcaption {
  margin-top: 0.625rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
  overflow-wrap: break-word;
  hyphens: manual;
}

/* Zwei Zitatleisten mit derselben Gestalt, aber getrennten Daten: Kundenstimmen
   ueber die Software (KUNDENSTIMMEN, nur mit Freigabe sichtbar) und die
   oeffentlichen Google-Rezensionen ueber die Beratung (BEWERTUNGEN, seit
   26.09.2026). Das Polster stand bis dahin nirgends, die Kundenstimmen waren
   also unbemerkt ohne Innenabstand gebaut; sie sind nie sichtbar gewesen. */
.stimmen,
.bewertungen {
  display: grid;
  gap: 1rem;
  max-width: 62rem;
  margin: 2rem auto 0;
  padding: 0;
  list-style: none;
}

.stimme,
.bewertung {
  padding: 1.75rem;
}

.stimme figure,
.stimme blockquote,
.bewertung figure,
.bewertung blockquote {
  margin: 0;
}

.stimme figcaption,
.stimmen__hinweis,
.bewertung figcaption,
.bewertungen__hinweis {
  margin-top: 1rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
}

.stimme__zusatz,
.bewertung__zusatz {
  display: block;
}

.bewertung figcaption {
  color: hsl(var(--foreground-soft));
}

.stimmen__hinweis,
.bewertungen__hinweis {
  max-width: 62rem;
  margin-inline: auto;
  text-align: center;
}

@media (min-width: 900px) {
  .stimmen,
  .bewertungen {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
}

/* Die Leiste auf breiten Bildschirmen schmaler (18.09.2026): Sonst waren die
   Kacheln das groesste Element des Abschnitts. 28rem passt zu sizes in
   seite.mjs. */
@media (min-width: 900px) {
  .presseleiste__bilder {
    max-width: 28rem;
  }
}

/* ---------- Pakete ---------- */

.pakete {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.paket {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
}

.paket--hervor {
  border-color: hsl(var(--primary) / 0.5);
  box-shadow: 0 0 70px -35px hsl(var(--primary) / 0.6);
}

.paket__abzeichen {
  align-self: flex-start;
  margin-bottom: 0.75rem;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background: var(--gradient-gold);
  color: hsl(var(--primary-foreground));
  font-size: 0.75rem;
  font-weight: 700;
}

.paket__name {
  font-size: 1.25rem;
}

.paket__preis {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.625rem;
  margin-top: 1rem;
}

.paket__betrag {
  font-size: 2.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.paket__zeitraum {
  color: hsl(var(--muted-foreground));
  font-size: 0.9375rem;
}

.paket__umfang {
  display: grid;
  gap: 0.375rem;
  margin: 1.25rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid hsl(var(--border));
  color: hsl(var(--accent-foreground));
  font-size: 0.9375rem;
  font-weight: 600;
  list-style: none;
}

.paket__einleitung {
  margin-top: 1.25rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.9375rem;
}

.paket .haken {
  margin-top: 1.25rem;
  font-size: 0.9375rem;
}

.paket__einleitung + .haken {
  margin-top: 0.75rem;
}

.sicherheit {
  max-width: 34rem;
  margin: 2.25rem auto 0;
  font-size: 0.9375rem;
}

.pakete__link {
  margin-top: 0.25rem;
  text-align: center;
}

.pakete__kleingedruckt {
  max-width: 48rem;
  margin: 1.75rem auto 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
  text-align: center;
}

@media (min-width: 900px) {
  .pakete {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sicherheit {
    grid-template-columns: repeat(auto-fit, minmax(0, max-content));
    justify-content: center;
    gap: 0.75rem 2.5rem;
    max-width: none;
  }
}

/* ---------- Fragen ---------- */

.fragen {
  display: grid;
  gap: 2.5rem;
}

.fragen__kopf .cta {
  margin-top: 1.75rem;
}

.frage {
  border-bottom: 1px solid hsl(var(--border));
}

.frage:first-child {
  border-top: 1px solid hsl(var(--border));
}

.frage summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 2.75rem;
  padding: 1.25rem 0;
  cursor: pointer;
  font-size: 1.0625rem;
  font-weight: 650;
  line-height: 1.4;
  list-style: none;
  transition: color 0.2s ease;
}

.frage summary::-webkit-details-marker {
  display: none;
}

.frage summary::after {
  content: "";
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: 50%;
  background:
    linear-gradient(hsl(var(--primary)), hsl(var(--primary))) center / 0.75rem 2px no-repeat,
    linear-gradient(hsl(var(--primary)), hsl(var(--primary))) center / 2px 0.75rem no-repeat;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.frage summary:hover {
  color: hsl(var(--accent-foreground));
}

.frage[open] summary::after {
  border-color: hsl(var(--primary) / 0.5);
  transform: rotate(45deg);
}

.frage__antwort {
  padding: 0 0 1.5rem;
  color: hsl(var(--foreground-soft));
}

.frage__antwort p {
  max-width: 35rem;
}

@media (min-width: 640px) {
  .frage__antwort {
    padding-right: 3.25rem;
  }
}

@media (min-width: 1080px) {
  .fragen {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: 5rem;
    align-items: start;
  }

  .fragen__kopf {
    position: sticky;
    top: 7rem;
  }
}

/* ---------- Abschluss ---------- */

.abschluss {
  position: relative;
  overflow: hidden;
  overflow: clip;
  padding: 3.5rem 1.25rem;
  border: 1px solid hsl(var(--primary) / 0.3);
  border-radius: 1.5rem;
  background:
    radial-gradient(ellipse 70% 90% at 50% 0%, hsl(var(--primary) / 0.16), transparent 70%),
    linear-gradient(180deg, hsl(var(--card)), hsl(var(--background)));
  text-align: center;
}

.abschluss h2,
.abschluss .einleitung {
  max-width: 40rem;
  margin-inline: auto;
}

.abschluss .cta {
  margin-top: 2rem;
}

.abschluss__beweis {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  margin-top: 2rem;
  color: hsl(var(--foreground-soft));
  font-size: 0.9375rem;
  text-align: left;
}

.abschluss__link {
  margin-top: 0.75rem;
}

@media (min-width: 900px) {
  .abschluss {
    padding: 5rem 3rem;
  }
}

/* ---------- Demo-Leiste (Handy) ----------
   Letztes Kind von <main>, klebt am unteren Rand und endet vor dem Fuss. */

.demoleiste {
  position: sticky;
  bottom: 0;
  z-index: 40;
  padding: 1rem 1rem 0.5rem;
  background: linear-gradient(180deg, hsl(var(--background) / 0), hsl(var(--background) / 0.94) 40%);
}

.demoleiste .knopf {
  width: 100%;
}

/* Eine Zeile, kein zweiter Absatz: Das obere Polster ist dafuer von 1,25rem auf
   1rem und das untere von 0,75rem auf 0,5rem zurueckgenommen, damit die Leiste
   nicht spuerbar hoeher wird. */
.demoleiste__mikro {
  margin-top: 0.375rem;
  text-align: center;
  font-size: 0.75rem;
}

@media (min-width: 640px) {
  .demoleiste {
    display: none;
  }
}

/* ---------- Fuss ---------- */

.fuss {
  padding-block: 3rem;
  border-top: 1px solid hsl(var(--border) / 0.6);
}

.fuss__innen {
  display: grid;
  justify-items: center;
  gap: 1rem;
  text-align: center;
}

.fuss__marke {
  display: inline-flex;
}

.fuss__marke img {
  width: auto;
  height: 1.75rem;
}

.fuss__zeile,
.fuss__kontakt {
  color: hsl(var(--muted-foreground));
  font-size: 0.9375rem;
}

.fuss__kontakt a {
  color: hsl(var(--foreground));
}

.fuss__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fuss__links li {
  display: inline-flex;
  align-items: center;
}

.fuss__links li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  margin-inline: 0.625rem;
  border-radius: 50%;
  background: hsl(var(--muted-foreground));
}

.fuss__links a {
  display: inline-block;
  padding-block: 0.5rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
  text-decoration: none;
}

.fuss__links a:hover {
  color: hsl(var(--foreground));
  text-decoration: underline;
}

.fuss__hinweis,
.fuss__copyright {
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
}

/* ---------- Bewegung ----------
   Jede Animation steht in prefers-reduced-motion: no-preference (der Test
   prueft das). Nicht animiert: h1 und Hero-Bild, sonst verschiebt sich der
   LCP. Scroll-Effekte nur unter @supports, ohne Unterstuetzung ist alles
   statisch sichtbar. Kein Hochzaehlen von Zahlen. */

@keyframes aufsteigen {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes einblenden {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
}

@keyframes umlauf {
  to {
    --winkel: 360deg;
  }
}

@keyframes leiste {
  from {
    transform: translateY(120%);
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .hero .dachzeile,
  .hero__unterzeile,
  .hero__aktion,
  .hero__beweis {
    animation: aufsteigen 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .hero__unterzeile {
    animation-delay: 80ms;
  }

  .hero__aktion {
    animation-delay: 160ms;
  }

  .hero__beweis {
    animation-delay: 240ms;
  }

  .hero__bild::before {
    animation: umlauf 6s cubic-bezier(0.45, 0, 0.3, 1) 0.5s both;
  }

  @supports (animation-timeline: view()) {
    .abschnitt__kopf,
    .beleg,
    .karte,
    .agitation,
    .bereich__text,
    .abbildung,
    .vergleich__rahmen,
    .schritt,
    .presseleiste,
    .frage,
    .abschluss {
      animation: einblenden linear both;
      animation-timeline: view();
      /* Das Ende MUSS eine feste Strecke sein, kein Anteil von `cover`.
         `cover` ist Fensterhoehe plus Elementhoehe: Bei der Vergleichstabelle
         (2.122 px auf dem Handy) waren 22 Prozent davon 645 px Scrollweg, der
         Leser hatte Kopfzeile und die ersten drei Kriterien also bei 37 bis 43
         Prozent Deckkraft vor sich, Textkontrast 3,9 zu 1 statt 18,2 zu 1
         (gemessen 18.09.2026, AA verlangt 4,5 zu 1). `entry` waere derselbe
         Fehler, seine Laenge ist die Elementhoehe. 25vh blendet jedes Element
         nach derselben Strecke voll ein, ob 70 px oder 2.122 px hoch. */
      animation-range: cover 0% cover 25vh;
    }
  }

  /* Die Leiste faehrt erst nach dem Hero herein. Aus dem Bild geschoben ist
     sie auch nicht anklickbar. Ohne Unterstuetzung steht sie von Anfang an. */
  @supports (animation-timeline: scroll()) {
    .demoleiste {
      animation: leiste linear both;
      animation-timeline: scroll(root);
      animation-range: 0 60vh;
    }
  }

  @supports (interpolate-size: allow-keywords) {
    :root {
      interpolate-size: allow-keywords;
    }

    .frage::details-content,
    .mehr::details-content {
      height: 0;
      overflow: clip;
      transition: height 0.25s ease, content-visibility 0.25s allow-discrete;
    }

    .frage[open]::details-content,
    .mehr[open]::details-content {
      height: auto;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

@media print {
  *,
  *::before,
  *::after {
    animation: none !important;
  }

  .demoleiste {
    display: none;
  }
}