/* ==========================================================================
   Molla Pflege-Abo — Preisrechner
   Zweispaltig: links die Fragen, die sich nacheinander aufstapeln,
   rechts ein mitlaufendes Preis-Fenster. Eine Frage je Schritt, "Weiter"
   schaltet die nächste frei, der Preis aktualisiert sich dabei laufend.
   ========================================================================== */

.konfig {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
  gap: clamp(22px, 3.2vw, 52px);
  align-items: start;
}

/* ---------- Spalte mit den Fragen ---------- */
.k-steps { display: grid; gap: 20px; align-content: start; min-height: 420px; }
@media (max-width: 1040px) { .k-steps { min-height: 0; } }

/* ---------- Fortschritt ---------- */
.k-fortschritt { display: grid; gap: 10px; }
.k-balken {
  height: 6px;
  border-radius: 999px;
  background: var(--linie);
  overflow: hidden;
}
.k-balken i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gruen), var(--gold));
  transition: width .45s var(--kurve);
}
.k-balken-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: .84rem;
  font-weight: 700;
  color: var(--text-mut);
}
.k-balken-label strong { color: var(--gruen-tief); }
.k-balken-name {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  color: var(--gruen-tief);
}

/* ---------- Fragekarte ---------- */
.k-step {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: clamp(20px, 2.6vw, 32px);
  transition: border-color var(--mittel), box-shadow var(--mittel);
}
.k-step:not(.ist-offen) { display: none; }
.k-step.ist-offen { animation: k-auf .42s var(--kurve) both; }
.k-step.ist-aktuell {
  border-color: rgba(8, 105, 62, .45);
  box-shadow: 0 10px 32px -14px rgba(16, 35, 26, .3);
}
@keyframes k-auf { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.k-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  padding: 0;
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 1.7vw, 1.22rem);
  font-weight: 700;
  color: var(--gruen-tief);
}
/* Die Nummer: bewusst unrunde Ecken, passt zur Handschrift der Marke */
.k-num {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-text);
  font-size: .82rem;
  font-weight: 700;
  color: var(--gold-text);
  border: 1.5px solid var(--gold);
  border-radius: 9px 11px 8px 12px;
  background: transparent;
  transition: background var(--mittel), color var(--mittel);
}
.k-step.ist-offen .k-num { background: var(--gruen); border-color: var(--gruen); color: #fff; }

.k-hint { margin: 0 0 18px; font-size: .92rem; color: var(--text-mut); max-width: 60ch; }
.k-note {
  margin: 18px 0 0;
  padding: 11px 15px;
  background: var(--creme);
  border-left: 3px solid var(--gold);
  border-radius: 0 6px 6px 0;
  font-size: .87rem;
  color: var(--text-mut);
}
.k-note strong { color: var(--gruen-tief); }

/* ---------- Optionskacheln ---------- */
.opt-grid { display: grid; gap: 12px; border: 0; margin: 0; padding: 0; min-width: 0; }
.opt-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opt-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opt-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.opt-grid > legend {
  /* In einem Raster wirkt float nicht – die Überschrift würde sonst eine Zelle
     belegen und alle Karten um eine Spalte verschieben. */
  grid-column: 1 / -1;
  width: 100%;
  margin: 0 0 2px;
  padding: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--gruen-tief);
}

.opt { position: relative; display: block; min-width: 0; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt > span {
  position: relative;
  display: block;
  height: 100%;
  min-height: 48px;
  padding: 14px 12px;
  background: var(--creme);
  border: 1.5px solid var(--linie-stark);
  border-radius: var(--radius);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--schnell), background var(--schnell), translate .15s var(--kurve);
}
.opt > span strong { display: block; font-size: .98rem; font-weight: 700; color: var(--gruen-tief); }
.opt > span small { display: block; margin-top: 2px; font-size: .8rem; line-height: 1.4; color: var(--text-mut); }
.opt:hover > span { border-color: var(--gruen); translate: 0 -1px; }
.opt input:focus-visible + span { outline: 3px solid var(--gruen); outline-offset: 2px; }

/* Haken oben rechts, wie in der Vorlage */
.opt > span::after {
  content: '';
  position: absolute;
  top: -9px; right: -9px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--gruen);
  box-shadow: 0 2px 8px rgba(8, 105, 62, .35);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transform: scale(.5);
  transition: opacity var(--schnell), transform var(--schnell) var(--kurve);
}
.opt input:checked + span {
  border-color: var(--gruen-tief);
  background: var(--gruen-tief);
}
.opt input:checked + span strong { color: #fff; }
.opt input:checked + span small { color: rgba(247, 245, 240, .74); }
.opt input:checked + span::after { opacity: 1; transform: scale(1); }

/* Paketkachel */
.opt--paket > span { text-align: left; padding: 18px 16px; }
.opt--paket .p-name { font-style: normal; display: block; font-family: var(--font-display); font-size: 1.16rem; font-weight: 700; color: var(--gruen-tief); }
.opt--paket .p-price { font-style: normal; display: block; margin-top: 2px; font-size: .88rem; font-weight: 700; color: var(--gruen); }
.opt--paket .p-desc { font-style: normal; display: block; margin-top: 5px; font-size: .8rem; line-height: 1.4; color: var(--text-mut); }
.opt--paket input:checked + span .p-name { color: #fff; }
.opt--paket input:checked + span .p-price { color: var(--gold); }
.opt--paket input:checked + span .p-desc { color: rgba(247, 245, 240, .74); }
.p-tag {
  font-style: normal;
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 8px;
  background: var(--gruen);
  border-radius: 4px;
  font-family: var(--font-text);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
}

/* ---------- Schieberegler ---------- */
/* Auswahlliste, z. B. der Ort. Gleiche Anmutung wie die übrigen Felder. */
.k-select { display: grid; gap: 8px; }
.k-select select {
  width: 100%; padding: 13px 40px 13px 14px; font: inherit; font-size: 16px;
  color: var(--text); background: var(--weiss); border: 1.5px solid var(--gruen-200);
  border-radius: 10px; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308693e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 16px;
}
.k-select select:focus-visible { outline: 2px solid var(--gruen); outline-offset: 2px; }
.k-select select:hover { border-color: var(--gruen); }

/* Leistung steckt nicht im gewählten Paket: Feld sichtbar stillgelegt.
   Es bleibt stehen, damit die Angabe in die Anfrage wandert – aber niemand
   soll glauben, sie verändere den Preis. */
.ist-aus { opacity: .45; filter: grayscale(.4); pointer-events: none; }
.k-aus {
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
  margin: 10px 0 0; padding: 12px 14px;
  background: var(--creme, #f7f5f0); border-left: 3px solid var(--gruen);
  border-radius: 0 10px 10px 0; font-size: .88rem; line-height: 1.5; color: var(--text-mut);
}
.k-aus strong { color: var(--text); }
.k-aus-btn {
  flex: none; padding: 7px 14px; font: inherit; font-size: .84rem; font-weight: 700;
  color: #fff; background: var(--gruen); border: 0; border-radius: 999px; cursor: pointer;
}
.k-aus-btn:hover { background: var(--gruen-700, #0b5c36); }
.k-aus-btn:focus-visible { outline: 2px solid var(--gruen); outline-offset: 2px; }

.k-slider { display: grid; gap: 10px; }
.k-slider-wert {
  font-family: var(--font-display);
  font-size: 1.38rem;
  font-weight: 700;
  color: var(--gruen-tief);
}
.k-slider-wert small {
  font-family: var(--font-text);
  font-size: .86rem;
  font-weight: 700;
  color: var(--text-mut);
}
.k-slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 26px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.k-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gruen) var(--fuell, 0%), var(--linie) var(--fuell, 0%));
}
.k-slider input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--linie); }
.k-slider input[type="range"]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--gruen); }
.k-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px; height: 24px;
  margin-top: -9px;
  border: 3px solid var(--gruen);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(16, 35, 26, .22);
  transition: transform var(--schnell) var(--kurve);
}
.k-slider input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border: 3px solid var(--gruen);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(16, 35, 26, .22);
}
.k-slider input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.08); }
.k-slider input[type="range"]:focus-visible { outline: none; }
.k-slider input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(8, 105, 62, .25); }
.k-skala {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .78rem;
  color: var(--text-mut);
}
.k-skala li { position: relative; padding-top: 7px; }
.k-skala li::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 1px; height: 4px;
  background: var(--linie-stark);
}
.k-skala li:first-child::before { left: 0; }
.k-skala li:last-child::before { left: auto; right: 0; }

/* ---------- Ja/Nein-Umschalter und Unterfragen ---------- */
.k-toggle { display: inline-flex; gap: 12px; flex-wrap: wrap; }
.k-toggle .opt > span { min-width: 130px; }
.k-sub {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed var(--linie-stark);
  display: grid;
  gap: 22px;
  animation: k-auf .35s var(--kurve);
}
.k-gruppe-titel {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--gruen-tief);
}

/* ---------- Navigation ---------- */
.k-nav { display: flex; gap: 12px; align-items: center; }
.k-nav .btn { flex: 1 1 auto; justify-content: center; }
.k-nav .btn-zurueck { flex: 0 1 auto; }
.k-nav .btn:disabled { opacity: .38; cursor: not-allowed; }
.k-fehler {
  margin: 0;
  padding: 12px 16px;
  background: #fdecec;
  border-left: 3px solid #b3261e;
  border-radius: 0 4px 4px 0;
  font-size: .9rem;
  color: #7c1d17;
}

/* ---------- Preis-Fenster ---------- */
.pp-wrap { position: sticky; top: calc(var(--kopf-h) + 18px); }
.price-panel {
  position: relative;
  padding: clamp(22px, 2.6vw, 32px);
  background: var(--gruen-tief);
  color: var(--creme);
  border-radius: var(--radius-gross);
  overflow: clip;
}
.price-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(420px 220px at 100% 0%, rgba(185, 137, 61, .17), transparent 60%);
  pointer-events: none;
}
/* Organische Form unten links – dieselbe Geste wie die Bodenkanten der Seite */
.price-panel::after {
  content: '';
  position: absolute;
  left: -28px; bottom: -28px;
  width: 96px; height: 96px;
  background: var(--gruen);
  opacity: .3;
  clip-path: polygon(0 22%, 80% 0, 100% 72%, 16% 100%);
  pointer-events: none;
}
.price-panel > * { position: relative; z-index: 1; }

.pp-label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(247, 245, 240, .6);
}
.pp-paket {
  margin: 4px 0 2px;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.pp-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gold);
}
.pp-einsaetze {
  margin: 8px 0 0;
  padding-top: 9px;
  border-top: 1px solid rgba(247, 245, 240, .14);
  font-size: .82rem;
  font-weight: 700;
  color: rgba(247, 245, 240, .72);
}
.pp-price-box {
  margin: 18px 0;
  padding: 18px 22px;
  border: 1px solid rgba(185, 137, 61, .5);
  border-radius: var(--radius);
  background: rgba(185, 137, 61, .1);
  text-align: center;
  transition: box-shadow var(--mittel), border-color var(--mittel);
}
.pp-price-box.ist-frisch { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(185, 137, 61, .16); }
.pp-range {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 2.6vw, 2.3rem);
  line-height: 1.1;
  color: #fff;
}
.pp-per { font-size: .85rem; font-weight: 700; color: rgba(247, 245, 240, .72); }
.pp-vorort { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.35; color: #fff; }
.pp-rows { display: grid; gap: 9px; margin-bottom: 18px; font-size: .9rem; }
.pp-row { display: flex; justify-content: space-between; gap: 12px; color: rgba(247, 245, 240, .85); }
.pp-row strong { color: #fff; white-space: nowrap; }
.pp-row.pp-erst strong { color: var(--gold); }
.pp-flags { display: grid; gap: 6px; margin-bottom: 18px; font-size: .8rem; color: rgba(247, 245, 240, .7); }
.pp-flags span { display: flex; gap: 8px; align-items: baseline; }
.pp-flags span::before { content: '→'; color: var(--gold); flex: none; }
.pp-foot { margin: 16px 0 0; font-size: .78rem; line-height: 1.5; color: rgba(247, 245, 240, .6); text-align: center; }
.pp-tools { display: flex; justify-content: center; gap: 22px; margin-top: 10px; }
.pp-tools button {
  min-height: 44px;
  padding: 12px 6px;
  background: none;
  border: 0;
  font-family: var(--font-text);
  font-size: .82rem;
  font-weight: 700;
  color: rgba(247, 245, 240, .7);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.pp-tools button:hover { color: #fff; }

/* Messing-Schaltfläche */
.btn-gold { width: 100%; border-color: var(--gold-tief); color: #fff; }
.btn-gold::before { background: var(--gold-tief); }
.btn-gold:hover, .btn-gold:focus-visible { color: #fff; border-color: var(--gold-text); }
.btn-gold:hover::before, .btn-gold:focus-visible::before { transform: scaleY(1); background: var(--gold-text); }

/* ---------- Abschluss: Angaben, Ersteinsatz, Vergleich ---------- */
.k-ergebnis { display: grid; gap: 24px; }
.k-ergebnis h3 { font-size: 1.06rem; margin-bottom: .5em; }
.k-angaben { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; font-size: .9rem; }
.k-angaben div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--linie); }
.k-angaben dt { color: var(--text-mut); }
.k-angaben dd { margin: 0; font-weight: 700; color: var(--tinte); text-align: right; }
.k-vergleich { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.k-vergleich-karte {
  padding: 16px 16px 14px;
  background: var(--weiss);
  border: 1.5px solid var(--linie);
  border-radius: var(--radius);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color var(--schnell), translate var(--schnell);
}
.k-vergleich-karte:hover { border-color: var(--gruen); translate: 0 -2px; }
.k-vergleich-karte[aria-current="true"] { border-color: var(--gold); background: rgba(185, 137, 61, .07); }
.k-vergleich-karte b { display: block; font-family: var(--font-display); font-size: 1rem; }
.k-vergleich-karte .k-vp { display: block; margin: 7px 0 2px; font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; color: var(--gruen); }
.k-vergleich-karte small { font-size: .78rem; color: var(--text-mut); }
.k-ersteinsatz {
  padding: 18px 20px;
  background: var(--creme);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.k-ersteinsatz b { display: block; margin: 4px 0 6px; font-family: var(--font-display); font-size: 1.2rem; color: var(--gruen-dunkel); }
.k-rechtstext { font-size: .84rem; color: var(--text-mut); }

/* Nur beim Drucken: Briefkopf und Abschluss */
.k-druckkopf, .k-druckfuss, .nur-drucken { display: none; }

/* ---------- Drucken: nur das Ergebnis ---------- */
@media (max-width: 1040px) {
  .konfig { grid-template-columns: minmax(0, 1fr); }
  /* Das Preis-Fenster rückt nach oben und bleibt als schmale Leiste am Kopf
     stehen: Paket und Preis nebeneinander, alles Weitere steht in der
     Abschlusskarte. Sonst verdeckte das Fenster den halben Bildschirm. */
  .pp-wrap {
    position: sticky;
    top: calc(var(--kopf-h) - 1px);
    order: -1;
    z-index: 5;
    margin-bottom: 4px;
  }
  .price-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px 18px;
    padding: 14px 18px;
    box-shadow: 0 10px 26px -14px rgba(16, 35, 26, .5);
  }
  .price-panel::after { display: none; }
  .pp-label { grid-column: 1; font-size: .64rem; }
  .pp-paket { grid-column: 1; grid-row: 2; margin: 0; font-size: 1.08rem; }
  .pp-badge, .pp-einsaetze, .pp-rows, .pp-flags, .pp-foot, .pp-tools { display: none; }
  .pp-price-box {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
    padding: 9px 16px;
    text-align: right;
  }
  .pp-range { font-size: 1.3rem; }
  .pp-per { font-size: .72rem; }
  .pp-vorort { font-size: .98rem; }
  /* Kein Handlungsknopf in der Kopfleiste: Angebot anfordern und als PDF
     speichern stehen unten in der Abschlusskarte, wenn alle Angaben stehen. */
  .price-panel .btn-gold { display: none; }
}

@media (max-width: 700px) {
  .opt-grid--2, .opt-grid--3, .opt-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .k-angaben, .k-vergleich { grid-template-columns: minmax(0, 1fr); }
  .k-nav { flex-direction: column-reverse; align-items: stretch; }
  .k-nav .btn { width: 100%; }
  .k-toggle { width: 100%; }
  .k-toggle .opt { flex: 1; }
  .pp-tools { gap: 14px; }
  .k-skala { font-size: .72rem; }
}

/* ------------------------------------------------------------------ Angebotsbogen
   Liegt als eigenes Element am <body> und ist am Bildschirm unsichtbar.
   Beim Drucken wird die Webseite ausgeblendet und nur dieses Blatt gesetzt. */
.k-angebot { display: none; }

@media print {
  @page { size: A4; margin: 16mm 18mm 14mm; }

  /* Nur der Angebotsbogen kommt aufs Papier. */
  body > *:not(.k-angebot) { display: none !important; }
  html, body {
    margin: 0;
    padding: 0;
    background: #fff;
    font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #23312a;
    font-size: 10pt;
    line-height: 1.5;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .k-angebot { display: block; max-width: 100%; }
  .k-angebot h1, .k-angebot h2 { margin: 0; color: #15241a; }
  .k-angebot p { margin: 0 0 7pt; }
  .k-angebot p:last-child { margin-bottom: 0; }

  /* ---- Briefkopf ---- */
  .ab-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16pt;
    padding-bottom: 8pt;
    border-bottom: 1.6pt solid #2f5d3a;
  }
  .ab-logo { height: 34pt; width: auto; }
  .ab-kennung { text-align: right; font-size: 8.5pt; line-height: 1.45; color: #5c6b62; }
  .ab-art { display: block; font-weight: 700; font-size: 9.5pt; color: #2f5d3a; }
  .ab-nr { display: block; font-variant-numeric: tabular-nums; }
  .ab-datum { display: block; }

  .k-angebot .ab-titel {
    margin: 18pt 0 12pt;
    font-size: 18.5pt;
    font-weight: 700;
    letter-spacing: -.012em;
    line-height: 1.2;
    page-break-after: avoid;
  }
  .k-angebot .ab-anrede { margin: 0 0 6pt; }
  .ab-text { margin: 0; max-width: 165mm; color: #3c4b42; }

  /* ---- Preisfeld ---- */
  .ab-preis {
    display: block;
    margin: 12pt 0 13pt;
    padding: 10pt 13pt 11pt;
    background: #eef5f0;
    border: .8pt solid #bfd9c8;
    border-left: 3.5pt solid #2f5d3a;
    border-radius: 3pt;
    page-break-inside: avoid;
  }
  .ab-preis-paket {
    display: block;
    font-size: 8.5pt;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #2f5d3a;
  }
  .ab-preis-betrag {
    display: block;
    margin: 3pt 0 2pt;
    font-size: 23pt;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #15241a;
  }
  .ab-preis-takt { display: block; font-size: 9pt; color: #5c6b62; }
  .ab-preis--offen .ab-preis-betrag { font-size: 16pt; }
  .ab-preis--offen .ab-preis-takt { max-width: 150mm; }

  /* ---- Abschnitte ---- */
  .ab-block { margin-bottom: 11pt; page-break-inside: avoid; }
  .ab-block > h2 {
    margin-bottom: 5pt;
    padding-bottom: 2.5pt;
    border-bottom: .5pt solid #d8ded9;
    font-size: 10.5pt;
    font-weight: 700;
    page-break-after: avoid;
  }

  /* ---- Angabentabelle ---- */
  .k-angaben { display: block; margin: 0; }
  .k-angaben > div {
    display: grid;
    grid-template-columns: 44mm minmax(0, 1fr);
    gap: 0 8pt;
    padding: 3.2pt 0;
    border-bottom: .4pt solid #ebeeec;
    page-break-inside: avoid;
  }
  .k-angaben > div:last-child { border-bottom: 0; }
  .k-angaben dt { font-size: 9.5pt; font-weight: 400; color: #5c6b62; text-align: left; }
  .k-angaben dd {
    margin: 0;
    font-size: 9.5pt;
    font-weight: 600;
    color: #23312a;
    text-align: left;   /* Angebot, keine Rechnung: Wert steht neben der Bezeichnung */
  }
  .k-angaben .ist-summe {
    margin-top: 2pt;
    border-top: 1pt solid #2f5d3a;
    border-bottom: 0;
    padding-top: 5pt;
  }
  .k-angaben .ist-summe dt { color: #15241a; font-weight: 700; }
  .k-angaben .ist-summe dd { font-weight: 700; color: #15241a; }

  /* ---- Listen ---- */
  .ab-liste, .ab-haken { margin: 0; padding: 0; list-style: none; }
  .ab-liste li, .ab-haken li {
    position: relative;
    padding-left: 13pt;
    margin-bottom: 3.2pt;
    font-size: 9.5pt;
    page-break-inside: avoid;
  }
  .ab-liste li::before {
    content: '–';
    position: absolute;
    left: 2pt;
    color: #90a399;
  }
  .ab-haken li::before {
    content: '✓';
    position: absolute;
    left: 0;
    font-size: 9pt;
    color: #2f5d3a;
  }

  /* ---- Ersteinsatz ---- */
  .ab-ersteinsatz-betrag {
    margin: 1pt 0 5pt;
    font-size: 13pt;
    font-weight: 700;
    color: #8a6410;
  }
  .ab-ersteinsatz p:last-child { font-size: 9.5pt; color: #3c4b42; max-width: 165mm; }

  /* ---- So geht es weiter ---- */
  .ab-schritte { margin: 0; padding: 0; list-style: none; counter-reset: schritt; }
  .ab-schritte li {
    position: relative;
    counter-increment: schritt;
    padding-left: 16pt;
    margin-bottom: 5pt;
    font-size: 9.5pt;
    page-break-inside: avoid;
  }
  .ab-schritte li::before {
    content: counter(schritt);
    position: absolute;
    left: 0;
    top: .4pt;
    width: 11pt;
    height: 11pt;
    border-radius: 50%;
    background: #2f5d3a;
    color: #fff;
    font-size: 7.5pt;
    font-weight: 700;
    text-align: center;
    line-height: 11pt;
  }
  .ab-antwort { margin-top: 7pt; font-size: 9.5pt; font-weight: 600; color: #2f5d3a; }

  /* ---- Abschluss ---- */
  .ab-fuss {
    margin-top: 14pt;
    padding-top: 8pt;
    border-top: .8pt solid #d8ded9;
    page-break-inside: avoid;
  }
  .ab-rechtlich { font-size: 7.8pt; line-height: 1.45; color: #76857c; }
  .ab-firma { font-size: 8.2pt; color: #3c4b42; margin: 0; }
  .ab-firma b { color: #15241a; }
}

/* ==========================================================================
   Flächenliste im Winterdienst-Rechner
   Der Kunde legt selbst fest, welche Flächen wir übernehmen: Gehweg, Zuweg,
   Einfahrt, Hof, Treppe. Jede Zeile trägt ihre eigenen Maße.
   ========================================================================== */
.k-fl { display: grid; gap: 10px; margin: 0 0 14px; }

.k-fl-leer {
  margin: 0; padding: 20px 16px;
  background: var(--creme); border: 1.5px dashed var(--linie-stark);
  border-radius: var(--radius);
  text-align: center; font-size: .9rem; color: var(--text-mut);
}

.k-fl-zeile {
  display: grid; align-items: end; gap: 10px 12px;
  grid-template-columns: 1fr auto;
  padding: 13px 14px;
  background: var(--weiss);
  border: 1.5px solid var(--gruen-200);
  border-radius: var(--radius);
  animation: k-auf .3s var(--kurve);
}
.k-fl-kopf { display: flex; align-items: center; gap: 9px; grid-column: 1; }
.k-fl-kopf svg { width: 17px; height: 17px; flex: none; color: var(--gruen); }
.k-fl-art {
  font-family: var(--font-display); font-size: .98rem; font-weight: 700;
  color: var(--gruen-tief);
}
.k-fl-mass {
  grid-column: 1 / -1;
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
}

.k-zahl { display: grid; gap: 5px; min-width: 0; }
.k-zahl > span { font-size: .8rem; color: var(--text-mut); }
.k-zahl-feld { position: relative; display: block; }
.k-zahl-feld input {
  width: 100%; padding: 11px 44px 11px 13px; font: inherit; font-size: 16px;
  color: var(--text); background: var(--weiss);
  border: 1.5px solid var(--gruen-200); border-radius: 10px;
  appearance: textfield; -moz-appearance: textfield;
}
.k-zahl-feld input::-webkit-outer-spin-button,
.k-zahl-feld input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.k-zahl-feld input:hover { border-color: var(--gruen); }
.k-zahl-feld input:focus-visible { outline: 2px solid var(--gruen); outline-offset: 2px; }
.k-zahl-feld input:invalid,
.k-zahl-feld input[aria-invalid="true"] { border-color: var(--rot, #b3261e); }
.k-zahl-feld em {
  position: absolute; top: 50%; right: 13px; translate: 0 -50%;
  font-style: normal; font-size: .85rem; color: var(--text-mut); pointer-events: none;
}

.k-fl-weg {
  grid-column: 2; grid-row: 1;
  display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  background: var(--creme); border: 1.5px solid var(--linie-stark);
  border-radius: 9px; color: var(--text-mut); cursor: pointer;
  transition: border-color var(--schnell), color var(--schnell), background var(--schnell);
}
.k-fl-weg svg { width: 15px; height: 15px; }
.k-fl-weg:hover { border-color: var(--rot, #b3261e); color: var(--rot, #b3261e); background: var(--weiss); }
.k-fl-weg:focus-visible { outline: 2px solid var(--gruen); outline-offset: 2px; }

.k-fl-add { display: grid; gap: 10px; }
.k-fl-add > span { font-size: .85rem; color: var(--text-mut); }
.k-fl-add-reihe { display: flex; flex-wrap: wrap; gap: 8px; }
.k-fl-add-reihe button {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 14px; font: inherit; font-size: .9rem; font-weight: 600;
  color: var(--gruen-tief); background: var(--creme);
  border: 1.5px solid var(--linie-stark); border-radius: 999px; cursor: pointer;
  transition: border-color var(--schnell), background var(--schnell), translate .15s var(--kurve);
}
.k-fl-add-reihe button svg { width: 14px; height: 14px; color: var(--gruen); }
.k-fl-add-reihe button:hover { border-color: var(--gruen); background: var(--weiss); translate: 0 -1px; }
.k-fl-add-reihe button:focus-visible { outline: 2px solid var(--gruen); outline-offset: 2px; }

/* Zwei Flächen gleichzeitig lesbar: ab Tablet nebeneinander statt gestapelt. */
@media (min-width: 620px) {
  .k-fl-zeile { grid-template-columns: minmax(160px, 210px) 1fr auto; align-items: center; }
  .k-fl-kopf { grid-column: 1; }
  .k-fl-mass { grid-column: 2; grid-row: 1; }
  .k-fl-weg { grid-column: 3; }
}

/* Saisonpreis im Preis-Fenster: Rate und Zusatztag stehen gleichberechtigt
   unter dem Betrag, damit niemand die Zusatztage überliest. */
.pp-saison { display: grid; gap: 7px; margin: 12px 0 0; }
.pp-saison div { display: flex; justify-content: space-between; gap: 12px; font-size: .88rem; }
.pp-saison dt, .pp-saison span:first-child { color: var(--text-mut); }
.pp-saison b { color: var(--gruen-tief); white-space: nowrap; }
.k-fl-add-reihe button b { font-size: 1.05rem; line-height: 1; color: var(--gruen); }

/* „So entsteht die Zahl" — aufklappbare Rechnung unter dem Ergebnis. */
.k-weg { margin: 20px 0 0; }
.k-weg summary {
  cursor: pointer; font-family: var(--font-display); font-size: .95rem; font-weight: 700;
  color: var(--gruen-tief); padding: 11px 14px; background: var(--creme);
  border-radius: 10px; list-style: none;
}
.k-weg summary::-webkit-details-marker { display: none; }
.k-weg summary::after { content: ' ▾'; color: var(--gruen); }
.k-weg[open] summary::after { content: ' ▴'; }
.k-weg summary:focus-visible { outline: 2px solid var(--gruen); outline-offset: 2px; }
.k-weg table { width: 100%; margin: 12px 0 0; border-collapse: collapse; font-size: .88rem; }
.k-weg td { padding: 8px 0; border-bottom: 1px solid var(--linie-stark); color: var(--text-mut); }
.k-weg td:last-child { text-align: right; white-space: nowrap; color: var(--gruen-tief); font-weight: 600; }
.k-weg tr:last-child td { border-bottom: 0; }

/* Außerhalb des Winterdienstgebiets: kein Preis, klare Ansage. */
.k-weit {
  margin: 0; padding: 16px 18px;
  background: #fdf3f2; border-left: 3px solid var(--rot, #b3261e);
  border-radius: 0 10px 10px 0; font-size: .9rem; line-height: 1.55; color: var(--text);
}
.k-weit b { display: block; margin-bottom: 4px; color: var(--rot, #b3261e); }

/* Preis im Ergebnisbereich: steht auf hellem Grund, braucht deshalb eigene
   Farben — die Kasten-Variante (.pp-price-box) ist für den dunklen Kasten
   gebaut und ihre weiße Schrift wäre hier nicht zu lesen. */
.k-preis {
  margin: 0 0 18px;
  padding: 24px 26px;
  background: var(--creme);
  border: 1.5px solid rgba(185, 137, 61, .5);
  border-radius: var(--radius);
  text-align: center;
}
.k-preis b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  line-height: 1.1;
  color: var(--gruen-tief);
}
.k-preis span {
  display: block;
  margin-top: 7px;
  font-size: .88rem;
  line-height: 1.5;
  font-weight: 700;
  color: var(--text-mut);
}