/*
 * Versicherungs-Check (Vorschau): gemeinsames CSS für Prototyp 1 und 2, Präfix .vc
 * Tokens wie Fondsdepot v6 und Honorarberatung (60-plan-p1.md §11), als eigene Variablen übernommen.
 * Wurzelschrift 10 px (Parent 62,5 %): Größen als max(rem, px). Prototyp 2 ändert diese Datei nicht.
 */
.vc {
  --vc-blau: #13318A; --vc-blau-h: #0E2566; --vc-navy: #0F2453;
  --vc-flaeche: #F2F4F8; --vc-hell: #DCE6F7; --vc-hell2: #EEF3FB; --vc-linie: #D9DCDF;
  --vc-text: #2F3A47; --vc-ink: #1F2D3D; --vc-muted: #5A6470;
  --vc-akzent: #DCE6F7;
  --vc-serif: "Spectral", Georgia, "Times New Roman", serif;
  --vc-sans: "Open Sans", Arial, sans-serif;
  --vc-fs: max(1.7rem, 17px);
  --vc-fs-lead: max(1.9rem, 19px);
  --vc-fs-klein: max(1.5rem, 15px);
  --vc-sec-y: clamp(48px, 7vw, 96px);
  --vc-radius: 10px;
  --vc-schatten: 0 1px 2px rgba(16,30,46,.06), 0 6px 20px rgba(16,30,46,.07);
  display: block; background: #fff; color: var(--vc-text);
  font-family: var(--vc-sans); font-size: var(--vc-fs); line-height: 1.6;
  overflow-x: clip;
}
@media (min-width: 992px) { .vc { --vc-fs: max(1.8rem, 18px); --vc-fs-lead: max(2rem, 20px); } }
.vc *, .vc *::before, .vc *::after { box-sizing: border-box; }
.vc :where(p, ul, ol, figure, h1, h2, h3, fieldset, legend) { margin: 0; padding: 0; }
.vc :where(ul, ol) { list-style: none; }
.vc img { max-width: 100%; height: auto; }
.vc a { color: var(--vc-blau); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.vc a:hover { color: var(--vc-blau-h); text-decoration-thickness: 2px; }
.vc :focus-visible { outline: 3px solid var(--vc-blau); outline-offset: 2px; }
.vc [hidden] { display: none !important; }
.vc .vc-i { width: 1.2em; height: 1.2em; flex: none; display: inline-block; vertical-align: middle; --vc-akzent: #DCE6F7; }
.vc .vc-a { fill: var(--vc-akzent); }
.vc-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 767px) { .vc .vc-nur-desktop { display: none !important; } }
.vc-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ===== Typografie ===== */
.vc-h1 { font-family: var(--vc-serif); font-weight: 500; color: var(--vc-ink); line-height: 1.1; letter-spacing: -.01em;
  font-size: max(3rem, 30px); text-wrap: balance; overflow-wrap: break-word; }
@media (min-width: 600px) { .vc-h1 { font-size: clamp(36px, 2.4rem + 2.6vw, 56px); } }
.vc-h2 { font-family: var(--vc-serif); font-weight: 500; color: var(--vc-ink); font-size: max(2.5rem, 25px); line-height: 1.18; text-wrap: balance; }
@media (min-width: 992px) { .vc-h2 { font-size: max(3.2rem, 32px); } }
.vc-h3 { font-family: var(--vc-serif); font-weight: 600; color: var(--vc-ink); font-size: max(2.1rem, 21px); line-height: 1.25; }
.vc-h2:focus, .vc-frage__titel:focus { outline: none; }
.vc-p { max-width: 68ch; text-wrap: pretty; }
.vc-lead { font-size: var(--vc-fs-lead); line-height: 1.5; max-width: 34em; margin-top: 16px; }
.vc-klein { font-size: var(--vc-fs-klein); }
.vc-kennzeile { font-size: var(--vc-fs-klein); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--vc-blau); margin-bottom: 12px; }
.vc-dreieck li { position: relative; padding-left: 22px; max-width: 68ch; }
.vc-dreieck li + li { margin-top: 8px; }
.vc-dreieck li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 8px; background: var(--vc-blau); clip-path: polygon(0 0, 100% 0, 50% 100%); }

/* ===== Knöpfe und Links ===== */
.vc .vc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px;
  background: var(--vc-blau); color: #fff; border: 2px solid var(--vc-blau); border-radius: 6px; font: 600 var(--vc-fs)/1.25 var(--vc-sans);
  text-decoration: none; cursor: pointer; text-align: center; transition: background-color .15s, border-color .15s; }
.vc .vc-btn:hover { background: var(--vc-blau-h); border-color: var(--vc-blau-h); color: #fff; text-decoration: none; }
.vc .vc-btn:disabled { background: #9AA6BD; border-color: #9AA6BD; cursor: not-allowed; }
.vc .vc-btn .vc-i { --vc-akzent: transparent; }
.vc .vc-btn--gross { min-height: 56px; font-size: max(1.9rem, 19px); padding: 14px 28px; }
.vc .vc-btn--klein { min-height: 44px; padding: 8px 16px; font-size: var(--vc-fs-klein); }
.vc .vc-btn--linie { background: #fff; color: var(--vc-blau); }
.vc .vc-btn--linie:hover { background: var(--vc-hell2); color: var(--vc-blau-h); }
.vc .vc-btn--voll { width: 100%; }
@media (max-width: 599px) { .vc .vc-btn--voll-mobil { width: 100%; } }
.vc .vc-link { display: inline; background: none; border: 0; padding: 0; color: var(--vc-blau); font: inherit; text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer; min-height: 0; }
.vc .vc-link:hover { color: var(--vc-blau-h); text-decoration-thickness: 2px; }
.vc .vc-link .vc-i { margin-right: 4px; }
.vc .vc-knopfzeile { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ===== Abschnitte ===== */
.vc-sec { padding: var(--vc-sec-y) 0; }
.vc-sec--flaeche { background: var(--vc-flaeche); }
.vc-sec > .vc-wrap > * + * { margin-top: 20px; }
.vc-sec > .vc-wrap > .vc-h2 + * { margin-top: 14px; }

/* ===== Hero ===== */
.vc-hero { background: linear-gradient(180deg, var(--vc-flaeche) 0, var(--vc-flaeche) 72%, #fff 72%); padding: 32px 0 40px; }
.vc-hero__grid { display: grid; gap: 24px; align-items: center; }
.vc-hero__bild { display: none; }
.vc-hero__bild img { display: block; width: 100%; border-radius: var(--vc-radius); box-shadow: var(--vc-schatten); }
.vc-hero__karten { display: grid; gap: 14px; margin-top: 24px; }
.vc-hero__karte { background: #fff; border: 1px solid var(--vc-linie); border-radius: var(--vc-radius); box-shadow: var(--vc-schatten); padding: 20px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vc-hero__karte--start { justify-content: space-between; }
.vc-hero__karte--start .vc-btn { width: 100%; }
.vc-aufwand { display: grid; gap: 8px; }
.vc-aufwand li { display: flex; gap: 10px; align-items: flex-start; }
.vc-aufwand .vc-i { color: var(--vc-blau); margin-top: .15em; }
.vc-hero__person { display: flex; gap: 14px; align-items: center; margin-top: 22px; font-size: var(--vc-fs-klein); max-width: 60em; }
.vc-hero__person img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
@media (max-width: 767px) {
  .vc-hero { padding: 20px 0 32px; }
  .vc-hero .vc-kennzeile { margin-bottom: 8px; }
  .vc-hero .vc-lead { font-size: var(--vc-fs); margin-top: 12px; }
  .vc-hero__karten { margin-top: 18px; gap: 12px; }
  .vc-hero__karte { padding: 16px; gap: 12px; }
  .vc-aufwand { gap: 4px; font-size: var(--vc-fs-klein); }
  .vc .vc-chip { padding: 6px 12px; }
}
@media (min-width: 768px) {
  .vc-hero { padding: 48px 0 56px; }
  .vc-hero__karten { grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
  .vc-hero__karte { padding: 24px 26px; }
}
@media (min-width: 1000px) {
  .vc-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; }
  .vc-hero__bild { display: block; }
}

/* ===== Suche ===== */
.vc-suche__label { font-weight: 600; color: var(--vc-ink); }
.vc-suche__form { display: flex; border: 2px solid var(--vc-blau); border-radius: 6px; overflow: hidden; background: #fff; }
.vc-suche__feld { flex: 1; min-width: 0; border: 0; padding: 10px 14px; font: var(--vc-fs)/1.3 var(--vc-sans); color: var(--vc-ink); min-height: 48px; background: transparent; }
.vc-suche__feld:focus { outline: none; }
.vc-suche__form:focus-within { box-shadow: 0 0 0 3px rgba(19,49,138,.25); }
.vc-suche__knopf { flex: none; width: 52px; border: 0; background: var(--vc-blau); color: #fff; cursor: pointer; display: grid; place-items: center; }
.vc-suche__knopf .vc-i { width: 22px; height: 22px; }
.vc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vc .vc-chip { min-height: 44px; padding: 8px 14px; border: 1px solid var(--vc-linie); background: var(--vc-hell2); color: var(--vc-ink); border-radius: 22px;
  font: var(--vc-fs-klein)/1.2 var(--vc-sans); cursor: pointer; }
.vc .vc-chip:hover { border-color: var(--vc-blau); color: var(--vc-blau); }
.vc .vc-chip--alle { background: #fff; color: var(--vc-blau); font-weight: 600; }
.vc-suche__treffer { font-size: var(--vc-fs-klein); min-height: 1.5em; }
.vc-suche__treffer:empty { display: none; }

/* ===== Banner ===== */
.vc-banner { background: var(--vc-hell); border-bottom: 1px solid #C5D3EE; }
.vc-banner__in { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; padding-top: 12px; padding-bottom: 12px; }
.vc-banner__knoepfe { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.vc-geloescht { padding-top: 12px; padding-bottom: 12px; font-weight: 600; color: var(--vc-ink); }

/* ===== So funktioniert ===== */
.vc-schritte { display: grid; gap: 14px; counter-reset: s; }
.vc-schritt { display: flex; gap: 16px; align-items: flex-start; background: #fff; border-radius: var(--vc-radius); padding: 18px 20px; box-shadow: var(--vc-schatten); }
.vc-schritt__nr { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--vc-blau); color: #fff; display: grid; place-items: center; font: 600 max(1.8rem, 18px)/1 var(--vc-serif); }
.vc-schritt strong { color: var(--vc-ink); }
@media (min-width: 900px) { .vc-schritte { grid-template-columns: repeat(3, 1fr); gap: 20px; } .vc-schritt { flex-direction: column; } }
.vc-grundsatz { font-family: var(--vc-serif); font-size: max(2rem, 20px); color: var(--vc-ink); line-height: 1.4; max-width: 40em; }

/* ===== Rechnerliste ===== */
.vc-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--vc-linie); margin-top: 24px; overflow-x: auto; }
.vc .vc-tab { flex: 1 1 auto; min-height: 48px; padding: 10px 16px; border: 0; background: none; font: 600 var(--vc-fs)/1.25 var(--vc-sans); color: var(--vc-muted);
  border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer; white-space: normal; }
.vc .vc-tab[aria-selected="true"] { color: var(--vc-ink); border-bottom-color: var(--vc-blau); }
@media (min-width: 600px) { .vc .vc-tab { flex: 0 0 auto; padding: 10px 22px; } }
.vc-panel { margin-top: 8px; }
.vc-gruppe { margin-top: 24px; }
.vc-gruppe__titel { font: 600 var(--vc-fs-klein)/1.3 var(--vc-sans); color: var(--vc-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.vc-karten { display: grid; gap: 10px; }
@media (min-width: 700px) { .vc-karten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .vc-karten { grid-template-columns: repeat(3, 1fr); } }
.vc-karte-li { display: flex; min-width: 0; }
.vc .vc-karte { display: flex; gap: 14px; align-items: flex-start; width: 100%; min-height: 64px; padding: 14px 16px; border: 1px solid var(--vc-linie); border-radius: var(--vc-radius);
  background: #fff; color: var(--vc-text); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.vc .vc-karte:hover { border-color: var(--vc-blau); box-shadow: var(--vc-schatten); color: var(--vc-text); }
.vc-karte__icon { width: 36px !important; height: 36px !important; color: var(--vc-blau); }
.vc-karte__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vc-karte__name { font-weight: 600; color: var(--vc-ink); }
.vc-karte__wofuer { font-size: var(--vc-fs-klein); line-height: 1.45; }
.vc-karte__marke { display: inline-flex; gap: 6px; align-items: center; margin-top: 4px; font-size: max(1.4rem, 14px); font-weight: 600; color: var(--vc-muted); }
.vc-karte__marke--gespraech { color: var(--vc-blau); }
.vc-karte__pfeil { color: var(--vc-blau); margin-top: 6px; }
.vc-liste__leer { margin-top: 16px; }
.vc-liste.is-gefiltert .vc-gruppe:not(:has(.vc-karte-li:not([hidden]))) { display: none; }
.vc-liste.is-gefiltert .vc-tabs { display: none; }
.vc-liste.is-gefiltert .vc-panel { display: block !important; }
.vc-liste__nicht { margin-top: 28px !important; }

/* ===== Person und Vertrauen ===== */
.vc-person { display: grid; gap: 20px; align-items: start; background: #fff; border-radius: var(--vc-radius); padding: 22px; box-shadow: var(--vc-schatten); }
.vc-person__bild { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; }
.vc-person__name { font: 600 max(2.2rem, 22px)/1.2 var(--vc-serif); color: var(--vc-ink); }
.vc-person__rolle { margin-top: 6px; }
.vc-quali { display: grid; gap: 6px; margin-top: 12px; }
.vc-quali li { display: grid; grid-template-columns: 3.4em 1fr; gap: 10px; font-size: var(--vc-fs-klein); }
.vc-quali b { color: var(--vc-blau); }
.vc-person__satz { margin-top: 12px; }
@media (min-width: 700px) { .vc-person { grid-template-columns: 180px 1fr; padding: 28px; } .vc-person__bild { width: 180px; height: 180px; } }
.vc-vertrauen { display: grid; gap: 14px; }
@media (min-width: 900px) { .vc-vertrauen { grid-template-columns: repeat(3, 1fr); } }
.vc-vertrauen__karte { display: flex; gap: 14px; align-items: flex-start; background: #fff; border-radius: var(--vc-radius); padding: 18px; }
.vc-vertrauen__icon { width: 40px !important; height: 40px !important; color: var(--vc-blau); }
.vc-vertrauen strong { color: var(--vc-ink); }
.vc-erlaubnis { font-size: max(1.4rem, 14px); color: var(--vc-muted); max-width: 80ch; }
.vc-wer .vc-erlaubnis + .vc-erlaubnis { margin-top: 6px; }

/* ===== FAQ ===== */
.vc-faq__liste { max-width: 860px; border-top: 1px solid var(--vc-linie); }
.vc-faq__eintrag { border-bottom: 1px solid var(--vc-linie); }
.vc-faq__eintrag summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 12px 0; cursor: pointer;
  font-weight: 600; color: var(--vc-ink); list-style: none; }
.vc-faq__eintrag summary::-webkit-details-marker { display: none; }
.vc-faq__chevron { color: var(--vc-blau); transition: transform .2s; }
.vc-faq__eintrag[open] .vc-faq__chevron { transform: rotate(180deg); }
.vc-faq__eintrag p { padding: 0 0 18px; max-width: 68ch; }

/* ===== Rechner-Hülle ===== */
.vc-rueckweg { margin-bottom: 18px; }
.vc-rueckweg .vc-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.vc-huelle__kopf > * + * { margin-top: 14px; }
.vc-huelle__bereit { background: var(--vc-flaeche); border-radius: var(--vc-radius); padding: 16px 18px; }
.vc-huelle__bereit h3 { font: 600 var(--vc-fs)/1.3 var(--vc-sans); color: var(--vc-ink); margin-bottom: 8px; }
.vc-huerde { border-left: 4px solid var(--vc-blau); background: var(--vc-hell2); padding: 14px 18px; border-radius: 0 var(--vc-radius) var(--vc-radius) 0; }
.vc-huerde p + p { margin-top: 6px; }
.vc-preis { font-size: var(--vc-fs-klein); color: var(--vc-muted); }
.vc-daten { font-size: var(--vc-fs-klein); max-width: 68ch; }
.vc-tarife summary { cursor: pointer; color: var(--vc-blau); font-size: var(--vc-fs-klein); min-height: 44px; display: flex; align-items: center; }
.vc-tarife p { font-size: var(--vc-fs-klein); max-width: 68ch; }
.vc-rechner-rahmen { margin-top: 18px; border: 1px solid var(--vc-linie); border-radius: var(--vc-radius); overflow: hidden; background: #fff; }
.vc-rechner-rahmen iframe { display: block; width: 100%; height: 1400px; border: 0; }
.vc-laden { padding: 24px; color: var(--vc-muted); }
.vc-leiste { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; margin-top: 18px; padding: 16px 20px;
  background: var(--vc-navy); color: #fff; border-radius: var(--vc-radius); }
.vc-leiste p { font-weight: 600; }
.vc .vc-leiste .vc-btn { background: #fff; color: var(--vc-blau); border-color: #fff; }
.vc .vc-leiste .vc-btn:hover { background: var(--vc-hell); }
.vc-notausgang { margin-top: 12px; font-size: var(--vc-fs-klein); }
.vc-beratungskarte, .vc-fehler { background: var(--vc-flaeche); border-radius: var(--vc-radius); padding: 20px; }
.vc-beratungskarte > * + *, .vc-fehler > * + * { margin-top: 12px; }

/* ===== Rückruf-Kasten (Beratungsthemen) ===== */
.vc-rrkasten { background: var(--vc-navy); color: #fff; border-radius: var(--vc-radius); padding: 22px; align-self: start; }
.vc-rrkasten > * + * { margin-top: 14px; }
.vc .vc-rrkasten .vc-btn { background: #fff; color: var(--vc-blau); border-color: #fff; }
.vc .vc-rrkasten a:not(.vc-btn) { color: #fff; }

@media (prefers-reduced-motion: reduce) { .vc *, .vc *::before, .vc *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }