/* ============================================================================
   DWKS — einordnung.css
   ----------------------------------------------------------------------------
   Seitenspezifisches Stylesheet. Lädt nur tokens.css als Voraussetzung.
   Keine Klassen-Konflikte mit anderen Seiten (jede Seite eigenes CSS).
   ============================================================================ */

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

html{scroll-behavior:smooth}
body{font-family:'Segoe UI',system-ui,sans-serif;font-size:16px;background:var(--bg);color:#fff;line-height:1.6;min-height:100vh;padding-top:76px;padding-bottom:48px}

#nav{position:fixed;top:0;left:0;right: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)}
#nav-inner{display:flex;align-items:center;justify-content:center;gap:0;width:100%;max-width:1100px;margin:0 auto}
.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}
.nl{font-size:13px;font-weight:600;padding:6px 6px;border-radius:6px;color:#c8d6e5;flex-shrink:0;
  white-space:nowrap;cursor:pointer;background:transparent;border:1px solid transparent;transition:all .15s}
.nl:hover{background:#8b1a1a;border-color:#8b1a1a;color:#fff}
.nl.active{background:#8b1a1a !important;color:#fff !important;border-color:#8b1a1a !important}
#nb-home,#nb-tabelle{margin-left:14px}
#nb-kategorien,#nb-klaerung,#nb-interpretation,#nb-methodik,#nb-glossar,#nb-updates,#nb-feedback{margin-left:5px}

.wrap{max-width:1060px;margin:0 auto;padding:0 18px 20px}
.ph{background:#1a3550;border-radius:var(--r);border:1px solid rgba(255,255,255,.12);margin-bottom:22px;
  position:sticky;top:76px;z-index:8999}
.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);
  font-size:12.5px;color:rgba(255,255,255,.78);align-items:center;flex-wrap:wrap}
.ph-toggle-btn{font-size:12px;font-weight:600;padding:5px 12px;border-radius:6px;
  background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2);
  cursor:pointer;transition:all .14s;text-decoration:none;display:inline-block;line-height:1.3}
.ph-toggle-btn:hover{background:#8b1a1a;border-color:#8b1a1a}
.ph-info-hint{margin-left:auto;align-self:center;font-size:12px;color:#cfd8e3}
.ph-info-hint a{color:#ffd56b;text-decoration:none;font-weight:600;border-bottom:1px dotted rgba(255,213,107,.5)}
.ph-info-hint a:hover{color:#fff;border-bottom-color:#fff}
@media (max-width:640px){.ph-row2{flex-wrap:wrap}.ph-info-hint{margin-left:0;width:100%;padding-top:4px}}
.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-pct-pill{display:inline-block;padding:2px 9px;border-radius:4px;background:#d4af5a;color:#1a1a18;font-weight:700;margin-left:8px;font-size:12px}
.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%;flex:0 0 auto;text-decoration:none;
  transition:border-color .14s,transform .14s}
.page-portrait:hover{border-color:#ffd56b;transform:scale(1.05)}
.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;text-decoration:none}
.ph-b:hover{background:#8b1a1a;border-color:#8b1a1a;color:#fff}
.pnav{display:flex;align-items:center;gap:8px}
.pnav-btn{padding:7px 14px;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-pos{font-size:12px;color:#8899aa;min-width:70px;text-align:center}

/* Sektionen */
.sec{margin:0 0 26px}
.sec-h{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);margin:0 0 10px;padding:0 4px}
.sec.coll{margin-top:10px}
.sec.coll .sec-h{background:linear-gradient(135deg,var(--bg4),#2c5a7e);color:#fff;
  padding:14px 22px;border-radius:var(--r);
  cursor:pointer;user-select:none;display:flex;align-items:center;gap:12px;
  margin:0 0 10px;transition:filter .14s;
  border:1px solid rgba(212,175,90,.45);border-left:4px solid var(--gold);
  box-shadow:0 4px 14px rgba(0,0,0,.22)}
.sec.coll .sec-h:hover{filter:brightness(1.15)}
.sec.coll .sec-h > span:first-child{font-size:14px;font-weight:800;letter-spacing:.04em;text-transform:none;color:#fff}
.sec.coll .sec-h .sec-toggle{margin-left:auto;font-size:13px;opacity:.85;transition:transform .18s;color:var(--gold);text-transform:none}
.sec.coll.collapsed .sec-h{margin-bottom:0}
.sec.coll.collapsed .sec-h .sec-toggle{transform:rotate(-90deg)}
.sec.coll.collapsed > *:not(.sec-h){display:none}
.sec-i{background:#fff;border-radius:var(--r);padding:18px 22px;color:#1a1a18;line-height:1.72;font-size:15px}
.sec-i p{margin:0 0 10px}.sec-i p:last-child{margin-bottom:0}
.sec-i b{color:#1a3550}
.sec-i .accent{background:#fff7e1;border-left:4px solid var(--gold);padding:12px 16px;border-radius:6px;margin:10px 0}
.sec-i .accent p{margin:0 0 6px}.sec-i .accent p:last-child{margin-bottom:0}
.lbl p{margin:0 0 4px;line-height:1.55}
.lbl p:last-child{margin-bottom:0}

/* Stufen-Karten im Kategorien-Stil */
.hg-grid{display:flex;flex-direction:column;gap:0}
.kat-section{margin-bottom:14px;border-radius:var(--r);overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.kat-hb-header{display:flex;align-items:center;gap:18px;width:100%;box-sizing:border-box;
  padding:12px 16px;cursor:pointer;user-select:none;color:#fff;transition:filter .12s}
.kat-hb-header:hover{filter:brightness(1.10)}
.kat-hb-header .hb-title{flex:1 1 auto;min-width:0;font-weight:700;font-size:15px;letter-spacing:.02em;text-transform:none;text-align:left}
.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;text-align:left}
.kat-hb-header .hb-badges-pf{width:auto;min-width:200px;box-sizing:border-box;margin-left:auto;text-align:center}
.kat-hb-header .chev{font-size:14px;opacity:.85;transition:transform .18s;flex:0 0 auto}
.kat-section.collapsed .kat-body{display:none !important}
.kat-section.collapsed .chev{transform:rotate(-90deg)}
.kat-glossar-link{display:inline-block;margin-top:14px;padding:8px 14px;border-radius:6px;
  background:#1a3550;color:#fff;text-decoration:none;font-size:13px;font-weight:600;
  border:1px solid rgba(212,175,90,.45);transition:all .14s}
.kat-glossar-link:hover{background:#8b1a1a;border-color:#8b1a1a;color:#fff}
.kat-glossar-link::before{content:"→ "}
.kat-body{background:#fff;color:#1a1a18}
@media(max-width:820px){.kat-hb-header{flex-wrap:wrap;gap:8px}.kat-hb-header .hb-title{flex:0 0 100%}.kat-hb-header .hb-badges-pf,.kat-hb-header .hb-badges-okb{width:auto}}

/* Tabellen-Stil aus themen.html */
.kat-scroll{overflow-x:auto;border-radius:var(--r)}
.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:fixed}
.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;vertical-align:middle}
.kat-table tr:last-child td{border-bottom:none}
.kat-table tr.kat-row{cursor:pointer;transition:background .12s}
.kat-table tr.kat-row:hover td{background:#8b1a1a !important;color:#fff !important}
.kat-table tr.kat-row:hover td .pid{background:rgba(255,255,255,.18) !important;color:#fff !important}
.kat-table tr.kat-row:hover td .kat-hg,
.kat-table tr.kat-row:hover td .kat-kat{color:#fff !important}
.kat-table tr:hover{background:#f5f9fd}
.kat-table .kc{text-align:center;white-space:nowrap}
.kat-table td.kat-krit{font-size:12px;color:#1a1a18;line-height:1.45;min-width:280px;max-width:520px}
.kat-table .kat-hg{font-size:11px;font-weight:700;color:#1a3550}
.kat-table .kat-kat{font-size:11px;color:#555}
/* Pid-Pillen identisch zu Offene Fragen (klaerungsgrade): dunkles Marineblau, weiße Schrift */
.kat-table .pid{display:inline-block;padding:2px 7px;background:#1a3550;color:#fff;border-radius:4px;font-weight:700;font-size:11px;text-decoration:none}
.kat-table .pid:hover{background:#2a5575;color:#fff}
/* Spaltenbreiten — 11 Spalten (HG-Klartext und Typ ergänzt 2026-05-03). Werte angeglichen an offeneFragen.css. */
.kat-table th:nth-child(1),.kat-table td:nth-child(1){width:60px}                                  /* PF-ID */
.kat-table th:nth-child(2),.kat-table td:nth-child(2){width:54px;text-align:center}                /* HG-Code */
.kat-table th:nth-child(3),.kat-table td:nth-child(3){width:110px;text-align:left !important}     /* Hauptgruppe (Klartext, NEU) */
.kat-table th:nth-child(4),.kat-table td:nth-child(4){width:170px;text-align:left !important}      /* Kategorie */
.kat-table th:nth-child(5),.kat-table td:nth-child(5){width:auto;text-align:left !important}      /* Kritik (Kurztext) */
.kat-table th:nth-child(6),.kat-table td:nth-child(6){width:36px;text-align:center;padding-left:1px;padding-right:1px} /* T */
.kat-table th:nth-child(7),.kat-table td:nth-child(7){width:36px;text-align:center;padding-left:1px;padding-right:1px} /* K */
.kat-table th:nth-child(8),.kat-table td:nth-child(8){width:36px;text-align:center;padding-left:1px;padding-right:1px} /* A */
.kat-table th:nth-child(9),.kat-table td:nth-child(9){width:50px;text-align:center;padding-left:1px;padding-right:1px} /* OKB % */
.kat-table th:nth-child(10),.kat-table td:nth-child(10){width:46px;text-align:center;padding-left:1px;padding-right:1px} /* V */
.kat-table th:nth-child(11),.kat-table td:nth-child(11){width:36px;text-align:center;padding-left:1px;padding-right:14px} /* Typ (NEU) */
/* T=5-Sternchen: kleine Marke oben rechts am Badge, "5" bleibt mittig zentriert */
.kat-table .kc .t5-star{position:absolute;top:-5px;right:-5px;color:#b91c1c;font-size:9px;line-height:1;background:#fff;border-radius:50%;padding:1px 2px;box-shadow:0 0 0 1px #b91c1c}
.kat-table .kc .t5-wrap{position:relative;display:inline-block}
.kat-table .hg-name{font-size:11px;color:#1a3550;font-weight:600;line-height:1.3}
.kat-table td.kat-cell{font-size:11px;color:#1a1a18;text-align:left !important;vertical-align:top}
.kat-table td.kat-krit{font-size:11px;color:#1a1a18;line-height:1.4;text-align:left !important;vertical-align:top}
.kat-table td.hg-cell{vertical-align:middle}

.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}
.footer a{color:#c8d6e5;text-decoration:underline}.footer a:hover{color:#fff}

@media(max-width:900px){#nav-inner{padding:0 8px;gap:4px}.nl{font-size:12px;padding:5px 9px}}
@media(max-width:700px){#nav{overflow-x:auto}#nav-inner{min-width:max-content;justify-content:flex-start}.nl{font-size:11px;padding:4px 7px}.ns2{display:none}}

/* 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}