/* ═══════════════════════════════════════════════════════════════════
   hejDAD VÄTERCAMPUS – Stylesheet der vc-*-Modulfamilie
   Genutzt von /vatercampus-hochschulen/, /vaeterbeauftragte/ und
   /vatercampus-business/ sowie von jedem einzelnen vc-*-Modul aus
   dem Baukasten (siehe content_has_class_prefix() in functions.php).

   Die Hochschulen-Seite ist historisch ein roher core/html-Block,
   sämtliche Gestaltung steckt deshalb hier statt in der Editor-
   Seitenleiste. Neuere Seiten (Väterbeauftragte, VÄTERCAMPUS
   Business) bestehen aus echten Blocks und nutzen dieselben Klassen.

   Verwendet die bestehenden Tokens aus main.css:
   --hej-red, --hej-violet, --hej-cosmic, --hej-surface-alt,
   --hej-border, --hej-text, --hej-text-soft, --hej-white,
   --radius-*, --gradient-*, --transition
   ═══════════════════════════════════════════════════════════════════ */

/* ── Seiten-Container ───────────────────────────────────── */
.vc-page {
    max-width: 1140px;
    margin: 0 auto;
    padding: 3rem 1.5rem 5rem;
}

.vc-page > * + * {
    margin-top: 3.5rem;
}

/* .vc-page ist für die Hochschulen-Vorlage gebaut, die den Inhalt ohne
   umgebenden Rahmen ausgibt. In der Standard-Seitenvorlage (page.php)
   sitzt der Container dagegen schon in .content-area__inner, das Breite
   und seitlichen Innenabstand selbst liefert – ohne diese Regel stand
   der gesamte Inhalt (z. B. /vaeterbeauftragte/) rund 30px weiter
   eingerückt als der Seitentitel. Vertikale Abstände bleiben. */
.content-area__inner .vc-page {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* ── 1. HERO ────────────────────────────────────────────── */
.vc-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
}

.vc-hero__intro > * {
    max-width: 34rem;
}

.vc-eyebrow {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--hej-text-soft);
    margin: 0 0 0.25rem;
}

.vc-brand {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--hej-red);
    margin: 0 0 1rem;
}

.vc-brand em {
    font-style: normal;
    color: var(--hej-violet);
}

.vc-hero__intro h1 {
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin: 0 0 1.25rem;
}

.vc-lead {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--hej-text-soft);
    margin: 0;
}

/* Blob-Badge – greift die Blob-Formensprache des Themes auf */
.vc-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    padding: 2rem;
    border-radius: var(--radius-blob-2);
    background: var(--gradient-brand);
    box-shadow: 0 18px 50px rgba(175, 35, 28, 0.22);
    text-align: center;
}

.vc-badge span {
    display: block;
    transform: rotate(-7deg);
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--hej-white);
    text-wrap: balance;
}

/* ── 2. ABSCHNITTS-ÜBERSCHRIFT ──────────────────────────── */
.vc-heading {
    position: relative;
    font-size: clamp(1.375rem, 2.5vw, 1.75rem);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    padding-bottom: 0.75rem;
    margin: 0 0 1.75rem;
}

.vc-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 48px;
    height: 3px;
    background: var(--gradient-brand);
    border-radius: 2px;
}

/* ── 3. KARTEN ──────────────────────────────────────────── */
.vc-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

/* WPs globaler Block-Abstand (margin-block, aus is-layout-constrained)
   verschiebt Grid-Kinder einzeln nach unten – außer dem allerersten
   Kind des Grids, wodurch nur eine Karte pro Zeile "hochrutscht" und
   die Reihen ungleich hoch wirken. Grid-Kinder bekommen ihren Abstand
   bereits über "gap" – WPs Zusatz-margin hier neutralisieren. */
.vc-cards > * {
    margin-block: 0;
}

.vc-card {
    display: flex;
    flex-direction: column;
    background: var(--hej-white);
    border: 1px solid var(--hej-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    transition: box-shadow var(--transition), transform var(--transition);
}

.vc-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 10, 26, 0.08);
}

.vc-card h3 {
    font-size: 1.0625rem;
    margin: 0 0 0.625rem;
}

.vc-card p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--hej-text-soft);
    margin: 0 0 0.875rem;
}

.vc-card p:last-of-type {
    margin-bottom: 0;
}

.vc-card .vc-btn {
    margin-top: auto;
    align-self: flex-start;
}

/* ── 4. BUTTON ──────────────────────────────────────────── */
.vc-btn {
    display: inline-block;
    margin-top: 1.25rem;
    padding: 0.8125rem 1.75rem;
    border-radius: var(--radius-pill);
    background: var(--hej-red);
    color: var(--hej-white);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition), transform var(--transition);
}

.vc-btn:hover,
.vc-btn:focus-visible {
    background: var(--hej-violet);
    color: var(--hej-white);
    transform: translateY(-1px);
}

.vc-btn:focus-visible {
    outline: 3px solid var(--hej-violet);
    outline-offset: 2px;
}

/* Outline-Variante für eine zweite, zurückhaltendere Aktion neben .vc-btn
   (z.B. Anker-Scroll-Link "Module entdecken" neben einem Kontakt-CTA). */
.vc-btn--outline {
    background: transparent;
    color: var(--hej-red);
    border: 1.5px solid var(--hej-red);
}

.vc-btn--outline:hover,
.vc-btn--outline:focus-visible {
    background: var(--hej-red);
    color: var(--hej-white);
}

/* Zeile für mehrere Hero-CTAs nebeneinander (z.B. hej-module/vb-hero) */
.vc-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.75rem;
}

.vc-hero__ctas .vc-btn {
    margin-top: 0;
}

/* ── 5. PANELS ──────────────────────────────────────────── */
.vc-panel {
    border-radius: var(--radius-xl);
    padding: 3rem 2.5rem;
}

.vc-panel--sand {
    background: var(--hej-surface-alt);
}

.vc-panel--ink {
    background: var(--gradient-cosmic);
}

.vc-panel > :first-child { margin-top: 0; }
.vc-panel > :last-child  { margin-bottom: 0; }

.vc-panel--ink .vc-heading,
.vc-panel--ink h2,
.vc-panel--ink h3 {
    color: var(--hej-white);
}

.vc-panel--ink p,
.vc-panel--ink li {
    color: var(--hej-gray);
}

/* ── 6. CHECKLISTEN ─────────────────────────────────────── */
.vc-check {
    list-style: none;
    /* Eigener margin-top statt auf WPs globalen Block-Abstand
       (margin-block, aus is-layout-constrained) zu vertrauen – diese
       Regel hat dieselbe Spezifität und würde ihn sonst über die
       Ladereihenfolge zufällig gewinnen oder verlieren. */
    margin: 1.5rem 0;
    padding: 0;
}

.vc-check li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.875rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    break-inside: avoid;
}

.vc-check li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.15rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--hej-red);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
}

/* Eigene CSS-Grid statt mehrspaltigem Fließtext (columns:2): Der
   Browser balanciert Multi-Column-Inhalt nach Gesamthöhe, wodurch die
   zweite Spalte nicht zwangsläufig auf Höhe der ersten beginnt. Das
   Grid füllt stattdessen zeilenweise (Punkt 1/2 nebeneinander in Zeile
   1, Punkt 3/4 in Zeile 2, …) und beginnt beide Spalten garantiert auf
   gleicher Höhe. */
.vc-check--2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
}

.vc-panel--ink .vc-check li::before {
    background-color: var(--hej-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F0A1A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.vc-note {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--hej-text-soft);
    margin: 1.5rem 0 0;
}

.vc-note strong {
    color: var(--hej-text);
}

/* ── 7. PREIS ───────────────────────────────────────────── */
.vc-price {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.25rem, 5vw, 3rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--hej-text);
    margin: 0 0 0.375rem;
}

.vc-price__label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--hej-text-soft);
    margin: 0 0 1.75rem;
}

/* Preis-Anzeige innerhalb einer Karte: ".vc-card p" ist spezifischer
   als ".vc-price" und würde Größe, Farbe und Abstände sonst auf
   Fließtext zurücksetzen. Hier bewusst eine Stufe kleiner als der
   frei stehende Preis, damit er in die Karte passt. */
.vc-card .vc-price {
    font-size: clamp(1.875rem, 3.5vw, 2.375rem);
    line-height: 1;
    color: var(--hej-text);
    margin: 0 0 0.375rem;
}

.vc-card .vc-price__label {
    font-size: 0.6875rem;
    line-height: 1.4;
    margin: 0 0 1.25rem;
}

/* ── 8. KONTAKT-SPALTEN ─────────────────────────────────── */
.vc-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
    margin: 2rem 0;
}

/* Siehe .vc-cards > * weiter oben: WPs globaler Block-Abstand
   verschiebt sonst nur die Nicht-Erstkinder des Grids nach unten. */
.vc-cols > * {
    margin-block: 0;
}

.vc-cols h3 {
    font-size: 1rem;
    margin: 0 0 0.5rem;
}

.vc-cols p {
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0;
}

.vc-signature {
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 2.5rem 0 0;
}

/* Platzhalter, solange kein Formular eingesetzt ist */
.vc-form-notice {
    background: rgba(255, 255, 255, 0.06);
    border: 1px dashed rgba(255, 255, 255, 0.35);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

.vc-form-notice code {
    color: var(--hej-white);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
}

/* ── 9. FLUENTFORMS IM DUNKLEN PANEL ────────────────────── */
.vc-panel--ink .fluentform {
    margin-top: 1.5rem;
}

.vc-panel--ink .fluentform .ff-el-group {
    margin-bottom: 1rem;
}

.vc-panel--ink .fluentform .ff-el-input--label label,
.vc-panel--ink .fluentform .ff-el-form-check-label {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.875rem;
    line-height: 1.5;
}

.vc-panel--ink .fluentform .ff-el-form-control,
.vc-panel--ink .fluentform input[type="text"],
.vc-panel--ink .fluentform input[type="email"],
.vc-panel--ink .fluentform input[type="tel"],
.vc-panel--ink .fluentform select,
.vc-panel--ink .fluentform textarea {
    width: 100%;
    background: var(--hej-white);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: 0.875rem 1rem;
    font-family: inherit;
    font-size: 0.9375rem;
    color: var(--hej-text);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.vc-panel--ink .fluentform .ff-el-form-control:focus,
.vc-panel--ink .fluentform input:focus,
.vc-panel--ink .fluentform select:focus,
.vc-panel--ink .fluentform textarea:focus {
    outline: none;
    border-color: var(--hej-red);
    box-shadow: 0 0 0 3px rgba(175, 35, 28, 0.25);
}

.vc-panel--ink .fluentform textarea {
    min-height: 8rem;
    resize: vertical;
}

.vc-panel--ink .fluentform .ff-btn-submit {
    background: var(--hej-red);
    color: var(--hej-white);
    border: 0;
    border-radius: var(--radius-pill);
    padding: 0.875rem 2rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}

.vc-panel--ink .fluentform .ff-btn-submit:hover {
    background: var(--hej-violet);
    transform: translateY(-1px);
}

.vc-panel--ink .fluentform .ff-btn-submit:focus-visible {
    outline: 3px solid var(--hej-white);
    outline-offset: 2px;
}

/* ── 10. DREISPALTIGES KARTEN-GRID ──────────────────────── */
/* Zusatzklasse zu .vc-cards. Das Basis-Grid ist bewusst zweispaltig
   (Hochschulen-Seite: „Für Väter" / „Für Hochschulen"); dreispaltig
   wird es nur dort, wo drei gleichwertige Bausteine nebeneinander
   stehen (z.B. Live-Vorträge / Lagerfeuer / hejDAD). */
.vc-cards--3col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ── 11. ABLAUF-SCHRITTE ────────────────────────────────── */
/* Nummerierte Prozessliste als Gegenstück zu .vc-check: gleiche
   Bullet-Geometrie, aber mit Schrittnummer statt Häkchen. Nutzt
   counter() statt <ol>-Markern, damit die Nummer im roten Kreis sitzt. */
.vc-steps {
    list-style: none;
    counter-reset: vc-step;
    /* Eigener margin-top wie bei .vc-check – siehe Kommentar dort. */
    margin: 1.5rem 0;
    padding: 0;
}

.vc-steps li {
    position: relative;
    counter-increment: vc-step;
    padding-left: 2.75rem;
    margin-bottom: 1.125rem;
    font-size: 0.9375rem;
    line-height: 1.55;
}

.vc-steps li::before {
    content: counter(vc-step);
    position: absolute;
    left: 0;
    top: -0.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--hej-red);
    color: var(--hej-white);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
}

.vc-panel--ink .vc-steps li::before {
    background: var(--hej-white);
    color: var(--hej-cosmic);
}

/* ── 12. FAQ-ACCORDION (core/details) ───────────────────── */
/* Styling für den Core-Block „Details" (<details>/<summary>), damit
   die FAQ im Editor visuell bearbeitbar bleibt – der optisch gleiche
   .leistung-card-Akkordeon aus main.css ist reines wp:html-Markup und
   dafür nicht nutzbar. */
.vc-faq-list {
    /* Grid statt Blockfluss: WPs globaler Block-Abstand (margin-block
       aus is-layout-constrained) trifft sonst nur die Nicht-Erstkinder –
       siehe denselben Fix bei .vc-cards. Abstand kommt aus gap. */
    display: grid;
    gap: 0.75rem;
    margin: 1.5rem 0 0;
}

.vc-faq-list > * {
    margin-block: 0;
}

.vc-faq {
    background: var(--hej-white);
    border: 1px solid var(--hej-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.vc-faq:hover {
    border-color: rgba(81, 45, 109, 0.25);
    box-shadow: 0 4px 16px rgba(15, 10, 26, 0.06);
}

.vc-faq > summary {
    position: relative;
    padding: 1.125rem 3.5rem 1.125rem 1.5rem;
    cursor: pointer;
    list-style: none;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--hej-text);
}

.vc-faq > summary::-webkit-details-marker {
    display: none;
}

.vc-faq > summary::after {
    content: '+';
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--hej-surface-alt);
    color: var(--hej-text-soft);
    font-size: 0.75rem;
    transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}

.vc-faq[open] > summary::after {
    transform: translateY(-50%) rotate(45deg);
    background: var(--hej-violet);
    color: var(--hej-white);
}

.vc-faq > summary:focus-visible {
    outline: 2px solid var(--hej-red);
    outline-offset: -2px;
}

/* Klasse doppelt: WPs globale Regel ":root :where(.is-layout-flow) >
   :last-child { margin-block-end: 0 }" steht auf Spezifität (0,2,0) und
   schlug das einfache ".vc-faq > :not(summary)" (0,1,1) – der letzten
   Antwortzeile fehlte dadurch der Abstand zum unteren Kartenrand. */
.vc-faq.vc-faq > :not(summary) {
    margin: 0 1.5rem 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--hej-text-soft);
}

.vc-faq > summary + * {
    padding-top: 1.25rem;
    border-top: 1px solid var(--hej-border);
}

/* ── 13. REDAKTIONELLE PLATZHALTER ──────────────────────── */
/* Sichtbarer Hinweis auf noch fehlende Inhalte (Links, Texte, Preise).
   Bewusst auffällig: vor der Veröffentlichung müssen alle .vc-todo
   entfernt sein. */
.vc-todo {
    display: block;
    border-left: 3px solid var(--hej-red);
    background: rgba(175, 35, 28, 0.06);
    border-radius: var(--radius-md);
    padding: 0.625rem 0.875rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--hej-text-soft);
    margin: 0.75rem 0;
}

.vc-panel--ink .vc-todo {
    background: rgba(255, 255, 255, 0.08);
    border-left-color: var(--hej-white);
    color: rgba(255, 255, 255, 0.8);
}

/* ── 14. GUTENBERG-LAYOUT: AUTO-MARGINS NEUTRALISIEREN ──── */
/* Gutenberg zentriert die Kinder jedes is-layout-constrained-Blocks mit
   "margin-left/right: auto !important" (Core-Regel, siehe auch den
   gleichgelagerten Fix bei .hp-dark-section__content in main.css). Der
   generische Neutralisierer in main.css steht bewusst auf Spezifität 0
   (:where) und kommt gegen das !important nicht an.

   In normalem Blockfluss fällt das nicht auf, weil ein Block ohnehin die
   volle Breite füllt. Sichtbar wird es überall dort, wo das Kind seine
   Breite selbst bestimmt: als Flex-Item (.vc-card ist eine Flex-Spalte,
   auto-Margins schrumpfen das Element dort zusätzlich auf Inhaltsbreite),
   als Grid-Item oder bei eigenem max-width (.vc-hero__intro > *). Genau
   dann rutschen kurze Elemente – Überschrift, Button-Absatz – in die
   Mitte, während langer Fließtext links bleibt.

   Von den Kindern von .vc-hero wird nur .vc-hero__intro neutralisiert,
   nicht .vc-badge. Die Intro-Spalte ist ein Grid-Item: mit auto-Margins
   schrumpft sie auf die Breite ihres Inhalts (34rem, siehe oben) und
   wandert in die Mitte ihrer Grid-Spalte – der gesamte Hero-Text stand
   dadurch rund 45px weiter eingerückt als die Abschnitte darunter.

   Die Klasse steht doppelt im Selektor (.vc-card.vc-card), weil die
   Core-Regel ihre Ausschlüsse in :where() kapselt und damit ebenfalls
   nur auf Spezifität (0,1,0) kommt. Bei Gleichstand und beidseitigem
   !important entscheidet die Ladereihenfolge – die doppelte Klasse hebt
   uns auf (0,2,0) und macht die Regel davon unabhängig. */
.vc-card.vc-card > *,
.vc-cards.vc-cards > *,
.vc-cols.vc-cols > *,
.vc-cols.vc-cols > * > *,
.vc-faq-list.vc-faq-list > *,
.vc-hero.vc-hero > .vc-hero__intro,
.vc-hero__intro.vc-hero__intro > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
    .vc-hero {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .vc-badge {
        margin-left: 0;
        max-width: 260px;
    }

    .vc-panel {
        padding: 2.5rem 1.75rem;
    }

    .vc-cards--3col {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .vc-page {
        padding: 2rem 1.25rem 3.5rem;
    }

    .vc-page > * + * {
        margin-top: 2.5rem;
    }

    .vc-cards,
    .vc-cols {
        grid-template-columns: 1fr;
    }

    .vc-check--2col {
        grid-template-columns: 1fr;
    }

    .vc-faq > summary {
        padding-right: 3rem;
        font-size: 0.9375rem;
    }

    .vc-panel {
        border-radius: var(--radius-lg);
        padding: 2rem 1.5rem;
    }

    .vc-badge {
        max-width: 220px;
    }
}

/* ── Print ──────────────────────────────────────────────── */
@media print {
    .vc-badge,
    .vc-panel--ink .fluentform {
        display: none;
    }

    .vc-panel {
        background: none;
        border: 1px solid #ccc;
        padding: 1.5rem 0;
    }

    .vc-panel--ink h2,
    .vc-panel--ink h3,
    .vc-panel--ink p,
    .vc-panel--ink li {
        color: #000;
    }

    /* Zugeklappte FAQ-Antworten im Druck trotzdem ausgeben. */
    .vc-faq > :not(summary) {
        display: block;
    }

    .vc-faq > summary::after {
        display: none;
    }
}