:root{
  color-scheme: dark;
  --bg:#050814;
  --bg2:#080d1b;
  --surface:#0b1222;
  --surface2:#10192d;
  --surface3:#141f36;
  --glass:rgba(14,22,40,.78);
  --glass2:rgba(19,30,52,.72);
  --line:rgba(148,163,184,.16);
  --line2:rgba(148,163,184,.24);
  --text:#eef4ff;
  --text2:#d8e4f6;
  --muted:#91a4c4;
  --muted2:#657894;
  --blue:#5b8cff;
  --blue2:#7aa7ff;
  --violet:#8b5cf6;
  --violet2:#a78bfa;
  --cyan:#22d3ee;
  --green:#22c55e;
  --yellow:#f59e0b;
  --red:#ef4444;
  --radius-xs:10px;
  --radius-sm:13px;
  --radius:16px;
  --radius-lg:22px;
  --shadow:0 24px 70px rgba(0,0,0,.34);
  --shadow2:0 10px 30px rgba(0,0,0,.22);
  --sidebar:252px;
}
*{box-sizing:border-box}
html{scrollbar-color:#26354f #060a14;scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 12% -5%,rgba(91,140,255,.23),transparent 31rem),
    radial-gradient(circle at 88% 0%,rgba(139,92,246,.18),transparent 33rem),
    radial-gradient(circle at 80% 95%,rgba(34,211,238,.08),transparent 24rem),
    linear-gradient(135deg,#050814 0%,#070b16 55%,#0d1024 100%);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:14px;
  line-height:1.45;
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 72%);
  z-index:-1;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
b,strong{font-weight:850}
.muted{color:var(--muted)}
.small-text{font-size:12px}
.app-shell{min-height:100vh}
.sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:var(--sidebar);
  padding:18px 14px;
  display:flex;
  flex-direction:column;
  gap:14px;
  z-index:50;
  background:linear-gradient(180deg,rgba(5,8,20,.94),rgba(7,12,24,.88));
  border-right:1px solid var(--line);
  box-shadow:18px 0 55px rgba(0,0,0,.28);
  backdrop-filter:blur(22px);
}
.brand-wrap{
  display:flex;
  align-items:center;
  gap:12px;
  padding:2px 6px 10px;
}
.brand-mark{
  width:42px;
  height:42px;
  flex:none;
  border-radius:15px;
  display:grid;
  place-items:center;
  overflow:hidden;
  font-weight:950;
  letter-spacing:.04em;
  background:linear-gradient(135deg,var(--blue),var(--violet));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 14px 30px rgba(91,140,255,.18);
}
.brand-mark img{width:100%;height:100%;object-fit:cover}
.brand{font-size:18px;font-weight:950;letter-spacing:.015em;line-height:1}
.brand-sub{margin-top:4px;font-size:12px;color:var(--muted)}
.nav-user-pill{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  min-height:46px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
}
.nav-user-pill span{
  font-size:12px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#e0ecff;
}
.nav-user-pill small{
  max-width:108px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:var(--muted);
  font-size:11px;
}
.nav-group{display:grid;gap:5px}
.nav-label{
  padding:10px 10px 4px;
  font-size:10px;
  line-height:1;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:#60708a;
}
.nav-group a{
  height:40px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:var(--radius-sm);
  color:#c9d6eb;
  border:1px solid transparent;
  font-weight:780;
  transition:.16s ease;
}
.nav-group a span{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:#9fb4d0;
  background:rgba(148,163,184,.075);
  font-size:12px;
}
.nav-group a b{
  margin-left:auto;
  min-width:21px;
  height:21px;
  padding:0 6px;
  display:grid;
  place-items:center;
  border-radius:999px;
  font-size:10px;
  color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--violet));
  box-shadow:0 8px 18px rgba(91,140,255,.22);
}
.nav-group a:hover{
  color:#fff;
  background:rgba(255,255,255,.05);
  border-color:rgba(148,163,184,.12);
  transform:translateX(2px);
}
.nav-group a.active{
  color:#fff;
  background:linear-gradient(135deg,rgba(91,140,255,.23),rgba(139,92,246,.16));
  border-color:rgba(122,167,255,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.nav-group a.active span{background:rgba(255,255,255,.11);color:#fff}
.sidebar-footer{margin-top:auto;display:grid;gap:10px}
.profile-mini{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:58px;
  padding:10px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022));
}
.profile-avatar{
  width:36px;
  height:36px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:13px;
  overflow:hidden;
  font-weight:900;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  border:1px solid rgba(255,255,255,.14);
}
.profile-avatar.big{width:54px;height:54px;border-radius:18px}
.profile-avatar img{width:100%;height:100%;object-fit:cover}
.profile-name{font-weight:900;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-sub{font-size:12px;color:var(--muted)}
.live span,.live-dot{
  display:inline-block;
  width:8px;height:8px;
  border-radius:999px;
  margin-right:5px;
  background:var(--green);
  box-shadow:0 0 15px rgba(34,197,94,.75);
}
.logout-link{
  height:38px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-sm);
  color:#d7e3f6;
  font-weight:850;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  transition:.15s ease;
}
.logout-link:hover{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.28);color:#fecaca}
.main-content{
  margin-left:var(--sidebar);
  min-height:100vh;
  padding:26px 28px 42px;
}
.main-content > *{
  width:min(100%,1580px);
  margin-left:auto;
  margin-right:auto;
}
.page-top,.topbar,.page-hero{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  min-height:104px;
  padding:20px 22px;
  margin-bottom:18px;
  border-radius:var(--radius-lg);
  background:
    linear-gradient(135deg,rgba(91,140,255,.115),rgba(139,92,246,.09) 42%,rgba(14,22,40,.68)),
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--line);
  box-shadow:var(--shadow2);
  backdrop-filter:blur(18px);
}
.page-top h1,.topbar h1,.page-hero h1{
  margin:0;
  font-size:28px;
  line-height:1.05;
  letter-spacing:-.045em;
}
.page-top p,.topbar p,.page-hero p{margin:7px 0 0;color:var(--muted)}
.top-actions,.quick-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.eyebrow,.hero-badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  gap:7px;
  margin-bottom:9px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(122,167,255,.26);
  background:rgba(91,140,255,.13);
  color:#9ec5ff;
  font-size:10px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.16em;
}
.hero-note,.sync-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:32px;
  white-space:nowrap;
  border-radius:999px;
  padding:0 12px;
  color:#dbeafe;
  background:rgba(255,255,255,.055);
  border:1px solid var(--line);
  font-size:12px;
  font-weight:850;
}
.card{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:
    linear-gradient(180deg,rgba(17,27,48,.82),rgba(10,16,30,.86)),
    rgba(13,21,38,.9);
  box-shadow:var(--shadow2);
  padding:18px;
  backdrop-filter:blur(16px);
}
.card:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 28%);
  opacity:.8;
}
.card > *{position:relative}
.dense-card{padding:16px}
.soft-card{background:linear-gradient(180deg,rgba(17,27,48,.74),rgba(10,16,30,.82))}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:14px;
}
.section-head h2,.card h2{
  margin:0;
  font-size:16px;
  line-height:1.15;
  letter-spacing:-.025em;
}
.section-head p{margin:5px 0 0;color:var(--muted)}
.section-head a{font-size:12px;font-weight:900;color:#b9d5ff}
.alert{
  margin:0 auto 14px;
  padding:12px 14px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  font-weight:850;
}
.alert-danger{background:rgba(239,68,68,.12);color:#fecaca;border-color:rgba(239,68,68,.32)}
.alert-success{background:rgba(34,197,94,.12);color:#bbf7d0;border-color:rgba(34,197,94,.28)}
button,.button-primary,.button-secondary,.button-danger{
  min-height:40px;
  padding:0 15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:13px;
  border:1px solid transparent;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  transition:.16s ease;
}
.button-primary,button{
  color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--violet));
  box-shadow:0 16px 30px rgba(91,140,255,.22);
}
.button-primary:hover,button:hover{filter:brightness(1.08);transform:translateY(-1px)}
.button-secondary{
  color:#dce8fb;
  background:rgba(255,255,255,.06);
  border-color:var(--line);
}
.button-secondary:hover{background:rgba(255,255,255,.09);border-color:var(--line2)}
.button-danger{
  color:#fecaca!important;
  background:rgba(239,68,68,.115)!important;
  border-color:rgba(239,68,68,.34)!important;
  box-shadow:none!important;
}
.small-btn,.mini-button{min-height:31px;padding:0 10px;border-radius:10px;font-size:12px}
.full-btn{width:100%}
.icon-btn{width:38px;padding:0}
.kpi-grid,.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:18px;
}
.compact-kpis{grid-template-columns:repeat(6,minmax(0,1fr))}
.compact-kpis.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpi-card,.stat-card{
  min-height:104px;
  display:grid;
  align-content:space-between;
  padding:16px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 100% 0%,rgba(91,140,255,.16),transparent 45%),
    linear-gradient(180deg,rgba(20,31,54,.82),rgba(10,16,30,.9));
  box-shadow:var(--shadow2);
  transition:.15s ease;
}
a.kpi-card:hover{transform:translateY(-2px);border-color:rgba(122,167,255,.36)}
.kpi-card span,.stat-card h3{
  margin:0;
  color:var(--muted);
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.11em;
}
.kpi-card strong,.stat-card strong{
  font-size:30px;
  line-height:1;
  letter-spacing:-.06em;
}
.kpi-card small{font-size:12px;color:#8fd9ff}
.dashboard-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:16px;
}
.dashboard-grid > .card{grid-column:span 4}
.dashboard-grid > .span-2,.span-2{grid-column:span 8}
.content-grid{display:grid;gap:16px}
.content-grid.two-one{grid-template-columns:minmax(0,1.55fr) minmax(320px,.72fr);align-items:start}
.grid-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.feature-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}
.feature-grid a{
  min-height:86px;
  display:grid;
  align-content:center;
  gap:5px;
  padding:16px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));
  transition:.15s ease;
}
.feature-grid a:hover{transform:translateY(-2px);border-color:rgba(122,167,255,.35);background:rgba(91,140,255,.08)}
.feature-grid b{font-size:14px}
.feature-grid span{font-size:12px;color:var(--muted)}
.form-grid{display:grid;gap:14px}
.compact-form{gap:12px}
.form-row.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-row.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
label span{
  display:block;
  margin-bottom:6px;
  color:#b7c9e6;
  font-size:12px;
  font-weight:900;
}
input,select,textarea{
  width:100%;
  min-height:42px;
  padding:10px 12px;
  border-radius:13px;
  border:1px solid var(--line);
  outline:none;
  background:rgba(5,10,20,.72);
  color:#f8fbff;
  font:inherit;
  transition:.15s ease;
}
textarea{min-height:92px;resize:vertical}
input::placeholder,textarea::placeholder{color:#5f728e}
input:focus,select:focus,textarea:focus{
  border-color:rgba(122,167,255,.55);
  box-shadow:0 0 0 4px rgba(91,140,255,.12);
  background:rgba(6,12,24,.9);
}
input[type=checkbox],input[type=radio]{
  width:16px;
  height:16px;
  min-height:0;
  padding:0;
  accent-color:var(--blue);
}
.filter-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)) auto;
  gap:12px;
  align-items:end;
  margin-bottom:14px;
}
.filter-actions{display:flex;gap:8px;align-items:center}
.form-card{padding:0;overflow:hidden}
.form-card .form-grid{gap:0}
.form-panel{
  padding:20px;
  border-bottom:1px solid rgba(148,163,184,.13);
}
.form-panel:nth-child(even){background:rgba(255,255,255,.018)}
.form-panel:last-child{border-bottom:0}
.form-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-bottom:16px;
}
.form-panel-head h2{margin:0;font-size:17px;letter-spacing:-.025em}
.form-panel-head p{margin:4px 0 0;color:var(--muted)}
.user-edit-head{display:flex;align-items:center;gap:12px}
.role-select-line{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chip-check-grid,.checkbox-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.check-card,.chip-check{
  min-height:46px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:rgba(255,255,255,.035);
  font-weight:820;
  transition:.14s ease;
}
.check-card:hover,.chip-check:hover{
  border-color:rgba(122,167,255,.35);
  background:rgba(91,140,255,.08);
}
.bottom-action-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:16px 20px;
  background:rgba(255,255,255,.035);
}
.switch-row{display:flex;align-items:center;gap:8px;font-weight:850}
.form-actions{display:flex;justify-content:flex-end;gap:10px}
.table-wrap{overflow:auto;border-radius:var(--radius);border:1px solid rgba(148,163,184,.1)}
table{width:100%;border-collapse:collapse}
th,td,.compact-table th,.compact-table td{
  text-align:left;
  padding:13px 12px;
  border-bottom:1px solid rgba(148,163,184,.1);
  vertical-align:middle;
}
tbody tr:hover{background:rgba(91,140,255,.045)}
th{
  position:sticky;
  top:0;
  z-index:1;
  color:#8fa3c2;
  background:rgba(8,13,27,.96);
  font-size:10px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.11em;
}
td b,.cell-title{font-weight:900}
td small,.cell-sub{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.stack-list,.mini-stack,.task-mini-list,.timeline-list,.notification-list,.log-timeline{display:grid;gap:10px}
.task-row,.task-item,.mini-row,.log-item,.timeline-item,.notification-item{
  border:1px solid rgba(148,163,184,.14);
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.024));
  transition:.14s ease;
}
.task-row,.task-item,.mini-row,.log-item{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:58px;
  padding:11px 12px;
}
.task-row:hover,.task-item:hover,.mini-row:hover,.log-item:hover{
  border-color:rgba(122,167,255,.3);
  background:rgba(91,140,255,.075);
  transform:translateY(-1px);
}
.task-row div,.mini-row div{min-width:0;flex:1}
.task-row b,.mini-row b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task-row small,.mini-row small{display:block;margin-top:3px;color:var(--muted);font-size:12px}
.priority-dot,.status-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  display:inline-block;
  flex:none;
}
.prio-urgent,.prio-high{background:var(--red);box-shadow:0 0 14px rgba(239,68,68,.4)}
.prio-medium{background:var(--yellow);box-shadow:0 0 14px rgba(245,158,11,.35)}
.prio-low{background:var(--green);box-shadow:0 0 14px rgba(34,197,94,.35)}
.status-dot.active,.server-online{background:var(--green);box-shadow:0 0 14px rgba(34,197,94,.45)}
.status-dot.inactive,.server-offline,.server-archived{background:#64748b}
.server-planning{background:var(--blue)}
.server-maintenance{background:var(--yellow)}
.status-pill,.pill,.special-chip,.role-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:28px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.15);
  background:rgba(148,163,184,.11);
  color:#dbeafe;
  font-size:11px;
  line-height:1;
  font-weight:950;
  white-space:nowrap;
}
.status-open,.status-pending{background:rgba(245,158,11,.13);color:#fde68a;border-color:rgba(245,158,11,.24)}
.status-in_progress{background:rgba(91,140,255,.16);color:#cfe1ff;border-color:rgba(91,140,255,.28)}
.status-done,.status-approved{background:rgba(34,197,94,.13);color:#bbf7d0;border-color:rgba(34,197,94,.25)}
.status-rejected{background:rgba(239,68,68,.13);color:#fecaca;border-color:rgba(239,68,68,.25)}
.chip-row{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.special-chip{background:rgba(139,92,246,.13);color:#e9ddff;border-color:rgba(167,139,250,.22)}
.role-owner{background:rgba(139,92,246,.24);color:#f3e8ff;border-color:rgba(167,139,250,.32)}
.role-co_owner,.role-co-owner{background:rgba(124,58,237,.18);color:#ede9fe;border-color:rgba(167,139,250,.28)}
.role-infrastruktur_manager,.role-infrastruktur-manager{background:rgba(34,211,238,.15);color:#b9f6ff;border-color:rgba(34,211,238,.28)}
.role-serverleiter{background:rgba(91,140,255,.18);color:#dbeafe;border-color:rgba(91,140,255,.28)}
.role-administrator{background:rgba(34,197,94,.14);color:#c7ffd8;border-color:rgba(34,197,94,.25)}
.role-moderator{background:rgba(245,158,11,.13);color:#fde68a;border-color:rgba(245,158,11,.22)}
.role-supporter{background:rgba(148,163,184,.12);color:#dbeafe}
.server-grid,.team-grid,.wiki-grid,.module-grid,.user-admin-grid,.admin-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:14px;
}
.user-admin-card,.server-card,.team-card,.wiki-card,.approval-card,.notification-item,.module-card,.admin-user-card{
  min-height:190px;
  display:grid;
  gap:12px;
  align-content:start;
  padding:16px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 100% 0%,rgba(91,140,255,.10),transparent 45%),
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.022));
  transition:.15s ease;
}
.user-admin-card:hover,.server-card:hover,.team-card:hover,.wiki-card:hover,.approval-card:hover,.notification-item:hover,.module-card:hover,.admin-user-card:hover{
  transform:translateY(-2px);
  border-color:rgba(122,167,255,.3);
}
.user-admin-top,.server-top,.approval-top,.module-top{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
}
.server-top{justify-content:space-between}
.user-admin-top > div:nth-child(2),.admin-user-main div{min-width:0}
.user-admin-top h3,.server-top h3,.team-card h3,.wiki-card h3,.notification-item h3,.module-card h3,.admin-user-main h3{
  margin:0;
  font-size:16px;
  line-height:1.2;
  letter-spacing:-.02em;
}
.user-admin-top p,.server-top p,.server-desc,.wiki-card p,.notification-item p,.module-card p,.admin-user-main p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:13px;
}
.user-admin-card .status-dot{margin-left:auto}
.user-card-meta,.team-lines{
  display:grid;
  gap:5px;
  color:#c8d6eb;
  font-size:12px;
}
.user-card-meta{
  padding-top:8px;
  border-top:1px solid rgba(148,163,184,.10);
}
.user-admin-card.is-disabled{opacity:.58}
.server-card form,.wiki-card form{margin-top:auto}
.timeline-item{
  display:grid;
  grid-template-columns:56px 1fr auto;
  align-items:center;
  gap:12px;
  padding:12px;
}
.datebox{
  height:56px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,rgba(91,140,255,.25),rgba(139,92,246,.18));
  border:1px solid rgba(122,167,255,.18);
}
.datebox b{display:block;font-size:20px;line-height:1;text-align:center}
.datebox span{display:block;margin-top:4px;color:#bdd8ff;font-size:10px;text-transform:uppercase;text-align:center}
.timeline-item h3{margin:0;font-size:16px}
.timeline-item p{margin:4px 0;color:var(--muted);font-size:13px}
.log-line{
  display:grid;
  grid-template-columns:110px 1fr 220px;
  gap:12px;
  align-items:center;
  min-height:46px;
  padding:9px 0;
  border-bottom:1px solid rgba(148,163,184,.10);
}
.log-line span{font-size:11px;color:#b9d5ff;font-weight:950;text-transform:uppercase}
.log-line b{font-size:13px}
.log-line small{text-align:right;color:var(--muted);font-size:12px}
.notification-item{
  grid-template-columns:1fr auto;
  min-height:120px;
}
.notification-item.unread{
  border-color:rgba(91,140,255,.42);
  background:linear-gradient(180deg,rgba(91,140,255,.10),rgba(255,255,255,.026));
}
.empty-state{
  margin:0;
  padding:18px;
  border-radius:var(--radius);
  border:1px dashed rgba(148,163,184,.24);
  color:var(--muted);
  text-align:center;
  background:rgba(255,255,255,.02);
}
.read-only-box,.decision-box{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
  background:rgba(255,255,255,.035);
}
.reload-toast{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:100;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:.18s;
  padding:12px 14px;
  border-radius:var(--radius);
  border:1px solid rgba(122,167,255,.38);
  color:#dbeafe;
  background:rgba(12,18,32,.96);
  box-shadow:var(--shadow);
}
.is-reloading .reload-toast,.reload-toast.show{opacity:1;transform:translateY(0)}
.login-wrap{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}
.login-card{
  width:min(100%,420px);
  padding:28px;
  border-radius:28px;
  background:
    radial-gradient(circle at 100% 0%,rgba(91,140,255,.18),transparent 42%),
    linear-gradient(180deg,rgba(17,27,48,.88),rgba(10,16,30,.92));
}
.centered-head{text-align:center}
.money-pos{color:#a7f3d0}
.money-neg{color:#fecaca}
.wiki-head{display:flex;justify-content:space-between;gap:10px;align-items:center}
.admin-user-main{display:flex;gap:12px;align-items:center}
.admin-user-actions{display:flex;gap:8px;align-items:center;justify-content:space-between}
.activity-dot{width:9px;height:9px;border-radius:999px;background:#64748b}
.activity-dot.active{background:var(--green);box-shadow:0 0 14px rgba(34,197,94,.5)}

@media(max-width:1300px){
  .compact-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dashboard-grid > .card,.dashboard-grid > .span-2{grid-column:span 6}
  .feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .content-grid.two-one{grid-template-columns:1fr}
  .chip-check-grid,.checkbox-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:920px){
  :root{--sidebar:0px}
  .sidebar{position:static;width:100%;height:auto;border-right:0;border-bottom:1px solid var(--line)}
  .main-content{margin-left:0;padding:18px}
  .nav-group{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav-label{grid-column:1/-1}
  .sidebar-footer{display:none}
  .page-top,.topbar,.page-hero{display:grid;min-height:auto;padding:18px}
  .dashboard-grid{grid-template-columns:1fr}
  .dashboard-grid > .card,.dashboard-grid > .span-2,.span-2{grid-column:auto}
  .grid-two,.form-row.two-col,.form-row.three-col,.role-select-line,.filter-grid{grid-template-columns:1fr}
  .compact-kpis,.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature-grid{grid-template-columns:1fr 1fr}
  .chip-check-grid,.checkbox-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bottom-action-bar{display:grid}
  .form-actions{justify-content:stretch;display:grid;grid-template-columns:1fr 1fr}
  .log-line{grid-template-columns:90px 1fr}
  .log-line small{grid-column:2;text-align:left}
}
@media(max-width:620px){
  body{font-size:13px}
  .main-content{padding:12px}
  .page-top h1,.topbar h1,.page-hero h1{font-size:24px}
  .card{padding:14px}
  .form-card{padding:0}
  .form-panel{padding:16px}
  .compact-kpis,.stats-grid,.feature-grid,.server-grid,.team-grid,.wiki-grid,.module-grid,.user-admin-grid,.admin-list{grid-template-columns:1fr}
  .chip-check-grid,.checkbox-grid{grid-template-columns:1fr}
  .timeline-item{grid-template-columns:50px 1fr}
  .notification-item{grid-template-columns:1fr}
}


/* Phase 6: Kalender-Abo, Aufgaben UX, Login polish */
.main-content > section{margin-bottom:18px}
.task-filter-card{margin-bottom:18px;overflow:visible;z-index:2}
.task-board{display:grid;gap:12px;margin-top:18px}
.task-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) 190px;
  gap:16px;
  align-items:center;
  padding:16px;
  border-radius:18px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(17,27,48,.84),rgba(10,16,30,.88));
  box-shadow:var(--shadow2);
}
.task-card:hover{border-color:rgba(122,167,255,.34);transform:translateY(-1px)}
.task-card-titleline{display:flex;gap:12px;align-items:flex-start;min-width:0}
.task-card-titleline h2{margin:0;font-size:17px;line-height:1.2;letter-spacing:-.02em}
.task-card-titleline p{margin:5px 0 0;color:var(--muted);font-size:13px;max-width:78ch}
.task-chip-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.task-card-side{display:grid;gap:8px;justify-items:end;text-align:right}
.task-date-label{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-weight:950}
.task-card-side strong{font-size:13px;color:#eaf2ff}
.task-filter-grid{grid-template-columns:1fr 1fr 1fr 1fr auto;align-items:end;margin-bottom:0}
.task-edit-layout{align-items:start}
.task-edit-card{overflow:hidden}
.padded-danger{padding:16px 20px;border-top:1px solid rgba(148,163,184,.12);margin:0}
.comment-form{display:grid;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(148,163,184,.12)}
.comment-item{padding:12px;border-radius:15px;border:1px solid rgba(148,163,184,.13);background:rgba(255,255,255,.035)}
.comment-item p{margin:6px 0;color:#dce8fb;white-space:normal;line-height:1.45}
.comment-item small{color:var(--muted)}
.calendar-feed-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.85fr);gap:18px;align-items:center}
.calendar-feed-card h2{margin:0 0 6px;font-size:18px}
.calendar-link-box{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center}
.calendar-link-box input{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px}
.login-page{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:28px;align-items:center;width:min(1180px,calc(100% - 40px));margin:0 auto;padding:40px 0}
.login-art{min-height:520px;border-radius:32px;padding:42px;display:grid;align-content:end;overflow:hidden;position:relative;border:1px solid var(--line);background:radial-gradient(circle at 25% 20%,rgba(91,140,255,.38),transparent 25rem),radial-gradient(circle at 80% 10%,rgba(139,92,246,.28),transparent 26rem),linear-gradient(135deg,rgba(17,27,48,.86),rgba(8,13,27,.94));box-shadow:var(--shadow)}
.login-art:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.65),transparent)}
.login-art > *{position:relative}.login-brand-orb{width:76px;height:76px;border-radius:24px;display:grid;place-items:center;font-weight:950;letter-spacing:.08em;background:linear-gradient(135deg,var(--blue),var(--violet));box-shadow:0 25px 60px rgba(91,140,255,.28);margin-bottom:22px}.login-art h1{margin:0;font-size:52px;line-height:.95;letter-spacing:-.07em}.login-art p{max-width:560px;color:var(--muted);font-size:16px}.login-feature-list{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}.login-feature-list span{padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid var(--line);font-weight:850;font-size:12px;color:#dbeafe}.pro-login-card{padding:28px;border-radius:28px}.pro-login-card h2{margin:0;font-size:30px;letter-spacing:-.04em}.login-form{margin-top:18px}
@media(max-width:1100px){.task-filter-grid{grid-template-columns:1fr 1fr}.calendar-feed-card{grid-template-columns:1fr}.login-page{grid-template-columns:1fr}.login-art{min-height:360px}.login-card{max-width:none;width:100%}}
@media(max-width:720px){.task-card{grid-template-columns:1fr}.task-card-side{justify-items:start;text-align:left}.calendar-link-box{grid-template-columns:1fr}.login-art h1{font-size:38px}.login-page{width:calc(100% - 24px);padding:20px 0}}


/* Phase 7: Kalender-Abo + Aufgaben-Rückmeldung verbessert */
.task-filter-card{margin-bottom:22px!important;position:relative;z-index:1;overflow:hidden}
.task-board{margin-top:0!important;clear:both;position:relative;z-index:0}
.task-card{overflow:hidden;min-height:112px;align-items:start}
.task-card-main,.task-card-titleline > div{min-width:0}
.task-card-titleline p{overflow-wrap:anywhere}
.task-card-side{align-self:stretch;align-content:center;border-left:1px solid rgba(148,163,184,.12);padding-left:16px}
.feedback-panel textarea{min-height:120px}
.feedback-preview{
  margin-bottom:14px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(122,167,255,.24);
  background:linear-gradient(180deg,rgba(91,140,255,.10),rgba(255,255,255,.028));
}
.feedback-preview strong{display:block;margin-bottom:6px}
.feedback-preview p{margin:0 0 8px;color:#e8f1ff;line-height:1.5;white-space:normal}
.feedback-preview small{color:var(--muted)}
.task-info-list{display:grid;gap:10px}
.task-info-list div{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  padding:11px 0;
  border-bottom:1px solid rgba(148,163,184,.10);
}
.task-info-list div:last-child{border-bottom:0}
.task-info-list span{color:var(--muted);font-size:12px;font-weight:850}
.task-info-list b{text-align:right;font-size:13px}
.login-page-v2{grid-template-columns:minmax(0,1.1fr) 430px;gap:30px}
.login-art-v2{align-content:space-between;min-height:610px;padding:38px;background:
  radial-gradient(circle at 18% 14%,rgba(91,140,255,.42),transparent 20rem),
  radial-gradient(circle at 82% 10%,rgba(139,92,246,.32),transparent 22rem),
  radial-gradient(circle at 55% 92%,rgba(34,211,238,.12),transparent 22rem),
  linear-gradient(135deg,rgba(20,31,54,.92),rgba(7,11,23,.96));
}
.login-glow-card{position:relative;display:grid;gap:18px;align-content:end;min-height:320px;padding:28px;border-radius:28px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025));box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.login-glow-card h1{font-size:56px;line-height:.92;margin:0;letter-spacing:-.07em}
.login-glow-card p{max-width:620px;margin:10px 0 0;color:#bfd0ea;font-size:16px}
.login-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.login-feature-grid span{min-height:56px;display:flex;align-items:center;padding:12px;border-radius:16px;border:1px solid rgba(148,163,184,.16);background:rgba(255,255,255,.055);font-weight:900;color:#e7f0ff}
.login-form-card{align-self:center;border-radius:30px;padding:30px}
.login-security-note{margin:16px 0 0;color:var(--muted);font-size:12px;text-align:center}
@media(max-width:1100px){.login-page-v2{grid-template-columns:1fr}.login-art-v2{min-height:420px}.login-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.task-card-side{border-left:0;border-top:1px solid rgba(148,163,184,.12);padding-left:0;padding-top:12px}.login-glow-card h1{font-size:40px}.login-feature-grid{grid-template-columns:1fr}.login-art-v2{padding:22px}}


/* Phase 8 Aufgaben-Workflow */
.task-flow-strip{
  display:flex;
  align-items:center;
  gap:10px;
  padding:16px 18px;
  border-bottom:1px solid rgba(148,163,184,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
}
.flow-step{
  min-width:112px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid rgba(148,163,184,.16);
  border-radius:999px;
  color:var(--muted);
  background:rgba(255,255,255,.035);
  font-size:12px;
  font-weight:950;
}
.flow-step b{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(148,163,184,.12);
  color:#dbeafe;
}
.flow-step.active{
  color:#fff;
  border-color:rgba(91,140,255,.45);
  background:linear-gradient(135deg,rgba(91,140,255,.22),rgba(139,92,246,.14));
}
.flow-step.done b{
  background:rgba(34,197,94,.18);
  color:#bbf7d0;
}
.flow-line{
  flex:1;
  height:1px;
  min-width:28px;
  background:linear-gradient(90deg,rgba(122,167,255,.35),rgba(148,163,184,.1));
}
.workflow-action-panel{
  background:rgba(91,140,255,.035);
}
.inline-action-form,.mini-inline-form{margin:0}
.mini-inline-form button{min-height:31px;padding:0 10px;border-radius:10px;font-size:12px}
.task-side-column{align-self:start}
.task-history-card{overflow:hidden}
.task-timeline{
  position:relative;
  display:grid;
  gap:12px;
}
.task-timeline:before{
  content:"";
  position:absolute;
  left:17px;
  top:18px;
  bottom:18px;
  width:2px;
  border-radius:2px;
  background:linear-gradient(180deg,rgba(91,140,255,.45),rgba(139,92,246,.18),rgba(148,163,184,.05));
}
.task-timeline-entry{
  position:relative;
  display:grid;
  grid-template-columns:36px 1fr;
  gap:12px;
}
.timeline-icon{
  position:relative;
  z-index:1;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:14px;
  border:1px solid rgba(122,167,255,.28);
  background:linear-gradient(135deg,rgba(91,140,255,.28),rgba(139,92,246,.18));
  color:#fff;
  font-weight:950;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}
.timeline-title{
  font-weight:950;
  color:#f3f7ff;
}
.timeline-text{
  margin-top:3px;
  color:#c8d6eb;
  font-size:13px;
}
.timeline-meta{
  margin-top:5px;
  color:var(--muted);
  font-size:12px;
}
.status-done{background:rgba(34,197,94,.13)!important;color:#bbf7d0!important;border-color:rgba(34,197,94,.25)!important}
.status-in_progress{background:rgba(91,140,255,.16)!important;color:#cfe1ff!important;border-color:rgba(91,140,255,.28)!important}
.status-open{background:rgba(245,158,11,.13)!important;color:#fde68a!important;border-color:rgba(245,158,11,.24)!important}
.task-card-done{opacity:.82}
.feedback-preview{
  margin-bottom:14px;
  padding:14px;
  border:1px solid rgba(148,163,184,.16);
  border-radius:16px;
  background:rgba(255,255,255,.035);
}
.feedback-preview p{
  margin:8px 0;
  color:#d8e4f6;
}
.feedback-preview small{color:var(--muted)}
@media(max-width:720px){
  .task-flow-strip{display:grid;grid-template-columns:1fr;gap:8px}
  .flow-line{display:none}
  .flow-step{width:100%;justify-content:flex-start;padding:0 12px}
}


/* Phase 9: Live-Filter und globale Soft-Synchronisierung */
.reload-toast{
  min-width:280px;
  text-align:left;
}
.reload-toast.show{opacity:1;transform:translateY(0);pointer-events:auto}
.task-filter-card{
  overflow:visible!important;
  position:relative!important;
  z-index:8!important;
  margin-bottom:18px!important;
}
.task-filter-card:after{
  content:"Filter werden live angewendet";
  position:absolute;
  right:18px;
  bottom:10px;
  color:var(--muted);
  font-size:11px;
  font-weight:850;
}
.task-filter-grid{
  grid-template-columns:minmax(180px,.85fr) minmax(180px,1fr) minmax(180px,1fr) minmax(170px,.85fr) auto!important;
  align-items:end!important;
  gap:12px!important;
  margin-bottom:12px!important;
}
.filter-actions-reset-only{
  align-self:end;
}
.filter-actions-reset-only .button-secondary{
  min-height:42px;
  white-space:nowrap;
}
.task-board{
  margin-top:0!important;
  gap:14px!important;
}
.task-card{
  position:relative;
  z-index:1;
}
.task-card-main{
  min-width:0;
}
.task-card-titleline p{
  max-width:92ch;
}
select option{
  background:#111827;
  color:#f8fbff;
}
@media(max-width:1220px){
  .task-filter-grid{grid-template-columns:1fr 1fr!important}
  .filter-actions-reset-only{grid-column:1/-1;justify-self:start}
  .task-filter-card:after{display:none}
}
@media(max-width:720px){
  .task-filter-grid{grid-template-columns:1fr!important}
}


/* Phase 10: Task-UX + Sidebar-Rechte */
.task-chip-row .status-pill,
.task-chip-row .pill,
.task-chip-row .special-chip{
  min-height:30px;
  padding:7px 12px;
  font-size:12px;
  border-radius:999px;
  line-height:1.05;
}

.task-card-side .small-btn{
  min-width:124px;
}

.task-flow-strip{
  gap:12px;
  padding:18px 20px;
}

.flow-step{
  min-width:140px;
  height:44px;
  padding:0 15px;
  font-size:13px;
}

.flow-step b{
  width:25px;
  height:25px;
}

.workflow-action-panel .form-panel-head h2{
  font-size:18px;
}

.nav-group:empty{
  display:none;
}

@media(max-width:720px){
  .task-chip-row .status-pill,
  .task-chip-row .pill,
  .task-chip-row .special-chip{
    white-space:normal;
    justify-content:flex-start;
  }

  .task-card-side .small-btn{
    width:100%;
    min-width:0;
  }

  .flow-step{
    min-width:0;
  }
}


/* Phase 11: Smart Live Filter */
.task-filter-card{
  overflow:visible;
}

.task-filter-grid input,
.task-filter-grid select{
  scroll-margin-top:120px;
}

.filter-actions-reset-only{
  align-self:end;
}

@media(max-width:920px){
  .task-filter-card{
    overflow:hidden;
  }
}



/* =========================================================
   Phase 12 – Modern Community UI
   Dark/Light Toggle, Glassmorphism, Mobile Menü, Reveal,
   Pointer Glow und kompakteres MDI Layout
========================================================= */

:root{
  color-scheme:dark;
  --bg:#070712;
  --bg2:#08060d;
  --bg3:#0d0a18;
  --surface:rgba(255,255,255,.055);
  --surface2:rgba(255,255,255,.075);
  --surface3:rgba(255,255,255,.105);
  --line:rgba(255,255,255,.115);
  --line2:rgba(255,255,255,.18);
  --text:#ffffff;
  --text2:rgba(255,255,255,.82);
  --muted:rgba(255,255,255,.62);
  --muted2:rgba(255,255,255,.43);
  --blue:#ff23b8;
  --blue2:#ff6dd5;
  --violet:#d100a8;
  --violet2:#ff23b8;
  --cyan:#bbf451;
  --green:#bbf451;
  --yellow:#ffb000;
  --red:#ff4d6d;
  --radius-xs:10px;
  --radius-sm:14px;
  --radius:20px;
  --radius-lg:28px;
  --shadow:0 24px 80px rgba(0,0,0,.38);
  --shadow2:0 14px 45px rgba(0,0,0,.26);
  --sidebar:220px;
  --container:1280px;
}

:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f8f7fb;
  --bg2:#ffffff;
  --bg3:#fff6fb;
  --surface:rgba(255,255,255,.72);
  --surface2:rgba(255,255,255,.88);
  --surface3:rgba(255,255,255,.96);
  --line:rgba(16,18,35,.10);
  --line2:rgba(16,18,35,.16);
  --text:#10101c;
  --text2:rgba(16,16,28,.82);
  --muted:rgba(16,16,28,.60);
  --muted2:rgba(16,16,28,.44);
  --shadow:0 24px 80px rgba(16,18,35,.13);
  --shadow2:0 14px 45px rgba(16,18,35,.10);
}

*{box-sizing:border-box}

html{
  scrollbar-color:rgba(255,35,184,.45) transparent;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:13px;
  line-height:1.5;
  overflow-x:hidden;
}

body:before{display:none}

.site-noise{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-3;
  background:
    radial-gradient(circle at 15% 10%, rgba(255,35,184,.19), transparent 32%),
    radial-gradient(circle at 85% 18%, rgba(187,244,81,.11), transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(255,176,0,.085), transparent 35%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg3) 55%, var(--bg) 100%);
  animation:mdiBgShift 14s ease-in-out infinite alternate;
}

.site-noise:after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 78%);
}

:root[data-theme="light"] .site-noise{
  background:
    radial-gradient(circle at 15% 10%, rgba(255,35,184,.14), transparent 32%),
    radial-gradient(circle at 85% 18%, rgba(187,244,81,.17), transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(255,176,0,.11), transparent 35%),
    linear-gradient(180deg, #fbf8ff 0%, #fff3fb 55%, #f9fbf1 100%);
}

@keyframes mdiBgShift{
  from{filter:hue-rotate(0deg) saturate(1)}
  to{filter:hue-rotate(-8deg) saturate(1.08)}
}

.pointer-glow{
  position:fixed;
  left:var(--pointer-x,50vw);
  top:var(--pointer-y,50vh);
  width:420px;
  height:420px;
  transform:translate(-50%,-50%);
  border-radius:999px;
  pointer-events:none;
  z-index:-2;
  opacity:.32;
  background:radial-gradient(circle,rgba(255,35,184,.18),rgba(187,244,81,.06),transparent 62%);
  filter:blur(18px);
  transition:opacity .25s ease;
}

a{color:inherit}
.muted{color:var(--muted)!important}
.small-text{font-size:11px}

.glass-card,
.card,
.kpi-card,
.task-card,
.server-card,
.team-card,
.wiki-card,
.notification-item,
.module-card,
.user-admin-card,
.admin-user-card,
.legal-card,
.legal-hero{
  background:var(--surface);
  border:1px solid var(--line);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow2);
}

.card:before{opacity:.32}

.app-shell{min-height:100vh}

.sidebar{
  width:var(--sidebar);
  padding:14px 10px;
  gap:10px;
  background:rgba(7,7,18,.66);
  border-right:1px solid var(--line);
  box-shadow:18px 0 60px rgba(0,0,0,.24);
  backdrop-filter:blur(28px);
  -webkit-backdrop-filter:blur(28px);
}

:root[data-theme="light"] .sidebar{
  background:rgba(255,255,255,.68);
}

.sidebar-topline{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  min-height:0;
}

.sidebar-close{
  display:none;
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--text);
  background:var(--surface);
  font-size:22px;
  line-height:1;
}

.theme-toggle,
.plain-theme-toggle{
  width:36px;
  height:36px;
  min-height:36px;
  padding:0;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--text);
  background:var(--surface);
  box-shadow:none;
  cursor:pointer;
}

.theme-toggle:hover,
.plain-theme-toggle:hover{
  transform:translateY(-1px);
  border-color:rgba(255,35,184,.34);
  box-shadow:0 0 35px rgba(255,35,184,.16);
}

.brand-wrap{
  padding:0 8px 8px;
  gap:10px;
}

.brand-mark{
  width:38px;
  height:38px;
  border-radius:16px;
  background:linear-gradient(135deg,#ff23b8,#d100a8);
  box-shadow:0 0 45px rgba(255,35,184,.22);
}

.brand{font-size:18px;font-weight:900;letter-spacing:-.03em}
.brand-sub{font-size:11px;color:var(--muted)}

.nav-user-pill{
  min-height:40px;
  padding:9px 10px;
  border-radius:18px;
  background:var(--surface);
}

.nav-user-pill span{font-size:10px;letter-spacing:.10em;color:var(--text)}
.nav-user-pill small{font-size:10px;color:var(--muted)}

.nav-group{gap:4px}
.nav-label{
  padding:10px 8px 4px;
  font-size:9px;
  letter-spacing:.20em;
  color:var(--muted2);
}

.nav-group a{
  height:38px;
  padding:0 10px;
  gap:9px;
  border-radius:15px;
  color:var(--text2);
  font-size:13px;
  font-weight:850;
}

.nav-group a span{
  width:25px;
  height:25px;
  border-radius:11px;
  background:rgba(255,255,255,.07);
  color:var(--muted);
}

.nav-group a.active{
  background:linear-gradient(135deg,rgba(255,35,184,.22),rgba(209,0,168,.14));
  border-color:rgba(255,35,184,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 40px rgba(255,35,184,.08);
}

.nav-group a:hover{
  background:rgba(255,255,255,.08);
  transform:translateX(2px);
}

.nav-group a b{
  background:linear-gradient(135deg,#ff23b8,#d100a8);
  color:#fff;
  box-shadow:0 0 26px rgba(255,35,184,.25);
}

.sidebar-footer{gap:9px}
.profile-mini{
  min-height:52px;
  border-radius:18px;
  background:var(--surface);
}
.profile-avatar{width:33px;height:33px;border-radius:13px;background:linear-gradient(135deg,#ff23b8,#d100a8)}
.profile-name{font-size:13px}
.profile-sub{font-size:11px}
.sidebar-legal{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:var(--muted2);
  font-size:11px;
}
.sidebar-legal a:hover{color:var(--text)}
.logout-link{
  height:36px;
  border-radius:15px;
  background:var(--surface);
  font-size:13px;
}

.main-content{
  margin-left:var(--sidebar);
  padding:18px 18px 34px;
}

.main-content > *{
  width:min(100%,var(--container));
  margin-left:auto;
  margin-right:auto;
}

.guest-layout .main-content{
  margin-left:0;
  padding:0;
  width:100%;
}

.guest-layout .main-content > *{
  width:min(100%,var(--container));
}

.page-top,
.topbar,
.page-hero{
  min-height:auto;
  padding:22px;
  margin-bottom:14px;
  border-radius:30px;
  background:
    linear-gradient(135deg,rgba(255,35,184,.11),rgba(209,0,168,.075) 44%,rgba(255,255,255,.045)),
    var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow2);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
}

.page-top h1,
.topbar h1,
.page-hero h1{
  font-size:clamp(1.75rem,3.2vw,3.2rem);
  line-height:.96;
  font-weight:900;
  letter-spacing:-.06em;
}

.page-top p,
.topbar p,
.page-hero p{
  margin-top:8px;
  color:var(--muted);
  font-size:13px;
}

.eyebrow,
.hero-badge{
  gap:.55rem;
  margin-bottom:10px;
  padding:7px 11px;
  border-radius:999px;
  color:rgba(255,255,255,.68);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.055);
  font-size:.68rem;
  letter-spacing:.18em;
  font-weight:900;
}

:root[data-theme="light"] .eyebrow,
:root[data-theme="light"] .hero-badge{
  color:rgba(16,16,28,.62);
}

.eyebrow:before,
.hero-badge:before{
  content:"";
  width:1.55rem;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,#ff23b8,#fff);
}

.btn-primary,
.button-primary,
button{
  border-radius:999px;
  min-height:38px;
  padding:.74rem 1.05rem;
  font-weight:900;
  color:white;
  background:linear-gradient(135deg,#ff23b8,#a00073);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 0 60px rgba(255,35,184,.22);
  transition:transform .22s ease,filter .22s ease,box-shadow .22s ease;
}

.btn-primary:hover,
.button-primary:hover,
button:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
  box-shadow:0 0 80px rgba(255,35,184,.30);
}

.btn-secondary,
.button-secondary{
  border-radius:999px;
  min-height:38px;
  padding:.74rem 1.05rem;
  font-weight:850;
  color:var(--text2);
  border:1px solid var(--line);
  background:var(--surface);
  backdrop-filter:blur(14px);
  box-shadow:none;
}

.btn-secondary:hover,
.button-secondary:hover{
  background:var(--surface2);
  transform:translateY(-1px);
  border-color:rgba(255,35,184,.26);
}

.card{
  padding:16px;
  border-radius:24px;
}

.section-head{margin-bottom:12px}
.section-head h2,.card h2{font-size:15px}
.kpi-grid,.stats-grid{gap:11px;margin-bottom:14px}
.compact-kpis{grid-template-columns:repeat(6,minmax(0,1fr))}

.kpi-card,
.stat-card{
  min-height:86px;
  padding:14px;
  border-radius:22px;
  background:
    radial-gradient(circle at 100% 0%,rgba(255,35,184,.12),transparent 48%),
    var(--surface);
}

.kpi-card span,
.stat-card h3{
  font-size:10px;
  color:var(--muted);
}

.kpi-card strong,
.stat-card strong{
  font-size:24px;
  letter-spacing:-.06em;
}

.kpi-card small{font-size:11px;color:rgba(187,244,81,.86)}

.dashboard-grid{gap:12px}
.content-grid{gap:12px}
.content-grid.two-one{grid-template-columns:minmax(0,1.45fr) minmax(290px,.72fr)}

input,
select,
textarea{
  min-height:38px;
  padding:9px 11px;
  border-radius:15px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.045);
  color:var(--text);
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}

:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea{
  background:rgba(255,255,255,.78);
  color:#10101c;
}

input:focus,
select:focus,
textarea:focus{
  border-color:rgba(255,35,184,.55);
  box-shadow:0 0 0 4px rgba(255,35,184,.12);
  background:rgba(255,255,255,.07);
}

label span{
  margin-bottom:5px;
  color:var(--text2);
  font-size:11px;
}

.filter-grid{
  grid-template-columns:repeat(4,minmax(0,1fr)) auto;
  gap:10px;
  align-items:end;
}

.table-wrap{border-radius:20px;border-color:var(--line)}
th{
  color:var(--muted);
  background:rgba(7,7,18,.86);
  font-size:9px;
}
:root[data-theme="light"] th{background:rgba(255,255,255,.92)}
th,td{padding:11px 10px}

.status-pill,
.pill,
.special-chip,
.role-badge{
  min-height:28px;
  padding:6px 10px;
  font-size:11px;
  border-radius:999px;
  background:rgba(255,255,255,.075);
  border-color:var(--line);
}

.status-open,
.status-pending{
  background:rgba(255,176,0,.13);
  color:#ffd98a;
  border-color:rgba(255,176,0,.30);
}

.status-in_progress{
  background:rgba(255,35,184,.15);
  color:#ffc7ef;
  border-color:rgba(255,35,184,.30);
}

.status-done,
.status-approved{
  background:rgba(187,244,81,.14);
  color:#e8ffc2;
  border-color:rgba(187,244,81,.30);
}

:root[data-theme="light"] .status-done,
:root[data-theme="light"] .status-approved{
  color:#314800;
}

.task-filter-card{
  padding:14px;
  border-radius:24px;
  margin-bottom:12px;
}

.task-board{
  display:grid;
  gap:10px;
}

.task-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px;
  gap:14px;
  align-items:center;
  padding:14px 16px;
  border-radius:24px;
}

.task-card h2,
.task-card h3{
  font-size:16px;
  letter-spacing:-.025em;
}

.task-card p{font-size:13px;color:var(--muted)}
.task-chip-row{gap:7px}
.task-card-side{text-align:right;border-left:1px solid var(--line);padding-left:14px}
.task-card-side .small-btn{min-width:112px}
.task-flow-strip{padding:14px;gap:10px}
.flow-step{height:40px;min-width:124px;border-radius:999px}
.flow-step b{width:23px;height:23px}

.server-grid,
.team-grid,
.wiki-grid,
.module-grid,
.user-admin-grid,
.admin-list{
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:12px;
}

.user-admin-card,
.server-card,
.team-card,
.wiki-card,
.approval-card,
.notification-item,
.module-card,
.admin-user-card{
  min-height:158px;
  padding:14px;
  border-radius:24px;
}

.timeline-item{
  grid-template-columns:50px 1fr auto;
  gap:10px;
  padding:10px;
}
.datebox{
  height:50px;
  border-radius:17px;
  background:linear-gradient(135deg,rgba(255,35,184,.24),rgba(209,0,168,.12));
}
.datebox b{font-size:18px}

.login-premium{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(360px,.58fr);
  gap:18px;
  align-items:center;
  width:min(1180px,calc(100% - 32px));
  margin:0 auto;
  padding:34px 0 54px;
}

.login-hero{
  position:relative;
  min-height:560px;
  overflow:hidden;
  display:grid;
  align-content:end;
  padding:42px;
  background:
    radial-gradient(circle at 30% 18%,rgba(255,35,184,.25),transparent 26rem),
    radial-gradient(circle at 86% 20%,rgba(187,244,81,.12),transparent 24rem),
    var(--surface);
}

.login-hero h1{
  max-width:820px;
  margin:0;
  font-size:clamp(3rem,7.5vw,6.8rem);
  line-height:.86;
  letter-spacing:-.08em;
  font-weight:900;
}

.login-hero p{
  max-width:620px;
  color:var(--muted);
  font-size:16px;
}

.login-orbit{
  position:absolute;
  top:28px;
  right:34px;
  width:170px;
  height:170px;
  display:grid;
  place-items:center;
}

.login-brand-orb{
  width:86px;
  height:86px;
  border-radius:30px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#ff23b8,#d100a8);
  box-shadow:0 0 80px rgba(255,35,184,.30);
  z-index:2;
}

.login-brand-orb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.floating-logo{animation:floatLogo 4.5s ease-in-out infinite}
@keyframes floatLogo{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-9px) rotate(2deg)}
}

.orb-ring{
  position:absolute;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
}
.ring-one{inset:8px;animation:spinSoft 18s linear infinite}
.ring-two{inset:32px;border-color:rgba(187,244,81,.20);animation:spinSoft 12s linear infinite reverse}
@keyframes spinSoft{to{transform:rotate(360deg)}}

.login-panel{
  padding:24px;
  border-radius:30px;
}

.login-panel-head h2{
  margin:0;
  font-size:34px;
  line-height:.95;
  letter-spacing:-.06em;
}

.login-feature-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}

.login-feature-grid span{
  padding:9px 11px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text2);
  font-size:12px;
  font-weight:850;
}

.login-security-strip{
  display:flex;
  gap:10px;
  margin-top:16px;
  padding:12px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.045);
}

.login-security-strip span{
  width:10px;
  height:10px;
  margin-top:5px;
  border-radius:999px;
  background:#bbf451;
  box-shadow:0 0 25px rgba(187,244,81,.45);
}

.login-security-strip p{margin:0;color:var(--muted);font-size:12px}

.guest-footer{
  position:fixed;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:8px;
  z-index:80;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  background:rgba(7,7,18,.58);
  backdrop-filter:blur(18px);
}
:root[data-theme="light"] .guest-footer{background:rgba(255,255,255,.72)}
.guest-footer a:hover{color:var(--text)}
.plain-theme-toggle{
  width:auto;
  height:auto;
  min-height:0;
  padding:0;
  border:0;
  color:var(--muted);
  background:transparent;
  font:inherit;
}

.legal-wrap{
  width:min(100%,1180px)!important;
  padding:34px 18px 80px;
}

.legal-hero{
  padding:38px;
  margin-bottom:16px;
}

.legal-hero h1{
  margin:0;
  font-size:clamp(2.6rem,7vw,6rem);
  line-height:.88;
  letter-spacing:-.08em;
  font-weight:900;
}

.legal-hero p{color:var(--muted);font-size:16px}

.legal-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.legal-card{
  padding:22px;
}

.legal-card h2{
  margin:0 0 10px;
  font-size:20px;
  letter-spacing:-.04em;
}

.legal-card p{
  margin:8px 0;
  color:var(--muted);
}

.legal-card code{
  padding:3px 7px;
  border-radius:9px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
}

.legal-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

.mobile-topbar{
  display:none;
}

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease,transform .7s ease;
}

.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

@media(max-width:1300px){
  .compact-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .content-grid.two-one{grid-template-columns:1fr}
}

@media(max-width:920px){
  :root{--sidebar:220px}
  body.has-sidebar{padding-top:64px}
  .mobile-topbar{
    position:fixed;
    top:10px;
    left:10px;
    right:10px;
    z-index:90;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px 10px;
    border-radius:22px;
    border:1px solid var(--line);
    background:rgba(7,7,18,.66);
    backdrop-filter:blur(24px);
    box-shadow:var(--shadow2);
  }
  :root[data-theme="light"] .mobile-topbar{background:rgba(255,255,255,.75)}
  .mobile-brand{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .mobile-brand-mark{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:14px;
    overflow:hidden;
    background:linear-gradient(135deg,#ff23b8,#d100a8);
  }
  .mobile-brand-mark img{width:100%;height:100%;object-fit:cover}
  .mobile-brand b{display:block;line-height:1;font-weight:900}
  .mobile-brand small{display:block;color:var(--muted);font-size:11px}
  .mobile-actions{display:flex;align-items:center;gap:8px}
  .mobile-menu-button{
    width:38px;
    height:38px;
    min-height:38px;
    padding:0;
    display:grid;
    place-items:center;
    gap:0;
    border-radius:999px;
    background:var(--surface);
    box-shadow:none;
  }
  .mobile-menu-button span{
    width:16px;
    height:2px;
    border-radius:99px;
    background:var(--text);
    display:block;
    margin:2px 0;
  }
  .mobile-nav-backdrop{
    position:fixed;
    inset:0;
    z-index:94;
    background:rgba(0,0,0,.48);
    backdrop-filter:blur(8px);
    opacity:0;
    pointer-events:none;
    transition:.22s ease;
  }
  .mobile-nav-open .mobile-nav-backdrop{
    opacity:1;
    pointer-events:auto;
  }
  .sidebar{
    position:fixed!important;
    inset:10px auto 10px 10px!important;
    width:min(84vw,290px)!important;
    height:auto!important;
    border:1px solid var(--line);
    border-radius:26px;
    transform:translateX(calc(-100% - 18px));
    transition:transform .24s ease;
    z-index:95;
  }
  .mobile-nav-open .sidebar{transform:translateX(0)}
  .sidebar-close{display:grid;place-items:center}
  .main-content{
    margin-left:0;
    padding:14px 10px 32px;
  }
  .main-content > *{width:100%}
  .nav-group{grid-template-columns:1fr}
  .nav-label{grid-column:auto}
  .sidebar-footer{display:grid}
  .page-top,.topbar,.page-hero{padding:18px;border-radius:26px}
  .filter-grid,.task-filter-grid{grid-template-columns:1fr 1fr}
  .task-card{grid-template-columns:1fr}
  .task-card-side{
    text-align:left;
    border-left:0;
    padding-left:0;
    padding-top:12px;
    border-top:1px solid var(--line);
  }
  .calendar-link-box{grid-template-columns:1fr}
  .login-premium{grid-template-columns:1fr;padding-top:76px}
  .login-hero{min-height:430px;padding:28px}
  .login-orbit{opacity:.55;transform:scale(.78);transform-origin:top right}
  .legal-grid{grid-template-columns:1fr}
}

@media(max-width:620px){
  body{font-size:13px}
  .kpi-grid,.stats-grid,.compact-kpis,.compact-kpis.three{grid-template-columns:1fr 1fr}
  .filter-grid,.task-filter-grid{grid-template-columns:1fr}
  .server-grid,.team-grid,.wiki-grid,.module-grid,.user-admin-grid,.admin-list{grid-template-columns:1fr}
  .form-row.two-col,.form-row.three-col,.role-select-line{grid-template-columns:1fr}
  .chip-check-grid,.checkbox-grid{grid-template-columns:1fr}
  .login-premium{width:min(100%,calc(100% - 20px));gap:12px}
  .login-hero{min-height:360px;padding:22px}
  .login-hero h1{font-size:clamp(2.6rem,18vw,4rem)}
  .login-panel{padding:18px}
  .guest-footer{
    position:static;
    transform:none;
    width:calc(100% - 20px);
    margin:0 auto 12px;
    justify-content:center;
  }
  .legal-wrap{padding:76px 10px 28px}
  .legal-hero{padding:24px}
}



/* =========================================================
   Phase 13 – DarksSides Compact Design
   Weniger Pink, kleineres UI, breiteres Dashboard, schönere Sidebar
========================================================= */

:root{
  --bg:#050812;
  --bg2:#070b16;
  --bg3:#0a1020;
  --surface:rgba(11,17,31,.64);
  --surface2:rgba(18,28,49,.72);
  --surface3:rgba(27,40,67,.78);
  --line:rgba(139,174,255,.14);
  --line2:rgba(139,174,255,.22);
  --text:#f5f8ff;
  --text2:rgba(245,248,255,.80);
  --muted:rgba(210,224,255,.60);
  --muted2:rgba(210,224,255,.40);
  --blue:#6387ff;
  --blue2:#38bdf8;
  --violet:#6d5dfc;
  --violet2:#8b5cf6;
  --cyan:#22d3ee;
  --green:#bbf451;
  --yellow:#ffb000;
  --red:#ff4d6d;
  --radius-xs:8px;
  --radius-sm:12px;
  --radius:16px;
  --radius-lg:22px;
  --shadow:0 18px 58px rgba(0,0,0,.32);
  --shadow2:0 10px 34px rgba(0,0,0,.23);
  --sidebar:206px;
  --container:1500px;
}

:root[data-theme="light"]{
  --bg:#f6f8ff;
  --bg2:#ffffff;
  --bg3:#edf4ff;
  --surface:rgba(255,255,255,.72);
  --surface2:rgba(255,255,255,.86);
  --surface3:rgba(255,255,255,.96);
  --line:rgba(35,55,95,.12);
  --line2:rgba(35,55,95,.20);
  --text:#101827;
  --text2:rgba(16,24,39,.78);
  --muted:rgba(16,24,39,.58);
  --muted2:rgba(16,24,39,.42);
}

body{
  font-size:12.5px;
  background:#050812;
}

.site-noise{
  background:
    radial-gradient(circle at 13% 12%, rgba(99,135,255,.22), transparent 31%),
    radial-gradient(circle at 84% 17%, rgba(34,211,238,.12), transparent 27%),
    radial-gradient(circle at 48% 100%, rgba(139,92,246,.12), transparent 35%),
    linear-gradient(180deg,#050812 0%,#071126 52%,#050812 100%);
}

:root[data-theme="light"] .site-noise{
  background:
    radial-gradient(circle at 13% 12%, rgba(99,135,255,.15), transparent 31%),
    radial-gradient(circle at 84% 17%, rgba(34,211,238,.16), transparent 27%),
    radial-gradient(circle at 48% 100%, rgba(139,92,246,.10), transparent 35%),
    linear-gradient(180deg,#f7fbff 0%,#edf4ff 52%,#fbfdff 100%);
}

.pointer-glow{
  opacity:.26;
  background:radial-gradient(circle,rgba(99,135,255,.18),rgba(34,211,238,.07),transparent 64%);
}

/* Sidebar */
.sidebar{
  width:var(--sidebar);
  padding:12px 9px;
  background:
    linear-gradient(180deg,rgba(5,8,18,.84),rgba(5,8,18,.68)),
    rgba(5,8,18,.72);
  border-right:1px solid var(--line);
}

:root[data-theme="light"] .sidebar{
  background:rgba(255,255,255,.76);
}

.sidebar-topline{
  height:0;
  min-height:0;
  overflow:visible;
  position:relative;
}

.sidebar-theme{
  position:absolute;
  right:2px;
  top:2px;
  width:30px;
  height:30px;
  min-height:30px;
  opacity:.78;
}

.brand-wrap{
  min-height:54px;
  padding:6px 7px 10px;
  margin-bottom:2px;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(99,135,255,.12),rgba(34,211,238,.045));
  border:1px solid rgba(139,174,255,.10);
}

.brand-mark{
  width:36px;
  height:36px;
  border-radius:14px;
  background:linear-gradient(135deg,#6387ff,#22d3ee);
  box-shadow:0 0 42px rgba(99,135,255,.20);
}

.brand{
  font-size:17px;
  letter-spacing:-.035em;
}

.brand-sub{
  font-size:10.5px;
}

.nav-user-pill{
  min-height:36px;
  padding:8px 10px;
  border-radius:15px;
  margin-bottom:4px;
  background:rgba(255,255,255,.045);
  border-color:rgba(139,174,255,.13);
}

.nav-user-pill span{
  font-size:9px;
  color:#dce8ff;
}

.nav-user-pill small{
  font-size:10px;
  max-width:88px;
}

.nav-label{
  padding:9px 8px 3px;
  font-size:8.5px;
  letter-spacing:.20em;
}

.nav-group{
  gap:3px;
}

.nav-group a{
  height:35px;
  padding:0 9px;
  border-radius:13px;
  gap:8px;
  font-size:12.5px;
}

.nav-group a span{
  width:23px;
  height:23px;
  border-radius:9px;
  font-size:11px;
  background:rgba(139,174,255,.075);
}

.nav-group a.active{
  background:linear-gradient(135deg,rgba(99,135,255,.22),rgba(34,211,238,.075));
  border-color:rgba(99,135,255,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 34px rgba(99,135,255,.10);
}

.nav-group a:hover{
  background:rgba(99,135,255,.10);
}

.nav-group a b{
  min-width:18px;
  height:18px;
  font-size:9px;
  background:linear-gradient(135deg,#6387ff,#6d5dfc);
  box-shadow:0 0 24px rgba(99,135,255,.22);
}

.profile-mini{
  min-height:48px;
  padding:8px;
  border-radius:15px;
}

.profile-avatar{
  width:31px;
  height:31px;
  border-radius:12px;
  background:linear-gradient(135deg,#6387ff,#22d3ee);
}

.profile-name{
  font-size:12px;
}

.profile-sub{
  font-size:10.5px;
}

.sidebar-legal{
  font-size:10.5px;
}

.logout-link{
  height:34px;
  font-size:12px;
  border-radius:13px;
}

/* Main kompakter und breiter */
.main-content{
  padding:14px 16px 30px;
}

.main-content > *{
  width:min(100%,var(--container));
}

.page-top,
.topbar,
.page-hero{
  padding:18px 20px;
  margin-bottom:12px;
  border-radius:24px;
  background:
    linear-gradient(135deg,rgba(99,135,255,.13),rgba(34,211,238,.055) 48%,rgba(255,255,255,.035)),
    var(--surface);
}

.page-top h1,
.topbar h1,
.page-hero h1{
  font-size:clamp(1.55rem,2.7vw,2.65rem);
  letter-spacing:-.055em;
}

.page-top p,
.topbar p,
.page-hero p{
  margin-top:6px;
  font-size:12px;
}

.eyebrow,
.hero-badge{
  padding:5px 10px;
  margin-bottom:8px;
  font-size:.60rem;
}

.eyebrow:before,
.hero-badge:before{
  width:1.25rem;
  background:linear-gradient(90deg,#6387ff,#22d3ee);
}

/* Buttons ein kleines Stück kleiner */
.btn-primary,
.button-primary,
button{
  min-height:34px;
  padding:.60rem .92rem;
  border-radius:999px;
  font-size:12px;
  background:linear-gradient(135deg,#6387ff,#6d5dfc);
  box-shadow:0 0 42px rgba(99,135,255,.18);
}

.btn-primary:hover,
.button-primary:hover,
button:hover{
  box-shadow:0 0 58px rgba(99,135,255,.25);
}

.btn-secondary,
.button-secondary{
  min-height:34px;
  padding:.60rem .92rem;
  border-radius:999px;
  font-size:12px;
}

.small-btn,
.mini-button{
  min-height:28px;
  padding:0 9px;
  font-size:11px;
}

/* Cards und KPIs kleiner */
.card{
  padding:13px;
  border-radius:20px;
}

.section-head{
  margin-bottom:10px;
}

.section-head h2,
.card h2{
  font-size:14px;
}

.compact-kpis{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
  margin-bottom:12px;
}

.kpi-card,
.stat-card{
  min-height:76px;
  padding:12px 13px;
  border-radius:18px;
  background:
    radial-gradient(circle at 100% 0%,rgba(99,135,255,.12),transparent 48%),
    var(--surface);
}

.kpi-card span,
.stat-card h3{
  font-size:9px;
}

.kpi-card strong,
.stat-card strong{
  font-size:21px;
}

.kpi-card small{
  font-size:10px;
  color:#bbf451;
}

/* Dashboard schlauer: mehr Breite für Server + Meldungen */
.dashboard-grid{
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:11px;
}

.dashboard-grid > .card{
  grid-column:span 4;
}

.dashboard-grid > .span-2,
.span-2{
  grid-column:span 8;
}

.dashboard-grid > .dash-half{
  grid-column:span 6!important;
}

.mini-stack{
  gap:8px;
}

.task-row,
.task-item,
.mini-row,
.log-item{
  min-height:50px;
  padding:9px 10px;
  border-radius:15px;
}

.task-row b,
.mini-row b{
  font-size:12.5px;
}

.task-row small,
.mini-row small{
  font-size:10.5px;
}

.status-pill,
.pill,
.special-chip,
.role-badge{
  min-height:24px;
  padding:5px 9px;
  font-size:10.5px;
}

.feature-grid.compact-feature-grid{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}

.feature-grid.compact-feature-grid a{
  min-height:68px;
  padding:12px;
  border-radius:18px;
}

.feature-grid.compact-feature-grid b{
  font-size:13px;
}

.feature-grid.compact-feature-grid span{
  font-size:10.5px;
}

/* Formulare/Tabellen etwas dichter */
input,
select,
textarea{
  min-height:35px;
  padding:8px 10px;
  border-radius:12px;
  font-size:12px;
}

label span{
  font-size:10.5px;
}

.filter-grid{
  gap:8px;
}

th,td{
  padding:9px 9px;
}

/* Login auch DarksSides statt Pink */
.login-brand-orb,
.mobile-brand-mark{
  background:linear-gradient(135deg,#6387ff,#22d3ee);
}

.login-hero{
  background:
    radial-gradient(circle at 30% 18%,rgba(99,135,255,.24),transparent 26rem),
    radial-gradient(circle at 86% 20%,rgba(34,211,238,.12),transparent 24rem),
    var(--surface);
}

.login-hero h1{
  font-size:clamp(2.7rem,6.8vw,6.2rem);
}

.login-feature-grid span{
  font-size:11px;
}

/* Legal */
.legal-hero h1{
  font-size:clamp(2.35rem,6vw,5.4rem);
}

/* Statusfarben behalten aber ruhiger */
.status-in_progress{
  background:rgba(99,135,255,.15);
  color:#dce8ff;
  border-color:rgba(99,135,255,.28);
}

.status-done,
.status-approved{
  background:rgba(187,244,81,.13);
  color:#e9ffc8;
  border-color:rgba(187,244,81,.26);
}

/* Mobile */
@media(max-width:1300px){
  .compact-kpis{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .dashboard-grid > .dash-half{
    grid-column:span 6!important;
  }
}

@media(max-width:920px){
  :root{--sidebar:206px}
  .main-content{
    padding:12px 10px 28px;
  }
  .mobile-topbar{
    height:48px;
    border-radius:19px;
    background:rgba(5,8,18,.72);
  }
  .sidebar{
    width:min(84vw,270px)!important;
  }
  .dashboard-grid{
    grid-template-columns:1fr;
  }
  .dashboard-grid > .card,
  .dashboard-grid > .span-2,
  .dashboard-grid > .dash-half,
  .span-2{
    grid-column:auto!important;
  }
  .feature-grid.compact-feature-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:620px){
  body{font-size:12px}
  .page-top h1,
  .topbar h1,
  .page-hero h1{
    font-size:2rem;
  }
  .compact-kpis{
    grid-template-columns:1fr 1fr;
  }
  .feature-grid.compact-feature-grid{
    grid-template-columns:1fr;
  }
}



/* =========================================================
   Phase 14 – Übersicht, Broadcast, Präsenz, Anstupsen
========================================================= */

/* Flaticon Icons in der Sidebar */
.nav-group a span i,
.mobile-brand i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  line-height:1;
}

.nav-group a span{
  flex:none;
}

/* Dashboard angenehmer und klarer */
.dashboard-layout{
  width:min(100%,var(--container));
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(300px,.55fr);
  gap:12px;
  align-items:start;
}

.dashboard-main-column,
.dashboard-side-column{
  display:grid;
  gap:12px;
}

.dashboard-two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.dashboard-kpis{
  margin-bottom:12px;
}

.dashboard-task-row em{
  margin-left:auto;
}

.dashboard-mini-grid{
  grid-template-columns:1fr 1fr;
  display:grid;
}

.dashboard-shortcuts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:0;
}

.dashboard-shortcuts a{
  min-height:62px;
  padding:12px;
}

.dashboard-notification-row b,
.mini-row b{
  font-weight:780;
}

/* Meldungen leichter */
.notification-layout{
  align-items:start;
}

.notification-side{
  display:grid;
  gap:12px;
}

.notification-list{
  gap:10px;
}

.notification-item{
  min-height:auto;
  padding:13px 14px;
  border-radius:20px;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:flex-start;
}

.notification-item h3{
  margin:8px 0 4px;
  font-size:15px;
  line-height:1.25;
  font-weight:760;
  letter-spacing:-.015em;
}

.notification-item p{
  margin:0 0 7px;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}

.notification-item small{
  color:var(--muted2);
  font-size:11px;
}

.notification-meta-row,
.notification-actions-row{
  gap:6px;
}

.notification-item.unread{
  border-color:rgba(99,135,255,.28);
  background:linear-gradient(180deg,rgba(99,135,255,.075),rgba(255,255,255,.025));
}

.notification-item.priority-important{
  border-color:rgba(187,244,81,.22);
}

.notification-item.priority-urgent{
  border-color:rgba(255,176,0,.30);
  box-shadow:0 0 48px rgba(255,176,0,.08);
}

.broadcast-card{
  background:
    radial-gradient(circle at 100% 0%,rgba(99,135,255,.12),transparent 50%),
    var(--surface);
}

/* Online / Anstupsen */
.online-card{
  overflow:hidden;
}

.online-list{
  display:grid;
  gap:8px;
}

.online-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  min-height:44px;
  padding:8px 9px;
  border-radius:15px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.035);
}

.online-row b{
  display:block;
  font-size:12.5px;
  font-weight:820;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.online-row small{
  display:block;
  margin-top:1px;
  color:var(--muted);
  font-size:10.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.poke-button{
  background:linear-gradient(135deg,rgba(99,135,255,.22),rgba(34,211,238,.14))!important;
  color:var(--text)!important;
  border:1px solid rgba(99,135,255,.25)!important;
  box-shadow:none!important;
}

.poke-button:hover{
  transform:translateY(-1px);
  border-color:rgba(187,244,81,.35)!important;
}

.presence-line{
  display:flex;
  align-items:center;
  gap:6px;
  margin:4px 0 0!important;
  font-size:11px!important;
}

.presence-line span{
  width:7px;
  height:7px;
  border-radius:999px;
  background:#64748b;
}

.presence-line.is-online span{
  background:var(--green);
  box-shadow:0 0 16px rgba(187,244,81,.55);
}

/* Genehmigungen wie Workflow */
.approval-layout{
  width:min(100%,var(--container));
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(320px,.54fr) minmax(0,1fr);
  gap:12px;
  align-items:start;
}

.approval-create-card,
.approval-list-card{
  border-radius:22px;
}

.approval-list-card .filter-grid{
  grid-template-columns:1fr 1fr 1fr auto;
  margin-bottom:12px;
}

.approval-stack{
  display:grid;
  gap:10px;
}

.approval-workflow-card{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:12px;
  padding:14px;
  border-radius:21px;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 100% 0%,rgba(99,135,255,.10),transparent 46%),
    rgba(255,255,255,.035);
}

.approval-workflow-card.status-approved{
  border-color:rgba(187,244,81,.24);
}

.approval-workflow-card.status-rejected{
  border-color:rgba(255,77,109,.25);
}

.approval-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:10px;
}

.approval-head h3{
  margin:0;
  font-size:16px;
  line-height:1.2;
  font-weight:850;
  letter-spacing:-.02em;
}

.approval-head p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:11.5px;
}

.approval-flow-strip{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.035);
  margin-bottom:10px;
}

.approval-flow-step{
  height:34px;
  min-width:120px;
  padding:0 11px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--muted);
  background:rgba(255,255,255,.035);
  font-weight:850;
  font-size:11px;
}

.approval-flow-step b{
  width:21px;
  height:21px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  font-size:10px;
}

.approval-flow-step.active{
  color:var(--text);
  background:rgba(99,135,255,.12);
  border-color:rgba(99,135,255,.28);
}

.approval-flow-step.approved{
  background:rgba(187,244,81,.12);
  border-color:rgba(187,244,81,.28);
}

.approval-flow-step.rejected{
  background:rgba(255,77,109,.12);
  border-color:rgba(255,77,109,.25);
}

.approval-flow-line{
  flex:1;
  height:2px;
  border-radius:999px;
  background:rgba(255,255,255,.09);
}

.approval-flow-line.active{
  background:linear-gradient(90deg,var(--blue),var(--green));
}

.approval-desc{
  margin:8px 0;
  color:var(--text2);
  font-size:12.5px;
}

.approval-meta-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  margin-top:9px;
}

.approval-meta-grid span{
  padding:7px 9px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:11px;
}

.approval-meta-grid b,
.approval-meta-grid a{
  color:var(--text);
}

.approval-decision-panel{
  display:grid;
  gap:9px;
  padding-top:10px;
  border-top:1px solid var(--line);
}

.approval-decision-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
}

.decision-box{
  margin-top:9px;
  font-size:12px;
}

/* Noch ruhiger auf langen Seiten */
.page-top + .kpi-grid,
.page-hero + .kpi-grid{
  margin-top:0;
}

@media(max-width:1200px){
  .dashboard-layout,
  .approval-layout{
    grid-template-columns:1fr;
  }

  .dashboard-two{
    grid-template-columns:1fr;
  }
}

@media(max-width:740px){
  .dashboard-mini-grid{
    grid-template-columns:1fr;
  }

  .approval-list-card .filter-grid{
    grid-template-columns:1fr;
  }

  .approval-head{
    display:grid;
  }

  .approval-flow-strip{
    align-items:stretch;
  }

  .approval-flow-step{
    min-width:0;
    flex:1;
  }

  .approval-meta-grid{
    grid-template-columns:1fr;
  }

  .online-row{
    grid-template-columns:auto minmax(0,1fr);
  }

  .online-row form{
    grid-column:1 / -1;
  }

  .online-row .poke-button{
    width:100%;
  }
}



/* =========================================================
   Phase 15 – Dark only, bessere Icons, Browser-Benachrichtigungen
========================================================= */

html,
:root,
:root[data-theme="light"]{
  color-scheme:dark!important;
  --bg:#050812!important;
  --bg2:#070b16!important;
  --bg3:#0a1020!important;
  --surface:rgba(11,17,31,.64)!important;
  --surface2:rgba(18,28,49,.72)!important;
  --surface3:rgba(27,40,67,.78)!important;
  --line:rgba(139,174,255,.14)!important;
  --line2:rgba(139,174,255,.22)!important;
  --text:#f5f8ff!important;
  --text2:rgba(245,248,255,.80)!important;
  --muted:rgba(210,224,255,.60)!important;
  --muted2:rgba(210,224,255,.40)!important;
  --blue:#6387ff!important;
  --blue2:#38bdf8!important;
  --violet:#6d5dfc!important;
  --violet2:#8b5cf6!important;
  --cyan:#22d3ee!important;
  --green:#bbf451!important;
  --yellow:#ffb000!important;
  --red:#ff4d6d!important;
  --shadow:0 18px 58px rgba(0,0,0,.32)!important;
  --shadow2:0 10px 34px rgba(0,0,0,.23)!important;
}

:root[data-theme="light"] .site-noise{
  background:
    radial-gradient(circle at 13% 12%, rgba(99,135,255,.22), transparent 31%),
    radial-gradient(circle at 84% 17%, rgba(34,211,238,.12), transparent 27%),
    radial-gradient(circle at 48% 100%, rgba(139,92,246,.12), transparent 35%),
    linear-gradient(180deg,#050812 0%,#071126 52%,#050812 100%)!important;
}

:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea,
:root[data-theme="light"] .sidebar,
:root[data-theme="light"] .mobile-topbar,
:root[data-theme="light"] th,
:root[data-theme="light"] .guest-footer{
  background:rgba(11,17,31,.64)!important;
  color:var(--text)!important;
}

.theme-toggle,
.plain-theme-toggle,
.sidebar-theme{
  display:none!important;
}

.sidebar-topline{
  display:none!important;
}

.nav-group a span i{
  width:16px;
  height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:currentColor;
}

.nav-group a span{
  background:rgba(99,135,255,.10);
  border:1px solid rgba(139,174,255,.08);
}

.nav-group a.active span{
  background:rgba(99,135,255,.18);
  color:#dce8ff;
}

.feature-grid.compact-feature-grid.dashboard-shortcuts{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.feature-grid.compact-feature-grid.dashboard-shortcuts a{
  min-height:88px;
  padding:16px;
  border-radius:22px;
  align-content:center;
  background:
    radial-gradient(circle at 100% 0%,rgba(99,135,255,.13),transparent 45%),
    rgba(255,255,255,.045);
}

.feature-grid.compact-feature-grid.dashboard-shortcuts b{
  font-size:15px;
  letter-spacing:-.02em;
}

.feature-grid.compact-feature-grid.dashboard-shortcuts span{
  font-size:12px;
  line-height:1.35;
}

.poke-button[disabled],
button[disabled]{
  opacity:.55;
  cursor:not-allowed;
}

.notification-permission-hint{
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(99,135,255,.20);
  background:rgba(99,135,255,.07);
  color:var(--muted);
  font-size:12px;
}

@media(max-width:620px){
  .feature-grid.compact-feature-grid.dashboard-shortcuts{
    grid-template-columns:1fr;
  }
}



/* =========================================================
   Phase 16 – Compact Meldungen + WebPush + echte Präsenz
========================================================= */

/* Meldungen kompakter */
.notification-layout.content-grid.two-one{
  grid-template-columns:minmax(0,1.25fr) minmax(300px,.48fr);
  gap:12px;
}

.notification-list{
  gap:8px;
}

.notification-item{
  min-height:86px!important;
  padding:11px 12px!important;
  border-radius:18px!important;
}

.notification-item h3{
  margin:6px 0 3px!important;
  font-size:13.5px!important;
  font-weight:740!important;
}

.notification-item p{
  font-size:11.5px!important;
  margin-bottom:5px!important;
}

.notification-item .pill,
.notification-item .special-chip{
  min-height:22px;
  padding:4px 8px;
  font-size:10px;
}

.notification-side .card{
  padding:12px;
  border-radius:19px;
}

.broadcast-card .section-head{
  margin-bottom:8px;
}

.broadcast-card h2{
  font-size:13.5px;
}

.broadcast-card input,
.broadcast-card select,
.broadcast-card textarea{
  min-height:32px;
  padding:7px 9px;
  font-size:11.5px;
  border-radius:11px;
}

.broadcast-card textarea{
  min-height:68px;
}

.broadcast-card button{
  min-height:32px;
  padding:.54rem .8rem;
  font-size:11.5px;
}

.broadcast-card .form-grid{
  gap:8px;
}

.broadcast-card .form-row.two-col{
  gap:8px;
}

/* Online wirklich kurzlebig anzeigen */
.online-card .pill,
.kpi-card small{
  white-space:nowrap;
}

.online-row{
  min-height:40px;
  padding:7px 8px;
}

.online-row b{
  font-size:12px;
}

.online-row small{
  font-size:10px;
}

/* Hintergrund/Scroll nicht so knallig */
html{
  scrollbar-color:rgba(99,135,255,.65) rgba(5,8,18,.7);
}

/* WebPush-Hinweis */
.webpush-note{
  margin-top:8px;
  font-size:11px;
  color:var(--muted2);
}

@media(max-width:1200px){
  .notification-layout.content-grid.two-one{
    grid-template-columns:1fr;
  }
}



/* =========================================================
   Phase 17 – Einladungscode Registrierung
========================================================= */

.register-page{
  grid-template-columns:minmax(0,1fr) minmax(380px,.62fr);
}

.single-panel-page{
  display:grid;
  place-items:center;
  grid-template-columns:1fr;
}

.single-panel-page .login-panel{
  width:min(100%,520px);
}

.invite-code-preview,
.invite-code-big{
  display:grid;
  gap:6px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(99,135,255,.28);
  background:
    radial-gradient(circle at 100% 0%,rgba(99,135,255,.18),transparent 50%),
    rgba(255,255,255,.045);
}

.invite-code-preview span,
.invite-code-card label span{
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:900;
}

.invite-code-preview strong,
.invite-code-big{
  font-size:clamp(1.8rem,4vw,3.6rem);
  letter-spacing:.08em;
  font-weight:900;
  line-height:1;
  color:#f5f8ff;
  text-shadow:0 0 34px rgba(99,135,255,.22);
}

.registration-info-box{
  padding:12px 13px;
  border-radius:16px;
  border:1px solid rgba(187,244,81,.20);
  background:rgba(187,244,81,.055);
}

.registration-info-box b{
  display:block;
  margin-bottom:5px;
  font-size:12px;
}

.registration-info-box p{
  margin:4px 0;
  color:var(--muted);
  font-size:12px;
}

.invite-created-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(320px,.7fr);
  gap:12px;
}

.invite-code-card{
  display:grid;
  gap:14px;
}

.invite-list{
  display:grid;
  gap:8px;
}

.invite-row{
  display:grid;
  grid-template-columns:120px auto minmax(0,1fr);
  gap:8px;
  align-items:center;
  min-height:42px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.035);
}

.invite-row b{
  letter-spacing:.08em;
}

.invite-row small{
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pending-registration-card,
.invite-overview-card{
  margin-bottom:12px;
}

.pending-registration-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:12px;
}

.pending-user-card{
  display:grid;
  gap:12px;
  padding:14px;
  border-radius:20px;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 100% 0%,rgba(99,135,255,.12),transparent 50%),
    rgba(255,255,255,.035);
}

.registration-flow-strip{
  margin:0;
}

.approve-user-form{
  padding:10px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.03);
}

.special-role-details{
  border:1px solid var(--line);
  border-radius:14px;
  padding:9px 10px;
  background:rgba(255,255,255,.03);
}

.special-role-details summary{
  cursor:pointer;
  font-weight:850;
  color:var(--text2);
}

.special-role-details .chip-check-grid{
  margin-top:10px;
}

.admin-card-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:auto;
}

.admin-card-actions form{
  margin:0;
}

.user-admin-card.is-disabled{
  opacity:.78;
  border-color:rgba(255,176,0,.20);
}

@media(max-width:920px){
  .register-page,
  .invite-created-grid{
    grid-template-columns:1fr;
  }

  .pending-registration-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:620px){
  .invite-row{
    grid-template-columns:1fr;
  }

  .admin-card-actions{
    grid-template-columns:1fr;
  }
}



/* =========================================================
   Phase 18 – Version Badge + störungsfreie Live-Sync Anzeige
========================================================= */

.mdi-version-badge{
  position:fixed;
  left:12px;
  bottom:10px;
  z-index:160;
  min-height:24px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(139,174,255,.16);
  background:rgba(5,8,18,.56);
  color:rgba(210,224,255,.58);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 12px 34px rgba(0,0,0,.20);
  font-size:10px;
  font-weight:850;
  letter-spacing:.08em;
  pointer-events:none;
}

.mdi-version-badge:before{
  content:"";
  width:6px;
  height:6px;
  border-radius:999px;
  background:#bbf451;
  box-shadow:0 0 14px rgba(187,244,81,.55);
}

.mdi-live-change-hint{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:170;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(99,135,255,.24);
  background:rgba(5,8,18,.72);
  color:rgba(245,248,255,.82);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 12px 34px rgba(0,0,0,.28);
  font-size:11px;
  font-weight:850;
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}

.mdi-live-change-hint.show{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.reload-toast{
  max-width:min(360px,calc(100vw - 28px));
}

/* Bei manueller Live-Aktualisierung weniger Bewegung */
.main-content .reveal{
  transition-duration:.25s;
}

@media(max-width:920px){
  .mdi-version-badge{
    left:14px;
    bottom:12px;
    font-size:9.5px;
    opacity:.78;
  }
}


/* Version Badge sitzt unten links ohne Logout zu verdecken */
.sidebar{
  padding-bottom:46px!important;
}


/* Phase 20: sichere Bestätigungen */
.danger-confirm-details{
  margin-top:8px;
}

.danger-confirm-details summary{
  cursor:pointer;
  color:#fecaca;
  font-weight:850;
  font-size:12px;
}

.confirm-inline-form{
  display:grid;
  gap:7px;
  margin-top:8px;
}

.confirm-inline-form input{
  min-height:32px;
  font-size:11px;
}

.invite-confirm-card .registration-info-box{
  margin-bottom:12px;
}