/* =============================================================================
   BetterWorkflow Personalgespräch — Stylesheet
   Konsolidierte Version. Ersetzt die vorherige style.css komplett.

   Aufbau:
     1. Design-Tokens (Farben, Effekte)
     2. Basis (body, Typografie, Links)
     3. Layout (Wrap, Header, Card)
     4. Buttons
     5. Formulare & Meldungen
     6. Navigation
     7. Team-Baum (Dashboard) — neu, ersetzt alte Liste
     8. Detail-Panel (Gesprächs-Paarung)
     9. Perspektive-Leiste
    10. Logo-Vorschau (Einstellungen)
    11. Alte MA-Liste (nur noch im Admin-Bereich)
    12. Fragebogen-Editor
    13. QR-Codes / Zugänge
    14. Mitarbeiter-Bogen (Fragen ausfüllen)
    15. Passwortfeld
    16. Zugangs-Box
    17. Auswertung (Selbst/Fremd-Vergleich)
    18. E-Mail-Zeile
    19. Details/Summary
    20. Responsive & Druck
   ============================================================================= */


/* ---- 1. Design-Tokens ---------------------------------------------------- */
:root{
  /* ★ Deep Marineblau — passend zu BetterWorkflow Core + Team-Puls ★ */
  --bg:#050914;
  --glow1:rgba(10,132,255,.10); --glow2:rgba(56,189,248,.06);
  --blue:#0A84FF; --cyan:#38BDF8;
  --ink:#f5f7fa; --muted:#8aa3c4;
  --surface:rgba(255,255,255,.03);
  --surface-2:rgba(255,255,255,.02);
  --hair:rgba(255,255,255,.09);
  --hair-2:rgba(255,255,255,.06);
  --hi:rgba(255,255,255,.05);
  --shadow:rgba(0,0,0,.6);
  --gtrack:rgba(255,255,255,.08);
  --good:#30D158; --warn:#FF9F0A; --bad:#FF453A;
  --self:#38BDF8; --fremd:#0A84FF;
  --card-bg:#0d1a2d;
}


/* ---- 1b. Ambient Background (Motion-Orbs wie BWF Core / Team-Puls) ------- */
.ambient{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none }
.ambient::before{ content:""; position:absolute; inset:0; background:
  radial-gradient(ellipse 80% 60% at 20% 0%,rgba(95,207,255,.10) 0%,transparent 50%),
  radial-gradient(ellipse 70% 50% at 100% 30%,rgba(183,148,246,.08) 0%,transparent 50%),
  radial-gradient(ellipse 60% 40% at 50% 100%,rgba(246,192,98,.05) 0%,transparent 50%) }
body.theme-light .ambient::before{ background:
  radial-gradient(ellipse 80% 60% at 20% 0%,rgba(8,145,178,.08) 0%,transparent 50%),
  radial-gradient(ellipse 70% 50% at 100% 30%,rgba(139,92,246,.05) 0%,transparent 50%),
  radial-gradient(ellipse 60% 40% at 50% 100%,rgba(217,119,6,.04) 0%,transparent 50%) }
.ambient .orb{ position:absolute; border-radius:50%; filter:blur(120px); mix-blend-mode:screen; animation:tpFloat 20s ease-in-out infinite }
.ambient .orb-1{ width:900px; height:900px; top:-250px; left:-200px; background:radial-gradient(circle,#5FCFFF 0%,transparent 65%); opacity:.35 }
.ambient .orb-2{ width:800px; height:800px; top:100px; right:-250px; background:radial-gradient(circle,#B794F6 0%,transparent 65%); animation-delay:-7s; opacity:.25 }
.ambient .orb-3{ width:700px; height:700px; bottom:-150px; left:30%; background:radial-gradient(circle,#F6C062 0%,transparent 65%); animation-delay:-14s; opacity:.18 }
body.theme-light .ambient .orb{ mix-blend-mode:multiply; opacity:.15; filter:blur(140px) }
body.theme-light .ambient .orb-1{ background:radial-gradient(circle,#0891B2 0%,transparent 65%) }
body.theme-light .ambient .orb-2{ background:radial-gradient(circle,#8B5CF6 0%,transparent 65%) }
body.theme-light .ambient .orb-3{ background:radial-gradient(circle,#D97706 0%,transparent 65%) }
@keyframes tpFloat{
  0%,100%{ transform:translate(0,0) scale(1) }
  33%{ transform:translate(30px,-40px) scale(1.05) }
  66%{ transform:translate(-20px,30px) scale(.95) }
}


/* ---- 1c. Storytelling-Header (Live-Zeit + Anrede) ----------------------- */
.tp-live{ display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px }
.tp-live .dot-live{ width:6px; height:6px; background:#30D158; border-radius:50%; box-shadow:0 0 8px #30D158; animation:tpPulse 2s ease-in-out infinite }
@keyframes tpPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.4 } }
.tp-story{ font-family:Sora,sans-serif; font-weight:600; font-size:32px; line-height:1.15; letter-spacing:-.015em; color:var(--ink); max-width:820px; margin:0 0 32px }
.tp-story .accent{ background:linear-gradient(135deg,#5FCFFF 0%,#B794F6 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; font-weight:700 }
body.theme-light .tp-story .accent{ background:linear-gradient(135deg,#0891B2 0%,#7C3AED 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.tp-story .neutral{ color:var(--muted) }
@media (max-width:720px){
  .tp-story{ font-size:24px }
}


/* ---- 2. Basis ------------------------------------------------------------ */
*{box-sizing:border-box}
body{
  margin:0; color:var(--ink);
  font-family:Inter,system-ui,sans-serif; font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background:var(--bg);
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}
h1, h2, h3{ font-family:Sora; letter-spacing:-.01em; margin:0 }
a{ color:inherit }


/* ---- 3. Layout ----------------------------------------------------------- */
.wrap{ max-width:880px; margin:0 auto; padding:22px 18px 70px; position:relative; z-index:1 }

.head{ display:flex; align-items:center; gap:13px; margin-bottom:20px }
.logo{
  width:42px; height:42px; border-radius:11px; object-fit:cover;
  display:block; flex:none; background:#0a1730;
}
.head h1{ font-size:18px; font-weight:600 }
.head .sub{ color:var(--muted); font-size:12px; margin-top:2px }

.userbox{ margin-left:auto; display:flex; align-items:center; gap:12px }
.uname{ color:var(--muted); font-size:13px }

/* Rechter Header-Bereich: Login-Name + Abmelden + Theme-Toggle */
.head-right{
  margin-left:auto;
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap; justify-content:flex-end;
}
.btn.icon-only{
  padding:7px 9px;
  display:inline-flex; align-items:center; justify-content:center;
}
.btn.icon-only i{ font-size:16px; line-height:1 }

.card{
  background:var(--card-bg);
  border:1px solid var(--hair);
  border-radius:20px;
  padding:22px 24px; margin-bottom:16px;
  box-shadow: inset 0 1px 0 var(--hi), 0 18px 40px -26px var(--shadow);
}

.pill{
  display:inline-block; font-family:Sora; font-weight:600; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--cyan); background:rgba(56,189,248,.1);
  border:1px solid rgba(56,189,248,.26);
  padding:4px 11px; border-radius:999px; margin-bottom:12px;
}
h2.t{ font-size:18px; margin-bottom:6px }
.intro{ color:var(--muted); font-size:13.5px; line-height:1.55; margin:0 0 6px; max-width:72ch }
.foot{ color:var(--muted); font-size:12px; margin-top:24px; text-align:center }
.empty{ color:var(--muted); font-size:13.5px; padding:8px 0 }


/* ---- 4. Buttons ---------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  cursor:pointer; font-family:Sora; font-weight:600; font-size:13.5px;
  border:1px solid var(--hair);
  background:var(--surface-2); color:var(--ink);
  border-radius:12px; padding:10px 16px;
  transition:all .15s; text-decoration:none;
}
.btn:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.22) }
.btn.primary{
  background:linear-gradient(180deg, #2a93ff, #0a84ff);
  border-color:transparent; color:#fff;
  box-shadow:0 10px 24px -10px rgba(10,132,255,.7);
}
.btn.sm{ padding:7px 12px; font-size:12.5px; border-radius:10px }
.btn.danger{ color:var(--bad); border-color:rgba(255,69,58,.3) }
.btn.danger:hover{ background:rgba(255,69,58,.12) }
.btn.arrow{ padding:6px 9px }


/* ---- 5. Formulare & Meldungen ------------------------------------------- */
.field{ margin-bottom:12px }
.field label{
  display:block; font-size:12px; color:var(--muted); margin-bottom:5px; font-weight:500;
}
.field input, .field select{
  width:100%; padding:11px 13px; border-radius:11px;
  border:1px solid var(--hair); background:var(--surface-2); color:var(--ink);
  font-family:inherit; font-size:14px;
}
.field input:focus, .field select:focus, textarea:focus{
  outline:none; border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(10,132,255,.15);
}
.field input[type=file]{ padding:8px 10px; font-size:13px; cursor:pointer }

select{
  padding:9px 12px; border-radius:10px;
  border:1px solid var(--hair); background:var(--surface-2); color:var(--ink);
  font-family:inherit; font-size:13.5px;
}

.login-card{ max-width:380px; margin:30px auto }

.msg{ border-radius:11px; padding:10px 13px; font-size:13.5px; margin-bottom:12px }
.msg.error{ color:#ffd7d3; background:rgba(255,69,58,.12); border:1px solid rgba(255,69,58,.3) }
.msg.ok{    color:#caffd9; background:rgba(48,209,88,.12); border:1px solid rgba(48,209,88,.3) }
.msg.info{  color:#cfe3ff; background:rgba(10,132,255,.12); border:1px solid rgba(10,132,255,.3) }

.listhead{
  display:flex; justify-content:space-between; align-items:center;
  gap:10px; flex-wrap:wrap; margin-bottom:14px;
}


/* ---- 6. Navigation ------------------------------------------------------- */
.subnav{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap }
.subnav .btn.on{ border-color:var(--blue); background:rgba(10,132,255,.16) }

/* Subnav mit Toggle rechts */
.subnav-split{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px;
}
.subnav-tabs{ display:flex; gap:8px; flex-wrap:wrap }
.bwf-toggle-form{ margin:0 }

/* BetterWorkflow-Zugriff Toggle-Switch */
.bwf-toggle{
  display:inline-flex; align-items:center; gap:12px;
  padding:8px 14px; border-radius:12px;
  border:2px solid; background:transparent;
  cursor:pointer; font:inherit;
  transition: border-color .2s ease, background .2s ease;
  color:var(--ink);
  font-family:Sora; font-size:12.5px; font-weight:500;
}
.bwf-toggle.on{
  border-color:rgba(48,209,88,.55);
  background:rgba(48,209,88,.06);
}
.bwf-toggle.off{
  border-color:rgba(255,69,58,.65);
  background:rgba(255,69,58,.08);
}
.bwf-toggle:hover{ filter:brightness(1.1) }
.bwf-toggle-label{ line-height:1; white-space:nowrap }

/* Der Switch selbst */
.bwf-toggle-switch{
  width:40px; height:22px; border-radius:11px;
  position:relative; flex:none;
  background:#FF453A;
  transition: background .2s ease;
}
.bwf-toggle.on .bwf-toggle-switch{ background:#30D158 }
.bwf-toggle-knob{
  position:absolute;
  top:2px; left:2px;
  width:18px; height:18px;
  border-radius:50%;
  background:#ffffff;
  transition: left .2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.bwf-toggle.on .bwf-toggle-knob{ left:20px }

.bwf-toggle-state{
  font-family:Sora; font-size:11px; font-weight:600;
  letter-spacing:0.08em;
  min-width:26px;
  line-height:1;
}
.bwf-toggle.on .bwf-toggle-state{ color:#30D158 }
.bwf-toggle.off .bwf-toggle-state{ color:#FF453A }


/* ---- 7. Team-Baum (Dashboard) -------------------------------------------
   Kompaktes Design nach Mockup-Referenz v4:
   - Klassen: .tree-row .tree-caret .tree-avatar .tree-namebox
              .tree-name .tree-role .tree-load .tree-badge
              .status-badge .status-dot .st-* .tree-actions .icon-btn
   - Zeile ist ein <a>, das per Klick das Detail-Panel togglet
   - Aktions-Icons erscheinen NUR beim Hover (Desktop) bzw. bei Touch immer
   ------------------------------------------------------------------------- */

.tree-head{ margin-bottom:14px }
.tree-head-title{ font-size:17px; font-weight:600; font-family:Sora }
.tree-head-sub{ font-size:12px; color:var(--muted); margin-top:2px }

.tree-node{ /* Wrapper pro Person */ }
.tree-children{ /* Container fuer alle Kinder */ }
.tree-children.collapsed{ display:none }

.tree-row{
  display:flex; align-items:center; gap:8px;
  padding:8px; border-radius:8px;
  transition:background .1s;
  flex-wrap:nowrap;
  cursor:pointer;
  position:relative;
}
.tree-row:hover{ background:rgba(255,255,255,.05); z-index:10 }
.tree-row.selected{ background:rgba(10,132,255,.10); z-index:10 }

.tree-caret{
  width:20px; padding:0; border:0; background:transparent;
  font-size:14px; color:var(--muted); line-height:1;
  cursor:pointer; user-select:none; flex:none; text-align:center;
  border-radius:4px; transition:color .1s;
}
.tree-caret:hover{ color:var(--ink) }
.tree-caret.empty{ opacity:.35; cursor:default }

.tree-avatar{
  position:relative;
  width:30px; height:30px; border-radius:50%;
  background:rgba(56,189,248,.14);
  color:var(--cyan); font-family:Sora; font-weight:500; font-size:12px;
  display:flex; align-items:center; justify-content:center; flex:none;
}
/* Ebenen-Farben — sanft und seriös (Purple / Teal / Amber / Gray) */
.tree-avatar.lvl-0{ background:rgba(127,119,221,.20); color:#CECBF6 }  /* Ebene 1 */
.tree-avatar.lvl-1{ background:rgba(29,158,117,.20);  color:#9FE1CB }  /* Ebene 2 */
.tree-avatar.lvl-2{ background:rgba(239,159,39,.20);  color:#FAC775 }  /* Ebene 3 */
.tree-avatar.lvl-3{ background:rgba(180,178,169,.20); color:#D3D1C7 }  /* Ebene 4+ */

/* Ziffer-Badge (aktuell nicht mehr im Renderer, aber Styles bleiben fuer den Fall) */
.tree-avatar-level{
  position:absolute; bottom:-3px; right:-3px;
  width:15px; height:15px; border-radius:50%;
  border:2px solid var(--bg);
  font-size:9px; font-weight:600; font-family:Sora;
  display:flex; align-items:center; justify-content:center;
  line-height:1;
}
.tree-avatar-level.lvl-0{ background:#EEEDFE; color:#3C3489 }
.tree-avatar-level.lvl-1{ background:#E1F5EE; color:#0F6E56 }
.tree-avatar-level.lvl-2{ background:#FAEEDA; color:#854F0B }
.tree-avatar-level.lvl-3{ background:#F1EFE8; color:#5F5E5A }

/* Namebox ist der klickbare Link zur Detail-Ansicht */
a.tree-namebox{
  min-width:0; flex:1 1 auto;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-decoration:none; color:inherit;
  display:flex; align-items:baseline; gap:6px;
}
a.tree-namebox:hover{ opacity:.85 }
.tree-name{ font-size:14px; font-weight:500; color:var(--ink); flex:none }
.tree-role{
  font-size:12px; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  min-width:0;
}

/* Status-Badges — helle Farben aus dem Mockup, funktionieren auch auf Dark-BG */
.status-badge{
  display:inline-flex; align-items:center; gap:5px;
  font-family:Sora; font-size:11px; font-weight:500;
  padding:2px 8px 2px 6px; border-radius:10px;
  white-space:nowrap; flex:none;
}

/* Ebene-Badge — kommuniziert die Ebene analog zum "Chef"-Status */
.level-badge{
  font-family:Sora; font-size:11px; font-weight:500;
  padding:2px 8px; border-radius:10px;
  white-space:nowrap; flex:none;
}
.level-badge.lvl-0{ background:rgba(127,119,221,.18); color:#CECBF6 }
.level-badge.lvl-1{ background:rgba(29,158,117,.18);  color:#9FE1CB }
.level-badge.lvl-2{ background:rgba(239,159,39,.18);  color:#FAC775 }
.level-badge.lvl-3{ background:rgba(180,178,169,.18); color:#D3D1C7 }
a.status-badge.status-link{
  text-decoration:none;
  cursor:pointer;
  transition:filter .12s, transform .08s;
}
a.status-badge.status-link:hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
}
a.status-badge.status-link:active{ transform:translateY(0) }
.status-badge .ti-arrow-right{ opacity:.6 }

/* =============================================================================
   CSS-Tooltips — zuverlaessig, sofortig, konsistent
   Nutzung: <button data-tooltip="Text" aria-label="Text">...</button>
   Erscheint sofort bei Hover/Focus mit kurzer Fade-Animation.
   ============================================================================= */
[data-tooltip]{ position:relative }
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after{
  content: attr(data-tooltip);
  position:absolute;
  top: calc(100% + 6px);
  left:50%;
  transform: translateX(-50%);
  padding: 5px 9px;
  background: rgba(20,20,20,.95);
  color:#ffffff;
  font-family: Sora;
  font-size: 11.5px;
  font-weight: 500;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  animation: tooltipFadeIn .12s ease-out;
}
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before{
  content: '';
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: rgba(20,20,20,.95);
  z-index: 100;
  pointer-events: none;
  animation: tooltipFadeIn .12s ease-out;
}
@keyframes tooltipFadeIn{
  from{ opacity:0; transform: translateX(-50%) translateY(-3px); }
  to  { opacity:1; transform: translateX(-50%) translateY(0);    }
}
.status-dot{
  width:7px; height:7px; border-radius:50%;
  display:inline-block; flex:none;
}
.st-chef    { background:#EEEDFE; color:#3C3489 }
.st-chef    .status-dot{ background:#7F77DD }
.st-none    { background:#F1EFE8; color:#5F5E5A }
.st-none    .status-dot{ background:#B4B2A9 }
.st-progress{ background:#FAEEDA; color:#854F0B }
.st-progress .status-dot{ background:#EF9F27 }
.st-ready   { background:#E1F5EE; color:#0F6E56 }
.st-ready   .status-dot{ background:#1D9E75 }
.st-done    { background:#EAF3DE; color:#3B6D11 }
.st-done    .status-dot{ background:#639922 }

/* Aktions-Icons: rechts in der Row via margin-left:auto.
   Nur beim Hover sichtbar (Desktop), Touch immer sichtbar. */
.tree-actions{
  display:flex; gap:4px; flex:none;
  margin-left:auto;
  opacity:0 !important; transition:opacity .15s;
  pointer-events:none;
}
.tree-row:hover .tree-actions,
.tree-row:focus-within .tree-actions{
  opacity:1 !important;
  pointer-events:auto;
}
@media (hover: none){
  .tree-actions{ opacity:1 !important; pointer-events:auto }
}

.icon-btn{
  width:26px; height:26px; padding:0; margin:0;
  border-radius:6px; border:1px solid var(--hair);
  background:transparent; color:var(--muted);
  cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; line-height:1;
  transition:all .1s;
}
.icon-btn:hover{
  background:rgba(255,255,255,.06);
  color:var(--ink); border-color:rgba(255,255,255,.18);
}
.icon-btn.primary{
  background:var(--blue); color:#fff; border-color:transparent;
}
.icon-btn.primary:hover{ background:#2a93ff }
.icon-btn.danger:hover{
  color:var(--bad); border-color:rgba(255,69,58,.35);
  background:rgba(255,69,58,.08);
}
.icon-btn i{ font-size:14px }

/* Inline-Formular unter einer Zeile (Anlegen / Bearbeiten) */
.emp-form{
  background:var(--surface-2);
  border:1px solid var(--hair);
  border-radius:12px;
  padding:14px 16px; margin:6px 0 10px;
}
.emp-form.editing{
  background:rgba(10,132,255,.06);
  border-color:rgba(10,132,255,.25);
}
.emp-form-title{
  font-family:Sora; font-weight:600; font-size:12.5px;
  color:var(--muted); margin-bottom:10px; letter-spacing:.02em;
}
.emp-form .grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.emp-form .field{ margin:0 }

.emp-check{
  display:flex; align-items:center; gap:8px;
  margin-top:12px; padding:9px 12px; border-radius:10px;
  background:var(--surface-2); border:1px solid var(--hair);
  cursor:pointer; user-select:none; font-size:13px;
}
.emp-check input{ width:15px; height:15px; margin:0; cursor:pointer }

.form-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:12px }

/* Inline-Formular unter einer Zeile (Anlegen / Bearbeiten) */
.emp-form{
  background:var(--surface-2);
  border:1px solid var(--hair);
  border-radius:12px;
  padding:14px 16px; margin:6px 0 10px;
}
.emp-form.editing{
  background:rgba(10,132,255,.06);
  border-color:rgba(10,132,255,.25);
}
.emp-form-title{
  font-family:Sora; font-weight:600; font-size:12.5px;
  color:var(--muted); margin-bottom:10px; letter-spacing:.02em;
}
.emp-form .grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.emp-form .field{ margin:0 }

.emp-check{
  display:flex; align-items:center; gap:8px;
  margin-top:12px; padding:9px 12px; border-radius:10px;
  background:var(--surface-2); border:1px solid var(--hair);
  cursor:pointer; user-select:none; font-size:13px;
}
.emp-check input{ width:15px; height:15px; margin:0; cursor:pointer }

.form-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:12px }


/* ---- 8. Detail-Panel (Gesprächs-Paarung) --------------------------------
   Klappt beim Klick auf eine Zeile darunter auf. Zeigt die drei Rollen
   im Gespräch: Selbst-, Fremdeinschätzung, Gespräch (3-Spalten-Grid).
   ------------------------------------------------------------------------- */

.detail-panel{
  background:rgba(255,255,255,.03);
  border-radius:8px;
  padding:14px; margin:2px 0 8px;
}
.detail-title{
  font-size:12px; color:var(--muted);
  margin-bottom:10px;
}

.pair-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px }
.pair-cell{
  background:var(--surface-2);
  border:1px solid var(--hair);
  border-radius:6px;
  padding:10px 12px;
}
.pair-label{
  font-size:11px; color:var(--muted);
  margin-bottom:4px;
  display:flex; align-items:center; gap:4px;
}
.pair-value{ font-size:13px; font-weight:500 }

.detail-actions{
  display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;
  padding-top:12px; border-top:1px solid var(--hair);
}
.detail-actions .btn i{ font-size:14px }


/* ---- 9. Perspektive-Leiste (mit Metriken rechts) ------------------------
   "Angemeldet als [Dropdown]" links, Aggregat-Metriken rechts.
   ------------------------------------------------------------------------- */

.pers-bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 14px; margin-bottom:14px;
  background:rgba(255,255,255,.03);
  border-radius:8px;
}
.pers-label{ font-size:12px; color:var(--muted) }
.pers-form{ margin:0 }
.pers-bar select{
  height:30px; padding:0 8px; min-width:260px; cursor:pointer;
  border-radius:6px; font-size:13px;
  border:1px solid var(--hair);
  background:var(--surface-2); color:var(--ink);
}
.pers-bar .ti-eye{ font-size:16px; color:var(--muted) }

.pers-metrics{
  display:flex; gap:14px; margin-left:auto; flex-wrap:wrap;
}
.pm{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; color:var(--muted);
}
.pm b{ font-family:Sora; font-size:13px; font-weight:500; color:var(--ink) }
.pm-dot{
  width:8px; height:8px; border-radius:50%;
  display:inline-block; flex:none;
}

.pers-hint-row{
  font-size:12px; color:var(--warn); font-style:italic;
  margin:-8px 0 14px; padding:0 4px;
}

/* Aktive-Gespräche-Übersicht oben (nur sichtbar wenn's was zu sehen gibt) */
.reviews-strip{
  background:rgba(255,255,255,.03);
  border:1px solid var(--hair);
  border-radius:10px;
  padding:12px 14px;
  margin-bottom:14px;
}
.reviews-strip-title{
  font-family:Sora; font-size:11px; font-weight:600;
  color:var(--muted); text-transform:uppercase; letter-spacing:.08em;
  margin-bottom:10px;
}
.reviews-strip-cards{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:8px;
}
.review-card{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:8px;
  background:var(--surface-2); border:1px solid var(--hair);
  text-decoration:none; color:inherit;
  transition:background .1s, border-color .1s, transform .08s;
}
.review-card:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.18);
}
.review-card:active{ transform:translateY(1px) }
.review-card-body{ min-width:0; flex:1 }
.review-card-name{
  font-size:13px; font-weight:500; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.review-card-status{ margin-top:3px }
.review-card .ti-arrow-right{ font-size:16px }


/* ---- 10. Logo-Vorschau (Einstellungen) ----------------------------------- */

.logo-preview{
  display:flex; align-items:center; gap:14px;
  margin-top:14px; padding:12px 14px;
  background:var(--surface-2);
  border:1px solid var(--hair);
  border-radius:12px;
}
.logo-preview-img{
  width:64px; height:64px; border-radius:12px; overflow:hidden;
  background:#0a1730; border:1px solid var(--hair); flex:none;
  display:flex; align-items:center; justify-content:center;
}
.logo-preview-img img{ max-width:100%; max-height:100%; object-fit:contain }
.logo-preview-text b{ display:block; font-weight:600; font-size:13.5px }
.logo-preview-text span{ display:block; color:var(--muted); font-size:12.5px; margin-top:3px }


/* ---- 11. Alte MA-Liste (nur noch im Admin-Bereich) ----------------------
   admin/index.php und admin/practice.php nutzen weiterhin diese Klassen.
   ------------------------------------------------------------------------- */

.emp{
  display:flex; align-items:center; gap:14px;
  padding:14px 0; border-top:1px solid var(--hair-2);
  flex-wrap:wrap;
}
.emp:first-child{ border-top:0 }
.emp .av{
  width:38px; height:38px; border-radius:10px;
  background:rgba(56,189,248,.14);
  border:1px solid rgba(56,189,248,.22);
  display:flex; align-items:center; justify-content:center;
  font-family:Sora; font-weight:600; color:var(--cyan); font-size:14px; flex:none;
}
.emp .who{ flex:1 1 220px; min-width:0 }
.emp .who b{ font-weight:600; font-size:14.5px; word-break:break-word }
.emp .who span{ display:block; color:var(--muted); font-size:12.5px; word-break:break-word }


/* Allgemeines Badge (Admin-Bereich, Gesprächs-Status) */
.badge{
  font-family:Sora; font-weight:700; font-size:11px;
  padding:3px 10px; border-radius:999px; white-space:nowrap;
  color:var(--muted); background:rgba(255,255,255,.06);
}
.badge.b-created         { color:var(--muted); background:rgba(255,255,255,.06) }
.badge.b-self_submitted  { color:var(--cyan);  background:rgba(56,189,248,.14) }
.badge.b-fremd_submitted { color:var(--warn);  background:rgba(255,159,10,.14) }
.badge.b-closed          { color:var(--good);  background:rgba(48,209,88,.14) }
.badge.b-self            { color:var(--cyan);  background:rgba(56,189,248,.14) }
.badge.b-fremd           { color:var(--warn);  background:rgba(255,159,10,.14) }
.badge.b-ready           { color:var(--good);  background:rgba(48,209,88,.14) }


/* ---- 12. Fragebogen-Editor ---------------------------------------------- */

.newform{
  background:var(--surface-2); border:1px solid var(--hair);
  border-radius:14px; padding:16px 18px; margin-bottom:14px;
}
.newform .grid{ display:flex; gap:10px; flex-wrap:wrap }
.newform .grid .field{ flex:1; min-width:160px; margin-bottom:0 }

.qsec{
  border:1px solid var(--hair); border-radius:16px;
  padding:14px 16px; margin-bottom:14px;
  background:var(--surface-2);
}
.qsec-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px }
.qsec-title{ font-family:Sora; font-weight:600; font-size:14px; color:var(--cyan); flex:1; min-width:140px }
.qsec-tools{ display:flex; gap:6px; align-items:center; flex-wrap:wrap }

.qrow{ display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; padding:11px 0; border-top:1px solid var(--hair-2) }
.qmain{ flex:1; min-width:200px }
.qtext{ font-size:13.8px; line-height:1.45 }
.qtext.info{ color:var(--warn); font-style:italic }
.qmeta{ display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin-top:6px }

.typ{
  font-family:Sora; font-weight:600; font-size:10.5px;
  color:var(--muted); background:rgba(255,255,255,.06);
  padding:3px 8px; border-radius:7px;
}
.typ.t-rating  { color:var(--cyan); background:rgba(56,189,248,.14) }
.typ.t-scale   { color:#5ac8fa;     background:rgba(90,200,250,.16) }
.typ.t-text    { color:var(--muted);background:rgba(255,255,255,.06) }
.typ.t-choice  { color:#bf5af2;     background:rgba(191,90,242,.16) }
.typ.t-multi   { color:#8f8cff;     background:rgba(125,122,255,.18) }
.typ.t-boolean { color:var(--good); background:rgba(48,209,88,.16) }
.typ.t-info    { color:var(--warn); background:rgba(255,159,10,.16) }

.qopts{ font-size:11.5px; color:var(--muted) }
.fbadge{ font-family:Sora; font-weight:700; font-size:10px; color:var(--blue); background:rgba(10,132,255,.16); padding:3px 8px; border-radius:7px }
.rbadge{ font-family:Sora; font-weight:700; font-size:10px; color:var(--warn); background:rgba(255,159,10,.14); padding:3px 8px; border-radius:7px }
.qtools{ display:flex; gap:6px; align-items:center; flex-wrap:wrap }
.moves{ display:inline-flex; gap:4px }

.inl{ display:inline-block }
.inl > summary{ margin:0 }
.inlbox{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px }
.mini2{
  padding:8px 11px; border-radius:10px;
  border:1px solid var(--hair); background:var(--surface-2); color:var(--ink);
  font-size:13.5px; min-width:200px;
}

.editbox{
  margin-top:10px; background:rgba(255,255,255,.03);
  border:1px solid var(--hair); border-radius:12px; padding:14px;
}
.editbox textarea{
  width:100%; min-height:58px; resize:vertical;
  padding:10px 12px; border-radius:10px;
  border:1px solid var(--hair); background:var(--surface-2); color:var(--ink);
  font-family:inherit; font-size:13.8px; margin-bottom:8px;
}
.editbox .fl{ display:block; font-size:12px; color:var(--muted); margin-bottom:5px; font-weight:500 }
.editbox .frow{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-bottom:10px }
.editbox .cb{ display:inline-flex; gap:7px; align-items:center; font-size:13px; color:var(--ink) }

.addq{ margin-top:6px }
.f-scale{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:8px }
.f-scale .field{ flex:1; min-width:130px; margin-bottom:0 }


/* ---- 13. QR-Codes / Zugänge --------------------------------------------- */

.qrgrid{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.qrcard{ background:var(--surface-2); border:1px solid var(--hair); border-radius:16px; padding:18px; text-align:center }
.qrcard h3{ font-size:14px; margin-bottom:4px }
.qrcard .for{ color:var(--muted); font-size:12px; margin-bottom:12px }

.qrbox{ margin:0 auto 12px; background:#fff; border-radius:10px; padding:12px; display:inline-block; line-height:0 }
.qrbox img, .qrbox canvas{ display:block }

.linkbox{ display:flex; gap:6px; align-items:center; justify-content:center; flex-wrap:wrap }
.linkbox code{
  font-family:ui-monospace,Menlo,monospace; font-size:11px;
  color:var(--cyan); background:rgba(56,189,248,.08);
  border:1px solid rgba(56,189,248,.2);
  padding:5px 8px; border-radius:8px; word-break:break-all; max-width:100%;
}


/* ---- 14. Mitarbeiter-Bogen (Fragen ausfüllen) --------------------------- */

.sec-label{
  font-family:Sora; font-weight:700; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:14px;
}
.q{ padding:14px 0; border-top:1px solid var(--hair-2) }
.q:first-of-type{ border-top:0 }
.qt{ font-size:14.5px; font-weight:500; margin-bottom:10px }
.req{ color:var(--warn) }
.qinfo{ color:var(--warn); font-style:italic; font-size:13.5px; padding:10px 0; border-top:1px solid var(--hair-2) }
.q textarea{
  width:100%; min-height:74px;
  padding:11px 13px; border-radius:11px;
  border:1px solid var(--hair); background:var(--surface-2); color:var(--ink);
  font-family:inherit; font-size:14px; resize:vertical;
}

.stars{ display:inline-flex; flex-direction:row-reverse; gap:4px }
.stars .star{ border:0; background:none; cursor:pointer; padding:2px; color:var(--hair); transition:color .12s }
.stars .star svg{ width:30px; height:30px; fill:currentColor; display:block }
.stars .star:hover, .stars .star:hover ~ .star{ color:#f5b301 }
.stars .star.on{ color:#f5b301 }

.opts{ display:flex; flex-wrap:wrap; gap:8px }
.chip{
  position:relative; cursor:pointer; font-size:13.5px;
  border:1px solid var(--hair); background:var(--surface-2); color:var(--ink);
  border-radius:11px; padding:9px 14px;
  user-select:none; transition:all .12s;
}
.chip input{ position:absolute; opacity:0; width:0; height:0 }
.chip:hover{ border-color:rgba(255,255,255,.25) }
.chip:has(input:checked){ border-color:var(--blue); background:rgba(10,132,255,.16); color:#dbe9ff }

.scalerow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.scalerow .chip{ min-width:40px; text-align:center }
.slab{ color:var(--muted); font-size:12px }


/* ---- 15. Passwortfeld --------------------------------------------------- */

.pwfield{ display:flex; gap:6px; align-items:center }
.pwfield.pw-compact{ display:inline-flex }
.pwinner{ position:relative; flex:1 }
.pwfield.pw-compact .pwinner{ flex:none; width:160px }
.pwinner input{
  width:100%; padding:11px 38px 11px 13px; border-radius:11px;
  border:1px solid var(--hair); background:var(--surface-2); color:var(--ink);
  font-family:inherit; font-size:14px;
}
.pweye{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  border:0; background:none; cursor:pointer;
  color:var(--muted); font-size:15px; line-height:1; padding:4px;
}
.pweye:hover{ color:var(--ink) }


/* ---- 16. Zugangs-Box (Passwort-Reset etc.) ------------------------------ */

.credbox{
  background:rgba(48,209,88,.10);
  border:1px solid rgba(48,209,88,.32);
  border-radius:12px; padding:14px 16px; margin-bottom:14px;
}
.credbox b{ font-family:Sora }
.credbox code{
  font-family:ui-monospace,Menlo,monospace;
  background:rgba(255,255,255,.08); padding:3px 8px; border-radius:7px;
  font-size:13.5px; color:var(--ink);
}
.credbox .note{ color:var(--muted); font-size:12px; margin-top:8px }


/* ---- 17. Auswertung (Selbst/Fremd-Vergleich) ---------------------------- */

.legend{ display:flex; gap:18px; flex-wrap:wrap; margin:2px 0 16px; color:var(--muted); font-size:13px }
.legend b{ font-weight:600 }
.dot{ display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:7px; vertical-align:-1px }

.avg{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px }
.avgbox{
  flex:1; min-width:140px;
  background:var(--surface-2); border:1px solid var(--hair);
  border-radius:16px; padding:15px 17px;
}
.avgbox b{ font-family:Sora; font-size:26px; font-weight:600; display:block }
.avgbox span{ color:var(--muted); font-size:12px }

.crow{ padding:12px 0; border-bottom:1px solid var(--hair-2) }
.crow:last-child{ border-bottom:0 }
.crow .cl{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:7px }
.crow .cn{ font-size:14px; font-weight:500 }

.gap{
  font-family:Sora; font-weight:700; font-size:12px;
  padding:2px 9px; border-radius:999px; white-space:nowrap;
}
.gap.match{ color:var(--good); background:rgba(48,209,88,.14) }
.gap.blind{ color:var(--bad);  background:rgba(255,69,58,.14) }
.gap.under{ color:var(--cyan); background:rgba(56,189,248,.14) }

.ctrack{ position:relative; height:30px }
.cbar{ position:absolute; height:11px; border-radius:6px; top:0; min-width:6px }
.cbar.self{ background:var(--self);  top:1px }
.cbar.fremd{ background:var(--fremd); top:16px }
.cval{ position:absolute; font-family:Sora; font-weight:700; font-size:11px; transform:translateX(8px) }
.cval.self { top:-2px; color:var(--self) }
.cval.fremd{ top:13px; color:var(--fremd) }
.aval{ font-size:14px; color:var(--self); margin-top:2px }

.callouts{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:6px }
.callout{ background:var(--surface-2); border:1px solid var(--hair); border-radius:16px; padding:16px 18px }
.callout h3{ font-size:14px; margin-bottom:9px }
.callout.blind h3{ color:var(--bad) }
.callout.under h3{ color:var(--cyan) }
.callout ul{ margin:0; padding-left:18px; font-size:13.5px }
.callout li{ margin-bottom:5px }
.callout .none{ color:var(--muted); font-size:13px }

.reco{ font-size:14px; line-height:1.65 }
.reco p{ margin:0 0 10px }
.reco-meta{ color:var(--muted); font-size:12px; margin-top:10px }

/* Druckfeste Vergleichsbalken (Flow-Layout) */
.cbars{ display:flex; flex-direction:column; gap:6px; margin-top:6px }
.cbarline{ display:flex; align-items:center; gap:10px }
.clab{ flex:none; width:54px; font-size:11px; font-weight:600 }
.clab.self { color:var(--self) }
.clab.fremd{ color:var(--fremd) }
.ctrack2{
  flex:1; height:10px; border-radius:6px;
  background:var(--gtrack); overflow:hidden;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.cfill{ height:100%; border-radius:6px; -webkit-print-color-adjust:exact; print-color-adjust:exact }
.cfill.self { background:var(--self) }
.cfill.fremd{ background:var(--fremd) }
.cnum{ flex:none; width:20px; text-align:right; font-family:Sora; font-weight:700; font-size:12px }
.cnum.self { color:var(--self) }
.cnum.fremd{ color:var(--fremd) }


/* ---- 18. E-Mail-Zeile (Gesprächsseite) ---------------------------------- */

.mailrow{ display:flex; gap:6px; margin-top:10px }
.mailrow input{
  flex:1; min-width:0;
  padding:8px 10px; border-radius:9px;
  border:1px solid var(--hair); background:var(--surface-2); color:var(--ink);
  font-size:12.5px;
}
.mailrow input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(10,132,255,.15) }
.mailprev{ font-size:11.5px; color:var(--muted); margin-top:6px; text-align:left }


/* ---- 19. Details / Summary ---------------------------------------------- */

summary{ cursor:pointer }
summary.btn{ list-style:none; display:inline-flex }
summary.btn::-webkit-details-marker{ display:none }


/* ---- 20. Responsive & Druck --------------------------------------------- */

@media (max-width:640px){
  .emp-act    { margin-left:0; width:100%; justify-content:flex-start; margin-top:6px }
  .emp-who    { flex-basis:100% }
  .emp-form .grid { grid-template-columns:1fr }
  .pair-grid  { grid-template-columns:1fr }
  .callouts   { grid-template-columns:1fr }
  .qrgrid     { grid-template-columns:1fr }
}

/* =============================================================================
   Light-Mode — greift nur wenn <body class="theme-light">
   Wird per Toggle im Dashboard umgeschaltet und via localStorage gemerkt.
   ============================================================================= */

body.theme-light{
  /* Palette konsistent mit Team-Puls */
  --bg:         #E4EAF3;
  --card-bg:    #ffffff;
  --ink:        #0A1628;
  --muted:      #5A6B85;
  --surface:    #ffffff;
  --surface-2:  #F0F3F9;
  --hair:       rgba(15,30,60,.14);
  --hair-2:     rgba(15,30,60,.08);
  --hi:         rgba(0,0,0,.02);
  --shadow:     rgba(0,0,0,.10);
  --gtrack:     #e5e5e5;
  --glow1:      rgba(10,132,255,.05);
  --glow2:      rgba(56,189,248,.04);
  --blue:       #0891B2;
  --cyan:       #0891B2;

  background: var(--bg) !important;
  color:var(--ink) !important;
}

/* Card mit weißem Hintergrund und dezentem Schatten */
body.theme-light .card{
  background:#ffffff !important;
  border-color:rgba(15,30,60,.14) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -16px rgba(0,0,0,.10) !important;
}

/* Buttons */
body.theme-light .btn{
  background:#ffffff !important;
  border-color:#d4d4d4 !important;
  color:#171717 !important;
}
body.theme-light .btn:hover{
  background:#f5f5f5 !important;
  border-color:#a3a3a3 !important;
}
body.theme-light .btn.primary{
  background:linear-gradient(180deg, #2a93ff, #0a84ff) !important;
  color:#fff !important; border-color:transparent !important;
  box-shadow:0 6px 14px -6px rgba(10,132,255,.4) !important;
}
body.theme-light .btn.on{
  background:rgba(10,132,255,.10) !important;
  border-color:#0a84ff !important; color:#0a84ff !important;
}
body.theme-light .btn.danger{ color:#dc2626 !important; border-color:#fecaca !important }
body.theme-light .btn.danger:hover{ background:#fef2f2 !important }

/* Formularfelder */
body.theme-light .field input,
body.theme-light .field select,
body.theme-light select,
body.theme-light textarea{
  background:#ffffff !important;
  border-color:#d4d4d4 !important;
  color:#171717 !important;
}

/* Pill */
body.theme-light .pill{
  color:#0369a1 !important;
  background:rgba(3,105,161,.08) !important;
  border-color:rgba(3,105,161,.20) !important;
}

/* Baum */
body.theme-light .tree-row:hover{ background:rgba(0,0,0,.04) !important }
body.theme-light .tree-row.selected{ background:rgba(10,132,255,.08) !important }
body.theme-light .tree-caret{ color:#737373 !important }
body.theme-light .tree-caret:hover{ color:#171717 !important; background:rgba(0,0,0,.05) !important }
body.theme-light .tree-avatar{
  background:rgba(8,145,178,.10) !important;
  color:#0891B2 !important;
}
/* Ebenen-Farben im Light-Mode — sanfte 50er-Stops als Fill, 800er als Text */
body.theme-light .tree-avatar.lvl-0{ background:#EEEDFE !important; color:#3C3489 !important }
body.theme-light .tree-avatar.lvl-1{ background:#E1F5EE !important; color:#0F6E56 !important }
body.theme-light .tree-avatar.lvl-2{ background:#FAEEDA !important; color:#854F0B !important }
body.theme-light .tree-avatar.lvl-3{ background:#F1EFE8 !important; color:#5F5E5A !important }
body.theme-light .tree-avatar-level{
  border-color:#ffffff !important;
}
/* Ebene-Badge im Light-Mode passend zur Avatar-Farbe */
body.theme-light .level-badge.lvl-0{ background:#EEEDFE !important; color:#3C3489 !important }
body.theme-light .level-badge.lvl-1{ background:#E1F5EE !important; color:#0F6E56 !important }
body.theme-light .level-badge.lvl-2{ background:#FAEEDA !important; color:#854F0B !important }
body.theme-light .level-badge.lvl-3{ background:#F1EFE8 !important; color:#5F5E5A !important }

/* BetterWorkflow-Zugriffs-Toggle im Light-Mode */
body.theme-light .bwf-toggle{ color:#171717 !important }
body.theme-light .bwf-toggle.on{
  border-color:#22c55e !important;
  background:rgba(34,197,94,.06) !important;
}
body.theme-light .bwf-toggle.off{
  border-color:#dc2626 !important;
  background:rgba(220,38,38,.06) !important;
}
body.theme-light .bwf-toggle-switch{ background:#dc2626 !important }
body.theme-light .bwf-toggle.on .bwf-toggle-switch{ background:#22c55e !important }
body.theme-light .bwf-toggle.on .bwf-toggle-state{ color:#16a34a !important }
body.theme-light .bwf-toggle.off .bwf-toggle-state{ color:#dc2626 !important }
body.theme-light .tree-name{ color:#171717 !important }
body.theme-light .tree-load{
  background:#f5f5f5 !important; color:#525252 !important;
}

/* Perspektive-Bar */
body.theme-light .pers-bar{
  background:#fafafa !important;
  border:1px solid #e5e5e5 !important;
}
body.theme-light .pers-metrics b{ color:#171717 !important }

/* Detail-Panel */
body.theme-light .detail-panel{
  background:#fafafa !important;
  border:1px solid #e5e5e5 !important;
}
body.theme-light .pair-cell{
  background:#ffffff !important; border-color:#e5e5e5 !important;
}

/* Meldungen */
body.theme-light .msg.ok{
  background:#dcfce7 !important; color:#166534 !important; border-color:#86efac !important;
}
body.theme-light .msg.error{
  background:#fee2e2 !important; color:#991b1b !important; border-color:#fca5a5 !important;
}

/* Icon-Buttons */
body.theme-light .icon-btn{
  border-color:#d4d4d4 !important; color:#737373 !important;
}
body.theme-light .icon-btn:hover{
  background:#f5f5f5 !important; color:#171717 !important; border-color:#a3a3a3 !important;
}
body.theme-light .icon-btn.primary{ color:#fff !important; border-color:transparent !important }
body.theme-light .icon-btn.danger:hover{
  color:#dc2626 !important; background:#fef2f2 !important; border-color:#fca5a5 !important;
}

/* Inline-Formulare */
body.theme-light .emp-form{
  background:#fafafa !important; border-color:#e5e5e5 !important;
}
body.theme-light .emp-form.editing{
  background:rgba(10,132,255,.05) !important;
  border-color:rgba(10,132,255,.30) !important;
}
body.theme-light .emp-check{
  background:#ffffff !important; border-color:#e5e5e5 !important;
}

/* Header */
body.theme-light .tree-head-title{ color:#171717 !important }
body.theme-light .tree-head-sub{ color:#737373 !important }
body.theme-light .head h1{ color:#171717 !important }
body.theme-light .head .sub{ color:#737373 !important }
body.theme-light .uname{ color:#737373 !important }

/* Fragebogen-Editor (fragen.php via inc/editor.php) */
body.theme-light .qsec{
  background:#ffffff !important;
  border-color:#e5e5e5 !important;
}
body.theme-light .qrow{ border-top-color:#ededed !important }
body.theme-light .qtext{ color:#171717 !important }
body.theme-light .editbox{
  background:#fafafa !important;
  border-color:#e5e5e5 !important;
}
body.theme-light .editbox textarea,
body.theme-light .mini2{
  background:#ffffff !important;
  border-color:#d4d4d4 !important;
  color:#171717 !important;
}

/* Fragetyp-Badges: hellere Hintergründe, kräftigere Text-Farben fuer Kontrast */
body.theme-light .typ{
  background:#f5f5f5 !important;
  color:#525252 !important;
}
body.theme-light .typ.t-rating  { background:rgba(8,145,178,.10) !important;  color:#0e7490 !important }
body.theme-light .typ.t-scale   { background:rgba(14,165,233,.10) !important; color:#0369a1 !important }
body.theme-light .typ.t-text    { background:#f5f5f5 !important;               color:#525252 !important }
body.theme-light .typ.t-choice  { background:rgba(168,85,247,.10) !important;  color:#7e22ce !important }
body.theme-light .typ.t-multi   { background:rgba(99,102,241,.10) !important;  color:#4338ca !important }
body.theme-light .typ.t-boolean { background:rgba(22,163,74,.10) !important;   color:#15803d !important }
body.theme-light .typ.t-info    { background:rgba(234,88,12,.10) !important;   color:#c2410c !important }
body.theme-light .fbadge{ background:rgba(10,132,255,.10) !important; color:#0a84ff !important }
body.theme-light .rbadge{ background:rgba(234,88,12,.10) !important;  color:#c2410c !important }

/* Info-Meldung */
body.theme-light .msg.info{
  color:#0369a1 !important;
  background:rgba(10,132,255,.08) !important;
  border-color:rgba(10,132,255,.20) !important;
}

/* Aktive-Gespräche-Übersicht */
body.theme-light .reviews-strip{
  background:#fafafa !important;
  border:1px solid #e5e5e5 !important;
}
body.theme-light .review-card{
  background:#ffffff !important; border-color:#e5e5e5 !important;
}
body.theme-light .review-card:hover{
  background:#f5f5f5 !important; border-color:#a3a3a3 !important;
}
body.theme-light .review-card-name{ color:#171717 !important }

/* Sanfter Wechsel */
body,
body .card,
body .btn,
body .field input,
body .field select,
body .tree-row,
body .tree-avatar,
body .detail-panel,
body .pers-bar,
body .icon-btn,
body .emp-form{
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

@media print{
  body { background:#fff !important; color:#111 !important }
  .card{ background:#fff !important; border:1px solid #ddd !important; box-shadow:none !important; margin-bottom:12px }
  .subnav, .btn, .no-print { display:none !important }
  .intro, .avgbox span, .legend, .reco-meta, .clab { color:#555 !important }
  .callout, .avgbox { background:#f6f8fb !important; border-color:#e2e8f0 !important }
  .callouts { grid-template-columns:1fr !important }
  .ctrack2  { background:#e6ebf2 !important }
  .crow, .cbarline, .callout, .avgbox, .q, .qinfo, .reco, .item {
    break-inside:avoid; page-break-inside:avoid;
  }
  .sec-label, h2.t, .pill { break-after:avoid; page-break-after:avoid }
  * { -webkit-print-color-adjust:exact; print-color-adjust:exact }
}