/* =========================================================================
   Blog — Übersicht (/blog/) und einzelner Beitrag
   Setzt startseite.css voraus (Header, Footer, .vs-container, .vs-btn).
   Variante A, ausgewählt am 13.08.2026.
   ========================================================================= */

/* ── Kopfbereich der Übersicht ───────────────────────────────────────────
   Der Einleitungstext steht IM Hero, nicht als weisser Kasten darunter.
   Als eigener Kasten schob er die Beitraege so weit nach unten, dass beim
   Aufrufen der Seite kein einziger Artikel mehr zu sehen war. */
.vb-hero { position: relative; background: linear-gradient(135deg, #083141 0%, #114C5F 100%);
           color: #fff; padding: 42px 0 48px; }
.vb-hero h1 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 32px; margin: 0 0 16px; color: #fff; }
@media (min-width: 768px) { .vb-hero { padding: 50px 0 56px; } .vb-hero h1 { font-size: 42px; margin-bottom: 20px; } }

/* Einleitungstext auf dunklem Grund */
.vb-hero .vb-intro-text { max-width: 900px; margin: 0; }
.vb-hero .vb-intro-text p { font-family: 'DM Sans', sans-serif; font-size: 15px; line-height: 1.65;
                            color: rgba(255,255,255,.88); margin: 0 0 13px; }
.vb-hero .vb-intro-text p:last-child { margin-bottom: 0; }
.vb-hero .vb-intro-text > p:first-child { font-size: 17px; line-height: 1.5; color: #fff; font-weight: 600; margin-bottom: 18px; }
.vb-hero .vb-intro-text strong { color: #fff; }
.vb-hero .vb-intro-text a { color: #c8dde3; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 768px) {
	.vb-hero .vb-intro-text > p:first-child { font-size: 19px; }
}
/* Volle Breite des Containers (1200 Pixel). Das ist fuer Fliesstext eigentlich
   zu lang, hier aber gewollt: Der Text braucht dadurch weniger Zeilen, das
   Petrol-Band wird flacher und die Beitraege ruecken nach oben ins Bild. */
@media (min-width: 1000px) {
	.vb-hero .vb-intro-text { max-width: none; }
}

/* Abstand nach oben als Innenabstand, NICHT als margin am ersten Kind.
   Ein margin des ersten Kindes faellt sonst aus dem Bereich heraus
   (Margin-Collapsing) und schiebt den hellen Hintergrund mit nach unten.
   Zwischen Hero und Inhalt stand dadurch ein weisser Streifen. */
.vb-main { background: #EBF2F4; padding: 36px 0 80px; }
@media (min-width: 700px) { .vb-main { padding-top: 48px; } }


/* ── Themenfilter ──────────────────────────────────────────────────────── */
.vb-themen { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 30px; }
.vb-chip { display: inline-block; background: #fff; border: 1px solid #dce6e9; border-radius: 999px; padding: 7px 15px;
           font-family: 'DM Sans', sans-serif; font-size: 13.5px; color: #114C5F; text-decoration: none; transition: all .15s; }
.vb-chip:hover { border-color: #114C5F; background: #114C5F; color: #fff; }
.vb-chip.is-aktiv { background: #114C5F; border-color: #114C5F; color: #fff; font-weight: 600; }

/* ── Aufmacher ─────────────────────────────────────────────────────────── */
.vb-lead { display: grid; grid-template-columns: 1fr; background: #fff; border: 1px solid #dce6e9; border-radius: 18px;
           overflow: hidden; box-shadow: 0 10px 34px rgba(8,49,65,.08); text-decoration: none; }
/* Steht die Einleitung darueber, ragt nicht mehr der Aufmacher in den Kopf,
   sondern sie. Der Aufmacher bekommt dann normalen Abstand. */
.vb-intro + .vb-lead { margin-top: 34px; }
@media (min-width: 860px) { .vb-lead { grid-template-columns: 1.15fr 1fr; } }
.vb-lead-bild { position: relative; min-height: 220px; background: #c8dde3; }
.vb-lead-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 860px) { .vb-lead-bild { min-height: 340px; } }
.vb-lead-text { padding: 28px 26px 30px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
@media (min-width: 860px) { .vb-lead-text { padding: 36px 38px; } }
.vb-lead-text h2 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 23px; line-height: 1.3; color: #083141; margin: 12px 0 10px; }
@media (min-width: 860px) { .vb-lead-text h2 { font-size: 27px; } }
.vb-lead-text p { font-family: 'DM Sans', sans-serif; font-size: 15px; line-height: 1.6; color: #59747C; margin: 0 0 16px; }

.vb-label { display: inline-block; background: #c8dde3; color: #083141; font-family: 'DM Sans', sans-serif; font-weight: 700;
            font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; align-self: flex-start; }
.vb-meta { font-family: 'DM Sans', sans-serif; font-size: 13px; color: #8aa0a8; }
.vb-weiter { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 14.5px; color: #114C5F; }

/* ── Raster ────────────────────────────────────────────────────────────── */
.vb-titel-reihe { display: flex; align-items: baseline; justify-content: space-between; margin: 48px 0 18px; gap: 16px; flex-wrap: wrap; }
.vb-titel-reihe h2 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 20px; color: #083141; margin: 0; }

.vb-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 640px) { .vb-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .vb-grid { grid-template-columns: repeat(3, 1fr); } }
/* Wenige Beiträge: keine halb leere Rasterzeile. Die Spaltenzahl richtet
   sich nach dem, was da ist, sonst klebt eine einzelne Karte im linken
   Drittel und der Rest der Zeile ist Leere. */
@media (min-width: 1000px) {
	.vb-grid.hat-1 { grid-template-columns: minmax(0, 460px); }
	.vb-grid.hat-2 { grid-template-columns: repeat(2, minmax(0, 460px)); }
}

.vb-karte { background: #fff; border: 1px solid #dce6e9; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
            text-decoration: none; transition: transform .15s, box-shadow .15s; min-width: 0; }
.vb-karte:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(8,49,65,.12); }
.vb-karte-bild { aspect-ratio: 16 / 10; background: #c8dde3; overflow: hidden; }
.vb-karte-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vb-karte-text { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; min-width: 0; }
.vb-karte-text h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 17.5px; line-height: 1.35; color: #083141; margin: 4px 0 0; }
.vb-karte-text p { font-family: 'DM Sans', sans-serif; font-size: 14.5px; line-height: 1.55; color: #59747C; margin: 0; }
.vb-karte-fuss { margin-top: auto; padding-top: 8px; }

/* Ersatzfläche, wenn ein Beitrag kein Bild hat. Ohne die sähe die Übersicht
   löchrig aus, sobald einmal ein Bild fehlt. */
.vb-ersatz { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 20px;
             background: linear-gradient(135deg, #114C5F 0%, #083141 100%); }
.vb-ersatz span { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.35;
                  color: #c8dde3; text-align: center; }

/* ── Blättern ──────────────────────────────────────────────────────────── */
.vb-blaettern { display: flex; justify-content: center; gap: 8px; margin-top: 40px; flex-wrap: wrap; }
.vb-blaettern .page-numbers { display: inline-block; background: #fff; border: 1px solid #dce6e9; border-radius: 10px;
                              padding: 9px 15px; font-family: 'DM Sans', sans-serif; font-size: 14.5px; color: #114C5F; text-decoration: none; }
.vb-blaettern .page-numbers:hover { border-color: #114C5F; }
.vb-blaettern .page-numbers.current { background: #114C5F; border-color: #114C5F; color: #fff; font-weight: 700; }

/* ── Leerer Zustand ────────────────────────────────────────────────────── */
.vb-leer { background: #fff; border: 1px solid #dce6e9; border-radius: 16px; padding: 40px 30px; text-align: center;
           box-shadow: 0 10px 34px rgba(8,49,65,.08); }
.vb-intro + .vb-leer { margin-top: 34px; }
.vb-leer h2 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 20px; color: #083141; margin: 0 0 8px; }
.vb-leer p { font-family: 'DM Sans', sans-serif; font-size: 15px; color: #59747C; margin: 0; }

/* =========================================================================
   Einzelner Beitrag
   ========================================================================= */

.vb-kopf { background: linear-gradient(135deg, #083141 0%, #114C5F 100%); color: #fff; padding: 26px 0 34px; }
/* Volle Breite und linksbündig, damit Titel und Meta genau über dem Beitragstext
   beginnen. Vorher war der Kopf mittig zentriert, während der Beitragstext links
   im Container startet, dadurch waren die beiden versetzt. */
.vb-kopf-inner { max-width: none; margin: 0; }
.vb-zurueck { display: inline-block; font-family: 'DM Sans', sans-serif; font-size: 14px; color: #c8dde3;
              text-decoration: none; margin-bottom: 18px; }
.vb-zurueck:hover { color: #fff; }
.vb-kopf .vb-label { background: rgba(200,221,227,.22); color: #fff; }
.vb-kopf h1 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 27px; line-height: 1.25; color: #fff; margin: 14px 0 14px; }
@media (min-width: 768px) { .vb-kopf { padding: 56px 0 52px; } .vb-kopf h1 { font-size: 36px; } }
.vb-kopf-meta { font-family: 'DM Sans', sans-serif; font-size: 14px; color: #c8dde3; }

/* Abstand oben als Innenabstand, nicht als margin am Titelbild: Ein margin des
   ersten Kindes faellt aus dem Bereich heraus und schiebt ihn samt Hintergrund
   nach unten. Genau das hat auf der Uebersicht den weissen Streifen erzeugt. */
.vb-beitrag-main { background: #fff; padding: 30px 0 70px; }
@media (min-width: 768px) { .vb-beitrag-main { padding-top: 38px; } }
/* Textbreite. Der Container nutzt jetzt die volle Bildschirmbreite bis zum
   Rand des .vs-container (1200 px). Alles darin darf das ausschöpfen: Bilder,
   Tabellen und der Fließtext gleichermaßen. */
.vb-inner { max-width: none; margin: 0; }

.vb-titelbild { margin: 0 0 34px; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 34px rgba(8,49,65,.14);
                aspect-ratio: 16 / 9; background: #c8dde3; }
.vb-titelbild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Fließtext. Nur die Auszeichnungen, die aus dem Einreichen-Formular
   herauskommen können: Absatz, Fett, Kursiv, Listen, h2/h3, Zitat, Link. */
.vb-text { font-family: 'DM Sans', sans-serif; font-size: 17px; line-height: 1.72; color: #2c3e44; }
.vb-text p { margin: 0 0 20px; }
.vb-text h2 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 23px; line-height: 1.3; color: #083141; margin: 40px 0 14px; }
.vb-text h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 19px; line-height: 1.35; color: #083141; margin: 30px 0 10px; }
.vb-text h4 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 17px; color: #083141; margin: 24px 0 8px; }
.vb-text ul, .vb-text ol { margin: 0 0 20px; padding-left: 22px; }
.vb-text li { margin-bottom: 9px; }
.vb-text a { color: #114C5F; text-decoration: underline; text-underline-offset: 3px; }
.vb-text strong, .vb-text b { color: #083141; }
.vb-text img { max-width: 100%; height: auto; border-radius: 12px; margin: 10px 0 24px; }
.vb-text blockquote { margin: 26px 0; padding: 16px 22px; background: #EBF2F4; border-left: 4px solid #114C5F;
                      border-radius: 0 10px 10px 0; font-size: 16.5px; color: #083141; }
.vb-text blockquote p:last-child { margin-bottom: 0; }

/* Aufruf mitten im Text, dort wo noch gelesen wird */
.vb-inline-cta { background: #EBF2F4; border: 1px solid #dce6e9; border-radius: 16px; padding: 24px 26px; margin: 36px 0; }
.vb-inline-cta h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 18px; color: #083141; margin: 0 0 8px; }
.vb-inline-cta p { font-family: 'DM Sans', sans-serif; font-size: 15px; line-height: 1.6; color: #59747C; margin: 0 0 16px; }

.vb-autor { display: flex; align-items: center; gap: 14px; border-top: 1px solid #e6eef0; margin-top: 44px; padding-top: 24px; }
.vb-autor-kreis { width: 44px; height: 44px; border-radius: 50%; background: #114C5F; color: #fff; display: flex;
                  align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-weight: 700;
                  font-size: 15px; flex: none; }
.vb-autor-text { font-family: 'DM Sans', sans-serif; font-size: 14.5px; line-height: 1.5; color: #59747C; }
.vb-autor-text strong { display: block; color: #083141; font-size: 15px; }

/* Weiterlesen */
.vb-weiter-block { background: #EBF2F4; padding: 52px 0 60px; }
.vb-weiter-block h2 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 20px; color: #083141; margin: 0 0 20px; }
.vb-weiter-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 760px) { .vb-weiter-grid { grid-template-columns: 1fr 1fr; } }
.vb-weiter-block .vb-karte-bild { aspect-ratio: 16 / 9; }
.vb-weiter-block .vb-karte-text { padding: 18px 20px 20px; }
.vb-weiter-block .vb-karte-text h3 { font-size: 16.5px; }
.vb-weiter-block .vb-label { background: #EBF2F4; color: #114C5F; }

/* =========================================================================
   Kommentare unter Beiträgen
   ========================================================================= */

.vb-kommentare { background: #fff; padding: 0 0 60px; }
.vb-kommentare-titel { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 21px; color: #083141;
                       margin: 0 0 22px; padding-top: 34px; border-top: 1px solid #e6eef0; }

/* Honigtopf: Fuer Menschen unsichtbar, fuer Skripte ein normales Feld.
   Bewusst NICHT display:none, das erkennen viele Skripte. */
.vamp-kf { position: absolute !important; left: -9999px !important; top: auto !important;
           width: 1px !important; height: 1px !important; overflow: hidden !important; }

/* ── Liste ────────────────────────────────────────────────────────────── */
.vb-kommentar-liste { list-style: none; margin: 0 0 40px; padding: 0; }
.vb-kommentar-liste .children { list-style: none; margin: 16px 0 0 0; padding: 0 0 0 22px; border-left: 2px solid #e6eef0; }
@media (min-width: 700px) { .vb-kommentar-liste .children { padding-left: 32px; } }

.vb-kommentar { margin: 0 0 18px; }
.vb-kommentar-inner { background: #f7fafb; border: 1px solid #e6eef0; border-radius: 14px; padding: 18px 20px; }
.vb-kommentar-kopf { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.vb-kommentar-name { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15.5px; color: #083141; }
.vb-kommentar-team { background: #c8dde3; color: #083141; font-family: 'DM Sans', sans-serif; font-weight: 700;
                     font-size: 11px; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.vb-kommentar-datum { font-family: 'DM Sans', sans-serif; font-size: 13px; color: #8aa0a8; }
.vb-kommentar-text { font-family: 'DM Sans', sans-serif; font-size: 15.5px; line-height: 1.65; color: #2c3e44; }
.vb-kommentar-text p { margin: 0 0 12px; }
.vb-kommentar-text p:last-child { margin-bottom: 0; }
.vb-kommentar-wartet { background: #fff8e5; border-left: 3px solid #dba617; border-radius: 0 8px 8px 0;
                       padding: 10px 14px; font-size: 14px; color: #664d03; }
.vb-kommentar-aktion { margin-top: 10px; }
.vb-kommentar-aktion a { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 14px; color: #114C5F; text-decoration: none; }
.vb-kommentar-aktion a:hover { text-decoration: underline; }

/* ── Formular ─────────────────────────────────────────────────────────── */
.comment-respond { background: #EBF2F4; border-radius: 16px; padding: 24px 22px; }
@media (min-width: 700px) { .comment-respond { padding: 30px 32px; } }
.comment-reply-title { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 19px; color: #083141; margin: 0 0 6px; }
.comment-reply-title small { font-family: 'DM Sans', sans-serif; font-weight: 400; font-size: 14px; margin-left: 10px; }
.comment-reply-title small a { color: #114C5F; }
.vb-kommentar-hinweis { font-family: 'DM Sans', sans-serif; font-size: 13.5px; line-height: 1.55; color: #59747C; margin: 0 0 18px; }

.vb-kf-feld { margin: 0 0 16px; }
.vb-kf-feld label { display: block; font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 14px;
                    color: #083141; margin-bottom: 6px; }
.vb-kf-feld input,
.vb-kf-feld textarea { width: 100%; box-sizing: border-box; background: #fff; border: 1px solid #c3d4d9; border-radius: 10px;
                       padding: 11px 14px; font-family: 'DM Sans', sans-serif; font-size: 15px; color: #2c3e44; }
.vb-kf-feld textarea { resize: vertical; min-height: 130px; }
.vb-kf-feld input:focus,
.vb-kf-feld textarea:focus { outline: none; border-color: #114C5F; box-shadow: 0 0 0 3px rgba(17,76,95,.12); }

.vb-kf-einwilligung { margin: 0 0 18px; }
.vb-kf-einwilligung label { display: flex; align-items: flex-start; gap: 10px; font-family: 'DM Sans', sans-serif;
                            font-size: 13.5px; line-height: 1.55; color: #59747C; cursor: pointer; }
.vb-kf-einwilligung input { margin-top: 3px; flex: none; }
.vb-kf-einwilligung a { color: #114C5F; }

/* Absende-Knopf klein und mittig, nicht in voller Breite.
   Doppelter Klassen-Selektor für höhere Spezifität, sonst gewinnt das
   Site-Editor-CSS mit seinen !important-Regeln (siehe CLAUDE.md §13). */
.comment-respond .form-submit { margin: 0; text-align: left; }
.comment-respond .form-submit input.vb-kf-submit.vb-kf-submit {
    width: auto !important;
    max-width: none;
    background: #114C5F !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 11px 22px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
}
.comment-respond .form-submit input.vb-kf-submit.vb-kf-submit:hover { background: #083141 !important; }

/* Kommentare nur für angemeldete VAs: Hinweis statt Formular. */
.vb-kommentar-sperre { background: #EBF2F4; border-radius: 16px; padding: 24px 22px; }
@media (min-width: 700px) { .vb-kommentar-sperre { padding: 28px 32px; } }
.vb-kommentar-sperre p { font-family: 'DM Sans', sans-serif; font-size: 15.5px; line-height: 1.6; color: #2c3e44; margin: 0 0 16px; }
.vb-kommentar-sperre-btns { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.vb-kf-link { font-family: 'DM Sans', sans-serif; font-size: 14px; color: #114C5F; text-decoration: underline; text-underline-offset: 3px; }

/* Absende-Knopf: bewusst kleiner als die grossen Seiten-Knöpfe. */
.vb-kf-submit { display: inline-block; width: auto; background: #114C5F; color: #fff !important; border: none;
                border-radius: 10px; padding: 11px 20px; font-family: 'DM Sans', sans-serif; font-weight: 700;
                font-size: 14.5px; line-height: 1.2; cursor: pointer; text-decoration: none; transition: background .2s; }
.vb-kf-submit:hover { background: #083141; color: #fff !important; }

/* Zielgruppen-Umschaltung: eine Reihe über den Themen. Dunkleres Petrol als
   die Themen-Chips, damit sie als übergeordnete Ebene lesbar ist. */
.vb-zielgruppen { margin-bottom: 12px; }
.vb-zielgruppen .vb-chip { font-weight: 600; }
.vb-zielgruppen .vb-chip.is-aktiv { background: #083141; border-color: #083141; }

/* ── Tabelle im Beitrag ─────────────────────────────────────────────────
   Fuer Vergleichstabellen. Die Kopfspalte links (th in tbody-Zeilen) wird
   hervorgehoben, damit die Kategorien lesbar sind. Auf schmalen Bildschirmen
   scrollt die Tabelle horizontal, statt zu broeseln. */
.vb-tabelle-wrap { margin: 24px 0; overflow-x: auto; background: #fff; border: 1px solid #dce6e9;
                   border-radius: 12px; -webkit-overflow-scrolling: touch; }
.vb-tabelle { width: 100%; border-collapse: collapse; font-family: 'DM Sans', sans-serif;
              font-size: 15px; line-height: 1.5; color: #2c3e44; }
.vb-tabelle thead th { background: #083141; color: #fff; text-align: left; padding: 12px 14px;
                       font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 14px;
                       white-space: nowrap; }
.vb-tabelle thead th:first-child { background: #114C5F; }
.vb-tabelle tbody th { background: #EBF2F4; color: #083141; text-align: left; padding: 12px 14px;
                       font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14.5px;
                       white-space: nowrap; }
.vb-tabelle td { padding: 12px 14px; border-top: 1px solid #e6eef0; vertical-align: top; }
.vb-tabelle tbody tr:nth-child(even) td { background: #f7fafb; }
.vb-tabelle tbody tr:nth-child(even) th { background: #dceaee; }

/* ── FAQ-Block ──────────────────────────────────────────────────────────
   Fragen als h3, dazwischen dezente Trennlinien. Ohne die kleben Frage
   und Antwort direkt an der naechsten Frage, was wie ein Textwall wirkt. */
.vb-faq { margin: 20px 0; }
.vb-faq h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 17px;
             color: #083141; margin: 26px 0 8px; padding-top: 22px; border-top: 1px solid #e6eef0; }
.vb-faq h3:first-child { padding-top: 0; border-top: 0; margin-top: 0; }
.vb-faq p { margin: 0 0 12px; }

/* Verschachtelte Liste im Beitrag: mehrzeilige Punkte mit Fett am Anfang und
   Erklaerung dahinter brauchen etwas Luft. */
.vb-text ol li { margin-bottom: 14px; }

/* =========================================================================
   Karussell — für Blog-Teaser auf Beitragsseiten, Für-VAs, Für-Unternehmen
   und Startseite. Zwei Karten sichtbar auf Desktop, eine auf Handy.
   ========================================================================= */

.vb-kar { background: #EBF2F4; padding: 24px 0 28px; }
@media (min-width: 768px) { .vb-kar { padding: 30px 0 34px; } }

.vb-kar-kopf { margin-bottom: 16px; }
.vb-kar-kopf h2 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 20px;
                  line-height: 1.25; color: #083141; margin: 0; }
@media (min-width: 768px) { .vb-kar-kopf h2 { font-size: 24px; } }

/* Punkte-Steuerung unter dem Karussell. Klein und ruhig, aktiver Punkt in Petrol. */
.vb-kar-punkte { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.vb-kar-punkt { width: 9px; height: 9px; padding: 0; border-radius: 50%;
                background: #c8dde3; border: 0; cursor: pointer; transition: all .15s; }
.vb-kar-punkt:hover { background: #59747C; }
.vb-kar-punkt.is-aktiv { background: #114C5F; transform: scale(1.25); }

.vb-kar-fenster { overflow: hidden; }
.vb-kar-schiene { display: flex; gap: 22px; transition: transform .35s ease; }
/* Immer nur EINE Karte sichtbar. Wechselt per Auto-Play, Pfeilen oder Wischen. */
.vb-kar-karte { flex: 0 0 100%; }

/* Querformat: Bild links, Text rechts. Auf schmalen Bildschirmen wieder
   Bild oben, Text unten, sonst wird das Bild zu winzig zum Erkennen. */
@media (min-width: 720px) {
	.vb-kar .vb-karte { display: grid; grid-template-columns: minmax(280px, 42%) 1fr; align-items: stretch; }
	.vb-kar .vb-karte-bild { aspect-ratio: auto; height: 100%; min-height: 260px; }
	.vb-kar .vb-karte-text { padding: 30px 34px; justify-content: center; }
	.vb-kar .vb-karte-text h3 { font-size: 22px; line-height: 1.3; }
	.vb-kar .vb-karte-text p { font-size: 15.5px; line-height: 1.6; }
}
@media (min-width: 1000px) {
	.vb-kar .vb-karte { grid-template-columns: minmax(340px, 40%) 1fr; }
	.vb-kar .vb-karte-bild { min-height: 300px; }
	.vb-kar .vb-karte-text { padding: 40px 44px; }
	.vb-kar .vb-karte-text h3 { font-size: 26px; }
}