/* =========================================================
   LGBA Compass – Stylesheet  (v0.2)
   Corporate Design: Wasser / Industrie / Luft
   Light- + Dark-Mode  ·  moderne, dynamische Optik
   ========================================================= */

/* Offizielle LGBA-Schriften */
@font-face {
  font-family: "Nunito";
  src: url("/assets/fonts/Nunito-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("/assets/fonts/Rubik-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("/assets/fonts/Rubik-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* --- CI-Grundfarben (Verlaufs-Endpunkte) --- */
  --c-water-1:#5a77bb; --c-water-2:#32305b;   /* Bereich Wasser  */
  --c-ind-1:#875c63;   --c-ind-2:#3d271d;     /* Industriebereich */
  --c-luft-1:#89a6b6;  --c-luft-2:#345269;    /* Luft */

  /* --- CI-Verlaeufe --- */
  --grad-water: linear-gradient(135deg, var(--c-water-1), var(--c-water-2));
  --grad-ind:   linear-gradient(135deg, var(--c-ind-1),   var(--c-ind-2));
  --grad-luft:  linear-gradient(135deg, var(--c-luft-1),  var(--c-luft-2));
  --grad-brand: linear-gradient(120deg,#5a77bb 0%, #32305b 55%, #3d271d 115%);
  --grad-progress: linear-gradient(90deg, #5a77bb, #89a6b6);

  /* --- Rollenfarben (light) --- */
  --primary:#465f9e; --primary-2:#32305b; --primary-weak:#e9edf8;
  --accent:#875c63;  --accent-2:#3d271d;  --accent-weak:#f3eaec;
  --luft:#577087;    --luft-weak:#e8eef2;
  --success:#2f8f63; --success-weak:#e6f3ec;
  --warning:#c98a2b; --danger:#c9534f;

  /* --- Neutral (light) --- */
  --bg:#f2f4f9; --surface:#ffffff; --surface-2:#f7f9fc;
  --border:#e4e8f0; --text:#222633; --muted:#5e6b7d; --soft:#8b97a8;

  /* --- Sidebar (light) --- */
  --sidebar-bg: linear-gradient(168deg,#3c4e86 0%, #32305b 68%, #2b2746 100%);
  --sidebar-text:#cfd7ec; --sidebar-active:rgba(255,255,255,.16); --sidebar-hover:rgba(255,255,255,.08);

  --shadow:0 1px 2px rgba(20,28,50,.05), 0 8px 24px rgba(20,28,50,.07);
  --shadow-lg:0 16px 48px rgba(20,28,50,.18);

  --radius:16px; --radius-sm:10px;
  --sidebar-w:258px; --topbar-h:64px;
  --font: "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-heading: "Rubik", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

[data-theme="dark"] {
  --primary:#8499d8; --primary-2:#5a77bb; --primary-weak:rgba(132,153,216,.16);
  --accent:#b6909a;  --accent-2:#875c63;  --accent-weak:rgba(182,144,154,.16);
  --luft:#9bb3c2;    --luft-weak:rgba(155,179,194,.16);
  --success:#52b487; --success-weak:rgba(82,180,135,.16);

  --bg:#0e1016; --surface:#181b23; --surface-2:#1f232d;
  --border:#2a2f3b; --text:#e8ebf2; --muted:#9aa6b6; --soft:#6c7787;

  --sidebar-bg: linear-gradient(168deg,#1b2030 0%, #15161f 100%);
  --sidebar-text:#c4ccdc; --sidebar-active:rgba(132,153,216,.22); --sidebar-hover:rgba(255,255,255,.06);

  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.32);
  --shadow-lg:0 16px 48px rgba(0,0,0,.5);
}

* { box-sizing:border-box; }
html { scrollbar-gutter:stable; }
html,body { margin:0; padding:0; font-family:var(--font); color:var(--text); background:var(--bg);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:clip; }
body, .card, .sidebar, .topbar, .post, input, select, textarea { transition: background-color .25s, color .25s, border-color .25s; }
input, select, textarea, button{ max-width:100%; }
table{ max-width:100%; }
pre, code{ white-space:pre-wrap; overflow-wrap:anywhere; }

a { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3,h4 { margin:0 0 .4em; line-height:1.25; letter-spacing:-.01em; font-family:var(--font-heading); }
h1,h2 { font-weight:700; }     /* Rubik-Bold */
h3,h4 { font-weight:500; }     /* Rubik-Medium */
h1{font-size:1.7rem;} h2{font-size:1.3rem;} h3{font-size:1.08rem;}
p{margin:0 0 1em;} img{max-width:100%;}
p, h1, h2, h3, h4, .l-title, .l-meta, .muted, .small{ overflow-wrap:anywhere; }

/* SVG-Icons */
.icon{ width:20px; height:20px; display:inline-block; vertical-align:middle; flex:0 0 auto; }
.icon.sm{ width:16px; height:16px; } .icon.lg{ width:26px; height:26px; }

/* ============== App-Layout ============== */
body.app{ display:flex; min-height:100vh; }

.sidebar{ width:var(--sidebar-w); flex:0 0 var(--sidebar-w); background:var(--sidebar-bg);
  color:var(--sidebar-text); position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
  padding:18px 14px; gap:4px; }
/* Brand-Bereich: Logo + Schriftzug LGBA / Compass nebeneinander, klickbar → Dashboard */
.sidebar .brand{ display:flex; flex-direction:row; align-items:center; justify-content:center; gap:12px;
  padding:8px 8px 14px; color:#fff; text-decoration:none; cursor:pointer;
  transition: transform .15s, opacity .15s; }
.sidebar .brand:hover{ transform:translateY(-1px); opacity:.92; text-decoration:none; }
.sidebar .brand .mark{ width:auto; max-width:60px; max-height:60px; height:auto; display:block; object-fit:contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); flex-shrink:0; }
.sidebar .brand .brand-text{ display:flex; flex-direction:column; line-height:1; gap:3px;
  font-family:var(--font-heading); }
.sidebar .brand .brand-name{ font-weight:700; font-size:1.4rem; letter-spacing:.04em; color:#fff; }
.sidebar .brand .brand-sub{ font-weight:700; font-size:.78rem; opacity:.82; letter-spacing:.28em;
  text-transform:uppercase; color:#fff; }
.sidebar nav{ display:flex; flex-direction:column; gap:3px;
  flex:1 1 auto; min-height:0; overflow-y:auto;                 /* nimmt Resthoehe, scrollt intern falls noetig */
  scrollbar-width:none; -ms-overflow-style:none; }              /* Scrollbalken ausblenden */
.sidebar nav::-webkit-scrollbar{ width:0; height:0; display:none; }
.sidebar nav .nav-group{
  display:flex; align-items:center; gap:8px;
  margin-top:9px; padding:5px 12px 4px;
  font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700;
  color: rgba(255,255,255,.55);
  border-top:1px solid rgba(255,255,255,.10);
}
.sidebar nav .nav-group .icon{ opacity:.7; width:14px; height:14px; }
.sidebar nav .nav-group .nav-group-link{
  padding:0; border-radius:0; background:transparent; color:inherit;
  font-size:inherit; font-weight:inherit; letter-spacing:inherit; text-transform:inherit;
}
.sidebar nav .nav-group .nav-group-link:hover{ background:transparent; color:inherit; }
.sidebar nav a{ display:flex; align-items:center; gap:12px; padding:8px 12px; border-radius:var(--radius-sm);
  color:var(--sidebar-text); font-weight:540; font-size:.95rem; }
.sidebar nav a .icon{ opacity:.92; }
.sidebar nav a:hover{ background:var(--sidebar-hover); color:#fff; text-decoration:none; }
.sidebar nav a.active{ background:var(--sidebar-active); color:#fff; font-weight:720; box-shadow:inset 3px 0 0 var(--c-luft-1), 0 2px 8px rgba(0,0,0,.10); }
.sidebar .spacer{ display:none; } /* nav (flex:1) schiebt den Footer nun selbst nach unten */
.sidebar .side-foot{ font-size:.74rem; color:rgba(255,255,255,.45); padding:10px 8px; }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; max-width:100%; }
.topbar{ height:var(--topbar-h); background:var(--surface); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:14px; padding:0 22px; position:sticky; top:0; z-index:20;
  min-width:0; max-width:100%; overflow:visible; }
.topbar > *{ min-width:0; }
.topbar .page-title{ font-size:1.12rem; font-weight:680; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topbar .spacer{ flex:1 1 auto; min-width:12px; }
/* Abteilungs-Reiter (provisorisch, nur Berechtigte) */
.dept-tabs{ display:flex; align-items:center; gap:6px; margin-left:6px; flex:0 1 auto; min-width:0; overflow-x:auto; }
.dept-tab{ font:inherit; font-size:.82rem; font-weight:640; white-space:nowrap; cursor:pointer;
  padding:6px 13px; border-radius:999px; border:1px solid var(--border); background:var(--surface-2);
  color:var(--muted); line-height:1.1; transition:background-color .18s, color .18s, border-color .18s; }
.dept-tab:hover{ color:var(--text); border-color:var(--dc); }
.dept-tab.active{ background:var(--dc); border-color:var(--dc); color:#fff; }
.topbar .demo-switch{ display:flex; align-items:center; gap:7px; font-size:.8rem; color:var(--muted); min-width:0; }
.topbar select{ font:inherit; font-size:.85rem; padding:7px 10px; border:1px solid var(--border);
  border-radius:9px; background:var(--surface); color:var(--text); max-width:100%; }
.icon-btn{ display:grid; place-items:center; width:38px; height:38px; border-radius:10px; cursor:pointer;
  border:1px solid var(--border); background:var(--surface); color:var(--text); }
.icon-btn:hover{ background:var(--surface-2); }
.user-chip{ display:flex; align-items:center; gap:9px; min-width:0; flex:0 1 auto; }
.user-chip > div{ min-width:0; }
.user-chip .small{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.page{ padding:26px 28px 64px; max-width:none; width:100%; min-width:0; }
.page.stack > * + *{ margin-top:18px; }
body[data-page="dashboard"] .page{ max-width:none; }
body[data-page="dashboard"] .card{ min-height:0; }
body[data-page="dashboard"] .grid.cols-2{ grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); }
body[data-page="dashboard"] .grid.cols-3{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
body[data-page="dashboard"] .grid.cols-4{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
body[data-page="admin"] .page{ max-width:none; }

@media (min-width:761px){
  body.app{ display:block; }
  .sidebar{
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    height:100dvh;
    overflow-y:auto;
    scrollbar-gutter:stable;
    z-index:40;
    transition:transform .22s ease;
  }
  .main{
    margin-left:var(--sidebar-w);
    min-height:100dvh;
    transition:margin-left .22s ease;
  }

  /* ---- Menueleiste eingeklappt: mehr Platz fuer den Inhalt ----
     Die Leiste faehrt nach links aus dem Bild. Ein schmaler Streifen am
     linken Rand blendet sie beim Ueberfahren wieder ein. */
  body.nav-collapsed .sidebar{ transform:translateX(-100%); box-shadow:none; }
  body.nav-collapsed .main{ margin-left:14px; }
  body.nav-collapsed .nav-edge{ display:block; }
  body.nav-collapsed .sidebar:hover,
  body.nav-collapsed.nav-peek .sidebar{ transform:none; box-shadow:var(--shadow-lg); }

  /* Aufziehstreifen am Bildschirmrand */
  .nav-edge{
    display:none; position:fixed; left:0; top:0; bottom:0; width:14px; z-index:41;
    cursor:pointer; background:linear-gradient(90deg, rgba(60,78,134,.55), rgba(60,78,134,0));
  }
  .nav-edge:hover{ background:linear-gradient(90deg, rgba(60,78,134,.85), rgba(60,78,134,.1)); }
  .nav-edge::after{
    content:""; position:absolute; left:4px; top:50%; width:4px; height:46px; margin-top:-23px;
    border-radius:3px; background:rgba(255,255,255,.55);
  }
  /* Schalter in der Kopfleiste */
  .nav-toggle{
    display:inline-grid; place-items:center; width:34px; height:34px; flex:0 0 auto;
    border:1px solid var(--border); border-radius:9px; background:var(--surface);
    color:var(--text); cursor:pointer; padding:0;
  }
  .nav-toggle:hover{ background:var(--surface-2); }
}
/* Auf schmalen Geraeten bleibt die bisherige Schublade zustaendig */
@media (max-width:760px){ .nav-edge, .nav-toggle{ display:none !important; } }

/* ============== Bausteine ============== */
.avatar{ width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center;
  justify-content:center; color:#fff; font-weight:680; font-size:.85rem; flex:0 0 auto; background:var(--grad-water); }
.avatar.lg{ width:64px; height:64px; font-size:1.4rem; } .avatar.xl{ width:104px; height:104px; font-size:2.1rem; }

.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:20px 22px; min-width:0; max-width:100%; }
.card:has(table){ overflow-x:auto; }
.card.hover{ transition:transform .15s, box-shadow .15s; }
.card.hover:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.card h3{ margin-top:0; }
.card.accent-bar{ border-left:4px solid; border-image:var(--grad-ind) 1; }

.grid{ display:grid; gap:18px; min-width:0; }
.grid > *{ min-width:0; }
.grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid.cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

/* 2-Spalten-Layout (Inhalt + Randspalte) – responsiv */
.layout-2col{ display:grid; gap:22px; align-items:start; grid-template-columns:minmax(0,1fr) minmax(260px,300px); min-width:0; }
.layout-2col.left{ grid-template-columns:minmax(220px,248px) minmax(0,1fr); }
.sticky-side{ position:sticky; top:84px; }

@media (max-width:1000px){ .grid.cols-3,.grid.cols-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:680px){ .grid.cols-2,.grid.cols-3,.grid.cols-4{ grid-template-columns:minmax(0,1fr); } }

.row{ display:flex; gap:14px; align-items:center; min-width:0; } .row > *{ min-width:0; } .between{ justify-content:space-between; } .wrap{ flex-wrap:wrap; }
.muted{ color:var(--muted); } .soft{ color:var(--soft); } .small{ font-size:.85rem; } .center{ text-align:center; }
.mt0{margin-top:0}.mb0{margin-bottom:0}
.stack > * + *{ margin-top:16px; }
.section-title{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:4px 0 14px; min-width:0; flex-wrap:wrap; }
hr.sep{ border:none; border-top:1px solid var(--border); margin:6px 0; }

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-weight:620;
  cursor:pointer; padding:10px 18px; border-radius:11px; border:1px solid transparent; background:var(--grad-water);
  color:#fff; transition:filter .15s, transform .1s, background .2s; min-width:0; white-space:normal; text-align:center; }
.btn:hover{ filter:brightness(1.07); text-decoration:none; }
.btn:active{ transform:translateY(1px); }
.btn.ghost{ background:transparent; color:var(--primary); border-color:var(--border); }
.btn.ghost:hover{ background:var(--primary-weak); filter:none; }
.btn.accent{ background:var(--grad-ind); color:#fff; }
.btn.danger{ background:#a73344; color:#fff; }
.btn.block{ width:100%; } .btn.sm{ padding:7px 13px; font-size:.85rem; border-radius:9px; }

/* Badges / Pills */
.badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:100px;
  font-size:.77rem; font-weight:640; background:var(--primary-weak); color:var(--primary); }
.badge.accent{ background:var(--accent-weak); color:var(--accent); }
.badge.success{ background:var(--success-weak); color:var(--success); }
.badge.muted{ background:var(--surface-2); color:var(--muted); border:1px solid var(--border); }
.badge.lock{ background:var(--surface-2); color:var(--soft); border:1px solid var(--border); }
.pill{ display:inline-flex; align-items:center; gap:8px; padding:8px 13px; border:1px solid var(--border);
  border-radius:100px; font-size:.85rem; background:var(--surface); color:var(--text); cursor:pointer; }
.pill:hover{ background:var(--surface-2); text-decoration:none; }
.pill.active{ background:var(--primary-weak); color:var(--primary); border-color:transparent; }

/* Globale Bestätigungsbox: blockiert bewusst jede Hintergrund-Interaktion. */
.compass-confirm-overlay{ position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px; background:rgba(21,27,42,.58); backdrop-filter:blur(2px); }
.compass-confirm{ width:min(460px,100%); padding:26px; border-radius:16px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-lg); }
.compass-confirm h2{ margin:0 0 9px; font-size:1.2rem; }.compass-confirm p{ margin:0; color:var(--muted); line-height:1.5; }
.compass-confirm-actions{ display:flex; justify-content:flex-end; gap:9px; margin-top:22px; }
.compass-prompt-label{ display:grid; gap:6px; margin-top:16px; color:var(--text); font-size:.84rem; font-weight:700; }
.compass-prompt-label input,.compass-prompt-label textarea{ width:100%; min-height:42px; padding:9px 11px; border:1px solid var(--border); border-radius:9px; background:var(--surface-2); color:var(--text); font:inherit; resize:vertical; }
.compass-prompt-label input:focus,.compass-prompt-label textarea:focus{ outline:2px solid color-mix(in srgb,var(--primary) 32%,transparent); border-color:var(--primary); }
.compass-toast-stack{ position:fixed; top:76px; right:20px; z-index:1600; width:min(390px,calc(100vw - 32px)); display:grid; gap:10px; pointer-events:none; }
.compass-toast{ --toast-accent:var(--primary); position:relative; display:grid; grid-template-columns:38px minmax(0,1fr) 28px; gap:11px; align-items:start; padding:14px 14px 16px; overflow:hidden; border:1px solid color-mix(in srgb,var(--toast-accent) 42%,var(--border)); border-radius:14px; background:color-mix(in srgb,var(--surface) 96%,var(--toast-accent)); box-shadow:0 16px 36px rgba(10,18,38,.22); color:var(--text); opacity:0; transform:translateY(-10px) scale(.98); transition:opacity .18s ease,transform .18s ease; pointer-events:auto; }
.compass-toast.show{ opacity:1; transform:translateY(0) scale(1); }
.compass-toast.success{ --toast-accent:#2f8f63; }.compass-toast.error{ --toast-accent:#c44757; }
.compass-toast-icon{ width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:color-mix(in srgb,var(--toast-accent) 16%,var(--surface)); color:var(--toast-accent); font-size:1rem; font-weight:850; }
.compass-toast-copy{ min-width:0; padding-top:1px; }.compass-toast-copy strong{ display:block; color:var(--text); font-size:.9rem; }.compass-toast-copy p{ margin:4px 0 0; color:var(--muted); font-size:.79rem; line-height:1.4; overflow-wrap:anywhere; }
.compass-toast-close{ width:28px; height:28px; display:grid; place-items:center; padding:0; border:0; border-radius:8px; background:transparent; color:var(--muted); font:inherit; font-size:1.15rem; cursor:pointer; }.compass-toast-close:hover{ background:var(--surface-2); color:var(--text); }
.compass-toast-progress{ position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--toast-accent); transform-origin:left; animation:compass-toast-progress var(--toast-duration) linear forwards; }
@keyframes compass-toast-progress{ from{ transform:scaleX(1) } to{ transform:scaleX(0) } }
@media(max-width:680px){ .compass-toast-stack{ top:68px; right:12px; width:calc(100vw - 24px); } }

/* Progress */
.progress{ background:var(--surface-2); border:1px solid var(--border); border-radius:100px; height:12px; overflow:hidden; width:100%; }
.progress > span{ display:block; height:100%; background:var(--grad-progress); border-radius:100px; transition:width .5s; }
.progress.lg{ height:18px; }

/* Ring */
.ring{ --val:0; --size:130px; width:var(--size); height:var(--size); border-radius:50%;
  background:conic-gradient(var(--c-water-1) calc(var(--val)*1%), var(--surface-2) 0);
  display:grid; place-items:center; position:relative; }
.ring::before{ content:""; position:absolute; inset:13px; background:var(--surface); border-radius:50%; }
.ring .ring-label{ position:relative; text-align:center; } .ring .ring-label b{ font-size:1.7rem; }

/* Lektionen / Listenzeilen */
.lesson{ display:flex; align-items:center; gap:14px; padding:13px 16px; border:1px solid var(--border);
  border-radius:var(--radius); background:var(--surface); }
.lesson + .lesson{ margin-top:10px; }
.lesson .check{ width:28px; height:28px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  font-size:.8rem; font-weight:700; border:2px solid var(--border); color:var(--soft); }
.lesson.done .check{ background:var(--success); border-color:var(--success); color:#fff; }
.lesson.locked{ opacity:.55; }
.lesson .l-body{ flex:1; min-width:0; } .lesson .l-title{ font-weight:610; }
.lesson .l-meta{ font-size:.8rem; color:var(--muted); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

/* Tabs */
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:20px; flex-wrap:wrap; }
.tabs a{ padding:10px 16px; font-weight:620; color:var(--muted); border-bottom:2px solid transparent; }
.tabs a:hover{ text-decoration:none; color:var(--text); }
.tabs a.active{ color:var(--primary); border-bottom-color:var(--primary); }

/* Einheitliche Dropdowns im gesamten KOMPASS */
select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  min-height:42px; padding:9px 40px 9px 12px;
  border:1px solid var(--border); border-radius:10px;
  background-color:var(--surface);
  background-image:
    linear-gradient(45deg,transparent 50%,var(--muted) 50%),
    linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
  color:var(--text); font:inherit; line-height:1.35; cursor:pointer;
  box-shadow:0 1px 2px rgba(20,28,50,.04);
  transition:border-color .16s,box-shadow .16s,background-color .16s,opacity .16s;
}
select:hover:not(:disabled){ border-color:var(--primary); background-color:var(--surface-2); }
select:not([multiple]):not([size]),select[size="1"]{
  padding-right:40px !important;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%) !important;
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50% !important;
  background-size:5px 5px,5px 5px !important;
  background-repeat:no-repeat !important;
}
/* Alte seitenlokale Pfeile ausblenden: der zentrale Pfeil sitzt direkt im Feld. */
.member-select-wrap::after,.hm-select-wrap::after{ display:none !important; }
select:focus,select:focus-visible{
  outline:0; border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-weak),0 1px 2px rgba(20,28,50,.04);
}
select:disabled{ opacity:.58; cursor:not-allowed; background-color:var(--surface-2); color:var(--muted); }
select[aria-invalid="true"],select:invalid:not(:focus){ border-color:var(--danger); }
select option,select optgroup{ background:var(--surface); color:var(--text); font:inherit; }
select optgroup{ font-weight:750; }
select::-ms-expand{ display:none; }
select[multiple],select[size]:not([size="1"]){
  min-height:110px; padding:8px; background-image:none; cursor:default;
}
select.small,select.sm,.small > select{ min-height:36px; padding:6px 36px 6px 10px; border-radius:9px; }
/* Einheitliche ausfuellbare Felder im gesamten KOMPASS */
input:not([type]),
input[type="text"],input[type="search"],input[type="email"],input[type="tel"],
input[type="url"],input[type="password"],input[type="number"],input[type="date"],
input[type="time"],input[type="datetime-local"],input[type="month"],input[type="week"],
textarea{
  min-height:42px; padding:9px 12px;
  border:1px solid var(--border); border-radius:10px;
  background-color:var(--surface); color:var(--text); font:inherit; line-height:1.4;
  box-shadow:0 1px 2px rgba(20,28,50,.04);
  transition:border-color .16s,box-shadow .16s,background-color .16s,opacity .16s;
}
textarea{ min-height:96px; resize:vertical; }
input::placeholder,textarea::placeholder{ color:var(--soft); opacity:1; }
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--text); -webkit-box-shadow:0 0 0 1000px var(--surface) inset; caret-color:var(--text);
}
input[type="search"]::-webkit-search-cancel-button{ cursor:pointer; opacity:.65; }
input:not([type]):hover:not(:disabled):not([readonly]),
input:is([type="text"],[type="search"],[type="email"],[type="tel"],[type="url"],[type="password"],[type="number"],[type="date"],[type="time"],[type="datetime-local"],[type="month"],[type="week"]):hover:not(:disabled):not([readonly]),
textarea:hover:not(:disabled):not([readonly]){ border-color:var(--primary); background-color:var(--surface-2); }
input:not([type]):focus,input:not([type]):focus-visible,
input:is([type="text"],[type="search"],[type="email"],[type="tel"],[type="url"],[type="password"],[type="number"],[type="date"],[type="time"],[type="datetime-local"],[type="month"],[type="week"]):focus,
input:is([type="text"],[type="search"],[type="email"],[type="tel"],[type="url"],[type="password"],[type="number"],[type="date"],[type="time"],[type="datetime-local"],[type="month"],[type="week"]):focus-visible,
textarea:focus,textarea:focus-visible{
  outline:0; border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-weak),0 1px 2px rgba(20,28,50,.04);
}
input:disabled,textarea:disabled,input[readonly],textarea[readonly]{
  opacity:.62; cursor:not-allowed; background-color:var(--surface-2); color:var(--muted);
}
input[readonly],textarea[readonly]{ cursor:default; }
input[aria-invalid="true"],textarea[aria-invalid="true"]{ border-color:var(--danger); }
input.small,input.sm,.small > input,label.small input{ min-height:36px; padding:6px 10px; border-radius:9px; }

input[type="file"]{
  min-height:42px; padding:4px; border:1px solid var(--border); border-radius:10px;
  background-color:var(--surface); color:var(--muted); font:inherit; cursor:pointer;
}
input[type="file"]::file-selector-button{
  min-height:32px; margin-right:10px; padding:6px 11px; border:0; border-radius:7px;
  background:var(--primary-weak); color:var(--primary); font:inherit; font-weight:750; cursor:pointer;
}
input[type="file"]:hover:not(:disabled){ border-color:var(--primary); }
input[type="file"]:hover:not(:disabled)::file-selector-button{ background:var(--primary); color:#fff; }
input[type="file"]:focus-visible{ outline:0; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-weak); }

input[type="color"]{
  width:46px; min-width:46px; height:42px; min-height:42px; padding:4px;
  border:1px solid var(--border); border-radius:10px; background:var(--surface); cursor:pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper{ padding:0; }
input[type="color"]::-webkit-color-swatch{ border:0; border-radius:6px; }
input[type="color"]::-moz-color-swatch{ border:0; border-radius:6px; }
input[type="color"]:hover{ border-color:var(--primary); }
input[type="color"]:focus-visible{ outline:0; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-weak); }

input[type="checkbox"],input[type="radio"]{
  width:18px; height:18px; min-width:18px; margin:0; accent-color:var(--primary); cursor:pointer;
}
input[type="checkbox"]:focus-visible,input[type="radio"]:focus-visible{ outline:3px solid var(--primary-weak); outline-offset:2px; }
input[type="checkbox"]:disabled,input[type="radio"]:disabled{ opacity:.5; cursor:not-allowed; }

input[type="range"]{ accent-color:var(--primary); cursor:pointer; }
[data-theme="dark"] input:is([type="date"],[type="time"],[type="datetime-local"],[type="month"],[type="week"])::-webkit-calendar-picker-indicator{ filter:invert(1) brightness(.85); opacity:.8; cursor:pointer; }
/* Forms */
label.field{ display:block; margin-bottom:14px; font-size:.85rem; font-weight:640; color:var(--muted); }
label.field input, label.field textarea, label.field select{ display:block; width:100%; margin-top:6px; font:inherit;
  color:var(--text); padding:10px 12px; border:1px solid var(--border); border-radius:10px; background-color:var(--surface); box-shadow:0 1px 2px rgba(20,28,50,.04); }
label.field select{ padding-right:40px; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
label.field input:focus, label.field textarea:focus, label.field select:focus{ outline:0; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-weak),0 1px 2px rgba(20,28,50,.04); }
label.field textarea{ min-height:90px; resize:vertical; }

/* Media-Platzhalter */
.media-ph{ border:1px dashed var(--border); border-radius:var(--radius); background:var(--surface-2);
  display:grid; place-items:center; text-align:center; color:var(--muted); padding:24px; gap:6px; min-height:120px; }

/* Suche */
.searchbar{ position:relative; }
.searchbar input{ width:100%; font:inherit; padding:14px 16px 14px 46px; border:1px solid var(--border);
  border-radius:13px; background:var(--surface); box-shadow:var(--shadow); color:var(--text); }
.searchbar .s-ico{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--soft); }
mark{ background:var(--primary-weak); color:var(--primary); padding:0 2px; border-radius:3px; }

/* Community-Post */
.post{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.post .p-head{ display:flex; align-items:center; gap:12px; padding:16px 18px 4px; }
.post .p-body{ padding:6px 18px 14px; }
.post .p-media{ background:var(--surface-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  display:grid; place-items:center; min-height:220px; color:var(--soft); gap:8px; }
.post .p-actions{ display:flex; gap:18px; padding:10px 18px; color:var(--muted); font-size:.9rem; }
.post .p-actions span{ cursor:pointer; display:inline-flex; gap:7px; align-items:center; }
.post .p-actions span:hover{ color:var(--primary); }

/* Achievement / Kompetenz */
.ach{ text-align:center; padding:18px 14px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.ach .medal{ width:46px; height:46px; margin:0 auto; display:grid; place-items:center; border-radius:14px;
  background:var(--accent-weak); color:var(--accent); }
.ach.on .medal{ background:var(--grad-ind); color:#fff; }
.ach.locked{ opacity:.5; filter:grayscale(.5); }
.ach .a-name{ font-weight:660; margin-top:8px; } .ach .a-desc{ font-size:.78rem; color:var(--muted); }

.comp{ display:flex; gap:13px; align-items:center; padding:13px 16px; border:1px solid var(--border);
  border-radius:var(--radius); background:var(--surface); }
.comp .c-ico{ width:44px; height:44px; border-radius:12px; background:var(--primary-weak); color:var(--primary);
  display:grid; place-items:center; flex:0 0 auto; }

/* KPI */
.kpi .k-val{ font-size:1.9rem; font-weight:720; line-height:1; }
.kpi .k-lbl{ color:var(--muted); font-size:.85rem; margin-top:6px; }
.kpi.private{ border-left:3px solid var(--accent); }

/* Kalender-Vorschau */
.cal-day{ display:flex; gap:14px; align-items:center; }
.cal-date{ width:62px; height:62px; border-radius:14px; background:var(--grad-luft); color:#fff;
  display:grid; place-items:center; text-align:center; flex:0 0 auto; line-height:1.1; }
.cal-date .d{ font-size:1.5rem; font-weight:720; } .cal-date .m{ font-size:.7rem; text-transform:uppercase; opacity:.9; }
.cal-item{ display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-top:1px solid var(--border); }
.cal-item .t{ font-variant-numeric:tabular-nums; color:var(--primary); font-weight:640; font-size:.85rem; min-width:46px; }

/* Sichtbarkeits-Umschalter (Profil) */
.view-toggle{ display:inline-flex; padding:4px; background:var(--surface-2); border:1px solid var(--border); border-radius:100px; }
.view-toggle button{ font:inherit; font-weight:620; font-size:.85rem; border:none; background:transparent; color:var(--muted);
  padding:7px 15px; border-radius:100px; cursor:pointer; display:inline-flex; gap:7px; align-items:center; }
.view-toggle button.active{ background:var(--surface); color:var(--primary); box-shadow:var(--shadow); }

/* Profil: Bereiche erst über Kacheln auswählen, Details erscheinen darunter. */
.profile-section-picker{ display:grid; grid-template-columns:repeat(3,minmax(0,260px)); justify-content:start; gap:10px; margin-top:14px; }
.profile-section-picker button{ display:flex; align-items:center; gap:10px; min-height:62px; padding:10px 12px; text-align:left; border:1px solid var(--border); border-radius:13px; background:var(--surface); color:var(--text); cursor:pointer; font:inherit; transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.profile-section-picker button:hover{ border-color:var(--primary); box-shadow:var(--shadow); }
.profile-section-picker button.active{ border-color:var(--primary); background:linear-gradient(135deg,var(--primary-weak),var(--surface)); box-shadow:0 8px 22px rgba(48,69,120,.13); }
.profile-section-picker b{ display:block; font-size:.95rem; }
.profile-section-picker small{ display:block; margin-top:4px; color:var(--muted); line-height:1.35; }
.profile-section-icon{ display:grid; place-items:center; width:36px; height:36px; flex:0 0 36px; border-radius:10px; color:var(--primary); background:var(--primary-weak); }
.profile-section-picker button.active .profile-section-icon{ color:#fff; background:var(--primary); }
.profile-section-picker.with-daily-target{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.profile-daily-target{ display:flex; align-items:center; gap:10px; min-height:62px; padding:10px 12px; border:1px solid var(--border); border-radius:13px; background:var(--surface-2); color:var(--text); }
.profile-daily-target[hidden]{ display:none; }
.profile-daily-target-copy{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; min-width:0; width:100%; }
.profile-daily-target-copy small{ margin:0; font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.profile-daily-target-copy b{ font-size:1.35rem; color:var(--primary); line-height:1; }
.profile-section-arrow{ margin-left:auto; color:var(--primary); }
@media (max-width:850px){ .profile-section-picker,.profile-section-picker.with-daily-target{ grid-template-columns:repeat(2,minmax(180px,1fr)); } }
@media (max-width:560px){ .profile-section-picker,.profile-section-picker.with-daily-target{ grid-template-columns:1fr; } }

/* ============== Landing / Login ============== */
body.landing{ display:grid; place-items:center; min-height:100vh; padding:24px;
  background:
    radial-gradient(1100px 520px at 82% -12%, rgba(90,119,187,.30), transparent),
    radial-gradient(820px 480px at -8% 112%, rgba(135,92,99,.22), transparent),
    var(--bg); }
.login-wrap{ width:100%; max-width:940px; display:grid; grid-template-columns:1.05fr .95fr;
  background:var(--surface); border-radius:22px; box-shadow:var(--shadow-lg); overflow:hidden; border:1px solid var(--border); }
@media (max-width:760px){ .login-wrap{ grid-template-columns:1fr; } .login-hero{ display:none; } }
.login-hero{ background:var(--grad-brand); color:#fff; padding:42px 38px; position:relative; overflow:hidden; }
.login-hero .mark{ width:54px; height:54px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
.login-hero h1{ color:#fff; font-size:1.95rem; margin-top:16px; }
.login-hero .tag{ color:rgba(255,255,255,.8); font-style:italic; margin-top:-6px; }
.login-hero ul{ list-style:none; padding:0; margin:24px 0 0; display:flex; flex-direction:column; gap:14px; }
.login-hero li{ display:flex; gap:11px; align-items:center; color:rgba(255,255,255,.92); }
.login-hero li .icon{ color:var(--c-luft-1); }
.login-form{ padding:42px 40px; display:flex; flex-direction:column; justify-content:center; }
.ms-btn{ display:flex; align-items:center; justify-content:center; gap:11px; width:100%; padding:13px;
  border:1px solid var(--border); border-radius:11px; background:var(--surface); color:var(--text); cursor:pointer;
  font:inherit; font-weight:620; }
.ms-btn:hover{ background:var(--surface-2); }
.divider{ display:flex; align-items:center; gap:12px; color:var(--soft); font-size:.8rem; margin:18px 0; }
.divider::before,.divider::after{ content:""; flex:1; height:1px; background:var(--border); }

/* prominenter XP-Block (Profil) */
.xp-card{ position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--primary-weak), var(--accent-weak));
  border:1px solid var(--border); border-radius:18px; padding:20px 22px; box-shadow:var(--shadow); }
.xp-card .xp-bar{ position:relative; height:22px; border-radius:100px; background:var(--surface-2); border:1px solid var(--border); overflow:hidden; }
.xp-card .xp-bar > span{ display:block; height:100%; background:linear-gradient(90deg, var(--c-water-1) 0%, var(--c-luft-1) 60%, var(--c-ind-1) 100%);
  box-shadow:0 0 18px rgba(90,119,187,.55); transition:width .6s ease; border-radius:100px; }
.xp-card .xp-bar::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%); animation:xpsheen 3.4s ease-in-out infinite; }
@keyframes xpsheen{ 0%{transform:translateX(-100%)} 60%{transform:translateX(100%)} 100%{transform:translateX(100%)} }
.xp-level-badge{ display:inline-flex; align-items:center; gap:8px; padding:7px 13px; color:#fff;
  background:linear-gradient(135deg, var(--c-water-1), var(--c-water-2)); border-radius:100px; font-weight:700; font-size:.9rem; box-shadow:var(--shadow); }
.xp-card .xp-num{ font-size:1.85rem; font-weight:740; line-height:1; letter-spacing:-.01em; }
/* Profilkopf: Identitaet und Level kompakt in einer gemeinsamen Zeile. */
.profile-identity-card{ padding:16px 18px; }
.profile-identity-layout{
  display:grid; grid-template-columns:auto minmax(250px,.85fr) minmax(360px,1.25fr);
  gap:16px; align-items:center;
}
.profile-identity-card .avatar.xl{ width:76px; height:76px; font-size:1.55rem; }
.profile-identity-main{ min-width:0; }
.profile-identity-main h1{ font-size:1.45rem; line-height:1.15; }
.profile-identity-main .profile-identity-meta{ font-size:.88rem; line-height:1.35; }
.profile-identity-actions{ display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; align-items:center; }
.profile-identity-actions .avatar-btn{ padding:4px 8px; font-size:.72rem; }
.profile-identity-actions input{ min-height:32px; }
.profile-xp-compact{ min-width:0; padding:12px 14px; border-radius:14px; box-shadow:none; }
.profile-xp-layout{ display:grid; grid-template-columns:auto minmax(130px,.65fr) minmax(150px,1fr); gap:12px; align-items:center; }
.profile-xp-compact .ring{ --size:70px !important; }
.profile-xp-compact .ring::before{ inset:9px; }
.profile-xp-compact .ring .ring-label b{ font-size:1.25rem !important; }
.profile-xp-compact .ring .small{ font-size:.68rem; }
.profile-xp-compact .xp-level-badge{ padding:5px 9px; font-size:.76rem; }
.profile-xp-compact .xp-num{ margin-top:5px !important; font-size:1.35rem; }
.profile-xp-compact .xp-num span{ font-size:.78rem !important; }
.profile-xp-compact .xp-status{ margin-top:3px; font-size:.7rem; line-height:1.25; }
.profile-xp-compact .xp-bar{ height:12px; }
.profile-xp-scale{ margin-top:5px !important; font-size:.67rem !important; }
@media (max-width:1050px){
  .profile-identity-layout{ grid-template-columns:auto minmax(220px,1fr); }
  .profile-xp-compact{ grid-column:1 / -1; }
}
@media (max-width:620px){
  .profile-identity-card{ padding:14px; }
  .profile-identity-layout{ grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:start; }
  .profile-identity-card .avatar.xl{ width:62px; height:62px; font-size:1.3rem; }
  .profile-xp-layout{ grid-template-columns:auto minmax(0,1fr); }
  .profile-xp-progress{ grid-column:1 / -1; }
}

/* Avatar mit Bild */
.avatar.img{ background-size:cover; background-position:center; color:transparent; }
.avatar-btn{ display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:.8rem; font-weight:620;
  border:1px solid var(--border); background:var(--surface); padding:6px 10px; border-radius:9px; cursor:pointer; color:var(--text); }
.avatar-btn:hover{ background:var(--surface-2); }

/* Freiwillige Profil-Personalisierung */
.profile-personal-summary{display:grid;gap:7px;margin-top:10px}
.profile-personal-summary-row{display:flex;align-items:flex-start;gap:8px;font-size:.82rem;line-height:1.4}
.profile-personal-summary-row>strong{flex:0 0 100px;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.035em}
.profile-personal-chips{display:flex;flex-wrap:wrap;gap:6px}
.profile-personal-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border:1px solid color-mix(in srgb,var(--profile-accent,var(--primary)) 32%,var(--border));border-radius:999px;background:color-mix(in srgb,var(--profile-accent,var(--primary)) 9%,var(--surface));font-size:.75rem;font-weight:650}
.profile-personalization-card{border-left:4px solid var(--profile-accent,var(--primary))}
.profile-personalization-intro{margin-bottom:0}
.profile-personalization-editor[hidden]{display:none}
.profile-personalization-editor{border-top:1px solid var(--border);margin-top:16px;padding-top:16px}
.profile-personalization-actions{margin-top:16px}
.profile-personalization-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.profile-personalization-grid label{display:grid;gap:6px;font-size:.8rem;font-weight:700}
.profile-personalization-grid textarea{min-height:82px;resize:vertical}
.profile-personalization-wide{grid-column:1/-1}
.profile-accent-options{display:flex;flex-wrap:wrap;gap:9px;margin-top:7px}
.profile-accent-swatch{width:34px;height:34px;border-radius:50%;border:3px solid var(--surface);outline:1px solid var(--border);cursor:pointer;box-shadow:0 0 0 0 transparent;transition:transform .16s ease,box-shadow .16s ease}
.profile-accent-swatch:hover{transform:scale(1.08)}
.profile-accent-swatch.is-selected{box-shadow:0 0 0 3px var(--text)}
.profile-pin-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.profile-pin-option{display:flex!important;grid-template-columns:none!important;flex-direction:row;align-items:center;gap:8px!important;padding:9px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);font-weight:600!important}
.dashboard-order-list{display:grid;gap:7px;margin-top:8px}
.dashboard-order-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center;padding:9px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}
.dashboard-order-index{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--primary-weak);color:var(--primary);font-weight:800;font-size:.75rem}
.dashboard-order-actions{display:flex;gap:4px}
.dashboard-order-actions button{min-width:30px;min-height:30px;padding:2px}
@media(max-width:720px){.profile-personalization-grid,.profile-pin-options{grid-template-columns:1fr}.profile-personalization-wide{grid-column:auto}.profile-personal-summary-row{display:grid;gap:3px}.profile-personal-summary-row>strong{flex-basis:auto}}

/* SVG-Badges */
.badge-svg{ display:block; }
.badge-tile{ position:relative; display:inline-flex; flex-direction:column; align-items:center; gap:6px;
  padding:10px 10px 8px; border:1px solid var(--border); border-radius:14px; background:var(--surface);
  cursor:pointer; outline:none;
  transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease;
  width:96px; max-width:96px;
}
.badge-tile .badge-svg-wrap{ filter: drop-shadow(0 2px 6px rgba(20,28,50,.18));
  transition: transform .25s cubic-bezier(.2,.7,.2,1), filter .25s ease; transform-origin:center center; will-change:transform; }
.badge-tile .nm{ font-size:.72rem; font-weight:660; text-align:center; color:var(--text);
  line-height:1.15; max-width:84px; transition: color .2s ease; }
.badge-tile:hover, .badge-tile:focus-visible{ z-index:30; border-color:var(--primary); box-shadow:var(--shadow-lg); }
.badge-tile:hover .badge-svg-wrap, .badge-tile:focus-visible .badge-svg-wrap{
  transform: scale(1.7); filter: drop-shadow(0 10px 22px rgba(20,28,50,.35)); }
.badge-tile:hover .nm{ color:var(--primary); }
.badge-tile.selected{ border-color:var(--primary); background:var(--primary-weak); }

/* schmale Galerie nebeneinander */
.badge-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.badge-grid .badge-tile{ flex:0 0 auto; }

/* gruppierte Vorlagen-Palette */
.badge-palette > h4{ font-size:.7rem; color:var(--muted); letter-spacing:.1em; text-transform:uppercase;
  margin:14px 0 6px; font-weight:700; }

/* ============== Klassenfertigkeiten (Skill-Tree) ============== */
.skill-tree{ position:relative; display:flex; flex-wrap:wrap; gap:22px 14px; padding:22px 8px 14px;
  justify-content:center; border-radius:14px;
  background:
    radial-gradient(700px 280px at 50% -10%, var(--primary-weak), transparent 70%),
    radial-gradient(500px 240px at 50% 120%, var(--accent-weak), transparent 70%);
}
.skill-node{ position:relative; width:124px; text-align:center; }
.skill-hex{ width:124px; height:132px; display:block; margin:0 auto; transition:transform .25s ease, filter .25s ease; }
.skill-node:hover .skill-hex{ transform: translateY(-4px) scale(1.04); }
.skill-node.unlocked .skill-hex{ filter: drop-shadow(0 6px 14px rgba(90,119,187,.35)); }
.skill-node .skill-icon{ position:absolute; top:42px; left:50%; transform:translateX(-50%); width:50px; height:50px;
  display:grid; place-items:center; color:#fff; pointer-events:none; }
.skill-node .skill-icon .icon{ width:38px; height:38px; }
.skill-node.locked{ opacity:.55; }
.skill-node.locked:hover{ opacity:.85; }
.skill-node.locked .skill-icon{ color:var(--primary); }
.skill-node.locked .skill-icon .icon{ opacity:.45; }
.skill-status{ position:absolute; top:16px; right:8px; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; font-size:.85rem; font-weight:700;
  background:var(--success); color:#fff; box-shadow:0 0 10px rgba(47,143,99,.55); }
.skill-status.locked{ background:rgba(90,119,187,.18); color:var(--primary); box-shadow:none; border:1px dashed rgba(90,119,187,.45); }
.skill-name{ margin-top:8px; font-weight:680; font-size:.86rem; color:var(--text); line-height:1.2; }
.skill-node.locked .skill-name{ color:var(--muted); font-weight:600; }
.skill-tooltip{ position:absolute; top:142px; left:50%; transform:translateX(-50%); width:300px; max-width:88vw;
  background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 14px;
  box-shadow:var(--shadow-lg); z-index:25; display:none; text-align:left; font-size:.78rem; color:var(--text); }
.skill-tooltip b{ display:block; margin-bottom:4px; font-size:.92rem; color:var(--primary); }
.skill-tooltip .lab{ color:var(--muted); font-weight:640; }
.skill-node:hover .skill-tooltip, .skill-node:focus-within .skill-tooltip{ display:block; }

/* Source-Tag innerhalb der Zusatzerrungenschaften */
.badge-tile .source{ font-size:.6rem; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; margin-top:1px; }

/* Holrate-Bewertungsskala: <80 rot, <90 blau, <95 grün, ≥95 gold + Puls */
.hol-red   { color:#a73344 !important; }
.hol-blue  { color:#5a77bb !important; }
.hol-green { color:#1f7a3b !important; }
.hol-gold  { color:#c9a227 !important; animation: holGoldTextPulse 1.8s ease-in-out infinite; }
@keyframes holGoldPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(201,162,39,.65); }
  50%     { box-shadow: 0 0 0 10px rgba(201,162,39,0); }
}
@keyframes holGoldTextPulse {
  0%,100% {
    text-shadow:
      0 0 6px rgba(201,162,39,.45),
      0 0 0  rgba(201,162,39,0);
    filter: brightness(1);
  }
  50% {
    text-shadow:
      0 0 14px rgba(255,210,80,.95),
      0 0 28px rgba(201,162,39,.55),
      0 0 4px  rgba(255,235,150,.7);
    filter: brightness(1.18);
  }
}
.hol-gold-pulse{ animation: holGoldPulse 1.8s ease-in-out infinite; }
.hol-gold-glow{
  color:#c9a227 !important;
  animation: holGoldTextPulse 1.8s ease-in-out infinite;
  font-weight:700;
}

/* Leistungs-Radar (Spider-Chart mit Avatar in der Mitte) */
.radar-wrap2{ width:100%; max-width:520px; margin:0 auto; position:relative; }
.radar-svg2{ width:100%; height:auto; display:block; }
.radar-svg2 .grid-poly{ fill:none; stroke:rgba(120,130,150,.20); stroke-width:1; }
.radar-svg2 .grid-poly:nth-child(odd){ fill:rgba(120,130,150,.04); }
.radar-svg2 .axis-line{ stroke:rgba(120,130,150,.30); stroke-width:1; }
.radar-svg2 .data-poly{ stroke-width:2.5; transition: fill .3s, stroke .3s; filter: drop-shadow(0 4px 8px rgba(50,48,91,.15)); }
.radar-svg2 .data-pt{ stroke:var(--surface,#fff); stroke-width:2; transition: fill .3s, r .2s; }
.radar-svg2 .axis-label{ font-size:12px; font-weight:680; fill:var(--text); pointer-events:none; }
.radar-svg2 .axis-value{ font-size:11px; font-weight:700; }
.radar-svg2 .axis-unit{ font-size:9px; fill:var(--muted); }
.radar-svg2 .center-img{ }
.radar-svg2 .center-ring{ fill:none; stroke-width:3; transition: stroke .3s; }
.radar-svg2 .center-ring.is-gold{ stroke:#c9a227; }
.radar-svg2 .sector-hit{ fill:transparent; cursor:pointer; transition: fill .15s; }
.radar-svg2 .sector-hit:hover{ fill:rgba(90,119,187,.08); }
.radar-svg2 .sector-hit:hover ~ * .data-pt-active{ r:7; }

/* Hover-Tooltip am Radar */
.radar-tip2{
  position:absolute; pointer-events:none;
  background:var(--surface,#fff); border:1px solid var(--border);
  border-radius:14px; box-shadow:0 10px 24px rgba(20,28,50,.18);
  padding:12px 14px; min-width:200px; max-width:260px;
  display:none; z-index:10;
  transform: translate(-50%, -100%);
}
.radar-tip2.show{ display:block; }
.radar-tip2 .tip-head{
  display:flex; align-items:center; gap:10px; margin-bottom:6px;
}
.radar-tip2 .tip-ico{
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  background: var(--primary-weak);
  color: var(--ring-color, var(--primary));
  border:2px solid var(--ring-color, var(--primary));
}
.radar-tip2 .tip-ico .icon{ width:22px; height:22px; }
.radar-tip2 .tip-title{ font-weight:680; font-size:.86rem; line-height:1.1; }
.radar-tip2 .tip-value{ font-size:1.3rem; font-weight:700; color: var(--ring-color, var(--primary)); line-height:1; margin-top:4px; }
.radar-tip2 .tip-sub{ font-size:.74rem; color:var(--muted); margin-top:4px; }
.radar-tip2::after{
  content:''; position:absolute; left:50%; bottom:-7px;
  transform:translateX(-50%) rotate(45deg);
  width:12px; height:12px; background:var(--surface,#fff);
  border-right:1px solid var(--border); border-bottom:1px solid var(--border);
}

/* KPI-Ringe (Probenehmer-Leistungs-Kennzahlen im Profil) */
.kpi-rings{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; margin-top:10px; }
.kpi-ring-tile{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:14px 10px; border:1px solid var(--border); border-radius:14px; background:var(--surface);
  text-align:center;
}
.kpi-ring{
  --pct: 0;
  --ring-color: var(--primary);
  position:relative; width:96px; height:96px; border-radius:50%;
  background: conic-gradient(var(--ring-color) calc(var(--pct) * 1%), rgba(120,130,150,.18) 0);
  display:grid; place-items:center;
  transition: background .6s ease;
}
.kpi-ring::before{
  content:''; position:absolute; inset:8px; border-radius:50%;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border);
}
.kpi-ring .ico-wrap{
  position:relative; z-index:1; width:34px; height:34px; display:grid; place-items:center;
  color: var(--ring-color);
}
.kpi-ring .ico-wrap .icon{ width:30px; height:30px; }
.kpi-ring-tile .val{ font-size:1.3rem; font-weight:700; color: var(--ring-color); line-height:1; }
.kpi-ring-tile .lbl{ font-size:.78rem; font-weight:660; color:var(--text); }
.kpi-ring-tile .sub{ font-size:.66rem; color:var(--muted); }

/* Notifications-Glocke + Panel */
.notif-wrap{ display:inline-block; }
.notif-badge{ position:absolute; top:2px; right:2px; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--danger, #d54663); color:#fff; font-size:.65rem; font-weight:700; display:grid; place-items:center;
  box-shadow:0 0 0 2px var(--surface, #fff); pointer-events:none; }
.notif-panel{ position:absolute; top:calc(100% + 10px); right:0; width:380px; max-width:92vw; max-height:70vh; overflow:auto;
  background:var(--surface, #fff); border:1px solid var(--border); border-radius:14px; box-shadow:0 10px 30px rgba(20,28,50,.18);
  z-index:1000; padding:0; }
.notif-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--border);
  position:sticky; top:0; background:var(--surface); z-index:1; }
.notif-section{ padding:6px 0; border-bottom:1px solid var(--border); }
.notif-section:last-child{ border-bottom:none; }
.notif-section-head{ font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--muted);
  padding:6px 14px 4px; display:flex; align-items:center; }
.notif-item{ display:flex; align-items:flex-start; gap:10px; padding:8px 14px; text-decoration:none; color:var(--text);
  transition: background .15s; }
.notif-item:hover{ background:var(--primary-weak); }
.notif-item.is-static{ cursor:default; }
.notif-item.is-static:hover{ background:transparent; }
.notif-item.is-static.is-new:hover{ background:linear-gradient(90deg, rgba(90,119,187,.10), transparent); }
.notif-item.is-new{ background: linear-gradient(90deg, rgba(90,119,187,.10), transparent); }
.notif-item.is-new::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--primary); margin-top:8px; margin-left:-8px; }
.notif-ico{ width:32px; height:32px; display:grid; place-items:center; border-radius:8px;
  background:var(--primary-weak); color:var(--primary); flex-shrink:0; }
.notif-body{ flex:1; min-width:0; }
.notif-title{ font-weight:660; font-size:.84rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.notif-sub{ font-size:.72rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.notif-time{ font-size:.66rem; color:var(--muted); flex-shrink:0; padding-top:4px; }

/* System-Post (Auto-Posts für Level/Titel/Kompetenz) */
.post.post-system{
  background: linear-gradient(135deg, var(--primary-weak), transparent 65%);
  border:1px solid rgba(90,119,187,.35);
  position:relative;
}
.post.post-system .p-body{ font-weight:620; }
.post.post-system .post-event-icon{
  width:42px; height:42px; display:grid; place-items:center; border-radius:50%;
  background: linear-gradient(160deg, #5a77bb, #32305b); color:#fff;
  box-shadow: 0 0 14px rgba(90,119,187,.5);
}

/* Achievement Unlocked — fancy Trophäen-Karte */
.post.post-achievement{ background:transparent; border:none; box-shadow:none; padding:0; }
.ach-card{
  position:relative; overflow:hidden; border-radius:20px;
  /* Leichter, moduskonformer Verlauf (Surface-Variablen) mit dezentem Typ-Akzent oben.
     Passt sich automatisch an Hell-/Dunkelmodus an (data-theme). */
  --acc:#e0a327; --acc2:#8a5a12; --glow:rgba(224,163,39,.22);
  background:
    radial-gradient(120% 80% at 50% 0%, var(--glow) 0%, transparent 58%),
    linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
}
/* Pro Community-Event-Typ eigene Akzentfarbe/Stimmung (Hintergrund bleibt moduskonform) */
.ach-card.t-badge{       --acc:#e0a327; --acc2:#8a5a12; --glow:rgba(224,163,39,.22); }   /* Auszeichnung — Gold */
.ach-card.t-title{       --acc:#9085e9; --acc2:#4a3aa7; --glow:rgba(144,133,233,.22); }  /* Titel — Violett */
.ach-card.t-level{       --acc:#2fb98a; --acc2:#0f6e56; --glow:rgba(47,185,138,.22); }   /* Level — Teal */
.ach-card.t-competence{  --acc:#4f8fe0; --acc2:#185fa5; --glow:rgba(79,143,224,.20); }  /* Kompetenz — Blau */
.ach-card.t-achievement{ --acc:#e07a4a; --acc2:#993c1d; --glow:rgba(224,122,74,.20); }  /* Errungenschaft — Koralle */
.ach-card .ach-stripe-top{
  position:absolute; inset:0 0 auto 0; height:6px;
  background: linear-gradient(90deg, var(--acc) 0%, var(--acc2) 50%, var(--acc) 100%);
}
.ach-body{ padding:32px 24px 22px; text-align:center; position:relative; }
.ach-banner{
  display:inline-block; padding:6px 18px; margin-bottom:18px;
  background: linear-gradient(90deg, var(--acc), var(--acc2));
  color:#1c2028; font-family:"Rubik", system-ui, sans-serif; font-weight:700;
  font-size:.85rem; letter-spacing:.2em; text-transform:uppercase;
  border-radius:6px; box-shadow: 0 4px 12px var(--glow);
  transform: rotate(-2deg);
}
.ach-badge-wrap{
  position:relative; width:130px; height:130px; margin:0 auto 16px;
  display:grid; place-items:center;
}
.ach-badge-glow{
  position:absolute; inset:-12px; border-radius:50%;
  background: radial-gradient(circle, var(--glow) 0%, transparent 70%);
  animation: achGlowPulse 1.8s ease-in-out infinite;
}
.ach-badge{
  position:relative; width:110px; height:110px; border-radius:50%;
  background: linear-gradient(160deg, var(--acc) 0%, var(--acc2) 100%);
  display:grid; place-items:center; color:#fff;
  box-shadow: inset 0 -4px 12px rgba(0,0,0,.25), inset 0 4px 12px rgba(255,255,255,.35),
              0 6px 20px var(--glow);
  border: 4px solid rgba(255,255,255,.55);
}
/* Verliehenes Badge (t-badge) steht ohne goldene Scheibe/Rahmen frei — nur die badgeSvg-Grafik */
.ach-card.t-badge .ach-badge{
  background:none; border:none; box-shadow:none; color:inherit;
}
.ach-badge .icon{ width:56px; height:56px; }
.ach-name{
  font-family:"Rubik", system-ui, sans-serif; font-weight:700;
  font-size:1.6rem; letter-spacing:-.01em; margin:4px 0 6px;
  text-shadow:none;
}
.ach-desc{ font-size:.9rem; opacity:.85; margin-bottom:14px; }
.ach-congrats{
  font-family:"Rubik", system-ui, sans-serif;
  font-size:1.1rem; line-height:1.4; margin:12px 0 10px;
  color:var(--muted);
}
.ach-congrats b{
  display:block; margin-top:4px;
  font-size:1.7rem; font-weight:700; color:var(--text);
  text-shadow:none;
}
.ach-meta{
  display:flex; justify-content:center; align-items:center; gap:8px;
  padding-top:14px; border-top:1px solid var(--border);
}
@keyframes achGlowPulse {
  0%,100% { opacity:.55; transform:scale(.95); }
  50%     { opacity:1;   transform:scale(1.08); }
}


/* Tooltip auf Badge-Tile (Achievements / Titel) */
.badge-tooltip{ position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
  width:260px; max-width:88vw; background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:10px 12px; box-shadow:var(--shadow-lg); text-align:left; font-size:.78rem; color:var(--text);
  display:none; z-index:25; }
.badge-tile:hover .badge-tooltip, .badge-tile:focus-within .badge-tooltip{ display:block; }
.badge-tooltip::before{ content:''; position:absolute; top:-5px; left:50%; transform:translateX(-50%) rotate(45deg);
  width:10px; height:10px; background:var(--surface); border-top:1px solid var(--border); border-left:1px solid var(--border); }
/* Gesperrte Kacheln bleiben dezent; der zugehörige Hinweis selbst ist immer
   deckend und lesbar, auch wenn er mehr Text enthält. */
.badge-tile.locked .badge-svg-wrap{ opacity:.6; filter:grayscale(.35); }
.badge-tile.locked .nm,.badge-tile.locked .source{ opacity:.68; }
.badge-tile.locked .badge-tooltip{ opacity:1; filter:none; background:var(--surface); color:var(--text); }
/* Die erste Kachel beginnt direkt neben der festen Seitennavigation. Ihr
   Tooltip öffnet daher nach rechts, damit er nicht unter der Navigation liegt. */
.badge-grid .badge-tile:first-child .badge-tooltip{ left:0; transform:none; }
.badge-grid .badge-tile:first-child .badge-tooltip::before{ left:36px; }

/* sanftes Einblenden */
@keyframes fade-up{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } }
.page > *{ animation:fade-up .35s ease both; }

/* ============== Mobile / Tablet ============== */
.hamburger{ display:none; }
.nav-overlay{ display:none; }

@media (max-width:900px){
  /* Sidebar wird zur ausklappbaren Schublade */
  .sidebar{ position:fixed; left:0; top:0; z-index:60; width:262px;
    transform:translateX(-100%); transition:transform .25s ease; box-shadow:var(--shadow-lg); }
  body.nav-open .sidebar{ transform:none; }
  .nav-overlay{ position:fixed; inset:0; background:rgba(10,14,24,.45); z-index:55; }
  body.nav-open .nav-overlay{ display:block; }

  .hamburger{ display:grid; }
  .page{ padding:18px 16px 70px; }
  .topbar{ padding:0 14px; gap:10px; }

  .layout-2col, .layout-2col.left{ grid-template-columns:1fr !important; }
  .sticky-side{ position:static !important; }
  /* Nachschlagewerk-Menü oben statt links */
  .layout-2col.left > .card.sticky-side{ order:-1; }
}

@media (max-width:760px){
  .topbar{ height:auto; min-height:var(--topbar-h); padding-top:10px; padding-bottom:10px; flex-wrap:wrap; align-content:center; }
  .topbar .page-title{ flex:1 1 calc(100% - 54px); }
  .topbar .spacer{ display:none; }
  .topbar .demo-switch{ order:3; flex:1 1 100%; }
  .topbar .demo-switch select{ flex:1; min-width:0; }
  .dept-tabs{ order:2; flex:1 1 100%; margin-left:0; }
  .user-chip{ max-width:180px; }
}

@media (max-width:560px){
  .topbar .demo-label, .topbar .demo-switch .ico-demo{ display:none; }
  .user-chip .small{ display:none; }
  .topbar select{ max-width:148px; }
  .topbar .page-title{ font-size:1rem; }
  h1{ font-size:1.42rem; } h2{ font-size:1.18rem; }
  .avatar.xl{ width:84px; height:84px; font-size:1.7rem; }
  .ring{ --size:118px; }
  .btn, .pill{ }   /* Touch-Groessen bleiben >=38px */
}

/* ============== Baustellen-Platzhalter ============== */
.construction-placeholder{
  --construction-color:#d88918;
  min-height:360px;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  text-align:center;
  padding:48px 28px;
}
.construction-placeholder::after{
  content:"";
  position:absolute;
  inset:auto -45px -55px auto;
  width:260px;
  height:150px;
  opacity:.08;
  transform:rotate(-12deg);
  background:repeating-linear-gradient(135deg,var(--construction-color) 0 18px,transparent 18px 36px);
}
.construction-inner{position:relative;z-index:1;max-width:620px}
.construction-icon{
  width:82px;
  height:82px;
  display:grid;
  place-items:center;
  margin:0 auto 20px;
  border-radius:24px;
  color:#fff;
  background:var(--construction-color);
  box-shadow:0 14px 34px color-mix(in srgb,var(--construction-color) 28%,transparent);
}
.construction-icon .icon{width:42px;height:42px}
.construction-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 10px;
  border-radius:999px;
  background:color-mix(in srgb,var(--construction-color) 14%,var(--surface));
  color:var(--construction-color);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.05em;
}
.construction-placeholder h1{margin:13px 0 9px;font-size:1.85rem}
.construction-placeholder p{margin:0 auto;line-height:1.65}
.construction-note{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:22px;
  padding:10px 13px;
  border:1px solid color-mix(in srgb,var(--construction-color) 28%,var(--border));
  border-radius:11px;
  background:color-mix(in srgb,var(--construction-color) 7%,var(--surface));
  color:var(--muted);
  font-size:.8rem;
}
@media(max-width:620px){
  .construction-placeholder{min-height:320px;padding:38px 20px}
  .construction-placeholder h1{font-size:1.55rem}
}

/* ============== Rich-Text-Editor ============== */
.rte{ border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface); display:flex; flex-direction:column; }
.rte-toolbar{ display:flex; flex-wrap:wrap; gap:5px; padding:10px 12px; border-bottom:1px solid var(--border); background:var(--surface-2); align-items:center; position:sticky; top:0; z-index:2; }
.rte-area.rte-drop{ box-shadow:inset 0 0 0 2px var(--primary); background:var(--primary-weak); }
.rte-toolbar button{ font:inherit; font-size:.9rem; font-weight:600; cursor:pointer; border:1px solid var(--border);
  background:var(--surface); color:var(--text); border-radius:8px; padding:7px 12px; display:inline-flex; align-items:center; gap:6px; min-height:34px; }
.rte-toolbar button:hover{ background:var(--primary-weak); color:var(--primary); }
.rte-toolbar .sep{ width:1px; align-self:stretch; background:var(--border); margin:0 6px; }
.rte-area{ min-height:380px; max-height:75vh; overflow:auto; padding:18px 22px; line-height:1.65; outline:none; font-size:1rem; resize:vertical; }
.rte-area:focus{ box-shadow:inset 0 0 0 2px var(--primary-weak); }
.rte-area img, .rte-area video{ max-width:100%; border-radius:8px; margin:8px 0; }
.rte-area h2{ font-size:1.4rem; margin:14px 0 8px; } .rte-area h3{ font-size:1.15rem; margin:12px 0 6px; }
.rte-area p{ margin:6px 0; }
.rte-att{ display:flex; flex-wrap:wrap; gap:8px; padding:8px; border-top:1px dashed var(--border); }
.rte-att:empty{ display:none; }
.att-chip{ display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border:1px solid var(--border);
  border-radius:100px; font-size:.8rem; background:var(--surface-2); }
.att-chip button{ border:none; background:transparent; color:var(--danger); cursor:pointer; font-weight:700; }

/* gerenderte Artikel-/Lektionsinhalte */
.article-body{ line-height:1.65; }
.article-body img, .article-body video{ max-width:100%; border-radius:10px; margin:8px 0; }
.article-body h2{ font-size:1.3rem; margin-top:1em; } .article-body h3{ font-size:1.1rem; margin-top:.8em; }
.article-body ul, .article-body ol{ padding-left:1.4em; }
.attachments{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.att-view{ border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface); }
.att-view .att-head{ display:flex; align-items:center; gap:8px; padding:10px 14px; font-weight:600; }
.att-view video, .att-view img{ width:100%; display:block; }

/* Kompakte Quellen-Anzeige (Arbeitsanweisung → Original-PDF nur als Link) */
.attachments-compact{ display:inline-flex; align-items:center; gap:8px; margin-top:10px; padding:6px 10px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:8px; font-size:.85rem; }
.att-link{ color:var(--primary); text-decoration:none; font-weight:600; }
.att-link:hover{ text-decoration:underline; }

/* DIN-ISO-Arbeitsanweisung — formaler Kopfblock + nummerierte Sektionen */
.aa-doc{ font-size:.95rem; line-height:1.55; }
.aa-doc .aa-header{ width:100%; border-collapse:collapse; margin-bottom:18px;
  border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.aa-doc .aa-header th, .aa-doc .aa-header td{ padding:7px 10px; border-bottom:1px solid var(--border);
  border-right:1px solid var(--border); text-align:left; vertical-align:top; font-size:.82rem; }
.aa-doc .aa-header tr:last-child th, .aa-doc .aa-header tr:last-child td{ border-bottom:none; }
.aa-doc .aa-header th{ background:var(--surface-2); color:var(--muted); font-weight:600;
  text-transform:uppercase; letter-spacing:.04em; font-size:.7rem; width:120px; }
.aa-doc .aa-header td:last-child, .aa-doc .aa-header th:last-child{ border-right:none; }
.aa-doc .aa-title-row td{ font-size:1.05rem; font-weight:700; color:var(--text); background:var(--primary-weak); }
.aa-doc h3{ font-size:1rem; margin-top:1.4em; padding-bottom:4px; border-bottom:2px solid var(--primary);
  display:inline-block; padding-right:14px; }
.aa-doc .aa-history{ width:100%; border-collapse:collapse; margin-top:8px; font-size:.85rem; }
.aa-doc .aa-history th, .aa-doc .aa-history td{ padding:6px 8px; border:1px solid var(--border); text-align:left; }
.aa-doc .aa-history th{ background:var(--surface-2); font-weight:600; }
.att-view iframe{ width:100%; height:520px; border:0; display:block; }

/* ============== Modal ============== */
.modal-overlay{ position:fixed; inset:0; background:rgba(10,14,24,.5); z-index:80; display:grid; place-items:center; padding:18px; }
.modal{ background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-lg);
  width:100%; max-width:820px; max-height:88vh; overflow:auto; }
.modal .modal-head{ position:sticky; top:0; background:var(--surface); display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:18px 22px; border-bottom:1px solid var(--border); }
.modal .modal-body{ padding:20px 22px; }
.modal .modal-foot{ position:sticky; bottom:0; background:var(--surface); border-top:1px solid var(--border); padding:14px 22px; display:flex; justify-content:flex-end; gap:10px; }
.modal-close{ border:none; background:var(--surface-2); width:36px; height:36px; border-radius:9px; cursor:pointer; color:var(--text); font-size:1.1rem; }
.modal-close:hover{ background:var(--border); }


/* Globales Bug-Ticket */
.bug-report-btn{color:var(--warning)}
.bug-report-btn:hover{color:var(--text);border-color:color-mix(in srgb,var(--warning) 65%,var(--border));background:color-mix(in srgb,var(--warning) 10%,var(--surface-2))}
.bug-report-dialog{width:min(680px,calc(100vw - 32px))}
.bug-report-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.bug-report-head h2{display:flex;align-items:center;gap:10px;margin:0 0 7px}
.bug-report-head p{margin:0;color:var(--muted)}
.bug-report-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bug-report-dialog .compass-prompt-label{display:grid;gap:7px;margin-top:14px}
.bug-report-dialog input,.bug-report-dialog select,.bug-report-dialog textarea{width:100%;box-sizing:border-box}
.bug-report-dialog textarea{resize:vertical;min-height:130px}
.bug-report-context{display:flex;align-items:center;gap:8px;margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--surface-2);color:var(--muted);font-size:.82rem}
@media(max-width:620px){.bug-report-grid{grid-template-columns:1fr}}