/* ══════════════════════════════════════════════
   THEME 2026 – Petrol & Mint
   Wird nach den seiteneigenen Styles geladen und
   überschreibt nur die Optik (Tokens, Schrift, Details).
   ══════════════════════════════════════════════ */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal; font-display: swap; font-weight: 200 800;
  src: url('/fonts/PlusJakartaSans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal; font-display: swap; font-weight: 200 800;
  src: url('/fonts/PlusJakartaSans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  --mint:      #6EE7B7;
  --mint-soft: #B8F0D8;
  --f-body:    'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --f-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --sh-xs: 0 1px 2px rgba(11,42,42,.04), 0 1px 4px rgba(11,42,42,.04);
  --sh-sm: 0 2px 6px rgba(11,42,42,.04), 0 8px 24px rgba(11,42,42,.05);
  --sh-md: 0 4px 12px rgba(11,42,42,.05), 0 20px 48px rgba(11,42,42,.08);
}

body { text-rendering: optimizeLegibility; }
::selection { background: var(--mint-soft); color: var(--text); }

/* ── Überschriften: moderne Grotesk statt Serif ── */
h1, h2, .sec-title, .stat-val, .why-free h3, .why-free-badge .val,
.sr-input-value, .sr-saving-big {
  font-weight: 800;
  letter-spacing: -.035em;
}
h3[style*="f-display"] { font-weight: 700; letter-spacing: -.02em; }
.hero h1, .page-hero h1 { line-height: 1.04; letter-spacing: -.04em; }
h1 em, h2 em, .sec-title em, .hero h1 em, .page-hero h1 em {
  font-style: normal;
  color: var(--green-dk);
  background: linear-gradient(transparent 64%, var(--mint-soft) 64%, var(--mint-soft) 92%, transparent 92%);
  padding: 0 .04em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.stat-val { letter-spacing: -.04em; }

/* ── Kopfzeile & Logo ── */
.brand-mark img { border-radius: 0; }
.brand-name { letter-spacing: -.025em; }
.nav a { font-weight: 600; }
.nav a:hover { background: rgba(14,107,99,.08); color: var(--green-dk); }
.nav .cta { background: var(--green-dk); box-shadow: 0 6px 18px rgba(14,107,99,.25); }
.nav .cta:hover { background: #0A544E !important; }

.footer-logo-mark { background: transparent !important; padding: 0 !important; border-radius: 0 !important; }

/* ── Buttons: ruhiger, weniger „Bonbon“ ── */
.btn { border-radius: 14px; font-weight: 700; letter-spacing: -.005em; }
.btn-primary { background: var(--green-dk); box-shadow: 0 8px 22px rgba(14,107,99,.26); }
.btn-primary:hover { background: #0A544E; box-shadow: 0 12px 28px rgba(14,107,99,.32); }
.btn-ghost:hover { border-color: var(--green-dk); background: #fff; }
.sticky-cta a { background: var(--green-dk); border-radius: 16px; }

/* ── Karten: feinere Kanten, kein Verlaufsbalken ── */
.stat-card::before, .ka-card::before { display: none; }
.stat-card.large {
  background: linear-gradient(150deg, #0A3431 0%, #0E4A45 100%);
  border-color: transparent;
}
.stat-card.large .stat-val { color: var(--mint); }
.stat-card.large .stat-lbl { color: rgba(255,255,255,.72); }

/* ── Labels ── */
.sec-label { font-weight: 700; letter-spacing: .12em; }
.sec-label::before { background: var(--mint); height: 3px; width: 16px; }

/* ── Dunkle Flächen: Mint als Akzent ── */
.leistungen-band .badge svg { color: var(--mint); }
.badge:hover { background: rgba(110,231,183,.14); border-color: rgba(110,231,183,.4); }
.why-free-badge .val { color: var(--mint); }
.footer-links a:hover { color: var(--mint); }

/* ── Schritte & FAQ ── */
.step-num { background: var(--green-dk); color: #fff; border-radius: 10px; }
.faq-item[open] summary { background: #EAF5F2; }
.strip-step.done .strip-dot { background: var(--green-dk); border-color: var(--green-dk); }

/* ── Tabellen-Highlight ── */
.st-cell.highlight { color: var(--green-dk); }

@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; }
}

/* ══════════════════════════════════════════════
   COOKIEBOT – an das Design angepasst
   (Farben im Cookiebot-Konto bleiben unberührt,
   die Optik wird hier überschrieben)
   ══════════════════════════════════════════════ */
#CybotCookiebotDialog, #CybotCookiebotDialog * {
  font-family: var(--f-body) !important;
}
#CybotCookiebotDialog {
  border-radius: var(--r-lg) !important;
  box-shadow: 0 24px 64px rgba(11,42,42,.22) !important;
  color: var(--text) !important;
}
#CybotCookiebotDialogBodyContentTitle {
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}
#CybotCookiebotDialog .CybotCookiebotDialogBodyButton {
  border-radius: 12px !important;
  font-weight: 700 !important;
}
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
  background: var(--green-dk) !important;
  border-color: var(--green-dk) !important;
  color: #fff !important;
}
#CybotCookiebotDialogBodyButtonDecline,
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection {
  background: #fff !important;
  color: var(--text) !important;
  border: 1.5px solid rgba(11,42,42,.18) !important;
}
#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSlider { background-color: #C4D3D0 !important; }
#CybotCookiebotDialog input:checked + .CybotCookiebotDialogBodyLevelButtonSlider { background-color: var(--green-dk) !important; }
#CybotCookiebotDialog a,
#CybotCookiebotDialogBodyEdgeMoreDetailsLink { color: var(--green-dk) !important; }
#CybotCookiebotDialogNav .CybotCookiebotDialogActive {
  border-bottom-color: var(--green-dk) !important;
  color: var(--green-dk) !important;
}
/* Logo im Banner: neues Markenzeichen statt des im Konto hinterlegten */
#CybotCookiebotDialogHeaderLogosWrapper img,
#CybotCookiebotDialogLogo {
  content: url('/logo.svg') !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 0 !important;
}