/*! sophia · © 2026 Rico Pinzke · Alle Rechte vorbehalten · unerlaubte Nutzung oder Vervielfältigung untersagt */
/* ============================================================================
   sophia — GLOBALES Stylesheet. Theme (Dunkel/Teal), Glass-Header + Navigation,
   Seitenfuß und die von mehreren Seiten geteilten Bausteine (Karten-Seiten,
   Text-/Rechtsseiten). Seitenspezifisches liegt in public/css/<seite>.css.
   EIN Quellort für Theme + Navigation.
   ============================================================================ */
:root{--bg:#0f1720;--panel:#16212e;--ink:#e7edf3;--mut:#8aa0b2;--line:#26384a;--teal:#1d9e75;--blue:#3a7bd5;--bad:#ff5a44;--good:#27c065;}
*{box-sizing:border-box}
/* schlanke, dezente Scrollbalken (Firefox + WebKit/Edge/WebView2) */
*{scrollbar-width:thin;scrollbar-color:#314659 transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#2a3c4e;border-radius:6px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#3a546b}
::-webkit-scrollbar-corner{background:transparent}
html,body{margin:0}
body{font-family:system-ui,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
a{color:var(--teal)}
/* Visuell versteckt, aber für Screenreader & Suchmaschinen sichtbar (barrierefreies/SEO-h1). */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Überschriften in der Info-Pille (h2/h3 unter dem seitenweiten h1) — kompakt fürs
   dunkle Panel, gibt Crawlern eine saubere Gliederung der Seitenbeschreibung. */
.infobox h2{font-size:14px;font-weight:700;color:var(--ink);margin:0 0 7px;line-height:1.3;letter-spacing:.01em}
.infobox h3{font-size:12px;font-weight:700;color:var(--ink);margin:13px 0 6px;line-height:1.3}
.infobox h2:first-child,.infobox h3:first-child{margin-top:0}

/* ===== Glass-Header + Top-Navigation (durchgängig auf ALLEN Seiten) =====
   Sticky, durchscheinend + Unschärfe (Glas): die Seite fließt darunter durch. */
.tnav{position:sticky;top:0;z-index:2000;display:flex;align-items:center;gap:3px;height:60px;padding:0 20px;background:rgba(13,20,29,.66);backdrop-filter:saturate(150%) blur(16px);-webkit-backdrop-filter:saturate(150%) blur(16px);border-bottom:1px solid rgba(38,56,74,.55)}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){ .tnav{background:#0b121b} }
.tnav .brand{font-weight:700;font-size:17px;color:#fff;margin-right:18px;letter-spacing:.01em;display:flex;align-items:center;gap:8px;text-decoration:none}
.tnav .brand .dot{width:10px;height:10px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px rgba(29,158,117,.22)}
.tnav .nlinks{display:flex;align-items:center;gap:3px;min-width:0}
.tnav a.nl{color:var(--mut);text-decoration:none;font-size:13px;padding:7px 13px;border-radius:8px;white-space:nowrap}
.tnav a.nl:hover{color:var(--ink);background:#16212e}
.tnav a.nl.active{color:#fff;background:var(--teal)}
.tnav .spacer{flex:1}
.tnav .tag{color:var(--mut);font-size:11px}
@media(max-width:1100px){ .tnav .tag{display:none} }   /* dekorativer Zusatz weicht der Nav */
/* Hamburger-Toggle (reiner CSS-Checkbox-Hack) — auf Desktop ausgeblendet */
.tnav .navtog{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.tnav .navburger{display:none}
/* ===== Mobile-Navigation: echtes Menü — Hamburger + aufklappendes Glass-Dropdown ===== */
@media(max-width:900px){
  .tnav{height:56px;padding:0 14px;gap:0}
  .tnav .brand{font-size:16px;margin-right:0}
  .tnav .spacer,.tnav .tag{display:none}
  /* Hamburger rechts */
  .tnav .navburger{display:flex;flex-direction:column;justify-content:center;gap:5px;margin-left:auto;width:44px;height:44px;cursor:pointer;border-radius:9px}
  .tnav .navburger span{display:block;width:22px;height:2px;margin:0 auto;background:var(--ink);border-radius:2px;transition:transform .22s ease,opacity .18s ease}
  .tnav .navburger:hover{background:#16212e}
  .tnav .navtog:checked + .navburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .tnav .navtog:checked + .navburger span:nth-child(2){opacity:0}
  .tnav .navtog:checked + .navburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .tnav .navtog:focus-visible + .navburger{outline:2px solid var(--teal);outline-offset:2px}
  /* Dropdown-Panel unter der Leiste, standardmäßig zu */
  .tnav .nlinks{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:2px;align-items:stretch;
    padding:8px;background:rgba(11,18,27,.98);backdrop-filter:saturate(150%) blur(16px);-webkit-backdrop-filter:saturate(150%) blur(16px);
    border-bottom:1px solid var(--line);box-shadow:0 14px 30px rgba(0,0,0,.45);
    max-height:calc(100dvh - 56px);overflow-y:auto;
    transform-origin:top;transform:scaleY(0);opacity:0;visibility:hidden;transition:transform .2s ease,opacity .2s ease,visibility .2s}
  .tnav .navtog:checked ~ .nlinks{transform:scaleY(1);opacity:1;visibility:visible}
  .tnav .nlinks a.nl{width:100%;padding:13px 14px;font-size:15px;border-radius:9px}
  @media(prefers-reduced-motion:reduce){ .tnav .nlinks{transition:none} }
}

/* Inhalts-Bereich: Karte füllt komplett (#wrap), Standardseiten scrollen (.page) */
#wrap{position:relative}
.page{padding:22px 26px}
.page h1{font-size:21px;font-weight:600;margin:0 0 3px}
.page .lead{color:var(--mut);font-size:13px;line-height:1.55;margin:0 0 18px;max-width:980px}

/* ===== Inhaltsseiten: zweispaltig — linke Sidebar + Inhalt rechts ===== */
.cwrap{display:flex;align-items:flex-start;min-height:calc(100dvh - 60px)}
.cside{flex:0 0 344px;width:344px;max-width:92vw;padding:14px;border-right:1px solid var(--line);background:#0e1722;position:sticky;top:8px;align-self:flex-start}
.cmain{flex:1 1 auto;min-width:0;padding:18px 22px}
@media(max-width:820px){ .cwrap{flex-direction:column} .cside{flex:none;width:100%;border-right:none;border-bottom:1px solid var(--line);position:static} .tblwrap{overflow-x:auto} }
.cmain h1{font-size:19px;font-weight:600;margin:0 0 3px}
.cmain .lead{color:var(--mut);font-size:12.5px;margin:0 0 16px;max-width:1000px;line-height:1.5}
/* Akkordeon-Boxen */
.grp{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:13px 14px;margin:0 0 12px;box-shadow:0 3px 14px rgba(0,0,0,.22)}
.grp h2{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);font-weight:600;margin:0}
.chead{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.chead h2{flex:1}
.cicon{flex:0 0 auto;font-size:11px;color:var(--mut);transition:transform .15s ease}
.grp.open>.chead .cicon{transform:rotate(90deg)}
.grp .cbody{margin-top:11px}
.grp:not(.open) .cbody{display:none}
.info{flex:0 0 auto;width:17px;height:17px;border-radius:50%;border:1px solid var(--mut);background:none;color:var(--mut);font:italic 700 10px Georgia,serif;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.info:hover,.info:focus{border-color:var(--teal);color:var(--teal)}
/* Formularfelder in der Sidebar */
.flab{display:block;font-size:11px;color:var(--mut);margin:9px 0 4px;text-transform:uppercase;letter-spacing:.04em}
.flab:first-child{margin-top:0}
input.fld,select.fld{width:100%;height:34px;border-radius:8px;border:1px solid var(--line);background:#0e1722;color:var(--ink);padding:0 10px;font-size:13px}
.seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{flex:1;background:#0e1722;color:var(--mut);border:none;padding:7px 6px;font-size:12.5px;cursor:pointer}
.seg button.on{background:var(--teal);color:#fff}
.ac{position:relative}
.aclist{position:absolute;left:0;right:0;top:100%;z-index:50;margin-top:2px;background:var(--panel);border:1px solid var(--line);border-radius:8px;max-height:260px;overflow:auto;display:none;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.aclist.on{display:block}
.aclist div{padding:6px 9px;font-size:12.5px;cursor:pointer;color:var(--mut)}
.aclist div:hover,.aclist div.sel{background:#1d2c3c;color:var(--ink)}
input[type=range]{width:100%;accent-color:var(--teal);margin:2px 0}
.rngval{float:right;color:var(--ink);font-weight:600}
.pill-badge{display:inline-block;font-size:9.5px;padding:1px 6px;border-radius:9px;margin-left:6px;vertical-align:middle}
.pill-badge.belegt{background:rgba(39,192,101,.16);color:var(--good)} .pill-badge.annahme{background:rgba(224,169,58,.16);color:#e0a93a}
/* Kategorie-/Status-Pille (kategoriale Werte + Status) */
.tag-lg{display:inline-block;background:rgba(29,158,117,.18);color:#5fd3a6;border-radius:5px;padding:1px 7px;font-weight:600;font-size:11.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tag-lg.amber{background:rgba(224,169,58,.18);color:#eab455} .tag-lg.up{background:rgba(39,192,101,.18);color:#46d07e} .tag-lg.down{background:rgba(255,90,68,.16);color:#ff7a68} .tag-lg.mut{background:rgba(138,160,178,.14);color:var(--mut)}
/* Kennzahl-Karten */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:11px;margin:0 0 16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.card.tealtop{border-top:2px solid var(--teal)}
.card .lab{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}
.card .big{font-size:23px;font-weight:600;margin-top:3px;line-height:1.1}
.card .sub{font-size:11.5px;color:var(--mut);margin-top:3px}
.up{color:var(--good)} .down{color:var(--bad)} .fac{color:#e0a93a}
/* Tabellen */
.sectitle{font-size:13px;font-weight:600;color:var(--ink);margin:2px 0 8px}
.tblwrap{border:1px solid var(--line);border-radius:12px;overflow:visible;margin:0 0 16px;background:var(--panel);box-shadow:0 3px 14px rgba(0,0,0,.22)}
table.dt{border-collapse:collapse;width:100%;font-size:12.5px}
table.dt th{position:sticky;top:0;background:#11202e;color:var(--mut);font-weight:600;text-align:right;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;z-index:5}
table.dt th.l,table.dt td.l{text-align:left;white-space:normal;word-break:break-word}
table.dt td{padding:7px 10px;border-bottom:1px solid #1c2a38;text-align:right;white-space:nowrap;color:var(--ink)}
table.dt tr:hover td{background:#13202d}
table.dt tr.ref td{background:rgba(29,158,117,.12)}
table.dt tr.sumrow td{background:#11202e;font-weight:600}
.bar{height:9px;border-radius:5px;background:var(--teal);display:inline-block;vertical-align:middle}
.agerow{display:flex;align-items:center;gap:9px;margin:3px 0;font-size:12px}
.agerow .al{width:54px;color:var(--mut);text-align:right;flex:0 0 auto}
.agerow .av{width:64px;text-align:right;flex:0 0 auto;color:var(--mut)}
/* Chart-/Karten-Container */
.chartbox{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0 0 16px;box-shadow:0 3px 14px rgba(0,0,0,.22)}
.chartbox h3{font-size:13px;font-weight:600;margin:0 0 8px;color:var(--ink)}
.chartbox .cnv{position:relative;height:240px}
.cmap{height:460px;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:0 0 16px;background:#0f1720}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 16px}
@media(max-width:980px){ .grid2{grid-template-columns:1fr} }
.note{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:8px;padding:11px 14px;font-size:12px;color:var(--mut);line-height:1.55;margin:4px 0 22px}
.note b{color:var(--ink)} .note .src{display:block;margin-top:7px;font-size:11px;opacity:.85}
.empty{color:var(--mut);padding:40px 20px;text-align:center;font-size:13px}
.leaflet-popup-content{font:13px system-ui} .leaflet-popup-content b{color:#0b121b}

/* ===== Seitenfuß (site-wide) — schmaler horizontaler Balken, ans untere Ende geschoben ===== */
.site-foot{margin-top:auto;border-top:1px solid var(--line);background:#0b121b;color:var(--mut)}
.site-foot .fin{padding:11px 20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px}
.site-foot .fleft{display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px}
.site-foot .fbrand{display:flex;align-items:center;gap:8px;font-weight:700;color:#fff;font-size:15px}
.site-foot .fbrand .dot{width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px rgba(29,158,117,.22)}
/* Info-i in Komplementärfarbe (Korall) — Beschreibungstext im aufklappenden Popover */
.site-foot .finfo{position:relative;display:inline-flex}
.site-foot .finfo>summary{list-style:none;cursor:pointer;width:17px;height:17px;border-radius:50%;border:1px solid #e8834a;color:#e8834a;font:italic 700 10px Georgia,serif;display:inline-flex;align-items:center;justify-content:center;user-select:none}
.site-foot .finfo>summary::-webkit-details-marker{display:none}
.site-foot .finfo>summary:hover{background:rgba(232,131,74,.16)}
.site-foot .finfo[open]>summary{background:#e8834a;color:#fff;border-color:#e8834a}
.site-foot .finfo:not([open]) .fpop{display:none}
.site-foot .fpop{position:absolute;bottom:25px;left:-8px;width:340px;max-width:74vw;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 13px;font:400 11.5px/1.6 system-ui;color:var(--mut);box-shadow:0 8px 26px rgba(0,0,0,.45);z-index:60}
.site-foot .flinks{display:flex;align-items:center;gap:18px}
.site-foot .flinks a{color:var(--ink);text-decoration:none;font-size:13px}
.site-foot .flinks a:hover{color:var(--teal)}
.site-foot .fcopy{font-size:11.5px;opacity:.85}
@media(max-width:620px){ .site-foot .flinks{gap:14px} }

/* ===== Über / Impressum / Datenschutz (zentrierte Lese-Seiten) ===== */
.uwrap{width:100%;max-width:1000px;margin:0 auto;padding:30px 22px 14px}
.uhero{display:flex;gap:24px;align-items:center;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px 26px;box-shadow:0 4px 22px rgba(0,0,0,.28)}
.uhero .ava{flex:0 0 auto;width:106px;height:106px;border-radius:50%;object-fit:cover;border:3px solid var(--teal);box-shadow:0 0 0 5px rgba(29,158,117,.14)}
.uhero .ava.mono{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1d9e75,#23b07f);color:#fff;font-size:36px;font-weight:700;letter-spacing:.03em}
.uhero h1{font-size:26px;margin:0 0 3px;color:#fff}
.uhero .role{color:var(--teal);font-weight:600;font-size:14.5px}
.uhero .sub{color:var(--mut);font-size:12.5px;margin-top:3px}
.uhero .slogan{margin-top:11px;font-style:italic;color:var(--ink);font-size:14px}
.uhero .slogan::before{content:'„'} .uhero .slogan::after{content:'“'}
.usec{margin:26px 0}
.usec>h2{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);margin:0 0 13px;font-weight:600}
.ubio{font-size:14.5px;line-height:1.75;color:var(--ink);max-width:840px} .ubio b{color:#fff}
.ucards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.ucard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:0 3px 14px rgba(0,0,0,.22)}
.ucard .n{width:28px;height:28px;border-radius:8px;background:rgba(29,158,117,.16);color:var(--teal);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px}
.ucard h3{font-size:14.5px;margin:11px 0 6px;color:#fff}
.ucard p{font-size:12.5px;line-height:1.6;color:var(--mut);margin:0}
.utags{display:flex;flex-wrap:wrap;gap:7px}
.utags span{background:rgba(29,158,117,.12);color:#9fe3cb;border:1px solid rgba(29,158,117,.22);border-radius:999px;padding:4px 11px;font-size:12px}
.uprose{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px 28px;box-shadow:0 4px 22px rgba(0,0,0,.28);max-width:900px}
.uprose h2{font-size:15.5px;color:#fff;margin:24px 0 8px} .uprose h2:first-child{margin-top:0}
.uprose p,.uprose li{font-size:13.5px;line-height:1.72;color:var(--mut)} .uprose b{color:var(--ink)}
.uprose address{font-style:normal;color:var(--ink);line-height:1.75;margin:2px 0 4px}
.uprose a{color:var(--teal)} .uprose .muted{font-size:11.5px;opacity:.8;margin-top:18px}