/*
  KitaLotse Homepage — Stylesheet
  Design-Tokens aus /DESIGN.md gespiegelt (eigene Kopie, damit die Homepage
  unabhängig von web/ bleibt). Schriften selbst gehostet (kein Google-Fonts-CDN,
  DSGVO) via assets/fonts/. Keine externen Requests von dieser Seite.
*/

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/baloo-2-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/baloo-2-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/baloo-2-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/baloo-2-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/nunito-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/nunito-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/nunito-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/nunito-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/nunito-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/nunito-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  --kl-primary: #16436b;
  --kl-primary-hover: #1d5488;
  --kl-on-primary: #ffffff;
  --kl-accent: #f5b32f;
  --kl-accent-hover: #e3a01a;
  --kl-on-accent: #3a2c05;

  --kl-bg: #f7f5f0;
  --kl-surface: #ffffff;
  --kl-surface-2: #efeae0;
  --kl-border: #dcd5c8;
  --kl-text: #1e2a36;
  --kl-text-muted: #5a6b7c;

  --kl-status-present: #1e7b4f;
  --kl-status-excused: #3667c4;
  --kl-status-sick: #c2571b;
  --kl-status-vacation: #7a4fb5;
  --kl-status-unexcused: #c0332b;
  --kl-danger: #c0332b;

  --kl-shadow-1: 0 1px 3px rgb(20 35 50 / 0.08), 0 2px 8px rgb(20 35 50 / 0.06);
  --kl-shadow-2: 0 4px 12px rgb(20 35 50 / 0.14), 0 12px 32px rgb(20 35 50 / 0.12);
  --kl-radius-card: 16px;
  --kl-radius-control: 12px;
  --kl-radius-tile: 20px;
  --kl-radius-chip: 999px;

  /* Fixes Marineblau für großflächige "Trust-Band"-Hintergründe (Sektionen,
     Hover-Footer). Bewusst NICHT im Dark-Mode-Block unten überschrieben:
     --kl-primary wechselt dort zu Hellblau (richtig für Buttons/Links/Fokus
     auf dunklem Grund), aber ein ganzflächiger Block in dieser Farbe würde
     im Dark Mode grell neben den ohnehin dunklen Flächen wirken statt ruhig
     dunkel zu bleiben. */
  --kl-navy-solid: #16436b;
  --kl-on-navy-solid: #ffffff;

  --kl-font-heading: "Baloo 2", "Nunito", system-ui, sans-serif;
  --kl-font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  --kl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --kl-dur: 200ms;
  --kl-maxw: 1200px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --kl-primary: #7fb2e5;
    --kl-primary-hover: #9cc4ee;
    --kl-on-primary: #0b2540;
    --kl-accent: #f5b32f;
    --kl-on-accent: #3a2c05;

    --kl-bg: #101922;
    --kl-surface: #1a2633;
    --kl-surface-2: #233242;
    --kl-border: #33465a;
    --kl-text: #e8edf2;
    --kl-text-muted: #9fb0c0;

    --kl-shadow-1: 0 1px 3px rgb(0 0 0 / 0.4), 0 2px 8px rgb(0 0 0 / 0.3);
    --kl-shadow-2: 0 4px 12px rgb(0 0 0 / 0.5), 0 12px 32px rgb(0 0 0 / 0.4);
  }
}

/* ---------- Reset & Basics ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--kl-bg);
  color: var(--kl-text);
  font-family: var(--kl-font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--kl-font-heading);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.5em;
  color: var(--kl-text);
}
h1 { font-size: clamp(2rem, 1.6rem + 1.8vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2.25rem); }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; font-weight: 600; }

p { margin: 0 0 1em; color: var(--kl-text); }
.lead { font-size: 1.125rem; color: var(--kl-text-muted); }

a { color: var(--kl-primary); text-decoration-thickness: 1.5px; }
a:hover { color: var(--kl-primary-hover); }

ul { padding-left: 1.25em; }
li { margin-bottom: 0.4em; }

:focus-visible {
  outline: 3px solid var(--kl-accent);
  outline-offset: 2px;
}

.container {
  max-width: var(--kl-maxw);
  margin-inline: auto;
  padding-inline: 24px;
}
.container-narrow { max-width: 760px; }

/* Rechtstexte (Datenschutz/Impressum): etwas knapperer Sektionsabstand als
   der Standard, da der Inhalt selbst schon viel vertikalen Raum braucht. */
.section-legal { padding-block: 48px; }

/* Wrapper für FAQ-Listen, etwas schmaler als der volle Container für
   bessere Lesbarkeit der Fragen/Antworten. */
.faq-list { max-width: 760px; margin-inline: auto; }

section { padding-block: 64px; }
@media (max-width: 640px) {
  section { padding-block: 40px; }
}

.section-head {
  max-width: 720px;
  margin-bottom: 40px;
}
.section-head.center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-block;
  font-family: var(--kl-font-heading);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kl-primary);
  background: color-mix(in srgb, var(--kl-primary) 12%, transparent);
  padding: 6px 14px;
  border-radius: var(--kl-radius-chip);
  margin-bottom: 12px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--kl-font-heading);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border-radius: var(--kl-radius-control);
  padding: 13px 24px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--kl-dur) var(--kl-ease-out), background var(--kl-dur) var(--kl-ease-out), border-color var(--kl-dur) var(--kl-ease-out);
  min-height: 48px;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--kl-primary); color: var(--kl-on-primary); }
.btn-primary:hover { background: var(--kl-primary-hover); color: var(--kl-on-primary); }

.btn-accent { background: var(--kl-accent); color: var(--kl-on-accent); }
.btn-accent:hover { background: var(--kl-accent-hover); color: var(--kl-on-accent); }

.btn-ghost { background: transparent; color: var(--kl-text); border-color: var(--kl-border); }
.btn-ghost:hover { border-color: var(--kl-primary); color: var(--kl-primary); }

/* Ghost-Button auf farbigem Hintergrund (z. B. .section-primary): eigene
   Rest-/Hover-Farben statt der Standard-.btn-ghost-Regel, deren Hover-Textfarbe
   (--kl-primary) sonst exakt mit dem --kl-primary-Sektionshintergrund
   verschmilzt und den Button unsichtbar macht. */
.btn-ghost-on-primary { border-color: rgb(255 255 255 / 0.4); color: var(--kl-on-navy-solid); }
.btn-ghost-on-primary:hover { border-color: var(--kl-on-navy-solid); color: var(--kl-on-navy-solid); background: rgb(255 255 255 / 0.12); }

.btn-sm { padding: 9px 16px; font-size: 0.9375rem; min-height: 40px; }
.btn-block { width: 100%; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cta-row.center { justify-content: center; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--kl-surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--kl-border);
}
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--kl-font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--kl-text);
  text-decoration: none;
}
.brand img { width: 36px; height: 36px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--kl-radius-control);
  color: var(--kl-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
}
.nav-links a:hover { background: var(--kl-surface-2); color: var(--kl-primary); }
.nav-links a[aria-current="page"] { color: var(--kl-primary); background: color-mix(in srgb, var(--kl-primary) 10%, transparent); }

.nav-actions { display: flex; align-items: center; gap: 8px; }

.nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--kl-border);
  border-radius: var(--kl-radius-control);
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; stroke: var(--kl-text); }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--kl-surface);
    border-bottom: 1px solid var(--kl-border);
    box-shadow: var(--kl-shadow-2);
    padding: 8px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 16px; }
  .nav-actions .btn-ghost { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  padding-block: 72px 56px;
  background:
    radial-gradient(60% 90% at 85% 0%, color-mix(in srgb, var(--kl-accent) 16%, transparent), transparent 70%),
    var(--kl-bg);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  perspective: 1400px;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}
.hero-art {
  background: var(--kl-surface);
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-radius-card);
  box-shadow: var(--kl-shadow-2);
  padding: 24px;
}

/* Dashboard-Mockup im hero-art: die verschachtelte .card soll nicht noch
   einen zweiten Rahmen/Schatten/Innenabstand obendrauf bekommen — hero-art
   liefert das schon. */
.hero-art .card { box-shadow: none; border: none; padding: 0; }
/* Card ist rein dekorativ (aria-hidden) — die generische .card:hover-Regel
   (Anheben + Schatten) soll hier nicht greifen, sonst "springt" beim Hover
   plötzlich ein Rahmen/Schatten in die schwebende Animation hinein. */
.hero-art .card:hover { transform: none; box-shadow: none; }
.hero-art .eyebrow { margin-bottom: 16px; }
.hero-art .grid-2 { gap: 12px; margin-bottom: 16px; }
.hero-stat {
  background: var(--kl-surface-2);
  border-radius: var(--kl-radius-control);
  padding: 14px;
}
.feed-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.feed-item {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--kl-border);
  padding-bottom: 10px;
}
.feed-item:last-child { border-bottom: none; padding-bottom: 0; }

/* Kompakte Hero-Variante für Unterseiten (statt der großen zweispaltigen
   Startseiten-Hero) */
.hero-sub { padding-block: 56px 40px; }
.hero-sub-tight { padding-block: 56px 32px; }
.hero-sub .lead { max-width: 64ch; }

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--kl-border);
}
.trust-strip .item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--kl-text-muted);
}
.trust-strip svg { width: 18px; height: 18px; stroke: var(--kl-status-present); flex-shrink: 0; }

/* ---------- Cards / Grid ---------- */
.grid {
  display: grid;
  gap: 24px;
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--kl-surface);
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-radius-card);
  box-shadow: var(--kl-shadow-1);
  padding: 28px;
}
.card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--kl-radius-control);
  background: color-mix(in srgb, var(--kl-primary) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.card-icon svg { width: 26px; height: 26px; stroke: var(--kl-primary); }
.card h3 { margin-bottom: 8px; }
.card p:last-child { margin-bottom: 0; }
.card .tag + h3 { margin-top: 10px; }
.card .badge + h4 { margin-top: 12px; }
.contact-grid { align-items: start; }

.card-icon.accent { background: color-mix(in srgb, var(--kl-accent) 22%, transparent); }
.card-icon.accent svg { stroke: var(--kl-on-accent); }

/* ---------- Zielgruppen-Teaser ---------- */
.audience-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.audience-card .btn { margin-top: auto; align-self: flex-start; }

/* ---------- Sections mit Hintergrundfläche ---------- */
.section-surface { background: var(--kl-surface); border-block: 1px solid var(--kl-border); }
.section-primary {
  background: var(--kl-navy-solid);
  color: var(--kl-on-navy-solid);
}
.section-primary h2, .section-primary p, .section-primary .eyebrow { color: var(--kl-on-navy-solid); }
.section-primary .eyebrow { background: rgb(255 255 255 / 0.16); }
.section-primary .grid-2 { align-items: center; gap: 48px; }

/* ---------- Tabellen (Editionen / Preise) ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--kl-radius-card); border: 1px solid var(--kl-border); background: var(--kl-surface); }
table.compare { width: 100%; border-collapse: collapse; min-width: 640px; }
table.compare th, table.compare td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--kl-border);
  font-size: 0.9375rem;
}
table.compare thead th {
  font-family: var(--kl-font-heading);
  background: var(--kl-surface-2);
  position: sticky;
  top: 0;
}
table.compare td:not(:first-child), table.compare th:not(:first-child) { text-align: center; }
table.compare tbody tr:last-child td { border-bottom: none; }
table.compare .yes { color: var(--kl-status-present); font-weight: 700; }
table.compare .cat-row td {
  background: color-mix(in srgb, var(--kl-primary) 6%, transparent);
  font-family: var(--kl-font-heading);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--kl-primary);
}

/* ---------- Pricing ---------- */
.price-card {
  background: var(--kl-surface);
  border: 2px solid var(--kl-border);
  border-radius: var(--kl-radius-card);
  padding: 32px 28px;
  box-shadow: var(--kl-shadow-1);
  display: flex;
  flex-direction: column;
}
.price-card .eyebrow { align-self: flex-start; }
.price-card .lead { margin-bottom: 0; }
.price-card.featured, .price-card.featured-offer { border-color: var(--kl-accent); box-shadow: var(--kl-shadow-2); position: relative; }
.price-card.featured::before {
  content: "Beispiel";
  position: absolute;
  top: -14px;
  left: 28px;
  background: var(--kl-accent);
  color: var(--kl-on-accent);
  font-family: var(--kl-font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 4px 12px;
  border-radius: var(--kl-radius-chip);
}
.price-card .amount { font-family: var(--kl-font-heading); font-weight: 700; font-size: 2.25rem; margin: 12px 0 4px; }
.price-card .amount small { font-family: var(--kl-font-body); font-weight: 600; font-size: 0.95rem; color: var(--kl-text-muted); }
.price-card ul { list-style: none; padding: 0; margin: 20px 0; }
.price-card li { display: flex; gap: 10px; align-items: flex-start; }
.price-card li svg { width: 18px; height: 18px; stroke: var(--kl-status-present); flex-shrink: 0; margin-top: 2px; }
.price-card .badge { margin-bottom: 4px; }
.price-lines { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 4px; }
.price-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.price-line .price-line-label { color: var(--kl-text-muted); font-size: 0.875rem; }
.price-line .price-strike { text-decoration: line-through; color: var(--kl-text-muted); font-size: 0.8125rem; margin-right: 6px; white-space: nowrap; }
.price-line .price-now { font-family: var(--kl-font-heading); font-weight: 700; font-size: 1.0625rem; white-space: nowrap; }
.price-card .contract-note { font-size: 0.8125rem; color: var(--kl-text-muted); margin: 4px 0 20px; }

.placeholder-banner {
  background: color-mix(in srgb, var(--kl-status-sick) 12%, transparent);
  border: 1px solid var(--kl-status-sick);
  color: var(--kl-text);
  border-radius: var(--kl-radius-control);
  padding: 16px 20px;
  margin-bottom: 32px;
  font-size: 0.9375rem;
}
.placeholder-banner strong { color: var(--kl-status-sick); }

/* ---------- FAQ ---------- */
.faq-item {
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-radius-control);
  background: var(--kl-surface);
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 20px;
  font-family: var(--kl-font-heading);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chevron { width: 20px; height: 20px; stroke: var(--kl-text-muted); transition: transform var(--kl-dur) var(--kl-ease-out); flex-shrink: 0; }
.faq-item[open] summary .chevron { transform: rotate(180deg); }
.faq-item .faq-body { padding: 0 20px 20px; color: var(--kl-text-muted); }

/* ---------- Formulare ---------- */
.form-grid { display: grid; gap: 20px; max-width: 640px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; font-size: 0.9375rem; }
.field input, .field select, .field textarea {
  font-family: var(--kl-font-body);
  font-size: 1rem;
  padding: 12px 14px;
  border: 1.5px solid var(--kl-border);
  border-radius: var(--kl-radius-control);
  background: var(--kl-surface);
  color: var(--kl-text);
  min-height: 48px;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--kl-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kl-primary) 20%, transparent);
}
.field-hint { font-size: 0.8125rem; color: var(--kl-text-muted); }
.btn + .field-hint { margin-top: 10px; }
.form-note { font-size: 0.875rem; color: var(--kl-text-muted); margin-top: 12px; }
.form-status { font-size: 0.875rem; margin-top: 12px; }
.form-status.is-error { color: var(--kl-status-sick); }
.form-status.is-success { color: var(--kl-status-present); }
.field-honeypot { position: absolute; left: -9999px; top: -9999px; }

/* ---------- Timeline (Aktuelles) ---------- */
.timeline { display: flex; flex-direction: column; gap: 24px; max-width: 800px; }
.timeline-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 20px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--kl-border);
}
.timeline-item:last-child { border-bottom: none; }
.timeline-item time { font-family: var(--kl-font-heading); font-weight: 700; color: var(--kl-primary); font-size: 0.9375rem; }

/* Kategorie-Pille: von .timeline-item losgelöste Basis-Komponente, da
   derselbe farbige Tag auch außerhalb der Timeline vorkommt (z. B. auf den
   "Aktuelles"-Karten der Startseite). */
.tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 10px;
  border-radius: var(--kl-radius-chip);
  background: var(--kl-surface-2);
  color: var(--kl-text-muted);
}
.timeline-item .tag { margin-bottom: 8px; }
@media (max-width: 640px) {
  .timeline-item { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- Reveal-Liste (z. B. Sicherheitsmerkmale) ---------- */
.reveal-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.reveal-list li { display: flex; gap: 12px; }
.reveal-list svg { flex-shrink: 0; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--kl-surface-2);
  border-top: 1px solid var(--kl-border);
  padding-block: 48px 24px;
  margin-top: 64px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 32px;
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer-grid h4 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--kl-text-muted); margin-bottom: 14px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid a { color: var(--kl-text); text-decoration: none; font-size: 0.9375rem; }
.footer-grid a:hover { color: var(--kl-primary); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--kl-border);
  font-size: 0.8125rem;
  color: var(--kl-text-muted);
}
.footer-bottom .legal-links { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-bottom a { color: var(--kl-text-muted); }

/* ---------- Scroll-Reveal: Pre-Hide gegen Aufblitzen ---------- */
/* reveal-init.js setzt "js-reveal-init" auf <html> SYNCHRON im <head>, also
   bevor <body> überhaupt gerendert wird. main.js selbst hängt seine
   "reveal"-Klassen erst am Ende von <body> an — ohne diese Vorab-Regel
   würden alle Elemente (auch die noch nicht sichtbaren, z. B. die zweite
   Kartenreihe) für einen Frame voll sichtbar aufblitzen, bevor sie versteckt
   werden. Dieselbe Elementliste wie "revealSelector" in main.js. Ohne
   JavaScript wird die Klasse nie gesetzt — Inhalte bleiben normal sichtbar. */
.js-reveal-init main .card,
.js-reveal-init main .price-card,
.js-reveal-init main .timeline-item,
.js-reveal-init main .faq-item,
.js-reveal-init main .section-head,
.js-reveal-init main .hero-grid > div,
.js-reveal-init main .section-primary .grid > *,
.js-reveal-init main .trust-strip .item,
.js-reveal-init main .reveal-list > li,
.js-reveal-init main table.compare tbody tr,
.js-reveal-init .site-footer .footer-grid > div {
  opacity: 0;
}

/* ---------- Scroll-Reveal ---------- */
/* Klassen "reveal"/"reveal-up"/"reveal-left"/"reveal-right" werden
   ausschließlich per JS vergeben (main.js) — ohne JavaScript bleibt jeder
   Inhalt normal sichtbar, keine Abhängigkeit. */
body.js-reveal .reveal {
  opacity: 0;
  transition: opacity 700ms var(--kl-ease-out), transform 700ms var(--kl-ease-out);
  will-change: opacity, transform;
}
body.js-reveal .reveal.reveal-up { transform: translateY(28px); }
body.js-reveal .reveal.reveal-left { transform: translateX(-40px); }
body.js-reveal .reveal.reveal-right { transform: translateX(40px); }
body.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Gestaffeltes Timing in Rastern/Listen/Tabellen */
.grid > .reveal:nth-child(1) { transition-delay: 0ms; }
.grid > .reveal:nth-child(2) { transition-delay: 80ms; }
.grid > .reveal:nth-child(3) { transition-delay: 160ms; }
.grid > .reveal:nth-child(4) { transition-delay: 240ms; }
.grid > .reveal:nth-child(5) { transition-delay: 320ms; }
.grid > .reveal:nth-child(6) { transition-delay: 400ms; }
.grid > .reveal:nth-child(7) { transition-delay: 480ms; }
.grid > .reveal:nth-child(8) { transition-delay: 560ms; }
.grid > .reveal:nth-child(9) { transition-delay: 640ms; }

.timeline > .reveal:nth-child(n) { transition-delay: 0ms; }
.timeline > .reveal:nth-child(2) { transition-delay: 60ms; }
.timeline > .reveal:nth-child(3) { transition-delay: 120ms; }
.timeline > .reveal:nth-child(4) { transition-delay: 180ms; }
.timeline > .reveal:nth-child(5) { transition-delay: 240ms; }
.timeline > .reveal:nth-child(6) { transition-delay: 300ms; }

.trust-strip .reveal:nth-child(2) { transition-delay: 60ms; }
.trust-strip .reveal:nth-child(3) { transition-delay: 120ms; }
.trust-strip .reveal:nth-child(4) { transition-delay: 180ms; }

.reveal-list > li.reveal:nth-child(2) { transition-delay: 70ms; }
.reveal-list > li.reveal:nth-child(3) { transition-delay: 140ms; }
.reveal-list > li.reveal:nth-child(4) { transition-delay: 210ms; }
.reveal-list > li.reveal:nth-child(5) { transition-delay: 280ms; }

table.compare tbody tr.reveal:nth-child(2) { transition-delay: 30ms; }
table.compare tbody tr.reveal:nth-child(3) { transition-delay: 60ms; }
table.compare tbody tr.reveal:nth-child(4) { transition-delay: 90ms; }
table.compare tbody tr.reveal:nth-child(5) { transition-delay: 120ms; }
table.compare tbody tr.reveal:nth-child(6) { transition-delay: 150ms; }

.footer-grid > .reveal:nth-child(2) { transition-delay: 60ms; }
.footer-grid > .reveal:nth-child(3) { transition-delay: 120ms; }
.footer-grid > .reveal:nth-child(4) { transition-delay: 180ms; }

/* Eyebrow: kleiner Unterstrich fährt beim Einblenden ein */
.eyebrow { position: relative; }
body.js-reveal .reveal .eyebrow::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  height: 2px;
  background: currentColor;
  opacity: 0.5;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--kl-ease-out) 200ms;
}
body.js-reveal .reveal.is-visible .eyebrow::after { transform: scaleX(1); }

/* Karten- & Icon-Interaktion (unabhängig vom Scroll-Reveal) */
.card, .price-card {
  transition: transform var(--kl-dur) var(--kl-ease-out), box-shadow var(--kl-dur) var(--kl-ease-out);
}
.card:hover, .price-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--kl-shadow-2);
}
.card-icon { transition: transform var(--kl-dur) var(--kl-ease-out); }
.card:hover .card-icon { transform: scale(1.1) rotate(-4deg); }

/* Sanftes, dauerhaftes Schweben des Dashboard-Mockups im Hero,
   kombiniert mit einem Scroll-gebundenen Scale/Tilt (per main.js über
   die Custom Properties --kl-scroll-scale/--kl-scroll-tilt gesetzt —
   ruhen bei 1 / 0deg, solange kein JS läuft oder reduced-motion gilt). */
.hero-art {
  animation: kl-float 5s ease-in-out infinite;
  transform: scale(var(--kl-scroll-scale, 1)) rotateX(var(--kl-scroll-tilt, 0deg));
  will-change: transform;
}
@keyframes kl-float {
  0%, 100% { transform: translateY(0) scale(var(--kl-scroll-scale, 1)) rotateX(var(--kl-scroll-tilt, 0deg)); }
  50% { transform: translateY(-8px) scale(var(--kl-scroll-scale, 1)) rotateX(var(--kl-scroll-tilt, 0deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art { transform: none; }
}

/* Hamburger-Icon verwandelt sich beim Öffnen in ein Kreuz */
.nav-toggle svg line { transition: transform var(--kl-dur) var(--kl-ease-out), opacity var(--kl-dur) var(--kl-ease-out); transform-origin: center; }
.nav-toggle[aria-expanded="true"] svg line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] svg line:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] svg line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Next-Level-Extras (aktuell nur homepage/index-v2.html) ---------- */
/* Alles hier ist rein additiv über neue, sonst nirgends verwendete
   Klassennamen — betrifft index.html und alle anderen Seiten nicht. */

/* Scroll-Fortschrittsbalken */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.scroll-progress-bar { height: 100%; width: 0%; background: var(--kl-accent); }

/* Kompass-Logo dreht sich sanft beim Überfahren */
.brand-spin img { transition: transform 500ms var(--kl-ease-out); }
.brand-spin:hover img { transform: rotate(50deg); }

/* Lichtschein-Sweep auf Haupt-CTAs */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgb(255 255 255 / 0.55), transparent);
  transform: skewX(-20deg);
  transition: left 600ms var(--kl-ease-out);
  pointer-events: none;
}
.btn-shine:hover::after { left: 130%; }

/* Wellen-Divider zwischen Sektionen (maritimes Motiv). Füllfarbe entspricht
   der Hintergrundfarbe der jeweils FOLGENDEN Sektion — die Welle liest sich
   als deren oberer Rand, der über die vorherige Sektion "schwappt".
   Der Container braucht zusätzlich die Hintergrundfarbe der VORHERIGEN
   Sektion als "Kerben-Backdrop": ohne das zeigt die Fläche über der Kurve
   einfach die Seiten-Grundfarbe (kl-bg) — bei einem Übergang VON einer
   Sektion mit eigenem Hintergrund UND einer Welle, die selbst nach kl-bg
   füllt, wären Kerbe und Füllung dann zufällig identisch und die Welle
   unsichtbar (genau das ist zwei der sechs Übergänge passiert). */
/* margin-block ist bewusst stärker negativ als die übliche 1px-Rundungs-
   Toleranz: Beim Herunterskalieren des SVG-viewBox (60 -> 44px Höhe) kann am
   unteren Rand eine Sub-Pixel-Zeile der Backdrop-Farbe statt der Füllfarbe
   durchschimmern (sichtbar als dünne Linie zwischen Welle und nächster
   Sektion). 3px Überlappung schiebt diese Naht sicher unter die jeweils
   angrenzende, gleichfarbige Fläche. */
.wave-divider { position: relative; z-index: 1; line-height: 0; margin-block: -3px; }
.wave-divider svg { display: block; width: 100%; height: 44px; }
@media (max-width: 640px) { .wave-divider svg { height: 26px; } }
.wave-fill-bg { fill: var(--kl-bg); }
.wave-fill-surface { fill: var(--kl-surface); }
.wave-fill-primary { fill: var(--kl-navy-solid); }
.wave-backdrop-bg { background: var(--kl-bg); }
.wave-backdrop-surface { background: var(--kl-surface); }
.wave-backdrop-primary { background: var(--kl-navy-solid); }

/* Sektionen, die oben/unten an einen Wellen-Divider grenzen: die sonst
   übliche gerade Randlinie von .section-surface entfällt dort, sie würde
   sich sichtbar mit der Wellenkurve überschneiden. */
.section-surface.no-border-top { border-top: none; }
.section-surface.no-border-bottom { border-bottom: none; }

/* Hover-Footer: dunkle, markenblaue Variante mit Cursor-Wortmarke */
/* Kein Wellen-Divider mehr direkt vor dem Footer (überall entfernt) — daher
   jetzt wieder ein moderater margin-top, damit die Karte sichtbar von der
   letzten Sektion "abgesetzt" schwebt statt nahtlos daran zu kleben. */
.hover-footer { padding: 0 24px 32px; margin-top: 40px; }
.hover-footer-card {
  position: relative;
  overflow: hidden;
  background: var(--kl-navy-solid);
  border-radius: 28px;
  max-width: var(--kl-maxw);
  margin-inline: auto;
  box-shadow: var(--kl-shadow-2);
}
.hover-footer-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(125% 125% at 50% 0%, color-mix(in srgb, var(--kl-navy-solid) 92%, black) 45%, color-mix(in srgb, var(--kl-accent) 22%, transparent) 100%);
  pointer-events: none;
}
.hover-footer-inner { position: relative; z-index: 1; padding: 56px 40px 32px; color: rgb(255 255 255 / 0.82); }
.hover-footer-grid { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 32px; }
@media (max-width: 900px) { .hover-footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .hover-footer-grid { grid-template-columns: 1fr; } }
.hover-footer-brand .brand { color: #fff; font-family: var(--kl-font-heading); font-weight: 700; font-size: 1.25rem; display: flex; align-items: center; gap: 10px; text-decoration: none; }
.hover-footer-brand p { margin-top: 12px; margin-bottom: 0; max-width: 32ch; }
.hover-footer h4 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; color: rgb(255 255 255 / 0.55); margin-bottom: 14px; }
.hover-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.hover-footer li { margin-bottom: 0; }
.hover-footer a { color: rgb(255 255 255 / 0.82); text-decoration: none; font-size: 0.9375rem; transition: color var(--kl-dur) var(--kl-ease-out); }
.hover-footer a:hover { color: var(--kl-accent); }
.hover-footer-contact li { display: flex; align-items: center; gap: 10px; }
.hover-footer-contact svg { width: 18px; height: 18px; stroke: var(--kl-accent); flex-shrink: 0; }
.hover-footer-rule { border: none; border-top: 1px solid rgb(255 255 255 / 0.14); margin: 40px 0 24px; }
.hover-footer-bottom { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; font-size: 0.8125rem; color: rgb(255 255 255 / 0.55); margin: 0; }
.hover-footer-bottom p { margin: 0; }
.hover-footer-bottom .legal-links { display: flex; gap: 16px; flex-wrap: wrap; }
.hover-footer-bottom a { color: rgb(255 255 255 / 0.55); }

.hover-footer-watermark {
  position: relative;
  z-index: 1;
  height: clamp(110px, 16vw, 200px);
  margin-top: -20px;
  cursor: default;
}
.kl-watermark-svg { width: 100%; height: 100%; display: block; }
.kl-watermark-outline, .kl-watermark-draw, .kl-watermark-reveal {
  font-family: var(--kl-font-heading);
  font-weight: 700;
  font-size: 104px;
  fill: transparent;
  letter-spacing: 0.02em;
}
.kl-watermark-outline { stroke: rgb(255 255 255 / 0.08); stroke-width: 1.2; }
.kl-watermark-draw { stroke: var(--kl-accent); stroke-width: 1.2; stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.hover-footer-card.is-visible .kl-watermark-draw { animation: kl-watermark-draw 2.4s var(--kl-ease-out) 200ms forwards; }
@keyframes kl-watermark-draw { to { stroke-dashoffset: 0; } }
.kl-watermark-reveal { stroke: url(#klTextGradient); stroke-width: 1.2; opacity: 0; transition: opacity 300ms var(--kl-ease-out); }
.hover-footer-watermark:hover .kl-watermark-reveal { opacity: 1; }
@media (max-width: 640px) { .hover-footer-watermark { display: none; } }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.pt-0 { padding-top: 0; }
.text-narrow { max-width: 52ch; margin-inline: auto; }
.footer-tagline { margin-top: 12px; max-width: 32ch; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--kl-radius-chip);
  background: color-mix(in srgb, var(--kl-status-present) 16%, transparent);
  color: var(--kl-status-present);
}
.badge.info { background: color-mix(in srgb, var(--kl-primary) 14%, transparent); color: var(--kl-primary); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--kl-primary);
  color: var(--kl-on-primary);
  padding: 12px 20px;
  border-radius: 0 0 var(--kl-radius-control) 0;
  z-index: 100;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { left: 0; }