/* ==========================================================================
   Vertrag-Kuendigen.com – Gestaltung „Briefbogen“ (Erweiterung vertragkuendigen, SEO CMS 1.0.153)
   --------------------------------------------------------------------------
   Hell wie Papier, Tintenblau für Text und Verweise, Signalorange nur für
   Fristen und Warnungen, Grün für „erledigt“. Literata für Überschriften,
   DM Sans für Text, IBM Plex Mono für Daten, Paragrafen und Zahlen.
   Keine Einblend-Effekte – alle Inhalte ohne JavaScript sichtbar.
   Dunkelmodus automatisch über die Systemeinstellung.

   Kontraste (WCAG AA): Tinte #1B2537 auf Papier #F7F4EC = 14,6:1 ·
   leise #4A5468 auf #FFFFFF = 7,6:1 · Blau #1F3A93 auf #FFFFFF = 10,1:1 ·
   Signal #C2410C auf #FFFFFF = 5,2:1 · Weiß auf Signal = 5,2:1 ·
   Grün #2F7D4F auf #FFFFFF = 5,3:1 · dunkel: #E9E5DA auf #11161F = 14,9:1 ·
   Blau #9DB6FF auf #11161F = 9,3:1 · Signal #F28C52 auf #11161F = 7,4:1
   ========================================================================== */

@font-face { font-family: 'Literata'; src: url('/assets/fonts/literata-var.woff2') format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/assets/fonts/dm-sans-var.woff2') format('woff2'); font-weight: 100 1000; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/assets/fonts/dm-sans-var-italic.woff2') format('woff2'); font-weight: 100 1000; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/assets/fonts/ibm-plex-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2'); font-weight: 500 700; font-style: normal; font-display: swap; }

:root {
    --vk-papier: #F7F4EC;
    --vk-blatt: #FFFFFF;
    --vk-blatt-2: #FBF9F4;
    --vk-tinte: #1B2537;
    --vk-tinte-2: #4A5468;
    --vk-tinte-3: #6B7385;
    --vk-linie: #E3DED2;
    --vk-linie-2: #D2CBBB;
    --vk-blau: #1F3A93;
    --vk-blau-2: #162B70;
    --vk-blau-tint: #E8EDF8;
    --vk-signal: #C2410C;
    --vk-signal-2: #9A3412;
    --vk-signal-tint: #FBEADF;
    --vk-gruen: #2F7D4F;
    --vk-gruen-tint: #E5F2EA;
    --vk-nacht: #14213D;
    --vk-nacht-2: #1C2B4D;
    --vk-serif: 'Literata', Georgia, 'Times New Roman', serif;
    --vk-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --vk-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
    --vk-radius: 16px;
    --vk-radius-klein: 10px;
    --vk-schatten: 0 1px 2px rgba(27, 37, 55, .05), 0 10px 28px rgba(27, 37, 55, .07);
    --vk-schatten-gross: 0 2px 6px rgba(27, 37, 55, .07), 0 22px 56px rgba(27, 37, 55, .16);
    --vk-breite: 1200px;
    --vk-text-breite: 740px;

    /* Kernvariablen auf die Marke umstellen */
    --navy: var(--vk-tinte);
    --primary-text: var(--vk-blau);
    --accent-text: var(--vk-blau);
    --font: var(--vk-sans);
    --mono: var(--vk-mono);
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --vk-papier: #11161F;
        --vk-blatt: #182030;
        --vk-blatt-2: #1C2535;
        --vk-tinte: #E9E5DA;
        --vk-tinte-2: #B4B9C5;
        --vk-tinte-3: #8E95A3;
        --vk-linie: #2A3343;
        --vk-linie-2: #374154;
        --vk-blau: #9DB6FF;
        --vk-blau-2: #C3D2FF;
        --vk-blau-tint: #1E2944;
        --vk-signal: #F28C52;
        --vk-signal-2: #F7A877;
        --vk-signal-tint: #3A2416;
        --vk-gruen: #6CC495;
        --vk-gruen-tint: #173226;
        --vk-nacht: #0B1019;
        --vk-nacht-2: #131B2A;
        --vk-schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .3);
        --vk-schatten-gross: 0 2px 6px rgba(0, 0, 0, .35), 0 22px 56px rgba(0, 0, 0, .5);
        color-scheme: dark;
    }
}

/* Inhalte nie versteckt: alte Einblend-Klassen neutralisieren */
.reveal, .reveal.visible { opacity: 1 !important; transform: none !important; }

html { scroll-padding-top: 88px; }
body {
    font-family: var(--vk-sans);
    background: var(--vk-papier);
    color: var(--vk-tinte);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "kern", "liga";
}
a { color: var(--vk-blau); }
a:hover { color: var(--vk-blau-2); }
:focus-visible { outline: 3px solid var(--vk-signal); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(194, 65, 12, .18); }
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--vk-serif); color: var(--vk-tinte); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { background: var(--vk-signal); color: #fff; font-weight: 700; }

.vk-breite { max-width: var(--vk-breite); margin: 0 auto; padding: 0 1.5rem; }
.vk-lesespalte { max-width: calc(var(--vk-text-breite) + 3rem); }
/* Lange zusammengesetzte Wörter („Kündigungsschreiben-Generator“) dürfen auf schmalen Bildschirmen umbrechen */
.vk-main h1, .vk-main h2, .vk-main h3 { overflow-wrap: break-word; }
/* hidden gilt immer – auch für Elemente mit eigener display-Angabe (Karten, Verzeichnisse, Ergebnisse) */
[hidden] { display: none !important; }
.vk-klein, .vk-main .prose .vk-klein { font-size: .86rem; color: var(--vk-tinte-2); line-height: 1.55; }
.vk-rubrik, .vk-main .prose .vk-rubrik {
    display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    font-family: var(--vk-mono); font-size: .74rem; font-weight: 500; letter-spacing: .12em;
    text-transform: uppercase; color: var(--vk-signal); margin: 0 0 .6rem;
}
.vk-rubrik-typ { color: var(--vk-tinte-3); }
.vk-rubrik-typ::before { content: "·"; margin-right: .6rem; color: var(--vk-linie-2); }

/* ---------- Knöpfe ---------- */
.vk-btn, .vk-main .prose .vk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: var(--vk-sans); font-weight: 700; font-size: .95rem; line-height: 1.2;
    padding: .78rem 1.2rem; border-radius: 10px; border: 1.5px solid var(--vk-blau);
    background: var(--vk-blau); color: #fff; cursor: pointer; text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.vk-btn:hover, .vk-main .prose .vk-btn:hover { background: var(--vk-blau-2); border-color: var(--vk-blau-2); color: #fff; }
.vk-btn--signal, .vk-main .prose .vk-btn--signal { background: var(--vk-signal); border-color: var(--vk-signal); color: #fff; }
.vk-btn--signal:hover, .vk-main .prose .vk-btn--signal:hover { background: var(--vk-signal-2); border-color: var(--vk-signal-2); color: #fff; }
.vk-btn--leise, .vk-main .prose .vk-btn--leise { background: transparent; color: var(--vk-blau); border-color: var(--vk-linie-2); }
.vk-btn--leise:hover, .vk-main .prose .vk-btn--leise:hover { background: var(--vk-blau-tint); color: var(--vk-blau-2); border-color: var(--vk-blau); }
.vk-btn--klein, .vk-main .prose .vk-btn--klein { padding: .45rem .8rem; font-size: .85rem; border-radius: 8px; }
.vk-btn.kopiert { border-color: var(--vk-gruen) !important; color: var(--vk-gruen) !important; }
@media (prefers-color-scheme: dark) {
    .vk-btn, .vk-main .prose .vk-btn, .vk-btn:hover, .vk-main .prose .vk-btn:hover { color: #0E1420; }
    .vk-btn--signal, .vk-main .prose .vk-btn--signal, .vk-btn--signal:hover, .vk-main .prose .vk-btn--signal:hover { color: #1A0F08; }
    .vk-btn--leise, .vk-main .prose .vk-btn--leise { color: var(--vk-blau); }
}

/* ==========================================================================
   KOPF UND MENÜ (Markup des Kerns) – wie ein Briefkopf: hell, mit Tintenlinie
   ========================================================================== */
.header { background: color-mix(in srgb, var(--vk-blatt) 94%, transparent); border-bottom: 1px solid var(--vk-linie); backdrop-filter: saturate(140%) blur(8px); position: sticky; top: 0; z-index: 1000; }
.header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--vk-blau) 0 82%, var(--vk-signal) 82% 100%); }
.header-inner { max-width: var(--vk-breite); height: 70px; padding: 0 1.5rem; }
.logo { display: flex; align-items: center; gap: .6rem; color: var(--vk-tinte); text-decoration: none; }
.logo:hover { color: var(--vk-tinte); }
.logo-mark { display: flex; width: auto; height: 34px; align-items: center; background: none; font-size: 0; box-shadow: none; border-radius: 0; color: var(--vk-tinte); }
.logo-mark svg { height: 34px; width: auto; }
.header .logo-text, .footer .logo-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

.nav { gap: .05rem; font-family: var(--vk-sans); }
.nav a, .nav-gruppe-kopf {
    color: var(--vk-tinte); font-size: .94rem; font-weight: 600; padding: .5rem .68rem;
    border-radius: 8px; text-decoration: none; white-space: nowrap;
}
.nav a:hover, .nav a.active { color: var(--vk-blau); background: var(--vk-blau-tint); }
.nav-gruppe { position: relative; }
.nav-gruppe-kopf { display: inline-flex; align-items: center; gap: .35rem; }
.nav-gruppe-kopf::after { content: ""; width: .36rem; height: .36rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .55; }
.nav-gruppe--aktiv > .nav-gruppe-kopf { color: var(--vk-blau); box-shadow: inset 0 -2px 0 var(--vk-signal); border-radius: 8px 8px 0 0; }
.nav-unter {
    position: absolute; top: calc(100% + 8px); left: 0; min-width: 270px; padding: .5rem;
    background: var(--vk-blatt); border: 1px solid var(--vk-linie); border-radius: var(--vk-radius-klein);
    box-shadow: var(--vk-schatten-gross); opacity: 0; visibility: hidden; transform: translateY(4px);
    transition: opacity .15s, transform .15s, visibility .15s; z-index: 1100;
}
.nav-unter:has(> a:nth-child(11)) { columns: 2; column-gap: .5rem; min-width: 500px; }
.nav-gruppe:nth-last-of-type(-n+3) .nav-unter { left: auto; right: 0; }
.nav-unter::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav-gruppe:hover .nav-unter, .nav-gruppe:focus-within .nav-unter { opacity: 1; visibility: visible; transform: none; }
.nav .nav-unter a { display: block; color: var(--vk-tinte); padding: .45rem .7rem; font-size: .9rem; font-weight: 500; border-radius: 7px; break-inside: avoid; white-space: normal; }
.nav .nav-unter a:first-child { font-weight: 700; color: var(--vk-blau); }
.nav .nav-unter a:hover { background: var(--vk-blatt-2); color: var(--vk-blau); }
.nav .nav-unter a.active { background: var(--vk-blau-tint); color: var(--vk-blau); font-weight: 700; }
.nav-cta { margin-left: .4rem; background: var(--vk-signal) !important; color: #fff !important; border-radius: 9px !important; padding: .48rem .95rem !important; font-weight: 700 !important; }
.vk-kopfsuche { margin-left: .5rem; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9px; border: 1px solid var(--vk-linie-2); background: var(--vk-blatt); color: var(--vk-tinte); cursor: pointer; }
.vk-kopfsuche:hover { border-color: var(--vk-blau); color: var(--vk-blau); }
.vk-kopfsuche svg { width: 19px; height: 19px; }
@media (min-width: 1141px) {
    .header-inner > .nav { margin-left: auto; }
    .vk-kopfsuche { order: 3; margin-left: .7rem; }
}
@media (min-width: 1141px) and (max-width: 1300px) {
    .nav a, .nav-gruppe-kopf { padding: .5rem .45rem; font-size: .89rem; }
}
@media (max-width: 1140px) {
    .mobile-toggle { display: flex; position: relative; z-index: 1002; margin-left: auto; }
    .mobile-toggle span { background: var(--vk-tinte); }
    .mobile-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .mobile-toggle.active span:nth-child(2) { opacity: 0; }
    .mobile-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .nav {
        display: none; position: fixed; top: 0; right: 0; width: 90%; max-width: 380px; height: 100vh; overflow-y: auto;
        background: var(--vk-blatt); flex-direction: column; align-items: stretch; padding: 4.75rem 1.25rem 2rem;
        box-shadow: -10px 0 40px rgba(0, 0, 0, .25); z-index: 1001; gap: .1rem; border-left: 1px solid var(--vk-linie);
    }
    .nav.active { display: flex; }
    .nav-gruppe-kopf { font-family: var(--vk-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--vk-signal); padding: 1rem .5rem .35rem; font-weight: 500; }
    .nav-gruppe-kopf::after { display: none; }
    .nav-unter, .nav-unter:has(> a:nth-child(11)) { position: static; opacity: 1; visibility: visible; transform: none; background: none; border: 0; box-shadow: none; padding: 0; min-width: 0; columns: 1; }
    .nav .nav-unter a, .nav .nav-unter a:first-child { color: var(--vk-tinte); padding: .55rem .5rem; border-bottom: 1px solid var(--vk-linie); border-radius: 0; font-weight: 500; }
    .vk-kopfsuche { margin-left: auto; margin-right: .5rem; }
}

/* ---------- Suche ---------- */
.vk-suche-treffer { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 1200; background: var(--vk-blatt); border: 1px solid var(--vk-linie); border-radius: var(--vk-radius-klein); box-shadow: var(--vk-schatten-gross); max-height: 60vh; overflow: auto; padding: .4rem; text-align: left; }
.vk-suche-treffer a { display: block; padding: .55rem .7rem; border-radius: 8px; color: var(--vk-tinte); text-decoration: none; }
.vk-suche-treffer a:hover, .vk-suche-treffer a.aktiv { background: var(--vk-blau-tint); }
.vk-suche-treffer a span { display: block; font-family: var(--vk-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--vk-signal); }
.vk-suche-treffer a strong { font-weight: 650; }
.vk-suche-leer { padding: .6rem .7rem; color: var(--vk-tinte-2); font-size: .92rem; }
.vk-suchebene { position: fixed; inset: 0; z-index: 2000; background: rgba(14, 20, 32, .55); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 1rem 1rem; }
.vk-suchebene[hidden] { display: none; }
.vk-suchebene-box { width: min(640px, 100%); background: var(--vk-blatt); border-radius: var(--vk-radius); padding: 1rem; box-shadow: var(--vk-schatten-gross); }
.vk-suchebene-box input { width: 100%; font: inherit; font-size: 1.1rem; padding: .85rem 1rem; border-radius: 10px; border: 1.5px solid var(--vk-linie-2); background: var(--vk-papier); color: var(--vk-tinte); }
.vk-suchebene-box .vk-suche-treffer { position: static; box-shadow: none; border: 0; margin-top: .5rem; max-height: 55vh; }

/* ==========================================================================
   STARTSEITE
   ========================================================================== */
.vk-held { position: relative; overflow: hidden; padding: clamp(2.5rem, 6vw, 4.75rem) 0 clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--vk-linie);
    background:
        repeating-linear-gradient(180deg, transparent 0 31px, color-mix(in srgb, var(--vk-blau) 7%, transparent) 31px 32px) right top / 46% 100% no-repeat,
        var(--vk-papier); }
.vk-held-inhalt { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.vk-held-kicker { font-family: var(--vk-mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--vk-signal); margin: 0 0 1rem; }
.vk-held h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); line-height: 1.08; font-weight: 650; letter-spacing: -.015em; margin: 0 0 1.1rem; color: var(--vk-tinte); }
.vk-held h1 em { font-style: italic; font-weight: 500; color: var(--vk-blau); }
.vk-held-lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--vk-tinte-2); max-width: 36em; margin: 0 0 1.6rem; }
.vk-held-suche { position: relative; max-width: 620px; }
.vk-held-suche > label { display: block; font-weight: 700; margin: 0 0 .5rem; font-size: 1rem; color: var(--vk-tinte); }
.vk-held-suche-zeile { display: flex; gap: .5rem; background: var(--vk-blatt); border: 1.5px solid var(--vk-linie-2); border-radius: 14px; padding: .4rem; box-shadow: var(--vk-schatten); }
.vk-held-suche-zeile:focus-within { border-color: var(--vk-blau); }
.vk-held-suche input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 1.08rem; padding: .6rem .75rem; color: var(--vk-tinte); }
.vk-held-suche input:focus { outline: none; }
.vk-suche-hell { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1.5rem; }
.vk-suche-hell input { flex: 1 1 16rem; font: inherit; padding: .7rem .9rem; border: 1.5px solid var(--vk-linie-2); border-radius: 10px; background: var(--vk-blatt); color: var(--vk-tinte); }
.vk-einstiege { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin: 1.4rem 0 0; padding: 0; max-width: 680px; }
.vk-einstiege a { display: flex; flex-direction: column; gap: .15rem; height: 100%; padding: .8rem .95rem; background: var(--vk-blatt); border: 1px solid var(--vk-linie); border-radius: 12px; text-decoration: none; color: var(--vk-tinte); transition: border-color .15s, transform .15s; }
.vk-einstiege a:hover { border-color: var(--vk-blau); transform: translateY(-2px); }
.vk-einstiege strong { font-size: .97rem; color: var(--vk-blau); }
.vk-einstiege strong::after { content: " →"; }
.vk-einstiege span { font-size: .84rem; color: var(--vk-tinte-2); line-height: 1.4; }
.vk-held-bild { position: relative; min-height: 320px; display: flex; align-items: center; justify-content: center; }
.vk-held-bild figure { margin: 0; width: 100%; }
.vk-held-bild figure img { border-radius: 18px; box-shadow: var(--vk-schatten-gross); display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.vk-held-bild figure figcaption { font-size: .72rem; color: var(--vk-tinte-3); margin-top: .4rem; text-align: right; }
.vk-held-bild figure + .vk-held-brief { position: absolute; left: -36px; right: auto; bottom: -30px; width: 44%; transform: rotate(-3deg); }
.vk-held-brief { position: relative; width: min(360px, 88%); aspect-ratio: 210 / 250; background: #FFFFFF; border: 1px solid #E3DED2; border-radius: 6px; box-shadow: var(--vk-schatten-gross); padding: 9% 9% 0; transform: rotate(2.5deg); display: flex; flex-direction: column; gap: 6.5%; }
.vk-held-brief strong { font-family: var(--vk-sans); font-size: clamp(.68rem, 1.1vw, .86rem); color: #1B2537; margin-top: 4%; }
.vk-held-brief-zeile { display: block; height: 7px; border-radius: 4px; background: #E6E1D6; width: 100%; }
.vk-held-brief-zeile--kurz { width: 42%; }
.vk-held-brief-zeile--mittel { width: 70%; }
.vk-held-stempel { position: absolute; right: 8%; bottom: 12%; transform: rotate(-11deg); font-family: var(--vk-mono); font-weight: 600; font-size: clamp(.7rem, 1.2vw, .95rem); letter-spacing: .14em; text-transform: uppercase; color: #C2410C; border: 2.5px solid #C2410C; border-radius: 8px; padding: .35em .7em; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3.5px #C2410C; opacity: .9; }
@media (max-width: 900px) {
    .vk-held { background: var(--vk-papier); }
    .vk-held-inhalt { grid-template-columns: minmax(0, 1fr); }
    .vk-held-bild { min-height: 0; order: -1; display: none; }
    .vk-einstiege { grid-template-columns: minmax(0, 1fr); }
}

/* Fristen im Blick */
.vk-fristenband { background: var(--vk-nacht); color: #EDE9DF; padding: 1.4rem 0; }
.vk-fristenband-titel { font-family: var(--vk-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: #F7A877; margin: 0 0 .9rem; font-weight: 500; }
.vk-fristen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .8rem 1.6rem; }
.vk-frist { display: flex; flex-direction: column; gap: .15rem; padding-left: .9rem; border-left: 2px solid rgba(247, 168, 119, .55); }
.vk-frist-titel { font-weight: 700; }
.vk-frist-titel a { color: #fff; text-decoration: none; }
.vk-frist-titel a:hover { text-decoration: underline; }
.vk-frist-regel { font-size: .9rem; color: rgba(237, 233, 223, .8); }
.vk-frist-countdown { font-family: var(--vk-mono); font-size: .82rem; color: #F7A877; }

.vk-abschnitt { padding: clamp(2.75rem, 6vw, 4.5rem) 0; }
.vk-abschnitt--flaeche { background: var(--vk-blatt-2); border-top: 1px solid var(--vk-linie); border-bottom: 1px solid var(--vk-linie); }
.vk-abschnitt-kopf { max-width: 760px; margin: 0 0 1.8rem; }
.vk-abschnitt-kopf h2 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); line-height: 1.2; font-weight: 650; margin: 0 0 .6rem; letter-spacing: -.01em; }
.vk-abschnitt-kopf p:not(.vk-rubrik) { color: var(--vk-tinte-2); margin: 0; }
.vk-abschnitt-mehr { margin: 1.5rem 0 0; }
.vk-link-pfeil { font-weight: 700; color: var(--vk-blau); text-decoration: none; }
.vk-link-pfeil::after { content: " →"; }
.vk-link-pfeil:hover { text-decoration: underline; }

.vk-anbieterkacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .7rem; }
.vk-anbieterkacheln a, .vk-anbieterkacheln li > span { display: flex; flex-direction: column; gap: .1rem; height: 100%; padding: .9rem 1rem; background: var(--vk-blatt); border: 1px solid var(--vk-linie); border-radius: 12px; text-decoration: none; color: var(--vk-tinte); transition: border-color .15s, box-shadow .15s; }
.vk-anbieterkacheln a:hover { border-color: var(--vk-blau); box-shadow: var(--vk-schatten); }
.vk-anbieterkacheln strong { font-family: var(--vk-serif); font-size: 1.1rem; font-weight: 650; }
.vk-anbieterkacheln span span, .vk-anbieterkacheln a span { font-size: .82rem; color: var(--vk-tinte-2); }

.vk-bereichskarten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.1rem; }
.vk-bereichskarte { position: relative; display: flex; flex-direction: column; background: var(--vk-blatt); border: 1px solid var(--vk-linie); border-radius: var(--vk-radius); overflow: hidden; transition: box-shadow .15s, border-color .15s; }
.vk-bereichskarte:hover { box-shadow: var(--vk-schatten); border-color: var(--vk-linie-2); }
.vk-bereichskarte-bild { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.vk-bereichskarte-bild--leer { display: flex; align-items: center; justify-content: center; font-family: var(--vk-serif); font-size: 3rem; color: var(--vk-blau); background: repeating-linear-gradient(180deg, var(--vk-blatt-2) 0 23px, var(--vk-linie) 23px 24px); }
.vk-bereichskarte-text { padding: 1rem 1.15rem 1.2rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.vk-bereichskarte-link { font-family: var(--vk-serif); font-weight: 650; font-size: 1.25rem; color: var(--vk-tinte); text-decoration: none; }
.vk-bereichskarte-link::after { content: ""; position: absolute; inset: 0; }
.vk-bereichskarte-text p { margin: 0; color: var(--vk-tinte-2); font-size: .94rem; }
.vk-zahl-chip { align-self: flex-start; margin-top: auto; font-family: var(--vk-mono); font-size: .74rem; color: var(--vk-tinte-2); border: 1px solid var(--vk-linie); border-radius: 999px; padding: .1rem .55rem; }

.vk-lebenslagen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; }
.vk-lebenslagen a { display: flex; flex-direction: column; gap: .25rem; height: 100%; padding: 1rem 1.1rem; border-radius: 12px; border: 1px solid var(--vk-linie); background: var(--vk-blatt); text-decoration: none; color: var(--vk-tinte); }
.vk-lebenslagen a:hover { border-color: var(--vk-signal); }
.vk-lebenslagen strong { font-family: var(--vk-serif); font-size: 1.12rem; }
.vk-lebenslagen span { font-size: .88rem; color: var(--vk-tinte-2); }
/* Startseite: Arbeit und Miete (Karten mit Marke), Textabschnitte, Magazin */
.vk-rollen-marke { font-style: normal; font-size: .72rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--vk-signal); }
.vk-start-text .vk-abschnitt-kopf { margin-bottom: 1.2rem; }
.vk-start-text .prose > :first-child { margin-top: 0; }
.vk-start-text .prose > :last-child { margin-bottom: 0; }
.vk-start-unterkopf { font-family: var(--vk-serif); font-size: 1.3rem; font-weight: 650; margin: 2.4rem 0 1rem; }
.vk-magazinkarten { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.vk-magazinkarten .vk-bereichskarte-link { font-size: 1.08rem; line-height: 1.3; }

.vk-werkzeug-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .9rem; }
.vk-werkzeugkarte { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .9rem; align-items: start; padding: 1rem 1.1rem; background: var(--vk-blatt); border: 1px solid var(--vk-linie); border-radius: 12px; }
.vk-werkzeugkarte:hover { border-color: var(--vk-blau); }
.vk-werkzeug-zeichen { grid-row: span 2; width: 2.6rem; height: 2.6rem; border-radius: 10px; display: grid; place-items: center; font-family: var(--vk-mono); font-weight: 600; color: var(--vk-blau); background: var(--vk-blau-tint); }
.vk-werkzeug-link { font-weight: 700; color: var(--vk-tinte); text-decoration: none; }
.vk-werkzeug-link::after { content: ""; position: absolute; inset: 0; }
.vk-werkzeugkarte p, .vk-main .prose .vk-werkzeugkarte p { margin: 0; font-size: .9rem; color: var(--vk-tinte-2); }

.vk-versprechen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.vk-versprechen li { padding: 1.3rem 1.3rem 1.4rem; background: var(--vk-blatt); border: 1px solid var(--vk-linie); border-radius: var(--vk-radius); }
.vk-versprechen-nr { font-family: var(--vk-mono); color: var(--vk-signal); font-size: .9rem; }
.vk-versprechen-titel { font-family: var(--vk-serif); font-size: 1.3rem; font-weight: 650; margin: .3rem 0 .35rem; }
.vk-versprechen p:last-child { margin: 0; color: var(--vk-tinte-2); }
.vk-haltung-fuss { margin: 1.4rem 0 0; }
@media (max-width: 860px) { .vk-versprechen { grid-template-columns: minmax(0, 1fr); } }

.vk-linkliste { list-style: none; margin: 0; padding: 0; }
.vk-linkliste li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--vk-linie); }
.vk-linkliste a { font-weight: 600; text-decoration: none; min-width: 0; hyphens: auto; overflow-wrap: anywhere; }
.vk-linkliste a:hover { text-decoration: underline; }
.vk-linkliste time { font-family: var(--vk-mono); font-size: .8rem; color: var(--vk-tinte-3); white-space: nowrap; }
.vk-linkliste--spalten { columns: 2; column-gap: 2.5rem; }
.vk-linkliste--spalten li { break-inside: avoid; }
@media (max-width: 760px) { .vk-linkliste--spalten { columns: 1; } }
@media (max-width: 480px) { .vk-linkliste li { flex-wrap: wrap; gap: .15rem 1rem; } }

/* ==========================================================================
   ARTIKEL
   ========================================================================== */
.vk-main { min-height: 50vh; }
.vk-kopf { padding: clamp(1.6rem, 4vw, 2.75rem) 0 1.4rem; }
.vk-kopf-inhalt { max-width: var(--vk-breite); }
.vk-brotkrumen { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .84rem; color: var(--vk-tinte-3); margin: 0 0 1.2rem; }
.vk-brotkrumen a { color: var(--vk-tinte-2); text-decoration: none; }
.vk-brotkrumen a:hover { color: var(--vk-blau); text-decoration: underline; }
.vk-brotkrumen [aria-current] { color: var(--vk-tinte-2); }
.vk-kopf h1 { font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.12; font-weight: 650; letter-spacing: -.015em; margin: 0 0 1rem; max-width: 22em; }
.vk-lead { font-size: clamp(1.08rem, 1.7vw, 1.22rem); line-height: 1.6; color: var(--vk-tinte-2); max-width: 46em; margin: 0 0 1.2rem; }
.vk-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center; font-size: .88rem; color: var(--vk-tinte-2); margin: 0; }
.vk-meta a { color: var(--vk-tinte); font-weight: 600; }
.vk-meta-geprueft { display: inline-block; white-space: nowrap; font-family: var(--vk-mono); font-size: .78rem; letter-spacing: .02em; color: var(--vk-gruen); border: 1px solid color-mix(in srgb, var(--vk-gruen) 45%, transparent); border-radius: 999px; padding: .15rem .65rem; }
.vk-meta-geprueft::before { content: ""; display: inline-block; vertical-align: middle; margin: -.1rem .45rem 0 0; width: .45rem; height: .45rem; border-radius: 50%; background: var(--vk-gruen); }
@media (max-width: 420px) { .vk-meta-geprueft { white-space: normal; } }

.vk-titelbild-rahmen { margin-bottom: 2rem; }
.vk-bild { margin: 2rem 0; }
.vk-bild img { display: block; width: 100%; border-radius: var(--vk-radius); }
.vk-titelbild img { aspect-ratio: 3 / 1; object-fit: cover; }
@media (max-width: 760px) { .vk-titelbild img { aspect-ratio: 16 / 9; } }
.vk-seitenbild { margin: 0; }
.vk-seitenbild img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
@media (max-width: 1100px) { .vk-seitenspalte .vk-seitenbild { display: none; } }
.vk-bild figcaption, .vk-main .prose .vk-bild figcaption { font-size: .8rem; color: var(--vk-tinte-3); margin-top: .45rem; }
.vk-ki { font-family: var(--vk-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--vk-tinte-3); border: 1px solid var(--vk-linie); border-radius: 4px; padding: 0 .35rem; margin-left: .3rem; }

.vk-raster { display: grid; grid-template-columns: minmax(0, var(--vk-text-breite)); justify-content: center; gap: 3rem; padding-bottom: 3.5rem; }
.vk-raster--toc { grid-template-columns: 250px minmax(0, var(--vk-text-breite)); justify-content: space-between; }
@media (max-width: 1100px) { .vk-raster--toc { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; } }
.vk-seitenspalte { position: relative; }
.vk-seitenspalte > * + * { margin-top: 1.2rem; }
@media (min-width: 1101px) { .vk-seitenspalte { position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 110px); overflow: auto; } }
.vk-toc { border-left: 2px solid var(--vk-linie); padding-left: 1rem; }
.vk-toc summary { font-family: var(--vk-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--vk-tinte-3); cursor: pointer; list-style: none; margin-bottom: .6rem; }
.vk-toc summary::-webkit-details-marker { display: none; }
.vk-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.vk-toc li { margin: 0 0 .1rem; }
.vk-toc a { display: block; padding: .3rem 0; font-size: .9rem; line-height: 1.35; color: var(--vk-tinte-2); text-decoration: none; }
.vk-toc a:hover, .vk-toc a.aktuell { color: var(--vk-blau); }
.vk-toc a.aktuell { font-weight: 700; }
@media (max-width: 1100px) { .vk-toc { border: 1px solid var(--vk-linie); border-radius: 12px; padding: .8rem 1rem; background: var(--vk-blatt); } .vk-toc summary { margin: 0; } .vk-toc[open] summary { margin-bottom: .6rem; } }
.vk-seitenspalte-werkzeug { display: flex; flex-direction: column; gap: .2rem; padding: 1rem; border-radius: 12px; background: var(--vk-nacht); color: #EDE9DF; text-decoration: none; }
.vk-seitenspalte-werkzeug .vk-rubrik { color: #F7A877; margin: 0; }
.vk-seitenspalte-werkzeug strong { font-family: var(--vk-serif); font-size: 1.08rem; color: #fff; }
.vk-seitenspalte-werkzeug span:last-child { font-size: .84rem; color: rgba(237, 233, 223, .8); }
.vk-seitenspalte-werkzeug:hover strong { text-decoration: underline; }
@media (max-width: 1100px) { .vk-seitenspalte-werkzeug { display: none; } }

/* Lesetext */
.vk-text { color: var(--vk-tinte); font-size: 1.0625rem; line-height: 1.72; }
.vk-text > :first-child { margin-top: 0; }
.vk-text h2 { font-family: var(--vk-serif); font-size: clamp(1.45rem, 2.6vw, 1.8rem); line-height: 1.25; font-weight: 650; color: var(--vk-tinte); letter-spacing: -.01em; margin: 2.8rem 0 .9rem; padding: 0; border: 0; scroll-margin-top: 96px; }
.vk-text h3 { font-family: var(--vk-serif); font-size: 1.22rem; line-height: 1.35; font-weight: 650; color: var(--vk-tinte); margin: 2rem 0 .6rem; scroll-margin-top: 96px; }
.vk-text h4 { font-size: 1rem; font-weight: 700; margin: 1.5rem 0 .4rem; }
.vk-text p { margin: 0 0 1.1rem; }
.vk-text ul, .vk-text ol { margin: 0 0 1.3rem 1.3rem; padding: 0; }
.vk-text li { margin: 0 0 .45rem; }
.vk-text li::marker { color: var(--vk-signal); }
.vk-text a { color: var(--vk-blau); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.vk-text a:hover { text-decoration-thickness: 2px; }
.vk-text strong { color: var(--vk-tinte); font-weight: 700; }
.vk-text blockquote { margin: 1.8rem 0; padding: .4rem 0 .4rem 1.3rem; border-left: 3px solid var(--vk-signal); background: none; color: var(--vk-tinte); font-family: var(--vk-serif); font-size: 1.1rem; font-style: italic; border-radius: 0; }
.vk-text code { font-family: var(--vk-mono); font-size: .88em; background: var(--vk-blau-tint); color: var(--vk-blau); padding: .1rem .35rem; border-radius: 5px; }
.vk-text hr { border: 0; border-top: 1px solid var(--vk-linie); margin: 2.5rem 0; }

/* Tabellen */
.vk-text table, .vk-main .prose table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.6rem 0; font-size: .95rem; background: var(--vk-blatt); border: 1px solid var(--vk-linie); border-radius: 12px; overflow: hidden; }
@media (max-width: 700px) { .vk-text table, .vk-main .prose table { display: block; overflow-x: auto; } }
.vk-main .prose th, .vk-main .prose tbody th { background: transparent; color: var(--vk-tinte); font-size: inherit; }
.vk-text thead th, .vk-main .prose thead th { background: var(--vk-blatt-2); font-family: var(--vk-mono); font-size: .74rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--vk-tinte-2); text-align: left; }
.vk-text th, .vk-text td, .vk-main .prose th, .vk-main .prose td { padding: .7rem .9rem; border-bottom: 1px solid var(--vk-linie); vertical-align: top; text-align: left; }
.vk-text tbody th { font-weight: 700; color: var(--vk-tinte); }
.vk-text tbody tr:last-child > * { border-bottom: 0; }
.vk-text td.zahl, .vk-text .vk-mono { font-family: var(--vk-mono); font-size: .9em; white-space: nowrap; }
.vk-text table caption { caption-side: bottom; font-size: .8rem; color: var(--vk-tinte-3); padding: .5rem .9rem; text-align: left; }

/* Das Wichtigste in Kürze */
.vk-kern { margin: 0 0 2rem; padding: 1.2rem 1.4rem 1rem; background: var(--vk-blatt); border: 1px solid var(--vk-linie); border-left: 4px solid var(--vk-blau); border-radius: 0 var(--vk-radius-klein) var(--vk-radius-klein) 0; }
.vk-main .prose .vk-kern-titel { font-family: var(--vk-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--vk-blau); margin: 0 0 .6rem; }
.vk-main .prose .vk-kern ul { list-style: none; margin: 0; padding: 0; }
.vk-main .prose .vk-kern li { position: relative; padding-left: 1.6rem; margin: 0 0 .5rem; }
.vk-main .prose .vk-kern li::before { content: ""; position: absolute; left: .1rem; top: .45em; width: .7rem; height: .38rem; border-left: 2px solid var(--vk-gruen); border-bottom: 2px solid var(--vk-gruen); transform: rotate(-45deg); }

.vk-link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--vk-blau); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Kästen */
.vk-kasten { margin: 1.8rem 0; padding: 1rem 1.25rem 1rem 1.25rem; border-radius: var(--vk-radius-klein); border: 1px solid; border-left-width: 4px; }
.vk-main .prose .vk-kasten p { margin: 0 0 .5rem; }
.vk-main .prose .vk-kasten p:last-child { margin: 0; }
.vk-main .prose .vk-kasten-titel { font-family: var(--vk-mono); font-size: .74rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .35rem; }
.vk-kasten--merke { background: var(--vk-blau-tint); border-color: color-mix(in srgb, var(--vk-blau) 30%, transparent); }
.vk-kasten--merke .vk-kasten-titel { color: var(--vk-blau) !important; }
.vk-kasten--achtung { background: var(--vk-signal-tint); border-color: color-mix(in srgb, var(--vk-signal) 40%, transparent); }
.vk-kasten--achtung .vk-kasten-titel { color: var(--vk-signal-2) !important; }
.vk-kasten--praxis { background: var(--vk-gruen-tint); border-color: color-mix(in srgb, var(--vk-gruen) 35%, transparent); }
.vk-kasten--praxis .vk-kasten-titel { color: var(--vk-gruen) !important; }
@media (prefers-color-scheme: dark) { .vk-kasten--achtung .vk-kasten-titel { color: var(--vk-signal) !important; } }

/* Norm- und Urteils-Chips */
.vk-text a.vk-norm, .vk-norm { font-family: var(--vk-mono); font-size: .86em; font-weight: 500; color: var(--vk-blau); background: var(--vk-blau-tint); border-radius: 4px; padding: 0 .28em; text-decoration: none; white-space: nowrap; }
.vk-text a.vk-norm:hover { text-decoration: underline; }
.vk-text a.vk-urteil, .vk-urteil { font-family: var(--vk-mono); font-size: .84em; color: var(--vk-tinte); border: 1px dashed var(--vk-linie-2); border-radius: 5px; padding: .02em .38em; text-decoration: none; white-space: nowrap; }
.vk-text a.vk-urteil:hover { border-color: var(--vk-blau); color: var(--vk-blau); }

/* Schrittlisten: <ol class="vk-schritte"> */
.vk-main .prose ol.vk-schritte { list-style: none; counter-reset: schritt; margin: 1.5rem 0 1.8rem; padding: 0; }
.vk-main .prose ol.vk-schritte > li { counter-increment: schritt; position: relative; padding: 0 0 1.1rem 3.3rem; margin: 0; min-height: 2.6rem; }
.vk-main .prose ol.vk-schritte > li::before { content: counter(schritt); position: absolute; left: 0; top: -.15rem; width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--vk-serif); font-weight: 700; font-size: 1.1rem; color: var(--vk-blatt); background: var(--vk-blau); }
.vk-main .prose ol.vk-schritte > li::after { content: ""; position: absolute; left: 1.12rem; top: 2.3rem; bottom: .1rem; width: 2px; background: var(--vk-linie); }
.vk-main .prose ol.vk-schritte > li:last-child::after { display: none; }
.vk-main .prose ol.vk-schritte > li > strong:first-child { display: block; font-family: var(--vk-serif); font-size: 1.08rem; }

/* Quellen: <ul class="vk-quellen"> */
.vk-main .prose .vk-quellen { list-style: none; margin: 0 0 1.5rem; padding: 0; font-size: .9rem; }
.vk-main .prose .vk-quellen li { padding: .45rem 0; margin: 0; border-bottom: 1px solid var(--vk-linie); color: var(--vk-tinte-2); }
.vk-main .prose .vk-quellen time, .vk-main .prose .vk-quellen .vk-abruf { font-family: var(--vk-mono); font-size: .78rem; color: var(--vk-tinte-3); }

.vk-rechtshinweis, .vk-main .prose .vk-rechtshinweis { margin: 2.4rem 0 0; padding: .9rem 0 0; border-top: 1px solid var(--vk-linie); font-size: .86rem; color: var(--vk-tinte-2); }

/* FAQ */
.vk-main .faq-block { margin-top: 3rem; }
.vk-main .faq-block .section-heading { font-family: var(--vk-serif); font-size: clamp(1.45rem, 2.6vw, 1.8rem); font-weight: 650; color: var(--vk-tinte); border: 0; padding: 0; letter-spacing: -.01em; }
.vk-main .faq-list { gap: .6rem; }
.vk-main .faq-item { background: var(--vk-blatt); border: 1px solid var(--vk-linie); border-radius: 12px; }
.vk-main .faq-item[open] { border-color: var(--vk-linie-2); box-shadow: var(--vk-schatten); }
.vk-main .faq-q { color: var(--vk-tinte); font-weight: 700; font-size: 1rem; }
.vk-main .faq-q::after { color: var(--vk-signal); }
.vk-main .faq-q:hover { color: var(--vk-blau); }
.vk-main .faq-a { color: var(--vk-tinte); font-size: .98rem; line-height: 1.7; }

/* Autorbox */
.vk-autorbox { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; margin: 2rem 0 0; padding: 1.2rem 1.3rem; background: var(--vk-blatt); border: 1px solid var(--vk-linie); border-radius: var(--vk-radius); }
.vk-autor-bild { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.vk-autor-initialen { display: grid; place-items: center; background: var(--vk-blau); color: #fff; font-family: var(--vk-serif); font-weight: 700; font-size: 1.3rem; }
.vk-main .prose .vk-autor-name { margin: 0 0 .25rem; font-weight: 700; }
.vk-autor-name span { font-weight: 400; color: var(--vk-tinte-2); font-size: .9rem; }
.vk-main .prose .vk-autorbox p { margin: 0 0 .35rem; font-size: .93rem; }

/* Passt dazu, Karten */
.vk-passt { padding: 3rem 0 4rem; background: var(--vk-blatt-2); border-top: 1px solid var(--vk-linie); }
.vk-passt h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin: 0 0 1.3rem; font-weight: 650; }
.vk-karten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.vk-themenkarte { position: relative; background: var(--vk-blatt); border: 1px solid var(--vk-linie); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.vk-themenkarte:hover { border-color: var(--vk-linie-2); box-shadow: var(--vk-schatten); }
.vk-themenkarte-bild { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.vk-themenkarte-text { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .3rem; }
.vk-themenkarte-text .vk-rubrik { margin: 0; font-size: .68rem; }
.vk-themenkarte-link { font-family: var(--vk-serif); font-weight: 650; font-size: 1.08rem; color: var(--vk-tinte); text-decoration: none; }
.vk-themenkarte-link::after { content: ""; position: absolute; inset: 0; }
.vk-themenkarte-text p { margin: 0; font-size: .9rem; color: var(--vk-tinte-2); }

.vk-seitenkarten { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .9rem; }
.vk-seitenkarte { position: relative; display: flex; flex-direction: column; background: var(--vk-blatt); border: 1px solid var(--vk-linie); border-radius: 12px; overflow: hidden; }
.vk-seitenkarte:hover { border-color: var(--vk-blau); }
.vk-seitenkarte-bild { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.vk-seitenkarte-bild--leer { display: block; background: repeating-linear-gradient(180deg, var(--vk-blatt-2) 0 15px, var(--vk-linie) 15px 16px); }
.vk-main .prose .vk-seitenkarte-link { padding: .7rem .85rem 0; font-weight: 700; color: var(--vk-tinte); text-decoration: none; line-height: 1.35; }
.vk-seitenkarte-link::after { content: ""; position: absolute; inset: 0; }
.vk-main .prose .vk-seitenkarte p { margin: .25rem .85rem .85rem; font-size: .86rem; color: var(--vk-tinte-2); line-height: 1.45; }

/* ==========================================================================
   KÜNDIGUNGS-STECKBRIEF (Karteikarte)
   ========================================================================== */
.vk-steckbrief { margin: 0 0 2.2rem; background: var(--vk-blatt); border: 1px solid var(--vk-linie-2); border-radius: var(--vk-radius); box-shadow: var(--vk-schatten); overflow: hidden; }
.vk-steckbrief-kopf { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; padding: 1.2rem 1.4rem .9rem; border-bottom: 1px solid var(--vk-linie);
    background: repeating-linear-gradient(180deg, transparent 0 27px, color-mix(in srgb, var(--vk-blau) 6%, transparent) 27px 28px), var(--vk-blatt); }
.vk-main .prose .vk-steckbrief-titel { font-family: var(--vk-serif); font-size: 1.45rem; font-weight: 650; margin: 0; line-height: 1.2; color: var(--vk-tinte); }
.vk-main .prose .vk-steckbrief-firma { margin: .3rem 0 0; font-size: .86rem; color: var(--vk-tinte-2); }
.vk-main .prose .vk-steckbrief .vk-rubrik { margin-bottom: .3rem; }
.vk-stempel, .vk-main .prose .vk-stempel { flex: none; margin: 0; transform: rotate(-6deg); display: flex; flex-direction: column; align-items: center; gap: .05rem; padding: .35rem .7rem; color: var(--vk-gruen); border: 2px solid var(--vk-gruen); border-radius: 8px; font-family: var(--vk-mono); text-transform: uppercase; line-height: 1.2; }
.vk-stempel span { font-size: .66rem; letter-spacing: .16em; }
.vk-stempel time { font-size: .84rem; font-weight: 600; letter-spacing: .04em; }
.vk-main .prose .vk-wege { margin: 0; padding: .3rem 1.4rem; }
.vk-weg { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .3rem 1rem; padding: .85rem 0; border-bottom: 1px dashed var(--vk-linie); }
.vk-weg:last-child { border-bottom: 0; }
.vk-main .prose .vk-weg dt { font-family: var(--vk-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--vk-tinte-2); padding-top: .2rem; font-weight: 500; }
.vk-main .prose .vk-weg dd { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.vk-main .prose .vk-weg address { font-style: normal; font-weight: 600; line-height: 1.45; }
.vk-weg-text { font-size: .9rem; color: var(--vk-tinte-2); }
.vk-weg-gilt { font-size: .78rem; font-family: var(--vk-mono); color: var(--vk-tinte-3); }
.vk-weg--online { background: linear-gradient(90deg, var(--vk-gruen-tint), transparent 70%); margin: 0 -1.4rem; padding-left: 1.4rem; padding-right: 1.4rem; }
@media (max-width: 560px) { .vk-weg { grid-template-columns: minmax(0, 1fr); } }
.vk-main .prose .vk-steckbrief-fristen { margin: 0; border: 0; border-top: 1px solid var(--vk-linie); border-radius: 0; display: table; }
.vk-main .prose .vk-steckbrief-fristen th, .vk-main .prose .vk-steckbrief-fristen td { padding: .65rem 1.4rem; }
.vk-beleg { display: block; font-family: var(--vk-mono); font-size: .74rem; color: var(--vk-tinte-3); margin-top: .15rem; }
.vk-main .prose .vk-steckbrief-hinweis { margin: 0; padding: .8rem 1.4rem; border-top: 1px solid var(--vk-linie); background: var(--vk-signal-tint); font-size: .93rem; }
.vk-main .prose .vk-steckbrief-fuss { padding: .8rem 1.4rem 1rem; border-top: 1px solid var(--vk-linie); font-size: .82rem; color: var(--vk-tinte-2); background: var(--vk-blatt-2); }
.vk-main .prose .vk-steckbrief-fuss p { margin: 0 0 .3rem; }
.vk-main .prose .vk-steckbrief-fuss p:last-child { margin: 0; }

/* Sammelseiten: Mitgliederverzeichnis */
.vk-mitglieder { margin: 1.6rem 0 2rem; }
.vk-main .prose .vk-mitglieder-kopf h3 { margin: 0 0 .3rem; }
.vk-mitglieder .vk-verzeichnis-filter { position: static; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: .8rem; }
.vk-mitglieder-feld { display: flex; flex-direction: column; gap: .3rem; flex: 2 1 240px; min-width: 0; }
.vk-mitglieder-feld--land { flex: 1 1 180px; }
.vk-mitglieder-feld select { font: inherit; padding: .65rem .8rem; border: 1.5px solid var(--vk-linie-2); border-radius: 10px; background: var(--vk-papier); color: var(--vk-tinte); }
.vk-main .prose .vk-mitglieder-liste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--vk-linie); border-radius: 14px; background: var(--vk-blatt); overflow: hidden; }
.vk-main .prose .vk-mitglied { margin: 0; padding: .85rem 1.1rem; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .9fr); gap: .4rem 1.2rem; align-items: start; border-top: 1px solid var(--vk-linie); }
.vk-main .prose .vk-mitglied:first-child { border-top: 0; }
.vk-mitglied-name { display: flex; flex-direction: column; gap: .1rem; }
.vk-main .prose .vk-mitglied-name a { color: var(--vk-tinte); }
.vk-mitglied-anschrift { font-style: normal; font-size: .93rem; line-height: 1.45; }
.vk-mitglied-wege { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; font-size: .9rem; overflow-wrap: anywhere; }
.vk-main .prose .vk-mitglied-quelle { font-family: var(--vk-mono); font-size: .72rem; color: var(--vk-tinte-3); }
.vk-main .prose .vk-mitglied--ziel { background: var(--vk-blau-tint); }
.vk-mitglieder-mehr { text-align: center; margin: .9rem 0 0; }
@media (max-width: 640px) {
    .vk-main .prose .vk-mitglied { grid-template-columns: minmax(0, 1fr); }
    .vk-mitglied-wege { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; }
}

/* Anbieterkarten und Verzeichnis */
.vk-main .prose .vk-anbieterkarten { list-style: none; margin: 1rem 0 1.6rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem; }
.vk-main .prose .vk-anbieterkarte { margin: 0; padding: .75rem .9rem; background: var(--vk-blatt); border: 1px solid var(--vk-linie); border-radius: 10px; display: flex; flex-direction: column; gap: .2rem; }
.vk-anbieterkarte-name { font-weight: 700; }
.vk-main .prose .vk-anbieterkarte-name a { text-decoration: none; color: var(--vk-tinte); }
.vk-main .prose .vk-anbieterkarte-name a:hover { color: var(--vk-blau); text-decoration: underline; }
.vk-anbieterkarte-kat { font-size: .8rem; color: var(--vk-tinte-2); }
.vk-anbieterkarte-wege { display: flex; gap: .3rem; flex-wrap: wrap; }
.vk-marke { align-self: flex-start; font-family: var(--vk-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--vk-tinte-2); border: 1px solid var(--vk-linie-2); border-radius: 4px; padding: .05rem .35rem; }
.vk-marke--gruen { color: var(--vk-gruen); border-color: color-mix(in srgb, var(--vk-gruen) 45%, transparent); }
.vk-verzeichnis-filter { position: static; display: flex; flex-direction: column; gap: .6rem; padding: 1rem; background: var(--vk-blatt); border: 1px solid var(--vk-linie); border-radius: 14px; box-shadow: var(--vk-schatten); margin: 1rem 0 1.2rem; }
.vk-verzeichnis-filter label { font-weight: 700; }
.vk-verzeichnis-filter input { font: inherit; font-size: 1.05rem; padding: .65rem .85rem; border: 1.5px solid var(--vk-linie-2); border-radius: 10px; background: var(--vk-papier); color: var(--vk-tinte); }
.vk-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.vk-chip { font: inherit; font-size: .85rem; font-weight: 600; padding: .32rem .75rem; border-radius: 999px; border: 1.5px solid var(--vk-linie-2); background: var(--vk-blatt); color: var(--vk-tinte); cursor: pointer; }
.vk-chip span { font-family: var(--vk-mono); font-size: .76rem; color: var(--vk-tinte-3); }
.vk-chip.aktiv, .vk-chip:hover { border-color: var(--vk-blau); background: var(--vk-blau-tint); color: var(--vk-blau); }
.vk-abc { display: flex; flex-wrap: wrap; gap: .2rem; margin: 0 0 1rem; font-family: var(--vk-mono); }
.vk-abc a, .vk-abc span { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 6px; font-size: .85rem; }
.vk-main .prose .vk-abc a { background: var(--vk-blatt); border: 1px solid var(--vk-linie); text-decoration: none; color: var(--vk-blau); }
.vk-abc span { color: var(--vk-linie-2); }
.vk-main .prose .vk-az-gruppe h3 { font-family: var(--vk-mono); font-size: 1rem; color: var(--vk-signal); margin: 1.6rem 0 .4rem; padding-bottom: .3rem; border-bottom: 1px solid var(--vk-linie); }

/* ==========================================================================
   WERKZEUGE: Generator und Rechner
   ========================================================================== */
section.vk-werkzeug { margin: 2rem 0 2.4rem; background: var(--vk-blatt); border: 1px solid var(--vk-linie-2); border-radius: var(--vk-radius); box-shadow: var(--vk-schatten); overflow: hidden; display: block; padding: 0; }
.vk-werkzeug-kopf { padding: 1.2rem 1.4rem 1rem; border-bottom: 1px solid var(--vk-linie); }
.vk-main .prose .vk-werkzeug-kopf h2 { margin: 0 0 .35rem; font-size: 1.45rem; }
.vk-main .prose .vk-werkzeug-kopf p:not(.vk-rubrik) { margin: 0; color: var(--vk-tinte-2); font-size: .95rem; }
.vk-main .prose .vk-werkzeug-fuss { margin: 0; padding: .8rem 1.4rem 1rem; font-size: .8rem; color: var(--vk-tinte-2); border-top: 1px solid var(--vk-linie); background: var(--vk-blatt-2); }

.vk-feld { display: flex; flex-direction: column; gap: .3rem; margin: 0 0 .85rem; }
.vk-feld label { font-weight: 700; font-size: .92rem; }
.vk-feld input, .vk-feld select, .vk-feld textarea { font: inherit; font-size: 1rem; padding: .6rem .75rem; border: 1.5px solid var(--vk-linie-2); border-radius: 9px; background: var(--vk-papier); color: var(--vk-tinte); width: 100%; }
.vk-feld textarea { resize: vertical; line-height: 1.45; }
.vk-feld input:focus, .vk-feld select:focus, .vk-feld textarea:focus { outline: none; border-color: var(--vk-blau); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vk-blau) 22%, transparent); }
.vk-feld-hinweis { font-size: .8rem; color: var(--vk-tinte-2); line-height: 1.4; }
.vk-haken { display: flex; gap: .55rem; align-items: flex-start; font-size: .94rem; margin: 0 0 .5rem; cursor: pointer; }
.vk-haken input { width: 1.1rem; height: 1.1rem; margin-top: .2rem; accent-color: var(--vk-blau); }
.vk-feld-gruppe { margin: 0 0 .85rem; }
.vk-feld-titel { display: block; font-weight: 700; font-size: .92rem; margin: 0 0 .45rem; }

.vk-generator-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 0; }
.vk-generator-form { padding: 1.1rem 1.4rem 1.2rem; border-right: 1px solid var(--vk-linie); }
.vk-generator-form fieldset { border: 0; margin: 0 0 1rem; padding: 0 0 .4rem; border-bottom: 1px dashed var(--vk-linie); }
.vk-generator-form fieldset:last-child { border-bottom: 0; margin-bottom: 0; }
.vk-generator-form legend { font-family: var(--vk-serif); font-weight: 650; font-size: 1.05rem; margin: 0 0 .7rem; padding: 0; color: var(--vk-tinte); }
.vk-js [data-nur] { display: none; }
.vk-js [data-nur].an { display: block; }
.vk-brief-rahmen { padding: 1.1rem 1.4rem 1.3rem; background: var(--vk-blatt-2); display: flex; flex-direction: column; gap: .8rem; }
@media (min-width: 981px) { .vk-brief-rahmen { position: sticky; top: 80px; align-self: start; } }
.vk-main .prose .vk-brief-label { margin: 0; font-family: var(--vk-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--vk-tinte-3); }
.vk-brief { background: #FFFFFF; color: #1B2537; border: 1px solid #E3DED2; border-radius: 4px; box-shadow: var(--vk-schatten); padding: 1.6rem 1.6rem 1.8rem; font-family: var(--vk-sans); font-size: .9rem; line-height: 1.55; min-height: 420px; }
.vk-main .prose .vk-brief p { margin: 0 0 .8rem; color: #1B2537; }
.vk-main .prose .vk-brief-ruecksende { font-size: .66rem; color: #6B7385; border-bottom: 1px solid #D2CBBB; padding-bottom: .15rem; display: inline-block; margin-bottom: .4rem; }
.vk-main .prose .vk-brief-empfaenger { margin-bottom: 1.4rem; }
.vk-main .prose .vk-brief-datum { text-align: right; }
.vk-main .prose .vk-brief-betreff { margin: 1rem 0 1rem; }
.vk-main .prose .vk-brief-unterschrift { margin-top: 2.2rem; }
.vk-brief .platzhalter { background: #FBEADF; color: #9A3412; border-radius: 3px; padding: 0 .2em; }
.vk-brief-aktionen { display: flex; flex-wrap: wrap; gap: .5rem; }
.vk-main .prose .vk-brief-hinweis { margin: 0; font-size: .82rem; color: var(--vk-tinte-2); }
@media (max-width: 980px) { .vk-generator-raster { grid-template-columns: minmax(0, 1fr); } .vk-generator-form { border-right: 0; border-bottom: 1px solid var(--vk-linie); } }

.vk-rechner-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.2rem; padding: 1.2rem 1.4rem .4rem; }
@media (max-width: 640px) { .vk-rechner-form { grid-template-columns: minmax(0, 1fr); } }
.vk-rechner-ergebnis { margin: 0 1.4rem 1.2rem; padding: 1.1rem 1.25rem; border-radius: 12px; background: var(--vk-nacht); color: #EDE9DF; }
.vk-main .prose .vk-ergebnis-liste { margin: 0; display: grid; gap: .1rem; }
.vk-ergebnis-liste > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; padding: .55rem 0; border-bottom: 1px solid rgba(237, 233, 223, .14); align-items: baseline; }
.vk-ergebnis-liste > div:last-child { border-bottom: 0; }
.vk-main .prose .vk-ergebnis-liste dt { font-size: .92rem; color: rgba(237, 233, 223, .85); font-weight: 500; }
.vk-main .prose .vk-ergebnis-liste dd { margin: 0; font-family: var(--vk-mono); font-weight: 600; font-size: 1rem; color: #fff; text-align: right; }
.vk-ergebnis-liste .wichtig dt { color: #F7A877; font-weight: 700; }
.vk-ergebnis-liste .wichtig dd { color: #F7A877; font-size: 1.15rem; }
.vk-main .prose .vk-ergebnis-hinweis { margin: .7rem 0 0; font-size: .88rem; color: #F7D9C4; }
.vk-main .prose .vk-ergebnis-aktion { margin: .8rem 0 0; }
.vk-rechner-ergebnis .vk-btn--leise { color: #EDE9DF; border-color: rgba(237, 233, 223, .35); }
.vk-rechner-ergebnis .vk-btn--leise:hover { background: rgba(255, 255, 255, .08); color: #fff; border-color: #fff; }
.vk-rechner-form > [hidden] { display: none; }
.vk-feld-paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 0 .8rem; }
.vk-feld--breit, .vk-rechner-form > .vk-feld--breit { grid-column: 1 / -1; }
.vk-feld-label { font-weight: 700; font-size: .92rem; }
.vk-verzug { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem .8rem; }
@media (max-width: 640px) { .vk-verzug { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vk-verzug-zeile { display: flex; flex-direction: column; gap: .2rem; }
.vk-verzug-nr { font-size: .8rem; color: var(--vk-tinte-2); font-family: var(--vk-mono); }
.vk-verzug-zeile input, .vk-abo-zeile input, .vk-abo-zeile select { font: inherit; font-size: .95rem; padding: .5rem .6rem; border: 1.5px solid var(--vk-linie-2); border-radius: 9px; background: var(--vk-papier); color: var(--vk-tinte); width: 100%; min-width: 0; }
.vk-abo-liste { display: grid; gap: .5rem; margin: .3rem 0 .4rem; }
.vk-abo-zeile { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.4fr) auto; gap: .45rem; align-items: center; }
@media (max-width: 720px) { .vk-abo-zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .vk-abo-zeile input[name="abo-name"] { grid-column: 1 / -1; } }
.vk-main .prose .vk-rechner-noscript { margin: 0 1.4rem 1rem; }

/* Zeitstrahl */
.vk-zeitstrahl { margin: 1.8rem 0; padding: 1.2rem 1.3rem 1rem; background: var(--vk-blatt); border: 1px solid var(--vk-linie); border-radius: var(--vk-radius-klein); }
.vk-zeitstrahl-bahn { position: relative; height: 14px; margin: .6rem .5rem 1.1rem; }
.vk-zeitstrahl-laufzeit { position: absolute; inset: 4px 0; border-radius: 4px; background: var(--vk-blau-tint); }
.vk-zeitstrahl-frist { position: absolute; top: 4px; bottom: 4px; border-radius: 0 4px 4px 0; background: repeating-linear-gradient(135deg, var(--vk-signal) 0 4px, color-mix(in srgb, var(--vk-signal) 55%, transparent) 4px 8px); }
.vk-zeitstrahl-punkt { position: absolute; top: 0; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--vk-blau); border: 3px solid var(--vk-blatt); box-shadow: 0 0 0 1px var(--vk-blau); }
.vk-zeitstrahl-punkt--signal { background: var(--vk-signal); box-shadow: 0 0 0 1px var(--vk-signal); }
.vk-main .prose .vk-zeitstrahl-daten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.vk-main .prose .vk-zeitstrahl-daten li { margin: 0; display: flex; flex-direction: column; font-size: .84rem; color: var(--vk-tinte-2); }
.vk-zeitstrahl-daten time { font-family: var(--vk-mono); font-weight: 600; color: var(--vk-tinte); font-size: .9rem; }
.vk-zeitstrahl-wichtig time { color: var(--vk-signal); }
.vk-zeitstrahl figcaption, .vk-main .prose .vk-zeitstrahl figcaption { margin-top: .8rem; font-size: .8rem; color: var(--vk-tinte-3); }
@media (max-width: 560px) { .vk-main .prose .vk-zeitstrahl-daten { grid-template-columns: minmax(0, 1fr); } }

/* Checklisten */
.vk-checkliste { margin: 2rem 0; padding: 1.2rem 1.35rem 1rem; background: var(--vk-blatt); border: 1px solid var(--vk-linie-2); border-radius: var(--vk-radius); }
.vk-main .prose .vk-checkliste-titel { font-family: var(--vk-serif); font-weight: 650; font-size: 1.25rem; margin: 0 0 .6rem; }
.vk-main .prose .vk-checkliste ol { list-style: none; margin: 0 0 1rem; padding: 0; counter-reset: cl; }
.vk-main .prose .vk-checkliste li { counter-increment: cl; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start; padding: .6rem 0; margin: 0; border-bottom: 1px dashed var(--vk-linie); }
.vk-checkliste input[type=checkbox] { width: 1.2rem; height: 1.2rem; margin: .22rem 0 0; accent-color: var(--vk-gruen); cursor: pointer; }
.vk-checkliste label { cursor: pointer; }
.vk-checkliste li:has(input:checked) label { color: var(--vk-tinte-3); text-decoration: line-through; text-decoration-color: var(--vk-gruen); }
.vk-main .prose .vk-checkliste-fuss { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* Begriffe (Lexikon) */
abbr.vk-begriff { text-decoration: underline dotted var(--vk-signal); text-underline-offset: 3px; cursor: help; }
.vk-begriff-fenster { position: absolute; z-index: 1500; max-width: 340px; padding: .8rem .95rem; background: var(--vk-blatt); color: var(--vk-tinte); border: 1px solid var(--vk-linie-2); border-radius: 10px; box-shadow: var(--vk-schatten-gross); font-size: .9rem; line-height: 1.5; }
.vk-begriff-fenster strong { display: block; font-family: var(--vk-serif); margin-bottom: .2rem; }
.vk-begriff-fenster a { display: inline-block; margin-top: .4rem; font-size: .84rem; font-weight: 700; }
.vk-glossar-abc { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 1.5rem; }
.vk-main .prose .vk-glossar-abc a { font-family: var(--vk-mono); text-decoration: none; padding: .2rem .55rem; border: 1px solid var(--vk-linie); border-radius: 6px; background: var(--vk-blatt); }
.vk-main .prose .vk-glossar > div { padding: .75rem 0; border-bottom: 1px solid var(--vk-linie); }
.vk-main .prose .vk-glossar dt { font-family: var(--vk-serif); font-weight: 650; font-size: 1.08rem; }
.vk-main .prose .vk-glossar dd { margin: .2rem 0 0; color: var(--vk-tinte-2); }

/* ==========================================================================
   FUSSBEREICH (Markup des Kerns)
   ========================================================================== */
.footer { background: var(--vk-nacht); color: rgba(237, 233, 223, .86); padding: 3.5rem 1.5rem 1.75rem; border-top: 0; font-family: var(--vk-sans); position: relative; }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--vk-signal) 0 18%, #3D5AB8 18% 100%); }
.footer-inner { max-width: var(--vk-breite); }
.footer-top { border-bottom: 1px solid rgba(237, 233, 223, .12); gap: 2.5rem; }
.footer .logo, .footer .logo-mark { color: #EDE9DF; }
.footer-brand { max-width: 320px; }
.footer-brand p { color: rgba(237, 233, 223, .72); font-size: .9rem; }
.footer-links-group { gap: 2rem; }
.footer-col { min-width: 150px; }
.footer-col h2 { font-family: var(--vk-mono); color: #F7A877; font-size: .7rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.footer-col a { color: rgba(237, 233, 223, .84); font-size: .9rem; padding: .22rem 0; }
.footer-col a:hover { color: #fff; }
.footer-copy, .footer-legal a { color: rgba(237, 233, 223, .62); }
.footer-copy a { color: rgba(237, 233, 223, .84); }
.footer-legal { align-items: center; }
.footer-consent { background: none; border: 0; padding: 0; font: inherit; font-size: .78rem; color: rgba(237, 233, 223, .62); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.footer-consent:hover { color: #fff; }

/* ==========================================================================
   SONSTIGES
   ========================================================================== */
.vk-drucken-zeile { margin: 1rem 0; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ==========================================================================
   DRUCK – Seiten schlicht; ein Brief aus dem Generator nach DIN 5008 Form B
   ========================================================================== */
@media print {
    .header, .footer, .vk-seitenspalte, .vk-passt, .vk-kopfsuche, .vk-suchebene, .vk-brotkrumen, .vk-titelbild-rahmen, .faq-block, .vk-autorbox, .vk-rechtshinweis, ins.adsbygoogle, .google-auto-placed, .vk-brief-aktionen, .vk-drucken-zeile, .vk-checkliste-fuss button { display: none !important; }
    body { background: #fff; color: #000; font-size: 11pt; }
    .vk-raster, .vk-raster--toc { display: block; padding: 0; }
    .vk-text a { color: #000; }
    .vk-steckbrief, section.vk-werkzeug, .vk-checkliste { box-shadow: none; break-inside: avoid; }

    /* Nur der Brief: <html class="vk-druck-brief"> setzt das Skript vor dem Drucken */
    html.vk-druck-brief body > *:not(main) { display: none !important; }
    html.vk-druck-brief main * { visibility: hidden; }
    html.vk-druck-brief .vk-brief, html.vk-druck-brief .vk-brief * { visibility: visible; }
    html.vk-druck-brief .vk-brief { position: fixed; left: 0; top: 0; width: 210mm; min-height: 297mm; margin: 0; padding: 0; border: 0; box-shadow: none; border-radius: 0; font-size: 11pt; line-height: 1.45; }
    html.vk-druck-brief .vk-brief p { margin: 0 0 9pt; }
    html.vk-druck-brief .vk-brief-ruecksende { position: absolute; left: 25mm; top: 45mm; width: 80mm; font-size: 7pt; margin: 0; padding: 0 0 1pt; }
    html.vk-druck-brief .vk-brief-empfaenger { position: absolute; left: 25mm; top: 62.7mm; width: 80mm; height: 27.3mm; margin: 0; overflow: hidden; }
    html.vk-druck-brief .vk-brief-datum { position: absolute; right: 20mm; top: 97mm; margin: 0; }
    html.vk-druck-brief .vk-brief-inhalt { position: absolute; left: 25mm; right: 20mm; top: 103.4mm; }
    html.vk-druck-brief .vk-brief::before { content: ""; position: absolute; left: 3mm; top: 105mm; width: 5mm; border-top: .3pt solid #999; }
    html.vk-druck-brief .vk-brief::after { content: ""; position: absolute; left: 3mm; top: 148.5mm; width: 7mm; border-top: .3pt solid #999; }
    /* Langer Brief: vor dem Drucken eingepasst (Skript misst den Text), damit er auf eine A4-Seite passt */
    html.vk-druck-brief.vk-druck-eng .vk-brief { font-size: 10pt; line-height: 1.38; }
    html.vk-druck-brief.vk-druck-eng .vk-brief p { margin: 0 0 6pt; }
    html.vk-druck-brief.vk-druck-enger .vk-brief { font-size: 9.5pt; line-height: 1.32; }
    html.vk-druck-brief.vk-druck-enger .vk-brief p { margin: 0 0 4pt; }
    /* Platz für die handschriftliche Unterschrift – auch im eingepassten Brief */
    html.vk-druck-brief .vk-brief .vk-brief-unterschrift { margin-top: 10mm; }
    html.vk-druck-brief.vk-druck-eng .vk-brief .vk-brief-unterschrift { margin-top: 9mm; }
    html.vk-druck-brief.vk-druck-enger .vk-brief .vk-brief-unterschrift { margin-top: 8mm; }
    @page { size: A4; margin: 0; }
}