/* Handwerksheike — Stylesheet
   Werte verbindlich aus specs/design-system.md. Keine Hex-Werte außerhalb :root. */

@font-face {
  font-family: 'Libre Franklin';
  src: url('../assets/fonts/libre-franklin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

:root {
  --ink:        #161A1D;
  --ink-soft:   #4A5157;
  --navy:       #0F2A43;
  --primary:    #185FA5;
  --cta:        #1B6DC1;
  --cta-hover:  #14549B;
  --loss:       #B3261E;
  --loss-soft:  #FCEEEE;
  --bg:         #FFFFFF;
  --bg-soft:    #EDF2F8;   /* Blaustich statt Sandton, entschieden 31.08.2026 */
  --border:     #D3DCE6;   /* mitgezogen, damit der Rahmen nicht beige bleibt */
  --border-ui:  #767D85;

  /* abgeleitet aus --primary und --navy, keine eigenständigen Farben */
  --primary-wash: rgba(24, 95, 165, 0.07);
  --primary-tint: rgba(24, 95, 165, 0.16);
  --primary-stage: rgba(24, 95, 165, 0.11);
  --navy-line:    rgba(15, 42, 67, 0.14);

  /* Hero-Fläche: trägt die Farbe, die der Seite sonst fehlt */
  --hero-top:     rgba(24, 95, 165, 0.13);
  --hero-mid:     rgba(24, 95, 165, 0.08);
  --hero-bottom:  rgba(24, 95, 165, 0.03);

  /* Tiefe für wichtige Objekte im ersten Bildschirm */
  --shadow-card:  0 18px 42px rgba(15, 42, 67, 0.16), 0 3px 8px rgba(15, 42, 67, 0.07);
  --shadow-cta:   0 10px 24px rgba(24, 95, 165, 0.24);
  --shadow-head:  0 8px 26px rgba(15, 42, 67, 0.08);
  --shadow-pain:  0 10px 28px rgba(15, 42, 67, 0.06);
  --shadow-pain-focus: 0 0 0 6px var(--primary-tint), 0 14px 32px rgba(15, 42, 67, 0.08);
  --shadow-pain-active: 0 18px 44px rgba(15, 42, 67, 0.16);
  --shadow-loss: 0 16px 36px rgba(179, 38, 30, 0.14), 0 2px 8px rgba(15, 42, 67, 0.06);
  --shadow-sticky: 0 18px 44px rgba(15, 42, 67, 0.18);
  --sticky-bg: rgba(237, 242, 248, 0.92);
  --sticky-border: rgba(255, 255, 255, 0.86);

  --font-head: 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  80px;
  --space-10: 112px;

  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 14px;
  --radius-pill: 999px;

  --container: 1100px;
  --measure:   68ch;

  --fs-h1:     32px;
  --fs-h2:     26px;
  --fs-h3:     20px;
  --fs-kicker: 18px;
  --fs-body:   18px;
  --fs-lead:   20px;
  --fs-price:  40px;
  --fs-step:   32px;
  --fs-btn:    19px;
  --fs-meta:   18px;
}

@media (min-width: 700px) {
  :root {
    --fs-h1:     46px;
    --fs-h2:     34px;
    --fs-h3:     22px;
    --fs-kicker: 19px;
    --fs-body:   19px;
    --fs-lead:   22px;
    --fs-price:  52px;
    --fs-step:   40px;
    --fs-btn:    20px;
  }
}

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

/* Sanftes Scrollen bei Sprungmarken. Kein Zierrat: Ein harter Sprung lässt den
   Leser raten, wo er gelandet ist, die Bewegung zeigt ihm die Richtung.
   Bei prefers-reduced-motion wird es weiter unten wieder abgeschaltet. */

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
}

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

h1 { font-size: var(--fs-h1); line-height: 1.15; }
h2 { font-size: var(--fs-h2); line-height: 1.25; }
h3 { font-size: var(--fs-h3); line-height: 1.35; }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; }

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

a { color: var(--primary); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

/* Einblendung beim Scrollen, siehe design-system.md Abschnitt 15.
   Ausgangszustand ist sichtbar. Erst .js am <html> macht ihn unsichtbar,
   damit die Seite ohne JavaScript vollständig dasteht. */

.reveal { opacity: 1; transform: none; }

.js .reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}

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

/* Gestaffelte Einblendung innerhalb einer Section. Höchstens vier Stufen à
   60ms, siehe design-system.md Abschnitt 15. Mehr wirkt wie eine Vorführung. */

.js .reveal .stagger > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 320ms ease-out, transform 320ms ease-out;
}

.js .reveal.is-visible .stagger > * { opacity: 1; transform: none; }

.js .reveal.is-visible .stagger > *:nth-child(1) { transition-delay: 0ms; }
.js .reveal.is-visible .stagger > *:nth-child(2) { transition-delay: 60ms; }
.js .reveal.is-visible .stagger > *:nth-child(3) { transition-delay: 120ms; }
.js .reveal.is-visible .stagger > *:nth-child(n+4) { transition-delay: 180ms; }

/* Karten heben sich beim Zeigen leicht an. Nur dort, wo etwas anklickbar
   ist oder als Objekt gelesen wird, nicht auf Fließtext. */

.plan, .fit__col {
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.plan:hover, .fit__col:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

/* Layout */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.section {
  padding-block: var(--space-7);
  scroll-margin-top: var(--space-5);
}

.section--soft { background: var(--bg-soft); }

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

.section > .container > h2 { margin-bottom: var(--space-5); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
}

/* Kopfbereich */

/* Mobil steht der Kopf nicht fest oben. Mit Navigation wäre er dreizeilig
   und würde auf einem kleinen Handy ein Fünftel des Bildschirms verbrauchen.
   Ab 700px ist genug Platz, dort klebt er. */

.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--navy-line);
}

.site-header > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  min-height: 68px;
}

/* Navigation zu den Abschnitten der Seite. Mobil steht sie in einer zweiten
   Zeile und ist seitlich schiebbar. Bewusst kein Burger-Menü: bei dieser
   Zielgruppe kostet ein verstecktes Menü mehr, als es an Platz spart. */

.nav {
  order: 3;
  width: 100%;
}

/* Alle Punkte sichtbar, notfalls umbrechend. Ein seitlich schiebbares Menü
   ist ein Muster, das diese Zielgruppe nicht zuverlässig erkennt. */

.nav ul {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-5);
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.nav a { transition: color 120ms ease, border-color 120ms ease; }

.nav a:hover { border-bottom-color: var(--navy-line); }

/* Der Abschnitt, der gerade im Blick ist. Wird von js/main.js gesetzt.
   Nicht nur farbig, sondern zusätzlich unterstrichen: Farbe allein darf
   nie die einzige Information sein. */

.nav a[aria-current='true'] {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: 1.2;
  color: var(--navy);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--space-2) var(--space-5);
  color: var(--navy);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  border: 2px solid var(--navy);
  border-radius: var(--radius-m);
  transition: background-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.btn-outline:hover {
  background: var(--navy);
  color: var(--bg);
  transform: translateY(-1px);
}

/* Buttons und Links */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: var(--space-4) 28px;
  background: var(--cta);
  color: var(--bg);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-btn);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-cta);
  transition: background-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.btn:hover {
  background: var(--cta-hover);
  transform: translateY(-1px);
}

.btn:active {
  background: var(--cta-hover);
  transform: none;
}

/* Anruf-Button. Die Demo-Nummer ist der stärkste Beweis der Seite, deshalb
   steht sie im Button selbst und nicht hinter einem Klick. Ein tel:-Link
   startet am Handy den Anruf direkt, am Rechner den Telefon-Dialog. */

.btn--call {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-block: var(--space-3);
  line-height: 1.2;
}

.btn__small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-meta);
}

.btn__num {
  font-size: var(--fs-h3);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.link-secondary {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-weight: 600;
  text-decoration: underline;
}

/* 001 Hero */

.hero-section {
  position: relative;
  overflow: hidden;
  padding-bottom: var(--space-8);
  background: linear-gradient(160deg, var(--hero-top) 0%, var(--hero-mid) 42%, var(--hero-bottom) 78%, var(--bg) 100%);
  border-bottom: 1px solid var(--navy-line);
}

.hero-section > .container {
  position: relative;
  z-index: 1;
}

.hero__text { max-width: 620px; }

.hero__kicker {
  display: inline-block;
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--primary-wash);
  border: 1px solid var(--navy-line);
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: var(--fs-kicker);
  line-height: 1.3;
  color: var(--navy);
}

/* Die Höhe ist für die längste Variante reserviert. Ohne das springt beim
   Wechsel die halbe Seite, weil eine kürzere Fassung eine Zeile spart. */

.hero h1 {
  min-height: 4.6em;
  margin-bottom: var(--space-5);
}

/* Der wechselnde Nebensatz. Die Höhe wird reserviert, damit beim Wechsel
   nichts springt. Die Bewegung ist ein kurzes Ausblenden, kein Effekt. */

/* Nur die Deckkraft wird animiert, bewusst kein inline-block und kein
   transform: Sonst ist der Satzteil ein unteilbarer Kasten, bricht falsch um
   und schiebt den Satzpunkt in eine eigene Zeile. */

.rotate { transition: opacity 200ms ease; }

.rotate.is-wechselnd { opacity: 0; }

.hero h1 .mark {
  padding: 0 var(--space-2);
  background: var(--primary-tint);
  border-radius: var(--radius-s);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.text-pill {
  padding: 0 var(--space-2);
  background: var(--primary-tint);
  border-radius: var(--radius-s);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.hero__actions { margin-top: var(--space-6); }

.hero__figure { margin-top: var(--space-7); }

.hero__actions .link-secondary { margin-top: var(--space-3); }

.hero__note {
  max-width: 46ch;
  margin-top: var(--space-4);
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Die drei Zusagen standen vorher als grauer Fließtext und gingen unter.
   Als abgesetzte Signale werden sie gelesen. */

.signals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--navy-line);
}

.signals > li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--fs-meta);
  line-height: 1.4;
}

.signals > li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.45em;
  width: 13px;
  height: 6px;
  border-left: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(-45deg);
}

/* Figur Heike, siehe design-system.md Abschnitt 19.
   Solange kein Bild vorliegt, reserviert der Platzhalter Fläche und
   Seitenverhältnis. Der gestrichelte Rahmen macht sichtbar, dass etwas fehlt. */

.heike {
  display: block;
  position: relative;
  background: linear-gradient(180deg, var(--bg) 0%, var(--primary-wash) 100%);
  border: 1px solid var(--border);
}

.heike--hero {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 3 / 4;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
}

.heike__variant {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity 220ms ease;
}

.heike__variant.is-active { opacity: 1; }

.heike__variant img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.heike--mark {
  flex: 0 0 auto;
  position: relative;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 50%;
}

.heike--mark img,
.heike--mark .heike__variant img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.heike--small {
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  overflow: hidden;
  border-radius: 50%;
}

.heike--small picture {
  display: block;
  width: 100%;
  height: 100%;
}

.heike--small img,
.heike--small .heike__variant img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

/* 002 Schmerz */

.pain {
  counter-reset: pain;
  margin-block: var(--space-7);
}

.pain-copy > h2 { margin-bottom: var(--space-5); }

.pain-copy > .lead { margin-bottom: var(--space-5); }

.loss-card {
  max-width: 430px;
  margin-bottom: var(--space-6);
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-loss);
}

.loss-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--loss);
  color: var(--bg);
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.3;
}

.loss-card__body {
  padding: var(--space-5);
}

.loss-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
  font-size: var(--fs-meta);
  line-height: 1.3;
  color: var(--ink-soft);
}

.loss-card__status {
  display: inline-flex;
  padding: var(--space-1) var(--space-3);
  background: var(--loss-soft);
  color: var(--loss);
  border-radius: var(--radius-s);
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.3;
}

.loss-card__caller {
  margin-bottom: var(--space-2);
  font-weight: 600;
}

.loss-card__quote {
  margin-bottom: 0;
  color: var(--ink-soft);
}

.loss-card__next {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  background: var(--loss-soft);
  border-top: 1px solid var(--border);
}

.loss-card__next span {
  color: var(--ink-soft);
  line-height: 1.3;
}

.loss-card__next strong {
  color: var(--loss);
  font-family: var(--font-head);
  line-height: 1.3;
}

.pain > li {
  position: relative;
  counter-increment: pain;
  padding: var(--space-5);
  padding-top: var(--space-6);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-pain);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.pain > li::before {
  content: counter(pain);
  position: absolute;
  top: calc(var(--space-4) * -1);
  left: var(--space-5);
  display: grid;
  place-items: center;
  width: var(--space-6);
  height: var(--space-6);
  background: var(--navy);
  color: var(--bg);
  border: 2px solid var(--bg-soft);
  border-radius: 50%;
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1;
}

.pain > li + li { margin-top: var(--space-6); }

.pain__title {
  margin-bottom: var(--space-2);
  font-weight: 600;
}

.pain p:not(.pain__title) { margin-bottom: 0; }

.pain > li.is-active {
  border-color: var(--primary);
  box-shadow: var(--shadow-pain-active);
  transform: translateY(-2px);
}

.pain > li.is-active::before {
  background: var(--primary);
}

.js .reveal.is-visible .pain.stagger > * {
  animation: pain-focus 620ms ease-out both;
}

.js .reveal.is-visible .pain.stagger > *:nth-child(1) { animation-delay: 0ms; }
.js .reveal.is-visible .pain.stagger > *:nth-child(2) { animation-delay: 60ms; }
.js .reveal.is-visible .pain.stagger > *:nth-child(3) { animation-delay: 120ms; }
.js .reveal.is-visible .pain.stagger > *:nth-child(4) { animation-delay: 180ms; }

@keyframes pain-focus {
  0% { box-shadow: 0 0 0 0 var(--primary-tint); }
  45% { box-shadow: var(--shadow-pain-focus); }
  100% { box-shadow: var(--shadow-pain); }
}

/* 003 So funktioniert's */

#so-funktionierts {
  background: linear-gradient(180deg, var(--bg) 0%, var(--primary-wash) 44%, var(--bg) 100%);
}

#so-funktionierts > .container {
  position: relative;
}

.call-picker {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-7);
}

.call-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.call-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-pain-active);
  transform: translateY(-2px);
}

.call-card__label,
.call-story__eyebrow,
.call-result__label {
  font-family: var(--font-head);
  font-size: var(--fs-meta);
  font-weight: 600;
  line-height: 1.3;
  color: var(--primary);
}

.call-card > strong {
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  line-height: 1.35;
}

.call-card__action {
  justify-self: start;
  margin-top: var(--space-2);
  color: var(--primary);
  font-family: var(--font-head);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.call-card--urgent {
  border-color: var(--loss);
}

.call-card--urgent .call-card__label {
  color: var(--loss);
}

.call-stories {
  margin-top: var(--space-8);
}

.call-story {
  scroll-margin-top: var(--space-7);
  padding: var(--space-5);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
}

.call-story + .call-story {
  margin-top: var(--space-8);
}

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

.call-story__head h3 {
  margin: var(--space-2) 0 var(--space-3);
}

.conversation {
  display: grid;
  gap: var(--space-3);
  max-width: 760px;
  padding: var(--space-3);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
}

.bubble {
  display: grid;
  gap: var(--space-2);
  max-width: none;
  margin: 0;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  line-height: 1.5;
}

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

.bubble strong {
  font-family: var(--font-head);
  font-size: var(--fs-meta);
  line-height: 1.2;
  color: var(--primary);
}

.bubble--heike {
  padding-inline: var(--space-3);
  background: var(--bg);
  border: 1px solid var(--primary-tint);
  border-radius: var(--radius-m);
}

.bubble--caller {
  padding-inline: var(--space-3);
}

.call-result {
  max-width: var(--measure);
  margin-top: var(--space-5);
  padding: var(--space-5);
  background: linear-gradient(135deg, var(--primary-wash) 0%, var(--bg) 100%);
  border: 1px solid var(--primary-stage);
  border-radius: var(--radius-l);
}

.call-result h3 {
  margin: var(--space-2) 0 var(--space-5);
}

.call-result dl {
  display: grid;
  gap: var(--space-4);
  margin: 0;
}

.call-result dt {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--navy);
}

.call-result dd {
  margin: 0;
}

.emergency-flow {
  display: grid;
  gap: var(--space-4);
  max-width: var(--measure);
}

.emergency-flow > div {
  padding: var(--space-5);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
}

.emergency-flow span {
  display: grid;
  place-items: center;
  width: var(--space-7);
  height: var(--space-7);
  margin-bottom: var(--space-4);
  background: var(--loss-soft);
  border: 2px solid var(--loss);
  border-radius: 50%;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--loss);
}

.emergency-flow h3 {
  margin-bottom: var(--space-2);
}

.effort {
  margin-top: var(--space-7);
  padding: var(--space-5);
  background: var(--bg);
  border: 2px solid var(--primary-stage);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  max-width: var(--measure);
}

.effort__label {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: var(--space-1) var(--space-3);
  background: var(--primary-wash);
  border: 1px solid var(--primary-tint);
  border-radius: var(--radius-pill);
  font-family: var(--font-head);
  font-size: var(--fs-meta);
  font-weight: 600;
  line-height: 1.2;
  color: var(--primary);
}

/* 006 Vertrauen */

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

.trust__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: var(--space-1) var(--space-3);
  background: var(--bg);
  border: 1px solid var(--primary-tint);
  border-radius: var(--radius-pill);
  font-family: var(--font-head);
  font-size: var(--fs-meta);
  font-weight: 600;
  line-height: 1.2;
  color: var(--primary);
}

.trust { margin-top: var(--space-7); }

.trust__block {
  max-width: var(--measure);
  padding: var(--space-5);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
}

.trust__block + .trust__block { margin-top: var(--space-5); }

.trust__block h3 { margin-bottom: var(--space-3); }

.trust__block--data {
  max-width: none;
  border-color: var(--primary-stage);
  box-shadow: var(--shadow-card);
}

.trust__block--notice {
  background: linear-gradient(135deg, var(--bg) 0%, var(--primary-wash) 100%);
}

.trust__block--setup {
  max-width: none;
  background: var(--navy);
  border-color: var(--navy);
  color: var(--bg);
  box-shadow: var(--shadow-card);
}

.trust__block--setup h3 {
  color: var(--bg);
}

.trust-facts {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.trust-facts p,
.trust-rows p,
.trust-process p {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.trust-facts p:last-child,
.trust-rows p:last-child,
.trust-process p:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.trust-rows,
.trust-process {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.trust-facts strong,
.trust-rows strong,
.trust-process strong {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--navy);
}

.trust-facts span,
.trust-rows span,
.trust-process span {
  color: var(--ink-soft);
}

.trust-process p {
  border-color: var(--primary-stage);
}

.trust-process span,
.trust-process strong {
  color: var(--bg);
}

/* Haken nur als Marker neben dem Text, nie als Träger der Aussage. */

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

.ticks > li + li { margin-top: var(--space-3); }

.ticks > li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 14px;
  height: 7px;
  border-left: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(-45deg);
}

/* Block 4 ist optisch abgesetzt, weil dort ein Mensch steht und keine Regel. */

.trust__block--person {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-7);
}

/* Porträt-Platzhalter, siehe design-system.md Abschnitt 14.
   Reserviert Fläche und Seitenverhältnis des späteren Bildes. */

.portrait {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex: 0 0 auto;
  width: 160px;
  aspect-ratio: 4 / 5;
  padding-bottom: var(--space-4);
  background: var(--primary-wash);
  border: 1px dashed var(--navy-line);
  border-radius: var(--radius-l);
}

.portrait__note {
  font-size: var(--fs-meta);
  color: var(--ink-soft);
}

.portrait--photo {
  align-items: stretch;
  padding-bottom: 0;
  overflow: hidden;
  background: var(--bg);
  border-style: solid;
}

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

.portrait--photo img {
  object-fit: cover;
  object-position: center top;
}

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

/* 004 Leistungen */

.service-intro {
  display: grid;
  gap: var(--space-5);
}

.service-heike {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: var(--measure);
  padding: var(--space-5);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
}

.service-heike p {
  font-size: var(--fs-meta);
  line-height: 1.45;
  color: var(--ink-soft);
}

.service-grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-7);
}

.service-card {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-pain);
}

.service-card h3 {
  margin-top: var(--space-1);
  margin-bottom: var(--space-2);
}

.service-card--lead,
.service-card--calendar {
  border-color: var(--primary-stage);
}

.service-card--lead {
  background: linear-gradient(135deg, var(--bg) 0%, var(--primary-wash) 100%);
}

.service-card--lead h3 {
  font-size: var(--fs-h2);
}

.service-card--wide p {
  max-width: var(--measure);
}

.service-card__tag {
  justify-self: start;
  padding: var(--space-1) var(--space-3);
  background: var(--bg);
  border: 1px solid var(--primary-tint);
  border-radius: var(--radius-pill);
  font-family: var(--font-head);
  font-size: var(--fs-meta);
  font-weight: 600;
  line-height: 1.2;
  color: var(--primary);
}

.service-card--urgent .service-card__tag {
  border-color: var(--loss);
  color: var(--loss);
}

.service-result,
.limits-box {
  max-width: var(--measure);
  margin-top: var(--space-7);
  padding: var(--space-5);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
}

.service-result {
  background: linear-gradient(135deg, var(--bg) 0%, var(--primary-wash) 100%);
  border-color: var(--primary-stage);
  box-shadow: var(--shadow-card);
}

.service-result h3,
.limits-box h3 {
  margin-bottom: var(--space-5);
}

.service-result__items {
  display: grid;
  gap: var(--space-4);
}

.service-result__items p {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.service-result__items p:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.service-result__items strong,
.limits-list strong {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--navy);
}

.limits-list {
  display: grid;
  gap: var(--space-4);
}

.limits-list > li {
  display: grid;
  gap: var(--space-2);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.limits-list > li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* Allgemeiner Kasten fuer bestehende Abschnitte. */

.box {
  max-width: var(--measure);
  margin-top: var(--space-7);
  padding: var(--space-5);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
}

.section:not(.section--soft) .box {
  background: var(--bg-soft);
  border-color: transparent;
}

.box h3 { margin-bottom: var(--space-3); }

.plain > li + li { margin-top: var(--space-4); }

/* 005 Passt zu Ihnen */

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

.fit__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: var(--space-1) var(--space-3);
  background: var(--primary-wash);
  border: 1px solid var(--primary-tint);
  border-radius: var(--radius-pill);
  font-family: var(--font-head);
  font-size: var(--fs-meta);
  font-weight: 600;
  line-height: 1.2;
  color: var(--primary);
}

.fit-panel {
  margin-top: var(--space-7);
  padding: var(--space-4);
  background: linear-gradient(135deg, var(--bg-soft) 0%, var(--bg) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
}

.fit { margin-top: 0; }

.fit__col {
  position: relative;
  padding: var(--space-5);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
}

.fit__col:first-child {
  border-color: var(--primary-stage);
  background: linear-gradient(135deg, var(--bg) 0%, var(--primary-wash) 100%);
}

.fit__col + .fit__col { margin-top: var(--space-5); }

.fit__col h3 { margin-bottom: var(--space-4); }

.fit-list > li {
  display: grid;
  gap: var(--space-1);
}

.fit-list strong {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy);
}

.fit-list span {
  color: var(--ink-soft);
  line-height: 1.45;
}

.fit__close {
  margin-top: var(--space-3);
  padding: var(--space-5);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
}

/* Strich statt Haken. Die Spaltenüberschrift trägt die Bedeutung,
   das Zeichen ist nur Markierung, nie die einzige Unterscheidung. */

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

.dashes > li + li { margin-top: var(--space-3); }

.dashes > li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.8em;
  width: 14px;
  height: 2px;
  background: var(--ink-soft);
}

/* 007 Pakete */

.section--pricing {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 42%, var(--bg-soft) 100%);
  padding-block: var(--space-6);
}

.section--pricing > .container {
  max-width: 1240px;
}

.plans {
  max-width: 1180px;
  margin-top: var(--space-5);
  margin-inline: auto;
}

.plan {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: var(--space-3) var(--space-4);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
}

.plan + .plan { margin-top: var(--space-5); }

.plan--standard { order: -1; }

.plan--primary {
  border: 2px solid var(--primary);
  box-shadow: 0 18px 40px var(--shadow-head);
}

.plan--primary::before {
  content: '*';
  position: absolute;
  top: calc(var(--space-4) * -1);
  left: 50%;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  transform: translateX(-50%);
  color: var(--bg);
  background: var(--primary);
  border: 4px solid var(--bg);
  border-radius: 50%;
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1;
}

.plan__name { margin-bottom: var(--space-2); }

.plan__for {
  margin-bottom: var(--space-2);
  color: var(--ink-soft);
}

.plan__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.plan__num {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-price);
  line-height: 1.1;
}

.plan__num--text {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.2;
}

.plan__unit { color: var(--ink-soft); }

.plan__setup {
  margin-bottom: var(--space-1);
  color: var(--ink);
  line-height: 1.35;
}

.plan__minutes {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  color: var(--ink-soft);
  border-bottom: 1px solid var(--border);
  line-height: 1.35;
}

.plan__included {
  margin-top: var(--space-4);
}

.plan__included-label {
  margin-bottom: var(--space-3);
  font-family: var(--font-head);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--ink-soft);
}

.plan__included .ticks {
  font-size: var(--fs-meta);
  line-height: 1.4;
}

.plan__included .ticks > li {
  overflow-wrap: break-word;
}

.plan__action {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin-top: auto;
  padding: var(--space-2) var(--space-3);
  color: var(--navy);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.plan__action:hover {
  color: var(--primary);
  border-color: var(--primary);
  box-shadow: var(--shadow-pain);
}

.plan__action--primary {
  color: var(--bg);
  background: var(--cta);
  border-color: var(--cta);
  box-shadow: var(--shadow-cta);
}

.plan__action--primary:hover {
  color: var(--bg);
  background: var(--cta-hover);
  border-color: var(--cta-hover);
}

.price-note {
  max-width: 1180px;
  margin-top: var(--space-4);
  margin-inline: auto;
}

/* 008 Demo-CTA, die einzige dunkle Section im Verlauf */

.section--dark {
  background: var(--navy);
  color: var(--bg);
}

.section--dark a { color: var(--bg); }

.section--dark .lead { max-width: var(--measure); }

/* Pflicht, kein Stilelement: --cta auf --navy ergibt 2.8:1 und verfehlt
   WCAG 1.4.11. Der weiße Rand stellt die Abgrenzung her. */

.btn--on-dark {
  margin-top: var(--space-6);
  border: 2px solid var(--bg);
}

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

.cta-note {
  margin-top: var(--space-4);
  font-size: var(--fs-meta);
}

.callout {
  max-width: var(--measure);
  margin-top: var(--space-7);
  padding: var(--space-5);
  border: 1px solid var(--bg);
  border-radius: var(--radius-l);
}

.alt-contact { margin-top: var(--space-6); }

/* Mitlaufende Abschlussleiste nach Desktop-Vorbild, mobil bewusst nicht im Weg */

.sticky-cta { display: none; }

.js .sticky-cta {
  opacity: 0;
  transform: translateY(var(--space-4));
  transition: opacity 260ms ease, transform 260ms ease;
}

.js .sticky-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js .sticky-cta .sticky-cta__inner { pointer-events: none; }

.js .sticky-cta.is-visible .sticky-cta__inner { pointer-events: auto; }

/* 009 FAQ, Akkordeon ohne JavaScript */

.faq {
  max-width: var(--measure);
  margin-top: var(--space-7);
  border-top: 1px solid var(--border);
}

.faq > details { border-bottom: 1px solid var(--border); }

.faq > details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 56px;
  padding: var(--space-4) 0;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: var(--fs-btn);
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

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

.faq > details > summary::after {
  content: '';
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: translateY(-3px) rotate(45deg);
}

.faq > details[open] > summary::after { transform: translateY(3px) rotate(-135deg); }

.faq__answer { padding-bottom: var(--space-5); }

/* 010 Footer */

.site-footer {
  padding-block: var(--space-8);
  background: var(--navy);
  color: var(--bg);
}

.site-footer a { color: var(--bg); }

.site-footer :focus-visible { outline-color: var(--bg); }

.footer__firm {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-h3);
}

/* Trefferflächen mit Abstand, damit man am Handy nicht danebentippt. */

.footer__contact,
.footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer__contact a,
.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}

.footer__links { margin-top: var(--space-4); }

.footer__meta {
  margin-top: var(--space-4);
  margin-bottom: 0;
  font-size: var(--fs-meta);
}

/* Unterseiten: Impressum, Datenschutz, Danke */

.wordmark a { color: inherit; text-decoration: none; }

.wordmark a:hover { text-decoration: underline; }

.section--legal {
  background:
    linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 42%, var(--bg) 100%);
}

.legal-layout {
  display: grid;
  gap: var(--space-6);
}

.legal-aside,
.legal-content {
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-pain);
}

.legal-aside {
  align-self: start;
  padding: var(--space-5);
  border-radius: var(--radius-l);
}

.legal-aside h1 { margin-bottom: var(--space-4); }

.legal-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin-bottom: var(--space-4);
  padding: 0 var(--space-3);
  color: var(--navy);
  background: var(--primary-wash);
  border: 1px solid var(--primary-tint);
  border-radius: var(--radius-pill);
  font-family: var(--font-head);
  font-size: var(--fs-kicker);
  font-weight: 600;
}

.legal-facts {
  margin-block: var(--space-5);
  border-top: 1px solid var(--border);
}

.legal-facts p {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.legal-facts span {
  color: var(--ink-soft);
  font-size: var(--fs-meta);
}

.legal-facts strong {
  color: var(--navy);
  font-family: var(--font-head);
  font-size: var(--fs-h3);
}

.legal-content {
  padding: var(--space-5);
  border-radius: var(--radius-l);
}

.legal-date {
  color: var(--ink-soft);
  font-size: var(--fs-meta);
}

.prose h1 { margin-bottom: var(--space-5); }

.prose h2 {
  margin-top: var(--space-7);
  margin-bottom: var(--space-4);
  font-size: var(--fs-h3);
}

/* Offene Angaben sichtbar machen. Solange davon etwas auf der Seite steht,
   darf sie nicht online. Deshalb auffällig und nicht dezent. */

.tbd {
  padding: 0 var(--space-2);
  color: var(--ink-soft);
  border: 1px dashed var(--navy-line);
  border-radius: var(--radius-s);
}

.site-footer .tbd {
  color: var(--bg);
  border-color: var(--sticky-border);
}

.tbd-note {
  padding: var(--space-4) var(--space-5);
  background: var(--bg-soft);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-s);
  font-size: var(--fs-meta);
}

/* Ab 700px */

@media (min-width: 700px) {
  .container { padding-inline: var(--space-6); }

  .section {
    padding-block: var(--space-9);
    scroll-margin-top: 92px;
  }

  /* Ab hier klebt der Kopf oben, deshalb braucht der Ankersprung Luft. */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: var(--shadow-head);
  }

  .site-header > .container { flex-wrap: nowrap; }

  .wordmark {
    gap: var(--space-3);
    font-size: var(--fs-h3);
  }

  .legal-layout {
    grid-template-columns: minmax(260px, 0.42fr) minmax(0, 0.98fr);
    align-items: start;
  }

  .legal-aside {
    position: sticky;
    top: 116px;
    padding: var(--space-6);
  }

  .legal-content { padding: var(--space-6); }

  .nav {
    order: 0;
    width: auto;
  }

  .nav ul { flex-wrap: nowrap; column-gap: var(--space-6); }

  .nav a { min-height: 48px; }

  .section > .container > h2 { margin-bottom: var(--space-6); }

  .btn { width: auto; }

  .hero h1 { min-height: 3.45em; }

  .hero__actions {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
  }

  .hero__actions .link-secondary { margin-top: 0; }

  .call-picker {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  .conversation {
    padding: var(--space-5);
  }

  .call-story {
    padding: var(--space-6);
  }

  .call-story:not(.call-story--urgent) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
    gap: var(--space-6);
    align-items: start;
  }

  .call-story:not(.call-story--urgent) .call-story__head {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  .call-story:not(.call-story--urgent) .conversation {
    max-width: none;
  }

  .call-story:not(.call-story--urgent) .call-result {
    position: sticky;
    top: 116px;
    min-height: 620px;
    max-width: none;
  }

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

  .call-result {
    margin-top: 0;
    padding: var(--space-6);
  }

  .call-story:not(.call-story--urgent) .call-result {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .emergency-flow {
    grid-template-columns: repeat(3, 1fr);
    max-width: none;
  }

  .emergency-flow > div {
    position: relative;
    padding-left: var(--space-5);
    padding-top: calc(var(--space-7) + var(--space-5));
  }

  .emergency-flow span {
    position: absolute;
    top: var(--space-5);
    left: var(--space-5);
    margin-bottom: 0;
  }

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

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

  .effort { padding: var(--space-6); }

  .trust__block {
    padding: var(--space-6);
  }

  .trust-facts,
  .trust-process {
    grid-template-columns: repeat(3, 1fr);
  }

  .trust-process {
    grid-template-columns: repeat(2, 1fr);
  }

  .trust-facts p {
    padding-bottom: 0;
    padding-right: var(--space-5);
    border-bottom: 0;
    border-right: 1px solid var(--border);
  }

  .trust-facts p:last-child {
    padding-right: 0;
    border-right: 0;
  }

  .trust-process p {
    padding: var(--space-5);
    border: 1px solid var(--primary-stage);
    border-radius: var(--radius-m);
  }

  .trust__block--person {
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
  }

  .portrait { width: 200px; }

  .service-intro {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    align-items: end;
  }

  .service-heike {
    align-self: stretch;
    max-width: none;
  }

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

  .service-card {
    padding: var(--space-6);
  }

  .service-card--wide {
    grid-column: 1 / -1;
  }

  .service-result,
  .limits-box {
    max-width: none;
    padding: var(--space-6);
  }

  .service-result__items,
  .limits-list {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }

  .service-result__items p,
  .limits-list > li {
    padding-bottom: 0;
    padding-right: var(--space-5);
    border-bottom: 0;
    border-right: 1px solid var(--border);
  }

  .service-result__items p:last-child,
  .limits-list > li:last-child {
    padding-right: 0;
    border-right: 0;
  }

  .box { padding: var(--space-6); }

  .fit-panel {
    padding: var(--space-5);
  }

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

  .fit__col + .fit__col { margin-top: 0; }

  .plans {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .plan--basis { order: 1; }
  .plan--standard { order: 2; }
  .plan--plus { order: 3; }
  .plan--volume { order: 4; }

  /* Feste Höhe für die Einordnungszeile, damit die Preise
     auf einer Linie stehen und der Vergleich funktioniert. */
  .plan__for { min-height: 3em; }

  .plan + .plan { margin-top: 0; }

  .footer__contact,
  .footer__links {
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
  }
}

/* Ab 900px: Hero zweispaltig */

@media (min-width: 900px) {
  body { padding-bottom: 96px; }

  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: var(--space-8);
  }

  .hero__figure { margin-top: 0; }

  .heike--hero { max-width: 400px; margin-inline: 0 auto; }

  .sticky-cta {
    position: fixed;
    z-index: 20;
    right: var(--space-5);
    bottom: var(--space-5);
    left: var(--space-5);
    display: block;
    pointer-events: none;
  }

  .sticky-cta__inner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    max-width: 980px;
    min-height: 56px;
    margin-inline: auto;
    padding: var(--space-1) var(--space-2);
    background: var(--sticky-bg);
    border: 2px solid var(--sticky-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sticky);
    pointer-events: auto;
  }

  .sticky-cta__face {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: contain;
    object-position: center center;
  }

  .sticky-cta__text {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
  }

  .sticky-cta__text strong {
    display: block;
    font-family: var(--font-head);
    font-size: var(--fs-body);
    line-height: 1.1;
    color: var(--ink);
  }

  .sticky-cta__text span { color: var(--ink-soft); }

  .sticky-cta__listen {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 9px var(--space-4);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-pain);
    font-family: var(--font-head);
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--navy);
    text-decoration: none;
  }

  .sticky-cta__primary {
    flex: 0 0 auto;
    min-height: 44px;
    padding-inline: var(--space-4);
    border-radius: var(--radius-pill);
    white-space: nowrap;
  }

  .sticky-cta__primary span {
    margin-left: var(--space-2);
    font-size: var(--fs-h3);
    line-height: 0;
  }
}

@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  .js .sticky-cta,
  .js .sticky-cta.is-visible {
    transform: none;
    transition: none;
  }
}

/* Ab 1000px legt sich die Beispielkarte vor die Figur. Das ist der einzige
   Überlapp der Seite und der Grund für den Schatten auf der Karte.
   Sie bleibt innerhalb der rechten Spalte und ragt nie in den Text. */

@media (min-width: 1000px) {
  .plans {
    grid-template-columns: repeat(4, 1fr);
  }

  #schmerz > .container {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
  }

  #schmerz .pain-copy {
    grid-column: 1;
    position: sticky;
    top: 132px;
  }

  #schmerz .pain {
    grid-column: 2;
    grid-row: 1;
    margin-block: 0;
  }

  #schmerz .pain > li {
    min-height: 245px;
  }

  .heike--hero { max-width: 440px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal .stagger > *,
  .heike__variant {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }

  .heike__variant:not(.is-active) { opacity: 0; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}