
.vb-wahl { display: flex; flex-wrap: wrap; gap: var(--a-1); margin: 0; }
.vb-wahl__knopf {
  display: inline-flex; align-items: center; gap: var(--a-1); min-height: var(--ziel); padding: var(--a-1) var(--a-3);
  font: inherit; font-size: var(--s-01); font-weight: 700; color: var(--ink); cursor: pointer;
  background: var(--white); border: 2px solid var(--border); border-radius: var(--r-pille);
  transition: border-color var(--d-1), background var(--d-1), color var(--d-1);
}
.vb-wahl__knopf .cb-ico { width: 1.25rem; height: 1.25rem; color: var(--accent); }
.vb-wahl__knopf[aria-pressed="true"] { color: var(--white); background: var(--accent); border-color: var(--accent); }
.vb-wahl__knopf[aria-pressed="true"] .cb-ico { color: var(--white); }
.vb-wahl__knopf:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .vb-wahl__knopf:hover { border-color: var(--accent); } }
.vb-wahl__knopf:active { background: var(--accent-soft); border-color: var(--accent); }
.vb-wahl__knopf[aria-pressed="true"]:active { background: var(--accent-dark); border-color: var(--accent-dark); }
.vb-wahl--reiter { margin-top: var(--a-3); }
.vb-wahl--gross .vb-wahl__knopf { font-size: var(--s-02); padding: var(--a-1) var(--a-4); }
.vb-wahl--gross .vb-wahl__knopf .cb-ico { width: 1.5rem; height: 1.5rem; }

.vb-fall:not([hidden]) { animation: vb-ein var(--d-2) ease-out; }
@keyframes vb-ein { from { opacity: 0; transform: translateY(0.25rem); } to { opacity: 1; transform: none; } }

.vb-kopf { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--a-5); align-items: center; }
.vb-kopf .sect__kopf { margin-bottom: 0; }
.vb-bild { position: relative; margin: 0; }
.vb-bild img { display: block; width: 100%; height: 12rem; object-fit: cover; object-position: 70% 40%; border-radius: var(--r-3); box-shadow: var(--e-1); background: var(--bg); }
.vb-bild--buehne img { height: 9rem; object-position: 75% 35%; box-shadow: none; }

.vb-hero { padding-bottom: var(--a-7); }
.vb-hero__raster { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--a-5); align-items: center; }
@media (min-width: 56rem) { .vb-hero { padding-top: var(--a-4); padding-bottom: var(--a-4); } }
.vb-hero__text .lead { max-width: 36rem; }
.vb-anruf { display: grid; gap: var(--a-1); }
.vb-anruf__probe { margin: 0; font-size: var(--s-01); font-weight: 700; color: var(--grey); }
.vb-szene { margin: var(--a-3) 0 0; max-width: 26rem; }
.vb-szene__bild { display: block; width: 100%; height: 6rem; object-fit: cover; object-position: left center; border-radius: var(--r-3); box-shadow: var(--e-1); background: var(--bg); }
@media (max-width: 72rem) { .vb-szene { display: none; } }
.vb-telefon { background: var(--white); border: 2px solid var(--border); border-radius: var(--r-3); box-shadow: var(--e-2); overflow: hidden; }
.vb-telefon__kopf { display: flex; align-items: center; gap: var(--a-2); padding: var(--a-1) var(--a-3); background: var(--accent-soft); }
.vb-telefon__kopf .cb-marke { margin: 0 0 0 auto; background: var(--white); }
.vb-telefon__ico { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; color: var(--white); background: var(--accent); }
.vb-telefon__ico .cb-ico { width: 1.25rem; height: 1.25rem; }
.vb-telefon__welle { color: var(--accent); }
.vb-telefon__verlauf { padding: var(--a-2) var(--a-3); min-height: 20rem; }
.vb-fall { display: flex; flex-direction: column; gap: var(--a-1); }
.vb-fall[hidden], .vb-ende[hidden] { display: none; }
.vb-zeile { margin: 0; max-width: 88%; align-self: flex-end; padding: var(--a-0) var(--a-2); font-size: var(--s-01); line-height: 1.5; background: var(--bg); border-radius: var(--r-2) var(--r-2) var(--a-0) var(--r-2); }
.vb-zeile--bot { align-self: flex-start; background: var(--accent-soft); border-radius: var(--r-2) var(--r-2) var(--r-2) var(--a-0); }
.vb-zeile__wer { margin-right: var(--a-1); font-size: var(--s-00); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey); }
.vb-zeile--bot .vb-zeile__wer { color: var(--accent-dark); }
.vb-ergebnis { display: flex; align-items: center; gap: var(--a-2); margin-top: var(--a-0); padding: var(--a-1) var(--a-3); border: 1px solid var(--border); border-left: 3px solid var(--erfolg); border-radius: var(--r-2); background: var(--white); box-shadow: var(--e-1); }
.vb-ergebnis .cb-ico { color: var(--erfolg); }
.vb-ergebnis--uebergabe { border-left-color: var(--marke); }
.vb-ergebnis--uebergabe .cb-ico { color: var(--marke); }
.vb-ergebnis p { margin: 0; font-size: var(--s-01); }
.vb-ergebnis__titel { font-weight: 700; }
.vb-kennung { margin: 0; font-size: var(--s-00); color: var(--grey); }

.vb-bereich { margin-top: var(--a-3); }
.vb-bereich__lead { margin: 0; max-width: var(--breite-text); font-size: var(--s-03); line-height: 1.35; }
.vb-karten { list-style: none; margin: var(--a-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-3); }
.vb-karten li { padding: var(--a-3); background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: var(--r-3); box-shadow: var(--e-1); }
.vb-karten h3 { margin: 0 0 var(--a-0); font-size: var(--s-03); }
.vb-karten p { margin: 0; font-size: var(--s-01); color: var(--grey); }

.vb-schalter { margin: var(--a-3) 0 var(--a-3); border-top: 0; padding-top: 0; font-size: var(--s-02); }
.vb-ende--mensch { border-color: var(--marke); }
.vb-ende--mensch .cb-kette__nr { background: var(--marke); }
.vb-systeme { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-2); margin-top: var(--a-4); font-size: var(--s-01); color: var(--grey); }
.vb-systeme strong { color: var(--ink); }
.vb-systeme ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--a-1); }
.vb-systeme li { padding: var(--a-0) var(--a-2); font-weight: 700; color: var(--accent-dark); background: var(--accent-soft); border-radius: var(--r-pille); }

.vb-stimme { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--a-5); align-items: center; }
.vb-stimme__text .sect__kopf { margin: 0; }
.vb-stimme__buehne { display: grid; gap: var(--a-2); padding: var(--a-4); background: var(--white); border: 2px solid var(--border); border-radius: var(--r-3); box-shadow: var(--e-1); }
.vb-stimme__titel { margin: 0; display: flex; align-items: center; gap: var(--a-1); font-weight: 700; color: var(--accent-dark); }
.vb-stimme__titel .cb-ico { color: var(--accent); }
.vb-stimme__blase { min-height: 7.5rem; }
.vb-stimme__blase p { margin: 0; padding: var(--a-3); font-size: var(--s-04); line-height: 1.35; background: var(--accent-soft); border-radius: var(--r-3) var(--r-3) var(--r-3) var(--a-0); }
.vb-stimme__buehne .cb-marke { margin: 0; }
.vb-stimme__ki { margin: 0; font-size: var(--s-01); color: var(--grey); }

.vb-modus { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--a-4); align-items: center; margin-top: var(--a-4); padding: var(--a-3) var(--a-4); background: var(--bg); border-radius: var(--r-3); }
.vb-modus__text p { margin: 0; font-size: var(--s-03); line-height: 1.35; }
.vb-vorteile { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.vb-weg { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--a-4); align-items: stretch; margin-top: var(--a-3); }
.vb-weg__schritte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-2); }
.vb-weg__schritt {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--a-2); row-gap: var(--a-0); align-content: start;
  padding: var(--a-2) var(--a-3); text-align: left; cursor: pointer; font: inherit; color: var(--ink);
  background: var(--white); border: 2px solid var(--border); border-radius: var(--r-3); box-shadow: var(--e-1);
  transition: border-color var(--d-1), box-shadow var(--d-1);
}
.vb-weg__schritt strong { align-self: center; font-size: var(--s-02); }
.vb-weg__schritt > span:last-child { grid-column: 2; font-size: var(--s-01); color: var(--grey); }
.vb-weg__schritt[aria-pressed="true"] { border-color: var(--accent); box-shadow: var(--e-2); }
.vb-weg__schritt:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .vb-weg__schritt:hover { border-color: var(--accent); } }
.vb-weg__schritt:active { background: var(--accent-soft); }
.vb-weg__braucht { padding: var(--a-3) var(--a-4); color: var(--white); background: linear-gradient(160deg, var(--accent), var(--accent-dark)); border-radius: var(--r-3); box-shadow: var(--e-1); }
.vb-weg__braucht h3 { margin: 0 0 var(--a-2); font-size: var(--s-02); color: var(--white); }
.vb-weg__braucht p { margin: 0; font-size: var(--s-03); line-height: 1.35; }

#kosten .cb-preis__modell { margin-top: var(--a-2); }
#kosten .aktion { margin-top: var(--a-2); }
#kosten .cb-preis__inkl .liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--a-3); }
@media (max-width: 40rem) { #kosten .cb-preis__inkl .liste { grid-template-columns: 1fr; } }
.vb-faktoren { display: grid; gap: var(--a-1); margin-top: var(--a-1); }
.vb-faktoren__titel { margin: 0; font-size: var(--s-01); font-weight: 700; color: var(--grey); }
.vb-faktoren__text p { margin: 0; font-size: var(--s-01); }
@media (min-width: 56rem) and (max-width: 72rem) {
  #kosten .cb-preis__inkl .liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vb-faktoren { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--a-3); }
  .vb-faktoren__text { grid-column: 1 / -1; }
}

.cb-fragen__rechts .cb-quer { margin-top: 0; }

@media (max-width: 56rem) {
  .vb-kopf { grid-template-columns: 1fr; gap: var(--a-3); }
  .vb-hero__raster, .vb-stimme, .vb-weg { grid-template-columns: 1fr; gap: var(--a-4); }
  .vb-telefon__verlauf { min-height: 0; }
  .vb-karten, .vb-vorteile { grid-template-columns: 1fr; }
  .vb-modus { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .vb-weg__schritte { grid-template-columns: 1fr; }
  .vb-telefon__kopf { flex-wrap: wrap; }
  .vb-stimme__blase p { font-size: var(--s-03); }
}

@media (prefers-reduced-motion: reduce) {
  .vb-fall:not([hidden]), .vb-telefon__welle, .vb-stimme__titel .cb-ico { animation: none; }
  .vb-wahl__knopf, .vb-weg__schritt { transition: none; }
}
