/* Design-Tokens – gemeinsames Erscheinungsbild BDIU + BKS.
   Quellen: BDIU-Logokit und inkasso.de (Petrol #006982, Grautöne), BKS Corporate Design (Blau #006699, Text #231F20, Helvetica).
   Kontraste nach WCAG 2.1 AA geprüft (Text >= 4,5:1, Bedienelemente/Grafik >= 3:1). */
:root{
  /* Marken */
  --brand-bdiu:#006982; --brand-bks:#006699;
  /* Schrift: Systemschriften, keine Webfont-Dateien */
  --font-body:"Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --font-heading:var(--font-body);
  --fs-caption:.875rem; --fs-body:1rem; --fs-heading:1.125rem; --fs-title:1.5rem; --fw-medium:600; --fw-bold:700;
  /* Flächen und Text */
  --color-fg:#231F20; --color-fg-muted:#565E60; --color-heading:#1B3A44;
  --color-bg:#ffffff; --color-panel:#F4F6F7; --color-border-line:#D4D7D7; --color-border-control:#7F8688;
  --color-link:var(--brand-bks); --color-accent:var(--brand-bdiu); --color-focus:#231F20;
  --hero-bg:#00566B; --hero-fg:#ffffff; --hero-rule:rgba(255,255,255,.55);
  --color-popover:#ffffff; --shadow-popover:0 4px 16px rgba(0,0,0,.12);
  --color-ok:#2e7d32; --color-warn:#b26a00; --color-bad:#B4481A;
  /* Diagramme: divergierende Skala Petrol (Zustimmung/positiv) – Grau – Rostorange (Ablehnung/negativ).
     -ink ist die Schriftfarbe auf der jeweiligen Fläche, -edge die Kontur heller Stufen (>= 3:1 zur Umgebung). */
  --tone-pos:#006982;  --tone-pos-ink:#ffffff;  --tone-pos-edge:#006982;
  --tone-pos2:#4E9DB2; --tone-pos2-ink:#231F20; --tone-pos2-edge:#006982;
  --tone-neu:#CDD1D3;  --tone-neu-ink:#231F20;  --tone-neu-edge:#7F8688;
  --tone-neg2:#E58E5A; --tone-neg2-ink:#231F20; --tone-neg2-edge:#B4481A;
  --tone-neg:#B4481A;  --tone-neg-ink:#ffffff;  --tone-neg-edge:#B4481A;
  --tone-plain:#3E4A4C; --tone-plain-ink:#ffffff; --tone-plain-edge:#3E4A4C;
  --tone-na:#ffffff;   --tone-na-ink:#231F20;   --tone-na-edge:#7F8688;
  --chart-track:#DCE1E3; --chart-muted:var(--tone-neu);
  /* Abstände */
  --gap-xs:.25rem; --gap-sm:.5rem; --gap-md:1rem; --gap-lg:1.5rem; --gap-xl:2.5rem;
  --pad-xs:.25rem; --pad-sm:.5rem; --pad-md:.75rem; --pad-lg:1.25rem; --radius:4px;
}
html{overflow-x:clip}
html,body{margin:0;background:var(--color-bg);color:var(--color-fg)}
body{padding:1.5rem 16px 3rem}
.kz .quotes{display:block}

.kz{--w:72rem;max-width:var(--w);margin-inline:auto;font-family:var(--font-body);color:var(--color-fg);font-size:var(--fs-body);line-height:1.55}
.kz h1{font-family:var(--font-heading);font-weight:var(--fw-bold);color:var(--color-heading);font-size:clamp(1.5rem,1.1rem + 1.6vw,2.125rem);line-height:1.2;letter-spacing:-.005em;margin:0 0 var(--gap-xs)}
.kz h2{font-family:var(--font-heading);font-weight:var(--fw-bold);color:var(--color-heading);font-size:var(--fs-title);margin:var(--gap-xl) 0 var(--gap-sm);line-height:1.25}
.kz h3{font-size:var(--fs-heading);font-weight:var(--fw-bold);color:var(--color-heading);margin:0 0 2px;line-height:1.3}
.kz h4{font-size:var(--fs-body);font-weight:var(--fw-medium);margin:var(--gap-md) 0 var(--gap-xs)}
.kz p{margin:0 0 var(--gap-sm)}
.kz .lead{color:var(--color-fg-muted);max-width:52rem}
.kz .muted{color:var(--color-fg-muted)}
.kz .small{font-size:var(--fs-caption)}
.kz .prose{max-width:48rem}
.kz .prose ul{padding-left:1.2rem;margin:0 0 var(--gap-sm)}
.kz .prose li{margin-bottom:var(--gap-xs)}
.kz sup a{text-decoration:none;color:var(--color-fg-muted);font-size:.75em;padding-left:1px}
.kz .tabs{display:flex;gap:var(--gap-xs);flex-wrap:wrap;border-bottom:1px solid var(--color-border-line);margin:var(--gap-lg) 0 var(--gap-md);position:sticky;top:0;background:var(--color-bg);z-index:3;padding-top:var(--gap-xs)}
.kz .tab{appearance:none;background:none;border:0;border-bottom:3px solid transparent;padding:var(--pad-sm) var(--pad-md);font:inherit;color:var(--color-fg-muted);cursor:pointer;margin-bottom:-1px}
.kz .tab[aria-selected=true]{color:var(--color-heading);border-bottom-color:var(--color-accent);font-weight:var(--fw-medium)}
.kz .tabpage[hidden]{display:none}

.kz .card{border-top:2px solid var(--color-heading);padding:var(--pad-md) 0 0;min-width:0}

.kz .card .note{font-size:var(--fs-caption);color:var(--color-fg-muted);margin:0 0 var(--gap-md)}
.kz .filters{display:flex;flex-wrap:wrap;gap:var(--gap-sm) var(--gap-md);align-items:end;border-block:1px solid var(--color-border-line);padding:var(--pad-md) 0;margin:var(--gap-md) 0 var(--gap-lg)}
.kz .filters label{display:flex;flex-direction:column;font-size:var(--fs-caption);color:var(--color-fg-muted);gap:2px}
.kz .filters select{font:inherit;font-size:var(--fs-body);color:var(--color-fg);background:var(--color-bg);border:1px solid var(--color-border-control);border-radius:var(--radius);padding:3px 6px;max-width:100%}
.kz .filters .fl{font-size:var(--fs-caption);font-weight:var(--fw-medium);color:var(--color-fg);align-self:center}
.kz .filters .hint{font-size:var(--fs-caption);color:var(--color-fg-muted);flex-basis:100%}
.kz button.reset{font:inherit;font-size:var(--fs-caption);background:var(--color-bg);border:1px solid var(--color-border-control);border-radius:var(--radius);padding:3px 8px;cursor:pointer;color:var(--color-fg)}
.kz .chart{position:relative;min-height:3rem}
.kz .bars{display:flex;flex-direction:column;gap:var(--gap-sm)}
.kz .bar{display:block;width:100%;text-align:left;background:none;border:0;padding:2px 4px;margin:0 -4px;font:inherit;color:inherit;cursor:pointer;border-radius:var(--radius)}
.kz .bar:hover,.kz .bar:focus-visible{background:var(--color-bg)}
.kz .bar.sel{background:var(--color-bg);outline:1px solid var(--color-border-control)}
.kz .bar .lab{font-size:var(--fs-caption);line-height:1.3;display:block;margin-bottom:3px}
.kz .bar .row{display:flex;align-items:center;gap:var(--gap-sm)}
.kz .bar .track{flex:1;height:14px;background:var(--chart-track);border-radius:0 4px 4px 0;overflow:hidden;position:relative}
.kz .bar .fill{display:block;height:100%;border-radius:0 4px 4px 0;box-sizing:border-box}
.kz .bar .fill[hidden]{display:none}
.kz .bar .val{font-variant-numeric:tabular-nums;font-size:var(--fs-caption);min-width:5.5em;text-align:right;white-space:nowrap}
.kz .bar .val b{font-weight:var(--fw-medium);font-size:var(--fs-body)}
.kz .bar.zero .lab{font-weight:var(--fw-medium)}
.kz .lk{display:flex;flex-direction:column;gap:var(--gap-md)}
.kz .lk-item .q{font-size:var(--fs-caption);line-height:1.35;margin-bottom:9px}
.kz .lk-item .meta{font-size:var(--fs-caption);color:var(--color-fg-muted);font-variant-numeric:tabular-nums;margin-top:3px}
.kz .stack{display:flex;gap:2px;height:22px;border-radius:4px;overflow:visible;position:relative}
.kz .seg{border:0;padding:0;margin:0;height:100%;cursor:pointer;font:inherit;font-size:.75rem;font-weight:var(--fw-medium);font-variant-numeric:tabular-nums;box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden;min-width:0}
.kz .seg{border-radius:2px}
.kz .seg.sel{outline:3px solid var(--color-fg);outline-offset:1px;position:relative;z-index:1}
.kz .mean{position:absolute;top:-7px;width:0;pointer-events:none}
.kz .mean::before{content:"";position:absolute;left:-5px;border:5px solid transparent}
.kz .mean::before{top:0;border-top-color:var(--color-fg);border-bottom-width:0}
.kz .legend i.mean-key{width:0;height:0;border-radius:0;border:5px solid transparent;border-top-color:var(--color-fg);border-bottom-width:0}
.kz .tone-pos{background:var(--tone-pos);color:var(--tone-pos-ink);box-shadow:inset 0 0 0 1px var(--tone-pos-edge)}
.kz .tone-pos2{background:var(--tone-pos2);color:var(--tone-pos2-ink);box-shadow:inset 0 0 0 1px var(--tone-pos2-edge)}
.kz .tone-neu{background:var(--tone-neu);color:var(--tone-neu-ink);box-shadow:inset 0 0 0 1px var(--tone-neu-edge)}
.kz .tone-neg2{background:var(--tone-neg2);color:var(--tone-neg2-ink);box-shadow:inset 0 0 0 1px var(--tone-neg2-edge)}
.kz .tone-neg{background:var(--tone-neg);color:var(--tone-neg-ink);box-shadow:inset 0 0 0 1px var(--tone-neg-edge)}
.kz .tone-plain{background:var(--tone-plain);color:var(--tone-plain-ink);box-shadow:inset 0 0 0 1px var(--tone-plain-edge)}
.kz .tone-na{background:var(--tone-na);color:var(--tone-na-ink);box-shadow:inset 0 0 0 1px var(--tone-na-edge)}
.kz a{color:var(--color-link)}
.kz :focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
.kz .legend{display:flex;flex-wrap:wrap;gap:var(--gap-xs) var(--gap-md);font-size:var(--fs-caption);color:var(--color-fg-muted);margin:0 0 var(--gap-md)}
.kz .legend span{display:inline-flex;align-items:center;gap:5px}
.kz .legend i{width:12px;height:12px;border-radius:2px;display:inline-block;box-sizing:border-box}
.kz .tip{position:absolute;z-index:5;background:var(--color-popover);border:1px solid var(--color-border-line);border-radius:var(--radius);box-shadow:var(--shadow-popover);padding:var(--pad-xs) var(--pad-sm);font-size:var(--fs-caption);pointer-events:none;max-width:16rem;line-height:1.35}
.kz .tip .t{color:var(--color-fg-muted)}
.kz .few{font-size:var(--fs-caption);color:var(--color-fg-muted);padding:var(--pad-md) 0}
.kz .quotes{margin-top:var(--gap-md);border-top:1px solid var(--color-border-line);padding-top:var(--gap-sm)}
.kz .quotes summary{cursor:pointer;font-size:var(--fs-caption);font-weight:var(--fw-medium);list-style-position:inside}
.kz .quotes .chip{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-caption);border:1px solid var(--color-border-line);border-radius:999px;padding:1px 8px;margin:var(--gap-xs) 0;background:var(--color-bg);cursor:pointer;color:var(--color-fg);font-family:inherit}
.kz .qlist{display:flex;flex-direction:column;gap:var(--gap-sm);margin-top:var(--gap-sm);max-height:28rem;overflow:auto;padding-right:4px}
.kz .qitem{border-left:3px solid var(--color-border-line);padding:2px 0 2px var(--pad-sm)}
.kz .qitem .tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:3px}
.kz .qitem .tag{font-size:11px;color:var(--color-fg-muted);border:1px solid var(--color-border-line);border-radius:3px;padding:0 5px;font-variant-numeric:tabular-nums}
.kz .qitem .tag.on{color:var(--color-fg);border-color:var(--color-fg)}
.kz .qitem .ql{font-size:11px;color:var(--color-fg-muted);text-transform:uppercase;letter-spacing:.03em;margin-top:4px}
.kz .qitem .qt{font-size:var(--fs-caption);white-space:pre-line}
.kz .qempty{font-size:var(--fs-caption);color:var(--color-fg-muted)}
.kz .themes{margin:0 0 var(--gap-sm);padding-left:1.1rem;font-size:var(--fs-caption)}
.kz .themes li{margin-bottom:var(--gap-xs)}
.kz .fn{font-size:var(--fs-caption);color:var(--color-fg-muted);border-top:1px solid var(--color-border-line);margin-top:var(--gap-xl);padding-top:var(--gap-sm);max-width:48rem}
.kz .fn ol{padding-left:1.2rem;margin:0}
.kz .fn a{color:inherit}

.kz .callout{border-left:3px solid var(--color-accent);color:var(--color-heading);font-weight:var(--fw-medium);padding:var(--pad-xs) var(--pad-md);margin:var(--gap-md) 0;font-family:var(--font-heading);font-size:var(--fs-heading)}

/* Kopf mit beiden Verbandslogos, Fuß */
.kz .brandbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--gap-md) var(--gap-lg);padding-bottom:var(--gap-md);margin-bottom:var(--gap-lg);border-bottom:1px solid var(--color-border-line)}
.kz .brandbar a{display:block;line-height:0;border-radius:2px}
.kz .brandbar img{display:block;width:auto;height:var(--logo-h)}
.kz .brandbar .logo-bdiu{--logo-h:2rem}
.kz .brandbar .logo-bks{--logo-h:3.125rem}
@media (max-width:30rem){.kz .brandbar .logo-bdiu{--logo-h:1.25rem}.kz .brandbar .logo-bks{--logo-h:1.9rem}}
.kz .site-footer{margin-top:var(--gap-xl);padding-top:var(--gap-md);border-top:1px solid var(--color-border-line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--gap-sm) var(--gap-lg);font-size:var(--fs-caption);color:var(--color-fg-muted)}
.kz .site-footer p{margin:0}
.kz .site-footer nav{display:flex;gap:var(--gap-md)}
.kz .page{max-width:48rem}
.kz .page h1{margin-bottom:var(--gap-md)}
.kz .page .placeholder{background:var(--color-panel);border:1px dashed var(--color-border-control);border-radius:var(--radius);padding:var(--pad-lg);color:var(--color-fg-muted)}

/* Titelbereich: Foto (in Petrol eingefärbt) über die volle Fensterbreite, Kennzahlen rechts im Bild */
.kz .brandbar.flush{border-bottom:0;margin-bottom:0}
.kz .hero{position:relative;overflow:hidden;background:var(--hero-bg);color:var(--hero-fg);margin-inline:calc(50% - 50vw);padding:clamp(2.25rem,6vw,4rem) calc(50vw - 50%) clamp(2rem,5vw,3.5rem)}
.kz .hero-bg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 40%}
.kz .hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,24rem);gap:var(--gap-lg) clamp(2rem,5vw,4rem);align-items:end}
.kz .hero h1{color:var(--hero-fg);font-size:clamp(1.75rem,1.1rem + 2.6vw,2.5rem);line-height:1.12;letter-spacing:-.012em;max-width:21ch;margin:0}
.kz .hero .lead{color:var(--hero-fg);font-size:1.0625rem;line-height:1.5;max-width:38rem;margin:var(--gap-md) 0 0}
.kz .hero .sample{display:flex;flex-wrap:wrap;gap:var(--gap-xs) 1.25rem;margin:1.375rem 0 0;font-size:.875rem}
.kz .hero .sample span + span{padding-left:1.25rem;border-left:1px solid var(--hero-rule)}
.kz .findings{list-style:none;margin:0;padding:0;border-top:1px solid var(--hero-rule)}
.kz .findings li{display:grid;grid-template-columns:6.25rem 1fr;gap:var(--gap-md);align-items:baseline;padding:.8125rem 0;border-bottom:1px solid var(--hero-rule)}
.kz .findings .n{font-size:1.75rem;font-weight:var(--fw-bold);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.kz .findings .n small{font-size:.875rem;font-weight:400;margin-left:2px}
.kz .findings .l{font-size:.9375rem;line-height:1.35}
@media (max-width:56rem){.kz .hero-in{grid-template-columns:1fr}.kz .findings{max-width:30rem}}
@media (max-width:30rem){.kz .hero .sample span + span{padding-left:0;border-left:0}}

.kz{--col-gap:3.5rem;--col:calc((100% - var(--col-gap)) / 2)}

.kz .prose{max-width:var(--col)}

.kz .fn{max-width:var(--col)}

/* Überschriften: Kapitel, Unterabschnitt, Abbildungstitel klar abgestuft */
.kz h2{margin:3.5rem 0 var(--gap-sm)}
.kz .tabpage > h2:first-child,.kz .tabpage > .prose:first-child h2{margin-top:var(--gap-lg)}
.kz h3.prose,.kz h4{font-size:var(--fs-heading);font-weight:var(--fw-bold);color:var(--color-heading);line-height:1.3;margin:var(--gap-lg) 0 var(--gap-xs)}

.kz .card h3{font-size:var(--fs-body);color:var(--color-fg);margin-bottom:2px}

/* Flächen: Filter, wörtliche Freitexte, Kernaussage */

.kz .filters{background:var(--color-panel);border:0;padding:var(--pad-lg);margin:0;align-content:start}
.kz .card[data-type=texts]{background:var(--color-panel);border-top:0;padding:var(--pad-lg) var(--pad-lg) var(--gap-lg)}
.kz .card[data-type=texts] .quotes{border-top:0;margin-top:0;padding-top:0}
.kz .card[data-type=texts] .qlist{display:block;columns:2;column-gap:var(--col-gap);max-height:none;overflow:visible;padding-right:0}
.kz .card[data-type=texts] .qitem{break-inside:avoid;margin-bottom:var(--gap-md);border-left-color:var(--color-border-control)}
.kz .callout{border-left:0;background:var(--brand-bdiu);color:#fff;padding:var(--pad-lg);font-size:var(--fs-heading);line-height:1.45;margin:var(--gap-lg) 0}

@media (max-width:60rem){
  .kz{--col:48rem}
  
  .kz .card[data-type=texts] .qlist{columns:1}
}

.kz .filters .fl{flex-basis:100%;font-size:var(--fs-body)}
.kz .filters label{flex:1 1 11rem;min-width:0}
.kz .filters select{width:100%}

/* ---------- Abbildungen und Filter als einheitliche Flächen ----------
   Alles, was kein Fließtext ist, steht auf derselben hellgrauen Fläche mit demselben Innenabstand.
   Die Oberkante der Fläche liegt auf Höhe der Versalien der ersten Textzeile links daneben. */
.kz{--plate-pad:1.5rem;--plate-top:.4rem}
.kz .card,.kz .card[data-type=texts],.kz .filters{background:var(--color-panel);border:0;border-radius:0;padding:var(--plate-pad)}

.kz .card[style]{margin-bottom:0!important}
.kz .callout{padding:var(--plate-pad)}
.kz .card .note{margin-bottom:var(--gap-lg)}
.kz .filters .fl{font-weight:var(--fw-bold)}
.kz .quotes{border-top-color:var(--color-border-control)}
@media (max-width:30rem){.kz{--plate-pad:1rem}}
/* Filterfläche: Titel und Zurücksetzen in einer Zeile, darunter die Auswahlfelder */
.kz .filters{align-items:center}
.kz .filters .fl{order:0;flex:1 1 60%}
.kz .filters button.reset{order:1}
.kz .filters label{order:2;flex:1 1 40%}
.kz .filters .hint{order:3}

/* ---------- Tastatur, kleine Bildschirme ---------- */
.kz .skip{position:absolute;left:-999rem;top:0;background:var(--color-bg);color:var(--color-link);padding:var(--pad-sm) var(--pad-md);z-index:10}
.kz .skip:focus{left:var(--gap-sm);top:var(--gap-sm)}
.kz .tab:focus-visible{outline-offset:-3px}
.kz .hero :focus-visible{outline-color:#fff}
.kz .seg:focus-visible{outline-offset:1px;position:relative;z-index:2}
@media (max-width:40rem){
  .kz .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
  .kz .tab{flex:none;white-space:nowrap}
  .kz h2{font-size:1.3125rem}
  .kz .bar .val{min-width:4.5em}
}

/* ---------- Druck / PDF: alle Kapitel nacheinander, ohne Bedienelemente ---------- */
@media print{
  @page{margin:16mm 15mm}
  html{font-size:10.5pt}
  body{padding:0}
  .kz{--col:100%;max-width:none}
  .kz .tabs,.kz .filters,.kz .skip,.kz .tip,.kz .chip,.kz .qempty,.kz .hero-bg{display:none!important}
  .kz .tabpage[hidden]{display:block!important}
  .kz .tabpage + .tabpage{break-before:page}
  .kz .hero{background:none;color:var(--color-fg);margin-inline:0;padding:0 0 6mm;border-bottom:1.5pt solid var(--color-heading)}
  .kz .hero h1,.kz .hero .lead{color:var(--color-heading)}
  .kz .hero .lead{color:var(--color-fg)}
  .kz{--hero-rule:var(--color-border-control)}
  .kz .hero-in{grid-template-columns:1fr 1fr;align-items:start}
  
  .kz .prose,.kz .fn{max-width:none}
  .kz .card,.kz .callout,.kz .fill,.kz .track,.kz .seg,.kz .legend i{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .kz .card,.kz .lk-item,.kz .qitem,.kz .callout,.kz .bar{break-inside:avoid}
  .kz .card[data-type=texts]{break-inside:auto}
  .kz h2,.kz h3,.kz h4{break-after:avoid}
  .kz .qlist{max-height:none;overflow:visible}
  .kz a{color:inherit;text-decoration:none}
  .kz .fn a{text-decoration:underline}
  .kz .site-footer nav{display:none}
}
@media (max-width:40rem){
  .kz .filters .fl{flex-basis:100%}
  .kz .filters label{flex:1 1 100%}
  .kz .filters button.reset{order:3}
  .kz .filters .hint{order:4}
}

/* ==================================================================
   Variante „Befundtafel“: links eine Lesespalte mit dem abgestimmten Text,
   rechts eine mitlaufende Tafel, die immer die Abbildung(en) des gerade
   gelesenen Abschnitts zeigt – mit den Filtern oben und den Einzelrückmeldungen darin.
   Unter 64rem und im Druck stehen die Abbildungen im Textfluss nach ihrem Abschnitt. */
.kz{--panel-top:4.25rem;--panel-gap:3rem}
.kz .reader{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 var(--panel-gap);align-items:start;margin-top:var(--gap-md)}
.kz .reader .text{min-width:0}
.kz .reader .text > h2:first-child{margin-top:var(--gap-lg)}
.kz .reader .prose,.kz .reader .fn{max-width:none}
.kz .reader .sec > .card,.kz .reader .sec > .filters{margin:var(--gap-lg) 0}
.kz .reader .sec > .fn{margin-top:var(--gap-xl)}
.kz .reader .sec > h2:first-child{margin-top:var(--gap-xl)}
.kz .reader h3.prose{margin-top:var(--gap-lg)}
.kz .reader .sec[data-cont] > .prose:first-child{margin-top:0}
.kz .reader + h2{margin-top:var(--gap-xl)}

/* Die Tafel */
.kz .panel{position:sticky;top:var(--panel-top);max-height:calc(100vh - var(--panel-top) - 1rem);overflow:auto;scrollbar-width:thin;
  background:var(--color-panel);padding:0 var(--plate-pad) var(--plate-pad);box-sizing:border-box;min-width:0}
.kz .panel:empty{display:none}
.kz .reader.wide .sec > .card:not(.inline),.kz .reader.wide .sec > .filters{display:none}
.kz .panel .filters button.reset{order:3}
.kz .panel-head{position:sticky;top:0;z-index:2;background:var(--color-panel);padding:var(--plate-pad) 0 var(--gap-sm);margin:0 0 var(--gap-sm);border-bottom:1px solid var(--color-border-control)}
.kz .panel-nav{display:flex;flex-wrap:wrap;gap:var(--gap-xs);margin:0 0 var(--gap-sm)}
.kz .panel-nav button{font:inherit;font-size:var(--fs-caption);font-variant-numeric:tabular-nums;background:none;border:1px solid var(--color-border-line);border-radius:var(--radius);padding:1px 8px;cursor:pointer;color:var(--color-fg-muted)}
.kz .panel-nav button[aria-current=true]{background:var(--color-heading);border-color:var(--color-heading);color:#fff;font-weight:var(--fw-medium)}
.kz .panel-nav button:hover{border-color:var(--color-border-control);color:var(--color-fg)}
.kz .panel-sec{font-size:var(--fs-caption);color:var(--color-fg-muted);margin:0}
.kz .panel-sec b{color:var(--color-heading);font-weight:var(--fw-medium)}
.kz .panel .filters{padding:0;margin:0 0 var(--gap-md);background:none;border-bottom:1px solid var(--color-border-line);padding-bottom:var(--gap-md)}
.kz .panel .filters .fl{flex-basis:auto;flex:1 1 100%;font-size:var(--fs-caption)}
.kz .panel .filters label{flex:1 1 10rem}
.kz .panel .filters .hint{display:none}
.kz .panel .filters[data-active] .hint{display:block}
.kz .panel .card{padding:0;margin:0;background:none}
.kz .panel .card + .card{margin-top:var(--gap-lg);padding-top:var(--gap-lg);border-top:1px solid var(--color-border-control)}
.kz .panel .card .note{margin-bottom:var(--gap-md)}
.kz .panel .qlist{max-height:22rem}

/* Schmal: alles im Textfluss, die Tafel verschwindet */
@media (max-width:64rem){
  .kz .reader{grid-template-columns:minmax(0,1fr)}
  .kz .reader .prose,.kz .reader .fn{max-width:48rem}
  .kz .panel{display:none}
  .kz .reader .sec > .card{max-width:48rem}
}
@media print{
  .kz .reader{grid-template-columns:minmax(0,1fr)}
  .kz .panel{display:none!important}
  .kz .reader .sec > .card{display:block!important}
  .kz .reader .sec > .card{background:var(--color-panel);padding:var(--plate-pad)}
  .kz .reader .sec > .filters{display:none!important}
}

/* Tafel: weiche Überblendung beim Wechsel des Abschnitts */
.kz .panel-body{transition:opacity .24s ease}
.kz .panel-body.out{opacity:0;transition-duration:.16s}
@media (prefers-reduced-motion:reduce){.kz .panel-body{transition:none}}
/* Tafel höher als das Fenster: Rollbalken dauerhaft sichtbar */
.kz .panel{scrollbar-color:var(--color-border-control) transparent}
.kz .panel::-webkit-scrollbar{width:9px}
.kz .panel::-webkit-scrollbar-thumb{background:var(--color-border-control);border:2px solid var(--color-panel);border-radius:5px}
/* Wörtliche Änderungsvorschläge stehen in der Lesespalte */
.kz .reader .sec > .card.inline,.kz .reader .sec > .card.inline[data-type=texts]{background:none;padding:0;margin:var(--gap-md) 0 0}
.kz .reader .sec > .card.inline .qlist{columns:1}
.kz .reader .text .sec > h2:first-child{margin-top:var(--gap-xl)}
.kz .reader .text > .sec:first-child .prose > h2:first-child{margin-top:var(--gap-lg)}
/* Abbildungen, die im Überblick und im Fazit zusätzlich gezeigt werden, erscheinen im Druck nur an ihrer eigentlichen Stelle */
@media print{.kz .reader .sec > .card.dup{display:none!important}}
.kz .panel-nav[hidden]{display:none}

/* Lesespalte und Tafel liegen im selben Raster; die Tafel steht im Dokument hinter dem aktiven Abschnitt,
   bleibt aber in der rechten Spalte über die ganze Kapitelhöhe (wichtig für die Tab-Reihenfolge). */
@media (min-width:64.01rem){
  .kz .reader .text{display:contents}
  .kz .reader .text > *{grid-column:1}
  .kz .reader .panel{grid-column:2;grid-row:1 / span 80}
}
.kz .reader .sec,.kz .reader h2,.kz .reader h3{scroll-margin-top:4.5rem}
/* Abschnittsknöpfe: Kontur und Schrift mit ausreichendem Kontrast */
.kz .panel-nav button{border-color:var(--color-border-control);color:var(--color-fg);background:var(--color-bg)}
.kz .panel-nav button:hover{border-color:var(--color-heading)}

/* Unterseiten: schmaler Kopf mit demselben Bild */
.kz .hero-slim{padding-block:2.25rem 2rem}
.kz .hero-slim .hero-in{grid-template-columns:1fr}
.kz .page{padding-top:var(--gap-lg)}
/* Schmale Bildschirme: Titel passt in die Breite; zusätzlich gezeigte Abbildungen (Überblick, Fazit) entfallen wie im Druck */
@media (max-width:30rem){.kz .hero h1{font-size:1.5rem}}
@media (max-width:64rem){.kz .reader .sec > .card.dup{display:none}}

/* Filter kompakt: Trichter-Symbol, zwei Auswahlfelder mit der Bezeichnung im Feld, Zurücksetzen als Symbol (nur bei aktivem Filter) */
.kz .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.kz .filters.compact{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap-sm)}
.kz .filters.compact .fl{order:0;flex:none;display:flex;color:var(--color-fg-muted)}
.kz .filters.compact label{order:1;flex:1 1 9rem;min-width:0;display:block}
.kz .filters.compact select{width:100%;font-size:var(--fs-caption);padding:4px 6px;text-overflow:ellipsis}
.kz .filters.compact[data-active] select:not(:has(option[value=""]:checked)){border-color:var(--color-heading);box-shadow:inset 0 0 0 1px var(--color-heading)}
.kz .filters.compact button.reset{order:2;flex:none;display:flex;padding:5px;visibility:hidden}
.kz .filters.compact[data-active] button.reset{visibility:visible}
.kz .filters.compact .hint{order:3;display:none;flex-basis:100%}
.kz .filters.compact[data-active] .hint{display:block}
.kz .panel .filters.compact{margin-bottom:var(--gap-md);padding-bottom:var(--gap-sm)}
.kz .reader .sec > .filters.compact{padding:var(--pad-md)}
@media (max-width:40rem){.kz .filters.compact label{flex:1 1 6.5rem}.kz .filters.compact button.reset{order:2}.kz .filters.compact .hint{order:3}}

/* Klickbare Balken und Segmente: Hinweis unter der Abbildung, deutlichere Reaktion beim Überfahren */
.kz .clickhint{font-size:var(--fs-caption);color:var(--color-fg-muted);margin:var(--gap-sm) 0 0}
.kz .bar:not(:disabled):hover .track,.kz .bar:not(:disabled):focus-visible .track{box-shadow:0 0 0 1px var(--color-heading)}
.kz .seg:hover{outline:2px solid var(--color-fg);outline-offset:1px;position:relative;z-index:1}
.kz .bar:disabled{cursor:default}
/* Tafelkopf: nur die Abschnittsknöpfe */
.kz .panel-nav{margin-bottom:0}
.kz .panel-head:has(.panel-nav[hidden]){padding-bottom:0;margin-bottom:0;border-bottom:0}
/* Kategorie über Freitexten in normaler Schreibweise */
.kz .qitem .ql{text-transform:none;letter-spacing:0;font-size:var(--fs-caption);font-weight:var(--fw-medium);color:var(--color-fg)}
/* Einzelrückmeldungen in der Tafel ohne eigene Scrollbox */
.kz .panel .qlist{max-height:none;overflow:visible;padding-right:0}
@media print{.kz .clickhint{display:none}}
/* Kennzahlen im Kopf: Zahl und Text vertikal mittig, „von …“ in allen Zeilen an derselben Stelle */
.kz .findings li{align-items:center}
.kz .findings .n > span:first-child{display:inline-block;min-width:1.2em}
.kz .nb{white-space:nowrap}
@media print{.kz .findings li{align-items:center}}
.kz .findings .n > span:first-child{text-align:center}

/* Sprachumschalter oben rechts im Titelbild */
.kz .lang{position:absolute;z-index:1;top:.75rem;right:max(16px,calc((100vw - 72rem) / 2));display:flex;gap:.875rem;font-size:var(--fs-caption)}
.kz .lang a{color:var(--hero-fg);text-decoration:none;padding:2px 0;border-bottom:2px solid transparent;opacity:.85}
.kz .lang a:hover{opacity:1;border-bottom-color:var(--hero-rule)}
.kz .lang a[aria-current=true]{opacity:1;font-weight:var(--fw-bold);border-bottom-color:var(--hero-fg)}
@media print{.kz .lang{display:none}}
@media (max-width:56rem){.kz .hero:has(.lang){padding-top:3.25rem}}

/* PDF/Druck: zugeklappte Einzelrückmeldungen sind dort tote Bedienelemente und entfallen */
@media print{.kz .quotes:not([open]){display:none}}
/* PDF/Druck: Titelblock einspaltig, Kennzahlen darunter in zwei Spalten */
@media print{
  @page{size:A4;margin:16mm 15mm 18mm}
  .kz .brandbar .logo-bdiu{--logo-h:1.7rem}
  .kz .brandbar .logo-bks{--logo-h:2.6rem}
  .kz .hero-in{grid-template-columns:1fr;gap:var(--gap-md)}
  .kz .hero h1{max-width:none;font-size:1.9rem}
  .kz .hero .lead{max-width:none}
  .kz .findings{display:grid;grid-template-columns:1fr 1fr;column-gap:2.5rem;max-width:none;border-top:0}
  .kz .findings li{border-top:1px solid var(--hero-rule);border-bottom:0}
}

/* PDF-Download im Titelbild */
.kz .hero .dl{margin:1.25rem 0 0}
.kz .btn-pdf{display:inline-flex;align-items:center;gap:.5rem;font-size:.9375rem;font-weight:var(--fw-medium);color:var(--hero-fg);text-decoration:none;border:1.5px solid var(--hero-fg);border-radius:var(--radius);padding:.5rem .875rem;line-height:1.2}
.kz .btn-pdf:hover{background:var(--hero-fg);color:var(--hero-bg)}
@media print{.kz .hero .dl{display:none}}

/* PDF/Druck folgt dem Word-Dokument: ohne die wörtlichen Änderungsvorschläge und ohne Hinweise zur interaktiven Fassung */
@media print{
  .kz .reader .sec:has(> .card.inline),.kz .screen-only{display:none!important}
}

/* Offizielles BKS-Logo (SVG von bks-ev.de, anderes Seitenverhältnis als die frühere PNG-Fassung) */
.kz .brandbar .logo-bks{--logo-h:2.5rem}
@media (max-width:30rem){.kz .brandbar .logo-bks{--logo-h:1.45rem}}
@media print{.kz .brandbar .logo-bks{--logo-h:2.1rem}}
.kz .seg:disabled{cursor:default}.kz .seg:disabled:hover{outline:0}

/* Anmeldeseite */
.kz .gate{min-height:calc(100vh - 9rem);display:flex;align-items:center}
.kz .gate-in{position:relative;max-width:34rem}
.kz .gate .lead{margin-top:var(--gap-md)}
.kz .gate-form{margin-top:var(--gap-lg)}
.kz .gate-form label{display:block;font-size:var(--fs-caption);font-weight:var(--fw-medium);margin-bottom:var(--gap-xs)}
.kz .gate-row{display:flex;gap:var(--gap-sm);flex-wrap:wrap}
.kz .gate-row input{flex:1 1 14rem;min-width:0;font:inherit;font-size:1rem;padding:.6rem .75rem;border:1.5px solid var(--hero-fg);border-radius:var(--radius);background:#fff;color:var(--color-fg)}
.kz .gate-row button{font:inherit;font-size:.9375rem;font-weight:var(--fw-medium);padding:.6rem 1.1rem;border:1.5px solid var(--hero-fg);border-radius:var(--radius);background:var(--hero-fg);color:var(--hero-bg);cursor:pointer}
.kz .gate-row button:hover{background:transparent;color:var(--hero-fg)}
.kz .gate-msg{margin:var(--gap-sm) 0 0;font-size:.9375rem;font-weight:var(--fw-medium);background:#fff;color:#8A2F0B;padding:.4rem .75rem;border-radius:var(--radius);display:inline-block}
.kz .gate-msg[hidden]{display:none}