/* ═══════════════════════════════════════════════════════════
   CMF Design-System — "Refined Light-Tech"
   Ein kohärentes, leichtes Erscheinungsbild:
   · 2 Akzentfarben (Orange/Petrol), sonst Neutraltöne
   · 1 Karten-Optik, 1 Tabellen-Optik, 1 Box-Optik
   · Hairlines statt Kästen, Pill-Buttons, Glas-Flächen
   · ruhige Typo-Skala, großzügiger Weißraum
   Wird nach theme.css geladen und kann alles überschreiben.
   ═══════════════════════════════════════════════════════════ */

/* ── Design-Tokens ──────────────────────────────────────── */
:root {
  /* Abstände */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 56px;

  /* Radien */
  --radius-card: 18px;
  --radius-pill: 999px;

  /* Flächen & Linien */
  --surface: rgba(255, 255, 255, .72);
  --surface-solid: #ffffff;
  --hairline: 1px solid rgba(22, 33, 58, .1);
  --tint-primary: rgba(91, 141, 239, .07);
  --tint-secondary: rgba(22, 33, 58, .06);
  --tint-neutral: rgba(22, 33, 58, .045);

  /* Schatten */
  --shadow-soft: 0 1px 2px rgba(22, 33, 58, .04), 0 8px 24px rgba(22, 33, 58, .05);
  --shadow-hover: 0 2px 4px rgba(22, 33, 58, .05), 0 16px 40px rgba(22, 33, 58, .1);
  --glow-primary: 0 6px 24px rgba(91, 141, 239, .28);

  /* Text-Stufen (nur diese verwenden!) */
  --text-sm: .9rem;
  --text-xs: .8rem;

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ── Typo-Rhythmus ──────────────────────────────────────── */
main h2 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
  letter-spacing: -.01em;
}

main h3 {
  margin-top: var(--space-md);
  letter-spacing: -.005em;
}

main > section:first-child h1,
main > section:first-child + * h2 {
  margin-top: 0;
}

main > section:first-child h1 {
  text-align: center;
  letter-spacing: -.015em;
  font-size: clamp(1.7rem, 4.5vw, var(--h1, 2.6rem));
  line-height: 1.18;
}

main p,
main li {
  line-height: 1.7;
}

/* Eine Lead-Typo fuer alle grossen Intro-Absaetze */
.lead,
.hero-lead,
.hero-banner p,
.cta-box p {
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--color-muted);
  max-width: 760px;
}

.section-kicker,
.eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 6px;
}

/* ── Sanfter Seiten-Einstieg ────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  main > section:nth-child(-n+6),
  main > div:nth-child(-n+6) {
    animation: cmf-rise .5s cubic-bezier(.22, .8, .35, 1) both;
  }
  main > :nth-child(2) { animation-delay: .05s }
  main > :nth-child(3) { animation-delay: .1s }
  main > :nth-child(4) { animation-delay: .15s }
  main > :nth-child(5) { animation-delay: .2s }
  main > :nth-child(6) { animation-delay: .25s }
}

@keyframes cmf-rise {
  from { opacity: 0; transform: translateY(14px) }
  to { opacity: 1; transform: none }
}

/* ── Buttons: Pills mit Glow ────────────────────────────── */
.btn {
  border-radius: 8px;
  padding: 10px 18px;
  border: var(--hairline);
  background: var(--surface);
  backdrop-filter: blur(8px);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-secondary);
}

.btn:hover {
  border-color: rgba(91, 141, 239, .4);
  color: var(--color-primary);
}

.btn.primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-text, #fff);
}

.btn.primary:hover {
  box-shadow: var(--glow-primary);
  color: var(--color-primary-text, #fff);
}

.btn-lg {
  padding: 12px 22px;
  font-size: 1.02em;
}

/* Eine Wrap-Reihe fuer Buttons, Badges und Chips */
.btn-row,
.flex-row,
.badge-row,
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.badge-row,
.chip-row {
  gap: var(--space-xs);
}

/* ── Hero & CTA: eine gemeinsame Glas-Bühne ─────────────── */
.hero-banner,
.cta-box {
  position: relative;
  background:
    radial-gradient(120% 160% at 85% -20%, var(--tint-primary) 0%, transparent 55%),
    radial-gradient(120% 160% at 10% 120%, var(--tint-secondary) 0%, transparent 55%),
    var(--surface);
  backdrop-filter: blur(14px);
  border: var(--hairline);
  border-radius: var(--radius-card);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.hero-banner h1,
.hero-banner h2,
.cta-box h2,
.cta-box h3 {
  margin-top: 0;
  color: var(--color-secondary);
}

.hero-banner p {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.hero-banner .btn-row,
.cta-box .btn-row {
  justify-content: center;
}

.hero-banner .btn-row {
  margin-top: var(--space-md);
}

/* ── Produkt-Hero (Startseite) ──────────────────────────── */
.hero-product {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--space-xl);
  align-items: center;
  padding: var(--space-md) 0 var(--space-xs);
}

.hero-product h1,
main > section:first-child .hero-product h1 {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.12;
  margin: 0 0 var(--space-md);
  text-align: left;
  letter-spacing: -.02em;
}

.hero-kicker {
  display: inline-block;
  background: var(--tint-primary);
  color: var(--color-primary);
  border: 1px solid rgba(91, 141, 239, .22);
  border-radius: var(--radius-pill);
  padding: 5px 16px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

.hero-lead {
  max-width: 560px;
  margin: 0 0 var(--space-lg);
}

.hero-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-hover);
}

.hero-shot figcaption {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-top: var(--space-xs);
}

@media (max-width: 900px) {
  .hero-product {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

/* ── Glas-Fläche: gemeinsame Basis aller Flächen-Bausteine ─ */
.card,
.stat-item,
.table-wrap,
.faq-list details {
  background: var(--surface);
  backdrop-filter: blur(10px);
  border: var(--hairline);
  border-radius: var(--radius-card);
}

.card,
.stat-item {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.card:hover,
.stat-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

.card:hover {
  border-color: rgba(91, 141, 239, .25);
}

/* ── Die eine Karte ─────────────────────────────────────── */
.card {
  padding: var(--space-md);
}

.card h2, .card h3, .card h4 {
  margin: 0 0 var(--space-xs);
}

.card h3 a, .card h2 a {
  color: var(--color-secondary);
  text-decoration: none;
}

.card h3 a:hover, .card h2 a:hover {
  color: var(--color-primary);
}

.card p {
  margin: 0 0 var(--space-xs);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-md);
}

/* ── Die eine Box (ersetzt info/quote/callout-Bunt) ─────── */
.panel,
.info-box,
.quote-box,
.callout {
  background: var(--tint-neutral);
  border: 0;
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  padding: var(--space-md);
}

.panel {
  border-left: 0;
  border-radius: var(--radius-card);
  background: var(--tint-secondary);
}

.panel h3, .panel h4 {
  margin-top: 0;
  color: var(--color-secondary);
}

.callout {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  margin-bottom: var(--space-xs);
  /* gleiche Flex-Anatomie wie .feature-item/.step, eigener Kasten-Stil */
}

.callout strong { flex-shrink: 0 }

.callout p {
  margin: 4px 0 0;
  font-size: var(--text-sm);
}

/* Varianten nur noch als dezente Akzent-Nuance */
.callout-info,
.callout-success { border-left-color: var(--color-secondary) }
.callout-warning,
.callout-error { border-left-color: var(--color-primary) }

.quote-box { border-left-color: var(--color-secondary) }

.quote-box p {
  margin: 0;
  font-size: 1.05em;
  font-style: italic;
  color: var(--color-secondary);
  line-height: 1.7;
}

/* ── Zahlen / Stats ─────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-sm);
  text-align: center;
}

.stat-item {
  padding: var(--space-md) var(--space-sm);
}

.stat-value {
  font-family: var(--font-heading);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.1;
  background: linear-gradient(120deg, var(--color-secondary), var(--color-primary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-secondary);
}

.stat-label {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-top: 4px;
  letter-spacing: .02em;
}

/* ── CTA-Spezifika (Basis siehe Hero & CTA oben) ────────── */
.cta-box p {
  margin: 0 auto var(--space-md);
  max-width: 560px;
}

/* ── Code ───────────────────────────────────────────────── */
.code-box,
.media-box {
  background: rgba(6, 40, 54, .035);
  border: var(--hairline);
  padding: var(--space-md);
  border-radius: var(--radius-card);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: var(--text-sm);
  line-height: 1.65;
}

.code-box pre { margin: 0 }

code {
  font-family: var(--mono);
  font-size: .92em;
  background: var(--tint-neutral);
  padding: 1px 6px;
  border-radius: 6px;
}

pre code { background: transparent; padding: 0 }

/* ── Video ──────────────────────────────────────────────── */
.video-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  border: var(--hairline);
}

.video-responsive iframe,
.video-responsive video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Badges & Chips: nur noch Markentöne ────────────────── */
.badge,
.chip {
  display: inline-block;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  border: var(--hairline);
  background: var(--surface);
  color: var(--color-muted);
}

.badge-green,
.badge-blue {
  background: var(--tint-secondary);
  color: var(--color-secondary);
  border-color: rgba(22, 33, 58, .2);
}

.badge-orange,
.badge-red {
  background: var(--tint-primary);
  color: var(--color-primary);
  border-color: rgba(91, 141, 239, .25);
}

.badge-gray { background: var(--tint-neutral) }

/* ── Fortschritt ────────────────────────────────────────── */
.progress {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  margin-bottom: 4px;
}

.progress-label { color: var(--color-secondary); font-weight: 600 }
.progress-value { color: var(--color-muted) }

.progress-bar {
  height: 6px;
  background: var(--tint-neutral);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: var(--space-sm);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-primary));
  border-radius: var(--radius-pill);
}

/* ── Zeitleiste ─────────────────────────────────────────── */
.timeline {
  position: relative;
  padding-left: 30px;
  border-left: 1px solid rgba(22, 33, 58, .15);
}

.timeline-item {
  position: relative;
  margin-bottom: var(--space-md);
}

.timeline-dot {
  position: absolute;
  left: -37px;
  top: 4px;
  width: 13px;
  height: 13px;
  background: var(--color-primary);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--tint-primary);
}

.timeline-title {
  font-weight: 700;
  color: var(--color-primary);
  font-size: var(--text-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.timeline-heading { font-weight: 700; margin: 4px 0 }

.timeline-text {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* ── Eine Flex-Zeile fuer Feature, Schritt und Callout ──── */
.feature-item,
.step {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}

.feature-item p,
.step p {
  margin: 2px 0 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* ── Features ───────────────────────────────────────────── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-sm) var(--space-lg);
}

.feature-item {
  padding: var(--space-xs) 0;
}

.feature-check {
  color: var(--color-primary);
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Schritte ───────────────────────────────────────────── */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-md);
}

.step-number {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid rgba(22, 33, 58, .3);
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  flex-shrink: 0;
}

.step-number.accent {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  box-shadow: var(--glow-primary);
}

/* ── Die eine Tabelle ───────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  padding: 6px var(--space-sm);
}

.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table-wrap th {
  background: transparent;
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: left;
  padding: 12px var(--space-sm) 8px;
  border-bottom: 2px solid rgba(22, 33, 58, .15);
}

.table-wrap td {
  padding: 11px var(--space-sm);
  border-bottom: 1px solid rgba(22, 33, 58, .07);
}

.table-wrap tbody tr:last-child td { border-bottom: 0 }

.table-wrap tbody tr {
  transition: background .15s ease;
}

.table-wrap tbody tr:hover {
  background: var(--tint-neutral);
}

/* Vergleichstabelle */
.compare-table table { min-width: 560px }

.compare-table td:not(:first-child),
.compare-table th:not(:first-child) { text-align: center }

.compare-table td:first-child { font-weight: 600 }

.compare-yes { color: var(--color-secondary); font-weight: 700 }
.compare-no { color: var(--color-muted) }
.compare-part { color: var(--color-primary); font-weight: 600 }

/* ── FAQ ────────────────────────────────────────────────── */
.faq-list details {
  padding: 14px var(--space-md);
  margin-bottom: var(--space-xs);
  transition: border-color .2s ease;
}

.faq-list details:hover {
  border-color: rgba(91, 141, 239, .3);
}

.faq-list summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-secondary);
  list-style-position: outside;
}

.faq-list details[open] summary {
  margin-bottom: var(--space-xs);
  color: var(--color-primary);
}

.faq-list details p {
  margin: 0 0 6px;
  font-size: var(--text-sm);
  line-height: 1.7;
}

/* ── Footer ─────────────────────────────────────────────── */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-lg);
  text-align: left;
  font-size: var(--text-sm);
}

.footer-grid h4 {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-sm);
  letter-spacing: .02em;
}

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

.footer-grid li { margin: 5px 0 }

.footer-grid a { font-weight: 400 }

.footer-meta {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: var(--hairline);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* ── Icon-Label ─────────────────────────────────────────── */
.icon-label { margin-bottom: 4px }

.icon-label img {
  width: 48px;
  height: 48px;
  border-radius: 0;
}

.icon-label + p { margin-top: var(--space-xs) }

/* ── Bilder ─────────────────────────────────────────────── */
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-card);
  display: block;
}

/* ── Layout-Helfer ──────────────────────────────────────── */
.measure {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

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

/* ── Hilfsklassen ───────────────────────────────────────── */
.text-center { text-align: center }
.text-muted { color: var(--color-muted) }
.text-small { font-size: var(--text-sm) }
.text-xs { font-size: var(--text-xs) }
.text-primary { color: var(--color-primary) }
.text-secondary { color: var(--color-secondary) }
.text-white { color: #fff }
.mt-0 { margin-top: 0 }
.mb-0 { margin-bottom: 0 }
.mb-sm { margin-bottom: var(--space-sm) }
.gap-sm { gap: var(--space-xs) }
.gap-md { gap: var(--space-md) }
.flex-col { display: flex; flex-direction: column }
.flex-center { display: flex; align-items: center; justify-content: center }
.mx-auto { margin-left: auto; margin-right: auto }
.max-w-sm { max-width: 440px }

/* ── Konzertplaner-Ergänzungen ─────────────────────────── */
/* CTA-Titel ohne Heading-Semantik (SEO: dekorative CTA-Köpfe sind keine Gliederung) */
.cta-box .cta-headline {
  margin: 0 auto var(--space-sm);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: var(--h3);
  color: var(--color-secondary);
  max-width: none;
}

/* site-title als <p> statt <div>: Browser-Standardabstand entfernen */
p.site-title { margin: 0; }

/* Logo im Header: freistehende Welle, etwas größer, Schatten im Marken-Blau */
.site-header .site-logo {
  width: 84px;
  height: 84px;
  border-radius: 0;
  filter: drop-shadow(0 4px 14px rgba(91, 141, 239, .35));
}

/* Hero-Slider (Muster: erbekatalog.de): drei durchblätterbare Aussagen */
.kp-hero-wrap { position: relative; padding: 0 48px; }
.kp-hero-track { overflow: hidden; }
.kp-hero-slide { display: none; }
.kp-hero-slide--aktiv { display: block; animation: kpHeroFadeIn .3s ease; }
@keyframes kpHeroFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Hoehere Spezifitaet als .hero-banner p: p-basierte Slide-Titel = h1-Optik */
.hero-banner .kp-hero-titel,
.kp-hero-titel {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: var(--h1);
  line-height: 1.15;
  color: var(--color-secondary);
  max-width: none;
}
.kp-hero-pfeil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0;
}
.kp-hero-pfeil:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--tint-primary);
}
.kp-hero-pfeil--prev { left: 0; }
.kp-hero-pfeil--next { right: 0; }
.kp-hero-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 4px;
}
/* Trefferfläche 24x24 (WCAG 2.5.8), sichtbarer Punkt über ::before */
.kp-hero-dot {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.kp-hero-dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #8a93a5; /* mind. 3:1 auf dem hellen Hero-Hintergrund */
  transition: background .2s, transform .2s;
}
.kp-hero-dot--aktiv::before {
  background: var(--color-primary);
  transform: translate(-50%, -50%) scale(1.35);
}
.kp-hero-pfeil:focus-visible,
.kp-hero-dot:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .kp-hero-slide--aktiv { animation: none; }
  .kp-hero-dot::before { transition: none; }
}
@media (max-width: 560px) {
  .kp-hero-wrap { padding: 0; }
  .kp-hero-pfeil { display: none; }
}

/* ── Review-Korrekturen 2026-06-13 ──────────────────────── */
/* Sekundär-Button (.btn ohne .primary) auf der Glas-Hero-Fläche sichtbar
   abgrenzen — der Standard-Hairline verschwindet sonst fast. Alpha .8
   erreicht den WCAG-1.4.11-Mindestkontrast 3:1 auf nahezu weißem Grund. */
.hero-banner .btn:not(.primary) {
  border-color: rgba(22, 33, 58, .8);
}
/* Hover-Akzent wie bei allen Buttons (Orange) — sonst überstimmt die Regel
   oben wegen höherer Spezifität den .btn:hover-Rand. */
.hero-banner .btn:not(.primary):hover {
  border-color: rgba(91, 141, 239, .6);
}
/* Link direkt unter einer Button-Reihe in Karten klebte am Button —
   etwas Luft, damit er gut erreich- und klickbar ist. */
.card .btn-row + p {
  margin-top: var(--space-sm);
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — "Konzertplaner Dark" (2026-06-13)
   Durchgängiges dunkles Markendesign, abgestimmt mit Account-Bereich
   und Planer. Überschreibt die hellen Tokens des Light-Tech-Systems
   sowie die fest auf Navy gesetzten Linien/Flächen. Tiefes Navy #0f1422,
   Panels #19213a, Akzent-Blau #5b8def, Marker-Gelb/Rot als Logo-Echo.
   ═══════════════════════════════════════════════════════════ */
:root {
  color-scheme: dark;
  --surface: rgba(28, 38, 66, .66);
  --surface-solid: #19213a;
  --hairline: 1px solid rgba(255, 255, 255, .10);
  --tint-primary: rgba(91, 141, 239, .16);
  --tint-secondary: rgba(255, 255, 255, .06);
  --tint-neutral: rgba(255, 255, 255, .04);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 30px rgba(0, 0, 0, .42);
  --shadow-hover: 0 2px 6px rgba(0, 0, 0, .4), 0 22px 50px rgba(0, 0, 0, .55);
  --glow-primary: 0 6px 26px rgba(91, 141, 239, .45);
}

/* Body: tiefes Navy mit dezenten Markenlicht-Verläufen (überschreibt base.css) */
body {
  background-color: #0f1422;
  background-image:
    radial-gradient(ellipse 130% 70% at 50% -8%, rgba(91, 141, 239, .18) 0%, transparent 60%),
    radial-gradient(ellipse 90% 70% at -5% 45%, rgba(91, 141, 239, .10) 0%, transparent 50%),
    radial-gradient(ellipse 90% 70% at 105% 80%, rgba(8, 11, 22, .85) 0%, transparent 55%);
  background-attachment: fixed;
}

/* Linien/Flächen, die im Hellsystem fest auf Navy standen → hell auf dunkel */
.step-number { border-color: rgba(255, 255, 255, .22); }
.table-wrap th { border-bottom-color: rgba(255, 255, 255, .2); }
.table-wrap td { border-bottom-color: rgba(255, 255, 255, .08); }
.timeline { border-left-color: rgba(255, 255, 255, .15); }
.badge-green, .badge-blue { border-color: rgba(255, 255, 255, .2); }
.code-box, .media-box { background: rgba(255, 255, 255, .04); }
code { background: rgba(255, 255, 255, .07); }

/* Sekundär-Button auf der Glas-Hero: heller Rand statt fast unsichtbarem Navy */
.hero-banner .btn:not(.primary) { border-color: rgba(255, 255, 255, .45); }
.hero-banner .btn:not(.primary):hover { border-color: rgba(91, 141, 239, .7); }

/* Slider-Punkt auf dunklem Hero gut sichtbar */
.kp-hero-dot::before { background: #6f7a93; }

/* Logo-Schein etwas kräftiger auf dunkel */
.site-header .site-logo { filter: drop-shadow(0 4px 16px rgba(91, 141, 239, .5)); }

/* Platzhalter hell + opacity:1 (sonst dimmen Browser auf ~54% → zu blass) */
input::placeholder, textarea::placeholder { color: #aab3cb; opacity: 1; }

/* Primär-Buttons: tieferes Blau für AA-Kontrast mit weißer Schrift (5,3:1).
   Helles #5b8def bleibt für Links/Akzente/Tints. */
.btn.primary { background: #3a5fc4; border-color: #3a5fc4; }


/* Inhalts-Links (keine Buttons) im Marken-Hellblau #8fb0f5 — global im
   Seiteninhalt. Nav, Footer und die Plattform-Topbar behalten ihre Gestaltung. */
main a:not(.btn) { color: #8fb0f5; }
main a:not(.btn):hover { color: #b3c9f8; }

/* Plan-Preise auf /online-planen */
.card .preis { font-size: 1.5rem; font-weight: 700; color: var(--color-text); margin: 0 0 .4rem; line-height: 1.2; }
.card .preis small { font-size: .8rem; font-weight: 400; color: var(--color-muted); }

/* ═══════════════════════════════════════════════════════════
   FAQ & Funktionen — gerahmte App-Screenshots + lebendige Layouts (2026-06-15)
   Mobil-Hochformat-Shots als zentrierte, größenbegrenzte „Geräte-Shots";
   Splits vertikal zentriert (keine Lücken neben kurzem Text); Galerien.
   ═══════════════════════════════════════════════════════════ */
.kp-shot { margin: 0; }
.kp-shot img {
  display: block;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  border: var(--hairline);
  border-radius: 22px;
  box-shadow: var(--shadow-hover);
}
.kp-shot figcaption {
  margin: var(--space-sm) auto 0;
  max-width: 300px;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-muted);
  line-height: 1.5;
}
/* Showcase-Split: Text breit, Shot-Spalte schmal → der Shot sitzt direkt am Text,
   keine floatenden Leerflächen mehr. Vertikal zentriert. Bildseite wechselbar. */
.cols-2.kp-split { grid-template-columns: minmax(0, 1fr) 340px; align-items: center; }
.cols-2.kp-split.kp-split--left { grid-template-columns: 340px minmax(0, 1fr); }
.kp-split > div > :first-child { margin-top: 0; }
@media (max-width: 720px) {
  .cols-2.kp-split,
  .cols-2.kp-split.kp-split--left { grid-template-columns: 1fr; }
}
/* Galerie: mehrere Shots nebeneinander, oben ausgerichtet */
.kp-gallery { align-items: start; }
/* Featured-Fläche (Freigabe-Highlight): Split innerhalb eines Panels */
.kp-feature-panel { padding: var(--space-lg); }
.kp-feature-panel .kp-split { margin: 0; }
/* Karten-Reihen: gleich hohe Karten in der Spalten-Galerie */
.kp-cards .card { height: 100%; }
/* base.css tönt/poltert jede 2. „section > .cols" (greift bei html-Block-Layouts
   je nach Blockposition unkontrolliert) — für unsere kp-Layouts neutralisieren,
   damit die Abstände zwischen den Abschnitten gleichmäßig bleiben. */
main > section:nth-child(even) > .cols {
  padding: 0;
  background: none;
  border-radius: 0;
}