/* ERIS – "Meine Seite" (profil.html). Loest das fruehere Profil-Modal aus eris-core.js ab.
   CSP-strict: keine Inline-Styles, alles ueber Klassen. Vokabular bewusst identisch
   zu den Report-Seiten (gleichstellung.css / professuren.css). */
:root{
  --bg:#f2ede4; --surface:#fff; --blue:#1a5296; --blue2:#4878bc; --teal:#0e7490;
  --green:#3d6e1a; --amber:#9e6b00; --neg:#c70d2d; --lila:#6d3f8f;
  --text:#28231c; --text-muted:#6e675e; --line:#e3ddd2;
  /* --tint IST EIN EIGENNAME (Regel EIN Token-Vokabular, 06.09.):
     eris-theme.css kennt ihn nicht, also fiel er im Dunkelmodus NIE um -
     vier Kacheln standen hell auf dunklem Grund, Kontrast 1,06 : 1. Er ist
     jetzt ein Alias auf die Hausrolle statt ein zweiter Wert; die
     Verwendungen bleiben unberuehrt. */
  --tint:var(--surface-2,#faf8f3);
  --font-serif:'Lora',Georgia,serif; --font-sans:'Source Sans 3',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);font-family:var(--font-sans);color:var(--text)}

/* ── Topbar (unveraendert aus dem Bestand) ────────────────────────────────── */
.topbar{display:flex;align-items:center;gap:14px;background:var(--surface);color:var(--text);
  border-bottom:1px solid var(--line);padding:0 18px;height:50px;position:sticky;top:0;z-index:20}
.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--text-muted);text-decoration:none}
.back-link:hover{color:var(--blue)}
.topbar-sep{width:1px; background:var(--line)}
.topbar-title{font-family:var(--font-serif); font-weight:600}
.topbar-right{margin-left:auto;display:flex;align-items:center}
.rbadge{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:var(--blue);background:var(--t-blau-bg,#e9f0f8);border-radius:5px;padding:2px 8px}

.pmain{max-width:min(94vw,1180px);margin:0 auto;padding:18px}

/* ── Kopfzone: wer bin ich ────────────────────────────────────────────────── */
.phead{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:18px 20px;margin-bottom:16px;display:flex;gap:18px;align-items:flex-start;
  box-shadow:0 1px 2px rgba(0,0,0,.03)}
.phead .ava{width:64px;height:64px;border-radius:50%;background:var(--t-blau-bg,#dce7f5);color:var(--t-blau-fg,var(--blue));
  display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;flex:none}
.phead .who{min-width:0;flex:1}
.phead .nm{font-family:var(--font-serif);font-size:23px;font-weight:600;line-height:1.2}
.phead .fn{font-size:14px;color:var(--text-muted);margin-top:2px}
.phead .facts{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:12px;color:var(--text-muted)}
.phead .facts b{color:var(--text);font-weight:600}
.phead .acts{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  border-radius:999px;padding:4px 10px;background:var(--t-blau-bg,#e9f0f8);color:var(--blue)}
.chip.gr{background:var(--t-gruen-bg,#eaf2e4);color:var(--t-gruen-fg,var(--green))}
.chip.am{background:var(--t-amber-bg,#fbf1dd);color:var(--t-amber-fg,#7d5500)}

/* ── Layout: Navigationsspalte + Inhalt ───────────────────────────────────── */
.plyt{display:grid;grid-template-columns:236px 1fr;gap:16px;align-items:start}
@media(max-width:900px){.plyt{grid-template-columns:1fr}}

.pnav{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:6px;
  position:sticky;top:66px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
@media(max-width:900px){.pnav{position:static;display:flex;overflow-x:auto;gap:4px}}
.pnav button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;
  border:none;border-radius:8px;padding:8px 10px;font-family:inherit;font-size:13px;color:var(--text);
  cursor:pointer;white-space:nowrap;position:relative}
.pnav button:hover{background:var(--tint)}
.pnav button.on{background:var(--t-blau-bg,#e9f0f8);color:var(--blue);font-weight:600}
.pnav button .ic{width:17px;text-align:center;opacity:.85;font-size:14px}
.pnav button .cnt{margin-left:auto;font-size:11px;font-weight:700;background:var(--blue-flaeche,var(--blue));color:#fff;
  border-radius:999px;padding:1px 6px}
.pnav button .cnt.q{background:var(--t-neutral-bg,#e3ddd2);color:var(--t-fliess,var(--text-soft,#4f4a42))}
.pnav .navsep{height:1px;background:var(--line);margin:6px 8px}

/* ── Panels & Karten ──────────────────────────────────────────────────────── */
.ppanel{display:none}
.ppanel.on{display:block}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;margin-bottom:16px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.ct{font-family:var(--font-serif);font-size:16px;font-weight:600;color:var(--blue);margin-bottom:4px}
.ct-sub{display:block;font-family:var(--font-sans);font-size:12px;font-weight:400;color:var(--text-muted);margin-top:2px}
.cbody{margin-top:12px}
.hint{color:var(--text-muted);font-size:12px;margin-top:10px;font-style:italic}

/* Formfelder */
.frow{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(200px,calc((100% - 12px)/2)),1fr));gap:12px}
@media(max-width:640px){.frow{grid-template-columns:1fr}}
.fld{margin-bottom:12px}
.fld label{display:block;font-size:11px;color:var(--text-muted);text-transform:uppercase;
  letter-spacing:.03em;margin-bottom:4px}
.fld input,.fld select,.fld textarea{width:100%;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;font-size:14px;font-family:var(--font-sans);color:var(--text);background:var(--t-feld-bg,#fff)}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--blue)}
.fld input[readonly]{background:var(--t-neutral-bg,#f4f1ea);color:var(--text-muted)}
.fld .sub{font-size:12px;color:var(--text-muted);margin-top:4px}

.btn{display:inline-flex;align-items:center;gap:6px;background:var(--blue-flaeche,var(--blue));color:#fff;border:none;
  border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;
  font-family:var(--font-sans);text-decoration:none}
.btn:hover{background:var(--blue-hover,#14437c)}
.btn.ghost{background:var(--t-flaeche,#fff);color:var(--blue);border:1px solid var(--blue)}
.btn.ghost:hover{background:var(--t-blau-bg,#eef4fb)}
.btn.quiet{background:transparent;color:var(--text-muted);border:1px solid var(--line)}
.btn.quiet:hover{color:var(--text);background:var(--tint)}
.btn.sm{padding:4px 10px;font-size:12px}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}

/* Schalter-Zeilen */
.sw{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.sw:last-child{border-bottom:none}
.sw input{width:17px;height:17px;margin-top:2px;flex:none;cursor:pointer;accent-color:var(--blue)}
.sw .t{font-size:13px;font-weight:600}
.sw .d{font-size:12px;color:var(--text-muted);margin-top:2px;line-height:1.45}

/* Segment-Umschalter (Design, Dichte) */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface,#fff)}
.seg button{background:none;border:none;padding:6px 12px;font-size:12px;font-family:inherit;
  color:var(--text-muted);cursor:pointer;border-right:1px solid var(--line)}
.seg button:last-child{border-right:none}
.seg button.on{background:var(--blue-flaeche,var(--blue));color:#fff;font-weight:600}

/* Kennzahl-Kacheln in der Uebersicht */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(150px,calc((100% - 36px)/4)),1fr));gap:12px}
@media(max-width:980px){.tiles{grid-template-columns:repeat(auto-fill,minmax(max(150px,calc((100% - 12px)/2)),1fr))}}
.tile{background:var(--tint);border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  cursor:pointer;text-align:left;font-family:inherit;width:100%}
.tile:hover{border-color:var(--blue2)}
.tile .v{font-size:25px;font-weight:700;color:var(--blue);line-height:1.1}
.tile .v.am{color:var(--amber)} .tile .v.gr{color:var(--green)}
.tile .l{font-size:12px;color:var(--text-muted);margin-top:4px}

/* Listen (Anmeldungen, Postfach, Zugaenge) */
.lst{width:100%;border-collapse:collapse;font-size:13px}
.lst th,.lst td{padding:8px 8px;border-bottom:1px solid var(--line);text-align:left}
.lst thead th{font-size:11px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.lst td.r,.lst th.r{text-align:right}
.lst tr:last-child td{border-bottom:none}
.ok{color:var(--green);font-weight:600}
.bad{color:var(--neg);font-weight:600}

.zug{display:flex;flex-wrap:wrap;gap:6px}
.zug span{font-size:12px;background:var(--tint);border:1px solid var(--line);border-radius:6px;padding:4px 8px}

/* ── Meine Anmerkungen ────────────────────────────────────────────────────── */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.filters select,.filters input{padding:6px 10px;border:1px solid var(--line);border-radius:7px;
  font-size:12px;font-family:inherit;background:var(--t-feld-bg,#fff);color:var(--text)}
.filters .sp{margin-left:auto;display:flex;gap:8px}

.grp{font-family:var(--font-serif);font-size:14px;font-weight:600;color:var(--text);
  margin:16px 0 8px;display:flex;align-items:center;gap:8px}
.grp:first-child{margin-top:0}
.grp .pill{font-size:11px;font-weight:600;font-family:var(--font-sans);color:var(--text-muted);
  background:var(--tint);border:1px solid var(--line);border-radius:999px;padding:2px 8px}

.anm{border:1px solid var(--line);border-left:3px solid var(--blue2);border-radius:9px;
  padding:10px 12px;margin-bottom:8px;background:var(--surface,#fff)}
.anm.privat{border-left-color:var(--text-muted)}
.anm.gerichtet{border-left-color:var(--lila)}
.anm.alle{border-left-color:var(--teal)}
.anm.erledigt{background:var(--tint)}
.anm .top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.anm .ort{font-size:13px;font-weight:600;color:var(--blue);text-decoration:none}
.anm .ort:hover{text-decoration:underline}
.anm .snap{font-size:12px;color:var(--text-muted);background:var(--tint);border:1px solid var(--line);
  border-radius:5px;padding:1px 6px;font-variant-numeric:tabular-nums}
.anm .dt{font-size:11px;color:var(--text-muted);margin-left:auto}
.anm .txt{font-size:13px;line-height:1.5}
.anm .mention{color:var(--lila);font-weight:600}
.anm .foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.tag{font-size:11px;font-weight:600;border-radius:999px;padding:2px 8px}
.tag.pv{background:var(--t-neutral-bg,#efece6);color:var(--t-fliess,var(--text-soft,#4f4a42))}
.tag.an{background:var(--t-lila-bg,#f1e9f7);color:var(--t-lila-fg,var(--lila))}
.tag.al{background:var(--t-teal-bg,#e2f1f4);color:var(--t-teal-fg,var(--teal))}
.tag.of{background:var(--t-amber-bg,#fbf1dd);color:var(--t-amber-fg,#7d5500)}
.tag.er{background:var(--t-gruen-bg,#eaf2e4);color:var(--t-gruen-fg,var(--green))}
.tag.zl{background:var(--t-blau-bg,#e9f0f8);color:var(--blue)}
.anm .foot .sp{margin-left:auto;display:flex;gap:6px}
.anm .antw{margin-top:8px;padding-left:10px;border-left:2px solid var(--line);font-size:12px;color:var(--text-muted)}
.anm .antw b{color:var(--text)}

.leer{text-align:center;color:var(--text-muted);font-size:13px;padding:26px 10px}

/* Warnhinweis Personenbezug */
.warn{display:flex;gap:8px;background:var(--t-amber-bg,#fdf6e3);border:1px solid var(--t-amber-bd,#e8dcbf);border-radius:9px;
  padding:10px 12px;font-size:12px;color:var(--t-amber-fg,#7a5c12);margin-bottom:12px}
.warn b{color:var(--t-amber-fg,#5c440b)}

/* ---- Profilbild (Studie v2) ------------------------------------------------ */
.ava-wrap{position:relative;flex:none}
.ava-cam{position:absolute;right:-2px;bottom:-2px;width:24px;height:24px;border-radius:50%;
  background:var(--blue-flaeche,var(--blue));color:#fff;border:2px solid #fff;cursor:pointer;font-size:11px;
  display:flex;align-items:center;justify-content:center;padding:0}
.ava-cam:hover{background:#14437c}

.fotorow{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.fotoprev{width:96px;height:96px;border-radius:50%;background:var(--t-blau-bg,#dce7f5);color:var(--t-blau-fg,var(--blue));
  display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:700;flex:none;
  border:1px solid var(--line)}
.drop{flex:1;min-width:240px;border:1.5px dashed var(--line);border-radius:10px;background:var(--tint);
  padding:16px;text-align:center;font-size:13px;color:var(--text-muted);cursor:pointer}
.drop:hover{border-color:var(--blue2);color:var(--text)}
.drop b{display:block;color:var(--text);font-size:13px;margin-bottom:2px}

.avademo{display:flex;gap:22px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.avademo .d{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-muted)}
.avademo .mini{width:26px;height:26px;border-radius:50%;background:var(--t-blau-bg,#dce7f5);color:var(--t-blau-fg,var(--blue));
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:none}
.avademo .mini.sm{width:20px;height:20px;font-size:9px}

/* ---- Aktive Sitzungen (Studie v3) ----------------------------------------- */
.lst tr.jetzt td{background:var(--t-blau-bg,#f4f8fc)}
.tag.hier{background:var(--t-blau-bg,#e9f0f8);color:var(--blue)}

/* ---- Lesezeichen & zuletzt besucht (Studie v3) ---------------------------- */
.pins{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(150px,calc((100% - 10px)/2)),1fr));gap:10px}
@media(max-width:760px){.pins{grid-template-columns:1fr}}
.pin{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:9px;
  padding:10px 12px;background:var(--surface,#fff)}
.pin:hover{border-color:var(--blue2)}
.pin .grip{color:var(--t-grau-neutral,#c9c3b6);cursor:grab;font-size:14px;line-height:1;flex:none}
.pin .txt{min-width:0;flex:1}
.pin .t{font-size:13px;font-weight:600;color:var(--blue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pin .m{font-size:11px;color:var(--text-muted);margin-top:2px}
.pin .off{background:none;border:none;color:var(--t-grau-neutral,#c9c3b6);font-size:15px;cursor:pointer;padding:2px;flex:none}
.pin .off:hover{color:var(--neg)}
.pin.leerplatz{border-style:dashed;color:var(--text-muted);justify-content:center;font-size:12px;background:var(--tint)}
.pinbtn{background:none;border:1px solid var(--line);border-radius:6px;color:var(--text-muted);
  font-size:12px;font-family:inherit;padding:2px 8px;cursor:pointer}
.pinbtn:hover{color:var(--blue);border-color:var(--blue)}
.pinbtn.an{color:var(--t-amber-fg,#7d5500);border-color:var(--t-amber-bd,#e8dcbf);background:var(--t-amber-bg,#fdf6e3)}

/* ---- Ergaenzungen der echten Seite ---------------------------------------- */
.versteckt{display:none}
.ava-img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.phead .ava,.fotoprev,.avatar{overflow:hidden}
.drop.drueber{border-color:var(--blue);background:var(--t-blau-bg,#eef4fb);color:var(--text)}
.lst td .l{font-size:12px;color:var(--text-muted)}

/* ---- Meine Kacheln (dritte Kachelzeile der Uebersicht) ---------- */
/* .sub gab es bisher NUR als `.fld .sub` — ein `.sub` ausserhalb eines .fld waere
   ungestylt geblieben (geborgte Klasse ohne Regel). Deshalb hier die allgemeinere
   Fassung; `.fld .sub` bleibt daneben bestehen und traegt weiter seinen Abstand. */
.cbody .sub{font-size:12px;color:var(--text-muted);line-height:1.5}
.kpi-gruppe{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-muted);margin:12px 0 4px;padding-bottom:2px;border-bottom:1px solid var(--line)}
.kpi-gruppe:first-child{margin-top:0}
/* Die Auswahl steht als CHIPS, nicht als Zeilenliste (Nutzer 15.09.2026: "zu
   wuchtig, zu voluminoes"). Gemessen: 47 waehlbare Kacheln in 10 Bereichen - als
   Zeilenliste rund 1.500 px hoch. Vorbild waren die Reihen-Chips der Landesformel (heute `.eris-reihen-chip`, zentral).
   Die Bereichsgliederung BLEIBT: sie ist die einzige Ordnung in 47 Eintraegen. */
.kpi-chips{display:flex;flex-wrap:wrap;gap:4px}
.kpi-chip{position:relative;display:inline-flex;align-items:center;gap:6px;max-width:100%;
  border:1px solid var(--line);border-radius:14px;padding:2px 10px 2px 6px;
  background:var(--t-flaeche,var(--surface));color:var(--text);
  font-size:12px;line-height:1.5;cursor:pointer}
.kpi-chip:hover{border-color:var(--t-blau-bd,#9bb6d6)}
/* GEMESSEN (15.09.2026, alle drei Themes frisch geladen): der Rahmen des ruhenden
   Chips liegt bei 1,35 / 1,30 / 1,32 : 1 - das ist die HAUSLINIE, kein Sonderfall
   (`--border` 1,24, `--hair` 1,20; das damalige Vorbild `.ent-item` der Landesformel lag
   mit `--border` darunter; seit 04.10.2026 zentral `.eris-reihen-chip`). Bewusst NICHT angehoben: `--text-muted` traefe zwar in
   allen drei Themes die 3:1 (4,74 / 6,25 / 8,60), 47 kraeftig gerahmte Chips waeren
   aber genau die Wucht, gegen die dieser Umbau antritt.
   ⚠ Vertretbar ist das nur, WEIL der Zustand nicht am Rahmen haengt: er steht am
   Zeichen (4,74 / 6,25 / 8,60) und zusaetzlich an der Toenung. Bei einem Bauteil,
   dessen Zustand allein der Rahmen traegt, waere dieselbe Linie ein Befund. */
/* Die Checkbox ist VERDECKT, nicht entfernt: `display:none` nimmt ihr den Fokus,
   und damit waere der Chip nur noch mit der Maus bedienbar. So bleiben Tabulator,
   Leertaste und die Ansage des Screenreaders wie vorher. */
.kpi-chip-box{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;
  opacity:0;pointer-events:none}
/* Der Zustand steht am Zeichen, NICHT nur an der Farbe - sonst waere er fuer
   farbfehlsichtige Leser unlesbar. Feste Breite, damit der Chip beim Klick nicht
   springt und das Raster umbricht. */
.kpi-chip::before{content:"+";flex:0 0 auto;width:11px;text-align:center;
  font-weight:700;color:var(--text-muted)}
.kpi-chip:has(.kpi-chip-box:checked){border-color:var(--t-blau-fg,var(--blue));
  background:var(--t-blau-bg,#eef3fb)}
.kpi-chip:has(.kpi-chip-box:checked)::before{content:"\2713";color:var(--t-blau-fg,var(--blue))}
/* Ohne diese Regel waere die Tastaturbedienung blind: die Checkbox traegt den Fokus,
   sichtbar ist aber nur der Chip. */
.kpi-chip:has(.kpi-chip-box:focus-visible){outline:2px solid var(--t-blau-fg,var(--blue));
  outline-offset:2px}
/* Nicht mehr waehlbar (Obergrenze erreicht): gedaempft ueber die FARBE, nicht ueber
   `opacity` - die zoege die Schrift zum Untergrund und liesse sich je Theme nicht
   nachjustieren (Hausregel 08.09.). */
.kpi-chip:has(.kpi-chip-box:disabled){cursor:not-allowed}
.kpi-chip:has(.kpi-chip-box:disabled) .kpi-chip-txt{color:var(--text-muted)}
.kpi-chip-txt{min-width:0;overflow-wrap:anywhere}