/* =============================================================================
   kitashield.css — Projekt-Styles KitaShield (lädt nach main.css)
   Entwurfsstand 21.10.2026: Header, Footer, Musterseiten (Start, DSB, KI).
   Prinzip: Live-Wiedererkennung (Logo-Farben, gelbe Claim-Leiste, Robo,
   Bereichsfarben, runde Kästen), aber ruhiger: eine laute Farbe pro Element,
   viel Weißraum, klare Hierarchie.
   Stand 04.11.2026 bewusst ohne Baukasten-Muster: keine Kleinüberschriften über Titeln,
   keine Großbuchstaben-Label, keine Icons in Pastell-Quadraten, keine farbigen
   Kartenränder, keine Schatten-Karten mit Hover-Sprung, Überschriften linksbündig.
   Charakter kommt aus Farbflächen in den Bereichsfarben, freien Icons in den
   Logofarben, Logo-Kreisen und Robo, der auf den Kanten von Kästen sitzt.
   ============================================================================= */

/* ── 1. Basis ─────────────────────────────────────────────────────────────── */

body {
    font-size: 1.0625rem;           /* 17px */
    color: var(--color-text);
    line-height: var(--line-height-body);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-weight: 800; }
h2 { font-weight: 800; }
h3 { font-weight: 700; }

a { color: var(--color-primary); }

::selection { background: var(--ks-yellow); color: var(--ks-ink); }

/* Bereichsfarben (Live etabliert: Datenschutz grün, KI gelb, DSB blau) */
.ks-area--blue   { --ks-area: var(--ks-blue);   --ks-area-dark: var(--ks-blue-dark);   --ks-area-soft: var(--ks-blue-soft); }
.ks-area--green  { --ks-area: var(--ks-green);  --ks-area-dark: var(--ks-green-dark);  --ks-area-soft: var(--ks-green-soft); }
.ks-area--yellow { --ks-area: var(--ks-yellow); --ks-area-dark: var(--ks-yellow-dark); --ks-area-soft: var(--ks-yellow-soft); }
.ks-area--red    { --ks-area: var(--ks-red);    --ks-area-dark: var(--ks-cta);         --ks-area-soft: var(--ks-red-soft); }

/* ── 2. Buttons (Pill wie Live; Rot = Hauptaktion) ──────────────────────── */

.btn, .btn-primary, .btn-secondary, .btn-ghost, .ks-btn-yellow, .ks-btn-light {
    border-radius: var(--radius-full);
    font-size: 0.9375rem;
    font-weight: 700;
    padding: 13px 24px;
    gap: 10px;
}

.btn-primary {
    background: var(--ks-cta);
    border-color: var(--ks-cta);
    color: #fff;
    box-shadow: none;
}
.btn-primary:hover,
.nav-links .btn-primary:hover {
    background: var(--ks-cta-hover);
    border-color: var(--ks-cta-hover);
    color: #fff;
    box-shadow: none;
}

.btn-secondary {
    background: #fff;
    color: var(--color-primary);
    border-color: rgba(var(--color-primary-rgb), 0.35);
}
.btn-secondary:hover {
    background: var(--ks-blue-soft);
    color: var(--color-primary-hover);
    border-color: var(--color-primary);
    box-shadow: none;
}

.ks-btn-yellow {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ks-yellow); color: var(--ks-ink);
    border: 1.5px solid var(--ks-yellow);
    line-height: 1; cursor: pointer; text-decoration: none;
    transition: background var(--transition), border-color var(--transition);
}
.ks-btn-yellow:hover { background: #FFD233; border-color: #FFD233; color: var(--ks-ink); }

.ks-btn-light {
    display: inline-flex; align-items: center;
    background: #fff; color: var(--color-primary);
    border: 1.5px solid #fff; line-height: 1; text-decoration: none;
}
.ks-btn-light:hover { background: var(--ks-blue-soft); color: var(--color-primary-hover); }

.ks-btn-lg { padding: 16px 30px; font-size: 1rem; }

.ks-link-arrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 700; text-decoration: none; color: var(--ks-area-dark, var(--color-primary));
}
.ks-link-arrow::after { content: '\2192'; transition: transform var(--transition); }
.ks-link-arrow:hover::after { transform: translateX(4px); }

/* ── 4. Claim-Leiste (gelb, mit Robo) ────────────────────────────────────── */

.ks-claimbar {
    background: var(--ks-yellow);
    position: relative;
    overflow: hidden;
}
.ks-claimbar__inner {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    min-height: 44px; position: relative;
    padding-right: calc(var(--gutter) + 100px);
}
.ks-claimbar__claim {
    margin: 0; font-size: 0.9375rem; font-weight: 800; color: var(--ks-ink); letter-spacing: -0.005em;
}
.ks-claimbar__contact { display: flex; align-items: center; gap: 22px; }
.ks-claimbar__link {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.875rem; font-weight: 600; color: var(--ks-ink); text-decoration: none;
}
.ks-claimbar__link i { font-size: 0.8125rem; }
.ks-claimbar__link:hover span { text-decoration: underline; text-underline-offset: 3px; }
.ks-claimbar__robo {
    position: absolute; right: var(--gutter); bottom: -14px;
    height: 56px; width: auto; pointer-events: none;
}

/* ── 5. Navigation ───────────────────────────────────────────────────────── */

.header-nav-wrap { border-bottom: 1px solid var(--color-border); }
.header-nav { padding: 14px 0; }
.header-nav-wrap.scrolled .header-nav { padding: 8px 0; }

/* Wappen + zweifarbige Wortmarke; Menü rückt nach rechts, damit zwischen Marke und Navigation Luft bleibt */
.ks-logo { gap: 12px; margin-right: 24px; }
.ks-logo .site-logo-img { height: 62px; }
.header-nav-wrap.scrolled .ks-logo .site-logo-img { height: 46px; }
.ks-logo__text { display: flex; flex-direction: column; line-height: 1; }
.ks-logo__name { font-size: 1.625rem; font-weight: 800; color: var(--ks-ink); letter-spacing: -0.02em; }
.ks-logo__accent { color: inherit; }   /* einfarbig (Variante B); zweifarbig wäre var(--ks-blue-dark) */
.header-nav-wrap.scrolled .ks-logo__name { font-size: 1.375rem; }

.nav-collapse { gap: 0; margin-left: auto; }
.nav-links { gap: 0; }
.nav-links > li { flex-shrink: 0; }
.nav-links a {
    font-size: 0.9375rem; font-weight: 600; color: var(--ks-ink);
    padding: 9px 10px; border-radius: var(--radius-full); white-space: nowrap;
}
.nav-links a:hover,
.nav-links .current-menu-item > a,
.nav-links .current-menu-ancestor > a {
    color: var(--color-primary); background: var(--ks-blue-soft);
}
.nav-links .sub-menu { border-radius: var(--radius-md); padding: 8px; border-color: var(--color-border); box-shadow: var(--shadow-lg); }
.nav-links .sub-menu a { border-radius: var(--radius-sm); font-size: 0.9375rem; }
/* Dropdown bündig an der linken Kante des Menüpunkts statt zentriert */
@media (min-width: 1200px) {
    .nav-links .sub-menu { left: 0; min-width: 220px; transform: translate(0, 10px); }
    .nav-links li:hover > .sub-menu, .nav-links li:focus-within > .sub-menu { transform: translate(0, 4px); }
}
.nav-cta { padding: 12px 20px; font-size: 0.9375rem; margin-left: 8px; }

/* Burger-Menü schon bis 1199px (Navigation + Wortmarke + CTA brauchen ~1100px).
   Das Akkordeon-Skript in main.js ist breakpoint-unabhängig. */
@media (min-width: 1024px) and (max-width: 1199px) {
    .nav-toggle { display: flex; }
    .nav-collapse {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; background: #fff;
        border-top: 2px solid var(--color-primary); padding: 12px 16px; gap: 2px;
        box-shadow: var(--shadow-lg); z-index: 300;
    }
    .nav-collapse.open { display: flex; }
    .nav-links { flex-direction: column; align-items: stretch; gap: 2px; }
    .nav-links a { padding: 10px 12px; }
    .nav-links .menu-item-has-children { position: relative; }
    .nav-links .sub-menu {
        position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none;
        border: 0; min-width: 0; padding: 0 0 0 18px; background: transparent;
    }
    .nav-links .sub-menu::before { display: none; }
    .nav-links > li.menu-item-has-children > a::after { content: none; }
    .nav-links li.menu-item-has-children:not(.kmp-offen) > .sub-menu { display: none !important; }
    .nav-links li.kmp-offen > .sub-menu { display: block !important; }
    .kmp-subnav-toggle {
        display: flex; align-items: center; justify-content: center; position: absolute; right: 0; top: 4px;
        width: 44px; height: 44px; background: none; border: 0; color: var(--color-text-faded); cursor: pointer;
    }
    .kmp-subnav-toggle i { transition: transform 0.2s; }
    li.kmp-offen > .kmp-subnav-toggle i { transform: rotate(180deg); }
    .nav-cta { width: 100%; justify-content: center; margin: 6px 0 0; }
}

/* ── 6. Globaler CTA (vor dem Footer) ────────────────────────────────────── */

.ks-cta { padding: 0 0 var(--section-y); background: transparent; }
/* Endet die Seite mit einem farbigen Abschnitt, braucht der Kasten Abstand, sonst dockt er direkt an */
.site-main:has(> :last-child:is(.ks-section--alt, .ks-section--area, .section-alt, .section-articles)) + .ks-cta { padding-top: var(--section-y-sm); }
.ks-cta__panel {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: 1.5fr 1fr; align-items: end; gap: 48px;
    background: var(--ks-blue-dark);
    border-radius: var(--radius-xl);
    padding: 56px 64px 0;
    color: #fff;
}
.ks-cta__panel::after {               /* gelber Kreis wie im Logo, rein dekorativ */
    content: ''; position: absolute; width: 300px; height: 300px; border-radius: 50%;
    background: var(--ks-yellow); right: -70px; top: -110px; z-index: 0;
}
.ks-cta__text { position: relative; z-index: 1; padding-bottom: 52px; align-self: center; }
.ks-cta__title { color: #fff; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; margin: 0 0 16px; }
.ks-cta__desc { color: rgba(255,255,255,0.9); font-size: 1.0625rem; max-width: 560px; margin: 0 0 30px; }
.ks-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.ks-cta__tel { color: #fff; font-weight: 700; text-decoration: none; display: inline-flex; gap: 10px; align-items: center; }
.ks-cta__tel:hover, .ks-cta__tel:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.ks-cta__person { position: relative; z-index: 1; margin: 0 8px 0 0; justify-self: end; align-self: end; line-height: 0; }
.ks-cta__foto { display: block; width: auto; height: 420px; max-width: 100%; object-fit: contain; object-position: bottom; }
.ks-cta__wer { margin: 22px 0 0; font-size: 0.875rem; line-height: 1.4; color: rgba(255,255,255,0.88); }
.ks-cta__wer strong { display: block; color: #fff; font-size: 0.9375rem; }

/* ── 7. Footer ───────────────────────────────────────────────────────────── */

.ks-footer {
    background: var(--ks-blue-dark); color: rgba(255,255,255,0.92);
    border-top: 8px solid; border-image: linear-gradient(90deg, var(--ks-blue) 0 25%, var(--ks-green) 25% 50%, var(--ks-yellow) 50% 75%, var(--ks-red) 75% 100%) 1;
}
.ks-footer a { color: #fff; text-decoration: none; }
.ks-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ks-footer__main { padding: 72px 0 40px; }
.ks-footer__grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 48px; }
.ks-footer__logo { display: inline-flex; align-items: center; gap: 12px; }
.ks-footer__logo img { height: 58px; width: auto; }
.ks-footer__name { font-size: 1.375rem; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.ks-footer__tagline { font-size: 0.9375rem; line-height: 1.65; margin: 18px 0 22px; max-width: 320px; color: rgba(255,255,255,0.88); }
.ks-footer__badges { display: flex; align-items: center; gap: 16px; }
.ks-footer__social {
    width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.14);
}
.ks-footer__social:hover { background: rgba(255,255,255,0.24); }
.ks-footer__gdd img { width: 56px; height: 56px; display: block; }
.ks-footer__title {
    display: block; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ks-yellow); margin-bottom: 16px;
}
.ks-footer__links, .ks-footer__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ks-footer__links a, .ks-footer__contact a, .ks-footer__contact span { font-size: 0.9375rem; font-weight: 500; }
.ks-footer__contact li { display: flex; gap: 12px; align-items: flex-start; }
.ks-footer__contact i { margin-top: 5px; font-size: 0.8125rem; color: var(--ks-yellow); width: 14px; }

.ks-footer__newsletter {
    margin-top: 56px; padding: 24px 28px; border-radius: var(--radius-lg);
    background: rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.ks-footer__newsletter { position: relative; }
.ks-footer__robo { position: absolute; right: 36px; top: -67px; width: 96px; height: auto; pointer-events: none; }
.ks-footer__newsletter-text strong { display: block; color: #fff; font-size: 1.0625rem; }
.ks-footer__newsletter-text span { font-size: 0.9375rem; color: rgba(255,255,255,0.85); }
.ks-footer__newsletter-form { display: block; flex: 1 1 420px; max-width: 540px; }
.ks-footer__newsletter-form input[type="email"] {
    flex: 1; min-width: 0; border: 0; border-radius: var(--radius-full); padding: 13px 20px;
    font: inherit; font-size: 0.9375rem; color: var(--ks-ink);
}
.ks-footer__newsletter-form .ks-btn-yellow { padding: 13px 22px; }

.ks-footer__bottom { background: var(--ks-blue-deep); padding: 18px 0; }
.ks-footer__bottom-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.ks-footer__bottom p { margin: 0; font-size: 0.8125rem; color: rgba(255,255,255,0.8); max-width: 760px; }
.ks-footer__bottom nav { display: flex; gap: 20px; }
.ks-footer__bottom nav a { font-size: 0.875rem; font-weight: 600; }

/* ── 8. Seitenbausteine (Musterseiten) ───────────────────────────────────── */

.ks-section { padding: var(--section-y) 0; }
.ks-section--tight { padding: var(--section-y-sm) 0; }
.ks-section--alt { background: var(--color-background-alt); position: relative; overflow: clip; }
.ks-section--alt::after {
    content: ''; position: absolute; width: 190px; height: 190px; border-radius: 50%;
    background: var(--ks-area, var(--ks-yellow)); right: -80px; bottom: -80px; pointer-events: none;
}
.ks-section--alt > .container { position: relative; z-index: 1; }
.ks-section--area { background: var(--ks-area-soft); }
.ks-hero + .ks-section--alt { margin-top: 40px; }

.ks-head { max-width: 760px; margin-bottom: 44px; }
.ks-head h2 { font-size: clamp(1.75rem, 3vw, 2.375rem); line-height: 1.18; margin: 0 0 14px; }
.ks-head p { font-size: 1.125rem; color: var(--color-text-faded); margin: 0; }

.ks-lead { font-size: 1.1875rem; line-height: 1.65; color: var(--color-text); }

/* Hero (heller, runder Kasten wie Live, aber ruhig) */
.ks-hero { padding: 28px 0 0; }
.ks-hero__panel {
    position: relative; overflow: hidden;
    background: var(--ks-area-soft);
    border-radius: var(--radius-xl);
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center;
    padding: 64px 0 64px 64px;
}
.ks-hero__content { position: relative; z-index: 1; }
.ks-hero h1 {
    font-size: clamp(2rem, 3.8vw, 3rem); line-height: 1.1; letter-spacing: -0.025em;
    margin: 0 0 22px; color: var(--ks-ink);
}
.ks-hero__sub { font-size: 1.1875rem; line-height: 1.65; color: var(--color-text); margin: 0 0 32px; max-width: 560px; }
.ks-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.ks-hero__note { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 0.9375rem; color: var(--color-text-faded); }
.ks-hero__note span { display: inline-flex; gap: 8px; align-items: center; }
.ks-hero__note i { color: var(--ks-green-dark); }
.ks-hero__visual { position: relative; align-self: stretch; min-height: 440px; }
.ks-hero__visual::before {
    content: ''; position: absolute; width: 104px; height: 104px; border-radius: 50%;
    background: var(--ks-green); right: -24px; top: -24px;
}
.ks-hero.ks-area--green .ks-hero__visual::before { background: var(--ks-blue); }
.ks-hero__visual--robo::before, .ks-hero__visual--card::before { display: none; }
.ks-hero__visual > img {
    position: absolute; inset: 0 0 0 0; width: 100%; height: 100%; object-fit: cover;
    object-position: var(--ks-hero-focus, 50% 50%);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
.ks-hero__dot {                        /* Logo-Kreise als ruhige Deko */
    position: absolute; border-radius: 50%; z-index: 0; pointer-events: none;
}
.ks-hero__dot--yellow { width: 120px; height: 120px; background: var(--ks-yellow); left: -60px; bottom: -60px; opacity: 0.9; }
.ks-hero__dot--green  { width: 26px; height: 26px; background: var(--ks-green); left: 46%; top: 40px; }
.ks-hero__dot--blue   { width: 120px; height: 120px; background: var(--ks-blue); left: -60px; bottom: -60px; opacity: 0.9; }
.ks-hero .ks-byline { margin-top: 28px; }
.ks-hero__robo { position: absolute; right: 64px; bottom: 0; width: 190px; height: auto; pointer-events: none; }
.ks-hero--compact .ks-hero__panel:has(.ks-hero__robo) .ks-hero__content { max-width: calc(100% - 230px); }

/* Desktop: Bild eingerückt mit Abstand rundum und allen Ecken rund (Variante „eingerückt“, Sebastian 21.10.2026) */
@media (min-width: 1024px) {
    .ks-hero:not(.ks-hero--compact) .ks-hero__panel { padding: 56px; }
    .ks-hero__visual > img { border-radius: var(--radius-lg); }
    .ks-hero__visual--card { padding: 0; }
}

/* Hero mit Robo (Weihnachtsaktion): Robo sitzt auf der Unterkante des Kastens */
.ks-hero__visual.ks-hero__visual--robo { display: flex; align-items: flex-end; justify-content: center; min-height: 0; margin-bottom: -56px; }
.ks-hero__visual--robo > img { position: static; width: 100%; max-width: 400px; height: auto; object-fit: contain; border-radius: 0; }

/* Hero mit Karte statt Foto (Quick-Check: Beispiel-Rückmeldung) */
.ks-hero__visual--card { display: flex; align-items: center; justify-content: center; padding: 0 56px 0 0; }
.ks-qc-preview {
    position: relative; width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 28px 30px;
}
.ks-qc-preview__tag {
    position: absolute; top: -13px; right: 24px; padding: 4px 12px; border-radius: var(--radius-full);
    background: var(--ks-yellow); color: var(--ks-ink); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
}
.ks-qc-preview__head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--color-border); }
.ks-qc-preview__head img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: center 20%; }
.ks-qc-preview__head strong { display: block; color: var(--ks-ink); font-size: 0.9375rem; line-height: 1.3; }
.ks-qc-preview__head span { font-size: 0.8125rem; color: var(--color-text-faded); }
.ks-qc-preview p { font-size: 0.9375rem; line-height: 1.55; margin: 0 0 12px; }
.ks-qc-preview__ok { display: flex; gap: 10px; }
.ks-qc-preview__ok i { color: var(--ks-green-dark); margin-top: 4px; }
.ks-qc-preview__label { font-weight: 700; color: var(--ks-ink); margin-bottom: 8px !important; }
.ks-qc-preview ol { list-style: decimal; margin: 0 0 16px; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; font-size: 0.9375rem; line-height: 1.5; }
.ks-qc-preview ol li::marker { color: var(--ks-cta); font-weight: 800; }
.ks-qc-preview__next { display: flex; gap: 10px; margin: 0 !important; padding: 10px 14px; border-radius: var(--radius-md); background: var(--ks-blue-soft); color: var(--ks-ink); }
.ks-qc-preview__next i { color: var(--ks-blue-dark); margin-top: 4px; }

/* Breadcrumb */
.ks-breadcrumb { font-size: 0.875rem; color: var(--color-text-faded); margin-bottom: 18px; }
.ks-breadcrumb a { color: var(--color-text-faded); text-decoration: none; white-space: nowrap; }
.ks-breadcrumb a:hover { color: var(--color-primary); text-decoration: underline; }
.ks-breadcrumb span[aria-hidden] { margin: 0 6px; }

/* Vertrauensband */
.ks-trust { padding: 40px 0 8px; }
.ks-trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ks-trust__item + .ks-trust__item { border-left: 1px solid var(--color-border); padding-left: 20px; }
.ks-trust__item > .ks-i { display: block; font-size: 1.625rem; margin-bottom: 10px; color: var(--ks-area); }
.ks-trust__item strong { display: block; color: var(--ks-ink); font-size: 1rem; line-height: 1.3; margin-bottom: 4px; }
.ks-trust__item span { display: block; font-size: 0.875rem; color: var(--color-text-faded); line-height: 1.5; }

/* Angebotskarten (Bereichsfarben) */
.ks-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ks-card { display: flex; flex-direction: column; background: var(--ks-area-soft); border-radius: var(--radius-lg); overflow: hidden; }
.ks-card__img { position: relative; aspect-ratio: 16 / 11; overflow: hidden; }
.ks-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ks-card__body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.ks-card__body h3 { font-size: 1.375rem; line-height: 1.25; margin: 0 0 10px; }
.ks-card__body p { font-size: 1rem; color: var(--color-text); margin: 0 0 16px; }
.ks-card__list { list-style: disc; margin: 0 0 20px; padding-left: 1.1em; display: flex; flex-direction: column; gap: 6px; }
.ks-card__list li { font-size: 0.9375rem; }
.ks-card__list li::marker { color: var(--ks-area-dark); }
.ks-card__foot { margin-top: auto; }
/* Ganze Kachel klickbar (Bild + Überschrift): Link in der h3 spannt sich über die Karte */
.ks-card { position: relative; }
.ks-card__link { color: inherit; text-decoration: none; }
.ks-card__link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.ks-card:hover .ks-card__link, .ks-card__link:focus-visible { color: var(--ks-area-dark); text-decoration: underline; text-underline-offset: 4px; }
.ks-card__link:focus-visible { outline: none; }
.ks-card:has(.ks-card__link:focus-visible) { outline: 3px solid var(--ks-blue); outline-offset: 3px; }
.ks-card__foot a { position: relative; z-index: 2; }

/* Methode / Schritte */
.ks-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.ks-split--top { align-items: start; }
.ks-split--prose { grid-template-columns: 1.6fr 1fr; gap: 56px; }
.ks-split__img { position: relative; isolation: isolate; }
.ks-split__img img { width: 100%; height: auto; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: var(--radius-lg); display: block; }
.ks-split__img::before {
    content: ''; position: absolute; width: 120px; height: 120px; border-radius: 50%;
    background: var(--ks-area); right: -24px; top: -24px; z-index: -1;
}
/* Hochkant-Bild, so hoch wie die Textspalte */
.ks-split--portrait { grid-template-columns: 1.15fr 0.85fr; align-items: stretch; }
@media (min-width: 1024px) {
    .ks-split--portrait:has(> .ks-split__img:first-child) { grid-template-columns: 0.85fr 1.15fr; }
}
.ks-split--portrait .ks-split__img { min-height: 560px; }
.ks-split--portrait .ks-split__img img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-position: 60% 50%; }
.ks-split--portrait .ks-split__text { align-self: center; }
.ks-steps .ks-link-arrow { display: flex; width: fit-content; margin-top: 6px; font-size: 0.9375rem; }
.ks-steps { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 20px; counter-reset: ks-step; }
.ks-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; counter-increment: ks-step; }
.ks-steps li::before {
    content: counter(ks-step); width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-weight: 800;
    background: var(--ks-step-bg, var(--ks-blue-dark)); color: var(--ks-step-fg, #fff);
}
.ks-steps li:nth-child(1) { --ks-step-bg: var(--ks-blue-dark); }
.ks-steps li:nth-child(2) { --ks-step-bg: var(--ks-cta); }
.ks-steps li:nth-child(3) { --ks-step-bg: var(--ks-green-dark); }
.ks-steps li:nth-child(4) { --ks-step-bg: var(--ks-yellow); --ks-step-fg: var(--ks-ink); }
.ks-steps strong { display: block; color: var(--ks-ink); font-size: 1.0625rem; margin: 9px 0 4px; }
.ks-steps p { margin: 0; font-size: 0.9875rem; color: var(--color-text); }

/* Über Felix */
.ks-about { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: stretch; }
.ks-about__img { position: relative; min-height: 480px; }
.ks-about__img img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%;
    border-radius: var(--radius-lg); display: block;
}
.ks-about__text .section-h2 { margin-top: 0; }
.ks-about__quote { margin: 0 0 18px; padding: 0; font-size: 1.375rem; line-height: 1.4; font-weight: 700; color: var(--ks-ink); }
.ks-facts { list-style: disc; margin: 20px 0 26px; padding-left: 1.1em; display: flex; flex-direction: column; gap: 6px; }
.ks-facts li { font-size: 0.9875rem; }
.ks-facts li::marker { color: var(--ks-blue); }

/* Problemaufriss: links Aussage, rechts konkrete Situationen aus dem Alltag */
.ks-problem { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; }
.ks-problem-wrap .container { position: relative; }
.ks-problem__head h2 { font-size: clamp(1.75rem, 3vw, 2.375rem); line-height: 1.18; margin: 0 0 14px; }
.ks-problem__head .ks-lead { margin: 0; }
.ks-problem__robo { position: absolute; left: var(--gutter); bottom: calc(var(--section-y) * -1); width: 112px; height: auto; }
.ks-problem__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.ks-problem__list li { padding: 16px 0; border-bottom: 1px solid var(--color-border); font-size: 1.0625rem; line-height: 1.5; color: var(--ks-ink); }

/* Referenzen (statisch, kein Karussell): erstes Zitat breit oben, zwei Karten darunter.
   Unterschiedlich lange Zitate: Text mittig zwischen Icon und Name, kurze Zitate größer (ks-quote--short). */
.ks-quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.ks-quote { margin: 0; display: flex; flex-direction: column; gap: 14px; padding: 30px 32px; border-radius: var(--radius-lg); background: var(--ks-area-soft); }
.ks-quote blockquote { margin: 0; font-size: 1.0625rem; line-height: 1.65; color: var(--color-text); }
.ks-quote figcaption { margin-top: auto; font-size: 0.875rem; color: var(--color-text-faded); }
.ks-quote--short blockquote { font-size: 1.25rem; line-height: 1.5; font-weight: 600; color: var(--ks-ink); }
.ks-quotes > .ks-quote:first-child { grid-column: 1 / -1; padding: 38px 44px; }
.ks-quotes > .ks-quote:first-child blockquote { max-width: 860px; font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.5; font-weight: 600; color: var(--ks-ink); }
.ks-quote figcaption strong { display: block; color: var(--ks-ink); font-size: 0.9375rem; }
.ks-quotes__more { margin-top: 18px; font-size: 0.875rem; color: var(--color-text-faded); text-align: center; }

.ks-logos { margin-top: 56px; text-align: center; }
.ks-logos__label { display: block; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-faded); margin-bottom: 20px; }
.ks-logos__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 64px; }
.ks-logos__row img { height: 64px; width: auto; object-fit: contain; }

/* Ratgeber-Themen */
.ks-topics { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 56px; }
.ks-topic { display: flex; flex-direction: column; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--color-border); text-decoration: none; color: var(--ks-ink); }
.ks-topic:hover strong { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.ks-topic small { font-size: 0.8125rem; font-weight: 600; color: var(--ks-area-dark); }
.ks-topic strong { font-size: 1.0625rem; line-height: 1.35; }
.ks-topics__more { margin-top: 28px; }

/* Download-/Teaser-Duo */
.ks-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.ks-teaser {
    position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: 40px;
    background: var(--ks-area-soft); display: flex; flex-direction: column; gap: 14px;
}
.ks-i { flex-shrink: 0; }
.ks-teaser > .ks-i { font-size: 1.75rem; color: var(--ks-area-dark); }
.ks-teaser h3 { font-size: 1.5rem; line-height: 1.25; margin: 0; }
.ks-teaser p { margin: 0 0 8px; }
.ks-teaser .btn-secondary, .ks-teaser .btn-primary { align-self: flex-start; }

/* Pakete (DSB) */
.ks-packages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }
.ks-package {
    position: relative; display: flex; flex-direction: column; background: #fff;
    border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 28px 24px 26px;
    box-shadow: var(--shadow-sm);
}
.ks-package--featured { border: 2px solid var(--ks-blue-dark); box-shadow: var(--shadow-colored); }
.ks-package__flag {
    position: absolute; top: -13px; left: 24px; background: var(--ks-blue-dark); color: #fff;
    font-size: 0.75rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
    padding: 5px 12px; border-radius: var(--radius-full);
}
.ks-package__step { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-faded); }
.ks-package h3 { font-size: 1.25rem; line-height: 1.3; margin: 8px 0 10px; }
.ks-package p { font-size: 0.9375rem; margin: 0 0 16px; }
.ks-package .ks-package__price { font-size: 0.9375rem; color: var(--ks-ink); margin: auto 0 18px; padding-top: 14px; border-top: 1px dashed var(--color-border); }
.ks-package__price strong { font-size: 1.25rem; }
.ks-package .ks-card__list { margin-bottom: 22px; }
.ks-package .btn-primary, .ks-package .btn-secondary { justify-content: center; }
.ks-packages + .ks-hinweis + .ks-teaser { margin-top: 28px; }
.ks-hinweis {
    margin-top: 24px; padding: 18px 22px; border-radius: var(--radius-md); background: var(--ks-yellow-soft);
    font-size: 0.9375rem; display: flex; gap: 14px; align-items: flex-start;
}
.ks-hinweis i { color: var(--ks-yellow-dark); margin-top: 4px; }

/* Leistungsliste mit Icons */
.ks-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 32px; }
.ks-feature { display: flex; gap: 14px; align-items: flex-start; }
.ks-feature > .ks-i { width: 28px; text-align: center; font-size: 1.375rem; margin-top: 2px; color: var(--ks-blue); }
.ks-feature:nth-child(4n+2) > .ks-i { color: var(--ks-green); }
.ks-feature:nth-child(4n+3) > .ks-i { color: var(--ks-yellow); }
.ks-feature:nth-child(4n+4) > .ks-i { color: var(--ks-red); }
.ks-feature h3 { font-size: 1.0625rem; margin: 0 0 6px; line-height: 1.35; }
.ks-feature p { font-size: 0.9375rem; margin: 0; color: var(--color-text); }

/* Ablauf horizontal */
.ks-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: ks-flow; }
.ks-flow--3 { grid-template-columns: repeat(3, 1fr); }
.ks-flow li { position: relative; counter-increment: ks-flow; padding-top: 64px; }
.ks-flow li::before {
    content: counter(ks-flow); position: absolute; top: 0; left: 0; width: 48px; height: 48px; border-radius: 50%;
    background: var(--ks-blue-dark); color: #fff; font-weight: 800; font-size: 1.125rem;
    display: flex; align-items: center; justify-content: center;
}
.ks-flow li::after {
    content: ''; position: absolute; top: 24px; left: 60px; right: -12px; height: 2px;
    background: repeating-linear-gradient(90deg, var(--ks-blue) 0 8px, transparent 8px 14px);
}
/* Nach dem letzten Schritt läuft die Linie aus, statt abrupt zu enden */
.ks-flow li:last-child::after {
    right: auto; width: 60%;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, transparent 100%);
}
.ks-flow li:nth-child(2)::before { background: var(--ks-cta); }
.ks-flow li:nth-child(3)::before { background: var(--ks-green-dark); }
.ks-flow li:nth-child(4)::before { background: var(--ks-yellow); color: var(--ks-ink); }
.ks-flow strong { display: block; font-size: 1.0625rem; color: var(--ks-ink); margin-bottom: 6px; }
.ks-flow p { margin: 0; font-size: 0.9375rem; }

/* FAQ (native details) */
.ks-faq { display: flex; flex-direction: column; max-width: 860px; border-top: 1px solid var(--color-border); }
.ks-faq details { border-bottom: 1px solid var(--color-border); }
.ks-faq summary {
    list-style: none; cursor: pointer; padding: 18px 40px 18px 0; font-weight: 700; color: var(--ks-ink);
    font-size: 1.0625rem; position: relative;
}
.ks-faq summary::-webkit-details-marker { display: none; }
.ks-faq summary::after {
    content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    color: var(--ks-area-dark); font-size: 1.375rem; font-weight: 700; line-height: 1;
}
.ks-faq details[open] summary::after { content: '\2212'; }
.ks-faq details > div { padding: 0 0 20px; }
.ks-faq details > div p:last-child { margin-bottom: 0; }

/* Prosa-Abschnitte (Ratgeber-Teile auf Leistungsseiten) */
.ks-prose { max-width: 780px; }
.ks-prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; margin: 48px 0 16px; }
.ks-prose h2:first-child { margin-top: 0; }
.ks-prose h3 { font-size: 1.25rem; margin: 32px 0 10px; }
.ks-prose p, .ks-prose li { font-size: 1.0625rem; line-height: 1.75; }
.ks-prose ul { margin: 0 0 20px; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ks-prose ul li { position: relative; padding-left: 26px; }
.ks-prose ul li::before {
    content: ''; position: absolute; left: 4px; top: 0.72em; width: 8px; height: 8px; border-radius: 50%; background: var(--ks-area);
}

/* Zusammenfassung / Kurzantwort-Box */
.ks-summary {
    background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    padding: 32px 36px;
}
.ks-summary h2 { font-size: 1.375rem; margin: 0 0 16px; }
.ks-summary ul { margin: 0; }

/* Erlaubt / Verboten */
.ks-dodont { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ks-dodont__col { border-radius: var(--radius-lg); padding: 30px 32px; }
.ks-dodont__col--do { background: var(--ks-green-soft); }
.ks-dodont__col--dont { background: var(--ks-red-soft); }
.ks-dodont__col h3 { display: flex; align-items: center; gap: 12px; font-size: 1.25rem; margin: 0 0 16px; }
.ks-dodont__col--do h3 i { color: var(--ks-green-dark); }
.ks-dodont__col--dont h3 i { color: var(--ks-cta); }
.ks-dodont__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ks-dodont__col li { font-size: 0.9875rem; line-height: 1.6; }
.ks-dodont__col li strong { color: var(--ks-ink); }

/* Produktkasten (Kurs) */
.ks-product {
    display: grid; grid-template-columns: 1fr 1.1fr; gap: 0; border-radius: var(--radius-xl); overflow: hidden;
    background: var(--ks-ink); color: #fff;
}
.ks-product__img img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 360px; }
.ks-product__body { padding: 48px 52px; display: flex; flex-direction: column; gap: 16px; }
.ks-product__body h2 { color: #fff; font-size: clamp(1.625rem, 2.6vw, 2.125rem); line-height: 1.2; margin: 0; }
.ks-product__body p { color: rgba(255,255,255,0.88); margin: 0; }
.ks-product__meta { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.ks-product__meta li { display: flex; gap: 10px; align-items: center; font-size: 0.9375rem; color: rgba(255,255,255,0.92); }
.ks-product__meta i { color: var(--ks-yellow); width: 16px; }
.ks-product__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }

/* Inhaltsverzeichnis (Sprungmarken) */
.ks-toc { display: flex; flex-wrap: wrap; gap: 10px; }
.ks-toc a {
    padding: 9px 16px; border-radius: var(--radius-full); background: #fff; border: 1px solid var(--color-border);
    font-size: 0.9375rem; font-weight: 600; color: var(--ks-ink); text-decoration: none;
}
.ks-toc a:hover { border-color: var(--ks-area-dark); color: var(--ks-area-dark); }

/* Autorenzeile (Stand / Autor) */
.ks-byline { display: flex; align-items: center; gap: 14px; margin-top: 28px; font-size: 0.9375rem; color: var(--color-text-faded); }
.ks-byline img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: center 20%; }
.ks-byline strong { color: var(--ks-ink); }

/* Anfrage-Formular-Bereich (Entwurf) */
.ks-form-card { position: relative; background: #fff; border-radius: var(--radius-lg); padding: 36px; border: 1px solid var(--color-border); }
.ks-card-robo { position: absolute; right: 36px; top: -68px; width: 96px; height: auto; pointer-events: none; }

/* Quick-Check (Fluent Forms, mehrstufig): Fortschritt, Fragen als Auswahl-Pillen, Navigation wie Theme-Buttons */
.ks-qc-card { max-width: 820px; margin: 88px auto 0; padding: 44px 48px; }
.ks-qc-card .fluentform .ff-step-header { margin-bottom: 30px; }
.ks-qc-card .fluentform .ff-el-progress-status { font-size: 0.875rem; font-weight: 700; color: var(--ks-ink); margin-bottom: 10px; }
.ks-qc-card .fluentform .ff-el-progress { height: 10px; background: var(--ks-blue-soft); border-radius: var(--radius-full); overflow: hidden; }
.ks-qc-card .fluentform .ff-el-progress-bar { background: var(--ks-blue-dark); border-radius: var(--radius-full); }
.ks-qc-card .fluentform .ff-el-progress-bar span { display: none; }
.ks-qc-card .fluentform .ff-el-group { margin-bottom: 28px; }
.ks-qc-card .fluentform .ff-el-input--label label { font-size: 1.0625rem; font-weight: 700; color: var(--ks-ink); line-height: 1.45; }
.ks-qc-card .fluentform .ks-qc-frage .ff-el-input--content { display: flex; flex-wrap: wrap; gap: 10px; }
.ks-qc-card .fluentform .ff-el-form-check { margin: 0; }
.ks-qc-card .fluentform .ff-el-form-check-label {
    display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 10px 18px; cursor: pointer;
    border: 1.5px solid var(--color-border); border-radius: var(--radius-full); background: #fff;
    font-size: 0.9375rem; font-weight: 600; color: var(--color-text); line-height: 1.35;
    transition: border-color var(--transition), background var(--transition);
}
.ks-qc-card .fluentform .ff-el-form-check-label:hover { border-color: var(--ks-blue); }
.ks-qc-card .fluentform .ff-el-form-check-input { accent-color: var(--ks-blue-dark); margin: 0; width: 18px; height: 18px; flex-shrink: 0; }
.ks-qc-card .fluentform .ff-el-form-check:has(input:checked) .ff-el-form-check-label { border-color: var(--ks-blue-dark); background: var(--ks-blue-soft); color: var(--ks-ink); }
.ks-qc-card .fluentform .ff-el-form-check:has(input:focus-visible) .ff-el-form-check-label { outline: 3px solid var(--ks-blue); outline-offset: 2px; }
.ks-qc-card .fluentform .step-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 8px; }
.ks-qc-card .fluentform .ks-qc-frage .ff-el-input--content > .error { flex-basis: 100%; margin-top: 2px; }
.ks-qc-card .fluentform .step-nav button, .ks-qc-card .fluentform .ff-btn-submit {
    border-radius: var(--radius-full); padding: 13px 26px; font-family: inherit; font-size: 0.9375rem; font-weight: 700; cursor: pointer; float: none; opacity: 1;
}
.ks-qc-card .fluentform .ff-btn-next, .ks-qc-card .fluentform .ff-btn-next:focus, .ks-qc-card .fluentform .ff-btn-next:active, .ks-qc-card .fluentform .ff-btn-next[disabled],
.ks-qc-card .fluentform .ff-btn-submit, .ks-qc-card .fluentform .ff-btn-submit:focus, .ks-qc-card .fluentform .ff-btn-submit[disabled] {
    background: var(--ks-cta); border: 2px solid var(--ks-cta); color: #fff; margin-left: auto; box-shadow: none;
}
.ks-qc-card .fluentform .ff-btn-next:hover, .ks-qc-card .fluentform .ff-btn-submit:hover { background: var(--ks-cta-hover); border-color: var(--ks-cta-hover); color: #fff; }
.ks-qc-card .fluentform .ff-btn-prev, .ks-qc-card .fluentform .ff-btn-prev:focus, .ks-qc-card .fluentform .ff-btn-prev:hover { background: #fff; border: 2px solid var(--color-border); color: var(--color-primary); box-shadow: none; }
.ks-qc-card .fluentform .ff_submit_btn_wrapper { display: flex; justify-content: flex-end; }
.ks-qc-card .ks-qc-intro, .ks-qc-card .ks-qc-hinweis { font-size: 0.9375rem; color: var(--color-text-faded); margin: 0; }
.ks-form-card h2 { font-size: 1.5rem; margin: 0 0 8px; }
.ks-form-placeholder { display: grid; gap: 14px; margin-top: 20px; }
.ks-form-placeholder span {
    display: block; padding: 14px 18px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    color: var(--color-text-faded); font-size: 0.9375rem; background: var(--color-background-alt);
}
.ks-form-placeholder .btn-primary { justify-self: start; }

/* Teaser-Varianten */
.ks-teaser--wide { flex-direction: row; align-items: center; gap: 28px; padding: 32px 40px; }
.ks-teaser--wide > div { flex: 1; }
.ks-teaser--wide h3 { margin-bottom: 6px; }
.ks-teaser--wide .btn-secondary { align-self: center; }
.ks-teaser--compact { padding: 28px 30px; margin-top: 28px; background: #fff; border: 1px solid var(--color-border); }
.ks-teaser--compact h3 { font-size: 1.1875rem; }

/* Zitat innerhalb eines Textblocks */
.ks-quote--inline { margin-top: 28px; padding: 24px 26px; border-radius: var(--radius-lg); background: var(--ks-area-soft); gap: 12px; }
.ks-quote--inline blockquote { font-style: italic; }

/* Anfrage-Bereich */
.ks-anfrage { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; }
.ks-anfrage__contact { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ks-anfrage__contact li { display: flex; align-items: center; gap: 14px; font-size: 1.0625rem; font-weight: 700; }
.ks-anfrage__contact i { color: var(--ks-area-dark); width: 18px; font-size: 0.9375rem; }
.ks-anfrage__contact a { color: var(--ks-ink); text-decoration: none; }
.ks-anfrage__contact a:hover { color: var(--color-primary); text-decoration: underline; }
.ks-form-card .ff-el-input--label label { font-weight: 600; color: var(--ks-ink); }
.ks-form-card .ff-el-form-control { border-radius: var(--radius-sm) !important; }
.ks-form-card .ff-btn-submit {
    font-family: inherit !important;
    background: var(--ks-cta) !important; border-color: var(--ks-cta) !important; color: #fff !important;
    border-radius: var(--radius-full) !important; padding: 13px 28px !important; font-weight: 700 !important;
}
.ks-form-card .ff-btn-submit:hover { background: var(--ks-cta-hover) !important; }

/* Kurzantwort mit Robo */
.ks-summary-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.ks-summary .ks-prose { max-width: none; }
.ks-summary .ks-prose ul { display: block; columns: 2; column-gap: 48px; }
.ks-summary .ks-prose li { break-inside: avoid; margin-bottom: 10px; }
.ks-summary-grid .ks-teaser { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 24px; align-items: center; padding: 26px 36px; }
.ks-summary-grid .ks-teaser > .ks-i { grid-column: 1; grid-row: 1 / span 2; }
.ks-summary-grid .ks-teaser h3 { font-size: 1.25rem; grid-column: 2; }
.ks-summary-grid .ks-teaser p { grid-column: 2; margin: 0; }
.ks-summary-grid .ks-teaser .btn-primary, .ks-summary-grid .ks-teaser .btn-secondary { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.ks-summary { position: relative; }
.ks-summary__robo { position: absolute; right: 32px; top: -68px; height: 68px; width: auto; }
.ks-summary .ks-prose ul { margin: 0; }
.ks-toc { margin-top: 36px; }

/* Sticky-Karte neben Prosa */
.ks-sticky-card {
    position: sticky; top: 120px; background: #fff; border-radius: var(--radius-lg); padding: 30px;
    border: 1px solid var(--color-border);
}
.ks-sticky-card h3 { font-size: 1.25rem; margin: 0 0 6px; }
.ks-sticky-card .ks-steps { margin: 18px 0 24px; gap: 14px; }
.ks-sticky-card .ks-steps strong { margin-top: 2px; font-size: 1rem; }
.ks-sticky-card .ks-steps p { font-size: 0.9375rem; color: var(--color-text-faded); }
.ks-split--top .ks-prose h2 { margin-top: 0; }
.ks-source { font-size: 0.875rem !important; color: var(--color-text-faded); margin-top: 20px; }

/* Checkliste (nummeriert, Kästchen) */
.ks-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: ks-check; }
.ks-checklist li {
    counter-increment: ks-check; position: relative; background: #fff; border: 1px solid var(--color-border);
    border-radius: var(--radius-md); padding: 18px 20px 18px 70px; font-size: 1rem; line-height: 1.55;
}
.ks-checklist li::before {
    content: counter(ks-check); position: absolute; left: 22px; top: 14px; font-size: 1.5rem; font-weight: 800; color: var(--ks-yellow-dark);
}
.ks-checklist strong { color: var(--ks-ink); }

/* Kompakter Seitenkopf (ohne Bild) */
.ks-hero--compact .ks-hero__panel { grid-template-columns: 1fr; padding: 56px 64px; }
.ks-hero--compact .ks-hero__content { max-width: 780px; }
.ks-hero--compact .ks-hero__sub { margin-bottom: 0; max-width: 720px; }

/* Varianten Feature-Raster */
.ks-features--2 { grid-template-columns: repeat(2, 1fr); gap: 32px 48px; }

/* Rollen (Träger / Leitung / DSB) */
.ks-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ks-role { background: var(--ks-blue-soft); border-radius: var(--radius-lg); padding: 26px 28px; }
.ks-role:nth-child(2) { background: var(--ks-yellow-soft); }
.ks-role:nth-child(3) { background: var(--ks-green-soft); }
.ks-role__label { display: inline-block; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-faded); margin-bottom: 8px; }
.ks-role h3 { font-size: 1.1875rem; margin: 0 0 8px; }
.ks-role p { margin: 0; font-size: 0.9875rem; }
.ks-roles + .ks-hinweis { margin-top: 28px; }

/* Praxisthemen-Karten (Kurzantworten) */
.ks-qa-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 56px; }
.ks-qa { display: flex; flex-direction: column; gap: 6px; padding: 22px 0; border-bottom: 1px solid var(--color-border); text-decoration: none; color: var(--color-text); }
.ks-qa:hover h3 { color: var(--color-primary); }
.ks-qa small { font-size: 0.8125rem; font-weight: 600; color: var(--ks-area-dark); }
.ks-qa h3 { font-size: 1.1875rem; margin: 0; color: var(--ks-ink); }
.ks-qa p { margin: 0; font-size: 0.9625rem; line-height: 1.6; }
.ks-qa__more { margin-top: 6px; font-weight: 700; font-size: 0.9375rem; color: var(--ks-area-dark); }
.ks-qa__more::after { content: ' \2192'; }

/* Datenschutz-ABC-Raster */
.ks-abc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ks-abc { display: flex; flex-direction: column; gap: 8px; padding: 26px 26px 28px; border-radius: var(--radius-lg); text-decoration: none; color: var(--color-text); background: var(--ks-blue-soft); }
.ks-abc > i { font-size: 1.625rem; margin-bottom: 6px; color: var(--ks-blue-dark); }
.ks-abc:nth-child(4n+2) { background: var(--ks-green-soft); }
.ks-abc:nth-child(4n+2) > i { color: var(--ks-green-dark); }
.ks-abc:nth-child(4n+3) { background: var(--ks-yellow-soft); }
.ks-abc:nth-child(4n+3) > i { color: var(--ks-yellow-dark); }
.ks-abc:nth-child(4n+4) { background: var(--ks-red-soft); }
.ks-abc:nth-child(4n+4) > i { color: var(--ks-cta); }
a.ks-abc:hover h2 { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.ks-abc h2 { font-size: 1.1875rem; margin: 0; color: var(--ks-ink); }
.ks-abc p { margin: 0; font-size: 0.9625rem; line-height: 1.6; }
.ks-abc.ks-abc--cta { background: var(--ks-blue-dark); color: #fff; }
.ks-abc.ks-abc--cta h2 { color: #fff; }
.ks-abc.ks-abc--cta > i { color: var(--ks-yellow); }
.ks-abc--cta .btn-primary { align-self: flex-start; margin-top: 8px; }

/* Zitat breit, Formularhinweis, iFrame */
.ks-quote--wide { margin-top: 32px; max-width: 900px; margin-left: auto; margin-right: auto; }
.ks-form-note { font-size: 0.8125rem; color: var(--color-text-faded); margin: 14px 0 0; }
.ks-form-card > h2 { margin-bottom: 16px; }
.ks-iframe-card iframe { width: 100%; min-height: 320px; border: 0; border-radius: var(--radius-sm); background: var(--color-background-alt); display: block; }
.ks-logos--flat { margin-top: 0; }
.ks-quotes--top { margin-top: 48px; }

/* Kontaktkarten */
.ks-byline--card { background: var(--ks-blue-soft); border-radius: var(--radius-md); padding: 14px 18px; margin-top: 0; }
.ks-byline--card img { width: 56px; height: 56px; }

/* Themenbezogener CTA am Artikelende */
.ks-artikel-cta {
    display: flex; gap: 22px; align-items: flex-start; margin: 48px 0 8px; padding: 30px 32px;
    border-radius: var(--radius-lg); background: var(--ks-area-soft);
}
.ks-artikel-cta__title { font-size: 1.3125rem !important; font-weight: 800; color: var(--ks-ink); margin: 0 0 8px !important; line-height: 1.3 !important; }
.ks-artikel-cta > .ks-i { font-size: 1.75rem; color: var(--ks-area-dark); margin-top: 2px; }
.ks-artikel-cta p { margin: 0 0 18px; }
.ks-artikel-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── 8b. Artikel (single.php + page-ratgeber.php) ────────────────────────── */
/* Artikelkopf als runder Kasten wie die Seiten-Heros (template-parts/ks-artikel-kopf.php):
   links Meta, Titel, Teaser, „Zum Beitrag“; rechts das Beitragsbild. Beiträge blau, Datenschutz-ABC grün. */
.post-header.ks-post-hero { background: transparent; padding: 28px 0 0; }
.ks-post-hero__panel {
    position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 860px); gap: 48px; align-items: center;
    background: var(--ks-green-soft); border-radius: var(--radius-xl); padding: 56px 64px;
}
.single-post .ks-post-hero__panel { background: var(--ks-blue-soft); }
.ks-post-hero--img .ks-post-hero__panel { grid-template-columns: 1.1fr 0.9fr; padding: 56px; }
.ks-post-hero__text { position: relative; z-index: 1; min-width: 0; }
.ks-post-hero h1 { font-size: clamp(1.875rem, 3.2vw, 2.625rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0; max-width: none; }
.ks-post-hero .ks-breadcrumb { margin-bottom: 14px; }
.ks-post-hero .post-meta-row { margin-bottom: 18px; }
.ks-post-hero .post-tag { background: #fff; color: var(--ks-green-dark); }
.single-post .ks-post-hero .post-tag { color: var(--color-primary); }
.ks-post-hero .post-lead { margin: 20px 0 0; font-size: 1.125rem; line-height: 1.65; color: var(--color-text); max-width: 640px; }
.ks-post-hero .post-scroll-btn { margin-top: 26px; }
.ks-post-hero .btn-minimal { font-size: 0.9375rem; font-weight: 700; color: var(--color-primary); }
.ks-post-hero__img { position: relative; z-index: 1; align-self: stretch; min-height: 320px; }
.ks-post-hero__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); border: 0; aspect-ratio: auto; }
.post-body-section { scroll-margin-top: 110px; }
.post-tag { border-radius: var(--radius-full); }
.post-body h2 { font-size: clamp(1.5rem, 2.6vw, 1.875rem); line-height: 1.25; }
.post-body h3 { font-size: 1.25rem; line-height: 1.35; }
.post-body p, .post-body li { font-size: 1.0625rem; line-height: 1.78; }
.post-body a { color: var(--color-primary); }
.post-body a.btn-primary, .post-body a.btn-primary:hover { color: #fff; text-decoration: none; }
.post-body a.btn-secondary { text-decoration: none; }
.post-body ol:not(.ks-checklist):not(.ks-steps) { list-style: decimal; padding-left: 1.5em; }
.post-body ol:not(.ks-checklist):not(.ks-steps) > li { padding-left: 4px; margin-bottom: 8px; }
.post-body ol:not(.ks-checklist):not(.ks-steps) > li::marker { font-weight: 800; color: var(--color-primary); }
/* Tabellen: eigener Scroll-Container, weil html/body overflow-x: clip setzen (sonst sind Spalten mobil unerreichbar) */
.post-body .wp-block-table { margin: 32px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.post-body table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.post-body th, .post-body td { padding: 12px 14px; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--color-border); }
.post-body th + th, .post-body td + td { border-left: 1px solid var(--color-border); }
.post-body thead th { background: var(--ks-blue-soft); color: var(--ks-ink); font-weight: 700; border-bottom: 2px solid var(--ks-blue); }
.post-body tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 767px) {
    .post-body table { min-width: 620px; font-size: 0.875rem; }
}
.post-tag { background: var(--ks-green-soft); color: var(--ks-green-dark); border: 0; font-weight: 700; }
/* Filter-Leiste im Blog: Datenschutz-ABC als Link zur ABC-Übersicht (Seiten, keine Kategorie) */
.filter-pill--abc { display: inline-flex; align-items: center; gap: 8px; border-color: var(--ks-green) !important; color: var(--ks-green-dark) !important; font-weight: 700; }
.filter-pill--abc:hover { background: var(--ks-green-soft) !important; }
.blog-tag { background: var(--ks-blue-soft) !important; color: var(--color-primary) !important; border: 0 !important; font-weight: 700; border-radius: var(--radius-full); }
.page-header { background: transparent; padding: 28px 0 0; position: relative; z-index: 0; }
.page-header > .container { position: relative; padding-top: 56px; padding-bottom: 56px; }
.page-header > .container::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: var(--gutter); right: var(--gutter); z-index: -1;
    background: var(--ks-blue-soft); border-radius: var(--radius-xl);
}
.page-header > .container > * { margin-left: 56px; margin-right: 56px; }
.page-header h1 { font-size: clamp(2rem, 3.8vw, 3rem); font-weight: 800; }
.page-header-label { display: none; }
.ks-footer__title, .ks-logos__label, .ks-package__step, .ks-package__flag, .ks-role__label, .ks-qc-preview__tag,
.post-toc-title, .author-label, .post-nav-label, .post-nav-direction, .blog-tag, .post-tag, .article-tag {
    text-transform: none; letter-spacing: 0;
}
.ks-footer__title, .ks-logos__label { font-size: 0.9375rem; font-weight: 700; }
.ks-package__step, .ks-role__label { font-size: 0.875rem; font-weight: 700; }
.ks-package__flag, .ks-qc-preview__tag { font-size: 0.8125rem; font-weight: 700; }
.post-toc-title, .author-label { font-size: 0.9375rem; font-weight: 700; color: var(--ks-ink); }
.post-nav-label, .post-nav-direction { font-size: 0.8125rem; font-weight: 600; }
.blog-tag, .post-tag, .article-tag { font-size: 0.8125rem; font-weight: 600; }
.page-header, .filter-bar { border: 0; }
.filter-bar, .section-articles { background: transparent; }
.filter-bar { padding: 28px 0 8px; }
.blog-card, .article-card { border-radius: var(--radius-lg); overflow: hidden; }
.single-post .post-tag { background: #fff; color: var(--color-primary); }
.post-toc { border-radius: var(--radius-md); border-left: 1px solid var(--color-border); }
.author-avatar img { border-radius: 50%; object-fit: cover; object-position: center 20%; }

/* ── 8c. Rechtsseiten ────────────────────────────────────────────────────── */
.legal-header { background: var(--ks-blue-soft); padding: 48px 0 36px; }
.legal-content .entry-content h2 { font-size: 1.5rem; margin: 40px 0 12px; }
.legal-content .entry-content h3 { font-size: 1.1875rem; margin: 28px 0 8px; }
.legal-content .entry-content p, .legal-content .entry-content li { font-size: 1rem; line-height: 1.75; }
.legal-content .entry-content ul { list-style: disc; padding-left: 1.4em; margin: 0 0 1rem; }
.legal-content .entry-content ol { list-style: decimal; padding-left: 1.4em; margin: 0 0 1rem; }

/* Grid-Kinder dürfen schrumpfen (lange deutsche Komposita sprengen sonst die Spalte) */
.ks-hero__panel > *, .ks-split > *, .ks-anfrage > *, .ks-summary-grid > *, .ks-about > *, .ks-duo > * { min-width: 0; }

/* ── 9. Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .ks-packages { grid-template-columns: repeat(2, 1fr); }
    .ks-trust__grid { grid-template-columns: repeat(2, 1fr); }
    .ks-trust__item:nth-child(odd) { border-left: 0; padding-left: 0; }
    .ks-footer__grid { grid-template-columns: 1fr 1fr; }
    .ks-features { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1023px) {
    .ks-hero__panel { grid-template-columns: 1fr; padding: 44px 32px 0; gap: 32px; }
    .ks-hero__visual { min-height: 300px; margin: 0 -32px; }
    .ks-hero__visual > img { border-radius: 0; }
    .ks-hero__visual::before, .ks-hero__robo { display: none; }
    .ks-hero--compact .ks-hero__panel:has(.ks-hero__robo) .ks-hero__content { max-width: none; }
    .ks-hero__dot--yellow, .ks-hero__dot--blue { display: none; }
    .ks-cards, .ks-quotes { grid-template-columns: 1fr; }
    .ks-split, .ks-split--prose, .ks-about, .ks-duo, .ks-dodont { grid-template-columns: 1fr; gap: 36px; }
    .ks-split__img::before { display: none; }
    .ks-flow { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
    .ks-flow li::after { display: none; }
    .ks-cta__panel { grid-template-columns: 1fr; padding: 48px 32px 0; gap: 0; }
    .ks-cta__text { padding-bottom: 12px; }
    .ks-cta__person { justify-self: center; margin: 0; }
    .ks-cta__foto { height: 320px; }
    .ks-problem { grid-template-columns: 1fr; gap: 24px; }
    .ks-problem__robo { display: none; }
    .ks-about { gap: 28px; }
    .ks-about__img { min-height: 0; }
    .ks-about__img img { position: static; height: auto; aspect-ratio: 1 / 1; }
    .ks-product { grid-template-columns: 1fr; }
    .ks-product__img img { min-height: 240px; max-height: 300px; }
    .ks-product__body { padding: 36px 32px; }
    .nav-cta { margin: 10px 0 0; }
    .ks-hero__visual--card { margin: 0; padding: 0 0 36px; min-height: 0; }
    .ks-hero__visual.ks-hero__visual--robo { margin: 0; }
    .ks-hero__visual--robo > img { max-width: 260px; }
    .ks-post-hero--img .ks-post-hero__panel { grid-template-columns: 1fr; gap: 28px; padding: 40px 32px; }
    .ks-post-hero__img { min-height: 0; }
    .ks-post-hero__img img { position: static; aspect-ratio: 16 / 10; }
    .ks-split--portrait .ks-split__img { min-height: 0; }
    .ks-split--portrait .ks-split__img img { position: static; height: auto; aspect-ratio: 4 / 5; max-height: 620px; }
    .ks-flow--3 { grid-template-columns: 1fr; }
    .ks-qc-card { padding: 32px 28px; }
    .ks-anfrage, .ks-summary-grid { grid-template-columns: 1fr; gap: 32px; }
    .ks-roles, .ks-abc-grid { grid-template-columns: 1fr 1fr; }
    .ks-hero--compact .ks-hero__panel { padding: 44px 32px; }
    .ks-sticky-card { position: static; }
    .ks-teaser--wide { flex-direction: column; align-items: flex-start; }
    .ks-teaser--wide .btn-secondary { align-self: flex-start; }
}

@media (max-width: 767px) {
    body { font-size: 1rem; }
    .ks-claimbar__inner { min-height: 38px; padding-right: calc(var(--gutter) + 62px); gap: 12px; }
    .ks-claimbar__claim { font-size: 0.78125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    .ks-claimbar__link span { display: none; }
    .ks-claimbar__link i { font-size: 0.9375rem; }
    .ks-claimbar__contact { gap: 16px; flex-shrink: 0; }
    .ks-claimbar__robo { height: 44px; bottom: -12px; }
    .ks-summary__robo { height: 48px; top: -48px; right: 22px; }
    .ks-card-robo { width: 76px; top: -54px; right: 22px; }
    .ks-section--alt::after { width: 96px; height: 96px; right: -44px; bottom: -44px; }
    .ks-footer__robo { width: 76px; top: -54px; right: 22px; }
    .ks-checklist li { padding-left: 62px; }
    .ks-roles, .ks-abc-grid, .ks-qa-grid, .ks-features--2 { grid-template-columns: 1fr; }
    h1, h2, h3, .ks-hero h1, .post-header h1 { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
    .btn-primary, .btn-secondary, .btn-ghost, .ks-btn-yellow { white-space: normal; text-align: center; line-height: 1.3; }
    .ks-hero--compact .ks-hero__panel { padding: 36px 22px; }
    .ks-artikel-cta { flex-direction: column; padding: 26px 22px; }
    .post-header.ks-post-hero { padding-top: 16px; }
    .ks-post-hero__panel, .ks-post-hero--img .ks-post-hero__panel { padding: 32px 22px; border-radius: var(--radius-lg); }
    .ks-post-hero .post-lead { font-size: 1.0625rem; }
    .ks-logo .site-logo-img { height: 50px; }
    .ks-logo__name { font-size: 1.375rem; }
    .ks-hero { padding-top: 16px; }
    .ks-hero__panel { padding: 36px 22px 0; border-radius: var(--radius-lg); }
    .ks-hero__visual { margin: 0 -22px; min-height: 240px; }
    .ks-hero__visual--card { margin: 0; padding: 0 0 28px; min-height: 0; }
    .ks-hero__visual.ks-hero__visual--robo { margin: 0; min-height: 0; }
    .ks-hero__sub, .ks-lead { font-size: 1.0625rem; }
    .ks-hero__actions .btn-primary, .ks-hero__actions .btn-secondary { width: 100%; justify-content: center; }
    .ks-trust__grid, .ks-topics, .ks-packages, .ks-features, .ks-facts, .ks-flow, .ks-product__meta { grid-template-columns: 1fr; }
    .ks-head { margin-bottom: 32px; }
    .ks-teaser, .ks-summary, .ks-dodont__col, .ks-form-card { padding: 28px 22px; }
    .ks-cta__panel { padding: 40px 22px 0; border-radius: var(--radius-lg); }
    .ks-trust__item + .ks-trust__item { border-left: 0; padding-left: 0; }
    .page-header > .container > * { margin-left: 22px; margin-right: 22px; }
    .page-header > .container { padding-top: 32px; padding-bottom: 32px; }
    .ks-topics, .ks-qa-grid, .ks-abc-grid { grid-template-columns: 1fr; }
    .ks-footer__grid { grid-template-columns: 1fr; gap: 36px; }
    .ks-footer__newsletter { padding: 22px; }
    .ks-footer__newsletter-form { flex-direction: column; }
    .ks-footer__bottom-inner { flex-direction: column; align-items: flex-start; }
    .ks-logos__row img { height: 44px; }
    .post-meta-row .post-meta-dot { display: none; }
    .ks-summary .ks-prose ul { columns: 1; }
    .ks-summary-grid .ks-teaser { grid-template-columns: 1fr; padding: 24px 22px; gap: 10px; }
    .ks-summary-grid .ks-teaser > .ks-i, .ks-summary-grid .ks-teaser h3, .ks-summary-grid .ks-teaser p { grid-column: 1; grid-row: auto; }
    .ks-summary-grid .ks-teaser .btn-primary, .ks-summary-grid .ks-teaser .btn-secondary { grid-column: 1; grid-row: auto; justify-self: start; }
    .post-meta-row { column-gap: 16px; row-gap: 6px; }
}

/* Runde 6 (05.11.2026) */
/* Quick-Check: lange Antworten als breite Karten statt Pillen */
.ks-qc-card .fluentform .ks-qc-frage--lang .ff-el-input--content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ks-qc-card .fluentform .ks-qc-frage--lang .ff-el-form-check-label { display: flex; align-items: flex-start; width: 100%; padding: 13px 16px; border-radius: var(--radius-md); font-weight: 500; }
.ks-qc-card .fluentform .ks-qc-frage--lang .ff-el-form-check-input { margin-top: 2px; }

/* Ablauf senkrecht neben dem Formular */
.ks-anfrage__text .ks-flow--stack { grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 24px 0 0; }
.ks-anfrage__text .ks-flow--stack li { padding: 2px 0 0 62px; min-height: 48px; }
.ks-anfrage__text .ks-flow--stack li::after { display: none; }

/* Kennzeichnung KI-generierter Bilder */
.ks-ki-label {
    position: absolute; left: 14px; bottom: 14px; z-index: 2; pointer-events: none;
    padding: 3px 10px; border-radius: var(--radius-full); background: rgba(22, 25, 37, 0.66);
    color: #fff; font-size: 0.6875rem; font-weight: 600; line-height: 1.4;
}
.ks-product__img, .ks-post-hero__img, .blog-card__thumbnail, a.blog-card__img { position: relative; display: block; }

/* Video im Leitfaden */
.ks-video { max-width: 960px; margin: 0 auto; border-radius: var(--radius-lg); overflow: hidden; background: var(--ks-ink); }
.ks-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* Vier Stimmen: eine breit, drei darunter */
@media (min-width: 1025px) {
    .ks-quotes--4 { grid-template-columns: repeat(6, 1fr); }
    .ks-quotes--4 > .ks-quote { grid-column: span 2; padding: 28px; }
    .ks-quotes--4 > .ks-quote:first-child { grid-column: 1 / -1; padding: 38px 44px; }
}

/* KI-Kurs: Lizenzstaffel */
.ks-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ks-tier { padding: 18px 22px; border-radius: var(--radius-md); background: var(--ks-yellow-soft); }
.ks-tier strong { display: block; font-size: 1.0625rem; color: var(--ks-ink); }
.ks-tier span { font-size: 0.9375rem; }
.ks-tiers + .ks-duo { margin-top: 28px; }
@media (max-width: 767px) {
    .ks-tiers { grid-template-columns: 1fr 1fr; }
}

/* Hero mit langen Wörtern in der Überschrift */
.ks-hero--langtitel h1 { font-size: clamp(2rem, 3.1vw, 2.75rem); hyphens: manual; }

/* Newsletter im Footer (Fluent Forms): E-Mail und Button in einer Zeile, Einwilligung darunter */
.ks-footer .ks-footer__newsletter-form .fluentform { margin: 0; }
.ks-footer .ks-footer__newsletter-form fieldset { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ks-footer .ks-footer__newsletter-form .ff-el-group { margin: 0; }
.ks-footer .ks-footer__newsletter-form .ff-el-group:not(:has(.ff-el-form-check)) .ff-el-input--label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.ks-footer .ks-footer__newsletter-form .ff-el-group:has(.ff-el-form-check) { grid-column: 1 / -1; order: 3; }
.ks-footer .ks-footer__newsletter-form .ff_submit_btn_wrapper { order: 2; margin: 0; }
.ks-footer .ks-footer__newsletter-form .ff-el-form-control {
    height: auto; border: 0; border-radius: var(--radius-full); padding: 13px 20px;
    font: inherit; font-size: 0.9375rem; color: var(--ks-ink); background: #fff;
}
.ks-footer .ks-footer__newsletter-form .ff-btn-submit {
    background: var(--ks-yellow); border: 2px solid var(--ks-yellow); color: var(--ks-ink); box-shadow: none;
    border-radius: var(--radius-full); padding: 11px 22px; font-family: inherit; font-size: 0.9375rem; font-weight: 700;
}
.ks-footer .ks-footer__newsletter-form .ff-btn-submit:hover { background: #FFD233; border-color: #FFD233; color: var(--ks-ink); }
.ks-footer .ks-footer__newsletter-form .ff-el-form-check { margin: 0; }
.ks-footer .ks-footer__newsletter-form .ff-el-form-check-label {
    display: flex; gap: 10px; align-items: flex-start; margin: 0;
    color: rgba(255,255,255,0.85); font-size: 0.75rem; line-height: 1.5; font-weight: 400;
}
.ks-footer .ks-footer__newsletter-form .ff-el-form-check-input { margin: 2px 0 0; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--ks-yellow); }
.ks-footer .ks-footer__newsletter-form .ff-el-form-check-label a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.ks-footer .ks-footer__newsletter-form .error, .ks-footer .ks-footer__newsletter-form .text-danger { color: #FFE08A; font-size: 0.8125rem; margin-top: 6px; }
.ks-footer .ks-footer__newsletter-form .ff-message-success {
    margin: 0; padding: 14px 18px; border: 0; border-radius: var(--radius-md); box-shadow: none;
    background: rgba(255,255,255,0.12); color: #fff; font-size: 0.9375rem;
}
@media (max-width: 767px) {
    .ks-footer .ks-footer__newsletter-form fieldset { grid-template-columns: minmax(0, 1fr); }
    .ks-footer .ks-footer__newsletter-form .ff-el-group:has(.ff-el-form-check) { order: 2; }
    .ks-footer .ks-footer__newsletter-form .ff_submit_btn_wrapper { order: 3; }
    .ks-footer .ks-footer__newsletter-form .ff-btn-submit { width: 100%; }
}

/* Footer: LinkedIn oben, darunter die Mitgliedslogos GDD, BvD, ACS in einer Reihe (alle 44 px hoch) */
.ks-footer__badges { flex-direction: column; align-items: flex-start; gap: 16px; }
.ks-footer__mitglied { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ks-footer__badges .ks-footer__gdd img { width: 44px; height: 44px; }
/* ACS: Logo unverändert, bringt seinen weißen Grund selbst mit */
.ks-footer__acs img { display: block; width: auto; height: 44px; border-radius: 6px; }
/* BvD-Logo ist dunkelblau auf transparent: unverändert auf weißer Fläche */
.ks-footer__bvd { display: block; padding: 4px 7px; border-radius: 6px; background: #fff; }
.ks-footer__bvd img { display: block; width: auto; height: 36px; }

/* Freigestellte Kurs-Illustrationen (Startbilder der E-Learnings): Form steht direkt auf der Farbfläche, ohne Rahmen */
.ks-hero__visual.ks-hero__visual--illu { display: flex; align-items: center; justify-content: center; min-height: 0; }
.ks-hero__visual--illu::before { display: none; }
.ks-hero__visual.ks-hero__visual--illu > img { position: static; width: 100%; max-width: 520px; height: auto; max-height: 520px; object-fit: contain; border-radius: 0; }
.ks-card__img--illu { display: flex; align-items: flex-end; justify-content: center; padding: 18px 18px 0; }
.ks-card__img--illu img { object-fit: contain; object-position: center bottom; }
@media (max-width: 1023px) {
    .ks-hero__visual.ks-hero__visual--illu { margin: 0; padding-bottom: 28px; }
    .ks-hero__visual.ks-hero__visual--illu > img { max-width: 360px; }
}

/* Portal: echte Screenshots, Kennzahlen */
.ks-shot { margin: 0 0 40px; }
.ks-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; }
.ks-shot figcaption { margin-top: 10px; font-size: 0.8125rem; color: var(--color-text-faded); text-align: center; }
.ks-features--4 { grid-template-columns: repeat(4, 1fr); }
.ks-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 40px; }
.ks-stat { padding: 26px 30px; border-radius: var(--radius-lg); background: var(--ks-blue-soft); }
.ks-stat:nth-child(2) { background: var(--ks-yellow-soft); }
.ks-stat strong { display: block; font-size: clamp(2.25rem, 4vw, 3rem); font-weight: 800; line-height: 1.1; color: var(--ks-ink); }
.ks-stat span { font-size: 1rem; }
.ks-teaser--after { margin-top: 40px; }
.ks-actions-center { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 44px; }
@media (max-width: 1024px) {
    .ks-features--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .ks-features--4, .ks-stats { grid-template-columns: 1fr; }
}

/* Newsletter-Box: Text oben bündig mit dem E-Mail-Feld, Einwilligung darunter mit mehr Breite */
.ks-footer__newsletter { align-items: flex-start; }
.ks-footer__newsletter-text { flex: 1 1 260px; padding-top: 10px; }
.ks-footer__newsletter-form { flex: 1 1 520px; max-width: 640px; }

/* Kontakt: drei Wegweiser nebeneinander */
.ks-topics--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767px) {
    .ks-topics--3 { grid-template-columns: 1fr; }
    .ks-footer__newsletter-text { padding-top: 0; }
}

/* Schmale Spalte, mittig unter dem Formular (Quick-Check-FAQ) */
.ks-schmal { max-width: 820px; margin: 0 auto; }
.ks-schmal .ks-faq { max-width: none; }

/* Leistungen und Preise (Felix' Pakete, 09.11.2026): flache Karten in Bereichsfarben, ohne Schatten */
.ks-pakete { display: grid; gap: 24px; }
.ks-pakete--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ks-paket { display: flex; flex-direction: column; padding: 34px 36px; border-radius: var(--radius-lg); background: var(--ks-area-soft); }
.ks-paket h3 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 8px; }
.ks-paket h4 { font-size: 1rem; line-height: 1.35; margin: 0 0 10px; color: var(--ks-ink); }
.ks-paket__preis { margin: 0 0 14px; font-size: 1rem; color: var(--ks-ink); }
.ks-paket__preis strong { font-size: 1.625rem; font-weight: 800; }
.ks-paket__claim { margin: 0 0 18px; font-size: 1.0625rem; }
.ks-paket__hinweis { margin: auto 0 18px; font-size: 0.875rem; color: var(--color-text-faded); }
.ks-paket > .btn-primary, .ks-paket > .btn-secondary { align-self: flex-start; }
.ks-paket__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; margin-bottom: 6px; }
.ks-paket__kopf > div { max-width: 760px; }
.ks-paket__kopf .ks-paket__preis { flex-shrink: 0; text-align: right; }
.ks-paket__flag { display: inline-block; margin-bottom: 10px; padding: 4px 12px; border-radius: var(--radius-full); background: var(--ks-area-dark); color: #fff; font-size: 0.8125rem; font-weight: 700; }
.ks-paket__basis { margin: 0 0 14px; font-weight: 700; color: var(--ks-ink); }
.ks-paket__gruppen { columns: 2 320px; column-gap: 48px; }
.ks-paket__gruppe { break-inside: avoid; margin-bottom: 20px; }
.ks-paket__gruppe .ks-card__list { margin-bottom: 0; }
.ks-paket__fuss { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 4px; padding-top: 20px; border-top: 1px solid rgba(22, 25, 37, 0.1); }
.ks-paket__fuss .ks-paket__hinweis { margin: 0; max-width: 760px; }
.ks-paket__fuss .btn-primary { flex-shrink: 0; }
.ks-teaser .ks-paket__preis { margin: 0; }

/* Vergleichstabelle: auf dem Handy wischbar */
.ks-vergleich { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; }
.ks-vergleich table { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.45; }
.ks-vergleich th, .ks-vergleich td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.ks-vergleich thead th { background: var(--ks-blue-soft); color: var(--ks-ink); font-weight: 700; }
.ks-vergleich tbody th { width: 22%; font-weight: 600; color: var(--ks-ink); }
.ks-vergleich tbody tr:last-child > * { border-bottom: 0; }
.ks-vergleich .ks-ja { color: var(--ks-green-dark); font-weight: 700; }
.ks-vergleich .ks-nein { color: var(--color-text-faded); }
@media (max-width: 1023px) {
    .ks-pakete--2 { grid-template-columns: minmax(0, 1fr); }
    .ks-paket__kopf, .ks-paket__fuss { flex-direction: column; align-items: flex-start; }
    .ks-paket__kopf .ks-paket__preis { text-align: left; }
}
@media (max-width: 767px) {
    .ks-paket { padding: 26px 22px; }
    .ks-paket__gruppen { columns: 1; }
}

/* Vergleichstabelle mobil: Leistungsspalte bleibt beim Wischen stehen, Hinweis nur auf dem Handy */
.ks-vergleich__hinweis { display: none; }
@media (max-width: 767px) {
    .ks-vergleich__hinweis { display: flex; align-items: center; gap: 8px; margin: -8px 0 12px; font-size: 0.8125rem; color: var(--color-text-faded); }
    .ks-vergleich table { min-width: 720px; font-size: 0.8125rem; }
    .ks-vergleich th, .ks-vergleich td { padding: 10px 10px; }
    .ks-vergleich tbody th, .ks-vergleich thead th:first-child {
        position: sticky; left: 0; z-index: 1; width: 118px; min-width: 118px;
        background: #fff; box-shadow: 1px 0 0 var(--color-border);
    }
    .ks-vergleich thead th:first-child { background: var(--ks-blue-soft); }
}

/* KI-Kurs: Preise als schlichte Liste statt Boxen (Felix 09.11.2026) */
.ks-preisliste { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 56px; }
.ks-preisliste li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--color-border); font-size: 1rem; }
.ks-preisliste li:nth-child(1), .ks-preisliste li:nth-child(5) { border-top: 1px solid var(--color-border); }
.ks-preisliste strong { color: var(--ks-ink); white-space: nowrap; }
.ks-preisliste + .ks-form-note + .ks-duo { margin-top: 32px; }
.ks-logos__row img.ks-logo--kmk { height: 72px; }
@media (max-width: 767px) {
    .ks-preisliste { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
    .ks-preisliste li:nth-child(5) { border-top: 0; }
}

/* Runde 12: Träger-Logos weiter oben (Startseite vor dem Angebot, DSB unter dem Vertrauensband, Leistungen) */
.ks-logos--vor { margin: 0 0 64px; }
.ks-logos--trust { margin: 44px 0 40px; }
@media (max-width: 767px) {
    .ks-logos--vor { margin-bottom: 44px; }
    .ks-logos--trust { margin: 32px 0 32px; }
}

/* Runde 13: Startseite, Agnes Busch einzeln über „Von außen nach innen“, drei Stimmen unten nebeneinander */
.ks-quotes--einzeln { margin-top: 56px; }
.ks-quotes--einzeln + .ks-quotes__more { margin-top: 24px; }
.ks-quotes--3 > .ks-quote:first-child { grid-column: auto; padding: 30px 32px; }
.ks-quotes--3 > .ks-quote:first-child blockquote { max-width: none; font-size: 1.0625rem; line-height: 1.65; font-weight: 400; color: var(--color-text); }
@media (min-width: 1025px) {
    .ks-quotes--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .ks-quotes--einzeln { margin-top: 40px; }
    .ks-quotes > .ks-quote:first-child { padding: 26px 22px; }
    .ks-quotes > .ks-quote:first-child blockquote { font-size: 1.0625rem; line-height: 1.6; }
}

/* Runde 14/15 (11.11.2026): zweiter Button im Teaser, zentrierter Demo-Button, Kennzahl mit Zusatz */
.ks-teaser--wide > .ks-teaser__aktionen { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ks-zentriert { text-align: center; margin: 36px 0 0; }
.ks-vergleich td.ks-ja { white-space: normal; }
@media (max-width: 767px) {
    .ks-teaser--wide > .ks-teaser__aktionen { flex-direction: column; align-items: stretch; width: 100%; }
}
/* Anfrage-Kasten einspaltig: gelber Kreis hinter das Foto statt hinter die Überschrift (weiße Schrift auf Gelb war kaum lesbar) */
@media (max-width: 1023px) {
    .ks-cta__panel::after { top: auto; bottom: 70px; right: -90px; width: 260px; height: 260px; }
}
/* KI-Richtlinie anfordern (12.11.2026): Formular in der Seitenleisten-Karte wie die übrigen Formulare */
.ks-sticky-card .ff-el-input--label label { font-weight: 600; color: var(--ks-ink); }
.ks-sticky-card .ff-el-form-control { border-radius: var(--radius-sm) !important; }
.ks-sticky-card .ff-btn-submit {
    font-family: inherit !important;
    background: var(--ks-cta) !important; border-color: var(--ks-cta) !important; color: #fff !important;
    border-radius: var(--radius-full) !important; padding: 13px 28px !important; font-weight: 700 !important;
}
.ks-sticky-card .ff-btn-submit:hover { background: var(--ks-cta-hover) !important; }