/* ==========================================================================
   Lucrata – Stylesheet
   Version 2.0, umgesetzt aus dem Claude-Design-Canvas "Lucrata Website v2"
   Stand: 2026-08-21

   Aufbau:
    1. Schrift (lokal, keine externen Requests)
    2. Tokens aus dem Design-System
    3. Grundlagen und Hilfsklassen
    4. Kopfbereich und Navigation
    5. Hero
    6. Laufband
    7. Bausteine (Knopf, Karte, Eyebrow, Raster)
    8. Sektion: Ausgangslage
    9. Sektion: Akzentfläche
   10. Sektion: Audit
   11. Sektion: Einsatzfelder
   12. Sektion: Recht und Datenschutz
   13. Sektion: Zu meiner Person
   14. Sektion: Ablauf
   15. Sektion: Fragen
   16. Sektion: Kontakt
   17. Fußbereich
   18. Rechtsseiten
   19. Bewegung und Barrierefreiheit
   20. Druck
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Schrift
   Inter liegt lokal. Das Design-System importiert Inter von Google Fonts.
   Dieser Import ist hier bewusst NICHT übernommen: die Seite darf keine
   externen Requests auslösen (siehe CLAUDE.md und Datenschutzerklärung).
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   Werte unverändert aus dem Design-System (tokens/colors.css, spacing.css,
   typography.css). Eine bewusste Ergänzung: --text-muted-light.
   -------------------------------------------------------------------------- */

:root {
  /* Farben */
  --color-electric-lime: #beff50;
  --color-off-black-ink: #14140f;
  --color-off-white-canvas: #f5f5eb;
  --color-pure-white: #ffffff;
  --color-ash: #d2d2c8;
  --color-graphite: #6e6e64;
  --color-deep-charcoal: #30302a;
  --color-stone: #919183;
  --color-smoke: #b9b9b7;

  /* Flächen */
  --surface-page: #ffffff;
  --surface-card: #f5f5eb;
  --surface-card-elevated: #ffffff;
  --surface-accent: #beff50;
  --surface-dark: #30302a;

  /* Text */
  --text-primary: #14140f;
  --text-secondary: #6e6e64;
  --text-on-dark: #f5f5eb;
  --text-on-dark-secondary: #d2d2c8;
  --text-on-accent: #14140f;

  /* Ergänzung gegenüber dem Design-System.
     Das System nutzt --color-stone (#919183) auch für kleine Labels auf
     weißem und pergamentfarbenem Grund. Dort liegt der Kontrast bei 3,2 zu 1
     bzw. 2,9 zu 1 und damit unter der Anforderung von WCAG AA (4,5 zu 1).
     Auf hellen Flächen wird deshalb Graphit genutzt, auf dunklen bleibt Stone. */
  --text-muted-light: #6e6e64;

  /* Zweite Ergänzung, gleiche Ursache: Stone auf der Kohle-Fläche (#30302a)
     erreicht nur 4,16 zu 1. Für die kleinen Ziffern in der Ablauf-Sektion
     wird deshalb ein helleres Grau genutzt, gemessen 5,6 zu 1. */
  --text-muted-charcoal: #a0a091;

  /* Linien */
  --border-default: #d2d2c8;
  --border-subtle: #919183;
  --line-on-dark: rgba(245, 245, 235, 0.14);
  --line-on-dark-strong: rgba(245, 245, 235, 0.2);

  /* Schrift */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;

  /* Maße */
  --page-max-width: 1240px;
  --page-gutter: clamp(20px, 4vw, 48px);
  --section-padding: clamp(72px, 9vw, 128px);
  --header-height: 76px;

  /* Radien */
  --radius-lg: 8px;
  --radius-cards: 28px;
  --radius-full: 9999px;
}

/* --------------------------------------------------------------------------
   3. Grundlagen
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-off-black-ink);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

a:hover {
  opacity: 0.82;
}

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

h1,
h2,
h3 {
  font-weight: var(--weight-medium);
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Sichtbarer Fokus. Auf der Lime-Fläche und im Kopfbereich wird die Farbe
   überschrieben, sonst wäre der Rahmen dort unsichtbar. */
:focus-visible {
  outline: 3px solid var(--text-primary);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--color-electric-lime);
  color: var(--text-on-accent);
  padding: 14px 22px;
  font-weight: var(--weight-medium);
  border-radius: 0 0 var(--radius-lg) 0;
}

.skip-link:focus {
  left: 0;
}

.page {
  width: 100%;
  background: var(--surface-page);
}

.wrap {
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

.section {
  padding: var(--section-padding) 0;
  scroll-margin-top: var(--header-height);
}

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

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

.section--dark {
  background: var(--surface-dark);
  color: var(--text-on-dark);
}

.section--ink {
  background: var(--color-off-black-ink);
  color: var(--text-on-dark);
  position: relative;
  overflow: hidden;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 72px);
}

/* Senkrechtes Rasterbild auf den dunklen Flächen. Rein dekorativ. */
.grid-lines {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to right,
    rgba(245, 245, 235, 0.06) 0 1px,
    transparent 1px 25%
  );
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. Kopfbereich
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--color-off-black-ink);
  color: var(--text-on-dark);
}

.header :focus-visible {
  outline-color: var(--color-electric-lime);
}

.header__inner {
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.brand__dot {
  width: 7px;
  height: 7px;
  background: var(--color-electric-lime);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.wordmark {
  font-size: 20px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.02em;
  color: var(--text-on-dark);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 40px);
  min-width: 0;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 40px);
  min-width: 0;
}

.nav__links a {
  font-size: 13px;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-on-dark-secondary);
  white-space: nowrap;
}

.nav__links a:hover {
  color: var(--text-on-dark);
  opacity: 1;
}

.nav__cta {
  display: flex;
  flex-shrink: 0;
}

/* Lesefortschritt. Wird per JavaScript gesetzt, ohne JavaScript bleibt der
   Balken bei null und die Leiste ist eine schlichte Trennlinie. */
.progress {
  height: 2px;
  background: var(--line-on-dark);
}

.progress__bar {
  height: 2px;
  width: 0;
  background: var(--color-electric-lime);
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--color-off-black-ink);
  color: var(--text-on-dark);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(245, 245, 235, 0.1);
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 132px) var(--page-gutter) 0;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 88px);
}

.hero__top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: clamp(40px, 5vw, 72px);
  align-items: end;
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 34px);
  min-width: 0;
}

.hero h1 {
  font-size: clamp(44px, 7.4vw, 104px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--text-on-dark);
}

.hero h1 .accent {
  color: var(--color-electric-lime);
}

.hero__lead {
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.5;
  color: var(--text-on-dark-secondary);
  max-width: 52ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.hero__note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-stone);
}

.hero :focus-visible {
  outline-color: var(--color-electric-lime);
}

/* Portrait mit versetztem Lime-Rahmen. Die Fläche verschwindet, solange kein
   Bild eingesetzt ist. Eine leere graue Fläche sagt "hier fehlt etwas". */
.portrait-frame {
  position: relative;
  padding-left: 14px;
  padding-bottom: 14px;
  min-width: 0;
  /* Das Bild ist Hochformat 4 zu 5 und wird nicht auf die volle Spaltenbreite
     gezogen, sonst wuerde der Hero zu hoch. Es sitzt buendig am rechten Rand. */
  width: min(100%, 434px);
  justify-self: end;
}

/* Solange kein Bild eingesetzt ist, verschwindet die ganze Flaeche.
   Eine leere graue Flaeche sagt "hier fehlt etwas". */
.portrait-frame:has(.portrait:empty) {
  display: none;
}

.portrait-frame::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 88%;
  height: 78%;
  border: 1px solid var(--color-electric-lime);
}

.portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  overflow: hidden;
  background: var(--color-deep-charcoal);
}

.portrait picture,
.portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Drei Schritte als Fuß des ersten Bildschirms. Die 1px-Lücken im Raster
   erzeugen die Trennlinien, deshalb sitzt der Hintergrund auf den Feldern. */
.hero__foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-on-dark);
  border-top: 1px solid var(--line-on-dark);
}

.hero__step {
  background: var(--color-off-black-ink);
  padding: 26px 0 30px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.hero__step + .hero__step {
  padding-left: 28px;
}

.hero__step .label {
  font-size: 12px;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-stone);
}

.hero__step p {
  font-size: 17px;
  line-height: 1.35;
  font-weight: var(--weight-medium);
  color: var(--text-on-dark);
  max-width: 30ch;
}

/* --------------------------------------------------------------------------
   6. Laufband
   -------------------------------------------------------------------------- */

.ticker {
  position: relative;
  margin-top: clamp(40px, 5vw, 72px);
  background: var(--color-electric-lime);
  overflow: hidden;
}

.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker 78s linear infinite;
}

.ticker__group {
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 12px 18px;
  font-size: 13px;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-on-accent);
  white-space: nowrap;
}

@keyframes ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------------------
   7. Bausteine
   -------------------------------------------------------------------------- */

/* Knopf, Variante primary aus dem Design-System */
.btn {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: opacity 0.15s ease;
  background: var(--color-electric-lime);
  color: var(--text-on-accent);
  border-radius: var(--radius-cards);
  padding: 16px 28px;
  font-size: 16px;
  text-align: center;
}

.btn:hover {
  opacity: 0.82;
}

.btn--sm {
  padding: 13px 20px;
  font-size: 14px;
  white-space: nowrap;
}

/* Zweiter Knopf im Hero: nur Kontur, damit es einen eindeutigen Hauptweg gibt */
.btn--outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(245, 245, 235, 0.28);
  background: transparent;
  font-size: 16px;
  font-weight: var(--weight-medium);
  color: var(--text-on-dark);
}

.btn--outline .arrow {
  color: var(--color-electric-lime);
}

/* Eyebrow, also die kleine Zeile über einer Überschrift */
.eyebrow {
  font-size: 12px;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
}

.eyebrow--dotted {
  display: flex;
  align-items: center;
  gap: 12px;
}

.eyebrow--lime {
  color: var(--color-electric-lime);
}

.eyebrow--on-accent {
  color: var(--text-on-accent);
  opacity: 0.7;
}

.dot {
  width: 6px;
  height: 6px;
  background: var(--color-electric-lime);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.dot--ink {
  background: var(--text-primary);
}

.num {
  font-size: 12px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  color: var(--text-muted-light);
}

.num--on-dark {
  color: var(--color-stone);
}

.num--lime {
  color: var(--color-electric-lime);
}

/* Kopf einer Sektion, ein- oder zweispaltig */
.head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 820px;
  min-width: 0;
}

.head--split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  max-width: none;
}

.head h2 {
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.head__lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 60ch;
}

.head--split .head__lead {
  max-width: 46ch;
}

/* Karte, Variante dark aus dem Design-System */
.card-dark {
  background: var(--surface-dark);
  color: var(--text-on-dark);
  border-radius: var(--radius-cards);
  padding: clamp(32px, 3.6vw, 56px);
}

/* --------------------------------------------------------------------------
   8. Sektion: Ausgangslage
   -------------------------------------------------------------------------- */

/* Mindestbreite 340 statt 260 Pixel. Damit stehen die sechs Glieder auf dem
   Desktop als drei plus drei statt vier plus zwei, ohne Lücke in der zweiten
   Reihe. Auf mittleren Breiten werden daraus zwei Spalten, auf dem Handy eine. */
.chain {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(20px, 2.4vw, 36px);
}

.chain__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--text-primary);
  padding-top: 18px;
  min-width: 0;
}

/* Ohne das starten die Absätze auf unterschiedlicher Höhe, sobald eine
   Zwischenüberschrift zweizeilig wird. Die vier Zeilen jeder Karte werden
   deshalb über alle Karten einer Reihe hinweg gleich hoch gehalten. */
@supports (grid-template-rows: subgrid) {
  .chain__item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    row-gap: 10px;
    align-content: start;
  }
}

.chain__marker {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chain__marker .dot {
  width: 7px;
  height: 7px;
}

.chain__word {
  font-size: clamp(23px, 2.3vw, 30px);
  font-weight: var(--weight-medium);
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: var(--text-primary);
}

.chain__item h3 {
  margin-top: 2px;
  font-size: 16px;
  line-height: 1.35;
  color: var(--text-primary);
}

.chain__item p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.pullquote {
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: var(--weight-medium);
  max-width: 48ch;
}

/* --------------------------------------------------------------------------
   9. Sektion: Akzentfläche
   -------------------------------------------------------------------------- */

.accent-panel {
  background: var(--surface-accent);
  color: var(--text-on-accent);
  padding: clamp(72px, 9vw, 120px) 0;
}

/* Auf Lime muss der Fokusrahmen dunkel sein, sonst ist er unsichtbar. */
.accent-panel :focus-visible {
  outline-color: var(--text-on-accent);
}

.accent-panel h2 {
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--text-on-accent);
}

.accent-panel h2 span {
  display: block;
}

.accent-panel__claim {
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: var(--weight-medium);
  color: var(--text-on-accent);
  max-width: 30ch;
}

.accent-panel__foot {
  border-top: 1px solid rgba(20, 20, 15, 0.35);
  padding-top: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}

.accent-panel__foot .lead {
  font-size: clamp(19px, 1.9vw, 23px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-weight: var(--weight-medium);
  max-width: 36ch;
}

.accent-panel__foot .body {
  font-size: 17px;
  line-height: 1.6;
  opacity: 0.78;
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   10. Sektion: Audit
   -------------------------------------------------------------------------- */

.steps {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 40px);
}

.steps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(24px, 3vw, 44px);
}

.step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

@supports (grid-template-rows: subgrid) {
  .step {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    row-gap: 12px;
    align-content: start;
  }
}

.step__rule {
  display: flex;
  align-items: center;
  gap: 10px;
}

.step__bullet {
  width: 9px;
  height: 9px;
  background: var(--text-primary);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.step__bullet--lime {
  background: var(--color-electric-lime);
}

.step__line {
  height: 1px;
  flex: 1;
  background: var(--border-default);
}

.step__line--lime {
  background: var(--color-electric-lime);
}

.step h3 {
  font-size: 23px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.step p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 46ch;
}

.result {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.result__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-electric-lime);
  color: var(--text-on-accent);
  border-radius: var(--radius-full);
  padding: 8px 18px;
  font-size: 12px;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.result__head > span:last-child {
  font-size: 16px;
  line-height: 1.4;
  font-weight: var(--weight-medium);
}

.result__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(28px, 3.4vw, 56px);
  align-items: start;
}

.result__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.result__intro h3 {
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--text-on-dark);
  max-width: 22ch;
}

.result__intro p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-on-dark-secondary);
  max-width: 42ch;
}

.result__list li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-size: 17px;
  line-height: 1.45;
  color: var(--text-on-dark);
  border-top: 1px solid rgba(245, 245, 235, 0.18);
  padding: 16px 0;
}

.result__list li:last-child {
  border-bottom: 1px solid rgba(245, 245, 235, 0.18);
}

.result__list .arrow {
  color: var(--color-electric-lime);
  flex-shrink: 0;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.cta-row p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 40ch;
}

/* --------------------------------------------------------------------------
   11. Sektion: Einsatzfelder
   -------------------------------------------------------------------------- */

.fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 20px;
}

/* Die abgeschnittene Ecke entsteht aus zwei Flächen: außen die Linienfarbe,
   innen die Seitenfarbe, beide mit derselben Kontur. Das ergibt eine Kante,
   die ein Rahmen mit border-radius nicht kann. */
.field {
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
  background: var(--border-default);
  padding: 1px;
  min-width: 0;
}

.field__inner {
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
  background: var(--surface-page);
  padding: clamp(30px, 2.8vw, 40px);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.field__label {
  font-size: 11px;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted-light);
}

.field h3 {
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 22ch;
}

.field p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.field__metric {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--text-primary);
  padding-top: 14px;
}

.field__metric span {
  font-size: 11px;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-primary);
}

.field__metric p {
  font-size: 16px;
  line-height: 1.55;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   12. Sektion: Recht und Datenschutz
   -------------------------------------------------------------------------- */

.legal-block {
  border-top: 2px solid var(--text-primary);
  padding-top: clamp(28px, 3vw, 40px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(28px, 3.4vw, 56px);
  align-items: start;
}

.legal-block__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.legal-block__intro h3 {
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  max-width: 22ch;
}

.legal-block__intro p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 44ch;
}

.legal-list {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.legal-list__item {
  border-top: 1px solid var(--border-default);
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.legal-list__item:last-child {
  border-bottom: 1px solid var(--border-default);
}

.legal-list__item span {
  font-size: 16px;
  font-weight: var(--weight-medium);
}

.legal-list__item p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   13. Sektion: Zu meiner Person
   -------------------------------------------------------------------------- */

.about {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

.about__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 600px;
  min-width: 0;
}

.about__text h2 {
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.about__text .lead {
  font-size: 18px;
  line-height: 1.55;
  max-width: 58ch;
}

.about__text p:not(.lead):not(.claim) {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 60ch;
}

.about__text .claim {
  margin-top: 6px;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: var(--weight-medium);
  max-width: 40ch;
}

.rows {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--text-primary);
  min-width: 0;
}

.rows__item {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-default);
}

.rows__item .num {
  width: 28px;
  flex-shrink: 0;
}

.rows__item span:last-child {
  font-size: 17px;
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   14. Sektion: Ablauf
   -------------------------------------------------------------------------- */

.section--dark :focus-visible {
  outline-color: var(--color-electric-lime);
}

.section--dark .head h2 {
  color: var(--text-on-dark);
}

.section--dark .num--on-dark {
  color: var(--text-muted-charcoal);
}

.flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(24px, 2.8vw, 40px);
}

.flow__item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

@supports (grid-template-rows: subgrid) {
  .flow__item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    row-gap: 14px;
    align-content: start;
  }
}

.flow__rule {
  display: flex;
  align-items: center;
  gap: 10px;
}

.flow__bullet {
  width: 10px;
  height: 10px;
  background: rgba(245, 245, 235, 0.35);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.flow__bullet--lime {
  background: var(--color-electric-lime);
}

.flow__line {
  height: 1px;
  flex: 1;
  background: var(--line-on-dark-strong);
}

.flow__item h3 {
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-on-dark);
}

.flow__item p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-on-dark-secondary);
}

/* --------------------------------------------------------------------------
   15. Sektion: Fragen
   -------------------------------------------------------------------------- */

.faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
}

.faq__head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 420px;
  min-width: 0;
}

.faq__head h2 {
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.faq__list {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.faq__item {
  border-top: 1px solid var(--border-default);
}

.faq__item:last-child {
  border-bottom: 1px solid var(--border-default);
}

.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: var(--weight-medium);
}

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

.faq__item summary::marker {
  content: "";
}

.faq__toggle {
  flex-shrink: 0;
  font-size: 22px;
  line-height: 1.2;
  color: var(--color-graphite);
  transition: transform 0.18s ease;
}

.faq__item[open] .faq__toggle {
  transform: rotate(45deg);
}

.faq__item p {
  padding-bottom: 26px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   16. Sektion: Kontakt
   -------------------------------------------------------------------------- */

.contact {
  padding: clamp(80px, 10vw, 140px) 0;
}

.contact__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

.contact__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 620px;
  min-width: 0;
}

.contact__text h2 {
  font-size: clamp(34px, 5.4vw, 72px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--text-on-dark);
}

.contact__lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-on-dark-secondary);
  max-width: 52ch;
}

.contact__agenda {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}

.contact__agenda-item {
  display: flex;
  gap: 16px;
  align-items: baseline;
  border-top: 1px solid var(--line-on-dark-strong);
  padding: 14px 0;
}

.contact__agenda-item:last-child {
  border-bottom: 1px solid var(--line-on-dark-strong);
}

.contact__agenda-item .num {
  width: 26px;
  flex-shrink: 0;
  color: var(--color-electric-lime);
}

.contact__agenda-item span:last-child {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-on-dark-secondary);
  max-width: 46ch;
}

.contact__direct {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}

.contact__line .label {
  font-size: 11px;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-stone);
}

.contact__phone {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: var(--weight-medium);
  letter-spacing: -0.03em;
  color: var(--color-electric-lime);
  /* Trefferfläche auf dem Handy. Ohne das liegt sie unter den geforderten 44px. */
  display: inline-block;
  padding: 4px 0;
}

.contact__mail {
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: var(--weight-medium);
  letter-spacing: -0.02em;
  color: var(--text-on-dark);
  display: inline-block;
  padding: 10px 0;
}

.contact__region {
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-stone);
  max-width: 44ch;
}

/* Formular. Es sendet nichts an einen Server, sondern öffnet das
   Mailprogramm des Besuchers mit vorbereitetem Text. Deshalb steht die
   Adresse zusätzlich als Klartext daneben. */
.contact__form-card {
  background: var(--surface-card);
  color: var(--text-primary);
  border-radius: var(--radius-cards);
  padding: clamp(28px, 3.2vw, 44px);
  min-width: 0;
}

.contact__form-card :focus-visible {
  outline-color: var(--text-primary);
}

.form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form__head h3 {
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  max-width: 20ch;
}

.form__head p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 38ch;
}

.form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form .label {
  font-size: 11px;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
}

.form input,
.form textarea {
  background: var(--color-pure-white);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 13px 16px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  width: 100%;
}

.form textarea {
  resize: vertical;
}

.form input:focus,
.form textarea:focus {
  border-color: var(--text-primary);
}

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}

.form__note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 24ch;
}

/* --------------------------------------------------------------------------
   17. Fußbereich
   -------------------------------------------------------------------------- */

.footer {
  background: var(--color-off-black-ink);
  color: var(--text-on-dark);
  padding: clamp(48px, 6vw, 72px) 0 32px;
  border-top: 1px solid var(--line-on-dark);
}

.footer :focus-visible {
  outline-color: var(--color-electric-lime);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 64px);
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 32px;
  align-items: start;
}

.footer address {
  font-style: normal;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-on-dark-secondary);
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.footer__col a {
  font-size: 16px;
  color: var(--text-on-dark-secondary);
  /* 10px oben und unten ergeben zusammen mit der Zeilenhöhe die
     geforderten 44 Pixel Trefferfläche auf dem Handy. */
  padding: 10px 0;
}

.footer__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line-on-dark);
  padding-top: 28px;
}

.footer__mark {
  font-size: clamp(48px, 12vw, 168px);
  line-height: 0.82;
  letter-spacing: -0.05em;
  font-weight: var(--weight-medium);
  color: var(--text-on-dark);
}

.footer__claim {
  font-size: 13px;
  color: var(--color-stone);
}

/* --------------------------------------------------------------------------
   18. Rechtsseiten
   -------------------------------------------------------------------------- */

.legal {
  background: var(--surface-page);
  padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 112px);
}

.legal .back {
  display: inline-block;
  font-size: 15px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-default);
  padding-bottom: 2px;
  margin-bottom: 32px;
}

.legal h1 {
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: 28px;
}

.legal h2 {
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 44px 0 14px;
}

.legal p,
.legal ul {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 68ch;
  margin-bottom: 14px;
}

.legal ul {
  list-style: disc;
  padding-left: 22px;
}

.legal li {
  margin-bottom: 6px;
}

.legal address {
  font-style: normal;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-primary);
  margin-bottom: 14px;
}

.legal strong {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}

.legal a {
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-default);
}

.legal .micro {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   19. Bewegung, Barrierefreiheit, Umbrüche
   -------------------------------------------------------------------------- */

/* Einblenden beim Scrollen. Der Grundzustand ist sichtbar. Ohne JavaScript
   bleibt alles sichtbar, es wird nichts versteckt. */
.reveal {
  opacity: 1;
  transform: none;
}

.js .reveal.is-hidden {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .ticker__track {
    animation: none;
    transform: none;
  }

  .js .reveal.is-hidden {
    opacity: 1;
    transform: none;
    transition: none;
  }

  * {
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 900px) {
  .nav__links {
    display: none;
  }

  .hero__foot {
    grid-template-columns: 1fr;
  }

  .hero__step + .hero__step {
    padding-left: 0;
    padding-top: 26px;
  }

  .rows__item .num,
  .contact__agenda-item .num {
    display: none;
  }
}

@media (max-width: 520px) {
  /* Abweichung vom Entwurf: Der Canvas blendet den Knopf im Kopfbereich hier
     aus. Zusammen mit der ohnehin ausgeblendeten Navigation hätte der Kopf auf
     dem Handy dann keine Funktion mehr. Der Knopf bleibt deshalb stehen, der
     Abstand wird stattdessen verkleinert. */
  .header__inner {
    gap: 14px;
  }

  .nav__cta .btn--sm {
    padding: 13px 16px;
    font-size: 13px;
  }

  /* Vollbreite Knöpfe im Inhalt, für eine sichere Trefferfläche.
     Der Kopfbereich ist ausgenommen. */
  .hero__actions .btn,
  .hero__actions .btn--outline,
  .cta-row .btn,
  .form__foot .btn {
    width: 100%;
  }

  .hero__actions {
    align-items: stretch;
  }
}

@media (max-width: 340px) {
  .wordmark {
    font-size: 17px;
  }
}

/* --------------------------------------------------------------------------
   20. Druck
   -------------------------------------------------------------------------- */

@media print {
  .header,
  .ticker,
  .nav,
  .btn,
  .btn--outline,
  .contact__form-card,
  .grid-lines,
  .skip-link {
    display: none !important;
  }

  body,
  .hero,
  .section--ink,
  .section--dark,
  .accent-panel,
  .footer,
  .card-dark {
    background: #ffffff !important;
    color: #000000 !important;
  }

  .hero h1,
  .contact__text h2,
  .footer__mark,
  .result__intro h3,
  .result__intro p,
  .flow__item h3,
  .flow__item p,
  .hero__lead,
  .hero__step p,
  .contact__lead,
  .footer address,
  .footer__col a {
    color: #000000 !important;
  }

  .faq__item p {
    display: block !important;
  }

  a::after {
    content: " (" attr(href) ")";
    font-size: 12px;
  }

  a[href^="#"]::after {
    content: "";
  }
}