@charset "UTF-8";
/* ===========================================================================
   kuzbari-2026.css — Modul-Bibliothek der kuzbari.at (Design-System 2026)
   ---------------------------------------------------------------------------
   Wird in partials/head.php NACH dem bestehenden Bundle geladen und fasst
   dieses nicht an (das Bundle traegt handgepflegte Korrekturen, build_assets.py
   darf nicht laufen). Alle Klassen tragen den Praefix kz-, alle Regeln greifen
   ausschliesslich innerhalb von .kz-*-Bausteinen.

   Optik: Weiterentwicklung der bestehenden Site — warmes Gold #b69154,
   viel Weiss, ruhige Typografie ('Julius Sans One' fuer Auszeichnungen,
   'Neue Helvetica W05' fuer Text), weiche Radien, wenig Schatten.

   Zwei Einbau-Orte je Modul:
     a) im Textfluss von #content > article  (Spaltenbreite, ~640 px)
     b) vollbreit: zusaetzliche Klasse kz-wide (Artikelbreite, ~1000 px)
        bzw. kz-band (durchgehendes Farbband ueber die volle Fensterbreite)

   Ohne JavaScript ist alles sichtbar und bedienbar; prefers-reduced-motion
   schaltet jede Bewegung ab. Die Site hat keinen Dark Mode — es wird auch
   keiner eingefuehrt.
   Dokumentation mit Beispiel-Markup: kuzbari-at-analyse/design-system.md
   =========================================================================== */

:root {
    --kz-gold: #b69154;
    --kz-gold-dark: #94733f;
    --kz-gold-tint: #f6f0e6;
    --kz-gold-line: #e3d5bc;
    --kz-ink: #181818;
    --kz-ink-soft: #55504a;
    --kz-ink-mute: #7d766d;
    --kz-paper: #fff;
    --kz-paper-warm: #faf7f2;
    --kz-paper-cool: #f5faff;
    --kz-line: #e6e1d8;
    --kz-sans: 'Neue Helvetica W05', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --kz-display: 'Julius Sans One', 'Neue Helvetica W05', 'Helvetica Neue', sans-serif;
    --kz-r: 10px;
    --kz-r-s: 6px;
    --kz-gap: 24px;
    --kz-block: 48px;
}

/* --------------------------------------------------------------- Grundlagen */

:is(#content, body) [class*="kz-"] { box-sizing: border-box; }
:is(#content, body) [class*="kz-"] *,
:is(#content, body) [class*="kz-"] *:before,
:is(#content, body) [class*="kz-"] *:after { box-sizing: border-box; }

:is(#content, body) .kz-block {
    /* Textspaltenbreite der Site (Artikel 1000 px, Spalte 640 px). Die Module
       bringen sie selbst mit und haengen nicht am 180-px-Gehege des Bundles —
       damit funktionieren sie auch ausserhalb von #content. */
    max-width: 640px;
    margin: var(--kz-block) auto;
    padding-left: 0;
    padding-right: 0;
    font-family: var(--kz-sans);
    font-weight: 300;
    color: var(--kz-ink);
    letter-spacing: 0.3px;
    text-align: left;
}
:is(#content, body) .kz-block.kz-wide { max-width: 1000px; }

/* Farbband ueber die ganze Fensterbreite (Muster der bestehenden .lidthree). */
:is(#content, body) .kz-band {
    position: relative;
    font-family: var(--kz-sans);
    font-weight: 300;
    color: var(--kz-ink);
    letter-spacing: 0.3px;
    text-align: left;
    max-width: none;
    margin: var(--kz-block) auto;
    padding: 56px 0;
    background: var(--kz-paper-warm);
}
:is(#content, body) .kz-band:before {
    content: '';
    position: absolute;
    left: -2000px;
    right: -2000px;
    top: 0;
    bottom: 0;
    background: inherit;
    z-index: -1;
}
:is(#content, body) .kz-band--cool { background: var(--kz-paper-cool); }
:is(#content, body) .kz-band--gold { background: var(--kz-gold-tint); }
:is(#content, body) .kz-band--plain { background: var(--kz-paper); }
:is(#content, body) .kz-band > .kz-band-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}
:is(#content, body) .kz-band .kz-block,
:is(#content, body) .kz-band .kz-block.kz-wide { max-width: none; }
:is(#content, body) .kz-band > .kz-band-inner > .kz-block:first-child { margin-top: 0; }
:is(#content, body) .kz-band > .kz-band-inner > .kz-block:last-child { margin-bottom: 0; }

/* Ueberschriften innerhalb der Module — bewusst eigene Klassen, damit die
   Bundle-Regeln fuer h2/h3 nicht dagegenarbeiten. */
:is(#content, body) .kz-h {
    font-family: var(--kz-display);
    font-weight: 400;
    color: var(--kz-gold);
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-size: 27px;
    line-height: 1.25;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}
:is(#content, body) .kz-h--center { text-align: center; }
:is(#content, body) .kz-kicker {
    display: block;
    font-family: var(--kz-sans);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--kz-ink-mute);
    margin: 0 0 10px;
}
:is(#content, body) .kz-text {
    font-family: var(--kz-sans);
    font-weight: 300;
    font-size: 18px;
    line-height: 1.62;
    color: var(--kz-ink);
    margin: 0 0 16px;
    letter-spacing: 0.3px;
}
:is(#content, body) .kz-text:last-child { margin-bottom: 0; }
:is(#content, body) .kz-text--small { font-size: 15px; line-height: 1.6; color: var(--kz-ink-soft); }

/* Fliesstext-Links in den Modulen. Bewusst nur in Textelementen, damit die
   Knopf- und Kachel-Links ihre eigene Farbe behalten. */
:is(#content, body) .kz-block :is(p, li, dd, dt, td, th, blockquote, figcaption) a { color: var(--kz-gold-dark); }
:is(#content, body) .kz-block :is(p, li, dd, dt, td, th, blockquote, figcaption) a:hover { color: var(--kz-gold); }

/* Tastaturbedienung: sichtbarer Fokusring in allen Modulen. */
:is(#content, body) .kz-block a:focus-visible,
:is(#content, body) .kz-block button:focus-visible,
:is(#content, body) .kz-block summary:focus-visible,
:is(#content, body) .kz-block [tabindex]:focus-visible {
    outline: 2px solid var(--kz-gold-dark);
    outline-offset: 3px;
    border-radius: var(--kz-r-s);
}

/* Knopf */
:is(#content, body) a.kz-btn,
:is(#content, body) .kz-btn {
    display: inline-block;
    font-family: var(--kz-sans);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background: var(--kz-gold);
    border: 1px solid var(--kz-gold);
    border-radius: var(--kz-r);
    padding: 13px 22px;
    transition: background .25s ease, color .25s ease;
}
:is(#content, body) a.kz-btn:hover,
:is(#content, body) a.kz-btn:focus,
:is(#content, body) .kz-btn:hover,
:is(#content, body) .kz-btn:focus { background: #fff; color: var(--kz-gold-dark); }
:is(#content, body) a.kz-btn--ghost,
:is(#content, body) .kz-btn--ghost { background: transparent; color: var(--kz-gold-dark); }
:is(#content, body) a.kz-btn--ghost:hover,
:is(#content, body) a.kz-btn--ghost:focus,
:is(#content, body) .kz-btn--ghost:hover,
:is(#content, body) .kz-btn--ghost:focus { background: var(--kz-gold); color: #fff; }

/* Einblenden beim Scrollen. Ohne JS bleibt alles sichtbar, weil erst das
   Skript die Klasse kz-reveal-armed setzt. */
:is(#content, body) .kz-reveal-armed[data-reveal] {
    opacity: 0;
    transform: translateY(16px);
}
:is(#content, body) .kz-reveal-armed[data-reveal].is-in {
    opacity: 1;
    transform: none;
    transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
    transition-delay: calc(var(--kz-d, 0) * .09s);
}

/* ----------------------------------------------- Animierte Linien-Icons */
/* Ohne JS bleiben die Icons voll gezeichnet stehen. kuzbari-2026.js armiert
   sie (Striche unsichtbar) und zeichnet sie beim ersten Eintritt in den
   Viewport nach. Akzentformen (kz-i-a) tragen das Gold der Site. */
:is(#content, body) .kz-i {
    display: block;
    width: 34px;
    height: 34px;
    color: var(--kz-ink);
    overflow: visible;
}
:is(#content, body) .kz-i-a { stroke: var(--kz-gold); }
:is(#content, body) .kz-i--mono .kz-i-a { stroke: currentColor; }
:is(#content, body) .kz-i.is-armed .kz-i-s { stroke-dasharray: 1; stroke-dashoffset: 1; }
:is(#content, body) .kz-i.is-armed.is-drawn .kz-i-s {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .95s cubic-bezier(.5,0,.2,1);
    transition-delay: calc(var(--kzi, 0) * .14s);
}
:is(#content, body) .kz-i--lg { width: 46px; height: 46px; }
:is(#content, body) .kz-i--sm { width: 24px; height: 24px; }

@media (prefers-reduced-motion: reduce) {
    :is(#content, body) .kz-i.is-armed .kz-i-s { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
    :is(#content, body) .kz-reveal-armed[data-reveal] { opacity: 1; transform: none; }
    :is(#content, body) .kz-reveal-armed[data-reveal].is-in { transition: none; }
}

/* =========================================================== 1  Seitenintro */
:is(#content, body) .kz-intro {
    margin: 0 auto var(--kz-block);
    padding: 0 0 28px;
    border-bottom: 1px solid var(--kz-line);
    text-align: left;
}
#content .kz-intro .kz-intro-title { border-bottom: 0; padding-bottom: 0; }
:is(#content, body) .kz-intro .kz-intro-title {
    font-family: var(--kz-display);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--kz-gold);
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: 0.6px;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}
:is(#content, body) .kz-intro .kz-intro-lead {
    font-family: var(--kz-sans);
    font-weight: 300;
    font-size: 21px;
    line-height: 1.55;
    color: var(--kz-ink-soft);
    margin: 0 0 22px;
    letter-spacing: 0.3px;
}
:is(#content, body) .kz-intro-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}
:is(#content, body) .kz-intro-facts li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--kz-ink-soft);
    margin: 0;
    padding: 0;
    list-style: none;
}
:is(#content, body) .kz-intro-facts li:before { content: none; }
:is(#content, body) .kz-intro-facts .kz-i { width: 26px; height: 26px; flex: 0 0 26px; }

/* ======================================================== 2  Kennzahlen-Band */
:is(#content, body) .kz-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: var(--kz-block) auto;
    padding: 0;
    list-style: none;
}
:is(#content, body) .kz-stats > li,
:is(#content, body) .kz-stat {
    flex: 1 1 150px;
    min-width: 132px;
    margin: 0;
    padding: 22px 12px;
    list-style: none;
    text-align: center;
    background: var(--kz-paper);
    border: 1px solid var(--kz-gold-line);
    border-radius: var(--kz-r);
}
:is(#content, body) .kz-stats > li:before { content: none; }
:is(#content, body) .kz-stat-num {
    display: block;
    font-family: var(--kz-display);
    font-weight: 400;
    font-size: 38px;
    line-height: 1.05;
    color: var(--kz-gold);
    letter-spacing: 0;
    margin: 0 0 8px;
}
:is(#content, body) .kz-stat-label {
    display: block;
    font-family: var(--kz-sans);
    font-weight: 300;
    font-size: 12px;
    line-height: 1.45;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--kz-ink-soft);
    margin: 0;
}
:is(#content, body) .kz-stats--plain > li,
:is(#content, body) .kz-stats--plain .kz-stat {
    background: none;
    border: 0;
    border-left: 1px solid var(--kz-gold-line);
    border-radius: 0;
    padding: 6px 12px;
    text-align: left;
}
:is(#content, body) .kz-stats--plain > li:first-child { border-left: 0; padding-left: 0; }

/* =========================================================== 3  Icon-Reihe */
:is(#content, body) .kz-icons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px 28px;
    margin: var(--kz-block) auto;
    padding: 0;
    list-style: none;
}
:is(#content, body) .kz-icons--2 { grid-template-columns: repeat(2, 1fr); }
:is(#content, body) .kz-icons--4 { grid-template-columns: repeat(4, 1fr); }
:is(#content, body) .kz-icons > li,
:is(#content, body) .kz-icon-item {
    margin: 0;
    padding: 0;
    list-style: none;
}
:is(#content, body) .kz-icons > li:before { content: none; }
:is(#content, body) .kz-icon-item .kz-i { margin: 0 0 14px; }
:is(#content, body) .kz-icon-item h3,
:is(#content, body) .kz-icon-item .kz-icon-title {
    font-family: var(--kz-sans);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.3;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--kz-ink);
    margin: 0 0 8px;
    padding: 0;
}
:is(#content, body) .kz-icon-item p {
    font-family: var(--kz-sans);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.55;
    color: var(--kz-ink-soft);
    margin: 0;
    padding: 0;
    letter-spacing: 0.2px;
}
:is(#content, body) .kz-icons--center { text-align: center; }
:is(#content, body) .kz-icons--center .kz-i { margin-left: auto; margin-right: auto; }

/* ======================================================== 4  Fakten-Karten */
:is(#content, body) .kz-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin: var(--kz-block) auto;
    padding: 0;
    list-style: none;
}
:is(#content, body) .kz-facts > li,
:is(#content, body) .kz-fact {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0;
    padding: 18px 16px;
    list-style: none;
    background: var(--kz-paper-warm);
    border-radius: var(--kz-r);
    border: 1px solid var(--kz-line);
}
:is(#content, body) .kz-facts > li:before { content: none; }
:is(#content, body) .kz-fact .kz-i { flex: 0 0 30px; width: 30px; height: 30px; margin-top: 2px; }
:is(#content, body) .kz-fact-body { min-width: 0; }
:is(#content, body) .kz-fact-label {
    display: block;
    font-family: var(--kz-sans);
    font-weight: 400;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--kz-ink-mute);
    margin: 0 0 5px;
}
:is(#content, body) .kz-fact-value {
    display: block;
    font-family: var(--kz-sans);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.4;
    color: var(--kz-ink);
    margin: 0;
}
:is(#content, body) .kz-facts--head { grid-column: 1 / -1; }

/* ====================================================== 5  Ablauf-Zeitstrahl */
:is(#content, body) .kz-steps {
    position: relative;
    margin: var(--kz-block) auto;
    padding: 0 0 0 54px;
    list-style: none;
    counter-reset: kzstep;
}
:is(#content, body) .kz-steps:before {
    content: '';
    position: absolute;
    left: 18px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: var(--kz-gold-line);
}
:is(#content, body) .kz-steps > li {
    position: relative;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
    counter-increment: kzstep;
}
:is(#content, body) .kz-steps > li:last-child { margin-bottom: 0; }
:is(#content, body) .kz-steps > li:before {
    content: counter(kzstep);
    position: absolute;
    left: -54px;
    top: 0;
    width: 37px;
    height: 37px;
    border-radius: 50%;
    background: var(--kz-paper);
    border: 1px solid var(--kz-gold);
    color: var(--kz-gold);
    font-family: var(--kz-display);
    font-size: 16px;
    line-height: 35px;
    text-align: center;
    margin: 0;
}
:is(#content, body) .kz-step-title {
    display: block;
    font-family: var(--kz-sans);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.35;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--kz-ink);
    margin: 6px 0 8px;
    padding: 0;
}
:is(#content, body) .kz-step-meta {
    display: block;
    font-size: 12px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--kz-gold-dark);
    margin: 0 0 6px;
}
:is(#content, body) .kz-steps p {
    font-family: var(--kz-sans);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.6;
    color: var(--kz-ink-soft);
    margin: 0 0 10px;
    padding: 0;
}
:is(#content, body) .kz-steps p:last-child { margin-bottom: 0; }

/* ======================================================= 6  Bild-Text-Block */
:is(#content, body) .kz-media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: center;
    margin: var(--kz-block) auto;
}
:is(#content, body) .kz-media-img { margin: 0; padding: 0; }
:is(#content, body) .kz-media-img img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: var(--kz-r);
    margin: 0;
}
:is(#content, body) .kz-media-img figcaption {
    font-size: 13px;
    line-height: 1.5;
    color: var(--kz-ink-mute);
    margin: 9px 0 0;
    letter-spacing: 0.2px;
}
:is(#content, body) .kz-media-body .kz-h { font-size: 24px; }
:is(#content, body) .kz-media--right .kz-media-img { order: 2; }
:is(#content, body) .kz-media--right .kz-media-body { order: 1; }

/* Variante: Bild vollflaechig mit Textkarte darueber */
:is(#content, body) .kz-media--cover {
    display: block;
    position: relative;
    grid-template-columns: none;
}
:is(#content, body) .kz-media--cover .kz-media-img img { border-radius: var(--kz-r); }
:is(#content, body) .kz-media--cover .kz-media-body {
    position: relative;
    margin: -70px 20px 0 20px;
    background: rgba(255,255,255,.96);
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-r);
    padding: 26px 28px;
}

/* ==================================================== 7  Vorher-Nachher-Modul */
:is(#content, body) .kz-vn {
    margin: var(--kz-block) auto;
}
:is(#content, body) .kz-vn .twentytwenty {
    width: 100%;
    margin: 0 0 14px;
    border-radius: var(--kz-r);
    overflow: hidden;
}
:is(#content, body) .kz-vn .twentytwenty img,
:is(#content, body) .kz-vn .twentytwenty-container img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0;
}
:is(#content, body) .kz-vn-caption {
    font-family: var(--kz-sans);
    font-weight: 300;
    font-size: 15px;
    line-height: 1.55;
    color: var(--kz-ink-soft);
    margin: 0 0 12px;
    padding: 0;
}
:is(#content, body) .kz-vn-data {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin: 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--kz-line);
}
:is(#content, body) .kz-vn-data > div { min-width: 110px; }
:is(#content, body) .kz-vn-data dt {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--kz-ink-mute);
    margin: 0 0 3px;
    font-weight: 400;
}
:is(#content, body) .kz-vn-data dd {
    font-size: 16px;
    line-height: 1.4;
    color: var(--kz-ink);
    margin: 0;
    font-weight: 300;
}
:is(#content, body) .kz-vn-hint {
    font-size: 12px;
    line-height: 1.5;
    color: var(--kz-ink-mute);
    margin: 12px 0 0;
}

/* ============================================================ 8  Zitat-Block */
:is(#content, body) .kz-quote {
    margin: var(--kz-block) auto;
    padding: 0 0 0 24px;
    border-left: 2px solid var(--kz-gold);
}
:is(#content, body) .kz-quote blockquote {
    margin: 0;
    padding: 0;
    font-family: var(--kz-sans);
    font-weight: 200;
    font-size: 23px;
    line-height: 1.5;
    color: var(--kz-ink);
    letter-spacing: 0.2px;
}
:is(#content, body) .kz-quote blockquote p { margin: 0 0 12px; font: inherit; color: inherit; }
:is(#content, body) .kz-quote blockquote p:last-child { margin-bottom: 0; }
:is(#content, body) .kz-quote figcaption,
:is(#content, body) .kz-quote-source {
    display: block;
    margin: 16px 0 0;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--kz-ink-mute);
}

/* Variante mit Portraet — fuer aerztliche Stimmen */
:is(#content, body) .kz-quote--doctor {
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: 26px;
    align-items: center;
    border-left: 0;
    padding: 26px 28px;
    background: var(--kz-paper-warm);
    border-radius: var(--kz-r);
}
:is(#content, body) .kz-quote--doctor img {
    width: 104px;
    height: 104px;
    max-width: 104px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0;
    display: block;
}
:is(#content, body) .kz-quote--doctor blockquote { font-size: 20px; }

/* Variante mit grossem Anfuehrungszeichen — fuer Patientinnenstimmen */
:is(#content, body) .kz-quote--patient {
    position: relative;
    border-left: 0;
    padding: 34px 28px 28px;
    background: var(--kz-paper-cool);
    border-radius: var(--kz-r);
    text-align: center;
}
:is(#content, body) .kz-quote--patient:before {
    content: '\201C';
    position: absolute;
    top: -6px;
    left: 22px;
    font-family: Georgia, serif;
    font-size: 78px;
    line-height: 1;
    color: var(--kz-gold);
    opacity: .35;
}
:is(#content, body) .kz-quote--patient blockquote { font-size: 20px; font-style: italic; }

/* ========================================================= 9  FAQ-Akkordeon */
:is(#content, body) .kz-faq {
    margin: var(--kz-block) auto;
    border-top: 1px solid var(--kz-line);
}
:is(#content, body) .kz-faq > details {
    border-bottom: 1px solid var(--kz-line);
    margin: 0;
    padding: 0;
    background: none;
}
:is(#content, body) .kz-faq > details > summary {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    list-style: none;
    cursor: pointer;
    padding: 18px 0;
    font-family: var(--kz-sans);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.45;
    color: var(--kz-ink);
    letter-spacing: 0.3px;
}
:is(#content, body) .kz-faq > details > summary::-webkit-details-marker { display: none; }
:is(#content, body) .kz-faq > details > summary:before {
    content: '';
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin-top: 7px;
    border-right: 1.5px solid var(--kz-gold);
    border-bottom: 1.5px solid var(--kz-gold);
    transform: rotate(45deg);
    transition: transform .25s ease;
}
:is(#content, body) .kz-faq > details[open] > summary:before { transform: rotate(-135deg); margin-top: 11px; }
:is(#content, body) .kz-faq > details > summary:hover { color: var(--kz-gold-dark); }
:is(#content, body) .kz-faq-answer { padding: 0 0 20px 28px; }
:is(#content, body) .kz-faq-answer p {
    font-family: var(--kz-sans);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.62;
    color: var(--kz-ink-soft);
    margin: 0 0 12px;
    padding: 0;
}
:is(#content, body) .kz-faq-answer p:last-child { margin-bottom: 0; }
:is(#content, body) .kz-faq-answer ul { margin: 0 0 12px; padding: 0 0 0 20px; }
:is(#content, body) .kz-faq-answer li { font-size: 17px; line-height: 1.6; color: var(--kz-ink-soft); }

/* =============================================== 10  Vergleichs-/Entscheidungstabelle */
:is(#content, body) .kz-compare {
    margin: var(--kz-block) auto;
    overflow-x: auto;
}
:is(#content, body) .kz-compare table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--kz-sans);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.5;
}
:is(#content, body) .kz-compare caption {
    caption-side: top;
    text-align: left;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--kz-ink-mute);
    padding: 0 0 12px;
}
:is(#content, body) .kz-compare th,
:is(#content, body) .kz-compare td {
    text-align: left;
    padding: 13px 14px;
    border-bottom: 1px solid var(--kz-line);
    vertical-align: top;
    color: var(--kz-ink);
    font-weight: 300;
}
:is(#content, body) .kz-compare thead th {
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--kz-gold-dark);
    border-bottom: 1px solid var(--kz-gold-line);
    background: var(--kz-gold-tint);
}
:is(#content, body) .kz-compare tbody th {
    font-weight: 400;
    color: var(--kz-ink);
    white-space: normal;
}
:is(#content, body) .kz-compare tbody tr:last-child th,
:is(#content, body) .kz-compare tbody tr:last-child td { border-bottom: 0; }
/* Spaltenname je Zelle — auf dem Desktop unnoetig, auf Mobil die
   Kartenbeschriftung. Bewusst ein Element und kein data-Attribut, damit der
   Text uebersetzbar bleibt (en_validate.py vergleicht Attribute Byte fuer Byte). */
:is(#content, body) .kz-compare-label { display: none; }

/* ============================================================ 11  Checkliste */
:is(#content, body) .kz-check {
    margin: var(--kz-block) auto;
    padding: 0;
    list-style: none;
}
:is(#content, body) .kz-check > li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin: 0 0 13px;
    padding: 0;
    list-style: none;
    font-family: var(--kz-sans);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.55;
    color: var(--kz-ink);
}
:is(#content, body) .kz-check > li:before { content: none; }
:is(#content, body) .kz-check > li:last-child { margin-bottom: 0; }
:is(#content, body) .kz-check .kz-i { flex: 0 0 24px; width: 24px; height: 24px; margin-top: 1px; }
:is(#content, body) .kz-check--boxed {
    background: var(--kz-paper-warm);
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-r);
    padding: 24px 26px;
}

/* ====================================================== 12  Hinweis-/Warnbox */
:is(#content, body) .kz-note {
    display: flex;
    gap: 16px;
    margin: var(--kz-block) auto;
    padding: 20px 22px;
    border-radius: var(--kz-r);
    border-left: 3px solid var(--kz-gold);
    background: var(--kz-paper-warm);
}
:is(#content, body) .kz-note .kz-i { flex: 0 0 28px; width: 28px; height: 28px; margin-top: 2px; }
:is(#content, body) .kz-note-body { min-width: 0; }
:is(#content, body) .kz-note-title {
    display: block;
    font-family: var(--kz-sans);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--kz-gold-dark);
    margin: 0 0 8px;
}
:is(#content, body) .kz-note p {
    font-family: var(--kz-sans);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.6;
    color: var(--kz-ink-soft);
    margin: 0 0 10px;
    padding: 0;
}
:is(#content, body) .kz-note p:last-child { margin-bottom: 0; }
:is(#content, body) .kz-note--info { border-left-color: #8fa9c4; background: var(--kz-paper-cool); }
:is(#content, body) .kz-note--info .kz-note-title { color: #4c6a8c; }
:is(#content, body) .kz-note--info .kz-i-a { stroke: #4c6a8c; }
:is(#content, body) .kz-note--important { border-left-color: var(--kz-gold); background: var(--kz-gold-tint); }
:is(#content, body) .kz-note--medical { border-left-color: #8c8577; background: #f4f3f0; }
:is(#content, body) .kz-note--medical .kz-note-title { color: #6b6559; }
:is(#content, body) .kz-note--medical .kz-i-a { stroke: #6b6559; }

/* ============================================= 13  Inhaltsverzeichnis (sticky) */
:is(#content, body) .kz-toc {
    margin: var(--kz-block) auto;
    padding: 20px 22px;
    background: var(--kz-paper-warm);
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-r);
}
:is(#content, body) .kz-toc-title {
    display: block;
    font-family: var(--kz-sans);
    font-weight: 400;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--kz-ink-mute);
    margin: 0 0 12px;
}
:is(#content, body) .kz-toc ol,
:is(#content, body) .kz-toc ul {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: kztoc;
}
:is(#content, body) .kz-toc li {
    margin: 0 0 9px;
    padding: 0;
    list-style: none;
    font-size: 15px;
    line-height: 1.45;
}
:is(#content, body) .kz-toc li:before { content: none; }
:is(#content, body) .kz-toc li:last-child { margin-bottom: 0; }
:is(#content, body) .kz-toc a {
    color: var(--kz-ink-soft);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
:is(#content, body) .kz-toc a:hover,
:is(#content, body) .kz-toc a:focus { color: var(--kz-gold-dark); border-bottom-color: var(--kz-gold-line); }
:is(#content, body) .kz-toc a.is-current { color: var(--kz-gold-dark); }
/* Sprungziele nicht unter der fixen Kopfleiste verstecken */
/* Sprungziel: leerer Platzhalter mit Abstand, damit die Ueberschrift nicht
   unter der festen Kopfleiste landet. Kein visibility:hidden — sonst springt
   der Browser nicht dorthin. */
:is(#content, body) .kz-anchor { display: block; height: 0; overflow: hidden; scroll-margin-top: 130px; }

@media (min-width: 1024px) {
    #content .kz-toc--sticky {
        position: sticky;
        top: 104px;
        float: left;
        width: 160px;
        margin: 0 20px 26px 0;
        padding: 16px 14px;
        padding-left: 14px;
        padding-right: 14px;
        font-size: 13px;
        background: none;
        border: 0;
        border-left: 1px solid var(--kz-gold-line);
        border-radius: 0;
    }
    #content .kz-toc--sticky li { font-size: 13px; margin-bottom: 8px; }
}

/* ======================================================= 14  Galerie-Kacheln */
:is(#content, body) .kz-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: var(--kz-block) auto;
    padding: 0;
    list-style: none;
}
:is(#content, body) .kz-gallery--4 { grid-template-columns: repeat(4, 1fr); }
:is(#content, body) .kz-gallery > li,
:is(#content, body) .kz-gallery figure { margin: 0; padding: 0; list-style: none; }
:is(#content, body) .kz-gallery > li:before { content: none; }
:is(#content, body) .kz-gallery a {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--kz-r-s);
    line-height: 0;
}
:is(#content, body) .kz-gallery img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin: 0;
    transition: transform .5s ease;
}
:is(#content, body) .kz-gallery a:hover img,
:is(#content, body) .kz-gallery a:focus img { transform: scale(1.04); }
:is(#content, body) .kz-gallery figcaption {
    font-size: 13px;
    line-height: 1.45;
    color: var(--kz-ink-mute);
    margin: 7px 0 0;
}

/* ============================================================= 15  CTA-Block */
:is(#content, body) .kz-cta {
    margin: var(--kz-block) auto;
    padding: 34px 32px;
    background: var(--kz-gold-tint);
    border-radius: var(--kz-r);
    text-align: center;
}
:is(#content, body) .kz-cta .kz-cta-title {
    font-family: var(--kz-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--kz-gold-dark);
    font-size: 26px;
    line-height: 1.25;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
}
:is(#content, body) .kz-cta p {
    font-family: var(--kz-sans);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.6;
    color: var(--kz-ink-soft);
    margin: 0 auto 20px;
    max-width: 560px;
    padding: 0;
}
:is(#content, body) .kz-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: center;
}
:is(#content, body) .kz-cta-note {
    display: block;
    margin: 16px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--kz-ink-mute);
}
:is(#content, body) .kz-cta--slim {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    text-align: left;
    padding: 18px 22px;
    background: var(--kz-paper);
    border: 1px solid var(--kz-gold-line);
}
:is(#content, body) .kz-cta--slim .kz-cta-title { font-size: 18px; margin: 0 0 4px; }
:is(#content, body) .kz-cta--slim p { margin: 0; font-size: 15px; max-width: none; }
:is(#content, body) .kz-cta--slim .kz-cta-actions { justify-content: flex-start; }

/* ============================================================= 16  Arzt-Karte */
:is(#content, body) .kz-doc {
    display: grid;
    grid-template-columns: 148px 1fr;
    gap: 26px;
    align-items: center;
    margin: var(--kz-block) auto;
    padding: 24px 26px;
    background: var(--kz-paper);
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-r);
}
:is(#content, body) .kz-doc img {
    display: block;
    width: 148px;
    max-width: 148px;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--kz-r-s);
    margin: 0;
}
:is(#content, body) .kz-doc-name {
    display: block;
    font-family: var(--kz-display);
    font-weight: 400;
    font-size: 21px;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--kz-gold);
    margin: 0 0 6px;
    padding: 0;
    border: 0;
}
:is(#content, body) .kz-doc-role {
    display: block;
    font-size: 12px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--kz-ink-mute);
    margin: 0 0 12px;
}
:is(#content, body) .kz-doc p {
    font-family: var(--kz-sans);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.6;
    color: var(--kz-ink-soft);
    margin: 0 0 12px;
    padding: 0;
}
:is(#content, body) .kz-doc-link {
    font-size: 13px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--kz-gold-dark);
    border-bottom: 1px solid var(--kz-gold-line);
}
:is(#content, body) .kz-docs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin: var(--kz-block) auto;
}
:is(#content, body) .kz-docs .kz-doc { margin: 0; }

/* ============================== 17  Schritt-fuer-Schritt-Bildstrecke */
:is(#content, body) .kz-strip { margin: var(--kz-block) auto; }
:is(#content, body) .kz-strip-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}
:is(#content, body) .kz-strip-track > li { margin: 0; padding: 0; list-style: none; }
:is(#content, body) .kz-strip-track > li:before { content: none; }
:is(#content, body) .kz-strip figure { margin: 0; padding: 0; }
:is(#content, body) .kz-strip img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--kz-r-s);
    margin: 0 0 12px;
}
:is(#content, body) .kz-strip-step {
    display: block;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--kz-gold-dark);
    margin: 0 0 5px;
}
:is(#content, body) .kz-strip figcaption {
    font-family: var(--kz-sans);
    font-weight: 300;
    font-size: 15px;
    line-height: 1.55;
    color: var(--kz-ink-soft);
}
:is(#content, body) .kz-strip-hint {
    display: none;
    font-size: 12px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--kz-ink-mute);
    margin: 12px 0 0;
}

/* ======================================================= 18  Zahlen-/Preis-Karte */
:is(#content, body) .kz-price {
    margin: var(--kz-block) auto;
    padding: 28px 30px;
    background: var(--kz-paper);
    border: 1px solid var(--kz-gold-line);
    border-radius: var(--kz-r);
}
:is(#content, body) .kz-price-label {
    display: block;
    font-size: 11px;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--kz-ink-mute);
    margin: 0 0 10px;
}
:is(#content, body) .kz-price-value {
    display: block;
    font-family: var(--kz-display);
    font-weight: 400;
    font-size: 40px;
    line-height: 1.05;
    color: var(--kz-gold);
    margin: 0 0 12px;
}
:is(#content, body) .kz-price-value small {
    display: inline-block;
    font-family: var(--kz-sans);
    font-size: 15px;
    letter-spacing: 1px;
    color: var(--kz-ink-mute);
    margin-left: 6px;
}
:is(#content, body) .kz-price p {
    font-family: var(--kz-sans);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.6;
    color: var(--kz-ink-soft);
    margin: 0 0 12px;
    padding: 0;
}
:is(#content, body) .kz-price-list {
    margin: 0 0 14px;
    padding: 14px 0 0;
    border-top: 1px solid var(--kz-line);
    list-style: none;
}
:is(#content, body) .kz-price-list li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
    font-size: 16px;
    line-height: 1.45;
    color: var(--kz-ink);
    font-weight: 300;
}
:is(#content, body) .kz-price-list li:before { content: none; }
:is(#content, body) .kz-price-list li span:last-child { color: var(--kz-ink-soft); white-space: nowrap; }
:is(#content, body) .kz-price-note {
    display: block;
    margin: 14px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--kz-line);
    font-size: 12px;
    line-height: 1.55;
    color: var(--kz-ink-mute);
}

/* ===========================================================================
   Responsiv — 1440 px bis 390 px
   =========================================================================== */

@media (max-width: 1023px) {
    :is(#content, body) .kz-icons--4 { grid-template-columns: repeat(2, 1fr); }
    :is(#content, body) .kz-gallery--4 { grid-template-columns: repeat(3, 1fr); }
    :is(#content, body) .kz-intro .kz-intro-title { font-size: 32px; }
    :is(#content, body) .kz-intro .kz-intro-lead { font-size: 19px; }
}

@media (max-width: 1000px) {
    /* Unter 1000 px laeuft der Artikel voll aus; die Module setzen ihren
       Seitenrand selbst (das Bundle macht hier dasselbe mit 20 px). */
    :is(#content, body) .kz-block,
    :is(#content, body) .kz-block.kz-wide {
        max-width: none;
        padding-left: 20px;
        padding-right: 20px;
    }
    :is(#content, body) .kz-band { padding-left: 0; padding-right: 0; }
    :is(#content, body) .kz-band .kz-block,
    :is(#content, body) .kz-band .kz-block.kz-wide { padding-left: 0; padding-right: 0; }
    :is(#content, body) .kz-steps { padding-left: 74px; padding-right: 20px; }
    :is(#content, body) .kz-steps:before { left: 38px; }
    :is(#content, body) .kz-band > .kz-band-inner { padding: 0 20px; }
}

@media (max-width: 767px) {
    :root { --kz-block: 36px; }
    :is(#content, body) .kz-band { padding: 40px 0; }
    :is(#content, body) .kz-intro { padding-bottom: 22px; }
    :is(#content, body) .kz-intro .kz-intro-title { font-size: 27px; }
    :is(#content, body) .kz-intro .kz-intro-lead { font-size: 18px; }
    :is(#content, body) .kz-h { font-size: 22px; }

    :is(#content, body) .kz-icons,
:is(#content, body) .kz-icons--2,
:is(#content, body) .kz-icons--4 { grid-template-columns: 1fr; gap: 26px; }
    :is(#content, body) .kz-facts { grid-template-columns: 1fr; }
    :is(#content, body) .kz-stats { gap: 12px; }
    :is(#content, body) .kz-stats > li,
:is(#content, body) .kz-stat { flex: 1 1 calc(50% - 6px); min-width: calc(50% - 6px); padding: 16px 8px; }
    :is(#content, body) .kz-stat-num { font-size: 30px; }
    :is(#content, body) .kz-stats--plain > li,
:is(#content, body) .kz-stats--plain .kz-stat { border-left: 0; padding-left: 0; }

    :is(#content, body) .kz-media,
:is(#content, body) .kz-media--right { grid-template-columns: 1fr; gap: 18px; }
    :is(#content, body) .kz-media--right .kz-media-img,
:is(#content, body) .kz-media--right .kz-media-body { order: 0; }
    :is(#content, body) .kz-media--cover .kz-media-body { margin: -34px 12px 0; padding: 20px 18px; }

    :is(#content, body) .kz-quote { padding-left: 16px; }
    :is(#content, body) .kz-quote blockquote { font-size: 19px; }
    :is(#content, body) .kz-quote--doctor { grid-template-columns: 1fr; gap: 16px; text-align: center; padding: 22px 20px; }
    :is(#content, body) .kz-quote--doctor img { margin: 0 auto; }
    :is(#content, body) .kz-quote--doctor blockquote { font-size: 18px; }
    :is(#content, body) .kz-quote--patient { padding: 30px 20px 22px; }
    :is(#content, body) .kz-quote--patient blockquote { font-size: 18px; }

    :is(#content, body) .kz-steps { padding-left: 44px; }
    :is(#content, body) .kz-steps:before { left: 15px; }
    :is(#content, body) .kz-steps > li:before { left: -44px; width: 31px; height: 31px; line-height: 29px; font-size: 14px; }
    :is(#content, body) .kz-step-title { font-size: 16px; }
    :is(#content, body) .kz-steps p { font-size: 16px; }

    /* Vergleichstabelle wird zu Karten */
    :is(#content, body) .kz-compare { overflow-x: visible; }
    :is(#content, body) .kz-compare table,
:is(#content, body) .kz-compare thead,
:is(#content, body) .kz-compare tbody,
:is(#content, body) .kz-compare tr,
:is(#content, body) .kz-compare th,
:is(#content, body) .kz-compare td { display: block; width: auto; }
    :is(#content, body) .kz-compare thead { position: absolute; left: -9999px; }
    :is(#content, body) .kz-compare tbody tr {
        margin: 0 0 14px;
        padding: 14px 16px;
        border: 1px solid var(--kz-line);
        border-radius: var(--kz-r);
        background: var(--kz-paper-warm);
    }
    :is(#content, body) .kz-compare tbody th {
        padding: 0 0 10px;
        border-bottom: 1px solid var(--kz-line);
        font-size: 17px;
        font-weight: 400;
    }
    :is(#content, body) .kz-compare tbody td {
        padding: 10px 0 0;
        border-bottom: 0;
        font-size: 16px;
    }
    :is(#content, body) .kz-compare tbody td .kz-compare-label {
        display: block;
        font-size: 11px;
        letter-spacing: 1.8px;
        text-transform: uppercase;
        color: var(--kz-ink-mute);
        margin: 0 0 3px;
    }

    :is(#content, body) .kz-gallery,
:is(#content, body) .kz-gallery--4 { grid-template-columns: repeat(2, 1fr); gap: 8px; }

    :is(#content, body) .kz-cta { padding: 26px 20px; }
    :is(#content, body) .kz-cta .kz-cta-title { font-size: 21px; }
    :is(#content, body) .kz-cta--slim { flex-direction: column; align-items: flex-start; }
    :is(#content, body) a.kz-btn,
    :is(#content, body) .kz-btn { display: block; width: 100%; text-align: center; }
    :is(#content, body) .kz-cta-actions { width: 100%; }

    :is(#content, body) .kz-doc { grid-template-columns: 1fr; gap: 16px; text-align: center; padding: 20px; }
    :is(#content, body) .kz-doc img { margin: 0 auto; width: 132px; max-width: 132px !important; }

    /* Bildstrecke: horizontal scrollbar */
    :is(#content, body) .kz-strip-track {
        grid-auto-columns: 74%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
    }
    :is(#content, body) .kz-strip-track > li { scroll-snap-align: start; }
    :is(#content, body) .kz-strip-hint { display: block; }

    :is(#content, body) .kz-price { padding: 22px 20px; }
    :is(#content, body) .kz-price-value { font-size: 32px; }
    :is(#content, body) .kz-note { padding: 16px 18px; }
    :is(#content, body) .kz-toc { padding: 16px 18px; }
    :is(#content, body) .kz-vn-data { gap: 8px 18px; }
}

@media (max-width: 420px) {
    :is(#content, body) .kz-stats > li,
:is(#content, body) .kz-stat { flex: 1 1 100%; min-width: 100%; }
    :is(#content, body) .kz-gallery,
:is(#content, body) .kz-gallery--4 { grid-template-columns: 1fr; }
    :is(#content, body) .kz-strip-track { grid-auto-columns: 86%; }
}

/* ===========================================================================
   Einbettung in den Altbestand
   =========================================================================== */

/* Die Bundle-Regel "#content > article img { max-width:508px }" wuerde die
   Modulbilder beschneiden. */
#content > article .kz-block img,
#content > article [class*="kz-"] img {
    max-width: 100%;
}
#content > article .kz-doc img { max-width: 148px !important; }
#content > article .kz-quote--doctor img { max-width: 104px !important; }

/* Listenpunkte des Altbestands aus den Modul-Listen heraushalten. */
#content > article [class*="kz-"] ul,
#content > article [class*="kz-"] ol { list-style: none; }
#content > article .kz-faq-answer ul { list-style: disc; padding-left: 20px; }
#content > article .kz-faq-answer li { display: list-item; }

/* Die Ueberschriften des Bundles bringen im Artikel eine Unterlinie mit. */
#content > article .kz-block h2,
#content > article .kz-block h3,
#content > article .kz-block h4,
#content > article .kz-band h2,
#content > article .kz-band h3 { border: 0; }