/* ═══ pt-kb-schriftgroesse-v1 ══════════════════════════════════════════
   Ohne diese Angabe vergroessern iOS Safari und Chrome auf Android den
   Text in Kaesten, die sie fuer zu breit halten -- gleich ausgezeichnete
   Zeilen erschienen dadurch verschieden gross. 100% schaltet nur diese
   selbsttaetige Vergroesserung ab, nicht den Zoom des Nutzers.
   ══════════════════════════════════════════════════════════════════════ */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ======================================================================
   AccessMed -- Stylesheet
   Erzeugt am 19.08.2026 09:38
   aus 15 <style>-Bloecken von index.html.

   Die Reihenfolge entspricht der urspruenglichen Reihenfolge im
   Dokument und darf nicht veraendert werden -- CSS kaskadiert.
   ====================================================================== */

/* ---- Block 1 von 15, urspruenglich ab Zeile 8 ---- */
/* ── Reset & Base ── */
*{box-sizing:border-box;margin:0;padding:0}
:root{/* scorebox-var */--c-scorebox:#f5f5f5;
  --c-red:#e63946;--c-red-light:#fdecea;
  --c-bg:#f5f5f5;--c-white:#fff;--c-border:#e0e0e0;
  --c-text:#222;--c-muted:#888;
  --c-green:#2d9e5a;--c-green-light:#eaf5ee;
  --c-orange:#e07b2a;--c-orange-light:#fef3e8;
  --c-blue:#2563eb;--c-blue-light:#eff6ff;
  --c-purple:#7c3aed;--c-purple-light:#f5f3ff;
  --radius:10px;--shadow:0 2px 8px rgba(0,0,0,.07);
  --font:'Segoe UI',system-ui,sans-serif;
}
[data-theme="dark"]{--c-scorebox:#1e242c;
  --c-bg:#121417;--c-white:#1c1f24;--c-border:#2c313a;
  --c-text:#e6e8eb;--c-muted:#9aa3ad;
  --c-red:#ff5a66;--c-red-light:#3a2226;
  --c-green:#3fbf76;--c-green-light:#16291f;
  --c-orange:#f3923f;--c-orange-light:#2e2114;
  --c-blue:#5b9bff;--c-blue-light:#16243a;
  --c-purple:#a878f0;--c-purple-light:#241a36;
  --shadow:0 2px 10px rgba(0,0,0,.45);
}
html{transition:background-color .2s ease}
body,.card,.header,.nav-btn,.btn,.modal,.search-box,input,select,textarea{transition:background-color .2s ease,color .2s ease,border-color .2s ease}
[data-theme="dark"] body{background:var(--c-bg)}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{background:var(--c-white);color:var(--c-text);border-color:var(--c-border)}
[data-theme="dark"] .search-box{background:transparent}
[data-theme="dark"] .nav-btn:hover{background:#262b33}
[data-theme="dark"] .header.nav-collapsed .header-nav{background:var(--c-white)}
[data-theme="dark"] ::placeholder{color:var(--c-muted)}
/* ── Dark-Mode Kontrast-Fixes ── */
[data-theme="dark"] .logo-trainer{color:#fff !important}
/* Pharm im Logo: Deluxe-Sweep wie Rahmen/Name */
html[data-deluxe="on"] .logo-pharm{
  background:var(--dlx-grad);background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent !important;
  animation:dlxSweep 3s linear infinite;
  display:inline-block;padding-right:2px/*LOGO-CLIP-FIX3*/}
html[data-deluxe="on"][data-deluxe-anim="off"] .logo-pharm{animation:none}
/* LOGO-TRAINER-PULL: Trainer 2px heranruecken, gleicht padding-right von Pharm aus (kein Overlap aufs m). */
html[data-deluxe="on"] .logo-trainer{margin-left:-2px}
/* STATIC-FRAME-LOGO: Pharm im Logo folgt der statischen Rahmenfarbe (einfarbig, Light+Dark). */
html[data-blueframe="on"]:not([data-deluxe="on"]) .logo-pharm{color:var(--static-frame,transparent)!important;-webkit-text-fill-color:var(--static-frame,transparent)}
.gs-sec{padding:12px 16px 5px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--accent,var(--static-frame,#4aa8e0))}
html[data-blueframe="on"]:not([data-deluxe="on"]) .gs-sec{color:var(--static-frame,#4aa8e0)}
html[data-deluxe="on"] .gs-sec{background:var(--dlx-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
html[data-deluxe="on"][data-deluxe-anim="off"][data-deluxe-fx="gold"] .gs-sec{-webkit-text-fill-color:#f0a830;color:#f0a830;background:none}
html[data-deluxe="on"][data-deluxe-anim="off"][data-deluxe-fx="rot"] .gs-sec{-webkit-text-fill-color:#e63946;color:#e63946;background:none}
html[data-deluxe="on"][data-deluxe-anim="off"][data-deluxe-fx="eis"] .gs-sec{-webkit-text-fill-color:#4aa8e0;color:#4aa8e0;background:none}
html[data-deluxe="on"][data-deluxe-anim="off"][data-deluxe-fx="polarlicht"] .gs-sec{-webkit-text-fill-color:#a855f7;color:#a855f7;background:none}
html[data-deluxe="on"][data-deluxe-anim="off"][data-deluxe-fx="sonne"] .gs-sec{-webkit-text-fill-color:#f0a830;color:#f0a830;background:none}
html[data-deluxe="on"][data-deluxe-anim="off"][data-deluxe-fx="smaragd"] .gs-sec{-webkit-text-fill-color:#2d9e5a;color:#2d9e5a;background:none}

/* Lernen: Kategorie-Hover lesbar */
[data-theme="dark"] .drug-chip:hover{background:#243447;border-color:#4aa8e0;color:#e6e8eb}
[data-theme="dark"] .cat-header:hover{background:#262b33;color:#e6e8eb;border-color:#4aa8e0}
[data-theme="dark"] .cat-header.open{background:#16243a;border-left-color:#4aa8e0;color:#cfe6f5}
[data-theme="dark"] .cat-section.open{background:rgba(74,168,224,.06)}
/* ── Dark Deluxe: animierter Polarlicht-Rahmen ── */
/* ── Deluxe Effekt-Varianten ── */
/* DELUXE-SWEEP v1 */
@keyframes dlxSweep{0%{background-position:0% 50%}100%{background-position:200% 50%}}
html[data-deluxe="on"]{--dlx-grad:linear-gradient(90deg,#a855f7,#4aa8e0,#a855f7,#4aa8e0,#a855f7);--dlx-bw:1.5px;--dlx-i:1}
html[data-deluxe="on"][data-deluxe-fx="gold"]{--dlx-grad:linear-gradient(90deg,#f0a830,#ffd98a,#f0a830,#ffd98a,#f0a830)}
html[data-deluxe="on"][data-deluxe-fx="rot"]{--dlx-grad:linear-gradient(90deg,#e63946,#ff8a94,#e63946,#ff8a94,#e63946)}
html[data-deluxe="on"][data-deluxe-fx="eis"]{--dlx-grad:linear-gradient(90deg,#4aa8e0,#bfe6ff,#4aa8e0,#bfe6ff,#4aa8e0)}
html[data-deluxe="on"][data-deluxe-fx="polarlicht"]{--dlx-grad:linear-gradient(90deg,#a855f7,#4aa8e0,#a855f7,#4aa8e0,#a855f7)}
html[data-deluxe="on"][data-deluxe-fx="sonne"]{--dlx-grad:linear-gradient(90deg,#e63946,#f0a830,#e63946,#f0a830,#e63946)}
html[data-deluxe="on"][data-deluxe-fx="smaragd"]{--dlx-grad:linear-gradient(90deg,#2d9e5a,#4aa8e0,#2d9e5a,#4aa8e0,#2d9e5a)}
html[data-deluxe="on"] .card,html[data-deluxe="on"] .cat-header,html[data-deluxe="on"] .drug-chip,html[data-deluxe="on"] .mode-card,html[data-deluxe="on"] .leaderboard-table tr.top1 td,html[data-deluxe="on"] .modal,html[data-deluxe="on"] .ant-karte,html[data-deluxe="on"] .tox-karte,html[data-deluxe="on"] .tox-tafel{border:var(--dlx-bw) solid transparent;position:relative}   /* pt-ant-rahmen-v2 */
/* Burger-Panel: Sweep-Rahmen ohne position-Override (behaelt eigenes position:absolute) */
html[data-deluxe="on"] .header.nav-collapsed .header-nav{border:var(--dlx-bw) solid transparent}
html[data-deluxe="on"] .card::before,html[data-deluxe="on"] .cat-header::before,html[data-deluxe="on"] .drug-chip::before,html[data-deluxe="on"] .mode-card::before,html[data-deluxe="on"] .leaderboard-table tr.top1 td::before,html[data-deluxe="on"] .modal::before,html[data-deluxe="on"] .header.nav-collapsed .header-nav::before,
html[data-deluxe="on"] .ant-karte::before,html[data-deluxe="on"] .tox-karte::before,html[data-deluxe="on"] .tox-tafel::before{   /* pt-ant-rahmen-v2 */
  content:'';position:absolute;inset:calc(-1 * var(--dlx-bw));border-radius:inherit;padding:var(--dlx-bw);box-sizing:border-box;
  background:var(--dlx-grad);background-size:200% auto;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:dlxSweep 3s linear infinite;opacity:var(--dlx-i,1);pointer-events:none;z-index:1}
/* BURGER-BEFORE-INSET-FIX: Panel hat overflow:auto -> negatives inset wird geclippt. inset:0 haelt den Rahmen innerhalb. */
html[data-deluxe="on"] .header.nav-collapsed .header-nav::before{inset:0}
html[data-deluxe="on"] .modal::before{z-index:0}
/* Option A: Settings-Modal scrollt intern (#settingsCols), damit der animierte
   Deluxe-Rahmen (::before) die volle Hoehe abdeckt und nicht abschneidet. */
#settingsModal .modal{max-height:90vh;overflow:visible}
#settingsCols{max-height:calc(90vh - 90px);overflow-y:auto;padding-right:4px}
html[data-deluxe="on"] .drug-chip:nth-child(2n)::before{animation-delay:-.8s}
html[data-deluxe="on"] .drug-chip:nth-child(3n)::before{animation-delay:-1.6s}
html[data-deluxe="on"] .cat-header::before{animation-delay:-.4s}
html[data-deluxe="on"] .mode-card:nth-child(2n)::before{animation-delay:-1.1s}
/* Burger-Panel: Polarlicht-Rahmen */
/* BURGER-FIXED-BORDER-REMOVED / BURGER-BORDER-ZERO: keine Border -> ::before (inset:0) deckungsgleich mit Boxkante. */
html[data-deluxe="on"] .header.nav-collapsed .header-nav{
  border:0;
}
/* Titelleiste: leuchtende Unterkante */
/* Header-Unterkante: wandernder Sweep statt Puls */
/* pt-header-sticky-v1: position:relative ist hier entfallen. Es
   ueberschrieb das sticky der Grundregel und liess die Titelleiste bei
   jedem gekauften Rahmen mitscrollen. Gebraucht wurde es nur als
   Bezugsrahmen fuer die leuchtende Unterkante unten -- und den bildet
   position:sticky genauso. */
html[data-deluxe="on"] .header{border-bottom:2px solid transparent}
html[data-deluxe="on"] .header::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--dlx-grad);background-size:200% auto;
  animation:dlxSweep 3s linear infinite;opacity:var(--dlx-i,1);pointer-events:none}
/* ── Deluxe Intensitaet: skaliert Glow ueber Variable --deluxe-i (0..1) ── */
html[data-deluxe="on"]{--deluxe-i:1}
html[data-deluxe="on"] :is(.card,.cat-header,.drug-chip,.mode-card,.leaderboard-table tr.top1 td,.modal,.header.nav-collapsed .header-nav,.ant-karte,.tox-karte,.tox-tafel){opacity:1}   /* pt-ant-rahmen-v2 */
/* Wir legen einen zusaetzlichen Glow-Layer ueber box-shadow, dessen Staerke per Variable sinkt.
   Einfacher Ansatz: die gesamte Animation wird per opacity des border-glows gedimmt,
   indem wir die Elemente leicht entsaettigen/abdunkeln je nach Intensitaet. */
html[data-deluxe="on"]{--dlx-i:var(--deluxe-i,1)}
html[data-deluxe="on"] .header{
  /* saturate entfernt (Sweep nutzt opacity) */
}
/* ── Blauer Rahmen (alle User, statisch, Light+Dark) ── */
html[data-blueframe="on"]:not([data-deluxe="on"]) :is(.card,.cat-header,.drug-chip,.mode-card,.leaderboard-table tr.top1 td,.modal,.header.nav-collapsed .header-nav,.ant-karte,.tox-karte,.tox-tafel){   /* pt-ant-rahmen-v2 */
  border:1.5px solid var(--static-frame,transparent);
}
/* Zeitrennen-Rahmen: nur sichtbar wenn Blauer Rahmen an (sonst kein Rahmen) */
.tr-frame{ border:2px solid transparent; }
html[data-blueframe="on"] .card.tr-frame{ border:2px solid #7c3aed !important; }
html[data-blueframe="on"]:not([data-deluxe="on"]) .header{
  border-bottom:2px solid var(--static-frame,transparent);
}
/* pt-searchborder-off: Suchleisten einheitlich mit neutralem Rahmen */
/* ── Statisch: Animation aus, Rahmen auf Effekt-Grundfarbe einfrieren ── */
html[data-deluxe="on"][data-deluxe-anim="off"] :is(.card,.cat-header,.drug-chip,.mode-card,.leaderboard-table tr.top1 td,.modal,.header.nav-collapsed .header-nav),
html[data-deluxe="on"][data-deluxe-anim="off"] .header{
  animation:none !important;
}
/* statische Grundfarben je Effekt */
html[data-deluxe="on"][data-deluxe-anim="off"][data-deluxe-fx="gold"] :is(.card,.cat-header,.drug-chip,.mode-card,.leaderboard-table tr.top1 td,.modal,.header.nav-collapsed .header-nav){border-color:#f0a830;box-shadow:0 0 10px rgba(240,168,48,.5)}
html[data-deluxe="on"][data-deluxe-anim="off"][data-deluxe-fx="rot"] :is(.card,.cat-header,.drug-chip,.mode-card,.leaderboard-table tr.top1 td,.modal,.header.nav-collapsed .header-nav){border-color:#e63946;box-shadow:0 0 10px rgba(230,57,70,.5)}
html[data-deluxe="on"][data-deluxe-anim="off"][data-deluxe-fx="eis"] :is(.card,.cat-header,.drug-chip,.mode-card,.leaderboard-table tr.top1 td,.modal,.header.nav-collapsed .header-nav){border-color:#4aa8e0;box-shadow:0 0 10px rgba(74,168,224,.5)}
html[data-deluxe="on"][data-deluxe-anim="off"][data-deluxe-fx="polarlicht"] :is(.card,.cat-header,.drug-chip,.mode-card,.leaderboard-table tr.top1 td,.modal,.header.nav-collapsed .header-nav){border-color:#a855f7;box-shadow:0 0 10px rgba(168,85,247,.5)}
html[data-deluxe="on"][data-deluxe-anim="off"][data-deluxe-fx="sonne"] :is(.card,.cat-header,.drug-chip,.mode-card,.leaderboard-table tr.top1 td,.modal,.header.nav-collapsed .header-nav){border-color:#f0a830;box-shadow:0 0 10px rgba(240,168,48,.5)}
html[data-deluxe="on"][data-deluxe-anim="off"][data-deluxe-fx="smaragd"] :is(.card,.cat-header,.drug-chip,.mode-card,.leaderboard-table tr.top1 td,.modal,.header.nav-collapsed .header-nav){border-color:#2d9e5a;box-shadow:0 0 10px rgba(45,158,90,.5)}
/* statische Header-Unterkante */
html[data-deluxe="on"][data-deluxe-anim="off"][data-deluxe-fx="gold"] .header{border-bottom-color:#f0a830;box-shadow:0 2px 11px rgba(240,168,48,.45)}
html[data-deluxe="on"][data-deluxe-anim="off"][data-deluxe-fx="rot"] .header{border-bottom-color:#e63946;box-shadow:0 2px 11px rgba(230,57,70,.45)}
html[data-deluxe="on"][data-deluxe-anim="off"][data-deluxe-fx="eis"] .header{border-bottom-color:#4aa8e0;box-shadow:0 2px 11px rgba(74,168,224,.45)}
html[data-deluxe="on"][data-deluxe-anim="off"][data-deluxe-fx="polarlicht"] .header{border-bottom-color:#a855f7;box-shadow:0 2px 11px rgba(168,85,247,.45)}
html[data-deluxe="on"][data-deluxe-anim="off"][data-deluxe-fx="sonne"] .header{border-bottom-color:#f0a830;box-shadow:0 2px 11px rgba(240,168,48,.45)}
html[data-deluxe="on"][data-deluxe-anim="off"][data-deluxe-fx="smaragd"] .header{border-bottom-color:#2d9e5a;box-shadow:0 2px 11px rgba(45,158,90,.45)}
/* Sweep einfrieren wenn Animation aus */
html[data-deluxe="on"][data-deluxe-anim="off"] .card::before,html[data-deluxe="on"][data-deluxe-anim="off"] .cat-header::before,html[data-deluxe="on"][data-deluxe-anim="off"] .drug-chip::before,html[data-deluxe="on"][data-deluxe-anim="off"] .mode-card::before,html[data-deluxe="on"][data-deluxe-anim="off"] .leaderboard-table tr.top1 td::before,html[data-deluxe="on"][data-deluxe-anim="off"] .modal::before,html[data-deluxe="on"][data-deluxe-anim="off"] .header.nav-collapsed .header-nav::before,html[data-deluxe="on"][data-deluxe-anim="off"] .header::after{animation:none}
/* Effekt-Auswahl steuert welche Keyframe-Animation laeuft */
html[data-deluxe="on"][data-deluxe-fx="gold"] :is(.card,.cat-header,.drug-chip,.mode-card,.leaderboard-table tr.top1 td,.modal,.header.nav-collapsed .header-nav){animation-name:dfxGold}
html[data-deluxe="on"][data-deluxe-fx="rot"] :is(.card,.cat-header,.drug-chip,.mode-card,.leaderboard-table tr.top1 td,.modal,.header.nav-collapsed .header-nav){animation-name:dfxRot}
html[data-deluxe="on"][data-deluxe-fx="eis"] :is(.card,.cat-header,.drug-chip,.mode-card,.leaderboard-table tr.top1 td,.modal,.header.nav-collapsed .header-nav){animation-name:dfxEis}
html[data-deluxe="on"][data-deluxe-fx="polarlicht"] :is(.card,.cat-header,.drug-chip,.mode-card,.leaderboard-table tr.top1 td,.modal,.header.nav-collapsed .header-nav){animation-name:dfxPolar}
html[data-deluxe="on"][data-deluxe-fx="sonne"] :is(.card,.cat-header,.drug-chip,.mode-card,.leaderboard-table tr.top1 td,.modal,.header.nav-collapsed .header-nav){animation-name:dfxSonne}
html[data-deluxe="on"][data-deluxe-fx="smaragd"] :is(.card,.cat-header,.drug-chip,.mode-card,.leaderboard-table tr.top1 td,.modal,.header.nav-collapsed .header-nav){animation-name:dfxSmaragd}
/* Titelleisten-Unterkante folgt ebenfalls dem Effekt (vereinfacht: Border-Color via gleiche Keyframes nicht moeglich fuer border-bottom allein, daher Glow-Farbe pauschal) */
/* Üben: ausgewaehlte Mode-Card + Feld-Chips -> heller BG, dunkler Text */
[data-theme="dark"] .mode-card.selected{background:#cfe6f5}
[data-theme="dark"] .mode-card.selected h4{color:#0d2233}
[data-theme="dark"] .mode-card.selected p{color:#33475a}
[data-theme="dark"] .check-item.selected{background:#cfe6f5;color:#0d2233}
[data-theme="dark"] .field-chip.selected{background:#cfe6f5;color:#0d2233}
/* Bestenliste: Top-3 zur dunklen Seite passend */
[data-theme="dark"] .leaderboard-table tr.top1 td{background:#2a2616}
[data-theme="dark"] .leaderboard-table tr.top2 td{background:#23262b}
[data-theme="dark"] .leaderboard-table tr.top3 td{background:#2a211a}
[data-theme="dark"] .leaderboard-table tr.me td{background:#16243a}
html{overflow-x:hidden}
/* PT-NOTES-TABLE-SCROLL */
/* pt-notes-table-fix-v2: scrollt der umgebende Block, bleibt die Tabelle eine
   einzige Tabellenbox - nur dann teilen Kopf- und Datenzeilen dieselbe
   Spaltenberechnung und stehen buendig uebereinander. */
.info-text:has(table){overflow-x:auto;-webkit-overflow-scrolling:touch}
.info-text table{display:table;width:100%;min-width:540px;border-collapse:collapse}
.info-text table td,.info-text table th{white-space:nowrap}
.info-text:has(table)::-webkit-scrollbar{height:5px}.info-text:has(table)::-webkit-scrollbar-thumb{background:#bbb;border-radius:3px}

/* == Notizen-Tabellen im dunklen Thema ==================== pt-notiz-dunkel-v2
   Der Inhalt der Notizen bringt seine Farben als Inline-Stil mit und ist fuer
   helles Papier geschrieben: helle Flaeche, dunkle Schrift. Im dunklen Thema
   dreht sich die Schriftfarbe um, die Inline-Flaeche aber nicht -- hell auf
   hell, unlesbar.
   Ein Teil der Flaechen fragt Variablen ab (--card-bg, --border-color,
   --text-secondary). Die gab es nirgends, also griff immer der helle
   Ersatzwert -- das betrifft die 251 Zyklustabellen. Sie werden hier gesetzt,
   und zwar auf .info-text statt auf die Wurzel: --card-bg benutzt auch die
   Ganzoni-Karte, die davon nichts abbekommen soll.
   Der Rest steht als fester Wert im Inhalt und wird ueber den Inline-Stil
   hinweg ersetzt -- dafuer ist !important noetig. Jede dieser Regeln steht
   zweimal: einmal fuer die Schreibweise aus der Datenbank (#f8fafc) und
   einmal fuer die normierte (rgb(248, 250, 252)), weil die Notizen vor der
   Anzeige einmal durch den DOM laufen und nicht jeder Browser das
   style-Attribut dabei woertlich zurueckgibt.
   Absichtlich nicht angetastet: die weisse Flaeche hinter dem Diagramm bei
   Epoetin alfa. Sie ist ein div, kein tr, und gehoert zum Bild. */
[data-theme="dark"] .info-text{
  --card-bg:#20252c;
  --border-color:#2c313a;
  --text-secondary:#9aa3ad;
}
[data-theme="dark"] .info-text tr[style*="background:#f8fafc"],
[data-theme="dark"] .info-text tr[style*="background: rgb(248, 250, 252)"],
[data-theme="dark"] .info-text tr[style*="background:#fff"],
[data-theme="dark"] .info-text tr[style*="background: rgb(255, 255, 255)"]{background:var(--card-bg)!important}
[data-theme="dark"] .info-text td[style*="background:#eee"],
[data-theme="dark"] .info-text td[style*="background: rgb(238, 238, 238)"]{background:var(--border-color)!important}
[data-theme="dark"] .info-text tr[style*="background:#e6f4fb" i],
[data-theme="dark"] .info-text tr[style*="background: rgb(230, 244, 251)"]{background:rgba(74,168,224,.16)!important}
[data-theme="dark"] .info-text div[style*="background:#fef9c3"],
[data-theme="dark"] .info-text div[style*="background: rgb(254, 249, 195)"]{background:rgba(240,200,60,.14)!important}
[data-theme="dark"] .info-text [style*="color:#166534"],
[data-theme="dark"] .info-text [style*="color: rgb(22, 101, 52)"]{color:var(--c-green)!important}
[data-theme="dark"] .info-text [style*="color:#854d0e"],
[data-theme="dark"] .info-text [style*="color: rgb(133, 77, 14)"]{color:var(--c-orange)!important}
[data-theme="dark"] .info-text [style*="color:#991b1b"],
[data-theme="dark"] .info-text [style*="color: rgb(153, 27, 27)"]{color:var(--c-red)!important}
[data-theme="dark"] .info-text [style*="color:#666"],
[data-theme="dark"] .info-text [style*="color: rgb(102, 102, 102)"]{color:var(--c-muted)!important}
[data-theme="dark"] .info-text td[style*="solid #ccc"],
[data-theme="dark"] .info-text td[style*="solid rgb(204, 204, 204)"],
[data-theme="dark"] .info-text td[style*="solid #eee"],
[data-theme="dark"] .info-text td[style*="solid rgb(238, 238, 238)"],
[data-theme="dark"] .info-text td[style*="solid #bbb"],
[data-theme="dark"] .info-text td[style*="solid rgb(187, 187, 187)"],
[data-theme="dark"] .info-text td[style*="solid #999"],
[data-theme="dark"] .info-text td[style*="solid rgb(153, 153, 153)"]{border-color:var(--c-border)!important}
/* == Ende pt-notiz-dunkel-v2 ============================================== */

body{font-family:var(--font);background:var(--c-bg);color:var(--c-text);min-height:100vh;display:flex;flex-direction:column}
body>header,body>.page,body>footer{width:100%}
body{align-items:stretch}

/* ── Layout ── */
.header{background:var(--c-white);border-bottom:1.5px solid var(--c-border);padding:0 12px;display:flex;align-items:center;gap:8px;min-height:60px;position:sticky;top:0;z-index:100}
/* header-bg-transparent-css */
/* Nur bei aktivem Wallpaper: Header 70% deckend, Hintergrund schimmert durch */
html[data-bg="on"] .header{background:rgba(255,255,255,.70);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html[data-bg="on"][data-theme="dark"] .header{background:rgba(20,24,30,.70)}
/* Eingeklapptes Nav-Panel ebenfalls angleichen, damit es lesbar bleibt */
html[data-bg="on"] .header.nav-collapsed .header-nav{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html[data-bg="on"][data-theme="dark"] .header.nav-collapsed .header-nav{background:rgba(20,24,30,.92)}
.header:not(.nav-ready){visibility:hidden}
/* pt-start-kein-blitzen-v1: Boot-Schranke fuer den Fall ohne Hash.

   Das Script im <head> deckt den Neuladefall ab. Ohne Hash -- beim ersten
   Besuch -- ergibt sich die Landung aber erst aus dem Konto, und bis
   showPage() entschieden hat, wuerden Titelzeile und Fussleiste blitzen.

   visibility fuer die Titelzeile: Sie soll ihren Platz behalten, genau wie
   bei nav-ready. Wuerde sie hier verschwinden, ruckte der Inhalt beim
   Erscheinen nach unten.
   display fuer die Fussleiste: Sie steht am Seitenende, ihr Platz fehlt
   waehrend des Startens niemandem -- und auf der Startseite bekaeme sie
   sonst kurz eine Bildlaufleiste zurueck, die wir gerade erst losgeworden
   sind.

   Laeuft das JavaScript gar nicht, bleibt die Fussleiste aus. Das ist
   hinnehmbar: Ohne JavaScript zeigt die Anwendung ohnehin nichts, jede
   .page bleibt bis showPage() auf display:none. */
html:not([data-active-page]) .header{visibility:hidden}
html:not([data-active-page]) #ptFooter{display:none}
.header-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.header-logo-icon{width:34px;height:34px}
.header-logo-text{font-size:1.2rem;font-weight:700;color:var(--c-red);letter-spacing:-.5px}
.header-nav{display:flex;gap:2px;flex:1;justify-content:center;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.header-nav::-webkit-scrollbar{display:none}@media(max-width:600px){.header-nav{justify-content:flex-start}}
.nav-btn{background:none;border:none;cursor:pointer;padding:8px 16px;border-radius:8px;font-size:.9rem;color:var(--c-muted);font-weight:500;transition:.15s;flex-shrink:0}
.nav-btn:hover{background:#f0f0f0;color:var(--c-text)}
/* pt-nav-active-color */
.nav-btn.active{background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 16%, transparent);color:var(--accent,var(--static-frame,#4aa8e0))}
.nav-burger{display:none;background:none;border:none;font-size:1.75rem;cursor:pointer;padding:4px 10px;color:var(--c-text);margin-left:auto;line-height:1}
.header.nav-collapsed .nav-burger{display:block}
.header.nav-collapsed{position:sticky;top:0;z-index:160}
.header.nav-collapsed .header-nav{display:none;position:absolute;top:calc(100% + 6px);right:12px;z-index:200;flex-direction:column;align-items:stretch;width:230px;background:var(--c-white);border:1px solid var(--c-border);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.15);gap:1px;padding:6px}
.header.nav-collapsed .header-nav.open{display:flex}
/* pt-burger-scroll-v1: Hoehe begrenzen und scrollbar machen. Der
   Klinik-Modus hat so viele Tabs, dass das Menue am Telefon sonst unter
   den Bildschirmrand laeuft und die Knoepfe darunter unerreichbar sind.
   Ohne max-height gibt es nichts, worueber gescrollt werden koennte.

   100dvh statt 100vh: 100vh rechnet am Telefon die Adresszeile und die
   Systemleiste nicht mit -- genau um deren Hoehe bliebe das Menue zu
   lang. Die vh-Zeile davor ist der Rueckfall fuer Browser ohne dvh.

   overflow-x:hidden ausdruecklich, weil .header-nav unter 600 px aus der
   Medienabfrage ein overflow-x:auto traegt; im Menue waere das eine
   zweite, sinnlose Bildlaufleiste. */
.header.nav-collapsed .header-nav.open{
  max-height:calc(100vh - 80px);
  max-height:calc(100dvh - 80px);
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin}
.header.nav-collapsed .header-nav .nav-btn{width:100%;text-align:left;padding:10px 12px;font-size:.92rem;white-space:nowrap;border-radius:7px}
.burger-user-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;cursor:pointer;transition:background .12s}
.burger-user-card:hover{background:#f0f0f0}
[data-theme="dark"] .burger-user-card:hover{background:#262b33}
.header.nav-collapsed .header-nav .nav-divider{height:1px;background:var(--c-border);margin:6px 4px}
.header.nav-collapsed .header-nav .user-chip{text-align:center;margin:2px 4px 4px}
.header.nav-collapsed .header-nav .btn{width:100%;justify-content:center;padding:9px;font-size:.9rem;margin:0}
.nav-overlay-backdrop{display:none;position:fixed;inset:0;z-index:90}
.nav-overlay-backdrop.open{display:block}
.header.nav-collapsed .header-logo{margin-right:auto}
.header.nav-collapsed > .header-user{display:none}
.header.nav-collapsed .header-nav.open ~ .header-user{display:none}@media(max-width:600px){.header{flex-wrap:wrap;padding:6px 12px 0;gap:4px}.header-logo{flex-shrink:0}.header-nav{order:2;flex:1;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}.header-user{order:3;width:100%;display:flex;justify-content:flex-end;padding:4px 0;border-top:1px solid var(--c-border)}.nav-btn{padding:6px 8px;font-size:.72rem;white-space:nowrap}.header-logo-text{font-size:1.25rem}.header-logo-icon{width:36px;height:36px}.header-user .btn{padding:4px 8px;font-size:.72rem}}
.header-user{display:flex;align-items:center;gap:8px;margin-left:auto}
.user-chip{font-size:.8rem;background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 14%, var(--c-card,#fff));padding:4px 12px;border-radius:20px;font-weight:600}
.header-user-card{display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:3px 12px 3px 3px;border-radius:20px;background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 14%, var(--c-card,#fff));transition:background .12s}
.header-user-card:hover{background:#d3ebf8}
/* pt-startseite-gast-v1: aus den Inline-Stilen von _headerUserCard()
   hierher geholt, damit die Startseite den Knopf vergroessern kann.
   Werte unveraendert uebernommen -- in der Kopfzeile sieht er aus wie
   zuvor. */
.header-user-card .huc-av{width:28px;height:28px;border-radius:50%;flex-shrink:0;object-fit:cover}
.header-user-card .huc-av-txt{background:#4aa8e0;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem}
.header-user-card #headerUserName{display:inline-flex;align-items:center;font-size:.82rem;font-weight:600}
[data-theme="dark"] .header-user-card{background:#1c2530}
[data-theme="dark"] .header-user-card:hover{background:#243140}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:8px;border:none;cursor:pointer;font-size:.9rem;font-weight:500;transition:.15s}
.btn-sm{padding:5px 12px;font-size:.82rem}
/* btn-blue-endtop */.btn-primary{background:var(--accent,var(--static-frame,#4aa8e0));color:#fff}.btn-primary:hover{background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 85%, black)}
.btn-ghost{background:none;border:1px solid var(--c-border);color:var(--c-text)}.btn-ghost:hover{background:#f0f0f0}
[data-theme="dark"] .btn-ghost:hover{background:#262b33;color:var(--c-text)}
.btn-danger{background:#fdecea;color:var(--c-red);border:1px solid #f5c6c4}.btn-danger:hover{background:#fbd0cc}
.switch{position:relative;display:inline-block;width:46px;height:26px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;cursor:pointer;inset:0;background:var(--c-border);border-radius:26px;transition:.2s}
.switch .slider:before{content:"";position:absolute;height:20px;width:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked + .slider{background:var(--accent,var(--static-frame,#4aa8e0))}
.switch input:checked + .slider:before{transform:translateX(20px)}
.page{display:none;padding:24px;max-width:1100px;margin:0 auto}
.page.active{display:block}
/* clinic-mode-css */
/* ui-mode-css */
html[data-mode="learn"] .nav-btn.mode-clinic{display:none}
html[data-mode="learn"] .nav-btn.mode-kb{display:none}
html[data-mode="clinic"] .nav-btn.mode-learn{display:none}
html[data-mode="clinic"] .nav-btn.mode-kb{display:none}
html[data-mode="kb"] .nav-btn.mode-learn{display:none}
html[data-mode="kb"] .nav-btn.mode-clinic{display:none}
html[data-mode="kb"] .nav-btn.mode-both{display:none}
.header-nav .nav-btn{align-self:stretch;display:inline-flex;align-items:center}
.clinic-tools-wrap{display:inline-flex;align-items:center}
.clinic-tools-panel{display:none;position:fixed;margin-top:0;background:var(--c-card,#fff);border:1px solid var(--c-border,#ddd);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.14);padding:6px;z-index:200;min-width:190px;flex-direction:column;gap:2px}
.clinic-tools-panel.open{display:flex!important}
.clinic-tools-panel .nav-btn{width:100%;text-align:left;justify-content:flex-start;white-space:nowrap}
/* pt-dd-akzentfarbe-v1: Der geoeffnete Sammel-Eintrag traegt dieselbe
   Farbe wie ein aktiver Reiter -- den dynamischen Akzent, nicht mehr die
   fest verdrahteten #E6F4FB / #4aa8e0. Zwei Selektoren, eine Deklaration:
   der erste haelt den Klinikmodus auch ohne aria-Attribut, der zweite
   fasst beide Menues ueber aria-expanded und bringt damit den Lernmodus
   mit, dem die Hinterlegung bisher ganz fehlte. Die Spezifitaet liegt
   ueber .nav-btn.active und ueber .nav-btn:hover -- gewollt: der offene
   Trigger behaelt seine Flaeche auch unter dem Mauszeiger. */
.clinic-tools-wrap.open>#clinicToolsBtn,
.header .nav-btn[aria-haspopup="true"][aria-expanded="true"]{
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 16%, transparent);
  color:var(--accent,var(--static-frame,#4aa8e0));
}
[data-theme="dark"] .clinic-tools-panel{background:#1c2128;border-color:#30363d}
/* pt-clinic-tools-restore: Weiche wie beim Trainer-Menue -- waagrecht der
   Sammel-Eintrag, im Burger die Einzeltabs. Bis hierher stand das Panel im
   Burger eingerueckt unter "Werkzeuge" und musste erst aufgeklappt werden;
   jetzt stehen die Eintraege dort direkt in der Liste. */
.header.nav-collapsed .clinic-tools-wrap{display:none}
.header.nav-collapsed .clinic-tools-panel{display:none}
.header:not(.nav-collapsed) .nav-btn.nav-tools-item{display:none}
/* pt-kb-lock-css */
html[data-kbprem="0"] .nav-btn.mode-kb{opacity:.6}
html[data-kbprem="0"] .nav-btn.mode-kb::after{content:" \1F512";font-size:.85em;margin-left:4px}
html[data-kbnav="0"] .nav-btn.mode-kb{display:none}
/* pt-kbtitle-center: Titel im Wissens-Modus auf die Fenstermitte legen */
@media(min-width:900px){
  html[data-mode="kb"] .header:not(.nav-collapsed) .header-nav{
    position:static;
  }
  html[data-mode="kb"] .header:not(.nav-collapsed) .nav-btn.mode-kb{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:1;
    pointer-events:auto;
  }
  html[data-mode="kb"] .header:not(.nav-collapsed){
    position:sticky;
  }
}
/* algo-ui-css */
html[data-algo="0"] .nav-btn[data-page="klinik-algorithmen"]{display:none}

/* pt-startseite-v1 ------------------------------------------------------
   Der Modus-Umschalter der Kopfzeile faellt auf der Startseite weg -- die
   Seite bietet die Auswahl selbst an, zweimal nebeneinander waere Unsinn.
   Bewusst per CSS und nicht per JavaScript: Das Element bleibt im DOM,
   renderModeSwitch() und updateClinicSwitchUI() behalten ihren Zustand,
   und beim Verlassen der Seite ist der Umschalter ohne Zutun wieder da.
   Moeglich wird das durch data-active-page, das showPage() seit
   pt-activepage-v1 setzt. */
html[data-active-page="start"] #modeSwitchWrap{display:none}

/* Ebenso weg: die Zeile mit den Inhalten des Modus und die Fussleiste.
   Die Startseite fragt, WOMIT es weitergeht -- eine Liste der Seiten des
   gerade aktiven Modus nimmt die Antwort vorweg und widerspricht ihr, weil
   der Modus hier ja erst gewaehlt wird.
   Der Burger-Knopf geht mit: .header-nav ist im eingeklappten Zustand sein
   Klappmenue, und ein Knopf, der nichts oeffnet, ist schlimmer als keiner. */
html[data-active-page="start"] #ptFooter{display:none}
/* pt-profil-footer-v1: auf der Profilseite ebenso. Kein !important --
   es gibt keine Gegenregel, und der scheinbare Inline-Stil aus
   _applyDisclaimer() setzt im sichtbaren Zweig den leeren String, der
   die Inline-Eigenschaft loescht statt eine zu setzen. */
html[data-active-page="profil"] #ptFooter{display:none}

/* pt-start-kopfzeile-v1 -------------------------------------------------
   Dieselbe Absicht wie zuvor -- Navigation und Burger weg, Zahnrad und
   Profil-Chip freischwebend --, nur mit dem noetigen Gewicht.

   Bis hierher standen die Regeln als
     html[data-active-page="start"] .nav-burger{display:none}
   da, also mit Spezifitaet 0,2,1. Der eingeklappte Zustand bringt aber
     .header.nav-collapsed .nav-burger{display:block}          0,3,0
     .header.nav-collapsed > .header-user{display:none}        0,3,0
   mit, und 0,3,0 schlaegt 0,2,1. Am Handy, wo die Kopfzeile eingeklappt
   ist, wurde deshalb der Burger gezeigt und der Nutzerblock versteckt --
   der Burger tot, weil die Titelzeile hier pointer-events:none traegt,
   und der Profil-Chip weg, weil display:none am Elternteil den ganzen
   Teilbaum aus dem Aufbau nimmt, auch position:fixed-Kinder.

   Aufgefallen ist das erst, seit pt-burger-messung-v1 die Messung auf der
   Startseite unterbindet: Vorher entfernte checkNavOverflow() dort die
   Klasse nav-collapsed, und ohne sie trafen die staerkeren Regeln nie zu.

   .header im Selektor hebt beide auf 0,3,1. Nichts wird entfernt, kein
   !important -- die Regeln des eingeklappten Zustands gelten fuer jede
   andere Seite unveraendert weiter.

   Nicht ueberboten wird .header.nav-collapsed .header-nav.open ~
   .header-user (0,4,0). Das ist gewollt und unschaedlich: Das Klappmenue
   kann sich auf der Startseite nicht oeffnen -- der Burger ist hier
   ausgeblendet, und showPage() ruft bei jedem Wechsel closeBurger(). */
html[data-active-page="start"] .header .header-nav,
html[data-active-page="start"] .header .nav-burger{display:none}
html[data-active-page="start"] .header > .header-user{display:flex}
/* /pt-start-kopfzeile-v1 ---------------------------------------------- */

/* pt-start-kein-bildlauf-v1 --------------------------------------------
   Die Startseite liess sich rollen, obwohl nichts zum Rollen da war.

   Sie steckt wie jede Seite in einem .page-Container, und der traegt
   padding:24px. Wegen *{box-sizing:border-box} rechnet .start-wrap seine
   eigene Polsterung in min-height:100vh ein -- die des Elternelements
   aber nicht:

       body            min-height:100vh
       +- #page-start  .page{padding:24px}     -> +24 oben +24 unten
          +- .start-wrap min-height:100vh
       Dokumenthoehe = 100vh + 48px

   Die id schlaegt die Klasse (1,0,0 gegen 0,1,0); .page bleibt fuer alle
   anderen Seiten, wie es ist. max-width und margin bleiben ebenfalls --
   nur die Polsterung war das Problem. */
#page-start{padding:0}

/* Der zweite Grund betrifft nur Geraete mit ein- und ausfahrender
   Adressleiste: 100vh meint dort das GROSSE Ansichtsfenster, also die
   Hoehe ohne Leiste. Sichtbar ist weniger, und die Differenz liess sich
   rollen. 100svh ist die Hoehe MIT sichtbarer Leiste und damit die, die
   in beiden Zustaenden ohne Ueberhang auskommt.
   Nur auf der Startseite -- der body aller anderen Seiten bleibt
   unberuehrt. Kein overflow:hidden: Im Querformat passt der Inhalt
   tatsaechlich nicht immer, dann muss gerollt werden koennen. */
html[data-active-page="start"] body{min-height:100svh}
/* /pt-start-kein-bildlauf-v1 ------------------------------------------ */

/* Die Titelzeile selbst faellt auf der Startseite weg -- kein Balken, kein
   Rahmen, kein Hintergrund, keine Hoehe. Sie bleibt aber im DOM stehen:
   renderHeader() zeichnet sie bei jedem Kontowechsel neu, und die beiden
   Knoepfe darin sollen weiter funktionieren. Statt sie zu entfernen wird
   sie also durchsichtig gemacht und ueber die Seite gelegt.
   pointer-events geht auf none, damit der unsichtbare Balken keine Klicks
   abfaengt; die beiden Kinder holen es sich einzeln zurueck. */
html[data-active-page="start"] .header{
  position:fixed;top:0;left:0;right:0;
  background:transparent;border-bottom:0;box-shadow:none;
  min-height:0;padding:0;pointer-events:none;
}
html[data-active-page="start"] .header-logo{display:none}
/* Lupe und Admin-Knopf gehoeren nicht auf die Startseite: Umschalt+W
   oeffnet die Suche weiterhin, und der Admin-Bereich ist einen Modus
   entfernt. Genannt waren Profil und Einstellungen. */
html[data-active-page="start"] #headerSearchBtn,
html[data-active-page="start"] #headerAdminBtn,
html[data-active-page="start"] #headerLoginBtn,
html[data-active-page="start"] #headerRegisterBtn{display:none}

/* width/padding/border-top ausdruecklich zuruecksetzen: unter 600px gibt
   die Kopfzeile der .header-user sonst volle Breite und eine Trennlinie
   obendrueber -- die stuende auf der Startseite als Strich quer im Bild. */
html[data-active-page="start"] .header-user{
  position:static;margin:0;pointer-events:none;gap:0;
  width:auto;padding:0;border-top:0;
}
/* Einstellungen links oben, Profil rechts oben -- beide freischwebend
   ueber der Seite, unabhaengig von der Reihenfolge im DOM. */
/* pt-start-zahnrad-v1: Der Wert, der bis hierher inline am Knopf stand.
   Hier steht er, damit die Startseite ihn ueberschreiben kann -- inline
   waere er unerreichbar gewesen. Die id schlaegt .btn-sm, ausserhalb der
   Startseite sieht der Knopf deshalb aus wie zuvor. */
#headerSettingsBtn{font-size:1rem}
/* pt-zahnrad-svg-v1: Das Zahnrad ist jetzt eine Zeichnung statt eines
   Schriftzeichens. "⚙︎" (U+2699 mit Textvariante) wird von jeder
   Schrift anders im Em-Quadrat platziert -- CSS zentriert die Box, nicht
   die Tinte, der Versatz war deshalb geraeteabhaengig und mit keiner
   Regel zu beheben. Der Pfad im SVG ist gerechnet: acht Zaehne um
   (12, 12), Huellrechteck 1.149 .. 22.851 in beiden Achsen.
   pt-zahnrad-feiner-v1: Zahntiefe 2.7 -> 1.8, Nabe 3.7 -> 4.4,
   Zahnbreite 0.46 -> 0.42. Aussenradius unveraendert, das Rad ist
   also gleich gross; nur die Zahnspitzen sitzen an einer anderen
   Winkelstelle, daher das leicht andere Huellrechteck.

   display:block nimmt die Grundlinie aus dem Spiel -- ein Blockelement
   als Flex-Kind zentriert align-items:center exakt, ohne dass
   Schriftmetriken hineinspielen. Die Groesse haengt weiter an
   font-size, damit die Startseite sie wie bisher anhebt. */
#headerSettingsBtn svg{width:1em;height:1em;display:block;flex:0 0 auto}

/* pt-start-zahnrad-v1: Auf der Startseite so gross wie der Profil-Chip
   gegenueber. Der ist dort rund 46 px hoch -- Avatar 36 px plus 5 px
   Polsterung oben und unten. Ein Kreis statt einer Pille, weil hier nur
   ein Zeichen steht und kein Name daneben. */
html[data-active-page="start"] #headerSettingsBtn{
  position:fixed;top:14px;left:14px;z-index:110;pointer-events:auto;
  width:46px;height:46px;padding:0;border-radius:50%;
  justify-content:center;font-size:1.35rem;
  /* pt-zahnrad-kontur-v1: gedaempft statt Textfarbe. Der Knopf erbt
     von .btn-ghost var(--c-text) -- #222, praktisch schwarz. Hier steht
     er allein auf hellem Grund und wirkte damit zu dominant. In der
     vollen Kopfzeile bleibt es bei der Textfarbe: dort sitzt er zwischen
     anderen Bedienelementen und soll wie sie aussehen.
     Ueber color und nicht ueber stroke, damit currentColor greift und
     der dunkle Betrieb (--c-muted wird dort #9aa3ad) mitkommt. */
  color:var(--c-muted);
}
/* Das Abzeichen ist meist versteckt, kann aber erscheinen. In einem
   Kreis fester Groesse wuerde es den Glyph zur Seite druecken -- es
   sitzt deshalb in der Ecke. Bezugsrahmen ist der Knopf selbst, der ist
   position:fixed. */
html[data-active-page="start"] #headerSettingsBtn .notif-badge{
  position:absolute;top:-2px;right:-2px;margin:0;
}
/* Auf der Startseite steht der Profil-Knopf allein in der Ecke und darf
   deshalb groesser sein als in der vollen Kopfzeile, wo er sich den Platz
   mit Lupe, Modus-Umschalter und Zahnrad teilt. */
html[data-active-page="start"] #headerUserChip{
  position:fixed;top:14px;right:14px;z-index:110;pointer-events:auto;
  padding:5px 16px 5px 5px;border-radius:26px;gap:10px;
}
html[data-active-page="start"] .header-user-card #headerUserName{font-size:.95rem}
html[data-active-page="start"] .header-user-card .huc-av{width:36px;height:36px}
html[data-active-page="start"] .header-user-card .huc-av-txt{font-size:1rem}
@media(max-width:600px){
  html[data-active-page="start"] #headerSettingsBtn{top:10px;left:10px}
  html[data-active-page="start"] #headerUserChip{top:10px;right:10px}
}

.start-wrap{
  /* Weder Kopf- noch Fussleiste nehmen hier Platz ein -- die Titelzeile
     liegt durchsichtig darueber. Also die volle Hoehe.
     Oben genug Luft, damit der Titel nicht an die beiden freischwebenden
     Knoepfe stoesst. */
  /* pt-start-kein-bildlauf-v1: 100vh bleibt als Rueckfall fuer Browser
     ohne svh; svh ist die Hoehe mit sichtbarer Adressleiste und erzeugt
     deshalb keinen Ueberhang. */
  min-height:100vh;
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  /* Titel, Knoepfe und Suchzeile stehen in gleichen Abstaenden --
     26px oben wie unten. Ueber gap statt ueber Raender, damit die beiden
     gar nicht erst auseinanderlaufen koennen.

     Der Block sitzt mittig, deshalb hebt ihn jede Luft unten um die
     HAELFTE ihres Wertes -- und Luft oben senkt ihn ebenso.
     pt-startlogo-v1: Das Logo bringt rund 165px Hoehe mit (156px breit,
     Seitenverhaeltnis 0,947) plus 26px Abstand minus 18px eigener Rand,
     also 173px, um die der Titel nach unten gerutscht ist. Um ihn wieder
     dorthin zu bringen, wo er ohne Logo stand, muss der Unterschied
     zwischen unterer und oberer Luft um genau diese 173px wachsen:
     vorher 100-68=32, jetzt 241-36=173+32. */
  text-align:center;padding:36px 20px 241px;gap:26px;
}
/* pt-startlogo-v1: Logo ueber dem Titel. Die Farbvariante waehlt
   ptSyncLogo() nach der Rahmenfarbe -- hier steht nur die Groesse.
   Der eigene Rand statt des gemeinsamen gap: Logo und Titel gehoeren als
   Marke zusammen und stehen enger als die uebrigen Bloecke. */
.start-logo{
  /* pt-startlogo-hoehe-v1: aspect-ratio reserviert die Hoehe, BEVOR das Bild da ist. Das
     <img> entsteht ohne src -- ptSyncLogo() traegt sie erst nach, passend
     zur Rahmenfarbe. Mit height:auto allein war das Element bis dahin 0
     hoch, und beim Ankommen des Bildes rutschte alles darunter nach unten.
     Das Verhaeltnis stammt aus der Datei: logo-128.png ist 121 x 128. */
  width:clamp(96px,19vw,156px);height:auto;aspect-ratio:121/128;
  object-fit:contain;display:block;margin:0 auto -18px;
}
.start-title{
  font-size:clamp(2.6rem,9vw,4.6rem);
  font-weight:800;letter-spacing:-.03em;line-height:1;margin:0;
}
.start-modes{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.start-a-such{width:100%;display:flex;justify-content:center}
/* pt-startseite-gast-v1: Die drei Knoepfe ohne Konto. Gleiches Format wie
   die Modus-Knoepfe -- sie tragen dieselbe Klasse start-mode. Nur der
   Abstand nach oben ist eigens gesetzt, damit sie sich als eigene Gruppe
   von der Suchzeile absetzen und nicht als vierte Modus-Reihe wirken. */
.start-gast{margin-top:8px}

/* pt-start-credit-v1 ----------------------------------------------------
   Die Zeile rechts unten auf der Startseite.

   position:fixed, damit sie keine Hoehe beitraegt: Die Startseite ist
   gerade erst bildlauffrei geworden (pt-start-kein-bildlauf-v1), ein
   Element im Fluss haette das wieder aufgeweicht. Sie steht in
   #page-start, und das ist ausserhalb der Startseite display:none --
   damit erscheint sie nirgends sonst.

   pointer-events:none: reiner Text, der keine Beruehrungen abfangen
   soll, die dem Verzeichnis-Griff oder der Suchzeile gelten. */
.start-credit{
  position:fixed;z-index:60;pointer-events:none;
  right:16px;bottom:calc(10px + env(safe-area-inset-bottom, 0px));
  font-size:.72rem;line-height:1.3;color:var(--c-muted);
  text-align:right;max-width:70vw;
}
/* Auf einem gewaehlten Hintergrundbild verschwindet Grau. Dieselbe
   Behandlung wie .ds-sub weiter unten. */
/* pt-suche-weiss-v1: Weiss war auf einem hellen eigenen Hintergrundbild
   nicht zu lesen. Die Farbe kommt jetzt aus derselben Kette wie die
   Rahmenlinien; siehe den Block bei .ds-sub weiter unten. */
html[data-bg="on"] .start-credit{
  color:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 82%, #14181f);
  text-shadow:0 1px 2px rgba(255,255,255,.6)}
html[data-bg="on"][data-theme="dark"] .start-credit{
  color:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 80%, #fff);
  text-shadow:0 1px 2px rgba(0,0,0,.55)}
@media (max-width:820px){
  /* Unter 820 px sitzt der Verzeichnis-Griff als runder Knopf genau
     hier (right:16px, bottom:20px, 48 px). Die Zeile weicht in die
     Mitte aus, statt sich darunter zu schieben: bei 390 px Breite ist
     der Text rund 230 px breit, mittig also von 80 bis 310 -- der
     Knopf beginnt bei 326. */
  .start-credit{
    right:auto;left:0;width:100%;text-align:center;max-width:none;
    bottom:calc(8px + env(safe-area-inset-bottom, 0px));font-size:.68rem;
  }
}
/* /pt-start-credit-v1 -------------------------------------------------- */
.start-mode{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  min-width:148px;padding:20px 22px;cursor:pointer;
  background:var(--c-white);color:var(--c-text);
  /* pt-startmode-rahmen-v1: Rahmen in der Modusfarbe statt in Grau.
     --sm-col setzt _startModeButtons() auf jedem Knopf inline, und
     _startGastKnoepfe() tut dasselbe fuer die drei Knoepfe ohne Konto --
     beide Reihen sind damit abgedeckt. Der Ersatzwert greift nie, er steht
     nur, damit die Regel ohne die Variable nicht farblos wird. */
  border:1px solid var(--sm-col,#4aa8e0);border-radius:15px;
  font-size:.95rem;font-weight:600;font-family:inherit;
  transition:transform .13s ease, box-shadow .13s ease, border-color .13s ease;
}
.start-mode .start-mode-em{font-size:1.7rem;line-height:1}
/* pt-start-handy-v1: Am Desktop bleibt die Beschriftung einzeilig; erst
   die Handy-Regel weiter unten macht daraus display:block. font-weight
   ausdruecklich, weil der zweite Teil in einem <span> ohne eigene
   Auszeichnung steht und nichts Fettes erben soll. */
.start-mode .sm-zeile2{display:inline;font-weight:inherit}
.start-mode:hover{
  /* pt-startmode-rahmen-v1: Der Rahmen ist jetzt immer farbig, ihn hier
     einzufaerben waere also wirkungslos. An seine Stelle tritt der
     eingesetzte Ring, den vorher start-mode-cur trug -- derselbe Wert, nur
     an der Stelle, an der er etwas aussagt. */
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(0,0,0,.13), inset 0 0 0 1px var(--sm-col,#4aa8e0);
}
.start-mode:focus-visible{outline:2px solid var(--sm-col,#4aa8e0);outline-offset:3px}
/* pt-startmode-rahmen-v1: .start-mode-cur ist entfallen. Sie hob den
   zuletzt verwendeten Modus hervor und liess die beiden anderen grau --
   genau der Unterschied, der weg sollte. Gegenstelle in app.js: dort wird
   die Klasse nicht mehr gesetzt, aria-current bleibt. */
/* Handy-Fassung von Startseite 1 -------------------------------------
   Bis hierher standen die drei Modi untereinander als volle Balken. Mit
   der Suchzeile darunter wurde das zu hoch -- Titel, drei Balken und
   Suchzeile passen auf einem Telefon nicht mehr ohne Bildlauf, und eine
   Startseite, die man scrollen muss, verfehlt ihren Zweck.
   Deshalb: die drei Modi nebeneinander als schmale Karten, jede ein
   Drittel breit, Symbol ueber dem Namen. Kurze Modus-Namen (LM/KM/WM)
   waeren hier zu wenig -- die Karte hat Platz fuer zwei Zeilen. */
@media(max-width:600px){
  /* gap ebenfalls einheitlich, hier 22px. Bodenluft nach derselben
     Rechnung wie oben: Das Logo bringt hier rund 125px mit (118px breit)
     plus 22px Abstand minus 14px Rand = 133px. Der Unterschied unten
     gegen oben waechst also von 12 auf 145. */
  /* pt-start-kein-bildlauf-v1: svh wie oben, hier zaehlt es am meisten --
     die ein- und ausfahrende Adressleiste gibt es nur auf Telefonen. */
  .start-wrap{min-height:100vh;min-height:100svh;padding:30px 14px 175px;gap:22px}
  .start-title{font-size:clamp(2.1rem,11vw,3rem)}
  .start-logo{width:clamp(80px,24vw,118px);margin-bottom:-14px}
  .start-modes{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:9px;width:100%;max-width:420px;
  }
  .start-mode{
    width:auto;min-width:0;flex-direction:column;gap:6px;
    padding:14px 6px;border-radius:13px;
    font-size:.78rem;line-height:1.25;
    /* pt-start-handy-v1: hyphens:auto ist weg. Zusammen mit lang="de" am
       <html> zerlegte es "Modus" in "Mo-dus", und "Wissens-Mo-/dus" sah
       kaputt aus. overflow-wrap bleibt als letzte Reissleine stehen. */
    overflow-wrap:anywhere;
  }
  /* pt-start-handy-v1: "Modus" in die zweite Zeile, bei allen drei
     Knoepfen gleich. Ohne das braeche nur der laengste Name um --
     "Lern-Modus" passt in eine Zeile, "Wissens-Modus" nicht, und die drei
     Karten staenden 1/1/2-zeilig. Geteilt wird in _startModeButtons(). */
  .start-mode .sm-zeile2{display:block}
  .start-mode .start-mode-em{font-size:1.45rem}
  /* Kein Anheben bei Beruehrung -- auf Telefonen bleibt der Zustand nach
     dem Tippen haengen und die Karte staende schief. */
  .start-mode:hover{transform:none;box-shadow:none}
  .start-b-searchwrap .kb-search{padding:13px 18px;font-size:1rem}
  /* Die Trefferliste darf auf dem Telefon nicht die halbe Seite fuellen,
     sonst verdeckt sie die Modus-Karten darueber. */
  .start-b-sugg{max-height:min(44vh,320px)}
}

/* Die Zeile traegt kb-searchwrap/kb-search und damit deren Gestaltung.
   Hier nur, was die Lage auf dieser Seite betrifft -- .kb-searchwrap bringt
   margin:22px auto 0 mit, das im mittigen Kasten einen Versatz erzeugte. */
.start-b-searchwrap{margin:0;width:100%}
.start-b-searchwrap .kb-search{text-overflow:ellipsis}
/* Die Liste traegt kb-sugg und damit deren Rahmen, Rundung und Schatten.
   Anders als das Vorbild fuehrt sie aber sechs Arten von Treffern mit
   Abschnittsueberschriften -- sie kann also lang werden und bekommt
   deshalb eine Deckelung mit eigenem Bildlauf. kb-sugg bringt
   overflow:hidden mit, das muss dafuer weichen. */
.start-b-sugg{max-height:min(56vh,460px);overflow-y:auto}
/* /pt-startseite-v1 --------------------------------------------------- */
#kbNavTitle,#kbNavTitle:hover,#kbNavTitle.active{pointer-events:none;cursor:default;background:transparent!important;color:var(--c-text,#111)!important;font-size:1.05rem;font-weight:700;padding-left:0}
.mode-switch{display:inline-flex;align-items:stretch;border:1px solid var(--accent,var(--static-frame,#4aa8e0));border-radius:8px;overflow:hidden}
.mode-switch .ms-seg{background:transparent;border:0;cursor:pointer;padding:5px 12px;font-size:.85rem;font-weight:600;color:#4aa8e0;white-space:nowrap}
.mode-switch .ms-seg:hover{background:rgba(74,168,224,.12)}
.mode-switch .ms-seg.ms-active{color:#fff!important}
.mode-switch .ms-seg.ms-active:hover{filter:brightness(1.08)}
.mode-switch .ms-seg+.ms-seg{border-left:1px solid var(--accent,var(--static-frame,#4aa8e0))}
.mode-switch.has-kb{border-color:var(--accent,var(--static-frame,#4aa8e0))}
.mode-switch .ms-seg.ms-learn{color:#2d9e5a}
.mode-switch .ms-seg.ms-learn:hover{background:rgba(45,158,90,.12)}
.mode-switch .ms-seg.ms-kb{color:#e63946}
.mode-switch .ms-seg.ms-kb:hover{background:rgba(230,57,70,.12)}
.mode-switch .ms-seg.ms-kb+.ms-seg,.mode-switch .ms-seg+.ms-seg.ms-kb{border-left-color:var(--accent,var(--static-frame,#4aa8e0))}
html[data-mode="clinic"] .nav-btn.mode-learn{display:none}
/* clinic-hide-learn */
html[data-mode="clinic"] .drug-mark-dot{display:none}
html:not([data-mode="learn"]) [id^="learnBtns_"]{display:none !important}
/* nephro-severity */
.nephro-card{border:2px solid var(--c-border);border-radius:14px;padding:18px;margin-bottom:14px;background:var(--c-white)}
.nephro-ok{border-color:#86c99a;background:#eafaf0}
.nephro-reduce{border-color:#e6c860;background:#fdf8e7}
.nephro-stop{border-color:#e69a9a;background:#fdeaea}
[data-theme="dark"] .nephro-ok{border-color:#2d6b45;background:#12291c}
[data-theme="dark"] .nephro-reduce{border-color:#6b5a1e;background:#2a2410}
[data-theme="dark"] .nephro-stop{border-color:#7a2d2d;background:#2a1414}
.nephro-gfr{border-radius:12px;padding:16px;margin-bottom:14px;border:2px solid var(--c-border)}
.nephro-gfr-green{border-color:#86c99a;background:#eafaf0}
.nephro-gfr-yellow{border-color:#e6c860;background:#fdf8e7}
.nephro-gfr-orange{border-color:#e0a860;background:#fdf1e7}
.nephro-gfr-red{border-color:#e69a9a;background:#fdeaea}
[data-theme="dark"] .nephro-gfr-green{border-color:#2d6b45;background:#12291c}
[data-theme="dark"] .nephro-gfr-yellow{border-color:#6b5a1e;background:#2a2410}
[data-theme="dark"] .nephro-gfr-orange{border-color:#6b4a1e;background:#2a1e10}
[data-theme="dark"] .nephro-gfr-red{border-color:#7a2d2d;background:#2a1414}
.nephro-badge{display:inline-block;font-size:.8rem;font-weight:600;padding:3px 10px;border-radius:999px}
.nephro-drug-btn{padding:7px 12px;background:var(--c-white);border:1px solid var(--c-border);border-radius:8px;cursor:pointer;font-size:.85rem;color:var(--c-text);transition:.12s}
.nephro-drug-btn:hover{border-color:var(--accent,var(--static-frame,#4aa8e0));background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 12%, var(--c-card,#fff))}
.nephro-drug-btn.selected{background:var(--accent,var(--static-frame,#4aa8e0));color:#fff;border-color:var(--accent,var(--static-frame,#4aa8e0))}
[data-theme="dark"] .nephro-drug-btn:hover{background:#243447;color:#e6e8eb}
.nephro-warn{margin-top:10px;padding:10px 12px;border-radius:8px;background:#fdf8e7;border:1px solid #e6c860;font-size:.88rem;color:#7a5c00;white-space:pre-line}
[data-theme="dark"] .nephro-warn{background:#2a2410;border-color:#6b5a1e;color:#e6c860}
.nephro-agewarn{margin-top:10px;padding:10px 12px;border-radius:8px;background:#fdf1e7;border:1px solid #e0a860;font-size:.88rem;color:#8a4a00}
[data-theme="dark"] .nephro-agewarn{background:#2a1e10;border-color:#6b4a1e;color:#e0a860}
.nephro-schema{margin-top:12px;border:1px solid #bae0f5;border-radius:10px;overflow:hidden}
.nephro-schema table{width:100%;border-collapse:collapse;font-size:.88rem}
.nephro-schema td{padding:8px 12px}
.clinic-switch{display:inline-flex;align-items:center;gap:6px;margin:0 8px;padding:6px 12px;border:1.5px solid #4aa8e0;border-radius:999px;background:transparent;color:#4aa8e0;font-size:.82rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:.15s}
.clinic-switch:hover{background:#E6F4FB}
.clinic-switch.hidden{display:none}
@media(max-width:600px){.clinic-switch{font-size:.72rem;padding:5px 9px;margin:0 4px}}

/* ── Cards ── */
/* pt-card-accent: Karten folgen der aktiven Rahmenfarbe */
.card{background:var(--c-white);border-radius:var(--radius);border:1px solid var(--accent,var(--static-frame,var(--c-border)));padding:20px}
.card+.card{margin-top:12px}

/* ── Search & Filter ── */
.search-row{display:flex;gap:10px;margin-bottom:16px}
.search-box{flex:1;position:relative}
.search-box input{width:100%;padding:10px 14px 10px 38px;border:1.5px solid var(--c-border);border-radius:8px;font-size:.95rem;background:var(--c-white)}
.search-box input:focus{outline:none;border-color:var(--accent,var(--static-frame,#4aa8e0))}
.search-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--c-muted);font-size:1rem}
.search-results{position:absolute;top:100%;left:0;right:0;background:var(--c-white);border:1px solid var(--c-border);border-radius:8px;box-shadow:var(--shadow);z-index:50;max-height:320px;overflow-y:auto;margin-top:4px}
.search-result-item{padding:10px 14px;cursor:pointer;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;gap:10px}
.search-result-item:last-child{border-bottom:none}
.search-result-item:hover{background:var(--c-red-light)}
.match-badge{font-size:.7rem;padding:2px 7px;border-radius:10px;background:#f0f0f0;color:var(--c-muted)}
.match-trade{background:var(--c-orange-light);color:var(--c-orange)}

/* ── Category accordion ── */
.cat-section{margin-bottom:8px}
.cat-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--c-white);border:1px solid var(--c-border);border-left:4px solid transparent;border-radius:8px;cursor:pointer;font-weight:600;font-size:.95rem;user-select:none}
.cat-header:hover{background:#fafafa;border-color:var(--accent,var(--static-frame,#4aa8e0))}.cat-header.open{background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 12%, var(--c-card,#fff));border-left:4px solid var(--accent,var(--static-frame,#4aa8e0))}
.cat-header .caret{transition:.2s;color:var(--c-muted)}
.cat-header.open .caret{transform:rotate(180deg)}
.cat-body{display:none;padding:8px 0 0 0;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.cat-body.visible{display:grid}
.cat-section{border-left:4px solid transparent;border-radius:8px;transition:border-color .15s}
.cat-section.open{border-left:4px solid var(--accent,var(--static-frame,#4aa8e0));background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 4%, var(--c-card,#fff));padding-bottom:8px}
.cat-section.open .cat-header{border-left:none;border-top-left-radius:4px}
.cat-section.open .cat-body{padding-left:12px;padding-right:8px}
.drug-chip{padding:9px 14px;background:var(--c-white);border:1px solid var(--c-border);border-radius:8px;cursor:pointer;font-size:.88rem;font-weight:500;transition:.12s;line-height:1.3;position:relative}.drug-mark-dot{position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;border:1.5px solid #fff}.drug-quality-dot{position:absolute;top:6px;right:20px;width:9px;height:9px;border-radius:50%;background:#7c3aed;border:1.5px solid #fff}.drug-tag{display:inline-block;font-size:.65rem;font-weight:700;padding:1px 6px;border-radius:10px;margin:2px 2px 0 0;background:#e0f2fe;color:#0369a1;border:1px solid #bae6fd}
.drug-tag-SABA{background:#fef9c3;color:#854d0e;border:1px solid #fde047}
.drug-tag-SAMA{background:#ffedd5;color:#9a3412;border:1px solid #fdba74}
.drug-tag-LABA{background:#dcfce7;color:#166534;border:1px solid #86efac}
.drug-tag-LAMA{background:#d1fae5;color:#065f46;border:1px solid #6ee7b7}
.drug-tag-ICS{background:#ede9fe;color:#5b21b6;border:1px solid #c4b5fd}
.drug-tag-LTRA{background:#fce7f3;color:#9d174d;border:1px solid #f9a8d4}
.drug-tag-highlight{font-weight:700;padding:1px 5px;border-radius:6px}
.drug-chip:hover{border-color:var(--accent,var(--static-frame,#4aa8e0));background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 12%, var(--c-card,#fff))}

/* ── Drug detail ── */
.drug-detail{display:none}
.drug-detail.visible{display:block}
.drug-list-view{display:block}
.drug-list-view.hidden{display:none}
.back-btn{display:inline-flex;align-items:center;gap:6px;color:var(--c-muted);font-size:.88rem;cursor:pointer;margin-bottom:16px;background:none;border:none;padding:0}
.back-btn:hover{color:var(--c-red)}
.drug-title{font-size:1.5rem;font-weight:700;margin-bottom:4px}
.trade-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.trade-pill{background:var(--c-orange-light);color:var(--c-orange);font-size:.8rem;padding:3px 11px;border-radius:20px;font-weight:600}
.cat-badge{background:var(--c-blue-light);color:var(--c-blue);font-size:.78rem;padding:3px 11px;border-radius:20px;font-weight:600;margin-bottom:16px;display:inline-block}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
@media(max-width:640px){.info-grid{grid-template-columns:1fr}}
.info-card{padding:16px;border-radius:8px}
.info-card.indication{background:#eaf5ee;border:1px solid #b7e4c7}
.info-card.dosage{background:#eff6ff;border:1px solid #bfdbfe}
.info-card.side_effects{background:#fff8e6;border:1px solid #fde68a}
.info-card.contraindications{background:#fdecea;border:1px solid #fca5a5}
.info-card.interactions{background:#f0f4ff;border:1px solid #c7d7f9}
.info-card.pregnancy{background:#fdf2f8;border:1px solid #f9c9e0}
.info-card.pregnancy .info-label{color:#9d2463}
[data-theme="dark"] .info-card.pregnancy{background:linear-gradient(rgba(236,72,153,.14),rgba(236,72,153,.14)),#1c2129;border-color:rgba(236,72,153,.4)}
[data-theme="dark"] .info-card.pregnancy .info-label{color:#f9a8d4}
.info-card.mechanism{background:#eff6ff;border:1px solid #bfdbfe}
.info-card.renal{background:#f0fdf4;border:1px solid #86efac}
.info-label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.info-card.indication .info-label{color:#166534}
.info-card.dosage .info-label{color:#1d4ed8}
.info-card.side_effects .info-label{color:#92400e}
.info-card.contraindications .info-label{color:#991b1b}
.info-card.interactions .info-label{color:#3730a3}
.info-card.mechanism .info-label{color:#1e40af}
.info-card.renal .info-label{color:#166534}
/* ── Dark Mode: getoente dunkle Info-Karten mit hellem Text ── */
[data-theme="dark"] .info-card{color:var(--c-text)}
[data-theme="dark"] .info-card.indication{background:linear-gradient(rgba(34,197,94,.16),rgba(34,197,94,.16)),#1c2129;border-color:rgba(34,197,94,.4)}
[data-theme="dark"] .info-card.dosage{background:linear-gradient(rgba(59,130,246,.16),rgba(59,130,246,.16)),#1c2129;border-color:rgba(59,130,246,.4)}
[data-theme="dark"] .info-card.side_effects{background:linear-gradient(rgba(234,179,8,.16),rgba(234,179,8,.16)),#1c2129;border-color:rgba(234,179,8,.4)}
[data-theme="dark"] .info-card.contraindications{background:linear-gradient(rgba(239,68,68,.16),rgba(239,68,68,.16)),#1c2129;border-color:rgba(239,68,68,.4)}
[data-theme="dark"] .info-card.interactions{background:linear-gradient(rgba(99,102,241,.16),rgba(99,102,241,.16)),#1c2129;border-color:rgba(99,102,241,.4)}
[data-theme="dark"] .info-card.mechanism{background:linear-gradient(rgba(59,130,246,.16),rgba(59,130,246,.16)),#1c2129;border-color:rgba(59,130,246,.4)}
[data-theme="dark"] .info-card.renal{background:linear-gradient(rgba(34,197,94,.16),rgba(34,197,94,.16)),#1c2129;border-color:rgba(34,197,94,.4)}
[data-theme="dark"] .info-card.indication .info-label{color:#4ade80}
[data-theme="dark"] .info-card.dosage .info-label{color:#60a5fa}
[data-theme="dark"] .info-card.side_effects .info-label{color:#fbbf24}
[data-theme="dark"] .info-card.contraindications .info-label{color:#f87171}
[data-theme="dark"] .info-card.interactions .info-label{color:#a5b4fc}
[data-theme="dark"] .info-card.mechanism .info-label{color:#60a5fa}
[data-theme="dark"] .info-card.renal .info-label{color:#4ade80}
/* ── Dark Mode: Buttons ── */
[data-theme="dark"] .mark-btn.active-learned{background:rgba(34,197,94,.15);border-color:#16a34a;color:#4ade80}
[data-theme="dark"] .mark-btn.active-unsure{background:rgba(234,179,8,.15);border-color:#eab308;color:#fbbf24}
[data-theme="dark"] .mark-btn.active-todo{background:rgba(239,68,68,.15);border-color:#ef4444;color:#f87171}
[data-theme="dark"] .mark-btn.active-quality{background:rgba(124,58,237,.18);border-color:#7c3aed;color:#c4b5fd}
/* Dark Mode: nicht-aktive mark-btns neutral hellgrau */
[data-theme="dark"] .mark-btn{background:rgba(255,255,255,.06);border-color:#4b5159;color:#e5e7eb}
[data-theme="dark"] .mark-btn:hover{background:rgba(255,255,255,.12)}
[data-theme="dark"] .mark-btn[style*="--c-muted"]{color:#cbd1d9 !important}
/* aktive Zustaende erneut, damit sie die neutrale Regel ueberschreiben (Reihenfolge/Spezifitaet) */
[data-theme="dark"] .mark-btn.active-learned{background:rgba(34,197,94,.15);border-color:#16a34a;color:#4ade80}
[data-theme="dark"] .mark-btn.active-unsure{background:rgba(234,179,8,.15);border-color:#eab308;color:#fbbf24}
[data-theme="dark"] .mark-btn.active-todo{background:rgba(239,68,68,.15);border-color:#ef4444;color:#f87171}
[data-theme="dark"] .mark-btn.active-quality{background:rgba(124,58,237,.18);border-color:#7c3aed;color:#c4b5fd}
/* Bearbeiten-Button (admin/dev): weiss mit weisser Umrandung */
[data-theme="dark"] .mark-btn[id^="edit_"]{background:transparent;border-color:#ffffff;color:#ffffff}
[data-theme="dark"] .mark-btn[id^="edit_"]:hover{background:rgba(255,255,255,.1)}
[data-theme="dark"] .report-btn{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.5);color:#f87171}
[data-theme="dark"] .report-btn:hover{background:rgba(239,68,68,.25)}
.info-text{font-size:.9rem;line-height:1.6;white-space:pre-wrap}
.fachinformation-link{display:inline-flex;align-items:center;gap:6px;color:var(--c-blue);font-size:.88rem;text-decoration:none;padding:6px 14px;border:1.5px solid var(--c-blue);border-radius:8px;background:var(--c-blue-light)}
.fachinformation-link:hover{background:var(--c-blue-light);filter:brightness(.97)}
[data-theme="dark"] .fachinformation-link{background:rgba(74,168,224,.15);color:#7cc4ec;border-color:#4aa8e0}
[data-theme="dark"] .fachinformation-link:hover{background:rgba(74,168,224,.28);filter:none}

/* ── Practice config ── */
.practice-config{max-width:640px;margin:0 auto}
/* pt-ws-titel-breite-v1: Konfigurationsbereich so breit wie die anderen
   Trainer-Tabs. Die laufende Sitzung behaelt ihre eigene Breite. */
#page-ueben > #practiceConfig{max-width:none;margin:0}
.section-title{font-size:1.1rem;font-weight:700;margin-bottom:12px}
.checkbox-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-bottom:16px}
.check-item{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--c-white);border:1.5px solid var(--c-border);border-radius:8px;cursor:pointer;font-size:.9rem;transition:.12s}
.check-item:hover{border-color:var(--accent,var(--static-frame,#4aa8e0))}
.check-item.selected{border-color:var(--accent,var(--static-frame,#4aa8e0));background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 14%, var(--c-card,#fff));font-weight:600}
.check-item input{display:none}
.field-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.field-chip{padding:8px 16px;border-radius:20px;border:1.5px solid var(--c-border);cursor:pointer;font-size:.88rem;font-weight:500;background:var(--c-white);transition:.12s}
.field-chip:hover{border-color:var(--accent,var(--static-frame,#4aa8e0))}.field-chip.selected{border-color:var(--accent,var(--static-frame,#4aa8e0));background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 14%, var(--c-card,#fff))}
.mode-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.mode-card{padding:16px;border:2px solid var(--c-border);border-radius:10px;cursor:pointer;transition:.12s;text-align:center;background:var(--c-white)}
.mode-card:hover{border-color:var(--accent,var(--static-frame,#4aa8e0))}
.mode-card.selected{border-color:var(--accent,var(--static-frame,#4aa8e0));background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 14%, var(--c-card,#fff))}
.mode-card h4{font-size:.95rem;margin-bottom:4px}
.mode-card p{font-size:.8rem;color:var(--c-muted)}

/* ── Flashcard ── */
.flashcard-wrap{max-width:600px;margin:0 auto;text-align:center}
.progress-bar-wrap{height:6px;background:#e0e0e0;border-radius:3px;margin-bottom:20px}
.progress-bar-fill{height:100%;background:var(--accent,var(--static-frame,#4aa8e0));border-radius:3px;transition:.3s}
.progress-text{font-size:.85rem;color:var(--c-muted);margin-bottom:16px}
.flashcard{background:var(--c-white);border:2px solid var(--c-border);border-radius:16px;padding:32px 28px;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:.2s;position:relative;margin-bottom:16px}
.flashcard:hover{border-color:var(--accent,var(--static-frame,#4aa8e0))}
.flashcard .drug-q{font-size:1.3rem;font-weight:700;margin-bottom:8px}
.flashcard .field-q{font-size:.9rem;color:var(--c-muted);margin-bottom:20px}
.flashcard .tap-hint{font-size:.82rem;color:var(--c-muted);margin-top:16px}
.flashcard .answer{font-size:.95rem;line-height:1.7;text-align:left;white-space:pre-wrap;width:100%}
.flashcard-actions{display:flex;gap:10px;justify-content:center;margin-top:8px}

/* ── Multiple Choice ── */
.mc-wrap{max-width:680px;margin:0 auto}
.mc-question{font-size:1.1rem;font-weight:700;margin-bottom:6px}
.mc-drug-name{font-size:.9rem;color:var(--c-muted);margin-bottom:20px}
.mc-options{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.mc-option{padding:14px 18px;border:2px solid var(--c-border);border-radius:10px;cursor:pointer;font-size:.9rem;line-height:1.5;text-align:left;background:var(--c-white);transition:.12s}
.mc-option:hover:not(.disabled){border-color:var(--accent,var(--static-frame,#4aa8e0));background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 12%, var(--c-card,#fff))}
.mc-option.correct{border-color:var(--c-green);background:var(--c-green-light)!important;color:#166534;font-weight:600}
.mc-option.wrong{border-color:var(--c-red);background:var(--c-red-light)!important;color:#991b1b}
.mc-option.disabled{cursor:default}
.mc-stats{font-size:.85rem;color:var(--c-muted);margin-bottom:16px;display:flex;gap:16px;justify-content:center}
.mc-timer{font-size:.85rem;color:var(--c-muted)}
.score-screen{text-align:center;max-width:480px;margin:0 auto;padding:32px 0}
.score-big{font-size:3.5rem;font-weight:800;color:var(--c-red);margin-bottom:4px}
/* pt-trainer-ergebnis-v1 : Quote farbig nach Ergebnis.
   Die Grundregel bleibt rot -- Competitive, Tages-Challenge und Zeitrennen
   zeigen mit .score-big eine Punktzahl, keine Prozentzahl, und vergeben
   deshalb keine dieser Stufen. Fuer --c-orange gibt es bereits einen
   eigenen Dark-Mode-Wert, ein neuer Farbwert waere unnoetig. */
.score-big.score-bad{color:var(--c-red)}
.score-big.score-mid{color:var(--c-orange)}
.score-big.score-ok{color:var(--c-green)}
.score-label{font-size:1rem;color:var(--c-muted);margin-bottom:24px}
.score-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f0f0f0;font-size:.9rem}
/* score-dark-fix */
[data-theme="dark"] .score-screen{background:var(--c-white);border:1px solid var(--c-border);border-radius:12px;padding:24px 20px;color:var(--c-text)}[data-theme="dark"] .score-row{border-bottom-color:var(--c-border)}[data-theme="dark"] .score-row span:first-child{color:var(--c-text)}[data-theme="dark"] .score-label{color:var(--c-muted)}

/* ── Leaderboard ── */
.leaderboard-table{width:100%;border-collapse:collapse;font-size:.9rem;table-layout:fixed}
.leaderboard-table th{text-align:left;padding:10px 14px;border-bottom:2px solid var(--c-border);font-size:.82rem;color:var(--c-muted);text-transform:uppercase;letter-spacing:.04em}
.leaderboard-table td{padding:10px 14px;border-bottom:1px solid #f0f0f0}
.leaderboard-table td:nth-child(2){overflow:hidden;text-overflow:ellipsis}
.leaderboard-table td:first-child{white-space:nowrap}
@media(max-width:600px){.leaderboard-table{font-size:.82rem}.leaderboard-table th,.leaderboard-table td{padding:8px 4px}.leaderboard-table td:first-child,.leaderboard-table th:first-child{padding-left:10px;padding-right:8px}.leaderboard-table td:last-child,.leaderboard-table th:last-child{padding-right:8px}.rank-pill{min-width:20px;padding:3px 6px;font-size:.66rem}}
.leaderboard-table tr.me td{background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 12%, transparent);font-weight:600}
.rank-medal{font-size:1.1rem}
.lb-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:.85rem}
.rank-pill{display:inline-block;min-width:30px;padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:700;white-space:nowrap;background:#eef1f4;color:#555;text-align:center}
.rank-pill.r1{background:linear-gradient(135deg,#f7d460,#e0a818);color:#5a4500}
.rank-pill.r2{background:linear-gradient(135deg,#dfe3e8,#b4bcc6);color:#3a4250}
.rank-pill.r3{background:linear-gradient(135deg,#e3a96a,#c47b3c);color:#522e10}
.leaderboard-table tr.top1 td{background:#fffaf0}
.leaderboard-table tr.top2 td{background:#f7f8fa}
.leaderboard-table tr.top3 td{background:#fcf5ee}
.leaderboard-table tr.top1 td:first-child{border-left:3px solid #e0a818}
/* Top-1-Zeile von allen Rahmen-Effekten ausnehmen (Blau + Deluxe) */
html[data-blueframe="on"] .leaderboard-table tr.top1 td,
html[data-deluxe="on"] .leaderboard-table tr.top1 td{
  border:none !important;
  box-shadow:none !important;
  animation:none !important;
}
/* gold. Akzentlinie links bleibt erhalten */
html[data-blueframe="on"] .leaderboard-table tr.top1 td:first-child,
html[data-deluxe="on"] .leaderboard-table tr.top1 td:first-child{
  border-left:3px solid #e0a818 !important;
}
.leaderboard-table tr.top2 td:first-child{border-left:3px solid #b4bcc6}
.leaderboard-table tr.top3 td:first-child{border-left:3px solid #c47b3c}

/* ── Modal ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
/* pt-passwortregel-v1: 90svh dazu. 90vh meint auf Geraeten mit ein- und
   ausfahrender Adressleiste das GROSSE Ansichtsfenster -- das Fenster
   kann damit hoeher werden als der sichtbare Bereich, und mit offener
   Tastatur erst recht. 90vh bleibt als Rueckfall davor. */
.modal{background:var(--c-white);border-radius:12px;padding:28px;width:100%;max-width:440px;max-height:90vh;max-height:90svh;overflow-y:auto}

/* pt-passwortregel-v1: Rueckmeldung unter dem Passwortfeld und der
   aufklappbare Bereich fuer die beiden Codes. Beide nutzen dieselben
   Rundungen, Farben und Abstaende wie die uebrigen Fenster. */
.pw-feedback{margin:-6px 0 14px}
.pw-bar{height:6px;border-radius:999px;background:var(--c-border);overflow:hidden}
.pw-bar span{display:block;height:100%;width:0;border-radius:999px;transition:width .18s ease,background .18s ease}
.pw-note{font-size:.78rem;margin-top:5px;color:var(--c-muted);min-height:1.15em}
.pw-note.pw-ok{color:var(--c-green)}
.pw-note.pw-schwach{color:var(--c-red)}
.reg-optional{margin:0 0 14px;border:1px solid var(--c-border);border-radius:8px}
.reg-optional>summary{cursor:pointer;list-style:none;padding:9px 12px;font-size:.85rem;font-weight:600;color:var(--c-muted);display:flex;align-items:center;gap:7px}
.reg-optional>summary::-webkit-details-marker{display:none}
.reg-optional>summary::before{content:"\25b8";display:inline-block;transition:transform .15s ease}
.reg-optional[open]>summary::before{transform:rotate(90deg)}
.reg-optional-inner{padding:2px 12px 0}
.reg-optional-inner .form-group:last-child{margin-bottom:12px}
/* pt-startseite-gast-v1: "Ueber AccessMed" als grosses Fenster.
   Breiter als die uebrigen Fenster, weil der gespiegelte Inhalt aus
   #page-welcome auf 860px ausgelegt ist. */
/* pt-ueber-kopf-v1: oben Platz fuer den Schliessen-Knopf. Bei 22px begann die
   erste Karte genau dort, wo der Knopf sitzt -- ihre Rahmenlinien
   liefen durch ihn hindurch. */
.ueber-modal{max-width:900px;position:relative;padding:56px 22px 22px}
.ueber-modal .page{display:block !important}
.ueber-close{
  position:absolute;top:12px;right:14px;z-index:2;
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--c-border);background:var(--c-card);
  font-size:1.5rem;line-height:1;cursor:pointer;color:var(--c-muted);
  display:flex;align-items:center;justify-content:center;transition:.12s;
}
.ueber-close:hover{background:var(--c-bg);color:var(--c-text)}
@media(max-width:600px){
  .ueber-modal{padding:46px 16px 16px}
  .ueber-close{top:8px;right:10px;width:30px;height:30px;font-size:1.3rem}
}
.algo-modal{max-width:900px !important;padding:0;position:relative;background:var(--c-bg,#eef4fa)}
.algo-modal-close{position:absolute;top:14px;right:16px;z-index:5;width:34px;height:34px;border-radius:50%;border:1px solid var(--c-border,#dce3ec);background:var(--c-white,#fff);font-size:1.4rem;line-height:1;cursor:pointer;color:var(--c-muted,#8b97a6);display:flex;align-items:center;justify-content:center;transition:.12s}
.algo-modal-close:hover{background:var(--c-bg,#eef4fa);color:var(--c-text,#2a3441)}
#algoModalBody{padding:24px}
.algo-layout{display:flex;gap:16px;align-items:flex-start}
.algo-minimap{flex:0 0 200px;background:var(--c-white,#fff);border-radius:14px;padding:14px;box-shadow:0 1px 3px rgba(0,0,0,.06);position:sticky;top:0}
.algo-mm-title{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--c-muted,#8b97a6);margin-bottom:10px}
.algo-mm-node{display:flex;align-items:stretch;gap:9px}
.algo-mm-dot-wrap{display:flex;flex-direction:column;align-items:center;flex:0 0 16px;padding-top:2px}
.algo-mm-dot{width:13px;height:13px;border-radius:50%;border:2px solid var(--track,#c7d2de);background:var(--c-white,#fff);flex:0 0 auto;transition:.15s;z-index:1}
.algo-mm-node.done .algo-mm-dot{background:var(--accent,var(--static-frame,#4aa8e0));border-color:var(--accent,var(--static-frame,#4aa8e0))}
.algo-mm-node.active .algo-mm-dot{background:#fff;border-color:#4aa8e0;box-shadow:0 0 0 3px rgba(74,168,224,.25)}
.algo-mm-node.result .algo-mm-dot{width:10px;height:10px;border-radius:3px}
.algo-mm-node.result.done .algo-mm-dot{background:#2e9e4f;border-color:#2e9e4f}
.algo-mm-line{width:2px;flex:1 0 auto;min-height:22px;margin:2px 0;background:var(--track,#c7d2de)}
.algo-mm-line.done{background:var(--accent,var(--static-frame,#4aa8e0))}
.algo-mm-label{font-size:.75rem;line-height:1.3;padding-bottom:14px;padding-top:1px;color:var(--c-muted,#8b97a6)}
.algo-mm-node.done .algo-mm-label{color:var(--c-text,#2a3441)}
.algo-mm-node.active .algo-mm-label{color:#2c7fb8;font-weight:700}
.algo-mm-node.result.done .algo-mm-label{color:#2e9e4f;font-weight:600}
.algo-mm-node.clickable .algo-mm-label{cursor:pointer}
.algo-mm-node.clickable .algo-mm-label:hover{text-decoration:underline}
.algo-focus{flex:1;min-width:0}
.algo-fcard{background:var(--c-white,#fff);border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.06);padding:24px 24px 26px}
.algo-step-badge{display:inline-block;font-size:.72rem;font-weight:700;color:#2c7fb8;background:#e6f4fb;padding:4px 12px;border-radius:20px;margin-bottom:14px}
.algo-q-big{font-size:1.35rem;font-weight:700;line-height:1.3;margin-bottom:22px}
.algo-opts{display:flex;flex-direction:column;gap:11px}
.algo-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px;border:2px solid var(--c-border,#dce3ec);border-radius:12px;background:var(--c-white,#fff);font-size:1.02rem;font-weight:600;cursor:pointer;transition:.14s;text-align:left;width:100%;color:var(--c-text,#2a3441)}
.algo-opt:hover{border-color:var(--accent,var(--static-frame,#4aa8e0));background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 6%, transparent);transform:translateY(-1px)}
.algo-opt .arr{color:var(--c-muted,#8b97a6);font-size:1.2rem;transition:.14s}
.algo-opt:hover .arr{color:var(--accent,var(--static-frame,#4aa8e0));transform:translateX(3px)}
.algo-result-card{background:#eaf7ef;border:2px solid #2e9e4f;border-radius:16px;padding:22px 24px}
.algo-result-tag{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#2e9e4f;margin-bottom:8px}
.algo-result-title{font-size:1.3rem;font-weight:700;margin-bottom:12px}
.algo-result-list{margin:0;padding-left:22px;line-height:1.85;font-size:1rem}
.algo-result-actions{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:720px){.algo-layout{flex-direction:column}.algo-minimap{flex:1 1 auto;width:100%;position:static}.algo-q-big{font-size:1.15rem}.algo-modal{max-width:100% !important}}
.modal h2{margin-bottom:20px;font-size:1.2rem}
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:.85rem;font-weight:600;margin-bottom:4px;color:var(--c-muted)}
/* pt-formfield-accent: Eingabefelder folgen der aktiven Rahmenfarbe */
.form-group input,.form-group select,.form-group textarea{width:100%;padding:9px 12px;border:1.5px solid var(--accent,var(--static-frame,var(--c-border)));border-radius:8px;font-size:.9rem;font-family:inherit}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--accent,var(--static-frame,#4aa8e0))}
.form-group textarea{min-height:80px;resize:vertical}
.form-error{color:var(--c-red);font-size:.82rem;margin-top:4px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}

/* ── Admin ── */
/* pt-admin-sidenav */
.admin-layout{display:flex;gap:18px;align-items:flex-start}
.admin-nav{flex:0 0 208px;width:208px;position:sticky;top:76px;max-height:calc(100vh - 96px);
  overflow-y:auto;background:var(--c-white);border:1.5px solid var(--accent,var(--static-frame,var(--c-border)));   /* pt-nav-accent */
  border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:2px}
.admin-nav-item{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  text-align:left;padding:9px 12px;border:none;border-radius:8px;background:none;cursor:pointer;
  font-size:.9rem;font-weight:500;color:var(--c-text,#15203a);transition:.12s;font-family:inherit}
.admin-nav-item:hover{background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 12%, transparent)}
.admin-nav-item.active{background:var(--accent,var(--static-frame,#4aa8e0));color:#fff;font-weight:700}
.admin-nav-sep{height:1px;background:var(--c-border);margin:6px 4px}
.admin-content{flex:1 1 0;min-width:0;max-width:100%;overflow-x:auto}
/* pt-admin-layout-fix: breite Tabellen duerfen die Spalte nicht sprengen */
.admin-layout{flex-wrap:nowrap}
.admin-content > div{max-width:100%}
.admin-content table.admin-table{max-width:100%;table-layout:auto}
@media(max-width:900px){
  /* pt-admin-mobile-fix: in der Spalten-Anordnung darf der Inhalt nicht
     auf Hoehe 0 kollabieren (flex-basis 0 + nowrap) */
  .admin-layout{flex-direction:column;flex-wrap:wrap}
  .admin-nav{position:static;width:100%;flex:0 0 auto;max-height:none;
    flex-direction:row;flex-wrap:wrap;gap:6px}
  .admin-nav-item{width:auto;flex:0 0 auto}
  .admin-nav-sep{display:none}
  .admin-content{flex:1 1 auto;width:100%;min-height:0;height:auto;overflow-x:auto}
}

.admin-table{width:100%;border-collapse:collapse;font-size:.88rem}
.admin-table th{text-align:left;padding:8px 12px;border-bottom:2px solid var(--c-border);color:var(--c-muted);font-size:.78rem;text-transform:uppercase}
.admin-table td{padding:8px 12px;border-bottom:1px solid #f0f0f0;vertical-align:top}
.admin-table tr:hover td{background:#fafafa}
.empty-state{text-align:center;padding:40px;color:var(--c-muted)}

/* ── Toast ── */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:#222;color:#fff;padding:10px 22px;border-radius:8px;font-size:.88rem;z-index:500;opacity:0;transition:.3s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* pt-toast-rahmen-v1: Die Erfolgsmeldung traegt die Rahmenfarbe statt
   eines festen Gruens -- dieselbe Kette wie Marken, Menues und Knoepfe.
   Rot bleibt rot: Ein Fehler ist keine Frage des Geschmacks. */
.toast.success{background:var(--accent,var(--static-frame,#4aa8e0))}
html[data-blueframe="on"]:not([data-deluxe="on"]) .toast.success{
  background:var(--static-frame,#4aa8e0)}
html[data-deluxe="on"] .toast.success{
  background:var(--dlx-grad);background-size:200% auto}
.toast.error{background:var(--c-red)}

.report-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:1.5px solid #f5c6c4;background:#fdecea;color:#c0392b;border-radius:8px;font-size:.82rem;cursor:pointer}
.report-btn:hover{background:#fbd0cc}
.report-panel{display:none;margin-top:12px;padding:14px;background:#fff8f8;border:1px solid #f5c6c4;border-radius:8px}
.report-panel.open{display:block}

.shop-item{padding:12px;border:2px solid var(--c-border);border-radius:10px;cursor:pointer;text-align:center;transition:.12s;background:var(--c-white)}
.shop-item:hover{border-color:var(--c-orange)}
.shop-item.owned{border-color:var(--c-green);background:var(--c-green-light)}
.shop-item.active{border-color:var(--c-orange);background:#fff8e6}
.color-preview{width:100%;height:28px;border-radius:6px;margin-bottom:6px}
.shop-name{font-size:.85rem;font-weight:600;margin-bottom:2px}
.shop-cost{font-size:.78rem;color:var(--c-muted)}
.username-colored{font-weight:700}
.comp-title{font-size:2rem;font-weight:800;letter-spacing:.05em;margin:8px 0 4px;background:linear-gradient(90deg,#2563eb,#4aa8e0,#2563eb);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:nameGrad 3s linear infinite}
.comp-sub{color:var(--c-muted);font-size:.9rem;margin-bottom:22px}
.comp-trophy{font-size:2.6rem;margin-bottom:4px}
.comp-hud{display:flex;gap:10px;justify-content:center;margin-bottom:24px;flex-wrap:wrap}
.comp-hud-box{background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 12%, transparent);border:1px solid color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 35%, transparent);border-radius:10px;padding:12px 16px;min-width:90px}
.comp-hud-box .v{font-size:1.3rem;font-weight:800;color:#2563eb}
.comp-hud-box .l{font-size:.68rem;color:#5a7a92;text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.comp-cta{width:100%;padding:14px;font-size:1rem;font-weight:700;letter-spacing:.03em;color:#fff;background:var(--accent,var(--static-frame,#4aa8e0));border:none;border-radius:10px;cursor:pointer;transition:transform .15s,background .15s}
.comp-cta:hover{background:#3a98d0;transform:translateY(-1px)}
@keyframes nameGrad{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.username-animgrad{font-weight:700;background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:nameGrad 3s linear infinite}

.mark-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:8px;border:1.5px solid var(--c-border);cursor:pointer;font-size:.82rem;font-weight:500;background:var(--c-white);transition:.12s}
.mark-btn:hover{opacity:.85}
.notif-badge{display:none;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:999px;background:#ef4444;color:#fff;font-size:.7rem;font-weight:700;line-height:1;vertical-align:middle}
.notif-badge.show{display:inline-flex}
.mark-btn.active-learned{background:#eaf5ee;border-color:#16a34a;color:#166534}
.mark-btn.active-unsure{background:#fefce8;border-color:#eab308;color:#854d0e}
.mark-btn.active-todo{background:#fef2f2;border-color:#ef4444;color:#991b1b}
.mark-btn.active-quality{background:#f5f3ff;border-color:#7c3aed;color:#5b21b6}
.quality-dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:#7c3aed;vertical-align:-1px}
.cat-quality-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#7c3aed;vertical-align:middle}
html[data-hidequalitydots="on"] .drug-quality-dot,html[data-hidequalitydots="on"] .cat-quality-dot{display:none !important}

/* pt-global-footer-css */
#ptFooter{order:99;margin-top:auto;padding:20px 16px;border-top:1px solid var(--c-border,#e0e0e0);background:var(--c-bg,#fafafa)}
.pt-footer-inner{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between}
.pt-footer-text{font-size:.8rem;color:var(--c-muted,#777);line-height:1.5;flex:1;min-width:240px}
.pt-footer-links{display:flex;gap:18px;flex-wrap:wrap}
.pt-footer-links a{font-size:.8rem;color:var(--accent,var(--static-frame,#4aa8e0));text-decoration:none;white-space:nowrap;cursor:pointer}
.pt-footer-links a:hover{text-decoration:underline}
.pt-legal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;align-items:center;justify-content:center;padding:20px}
.pt-legal-overlay.visible{display:flex}
.pt-legal-box{position:relative;background:var(--c-white,#fff);color:var(--c-text,#222);max-width:560px;width:100%;max-height:80vh;overflow-y:auto;border-radius:12px;padding:28px 26px;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.pt-legal-close{position:absolute;top:12px;right:14px;background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--c-muted,#888)}


/* pt-premium-gating-css */
/* pt-sperrhoehe-v1: Sperrflaeche und Karte liegen in derselben
   Grid-Zelle. Dadurch bestimmt die hoehere von beiden die Hoehe des
   Containers -- die Karte kann nicht mehr abgeschnitten werden, egal
   wie wenig Inhalt dahinter liegt. Vorher lag die Karte absolut und
   trug nichts zur Hoehe bei. */
.pt-lock-wrap{position:relative;display:grid;border-radius:12px;overflow:hidden}
.pt-lock-wrap>.pt-lock-blur{grid-area:1/1}
.pt-lock-wrap>.pt-lock-overlay{grid-area:1/1;position:static;inset:auto}
.pt-lock-blur{filter:blur(6px);pointer-events:none;user-select:none;opacity:.55;min-height:240px}
.pt-lock-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:28px 24px;box-sizing:border-box;background:rgba(255,255,255,.35)}
[data-theme="dark"] .pt-lock-overlay{background:rgba(20,20,28,.45)}
.pt-lock-badge{font-size:2.2rem;line-height:1}
.pt-lock-title{font-weight:700;font-size:1.05rem;color:var(--c-text,#222)}
.pt-lock-sub{font-size:.85rem;color:var(--c-muted,#666);max-width:360px;line-height:1.5}
.pt-upgrade-btn{margin-top:4px;padding:9px 20px;border:none;border-radius:999px;background:var(--accent,var(--static-frame,#4aa8e0));color:#fff;font-weight:700;font-size:.9rem;cursor:pointer}
.pt-upgrade-btn:hover{filter:brightness(1.05)}
/* pt-gastansicht-v1: Gesperrte Seiten zeigen nur einen Ausschnitt ihrer
   Oberflaeche -- eine endlos weichgezeichnete Seite waere keine Vorschau,
   sondern eine Wand. Die Karte sitzt oben, damit sie auch bei hohem
   Ausschnitt im Blick bleibt.
   pt-sperrhoehe-v1: Gedeckelt wird nur die Vorschau, nicht der Container --
   sonst schnitte die Deckelung die Karte ab, sobald diese hoeher wird als
   der Ausschnitt (schmale Fenster, langer Text). */
.pt-lock-slice>.pt-lock-blur{max-height:560px;overflow:hidden;min-height:0}
.pt-lock-slice>.pt-lock-overlay{justify-content:flex-start;padding-top:52px;padding-bottom:32px}
.kb-blind{opacity:.5;letter-spacing:.04em}
.kb-toc-locked{opacity:.55;cursor:pointer}
/* pt-labdd-ui-v1: Labor-Differenzialdiagnose */
.labdd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.labdd-feld{display:flex;flex-direction:column;gap:3px;padding:8px;border-radius:8px;border:1px solid transparent}
.labdd-feld input{width:100%;padding:8px 10px;border:1px solid var(--c-border);border-radius:7px;
  font-size:.92rem;background:var(--c-white,#fff);color:var(--c-text)}
.labdd-label{font-size:.8rem;font-weight:500;color:var(--c-text)}
.labdd-ref,.labdd-hinweis{font-size:.72rem;color:var(--c-muted);min-height:1em}
.labdd-hinweis{font-weight:600}
.labdd-check{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;
  border:1px solid transparent;font-size:.86rem;cursor:pointer}
.labdd-check input{width:16px;height:16px;flex:none;cursor:pointer}
.labdd-mark{background:rgba(74,168,224,.10);border-color:rgba(74,168,224,.45)}
/* Ampel am Eingabefeld -- Farben folgen dem Status aus get_field_status */
.labdd-mild input{border-color:#eab308}
.labdd-mild .labdd-hinweis{color:#a16207}
.labdd-moderate input{border-color:#f97316}
.labdd-moderate .labdd-hinweis{color:#c2410c}
.labdd-critical input{border-color:#ef4444}
.labdd-critical .labdd-hinweis{color:#b91c1c}
.labdd-danger input{border-color:#dc2626;background:rgba(220,38,38,.06)}
.labdd-danger .labdd-hinweis{color:#991b1b}
.labdd-implausible input{border-color:#7c3aed;background:rgba(124,58,237,.06)}
.labdd-implausible .labdd-hinweis{color:#6d28d9}
.labdd-warnungen ul{margin:0;padding-left:1.1em;font-size:.87rem;line-height:1.55}
.labdd-warnungen li{margin-bottom:5px;padding-left:4px}
.labdd-warn-red{color:#b91c1c;font-weight:600}
.labdd-warn-orange{color:#c2410c}
html[data-theme="dark"] .labdd-warn-red{color:#fca5a5}
html[data-theme="dark"] .labdd-warn-orange{color:#fdba74}
.labdd-calc{border:1px solid var(--c-border);border-radius:8px;padding:10px}
.labdd-block{margin-top:10px}
.labdd-block-h{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--c-muted);margin-bottom:4px}
.labdd-block ul{margin:0;padding-left:1.1em;font-size:.86rem;line-height:1.55}
.labdd-block li{margin-bottom:3px}
.labdd-contra .labdd-block-h{color:#b91c1c}
.labdd-reco .labdd-block-h{color:#0369a1}
.labdd-fehlt .labdd-block-h{color:#a16207}
.labdd-urgency{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:2px 8px;border-radius:999px}
.labdd-urgency-emergency{background:#fee2e2;color:#991b1b}
.labdd-urgency-urgent{background:#ffedd5;color:#9a3412}
html[data-theme="dark"] .labdd-urgency-emergency{background:#3f1d1d;color:#fca5a5}
html[data-theme="dark"] .labdd-urgency-urgent{background:#3a2415;color:#fdba74}
.labdd-sofort{border-left:4px solid #dc2626}
.labdd-sofort-orange{border-left-color:#f97316}
.pt-premium-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;background:linear-gradient(90deg,#f0a830,#e6b800);color:#3a2c00;font-size:.7rem;font-weight:800;vertical-align:middle}
.pt-up-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:10000;align-items:center;justify-content:center;padding:20px}
.pt-up-overlay.visible{display:flex}
.pt-up-plan-tab{flex:1;background:var(--c-white,#fff);border:2px solid var(--c-border,#ddd);border-radius:12px;padding:12px 8px;cursor:pointer;text-align:center;color:var(--c-text,#222);transition:.15s}.pt-up-plan-tab.selected{border-color:var(--accent,var(--static-frame,#4aa8e0));background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 14%, transparent)}html[data-theme="dark"] .pt-up-plan-tab.selected{background:rgba(74,168,224,.15)}
.pt-up-box{position:relative;background:var(--c-white,#fff);color:var(--c-text,#222);max-width:520px;width:100%;max-height:85vh;overflow-y:auto;border-radius:16px;padding:30px 28px;box-shadow:0 16px 50px rgba(0,0,0,.35)}
.pt-up-close{position:absolute;top:12px;right:16px;background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--c-muted,#888)}
.pt-up-feat{display:flex;gap:12px;align-items:flex-start;margin:14px 0}
.pt-up-feat .ic{font-size:1.4rem;line-height:1.2}
.pt-up-feat .tx b{display:block;font-size:.95rem}
.pt-up-feat .tx span{font-size:.85rem;color:var(--c-muted,#666);line-height:1.45}


/* pt-shop-premium-css */
.shop-item{position:relative}
.pt-shop-prem-pill{position:absolute;top:6px;left:6px;z-index:2;font-size:.58rem;font-weight:800;padding:1px 6px;border-radius:999px;background:linear-gradient(90deg,#f0a830,#e6b800);color:#3a2c00}
.pt-shop-lock{position:absolute;top:6px;right:6px;z-index:2;font-size:.85rem;opacity:.85}
.pt-shop-locked{opacity:.6}


/* disclaimer-dark */
html[data-theme="dark"] .disclaimer-box {
  background: #16202c !important;
  border-color: #243445 !important;
  color: #8b95a1 !important;
}
html[data-theme="dark"] .disclaimer-box b {
  color: #8b95a1 !important;
}

/* cat-info-dark */
[data-theme="dark"] .cat-info {
  background: #16202c !important;
  color: #aeb8c4 !important;
}

/* mc-option-dark */
[data-theme="dark"] .mc-option {
  color: #e6e8eb !important;
}
[data-theme="dark"] .mc-option:hover:not(.disabled) {
  background: #243447 !important;
}
[data-theme="dark"] .mc-option.correct { color: #86efac !important; }
[data-theme="dark"] .mc-option.wrong { color: #fca5a5 !important; }

/* nice confirm modal */
.nc-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:99999;opacity:0;transition:opacity .15s;backdrop-filter:blur(2px)}
.nc-overlay.show{opacity:1}
.nc-box{background:var(--c-white);border-radius:14px;max-width:380px;width:calc(100% - 48px);padding:22px 22px 18px;box-shadow:0 18px 50px rgba(0,0,0,.28);transform:translateY(8px) scale(.98);transition:transform .15s}
.nc-overlay.show .nc-box{transform:none}
.nc-title{font-weight:700;font-size:1.05rem;margin-bottom:8px;color:var(--c-text)}
.nc-msg{font-size:.92rem;line-height:1.5;color:var(--c-muted);margin-bottom:18px;white-space:pre-line}
.nc-actions{display:flex;gap:10px;justify-content:flex-end}
.nc-btn{padding:9px 18px;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;border:1px solid var(--c-border);transition:.12s}
.nc-btn-cancel{background:var(--c-white);color:var(--c-text)}
.nc-btn-cancel:hover{background:var(--c-bg)}
.nc-btn-ok{background:var(--accent,var(--static-frame,#4aa8e0));color:#fff;border-color:var(--accent,var(--static-frame,#4aa8e0))}
.nc-btn-ok:hover{filter:brightness(.95)}
.nc-btn-ok.danger{background:#e63946;border-color:#e63946}

/* settings two-column (admin) */
#settingsCols{display:flex;gap:24px;align-items:flex-start}
#scLeft,#scRight{flex:1;min-width:0}
#settingsCols #scRight{border-left:1px solid var(--c-border);padding-left:24px}
@media(max-width:640px){ #settingsCols #scRight{border-left:none;padding-left:0;border-top:1px solid var(--c-border);padding-top:8px}}
#scRight:empty{display:none}
#settingsModal .modal.has-admin-cols{max-width:1150px !important}
#scRight .sc-admin-head{font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:var(--c-muted);padding:4px 0 2px;border-bottom:2px solid var(--c-border);margin-bottom:4px}
@media(max-width:640px){ #settingsCols{flex-direction:column;gap:0} #settingsModal .modal.has-admin-cols{max-width:480px}}

.kb-det-learned{background:transparent;border:1.5px solid var(--c-border);color:var(--c-muted);
  border-radius:8px;padding:5px 12px;font-size:.82rem;font-weight:600;cursor:pointer;white-space:nowrap}
.kb-det-learned:hover{border-color:var(--accent,var(--static-frame,#4aa8e0))}
.kb-det-learned.on{background:rgba(45,158,90,.12);border-color:#2d9e5a;color:#2d9e5a}

/* pt-tpl-mobile: Vorlagen-Knoepfe brechen am Handy um */
.tpl-btns{display:inline-flex;gap:4px;flex-wrap:wrap}
@media(max-width:700px){
  .tpl-btns{display:flex;width:100%;margin-top:6px;justify-content:flex-start}
  .tpl-btns .btn{flex:0 0 auto;padding:4px 10px;font-size:.78rem}
}

/* user background image */
/* pt-bg-ausschnitt-v1: --bg-pos sagt, welcher Teil des Bildes zu sehen
   ist. Ohne Angabe die Mitte, also genau wie bisher. */
html[data-bg="on"] body::before{content:'';position:fixed;inset:0;z-index:-2;background-image:var(--bg-img);background-size:cover;background-position:var(--bg-pos,50%) center}
html[data-bg="on"] body::after{content:'';position:fixed;inset:0;z-index:-1;background:rgba(255,255,255,var(--bg-ov,.55))}
html[data-bg="on"][data-theme="dark"] body::after{background:rgba(15,18,24,var(--bg-ov,.55))}
html[data-bg="on"] body{background:transparent}

.ae-freq-btn{padding:5px 12px;border:1px solid var(--c-border);border-radius:999px;background:var(--c-white);color:var(--c-text);font-size:.82rem;cursor:pointer}
.ae-freq-btn.active{background:var(--accent,var(--static-frame,#4aa8e0));color:#fff;border-color:var(--accent,var(--static-frame,#4aa8e0))}
.ae-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.7rem;font-weight:600;margin-top:4px}
.ae-badge.haeufig{background:#fde8e8;color:#c0392b}
.ae-badge.gelegentlich{background:#fdf3e0;color:#b8860b}
.ae-badge.selten{background:#eee;color:#666}
/* pt-nw-manuell-v1: Die uebrigen vier Haeufigkeiten. Der Katalog kennt seit
   pt-nw-detail-v1 sieben Klassen, das Abzeichen hatte Farben fuer drei --
   'sehr haeufig', 'sehr selten' und 'nicht bekannt' erschienen seither als
   farblose Pille, obwohl es fuer sie schon Filterknoepfe gab. Die Toene sind
   dieselben wie in AE_FREQ_COLOR (app.js), damit Karte und Klinik-Tab
   dieselbe Sprache sprechen. */
.ae-badge.sehr_haeufig{background:#fbdedb;color:#96281b}
.ae-badge.sehr_selten{background:#eaf0e2;color:#556b2f}
.ae-badge.nicht_bekannt{background:#e8edf1;color:#5a6b7a}
.ae-badge.ohne_angabe{background:#ededed;color:#666}
/* Auf dunklem Grund sind diese Textfarben zu dunkel. Die Flaeche wird zur
   getoenten Durchsicht, die Schrift hell -- das gilt auch fuer die drei
   bestehenden Klassen, die bis hierher im Dunkelmodus nur mitgeschleppt
   wurden. */
[data-theme="dark"] .ae-badge.sehr_haeufig{background:rgba(150,40,27,.24);color:#ef8073}
[data-theme="dark"] .ae-badge.haeufig{background:rgba(192,57,43,.24);color:#f2867a}
[data-theme="dark"] .ae-badge.gelegentlich{background:rgba(184,134,11,.24);color:#e0b64a}
[data-theme="dark"] .ae-badge.selten{background:rgba(122,122,46,.24);color:#c3c36a}
[data-theme="dark"] .ae-badge.sehr_selten{background:rgba(85,107,47,.24);color:#a8bf7d}
[data-theme="dark"] .ae-badge.nicht_bekannt{background:rgba(90,107,122,.24);color:#a9bccb}
[data-theme="dark"] .ae-badge.ohne_angabe{background:rgba(128,128,128,.20);color:#b0b0b0}
[data-mode] .ae-acc-head{cursor:pointer}

.ae-mode-btn{padding:8px 16px;border:1px solid var(--c-border);border-radius:8px;background:var(--c-white);cursor:pointer;font-size:.9rem;font-weight:600;color:var(--c-text)}
.ae-mode-btn.active{background:var(--accent,var(--static-frame,#4aa8e0));color:#fff;border-color:var(--accent,var(--static-frame,#4aa8e0))}
.ae-pick{padding:6px 10px;border:1px solid var(--c-border);border-radius:16px;background:var(--c-white);cursor:pointer;font-size:.82rem;color:var(--c-text)}
.ae-pick:hover{border-color:var(--accent,var(--static-frame,#4aa8e0))}
.ae-pick.sel{background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 14%, var(--c-card,#fff));border-color:var(--accent,var(--static-frame,#4aa8e0));font-weight:600}
.ae-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;background:#E6F4FB;border:1px solid #4aa8e0;border-radius:16px;font-size:.82rem;color:#1a3a5c}
.ae-chip b{cursor:pointer;font-weight:700;color:#c0392b}
.ae-matrix{border-collapse:collapse;width:100%;font-size:.85rem}
.ae-matrix th,.ae-matrix td{border:1px solid var(--c-border);padding:6px 10px;text-align:center}
.ae-matrix thead th{background:var(--c-bg);font-weight:600;color:var(--c-text)}
.ae-matrix-drug{text-align:left;font-weight:600;cursor:pointer;color:var(--accent,var(--static-frame,#4aa8e0));white-space:nowrap}
.ae-matrix-drug:hover{text-decoration:underline}
.ae-matrix-empty{color:var(--c-border)}
[data-theme="dark"] .ae-mode-btn{background:#1a1f27;color:#e6e8eb}
[data-theme="dark"] .ae-mode-btn.active{background:#4aa8e0;color:#fff}
[data-theme="dark"] .ae-pick{background:#1a1f27;color:#e6e8eb}
[data-theme="dark"] .ae-pick.sel{background:#16243a;color:#cfe6f5}
[data-theme="dark"] .ae-chip{background:#16243a;color:#cfe6f5}

.clinic-wipe{position:absolute;top:0;bottom:0;left:0;width:100%;pointer-events:none;z-index:50;overflow:hidden}
.clinic-wipe .clinic-wipe-bar{position:absolute;top:0;bottom:0;width:130%;will-change:transform;
  /* Form: Zugspitze vorne (rechts), gespiegelt eingekerbtes Heck (links) */
  clip-path:polygon(0% 0%, 88% 0%, 100% 50%, 88% 100%, 0% 100%, 12% 50%);
  /* pt-wipe-solid: einfarbig in der Akzentfarbe */
  background:var(--accent,var(--static-frame,#4aa8e0));
  box-shadow:0 0 14px color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 50%, transparent)}
/* Klinik->Lern: nach links -> ganze Form horizontal spiegeln, Spitze zeigt nach links */
.clinic-wipe.rl .clinic-wipe-bar{transform-origin:center;
  clip-path:polygon(12% 0%, 100% 0%, 88% 50%, 100% 100%, 12% 100%, 0% 50%);
  background:var(--accent,var(--static-frame,#4aa8e0))}
@keyframes clinicWipeLR{0%{transform:translateX(-140%)}100%{transform:translateX(100%)}}
@keyframes clinicWipeRL{0%{transform:translateX(100%)}100%{transform:translateX(-140%)}}
.clinic-wipe.lr .clinic-wipe-bar{animation:clinicWipeLR .7s ease-in-out forwards}
.clinic-wipe.rl .clinic-wipe-bar{animation:clinicWipeRL .7s ease-in-out forwards}

.wirkstoffe-sub-clinic{display:none}
html:not([data-mode="learn"]) .wirkstoffe-sub-learn{display:none}
html:not([data-mode="learn"]) .wirkstoffe-sub-clinic{display:inline}

.card{position:relative}
.tab-info-btn{position:absolute;top:16px;right:18px;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--accent,var(--static-frame,#4aa8e0));background:var(--c-white);color:var(--accent,var(--static-frame,#4aa8e0));font-size:1rem;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;transition:background .15s}
.tab-info-btn:hover{background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 14%, transparent)}
[data-theme="dark"] .tab-info-btn{background:#1a1f27}
[data-theme="dark"] .tab-info-btn:hover{background:#16243a}
#tabInfoModal .modal{max-width:520px}
#tabInfoBody{font-size:.92rem;line-height:1.55;color:var(--c-text)}
#tabInfoBody b{color:var(--accent,var(--static-frame,#4aa8e0))}

.nephro-drug-btn{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left}
.nephro-drug-nm{font-weight:500;line-height:1.2}
.nephro-drug-tn{font-size:.72rem;color:var(--c-muted);line-height:1.15}
.nephro-drug-btn.selected .nephro-drug-tn{color:rgba(255,255,255,.85)}
.nephro-drug-btn:hover .nephro-drug-tn{color:#3a6a8c}

/* Easter-Egg Pfeil-Farben (gleiche Form wie Standard) */
.clinic-wipe.egg-gold .clinic-wipe-bar{
  background:linear-gradient(105deg,#8a6d1f 0%,#8a6d1f 26%,#d4af37 26%,#d4af37 30.5%,#8a6d1f 30.5%,#8a6d1f 32%,#d4af37 32%,#d4af37 34.5%,#8a6d1f 34.5%,#8a6d1f 36%,#d4af37 36%,#d4af37 38.5%,#8a6d1f 38.5%,#8a6d1f 40%,#d4af37 40%,#d4af37 100%)!important;
  box-shadow:0 0 18px rgba(212,175,55,.7)!important}
.clinic-wipe.egg-gold.rl .clinic-wipe-bar{
  background:linear-gradient(255deg,#8a6d1f 0%,#8a6d1f 26%,#d4af37 26%,#d4af37 30.5%,#8a6d1f 30.5%,#8a6d1f 32%,#d4af37 32%,#d4af37 34.5%,#8a6d1f 34.5%,#8a6d1f 36%,#d4af37 36%,#d4af37 38.5%,#8a6d1f 38.5%,#8a6d1f 40%,#d4af37 40%,#d4af37 100%)!important}
.clinic-wipe.egg-pink .clinic-wipe-bar{
  background:linear-gradient(105deg,#a02060 0%,#a02060 26%,#ff4fa3 26%,#ff4fa3 30.5%,#a02060 30.5%,#a02060 32%,#ff4fa3 32%,#ff4fa3 34.5%,#a02060 34.5%,#a02060 36%,#ff4fa3 36%,#ff4fa3 38.5%,#a02060 38.5%,#a02060 40%,#ff4fa3 40%,#ff4fa3 100%)!important;
  box-shadow:0 0 18px rgba(255,79,163,.7)!important}
.clinic-wipe.egg-pink.rl .clinic-wipe-bar{
  background:linear-gradient(255deg,#a02060 0%,#a02060 26%,#ff4fa3 26%,#ff4fa3 30.5%,#a02060 30.5%,#a02060 32%,#ff4fa3 32%,#ff4fa3 34.5%,#a02060 34.5%,#a02060 36%,#ff4fa3 36%,#ff4fa3 38.5%,#a02060 38.5%,#a02060 40%,#ff4fa3 40%,#ff4fa3 100%)!important}
.clinic-wipe.egg-green .clinic-wipe-bar{
  background:linear-gradient(105deg,#15803d 0%,#15803d 26%,#22c55e 26%,#22c55e 30.5%,#15803d 30.5%,#15803d 32%,#22c55e 32%,#22c55e 34.5%,#15803d 34.5%,#15803d 36%,#22c55e 36%,#22c55e 38.5%,#15803d 38.5%,#15803d 40%,#22c55e 40%,#22c55e 100%)!important;
  box-shadow:0 0 18px rgba(34,197,94,.7)!important}
.clinic-wipe.egg-green.rl .clinic-wipe-bar{
  background:linear-gradient(255deg,#15803d 0%,#15803d 26%,#22c55e 26%,#22c55e 30.5%,#15803d 30.5%,#15803d 32%,#22c55e 32%,#22c55e 34.5%,#15803d 34.5%,#15803d 36%,#22c55e 36%,#22c55e 38.5%,#15803d 38.5%,#15803d 40%,#22c55e 40%,#22c55e 100%)!important}
/* 5s-Override der Rahmenlinien + Logo-Pharm */
html[data-egg="gold"] .card,html[data-egg="gold"] .cat-header,html[data-egg="gold"] .drug-chip,html[data-egg="gold"] .nav-btn.active,html[data-egg="gold"] .tab-info-btn,html[data-egg="gold"] .ae-pick,html[data-egg="gold"] .nephro-drug-btn{border-color:#d4af37!important}
html[data-egg="gold"] .header{border-bottom-color:#d4af37!important}
html[data-egg="green"] .card,html[data-egg="green"] .cat-header,html[data-egg="green"] .drug-chip,html[data-egg="green"] .nav-btn.active,html[data-egg="green"] .tab-info-btn,html[data-egg="green"] .ae-pick,html[data-egg="green"] .nephro-drug-btn{border-color:#22c55e!important}
html[data-egg="green"] .header{border-bottom-color:#22c55e!important}
html[data-egg="green"] .logo-pharm{color:#22c55e!important}
html[data-egg="gold"] .logo-pharm{color:#d4af37!important}
html[data-egg="pink"] .card,html[data-egg="pink"] .cat-header,html[data-egg="pink"] .drug-chip,html[data-egg="pink"] .nav-btn.active,html[data-egg="pink"] .tab-info-btn,html[data-egg="pink"] .ae-pick,html[data-egg="pink"] .nephro-drug-btn{border-color:#ff4fa3!important}
html[data-egg="pink"] .header{border-bottom-color:#ff4fa3!important}
html[data-egg="pink"] .logo-pharm{color:#ff4fa3!important}
html[data-egg] .card,html[data-egg] .cat-header,html[data-egg] .logo-pharm{transition:border-color .4s,color .4s}
/* EGG-DLXGRAD-OVERRIDE: Deluxe-Rahmenlinien (::before nutzt --dlx-grad) fuer 5s auf Egg-Farbe zwingen. */
/* Inline --dlx-grad (Profil-Rahmen) wird nur von !important geschlagen. */
html[data-egg="gold"]{--dlx-grad:linear-gradient(90deg,#d4af37,#ffe9a3,#d4af37,#ffe9a3,#d4af37)!important}
html[data-egg="pink"]{--dlx-grad:linear-gradient(90deg,#ff4fa3,#ffb3d6,#ff4fa3,#ffb3d6,#ff4fa3)!important}
/* EGG-BURGER-OVERRIDE: Burger-Panel folgt der Egg-Farbe (Nicht-Deluxe-Fall: feste Border/blueframe). */
html[data-egg="gold"] .header.nav-collapsed .header-nav{border-color:#d4af37!important}
html[data-egg="pink"] .header.nav-collapsed .header-nav{border-color:#ff4fa3!important}
html[data-egg] .header.nav-collapsed .header-nav{transition:border-color .4s}
/* EGG-BEFORE-OVERRIDE: Deluxe-Rahmen zeichnen ::before mit background:var(--dlx-grad).
   Inline --dlx-grad schlaegt !important bei Custom Properties, daher hier background direkt setzen. */
html[data-egg="gold"] .card::before,html[data-egg="gold"] .cat-header::before,html[data-egg="gold"] .drug-chip::before,html[data-egg="gold"] .mode-card::before,html[data-egg="gold"] .leaderboard-table tr.top1 td::before,html[data-egg="gold"] .modal::before,html[data-egg="gold"] .header.nav-collapsed .header-nav::before{background:linear-gradient(90deg,#d4af37,#ffe9a3,#d4af37,#ffe9a3,#d4af37)!important}
html[data-egg="pink"] .card::before,html[data-egg="pink"] .cat-header::before,html[data-egg="pink"] .drug-chip::before,html[data-egg="pink"] .mode-card::before,html[data-egg="pink"] .leaderboard-table tr.top1 td::before,html[data-egg="pink"] .modal::before,html[data-egg="pink"] .header.nav-collapsed .header-nav::before{background:linear-gradient(90deg,#ff4fa3,#ffb3d6,#ff4fa3,#ffb3d6,#ff4fa3)!important}
html[data-egg="gold"] .header::after{background:linear-gradient(90deg,#d4af37,#ffe9a3,#d4af37,#ffe9a3,#d4af37)!important}
html[data-egg="pink"] .header::after{background:linear-gradient(90deg,#ff4fa3,#ffb3d6,#ff4fa3,#ffb3d6,#ff4fa3)!important}

/* pt-emoji-minimal-v1
   Deko-Emojis erscheinen nicht mehr -- auch nicht in den Ueberschriften.
   Frueher stand hier zusaetzlich eine Regel an html[data-emojis="off"];
   die ist entfallen, weil sie dasselbe tat und mit ihrem !important die
   Ausnahme fuer Ueberschriften ueberstimmte. Damit haengt die Darstellung
   auch nicht mehr davon ab, ob jemand angemeldet ist.
   Nicht betroffen sind Zeichen, die Bedeutung tragen und nicht in
   .deco-emoji stehen: Pfeile, Haken, Kreuze, Aufklapp-Carets, die
   Ampel-Markierungen, die Medaillen der Bestenliste, das Schloss an
   gesperrten Erfolgen und die Lupe im Such-Button. */
.deco-emoji{display:none}

.notif-badge.blue{background:#4aa8e0}

.ach-pop{min-width:280px;max-width:340px;background:var(--c-white);border:1px solid var(--c-border);border-left:5px solid #4aa8e0;border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.22);padding:12px 14px;display:flex;align-items:center;gap:12px;transform:translateX(120%);opacity:0;transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .45s;pointer-events:auto}
.ach-pop.show{transform:translateX(0);opacity:1}
.ach-pop .ap-icon{font-size:2rem;width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ach-pop .ap-kicker{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent,var(--static-frame,#4aa8e0))}
.ach-pop .ap-name{font-weight:700;font-size:.98rem;line-height:1.2;color:var(--c-text)}
.ach-pop .ap-sub{font-size:.75rem;color:var(--c-muted);margin-top:1px}
[data-theme="dark"] .ach-pop{background:#1a1f27}

.page.page-wide{max-width:1500px}
/* pt-profil-abstand-v1
   Der senkrechte Abstand im Profil-Raster kommt ausschliesslich aus dem
   margin-bottom:16px der Karten -- genau wie innerhalb einer Spalte, wo die
   Margins benachbarter Karten zu max(16,12)=16px verschmelzen.
   Rasterelemente verschmelzen ihre Margins NICHT: dort addierte sich frueher
   der row-gap von 18px dazu (Reihe 1 -> Wissensdatenbank: 34px) und bei der
   Karte danach zusaetzlich die 12px aus .card+.card (46px). Dieselbe Regel
   schob ausserdem die rechte Karte einer Reihe 12px tiefer als die linke.
   Deshalb: senkrecht kein Raster-Abstand, waagrecht bleiben die 18px, und
   der Geschwisterabstand gilt fuer direkte Rasterkinder nicht. */
.profile-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:18px;row-gap:0;align-items:start}
.profile-grid>.card+.card{margin-top:0}
.profile-col{min-width:0}
@media(max-width:1100px){.profile-grid{grid-template-columns:1fr;gap:0}}

/* pt-progress-grid-v1 --------------------------------------------------
   Die sechs Fortschrittskarten stehen in einem eigenen, gleichmaessigen
   Raster: links, was auf selbst gesetzten Markierungen beruht, rechts
   daneben die vom System berechnete Reihe.

   Zwei Spalten, ein einziger gap -- damit ist der Abstand zwischen den
   Karten waagrecht wie senkrecht derselbe. Die Karten haben deshalb kein
   eigenes margin mehr; ein zusaetzliches margin-bottom wuerde die Reihen
   weiter auseinanderziehen als die Spalten.

   Gleiche Hoehe je Reihe kommt vom Grid selbst (align-items ist stretch),
   unabhaengig davon, wie lang die Hinweiszeile einer Karte umbricht.

   Die letzte Regel ist die fuer spaeter: kommt ein siebter Trainer dazu,
   stuende seine Karte allein links und rechts bliebe eine Luecke.
   :last-child:nth-child(odd) trifft genau den Fall "letzte Karte hat eine
   ungerade Position, steht also allein in ihrer Reihe" und legt sie ueber
   beide Spalten. Das gilt fuer jede ungerade Anzahl von selbst -- am CSS
   ist beim Hinzufuegen weiterer Karten nichts mehr zu tun. */
.pt-progress-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:16px;grid-auto-rows:1fr}
.pt-progress-grid>.card{margin:0;min-width:0}
.pt-progress-grid>.card:last-child:nth-child(odd){grid-column:1/-1}
/* Gleiche Hoehe gilt fuer den Grundzustand. Klappt jemand eine Karte auf,
   waere sie sinnlos: alle sechs wuerden auf die Hoehe der aufgeklappten
   wachsen und fuenf davon stuenden fast leer. Die aufklappbaren Boxen
   tragen alle eine id auf ...Box und stehen zugeklappt auf display:none --
   ist eine davon offen, geben wir die Zeilenhoehe wieder frei. Browser
   ohne :has() ignorieren die Regel und behalten die feste Zeilenhoehe. */
.pt-progress-grid:has([id$="Box"]:not([style*="none"])){grid-auto-rows:auto}
@media(max-width:1100px){
  /* einspaltig: dann steht ohnehin jede Karte fuer sich, und die
     Ausnahme fuer die einzelne letzte Karte braucht es nicht mehr. */
  .pt-progress-grid{grid-template-columns:1fr;grid-auto-rows:auto}
  .pt-progress-grid>.card:last-child:nth-child(odd){grid-column:auto}
}

/* pt-profil-subgrid-v1 -------------------------------------------------
   Die Profilkarten liegen in zwei Spalten-Containern (.profile-col), also
   in zwei voneinander unabhaengigen Stapeln. Wie hoch eine Karte im linken
   Stapel sitzt, hing damit allein davon ab, wie hoch die Karten ueber ihr
   in DERSELBEN Spalte sind -- die rechte Spalte wusste nichts davon. Auf
   gleicher Hoehe standen die Paare nur, weil .pt-toprow beiden oberen
   Karten ein min-height:255px verpasste. Wird der Lernplan fuer Nutzer
   ohne Premium gesperrt, wird er hoeher als diese 255px, und ab da liegt
   die ganze rechte Spalte tiefer.

   Subgrid loest das an der Wurzel: beide Spalten uebernehmen die Zeilen
   des Elterngrids, statt eigene aufzumachen. Eine Zeile ist dann so hoch
   wie die hoechste Karte BEIDER Spalten, und das naechste Paar beginnt
   fuer beide auf derselben Linie -- ganz gleich, wie hoch die Kachel
   darueber ausfaellt. Keine gesetzte Hoehe, kein negativer Rand.

   grid-row spannt drei Zeilen. Sichtbar sind je Spalte derzeit nur zwei
   Karten -- die dritte Zeile deckt die Erfolge-Karte ab, die per
   #achvCard{display:none} ruht und sonst als drittes Kind links stuende.
   Bleibt eine Zeile leer, bekommt sie die Hoehe 0 und kostet nichts.
   align-self:stretch ist noetig, weil .profile-grid align-items:start
   setzt -- ohne das Gegenstueck wuerde .profile-col zusammenschrumpfen
   und die Zeilenteilung aufgeben. */
@supports (grid-template-rows: subgrid){
  @media(min-width:1101px){
    .profile-col{display:grid;grid-template-rows:subgrid;grid-row:span 3;align-self:stretch;row-gap:0}
    /* Karten fuellen ihre Zeile, damit ein Paar auch optisch gleich hoch
       abschliesst; die Zeilenhoehe gibt die hoehere der beiden vor. */
    .profile-col>.card{align-self:stretch}
  }
}

.qp-slots{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.qp-slots>div{min-width:0}
@media(max-width:700px){
  .qp-slots{display:flex;overflow-x:auto;gap:10px;padding-bottom:6px;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
  .qp-slots>div{flex:0 0 150px;scroll-snap-align:start}
}


@media(max-width:700px){
  .profile-head{flex-wrap:wrap}
  .profile-head-cur{margin-left:0!important;text-align:left!important;width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--c-border);padding-top:12px;margin-top:4px}
  .profile-head-cur>button{margin-top:0!important}
}

@media(max-width:700px){
  .profile-head{flex-wrap:wrap}
  .profile-head-cur{margin-left:0!important;text-align:left!important;width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--c-border);padding-top:12px;margin-top:4px}
  .profile-head-cur>button{margin-top:0!important}
}

.tpl-i{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:5px;border-radius:50%;border:1px solid var(--accent,var(--static-frame,#4aa8e0));background:transparent;color:var(--accent,var(--static-frame,#4aa8e0));font-size:.68rem;font-weight:700;font-family:inherit;line-height:1;cursor:pointer;vertical-align:middle;padding:0}
.tpl-i:hover{background:#4aa8e0;color:#fff}
.tpl-head{color:var(--accent,var(--static-frame,#4aa8e0));font-weight:700}
.tpl-pre{white-space:pre-wrap;word-break:break-word;font-family:inherit;font-size:.92rem;line-height:1.5;background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 5%, transparent);border:1px solid var(--c-border,#dfe7ec);border-radius:8px;padding:12px;margin:0}
[data-theme="dark"] .tpl-pre{background:rgba(255,255,255,.04)}
/* LUMINAMED_DS_SUB_NOWRAP */

@media (max-width:820px){ .ds-sub{white-space:normal !important;font-size:.85rem !important} }

/* ---- Block 2 von 15, urspruenglich ab Zeile 1458 ---- */
/* pt-stat-klassen-v1
   Zahl und Beschriftung der Kennzahlen-Kachel stehen jetzt in Klassen
   statt in neun einzelnen style-Attributen. Aendert sich die Groesse
   spaeter, gilt das damit fuer alle Felder zugleich -- vorher haette man
   neun Stellen nachziehen muessen und leicht eine uebersehen.
   Die Farbe bleibt am einzelnen Feld: sie unterscheidet sich je Kennzahl. */
.pt-stat-num{font-size:1.5rem;font-weight:700;line-height:1.1}
.pt-stat-lbl{font-size:.72rem;color:var(--c-muted)}
.pt-stat-lbl-top{margin-bottom:2px}

/* pt-stats-trainer-korrekt-v1
   Die Kennzahlen-Kachel laeuft ueber sechs Spalten, jedes Feld belegt
   zwei davon. Optisch bleibt es dreispaltig; der Umweg ueber sechs
   Spalten ist noetig, damit eine unvollstaendige letzte Reihe mittig
   sitzt statt linksbuendig mit Leerraum daneben.

   Bleibt ein Feld uebrig, beginnt es in Spalte 3 (Mitte). Bleiben zwei
   uebrig, beginnt das erste in Spalte 2, das zweite schliesst an -- die
   beiden stehen dann zusammen in der Mitte. Beides regelt sich von
   selbst, wenn spaeter Felder dazukommen; am CSS ist dann nichts zu tun.

   Die Kachel bleibt auf allen Breiten dreispaltig -- so war sie auch
   vorher schon. Ein einspaltiger Umbruch scheitert an der waagrechten
   Trennlinie: die ist mit width:calc(300% + 16px) auf drei Spalten
   ausgelegt und ragte einspaltig weit aus der Seite heraus. */
.pt-stat-grid{grid-template-columns:repeat(6,1fr)}
.pt-stat-grid>*{grid-column:span 2;min-width:0}
.pt-stat-grid>*:last-child:nth-child(3n+1){grid-column:3 / span 2}
.pt-stat-grid>*:nth-last-child(2):nth-child(3n+1){grid-column:2 / span 2}
/* pt-stats-rowline */.pt-stat-grid{position:relative}.pt-stat-grid::before,.pt-stat-grid::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--accent,var(--static-frame,#4aa8e0));opacity:.35;pointer-events:none}.pt-stat-grid::before{left:calc(33.333% - 1px)}.pt-stat-grid::after{left:calc(66.666% - 1px)}.pt-stat-row2{position:relative;margin-top:12px;padding-top:12px}.pt-stat-hline{position:relative}.pt-stat-hline::before{content:"";position:absolute;top:0;left:0;width:calc(300% + 16px);height:1px;background:var(--accent,var(--static-frame,#4aa8e0));opacity:.35}.pt-stat-sep{border:0}

/* ---- Block 3 von 15, urspruenglich ab Zeile 12807 ---- */
.kb-hero{max-width:820px;width:100%;margin:0 auto;text-align:center;background:var(--c-card);border:1px solid var(--c-border);border-radius:20px;padding:32px 26px 36px;box-shadow:0 12px 40px rgba(0,0,0,.28)}
.kb-hero h1{font-size:2.2rem;margin:0 0 6px}
.kb-searchwrap{position:relative;margin:22px auto 0;max-width:640px}
/* pt-kbsearch-accent-v1: Rahmenlinie folgt der gewaehlten Rahmenfarbe.
   Vorher stand hier nur var(--static-frame) -- damit blieb die Zeile auf
   der statischen Farbe stehen, sobald im Schnellprofil ein animierter
   Rahmen gewaehlt war, denn der setzt --accent. Die Reihenfolge
   accent -> static-frame -> Vorgabe ist die, die ueberall sonst in der
   App steht (Tutorial-Rahmen, Schnellprofil-Knoepfe, Kategorie-Infos). */
.kb-search{width:100%;padding:15px 22px;font-size:1.08rem;border:2px solid var(--accent,var(--static-frame,#4aa8e0));border-radius:999px;background:var(--c-card);color:var(--c-text);outline:none;box-shadow:inset 0 1px 3px rgba(0,0,0,.10)}
.kb-search:focus{border-color:var(--accent,var(--static-frame,#4aa8e0))}
/* kb-edgezone-css */
#kbEdgeZone{display:none}
html[data-mode='kb'] #page-wissen.active #kbEdgeZone,
html[data-mode='kb'] #page-wissen #kbEdgeZone{display:block;position:fixed;left:0;top:60px;bottom:0;width:calc(50% - 470px);min-width:40px;z-index:70;cursor:pointer;background:transparent}
/* Wenn Detail/Editor offen: Hotzone aus, damit Lesen nicht gestoert wird */
#page-wissen.detail-open #kbEdgeZone,#page-wissen.editor-open #kbEdgeZone{display:none!important}
@media(max-width:900px){html[data-mode='kb'] #page-wissen #kbEdgeZone{width:48px;min-width:48px}}
#ygoEdgeZone{display:none}
html[data-mode='kb'][data-ygo='1'] #page-wissen.active #ygoEdgeZone,
html[data-mode='kb'][data-ygo='1'] #page-wissen #ygoEdgeZone{display:block;position:fixed;right:0;top:60px;bottom:0;width:calc(50% - 470px);min-width:40px;z-index:70;cursor:pointer;background:transparent}
#page-wissen.detail-open #ygoEdgeZone,#page-wissen.editor-open #ygoEdgeZone{display:none!important}
@media(max-width:900px){html[data-mode='kb'][data-ygo='1'] #page-wissen #ygoEdgeZone{width:48px;min-width:48px}}
.kb-sugg{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--c-card);border:1px solid var(--c-border);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.14);z-index:60;overflow:hidden;text-align:left;display:none}
.kb-sugg.open{display:block}
.kb-sugg-item{padding:10px 16px;cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:center}
.kb-sugg-item:hover,.kb-sugg-item.sel{background:rgba(74,168,224,.14)}
.kb-sugg-meta{font-size:.78rem;color:var(--c-muted);white-space:nowrap}
.kb-dir-letter{font-weight:700;color:#4aa8e0;margin:18px 0 6px;font-size:1.05rem}
.kb-dir-item{padding:6px 0;border-bottom:1px solid var(--c-border);cursor:pointer;display:flex;justify-content:space-between;gap:12px}
.kb-dir-item:hover{color:#4aa8e0}
.kb-empty{color:var(--c-muted);padding:14px 0}
#page-wissen.active{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 230px)}
.ds-title{font-size:2.4rem;margin:0 0 6px}
.ds-title{letter-spacing:-.5px}
/* pt-dssub-bg: ohne Hintergrund gedaempft, mit Hintergrund weiss */
/* pt-dssub-farbe-v1: Der Untertitel traegt die Rahmenfarbe des Profils --
   dieselbe Kette wie die Rahmenlinien, gespeist aus frame_color; ohne
   eigene Farbe bleibt der Vorgabewert. Um ein Achtel abgedunkelt, damit
   er auch bei einer hellen Profilfarbe wie Bernstein auf hellem Grund
   traegt; im dunklen Thema stattdessen aufgehellt.
   Die Farbe steht hier und nur hier -- die Regel fuer das eigene
   Hintergrundbild weiter unten setzt allein den Schein darunter. */
.ds-sub{
  color:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 82%, #14181f);
  text-shadow:none}
[data-theme="dark"] .ds-sub{
  color:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 80%, #fff)}
.kb-search::placeholder{color:var(--c-muted);opacity:1}
/* pt-suche-weiss-v1: Der Untertitel mit den Fachgebieten und der
   Platzhalter der Suchzeile standen in Weiss. Vor einem hellen eigenen
   Hintergrundbild verschwanden sie darin. Beide nehmen jetzt die
   Rahmenfarbe des Profils an -- var(--accent, var(--static-frame, ...)),
   gespeist aus frame_color --, um ein Achtel abgedunkelt, damit sie auch
   bei einer hellen Profilfarbe wie Bernstein noch tragen. Der Schein
   darunter ist hell statt dunkel, aus demselben Grund.

   Alles haengt an html[data-bg="on"]: Ohne eigenes Hintergrundbild greift
   keine dieser Regeln, der Standardhintergrund bleibt wie er war. */
html[data-bg="on"] .ds-sub{
  text-shadow:0 1px 2px rgba(255,255,255,.6)}
html[data-bg="on"] .kb-search::placeholder{
  color:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 82%, #14181f);
  opacity:.9;
  text-shadow:0 1px 2px rgba(255,255,255,.6)}
html[data-bg="on"][data-theme="dark"] .ds-sub{
  text-shadow:0 1px 2px rgba(0,0,0,.55)}
html[data-bg="on"][data-theme="dark"] .kb-search::placeholder{
  color:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 80%, #fff);
  text-shadow:0 1px 2px rgba(0,0,0,.55)}
.ds-title .logo-pharm{color:#4aa8e0}
.ds-title .logo-trainer{color:#1a3a5c}
[data-theme="dark"] .ds-title .logo-trainer{color:#fff}
/* Sidebar */
#kbSideHandle{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:70;background:var(--c-card);border:1px solid var(--accent,var(--static-frame,#4aa8e0));border-left:none;border-radius:0 10px 10px 0;padding:13px 10px;cursor:pointer;box-shadow:3px 0 14px rgba(0,0,0,.20);display:none;flex-direction:column;gap:4px;transition:background .15s,padding .15s}
html[data-mode="kb"] #kbSideHandle{display:flex}
/* pt-kbquick: Schnellzugriff auch in Lern-/Klinikmodus (Premium/Admin) */
html[data-kbquick="on"] #kbSideHandle{display:flex}
#kbSideHandle span{display:block;width:17px;height:2px;border-radius:2px;background:var(--accent,var(--static-frame,#4aa8e0))}
#kbSideHandle:hover{background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 16%, transparent);padding-left:13px}
/* pt-verzeichnis-lasche-v1 ---------------------------------------------
   Statt der drei Striche das Wort "Verzeichnis", senkrecht.

   Vorgabe ist AUS. Eingeschaltet wird es erst ab 821 px -- damit bleiben
   die beiden bestehenden Handy-Bloecke (820 px und 480 px) unberuehrt und
   der runde Knopf unten rechts behaelt seine drei Striche. Die beiden
   Bereiche schliessen luekenlos aneinander an: <=820 Striche, >=821 Wort.

   Aus <div> ist ein <button> geworden; font-family und color muessen
   deshalb ausdruecklich geerbt werden, sonst greift die Schrift des
   Systems. Und weil der Griff jetzt im Tabulator-Lauf steht, bekommt er
   einen sichtbaren Fokusrahmen. */
#kbSideHandle{font-family:inherit;color:inherit}
#kbSideHandle:focus-visible{outline:2px solid var(--accent,var(--static-frame,#4aa8e0));outline-offset:2px}
#kbSideHandle .kb-side-wort{display:none}
@media (min-width:821px){
  /* Die Lasche wird vor allem hoeher, nicht breiter: die Breite ergibt
     sich aus der Zeilenhoehe der gedrehten Schrift plus Polsterung, die
     Hoehe aus der Laenge des Wortes. Rund 40 x 105 px statt 38 x 50 px. */
  #kbSideHandle{padding:18px 12px;gap:0}
  #kbSideHandle span{display:none}
  #kbSideHandle .kb-side-wort{
    display:block;
    /* Von oben nach unten, wie ein deutscher Buchruecken. Fuer die
       Gegenrichtung kaeme hier transform:rotate(180deg) dazu -- auf das
       Wort, nie auf #kbSideHandle: dort haelt translateY(-50%) die
       senkrechte Zentrierung, ein zweites transform wuerde sie aufheben. */
    writing-mode:vertical-rl;
    font-size:.82rem;font-weight:600;letter-spacing:.04em;
    color:var(--accent,var(--static-frame,#4aa8e0));
    white-space:nowrap;
  }
  /* Der Griff wandert bei Beruehrung um 3 px in die Seite hinein -- wie
     zuvor, nur auf die neue Polsterung bezogen (12 + 3). Die Regel
     darueber setzt 13 px, was hier ein Schrumpfen waere. */
  #kbSideHandle:hover{padding-left:15px}
}
/* /pt-verzeichnis-lasche-v1 ------------------------------------------- */
#kbSideBackdrop{position:fixed;left:0;right:0;top:60px;bottom:0;background:rgba(0,0,0,.35);z-index:80;display:none}
#kbSideBackdrop.open{display:block}
#kbSidebar{position:fixed;left:0;top:60px;bottom:0;z-index:81;background:var(--c-bg);border-right:2px solid var(--accent,var(--static-frame,#4aa8e0));box-shadow:10px 0 40px rgba(0,0,0,.35);transform:translateX(-102%);transition:transform .22s ease;display:flex;flex-direction:column;max-width:96vw}
#kbSidebar.open{transform:translateX(0)}
.kb-side-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--c-border);flex-shrink:0;background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 10%, transparent)}
.kb-side-head b{font-size:.95rem;letter-spacing:.02em;color:var(--accent,var(--static-frame,#4aa8e0));text-transform:uppercase;font-size:.78rem}
.kb-side-close{background:none;border:none;cursor:pointer;font-size:1.1rem;color:var(--c-muted);padding:2px 6px}
.kb-crumb{padding:9px 16px;font-size:.76rem;color:var(--c-muted);border-bottom:1px solid var(--c-border);flex-shrink:0;white-space:nowrap;overflow-x:auto;background:var(--c-card)}
.kb-crumb span{cursor:pointer}
.kb-crumb span:hover{color:var(--accent,var(--static-frame,#4aa8e0))}
.kb-cols{display:flex;flex:1;overflow-x:auto;overflow-y:hidden}
.kb-col{min-width:238px;max-width:238px;border-right:1px solid var(--c-border);display:flex;flex-direction:column;overflow-y:auto;background:var(--c-bg)}
.kb-col:nth-child(even){background:var(--c-card)}
.kb-col-body{flex:1;overflow-y:auto;padding:6px 0}
.kb-col-foot{padding:9px 11px;border-top:1px solid var(--c-border);flex-shrink:0;background:rgba(128,128,128,.05)}
.kb-row{display:flex;align-items:center;gap:9px;padding:10px 14px;cursor:pointer;font-size:.88rem;border-left:3px solid transparent;border-bottom:1px solid rgba(128,128,128,.10)}
.kb-row:hover{background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 12%, transparent)}
.kb-row.active{background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 16%, transparent);border-left-color:var(--accent,var(--static-frame,#4aa8e0))}
.kb-row .kb-row-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* pt-kb-marquee */
.kb-row .kb-row-name{position:relative}
.kb-row .kb-row-name > .kbm{display:inline-block;white-space:nowrap;will-change:transform}
.kb-row.kbm-on:hover .kb-row-name{text-overflow:clip}
.kb-row.kbm-on:hover .kb-row-name > .kbm{animation:var(--kbm-anim) var(--kbm-dur,6s) linear infinite}
/* Keyframes werden pro Zeile dynamisch erzeugt (kbmStyleEl) */
@media (prefers-reduced-motion:reduce){.kb-row.kbm-on:hover .kb-row-name > .kbm{animation:none}}

/* pt-kb-schriftgroesse-v1: Auf Geraeten ohne Zeigegeraet laeuft der
   Lauftext ohnehin nie -- dort wird das inline-block aufgehoben, damit
   die Ellipse der Elternbox greift und der Name nicht unvermittelt am
   Rand endet. */
@media (hover: none){
  .kb-row .kb-row-name > .kbm{display:inline;white-space:inherit}
}

.kb-row .kb-row-arrow{color:var(--c-muted);font-size:.8rem}
.kb-row.is-entry{color:var(--accent,var(--static-frame,#4aa8e0))}
.kb-ico{width:13px;height:11px;flex-shrink:0;border-radius:2px}
.kb-ico-folder{background:var(--accent,var(--static-frame,#4aa8e0));opacity:.65;clip-path:polygon(0 0,42% 0,52% 18%,100% 18%,100% 100%,0 100%)}
.kb-ico-doc{width:10px;height:13px;background:none;border:1.5px solid var(--accent,var(--static-frame,#4aa8e0));border-radius:2px;opacity:.75}
.kb-row-acts{display:none;gap:4px}
/* pt-accesssearch-v1: Hier stand pt-ds-brand -- Admin und Entwickler
   sahen "DreamSearch", alle anderen "AccessSearch". Der Titel traegt
   jetzt nur noch ein Wort, die Umschaltung ist damit gegenstandslos und
   ihre Regeln sind entfallen. data-kbadmin bleibt: es steuert an rund
   einem Dutzend weiterer Stellen Bearbeiten-Knoepfe und Kennzahlen. */
/* pt-deluxe-off: Deluxe-Steuerung jetzt ueber Hintergruende im Profil */
#settingsDeluxeRow,#settingsDeluxeFxRow,#settingsDeluxeAnimRow,#settingsDeluxeIntRow{display:none !important}
/* pt-admintab-scroll */
.admin-tabbar{scrollbar-width:thin;scrollbar-color:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 45%, transparent) transparent}
.admin-tabbar::-webkit-scrollbar{height:5px}
.admin-tabbar::-webkit-scrollbar-track{background:transparent}
.admin-tabbar::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 45%, transparent);border-radius:3px}
.admin-tabbar::-webkit-scrollbar-thumb:hover{background:var(--accent,var(--static-frame,#4aa8e0))}
/* pt-admintab-css */
.admin-tabbar .btn.active,.admin-tabbar .btn[style*="font-weight:600"]{color:var(--accent,var(--static-frame,#4aa8e0));border-color:var(--accent,var(--static-frame,#4aa8e0))}
/* pt-achv-off: Erfolge deaktiviert */
#achvCard{display:none !important}
/* pt-catrow: beide Kategorie-Listen exakt gleiche Zeilenhoehe */
.pt-catrow{height:34px !important;min-height:34px !important;max-height:34px !important;box-sizing:border-box;margin:0 !important;padding:0 !important;display:flex !important;flex-direction:column;justify-content:center;gap:3px;overflow:hidden}
.pt-catrow>div{margin:0 !important;flex:0 0 auto}
.pt-catrow>div:first-child{line-height:1.2}
/* pt-toprow: obere Karten beider Spalten gleich hoch.
   pt-profil-subgrid-v1: das frueher hier stehende min-height:255px ist
   entfallen. Es hat die Gleichhoehe nur erraten -- sobald der Lernplan
   gesperrt war und mit Sperrschicht und Upgrade-Knopf ueber 255px wuchs,
   trug die Annahme nicht mehr und die rechte Spalte rutschte samt allen
   Folgekarten nach unten. Die Ausrichtung macht jetzt das Grid selbst,
   siehe .profile-col weiter oben. Geblieben ist nur die vertikale
   Zentrierung des Karteninhalts. */
@media(min-width:1101px){.pt-toprow{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}}
/* pt-selfheat-css */
.pt-info{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;border:1px solid var(--c-muted);color:var(--c-muted);font-size:.62rem;font-weight:700;cursor:pointer;vertical-align:middle;margin-left:4px;font-style:italic}
.pt-info:hover{border-color:var(--accent,var(--static-frame,#4aa8e0));color:var(--accent,var(--static-frame,#4aa8e0))}
.sh-bar{display:flex;height:8px;border-radius:999px;overflow:hidden;background:var(--c-border)}
.sh-bar>span{height:100%}
/* pt-profilestats-css */
html:not([data-kbadmin="1"]) #profileAdminStats{display:none !important}
/* pt-brandbox */
/* pt-brandbox-weg-v1: Das Kaestchen "Logo-Name" stand nur fuer Admin und
   Entwickler da und wird dort nicht mehr gebraucht. Aus der Ausnahme wird
   eine Regel ohne Ausnahme. Markup, Dialog und applyBrandPreview()
   bleiben -- der Weg zurueck ist diese eine Zeile, und der Dialog ist
   ueber openBrandDialog() weiterhin zu oeffnen. */
#brandBox{display:none !important}
@media(max-width:900px){ #brandWrap{flex-direction:column;width:100%;margin-left:0 !important}
#brandBox{width:100% !important;box-sizing:border-box;order:2}
#refBox{width:100% !important;box-sizing:border-box;order:3}
/* pt-lizenz-v1: dieselbe Behandlung wie #refBox -- auf schmalen
   Schirmen volle Breite, damit der Kasten nicht neben dem
   Werbecode einklemmt. */
#lizenzBox,#lizenzCodeBox{width:100% !important;box-sizing:border-box;order:4}}

/* --- Dev-Statistikbox mobil --- */
@media (max-width: 900px){
  #profileAdminStats.pas-box{
    margin-left:0 !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    padding:12px 14px !important;
    gap:8px !important;
    order:1;   /* pt-order-cleanup: Statistik zuerst */
  }
  #profileAdminStats .pas-grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:8px 10px !important;
    width:100% !important;
  }
  #profileAdminStats .pas-grid > div{ min-width:0 !important; }
  #profileAdminStats .pas-grid > div > div:first-child{ font-size:1.15rem !important; }
  #profileAdminStats .pas-grid > div > div:last-child{
    font-size:.62rem !important; letter-spacing:.02em !important;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
}
@media (max-width: 380px){
  #profileAdminStats .pas-grid > div > div:first-child{ font-size:1rem !important; }
  #profileAdminStats .pas-grid > div > div:last-child{ font-size:.58rem !important; }
}

/* pt-bgrow-css */
#settingsBgRow{display:none !important}
/* pt-kbedit-rights */
html[data-kbadmin="0"] #kbEditToggle,
html[data-kbadmin="0"] .kb-det-edit{display:none !important}
html[data-kbadmin="0"] .kb-row-acts,
html[data-kbadmin="0"] .kb-col-foot{display:none !important}
html:not([data-kbedit="1"]) .kb-row-acts{display:none !important}
html:not([data-kbedit="1"]) .kb-col-foot{display:none}
.kb-edit-toggle{background:none;border:1px solid var(--c-border);border-radius:6px;cursor:pointer;font-size:.76rem;padding:4px 10px;color:var(--c-muted)}
html[data-kbedit="1"] .kb-edit-toggle{background:#4aa8e0;color:#fff;border-color:#4aa8e0}
html[data-kbedit="1"] .kb-row:hover .kb-row-acts{display:flex}
.kb-row-acts button{background:none;border:none;cursor:pointer;font-size:.8rem;padding:0 2px;color:var(--c-muted)}
.kb-row-acts button:hover{color:var(--accent,var(--static-frame,#4aa8e0))}

/* ---- Block 4 von 15, urspruenglich ab Zeile 13494 ---- */
/* kb-detail-css */
#kbDetail{display:none;width:100%;max-width:1700px;margin:20px auto;padding:32px 44px;align-self:stretch;box-sizing:border-box;background:color-mix(in srgb, var(--c-bg) 85%, transparent);border:1px solid var(--c-border);border-radius:16px;box-shadow:0 10px 36px rgba(0,0,0,.28)}
#page-wissen.detail-open .kb-hero{display:none}
/* Footer im Wissens-Modus ausblenden */
html[data-mode="kb"] #ptFooter{display:none !important}
/* kb-mobile-fix4 */
@media (max-width:820px){
  /* Schrift nochmals kompakter */
  .kb-md{font-size:.83rem !important;line-height:1.46 !important}
  .kb-md .kb-sub{font-size:.86rem}
  .kb-sec-h{font-size:.96rem}
  .kb-md th,.kb-md td{font-size:.75rem}
  /* Sidebar-Griff nach unten rechts als runder Button */
  #kbSideHandle{
    position:fixed !important;
    top:auto !important;bottom:20px !important;
    left:auto !important;right:16px !important;
    transform:none !important;
    width:48px !important;height:48px !important;
    border-radius:50% !important;
    display:flex !important;align-items:center;justify-content:center;
    box-shadow:0 4px 14px rgba(0,0,0,.28) !important;
    background:var(--c-card) !important;
    border:1px solid var(--c-border) !important;
    z-index:120 !important;
  }
}
@media (max-width:480px){
  .kb-md{font-size:.81rem !important;line-height:1.44 !important}
  .kb-sec-h{font-size:.92rem}
  .kb-det-title{font-size:1.15rem}
  #kbSideHandle{bottom:16px !important;right:13px !important;width:44px !important;height:44px !important}
}
/* kb-mobile-fix3 */
/* Bilder duerfen nie breiter als der Container sein */
.kb-md img,.kb-ed-prev img,.kb-fig img{max-width:100%;height:auto;display:block;margin:0 auto}
.kb-fig{max-width:100%;overflow:hidden}
.kb-md,.kb-ed-prev{overflow-wrap:break-word;word-break:break-word}
.kb-md figcaption{overflow-wrap:anywhere}
@media (max-width:820px){
  /* kein horizontales Ueberlaufen der Seite */
  #kbDetail,#kbEditor,.kb-det-body,.kb-sec{overflow-x:hidden;max-width:100%}
  .kb-md img,.kb-fig img{max-width:100% !important;width:auto !important}
  /* Schrift kompakter, naeher an Onkopedia */
  .kb-md{font-size:.88rem !important;line-height:1.48 !important}
  .kb-md p{margin:0 0 9px}
  .kb-md li{margin:2px 0}
  .kb-md ul,.kb-md ol{padding-left:19px;margin:0 0 9px}
  .kb-md .kb-sub{font-size:.9rem;margin:13px 0 5px}
  .kb-sec-h{font-size:1rem;margin-top:20px}
  .kb-det-title{font-size:1.3rem}
  .kb-md figcaption{font-size:.74rem;line-height:1.35}
  /* enge Raender fuer mehr Textbreite */
  #kbDetail,#kbEditor{padding:14px 11px !important}
}
@media (max-width:480px){
  .kb-md{font-size:.85rem !important;line-height:1.45 !important}
  .kb-md th,.kb-md td{font-size:.76rem;min-width:70px;padding:4px 6px}
  #kbDetail,#kbEditor{padding:12px 9px !important}
  .kb-det-title{font-size:1.2rem}
}
/* kb-mobile-fix2 */
@media (max-width:820px){
  #kbDetail,#kbEditor{max-width:100% !important;width:100% !important}
  #page-wissen.detail-open,#page-wissen.editor-open{max-width:none !important;width:100% !important;padding:0 !important;margin:0 !important}
  .kb-det-wrap{display:block !important}
  .kb-det-body{width:100% !important;max-width:100% !important;flex:none !important}
  .kb-det-toc{display:none !important}
}
/* kb-mobile-onkopedia */
@media (max-width:820px){
  /* Karte deckend und randlos wie bei Onkopedia */
  #kbDetail,#kbEditor{background:var(--c-bg) !important;box-shadow:none;border:none;border-radius:0;margin:0;padding:16px 15px;width:100%;max-width:100%}
  #page-wissen.detail-open,#page-wissen.editor-open{padding:0;margin:0}
  /* Kopfzeile umbrechen, Titel volle Breite */
  .kb-det-head{flex-wrap:wrap;gap:8px;align-items:center}
  .kb-det-title{width:100%;order:3;margin:6px 0 0}
  .kb-det-meta{font-size:.82rem;margin-bottom:14px}
  /* Abschnitte klarer trennen */
  .kb-sec-h{font-size:1.08rem;margin-top:24px;padding-bottom:5px}
  .kb-sec:first-child .kb-sec-h{margin-top:8px}
}

/* ===== Mobile-Optimierung Wissensdatenbank ===== */
@media (max-width:820px){
  #kbDetail,#kbEditor{width:100%;max-width:100%;margin:8px 0;padding:16px 14px;border-radius:10px;border-left:none;border-right:none}
  #page-wissen.detail-open,#page-wissen.editor-open{padding-left:0;padding-right:0}
  /* TOC unter den Text statt daneben */
  .kb-det-wrap{display:block}
  .kb-det-toc{display:none}

  /* Tabellen horizontal scrollbar statt gequetscht */
  .kb-md table,.kb-ed-prev table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;max-width:100%}
  .kb-md th,.kb-md td{white-space:normal;min-width:88px;font-size:.84rem;padding:6px 8px}
  /* Typografie */
  .kb-md{font-size:.95rem;line-height:1.55}
  .kb-md h3{font-size:1.15rem;margin-top:20px}
  .kb-md .kb-sub{font-size:.95rem}
  .kb-md ul,.kb-md ol{padding-left:20px}
  .kb-det-title{font-size:1.4rem;line-height:1.25}
  /* Editor: Split-View untereinander */
  .kb-ed-split{display:block}
  .kb-ed-split textarea,.kb-ed-prev{width:100%;min-height:180px}
  .kb-ed-prev{margin-top:10px;border-top:1px solid var(--c-border)}
  .kb-ed-top{gap:8px}
  .kb-ed-top input,.kb-ed-top select{font-size:.85rem;padding:7px 9px}
  .kb-tb{gap:2px;padding:5px 8px}
  .kb-tb button{font-size:.72rem;padding:3px 7px;min-width:24px}
  /* Suche */
  .kb-hero{padding:22px 16px;border-radius:14px}
  .kb-hero h1{font-size:1.7rem}
  .ds-sub{font-size:.85rem}
  /* Sidebar */
  #kbSidebar{width:100%;max-width:100%}
  .kb-col{min-width:0}
}
@media (max-width:480px){
  #kbDetail,#kbEditor{padding:13px 11px}
  .kb-md{font-size:.92rem}
  .kb-md th,.kb-md td{font-size:.8rem;min-width:76px;padding:5px 7px}
  .kb-det-title{font-size:1.28rem}
}
#page-wissen.detail-open{align-items:stretch;justify-content:flex-start}
#page-wissen.detail-open,#page-wissen.editor-open{max-width:none;width:100%;padding-left:24px;padding-right:24px}
#page-wissen.detail-open #kbDetail{display:block}
.kb-det-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:6px}
.kb-det-back{background:none;border:1px solid var(--c-border);border-radius:8px;cursor:pointer;padding:7px 13px;font-size:.85rem;color:#4aa8e0;flex-shrink:0}
.kb-det-back:hover{background:rgba(74,168,224,.12)}
/* pt-kb-back-hide: aufgehoben (pt-kb-zurueck-sichtbar-v1) -- der Zurueck-Knopf gilt auch fuer Admins */
/* pt-kb-report-hide */
html[data-kbadmin="1"] .kb-det-report{display:none !important}
.kb-det-title{font-size:1.9rem;font-weight:700;margin:0;flex:1}
.kb-det-meta{color:var(--c-muted);font-size:.85rem;margin:2px 0 20px 0}
.kb-det-wrap{display:flex;gap:28px;align-items:flex-start}
.kb-det-body{flex:1;min-width:0}
.kb-det-toc{width:210px;flex-shrink:0;position:sticky;top:76px;font-size:.84rem;border-left:2px solid var(--c-border);padding-left:14px}
.kb-det-toc a{display:block;padding:4px 0;color:var(--c-muted);text-decoration:none;cursor:pointer}
.kb-det-toc a:hover{color:#4aa8e0}
.kb-sec{margin-bottom:26px;scroll-margin-top:76px}
.kb-sec-h{font-size:1.15rem;font-weight:700;color:var(--accent,var(--static-frame,#4aa8e0));border-bottom:1px solid var(--c-border);padding-bottom:5px;margin:0 0 10px}
.kb-md{line-height:1.62;font-size:.95rem}
.kb-md p{margin:0 0 10px}
.kb-md ul,.kb-md ol{margin:0 0 10px;padding-left:22px}
.kb-md li{margin:3px 0}
.kb-md table{border-collapse:collapse;margin:0 0 12px;width:100%}
.kb-md th,.kb-md td{border:1px solid var(--c-border);padding:6px 10px;text-align:left;font-size:.9rem}
.kb-md th{background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 10%, transparent);font-weight:700}
.kb-md code{background:rgba(128,128,128,.15);padding:1px 5px;border-radius:4px;font-size:.88rem}
.kb-fig{margin:14px 0;text-align:center}
.kb-fig img{max-width:100%;border:1px solid var(--c-border);border-radius:10px}
.kb-fig figcaption{font-size:.82rem;color:var(--c-muted);margin-top:6px;line-height:1.4}
.kb-fig .kb-fig-src{font-style:italic;opacity:.85}
/* pt-kb-fig-scale-v1 : einheitlicher Diagramm-Massstab
   Die Breite folgt --kb-fig-ratio (natuerliche Breite / 1717 px).
   !important schlaegt die aelteren max-width-Regeln weiter oben. */
.kb-fig .kb-fig-scroll{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:10px;
}
.kb-fig .kb-fig-scroll::-webkit-scrollbar{height:5px}
.kb-fig .kb-fig-scroll::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:4px}
.kb-fig .kb-fig-scroll img{
  width:calc(100% * var(--kb-fig-ratio,1)) !important;
  max-width:none !important;
  height:auto;
  display:block;
  margin:0;
  border:1px solid var(--c-border);
  border-radius:10px;
}
@media(max-width:700px){
  /* Proportional zur Containerbreite waere hier unlesbar klein,
     daher feste Bezugsbreite und scrollen. */
  .kb-fig .kb-fig-scroll img{
    width:calc(680px * var(--kb-fig-ratio,1)) !important;
  }
}
/* pt-kb-fig-dark-v1 : Diagramme im Dark Mode umfaerben
   invert dreht die Helligkeit, hue-rotate dreht den Farbton zurueck,
   damit die Farbcodierung (blau kurativ / gelb nicht-kurativ) erhalten bleibt.
   brightness/contrast gleichen das leicht flaue Ergebnis der Drehung aus. */
[data-theme="dark"] .kb-fig .kb-fig-scroll img{
  filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(1.08);
  border-color:var(--c-border);
}
/* Bei Bedarf einzelne Medien ausnehmen: Klasse kb-fig-nofilter an die figure */
[data-theme="dark"] .kb-fig.kb-fig-nofilter .kb-fig-scroll img{
  filter:none;
}
/* pt-kb-blockquote-v1: Zitatbloecke der Wissensdatenbank. Halbtransparent
   und aus der Rahmenfarbe gemischt, wie alle Flaechen dieser Oberflaeche;
   der Weichzeichner haelt die Schrift auf einem Hintergrundbild lesbar. */
.kb-md .kb-quote{
  margin:14px 0;
  padding:10px 14px;
  border-left:3px solid var(--accent,var(--static-frame,#4aa8e0));
  border-radius:0 8px 8px 0;
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 10%, rgba(255,255,255,.34));
  backdrop-filter:blur(6px);
}
.kb-md .kb-quote > :first-child{margin-top:0}
.kb-md .kb-quote > :last-child{margin-bottom:0}
.kb-md .kb-quote p{margin:6px 0}
.kb-md .kb-quote ul,.kb-md .kb-quote ol{margin:6px 0}
[data-theme="dark"] .kb-md .kb-quote{
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 14%, rgba(22,26,33,.42));
}
.kb-ed-prev .kb-quote{margin:10px 0;padding:8px 12px}
.kb-md .kb-hr{border:none;border-top:1px solid var(--c-border);margin:22px 0;height:0}
.kb-ed-prev .kb-hr{margin:16px 0}
.kb-md .kb-sub2{font-size:1.12rem;font-weight:700;color:var(--c-text);margin:22px 0 8px;padding-bottom:4px;border-bottom:2px solid color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 55%, transparent)}
.kb-ed-prev .kb-sub2{font-size:1.02rem}
.kb-md .kb-sub{font-size:1rem;font-weight:700;color:var(--c-text);margin:16px 0 6px;padding-bottom:3px;border-bottom:1px solid color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 40%, transparent)}
.kb-md ul ul,.kb-md ol ol{margin:3px 0 3px 0}
.kb-ed-prev .kb-sub{font-size:.95rem}
/* Tabellen auch in der Editor-Vorschau */
.kb-ed-prev table{border-collapse:collapse;margin:0 0 12px;width:100%}
.kb-ed-prev th,.kb-ed-prev td{border:1px solid var(--c-border);padding:6px 10px;text-align:left;font-size:.88rem;vertical-align:top}
.kb-ed-prev th{background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 12%, transparent);font-weight:700}
.kb-ed-prev ul,.kb-ed-prev ol{margin:0 0 10px;padding-left:22px}
.kb-ed-prev li{margin:3px 0}
.kb-ed-prev p{margin:0 0 10px}
.kb-ed-prev code{background:rgba(128,128,128,.15);padding:1px 5px;border-radius:4px}
/* Tabellen in Detailansicht: Zebra + Kopf abgesetzt */
.kb-md table{border-collapse:collapse;margin:2px 0 14px;width:100%;border:1px solid var(--c-border)}
.kb-md thead th{background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 14%, transparent);font-weight:700;border-bottom:2px solid var(--accent,var(--static-frame,#4aa8e0))}
.kb-md tbody tr:nth-child(even){background:rgba(128,128,128,.05)}
.kb-md th,.kb-md td{border:1px solid var(--c-border);padding:7px 11px;text-align:left;font-size:.9rem;vertical-align:top}
.kb-md td ul{margin:4px 0 0;padding-left:18px}
.kb-det-report{background:none;color:#c2410c;border:1px solid #f0b090;border-radius:8px;cursor:pointer;padding:7px 14px;font-size:.85rem;flex-shrink:0;margin-left:8px}
.kb-det-edit{background:var(--accent,var(--static-frame,#4aa8e0));color:#fff;border:none;border-radius:8px;cursor:pointer;padding:7px 14px;font-size:.85rem;flex-shrink:0}
@media(max-width:760px){.kb-det-toc{display:none}}

/* ---- Block 5 von 15, urspruenglich ab Zeile 13908 ---- */
/* kb-editor-css */
#kbEditor{display:none;width:100%;max-width:1700px;margin:20px auto;padding:28px 40px;align-self:stretch;box-sizing:border-box;background:color-mix(in srgb, var(--c-bg) 85%, transparent);border:1px solid var(--c-border);border-radius:16px;box-shadow:0 10px 36px rgba(0,0,0,.28)}
#page-wissen.editor-open .kb-hero{display:none}
#page-wissen.editor-open #kbDetail{display:none}
#page-wissen.editor-open{align-items:stretch;justify-content:flex-start}
#page-wissen.editor-open #kbEditor{display:block}
.kb-ed-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.kb-ed-top input,.kb-ed-top select{padding:8px 11px;border:1px solid var(--c-border);border-radius:8px;background:var(--c-card);color:inherit;font-size:.9rem}
.kb-ed-title{flex:1;min-width:220px;font-size:1.05rem;font-weight:600}
.kb-ed-status{font-size:.85rem;color:#4aa8e0;font-weight:600;margin-left:auto}
.kb-ed-btn{border:none;border-radius:8px;cursor:pointer;padding:8px 15px;font-size:.85rem;font-weight:600}
.kb-ed-save{background:#4aa8e0;color:#fff}
.kb-ed-del{background:none;border:1px solid #e63946;color:#e63946}
.kb-ed-back{background:none;border:1px solid var(--c-border);color:var(--c-muted)}
.kb-ed-sec{margin-bottom:18px;border:1px solid var(--c-border);border-radius:10px;overflow:hidden}
.kb-ed-sec-h{background:rgba(74,168,224,.10);padding:8px 13px;font-weight:700;font-size:.9rem;color:#4aa8e0;display:flex;align-items:center;justify-content:space-between;gap:10px}
.kb-ed-img{background:none;border:1px solid #4aa8e0;color:#4aa8e0;border-radius:6px;cursor:pointer;font-size:.75rem;padding:3px 9px;font-weight:600}
.kb-ed-img:hover{background:rgba(74,168,224,.15)}
.kb-tb{display:flex;flex-wrap:wrap;gap:3px;padding:6px 10px;border-bottom:1px solid var(--c-border);background:rgba(128,128,128,.06)}
.kb-tb button{background:var(--c-card);border:1px solid var(--c-border);border-radius:5px;cursor:pointer;font-size:.76rem;padding:3px 8px;color:inherit;min-width:26px;line-height:1.4}
.kb-tb button:hover{background:rgba(74,168,224,.18);border-color:#4aa8e0;color:#4aa8e0}
.kb-tb .kb-tb-sep{width:1px;background:var(--c-border);margin:2px 4px}
.kb-tb .kb-tb-clean{margin-left:auto;border-color:#4aa8e0;color:#4aa8e0;font-weight:600}
/* pt-tpl-wysiwyg-v1 -- Bearbeitungsfeld mit direkt sichtbarer Auszeichnung */
.tpl-edit{border:1px solid var(--c-border);border-radius:6px;padding:10px;min-height:240px;max-height:50vh;overflow-y:auto;background:var(--c-card,#fff);color:inherit;font-family:inherit;font-size:.9rem;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.tpl-edit:focus{outline:2px solid #4aa8e0;outline-offset:-1px}
.tpl-edit div{min-height:1.4em}
.kb-tb button[aria-pressed="true"]{background:rgba(74,168,224,.18);border-color:#4aa8e0;color:#4aa8e0}
.kb-ed-split{display:flex;gap:0}
.kb-ed-split textarea{flex:1;min-height:120px;border:none;border-right:1px solid var(--c-border);padding:12px;font-family:inherit;font-size:.9rem;line-height:1.55;resize:vertical;background:var(--c-card);color:inherit;outline:none}
.kb-ed-prev{flex:1;padding:12px;overflow-y:auto;max-height:400px;background:var(--c-bg);font-size:.9rem}
.kb-ed-prev:empty::before{content:"Vorschau";color:var(--c-muted);font-style:italic}
@media(max-width:760px){.kb-ed-split{flex-direction:column}.kb-ed-split textarea{border-right:none;border-bottom:1px solid var(--c-border)}}

/* ---- Block 6 von 15, urspruenglich ab Zeile 14135 ---- */
/* kb-prompt-css */
#kbPromptOv{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;display:none;align-items:center;justify-content:center}
#kbPromptOv.open{display:flex}
.kb-prompt-box{background:var(--c-card);border:1px solid var(--c-border);border-radius:14px;box-shadow:0 16px 50px rgba(0,0,0,.4);padding:22px 22px 18px;width:min(440px,92vw)}
.kb-prompt-box h3{margin:0 0 14px;font-size:1.02rem;font-weight:700}
.kb-prompt-box input{width:100%;box-sizing:border-box;padding:11px 13px;border:2px solid #4aa8e0;border-radius:9px;background:var(--c-bg);color:inherit;font-size:.95rem;outline:none}
.kb-prompt-btns{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.kb-prompt-btns button{border:none;border-radius:8px;cursor:pointer;padding:9px 18px;font-size:.88rem;font-weight:600}
.kb-prompt-cancel{background:none;border:1px solid var(--c-border);color:var(--c-muted)}
.kb-prompt-ok{background:#4aa8e0;color:#fff}

/* ---- Block 7 von 15, urspruenglich ab Zeile 14177 ---- */
/* kb-upload-css */
#kbUpOv{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;display:none;align-items:center;justify-content:center}
#kbUpOv.open{display:flex}
.kb-up-box{background:var(--c-card);border:1px solid var(--c-border);border-radius:14px;box-shadow:0 16px 50px rgba(0,0,0,.4);padding:22px;width:min(520px,92vw)}
.kb-up-box h3{margin:0 0 14px;font-size:1.02rem;font-weight:700}
.kb-up-box label{display:block;font-size:.82rem;font-weight:600;margin:12px 0 4px}
.kb-up-box input[type=text]{width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid var(--c-border);border-radius:8px;background:var(--c-bg);color:inherit;font-size:.9rem}
.kb-up-box input[type=file]{width:100%;font-size:.85rem}
.kb-up-hint{font-size:.76rem;color:var(--c-muted);margin-top:4px}
.kb-up-btns{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.kb-up-btns button{border:none;border-radius:8px;cursor:pointer;padding:9px 18px;font-size:.88rem;font-weight:600}
.kb-up-cancel{background:none;border:1px solid var(--c-border);color:var(--c-muted)}
.kb-up-ok{background:#4aa8e0;color:#fff}

/* ---- Block 8 von 15, urspruenglich ab Zeile 14359 ---- */
/* kb-cleanup-css */
#kbClOv{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:210;display:none;align-items:center;justify-content:center}
#kbClOv.open{display:flex}
.kb-cl-box{background:var(--c-card);border:1px solid var(--c-border);border-radius:14px;box-shadow:0 16px 50px rgba(0,0,0,.4);padding:20px;width:min(1000px,94vw);max-height:88vh;display:flex;flex-direction:column}
.kb-cl-box h3{margin:0 0 12px;font-size:1.02rem;font-weight:700}
.kb-cl-cols{display:flex;gap:14px;flex:1;min-height:0}
.kb-cl-col{flex:1;display:flex;flex-direction:column;min-width:0}
.kb-cl-col h4{margin:0 0 6px;font-size:.8rem;font-weight:700;color:var(--c-muted);text-transform:uppercase;letter-spacing:.03em}
.kb-cl-col textarea{flex:1;min-height:280px;border:1px solid var(--c-border);border-radius:8px;padding:10px;font-family:inherit;font-size:.85rem;line-height:1.5;background:var(--c-bg);color:inherit;resize:vertical}
.kb-cl-btns{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
.kb-cl-btns button{border:none;border-radius:8px;cursor:pointer;padding:9px 18px;font-size:.88rem;font-weight:600}
.kb-cl-cancel{background:none;border:1px solid var(--c-border);color:var(--c-muted)}
.kb-cl-ok{background:#4aa8e0;color:#fff}

/* ---- Block 9 von 15, urspruenglich ab Zeile 14507 ---- */
/* kb-mobile-buttons */
#kbMobBtns{position:fixed;right:16px;bottom:78px;z-index:119;display:none;flex-direction:column;gap:10px;align-items:flex-end}
html[data-mode="kb"] #page-wissen.detail-open ~ #kbMobBtns{display:flex}
.kb-mob-btn{width:48px;height:48px;min-width:48px;flex:0 0 48px;border-radius:50%;background:var(--c-card);border:1px solid var(--c-border);box-shadow:0 4px 14px rgba(0,0,0,.28);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.5rem;line-height:1;color:#4aa8e0;padding:0;box-sizing:border-box}
.kb-mob-btn:active{background:rgba(74,168,224,.18)}
/* TOC-Overlay */
#kbTocOv{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:250;display:none;align-items:flex-end}
#kbTocOv.open{display:flex}
.kb-toc-sheet{background:var(--c-bg);width:100%;max-height:72vh;overflow-y:auto;border-radius:16px 16px 0 0;padding:18px 16px 26px;position:relative;z-index:2;box-shadow:0 -6px 24px rgba(0,0,0,.3)}
.kb-toc-sheet h3{margin:0 0 12px;font-size:.92rem;font-weight:700;color:var(--c-muted);text-transform:uppercase;letter-spacing:.04em}
.kb-toc-sheet a{display:block;padding:12px 8px;font-size:.95rem;color:var(--c-text);text-decoration:none;border-bottom:1px solid var(--c-border);cursor:pointer;background:transparent}
.kb-toc-sheet a:last-child{border-bottom:none}
/* Suchleiste */
#kbFindBar{position:fixed;left:0;right:0;z-index:260;display:none;background:var(--c-bg);border-top:1px solid var(--c-border);box-shadow:0 -4px 18px rgba(0,0,0,.28);padding:9px 10px calc(9px + env(safe-area-inset-bottom, 0px));align-items:center;gap:7px;bottom:0;transition:bottom .18s ease}
#kbFindBar.open{display:flex}
#kbFindInput{flex:1;min-width:0;padding:9px 11px;border:1px solid var(--c-border);border-radius:8px;background:var(--c-bg);color:inherit;font-size:.92rem}
#kbFindBar button{border:1px solid var(--c-border);background:var(--c-bg);color:inherit;border-radius:8px;padding:8px 11px;cursor:pointer;font-size:.9rem}
#kbFindCount{font-size:.8rem;color:var(--c-muted);min-width:44px;text-align:center}
mark.kb-hit{background:#ffe680;color:inherit;padding:0 1px;border-radius:2px}
mark.kb-hit-active{background:#ffb020;color:#000}
@media (min-width:821px){ #kbMobBtns{display:none !important}}
@media (max-width:480px){ #kbMobBtns{bottom:74px !important;right:13px !important}.kb-mob-btn{width:44px;height:44px;min-width:44px;flex:0 0 44px;font-size:1.4rem}}

/* ---- Block 10 von 15, urspruenglich ab Zeile 14675 ---- */
/* pt-games-css */
#page-games{padding-top:34px}
#page-games .games-head{max-width:1020px;margin:0 auto 26px;text-align:center}
#page-games .games-head h2{
  margin:0;font-size:2.1rem;font-weight:800;letter-spacing:-.02em;
  color:var(--static-frame,#4aa8e0);
  text-shadow:0 2px 14px rgba(0,0,0,.28)}
#page-games .games-head p{
  margin:6px 0 0;font-size:.92rem;color:#fff;opacity:.82;
  text-shadow:0 1px 8px rgba(0,0,0,.55)}
#page-games .games-grid{
  max-width:1020px;margin:0 auto;
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:820px){ #page-games .games-grid{grid-template-columns:1fr}}

#page-games .games-tile{
  position:relative;display:flex;align-items:center;gap:18px;
  width:100%;padding:24px 26px;text-align:left;cursor:pointer;
  border:2px solid var(--static-frame,#4aa8e0);border-radius:18px;
  background:rgba(18,22,30,.58);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  box-shadow:0 8px 26px rgba(0,0,0,.3);
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease}
#page-games .games-tile:hover{
  transform:translateY(-4px);
  background:rgba(18,22,30,.74);
  box-shadow:0 16px 40px rgba(0,0,0,.42)}
#page-games .games-tile:active{transform:translateY(-1px)}

#page-games .games-icon{
  flex:0 0 62px;height:62px;display:flex;align-items:center;justify-content:center;
  font-size:1.9rem;line-height:1;border-radius:14px;
  color:var(--static-frame,#4aa8e0);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14)}
#page-games .games-icon{position:relative;overflow:hidden;background-size:cover;background-position:center;cursor:pointer}
#page-games .games-icon:hover{border-color:rgba(255,255,255,.4)}
#page-games .games-icon.has-img .gi-fallback{display:none}
#page-games .games-icon::after{content:'';position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .14s;background:rgba(0,0,0,.45) center/26px no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>")}
#page-games .games-icon:hover::after{opacity:1}
#page-games .games-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
#page-games .games-title{
  font-size:1.42rem;font-weight:800;letter-spacing:-.01em;line-height:1.15;
  color:var(--static-frame,#4aa8e0)}
#page-games .games-sub{font-size:.88rem;color:#e6ecf3;opacity:.72}

#page-games .games-badge{
  position:absolute;top:12px;right:14px;
  font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;
  color:#cfd8e3;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16)}
#page-games .games-badge-soon{
  color:#ffd79a;background:rgba(255,167,38,.16);border-color:rgba(255,167,38,.4)}
#page-games .games-tile.is-locked{opacity:.62}
#page-games .games-tile.is-locked:hover{opacity:.82}

/* ---- Block 11 von 15, urspruenglich ab Zeile 15013 ---- */
#page-ygo .ygo-hub{display:flex;gap:40px;align-items:center;flex-wrap:wrap;margin:10px 0 24px}
#page-ygo .ygo-hub-left{flex:1 1 340px;display:flex;flex-direction:column;gap:18px;min-width:300px}
#page-ygo .ygo-hub-right{flex:0 1 460px;display:flex;justify-content:center;min-width:300px}

#page-ygo .ygo-big-btn{display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  padding:26px 30px;border:2px solid var(--static-frame, #4aa8e0);border-radius:16px;background:transparent;
  cursor:pointer;text-align:left;width:100%;transition:background .15s,transform .15s,box-shadow .15s}
#page-ygo .ygo-big-btn:hover{background:var(--static-frame, #4aa8e0);transform:translateX(6px);box-shadow:0 6px 20px color-mix(in srgb, var(--static-frame, #4aa8e0) 35%, transparent)}
#page-ygo .ygo-big-title{font-size:1.9rem;font-weight:700;line-height:1.1;color:var(--static-frame, #4aa8e0)}
#page-ygo .ygo-big-sub{font-size:.9rem;color:#888}
#page-ygo .ygo-big-btn:hover .ygo-big-title,#page-ygo .ygo-big-btn:hover .ygo-big-sub{color:#fff}

#page-ygo .ygo-showcase{position:relative;width:400px;height:330px}
#page-ygo .ygo-slot{position:absolute;width:172px;aspect-ratio:59/86;border:2px solid var(--static-frame, #4aa8e0);
  border-radius:10px;background:color-mix(in srgb, var(--static-frame, #4aa8e0) 10%, transparent);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.28);transition:transform .18s,box-shadow .18s}
#page-ygo .ygo-slot[data-slot="1"]{top:0;right:0;transform:rotate(7deg);z-index:3}
#page-ygo .ygo-slot[data-slot="2"]{top:56px;right:108px;transform:rotate(0deg);z-index:2}
#page-ygo .ygo-slot[data-slot="3"]{top:112px;right:216px;transform:rotate(-7deg);z-index:1}
#page-ygo .ygo-slot:hover{transform:translateY(-12px) rotate(0deg);z-index:9;
  box-shadow:0 14px 34px color-mix(in srgb, var(--static-frame, #4aa8e0) 45%, transparent)}
#page-ygo .ygo-slot-empty{font-size:2.4rem;color:var(--static-frame, #4aa8e0);opacity:.5}
#page-ygo .ygo-slot img{width:100%;height:100%;object-fit:contain;border-radius:8px}

#page-ygo .ygo-pane-head{margin-bottom:14px}
#page-ygo .ygo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
#page-ygo .ygo-card{border:1px solid var(--border,#d5dde5);border-radius:10px;overflow:hidden;
  cursor:pointer;background:var(--c-card,#fff);transition:transform .15s,box-shadow .15s}
#page-ygo .ygo-card:hover{transform:translateY(-4px);box-shadow:0 8px 22px rgba(0,0,0,.18)}
#page-ygo .ygo-card img{width:100%;height:auto;display:block}
#page-ygo .ygo-card-lbl{padding:6px 8px;font-size:.78rem;line-height:1.25}
#page-ygo .ygo-card-lbl b{display:block;font-size:.82rem}
#page-ygo .ygo-card-lbl span{color:#888;font-size:.7rem}
#ygoModal .ygo-fld{display:flex;flex-direction:column;gap:3px;margin-bottom:9px}
#ygoModal .ygo-fld label{font-size:.78rem;color:#888}
#ygoModal .ygo-fld input,#ygoModal .ygo-fld select,#ygoModal .ygo-fld textarea{
  padding:7px 10px;border:1px solid var(--border,#d5dde5);border-radius:7px;font-size:.88rem;width:100%}
#ygoModal .ygo-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}

@media(max-width:900px){
  #page-ygo .ygo-hub{gap:24px}
  #page-ygo .ygo-showcase{width:300px;height:270px}
  #page-ygo .ygo-slot{width:132px}
  #page-ygo .ygo-slot[data-slot="2"]{top:44px;right:82px}
  #page-ygo .ygo-slot[data-slot="3"]{top:88px;right:164px}
  #page-ygo .ygo-big-title{font-size:1.5rem}
}

/* ---- Block 12 von 15, urspruenglich ab Zeile 15268 ---- */
/* pt-ygo-deck-css */
#page-ygo .ygo-deck-wrap{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
#page-ygo .ygo-deck-pool{flex:1 1 420px;min-width:300px}
#page-ygo .ygo-deck-side{flex:0 1 400px;min-width:280px;display:flex;flex-direction:column;gap:12px}
#page-ygo .ygo-pool-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
#page-ygo .ygo-pool-grid .ygo-card-lbl{padding:4px 6px;font-size:.7rem}
#page-ygo .ygo-pool-grid .ygo-card-lbl b{font-size:.72rem}
#page-ygo .ygo-sec-head{font-weight:700;color:var(--static-frame,#4aa8e0);margin-bottom:8px;
  display:flex;justify-content:space-between;align-items:center}
#page-ygo .ygo-sec-head span{font-weight:400;font-size:.85rem;color:#888}
#page-ygo .ygo-sec-body{display:flex;flex-direction:column;gap:5px;max-height:320px;overflow:auto}
#page-ygo .ygo-de{display:flex;align-items:center;gap:8px;font-size:.82rem;
  border:1px solid var(--border,#d5dde5);border-radius:7px;padding:4px 7px}
#page-ygo .ygo-de img{width:26px;height:38px;object-fit:cover;border-radius:3px}
#page-ygo .ygo-de b{flex:1;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#page-ygo .ygo-de button{border:1px solid var(--border,#d5dde5);background:transparent;border-radius:5px;
  width:22px;height:22px;cursor:pointer;line-height:1;color:inherit}
#page-ygo .ygo-de-empty{color:#888;font-size:.82rem}
#page-ygo .ygo-sec.bad .ygo-sec-head span{color:#c00}

/* ---- Block 13 von 15, urspruenglich ab Zeile 15487 ---- */
/* pt-ygo-duel-v7-css */
#page-ygo .ygo-duel-launch{max-width:520px;margin:0 auto;text-align:center;padding:26px 24px}
#page-ygo .ygo-duel-title{font-size:1.5rem;font-weight:700;color:var(--static-frame,#4aa8e0);margin-bottom:4px}
#page-ygo .ygo-duel-sub{font-size:.88rem;color:#888;margin-bottom:18px}
#page-ygo .ygo-duel-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
#page-ygo .ygo-duel-row select{min-width:210px;padding:9px 12px;
  border:1px solid var(--border,#d5dde5);border-radius:8px}
#page-ygo .ygo-duel-msg{margin-top:12px;font-size:.84rem;color:#888;min-height:1.1em}

/* ---- Block 14 von 15, urspruenglich ab Zeile 15593 ---- */
/* pt-ygo-custom-css */
#page-ygo .ygo-ar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
#page-ygo .ygo-ar{border:2px solid var(--border,#d5dde5);border-radius:10px;overflow:hidden;
  background:var(--c-card,#fff);cursor:pointer;transition:transform .12s,border-color .12s}
#page-ygo .ygo-ar:hover{transform:translateY(-3px)}
#page-ygo .ygo-ar.sel{border-color:var(--static-frame,#4aa8e0);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--static-frame,#4aa8e0) 35%, transparent)}
#page-ygo .ygo-ar img{width:100%;height:124px;object-fit:cover;display:block}
#page-ygo .ygo-ar-lbl{display:flex;align-items:center;gap:8px;padding:7px 9px;font-size:.78rem}
#page-ygo .ygo-ar-lbl span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#888}
#page-ygo .ygo-ar-lbl button{border:1px solid var(--border,#d5dde5);background:transparent;color:#c00;
  border-radius:6px;padding:2px 8px;font-size:.75rem;cursor:pointer}

/* ---- Block 15 von 15, urspruenglich ab Zeile 15841 ---- */
/* pt-bga-css-v1 */
.bga-case-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--c-border);cursor:pointer;font-size:.9rem}
.bga-case-row:last-child{border-bottom:none}
.bga-case-row:hover{background:rgba(74,168,224,.07)}
.bga-badge{font-size:.68rem;font-weight:700;border-radius:999px;padding:2px 7px;color:#fff;background:#888}
.bga-badge.d1{background:#2d9e5a}.bga-badge.d2{background:#e8a33d}.bga-badge.d3{background:#e63946}
.bga-strip{flex:0 0 268px;font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:.84rem;padding:16px 18px;line-height:1.65}
.bga-strip-head{font-weight:700;font-size:1rem;letter-spacing:.04em;border-bottom:1px dashed var(--c-border);padding-bottom:8px;margin-bottom:10px}
.bga-strip-head span{font-weight:400;font-size:.72rem;color:var(--c-muted);letter-spacing:0}
.bga-row{display:flex;align-items:baseline}
.bga-row .bga-p{flex:0 0 74px}
.bga-row .bga-v{flex:0 0 62px;text-align:right;font-weight:600}
.bga-row .bga-a{flex:0 0 16px;text-align:center;font-weight:700}
.bga-row .bga-u{flex:1;color:var(--c-muted);font-size:.74rem;padding-left:4px}
.bga-up{color:#e63946}.bga-dn{color:#2f6fd0}
.bga-strip-foot{border-top:1px dashed var(--c-border);margin-top:10px;padding-top:8px;font-size:.7rem;color:var(--c-muted)}
.bga-opts{display:flex;flex-direction:column;gap:7px;align-items:stretch}
.bga-opt{text-align:left;justify-content:flex-start}
.bga-dot{width:9px;height:9px;border-radius:50%;background:var(--c-border);display:inline-block}
.bga-dot.cur{background:#4aa8e0;box-shadow:0 0 0 3px rgba(74,168,224,.22)}
.bga-dot.ok{background:#2d9e5a}.bga-dot.bad{background:#e63946}
.bga-fb{border-radius:8px;padding:10px 12px;font-size:.88rem;line-height:1.5}
.bga-fb.ok{background:#e8f6ed;border:1px solid #b6e0c6;color:#1d6b3f}
.bga-fb.bad{background:#fdecee;border:1px solid #f3c2c8;color:#96222e}
.bga-fb.warn{background:#fff7e6;border:1px solid #f0d9a8;color:#8a5d10}
.bga-fb.hint{background:#eef5fc;border:1px solid #c2ddf3;color:#1f5581}
.bga-fb.neutral{background:#f4f4f5;border:1px solid var(--c-border);color:var(--c-muted)}
.bga-why{margin-top:8px;padding:9px 12px;border-left:3px solid #4aa8e0;background:rgba(74,168,224,.07);border-radius:0 6px 6px 0;font-size:.84rem;line-height:1.55;color:var(--c-text,#333)}
.bga-diff.active{background:#4aa8e0;color:#fff;border-color:#4aa8e0}
/* pt-feinschliff-v1: Tages-Challenge nicht mehr in der Titelleiste.
   Seite und Routen bleiben bestehen, erreichbar ueber #daily.
   Zum Rueckgaengigmachen diese eine Regel entfernen. */
.nav-btn[data-page="daily"]{display:none !important}
/* pt-bestenliste-admin-v1: Bestenliste nur noch ueber den
   Admin-Bereich. Zum Rueckgaengigmachen diese Regel entfernen. */
.nav-btn[data-page="bestenliste"]{display:none !important}
/* pt-bga-grundlagen-css-v1 */
.bga-gl-head{display:flex;align-items:center;gap:14px;cursor:pointer}
.bga-gl-card.open .bga-gl-head{border-bottom:1px solid var(--c-border);padding-bottom:12px}
details.bga-gl{border:1px solid var(--c-border);border-radius:8px;margin-bottom:8px;background:#fbfcfd}
details.bga-gl>summary{cursor:pointer;padding:10px 13px;font-weight:600;font-size:.92rem;list-style:none;display:flex;align-items:center;gap:8px}
details.bga-gl>summary::-webkit-details-marker{display:none}
details.bga-gl>summary::before{content:"▸";color:var(--c-accent,#4aa8e0);font-size:.9rem}
details.bga-gl[open]>summary::before{content:"▾"}
details.bga-gl[open]>summary{border-bottom:1px solid var(--c-border)}
.bga-gl-in{padding:12px 14px;font-size:.87rem;line-height:1.6}
.bga-gl-in p{margin:0 0 9px}
.bga-gl-tab{width:100%;border-collapse:collapse;margin:8px 0 10px;font-size:.84rem}
.bga-gl-tab th{text-align:left;background:#eef4fa;padding:6px 9px;border:1px solid var(--c-border);font-weight:600}
.bga-gl-tab td{padding:6px 9px;border:1px solid var(--c-border);vertical-align:top}
.bga-gl-note{background:#f6f8fa;border-left:3px solid #c8d4e0;padding:8px 11px;border-radius:0 6px 6px 0;font-size:.84rem}
.bga-gl-note.bga-gl-red{background:#fdecee;border-left-color:#e63946}
/* pt-bga-winter-v1 */
.bga-gl-note.bga-gl-fn{background:#fbfcfd;border-left-color:#4aa8e0;font-size:.81rem;color:var(--c-muted)}
.bga-gl-formel{background:#eef5fc;border:1px solid #c2ddf3;border-radius:6px;padding:9px 12px;font-family:ui-monospace,Menlo,monospace;font-size:.85rem}
.bga-gl-tag{background:#4aa8e0;color:#fff;border-radius:999px;padding:1px 7px;font-size:.7rem;margin-left:6px}
/* pt-bga-gl-blau-v1: verursachender Wert farblich statt nur fett */
.bga-gl-tab b{color:#4aa8e0;font-weight:700}
.bga-gl-tab td b{font-size:1.02em}
.bga-gl-steps{margin:0 0 10px;padding-left:20px}
.bga-gl-steps li{margin-bottom:5px}
.bga-gl-list{margin:0;padding-left:20px}
.bga-gl-list li{margin-bottom:5px}
.bga-gl-src{font-size:.78rem;color:var(--c-muted);margin:12px 0 0;line-height:1.5}
@media(max-width:700px){ .bga-gl-tab{font-size:.76rem} .bga-gl-tab th,.bga-gl-tab td{padding:5px 6px} }
/* pt-bga-tab-scroll-v1 : Tabellen am Handy horizontal scrollbar statt ueberlaufend */
@media(max-width:700px){
  .bga-gl-wrap{position:relative;max-width:100%}
  .bga-gl-tab{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
  }
  .bga-gl-tab th{white-space:nowrap}
  .bga-gl-tab td{white-space:normal;min-width:88px}
  .bga-gl-tab::-webkit-scrollbar{height:4px}
  .bga-gl-tab::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:4px}
  /* Hinweis, dass rechts noch Inhalt folgt */
  .bga-gl-tab{
    background-image:linear-gradient(to right,transparent calc(100% - 24px),rgba(0,0,0,.06) 100%);
    background-repeat:no-repeat;
    background-attachment:local,scroll;
  }
}
@media(max-width:820px){ .bga-strip{flex:1 1 100%} }

/* pt-chemo-css-v1 */
.chemo-progress{display:flex;justify-content:space-between;align-items:center;
  font-size:.8rem;color:var(--c-muted);margin-bottom:10px}
.chemo-ent{background:rgba(74,168,224,.12);color:#2f6fd0;border-radius:999px;
  padding:2px 10px;font-weight:600}
.chemo-frage{font-size:1.02rem;line-height:1.55;font-weight:600;margin-bottom:16px;
  text-align:left}
.chemo-fb{border-radius:8px;padding:10px 12px;font-size:.9rem;font-weight:600}
.chemo-fb.ok{background:#e8f6ed;border:1px solid #b6e0c6;color:#1d6b3f}
.chemo-fb.bad{background:#fdecee;border:1px solid #f3c2c8;color:#96222e}
.chemo-erl{margin-top:10px;padding:10px 12px;border-left:3px solid #4aa8e0;
  background:rgba(74,168,224,.07);border-radius:0 6px 6px 0;font-size:.86rem;
  line-height:1.6;text-align:left}
.chemo-fund{margin-top:6px;font-size:.76rem;color:var(--c-muted);text-align:left}
#page-chemo .flashcard{cursor:pointer}
#page-chemo .flashcard .answer{font-size:.92rem}
@media(max-width:640px){ .chemo-frage{font-size:.95rem} }

/* pt-labor-css-v1
   Der Labor-Trainer sieht aus wie der Chemo-Trainer. Statt die
   .chemo-*-Klassen mitzubenutzen, bekommt er eigene Namen: sonst haengt
   das Aussehen der einen Seite an den Aenderungen der anderen. */
.labor-frage{font-size:1.02rem;line-height:1.55;font-weight:600;margin-bottom:16px;
  text-align:left}
.labor-fb{border-radius:8px;padding:10px 12px;font-size:.9rem;font-weight:600}
.labor-fb.ok{background:#e8f6ed;border:1px solid #b6e0c6;color:#1d6b3f}
.labor-fb.bad{background:#fdecee;border:1px solid #f3c2c8;color:#96222e}
.labor-erl{margin-top:10px;padding:10px 12px;border-left:3px solid #4aa8e0;
  background:rgba(74,168,224,.07);border-radius:0 6px 6px 0;font-size:.86rem;
  line-height:1.6;text-align:left}
.labor-fund{margin-top:6px;font-size:.76rem;color:var(--c-muted);text-align:left}
/* Die Abfrageart steht als kleine Zeile ueber der Frage -- beim
   Chemo-Trainer uebernimmt das die Entitaet. */
.labor-kat{font-size:.78rem;font-weight:600;color:#2f6fd0;letter-spacing:.02em;
  margin-bottom:4px}
#page-labor .flashcard{cursor:pointer}
#page-labor .flashcard .answer{font-size:.92rem}
@media(max-width:640px){ .labor-frage{font-size:.95rem} }

/* pt-trainer-dd-v1
   Sammel-Eintrag "Trainer" in der waagrechten Hauptnavigation. Im
   eingeklappten Zustand (Burger) bleibt es bei den vier Einzeltabs -- eine
   flache Liste ist dort uebersichtlicher als ein Klappmenue im Klappmenue.
   Farben ausschliesslich ueber die vorhandenen Tokens, damit Light und Dark
   ohne eigene Regeln stimmen; der Hover kommt von .nav-btn, das fuer Dark
   bereits eine eigene Regel hat. */
.nav-dd{position:relative;flex-shrink:0;display:flex;align-items:center}
.nav-dd-caret{font-size:.7em;opacity:.7;margin-left:3px}

/* Das Panel liegt an .header (position:sticky = Bezugsrahmen), weil
   .header-nav mit overflow-x:auto auch senkrecht abschneiden wuerde.
   left wird beim Oeffnen aus der Position der Schaltflaeche gesetzt. */
.nav-dd-panel{display:none;position:absolute;top:calc(100% + 6px);left:12px;z-index:200;
  flex-direction:column;align-items:stretch;min-width:210px;
  background:var(--c-white);border:1px solid var(--c-border);border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.15);gap:1px;padding:6px}
.nav-dd-panel.open{display:flex}
.nav-dd-panel .nav-btn{width:100%;text-align:left;padding:10px 12px;font-size:.92rem;
  white-space:nowrap;border-radius:7px}

/* Weiche: waagrecht der Sammel-Eintrag, im Burger die vier Einzeltabs. */
.header.nav-collapsed .nav-dd{display:none}
.header.nav-collapsed .nav-dd-panel{display:none}
.header:not(.nav-collapsed) .nav-btn.nav-trainer-item{display:none}

/* mode-learn muss fuer den Wrapper genauso gelten wie fuer die Buttons
   (Gegenstueck zu den Regeln fuer .nav-btn.mode-learn weiter oben). */
html[data-mode="clinic"] .nav-dd.mode-learn{display:none}
html[data-mode="kb"] .nav-dd.mode-learn{display:none}
html[data-mode="clinic"] .nav-dd-panel,
html[data-mode="kb"] .nav-dd-panel{display:none}

/* pt-abx-trainer-v1
   Antibiotika-Trainer. Aufbau wie beim Labor-Trainer; eigene Klassennamen,
   damit das Aussehen der einen Seite nicht an Aenderungen der anderen haengt. */
.abx-frage{font-size:1.02rem;line-height:1.55;font-weight:600;margin-bottom:16px;
  text-align:left}
.abx-fb{border-radius:8px;padding:10px 12px;font-size:.9rem;font-weight:600}
.abx-fb.ok{background:#e8f6ed;border:1px solid #b6e0c6;color:#1d6b3f}
.abx-fb.bad{background:#fdecee;border:1px solid #f3c2c8;color:#96222e}
.abx-erl{margin-top:10px;padding:10px 12px;border-left:3px solid #4aa8e0;
  background:rgba(74,168,224,.07);border-radius:0 6px 6px 0;font-size:.86rem;
  line-height:1.6;text-align:left}
.abx-kat{font-size:.78rem;font-weight:600;color:#2f6fd0;letter-spacing:.02em;
  margin-bottom:4px}
#page-abx .flashcard{cursor:pointer}
#page-abx .flashcard .answer{font-size:.92rem}
@media(max-width:640px){ .abx-frage{font-size:.95rem} }

/* pt-labkat-v1: Labor-Differenzialdiagnostik, Kategorien-Version */
.labkat-gruppe{margin-bottom:16px}
.labkat-gruppe:last-child{margin-bottom:0}
/* pt-labkat-akzent: Die Richtungs-Ueberschriften laufen in der Akzentfarbe
   mit, die im Profil eingestellt wird -- dieselbe Kette wie bei den
   Rahmenlinien und .gs-sec. Ohne eigene Wahl bleibt es das Access-Blau. */
.labkat-gruppe-h{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--accent,var(--static-frame,#4aa8e0));margin-bottom:8px}
.labkat-zeile{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:5px 8px;border-radius:8px;border:1px solid transparent}
.labkat-zeile:hover{background:var(--c-hover,rgba(127,127,127,.06))}
.labkat-aktiv{background:rgba(74,168,224,.10);border-color:rgba(74,168,224,.35)}
.labkat-feldname{font-size:.86rem}
.labkat-stufen{display:flex;gap:4px;flex:none}
.labkat-stufe{min-width:34px;height:30px;padding:0 8px;border:1px solid var(--c-border);
  border-radius:7px;background:var(--c-white,#fff);color:var(--c-text);font-size:.84rem;
  font-weight:600;cursor:pointer;line-height:1}
.labkat-stufe:hover{border-color:#4aa8e0}
.labkat-stufe.an{color:#fff;border-color:transparent}
.labkat-stufe.an.labkat-runter{background:#2563eb}
.labkat-stufe.an.labkat-hoch{background:#dc2626}
.labkat-stufe.an.labkat-normal{background:#16a34a}
.labkat-stufe.an.labkat-positiv{background:#dc2626}
.labkat-stufe.an.labkat-negativ{background:#16a34a}
.labkat-loeschen{color:var(--c-muted);font-weight:400}
.labkat-loeschen:disabled{opacity:.3;cursor:default}
.labkat-loeschen:disabled:hover{border-color:var(--c-border)}

.labkat-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.labkat-id{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.05em;
  background:var(--c-border);color:var(--c-text);border-radius:5px;padding:2px 6px;margin-right:4px}
.labkat-gruppe-klein{font-size:.75rem;color:var(--c-muted);margin-top:3px}
.labkat-marken{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.labkat-marke{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.04em;
  border-radius:5px;padding:2px 7px}
.labkat-marke-vollstaendig{background:#dcfce7;color:#166534}
.labkat-marke-teilweise{background:#fef3c7;color:#92400e}
html[data-theme="dark"] .labkat-marke-vollstaendig{background:#14331f;color:#86efac}
html[data-theme="dark"] .labkat-marke-teilweise{background:#3a2c15;color:#fcd34d}

.labkat-konst{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.labkat-krit{font-size:.78rem;border-radius:6px;padding:3px 8px;border:1px solid var(--c-border)}
.labkat-krit i{font-style:normal;color:var(--c-muted);font-size:.72rem}
.labkat-krit-treffer{background:rgba(22,163,74,.10);border-color:rgba(22,163,74,.4);color:#15803d}
.labkat-krit-offen{color:var(--c-muted)}
.labkat-krit-widerspruch{background:rgba(220,38,38,.08);border-color:rgba(220,38,38,.35);color:#b91c1c}
html[data-theme="dark"] .labkat-krit-treffer{color:#86efac}
html[data-theme="dark"] .labkat-krit-widerspruch{color:#fca5a5}

.labkat-offen,.labkat-dagegen,.labkat-quellenlage{font-size:.8rem;margin-top:8px;line-height:1.55}
.labkat-offen{color:#a16207}
.labkat-dagegen{color:#b91c1c}
.labkat-quellenlage{color:var(--c-muted);border-left:3px solid var(--c-border);padding-left:10px}
html[data-theme="dark"] .labkat-offen{color:#fcd34d}
html[data-theme="dark"] .labkat-dagegen{color:#fca5a5}

.labkat-warn{font-size:.84rem;line-height:1.6;margin-top:10px;padding:9px 11px;border-radius:8px}
.labkat-warn-notfall{background:rgba(220,38,38,.09);border-left:3px solid #dc2626;color:#991b1b}
.labkat-warn-warnung{background:rgba(234,88,12,.08);border-left:3px solid #ea580c;color:#9a3412}
html[data-theme="dark"] .labkat-warn-notfall{color:#fca5a5}
html[data-theme="dark"] .labkat-warn-warnung{color:#fdba74}

.labkat-block{margin-top:12px}
.labkat-block-h{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--c-muted);margin-bottom:5px}
.labkat-block ul{margin:0;padding-left:1.1em;font-size:.86rem;line-height:1.6}
.labkat-block li{margin-bottom:4px}
.labkat-dd .labkat-block-h{color:#7c3aed}
.labkat-werte .labkat-block-h{color:#0369a1}
.labkat-entfernt .labkat-block-h{color:#b91c1c}
.labkat-betont{font-weight:600}
.labkat-zusatz{color:var(--c-muted);font-size:.82rem}
.labkat-quelle{display:block;font-size:.72rem;color:var(--c-muted);margin-top:2px}
.labkat-quelle a{color:var(--c-muted);text-decoration:underline dotted}
.labkat-quelle a:hover{color:#4aa8e0}
.labkat-quelle-tr{margin:0 5px}

.labkat-belege{margin-top:12px;padding-top:10px;border-top:1px solid var(--c-border);
  font-size:.75rem;color:var(--c-muted);display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.labkat-chip{display:inline-block;border:1px solid var(--c-border);border-radius:11px;
  padding:2px 9px;color:var(--c-text);text-decoration:none;font-size:.73rem}
.labkat-chip:hover{border-color:#4aa8e0;color:#4aa8e0}
.labkat-schalter{display:flex;align-items:center;gap:7px;font-size:.82rem;cursor:pointer}
.labkat-schalter input{width:15px;height:15px;cursor:pointer}
.labkat-aus{margin:0;padding-left:1.1em;font-size:.84rem;line-height:1.6;color:var(--c-muted)}
.labkat-aus li{margin-bottom:7px}

@media (max-width:560px){
  .labkat-zeile{flex-direction:column;align-items:stretch;gap:6px}
  .labkat-stufen{justify-content:flex-start}
}

/* pt-labtools-gate-v1: Labor-Werkzeuge vorlaeufig nur fuer Admin und Entwickler.
   Standardmaessig verborgen und erst durch data-labtools="1" eingeblendet --
   nicht umgekehrt. So blitzen die Schaltflaechen beim Laden nicht auf,
   bevor das JavaScript die Rolle kennt. Gegenstelle: applyLabtoolsVisibility()
   in app.js und _labtools_required in app/routes.py. */
html:not([data-labtools="1"]) .nav-btn[data-page="labkat"]{display:none}

/* pt-labtool-verbergen: Das Labtool -- die Zahlenwert-Version, frueher
   "Labor-DD" -- taucht in der Navigation nicht mehr auf, auch nicht fuer
   Admin und Entwickler. Die Seite bleibt bestehen und ist ueber #labdd
   erreichbar; nur der Menueeintrag ist weg. Zum Wiedereinblenden diese
   eine Regel entfernen. */
.nav-btn[data-page="labdd"]{display:none!important}

/* pt-admin-notes-v1: Notizbrett im Admin-Bereich.
   Erledigte Notizen bleiben stehen, treten aber zurueck: gedaempfter
   Hintergrund, blasserer Rand, durchgestrichener Text (der Durchstrich
   sitzt im Inline-Stil in renderAdminNotes, damit er nur den Notiztext
   trifft und nicht Kopfzeile und Schaltflaechen). */
.admin-note{background:var(--c-white);border:1px solid var(--c-border);
  border-radius:10px;padding:12px 14px;margin-bottom:10px}
.admin-note:last-child{margin-bottom:0}
.admin-note.done{background:var(--c-bg);border-style:dashed;opacity:.72}
.admin-note.done:hover{opacity:1}
.admin-note textarea{background:var(--c-white);color:var(--c-text)}

/* pt-clinic-tools-restore: Der Sammel-Eintrag "Werkzeuge" gehoert nur in den
   Klinik-Modus. Die mode-Regeln weiter oben greifen nur auf .nav-btn, der
   Wrapper braucht darum eigene -- genau wie .nav-dd.mode-learn beim
   Trainer-Menue. Die Einzeltabs mit .nav-tools-item tragen mode-clinic selbst
   und sind damit schon abgedeckt. */
html[data-mode="learn"] .clinic-tools-wrap.mode-clinic{display:none}
html[data-mode="kb"] .clinic-tools-wrap.mode-clinic{display:none}

/* pt-labkat-profile: Schnellprofile ueber der Feldliste. Der aktive Knopf
   traegt die Akzentfarbe wie die Richtungs-Ueberschriften darunter, damit
   beides als eine Ebene liest. Der hervorgehobene Block bekommt nur eine
   dezente Kante -- er soll die Reihenfolge zeigen, nicht die Feldliste
   in zwei Haelften zerschneiden. */
.labkat-profile{margin-bottom:14px}
.labkat-profile-h{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--accent,var(--static-frame,#4aa8e0));margin-bottom:8px}
.labkat-profile-chips{display:flex;flex-wrap:wrap;gap:6px}
.labkat-profil{font-size:.8rem;padding:5px 11px;border-radius:14px;cursor:pointer;
  /* pt-darkmode-ccard-v1: war var(--c-card,#fff) -- die Variable gibt
     es nicht, der Rueckfall machte die Pille im Dark Mode weiss auf
     weiss (1,23:1). --c-white ist das Token, das .card benutzt. */
  border:1px solid var(--c-border);background:var(--c-white);color:var(--c-text);
  font-weight:600;white-space:nowrap;transition:border-color .12s,background .12s}
.labkat-profil:hover{border-color:var(--accent,var(--static-frame,#4aa8e0))}
.labkat-profil.an{border-color:var(--accent,var(--static-frame,#4aa8e0));
  color:var(--accent,var(--static-frame,#4aa8e0));
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 12%, transparent)}
.labkat-profil-info{font-size:.78rem;color:var(--c-muted);margin-top:8px}
.labkat-gruppe-profil{border-left:2px solid var(--accent,var(--static-frame,#4aa8e0));
  padding-left:10px;margin-left:-2px}

/* pt-thrombo-v1: Stufen fuer Verlauf und Exposition. Der Verlauf laeuft in
   der Akzentfarbe mit -- er ist eine Einordnung, keine Wertung. Ja und Nein
   folgen dagegen dem Muster von positiv/negativ weiter oben: eine bejahte
   Exposition ist der Befund, auf den es ankommt. */
.labkat-stufe.an.labkat-akut,
.labkat-stufe.an.labkat-subakut,
.labkat-stufe.an.labkat-chronisch{background:var(--accent,var(--static-frame,#4aa8e0))}
.labkat-stufe.an.labkat-ja{background:#dc2626}
.labkat-stufe.an.labkat-nein{background:#16a34a}
/* Verlauf und Exposition tragen Woerter statt Pfeilen und brauchen Platz. */
.labkat-gruppe .labkat-stufe.labkat-akut,
.labkat-gruppe .labkat-stufe.labkat-subakut,
.labkat-gruppe .labkat-stufe.labkat-chronisch{min-width:52px}

/* pt-leuko-v1: Stufen der Linksverschiebung und die zweite Leukozytenstufe.
   Die Linksverschiebung traegt Woerter statt Pfeilen und braucht Platz. */
/* pt-elektrolyte-v1: Der Volumenstatus ist keine Richtung, sondern ein
   klinischer Befund mit drei gleichrangigen Auspraegungen -- darum die
   Akzentfarbe wie beim Verlauf und keine Ampel. Ohne eigene Klasse bliebe
   der gewaehlte Knopf farblos, weil .labkat-stufe.an nur die Schriftfarbe
   setzt. Die drei brauchen wie der Verlauf mehr Breite. */
.labkat-stufe.an.labkat-hypovol,
.labkat-stufe.an.labkat-euvol,
.labkat-stufe.an.labkat-hypervol{background:var(--accent,var(--static-frame,#4aa8e0))}
.labkat-gruppe .labkat-stufe.labkat-hypovol,
.labkat-gruppe .labkat-stufe.labkat-euvol,
.labkat-gruppe .labkat-stufe.labkat-hypervol{min-width:52px}

.labkat-stufe.an.labkat-starkhoch{background:#b91c1c}
.labkat-stufe.an.labkat-lvstab{background:var(--accent,var(--static-frame,#4aa8e0))}
.labkat-stufe.an.labkat-lvmyelo{background:#b91c1c}
.labkat-gruppe .labkat-stufe.labkat-lvstab,
.labkat-gruppe .labkat-stufe.labkat-lvmyelo{min-width:52px}

/* pt-gerinnung-v1: Vier-Felder-Matrix, Verweise, Hinweisbloecke und die
   Kennzeichnung unbelegter Angaben. */
.labkat-matrix{margin-bottom:16px;padding:12px 14px;border:1px solid var(--c-border);
  border-radius:10px;background:var(--c-bg)}
.labkat-matrix-h{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--accent,var(--static-frame,#4aa8e0));margin-bottom:8px}
.labkat-matrix-t{border-collapse:collapse;width:100%;font-size:.8rem}
.labkat-matrix-t th{padding:5px 8px;text-align:left;font-weight:600;color:var(--c-muted);font-size:.76rem}
.labkat-matrix-t td{padding:7px 9px;border:1px solid var(--c-border);border-radius:7px;
  /* pt-darkmode-ccard-v1: wie bei .labkat-profil. */
  vertical-align:top;background:var(--c-white)}
.labkat-matrix-t td.an{border-color:var(--accent,var(--static-frame,#4aa8e0));
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 12%, transparent)}
.labkat-matrix-t td span{display:block;color:var(--c-muted);font-size:.74rem;margin-top:3px}
.labkat-matrix-btn{border:none;background:none;padding:0;font-weight:700;cursor:pointer;
  color:var(--accent,var(--static-frame,#4aa8e0));font-size:.82rem}
.labkat-matrix-btn:hover{text-decoration:underline}
.labkat-matrix-info{font-size:.76rem;color:var(--c-muted);margin-top:8px}

.labkat-verweis{border:1px solid var(--accent,var(--static-frame,#4aa8e0));background:none;
  color:var(--accent,var(--static-frame,#4aa8e0));border-radius:10px;padding:1px 8px;
  font-size:.72rem;font-weight:600;cursor:pointer;margin-left:6px;white-space:nowrap}
.labkat-verweis:hover{background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 14%, transparent)}

/* Kurz aufleuchten, wenn ein Verweis hierher gesprungen ist. */
.labkat-hervor{box-shadow:0 0 0 3px color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 45%, transparent);
  transition:box-shadow .3s}

.labkat-unbelegt{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.03em;
  background:#fef3c7;color:#92400e;border-radius:9px;padding:1px 7px;margin-left:6px;white-space:nowrap}
html[data-theme="dark"] .labkat-unbelegt{background:#3a2c15;color:#fcd34d}

/* pt-aiha-v1: Marke fuer ein Muster, das nicht widerlegt, sondern von einem
   spezifischeren abgeloest ist. Bewusst blau und nicht warnfarben -- es ist
   kein Einwand, sondern ein Verweis nach oben. */
.labkat-abgeloest{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.03em;
  background:#dbeafe;color:#1e40af;border-radius:9px;padding:1px 7px;margin-left:6px;white-space:nowrap}
html[data-theme="dark"] .labkat-abgeloest{background:#17293f;color:#93c5fd}

.labkat-block-fest{margin-bottom:12px;border-left:4px solid var(--c-muted)}
.labkat-block-vorn{border-left-color:#ea580c}
.labkat-block-text{font-size:.86rem;line-height:1.55;margin:8px 0 0}
.labkat-block-liste{margin:8px 0 0;padding-left:1.1em;font-size:.84rem;line-height:1.6}
.labkat-block-tab{border-collapse:collapse;width:100%;font-size:.8rem;margin-top:10px}
.labkat-block-tab th,.labkat-block-tab td{border:1px solid var(--c-border);padding:5px 9px;text-align:left}
.labkat-block-tab th{background:var(--c-bg);font-weight:600;font-size:.76rem}

/* pt-labkat-sprung-v1 ---------------------------------------------------
   Der schwebende Sprungknopf. Rechts, senkrecht mittig, mitscrollend --
   die linke Seite ist von #kbSideHandle belegt, und z-index 70 ist
   derselbe Wert wie dort: ueber dem Inhalt, unter Modalen (200),
   Kopfzeile (160) und Toasts (500).

   pt-labkat-sprung-v2: ER HAENGT AN DER KARTE, NICHT AM FENSTER. Vorher
   stand er auf right:24px und klebte damit am Fensterrand -- auf einem
   breiten Monitor weit weg vom Inhalt. Jetzt wird er von der Mitte aus
   gesetzt und wandert mit der Karte mit:

       Inhalt        1100 px max-width + 2 x 24 px Polsterung = 1148 px
       Kartenkante   bei 50% + 574 px          (574 = 1148 / 2)
       Knopf         beginnt 16 px daneben
                     -> left: calc(50% + 574px + 16px)

   16 px ist der Abstandsschritt, den das Modul ueberall benutzt, und
   zugleich der Wert, aus dem die Umschlagpunkte unten gerechnet sind.

   DREI GESTALTEN. Die Regel ist immer dieselbe:

       Fenster >= 2 x (574 + 16 + Knopfbreite)

       mit Text, rund 170 px   ->  2 x 760 = 1520  ->  aufgerundet 1540
       Pfeil-Rund, 44 px       ->  2 x 634 = 1268  ->  1268

   ab 1540 px    Pille mit Pfeil und Text, neben der Karte
   1268-1539     Pfeil-Rund, neben der Karte
   701-1267      Pfeil-Rund, am Fensterrand -- die freie Spalte ist dort
                 schmaler als der Knopf, er ueberlappt die Karte etwas.
                 Unvermeidlich; die Karte steht dort ohnehin randnah.
   bis 700       gar nicht

   Aufgebaut ist es von der kleinsten Gestalt aufwaerts: die Grundregel
   ist das Pfeil-Rund am Rand, die beiden min-width-Bloecke ergaenzen.
   So braucht keine Eigenschaft zurueckgenommen zu werden.

   Die Werte koennen NICHT als CSS-Variable in die @media-Abfragen: Media
   Queries werden vor der Kaskade ausgewertet und kennen keine custom
   properties. Sie stehen deshalb als Zahlen unten -- wer sie aendert,
   rechnet die Zeilen hier nach. */
#labkatSprung{
  display:none;position:fixed;right:12px;top:50%;transform:translateY(-50%);
  z-index:70;align-items:center;justify-content:center;gap:8px;
  width:44px;height:44px;padding:0;
  /* pt-darkmode-ccard-v1: wie bei .labkat-profil -- hier stand die
     Akzentfarbe auf weissem Grund (2,62:1, unter AA). */
  background:var(--c-white);border:1px solid #4aa8e0;border-radius:999px;
  cursor:pointer;color:#4aa8e0;
  font:inherit;font-size:.84rem;font-weight:600;white-space:nowrap;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
  transition:background .15s,box-shadow .15s}
#labkatSprung.an{display:flex}
#labkatSprung .labkat-sprung-text{display:none}
#labkatSprung:hover{background:rgba(74,168,224,.10);box-shadow:0 6px 20px rgba(0,0,0,.24)}
/* Gedreht wird NUR der Pfeil, nicht der Knopf -- der traegt das
   translateY(-50%) der senkrechten Mitte, eine Drehung darauf wuerde es
   ueberschreiben und den Knopf verspringen lassen. */
#labkatSprung .labkat-sprung-pfeil{display:block;line-height:1;font-size:1rem;
  transition:transform .28s ease}
#labkatSprung.labkat-sprung-hoch .labkat-sprung-pfeil{transform:rotate(180deg)}
html[data-theme="dark"] #labkatSprung{box-shadow:0 4px 16px rgba(0,0,0,.5)}
html[data-theme="dark"] #labkatSprung:hover{background:rgba(74,168,224,.18)}
@media (prefers-reduced-motion:reduce){
  #labkatSprung .labkat-sprung-pfeil{transition:none}
}
/* Ab 1268 px passt das Pfeil-Rund neben die Karte -- Rechnung oben. */
@media(min-width:1268px){
  #labkatSprung{right:auto;left:calc(50% + 574px + 16px)}
}
/* Ab 1540 px passt auch die Beschriftung daneben. */
@media(min-width:1540px){
  #labkatSprung{width:auto;height:auto;padding:11px 16px}
  #labkatSprung .labkat-sprung-text{display:inline}
}
/* Am Handy gar nicht -- wie die uebrigen 700er-Regeln des Moduls. */
@media(max-width:700px){
  #labkatSprung{display:none!important}
}
/* /pt-labkat-sprung-v1 -------------------------------------------------- */

/* pt-bg-accessmed-v1 */
/* Standard-Hintergrund, fensterfest.

   WARUM EINE EIGENE EBENE UND NICHT background AUF body:
   "cover" bemisst sich an der Flaeche des Elements. Der body ist auf
   der Startseite etwa fensterhoch, in den Modi aber so hoch wie der
   ganze Inhalt -- dort wurde das Bild derart hochskaliert, dass nur
   noch eine flache Farbflaeche zu sehen war. Eine Ebene mit
   position:fixed und inset:0 ist immer genau fenstergross und zeigt
   ueberall dasselbe Bild. Genau so loest es die App beim
   Nutzer-Hintergrund (app.css ~1106).

   WARUM html::before UND NICHT body::before:
   body::before und body::after gehoeren dem Nutzer-Hintergrund und
   seinem Abdunkler (~1106/1107). html::before war frei, ebenso die
   Ebene -3; -1 und -2 sind vergeben.

   Der Body wird durchsichtig gestellt, sonst deckte seine eigene
   Farbe die Ebene darunter zu. Die Grundfarbe traegt jetzt html --
   ueber var(--c-bg), damit sie dem Design folgt und im dunklen
   Betrieb nichts Helles aufblitzt. */
html{background:var(--c-bg)}
html::before{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:url("/static/img/accessmed-bg.svg") center/cover no-repeat}
body{background:transparent}
[data-theme="dark"] body{background:transparent}
/* Eigener Hintergrund gewaehlt: Standardbild weicht. */
html[data-bg="on"]::before{display:none}

/* pt-start-handy-v1: Hochformat-Fassung fuer hohe, schmale Fenster.

   Das Querformat-SVG traegt drei Wellen unten links (x 0..470) und
   dieselben punktgespiegelt oben rechts (x 970..1440). Dazwischen ist es
   leer. Bei center/cover sieht ein Hochformat-Fenster genau dieses leere
   Mittelstueck: 390x844 ergibt Faktor 0,938, gemalt 1350x844, mittig also
   -480 px Versatz -- sichtbar bleiben die Nutzereinheiten 512..928.

   Eine Wellenkante kaeme erst ab Breite/Hoehe >= 250/450 = 0,556 ins
   Bild. Umgeschaltet wird deshalb ueber das Seitenverhaeltnis und nicht
   ueber die Breite: Das Problem haengt am Verhaeltnis, ein 600 px breites,
   sehr hohes Fenster hat es genauso.

   2/3 statt 0,556, damit nicht erst der aeusserste Zipfel der Welle den
   Ausschlag gibt. Tablets im Hochformat (rund 3/4) bleiben bewusst beim
   Querformat -- die Hochformat-Fassung wuerde dort senkrecht stark
   beschnitten.

   KEIN !important: html[data-bg="on"]::before{display:none} hat (0,1,2),
   diese Regel (0,0,2). Das Standardbild weicht also weiterhin ganz,
   sobald ein eigener Hintergrund gesetzt ist. */
@media (max-aspect-ratio: 2/3){
  html::before{background-image:url("/static/img/accessmed-bg-hoch.svg")}
}

/* Titelzeile und eingeklapptes Menue durchscheinend -- dieselben
   Werte, die app.css ~191-195 schon fuer den Nutzer-Hintergrund
   setzt. Dort haengen sie an data-bg="on"; seit es einen
   Standard-Hintergrund gibt, steht hinter der Titelzeile aber IMMER
   ein Bild, also gilt es immer.
   Die Spezifitaeten sind so gewaehlt, dass sie die weissen Regeln
   schlagen (188, 208, 40 -- gleich stark, aber frueher), der
   Startseite mit ihrer voellig transparenten Leiste aber unterliegen
   (html[data-active-page="start"] .header, staerker). */
.header{background:rgba(255,255,255,.70);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
[data-theme="dark"] .header{background:rgba(20,24,30,.70)}
.header.nav-collapsed .header-nav{background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
[data-theme="dark"] .header.nav-collapsed .header-nav{background:rgba(20,24,30,.92)}
/* /pt-bg-accessmed-v1 */

/* pt-lizenz-code-hide-v1 -------------------------------------------------
   Lizenzcode-Feld im Profil fuer admin/developer aus. Das !important ist
   noetig, weil #lizenzCodeBox ein Inline-display:flex traegt.
   Steht bewusst am Dateiende und NICHT bei der anderen Lizenz-Regel --
   jene liegt in einem @media-Block und wuerde hier nur auf schmalen
   Schirmen greifen. */
html[data-lizenzcode="off"] #lizenzCodeBox{display:none !important}
/* pt-lizenz2-v1: Zugang zur Lizenzverwaltung, nach dem Muster von
   data-labtools. Bewusst als :not([...="1"]) und nicht als
   [...="0"]: fehlt das Attribut ganz -- vor dem ersten
   applyUserSettings(), bei einem Fehler, ohne Konto --, ist der
   Knopf verborgen. Die umgekehrte Regel zeigte ihn dann. */
html:not([data-orgadmin="1"]) #orgAdminBox{display:none !important}
html[data-orgadmin="1"] #orgAdminBox{display:flex}


/* pt-home-profil-collapse-v1 -------------------------------------------
   Der Profil-Chip klappt auf der Startseite am Handy nach drei Sekunden
   ein: Der Name blendet aus, uebrig bleibt der Avatar als runder Knopf.

   Warum nur unter 700 px: Darueber ist rechts oben Platz genug, der Name
   stoert dort niemanden. Am Handy nimmt die Pille ein gutes Viertel der
   Bildbreite ein und steht neben dem Titel der Startseite.

   Die Breite wird NICHT animiert. Der Chip ist width:auto -- eine
   Transition von auto auf einen Wert laeuft in keinem Browser. Animiert
   werden stattdessen max-width und Deckkraft des Namens sowie Polsterung
   und Spalte des Chips; seine Breite folgt dem Inhalt und laeuft damit von
   allein sauber mit. Weil der Chip an right haengt, wandert er beim
   Schrumpfen zugleich nach rechts an den Rand -- ohne eigene Regel.

   Die Endmasse sind nicht neu erfunden, sie ergeben sich:
       5 px Polsterung + 36 px Avatar + 5 px Polsterung = 46 px
   Genau die Kantenlaenge von #headerSettingsBtn gegenueber. Auch
   border-radius bleibt bei den vorhandenen 26 px -- bei 46 px Hoehe ist
   das mehr als die Haelfte und damit bereits ein Kreis. Ein zweiter Wert
   waere eine zweite Stelle, die bei einer Aenderung mitgepflegt werden
   muesste.

   Spezifitaet: (2,1,1) fuer den Namen, (1,1,1) fuer den Chip -- gleich
   stark wie die Regeln bei pt-start-zahnrad-v1 weiter oben, gewinnt also
   ueber die Reihenfolge. Deshalb steht der Block am Dateiende. */
@media (max-width:699px){
  html[data-active-page="start"] #headerUserChip{
    transition:padding 280ms ease-out, gap 280ms ease-out;
  }
  html[data-active-page="start"] #headerUserChip #headerUserName{
    max-width:60vw;opacity:1;
    overflow:hidden;white-space:nowrap;
    transition:max-width 280ms ease-out, opacity 280ms ease-out;
  }
  html[data-active-page="start"] #headerUserChip[data-collapsed="1"]{
    padding:5px;gap:0;
  }
  html[data-active-page="start"] #headerUserChip[data-collapsed="1"] #headerUserName{
    max-width:0;opacity:0;
  }
}
/* Wer Bewegung abbestellt hat, bekommt denselben Zustandswechsel ohne
   Uebergang -- der Chip ist dann sofort rund. */
@media (max-width:699px) and (prefers-reduced-motion:reduce){
  html[data-active-page="start"] #headerUserChip,
  html[data-active-page="start"] #headerUserChip #headerUserName{transition:none}
}
/* /pt-home-profil-collapse-v1 ----------------------------------------- */

/* pt-einstellungen-gruppen-v1 ------------------------------------------------
   Gliederung des Einstellungs-Dialogs: Gruppen statt einer durchlaufenden
   Liste. Innerhalb einer Gruppe keine Trennlinien, nur Abstand zwischen
   den Gruppen. Alle Farben kommen aus den vorhandenen Variablen, damit
   der dunkle Modus ohne eigene Regel mitgeht.
   .sc-user-head war bisher nur in der geteilten Regel oben definiert und
   nirgends verwendet; hier bekommt sie ihre eigene, ohne Rahmen. */
/* pt-einstellungen-kompakt-v1: Ueberschriften in AccessMed-Blau -- dieselbe Farbe wie die
   eingeschalteten Schalter darunter und wie .gs-sec in der globalen Suche.
   Der Hexwert ist nur der Rueckfall der bestehenden Kette, kein neuer Ton. */
#scLeft .sc-user-head{font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:var(--accent,var(--static-frame,#4aa8e0));padding:0 0 3px;margin-bottom:2px}
/* pt-einstellungen-kompakt-v1: enger, damit der Dialog ohne Bildlauf auskommt.
   Die Zeilenhoehe bleibt bei 44px (26px Schalter + 2x9px Polster). */
#scLeft .set-group{margin-bottom:12px}
#scLeft .set-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:9px 0}
#scLeft .set-label{min-width:0}
#scLeft .set-title{font-weight:600}
#scLeft .set-sub{font-size:.76rem;color:var(--c-muted);opacity:.9;line-height:1.45}
#scLeft .set-btns{display:flex;flex-wrap:wrap;gap:10px;padding:6px 0}
#scLeft .set-danger{margin-top:14px;padding:11px 14px;border:1px solid var(--c-red);border-radius:10px}
#scLeft .set-danger-head{font-weight:600;margin-bottom:4px;color:var(--c-red)}
#scLeft .set-danger-text{margin-bottom:8px;text-align:center}


/* ── pt-admin-promo-mobile-v1 ─────────────────────────────────────────────
   Promo-Bereich im Admin auf schmalen Bildschirmen.

   1) Die Tabelle unter "+ Code anlegen" wird in loadAdminPromo() erzeugt
      und war als einzige der JS-Tabellen nicht in einen Scroll-Container
      gewickelt; die Buchhaltungstabellen tragen dafuer ein inline
      overflow-x:auto. Diese Rolle uebernimmt hier #promoList, damit das
      Markup in der Funktion unangetastet bleibt.

      Der Kern ist max-width:none. Ursache des Umbruchs ist
      .admin-content table.admin-table{max-width:100%} weiter oben: die
      Tabelle wird in die Spaltenbreite gequetscht, deshalb bricht die
      Kopfzeile "Gueltig bis" um und wird abgeschnitten, statt zu
      scrollen. Der ID-Selektor schlaegt jene Regel und hebt die
      Deckelung NUR fuer diese eine Tabelle auf -- alle uebrigen
      Admin-Tabellen bleiben unveraendert.

      th{nowrap} gegen td{normal;min-width} ist woertlich das Verhaeltnis
      aus pt-bga-tab-scroll-v1: die Kopfzeile bricht nie, die Zellen
      duerfen es.
   -------------------------------------------------------------------- */
@media(max-width:700px){
  #promoList{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  #promoList table.admin-table{max-width:none;width:auto;min-width:100%}
  #promoList .admin-table th{white-space:nowrap}
  #promoList .admin-table td{white-space:normal;min-width:88px}
  #promoList::-webkit-scrollbar{height:4px}
  #promoList::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:4px}
}

/* 2) Das native Datumsfeld traegt auf WebKit eine grosse intrinsische
      Mindestbreite und ein eigenes Widget-Grau. In der auto-fit-Grid des
      Promo-Formulars sprengt es damit seine Spalte, und im Hellmodus
      sieht es anders aus als die Nachbarfelder.

      box-sizing steht hier bewusst NICHT: *{box-sizing:border-box} ganz
      oben in dieser Datei setzt das bereits global. Was wirkt, ist
      min-width:0 -- ohne das kann das Grid-Item wegen min-width:auto
      nicht unter die intrinsische Breite des Felds schrumpfen.

      background und color kommen aus den Variablen, nicht aus hartem
      #fff: im Dunkelmodus setzt [data-theme="dark"] input weiter oben
      dieselben Werte, der Block bleibt damit konsistent.

      Bewusst auf #promoExpires verengt. Dieselbe Schwaeche haben auch
      die Datumsfelder in Lizenzen (#lizOrgVon, #lizOrgBis, #lizDVon,
      #lizDBis) und Rechnungen (#invDatum, #invVon, #invBis); dort wurde
      sie nicht gemeldet und bleibt vorerst bestehen. Wer sie spaeter
      mitnimmt, ersetzt diese Regel durch .form-group input[type=date]
      und legt keine zweite daneben. */
#promoExpires{
  min-width:0;
  -webkit-appearance:none;
  appearance:none;
  background:var(--c-white);
  color:var(--c-text);
  font-family:inherit;
  font-size:.9rem;
}
/* Das Grid-Item selbst muss ebenfalls schrumpfen duerfen. */
#adminPromoSection .form-group{min-width:0}
/* ── pt-admin-promo-mobile-v1 Ende ────────────────────────────────────── */

/* pt-ekg-css-v1 ---------------------------------------------------------
   Uebernommen aus pt-bga-css-v1 mit denselben Werten; neu sind nur der
   Bildbetrachter und die Befund-Chips der Mehrfachauswahl. */
.ekg-case-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--c-border);cursor:pointer;font-size:.9rem}
.ekg-case-row:last-child{border-bottom:none}
.ekg-case-row:hover{background:rgba(74,168,224,.07)}
.ekg-badge{font-size:.68rem;font-weight:700;border-radius:999px;padding:2px 7px;color:#fff;background:#888}
.ekg-badge.d1{background:#2d9e5a}.ekg-badge.d2{background:#e8a33d}.ekg-badge.d3{background:#e63946}
.ekg-abl{font-size:.72rem;color:var(--c-muted)}
.ekg-opts{display:flex;flex-direction:column;gap:7px;align-items:stretch}
.ekg-opt{text-align:left;justify-content:flex-start}
.ekg-dot{width:9px;height:9px;border-radius:50%;background:var(--c-border);display:inline-block}
.ekg-dot.cur{background:#4aa8e0;box-shadow:0 0 0 3px rgba(74,168,224,.22)}
.ekg-dot.ok{background:#2d9e5a}.ekg-dot.bad{background:#e63946}
.ekg-fb{border-radius:8px;padding:10px 12px;font-size:.88rem;line-height:1.5}
.ekg-fb.ok{background:#e8f6ed;border:1px solid #b6e0c6;color:#1d6b3f}
.ekg-fb.bad{background:#fdecee;border:1px solid #f3c2c8;color:#96222e}
.ekg-fb.warn{background:#fff7e6;border:1px solid #f0d9a8;color:#8a5d10}
.ekg-fb.neutral{background:#f4f4f5;border:1px solid var(--c-border);color:var(--c-muted)}
.ekg-why{margin-top:8px;padding:9px 12px;border-left:3px solid #4aa8e0;background:rgba(74,168,224,.07);border-radius:0 6px 6px 0;font-size:.84rem;line-height:1.55;color:var(--c-text,#333)}
.ekg-diff.active{background:#4aa8e0;color:#fff;border-color:#4aa8e0}

/* Mehrfachauswahl der Befunde */
.ekg-bef-gruppe{font-size:.75rem;font-weight:600;color:var(--c-muted);margin:10px 0 5px;letter-spacing:.03em}
.ekg-bef-gruppe:first-child{margin-top:0}
.ekg-bef-reihe{display:flex;flex-wrap:wrap;gap:6px}
.ekg-bef-chip{border:1px solid var(--c-border);background:#fff;border-radius:999px;padding:5px 12px;font-size:.82rem;cursor:pointer;line-height:1.3;color:var(--c-text,#333)}
.ekg-bef-chip:hover{border-color:#4aa8e0}
.ekg-bef-chip.selected{background:#4aa8e0;border-color:#4aa8e0;color:#fff}
/* pt-ekg-grundlagen-v1: Abbildungen im Grundlagen-Teil. Kein Betrachter --
   volle Spaltenbreite, Blockelemente, damit sie am Handy untereinander
   stehen, ohne dass es dafuer eine eigene Regel braucht. */
.ekg-morph{margin:0 0 22px}
.ekg-morph:last-child{margin-bottom:0}
.ekg-morph-t{margin:0 0 8px;font-size:.95rem;font-weight:700;color:var(--c-text,#333)}
.ekg-morph-fig{margin:0 0 10px}
.ekg-gl-bild{display:block;width:100%;height:auto;border:1px solid var(--c-border);border-radius:8px;background:#fafafa}
.ekg-morph-fig figcaption{margin-top:5px;font-size:.75rem;color:var(--c-muted);text-align:center}

/* pt-ekg-ui-v4: ein Zurueck-Knopf fuer beide Trainer. btn-ghost war zu
   blass -- der Weg zurueck zur Fallliste war der am schwersten zu findende
   Knopf der Seite. */
.btn-zurueck{border:1px solid var(--c-border);background:var(--c-bg,#fff);color:var(--c-text,#333);font-weight:600;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.btn-zurueck:hover{border-color:#4aa8e0;color:#4aa8e0;background:rgba(74,168,224,.06)}
.btn-zurueck span{font-size:1.05em;line-height:1}

/* pt-ekg-ui-v2 */
.ekg-bef-hinweis{margin-top:10px;font-size:.78rem;color:var(--c-muted);line-height:1.45}

/* Bildbetrachter. Gezoomt wird ueber transform am img -- kein Layout,
   deshalb auch bei 4000 px fluessig. */
.ekg-viewer{padding:12px}
.ekg-viewer-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.ekg-viewer-meta{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:.78rem;color:var(--c-muted);flex:1;min-width:150px}
.ekg-viewer-btns{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.ekg-viewer-pct{font-size:.76rem;color:var(--c-muted);min-width:46px;text-align:center}
.ekg-img-wrap{position:relative;overflow:hidden;background:#fff;border:1px solid var(--c-border);border-radius:8px;height:min(62vh,560px);touch-action:none;cursor:grab}
.ekg-img-wrap:active{cursor:grabbing}
.ekg-img-wrap img{position:absolute;top:0;left:0;transform-origin:0 0;max-width:none;user-select:none;-webkit-user-drag:none;image-rendering:crisp-edges}
.ekg-viewer-hint{font-size:.74rem;color:var(--c-muted);margin-top:6px}
/* Rueckfall fuer Browser ohne Fullscreen-API am div (iOS-Safari). */
.ekg-viewer.ekg-viewer-fs{position:fixed;inset:0;z-index:9999;margin:0;border-radius:0;background:var(--c-bg,#fff);overflow:auto}
.ekg-viewer.ekg-viewer-fs .ekg-img-wrap{height:calc(100vh - 96px)}
.ekg-viewer:fullscreen{background:var(--c-bg,#fff);padding:14px}
.ekg-viewer:fullscreen .ekg-img-wrap{height:calc(100vh - 96px)}

/* Grundlagen-Akkordeon, analog .bga-gl-* */
.ekg-gl-head{display:flex;align-items:center;gap:14px;cursor:pointer}
.ekg-gl-card.open .ekg-gl-head{border-bottom:1px solid var(--c-border);padding-bottom:12px}
details.ekg-gl{border:1px solid var(--c-border);border-radius:8px;margin-bottom:8px;background:#fbfcfd}
details.ekg-gl>summary{cursor:pointer;padding:10px 13px;font-weight:600;font-size:.92rem;list-style:none;display:flex;align-items:center;gap:8px}
details.ekg-gl>summary::-webkit-details-marker{display:none}
details.ekg-gl>summary::before{content:"\25b8";color:var(--c-accent,#4aa8e0);font-size:.9rem}
details.ekg-gl[open]>summary::before{content:"\25be"}
details.ekg-gl[open]>summary{border-bottom:1px solid var(--c-border)}
.ekg-gl-in{padding:12px 14px;font-size:.87rem;line-height:1.6}
.ekg-gl-in p{margin:0 0 9px}
.ekg-gl-tab{width:100%;border-collapse:collapse;margin:8px 0 10px;font-size:.84rem}
.ekg-gl-tab th{text-align:left;background:#eef4fa;padding:6px 9px;border:1px solid var(--c-border);font-weight:600}
.ekg-gl-tab td{padding:6px 9px;border:1px solid var(--c-border);vertical-align:top}
.ekg-gl-tab b{color:#4aa8e0;font-weight:700}
.ekg-gl-note{background:#f6f8fa;border-left:3px solid #c8d4e0;padding:8px 11px;border-radius:0 6px 6px 0;font-size:.84rem}
.ekg-gl-formel{background:#eef5fc;border:1px solid #c2ddf3;border-radius:6px;padding:9px 12px;font-family:ui-monospace,Menlo,monospace;font-size:.85rem}
.ekg-gl-steps{margin:0 0 10px;padding-left:20px}
.ekg-gl-steps li{margin-bottom:5px}
.ekg-gl-src{font-size:.78rem;color:var(--c-muted);margin:12px 0 0;line-height:1.5}
@media(max-width:700px){
  .ekg-gl-tab{font-size:.76rem}
  .ekg-gl-tab th,.ekg-gl-tab td{padding:5px 6px}
  .ekg-img-wrap{height:min(52vh,420px)}
}
/* pt-ekg-css-v1 Ende --------------------------------------------------- */
/* pt-kb-highlight-v1 ---------------------------------------------------
   Textmarkierungen und Notizen im Wissens-Eintrag. Die Farben stehen als
   Variablen; der dunkle Modus setzt dieselben Namen mit geringerer
   Deckkraft neu, damit der Text darauf lesbar bleibt. Kein hartkodiertes
   Weiss -- Flaechen kommen aus --c-white, Text aus --c-text. */
:root{
  --kb-hl-gruen:rgba(45,158,90,.30);
  --kb-hl-orange:rgba(224,123,42,.30);
  --kb-hl-blau:rgba(74,168,224,.30);
  --kb-hl-gruen-voll:#2d9e5a;
  --kb-hl-orange-voll:#e07b2a;
  --kb-hl-blau-voll:#4aa8e0;
  /* pt-kb-highlight-v2 */
  --kb-hl-gelb:rgba(214,170,30,.32);
  --kb-hl-rosa:rgba(219,84,140,.26);
  --kb-hl-lila:rgba(124,58,237,.22);
  --kb-hl-gelb-voll:#d6aa1e;
  --kb-hl-rosa-voll:#db548c;
  --kb-hl-lila-voll:#7c3aed;
  --kb-hl-btn-text:#fff;
}
[data-theme="dark"]{
  --kb-hl-gruen:rgba(63,191,118,.22);
  --kb-hl-orange:rgba(243,146,63,.22);
  --kb-hl-blau:rgba(91,155,255,.22);
  --kb-hl-gruen-voll:#3fbf76;
  --kb-hl-orange-voll:#f3923f;
  --kb-hl-blau-voll:#5b9bff;
  /* pt-kb-highlight-v2 */
  --kb-hl-gelb:rgba(240,209,90,.20);
  --kb-hl-rosa:rgba(240,122,165,.20);
  --kb-hl-lila:rgba(168,120,240,.22);
  --kb-hl-gelb-voll:#f0d15a;
  --kb-hl-rosa-voll:#f07aa5;
  --kb-hl-lila-voll:#a878f0;
  --kb-hl-btn-text:#0e1116;
}
.kb-hl{border-radius:3px;padding:.06em 0;cursor:pointer;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.kb-hl-gruen{background:var(--kb-hl-gruen)}
.kb-hl-orange{background:var(--kb-hl-orange)}
.kb-hl-blau{background:var(--kb-hl-blau)}
.kb-hl-gelb{background:var(--kb-hl-gelb)}
.kb-hl-rosa{background:var(--kb-hl-rosa)}
.kb-hl-lila{background:var(--kb-hl-lila)}
/* Randmarker: nur Markierungen mit Notiz bekommen das Stiftsymbol. */
.kb-hl-note::after{content:"\270E";font-size:.72em;opacity:.6;margin-left:2px;
  vertical-align:super;line-height:0}

.kb-hl-menu,.kb-hl-pop{position:absolute;z-index:6000;background:var(--c-white);
  border:1px solid var(--c-border);box-shadow:0 6px 22px rgba(0,0,0,.20);
  color:var(--c-text)}
/* pt-kb-highlight-v2: sechs Punkte plus Stift. Auf sehr schmalen
   Geraeten bricht die Reihe um, statt aus dem Bild zu laufen. */
.kb-hl-menu{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;
  align-items:center;border-radius:16px;padding:7px 11px;
  max-width:calc(100vw - 16px)}
/* pt-kb-highlight-v2: 320px statt 280px -- bei 280px boten die 258px
   Innenflaeche den drei Buttons (zusammen rund 272px) zu wenig Platz,
   und der Speichern-Button lief rechts hinaus. */
.kb-hl-pop{display:block;border-radius:10px;padding:10px;
  width:min(320px,calc(100vw - 24px))}

.kb-hl-dot{width:19px;height:19px;border-radius:50%;border:2px solid transparent;
  cursor:pointer;padding:0;background:var(--kb-hl-gruen-voll)}
.kb-hl-dot-gruen{background:var(--kb-hl-gruen-voll)}
.kb-hl-dot-orange{background:var(--kb-hl-orange-voll)}
.kb-hl-dot-blau{background:var(--kb-hl-blau-voll)}
.kb-hl-dot-gelb{background:var(--kb-hl-gelb-voll)}
.kb-hl-dot-rosa{background:var(--kb-hl-rosa-voll)}
.kb-hl-dot-lila{background:var(--kb-hl-lila-voll)}
.kb-hl-dot:hover{transform:scale(1.12)}
.kb-hl-dot.an{border-color:var(--c-text);box-shadow:0 0 0 2px var(--c-white) inset}
.kb-hl-pen{width:24px;height:24px;border-radius:50%;border:1px solid var(--c-border);
  background:transparent;color:var(--c-text);cursor:pointer;font-size:.92rem;
  line-height:1;padding:0}
.kb-hl-pen:hover{border-color:var(--c-muted)}

.kb-hl-ta{width:100%;min-height:74px;resize:vertical;font:inherit;font-size:.88rem;
  padding:7px 8px;border:1px solid var(--c-border);border-radius:6px;
  background:var(--c-white);color:var(--c-text)}
.kb-hl-farbwahl{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:9px 0 10px}
/* pt-kb-highlight-v2: flex-wrap als Auffanglinie und rechtsbuendig --
   passt die Zeile nicht, rutscht ein Button in die naechste Zeile,
   statt ueber den Rand zu laufen. */
.kb-hl-akt{display:flex;flex-wrap:wrap;gap:7px;align-items:center;
  justify-content:flex-end}
.kb-hl-fill{flex:1 1 auto;min-width:0}
.kb-hl-akt button{font:inherit;font-size:.82rem;padding:5px 11px;border-radius:6px;
  cursor:pointer;border:1px solid var(--c-border);background:transparent;
  color:var(--c-text);white-space:nowrap;flex:0 0 auto;max-width:100%}
.kb-hl-akt .kb-hl-ok{background:var(--kb-hl-blau-voll);border-color:var(--kb-hl-blau-voll);color:var(--kb-hl-btn-text)}
.kb-hl-akt .kb-hl-del{color:var(--c-red);border-color:var(--c-red)}
/* pt-kb-highlight-v1 Ende ---------------------------------------------- */

/* pt-startseiten-v1 -----------------------------------------------------
   Eigene Startseiten. Die Flaeche liegt fest ueber der Seite, laesst aber
   Klicks durch (pointer-events:none) -- nur die Panels selbst fangen sie
   wieder ein. Sonst waere die Kopfzeile darunter nicht mehr bedienbar.

   Die Farben kommen aus wenigen Variablen, damit heller und dunkler
   Modus dieselbe Regel teilen und nicht zwei Saetze fester Werte
   gepflegt werden muessen.

   pt-panel-akzent-v1: Kopfleiste, Uhrfelder und Linien folgen der
   Akzentfarbe -- derselben Kette, aus der auch "Access" in AccessMed
   seine Farbe zieht. Custom Properties werden erst bei der Verwendung
   aufgeloest, ein Wechsel von --static-frame wandert also ohne Zutun
   durch.

   Gemischt und nicht voll gesetzt: Kopfleiste und Uhrfelder sind grosse
   Flaechen. Bei voller Saettigung waere aus dem ruhigen Kasten eine
   Ampel geworden, und die Schrift darauf haette je nach Profilfarbe
   nicht mehr getragen. Der Farbton folgt, die Helligkeit bleibt. */
:root{
  --qps-akzent:  var(--accent, var(--static-frame, #4aa8e0));
  --qps-flaeche: rgba(255,255,255,.82);
  --qps-kopf:    color-mix(in srgb, var(--qps-akzent) 32%, #ffffff);
  --qps-kopf-tx: color-mix(in srgb, var(--qps-akzent) 55%, #16203a);
  --qps-linie:   color-mix(in srgb, var(--qps-akzent) 30%, transparent);
  --qps-text:    #33406b;
  --qps-leer:    rgba(120,130,180,.55);
}
[data-theme="dark"]{
  --qps-flaeche: rgba(26,32,42,.86);
  --qps-kopf:    color-mix(in srgb, var(--qps-akzent) 40%, #1b2230);
  --qps-kopf-tx: color-mix(in srgb, var(--qps-akzent) 26%, #ffffff);
  --qps-linie:   color-mix(in srgb, var(--qps-akzent) 34%, transparent);
  --qps-text:    #dfe5ff;
  --qps-leer:    rgba(190,200,235,.55);
}

.qps-ovl{position:fixed;inset:0;pointer-events:none;z-index:40;padding:76px 14px 14px}
/* pt-startseiten-v2: feste Hoehe statt max-height -- beide Kaestchen
   sind gleich gross, auch wenn rechts erst wenige Diagnosen stehen.
   pt-startseiten-v7: Unter dem linken Kaestchen steht wieder der
   Knopf "Einstellungen". 76px Abstand oben, 86px unten fuer den Knopf
   (38px) und seinen Abstand (8px). Darunter bleibt die Reihe frei. */
.qps-panel{position:absolute;top:76px;width:236px;height:calc(100vh - 208px);
  display:flex;flex-direction:column;pointer-events:auto;
  background:var(--qps-flaeche);border:1px solid var(--qps-linie);border-radius:14px;
  box-shadow:0 6px 24px rgba(40,50,90,.18);overflow:hidden;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--qps-text)}
.qps-left{left:14px}
.qps-right{right:14px}
.qps-hd{background:var(--qps-kopf);color:var(--qps-kopf-tx);text-align:center;
  font-style:italic;font-size:.82rem;padding:6px 10px;letter-spacing:.02em}
.qps-body{padding:10px;overflow-y:auto}

.qps-datum{text-align:center;font-size:.72rem;opacity:.75;margin-bottom:6px}
.qps-clock{display:flex;gap:8px}
.qps-cbox{flex:1;background:var(--qps-kopf);color:var(--qps-kopf-tx);border-radius:10px;
  text-align:center;padding:10px 4px;font-size:1.9rem;font-weight:700;line-height:1.05}
.qps-cbox small{display:block;font-size:.62rem;font-weight:600;opacity:.8;letter-spacing:.08em}

.qps-gif{margin-top:10px;border-radius:10px;overflow:hidden;border:1px solid var(--qps-linie);
  min-height:104px;display:flex;align-items:center;justify-content:center;
  background:rgba(150,165,215,.12);cursor:pointer;transition:border-color .15s}
.qps-gif:hover{border-color:var(--qps-kopf)}
.qps-gif img{width:100%;display:block}
.qps-gif-leer{font-size:.72rem;text-align:center;color:var(--qps-leer);padding:14px 8px;line-height:1.5}

.qps-sec{margin:12px 0 6px;text-align:center;font-style:italic;font-weight:700;font-size:.82rem}
.qps-bar-row{margin-bottom:7px}
.qps-bar{height:11px;border-radius:6px;background:rgba(150,165,215,.22);
  border:1px solid var(--qps-linie);overflow:hidden}
.qps-bar-fill{display:block;height:100%;width:4%;border-radius:5px;transition:width .4s}
.qps-bar-lbl{font-size:.68rem;opacity:.8;margin-top:2px}
.qps-bar-lbl b{font-size:.74rem;opacity:1}

.qps-recent{display:flex;flex-direction:column;gap:5px}
.qps-recent-btn{width:100%;text-align:left;font-size:.74rem;line-height:1.35;
  padding:6px 8px;border-radius:8px;cursor:pointer;color:var(--qps-text);
  background:rgba(150,165,215,.16);border:1px solid var(--qps-linie)}
.qps-recent-btn:hover{background:var(--qps-kopf);color:var(--qps-kopf-tx)}

/* pt-startseiten-v2: Leiste und Suchzeile stehen in einer Reihe. Die
   Reihe ist mittig, die Leiste sitzt darin links -- dadurch rueckt sie
   nach links, ohne dass ein fester Versatz noetig waere. */
/* pt-startseiten-v4: dreigeteilt. Die Seitenspalten sind gleich breit
   (1fr auto 1fr), damit die Suchzeile mittig auf der SEITE steht und
   nicht nur mittig zwischen ihren Nachbarn -- sonst wanderte sie mit
   jedem zusaetzlichen Icon nach rechts. */
/* pt-reihen-klick-v1: pointer-events:none auf dem Grid, auto auf den
   drei Kaesten darin. Der Container spannt bis zu 1180 px und liegt an
   derselben Unterkante wie die Ziffernreihen links -- mit auto fing
   seine optisch leere linke Spalte deren Klicks ab. Dieselbe Aufteilung
   wie bei .qps-ovl weiter oben: durchlassen, und nur was sichtbar ist,
   holt sich die Klicks zurueck. */
.qps-unten{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  pointer-events:none;display:grid;grid-template-columns:1fr auto 1fr;gap:10px;
  align-items:stretch;justify-items:center;width:min(1180px,96vw)}
.qps-unten>.qps-dock{justify-self:end}
.qps-unten>.qps-modi{justify-self:start}
.qps-unten>.qps-dock,.qps-unten>.qps-such,.qps-unten>.qps-modi{pointer-events:auto}
.qps-dock{display:flex;gap:8px;padding:8px 10px;max-width:min(560px,52vw);
  flex-wrap:wrap;justify-content:center;align-items:center;
  background:var(--qps-flaeche);border:1px solid var(--qps-linie);border-radius:14px;
  box-shadow:0 6px 24px rgba(40,50,90,.18);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.qps-such{display:flex;align-items:center;width:min(420px,34vw);min-width:240px;padding:8px 10px;
  background:var(--qps-flaeche);border:1px solid var(--qps-linie);border-radius:14px;
  box-shadow:0 6px 24px rgba(40,50,90,.18);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.qps-such .kb-searchwrap{width:100%;margin:0}
/* Nach oben aufklappen: unter der Leiste ist der Bildschirm zu Ende. */
.qps-such .kb-sugg{top:auto;bottom:calc(100% + 10px);max-height:min(52vh,420px);overflow-y:auto}
/* pt-startseiten-v4: --qps-mc setzt das Layout je Knopf auf die Farbe
   des Modus. Der Rueckfall auf --qps-kopf greift, wenn ein Tab keinem
   Modus zugeordnet ist. */
.qps-icon{width:42px;height:42px;border-radius:11px;cursor:pointer;
  font-size:.76rem;font-weight:700;letter-spacing:.02em;
  background:var(--qps-mc,var(--qps-kopf));color:#fff;
  border:1px solid rgba(255,255,255,.28);text-shadow:0 1px 2px rgba(0,0,0,.25)}
.qps-icon:hover{filter:brightness(1.12)}

/* Titel mittig auf der Seite. Kein pointer-events noetig: der Text ist
   kein Bedienelement, und .qps-ovl laesst Klicks ohnehin durch. */
.qps-titel{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;
  font-size:clamp(2rem,5.2vw,3.4rem);font-weight:800;letter-spacing:-.02em;
  white-space:nowrap;text-shadow:0 2px 14px rgba(255,255,255,.55)}
[data-theme="dark"] .qps-titel{text-shadow:0 2px 14px rgba(0,0,0,.6)}

/* Die drei Modus-Knoepfe rechts der Suchzeile. --sm-col setzt
   _startModeButtons(). */
.qps-modi{display:flex;gap:6px;align-items:center;padding:8px 10px;
  background:var(--qps-flaeche);border:1px solid var(--qps-linie);border-radius:14px;
  box-shadow:0 6px 24px rgba(40,50,90,.18);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.qps-mode{display:inline-flex;align-items:center;gap:5px;height:42px;padding:0 11px;
  border-radius:11px;cursor:pointer;font-size:.76rem;font-weight:700;
  background:transparent;border:1.5px solid var(--sm-col,#4aa8e0);color:var(--sm-col,#4aa8e0)}
.qps-mode:hover{background:var(--sm-col,#4aa8e0);color:#fff}
.qps-mode:hover span{color:#fff!important}
.qps-mode .start-mode-em{font-size:.9rem}
.qps-dock-leer{font-size:.72rem;color:var(--qps-leer);padding:6px 4px;text-align:center}

/* pt-startseiten-v5: Zahnrad-Knopf unter dem linken Kaestchen, im Stil
   der Panels. Das schwebende Zahnrad der Kopfzeile weicht dafuer --
   :has(.qps-ovl) greift nur, solange eine eigene Startseite gezeichnet
   ist, und raeumt sich damit von selbst wieder ab. */
/* pt-startseiten-v11: EIN Kasten fuer beide Fussknoepfe. Groesse und
   Form stehen damit an einer Stelle und koennen nicht auseinanderlaufen
   -- genau das haelt die beiden symmetrisch. .qps-profil und .qps-einst
   setzen nur noch die Seite. */
.qps-fuss{position:absolute;bottom:86px;width:236px;height:38px;
  pointer-events:auto;display:flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;font-size:.82rem;font-weight:600;color:var(--qps-text);
  background:var(--qps-flaeche);border:1px solid var(--qps-linie);border-radius:14px;
  box-shadow:0 6px 24px rgba(40,50,90,.18);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  overflow:hidden;white-space:nowrap}
.qps-fuss:hover{background:var(--qps-kopf);color:var(--qps-kopf-tx)}
.qps-profil{left:14px}
.qps-einst{right:14px}
/* Der Avatar bekommt eigene Masse: die Regeln der Kopfzeile haengen an
   .header-user-card und gelten hier nicht -- 36px waeren im 38px hohen
   Knopf ohnehin zu gross. */
.qps-profil .huc-av{width:24px;height:24px;border-radius:50%;flex-shrink:0;object-fit:cover}
.qps-profil .huc-av-txt{background:#4aa8e0;color:#fff;display:inline-flex;
  align-items:center;justify-content:center;font-weight:700;font-size:.72rem}

/* pt-schnellwahl-v1: drei Reihen unter dem Profil-Knopf, absichtlich
   klein -- sie sollen erreichbar sein, nicht dominieren. Zusammen rund
   60 px hoch; der Profil-Knopf beginnt bei bottom:86px, darueber bleibt
   also Luft. */
.qps-reihen{position:absolute;left:14px;bottom:16px;width:236px;
  pointer-events:auto;display:flex;flex-direction:column;gap:3px}
.qps-reihe{display:flex;gap:3px}

/* pt-startzurueck-v1: Klein und links unten auf der Standard-Startseite.
   Fest positioniert, weil #startWrap seinen Inhalt mittig setzt -- im
   Fluss saesse der Knopf sonst unter dem Titel statt in der Ecke. */
.qps-zurueck{position:fixed;left:14px;bottom:16px;z-index:50;
  display:inline-flex;align-items:center;gap:6px;max-width:230px;
  height:30px;padding:0 11px;border-radius:10px;cursor:pointer;
  font-size:.74rem;font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;color:var(--c-muted);
  background:var(--c-card);border:1px solid var(--c-border);
  box-shadow:0 3px 12px rgba(40,50,90,.12)}
.qps-zurueck:hover{color:#fff;border-color:transparent;
  background:var(--accent,var(--static-frame,#4aa8e0))}
.qps-mini-btn{flex:1;height:18px;padding:0;border-radius:5px;cursor:pointer;
  font-size:.62rem;font-weight:700;line-height:1;
  background:var(--qps-flaeche);border:1px solid var(--qps-linie);color:var(--qps-text);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.qps-mini-btn:hover{background:var(--qps-kopf);color:var(--qps-kopf-tx)}
.qps-mini-btn.an{background:var(--accent,var(--static-frame,#4aa8e0));
  border-color:transparent;color:#fff}
/* Der Chip der Kopfzeile weicht dem Knopf unten. */
html[data-active-page="start"][data-qps="1"] #headerUserChip{display:none}

/* Das runde Zahnrad als feste letzte Zeile im rechten Kaestchen.
   flex:0 0 auto, damit die scrollende Liste darueber es nicht
   zusammendrueckt; die Linie oben setzt es von "zuletzt geoeffnet" ab. */
/* pt-startseiten-v10: margin-top:auto heftet ihn an die Unterkante des
   Kaestchens. Bei kurzer Liste schiebt der Wert ihn nach unten, bei
   langer loest er zu 0 auf -- eine Zeile fuer beide Faelle. */
.qps-verz{flex:0 0 auto;margin-top:auto;display:flex;align-items:center;justify-content:center;
  height:40px;cursor:pointer;font-size:.82rem;font-weight:600;letter-spacing:.02em;
  color:var(--qps-text);
  background:transparent;border:0;border-top:1px solid var(--qps-linie);border-radius:0}
.qps-verz:hover{background:var(--qps-kopf);color:var(--qps-kopf-tx)}

/* pt-startseiten-v8: Die senkrechte Lasche der Wissensdatenbank steht
   auf der Startseite, weil html[data-kbquick="on"] sie fuer Admin und
   Premium in jedem Modus einblendet. Auf einer eigenen Startseite weicht
   sie dem Knopf im rechten Kaestchen. #kbEdgeZone braucht keine Regel --
   die Randflaeche erscheint nur auf #page-wissen. */
html[data-active-page="start"][data-qps="1"] #kbSideHandle{display:none}
/* pt-startseiten-v7: war :has(.qps-ovl) und griff nicht zuverlaessig.
   data-qps setzt qpsRenderAktiv(), startRender() nimmt es zurueck. */
html[data-active-page="start"][data-qps="1"] #headerSettingsBtn{display:none}

/* Auswahl der Icons im Bearbeiten-Fenster */
.qps-pick{display:flex;align-items:center;gap:8px;width:100%;margin-bottom:4px;
  padding:5px 8px;border-radius:8px;cursor:pointer;text-align:left;
  background:transparent;border:1px solid var(--c-border);color:inherit}
.qps-pick.an{background:var(--qps-kopf);color:var(--qps-kopf-tx);border-color:transparent}
.qps-pick-kurz{display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;height:26px;border-radius:7px;font-size:.7rem;font-weight:700;
  background:rgba(150,165,215,.25)}
.qps-pick-lbl{font-size:.78rem}

/* Vorschau auf der Slot-Karte im Profil */
.qps-mini{position:relative;width:66px;height:34px}
.qps-mini span{position:absolute;background:rgba(255,255,255,.85);border-radius:2px}
.qps-mini-l{left:0;top:0;width:15px;height:34px}
.qps-mini-r{right:0;top:0;width:15px;height:34px}
.qps-mini-d{left:21px;bottom:0;width:24px;height:7px}

/* Am Handy stehen die Panels untereinander im Fluss statt links und
   rechts -- nebeneinander bliebe fuer die Mitte nichts uebrig. */
@media(max-width:820px){
  .qps-ovl{position:static;padding:0;pointer-events:auto}
  .qps-panel{position:static;width:auto;max-height:none;margin:0 0 12px}
  .qps-unten{position:static;transform:none;width:auto;max-width:none;
    display:flex;flex-direction:column;gap:8px}
  .qps-dock{max-width:none}
  .qps-such{width:auto;min-width:0}
  .qps-titel{position:static;transform:none;text-align:center;margin:0 0 12px;
    font-size:2rem;white-space:normal}
  /* pt-startseiten-v11: Am Handy stehen beide Fussknoepfe im Fluss.
     Erreicht wird der Block nur bei einer Groessenaenderung nach dem
     Zeichnen -- unter 821 px zeichnet qpsRenderAktiv() gar nicht erst. */
  .qps-fuss{position:static;width:auto;margin:0 0 12px}
  .qps-reihen{position:static;width:auto;margin:0 0 12px}
  .qps-such .kb-sugg{top:calc(100% + 6px);bottom:auto}
}
/* pt-impfstatus-handy-v1 -----------------------------------------------
   Die Zeilen von "Mein Impfstatus". Bis hierher standen Aufbau und Farbe
   inline im erzeugten Markup; am Handy sprengten die vier Spalten mit
   ihren Mindestbreiten die Karte, die Schalter lagen ausserhalb, und weil
   die Seite dadurch breiter wurde als der Bildschirm, rutschten auch der
   Kalender darueber und die Fussnoten darunter nach rechts.
   Die Farben sind unveraendert uebernommen: halbdurchsichtige Auflagen,
   damit sie im hellen wie im dunklen Design tragen. */
.ivs-zeile{display:grid;
  grid-template-columns:minmax(150px,1.3fr) auto minmax(160px,1fr) auto;
  gap:10px;align-items:center;padding:8px 10px;
  border-bottom:1px solid var(--c-border);border-radius:6px;min-width:0}
.ivs-zeile.ivs-gruen{background:rgba(31,122,111,.10)}
.ivs-zeile.ivs-gelb{background:rgba(184,134,11,.13)}
.ivs-zeile.ivs-rot{background:rgba(192,57,43,.10)}
.ivs-name{min-width:0}
.ivs-datum{display:flex;gap:5px;align-items:center;flex-wrap:wrap;min-width:0}
.ivs-balken{min-width:0}
.ivs-knoepfe{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
@media(max-width:820px){
  /* Untereinander statt nebeneinander: Name, Eintrag, Schutzdauer,
     Schalter. Eine Spalte mit minmax(0,1fr) -- nur so gibt das Raster
     nach, wenn ein Kind breiter waere als der Platz. */
  .ivs-zeile{grid-template-columns:minmax(0,1fr);gap:7px;padding:10px 8px}
  .ivs-knoepfe{justify-content:flex-start}
}
/* /pt-impfstatus-handy-v1 ------------------------------------------------- */

/* pt-qps-terminal-v1 ----------------------------------------------
   Aufbau 4: ein Terminalfenster auf dem Hintergrundbild. Ringsum bleibt
   Rand stehen -- ohne ihn waere es kein Fenster, sondern eine Seite mit
   dunklem Grund. Die Flaeche ist durchscheinend und unscharf hinterlegt,
   damit das Bild dahinter sichtbar bleibt.
   Der Aufbau ist bewusst dunkel gehalten, unabhaengig vom Farbschema:
   Ein helles Terminal waere die Abbildung von etwas anderem. Die
   Akzentfarbe des Nutzers traegt die Bezeichner. */
html[data-active-page="start"][data-qps="4"] .start-wrap{
  padding:0;gap:0;min-height:0}
.qps-ovl-4{
  position:fixed;inset:clamp(14px,2.2vh,26px) clamp(16px,2.2vw,34px);
  padding:0;pointer-events:auto;display:flex}
.qps-ovl-4 .qps-term{
  --qps-t-lin:rgba(255,255,255,.16);
  --qps-t-tx:#e9edf2;
  --qps-t-akz:var(--accent,var(--static-frame,#4aa8e0));
  flex:1;min-width:0;display:flex;flex-direction:column;
  border:1px solid var(--qps-t-lin);border-radius:10px;overflow:hidden;
  background:rgba(16,18,24,.66);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  box-shadow:0 26px 70px rgba(0,0,0,.48);
  font-family:"Cascadia Code","JetBrains Mono","Fira Code",Consolas,
    "DejaVu Sans Mono",monospace;
  color:var(--qps-t-tx);font-size:.82rem;line-height:1.5}
/* Titelleiste: Zierrat ohne Funktion, deshalb aria-hidden im Markup. */
.qps-ovl-4 .qps-term-kopf{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:7px 12px;border-bottom:1px solid var(--qps-t-lin);
  background:rgba(255,255,255,.05)}
.qps-ovl-4 .qps-term-tab{
  font-size:.74rem;letter-spacing:.06em;color:var(--qps-t-akz)}
.qps-ovl-4 .qps-term-ampel{display:flex;gap:7px}
.qps-ovl-4 .qps-term-ampel i{
  width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.22)}
.qps-ovl-4 .qps-term-leib{
  flex:1;min-height:0;display:grid;
  grid-template-columns:minmax(0,40%) minmax(0,1fr);
  gap:clamp(12px,2vw,30px);padding:clamp(10px,1.6vh,18px) clamp(14px,2vw,26px);
  /* pt-qps-terminal-v4: Das Fenster selbst scrollt nicht. Wird es eng,
     scrollt allein die rechte Spalte -- das Logo bleibt stehen, und der
     Rahmen bleibt der Rahmen. */
  overflow:hidden;
  /* pt-qps-terminal-v3: .start-wrap zentriert seine Kinder, und das erbte
     bis hierher jede Zeile im Terminal. Eine Konsole setzt linksbuendig;
     mittig steht nur, was ausdruecklich mittig gesetzt ist. */
  text-align:left}
.qps-ovl-4 .qps-term-links{
  min-width:0;display:flex;flex-direction:column;gap:10px}
.qps-ovl-4 .qps-term-ps{font-size:.78rem;opacity:.75}
.qps-ovl-4 .qps-term-ps span{opacity:.55}
/* Das Logo skaliert ueber die Schriftgroesse: Es ist Text, keine Grafik,
   und cqw haengt an der Spaltenbreite statt am Fenster. */
/* margin:auto in beide Richtungen: gleicher Abstand nach oben wie nach
   unten, dazu Luft links und rechts. */
.qps-ovl-4 .qps-term-logo{
  margin:auto;padding:0 clamp(6px,1.4vw,26px);
  color:var(--qps-t-akz);white-space:pre;
  font-family:inherit;font-size:clamp(5px,.92vw,11px);line-height:1.08;
  opacity:.92}
.qps-ovl-4 .qps-term-rechts{
  min-width:0;min-height:0;overflow:auto;
  display:flex;flex-direction:column;gap:clamp(7px,1.1vh,13px)}
.qps-ovl-4 .qps-term-gruss{font-size:.86rem}
.qps-ovl-4 .qps-term-gruss b{color:var(--qps-t-akz)}
/* fieldset/legend statt eigener Rahmen: Der Browser bricht die Linie um
   die Beschriftung von selbst auf -- genau der Schnitt einer
   Terminalausgabe, ohne eine Zeile Zusatzarbeit. */
.qps-ovl-4 .qps-tblk{
  border:1px solid var(--qps-t-lin);border-radius:5px;
  padding:2px 14px 7px;min-width:0}
/* Die Beschriftung mittig in der oberen Rahmenlinie, wie es eine
   Konsolenausgabe mit Kaesten haelt. margin:0 auto, nicht text-align --
   ein legend ist so breit wie sein Inhalt. */
.qps-ovl-4 .qps-tblk legend{
  margin:0 auto;
  padding:0 8px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--qps-t-akz)}
/* Jeder Eintrag bekommt einen kurzen Strich, der aus dem Rahmen kommt und
   auf ihn zeigt. Er liegt im Innenabstand des Blocks und braucht deshalb
   keine eigene Spalte. */
.qps-ovl-4 .qps-tz,
.qps-ovl-4 .qps-tmodi .qps-tmode,
.qps-ovl-4 .qps-tkonto .qps-tbtn,
.qps-ovl-4 .qps-tanp .qps-reihe{position:relative}
.qps-ovl-4 .qps-tz::before,
.qps-ovl-4 .qps-tmodi .qps-tmode::after,
/* pt-qps-terminal-v7: nur der erste. Die beiden Knoepfe stehen
   nebeneinander, der Strich des zweiten laege im ersten. */
.qps-ovl-4 .qps-tkonto .qps-tbtn:first-child::after,
.qps-ovl-4 .qps-tanp .qps-reihe::before{
  content:'';position:absolute;top:50%;left:-14px;width:10px;
  border-top:1px solid var(--qps-t-akz);opacity:.55;pointer-events:none}
.qps-ovl-4 .qps-tz{
  display:grid;grid-template-columns:86px minmax(0,1fr);gap:10px;
  padding:1px 0}
.qps-ovl-4 .qps-tz b{color:var(--qps-t-akz);font-weight:600}
.qps-ovl-4 .qps-tz span{min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.qps-ovl-4 .qps-tz em{font-style:normal;opacity:.62}
.qps-ovl-4 .qps-tz-leer{opacity:.55}
.qps-ovl-4 .qps-tbar{letter-spacing:-.04em;opacity:.5}
.qps-ovl-4 .qps-tbar i{font-style:normal;color:var(--qps-t-akz);opacity:1}
/* Die drei Modi untereinander. --sm-col setzt _startModeButtons() auf
   jedem Knopf inline; die Farbe des Modus traegt hier Rahmen und Text. */
.qps-ovl-4 .qps-tmodi{display:flex;flex-direction:column;gap:5px}
.qps-ovl-4 .qps-tmode,.qps-ovl-4 .qps-tbtn{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:6px 12px;border-radius:4px;cursor:pointer;text-align:left;
  font-family:inherit;font-size:.82rem;
  background:rgba(255,255,255,.04);
  border:1px solid var(--sm-col,var(--qps-t-lin));
  color:var(--sm-col,var(--qps-t-tx));transition:background .12s}
.qps-ovl-4 .qps-tmode:hover,.qps-ovl-4 .qps-tbtn:hover{
  background:rgba(255,255,255,.12)}
.qps-ovl-4 .qps-tmode::before,.qps-ovl-4 .qps-tbtn::before{
  content:'>';opacity:.55}
/* Das Sinnbild der Standard-Startseite tritt hier ab -- in einer Konsole
   steht keine Bildschrift. */
.qps-ovl-4 .qps-tmode .start-mode-em{display:none}
.qps-ovl-4 .qps-tkonto{display:flex;gap:8px}
.qps-ovl-4 .qps-tkonto .qps-tbtn{flex:1}
/* Anpassung: Beschriftung links, die fuenf Ziffern rechts daneben. */
.qps-ovl-4 .qps-tanp{display:flex;flex-direction:column;gap:6px}
/* pt-qps-terminal-v4: eine Zeile je Reihe. Vorher stand hier ein
   Raster mit zwei Spalten -- die Reihe hat aber sechs Kinder
   (Beschriftung und fuenf Ziffern), und die brachen nach jeder zweiten
   um. flex haelt sie zusammen, die Beschriftung nimmt den Rest. */
.qps-ovl-4 .qps-tanp .qps-reihe{
  display:flex;align-items:center;gap:5px;padding:0}
.qps-ovl-4 .qps-tanp .qps-reihe b{flex:1;min-width:0}
.qps-ovl-4 .qps-tanp .qps-reihe b{
  font-weight:600;color:var(--qps-t-akz);font-size:.8rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qps-ovl-4 .qps-tanp .qps-mini-btn{
  width:26px;height:20px;flex:0 0 auto;border-radius:3px;
  font-family:inherit;font-size:.72rem;
  background:rgba(255,255,255,.05);border:1px solid var(--qps-t-lin);
  color:var(--qps-t-tx);-webkit-backdrop-filter:none;backdrop-filter:none}
.qps-ovl-4 .qps-tanp .qps-mini-btn:hover{background:rgba(255,255,255,.14)}
.qps-ovl-4 .qps-tanp .qps-mini-btn.an{
  background:var(--qps-t-akz);border-color:transparent;color:#0d1016}
/* Die Eingabeaufforderung unten. Das Suchfeld verliert sein Gehaeuse und
   sitzt in der Zeile, als waere es der Rest der Eingabe. */
/* Die Antwort auf ein ins Leere gehendes cd, direkt ueber dem Prompt. */
.qps-ovl-4 .qps-term-msg{
  flex:0 0 auto;padding:0 clamp(14px,2vw,26px);
  font-size:.78rem;color:var(--qps-t-akz);opacity:.85;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qps-ovl-4 .qps-term-msg:empty{display:none}
.qps-ovl-4 .qps-term-fuss{
  flex:0 0 auto;display:flex;align-items:center;gap:9px;
  padding:9px clamp(14px,2vw,26px);border-top:1px solid var(--qps-t-lin);
  background:rgba(255,255,255,.04)}
.qps-ovl-4 .qps-term-prompt{
  color:var(--qps-t-akz);white-space:nowrap;font-size:.82rem}
.qps-ovl-4 .qps-term-such{
  flex:1;min-width:0;width:auto;max-width:none;margin:0;padding:0;height:auto;
  background:none;border:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.qps-ovl-4 .qps-term-such .kb-search{
  height:auto;padding:2px 0;font-family:inherit;font-size:.82rem;
  background:transparent;border:0;border-radius:0;box-shadow:none;
  color:var(--qps-t-tx)}
.qps-ovl-4 .qps-term-such .kb-search::placeholder{
  color:var(--qps-t-tx);opacity:.42}
/* Der blinkende Unterstrich sitzt am Anfang des Feldes und weicht dem
   ersten Zeichen: :placeholder-shown gilt nur, solange nichts getippt
   ist. :has() steht im Stylesheet bereits in Gebrauch. */
.qps-ovl-4 .qps-term-such{position:relative}
.qps-ovl-4 .qps-term-such:has(.kb-search:placeholder-shown)::after{
  content:'_';position:absolute;left:0;top:2px;pointer-events:none;
  color:var(--qps-t-akz);animation:qps-term-blink 1.06s steps(1,end) infinite}
@keyframes qps-term-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .qps-ovl-4 .qps-term-such:has(.kb-search:placeholder-shown)::after{
    animation:none}
}
/* pt-qps-terminal-v5: keine aufklappende Liste. Sie wird weiter
   gefuellt -- an ihr haengen die Eingabetaste und der Vorschlag --, aber
   sie zeigt sich nicht mehr. Die drei Klassen im Selektor schlagen
   .kb-sugg.open, ein !important ist dafuer nicht noetig. */
.qps-ovl-4 .qps-term-such .kb-sugg{display:none}
/* Der blasse Vorschlag liegt genau unter der Eingabe: gleiche Schrift,
   gleiche Polsterung, gleicher Anfang. Der getippte Teil darin ist
   unsichtbar, nicht entfernt -- er haelt den Rest an seinem Platz. */
.qps-ovl-4 .qps-term-ghost{
  position:absolute;left:0;top:0;padding:2px 0;
  font-family:inherit;font-size:.82rem;line-height:inherit;
  white-space:pre;pointer-events:none;
  max-width:100%;overflow:hidden}
.qps-ovl-4 .qps-term-ghost i{visibility:hidden;font-style:normal}
.qps-ovl-4 .qps-term-ghost b{font-weight:400;color:var(--qps-t-tx);opacity:.38}
.qps-ovl-4 .qps-term-such .kb-search{position:relative;z-index:1}
/* pt-qps-terminal-v9: das Ruhebild. Beide Grafiken stehen im
   Dokument, sichtbar ist je nach Zustand genau eine -- ein Wechsel, der
   nichts neu zeichnet und nichts nachlaedt.
   Der Aufbau von oben nach unten kommt aus clip-path mit steps(): So
   erscheint die Grafik zeilenweise, als gaebe die Konsole sie aus.
   Danach atmet sie leicht, damit ein stehendes Bild nicht wie ein
   eingefrorener Bildschirm wirkt. */
.qps-ovl-4 .qps-term-afk{display:none;margin:auto;
  padding:0 clamp(6px,1.4vw,26px);
  color:var(--qps-t-akz);white-space:pre;font-family:inherit;
  font-size:clamp(5px,.92vw,11px);line-height:1.08}
html[data-qps="4"]:not([data-qps-wach="1"]) .qps-ovl-4 .qps-term-logo{display:none}
html[data-qps="4"]:not([data-qps-wach="1"]) .qps-ovl-4 .qps-term-afk{
  display:block;
  animation:qps-afk-auf 1.5s steps(30,end) both, qps-afk-atmen 5s 1.5s infinite}
@keyframes qps-afk-auf{
  from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)}}
@keyframes qps-afk-atmen{
  0%,100%{opacity:.92} 50%{opacity:.62}}
@media (prefers-reduced-motion:reduce){
  html[data-qps="4"]:not([data-qps-wach="1"]) .qps-ovl-4 .qps-term-afk{
    animation:none}
}
/* Der Schalter in der Titelleiste. Seinen Text setzt qpsSperreToggle()
   (Kreis voll oder leer), das Wort daneben steht deshalb hier. */
.qps-ovl-4 .qps-term-sperre{
  position:static;width:auto;height:auto;margin:0 0 0 12px;padding:0;
  display:inline-flex;align-items:center;gap:5px;
  background:none;border:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  font-family:inherit;font-size:.72rem;line-height:1;cursor:pointer;
  color:var(--qps-t-tx);opacity:.5;transition:opacity .12s}
.qps-ovl-4 .qps-term-sperre::after{content:'afk';letter-spacing:.08em}
.qps-ovl-4 .qps-term-sperre:hover{opacity:.9;background:none}
.qps-ovl-4 .qps-term-sperre.an{color:var(--qps-t-akz);opacity:.95}

/* pt-qps-terminal-handy-v1: die schmale Fassung. Dieselben Bausteine,
   nur enger gestellt und untereinander -- ein Terminalfenster auf einem
   Telefon, kein zweiter Aufbau. Was Breite braucht, tritt ab: das Logo,
   das Ruhebild und der afk-Schalter, der ohne Ruhebild nichts mehr
   schaltet. Der Inhalt scrollt, Kopfzeile und Eingabezeile bleiben
   stehen -- so haelt es eine Konsole auch. */
@media(max-width:820px){
  .qps-ovl-4{inset:8px}
  .qps-ovl-4 .qps-term{font-size:.74rem;border-radius:8px}
  .qps-ovl-4 .qps-term-kopf{padding:5px 9px}
  .qps-ovl-4 .qps-term-tab{font-size:.68rem}
  .qps-ovl-4 .qps-term-ampel i{width:8px;height:8px}
  .qps-ovl-4 .qps-term-sperre{display:none}
  .qps-ovl-4 .qps-term-leib{
    grid-template-columns:minmax(0,1fr);gap:7px;padding:8px 10px;overflow:auto}
  .qps-ovl-4 .qps-term-logo,.qps-ovl-4 .qps-term-afk{display:none}
  .qps-ovl-4 .qps-term-links{gap:0}
  .qps-ovl-4 .qps-term-ps{font-size:.7rem}
  .qps-ovl-4 .qps-term-rechts{overflow:visible;gap:6px}
  .qps-ovl-4 .qps-term-gruss{font-size:.76rem}
  .qps-ovl-4 .qps-tblk{padding:1px 10px 5px;border-radius:4px}
  .qps-ovl-4 .qps-tblk legend{font-size:.64rem;padding:0 6px}
  /* Die Bezeichnerspalte schmaler, der Strich rueckt mit -- er haengt am
     Innenabstand des Blocks, und der ist hier ebenfalls kleiner. */
  .qps-ovl-4 .qps-tz{grid-template-columns:58px minmax(0,1fr);gap:7px}
  .qps-ovl-4 .qps-tz::before,
  .qps-ovl-4 .qps-tmodi .qps-tmode::after,
  .qps-ovl-4 .qps-tkonto .qps-tbtn:first-child::after,
  .qps-ovl-4 .qps-tanp .qps-reihe::before{left:-10px;width:7px}
  .qps-ovl-4 .qps-tmodi{gap:4px}
  .qps-ovl-4 .qps-tmode,.qps-ovl-4 .qps-tbtn{padding:5px 9px;font-size:.76rem}
  .qps-ovl-4 .qps-tanp .qps-reihe b{font-size:.72rem}
  .qps-ovl-4 .qps-tanp .qps-mini-btn{width:22px;height:18px;font-size:.66rem}
  .qps-ovl-4 .qps-term-fuss{padding:7px 10px;gap:6px}
  .qps-ovl-4 .qps-term-prompt{font-size:.76rem}
  .qps-ovl-4 .qps-term-such .kb-search,
  .qps-ovl-4 .qps-term-ghost{font-size:.76rem}
}

/* Zahnrad, Nutzerblock und Verzeichnisgriff weichen den eigenen Knoepfen
   im Konto-Block -- dieselbe Absicht wie in Aufbau 1. */
html[data-active-page="start"][data-qps="4"] #headerSettingsBtn,
html[data-active-page="start"][data-qps="4"] #headerUserChip,
html[data-active-page="start"][data-qps="4"] .start-credit{display:none}
html[data-active-page="start"][data-qps="4"] #kbSideHandle{display:none !important}
/* /pt-qps-terminal-v1 --------------------------------------------- */

/* pt-qps-handy-slot1-v7: Slot 1 am Handy. Sichtbar sind nur der
   Profil-Knopf und die Suchzeile oben, Logo und Titel in der Mitte und die
   drei Modus-Knoepfe unten; alles Weitere waere auf einem Telefon Gedraenge.
   Die Regeln haengen an der Startseite UND am Aufbau 1 -- data-qps bleibt
   nach dem Verlassen der Seite stehen, ohne data-active-page wuerde die
   Sperre des Bildlaufs auf anderen Seiten weiterwirken. */
@media(max-width:820px){
  html[data-active-page="start"][data-qps="1"],
  html[data-active-page="start"][data-qps="1"] body{overflow:hidden}
  html[data-active-page="start"][data-qps="1"] .start-wrap{
    padding:0;gap:0;min-height:0}
  /* Ein Raster statt einer Spalte: In der ersten Zeile stehen Profil-Knopf
     und Suchzeile nebeneinander, darunter der Titel, unten die Knoepfe.
     minmax(0,1fr) in der zweiten Spalte laesst die Suchzeile den ganzen
     Rest der Zeile nehmen, minmax(0,1fr) in der mittleren Reihe schiebt
     Kopf und Fuss an die Raender.
     width:100% ist noetig, weil .start-wrap seine Kinder mittig setzt:
     ohne die Angabe waere die Huelle nur so breit wie ihr Inhalt und
     liesse links und rechts einen Rand stehen, den niemand bestellt hat.
     --pt-kopf-h ist die Hoehe der oberen Zeile und steht genau einmal:
     Spaltenbreite, Knopf und Suchfeld holen sie sich von hier. Eine feste
     Spaltenbreite ist noetig, weil das Raster eine Spalte "auto" nach dem
     Inhalt bemisst -- der Knopf waere dann breiter als seine Spalte und
     liefe unter die Suchzeile. */
  html[data-active-page="start"][data-qps="1"] .qps-ovl{
    --pt-kopf-h:50px;
    display:grid;width:100%;
    grid-template-columns:var(--pt-kopf-h) minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr) auto;
    column-gap:10px;align-items:center;justify-items:center;
    height:100vh;height:100svh;overflow:hidden;padding:16px 12px;margin:0}
  /* Was nicht genannt wurde, bleibt weg -- auch die Zeile mit dem
     Entwicklernamen, die fest unten rechts sitzt und sonst in den
     Modus-Knoepfen liegt. */
  html[data-active-page="start"][data-qps="1"] .qps-panel,
  html[data-active-page="start"][data-qps="1"] .qps-dock,
  html[data-active-page="start"][data-qps="1"] .qps-reihen,
  html[data-active-page="start"][data-qps="1"] .qps-einst,
  html[data-active-page="start"][data-qps="1"] .qps-sperre,
  html[data-active-page="start"][data-qps="1"] .qps-ruhe-uhr,
  html[data-active-page="start"][data-qps="1"] .start-credit{display:none}
  /* Der runde Griff des Verzeichnisses gehoert auf die Seiten des
     Wissens-Modus, nicht auf die eigene Startseite. kb-mobile-fix4 setzt
     ihn unter 821 px mit display:flex !important, deshalb hier ebenso --
     die hoehere Spezifitaet entscheidet. */
  html[data-active-page="start"][data-qps="1"] #kbSideHandle{display:none !important}
  /* .qps-unten loest sich auf, damit Suchzeile und Knoepfe zu
     Geschwistern des Titels werden und einzeln gestellt werden koennen. */
  html[data-active-page="start"][data-qps="1"] .qps-unten{display:contents}
  /* Der Profil-Knopf verliert seine feste Lage und wird rund: Neben der
     Suchzeile ist kein Platz fuer den Namen, und der Avatar allein ist
     derselbe Knopf -- getroffen wird er ueber seine Klasse, das Markup
     bleibt unberuehrt. Das Bild darin nutzt den Platz aus, es bleibt nur
     der Rand des Knopfes stehen. */
  /* margin:0 ist kein Schmuck: Der Handy-Block weiter oben gibt
     .qps-fuss 12px Abstand nach unten, und das Raster zentriert die
     Aussenabstands-Box und nicht den Knopf -- er sass dadurch sechs Pixel
     ueber dem Suchfeld. Fuer den Einstellungen-Knopf und die Aufbauten 2
     und 3 bleibt jener Abstand unveraendert. */
  html[data-active-page="start"][data-qps="1"] .qps-profil{
    position:static;display:flex;grid-column:1;grid-row:1;
    width:var(--pt-kopf-h);height:var(--pt-kopf-h);
    margin:0;padding:0;gap:0;border-radius:50%}
  html[data-active-page="start"][data-qps="1"] .qps-profil>span:not(.huc-av){display:none}
  html[data-active-page="start"][data-qps="1"] .qps-profil .huc-av{
    width:calc(var(--pt-kopf-h) - 12px);height:calc(var(--pt-kopf-h) - 12px)}
  html[data-active-page="start"][data-qps="1"] .qps-profil .huc-av-txt{font-size:1.05rem}
  /* Die Huelle bekommt die Hoehe des Knopfes daneben. pt-ruhe-linie-v3
     gibt ihr 71px und richtet den Inhalt oben aus, damit der Ruhezustand
     sauber zu einer Linie zuklappt; am Handy sass das Feld dadurch oben
     in einer zu hohen Zelle und der mittig stehende Profil-Knopf rund
     zehn Pixel tiefer. Ueber 821 px bleibt jene Rechnung unberuehrt. */
  html[data-active-page="start"][data-qps="1"] .qps-such{
    grid-column:2;grid-row:1;justify-self:stretch;align-items:center;
    width:100%;max-width:none;min-width:0;margin:0;padding:0;
    height:var(--pt-kopf-h);
    background:none;border:0;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none}
  /* Dieselbe Hoehe wie der Knopf. Die Polsterung faellt auf 0 oben und
     unten -- bei fester Hoehe zentriert ein Eingabefeld seinen Text von
     selbst, mit der alten Polsterung waere er nach unten gerutscht. */
  html[data-active-page="start"][data-qps="1"] .qps-such .kb-search{
    height:var(--pt-kopf-h);padding:0 18px;box-shadow:none;
    background:color-mix(in srgb, var(--c-white) 52%, transparent);
    -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
  html[data-active-page="start"][data-qps="1"] .qps-titel{
    grid-column:1/-1;grid-row:2;margin:0;text-align:center}
  /* Drei gleiche Spalten -- die Breite kommt vom Raster und nicht mehr von
     der Laenge der Beschriftung. Dieselbe Aufteilung wie .start-modes auf
     der Standard-Startseite. Der Abstand nach unten ist rund eine
     Knopfhoehe: am unteren Bildrand liegt der Daumen schlecht, und auf
     dem Telefon steht dort der Streifen zum Zurueckwischen. */
  html[data-active-page="start"][data-qps="1"] .qps-modi{
    grid-column:1/-1;grid-row:3;padding:0;
    margin:0 0 calc(64px + env(safe-area-inset-bottom, 0px));
    background:none;border:0;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    display:grid;grid-template-columns:repeat(3,1fr);gap:9px;
    width:100%;max-width:420px}
  /* Etwas hoeher als auf der Standard-Startseite und mit durchscheinender
     Flaeche, damit das Hintergrundbild sichtbar bleibt. */
  html[data-active-page="start"][data-qps="1"] .qps-modi .start-mode{
    width:auto;min-width:0;padding:20px 6px;
    background:color-mix(in srgb, var(--c-white) 52%, transparent);
    -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
}
/* /pt-startseiten-v1 --------------------------------------------------- */

/* pt-mediathek-v1 -------------------------------------------------------
   Das Fenster der Mediathek. Die Kacheln sind bewusst breit genug fuer
   eine erkennbare Vorschau -- bei einem Video entscheidet die Bewegung,
   nicht das Standbild. */
/* pt-mediathek-v6: Der Schliess-Knopf. .modal-close stand im Markup,
   ohne dass je eine Regel dazu geschrieben wurde -- der Knopf lief
   deshalb im Fluss mit, ueber der Ueberschrift. Zuschnitt von
   .algo-modal-close uebernommen: dieselbe Aufgabe, dasselbe Aussehen.
   position:relative nur dort, wo ein solcher Knopf steht; :has() ist im
   Stylesheet bereits in Gebrauch. */
.modal:has(.modal-close){position:relative}
.modal:has(.modal-close) h2{padding-right:44px}
.modal-close{position:absolute;top:14px;right:16px;z-index:5;
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--c-border,#dce3ec);background:var(--c-white,#fff);
  font-size:1.4rem;line-height:1;cursor:pointer;color:var(--c-muted,#8b97a6);
  display:flex;align-items:center;justify-content:center;transition:.12s}
.modal-close:hover{background:var(--c-bg,#eef4fa);color:var(--c-text,#2a3441)}

/* Die Reiter als Segmentleiste in einer gemeinsamen Rille. grid-auto-
   columns:1fr macht sie gleich breit -- unabhaengig von der Laenge der
   Beschriftung und davon, wie viele es sind. */
.med-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;
  margin-bottom:12px;padding:4px;border-radius:12px;
  background:color-mix(in srgb, var(--c-border) 34%, transparent)}
.med-tab{padding:7px 6px;border-radius:9px;cursor:pointer;
  font-size:.8rem;font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;background:transparent;border:none;
  color:var(--c-muted);transition:.12s}
.med-tab:hover{background:var(--c-white);color:var(--c-text)}
.med-tab.an{background:var(--accent,var(--static-frame,#4aa8e0));color:#fff;
  box-shadow:0 1px 4px rgba(40,50,90,.18)}
.med-tab.an:hover{background:var(--accent,var(--static-frame,#4aa8e0));color:#fff}

/* Hochladen rechtsbuendig. */
.med-kopf{display:flex;gap:8px;align-items:center;justify-content:flex-end;
  flex-wrap:wrap;margin-bottom:4px}
.med-hinweis{font-size:.74rem;color:var(--c-muted);margin-bottom:10px}
.med-pick{font-size:.78rem;font-weight:600;margin-bottom:8px;
  color:var(--accent,var(--static-frame,#4aa8e0))}
.med-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  max-height:52vh;overflow-y:auto;padding:2px}
.med-leer{grid-column:1/-1;text-align:center;font-size:.82rem;color:var(--c-muted);padding:26px 8px}
.med-kachel{position:relative;border:1px solid var(--c-border);border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;background:var(--c-card)}
.med-vor{position:relative;height:86px;background:linear-gradient(135deg,#1e242c,#2a3340);overflow:hidden}
/* pt-mediathek-v2: Kennzeichen, dass die Kachel ein Video ist. Ohne Maus
   laeuft keine Vorschau -- ein stehendes Video saehe sonst aus wie ein
   kaputtes Bild. Verschwindet, sobald die Vorschau laeuft. */
.med-play{position:absolute;left:6px;bottom:5px;font-size:.7rem;line-height:1;
  padding:3px 6px;border-radius:6px;background:rgba(0,0,0,.55);color:#fff;
  pointer-events:none;transition:opacity .15s}
.med-vor:hover .med-play{opacity:0}
.med-vor img,.med-vor video{width:100%;height:100%;object-fit:cover;display:block}
.med-name{padding:5px 7px;font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--c-muted)}
.med-slots{display:flex;gap:3px;padding:0 6px 6px}
.med-slots button{flex:1;height:24px;border-radius:6px;cursor:pointer;font-size:.72rem;font-weight:700;
  background:transparent;border:1px solid var(--c-border);color:var(--c-text)}
.med-slots button:hover{background:var(--accent,var(--static-frame,#4aa8e0));border-color:transparent;color:#fff}
.med-nimm{margin:0 6px 6px;height:26px;border-radius:7px;cursor:pointer;font-size:.74rem;font-weight:600;
  background:var(--accent,var(--static-frame,#4aa8e0));border:none;color:#fff}
/* pt-mediathek-v4: gesperrt, solange keine eigene Startseite aktiv ist */
.med-nimm[disabled]{background:var(--c-muted);cursor:default;opacity:.7;font-weight:500}
.med-weg{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;cursor:pointer;
  font-size:.9rem;line-height:1;background:rgba(0,0,0,.55);border:none;color:#fff}
.med-weg:hover{background:#e63946}
/* /pt-mediathek-v1 ----------------------------------------------------- */

/* pt-startseite2-3-v1 ----------------------------------------------------
   Aufbau 2 "Verzeichnis" und Aufbau 3 "Ambiente". */

/* Titel ohne die absolute Lage von Aufbau 1 -- hier steht er im Fluss. */
.qps-titel-flach{position:static;transform:none;margin:0 0 18px}
.qps-titel-klein{font-size:clamp(1.2rem,2.4vw,1.7rem);margin:18px 0 0}
.qps-titel-klein .start-logo{width:clamp(46px,7vw,72px)}

/* ---- Aufbau 2 -------------------------------------------------------- */
/* pt-startseite2-3-v2: ohne eigene Bildlaufleiste -- die Spalte waechst
   natuerlich. Ein Kasten mit max-height sass zu eng an den
   Modus-Knoepfen darunter. */
.qps-ovl-2 .qps-mitte{position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);pointer-events:auto;
  width:min(760px,92vw);display:flex;flex-direction:column;align-items:center}
.qps-ovl-2 .qps-modi{margin-top:16px}
.qps-such-breit{width:min(560px,88vw)}

/* pt-startseite2-3-v3: hiess .qps-verz und kollidierte damit mit dem
   Verzeichnis-Knopf aus Aufbau 1, dessen Regel frueher steht und
   height:40px, display:flex, align-items:center, border-top,
   cursor:pointer und ein :hover mit Flaeche mitbrachte. */
.qps-listen{display:grid;grid-template-columns:1fr 1fr;gap:14px 40px;
  width:100%;margin:26px 0 22px}
.qps-sp{display:flex;flex-direction:column;gap:2px}
.qps-sp-kopf{font-size:.72rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--qps-kopf-tx);opacity:.85;
  padding-bottom:6px;margin-bottom:4px;
  border-bottom:1px solid var(--qps-linie)}
.qps-link{display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:5px 2px;cursor:pointer;text-align:left;
  background:transparent;border:0;border-radius:6px;
  font-size:.92rem;color:var(--qps-text)}
/* pt-startseite2-3-v2: ohne Flaeche. Ein Balken hinter einer Textzeile
   wirkte wie eine Auswahl, die es nicht gibt -- Farbwechsel und ein
   kleiner Einzug reichen. */
.qps-link:hover{color:var(--qps-kopf-tx);padding-left:8px}
.qps-zahl{font-size:.74rem;font-weight:700;padding:1px 7px;border-radius:8px;
  background:var(--qps-kopf);color:var(--qps-kopf-tx)}
.qps-zahl:empty{display:none}

/* ---- Aufbau 3 -------------------------------------------------------- */
.qps-ovl-3 .qps-amb{position:absolute;left:50%;top:42%;
  transform:translate(-50%,-50%);text-align:center;pointer-events:none;
  color:var(--qps-text)}
.qps-amb-zeit{font-size:clamp(4rem,15vw,10rem);font-weight:200;line-height:1;
  letter-spacing:-.03em;text-shadow:0 3px 24px rgba(255,255,255,.45)}
.qps-amb-zeit i{font-style:normal;opacity:.45;margin:0 .04em}
.qps-amb-datum{margin-top:6px;font-size:clamp(.85rem,1.6vw,1.05rem);
  letter-spacing:.16em;text-transform:uppercase;opacity:.75}
[data-theme="dark"] .qps-amb-zeit{text-shadow:0 3px 24px rgba(0,0,0,.55)}

.qps-amb-bed{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  width:min(560px,88vw)}

/* Ausgeblendet, bis sich etwas ruehrt. pointer-events faellt mit weg --
   eine unsichtbare Suchzeile soll keine Klicks schlucken. Jede Bewegung
   blendet ohnehin ein, bevor jemand klicken kann. */
html[data-qps="3"] .qps-wach,
html[data-qps="3"] #headerSettingsBtn,
html[data-qps="3"] #headerUserChip,
html[data-qps="3"] #kbSideHandle{
  opacity:0;pointer-events:none;transition:opacity .45s}
html[data-qps="3"][data-qps-wach="1"] .qps-wach,
html[data-qps="3"][data-qps-wach="1"] #headerSettingsBtn,
html[data-qps="3"][data-qps-wach="1"] #headerUserChip,
html[data-qps="3"][data-qps-wach="1"] #kbSideHandle{
  opacity:1;pointer-events:auto}

@media(max-width:820px){
  .qps-ovl-2 .qps-mitte,.qps-amb-bed,.qps-ovl-3 .qps-amb{
    position:static;transform:none;width:auto;max-height:none}
  .qps-listen{grid-template-columns:1fr;gap:18px}
}
/* /pt-startseite2-3-v1 -------------------------------------------------- */

/* pt-startseite2-3-v2 ----------------------------------------------------
   Suchzeile und Modus-Knoepfe. */

/* Aufbau 2 und 3 ohne Kasten. Auch das Eingabefeld selbst wird
   durchsichtig, sonst bliebe statt der Box eine weisse Pille stehen.
   Der Farbring bleibt -- er traegt die Form. */
.qps-ovl-2 .qps-such,.qps-ovl-3 .qps-such,
.qps-ovl-2 .qps-modi,.qps-ovl-3 .qps-modi{
  background:none;border:0;box-shadow:none;padding:0;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.qps-ovl-2 .kb-search,.qps-ovl-3 .kb-search{background:transparent;
  box-shadow:none}

/* Schrift und Platzhalter in der Farbe der Rahmenlinie -- in allen drei
   Aufbauten. Die Linie liegt schon auf derselben Kette, beide wandern
   damit mit dem Schnellprofil mit.
   Die zweite Fassung mit html[data-bg="on"] ist noetig, weil die
   bestehende Regel dort den Platzhalter weiss faerbt und genau dann
   greift, wenn eine eigene Startseite laeuft. */
.qps-ovl .kb-search{color:var(--qps-akzent)}
.qps-ovl .kb-search::placeholder{color:var(--qps-akzent);opacity:.72}
html[data-bg="on"] .qps-ovl .kb-search{color:var(--qps-akzent)}
html[data-bg="on"] .qps-ovl .kb-search::placeholder{
  color:var(--qps-akzent);opacity:.72;text-shadow:none}
/* /pt-startseite2-3-v2 -------------------------------------------------- */

/* pt-startseite1-ruhe-v1 -------------------------------------------------
   Ruhezustand von Aufbau 1. Geschaltet wird er wie bei Aufbau 3 ueber
   data-qps-wach an <html>: gesetzt bei Bewegung, nach kurzer Ruhe wieder
   entfernt.

   Die Uebergaenge stehen an den GRUNDREGELN, nicht am Ruhezustand --
   sonst liefe nur der Hinweg weich und der Rueckweg spraenge. */
.qps-panel{transition:height .5s cubic-bezier(.4,0,.2,1)}
.qps-titel{transition:top .55s cubic-bezier(.4,0,.2,1),
                      transform .55s cubic-bezier(.4,0,.2,1)}
.qps-fuss,.qps-reihen{transition:transform .5s cubic-bezier(.4,0,.2,1),
                                 opacity .4s}
/* pt-ruhe-takt-v1: Auf dem RUECKWEG kommen sie zuletzt -- erst faehrt
   der Strich herunter, dann oeffnet sich das Kaestchen, dann kehren sie
   hervor. Auf dem Hinweg gehen sie zuerst; das setzt die Ruhe-Regel
   weiter unten ueber transition-delay:0s. */
.qps-unten>.qps-dock,.qps-unten>.qps-modi{
  position:relative;z-index:1;
  transition:transform .5s cubic-bezier(.4,0,.2,1) .95s,opacity .4s .95s}
/* Die Suchzeile liegt hoeher, damit die beiden wirklich DAHINTER
   verschwinden und nicht darueber.
   pt-startseite1-ruhe-v2: Ihr Kasten blendet im Ruhezustand mit aus --
   die Uebergaenge dafuer stehen hier an der Grundregel. */
.qps-unten>.qps-such{position:relative;z-index:2;
  transition:background .45s,border-color .45s,box-shadow .45s}
.qps-unten>.qps-such .kb-search{transition:background .45s,box-shadow .45s}

/* Ruhezustand: kein Kasten mehr hinter der Suchzeile. Der Rahmen wird
   durchsichtig gesetzt und nicht entfernt -- die Breite bleibt damit
   erhalten und die Zeile springt beim Umschalten nicht um einen Punkt.
   Uebrig bleibt der Farbring des Eingabefeldes. */
html[data-qps="1"]:not([data-qps-wach="1"]) .qps-unten>.qps-such{
  background:none;border-color:transparent;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}
html[data-qps="1"]:not([data-qps-wach="1"]) .qps-unten>.qps-such .kb-search{
  background:transparent;box-shadow:none}

/* Kaestchen klappen auf ihre Kopfleiste zusammen. 34px ist deren Hoehe:
   Schrift .82rem mal Zeilenhoehe plus 6px Polsterung oben und unten. */
html[data-qps="1"]:not([data-qps-wach="1"]) .qps-panel{height:34px}

/* Was links steht, faehrt nach links; was rechts steht, nach rechts.
   Die eigene Breite plus ein Stueck, damit auch der Schatten mitgeht. */
html[data-qps="1"]:not([data-qps-wach="1"]) .qps-profil,
html[data-qps="1"]:not([data-qps-wach="1"]) .qps-reihen{
  transform:translateX(calc(-100% - 28px));opacity:0}
html[data-qps="1"]:not([data-qps-wach="1"]) .qps-einst{
  transform:translateX(calc(100% + 28px));opacity:0}

/* Leiste und Modus-Knoepfe hinter die Suchzeile. Sie sitzen im Raster
   unmittelbar neben ihr, die eigene Breite plus der Spaltenabstand von
   10px bringt sie genau dahinter. pointer-events faellt weg, damit
   nichts Unsichtbares Klicks abfaengt. */
html[data-qps="1"]:not([data-qps-wach="1"]) .qps-unten>.qps-dock{
  transition-delay:0s;transform:translateX(calc(100% + 10px));
  opacity:0;pointer-events:none}
html[data-qps="1"]:not([data-qps-wach="1"]) .qps-unten>.qps-modi{
  transition-delay:0s;transform:translateX(calc(-100% - 10px));
  opacity:0;pointer-events:none}

/* Logo und Titel wandern nach unten ueber die Suchzeile und werden
   kleiner. Ueber top und scale und nicht ueber font-size: eine
   Verwandlung laeuft auf der Grafikkarte, ein Schriftgrad zwingt zu
   Neuberechnung des Umbruchs in jedem Einzelbild. */
/* pt-ruhe-linie-v1: 172 statt 148 -- darunter steht jetzt die Linie,
   und bei 148 laege sie im Titel statt unter ihm. */
html[data-qps="1"]:not([data-qps-wach="1"]) .qps-titel{
  top:calc(100vh - 172px);transform:translate(-50%,-50%) scale(.46)}
/* /pt-startseite1-ruhe-v1 ---------------------------------------------- */

/* pt-ruhe-sperre-v1 ------------------------------------------------------
   Schalter, der den Ruhezustand anhaelt. Rechts unten, spiegelbildlich
   zu den Ziffernreihen links und in deren Groesse: 45 x 18. */
/* pt-ruhe-sperre-v2: direkt unter dem Einstellungen-Knopf. Der beginnt
   bei bottom:86px; 86 minus 6px Abstand minus 18px Hoehe ergibt 62. */
.qps-sperre{position:absolute;right:14px;bottom:62px;width:45px;height:18px;
  pointer-events:auto;display:flex;align-items:center;justify-content:center;
  padding:0;border-radius:5px;cursor:pointer;
  font-size:.62rem;font-weight:700;line-height:1;
  background:var(--qps-flaeche);border:1px solid var(--qps-linie);color:var(--qps-text);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .4s}
.qps-sperre:hover{background:var(--qps-kopf);color:var(--qps-kopf-tx)}
.qps-sperre.an{background:var(--accent,var(--static-frame,#4aa8e0));
  border-color:transparent;color:#fff}
/* Faehrt mit den uebrigen rechten Elementen aus dem Bild. Erreichbar ist
   er dann nicht -- aber jede Bewegung holt ihn zurueck, bevor jemand
   klicken kann. */
html[data-qps="1"]:not([data-qps-wach="1"]) .qps-sperre{
  transform:translateX(calc(100% + 28px));opacity:0}
@media(max-width:820px){ .qps-sperre{position:static;margin:0 0 12px} }
/* /pt-ruhe-sperre-v1 --------------------------------------------------- */

/* pt-ruhe-uhr-v1 ---------------------------------------------------------
   Die grosse Uhr in Aufbau 1: nur im Ruhezustand zu sehen. Sie steht
   dort, wo Titel und Logo gerade weggewandert sind -- der Platz wird
   ohnehin frei. Aussehen aus Aufbau 3 (.qps-amb-zeit, .qps-amb-datum),
   hier nur Lage und Ein-/Ausblenden. */
.qps-ruhe-uhr{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  text-align:center;pointer-events:none;color:var(--qps-text);
  opacity:0;transition:opacity .5s}
html[data-qps="1"]:not([data-qps-wach="1"]) .qps-ruhe-uhr{opacity:1}
@media(max-width:820px){ .qps-ruhe-uhr{display:none} }
/* /pt-ruhe-uhr-v1 ------------------------------------------------------ */

/* pt-ruhe-linie-v1 -------------------------------------------------------
   Zweite Stufe des Ruhezustands: die Suchzeile steigt auf und schrumpft
   zu einer einzigen Linie unter "AccessMed".

   Uebergaenge an den Grundregeln, damit auch der Rueckweg laeuft. */
/* pt-ruhe-linie-v3: feste Hoehe und obere Ausrichtung. Ohne beides
   schrumpfte beim Zuklappen die ganze Zeile, und die obere Linie kaeme
   der unteren entgegen statt stehenzubleiben.
   71px sind gerechnet: Feld 15+15 Polsterung, Zeilenhoehe 1.2 auf
   1.08rem (rund 21), Rahmen 2+2 -- zusammen 55; dazu 8+8 der Zeile.
   Die Zeilenhoehe steht ausdruecklich, sonst haengt die Rechnung an der
   Vorgabe der Schriftart. */
.qps-unten>.qps-such{height:71px;align-items:flex-start}
/* pt-ruhe-hoehe-v1: ausdrueckliche Hoehe auch im wachen Zustand. Ohne
   sie ist sie auto, und ein Uebergang von 2px nach auto laesst sich
   nicht interpolieren -- der Browser sprang sofort auf den Inhaltswert
   und animierte danach nur noch die Polsterung. 55 ist dieselbe
   Rechnung wie die 71 des Kastens: 15+15 Polsterung, rund 21
   Zeilenhoehe, 2+2 Rahmen; der Kasten ist 55 plus 8 plus 8. */
.qps-unten>.qps-such .kb-search{line-height:1.2;height:55px}

/* Die Grundregeln tragen den RUECKWEG: erst faehrt der Strich herunter,
   dann oeffnet sich das Kaestchen. Die Ruhe-Regeln setzen die
   Verzoegerungen auf 0 und kehren die Reihenfolge damit um. Welcher
   Satz gilt, entscheidet der Zielzustand -- ein zweiter Regelsatz ist
   dafuer nicht noetig. */
.qps-unten{transition:bottom .5s cubic-bezier(.4,0,.2,1)}
.qps-unten>.qps-such{transition:background .4s .5s,border-color .4s .5s,
  box-shadow .4s .5s,width .45s cubic-bezier(.4,0,.2,1) .5s}
.qps-unten>.qps-such .kb-search{
  transition:height .45s cubic-bezier(.4,0,.2,1) .5s,
             padding .45s cubic-bezier(.4,0,.2,1) .5s,
             border-width .25s .5s,border-radius .25s .65s,
             font-size .25s .65s,background .4s .5s,
             box-shadow .4s .5s,color .4s .5s}
.qps-unten>.qps-such .kb-search::placeholder{transition:color .3s .8s}

/* Die Reihe steigt auf. Leiste und Modus-Knoepfe sind zu diesem
   Zeitpunkt bereits hinter der Zeile verschwunden, es wandert also nur
   noch, was man sieht.

   pt-ruhe-linie-v2: 96 statt 112. In v1 lief die Linie durch den
   Schriftzug -- die Reihe stand zu hoch, und der Strich sass nochmals
   acht Punkt hoeher als sie, weil .qps-such ihre Polsterung behielt.
   Die faellt jetzt weg (siehe unten), damit haengt die Lage der Linie
   nur noch an dieser einen Zahl. */
/* Schritt 2, mit Verzoegerung: erst nachdem sich das Kaestchen
   geschlossen hat, faehrt der Strich hinauf.

   pt-ruhe-linie-v4: Seit das Feld OBEN im Kasten verankert ist, sitzt
   sein Strich bei "Oberkante minus Polsterung minus Hoehe" und nicht an
   der Unterkante. bottom:88 legte die Linie deshalb auf 149 statt 96 --
   mitten in den Schriftzug.

   Die Zahl wird jetzt aus der gewuenschten Lage der Linie
   zurueckgerechnet und steht als Rechnung da, nicht als Ergebnis:
   aendert sich einmal Kastenhoehe oder Polsterung, bleibt der
   Zusammenhang sichtbar und die Linie wandert nicht stillschweigend
   mit. 96 + 2 + 8 - 71 ergibt 35. */
/* pt-ruhe-takt-v1: Schritt 3 beginnt bei 0,95 s -- nach den Knoepfen
   (0,50) und dem Schliessen (0,95). Die Linie steht jetzt auf 112 statt
   96 Punkt, also naeher am Schriftzug; bottom bleibt daraus
   zurueckgerechnet, weil das Feld oben im Kasten haengt. */
html[data-qps="1"]:not([data-qps-wach="1"]) .qps-unten{
  transition-delay:.95s;bottom:calc(112px + 2px + 8px - 71px)}

/* Aus dem Ring wird ein Strich. Die Breite geht auf ein Mass, das
   "AccessMed" traegt, ohne es zu ueberragen.
   padding:0 -- sonst saesse der Strich acht Punkt ueber der Unterkante
   der Reihe und die Lage haette zwei Stellschrauben statt einer. */
html[data-qps="1"]:not([data-qps-wach="1"]) .qps-unten>.qps-such{
  transition-delay:.5s;width:min(260px,52vw)}
/* Schritt 1, ohne Verzoegerung: die Hoehe geht auf 2px, die untere
   Linie wandert damit zur oberen. Der Rest -- Rundung, Seitenrahmen,
   Polsterung, Schriftgrad -- faellt gleich mit weg, damit nicht wieder
   ein Kaestchen stehenbleibt, das erst am Ende zum Strich springt. */
html[data-qps="1"]:not([data-qps-wach="1"]) .qps-unten>.qps-such .kb-search{
  transition-delay:.5s;height:2px;padding:0;
  border-width:0 0 2px 0;border-radius:0;font-size:0;text-align:center}

/* Verlangt war eine Linie, kein Text mit Strich darunter. Bei
   Aktivitaet kommt der Platzhalter zurueck. */
html[data-qps="1"]:not([data-qps-wach="1"]) .qps-unten>.qps-such .kb-search::placeholder{
  transition-delay:.5s;color:transparent}
/* /pt-ruhe-linie-v1 ---------------------------------------------------- */

/* pt-pilze-edit-v1 -------------------------------------------------------
   Der Bearbeiten-Schalter der Pilz-Seite steht nur Admin und Entwickler
   offen. Dieselbe Schranke wie im Bestand fuer Admin-Kennzahlen und die
   Bearbeiten-Knoepfe der Wissensdatenbank. Die Rolle prueft der Server
   eigenstaendig -- das hier ist Aufraeumen der Oberflaeche, keine
   Zusicherung. */
html:not([data-kbadmin="1"]) #fungiEditBtn,
html:not([data-kbadmin="1"]) #fungiEditHinweis{display:none !important}
.mos-edit{cursor:pointer}
.mos-edit:hover{outline:2px solid var(--accent,var(--static-frame,#4aa8e0));outline-offset:-2px}
/* /pt-pilze-edit-v1 ---------------------------------------------------- */

/* pt-lesbar-auf-hintergrund-v1 ---------------------------------------------
   .kb-sugg (Vorschlagsliste der Suche) und #kbSideHandle (Lasche
   "Verzeichnis" am linken Rand) standen auf background:var(--c-card).
   Diese Variable ist in app.css nirgends definiert -- weder in :root
   noch unter [data-theme="dark"]. Eine Variable ohne Wert und ohne
   Fallback macht die ganze Deklaration ungueltig, die Flaeche wird
   transparent. Vor einem eigenen Hintergrundbild war beides deshalb
   praktisch unlesbar.

   Statt --c-card global nachzudefinieren -- das faerbte auf einen
   Schlag jede Karte, jedes Modal und jeden Editor der Anwendung um --
   bekommen genau die beiden gemeldeten Stellen eine eigene, bewusst
   halbdurchsichtige Flaeche. Der Weichzeichner dahinter beruhigt das
   Bild, ohne es zu verdecken.

   Das !important beim Griff ist kein Schmuck: der Handy-Block setzt
   dort background:var(--c-card) !important -- ohne Gegengewicht bliebe
   der runde Knopf am Telefon durchsichtig. */
.kb-sugg{
  background:rgba(255,255,255,.90);
  -webkit-backdrop-filter:blur(10px) saturate(1.15);
  backdrop-filter:blur(10px) saturate(1.15);
}
#kbSideHandle{
  background:rgba(255,255,255,.85) !important;
  -webkit-backdrop-filter:blur(9px) saturate(1.15);
  backdrop-filter:blur(9px) saturate(1.15);
}
/* Die Bestandsregel mischt beim Ueberfahren den Akzent mit `transparent`
   -- das Ergebnis waere wieder durchsichtig. Gemischt wird deshalb mit
   derselben weissen Flaeche wie oben. */
#kbSideHandle:hover{
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 16%, rgba(255,255,255,.90)) !important;
}
[data-theme="dark"] .kb-sugg{background:rgba(28,31,36,.92)}
[data-theme="dark"] #kbSideHandle{background:rgba(28,31,36,.88) !important}
[data-theme="dark"] #kbSideHandle:hover{
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 22%, rgba(28,31,36,.92)) !important;
}
/* /pt-lesbar-auf-hintergrund-v1 -------------------------------------------- */

/* pt-qps-hintergrund-v1 -------------------------------------------------
   Die eigene Startseite bleibt im Hintergrund stehen, wenn eine andere
   Seite offen ist. Geschaltet ueber data-qps-bg an <html>.

   z-index:-1 ist noetig, damit die Schicht HINTER den Fluss-Inhalt
   kommt: ein positioniertes Element mit z-index:0 laege darueber. Bei
   eigenem Hintergrundbild liegt body::after (der Schleier, ebenfalls
   z-index:-1) in Dokumentreihenfolge darueber und daempft zusaetzlich --
   deshalb dort ein hoeherer Eigenwert, damit unter dem Schleier noch
   etwa dasselbe ankommt.

   Das !important bei pointer-events ist kein Schmuck: .qps-panel,
   .qps-sperre und die Modus-Knoepfe setzen es selbst auf auto. */
/* pt-qps-hintergrund-v2: Der Uebergang steht an der Grundregel, nicht
   am Hintergrundzustand. Sonst liefe nur der Hinweg weich; auf dem
   Rueckweg faellt die Regel weg, und mit ihr der Uebergang -- die
   Deckkraft spraenge von .30 auf 1. */
#page-start{transition:opacity .45s ease}
html[data-qps-bg="1"] #page-start{
  display:block !important;
  position:fixed;inset:0;z-index:-1;
  padding:0;margin:0;max-width:none;overflow:hidden;
  opacity:var(--qps-bg-op,.40)}   /* pt-qps-hintergrund-v3: war .30 */
html[data-bg="on"][data-qps-bg="1"] #page-start{--qps-bg-op:.72}   /* pt-qps-hintergrund-v3: war .62 */
html[data-qps-bg="1"] #page-start,
html[data-qps-bg="1"] #page-start *{pointer-events:none !important}
/* Die Uhren des Ruhezustands bleiben im Hintergrund aus -- sie stuenden
   mitten im Text der gelesenen Seite. Aufbau 1 hat .qps-ruhe-uhr,
   Aufbau 3 die Umgebungsuhr. */
html[data-qps-bg="1"] .qps-ruhe-uhr,
html[data-qps-bg="1"] .qps-amb-zeit,
html[data-qps-bg="1"] .qps-amb-datum{display:none !important}

/* Der zweite Schalter. Er traegt dieselbe Klasse wie der erste und damit
   dessen ganzes Aussehen -- hier steht nur, wo er sitzt. 45 px Breite
   plus 6 px Abstand ergeben die 51, um die er nach links rueckt. */
.qps-sperre-2{right:65px}
/* Faehrt im Ruhezustand mit hinaus, nur weiter: 45 px eigene Breite plus
   die 65 vom rechten Rand. Die Deckkraft kommt aus der Regel fuer
   .qps-sperre, die fuer beide gilt. */
html[data-qps="1"]:not([data-qps-wach="1"]) .qps-sperre-2{
  transform:translateX(calc(100% + 65px))}
/* Am Telefon gibt es die Hintergrundschicht nicht (unter 821 px zeichnet
   qpsRenderAktiv() Aufbau 2 und 3 gar nicht und der Ruhezustand ist
   gesperrt) -- dann braucht es dort auch keinen Schalter dafuer. */
@media(max-width:820px){ .qps-sperre-2{display:none} }
/* In Aufbau 4 sitzt der Schalter in der Titelleiste und traegt sein Wort
   im ::after. Spaetere Regel, gleiche Spezifitaet: gewinnt ueber 'afk'. */
.qps-ovl-4 .qps-term-bg::after{content:'bg'}
/* /pt-qps-hintergrund-v1 ------------------------------------------------ */
/* pt-qps-bg-last-v1 -------------------------------------------------------
   Was die Schicht im Hintergrund NICHT mehr tun muss.

   backdrop-filter ist der teuerste Posten: .qps-panel ist 236px breit
   und fast bildschirmhoch, das Terminal in Aufbau 4 nimmt fast die
   ganze Flaeche ein. Ein solcher Filter wird jedes Mal neu gerechnet,
   wenn sich dahinter etwas bewegt (animiertes Wallpaper) oder davor
   gescrollt wird. Sichtbar ist davon bei 40 % Deckkraft ohnehin fast
   nichts -- im Ruhezustand schrumpft genau diese Flaeche auf 34px, und
   deshalb fuehlt sich die gelesene Seite dann fluessiger an.

   contain:paint und will-change:opacity halten die Schicht als eigene
   Ebene. Der Vordergrund scrollt dann darueber hinweg, ohne sie neu
   rastern zu lassen. Beides ist gefahrlos: Die Schicht ist bereits
   position:fixed mit overflow:hidden ueber den ganzen Schirm, ihre
   fixierten Kinder (.qps-ovl, .qps-zurueck) beziehen sich damit auf
   ein Rechteck, das deckungsgleich mit dem Sichtfenster ist. */
html[data-qps-bg="1"] #page-start{contain:paint;will-change:opacity}
html[data-qps-bg="1"] #page-start *,
html[data-qps-bg="1"] #page-start *::before,
html[data-qps-bg="1"] #page-start *::after{
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  box-shadow:none !important;
  animation-play-state:paused !important}
/* /pt-qps-bg-last-v1 ------------------------------------------------------ */


/* pt-gfr-filter-v1 -------------------------------------------------
   Die Filterzeile unter der Suche und das Band am Chip. Ohne Filter ist
   nichts davon sichtbar: die Zeile traegt ihre Knoepfe erst, wenn
   data-gfr an <html> auf "an" steht, und das Band entsteht nur, wenn
   _drugChipHtml() eine Stufe kennt. */
/* pt-filter-spalten-v1: drei feste Spalten -- links die
   Nierenfunktion, in der Mitte der Knopf, rechts die Ampel. Jede Gruppe
   traegt ihre Spaltennummer ausdruecklich: der Knopf ist unsichtbar,
   solange kein Filter laeuft, und ohne feste Zuweisung wuerde die Ampel
   dann in die mittlere Spalte nachruecken. Genau das liess sie vorher
   links stehen und erst beim Anwaehlen nach rechts springen. */
.gfr-zeile{display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:9px;margin:10px 0 0;font-size:.85rem}
.gfr-zeile > .gfr-teil{grid-column:1;justify-self:start}
.gfr-zeile > .gfr-weg{grid-column:2;justify-self:center;margin:0}
.gfr-zeile > .preg-teil{grid-column:3;justify-self:end}
/* Auf schmalen Fenstern wieder umbrechen statt in Spalten zwaengen. */
@media(max-width:820px){
  .gfr-zeile{display:flex;flex-wrap:wrap}
  .gfr-zeile > .gfr-teil,
  .gfr-zeile > .gfr-weg,
  .gfr-zeile > .preg-teil{justify-self:auto}
}
.gfr-zeile label{color:var(--c-muted);font-weight:600}
.gfr-zeile input{width:88px;padding:7px 10px;border:1px solid var(--c-border);
  border-radius:8px;font-size:.9rem;font-family:inherit;color:inherit;
  background:var(--c-white)}
.gfr-zeile input:focus{outline:2px solid var(--accent,var(--static-frame,#4aa8e0));
  outline-offset:1px}
.gfr-einheit{color:var(--c-muted);font-size:.8rem;margin-left:-4px}
.gfr-hinweis{color:var(--c-muted);font-size:.78rem}
/* Der Knopf erscheint erst, wenn es etwas aufzuheben gibt. */
.gfr-weg{display:none;margin:0 auto;background:none;border:1px solid var(--c-border);
  border-radius:7px;padding:5px 10px;font-size:.78rem;font-family:inherit;
  color:var(--c-muted);cursor:pointer}
.gfr-weg:hover{border-color:var(--accent,var(--static-frame,#4aa8e0));
  color:var(--accent,var(--static-frame,#4aa8e0))}
/* pt-filter-reset-v1: Der Knopf hebt beide Filter auf und
   erscheint, sobald einer von beiden laeuft. */
html[data-gfr="an"] .gfr-weg,
html[data-preg="1"] .gfr-weg,
html[data-preg="2"] .gfr-weg,
html[data-preg="3"] .gfr-weg,
html[data-preg="L"] .gfr-weg{display:inline-block}
/* Die Hinweiszeile. Ohne Inhalt nimmt sie keinen Platz ein: die
   Abstaende haengen an den Kindern, nicht am Behaelter. */
.gfr-hinweise{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* pt-gfr-zweck-v1 ========================================================
   Die Zweckzeile unter den Filterfeldern und die Uebergabe an die
   Nierenadaption.

   Die Flaechen ziehen ihre Farbe aus der Rahmenfarbe des Profils und
   bleiben halbtransparent -- so tragen sie dieselbe Farbe wie der Rest
   der Oberflaeche, ohne einen zweiten Ton einzufuehren. */
.gfr-zweck{color:var(--c-muted);font-size:.78rem;line-height:1.5;
  margin:9px 0 0}
.gfr-zweck b{color:var(--c-text);font-weight:600}
.gfr-zweck .gfr-zu-niere{
  color:var(--accent,var(--static-frame,#4aa8e0));font-weight:600;
  background:none;border:0;padding:0;font-family:inherit;font-size:inherit;
  cursor:pointer;white-space:nowrap}
.gfr-zweck .gfr-zu-niere:hover{text-decoration:underline}

/* Die Zeile unter dem einzigen Suchtreffer. Sie sitzt im Aufklapper der
   Suche und sieht deshalb aus wie ein Treffer -- nur in der Rahmenfarbe
   hinterlegt, damit sie als Angebot und nicht als weiterer Wirkstoff
   gelesen wird. */
.gfr-uebergabe{display:flex;flex-direction:column;gap:2px;
  padding:10px 12px;cursor:pointer;
  border-top:1px solid var(--c-border);
  background:color-mix(in srgb,var(--accent,var(--static-frame,#4aa8e0)) 9%,transparent)}
.gfr-uebergabe:hover{
  background:color-mix(in srgb,var(--accent,var(--static-frame,#4aa8e0)) 16%,transparent)}
.gfr-uebergabe b{font-size:.87rem;
  color:var(--accent,var(--static-frame,#4aa8e0))}
.gfr-uebergabe span{font-size:.75rem;color:var(--c-muted)}

/* Derselbe Weg als Knopf in der Wirkstoffkarte. Leer bleibt der
   Behaelter unsichtbar: Er wird erst gefuellt, wenn feststeht, dass zu
   diesem Wirkstoff ueberhaupt Nierendaten hinterlegt sind. */
.niere-uebergabe:empty{display:none}
.niere-uebergabe{margin-top:10px}
.niere-uebergabe button{
  font-family:inherit;font-size:.8rem;font-weight:600;cursor:pointer;
  padding:7px 12px;border-radius:8px;
  color:var(--accent,var(--static-frame,#4aa8e0));
  border:1px solid color-mix(in srgb,var(--accent,var(--static-frame,#4aa8e0)) 45%,transparent);
  background:color-mix(in srgb,var(--accent,var(--static-frame,#4aa8e0)) 10%,transparent)}
.niere-uebergabe button:hover{
  background:color-mix(in srgb,var(--accent,var(--static-frame,#4aa8e0)) 18%,transparent)}
/* /pt-gfr-zweck-v1 ------------------------------------------------------ */
.gfr-hinweise .gfr-hinweis:not(:empty){margin-top:7px}

/* Das Band am Chip. Es sitzt unter Name, Handelsnamen und Merkmalen und
   traegt die Empfehlung im Klartext -- die Farbe allein sagt zu wenig,
   "500 mg alle 8 h" ist die eigentliche Auskunft. */
.drug-gfr{margin-top:6px;padding:4px 7px;border-radius:6px;
  font-size:.72rem;line-height:1.35;font-weight:400}
.drug-gfr b{font-weight:700;letter-spacing:.01em}
.drug-gfr i{display:block;font-style:normal;opacity:.85;margin-top:2px}
.drug-gfr-ok{background:#eaf5ee;color:#1d6b3e;border:1px solid #bfe3cd}
.drug-gfr-reduce{background:#fef3e8;color:#8a4a12;border:1px solid #f7d5b0}
.drug-gfr-spezial{background:#eff6ff;color:#1e478f;border:1px solid #c3d9f7}
.drug-gfr-ohne{background:#f2f3f5;color:#666;border:1px solid #dfe2e6}
[data-theme="dark"] .drug-gfr-ok{background:#16291f;color:#7fd6a1;border-color:#245239}
[data-theme="dark"] .drug-gfr-reduce{background:#2e2114;color:#f0b070;border-color:#5a3f1e}
[data-theme="dark"] .drug-gfr-spezial{background:#16243a;color:#8fb8ff;border-color:#27406a}
[data-theme="dark"] .drug-gfr-ohne{background:#22262c;color:#9aa3ad;border-color:#343a42}

/* Zaehler am Ordner. */
.cat-gfr{font-size:.72rem;font-weight:600;color:var(--accent,var(--static-frame,#4aa8e0))}
/* Ein Ordner, aus dem bei dieser Nierenfunktion nichts uebrig bleibt,
   tritt zurueck -- verborgen wird er nicht: dass nichts geht, ist selbst
   eine Auskunft. */
.cat-section.gfr-leer{opacity:.45}
/* /pt-gfr-filter-v1 ------------------------------------------------ */

/* pt-preg-filter-v1 -------------------------------------------------
   Das zweite Band am Chip. Farben und Form kommen aus dem GFR-Filter --
   .drug-gfr-ok, -reduce, -stop, -ohne werden wiederverwendet, damit
   gruen hier wie dort dasselbe heisst. */
.drug-preg{margin-top:5px;padding:4px 7px;border-radius:6px;
  font-size:.72rem;line-height:1.35;font-weight:400}
.drug-preg b{font-weight:700}
/* pt-preg-zeile-v1: Die Ampel sitzt rechts in derselben Zeile.
   margin-left:auto schiebt sie an den Rand; wird es eng, bricht die
   Zeile um und die Gruppe steht darunter -- ohne eigene Medienabfrage. */
/* pt-filter-mitte-v1: drei Gruppen in einer Zeile -- links die
   Nierenfunktion, in der Mitte der Knopf, rechts die Ampel. Das
   margin:0 auto am Knopf teilt den freien Raum gleichmaessig auf beide
   Seiten; die Ampel braucht deshalb kein eigenes margin-left mehr. */
.gfr-teil{display:inline-flex;align-items:center;gap:9px}
.preg-teil{display:inline-flex;align-items:center;gap:9px}
.preg-teil label{color:var(--c-muted);font-weight:600}
.preg-teil select{padding:7px 10px;border:1px solid var(--c-border);
  border-radius:8px;font-size:.85rem;font-family:inherit;color:inherit;
  background:var(--c-white);cursor:pointer}
.preg-teil select:focus{outline:2px solid var(--accent,var(--static-frame,#4aa8e0));
  outline-offset:1px}
/* Am Telefon bricht die Zeile ohnehin um; dann sollen die Gruppen
   linksbuendig untereinander stehen statt mittig zu schweben. */
/* pt-filter-spalten-v1: Der Rand des Knopfes steht jetzt in der
   Spaltenregel; diese Ausnahme wird nicht mehr gebraucht. */
/* /pt-preg-filter-v1 ------------------------------------------------ */

/* pt-gesperrt-zeigen-v1 -------------------------------------------------
   Der gesperrte Chip. Er tritt zurueck, verschwindet aber nicht: halbe
   Deckkraft, roter Grund, roter Rahmen. Beim Ueberfahren wird er wieder
   klar -- wer ihn lesen will, soll ihn lesen koennen.

   Die Regel steht nach .drug-chip und traegt mit .chip-gesperrt dieselbe
   Spezifitaet wie dessen Hover -- deshalb die eigene Hover-Regel
   darunter, sonst bekaeme der gesperrte Chip die normale Faerbung. */
.drug-chip.chip-gesperrt{
  opacity:.55;
  background:#fdecea;
  border-color:#e6a9a2;
  transition:opacity .15s,background .12s}
.drug-chip.chip-gesperrt:hover{
  opacity:1;
  background:#fbdcd7;
  border-color:#d4736a}
[data-theme="dark"] .drug-chip.chip-gesperrt{
  background:#3a2226;border-color:#6b3a3a}
[data-theme="dark"] .drug-chip.chip-gesperrt:hover{
  background:#4a2a2e;border-color:#8a4a4a}
/* Das Band fuer die Stufe "kontraindiziert" -- bisher unbenutzt, weil
   der Chip vorher entfiel. */
.drug-gfr-stop{background:#fdecea;color:#8c2f26;border:1px solid #e6a9a2}
[data-theme="dark"] .drug-gfr-stop{background:#3a2226;color:#ff9c92;border-color:#6b3a3a}
/* /pt-gesperrt-zeigen-v1 ------------------------------------------------ */

/* pt-antidot-tab-v1 -------------------------------------------------
   Antidote und Intoxikationen. Der Aufbau folgt der Reihenfolge, in der
   im Notfall gefragt wird: Womit? -- Womit dagegen? -- Wie viel? -- Was
   ist zu beachten?

   Das Zeitfenster steht als eigenes Merkmal oben rechts, weil es bei
   Fomepizol, Silibinin und Idarucizumab ueber alles Weitere entscheidet. */
.ant-gruppe{margin-bottom:22px}
.ant-gruppe-titel{font-size:.82rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--c-muted);margin:0 0 10px 2px}
.ant-gruppe-titel span{font-weight:400;opacity:.7}
.ant-karte{background:var(--c-white);border:1px solid var(--c-border);
  border-radius:12px;padding:14px 16px;margin-bottom:10px}
.ant-kopf{display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;flex-wrap:wrap}
.ant-noxe{font-size:1.05rem;font-weight:700;line-height:1.3}
.ant-zeit{font-size:.74rem;padding:3px 9px;border-radius:12px;
  background:#fef3e8;color:#8a4a12;border:1px solid #f7d5b0;
  white-space:normal;max-width:330px;text-align:right}
.ant-antidot{margin-top:8px;font-size:.95rem;display:flex;align-items:center;
  gap:10px;flex-wrap:wrap}
.ant-antidot b{color:var(--accent,var(--static-frame,#4aa8e0))}
.ant-link{background:none;border:0;padding:0;font:inherit;font-size:.8rem;
  color:var(--c-muted);cursor:pointer;text-decoration:underline}
.ant-link:hover{color:var(--accent,var(--static-frame,#4aa8e0))}
.ant-dosis{margin-top:9px;padding:9px 12px;border-radius:8px;
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 7%, var(--c-white));
  font-size:.87rem;line-height:1.6}
.ant-dosis div:empty{height:5px}
.ant-hinweise{margin-top:9px;font-size:.85rem;line-height:1.6;color:var(--c-text)}
.ant-quelle{margin-top:7px;font-size:.72rem;color:var(--c-muted)}
.ant-hinweis{margin-top:9px;font-size:.78rem;color:var(--c-muted)}
[data-theme="dark"] .ant-zeit{background:#2e2114;color:#f0b070;border-color:#5a3f1e}
@media(max-width:820px){
  .ant-zeit{max-width:100%;text-align:left}
  .ant-karte{padding:12px 13px}
}
/* /pt-antidot-tab-v1 ------------------------------------------------ */

/* pt-notfall-tab-v1 --------------------------------------------------
   Notfallmedizin. Aufbau wie die Antidot-Karten, mit zwei Zusaetzen:
   der Symptomleiste oben und den vier Abschnitten in der geoeffneten
   Karte. "Sofort" traegt als einziger Abschnitt Farbe -- er ist der
   Grund, aus dem die Karte geoeffnet wurde. Die Flaechen sind
   halbtransparent, damit sie in beiden Themen und ueber jedem
   Hintergrund tragen. */
.nf-leiste{display:flex;flex-wrap:wrap;gap:7px}
.nf-chip{background:none;border:1px solid var(--c-border);border-radius:9px;
  padding:6px 11px;font:inherit;font-size:.82rem;cursor:pointer;color:var(--c-text)}
.nf-chip:hover{border-color:var(--accent,var(--static-frame,#4aa8e0))}
.nf-chip span{opacity:.55;font-size:.74rem;margin-left:2px}
.nf-chip.an{background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 14%, transparent);
  border-color:var(--accent,var(--static-frame,#4aa8e0));
  color:var(--accent,var(--static-frame,#4aa8e0));font-weight:600}
.nf-treffer{margin-top:9px;font-size:.78rem;color:var(--c-muted)}
.nf-gruppe{margin-bottom:22px}
.nf-gruppe-titel{font-size:.82rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--c-muted);margin:0 0 9px}
.nf-gruppe-titel span{font-weight:400;opacity:.7}
.nf-karte{background:var(--c-white);border:1px solid var(--c-border);
  border-radius:12px;padding:13px 15px;margin-bottom:10px}
.nf-karte.auf{border-color:var(--accent,var(--static-frame,#4aa8e0))}
.nf-kopf{display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;cursor:pointer}
.nf-kopf-text{min-width:0}
.nf-name{font-size:1.05rem;font-weight:700;line-height:1.3}
.nf-marken{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.nf-marke{font-size:.71rem;padding:2px 8px;border-radius:11px;
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 12%, transparent);
  color:var(--c-muted)}
.nf-caret{font-size:.7rem;color:var(--c-muted);flex:0 0 auto;padding-top:4px}
.nf-zeit{margin-top:9px;padding:8px 11px;border-radius:8px;font-size:.85rem;
  line-height:1.55;background:rgba(230,57,70,.10);
  border-left:3px solid var(--c-red,#e63946)}
.nf-zeit b{color:var(--c-red,#e63946)}
.nf-inhalt{margin-top:12px;border-top:1px solid var(--c-border);padding-top:12px}
.nf-abschnitt{margin-bottom:13px}
.nf-abschnitt:last-of-type{margin-bottom:0}
.nf-abschnitt-titel{font-size:.74rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--c-muted);margin-bottom:5px}
.nf-abschnitt ul{margin:0;padding-left:18px}
.nf-abschnitt li{font-size:.87rem;line-height:1.62;margin-bottom:3px}
.nf-sofort{padding:10px 12px 10px 13px;border-radius:9px;
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 10%, transparent);
  border-left:3px solid var(--accent,var(--static-frame,#4aa8e0))}
.nf-sofort .nf-abschnitt-titel{color:var(--accent,var(--static-frame,#4aa8e0))}
.nf-fallstricke .nf-abschnitt-titel{color:var(--c-orange,#e07b2a)}
.nf-verweise{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--c-border)}
.nf-link{background:none;border:1px solid var(--c-border);border-radius:8px;
  padding:5px 10px;font:inherit;font-size:.79rem;cursor:pointer;color:var(--c-text)}
.nf-link:hover{border-color:var(--accent,var(--static-frame,#4aa8e0));
  color:var(--accent,var(--static-frame,#4aa8e0))}
.nf-link-ws{color:var(--c-muted)}
.nf-quelle{margin-top:10px;font-size:.72rem;color:var(--c-muted);line-height:1.5}
[data-theme="dark"] .nf-zeit{background:rgba(230,57,70,.16)}
@media(max-width:820px){
  .nf-karte{padding:12px 13px}
  .nf-verweise{flex-direction:column;align-items:stretch}
  .nf-link{text-align:left}
}
.nf-bruecke{margin-top:10px;font-size:.8rem;color:var(--c-muted)}   /* pt-notfall-anschluss-v1 */
.nf-bruecke button{background:none;border:0;padding:0;font:inherit;font-size:.8rem;cursor:pointer;text-decoration:underline;color:var(--accent,var(--static-frame,#4aa8e0))}
/* /pt-notfall-tab-v1 ------------------------------------------------ */

/* pt-notfalltrainer-v1 -----------------------------------------------
   Notfall-Trainer. Auswahl ueber dieselben Chips wie die Symptomleiste
   des Tabs, damit beides zusammengehoert aussieht. */
.nftr-chips{display:flex;flex-wrap:wrap;gap:7px}
.nftr-chip{background:none;border:1px solid var(--c-border);border-radius:9px;
  padding:6px 11px;font:inherit;font-size:.82rem;cursor:pointer;color:var(--c-text)}
.nftr-chip:hover{border-color:var(--accent,var(--static-frame,#4aa8e0))}
.nftr-chip span{opacity:.55;font-size:.74rem;margin-left:2px}
.nftr-chip.an{background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 14%, transparent);
  border-color:var(--accent,var(--static-frame,#4aa8e0));
  color:var(--accent,var(--static-frame,#4aa8e0));font-weight:600}
.nftr-leise{font-weight:400;text-transform:none;letter-spacing:0;color:var(--c-muted)}
.nftr-stand{margin-top:12px;font-size:.8rem;color:var(--c-muted);line-height:1.6}
.nftr-frage{padding:18px 20px}
.nftr-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px}
.nftr-typ{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent,var(--static-frame,#4aa8e0))}
.nftr-zaehler{font-size:.76rem;color:var(--c-muted)}
.nftr-fragetext{margin-top:10px;font-size:1.05rem;font-weight:700;line-height:1.35}
.nftr-stamm{margin-top:12px;padding:12px 14px;border-radius:9px;
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 9%, transparent);
  font-size:.92rem;line-height:1.6}
.nftr-stamm div + div{margin-top:6px}
.nftr-hinweis{margin-top:8px;font-size:.78rem;color:var(--c-muted)}
.nftr-optionen{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.nftr-opt{text-align:left;background:var(--c-white);border:1px solid var(--c-border);
  border-radius:10px;padding:11px 14px;font:inherit;font-size:.9rem;line-height:1.5;
  cursor:pointer;color:var(--c-text)}
.nftr-opt:hover:not(:disabled){border-color:var(--accent,var(--static-frame,#4aa8e0))}
.nftr-opt:disabled{cursor:default}
.nftr-opt.richtig{border-color:var(--c-green,#2d9e5a);
  background:color-mix(in srgb, var(--c-green,#2d9e5a) 12%, transparent)}
.nftr-opt.falsch{border-color:var(--c-red,#e63946);
  background:color-mix(in srgb, var(--c-red,#e63946) 12%, transparent)}
.nftr-opt.aus{opacity:.55}
.nftr-aufloesung{margin-top:16px;padding:14px 16px;border-radius:10px;
  border-left:3px solid var(--c-border)}
.nftr-aufloesung.gut{border-left-color:var(--c-green,#2d9e5a);
  background:color-mix(in srgb, var(--c-green,#2d9e5a) 8%, transparent)}
.nftr-aufloesung.schlecht{border-left-color:var(--c-red,#e63946);
  background:color-mix(in srgb, var(--c-red,#e63946) 8%, transparent)}
.nftr-urteil{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--c-muted)}
.nftr-notfall{margin-top:4px;font-size:1.02rem;font-weight:700}
.nftr-notfall span{font-weight:400;font-size:.78rem;color:var(--c-muted);margin-left:8px}
.nftr-jetzt{margin-top:8px;font-size:.88rem;line-height:1.6}
.nftr-links{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.nftr-link{background:none;border:1px solid var(--c-border);border-radius:8px;padding:5px 10px;
  font:inherit;font-size:.79rem;cursor:pointer;color:var(--c-text);text-align:left}
.nftr-link:hover{border-color:var(--accent,var(--static-frame,#4aa8e0));
  color:var(--accent,var(--static-frame,#4aa8e0))}
.nftr-link-breit{display:block;width:100%;margin-top:7px}
.nftr-weiter{margin-top:14px;padding:10px 20px}
.nftr-quote{font-size:1.3rem;font-weight:700}
.nftr-quote span{font-size:.9rem;font-weight:400;color:var(--c-muted);margin-left:8px}
.nftr-typzeile{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;
  font-size:.8rem;color:var(--c-muted)}
@media(max-width:820px){
  .nftr-frage{padding:14px 15px}
  .nftr-opt{font-size:.87rem}
}
/* /pt-notfalltrainer-v1 --------------------------------------------- */

/* pt-kb-wirkstoff-v1 -------------------------------------------------
   Wirkstoffnamen im Text der Wissensdatenbank. Die Markierung ist
   zurueckhaltend -- eine gepunktete Linie, keine zweite Farbe im
   Fliesstext -- weil in manchen Abschnitten jedes dritte Wort ein
   Wirkstoff ist. */
.kb-ws{cursor:pointer;border-bottom:1px dotted var(--accent,var(--static-frame,#4aa8e0));
  text-decoration:none}
.kb-ws:hover{background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 14%, transparent);
  border-radius:3px}
.kb-ws-fenster{position:fixed;z-index:9000;background:var(--c-white);
  border:1px solid var(--c-border);border-radius:12px;padding:14px 16px;
  box-shadow:0 12px 34px rgba(0,0,0,.22);font-size:.87rem;line-height:1.6;
  max-height:70vh;overflow-y:auto}
.kb-ws-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.kb-ws-name{font-size:1.02rem;font-weight:700;line-height:1.25}
.kb-ws-kat{font-size:.74rem;color:var(--c-muted);margin-top:2px}
.kb-ws-zu{background:none;border:0;font-size:1.2rem;line-height:1;cursor:pointer;
  color:var(--c-muted);padding:0 2px}
.kb-ws-dosis{margin-top:10px;padding:10px 12px;border-radius:9px;
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 10%, transparent)}
.kb-ws-dosis + .kb-ws-dosis{margin-top:7px}
.kb-ws-label{font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent,var(--static-frame,#4aa8e0));margin-bottom:3px}
.kb-ws-warn{margin-top:10px;font-size:.82rem;color:var(--c-muted)}
.kb-ws-weitere{margin-top:10px;font-size:.76rem;color:var(--c-muted);line-height:1.5}
.kb-ws-fuss{margin-top:12px;padding-top:10px;border-top:1px solid var(--c-border);
  font-size:.74rem;color:var(--c-muted);display:flex;flex-wrap:wrap;gap:8px;
  align-items:center;justify-content:space-between}
.kb-ws-link{background:none;border:1px solid var(--c-border);border-radius:8px;
  padding:5px 10px;font:inherit;font-size:.78rem;cursor:pointer;color:var(--c-text)}
.kb-ws-link:hover{border-color:var(--accent,var(--static-frame,#4aa8e0));
  color:var(--accent,var(--static-frame,#4aa8e0))}
.kb-ws-laedt{font-size:.82rem;color:var(--c-muted)}
/* /pt-kb-wirkstoff-v1 ----------------------------------------------- */

/* pt-suche-unschaerfe-v1 ---------------------------------------------
   "Meintest du …?" -- eine Zeile, drei Vorschlaege, nicht mehr. */
.pt-typo{padding:12px 14px;font-size:.86rem;color:var(--c-muted);
  display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pt-typo-gs{border-top:1px solid var(--c-border)}
.pt-typo-knopf{background:none;border:1px solid var(--c-border);border-radius:8px;
  padding:4px 10px;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;
  color:var(--accent,var(--static-frame,#4aa8e0))}
.pt-typo-knopf:hover{border-color:var(--accent,var(--static-frame,#4aa8e0));
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 12%, transparent)}
.pt-typo-art{font-size:.72rem;color:var(--c-muted);margin-left:-2px}
/* /pt-suche-unschaerfe-v1 ------------------------------------------- */

/* pt-news-v4 ---------------------------------------------------------
   Im Schreibtisch-Aufbau gibt es die Kopfzeile nicht, fuer deren Hoehe
   das Verzeichnis 60 Pixel frei laesst -- dort steht die 30 Pixel hohe
   Menueleiste (.mac-bar). Ohne diese Regel blieb darueber ein Streifen
   offen, in dem der Hintergrund durchsah.

   Wer die Hoehe der Leiste aendert, aendert diese beiden Werte mit. */
html[data-qps="5"] #kbSidebar,
html[data-qps="5"] #kbSideBackdrop{top:30px}

/* pt-news-v1 ---------------------------------------------------------
   Auf der AccessSearch-Seite ersetzen die beiden Knoepfe unter der
   Suchzeile den Griff am linken Rand. Das Element bleibt im Markup --
   kbSideToggle() wird von mehreren Aufbauten der eigenen Startseite
   gerufen, und das Verzeichnis selbst ist unveraendert.

   pt-news-v6: Die Regel haengt an der SEITE und nicht am Element. Zuerst
   stand hier ein blankes #kbSideHandle{display:none} -- damit fehlte der
   Griff in allen anderen Modi, wo es keinen Ersatz fuer ihn gibt. Wer
   den Knopf auf weitere Seiten stellt, traegt sie hier mit ein. */
html[data-active-page="wissen"] #kbSideHandle{display:none !important}
html[data-active-page="wissen"] #kbEdgeZone{display:none}

.kb-hero-knoepfe{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.kb-hero-btn{background:none;border:1px solid var(--c-border);border-radius:999px;
  padding:9px 18px;font:inherit;font-size:.88rem;cursor:pointer;color:var(--c-text);
  transition:.12s}
.kb-hero-btn:hover{border-color:var(--accent,var(--static-frame,#4aa8e0));
  color:var(--accent,var(--static-frame,#4aa8e0))}

.news-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:14px}
.news-kopf-knoepfe{display:flex;gap:7px;flex-wrap:wrap}
/* pt-news-v10 */
.news-fuss{display:flex;justify-content:center;margin:22px 0 10px}
.news-fuss .news-btn{padding:9px 20px}
.news-btn{background:none;border:1px solid var(--c-border);border-radius:9px;padding:6px 13px;
  font:inherit;font-size:.82rem;cursor:pointer;color:var(--c-text)}
.news-btn:hover{border-color:var(--accent,var(--static-frame,#4aa8e0))}
.news-btn-haupt{background:var(--accent,var(--static-frame,#4aa8e0));color:#fff;
  border-color:var(--accent,var(--static-frame,#4aa8e0));font-weight:600}
.news-btn-weg:hover{border-color:var(--c-red,#e63946);color:var(--c-red,#e63946)}
.news-quellen{margin-bottom:16px}
.news-abschnitt{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--c-muted);margin-bottom:9px}
.news-neu{display:flex;gap:8px;flex-wrap:wrap}
.news-neu input{flex:1;min-width:220px;padding:8px 11px;font:inherit;font-size:.88rem;
  border:1px solid var(--c-border);border-radius:9px;background:var(--c-white);color:var(--c-text)}
.news-hinweis{margin-top:9px;font-size:.78rem;color:var(--c-muted);line-height:1.5}
.news-feed{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--c-border)}
.news-feed:last-child{border-bottom:none}
.news-feed-text{min-width:0}
.news-feed-text span{display:block;font-size:.76rem;color:var(--c-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46em}
.news-fehler{color:var(--c-red,#e63946) !important}
.news-feed-rechts{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.news-zahl{font-size:.76rem;color:var(--c-muted);font-variant-numeric:tabular-nums}
.news-standard{font-size:.72rem;padding:3px 10px;border-radius:999px;white-space:nowrap;
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 13%, transparent);
  color:var(--accent,var(--static-frame,#4aa8e0))}

/* pt-news-v5: Schnellauswahl der Quelle. */
.news-wahl{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:13px}
.news-chip{background:none;border:1px solid var(--c-border);border-radius:999px;padding:6px 13px;
  font:inherit;font-size:.8rem;cursor:pointer;color:var(--c-text)}
.news-chip:hover{border-color:var(--accent,var(--static-frame,#4aa8e0))}
.news-chip span{opacity:.55;font-size:.72rem;margin-left:3px}
.news-chip.an{background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 14%, transparent);
  border-color:var(--accent,var(--static-frame,#4aa8e0));
  color:var(--accent,var(--static-frame,#4aa8e0));font-weight:600}
.news-karte{display:flex;gap:16px;background:var(--c-white);border:1px solid var(--c-border);
  border-radius:13px;padding:14px 16px;margin-bottom:11px;align-items:flex-start}
.news-bild{flex:0 0 190px;max-width:190px;border-radius:10px;overflow:hidden;line-height:0}
.news-bild img{width:100%;height:auto;display:block;background:var(--c-bg)}
.news-inhalt{min-width:0;flex:1}
.news-titel{font-size:1.02rem;font-weight:700;line-height:1.35;color:var(--c-text);
  text-decoration:none;display:inline-block}
.news-titel:hover{color:var(--accent,var(--static-frame,#4aa8e0))}
.news-zeile{margin-top:4px;font-size:.78rem;color:var(--c-muted)}
.news-text{margin:8px 0 0;font-size:.88rem;line-height:1.55;color:var(--c-text)}
@media(max-width:820px){
  .news-karte{flex-direction:column}
  .news-bild{flex:0 0 auto;max-width:none;width:100%}
  .news-kopf{flex-direction:column}
}
/* /pt-news-v1 -------------------------------------------------------- */

/* pt-jobs-v1 ---------------------------------------------------------
   Der Jobmonitor. Der Menueeintrag ist standardmaessig verborgen und
   wird erst durch data-jobs="1" eingeblendet -- nicht umgekehrt: Faellt
   das JavaScript aus, ist er weg und nicht sichtbar. */
html:not([data-jobs="1"]) .nav-btn[data-page="klinik-jobs"]{display:none}
.job-leisten{display:flex;flex-direction:column;gap:11px}
.job-leiste-titel{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--c-muted);margin-bottom:5px}
.job-chips{display:flex;flex-wrap:wrap;gap:6px}
.job-chip{background:none;border:1px solid var(--c-border);border-radius:9px;padding:5px 10px;
  font:inherit;font-size:.8rem;cursor:pointer;color:var(--c-text)}
.job-chip:hover{border-color:var(--accent,var(--static-frame,#4aa8e0))}
.job-chip span{opacity:.55;font-size:.72rem}
.job-chip.an{background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 14%, transparent);
  border-color:var(--accent,var(--static-frame,#4aa8e0));
  color:var(--accent,var(--static-frame,#4aa8e0));font-weight:600}
.job-kopfzeile{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-top:11px}
.job-treffer{font-size:.78rem;color:var(--c-muted)}
.job-werkzeuge{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.job-knopf{background:none;border:1px solid var(--c-border);border-radius:8px;padding:5px 10px;
  font:inherit;font-size:.78rem;cursor:pointer;color:var(--c-text)}
.job-knopf:hover{border-color:var(--accent,var(--static-frame,#4aa8e0))}
.job-knopf.an{border-color:var(--c-green,#2d9e5a);color:var(--c-green,#2d9e5a);font-weight:600}
.job-knopf.job-weg:hover{border-color:var(--c-red,#e63946);color:var(--c-red,#e63946)}
.job-schalter{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--c-muted)}
.job-abschnitt{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--c-muted);margin-bottom:9px}
.job-suche{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--c-border);flex-wrap:wrap}
.job-suche:last-child{border-bottom:none}
.job-suche-text{min-width:0}
.job-suche-text span{display:block;font-size:.78rem;color:var(--c-muted);margin-top:2px}
.job-suche-knoepfe{display:flex;gap:6px;flex-wrap:wrap}
.job-karte{background:var(--c-white);border:1px solid var(--c-border);border-radius:12px;
  padding:13px 15px;margin-bottom:9px}
.job-karte.weg{opacity:.6}
.job-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.job-titel{font-size:1rem;font-weight:700;line-height:1.35;color:var(--c-text);text-decoration:none}
.job-titel:hover{color:var(--accent,var(--static-frame,#4aa8e0))}
.job-marken{display:flex;gap:6px;flex-wrap:wrap;flex:0 0 auto}
.job-marke{font-size:.7rem;padding:2px 8px;border-radius:10px;white-space:nowrap;
  background:color-mix(in srgb, var(--c-muted) 14%, transparent);color:var(--c-muted)}
.job-art-facharzt{background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 14%, transparent);
  color:var(--accent,var(--static-frame,#4aa8e0));font-weight:600}
.job-art-ausbildung{background:color-mix(in srgb, var(--c-green,#2d9e5a) 15%, transparent);
  color:var(--c-green,#2d9e5a);font-weight:600}
.job-art-basis{background:rgba(224,163,46,.18);color:#a9741a;font-weight:600}
/* pt-jobs-v4: eigener Weg, eigene Farbe -- sonst waere er von der
   Facharztausbildung nicht zu unterscheiden. */
.job-art-allgemein{background:color-mix(in srgb, #7c5cd6 16%, transparent);
  color:#6a4bc2;font-weight:600}
.job-zeile{margin-top:4px;font-size:.85rem;color:var(--c-muted)}
.job-text{margin-top:7px;font-size:.85rem;line-height:1.5}
.job-fussnote{margin-top:8px;font-size:.72rem;color:var(--c-muted)}
.job-fuss{margin:14px 0 6px;font-size:.74rem;color:var(--c-muted);line-height:1.5}
.job-fehler{color:var(--c-red,#e63946)}
@media(max-width:820px){
  .job-kopf{flex-direction:column}
  .job-suche{flex-direction:column;align-items:stretch}
}
/* /pt-jobs-v1 -------------------------------------------------------- */

/* pt-checkliste-v1 ---------------------------------------------------
   Checklisten. Die Karten folgen den Notfallkarten; neu sind die
   Hakenzeilen, die groß genug zum Treffen mit dem Daumen sein müssen. */
.ck-leiste{display:flex;flex-wrap:wrap;gap:7px}
.ck-chip{background:none;border:1px solid var(--c-border);border-radius:9px;
  padding:6px 11px;font:inherit;font-size:.82rem;cursor:pointer;color:var(--c-text)}
.ck-chip:hover{border-color:var(--accent,var(--static-frame,#4aa8e0))}
.ck-chip span{opacity:.55;font-size:.74rem;margin-left:2px}
.ck-chip.an{background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 14%, transparent);
  border-color:var(--accent,var(--static-frame,#4aa8e0));
  color:var(--accent,var(--static-frame,#4aa8e0));font-weight:600}
.ck-treffer{margin-top:9px;font-size:.78rem;color:var(--c-muted)}
.ck-gruppe{margin-bottom:22px}
.ck-gruppe-titel{font-size:.82rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--c-muted);margin:0 0 9px}
.ck-gruppe-titel span{font-weight:400;opacity:.7}
.ck-karte{background:var(--c-white);border:1px solid var(--c-border);
  border-radius:12px;padding:13px 15px;margin-bottom:10px}
.ck-karte.auf{border-color:var(--accent,var(--static-frame,#4aa8e0))}
.ck-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;cursor:pointer}
.ck-kopf-text{min-width:0}
.ck-name{font-size:1.05rem;font-weight:700;line-height:1.3}
.ck-zweck{margin-top:4px;font-size:.84rem;color:var(--c-muted);line-height:1.5}
.ck-kopf-rechts{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.ck-dauer{font-size:.72rem;color:var(--c-muted)}
.ck-fortschritt{font-size:.74rem;font-weight:700;padding:2px 8px;border-radius:11px;
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 12%, transparent);
  color:var(--accent,var(--static-frame,#4aa8e0))}
.ck-fortschritt.fertig{background:color-mix(in srgb, var(--c-green,#2d9e5a) 16%, transparent);
  color:var(--c-green,#2d9e5a)}
.ck-caret{font-size:.7rem;color:var(--c-muted)}
.ck-inhalt{margin-top:12px;border-top:1px solid var(--c-border);padding-top:12px}
.ck-warnung{margin-bottom:14px;padding:10px 12px;border-radius:9px;
  background:rgba(230,57,70,.10);border-left:3px solid var(--c-red,#e63946)}
.ck-warnung .ck-abschnitt-titel{color:var(--c-red,#e63946)}
.ck-warnung ul{margin:0;padding-left:18px}
.ck-warnung li{font-size:.85rem;line-height:1.6;margin-bottom:3px}
.ck-abschnitt{margin-bottom:14px}
.ck-abschnitt-titel{font-size:.74rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--c-muted);margin-bottom:6px}
.ck-punkt{display:flex;gap:10px;align-items:flex-start;padding:7px 8px;border-radius:8px;
  cursor:pointer;font-size:.9rem;line-height:1.55}
.ck-punkt:hover{background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 7%, transparent)}
.ck-punkt input{margin-top:3px;width:17px;height:17px;flex:0 0 auto;cursor:pointer;
  accent-color:var(--accent,var(--static-frame,#4aa8e0))}
.ck-punkt.an span{color:var(--c-muted);text-decoration:line-through}
.ck-verweise{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--c-border)}
.ck-link{background:none;border:1px solid var(--c-border);border-radius:8px;padding:5px 10px;
  font:inherit;font-size:.79rem;cursor:pointer;color:var(--c-text);text-align:left}
.ck-link:hover{border-color:var(--accent,var(--static-frame,#4aa8e0));
  color:var(--accent,var(--static-frame,#4aa8e0))}
.ck-link-pdf{border-color:var(--accent,var(--static-frame,#4aa8e0));
  color:var(--accent,var(--static-frame,#4aa8e0));font-weight:600}
.ck-link-ws{color:var(--c-muted)}
.ck-quelle{margin-top:10px;font-size:.72rem;color:var(--c-muted);line-height:1.5}
@media(max-width:820px){
  .ck-karte{padding:12px 13px}
  .ck-punkt{font-size:.88rem;padding:9px 8px}
  .ck-verweise{flex-direction:column;align-items:stretch}
}
/* /pt-checkliste-v1 -------------------------------------------------- */

/* pt-checkliste-eigen-v1 ---------------------------------------------
   Der Editor. Ein Fenster ueber der Seite, damit die Liste dahinter
   stehen bleibt und beim Schliessen kein Bildlauf verloren geht. */
.ck-eigen-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:11px}
.ck-neu{background:var(--accent,var(--static-frame,#4aa8e0));color:#fff;border:none;
  border-radius:9px;padding:7px 13px;font:inherit;font-size:.82rem;font-weight:600;cursor:pointer}
.ck-neu:hover{filter:brightness(1.07)}
.ck-eigen-hinweis{font-size:.76rem;color:var(--c-muted)}
.ck-link-weg{color:var(--c-red,#e63946)}
.ck-link-weg:hover{border-color:var(--c-red,#e63946);color:var(--c-red,#e63946)}
.ck-ed-ovl{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9760;
  display:flex;align-items:center;justify-content:center;padding:18px}
.ck-ed{background:var(--c-card,var(--c-white));border:1px solid var(--c-border);
  border-radius:14px;width:100%;max-width:720px;max-height:90vh;display:flex;
  flex-direction:column;overflow:hidden}
.ck-ed-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--c-border)}
.ck-ed-kopf h2{margin:0;font-size:1.05rem}
.ck-ed-zu{background:none;border:none;font-size:1rem;cursor:pointer;color:var(--c-muted);
  padding:4px 6px;line-height:1}
.ck-ed-koerper{padding:16px 18px;overflow:auto;flex:1}
.ck-ed-feld{display:block;margin-bottom:13px}
.ck-ed-feld > span{display:block;font-size:.76rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--c-muted);margin-bottom:5px}
.ck-ed-feld > span em{font-weight:400;text-transform:none;letter-spacing:0;opacity:.85}
.ck-ed-feld input, .ck-ed-feld textarea{width:100%;padding:8px 10px;font:inherit;
  font-size:.88rem;border:1px solid var(--c-border);border-radius:8px;
  background:var(--c-white);color:var(--c-text);resize:vertical}
.ck-ed-feld input:focus, .ck-ed-feld textarea:focus,
.ck-ed-abschnitt input:focus, .ck-ed-abschnitt textarea:focus{
  outline:none;border-color:var(--accent,var(--static-frame,#4aa8e0))}
.ck-ed-titel{font-size:.76rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--c-muted);margin:4px 0 7px}
.ck-ed-abschnitt{border:1px solid var(--c-border);border-radius:10px;padding:10px 11px;
  margin-bottom:10px}
.ck-ed-abschnitt-kopf{display:flex;gap:8px;align-items:center;margin-bottom:7px}
.ck-ed-abschnitt input, .ck-ed-abschnitt textarea{width:100%;padding:7px 9px;font:inherit;
  font-size:.88rem;border:1px solid var(--c-border);border-radius:8px;
  background:var(--c-white);color:var(--c-text);resize:vertical}
.ck-ed-abschnitt .ck-ed-stitel{font-weight:600}
.ck-ed-weg{background:none;border:none;color:var(--c-muted);cursor:pointer;font-size:.9rem;
  padding:4px 6px;line-height:1;flex:0 0 auto}
.ck-ed-weg:hover{color:var(--c-red,#e63946)}
.ck-ed-fuss{display:flex;align-items:center;gap:9px;padding:12px 18px;
  border-top:1px solid var(--c-border)}
.ck-ed-hinweis{flex:1;font-size:.79rem;color:var(--c-red,#e63946)}
@media(max-width:820px){
  .ck-ed-ovl{padding:0}
  .ck-ed{max-width:none;max-height:100vh;border-radius:0;border:none}
}
/* /pt-checkliste-eigen-v1 -------------------------------------------- */

/* pt-praeparate-v1 ---------------------------------------------------
   Die Praeparateliste auf der Wirkstoffkarte. Eine Zeile je Praeparat,
   rechts die Verweise -- am Telefon untereinander statt nebeneinander. */
.pr-karte{padding:12px 14px}
.pr-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer}
.pr-zahl{margin-left:6px;font-weight:400;opacity:.6}
.pr-caret{font-size:.7rem;color:var(--c-muted)}
.pr-liste{margin-top:10px;border-top:1px solid var(--c-border)}
.pr-zeile{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--c-border)}
.pr-zeile:last-child{border-bottom:none}
.pr-haupt{min-width:0;flex:1}
.pr-name{font-size:.9rem;font-weight:600;line-height:1.35}
.pr-unten{font-size:.78rem;color:var(--c-muted);margin-top:2px}
.pr-klein{font-size:.72rem;opacity:.8}
.pr-rechts{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end;
  flex:0 0 auto;max-width:52%}
.pr-rp{font-size:.7rem;padding:2px 8px;border-radius:10px;white-space:nowrap;
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 13%, transparent);
  color:var(--accent,var(--static-frame,#4aa8e0))}
.pr-rp.pr-frei{background:color-mix(in srgb, var(--c-green,#2d9e5a) 14%, transparent);
  color:var(--c-green,#2d9e5a)}
.pr-link{font-size:.76rem;text-decoration:none;white-space:nowrap;
  border:1px solid var(--c-border);border-radius:8px;padding:4px 9px;color:var(--c-text)}
.pr-link:hover{border-color:var(--accent,var(--static-frame,#4aa8e0));
  color:var(--accent,var(--static-frame,#4aa8e0))}
.pr-link span{opacity:.6;font-size:.7rem}
.pr-link-gi{color:var(--c-muted)}
.pr-quelle{margin-top:10px;font-size:.72rem;color:var(--c-muted);line-height:1.5}
@media(max-width:820px){
  .pr-zeile{flex-direction:column;align-items:stretch;gap:7px}
  .pr-rechts{max-width:none;justify-content:flex-start}
}
/* /pt-praeparate-v1 -------------------------------------------------- */

/* pt-ueber-v3 --------------------------------------------------------
   Die Seite "Ueber AccessMed". Zwei Spalten am Schreibtisch, eine am
   Telefon; die Ausschnitte sind Nachbauten aus denselben Bausteinen wie
   die echten Karten, damit sie in beiden Farbschemata stimmen.

   Die Farbe kommt aus der Rahmenfarbe des Profils und die Flaechen sind
   halbtransparent -- nichts ist fest eingetragen. */
.ue-wrap{max-width:880px;margin:0 auto;--ue-akz:var(--accent,var(--static-frame,#4aa8e0))}
.ue-hero{text-align:center;padding:34px 20px 26px}
.ue-logo{font-size:2.3rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.ue-logo .logo-pharm{color:var(--ue-akz)}
.ue-claim{font-size:1.06rem;color:var(--c-muted);margin:10px auto 20px;max-width:34em;line-height:1.55}
.ue-knoepfe{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.ue-btn{background:var(--ue-akz);border-color:var(--ue-akz)}

.ue-zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-bottom:18px;
  border-radius:14px;overflow:hidden;background:var(--c-border)}
.ue-zahl{background:var(--c-card);padding:16px 10px;text-align:center}
.ue-zahl b{display:block;font-size:1.5rem;font-weight:800;color:var(--ue-akz);
  font-variant-numeric:tabular-nums;line-height:1.15}
.ue-zahl span{display:block;font-size:.74rem;color:var(--c-muted);margin-top:3px;line-height:1.35}

.ue-ziel{background:color-mix(in srgb, var(--ue-akz) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--ue-akz) 34%, transparent);
  border-radius:14px;padding:18px 20px;margin-bottom:22px;line-height:1.62}
.ue-ziel-titel{font-weight:700;font-size:1.06rem;margin-bottom:6px}

.ue-block{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;
  padding:22px 0;border-top:1px solid var(--c-border)}
.ue-block.gedreht .ue-text{order:2}
.ue-text h3{margin:0 0 8px;font-size:1.12rem;line-height:1.3}
.ue-text p{margin:0 0 8px;line-height:1.62;color:var(--c-text)}
.ue-text p:last-child{margin-bottom:0}
.ue-fein{font-size:.86rem;color:var(--c-muted)}

/* --- die Ausschnitte ------------------------------------------------ */
.ue-m{background:var(--c-card);border:1px solid var(--c-border);border-radius:13px;
  padding:13px 14px;box-shadow:0 6px 22px rgba(0,0,0,.06);font-size:.84rem}
.ue-m-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-bottom:9px}
.ue-m-kopf b{font-size:.96rem}
.ue-m-pill{flex:0 0 auto;font-size:.68rem;padding:2px 8px;border-radius:10px;
  background:color-mix(in srgb, var(--ue-akz) 13%, transparent);color:var(--ue-akz);
  white-space:nowrap}
.ue-m-warn{display:flex;gap:7px;align-items:flex-start;padding:8px 10px;border-radius:9px;
  background:rgba(230,57,70,.10);border-left:3px solid var(--c-red,#e63946);
  line-height:1.45;margin-bottom:8px}
.ue-m-punkt{flex:0 0 auto;width:7px;height:7px;border-radius:50%;margin-top:5px;
  background:var(--c-red,#e63946)}
.ue-m-zeile{line-height:1.5;margin-bottom:8px}
.ue-m-zeile u{text-decoration:none;color:var(--ue-akz);
  border-bottom:1px dotted color-mix(in srgb, var(--ue-akz) 60%, transparent)}
.ue-m-ampel{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.ue-m-ampel span{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;
  color:var(--c-muted);border:1px solid var(--c-border);border-radius:8px;padding:3px 7px}
.ue-m-ampel i{width:8px;height:8px;border-radius:50%}
.ue-gruen{background:var(--c-green,#2d9e5a)}
.ue-gelb{background:#e0a32e}
.ue-m-tab{border-top:1px solid var(--c-border)}
.ue-m-tz{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 0;border-bottom:1px solid var(--c-border)}
.ue-m-tz i{font-style:normal;font-size:.68rem;padding:2px 8px;border-radius:9px;white-space:nowrap}
.ue-f1{background:rgba(230,57,70,.14);color:var(--c-red,#e63946)}
.ue-f2{background:rgba(224,163,46,.16);color:#a9741a}
.ue-f3{background:color-mix(in srgb, var(--c-muted) 16%, transparent);color:var(--c-muted)}
.ue-m-haken{display:flex;gap:9px;align-items:flex-start;padding:6px 0;line-height:1.45}
.ue-m-haken i{flex:0 0 auto;width:14px;height:14px;border-radius:4px;margin-top:2px;
  border:1.5px solid var(--c-border);position:relative}
.ue-m-haken.an i{background:var(--ue-akz);border-color:var(--ue-akz)}
.ue-m-haken.an i::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(42deg)}
.ue-m-haken.an{color:var(--c-muted);text-decoration:line-through}
.ue-m-dd{display:flex;gap:8px;align-items:baseline;padding:5px 0;line-height:1.45;
  border-bottom:1px solid var(--c-border)}
.ue-m-dd span{font-size:.76rem;color:var(--c-muted)}
.ue-m-nav{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:9px}
.ue-m-nav span{font-size:.7rem;padding:3px 8px;border-radius:8px;border:1px solid var(--c-border);
  color:var(--c-muted)}
.ue-m-nav span.an{background:color-mix(in srgb, var(--ue-akz) 13%, transparent);
  border-color:color-mix(in srgb, var(--ue-akz) 40%, transparent);color:var(--ue-akz);font-weight:600}
.ue-m-fuss{margin-top:9px;padding-top:8px;border-top:1px solid var(--c-border);
  font-size:.72rem;color:var(--c-muted);line-height:1.45}

/* --- Kacheln, Karten, Aufklappbares --------------------------------- */
.ue-weitere{padding:22px 0;border-top:1px solid var(--c-border)}
.ue-weitere-titel{font-weight:700;font-size:1.12rem;margin-bottom:12px}
.ue-kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.ue-kachel{background:var(--c-card);border:1px solid var(--c-border);border-radius:12px;
  padding:12px 13px}
.ue-kachel b{display:block;font-size:.9rem;margin-bottom:4px}
.ue-kachel span{font-size:.8rem;color:var(--c-muted);line-height:1.5}
.ue-karte{background:var(--c-card);border:1px solid var(--c-border);border-radius:14px;
  padding:20px;margin-top:14px}
.ue-karte h3{margin:0 0 8px;font-size:1.12rem}
.ue-karte p{margin:0;line-height:1.62}
.ue-betont{border-color:color-mix(in srgb, var(--ue-akz) 45%, transparent);
  background:color-mix(in srgb, var(--ue-akz) 6%, transparent)}
.ue-modi{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:4px}
.ue-modus{border:1px solid var(--c-border);border-radius:11px;padding:11px 12px}
.ue-modus b{display:block;font-size:.88rem;margin-bottom:3px}
.ue-modus span{font-size:.8rem;color:var(--c-muted);line-height:1.5}
.ue-mehr{margin-top:12px;border-top:1px solid var(--c-border);padding-top:10px}
.ue-mehr summary{cursor:pointer;font-size:.86rem;font-weight:600;color:var(--ue-akz);
  list-style:none}
.ue-mehr summary::-webkit-details-marker{display:none}
.ue-mehr summary::before{content:"▸ ";font-size:.8em}
.ue-mehr[open] summary::before{content:"▾ "}
.ue-mehr ul{margin:10px 0 0;padding-left:19px;line-height:1.65}
.ue-mehr li{margin-bottom:5px}
.ue-mehr p{margin:10px 0 0;line-height:1.62}
.ue-schluss{text-align:center;padding:24px 0 6px}
.ue-fuss{text-align:center;color:var(--c-muted);font-size:.78rem;line-height:1.55;
  margin:14px 0 4px}

@media(max-width:780px){
  .ue-zahlen{grid-template-columns:repeat(2,1fr)}
  .ue-block{grid-template-columns:1fr;gap:16px}
  .ue-block.gedreht .ue-text{order:0}
  .ue-kacheln,.ue-modi{grid-template-columns:1fr}
  .ue-hero{padding:24px 6px 20px}
  .ue-logo{font-size:1.9rem}
}
/* /pt-ueber-v3 ------------------------------------------------------- */

/* pt-addons-v1 -------------------------------------------------------
   Add-ons auf dem Schreibtisch. Die Ebene liegt ueber dem Hintergrund
   und unter den Symbolen -- und sie ist klickdurchlaessig, solange
   nicht angeordnet wird. */
/* pt-addons-v3: Die Ebene bleibt IMMER durchlaessig -- nur die Kacheln
   nehmen Klicks an. Vorher lag sie im Anordnen ueber der ganzen Seite
   und damit auch ueber der Menueleiste; wer eine Kachel abgelegt hatte,
   kam nicht mehr an das Menue heran, mit dem er das Anordnen beendet
   haette. Dieselbe Loesung wie bei der PNG-Ebene. */
.pt-add-layer{position:fixed;inset:0;z-index:9510;pointer-events:none;display:none}
.pt-add{position:absolute;pointer-events:none;user-select:none;
  color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.45)}
.pt-add-layer.bearbeiten .pt-add{pointer-events:auto;cursor:grab;
  outline:1px dashed rgba(255,255,255,.55);outline-offset:6px;border-radius:14px}
.pt-add-layer.bearbeiten .pt-add:active{cursor:grabbing}
html[data-theme="light"] .pt-add{color:#16304a;text-shadow:0 1px 4px rgba(255,255,255,.65)}
html[data-theme="light"] .pt-add-layer.bearbeiten .pt-add{outline-color:rgba(20,50,80,.45)}

/* pt-addons-v3: Das Bild-Fenster traegt den Rahmen der App-Fenster.
   Die Ampel selbst kommt aus deren Stil (.mac-ampel) -- eine Ampel, ein
   Aussehen. */
/* pt-addons-v4: Ein Rahmen fuer Bild und Kalender. */
.pt-add-fenster{background:var(--mac-glas-k);border:1px solid var(--mac-linie);
  border-radius:14px;overflow:hidden;box-shadow:0 16px 44px rgba(0,0,0,.28);
  color:var(--mac-tx);text-shadow:none;pointer-events:auto;
  -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%)}
.pt-add-fpad{padding:10px 11px 11px}
.pt-add-bild.sp .pt-add-finhalt img{transform:scaleX(-1)}
.pt-add-sp{margin-left:auto;border:0;background:none;cursor:pointer;line-height:1;
  color:var(--mac-tx);opacity:.5;font-size:.8em;padding:0 2px}
.pt-add-sp:hover{opacity:1}
.pt-add-fbar{display:flex;align-items:center;height:1.6em;min-height:22px;padding:0 .6em;
  border-bottom:1px solid var(--mac-linie);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);cursor:grab}
.pt-add-fbar .mac-ampel{transform:scale(.85);transform-origin:left center}
.pt-add-finhalt{display:block;line-height:0}
.pt-add-bild img{display:block;width:100%;height:auto}
.pt-add-leer{padding:18px;font-size:.62em;text-align:center;line-height:1.4;
  background:rgba(120,140,160,.18)}
/* Beim Bild-Fenster ersetzt die Ampel den roten Knopf der uebrigen Kacheln. */
.pt-add-layer.bearbeiten .pt-add-fenster > .pt-add-weg{display:none}
/* Zugeklappt bleibt nur die Titelzeile -- ohne Mindesthoehe faellt sie
   bei kleinen Kacheln in sich zusammen. */
.pt-add-fenster.zu{min-height:22px}
.pt-add-fertig{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:9700;border:0;border-radius:999px;padding:9px 18px;cursor:pointer;
  font:inherit;font-size:.82rem;font-weight:600;color:#fff;
  background:var(--accent,var(--static-frame,#4aa8e0));
  box-shadow:0 8px 26px rgba(0,0,0,.30)}
.pt-add-fertig:hover{filter:brightness(1.07)}

/* Uhr */
.pt-add-zeit{font-weight:600;letter-spacing:-.02em;line-height:1;font-size:1.35em;
  font-variant-numeric:tabular-nums}
.pt-add-datum{margin-top:.4em;font-size:.42em;opacity:.85}
.pt-add-analog{position:relative;width:100%;padding-top:100%;border-radius:50%;
  background:rgba(255,255,255,.16);
  border:2px solid color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 70%, transparent);
  box-shadow:0 14px 40px rgba(0,0,0,.28)}
.pt-uz{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:2px;
  background:currentColor}
.pt-uz-h{width:4px;height:26%}
.pt-uz-m{width:3px;height:36%}
.pt-uz-s{width:1.5px;height:40%;background:var(--accent,var(--static-frame,#4aa8e0))}
.pt-uz-mitte{position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--accent,var(--static-frame,#4aa8e0))}

/* Kalender */
.pt-add-kal{background:rgba(255,255,255,.14);backdrop-filter:blur(7px);
  border-radius:16px;padding:12px 13px;box-shadow:0 14px 40px rgba(0,0,0,.26)}
html[data-theme="light"] .pt-add-kal{background:rgba(255,255,255,.62)}
/* pt-addons-v2: Die Zellen erben --mac-tx aus dem Menue-Stil; damit die
   Ueberschrift nicht als einzige die helle Schrift der Ebene traegt,
   steht die Farbe an der Kachel. */
.pt-add-kal{color:var(--mac-tx);text-shadow:none;background:none;padding:0}
.pt-add-kalkopf{font-size:.62em;font-weight:600;margin-bottom:.5em;text-align:center}
.pt-add-kal .mac-kal{gap:2px;padding:0}
html[data-qps="5"] .pt-add-kal .mac-kal span{height:auto;aspect-ratio:1;font-size:.52em}
html[data-qps="5"] .pt-add-kal .mac-kal .mac-kal-wt{height:auto;font-size:.4em}
.pt-add-tagkopf{font-size:.5em;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  text-align:center;opacity:.9}
.pt-add-tagzahl{font-size:1.8em;font-weight:700;line-height:1.05;text-align:center;
  font-variant-numeric:tabular-nums}
.pt-add-tagwoche{font-size:.46em;text-align:center;opacity:.85}

/* Knopf und Griff -- nur beim Anordnen */
.pt-add-weg,.pt-add-griff{display:none}
.pt-add-layer.bearbeiten .pt-add-weg{display:flex;position:absolute;top:-12px;right:-12px;
  width:24px;height:24px;border-radius:50%;border:none;cursor:pointer;
  align-items:center;justify-content:center;font-size:15px;line-height:1;
  background:var(--c-red,#e63946);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.pt-add-layer.bearbeiten .pt-add-griff{display:block;position:absolute;right:-9px;bottom:-9px;
  width:18px;height:18px;border-radius:50%;cursor:nwse-resize;
  background:var(--accent,var(--static-frame,#4aa8e0));box-shadow:0 2px 8px rgba(0,0,0,.35)}

/* pt-addons-v1: Die Zeile "Standard-Aussehen" traegt die Rahmenfarbe. */
.mac-me-akz .mac-me-h{color:var(--accent,var(--static-frame,#4aa8e0));font-weight:600}
/* /pt-addons-v1 ------------------------------------------------------ */

/* pt-toxidrom-tab-v1 -------------------------------------------------
   Die Toxidrom-Ansicht. Die Tafel oben ist bewusst schmal gehalten:
   Pupillen, Haut und Temperatur genuegen, um die acht Toxidrome
   auseinanderzuhalten -- alles Weitere steht in den Karten darunter. */
.tox-schalter{display:flex;gap:8px;flex-wrap:wrap}
.tox-reiter{background:none;border:1px solid var(--c-border);border-radius:9px;
  padding:8px 14px;font:inherit;font-size:.86rem;cursor:pointer;color:var(--c-muted)}
.tox-reiter:hover{border-color:var(--accent,var(--static-frame,#4aa8e0))}
.tox-reiter.an{background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 14%, transparent);
  border-color:var(--accent,var(--static-frame,#4aa8e0));
  color:var(--accent,var(--static-frame,#4aa8e0));font-weight:700}
/* pt-tafel-rahmen-v1: Die Tafel traegt den Rahmen und rollt NICHT.
   Sonst gehoert ihr ::before zum rollenden Inhalt und seine rechte Kante
   erscheint beim Wischen als senkrechte Linie mitten im Bild. Gerollt
   wird im Behaelter darin; dessen Rundung schneidet die Tabellenecken,
   damit sie den Rahmen nicht ueberragen. */
.tox-tafel{margin-bottom:20px;border:1px solid var(--c-border);
  border-radius:12px;background:var(--c-white)}
.tox-tafel-roll{overflow-x:auto;border-radius:inherit}
.tox-tafel table{border-collapse:collapse;width:100%;font-size:.84rem}
.tox-tafel th{text-align:left;padding:10px 12px;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.05em;color:var(--c-muted);
  border-bottom:1px solid var(--c-border);white-space:nowrap}
.tox-tafel td{padding:9px 12px;border-bottom:1px solid var(--c-border);
  vertical-align:top}
.tox-tafel tr:last-child td{border-bottom:0}
.tox-tafel tbody tr{cursor:pointer}
.tox-tafel tbody tr:hover{background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 7%, transparent)}
.tox-punkt{display:inline-block;width:9px;height:9px;border-radius:50%;
  margin-right:7px;vertical-align:middle}
.tox-violett{background:#a855f7}  .tox-tuerkis{background:#22b8cf}
.tox-gruen{background:#2d9e5a}    .tox-gelb{background:#eab308}
.tox-rot{background:#e63946}      .tox-orange{background:#e07b2a}
.tox-rosa{background:#ec4899}     .tox-blau{background:#4aa8e0}
.tox-karte{background:var(--c-white);border:1px solid var(--c-border);
  border-radius:12px;padding:15px 17px;margin-bottom:12px;
  /* pt-ant-rahmen-v2: Der farbige Streifen liegt jetzt INNEN als
     box-shadow statt als linker Rahmen. Der Deluxe-Rahmen belegt den
     Rand rundum; ein vierter Pixel Rahmen links waere von seinem
     ::before verdeckt worden. */
  /* pt-tox-sprung-v1: Abstand, den der Browser beim Anspringen
     freihaelt. Ohne ihn verschwindet die Ueberschrift der angesprungenen
     Karte hinter der klebenden Titelzeile. */
  scroll-margin-top:76px}
.tox-rand-violett{box-shadow:inset 4px 0 0 #a855f7} .tox-rand-tuerkis{box-shadow:inset 4px 0 0 #22b8cf}
.tox-rand-gruen{box-shadow:inset 4px 0 0 #2d9e5a}   .tox-rand-gelb{box-shadow:inset 4px 0 0 #eab308}
.tox-rand-rot{box-shadow:inset 4px 0 0 #e63946}     .tox-rand-orange{box-shadow:inset 4px 0 0 #e07b2a}
.tox-rand-rosa{box-shadow:inset 4px 0 0 #ec4899}    .tox-rand-blau{box-shadow:inset 4px 0 0 #4aa8e0}
/* pt-ant-rahmen-v2: der Text rueckt um die Streifenbreite ein. */
.tox-karte{padding-left:21px}
.tox-name{font-size:1.05rem;font-weight:700}
.tox-kurz{margin-top:3px;font-size:.85rem;font-style:italic;color:var(--c-muted);line-height:1.5}
.tox-befunde{margin-top:11px;display:grid;gap:4px}
.tox-zeile{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px;
  font-size:.86rem;line-height:1.55}
.tox-zeile.stark{font-weight:600}
.tox-label{color:var(--c-muted);font-size:.78rem;padding-top:2px}
.tox-block{margin-top:11px;font-size:.86rem;line-height:1.6}
.tox-block b{display:block;font-size:.74rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--c-muted);margin-bottom:2px}
.tox-abgrenzung{padding:9px 12px;border-radius:8px;
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 7%, var(--c-white))}
@media(max-width:820px){
  .tox-zeile{grid-template-columns:minmax(0,1fr);gap:1px}
  .tox-label{padding-top:5px}
}
/* /pt-toxidrom-tab-v1 ------------------------------------------------ */

/* pt-ant-rahmen-v2: hier stand pt-ant-rahmen-v1 -- ein
   Notbehelf mit gemischter Randfarbe. Er ist entfallen: die Karten
   stehen jetzt in denselben Listen wie .card und .cat-header und
   tragen damit denselben Rahmen wie jede andere Box. */

/* pt-info-rahmen-v1
   .modal traegt den Deluxe-Rahmen (::before) und rollt zugleich senkrecht --
   damit gehoert der Rahmen zum rollenden Inhalt, seine untere Kante sitzt am
   Ende des Textes und wandert beim Rollen als Linie quer durchs Bild.
   Gleicher Fehler wie bei der Toxidrom-Tafel, gleiche Trennung wie beim
   Einstellungsfenster: Rahmen aussen, Rollen in einem Behaelter darin. */
#tabInfoModal .modal{overflow:visible;display:flex;flex-direction:column}
#tabInfoModal .modal > .modal-kopf{flex:0 0 auto}
.modal-roll{overflow-y:auto;min-height:0;padding-right:4px}

/* pt-modal-rahmen-v1
   Rahmen-Fehler beim Rollen, jetzt fuer alle Fenster.  .modal trug den
   Deluxe-Rahmen als absolut gesetztes ::before und war zugleich der rollende
   Behaelter -- damit rollte der Rahmen mit dem Inhalt und seine untere Kante
   wanderte als Linie quer durchs Bild (gleiche Ursache wie bei der
   Toxidrom-Tafel).  Statt in jedem Fenster einen eigenen Rollbehaelter
   einzuziehen, rollt jetzt die Flaeche darum; das Fenster wird so hoch wie
   sein Inhalt und der Rahmen umschliesst es wieder vollstaendig.
   align-items:flex-start + margin:auto, weil ein zentriertes Flex-Kind, das
   hoeher als der Bildschirm ist, oben abgeschnitten und unerreichbar wird --
   margin:auto zentriert, solange Platz ist, und schneidet nie ab.
   Einstellungen und Info bleiben bei ihrem eigenen Rollbehaelter und
   behalten ihre stehende Kopfzeile; ihre #-Regeln stechen diese hier. */
.modal-overlay{align-items:flex-start;overflow-y:auto;padding:16px 0}
.modal{max-height:none;overflow:visible;margin:auto}
#tabInfoModal .modal{max-height:90svh}

/* pt-slots10-v1 ------------------------------------------------------------------
   Die beiden Schalter sitzen jetzt in der unteren Leiste. Sie bekommen
   dort zwei eigene Spalten -- 1fr auto 1fr wird zu auto 1fr auto 1fr auto,
   damit die Suchzeile mittig bleibt und die Reiterleiste weiter rechts
   an ihre Spalte rueckt. position wird statisch: in der Leiste zaehlt die
   Spalte, nicht der Abstand zum Rand.
   Im Ruhezustand fahren sie mit ihren Nachbarn hinter die Suchzeile,
   jeder zu seiner Seite -- die alte Regel schob beide nach rechts. */
/* pt-schalter-anker-v1: Die Schalter haengen an ihren Kaesten statt in eigenen
   Rasterspalten zu stehen -- die Spalten enden am Rand der 1180 px
   breiten Leiste, also in den Ecken ueber den Ziffernreihen. */
.qps-dock,.qps-modi{position:relative}
/* pt-upload250-hoehe-v1: auf der Hoehe der untersten Ziffernreihe.
   Beide Kaesten werden im Raster bis zur Unterkante der Leiste gezogen,
   und die liegt auf derselben Hoehe wie die unterste Reihe -- bottom:0
   trifft sie damit genau. Mittig am Kasten sass der Schalter vorher
   rund 20 px zu hoch. */
.qps-dock>.qps-sperre,.qps-modi>.qps-sperre{
  top:auto;bottom:0;transform:none;pointer-events:auto}
.qps-dock>.qps-sperre-l{right:calc(100% + 8px);left:auto}
/* pt-png-schalter-v1: Der PNG-Schalter sitzt ueber dem Ruhezustand-
   Schalter. 22 px sind dessen Hoehe von 18 px plus vier Pixel Luft --
   damit stehen beide buendig uebereinander am Rand der Reiterleiste. */
.qps-dock>.qps-png-schalter{bottom:22px}
@media(max-width:820px){ .qps-dock>.qps-png-schalter{display:none} }
.qps-modi>.qps-sperre-2{left:calc(100% + 8px);right:auto}
/* Im Ruhezustand faehrt der Kasten hinaus und nimmt den Schalter mit.
   Die allgemeine Regel fuer .qps-sperre wuerde ihn stattdessen einzeln
   nach rechts schieben und dabei die senkrechte Mitte verlieren. */
html[data-qps="1"]:not([data-qps-wach="1"]) .qps-dock>.qps-sperre,
html[data-qps="1"]:not([data-qps-wach="1"]) .qps-modi>.qps-sperre{
  transform:none}
/* Die zweite Haelfte der Ziffernreihen, rechts unten -- dort, wo vorher
   die Schalter sassen. Gleiche Klasse, gleiches Aussehen; hier steht nur
   die Seite. */
.qps-reihen-r{left:auto;right:14px}
html[data-qps="1"]:not([data-qps-wach="1"]) .qps-reihen-r{
  transform:translateX(calc(100% + 28px));opacity:0}
@media(max-width:820px){ .qps-reihen-r{display:none} }
/* Profilseite: Ueberschrift der Reihe links, Blaetterknopf rechts. */
.qp-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px}
.qp-seite{height:22px;padding:0 9px;border-radius:7px;cursor:pointer;
  font-size:.72rem;font-weight:700;line-height:1;white-space:nowrap;
  background:var(--c-card);border:1px solid var(--c-border);color:var(--c-muted)}
.qp-seite:hover{background:var(--accent,var(--static-frame,#4aa8e0));
  border-color:transparent;color:#fff}
/* Zehn Slots passen nicht mehr nebeneinander unter eine Kachel der
   Mediathek -- sie brechen jetzt auf zwei Reihen zu fuenf um. */
.med-slots{flex-wrap:wrap}
.med-slots button{flex:1 1 16%}

/* pt-effekt-wahl-v1 ---------------------------------------------------------
   Die Tafel mit den Proben und die kleine Probe neben dem Knopf. Der
   Rahmen laeuft mit derselben Bewegung wie der Deluxe-Rahmen
   (@keyframes dlxSweep) -- eine zweite Bewegung fuer dieselbe Sache
   waere nur eine weitere Stelle, die auseinanderlaufen kann. */
#effWahlModal{z-index:260}
#effWahlModal .modal{max-height:88svh;display:flex;flex-direction:column}
#effWahlModal .modal>.modal-kopf{flex:0 0 auto}
.eff-wahl{display:flex;align-items:center;gap:8px;min-width:0}
.eff-probe{display:inline-flex;align-items:center;gap:6px;min-width:0}
.eff-probe-wort{font-size:.78rem;color:var(--c-muted);font-style:normal;
  max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eff-gitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.eff-kachel{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:12px 8px;border-radius:10px;cursor:pointer;
  background:var(--c-card);border:1.5px solid var(--c-border)}
.eff-kachel:hover{border-color:var(--accent,#4aa8e0)}
.eff-kachel.an{border-color:var(--accent,#4aa8e0);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent,#4aa8e0) 28%,transparent)}
.eff-kachel-probe{display:flex;align-items:center;justify-content:center;
  width:100%;height:34px}
.eff-kachel-name{font-size:.78rem;font-weight:600;color:var(--c-text);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eff-name-probe{font-weight:800;font-size:.95rem;white-space:nowrap}
.eff-leer-wort{font-size:.8rem;color:var(--c-muted)}
.eff-farb-probe{width:26px;height:18px;border-radius:5px;flex:0 0 auto;
  border:1px solid var(--c-border)}
.eff-farb-probe.eff-leer{background:repeating-linear-gradient(45deg,
  var(--c-border) 0 4px,transparent 4px 8px)}
/* Der Rahmen als Probe: ein leerer Kasten, dessen Rand umlaeuft. */
.eff-rahmen-probe{position:relative;display:block;width:74px;height:26px;
  border:2px solid transparent;border-radius:9px;flex:0 0 auto;
  background:var(--c-bg,#eef4fa)}
.eff-rahmen-probe::before{content:'';position:absolute;inset:-2px;
  border-radius:inherit;padding:2px;box-sizing:border-box;
  background:var(--eff-grad);background-size:200% auto;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;animation:dlxSweep 3s linear infinite;pointer-events:none}
.eff-probe .eff-rahmen-probe{width:52px;height:20px}

/* pt-reel-aufnahme-v1 ---------------------------------------------------------
   Der Knopf fuer Aufnahmen. Er haengt am Bildschirm, nicht an einer Seite,
   und gilt damit auf allen Tabs. Unten links, weil unten rechts der Griff
   des Verzeichnisses sitzt.

   Waehrend der Aufnahme traegt <html> data-aufnahme="1". Daran haengt eine
   einzige Regel, die alles ausblendet, was im Video nichts zu suchen hat --
   statt jedes Element einzeln im Skript anzufassen und hinterher wieder
   herzurichten. */
.reel-knopf{position:fixed;left:14px;bottom:16px;z-index:120;
  height:34px;padding:0 14px;border-radius:11px;cursor:pointer;
  font-size:.78rem;font-weight:700;letter-spacing:.04em;color:#fff;
  background:rgba(20,24,32,.72);border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 6px 20px rgba(0,0,0,.25)}
.reel-knopf:hover{background:var(--accent,var(--static-frame,#4aa8e0))}
/* Auf einer eigenen Startseite sitzen unten links die Ziffernreihen. */
html[data-qps="1"] .reel-knopf{bottom:86px}

html[data-aufnahme="1"] .reel-knopf,
html[data-aufnahme="1"] #nwInlineBtn,
html[data-aufnahme="1"] .report-btn,
html[data-aufnahme="1"] [id^="edit_"],
html[data-aufnahme="1"] #kbSideHandle,
html[data-aufnahme="1"] .qps-verz{display:none!important}
/* Eine weiche Rollbewegung des Browsers wuerde die gerechnete ueberlagern
   und sie ruckeln lassen. */
html[data-aufnahme="1"]{scroll-behavior:auto!important}

/* pt-reel-einst-v1: die drei Regler im Einstellungsfenster. */
.reel-zeile{display:flex;justify-content:space-between;align-items:baseline;
  font-size:.84rem;font-weight:600;margin:10px 0 2px}
.reel-zeile span:last-child{font-weight:500;color:var(--c-muted);font-size:.8rem}
#settingsReelGroup input[type="range"]{width:100%}

/* pt-kontowechsel-v1: die Liste der hinterlegten Konten. */
.kw-zeile{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 0;border-bottom:1px solid var(--c-border)}
.kw-zeile:last-child{border-bottom:none}
.kw-rolle{font-size:.72rem;color:var(--c-muted);margin-left:8px;
  border:1px solid var(--c-border);border-radius:6px;padding:1px 6px}
.kw-jetzt{font-size:.76rem;color:var(--c-muted);font-weight:600}
#kontoWechselModal{z-index:260}
#kontoWechselModal .modal{max-height:88svh;display:flex;flex-direction:column}
#kontoWechselModal .modal>.modal-kopf{flex:0 0 auto}

/* pt-reel-etappen-v1: die beiden Schalter der Aufnahme-Gruppe. */
.reel-schalter{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-top:10px}
.reel-schalter .set-sub{margin-top:1px}

/* pt-kw-profil-v1: Bild und Name in der Kontenliste. */
.kw-wer{display:flex;align-items:center;gap:10px;min-width:0}
.kw-av{width:34px;height:34px;border-radius:50%;flex-shrink:0;object-fit:cover;
  border:1px solid var(--c-border)}
.kw-av-txt{display:inline-flex;align-items:center;justify-content:center;
  background:#4aa8e0;color:#fff;font-weight:700;font-size:.9rem;border-color:transparent}
.kw-name{font-weight:700;font-size:.92rem;line-height:1.2}
.kw-wer .kw-rolle{margin-left:0;display:inline-block;margin-top:3px}

/* pt-reel-vf-vorlagen-v1: Waehrend einer Aufnahme steht die Meldung oben unter der
   Titelzeile. Unten faellt sie dem Schnitt zum Opfer -- fuers Hochformat
   wird das untere Drittel abgeschnitten. Sie faehrt dann von oben herein
   statt von unten; nur so bleibt die Bewegung stimmig. */
html[data-aufnahme="1"] .toast{bottom:auto;top:76px;
  transform:translateX(-50%) translateY(-80px)}
html[data-aufnahme="1"] .toast.show{transform:translateX(-50%) translateY(0)}

/* pt-reel-druck-v1: der sichtbare Druck auf einen Knopf waehrend einer
   Vorfuehrung. Eingedrueckt und mit Ring -- beides zusammen, weil die
   Groessenaenderung allein auf einem kleinen Knopf kaum auffaellt. */
.reel-druck{transform:scale(.92);
  box-shadow:0 0 0 3px var(--accent,var(--static-frame,#4aa8e0));
  filter:brightness(.94);
  transition:transform .16s ease-out,box-shadow .16s ease-out,filter .16s ease-out}

/* pt-promo-titel-v2: Das Titelbild zu Beginn des Promo-Laufs -- Logo, Satz,
   und darunter derselbe Hintergrund wie auf der Seite selbst. Die Grafik
   ist dieselbe, die html::before verwendet, samt Hochformat-Fassung; so
   sieht die Einblendung nach AccessMed aus und nicht nach Vorsatzblatt. */
.promo-titel{position:fixed;inset:0;z-index:300;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:20px;
  padding:0 34px;text-align:center;
  background:var(--c-bg,#eef4fa) url("/static/img/accessmed-bg.svg")
             center/cover no-repeat;
  opacity:0;transition:opacity .55s ease;pointer-events:none}
@media (max-aspect-ratio: 2/3){
  .promo-titel{background-image:url("/static/img/accessmed-bg-hoch.svg")}
}
.promo-titel.an{opacity:1}
.promo-titel img{width:clamp(96px,19vw,156px);aspect-ratio:121/128;
  object-fit:contain;display:block}
.promo-titel span{font-size:clamp(1.5rem,6vw,2.6rem);font-weight:800;
  line-height:1.25;letter-spacing:-.02em;color:#4aa8e0;text-wrap:balance}

/* pt-kb-quellen-v1 ---------------------------------------------------- */
.kb-quellen{width:100%;border-collapse:collapse;font-size:.88rem;margin-top:4px}
.kb-quellen td{padding:7px 10px 7px 0;border-top:1px solid var(--border,#2a2f3a);vertical-align:top}
.kb-quellen tr:first-child td{border-top:none}
.kb-q-typ{white-space:nowrap;opacity:.72;width:1%}
.kb-q-stand{white-space:nowrap;opacity:.85;width:1%}
.kb-q-kenn{margin-left:8px;opacity:.6;font-variant-numeric:tabular-nums}
.kb-q-bis{opacity:.6;font-size:.85em;display:block}
.kb-q-hinweis{opacity:.7;font-size:.9em;margin-top:3px}
.kb-q-befund{white-space:nowrap;font-size:.82em;padding:2px 8px;border-radius:10px;
  border:1px solid var(--border,#2a2f3a)}
.kb-q-geaendert{border-color:#c98a2b;color:#e0a54a}
.kb-q-abgelaufen{border-color:#c0504d;color:#e07b78}
.kb-q-aktuell{border-color:#3f8f5b;color:#63b884}
.kb-q-unpruefbar{opacity:.6}

.kb-ed-geprueft{font-size:.85rem;display:flex;align-items:center;gap:5px}
.kb-ed-geprueft input[type="date"]{padding:4px 6px}
.kb-edq-row{display:flex;gap:6px;align-items:center;margin:6px 0;flex-wrap:wrap}
.kb-edq-row select{min-width:150px}
.kb-edq-row input{padding:5px 7px;min-width:90px}
.kb-edq-titel{flex:1 1 240px;min-width:180px}
.kb-edq-url{flex:1 1 200px;min-width:160px}
.kb-edq-leer{opacity:.6;font-size:.9rem;padding:6px 0}
.kb-edq-bar{display:flex;gap:10px;align-items:center;margin-top:8px;flex-wrap:wrap}
.kb-edq-hinweis{opacity:.6;font-size:.82rem}

/* pt-kb-quellen-v2 ---------------------------------------------------- */
.kb-q-ueberarbeitung{border-color:#4a7fb5;color:#6ba3d8}
#adminQuellenSection table{width:100%;border-collapse:collapse;font-size:.88rem}
#adminQuellenSection td{padding:8px 10px 8px 0;border-top:1px solid var(--c-border);vertical-align:top}
#adminQuellenSection th{text-align:left;padding:0 10px 8px 0;font-weight:600;opacity:.7;font-size:.82rem}

/* pt-kb-svg-inline-v1 -------------------------------------------------- */
/* pt-kb-svg-masstab-v1: dieselbe Skalierung wie Rasterbilder. width:100%
   blies schmale Diagramme auf die volle Spaltenbreite auf. */
.kb-fig .kb-fig-scroll .kb-fig-svg{
  width:calc(100% * var(--kb-fig-ratio,1));
  max-width:none;
  display:block;
  margin:0;
}
.kb-fig .kb-fig-scroll .kb-fig-svg svg{display:block;width:100%;height:auto}
@media(max-width:700px){
  /* feste Bezugsbreite wie bei den Bildern, dafuer scrollen */
  .kb-fig .kb-fig-scroll .kb-fig-svg{width:calc(680px * var(--kb-fig-ratio,1))}
}

/* ── Textbloecke der Detailansicht als Punkteliste ── pt-infotext-v1 ── */
.info-text .pt-punkte{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.info-text .pt-nurwarn,.info-text .pt-nachtext{margin-top:7px}
.info-text .pt-nurwarn>li::before{content:"\26A0";width:auto;height:auto;border-radius:0;background:none;opacity:1;top:0;font-size:.86em;color:#b42318}
.info-text .pt-punkte>li{position:relative;padding-left:1.05em}
.info-text .pt-punkte>li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.42}
.info-text .pt-unter{list-style:none;margin:5px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.info-text .pt-warn{position:relative;padding-left:1.05em}
.info-text .pt-warn::before{content:"\26A0";position:absolute;left:0;top:0;width:auto;height:auto;border-radius:0;background:none;opacity:1;font-size:.86em;color:#b42318}
[data-theme="dark"] .info-text .pt-warn::before{color:#fca5a5}
.info-text .pt-stich{font-weight:700}
/* Die Punkte tragen ihre Gliederung selbst -- der Umbruch aus dem
   Quelltext darf sie nicht zusaetzlich auseinanderziehen. */
.info-text:has(.pt-punkte){white-space:normal}

/* Unterpunkte unter einer Ueberschrift ── pt-infotext-v3 ── */
.info-text .pt-unter>li:not(.pt-warn){position:relative;padding-left:1.05em}
.info-text .pt-unter>li:not(.pt-warn)::before{content:"";position:absolute;left:.1em;top:.78em;width:6px;height:1px;background:currentColor;opacity:.45}

/* pt-pille-hero-v1 ------------------------------------------------------
   Zwei Flaechen, die vor einem eigenen Hintergrundbild verschwanden.

   Der Zurueck-Knopf trug nur Text in --c-muted und ging im Bild unter. Er
   bekommt die Pillenform der Kategorie daneben; Schrift, Flaeche und Linie
   folgen der Akzentfarbe, damit er sich mit dem Profil mitfaerbt.

   Der AccessSearch-Kasten stand auf var(--c-card) -- diese Variable ist
   nirgends definiert, die Deklaration war ungueltig und die Flaeche
   durchsichtig. Er bekommt dieselbe halbdurchsichtige Flaeche wie die
   Kaestchen der eigenen Startseite (--qps-flaeche): deckend genug zum
   Lesen, durchlaessig genug, dass das Bild noch durchscheint. */
.back-btn{
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 14%, rgba(255,255,255,.88));
  color:var(--accent,var(--static-frame,#4aa8e0));
  border:1px solid color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 30%, transparent);
  padding:5px 14px;
  border-radius:20px;
  font-weight:600;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  transition:background .12s,border-color .12s;
}
.back-btn:hover{
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 26%, rgba(255,255,255,.90));
  border-color:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 45%, transparent);
  color:var(--accent,var(--static-frame,#4aa8e0));
}
.back-btn:focus-visible{
  outline:2px solid var(--accent,var(--static-frame,#4aa8e0));
  outline-offset:2px;
}
[data-theme="dark"] .back-btn{
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 18%, rgba(28,31,36,.88));
}
[data-theme="dark"] .back-btn:hover{
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 30%, rgba(28,31,36,.92));
}

.kb-hero{
  background:rgba(255,255,255,.82);
  border-color:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 30%, transparent);
  -webkit-backdrop-filter:blur(6px) saturate(1.1);
  backdrop-filter:blur(6px) saturate(1.1);
}
[data-theme="dark"] .kb-hero{
  background:rgba(26,32,42,.86);
}
/* /pt-pille-hero-v1 ----------------------------------------------------- */

/* pt-ae-raster-v1 -------------------------------------------------------
   Die Wirkstoffkarten im Nebenwirkungs-Tab stehen in einem Raster gleicher
   Breite statt in einer umbrechenden Reihe. Die Karten einer Zeile sind
   dadurch gleich hoch (align-items:stretch ist die Vorgabe des Rasters);
   die Haeufigkeitspille wird mit margin-top:auto nach unten gedrueckt und
   steht deshalb bei allen Karten auf derselben Linie -- auch wenn ein
   Wirkstoffname zweizeilig umbricht.
   overflow-wrap:anywhere, weil die Spaltenbreite im Raster fest ist:
   Namen wie Mucopolysaccharidpolyschwefelsaeureester (39 Zeichen ohne
   Trennstelle) durften in der umbrechenden Reihe die Karte breiter
   machen und wuerden hier sonst ueber den Rand laufen. */
.ae-chip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:10px}
.ae-chip{display:flex;flex-direction:column;overflow-wrap:anywhere}
.ae-chip-freq{margin-top:auto}
@media(max-width:560px){
  .ae-chip-grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px}
}
/* /pt-ae-raster-v1 ------------------------------------------------------ */

/* pt-chip-niere-v1 ------------------------------------------------------
   Die Wirkstoffkarten standen auf var(--c-white) -- eine deckende Flaeche,
   die vor einem eigenen Hintergrundbild wie aufgeklebt wirkte und mit der
   Rahmenfarbe des Nutzers nichts zu tun hatte. Die Fuellung wird jetzt aus
   derselben Kette gemischt wie die Rahmenlinien, var(--accent,
   var(--static-frame, ...)) aus frame_color des Profils, und bleibt
   durchscheinend; der Weichzeichner haelt die Schrift lesbar. Die Regel
   steht hinter .drug-chip und .drug-chip:hover und ueberschreibt beide
   ueber die Reihenfolge, die gesperrte Karte (.chip-gesperrt) behaelt ihre
   eigene Flaeche weiter unten. */
.drug-chip{
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 12%, rgba(255,255,255,.34));
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.drug-chip:hover{
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 26%, rgba(255,255,255,.46));
}
[data-theme="dark"] .drug-chip{
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 18%, rgba(22,26,33,.42));
}
[data-theme="dark"] .drug-chip:hover{
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 32%, rgba(22,26,33,.55));
  border-color:var(--accent,var(--static-frame,#4aa8e0));
}

/* Der Sammelaufklapper der Wirkstoffklassen im Nierenadaptions-Tab. */
.nephro-kat-zahl{
  display:inline-block;
  margin-left:10px;
  font-weight:400;
  font-size:.78rem;
  color:var(--c-muted);
}
.nephro-kat-body{
  padding:10px 12px 2px;
}
/* /pt-chip-niere-v1 ----------------------------------------------------- */

/* pt-autor-v3 -----------------------------------------------------------
   Der Buchtitel stand mitten im Fliesstext der Autorenkarte und brach auf
   dem Handy ueber drei kursive Zeilen. Er steht jetzt als eigene Zeile:
   Akzentstrich links aus derselben Farbkette wie die Rahmenlinien,
   darunter die Seitenzahl als leise Zeile. Die Flaeche bleibt
   durchscheinend, damit ein eigenes Hintergrundbild durchkommt. */
.autor-buch{
  margin:0 0 12px;
  padding:10px 14px;
  border-left:3px solid var(--accent,var(--static-frame,#4aa8e0));
  border-radius:0 8px 8px 0;
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 10%, rgba(255,255,255,.34));
}
.autor-buch a{
  color:var(--accent,var(--static-frame,#4aa8e0));
  font-weight:700;
  text-decoration:none;
}
.autor-buch a:hover{text-decoration:underline}
.autor-buch span{
  display:block;
  margin-top:3px;
  font-size:.82rem;
  color:var(--c-muted);
}
[data-theme="dark"] .autor-buch{
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 16%, rgba(22,26,33,.42));
}
/* /pt-autor-v3 ---------------------------------------------------------- */

/* pt-png-inventar-v1 ----------------------------------------------------
   Die Ebene liegt ueber allem und ist klickdurchlaessig. pointer-events
   steht auf none -- nicht die Sichtbarkeit entscheidet das, sondern
   genau diese Eigenschaft: das Bild ist da, faengt aber keinen Klick ab.
   Erst .bearbeiten (Inventar offen) gibt den Bildern pointer-events
   zurueck. Die Ebene selbst bleibt auch dann durchlaessig, damit nur die
   Bilder anfassbar sind und nicht die leere Flaeche dazwischen. */
.pt-png-layer{
  position:fixed;
  inset:0;
  z-index:9500;
  pointer-events:none;
  overflow:hidden;
}
.pt-png{
  position:absolute;
  pointer-events:none;
  user-select:none;
  line-height:0;
}
.pt-png img{
  width:100%;
  height:auto;
  display:block;
  -webkit-user-drag:none;
  user-select:none;
}
.pt-png-weg,.pt-png-griff,.pt-png-sp{display:none}
/* pt-png-spiegel-v1: der Spiegelknopf, links oben -- gegenueber dem
   Entfernen. Gedreht wird allein das Bild; der Kasten mit Knoepfen und
   Griff bleibt seitenrichtig. */
.pt-png-layer.bearbeiten .pt-png-sp{
  display:block;
  position:absolute;
  top:-10px;
  left:-10px;
  width:22px;
  height:22px;
  border-radius:50%;
  border:1px solid var(--accent,var(--static-frame,#4aa8e0));
  background:var(--c-white,#fff);
  color:var(--c-text,#222);
  font-size:.8rem;
  line-height:1;
  cursor:pointer;
  padding:0;
}
.pt-png.sp img{transform:scaleX(-1)}

.pt-png-layer.bearbeiten .pt-png{
  pointer-events:auto;
  cursor:grab;
  outline:1px dashed color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 70%, transparent);
  outline-offset:2px;
}
.pt-png-layer.bearbeiten .pt-png:active{cursor:grabbing}
.pt-png-layer.bearbeiten .pt-png-weg{
  display:block;
  position:absolute;
  top:-10px;
  right:-10px;
  width:22px;
  height:22px;
  border-radius:50%;
  border:1px solid var(--accent,var(--static-frame,#4aa8e0));
  background:var(--c-white,#fff);
  color:var(--c-text,#222);
  font-size:.95rem;
  line-height:1;
  cursor:pointer;
  padding:0;
}
.pt-png-layer.bearbeiten .pt-png-griff{
  display:block;
  position:absolute;
  right:-7px;
  bottom:-7px;
  width:16px;
  height:16px;
  border-radius:4px;
  border:1px solid var(--accent,var(--static-frame,#4aa8e0));
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 35%, #fff);
  cursor:nwse-resize;
}

/* Das Geisterbild waehrend des Ziehens aus dem Inventar. */
.pt-png-geist{
  position:fixed;
  z-index:9600;
  width:120px;
  height:auto;
  transform:translate(-50%,-50%);
  opacity:.75;
  pointer-events:none;
}

/* Das Inventar selbst: ein schwebendes Fenster, kein Modal -- aus einem
   Modal heraus liesse sich nichts auf die Seite ziehen, die
   Abdunklung faengt jeden Zeiger ab. */
.pt-png-inv{
  position:fixed;
  left:18px;
  bottom:18px;
  z-index:9700;
  width:300px;
  max-width:calc(100vw - 36px);
  max-height:min(70vh,560px);
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px;
  border-radius:12px;
  border:1px solid var(--accent,var(--static-frame,#4aa8e0));
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 10%, rgba(255,255,255,.88));
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  box-shadow:0 8px 28px rgba(0,0,0,.18);
}
[data-theme="dark"] .pt-png-inv{
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 16%, rgba(22,26,33,.90));
}
/* pt-png-inv-ziehen-v1: Die Kopfzeile ist der Griff des Fensters.
   touch-action:none, weil der Browser die Geste sonst als Scrollen
   deutet und pointermove ausbleibt. */
.pt-png-inv-kopf{
  display:flex;align-items:center;gap:8px;font-size:.95rem;
  cursor:move;
  touch-action:none;
  user-select:none;
}
.pt-png-inv.wird-gezogen{
  opacity:.92;
  box-shadow:0 12px 34px rgba(0,0,0,.26);
}
.pt-png-inv.wird-gezogen .pt-png-inv-kopf{cursor:grabbing}
.pt-png-inv-kopf span{font-size:.72rem;color:var(--c-muted);margin-left:auto}
.pt-png-inv-zu{
  background:none;border:none;font-size:1.2rem;line-height:1;cursor:pointer;
  color:var(--c-muted);padding:0 2px;
}
.pt-png-inv-hin{font-size:.75rem;color:var(--c-muted);line-height:1.5}
.pt-png-inv-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
  gap:8px;
  overflow-y:auto;
  padding-right:2px;
}
.pt-png-inv-kachel{
  aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  padding:4px;
  border-radius:8px;
  border:1px solid var(--c-border);
  background:rgba(255,255,255,.45);
  cursor:grab;
  touch-action:none;
}
[data-theme="dark"] .pt-png-inv-kachel{background:rgba(255,255,255,.06)}
.pt-png-inv-kachel:hover{border-color:var(--accent,var(--static-frame,#4aa8e0))}
.pt-png-inv-kachel img{max-width:100%;max-height:100%;object-fit:contain}
.pt-png-inv-leer{grid-column:1/-1;font-size:.8rem;color:var(--c-muted);line-height:1.5}
.pt-png-inv-fuss{display:flex;justify-content:flex-end}

/* pt-png-leiste-fuss-v1: Der Fuss der linken Spalte, gebaut wie der
   Verzeichnis-Knopf der rechten (.qps-verz): margin-top:auto heftet die
   Leiste an die Unterkante des Kaestchens -- bei kurzem Inhalt schiebt
   der Wert sie nach unten, bei langem loest er zu 0 auf --, und die
   Linie oben setzt sie vom Rest ab. Deshalb steht die Leiste im Markup
   ausserhalb von .qps-body; innerhalb wuerde margin-top:auto nichts
   bewirken, weil der Koerper nicht die Spalte ist. */
.qps-png-leiste{
  flex:0 0 auto;
  margin-top:auto;
  display:flex;
  height:40px;
  border-top:1px solid var(--qps-linie);
}
.qps-png-btn,.qps-png-fix{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  padding:0 12px;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--qps-text);
  background:transparent;
  border:0;
  border-radius:0;
  cursor:pointer;
}
.qps-png-btn{flex:1;min-width:0}
.qps-png-fix{flex:0 0 auto;border-left:1px solid var(--qps-linie)}
.qps-png-btn:hover,.qps-png-fix:hover{
  background:var(--qps-kopf);
  color:var(--qps-kopf-tx);
}
.qps-png-fix.an{
  background:var(--accent,var(--static-frame,#4aa8e0));
  color:#fff;
}
.qps-png-fix.an:hover{
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 80%, #000);
  color:#fff;
}

/* Am Handy gibt es keine PNG-Ebene (siehe _ptPngSichtbar) -- dann haben
   auch die beiden Knoepfe nichts zu schalten und stehen nur im Weg. */
@media(max-width:820px){
  .qps-png-leiste{display:none}
}

/* Hinweis auf der PNG-Kachel in der Mediathek. */
.med-png-hin{font-size:.7rem;color:var(--c-muted);text-align:center;padding:4px 0}
/* /pt-png-inventar-v1 --------------------------------------------------- */

/* pt-med-auswahl-v1 -----------------------------------------------------
   Das eigene Bestaetigungsfenster. Es liegt ueber der Mediathek, also
   ueber deren Modal -- und ueber der PNG-Ebene, sonst laege ein Bild auf
   der Frage. Die Flaeche nimmt wie ueberall die Rahmenfarbe des Profils
   auf und bleibt leicht durchscheinend. */
.pt-frage-ovl{
  position:fixed;
  inset:0;
  z-index:9800;
  background:rgba(0,0,0,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}
.pt-frage{
  width:100%;
  max-width:440px;
  padding:22px;
  border-radius:14px;
  border:1px solid var(--accent,var(--static-frame,#4aa8e0));
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 8%, rgba(255,255,255,.94));
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  box-shadow:0 14px 40px rgba(0,0,0,.28);
}
[data-theme="dark"] .pt-frage{
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 14%, rgba(22,26,33,.95));
}
.pt-frage-kopf{font-size:1.05rem;font-weight:700;margin-bottom:8px}
.pt-frage-text{font-size:.9rem;line-height:1.6;color:var(--c-text)}
.pt-frage-knoepfe{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.pt-frage-gefahr{
  background:#c0392b;
  color:#fff;
  border:1px solid #c0392b;
}
.pt-frage-gefahr:hover{background:#a5311f;border-color:#a5311f}

/* Die Leiste des Auswahlzustands und die angewaehlte Kachel. */
.med-auswahl{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:8px 0 0;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 35%, transparent);
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 10%, rgba(255,255,255,.30));
}
.med-auswahl span{font-size:.82rem;font-weight:600;margin-right:auto}
.med-loesch-btn{background:#c0392b;color:#fff;border:1px solid #c0392b}
.med-loesch-btn:hover{background:#a5311f;border-color:#a5311f}
.med-kachel.med-waehlbar{cursor:pointer}
.med-kachel.gewaehlt{
  border-color:var(--accent,var(--static-frame,#4aa8e0));
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 45%, transparent);
}
.med-haken{
  position:absolute;
  top:6px;
  left:6px;
  width:22px;
  height:22px;
  border-radius:6px;
  border:1px solid var(--accent,var(--static-frame,#4aa8e0));
  background:rgba(255,255,255,.85);
  color:var(--accent,var(--static-frame,#4aa8e0));
  font-size:.85rem;
  font-weight:700;
  line-height:20px;
  text-align:center;
}
.med-kachel.gewaehlt .med-haken{
  background:var(--accent,var(--static-frame,#4aa8e0));
  color:#fff;
}
/* /pt-med-auswahl-v1 ---------------------------------------------------- */

/* pt-term-schalter-v1 ---------------------------------------------------
   Die Titelleiste des Terminal-Aufbaus.

   Der Zustand steht im Zeichen, nicht in einer Flaeche: .qps-sperre.an
   legt eine gefuellte Pille unter den Schalter -- richtig fuer die
   Kaesten in Aufbau 1, falsch in einer Leiste aus Text. Hier bleibt die
   Flaeche leer, gefuellt wird der Kreis.

   Zeichen und Wort kommen beide aus dem Stylesheet. Das ist nicht
   Geschmack, sondern Notwendigkeit: qpsSperreToggle() schreibt einen
   festen Text in den Knopf, der hier jedes Zeichen im Markup ueberschriebe.

   Dazu die beiden Griffe der Bilderebene: "inv" oeffnet das Inventar,
   "png" blendet alle Bilder aus. Beide treten am Handy mit den uebrigen
   Schaltern ab -- dort zeigt _ptPngSichtbar() ohnehin keine Bilder. */
.qps-ovl-4 .qps-term-schalter{display:flex;align-items:center}
.qps-ovl-4 .qps-term-sperre.an{
  background:none;border-color:transparent;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  color:var(--qps-t-akz);opacity:.95}
.qps-ovl-4 .qps-term-sperre::before{content:'\25cb'}
.qps-ovl-4 .qps-term-sperre.an::before{content:'\25cf'}
/* Das Inventar kennt kein An und Aus -- es oeffnet ein Fenster. Ein
   Kreis waere dort eine Zusage, die der Knopf nicht einloest. */
.qps-ovl-4 .qps-term-inv::before{content:'\25b8'}
.qps-ovl-4 .qps-term-inv::after{content:'inv'}
.qps-ovl-4 .qps-term-png::after{content:'png'}

/* Zehn Ziffern je Reihe. Am Desktop passen sie neben die Beschriftung;
   am Handy bekommt die Beschriftung eine eigene Zeile und die Ziffern
   teilen sich die naechste zu gleichen Teilen -- zehn feste Kaestchen
   plus Wort waeren dort breiter als der Block. */
@media(max-width:820px){
  .qps-ovl-4 .qps-tanp .qps-reihe{flex-wrap:wrap;gap:4px}
  .qps-ovl-4 .qps-tanp .qps-reihe b{flex:1 0 100%}
  .qps-ovl-4 .qps-tanp .qps-mini-btn{flex:1 1 0;width:auto;min-width:0}
}
/* /pt-term-schalter-v1 -------------------------------------------------- */

/* pt-slot-leer-v1 -------------------------------------------------------
   Eine Ziffer, hinter der nichts liegt, traegt das Merkmal disabled --
   der Browser nimmt den Klick dann von sich aus nicht mehr an, es
   braucht keine zweite Sperre im Skript. Sichtbar bleibt sie, nur blass:
   Die Reihe soll weiter zeigen, wie viele Plaetze es gibt.

   Die Regel fuer :hover muss mitgenommen werden. Sie faerbt sonst auch
   einen Knopf, der auf nichts reagiert -- und eine Faerbung unter dem
   Zeiger ist genau die Zusage, die hier nicht mehr gelten soll. */
.qps-mini-btn:disabled{opacity:.4;cursor:default}
.qps-mini-btn:disabled:hover{background:var(--qps-flaeche);color:var(--qps-text)}
.qps-ovl-4 .qps-tanp .qps-mini-btn:disabled:hover{background:rgba(255,255,255,.05)}
/* /pt-slot-leer-v1 ------------------------------------------------------ */

/* pt-term-fix-v1 --------------------------------------------------------
   Der dritte Griff der Bilderebene in der Titelleiste von Aufbau 4. Kreis
   und Faerbung kommen aus pt-term-schalter-v1, hier steht nur das Wort. */
.qps-ovl-4 .qps-term-fix::after{content:'fix'}
/* /pt-term-fix-v1 ------------------------------------------------------- */

/* pt-mac-startseite-v1 --------------------------------------------------
   Aufbau 5: ein Schreibtisch nach dem Vorbild von macOS.

   Das Aussehen traegt eine einzige Idee: Glas. Jede Flaeche ist
   durchscheinend, weichgezeichnet und leicht uebersaettigt, sodass das
   Wallpaper darunter die Farbe stellt. Damit das auf hellen wie auf
   dunklen Bildern traegt, liegt auf jeder Flaeche zusaetzlich ein
   Verlauf von oben nach unten und eine helle Linie an der Oberkante --
   das ist der Lichtsaum, an dem echtes Glas erkannt wird.

   Die Akzentfarbe kommt aus derselben Kette wie ueberall:
   var(--accent, var(--static-frame, ...)). Wer seine Rahmenfarbe
   aendert, aendert auch die Auswahl in den Menues. */
/* pt-mac-suche-v1: Die Glasfarben stehen am Wurzelelement und nicht mehr
   nur an der Schreibtisch-Schicht. Die Suchschicht (#globalSearchOverlay)
   liegt als Geschwister im body; von html[data-qps="5"] koennte sie nichts
   erben. */
html[data-qps="5"]{
  --mac-glas:linear-gradient(180deg,rgba(255,255,255,.58),rgba(255,255,255,.34));
  --mac-glas-k:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.48));
  --mac-linie:rgba(255,255,255,.55);
  --mac-saum:inset 0 1px 0 rgba(255,255,255,.75);
  --mac-tx:#161b26;
  --mac-tx-leise:rgba(22,27,38,.6);
  --mac-schatten:0 12px 40px rgba(10,16,30,.26);
  --mac-akz:var(--accent,var(--static-frame,#4aa8e0));
}
html[data-qps="5"][data-theme="dark"]{
  --mac-glas:linear-gradient(180deg,rgba(38,43,56,.58),rgba(22,26,35,.42));
  --mac-glas-k:linear-gradient(180deg,rgba(44,50,64,.76),rgba(26,31,41,.58));
  --mac-linie:rgba(255,255,255,.14);
  --mac-saum:inset 0 1px 0 rgba(255,255,255,.18);
  --mac-tx:#eef1f6;
  --mac-tx-leise:rgba(238,241,246,.62);
  --mac-schatten:0 14px 44px rgba(0,0,0,.5);
}
.qps-ovl-5{
  position:fixed;inset:0;padding:0;pointer-events:none;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
}
/* Aufbau 5 bringt Einstellungen und Profil selbst mit -- wie Aufbau 1,
   3 und 4 treten die freischwebenden Knoepfe der Kopfzeile ab. */
html[data-active-page="start"][data-qps="5"] #headerSettingsBtn,
html[data-active-page="start"][data-qps="5"] #headerUserChip,
html[data-active-page="start"][data-qps="5"] .start-credit{display:none}
html[data-active-page="start"][data-qps="5"] #kbSideHandle{display:none !important}

/* ---- Menueleiste ---- */
html[data-qps="5"] .mac-bar{
  position:absolute;top:0;left:0;right:0;height:30px;
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:0 10px;pointer-events:auto;
  background:var(--mac-glas);border-bottom:1px solid var(--mac-linie);
  box-shadow:var(--mac-saum);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  backdrop-filter:blur(30px) saturate(180%);
  color:var(--mac-tx);font-size:.76rem}
html[data-qps="5"] .mac-bar-l,html[data-qps="5"] .mac-bar-r{display:flex;align-items:center;gap:2px;min-width:0}
html[data-qps="5"] .mac-mi{
  display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;
  border:0;border-radius:6px;background:none;cursor:pointer;
  font-family:inherit;font-size:.76rem;font-weight:500;line-height:1;
  color:var(--mac-tx);white-space:nowrap;transition:background .12s}
html[data-qps="5"] .mac-mi:hover{background:rgba(255,255,255,.4)}
html[data-qps="5"][data-theme="dark"] .mac-mi:hover{background:rgba(255,255,255,.14)}
html[data-qps="5"] .mac-logo{padding:0 6px;height:28px}   /* pt-mac-logo-groesser-v1 */
/* pt-mac-suche-v1: .start-logo ist fuer das grosse Logo ueber dem Titel
   gebaut und bringt aspect-ratio und margin:0 auto -18px mit. Der
   negative Rand zog das kleine Logo nach oben aus dem Balken heraus --
   beides wird hier zurueckgenommen. */
html[data-qps="5"] .mac-logo img{
  height:24px;width:auto;display:block;margin:0;aspect-ratio:auto}
/* pt-mac-lupe-v1: Die Lupe ist jetzt eine Zeichnung. display:block am
   svg nimmt ihm die Grundlinie der Schrift -- sonst saesse es ein paar
   Pixel zu hoch in der Zeile. */
html[data-qps="5"] .mac-lupe{padding:0 9px}
html[data-qps="5"] .mac-lupe svg{display:block}
/* pt-mac-marke-v1: Der Programmname in der Rahmenfarbe des Profils --
   dieselbe Kette wie jede andere Farbflaeche dieses Aufbaus. */
html[data-qps="5"] .mac-marke{
  padding:0 10px 0 4px;font-size:.78rem;font-weight:700;letter-spacing:.01em;
  color:var(--mac-akz);white-space:nowrap}
/* Der Profilknopf zeigt Bild und Name, wie der Chip der Kopfzeile. Die
   Karte darin ist fuer die Kopfzeile gebaut und braucht hier weder
   Rahmen noch Flaeche. */
html[data-qps="5"] .mac-profil{max-width:190px;overflow:hidden}
html[data-qps="5"] .mac-profil .header-user-card{
  background:none;border:0;padding:0;box-shadow:none;gap:6px;font-size:.76rem}
html[data-qps="5"] .mac-profil .huc-av{width:18px;height:18px;font-size:.6rem}
html[data-qps="5"] .mac-profil #headerUserName{font-size:.76rem;color:var(--mac-tx)}
/* pt-mac-kalender-v1: Die Uhr ist ein Knopf geworden und traegt .mac-mi
   mit -- Hoehe, Innenabstand, Farbe und Hover kommen von dort. Hier
   bleibt nur, was sie von den uebrigen Punkten unterscheidet. */
html[data-qps="5"] .mac-zeit{gap:8px;font-variant-numeric:tabular-nums}
html[data-qps="5"] .mac-zeit b{font-weight:600}

/* Der Kalender in der Menueschicht. */
html[data-qps="5"] .mac-kal-kopf{display:flex;align-items:center;gap:4px;padding:2px 2px 6px}
html[data-qps="5"] .mac-kal-mon{
  flex:1;min-width:0;padding:4px;border:0;border-radius:7px;background:none;cursor:pointer;
  font-family:inherit;font-size:.78rem;font-weight:600;color:var(--mac-tx);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-qps="5"] .mac-kal-pf{
  width:24px;height:24px;flex:0 0 auto;padding:0;border:0;border-radius:7px;
  background:none;cursor:pointer;font-family:inherit;font-size:1rem;line-height:1;
  color:var(--mac-tx)}
html[data-qps="5"] .mac-kal-pf:hover,html[data-qps="5"] .mac-kal-mon:hover{background:rgba(255,255,255,.45)}
html[data-qps="5"][data-theme="dark"] .mac-kal-pf:hover,
html[data-qps="5"][data-theme="dark"] .mac-kal-mon:hover{background:rgba(255,255,255,.14)}
html[data-qps="5"] .mac-kal{
  display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:0 2px 2px;
  font-variant-numeric:tabular-nums}
html[data-qps="5"] .mac-kal span{
  display:flex;align-items:center;justify-content:center;height:28px;
  border-radius:7px;font-size:.74rem;color:var(--mac-tx)}
html[data-qps="5"] .mac-kal .mac-kal-wt{
  font-size:.6rem;opacity:.55;text-transform:uppercase;letter-spacing:.05em;height:20px}
html[data-qps="5"] .mac-kal .mac-kal-t.we{opacity:.58}
html[data-qps="5"] .mac-kal .mac-kal-t.heute{
  background:var(--mac-akz);color:#fff;font-weight:700;opacity:1}

/* ---- Menue unter der Leiste ---- */
html[data-qps="5"] .mac-menu{
  /* pt-mac-oben-v1: fest statt absolut und weit oben -- das Menue haengt
     am body und muss ueber ein offenes App-Fenster (9550) reichen, aber
     unter das Inventar (9700) bleiben. */
  position:fixed;top:34px;width:268px;max-height:70vh;overflow:auto;
  padding:5px;pointer-events:auto;z-index:9590;
  background:var(--mac-glas-k);border:1px solid var(--mac-linie);border-radius:12px;
  box-shadow:var(--mac-schatten),var(--mac-saum);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  backdrop-filter:blur(30px) saturate(180%);
  color:var(--mac-tx)}
html[data-qps="5"] .mac-me-kopf{
  padding:5px 9px 6px;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mac-tx-leise)}
html[data-qps="5"] .mac-me-tr{height:1px;margin:4px 6px;background:var(--mac-linie)}
html[data-qps="5"] .mac-me{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  width:100%;padding:6px 9px;border:0;border-radius:7px;background:none;cursor:pointer;
  font-family:inherit;font-size:.8rem;text-align:left;color:var(--mac-tx)}
html[data-qps="5"] .mac-me:hover:not(:disabled){background:var(--mac-akz);color:#fff}
html[data-qps="5"] .mac-me:hover:not(:disabled) .mac-me-u{color:rgba(255,255,255,.8)}
html[data-qps="5"] .mac-me:disabled{opacity:.4;cursor:default}
html[data-qps="5"] .mac-me.an{font-weight:700}
html[data-qps="5"] .mac-me.an .mac-me-h::before{content:'✓ ';margin-left:-13px}
html[data-qps="5"] .mac-me-h{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* pt-mac-design-v2: Die drei Gruppen des Design-Menues. Die aufgeklappte
   traegt die Rahmenfarbe, ihre Eintraege ruecken ein -- so ist zu sehen,
   was zu welcher Gruppe gehoert, ohne eine Linie dazwischen. */
html[data-qps="5"] .mac-me-grp{font-weight:600}
html[data-qps="5"] .mac-me-grp.auf{color:var(--mac-akz)}
html[data-qps="5"] .mac-me-grp .mac-me-u{opacity:.7}
html[data-qps="5"] .mac-me-sub{padding-left:10px}
/* pt-mac-design-v3: Die ausgeklappte Liste neben dem Menue. Sie traegt
   dieselbe Glasflaeche wie das Menue (Klasse mac-menu) und liegt eine
   Stufe darueber -- sie kommt zeitlich nach ihm und soll es nicht
   unterlaufen. Ihren Platz rechnet macDesignAuf() aus; hier steht nur,
   dass er von oben und links gemessen wird. */
html[data-qps="5"] .mac-menu-sub{top:34px;z-index:9591}
html[data-qps="5"] .mac-me-u{flex:0 0 auto;font-size:.68rem;color:var(--mac-tx-leise)}

/* ---- Schreibtisch ---- */
/* pt-mac-wappen-v1: Das Logo in der Mitte, deckungsgleich mit dem
   Schreibtisch. Es faengt nichts ab und liegt darunter -- der
   Schreibtisch kommt im Markup spaeter, seine Symbole deshalb obenauf. */
html[data-qps="5"] .mac-wz{
  position:absolute;left:12px;right:12px;top:38px;bottom:108px;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none}
/* pt-mac-wappen-v3: Vor einem eigenen Wallpaper tritt das Logo ab -- es
   staende mitten im Motiv. data-bg setzt die Hintergrundschicht selbst
   und steht auf "on", sobald ein Bild ODER ein Video liegt; die Regel
   gilt damit fuer beide, ohne von ihnen zu wissen. */
html[data-qps="5"][data-bg="on"] .mac-wz{display:none}
html[data-qps="5"] .mac-wz img{
  width:clamp(120px,15vw,210px);height:auto;aspect-ratio:auto;margin:0;
  opacity:.92;filter:drop-shadow(0 10px 26px rgba(10,16,30,.18))}
html[data-qps="5"] .mac-desk{
  position:absolute;left:12px;right:12px;top:38px;bottom:108px;
  pointer-events:auto}
html[data-qps="5"] .mac-dsk{
  position:absolute;width:88px;padding:6px 2px;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  border-radius:10px;cursor:pointer;
  touch-action:none;transition:background .12s}
html[data-qps="5"] .mac-dsk:hover{background:rgba(255,255,255,.22)}
html[data-qps="5"][data-theme="dark"] .mac-dsk:hover{background:rgba(255,255,255,.1)}
html[data-qps="5"] .mac-dsk.zieht{opacity:.35}
html[data-qps="5"] .mac-dsk-lbl{
  max-width:84px;font-size:.7rem;line-height:1.15;text-align:center;
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.65);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- Symbole ---- */
html[data-qps="5"] .mac-ico{
  width:52px;height:52px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border-radius:13px;overflow:hidden;
  box-shadow:0 5px 14px rgba(10,16,30,.28),inset 0 1px 0 rgba(255,255,255,.4)}
html[data-qps="5"] .mac-ico img{width:100%;height:100%;object-fit:cover;display:block}
/* pt-ico-platte-v1 ======================================================
   Die Platte hinter den App-Symbolen.

   Die Symbole sind freigestellte PNG; ohne Untergrund verschwimmen sie
   auf dem hellen Standard-Wallpaper. Die Platte liegt dahinter, nicht
   darum -- das Bild fuellt die Kachel weiter ganz aus, zu sehen ist sie
   nur dort, wo das PNG durchsichtig ist. Genau die Stellen waren das
   Problem.

   Ausgenommen sind die Kacheln, die schon eine eigene Flaeche haben:
   der Buchstabe (.mac-ico-txt), das Rastersymbol der Apps-App
   (.mac-ico-apps) und die Systemsymbole (.mac-ico-sys). Eine zweite
   Flaeche darunter waere dort nie zu sehen und nur Ballast.

   Die Farbe kommt aus der Rahmenfarbe des Profils und bleibt
   halbdurchsichtig -- wie jede andere Flaeche der Oberflaeche. */
html[data-icoplatte="an"] .mac-ico:not(.mac-ico-txt):not(.mac-ico-apps):not(.mac-ico-sys){
  background:color-mix(in srgb,
    var(--accent,var(--static-frame,#4aa8e0)) 12%,rgba(255,255,255,.88))}
html[data-icoplatte="an"][data-theme="dark"] .mac-ico:not(.mac-ico-txt):not(.mac-ico-apps):not(.mac-ico-sys){
  background:color-mix(in srgb,
    var(--accent,var(--static-frame,#4aa8e0)) 22%,rgba(26,30,38,.88))}

/* Die Zeile mit dem Schalter in der Design-App. */
html[data-qps="5"] .h5-dschalt{
  display:flex;align-items:center;gap:12px;margin-top:10px;
  padding:11px 13px;border-radius:12px;
  background:var(--mac-glas-k);border:1px solid var(--mac-linie);
  color:var(--mac-tx)}
html[data-qps="5"] .h5-dschalt-txt{flex:1;min-width:0;line-height:1.35}
html[data-qps="5"] .h5-dschalt-txt b{display:block;font-size:.88rem}
html[data-qps="5"] .h5-dschalt-txt span{font-size:.75rem;opacity:.75}
/* /pt-ico-platte-v1 ----------------------------------------------------- */
html[data-qps="5"] .mac-ico-txt{
  font-size:.82rem;font-weight:700;letter-spacing:.02em;color:#fff;
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--mac-mc,#4aa8e0) 92%,#fff),
    color-mix(in srgb,var(--mac-mc,#4aa8e0) 74%,#000))}
/* Das Zeichen der Apps-App: neun Punkte, wie ein Raster von Kacheln. */
html[data-qps="5"] .mac-ico-apps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:11px;
  background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(228,234,244,.7))}
html[data-qps="5"][data-theme="dark"] .mac-ico-apps{
  background:linear-gradient(160deg,rgba(86,94,112,.9),rgba(40,46,60,.85))}
/* pt-mac-suche-v1: aspect-ratio:1 -- leere Elemente in einem Raster
   bekommen eine Breite, aber keine Hoehe. Ohne das blieb die Kachel leer. */
html[data-qps="5"] .mac-ico-apps i{
  display:block;aspect-ratio:1;border-radius:2px;background:var(--mac-akz);opacity:.9}

/* ---- Dock ---- */
html[data-qps="5"] .mac-dock-wrap{
  /* pt-mac-dock-ebene-v1: ueber die Add-on-Ebene (9510). Der Name unter
     dem Mauszeiger lag sonst dahinter. Unter der Menueleiste (9590) --
     die bleibt oben. */
  z-index:9520;
  position:absolute;left:0;right:0;bottom:12px;
  display:flex;justify-content:center;pointer-events:none}
/* inline-flex: Die Leiste ist so breit wie ihr Inhalt und waechst und
   schrumpft deshalb von selbst mit der Zahl der Symbole. */
html[data-qps="5"] .mac-dock{
  display:inline-flex;align-items:flex-end;gap:8px;padding:7px 9px;
  pointer-events:auto;max-width:calc(100vw - 40px);overflow:visible;
  background:var(--mac-glas-k);border:1px solid var(--mac-linie);border-radius:22px;
  box-shadow:var(--mac-schatten),var(--mac-saum);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  backdrop-filter:blur(30px) saturate(180%)}
/* pt-mac-dock-sort-v1: touch-action:none -- ohne das nimmt der Browser den
   Zug auf einem Zeigegeraet mit Finger als Wischen und schickt keine
   pointermove-Ereignisse. */
html[data-qps="5"] .mac-app{
  position:relative;padding:0;border:0;background:none;cursor:pointer;
  display:flex;align-items:flex-end;touch-action:none;
  transition:transform .16s cubic-bezier(.3,1.4,.5,1)}
html[data-qps="5"] .mac-app.zieht{opacity:.35}
html[data-qps="5"] .mac-app.zieht .mac-tip{display:none}
html[data-qps="5"] .mac-app:hover{transform:translateY(-9px) scale(1.12)}
/* pt-mac-dock-punkt-weg-v1: kein Punkt unter der Apps-App. */
html[data-qps="5"] .mac-tip{
  position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%);
  padding:3px 9px;border-radius:7px;white-space:nowrap;pointer-events:none;
  font-size:.72rem;color:var(--mac-tx);opacity:0;transition:opacity .12s;
  background:var(--mac-glas-k);border:1px solid var(--mac-linie);
  box-shadow:var(--mac-saum);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%)}
html[data-qps="5"] .mac-app:hover .mac-tip{opacity:1}

/* ---- Fenster "Apps" ---- */
html[data-qps="5"] .mac-fenster{
  /* pt-mac-oben-v1: wie das Menue -- fest, am body, ueber dem
     App-Fenster und unter dem Inventar. */
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(620px,calc(100vw - 40px));max-height:min(560px,calc(100vh - 120px));
  display:flex;flex-direction:column;pointer-events:auto;z-index:9580;
  background:var(--mac-glas-k);border:1px solid var(--mac-linie);border-radius:16px;
  box-shadow:var(--mac-schatten),var(--mac-saum);
  -webkit-backdrop-filter:blur(34px) saturate(180%);
  backdrop-filter:blur(34px) saturate(180%);
  color:var(--mac-tx);overflow:hidden}
html[data-qps="5"] .mac-f-kopf{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-bottom:1px solid var(--mac-linie);cursor:move;touch-action:none}
html[data-qps="5"] .mac-f-titel{flex:1;font-size:.82rem;font-weight:600;text-align:center}
html[data-qps="5"] .mac-f-zu{
  width:13px;height:13px;flex:0 0 auto;padding:0;border:0;border-radius:50%;
  background:#ff5f57;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
html[data-qps="5"] .mac-f-zu:hover{background:#ff3b30}
html[data-qps="5"] .mac-f-btn{
  padding:3px 10px;border:1px solid var(--mac-linie);border-radius:7px;cursor:pointer;
  font-family:inherit;font-size:.72rem;color:var(--mac-tx);
  background:rgba(255,255,255,.34)}
html[data-qps="5"][data-theme="dark"] .mac-f-btn{background:rgba(255,255,255,.1)}
html[data-qps="5"] .mac-f-btn:hover{background:rgba(255,255,255,.6)}
html[data-qps="5"][data-theme="dark"] .mac-f-btn:hover{background:rgba(255,255,255,.2)}
html[data-qps="5"] .mac-f-btn.an{background:var(--mac-akz);border-color:transparent;color:#fff}
html[data-qps="5"] .mac-f-leib{
  flex:1;min-height:0;overflow:auto;padding:12px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
html[data-qps="5"] .mac-f-fuss{
  flex:0 0 auto;padding:7px 12px;border-top:1px solid var(--mac-linie);
  font-size:.7rem;color:var(--mac-tx-leise)}
html[data-qps="5"] .mac-kachel{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:9px 4px;border-radius:11px;cursor:grab;touch-action:none;
  transition:background .12s}
html[data-qps="5"] .mac-kachel:hover{background:rgba(255,255,255,.4)}
html[data-qps="5"][data-theme="dark"] .mac-kachel:hover{background:rgba(255,255,255,.12)}
html[data-qps="5"] .mac-k-lbl{
  max-width:100%;font-size:.7rem;line-height:1.15;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-qps="5"] .mac-k-wo{display:flex;flex-wrap:wrap;gap:3px;justify-content:center}
html[data-qps="5"] .mac-wo{
  display:inline-flex;align-items:center;gap:2px;
  padding:1px 6px;border-radius:999px;font-size:.6rem;
  background:color-mix(in srgb,var(--mac-akz) 24%,transparent);
  color:var(--mac-tx)}
html[data-qps="5"] .mac-weg{
  width:13px;height:13px;padding:0;border:0;border-radius:50%;cursor:pointer;
  line-height:1;font-size:.62rem;background:rgba(0,0,0,.18);color:inherit}
html[data-qps="5"] .mac-weg:hover{background:#ff3b30;color:#fff}
html[data-qps="5"] .mac-k-werk{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}

/* ---- Suche ----
   pt-mac-suche-v1: Hier stand eine eigene Suchzeile mitten auf dem
   Schreibtisch. Sie war nicht nur eine Suche zu viel, sie liess sich auch
   nicht schliessen: display:flex einer Klassenregel schlaegt das Merkmal
   hidden, das der Browser nur mit der Kraft seines eigenen Stylesheets
   setzt.

   Gesucht wird jetzt in der Schicht, die Umschalt+W ohnehin oeffnet. Sie
   traegt ihre Farben als inline-Stil im Markup; anders als mit !important
   ist dagegen nicht anzukommen. Das gilt eng begrenzt fuer diesen Aufbau
   auf der Startseite und nirgends sonst -- ueberall anders bleibt die
   Schicht, wie sie war. */
html[data-qps="5"][data-active-page="start"] #globalSearchOverlay{
  background:rgba(8,12,22,.3) !important;
  padding-top:18vh !important;
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px)}
html[data-qps="5"][data-active-page="start"] #globalSearchOverlay > .modal{
  padding:0 !important;
  background:var(--mac-glas-k) !important;
  border:1px solid var(--mac-linie) !important;
  border-radius:16px !important;
  box-shadow:var(--mac-schatten),var(--mac-saum) !important;
  -webkit-backdrop-filter:blur(34px) saturate(180%);
  backdrop-filter:blur(34px) saturate(180%);
  color:var(--mac-tx);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif}
/* pt-suche-shift-v1: Die Trennlinie sass unter der Eingabezeile und stand
   auch dann da, wenn darunter nichts kam. Sie sitzt jetzt oben an der
   Trefferliste und erscheint nur, wenn diese etwas enthaelt -- getrennt
   wird, was auch da ist. */
html[data-qps="5"][data-active-page="start"] #globalSearchOverlay > .modal > div:first-child{
  padding:10px 14px !important;
  border-bottom:0 !important}
html[data-qps="5"][data-active-page="start"] #gsResults:not(:empty){
  border-top:1px solid var(--mac-linie)}
html[data-qps="5"][data-active-page="start"] #gsInput{
  font-size:1.05rem !important;color:var(--mac-tx) !important}
html[data-qps="5"][data-active-page="start"] #gsInput::placeholder{
  color:var(--mac-tx-leise)}
html[data-qps="5"][data-active-page="start"] #gsResults{
  max-height:56vh !important}

/* ---- Der Geist beim Ziehen ---- */
.mac-geist{
  position:fixed;z-index:9800;pointer-events:none;opacity:.85;
  transform:scale(1.05)}
.mac-geist .mac-ico{
  width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  border-radius:13px;overflow:hidden;box-shadow:0 10px 24px rgba(10,16,30,.4)}
.mac-geist .mac-ico img{width:100%;height:100%;object-fit:cover}
.mac-geist .mac-ico-txt{
  font-size:.82rem;font-weight:700;color:#fff;
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--mac-mc,#4aa8e0) 92%,#fff),
    color-mix(in srgb,var(--mac-mc,#4aa8e0) 74%,#000))}
.mac-geist .mac-ico-apps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:11px;
  background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(228,234,244,.7))}
.mac-geist .mac-ico-apps i{
  display:block;aspect-ratio:1;border-radius:2px;background:#4aa8e0}   /* pt-mac-suche-v1 */
/* /pt-mac-startseite-v1 ------------------------------------------------- */

/* pt-mac-fenster-v1 -----------------------------------------------------
   Ein Tab oeffnet sich in Aufbau 5 als Fenster ueber dem Schreibtisch.

   Geschaltet wird ueber html[data-qps="5"] -- dieselbe Kennung, die den
   gezeichneten Aufbau nennt. Sie bleibt stehen, solange der Slot aktiv
   ist, also auch auf jeder anderen Seite; eine zweite Kennung fuer
   denselben Zustand waere eine, die abweichen kann.

   Das Fenster IST die Seite: dieselbe .page, nur mit festen Raendern,
   Rahmen und eigener Rollflaeche. Die Titelzeile liegt buendig darueber
   als eigenes Element (#macWinBar) -- Seiten, die ihren Inhalt neu
   schreiben, wuerden einen eingehaengten Kopf mitnehmen. */
html[data-qps="5"]{
  --mac-win-x:clamp(14px,5vw,90px);
  --mac-win-max:1240px;
}
/* Kopfzeile, Fusszeile und Verzeichnislasche treten ab -- auf JEDER
   Seite, nicht nur auf der Startseite. Der Moduswechsel aus der
   Kopfzeile steht dafuer in der Menueleiste. */
html[data-qps="5"] .header,
html[data-qps="5"] #ptFooter,
html[data-qps="5"] #kbSideHandle{display:none !important}

/* Der Schreibtisch im Hintergrund: hier voll sichtbar und bedienbar.
   Die allgemeine Regel des Hintergrundbetriebs daempft ihn auf 40 % und
   nimmt ihm jeden Zugriff -- richtig fuer eine Schicht, die nur noch
   Bild ist, falsch fuer ein Dock, ueber das die naechste App geoeffnet
   wird. z-index:0 statt -1: unter dem Fenster, aber nicht hinter dem
   Fluss. */
html[data-qps="5"][data-qps-bg="1"] #page-start{z-index:0;opacity:1}
html[data-qps="5"][data-qps-bg="1"] #page-start .qps-ovl-5 > *,
html[data-qps="5"][data-qps-bg="1"] #page-start .qps-ovl-5 > * *{
  pointer-events:auto !important}
/* Das Logo in der Mitte bleibt ein Bild und faengt weiter nichts ab.
   pt-h5-wappen-v1: dasselbe fuer die Telefonfassung (.h5-wz) -- ohne sie
   holte die Regel darueber (> * *) auch sie ins Bedienbare zurueck. */
html[data-qps="5"][data-qps-bg="1"] #page-start .mac-wz,
html[data-qps="5"][data-qps-bg="1"] #page-start .mac-wz *,
html[data-qps="5"][data-qps-bg="1"] #page-start .h5-wz,
html[data-qps="5"][data-qps-bg="1"] #page-start .h5-wz *{
  pointer-events:none !important}

/* Die Titelzeile. Der rote Punkt ist derselbe wie am Apps-Fenster. */
html[data-qps="5"] .mac-win-bar{
  position:fixed;z-index:51;
  top:40px;left:var(--mac-win-x);right:var(--mac-win-x);
  max-width:var(--mac-win-max);margin:0 auto;height:36px;
  display:flex;align-items:center;gap:10px;padding:0 12px;
  border:1px solid var(--mac-linie);border-bottom:0;border-radius:14px 14px 0 0;
  background:var(--mac-glas-k);
  box-shadow:0 -1px 0 rgba(0,0,0,0),var(--mac-saum);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  backdrop-filter:blur(30px) saturate(180%);
  color:var(--mac-tx);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif}
/* pt-mac-ampel-v1: Der Innenabstand rechts entspricht der Breite der
   Ampel (3 x 13 px + 2 x 8 px Luecke) -- nur so steht der Titel wirklich
   in der Mitte der Zeile und nicht in der Mitte des Restes. */
html[data-qps="5"] .mac-win-titel{
  flex:1;min-width:0;text-align:center;padding-right:55px;
  font-size:.82rem;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-qps="5"] .mac-ampel{display:flex;align-items:center;gap:8px;flex:0 0 auto}
html[data-qps="5"] .mac-ampel button{
  width:13px;height:13px;flex:0 0 auto;padding:0;border:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-family:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
html[data-qps="5"] .mac-win-bar .mac-f-zu{background:#ff5f57}
html[data-qps="5"] .mac-win-bar .mac-f-zu:hover{background:#ff3b30}
html[data-qps="5"] .mac-f-min{background:#febc2e}
html[data-qps="5"] .mac-f-min:hover{background:#f5aa00}
html[data-qps="5"] .mac-f-max{background:#28c840}
html[data-qps="5"] .mac-f-max:hover{background:#12b02a}
/* Die Zeichen erscheinen erst unter dem Zeiger -- und nur in dieser
   Ampel: Denselben roten Punkt traegt auch das Fenster "Apps". */
html[data-qps="5"] .mac-ampel button::after{
  opacity:0;font-size:.62rem;line-height:1;color:rgba(0,0,0,.55);
  transition:opacity .1s}
html[data-qps="5"] .mac-ampel:hover button::after{opacity:1}
html[data-qps="5"] .mac-ampel .mac-f-zu::after{content:'×'}
html[data-qps="5"] .mac-ampel .mac-f-min::after{content:'–'}
html[data-qps="5"] .mac-ampel .mac-f-max::after{content:'+'}

/* Vergroessert: bis an die Raender, nur die Menueleiste bleibt frei.
   Die Titelzeile bleibt stehen -- ohne sie gaebe es keinen Weg zurueck. */
html[data-qps="5"][data-mac-max="1"] .mac-win-bar{
  top:30px;left:0;right:0;max-width:none;
  border-radius:0;border-left:0;border-right:0;
  z-index:9551}   /* pt-mac-max-oben-v1 */
html[data-qps="5"][data-mac-max="1"] .page.active:not(#page-start){
  top:66px;bottom:0;left:0;right:0;max-width:none;
  border-radius:0;border-left:0;border-right:0;border-bottom:0;
  /* pt-mac-max-oben-v1: ueber die Bilderebene (9500), aber unter das
     Geisterbild (9600) und das Inventar (9700) -- wer Bilder legt, muss
     sie auch ueber dem grossen Fenster noch anfassen koennen. In
     normaler Groesse bleibt das Fenster darunter; die Bilder liegen dann
     wie gewohnt obenauf. */
  z-index:9550}
/* Dialoge und Hinweise steigen mit: Sie stuenden sonst hinter den
   Fenstern des Schreibtischs, und wer aus ihnen heraus die Mediathek
   oeffnet, saehe nichts. Unter der Rueckfrage (9800) bleiben sie -- die
   wird aus einem Dialog heraus gestellt.

   pt-mac-dialog-oben-v1: Die Anhebung galt zuerst nur fuer das
   VERGROESSERTE App-Fenster. Das Fenster "Apps" ist aber ein eigenes
   Fenster (.mac-fenster, z-index 9580) und war davon nicht erfasst --
   die Mediathek oeffnete sich dahinter, und neue Symbole liessen sich
   nicht hochladen. Die Regel gilt deshalb jetzt fuer den ganzen
   Schreibtisch, nicht nur fuer den vergroesserten Zustand.

   Mit angehoben wird das Fenster mit der Wirkstoffdosis aus der
   Wissensdatenbank: Es lag auf 9000 und haette denselben Fehler. */
html[data-qps="5"] .modal-overlay{z-index:9760}
/* pt-mac-dialog-oben-v2: Zwei Dialoge stehen bewusst UEBER den anderen
   und tragen dafuer ausserhalb des Schreibtischs 260 statt 200. Als id
   geschrieben schlugen sie die Regel darueber -- die Tafel mit den
   Effekt-Proben lag dadurch hinter dem Bearbeiten-Fenster, und
   auswaehlen ging nicht mehr. Dieselbe Ordnung, eine Etage hoeher.
   Wer hier kuenftig eine Ebene anhebt, prueft diese beiden mit. */
html[data-qps="5"] #effWahlModal,
html[data-qps="5"] #kontoWechselModal{z-index:9770}
html[data-qps="5"] .toast{z-index:9790}
html[data-qps="5"] .kb-ws-fenster{z-index:9700}

/* Das Fenster. Die Flaeche traegt Text und ist deshalb deutlich
   deckender als die Leisten -- Glas ist hier Rahmen, nicht Grund. */
html[data-qps="5"] .page.active:not(#page-start){
  position:fixed;z-index:50;
  top:76px;bottom:96px;left:var(--mac-win-x);right:var(--mac-win-x);
  max-width:var(--mac-win-max);margin:0 auto;
  padding:20px;overflow:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--mac-linie);border-top:0;border-radius:0 0 14px 14px;
  /* pt-mac-fenster-v2: durchscheinend, damit der Schreibtisch dahinter zu
     ahnen ist. Der Weichzeichner bleibt -- er haelt die Schrift lesbar,
     ohne ihn liefe Text ueber Kanten und Muster des Bildes. */
  background:rgba(255,255,255,.74);
  box-shadow:var(--mac-schatten);
  -webkit-backdrop-filter:blur(32px) saturate(170%);
  backdrop-filter:blur(32px) saturate(170%)}
html[data-qps="5"][data-theme="dark"] .page.active:not(#page-start){
  background:rgba(22,26,35,.78)}   /* pt-mac-fenster-v2 */
/* /pt-mac-fenster-v1 ---------------------------------------------------- */

/* pt-handy5-v1 ==========================================================
   Aufbau 5 am Telefon: Raster, Dock, Suchzeile.

   Alles haengt an html[data-qps="5"] wie die Schreibtischfassung und
   nutzt deren Glasfarben (--mac-glas-k, --mac-linie, --mac-tx) -- eine
   Oberflaeche, zwei Groessen. Die Symbole selbst kommen unveraendert aus
   .mac-ico; hier stehen nur Groesse und Rundung des Telefons.

   env(safe-area-inset-*) an Ober- und Unterkante: Auf dem Telefon liegen
   dort Notch und Streifen. Ohne die Werte staende die erste Reihe unter
   der Uhr und das Dock auf dem Streifen. */
/* pt-h5-seiten-v1: Die Randabstaende sind an den Behaelter der drei
   Seiten gewandert (.h5-seiten) -- das Raster fuellt jetzt seine Seite
   aus. touch-action:pan-x laesst den Browser waagrecht blaettern und
   sperrt senkrecht; nur so ueberlebt das Halten, das den
   Anordnen-Modus weckt. */
html[data-qps="5"] .h5-screen{
  /* pt-h5-seiten-v3: 104 px nach unten frei -- zusammen mit den 12 px
     des Behaelters wieder die 116 px, ueber denen das Dock steht. */
  position:absolute;left:0;right:0;top:0;bottom:104px;
  pointer-events:auto;touch-action:pan-x;overflow:hidden}
html[data-qps="5"] .h5-fach{
  position:absolute;width:25%;display:flex;justify-content:center}
html[data-qps="5"] .h5-app{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding-top:8px;touch-action:pan-x;cursor:pointer;   /* pt-h5-seiten-v1 */
  -webkit-user-select:none;user-select:none}
html[data-qps="5"] .h5-app .mac-ico{
  width:60px;height:60px;border-radius:15px}
html[data-qps="5"] .h5-app .mac-ico-txt{font-size:.95rem}
html[data-qps="5"] .h5-app.zieht{opacity:.3}
html[data-qps="5"] .h5-ico-wrap{position:relative;display:block;line-height:0}
html[data-qps="5"] .h5-lbl{
  max-width:84px;font-size:.7rem;line-height:1.3;text-align:center;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.7);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- Dock ---- */
html[data-qps="5"] .h5-dock{
  /* pt-handy5-v12: So breit wie sein Inhalt und mittig -- dann ist der
     Abstand ringsum derselbe (12 px) und wird nicht aus dem freien Platz
     gerechnet. Ueber die ganze Breite gezogen war er an den Seiten immer
     ein anderer als oben. */
  position:absolute;left:50%;right:auto;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom,0px) + 12px);
  max-width:calc(100% - 20px);
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  padding:12px;pointer-events:auto;
  background:var(--mac-glas-k);border:1px solid var(--mac-linie);border-radius:28px;
  box-shadow:var(--mac-schatten),var(--mac-saum);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  backdrop-filter:blur(30px) saturate(180%)}
html[data-qps="5"] .h5-dock .h5-app{padding-top:0}

/* ---- Suchzeile ---- */
/* Ueber die ganze Breite, am Raster ausgerichtet: Ihre Zeile steht in
   hsuch, die Hoehe kommt aus der Zeilenhoehe des Rasters. */
html[data-qps="5"] .h5-such{
  position:absolute;left:10px;right:10px;height:46px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  border-radius:15px;pointer-events:auto;touch-action:pan-x;cursor:pointer;
  font-size:.92rem;color:var(--mac-tx);
  background:var(--mac-glas-k);border:1px solid var(--mac-linie);
  box-shadow:var(--mac-saum);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%)}
html[data-qps="5"] .h5-such.zieht{opacity:.75;transform:scale(1.02)}
html[data-qps="5"] .h5-such-i{display:flex;opacity:.7}

/* ---- Bearbeiten ---- */
@keyframes h5Wackel{
  0%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}100%{transform:rotate(-1.2deg)}}
html[data-qps="5"] .h5-ovl.bearb .h5-app{animation:h5Wackel .3s linear infinite}
html[data-qps="5"] .h5-ovl.bearb .h5-fach:nth-child(2n) .h5-app{animation-delay:.08s}
html[data-qps="5"] .h5-ovl.bearb .h5-app.zieht{animation:none}
@media (prefers-reduced-motion:reduce){
  html[data-qps="5"] .h5-ovl.bearb .h5-app{animation:none}}
html[data-qps="5"] .h5-weg{
  position:absolute;left:-7px;top:-7px;width:23px;height:23px;padding:0;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:rgba(38,42,52,.94);color:#fff;
  font-size:1.05rem;line-height:1;cursor:pointer;z-index:2;
  box-shadow:0 2px 7px rgba(0,0,0,.45)}
html[data-qps="5"] .h5-fertig{
  position:absolute;right:12px;top:calc(env(safe-area-inset-top,0px) + 12px);
  /* pt-h5-bar-oben-v1: ueber die Titelzeile (4) -- er liegt an
     derselben Stelle und verschwaende sonst beim Anordnen. */
  display:none;pointer-events:auto;z-index:6;cursor:pointer;
  padding:7px 17px;border-radius:14px;border:1px solid var(--mac-linie);
  background:var(--mac-glas-k);color:var(--mac-tx);font-size:.85rem;font-weight:600;
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%)}
html[data-qps="5"] .h5-ovl.bearb .h5-fertig{display:block}

/* ---- Geist beim Ziehen ---- */
html[data-qps="5"] .h5-geist .mac-ico{width:68px;height:68px;border-radius:17px}

/* ---- Das Fenster "Apps" ---- */
/* z-index 9750: ueber der Startseite und ihren Fenstern, aber UNTER den
   Dialogen (9760). Die Mediathek ist ein Dialog und wird aus diesem
   Fenster heraus geoeffnet -- laege sie darunter, waere sie nicht
   erreichbar. */
html[data-qps="5"] .h5-apps{
  position:fixed;inset:0;z-index:9750;display:flex;flex-direction:column;
  color:var(--mac-tx);background:var(--mac-glas-k);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  backdrop-filter:blur(30px) saturate(180%)}
html[data-qps="5"] .h5-apps-kopf{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 10px;
  font-size:1.05rem;border-bottom:1px solid var(--mac-linie)}
html[data-qps="5"] .h5-apps-git{
  flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(2,1fr);
  gap:10px;padding:12px}
html[data-qps="5"] .h5-kachel{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:10px 6px;border-radius:14px;
  background:var(--mac-glas);border:1px solid var(--mac-linie)}
html[data-qps="5"] .h5-k-ico{border:0;background:none;padding:0;cursor:pointer;line-height:0}
html[data-qps="5"] .h5-k-ico .mac-ico{width:54px;height:54px;border-radius:14px}
html[data-qps="5"] .h5-k-lbl{
  font-size:.76rem;text-align:center;line-height:1.15;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
html[data-qps="5"] .h5-k-werk{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
html[data-qps="5"] .h5-btn{
  border:1px solid var(--mac-linie);border-radius:9px;padding:4px 10px;
  background:none;color:var(--mac-tx);font-size:.74rem;cursor:pointer}
html[data-qps="5"] .h5-btn.an{
  background:var(--mac-akz);border-color:transparent;color:#fff}
html[data-qps="5"] .h5-apps-fuss{
  padding:10px 16px calc(env(safe-area-inset-bottom,0px) + 14px);
  font-size:.74rem;color:var(--mac-tx-leise);border-top:1px solid var(--mac-linie)}

/* ---- Einstellungen und Profil als App ---- */
/* Beide sind keine Seite und haben deshalb kein Kuerzel, aus dem sich
   ein Textsymbol bauen liesse. Sie bekommen ein gezeichnetes Zeichen in
   der Rahmenfarbe -- und ein eigenes Bild, sobald eines gewaehlt ist. */
html[data-qps="5"] .mac-ico-sys{
  color:#fff;background:linear-gradient(160deg,
    color-mix(in srgb,var(--mac-akz) 88%,#fff),
    color-mix(in srgb,var(--mac-akz) 66%,#000))}
html[data-qps="5"] .mac-ico-av{font-size:1.4rem;font-weight:700}

/* pt-handy5-v2 ==========================================================
   Die Design-App. Sie leiht sich die Huelle des Fensters "Apps"
   (.h5-apps) -- derselbe Rahmen fuer dieselbe Art von Schicht -- und
   bringt nur mit, was ihre Karten brauchen. */
html[data-qps="5"] .h5-apps-leib{
  flex:1;overflow-y:auto;padding:12px 12px 4px}
html[data-qps="5"] .h5-dstd{width:100%;padding:9px;font-size:.84rem;font-weight:600}
html[data-qps="5"] .h5-dkopf{
  margin:16px 2px 8px;font-size:.78rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--mac-tx-leise)}
html[data-qps="5"] .h5-dgit{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:700px){
  html[data-qps="5"] .h5-dgit{grid-template-columns:repeat(4,1fr)}
  html[data-qps="5"] .h5-apps-git{grid-template-columns:repeat(4,1fr)}
  html[data-qps="5"] .h5-apps{left:50%;top:50%;right:auto;bottom:auto;
    transform:translate(-50%,-50%);width:min(720px,calc(100vw - 60px));
    height:min(720px,calc(100vh - 90px));border-radius:16px;
    border:1px solid var(--mac-linie);box-shadow:var(--mac-schatten);overflow:hidden}
}
html[data-qps="5"] .h5-dkarte{
  border:1px solid var(--mac-linie);border-radius:12px;overflow:hidden;
  background:var(--mac-glas)}
html[data-qps="5"] .h5-dkarte.an{
  border-color:var(--mac-akz);box-shadow:0 0 0 1px var(--mac-akz)}
html[data-qps="5"] .h5-dbild{
  position:relative;display:block;width:100%;height:78px;padding:0;border:0;
  cursor:pointer;overflow:hidden;
  background:linear-gradient(135deg,#1e242c,#2a3340)}
html[data-qps="5"] .h5-dbild img,
html[data-qps="5"] .h5-dbild video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
html[data-qps="5"] .h5-dan{
  position:absolute;right:5px;bottom:5px;padding:2px 7px;border-radius:7px;
  font-size:.62rem;font-weight:700;letter-spacing:.03em;
  background:var(--mac-akz);color:#fff}
html[data-qps="5"] .h5-dleer{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:.7rem;color:rgba(255,255,255,.6)}
html[data-qps="5"] .h5-dfuss{
  display:flex;align-items:center;gap:6px;padding:6px 8px}
html[data-qps="5"] .h5-dname{
  flex:1;min-width:0;font-size:.74rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-qps="5"] .h5-dstift{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:25px;height:25px;padding:0;cursor:pointer;
  border:1px solid var(--mac-linie);border-radius:8px;
  background:none;color:var(--mac-tx)}

/* pt-handy5-v4 ==========================================================
   Am Telefon steht eine geoeffnete App immer im Vollbild.

   Die Fensterfassung (pt-mac-fenster-v1) laesst links und rechts
   var(--mac-win-x) frei und setzt das Fenster zwischen Menueleiste und
   Dock. Auf 390 px Breite bleibt davon zu wenig uebrig: Inhalte, die
   nicht weiter schrumpfen koennen, stehen ueber der Kante.

   Beide Zustaende sind hier zusammengefasst -- mit und ohne
   data-mac-max. Der gruene Punkt schaltet am Telefon zwischen zwei
   gleichen Bildern; die Regel gilt deshalb fuer beide, und der Punkt
   selbst tritt ab. Die Aufzaehlung nennt die Fassung mit dem Attribut
   ausdruecklich: Ihre Regel weiter oben ist staerker und wuerde sonst
   gewinnen, Media Query hin oder her.

   Was bleibt, ist die Titelzeile: Der rote Punkt ist am Telefon der
   einzige Weg zurueck auf den Startbildschirm. */
@media (max-width:820px){
  html[data-qps="5"] .mac-win-bar,
  html[data-qps="5"][data-mac-max="1"] .mac-win-bar{
    top:0;left:0;right:0;max-width:none;
    height:calc(env(safe-area-inset-top,0px) + 38px);
    padding-top:env(safe-area-inset-top,0px);
    border-radius:0;border-left:0;border-right:0;
    z-index:9551}
  html[data-qps="5"] .mac-win-bar .mac-f-max{display:none}
  html[data-qps="5"] .mac-win-titel{padding-right:34px}
  html[data-qps="5"] .page.active:not(#page-start),
  html[data-qps="5"][data-mac-max="1"] .page.active:not(#page-start){
    top:calc(env(safe-area-inset-top,0px) + 38px);
    bottom:0;left:0;right:0;max-width:none;
    padding:14px 14px calc(env(safe-area-inset-bottom,0px) + 18px);
    border:0;border-radius:0;
    /* Vollbild heisst auch: kein Durchscheinen mehr. Hinter der Seite
       liegt nichts, was zu sehen waere, und deckend liest sich Text
       besser. */
    background:var(--c-bg);
    -webkit-backdrop-filter:none;backdrop-filter:none;
    z-index:9550}
}

/* pt-handy5-v5 ==========================================================
   Was das Verschieben am Telefon verhindert hat.

   Das Minus steht seit v5 immer im Markup und wird hier gezeigt und
   verborgen -- der Wackelmodus ist damit eine Klasse und kein
   Neuzeichnen. Und die Bilder in den Kacheln nehmen keine
   Zeigerereignisse mehr an: Ein langer Druck auf ein Bild ist in iOS
   die Geste fuer "Bild sichern", und die hat Vorrang vor allem, was
   eine Seite mit demselben Druck vorhaette. */
html[data-qps="5"] .h5-weg{display:none}
html[data-qps="5"] .h5-ovl.bearb .h5-weg{display:flex;pointer-events:auto}
html[data-qps="5"] .h5-app,
html[data-qps="5"] .h5-such{
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
  touch-action:none}
html[data-qps="5"] .h5-app .mac-ico,
html[data-qps="5"] .h5-app img,
html[data-qps="5"] .h5-app svg,
html[data-qps="5"] .h5-lbl,
html[data-qps="5"] .h5-such-i,
html[data-qps="5"] .h5-such span{pointer-events:none;-webkit-touch-callout:none}

/* Die beiden Rundknoepfe rechts unten gehoeren zu einem geoeffneten
   Eintrag der Wissensdatenbank und bleiben stehen, solange er offen
   ist -- auch auf der Startseite, wo sie nichts tun. Auf dem
   Startbildschirm dieses Aufbaus treten sie ab. In der geoeffneten App
   und bei der Standard-Startseite bleiben sie unveraendert. */
html[data-qps="5"][data-active-page="start"] #kbMobBtns{display:none !important}

/* pt-handy5-v6 ==========================================================
   Titelzeile am Startbildschirm und der Schliessen-Knopf im Fenster. */

/* Die Zeile ganz oben. Sie traegt pointer-events:none: Sie ist Anzeige,
   kein Bedienfeld -- ein Druck darauf soll nichts tun und nichts
   abfangen. */
html[data-qps="5"] .h5-bar{
  position:absolute;left:0;right:0;top:0;
  height:calc(env(safe-area-inset-top,0px) + 34px);
  padding:env(safe-area-inset-top,0px) 12px 0;
  /* pt-h5-bar-oben-v1: ueber die Seiten. Sie stehen im Markup spaeter
     und malten sich sonst darueber -- seit sie scrollen, wanderte ihr
     Inhalt ueber Logo und Schriftzug. */
  z-index:4;
  display:flex;align-items:center;gap:8px;pointer-events:none;
  background:var(--mac-glas);border-bottom:1px solid var(--mac-linie);
  box-shadow:var(--mac-saum);color:var(--mac-tx);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  backdrop-filter:blur(30px) saturate(180%)}
html[data-qps="5"] .h5-bar-img{
  /* pt-handy5-v8: margin und aspect-ratio ausdruecklich zurueck -- das
     Bild ist dasselbe wie auf der Startseite, und dort steht es mittig
     (margin:0 auto). In einer Zeile schoebe dieses auto das Logo in die
     Mitte und den Namen an den Rand. */
  width:28px;height:28px;min-width:28px;aspect-ratio:auto;   /* pt-handy5-v11 */
  margin:0;object-fit:contain;display:block;flex:0 0 auto}
html[data-qps="5"] .h5-bar-marke{
  font-size:.98rem;font-weight:700;letter-spacing:.01em;   /* pt-handy5-v11 */
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif}

/* pt-h5-wappen-v1 ========================================================
   Das Logo mittig auf dem Hintergrund -- am Telefon wie am Schreibtisch.

   Es steht im Markup vor den drei Seiten und traegt kein z-index: So
   malen Raster, Uebersicht und Verzeichnis darueber, und das Logo bleibt
   das, was es sein soll -- Hintergrund. Die Zeile oben liegt mit
   z-index:4 ohnehin darueber.

   Der untere Abstand von 124 px haelt es ueber dem Dock (12 + 104 = 116)
   samt ein paar Pixeln Luft; oben faengt es unter der Zeile an.

   Ausgeblendet wird es bei eigenem Hintergrundbild -- dieselbe
   Ueberlegung wie bei .mac-wz (pt-mac-wappen-v3): Wer sich ein Bild
   aussucht, will es sehen und nicht ein Logo darauf. */
html[data-qps="5"] .h5-wz{
  position:absolute;left:12px;right:12px;
  top:calc(env(safe-area-inset-top,0px) + 44px);
  bottom:calc(env(safe-area-inset-bottom,0px) + 124px);
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;transition:opacity .2s}
html[data-qps="5"][data-bg="on"] .h5-wz{display:none}
html[data-qps="5"] .h5-wz img{
  width:min(46vw,190px);height:auto;aspect-ratio:auto;margin:0;
  opacity:.92;filter:drop-shadow(0 10px 26px rgba(10,16,30,.18))}
/* Auf den Nachbarseiten tritt es ab -- genau wie das Dock, mit demselben
   Uebergang. Es gehoert zum Raster, nicht zu Uebersicht und Verzeichnis. */
html[data-qps="5"] .h5-ovl[data-seite="0"] .h5-wz,
html[data-qps="5"] .h5-ovl[data-seite="2"] .h5-wz{opacity:0}
/* /pt-h5-wappen-v1 ------------------------------------------------------ */
/* Das Raster faengt unter der Zeile an, und "Fertig" stellt sich neben
   sie statt darueber. */
html[data-qps="5"] .h5-screen{
  top:calc(env(safe-area-inset-top,0px) + 44px)}
html[data-qps="5"] .h5-fertig{
  top:calc(env(safe-area-inset-top,0px) + 4px);padding:5px 15px}

/* ---- Der Schliessen-Knopf ---- */
@media (max-width:820px){
  html[data-qps="5"] .mac-win-bar,
  html[data-qps="5"][data-mac-max="1"] .mac-win-bar{
    height:calc(env(safe-area-inset-top,0px) + 48px);
    padding:env(safe-area-inset-top,0px) 10px 0;gap:8px}
  html[data-qps="5"] .mac-win-bar .mac-ampel{display:none}
  html[data-qps="5"] .mac-win-titel{padding-right:0}
  html[data-qps="5"] .page.active:not(#page-start),
  html[data-qps="5"][data-mac-max="1"] .page.active:not(#page-start){
    top:calc(env(safe-area-inset-top,0px) + 48px)}
}
html[data-qps="5"] .mac-win-zu{
  position:relative;flex:0 0 auto;
  min-width:116px;height:38px;padding:0 18px;
  border:0;border-radius:12px;cursor:pointer;
  /* pt-handy5-v14: Rahmenfarbe statt des Ampelrots. Allein und
     beschriftet muss die Farbe nichts mehr unterscheiden. */
  background:var(--accent,var(--static-frame,#4aa8e0));
  color:#fff;font-size:.88rem;font-weight:600;
  font-family:inherit;line-height:38px;
  box-shadow:0 2px 8px rgba(10,16,30,.22)}
html[data-blueframe="on"]:not([data-deluxe="on"]) .mac-win-zu{
  background:var(--static-frame,#4aa8e0)}
html[data-deluxe="on"] .mac-win-zu{
  background:var(--dlx-grad);background-size:200% auto}
/* Grosszuegig treffbar: Die Flaeche reicht 14 px ueber den Knopf
   hinaus. Sie gehoert zum Knopf, also zaehlt ein Druck darin als
   Druck auf ihn -- wer knapp daneben zielt, trifft trotzdem. Sichtbar
   ist davon nichts. */
html[data-qps="5"] .mac-win-zu::after{
  content:'';position:absolute;inset:-14px;border-radius:20px}
/* Dunkler beim Druecken, ohne zweiten festen Farbwert. */
html[data-qps="5"] .mac-win-zu:active{filter:brightness(.88)}

/* pt-handy5-v7 ==========================================================
   Kopf und Ueberschriften in der Rahmenfarbe, mit Trennlinie.

   --mac-akz ist var(--accent, var(--static-frame, #4aa8e0)) -- dieselbe
   Kette, aus der auch Menues, Marken und Knoepfe des Schreibtischs ihre
   Farbe ziehen. Eine eigene Farbe an dieser Stelle waere eine, die bei
   der naechsten Aenderung der Rahmenfarbe stehenbleibt. */
html[data-qps="5"] .h5-apps-kopf b{color:var(--mac-akz)}
html[data-qps="5"] .h5-apps-kopf .h5-btn{
  color:var(--mac-akz);border-color:var(--mac-akz);font-weight:600}
html[data-qps="5"] .h5-dkopf{
  color:var(--mac-akz);
  margin:22px 2px 10px;padding-bottom:6px;
  border-bottom:1px solid var(--mac-akz)}
html[data-qps="5"] .h5-apps-leib > .h5-dkopf:first-of-type{margin-top:16px}

/* pt-handy5-v10 =========================================================
   Das Verzeichnis ueber dem Fenster, und was das Anordnen zeigt. */

/* Die Lade des Verzeichnisses liegt auf 81 -- unter dem Fenster einer
   geoeffneten App (9550), seit diese am Telefon im Vollbild steht. Sie
   ging dadurch dahinter auf und war erst nach dem Schliessen zu sehen.
   Jetzt steigt sie mit: ueber das Fenster, unter die Dialoge (9760). */
html[data-qps="5"] #kbSideBackdrop{z-index:9558}
html[data-qps="5"] #kbSidebar{z-index:9559}
@media (max-width:820px){
  html[data-qps="5"] #kbSidebar,
  html[data-qps="5"] #kbSideBackdrop{
    top:calc(env(safe-area-inset-top,0px) + 48px)}
}

/* Die aufgenommene App: angehoben und in der Rahmenfarbe umrandet.
   Ohne sichtbare Marke waere nach dem ersten Tippen nicht zu sehen,
   was in der Hand liegt. */
html[data-qps="5"] .h5-app.gewaehlt .mac-ico{
  outline:2.5px solid var(--mac-akz);outline-offset:2px;
  transform:scale(1.08);box-shadow:0 8px 20px rgba(10,16,30,.45)}
html[data-qps="5"] .h5-app.gewaehlt{animation:none}

/* Die Hinweiszeile im Anordnen. */
html[data-qps="5"] .h5-hinweis{
  position:absolute;left:12px;right:12px;
  top:calc(env(safe-area-inset-top,0px) + 44px);
  display:none;padding:7px 12px;border-radius:12px;
  font-size:.76rem;text-align:center;color:var(--mac-tx);
  background:var(--mac-glas-k);border:1px solid var(--mac-linie);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  pointer-events:none;z-index:4}
html[data-qps="5"] .h5-ovl.bearb .h5-hinweis{display:block}
/* Das Raster rueckt im Anordnen nach unten, damit die Zeile nichts
   verdeckt. */
html[data-qps="5"] .h5-ovl.bearb .h5-screen{
  top:calc(env(safe-area-inset-top,0px) + 82px)}

html[data-qps="5"] .h5-kopf-knoepfe{display:flex;gap:7px;flex:0 0 auto}

/* pt-handy5-v13 =========================================================
   Die Suchzeile im Anordnen: ein Rahmen in der Rahmenfarbe zeigt, dass
   sie mitgenommen werden kann; aufgenommen bekommt sie dieselbe Marke
   wie eine App. Gewackelt wird nicht -- eine Zeile ueber die ganze
   Breite, die sich dreht, sieht nach Fehler aus, nicht nach Angebot. */
html[data-qps="5"] .h5-ovl.bearb .h5-such{
  border-color:var(--mac-akz)}
html[data-qps="5"] .h5-such.gewaehlt{
  outline:2.5px solid var(--mac-akz);outline-offset:2px;
  box-shadow:0 8px 20px rgba(10,16,30,.35)}

/* pt-handy5-v15 ========================================================= */
html[data-qps="5"] .h5-dstd-reihe{display:flex;gap:8px}
html[data-qps="5"] .h5-dstd-reihe .h5-dstd{flex:1;min-width:0;padding:9px 6px}

/* pt-kb-handy-spalten-v1 ================================================
   Das Verzeichnis am Telefon: zwei Spalten, die sich die Breite teilen.

   Am Rechner sind die Spalten 238 px breit und stehen nebeneinander, so
   viele es gibt. Am Telefon passen zwei -- die linke schmaler, weil dort
   nur der Weg steht, die rechte breiter, weil dort gelesen wird. */
#kbSideBack{display:none;background:none;border:1px solid var(--c-border);
  border-radius:6px;cursor:pointer;font-size:.76rem;padding:4px 10px;
  color:var(--accent,var(--static-frame,#4aa8e0))}
#kbSideBack:disabled{opacity:.4;cursor:default}
@media (max-width:820px){
  #kbSideBack{display:inline-flex;align-items:center}
  /* Am Telefon wird nicht am Verzeichnisbaum gearbeitet. */
  #kbEditToggle{display:none}
  .kb-cols{overflow-x:hidden}
  .kb-col{min-width:0;max-width:none;flex:1 1 0}
  .kb-cols > .kb-col:first-child:not(:last-child){flex:0 0 40%}
}

/* pt-mac-wp-vorschau-v1 =================================================
   Die Zeilen der Wallpaper-Liste tragen ein kleines Bild. Sie stehen
   dadurch auf gleicher Hoehe statt auf der Grundlinie, und der Haken
   des aktiven Eintrags haengt nicht mehr nach links aus -- vor ihm
   steht jetzt das Bild. */
html[data-qps="5"] .mac-me-wp{align-items:center;gap:8px}
html[data-qps="5"] .mac-me-wp.an .mac-me-h::before{margin-left:0}
html[data-qps="5"] .mac-wp-bild{
  flex:0 0 auto;width:46px;height:29px;border-radius:5px;overflow:hidden;
  display:block;position:relative;
  background:linear-gradient(135deg,#1e242c,#2a3340);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
html[data-qps="5"] .mac-wp-bild img,
html[data-qps="5"] .mac-wp-bild video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Die zweite Schicht wird breiter -- der Name soll neben dem Bild noch
   lesbar sein. */
html[data-qps="5"] .mac-menu-sub{min-width:250px}

/* pt-mac-add-vorschau-v1 ================================================
   Die gezeichneten Abbilder der Add-on-Liste. Sie sitzen im selben Feld
   wie die Wallpaper-Vorschau (.mac-wp-bild), tragen aber einen hellen
   Grund statt eines dunklen: Hier wird eine Form gezeigt, kein Foto. */
html[data-qps="5"] .mac-wp-zeichnung{
  background:var(--mac-glas-k);color:var(--mac-tx);
  display:flex;align-items:center;justify-content:center}
html[data-qps="5"] .mac-me-wp:hover:not(:disabled) .mac-wp-zeichnung{color:#fff}
/* Das Bild-Fenster: ein Rahmen mit drei Punkten, in der Groesse, die
   der Eintrag anlegt. */
html[data-qps="5"] .mac-ap-fen{
  position:relative;display:block;border-radius:2.5px;
  border:1px solid currentColor;opacity:.75}
html[data-qps="5"] .mac-ap-fen i{
  position:absolute;top:1.5px;width:2px;height:2px;border-radius:50%;
  background:currentColor}
html[data-qps="5"] .mac-ap-fen i:nth-child(1){left:2px}
html[data-qps="5"] .mac-ap-fen i:nth-child(2){left:5.5px}
html[data-qps="5"] .mac-ap-fen i:nth-child(3){left:9px}
/* Die digitale Uhr zeigt die echte Zeit -- versorgt vom Taktgeber der
   Startseiten ueber die Klassen .qps-u-hh und .qps-u-mm. */
html[data-qps="5"] .mac-ap-dig{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  line-height:1.05;font-variant-numeric:tabular-nums;width:100%}
html[data-qps="5"] .mac-ap-dig b{font-size:.62rem;font-weight:700}
html[data-qps="5"] .mac-ap-dig.mit-datum b{font-size:.56rem}
html[data-qps="5"] .mac-ap-dig i{
  max-width:42px;font-size:.36rem;font-style:normal;opacity:.7;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
html[data-qps="5"] .mac-ap-svg{width:22px;height:22px;display:block}
html[data-qps="5"] .mac-ap-gitter{width:38px;height:24px;fill:currentColor;opacity:.8}
/* Die Tageskachel: Kopfleiste und Zahlenfeld, ohne ein Datum zu
   behaupten, das nicht stimmt. */
html[data-qps="5"] .mac-ap-kachel{
  position:relative;display:block;width:21px;height:23px;border-radius:3px;
  border:1px solid currentColor;overflow:hidden;opacity:.85}
html[data-qps="5"] .mac-ap-kachel i{
  position:absolute;left:0;right:0;top:0;height:6px;background:currentColor;opacity:.7}
html[data-qps="5"] .mac-ap-kachel b{
  position:absolute;left:4px;right:4px;top:10px;height:8px;border-radius:1.5px;
  background:currentColor;opacity:.45}

/* pt-bg-ausschnitt-v2 ===================================================
   Der Regler fuer den Bildausschnitt in der Design-App. */
html[data-qps="5"] .h5-aus{
  margin:14px 0 4px;padding:10px 12px;border-radius:12px;
  background:var(--mac-glas-k);border:1px solid var(--mac-linie);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%)}
html[data-qps="5"] .h5-aus-kopf{
  display:flex;align-items:center;justify-content:space-between;
  font-size:.8rem;font-weight:600;color:var(--mac-akz)}
html[data-qps="5"] .h5-aus-kopf b{font-variant-numeric:tabular-nums}
html[data-qps="5"] .h5-aus-reg{
  width:100%;margin:8px 0 2px;accent-color:var(--mac-akz);height:26px}
html[data-qps="5"] .h5-aus-txt{
  font-size:.7rem;line-height:1.3;color:var(--mac-tx-leise)}
/* Beim Schieben bleibt nur der Regler stehen -- der Rest gibt den Blick
   auf das Bild frei. Nicht display:none: Das Blatt darf seine Groesse
   nicht aendern, sonst springt der Regler unter dem Finger weg. */
html[data-qps="5"] .h5-apps.schauen{
  background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-qps="5"] .h5-apps.schauen .h5-apps-kopf,
html[data-qps="5"] .h5-apps.schauen .h5-apps-fuss,
html[data-qps="5"] .h5-apps.schauen .h5-dstd-reihe,
html[data-qps="5"] .h5-apps.schauen .h5-dkopf,
html[data-qps="5"] .h5-apps.schauen .h5-dgit{opacity:0}

/* pt-bg-ausschnitt-v3 ===================================================
   Der Regler sitzt jetzt an der Karte, und waehrend des Schiebens zeigt
   die Karte den Zuschnitt statt des fertigen Bildes. */
html[data-qps="5"] .h5-daus{padding:0 8px 8px}
html[data-qps="5"] .h5-daus-reg{
  width:100%;height:20px;margin:0;accent-color:var(--mac-akz);display:block}
/* Im Zuschnitt wird das ganze Bild klein gezeigt; das helle Fenster
   darueber ist der Teil, den der Schirm spaeter zeigt. */
html[data-qps="5"] .h5-dkarte.zuschnitt .h5-dbild img,
html[data-qps="5"] .h5-dkarte.zuschnitt .h5-dbild video{
  object-fit:contain;object-position:center !important;background:#0f1319}
html[data-qps="5"] .h5-fenster{display:none;position:absolute;pointer-events:none}
html[data-qps="5"] .h5-dkarte.zuschnitt .h5-fenster{
  display:block;border:2px solid #fff;border-radius:2px;
  box-shadow:0 0 0 2000px rgba(6,9,14,.55);z-index:2}

/* pt-kb-kopftitel-v1 ====================================================
   Der Name des offenen Eintrags, mittig in der Kopfzeile.

   position:absolute und nicht als Teil der Reihe: Als Kind des
   flex-Kastens verschoebe er Logo und Knoepfe, und die Mitte waere dann
   die Mitte des Restes, nicht die des Bildes.

   Sichtbar nur auf der Diagnoseseite -- anderswo waere er ein Name ohne
   Gegenstand. Leer bleibt er ohnehin, solange kbSetNavTitle(null) gilt;
   die Regel faengt den Fall ab, dass ein Eintrag offen bleibt, waehrend
   man woanders liest. */
.kb-kopf-titel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:none;pointer-events:none;
  max-width:min(46%,460px);
  font-size:.95rem;font-weight:600;color:var(--c-text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
/* pt-kb-kopftitel-v2: nur bei eingeklappter Leiste -- sonst liegt der
   Name quer ueber den Tabs, die dort stehen. */
html[data-active-page="wissen"] .header.nav-collapsed .kb-kopf-titel{display:block}
/* Im Schreibtisch-Aufbau traegt die Fensterleiste den Namen, und die
   Kopfzeile ist dort ohnehin ausgeblendet. */
html[data-qps="5"] .kb-kopf-titel{display:none !important}
/* Schmale Schirme: Zwischen Logo und Modus-Knoepfen bleibt zu wenig
   uebrig. Dort steht der Name weiterhin als Ueberschrift im Text. */
@media (max-width:820px){
  .kb-kopf-titel{display:none !important}
}

/* pt-dosis-strich-v1: Der Verweis steht zurückhaltender da als eine
   Angabe -- er ist ein Wegweiser, kein Inhalt. */
.dosis-verweis{font-style:italic;opacity:.75}

/* pt-dialoge-v1: Das Textfeld des Eingabedialogs. Die Huelle kommt von
   .pt-frage -- die drei Dialoge sollen nicht auseinanderlaufen. */
.pt-frage-feld{
  width:100%;margin:2px 0 4px;padding:9px 11px;
  border:1px solid var(--c-border);border-radius:8px;
  background:var(--c-bg);color:var(--c-text);
  font-family:inherit;font-size:.95rem}
.pt-frage-feld:focus{
  outline:none;border-color:var(--accent,var(--static-frame,#4aa8e0));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,var(--static-frame,#4aa8e0)) 18%,transparent)}


/* ═══ pt-lernplan-v1 ══════════════════════════════════════════════════════ */
.lp-gebiete{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px}
.lp-gebiet{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--c-border);
  border-radius:8px;font-size:.86rem;cursor:pointer;background:rgba(127,127,127,.03)}
.lp-gebiet:hover{border-color:var(--c-accent,#4aa8e0)}
.lp-gebiet input{width:auto;flex-shrink:0}
.lp-gebiet span:first-of-type{flex:1}
.lp-anz{font-size:.76rem;color:var(--c-muted);flex-shrink:0}

.lp-dauer{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lp-dauer-btn.aktiv{border-color:var(--c-accent,#4aa8e0);color:var(--c-accent,#4aa8e0);font-weight:600}
.lp-dauer-frei{font-size:.84rem;color:var(--c-muted);display:flex;align-items:center;gap:6px}
.lp-dauer-frei input{padding:5px 7px;border:1px solid var(--c-border);border-radius:7px;
  background:var(--c-white);color:var(--c-text)}

.lp-opt{display:flex;align-items:center;gap:8px;font-size:.86rem;cursor:pointer;padding:3px 0}
.lp-opt input{width:auto}

.lp-wochen{display:flex;flex-direction:column;gap:10px}
/* pt-lp-wochenkarte-v1: Rahmen und Hintergrund kommen jetzt aus .card --
   die Wochenkarte traegt die Klasse mit. Hier bleibt nur, was sie von
   einer gewoehnlichen Karte unterscheidet.

   Die eigenen Farbangaben mussten weichen und nicht bloss ergaenzt
   werden: .lp-woche und .card wiegen gleich viel, .lp-woche steht aber
   weiter unten in der Datei und haette die Karte weiterhin geschlagen.

   padding:0, weil Kopf und Liste ihre Abstaende selbst mitbringen --
   derselbe Griff wie bei .lp-zuschnitt. */
.lp-woche{overflow:hidden;padding:0}
.lp-woche-kopf{width:100%;display:flex;align-items:center;gap:12px;padding:11px 14px;
  background:none;border:0;cursor:pointer;text-align:left;color:var(--c-text);font:inherit}
.lp-woche-nr{font-weight:600;font-size:.95rem;flex:1}
.lp-woche-stand{font-size:.8rem;color:var(--c-muted)}
.lp-pfeil{transition:transform .2s;color:var(--c-muted)}
.lp-woche.offen .lp-pfeil{transform:rotate(180deg)}
.lp-woche-inhalt{display:none;padding:0 14px 12px}
.lp-woche.offen .lp-woche-inhalt{display:block}

.lp-wdh{border-left:3px solid rgba(45,158,90,.5);background:rgba(45,158,90,.06);
  border-radius:0 8px 8px 0;padding:8px 12px;margin-bottom:12px}
.lp-wdh-titel{font-size:.74rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:#2d9e5a;margin-bottom:4px}
.lp-wdh-zeile{font-size:.8rem;line-height:1.5;color:var(--c-muted);margin-bottom:2px}
.lp-wdh-kopf{font-weight:600;color:var(--c-text)}

.lp-neu{display:flex;flex-direction:column}
.lp-zeile{display:flex;align-items:center;gap:9px;padding:6px 2px;font-size:.88rem;
  cursor:pointer;border-bottom:1px solid var(--c-border)}
.lp-zeile:last-child{border-bottom:0}
.lp-zeile input{width:auto;flex-shrink:0}
.lp-zeile.lp-wirkstoff{padding-left:22px;font-size:.83rem;color:var(--c-muted)}
.lp-zeile.lp-diagnose .lp-titel{font-weight:600}
.lp-titel{flex:1}
.lp-zeile.erledigt .lp-titel{text-decoration:line-through;opacity:.55}
.lp-kapitel{font-size:.74rem;color:var(--c-muted);flex-shrink:0;max-width:34%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-badge{font-size:.68rem;padding:1px 6px;border-radius:999px;flex-shrink:0;
  border:1px solid rgba(74,168,224,.45);background:rgba(74,168,224,.1);color:#4aa8e0}

@media(max-width:640px){
  .lp-kapitel{display:none}
  .lp-gebiete{grid-template-columns:1fr}
}
/* ═══ pt-lernplan-v1-ende ═════════════════════════════════════════════════ */

/* ═══ pt-lernplan-termin-v1 ═══════════════════════════════════════════════ */
.lp-termin{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--c-border)}
.lp-termin label{font-size:.84rem;color:var(--c-muted)}
.lp-termin input[type=date]{padding:6px 8px;border:1px solid var(--c-border);border-radius:7px;
  background:var(--c-white);color:var(--c-text);font-size:.86rem}
.lp-termin-hinweis{font-size:.8rem;color:var(--c-muted)}
.lp-termin-hinweis.fehler{color:#e63946}
/* ═══ pt-lernplan-termin-v1-ende ══════════════════════════════════════════ */


/* ═══ pt-gastsicht-v2 ══════════════════════════════════════════════════════ */
.gast-panel{border:1px solid var(--c-border);border-radius:12px;padding:16px 18px;
  margin:0 0 16px;background:rgba(74,168,224,.06)}
.gast-kopf{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:6px}
.gast-schloss{font-size:1rem;opacity:.75}
.gast-titel{font-weight:700;font-size:1.04rem}
.gast-zahl{font-size:.82rem;color:var(--c-muted)}
.gast-text{font-size:.88rem;line-height:1.6;margin-bottom:10px}
.gast-probe{font-size:.85rem;line-height:1.55;margin-bottom:10px;padding:8px 11px;
  border-left:3px solid rgba(45,158,90,.55);background:rgba(45,158,90,.07);
  border-radius:0 8px 8px 0}
.gast-knoepfe{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.gast-fuss{font-size:.79rem;line-height:1.55;color:var(--c-muted)}

/* Der Anriss der Wissensdatenbank: echter Text, nach unten ausgeblendet.
   Bisher standen hier Blindbloecke aus Kaestchen -- die zeigten zwar, dass
   etwas fehlt, aber nicht, was fehlt. */
.kb-anriss{position:relative;max-height:112px;overflow:hidden}
.kb-anriss::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;
  background:linear-gradient(to bottom,transparent,var(--c-white));pointer-events:none}
.kb-anriss-sec{margin-bottom:14px}
@media(max-width:640px){
  .gast-panel{padding:13px 14px}
  .kb-anriss{max-height:88px}
}
/* ═══ pt-gastsicht-v2-ende ═════════════════════════════════════════════════ */

/* ═══ pt-gastsicht-v4 ══════════════════════════════════════════════════════
   Eine Karte, zwei Behaelter: ueberlagert (.pt-lock-overlay) bei
   gesperrten Werkzeugen, als Block (.gast-karte) unter einer Kostprobe.
   Die inneren Klassen sind dieselben, damit beide gleich aussehen. */
.gast-karte{border:1px solid var(--c-border);border-radius:12px;
  padding:26px 24px;margin:16px 0 0;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  background:rgba(74,168,224,.06)}
.gast-zahl{font-size:.82rem;color:var(--c-muted);margin-top:-4px}
.gast-knoepfe{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.pt-lock-btn2{padding:9px 18px;border:1px solid var(--c-border);border-radius:999px;
  background:transparent;color:var(--c-text);font-weight:600;font-size:.88rem;cursor:pointer}
.pt-lock-btn2:hover{border-color:var(--accent,#4aa8e0)}
.gast-probe{font-size:.85rem;line-height:1.5;padding:7px 12px;border-radius:8px;
  background:rgba(45,158,90,.09);color:var(--c-text)}
.gast-fuss{font-size:.78rem;line-height:1.5;color:var(--c-muted);max-width:460px}
/* Das alte Banner von v2 wird nicht mehr erzeugt; die Regeln blieben sonst
   als Leiche in der Datei stehen. */
.gast-panel{display:none}
/* ═══ pt-gastsicht-v4-ende ═════════════════════════════════════════════════ */

/* ═══ pt-lernplan-individuell-v1 ══════════════════════════════════════════ */
.lp-zeile-wrap{display:flex;align-items:center;gap:4px;border-bottom:1px solid var(--c-border)}
.lp-zeile-wrap:last-child{border-bottom:0}
.lp-zeile-wrap .lp-zeile{flex:1;border-bottom:0}
.lp-weg{flex-shrink:0;width:26px;height:26px;line-height:1;border:0;border-radius:50%;
  background:transparent;color:var(--c-muted);font-size:1.15rem;cursor:pointer;opacity:0;
  transition:opacity .12s}
.lp-zeile-wrap:hover .lp-weg,.lp-weg:focus{opacity:1}
.lp-weg:hover{background:rgba(230,57,70,.12);color:#e63946}

.lp-zuschnitt{margin:0 0 14px;padding:14px 16px}
.lp-zuschnitt-kopf{display:flex;justify-content:space-between;align-items:center;
  gap:10px;flex-wrap:wrap;margin-bottom:9px;font-weight:600;font-size:.95rem}
.lp-such-zeile{position:relative}
.lp-such-zeile input{width:100%;padding:8px 11px;border:1px solid var(--c-border);
  border-radius:9px;background:var(--c-white);color:var(--c-text);font-size:.88rem}
.lp-such-treffer{display:none;position:absolute;left:0;right:0;top:100%;z-index:30;
  margin-top:4px;border:1px solid var(--c-border);border-radius:9px;overflow:hidden;
  background:var(--c-white);box-shadow:0 8px 22px rgba(0,0,0,.12)}
.lp-such-treffer.offen{display:block}
.lp-treffer{display:flex;justify-content:space-between;align-items:center;gap:10px;
  width:100%;padding:8px 11px;border:0;border-bottom:1px solid var(--c-border);
  background:transparent;color:var(--c-text);font:inherit;font-size:.86rem;
  cursor:pointer;text-align:left}
.lp-treffer:last-child{border-bottom:0}
.lp-treffer:hover{background:rgba(74,168,224,.1)}
.lp-treffer-art,.lp-weg-art{font-size:.74rem;color:var(--c-muted);flex-shrink:0}
.lp-treffer-titel{flex:1}
.lp-treffer-leer{padding:9px 11px;font-size:.85rem;color:var(--c-muted)}

.lp-weg-liste{margin-top:10px;border-top:1px solid var(--c-border);padding-top:8px}
.lp-weg-zeile{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:.86rem;
  border-bottom:1px solid var(--c-border)}
.lp-weg-zeile:last-child{border-bottom:0}
.lp-weg-titel{flex:1;text-decoration:line-through;opacity:.65}
.lp-zuschnitt-fuss{margin-top:9px;font-size:.78rem;line-height:1.5;color:var(--c-muted)}

@media(max-width:640px){ .lp-weg{opacity:1} }
/* ═══ pt-lernplan-individuell-v1-ende ═════════════════════════════════════ */

/* ═══ pt-add-marke-v1 ══════════════════════════════════════════════════════
   Der Schriftzug als Add-on auf dem Schreibtisch. Die Farben kommen aus
   .logo-pharm und .logo-trainer -- dieselben Klassen wie in der Kopfzeile,
   damit die Marke an einer Stelle gepflegt bleibt. Hier steht nur, wie
   gross und wie gesetzt. */
/* pt-add-marke-v2: Kein text-shadow mehr. Bei gesetztem Deluxe-Modus ist
   .logo-pharm Verlaufsschrift (-webkit-text-fill-color:transparent); ein
   Schatten wird dann HINTER den durchsichtigen Glyphen gezeichnet und
   schimmert durch sie hindurch -- die Farbe wirkte dadurch dunkler als
   ueberall sonst. Auch das Gewicht folgt jetzt der Kopfzeile (700 statt
   800); mehr Farbe auf gleicher Flaeche liest sich ebenfalls dunkler. */
.pt-add-marke{font-size:2.1em;font-weight:700;letter-spacing:-.025em;
  line-height:1.05;white-space:nowrap;text-align:center}
.mac-ap-marke{font-weight:700;letter-spacing:-.02em;white-space:nowrap}
/* ═══ pt-add-marke-v1-ende ═════════════════════════════════════════════════ */

/* pt-add-marke-v2: "Med" in der Menueleiste traegt die feste Farbe statt
   der Leistenfarbe. "Access" bleibt dynamisch -- .mac-marke faerbt
   weiterhin, und .logo-pharm setzt bei gesetztem Rahmen dieselbe Farbe.
   Im dunklen Thema greift wie ueberall die vorhandene Regel
   [data-theme="dark"] .logo-trainer{color:#fff!important}. */
html[data-qps="5"] .mac-marke .logo-trainer{color:#1a3a5c}

/* ═══ pt-impf-sticky-v1 ════════════════════════════════════════════════════
   Die Spalte "Impfungen" bleibt beim waagrechten Scrollen stehen. Der
   Bildlauf sitzt auf #vaccWrap; die erste Zelle jeder Zeile klebt an
   dessen linkem Rand.

   Die deckende Flaeche ist noetig, weil die Tabelle mit border-spacing
   arbeitet -- ohne sie liefen die scrollenden Zellen sichtbar hinter der
   Namensspalte durch. var(--c-white) ist dieselbe Farbe, die .card
   traegt, in der die Tabelle steht.

   z-index 2, damit die Zelle ueber den mitlaufenden Zellen liegt; die
   Kopfzeilen brauchen keinen eigenen Wert, sie stehen in derselben
   Spalte. */
#vaccWrap .vacc-tab td:first-child{
  position:sticky;left:0;z-index:2;background:var(--c-white)}
/* Ein schmaler Schatten trennt die stehende Spalte vom mitlaufenden Teil,
   sobald wirklich gescrollt wird. Ohne ihn wirken die Zellen beim
   Darunterlaufen wie abgeschnitten. */
#vaccWrap .vacc-tab td:first-child::after{
  content:'';position:absolute;top:0;right:-2px;bottom:0;width:6px;
  pointer-events:none;
  background:linear-gradient(to right,rgba(0,0,0,.07),transparent)}
/* ═══ pt-impf-sticky-v1-ende ═══════════════════════════════════════════════ */

/* ═══ pt-mosaik-sticky-v1 ══════════════════════════════════════════════════
   Antibiotika- und Pilz-Mosaik: die beiden linken Spalten bleiben beim
   waagrechten Scrollen stehen. Beide Tafeln laufen ueber denselben
   Erzeuger mosaikRender(), die Regel gilt deshalb fuer beide.

   Die Versatzwerte folgen den Maßen im Erzeuger: Gruppenspalte 24 px,
   border-spacing 1 px. Der Name klebt deshalb bei 25 px -- genau um
   Spaltenbreite plus Abstand versetzt. So bleibt der Zwischenraum im
   geklebten Zustand derselbe wie im Ruhezustand; beide Spalten setzen
   im selben Augenblick auf.

   Der box-shadow mit 1 px Streuung schliesst den Zwischenraum zwischen
   den Zellen. Die Tabelle arbeitet mit border-spacing, und ohne ihn
   liefen die scrollenden Zellen als schmale Streifen sichtbar zwischen
   den Erregernamen durch. Ein Schlagschatten wird hinter dem
   Zellhintergrund gezeichnet und verdeckt die farbige Auswahl deshalb
   nicht.

   var(--c-white) ist die Farbe von .card, in der die Tabelle steht --
   im dunklen Thema also mit. */
#abxMatrixWrap td.mos-gr,#fungiMatrixWrap td.mos-gr,
#abxMatrixWrap td.mos-l12,#fungiMatrixWrap td.mos-l12{
  position:sticky;left:0;z-index:2;
  background:var(--c-white);box-shadow:0 0 0 1px var(--c-white)}
#abxMatrixWrap td.mos-nm,#fungiMatrixWrap td.mos-nm{
  position:sticky;left:25px;z-index:2;
  background:var(--c-white);box-shadow:0 0 0 1px var(--c-white)}
/* pt-mosaik-handy-v1: Am Handy ist die Namensspalte schmal (112 px, gesetzt in
   mosaikRender); die Namen brechen um, statt abgeschnitten zu werden. */
@media (max-width:640px){
  #abxMatrixWrap td.mos-nm,#fungiMatrixWrap td.mos-nm{
    white-space:normal !important;font-size:.66rem !important;line-height:1.15;
    padding:4px 6px !important;overflow-wrap:anywhere;hyphens:auto}
}
/* ═══ pt-mosaik-sticky-v1-ende ════════════════════════════════════════════ */

/* ═══ pt-kb-diagnose-v1 ════════════════════════════════════════════════════
   Verweis auf einen anderen Eintrag. Bewusst anders als .kb-ws: ein
   Wirkstoffname oeffnet ein Fenster ueber dem Text (gepunktet), ein
   Eintragsname fuehrt weg (durchgezogen). Wer den Unterschied sieht,
   weiss vor dem Klick, was passiert.

   Keine eigene Schriftfarbe: In manchen Kapiteln steht ein knappes
   Dutzend Verweise, und eingefaerbter Text waere dort lauter als der
   Inhalt. Die Linie genuegt. */
.kb-dx{cursor:pointer;
  border-bottom:1px solid color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 55%, transparent);
  text-decoration:none}
.kb-dx:hover{background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 14%, transparent);
  border-bottom-color:var(--accent,var(--static-frame,#4aa8e0));
  border-radius:3px}
/* ═══ pt-kb-diagnose-v1-ende ══════════════════════════════════════════════ */

/* ═══ pt-tpl-wahl-v1 ═══════════════════════════════════════════════════════
   Anklickbare Entscheidungen in einer Vorlage. Drei Zustaende:
     ohne Klasse  noch nicht entschieden -- alle Moeglichkeiten gleich
                  hell, gestrichelter Rahmen als Einladung,
     .aktiv       gewaehlt,
     .blass       nicht gewaehlt, aber weiter anklickbar. Sie werden nicht
                  ausgeblendet: Wer sich vertippt hat, soll zurueckkoennen,
                  ohne die Vorlage neu zu laden.

   display:inline statt inline-flex: Die Vorlage steht in einem <pre> mit
   white-space:pre-wrap, und ein Flex-Behaelter bricht darin nicht um --
   eine lange Auswahl liefe sonst aus der Karte hinaus. */
.tpl-wahl{display:inline}
/* display:inline und box-decoration-break:clone -- eine Moeglichkeit kann
   ein ganzer Satz sein ("Darunter kommt es zu einer spontanen Konversion
   ..."). Als inline-block liefe sie aus der Karte hinaus statt
   umzubrechen; mit clone bekommt auch die zweite Zeile ihren Rahmen. */
.tpl-opt{display:inline;font:inherit;line-height:inherit;padding:0 5px;
  margin:0 1px;border-radius:5px;cursor:pointer;color:inherit;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  border:1px dashed var(--accent,var(--static-frame,#4aa8e0));background:transparent}
.tpl-opt:hover{background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 14%, transparent)}
.tpl-opt.aktiv{border-style:solid;font-weight:600;
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 20%, transparent)}
.tpl-opt.blass{opacity:.45;border-color:var(--c-border,#dfe7ec);border-style:dotted}
.tpl-opt.blass:hover{opacity:1}
/* ═══ pt-tpl-wahl-v1-ende ═════════════════════════════════════════════════ */

/* ═══ pt-tpl-liste-v1 ══════════════════════════════════════════════════════
   Die Vorlagen einer Sammelkarte als eigene Zeilen. Vorher standen
   einundzwanzig Briefnamen als nackte Zeilen mit 14 Pixeln Abstand
   untereinander -- eine Aufzaehlung, in der nicht zu sehen war, wo eine
   Vorlage aufhoert und die naechste anfaengt.

   Der kleine Abstand von 2 px zwischen den Zeilen genuegt, weil die
   Flaeche beim Ueberfahren erscheint: Was zusammengehoert, zeigt sich
   dann von selbst. Trennlinien waeren dazu doppelt gemoppelt. */
.tpl-liste{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.tpl-zeile{display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-radius:10px;border:1px solid transparent;
  transition:background .12s ease, border-color .12s ease}
.tpl-zeile.klick{cursor:pointer}
.tpl-zeile.klick:hover{
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 8%, transparent);
  border-color:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 28%, transparent)}
/* Die offene Vorlage bleibt hervorgehoben -- beim Blaettern durch einen
   langen Brief ist sonst nicht mehr zu sehen, welcher es ist. */
.tpl-eintrag.auf > .tpl-zeile{
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 13%, transparent);
  border-color:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 38%, transparent)}
/* Ein Dreieck, das sich dreht, statt zwischen zwei Zeichen zu springen:
   Die Bewegung sagt, dass sich etwas oeffnet. */
.tpl-caret{flex:0 0 12px;width:12px;font-size:.62rem;line-height:1;
  color:var(--c-muted);transition:transform .15s ease}
.tpl-eintrag.auf .tpl-caret{transform:rotate(90deg)}
.tpl-titel{font-weight:600;flex:1 1 auto;min-width:0}
.tpl-akt{display:flex;gap:6px;flex:0 0 auto}
/* Der Brief selbst bekommt Luft nach oben und unten, damit er nicht an
   seiner eigenen Zeile klebt. */
.tpl-eintrag.auf > .tpl-pre{margin:8px 2px 16px}
/* ═══ pt-tpl-liste-v1-ende ════════════════════════════════════════════════ */

/* ═══ pt-notizbuch-v1 ══════════════════════════════════════════════════════
   Notizbuch: links die Ordnung, rechts der Inhalt.

   Zwei Spalten, weil beides gleichzeitig gebraucht wird: Wer eine Nummer
   sucht, will die Gruppen sehen, ohne wegzuklicken. Unter 900 px fallen
   sie untereinander -- am Telefon ist die Seitenleiste eine Kopfzeile.

   Die Farben kommen wie ueberall aus der Rahmenfarbe des Profils. */
.nb-kopf{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.nb-suchfeld{flex:1 1 260px;min-width:0;position:relative}
.nb-suchfeld input{width:100%;padding:11px 14px;border-radius:10px;
  border:1px solid var(--accent,var(--static-frame,#4aa8e0));
  background:var(--c-white);color:var(--c-text);font-size:1rem;
  font-family:inherit;outline:none}
.nb-akt{display:flex;gap:8px;flex-wrap:wrap}

.nb-raster{display:grid;grid-template-columns:270px 1fr;gap:16px;align-items:start}
@media (max-width:900px){ .nb-raster{grid-template-columns:1fr} }

.nb-seite{background:var(--c-white);border:1px solid var(--c-border);
  border-radius:12px;padding:10px;position:sticky;top:74px}
@media (max-width:900px){ .nb-seite{position:static} }
.nb-s-titel{font-size:.7rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--c-muted);margin:14px 4px 6px}
.nb-f-gruppe{display:flex;flex-direction:column;gap:2px}
.nb-f{display:flex;align-items:center;justify-content:space-between;gap:7px;
  width:100%;padding:8px 10px;border-radius:8px;border:1px solid transparent;
  background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;
  transition:background .12s ease}
.nb-f:hover{background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 9%, transparent)}
.nb-f.aktiv{background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 16%, transparent);
  border-color:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 40%, transparent);
  font-weight:600}
/* Der Name bricht um, statt nach zehn Zeichen abgeschnitten zu werden.
   Eine Gruppe, deren Name man nicht lesen kann, ist keine Ordnung --
   und Namen wie "Allgemeine Dienstinfos" sind der Normalfall, nicht die
   Ausnahme. Bei drei Zeilen ist Schluss; danach greift die Andeutung,
   und der volle Name steht im title-Merkmal. */
.nb-f-txt{min-width:0;white-space:normal;overflow-wrap:anywhere;
  line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden}
.nb-f-zahl{flex:0 0 auto;font-size:.74rem;color:var(--c-muted);
  font-variant-numeric:tabular-nums}
/* Die Werkzeuge einer Gruppe erscheinen erst beim Ueberfahren. Vier
   Knoepfe je Zeile waeren sonst lauter als die Gruppennamen selbst. */
.nb-g{display:flex;align-items:center;gap:2px}
.nb-g .nb-f{flex:1 1 auto;min-width:0}
/* Blass statt unsichtbar -- wie bei den Karten rechts. Unsichtbar
   belegten die Knoepfe den Platz trotzdem, und der fehlte dem Namen;
   wer sie sieht, weiss wenigstens, wofuer der Platz draufgeht. */
.nb-g-akt{display:flex;gap:0;flex:0 0 auto;opacity:.25;transition:opacity .12s ease}
.nb-g:hover .nb-g-akt,.nb-g:focus-within .nb-g-akt{opacity:1}
/* In der Seitenleiste schmaler als bei den Karten: Vier Knoepfe zu je
   26 px naehmen dem Namen ueber hundert Pixel weg. */
.nb-g-akt .nb-mini{width:21px;height:21px;font-size:.74rem}
.nb-leer-klein{font-size:.8rem;color:var(--c-muted);padding:2px 6px 8px;line-height:1.5}

.nb-haupt{min-width:0}
.nb-h-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:10px;flex-wrap:wrap}
.nb-h-titel{font-size:1.05rem;font-weight:700}
.nb-sort{padding:7px 10px;border-radius:8px;border:1px solid var(--c-border);
  background:var(--c-white);color:var(--c-text);font:inherit;font-size:.85rem;cursor:pointer}
.nb-ueber{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--accent,var(--static-frame,#4aa8e0));
  margin:18px 2px 8px;padding-bottom:5px;
  border-bottom:1px solid color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 30%, transparent)}
.nb-ueber:first-child{margin-top:4px}
.nb-ueber-zahl{font-size:.74rem;font-weight:600;color:var(--c-muted);
  letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}

.nb-karte{background:var(--c-white);border:1px solid var(--c-border);
  border-radius:11px;padding:12px 14px;margin-bottom:8px}
/* Angeheftetes bekommt eine Kante in der Akzentfarbe -- beim Ueberfliegen
   einer langen Liste ist das schneller zu sehen als ein Wort. */
.nb-karte.angeheftet{border-left:3px solid var(--accent,var(--static-frame,#4aa8e0))}
.nb-k-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.nb-k-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.nb-k-titel{font-weight:700}
.nb-k-akt{display:flex;gap:1px;flex:0 0 auto;opacity:.25;transition:opacity .12s ease}
.nb-karte:hover .nb-k-akt,.nb-karte:focus-within .nb-k-akt{opacity:1}
.nb-marke{font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;color:var(--c-muted);
  background:color-mix(in srgb, var(--c-muted) 14%, transparent)}
.nb-marke.nb-pin,.nb-marke.nb-gruppe-marke{
  color:var(--accent,var(--static-frame,#4aa8e0));
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 14%, transparent)}

.nb-mini{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:7px;border:1px solid transparent;background:transparent;color:var(--c-muted);
  font-family:inherit;font-size:.86rem;line-height:1;cursor:pointer;padding:0}
.nb-mini:hover:not(:disabled){background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 15%, transparent);
  color:var(--accent,var(--static-frame,#4aa8e0))}
.nb-mini:disabled{opacity:.25;cursor:default}
.nb-mini.nb-weg:hover{background:color-mix(in srgb, #e63946 16%, transparent);color:#e63946}

/* Beschriftung und Wert nebeneinander, die Werte auf einer Fluchtlinie --
   eine Telefonliste liest man in der Spalte, nicht im Satz. */
.nb-kontakt{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;margin:9px 0 0;
  font-size:.9rem}
.nb-kontakt dt{color:var(--c-muted);font-size:.78rem;padding-top:2px}
.nb-kontakt dd{margin:0;font-variant-numeric:tabular-nums}
.nb-kontakt a{color:var(--accent,var(--static-frame,#4aa8e0));text-decoration:none}
.nb-kontakt a:hover{text-decoration:underline}
.nb-text{margin-top:9px;white-space:pre-wrap;word-break:break-word;
  font-size:.92rem;line-height:1.55}
.nb-leer{padding:26px 14px;text-align:center;color:var(--c-muted);
  border:1px dashed var(--c-border);border-radius:11px}

.nb-form{display:flex;flex-direction:column;gap:8px;
  border-color:var(--accent,var(--static-frame,#4aa8e0))}
.nb-feld{width:100%;padding:9px 11px;border-radius:8px;border:1px solid var(--c-border);
  background:var(--c-bg);color:var(--c-text);font:inherit;font-size:.92rem;outline:none}
.nb-feld:focus{border-color:var(--accent,var(--static-frame,#4aa8e0))}
.nb-feld-gross{font-size:1rem;font-weight:600}
.nb-feld-text{resize:vertical;min-height:56px;line-height:1.55}
.nb-f-zeile{display:flex;gap:8px;flex-wrap:wrap}
.nb-f-zeile > .nb-feld{flex:1 1 180px;min-width:0}
.nb-f-fuss{align-items:center;justify-content:space-between}
.nb-f-fuss > .nb-feld{flex:0 1 220px}
.nb-f-knoepfe{display:flex;gap:8px;flex:0 0 auto}
/* ═══ pt-notizbuch-v1-ende ════════════════════════════════════════════════ */

/* ═══ pt-team-v1 ═══════════════════════════════════════════════════════════
   Team-Verwaltung im Profil und die Kennzeichnung geteilter Einträge.

   Alles Fremde traegt dieselbe Marke mit dem Namen des Besitzers -- im
   Notizbuch, bei den Vorlagen und bei den Checklisten. Wer eine Nummer
   vor sich hat, muss wissen, von wem sie stammt. */
.team-leer{display:flex;gap:12px;flex-wrap:wrap}
.team-weg{flex:1 1 240px;border:1px solid var(--c-border);border-radius:11px;
  padding:14px 16px;background:var(--c-bg)}
.team-weg-titel{font-weight:700;margin-bottom:4px}
.team-weg p{color:var(--c-muted);font-size:.86rem;line-height:1.55;margin:0 0 10px}
.team-weg code{background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 14%, transparent);
  padding:1px 6px;border-radius:5px;font-size:.92em}

.team-kopf{display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:12px}
.team-name{font-size:1.2rem;font-weight:800;line-height:1.2}
.team-unter{font-size:.8rem;color:var(--c-muted);margin-top:2px}
.team-kopf-akt{display:flex;gap:8px;flex-wrap:wrap}
.team-raus{color:#e63946}
.team-code{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;
  padding:11px 14px;border-radius:10px;
  border:1px dashed var(--accent,var(--static-frame,#4aa8e0));
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 7%, transparent)}
.team-code code{font-size:1.1rem;font-weight:700;letter-spacing:.04em;cursor:pointer;
  color:var(--accent,var(--static-frame,#4aa8e0))}
.team-code-hinweis{font-size:.78rem;color:var(--c-muted);line-height:1.5}

.team-tab-wrap{overflow-x:auto}
.team-tab{width:100%;border-collapse:collapse;font-size:.88rem}
.team-tab th{text-align:left;font-size:.7rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--c-muted);padding:0 10px 7px;white-space:nowrap}
.team-tab td{padding:9px 10px;border-top:1px solid var(--c-border);vertical-align:middle}
.team-tab tr.team-ich td{background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 8%, transparent)}
.team-mitglied{font-weight:600;white-space:nowrap}
.team-marke{display:inline-block;margin-left:6px;font-size:.66rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;padding:2px 6px;border-radius:999px;
  color:var(--accent,var(--static-frame,#4aa8e0));
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 14%, transparent)}
.team-marke.team-frei{color:var(--c-muted);
  background:color-mix(in srgb, var(--c-muted) 14%, transparent)}
.team-ja{color:var(--accent,var(--static-frame,#4aa8e0));font-weight:600}
.team-nein,.team-kann-nicht{color:var(--c-muted)}
.team-kann-nicht{cursor:help}
.team-fuss{font-size:.8rem;color:var(--c-muted);line-height:1.55;margin:12px 0 0}

/* Ein Schalter, kein Haken: Er sagt "an oder aus", und er ist gross genug
   fuer einen Finger. */
.team-schalter{width:40px;height:22px;border-radius:999px;border:1px solid var(--c-border);
  background:var(--c-bg);position:relative;cursor:pointer;padding:0;
  transition:background .14s ease,border-color .14s ease}
.team-schalter.an{background:var(--accent,var(--static-frame,#4aa8e0));
  border-color:var(--accent,var(--static-frame,#4aa8e0))}
.team-knauf{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:var(--c-white);box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:transform .14s ease}
.team-schalter.an .team-knauf{transform:translateX(18px)}

/* Geteiltes im Notizbuch: ruhiger Grund, keine Werkzeuge, Name dran. */
.nb-karte-fremd{background:var(--c-bg);border-style:dashed}
.nb-marke.nb-fremd{color:var(--accent,var(--static-frame,#4aa8e0));
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 16%, transparent)}

/* Geteilte Vorlagen */
.tpl-team-ueber{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent,var(--static-frame,#4aa8e0));margin:20px 2px 8px;padding-bottom:5px;
  border-bottom:1px solid color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 30%, transparent)}
.tpl-team-zahl{font-size:.74rem;font-weight:600;color:var(--c-muted);
  letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
.tpl-team-von{display:inline-block;margin-left:8px;font-size:.68rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:999px;
  color:var(--accent,var(--static-frame,#4aa8e0));
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 14%, transparent)}
/* ═══ pt-team-v1-ende ══════════════════════════════════════════════════════ */

/* ═══ pt-team-pw-v1 ════════════════════════════════════════════════════════
   Das Passwort in der Beitritts-Schachtel und die Profilbilder in der
   Mitgliedertabelle. */
.team-code{flex-direction:column;align-items:flex-start}
.team-pw-zeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:.86rem;color:var(--c-muted)}
.team-pw-zeile code{font-size:1rem;font-weight:700;letter-spacing:.03em;
  cursor:pointer;color:var(--accent,var(--static-frame,#4aa8e0))}
.team-pw-alt{line-height:1.55;max-width:46em}

/* Das Bild sitzt in der Zeile und schiebt den Namen nicht nach unten. */
.team-av{width:26px;height:26px;border-radius:50%;object-fit:cover;
  vertical-align:middle;margin-right:8px;flex:0 0 auto}
.team-av-leer{display:inline-flex;align-items:center;justify-content:center;
  font-size:.74rem;font-weight:700;color:#fff;
  background:var(--accent,var(--static-frame,#4aa8e0))}
.team-mitglied{display:flex;align-items:center;gap:0;white-space:nowrap}
/* ═══ pt-team-pw-v1-ende ══════════════════════════════════════════════════ */

/* ═══ pt-todo-team-v1 ══════════════════════════════════════════════════════
   Die Zahl der offenen Aufgaben und die geteilten To-Dos des Teams. */

/* Abzeichen in der Rahmenfarbe des Profils statt in Rot: Offene Aufgaben
   sind der Normalzustand einer To-Do-Liste und keine Warnung. */
.notif-badge.akzent{background:var(--accent,var(--static-frame,#4aa8e0))}

/* Auf dem Schreibtisch und im Dock sitzt die Zahl rechts oben auf dem
   Symbol. Die Eltern tragen bereits position:relative fuer ihre
   Beschriftung; steht dort einmal keines, greift die eigene Angabe. */
.mac-dsk,.mac-app,.mac-kachel{position:relative}
.mac-abz{position:absolute;top:-4px;right:-4px;z-index:2;
  min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent,var(--static-frame,#4aa8e0));color:#fff;
  font-size:.7rem;font-weight:700;line-height:1;
  border:2px solid var(--c-white);
  box-shadow:0 1px 4px rgba(0,0,0,.3);pointer-events:none}

/* Geteilte Aufgaben: ruhiger Grund, kein Haken, Name daneben. */
.todo-team{margin-top:18px}
.todo-team-kopf{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent,var(--static-frame,#4aa8e0));margin:0 2px 8px;padding-bottom:5px;
  border-bottom:1px solid color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 30%, transparent)}
.todo-team-zahl{font-size:.74rem;font-weight:600;color:var(--c-muted);
  letter-spacing:0;text-transform:none}
.todo-team-zeile{display:flex;align-items:center;gap:10px;padding:9px 12px;margin:0 0 6px;
  background:var(--c-bg);border:1px dashed var(--c-border);border-radius:8px;
  font-size:.9rem}
.todo-team-von{flex:0 0 auto;font-size:.68rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:2px 7px;border-radius:999px;
  color:var(--accent,var(--static-frame,#4aa8e0));
  background:color-mix(in srgb, var(--accent,var(--static-frame,#4aa8e0)) 14%, transparent)}
.todo-team-text{flex:1 1 auto;min-width:0}
.todo-team-tag{flex:0 0 auto;font-size:.74rem;color:var(--c-muted);
  font-variant-numeric:tabular-nums}
/* ═══ pt-todo-team-v1-ende ════════════════════════════════════════════════ */

/* pt-h5-seiten-v1 ========================================================
   Drei Wischseiten am Telefon: Uebersicht, Raster, Verzeichnis.

   Gewischt wird nativ -- .h5-seiten scrollt waagrecht und rastet ein.
   Deshalb steht hier keine einzige Pixelrechnung fuer die Geste; der
   Browser bringt Schwung und Einrasten mit.

   Im Anordnen-Modus wird der Behaelter stillgelegt: Wer ein Symbol
   traegt, soll nicht nebenbei die Seite wechseln.

   Alles haengt an html[data-qps="5"] und greift nur, wo .h5-seiten
   steht -- also allein in der Telefonfassung. Der Schreibtisch am PC
   kennt diese Klassen nicht. */

html[data-qps="5"] .h5-seiten{
  position:absolute;left:0;right:0;
  top:calc(env(safe-area-inset-top,0px) + 16px);
  /* pt-h5-seiten-v3: Der Behaelter reicht bis fast an den unteren
     Rand. Nur so koennen Uebersicht und Verzeichnis den Streifen
     nutzen, in dem am Raster das Dock steht. Das Raster holt sich
     seinen alten Abstand ueber .h5-screen selbst zurueck: 12 + 104
     ergibt wieder 116. Diese Summe muss stimmen -- die Unterkante des
     Rasters bestimmt ueber _h5Raster() die Zahl der Rasterzeilen. */
  bottom:calc(env(safe-area-inset-bottom,0px) + 12px);
  /* pt-h5-seiten-v2: .qps-ovl-5 laesst Beruehrungen absichtlich
     hindurch (pointer-events:none). Wer sie annehmen will, muss es
     ausdruecklich sagen -- ohne diese Zeile bekam der Behaelter nie
     eine Beruehrung und liess sich nicht wischen. */
  pointer-events:auto;
  display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
html[data-qps="5"] .h5-seiten::-webkit-scrollbar{display:none}
html[data-qps="5"] .h5-seite{
  position:relative;flex:0 0 100%;width:100%;height:100%;
  pointer-events:auto;   /* pt-h5-seiten-v2, siehe .h5-seiten */
  scroll-snap-align:center;scroll-snap-stop:always}
/* Die beiden Nachbarseiten scrollen senkrecht, die mittlere nicht. */
html[data-qps="5"] .h5-seite-heute,
html[data-qps="5"] .h5-seite-bib{
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
/* Im Anordnen-Modus steht alles still. */
html[data-qps="5"] .h5-ovl.bearb .h5-seiten{overflow-x:hidden;touch-action:none}
html[data-qps="5"] .h5-ovl.bearb .h5-screen,
html[data-qps="5"] .h5-ovl.bearb .h5-app,
html[data-qps="5"] .h5-ovl.bearb .h5-such{touch-action:none}

/* ---- Punkte ---- */
html[data-qps="5"] .h5-punkte{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom,0px) + 112px);   /* pt-h5-seiten-v2 */
  display:flex;gap:7px;z-index:2;pointer-events:auto}
html[data-qps="5"] .h5-punkte button{
  width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.42);box-shadow:0 1px 2px rgba(0,0,0,.35);
  transition:background .18s}
html[data-qps="5"] .h5-punkte button.an{background:rgba(255,255,255,.95)}
/* pt-h5-seiten-v3: Auf den Nachbarseiten steht kein Dock mehr, ueber
   dem die Punkte sitzen koennten -- dort rutschen sie an den unteren
   Rand, mit demselben Uebergang, mit dem das Dock geht. */
html[data-qps="5"] .h5-punkte{transition:bottom .2s}
html[data-qps="5"] .h5-ovl[data-seite="0"] .h5-punkte,
html[data-qps="5"] .h5-ovl[data-seite="2"] .h5-punkte{
  bottom:calc(env(safe-area-inset-bottom,0px) + 14px)}
/* pt-h5-seiten-v2: Auf beiden Nachbarseiten kein Dock -- es gehoert
   zum Raster. */
html[data-qps="5"] .h5-ovl[data-seite="0"] .h5-dock,
html[data-qps="5"] .h5-ovl[data-seite="2"] .h5-dock{
  opacity:0;pointer-events:none;transform:translateX(-50%) translateY(14px)}
html[data-qps="5"] .h5-dock{transition:opacity .2s,transform .2s}

/* ---- Linke Seite: Uebersicht ---- */
html[data-qps="5"] .h5-tv{
  display:flex;flex-direction:column;gap:12px;
  /* pt-h5-seiten-v2: oben 28 px, sonst laeuft die Suchzeile unter die
     Titelzeile. Am Raster faellt das nicht auf, weil dort die erste
     Rasterzeile ihren Inhalt mittig setzt.
     pt-h5-seiten-v3: unten 36 px -- dort liegen jetzt die
     Seitenpunkte, und der Inhalt soll nicht unter ihnen durchlaufen. */
  padding:28px 10px 36px}
html[data-qps="5"] .h5-tv-such{
  height:46px;display:flex;align-items:center;justify-content:center;gap:8px;
  border-radius:15px;cursor:pointer;flex:0 0 auto;
  font-size:.92rem;color:var(--mac-tx);
  background:var(--mac-glas-k);border:1px solid var(--mac-linie);
  box-shadow:var(--mac-saum);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%)}
html[data-qps="5"] .h5-tv-karte{
  padding:14px 12px;border-radius:18px;color:var(--mac-tx);
  background:var(--mac-glas-k);border:1px solid var(--mac-linie);
  box-shadow:var(--mac-saum);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%)}
html[data-qps="5"] .h5-tv-kopf{
  padding:2px 4px;font-size:.98rem;font-weight:700;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.7)}
html[data-qps="5"] .h5-tv-kopf2{
  font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  opacity:.65;margin-bottom:6px}
html[data-qps="5"] .h5-tv-stat{
  display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
html[data-qps="5"] .h5-tv-kachel{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:9px 4px}
/* Trennlinien wie im Profil: senkrecht zwischen den Spalten, waagrecht
   zwischen den Reihen -- aussen keine. */
html[data-qps="5"] .h5-tv-kachel:not(:nth-child(3n+1)){
  border-left:1px solid var(--mac-linie)}
html[data-qps="5"] .h5-tv-kachel:nth-child(n+4){
  border-top:1px solid var(--mac-linie)}
html[data-qps="5"] .h5-tv-k-top{font-size:.72rem;opacity:.72;line-height:1.3}
html[data-qps="5"] .h5-tv-k-num{
  font-size:1.5rem;font-weight:700;line-height:1.25;
  font-variant-numeric:tabular-nums}
html[data-qps="5"] .h5-tv-k-sub{font-size:.68rem;opacity:.72;line-height:1.3}
html[data-qps="5"] .h5-tv-lern{cursor:pointer}
html[data-qps="5"] .h5-tv-lern-num{
  font-size:2.1rem;font-weight:700;line-height:1.1;
  color:var(--accent,var(--static-frame,#4aa8e0));font-variant-numeric:tabular-nums}
html[data-qps="5"] .h5-tv-lern-txt{font-size:.86rem;margin-top:2px}
html[data-qps="5"] .h5-tv-lern-sub{font-size:.74rem;opacity:.7;margin-top:6px}
html[data-qps="5"] .h5-tv-leer,
html[data-qps="5"] .h5-tv-ende{
  padding:14px 12px;border-radius:14px;text-align:center;
  font-size:.82rem;color:var(--mac-tx);opacity:.8;
  background:var(--mac-glas-k);border:1px solid var(--mac-linie)}
/* Die Nachrichtenkarten kommen aus _newsKarte() -- hier bekommen sie
   nur den Abstand und den Grund der Telefonfassung. */
html[data-qps="5"] .h5-tv .news-karte{margin:0 0 10px}

/* ---- Rechte Seite: Verzeichnis ---- */
html[data-qps="5"] .h5-bib{
  display:flex;flex-direction:column;gap:14px;
  padding:28px 10px 36px;   /* pt-h5-seiten-v2 und -v3, siehe .h5-tv */
  color:var(--mac-tx)}
html[data-qps="5"] .h5-bib-kopf{
  padding:2px 4px;font-size:1.05rem;font-weight:700;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.7)}
html[data-qps="5"] .h5-bib-gruppe{
  padding:12px 10px 14px;border-radius:20px;
  background:var(--mac-glas-k);border:1px solid var(--mac-linie);
  box-shadow:var(--mac-saum);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%)}
html[data-qps="5"] .h5-bib-gruppe h3{
  margin:0 0 10px;padding:0 4px;font-size:.82rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;opacity:.65}
html[data-qps="5"] .h5-bib-git{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px 4px}
html[data-qps="5"] .h5-bib-app{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:0;border:0;background:none;cursor:pointer;color:inherit;
  -webkit-user-select:none;user-select:none}
html[data-qps="5"] .h5-bib-app .mac-ico{width:54px;height:54px;border-radius:14px}
html[data-qps="5"] .h5-bib-app .mac-ico-txt{font-size:.88rem}
html[data-qps="5"] .h5-bib-lbl{
  max-width:74px;font-size:.66rem;line-height:1.3;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* /pt-h5-seiten-v1 ------------------------------------------------------ */


/* ═══ pt-dienstplan-v1 ══════════════════════════════════════════════════
   Alle Farbflaechen sind halbtransparent und ziehen ihre Farbe aus der
   Rahmenfarbe des Schnellprofils -- wie die uebrigen Werkzeuge. Die
   Arten unterscheiden sich in der Saettigung und im Buchstaben, nicht
   in der Farbfamilie; damit bleibt der Plan auch in jedem Profil und
   im dunklen Modus ruhig.
   ══════════════════════════════════════════════════════════════════════ */
:root{ --dp-a: var(--accent, var(--static-frame, #4aa8e0)); }

.dp-laden{padding:24px 6px;color:var(--c-muted);font-size:.92rem}

.dp-kopf{display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  justify-content:space-between;margin-bottom:14px;padding:12px 16px}
.dp-navmon{display:flex;align-items:center;gap:6px}
.dp-monname{font-size:1.05rem;font-weight:700;min-width:9.5em;text-align:center}
.dp-kopfzahlen{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.dp-kz{font-size:.86rem;color:var(--c-muted)}
.dp-kz b{color:var(--c-text);font-size:1rem}
.dp-plus b{color:#2d9e5a}
.dp-minus b{color:#e07a3c}
.dp-kopfakt{display:flex;gap:6px;flex-wrap:wrap}

.dp-stift{margin-bottom:14px;padding:12px 16px}
.dp-stift-titel{font-size:.74rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--c-muted);margin-bottom:9px;
  display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}
.dp-stift-hilfe{text-transform:none;letter-spacing:0;font-weight:500;
  font-size:.74rem;opacity:.85;cursor:help}
.dp-stifte{display:flex;gap:7px;flex-wrap:wrap}
.dp-p{display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 7px;
  border-radius:9px;border:1px solid var(--c-border);background:var(--c-white);
  color:var(--c-text);font-family:inherit;font-size:.85rem;cursor:pointer;
  transition:border-color .12s,background .12s}
.dp-p:hover{border-color:var(--dp-a)}
.dp-p.aktiv{border-color:var(--dp-a);
  background:color-mix(in srgb, var(--dp-a) 14%, transparent);font-weight:600}
.dp-p-kurz{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:6px;font-size:.76rem;font-weight:700;
  background:color-mix(in srgb, var(--dp-a) 18%, transparent);flex:0 0 auto}
.dp-p-dienst .dp-p-kurz,.dp-p-kurz.dp-p-dienst{
  background:color-mix(in srgb, var(--dp-a) 46%, transparent)}
.dp-p-postdienst .dp-p-kurz,.dp-p-kurz.dp-p-postdienst{
  background:color-mix(in srgb, var(--dp-a) 26%, transparent)}
.dp-p-wochenruhe .dp-p-kurz,.dp-p-kurz.dp-p-wochenruhe{
  background:color-mix(in srgb, var(--dp-a) 20%, transparent)}
.dp-p-leeren .dp-p-kurz{background:color-mix(in srgb, var(--c-muted) 22%, transparent)}

.dp-raster{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:16px;
  align-items:start}
.dp-links{min-width:0}
.dp-rechts{display:flex;flex-direction:column;gap:14px}

.dp-kal{padding:12px 14px}
.dp-kal-kopf,.dp-kal-raster{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.dp-kal-wt{text-align:center;font-size:.72rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--c-muted);
  padding-bottom:6px}
.dp-t{position:relative;display:flex;flex-direction:column;align-items:flex-start;
  gap:1px;min-height:62px;padding:6px 7px;border-radius:9px;
  border:1px solid var(--c-border);background:var(--c-white);color:var(--c-text);
  font-family:inherit;cursor:pointer;text-align:left;
  transition:border-color .1s,background .1s}
.dp-t:hover{border-color:var(--dp-a)}
.dp-t-nr{font-size:.82rem;font-weight:700;line-height:1.1}
.dp-t-kurz{position:absolute;top:5px;right:6px;font-size:.72rem;font-weight:700;
  opacity:.85}
.dp-t-std{font-size:.72rem;color:var(--c-muted);margin-top:auto}
.dp-t-punkt{position:absolute;bottom:6px;right:7px;width:5px;height:5px;
  border-radius:50%;background:var(--dp-a);opacity:.7}
.dp-fremd{opacity:.42}
.dp-we .dp-t-nr{color:var(--c-muted)}
.dp-heute{outline:2px solid var(--dp-a);outline-offset:-2px}
.dp-feier .dp-t-nr::after{content:"·";margin-left:3px;color:var(--dp-a)}

.dp-a-dienst{background:color-mix(in srgb, var(--dp-a) 30%, transparent);
  border-color:color-mix(in srgb, var(--dp-a) 45%, transparent)}
.dp-a-postdienst{background:color-mix(in srgb, var(--dp-a) 15%, transparent)}
.dp-a-wochenruhe{background:color-mix(in srgb, var(--dp-a) 11%, transparent)}
.dp-a-urlaub{background:color-mix(in srgb, var(--dp-a) 20%, transparent);
  border-style:dashed}
.dp-a-fortbildung{background:color-mix(in srgb, var(--dp-a) 20%, transparent);
  border-style:dotted}
.dp-a-krank{background:color-mix(in srgb, var(--c-muted) 16%, transparent);
  border-style:dashed}
.dp-a-zeitausgleich,.dp-a-frei{background:color-mix(in srgb, var(--c-muted) 10%, transparent)}
.dp-a-feiertag{background:color-mix(in srgb, var(--dp-a) 8%, transparent)}

.dp-kal-fuss{margin-top:10px;font-size:.76rem;color:var(--c-muted);line-height:1.5}

.dp-block{padding:12px 14px}
.dp-b-titel{font-size:.72rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dp-a);margin-bottom:9px}
.dp-tab{width:100%;border-collapse:collapse;font-size:.84rem}
.dp-tab th{text-align:right;font-size:.7rem;font-weight:700;color:var(--c-muted);
  text-transform:uppercase;letter-spacing:.04em;padding:0 0 5px}
.dp-tab th:first-child,.dp-tab td:first-child{text-align:left}
.dp-tab td{text-align:right;padding:3px 0;font-variant-numeric:tabular-nums}
.dp-tab tbody tr+tr td{border-top:1px solid var(--c-border)}
.dp-zeilen{display:flex;flex-direction:column;gap:4px}
.dp-z{display:flex;justify-content:space-between;gap:10px;font-size:.84rem}
.dp-z span{color:var(--c-muted)}
.dp-z b{font-variant-numeric:tabular-nums}

.dp-ueber{margin-top:12px;padding-top:11px;border-top:1px solid var(--c-border)}
.dp-ueber label{display:block;font-size:.76rem;color:var(--c-muted);margin-bottom:5px}
.dp-ueber-zeile{display:flex;gap:7px}
.dp-ueber-zeile input{flex:1 1 auto;min-width:0;padding:8px 10px;border-radius:8px;
  border:1px solid var(--dp-a);background:var(--c-white);color:var(--c-text);
  font-family:inherit;font-size:.9rem;outline:none}
.dp-ueber-hinweis{margin-top:6px;font-size:.74rem;color:var(--c-muted);line-height:1.5}

.dp-hinweise{margin-top:14px;padding:12px 14px;
  background:color-mix(in srgb, var(--dp-a) 7%, var(--c-card,#fff))}
.dp-hw{font-size:.85rem;line-height:1.55;padding:3px 0}
.dp-hw+.dp-hw{border-top:1px solid var(--c-border);margin-top:4px;padding-top:7px}
.dp-hw-fuss{margin-top:9px;font-size:.74rem;color:var(--c-muted);line-height:1.5}

.dp-einst{margin-top:14px;padding:14px 16px}
.dp-einst-txt{font-size:.83rem;color:var(--c-muted);line-height:1.55;margin:0 0 12px}
.dp-felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;margin-bottom:12px}
.dp-felder label{display:flex;flex-direction:column;gap:4px;font-size:.76rem;
  color:var(--c-muted)}
.dp-felder input{padding:8px 10px;border-radius:8px;border:1px solid var(--c-border);
  background:var(--c-white);color:var(--c-text);font-family:inherit;font-size:.9rem}
.dp-wt-zeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.dp-wt-zeile>span{font-size:.76rem;color:var(--c-muted)}
.dp-wt-zeile>div{display:flex;gap:5px;flex-wrap:wrap}
.dp-wt{padding:6px 11px;border-radius:8px;border:1px solid var(--c-border);
  background:var(--c-white);color:var(--c-text);font-family:inherit;
  font-size:.82rem;cursor:pointer}
.dp-wt.aktiv{border-color:var(--dp-a);font-weight:700;
  background:color-mix(in srgb, var(--dp-a) 16%, transparent)}
.dp-zr-check{display:flex;align-items:center;gap:7px;font-size:.83rem;
  color:var(--c-text);margin:4px 0 0}
.dp-einst-akt{display:flex;gap:7px;justify-content:flex-end;margin-top:14px}

.dp-menue{max-width:430px}
.dp-m-raster{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:4px 0 12px}
.dp-m-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 10px 7px 7px;
  border-radius:8px;border:1px solid var(--c-border);background:var(--c-white);
  color:var(--c-text);font-family:inherit;font-size:.85rem;cursor:pointer;
  text-align:left}
.dp-m-btn:hover{border-color:var(--dp-a)}
.dp-m-btn.aktiv{border-color:var(--dp-a);
  background:color-mix(in srgb, var(--dp-a) 14%, transparent);font-weight:600}
.dp-m-lab{display:block;font-size:.76rem;color:var(--c-muted);margin-bottom:5px}
.dp-m-zeit{margin:0 0 12px;padding:9px 11px;border-radius:9px;
  background:color-mix(in srgb, var(--dp-a) 8%, transparent)}
.dp-m-zeit-zeile{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:5px}
.dp-m-zeit-zeile input{padding:7px 9px;border-radius:8px;
  border:1px solid var(--c-border);background:var(--c-white);color:var(--c-text);
  font-family:inherit;font-size:.88rem}
.dp-m-zeit-zeile span{font-size:.84rem;color:var(--c-muted)}
.dp-zr{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 10px}
.dp-zr label{display:flex;flex-direction:column;gap:4px;font-size:.76rem;
  color:var(--c-muted)}
.dp-zr input,.dp-zr select{padding:8px 10px;border-radius:8px;
  border:1px solid var(--c-border);background:var(--c-white);color:var(--c-text);
  font-family:inherit;font-size:.9rem}
.dp-zr label:nth-child(3){grid-column:1 / -1}

@media (max-width: 1080px){
  .dp-raster{grid-template-columns:1fr}
  .dp-rechts{flex-direction:row;flex-wrap:wrap}
  .dp-rechts>.card{flex:1 1 260px}
}
@media (max-width: 640px){
  .dp-kopf{flex-direction:column;align-items:stretch}
  .dp-kopfakt{justify-content:stretch}
  .dp-kopfakt .btn{flex:1 1 auto}
  .dp-t{min-height:52px;padding:4px 5px}
  .dp-t-std{font-size:.66rem}
  .dp-kal{padding:10px 8px}
  .dp-kal-kopf,.dp-kal-raster{gap:3px}
  .dp-m-raster{grid-template-columns:1fr}
  .dp-zr{grid-template-columns:1fr}
}
/* ═══ pt-dienstplan-v1-ende ════════════════════════════════════════════ */


/* ═══ pt-dienstplan-team-v1 ════════════════════════════════════════════ */
.dp-team{margin-top:14px;padding:12px 14px}
.dp-team-kopf{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;flex-wrap:wrap}
.dp-team-schalter{display:inline-flex;align-items:center;gap:7px;
  font-size:.82rem;color:var(--c-text);cursor:pointer}
.dp-team-leer{font-size:.84rem;color:var(--c-muted);line-height:1.55;
  padding:4px 0 2px}
.dp-team-rollen{overflow-x:auto;margin:4px -2px 0;padding:0 2px 4px}
.dp-team-tab{border-collapse:collapse;font-size:.76rem;
  font-variant-numeric:tabular-nums}
.dp-team-tab th,.dp-team-tab td{padding:0;text-align:center}
.dp-team-name{position:sticky;left:0;z-index:1;text-align:left!important;
  background:var(--c-card,#fff);padding:3px 10px 3px 2px!important;
  white-space:nowrap;font-weight:600;max-width:150px;overflow:hidden;
  text-overflow:ellipsis}
.dp-team-tab thead .dp-team-name{font-size:.7rem;font-weight:700;
  color:var(--c-muted);text-transform:uppercase;letter-spacing:.04em}
.dp-team-d{width:24px;min-width:24px;height:24px;border:1px solid var(--c-border);
  border-radius:5px;font-size:.72rem;font-weight:700}
.dp-team-tab thead .dp-team-d{border:0;font-weight:500;color:var(--c-muted);
  line-height:1.05;padding-bottom:3px!important}
.dp-team-wt{display:block;font-size:.6rem;opacity:.75}
.dp-team-we{color:var(--c-muted)}
.dp-team-tab tbody .dp-team-we{background:color-mix(in srgb, var(--c-muted) 7%, transparent)}
.dp-team-fei{color:var(--dp-a)}
.dp-team-heute{outline:1.5px solid var(--dp-a);outline-offset:-1px}
.dp-team-fuss{margin-top:9px;font-size:.74rem;color:var(--c-muted);line-height:1.5}

.dp-m-team{margin:0 0 12px;padding:9px 11px;border-radius:9px;
  background:color-mix(in srgb, var(--dp-a) 8%, transparent);
  font-size:.84rem;line-height:1.5}
.dp-m-team .dp-m-lab{margin-bottom:4px}

@media (max-width: 640px){
  .dp-team-d{width:21px;min-width:21px;height:21px;font-size:.66rem}
  .dp-team-name{max-width:96px;font-size:.72rem}
}
/* ═══ pt-dienstplan-team-v1-ende ═══════════════════════════════════════ */
/* ═══ pt-kb-mobile-lesbar-v1 ═══════════════════════════════════════════
   Steht bewusst am DATEIENDE: Beide Regeln unten kollidieren mit
   frueheren gleicher Spezifitaet. Wer sie verschiebt, hebt sie auf.
   ══════════════════════════════════════════════════════════════════════ */

/* Silbentrennung statt Bruch an beliebiger Stelle. Das Dokument traegt
   lang="de", der Browser kennt also die Trennstellen. Gebrochen wird
   nur noch, wenn ein Wort allein nicht in die Zeile passt. */
.kb-md,.kb-ed-prev{
  word-break:normal;
  overflow-wrap:break-word;
  hyphens:auto;
  -webkit-hyphens:auto;
}
.kb-md th,.kb-md td,.kb-ed-prev th,.kb-ed-prev td{
  word-break:normal;
  overflow-wrap:break-word;
  hyphens:auto;
  -webkit-hyphens:auto;
}
/* Abkuerzungen, Wirkstoffnamen und Codes nicht trennen. */
.kb-md code,.kb-md kbd,.kb-md samp{hyphens:none;-webkit-hyphens:none}

@media (max-width:820px){
  /* Der Titel bekommt seine eigene Zeile zurueck. `flex:1 1 100%`
     statt `width:100%`, weil die Flex-Basis die Breite schlaegt. */
  .kb-det-head{flex-wrap:wrap;gap:8px;align-items:center}
  .kb-det-title{flex:1 1 100%;width:100%;order:3;margin:8px 0 0;
                line-height:1.22;overflow-wrap:break-word;hyphens:auto}
  .kb-det-learned,.kb-det-edit,.kb-det-back,.kb-det-report{
    flex:0 0 auto;order:1;font-size:.8rem;padding:6px 11px}

  /* Die Tabelle bleibt schmal, wenn sie passt, und scrollt waagrecht,
     wenn nicht -- statt den Inhalt in 88 px zu pressen. */
  .kb-md table,.kb-ed-prev table{
    display:block;
    width:max-content;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .kb-md th,.kb-md td,.kb-ed-prev th,.kb-ed-prev td{
    min-width:9em;
    white-space:normal;
  }
  /* Die erste Spalte traegt meist den Begriff -- sie bekommt mehr. */
  .kb-md tr > *:first-child,.kb-ed-prev tr > *:first-child{min-width:10em}
}
@media (max-width:480px){
  .kb-md th,.kb-md td,.kb-ed-prev th,.kb-ed-prev td{min-width:8.5em}
  .kb-md tr > *:first-child,.kb-ed-prev tr > *:first-child{min-width:9em}
}
/* ═══ pt-kb-mobile-lesbar-v1-ende ══════════════════════════════════════ */
/* ═══ pt-burger-rahmen-v1 ══════════════════════════════════════════════
   Steht am DATEIENDE: Die Regeln unten heben `border:0` und das
   Pseudoelement aus dem Deluxe-Block auf. Wer sie nach oben verschiebt,
   hebt sie auf.

   Das Burger-Panel scrollt (pt-burger-scroll-v1). Ein absolut
   positionierter Verlaufsrahmen liegt im Scroll-Inhalt und wandert
   beim Scrollen mit; eine Border klebt an der Box. Deshalb hier eine
   echte Border statt des Pseudoelements.
   ══════════════════════════════════════════════════════════════════════ */
html[data-deluxe="on"] .header.nav-collapsed .header-nav{
  border:var(--dlx-bw,1.5px) solid var(--accent,var(--static-frame,#4aa8e0));
}
html[data-deluxe="on"] .header.nav-collapsed .header-nav::before{
  display:none;
}
/* Die fest eingebauten Effekte setzen kein --accent, sondern nur
   --dlx-grad. Ihre Leitfarben sind dieselben, die die vorhandenen
   Regeln fuer den ruhenden Rahmen verwenden. */
html[data-deluxe="on"][data-deluxe-fx="gold"] .header.nav-collapsed .header-nav{border-color:#f0a830}
html[data-deluxe="on"][data-deluxe-fx="rot"] .header.nav-collapsed .header-nav{border-color:#e63946}
html[data-deluxe="on"][data-deluxe-fx="eis"] .header.nav-collapsed .header-nav{border-color:#4aa8e0}
html[data-deluxe="on"][data-deluxe-fx="polarlicht"] .header.nav-collapsed .header-nav{border-color:#a855f7}
html[data-deluxe="on"][data-deluxe-fx="sonne"] .header.nav-collapsed .header-nav{border-color:#f0a830}
html[data-deluxe="on"][data-deluxe-fx="smaragd"] .header.nav-collapsed .header-nav{border-color:#2d9e5a}
/* ═══ pt-burger-rahmen-v1-ende ═════════════════════════════════════════ */

/* pt-ausbildung-v1 ------------------------------------------------------
   Ausbildungsbegleiter. Flaechen halbtransparent aus der Rahmenfarbe,
   wie ueberall in AccessMed. */
.ab-klein{font-size:.78rem;color:var(--c-muted)}
.ab-faecher{margin-bottom:12px}
.ab-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ab-chip{padding:6px 12px;border-radius:999px;cursor:pointer;font:inherit;font-size:.85rem;
  border:1px solid var(--c-border);background:transparent;color:inherit}
.ab-chip.an{border-color:var(--accent,var(--static-frame,#4aa8e0));
  background:color-mix(in srgb,var(--accent,var(--static-frame,#4aa8e0)) 18%,transparent);font-weight:600}
.ab-reiter{display:flex;gap:6px;margin:0 0 12px;flex-wrap:wrap}
.ab-reiter-k{padding:7px 14px;border-radius:9px;border:1px solid var(--c-border);background:transparent;
  color:inherit;font:inherit;font-size:.88rem;cursor:pointer}
.ab-reiter-k.an{background:color-mix(in srgb,var(--accent,var(--static-frame,#4aa8e0)) 16%,transparent);
  border-color:var(--accent,var(--static-frame,#4aa8e0));font-weight:600}
.ab-werk{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.ab-suche{flex:1 1 220px;min-width:0;padding:8px 11px;border:1px solid var(--c-border);border-radius:8px;
  font:inherit;font-size:.9rem;background:transparent;color:inherit}
.ab-fach{margin-bottom:12px}
.ab-fach-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.ab-teil{border-top:1px solid var(--c-border);padding:6px 0}
.ab-teil summary{display:flex;align-items:center;gap:10px;cursor:pointer;padding:6px 0;font-weight:600;list-style:none}
.ab-teil summary::-webkit-details-marker{display:none}
.ab-teil summary span:first-child{flex:1;min-width:0}
.ab-balken{display:inline-block;width:90px;height:6px;border-radius:3px;overflow:hidden;
  background:color-mix(in srgb,var(--c-muted) 25%,transparent);flex:0 0 auto}
.ab-balken i{display:block;height:100%;background:var(--accent,var(--static-frame,#4aa8e0))}
.ab-balken-k{width:60px}
.ab-block{margin:14px 0 2px;font-weight:600;font-size:.86rem}   /* pt-ausbildung-block-v1 */
.ab-bereich{margin:10px 0 4px;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--c-muted)}
.ab-zeile{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:8px;flex-wrap:wrap}
.ab-zeile:hover{background:color-mix(in srgb,var(--accent,var(--static-frame,#4aa8e0)) 7%,transparent)}
.ab-zeile.fertig .ab-text{opacity:.6}
.ab-zeile.ab-ein{margin-left:22px}
.ab-kopf .ab-text{font-weight:600}
.ab-nr{flex:0 0 auto;min-width:2.4em;font-size:.75rem;color:var(--c-muted);font-variant-numeric:tabular-nums}
.ab-text{flex:1 1 240px;min-width:0;font-size:.88rem;line-height:1.4}
.ab-ctl{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto}
.ab-zaehler{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.ab-zaehler.voll b{color:#2e9e5b}
.ab-pm{width:28px;height:28px;border-radius:8px;border:1px solid var(--c-border);background:transparent;
  color:inherit;font-size:1rem;line-height:1;cursor:pointer}
.ab-pm:hover{border-color:var(--accent,var(--static-frame,#4aa8e0))}
.ab-haken{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;cursor:pointer}
.ab-leer{padding:14px;color:var(--c-muted);text-align:center}
.ab-hinweis{margin:6px 2px 18px;font-size:.76rem;line-height:1.5;color:var(--c-muted)}
.ab-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.ab-form input{flex:1 1 180px;min-width:0;padding:7px 10px;border:1px solid var(--c-border);border-radius:8px;
  font:inherit;font-size:.88rem;background:transparent;color:inherit}
.ab-form label input{flex:0 0 auto;margin-left:4px}
.ab-tab-rahmen{overflow-x:auto}
.ab-tab{width:100%;border-collapse:collapse;font-size:.86rem}
.ab-tab th,.ab-tab td{padding:7px 8px;border-bottom:1px solid var(--c-border);text-align:left;vertical-align:top}
.ab-tab th{font-size:.74rem;color:var(--c-muted);font-weight:600}
.ab-nowrap{white-space:nowrap}
@media (prefers-reduced-motion:reduce){.ab-balken i{transition:none}}
/* pt-ausbildung-rz-v1: Links auf die offiziellen Rasterzeugnisse */
.ab-beginn input{margin-left:6px;padding:4px 7px;border:1px solid var(--c-border);border-radius:7px;font:inherit;background:transparent;color:inherit}
.ab-rz{margin:4px 0 10px;padding:10px 12px;border-radius:10px;
  background:color-mix(in srgb,var(--accent,var(--static-frame,#4aa8e0)) 8%,transparent)}
.ab-rz-kopf{font-size:.8rem;font-weight:600;margin-bottom:6px}
.ab-rz-gr{margin:6px 0 2px}
.ab-rz-link{display:inline-block;margin:3px 10px 3px 0;font-size:.84rem;color:var(--accent,var(--static-frame,#4aa8e0))}
/* /pt-ausbildung-v1 ----------------------------------------------------- */

/* pt-offline-v1 ---------------------------------------------------------
   Offline-Modus (nur Admin/Entwickler): Bedienfeld im Admin-Bereich und
   Hinweis beim Offline-Arbeiten. */
#offPanel{margin:0 0 16px;padding:14px 16px;border-radius:12px;background:var(--c-white);
  border:1px solid var(--c-border)}
.off-kopf{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.off-klein{font-size:.8rem;color:var(--c-muted);line-height:1.45}
.off-warn{color:#e08a1e}
.off-hinweis{margin-top:8px}
.off-knoepfe{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.off-balken{height:6px;border-radius:3px;overflow:hidden;margin-top:6px;
  background:color-mix(in srgb,var(--c-muted) 25%,transparent)}
.off-balken i{display:block;height:100%;background:var(--accent,var(--static-frame,#4aa8e0))}
/* pt-offline-titel-v1: Chip in der Titelzeile, Farbe aus dem Rahmen */
.off-titel{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;white-space:nowrap;
  height:24px;padding:0 10px 0 8px;border-radius:999px;font-size:.74rem;line-height:1;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
  color:inherit;pointer-events:auto;cursor:default;
  background:color-mix(in srgb,var(--static-frame,#4aa8e0) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--static-frame,#4aa8e0) 45%,transparent)}
.off-titel[hidden]{display:none}
.off-titel::before{content:"";width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:var(--static-frame,#4aa8e0);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--static-frame,#4aa8e0) 22%,transparent)}
.off-titel b{font-weight:700;color:var(--static-frame,#4aa8e0)}
.off-titel span{opacity:.75;font-variant-numeric:tabular-nums}
.header > .off-titel{margin-left:2px}
html[data-qps="5"] .h5-bar > .off-titel{margin-left:auto}
html[data-qps="5"] .mac-bar-r > .off-titel{height:20px;margin-right:6px;font-size:.72rem}
/* /pt-offline-v1 -------------------------------------------------------- */
/* pt-offline-v2: Wahl der Zusatzgruppen */
.off-gruppen{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px}
.off-gruppen label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
/* pt-dnd-v1 ---------------------------------------------------------------
   D&D im Mac-Fenster. Das Fenster (.page.active im Aufbau 5) hat eine feste
   Hoehe; die App fuellt es ganz aus und scrollt nur im Verlauf und in den
   Seitenleisten. Farben aus dem Mac-Thema (--mac-*) und der Rahmenfarbe. */
html[data-qps="5"] :is(#page-dnd,#page-academy).active{padding:0!important;overflow:hidden!important}
:is(#page-dnd,#page-academy) .dnd{--dnd-akz:var(--accent,var(--static-frame,#4aa8e0));
  position:relative;display:grid;grid-template-columns:230px minmax(0,1fr) 300px;height:100%;
  color:var(--mac-tx,var(--c-text));font-size:.92rem}
:is(#page-dnd,#page-academy) .dnd-leise{color:var(--mac-tx-leise,var(--c-muted))}
:is(#page-dnd,#page-academy) .dnd-klein{font-size:.8rem;line-height:1.45}
:is(#page-dnd,#page-academy) .dnd-pad{padding:12px 14px}
:is(#page-dnd,#page-academy) .dnd-knopf{border:1px solid color-mix(in srgb,var(--dnd-akz) 40%,transparent);
  background:color-mix(in srgb,var(--dnd-akz) 12%,transparent);color:inherit;border-radius:8px;
  padding:4px 10px;font:inherit;font-size:.82rem;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
:is(#page-dnd,#page-academy) .dnd-knopf:hover{background:color-mix(in srgb,var(--dnd-akz) 22%,transparent)}
:is(#page-dnd,#page-academy) .dnd-nur-schmal{display:none}

/* Kampagnen */
:is(#page-dnd,#page-academy) .dnd-liste{border-right:1px solid var(--mac-linie,var(--c-border));overflow:auto;
  background:color-mix(in srgb,var(--dnd-akz) 5%,transparent)}
:is(#page-dnd,#page-academy) .dnd-liste-kopf{display:flex;justify-content:space-between;align-items:center;
  padding:12px 12px 8px;position:sticky;top:0;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
:is(#page-dnd,#page-academy) .dnd-li{margin:2px 8px;padding:8px 10px;border-radius:9px;cursor:pointer}
:is(#page-dnd,#page-academy) .dnd-li:hover{background:color-mix(in srgb,var(--dnd-akz) 10%,transparent)}
:is(#page-dnd,#page-academy) .dnd-li.an{background:color-mix(in srgb,var(--dnd-akz) 20%,transparent)}
:is(#page-dnd,#page-academy) .dnd-li-t{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(#page-dnd,#page-academy) .dnd-li-u{font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Mitte */
:is(#page-dnd,#page-academy) .dnd-spiel{display:flex;flex-direction:column;min-width:0;min-height:0}
:is(#page-dnd,#page-academy) .dnd-kopf{display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-bottom:1px solid var(--mac-linie,var(--c-border))}
:is(#page-dnd,#page-academy) .dnd-kopf-mitte{flex:1;min-width:0}
:is(#page-dnd,#page-academy) .dnd-titel{font-weight:700;font-size:1rem;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(#page-dnd,#page-academy) .dnd-ort{display:flex;align-items:center;gap:6px;font-size:.82rem;margin-top:2px;min-width:0}
:is(#page-dnd,#page-academy) .dnd-ort svg{color:var(--dnd-akz);flex:0 0 auto}
:is(#page-dnd,#page-academy) .dnd-ort > span:first-of-type{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(#page-dnd,#page-academy) .dnd-kopf-tp{width:120px;cursor:pointer;flex:0 0 auto}
:is(#page-dnd,#page-academy) .dnd-tp-zahl{font-weight:700;font-size:.95rem;text-align:right;font-variant-numeric:tabular-nums}
:is(#page-dnd,#page-academy) .dnd-tp-zahl span{font-weight:500;opacity:.6}
:is(#page-dnd,#page-academy) .dnd-tp-zahl em{font-style:normal;color:var(--dnd-akz);font-size:.8rem}
:is(#page-dnd,#page-academy) .dnd-balken{height:6px;border-radius:3px;overflow:hidden;margin-top:3px;
  background:color-mix(in srgb,var(--mac-tx,#000) 14%,transparent)}
:is(#page-dnd,#page-academy) .dnd-balken i{display:block;height:100%;background:#22a55a;transition:width .4s}
:is(#page-dnd,#page-academy) .dnd-balken i.gelb{background:#d99a15}
:is(#page-dnd,#page-academy) .dnd-balken i.rot{background:#dc3b3b}
:is(#page-dnd,#page-academy) .dnd-balken-gross{height:10px;border-radius:5px}
:is(#page-dnd,#page-academy) .dnd-balken-ep i{background:var(--dnd-akz)}
:is(#page-dnd,#page-academy) .dnd-chip{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:999px;font-size:.74rem;
  background:color-mix(in srgb,var(--dnd-akz) 14%,transparent);border:1px solid color-mix(in srgb,var(--dnd-akz) 35%,transparent);white-space:nowrap}
:is(#page-dnd,#page-academy) .dnd-chip-rot{background:rgba(220,59,59,.14);border-color:rgba(220,59,59,.4)}
:is(#page-dnd,#page-academy) .dnd-chip button{border:0;background:none;color:inherit;cursor:pointer;padding:0 0 0 2px;font-size:.9rem;line-height:1}
:is(#page-dnd,#page-academy) .dnd-chip-knopf{cursor:pointer;font:inherit;font-size:.78rem;color:inherit}
:is(#page-dnd,#page-academy) .dnd-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}

:is(#page-dnd,#page-academy) .dnd-verlauf{flex:1;overflow:auto;padding:18px 18px 8px;min-height:0}
:is(#page-dnd,#page-academy) .dnd-n{position:relative;margin:0 auto 14px;max-width:760px}
:is(#page-dnd,#page-academy) .dnd-n-sp{display:flex;flex-direction:column;align-items:flex-end}
:is(#page-dnd,#page-academy) .dnd-blase{max-width:82%;padding:9px 13px;border-radius:14px 14px 4px 14px;
  background:color-mix(in srgb,var(--dnd-akz) 20%,transparent);border:1px solid color-mix(in srgb,var(--dnd-akz) 38%,transparent)}
:is(#page-dnd,#page-academy) .dnd-blase p,:is(#page-dnd,#page-academy) .dnd-erz p{margin:0 0 .6em}
:is(#page-dnd,#page-academy) .dnd-blase p:last-child,:is(#page-dnd,#page-academy) .dnd-erz p:last-child{margin-bottom:0}
:is(#page-dnd,#page-academy) .dnd-erz{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif;font-size:1.02rem;line-height:1.62}
:is(#page-dnd,#page-academy) .dnd-n-wurf{display:flex;justify-content:center;align-items:center;gap:4px}
:is(#page-dnd,#page-academy) .dnd-w-chip{padding:3px 12px;border-radius:999px;font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums;
  background:color-mix(in srgb,var(--mac-tx,#000) 8%,transparent);border:1px dashed color-mix(in srgb,var(--mac-tx,#000) 25%,transparent)}
:is(#page-dnd,#page-academy) .dnd-x{border:0;background:none;color:inherit;opacity:.4;cursor:pointer;font-size:1rem}
:is(#page-dnd,#page-academy) .dnd-x:hover{opacity:1}
:is(#page-dnd,#page-academy) .dnd-wurfe{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
:is(#page-dnd,#page-academy) .dnd-wurf{font-size:.76rem;padding:3px 9px;border-radius:8px;font-variant-numeric:tabular-nums;
  border:1px solid transparent}
:is(#page-dnd,#page-academy) .dnd-wurf.gut{background:rgba(34,165,90,.13);border-color:rgba(34,165,90,.38)}
:is(#page-dnd,#page-academy) .dnd-wurf.schlecht{background:rgba(220,59,59,.12);border-color:rgba(220,59,59,.38)}
:is(#page-dnd,#page-academy) .dnd-wurf.neutral{background:color-mix(in srgb,var(--dnd-akz) 12%,transparent);border-color:color-mix(in srgb,var(--dnd-akz) 35%,transparent)}
:is(#page-dnd,#page-academy) .dnd-wurf.krit{font-weight:700;box-shadow:0 0 0 2px rgba(217,154,21,.5)}
:is(#page-dnd,#page-academy) .dnd-wurf.patzer{font-weight:700;text-decoration:underline wavy rgba(220,59,59,.6)}
:is(#page-dnd,#page-academy) .dnd-aend{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
:is(#page-dnd,#page-academy) .dnd-aend span{font-size:.74rem;padding:2px 8px;border-radius:6px;
  background:color-mix(in srgb,var(--mac-tx,#000) 7%,transparent)}
:is(#page-dnd,#page-academy) .dnd-n-akt{display:flex;gap:10px;margin-top:4px;opacity:0;transition:opacity .15s}
:is(#page-dnd,#page-academy) .dnd-n:hover .dnd-n-akt,:is(#page-dnd,#page-academy) .dnd-n-akt.dnd-sichtbar{opacity:1}
:is(#page-dnd,#page-academy) .dnd-n-akt button{border:0;background:none;color:var(--mac-tx-leise,var(--c-muted));font:inherit;font-size:.75rem;cursor:pointer;padding:0}
:is(#page-dnd,#page-academy) .dnd-n-akt button:hover{color:var(--dnd-akz)}
:is(#page-dnd,#page-academy) .dnd-edit{width:100%;min-height:120px;padding:10px;border-radius:10px;font:inherit;
  border:1px solid var(--dnd-akz);background:var(--c-white);color:var(--c-text)}
:is(#page-dnd,#page-academy) .dnd-tippt{display:flex;align-items:center;gap:4px;font-size:.82rem;color:var(--mac-tx-leise,var(--c-muted));margin-top:6px}
:is(#page-dnd,#page-academy) .dnd-tippt i{width:6px;height:6px;border-radius:50%;background:var(--dnd-akz);animation:dndPunkt 1.2s infinite}
:is(#page-dnd,#page-academy) .dnd-tippt i:nth-child(2){animation-delay:.2s}
:is(#page-dnd,#page-academy) .dnd-tippt i:nth-child(3){animation-delay:.4s;margin-right:6px}
@keyframes dndPunkt{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
:is(#page-dnd,#page-academy) .dnd-fehler{margin-top:8px;padding:8px 10px;border-radius:8px;font-size:.85rem;
  background:rgba(220,59,59,.1);border:1px solid rgba(220,59,59,.35)}
:is(#page-dnd,#page-academy) .dnd-willkommen{max-width:420px;margin:8vh auto;text-align:center}
:is(#page-dnd,#page-academy) .dnd-willkommen p{color:var(--mac-tx-leise,var(--c-muted))}
:is(#page-dnd,#page-academy) .dnd-w-ico svg{width:72px;height:72px}

:is(#page-dnd,#page-academy) .dnd-eingabe{padding:8px 14px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--mac-linie,var(--c-border))}
:is(#page-dnd,#page-academy) .dnd-wuerfel{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:7px}
:is(#page-dnd,#page-academy) .dnd-wuerfel button{border:1px solid var(--mac-linie,var(--c-border));background:color-mix(in srgb,var(--mac-tx,#000) 5%,transparent);
  color:inherit;border-radius:7px;padding:2px 8px;font:inherit;font-size:.75rem;font-weight:600;cursor:pointer}
:is(#page-dnd,#page-academy) .dnd-wuerfel button:hover:not(:disabled){border-color:var(--dnd-akz);color:var(--dnd-akz)}
:is(#page-dnd,#page-academy) .dnd-feld{display:flex;gap:8px;align-items:flex-end}
:is(#page-dnd,#page-academy) .dnd-feld textarea{flex:1;resize:none;min-height:42px;max-height:180px;padding:10px 13px;border-radius:12px;
  border:1px solid color-mix(in srgb,var(--dnd-akz) 60%,transparent);background:var(--c-white);color:var(--c-text);
  font:inherit;font-size:.95rem;outline:none;line-height:1.4}
:is(#page-dnd,#page-academy) .dnd-senden{height:42px;padding:0 16px;border:0;border-radius:12px;background:var(--dnd-akz);color:#fff;
  font:inherit;font-weight:600;cursor:pointer}
#page-dnd button:disabled{opacity:.45;cursor:default}

/* Bogen */
:is(#page-dnd,#page-academy) .dnd-bogen{border-left:1px solid var(--mac-linie,var(--c-border));display:flex;flex-direction:column;min-height:0;
  background:color-mix(in srgb,var(--dnd-akz) 5%,transparent)}
:is(#page-dnd,#page-academy) .dnd-reiter{display:flex;gap:4px;padding:10px 10px 6px}
:is(#page-dnd,#page-academy) .dnd-reiter button{flex:1;border:0;border-radius:8px;padding:5px 0;font:inherit;font-size:.8rem;font-weight:600;
  color:inherit;background:transparent;cursor:pointer}
:is(#page-dnd,#page-academy) .dnd-reiter button.an{background:color-mix(in srgb,var(--dnd-akz) 22%,transparent)}
:is(#page-dnd,#page-academy) .dnd-reiter .dnd-knopf{flex:0 0 auto}
:is(#page-dnd,#page-academy) .dnd-bogen-inhalt{overflow:auto;padding:4px 10px 14px;flex:1}
:is(#page-dnd,#page-academy) .dnd-karte{padding:10px 12px;margin-bottom:8px;border-radius:12px;
  background:color-mix(in srgb,var(--c-white,#fff) 45%,transparent);border:1px solid var(--mac-linie,var(--c-border))}
:is(#page-dnd,#page-academy) .dnd-karte > b{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;color:var(--dnd-akz)}
:is(#page-dnd,#page-academy) .dnd-name{font-size:1.1rem;font-weight:700}
:is(#page-dnd,#page-academy) .dnd-ep{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:.74rem}
:is(#page-dnd,#page-academy) .dnd-ep .dnd-balken{flex:1;margin:0}
:is(#page-dnd,#page-academy) .dnd-zeile{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:2px 0}
:is(#page-dnd,#page-academy) .dnd-zeile > b{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--dnd-akz)}
:is(#page-dnd,#page-academy) .dnd-tp-gross{font-size:1.2rem;font-weight:700;font-variant-numeric:tabular-nums}
:is(#page-dnd,#page-academy) .dnd-tp-gross em{font-style:normal;font-size:.85rem;color:var(--dnd-akz)}
:is(#page-dnd,#page-academy) .dnd-plusminus{display:flex;gap:4px;margin-top:8px}
:is(#page-dnd,#page-academy) .dnd-plusminus button{flex:1;border:1px solid var(--mac-linie,var(--c-border));border-radius:7px;padding:3px 0;
  background:color-mix(in srgb,var(--mac-tx,#000) 5%,transparent);color:inherit;font:inherit;font-size:.76rem;cursor:pointer}
:is(#page-dnd,#page-academy) .dnd-werte{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:6px;margin-top:10px}
:is(#page-dnd,#page-academy) .dnd-werte div,:is(#page-dnd,#page-academy) .dnd-attr div,:is(#page-dnd,#page-academy) .dnd-stats div{display:flex;flex-direction:column;align-items:center;
  padding:6px 4px;border-radius:9px;background:color-mix(in srgb,var(--mac-tx,#000) 5%,transparent)}
:is(#page-dnd,#page-academy) .dnd-werte span,:is(#page-dnd,#page-academy) .dnd-attr span{font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;opacity:.7}
:is(#page-dnd,#page-academy) .dnd-werte b{font-size:1.05rem}
:is(#page-dnd,#page-academy) .dnd-attr{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
:is(#page-dnd,#page-academy) .dnd-attr b{font-size:1.15rem}
:is(#page-dnd,#page-academy) .dnd-attr em{font-style:normal;font-size:.72rem;opacity:.6}
:is(#page-dnd,#page-academy) .dnd-attr-eingabe input{width:56px;text-align:center;margin-top:2px;padding:3px;border-radius:6px;
  border:1px solid var(--mac-linie,var(--c-border));background:var(--c-white);color:var(--c-text)}
:is(#page-dnd,#page-academy) .dnd-fert div{display:flex;justify-content:space-between;font-size:.8rem;padding:1px 0;opacity:.7}
:is(#page-dnd,#page-academy) .dnd-fert div.geuebt{opacity:1;font-weight:600}
:is(#page-dnd,#page-academy) .dnd-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px}
:is(#page-dnd,#page-academy) .dnd-stats span{font-size:.68rem;text-align:center;opacity:.7}
:is(#page-dnd,#page-academy) .dnd-stats b{font-size:1.05rem;font-variant-numeric:tabular-nums}
:is(#page-dnd,#page-academy) .dnd-kampf{border-color:rgba(220,59,59,.45)}
:is(#page-dnd,#page-academy) .dnd-kampf > b{color:#dc3b3b}
:is(#page-dnd,#page-academy) .dnd-gegner{margin:6px 0}
:is(#page-dnd,#page-academy) .dnd-gegner.tot{opacity:.45;text-decoration:line-through}
:is(#page-dnd,#page-academy) .dnd-gold{font-size:1.2rem;font-weight:700;color:#c8931a}
:is(#page-dnd,#page-academy) .dnd-inv{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:5px 0;
  border-bottom:1px solid color-mix(in srgb,var(--mac-tx,#000) 8%,transparent)}
:is(#page-dnd,#page-academy) .dnd-inv em,:is(#page-dnd,#page-academy) .dnd-quest em,:is(#page-dnd,#page-academy) .dnd-npc em{display:block;font-style:normal;font-size:.74rem;opacity:.65}
:is(#page-dnd,#page-academy) .dnd-inv-anz{display:flex;align-items:center;gap:6px;flex:0 0 auto}
:is(#page-dnd,#page-academy) .dnd-inv-anz button{width:22px;height:22px;border-radius:6px;border:1px solid var(--mac-linie,var(--c-border));
  background:transparent;color:inherit;cursor:pointer;line-height:1}
:is(#page-dnd,#page-academy) .dnd-inv-neu{display:flex;gap:6px;margin-top:8px}
:is(#page-dnd,#page-academy) .dnd-inv-neu input{flex:1;min-width:0;padding:6px 9px;border-radius:8px;border:1px solid var(--mac-linie,var(--c-border));
  background:var(--c-white);color:var(--c-text);font:inherit;font-size:.85rem}
:is(#page-dnd,#page-academy) .dnd-inv-neu button{border:0;border-radius:8px;padding:0 12px;background:var(--dnd-akz);color:#fff;cursor:pointer}
:is(#page-dnd,#page-academy) .dnd-quest,:is(#page-dnd,#page-academy) .dnd-npc{padding:4px 0;border-bottom:1px solid color-mix(in srgb,var(--mac-tx,#000) 8%,transparent)}
:is(#page-dnd,#page-academy) .dnd-quest.erledigt span{text-decoration:line-through;opacity:.6}
:is(#page-dnd,#page-academy) .dnd-quest.gescheitert span{color:#dc3b3b}
:is(#page-dnd,#page-academy) .dnd-ta{width:100%;min-height:110px;margin-top:6px;padding:8px;border-radius:8px;font:inherit;font-size:.82rem;
  border:1px solid var(--mac-linie,var(--c-border));background:var(--c-white);color:var(--c-text);resize:vertical}

/* Dialoge */
:is(#page-dnd,#page-academy) .dnd-ovl{position:absolute;inset:0;z-index:30;display:flex;align-items:flex-start;justify-content:center;
  padding:24px 14px;overflow:auto;background:rgba(10,14,24,.35);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
:is(#page-dnd,#page-academy) .dnd-dlg{width:100%;max-width:680px;border-radius:14px;padding:0 0 12px;
  background:var(--c-white);color:var(--c-text);box-shadow:0 18px 50px rgba(0,0,0,.35)}
:is(#page-dnd,#page-academy) .dnd-dlg-kopf{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;
  border-bottom:1px solid var(--c-border)}
:is(#page-dnd,#page-academy) .dnd-dlg-fuss{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;padding:10px 16px 0}
:is(#page-dnd,#page-academy) .dnd-gefahr{color:#dc3b3b}
:is(#page-dnd,#page-academy) .dnd-form{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;padding:14px 16px}
:is(#page-dnd,#page-academy) .dnd-f{display:flex;flex-direction:column;gap:4px;min-width:0}
:is(#page-dnd,#page-academy) .dnd-f-breit{grid-column:1/-1}
:is(#page-dnd,#page-academy) .dnd-f label,:is(#page-dnd,#page-academy) .dnd-f summary{font-size:.78rem;font-weight:600}
:is(#page-dnd,#page-academy) .dnd-f summary{cursor:pointer}
:is(#page-dnd,#page-academy) .dnd-f details .dnd-form,#page-dnd details.dnd-f .dnd-form{padding:10px 0 0}
:is(#page-dnd,#page-academy) .dnd-f input,:is(#page-dnd,#page-academy) .dnd-f select,:is(#page-dnd,#page-academy) .dnd-f textarea{padding:7px 9px;border-radius:8px;border:1px solid var(--c-border);
  background:var(--c-white);color:var(--c-text);font:inherit;font-size:.88rem;min-width:0}
:is(#page-dnd,#page-academy) .dnd-f-cb{flex-direction:row;align-items:center;gap:8px}
:is(#page-dnd,#page-academy) .dnd-regler{display:flex;align-items:center;gap:8px}
:is(#page-dnd,#page-academy) .dnd-regler input{flex:1}
:is(#page-dnd,#page-academy) .dnd-regler span{width:38px;text-align:right;font-variant-numeric:tabular-nums;font-size:.82rem}

/* Symbol in Dock und Raster */
.mac-ico.mac-ico-dnd{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#3b0d0d,#1c0606)}
.mac-ico.mac-ico-dnd svg{width:72%;height:72%}

/* Schmal: Seitenleisten als Schubladen */
@media (max-width:900px){
  :is(#page-dnd,#page-academy) .dnd{grid-template-columns:minmax(0,1fr)}
  :is(#page-dnd,#page-academy) .dnd-nur-schmal{display:inline-flex}
  :is(#page-dnd,#page-academy) .dnd-liste,:is(#page-dnd,#page-academy) .dnd-bogen{position:absolute;top:0;bottom:0;z-index:20;width:min(86%,320px);
    background:var(--c-bg,#f6f7fb);box-shadow:0 10px 40px rgba(0,0,0,.3);display:none}
  :is(#page-dnd,#page-academy) .dnd-liste{left:0}
  :is(#page-dnd,#page-academy) .dnd-bogen{right:0}
  :is(#page-dnd,#page-academy) .dnd[data-seite="liste"] .dnd-liste{display:block}
  :is(#page-dnd,#page-academy) .dnd[data-seite="bogen"] .dnd-bogen{display:flex}
  :is(#page-dnd,#page-academy) .dnd-kopf-tp{width:84px}
  :is(#page-dnd,#page-academy) .dnd-verlauf{padding:12px 10px 6px}
  :is(#page-dnd,#page-academy) .dnd-form{grid-template-columns:1fr}
  :is(#page-dnd,#page-academy) .dnd-n-akt{opacity:1}
}
/* pt-dnd-ac-v1: Academy City ------------------------------------------- */
:is(#page-dnd,#page-academy) .dnd-balken i.blau{background:var(--dnd-akz)}
:is(#page-dnd,#page-academy) .dnd-balken i.gold{background:#d99a15}
:is(#page-dnd,#page-academy) .dnd-res-mini .dnd-balken{height:4px;margin-top:2px}
:is(#page-dnd,#page-academy) .dnd-chip-zeit svg{vertical-align:-2px}
:is(#page-dnd,#page-academy) .dnd-kopf-bild{width:40px;height:40px;border-radius:10px;object-fit:cover;cursor:pointer;flex:0 0 auto;
  border:1px solid var(--mac-linie,var(--c-border))}
:is(#page-dnd,#page-academy) .dnd-li{display:grid;grid-template-columns:auto 1fr;column-gap:8px}
:is(#page-dnd,#page-academy) .dnd-li > div{grid-column:2}
:is(#page-dnd,#page-academy) .dnd-li-bild{grid-row:1/span 3;width:34px;height:34px;border-radius:8px;object-fit:cover;align-self:center}
:is(#page-dnd,#page-academy) .dnd-n-speicher{display:flex;align-items:center;justify-content:center;gap:10px;font-size:.76rem;
  color:var(--mac-tx-leise,var(--c-muted));border-top:1px dashed var(--mac-linie,var(--c-border));border-bottom:1px dashed var(--mac-linie,var(--c-border));padding:4px 0}
:is(#page-dnd,#page-academy) .dnd-n-speicher button{border:0;background:none;color:var(--dnd-akz);font:inherit;cursor:pointer;text-decoration:underline}
:is(#page-dnd,#page-academy) .dnd-wurf.gold{background:rgba(217,154,21,.16);border-color:rgba(217,154,21,.5);font-weight:700}
:is(#page-dnd,#page-academy) .dnd-aend span.hell{background:color-mix(in srgb,var(--dnd-akz) 22%,transparent);font-weight:700}
:is(#page-dnd,#page-academy) .dnd-tod{margin:18px auto;max-width:520px;text-align:center;padding:18px;border-radius:14px;
  background:rgba(40,8,8,.72);color:#fee2e2;border:1px solid rgba(220,59,59,.5)}
:is(#page-dnd,#page-academy) .dnd-tod-t{font-size:1.2rem;font-weight:800;margin-bottom:6px}
:is(#page-dnd,#page-academy) .dnd-tod-k{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}
:is(#page-dnd,#page-academy) .dnd-portrait{display:flex;gap:12px;align-items:center}
:is(#page-dnd,#page-academy) .dnd-bild{width:92px;height:118px;flex:0 0 auto;border-radius:12px;overflow:hidden;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--dnd-akz) 12%,transparent);border:1px dashed color-mix(in srgb,var(--dnd-akz) 50%,transparent);font-size:.72rem;text-align:center}
:is(#page-dnd,#page-academy) .dnd-bild img{width:100%;height:100%;object-fit:cover}
:is(#page-dnd,#page-academy) .dnd-esper-kopf{display:flex;gap:10px;align-items:center;margin:4px 0 6px}
:is(#page-dnd,#page-academy) .dnd-level{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  font-size:1.5rem;font-weight:800;color:#fff;background:linear-gradient(145deg,var(--dnd-akz),color-mix(in srgb,var(--dnd-akz) 55%,#000))}
:is(#page-dnd,#page-academy) .dnd-name-klein{font-weight:700}
:is(#page-dnd,#page-academy) .dnd-aufstieg{margin:8px 0;padding:8px;border-radius:9px;background:color-mix(in srgb,var(--dnd-akz) 8%,transparent)}
:is(#page-dnd,#page-academy) .dnd-neben-kopf{display:flex;justify-content:space-between;align-items:center;margin:8px 0 4px;font-size:.78rem;font-weight:600}
:is(#page-dnd,#page-academy) .dnd-neben{display:flex;flex-direction:column;padding:4px 6px;border-radius:7px;margin-bottom:3px;opacity:.55}
:is(#page-dnd,#page-academy) .dnd-neben.an{opacity:1;background:color-mix(in srgb,var(--dnd-akz) 12%,transparent)}
:is(#page-dnd,#page-academy) .dnd-neben.gesperrt{opacity:.35}
:is(#page-dnd,#page-academy) .dnd-neben-t{font-size:.84rem;font-weight:600}
:is(#page-dnd,#page-academy) .dnd-neben-t em{font-style:normal;font-weight:500;opacity:.7;font-size:.75rem}
:is(#page-dnd,#page-academy) .dnd-cb-zeile{display:flex;gap:8px;align-items:flex-start;font-size:.82rem;padding:4px 0;cursor:pointer}
:is(#page-dnd,#page-academy) .dnd-cb-zeile.gesperrt{opacity:.45;cursor:default}
:is(#page-dnd,#page-academy) .dnd-cb-zeile input{margin-top:3px}
:is(#page-dnd,#page-academy) .dnd-sp-liste{margin-top:12px;display:flex;flex-direction:column;gap:6px}
:is(#page-dnd,#page-academy) .dnd-sp{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;border:1px solid var(--c-border)}
:is(#page-dnd,#page-academy) .dnd-sp em{display:block;font-style:normal;font-size:.74rem;opacity:.65}
:is(#page-dnd,#page-academy) .dnd-uhr-gross{font-size:1.6rem;font-weight:800;font-variant-numeric:tabular-nums}
:is(#page-dnd,#page-academy) .dnd-auftrag{padding:6px 0;border-bottom:1px solid color-mix(in srgb,var(--mac-tx,#000) 8%,transparent)}
:is(#page-dnd,#page-academy) .dnd-auftrag.pausiert{opacity:.6}
:is(#page-dnd,#page-academy) .dnd-auftrag.fertig b{text-decoration:line-through;opacity:.7}
:is(#page-dnd,#page-academy) .dnd-geheimnis summary,:is(#page-dnd,#page-academy) .dnd-sammlung summary{cursor:pointer;font-size:.84rem;padding:3px 0}
:is(#page-dnd,#page-academy) .dnd-sammlung summary{display:flex;justify-content:space-between}
:is(#page-dnd,#page-academy) details.dnd-karte summary{cursor:pointer}
:is(#page-dnd,#page-academy) .dnd-bez{font-weight:700;font-variant-numeric:tabular-nums}
:is(#page-dnd,#page-academy) .dnd-bez.gut{color:#22a55a}
:is(#page-dnd,#page-academy) .dnd-bez.schlecht{color:#dc3b3b}
.mac-ico.mac-ico-academy{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#0b1f4d,#07122e)}
.mac-ico.mac-ico-academy svg{width:78%;height:78%}
:is(#page-dnd,#page-academy) .dnd-knopf-laden{border-color:rgba(217,154,21,.6);background:rgba(217,154,21,.14)}
:is(#page-dnd,#page-academy) .dnd-notiz{border-style:solid;background:rgba(217,154,21,.12);border-color:rgba(217,154,21,.4)}
:is(#page-dnd,#page-academy) .dnd-h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;margin:14px 0 6px;color:var(--dnd-akz)}
:is(#page-dnd,#page-academy) .dnd-ware{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--c-border)}
:is(#page-dnd,#page-academy) .dnd-ware-k{display:flex;align-items:center;gap:6px;flex:0 0 auto;font-size:.82rem;font-variant-numeric:tabular-nums}
:is(#page-dnd,#page-academy) .dnd-ware-k input{width:48px;padding:3px 5px;border-radius:6px;border:1px solid var(--c-border);background:var(--c-white);color:var(--c-text)}
@media (max-width:900px){:is(#page-dnd,#page-academy) .dnd-ware{flex-direction:column;align-items:flex-start}}
:is(#page-dnd,#page-academy) .dnd-dlg.dnd-dlg-gross{max-width:1180px}
:is(#page-dnd,#page-academy) .dnd-k-flaeche{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:12px;padding:10px 14px}
:is(#page-dnd,#page-academy) .dnd-k-karte{overflow:auto;border-radius:12px;background:color-mix(in srgb,var(--dnd-akz) 5%,var(--c-white))}
:is(#page-dnd,#page-academy) .dnd-karte-svg{display:block;width:100%;min-width:640px;height:auto;font-family:inherit}
:is(#page-dnd,#page-academy) .dnd-k-mauer{fill:none;stroke:color-mix(in srgb,var(--c-text) 30%,transparent);stroke-width:3;stroke-dasharray:10 6}
:is(#page-dnd,#page-academy) .dnd-k-distrikt rect{fill:color-mix(in srgb,var(--c-text) 4%,transparent);stroke:color-mix(in srgb,var(--c-text) 14%,transparent)}
:is(#page-dnd,#page-academy) .dnd-k-distrikt.bekannt rect{fill:color-mix(in srgb,var(--dnd-akz) 9%,transparent);stroke:color-mix(in srgb,var(--dnd-akz) 35%,transparent)}
:is(#page-dnd,#page-academy) .dnd-k-distrikt.hier rect{fill:color-mix(in srgb,var(--dnd-akz) 20%,transparent);stroke:var(--dnd-akz);stroke-width:2.5}
:is(#page-dnd,#page-academy) .dnd-k-distrikt text{font-size:13px;font-weight:700;fill:color-mix(in srgb,var(--c-text) 55%,transparent)}
:is(#page-dnd,#page-academy) .dnd-k-ort{cursor:pointer}
:is(#page-dnd,#page-academy) .dnd-k-punkt{fill:var(--c-white);stroke:var(--dnd-akz);stroke-width:2.5}
:is(#page-dnd,#page-academy) .dnd-k-ort.besucht .dnd-k-punkt{fill:var(--dnd-akz)}
:is(#page-dnd,#page-academy) .dnd-k-ort.zu .dnd-k-punkt{stroke-dasharray:3 2;opacity:.65}
:is(#page-dnd,#page-academy) .dnd-k-ort.wahl .dnd-k-punkt{stroke:#111827;stroke-width:3.5}
:is(#page-dnd,#page-academy) .dnd-k-ort.hier .dnd-k-punkt{fill:#dc2626;stroke:#fff;stroke-width:3}
:is(#page-dnd,#page-academy) .dnd-k-puls{fill:rgba(220,38,38,.25);animation:dndPuls 1.6s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes dndPuls{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.7);opacity:0}}
:is(#page-dnd,#page-academy) .dnd-k-fallring{fill:none;stroke:#f59e0b;stroke-width:3}
:is(#page-dnd,#page-academy) .dnd-k-sym.laden{fill:#d99a15}
:is(#page-dnd,#page-academy) .dnd-k-sym.speicher{fill:#22a55a}
:is(#page-dnd,#page-academy) .dnd-k-name{font-size:12px;font-weight:700;text-anchor:middle;fill:var(--c-text);paint-order:stroke;stroke:var(--c-white);stroke-width:4px}
:is(#page-dnd,#page-academy) .dnd-k-du path{fill:#dc2626;stroke:#fff;stroke-width:2}
:is(#page-dnd,#page-academy) .dnd-k-du-loch{fill:#fff}
:is(#page-dnd,#page-academy) .dnd-k-du text{font-size:13px;font-weight:800;text-anchor:middle;fill:#dc2626;paint-order:stroke;stroke:var(--c-white);stroke-width:4px}
:is(#page-dnd,#page-academy) .dnd-k-standort{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:#dc2626;font-size:.85rem}
:is(#page-dnd,#page-academy) .dnd-k-info{padding:10px;border-radius:12px;border:1px solid var(--c-border);align-self:start}
:is(#page-dnd,#page-academy) .dnd-k-titel{font-weight:800;font-size:1rem}
:is(#page-dnd,#page-academy) .dnd-k-reise{display:flex;flex-direction:column;gap:6px;margin-top:10px}
:is(#page-dnd,#page-academy) .dnd-k-legende{display:flex;flex-wrap:wrap;gap:12px;padding:0 14px}
:is(#page-dnd,#page-academy) .dnd-k-legende .lg{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;vertical-align:-1px;border:2px solid var(--dnd-akz)}
:is(#page-dnd,#page-academy) .lg.hier{background:#dc2626;border-color:#dc2626}
:is(#page-dnd,#page-academy) .lg.besucht{background:var(--dnd-akz)}
:is(#page-dnd,#page-academy) .lg.fall{border-color:#f59e0b}
:is(#page-dnd,#page-academy) .lg.laden{background:#d99a15;border-color:#d99a15;border-radius:2px}
:is(#page-dnd,#page-academy) .lg.speicher{background:#22a55a;border-color:#22a55a}
:is(#page-dnd,#page-academy) .dnd-lex{display:grid;grid-template-columns:220px minmax(0,1fr);gap:12px;padding:10px 14px;min-height:60vh}
:is(#page-dnd,#page-academy) .dnd-lex-nav{display:flex;flex-direction:column;gap:3px}
:is(#page-dnd,#page-academy) .dnd-lex-nav button{display:flex;justify-content:space-between;border:0;border-radius:8px;padding:7px 10px;background:none;color:inherit;font:inherit;font-size:.85rem;cursor:pointer;text-align:left}
:is(#page-dnd,#page-academy) .dnd-lex-nav button.an{background:color-mix(in srgb,var(--dnd-akz) 18%,transparent);font-weight:700}
:is(#page-dnd,#page-academy) .dnd-lex-nav button span{opacity:.6;font-variant-numeric:tabular-nums}
:is(#page-dnd,#page-academy) .dnd-lex-zaehler{margin-top:10px;line-height:1.6}
:is(#page-dnd,#page-academy) .dnd-lex-inhalt{max-height:68vh;overflow:auto;padding-right:6px}
:is(#page-dnd,#page-academy) .dnd-lex-eintrag{padding:9px 0;border-bottom:1px solid var(--c-border)}
:is(#page-dnd,#page-academy) .dnd-lex-t{font-weight:700}
:is(#page-dnd,#page-academy) .dnd-lex-suche{flex:1;max-width:320px;margin:0 10px;padding:6px 10px;border-radius:8px;border:1px solid var(--c-border);background:var(--c-white);color:var(--c-text);font:inherit}
@media (max-width:900px){
  :is(#page-dnd,#page-academy) .dnd-k-flaeche,:is(#page-dnd,#page-academy) .dnd-lex{grid-template-columns:1fr}
  :is(#page-dnd,#page-academy) .dnd-lex-nav{flex-direction:row;flex-wrap:wrap}
  :is(#page-dnd,#page-academy) .dnd-lex-inhalt{max-height:none}
}
:is(#page-dnd,#page-academy) .dnd-mini{cursor:pointer}
:is(#page-dnd,#page-academy) .dnd-mini-karte svg{min-width:0;width:100%;pointer-events:none}
:is(#page-dnd,#page-academy) .dnd-mini-karte .dnd-k-distrikt text,:is(#page-dnd,#page-academy) .dnd-mini-karte .dnd-k-name,:is(#page-dnd,#page-academy) .dnd-mini-karte .dnd-k-sym{display:none}
:is(#page-dnd,#page-academy) .dnd-mini-karte .dnd-k-du text{font-size:34px;stroke-width:8px}
:is(#page-dnd,#page-academy) .dnd-mini-karte .dnd-k-du path{transform-box:fill-box;transform-origin:bottom center;transform:scale(1.8)}
/* /pt-dnd-ac-v1 ---------------------------------------------------------- */
/* pt-dnd-ui-v1: Vorschlaege, Meldungen, Wachzeit, Kampfleiste, Portraets, Tagebuch, Auftragsbaum */
:is(#page-dnd,#page-academy) .dnd-vorschlaege{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
:is(#page-dnd,#page-academy) .dnd-vorschlaege button{border:1px solid color-mix(in srgb,var(--dnd-akz) 45%,transparent);
  background:color-mix(in srgb,var(--dnd-akz) 10%,transparent);color:inherit;border-radius:999px;padding:5px 12px;
  font:inherit;font-size:.82rem;cursor:pointer;text-align:left;line-height:1.3}
:is(#page-dnd,#page-academy) .dnd-vorschlaege button:hover{background:color-mix(in srgb,var(--dnd-akz) 24%,transparent)}
:is(#page-dnd,#page-academy) .dnd-meldungen{position:absolute;top:58px;right:316px;z-index:40;display:flex;flex-direction:column;gap:6px;
  align-items:flex-end;pointer-events:none;max-width:320px}
:is(#page-dnd,#page-academy) .dnd-meldung{pointer-events:auto;cursor:pointer;padding:7px 12px;border-radius:10px;font-size:.82rem;
  background:color-mix(in srgb,var(--c-white,#fff) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid color-mix(in srgb,var(--dnd-akz) 45%,transparent);box-shadow:0 6px 20px rgba(0,0,0,.14);
  animation:dndMeldungRein .25s ease-out;transition:opacity .4s,transform .4s}
:is(#page-dnd,#page-academy) .dnd-meldung.hell{border-color:#d99a15;background:color-mix(in srgb,#f5c542 22%,var(--c-white,#fff));font-weight:600}
:is(#page-dnd,#page-academy) .dnd-meldung.weg{opacity:0;transform:translateX(20px)}
@keyframes dndMeldungRein{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
:is(#page-dnd,#page-academy) .dnd-wach{display:flex;align-items:center;gap:6px;font-size:.72rem;margin-top:3px;min-width:0}
:is(#page-dnd,#page-academy) .dnd-wach-t{flex:0 0 auto;opacity:.7}
:is(#page-dnd,#page-academy) .dnd-wach-b{flex:0 0 90px;height:5px;border-radius:3px;background:color-mix(in srgb,var(--mac-tx,#000) 10%,transparent);overflow:hidden}
:is(#page-dnd,#page-academy) .dnd-wach-b i{display:block;height:100%;background:color-mix(in srgb,var(--dnd-akz) 75%,transparent)}
:is(#page-dnd,#page-academy) .dnd-wach.gelb .dnd-wach-b i{background:#e0a31a}
:is(#page-dnd,#page-academy) .dnd-wach.rot .dnd-wach-b i{background:#dc2626}
:is(#page-dnd,#page-academy) .dnd-wach-h{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(#page-dnd,#page-academy) .dnd-wach.gelb .dnd-wach-h{color:#b7791f}
:is(#page-dnd,#page-academy) .dnd-wach.rot .dnd-wach-h{color:#dc2626}
:is(#page-dnd,#page-academy) .dnd-kampfleiste{border-top:1px solid rgba(220,59,59,.35);background:rgba(220,59,59,.06);padding:8px 14px;
  max-height:42%;overflow:auto;flex:0 0 auto}
:is(#page-dnd,#page-academy) .dnd-kl-kopf{display:flex;align-items:center;gap:10px}
:is(#page-dnd,#page-academy) .dnd-kl-kopf > b{color:#dc2626}
:is(#page-dnd,#page-academy) .dnd-kl-reihe{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:3px;font-size:.74rem}
:is(#page-dnd,#page-academy) .dnd-kl-reihe span{padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--dnd-akz) 14%,transparent)}
:is(#page-dnd,#page-academy) .dnd-kl-reihe span.du{font-weight:700;background:color-mix(in srgb,var(--dnd-akz) 30%,transparent)}
:is(#page-dnd,#page-academy) .dnd-kl-reihe span.feind{background:rgba(220,59,59,.14)}
:is(#page-dnd,#page-academy) .dnd-kl-reihe i{font-style:normal;opacity:.5}
:is(#page-dnd,#page-academy) .dnd-kl-gegner{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
:is(#page-dnd,#page-academy) .dnd-kl-g{flex:1 1 150px;max-width:240px;text-align:left;border:1px solid rgba(220,59,59,.3);border-radius:10px;
  padding:6px 9px;background:color-mix(in srgb,var(--c-white,#fff) 60%,transparent);color:inherit;font:inherit;font-size:.82rem;cursor:pointer}
:is(#page-dnd,#page-academy) .dnd-kl-g.ziel{border-color:#dc2626;box-shadow:0 0 0 2px rgba(220,38,38,.3)}
:is(#page-dnd,#page-academy) .dnd-kl-team{display:flex;flex-wrap:wrap;gap:10px;align-items:center;flex:1 1 100%}
:is(#page-dnd,#page-academy) .dnd-kl-team > div{min-width:120px}
:is(#page-dnd,#page-academy) .dnd-kl-akt{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
:is(#page-dnd,#page-academy) .dnd-kl-akt .dnd-knopf em{font-style:normal;opacity:.65;font-size:.74rem}
:is(#page-dnd,#page-academy) .dnd-kl-akt .dnd-knopf.esper{border-color:color-mix(in srgb,#3b82f6 55%,transparent);background:color-mix(in srgb,#3b82f6 12%,transparent)}
:is(#page-dnd,#page-academy) .dnd-kl-akt .dnd-knopf:disabled{opacity:.45;cursor:default}
:is(#page-dnd,#page-academy) .dnd-kl-inv{display:inline-flex;gap:4px;align-items:center}
:is(#page-dnd,#page-academy) .dnd-kl-inv select{max-width:170px;font:inherit;font-size:.8rem;border-radius:7px;padding:3px 6px;
  border:1px solid var(--mac-linie,var(--c-border));background:var(--c-white);color:var(--c-text)}
:is(#page-dnd,#page-academy) .dnd-mit-bild{display:flex;gap:9px;align-items:center}
:is(#page-dnd,#page-academy) .dnd-mit-bild > div{flex:1;min-width:0}
:is(#page-dnd,#page-academy) .dnd-avatar{flex:0 0 auto;display:inline-block;border-radius:50%;overflow:hidden;vertical-align:middle;
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--dnd-akz) 45%,transparent)}
:is(#page-dnd,#page-academy) .dnd-avatar img,:is(#page-dnd,#page-academy) .dnd-avatar svg{width:100%;height:100%;display:block;object-fit:cover}
:is(#page-dnd,#page-academy) .dnd-avatar.klick{cursor:pointer}
:is(#page-dnd,#page-academy) .dnd-avatar.klick:hover{box-shadow:0 0 0 2.5px var(--dnd-akz)}
:is(#page-dnd,#page-academy) .dnd-lex-t .dnd-avatar{margin-right:8px}
:is(#page-dnd,#page-academy) .dnd-tb-text{margin-top:6px;font-size:.86rem;line-height:1.55}
:is(#page-dnd,#page-academy) .dnd-tb-text p{margin:0 0 .5em}
:is(#page-dnd,#page-academy) .dnd-baum{border:1px solid var(--mac-linie,var(--c-border));border-radius:10px;padding:8px 10px;margin-bottom:8px}
:is(#page-dnd,#page-academy) .dnd-baum summary{cursor:pointer;display:flex;gap:8px;align-items:baseline}
:is(#page-dnd,#page-academy) .dnd-baum summary > span{margin-left:auto}
:is(#page-dnd,#page-academy) .dnd-baum-l{list-style:none;margin:8px 0 6px;padding:0 0 0 14px;border-left:2px solid color-mix(in srgb,var(--dnd-akz) 35%,transparent)}
:is(#page-dnd,#page-academy) .dnd-baum-l li{position:relative;padding:3px 0 5px 12px;font-size:.84rem}
:is(#page-dnd,#page-academy) .dnd-baum-l li::before{content:'';position:absolute;left:-21px;top:7px;width:10px;height:10px;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--dnd-akz) 60%,transparent);background:var(--c-white,#fff)}
:is(#page-dnd,#page-academy) .dnd-baum-l li.fertig::before{background:var(--dnd-akz);border-color:var(--dnd-akz)}
:is(#page-dnd,#page-academy) .dnd-baum-l li.fertig > span{text-decoration:line-through;opacity:.65}
:is(#page-dnd,#page-academy) .dnd-baum-l li.jetzt::before{background:#d99a15;border-color:#d99a15;box-shadow:0 0 0 3px rgba(217,154,21,.25)}
:is(#page-dnd,#page-academy) .dnd-baum-wo{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
:is(#page-dnd,#page-academy) .dnd-fall-z{padding:3px 0}
:is(#page-dnd,#page-academy) .dnd-k-auftrag{fill:#8b5cf6;stroke:#fff;stroke-width:1.5}
:is(#page-dnd,#page-academy) .lg.auftrag{background:#8b5cf6;border-color:#8b5cf6;border-radius:2px;transform:rotate(45deg) scale(.85)}
#page-academy button:disabled{opacity:.45;cursor:default}
@media (max-width:900px){
  :is(#page-dnd,#page-academy) .dnd-meldungen{right:10px;top:64px;max-width:80%}
  :is(#page-dnd,#page-academy) .dnd-wach-b{flex-basis:60px}
  :is(#page-dnd,#page-academy) .dnd-kampfleiste{padding:6px 10px}
}
/* Stimmungsbild je Distrikt und Tageszeit (pt-dnd-ui-v1) */
:is(#page-dnd,#page-academy) .dnd-verlauf{--st-a:var(--dnd-akz);--st-b:var(--dnd-akz);--st-zeit:linear-gradient(transparent,transparent);
  background:var(--st-zeit),linear-gradient(180deg,color-mix(in srgb,var(--st-a) 13%,transparent),color-mix(in srgb,var(--st-b) 8%,transparent) 65%,transparent);
  transition:box-shadow .6s}
:is(#page-dnd,#page-academy) .dnd-verlauf[data-zeit="morgen"]{--st-zeit:linear-gradient(160deg,rgba(255,186,130,.20),transparent 55%)}
:is(#page-dnd,#page-academy) .dnd-verlauf:is([data-zeit="vormittag"],[data-zeit="mittag"]){--st-zeit:linear-gradient(180deg,rgba(255,248,210,.12),transparent 60%)}
:is(#page-dnd,#page-academy) .dnd-verlauf[data-zeit="nachmittag"]{--st-zeit:linear-gradient(200deg,rgba(255,196,80,.17),transparent 60%)}
:is(#page-dnd,#page-academy) .dnd-verlauf[data-zeit="abend"]{--st-zeit:linear-gradient(190deg,rgba(255,118,56,.20),rgba(124,58,170,.13) 60%,transparent)}
:is(#page-dnd,#page-academy) .dnd-verlauf[data-zeit="nacht"]{--st-zeit:radial-gradient(ellipse at 12% 0%,color-mix(in srgb,var(--st-a) 32%,transparent),transparent 45%),
  radial-gradient(ellipse at 92% 8%,color-mix(in srgb,var(--st-b) 28%,transparent),transparent 42%),
  linear-gradient(180deg,rgba(8,12,38,.30),rgba(8,12,38,.16))}
:is(#page-dnd,#page-academy) .dnd-verlauf.st-gefahr{box-shadow:inset 0 0 90px rgba(200,30,30,.20)}
/* pt-dnd-alltag-v1: Handy, Morgennachrichten, Rueckblick, Suche, Lesezeichen, Darstellung */
:is(#page-dnd,#page-academy) .dnd-n{max-width:var(--dnd-breite,760px)}
:is(#page-dnd,#page-academy) .dnd-erz{font-size:calc(1.02rem * var(--dnd-fs,1))}
:is(#page-dnd,#page-academy) .dnd-blase{font-size:calc(.95rem * var(--dnd-fs,1))}
:is(#page-dnd,#page-academy) .dnd-chip-gelb{background:rgba(224,163,26,.16);border-color:rgba(224,163,26,.5)}
:is(#page-dnd,#page-academy) .dnd-handy-knopf{position:relative}
:is(#page-dnd,#page-academy) .dnd-badge{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:#dc2626;color:#fff;font-size:.68rem;font-weight:700;line-height:17px;text-align:center}
:is(#page-dnd,#page-academy) .dnd-zeitung{display:flex;align-items:center;gap:8px;padding:5px 14px;font-size:.8rem;min-width:0;
  border-bottom:1px solid var(--mac-linie,var(--c-border));background:color-mix(in srgb,var(--dnd-akz) 8%,transparent)}
:is(#page-dnd,#page-academy) .dnd-zeitung > b{flex:0 0 auto;color:var(--dnd-akz)}
:is(#page-dnd,#page-academy) .dnd-zeitung-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
:is(#page-dnd,#page-academy) .dnd-zeitung-t i{font-style:normal;opacity:.45;margin:0 7px}
:is(#page-dnd,#page-academy) .dnd-zeitung .dnd-knopf{padding:1px 8px;font-size:.74rem}
:is(#page-dnd,#page-academy) .dnd-zeitung-z{padding:7px 0;border-bottom:1px solid color-mix(in srgb,var(--mac-tx,#000) 8%,transparent);font-size:.88rem}
:is(#page-dnd,#page-academy) .dnd-suche{display:flex;align-items:center;gap:6px;padding:6px 14px;border-bottom:1px solid var(--mac-linie,var(--c-border));flex-wrap:wrap}
:is(#page-dnd,#page-academy) .dnd-suche input{flex:1 1 180px;min-width:0;font:inherit;font-size:.85rem;padding:5px 9px;border-radius:8px;
  border:1px solid color-mix(in srgb,var(--dnd-akz) 50%,transparent);background:var(--c-white);color:var(--c-text)}
:is(#page-dnd,#page-academy) .dnd-suche select{max-width:200px;font:inherit;font-size:.8rem;border-radius:7px;padding:4px 6px;
  border:1px solid var(--mac-linie,var(--c-border));background:var(--c-white);color:var(--c-text)}
:is(#page-dnd,#page-academy) .dnd-n.dnd-treffer{box-shadow:-4px 0 0 color-mix(in srgb,#f5c542 70%,transparent)}
:is(#page-dnd,#page-academy) .dnd-n.dnd-treffer-akt{box-shadow:-4px 0 0 #e0a31a;background:color-mix(in srgb,#f5c542 14%,transparent);border-radius:8px}
:is(#page-dnd,#page-academy) .dnd-n.gemerkt::before{content:'';position:absolute;left:-14px;top:4px;width:8px;height:12px;background:var(--dnd-akz);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 72%,0 100%)}
:is(#page-dnd,#page-academy) .dnd-rueckblick{max-width:var(--dnd-breite,760px);margin:10px auto 16px;padding:12px 14px;border-radius:12px;
  border:1px solid color-mix(in srgb,var(--dnd-akz) 45%,transparent);background:color-mix(in srgb,var(--dnd-akz) 10%,transparent);font-size:.9rem}
:is(#page-dnd,#page-academy) .dnd-rueckblick > b{display:block;margin-bottom:4px;color:var(--dnd-akz)}
:is(#page-dnd,#page-academy) .dnd-rb-t{font-weight:700;margin:4px 0}
:is(#page-dnd,#page-academy) .dnd-rueckblick p{margin:0 0 .5em}
:is(#page-dnd,#page-academy) .dnd-handy{display:flex;flex-direction:column;gap:8px}
:is(#page-dnd,#page-academy) .dnd-handy-tag{font-size:.74rem;font-weight:700;opacity:.6;text-align:center;margin-top:4px}
:is(#page-dnd,#page-academy) .dnd-handy-n{display:flex;gap:10px;align-items:flex-start}
:is(#page-dnd,#page-academy) .dnd-handy-b{flex:1;min-width:0;padding:8px 11px;border-radius:4px 14px 14px 14px;
  background:color-mix(in srgb,var(--mac-tx,#000) 6%,transparent)}
:is(#page-dnd,#page-academy) .dnd-handy-n.neu .dnd-handy-b{background:color-mix(in srgb,var(--dnd-akz) 16%,transparent)}
:is(#page-dnd,#page-academy) .dnd-handy-text{font-size:.88rem;margin:2px 0}
:is(#page-dnd,#page-academy) .dnd-handy-termin{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
:is(#page-dnd,#page-academy) .dnd-handy-st.erledigt,:is(#page-dnd,#page-academy) .dnd-handy-st.angenommen{background:rgba(34,165,90,.14);border-color:rgba(34,165,90,.45)}
:is(#page-dnd,#page-academy) .dnd-handy-st.verpasst{background:rgba(220,59,59,.14);border-color:rgba(220,59,59,.45)}
:is(#page-dnd,#page-academy) .dnd-gedaechtnis summary{cursor:pointer;font-size:.74rem;opacity:.75}
:is(#page-dnd,#page-academy) .dnd-gedaechtnis .dnd-klein{padding-left:8px}
/* pt-dnd-ausbau-v1 */
:is(#page-dnd,#page-academy) .dnd-begegnung,:is(#page-dnd,#page-academy) .dnd-quiz{display:flex;flex-direction:column;gap:6px;margin:10px 0}
:is(#page-dnd,#page-academy) .dnd-begegnung .btn,:is(#page-dnd,#page-academy) .dnd-quiz .dnd-knopf{justify-content:flex-start;text-align:left}
:is(#page-dnd,#page-academy) .dnd-schenken{margin-top:4px;padding:1px 9px;font-size:.74rem}
/* pt-dnd-verl-v1 */
:is(#page-dnd,#page-academy) .dnd-kopf{flex-wrap:wrap}
:is(#page-dnd,#page-academy) .dnd-kopf-mitte{min-width:180px}
:is(#page-dnd,#page-academy) .dnd-einstiege{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:7px}
:is(#page-dnd,#page-academy) .dnd-einstieg{border:1px solid rgba(217,154,21,.55);background:rgba(245,197,66,.14);color:inherit;border-radius:10px;
  padding:4px 10px;font:inherit;font-size:.78rem;cursor:pointer;text-align:left;max-width:100%}
:is(#page-dnd,#page-academy) .dnd-einstieg:hover:not(:disabled){background:rgba(245,197,66,.28)}
:is(#page-dnd,#page-academy) .dnd-einstieg:disabled{opacity:.5;cursor:default}
:is(#page-dnd,#page-academy) .dnd-heute-z{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:5px 0;font-size:.85rem;
  border-bottom:1px solid color-mix(in srgb,var(--mac-tx,#000) 7%,transparent)}
:is(#page-dnd,#page-academy) .dnd-heute-z.vorbei{opacity:.5}
/* pt-dnd-karte2: Karte wie eine Stadtkarte, linke Spalte mit Werten, Nebenfaehigkeiten klappbar */
:is(#page-dnd,#page-academy) .dnd-k-land{fill:color-mix(in srgb,#9bb57a 20%,var(--c-white,#fff))}
:is(#page-dnd,#page-academy) .dnd-k-raster{stroke:color-mix(in srgb,#7c8a6a 18%,transparent);stroke-width:1}
:is(#page-dnd,#page-academy) .dnd-k-schraffur{stroke:color-mix(in srgb,#64748b 22%,transparent);stroke-width:3}
:is(#page-dnd,#page-academy) .dnd-k-fluss{fill:none;stroke:#7cc4f0;stroke-width:12;stroke-linecap:round;opacity:.85}
:is(#page-dnd,#page-academy) .dnd-k-fluss-rand{fill:none;stroke:#3b8fc6;stroke-width:16;stroke-linecap:round;opacity:.35}
:is(#page-dnd,#page-academy) .dnd-k-strasse{fill:none;stroke:color-mix(in srgb,#fff 85%,#cbd5e1);stroke-width:7;stroke-linecap:round;opacity:.95}
:is(#page-dnd,#page-academy) .dnd-k-grund{fill:color-mix(in srgb,var(--c-white,#fff) 88%,#9bb57a);stroke:none}
:is(#page-dnd,#page-academy) .dnd-k-strasse.fern{stroke-dasharray:2 10;stroke-width:4;opacity:.6}
:is(#page-dnd,#page-academy) .dnd-k-distrikt rect{stroke-width:2}
:is(#page-dnd,#page-academy) .dnd-k-distrikt text{font-size:12px;font-weight:800;fill:var(--c-text);opacity:.8}
:is(#page-dnd,#page-academy) .dnd-k-distrikt:not(.bekannt) text{opacity:.4}
:is(#page-dnd,#page-academy) .dnd-k-distrikt .dnd-k-beschr{font-size:10.5px;font-weight:600;opacity:.6}
:is(#page-dnd,#page-academy) .dnd-k-distrikt.hier rect{stroke-width:3.5;filter:drop-shadow(0 0 6px rgba(220,38,38,.35))}
:is(#page-dnd,#page-academy) .dnd-k-symbol{stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round;opacity:.9;pointer-events:none}
:is(#page-dnd,#page-academy) .dnd-k-distrikt:not(.bekannt) .dnd-k-symbol{opacity:.3}
:is(#page-dnd,#page-academy) .dnd-k-mauer{fill:none;stroke:#8b8f98;stroke-width:8;stroke-dasharray:none}
:is(#page-dnd,#page-academy) .dnd-k-mauer-innen{fill:none;stroke:#c3c7ce;stroke-width:2;stroke-dasharray:6 6}
:is(#page-dnd,#page-academy) .dnd-k-kompass circle{fill:color-mix(in srgb,var(--c-white,#fff) 85%,transparent);stroke:#94a3b8;stroke-width:1.5}
:is(#page-dnd,#page-academy) .dnd-k-kompass path{fill:#94a3b8}
:is(#page-dnd,#page-academy) .dnd-k-kompass path.nord{fill:#dc2626}
:is(#page-dnd,#page-academy) .dnd-k-kompass text{font-size:11px;font-weight:800;text-anchor:middle;fill:var(--c-text)}
:is(#page-dnd,#page-academy) .dnd-mini-karte .dnd-k-symbol,:is(#page-dnd,#page-academy) .dnd-mini-karte .dnd-k-kompass,:is(#page-dnd,#page-academy) .dnd-mini-karte .dnd-k-beschr{display:none}
:is(#page-dnd,#page-academy) .dnd-werte-spalte{padding:4px 0 12px}
:is(#page-dnd,#page-academy) .dnd-werte-spalte .dnd-karte{margin:8px 10px;padding:9px 10px;font-size:.84rem}
:is(#page-dnd,#page-academy) .dnd-werte-spalte .dnd-fert{grid-template-columns:1fr;gap:0}
:is(#page-dnd,#page-academy) .dnd-werte-spalte .dnd-stats{grid-template-columns:1fr}
:is(#page-dnd,#page-academy) .dnd-werte-spalte .dnd-stats div{display:flex;justify-content:space-between;font-size:.8rem}
:is(#page-dnd,#page-academy) .dnd-werte-spalte .dnd-zeile{font-size:.8rem;gap:6px;flex-wrap:wrap}
:is(#page-dnd,#page-academy) .dnd-neben-box > summary{cursor:pointer;list-style:none}
:is(#page-dnd,#page-academy) .dnd-neben-box > summary::-webkit-details-marker{display:none}
:is(#page-dnd,#page-academy) .dnd-neben-box > summary > span::before{content:'▸ ';opacity:.6}
:is(#page-dnd,#page-academy) .dnd-neben-box[open] > summary > span::before{content:'▾ '}
:is(#page-dnd,#page-academy) .dnd-neben-box > summary em{font-style:normal;font-size:.76rem}
/* Charakterbild: freigestellte PNGs ohne Hintergrund zeigen, ganze Figur */
:is(#page-dnd,#page-academy) .dnd-bild.hat-bild{background:none;border:0}
:is(#page-dnd,#page-academy) .dnd-bild.hat-bild img{object-fit:contain}
:is(#page-dnd,#page-academy) .dnd-kopf-bild,:is(#page-dnd,#page-academy) .dnd-li-bild{object-fit:contain}
/* /pt-dnd-ui-v1 ---------------------------------------------------------- */
/* /pt-dnd-v1 -------------------------------------------------------------- */
/* ═══ pt-kb-lernbaum-v1 ═════════════════════════════════════════════════
   Farben aus dem AccessMed-Standard (--c-white, --c-blue, --c-text ...),
   dadurch folgt der Lernbaum auch dem Dunkelmodus. --f ist die Farbe der
   gewaehlten Fachrichtung. */
.lb-ovl{position:fixed;inset:0;z-index:100000;background:var(--c-bg,#f5f5f5);color:var(--c-text,#222);display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top,0px);font-family:inherit;--f:var(--c-blue,#2563eb)}
.lb-kopf{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--c-white,#fff);border-bottom:1px solid var(--c-border,#e0e0e0);flex-wrap:wrap}
.lb-kopf b{font-size:1.1rem;font-weight:700;color:var(--c-text,#222)}
.lb-zurueck{background:var(--c-blue-light,#eff6ff);color:var(--c-blue,#2563eb);border:1px solid var(--c-blue,#2563eb);border-radius:999px;
  padding:5px 12px;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer}
.lb-kopf input{flex:0 1 260px;min-width:140px;background:var(--c-white,#fff);border:1px solid var(--c-border,#e0e0e0);
  color:var(--c-text,#222);border-radius:999px;padding:6px 14px;font:inherit}
.lb-kopf input:focus{outline:none;border-color:var(--c-blue,#2563eb)}
.lb-zahl{font-size:.82rem;color:var(--c-muted,#888);flex:1 1 auto}
.lb-knoepfe{display:flex;gap:6px}
.lb-knoepfe button{background:var(--c-white,#fff);color:var(--c-blue,#2563eb);border:1px solid var(--c-border,#e0e0e0);border-radius:10px;
  padding:5px 11px;font:inherit;font-weight:600;cursor:pointer;min-width:36px}
.lb-knoepfe button:hover{border-color:var(--c-blue,#2563eb)}
.lb-legende{display:flex;flex-wrap:wrap;gap:6px;padding:8px 16px;background:var(--c-white,#fff);border-bottom:1px solid var(--c-border,#e0e0e0)}
.lb-leg{display:inline-flex;align-items:center;gap:6px;background:var(--c-white,#fff);color:var(--c-text,#222);
  border:1px solid var(--c-border,#e0e0e0);border-radius:999px;padding:3px 10px;font:inherit;font-size:.78rem;cursor:pointer}
.lb-leg:hover{border-color:var(--f)}
.lb-leg.an{background:color-mix(in srgb,var(--f) 12%,var(--c-white,#fff));border-color:var(--f);font-weight:600}
.lb-leg i{width:9px;height:9px;border-radius:50%;background:var(--f)}
.lb-leg span{color:var(--c-muted,#888);font-variant-numeric:tabular-nums}
.lb-flaeche{position:relative;flex:1 1 auto;overflow:hidden;touch-action:none;cursor:grab;
  background:var(--c-bg,#eef4fa) url("/static/img/accessmed-bg.svg") center/cover no-repeat}
@media (max-aspect-ratio:2/3){.lb-flaeche{background-image:url("/static/img/accessmed-bg-hoch.svg")}}
.lb-hell{pointer-events:none}
.lb-marke{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto}
.lb-marke img{width:28px;height:28px;object-fit:contain}
.lb-marke-t{font-weight:800;font-size:1.05rem;letter-spacing:-.01em;line-height:1}
.lb-flaeche:active{cursor:grabbing}
.lb-flaeche svg{width:100%;height:100%;display:block}
.lb-lade{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--c-muted,#888)}
.lb-hinweis{font-size:.74rem;color:var(--c-muted,#888);padding:6px 16px calc(6px + env(safe-area-inset-bottom,0px));background:var(--c-white,#fff);border-top:1px solid var(--c-border,#e0e0e0)}
.lb-tipp{position:fixed;z-index:100001;max-width:310px;background:var(--c-white,#fff);color:var(--c-text,#222);border:1px solid var(--c-border,#e0e0e0);
  border-radius:12px;padding:10px 12px;font-size:.82rem;pointer-events:none;box-shadow:0 10px 30px rgba(15,23,42,.15)}
.lb-tipp b{display:block;font-size:.92rem;margin-bottom:3px}
.lb-tipp-f{color:var(--f);font-weight:600;margin-bottom:4px}
.lb-tipp-w{color:var(--c-muted,#888);margin-top:3px}
.lb-tipp-h{color:var(--c-blue,#2563eb);margin-top:5px;font-size:.76rem;font-weight:600}

/* Stufe 1: Kreis der Fachrichtungen */
.lb-ring{fill:none;stroke:var(--c-border,#e0e0e0);stroke-width:2;stroke-dasharray:4 8}
.lb-speiche{stroke:var(--f);stroke-width:2.5;stroke-opacity:.35}
.lb-mitte circle{fill:var(--c-white,#fff);stroke:var(--c-blue,#2563eb);stroke-width:4}
.lb-mitte-t{fill:var(--c-blue,#2563eb);font-size:26px;font-weight:800}
.lb-mitte-u{fill:var(--c-muted,#888);font-size:14px}
.lb-fach{cursor:pointer;transition:transform .65s cubic-bezier(.4,0,.2,1),opacity .4s}
.lb-fach-k{fill:color-mix(in srgb,var(--f) 14%,var(--c-white,#fff));stroke:var(--f);stroke-width:4;transition:fill .2s,stroke-width .65s}
.lb-fach:hover .lb-fach-k{fill:color-mix(in srgb,var(--f) 28%,var(--c-white,#fff))}
.lb-fach-bogen{fill:none;stroke:var(--c-green,#2d9e5a);stroke-width:6;stroke-linecap:round}
.lb-fach-z{fill:var(--c-text,#222);font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.lb-fach-t{fill:var(--c-text,#222);font-size:15px;font-weight:600;transition:opacity .3s}
.lb-weg{opacity:0!important;pointer-events:none;transition:opacity .35s}
.lb-ring,.lb-speiche,.lb-mitte{transition:opacity .45s .2s}
/* Rueckweg: Aeste ziehen sich zur Mitte zurueck */
.lb-schrumpf{opacity:0;transform:scale(.25);transform-origin:0 0;transition:opacity .4s,transform .45s cubic-bezier(.4,0,.2,1)}
/* Beim Wandern: Rand, Bogen und Farbton gehen genau in den Mittelkreis des
   Baums ueber (Skalierung 86/46) -- kein Sprung beim Wechsel */
.lb-wandert .lb-fach-t,.lb-wandert .lb-fach-z{opacity:0;transition:opacity .3s}
.lb-wandert .lb-fach-k{stroke-width:2.67;fill:color-mix(in srgb,var(--f) 14%,var(--c-white,#fff))}
.lb-fach-bogen{transition:stroke-width .65s}
.lb-wandert .lb-fach-bogen{stroke-width:3.2}
.lb-ein{animation:lbEin .45s ease both}
@keyframes lbEin{from{opacity:0}to{opacity:1}}

/* Stufe 2: Baum einer Fachrichtung */
.lb-zentrum{cursor:pointer}
.lb-zentrum circle{fill:color-mix(in srgb,var(--f) 14%,var(--c-white,#fff));stroke:var(--f);stroke-width:5}
.lb-zentrum:hover circle{fill:color-mix(in srgb,var(--f) 24%,var(--c-white,#fff))}
.lb-zentrum-t{fill:var(--c-text,#222);font-size:19px;font-weight:800}
.lb-zentrum .lb-fach-bogen{stroke-width:6}
.lb-zentrum-u{fill:var(--c-muted,#888);font-size:13px}
.lb-k{fill:none;stroke:var(--f);stroke-width:2.2;stroke-opacity:.55;stroke-dasharray:1;stroke-dashoffset:1;
  animation:lbZiehen .5s ease-out forwards;animation-delay:var(--v,0s)}
@keyframes lbZiehen{to{stroke-dashoffset:0}}
.lb-k-geplant{stroke:var(--c-muted,#888);stroke-opacity:.45}
.lb-k-extra,.lb-k-verwandt{stroke-width:1.6;stroke-opacity:.45}
.lb-wuchs{transform-box:fill-box;transform-origin:center;animation:lbWachsen .4s ease-out both;animation-delay:var(--v,0s)}
@keyframes lbWachsen{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
.lb-n circle,.lb-n polygon,.lb-n rect{fill:var(--c-white,#fff);stroke:var(--f);stroke-width:3}
.lb-da{cursor:pointer}
.lb-da circle,.lb-da polygon{fill:color-mix(in srgb,var(--f) 18%,var(--c-white,#fff))}
.lb-da:hover circle,.lb-da:hover polygon{fill:var(--f)}
.lb-geplant circle,.lb-geplant polygon{stroke:var(--c-muted,#888);stroke-dasharray:3 3;fill:var(--c-bg,#f5f5f5)}
.lb-geplant .lb-t{fill:var(--c-muted,#888);font-style:italic}
.lb-gruppe rect{fill:var(--f);stroke-width:0}
.lb-gruppe .lb-t{fill:var(--f);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:12px}
.lb-wurzel circle,.lb-wurzel polygon{stroke-width:4}
.lb-wurzel .lb-t{font-weight:700;font-size:15px}
.lb-gelernt circle,.lb-gelernt polygon{stroke:var(--c-green,#2d9e5a)}
.lb-haken circle{fill:var(--c-green,#2d9e5a)!important;stroke:var(--c-white,#fff)!important;stroke-width:2!important;stroke-dasharray:none!important}
.lb-haken path{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lb-t{fill:var(--c-text,#222);font-size:13.5px;pointer-events:none}
.lb-treffer circle,.lb-treffer polygon{stroke:var(--c-orange,#e07b2a);stroke-width:6}
.lb-treffer .lb-t{fill:var(--c-orange,#e07b2a);font-weight:700}
/* Beschriftungen mit hellem Hof: bleiben ueber Linien und Knoten lesbar */
.lb-t,.lb-fach-t,.lb-mitte-t,.lb-mitte-u,.lb-zentrum-t,.lb-zentrum-u{paint-order:stroke;stroke:var(--c-white,#fff);stroke-width:4.5px;stroke-linejoin:round}
.lb-t-innen{font-size:12.5px;font-weight:600}
.lb-geplant .lb-t-innen{font-weight:400}
/* Ring (Orbit): einziger Einstiegseintrag einer Fachrichtung */
.lb-orbit .lb-orbit-ring{fill:none!important;stroke:var(--f);stroke-width:5;stroke-dasharray:none}
.lb-orbit .lb-orbit-treffer{fill:none!important;stroke:transparent!important;stroke-width:24;pointer-events:stroke}
.lb-orbit.lb-da{cursor:pointer}
.lb-orbit.lb-da:hover .lb-orbit-ring{stroke-width:9}
.lb-orbit.lb-geplant .lb-orbit-ring{stroke:var(--c-muted,#888);stroke-dasharray:10 8}
.lb-orbit.lb-gruppe .lb-orbit-ring{stroke-width:3;stroke-dasharray:3 6}
.lb-orbit.lb-gelernt .lb-orbit-ring{stroke:var(--c-green,#2d9e5a)}
.lb-orbit-t{font-size:15px;font-weight:700;fill:var(--f)!important}
.lb-orbit.lb-geplant .lb-orbit-t{fill:var(--c-muted,#888)!important}
/* Hover: Lernpfad hervorheben */
.lb-fokus .lb-n,.lb-fokus .lb-k{opacity:.22}
.lb-fokus .lb-an{opacity:1!important}
.lb-fokus .lb-k.lb-an{stroke-width:4.5;stroke-opacity:1}
.lb-fokus .lb-n.lb-an .lb-t{font-weight:700}
/* Handy: eine schmale Kopfzeile und eine wischbare Leiste -- der Baum
   bekommt den Platz. Zoomen dort mit zwei Fingern. */
@media (max-width:640px){
  .lb-kopf{flex-wrap:nowrap;gap:6px;padding:6px 10px}
  .lb-marke-t{display:none}
  .lb-marke img{width:24px;height:24px}
  .lb-kopf b{font-size:.95rem;max-width:28vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
  .lb-kopf input{flex:1 1 auto;min-width:0;padding:5px 11px;font-size:16px}
  .lb-zurueck{padding:4px 9px;font-size:.78rem;white-space:nowrap}
  .lb-zahl,.lb-hinweis,.lb-knoepfe button.lb-nur-gross{display:none}
  .lb-knoepfe{gap:4px}
  .lb-knoepfe button{padding:4px 9px;min-width:32px}
  .lb-legende{flex-wrap:nowrap;overflow-x:auto;gap:5px;padding:6px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .lb-legende::-webkit-scrollbar{display:none}
  .lb-leg{flex:0 0 auto;white-space:nowrap}
  .lb-flaeche{padding-bottom:env(safe-area-inset-bottom,0px)}
}
@media (prefers-reduced-motion:reduce){.lb-k,.lb-wuchs,.lb-ein{animation:none;stroke-dashoffset:0}.lb-fach{transition:none}}
/* ═══ pt-kb-lernbaum-v1-ende ════════════════════════════════════════════ */

/* pt-pk-felder-v1: Halbwertszeit und Wirkstoffpeak -- Flaeche halbtransparent in der Rahmenfarbe */
.info-card.pk{background:color-mix(in srgb,var(--accent,var(--static-frame,#4aa8e0)) 9%,transparent);border:1px solid color-mix(in srgb,var(--accent,var(--static-frame,#4aa8e0)) 38%,transparent)}
.info-card.pk .info-label{color:color-mix(in srgb,var(--accent,var(--static-frame,#4aa8e0)) 70%,#10243a)}
[data-theme="dark"] .info-card.pk .info-label{color:color-mix(in srgb,var(--accent,var(--static-frame,#4aa8e0)) 70%,#fff)}
.info-card.pk sub{font-size:.72em}