/* ═══════════════════════════════════════════════════════════
   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(250, 248, 243, .72);
  --surface-solid: #FAF8F3;
  --hairline: 1px solid rgba(42, 42, 42, .1);
  --tint-primary: rgba(192, 191, 172, .07);
  --tint-secondary: rgba(166, 169, 184, .06);
  --tint-neutral: rgba(42, 42, 42, .045);

  /* Schatten */
  --shadow-soft: 0 1px 2px rgba(42, 42, 42, .04), 0 8px 24px rgba(42, 42, 42, .05);
  --shadow-hover: 0 2px 4px rgba(42, 42, 42, .05), 0 16px 40px rgba(42, 42, 42, .1);
  --glow-primary: 0 6px 24px rgba(192, 191, 172, .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(192, 191, 172, .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(192, 191, 172, .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(192, 191, 172, .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(42, 42, 42, .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(166, 169, 184, .2);
}

.badge-orange,
.badge-red {
  background: var(--tint-primary);
  color: var(--color-primary);
  border-color: rgba(192, 191, 172, .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(42, 42, 42, .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(166, 169, 184, .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(166, 169, 184, .15);
}

.table-wrap td {
  padding: 11px var(--space-sm);
  border-bottom: 1px solid rgba(42, 42, 42, .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(192, 191, 172, .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 }

/* Inga Krackhardt — Startseite */
main:has(.ik-intro) { background:#FAF8F3; color:#2A2A2A; padding:clamp(28px,6vw,76px); border-radius:6px; margin-top:24px; margin-bottom:48px; }
main:has(.ik-intro) h1 { font-size:clamp(2.6rem,6vw,4.9rem)!important; line-height:1.08!important; letter-spacing:-.035em!important; text-align:left!important; max-width:780px; margin:24px 0!important; color:#2A2A2A; }
main:has(.ik-intro) h2 { font-size:clamp(1.8rem,3.4vw,2.7rem); line-height:1.2; margin-top:12px; max-width:760px; color:#2A2A2A; }
main:has(.ik-intro) h3 { font-size:1.45rem; color:#2A2A2A; }
main:has(.ik-intro) p, main:has(.ik-intro) li { font-size:1.04rem; line-height:1.8; color:#2A2A2A; max-width:780px; }
.ik-eyebrow { display:block; color:#2A2A2A; font-weight:700; font-size:.74rem; line-height:1.8; letter-spacing:.13em; scroll-margin-top:30px; padding-top:44px; }
main:has(.ik-intro)>:first-child .ik-eyebrow { padding-top:0; }
.ik-intro { display:block; font-size:clamp(1.25rem,2.3vw,1.5rem); line-height:1.55; max-width:650px; color:#2A2A2A; }
main:has(.ik-intro) .btn { border-radius:4px; padding:14px 22px; margin-top:14px; color:#2A2A2A; border-color:#969D8A; background:transparent; }
main:has(.ik-intro) .btn.primary { background:#969D8A; border-color:#969D8A; color:#fff; }
main:has(.ik-intro) .btn:hover { box-shadow:none; background:#A6A9B8; }
main:has(.ik-intro) .btn.primary:hover { background:#A6A9B8; color:#fff; }
main:has(.ik-intro) a:focus-visible { outline:3px solid #2A2A2A; outline-offset:5px; }
main:has(.ik-intro) li { margin-bottom:12px; }
.ik-brand { color:#2A2A2A;  font-size:1.65rem; text-decoration:none; }
.ik-tagline { color:#2A2A2A; font-size:.85rem; margin:5px 0; letter-spacing:.025em; }
@media(max-width:640px) { main:has(.ik-intro) { padding:26px 20px; } main:has(.ik-intro) h1 { font-size:2.7rem!important; } }
/* Verbindliche Markenpalette: Off-White, Anthrazit, Salbei, Nebelblau */
body { background:#FAF8F3; color:#2A2A2A; }
main:has(.ik-intro) .btn.primary { background:#969D8A; border-color:#969D8A; color:#2A2A2A; }
main:has(.ik-intro) .btn.primary:hover, main:has(.ik-intro) .btn:hover { background:#A6A9B8; border-color:#A6A9B8; color:#2A2A2A; }
main:has(.ik-intro) .btn:not(.primary) { border-color:#2A2A2A; color:#2A2A2A; }
main:has(.ik-intro) a:not(.btn) { color:#2A2A2A; text-decoration:underline; text-decoration-color:#969D8A; text-decoration-thickness:2px; text-underline-offset:4px; }
.ik-brand, .ik-tagline, .card h3 a, .card h2 a, .panel h3, .panel h4, .faq-list summary, .quote-box p { color:#2A2A2A; }
.ik-values-line { color:#2A2A2A; border-left:4px solid #A6A9B8; padding:8px 0 8px 14px; margin:14px 0 0; font-size:.85rem; letter-spacing:.06em; }
::selection { background:#A6A9B8; color:#2A2A2A; }
/* Original typography and header navigation */
.ik-top-menu { display:flex; flex-wrap:wrap; gap:8px 24px; width:100%; margin-top:24px; padding:18px 0; border-top:1px solid #969D8A; border-bottom:1px solid #969D8A; }
.ik-top-menu a { color:#2A2A2A; text-decoration:none; padding:6px 0; font-size:1rem; }
.ik-top-menu a:hover { text-decoration:underline; text-decoration-color:#969D8A; text-underline-offset:6px; }
.ik-top-menu a:focus-visible { outline:2px solid #2A2A2A; outline-offset:4px; }
@media(max-width:600px) { .ik-top-menu { gap:6px 18px; } }
/* Erlenzapfen: responsive image in introduction */
main img[src='/media/2026/09/erlenzapfen-william-woods-1ef33412.jpg'] { display:block; width:100%; height:auto; border-radius:6px; }

/* Einheitliche serifenlose Schrift */
body, main, header, footer, h1, h2, h3, h4, h5, h6, p, li, a, button, .ik-brand, .ik-tagline, .ik-eyebrow { font-family: Roboto, Arial, sans-serif !important; }

/* Original logo above the existing navigation */
.ik-logo-header { width:100%; padding:18px 0 0; }
.ik-logo-link { display:block; width:min(100%, 900px); margin:0 auto; }
.ik-logo-image { display:block; width:100%; height:auto; aspect-ratio:3 / 1; object-fit:cover; object-position:center; border-radius:0; mix-blend-mode:multiply; }
.ik-logo-link:focus-visible { outline:2px solid #2A2A2A; outline-offset:5px; }
.ik-logo-header + .ik-top-menu { margin-top:16px; }
@media(max-width:600px) { .ik-logo-header { padding-top:8px; } }
/* User palette: Sage, Periwinkle, Creme Fraiche, Reseda, Blush */
:root { --ik-sage:#C0BFAC; --ik-periwinkle:#A6A9B8; --ik-cream:#FAF8F3; --ik-reseda:#969D8A; --ik-blush:#EDCCB4; }
body, main:has(.ik-intro) { background:#FAF8F3; color:#2A2A2A; }
.ik-top-menu { background:#C0BFAC; border-color:#969D8A; padding:14px 20px; box-sizing:border-box; border-radius:4px; }
.ik-top-menu a { color:#2A2A2A; border-radius:3px; padding:6px 8px; }
.ik-top-menu a:hover, .ik-top-menu a:focus-visible { background:#EDCCB4; color:#2A2A2A; text-decoration:none; }
main:has(.ik-intro) .ik-eyebrow { border-bottom:2px solid #C0BFAC; padding-bottom:8px; }
main:has(.ik-intro) #kontakt, main:has(.ik-intro) #kosten { border-bottom-color:#A6A9B8; }
main:has(.ik-intro) a:not(.btn):hover { background:#EDCCB4; }
main:has(.ik-intro) .btn.primary { background:#C0BFAC; border-color:#969D8A; color:#2A2A2A; }
main:has(.ik-intro) .btn.primary:hover { background:#EDCCB4; border-color:#EDCCB4; color:#2A2A2A; }
::selection { background:#A6A9B8; color:#2A2A2A; }