/* ==========================================================================
   DMW-Performance — Inner Pages
   Shared styles: page-hero, stats-bar, feature-cards, pricing-cards,
   ablauf steps, specs list, cta-banner, hinweise, prose, eyebrow labels.
   ========================================================================== */

/* ==========================================================================
   Section Eyebrow Label
   ========================================================================== */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold-ink);
  margin-bottom: var(--space-3);
}

.section-intro {
  max-width: 680px;
  margin-bottom: var(--space-12);
}

.section-intro .section-title {
  margin-bottom: var(--space-3);
}

/* ==========================================================================
   Page Hero — full-width dark banner
   ========================================================================== */
.page-hero {
  position: relative;
  background: linear-gradient(135deg, #0d0d1a 0%, var(--color-accent) 60%, #0f1f3d 100%);
  padding-block: var(--space-24) var(--space-20);
  overflow: hidden;
  isolation: isolate;
}

/* Subtle grid/texture overlay */
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(232, 180, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 180, 0, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  z-index: 0;
}

/* Gold accent line at top */
.page-hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), transparent);
  z-index: 1;
}

.page-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.page-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.page-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.05;
  margin: 0 0 var(--space-6);
  letter-spacing: -0.01em;
}

.text-gold { color: var(--color-primary); }

.page-hero__lead {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.75);
  max-width: 600px;
  line-height: 1.6;
  margin: 0 0 var(--space-8);
}

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

/* Hero outline button — double-class selector beats .btn specificity */
.btn.btn-hero-outline {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-base);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  transition: all 200ms ease;
}

.btn.btn-hero-outline:hover,
.btn.btn-hero-outline:focus-visible {
  background: rgba(255, 255, 255, 0.22);
  border-color: #ffffff;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}

/* Ghost-white — double-class selector beats .btn specificity */
.btn.btn-ghost-white {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-base);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  transition: all 200ms ease;
}

.btn.btn-ghost-white:hover,
.btn.btn-ghost-white:focus-visible {
  background: rgba(255, 255, 255, 0.2);
  border-color: #ffffff;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}

.btn--large {
  padding: var(--space-4) var(--space-8) !important;
  font-size: var(--text-lg) !important;
}

@media (max-width: 640px) {
  .page-hero {
    padding-block: var(--space-16) var(--space-12);
  }
  .page-hero__actions {
    flex-direction: column;
    align-items: flex-start;
  }
  .btn--large {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Stats Bar
   ========================================================================== */
.stats-bar {
  background: var(--color-accent);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.stats-bar__inner {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
}

/* Auf .stats-bar eingegrenzt — siehe die Erklaerung in sections.css bei den
   Kennzahlen-Karten der Startseite. Gleicher Klassenname, anderer Baustein. */
.stats-bar .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-5) var(--space-8);
  gap: var(--space-1);
  flex: 1 1 140px;
}

.stats-bar .stat-item__value {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}

.stats-bar .stat-item__label {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stats-bar .stat-divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
  align-self: stretch;
  margin-block: var(--space-4);
}

@media (max-width: 640px) {
  .stats-bar .stat-divider { display: none; }
  .stats-bar__inner { justify-content: center; }
  /* 1 1 45% liess bei drei Kennzahlen zwei nebeneinander und die dritte allein
     ueber die volle Breite stehen. Volle Breite fuer alle ist ruhiger und
     funktioniert mit drei wie mit vier Eintraegen. */
  .stats-bar .stat-item { flex: 1 1 100%; padding: var(--space-4); }
}

/* ==========================================================================
   Feature Cards
   ========================================================================== */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (max-width: 900px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .feature-grid { grid-template-columns: 1fr; }
}

.feature-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.feature-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 20px rgba(232, 180, 0, 0.12);
  transform: translateY(-2px);
}

.feature-card__icon {
  width: 3rem;
  height: 3rem;
  background: linear-gradient(135deg, var(--color-primary) 0%, #f5c200 100%);
  color: var(--color-accent);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.feature-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}

.feature-card__text {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.65;
  margin: 0;
}

/* ==========================================================================
   Ablauf Steps + Specs (2-column layout)
   ========================================================================== */
/* minmax(0, 1fr) statt 1fr, und das ist kein Schoenheitsfehler:
   Eine 1fr-Spalte hat stillschweigend min-width:auto und kann deshalb nicht
   unter die Mindestbreite ihres Inhalts schrumpfen. In der linken Spalte steht
   ein dreispaltiges Raster mit rund 638px Mindestbreite. Zwischen 901 und
   1085 Pixeln Fensterbreite blieb die Spalte deshalb auf 638px stehen, und die
   340px breite Randspalte wurde aus dem Container herausgedrueckt — die ganze
   Seite liess sich seitlich scrollen, unter anderem auf dem iPad im Querformat.
   minmax(0, ...) hebt diese Sperre auf. */
.ablauf-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-12);
  align-items: start;
}

/* Umbruch bei 1100 statt 900: Darunter bleiben fuer die linke Spalte weniger
   als 600px, was fuer drei Karten nebeneinander zu wenig ist. Untereinander
   gestellt bekommt das Raster die volle Breite zurueck. */
@media (max-width: 1100px) {
  .ablauf-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Die Randspalte klebt sonst weiter oben fest, obwohl sie jetzt unten steht. */
  .ablauf-specs {
    position: static;
  }
}

.ablauf-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ablauf-step {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-border);
  align-items: flex-start;
}

.ablauf-step:last-child {
  border-bottom: none;
}

.ablauf-step__num {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-primary);
  opacity: 0.35;
  line-height: 1;
  min-width: 2.5rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.ablauf-step__body h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}

.ablauf-step__body p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.65;
  margin: 0;
}

/* Specs sidebar */
.ablauf-specs {
  background: var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
}

.ablauf-specs__heading {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 var(--space-5);
}

.specs-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
}

.spec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.spec-row:last-child {
  border-bottom: none;
}

.spec-row dt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* min-width: 0 an beiden Seiten: Flex-Kinder duerfen sonst nicht unter ihre
     Mindestinhaltsbreite. Bei langen deutschen Woertern wie
     "Entwicklerniveau" schob die Zeile die Angabe sonst aus der Seite. */
  min-width: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--text-sm);
  font-weight: 500;
}

.spec-row dt [class*="fa-"] {
  color: var(--color-primary);
  width: 1rem;
  text-align: center;
  flex-shrink: 0;
}

.spec-row dd {
  color: #ffffff;
  font-weight: 600;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  text-align: right;
  margin: 0;
  min-width: 0;
  /* Notfalls mitten im Wort trennen, statt die Seite zu verbreitern. */
  overflow-wrap: break-word;
}

/* Auf sehr schmalen Geraeten kippt die Zeile lieber um, als zu quetschen. */
@media (max-width: 360px) {
  .spec-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .spec-row dd {
    text-align: left;
  }
}

/* ==========================================================================
   Pricing Cards (Prüfstand)
   ========================================================================== */
.pricing-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-5);
}

.pricing-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.pricing-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.pricing-card--featured {
  border-color: var(--color-primary);
  border-width: 2px;
  background: linear-gradient(135deg, #fff 0%, #fffdf0 100%);
}

[data-theme="dark"] .pricing-card--featured {
  background: linear-gradient(135deg, var(--color-surface) 0%, #1e1c10 100%);
}

.pricing-card__badge {
  position: absolute;
  top: -1px;
  right: var(--space-4);
  background: var(--color-primary);
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.pricing-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  background: var(--color-bg-subtle);
  color: var(--color-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.pricing-card--featured .pricing-card__icon {
  background: rgba(232, 180, 0, 0.12);
}

.pricing-card__name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}

.pricing-card__desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
  flex: 1;
}

.pricing-card__price {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  /* --color-accent ist das Marken-Dunkelblau und wechselt bewusst NICHT mit
     dem Farbschema. Als Schrift auf einer Flaeche, die wechselt, ergibt das
     im Dunkelmodus Dunkelblau auf Dunkelgrau — der Preis war praktisch
     unsichtbar. Als Schriftfarbe auf hellem Grund gehoert hierher der Wert,
     der mitwechselt. Auf goldener Flaeche bleibt --color-accent richtig. */
  color: var(--color-text);
  line-height: 1;
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.pricing-card--featured .pricing-card__price {
  color: var(--color-primary);
}

.pricing-card__price span {
  font-size: var(--text-xl);
  color: var(--color-text-muted);
  font-weight: 400;
  margin-left: 2px;
}

/* ==========================================================================
   Pricing note (below pricing cards)
   ========================================================================== */
.pricing-footer-notes {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pricing-note {
  padding: var(--space-4) var(--space-5);
  background: #fff8e1;
  border-radius: var(--radius-md);
  border-left: 3px solid #f5c842;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  line-height: 1.65;
}

.pricing-note--info {
  background: var(--color-bg-subtle);
  border-left-color: var(--color-primary);
}

[data-theme="dark"] .pricing-note {
  background: rgba(245, 200, 66, 0.08);
  border-left-color: #c49800;
}

[data-theme="dark"] .pricing-note--info {
  background: var(--color-bg-subtle);
  border-left-color: var(--color-primary);
}

.pricing-note > [class*="fa-"] {
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.pricing-note .fa-triangle-exclamation {
  color: #d97706;
}

.pricing-note--info .fa-circle-info {
  color: var(--color-primary);
}

/* Nur die Ueberschrift des Kastens wird zum eigenen Block. Vorher galt die
   Regel fuer jedes <strong> im Hinweis, auch fuer "EWG" und "DIN" mitten im
   Satz — der Absatz zerfiel dadurch in fuenf Zeilenfragmente. */
.pricing-note strong:first-child {
  color: var(--color-text);
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--text-base);
}

.pricing-note strong {
  color: var(--color-text);
}

.pricing-note div {
  flex: 1;
}

/* ==========================================================================
   Hinweise Box
   ========================================================================== */
/* ==========================================================================
   Hinweise Section — full redesign with card grid
   ========================================================================== */

/* Dark header bar */
.hinweise-section {
  background-color: var(--color-bg-subtle);
}

.hinweise-header {
  background: var(--color-accent);
  padding-block: var(--space-8);
  border-top: 3px solid var(--color-primary);
}

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

.hinweise-header__icon {
  width: 3.5rem;
  height: 3.5rem;
  background: rgba(232, 180, 0, 0.15);
  border: 2px solid rgba(232, 180, 0, 0.35);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--color-primary);
  flex-shrink: 0;
}

.hinweise-header__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 var(--space-1);
  line-height: 1.1;
}

.hinweise-header__sub {
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--text-sm);
  margin: 0;
}

/* Grid wrapper */
.hinweise-grid-wrap {
  padding-block: var(--space-10);
}

/* Cards grid */
.hinweise-cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

@media (max-width: 720px) {
  .hinweise-cards { grid-template-columns: 1fr; }
}

/* Base card */
.hinweis-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.hinweis-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Symbolfeld, nicht Farbspalte.
   Vorher war das hier eine durchgehende farbige Spalte ueber die volle
   Kartenhoehe: Bei einer 147px hohen Karte sass das 20px kleine Zeichen oben,
   darunter blieben 101px eingefaerbte Leerflaeche — und der Text begann mit
   0px Abstand direkt an der Kante. Bei langen Karten wuchs der Balken mit.
   Jetzt dasselbe Muster wie .hinweise-header__icon im Kopf desselben
   Abschnitts: ein kompaktes, abgerundetes Feld mit zentriertem Zeichen.
   Die Signalwirkung traegt weiterhin der 4px-Rand links je Variante. */
.hinweis-card__icon-wrap {
  flex: 0 0 auto;
  align-self: flex-start;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-size: 1.1rem;
}

/* Body */
.hinweis-card__body {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}

.hinweis-card__tag {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Statt opacity: 0.7 eine eigene Farbe. Deckkraft rechnet die Schrift zur
     Flaeche dahinter hin und frisst genau den Kontrast auf, den 12px-Text
     braucht. */
  color: var(--color-gold-ink);
}

.hinweis-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}

.hinweis-card__body p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}

.hinweis-card__body strong {
  color: var(--color-text);
  font-weight: 600;
}

/* ── STOP variant (red) ───────────────────────────────── */
.hinweis-card--stop {
  border-left: 4px solid #dc2626;
}

.hinweis-card--stop .hinweis-card__icon-wrap {
  background: #fee2e2;
  color: #dc2626;
}

.hinweis-card--stop .hinweis-card__tag {
  color: #dc2626;
}

[data-theme="dark"] .hinweis-card--stop .hinweis-card__icon-wrap {
  background: rgba(220, 38, 38, 0.15);
  color: #f87171;
}

/* Die Varianten "warn" und "info" hatten ihre Dunkelmodus-Farbe, "stop" nicht.
   Das kraeftige Rot kam mit 3,5:1 auf dem dunklen Grund nicht durch — und
   ausgerechnet "Nicht erlaubt" ist der Hinweis, den man lesen soll. */
[data-theme="dark"] .hinweis-card--stop .hinweis-card__tag {
  color: #f87171;
}

/* ── WARN variant (amber) ─────────────────────────────── */
.hinweis-card--warn {
  border-left: 4px solid #d97706;
}

.hinweis-card--warn .hinweis-card__icon-wrap {
  background: #fef3c7;
  color: #d97706;
}

.hinweis-card--warn .hinweis-card__tag {
  color: #b45309;
}

[data-theme="dark"] .hinweis-card--warn .hinweis-card__icon-wrap {
  background: rgba(217, 119, 6, 0.15);
  color: #fbbf24;
}

[data-theme="dark"] .hinweis-card--warn .hinweis-card__tag {
  color: #fbbf24;
}

/* ── INFO variant (gold) ──────────────────────────────── */
.hinweis-card--info {
  border-left: 4px solid var(--color-primary);
}

.hinweis-card--info .hinweis-card__icon-wrap {
  background: rgba(232, 180, 0, 0.1);
  color: #b38600;
}

.hinweis-card--info .hinweis-card__tag {
  color: var(--color-gold-ink);
}

[data-theme="dark"] .hinweis-card--info .hinweis-card__icon-wrap {
  background: rgba(232, 180, 0, 0.12);
  color: var(--color-primary);
}

[data-theme="dark"] .hinweis-card--info .hinweis-card__tag {
  color: var(--color-primary);
}

/* ==========================================================================
   CTA Banner
   ========================================================================== */
.cta-banner {
  background: linear-gradient(135deg, var(--color-accent) 0%, #0f1f3d 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}

/* Gold decorative corner */
.cta-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 3px;
  background: var(--color-primary);
}

.cta-banner__content {
  flex: 1 1 300px;
}

.cta-banner__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, var(--text-3xl));
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 var(--space-3);
  line-height: 1.15;
}

.cta-banner__text {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--text-base);
  margin: 0;
  line-height: 1.6;
}

.cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  flex-shrink: 0;
}

.cta-banner .btn-outline {
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.85);
  background: transparent;
}

.cta-banner .btn-outline:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 640px) {
  .cta-banner {
    padding: var(--space-8);
    flex-direction: column;
    align-items: flex-start;
  }
  .cta-banner__actions {
    width: 100%;
    flex-direction: column;
  }
  .cta-banner .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Prose (readable body text)
   ========================================================================== */
.prose {
  max-width: 72ch;
  color: var(--color-text);
  line-height: 1.7;
}

.prose p {
  margin: 0 0 var(--space-5);
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose h2, .prose h3, .prose h4 {
  font-family: var(--font-heading);
  color: var(--color-text);
  margin: var(--space-8) 0 var(--space-3);
}

.prose ul, .prose ol {
  padding-left: var(--space-6);
  margin: 0 0 var(--space-5);
}

.prose li {
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
}

.prose strong {
  font-weight: 600;
  color: var(--color-text);
}

/* ==========================================================================
   Legal Note
   ========================================================================== */
.legal-note {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* ==========================================================================
   Kunde werden — B2C Steps Timeline
   ========================================================================== */
.kunden-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  counter-reset: none;
}

.kunden-steps::before {
  content: '';
  position: absolute;
  top: 2.25rem;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary) 0%, rgba(232,180,0,0.2) 100%);
}

.kunden-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 0 var(--space-2);
}

.kunden-step__num {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
}

.kunden-step__icon {
  width: 4.5rem;
  height: 4.5rem;
  background: var(--color-accent);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: var(--space-4);
  border: 3px solid var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-bg), 0 4px 12px rgba(0,0,0,0.1);
  flex-shrink: 0;
}

.kunden-step__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}

.kunden-step__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 768px) {
  .kunden-steps {
    grid-template-columns: 1fr 1fr;
  }
  .kunden-steps::before { display: none; }
}

@media (max-width: 480px) {
  .kunden-steps { grid-template-columns: 1fr; }
  .kunden-step { flex-direction: row; text-align: left; gap: var(--space-4); }
  .kunden-step__icon { flex-shrink: 0; width: 3rem; height: 3rem; font-size: 1rem; }
}

/* ==========================================================================
   Section Divider
   ========================================================================== */
.section-divider {
  padding-block: var(--space-6);
  background: var(--color-accent);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.section-divider__text {
  color: rgba(255,255,255,0.65);
  font-size: var(--text-lg);
  font-family: var(--font-heading);
  font-weight: 600;
  margin: 0;
  text-align: center;
}

/* ==========================================================================
   Chiptuner B2B Layout
   ========================================================================== */
/* align-items: start hat die rechte Spalte auf die Hoehe ihres Inhalts
   zusammenschrumpfen lassen (1151px statt 2537px). Die Kontaktkarte darin ist
   position: sticky, und sticky wirkt nur innerhalb der eigenen Spalte — sie
   blieb also nach dem ersten Drittel stehen und rechts klaffte auf ueber
   1300px Scrollweg eine leere Flaeche. Mit stretch reicht die Spalte bis
   unten und die Karte begleitet den ganzen Text.
   minmax(0, 1fr) aus demselben Grund wie beim Ablauf-Raster: Sonst kann die
   linke Spalte nicht unter die Mindestbreite ihres Inhalts schrumpfen. */
.chiptuner-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: var(--space-12);
  align-items: stretch;
}

@media (max-width: 960px) {
  .chiptuner-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Einleitungsabsatz und Formularteile — vorher als style-Attribut in der
   Vorlage, mit Zeilenhoehen wie 1.65 und 1.5 fest im Markup. */
.chiptuner-intro {
  margin: 0 0 var(--space-8);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

.b2b-form__senden {
  width: 100%;
  justify-content: center;
  margin-bottom: var(--space-3);
}

.b2b-form__datenschutz {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

/* Die Zahlungsarten stehen seit dem 05.09.2026 unter der Anfragekarte in der
   rechten Spalte, nicht mehr in der linken unter den KESS3-Karten.
   Die Spalte ist 420px breit. Nebeneinander blieben fuer den Text nur rund
   230px, also etwa 25 Zeichen je Zeile — deshalb hier dasselbe Stapeln wie im
   600px-Umbruchpunkt weiter unten. Der greift nach der Fensterbreite und kann
   eine schmale Spalte in einem breiten Fenster nicht erkennen. */
.chiptuner-right .financing-box {
  margin-top: var(--space-6);
  margin-bottom: 0;
}

.chiptuner-right .financing-box--partner {
  flex-direction: column;
  align-items: stretch;
}

.chiptuner-right .financing-box__media {
  width: 200px;
  max-width: 100%;
  margin: 0 auto var(--space-2);
}

/* Benefits list */
.benefits-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.benefits-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-base);
  color: var(--color-text);
}

.benefits-list .fa-circle-check {
  color: var(--color-primary);
  font-size: 1rem;
  flex-shrink: 0;
}

/* B2B compact steps */
.b2b-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.b2b-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.b2b-step:last-child { border-bottom: none; }

.b2b-step__num {
  width: 2rem;
  height: 2rem;
  background: var(--color-primary);
  /* Dasselbe Token wie beim Ziffernkreis auf /weber-vergaser/: das ist der
     definierte Ton fuer Schrift auf Gold. */
  color: var(--color-primary-text);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-sm);
  flex-shrink: 0;
  margin-top: 2px;
}

.b2b-step strong {
  display: block;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--text-base);
}

.b2b-step p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  margin: 0;
}

/* Contact card */
.contact-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
}

/* Die Anfragekarte klebt nur, wenn sie auch ganz ins Fenster passt.
 *
 * Sie ist rund 1150px hoch und damit hoeher als fast jedes Browserfenster.
 * Klebt so eine Karte mit `top` fest, klemmt sie sich beim Scrollen oben an
 * und bewegt sich nicht mehr mit — ihr unteres Drittel samt Absendeknopf
 * bleibt dann dauerhaft unter dem Fensterrand und taucht erst wieder auf,
 * wenn der Text daneben zu Ende ist. Der Kunde kommt also nicht an den Knopf.
 *
 * Mit `bottom` statt `top` ist es nicht getan: `bottom` zieht ein Element nur
 * nach oben, um es am unteren Fensterrand zu halten. Fuer eine Karte, die oben
 * in einer langen Spalte steht und nach unten mitwandern soll, bringt das
 * nichts — sie scrollt einfach davon.
 *
 * Deshalb die Bedingung: Erst ab einem Fenster, in das die Karte samt
 * Kopfbereich hineinpasst, wird geklebt. Auf allen anderen Bildschirmen
 * scrollt sie normal mit, und der Absendeknopf ist immer erreichbar.
 * Der Preis dafuer ist etwas Leerraum rechts unten — der ist harmlos, ein
 * unerreichbarer Absendeknopf nicht.
 */
@media (min-width: 961px) and (min-height: 1320px) {
  .contact-card {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
  }
}

.contact-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.contact-card__title .fa-paper-plane {
  color: var(--color-primary);
}

.contact-card__sub {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-6);
  line-height: 1.5;
}

.contact-card__alts {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.contact-card__alt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  /* 38px waren zu knapp fuer einen Daumen; 44px ist die uebliche Zielgroesse. */
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: background 200ms ease, color 200ms ease;
}

.contact-card__alt:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text);
}

.contact-card__alt .fa-whatsapp { color: var(--color-whatsapp); }
.contact-card__alt .fa-envelope { color: var(--color-primary); }

/* --------------------------------------------------------------------------
   Contact cards — Terminbuchung page ("Direkter Kontakt")
   Three clickable cards in a grid. Scoped to .contact-cards so the single
   sticky .contact-card on the Kunde-werden page stays untouched.
   -------------------------------------------------------------------------- */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.contact-cards .contact-card {
  position: static;
  top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  text-decoration: none;
  color: var(--color-text);
  transition: transform var(--transition-base),
              box-shadow var(--transition-base),
              border-color var(--transition-base);
}

.contact-cards .contact-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
}

.contact-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-bg-subtle);
  color: var(--color-primary);
  font-size: var(--text-xl);
  transition: background var(--transition-base), color var(--transition-base);
}

.contact-cards .contact-card:hover .contact-card__icon {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.contact-card__value {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.contact-card__hint {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.contact-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-gold-ink);
}

.contact-card__cta .fa-arrow-right {
  transition: transform var(--transition-base);
}

.contact-cards .contact-card:hover .contact-card__cta .fa-arrow-right {
  transform: translateX(4px);
}

@media (max-width: 768px) {
  .contact-cards {
    grid-template-columns: 1fr;
  }
}

/* Form styles */
.b2b-form .form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.b2b-form label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.b2b-form select,
.b2b-form input,
.b2b-form textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  min-height: 44px;
}

.b2b-form select:focus,
.b2b-form input:focus,
.b2b-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  /* Vorher rgba(232,180,0,0.2) — das helle Gold fest im Code, im Dunkelmodus
     also der falsche Ton. */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.b2b-form textarea { resize: vertical; min-height: 100px; }

/* Form feedback message */
.form-feedback {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-4);
  font-weight: var(--weight-medium);
}

/* Auch hier standen Gruen und Rot aus Bootstrap fest im Code. Das Theme hat
   fuer genau diesen Zweck entsaettigte Statusfarben. */
.form-feedback--success {
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-success) 35%, transparent);
  color: color-mix(in srgb, var(--color-success) 78%, black);
}

.form-feedback--error {
  background: color-mix(in srgb, var(--color-error) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-error) 35%, transparent);
  color: color-mix(in srgb, var(--color-error) 82%, black);
}

[data-theme="dark"] .form-feedback--success { color: color-mix(in srgb, var(--color-success) 62%, white); }
[data-theme="dark"] .form-feedback--error   { color: color-mix(in srgb, var(--color-error) 55%, white); }

/* Dark mode — form inputs */
[data-theme="dark"] .b2b-form select,
[data-theme="dark"] .b2b-form input,
[data-theme="dark"] .b2b-form textarea {
  background: var(--color-bg-subtle);
  border-color: var(--color-border);
  color: var(--color-text);
}

[data-theme="dark"] .b2b-form input::placeholder,
[data-theme="dark"] .b2b-form textarea::placeholder {
  color: var(--color-text-muted);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .b2b-form select,
  :root:not([data-theme="light"]) .b2b-form input,
  :root:not([data-theme="light"]) .b2b-form textarea {
    background: var(--color-bg-subtle);
    border-color: var(--color-border);
    color: var(--color-text);
  }
}

/* Portal CTA (below B2B steps) */
.portal-cta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.portal-cta__btn {
  flex-shrink: 0;
}

.portal-cta__note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.portal-cta__note .fa-lock {
  color: var(--color-primary);
  font-size: 0.7rem;
}

/* Portal link in contact card */
.contact-card__portal-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(135deg, var(--color-accent) 0%, #0f1f3d 100%);
  border-radius: var(--radius-md);
  text-decoration: none;
  margin-bottom: var(--space-6);
  border: 1px solid rgba(232, 180, 0, 0.3);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.contact-card__portal-link:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 16px rgba(232, 180, 0, 0.2);
}

.contact-card__portal-link .fa-cloud-arrow-up {
  font-size: 1.5rem;
  color: var(--color-primary);
  flex-shrink: 0;
}

.contact-card__portal-link span {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contact-card__portal-link strong {
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 700;
}

.contact-card__portal-link small {
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}

.contact-card__portal-link-icon {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.8rem;
  flex-shrink: 0;
}

/* Dark mode — contact card needs stronger border to be visible */
[data-theme="dark"] .contact-card {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .contact-card {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  }
}

/* Dark mode — cta-banner outline button (used in Prüfstand & elsewhere) */
[data-theme="dark"] .cta-banner .btn-outline,
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cta-banner .btn-outline {
    border-color: rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.9);
  }
  :root:not([data-theme="light"]) .cta-banner .btn-outline:hover {
    border-color: #ffffff;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
  }
}

/* Dark mode — section-divider text */
[data-theme="dark"] .section-divider__text {
  color: rgba(255, 255, 255, 0.75);
}

/* ==========================================================================
   KESS3 Produkt-Sektion (Kunde werden / B2B)
   ========================================================================== */
.kess3-section {
  margin-top: var(--space-10);
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border);
}

.kess3-section__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.kess3-section__title .fa-microchip {
  color: var(--color-primary);
}

.kess3-section__intro {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.7;
  margin-bottom: var(--space-8);
  max-width: 680px;
}

.kess3-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.kess3-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  position: relative;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

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

.kess3-card--featured {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
}

.kess3-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.kess3-card__badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}

/* Hier standen Gruen und Blau aus Bootstrap (#28a745, #0d6efd samt dunkleren
   Schriftvarianten) fest im Code. Das waren zwei zusaetzliche Akzentfarben aus
   einem fremden Baukasten auf einer Seite, die sonst nur Gold und Navy kennt —
   und Hexwerte in einer Komponentendatei, was die README ausdruecklich
   ausschliesst. Jetzt die entsaettigten Statusfarben des Themes. Die
   Schriftfarben sind zusaetzlich abgedunkelt beziehungsweise aufgehellt, damit
   sie auf ihrem eigenen hellen Grund die 4,5:1 erreichen. */
.kess3-card__badge--slave {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-accent);
}
.kess3-card__badge--master {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-gold-ink);
}
.kess3-card__badge--upgrade {
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  color: color-mix(in srgb, var(--color-success) 78%, black);
}
.kess3-card__badge--paket {
  background: color-mix(in srgb, var(--color-info) 12%, transparent);
  color: color-mix(in srgb, var(--color-info) 88%, black);
}

/* Nicht --color-text-inverse verwenden: das Token dreht sich im Dunkelmodus mit
   und waere hier dunkel auf dunkel (gemessen 1,03:1). --color-text ist im
   Dunkelmodus der helle Ton, den dieses Abzeichen braucht. */
[data-theme="dark"] .kess3-card__badge--slave {
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
}
[data-theme="dark"] .kess3-card__badge--master {
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
  color: var(--color-primary);
}
[data-theme="dark"] .kess3-card__badge--upgrade {
  background: color-mix(in srgb, var(--color-success) 18%, transparent);
  color: color-mix(in srgb, var(--color-success) 62%, white);
}
[data-theme="dark"] .kess3-card__badge--paket {
  background: color-mix(in srgb, var(--color-info) 18%, transparent);
  color: color-mix(in srgb, var(--color-info) 58%, white);
}

.kess3-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.kess3-card__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
}

@media (max-width: 600px) {
  .kess3-cards { grid-template-columns: 1fr; }
}

/* Financing box */
.financing-box {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
  /* Vorher rgba(232,180,0,0.3): das helle Gold fest im Code, im Dunkelmodus
     also der falsche Ton. */
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  margin-top: var(--space-2);
  margin-bottom: var(--space-10);
}

.financing-box__icon {
  font-size: 1.5rem;
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.financing-box__content strong {
  display: block;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-base);
}

.financing-box__content p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Finanzierungs-Box mit Partner-Motiv (easyCredit) und PayPal-Hinweis
   Das Motiv ist quadratisch und nur 397 Pixel breit. Deshalb bewusst auf
   180 Pixel gedeckelt: Darueber wird es auf hochaufloesenden Displays unscharf.
   -------------------------------------------------------------------------- */
.financing-box--partner {
  align-items: center;
}

.financing-box__media {
  flex: 0 0 auto;
  width: 180px;
  max-width: 40%;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  line-height: 0;
  transition: transform var(--transition-fast);
}

.financing-box__media:hover,
.financing-box__media:focus-visible {
  transform: translateY(-2px);
}

.financing-box__media:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.financing-box__img {
  width: 100%;
  height: auto;
  display: block;
}

.financing-box__paypal {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3) !important;
  font-size: var(--text-sm);
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

.financing-box__paypal .fa-paypal {
  font-size: 1.15rem;
  color: var(--color-primary);
}

/* Der PayPal-Baustein erscheint erst nach der Einwilligung. Vorher steht hier
   die Erklaerkachel, deshalb keine feste Hoehe reservieren.

   Die helle Flaeche ist kein Schmuck, sondern noetig: PayPal bestimmt die
   Textfarbe seines Bausteins selbst und kennt den Dunkelmodus nicht. Im
   Dunkelmodus stand die Zeile "Jetzt kaufen, spaeter bezahlen" als dunkelgrauer
   Text auf dunklem Grund und war praktisch unlesbar (gesehen am 04.09.2026).
   Mit eigener heller Unterlage bleibt sie in beiden Modi lesbar. */
.financing-box__pp {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-elevated);
  border-radius: var(--radius-sm);
}

/* Im Dunkelmodus ist --color-bg-elevated selbst dunkel, deshalb hier fest
   weiss — die Flaeche muss zu PayPals unveraenderlichem Textton passen. */
[data-theme="dark"] .financing-box__pp {
  background: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .financing-box__pp {
    background: #ffffff;
  }
}

.financing-box__pp .consent-gate__placeholder {
  padding: var(--space-4);
  text-align: left;
  align-items: flex-start;
}

.financing-box__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--color-gold-ink);
  text-decoration: none;
}

.financing-box__cta:hover,
.financing-box__cta:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.financing-box__cta .fa-arrow-right {
  transition: transform var(--transition-fast);
}

.financing-box__cta:hover .fa-arrow-right {
  transform: translateX(3px);
}

@media (max-width: 600px) {
  .financing-box--partner {
    flex-direction: column;
    align-items: stretch;
  }

  .financing-box__media {
    width: 200px;
    max-width: 100%;
    margin: 0 auto var(--space-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .financing-box__media,
  .financing-box__cta .fa-arrow-right {
    transition: none;
  }

  .financing-box__media:hover,
  .financing-box__media:focus-visible {
    transform: none;
  }
}

/* ==========================================================================
   Formular: Interesse-Checkboxen
   ========================================================================== */
.form-checkboxes {
  border: none;
  padding: 0;
  margin: 0;
}

.form-checkboxes legend {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  display: block;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-1) 0;
  transition: color 0.15s ease;
}

.checkbox-label:hover {
  color: var(--color-text);
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* Dark mode — kunden steps icon ring stands out */
[data-theme="dark"] .kunden-step__icon {
  box-shadow: 0 0 0 4px var(--color-bg), 0 4px 12px rgba(0,0,0,0.4);
}

/* ==========================================================================
   EVC Reseller — Premium Highlight Section
   ========================================================================== */
.evc-section {
  background: linear-gradient(135deg, #06060e 0%, #0a1628 45%, #06060e 100%);
  position: relative;
  overflow: hidden;
  color: white;
}

/* Gold accent line top */
.evc-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 5%, var(--color-primary) 35%, var(--color-primary) 65%, transparent 95%);
}

/* Subtle diagonal ray texture */
.evc-bg-rays {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 58px,
    rgba(232, 180, 0, 0.02) 58px,
    rgba(232, 180, 0, 0.02) 59px
  );
  pointer-events: none;
}

/* Two-column layout */
.evc-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Eyebrow */
.evc-section .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

/* Title */
.evc-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  color: white;
  line-height: 1.08;
  margin: 0 0 var(--space-6);
  text-shadow:
    2px 2px 0 rgba(232, 180, 0, 0.1),
    0 0 40px rgba(232, 180, 0, 0.12);
}

.evc-title__gold {
  color: var(--color-primary);
}

/* Description */
.evc-description {
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--text-base);
  line-height: 1.78;
  max-width: 52ch;
  margin: 0 0 var(--space-8);
}

/* Credential list */
.evc-credentials {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.evc-credential {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  padding: var(--space-3) var(--space-4);
  background: rgba(232, 180, 0, 0.06);
  border: 1px solid rgba(232, 180, 0, 0.14);
  border-radius: var(--radius-md);
  transition: background 0.25s ease, border-color 0.25s ease;
}

.evc-credential:hover {
  background: rgba(232, 180, 0, 0.1);
  border-color: rgba(232, 180, 0, 0.28);
}

.evc-credential .fa-circle-check {
  color: var(--color-primary);
  font-size: 1rem;
  flex-shrink: 0;
}

/* Certificate column */
.evc-certificate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  position: relative;
}

/* Gold radial glow behind cert */
.evc-certificate__glow {
  position: absolute;
  width: 420px;
  height: 280px;
  background: radial-gradient(ellipse at center, rgba(232, 180, 0, 0.22) 0%, transparent 68%);
  pointer-events: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.evc-certificate__link {
  display: block;
  text-decoration: none;
  position: relative;
  z-index: 1;
  border-radius: var(--radius-lg);
  transition: transform 280ms ease, box-shadow 280ms ease;
}

.evc-certificate__link:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.55),
    0 0 48px rgba(232, 180, 0, 0.25);
}

.evc-certificate__link:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 6px;
  border-radius: var(--radius-lg);
}

/* Cert frame with gold border glow */
.evc-certificate__frame {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(232, 180, 0, 0.28);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  overflow: hidden;
  background: rgba(10, 22, 40, 0.4);
}

.evc-certificate__frame img {
  display: block;
  width: 480px;
  max-width: 100%;
  height: auto;
  image-rendering: crisp-edges;
}

/* Caption below cert */
.evc-certificate__caption {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.05em;
  margin: 0;
}

.evc-certificate__caption .fa-arrow-up-right-from-square {
  font-size: 0.65rem;
}

/* Mobile */
@media (max-width: 900px) {
  .evc-layout {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
  .evc-certificate { order: -1; }
  .evc-description { max-width: none; }
  .evc-certificate__glow { width: 300px; height: 200px; }
}

@media (max-width: 480px) {
  .evc-title { font-size: clamp(1.7rem, 7vw, 2.4rem); }
}

/* ==========================================================================
   Alientech Dealer Page (page-alientech.php)
   Only the intro figure and the card wrapper are new — the KESS3 cards,
   financing box, feature grid and CTA banner reuse the components above.
   ========================================================================== */

/* The record sits inside the dark hero, so it needs no colour changes here. */
.page-hero--alientech .dealer-record {
  margin-top: var(--space-10);
}

/* "Offizieller Alientech Handler" is long - hold it to two lines at desktop. */
.page-hero--alientech .page-hero__title {
  font-size: clamp(2.25rem, 4.4vw, 3.25rem);
}

.alientech-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: center;
  margin-bottom: var(--space-12);
}

.alientech-intro__lead {
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
  max-width: 60ch;
}

.alientech-intro__figure {
  margin: 0;
}

.alientech-intro__figure img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* Keeps the 2x2 KESS3 grid from stretching to full container width. */
.alientech-cards-wrap {
  max-width: 900px;
}

@media (max-width: 900px) {
  .alientech-intro {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .alientech-intro__figure {
    order: -1;
  }
}

/* The dealer record inside the KESS3 block on page-kunde-werden.php. */
.kess3-section .dealer-record {
  margin-block: var(--space-6) var(--space-4);
}

.kess3-section__more {
  margin-bottom: var(--space-8);
  font-size: var(--text-sm);
}

.kess3-section__more a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  gap: 0.5rem;
  color: var(--color-gold-ink);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: gap var(--transition-base), border-color var(--transition-base);
}

.kess3-section__more a:hover,
.kess3-section__more a:focus-visible {
  gap: 0.8rem;
  border-bottom-color: currentColor;
}

[data-theme="dark"] .kess3-section__more a {
  color: var(--color-primary);
}

/* ==========================================================================
   KESS3 cards with product image
   Master and Slave show the same photo on purpose — it is literally the same
   device, only the licence differs. The caption on the Master card says so,
   otherwise the repetition reads as a mistake.
   ========================================================================== */

.kess3-card--with-image {
  padding-top: var(--space-4);
}

.kess3-card__media {
  margin: 0 0 var(--space-4);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #0e0e14;
}

/* contain, not cover: this is a product shot — cropping cuts the device and
   the Alientech wordmark off. The dark plate fills whatever space is left. */
.kess3-card__media img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: contain;
  object-position: center;
}

/* The optional marker on a form label. */
.form-row__optional {
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

@media (max-width: 600px) {
  .kess3-card__media img {
    height: 180px;
  }
}

/* Auf dunklen Flaechen zurueck zum hellen Gold: --color-gold-ink ist fuer
   hellen Grund gemacht und waere hier mit 3,4:1 zu dunkel. Die Regel steht
   bewusst am Ende, damit sie die Grundregel schlaegt. */
.alientech-section .section-eyebrow,
.rennstrecke-section .section-eyebrow,
.cta-banner .section-eyebrow,
.page-hero .section-eyebrow {
  color: var(--color-primary);
}

/* ==========================================================================
   WEBER-VERGASER
   Der Hero erbt den Standardverlauf von .page-hero — die Seite braucht keine
   eigene Bildwelt, sie lebt vom Text und von den Werkstattaufnahmen weiter unten.
   ========================================================================== */

.weber-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.weber-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* Hier stand als erster Wert ein Abstands-Token mit der Stufe 7. Die Skala in
     variables.css folgt der Tailwind-Konvention und ueberspringt diese Stufe,
     das Token existierte also nie. Ein var() auf ein unbekanntes Token ohne
     Ersatzwert macht die GANZE Deklaration ungueltig, padding fiel damit auf 0
     zurueck: Symbol, Ueberschrift und Text sassen exakt auf der Rahmenlinie.
     Jetzt --space-6 wie bei .weber-ablauf__step auf derselben Seite. */
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-base), transform var(--transition-base);
}

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

.weber-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  color: var(--color-primary-dark);
  font-size: 1.25rem;
}

[data-theme="dark"] .weber-card__icon {
  color: var(--color-primary);
}

/* Ohne dieses Pendant bliebe das Zeichen im Dunkelmodus im dunkleren Ton,
   solange JavaScript das data-theme-Attribut noch nicht gesetzt hat. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .weber-card__icon {
    color: var(--color-primary);
  }
}

.weber-card__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.weber-card__text {
  margin: 0;
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* ---------- Der Prüfstand-Abschnitt ---------- */

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

.weber-pruefstand__text p {
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: 56ch;
}

.weber-pruefstand__text .btn {
  margin-top: var(--space-4);
}

.weber-pruefstand__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.weber-pruefstand__bild {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Galerie ---------- */

.weber-galerie {
  display: grid;
  /* 320px statt 280: Bei 1200px Containerbreite ergibt das drei Spalten statt
     vier. Bei fuenf Bildern sieht 3 + 2 aufgeraeumt aus, 4 + 1 nach Unfall.
     Das min() daneben ist kein Beiwerk: minmax(320px, ...) erzwingt die 320px
     auch dann, wenn gar keine 320px da sind — auf einem 320px breiten Telefon
     bleiben nach den Containerabstaenden nur rund 270 uebrig, und die Galerie
     ragte seitlich heraus. Mit min(320px, 100%) gibt die Spalte nach. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.weber-galerie__item {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.weber-galerie__img {
  display: block;
  width: 100%;
  height: 260px;
  /* Ein Hochformat wie der Lotus-Motorraum wird sonst oben und unten
     abgeschnitten; die Mitte traegt bei allen fuenf Aufnahmen das Motiv. */
  object-fit: cover;
  object-position: center;
}

.weber-galerie__caption {
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
}

/* ---------- Ablauf ----------
   Hier sind die Ziffern keine Dekoration: Die vier Schritte laufen wirklich in
   dieser Reihenfolge ab, und der Kunde will wissen, wann er den Preis erfährt.
   Deshalb <ol> und sichtbare Nummern. */

.weber-ablauf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
  margin: var(--space-10) 0 0;
  padding: 0;
  list-style: none;
}

.weber-ablauf__step {
  position: relative;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-bg-subtle);
  border-top: 3px solid var(--color-primary);
}

.weber-ablauf__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.weber-ablauf__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.weber-ablauf__step p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  font-size: var(--text-sm);
}

/* ---------- Hinweis zum Einschicken ---------- */

.weber-hinweis {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 760px;
  margin: var(--space-8) 0 0;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

.weber-hinweis i {
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--color-primary-dark);
}

[data-theme="dark"] .weber-hinweis i {
  color: var(--color-primary);
}

/* Pendant fuer den Systemschalter, siehe .weber-card__icon weiter oben. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .weber-hinweis i {
    color: var(--color-primary);
  }
}

@media (max-width: 860px) {
  .weber-pruefstand__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}