/* ==========================================================================
   Run 8 (27.09.2026): Komponenten, die nie im ersten Bildschirm stehen (FAQ, Schritte, Zeitleiste,
   Preiskarten, Tabellen, Kennzahlen, Autorenkasten …). Asynchron geladen wie motion.css, damit das
   Inline-CSS jeder Seite kleiner wird und Platz für Grafiken bleibt (HTML-Budget 100 KB).
   Ohne JS lädt der <noscript>-Link in base.html die Datei normal.
   ========================================================================== */
/* ---------- Readout: Kennzahl-Panel wie in einer Shop-Auswertung ---------- */
.readout { background: var(--surface); border: var(--border); border-radius: var(--r-3); box-shadow: var(--elev); padding: var(--space-5); display: grid; gap: var(--space-4); }
.readout__head { display: flex; justify-content: space-between; gap: var(--space-4); align-items: baseline; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); color: var(--text-2); }
.readout__period { font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-xs); }
.readout__value { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.readout__value .num { font-size: var(--fs-stat); font-weight: 500; line-height: 1; letter-spacing: -.04em; color: var(--text); }
.readout__value .num small { font-size: .45em; letter-spacing: 0; color: var(--data); }
.readout__chart { color: var(--data); }
.readout__chart svg { width: 100%; height: auto; overflow: visible; }
.readout__chart .area { fill: var(--data-soft); }
.readout__chart .line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.readout__chart .grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.readout__chart .dot { fill: currentColor; stroke: var(--surface); stroke-width: 2; }
.readout .source { border-top: var(--border); padding-top: var(--space-3); }

/* Delta-Chip: Farbe nie allein, immer mit Pfeil und Vorzeichen */
.delta { display: inline-flex; align-items: center; gap: .3em; padding: .15em .5em; border-radius: var(--r-1); font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.delta--up { color: var(--positive); background: var(--positive-soft); }
.delta--down { color: var(--signal-ink); background: color-mix(in srgb, var(--signal) 7%, transparent); }  /* 7 %: hell 4,78:1, dunkel 6,0:1 */
.delta--flat { color: var(--text-2); background: var(--raised); }

/* ---------- Stat: große Zahl + Label + Quelle ----------
   Run 9: Spaltenzahl nach Anzahl (2 → 2, 4 → 2/4, sonst 2/3 mit gefüllter letzter Reihe), feste Zeilen über alle Werte einer
   Reihe (subgrid: Zahl · Label · Notiz · Quelle), Zahl einzeilig in einer gemeinsamen Größe, Trennlinien nur zwischen Spalten. */
.stats { display: grid; gap: 0; border-top: var(--border); }
.stat { padding: var(--space-5) var(--space-5) var(--space-5) 0; border-bottom: var(--border); display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--space-2); align-content: start; }
.stat__value { grid-row: 1; font-family: var(--font-mono); font-weight: 500; font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.stat__value small { font-size: .45em; letter-spacing: 0; margin-left: .15em; color: var(--text-2); }  /* Run 9: Einheit wie in der Belegleiste */
.stat__label { grid-row: 2; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-base); letter-spacing: -.01em; }
.stat__note { grid-row: 3; font-size: var(--fs-sm); color: var(--text-2); }
@media (max-width: 39.99rem) { .stat { grid-row: auto; grid-template-rows: none; } .stat > * { grid-row: auto; } }
@media (min-width: 40rem) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(even) { padding-left: var(--space-5); border-left: var(--border); }
}
@media (min-width: 40rem) and (max-width: 63.99rem) { .stat:nth-child(odd):last-child { grid-column: 1 / -1; } }
@media (min-width: 64rem) {
  .stats:not(:has(> :nth-child(2):last-child)) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .stats:not(:has(> :nth-child(2):last-child)) > .stat { grid-column: span 2; padding-left: var(--space-5); border-left: var(--border); }
  .stats:not(:has(> :nth-child(2):last-child)) > .stat:nth-child(3n+1) { padding-left: 0; border-left: 0; }  /* Run 9: Zeilenanfang ohne Linie (Spezifität wie die Regel darüber) */
  .stats > .stat:nth-child(3n+1):nth-last-child(2), .stats > .stat:nth-child(3n+1):nth-last-child(2) + .stat { grid-column: span 3; }
  .stats > .stat:nth-child(3n+1):last-child { grid-column: 1 / -1; }
  .stats:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats:has(> :nth-child(4):last-child) > .stat:nth-child(n) { grid-column: auto; padding-left: var(--space-5); border-left: var(--border); }  /* Run 10: :nth-child(n) schlägt die 3n+1-Regel darüber */
  .stats:has(> :nth-child(4):last-child) > .stat:nth-child(n):first-child { padding-left: 0; border-left: 0; }
}
/* ---------- Testimonial ---------- */
.testimonial { border-left: 2px solid var(--line-strong); padding-left: var(--space-5); max-width: 44rem; }
.testimonial__quote { font-size: var(--fs-lg); line-height: 1.5; font-style: normal; }
.testimonial__quote::before { content: "„"; }
.testimonial__quote::after { content: "“"; }
.testimonial__who { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
.testimonial__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.testimonial__name { font-family: var(--font-display); font-weight: 700; }
.testimonial__role { font-size: var(--fs-sm); color: var(--text-2); }
.testimonial__logo { margin-left: auto; max-height: 32px; width: auto; }

/* ---------- FAQ ---------- */
.faq { border-top: var(--border); max-width: 52rem; }
.faq__item { border-bottom: var(--border); }
.faq__q { list-style: none; display: flex; justify-content: space-between; gap: var(--space-5); align-items: center; padding: var(--space-5) 0; min-height: 44px; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); letter-spacing: -.01em; }
.faq__q::-webkit-details-marker { display: none; }
.faq__icon { flex: none; width: 1.5rem; height: 1.5rem; color: var(--text-2); transition: transform var(--dur-2) var(--ease-out); }
.faq__item[open] .faq__icon { transform: rotate(45deg); color: var(--signal); }
.faq__a { padding-bottom: var(--space-5); max-width: var(--measure); color: var(--text-2); }
.faq__a > * + * { margin-top: .8em; }

/* ---------- CTA-Band ---------- */
/* ---------- Logo-Wall ---------- */
.logo-wall__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); color: var(--text-2); margin-bottom: var(--space-4); }
.logo-wall__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); border-top: var(--border); border-left: var(--border); }
.logo-wall__item { display: grid; place-items: center; min-height: 6rem; padding: var(--space-4); border-right: var(--border); border-bottom: var(--border); }
.logo-wall__item img { max-height: 40px; width: auto; filter: grayscale(1); opacity: .8; }
.logo-wall__item a:hover img, .logo-wall__item img:hover { filter: none; opacity: 1; }

/* ---------- Vorher/Nachher-Slider ---------- */
.ba { --pos: 50%; position: relative; overflow: hidden; border: var(--border); border-radius: var(--r-3); background: var(--raised); touch-action: pan-y; user-select: none; }
.ba img { width: 100%; }
.ba__after { position: absolute; inset: 0; height: 100%; object-fit: cover; clip-path: inset(0 0 0 var(--pos)); }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; }  /* Bedienelement, kein Inhalt */
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--signal-fill); z-index: 2; pointer-events: none; }
.ba__handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--signal-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0C0F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 24px no-repeat; }
.ba__range:focus-visible ~ .ba__handle::after { outline: 2px solid var(--text); outline-offset: 3px; }
.ba__label { position: absolute; bottom: var(--space-3); z-index: 2; padding: .2em .6em; border-radius: var(--r-1); background: var(--scrim); color: #fff; font-family: var(--font-mono); font-size: var(--fs-xs); pointer-events: none; }
.ba__label--before { left: var(--space-3); }
.ba__label--after { right: var(--space-3); }

/* ---------- Prozess-Schritte (echte Reihenfolge → Nummern sind Information) ---------- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 0; }
.steps__item { counter-increment: step; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5) 0; border-top: var(--border); }
.steps__item::before { content: counter(step, decimal-leading-zero); font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-lg); color: var(--signal-ink); line-height: 1.2; }
.steps__title { font-size: var(--fs-lg); }
.steps__text { color: var(--text-2); margin-top: var(--space-2); max-width: 56ch; }
.steps__meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-2); margin-top: var(--space-3); }
@media (min-width: 64rem) {
  .steps--row { grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr)); gap: var(--space-5); }
  .steps--row .steps__item { grid-template-columns: 1fr; border-top: 2px solid var(--line); }
  .steps--row .steps__item:first-child { border-top-color: var(--signal); }
}
/* ---------- Preiskarte ---------- */
/* Run 9: 1 Spalte · 2 Spalten (letzte ungerade Karte über beide) · ab 75rem 4 Spalten auf 12 Spuren, letzte Reihe verteilt */
.pricing { display: grid; gap: var(--space-5); align-items: stretch; }
@media (min-width: 40rem) { .pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 40rem) and (max-width: 74.99rem) { .pricing > :nth-child(odd):last-child { grid-column: 1 / -1; } }
@media (min-width: 75rem) {
  .pricing { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pricing > * { grid-column: span 3; }
  .pricing > :nth-child(4n+1):nth-last-child(3), .pricing > :nth-child(4n+1):nth-last-child(3) ~ * { grid-column: span 4; }
  .pricing > :nth-child(4n+1):nth-last-child(2), .pricing > :nth-child(4n+1):nth-last-child(2) ~ * { grid-column: span 6; }
  .pricing > :nth-child(4n+1):last-child { grid-column: 1 / -1; }
}
.price-billing { margin-top: var(--space-3); max-width: var(--measure); font-size: var(--fs-sm); color: var(--text-2); }
.price-billing strong { color: var(--text); font-weight: 600; }
/* Run 10: eine Infobox unter den Preiskarten statt drei einzelner Hinweise (Richtwerte, Festpreis, Abrechnung) */
.price-info { margin-top: var(--space-6); padding: var(--space-5); background: var(--surface); border: var(--border); border-left: 2px solid var(--signal); border-radius: var(--r-3); }
.tone-surface .price-info { background: var(--bg); }
.price-info__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); letter-spacing: -.01em; margin-bottom: var(--space-4); }
.price-info__list { margin: 0; display: grid; gap: var(--space-4); }
.price-info__row { display: grid; gap: var(--space-1); align-content: start; }
.price-info dt { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); }
.price-info dd { margin: 0; font-size: var(--fs-sm); color: var(--text-2); max-width: 60ch; }
@media (min-width: 64rem) {
  .price-info__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
  .price-info__row + .price-info__row { border-left: var(--border); padding-left: var(--space-6); }
}
.pricing-card { background: var(--surface); border: var(--border); border-radius: var(--r-3); padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.pricing-card--featured { border-color: var(--signal); box-shadow: inset 0 2px 0 var(--signal); }
.pricing-card__badge { align-self: flex-start; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--on-signal); background: var(--signal-fill); padding: .15em .5em; border-radius: var(--r-1); }
.pricing-card__name { font-size: var(--fs-lg); }
.pricing-card__for { color: var(--text-2); font-size: var(--fs-sm); }
.pricing-card__price { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.pricing-card__price .num { font-size: var(--fs-2xl); font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.pricing-card__unit { font-size: var(--fs-sm); color: var(--text-2); }
.pricing-card .card__list { align-content: start; }
.pricing-card .btn { margin-top: auto; }
/* Run 9: Kopf, Preis, Inhalt, Button als feste Zeilen; mit Subgrid fluchten Preis und Liste über alle Karten einer Reihe */
.pricing-card__head, .pricing-card__body { display: grid; gap: var(--space-3); align-content: start; }
.pricing-card__pricebox { display: grid; gap: var(--space-1); align-content: start; }
.pricing-card__pricebox .pricing-card__kind { margin-top: 0; }
.pricing-card__body { display: flex; flex-direction: column; gap: var(--space-4); }
.pricing-card__more { margin-top: auto; }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 40rem) {
    .pricing { row-gap: var(--space-5); }
    .pricing-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--space-4); }
  }
}


/* ---------- Liste (Karten ohne Link) ---------- */
.itemlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
@media (min-width: 40rem) { .itemlist--2, .itemlist--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .itemlist--2 > :nth-child(odd):last-child { grid-column: 1 / -1; } }
@media (min-width: 40rem) and (max-width: 63.99rem) { .itemlist--3 > :nth-child(odd):last-child { grid-column: 1 / -1; } }
@media (min-width: 64rem) {
  .itemlist--3 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .itemlist--3 > * { grid-column: span 2; }
  .itemlist--3 > :nth-child(3n+1):nth-last-child(2), .itemlist--3 > :nth-child(3n+1):nth-last-child(2) + * { grid-column: span 3; }
  .itemlist--3 > :nth-child(3n+1):last-child { grid-column: 1 / -1; }
}
.itemlist__item { border-top: 2px solid var(--line); padding-top: var(--space-4); }
.itemlist__title { font-size: var(--fs-md); margin-bottom: var(--space-2); }
.itemlist__item p { color: var(--text-2); }

/* ---------- Zeitleiste ---------- */
.timeline { list-style: none; margin: 0; padding: 0 0 0 var(--space-6); position: relative; display: grid; gap: var(--space-7); max-width: 46rem; }
.timeline::before, .timeline::after { content: ""; position: absolute; left: 5px; top: .6em; bottom: .6em; width: 2px; background: var(--line); }
.timeline::after { background: var(--signal); transform-origin: top; transform: scaleY(1); }
.timeline__item { position: relative; display: grid; gap: var(--space-2); }
.timeline__item::before { content: ""; position: absolute; left: calc(-1 * var(--space-6) + 1px); top: .45em; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); border: 2px solid var(--signal); z-index: 1; }
.timeline__when { font-weight: 500; font-size: var(--fs-md); color: var(--signal-ink); }
.timeline__title { font-size: var(--fs-lg); }
.timeline__text { color: var(--text-2); max-width: 56ch; margin-top: var(--space-2); }
/* ---------- Case-Detail: Galerie ---------- */
.gallery { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 64rem) { .gallery { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); } }
.gallery__phones { display: flex; gap: var(--space-4); flex-wrap: wrap; }
/* Effekt-Linie für Prozess-Schritte (Füllung per Scroll, siehe motion.css) */
.steps { position: relative; }
/* Zwei Säulen „vorher → heute“ (dataviz: eine Reihe, Datenfarbe, ≤ 24 px, 4 px Rundung oben, Haarlinien-Raster) */
.colchart { margin: 0; display: grid; gap: var(--space-3); }
.colchart__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-base); }
.colchart__svg { width: 100%; max-width: 30rem; height: auto; display: block; overflow: visible; }
.colchart__grid { stroke: var(--line); stroke-width: 1; }
.colchart__base { stroke: var(--text-3); stroke-width: 1; }
.colchart__tick { fill: var(--text-2); font-family: var(--font-mono); font-size: 10px; font-variant-numeric: tabular-nums; }
.colchart__bar { fill: var(--data); }
.colchart__hit { fill: transparent; }
.colchart__col:hover .colchart__bar { fill: color-mix(in srgb, var(--data) 80%, var(--text)); }
.colchart__val { fill: var(--text); font-family: var(--font-mono); font-weight: 500; font-size: 13px; font-variant-numeric: tabular-nums; }
.colchart__lbl { fill: var(--text-2); font-family: var(--font-mono); font-size: 10.5px; }
.result-chart { margin-bottom: var(--space-6); max-width: 30rem; }

/* Hervorgehobener Case (Startseite) */
.case-highlight { display: grid; gap: var(--space-6); padding: var(--space-6); background: var(--surface); border: var(--border); border-radius: var(--r-3); margin-bottom: var(--space-6); }
@media (min-width: 64rem) { .case-highlight { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; } }
.case-highlight__copy { display: grid; gap: var(--space-3); }
.case-highlight__title { font-size: var(--fs-xl); }
.case-highlight__title a { text-decoration: none; }
.case-highlight__title a:hover { text-decoration: underline; }
/* Warum ich */
.why { display: grid; gap: var(--space-6); }
@media (min-width: 64rem) { .why--photo { grid-template-columns: 22rem minmax(0, 1fr); align-items: start; } }
.why__photo img { border-radius: var(--r-3); width: 100%; height: auto; }
.why__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
@media (min-width: 48rem) { .why:not(.why--photo) .why__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.why__list li { border-top: 2px solid var(--signal); padding-top: var(--space-4); }
.why__title { font-size: var(--fs-md); margin-bottom: var(--space-2); }
.why__list p { color: var(--text-2); }

/* Kundenstimme */
.quote { margin: 0; padding: var(--space-5); background: var(--surface); border: var(--border); border-radius: var(--r-3); display: grid; gap: var(--space-3); }
.quote__text { margin: 0; font-size: var(--fs-md); }
.quote__who { font-size: var(--fs-sm); color: var(--text-2); }
.post__faq, .post__quellen { margin-top: var(--space-8); max-width: 65ch; }
.post__faq h2, .post__quellen h2 { font-size: var(--fs-xl); margin-bottom: var(--space-4); }
.source-list { font-size: var(--fs-sm); color: var(--text-2); padding-left: 1.2em; display: grid; gap: var(--space-2); overflow-wrap: anywhere; }
.author { margin-top: var(--space-8); display: grid; gap: var(--space-4); padding: var(--space-5); border: var(--border); border-radius: var(--r-3); background: var(--surface); max-width: 65ch; }
.author--photo { grid-template-columns: 96px minmax(0, 1fr); align-items: center; }
.author__photo img { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; }
.author__name { font-family: var(--font-display); font-weight: 700; }
.author__text { color: var(--text-2); font-size: var(--fs-sm); margin-top: var(--space-2); }

/* ================================================================== Run 8 ================================================================== */
/* FAQ zweispaltig (Kopf links mit WhatsApp-Hinweis, Akkordeon rechts) */
.section--split .faq, .section--aside .faq { max-width: none; }
.faq-more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-top: var(--space-6) !important; padding-top: var(--space-5); border-top: var(--border); }
.faq-more p { font-family: var(--font-display); font-weight: 700; }
.faq__q { transition: color var(--dur-2) var(--ease-out); }
.faq__q:hover { color: var(--signal-ink); }
.faq__item[open] .faq__q { color: var(--text); }

/* Rechte Spalte: Kennzahl mit Quelle */
.kpi { margin: 0; padding: var(--space-6) var(--space-5) var(--space-5); background: var(--surface); border: var(--border); border-top: 2px solid var(--data); border-radius: var(--r-3); display: grid; gap: var(--space-2); }
.tone-surface .kpi, .tone-surface .kurz, .tone-surface .mini-cta, .tone-surface .toc { background: var(--bg); }
.kpi__kicker { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-2); }
.kpi__value { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-stat); line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; margin-top: var(--space-2); }
.kpi__label { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); letter-spacing: -.01em; }
.kpi__foot { display: grid; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); border-top: var(--border); }
.kpi__link { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); color: var(--signal-ink); }
.kpi .spark { margin-top: var(--space-2); }

/* Rechte Spalte: Das Wichtigste in Kürze */
.kurz { padding: var(--space-5); background: var(--surface); border: var(--border); border-left: 3px solid var(--signal); border-radius: var(--r-3); }
.kurz__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); margin-bottom: var(--space-4); }
.kurz ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.kurz li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--text-2); }
.kurz li svg { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .25em; color: var(--positive); }

/* Rechte Spalte: Mini-CTA mit Preis */
.mini-cta { padding: var(--space-6) var(--space-5) var(--space-5); background: var(--surface); border: var(--border); border-radius: var(--r-3); display: grid; gap: var(--space-2); }
.mini-cta__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); }
.mini-cta__price { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); }
.mini-cta__price .num { font-size: var(--fs-2xl); letter-spacing: -.04em; }
.mini-cta__text { color: var(--text-2); font-size: var(--fs-sm); }
.mini-cta .btn { margin-top: var(--space-4); }

/* Rechte Spalte: Inhaltsverzeichnis (mitlaufend) */
.toc { padding: var(--space-5); background: var(--surface); border: var(--border); border-radius: var(--r-3); }
.toc__title { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-2); margin-bottom: var(--space-3); }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: grid; }
.toc li { counter-increment: toc; border-top: var(--border); }
.toc a { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-2); padding: var(--space-3) 0; min-height: 44px; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); color: var(--text-2); }
.toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-mono); font-weight: 500; color: var(--text-2); }
.toc a:hover { color: var(--text); }
.toc a:hover::before { color: var(--signal-ink); }
.aside-shot { margin: 0; }

/* Referenzen: einzelner Case als breite Karte (Screenshot links, Text rechts) */
.case-grid--single { display: grid; }
@media (min-width: 64rem) {
  .case-card--featured { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
  .case-card--featured .case-card__shot { padding: var(--space-5) 0 var(--space-5) var(--space-5); }
  .case-card--featured .case-card__body { padding: var(--space-6); }
  .case-card--featured .case-card__title { font-size: var(--fs-xl); }
}

/* Hover: Karten heben sich leicht, Links mit animierter Unterstreichung */
.card, .case-card, .pricing-card { transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card:has(a):hover, .case-card:hover { transform: translateY(-3px); }
  .btn--primary:hover, .btn--secondary:hover, .btn--whatsapp:hover { transform: translateY(-1px); }
}
.card:has(a):hover, .case-card:hover { border-color: var(--line-strong); }
.prose a, .answer a, .card__text a, .steps__text a, .section__more a, .kpi__link, .faq__a a, .legal a, .fit a, .itemlist a, .pricing-card__more a, .post__svc-name a {
  text-decoration: none;
  background-image: linear-gradient(var(--signal), var(--signal)), linear-gradient(color-mix(in srgb, currentColor 40%, transparent), color-mix(in srgb, currentColor 40%, transparent));
  background-size: 0% 1px, 100% 1px; background-position: 0 100%, 0 100%; background-repeat: no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-bottom: 1px;
  transition: background-size var(--dur-3) var(--ease-out);
}
.prose a:hover, .answer a:hover, .card__text a:hover, .steps__text a:hover, .section__more a:hover, .kpi__link:hover, .faq__a a:hover, .legal a:hover, .fit a:hover, .itemlist a:hover, .pricing-card__more a:hover, .post__svc-name a:hover { background-size: 100% 1px, 100% 1px; }

@media (prefers-reduced-motion: no-preference) {
  .cta-band.is-armed:not(.is-in) .cta-band__line { stroke-dashoffset: 1; }
  .cta-band.is-armed.is-in .cta-band__line { animation: g-draw 1.6s var(--ease-out) .2s both; }
}
@media (prefers-reduced-motion: reduce) {  /* Run 10: Linie zeichnet sich einmal, 600 ms */
  .cta-band.is-armed:not(.is-in) .cta-band__line { stroke-dashoffset: 1; }
  .cta-band.is-armed.is-in .cta-band__line { animation: g-draw .6s var(--ease-out) .1s both !important; }
}
/* Lange Schrittlisten (ohne Zeilenlayout) am Desktop zweispaltig statt einer halbbreiten Spalte */
@media (min-width: 64rem) {
  .steps:not(.steps--row) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); }
  .steps:not(.steps--row) > :nth-child(odd):last-child { grid-column: 1 / -1; }
}
/* Ablauf-Zeitleiste (Grafik) über den Schritten ersetzt die Füll-Linie aus motion.css (fx-prozess): nur eine Signal-Linie */
.gfx--ablauf + .steps .steps__item::after { content: none !important; }
@media (min-width: 64rem) { .gfx--ablauf + .steps--row .steps__item { border-top-color: transparent; padding-top: var(--space-3); } }

/* ================================================================== Run 9 ================================================================== */
/* Einzelne Case-Karte über der vollen Breite (letzte ungerade Karte im 2-Spalten-Raster): wie die breite Karte, Screenshot links */
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .case-grid > .case-card:nth-child(odd):last-child:not(:first-child) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; align-items: center; }
  .case-grid > .case-card:nth-child(odd):last-child:not(:first-child) .case-card__shot { padding: var(--space-4) 0 var(--space-4) var(--space-4); }
}
@media (min-width: 64rem) {
  .grid--2.case-grid > .case-card:nth-child(odd):last-child:not(:first-child) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: none; align-items: center; }
  .grid--2.case-grid > .case-card:nth-child(odd):last-child:not(:first-child) .case-card__shot { padding: var(--space-5) 0 var(--space-5) var(--space-5); }
}

/* Run 9: aus components.css verschoben (nie im ersten Bildschirm) – spart Inline-CSS für das 100-KB-Budget */
/* CTA-Box: Überschrift über die volle Breite, darunter Satz + Buttons; Messlinie am unteren Rand */
.section--cta .cta-band { position: relative; overflow: hidden; }
.cta-band { border: var(--border); border-top: 2px solid var(--signal); border-radius: var(--r-3); background: var(--surface);
  padding: var(--space-6) var(--space-5) var(--space-8);  /* Run 9: Tokens; unten Platz für die Messlinie (3,5rem) */
  display: grid; gap: var(--space-5); position: relative; overflow: hidden; }
.cta-band__title { font-size: var(--fs-2xl); max-width: 30ch; }
@media (min-width: 48rem) { .cta-band { padding: var(--space-7) var(--space-7) var(--space-9); } }
.cta-band__row { display: grid; gap: var(--space-5); align-items: center; }
.cta-band__text { color: var(--text-2); max-width: 56ch; }
.cta-band .actions { gap: var(--space-3); }
@media (min-width: 64rem) { .cta-band__row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); } .cta-band .actions__note { text-align: right; } }
.cta-band__gfx { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 3.5rem; pointer-events: none; }
.cta-band__grid { color: var(--line); }
.cta-band__line { color: var(--signal); opacity: .75; stroke-dasharray: 1; stroke-dashoffset: 0; }
/* ---------- Balken: Vergleich weniger Werte (eine Farbe, Wert immer als Zahl daneben) ---------- */
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-4); align-items: baseline; }
.bar__label { font-size: var(--fs-sm); }
.bar__value { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.bar__track { grid-column: 1 / -1; height: 10px; background: var(--raised); border-radius: var(--r-1); overflow: hidden; }
.bar__fill { height: 100%; width: var(--w, 0%); background: var(--data); border-radius: var(--r-1); }
.bar--muted .bar__fill { background: var(--text-3); }
.bar__fill { display: block; }
/* ---------- Passt / passt nicht ---------- */
.fit { display: grid; gap: var(--space-5); }
@media (min-width: 48rem) { .fit { grid-template-columns: 1fr 1fr; } }
.fit__col { border: var(--border); border-radius: var(--r-3); padding: var(--space-5); background: var(--surface); }
.fit__col--yes { border-top: 2px solid var(--positive); }
.fit__col--no { border-top: 2px solid var(--line-strong); }
.fit__title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-md); margin-bottom: var(--space-4); }
.fit__title svg { width: 1.2em; height: 1.2em; flex: none; }
.fit__col--yes .fit__title svg { color: var(--positive); }
.fit__col--no .fit__title svg { color: var(--text-2); }
.fit ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); color: var(--text-2); }
.fit li { padding-left: var(--space-4); position: relative; }
.fit li::before { content: ""; position: absolute; left: 0; top: .75em; width: .45em; height: 1px; background: var(--text-3); }
/* Leistungsraster (Run 9), Erklärung in components.css bei .svc-card */
@media (min-width: 40rem) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-grid--lead > .svc-card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "i t p" "i x p"; gap: var(--space-2) var(--space-6); align-items: center; }
  .svc-grid--lead > :first-child .svc-icon { grid-area: i; }
  .svc-grid--lead > :first-child .card__title { grid-area: t; align-self: end; }
  .svc-grid--lead > :first-child .card__text { grid-area: x; align-self: start; max-width: 60ch; }
  .svc-grid--lead > :first-child .svc-card__price { grid-area: p; margin: 0; padding: 0; white-space: nowrap; }
}
@media (min-width: 64rem) {
  .svc-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .svc-grid > * { grid-column: span 2; }
  .svc-grid:not(.svc-grid--lead) > :nth-child(3n+1):nth-last-child(2), .svc-grid:not(.svc-grid--lead) > :nth-child(3n+1):nth-last-child(2) + *,
  .svc-grid--lead > :nth-child(3n+2):nth-last-child(2), .svc-grid--lead > :nth-child(3n+2):nth-last-child(2) + * { grid-column: span 3; }
  .svc-grid:not(.svc-grid--lead) > :nth-child(3n+1):last-child, .svc-grid--lead > :nth-child(3n+2):last-child, .svc-grid--lead > :first-child { grid-column: 1 / -1; }
}