/* ============================================================================
   DWKS — themen.css
   ----------------------------------------------------------------------------
   Seitenspezifisches Stylesheet (Template-Inhalte + CSS_PATCH).
   Voraussetzung: tokens.css.
   ============================================================================ */

/* === Block 1 aus Template === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}
/* Fix 3: Grundschriftgröße 16px */
body{font-family:'Segoe UI',system-ui,sans-serif;font-size:16px;background:var(--bg);color:#fff;line-height:1.6;min-height:100vh}
.page{display:none}.page.active{display:block}

/* ── NAV ── */
#nav{position:sticky;top:0;z-index:9000;display:flex;align-items:center;justify-content:center;
  background:#0c1e2f;border-bottom:2px solid var(--gold);padding:0 20px;height:76px;gap:6px;
  box-shadow:0 2px 12px rgba(0,0,0,.4)}
.nb{display:flex;align-items:center;gap:10px;flex-shrink:0;cursor:pointer;background:none;border:none;padding:0}
.nn{font-size:18px;font-weight:700;color:#fff;display:block;line-height:1.1}
.ns2{font-size:10px;color:#8899aa;letter-spacing:.12em;text-transform:uppercase;display:block;margin-top:0;line-height:1.25}
.nls{display:flex;align-items:center;gap:5px;overflow-x:visible;flex-wrap:nowrap}.nls::-webkit-scrollbar{display:none}
.nl{font-size:13px;font-weight:600;padding:6px 6px;border-radius:6px;color:#c8d6e5;flex-shrink:0;margin:0;
  white-space:nowrap;cursor:pointer;background:transparent;border:1px solid transparent;transition:all .15s}
.nl:hover{background:#8b1a1a;color:#fff;border-radius:6px}
.nl.active{background:#8b1a1a !important;color:#fff !important;border-color:#8b1a1a !important}
.nl.on{background:var(--bg4);border-color:rgba(255,255,255,.2);color:#fff}
.nl.cta{background:#1a3550;color:#fff;border:1px solid rgba(255,255,255,.2)}
.nl.cta:hover,.nl.cta.on{background:var(--s2h)}
.ndv{display:none}
@media(max-width:700px){.ns2{display:none}.nl{font-size:13px;padding:6px 6px}#nav{padding:0 12px}}

/* ── WRAP ── */
.wrap{max-width:820px;margin:0 auto;padding:0 0 20px}

/* ── PAGE HEADER ── */
.ph{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px;
  background:#1a3550;border-radius:var(--r);padding:14px 20px;border:1px solid rgba(255,255,255,.12)}
.ph-t{font-size:18px;font-weight:700;color:#fff}
.ph-b{font-size:13px;font-weight:600;padding:8px 16px;border-radius:6px;background:rgba(255,255,255,.15);
  color:#fff;cursor:pointer;border:1px solid rgba(255,255,255,.2);transition:all .14s}
.ph-b:hover{background:#8b1a1a;border-color:#8b1a1a;color:#fff}

/* ══ Fix 10: STARTSEITE – radikal einfach ═════════════════════════ */
/* Nur: Titel, kurzer Text, Suchfeld, 4 HT-Karten als Einstieg */
.home-hero{padding:36px 22px 28px;background:linear-gradient(160deg,var(--bg2),var(--bg));
  border-bottom:2px solid var(--gold)}
.home-hero-inner{max-width:700px;margin:0 auto;text-align:center}
.home-title{font-size:clamp(26px,4vw,40px);font-weight:800;color:#fff;margin-bottom:10px}
.home-title em{color:var(--gold);font-style:normal}
/* Fix 7: kein Button-Look */
.home-sub{font-size:15px;color:#c8d6e5;margin-bottom:24px;line-height:1.6}
.home-meta{font-size:13px;color:#8899aa;margin-bottom:6px}
/* Fix 9: Suche auf Startseite */
.home-search{position:relative;max-width:560px;margin:0 auto}
.home-search input{width:100%;padding:14px 42px 14px 18px;font-size:15px;
  border:2px solid #ccc;border-radius:10px;
  background:#fff;color:#1a1a18;outline:none;transition:all .15s}
.home-search input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,90,.15)}
.home-search input::placeholder{color:#7a8fa5}
.home-search .clr{position:absolute;right:14px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:#8899aa;font-size:18px;cursor:pointer;display:none}
.home-results{max-width:560px;margin:6px auto 0;display:none;flex-direction:column;gap:6px}
.home-results.open{display:flex}

/* Fix 4+5: Suchergebnisse = weiße Karten, schwarze Schrift */
.sr{background:#fff;border:1px solid #ddd;border-radius:8px;padding:12px 16px;
  cursor:pointer;transition:all .12s;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.sr:hover{background:#8b1a1a;color:#fff;cursor:pointer}
.sr:hover .sr-id,.sr:hover .sr-t,.sr:hover .sr-tag{color:#fff}
.sr:hover{background:#1a3550;border-color:#1a3550;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.sr-id{font-size:13px;font-weight:700;color:#1a3550;margin-bottom:2px;text-align:left}
.sr-t{font-size:15px;font-weight:600;color:#1a1a18;line-height:1.45;margin-bottom:4px;text-align:left}
.sr-tags{display:flex;gap:5px;flex-wrap:wrap}
.sr-tags span{font-size:11px;padding:2px 8px;border-radius:999px;background:#f0f0f0;color:#444}
.sr:hover .sr-id,.sr:hover .sr-t{color:#fff}
.sr:hover .sr-tags span{background:rgba(255,255,255,.2);color:#fff}
.sr-none{font-size:14px;color:#8899aa;text-align:center;padding:14px}

/* Fix 10: HT-Karten als Haupteinstieg */
.ht-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;
  max-width:1060px;margin:28px auto 0;padding:0 20px}
.ht-entry{border-radius:12px;overflow:hidden;cursor:pointer;transition:transform .12s;
  border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 12px rgba(0,0,0,.15)}
.ht-entry:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.25)}
/* Fix 2: Hintergrund = HT-Farbe */
.ht-entry-head{padding:16px 18px;color:#fff}
.ht-entry-name{font-size:15px;font-weight:700}
.ht-entry-sub{font-size:13px;opacity:.8;margin-top:3px}
/* Fix 4: weiße Karte, schwarze Schrift */
.ht-entry-body{padding:16px 18px;background:#fff;color:#1a1a18}
.ht-entry-row{display:flex;justify-content:space-between;margin-bottom:8px}
.ht-lbl{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.ht-lbl.k{color:var(--crit)}.ht-lbl.n{color:var(--org)}
.ht-val{font-size:20px;font-weight:800;color:#1a1a18}
.ht-urt{font-size:12px;color:#555}
/* Fix 8: Einfache Info-Zeile statt Monster-Bar */
.home-info{max-width:1060px;margin:20px auto 0;padding:0 20px;
  display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.home-info-item{font-size:13px;color:#8899aa}
.home-info-item b{color:#c8d6e5}

/* ── AKKORDEON (Prüftabelle) ── */
.acc{background:var(--bg2);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:16px;margin-bottom:16px}
.acc-lbl{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#c8d6e5;margin-bottom:12px}
.acc-grid{display:grid;grid-template-columns:210px 1fr;gap:12px;align-items:start}
@media(max-width:600px){.acc-grid{grid-template-columns:1fr}}
.ht-btns{display:flex;flex-direction:column;gap:5px}
/* Fix 2: HT-Buttons behalten ihre Farbe */
.htbtn{width:100%;text-align:left;padding:12px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.1);
  cursor:pointer;font-size:15px;font-weight:700;color:#fff;transition:all .14s;line-height:1.35}
.htbtn .cnt{font-size:12px;opacity:.78;display:block;margin-top:3px;font-weight:500}
.htbtn:not(.on){opacity:.55;border-color:transparent}
.htbtn:hover{opacity:1}
.htbtn.on{opacity:1;border-color:rgba(255,255,255,.35)}
.kat-panel{display:flex;flex-direction:column;gap:5px}
.kitem{border:1px solid rgba(255,255,255,.2);border-radius:8px;
  padding:12px 14px;cursor:pointer;transition:all .12s;color:#fff}
.kitem:hover{filter:brightness(1.15);border-color:rgba(255,255,255,.4)}
.kitem.open{filter:brightness(1.2);border-color:rgba(255,255,255,.5)}
.kname{font-size:15px;font-weight:600;color:#fff}
.kmeta{font-size:12px;color:rgba(255,255,255,.7);margin-top:3px}
.pbadges{flex-wrap:wrap;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1)}
/* Fix 1: P-Badges sicher rendern, kein undefined */
.pb{font-size:13px;font-weight:700;padding:7px 14px;border-radius:6px;cursor:pointer;
  color:#fff;border:1px solid rgba(255,255,255,.18);transition:all .14s}
.pb:hover{background:#8b1a1a;color:#fff;border-color:#8b1a1a}

/* ── DETAIL OVERLAY ── */
.dov{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:9500;display:none;
  align-items:flex-start;justify-content:center;padding:20px 12px;overflow-y:auto}
.dov.open{display:flex}
#dpan{background:var(--bg2);border:1px solid rgba(255,255,255,.12);border-radius:14px;
  width:100%;max-width:960px;margin:auto;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.dh{padding:16px 20px 14px;border-bottom:1px solid rgba(255,255,255,.1);background:#1a3550;border-radius:14px 14px 0 0}
.d-pid{font-size:13px;font-weight:700;color:rgba(255,255,255,.7);letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
.d-ttl{font-size:18px;font-weight:700;color:#fff;line-height:1.4}
.dmeta{display:inline-block;font-size:12px;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.15);color:#fff}
.dnav{display:flex;align-items:center;gap:8px;margin-top:10px}
.dn{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);border-radius:6px;
  padding:7px 16px;font-size:13px;color:#fff;cursor:pointer;transition:all .12s}
.dn:hover{background:rgba(255,255,255,.25)}.dn:disabled{opacity:.3;cursor:default}
.dpos{font-size:12px;color:rgba(255,255,255,.5)}
.dclose{position:absolute;top:14px;right:16px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);
  font-size:22px;cursor:pointer;color:#fff;line-height:1;padding:4px 9px;border-radius:6px;transition:all .12s}
.dclose:hover{background:rgba(255,255,255,.2)}
.dbody{padding:18px 20px 24px;display:flex;flex-direction:column;gap:14px}
/* Fix 5: Weiß auf dunklem Hintergrund */
.dsec{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:#c8d6e5;margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.08)}
/* Fix 4: Schwarzer Text auf weißen Karten */
.dcard{background:#fff;border-radius:8px;padding:14px 18px;font-size:15px;line-height:1.78;color:#1a1a18}
.dcard p{margin:0 0 10px}.dcard p:last-child{margin-bottom:0}
.dcard.red{border-left:4px solid var(--crit)}
.dcard.blue{border-left:4px solid var(--org)}
.dcard.amber{border-left:4px solid var(--gold)}
.d2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:600px){.d2{grid-template-columns:1fr}}
.ov-hint{font-size:11px;color:rgba(255,255,255,.3);text-align:center;padding:6px 0 2px}

/* Bewertungsbadges */
.bk{font-size:12px;padding:3px 11px;border-radius:999px;font-weight:600;white-space:nowrap;display:inline-block;min-width:90px;text-align:center}
.b-fe{background:#e8e8e8;color:#555}.b-fs{background:#fde8e0;color:#c0522a}
.b-ss{background:#fdf0da;color:#a06a00}.b-mi{background:#dbeafe;color:#1e5fa8}
.b-st{background:#ddd6ff;color:#4338ca}.b-vs{background:#3b1f8e;color:#d4c4ff}

/* Raster Akkordeon */
.rast{border:1px solid rgba(255,255,255,.1);border-radius:10px;overflow:hidden;margin-bottom:6px}
.rast-h{display:grid;grid-template-columns:140px 1fr 1fr auto;align-items:center;gap:10px;
  padding:12px 16px;cursor:pointer;background:var(--bg3);transition:background .12s;user-select:none}
.rast-h:hover{background:var(--bg4)}
.rast-kr{font-size:14px;font-weight:700;color:#fff}
.rast-sc{display:flex;align-items:center;gap:6px}
.rast-bar{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.12)}
.rast-bf{height:5px;border-radius:3px}
.rast-arr{font-size:13px;color:#fff;transition:transform .15s}
.rast-b{display:none;padding:16px 18px;background:#fff;border-top:1px solid #eee;color:#1a1a18}
.rast-b.open{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rast-lbl{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.rast-lbl.k{color:var(--crit)}.rast-lbl.n{color:var(--org)}
.rast-big{font-size:24px;font-weight:800;color:#1a1a18;margin-bottom:5px}
.rast-txt{font-size:14px;line-height:1.72;color:#1a1a18;margin-top:8px}
.rast-why{font-size:13px;color:#555;margin-top:6px;font-style:italic;padding-left:12px;border-left:2px solid #ddd}
@media(max-width:600px){.rast-b.open{grid-template-columns:1fr}.rast-h{grid-template-columns:1fr 1fr 1fr}}

/* Übersicht-Karten */
.ov-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:20px;align-items:stretch}
.ovc{border-radius:12px;overflow:hidden;background:#fff;border:1px solid #ddd}
.ovc-h{padding:16px 18px;color:#fff}
.ovc-name{font-size:18px;font-weight:700}
.ovc-sub{font-size:13px;opacity:.8;margin-top:2px}
.ovc-body{padding:16px 18px;color:#1a1a18}
.ovc-row{display:flex;justify-content:space-between;margin-bottom:10px}
.ovc-lbl{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.ovc-val{font-size:20px;font-weight:800;color:#1a1a18;margin:4px 0 2px}
.ovc-urt{font-size:12px;color:#555}
.ovc-kats{font-size:13px;color:#444;line-height:1.5;margin-top:8px;padding-top:8px;border-top:1px solid #eee}
.kcrit{color:var(--crit)}.korg{color:var(--org)}

/* Kategorien-Tabelle */
.ksec{margin-bottom:10px;border-radius:var(--r);overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.ksec-h{padding:12px 18px;color:#fff;cursor:pointer;font-size:15px;font-weight:700;display:grid;grid-template-columns:160px 160px 160px auto;align-items:center;user-select:none}
.ksec-col-r{text-align:right;font-size:13px;white-space:nowrap}
.ksec-h:hover{filter:brightness(0.85);background:#8b1a1a !important}
.ksec-arr{font-size:15px;transition:transform .15s}
.ksec-b{background:#fff;display:none}
.ktbl{width:100%;border-collapse:collapse;font-size:14px}
.ktbl th{background:#1a3550;color:#fff;padding:10px 14px;text-align:left;font-size:11px;
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.ktbl td{padding:10px 14px;border-bottom:1px solid #eee;color:#1a1a18}
.ktbl tr:hover td{background:#f8f8f8}
.kn{font-weight:600}.kc{text-align:center;white-space:nowrap}.kp{min-width:180px}
.sort-th{cursor:pointer}.sort-th:hover{background:rgba(255,255,255,.1)}
.dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;vertical-align:middle}

/* Methodik/Nutzung/Feedback Cards */
.sc{background:#fff;border:none;border-radius:var(--r);overflow:hidden;margin-bottom:14px}
.sc-head{background:#1a3550;color:#fff;font-size:15px;font-weight:700;padding:12px 18px}
.sc-head:hover{background:#8b1a1a;cursor:pointer}
.sc-body{padding:0;font-size:15px;line-height:1.78;color:#1a1a18}

/* Gesamtbild-Tabelle */
.gtbl{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border-radius:8px;overflow:hidden;border:none}
.gtbl th{background:#1a3550;color:#fff;padding:10px 14px;text-align:left;font-size:11px;
  text-transform:uppercase;letter-spacing:.06em}
.gtbl td{padding:10px 14px;border-bottom:1px solid #eee;color:#1a1a18}
.gtbl .sum-row td{background:#1a3550;color:#fff;font-weight:700;border:none}

/* Search auf Prüftabelle-Seite (gleicher Stil wie Startseite) */
.srch-wrap{background:var(--bg2);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:16px;margin-bottom:16px}
.srch-lbl{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#c8d6e5;margin-bottom:10px}

/* Footer */
.footer{position:fixed;bottom:0;left:0;right:0;z-index:9000;background:var(--bg2);border-top:1px solid rgba(255,255,255,.08);padding:8px 22px;text-align:center;font-size:11px;color:#8899aa;white-space:nowrap;overflow-x:auto}
body{padding-bottom:48px}
.footer a{color:#c8d6e5;text-decoration:underline}.footer a:hover{color:#fff}
.wm{position:fixed;bottom:6px;right:10px;font-size:9px;color:rgba(255,255,255,.06);pointer-events:none;user-select:none;z-index:9999}

.pb{font-size:13px;font-weight:700;padding:7px 14px;border-radius:6px;cursor:pointer;background:#fff;color:#1a1a18;border:1px solid #ccc;transition:all .14s}
.pb:hover{background:#f0f0f0;border-color:#999}

.rast-h{background:#e8edf2 !important}
.rast-h:hover{background:#dce3ea !important}
.rast-kr{color:#1a1a18 !important}
.rast-arr{color:#555 !important}

.rast{border:1px solid #ccc;border-radius:10px;overflow:hidden;margin-bottom:6px}

.hero-img{position:absolute;top:0;left:0;height:300px;width:35%;background-size:contain;background-position:left center;background-repeat:no-repeat;opacity:.35;pointer-events:none}

.kcrit{color:#b91c1c;font-weight:700;text-align:right}
.korg{color:#1a5e8c;font-weight:700;text-align:right}

.dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;vertical-align:middle}

.ht-entry{border-radius:12px;overflow:hidden;cursor:pointer;transition:transform .12s;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 12px rgba(0,0,0,.15)}
.ht-entry:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.25)}
.ht-entry-head{padding:18px 20px;color:#fff}
.ht-entry-name{font-size:20px;font-weight:700}
.ht-entry-sub{font-size:14px;opacity:.85;margin-top:4px}
.ht-entry-body{padding:16px 20px;background:#fff;color:#1a1a18}
.ht-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;max-width:1060px;margin:28px auto 20px;padding:0 20px}

.hero-banner{position:absolute;top:30px;right:20px;transform:none;width:35%;max-width:400px;opacity:.9;pointer-events:none;z-index:1}
@media(max-width:800px){.hero-banner{display:none}}

.gtbl td:not(:first-child){text-align:right}


.pnav{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:16px}
.pnav-btn{padding:7px 18px;background:#1a3550;border:1px solid rgba(255,255,255,.2);
  border-radius:6px;color:#fff;font-size:13px;font-weight:600;cursor:pointer;
  text-decoration:none;display:inline-block}
.pnav-btn:hover{background:#8b1a1a;border-color:#8b1a1a}
.pnav-btn.off{opacity:.25;pointer-events:none}
.pnav-pos{font-size:12px;color:#8899aa;min-width:80px;text-align:center}

.kcrit{color:#b91c1c !important;font-weight:700}
.korg{color:#1a5e8c !important;font-weight:700}
.gtbl td.kcrit{color:#b91c1c !important;font-weight:700;text-align:right}
.gtbl td.korg{color:#1a5e8c !important;font-weight:700;text-align:right}
#nav-inner{display:flex;align-items:center;justify-content:center;gap:0;width:100%;max-width:1000px;margin:0 auto}
#nb-home,#nb-tabelle{margin-left:14px !important}
#nb-kategorien,#nb-klaerung,#nb-interpretation,#nb-methodik,#nb-glossar,#nb-updates,#nb-feedback{margin-left:5px !important}
.p-sources-wrap + div[style*="margin-top:8px"]{max-width:820px;margin-left:auto;margin-right:auto}
#nav{position:fixed !important;top:0 !important;left:0 !important;right:0 !important;z-index:9000 !important}
body{padding-top:76px !important}
.ph{position:sticky !important;top:76px !important;z-index:8999 !important;background:#1a3550 !important;margin-bottom:20px !important;border-radius:var(--r) !important}

/* === Responsive === */
@media(max-width:900px){
  #nav-inner{padding:0 12px;gap:4px}
  .nl{font-size:12px;padding:5px 9px}
  #nb-home,#nb-tabelle{margin-left:10px !important}
  #nb-kategorien,#nb-klaerung,#nb-interpretation,#nb-methodik,#nb-glossar,#nb-updates,#nb-feedback{margin-left:4px !important}
  .ph{flex-wrap:wrap;gap:8px !important;padding:12px 14px !important}
  .ph-t{font-size:16px}
}
@media(max-width:700px){
  #nav{overflow-x:auto}
  #nav-inner{min-width:max-content;justify-content:center}
  .nl{font-size:11px;padding:4px 7px}
  #nb-home,#nb-tabelle{margin-left:6px !important}
  #nb-kategorien,#nb-klaerung,#nb-interpretation,#nb-methodik,#nb-glossar,#nb-updates,#nb-feedback{margin-left:3px !important}
  .p-raster-row{grid-template-columns:1fr !important;gap:4px !important;text-align:left}
  .p-detail-row{grid-template-columns:1fr !important}
  .p-sources-wrap{grid-template-columns:1fr !important}
  .p-block{padding:10px 12px !important}
  .p-scorecard{flex-direction:column}
  .p-scorecard .p-score-k,.p-scorecard .p-score-n{padding:10px 12px}
  .ph-t{font-size:14px}
  .pnav{flex-wrap:wrap;gap:4px}
  .pnav-btn{padding:5px 12px;font-size:12px}
  .d2{grid-template-columns:1fr !important}
}
@media(max-width:500px){
  .nn{font-size:14px}
  body{font-size:14px}
  .nl{font-size:10px;padding:3px 6px}
  .p-block-text,.sc-body{font-size:13px}
  .p-score-val{font-size:22px}
  .p-block-label{font-size:11px}
}

/* === Block 2 aus Template === */
.kat-section{margin-bottom:20px}
/* Professional header */
.kat-hb-header{padding:14px 20px;color:#fff;border-radius:var(--r) var(--r) 0 0;cursor:pointer;display:grid;grid-template-columns:1fr auto auto;align-items:center;column-gap:16px;user-select:none;transition:filter .12s}
.kat-hb-header:hover{filter:brightness(1.10)}
.kat-hb-header .hb-title{font-size:17px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;line-height:1.2}
.kat-hb-header .hb-badges{font-size:12px;font-weight:600;padding:5px 12px;background:rgba(255,255,255,.18);border-radius:999px;white-space:nowrap;backdrop-filter:blur(4px)}
.kat-hb-header .chev{font-size:14px;opacity:.75;transition:transform .15s}
.kat-section.collapsed .kat-body{display:none !important}
.kat-section.collapsed .chev{transform:rotate(-90deg)}
.kat-section.collapsed .kat-hb-header{border-radius:var(--r)}
.kat-section{overflow-x:auto}
.kat-table{width:100%;border-collapse:collapse;background:#fff;color:#1a1a18;font-size:11px;border-radius:0 0 var(--r) var(--r);overflow:hidden;table-layout:auto}
.kat-table th{background:#1a3550;color:#fff;padding:6px 4px;font-size:10px;font-weight:700;text-align:center;white-space:nowrap}
.kat-table td{padding:4px 6px;border-bottom:1px solid #eee;text-align:center}
.kat-table tr:last-child td{border-bottom:none}
.kat-table td.kat-name{text-align:left;font-weight:600;color:#1a3550}
.kat-table td.n{font-weight:700}
.kat-table td.crit-k{color:#b91c1c}
.kat-table td.crit-o{color:#1a5e8c}
.kat-table th.crit-k,.kat-table th.crit-o{color:#fff}
.kat-table td.diff{font-weight:700}
.kat-table td.neig{font-size:11px;padding:4px 8px;text-align:left;white-space:nowrap}
.kat-table td.neig.neig-k{color:#b91c1c}
.kat-table td.neig.neig-o{color:#1a5e8c}
.kat-table td.neig.neig-eq{color:#666}
.kat-table td.pid-list{text-align:left;font-size:10px;min-width:200px}
.kat-table td.pid-list .pid{color:#1a5e8c;text-decoration:none;margin-right:4px;white-space:nowrap}
.kat-table td.pid-list .pid:hover{text-decoration:underline;color:#8b1a1a}
.kat-table tr:hover{background:#f5f9fd}

/* === Block 3 aus Template === */
#nb-klaerung:hover{background:#8b1a1a !important;color:#fff !important;border-color:#8b1a1a !important}

/* === Block 4 aus Template === */
/* PAGE-PORTRAIT */
.page-portrait{display:inline-block;width:80px;height:80px;border-radius:50%;border:2px solid rgba(212,175,90,.6);box-shadow:0 2px 6px rgba(0,0,0,.4);background-color:#1a3550;background-image:url('../media/portraet.png');background-repeat:no-repeat;background-size:136px 136px;background-position:50% 18%;vertical-align:middle;flex:0 0 auto;text-decoration:none;box-sizing:content-box;transition:border-color .14s,transform .14s}
.page-portrait:hover{border-color:#ffd56b;transform:scale(1.05)}
@media(max-width:720px){.page-portrait{width:60px;height:60px;border-width:1.5px;background-size:103px 103px;background-position:50% 18%}}


/* === CSS_PATCH (vom Generator) === */
/* === KATEGORIEN-PATCHES (vom Generator gesetzt) === */
.ph{
  position:sticky !important; top:76px !important; z-index:8999 !important;
  background:#1a3550 !important;
  margin-top:0 !important; margin-bottom:14px !important;
  border-radius:0 0 var(--r) var(--r) !important;
  border-top:none !important;
  padding:0 !important;
  box-shadow:0 4px 10px rgba(0,0,0,.35) !important;
  display:block !important;
}
.ph-row1{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 18px;
}
.ph-row2{
  display:flex;gap:8px;
  padding:8px 18px 12px;
  border-top:1px solid rgba(255,255,255,.08);
}
.ph-text-stack{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.ph-t{font-size:18px;font-weight:700;color:#fff;line-height:1.2}
.ph-summary{
  font-size:12.5px;color:rgba(255,255,255,.78);line-height:1.5;
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
}
.ph-summary b{color:#fff;font-weight:800}
.ph-sum-sep{opacity:.45;margin:0 2px}
.ph-toggle-btn{
  font-size:12px;font-weight:600;padding:6px 14px;border-radius:5px;
  background:rgba(255,255,255,.12);color:#fff;cursor:pointer;
  border:1px solid rgba(255,255,255,.18);transition:all .14s;
}
.ph-toggle-btn:hover{background:rgba(255,255,255,.22)}
/* Pnav-Buttons: identische Höhe wie Zurück */
.pnav{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;align-self:center}
.pnav-btn{
  padding:8px 16px;background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff;
  font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;
  line-height:1;box-sizing:border-box;height:34px;
}
.pnav-btn:hover{background:rgba(139,26,26,.85);border-color:#8b1a1a}
.pnav-pos{display:inline-flex;align-items:center;height:34px;font-size:12px;color:#8899aa;min-width:60px;text-align:center;justify-content:center}
/* === Einheitliche Breite + identische Spalten in allen Tabellen === */
:root{--katw:1060px}
.wrap{display:flex !important;flex-direction:column;align-items:center;max-width:1060px !important;margin:0 auto !important}
.ph{width:var(--katw) !important;box-sizing:border-box}
.kat-section{margin-bottom:20px;overflow:visible !important;width:var(--katw)}
.kat-scroll{overflow-x:auto;border-radius:0 0 var(--r) var(--r)}
.kat-hb-header{display:flex !important;align-items:center;gap:18px;width:100%;box-sizing:border-box;padding:12px 16px}
.kat-hb-header .hb-title{flex:1 1 auto;min-width:0;font-weight:700;font-size:15px;text-transform:none;letter-spacing:.02em}
/* Badge-Klassen analog zur Klärungsgrade-Seite */
.kat-hb-header .hb-badges{font-size:11px;font-weight:700;padding:4px 10px;border-radius:4px;background:rgba(255,255,255,.18);white-space:nowrap;flex:0 0 auto}
.kat-hb-header .hb-badges-pf{width:165px;text-align:left;box-sizing:border-box}         /* "38 Prüffälle · 9 Kategorien" — auf max-Inhalt zugeschnitten */
.kat-hb-header .hb-badges-okb{background:rgba(0,0,0,.55);color:#fff;width:290px;text-align:left;box-sizing:border-box}  /* "Offener Klärungsbedarf 489 / 1.415 · 35 %" — auf max-Inhalt zugeschnitten */
/* Tabelle volle Container-Breite — Pillen-Spalten via td-Padding kompakt */
.kat-table{
  width:100% !important;
  table-layout:fixed !important;
}
.kat-table th,.kat-table td{
  padding-left:6px;padding-right:6px;
  overflow:hidden;text-overflow:ellipsis;
  word-wrap:break-word;
}
/* Spaltenbreiten — kompakt, Reihenfolge: Kategorie | PP | Prüffälle | Ø T | Ø K | Ø A | OKB % | V */
.kat-table th:nth-child(1),.kat-table td:nth-child(1){width:180px;text-align:left}                  /* Kategorie */
.kat-table th:nth-child(2),.kat-table td:nth-child(2){width:34px;text-align:center}                  /* PP */
.kat-table th:nth-child(3),.kat-table td:nth-child(3){width:auto;text-align:left;white-space:normal}  /* Prüffälle */
.kat-table th:nth-child(4),.kat-table td:nth-child(4){width:36px;text-align:center;padding-left:1px;padding-right:1px} /* Ø T */
.kat-table th:nth-child(5),.kat-table td:nth-child(5){width:36px;text-align:center;padding-left:1px;padding-right:1px} /* Ø K */
.kat-table th:nth-child(6),.kat-table td:nth-child(6){width:36px;text-align:center;padding-left:1px;padding-right:1px} /* Ø A */
.kat-table th:nth-child(7),.kat-table td:nth-child(7){width:50px;text-align:center;padding-left:1px;padding-right:1px} /* OKB % */
.kat-table th:nth-child(8),.kat-table td:nth-child(8){width:46px;text-align:center;padding-left:1px;padding-right:14px} /* V */
.kat-table td.pid-list .pid{display:inline-block;margin:1px 3px 1px 0;white-space:nowrap}

/* Toggle-Buttons unter Zurück */
.ph-toggles-stack .ph-toggle-btn{font-size:11px;padding:5px 10px;border-radius:5px;
  background:rgba(255,255,255,.12);color:#fff;cursor:pointer;
  border:1px solid rgba(255,255,255,.18);transition:all .14s;white-space:nowrap}
.ph-toggles-stack .ph-toggle-btn:hover{background:rgba(255,255,255,.22)}

/* Glossar-Info-Link im Page-Header */
.ph-glossar-link{display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;padding:6px 12px;border-radius:6px;
  background:rgba(212,175,90,.15);color:#ffd56b;text-decoration:none;
  border:1px solid rgba(212,175,90,.4);transition:all .14s;white-space:nowrap;
  margin-left:8px}
.ph-glossar-link:hover{background:#ffd56b;color:#1a3550;border-color:#ffd56b}

/* Hover-Rot auf Toggle-Buttons — DWKS-Standard */
.ph-toggles-stack .ph-toggle-btn:hover{background:#8b1a1a !important;border-color:#8b1a1a !important;color:#fff !important}

/* gl-info — i-Button im Stufen/Band/HG-Header (goldener Hintergrund, dunkler Text) */
.kat-hb-header .gl-info{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:#d4af5a;color:#1a1a18;
  font-weight:800;font-size:12px;text-decoration:none;flex:0 0 auto;
  border:1px solid rgba(0,0,0,.2);transition:all .14s;font-style:italic;font-family:Georgia,serif}
.kat-hb-header .gl-info:hover{background:#ffd56b;color:#1a3550;border-color:#1a3550;transform:scale(1.08)}

/* ph-t-Title + i-Button auf einer Zeile */
.ph-t-line{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.ph-t-line .info-i{margin-left:0;vertical-align:middle}

/* Toggle-Buttons immer untereinander gestapelt */
.ph-toggles-stack{display:flex !important;flex-direction:column !important;gap:6px !important;align-items:stretch !important;margin-left:8px}