/* ═══ rhyn.digital Client Hub — Sales-Website ═══════════════════════════════
   Typografie und Bausteine von rhyn.digital übernommen (LouisGeorgeCafe +
   Instrument Serif als kursiver Akzent), eigene blaue Farbwelt.
   Alle Ressourcen liegen lokal — die CSP erlaubt nur 'self'.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Schriften (self-hosted) ─────────────────────────────────────────────── */
@font-face { font-family: 'LouisGeorgeCafe'; src: url('/site/fonts/LouisGeorgeCafe-Light.woff2') format('woff2'), url('/site/fonts/LouisGeorgeCafe-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'LouisGeorgeCafe'; src: url('/site/fonts/LouisGeorgeCafe.woff2') format('woff2'), url('/site/fonts/LouisGeorgeCafe.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'LouisGeorgeCafe'; src: url('/site/fonts/LouisGeorgeCafe-Italic.woff2') format('woff2'), url('/site/fonts/LouisGeorgeCafe-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'LouisGeorgeCafe'; src: url('/site/fonts/LouisGeorgeCafe-Bold.woff2') format('woff2'), url('/site/fonts/LouisGeorgeCafe-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('/site/fonts/InstrumentSerif-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('/site/fonts/InstrumentSerif-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  /* Farben — ruhiges Blau statt Schwarz/Weiss */
  --ink: #12233d;
  --ink-2: #3d5372;
  --muted: #7286a3;
  --line: #dde5f0;
  --bg: #ffffff;
  --bg-soft: #f4f8fd;
  --brand: #2f6feb;
  --brand-dark: #1c4bb5;
  --brand-deep: #14306e;
  --brand-soft: #eaf1fe;
  --accent: #0f9b8e;
  --danger: #d64545;

  /* Typografie (wie rhyn.digital) */
  --font-main: 'LouisGeorgeCafe', -apple-system, system-ui, sans-serif;
  --font-accent: 'Instrument Serif', Georgia, serif;

  --radius: 10px;
  --shadow: 0 1px 3px rgba(18, 35, 61, .05), 0 8px 26px rgba(18, 35, 61, .06);
  --shadow-lg: 0 16px 48px rgba(18, 35, 61, .16);
  --nav-h: 72px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-main);
  font-size: 17px; font-weight: 300; line-height: 1.68; -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.18; letter-spacing: -.015em; margin: 0 0 .5em; font-weight: 400; }
h1 { font-size: clamp(34px, 4.8vw, 56px); }
h2 { font-size: clamp(25px, 3vw, 36px); }
h3 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
strong, b { font-weight: 700; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; background: var(--bg-soft); padding: 1px 5px; border-radius: 4px; }

/* Kursiver Serif-Akzent — das Stilmittel von rhyn.digital */
.accent { font-family: var(--font-accent); font-style: italic; font-weight: 400; letter-spacing: 0; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.lead { font-size: 18px; color: var(--muted); max-width: 62ch; }
.section { padding: 84px 0; }
.section--soft { background: var(--bg-soft); border-block: 1px solid var(--line); }
.section__head { max-width: 700px; margin-bottom: 44px; }
.section__head--center { margin-inline: auto; text-align: center; }
.eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin-bottom: 10px; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 8px; border: 1px solid transparent;
  font-size: 14.5px; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary { background: var(--brand); color: #fff; box-shadow: 0 4px 14px rgba(47, 111, 235, .3); }
.btn--primary:hover { background: var(--brand-dark); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink-2); color: var(--ink); }
.btn--lg { padding: 14px 26px; font-size: 15.5px; }
.btn--nav { padding: 8px 16px; font-size: 13.5px; }

/* ── Scroll-Fortschritt + Navigation ─────────────────────────────────────── */
.progress-bar { position: fixed; inset: 0 0 auto 0; height: 3px; background: transparent; z-index: 60; }
.progress-bar__fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), var(--accent)); transition: width .08s linear; }

.navbar {
  position: sticky; top: 0; z-index: 50; height: var(--nav-h);
  background: rgba(255, 255, 255, .82); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
}
.navbar.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 2px 14px rgba(18, 35, 61, .06); }
.navbar__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--nav-h); gap: 20px; }
.navbar__actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.navbar__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; color: var(--ink); letter-spacing: -.02em; }
.navbar__brand:hover { text-decoration: none; }
.navbar__logo { height: 38px; width: auto; display: block; }
.navbar__dot { color: var(--brand); }
.navbar__nav { display: flex; align-items: center; justify-content: center; gap: 4px; }
.navbar__link { display: flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 6px; font-size: 14.5px; font-weight: 400; color: var(--ink-2); }
.navbar__link:hover { background: var(--brand-soft); color: var(--brand-dark); text-decoration: none; }
.navbar__link.is-active { color: var(--brand); font-weight: 700; }
/* „Start" trägt auf dem Desktop nur das Haus-Icon, im mobilen Menü zusätzlich das Wort. */
.navbar__link--home { padding: 7px 9px; }
.navbar__link-label { display: none; }
.navbar__burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 8px; cursor: pointer; }
.navbar__burger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
.navbar__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__burger.is-open span:nth-child(2) { opacity: 0; }
.navbar__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { position: relative; padding: 96px 0 84px; overflow: hidden; background: linear-gradient(180deg, var(--brand-soft), #fff 70%); }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; pointer-events: none; }
.hero__inner { position: relative; z-index: 1; max-width: 780px; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; margin-bottom: 22px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); box-shadow: var(--shadow);
}
.hero__badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.hero h1 .accent { color: var(--brand); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__stats { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 56px; }
.hero__stat-value { font-size: 32px; font-weight: 700; color: var(--ink); letter-spacing: -.03em; }
.hero__stat-label { font-size: 13px; color: var(--muted); }

/* ── Karten / Raster ─────────────────────────────────────────────────────── */
.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card--hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: #dbe6f6; }
/* Ganze Karten sind manchmal in ein <a> gewickelt (Cases-Teaser). Die
   globale a:hover-Regel unterstrich dann den kompletten Kartentext. */
a.card:hover, a.card:hover * { text-decoration: none; }
/* Neige-Effekt (JS setzt die 3D-Transform inline). */
.tilt { transform-style: preserve-3d; will-change: transform; }
.tilt:hover { box-shadow: var(--shadow-lg); border-color: #dbe6f6; }
/* Icons: einfarbig im Markenblau, flach, ohne Füllung. */
.card__icon { display: block; line-height: 0; margin-bottom: 14px; color: var(--brand); }
.card__icon .icon { display: block; }
.icon { color: var(--brand); }
.card p { color: var(--muted); font-size: 14.5px; margin: 0; }
.card h3 { margin-bottom: 6px; }

/* ── Modul-Karten ────────────────────────────────────────────────────────── */
.mod-group { margin-bottom: 46px; }
.mod-group__title { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.mod-group__title h2 { font-size: 21px; margin: 0; }
.mod-group__count { font-size: 12.5px; color: var(--muted); }
.mod-card { display: flex; flex-direction: column; }
.mod-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.mod-card__ver {
  flex-shrink: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 600;
  color: var(--brand-dark); background: var(--brand-soft); border: 1px solid #c3d7fb; border-radius: 999px; padding: 2px 9px;
}
.mod-card__desc { color: var(--ink-2); font-size: 14.5px; margin: 0 0 14px; }
.mod-card__benefit { background: var(--bg-soft); border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; padding: 10px 14px; margin-bottom: 14px; }
.mod-card__benefit strong { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--accent); margin-bottom: 3px; }
.mod-card__benefit p { font-size: 14px; color: var(--ink-2); margin: 0; }
.mod-card__links { margin-top: auto; }
.mod-card__links > strong { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 7px; }
.mod-link { display: block; font-size: 13.5px; color: var(--muted); padding: 6px 0; border-top: 1px solid var(--line); }
.mod-link b { display: block; color: var(--ink-2); font-weight: 600; margin-bottom: 1px; }
.mod-card__price { display: flex; align-items: baseline; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.mod-card__price .amount { font-size: 19px; font-weight: 700; }
.mod-card__price .per { font-size: 12.5px; color: var(--muted); }

/* ── Preise ──────────────────────────────────────────────────────────────── */
.price-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.price-table th, .price-table td { padding: 13px 16px; text-align: left; font-size: 14.5px; border-top: 1px solid var(--line); }
.price-table thead th { background: var(--bg-soft); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-top: none; }
.price-table td.num, .price-table th.num { text-align: right; white-space: nowrap; }
.price-table tbody tr:hover { background: var(--brand-soft); }
.price-table .group-row td { background: var(--bg-soft); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.price-sum { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 16px 0 0; }
.price-sum__label { font-size: 14px; color: var(--muted); }
.price-sum__value { font-size: 26px; font-weight: 700; }
.price-note { font-size: 12.5px; color: var(--muted); margin-top: 12px; }

/* ── Funktionsweise: Prozess + Schaubild ─────────────────────────────────── */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 40px 0; }
.process-step { position: relative; padding: 0 18px; opacity: .45; transition: opacity .35s ease; }
.process-step.active { opacity: 1; }
.process-step__num {
  width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: var(--muted);
  margin-bottom: 14px; transition: border-color .3s, color .3s, background .3s;
}
.process-step.active .process-step__num { background: var(--brand); border-color: var(--brand); color: #fff; }
/* Verbindungslinie: vom rechten Rand des eigenen Kreises bis zum linken Rand
   des naechsten. Der Kreis ist 38px breit und sitzt hinter 18px Innenabstand,
   liegt also bei 18..56px. Vorher lief die Linie von 0 bis zur halben
   Spaltenbreite — sie begann und endete daher irgendwo im Leeren statt an den
   Kreisen, was als Luecke sichtbar war. */
.process-step::before {
  content: ''; position: absolute; top: 18px; left: 56px; right: -18px; height: 2px;
  background: var(--line);
}
.process-step:last-child::before { display: none; }
.process-step h3 { font-size: 15px; margin-bottom: 5px; }
.process-step p { font-size: 13.5px; color: var(--muted); margin: 0; }

.diagram { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.diagram + .diagram { margin-top: 24px; }
.diagram__caption { font-size: 13px; color: var(--muted); margin: 16px 0 0; text-align: center; }
.diagram svg { display: block; width: 100%; height: auto; }
.dg-box { fill: #fff; stroke: var(--line); stroke-width: 1.5; }
.dg-box--brand { fill: var(--brand-soft); stroke: #a7c4f7; }
.dg-box--core { fill: #0f172a; stroke: #0f172a; }
.dg-label { font: 600 12px -apple-system, "Segoe UI", sans-serif; fill: var(--ink); }
.dg-label--light { fill: #fff; }
.dg-sub { font: 400 10.5px -apple-system, "Segoe UI", sans-serif; fill: var(--muted); }
.dg-line { stroke: #94a3b8; stroke-width: 1.5; fill: none; }
.dg-line--dash { stroke-dasharray: 4 4; }
.dg-flow { stroke: var(--brand); stroke-width: 2; fill: none; stroke-dasharray: 6 5; animation: dash 1.4s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -22; } }

/* ── Cases ───────────────────────────────────────────────────────────────── */
.case { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.case + .case { margin-top: 26px; }
.case__head { padding: 26px 28px 0; }
.case__branche { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.case__body { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; padding: 8px 28px 26px; }
.case__block h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 6px; }
.case__block p { font-size: 14.5px; color: var(--ink-2); margin: 0; }
.case__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tag { font-size: 11.5px; font-weight: 600; color: var(--brand-dark); background: var(--brand-soft); border: 1px solid #c3d7fb; border-radius: 999px; padding: 3px 10px; }
.case__results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.case__result { background: var(--bg-soft); padding: 18px 24px; text-align: center; }
.case__result-value { font-size: 21px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.case__result-label { font-size: 12.5px; color: var(--muted); }

/* ── Störer ──────────────────────────────────────────────────────────────── */
.stoerer--band { background: linear-gradient(135deg, var(--brand-dark), var(--brand-deep)); color: #fff; padding: 56px 0; }
.stoerer__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.stoerer--band h2 { color: #fff; margin-bottom: 6px; }
.stoerer--band p { color: rgba(255, 255, 255, .78); margin: 0; max-width: 56ch; }
.stoerer__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.stoerer--band .btn--primary { background: #fff; color: var(--brand-dark); box-shadow: none; }
.stoerer--band .btn--primary:hover { background: var(--brand-soft); color: var(--brand-dark); }
.stoerer--band .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .38); }
.stoerer--band .btn--ghost:hover { border-color: #fff; color: #fff; }
.stoerer--inline {
  display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
  background: var(--brand-soft); border: 1px solid #c3d7fb; border-radius: var(--radius); padding: 20px 24px; margin: 40px 0;
}
.stoerer--inline strong { font-size: 16px; }
.stoerer--inline p { font-size: 14px; color: var(--ink-2); margin: 2px 0 0; }

/* ── Formulare ───────────────────────────────────────────────────────────── */
.form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px;
  font: inherit; font-size: 14.5px; color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(47, 111, 235, .14);
}
.field textarea { resize: vertical; min-height: 130px; }
.field__hint { font-size: 12px; color: var(--muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Modul-Auswahl: Kaestchen und Beschriftung dicht beieinander, die Felder
   wachsen mit dem Text statt auf eine feste Rasterbreite. */
.checks { display: flex; flex-wrap: wrap; gap: 6px; }
.check { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; line-height: 1.3; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.check > span { display: inline-block; }
.check:hover { border-color: #b7c6de; }
.check:has(input:checked) { background: #f0fdf4; border-color: #86efac; }

/* Ankreuz- und Auswahlfelder sind keine Textfelder. Die Regel weiter oben
   (.field input { width:100%; padding:10px 12px; border:… }) galt auch für sie
   und blies das Kaestchen auf volle Feldbreite auf — die Beschriftung wurde
   dadurch aus der Pille herausgeschoben. */
.field input[type="checkbox"],
.field input[type="radio"],
.check input[type="checkbox"],
.check input[type="radio"] {
  width: 15px; height: 15px; min-width: 0; max-width: none;
  flex: 0 0 auto;
  padding: 0; margin: 0;
  border: none; border-radius: 0; box-shadow: none;
  accent-color: var(--brand);
  cursor: pointer;
}
.field input[type="checkbox"]:focus,
.check input[type="checkbox"]:focus { outline: 2px solid var(--brand); outline-offset: 1px; box-shadow: none; }
.form__msg { display: none; padding: 12px 16px; border-radius: 8px; font-size: 14px; margin-bottom: 18px; }
.form__msg.is-ok { display: block; background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.form__msg.is-err { display: block; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.form__progress { height: 4px; background: var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 20px; }
.form__progress-fill { height: 100%; width: 0; background: var(--accent); transition: width .3s ease; }

/* ── Kontakt-Seitenspalte ────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: start; }
.contact-aside .card + .card { margin-top: 16px; }
.contact-aside dl { margin: 0; }
.contact-aside dt { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 12px; }
.contact-aside dt:first-child { margin-top: 0; }
.contact-aside dd { margin: 2px 0 0; font-size: 14.5px; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq-item { border: 1px solid var(--line); border-radius: 8px; background: #fff; margin-bottom: 10px; }
.faq-item__question { padding: 15px 18px; font-weight: 600; font-size: 15px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question::after { content: '+'; color: var(--brand); font-size: 20px; line-height: 1; }
.faq-item[open] .faq-item__question::after { content: '−'; }
.faq-item__answer { padding: 0 18px 16px; color: var(--muted); font-size: 14.5px; }

/* ── Sticky CTA ──────────────────────────────────────────────────────────── */
.sticky-cta {
  position: fixed; right: 22px; bottom: 22px; z-index: 40;
  background: var(--brand); color: #fff; padding: 12px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 600; box-shadow: 0 8px 26px rgba(47, 111, 235, .36);
  opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s, transform .25s, visibility .25s;
}
.sticky-cta.is-visible { opacity: 1; visibility: visible; transform: none; }
.sticky-cta:hover { background: var(--brand-dark); color: #fff; text-decoration: none; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer { background: var(--brand-deep); color: #b7c6de; padding: 56px 0 24px; margin-top: 0; }
.footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 34px; }
.footer__brand { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.footer__logo { height: 34px; width: auto; display: block; }
.footer__claim { font-size: 14px; max-width: 34ch; margin: 0; }
.footer__col h3 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: #dbe6f6; margin-bottom: 12px; }
.footer__col a, .footer__link-btn { display: block; color: #b7c6de; font-size: 14px; padding: 3px 0; background: none; border: none; text-align: left; cursor: pointer; font: inherit; font-size: 14px; }
.footer__col a:hover, .footer__link-btn:hover { color: #fff; text-decoration: none; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; }
.footer__admin { color: #8fa5c4; }

/* ── Modals ──────────────────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; background: rgba(18, 35, 61, .55); overflow: auto; }
.modal[hidden] { display: none; }
.modal__box { background: #fff; border-radius: 12px; max-width: 720px; width: 100%; box-shadow: var(--shadow-lg); animation: pop .18s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(10px); } }
.modal__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 26px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; border-radius: 12px 12px 0 0; }
.modal__head h2 { font-size: 19px; margin: 0; }
.modal__close { background: none; border: none; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; }
.modal__close:hover { color: var(--ink); }
.modal__body { padding: 22px 26px 28px; font-size: 14.5px; color: var(--ink-2); }
.modal__body h3 { font-size: 14px; margin: 22px 0 4px; color: var(--ink); }
.modal__body h3:first-child { margin-top: 0; }
.modal__note { font-size: 13px; color: var(--muted); margin-top: 20px; }
.link-btn { background: none; border: none; padding: 0; font: inherit; color: var(--brand); cursor: pointer; text-decoration: underline; }
.cookie-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 15px 0; border-top: 1px solid var(--line); }
.cookie-row p { font-size: 13.5px; color: var(--muted); margin: 3px 0 0; }
.cookie-state { flex-shrink: 0; font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; }
.cookie-state--on { color: #166534; background: #f0fdf4; border-color: #86efac; }

/* ── Reveal-Animation ─────────────────────────────────────────────────────
   Nur wenn JS läuft, wird überhaupt versteckt (.has-js kommt aus site.js).
   Ohne JS oder bei einem Fehler bleibt der Inhalt sichtbar. */
.has-js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.has-js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ── Responsiv ───────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .process-step::before { display: none; }
  .contact-grid, .case__body { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .navbar__inner { grid-template-columns: auto 1fr; }
  .navbar__nav {
    position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 2px;
    background: #fff; border-bottom: 1px solid var(--line); padding: 14px 20px 20px;
    transform: translateY(-120%); transition: transform .25s ease; box-shadow: var(--shadow);
  }
  .navbar__nav.is-open { transform: none; }
  .navbar__burger { display: flex; }
  .navbar__link-label { display: inline; }
  .navbar__link--home { padding: 7px 11px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .section { padding: 60px 0; }
  .hero { padding: 64px 0 56px; }
  .hero__stats { gap: 26px; }
  .case__results { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
  .sticky-cta { right: 14px; bottom: 14px; }
}


/* ─── Jahresabo-Rabatt (Preisseite) ─────────────────────────────────────────── */
.yearly {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 18px; padding: 16px 20px;
  background: #f0fdf4; border: 1px solid #86efac; border-radius: var(--radius);
}
.yearly__badge {
  flex-shrink: 0; background: #16a34a; color: #fff; font-weight: 700; font-size: 15px;
  padding: 8px 12px; border-radius: 8px; letter-spacing: -.01em;
}
.yearly__body { flex: 1 1 260px; min-width: 0; }
.yearly__title { font-size: 14.5px; font-weight: 700; color: #14532d; }
.yearly__sub { font-size: 12.5px; color: #3f6b4d; margin-top: 3px; line-height: 1.5; }
.yearly__prices { text-align: right; flex-shrink: 0; }
.yearly__strike { font-size: 13px; color: #6b8f78; text-decoration: line-through; }
.yearly__now { font-size: 22px; font-weight: 700; color: #14532d; line-height: 1.2; }
.yearly__save { font-size: 12px; color: #3f6b4d; margin-top: 2px; }
@media (max-width: 620px) {
  .yearly { gap: 12px; }
  .yearly__prices { text-align: left; }
}

/* ─── Rechen-Captcha im Formular ────────────────────────────────────────────── */
.captcha input[type="number"] { max-width: 200px; }