/* ═══ Meadow Panel Shell (Redesign 2026) — Icon-Rail + Flyout + Topbar ═══
   Additiv/entfernbar: nur aktiv wenn body.md-shell (von shell.js gesetzt). */

body.md-shell .sidebar { display: none !important; }
body.md-shell .mobile-topbar { display: none !important; }

/* ── Icon-Rail (68px) ── */
.md-rail {
  position: fixed; top: 0; left: 0; bottom: 0; width: 68px; z-index: 120;
  background: #0c0d0f; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; padding: 12px 0 14px;
}
.md-rail-logo { display: block; margin-bottom: 10px; cursor: pointer; }
.md-rail-logo img { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; box-shadow: 0 0 0 1px var(--border); }
.md-rail-items { flex: 1; display: flex; flex-direction: column; gap: 4px; align-items: center; width: 100%; overflow-y: auto; scrollbar-width: none; }
.md-rail-items::-webkit-scrollbar { display: none; }
.md-rail-item {
  position: relative; width: 44px; height: 44px; border: none; background: transparent;
  color: var(--muted2); border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.md-rail-item svg { width: 21px; height: 21px; }
.md-rail-item:hover { background: var(--surface2); color: var(--text); }
.md-rail-item.active { background: var(--accent-dim); color: var(--success); }
.md-rail-item.active::before { content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 3px; height: 22px; border-radius: 3px; background: var(--success); box-shadow: 0 0 10px var(--accent-glow); }
.md-rail-tip {
  position: fixed; left: 74px; transform: translateY(-50%) translateX(-6px);
  background: var(--surface3); color: var(--text); border: 1px solid var(--border2); border-radius: 8px;
  padding: 6px 11px; font-size: .8rem; white-space: nowrap; pointer-events: none; opacity: 0; z-index: 130;
  transition: opacity .13s, transform .13s; box-shadow: 0 8px 20px rgba(0,0,0,.5);
}
.md-rail-item:hover .md-rail-tip { opacity: 1; transform: translateY(-50%) translateX(0); }
.md-rail-logout { width: 44px; height: 44px; margin-top: 6px; border: none; background: transparent; color: var(--muted); border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.md-rail-logout svg { width: 20px; height: 20px; }
.md-rail-logout:hover { background: var(--error-bg); color: var(--error); }

/* ── Flyout-Nav (238px) ── */
.md-flyout {
  position: fixed; top: 0; left: 68px; bottom: 0; width: 238px; z-index: 110;
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  /* Breiten-Transition gehört hierher (nicht ans Ende der Datei): die 900px-Media-Query
     ersetzt sie unten durch transform .22s — auf dem Handy klappt nichts ein, dort
     schiebt sich der Drawer. Andersherum würde der Drawer seine Animation verlieren. */
  transition: width .18s ease;
}
.md-flyout-head { padding: 16px 16px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.md-flyout-title { display: block; font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 12px; }
.md-flyout-head .sidebar-search { margin: 0; }
.md-flyout-body { flex: 1; overflow-y: auto; padding: 10px 10px 16px; scrollbar-width: thin; }
.md-fly-group { display: none; flex-direction: column; gap: 3px; animation: mdFly .16s ease; }
.md-fly-group.active { display: flex; }
@keyframes mdFly { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
/* Nav-Items im Flyout — nutzen die bestehenden .nav-item Styles; Collapse-Chevrons ausblenden */
.md-fly-group .nav-chevron { display: none !important; }
.md-fly-group .nav-item.nav-hidden-collapse { display: flex !important; }

/* ── Layout / Main ── */
body.md-shell .main { margin-left: 306px; padding-top: 0; }

/* ── Topbar ── */
.md-topbar {
  position: sticky; top: 0; z-index: 60; margin: 0 -32px 22px; padding: 0 32px;
  height: 58px; display: flex; align-items: center; gap: 14px;
  background: rgba(10,10,11,.82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border);
}
.md-burger { display: none; width: 38px; height: 38px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); border-radius: 10px; cursor: pointer; align-items: center; justify-content: center; }
.md-burger svg { width: 18px; height: 18px; }
.md-crumb { display: flex; align-items: center; gap: 8px; font-size: .92rem; min-width: 0; }
.md-crumb-root { color: var(--muted2); font-weight: 600; }
.md-crumb-sep { color: var(--muted); }
.md-crumb-page { color: var(--text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
/* Bot-Switcher in der Topbar kompakt */
.md-top-right #bot-switcher { position: relative; display: flex; align-items: center; gap: 9px; padding: 7px 11px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; margin: 0; }
.md-top-right #bot-switcher img { width: 24px; height: 24px; border-radius: 7px; }
.md-top-right #bot-switcher .sidebar-logo-sub { display: none; }

/* Profil-Menü oben rechts */
.md-profile { position: relative; display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 5px; background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; user-select: none; transition: border-color .15s, background .15s; }
.md-profile:hover { border-color: var(--border2); background: var(--surface3); }
.md-profile-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--border2); }
.md-profile-name { font-size: .86rem; font-weight: 600; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-profile-caret { color: var(--muted); font-size: .7rem; }
.md-profile-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; background: var(--surface2); border: 1px solid var(--border2); border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.55); padding: 6px; display: none; z-index: 200; }
.md-profile-menu.open { display: block; animation: mdFly .14s ease; }
.md-pm-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px; font-size: .87rem; color: var(--muted2); cursor: pointer; }
.md-pm-item span { width: 18px; text-align: center; }
.md-pm-item:hover { background: var(--surface3); color: var(--text); }
.md-pm-sep { height: 1px; background: var(--border); margin: 5px 4px; }
.md-pm-logout { color: #fca5a5; }
.md-pm-logout:hover { background: var(--error-bg); color: var(--error); }

/* ── Dashboard-Hero + Stats-Ticker (Mockup-Look) ── */
.db-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.db-hero-badge { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--success); background: var(--accent-dim); border: 1px solid rgba(46,224,67,.28); border-radius: 999px; padding: 4px 12px; margin-bottom: 12px; }
.db-hero-title { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.db-hero .sub { margin-top: 8px; }
.db-backup-pill { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; background: #f2f3f2; color: #0a0a0b; border: none; border-radius: 999px; padding: 11px 20px; font-size: .9rem; font-weight: 700; cursor: pointer; font-family: inherit; box-shadow: 0 6px 20px -8px rgba(0,0,0,.6); transition: transform .1s, box-shadow .18s, filter .15s; }
.db-backup-pill:hover { filter: brightness(.95); box-shadow: 0 10px 26px -10px rgba(0,0,0,.7); }
.db-backup-pill:active { transform: translateY(1px); }
.db-ticker { overflow: hidden; margin-bottom: 22px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 11px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.db-ticker-track { display: inline-flex; gap: 30px; white-space: nowrap; font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted2); animation: dbTick 34s linear infinite; }
.db-ticker-track span b { color: var(--text); }
.db-ticker-track span i { color: var(--success); font-style: normal; }
.db-ticker-track .dbt-dot { color: var(--muted); }
.db-ticker:hover .db-ticker-track { animation-play-state: paused; }
@keyframes dbTick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Kennzahl-Karten im Mockup-Stil (große Zahlen, klare Labels) */
#page-dashboard .stats-grid { gap: 14px; }
#page-dashboard .stat-card { flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px 18px; min-height: 116px; justify-content: space-between; }
#page-dashboard .stat-card .si { font-size: 1.2rem; opacity: .8; order: 2; }
#page-dashboard .stat-card .sv { font-size: 2.3rem; font-weight: 800; letter-spacing: -.02em; }
#page-dashboard .stat-card .sl { order: -1; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }

/* ── Responsive: Rail + Flyout als Overlay-Drawer ── */
@media (max-width: 900px) {
  body.md-shell .main { --md-mobile-gutter: clamp(18px, 5vw, 24px); }

  /* Burger ist auf dem Handy der einzige Weg in die Navigation. Er lag als schrumpfbares
     Flex-Item neben dem nicht-schrumpfbaren Bot-Switcher und wurde auf 20px gequetscht
     → feste 44px Touch-Fläche, darf nie schrumpfen. */
  .md-burger { display: flex; flex: 0 0 44px; width: 44px; height: 44px; }

  /* Rail komplett raus (left:0 → -68px reicht). Der Flyout startet aber bei left:68px,
     deshalb schiebt translateX(-100%) = -238px ihn nur bis x=-170…+68 — es blieben
     dauerhaft 68px opake Fläche über dem Seiteninhalt liegen (der schwarze Streifen,
     der die Überschriften verdeckt hat). -100% minus die 68px Rail-Breite räumt ihn weg. */
  .md-rail {
    width: calc(68px + env(safe-area-inset-left, 0px));
    height: 100dvh; top: 0; bottom: auto;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 0 calc(16px + env(safe-area-inset-bottom, 0px)) env(safe-area-inset-left, 0px);
    transform: translateX(-100%); transition: transform .22s;
  }
  .md-flyout {
    left: calc(68px + env(safe-area-inset-left, 0px));
    width: 238px; max-width: calc(100vw - 68px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 16px);
    height: 100dvh; top: 0; bottom: auto;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateX(calc(-100% - 68px - env(safe-area-inset-left, 0px)));
    transition: transform .22s;
    overscroll-behavior: contain;
  }
  body.md-drawer .md-rail, body.md-drawer .md-flyout { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.6); }

  /* Offener Drawer: vorhandenes Backdrop (index.html:33, z-index 95 < Rail/Flyout)
     wiederverwenden — dimmt den Inhalt und fängt „daneben tippen" ab; der
     document-Click-Handler in shell.js schließt den Drawer dann. */
  body.md-drawer .sidebar-backdrop { display: block; }
  /* Hintergrund darf bei offener Navigation nicht mitscrollen. iOS-Safari braucht das
     zusätzlich auf <html>, sonst scrollt das Dokument trotz overflow:hidden am body.
     Bewusst zwei getrennte Regeln: ein Browser ohne :has() würde sonst die ganze
     Selektor-Liste verwerfen und auch die body-Regel verlieren. */
  body.md-drawer { overflow: hidden; }
  html:has(body.md-drawer) { overflow: hidden; }

  /* Diese Regel hat bisher die komplette Safe-Area aus style.css:569 überschrieben
     (padding wurde zu „0 18px 40px") → Inhalt lief in Notch und Home-Indicator. */
  body.md-shell .main {
    margin-left: 0;
    width: 100%; max-width: 100%;
    padding-left: calc(var(--md-mobile-gutter) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--md-mobile-gutter) + env(safe-area-inset-right, 0px));
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }

  /* Topbar sitzt sticky am oberen Rand → sie selbst bekommt das Top-Inset, damit ihr
     Hintergrund unter der Statusleiste/Notch liegt und nicht der Inhalt. Negative
     Margins spiegeln das Padding von .main, damit die Trennlinie randlos bleibt. */
  .md-topbar {
    width: 100vw; min-width: 100vw; max-width: 100vw;
    margin: 0 0 22px calc(0px - var(--md-mobile-gutter) - env(safe-area-inset-left, 0px));
    padding: calc(8px + env(safe-area-inset-top, 0px)) calc(var(--md-mobile-gutter) + env(safe-area-inset-right, 0px)) 8px calc(var(--md-mobile-gutter) + env(safe-area-inset-left, 0px));
    height: auto; min-height: calc(60px + env(safe-area-inset-top, 0px)); gap: 10px;
  }
  /* #bot-switcher trägt die Klasse .sidebar-logo und erbt daraus flex-shrink:0
     (style.css:83). shell.js hängt ihn zur Laufzeit in die Topbar → die Zeile konnte
     nicht schrumpfen, wurde 437px breit und hat das ganze Dokument über die
     Bildschirmbreite gedehnt. Hier alles schrumpfbar machen, Text mit Ellipsis. */
  .md-crumb { flex: 0 1 auto; min-width: 0; }
  .md-top-right { min-width: 0; gap: 8px; }
  .md-top-right #bot-switcher { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .md-top-right #bot-switcher .sidebar-logo-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .md-profile { flex: 0 0 auto; }   /* Profilbild bleibt immer erreichbar */
}

/* ── iPhone-Breite: in der Topbar bleibt nur das Nötigste ── */
@media (max-width: 560px) {
  /* 375px tragen Burger + Seitenname + Bot-Logo + Avatar — mehr nicht. Sektion und
     Trenner der Breadcrumb sowie die beiden Namenstexte fallen weg statt zu quetschen. */
  .md-crumb-root, .md-crumb-sep, .md-crumb-mid { display: none; }
  .md-top-right #bot-switcher .sidebar-logo-txt { display: none; }
  .md-profile-name, .md-profile-caret { display: none; }
  .md-profile { padding: 4px; }
  .md-top-right #bot-switcher { padding: 6px; }
}

/* Auf sehr schmalen Ansichten bleibt die Seitenüberschrift direkt im Inhalt sichtbar.
   In der Topbar hat dadurch jedes Bedienelement weiterhin eine echte 44px-Touchfläche. */
@media (max-width: 340px) {
  .md-crumb { display: none; }
  .md-top-right { margin-left: auto; }
  .md-flyout .ss-kbd { display: none; }
}

/* ── Feature-Map Vollbild: Navbar (Rail + Flyout + Topbar) ausblenden ── */
body.fmap-full .md-rail, body.fmap-full .md-flyout, body.fmap-full .md-topbar { display: none !important; }
body.fmap-full .sidebar, body.fmap-full .mobile-topbar { display: none !important; }
body.fmap-full .main { margin-left: 0 !important; padding: 14px 18px !important; }
body.fmap-full #fmap-burger { display: flex !important; }
/* Hintergrund durchgängig: Body-Muster (grüner Radial-Verlauf) läuft über die ganze Seite,
   die Map liegt ohne eigene Karten-Fläche direkt darauf */
body.fmap-full { background-attachment: fixed; }

/* ── Monochrome Item-Icons (Flyout-Nav), Such-Emoji raus, Breadcrumb klickbar ── */
/* Früher stand hier display:none — damals waren die .ni noch Emojis. Jetzt liefert
   shell.js monochrome SVGs; die müssen sichtbar bleiben, denn eingeklappt (siehe B)
   sind sie das einzige Erkennungsmerkmal eines Items. */
.md-fly-group .nav-item .ni { display: inline-flex; align-items: center; justify-content: center; width: 18px; flex: none; }
.md-fly-group .nav-item .ni svg { width: 16px; height: 16px; }
.md-fly-group .nav-item { gap: 9px; }
.md-flyout .sidebar-search > span { display: none; }
.md-crumb-root, .md-crumb-page { cursor: pointer; transition: color .15s; }
.md-crumb-root:hover { color: var(--text); }
.md-crumb-page:hover { color: var(--success); }


/* ═══════════════════════════════════════════════════════════════════════════
   A) UNTERGRUPPEN-ÜBERSCHRIFTEN  <div class="nav-sub">Name</div>
   Sektionen wie „Tickets" sind zu einer 15-Zeilen-Wand gewachsen. Die Zwischen-
   Überschrift zerlegt sie in lesbare Blöcke. Der Trennstrich sitzt bewusst OBEN
   (border-top): so gehört die Linie optisch zum neuen Block darunter und trennt
   ihn vom vorherigen — ein border-bottom würde die Überschrift von ihren eigenen
   Items abschneiden.
   Absichtlich OHNE body.md-shell davor: die Untergruppen stehen genauso in der
   alten Sidebar (Fallback, wenn shell.js nicht baut) und sollen dort gleich aussehen.
   ═══════════════════════════════════════════════════════════════════════════ */
.nav-sub {
  font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); user-select: none;
  border-top: 1px solid var(--border);
  margin-top: 12px; margin-bottom: 4px;
  padding-top: 10px; padding-left: 12px;
}
/* Steht die Untergruppe ganz oben in einer Sektion, wäre der Strich ein Doppel-
   Trenner direkt unter der Kopf-Border des Flyouts → oben nichts, nur Mini-Abstand. */
.md-fly-group .nav-sub:first-child { border-top: 0; margin-top: 2px; padding-top: 0; }


/* ═══════════════════════════════════════════════════════════════════════════
   B) EIN-/AUSKLAPPBARE NAVIGATION   (body.md-nav-collapsed von shell.js)
   Wunsch: mehr Platz für den Inhalt, ohne die Navigation zu verlieren. Eingeklappt
   bleibt vom Flyout nur die Icon-Spalte (62px), der Name kommt als Tooltip.
   ALLE Regeln hängen an body.md-nav-collapsed → der ausgeklappte Zustand ist
   unverändert der heutige. Kein Umbau, reine Zusatz-Schicht.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Toggle-Button im Flyout-Kopf ──
   Absolut positioniert statt in den Fluss gehängt: shell.js darf ihn irgendwo im
   .md-flyout-head einhängen, der bestehende Kopf-Aufbau (Titel + Suche) verschiebt
   sich dadurch nicht. */
.md-flyout-head { position: relative; }
.md-flyout-title { padding-right: 36px; }   /* Sektionsname läuft nicht unter den Button */
.md-nav-toggle {
  position: absolute; top: 11px; right: 12px;
  width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 8px;
  color: var(--muted2); cursor: pointer; font-family: inherit;
  transition: background .15s, color .15s;
}
.md-nav-toggle:hover { background: var(--surface2); color: var(--text); }
.md-nav-toggle svg { width: 18px; height: 18px; transition: transform .18s; }
/* Eingeklappt zeigt der Doppel-Chevron nach RECHTS (= wieder ausklappen) — ohne die Drehung
   wäre der einzige verbliebene Bedienknopf das falsche Signal. */
body.md-nav-collapsed .md-nav-toggle svg { transform: rotate(180deg); }

/* ── Eingeklappt: Geometrie ── */
body.md-nav-collapsed .md-flyout { width: 62px; }
/* 68px Rail + 62px Flyout. Höhere Spezifität als body.md-shell .main (306px) nötig. */
body.md-shell.md-nav-collapsed .main { margin-left: 130px; }

/* Kopf: Titel und Suche passen nicht in 62px → weg, der Toggle rutscht in die Mitte. */
body.md-nav-collapsed .md-flyout-title,
body.md-nav-collapsed .md-flyout .sidebar-search { display: none; }
body.md-nav-collapsed .md-flyout-head { padding: 12px 8px 10px; }
body.md-nav-collapsed .md-nav-toggle { position: static; margin: 0 auto; }

/* ── Eingeklappt: Items zeigen nur noch ihr Icon ──
   Der Label-Text ist ein blanker Textknoten neben <span class="ni">, also per Selektor
   nicht greifbar. font-size:0 am Item lässt ihn kollabieren, das Icon holt sich seine
   Größe über .ni wieder zurück. */
body.md-nav-collapsed .md-fly-group .nav-item {
  position: relative;             /* Anker für den Tooltip unten */
  justify-content: center; gap: 0;
  padding-left: 0; padding-right: 0;
  font-size: 0;
}
body.md-nav-collapsed .md-fly-group .nav-item .ni { font-size: 1rem; }

/* Untergruppen-Überschrift ohne Platz für Text → nur der Strich bleibt, damit die
   Blockbildung auch eingeklappt sichtbar ist. */
body.md-nav-collapsed .md-fly-group .nav-sub {
  font-size: 0; padding: 0; height: 0;
  margin: 10px 8px;
  border-top: 1px solid var(--border);
}
/* Erste Untergruppe: kein Strich direkt unter der Kopf-Border (siehe A). Diese Regel
   muss hier wiederholt werden, weil die Collapsed-Regel darüber spezifischer ist. */
body.md-nav-collapsed .md-fly-group .nav-sub:first-child { border-top: 0; margin-top: 0; }

/* ── Eingeklappt: Tooltip mit dem Item-Namen ──
   shell.js setzt data-tip auf jedes nav-item; ::after spart einen Extra-DOM-Knoten
   (analog .md-rail-tip an der Rail, nur position:absolute statt fixed). */
body.md-nav-collapsed .md-fly-group .nav-item[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 100%; top: 50%;
  transform: translateY(-50%) translateX(-6px);
  margin-left: 12px;              /* Item endet bei 52px, Flyout-Kante bei 62px → 2px Luft */
  background: var(--surface3); color: var(--text);
  border: 1px solid var(--border2); border-radius: 8px;
  padding: 6px 11px; font-size: .8rem; font-weight: 500; letter-spacing: normal;
  white-space: nowrap; pointer-events: none; opacity: 0; z-index: 130;
  box-shadow: 0 8px 20px rgba(0,0,0,.5);
  transition: opacity .13s, transform .13s;
}
body.md-nav-collapsed .md-fly-group .nav-item[data-tip]:hover::after {
  opacity: 1; transform: translateY(-50%) translateX(0);
}

/* ── Konflikt Tooltip ↔ Scrollen ──
   CSS kann auf einer Box nicht gleichzeitig y=scroll und x=visible: sobald eine Achse
   scrollt, wird die andere auf auto hochgestuft und schneidet ab. „overflow: visible"
   am Flyout würde also den Tooltip retten, aber lange Sektionen unscrollbar unter den
   Bildschirmrand schieben.
   Lösung ohne beide Nachteile: der Scroll-Container bleibt, wird aber breiter gemacht
   als der sichtbare Flyout — die 198px Überhang sind transparent und liegen dank
   pointer-events:none nur optisch über dem Inhalt. Der Tooltip hat damit Platz INNERHALB
   des Clips, das Scrollen bleibt erhalten.
   ponytail: Deckel bei ~198px Tooltip-Breite (≈28 Zeichen); längere Labels werden
   abgeschnitten. Dann Tooltip per JS auf position:fixed umstellen wie .md-rail-tip. */
body.md-nav-collapsed .md-flyout-body {
  width: 260px;                       /* 62px sichtbar + 198px Luft für den Tooltip */
  overflow-x: hidden; overflow-y: auto;
  scrollbar-width: none;              /* Scrollleiste läge mitten im Inhalt */
  pointer-events: none;               /* Klicks fallen durch die transparente Luft */
}
body.md-nav-collapsed .md-flyout-body::-webkit-scrollbar { display: none; }
body.md-nav-collapsed .md-fly-group { width: 42px; pointer-events: auto; }  /* 62 − 2×10 Body-Padding */


/* ═══════════════════════════════════════════════════════════════════════════
   C) DRITTE BREADCRUMB-STUFE  (Sektion / Untergruppe / Seite)
   shell.js blendet die mittlere Stufe über das hidden-Attribut aus. .md-crumb ist ein
   Flex-Container — Flex-Items bekommen einen blockifizierten display-Wert, weshalb das
   display:none aus dem UA-Stylesheet für [hidden] in manchen Browsern untergeht.
   Deshalb hier ausdrücklich.
   ═══════════════════════════════════════════════════════════════════════════ */
.md-crumb [hidden] { display: none !important; }
/* Nur die letzte Stufe ist klickbar; die Untergruppe ist reine Ortsangabe. */
.md-crumb-mid { color: var(--muted2); font-weight: 600; cursor: default; }
/* Drei Stufen können lang werden („Mitglieder & Zugang / OAuth-Anwendung / Dashboard").
   Zwischen ~900 und ~1150px darf NUR der Seitenname schrumpfen/ellipsieren — Wurzel und
   Untergruppe brechen sonst zweizeilig aus der 58px-Topbar aus. */
.md-crumb-root, .md-crumb-mid, .md-crumb-sep { white-space: nowrap; flex: 0 0 auto; }
.md-crumb-page { flex: 0 1 auto; }


/* ═══════════════════════════════════════════════════════════════════════════
   D) RESPONSIVE — unter 900px gibt es kein „eingeklappt"
   Dort ist der Flyout ein Overlay-Drawer: Platz sparen bringt nichts (er liegt sowieso
   über dem Inhalt) und Icon-only wäre auf dem Handy nur schwerer zu treffen. Also alles
   aus B) hier wieder zurücknehmen — inklusive font-size:0.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  body.md-shell.md-nav-collapsed .main { margin-left: 0; }
  body.md-nav-collapsed .md-flyout { width: 238px; }

  .md-nav-toggle { display: none; }   /* im Drawer ohne Funktion */
  body.md-nav-collapsed .md-flyout-head { padding: 16px 16px 10px; }
  body.md-nav-collapsed .md-flyout-title { display: block; }
  body.md-nav-collapsed .md-flyout .sidebar-search { display: flex; }

  body.md-nav-collapsed .md-flyout-body {
    width: auto; overflow-x: hidden; overflow-y: auto;
    scrollbar-width: thin; pointer-events: auto;
  }
  body.md-nav-collapsed .md-fly-group { width: auto; pointer-events: auto; }

  body.md-nav-collapsed .md-fly-group .nav-item {
    font-size: .9rem; justify-content: flex-start; gap: 9px;
    padding-left: 12px; padding-right: 12px;
  }
  body.md-nav-collapsed .md-fly-group .nav-item[data-tip]::after { content: none; }

  body.md-nav-collapsed .md-fly-group .nav-sub {
    font-size: .68rem; height: auto;
    margin: 12px 0 4px; padding-top: 10px; padding-left: 12px;
    border-top: 1px solid var(--border);
  }
  body.md-nav-collapsed .md-fly-group .nav-sub:first-child { border-top: 0; margin-top: 2px; padding-top: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   E) AUSFAHRBARE HAUPT-RAIL  (body.md-rail-expanded von shell.js)
   Gegenstück zum Flyout-Einklappen: die linke Icon-Spalte fährt auf 200px aus
   und zeigt Icon + Sektionsname. Die Labels sind die VORHANDENEN Tooltip-Spans
   (.md-rail-tip) — ausgefahren werden sie einfach als Inline-Text gestylt,
   dadurch braucht es kein zweites Markup und keine JS-Umbauten.
   Alle vier Kombinationen aus Rail (68/200) × Flyout (238/62) sind abgedeckt.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Toggle sitzt zwischen Items und Logout; Chevron zeigt nach RECHTS (= ausfahren)
   und dreht sich ausgefahren um 180°. */
.md-rail-toggle {
  width: 44px; height: 38px; margin-top: 4px; padding: 0; border: none;
  background: transparent; color: var(--muted); border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.md-rail-toggle:hover { background: var(--surface2); color: var(--text); }
.md-rail-toggle svg { width: 17px; height: 17px; transition: transform .18s; }
body.md-rail-expanded .md-rail-toggle svg { transform: rotate(180deg); }

/* Geometrie: Rail breiter, Flyout rückt nach, Inhalt rückt nach. Die Breite
   animiert; die Spezifität steigt mit jeder Kombination (0,2,1 → 0,4,1). */
.md-rail { transition: width .18s ease; }
.md-flyout { transition: left .18s ease, width .18s ease; }
body.md-rail-expanded .md-rail { width: 200px; align-items: stretch; }
body.md-rail-expanded .md-flyout { left: 200px; }
body.md-shell.md-rail-expanded .main { margin-left: 438px; }                     /* 200 + 238 */
body.md-shell.md-rail-expanded.md-nav-collapsed .main { margin-left: 262px; }    /* 200 + 62  */

/* Items werden Zeilen: Icon links, Label daneben. Der Aktiv-Balken rückt an die Kante. */
body.md-rail-expanded .md-rail-items { align-items: stretch; padding: 0 10px; }
body.md-rail-expanded .md-rail-item { width: 100%; justify-content: flex-start; gap: 11px; padding: 0 12px; }
body.md-rail-expanded .md-rail-item.active::before { left: -10px; }
body.md-rail-expanded .md-rail-logo { padding-left: 15px; }

/* Tooltip-Span → Inline-Label: Position, Kasten und Hover-Logik der Tooltip-Optik
   komplett neutralisieren. Der mouseenter-Handler setzt nur style.top — wirkungslos
   bei position:static, deshalb kollidiert er nicht. */
body.md-rail-expanded .md-rail-tip {
  position: static; transform: none; opacity: 1;
  background: transparent; border: none; box-shadow: none; padding: 0;
  font-size: .86rem; font-weight: 600; color: inherit;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Toggle + Logout in der ausgefahrenen Rail linksbündig; Logout bekommt sein Label. */
body.md-rail-expanded .md-rail-toggle,
body.md-rail-expanded .md-rail-logout { width: auto; margin-left: 10px; margin-right: 10px; justify-content: flex-start; padding: 0 12px; gap: 11px; }
body.md-rail-expanded .md-rail-logout::after { content: "Ausloggen"; font-size: .86rem; font-weight: 600; }

/* Mobil (<=900px) ist die Rail ein Overlay-Drawer mit fixen 68px — ausgefahren
   wäre sie zusammen mit dem Flyout breiter als der Bildschirm. Neutralisieren. */
@media (max-width: 900px) {
  body.md-rail-expanded .md-rail { width: calc(68px + env(safe-area-inset-left, 0px)); align-items: center; }
  body.md-rail-expanded .md-flyout { left: calc(68px + env(safe-area-inset-left, 0px)); }
  body.md-shell.md-rail-expanded .main,
  body.md-shell.md-rail-expanded.md-nav-collapsed .main { margin-left: 0; }
  .md-rail-toggle { display: none; }
  body.md-rail-expanded .md-rail-items { align-items: center; padding: 0; }
  body.md-rail-expanded .md-rail-item { width: 44px; justify-content: center; padding: 0; gap: 0; }
  body.md-rail-expanded .md-rail-logout { width: 44px; margin: 6px 0 0; justify-content: center; padding: 0; gap: 0; }
  body.md-rail-expanded .md-rail-logout::after { content: none; }
  body.md-rail-expanded .md-rail-tip {
    position: fixed; opacity: 0; background: var(--surface3); border: 1px solid var(--border2);
    padding: 6px 11px; box-shadow: 0 8px 20px rgba(0,0,0,.5);
  }
}