/* ═══════════════════════════════════════════════════════════
   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(8, 60, 80, .1);
  --tint-primary: rgba(31, 78, 99, .06);
  --tint-secondary: rgba(22, 58, 75, .05);
  --tint-neutral: rgba(8, 60, 80, .045);

  /* Schatten */
  --shadow-soft: 0 1px 2px rgba(8, 60, 80, .04), 0 8px 24px rgba(8, 60, 80, .05);
  --shadow-hover: 0 2px 4px rgba(8, 60, 80, .05), 0 16px 40px rgba(8, 60, 80, .1);
  --glow-primary: 0 6px 24px rgba(234, 107, 23, .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: var(--radius-pill);
  padding: 10px 22px;
  border: var(--hairline);
  background: var(--surface);
  backdrop-filter: blur(8px);
  font-weight: 600;
  color: var(--color-secondary);
}

.btn:hover {
  border-color: rgba(234, 107, 23, .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: 13px 28px;
  font-size: 1.05em;
}

/* 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(234, 107, 23, .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(234, 107, 23, .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(6, 83, 108, .2);
}

.badge-orange,
.badge-red {
  background: var(--tint-primary);
  color: var(--color-primary);
  border-color: rgba(234, 107, 23, .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(8, 60, 80, .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(6, 83, 108, .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(6, 83, 108, .15);
}

.table-wrap td {
  padding: 11px var(--space-sm);
  border-bottom: 1px solid rgba(8, 60, 80, .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(234, 107, 23, .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 }


/* ── XrechnungMega-Ergänzungen ── */
p.site-title { margin: 0; }
.site-header { text-align: center; }
.site-header .site-logo {
  width: 156px; height: 156px; border-radius: 50%;
  filter: drop-shadow(0 4px 14px rgba(31, 78, 99, .28));
}
.site-tagline { color: var(--color-muted); margin: 4px auto 0; max-width: none; text-align: center; }
.footer-inner {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  align-items: center; justify-content: space-between;
}
.footer-copy { color: var(--color-muted); font-size: .9rem; }
.footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-links a { color: var(--color-muted); text-decoration: none; font-size: .9rem; }
.footer-links a:hover { color: var(--color-primary); text-decoration: underline; }
.wege-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: var(--space-md) 0; }

/* Vier Karten nebeneinander (erzwungen, mit responsivem Umbruch) */
.feature-grid.cols4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .feature-grid.cols4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feature-grid.cols4 { grid-template-columns: 1fr; } }