/* style-nav – wird von views/partials/head.ejs geladen
   ============================================================
   Navigation nach dem Vorbild Datasite:
     · Hauptnavigation oben mit Strichsymbolen
     · schmale Leiste am linken Rand (Symbol über der Beschriftung)
     · Pfadanzeige unterhalb der Hauptnavigation
     · Verwaltung als Kachelseite
   Farben ausschliesslich aus den vorhandenen Variablen.
   ============================================================ */

:root {
  --side-w: 96px;          /* Breite der linken Leiste */
  --topbar-h: 64px;        /* Höhe der Topleiste (wie in style.css) */
}

/* ---------- Kopfzeile: IHC-Logo führend, Mandantenlogo daneben ----------
   Das Logo der IHC - Invest in Healthcare GmbH steht immer ganz links, in
   voller Größe. Das Mandantenlogo des Datenraums tritt daneben, durch einen
   senkrechten Strich abgesetzt, kleiner und mit zurückgenommener Deckkraft
   (Grundregeln in style.css: .co-brand, .co-sep, .co-logo).

   Zwei Regeln sichern das ab:
     · .brand darf nie schrumpfen – sonst quetscht die Hauptnavigation das
       IHC-Logo zusammen, sobald die Zeile eng wird.
     · Wird die Zeile zu eng, weicht das Mandantenlogo, niemals das IHC-Logo.
       Zwischen 961 px und 1539 px belegen Hauptnavigation, Sprache und
       Nutzerbereich die Zeile vollständig; dort würde das Mandantenlogo den
       Zugang zu Konto und Abmeldung aus dem Bild schieben. Unterhalb von 961 px greift
       das Burger-Menü, die Zeile ist wieder frei – dort erscheint es erneut,
       bis es bei 720 px endgültig weicht (style.css). */
.topbar .brand { flex: 0 0 auto; }
.topbar .co-brand { flex: 0 0 auto; }
/* Wird die Zeile eng, gibt das Mandantenlogo nach – der Trennstrich nicht.
   Ohne „flex: 0 0 1px" ist der ein Pixel breite Strich das Erste, was das
   Layout wegkürzt, und die Abgrenzung verschwindet unbemerkt.
   Der Strich in --soft ist auf Weiß kaum zu sehen; in --line trennt er
   erkennbar, ohne sich in den Vordergrund zu drängen. */
.topbar .co-brand .co-sep { flex: 0 0 1px; height: 26px; background: var(--line); }
.topbar .co-brand .co-logo { flex: 0 0 auto; object-fit: contain; object-position: left center; }
/* Entweder ganz oder gar nicht: Ein auf 60 px zusammengedrücktes Mandantenlogo
   ist keine Ergänzung, sondern ein Fehler im Bild.

   Die Grenze lag bei 1480 px. Mit dem Sprachumschalter, der zurück in die Zeile
   gewandert ist, trägt sie nicht mehr: Nachgemessen braucht die Kopfzeile mit
   Mandantenlogo jetzt 1511 px (1322 px ohne Logo, dazu 150 px Logo, 1 px
   Trennstrich und 38 px Abstände) — bei 1480 px lief sie über. Die Grenze
   wandert deshalb auf 1540 px; das sind 29 px Luft für den breitest möglichen
   Fall (die Logobreite ist in style.css auf 150 px gedeckelt).

   Darunter entfällt das Mandantenlogo und das IHC-Logo steht allein – ersetzt
   wird es nie. Unterhalb von 961 px greift das Burger-Menü, die Zeile ist
   wieder frei: dort erscheint es erneut, bis es bei 720 px endgültig weicht
   (style.css). */
@media (min-width: 961px) and (max-width: 1539px) {
  .topbar .co-brand { display: none; }
}

/* ---------- Hauptnavigation: Symbol + Beschriftung ---------- */
.topbar .mainnav { align-items: center; }
.topbar .mainnav a,
.topbar .mainnav summary {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px;
}
.topbar .mainnav svg { flex: 0 0 auto; display: block; }
.topbar .mainnav a > span { white-space: nowrap; }

/* Aufklappbares Menü – Grundlage ist <details>, also auch ohne Javascript nutzbar */
.navmenu { position: relative; }
.navmenu > summary {
  list-style: none; cursor: pointer; border-radius: var(--radius-sm);
  font-size: 14.5px; font-weight: 500; color: var(--ink); line-height: 1.4;
  white-space: nowrap;
}
.navmenu > summary::-webkit-details-marker { display: none; }
.navmenu > summary::marker { content: ''; }
.navmenu > summary:hover { background: var(--bg); color: var(--navy); }
.navmenu > summary.active { background: var(--rose-bg); color: var(--red); }
.navmenu[open] > summary { background: var(--bg); color: var(--navy); }
.navmenu-caret { display: inline-flex; color: var(--slate); }
.navmenu[open] .navmenu-caret { transform: rotate(180deg); }
.navmenu-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 70; min-width: 244px;
  background: #fff; border: 1px solid var(--soft); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: 6px;
}
/* Auswahlschärfe bewusst hoch: sonst greift .topbar .mainnav a von oben */
.topbar .mainnav .navmenu-panel a {
  display: block; padding: 9px 12px; border-radius: 6px;
  font-size: 14px; font-weight: 400; color: var(--ink); white-space: normal;
}
.topbar .mainnav .navmenu-panel a:hover { background: var(--bg); color: var(--navy); }

/* ---------------------------------------------------------------------------
   Rechte Seite der Kopfzeile: Sprache, dann Person
   ---------------------------------------------------------------------------
   .topbar-end fasst beides zusammen und hält damit die Reihenfolge fest, die
   der Betreiber angefordert hat: der Sprachumschalter unmittelbar LINKS neben
   dem Profilbereich.

   Der Abstand ist hier bewusst enger als die 20 px aus style.css. Sprache und
   Profil gehören zusammen und sollen als ein Block gegen die Hauptnavigation
   stehen; nebenbei ist es genau die Breite, die die Zeile zwischen 1100 px und
   1249 px noch vollständig stehen lässt (Rechnung weiter unten).
   --------------------------------------------------------------------------- */
.topbar .topbar-end { gap: 12px; }

/* Der Umschalter selbst darf nie schrumpfen: „DE · EN" auf „DE · E…" gekürzt
   wäre schlimmer als gar keine Anzeige. Wird es eng, gibt die Zeile an anderer
   Stelle nach (Stufen weiter unten) – hier nicht.
   Die Grundgestalt (.lang-switch) steht in style.css und gilt auch auf der
   Anmeldeseite; hier stehen nur die Abweichungen für die Kopfzeile. */
.topbar .topbar-lang { flex: 0 0 auto; gap: 4px; }
.topbar .topbar-lang a { padding: 4px 7px; font-size: 12.5px; }
/* Tastaturbedienung sichtbar machen – wie beim Benutzermenü daneben. */
.topbar .topbar-lang a:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
/* Der Trennpunkt ist Zierde. Ohne feste Breite schrumpft er als erstes weg. */
.topbar .topbar-lang > span { flex: 0 0 auto; color: var(--line); }

/* ---------------------------------------------------------------------------
   Angemeldete Person: Klappmenü am Personensymbol
   ---------------------------------------------------------------------------
   Früher standen hier Symbol, Name, Rolle und die Verweise „Mein Zugang ·
   Abmelden" als Text nebeneinander. Jetzt öffnet ein Klick auf Bild oder Name
   ein Menü mit Mein Zugang und Abmelden.

   Grundlage ist <details>/<summary> – auch ohne Javascript zu öffnen.

   Die Sprache stand eine Runde lang in diesem Menü. Sie ist zurück in die
   Zeile gewandert (.topbar-lang oben): Sie wird im Vorbeigehen umgeschaltet,
   und ein Klappmenü ist dafür ein Klick zu viel. Sie steht deshalb nur noch an
   einer Stelle – zwei Wege für dieselbe Einstellung wären wieder die Dopplung,
   die hier gerade beseitigt wurde.

   Diese Regeln stehen hier und nicht in style.css: Die Topleiste wird in
   dieser Datei gestaltet, und sie wird als zweite geladen. Eine gleich scharfe
   Regel in style.css würde von den Regeln hier wieder überschrieben.
   --------------------------------------------------------------------------- */
.usermenu { position: relative; flex: 0 0 auto; }
/* Auswahlschärfe bewusst hoch: sonst greift `.topbar .who` aus style.css. */
.topbar .usermenu > summary.who {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 8px 5px 5px; border-radius: 999px;
  cursor: pointer; list-style: none; white-space: nowrap;
}
.topbar .usermenu > summary.who::-webkit-details-marker { display: none; }
.topbar .usermenu > summary.who::marker { content: ''; }
.topbar .usermenu > summary.who:hover { background: var(--bg); }
.topbar .usermenu[open] > summary.who { background: var(--bg); }
/* Tastaturbedienung sichtbar machen – ohne Rahmen wüsste niemand, wo er steht. */
.topbar .usermenu > summary.who:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.topbar .who-icon { display: flex; color: var(--slate); flex: 0 0 auto; }
.topbar .who-text { display: block; min-width: 0; }
/* Der Name ist in der Breite gedeckelt. Ein sehr langer Name („Dr. Maria
   Charlotte von Hohenstein-Rothenburg") schöbe die Zeile sonst auch auf einem
   breiten Bildschirm über den Rand. Vollständig steht er im Menü darunter –
   dort ist Platz. */
.topbar .who-text b {
  color: var(--navy); font-weight: 500; font-size: 14px; display: block;
  max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar .who-caret { display: flex; color: var(--grey); flex: 0 0 auto; line-height: 0; }
.topbar .who-caret svg { display: block; }
.topbar .usermenu[open] .who-caret { transform: rotate(180deg); }

/* ---------- Profilbild bzw. Initialen ---------- */
/* Beides ist genau 30 × 30 Punkte groß und rund. Die feste Größe steht auch
   im HTML (width/height am <img>) – ohne Stylesheet liefe es sonst in
   Originalgröße auf. */
.topbar .who-bild {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  display: block; background: var(--soft);
}
.topbar .who-kuerzel {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .3px;
}

/* Acht feste Farbtöne für die Initialen. Bewusst als Klassen und nicht als
   gerechneter Farbwert im HTML: Nur so ist der Kontrast zur weißen Schrift
   an einer Stelle prüfbar. Alle acht liegen dunkel genug (Kontrast ≥ 4,5:1). */
.avatar-f1 { background: #00325F; }   /* Navy des Hauses */
.avatar-f2 { background: #6E1F2E; }   /* Bordeaux */
.avatar-f3 { background: #1D5B47; }   /* Tannengrün */
.avatar-f4 { background: #4A3A78; }   /* Violett */
.avatar-f5 { background: #8A4B12; }   /* Ocker */
.avatar-f6 { background: #1E5A73; }   /* Petrol */
.avatar-f7 { background: #5B4636; }   /* Umbra */
.avatar-f8 { background: #6B2D6B; }   /* Purpur */

/* ---------- Die Klappliste ----------
   Gleiche Bauweise wie bei der Glocke daneben: rechtsbündig unter der
   Schaltfläche, dieselbe Ebene (z-index 70), dieselbe Umrandung. Beide können
   nie gleichzeitig offen stehen (public/app-nav.js, public/app-glocke.js
   schließen einander) – sie können sich also auch nicht überdecken. */
.usermenu-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
  min-width: 244px; max-width: calc(100vw - 32px);
  background: #fff; border: 1px solid var(--soft); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; padding: 6px;
  text-align: left;
}
.usermenu-kopf {
  padding: 10px 12px 11px; margin: -6px -6px 6px;
  border-bottom: 1px solid var(--soft); background: var(--bg); line-height: 1.4;
}
.usermenu-kopf b { display: block; font-size: 14px; color: var(--navy); font-weight: 600; }
.usermenu-mail { display: block; font-size: 12px; color: var(--grey); word-break: break-all; }
.usermenu-rolle { display: block; font-size: 11.5px; color: var(--slate); margin-top: 2px; }
.usermenu-eintrag {
  display: block; padding: 9px 12px; border-radius: 6px;
  font-size: 14px; color: var(--ink); white-space: nowrap;
}
.usermenu-eintrag:hover { background: var(--bg); color: var(--navy); }
.usermenu-abmelden { color: var(--red); }
.usermenu-abmelden:hover { background: var(--rose-bg); color: var(--red); }
/* Die Regel für den Sprachblock im Menü (.usermenu-sprache) ist entfallen:
   Der Umschalter steht wieder offen in der Zeile (.topbar-lang weiter oben)
   und nicht mehr zusätzlich hier. Eine Regel ohne Element im Markup wäre
   Ballast, der bei der nächsten Änderung in die Irre führt. */

/* ---------------------------------------------------------------------------
   Kopfzeile auf mittelbreiten Bildschirmen
   ---------------------------------------------------------------------------
   Vollständig ausgeschrieben braucht die Kopfzeile IHC-Logo, sechs Reiter,
   Glocke, Sprachumschalter und den Benutzerblock nebeneinander. Zwischen
   961 px und dieser Grenze lief die Seite früher waagerecht über – auf jedem
   1024er- und 1366er-Notebook sichtbar als Querbalken und abgeschnittener
   Inhalt.

   Die Kopfzeile wird deshalb in drei Stufen gestrafft. Was zuerst weicht, ist
   das Beiwerk; die Hauptnavigation bleibt in jeder Stufe stehen, denn sie ist
   der Grund, warum die Zeile hier überhaupt breit sein soll.

   ---- Wann das Burger-Menü erscheint ----
   Früher stand es ab 1399 px neben der Leiste: Auf einem 1280er-Bildschirm sah
   man dieselben Punkte zweimal, einmal in der Zeile und einmal im Menü. Genau
   das hat der Betreiber gerügt.

   Es erscheint jetzt erst dort, wo die Leiste nicht mehr vollständig
   nebeneinander passt. Nachgemessen wurde der Eigenbedarf der Zeile
   (Verwaltungszugang, sechs Reiter, Datenraum) – also die Breite, die alle
   Bausteine nebeneinander brauchen. Der Sprachumschalter ist zurückgekehrt und
   kostet 85 px (Umschalter 73 px, Abstand 12 px); deshalb ist neu gemessen
   worden. DE und EN messen sich auf den Pixel gleich – die Reiter tragen in
   beiden Sprachen dieselbe Breite:

                                        vorher    jetzt (mit Sprache)
       ab 1400 px   (ohne Straffung)   1237 px       1322 px
       1250–1399 px (Stufe 1)          1145 px       1230 px
       1100–1249 px (Stufe 2)           999 px       1084 px
        961–1099 px (Stufe 3)           953 px        953 px   (unverändert)

   Stufe 3 bleibt gleich: Dort entfällt .topbar-end samt Sprache ohnehin.

   Die engste Stufe, in der die Zeile noch vollständig steht, ist weiterhin
   Stufe 2, jetzt mit 1084 px. Sie passt bei 1100 px mit 16 px Luft – der
   Umbruchpunkt trägt also auch mit dem Sprachumschalter und wird nicht
   verschoben. Der Wert ist verlässlich und nicht auf Kante genäht: In Stufe 2
   ist der Personenname bereits ausgeblendet, alle übrigen Bausteine haben
   feste Beschriftungen aus dem Wörterbuch. Ein Rollbalken verkleinert die
   Rechenbreite und die Bedingung der Medienabfrage gleichermaßen und kann den
   Abstand daher nicht aufzehren.

   Das Burger-Menü erscheint deshalb unverändert ab Stufe 3 (≤ 1099 px), wo
   ohnehin der ganze Benutzerblock entfällt, und darunter (≤ 960 px,
   style.css). Oberhalb von 1099 px ist es verborgen; die Leiste steht dort
   allein. Wo .topbar-end entfällt, führt der Weg zur Sprache über das
   Burger-Menü (.mobilenav-lang, style.css) – sie steht dort seit jeher.

   Diese Regeln stehen bewusst hier und nicht in style.css: Die Topleiste wird
   in dieser Datei gestaltet, und sie wird als zweite geladen. Eine gleich
   scharfe Regel in style.css würde von `.topbar .who-text { display: block }`
   weiter oben wieder überschrieben.
   --------------------------------------------------------------------------- */

/* Stufe 1 (1250–1399 px): Die Zeile rückt zusammen, es entfällt nichts.
   Kein Burger-Menü – die Leiste steht hier vollständig. */
@media (min-width: 1250px) and (max-width: 1399px) {
  .topbar { gap: 16px; padding: 0 18px; }
  .topbar .mainnav a, .topbar .mainnav summary { padding: 8px 11px; font-size: 14px; }
  /* Wird es trotzdem eng – langer Name, englische Fassung –, gibt der Name
     nach, nicht die Navigation: Die Reiter behalten ihre Breite, der Name
     wird gekürzt. Vollständig steht er im Benutzermenü darunter. */
  .topbar .mainnav { flex: 0 0 auto; }
  .topbar .topbar-end { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
  .topbar .usermenu { min-width: 0; }
  .topbar .usermenu > summary.who { min-width: 0; overflow: hidden; }
  .topbar .who-text { min-width: 0; }
  .topbar .who-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Stufe 2 (1100–1249 px): Der Name passt nicht mehr sinnvoll daneben – auf
   „Tes…" gekürzt nützt er niemandem. Bild und Pfeil bleiben, das Menü
   dahinter führt Name, Rolle, Mein Zugang und Abmelden.

   Der Sprachumschalter bleibt hier ausdrücklich stehen: Er ist mit 73 px
   schmaler als der Name und wird häufiger gebraucht als das Menü dahinter.
   Nachgemessen braucht die Zeile in dieser Stufe 1084 px – sie passt also.
   Auch hier kein Burger-Menü. */
@media (min-width: 1100px) and (max-width: 1249px) {
  .topbar { gap: 14px; padding: 0 16px; }
  .topbar .mainnav { gap: 0; }
  .topbar .mainnav a, .topbar .mainnav summary { padding: 8px 10px; font-size: 13.5px; }
  .topbar .who-text { display: none; }
}

/* Stufe 3 (961–1099 px): Jetzt entfällt der Benutzerblock ganz – und erst
   hier erscheint das Burger-Menü, weil es ab hier der einzige Weg zu Mein
   Zugang, Sprache und Abmelden ist. */
@media (min-width: 961px) and (max-width: 1099px) {
  .topbar { gap: 12px; padding: 0 14px; }
  .topbar .mainnav { gap: 0; }
  .topbar .mainnav a, .topbar .mainnav summary { padding: 8px 9px; font-size: 13.5px; }
  .topbar .topbar-end { display: none; }
  .burger { display: block; }
}

/* Oberhalb von 1099 px gibt es keinen Burger-Knopf mehr – dann darf auch das
   Menü dahinter nicht stehenbleiben. Der Fall tritt beim Aufziehen des
   Fensters mit geöffnetem Menü ein. In style.css steht dieselbe Regel für
   1400 px; sie wird hier nachgezogen, weil der Umbruchpunkt gewandert ist.
   Die Sperre des Seitenlaufs löst public/app-nav.js, denn die hängt an
   body.style und nicht an einer Regel. */
@media (min-width: 1100px) {
  .mobilenav, .mobilenav-veil { display: none !important; }
}

/* ---------- Linke Seitenleiste ---------- */
.sidenav {
  position: fixed; top: var(--topbar-h); left: 0; bottom: 0; width: var(--side-w);
  background: #fff; border-right: 1px solid var(--soft);
  padding: 10px 6px 16px; overflow-y: auto; z-index: 45;
  display: flex; flex-direction: column; gap: 2px;
}
.sidenav a {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 4px 9px; border-radius: var(--radius-sm);
  color: var(--slate); font-size: 11px; line-height: 1.25; text-align: center;
  flex: 0 0 auto;
}
.sidenav a:hover { background: var(--bg); color: var(--navy); }
/* Aktiver Eintrag: grau hinterlegt, wie im Vorbild */
.sidenav a.active { background: var(--soft); color: var(--navy); font-weight: 500; }
.sidenav-icon { display: flex; }
.sidenav-icon svg { display: block; }
.sidenav-label { display: block; }

/* ---------- Aufklappbarer Punkt in der Leiste (Analyse-Tools) ----------
   Grundlage ist <details>, also auch ohne Javascript bedienbar – dieselbe
   Bauweise wie das Menü „Hilfe" in der Hauptnavigation. Die Unterpunkte
   stehen im Fluss der Leiste und nicht als schwebende Fläche: Die Leiste
   scrollt senkrecht (overflow-y), eine absolut gesetzte Fläche würde an
   ihrem Rand abgeschnitten. */
.sidenav-menu { flex: 0 0 auto; }
.sidenav-menu > summary {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 4px 7px; border-radius: var(--radius-sm);
  color: var(--slate); font-size: 11px; line-height: 1.25; text-align: center;
  cursor: pointer; list-style: none;
}
.sidenav-menu > summary::-webkit-details-marker { display: none; }
.sidenav-menu > summary::marker { content: ''; }
.sidenav-menu > summary:hover { background: var(--bg); color: var(--navy); }
/* Aktiv heißt hier: man steht auf einer der Unterseiten. */
.sidenav-menu > summary.active { background: var(--soft); color: var(--navy); font-weight: 500; }
/* Der Pfeil ist die zweite, von der Farbe unabhängige Auskunft über den
   Zustand „auf/zu" – sichtbar auch dann, wenn die Hinterlegung nicht auffällt. */
.sidenav-caret { display: flex; color: var(--grey); line-height: 0; }
.sidenav-caret svg { display: block; }
.sidenav-menu[open] > .sidenav-caret,
.sidenav-menu[open] > summary .sidenav-caret { transform: rotate(180deg); }

/* Die Unterpunkte nehmen die volle Breite der Leiste ein (negativer Rand gegen
   deren Innenabstand). Das ist kein Schmuck: Die Beschriftungen sind lang
   („Honorarbescheid-Analyse"), und jeder Bildpunkt entscheidet darüber, ob der
   Umbruch am Bindestrich gelingt oder mitten im Wort steht. */
.sidenav-sub {
  display: flex; flex-direction: column; gap: 2px;
  margin: 2px -6px 6px; padding: 4px 2px; background: var(--bg);
}
/* Umbruch notfalls auch innerhalb des Wortes – sonst ragte die Zeile über die
   Leiste hinaus. In der Regel greift vorher der Bindestrich. */
.sidenav-sub a { font-size: 10.5px; padding: 7px 1px 6px; gap: 4px; overflow-wrap: anywhere; }
.sidenav-sub a:hover { background: #fff; }
.sidenav-sub a.active { background: var(--soft); color: var(--navy); font-weight: 500; }

/* Der Seiteninhalt rückt neben die Leiste – niemals darunter.
   Ausgenommen sind fest positionierte Bausteine (Topleiste, Burger-Menü,
   Einblendungen) und die Leiste selbst. */
body.has-side > *:not(.topbar):not(.sidenav):not(.mobilenav):not(.mobilenav-veil):not(.modal-veil) {
  margin-left: var(--side-w);
}

/* ---------- Pfadanzeige ---------- */
.crumbs {
  background: #fff; border-bottom: 1px solid var(--soft);
  padding: 9px 28px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: 13px; color: var(--grey); line-height: 1.4;
}
.crumbs a { color: var(--slate); padding: 2px 4px; border-radius: 5px; }
.crumbs a:hover { background: var(--bg); color: var(--navy); }
.crumbs b { color: var(--navy); font-weight: 600; padding: 2px 4px; }
.crumbs .sep { color: var(--line); font-size: 14px; line-height: 1; }

/* ---------- Verwaltung als Kachelseite ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 20px; }
.tile {
  display: flex; flex-direction: column; gap: 9px;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px 24px 20px; color: var(--ink);
  transition: box-shadow .15s, transform .12s;
}
.tile:hover { color: var(--ink); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,24,54,.07), 0 12px 30px rgba(0,24,54,.10); }
.tile-icon { color: var(--navy); display: flex; }
.tile-icon svg { display: block; }
.tile h2 { margin: 0; font-size: 17px; }
.tile p { margin: 0; font-size: 13.5px; color: var(--grey); line-height: 1.5; }
.tile-status {
  margin-top: auto; padding-top: 12px; font-size: 12.5px; color: var(--slate);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
/* Kachel ohne Ziel („in Vorbereitung"): kein Anheben beim Überfahren, keine
   Hand als Zeiger — sie sieht nicht anklickbar aus, weil sie es nicht ist. */
.tile-soon { box-shadow: none; border: 1px dashed var(--line); }
.tile-soon .tile-icon, .tile-soon h2 { color: var(--grey); }

/* Kennzeilen auf den Unterseiten der Verwaltung */
.factrow { display: flex; gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid #F1F1F4; flex-wrap: wrap; }
.factrow:last-child { border-bottom: 0; }
.factrow .k { color: var(--grey); font-size: 13px; min-width: 210px; flex: 0 0 auto; }
.factrow .v { color: var(--ink); font-size: 14px; word-break: break-word; }

/* Abschnitte der Hilfeseite */
.help-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* ---------- Benutzerseite: je Datenraum eine Zeile ---------- */
/* Die Zeilen werden hoch, sobald jemand in mehreren Räumen ist – deshalb
   stehen die Angaben oben statt mittig. */
.nv-tablewrap { overflow-x: auto; }
table.list.nv-users { min-width: 900px; }
table.list.nv-users td, table.list.nv-users th { vertical-align: top; padding-top: 11px; }
table.list.nv-users td b { display: inline-block; }
.nv-uroom-list { display: flex; flex-direction: column; gap: 6px; }
.nv-uroom {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px 9px;
  padding: 6px 9px; border-radius: var(--radius-sm); background: var(--bg);
}
/* Der Raum, nach dem gefiltert wurde, wird hervorgehoben. */
.nv-uroom.on { background: var(--rose-bg); }
.nv-uroom-name { font-size: 13.5px; font-weight: 600; color: var(--navy); }
.nv-uroom-name:hover { color: var(--red); }
.nv-uroom-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; }
.nv-uroom-link { font-size: 12.5px; color: var(--slate); border-bottom: 1px solid var(--line); }
.nv-uroom-link:hover { color: var(--navy); border-bottom-color: var(--slate); }
/* Die beiden Schalter stehen untereinander – nebeneinander sprengen sie in
   Verbindung mit den Datenraumzeilen die Breite der Karte. */
.nv-uactions { white-space: normal; }
.nv-uactions form { display: block; margin-bottom: 5px; }
.nv-uactions .btn { width: 100%; text-align: center; }

/* ---------- „Mein Zugang": eigenes Profilbild ---------- */
/* Vorschau und Initialen sind gleich groß, damit beim Wechsel nichts springt.
   Die Farbklassen (avatar-f1 … f8) stehen weiter oben bei der Kopfzeile – sie
   gelten an beiden Stellen. */
.bild-zeile { display: flex; align-items: center; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.bild-vorschau {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  background: var(--soft);
}
.bild-kuerzel { color: #fff; font-size: 32px; font-weight: 600; letter-spacing: 1px; }
.bild-fakten { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bild-fakten b { color: var(--navy); font-size: 14px; font-weight: 600; }

/* Suchfeld der Filterzeile so breit wie die Auswahlfelder daneben */
.inline-form input[type="search"] { width: 100%; }

/* ---------- Schmale Geräte ---------- */
@media (max-width: 960px) {
  /* Aus der Leiste wird eine waagerechte, scrollbare Zeile.
     Das Burger-Menü bleibt unverändert. */
  .sidenav {
    position: static; width: auto; top: auto; bottom: auto;
    flex-direction: row; overflow-x: auto; overflow-y: hidden;
    border-right: 0; border-bottom: 1px solid var(--soft);
    padding: 6px 10px; gap: 4px; -webkit-overflow-scrolling: touch;
  }
  .sidenav a { min-width: 84px; }
  /* Die Einträge behalten ihre natürliche Höhe. Ohne diese Zeile würden sie
     mitwachsen, sobald das Untermenü aufgeklappt ist. */
  .sidenav { align-items: flex-start; }
  /* Das Untermenü bleibt auch hier bedienbar: Aufgeklappt hängen die sechs
     Werkzeuge als Liste unter der Schaltfläche – alle sechs auf einmal sichtbar,
     ohne die Leiste seitwärts schieben zu müssen. Die Liste steht im Fluss und
     nicht als schwebende Fläche: Die Leiste scrollt hier waagerecht, eine
     absolut gesetzte Fläche würde an ihrem Rand abgeschnitten.
     Die Leiste wird dadurch vorübergehend höher; zugeklappt ist sie wieder so
     flach wie zuvor. */
  .sidenav-menu > summary { min-width: 84px; }
  .sidenav-sub { flex-direction: column; margin: 4px 0 0; min-width: 172px; }
  .sidenav-sub a {
    flex-direction: row; align-items: center; justify-content: flex-start;
    min-width: 0; text-align: left; font-size: 12px; padding: 8px; gap: 8px;
  }
  .sidenav-sub a .sidenav-icon { flex: 0 0 auto; }
  /* gleiche Auswahlschärfe wie oben, damit der Einzug wirklich zurückgenommen wird */
  body.has-side > *:not(.topbar):not(.sidenav):not(.mobilenav):not(.mobilenav-veil):not(.modal-veil) {
    margin-left: 0;
  }
  .crumbs { padding: 8px 16px; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .factrow .k { min-width: 0; flex: 1 0 100%; }
  .nv-uroom-list { min-width: 0; }
}

/* Überschriften im Burger-Menü (Hilfe-Untereinträge) */
.mobilenav-head {
  display: block; padding: 14px 12px 4px; font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .7px; color: var(--grey);
}

/* ============================================================
   Benachrichtigungsglocke in der Kopfzeile
   ============================================================
   Vorbild Datasite/Intralinks: ein Glockensymbol oben rechts, das seine
   Farbe wechselt, sobald es ungelesene Ereignisse gibt.

   Warum hier und nicht in style.css:
   Diese Datei wird NACH style.css geladen. Die Topleiste wird hier gestaltet;
   gleich scharfe Regeln in style.css würden von den Regeln weiter oben in
   dieser Datei wieder überschrieben.

   Warum die Glocke neben .topbar-end steht und nicht darin:
   .topbar-end entfällt zwischen 961 px und 1099 px (Stufe 3 weiter oben) und
   unterhalb von 961 px (style.css). Die Glocke soll in jeder Breite erreichbar
   bleiben — sie ist der einzige Weg zu den Neuigkeiten.

   Barrierefreiheit: Der Zustand „es gibt Neues" wird dreifach gemeldet —
   Farbe, Zähler und aria-label/title. Farbe allein genügt nicht. */
.glocke { position: relative; flex: 0 0 auto; }

/* Ruhezustand: dezent, im Grauton der übrigen Nebensymbole (wie .who-icon). */
.glocke-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; position: relative;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  color: var(--slate); cursor: pointer; line-height: 0;
}
.glocke-knopf:hover { background: var(--bg); color: var(--navy); }
.glocke-knopf svg { display: block; }

/* Zustand „es gibt Neues": deutlich abgesetzt in der Signalfarbe des Hauses. */
.glocke.hat-neues .glocke-knopf { color: var(--red); background: var(--rose-bg); border-color: var(--rose); }
.glocke.hat-neues .glocke-knopf:hover { color: var(--red); background: var(--rose); }

/* Der Zähler: zweite, von der Farbe unabhängige Auskunft. Der weiße Rand
   trennt ihn vom Symbol, damit die Ziffern auch auf der roten Fläche stehen. */
.glocke-zahl {
  position: absolute; top: 2px; right: 1px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 9px; border: 2px solid #fff;
  background: var(--red); color: #fff;
  font-size: 10.5px; font-weight: 600; line-height: 13px; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---------- Klappliste ---------- */
.glocke-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
  width: 380px; max-width: calc(100vw - 32px);
  background: #fff; border: 1px solid var(--soft); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.glocke-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; border-bottom: 1px solid var(--soft); background: var(--bg);
}
.glocke-kopf b { font-size: 14px; color: var(--navy); font-weight: 600; }
.glocke-gelesen {
  background: none; border: 0; padding: 2px 4px; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--grey); border-radius: 5px;
}
.glocke-gelesen:hover { color: var(--red); background: #fff; }
.glocke-gelesen[disabled] { color: var(--line); cursor: default; }

/* Die Liste ist innen scrollbar. Ohne feste Höchsthöhe wüchse sie bei zwanzig
   Ereignissen über den unteren Bildschirmrand hinaus. */
.glocke-body { max-height: min(62vh, 460px); overflow-y: auto; }
.glocke-eintrag {
  display: block; padding: 10px 14px; border-bottom: 1px solid var(--soft);
  color: var(--ink);
}
.glocke-eintrag:last-child { border-bottom: 0; }
.glocke-eintrag:hover { background: var(--bg); color: var(--ink); }
.glocke-art {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px;
  color: var(--slate);
}
.glocke-eintrag.ist-neu .glocke-art { color: var(--red); }
.glocke-marke {
  text-transform: none; letter-spacing: 0; font-size: 10.5px; font-weight: 600;
  background: var(--rose-bg); color: var(--red); border-radius: 4px; padding: 1px 6px;
}
.glocke-titel {
  display: block; font-size: 14px; color: var(--navy); margin: 2px 0 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.glocke-ort { display: block; font-size: 12px; color: var(--grey); }
.glocke-zeit { display: block; font-size: 11.5px; color: var(--grey); margin-top: 2px; }
.glocke-leer { margin: 0; padding: 22px 16px; text-align: center; font-size: 13px; color: var(--grey); }
.glocke-fuss {
  padding: 9px 14px; border-top: 1px solid var(--soft); background: var(--bg);
  font-size: 11.5px; color: var(--grey); line-height: 1.35;
}

/* ---------- Kopfzeile auf mittelbreiten Bildschirmen ----------
   Die Glocke belegt rund 38 px zuzüglich Abstand. Genau dieser Bereich war
   schon einmal zu eng (961–1400 px, drei Stufen weiter oben). Deshalb tritt
   die Glocke dort auf 32 px zurück, statt zusätzliche Breite zu fordern. */
@media (min-width: 961px) and (max-width: 1399px) {
  .glocke-knopf { width: 32px; height: 32px; }
  .glocke-zahl { top: 0; right: -1px; }
}
/* Unterhalb von 961 px steht die Glocke zwischen Logo und Burger-Menü; sie
   rückt selbst ganz nach rechts, damit die beiden nicht zusammenkleben. */
@media (max-width: 960px) {
  .glocke { margin-left: auto; }
}
/* Auf schmalen Geräten hat eine 380 px breite Klappliste keinen Platz mehr:
   Sie legt sich als feste Fläche unter die Kopfzeile. „right/left" statt
   „width" — so kann sie nicht seitlich über den Rand hinauslaufen. */
@media (max-width: 620px) {
  .glocke-panel {
    position: fixed; top: calc(var(--topbar-h) + 6px); left: 10px; right: 10px;
    width: auto; max-width: none;
  }
}

/* Bereits gesehene Neuigkeiten in der Glocke.
   Sie stehen unter einem Aufklapper statt in der Liste — sonst sieht es aus,
   als sei „Alles gelesen" wirkungslos geblieben. Zurückgenommen, aber lesbar. */
.glocke-alt { border-top: 1px solid var(--line, #C4C4CD); }
.glocke-alt > summary {
  cursor: pointer; list-style: none;
  padding: 8px 14px; font-size: 12px; color: var(--grey, #65656F);
}
.glocke-alt > summary::-webkit-details-marker { display: none; }
.glocke-alt > summary::before { content: '▸ '; }
.glocke-alt[open] > summary::before { content: '▾ '; }
.glocke-alt > summary:hover { background: var(--soft, #F3F3F5); }
.glocke-alt .glocke-eintrag { opacity: .72; }