/* „binoro für Vermieter“ — Verkaufsseiten und Kasse (Plan M8).
   Baut auf den Hausakte-Tokens aus style.css auf (--papier, --tinte, --gruen-akzent …).
   Leitbild: die Hausakte. Bildschirmbilder liegen auf einem grünen Aktendeckel mit Reiter,
   die Produkte stehen nach Anlass hinter Registerreitern. Alles andere bleibt ruhig. */

.vm {
  --vm-breite: 76rem;
  --vm-rand: clamp(1rem, 4vw, 2.5rem);
  --vm-band: clamp(3.5rem, 8vw, 6.5rem);
  --vm-rund: 12px;
  --vm-tief: #10362A;
  --vm-zart: var(--gruen-akzent-zart);
  --vm-schatten: 0 2px 4px rgba(16, 54, 42, .06), 0 18px 40px -12px rgba(16, 54, 42, .28);
  --vm-schatten-klein: 0 1px 2px rgba(26, 26, 24, .06), 0 8px 20px -10px rgba(26, 26, 24, .22);
  --vm-ease: cubic-bezier(.16, 1, .3, 1);
  /* H1 so groß, dass das längste Wort (Nebenkostenabrechnung) bei 375 und 1440 px in eine Zeile passt —
     gemessen mit scripts/vermieter/pruefe-layout.mjs. */
  --vm-h1: clamp(1.75rem, 1.05rem + 2.4vw, 2.6rem);
  overflow-x: clip;
}
.vm-wrap { max-width: var(--vm-breite); margin: 0 auto; padding: 0 var(--vm-rand); }
.vm-band { padding-block: var(--vm-band); }
.vm h2 {
  font-family: var(--display); font-weight: 600; letter-spacing: -0.015em;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); line-height: 1.12; margin-bottom: 1.25rem;
  text-wrap: balance; hyphens: manual;
}
.vm h3 { font-family: var(--display); font-weight: 600; font-size: 1.2rem; line-height: 1.3; }
.vm p { max-width: 68ch; }
.vm p + p { margin-top: 0.75rem; }
.vm-mass { max-width: 60ch; }
.vm-leise { color: var(--tinte-soft); }
.vm-klein { font-size: 0.9rem; color: var(--tinte-soft); margin-top: 1rem; }
.vm-sym { width: 1.25rem; height: 1.25rem; flex: none; }

/* ── Knöpfe ─────────────────────────────────────────── */
.vm-kauf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3.25rem; padding: 0.75rem 1.5rem; border: 0; border-radius: 10px;
  background: var(--gruen-akzent); color: #fff; text-decoration: none; cursor: pointer;
  font: 700 1.06rem/1.2 var(--lesen); letter-spacing: 0.005em; text-align: center;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset, 0 6px 16px -6px rgba(16, 54, 42, .55);
  transition: background-color .18s var(--vm-ease), box-shadow .18s var(--vm-ease), transform .18s var(--vm-ease);
}
.vm-kauf:hover { background: var(--gruen-akzent-tief); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset, 0 10px 22px -8px rgba(16, 54, 42, .6); }
.vm-kauf:active { background: var(--vm-tief); transform: translateY(1px); box-shadow: 0 2px 6px -2px rgba(16, 54, 42, .5); }
.vm-kauf:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; }
.vm-kauf[aria-busy="true"] { cursor: progress; background: var(--gruen-akzent-tief); }
.vm-kauf-hell { background: #fff; color: var(--gruen-akzent-tief); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .45); }
.vm-kauf-hell:hover { background: var(--vm-zart); color: var(--vm-tief); }
.vm-kauf-hell:active { background: #DCE7DF; color: var(--vm-tief); }
.vm-kauf-hell:focus-visible { outline-color: #fff; }
.vm-breit { width: 100%; }
.vm-zweitknopf {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0.75rem 1.25rem;
  border: 1.5px solid var(--gruen-akzent); border-radius: 10px; background: #fff; color: var(--gruen-akzent-tief);
  font: 700 1rem/1.2 var(--lesen); text-decoration: none; cursor: pointer;
  transition: background-color .18s var(--vm-ease);
}
.vm-zweitknopf:hover { background: var(--vm-zart); color: var(--vm-tief); }
.vm-zweitknopf:active { background: #DCE7DF; }
.vm-zweitknopf:focus-visible { outline: 3px solid var(--gruen-akzent); outline-offset: 3px; }
.vm-preiszeile { margin-top: 0.75rem; font-size: 0.95rem; color: var(--tinte-soft); }

/* ── Brotkrumen ─────────────────────────────────────── */
.vm-krumen { max-width: var(--vm-breite); margin: 0 auto; padding: 1.25rem var(--vm-rand) 0; font-size: 0.9rem; }
.vm-krumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0 0.5rem; }
.vm-krumen li + li::before { content: "/"; margin-right: 0.5rem; color: var(--tinte-soft); }
.vm-krumen a { color: var(--tinte-soft); display: inline-block; padding: 0.25rem 0; }
.vm-krumen a:hover { color: var(--gruen-akzent); }
.vm-krumen [aria-current] { color: var(--tinte); }

/* ── Hero ───────────────────────────────────────────── */
.vm-held { padding-block: clamp(2rem, 5vw, 4.5rem) var(--vm-band); }
.vm-held-start { padding-top: clamp(2.75rem, 6vw, 5.5rem); }
.vm-held-raster { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.vm-vorzeile { font-weight: 700; color: var(--gruen-akzent); font-size: 1rem; margin-bottom: 1rem; }
.vm h1 {
  font-family: var(--display); font-weight: 600; letter-spacing: -0.022em;
  font-size: var(--vm-h1); line-height: 1.08; text-wrap: balance; hyphens: manual;
}
.vm-unterzeile { margin-top: 1.25rem; font-size: clamp(1.08rem, 1rem + 0.4vw, 1.28rem); line-height: 1.55; color: #3F3E39; }
.vm-aktion { margin-top: 2rem; }

/* Der Aktendeckel: grüne Fläche mit Reiter, darauf das Bildschirmbild. */
.vm-akte {
  position: relative; margin: 1rem 0 0; padding: clamp(0.9rem, 2.4vw, 1.75rem);
  background: linear-gradient(160deg, var(--gruen-akzent) 0%, var(--gruen-akzent-tief) 100%);
  border-radius: 4px var(--vm-rund) var(--vm-rund) var(--vm-rund);
  box-shadow: var(--vm-schatten);
}
.vm-akte::before {
  content: ""; position: absolute; left: 0; top: -1.1rem; width: 38%; max-width: 11rem; height: 1.15rem;
  background: var(--gruen-akzent); border-radius: 8px 10px 0 0;
}
.vm-akte .vm-bild { border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 14px 30px -14px rgba(0, 0, 0, .55); background: #fff; }
.vm-bild { display: block; width: 100%; height: auto; }
.vm .vm-bild-leer { aspect-ratio: 16 / 10; background: #EEF1ED; border-radius: 8px; }

@media (max-width: 63.99rem) {
  .vm-held-bild { margin-inline: calc(-1 * var(--vm-rand)); border-radius: 0; }
  .vm-held-bild::before { left: var(--vm-rand); }
}

/* ── Problem ────────────────────────────────────────── */
.vm-problem { background: #fff; border-block: 1px solid var(--linie); }
.vm-zwei { display: grid; gap: 1.5rem 4rem; }
.vm-problem-liste { list-style: none; display: grid; gap: 0; counter-reset: punkt; }
.vm-problem-liste li {
  position: relative; padding: 1rem 0 1rem 2.75rem; border-top: 1px solid var(--linie);
  font-size: 1.08rem; line-height: 1.6;
}
.vm-problem-liste li:last-child { border-bottom: 1px solid var(--linie); }
.vm-problem-liste li::before {
  content: ""; position: absolute; left: 0.45rem; top: 1.75rem; width: 0.6rem; height: 0.6rem;
  background: var(--messing); border-radius: 50%; box-shadow: 0 0 0 5px rgba(169, 133, 67, .16);
}

/* ── Ablauf ─────────────────────────────────────────── */
.vm-schritte { list-style: none; display: grid; gap: clamp(3rem, 7vw, 5.5rem); margin-top: 2.5rem; }
.vm-schritt { display: grid; gap: 1.75rem; align-items: center; }
.vm-schritt-nr {
  display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: 1rem;
  border-radius: 50%; background: var(--vm-zart); color: var(--gruen-akzent-tief);
  font: 700 1.15rem/1 var(--display); box-shadow: inset 0 0 0 1.5px var(--gruen-akzent);
}
.vm-schritt-text h3 { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem); margin-bottom: 0.75rem; }
.vm-schritt-text p { font-size: 1.08rem; }
.vm-schritt-bild { margin: 1rem 0 0; }
.vm-drei { list-style: none; display: grid; gap: 2rem; margin-top: 2rem; }
.vm-drei li { padding-top: 1.5rem; border-top: 2px solid var(--gruen-akzent); }
.vm-drei h3 { margin-bottom: 0.5rem; font-size: 1.3rem; }

/* ── Funktionen / Warum ─────────────────────────────── */
.vm-funktionen, .vm-warum { background: var(--vm-zart); }
.vm-funktionsraster { list-style: none; display: grid; gap: 0 2.5rem; margin-top: 1.5rem; }
.vm-funktionsraster li { display: flex; gap: 1rem; padding: 1.25rem 0; border-top: 1px solid #CFDCD3; }
.vm-funktionsraster .vm-sym { color: var(--gruen-akzent); margin-top: 0.25rem; }
.vm-funktionsraster h3 { font-size: 1.08rem; margin-bottom: 0.25rem; }
.vm-funktionsraster p { color: #3F3E39; }

/* ── Ergebnis ───────────────────────────────────────── */
.vm-ergebnis-raster { display: grid; gap: 2.5rem; align-items: center; }
.vm-blatt { margin: 0; padding: clamp(0.75rem, 2vw, 1.25rem); background: #fff; border: 1px solid var(--linie); border-radius: var(--vm-rund); box-shadow: var(--vm-schatten-klein); transform: rotate(-0.6deg); }
.vm-blatt .vm-bild { border-radius: 4px; }

/* ── Preis ──────────────────────────────────────────── */
.vm-preis { background: var(--vm-tief); color: #fff; }
.vm-preis h2 { color: #fff; }
.vm-preis p { color: #DCE7DF; }
.vm-preis-raster { display: grid; gap: 2.5rem; align-items: center; }
.vm-preiskarte {
  background: #fff; color: var(--tinte); border-radius: var(--vm-rund); padding: clamp(1.5rem, 4vw, 2.25rem);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .55);
}
.vm-preiskarte p { color: var(--tinte); }
.vm-preis-test { font-size: 1.1rem; }
.vm-preis-test strong { color: var(--gruen-akzent); }
.vm-preis-betrag { margin-top: 0.5rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.vm-preis-zahl { font: 600 clamp(2.6rem, 2rem + 2.5vw, 3.4rem)/1 var(--display); letter-spacing: -0.02em; }
.vm-preis-takt { color: var(--tinte-soft); font-size: 1.1rem; }
.vm-haken-liste { list-style: none; margin: 1.25rem 0 1.5rem; display: grid; gap: 0.5rem; }
.vm-haken-liste li { display: flex; gap: 0.5rem; align-items: flex-start; }
.vm-haken-liste .vm-sym { color: var(--gruen-akzent); margin-top: 0.25rem; }
.vm-preiskarte .vm-kauf { width: 100%; }

/* ── FAQ ────────────────────────────────────────────── */
.vm-faq-liste { border-top: 1px solid var(--linie); }
.vm-frage { border-bottom: 1px solid var(--linie); }
.vm-frage summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 3.5rem; padding: 1rem 0; cursor: pointer;
}
.vm-frage summary::-webkit-details-marker { display: none; }
.vm-frage summary h3 { font-size: 1.12rem; }
.vm-frage summary .vm-sym { color: var(--gruen-akzent); transition: transform .25s var(--vm-ease); }
.vm-frage[open] summary .vm-sym { transform: rotate(180deg); }
.vm-frage summary:hover h3 { color: var(--gruen-akzent); }
.vm-frage summary:focus-visible { outline: 3px solid var(--gruen-akzent); outline-offset: 2px; }
.vm-antwort { padding: 0 2.5rem 1.5rem 0; color: #3F3E39; }

/* ── Rechtsgrundlagen ───────────────────────────────── */
.vm-recht { background: #fff; border-top: 1px solid var(--linie); }
.vm-recht h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); }
.vm-recht-liste { list-style: none; display: grid; gap: 0 2.5rem; margin-top: 1.5rem; }
.vm-recht-liste li { display: flex; gap: 0.75rem; padding: 1rem 0; border-top: 1px solid var(--linie); font-size: 0.98rem; }
.vm-recht-liste .vm-sym { color: var(--messing); margin-top: 0.25rem; }
.vm-fund { margin-top: 0.25rem; font-size: 0.92rem; }
.vm-fund a { font-weight: 600; overflow-wrap: anywhere; }

/* ── Kacheln + Register ─────────────────────────────── */
.vm-kacheln { list-style: none; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); }
.vm-kachel {
  display: flex; flex-direction: column; gap: 0.5rem; height: 100%; padding: 1.25rem 1.25rem 1rem;
  container-type: inline-size;
  background: #fff; border: 1px solid #6F8A7C; border-radius: var(--vm-rund);
  color: var(--tinte); text-decoration: none;
  transition: border-color .2s var(--vm-ease), box-shadow .2s var(--vm-ease), transform .2s var(--vm-ease);
}
/* Kacheltitel ohne Bruch im Wort: die Größe folgt der Kachelbreite (Containerabfrage), damit das längste Wort
   („Nebenkostenabrechnung“, rund 11,7 em) in jeder Breite in eine Zeile passt. */
.vm-kachel h3 { hyphens: manual; overflow-wrap: normal; font-size: min(1.15rem, 8.2cqi); }
.vm-kachel p { color: var(--tinte-soft); font-size: 0.97rem; flex: 1; }
.vm-kachel-mehr { margin-top: 0.5rem; font-weight: 700; color: var(--gruen-akzent); font-size: 0.95rem; }
.vm-kachel:hover { border-color: var(--gruen-akzent); box-shadow: var(--vm-schatten-klein); transform: translateY(-2px); }
.vm-kachel:hover h3 { color: var(--gruen-akzent-tief); }
.vm-kachel:active { transform: translateY(0); background: var(--vm-zart); }
.vm-kachel:focus-visible { outline: 3px solid var(--gruen-akzent); outline-offset: 3px; }
.vm-register { display: grid; gap: 2.75rem 2rem; margin-top: 2.5rem; align-items: start; }
.vm-register-gruppe { position: relative; padding: 1.5rem; background: var(--vm-zart); border-radius: 0 var(--vm-rund) var(--vm-rund) var(--vm-rund); }
.vm-reiter { margin-bottom: 1rem; }
.vm-reiter h3 {
  position: absolute; left: 0; top: 0; transform: translateY(-100%);
  padding: 0.5rem 1rem 0.25rem; background: var(--vm-zart); border-radius: 10px 10px 0 0;
  font-size: 1.05rem; color: var(--gruen-akzent-tief);
}
.vm-reiter p { color: #3F3E39; }
.vm-anlaesse .vm-kacheln { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.vm-quer { background: var(--vm-zart); }

/* ── Hausverwalter-Hinweis ──────────────────────────── */
.vm-hinweis { padding-block: 0 var(--vm-band); }
.vm-hinweis-innen {
  display: grid; gap: 1.25rem; align-items: center;
  padding-block: clamp(1.5rem, 4vw, 2.25rem); border-block: 1px solid var(--linie);
}
.vm-hinweis h2 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem); margin-bottom: 0.5rem; }

/* ── Vergleich ──────────────────────────────────────── */
.vm-vergleich { background: #fff; border-block: 1px solid var(--linie); }
.vm-tabelle-huelle { margin-top: 1.75rem; }
.vm-tabelle { width: 100%; border-collapse: collapse; font-size: 1rem; }
.vm-tabelle th, .vm-tabelle td { text-align: left; vertical-align: top; padding: 1rem 1rem; border-bottom: 1px solid var(--linie); }
.vm-tabelle thead th { font: 700 0.98rem var(--lesen); border-bottom: 2px solid var(--tinte); }
.vm-tabelle tbody th { font-weight: 600; }
.vm-tabelle .vm-wir { background: var(--vm-zart); color: var(--vm-tief); font-weight: 600; }
.vm-tabelle thead .vm-wir { background: var(--gruen-akzent); color: #fff; border-bottom-color: var(--gruen-akzent); border-radius: 8px 8px 0 0; }

/* ── Schluss ────────────────────────────────────────── */
.vm-schluss { background: var(--gruen-akzent); color: #fff; padding-block: var(--vm-band); text-align: center; }
.vm-schluss-innen { display: grid; justify-items: center; }
.vm-schluss h2 { color: #fff; max-width: 22ch; }
.vm-schluss p { color: #E3EDE6; margin: 0 auto 1.75rem; }
.vm-schluss .vm-preiszeile { margin: 1rem auto 0; color: #E3EDE6; }

/* ── Kasse ──────────────────────────────────────────── */
.vm-kasse { background: #fff; }
.vm-kasse-raster { display: grid; grid-template-columns: minmax(0, 1fr); }
.vm-uebersicht { background: var(--papier); border-bottom: 1px solid var(--linie); }
.vm-uebersicht-innen, .vm-zahlung { max-width: 33rem; margin: 0 auto; padding: 1.25rem var(--vm-rand) 1.75rem; width: 100%; }
.vm-zurueck { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; color: var(--tinte-soft); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.vm-zurueck:hover { color: var(--gruen-akzent); }
.vm-uebersicht-titel { margin-top: 1rem; font: 700 0.95rem var(--lesen) !important; color: var(--tinte-soft); letter-spacing: 0 !important; margin-bottom: 0.25rem !important; }
.vm-produktname { font: 600 1.6rem/1.2 var(--display); }
.vm-enthalten { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem; color: var(--gruen-akzent-tief); font-weight: 600; }
.vm-enthalten .vm-sym { color: var(--gruen-akzent); }
.vm-summe { margin-top: 1.5rem; border-top: 1px solid var(--linie); }
.vm-summe div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--linie); }
.vm-summe dt { color: var(--tinte-soft); }
.vm-summe dd { text-align: right; font-weight: 600; }
.vm-summe-heute dt { color: var(--tinte); font-weight: 700; }
.vm-summe-heute dd { font: 600 1.6rem/1 var(--display); }
.vm-kasse-titel { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.4rem) !important; }
.vm-kasse-titel:focus { outline: none; }
.vm-fortschritt { list-style: none; display: flex; gap: 0.5rem; margin: 1.25rem 0 1.5rem; }
.vm-fortschritt li {
  flex: 1; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 999px;
  background: var(--papier); color: var(--tinte-soft); font-weight: 600; font-size: 0.92rem;
}
.vm-fortschritt li span { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--linie); font-size: 0.8rem; flex: none; }
.vm-fortschritt li[aria-current="step"] { background: var(--vm-zart); color: var(--tinte); }
.vm-fortschritt li[aria-current="step"] span { background: var(--gruen-akzent); color: #fff; box-shadow: none; }
.vm-kasse-schritt h2 { font-size: 1.4rem !important; margin-bottom: 0.25rem !important; }
.vm-kasse-schritt h2:focus { outline: none; }
.vm-kasse-schritt form { margin-top: 1.25rem; }
.vm-kasse-schritt[hidden] { display: none; }
.vm-feld { margin-bottom: 1rem; min-width: 0; }
.vm-feld label { display: block; margin-bottom: 0.25rem; font-weight: 600; font-size: 0.97rem; }
.vm-feld input {
  width: 100%; min-height: 3.1rem; padding: 0.75rem 0.75rem; border: 1.5px solid #858378; border-radius: 10px;
  background: #fff; color: var(--tinte); font: 400 1.06rem/1.3 var(--lesen);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.vm-feld input::placeholder { color: #6E6D66; }
.vm-feld input:hover { border-color: var(--tinte-soft); }
.vm-feld input:focus { outline: none; border-color: var(--gruen-akzent); box-shadow: 0 0 0 3px rgba(31, 92, 69, .3); }
.vm-feld input[aria-invalid="true"] { border-color: var(--rot); }
.vm-fehler { margin-top: 0.25rem; color: var(--rot); font-size: 0.93rem; font-weight: 600; }
.vm-fehler[hidden] { display: none; }
.vm-feldreihe { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.75rem; }
@media (max-width: 21rem) { .vm-feldreihe { grid-template-columns: 1fr; } }
.vm-kontakt { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-top: 1rem; padding: 1rem 1rem; border: 1px solid var(--linie); border-radius: 10px; background: var(--papier); }
.vm-kontakt-wert { margin-top: 0.25rem; overflow-wrap: anywhere; }
.vm-textknopf { min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.25rem; border: 0; background: none; cursor: pointer; color: var(--gruen-akzent); font: 700 0.98rem var(--lesen); text-decoration: underline; text-underline-offset: 0.2em; }
.vm-textknopf:hover { color: var(--gruen-akzent-tief); text-decoration-thickness: 2px; }
.vm-zahlarten { border: 0; margin: 0; padding: 0; min-width: 0; }
.vm-zahlarten legend { font-weight: 700; margin-bottom: 0.5rem; padding: 0; }
.vm-zahlart {
  display: flex; align-items: center; gap: 0.75rem; min-height: 3.5rem; padding: 0.75rem 1rem;
  border: 1.5px solid var(--linie); background: #fff; cursor: pointer;
}
.vm-zahlart:first-of-type { border-radius: 10px 10px 0 0; }
.vm-zahlart:last-of-type { border-radius: 0 0 10px 10px; border-top: 0; }
.vm-zahlart:hover { background: var(--papier); }
.vm-zahlart input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--gruen-akzent); flex: none; }
.vm-zahlart:has(input:focus-visible) { outline: 3px solid var(--gruen-akzent); outline-offset: 2px; position: relative; z-index: 1; }
.vm-zahlart:has(input:checked) { background: var(--vm-zart); border-color: var(--gruen-akzent); }
.vm-zahlart:last-of-type:has(input:checked) { border-top: 1.5px solid var(--gruen-akzent); }
.vm-zahlart-name { font-weight: 700; flex: 1; }
.vm-marken { display: flex; gap: 0.25rem; }
.vm-marken span { font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.5rem; border: 1px solid var(--linie); border-radius: 4px; color: var(--tinte-soft); background: #fff; }
.vm-zahlart-feld { padding: 1rem 1rem 0.25rem; border: 1.5px solid var(--gruen-akzent); border-top: 0; }
.vm-zahlart-feld[hidden] { display: none; }
.vm-zahlart-feld[data-feld-fuer="paypal"] { padding-bottom: 1rem; border-radius: 0 0 10px 10px; }
.vm-zahlart-feld p { color: var(--tinte-soft); }
.vm-zahlarten:has(input[value="karte"]:checked) .vm-zahlart:last-of-type { border-top: 1.5px solid var(--linie); }
.vm-kasse-schritt [data-abschluss] { margin-top: 1.5rem; }
.vm-vertrauen { display: flex; gap: 0.5rem; margin-top: 0.75rem; font-size: 0.9rem; color: var(--tinte-soft); }
.vm-vertrauen .vm-sym { width: 1rem; height: 1rem; margin-top: 0.25rem; }
.vm-kasse-fuss { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--linie); }
.vm-kasse-fuss a { display: inline-block; padding: 0.5rem 0; color: var(--tinte-soft); }
.vm-hinweis-box { padding: 1rem; border-radius: 10px; background: var(--gelb-bg); color: var(--gelb); font-weight: 600; }

.vm-meldung {
  width: min(29rem, calc(100vw - 2rem)); padding: 1.75rem 1.5rem 1.5rem; margin: auto;
  border: 0; border-radius: 16px; background: #fff; color: var(--tinte);
  box-shadow: 0 30px 80px -20px rgba(16, 54, 42, .55);
}
.vm-meldung::backdrop { background: rgba(16, 30, 24, .55); }
.vm-meldung h2 { font: 600 1.6rem/1.2 var(--display); }
.vm-meldung p { margin-top: 0.75rem; color: #3F3E39; }
.vm-meldung-app a { font-weight: 700; }
.vm-meldung form { margin-top: 1.5rem; display: flex; justify-content: flex-end; }
@media (prefers-reduced-motion: no-preference) {
  .vm-meldung[open] { animation: vm-rein .26s var(--vm-ease); }
  .vm-kasse-schritt:not([hidden]) { animation: vm-rein .3s var(--vm-ease); }
}
@keyframes vm-rein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Breiter ────────────────────────────────────────── */
@media (min-width: 48rem) {
  .vm-funktionsraster { grid-template-columns: repeat(2, 1fr); }
  .vm-recht-liste { grid-template-columns: repeat(2, 1fr); }
  .vm-drei { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .vm-hinweis-innen { grid-template-columns: 1fr auto; gap: 2rem; }
}
@media (min-width: 64rem) {
  /* Textspalte des Heros ist 5/12 der Inhaltsbreite: H1 wächst mit, damit das längste Wort passt. */
  .vm { --vm-h1: min(2.6rem, 3.4vw); }
  /* H2 in zweispaltigen Abschnitten: das längste Wort („Kautionsabrechnungsschreiben“, rund 14,4 em) passt. */
  .vm-zwei h2, .vm-ergebnis-raster h2, .vm-preis-raster h2 { font-size: min(2.25rem, 2.9vw); }
  .vm-held-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; }
  /* Das Produktbild ragt über die Inhaltsbreite bis kurz vor den Fensterrand. */
  .vm-held-bild { margin-right: calc(-1 * max(var(--vm-rand), (100vw - var(--vm-breite)) / 2 + var(--vm-rand) - 2rem)); }
  .vm-zwei { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
  .vm-faq-kopf { position: sticky; top: 6rem; }
  .vm-schritt { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4rem; }
  .vm-schritt:nth-child(even) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
  .vm-schritt:nth-child(even) .vm-schritt-text { order: 2; }
  .vm-ergebnis-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; }
  .vm-preis-raster { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 5rem; }
  .vm-funktionen .vm-funktionsraster { grid-template-columns: repeat(3, 1fr); }
  .vm-register { grid-template-columns: repeat(2, 1fr); }
  .vm-kasse-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 80vh; }
  .vm-kasse-raster .vm-uebersicht { order: 2; border-bottom: 0; border-left: 1px solid var(--linie); }
  .vm-uebersicht-innen { position: sticky; top: 5rem; margin: 0 auto 0 0; padding: 3rem 2rem 3rem 3.5rem; }
  .vm-zahlung { margin: 0 0 0 auto; padding: 3rem 3.5rem 3rem 2rem; }
}

/* ── Vergleich am Handy: jede Zeile als eigener Block, Spaltenname davor ── */
@media (max-width: 47.99rem) {
  .vm-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vm-tabelle, .vm-tabelle tbody, .vm-tabelle tr, .vm-tabelle th, .vm-tabelle td { display: block; width: 100%; }
  .vm-tabelle tr { margin-bottom: 1rem; border: 1px solid var(--linie); border-radius: 10px; overflow: hidden; }
  .vm-tabelle tbody th { background: var(--papier); border-bottom: 1px solid var(--linie); }
  .vm-tabelle td { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.75rem; }
  .vm-tabelle td::before { content: attr(data-spalte); font-weight: 600; color: var(--tinte-soft); }
  .vm-tabelle td.vm-wir::before { color: var(--vm-tief); }
  .vm-tabelle tr td:last-child { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .vm-kachel:hover { transform: none; }
  .vm-blatt { transform: none; }
}
@media print { .vm-kauf, .vm-schluss, .vm-preis .vm-kauf { display: none; } .vm-akte { background: none; box-shadow: none; } }

/* Nachtrag: Vertrauenspunkte im Start-Hero, Quellen unter dem Vergleich */
.vm-held-punkte { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1.75rem; color: #3F3E39; font-size: 0.98rem; }
.vm-held-punkte li { display: flex; gap: 0.5rem; align-items: center; }
.vm-held-punkte .vm-sym { color: var(--gruen-akzent); }
.vm-quellen { list-style: none; margin-top: 1.25rem; display: grid; gap: 0.5rem; font-size: 0.9rem; color: var(--tinte-soft); max-width: 75ch; }
.vm-quellen a { overflow-wrap: anywhere; }