/* ============================================================
   CareVergleich24 – Startseite & Fragestrecke
   Designsystem v1.0: alle Werte kommen aus design-tokens.css
   (--pw-*), Doku in DESIGNSYSTEM.md. @font-face liegt ebenfalls
   in design-tokens.css (muss davor geladen sein).
   ============================================================ */

html, body { margin: 0; padding: 0; background: var(--pw-papier); }
body {
  font-family: var(--pw-schrift-text);
  color: var(--pw-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
* { box-sizing: border-box; }
input, select, button, textarea { font-family: var(--pw-schrift-text); }
h1, h2, h3, h4 { font-family: var(--pw-schrift-display); }
a { color: var(--pw-link); text-decoration: none; }
a:hover { color: var(--pw-terra-700); text-decoration: underline; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--pw-fokus); outline-offset: 2px; }
[hidden] { display: none !important; }

@keyframes pw-spin { to { transform: rotate(360deg); } }
@keyframes pw-fadeup {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Demo-Karte im Hero: 6,5-Sekunden-Schleife (Dennis, 29.07.2026 – vorher 10 s),
   streng sequenziell: Kreis 1 → Linie 1 → Kreis 2 → Linie 2 → Kreis 3 → Ergebnis.
   Der Aufbau ist gegenüber dem Design-Handoff gestrafft (Sieger-Zeile steht nach
   ~3,8 s statt ~7,2 s); die Standzeit des fertigen Vergleichs wurde dabei nicht
   gekürzt, sondern wächst leicht auf ~2,2 s – das Ergebnis ist der Punkt der
   Animation, nicht der Weg dorthin. */
@keyframes pw-demo-punkt-1 {
  0%, 2% { background-color: var(--pw-gruen-100); color: var(--pw-gruen-700); }
  7%, 94% { background-color: var(--pw-gruen-700); color: #fff; }
  100% { background-color: var(--pw-gruen-100); color: var(--pw-gruen-700); }
}
@keyframes pw-demo-punkt-2 {
  0%, 18% { background-color: var(--pw-gruen-100); color: var(--pw-gruen-700); }
  23%, 94% { background-color: var(--pw-gruen-700); color: #fff; }
  100% { background-color: var(--pw-gruen-100); color: var(--pw-gruen-700); }
}
@keyframes pw-demo-punkt-3 {
  0%, 34% { background-color: var(--pw-gruen-100); color: var(--pw-gruen-700); }
  39%, 94% { background-color: var(--pw-gruen-700); color: #fff; }
  100% { background-color: var(--pw-gruen-100); color: var(--pw-gruen-700); }
}
@keyframes pw-demo-linie-h1 {
  0%, 7% { transform: scaleX(0); }
  18%, 94% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}
@keyframes pw-demo-linie-h2 {
  0%, 23% { transform: scaleX(0); }
  34%, 94% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}
@keyframes pw-demo-linie-v1 {
  0%, 7% { transform: scaleY(0); }
  18%, 94% { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}
@keyframes pw-demo-linie-v2 {
  0%, 23% { transform: scaleY(0); }
  34%, 94% { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}
/* Ergebnis-Vergleich (17.07.2026, Entwurf 1B): unterster Strich wischt zuerst ein,
   dann der zweite, dann erscheint die Sieger-Zeile mit grünem Aufblitzen.
   Mobil startet die Sequenz früher (35 %, sobald Linie 2 die 3 erreicht),
   Desktop erst nach Kreis-3-Aktivierung (39 %) — wie zuvor beim Ergebnis. */
@keyframes pw-demo-strich-2-mobil {
  0%, 35% { transform: scaleX(0); opacity: 0; }
  39%, 92% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
@keyframes pw-demo-strich-1-mobil {
  0%, 39% { transform: scaleX(0); opacity: 0; }
  43%, 92% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
@keyframes pw-demo-sieger-mobil {
  0%, 43% { opacity: 0; transform: translateY(9px); box-shadow: 0 0 0 1px var(--pw-gruen-pop); }
  48% { opacity: 1; transform: translateY(0); box-shadow: 0 0 0 1px var(--pw-gruen-pop), 0 0 0 7px rgba(15, 138, 68, 0.2); }
  54%, 92% { opacity: 1; transform: translateY(0); box-shadow: 0 0 0 1px var(--pw-gruen-pop); }
  100% { opacity: 0; transform: translateY(0); box-shadow: 0 0 0 1px var(--pw-gruen-pop); }
}
@keyframes pw-demo-strich-2 {
  0%, 39% { transform: scaleX(0); opacity: 0; }
  43%, 92% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
@keyframes pw-demo-strich-1 {
  0%, 43% { transform: scaleX(0); opacity: 0; }
  47%, 92% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
@keyframes pw-demo-sieger {
  0%, 47% { opacity: 0; transform: translateY(9px); box-shadow: 0 0 0 1px var(--pw-gruen-pop); }
  52% { opacity: 1; transform: translateY(0); box-shadow: 0 0 0 1px var(--pw-gruen-pop), 0 0 0 7px rgba(15, 138, 68, 0.2); }
  58%, 92% { opacity: 1; transform: translateY(0); box-shadow: 0 0 0 1px var(--pw-gruen-pop); }
  100% { opacity: 0; transform: translateY(0); box-shadow: 0 0 0 1px var(--pw-gruen-pop); }
}
/* H1: Gold-Marker läuft einmal unter „Preise" durch (Dennis, 17.07.2026) */
@keyframes pw-h1-marker {
  to { background-size: 100% 100%; }
}
/* Mobiler Hero 3b: Vorschau-Karten poppen einmalig ein (Empfehlung auf 1,
   anonyme Zeilen bleiben bei 0.96), der Pfeil wippt dauerhaft sanft. */
@keyframes pw-m3b-pop {
  from { transform: scale(0.94); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes pw-m3b-pop-klein {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(0.96); opacity: 1; }
}
@keyframes pw-m3b-pfeil {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}
@keyframes pw-check-pop {
  0% { transform: scale(0); }
  70% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

.dk-container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ---- Header ---- */
.dk-header { background: var(--pw-flaeche-warm); border-bottom: 1px solid var(--pw-linie); }
.dk-header-inner {
  max-width: 1160px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.dk-logo-btn { background: none; border: none; padding: 0; display: inline-flex; }
/* Wortmarken-Logo (20.07.2026): 5,1:1 statt vorher 3,3:1 – deshalb flacher
   gesetzt als das alte Haus-Logo, sonst dominiert es die Kopfleiste. */
.dk-logo { height: 40px; width: auto; }

/* Kopfnavigation zu den Unterseiten (ersetzt die Vorteils-Häkchen) */
.dk-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.dk-nav a {
  font-size: 15px; font-weight: 700; color: var(--pw-gruen-700);
  text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent;
}
.dk-nav a:hover { color: var(--pw-gruen-800); border-bottom-color: var(--pw-terra-600); }
.dk-nav a[aria-current="page"] { border-bottom-color: var(--pw-gruen-700); }
/* Unter 900px übernimmt nav.css: Burger + seitliches Panel. */

/* Kopf-CTA. Lag bis 22.07.2026 in unterseiten.css und galt damit nur für drei
   Seiten – seit der Zusammenlegung auf ein Grundgerüst trägt jede Seite
   denselben Kopf, also gehören seine Regeln ins globale Stylesheet. */
.dk-header-inner { justify-content: flex-start; row-gap: 8px; }
.dk-header-inner .dk-nav { margin-left: 8px; }
/* Bewusst mit `.dk-header` davor: Der Knopf trägt zugleich .dk-btn-primary, und
   das steht weiter unten in dieser Datei. Bei gleicher Spezifität gewönne es –
   der Kopf-CTA bliebe dann in jeder Breite gleich groß. */
.dk-header .dk-header-cta {
  margin-left: auto;
  font-size: 15px;
  padding: 10px 18px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--pw-radius-s);
}
.dk-header .dk-header-cta:hover { color: #fff; text-decoration: none; }
/* Mobile Kurzform des Header-CTAs (Muster wie .dk-minuten-lang der Startseite),
   damit Logo und Button bei 375px in einer Zeile bleiben. */
.dk-cta-kurz { display: none; }
@media (max-width: 599.98px) {
  .dk-cta-lang { display: none; }
  .dk-cta-kurz { display: inline; }
  .dk-header .dk-header-cta { font-size: 14px; padding: 9px 12px; }
}
@media (max-width: 640px) { .dk-logo { height: 34px; } }
/* Unter 480px teilen sich Logo, Vergleichs-CTA und Burger rund 335px. Ohne diese
   Straffung passt die Zeile nicht und der Burger rutscht allein in eine zweite
   Zeile – nachgemessen bei 375px (iPhone SE/13 mini). */
@media (max-width: 479.98px) {
  .dk-logo { height: 28px; }
  .dk-header .dk-header-cta { font-size: 13.5px; padding: 9px 11px; }
}
@media (max-width: 400px) { .dk-logo { height: 26px; } }

/* Sprungmarke für Tastatur und Screenreader – lag bisher nur in styles.css und
   fehlte damit auf Startseite und Unterseiten. */
/* Ausgeblendet über clip statt über einen Minus-Offset: Ein fester Offset lässt
   bei größerer Schrift einen Streifen am oberen Rand stehen. Dasselbe Muster
   nutzt bereits .nav-burger-text in nav.css. */
.skip-link {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link:focus {
  left: 1rem; top: 1rem; z-index: 100;
  width: auto; height: auto; margin: 0; clip: auto; overflow: visible;
  background: var(--pw-gruen-800); color: var(--pw-text-invers);
  padding: 10px 16px; border-radius: var(--pw-radius-s);
  font-weight: 700; text-decoration: none;
}
.dk-check {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 700; color: var(--pw-gruen-700);
}
.dk-check-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--pw-gruen-700); color: var(--pw-flaeche-warm);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; flex: none;
}

/* ---- Hero (Startseite, Design-Handoff „Option 2a") ----
   Maße/Timings 1:1 aus der Referenz (rem-Werte bewusst beibehalten).
   Basis-Styles = Mobil (< 900px), Desktop-Umbau in der Media Query unten. */
.dk-hero {
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(143, 170, 154, 0.16), transparent 60%),
    var(--pw-gruen-800);
  color: var(--pw-text-invers);
  padding: 18px 20px 32px;
}
.dk-hero-inner { max-width: 1160px; margin: 0 auto; display: grid; gap: 12px; }
.dk-hero-badge {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--pw-gruen-100);
  border-radius: var(--pw-radius-pill); padding: 7px 14px;
  font-size: 0.75rem; font-weight: 700; line-height: 1.4;
}
.dk-badge-stern { color: var(--pw-gold); flex: none; }
.dk-hero-titel {
  margin: 0; color: #fff;
  font-family: var(--pw-schrift-display);
  font-size: 1.65rem; line-height: 1.2; font-weight: 800;
  text-wrap: pretty;
  display: grid; gap: 5px;
}
/* H1-Split: Thema klein, Versprechen groß (mobil 1.02/1.9 rem, Desktop 1.45/2.7 rem) */
.dk-h1-thema { font-size: 1.02rem; letter-spacing: 0.015em; color: var(--pw-gruen-100); }
.dk-h1-versprechen { font-size: 1.9rem; line-height: 1.14; }
/* Gold-Marker unter der ganzen Phrase „Preise sofort vergleichen":
   wischt nach dem Laden einmal von links durch. box-decoration-break: clone,
   damit bei zweizeiligem Umbruch beide Zeilen unterstrichen werden. */
.dk-h1-marker {
  border-radius: 3px; padding: 0 2px; margin: 0 -2px;
  background-image: linear-gradient(transparent 70%, rgba(232, 163, 61, 0.5) 70%);
  background-image: linear-gradient(transparent 70%, color-mix(in srgb, var(--pw-gold) 50%, transparent) 70%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: pw-h1-marker 0.55s ease-out 0.6s forwards;
}
/* Mobil: kurzer Nutzensatz zwischen H1 und Demo-Karte; der lange Fließtext
   (.dk-hero-sub) erscheint nur auf dem Desktop. */
.dk-hero-nutzen { margin: 0; color: var(--pw-gruen-200); font-size: 1.0625rem; line-height: 1.45; }
.dk-hero-sub {
  display: none;
  margin: 0; color: var(--pw-gruen-200);
  font-size: 1.0625rem; line-height: 1.6; max-width: 56ch;
}
.dk-minuten-pille {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--pw-gruen-pop); color: #fff;
  border-radius: var(--pw-radius-pill); padding: 9px 16px;
  font-weight: 800; font-size: 0.95rem;
}
.dk-minuten-pille svg { flex: none; }
/* Goldene Umrandung hebt das PLZ-Formular hervor (greift den H1-Marker auf) */
.dk-plz-form {
  display: grid; gap: 8px;
  background: var(--pw-flaeche); padding: 8px; border-radius: 14px;
  border: 2px solid var(--pw-gold);
  box-shadow: 0 0 0 4px rgba(232, 163, 61, 0.22), var(--pw-schatten-2);
}
.dk-plz-input {
  border: none; background: transparent; min-width: 0;
  font-size: 1.1rem; font-weight: 600; color: var(--pw-text);
  padding: 12px 14px;
}
.dk-plz-input:focus-visible { outline: 3px solid var(--pw-gruen-400); outline-offset: 2px; border-radius: 6px; }
.dk-plz-form .dk-btn-primary { min-height: var(--pw-ziel-hoehe); }
.dk-btn-primary {
  background: var(--pw-cta); color: #fff; border: none; border-radius: var(--pw-radius-s);
  padding: 14px 26px; font-size: 16px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.dk-btn-primary:hover { background: var(--pw-cta-hover); }
.dk-btn-primary:disabled { opacity: 0.75; cursor: wait; }
.dk-spinner {
  width: 16px; height: 16px; flex: none;
  border: 2.5px solid rgba(255, 255, 255, 0.4); border-top-color: #fff;
  border-radius: 50%; display: inline-block;
  animation: pw-spin 0.7s linear infinite;
}
.dk-plz-fehler { width: 100%; padding: 0 14px 6px; font-size: 13.5px; font-weight: 700; color: var(--pw-fehler); }
.dk-plz-leer {
  width: 100%; padding: 2px 14px 8px; font-size: 13.5px; font-weight: 600;
  color: var(--pw-text-mild); line-height: 1.5;
}
.dk-plz-leer a { font-weight: 800; }
/* Die drei Zusicherungen leben seit 17.07.2026 in der Demo-Karte (.dk-demo-trust) —
   Pillen und Vorteilszeile sind entfallen, unter dem PLZ-Formular steht nichts mehr. */

/* ---- Hero: Demo-Karte „So einfach geht's" (CSS-only-Animation) ---- */
.dk-demo {
  background: var(--pw-flaeche); border-radius: var(--pw-radius-m);
  box-shadow: var(--pw-schatten-3);
  padding: 12px; display: grid; gap: 10px;
  color: var(--pw-text);
}
.dk-demo-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dk-demo-kopf b { color: var(--pw-gruen-700); font-family: var(--pw-schrift-display); font-size: 0.98rem; font-weight: 800; }
/* „2 Minuten"-Chip in Signal-Grün — der Zeitvorteil soll auffallen (Dennis, 17.07.2026) */
.dk-demo-chip {
  background: var(--pw-gruen-pop); color: #fff;
  font-weight: 800; font-size: 0.75rem;
  border-radius: var(--pw-radius-pill); padding: 4px 10px; white-space: nowrap;
}
.dk-demo-punkt {
  border-radius: 50%; display: grid; place-items: center;
  font-family: var(--pw-schrift-display); font-size: 0.9rem; font-weight: 800;
  background: var(--pw-gruen-100); color: var(--pw-gruen-700);
  width: 30px; height: 30px;
}
.dk-demo-punkt-1 { animation: pw-demo-punkt-1 6.5s ease-in-out infinite; }
.dk-demo-punkt-2 { animation: pw-demo-punkt-2 6.5s ease-in-out infinite; }
.dk-demo-punkt-3 { animation: pw-demo-punkt-3 6.5s ease-in-out infinite; }
/* Horizontaler Stepper (mobil) */
.dk-steps-h { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 0 6px; }
.dk-track { height: 3px; background: var(--pw-gruen-100); position: relative; }
.dk-fill { position: absolute; inset: 0; background: var(--pw-gruen-700); transform-origin: left; }
.dk-fill-1 { animation: pw-demo-linie-h1 6.5s ease-in-out infinite; }
.dk-fill-2 { animation: pw-demo-linie-h2 6.5s ease-in-out infinite; }
.dk-steps-h-labels {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
  color: var(--pw-text-mild); font-size: 0.68rem; font-weight: 700; line-height: 1.3; text-align: center;
  white-space: nowrap;
}
.dk-steps-h-labels span:first-child { text-align: left; }
.dk-steps-h-labels span:last-child { text-align: right; }
/* Vertikaler Stepper (Desktop) */
.dk-steps-v { display: none; grid-template-columns: 36px 1fr; gap: 0 16px; }
.dk-steps-v .dk-rail { display: grid; justify-items: center; grid-row: span 3; }
.dk-steps-v .dk-rail .dk-demo-punkt { width: 36px; height: 36px; font-size: 1rem; position: relative; z-index: 1; }
.dk-steps-v .dk-track { width: 3px; flex: 1; height: auto; position: relative; min-height: 44px; }
.dk-steps-v .dk-fill { transform-origin: top; }
.dk-steps-v .dk-fill-v1 { animation: pw-demo-linie-v1 6.5s ease-in-out infinite; }
.dk-steps-v .dk-fill-v2 { animation: pw-demo-linie-v2 6.5s ease-in-out infinite; }
.dk-steps-v-texte { display: grid; gap: 26px; grid-row: span 3; align-content: start; padding-top: 2px; }
.dk-steps-v-texte b { font-size: 1.02rem; }
.dk-steps-v-texte div div { color: var(--pw-text-mild); font-size: 0.92rem; line-height: 1.5; }
/* Ergebnis-Vergleich: Titelzeile, Sieger-Karte, zwei anonymisierte Striche (Platz 2/3) */
.dk-demo-vergleich { border-top: 1px solid var(--pw-linie); padding-top: 8px; display: grid; gap: 6px; }
.dk-vergleich-titel {
  display: flex; justify-content: space-between; align-items: baseline;
  color: var(--pw-text-mild); font-size: 0.62rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.dk-sieger {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--pw-flaeche-warm);
  border: 1px solid var(--pw-gruen-pop); box-shadow: 0 0 0 1px var(--pw-gruen-pop);
  border-radius: var(--pw-radius-s); padding: 6px 10px;
  opacity: 0; animation: pw-demo-sieger-mobil 6.5s ease-in-out infinite;
}
.dk-sieger-flag {
  position: absolute; top: -8px; left: 10px;
  background: var(--pw-gruen-pop); color: #fff;
  font-size: 0.55rem; font-weight: 800; letter-spacing: 0.04em;
  border-radius: var(--pw-radius-pill); padding: 2px 7px;
}
.dk-sieger-info { display: grid; gap: 1px; min-width: 0; }
.dk-sieger-info b { font-family: var(--pw-schrift-display); font-size: 0.8rem; font-weight: 800; color: var(--pw-gruen-700); }
.dk-sieger-info span { color: var(--pw-text-mild); font-size: 0.66rem; }
.dk-sieger-preis {
  font-family: var(--pw-schrift-display); font-size: 0.95rem; font-weight: 800;
  color: var(--pw-gruen-700); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dk-sieger-preis small { font-family: var(--pw-schrift-text); font-size: 0.62rem; font-weight: 600; color: var(--pw-text-mild); }
.dk-strich { display: flex; align-items: center; gap: 8px; transform: scaleX(0); transform-origin: left; opacity: 0; }
.dk-strich span:first-child {
  flex: 1; height: 10px; border-radius: var(--pw-radius-pill);
  background: linear-gradient(90deg, var(--pw-gruen-200), var(--pw-gruen-100));
}
.dk-strich span:last-child { flex: none; width: 52px; height: 10px; border-radius: var(--pw-radius-pill); background: var(--pw-gruen-100); }
.dk-strich-2 span:first-child { opacity: 0.75; }
.dk-strich-1 { animation: pw-demo-strich-1-mobil 6.5s ease-out infinite; }
.dk-strich-2 { animation: pw-demo-strich-2-mobil 6.5s ease-out infinite; }
/* Trust-Zeile: die Zusicherungen in der Karte — mobil als Kurzform, Desktop als 2×2-Raster */
.dk-demo-trust {
  background: var(--pw-erfolg-flaeche); border-radius: var(--pw-radius-s);
  padding: 6px 9px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px;
}
.dk-trust-kurz, .dk-trust-punkt { color: var(--pw-erfolg-text); font-weight: 800; white-space: nowrap; }
.dk-trust-kurz { font-size: 0.64rem; letter-spacing: 0.01em; }
.dk-trust-punkt { display: none; font-size: 0.74rem; }
/* Reduced Motion: Endzustände zeigen (Kreise aktiv, Linien voll, Striche + Sieger sichtbar);
   die Animationen selbst deaktiviert der globale reduce-Block oben. */
@media (prefers-reduced-motion: reduce) {
  .dk-demo-punkt-1, .dk-demo-punkt-2, .dk-demo-punkt-3 { background: var(--pw-gruen-700); color: #fff; }
  .dk-fill { transform: none; }
  .dk-strich { transform: none; opacity: 1; }
  .dk-sieger { opacity: 1; transform: none; }
  .dk-h1-marker { background-size: 100% 100%; }
}

/* ---- Hero: Desktop-Layout (≥ 900px) ----
   Grid zweispaltig, Demo-Karte rechts; Reihenfolge links per order:
   Badge → H1 → Text → 2-Min-Pille → PLZ → Vorteils-Pillen. */
@media (min-width: 900px) {
  .dk-hero { padding: 56px 40px 60px; }
  .dk-hero-inner { grid-template-columns: minmax(0, 1fr) 440px; gap: 22px 48px; align-items: start; }
  .dk-hero-inner > * { grid-column: 1; }
  .dk-hero-badge { order: 1; padding: 8px 18px; font-size: 0.85rem; }
  .dk-hero-titel { order: 2; gap: 8px; }
  .dk-h1-thema { font-size: 1.45rem; }
  .dk-h1-versprechen { font-size: 2.7rem; line-height: 1.15; }
  .dk-hero-nutzen { display: none; }
  .dk-hero-sub { display: block; order: 3; font-size: 1.125rem; line-height: 1.65; }
  .dk-minuten-pille { order: 4; padding: 10px 20px; font-size: 1.0625rem; }
  .dk-plz-form { order: 5; grid-template-columns: 1fr auto; max-width: 560px; }
  .dk-plz-fehler, .dk-plz-leer { grid-column: 1 / -1; }
  .dk-demo { grid-column: 2; grid-row: 1 / span 5; align-self: center; padding: 26px; gap: 18px; }
  .dk-demo-kopf b { font-size: 1.15rem; }
  .dk-steps-h, .dk-steps-h-labels { display: none; }
  .dk-steps-v { display: grid; }
  .dk-demo-vergleich { padding-top: 12px; gap: 11px; }
  .dk-vergleich-titel { font-size: 0.7rem; }
  .dk-sieger { padding: 11px 14px; animation-name: pw-demo-sieger; }
  .dk-sieger-flag { font-size: 0.62rem; }
  .dk-sieger-info b { font-size: 0.95rem; }
  .dk-sieger-info span { font-size: 0.78rem; }
  .dk-sieger-preis { font-size: 1.15rem; }
  .dk-sieger-preis small { font-size: 0.72rem; }
  .dk-strich span:first-child, .dk-strich span:last-child { height: 14px; }
  .dk-strich-1 { animation-name: pw-demo-strich-1; }
  .dk-strich-2 { animation-name: pw-demo-strich-2; }
  .dk-demo-trust { display: grid; grid-template-columns: 1fr 1fr; padding: 10px 13px; gap: 7px 14px; justify-items: start; }
  .dk-trust-kurz { display: none; }
  .dk-trust-punkt { display: inline; }
}

/* ---- Hero: Mobiler Hero „Empfehlung im Spotlight" (Design-Handoff 3b, 18.07.2026) ----
   Existiert AUSSCHLIESSLICH unter 900px (Projekt-Breakpoint statt der 767px aus
   der Referenz). Desktop rendert unverändert .dk-hero-inner; deshalb stehen alle
   Regeln in der Media Query — nichts sickert nach oben durch. Maße, Farben und
   Timings 1:1 aus referenz-3b-mobil.html; Beispielwerte liefert die View. */
.dk-m3b { display: none; }
@media (max-width: 899.98px) {
  /* Heller Hero: Papier statt Markengrün, kompaktes Padding, nur vertikales Scrollen */
  .dk-hero {
    background: var(--pw-papier);
    color: var(--pw-text);
    padding: 22px 16px 24px;
    overflow-x: hidden;
  }
  .dk-hero-inner { display: none; }
  .dk-m3b { display: grid; gap: 12px; min-width: 0; }

  /* Block 1: zentrierter Kopf */
  .dk-m3b-kopf { display: grid; gap: 6px; justify-items: center; text-align: center; }
  /* Die Sterne-Kopfzeile (.dk-m3b-bewertung/.dk-m3b-sterne) wurde am 19.07.2026
     auf Dennis' Wunsch entfernt — Regeln mit dem Markup ausgebaut. */
  .dk-m3b-kopf h1 {
    margin: 0; font-family: var(--pw-schrift-display);
    font-size: 25px; font-weight: 900; line-height: 1.2; color: var(--pw-gruen-700);
  }
  .dk-m3b-kopf p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--pw-text-mild); max-width: 320px; }

  /* Block 2: Ergebnis-Vorschau — zwei anonyme Skeleton-Zeilen rahmen die Empfehlung */
  .dk-m3b-vorschau { display: grid; gap: 8px; min-width: 0; }
  .dk-m3b-vergleich-titel {
    display: flex; justify-content: space-between; align-items: baseline;
    color: var(--pw-text-mild); font-size: 0.68rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.06em; padding: 0 2px;
  }
  .dk-m3b-anon { opacity: 0.55; }
  .dk-m3b-anon-karte {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    background: var(--pw-flaeche); border: 1px solid var(--pw-linie);
    border-radius: var(--pw-radius-s); padding: 8px 12px;
    transform: scale(0.96);
  }
  .dk-m3b-anon-oben { animation: pw-m3b-pop-klein 0.5s ease 0.1s both; }
  .dk-m3b-anon-unten { animation: pw-m3b-pop-klein 0.5s ease 0.8s both; }
  .dk-m3b-anon-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--pw-gruen-100); flex: none; }
  .dk-m3b-anon-mitte { flex: 1; min-width: 0; }
  .dk-m3b-anon-name { height: 9px; background: var(--pw-gruen-100); border-radius: var(--pw-radius-pill); }
  .dk-m3b-anon-oben .dk-m3b-anon-name { width: 58%; }
  .dk-m3b-anon-unten .dk-m3b-anon-name { width: 46%; }
  .dk-m3b-anon-preis { height: 12px; width: 52px; background: var(--pw-gruen-100); border-radius: var(--pw-radius-pill); flex: none; }

  /* Die Empfehlungs-Karte — der Held mit grüner Umrandung */
  .dk-m3b-tipp {
    position: relative; background: var(--pw-flaeche);
    border: 2.5px solid var(--pw-erfolg); border-radius: var(--pw-radius-m);
    box-shadow: var(--pw-schatten-2);
    padding: 16px 14px 12px; display: grid; gap: 10px; min-width: 0;
    animation: pw-m3b-pop 0.55s ease 0.45s both;
  }
  .dk-m3b-tipp-badge {
    position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
    background: var(--pw-erfolg); color: var(--pw-text-invers);
    font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
    border-radius: var(--pw-radius-pill); padding: 3px 12px; white-space: nowrap;
  }
  .dk-m3b-tipp-kopf { display: flex; align-items: center; gap: 10px; min-width: 0; }
  /* Empfehlungs-Karte trägt seit 19.07.2026 (Dennis) einen echten Beispielnamen
     statt der Skeleton-Balken — Name und Initialen kommen aus HERO_BEISPIEL. */
  .dk-m3b-tipp-avatar {
    width: 36px; height: 36px; border-radius: 50%; background: var(--pw-gruen-200); flex: none;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--pw-schrift-display);
    font-size: 13px; font-weight: 800; color: var(--pw-gruen-700);
  }
  .dk-m3b-tipp-mitte { flex: 1; min-width: 0; display: grid; gap: 3px; }
  .dk-m3b-tipp-name {
    font-size: 15px; font-weight: 800; color: var(--pw-text); line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .dk-m3b-tipp-sterne { font-size: 12px; font-weight: 800; color: var(--pw-gold-text); }
  .dk-m3b-tipp-sterne span { color: var(--pw-text-mild); font-weight: 700; }
  .dk-m3b-tipp-preis { text-align: right; flex: none; }
  .dk-m3b-preis-wert {
    font-size: 20px; font-weight: 900; color: var(--pw-gruen-700);
    font-variant-numeric: tabular-nums;
  }
  .dk-m3b-preis-einheit { font-size: 11px; font-weight: 700; color: var(--pw-text-mild); }
  .dk-m3b-trenner { border-top: 1px solid var(--pw-linie); }
  .dk-m3b-belege { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: var(--pw-text); }
  .dk-m3b-haken { color: var(--pw-erfolg-text); }

  /* Block 3: Label + wippender Pfeil zeigen auf die PLZ-Leiste */
  .dk-m3b-pfeil { display: flex; flex-direction: column; align-items: center; }
  .dk-m3b-pfeil span { font-size: 13px; font-weight: 800; color: var(--pw-gruen-700); }
  .dk-m3b-pfeil svg { color: var(--pw-cta); animation: pw-m3b-pfeil 1.6s ease-in-out infinite; }

  /* Block 4: kompakte PLZ-Leiste — überschreibt das globale .dk-plz-form-Styling
     (Radius 16, Schatten ohne Gold-Glow, echtes Eingabefeld mit eigenem Rahmen) */
  .dk-m3b .dk-plz-form {
    border-radius: var(--pw-radius-m);
    border: 2px solid var(--pw-gold);
    box-shadow: var(--pw-schatten-2);
    padding: 8px; gap: 6px;
  }
  .dk-m3b-plz-zeile { display: flex; gap: 8px; min-width: 0; }
  .dk-m3b .dk-plz-input {
    flex: 1; min-width: 0; height: 48px;
    border: 1.5px solid var(--pw-linie); border-radius: var(--pw-radius-s);
    padding: 0 12px; font-size: 16px; font-weight: 700;
    background: var(--pw-flaeche-warm);
  }
  .dk-m3b .dk-plz-input:focus-visible { outline: 3px solid var(--pw-fokus); outline-offset: 2px; border-radius: var(--pw-radius-s); }
  .dk-m3b .dk-btn-primary {
    flex: none; height: 48px; min-height: 48px;
    border-radius: var(--pw-radius-s); padding: 0 14px;
    font-size: 15px; font-weight: 800; white-space: nowrap;
  }
  .dk-m3b-trust { font-size: 12px; font-weight: 600; color: var(--pw-text-mild); text-align: center; }
}

/* ---- So funktioniert's ---- */
.dk-steps { padding: 52px 20px 64px; }
.dk-steps h2 { font-size: 26px; font-weight: 800; color: var(--pw-gruen-700); text-align: center; margin: 0 0 34px; }
.dk-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.dk-step-card { background: var(--pw-flaeche-warm); border: 1px solid var(--pw-linie); border-radius: var(--pw-radius-m); padding: 26px 24px; }
.dk-step-nr {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--pw-gruen-700); color: var(--pw-flaeche-warm); font-weight: 800; font-size: 18px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.dk-step-card h3 { font-size: 17px; font-weight: 800; margin: 0 0 8px; color: var(--pw-text); }
.dk-step-card p { font-size: 14.5px; line-height: 1.55; color: var(--pw-text-mild); margin: 0; }

/* ---- Der Unterschied (Design „Vorteile Vergleich") ----
   Scroll-Reveal: app.js setzt .dk-u2-animiert auf die Sektion (nur ohne
   prefers-reduced-motion); erst dann werden Blöcke/Zeilen versteckt und
   per .ist-sichtbar eingeblendet. Ohne JS bleibt alles sichtbar. */
.dk-u2 { background: var(--pw-papier); padding: 96px 24px; }
.dk-u2-inner { max-width: 1160px; margin: 0 auto; display: grid; gap: 56px; }
.dk-u2-kopf { text-align: center; display: grid; gap: 16px; justify-items: center; }
.dk-u2-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--pw-gruen-100); color: var(--pw-gruen-700);
  border-radius: var(--pw-radius-pill); padding: 8px 18px;
  font-size: 15px; font-weight: 800; letter-spacing: 0.02em;
}
.dk-u2-kopf h2 {
  margin: 0; font-size: clamp(32px, 3.2vw, 44px); line-height: 1.2;
  font-weight: 900; color: var(--pw-gruen-700); text-wrap: balance;
}
.dk-u2-kopf p {
  margin: 0; max-width: 620px; font-size: 18px; line-height: 1.65;
  color: var(--pw-text-mild); text-wrap: pretty;
}
.dk-u2-kopf p strong { color: var(--pw-text); }
.dk-u2-grid { display: grid; grid-template-columns: 1fr auto 1.08fr; gap: 24px; align-items: stretch; }
.dk-u2-karte { border-radius: var(--pw-radius-m); display: grid; gap: 22px; align-content: start; }
.dk-u2-andere { background: var(--pw-flaeche-warm); border: 1px solid var(--pw-linie); padding: 36px 32px; }
.dk-u2-karte-kopf { display: grid; gap: 6px; }
.dk-u2-eyebrow {
  font-size: 14px; font-weight: 700; color: var(--pw-text-mild);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.dk-u2-eyebrow-hell { color: var(--pw-gruen-300); }
.dk-u2-karte h3 { margin: 0; font-size: 22px; font-weight: 800; color: var(--pw-text); }
.dk-u2-wir h3 { color: #ffffff; }
/* Wortmarke statt Schriftzug in der „Bei uns"-Karte */
.dk-u2-wir-logo { line-height: 0; margin-top: 2px; }
.dk-u2-wir-logo img { height: 40px; width: auto; max-width: 100%; display: block; }
.dk-u2-zeile { display: flex; gap: 14px; align-items: flex-start; }
.dk-u2-zeile > div { display: grid; gap: 2px; }
.dk-u2-zeile strong { font-size: 17px; line-height: 1.45; font-weight: 700; color: var(--pw-text); }
.dk-u2-zeile > div > span { font-size: 16px; line-height: 1.55; color: var(--pw-text-mild); }
.dk-u2-x {
  flex: none; width: 28px; height: 28px; margin-top: 2px; border-radius: 50%;
  background: var(--pw-fehler-flaeche); color: var(--pw-fehler);
  display: grid; place-items: center; font-size: 14px; font-weight: 800;
}
.dk-u2-vs { align-self: center; display: grid; place-items: center; }
.dk-u2-vs span {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--pw-gruen-700); color: #ffffff;
  display: grid; place-items: center;
  font-family: var(--pw-schrift-display); font-size: 17px; font-weight: 900;
  box-shadow: var(--pw-schatten-2);
}
.dk-u2-wir {
  position: relative; background: var(--pw-gruen-800);
  padding: 40px 36px; box-shadow: var(--pw-schatten-3);
}
.dk-u2-banderole {
  position: absolute; top: -14px; left: 32px;
  background: var(--pw-terra-400); color: var(--pw-gruen-950);
  border-radius: var(--pw-radius-pill); padding: 6px 16px;
  font-size: 14px; font-weight: 800;
}
.dk-u2-wir .dk-u2-zeile strong { color: #ffffff; }
.dk-u2-wir .dk-u2-zeile > div > span { color: var(--pw-gruen-200); }
.dk-u2-check {
  flex: none; width: 28px; height: 28px; margin-top: 2px; border-radius: 50%;
  background: var(--pw-gruen-400); color: var(--pw-gruen-950);
  display: grid; place-items: center;
}
.dk-u2-cta {
  display: grid; gap: 10px; justify-items: start;
  margin-top: 6px; padding-top: 22px; border-top: 1px solid var(--pw-gruen-700);
}
.dk-u2-cta .dk-btn-primary { min-height: var(--pw-ziel-hoehe); }
.dk-u2-cta > span { font-size: 15px; color: var(--pw-gruen-300); }
.dk-u2-belege { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dk-u2-beleg {
  background: var(--pw-flaeche); border: 1px solid var(--pw-linie);
  border-radius: var(--pw-radius-m); padding: 22px 26px;
  display: grid; gap: 4px; text-align: center; justify-items: center;
}
.dk-u2-zahl {
  font-family: var(--pw-schrift-display); font-size: 28px; font-weight: 900;
  color: var(--pw-gruen-700); font-variant-numeric: tabular-nums;
}
.dk-u2-beleg > span:last-child { font-size: 16px; line-height: 1.5; color: var(--pw-text-mild); }
/* Reveal-Zustände (nur aktiv, wenn JS .dk-u2-animiert gesetzt hat) */
.dk-u2-animiert [data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.dk-u2-animiert [data-reveal-row] { opacity: 0; transition: opacity 0.5s ease, transform 0.5s ease; }
.dk-u2-animiert [data-reveal-row="links"] { transform: translateX(-14px); }
.dk-u2-animiert [data-reveal-row="rechts"] { transform: translateX(14px); }
.dk-u2-animiert [data-reveal].ist-sichtbar,
.dk-u2-animiert [data-reveal-row].ist-sichtbar { opacity: 1; transform: none; }
.dk-u2-animiert .dk-u2-zeile.ist-sichtbar .dk-u2-check { animation: pw-check-pop 0.45s ease both; }
@media (max-width: 900px) {
  .dk-u2 { padding: 64px 20px; }
  .dk-u2-inner { gap: 40px; }
  .dk-u2-grid { grid-template-columns: 1fr; gap: 28px; }
  .dk-u2-andere, .dk-u2-wir { padding: 28px 22px; }
  .dk-u2-wir-logo img { height: 34px; }
  .dk-u2-belege { grid-template-columns: 1fr; }
}

/* ---- Kosten-Orientierung ---- */
.dk-kosten { padding: 56px 20px; display: flex; gap: 44px; align-items: center; }
.dk-kosten-text { flex: 1 1 320px; }
.dk-kosten h2 { font-size: 26px; font-weight: 800; color: var(--pw-gruen-700); margin: 0 0 16px; text-wrap: pretty; }
.dk-kosten p { font-size: 15.5px; line-height: 1.65; color: var(--pw-text-mild); margin: 0 0 14px; max-width: 62ch; }
.dk-kosten p strong { color: var(--pw-text); }
.dk-kosten-hinweis { font-size: 14px !important; color: var(--pw-gruen-600) !important; font-weight: 700; }
.dk-kosten-mehr { font-weight: 800; font-size: 15px; }
/* Der gestrichelte Foto-Platzhalter (.dk-bild-platzhalter) ist am 11.08.2026
   ersatzlos entfallen: Die Kosten-Sektion hat ihr Bild am 25.07. bekommen, das
   Gründerporträt auf /ueber-uns/ am 11.08. Damit gibt es keine Stelle mehr, an
   der ein Besucher einen Kasten mit dem Wort „Platzhalter" liest. */
.dk-kosten-bild {
  flex: 0 1 380px; min-width: 0; align-self: stretch;
  height: auto; min-height: 260px; object-fit: cover;
  border-radius: var(--pw-radius-m); box-shadow: var(--pw-schatten-1);
}
@media (max-width: 820px) {
  .dk-kosten { flex-direction: column; align-items: stretch; }
  .dk-kosten-bild { flex-basis: auto; width: 100%; height: auto; max-height: 460px; min-height: 0; }
}

/* ---- FAQ ---- */
.dk-faq-band { background: var(--pw-sand-100); border-top: 1px solid var(--pw-linie); }
.dk-faq { padding: 56px 20px 64px; max-width: 820px; }
.dk-faq h2 { font-size: 26px; font-weight: 800; color: var(--pw-gruen-700); text-align: center; margin: 0 0 30px; }
.dk-faq details {
  background: var(--pw-flaeche-warm); border: 1px solid var(--pw-linie);
  border-radius: var(--pw-radius-m); margin-bottom: 12px; overflow: hidden;
}
.dk-faq summary {
  cursor: pointer; list-style: none; padding: 18px 22px;
  font-size: 16px; font-weight: 800; color: var(--pw-text);
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.dk-faq summary::-webkit-details-marker { display: none; }
.dk-faq summary::after { content: '+'; font-size: 22px; font-weight: 700; color: var(--pw-gruen-500); flex: none; }
.dk-faq details[open] summary::after { content: '–'; }
.dk-faq details[open] summary { border-bottom: 1px solid var(--pw-linie); }
.dk-faq details p { margin: 0; padding: 16px 22px 20px; font-size: 15px; line-height: 1.65; color: var(--pw-text-mild); }

/* ---- Abschluss-CTA ---- */
.dk-endcta {
  background: linear-gradient(160deg, var(--pw-gruen-800) 0%, var(--pw-gruen-700) 60%, var(--pw-gruen-600) 100%);
  color: var(--pw-text-invers);
}
.dk-endcta-inner { padding: 56px 20px 64px; text-align: center; }
.dk-endcta h2 { font-size: 27px; font-weight: 800; margin: 0 0 10px; }
.dk-endcta p { font-size: 15.5px; color: var(--pw-gruen-100); margin: 0 0 26px; }
.dk-plz-form-mitte { margin: 0 auto; }

/* ---- Fragenstrecke ---- */
.dk-qwrap { flex: 1; max-width: 760px; width: 100%; margin: 0 auto; padding: 30px 20px 60px; }
/* Grüner Bestätigungs-Balken: volle Seitenbreite, Inhalt mittig */
.dk-found-band {
  background: linear-gradient(120deg, var(--pw-gruen-800) 0%, var(--pw-gruen-600) 100%);
  color: var(--pw-text-invers);
  animation: pw-fadeup 0.4s ease;
}
.dk-found-inner {
  max-width: 1160px; margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 15px; font-weight: 700; text-align: center;
}
.dk-found-inner .dk-check-dot {
  width: 22px; height: 22px; font-size: 12px;
  background: var(--pw-gold); color: var(--pw-gruen-900);
}
.dk-progress-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dk-progress-kopf .dk-schritt { font-size: 13px; font-weight: 800; color: var(--pw-text-mild); letter-spacing: 0.5px; }
.dk-progress-kopf .dk-prozent { font-size: 13px; font-weight: 700; color: var(--pw-text-mild); }
.dk-progress-track { height: 8px; border-radius: 999px; background: var(--pw-linie); overflow: hidden; margin-bottom: 32px; }
.dk-progress-fill { height: 100%; background: var(--pw-cta); border-radius: 999px; transition: width 0.35s ease; width: 0; }
.dk-frage { animation: pw-fadeup 0.35s ease; }
.dk-frage h2 { font-size: 26px; font-weight: 800; color: var(--pw-text); margin: 0 0 6px; text-wrap: pretty; }
.dk-frage .dk-qsub { font-size: 15px; color: var(--pw-text-mild); margin: 0 0 26px; }
.dk-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.dk-option {
  text-align: left; background: var(--pw-flaeche-warm); border: 2px solid var(--pw-linie);
  border-radius: var(--pw-radius-m); padding: 18px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dk-option:hover { border-color: var(--pw-gruen-600); background: var(--pw-gruen-50); box-shadow: 0 4px 14px rgba(52, 75, 64, 0.10); }
.dk-option.ist-gewaehlt { background: var(--pw-gruen-700); border-color: var(--pw-gruen-700); }
.dk-option-label { display: block; font-size: 16.5px; font-weight: 800; color: var(--pw-text); margin-bottom: 4px; }
.dk-option-sub { display: block; font-size: 13.5px; color: var(--pw-text-mild); line-height: 1.45; }
.dk-option.ist-gewaehlt .dk-option-label { color: var(--pw-text-invers); }
.dk-option.ist-gewaehlt .dk-option-sub { color: var(--pw-gruen-200); }
.dk-qfuss { margin-top: 34px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dk-zurueck {
  background: none; border: none; color: var(--pw-text-mild);
  font-size: 14.5px; font-weight: 700; padding: 8px 0;
  display: flex; align-items: center; gap: 6px;
}
.dk-zurueck:hover { color: var(--pw-gruen-700); }
.dk-anonym { font-size: 13px; color: var(--pw-text-mild); margin-left: auto; }
.dk-frage.ist-gesperrt .dk-option { pointer-events: none; }

/* ---- Berechnungs-Zwischenschritt ---- */
.dk-berechnung { padding: 8px 0 20px; }
.dk-berechnung h2 { font-size: 24px; font-weight: 800; color: var(--pw-text); margin: 0 0 24px; }
.dk-berechnung-schritte { display: flex; flex-direction: column; gap: 16px; }
.dk-b-schritt {
  display: flex; align-items: center; gap: 12px;
  font-size: 15.5px; font-weight: 700; color: var(--pw-text-mild);
  opacity: 0.35; transition: opacity 0.3s ease;
}
.dk-b-schritt.ist-aktiv, .dk-b-schritt.ist-fertig { opacity: 1; }
.dk-b-schritt.ist-fertig { color: var(--pw-erfolg-text); }
.dk-b-icon {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pw-gruen-100); font-size: 13px;
}
.dk-b-schritt.ist-fertig .dk-b-icon { background: var(--pw-erfolg-flaeche); color: var(--pw-erfolg-text); }
.dk-spinner-gruen {
  width: 13px; height: 13px; flex: none;
  border: 2.5px solid var(--pw-gruen-200); border-top-color: var(--pw-gruen-700);
  border-radius: 50%; display: inline-block;
  animation: pw-spin 0.7s linear infinite;
}

/* ---- Ergebnisliste ---- */
.dk-ergebnisse { flex: 1; max-width: 1080px; width: 100%; margin: 0 auto; padding: 28px 20px 60px; }
.dk-ergebnis-kopf {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 8px;
}
.dk-ergebnis-kopf h2 { font-size: 27px; font-weight: 800; color: var(--pw-text); margin: 0 0 6px; }
.dk-ergebnis-kopf p { font-size: 14.5px; color: var(--pw-text-mild); margin: 0; }
.dk-btn-outline {
  background: none; border: 1.5px solid var(--pw-gruen-600); border-radius: var(--pw-radius-s);
  padding: 9px 16px; font-size: 13.5px; font-weight: 700; color: var(--pw-gruen-700);
}
.dk-btn-outline:hover { background: var(--pw-gruen-100); border-color: var(--pw-gruen-700); color: var(--pw-gruen-700); }
.dk-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 18px; }
.dk-info-band {
  background: var(--pw-info-flaeche); border: 1px solid var(--pw-gruen-200);
  border-radius: var(--pw-radius-s); padding: 12px 16px; margin-bottom: 22px;
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; line-height: 1.55; color: var(--pw-info-text);
}
.dk-info-band strong { color: var(--pw-gruen-700); }
.dk-chip {
  background: var(--pw-flaeche-warm); border: 1px solid var(--pw-linie); border-radius: 999px;
  padding: 6px 14px; font-size: 13px; font-weight: 700; color: var(--pw-text-mild);
}
.dk-karten { display: flex; flex-direction: column; gap: 14px; }
.dk-karte {
  background: var(--pw-flaeche-warm); border: 1px solid var(--pw-linie); border-radius: var(--pw-radius-m);
  padding: 22px 24px; display: flex; gap: 22px; align-items: center;
  flex-wrap: wrap; animation: pw-fadeup 0.4s ease; cursor: pointer;
}
.dk-karte:hover { box-shadow: 0 6px 20px rgba(52, 75, 64, 0.08); border-color: var(--pw-gruen-300); }
.dk-initialen {
  width: 72px; height: 72px; border-radius: var(--pw-radius-m);
  color: var(--pw-flaeche-warm); display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; letter-spacing: 0.5px; flex: none;
}
/* Hochgeladenes Agentur-Logo statt Initialen: weiße Kachel, Logo nie beschnitten. */
.dk-agentur-logo {
  object-fit: contain; background: #fff;
  border: 1px solid var(--pw-linie, #e4dcd0);
}
.dk-karte-info { flex: 1; min-width: 240px; }
.dk-karte-titelzeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.dk-karte-titelzeile h3 { font-size: 18px; font-weight: 800; color: var(--pw-text); margin: 0; }
.dk-geprueft {
  background: var(--pw-erfolg-flaeche); color: var(--pw-erfolg-text); border-radius: 6px;
  padding: 3px 9px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.3px;
}
/* Eigene Prüfung: BEWUSST ohne Stempel-Optik (keine Versalien, kein Häkchen,
   flächiger Rahmen statt Plakette) – wir sind keine neutrale Prüfstelle, und
   ein Badge weckt genau diese Erwartung. Der Urheber steht im Text. */
.dk-nachweise {
  background: transparent; color: var(--pw-erfolg-text);
  border: 1px solid var(--pw-erfolg-text); border-radius: 6px;
  padding: 3px 9px; font-size: 11.5px; font-weight: 700;
}
/* Vor-Ort-Stempel: Das ist die eine Eigenschaft, die für die Familie wirklich
   den Unterschied macht – deshalb Stempel-Optik (Versalien, gesperrt, doppelter
   Rand) statt einer weiteren stillen Zeile. Bewusst gerade, nicht gekippt
   (Dennis, 24.07.2026): Der schiefe Stempel sah nach Versehen aus. Ebenso
   bewusst OHNE Häkchen und ohne Siegel-Anmutung (vgl. .dk-nachweise) – der
   Stempel sagt, was die Agentur zugesichert hat, er zeichnet sie nicht aus. */
.dk-vorort-stempel {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--pw-erfolg-flaeche); color: var(--pw-erfolg-text);
  border: 2px solid currentColor; border-radius: 7px;
  padding: 4px 10px 3px;
  font-size: 11.5px; font-weight: 800; line-height: 1.25;
  letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap;
}
.dk-vorort-stempel span { font-size: 12.5px; letter-spacing: 0; }
/* Zwei Plätze auf der Karte, immer nur einer sichtbar (Dennis, 24.07.2026):
   „rechtsbündig" geht in der Titelzeile nicht – die ist nur so breit wie die
   Textspalte, und die endet mitten auf der Karte. Auf der breiten Karte steht
   der Stempel deshalb oben in der Preisspalte (die ist rechtsbündig), auf der
   gestapelten Karte hinter dem Namen. `display: none` hält den jeweils
   anderen auch aus der Vorlesereihenfolge heraus. Im Profil-Kopf trägt der
   Stempel keine der beiden Klassen und ist immer sichtbar. */
.dk-karte-aktion > .dk-vorort-stempel { margin-bottom: 2px; }
@media (min-width: 641px) {
  .dk-vorort-stempel-schmal { display: none; }
}
@media (max-width: 640px) {
  .dk-vorort-stempel-breit { display: none; }
}
@media (max-width: 420px) {
  /* Auf schmalen Geräten lieber etwas kleiner als über den Kartenrand hinaus. */
  .dk-vorort-stempel { font-size: 10.5px; letter-spacing: 0.04em; padding: 3px 8px 2px; }
}

/* Reichweite: Wie die Agentur die Familie erreicht, ist der Grund für die
   Reihenfolge – deshalb eine eigene Zeile über der Bewertung, nicht ein Chip
   unter ferner liefen. Bei Vor-Ort-Agenturen steht die Zusage seit dem
   24.07.2026 im Stempel darüber; die Zeile trägt dann Sitz und Entfernung. */
.dk-reichweite {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--pw-text-mild); margin-bottom: 8px;
}
.dk-reichweite span { color: var(--pw-text-mild); }
.dk-reichweite-vor-ort { color: var(--pw-erfolg-text); }
.dk-reichweite-vor-ort strong { font-weight: 800; }
.dk-liste-trenner {
  margin: 8px 0 0; padding-top: 16px; border-top: 1px solid var(--pw-linie);
  font-size: 13.5px; color: var(--pw-text-mild); font-weight: 700;
}
.dk-bewertung { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dk-sterne { color: var(--pw-gold); font-size: 15px; letter-spacing: 1px; }
.dk-rating { font-size: 13.5px; font-weight: 800; color: var(--pw-text); }
.dk-reviews { font-size: 13px; color: var(--pw-text-mild); }
.dk-karte-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13.5px; color: var(--pw-text-mild); }
.dk-karte-aktion {
  text-align: right; display: flex; flex-direction: column;
  align-items: flex-end; gap: 10px; min-width: 180px;
}
.dk-ab { font-size: 12.5px; color: var(--pw-text-mild); font-weight: 700; }
.dk-preis { font-size: 26px; font-weight: 800; color: var(--pw-gruen-700); line-height: 1.1; }
.dk-preis-einheit { font-size: 14px; font-weight: 700; color: var(--pw-text-mild); }
.dk-preis-anfrage { font-size: 20px; font-weight: 800; color: var(--pw-gruen-700); line-height: 1.2; }
.dk-karte-buttons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dk-karte-reaktion { font-size: 12.5px; color: var(--pw-text-mild); }
.dk-btn-profil {
  background: none; border: 1.5px solid var(--pw-gruen-600); color: var(--pw-gruen-700);
  border-radius: var(--pw-radius-s); padding: 11px 16px; font-size: 14px; font-weight: 800;
}
.dk-btn-profil:hover { background: var(--pw-gruen-100); border-color: var(--pw-gruen-700); color: var(--pw-gruen-700); }
.dk-btn-anfrage {
  background: var(--pw-cta); color: #fff; border: none; border-radius: var(--pw-radius-s);
  padding: 11px 22px; font-size: 14.5px; font-weight: 800;
}
.dk-btn-anfrage:hover { background: var(--pw-cta-hover); }
/* Agentur mit aufgebrauchtem Monatskontingent: Der Knopf bleibt stehen, damit
   die Karte ihre Form behält – aber sichtbar stumpf, nicht nur klick-tot. */
.dk-btn-anfrage:disabled,
.dk-btn-anfrage:disabled:hover {
  background: var(--pw-flaeche-warm); color: var(--pw-text-mild);
  border: 1.5px solid var(--pw-linie); cursor: not-allowed;
}
.dk-ergebnis-hinweis { margin-top: 22px; font-size: 13px; color: var(--pw-text-mild); text-align: center; }
.dk-ergebnis-leer {
  background: var(--pw-flaeche-warm); border: 1px solid var(--pw-linie); border-radius: var(--pw-radius-m);
  padding: 34px 24px; text-align: center;
}
.dk-ergebnis-leer h3 { font-size: 19px; font-weight: 800; color: var(--pw-text); margin: 0 0 8px; }
.dk-ergebnis-leer p { font-size: 14.5px; color: var(--pw-text-mild); margin: 0 0 18px; }

/* ---- Overlays / Modals ---- */
.dk-overlay {
  position: fixed; inset: 0; background: rgba(22, 33, 27, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 40;
}
.dk-overlay.dk-overlay-anfrage { z-index: 50; }
.dk-panel {
  background: var(--pw-flaeche-warm); border-radius: var(--pw-radius-l); max-width: 640px; width: 100%;
  max-height: 92vh; overflow: auto; animation: pw-fadeup 0.3s ease;
}
.dk-panel-schmal { max-width: 480px; max-height: 90vh; padding: 30px; }
.dk-profil-kopf {
  background: linear-gradient(160deg, var(--pw-gruen-800), var(--pw-gruen-600));
  border-radius: var(--pw-radius-l) var(--pw-radius-l) 0 0; padding: 26px 30px; color: var(--pw-text-invers);
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
}
.dk-profil-kopf .dk-initialen { width: 64px; height: 64px; font-size: 22px; border: 2px solid rgba(255, 253, 249, 0.35); }
.dk-profil-kopf-info { flex: 1; min-width: 200px; }
.dk-profil-titelzeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dk-profil-titelzeile h3 { font-size: 21px; font-weight: 800; margin: 0; }
.dk-geprueft-hell {
  background: rgba(255, 253, 249, 0.15); border: 1px solid rgba(255, 253, 249, 0.3);
  border-radius: 6px; padding: 3px 9px; font-size: 11px; font-weight: 800;
}
.dk-nachweise-hell {
  background: transparent; border: 1px solid rgba(255, 253, 249, 0.45);
  color: var(--pw-text-invers);
  border-radius: 6px; padding: 3px 9px; font-size: 11px; font-weight: 700;
}
.dk-profil-bewertung { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.dk-profil-bewertung .dk-sterne { color: var(--pw-gold); font-size: 14px; }
.dk-profil-bewertung .dk-rating { color: var(--pw-text-invers); font-size: 13px; }
.dk-profil-bewertung .dk-reviews { color: var(--pw-gruen-200); font-size: 12.5px; }
.dk-schliessen {
  background: none; border: none; font-size: 24px; color: var(--pw-gruen-200);
  line-height: 1; padding: 2px; align-self: flex-start;
}
.dk-schliessen-dunkel { color: var(--pw-text-mild); font-size: 22px; }
.dk-profil-inhalt { padding: 26px 30px 30px; display: flex; flex-direction: column; gap: 24px; }
.dk-profil-inhalt h4 { font-size: 15px; font-weight: 800; color: var(--pw-gruen-700); margin: 0 0 12px; }

/* ---- Profil-Modal: „Auf einen Blick“ (Kern-Kacheln · Mehrwerte · Rahmendaten) ---- */
.dk-blick { display: grid; gap: 14px; }
.dk-profil-inhalt h4.dk-blick-titel {
  font-family: var(--pw-schrift-display);
  font-size: 1.4rem; font-weight: 800; color: var(--pw-gruen-700); margin: 0;
}
.dk-blick-balken {
  width: 48px; height: 4px; margin-top: 8px;
  border-radius: var(--pw-radius-pill); background: var(--pw-terra-400);
}
/* Kern-Kacheln und der Split darunter richten sich nach dem Platz, den sie
   tatsächlich haben – nicht nach der Fensterbreite (Dennis, 10.08.2026).
   Vorher waren es feste Spalten, die erst unter 768 px Fensterbreite
   umbrachen. In der Vorschau der Selbstauskunft steht dasselbe Fenster aber in
   einer 340-px-Spalte auf einem breiten Bildschirm: Dort blieben drei Kacheln
   nebeneinander stehen, „Das zeichnet die Agentur aus“ brach Wort für Wort um
   und die Rahmendaten liefen rechts aus dem Kasten. `auto-fit` mit einer
   Mindestbreite löst beides an einer Stelle – im Modal ändert sich nichts,
   weil dort weiterhin genug Platz für zwei bzw. drei Spalten ist. */
.dk-blick-kern {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}
.dk-blick-kachel {
  background: var(--pw-papier); border-radius: var(--pw-radius-m);
  padding: 18px 20px; min-width: 0;
}
.dk-blick-wert {
  font-family: var(--pw-schrift-display);
  font-size: 1.5rem; font-weight: 800; line-height: 1.25; color: var(--pw-gruen-900);
  font-variant-numeric: tabular-nums; overflow-wrap: break-word;
}
.dk-blick-wert-lang { font-size: 1.05rem; line-height: 1.45; }
.dk-blick-kachel-label {
  margin-top: 4px; font-size: 0.9rem; line-height: 1.5; color: var(--pw-text-mild);
  hyphens: auto; overflow-wrap: break-word;
}
.dk-blick-split {
  display: grid; gap: 20px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.dk-blick-plus {
  background: var(--pw-erfolg-flaeche); border-radius: var(--pw-radius-m);
  padding: 18px 22px; display: grid; gap: 12px; align-content: start;
}
.dk-blick-eyebrow {
  font-family: var(--pw-schrift-text);
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--pw-gruen-500);
}
.dk-blick-eyebrow-plus { color: var(--pw-erfolg-text); }
.dk-blick-punkt { font-size: 1.0625rem; font-weight: 800; color: var(--pw-text); line-height: 1.5; }
.dk-blick-daten { align-content: start; }
.dk-blick-daten .dk-blick-eyebrow { margin-bottom: 10px; }
/* Steckbrief-Zeile „Modell · A1-Entsendung“. Der Wert darf umbrechen statt aus
   dem Kasten zu laufen: Ohne `min-width: 0` schrumpft ein Flex-Kind nie unter
   seine Inhaltsbreite, und genau das schob den Wert in schmalen Spalten über
   den Rand. Passt beides nicht nebeneinander, rutscht der Wert unter seine
   Beschriftung – dann links ausgerichtet, weil rechtsbündig auf einer eigenen
   Zeile wie ein Fehler aussieht. */
.dk-blick-zeile {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px;
  padding: 8px 0; border-top: 1px solid var(--pw-linie);
  font-size: 0.95rem; line-height: 1.5;
}
.dk-blick-zeile span { color: var(--pw-text-mild); }
.dk-blick-zeile strong {
  min-width: 0; font-weight: 700; color: var(--pw-text);
  text-align: right; overflow-wrap: break-word;
}
@media (max-width: 767px) {
  .dk-blick { gap: 12px; }
  .dk-profil-inhalt h4.dk-blick-titel { font-size: 1.25rem; }
  .dk-blick-balken { width: 44px; }
  .dk-blick-kern { gap: 8px; }
  .dk-blick-kachel { padding: 12px 10px; }
  .dk-blick-wert { font-size: 1.05rem; }
  .dk-blick-wert-lang { font-size: 0.9rem; }
  .dk-blick-kachel-label { margin-top: 3px; font-size: 0.75rem; }
  .dk-blick-split { grid-template-columns: 1fr; gap: 16px; }
  .dk-blick-plus { padding: 16px 18px; gap: 10px; }
  .dk-blick-eyebrow { font-size: 0.72rem; }
  .dk-blick-punkt { font-size: 1rem; }
  .dk-blick-daten .dk-blick-eyebrow { margin-bottom: 8px; }
  .dk-blick-zeile { font-size: 0.9rem; }
}
.dk-vorteile { display: flex; flex-direction: column; gap: 9px; }
.dk-vorteil { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--pw-text-mild); line-height: 1.5; }
.dk-vorteil .dk-check-dot { background: var(--pw-erfolg-flaeche); color: var(--pw-erfolg-text); margin-top: 2px; }
.dk-kontakt-karte {
  border: 1px solid var(--pw-linie); border-radius: var(--pw-radius-m); padding: 18px 20px;
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
}
.dk-kontakt-foto {
  width: 76px; height: 76px; border-radius: 50%; object-fit: cover;
  flex: none; border: 3px solid var(--pw-gruen-100);
}
.dk-kontakt-initialen {
  width: 76px; height: 76px; border-radius: 50%; flex: none;
  background: var(--pw-gruen-100); color: var(--pw-gruen-700); border: 3px solid var(--pw-gruen-200);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800;
}
.dk-kontakt-info { flex: 1; min-width: 180px; }
.dk-kontakt-label { font-size: 12px; font-weight: 800; color: var(--pw-text-mild); letter-spacing: 0.4px; margin-bottom: 3px; }
.dk-kontakt-name { font-size: 16.5px; font-weight: 800; color: var(--pw-text); }
.dk-kontakt-rolle { font-size: 13.5px; color: var(--pw-text-mild); margin-top: 2px; }
.dk-kontakt-ort { font-size: 13.5px; color: var(--pw-text-mild); margin-top: 6px; }
.dk-kontakt-telefon { font-size: 13.5px; color: var(--pw-text-mild); margin-top: 6px; }
.dk-karte-platzhalter {
  width: 120px; height: 82px; border-radius: var(--pw-radius-s);
  background: repeating-linear-gradient(45deg, var(--pw-gruen-50), var(--pw-gruen-50) 8px, var(--pw-gruen-100) 8px, var(--pw-gruen-100) 16px);
  border: 1px solid var(--pw-gruen-100); display: flex; align-items: center; justify-content: center; flex: none;
}
.dk-karte-platzhalter span { font-family: monospace; font-size: 11px; color: var(--pw-text-mild); }
.dk-preisleiste {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; background: var(--pw-terra-50); border-radius: var(--pw-radius-m); padding: 16px 20px;
}
.dk-preisleiste .dk-preis { font-size: 24px; }

/* ---- Anfrage-Modal ---- */
.dk-modal-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
.dk-modal-kopf h3 { font-size: 20px; font-weight: 800; color: var(--pw-text); margin: 0; }
.dk-modal-sub { font-size: 13.5px; color: var(--pw-text-mild); margin: 0 0 14px; }
.dk-anfrage-kontext { margin-bottom: 18px; display: flex; flex-direction: column; gap: 10px; }
.dk-anfrage-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.dk-anfrage-chips .dk-chip { font-size: 12px; padding: 4px 11px; }
.dk-anfrage-preis {
  background: var(--pw-terra-50); border-radius: var(--pw-radius-s);
  padding: 9px 13px; font-size: 13.5px; color: var(--pw-text-mild);
}
.dk-anfrage-preis strong { color: var(--pw-gruen-700); font-size: 15px; font-weight: 800; }
.dk-feld-hinweis { font-size: 12px; font-weight: 600; color: var(--pw-gruen-600); line-height: 1.45; }
.dk-formular { display: flex; flex-direction: column; gap: 14px; }
.dk-feld { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 800; color: var(--pw-text-mild); }
.dk-feld input, .dk-feld textarea {
  border: 1.5px solid var(--pw-linie-stark); border-radius: var(--pw-radius-s); padding: 11px 13px;
  font-size: 15px; color: var(--pw-text); background: var(--pw-flaeche);
  font-weight: 400;
}
.dk-feld input:focus, .dk-feld textarea:focus { border-color: var(--pw-gruen-600); }
.dk-feld textarea { resize: vertical; }
.dk-einwilligung {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; color: var(--pw-text-mild); line-height: 1.5; font-weight: 400;
}
.dk-einwilligung input { margin-top: 3px; accent-color: var(--pw-gruen-700); flex: none; }
.dk-formular-fehler {
  background: var(--pw-fehler-flaeche); color: var(--pw-fehler); border-radius: var(--pw-radius-s);
  padding: 10px 13px; font-size: 13.5px; font-weight: 700; line-height: 1.5;
}
.dk-btn-senden {
  background: var(--pw-cta); color: #fff; border: none; border-radius: var(--pw-radius-s);
  padding: 14px; font-size: 15.5px; font-weight: 800; margin-top: 4px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.dk-btn-senden:hover { background: var(--pw-cta-hover); }
.dk-btn-senden:disabled { opacity: 0.75; cursor: wait; }
.dk-hp-feld { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Erfolgsansicht */
.dk-erfolg { text-align: center; padding: 18px 0 6px; }
.dk-erfolg-icon {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--pw-erfolg-flaeche); color: var(--pw-erfolg); font-size: 26px;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.dk-erfolg h3 { font-size: 21px; font-weight: 800; color: var(--pw-text); margin: 0 0 8px; }
.dk-erfolg p { font-size: 14.5px; color: var(--pw-text-mild); line-height: 1.55; margin: 0 0 22px; }
.dk-erfolg .dk-kontakt-karte { text-align: left; margin-bottom: 22px; }
.dk-btn-gruen {
  background: var(--pw-gruen-700); color: #fff; border: none; border-radius: var(--pw-radius-s);
  padding: 12px 26px; font-size: 15px; font-weight: 800;
}
.dk-btn-gruen:hover { background: var(--pw-gruen-800); }

/* ---- Footer ----
   Seit 22.07.2026 ein einziger Footer für alle Seiten (Dennis: „das ist die
   Startseite der Hauptseite, keine Landingpage"). Der frühere schmale Einzeiler
   der Startseite und das helle Vier-Spalten-Raster der Rechtstexte sind hier
   zusammengeführt: Marke mit Haftungshinweis plus drei Linkspalten, darunter
   die Schlusszeile. */
.dk-footer { background: var(--pw-gruen-900); color: var(--pw-gruen-200); margin-top: auto; }
.dk-footer-inner {
  max-width: 1080px; margin: 0 auto; padding: 40px 20px 28px;
  display: grid; gap: 28px; grid-template-columns: 1fr;
  font-size: 14px;
}
@media (min-width: 760px) {
  .dk-footer-inner { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
}
.dk-footer a { color: var(--pw-gruen-200); text-decoration: none; }
.dk-footer a:hover { color: #fff; text-decoration: underline; }
.dk-footer-logo { height: 34px; width: auto; margin-bottom: 12px; display: block; }
.dk-footer-marke p {
  margin: 0; max-width: 34em; line-height: 1.6;
  color: var(--pw-gruen-200); opacity: 0.85; font-size: 13.5px;
}
.dk-footer-titel {
  margin: 0 0 10px; font-weight: 800; font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase; color: #fff;
}
.dk-footer-links { list-style: none; margin: 0; padding: 0; }
.dk-footer-links li { margin-bottom: 8px; }
.dk-footer-schluss { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.dk-footer-schluss-inner {
  max-width: 1080px; margin: 0 auto; padding: 16px 20px 22px;
  font-size: 13px; opacity: 0.75;
}

@media (max-width: 640px) {
  .dk-karte-aktion { min-width: 100%; text-align: left; align-items: stretch; }
  .dk-karte-buttons { justify-content: stretch; }
  .dk-karte-buttons button { flex: 1; }
  .dk-profil-kopf, .dk-profil-inhalt { padding-left: 20px; padding-right: 20px; }
  .dk-panel-schmal { padding: 22px 20px; }
}

/* ============ Rundtisch-Paket (16.07.2026): Warteliste, Prüf-Modal,
   Preis-Transparenz, Erreichbarkeit, Google-Quelle, klickbare Chips ============ */

/* --- Region-Warteliste im 0-Treffer-Fall (Hero + leere Ergebnisliste) --- */
.dk-warteliste-form {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px;
  margin-top: 12px; align-items: center;
}
.dk-warteliste-form input {
  border: 1.5px solid var(--pw-linie); border-radius: 10px; padding: 11px 14px;
  font: inherit; font-size: 15px; min-width: 0; background: var(--pw-flaeche-warm);
}
.dk-warteliste-form input:focus { outline: 3px solid var(--pw-fokus); outline-offset: 1px; }
.dk-warteliste-form .dk-btn-primary { min-height: 44px; white-space: nowrap; }
.dk-warteliste-hinweis {
  grid-column: 1 / -1; font-size: 12px; font-weight: 600;
  color: var(--pw-text-mild); line-height: 1.45;
}
.dk-warteliste-hinweis a { color: inherit; }
.dk-warteliste-fehler {
  grid-column: 1 / -1; font-size: 13px; font-weight: 700; color: var(--pw-fehler);
}
.dk-warteliste-ok {
  display: block; font-size: 14.5px; font-weight: 700; line-height: 1.55;
  color: var(--pw-erfolg-text);
}
@media (max-width: 560px) {
  .dk-warteliste-form { grid-template-columns: 1fr; }
}
.dk-ergebnis-leer-warteliste { font-size: 14.5px; color: var(--pw-text-mild); line-height: 1.6; }

/* --- „Neu im Vergleich" statt geliehener Sterne --- */
.dk-neu-badge {
  display: inline-block; background: var(--pw-gruen-100); color: var(--pw-gruen-700);
  border: 1px solid var(--pw-gruen-200); border-radius: 999px;
  padding: 3px 11px; font-size: 12px; font-weight: 800; letter-spacing: 0.2px;
}

/* --- Quellvermerk (Google-Bewertungen, bewusst ohne Link) --- */
.dk-quelle { font-size: 12px; font-weight: 700; color: var(--pw-text-mild); }
.dk-profil-bewertung .dk-quelle { color: var(--pw-gruen-200); }

/* --- Google-Rezensionen im Profil --- */
.dk-review {
  background: var(--pw-flaeche); border: 1px solid var(--pw-linie);
  border-radius: var(--pw-radius-s); padding: 12px 14px; margin-top: 10px;
}
.dk-review-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dk-review-kopf .dk-sterne { font-size: 13px; }
.dk-review-kopf strong { font-size: 13px; color: var(--pw-text); }
.dk-review-zeit { font-size: 12px; color: var(--pw-text-mild); }
.dk-review p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--pw-text-mild); }

/* --- Preis-Transparenz auf den Karten --- */
.dk-preisinfo-toggle {
  background: none; border: 0; padding: 0; margin-top: 10px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700;
  color: var(--pw-gruen-600); text-decoration: underline; text-underline-offset: 3px;
}
.dk-preisinfo-toggle:hover { color: var(--pw-gruen-700); }
.dk-preisinfo-toggle:focus-visible { outline: 3px solid var(--pw-fokus); outline-offset: 2px; border-radius: 4px; }
.dk-preisinfo {
  margin-top: 8px; padding: 10px 12px; background: var(--pw-flaeche);
  border: 1px solid var(--pw-linie); border-radius: var(--pw-radius-s);
  font-size: 13px; line-height: 1.55; color: var(--pw-text-mild); max-width: 560px;
}
.dk-preisinfo-anfrage {
  margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--pw-text-mild);
  max-width: 280px;
}
.dk-preisleiste .dk-preisinfo-anfrage { margin-top: 4px; text-align: left; }

/* --- „GEPRÜFT"-Badges sind jetzt klickbar (Prüfkriterien-Modal) --- */
button.dk-geprueft { border: 0; }
button.dk-nachweise, button.dk-nachweise-hell { font-family: inherit; }
/* Qualifizierung direkt am Eintrag, nicht als Fußnote – ein nachgelagerter
   Hinweis reicht nicht, wenn die Auszeichnung optisch dominiert. */
.dk-siegel-hinweis { font-style: normal; font-size: 0.92em; color: var(--pw-text-mild); }
.dk-geprueft-klick { cursor: pointer; font-family: inherit; }
.dk-geprueft-klick:hover { text-decoration: underline; text-underline-offset: 2px; }
.dk-geprueft-klick:focus-visible { outline: 3px solid var(--pw-fokus); outline-offset: 2px; }

/* --- Prüfkriterien-Modal --- */
.dk-pruef-liste { display: flex; flex-direction: column; gap: 14px; margin: 6px 0 14px; }
.dk-pruef-punkt { display: flex; gap: 10px; align-items: flex-start; }
.dk-pruef-punkt strong { display: block; font-size: 14.5px; color: var(--pw-text); }
.dk-pruef-punkt span + div span,
.dk-pruef-punkt div span { display: block; font-size: 13.5px; line-height: 1.55; color: var(--pw-text-mild); }
.dk-pruef-fuss {
  font-size: 13.5px; font-weight: 700; color: var(--pw-gruen-700);
  background: var(--pw-gruen-100); border-radius: var(--pw-radius-s); padding: 10px 12px;
}
.dk-pruef-mehr { margin: 10px 0 0; font-size: 14px; font-weight: 800; }

/* --- Erreichbarkeits-Auswahl im Anfrage-Modal --- */
.dk-erreichbarkeit { border: 0; padding: 0; margin: 0; }
.dk-erreichbarkeit legend {
  font-size: 13.5px; font-weight: 700; color: var(--pw-text); padding: 0; margin-bottom: 8px;
}
.dk-erreichbarkeit .dk-optional { font-weight: 600; color: var(--pw-text-mild); }
.dk-radio-pillen { display: flex; flex-wrap: wrap; gap: 8px; }
.dk-radio-pillen label { position: relative; cursor: pointer; }
.dk-radio-pillen input {
  position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;
}
.dk-radio-pillen span {
  display: inline-block; border: 1.5px solid var(--pw-linie); border-radius: 999px;
  padding: 8px 14px; font-size: 13px; font-weight: 700; color: var(--pw-text-mild);
  background: var(--pw-flaeche-warm); min-height: 36px;
}
.dk-radio-pillen input:checked + span {
  background: var(--pw-gruen-700); border-color: var(--pw-gruen-700); color: var(--pw-text-invers);
}
.dk-radio-pillen input:focus-visible + span { outline: 3px solid var(--pw-fokus); outline-offset: 2px; }
.dk-radio-pillen label:hover span { border-color: var(--pw-gruen-400); }

/* --- Erfolgsansicht: „Was passiert jetzt?" --- */
.dk-erfolg-steps {
  text-align: left; margin: 14px auto 4px; padding-left: 22px; max-width: 400px;
  display: flex; flex-direction: column; gap: 7px;
  font-size: 14px; line-height: 1.55; color: var(--pw-text-mild);
}
.dk-erfolg-steps strong { color: var(--pw-text); }
/* Offenlegung zur Mehrfach-Anfrage – dezent, aber lesbar (Zielgruppe 50+):
   steht unter dem Ansprechpartner, nicht über den nächsten Schritten. */
.dk-erfolg .dk-erfolg-hinweis {
  text-align: left; margin: 0 auto 18px; max-width: 400px;
  font-size: 14px; line-height: 1.6; color: var(--pw-text-mild);
  border-top: 1px solid var(--pw-linie); padding-top: 12px;
}

/* --- Klickbare Kontext-Chips im Ergebnis --- */
button.dk-chip { border: 1px solid var(--pw-linie); }
.dk-chip-klick { cursor: pointer; font-family: inherit; transition: border-color 0.15s ease, background 0.15s ease; }
.dk-chip-klick:hover { border-color: var(--pw-gruen-400); background: var(--pw-gruen-50); }
.dk-chip-klick:focus-visible { outline: 3px solid var(--pw-fokus); outline-offset: 2px; }
.dk-chip-stift { font-size: 11px; color: var(--pw-gruen-600); }

.dk-warteliste-text { margin: 0 0 4px; }