/* ============================================================
   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"],
.dk-nav a[aria-current="true"] { border-bottom-color: var(--pw-gruen-700); }  /* "true": Artikel unter „Ratgeber“ */
/* 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;
}
/* Reihenfolge-Aussage unter dem Claim (Dennis, 17.08., Variante „H"):
   etwas kleiner, Überschriftschrift, weiß – hervorgehoben ist nur der
   Teil „Kontaktdaten zuletzt" in Terra (Farbe der „24" im Logo und des
   CTA, auf Grün-800 rund 4,5:1). */
.dk-h1-reihenfolge {
  font-size: 1.25rem; line-height: 1.3; font-weight: 800;
  color: #fff; margin-top: 6px; text-wrap: pretty;
}
.dk-h1-kontaktdaten { color: var(--pw-terra-300); }
/* 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; }

/* Ein <a> mit Knopf-Klasse ist ein Knopf, kein Link — und muss beim Überfahren
   seine Schrift behalten.

   Der Fehler, den diese Regel behebt (gefunden 31.08.2026 von Dennis auf dem
   Agenturprofil): `a:hover { color: … }` ist mit (0,1,1) spezifischer als eine
   einzelne Knopf-Klasse mit (0,1,0). Beim Überfahren gewann also die
   Link-Regel und färbte die weiße Schrift in --pw-terra-700 — exakt die Farbe,
   die --pw-cta-hover als Hintergrund setzt. Der Knopf wurde eine leere
   orangene Fläche, und ausgerechnet auf „Kostenlos anfragen“, dem Weg in den
   Funnel.

   Warum es lange niemandem auffiel: Für den Kopfzeilen-Knopf gab es mit
   `.dk-header .dk-header-cta:hover { color: #fff }` längst ein Einzelpflaster
   — dort, wo man am häufigsten hinschaut, war der Fehler also verdeckt.
   Deshalb hier eine Regel für alle gefüllten Knöpfe statt des nächsten
   Pflasters. Umrandete Knöpfe (.dk-btn-outline, .dk-btn-profil) nennen ihre
   Hover-Farbe bereits selbst und brauchen sie nicht.

   Die Unterstreichung stammt aus derselben Regel (`text-decoration: underline`)
   und muss mit weg: Ein unterstrichener Knopftext liest sich wie ein Link, der
   versehentlich in einer Fläche steckt. */
a.dk-btn-primary:hover,
a.dk-btn-anfrage:hover,
a.dk-btn-senden:hover,
a.dk-btn-gruen:hover { color: #fff; text-decoration: none; }
.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-h1-reihenfolge { font-size: 1.65rem; margin-top: 10px; }
  .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) {
  /* Handy-Hero seit 17.08.2026 im selben Grün wie der Desktop (Dennis;
     der Handoff 3b war hell „Papier"). Hintergrund erbt vom globalen .dk-hero;
     hier nur kompaktes Padding und kein horizontales Scrollen. */
  .dk-hero {
    color: var(--pw-text-invers);
    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. */
  /* Seit PLAN 5.1 ein <p class="dk-m3b-titel"> statt einer zweiten H1
     (die H1 der Seite ist die im Desktop-Hero). Eigene Klasse mit allen
     Eigenschaften, damit die allgemeine .dk-m3b-kopf-p-Regel darunter
     nicht durchschlägt. */
  .dk-m3b-kopf .dk-m3b-titel {
    margin: 0; font-family: var(--pw-schrift-display);
    font-size: 25px; font-weight: 900; line-height: 1.2; color: #fff;
    max-width: none;
  }
  .dk-m3b-kopf p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--pw-gruen-200); max-width: 320px; }
  /* Kopf im Desktop-Stil (Dennis, 17.08.2026, „M1", seit dem Grün-Wechsel mit
     denselben Farben wie am Desktop): Thema-Zeile klein über der H1,
     Reihenfolge-Zeile darunter – „Kontaktdaten zuletzt" in Terra-300 wie die
     „24" im Logo. Der Gold-Marker der H1 ist derselbe wie am Desktop. */
  .dk-m3b-thema { font-size: 13px; font-weight: 800; letter-spacing: 0.03em; color: var(--pw-gruen-200); margin-bottom: -2px; }
  .dk-m3b-kopf .dk-m3b-titel .dk-h1-marker { border-radius: 3px; }
  .dk-m3b-reihenfolge {
    font-family: var(--pw-schrift-display); font-size: 17px; line-height: 1.3; font-weight: 800;
    color: #fff; margin-top: 2px;
  }
  .dk-m3b-kontaktdaten { color: var(--pw-terra-300); }

  /* 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-gruen-100); font-size: 0.68rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.06em; padding: 0 2px;
  }
  /* Auf dem dunklen Grund sind die anonymen Zeilen durchscheinende Kacheln –
     die weiße Empfehlungs-Karte dazwischen leuchtet dadurch stärker heraus. */
  .dk-m3b-anon { opacity: 0.75; }
  .dk-m3b-anon-karte {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16);
    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: rgba(255, 255, 255, 0.22); flex: none; }
  .dk-m3b-anon-mitte { flex: 1; min-width: 0; }
  .dk-m3b-anon-name { height: 9px; background: rgba(255, 255, 255, 0.22); 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: rgba(255, 255, 255, 0.22); 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: #fff; }
  /* Pfeil in Gold: Terra ginge auf dem Grün fast unter. */
  .dk-m3b-pfeil svg { color: var(--pw-gold); 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);
    /* Gold-Glow wie am Desktop, seit der Hero auch hier dunkel ist. */
    box-shadow: 0 0 0 4px rgba(232, 163, 61, 0.22), 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; }

/* ---- Kriterien-Leiste über der Ergebnisliste (Entwurf 17.08.2026) ----
   Pillen „Name · Wert", jede öffnet ein kleines Fenster (Popover) mit den
   Optionen der Frage bzw. einem PLZ-Feld; die Wahl gilt sofort. */
.dk-kriterien { position: relative; margin: 12px 0 18px; }
.dk-kriterien-kopf {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px; font-size: 13px;
}
.dk-kriterien-titel {
  font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--pw-gruen-700);
}
.dk-kriterien-hinweis { color: var(--pw-text-mild); }
.dk-kriterien-status {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  font-weight: 700; color: var(--pw-gruen-700);
}
.dk-kriterien-pillen { display: flex; flex-wrap: wrap; gap: 8px; }
.dk-krit {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--pw-flaeche-warm); border: 1.5px solid var(--pw-linie);
  border-radius: var(--pw-radius-pill); padding: 7px 10px 7px 12px;
  font-family: inherit; font-size: 13.5px; line-height: 1.3; color: var(--pw-text);
  cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.dk-krit:hover, .dk-krit.ist-offen { border-color: var(--pw-gruen-500); background: var(--pw-gruen-50); }
.dk-krit:focus-visible { outline: 3px solid var(--pw-fokus); outline-offset: 2px; }
.dk-krit-name { color: var(--pw-text-mild); font-weight: 600; }
.dk-krit-name::after { content: '·'; margin-left: 6px; color: var(--pw-gruen-300); }
.dk-krit-wert { font-weight: 800; color: var(--pw-gruen-700); }
.dk-krit-stift { font-size: 11px; color: var(--pw-gruen-600); }
.dk-krit-popover {
  position: absolute; z-index: 30; width: min(400px, 100%);
  background: var(--pw-flaeche); border: 1px solid var(--pw-linie);
  border-radius: var(--pw-radius-m); box-shadow: 0 16px 44px rgba(52, 75, 64, 0.2);
  padding: 14px; animation: pw-fadeup 0.18s ease;
}
.dk-krit-pop-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dk-krit-pop-kopf b { font-size: 15px; line-height: 1.3; color: var(--pw-text); }
.dk-krit-pop-zu {
  border: 0; background: none; padding: 0 2px; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--pw-text-mild);
}
.dk-krit-pop-zu:hover { color: var(--pw-text); }
.dk-krit-optionen { display: grid; gap: 6px; }
.dk-krit-option {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  background: var(--pw-flaeche-warm); border: 1.5px solid var(--pw-linie);
  border-radius: var(--pw-radius-s); padding: 9px 12px;
  font-family: inherit; color: var(--pw-text); cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dk-krit-option:hover { border-color: var(--pw-gruen-400); background: var(--pw-gruen-50); }
.dk-krit-option:focus-visible { outline: 3px solid var(--pw-fokus); outline-offset: 1px; }
.dk-krit-option.ist-gewaehlt { border-color: var(--pw-gruen-700); background: var(--pw-gruen-100); }
.dk-krit-option-haken {
  flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  border: 1.5px solid var(--pw-gruen-300); display: inline-grid; place-items: center;
  font-size: 12px; font-weight: 800; color: #fff;
}
.dk-krit-option.ist-gewaehlt .dk-krit-option-haken { background: var(--pw-gruen-700); border-color: var(--pw-gruen-700); }
.dk-krit-option-label { display: block; font-size: 14.5px; font-weight: 700; }
.dk-krit-option-sub { display: block; margin-top: 1px; font-size: 12.5px; color: var(--pw-text-mild); }
.dk-krit-plz { display: flex; gap: 8px; }
.dk-krit-plz-input {
  flex: 1; min-width: 0; border: 1.5px solid var(--pw-linie); border-radius: var(--pw-radius-s);
  padding: 10px 12px; font-family: inherit; font-size: 16px; color: var(--pw-text);
}
.dk-krit-plz-input:focus { outline: 3px solid var(--pw-fokus); outline-offset: 1px; }
.dk-krit-plz .dk-btn-primary { padding: 10px 14px; font-size: 14px; }
.dk-krit-fehler { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--pw-fehler); }
/* Während des Nachladens bleibt die alte Liste gedimmt stehen – nichts springt. */
.dk-karten.ist-ladend { opacity: 0.45; pointer-events: none; transition: opacity 0.2s ease; }
.dk-krit-backdrop { display: none; }
/* Handy: Das Fenster wird zum Bodensheet (Daumen-Reichweite, nie unter dem
   Fold), darunter ein leichter Schleier; die Pillen sind etwas kompakter. */
@media (max-width: 599.98px) {
  .dk-krit-popover {
    position: fixed; left: 0 !important; right: 0; top: auto !important; bottom: 0;
    width: 100%; max-height: 82vh; overflow-y: auto;
    border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(46, 77, 63, 0.28);
    padding: 16px 16px calc(18px + env(safe-area-inset-bottom));
    animation: pw-sheet-hoch 0.22s ease;
  }
  .dk-krit-backdrop { display: block; position: fixed; inset: 0; z-index: 29; background: rgba(46, 77, 63, 0.35); }
  .dk-krit-backdrop[hidden] { display: none; }
  .dk-krit { font-size: 12.5px; padding: 5px 8px 5px 10px; gap: 5px; }
  .dk-kriterien-status { margin-left: 0; }
}
@keyframes pw-sheet-hoch {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.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-karte-zusage { font-size: 12.5px; color: var(--pw-text-mild); margin-top: 6px; }
.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); }
/* ---- 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-person:empty { display: none; }
.dk-anfrage-person { margin-bottom: 14px; }
.dk-anfrage-person .dk-kontakt-karte { padding: 12px 14px; gap: 14px; flex-wrap: nowrap; background: var(--pw-gruen-50); border-color: var(--pw-gruen-100); }
.dk-anfrage-person .dk-kontakt-foto,
.dk-anfrage-person .dk-kontakt-initialen { width: 60px; height: 60px; font-size: 20px; }
.dk-anfrage-person .dk-kontakt-info { min-width: 0; }
.dk-anfrage-person .dk-kontakt-ort { margin-top: 3px; }
.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;
}
/* Fehler am Feld (05.10.2026) – rot umrandet, Meldung direkt darunter. */
.dk-feld input[aria-invalid="true"] { border-color: var(--pw-fehler); }
.dk-einwilligung input[aria-invalid="true"] { outline: 2px solid var(--pw-fehler); outline-offset: 2px; }
.dk-formular .dk-feld-fehler { line-height: 1.45; }
.dk-formular .dk-einwilligung + .dk-feld-fehler { margin-top: -6px; }
.dk-telefon-email { margin: 8px 0 0; }
/* „So geht es weiter“ – dieselben drei Zusagen wie nach dem Absenden. */
.dk-anfrage-ablauf {
  background: var(--pw-gruen-50); border-radius: var(--pw-radius-s);
  padding: 11px 14px; font-size: 13.5px; color: var(--pw-text-mild); line-height: 1.5;
}
.dk-anfrage-ablauf-titel { margin: 0 0 4px; font-weight: 800; color: var(--pw-text); }
.dk-anfrage-ablauf ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 2px; }
.dk-anfrage-ablauf strong { color: var(--pw-gruen-700); }
.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; }
  /* Passt der Anfrage-Knopf auf dem Handy nicht neben „Profil ansehen“:
     Grundbreite = Textbreite, dann rutscht er in eine eigene Zeile statt
     dreizeilig umzubrechen (23.09.2026, damals „Persönliches Angebot
     erhalten“; seit 24.09.2026 „Betreuungskraft anfragen“, seit 28.09.2026 „Verfügbarkeit anfragen“ – PLAN 5.24). */
  .dk-karte-buttons button { flex: 1 1 auto; }
  .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;
}
/* Zwei Aufklapper untereinander statt nebeneinander (Dennis, 16.09.2026):
   inline liefen „So rechnen wir …“ und „Was ist im Preis enthalten?“ zu einer
   Zeile zusammen und sahen aus wie ein einziger Link. Der Pfeil zeigt, dass
   hier etwas aufklappt. */
.dk-preisinfo-toggle { display: block; text-align: left; }
.dk-preisinfo-toggle + .dk-preisinfo + .dk-preisinfo-toggle { margin-top: 6px; }
.dk-preisinfo-toggle::after {
  content: '▾'; display: inline-block; margin-left: 6px; text-decoration: none;
  transition: transform .15s ease;
}
.dk-preisinfo-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.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-preis-gesamt {
  font-size: 12.5px; line-height: 1.4; color: var(--pw-text-mild); font-weight: 600; margin-top: 2px;
}
.dk-preis-gesamt span { color: var(--pw-gruen-700); font-weight: 800; }
.dk-zuschuss-zeile { display: flex; justify-content: space-between; gap: 12px; color: var(--pw-text); }
.dk-zuschuss-summe { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--pw-linie); font-weight: 800; }
.dk-zuschuss-summe strong { color: var(--pw-gruen-700); }
.dk-zuschuss-liste { list-style: none; margin: 6px 0 0; padding: 0; }
.dk-zuschuss-liste li { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.dk-zuschuss-liste small { display: block; font-size: 12px; color: var(--pw-text-mild); }
.dk-zuschuss-liste strong { white-space: nowrap; color: var(--pw-text); }
.dk-preisinfo p { margin: 8px 0 0; font-size: 12.5px; }
.dk-anfrage-preis span { font-size: 13px; color: var(--pw-text-mild); }

/* --- „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; }


/* ===================== Mehrfachanfrage (PLAN 5.25) =====================
   Sammel-Knopf über der Ergebnisliste, Auswahl im Anfrage-Fenster und die
   Auswahlliste nach der ersten Anfrage (Entwurf A vom 17.09.2026). */
.dk-mf-band {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--pw-gruen-50); border: 1.5px solid var(--pw-gruen-300);
  border-radius: var(--pw-radius-m); padding: 14px 16px; margin-bottom: 14px;
}
.dk-mf-band-text { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; }
.dk-mf-band-text strong { font-family: var(--pw-schrift-display); font-size: 16px; color: var(--pw-text); }
.dk-mf-band-text span { font-size: 14px; line-height: 1.5; color: var(--pw-text-mild); }
.dk-mf-band-knopf {
  flex: none; min-height: 46px; padding: 11px 18px; border-radius: var(--pw-radius-s);
  border: 2px solid var(--pw-gruen-700); background: #fff; color: var(--pw-gruen-700);
  font-size: 15px; font-weight: 800; cursor: pointer;
}
.dk-mf-band-knopf:hover { background: var(--pw-gruen-700); color: #fff; }
.dk-mf-band-knopf:focus-visible { outline: 3px solid var(--pw-fokus); outline-offset: 2px; }
@media (max-width: 599.98px) { .dk-mf-band-knopf { width: 100%; } }

.dk-mf-auswahl[hidden], .dk-mf-mehr[hidden], .dk-mf-erfolg-liste[hidden] { display: none; }
.dk-mf-auswahl { margin: 4px 0 14px; }
.dk-mf-kopf { font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--pw-text-mild); margin-bottom: 8px; }
.dk-mf-liste { display: grid; gap: 8px; }
.dk-mf-zeile {
  display: flex; gap: 12px; align-items: center; padding: 10px 12px; text-align: left;
  border: 2px solid var(--pw-linie); border-radius: var(--pw-radius-m);
  background: var(--pw-flaeche-warm); cursor: pointer;
  transition: border-color .15s, background .15s, opacity .15s;
}
.dk-mf-zeile:hover { border-color: var(--pw-gruen-300); }
.dk-mf-zeile:focus-visible { outline: 3px solid var(--pw-fokus); outline-offset: 2px; }
.dk-mf-zeile.ist-an { border-color: var(--pw-erfolg); background: var(--pw-erfolg-flaeche); }
.dk-mf-zeile.ist-gesperrt { opacity: .5; cursor: not-allowed; }
.dk-mf-kasten {
  flex: none; width: 26px; height: 26px; border-radius: 7px; border: 2px solid var(--pw-linie-stark);
  display: grid; place-items: center; color: transparent; font-weight: 900; font-size: 15px; background: #fff;
}
.dk-mf-zeile.ist-an .dk-mf-kasten { background: var(--pw-erfolg); border-color: var(--pw-erfolg); color: #fff; }
.dk-mf-zeile .dk-initialen { width: 44px; height: 44px; font-size: 15px; border-radius: 12px; }
.dk-mf-mitte { flex: 1; min-width: 0; }
.dk-mf-name { display: block; font-family: var(--pw-schrift-display); font-weight: 800; font-size: 15.5px; line-height: 1.3; color: var(--pw-text); }
.dk-mf-meta { display: block; font-size: 13px; line-height: 1.45; color: var(--pw-text-mild); }
.dk-mf-vorort { color: var(--pw-info-text); font-weight: 800; }
.dk-mf-rechts { flex: none; text-align: right; }
.dk-mf-preis { display: block; font-family: var(--pw-schrift-display); font-weight: 900; font-size: 16px; color: var(--pw-gruen-700); font-variant-numeric: tabular-nums; }
.dk-mf-sterne { display: block; font-size: 13px; font-weight: 700; color: var(--pw-gold-text); white-space: nowrap; }
.dk-mf-sterne i { color: var(--pw-gold); font-style: normal; }
.dk-mf-kompakt { display: none; }
.dk-mf-kompakt .dk-mf-sterne { display: inline; margin-left: 6px; }
@media (max-width: 479.98px) {
  .dk-mf-rechts { display: none; }
  .dk-mf-kompakt { display: block; }
  .dk-mf-kompakt strong { color: var(--pw-gruen-700); }
}
.dk-mf-fuss { font-size: 13px; line-height: 1.5; color: var(--pw-text-mild); margin: 8px 0 0; }

/* Nach der ersten Anfrage: weitere Agenturen abhaken */
.dk-erfolg .dk-mf-mehr { text-align: left; border-top: 1px solid var(--pw-linie); padding-top: 16px; margin-top: 4px; }
.dk-mf-mehr h4 { font-family: var(--pw-schrift-display); font-size: 17px; font-weight: 800; color: var(--pw-text); margin: 0 0 4px; line-height: 1.3; }
.dk-erfolg .dk-mf-mehr .dk-mf-unter { font-size: 14px; margin: 0 0 12px; }
.dk-mf-alle { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 4px; font-size: 13.5px; color: var(--pw-text-mild); }
.dk-mf-textknopf {
  background: none; border: none; color: var(--pw-link); font-weight: 700; font-size: 14.5px;
  text-decoration: underline; cursor: pointer; min-height: 44px; padding: 8px 4px;
}
.dk-erfolg .dk-mf-mehr .dk-mf-einwilligung { font-size: 13px; line-height: 1.5; margin: 8px 0 10px; }
.dk-mf-knoepfe { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.dk-mf-knoepfe .dk-btn-senden:disabled { background: var(--pw-sand-200, #EBDFCE); color: #6f6a5e; opacity: 1; cursor: not-allowed; }
.dk-mf-mehr .dk-formular-fehler { margin: 8px 0 0; }

/* Zusammenfassung „Ihre Anfragen sind unterwegs“ */
.dk-mf-erfolg-liste { list-style: none; padding: 0; margin: 0 auto 20px; max-width: 420px; text-align: left; display: grid; gap: 8px; }
.dk-mf-erfolg-liste li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: var(--pw-text); }
.dk-mf-haken { color: var(--pw-erfolg); font-weight: 900; flex: none; }
.dk-mf-erfolg-person { display: block; font-size: 13.5px; color: var(--pw-text-mild); }

/* ============ Profil- und Anfrageseite (PLAN 5.33, 01.10.2026) ============
   Dennis: Profil und Anfrage als eigene Seiten statt Pop-ups (Entwurf F aus
   Design-Vorschlaege/profil-seite/). Mobil zuerst – alles bis zur
   Medienabfrage gilt fürs Handy. Beide Seiten sind Ansichten der Startseite
   (app.js); solange eine offen ist, trägt <body> .dk-unterseite und der
   Seitenkopf mit Menü weicht einer schmalen Zeile: zurück + Logo. */
body.dk-unterseite .dk-header { display: none; }

.dk-ps-oben {
  position: sticky; top: 0; z-index: 30; height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px 0 4px; background: rgba(255, 253, 249, 0.96);
  border-bottom: 1px solid var(--pw-linie);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.dk-ps-zurueck {
  display: inline-flex; align-items: center; gap: 4px; padding: 10px; background: none; border: 0;
  border-radius: var(--pw-radius-s); color: var(--pw-gruen-700);
  font-size: 14.5px; font-weight: 800; text-decoration: none;
}
.dk-ps-zurueck:hover { background: var(--pw-gruen-50); }
.dk-ps-zurueck svg { width: 20px; height: 20px; flex: none; }
.dk-ps-anzahl { color: var(--pw-text-mild); font-weight: 700; }
.dk-ps-logo { height: 22px; width: auto; }

/* Kopf: Agentur, Bewertung, Stempel, Preis und der erste Knopf */
.dk-ps-held {
  background: linear-gradient(160deg, var(--pw-gruen-800), var(--pw-gruen-600));
  color: var(--pw-text-invers); padding: 20px 16px 22px;
}
.dk-ps-held-innen { max-width: 760px; margin: 0 auto; }
.dk-ps-held-zeile { display: flex; gap: 14px; align-items: center; }
.dk-ps-held .dk-initialen {
  width: 60px; height: 60px; font-size: 20px; border: 2px solid rgba(255, 253, 249, 0.35);
}
.dk-ps-held-name { min-width: 0; }
.dk-ps-held h1 {
  font-family: var(--pw-schrift-display); font-size: 22px; line-height: 1.2;
  font-weight: 800; margin: 0; color: var(--pw-text-invers); overflow-wrap: break-word;
}
.dk-ps-held .dk-profil-bewertung { flex-wrap: wrap; margin-top: 5px; }
.dk-ps-marken { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dk-ps-marken:empty { display: none; }
.dk-ps-preiszeile {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
  margin-top: 16px; padding: 11px 14px; border-radius: var(--pw-radius-m);
  background: rgba(255, 253, 249, 0.10); border: 1px solid rgba(255, 253, 249, 0.18);
}
.dk-ps-preis-label { font-size: 12.5px; font-weight: 700; color: var(--pw-gruen-200); }
.dk-ps-preis {
  font-family: var(--pw-schrift-display); font-size: 22px; font-weight: 800; line-height: 1.15;
}
.dk-ps-preis small { font-size: 13px; font-weight: 700; color: var(--pw-gruen-200); }
.dk-ps-preis-gesamt { margin-top: 2px; font-size: 12px; color: var(--pw-gruen-200); }
.dk-ps-fuer { font-size: 12px; line-height: 1.35; color: var(--pw-gruen-200); text-align: right; }
.dk-ps-knopf { margin-top: 12px; }
.dk-ps-cta {
  width: 100%; min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--pw-cta); color: #fff; border: 0; border-radius: var(--pw-radius-s);
  padding: 12px 22px; font-size: 17px; font-weight: 800; line-height: 1.2;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); transition: background 0.15s;
}
.dk-ps-cta:hover { background: var(--pw-cta-hover); }
.dk-ps-cta:disabled { background: rgba(255, 253, 249, 0.2); color: var(--pw-gruen-100); box-shadow: none; cursor: not-allowed; }
.dk-ps-pfeil { width: 20px; height: 20px; flex: none; }
.dk-ps-cta-zusage { margin: 8px 0 0; font-size: 12.5px; color: var(--pw-gruen-200); text-align: center; }

/* Inhalt: dieselben Bausteine wie im Profil-Fenster, nur auf Seitenbreite */
.dk-ps-inhalt { max-width: 760px; margin: 0 auto; }
.dk-ps-inhalt .dk-profil-inhalt { padding: 22px 16px 8px; gap: 26px; }
.dk-ps-inhalt .dk-profil-inhalt h4 { font-size: 17px; }
.dk-ps-inhalt .dk-kontakt-karte { background: var(--pw-flaeche); flex-wrap: nowrap; gap: 14px; padding: 16px; }
.dk-ps-inhalt .dk-kontakt-foto,
.dk-ps-inhalt .dk-kontakt-initialen { width: 68px; height: 68px; }
.dk-ps-inhalt .dk-kontakt-info { min-width: 0; }
.dk-ps-ende { max-width: 760px; margin: 0 auto; padding: 18px 16px 28px; text-align: center; }
.dk-ps-zum-vergleich {
  background: none; display: inline-flex; align-items: center; gap: 6px; padding: 11px 18px;
  border: 1.5px solid var(--pw-gruen-200); border-radius: var(--pw-radius-s);
  color: var(--pw-gruen-700); font-size: 14.5px; font-weight: 800; text-decoration: none;
}
.dk-ps-zum-vergleich svg { width: 18px; height: 18px; }
/* Heller Seitengrund wie im Fenster – sonst verschwinden die Kacheln
   „Auf einen Blick“ (Papierton) im Hintergrund. Unten Platz für die feste
   Leiste, damit sie nichts verdeckt. */
#view-profil, #view-anfrage { background: var(--pw-flaeche-warm); }
#view-profil { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
/* Drei Kacheln nebeneinander auch auf dem Handy (Entwurf F) */
.dk-ps-inhalt .dk-blick-kern { grid-template-columns: repeat(auto-fit, minmax(min(96px, 100%), 1fr)); }

/* Feste Leiste: Preis links, Pille rechts. Fährt ein, sobald der Knopf im
   Kopf aus dem Bild ist (app.js setzt .ist-an). */
.dk-ps-leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px calc(9px + env(safe-area-inset-bottom)) 14px;
  background: var(--pw-flaeche); border-top: 1px solid var(--pw-linie);
  box-shadow: 0 -6px 22px rgba(34, 50, 43, 0.12);
  transform: translateY(140%); transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.dk-ps-leiste.ist-an { transform: none; }
.dk-ps-leiste-preis { flex: none; line-height: 1.15; }
.dk-ps-leiste-preis b {
  display: block; font-family: var(--pw-schrift-display); font-size: 18px; font-weight: 800;
  color: var(--pw-gruen-700); white-space: nowrap;
}
.dk-ps-leiste-preis small { font-size: 11.5px; font-weight: 700; color: var(--pw-text-mild); }
.dk-ps-leiste-zusage { display: none; }
.dk-ps-pille {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px;
  background: var(--pw-cta); color: #fff; border: 0; border-radius: var(--pw-radius-pill);
  padding: 5px 6px 5px 5px; text-align: left; font-size: 14.5px; font-weight: 800;
  box-shadow: 0 6px 16px rgba(176, 81, 31, 0.32); transition: background 0.15s;
}
.dk-ps-pille:hover { background: var(--pw-cta-hover); }
.dk-ps-pille-foto {
  width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none;
  border: 2px solid rgba(255, 255, 255, 0.75);
}
.dk-ps-pille-initialen {
  display: flex; align-items: center; justify-content: center;
  background: var(--pw-terra-50); color: var(--pw-cta); font-size: 14px; font-weight: 800;
}
.dk-ps-pille-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; padding-left: 4px; }
.dk-ps-pille-text small { font-size: 11.5px; font-weight: 700; opacity: 0.92; overflow: hidden; text-overflow: ellipsis; }
.dk-ps-pille-rund {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center;
}
@media (max-width: 379px) {
  .dk-ps-pille-rund { display: none; }
  .dk-ps-pille { padding-right: 12px; gap: 7px; font-size: 13px; }
  .dk-ps-pille-foto { width: 34px; height: 34px; }
  .dk-ps-pille-text small { font-size: 10.5px; }
  .dk-ps-leiste { gap: 8px; padding-left: 12px; }
  .dk-ps-leiste-preis b { font-size: 16px; }
  /* „Vergleich · 10 Agenturen“ bricht sonst auf drei Zeilen um */
  .dk-ps-anzahl { display: none; }
  .dk-as-rahmen .dk-modal-kopf h3 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .dk-ps-leiste { transition: none; } }

/* Anfrageseite: das Formular aus dem Anfrage-Fenster, hierher umgehängt */
.dk-as-rahmen { max-width: 560px; margin: 0 auto; padding: 18px 16px 34px; }
.dk-as-rahmen .dk-panel {
  max-width: none; max-height: none; overflow: visible; animation: none;
  background: transparent; border-radius: 0; padding: 0;
}
.dk-as-rahmen .dk-modal-kopf .dk-schliessen { display: none; }
.dk-as-rahmen .dk-modal-kopf h3 {
  font-family: var(--pw-schrift-display); font-size: 22px; line-height: 1.2; color: var(--pw-gruen-700);
}
.dk-as-rahmen .dk-modal-sub { font-size: 14.5px; line-height: 1.5; }
/* PLAN 5.38: „Letzter Schritt“ wie „Frage 1 von 7“ bei den Fragen, und der
   Nutzensatz unter der Überschrift etwas kräftiger als ein Untertitel. */
.dk-as-fortschritt { margin: 0 0 14px; }
.dk-as-fortschritt[hidden] { display: none; }
.dk-as-fortschritt .dk-progress-kopf { margin-bottom: 8px; }
.dk-as-fortschritt .dk-progress-track { margin-bottom: 0; }
.dk-as-fortschritt .dk-progress-fill { width: 92%; transition: none; }
.dk-as-rahmen .dk-modal-sub { font-size: 15px; color: var(--pw-text); }
.dk-as-rahmen .dk-modal-sub strong { color: var(--pw-gruen-700); }

/* PLAN 5.38, Entwurf F (Dennis, 06.10.2026): Anfrageseite in zwei Teilen.
   Teil 1 Name + E-Mail + „Weiter“, Teil 2 Telefon + Absenden. Die
   Sammelanfrage im Fenster bekommt keine dieser Klassen und bleibt, wie sie war. */
.dk-weiter, .dk-einwilligung-knopf, .dk-wunschzeit-auf, .dk-nur-zweiteilig { display: none; }
.dk-optional-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.ist-zweiteilig .dk-wunschzeit-auf { display: inline-flex; }
.ist-zweiteilig .dk-wunschzeit-auf[hidden] { display: none; }
.ist-zweiteilig .dk-nur-zweiteilig { display: inline; font-size: 13.5px; }
.ist-zweiteilig .dk-nur-einteilig { display: none; }
.ist-zweiteilig .dk-optional-zeile .dk-nachricht-auf { min-height: 40px; align-items: center; }
.ist-zweiteilig .dk-erreichbarkeit:not(.ist-offen) { display: none; }
/* Unter dem Telefonfeld steht nichts (Dennis, 07.10.2026) – nur Fehler. */
.ist-zweiteilig #telefon-hinweis { display: none; }
.ist-zweiteilig.ist-teil1 .dk-weiter { display: flex; width: 100%; }
.ist-zweiteilig.ist-teil1 :is(.dk-feld-telefon, .dk-erreichbarkeit, .dk-optional-zeile, #nachricht-feld,
  .dk-einwilligung, #fehler-datenschutz, #anfrage-senden) { display: none !important; }
.ist-zweiteilig.ist-teil2 :is(.dk-feld-name, .dk-feld-email, .dk-einwilligung, #fehler-datenschutz) { display: none !important; }
.ist-zweiteilig.ist-teil2 .dk-einwilligung-knopf { display: block; }
/* Exklusiv-Vorteil (PLAN 5.39) nur in Teil 1: In Teil 2 schob er den
   Absendeknopf auf 360–414 px unter 667 px (Layout-Prüfung 08.10.2026). Die
   Familie hat ihn gesehen, und er steht in ihrer Bestätigungsmail. */
.ist-zweiteilig.ist-teil2 .dk-as-vorteil { display: none; }
.dk-einwilligung-knopf { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--pw-text-mild); }
.dk-einwilligung-knopf a { color: var(--pw-cta); }
/* Schlanke Personenkarte: Foto, Name, Agentur · Preis – Start und Preis
   stehen nicht mehr im Kasten darunter (der Start steht im Satz darüber). */
.dk-as-rahmen .ist-zweiteilig .dk-anfrage-person .dk-kontakt-karte {
  padding: 9px 12px; gap: 11px; align-items: center;
  border-radius: var(--pw-radius-m); margin-bottom: 14px;
}
.ist-zweiteilig .dk-anfrage-person :is(.dk-kontakt-foto, .dk-kontakt-initialen) { width: 44px; height: 44px; font-size: 16px; }
.ist-zweiteilig .dk-anfrage-person :is(.dk-kontakt-label, .dk-kontakt-rolle, .dk-kontakt-ort) { display: none; }
.ist-zweiteilig .dk-anfrage-person .dk-kontakt-name { font-size: 15.5px; }
.ist-zweiteilig .dk-anfrage-person:not(:empty) + .dk-mf-auswahl + .dk-anfrage-kontext { display: none; }
.dk-as-kartenzeile { font-size: 13px; color: var(--pw-text-mild); line-height: 1.4; margin-top: 2px; }
.dk-as-kartenzeile strong { color: var(--pw-gruen-700); white-space: nowrap; }
.dk-as-rahmen .dk-anfrage-person .dk-kontakt-karte { border-radius: var(--pw-radius-m) var(--pw-radius-m) 0 0; }
.dk-as-rahmen .dk-anfrage-person { margin-bottom: 0; }
.dk-as-rahmen .dk-anfrage-kontext {
  border: 1px solid var(--pw-gruen-100); border-radius: 0 0 var(--pw-radius-m) var(--pw-radius-m);
  border-top: 0; background: var(--pw-flaeche); padding: 10px 14px 12px; margin-bottom: 20px;
}
.dk-as-rahmen .dk-anfrage-person:empty + .dk-mf-auswahl + .dk-anfrage-kontext,
.dk-as-rahmen .dk-anfrage-person[hidden] + .dk-mf-auswahl + .dk-anfrage-kontext {
  border-top: 1px solid var(--pw-gruen-100); border-radius: var(--pw-radius-m);
}
.dk-as-rahmen .dk-feld input, .dk-as-rahmen .dk-feld textarea { font-size: 16px; }
/* Ohne Preis (Preis auf Anfrage) bleibt der Kasten unter der Person leer –
   dann fällt er weg und die Personenkarte ist rundum abgerundet. */
.dk-as-rahmen .dk-anfrage-kontext:empty { display: none; }
.dk-as-rahmen .dk-anfrage-person:has(+ .dk-mf-auswahl + .dk-anfrage-kontext:empty) .dk-kontakt-karte {
  border-radius: var(--pw-radius-m); margin-bottom: 20px;
}
.dk-nachricht-auf {
  align-self: flex-start; background: none; border: 0; padding: 2px 0;
  color: var(--pw-cta); font-size: 14.5px; font-weight: 800; text-align: left;
}
.dk-nachricht-auf[hidden] { display: none; }
.dk-nachricht-auf .dk-optional { font-weight: 600; color: var(--pw-text-mild); }

@media (min-width: 760px) {
  .dk-ps-oben { padding: 0 20px 0 14px; }
  .dk-ps-logo { height: 26px; }
  .dk-ps-held { padding: 34px 24px 36px; }
  .dk-ps-held .dk-initialen { width: 76px; height: 76px; font-size: 24px; }
  .dk-ps-held h1 { font-size: 30px; }
  .dk-ps-preiszeile { max-width: 460px; }
  .dk-ps-knopf { display: flex; align-items: center; gap: 16px; max-width: 620px; }
  .dk-ps-cta { width: auto; flex: none; }
  .dk-ps-cta-zusage { margin: 0; text-align: left; }
  .dk-ps-inhalt .dk-profil-inhalt { padding: 34px 24px 10px; gap: 32px; }
  .dk-ps-leiste {
    left: 50%; right: auto; bottom: 16px; width: min(760px, calc(100% - 32px));
    border: 1px solid var(--pw-linie); border-radius: 18px; padding: 10px 10px 10px 18px; gap: 16px;
    transform: translate(-50%, 140%);
  }
  .dk-ps-leiste.ist-an { transform: translateX(-50%); }
  .dk-ps-leiste-preis b { font-size: 21px; }
  .dk-ps-leiste-zusage { display: block; flex: 1; font-size: 13px; line-height: 1.4; color: var(--pw-text-mild); }
  .dk-ps-pille { flex: none; font-size: 16px; padding: 6px 8px 6px 6px; }
  .dk-as-rahmen { padding-top: 30px; }
  .dk-as-rahmen .dk-modal-kopf h3 { font-size: 28px; }
}

/* ============ Kompakte Ergebnisliste (PLAN 5.34, 01.10.2026) ============
   Entwurf B aus Design-Vorschlaege/ergebnisliste/: grüner Ergebnis-Kasten,
   Angaben als eine Zeile, kompakte Karten in zwei Gruppen.
   NUR auf dem Handy (unter 768 px) – am Desktop bleibt die Übersicht, wie
   sie war (Dennis, 01.10.2026). app.js wählt die Karte mit derselben
   Grenze (KOMPAKT). */
@media (min-width: 768px) {
  .dk-nur-schmal { display: none !important; }
  /* Kriterien-Leiste am Desktop immer offen, Zuschuss-Band über der Liste
     – wie vor PLAN 5.34. */
  #view-results .dk-ergebnisse { display: flex; flex-direction: column; }
  #view-results .dk-ergebnis-kopf { order: 1; }
  #view-results .dk-kriterien { order: 2; margin-top: 4px; }
  #view-results .dk-info-band { order: 3; }
  #view-results .dk-karten { order: 4; }
  #view-results .dk-ergebnis-hinweis { order: 5; }
}
@media (max-width: 767.98px) {
  .dk-nur-breit { display: none !important; }
  /* Auf der Ergebnisliste kein „Vergleichen“ im Kopf: Terrakotta gehört dort
     nur dem einen Hauptknopf „Verfügbarkeit anfragen“. */
  body.dk-ergebnis-aktiv .dk-header-cta { display: none; }
  body.dk-ergebnis-aktiv .nav-burger { margin-left: auto; }

  #view-results .dk-ergebnisse { max-width: 760px; padding: 0 16px 44px; }
  /* Über die volle Breite, ohne Rundung, direkt unter dem Seitenkopf – ein
     eigener, abgetrennter Bereich statt eines Kästchens (Dennis, 01.10.2026). */
  .dk-ek-kasten {
    background: linear-gradient(160deg, var(--pw-gruen-800), var(--pw-gruen-600));
    color: var(--pw-text-invers); border-radius: 0; margin: 0 -16px 12px; padding: 16px 16px 14px;
  }
  .dk-ek-eyebrow {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
    border-radius: var(--pw-radius-pill); background: rgba(255, 255, 255, 0.14);
    font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  }
  .dk-ek-kasten h2 {
    font-family: var(--pw-schrift-display); font-size: 21px; line-height: 1.2; font-weight: 800;
    color: var(--pw-text-invers); margin: 7px 0 8px;
  }
  .dk-ek-zahlen { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
  .dk-ek-zahlen[hidden] { display: none; }
  .dk-ek-zahl {
    background: rgba(255, 253, 249, 0.10); border: 1px solid rgba(255, 253, 249, 0.18);
    border-radius: var(--pw-radius-pill); padding: 5px 10px;
    font-size: 12.5px; font-weight: 700; color: var(--pw-gruen-100); white-space: nowrap;
  }
  .dk-ek-zahl b { font-family: var(--pw-schrift-display); font-size: 14px; color: #fff; }
  .dk-ek-angaben {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    background: rgba(255, 253, 249, 0.08); border: 1px solid rgba(255, 253, 249, 0.2);
    border-radius: 12px; padding: 8px 8px 8px 12px; font-size: 13px; color: var(--pw-gruen-100);
  }
  .dk-ek-angaben:hover { background: rgba(255, 253, 249, 0.14); }
  .dk-ek-angaben-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dk-ek-angaben-text b { color: #fff; }
  .dk-ek-aendern { flex: none; font-weight: 800; color: #fff; text-decoration: underline; padding: 4px 6px; }
  #view-results .dk-kriterien {
    margin: 10px 0 4px; background: var(--pw-flaeche); border: 1px solid var(--pw-linie);
    border-radius: 14px; padding: 12px;
  }
  #view-results .dk-kriterien:not(.ist-offen) { display: none; }
  .dk-ek-neu {
    margin-top: 10px; background: none; border: 0; padding: 4px 0;
    font-size: 13px; font-weight: 800; color: var(--pw-gruen-700); text-decoration: underline;
  }

  #agency-cards { gap: 10px; margin-top: 4px; }
  .dk-ek-gruppe { margin: 8px 2px -2px; font-size: 14px; font-weight: 800; line-height: 1.35; color: var(--pw-gruen-700); }
  .dk-ek-karte {
    background: var(--pw-flaeche); border: 1px solid var(--pw-linie); border-radius: 16px;
    padding: 12px; cursor: pointer; box-shadow: 0 1px 2px rgba(34, 50, 43, 0.04);
  }
  .dk-ek-oben { display: flex; gap: 11px; align-items: center; }
  .dk-ek-oben .dk-initialen { width: 44px; height: 44px; font-size: 15px; border-radius: 12px; }
  .dk-ek-mitte { flex: 1; min-width: 0; }
  .dk-ek-name {
    display: block; background: none; border: 0; padding: 0; text-align: left;
    font-family: var(--pw-schrift-display); font-size: 16px; line-height: 1.25; font-weight: 800; color: var(--pw-text);
  }
  .dk-ek-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 4px; }
  /* Bewertungen größer (Dennis, 01.10.2026): fünf Sterne, Note fett. */
  .dk-ek-wertung { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--pw-text-mild); white-space: nowrap; }
  .dk-ek-wertung b { font-size: 15.5px; color: var(--pw-text); }
  .dk-ek-stern { color: var(--pw-gold); font-size: 16px; letter-spacing: 1px; line-height: 1; }
  .dk-ek-quelle { color: var(--pw-text-mild); }
  .dk-ek-ort { font-size: 12px; color: var(--pw-text-mild); }
  .dk-ek-rechts { flex: none; text-align: right; }
  .dk-ek-preis {
    font-family: var(--pw-schrift-display); font-size: 18px; font-weight: 800; line-height: 1.1;
    color: var(--pw-gruen-700); white-space: nowrap;
  }
  .dk-ek-ab { font-size: 11.5px; font-weight: 700; color: var(--pw-text-mild); }
  .dk-ek-monat { margin-top: 1px; font-size: 11px; font-weight: 700; color: var(--pw-text-mild); white-space: nowrap; }
  .dk-ek-gesamt { margin-top: 2px; font-size: 11px; color: var(--pw-text-mild); white-space: nowrap; }
  .dk-ek-preis-anfrage { font-size: 13px; font-weight: 800; color: var(--pw-gruen-700); }
  .dk-ek-unten { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
  .dk-ek-profil {
    background: none; border: 0; padding: 8px 4px; white-space: nowrap;
    font-size: 13.5px; font-weight: 800; color: var(--pw-gruen-700);
  }
  /* Terrakotta-Fläche wie überall (Dennis, 01.10.2026: „soll schon
     auffällig sein“), aber nicht über die ganze Breite gezogen: nur so
     breit wie der Text, rechtsbündig; 42 px hoch, 14 px Schrift, ohne Schatten. */
  .dk-ek-cta {
    flex: none; min-height: 42px; border: 0; border-radius: 10px; padding: 9px 18px;
    background: var(--pw-cta); color: #fff; font-size: 14px; font-weight: 800; line-height: 1.15;
    transition: background 0.15s;
  }
  .dk-ek-cta:hover { background: var(--pw-cta-hover); }
  .dk-ek-cta:disabled, .dk-ek-cta:disabled:hover {
    background: var(--pw-flaeche-warm); color: var(--pw-text-mild);
    border: 1.5px solid var(--pw-linie); box-shadow: none; cursor: not-allowed;
  }
  #view-results .dk-ergebnis-hinweis { margin-top: 16px; text-align: left; }
  .dk-ek-zuschuss { margin: 12px 0 0; }

  /* Ergebnis erscheint: Gruppen und Karten gleiten nacheinander herein */
  .dk-ek-rein {
    opacity: 0; transform: translateY(14px);
    animation: dk-ek-rein 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
    animation-delay: calc(var(--i, 0) * 90ms + 120ms);
  }
  @keyframes dk-ek-rein { to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .dk-ek-rein { animation: none; opacity: 1; transform: none; } }

/* ============ Starttermin (PLAN 5.35, 01.10.2026) ============
   Frage „Ab wann wird die Betreuung benötigt?“ mit Kalenderfeld, die
   Termin-Marke im Ergebnis-Kasten, die Angabe der Agentur zum frühesten
   Start, der Eil-Hinweis und der Guide-Hinweis bei „noch unklar“. */
.dk-datum-feld {
  grid-column: 1 / -1; background: var(--pw-gruen-50); border: 1.5px solid var(--pw-gruen-200);
  border-radius: var(--pw-radius-m); padding: 12px 14px;
}
.dk-datum-label { display: block; font-size: 14px; font-weight: 800; color: var(--pw-gruen-700); margin-bottom: 6px; }
.dk-datum-zeile { display: flex; gap: 8px; }
.dk-datum-eingabe {
  flex: 1; min-width: 0; min-height: 46px; border: 1.5px solid var(--pw-linie); border-radius: var(--pw-radius-s);
  padding: 8px 12px; font-family: inherit; font-size: 16px; color: var(--pw-text); background: #fff;
}
.dk-datum-eingabe:focus { outline: 3px solid var(--pw-fokus); outline-offset: 1px; }
.dk-datum-weiter { flex: none; min-height: 46px; padding: 10px 18px; }
.dk-datum-fehler { margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--pw-fehler); }
.dk-krit-datum { margin: 2px 0 6px; }
.dk-krit-datum[hidden] { display: none; }
.dk-krit-datum-zeile { display: flex; gap: 8px; }
.dk-krit-datum-eingabe {
  flex: 1; min-width: 0; min-height: 44px; border: 1.5px solid var(--pw-linie); border-radius: var(--pw-radius-s);
  padding: 8px 12px; font-family: inherit; font-size: 16px; color: var(--pw-text); background: #fff;
}
.dk-krit-datum-eingabe:focus { outline: 3px solid var(--pw-fokus); outline-offset: 1px; }
.dk-karte .dk-ek-start { display: inline-block; margin: 6px 0 2px; }

.dk-ek-termin { cursor: pointer; font-family: inherit; color: #fff !important;
  background: rgba(176, 81, 31, 0.38) !important; border-color: rgba(242, 201, 168, 0.75) !important; }
.dk-ek-termin:hover { background: rgba(176, 81, 31, 0.55) !important; }
/* Exklusiv-Vorteil (PLAN 5.39, Dennis 08.10.2026, Entwurf M): zweigeteilte
   Kachel – links Tannengrün mit dem Betrag, rechts was er bedeutet. Auf der
   Karte an Stelle von „Start meist in …“. Kein Terrakotta: das gehört dem
   einen Anfrage-Knopf. Entwürfe: Design-Vorschlaege/exklusiv-vorteil-3/. */
.dk-vt {
  display: flex; align-items: stretch; margin-top: 10px; overflow: hidden;
  background: var(--pw-flaeche); border: 1.5px solid var(--pw-gruen-700); border-radius: 12px;
  text-align: left; cursor: auto;
}
.dk-vt-wert {
  flex: none; display: flex; flex-direction: column; justify-content: center; align-items: center;
  min-width: 92px; padding: 8px 10px; background: var(--pw-gruen-700); color: #fff; text-align: center;
}
.dk-vt-wert b {
  font-family: var(--pw-schrift-display); font-size: 25px; font-weight: 900; line-height: 1; white-space: nowrap;
}
.dk-vt-wert small {
  margin-top: 3px; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pw-gruen-200);
}
.dk-vt-text { flex: 1; min-width: 0; padding: 8px 11px; line-height: 1.25; }
.dk-vt-text b { display: block; font-size: 15px; font-weight: 800; color: var(--pw-text); overflow-wrap: anywhere; }
.dk-vt-nur { display: block; margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--pw-gruen-600); }
.dk-vt-bed {
  display: inline-block; min-height: 24px; padding: 2px 0 0; background: none; border: 0;
  font: inherit; font-size: 12px; font-weight: 800; color: var(--pw-gruen-700);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.dk-vt-bed:focus-visible { outline: 3px solid var(--pw-fokus); outline-offset: 2px; border-radius: 4px; }
/* Breite Karte (Desktop): nicht über die ganze Infospalte gezogen */
.dk-vt-breit { max-width: 460px; margin: 10px 0 4px; }
/* Profilseite: helle Kachel im grünen Kopf, unter der Preiszeile */
.dk-vt-profil { margin-top: 12px; border: 2px solid var(--pw-flaeche); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }
.dk-vt-profil .dk-vt-wert b { font-size: 27px; }
.dk-vt-profil .dk-vt-text b { font-size: 16px; }
.dk-vt-panel { margin: 14px 0 4px; }
.dk-as-vorteil { margin: -6px 0 18px; }
.dk-as-vorteil[hidden] { display: none; }
.dk-as-vorteil .dk-vt { margin-top: 0; }

/* Blatt „Bedingungen“ – von unten, wie auf dem Handy gewohnt; auf breiten
   Bildschirmen als schmale Karte in der Mitte unten. */
.dk-vt-schleier { position: fixed; inset: 0; z-index: 1000; background: rgba(34, 50, 43, 0.45); }
.dk-vt-blatt {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001; max-height: 85vh; overflow-y: auto;
  max-width: 560px; margin: 0 auto; background: var(--pw-flaeche); color: var(--pw-text);
  border-radius: 20px 20px 0 0; padding: 18px 18px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 30px rgba(34, 50, 43, 0.2); font-size: 15px; line-height: 1.5; text-align: left;
}
.dk-vt-griff { width: 40px; height: 4px; border-radius: 99px; background: var(--pw-linie); margin: -6px auto 12px; }
.dk-vt-kopf {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pw-gruen-600);
}
.dk-vt-blatt h3 {
  font-family: var(--pw-schrift-display); font-size: 21px; line-height: 1.25; font-weight: 800;
  margin: 4px 0 6px; color: var(--pw-gruen-700);
}
.dk-vt-blatt ul { margin: 8px 0 12px; padding-left: 20px; }
.dk-vt-blatt li { margin: 3px 0; }
.dk-vt-blatt p { margin: 0 0 8px; font-size: 14px; color: var(--pw-text-mild); }
.dk-vt-zu {
  width: 100%; min-height: 46px; margin-top: 4px; border: 1.5px solid var(--pw-linie); background: #fff;
  border-radius: 12px; font: inherit; font-weight: 800; color: var(--pw-gruen-700); cursor: pointer;
}

.dk-ek-start {
  margin-top: 8px; padding: 5px 9px; border-radius: 8px; background: var(--pw-erfolg-flaeche);
  color: var(--pw-erfolg-text); font-size: 12.5px; font-weight: 700; line-height: 1.35;
}
.dk-as-termin {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  background: var(--pw-terra-50); border: 1px solid #F2C9A8; color: #8A3A12;
  border-radius: var(--pw-radius-pill); padding: 4px 11px; font-size: 13px; font-weight: 800;
}
.dk-mf-band-eilig { background: var(--pw-terra-50); border-color: #F2C9A8; }
.dk-guide-hinweis {
  display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 12px;
  background: var(--pw-flaeche); border: 1px solid var(--pw-linie); border-radius: 12px;
  font-size: 13.5px; line-height: 1.45; color: var(--pw-text-mild); text-decoration: none;
}
.dk-guide-hinweis[hidden] { display: none; }
.dk-guide-hinweis img { width: 44px; height: auto; border-radius: 4px; border: 1px solid var(--pw-linie); flex: none; }
.dk-guide-hinweis strong { color: var(--pw-text); }
.dk-guide-link { display: inline-block; font-weight: 800; color: var(--pw-gruen-700); text-decoration: underline; }
#view-results .dk-guide-hinweis { order: 4; }

/* Nichts darf aus der Karte laufen (Prüfung vor Staging, tools/layout_pruefung.py):
   lange Namen brechen um statt den Preis zu überdecken, und reicht der
   Platz nicht, rutscht der Knopf in eine eigene Zeile unter „Profil →“. */
@media (max-width: 767.98px) {
  .dk-ek-name { overflow-wrap: anywhere; hyphens: auto; }
  .dk-ek-unten { flex-wrap: wrap; }
  .dk-ek-cta { margin-left: auto; white-space: nowrap; max-width: 100%; }
  .dk-mf-band { padding: 10px 12px; gap: 8px; margin-bottom: 4px; }
  .dk-mf-band-text strong { font-size: 15px; }
  .dk-mf-band-text span { font-size: 13px; }
  .dk-mf-band-knopf { min-height: 42px; padding: 9px 14px; font-size: 14px; }
}

/* ---- Anfrageformular, Lesbarkeit und Ruhe (05.10.2026, PLAN 5.37) ----
   Elena: Die Zielgruppe ist über 50 – Beschriftungen 16 px, Hinweise 15 px,
   Tippziele mindestens 44 px. Gilt nur für das Anfrageformular; die
   übrigen Formulare (Selbstauskunft, Bewertung) bleiben, wie sie sind. */
#anfrage-form .dk-feld { font-size: 16px; }
#anfrage-form .dk-feld-hinweis { font-size: 15px; line-height: 1.45; }
#anfrage-form .dk-feld-fehler { font-size: 15px; }
#anfrage-form .dk-erreichbarkeit legend { font-size: 16px; }
#anfrage-form .dk-radio-pillen span { min-height: 44px; font-size: 15px; padding: 11px 16px; line-height: 1.2; }
#anfrage-form .dk-anfrage-ablauf { font-size: 15px; }
/* Einwilligung als Kachel, die man als Ganzes antippt, mit großem Häkchen. */
#anfrage-form .dk-einwilligung {
  border: 1.5px solid var(--pw-linie-stark); border-radius: var(--pw-radius-s);
  padding: 12px 14px; font-size: 15px; color: var(--pw-text); background: var(--pw-flaeche);
  cursor: pointer;
}
#anfrage-form .dk-einwilligung:has(input:checked) { border-color: var(--pw-gruen-600); background: var(--pw-gruen-50); }
#anfrage-form .dk-einwilligung input { width: 24px; height: 24px; margin-top: 0; }
/* „+ Nachricht an …“ ist keine zweite Hauptaktion – Grün statt Terrakotta. */
#anfrage-form .dk-nachricht-auf { color: var(--pw-gruen-700); font-size: 15px; }

/* Starttermin und Preis in einer ruhigen Zeile statt zwei farbiger Kästen. */
.dk-as-eckdaten {
  display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 15px; line-height: 1.4; color: var(--pw-text-mild);
}
.dk-as-eckdaten strong { color: var(--pw-gruen-700); font-weight: 800; }
.dk-as-eckdaten-zusatz { margin-top: 2px; font-size: 13.5px; color: var(--pw-text-mild); }

/* Liste: die Zusage unter „Verfügbarkeit anfragen“ (Dennis, E-1 C). */
.dk-ek-zusage { margin-top: 6px; text-align: right; font-size: 13px; color: var(--pw-text-mild); }

/* Nach dem Absenden: an wen man sich wendet, wenn niemand anruft. */
.dk-erfolg p.dk-erfolg-nachfrage { font-size: 14px; margin: 0 0 18px; }
.dk-erfolg-nachfrage a { color: var(--pw-gruen-700); font-weight: 700; }