/* =====================================================================
   app.css — Service Portal
   Designsystem übernommen aus der Doku-Altanwendung (index.php).
   Umschaltung hell/dunkel über <html data-theme="light|dark">.
   Schriften liegen lokal unter /assets/fonts (kein externer Abruf).
   ===================================================================== */

/* ══════════════════ SCHRIFTEN ══════════════════ */
/* Open Sans traegt alle fuenf im Portal genutzten Staerken. */
@font-face { font-family:'Open Sans'; font-style:normal; font-weight:400;
  src:url('/assets/fonts/open-sans-latin-400-normal.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Open Sans'; font-style:normal; font-weight:500;
  src:url('/assets/fonts/open-sans-latin-500-normal.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Open Sans'; font-style:normal; font-weight:600;
  src:url('/assets/fonts/open-sans-latin-600-normal.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Open Sans'; font-style:normal; font-weight:700;
  src:url('/assets/fonts/open-sans-latin-700-normal.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Open Sans'; font-style:normal; font-weight:800;
  src:url('/assets/fonts/open-sans-latin-800-normal.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Roboto Mono'; font-style:normal; font-weight:400;
  src:url('/assets/fonts/roboto-mono-latin-400-normal.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Roboto Mono'; font-style:normal; font-weight:700;
  src:url('/assets/fonts/roboto-mono-latin-700-normal.woff2') format('woff2'); font-display:swap; }

/* ══════════════════ VARIABLEN ══════════════════ */
:root, :root[data-theme="light"] {
  --sw-open: 264px;
  --sw-closed: 72px;

  --bg:        #f2f2f7;
  --bg-card:   #ffffff;
  --bg-sb:     rgba(248,248,252,0.82);
  --bg-hover:  rgba(0,122,255,0.08);
  --bg-active: rgba(0,122,255,0.12);

  --blue:   #007aff; --blue-a:   rgba(0,122,255,0.13); --blue-b: rgba(0,122,255,0.24);
  --green:  #34c759; --green-a:  rgba(52,199,89,0.13);
  --amber:  #ff9500; --amber-a:  rgba(255,149,0,0.13);
  --red:    #ff3b30; --red-a:    rgba(255,59,48,0.13);
  --purple: #af52de; --purple-a: rgba(175,82,222,0.13);
  --teal:   #32ade6; --teal-a:   rgba(50,173,230,0.13);
  --indigo: #5856d6; --indigo-a: rgba(88,86,214,0.13);
  --gray:   #8e8e93; --gray-a:   rgba(142,142,147,0.13);

  --text: #1c1c1e; --text-2: #3a3a3c; --text-3: #8e8e93; --text-4: #c7c7cc;
  --border: rgba(0,0,0,0.07); --border-c: rgba(0,0,0,0.055);

  --sh-card:  0 1px 4px rgba(0,0,0,0.05), 0 6px 22px rgba(0,0,0,0.05);
  --sh-hover: 0 4px 24px rgba(0,122,255,0.13), 0 1px 6px rgba(0,0,0,0.07);
  --sh-sb:    3px 0 20px rgba(0,0,0,0.06);

  --r-sm: 5px; --r-md: 7px; --r-lg: 9px;

  --ff:  'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --ffd: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --ffm: 'Roboto Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.4,0,.2,1);
  --tr: .22s var(--ease);

  /* Kompatibilität zu bestehenden Views */
  --card: var(--bg-card);
  --card2: var(--bg);
  --content: var(--bg-card);
  --sidebar: var(--bg-sb);
  --muted: var(--text-3);
  --text-soft: var(--text-2);
  --border-soft: var(--border-c);
  --accent: var(--blue);
  --accent-hover: #0062cc;
  --accent-ink: #ffffff;
  --shadow: var(--sh-card);
  --shadow-card: var(--sh-card);
}

:root[data-theme="dark"] {
  --bg:        #1c1c1e;
  --bg-card:   #2c2c2e;
  --bg-sb:     rgba(20,20,22,0.88);
  --bg-hover:  rgba(255,255,255,0.07);
  --bg-active: rgba(0,122,255,0.22);
  --text: #f2f2f7; --text-2: #c7c7cc; --text-3: #8e8e93; --text-4: #3a3a3c;
  --border: rgba(255,255,255,0.08); --border-c: rgba(255,255,255,0.06);
  --sh-card:  0 1px 4px rgba(0,0,0,0.28), 0 6px 22px rgba(0,0,0,0.22);
  --sh-hover: 0 4px 24px rgba(0,122,255,0.22), 0 1px 6px rgba(0,0,0,0.35);
  --sh-sb:    3px 0 20px rgba(0,0,0,0.38);
  --accent-hover: #339dff;
}

/* ══════════════════ GRUNDLAGEN ══════════════════ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--ff);
  font-size: 16px;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  display: flex;
  overflow-x: hidden;
  max-width: 100vw;
  -webkit-font-smoothing: antialiased;
  transition: background var(--tr), color var(--tr);
}
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 70% 50% at 14% -5%, rgba(0,122,255,0.08) 0%, transparent 65%),
    radial-gradient(ellipse 50% 45% at 92% 98%, rgba(52,199,89,0.06) 0%, transparent 65%);
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
.app-shell { display: contents; }

/* ══════════════════ SIDEBAR ══════════════════ */
.sidebar {
  position: fixed; inset: 0 auto 0 0;
  width: var(--sw-open); z-index: 200;
  display: flex; flex-direction: column;
  padding: 1.1rem 0.8rem 1rem;
  overflow-y: auto; overflow-x: hidden; white-space: nowrap;
  background: var(--bg-sb);
  backdrop-filter: blur(32px) saturate(190%);
  -webkit-backdrop-filter: blur(32px) saturate(190%);
  border-right: 1px solid var(--border);
  box-shadow: var(--sh-sb);
  transition: width var(--tr), background var(--tr), transform var(--tr);
}

/* Kopfbereich */
.brand { display: flex; align-items: center; justify-content: center;
         gap: .7rem; padding: .2rem .6rem 1.1rem; }

.brand-mark {
  width: 36px; height: 36px; border-radius: 4px; flex-shrink: 0;
  background: linear-gradient(135deg, #007aff 0%, #32ade6 100%);
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: .85rem; font-family: var(--ffd);
}
.brand-title { font-family: var(--ffd); font-size: .95rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.brand-subtitle { font-size: .72rem; color: var(--text-3); margin-top: 1px; }

/* Gruppen */
.nav-group { display: flex; flex-direction: column; }
.nav-group-title {
  font-size: .68rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-3);
  padding: .8rem .6rem .3rem;
}
.nav { display: flex; flex-direction: column; gap: 2px; }

/* Navigationslinks */
.nav a, .sb-link {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem; border-radius: 4px;
  font-size: .95rem; font-weight: 500;
  color: var(--text-2); text-decoration: none;
  transition: background var(--tr), color var(--tr);
  overflow: hidden;
}
.nav a:hover, .sb-link:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; }
.nav a.active, .sb-link.active { background: var(--bg-active); color: var(--blue); font-weight: 600; }

/* Icon-Kacheln in der Navigation */
.nav a svg, .sb-icon svg { display: block; width: 18px; height: 18px; flex-shrink: 0; }
.nav a > svg {
  width: 18px; height: 18px; flex-shrink: 0;
  color: var(--text-3);
  transition: color var(--tr);
}
.nav a:hover > svg   { color: var(--text-2); }
.nav a.active > svg  { color: var(--blue); }

/* Design-Umschalter */
.theme-toggle {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem; border-radius: 4px; border: none;
  background: transparent; color: var(--text-2);
  font-family: var(--ff); font-size: .95rem; font-weight: 500;
  cursor: pointer; width: 100%; text-align: left;
  transition: background var(--tr), color var(--tr);
}
.theme-toggle:hover { background: var(--bg-hover); color: var(--text); }
.theme-toggle span:first-child {
  width: 18px; height: 18px; flex-shrink: 0;
  display: grid; place-items: center; color: var(--text-3);
}
.theme-toggle svg { width: 18px; height: 18px; }

/* Benutzerbereich */
.user-box {
  margin-top: auto; padding-top: .7rem;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: .7rem; flex-shrink: 0;
}
.user-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #007aff 0%, #32ade6 100%);
  display: grid; place-items: center;
  font-size: .85rem; font-weight: 700; color: #fff;
}
.user-name { font-size: .88rem; font-weight: 600; color: var(--text); }
.user-handle { font-size: .72rem; color: var(--text-3); margin-top: 1px; }
.user-logout { font-size: .75rem; color: var(--red); margin-left: auto; }
.user-logout:hover { text-decoration: underline; }

/* ══════════════════ HAUPTBEREICH ══════════════════ */
.main {
  flex: 1; min-width: 0;
  width: calc(100vw - var(--sw-open));
  margin-left: var(--sw-open);
  overflow-x: hidden; position: relative; z-index: 1;
  display: flex; flex-direction: column; min-height: 100dvh;
  transition: margin-left var(--tr), width var(--tr);
}

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.6rem 2.5rem 0; gap: 1rem;
}
.breadcrumb { font-size: .82rem; font-weight: 500; color: var(--text-3); }
.breadcrumb a { color: var(--text-3); }
.topbar-actions { display: flex; align-items: center; gap: .6rem; }

.content { padding: 1.75rem 2.5rem 3.5rem; flex: 1; min-width: 0; width: 100%; }

.page-head { margin-bottom: 1.5rem; }
.page-head h1 {
  font-family: var(--ffd); font-size: 2rem; font-weight: 800;
  color: var(--text); line-height: 1.1; margin: 0 0 3px;
}
.page-head p { font-size: .82rem; font-weight: 500; color: var(--text-3); margin: 0; }

/* Abschnittsköpfe */
.section-hd { display: flex; align-items: center; gap: 1rem; margin: .75rem 0 -2px; }
.section-hd__label {
  font-size: .78rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3); white-space: nowrap;
}
.section-hd__line { height: 1px; flex: 1; background: var(--border); }
.section-hd__badge {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--blue); background: var(--blue-a); border: 1px solid var(--blue-b);
  padding: .2rem .65rem; border-radius: 999px; white-space: nowrap;
}

/* ══════════════════ KARTEN ══════════════════ */
.card, .panel, .sys-card {
  background: var(--bg-card);
  border-radius: var(--r-md);
  border: 1px solid var(--border-c);
  box-shadow: var(--sh-card);
  padding: 1.15rem 1.35rem;
  margin-bottom: 1.25rem;
  min-width: 0;
  transition: box-shadow var(--tr), transform var(--tr), border-color var(--tr);
}
.sys-card { padding: 1rem 1.1rem .9rem; display: flex; flex-direction: column; }
.sys-card:hover {
  box-shadow: var(--sh-hover); transform: translateY(-3px);
  border-color: rgba(0,122,255,0.2);
}

.card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; margin-bottom: .8rem; flex-wrap: wrap;
}
.card-head strong {
  font-size: .78rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3);
}
.card-ico {
  width: 52px; height: 52px; border-radius: 5px;
  display: grid; place-items: center; flex-shrink: 0;
}
.card-title { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.card-sub { font-size: .75rem; font-weight: 500; color: var(--text-3); margin-top: 2px; }
.card-body { font-size: .82rem; color: var(--text-2); line-height: 1.5; }
.card-foot { display: flex; justify-content: flex-end; }

.grid, .tiles-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}

/* ══════════════════ SCHALTFLÄCHEN ══════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--ff); font-size: .8rem; font-weight: 600;
  padding: .45rem 1rem; border-radius: 4px;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-2);
  cursor: pointer; text-decoration: none;
  transition: background var(--tr), transform .12s var(--ease), border-color var(--tr);
}
.btn:hover { background: var(--bg-hover); text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-accent, .btn-open, .btn-primary {
  color: var(--blue); background: var(--blue-a); border-color: transparent;
}
.btn-accent:hover, .btn-open:hover, .btn-primary:hover { background: var(--blue-b); }

.btn-dark { background: var(--text); border-color: var(--text); color: var(--bg); }
.btn-dark:hover { opacity: .9; background: var(--text); }
.btn-ghost { background: transparent; border-color: var(--border); }
.btn-danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn-danger:hover { background: var(--red); opacity: .9; }
.btn-danger-text { color: var(--red); background: transparent; border-color: transparent; }
.btn-xs { padding: .3rem .7rem; font-size: .74rem; border-radius: 3px; }

/* ══════════════════ PILLEN & MARKIERUNGEN ══════════════════ */
.tag, .status-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 600;
  padding: .22rem .7rem; border-radius: 999px;
  background: var(--gray-a); color: var(--gray);
}
.tag-ok, .pill-green { background: var(--green-a); color: var(--green); }
.pill-blue  { background: var(--blue-a);  color: var(--blue); }
.pill-amber { background: var(--amber-a); color: var(--amber); }
.pill-red   { background: var(--red-a);   color: var(--red); }

/* ══════════════════ TABELLEN ══════════════════ */
.dtable, .device-table, .router-table {
  width: 100%; border-collapse: collapse; font-size: .88rem;
}
.dtable thead th, .device-table thead th {
  text-align: left; font-size: .7rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3);
  padding: .55rem .7rem; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.dtable tbody td, .device-table tbody td {
  padding: .7rem; border-bottom: 1px solid var(--border-c); vertical-align: top;
}
.dtable tbody tr:last-child td { border-bottom: none; }
.dtable tbody tr:hover { background: var(--bg-hover); }
.dtable code {
  font-size: .78rem; background: var(--bg); padding: .1rem .4rem; border-radius: 3px;
}

/* ══════════════════ MELDUNGEN ══════════════════ */
.flash {
  padding: .8rem 1.1rem; border-radius: var(--r-sm);
  margin-bottom: 1.25rem; font-size: .88rem; font-weight: 500;
  background: var(--bg-card); border: 1px solid var(--border-c);
  box-shadow: var(--sh-card); border-left: 4px solid var(--gray);
}
.flash-success { border-left-color: var(--green); }
.flash-error   { border-left-color: var(--red); }
.flash-info    { border-left-color: var(--blue); }

/* ══════════════════ NEWS-TICKER ══════════════════ */
.ticker-bar {
  display: flex; align-items: center;
  background: var(--blue-a); border: 1px solid var(--blue-b);
  border-radius: var(--r-sm); overflow: hidden;
  margin-bottom: 1.25rem; height: 36px;
}
.ticker-label {
  flex-shrink: 0; background: var(--blue); color: #fff;
  font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  padding: 0 .85rem; height: 100%; display: flex; align-items: center; gap: .4rem;
}
.ticker-scroll { flex: 1; overflow: hidden; position: relative; height: 100%; }
.ticker-inner {
  display: flex; align-items: center; height: 100%; white-space: nowrap;
  animation: tickerScroll 60s linear infinite;
}
.ticker-inner:hover { animation-play-state: paused; }
.ticker-item { font-size: .82rem; color: var(--blue); font-weight: 500; padding: 0 2.5rem; }
.ticker-item::before { content: '·'; margin-right: 2.5rem; opacity: .5; }
@keyframes tickerScroll { from { transform: translateX(100%); } to { transform: translateX(-100%); } }

/* ══════════════════ KLEINTEILE ══════════════════ */
.muted, .muted-sm { color: var(--text-3); }
.muted-sm { font-size: .75rem; }
.nowrap { white-space: nowrap; }
.hamburger, .mobile-menu-btn {
  display: none; width: 40px; height: 40px;
  border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--bg-card); box-shadow: var(--sh-card);
  align-items: center; justify-content: center; cursor: pointer; color: var(--text-2);
}
.hamburger svg { width: 20px; height: 20px; }
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.3); backdrop-filter: blur(3px); z-index: 190;
}
.footer {
  padding: 1.25rem 2.5rem; font-size: .75rem; color: var(--text-3); text-align: center;
}

/* ══════════════════ FORMULARE ══════════════════ */
input[type=text], input[type=password], input[type=number], input[type=email],
input[type=file], select, textarea {
  font-family: var(--ff); font-size: .88rem;
  padding: .5rem .75rem; border-radius: 4px;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text);
  transition: border-color var(--tr), box-shadow var(--tr);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-a);
}

/* ══════════════════ MOBIL ══════════════════ */
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .sidebar.open ~ .sidebar-overlay { display: block; }
  .main { margin-left: 0; width: 100vw; }
  .hamburger { display: inline-flex; }
  .topbar { padding: 1rem 1.1rem 0; }
  .content { padding: 1.1rem 1.1rem 2.5rem; }
  .page-head h1 { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ══════════════════ STATUSPUNKTE ══════════════════ */
.dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--gray); flex-shrink: 0; position: relative;
}
.dot[data-status="online"] {
  background: var(--green);
  animation: dotPulse 1.9s var(--ease) infinite;
}
.dot[data-status="offline"] { background: var(--red); }
@keyframes dotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(52,199,89,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(52,199,89,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,199,89,0); }
}
}

/* Kartenueberschriften dezenter */
.card h2, .panel h2, .card > h3 {
  font-family: var(--ffd); font-size: 1rem; font-weight: 700;
  color: var(--text); margin: 0 0 .2rem;
}
.card h2 + p, .panel h2 + p { font-size: .78rem; color: var(--text-3); margin: 0 0 1rem; }

/* ══════════════════ KENNZAHL-KACHELN ══════════════════ */
.stat-tiles {
  display: grid; gap: 12px; margin-bottom: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}
.stat-tile {
  background: var(--bg-card);
  border: 1px solid var(--border-c);
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
  padding: .85rem 1.05rem .8rem;
  transition: box-shadow var(--tr), transform var(--tr), border-color var(--tr);
}
.stat-tile:hover {
  box-shadow: var(--sh-hover); transform: translateY(-3px);
  border-color: rgba(0,122,255,.2);
}
.stat-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: .35rem;
}
.stat-value {
  font-family: var(--ffd); font-size: 1.6rem; font-weight: 800;
  color: var(--text); line-height: 1.1;
}
.stat-sub {
  font-family: var(--ff); font-size: .95rem; font-weight: 600;
  color: var(--text-3); margin-left: .3rem;
}
.stat-foot {
  display: flex; align-items: center; gap: .4rem;
  margin-top: .45rem; font-size: .72rem; color: var(--text-3);
}

/* ══════════════════ FEINSCHLIFF ══════════════════ */

/* Seitentitel deutlich kleiner */
.page-head { margin-bottom: 1.1rem; }
.page-head h1 { font-size: 1.35rem; font-weight: 700; margin-bottom: 1px; }
.page-head p  { font-size: .76rem; }

/* Statusanzeigen oben rechts */
.topbar { justify-content: flex-end; padding: 1.1rem 2.5rem 0; }
.topbar-actions { margin-left: auto; }

/* Kartenueberschriften als dezente Label-Zeile */
.card h2, .panel h2, .card h3, .panel h3,
.card > .card-title, .panel > .card-title {
  font-family: var(--ff);
  font-size: .72rem !important;
  font-weight: 800 !important;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-3) !important;
  margin: 0 0 .15rem;
}
.card h2 + p, .panel h2 + p,
.card h3 + p, .panel h3 + p {
  font-size: .76rem; color: var(--text-3); margin: 0 0 .9rem;
}

/* Seitentitel: schlaegt auch Inline-Bloecke der Views */
.page-head h1, .main h1 {
  font-family: var(--ffd) !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  margin: 0 0 1px !important;
}

/* =====================================================================
   SIDEBAR — kompaktere Masse nach Vorbild der Doku-Altanwendung
   Struktur und Gruppierung bleiben unveraendert.
   ===================================================================== */

html { font-size: 15px; }

.sidebar { padding: 1rem .7rem .9rem; }

.brand { padding: .1rem .5rem .9rem; gap: .6rem; }
.brand-mark { width: 32px; height: 32px; border-radius: 4px; font-size: .78rem; }
.brand-title { font-size: .9rem; }
.brand-subtitle { font-size: .68rem; }

.nav-group-title {
  font-size: .64rem; letter-spacing: .1em;
  padding: .7rem .55rem .25rem;
}
.nav { gap: 0; }

.nav a {
  gap: .6rem; padding: .42rem .55rem; border-radius: 4px;
  font-size: .86rem; font-weight: 500;
}
.nav a > svg { width: 18px; height: 18px; padding: 0; }

.theme-toggle {
  gap: .6rem; padding: .42rem .55rem; border-radius: 4px; font-size: .86rem;
}
.theme-toggle span:first-child {
  width: 18px; height: 18px; border-radius: 0;
  background: transparent; color: var(--text-3);
}
.theme-toggle svg { width: 16px; height: 16px; }

.user-box { padding-top: .6rem; gap: .6rem; }
.user-avatar { width: 32px; height: 32px; font-size: .78rem; }
.user-name { font-size: .82rem; }
.user-handle { font-size: .68rem; }
.user-logout { font-size: .72rem; }

/* ══════════════════ SIDEBAR EIN-/AUSKLAPPEN ══════════════════ */

/* Sidebar als Spalte, Schalter und Benutzerkasten unten */
.sidebar { display: flex; flex-direction: column; }
.sidebar .nav-group { flex: 0 0 auto; }
.sb-collapse { margin-top: auto; }
.user-box    { margin-top: 0; }

.sb-collapse {
  display: flex; align-items: center; gap: .6rem;
  padding: .42rem .55rem; border-radius: 4px; border: none;
  background: transparent; color: var(--text-3);
  font-family: var(--ff); font-size: .86rem; font-weight: 500;
  cursor: pointer; width: 100%; text-align: left;
  transition: background var(--tr), color var(--tr);
  white-space: nowrap; overflow: hidden; flex-shrink: 0;
}
.sb-collapse:hover { background: var(--bg-hover); color: var(--text); }
.sb-collapse svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform var(--tr); }
.sidebar.collapsed .sb-collapse svg { transform: rotate(180deg); }

/* Breiten */
.sidebar.collapsed,
html.sb-pre-collapsed .sidebar { width: var(--sw-closed); }
.main.sb-collapsed,
html.sb-pre-collapsed .main {
  margin-left: var(--sw-closed);
  width: calc(100vw - var(--sw-closed));
}

/* Im eingeklappten Zustand: nur Icons zeigen */
.sidebar.collapsed { padding-left: .5rem; padding-right: .5rem; }

.sidebar.collapsed .brand > div:not(.brand-mark),
.sidebar.collapsed .nav-group-title,
.sidebar.collapsed .sb-collapse span,
.sidebar.collapsed .user-box > div:not(.user-avatar),
.sidebar.collapsed .user-logout,
.sidebar.collapsed #themeLabel { display: none !important; }

/* Beschriftung der Links ausblenden, Icon behalten */
.sidebar.collapsed .nav a {
  font-size: 0;
  justify-content: center;
  padding: .42rem 0;
  gap: 0;
}
.sidebar.collapsed .nav a > svg { width: 20px; height: 20px; font-size: initial; }

.sidebar.collapsed .brand,
.sidebar.collapsed .theme-toggle,
.sidebar.collapsed .sb-collapse,
.sidebar.collapsed .user-box { justify-content: center; }
.sidebar.collapsed .theme-toggle { font-size: 0; gap: 0; padding: .42rem 0; }
.sidebar.collapsed .theme-toggle span:first-child { font-size: initial; }
.sidebar.collapsed .sb-collapse { padding: .42rem 0; gap: 0; }

/* Kurzhinweis beim Ueberfahren */
.sidebar.collapsed .nav a { position: relative; }
.sidebar.collapsed .nav a::after {
  content: attr(title);
  position: absolute; left: calc(var(--sw-closed) - 12px);
  top: 50%; transform: translateY(-50%);
  background: var(--text); color: var(--bg);
  font-size: .78rem; font-weight: 600;
  padding: .3rem .65rem; border-radius: 3px;
  white-space: nowrap; pointer-events: none;
  opacity: 0; visibility: hidden; z-index: 999;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  transition: opacity .12s var(--ease);
}
.sidebar.collapsed .nav a:hover::after { opacity: 1; visibility: visible; }

@media (max-width: 900px) {
  .sidebar.collapsed, html.sb-pre-collapsed .sidebar { width: var(--sw-open); }
  .main.sb-collapsed, html.sb-pre-collapsed .main { margin-left: 0; width: 100vw; }
  .sb-collapse { display: none; }
}

/* Aktive Markierung schmaler, Abstand zwischen den Eintraegen */
.nav { gap: 2px; }
.nav a {
  padding-top: .38rem; padding-bottom: .38rem;
  margin: 1px 0;
}
.theme-toggle { padding-top: .38rem; padding-bottom: .38rem; margin: 1px 0; }

/* Sicherheitsnetz: SVG ohne Groessenangabe darf nicht die Seite fluten */
.content svg:not([width]) { width: 16px; height: 16px; }
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ══════════════════ TOAST-MELDUNGEN ══════════════════ */
.toast-wrap {
  position: fixed; top: 1rem; right: 1rem; z-index: 2000;
  display: flex; flex-direction: column; gap: .5rem;
  pointer-events: none; max-width: min(400px, calc(100vw - 2rem));
}
.toast {
  display: flex; align-items: center; gap: .7rem;
  border-radius: var(--r-sm); padding: .85rem 1rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.2);
  pointer-events: auto; color: #fff;
  animation: toastIn .25s var(--ease);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.toast.hide { opacity: 0; transform: translateX(12px); }

.toast-success { background: #34c759; }
.toast-error   { background: #ff3b30; }
.toast-info    { background: #ff9500; }

.toast-icon {
  width: 26px; height: 26px; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(255,255,255,.22); border-radius: 50%;
  color: #fff;
}
.toast-msg {
  flex: 1; font-size: .86rem; font-weight: 600;
  color: #fff; line-height: 1.4;
}
.toast-close {
  width: 24px; height: 24px; flex-shrink: 0; padding: 0;
  border: none; background: rgba(255,255,255,.18); color: #fff;
  font-size: 16px; line-height: 1; cursor: pointer; border-radius: 3px;
  display: grid; place-items: center;
  transition: background var(--tr);
}
.toast-close:hover { background: rgba(255,255,255,.32); }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* ══════════ Logo im Markenblock ══════════
   Steht bewusst am Dateiende: die Regeln fuer die eingeklappte Leiste
   weiter oben arbeiten mit !important, dagegen kaeme eine fruehere
   Fassung nicht an.

   Ausgeklappt zeigt die Leiste den Schriftzug, eingeklappt nur das
   Signet. Der Selektor mit html.sb-pre-collapsed greift schon vor dem
   ersten Skriptlauf, damit beim Laden nicht kurz das breite Logo
   aufblitzt und wieder verschwindet.

   Das Logo bringt seine Farbflaechen selbst mit und braucht daher keine
   Anpassung an helles oder dunkles Design. Die SVG haben ringsum Rand;
   die negativen Margen holen ihn zurueck, damit das Logo buendig zur
   Navigation darunter steht. */
.sidebar .brand { text-decoration: none; color: inherit; }
.sidebar .brand:hover { opacity: .85; }

.sidebar .brand-logo {
  display: block !important;
  width: 100%; max-width: 170px; height: auto;
  margin: 0 auto;   /* mittig */
}
.sidebar .brand-icon {
  display: none !important;
  width: 34px; height: auto; margin: 0;
}

.sidebar.collapsed .brand-logo,
html.sb-pre-collapsed .sidebar .brand-logo { display: none !important; }

.sidebar.collapsed .brand-icon,
html.sb-pre-collapsed .sidebar .brand-icon { display: block !important; }