/* newways.suite 1.34.0 — öffentlicher Produkt- und Buchungsweg.
   Eine lokale Schrift, ruhige Flächen und echte Produktansichten.
   Nur der Kopf trägt Glas; Formulare und Preisinformationen bleiben deckend.
   Reihenfolge, Bedienung ohne JavaScript und Betreiberfarben bleiben erhalten. */
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url('../fonts/geist-var-latin.woff2') format('woff2');
}

body.buchung {
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-akzent: var(--font-sans);
  --bg: #f4f7f5;
  --bg-pattern: none;
  --surface: #ffffff;
  --surface-2: #e9f0ec;
  --surface-3: #dce6df;
  --surface-inset: #f4f7f5;
  --text: #17211e;
  --text-muted: #52615b;
  --text-subtle: #5d6b65;
  --text-soft: var(--text-muted);
  --border: #dce3df;
  --border-strong: #bccbc2;
  --feld-rand: #7b8a83;
  /* Historischer Klassenname; die Schaltflächen folgen der Betreiberfarbe. */
  --gold: var(--accent);
  --gold-hell: color-mix(in srgb, var(--accent) 88%, #000);
  --tinte: #17211e;
  --tinte-text: #f4f7f5;
  --tinte-muted: #c3d1cb;
  --tinte-linie: rgba(244, 247, 245, .2);
  --tinte-oliv: #b6d6c4;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-marke: 12px;
  --schatten-karte: 0 2px 5px rgba(23, 33, 30, .04);
  --schatten-bild: 0 8px 32px -16px rgba(23, 33, 30, .2);
  --glass-bg: var(--bg);
  --glass-surface: var(--surface);
  --glass-tint: var(--surface-2);
  --scroll-cover: var(--surface);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
}
html[data-theme="dark"] body.buchung {
  --bg: #141d18;
  --surface: #1b2821;
  --surface-2: #24352b;
  --surface-3: #304439;
  --surface-inset: #17241d;
  --text: #f4f7f5;
  --text-muted: #c0cec6;
  --text-subtle: #b0c2b7;
  --border: #354a3e;
  --border-strong: #5b7565;
  --feld-rand: #81998a;
  --tinte: #1b2c22;
  --tinte-linie: rgba(244, 247, 245, .22);
  --schatten-karte: 0 1px 3px rgba(0, 0, 0, .2);
  --schatten-bild: 0 8px 32px -16px rgba(0, 0, 0, .5);
}

/* ---------- 3. Grundschrift ---------- */
.buchung h1, .buchung h2, .buchung h3 { font-family: var(--font-display); letter-spacing: -.025em; }
/* Feldrand 3:1 – und die Zustände aus app.css behalten ihren Vorrang (Überfahren, Fokus, Fehler).
   Auch Kästchen und Radios: ihr Rand ist das, woran man sie erkennt. Nur ohne Haken –
   mit Haken bleibt der Akzentrand aus app.css (.check input:checked). */
.buchung :is(.input, .select) { border-color: var(--feld-rand); }
.buchung :is(.input, .select):hover { border-color: var(--text-muted); }
.buchung :is(.input, .select):focus { border-color: var(--focus); }
.buchung :is(.input, .select).is-invalid { border-color: var(--danger); }
.buchung .check input:is([type="checkbox"], [type="radio"]):not(:checked) { border-color: var(--feld-rand); }
.booking__akzent { font-family: var(--font-sans); font-style: normal; font-weight: 650; letter-spacing: -.025em; }
.booking__ueber {
  display: inline-flex; align-items: center; gap: .75em;
  font-size: .875rem; font-weight: 550; letter-spacing: .015em;
  color: var(--text-muted);
}
.booking__ueber::before { content: none; }
@media (max-width: 380px) { .booking__ueber::before { content: none; } }
.buchung .booking__schritte { font-size: .8125rem; }
/* Kleinste Schrift auf allen Seiten dieses Gerüsts (auch Rechtstexte und Support): .8125rem. */
.buchung :is(.text-xs, .badge) { font-size: .8125rem; }
.buchung code { font-size: max(.875em, .8125rem); }
/* Tippziele: 44 px auch am Rechner – ein Tablet quer ist breiter als 1023 px. */
.buchung a.breadcrumb { min-height: 2.75rem; width: fit-content; }
.buchung .btn { min-height: 48px; border-radius: 10px; }
.buchung :is(.input, .select) { min-height: 44px; }
.buchung .booking__abschluss label.check { min-height: 2.75rem; }
/* Lange Rechtstitel bleiben auch bei vergrößerter Schrift vollständig lesbar. */
.buchung .booking__abschluss .check__text { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }

/* ---------- 4. Kopf ---------- */
.buchung .booking__bar { min-height: 4.5rem; gap: var(--space-4); background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: none; }
@supports ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
  .buchung .booking__bar { background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
}
.booking__marke { display: inline-flex; align-items: center; min-height: 44px; flex: none; }
/* Das Suite-Logo ist 720 × 232 mit Luft oben und unten; sichtbar ist das Band
   y 54–178 (gemessen). object-fit schneidet genau dieses Band aus – kein
   zweites Bild, und die Wortmarke steht lesbar statt winzig. */
.booking__logo {
  height: 2.5rem; width: auto; max-width: none;
  aspect-ratio: 718 / 125; object-fit: cover; object-position: 50% 50%;
}
.booking__logo--firma { aspect-ratio: auto; height: 2.25rem; max-width: 12rem; object-fit: contain; }
.booking__frage {
  display: none; align-items: center; gap: .4rem; min-height: 44px;
  font-size: .875rem; color: var(--text-muted); text-decoration: underline; text-underline-offset: .2em;
}
.booking__frage svg { width: 16px; height: 16px; flex: none; }
.booking__frage:hover { color: var(--text); }
.buchung .booking__langs { display: flex; gap: 2px; }
.buchung .booking__lang { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; font-size: .8125rem; color: var(--text-muted); }
.buchung .booking__lang.is-active { color: var(--text); }
.buchung .booking__bar .btn--icon { width: 44px; height: 44px; min-height: 44px; }
@media (min-width: 900px) { .booking__frage { display: inline-flex; } }
@media (max-width: 900px) {
  .booking__logo { height: 2rem; }
}
@media (max-width: 600px) {
  .buchung .booking__bar { min-height: 4rem; gap: var(--space-1); }
  .booking__logo { height: 1.625rem; }
  .booking__logo--firma { height: 1.625rem; max-width: 8rem; }
}
@media (max-width: 380px) {
  .booking__logo { height: 1.25rem; }
  .booking__logo--firma { height: 1.25rem; max-width: 6.5rem; }
}

/* Rückwärts tabben rollt das Ziel an die Oberkante des Fensters – ohne
   Polster genau unter den klebenden Kopf (64 bzw. 72 Pixel hoch). Ein Polster
   für jeden Sprung (Tab, Sprunglink zur Zusammenfassung); deshalb trägt
   darunter kein Element einen eigenen scroll-margin, sonst addierten sich beide. */
html { scroll-padding-top: 5.5rem; }

/* ---------- 5. Einwilligungsfrage: ein Band im Fluss, nie über dem Inhalt ---------- */
.buchung .ads-consent {
  position: static; inset: auto; z-index: auto; display: block; pointer-events: auto;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  padding: var(--space-3) clamp(1rem, 4vw, 2rem);
}
.buchung .ads-consent[hidden] { display: none; }
.buchung .ads-consent__card {
  max-width: calc(74rem - 2 * clamp(1rem, 4vw, 2rem)); margin: 0 auto; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6);
}
.buchung .ads-consent__text { flex: 1 1 28rem; min-width: 0; }
.buchung .ads-consent__card strong { display: block; font-size: .9375rem; line-height: 1.35; }
.buchung .ads-consent__card p { margin: .15rem 0 0; font-size: .875rem; line-height: 1.45; color: var(--text-muted); }
.buchung .ads-consent__card .link { color: var(--text); }
.buchung .ads-consent__knoepfe { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.buchung .ads-consent__knoepfe .btn { min-width: 9rem; min-height: 44px; }
@media (max-width: 620px) {
  .buchung .ads-consent__knoepfe { width: 100%; }
  .buchung .ads-consent__knoepfe .btn { flex: 1 1 0; min-width: 0; white-space: normal; text-align: center; }
}

/* ---------- 6. Stufen ----------
   Seit 1.23.1 folgt die Produktseite in jeder Breite der Dokumentreihenfolge.
   Die Produktansichten stehen vor der Preisentscheidung. */
.booking__stufen { display: block; }
.booking__stufen > :is(.booking__fakten, .booking__waehler, .booking__wissen, .booking__start, .booking__fragen, .booking__schluss) { margin-top: clamp(3rem, 6vw, 5.5rem); }
.booking__stufen > :is(.plan-grid, .booking__unter, .grenzen) { margin-top: 1.5rem; }
@media (min-width: 1100px) {
  .buchung .plan-card__head { min-height: 4.5rem; }
  /* Vier buchbare Stufen stehen in einer Reihe (1.19.0 ebenso), statt drei
     und darunter eine allein. Eine einzige Stufe läuft nicht über die ganze Breite. */
  .buchung .plan-grid:has(> .plan-card:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .buchung .plan-grid:has(> .plan-card:only-child) { max-width: 26rem; }
}
.buchung .booking__head h1 {
  font-size: clamp(2.25rem, 1.2rem + 3.4vw, 3.75rem); font-weight: 720; font-stretch: normal;
  letter-spacing: -0.035em; line-height: 1.02; margin: .9rem 0 1rem;
}
.buchung .booking__head h1 .booking__akzent { display: block; font-size: .86em; letter-spacing: -0.01em; margin-top: .15em; }
.buchung .booking__head .lead { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 1.5; color: var(--text); max-width: 36rem; }
/* Seit 1.22.7: früher Sprung zu Nutzerwahl und Preisen, ohne Informationen zu kürzen. */
.booking__tarif-sprung { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; }
.booking__fakten { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.booking__fakten li {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 2.25rem;
  padding: .35rem .8rem; border-radius: var(--radius-full);
  background: var(--surface); border: 1px solid var(--border);
  font-size: .875rem; color: var(--text); line-height: 1.3;
}
.booking__fakten svg { width: 16px; height: 16px; color: var(--accent-text); flex: none; }

.booking__fenster { position: relative; margin: 0; padding-bottom: 2.5rem; }
.booking__bild { width: 100%; height: auto; border-radius: 14px; box-shadow: var(--schatten-bild); background: var(--surface); }
.booking__bild--dunkel { display: none; }
html[data-theme="dark"] .booking__bild--hell { display: none; }
html[data-theme="dark"] .booking__bild--dunkel { display: block; }
.booking__telefon { position: absolute; right: 0; bottom: 0; width: 30%; max-width: 13rem; }
.booking__telefon .booking__bild { border-radius: 22px; box-shadow: 0 0 0 6px var(--bg), var(--schatten-bild); }
.booking__fenster figcaption { margin-top: var(--space-3); max-width: 62%; font-size: .8125rem; line-height: 1.45; color: var(--text-muted); }

.buchung .plan-grid { gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }
.buchung .plan-card {
  border-radius: var(--radius-marke); padding: clamp(1.4rem, 1rem + 1vw, 2rem);
  box-shadow: var(--schatten-karte); border-color: var(--border);
}
.buchung .plan-card:hover { box-shadow: var(--schatten-karte); border-color: var(--border-strong); }
.buchung .plan-card__head h2 { font-size: 1.5rem; font-weight: 660; letter-spacing: -0.02em; }
.buchung .plan-card__for { font-size: .9375rem; }
.buchung .plan-card__price { margin: 1.25rem 0 0; gap: .6rem; }
.buchung .plan-card__amount {
  font-family: var(--font-display); font-weight: 720; font-stretch: normal;
  font-size: clamp(2.6rem, 2rem + 1.4vw, 3.25rem); letter-spacing: -0.04em; line-height: 1;
}
.buchung .plan-card__unit { font-size: .875rem; line-height: 1.35; }
.plan-card__ab { font-size: .9375rem; color: var(--text); font-variant-numeric: tabular-nums; }
.buchung .plan-card__ab { margin: .35rem 0 1rem; display: grid; gap: .2rem; }
/* Der Gesamtpreis für die gewählte Nutzerzahl (1.20.0): der Monatssatz trägt
   den Betrag fett, die Jahreszeile darunter bleibt leise – zwei Beträge, die
   sich nie verwechseln sollen. */
.buchung .plan-card__summe { font-weight: 640; }
.buchung .plan-card__jahr { font-size: .875rem; color: var(--text-muted); line-height: 1.4; }
/* Der gemeinsame Nutzerwähler über den Karten (1.20.0). */
.booking__waehler { display: grid; gap: .5rem; max-width: 52rem; }
.booking__waehler-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.booking__waehler-frage { font-weight: 640; font-size: 1.0625rem; }
.booking__waehler-hinweis { margin: 0; font-size: .9375rem; color: var(--text-muted); }
.buchung .plan-card__foot { margin: 0 0 1.25rem; }
.plan-card__rest { display: flex; flex-direction: column; flex: 1; min-width: 0; }
/* 1.22.7: Unterschiede vor gemeinsamen Funktionen, am Telefon kurze Karten. */
.plan-card__funktionen { min-width: 0; margin-bottom: 1rem; }
.plan-card__funktionen summary { min-height: 44px; padding-block: .65rem; cursor: pointer; font-size: .875rem; font-weight: 600; color: var(--text); }
.buchung .plan-card__funktionen .plan-card__list { margin-top: .4rem; }
.buchung .plan-card__unterschiede { margin-bottom: .4rem; }
/* Am Rechner teilen sich die Karten ihre Zeilen (Kopf, Preis, Platzspanne, Knopf, Rest):
   die goldenen Knöpfe liegen auf einer Linie, gleich wie lang Untertitel oder Spanne in
   einer Sprache werden. Ohne subgrid bleibt jede Karte für sich – lesbar wie am Handy. */
@media (min-width: 1100px) {
  @supports (grid-template-rows: subgrid) {
    .buchung .plan-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  }
  /* Vier Stufen in einer Reihe: die Karte ist schmal. Ohne feste Spalte wuchs sie auf die
     Breite des längsten nicht umbrechenden Inhalts (Knopf, „incluido en todas las tarifas")
     und schob ihn über den Kartenrand. Jetzt bricht der Text um, und die Knöpfe bleiben auf einer Linie. */
  .buchung .plan-grid:has(> .plan-card:nth-child(4)) > .plan-card { grid-template-columns: minmax(0, 1fr); padding-inline: 1.25rem; }
  .buchung .plan-grid:has(> .plan-card:nth-child(4)) .plan-card__foot .btn { white-space: normal; text-align: left; }
  .buchung .plan-grid:has(> .plan-card:nth-child(4)) .plan-card__list .subtle { white-space: normal; }
}
/* Tablet (700–1099 px): zwei Karten nebeneinander ließen neben der dritten ein
   Loch. Jede Karte steht deshalb in eigener Reihe, innen zweispaltig: links
   Name, Preis und Knopf, rechts, was die Stufe enthält. Die Reihenfolge im
   Dokument bleibt, es wird nur nebeneinandergestellt. */
@media (min-width: 700px) and (max-width: 1099px) {
  .buchung .plan-grid { grid-template-columns: minmax(0, 1fr); }
  .buchung .plan-card {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    grid-template-rows: auto auto auto auto 1fr; column-gap: clamp(1.5rem, 4vw, 2.5rem); align-items: start;
  }
  .buchung .plan-card > :not(.plan-card__rest) { grid-column: 1; }
  .buchung .plan-card > .plan-card__rest { grid-column: 2; grid-row: 1 / -1; }
}
.plan-card__mehr { font-size: .875rem; font-weight: 600; color: var(--text); margin-bottom: .5rem; }
.buchung .plan-card__list { flex-direction: row; flex-wrap: wrap; align-content: flex-start; gap: .15rem .35rem; }
.buchung .plan-card__list li { flex: 1 0 100%; font-size: .9375rem; }
.buchung .plan-card__list li:not(.plan-card__geerbt) { margin-bottom: .35rem; }
.buchung .plan-card__list li > span { min-width: 0; }
.buchung .plan-card__list .subtle { white-space: normal; }
/* Was eine Stufe von der vorigen erbt: eine fließende Zeile statt einer
   zweiten Liste. Jeder Punkt bleibt ein <li> – die Prüfung zählt sie. */
.buchung .plan-card__list li.plan-card__geerbt { flex: 0 1 auto; display: block; gap: 0; font-size: .875rem; color: var(--text-muted); line-height: 1.5; }
.buchung .plan-card__list li.plan-card__geerbt::after { content: "·"; margin-left: .35rem; color: var(--text-subtle); }
.buchung .plan-card__list li.plan-card__geerbt:last-child::after { content: none; }
.plan-card__geerbt-titel { color: var(--text); font-weight: 600; margin-right: .25rem; }
.buchung .plan-card__list li:first-child.plan-card__geerbt,
.buchung .plan-card__list li.plan-card__neu + li.plan-card__geerbt { margin-top: .35rem; }
/* Was die Karte davor nicht nennt, obwohl es keine Mehrleistung ist: eigene Zeile, nicht fett. */
.buchung .plan-card__list li.plan-card__geerbt:has(+ li.plan-card__zusatz)::after { content: none; }
.buchung .plan-card__list li.plan-card__geerbt + li.plan-card__zusatz { margin-top: .6rem; }
.buchung .plan-card__scope { border-top-color: var(--border); }
.buchung .plan-card__scope-label { font-size: .8125rem; color: var(--text-muted); }

/* Klare Hauptaktion in der hinterlegten Betreiberfarbe. */
.btn--gold {
  --btn-bg: var(--gold); --btn-fg: var(--accent-on); --btn-border: transparent;
  box-shadow: none;
  font-family: var(--font-display); font-weight: 620; letter-spacing: -0.005em;
}
.btn--gold:hover { --btn-bg: var(--gold); filter: brightness(.94); box-shadow: none; }
.btn--gold.btn--lg { min-height: 3.5rem; font-size: 1.0625rem; padding-inline: 1.5rem; }
.btn__punkt {
  display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%;
  background: none; flex: none;
}
.btn__punkt svg { width: .95em; height: .95em; }
.buchung .plan-card__foot .btn,
.buchung .booking__schluss .btn { justify-content: space-between; padding-inline: 1.25rem .5rem; min-height: 3.25rem; font-size: 1rem; }
.booking__schluss .row > .btn { flex: 1 1 14rem; max-width: 26rem; }   /* eine einzige Stufe: kein Knopf über die ganze Breite */

.booking__unter { display: grid; gap: .5rem; max-width: 52rem; font-size: .9375rem; color: var(--text-muted); }
.booking__unter strong { color: var(--text); }

.grenzen { border-block: 1px solid var(--border); }
.grenzen__kopf { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 2.75rem; padding: .6rem 0; font-weight: 600; color: var(--text); }
.grenzen__kopf::-webkit-details-marker { display: none; }
.grenzen__kopf svg { width: 18px; height: 18px; flex: none; color: var(--text-muted); }
.grenzen[open] .grenzen__kopf svg { transform: rotate(180deg); }
.grenzen__rahmen { overflow-x: auto; }
.grenzen__tabelle { width: 100%; border-collapse: collapse; font-size: .875rem; font-variant-numeric: tabular-nums; }
.grenzen__tabelle th, .grenzen__tabelle td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.grenzen__tabelle thead th { font-weight: 600; color: var(--text); white-space: nowrap; }
.grenzen__tabelle tbody th { padding-left: 0; font-weight: 400; color: var(--text-muted); min-width: 9rem; }
.grenzen__tabelle td { white-space: nowrap; color: var(--text); }
.grenzen__hinweis { padding: .8rem 0 1rem; max-width: 60rem; font-size: .875rem; line-height: 1.55; color: var(--text-muted); }
/* Am Handy passt die Tabelle ins Fenster: Werte brechen um, die Zeilenköpfe
   verlieren ihre Mindestbreite. So bleibt keine Stufe rechts verborgen; das
   waagerechte Scrollen des Rahmens bleibt nur Rückfall für sehr schmale Fenster. */
@media (max-width: 600px) {
  .grenzen__tabelle th, .grenzen__tabelle td { padding-inline: 0 .5rem; }
  .grenzen__tabelle tbody th { min-width: 0; }
  .grenzen__tabelle td { white-space: normal; }
  /* Mit vier Stufen (fünf Spalten) passte es in es nicht: „Almacenamiento" ist ein Wort, das
     die erste Spalte nicht schmaler werden ließ, und „puestos" bricht nicht. Dann trennen die
     Zeilenköpfe nach Silben (Sprache aus <html lang>) und behalten etwa ein Drittel. Mit drei
     Stufen bleibt alles, wie es war. */
  .grenzen__tabelle:has(thead th:nth-child(5)) tbody th { -webkit-hyphens: auto; hyphens: auto; width: 30%; }
}

.booking__wissen {
  margin-top: 0; background: var(--tinte); color: var(--tinte-text);
  border-radius: var(--radius-marke); padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  --text: var(--tinte-text); --text-muted: var(--tinte-muted); --text-subtle: var(--tinte-muted);
  --accent-text: var(--tinte-oliv); --focus: var(--tinte-oliv); --border: var(--tinte-linie);
}
html[data-theme="dark"] .booking__wissen { border: 1px solid var(--tinte-linie); }
.buchung .booking__wissen h2 { color: var(--text); font-size: clamp(1.375rem, 1.1rem + .9vw, 1.875rem); letter-spacing: -0.02em; margin-bottom: 1.5rem; }
.booking__wissen .grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1.5rem 2rem; }
/* Vier Spalten passen erst ab 1280 px; darunter zwei und zwei statt drei und eine allein. */
@media (min-width: 700px) and (max-width: 1279px) {
  .booking__wissen .grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.buchung .booking__wissen h3 { color: var(--text); font-size: 1rem; }
.buchung .booking__wissen p { color: var(--text-muted); font-size: .9375rem; }
.booking__wissen .link { color: var(--text); }

.booking__abschnitt { font-family: var(--font-display); font-size: clamp(1.375rem, 1.1rem + .9vw, 1.875rem); font-weight: 680; letter-spacing: -.02em; }
.booking__fragen, .booking__schluss { display: grid; gap: 1rem; }
@media (min-width: 1100px) { .booking__fragen { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
  .booking__fragen > .booking__abschnitt { grid-column: 1 / -1; } }
.fragen { display: grid; gap: .5rem; }
.frage { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.frage__titel { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 2.75rem; padding: .8rem 1.1rem; font-weight: 600; color: var(--text);
  border-radius: var(--radius); }   /* der Fokusring folgt der runden Karte (inherit griffe hier nicht: summary erbt über den Slot von details) */
.frage__titel::-webkit-details-marker { display: none; }
.frage__titel svg { width: 18px; height: 18px; flex: none; color: var(--text-muted); }
.frage[open] .frage__titel svg { transform: rotate(180deg); }
.frage__antwort { padding: 0 1.1rem 1rem; font-size: .9375rem; line-height: 1.6; color: var(--text-muted); }
.frage__antwort p + p { margin-top: .6rem; }
.frage__antwort .link, .booking__unter .link, .booking__kontakt .link { color: var(--text); }
.booking__kontakt { padding: 1rem 1.1rem; border-radius: var(--radius); background: var(--surface-2); font-size: .9375rem; color: var(--text); }

/* Anbieter */
.anbieter { display: grid; gap: .2rem; font-size: .9375rem; color: var(--text-muted); }
.anbieter__name { color: var(--text); font-weight: 600; }
.anbieter__kontakt { display: flex; flex-wrap: wrap; column-gap: 1rem; }
.anbieter__kontakt a { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; }
.anbieter__kontakt svg { width: 16px; height: 16px; flex: none; }
.buchung .booking__wissen .anbieter p { margin: 0; }
.buchung .booking__wissen .anbieter .anbieter__name { color: var(--text); }
.anbieter__recht { margin-top: .35rem; }

/* ---------- 7. Formular ---------- */
.booking__kurz {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; margin-top: var(--space-4);
  padding: .35rem .9rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border);
  font-size: .9375rem; color: var(--text);
}
.booking__kurz a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: .2em; }
.booking__formular { display: grid; gap: var(--card-gap); grid-template-columns: minmax(0, 1fr); }
/* 1.22.7: Fehler bleiben vor dem Formular; freiwillige Angaben öffnen sich bei Korrekturen. */
.booking__fehler { margin-bottom: var(--space-5); }
.booking__fehler:focus { outline: 2px solid var(--accent); outline-offset: 3px; }
.booking__freiwillig { margin-top: var(--space-4); border-top: 1px solid var(--border); }
.booking__freiwillig summary { min-height: 44px; padding-block: .8rem; cursor: pointer; font-weight: 600; font-size: .9375rem; }
.booking__freiwillig-felder { display: grid; gap: var(--space-4); padding-top: .25rem; }
.booking__freiwillig-felder .booking__plz-ort { margin-top: 0; }
@media (min-width: 1100px) {
  .booking__kurz { display: none; }
  .booking__formular {
    grid-template-columns: minmax(0, 1fr) minmax(21rem, 25rem);
    grid-template-areas: "felder summe" "abschluss summe";
    column-gap: clamp(1.5rem, 3vw, 3rem); align-items: start;
  }
  .booking__felder    { grid-area: felder; }
  .booking__summe     { grid-area: summe; position: sticky; top: 6rem; }
  .booking__abschluss { grid-area: abschluss; }
}
/* Nur kleben, wenn die ganze Zusammenfassung ins Fenster passt – sonst
   schneidet der Fensterrand „Ihr Vertragspartner … Impressum" ab, und ein per
   Tab fokussierter Impressum-Link liegt unter dem Rand (Chrome scrollt bei
   sticky zu kurz). Die Schwelle ist die gemessene Höhe des Kastens im höchsten
   Normalfall plus top 6rem plus Luft (Zahlen im Bericht der Reparatur 1.19.1).
   In em, damit sie mit der Schriftgröße des Browsers wächst wie der Kasten.
   Wer den Kasten verlängert, misst neu. Neben ihr steht nichts, was sie
   verdecken könnte: die Zustimmung liegt in der linken Spalte. */
@media (min-width: 1100px) and (max-height: 57em) { .booking__summe { position: static; } }

.buchung .booking__felder .card, .buchung .booking__abschluss { border-radius: var(--radius-marke); box-shadow: var(--schatten-karte); }
.buchung .booking__felder .card__header, .buchung .booking__abschluss .card__footer { border-color: var(--border); }
.booking__schritt { font-family: var(--font-display); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; color: var(--text-muted); margin-right: .5rem; }

.stepper { display: inline-flex; align-items: center; gap: .5rem; }
.stepper__knopf { width: 2.75rem; height: 2.75rem; min-height: 2.75rem; padding: 0; }
/* Gesperrt (am Minimum/Maximum) wirkt der Knopf über Symbol und Rand, nicht über die
   Deckkraft des ganzen Elements – die dimmte den Fokusring auf 2,2:1 mit.
   pointer-events: none aus app.css bleibt. */
.buchung .stepper__knopf.is-disabled { opacity: 1; --btn-border: var(--border); color: var(--text-subtle); }
.buchung .stepper__knopf.is-disabled svg { opacity: .5; }
.buchung .stepper__feld { width: 6rem; height: 2.75rem; text-align: center; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.booking__netto { margin-top: 1rem; font-family: var(--font-display); font-size: 1.125rem; font-weight: 650; color: var(--text); }
.booking__netto.is-rechnet { opacity: .55; }
.booking__plz-ort { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); margin-top: var(--space-4); align-items: end; }
@media (max-width: 360px) { .booking__plz-ort { grid-template-columns: minmax(0, 1fr); } }

.booking__wahlen { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); border: 0; padding: 0; margin: 0; min-width: 0; }
.booking__wahlen legend { margin-bottom: var(--space-2); padding: 0; }
.booking__wahl {
  border: 1px solid var(--feld-rand); border-radius: var(--radius); background: var(--surface);
  padding: .8rem 1rem; min-height: 3.25rem;
}
.booking__wahl:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.booking__wahl .check__text strong { display: block; }
.booking__wahl .check__text small { color: var(--text-muted); font-size: .875rem; }

/* Die Zusammenfassung: der Tintenkasten der Produktseite. Inhalt bleibt
   deckend; die Farben kippen lokal wie auf der Produktseite. */
.buchung .booking__summe.card {
  background: var(--tinte); border: 1px solid var(--tinte-linie); border-radius: var(--radius-marke);
  box-shadow: none;
  --surface: var(--tinte); --surface-inset: var(--tinte);
  --text: var(--tinte-text); --text-muted: var(--tinte-muted); --text-subtle: var(--tinte-muted);
  --border: var(--tinte-linie); --accent-text: var(--tinte-oliv); --focus: var(--tinte-oliv);
  --accent-soft: rgba(156, 203, 106, .10); --border-accent: rgba(156, 203, 106, .30);
  --danger: #ff9a85; --danger-soft: rgba(255, 154, 133, .12);
  --success: var(--tinte-oliv); --success-soft: rgba(156, 203, 106, .12);
  color: var(--text);
}
.buchung .booking__summe .card__header { border-bottom-color: var(--tinte-linie); }
.buchung .booking__summe .card__header h2 { color: var(--text); font-size: 1.25rem; font-weight: 660; }
.booking__heute { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .25rem 1rem; margin-bottom: var(--space-4); }
.booking__heute-label { font-size: .9375rem; color: var(--text-muted); }
/* So groß wie der Betrag je Monat, nicht größer: die größte Zahl im Kasten soll nicht die sein, die nichts kostet. */
.booking__heute-betrag { font-family: var(--font-display); font-weight: 720; font-stretch: normal; font-size: 1.375rem; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.buchung .booking__summe .order-facts { background: transparent; border-color: var(--tinte-linie); }
.buchung .booking__summe .order-facts .pair { border-bottom: 0; }
.buchung .booking__summe .order-facts .pair + .pair { border-top-color: var(--tinte-linie); }
.buchung .booking__summe .pair { font-size: .9375rem; }
.buchung .booking__summe .pair__label { color: var(--text-muted); }
.buchung .booking__summe .pair__value { color: var(--text); text-align: right; }
.buchung .booking__summe .pair--total .pair__value { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; }
.buchung .booking__summe .pair__value--offen { font-size: .9375rem; font-weight: 600; color: var(--text); }
/* Lange Werte (Laufzeit, offener Betrag mit Bedingung) stehen links unter ihrer Beschriftung. */
.buchung .booking__summe :is(.pair--lang, .pair--offen) { flex-direction: column; align-items: flex-start; gap: .15rem; }
.buchung .booking__summe :is(.pair--lang, .pair--offen) .pair__value { text-align: left; }
.booking__frei { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--tinte-linie); }
.booking__frei .booking__frei-satz { font-family: var(--font-display); font-style: normal; font-weight: 620; font-size: 1.5rem; line-height: 1.2; color: var(--text);  }
.booking__frei p { margin-top: .4rem; font-size: .9375rem; color: var(--text-muted); }
.booking__partner { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--tinte-linie); font-size: .875rem; color: var(--text-muted); }
.booking__partner strong { display: block; color: var(--text); font-weight: 600; margin-bottom: .15rem; }
.booking__partner .link { color: var(--text); }

.buchung .booking__abschluss .card__footer { background: var(--surface-inset); border-radius: 0 0 var(--radius-marke) var(--radius-marke); }
.buchung .booking__abschluss .order-recap { font-size: .9375rem; background: var(--surface-2); margin-bottom: var(--space-3); }
.buchung .booking__abschluss .order-recap__note { font-size: .875rem; }
.buchung .booking__abschluss .order-recap__sum--offen { font-size: .9375rem; font-weight: 600; color: var(--text); }
.booking__gewissheit { display: grid; gap: .4rem; margin-top: .9rem; font-size: .875rem; color: var(--text-muted); }
.booking__gewissheit li { display: flex; gap: .45rem; align-items: flex-start; }
.booking__gewissheit svg { width: 16px; height: 16px; flex: none; margin-top: .15rem; color: var(--accent-text); }

/* ---------- 8. Dank und Geschlossen ---------- */
.buchung .booking__done { max-width: 38rem; }
.buchung .booking__done h1 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem); font-weight: 720; font-stretch: normal; letter-spacing: -0.03em; line-height: 1.05; }
.booking__haken {
  display: inline-grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: var(--success-soft); color: var(--success); margin: 1.5rem auto 0;
}
.booking__haken svg { width: 26px; height: 26px; }
.booking__haken--warten { background: var(--surface-2); color: var(--text-muted); }
.booking__weiter { counter-reset: schritt; display: grid; gap: var(--space-3); text-align: left; margin-top: var(--space-4); }
.booking__weiter li {
  counter-increment: schritt; display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--space-3); align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4);
  font-size: .9375rem; color: var(--text);
}
.booking__weiter li::before {
  content: counter(schritt); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--tinte); color: var(--tinte-text); font-family: var(--font-display); font-weight: 700;
}
html[data-theme="dark"] .booking__weiter li::before { border: 1px solid var(--tinte-linie); }
.buchung .booking__schritte--mitte { justify-content: center; }
.booking__beleg { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .45rem 1rem; margin-top: 1.5rem; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; }
.booking__beleg dt { color: var(--text-muted); }
.booking__beleg dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.booking__done-zwischen { margin-top: 1.75rem; font-size: 1.125rem; }
.buchung .booking__done .lead { margin-top: .75rem; }
.buchung .booking__done .lead strong { overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .booking__beleg { grid-template-columns: minmax(0, 1fr); row-gap: .1rem; }
  .booking__beleg dd + dt { margin-top: .5rem; }
}
.buchung .booking__done .btn { min-height: 44px; }
.buchung .booking__done .btn svg { width: 16px; height: 16px; }
.geschlossen__gruende { padding-left: 1.1rem; list-style: disc; }

/* ---------- 9. Fuß ---------- */
.buchung .booking__foot { background: var(--surface-2); border-top-color: var(--border); padding-block: 2rem 2.5rem; }
.buchung .booking__foot-inner { max-width: calc(74rem - 2 * clamp(1rem, 4vw, 2rem)); align-items: flex-start; gap: 1.25rem 2rem; font-size: .875rem; color: var(--text-muted); }
.booking__foot-inner > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.booking__foot-marke { display: grid; gap: .2rem; }
.booking__foot-marke strong { color: var(--text); font-family: var(--font-display); font-size: 1rem; }
.booking__foot-links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; hyphens: auto; }
.booking__foot-links a, .booking__foot-marke a { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; }
.buchung .booking__foot .link { color: var(--text); }
.booking__foot-satz { flex-basis: 100%; font-size: .8125rem; color: var(--text-muted); }

/* ---------- 10. Dunkel: Kanten sichtbar halten ---------- */
/* Die Wahlkarten nicht: sie tragen --feld-rand (3,7:1), gewählt den Akzent. */
html[data-theme="dark"] body.buchung :is(.plan-card, .frage, .grenzen, .booking__beleg) { border-color: var(--border-strong); }

/* ---------- 11. Bewegung: nur wer sie nicht abgeschaltet hat ---------- */
@media (prefers-reduced-motion: no-preference) {
  .btn__punkt { transition: transform var(--dur) var(--ease); }
  .btn--gold:hover .btn__punkt { transform: translateX(3px); }
  .booking__wahl { transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
  .frage__titel svg, .grenzen__kopf svg { transition: transform var(--dur) var(--ease); }
  .booking__netto { transition: opacity .15s ease; }
}

/* ---------- 12. Seit 1.23.0: Produktnutzen, Arbeitswege und klarer Einstieg ---------- */
.booking__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-top: 1.5rem; }
.booking__aktionen .btn { padding: .85rem 1.25rem; font-size: 1rem; }
.booking__aktionen .btn svg { width: 18px; height: 18px; }
.booking__probe { display: grid; gap: .3rem; margin-top: 1.25rem; max-width: 35rem; }
.booking__probe strong { font-family: var(--font-display); font-size: 1.125rem; font-weight: 650; }
.booking__probe > span { font-size: .875rem; line-height: 1.5; color: var(--text-muted); }
.booking__probe--formular { max-width: 42rem; padding-left: 1rem; border-left: 2px solid var(--border-strong); }
.booking__fenster-kopf { margin-bottom: 1rem; }
.booking__fenster-kopf h2 { margin-top: .5rem; font-size: 1.375rem; font-weight: 650; }
.booking__fenster figcaption { max-width: 65%; }
.booking__waehler > .booking__abschnitt { margin-bottom: .1rem; }
.booking__waehler > .booking__waehler-hinweis:first-of-type { margin-bottom: .75rem; }
.booking__waehler { max-width: none; }
.plan-card__basis { display: grid; gap: .55rem; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.plan-card__basis li { display: flex; align-items: flex-start; gap: .5rem; font-size: .9375rem; line-height: 1.45; }
.plan-card__basis svg { width: 16px; height: 16px; flex: none; margin-top: .15rem; color: var(--accent-text); }
.booking__steuer { display: flex; align-items: flex-start; gap: .6rem; color: var(--text); }
.booking__steuer svg { flex: none; width: 18px; height: 18px; margin-top: .1rem; }
.booking__wege, .booking__start { display: grid; gap: 1.5rem; }
.booking__abschnitt-kopf { max-width: 42rem; }
.booking__abschnitt-kopf p { margin-top: .65rem; color: var(--text-muted); font-size: 1rem; line-height: 1.6; }
.booking__wege-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.booking__weg { padding: clamp(1.25rem, 2vw, 2rem); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-marke); }
.booking__weg-symbol { display: inline-grid; place-items: center; padding: .7rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-inset); color: var(--accent-text); }
.booking__weg-symbol svg { width: 22px; height: 22px; }
.booking__weg h3 { font-size: 1.25rem; margin: 1rem 0 .65rem; line-height: 1.3; }
.booking__weg p, .booking__start-liste p { color: var(--text-muted); font-size: .9375rem; line-height: 1.6; }
.booking__start-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2rem; }
.booking__start-liste li { display: flex; gap: .85rem; align-items: flex-start; }
.booking__start-zahl { display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border: 1px solid var(--border-strong); border-radius: 50%; font-family: var(--font-display); font-size: .9375rem; font-weight: 650; }
.booking__start-liste h3 { font-size: 1.0625rem; margin: .1rem 0 .5rem; }
.booking__leistungsblick { padding: .2rem 1.25rem; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-inset); }
.booking__leistungsblick summary { display: flex; align-items: center; gap: .5rem; min-height: 44px; padding-block: .4rem; cursor: pointer; font-weight: 600; font-size: .9375rem; list-style: none; }
.booking__leistungsblick summary::-webkit-details-marker { display: none; }
.booking__leistungsblick summary::after { content: '+'; margin-left: auto; font-size: 1.25rem; }
.booking__leistungsblick[open] summary::after { content: '−'; }
.booking__leistungsblick summary svg { width: 18px; height: 18px; flex: none; color: var(--accent-text); }
.booking__leistungsblick ul { list-style: disc; padding: .5rem 0 1rem 1.25rem; columns: 2; column-gap: 2rem; font-size: .9375rem; line-height: 1.5; color: var(--text-muted); }
.booking__leistungsblick li { break-inside: avoid; margin-bottom: .35rem; }
.booking__pflicht-hinweis { font-size: .875rem; color: var(--text-muted); margin-top: -.5rem; }
.booking__done-start { text-align: left; margin-top: 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); line-height: 1.6; }
@media (max-width: 699px) {
  .booking__wege-karten, .booking__start-liste { grid-template-columns: minmax(0, 1fr); }
  .booking__weg { padding: 1.25rem; }
  .booking__weg h3 { margin-top: .75rem; }
  .booking__fenster figcaption { max-width: 65%; }
  .booking__leistungsblick ul { columns: 1; }
  .buchung .booking__head h1 { font-size: clamp(2.25rem, 9vw, 3.25rem); }
  .booking__aktionen { gap: .4rem 1rem; }
  .booking__aktionen .btn { width: 100%; justify-content: space-between; }
  .booking__probe { margin-top: 1rem; }
}

/* ---------- 1.34.0: Produkt zeigen, Ablauf erklären, Entscheidung begleiten ---------- */
.buchung .booking__body:has(.booking__produkt) { max-width: 84rem; padding-top: clamp(2rem, 4vw, 4rem); }
.booking__produkt { --product-tint: var(--surface-2); --product-ink: var(--text); }
.booking__skip { position: fixed; top: .5rem; left: .5rem; z-index: 200; padding: .8rem 1.1rem; min-height: 44px; background: var(--surface); color: var(--text); border: 2px solid var(--focus); transform: translateY(-160%); }
.booking__skip:focus { transform: none; }
.booking__product-nav { display: flex; flex-wrap: wrap; min-width: 0; align-items: center; gap: 0 1.5rem; margin-left: auto; }
.booking__product-nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 550; font-size: .9375rem; color: var(--text); text-decoration: none; }
.booking__product-nav a:hover { text-decoration: underline; text-underline-offset: .3em; }
.booking__produkt .product-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: 0 clamp(2rem, 4vw, 4rem); align-items: start; max-width: none; margin: 0; padding: 0; }
.product-hero__copy, .product-hero__heading, .product-hero__intro, .product-hero__decision { min-width: 0; }
@media (min-width: 1100px) {
  .product-hero__copy { grid-column: 1; grid-row: 1; }
  .product-hero__visual { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .product-hero__decision { grid-column: 1; grid-row: 2; }
}
.booking__produkt .product-hero h1 { font-size: clamp(2.65rem, 4.3vw, 4.4rem); line-height: 1.04; letter-spacing: -.045em; font-weight: 650; margin: .9rem 0 1.4rem; text-wrap: balance; }
.product-hero h1 span { color: var(--accent-text); }
.booking__produkt .product-hero .lead { font-size: 1.0625rem; line-height: 1.65; color: var(--text-muted); max-width: 35rem; margin: 0; }
.product-hero .booking__aktionen { margin-top: 1.35rem; gap: .45rem 1.1rem; }
.product-hero .btn--gold { padding: .8rem 1.1rem; font-size: 1rem; }
.product-hero .booking__aktionen > .link { display: inline-flex; align-items: center; gap: .25rem; min-height: 44px; }
.product-hero__price { font-size: 1rem; font-weight: 650; margin: 1.2rem 0 .25rem; color: var(--text); }
.product-hero__offer-note { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--text-muted); }
.product-hero .booking__probe { margin-top: 1rem; gap: .1rem; max-width: 34rem; }
.product-hero .booking__probe strong { font-size: .9375rem; color: var(--text); }
.product-hero .booking__probe > span { font-size: .8125rem; }
.product-hero__contract { margin: .25rem 0 0; font-size: .8125rem; color: var(--text-muted); line-height: 1.5; }
.product-demo__hero { margin: .15rem 0 0; font-size: .875rem; }
.product-demo__hero a, .product-demo__email a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; text-decoration: underline; text-underline-offset: .2em; }
.product-demo__hero svg { flex: none; width: 1rem; }
.product-hero__visual { margin: 0; padding: clamp(.6rem, 1.2vw, 1rem); min-width: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; }
.product-hero__visual > a { display: block; border-radius: 7px; }
.product-hero__visual img { display: block; width: 100%; height: auto; border-radius: 7px; box-shadow: 0 0 0 1px var(--border-strong), var(--schatten-bild); }
.product-hero__visual figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; margin-top: .75rem; color: var(--text-muted); font-size: .8125rem; line-height: 1.5; }
.product-hero__zoom-hint { display: inline-flex; align-items: center; gap: .3rem; }
.product-hero__zoom-hint svg { width: 16px; height: 16px; }
.product-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); padding-block: 2rem; margin-top: 3rem; border-block: 1px solid var(--border-strong); }
.product-benefits__item { min-width: 0; }
.product-benefits__number { display: block; font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--text-muted); margin-bottom: .75rem; }
.product-benefits h2 { font-size: 1.125rem; line-height: 1.3; font-weight: 650; margin: 0 0 .5rem; }
.product-benefits p { color: var(--text-muted); font-size: .9375rem; line-height: 1.65; margin: 0; }
.product-tour, .product-portal, .product-workflow, .product-ai, .product-extra, .product-demo { margin-top: clamp(3.5rem, 6vw, 5.5rem); }
.booking__produkt :is(.product-tour,.product-portal,.product-workflow,.product-ai,.product-extra,.product-demo) h2 { font-size: clamp(1.75rem, 2.8vw, 2.6rem); line-height: 1.18; letter-spacing: -.025em; text-wrap: balance; font-weight: 650; }
.booking__produkt :is(.product-tour,.product-portal,.product-workflow,.product-ai,.product-extra,.product-demo) h2 + p { max-width: 43rem; color: var(--text-muted); font-size: 1rem; line-height: 1.65; margin-top: .85rem; }
.product-tour__intro .booking__ueber + h2, .product-portal__copy .booking__ueber + h2, .product-ai__intro .booking__ueber + h2, .product-extra__copy .booking__ueber + h2, .product-demo__copy .booking__ueber + h2 { margin-top: .6rem; }
.product-tour__nav { display: flex; flex-wrap: wrap; gap: 0 1.75rem; margin: 1.5rem 0 0; border-bottom: 1px solid var(--border-strong); }
.product-tour__nav a { display: inline-flex; min-width: 0; overflow-wrap: anywhere; hyphens: auto; align-items: center; min-height: 48px; padding: .7rem .1rem; font-size: 1rem; font-weight: 550; text-decoration: none; color: var(--text-muted); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.product-tour__nav a:hover { color: var(--text); }
.product-tour__nav a[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent-text); }
.product-tour__panel { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(15rem, .9fr); align-items: center; gap: clamp(1.5rem, 3vw, 3rem); margin: 2rem 0 0; }
.product-tour__panel[hidden] { display: none !important; }
.product-tour__panel figure { margin: 0; min-width: 0; }
:is(.product-tour__visual,.product-ai__visual,.product-extra__visual) a[data-product-zoom] { display: block; border-radius: 8px; }
:is(.product-tour__visual,.product-ai__visual,.product-extra__visual) img { width: 100%; height: auto; display: block; border-radius: 8px; box-shadow: 0 0 0 1px var(--border-strong); }
:is(.product-tour__visual,.product-ai__visual,.product-extra__visual) figcaption { font-size: .8125rem; color: var(--text-muted); margin: .75rem 0 0; line-height: 1.5; }
.product-tour__panel h3 { font-size: 1.5rem; line-height: 1.25; font-weight: 650; margin: 0 0 .85rem; letter-spacing: -.025em; }
.product-tour__panel p, .product-tour__panel ul { font-size: .9375rem; line-height: 1.65; }
.product-tour__panel p { color: var(--text-muted); }
.product-tour__panel ul, .product-extra ul { display: grid; gap: .65rem; margin-top: 1.2rem; padding-left: 1.1rem; list-style: disc; color: var(--text); }
.product-tour__panel li::marker, .product-extra li::marker { color: var(--accent-text); }
.product-portal { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: clamp(2rem, 5vw, 6rem); padding: clamp(1.5rem, 4vw, 3rem); border-radius: 12px; background: var(--surface-2); }
.product-portal__copy { max-width: 38rem; }
.product-portal ul { display: grid; margin-top: 1.5rem; list-style: none; padding: 0; }
.product-portal li { padding-block: .8rem; border-top: 1px solid var(--border-strong); font-size: .9375rem; line-height: 1.6; }
.product-portal__note { font-size: .875rem; line-height: 1.65; margin-top: 1rem; color: var(--text-muted); }
.product-portal figure { margin: 0; justify-self: center; width: min(100%, 18rem); }
.product-portal figure a { display: block; border-radius: 12px; }
.product-portal img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--border-strong); box-shadow: var(--schatten-bild); }
.product-portal figcaption { margin-top: .85rem; font-size: .8125rem; color: var(--text-muted); line-height: 1.5; }
.product-workflow ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2rem; list-style: none; padding: 0; }
.product-workflow li { padding-top: 1rem; border-top: 1px solid var(--border-strong); }
.product-workflow h3 { font-size: 1.125rem; font-weight: 650; margin: .7rem 0 .5rem; }
.product-workflow p { font-size: .9375rem; line-height: 1.65; color: var(--text-muted); }
.product-workflow__number { font-size: .875rem; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.product-ai { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.75rem 4rem; padding-block: 2.5rem; border-block: 1px solid var(--border-strong); }
.product-ai__cards { display: grid; gap: 1.5rem; }
.product-ai__cards article + article { border-top: 1px solid var(--border); padding-top: 1.5rem; }
.product-ai h3 { font-size: 1.2rem; margin-bottom: .7rem; }
.product-ai p { color: var(--text-muted); font-size: .9375rem; line-height: 1.65; }
.product-ai__visual { grid-column: 1 / -1; margin: 0; width: 100%; }
.product-ai__note { grid-column: 1 / -1; max-width: 65rem; }
.product-extra { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: 1.5rem 3rem; }
.product-extra p, .product-extra li { line-height: 1.65; font-size: .9375rem; }
.product-extra__visual { margin: 0; min-width: 0; }
.product-demo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); padding: clamp(1.5rem, 4vw, 3rem); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; }
.product-demo p { line-height: 1.65; }
.product-demo__steps { padding-left: 1.2rem; margin: 1.25rem 0 0; font-size: .9375rem; }
.product-demo__steps li + li { margin-top: .6rem; }
.product-demo__contact { align-self: center; min-width: 0; padding-left: clamp(1rem, 3vw, 2.5rem); border-left: 1px solid var(--border); }
.product-demo__contact .btn { white-space: normal; text-align: center; min-height: 48px; }
.product-demo__contact > p { font-size: .875rem; }
.product-demo__contact .product-demo__duration { font-weight: 650; font-size: 1rem; margin-bottom: .8rem; }
.product-demo__email { overflow-wrap: anywhere; margin-top: .8rem; }
.booking__produkt .booking__waehler > h2 { font-size: clamp(1.8rem, 2.8vw, 2.65rem); letter-spacing: -.025em; }
.booking__produkt .booking__waehler-zeile { margin-top: 1rem; }
.booking__produkt .booking__fakten { gap: .5rem 1.5rem; margin-top: 1.5rem; }
.booking__produkt .booking__fakten li { background: transparent; border: 0; border-radius: 0; padding: .25rem 0; }
.booking-core { margin-top: 1.5rem; border-top: 1px solid var(--border-strong); padding-block: 1rem .5rem; }
.booking-core h3 { font-size: .9375rem; font-weight: 650; }
.booking-core ul { display: flex; flex-wrap: wrap; gap: .4rem 2rem; margin-top: .65rem; font-size: .9375rem; color: var(--text-muted); }
.booking__produkt .plan-card { border-radius: 12px; border-color: var(--border-strong); box-shadow: none; }
.booking__produkt .plan-card:hover { box-shadow: none; }
.booking__produkt .plan-card__foot .btn { width: 100%; justify-content: space-between; border-radius: 10px; padding-inline: 1rem; }
.booking__produkt .booking__schluss { padding-top: 2rem; border-top: 1px solid var(--border-strong); }
.booking__produkt .booking__schluss h2 { font-size: clamp(1.75rem, 3vw, 2.6rem); letter-spacing: -.025em; }
.booking__produkt .booking__schluss .btn { padding-inline: 1rem; }
.booking__produkt .booking__fragen { grid-template-columns: minmax(0, 1fr); max-width: 58rem; }
.booking__produkt .fragen { gap: 0; border-top: 1px solid var(--border-strong); }
.booking__produkt .frage { border: 0; border-bottom: 1px solid var(--border-strong); border-radius: 0; background: none; }
.booking__produkt .frage__titel { padding: 1rem .1rem; border-radius: 0; }
.booking__produkt .frage__antwort { padding: 0 2rem 1rem .1rem; }
.booking__produkt .booking__kontakt { padding: .5rem 0; border-radius: 0; background: none; }
.product-lightbox { margin: auto; width: min(96vw, 1600px); max-width: 96vw; max-height: 94dvh; padding: .6rem 1rem 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); box-shadow: 0 20px 80px rgba(0, 0, 0, .4); }
.product-lightbox:not([open]) { display: none; }
.product-lightbox::backdrop { background: rgba(10, 20, 15, .8); }
.product-lightbox__toolbar { display: flex; align-items: center; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.product-lightbox__close { min-width: 44px; min-height: 44px; padding: .5rem .85rem; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); font: inherit; font-size: .875rem; font-weight: 600; color: var(--text); cursor: pointer; }
.product-lightbox__original { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; color: var(--text); text-decoration: underline; text-underline-offset: .2em; }
.product-lightbox__image { display: block; max-width: 100%; max-height: calc(94dvh - 5rem); width: auto; height: auto; margin: auto; object-fit: contain; }
[data-product-zoom] { cursor: zoom-in; }

/* Aktion und Folgepreis bleiben zusammen, ohne auffälligen Werbekasten. */
.booking-offer { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin: 3.5rem 0 0; padding: 1.5rem 0; border-block: 1px solid var(--border-strong); color: var(--text); }
.booking-offer__copy { min-width: 0; max-width: 54rem; }
.booking-offer__badge { margin: 0 0 .5rem; font-size: .875rem; font-weight: 650; }
.booking-offer h2 { margin: 0 0 .5rem; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.2; }
.booking-offer p { margin-block: .4rem; line-height: 1.6; }
.booking-offer__terms { font-size: .875rem; color: var(--text-muted); }
.booking-offer > .btn { flex: none; }
.booking-offer--form { margin: 0; padding: 1.25rem; background: var(--surface-inset); border: 1px solid var(--border); border-radius: 8px; }
.buchung .plan-card__price-stack { margin-top: 1.1rem; }
.buchung .plan-card__price-stack .plan-card__price { margin-top: .3rem; }
.plan-card__regular { margin: 0; color: var(--text-muted); font-size: .9375rem; text-decoration: line-through; text-decoration-thickness: 1px; }
.plan-card__offer-period { margin: .65rem 0 .35rem; font-size: .875rem; font-weight: 650; line-height: 1.4; }
.plan-card__renewal { color: var(--text-muted); font-size: .875rem; line-height: 1.4; }
.buchung .plan-card__ab .plan-card__jahr { margin-top: .5rem; padding-top: .6rem; border-top: 1px solid var(--border); }
.booking-offer-summary { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--tinte-linie); font-size: .875rem; line-height: 1.5; }
.booking-offer-summary p { margin: .5rem 0; }
.order-recap__offer { display: grid; gap: .4rem; margin: 0 0 1rem; font-size: .9375rem; line-height: 1.5; color: var(--text); }
.booking__done .offer-confirmation { text-align: left; margin: 1.5rem 0; }
.booking__produkt :is(h1,h2,h3) { overflow-wrap: break-word; }
.product-tour__panel--text-only, .product-portal--text-only { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 1099px) {
  .booking__product-nav { gap: 1rem; }
  .booking__product-nav a { font-size: .875rem; }
  .booking__bar:has(.booking__product-nav) .booking__frage { display: none; }
  .booking__produkt .product-hero { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .booking__produkt .product-hero h1 { font-size: clamp(2.65rem, 5.5vw, 4rem); }
  .product-hero__intro { max-width: 42rem; }
  .product-tour__panel { grid-template-columns: minmax(0, 1fr); }
  .product-tour__panel ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .product-workflow ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 799px) {
  .booking__product-nav { display: none; }
  .product-benefits { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: 2rem; }
  .product-benefits__item + .product-benefits__item { border-top: 1px solid var(--border); padding-top: 1.25rem; }
  .product-benefits__number { margin-bottom: .35rem; }
  .product-portal, .product-ai, .product-extra, .product-demo { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .product-portal figure { width: min(85%, 18rem); }
  .product-demo__contact { padding-left: 0; padding-top: 1.25rem; border-left: 0; border-top: 1px solid var(--border); }
  .booking-offer { align-items: flex-start; flex-direction: column; gap: 1rem; }
}
@media (max-width: 599px) {
  .buchung .booking__body:has(.booking__produkt) { padding-top: 1.5rem; }
  .booking__produkt .product-hero h1 { font-size: clamp(2.2rem, 9vw, 3.25rem); margin-bottom: 1rem; }
  .product-hero .booking__aktionen .btn { width: auto; }
  .product-hero__decision .booking__aktionen { margin-top: 0; }
  .product-hero__visual { padding: .5rem; border-radius: 10px; }
  .product-hero__visual img { border-radius: 6px; }
  .product-tour__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem 1rem; }
  .product-tour__nav a { font-size: .9375rem; }
  .product-tour__panel ul { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .product-workflow ol { grid-template-columns: minmax(0, 1fr); }
  .product-lightbox { padding-inline: .5rem; }
  .product-lightbox__toolbar { gap: .25rem; }
  .booking-offer > .btn { white-space: normal; }
  .booking-core ul { display: grid; gap: .5rem; }
}
@media (max-height: 520px) { .buchung .booking__bar { position: static; } }
@media (max-width: 380px) { .buchung .booking__bar { padding-inline: .5rem; } }
.booking__produkt .product-hero--text-only, .product-extra--text-only { grid-template-columns: minmax(0, 1fr); }