/* =========================================================
   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,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; }
body, .card, .sidebar, .topbar, .post, input, select, textarea { transition: background-color .25s, color .25s, border-color .25s; }

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%;}

/* 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; }
.sidebar nav .nav-group{
  display:flex; align-items:center; gap:8px;
  margin-top:14px; padding:6px 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 a{ display:flex; align-items:center; gap:12px; padding:10px 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; box-shadow:inset 3px 0 0 var(--c-luft-1); }
.sidebar .spacer{ flex:1; }
.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; }
.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; }
.topbar .page-title{ font-size:1.12rem; font-weight:680; }
.topbar .spacer{ flex:1; }
.topbar .demo-switch{ display:flex; align-items:center; gap:7px; font-size:.8rem; color:var(--muted); }
.topbar select{ font:inherit; font-size:.85rem; padding:7px 10px; border:1px solid var(--border);
  border-radius:9px; background:var(--surface); color:var(--text); }
.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; }

.page{ padding:26px 28px 64px; max-width:1200px; width:100%; }
.page.stack > * + *{ margin-top:18px; }

/* ============== 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; }
.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; }
.grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.grid.cols-4{ grid-template-columns:repeat(4,1fr); }

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

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

.row{ display:flex; gap:14px; align-items:center; } .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; }
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; }
.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.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; }

/* 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); }

/* 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:9px; background:var(--surface); }
label.field input:focus, label.field textarea:focus, label.field select:focus{ outline:2px solid var(--primary-weak); border-color:var(--primary); }
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); }

/* ============== 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; }

/* 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); }

/* 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:200; 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-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;
  background: linear-gradient(160deg, #5a77bb 0%, #32305b 100%); /* LGBA CD: Wasser-Primaerverlauf */
  color:#fff;
  border: 2px solid rgba(255,201,71,.5);
  box-shadow: 0 0 32px rgba(90,119,187,.25), 0 12px 32px rgba(0,0,0,.35);
}
.ach-card .ach-stripe-top{
  position:absolute; inset:0 0 auto 0; height:6px;
  background: linear-gradient(90deg, #ffd66e 0%, #c9a227 50%, #ffd66e 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, #ffd66e, #c9a227);
  color:#32305b; 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 rgba(201,162,39,.45);
  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, rgba(255,213,79,.7) 0%, rgba(255,213,79,0) 70%);
  animation: achGlowPulse 1.8s ease-in-out infinite;
}
.ach-badge{
  position:relative; width:110px; height:110px; border-radius:50%;
  background: linear-gradient(160deg, #ffd66e 0%, #c9a227 100%);
  display:grid; place-items:center; color:#3a2d0a;
  box-shadow: inset 0 -4px 12px rgba(0,0,0,.25), inset 0 4px 12px rgba(255,255,255,.4),
              0 6px 20px rgba(255,201,71,.45);
  border: 4px solid #fff3c4;
}
.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: 0 2px 8px rgba(0,0,0,.4);
}
.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:rgba(255,255,255,.85);
}
.ach-congrats b{
  display:block; margin-top:4px;
  font-size:1.7rem; font-weight:700; color:#ffd66e;
  text-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.ach-meta{
  display:flex; justify-content:center; align-items:center; gap:8px;
  padding-top:14px; border-top:1px solid rgba(255,255,255,.15);
}
@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); }

/* 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: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 */
}

/* ============== 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); }