/* ══════════════════════════════════════════════════════════════
   SHELL — gemeinsame Hülle für Backoffice (admin.html) und
   Betriebsansicht (dashboard.html): Sidebar, Topbar, Seitenkopf.
   Wird NACH dem Inline-CSS geladen und darf deshalb gleich
   spezifische Regeln überschreiben.
   ══════════════════════════════════════════════════════════════ */

.app{
  display:grid; grid-template-columns:262px minmax(0,1fr);
  min-height:100vh; position:relative; z-index:1;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.side{
  position:sticky; top:0; height:100vh; z-index:90;
  display:flex; flex-direction:column;
  padding:18px 12px 14px;
  background:linear-gradient(180deg,rgba(11,16,38,.99) 0%,rgba(6,9,22,.99) 100%);
  border-right:1px solid var(--line);
}
.side-head{
  display:flex; align-items:center; gap:11px;
  padding:0 8px 16px; margin-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.side-head img{height:32px; width:auto; flex:0 0 auto; filter:drop-shadow(0 0 9px rgba(0,163,255,.4))}
.side-head .rl{
  font-family:var(--fm); font-size:.53rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--cyan); line-height:1;
}
.side-head .nm{
  font-family:var(--fd); font-size:.72rem; font-weight:800; letter-spacing:.05em;
  color:var(--white); margin-top:6px; line-height:1.1;
}
.side-nav{
  flex:1; overflow-y:auto; overflow-x:hidden;
  display:flex; flex-direction:column; gap:20px; padding:2px 0;
  scrollbar-width:thin;
}
.nav-label{
  font-family:var(--fm); font-size:.52rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:#69749A; padding:0 10px 7px;
}
.nav-group{display:flex; flex-direction:column; gap:1px}

/* .tab bleibt als Klasse erhalten, damit bestehende Selektoren greifen */
.side .navitem{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:8px 10px 8px 11px; margin:0;
  font-family:var(--fu); font-size:.83rem; font-weight:600; letter-spacing:.03em;
  color:var(--muted); text-align:left; line-height:1.3;
  background:none; border:0; border-left:2px solid transparent; border-radius:2px;
  transition:background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.side .navitem:hover{background:rgba(0,163,255,.08); color:var(--white)}
.side .navitem .dot{
  width:5px; height:5px; flex:0 0 auto; border-radius:50%;
  background:currentColor; opacity:.45;
}
.side .navitem[aria-selected="true"],
.side .navitem[aria-current="page"]{
  background:linear-gradient(90deg,rgba(0,163,255,.17),rgba(0,163,255,.03));
  color:var(--white); border-left-color:var(--cyan-bright); font-weight:700;
}
.side .navitem[aria-selected="true"] .dot,
.side .navitem[aria-current="page"] .dot{
  background:var(--cyan-bright); opacity:1; box-shadow:0 0 8px rgba(93,226,255,.9);
}
.side .navitem .count{
  margin-left:auto; font-family:var(--fm); font-size:.57rem; font-weight:500;
  padding:0 5px; min-width:20px; text-align:center;
  border:1px solid rgba(255,255,255,.14); color:var(--faint); border-radius:2px;
}
.side-foot{
  margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.06);
  display:flex; flex-direction:column; gap:2px;
}
.side-foot .who{
  display:block; padding:8px 10px 6px; font-family:var(--fm); font-size:.58rem;
  letter-spacing:.06em; color:var(--faint); line-height:1.5;
}
.side-foot .who b{color:var(--silver); font-weight:600}
.side-foot .navitem{font-size:.78rem; color:var(--faint)}
.side-foot .navitem:hover{color:var(--white)}
.side-foot .navitem.danger:hover{background:rgba(255,42,133,.12); color:#FF9DBE}

/* ── Hauptspalte ────────────────────────────────────────────── */
.main{display:flex; flex-direction:column; min-width:0}

.topbar{
  position:sticky; top:0; z-index:70;
  display:flex; align-items:center; gap:14px;
  padding:10px 28px; min-height:52px;
  border-bottom:1px solid var(--line);
  background:rgba(4,6,15,.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.crumb{
  font-family:var(--fm); font-size:.6rem; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:#6B779B; display:flex; align-items:center; gap:8px;
}
.crumb .sep{opacity:.45}
.crumb b{color:var(--silver); font-weight:600}
.topbar-tools{margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.topbar .btn{font-size:.72rem; padding:6px 11px; min-height:0}

/* ── Seitenkopf ─────────────────────────────────────────────── */
.pagehead{padding:26px 0 20px; border-bottom:1px solid rgba(255,255,255,.05); margin-bottom:22px}
.pagehead .eyebrow{
  font-family:var(--fm); font-size:.57rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--pink); line-height:1;
}
.pagehead h1{
  font-family:var(--fd); font-size:1.4rem; font-weight:900; letter-spacing:.02em;
  color:var(--white); line-height:1.15; margin-top:8px;
}
.pagehead p{max-width:74ch; font-size:.84rem; color:var(--muted); margin-top:7px; line-height:1.6}

/* ── Sprungnavigation (lange Seiten) ────────────────────────── */
.subnav{
  position:sticky; top:52px; z-index:45;
  display:flex; align-items:center; gap:1px; overflow-x:auto;
  padding:4px; margin:0 0 20px;
  background:rgba(8,12,30,.92); border:1px solid var(--line);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  scrollbar-width:none;
}
.subnav::-webkit-scrollbar{display:none}
.subnav a{
  padding:6px 11px; white-space:nowrap;
  font-family:var(--fu); font-size:.72rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint);
  border-bottom:2px solid transparent;
  transition:color .15s var(--ease), border-color .15s var(--ease);
}
.subnav a:hover{color:var(--white)}
.subnav a.on{color:var(--cyan-bright); border-bottom-color:var(--cyan-bright)}

/* ── Mobile ─────────────────────────────────────────────────── */
.burger{
  display:none; align-items:center; justify-content:center;
  width:34px; height:34px; flex:0 0 auto;
  border:1px solid var(--line); border-radius:2px; color:var(--silver);
}
.burger:hover{background:rgba(0,163,255,.1); color:#fff}
.scrim{
  display:none; position:fixed; inset:0; z-index:85;
  background:rgba(2,4,12,.68); border:0; padding:0;
  opacity:0; pointer-events:none; transition:opacity .22s var(--ease);
}
.scrim.on{opacity:1; pointer-events:auto}

@media(max-width:1024px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{
    position:fixed; inset:0 auto 0 0; width:282px; height:100%;
    translate:-100% 0; transition:translate .28s var(--ease);
    box-shadow:24px 0 60px rgba(0,0,0,.5);
  }
  .side.open{translate:0 0}
  .scrim{display:block}
  .burger{display:inline-flex}
  .topbar{padding:9px 16px}
  .pagehead{padding:20px 0 16px; margin-bottom:18px}
  .pagehead h1{font-size:1.2rem}
  .subnav{top:52px; margin-bottom:16px}
}
@media(max-width:600px){
  .crumb{display:none}
  .topbar .btn.hide-xs{display:none}
}

/* Shell sitzt auf <body>, kein Body-Padding mehr nötig */
body.app{padding-bottom:0}

/* hidden muss jede display-Regel schlagen */
[hidden]{display:none!important}

/* ══════════════════════════════════════════════════════════════
   EINHEITLICHES MASS
   Eine Quelle für Seitenbreite, Innenabstand und Inhaltsbreite.
   Die Modul-Stylesheets (content-admin, legal-admin) setzen keine
   eigenen Breiten mehr – sie füllen, was hier definiert ist.
   ══════════════════════════════════════════════════════════════ */
:root{ --shell-max:1280px; --shell-gutter:clamp(22px,3.2vw,56px) }

.app .wrap{
  width:100%; max-width:var(--shell-max);
  margin:0 auto; padding:0 var(--shell-gutter) 90px;
}
@media(max-width:900px){ .app .wrap{padding:0 20px 72px} }
@media(max-width:600px){ .app .wrap{padding:0 14px 64px} }
@media(min-width:1700px){ .app .wrap{max-width:1360px} }

/* Rahmen und Raster füllen immer dieselbe Breite */
.app .panel,
.app .panel-body,
.app .strip,
.app .subnav,
.app .cf-grid,
.app .lg-grid,
.app .two-col{ width:100%; max-width:none; box-sizing:border-box }
.app .panel{ margin-left:0; margin-right:0 }

/* Rechtliches: die 320-px-Prüfspalte wird zur vollen Breite unter dem Formular,
   damit alle vier Bereiche dieselbe Textkante haben */
.app .lg-grid{ grid-template-columns:minmax(0,1fr); gap:18px }
.app .lg-check{ position:static; top:auto; width:100% }

/* Gleiche Innenbreite auf jeder Seite: Scrollleiste immer reservieren */
html{scrollbar-gutter:stable}
.app{scrollbar-gutter:stable}

/* ══════════════════════════════════════════════════════════════
   Menü-Typografie: eine Regel für Links UND Buttons.
   Vorher erbten die Tab-Buttons `.tab` aus dem Seiten-CSS
   (Großschreibung, andere Laufweite) – „Übersicht" blieb als Link
   davon unberührt und sah dadurch wie eine andere Schrift aus.
   ══════════════════════════════════════════════════════════════ */
.app .side .navitem{
  font-family:var(--fu); font-size:.77rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; line-height:1.35;
  color:var(--muted); background:none; border:0;
  border-left:2px solid transparent; border-radius:2px;
  padding:8px 10px 8px 11px; margin:0; width:100%;
  display:flex; align-items:center; gap:9px;
  text-align:left; cursor:pointer;
  transition:background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.app .side .navitem:hover{background:rgba(0,163,255,.08); color:var(--white)}
.app .side .navitem[aria-selected="true"],
.app .side .navitem[aria-current="page"]{
  background:linear-gradient(90deg,rgba(0,163,255,.17),rgba(0,163,255,.03));
  color:var(--white); border-left-color:var(--cyan-bright); font-weight:700;
}
.app .side .navitem .lbl{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.app .side-foot .navitem{font-size:.72rem; letter-spacing:.08em; color:var(--faint)}