/* ==========================================================================
   DAO Systems — style.css
   Layout, Sektions- und Komponenten-Styles. Setzt tokens.css und base.css
   voraus und wird als LETZTE der drei Dateien eingebunden.

   Regel: keine Literalwerte für Farben, Abstände oder Schriftgrößen.
   Ausschließlich var(--…) aus tokens.css.
   Erlaubte Literale: 0, 100%, auto, none, Grid-Fraktionen (1fr), Prozentwerte
   und Positionierungs-Offsets (top/left/right/inset). Das sind Layout-
   Verhältnisse, keine Design-Token.

   --------------------------------------------------------------------------
   BREAKPOINTS (mobile first, ausschließlich min-width)

     40em     =  640px   zwei Spalten, Formular zweispaltig
     48em     =  768px   NUR Umbruch Mobile-Nav -> Desktop-Nav (aus tokens.css)
     56.25em  =  900px   Hero zweispaltig, drei Spalten, Footer vierspaltig
     71.25em  = 1140px   Container erreicht Maxbreite, größere Innenabstände

   Anmerkung: der Auftrag nennt 640 / 900 / 1140. tokens.css dokumentiert
   zusätzlich 48em als festen Umbruchpunkt der Navigation. Beides ist hier
   umgesetzt: 48em wird ausschließlich für Header/Nav verwendet, die drei
   Layout-Breakpoints sind 40em, 56.25em und 71.25em.

   --------------------------------------------------------------------------
   INHALT
     1.  Seitengerüst
     2.  Header und Navigation
     3.  Footer
     4.  Hero und Page-Hero
     5.  Section-Head
     6.  Steps (nummerierte Schritte)
     7.  Benefits (Karten-Grid)
     8.  Trust-Teaser
     9.  CTA-Band
     10. Prose (Fließtext, Rechtsseiten)
     11. Feature-List
     12. Data-Groups
     13. Values
     14. Founders
     15. Formular
     16. Contact-Card
     17. Kleinteile: link-arrow, badge, callout, placeholder, stat,
         checklist, toc, figure, split, grid
     18. Reduzierte Bewegung
     19. Druck

   --------------------------------------------------------------------------
   VORGEHALTENE BAUSTEINE — in keiner der sieben Seiten verwendet

   Diese Klassen stehen absichtlich hier: PARTIALS.md, Abschnitt 11 führt sie
   als zulässigen Baukasten, damit spätere Seiten keine eigenen Styles
   erfinden müssen (das verbietet PARTIALS.md, Regel 2). Sie werden ohne
   Build-Step vollständig mit ausgeliefert. Wer den Baukasten nicht braucht,
   kann sie in einem Durchgang löschen — dann `.icon` und `.contact-card__icon`
   auch aus der Sammel-Selektorliste in Abschnitt 1 nehmen. Fundstellen:

     .section--dark · .section--darker              Abschnitt 1
     .icon · .icon--lg · .contact-card__icon        Abschnitt 1
     .hero--dark · .hero__note · .page-hero--dark   Abschnitt 4
     .section-head--center                          Abschnitt 5
     .badge · .badge--accent · .badge--secondary    Abschnitt 17
     .stat · .stat__value · .stat__label · .stats   Abschnitt 17
     .checklist · .checklist__icon                  Abschnitt 17
     .figure__caption                               Abschnitt 17
     .split--even · .split--reverse                 Abschnitt 17
     .grid · .grid--2 · .grid--3 · .grid--4 ·
     .grid--gap-lg                                  Abschnitt 17

   NICHT in diese Liste gehören die Zustandsklassen, die js/main.js zur
   Laufzeit setzt und die deshalb ebenfalls in keinem HTML stehen:
   .is-open, .is-scrolled, .has-error, .form-status--success,
   .form-status--error.
   ========================================================================== */


/* ==========================================================================
   1. SEITENGERÜST
   ========================================================================== */

/* Sticky Footer: main wächst, Footer bleibt unten, auch auf kurzen Seiten. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1 0 auto;
}

/* Dunkle Sektion. Immer zusammen mit .on-dark am selben Element verwenden.
   Vorgehalten, aktuell ungenutzt — siehe Dateikopf. */
.section--dark {
  background-color: var(--color-surface-dark);
}

.section--darker {
  background-color: var(--color-surface-darker);
}

/* Trennlinie zwischen zwei gleichfarbigen Sektionen. */
.section--divided {
  border-top: var(--border-width) solid var(--color-border);
}

/* --- Inline-Icons --------------------------------------------------------
   base.css setzt `svg { fill: currentColor }`. Ein Präsentationsattribut
   fill="none" am <svg> würde davon überschrieben — deshalb wird der
   Linien-Stil hier per CSS gesetzt. Jedes Inline-Icon bekommt .icon oder
   eine der unten aufgeführten Komponentenklassen.

   Muss VOR den Komponenten stehen: gleiche Spezifität, spätere Regel
   gewinnt (z. B. .brand__mark-accent überschreibt den stroke).
   ------------------------------------------------------------------------ */

.icon,
.brand__mark,
.nav-toggle__icon,
.link-arrow__icon,
.checklist__icon,
.trust-teaser__icon,
.feature__icon svg,
.founder__mark svg,
.contact-card__icon {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--border-width-thick);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Vorgehalten, aktuell ungenutzt — siehe Dateikopf. */
.icon {
  width: var(--space-3);
  height: var(--space-3);
  flex: none;
}

.icon--lg {
  width: var(--space-4);
  height: var(--space-4);
}


/* ==========================================================================
   2. HEADER UND NAVIGATION

   Aufbau (siehe PARTIALS.md):
     header.site-header
       div.site-header__inner.container
         a.brand
         button.nav-toggle          (nur < 48em sichtbar)
         nav.nav#hauptnav           (< 48em Panel, >= 48em Zeile)
           ul.nav__list > li.nav__item > a.nav__link[.is-active]
           a.nav__cta.btn.btn--accent

   Aktiver Punkt: class="nav__link is-active" PLUS aria-current="page",
   ausschließlich auf der jeweils eigenen Seite.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--color-surface);
  border-bottom: var(--border-width) solid var(--color-border);
  transition: box-shadow var(--duration-base) var(--ease-standard);
}

/* Setzt js/main.js ab wenigen Pixeln Scrollversatz. Ohne JS bleibt der
   Header schlicht flach — kein Funktionsverlust. */
.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--header-height);
}

/* --- Wortmarke ---------------------------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  letter-spacing: var(--letter-spacing-heading);
  white-space: nowrap;
}

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

.brand__mark {
  width: var(--space-4);
  height: var(--space-4);
  flex: none;
  color: inherit;
}

/* Petrol-Akzent innerhalb des Logos (Feldzeilen im Kasten). */
.brand__mark-accent {
  stroke: var(--color-secondary);
}

.brand__name {
  display: inline-block;
}

/* Im Footer steht die Marke auf dunklem Grund. */
.on-dark .brand,
.on-dark .brand:hover {
  color: var(--color-text-invert);
}

.on-dark .brand__mark-accent {
  stroke: var(--color-focus-invert);
}

/* --- Burger-Button ------------------------------------------------------ */

/* Touch-Ziel: --control-height (48px), nicht --control-height-sm (40px). Der
   Burger ist das einzige Bedienelement der Mobil-Navigation und damit das
   wichtigste Touch-Ziel der Seite. */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-0-5);
  min-height: var(--control-height);
  min-width: var(--control-height);
  padding-inline: var(--space-1);
  border-radius: var(--control-radius);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  transition: var(--transition-color);
}

.nav-toggle:hover {
  background-color: var(--color-surface-hover);
}

.nav-toggle__icon {
  width: var(--space-3);
  height: var(--space-3);
  flex: none;
}

.nav-toggle__label {
  display: inline-block;
}

/* Icon-Wechsel hängt allein an aria-expanded — JS setzt nur dieses Attribut. */
.nav-toggle__icon--close {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon--open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon--close {
  display: block;
}

/* --- Navigation: Mobile-Panel ------------------------------------------- */

.nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--header-height));
  overflow-y: auto;
  padding: var(--space-2) var(--container-padding) var(--space-3);
  background-color: var(--color-surface);
  border-bottom: var(--border-width) solid var(--color-border);
  box-shadow: var(--shadow-md);
}

.nav.is-open {
  display: block;
}

.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}

.nav__item + .nav__item {
  margin-top: 0;
  border-top: var(--border-width) solid var(--color-border);
}

.nav__link {
  display: block;
  padding: var(--space-2) 0;
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: var(--transition-color);
}

.nav__link:hover {
  color: var(--color-secondary);
}

.nav__link.is-active {
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.nav__cta {
  margin-top: var(--space-3);
  width: 100%;
}

/* --- Navigation: Desktop ab 48em ---------------------------------------- */

@media (min-width: 48em) {
  .nav-toggle {
    display: none;
  }

  .nav {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0;
    background-color: transparent;
    border-bottom: 0;
    box-shadow: var(--shadow-none);
  }

  .nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .nav__item + .nav__item {
    border-top: 0;
  }

  /* 48em = 768px ist iPad-Portrait, also weiterhin ein Touch-Gerät: vertikales
     Padding auf --space-2, damit das Ziel über 44px kommt. Der .is-active-Balken
     sitzt per bottom: 0 weiterhin an der Unterkante des Links. */
  .nav__link {
    position: relative;
    padding: var(--space-2) 0;
    font-size: var(--font-size-sm);
  }

  /* Aktiver Punkt: Amber-Balken als Fläche, zusätzlich fettere Schrift.
     Amber ist hier Fläche, nicht Text — siehe tokens.css. */
  .nav__link.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--border-width-accent);
    border-radius: var(--radius-pill);
    background-color: var(--color-accent);
  }

  .nav__cta {
    margin-top: 0;
    width: auto;
    min-height: var(--control-height);
    padding-inline: var(--space-2);
    font-size: var(--font-size-sm);
  }
}

@media (min-width: 71.25em) {
  .nav__list {
    gap: var(--space-4);
  }

  .nav__link {
    font-size: var(--font-size-base);
  }
}


/* ==========================================================================
   3. FOOTER
   Element trägt: class="site-footer on-dark"
   ========================================================================== */

.site-footer {
  background-color: var(--color-surface-darker);
  padding-block: var(--space-8) var(--space-4);
  margin-top: auto;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.footer__brand {
  max-width: var(--measure-narrow);
}

.footer__col {
  min-width: 0;
}

.footer__desc {
  margin-top: var(--space-2);
  color: var(--color-text-invert-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}

.footer__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-text-invert);
  margin-bottom: var(--space-2);
}

.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}

.footer__list > li + li {
  margin-top: var(--space-1);
}

/* Die E-Mail-Adresse ist breiter als eine 1fr-Spalte des vierspaltigen Footers
   zwischen 900px und ~983px Viewport und lässt sich nicht an einem Leerzeichen
   umbrechen. Ohne overflow-wrap ragt sie aus ihrer Spalte ins Container-Padding
   (.footer__col hat min-width: 0 und gibt nicht nach). */
.footer__list a,
.footer__contact a {
  color: var(--color-text-invert-muted);
  text-decoration: none;
  font-size: var(--font-size-sm);
  overflow-wrap: break-word;
}

.footer__list a:hover,
.footer__contact a:hover {
  color: var(--color-text-invert);
  text-decoration: underline;
}

.footer__contact {
  font-size: var(--font-size-sm);
  color: var(--color-text-invert-muted);
}

.footer__contact > * + * {
  margin-top: var(--space-1);
}

.footer__bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border-on-dark);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-invert-muted);
}

.footer__copyright {
  margin: 0;
  max-width: none;
}

.footer__legal {
  margin: 0;
  max-width: none;
}

.footer__legal a {
  color: var(--color-text-invert-muted);
  text-decoration: none;
}

.footer__legal a:hover {
  color: var(--color-text-invert);
  text-decoration: underline;
}

@media (min-width: 40em) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }

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

@media (min-width: 56.25em) {
  .site-footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--grid-gap-lg);
  }

  .footer__brand {
    grid-column: auto;
  }

  .footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}


/* ==========================================================================
   4. HERO UND PAGE-HERO
   ========================================================================== */

.hero {
  padding-block: var(--section-padding-y-lg);
  background-color: var(--color-bg);
  border-bottom: var(--border-width) solid var(--color-border);
}

/* Dunkle Variante — zusammen mit .on-dark verwenden.
   Vorgehalten, aktuell ungenutzt — siehe Dateikopf. */
.hero--dark {
  background-color: var(--color-surface-dark);
  border-bottom-color: var(--color-border-on-dark);
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}

.hero__content > * + * {
  margin-top: var(--space-3);
}

.hero__title {
  max-width: var(--measure-narrow);
}

.hero__lead {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
  color: var(--color-text-muted);
  max-width: var(--measure-narrow);
}

.on-dark .hero__lead {
  color: var(--color-text-invert-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* Vorgehalten, aktuell ungenutzt — siehe Dateikopf. */
.hero__note {
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}

.hero__figure {
  margin: 0;
}

/* Nur direkte Kinder: die Regel gilt einem Bild, das die Figur allein füllt.
   Ohne den Kindkombinator greift sie auch auf jedes SVG innerhalb einer
   verschachtelten Grafik — sie ist spezifischer als etwa .flow__check und
   hätte den Bestätigungshaken auf volle Breite gezogen. */
.hero__figure > img,
.hero__figure > svg {
  width: 100%;
  height: auto;
}

/* Bewusst einspaltig, auch auf großen Bildschirmen: Text oben, darunter die
   Ablauf-Grafik über die volle Breite. In einer halbbreiten Spalte hätte die
   Grafik keine 500px und ihre drei Karten müssten untereinander stehen —
   nebeneinander sind sie die eigentliche Aussage. Siehe .flow. */
@media (min-width: 56.25em) {
  .hero__inner {
    gap: var(--space-8);
  }
}

@media (min-width: 71.25em) {
  .hero__inner {
    gap: var(--space-10);
  }
}

/* --- Kompakter Kopf für Unterseiten -------------------------------------- */

.page-hero {
  padding-block: var(--space-8) var(--space-6);
  background-color: var(--color-surface-tinted);
  border-bottom: var(--border-width) solid var(--color-border);
}

/* Vorgehalten, aktuell ungenutzt — siehe Dateikopf. */
.page-hero--dark {
  background-color: var(--color-surface-dark);
  border-bottom-color: var(--color-border-on-dark);
}

.page-hero__inner > * + * {
  margin-top: var(--space-3);
}

.page-hero__title {
  max-width: var(--measure-narrow);
}

.page-hero__lead {
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
  color: var(--color-text-muted);
  max-width: var(--measure);
}

.on-dark .page-hero__lead {
  color: var(--color-text-invert-muted);
}

@media (min-width: 56.25em) {
  .page-hero {
    padding-block: var(--space-10) var(--space-8);
  }
}


/* ==========================================================================
   5. SECTION-HEAD
   Eyebrow (.u-eyebrow aus base.css), H2, Lead-Absatz.
   ========================================================================== */

.section-head {
  max-width: var(--measure);
  margin-bottom: var(--space-6);
}

.section-head__lead {
  margin-top: var(--space-2);
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
  max-width: var(--measure);
}

.on-dark .section-head__lead {
  color: var(--color-text-invert-muted);
}

/* Vorgehalten, aktuell ungenutzt — siehe Dateikopf. */
.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--center .section-head__lead {
  margin-inline: auto;
}

@media (min-width: 56.25em) {
  .section-head {
    margin-bottom: var(--space-8);
  }
}


/* ==========================================================================
   6. STEPS — nummerierte Schritte, mobil untereinander
   ========================================================================== */

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  counter-reset: step;
}

.steps > li + li {
  margin-top: 0;
}

.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-3);
  align-items: start;
}

.step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  flex: none;
  grid-row: span 2;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  color: var(--color-text-invert);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.on-dark .step__number {
  background-color: var(--color-accent);
  color: var(--color-text);
}

.step__title {
  align-self: center;
  margin: 0;
}

.step__text {
  grid-column: 2;
  margin: 0;
  color: var(--color-text-muted);
}

.on-dark .step__text {
  color: var(--color-text-invert-muted);
}

/* Ab 900px nebeneinander, Nummer über dem Text. */
@media (min-width: 56.25em) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap-lg);
  }

  .step {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: var(--border-width-thick) solid var(--color-border);
  }

  .step__number {
    grid-row: auto;
  }

  .step__text {
    grid-column: auto;
  }

  .on-dark .step {
    border-top-color: var(--color-border-on-dark);
  }
}


/* ==========================================================================
   7. BENEFITS — Karten-Grid (Nutzen, allgemeine Kartenraster)
   ========================================================================== */

.benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}

.benefits > li + li {
  margin-top: 0;
}

/* Wird meist zusammen mit .card verwendet. Deshalb kein `gap`, sondern
   dasselbe margin-Muster wie .card — sonst addieren sich beide Abstände. */
.benefit {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.benefit > * + * {
  margin-top: var(--space-2);
}

.benefit__title {
  margin: 0;
  font-size: var(--font-size-h4);
}

.benefit__text {
  margin: 0;
  color: var(--color-text-muted);
  max-width: none;
}

@media (min-width: 40em) {
  .benefits {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 71.25em) {
  .benefits {
    gap: var(--grid-gap-lg);
  }

  .benefits--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ==========================================================================
   8. TRUST-TEASER — getönter Band mit Text und Weiterführung
   ========================================================================== */

.trust-teaser {
  background-color: var(--color-surface-tinted);
  border-block: var(--border-width) solid var(--color-border);
  padding-block: var(--section-padding-y);
}

.trust-teaser--dark {
  background-color: var(--color-surface-dark);
  border-block-color: var(--color-border-on-dark);
}

.trust-teaser__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  align-items: start;
}

.trust-teaser__icon {
  width: var(--space-6);
  height: var(--space-6);
  flex: none;
  color: var(--color-secondary);
}

.on-dark .trust-teaser__icon {
  color: var(--color-focus-invert);
}

.trust-teaser__body > * + * {
  margin-top: var(--space-2);
}

.trust-teaser__text {
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
}

.on-dark .trust-teaser__text {
  color: var(--color-text-invert-muted);
}

@media (min-width: 40em) {
  .trust-teaser__inner {
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
  }
}


/* ==========================================================================
   9. CTA-BAND — Abschluss-Aufforderung
   ========================================================================== */

.cta-band {
  padding-block: var(--section-padding-y);
  background-color: var(--color-surface-tinted);
  border-top: var(--border-width) solid var(--color-border);
}

/* Dunkle Variante — zusammen mit .on-dark verwenden. */
.cta-band--dark {
  background-color: var(--color-surface-dark);
  border-top-color: var(--color-border-on-dark);
}

.cta-band__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: center;
}

.cta-band__body > * + * {
  margin-top: var(--space-2);
}

.cta-band__text {
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
}

.on-dark .cta-band__text {
  color: var(--color-text-invert-muted);
}

.cta-band__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.cta-band__note {
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}

.on-dark .cta-band__note {
  color: var(--color-text-invert-muted);
}

@media (min-width: 56.25em) {
  .cta-band__inner {
    grid-template-columns: 1.4fr auto;
    gap: var(--space-8);
  }

  .cta-band__actions {
    align-items: flex-end;
  }
}


/* ==========================================================================
   10. PROSE — langer Fließtext (Impressum, Datenschutz, Textabschnitte)
   Zeilenlänge über --measure begrenzt, ruhiger vertikaler Rhythmus.
   ========================================================================== */

.prose {
  max-width: var(--measure);
  line-height: var(--line-height-relaxed);
}

.prose > * + * {
  margin-top: var(--space-3);
}

/* Nach einer Überschrift rückt der Text wieder eng heran. */
.prose > h2 + *,
.prose > h3 + *,
.prose > h4 + * {
  margin-top: var(--space-2);
}

.prose > h2 {
  margin-top: var(--space-8);
}

.prose > h3 {
  margin-top: var(--space-6);
}

.prose > h4 {
  margin-top: var(--space-4);
}

.prose > :first-child {
  margin-top: 0;
}

.prose ul,
.prose ol {
  max-width: var(--measure);
}

.prose li + li {
  margin-top: var(--space-1);
}

.prose dl > div + div {
  margin-top: var(--space-3);
}


/* ==========================================================================
   11. FEATURE-LIST — Icon oder Nummer plus Text, untereinander
   ========================================================================== */

.feature-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}

.feature-list > li + li {
  margin-top: 0;
}

.feature {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-3);
  align-items: start;
}

/* Variante A: Icon in petrolfarbenem Kreis. */
.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  flex: none;
  grid-row: span 2;
  border-radius: var(--radius-pill);
  background-color: var(--color-secondary);
  color: var(--color-text-invert);
}

.feature__icon svg {
  width: var(--space-3);
  height: var(--space-3);
}

/* Variante B: Nummer statt Icon, dezenter als .step__number. */
.feature__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  flex: none;
  grid-row: span 2;
  border: var(--border-width-thick) solid var(--color-primary);
  border-radius: var(--radius-pill);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.on-dark .feature__marker {
  border-color: var(--color-text-invert-muted);
  color: var(--color-text-invert);
}

.feature__title {
  align-self: center;
  margin: 0;
  font-size: var(--font-size-h4);
}

.feature__body {
  grid-column: 2;
}

.feature__body > * + * {
  margin-top: var(--space-2);
}

.feature__text {
  margin: 0;
  color: var(--color-text-muted);
}

.on-dark .feature__text {
  color: var(--color-text-invert-muted);
}

@media (min-width: 56.25em) {
  .feature-list--2 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6) var(--grid-gap-lg);
  }
}


/* ==========================================================================
   12. DATA-GROUPS — gruppierte Aufzählung erkannter Datenfelder
   ========================================================================== */

.data-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}

.data-groups > li + li {
  margin-top: 0;
}

.data-group {
  height: 100%;
  padding: var(--card-padding);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-left: var(--border-width-accent) solid var(--color-secondary);
  border-radius: var(--radius-lg);
}

.data-group__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-h4);
}

.data-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.data-group__list > li {
  position: relative;
  padding-left: var(--space-3);
}

.data-group__list > li + li {
  margin-top: var(--space-1);
}

/* Eigener Marker, weil die Liste list-style: none trägt.
   `top` in em: optische Mitte der ersten Zeile, skaliert mit der Schriftgröße
   mit. Kein Abstands-Token, deshalb hier als relatives Maß. */
.data-group__list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: var(--space-1);
  height: var(--border-width-thick);
  border-radius: var(--radius-pill);
  background-color: var(--color-secondary);
}

@media (min-width: 40em) {
  .data-groups {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 56.25em) {
  .data-groups {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap-lg);
  }
}


/* ==========================================================================
   13. VALUES — Werte-Raster
   ========================================================================== */

.values {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}

.values > li + li {
  margin-top: 0;
}

.value {
  padding-top: var(--space-3);
  border-top: var(--border-width-thick) solid var(--color-border);
}

.on-dark .value {
  border-top-color: var(--color-border-on-dark);
}

.value__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-h4);
}

.value__text {
  margin: 0;
  color: var(--color-text-muted);
  max-width: none;
}

.on-dark .value__text {
  color: var(--color-text-invert-muted);
}

@media (min-width: 40em) {
  .values {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6) var(--grid-gap-lg);
  }
}


/* ==========================================================================
   14. FOUNDERS — zwei gleichwertige Karten mit Foto

   Das Foto sitzt in .founder__photo (Abschnitt 20, "Gründerfoto") als <img>
   auf den SVG-Platzhalter — Karte und Foto-Einbindung sind hier getrennt,
   damit .founder mit oder ohne Foto funktioniert.
   ========================================================================== */

.founders {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}

.founders > li + li {
  margin-top: 0;
}

/* Wie .benefit: kein `gap`, weil die Karte schon Abstände setzt. */
.founder {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.founder > * + * {
  margin-top: var(--space-2);
}

/* base.css setzt `.card > h3 { margin-top: 0 }` — richtig, solange die
   Überschrift das erste Kind ist. In .founder steht sie hinter Marke und
   Rolle und braucht ihren Abstand zurück. */
.founder > .founder__name {
  margin-top: var(--space-2);
}

/* Monogrammartiges Feld ohne Foto. Vorgehalten, aktuell ungenutzt: die
   Gründerkarten zeigen seit der Motion-Überarbeitung .founder__photo
   (Abschnitt 20). Bleibt als Variante für eine Karte ohne Foto stehen. */
.founder__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  flex: none;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-tinted);
  border: var(--border-width) solid var(--color-border);
  color: var(--color-secondary);
}

.founder__mark svg {
  width: var(--space-4);
  height: var(--space-4);
}

.founder__name {
  margin: 0;
  font-size: var(--font-size-h4);
}

.founder__role {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-secondary);
}

.founder__text {
  margin: 0;
  color: var(--color-text-muted);
  max-width: none;
}

@media (min-width: 40em) {
  .founders {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ==========================================================================
   15. FORMULAR
   Labels über den Feldern, sichtbarer Fehlerzustand, Fokusring aus base.css.
   Erwartete Struktur siehe PARTIALS.md, Abschnitt "Kontaktformular".
   ========================================================================== */

.form {
  max-width: var(--measure);
}

/* Honigtopf gegen Formular-Spam — siehe Kommentar in kontakt.html.

   Bewusst NICHT `display: none` oder das `hidden`-Attribut: beides ist das
   erste, worauf einfache Bots prüfen, um Fallen zu erkennen. Das Feld wird
   stattdessen weit aus dem sichtbaren Bereich geschoben. `position: absolute`
   nimmt es aus dem Textfluss, sodass es kein Layout beeinflusst.

   Kein `visibility: hidden` und kein `opacity: 0`: manche Browser
   überspringen solche Felder beim Autofill nicht zuverlässig. */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.field--wide {
  grid-column: 1 / -1;
}

.field__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

/* Pflichtfeld-Sternchen: Amber nur als Textfarbe über --color-accent-text. */
.field__required {
  color: var(--color-accent-text);
  margin-left: var(--space-0-5);
}

.field__control {
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-1) var(--control-padding-x);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--control-radius);
  color: var(--color-text);
  font-size: var(--font-size-base);
  line-height: var(--line-height-snug);
  transition: var(--transition-color), box-shadow var(--duration-fast) var(--ease-standard);
}

textarea.field__control {
  min-height: var(--space-16);
  padding-block: var(--space-2);
  resize: vertical;
  line-height: var(--line-height-base);
}

.field__control::placeholder {
  color: var(--color-text-subtle);
  opacity: 1;
}

.field__control:hover {
  border-color: var(--color-primary);
}

.field__control:focus {
  border-color: var(--color-primary);
}

.field__hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}

/* --- Fehlerzustand ------------------------------------------------------- */

.field__error {
  display: flex;
  align-items: center;
  gap: var(--space-0-5);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-error);
}

/* Leere Fehlermeldung nimmt keinen Platz weg. JS füllt sie bei Bedarf. */
.field__error:empty {
  display: none;
}

/* Zweiter, innerer Ring statt dickerem Rahmen — sonst springt das Layout
   um einen Pixel, sobald ein Fehler erscheint. */
.field.has-error .field__control,
.field__control[aria-invalid="true"] {
  border-color: var(--color-error);
  box-shadow: inset 0 0 0 var(--border-width) var(--color-error);
}

/* --- Einwilligung (Checkbox) --------------------------------------------- */

.form__consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-0-5) var(--space-2);
  align-items: start;
  margin-top: var(--space-4);
}

/* 32px statt 24px: erfüllt WCAG 2.5.8 mit Reserve. Das Kästchen steht direkt
   neben einem Fließtext-Label mit Link — zwei dicht beieinander liegende Ziele
   unterschiedlicher Größe. Ohne margin-top, sonst rutscht das größere Kästchen
   aus der Flucht der ersten Textzeile. */
.form__consent-input {
  width: var(--space-4);
  height: var(--space-4);
  margin-top: var(--space-0);
  flex: none;
  accent-color: var(--color-primary);
}

.form__consent-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.form__consent .field__error {
  grid-column: 2;
}

.form__consent.has-error .form__consent-label {
  color: var(--color-text);
}

/* --- Aktionen, Hinweis, Statusmeldung ------------------------------------ */

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.form__note {
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}

.form-status {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-left: var(--border-width-accent) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.form-status:empty {
  display: none;
}

.form-status--success {
  border-left-color: var(--color-success);
}

.form-status--error {
  border-left-color: var(--color-error);
}

@media (min-width: 40em) {
  .form__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3) var(--grid-gap);
  }
}


/* ==========================================================================
   16. CONTACT-CARD — Direktkontakt neben dem Formular
   ========================================================================== */

.contact-card {
  padding: var(--card-padding);
  background-color: var(--color-surface-tinted);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}

.contact-card__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-h4);
}

.contact-card__list {
  margin: 0;
  max-width: none;
}

.contact-card__row + .contact-card__row {
  margin-top: var(--space-2);
}

.contact-card__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.contact-card__value {
  margin-top: var(--space-0-5);
  font-size: var(--font-size-md);
  color: var(--color-text);
}

.contact-card__text {
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  max-width: none;
}

/* Formular links, Kontaktkarte rechts — ab 900px. */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 56.25em) {
  .contact-layout {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-8);
  }
}


/* ==========================================================================
   17. KLEINTEILE
   ========================================================================== */

/* --- Textlink mit Pfeil -------------------------------------------------- */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.link-arrow:hover {
  text-decoration: underline;
}

.link-arrow__icon {
  width: var(--space-2);
  height: var(--space-2);
  flex: none;
  transition: transform var(--duration-base) var(--ease-out);
}

.link-arrow:hover .link-arrow__icon,
.link-arrow:focus-visible .link-arrow__icon {
  transform: translateX(var(--space-0-5));
}

/* --- Badge ---------------------------------------------------------------
   Vorgehalten, aktuell ungenutzt — siehe Dateikopf. */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5);
  padding: var(--space-0-5) var(--space-1);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-tinted);
  color: var(--color-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
}

/* Amber als Fläche mit dunkler Schrift — nie Amber als Text. */
.badge--accent {
  background-color: var(--color-accent);
  color: var(--color-text);
}

.badge--secondary {
  background-color: var(--color-secondary);
  color: var(--color-text-invert);
}

/* --- Callout / Hinweiskasten --------------------------------------------- */

.callout {
  padding: var(--space-3);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-left: var(--border-width-accent) solid var(--color-secondary);
  border-radius: var(--radius-md);
}

.callout > * + * {
  margin-top: var(--space-2);
}

.callout__title {
  margin: 0;
  font-size: var(--font-size-h4);
}

.callout--warning {
  border-left-color: var(--color-warning);
}

/* Entwurfswarnung auf den Rechtsseiten. .callout--warning färbt nur die linke
   Kante; ein weißer Kasten auf hellem Seitengrund trägt für einen Hinweis,
   der nicht unbemerkt live gehen darf, zu wenig Signal. Deshalb zusätzlich
   getönte Fläche und umlaufender Rahmen in Warnfarbe. Die 3px starke linke
   Kante kommt bereits aus .callout und bleibt stehen.
   Kontrast --color-warning #b45309 auf --color-surface-tinted #edf0f4 = 4.39:1.
   Das reicht für Large Text (ab 24px bzw. 18.66px fett, Schwelle 3:1) und für
   Nicht-Text-Kontraste, NICHT für normalen Fließtext (AA braucht 4.5:1).
   .callout--draft-notice .callout__title ist ein h2 mit mindestens 26px und
   damit zulässig. Wird die Warnfarbe für kleineren Text gebraucht:
   --color-accent-text #92400e nehmen, das ergibt auf #edf0f4 6.2:1. */
.callout--draft-notice {
  background-color: var(--color-surface-tinted);
  border-color: var(--color-warning);
}

.callout--draft-notice .callout__title {
  color: var(--color-warning);
}

/* --- Platzhalter-Markierung ---------------------------------------------- */
/* Für [PLATZHALTER: …] im Text. Sichtbar, damit offene Angaben beim
   Durchsehen der Seite auffallen und nicht versehentlich live gehen. */

.placeholder {
  display: inline;
  padding: 0 var(--space-0-5);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-tinted);
  border: var(--border-width) dashed var(--color-border-strong);
  color: var(--color-accent-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

/* Ganzer Absatz statt einzelnes Wort: als Inline-Element bricht der
   gestrichelte Rahmen über mehrere Zeilen auf. Erbt Rahmen, Fläche und
   Textfarbe von .placeholder. */
.placeholder--block {
  display: block;
  padding: var(--space-2);
  line-height: var(--line-height-base);
  max-width: var(--measure);
}

.on-dark .placeholder {
  background-color: transparent;
  border-color: var(--color-text-invert-muted);
  color: var(--color-focus-invert);
}

/* --- Kennzahl ------------------------------------------------------------
   Vorgehalten, aktuell ungenutzt — siehe Dateikopf. */

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}

.stat__value {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-primary);
}

.on-dark .stat__value {
  color: var(--color-text-invert);
}

.stat__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.on-dark .stat__label {
  color: var(--color-text-invert-muted);
}

.stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 40em) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--grid-gap-lg);
  }
}

/* --- Checkliste ----------------------------------------------------------
   Vorgehalten, aktuell ungenutzt — siehe Dateikopf. */

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--measure);
}

.checklist > li {
  position: relative;
  padding-left: var(--space-4);
}

.checklist > li + li {
  margin-top: var(--space-2);
}

/* `top` in em: hängt an der Schriftgröße, damit der Haken auf der ersten
   Zeile sitzt — kein Abstands-Token, sondern ein relatives Maß. */
.checklist__icon {
  position: absolute;
  left: 0;
  top: 0.2em;
  width: var(--space-3);
  height: var(--space-3);
  color: var(--color-secondary);
}

.on-dark .checklist__icon {
  color: var(--color-focus-invert);
}

/* --- Inhaltsverzeichnis für lange Seiten --------------------------------- */

.toc {
  padding: var(--space-3);
  background-color: var(--color-surface-tinted);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  max-width: var(--measure);
}

.toc__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  font-size: var(--font-size-sm);
}

.toc__list > li + li {
  margin-top: var(--space-1);
}

/* --- Figure / Grafik mit Bildunterschrift -------------------------------- */

.figure {
  margin: 0;
}

/* Nur direkte Kinder — siehe .hero__figure: sonst erwischt die Regel auch
   die SVGs innerhalb einer verschachtelten Grafik. */
.figure > img,
.figure > svg {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

/* Vorgehalten, aktuell ungenutzt — siehe Dateikopf. */
.figure__caption {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}

.on-dark .figure__caption {
  color: var(--color-text-invert-muted);
}

/* --- Split: Haupttext plus schmale Randspalte ----------------------------
   Vorgehalten, aktuell ungenutzt — siehe Dateikopf. Die einzige Verwendung
   (produkt.html, "Was der Disponent sieht") wurde aufgelöst: die Ablauf-
   Grafik braucht die volle Breite, in der 1fr-Randspalte hatte sie keine
   450px. Bleibt als Muster für künftige Text-plus-Randspalte-Abschnitte.  */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 56.25em) {
  .split {
    grid-template-columns: 1.6fr 1fr;
    gap: var(--space-8);
  }

  /* Vorgehalten, aktuell ungenutzt — siehe Dateikopf. */
  .split--even {
    grid-template-columns: 1fr 1fr;
  }

  .split--reverse .split__aside {
    order: -1;
  }
}

/* --- Allgemeines Raster --------------------------------------------------
   Vorgehalten, aktuell ungenutzt — siehe Dateikopf. */

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
}

.grid--gap-lg {
  gap: var(--grid-gap-lg);
}

@media (min-width: 40em) {
  .grid--2,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 56.25em) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ==========================================================================
   20. BEWEGUNG UND INTERAKTION

   Grundsatz für diesen gesamten Abschnitt: Der Ausgangszustand ist immer
   der sichtbare Zustand. Ausgeblendet wird ausschließlich unter dem
   Selektor `.js-motion`, den assets/js/motion.js an <html> setzt — und
   zwar nur, wenn JavaScript läuft UND der Nutzer keine reduzierte
   Bewegung angefordert hat. Fällt das Skript aus, bleibt jede Sektion,
   jede Karte und jedes Tab-Panel sichtbar. Ein Reveal darf niemals
   Inhalt verschlucken.

   Animiert wird ausschließlich `opacity` und `transform` — beides läuft
   auf dem Compositor, erzeugt kein Re-Layout und damit kein CLS. Kein
   `height`, kein `top`, kein `margin`.
   ========================================================================== */

/* --- Scroll-Reveal --------------------------------------------------------
   [data-reveal]        einzelnes Element, blendet beim Sichtwerden ein
   [data-reveal-group]  Container; motion.js staffelt dessen direkte
                        [data-reveal]-Kinder über --reveal-i × 80ms         */

.js-motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-shift), 0);
  transition: opacity var(--duration-reveal) var(--ease-out),
              transform var(--duration-reveal) var(--ease-out);
  transition-delay: calc(var(--reveal-i, 0) * var(--reveal-stagger));
  will-change: opacity, transform;
}

.js-motion [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Nach dem Einblenden fällt der Compositor-Hinweis wieder weg; motion.js
   setzt is-done, sobald die Transition durch ist. */
.js-motion [data-reveal].is-done {
  will-change: auto;
  transition-delay: 0s;
}


/* --- Micro-Interactions ---------------------------------------------------
   Bewusst ohne .js-motion-Bedingung: Hover ist kein Scroll-Effekt und
   funktioniert auch ohne Skript. Abschaltung nur über Abschnitt 18.       */

.btn {
  transition: var(--transition-color),
              box-shadow var(--duration-lift) var(--ease-standard),
              transform var(--duration-lift) var(--ease-standard);
}

.btn:hover {
  transform: translate3d(0, var(--lift-distance-sm), 0);
  box-shadow: var(--shadow-md);
}

.btn:active {
  transform: none;
  box-shadow: var(--shadow-xs);
}

.card {
  transition: box-shadow var(--duration-lift) var(--ease-standard),
              transform var(--duration-lift) var(--ease-standard),
              border-color var(--duration-lift) var(--ease-standard);
}

.card:hover,
.card:focus-within {
  transform: translate3d(0, var(--lift-distance), 0);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border-strong);
}

/* Rechtsseiten und Hinweiskästen sollen nicht wippen. */
.prose .card,
.callout {
  transform: none;
}


/* --- Kennzahlen im Hero ---------------------------------------------------
   Tabellarische Ziffern: jede Ziffer ist gleich breit, damit der Count-up
   die Zeile nicht in der Breite springen lässt. Zusätzlich zählt
   motion.js von einem Startwert mit gleicher Stellenzahl hoch, sodass
   auch die Zeichenanzahl konstant bleibt — kein Layout-Shift.            */

.stat__value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.stats--hero {
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: var(--border-width) solid var(--color-border);
}

.stat--lg .stat__value {
  font-size: var(--font-size-h1);
  letter-spacing: var(--letter-spacing-tight);
}

.stat--lg .stat__label {
  max-width: var(--measure-narrow);
}

@media (min-width: 40em) {
  .stats--hero {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
}


/* --- Ablauf-Grafik --------------------------------------------------------
   Die drei Stationen des Ablaufs: eingehende Mail -> erkannte Felder ->
   Bestätigung. Eigenständig in HTML und CSS gebaut, kein Bild.

   Leitgedanke: kompakt und flach. Die Reihe soll auf einen Blick erfassbar
   sein, nicht gelesen werden müssen. Deshalb sind die Beispielwerte bewusst
   kurz gehalten (Ort statt vollständiger Anschrift) — sie zeigen, WAS erkannt
   wird, nicht wie viel Text hineinpasst. Alle drei Karten sind gleich hoch,
   damit die Reihe eine Linie bildet.

   Ohne JavaScript steht die Grafik vollständig da; das Skript fügt nur die
   zeitliche Staffelung hinzu.

   Die Grafik richtet sich nach der Breite IHRES EIGENEN Containers, nicht
   nach der des Fensters. Eine Media Query wäre hier falsch: die Grafik steht
   je nach Seite in unterschiedlich breiten Spalten. Ohne Container-Query-
   Unterstützung bleibt sie gestapelt — vollständig lesbar, nur untereinander.
   ------------------------------------------------------------------------ */

.flow {
  margin-top: var(--space-6);
  container-type: inline-size;
  container-name: flow;
}

.flow__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.flow__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.flow__caption {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.flow__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-3);
  min-height: var(--space-3);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.flow__card {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.flow__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background-color: var(--color-surface-tinted);
  border-bottom: var(--border-width) solid var(--color-border);
}

.flow__card-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.flow__card-title svg {
  width: var(--space-2);
  height: var(--space-2);
}

.flow__card-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
  white-space: nowrap;
}

/* flex-grow lässt den Körper die Karte ausfüllen, damit alle drei Karten
   unten auf einer Linie enden, auch wenn sie unterschiedlich viel Inhalt
   tragen. */
.flow__card-body {
  flex-grow: 1;
  padding: var(--space-2);
}

/* Für Karte 2: die Feldzeilen bringen ihr eigenes Innenmaß mit und ihre
   Trennlinien sollen bis an den Kartenrand laufen, wie in einer Tabelle. */
.flow__card-body--flush {
  padding: 0;
}

/* Karte 1 — Posteingang */

/* max-width: none — wie .flow__rows, siehe dort. */
.flow__mail-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-0-5) var(--space-2);
  margin: 0;
  max-width: none;
  font-size: var(--font-size-xs);
}

/* margin-top hebt `dd + dt` aus base.css auf. Die Regel dort gilt der
   gestapelten Definitionsliste (Begriff über Beschreibung); hier stehen
   Begriff und Wert nebeneinander im Raster, und der Abstand hätte "Betreff"
   um 16px unter seinen eigenen Wert geschoben. */
.flow__mail-meta dt {
  margin-top: 0;
  color: var(--color-text-subtle);
}

.flow__mail-meta dd {
  margin: 0;
  overflow-wrap: break-word;
}

.flow__mail-text {
  margin-top: var(--space-1);
  padding-top: var(--space-1);
  border-top: var(--border-width) solid var(--color-border);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-snug);
}

/* Die im Original erkannten Textstellen. <mark> ist hier semantisch
   richtig (hervorgehobene Fundstelle), die gelbe Browser-Vorgabe wird
   durch die Marken-Petrolfarbe ersetzt. */
.flow__mail-text mark {
  background-color: transparent;
  color: var(--color-secondary);
  text-decoration: underline;
  text-decoration-color: var(--color-secondary);
  text-underline-offset: 0.15em;
}

.flow__mail-sig {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}

/* Karte 2 — erkannte Felder */

/* max-width: none hebt `dl { max-width: var(--measure) }` aus base.css auf.
   Die Zeilen sind eine Tabelle, kein Fließtext — ihre Trennlinien sollen über
   die ganze Kartenbreite laufen und nicht nach 68ch abbrechen. */
.flow__rows {
  margin: 0;
  max-width: none;
}

/* Label-Spalte `auto`, nicht fest: sie wird so breit wie das längste Label
   und nicht breiter. Eine feste Spaltenbreite ließ neben drei Karten in einer
   Reihe zu wenig für den Wert übrig. */
.flow__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-0-5) var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-bottom: var(--border-width) solid var(--color-border);
  font-size: var(--font-size-xs);
}

.flow__row:last-child {
  border-bottom: 0;
}

.flow__row dt {
  color: var(--color-text-subtle);
}

.flow__row dd {
  margin: 0;
  color: var(--color-secondary);
  overflow-wrap: break-word;
}

/* Feld mit Rückfrage: getönte Zeile plus Amber-Punkt. Amber ist hier
   Fläche beziehungsweise Rahmen; der Hinweistext nutzt
   --color-accent-text, weil --color-accent als Textfarbe durch AA fällt. */
.flow__row--flag {
  background-color: var(--color-surface-tinted);
  border-left: var(--border-width-accent) solid var(--color-accent);
}

.flow__row--flag dd {
  color: var(--color-text);
}

.flow__flag-value {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

.flow__flag-dot {
  flex: none;
  width: var(--space-1);
  height: var(--space-1);
  border-radius: var(--radius-pill);
  background-color: var(--color-accent);
}

.flow__flag-note {
  display: block;
  margin-top: var(--space-0-5);
  font-size: var(--font-size-xs);
  color: var(--color-accent-text);
}

/* Karte 3 — Bestätigung */

/* Kein min-height: die Karte wird von der Reihe auf die Höhe der anderen
   beiden gezogen, der Inhalt sitzt darin mittig. Ein fester Mindestwert
   hätte die Grafik in der gestapelten Ansicht unnötig hoch gemacht. */
.flow__card--result .flow__card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding-block: var(--space-4);
  text-align: center;
}

/* flex: none — in der Flex-Spalte des Kartenkörpers würde das SVG sonst
   gestaucht, sobald der Platz knapp wird. */
.flow__check {
  flex: none;
  width: var(--space-8);
  height: var(--space-8);
  fill: none;
  stroke: var(--color-secondary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flow__result-title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

.flow__result-note {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}

/* Verbinder */

.flow__connector {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-1) 0;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-snug);
  color: var(--color-text-muted);
  text-align: center;
}

.flow__connector svg {
  flex: none;
  width: var(--space-4);
  height: var(--space-2);
  fill: none;
  stroke: var(--color-secondary);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(90deg);
}

/* 54em ≈ 864px Container-Breite. Der Wert ist an der Karte gemessen, nicht am
   Fenster. Mit den gekürzten Beispielwerten kommen die Karten jetzt mit rund
   220px aus, deshalb liegt die Schwelle niedriger als beim vorigen Aufbau.
   Darunter stehen die drei Schritte untereinander mit je voller Breite. */
@container flow (min-width: 54em) {
  .flow__grid {
    grid-template-columns:
      minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--space-2);
    /* stretch (Vorgabe) statt start: so enden alle drei Karten unten auf
       einer Linie, statt je nach Inhalt unterschiedlich weit zu reichen. */
    align-items: stretch;
  }

  .flow__step {
    height: 100%;
  }

  /* Schmal halten: jeder Pixel, den der Verbinder nimmt, fehlt den drei
     Karten. Der Beschriftungstext darf ruhig zwei- bis dreizeilig umbrechen. */
  .flow__connector {
    flex-direction: column;
    align-self: center;
    max-width: 5.5rem;
    padding: 0;
  }

  .flow__connector svg {
    transform: none;
  }
}

/* Zeitliche Staffelung. Nur mit JavaScript; ohne steht alles sofort. */

.js-motion .flow__step,
.js-motion .flow__connector {
  opacity: 0;
  transform: translate3d(0, var(--reveal-shift), 0);
  transition: opacity var(--duration-reveal) var(--ease-out),
              transform var(--duration-reveal) var(--ease-out);
  transition-delay: calc(var(--flow-i, 0) * var(--flow-step-delay));
}

.js-motion .flow.is-running .flow__step,
.js-motion .flow.is-running .flow__connector {
  opacity: 1;
  transform: none;
}

/* Die erkannten Felder erscheinen, nachdem Karte 2 steht. */
.js-motion .flow__row {
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
  transition-delay: calc(var(--flow-step-delay) + var(--duration-reveal)
                    + var(--flow-row-i, 0) * var(--flow-row-delay));
}

.js-motion .flow.is-running .flow__row {
  opacity: 1;
}

/* Der Haken zeichnet sich ein, sobald Karte 3 steht. */
.js-motion .flow__check-ring {
  stroke-dasharray: 170;
  stroke-dashoffset: 170;
  transition: stroke-dashoffset var(--duration-slow) var(--ease-out);
  transition-delay: calc(2 * var(--flow-step-delay) + var(--duration-reveal));
}

.js-motion .flow__check-mark {
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  transition: stroke-dashoffset var(--duration-slow) var(--ease-out);
  transition-delay: calc(2 * var(--flow-step-delay) + var(--duration-reveal)
                    + var(--duration-slow));
}

.js-motion .flow.is-running .flow__check-ring,
.js-motion .flow.is-running .flow__check-mark {
  stroke-dashoffset: 0;
}


/* --- Tabs / Accordion -----------------------------------------------------
   Ein einziges Markup für beide Darstellungen. Bis 900px stehen Knopf und
   Panel abwechselnd untereinander (Accordion), darüber sortiert `order`
   alle Knöpfe in die erste Zeile (Tab-Leiste) und alle Panels darunter.
   motion.js setzt die passenden ARIA-Rollen je Breite und schaltet die
   Panels über [hidden]. Ohne Skript sind alle Panels offen.              */

.tabs {
  display: block;
}

.tabs__tab {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.tabs__tab + .tabs__panel {
  margin-top: var(--space-2);
}

.tabs__panel + .tabs__tab {
  margin-top: var(--space-3);
}

.tabs__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-1) var(--space-2);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: var(--transition-color);
}

.tabs__button:hover {
  border-color: var(--color-border-strong);
  background-color: var(--color-surface-hover);
}

.tabs__button[aria-expanded="true"],
.tabs__button[aria-selected="true"] {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.tabs__icon {
  flex: none;
  width: var(--space-2);
  height: var(--space-2);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--duration-lift) var(--ease-standard);
}

.tabs__button[aria-expanded="true"] .tabs__icon {
  transform: rotate(180deg);
}

/* Auf Tab-Breite ist das Aufklapp-Zeichen sinnlos. */
.tabs__panel {
  min-width: 0;
}

.tabs__panel[hidden] {
  display: none;
}

@media (min-width: 56.25em) {
  .tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .tabs__tab {
    order: 1;
  }

  .tabs__panel {
    order: 2;
    width: 100%;
    margin-top: var(--space-4);
  }

  .tabs__tab + .tabs__panel,
  .tabs__panel + .tabs__tab {
    margin-top: 0;
  }

  .tabs__button {
    width: auto;
    min-height: var(--control-height-sm);
    border-color: transparent;
    border-bottom: var(--border-width-accent) solid transparent;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background-color: transparent;
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
  }

  .tabs__button:hover {
    background-color: var(--color-surface-hover);
    border-bottom-color: var(--color-border-strong);
  }

  .tabs__button[aria-selected="true"] {
    border-bottom-color: var(--color-accent);
    background-color: transparent;
    color: var(--color-primary);
  }

  .tabs__icon {
    display: none;
  }

  /* Crossfade: das aktive Panel blendet ein, statt hart zu erscheinen. */
  .js-motion .tabs__panel {
    animation: tab-fade var(--duration-base) var(--ease-out) both;
  }
}

@keyframes tab-fade {
  from {
    opacity: 0;
    transform: translate3d(0, calc(var(--reveal-shift) / 2), 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}


/* --- "So arbeiten wir"-Leiste ---------------------------------------------
   Steht an der Stelle, an der andere Anbieter Kundenlogos zeigen. Das
   Unternehmen hat noch keine Referenzkunden — hier stehen deshalb
   Arbeitsweisen, keine erfundenen Belege.                                 */

/* max-width: none hebt `ul, ol { max-width: var(--measure) }` aus base.css
   auf. Ohne das quetschen sich die drei Spalten in 68ch (rund 610px) statt
   die volle Containerbreite zu nutzen — wie bei .founders und
   .data-group__list, die dieselbe Aufhebung brauchen. */
.approach {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  max-width: none;
  list-style: none;
}

.approach > li + li {
  margin-top: 0;
}

/* Icon oben, Text darunter, alles auf der Mittelachse. Die drei Punkte stehen
   nebeneinander und sind gleichrangig — zentriert lesen sie sich als Reihe,
   linksbündig zerfielen sie optisch in drei Blöcke. */
.approach__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  text-align: center;
}

.approach__icon {
  flex: none;
  width: var(--space-4);
  height: var(--space-4);
  fill: none;
  stroke: var(--color-secondary);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.approach__body > * + * {
  margin-top: var(--space-0-5);
}

.approach__title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.approach__text {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

@media (min-width: 56.25em) {
  .approach {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap-lg);
  }
}


/* --- Gründerfoto ----------------------------------------------------------
   Quadratisch (1:1). Der SVG-Platzhalter und ein späteres echtes Foto
   werden identisch eingebunden — es wird nur der src-Wert getauscht.     */

.founder__photo {
  display: block;
  width: var(--space-10);
  height: var(--space-10);
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  border: var(--border-width) solid var(--color-border);
  background-color: var(--color-surface-tinted);
  object-fit: cover;
}

.founder--card {
  align-items: flex-start;
}


/* --- Person im CTA --------------------------------------------------------
   Gleiche Einbindung wie .founder__photo, damit auch hier später nur der
   src-Wert getauscht wird.                                                */

.cta-person {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.cta-person__photo {
  flex: none;
  display: block;
  width: var(--space-8);
  height: var(--space-8);
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--color-border);
  background-color: var(--color-surface-tinted);
  object-fit: cover;
}

.on-dark .cta-person__photo {
  border-color: var(--color-border-on-dark);
}

.cta-person__name {
  margin: 0;
  font-weight: var(--font-weight-semibold);
}

.cta-person__role {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.on-dark .cta-person__role {
  color: var(--color-text-invert-muted);
}

.cta-band__points {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.cta-band__points > li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
}

.cta-band__points > li + li {
  margin-top: var(--space-1);
}

.cta-band__points svg {
  flex: none;
  width: var(--space-2);
  height: var(--space-2);
  margin-top: var(--space-0-5);
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==========================================================================
   18. REDUZIERTE BEWEGUNG
   base.css setzt Transitions und Animationen bereits auf 0.
   Hier zusätzlich alle Transformationen abschalten, die sonst springen.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .link-arrow:hover .link-arrow__icon,
  .link-arrow:focus-visible .link-arrow__icon {
    transform: none;
  }

  .site-header {
    transition: none;
  }

  /* Hover-Lift und Ablauf-Animation komplett aus. motion.js setzt die
     Klasse js-motion in diesem Fall ohnehin nicht, das hier ist die
     zweite Sicherung für den Fall, dass die Einstellung erst nach dem
     Laden umgestellt wird. */
  .btn:hover,
  .card:hover,
  .card:focus-within {
    transform: none;
  }

  .tabs__button[aria-expanded="true"] .tabs__icon {
    transform: rotate(180deg);
  }

  .js-motion [data-reveal],
  .js-motion .flow__step,
  .js-motion .flow__connector,
  .js-motion .flow__row {
    opacity: 1;
    transform: none;
  }

  .js-motion .flow__check-ring,
  .js-motion .flow__check-mark {
    stroke-dashoffset: 0;
  }

  .js-motion .tabs__panel {
    animation: none;
  }
}


/* ==========================================================================
   19. DRUCK
   ========================================================================== */

@media print {
  .site-header,
  .site-footer,
  .nav,
  .nav-toggle,
  .cta-band,
  .form__actions {
    display: none !important;
  }

  .hero,
  .page-hero,
  .trust-teaser,
  .contact-card,
  .toc {
    background: none;
    border: 0;
  }

  .data-group,
  .callout {
    break-inside: avoid;
  }
}