/* =========================================================================
   ticket.css - Runde 30
   -------------------------------------------------------------------------
   Bewusst NICHT im LCARS-Look des Admin-Panels (css/lcars-base.css +
   css/app.css) - das ist hier explizit NICHT gewünscht. Diese Seite ist für
   Lehrkräfte gedacht, die einfach schnell einen Technik-Defekt melden wollen,
   deshalb: schlicht, weißer Hintergrund, die Schulfarbe Blau (aus dem
   Logo, img/logo-heisenberg.png, exakt ausgemessen: #274d7a) für Text,
   Rahmen und Buttons. Kein eigenes Stylesheet der Vorlage wird hier
   eingebunden.
   ========================================================================= */

/* =========================================================================
   Runde 49 ("Ruhig & Klar"-Überarbeitung): komplett neuer Variablensatz
   für ein ruhigeres, weniger "altmodisches" Erscheinungsbild (dünnere
   Rahmen statt der bisherigen kräftigen 2px-Blöcke, größerer Radius,
   eigene Oberflächenfarbe --flaeche statt hart codiertem #fff, damit sich
   Karten vom Seitenhintergrund --flaeche-alt abheben). Alle bisherigen
   Variablennamen bleiben erhalten (faq-verwaltung.php nutzt dieselbe
   Datei), nur die Werte und ein paar neue Tokens kommen dazu. Direkt
   darunter der automatische Dark Mode (@media prefers-color-scheme: dark) -
   "soll automatisch eingestellt werden, wenn das System einen Dark Mode
   hat", ausdrücklicher Wunsch: kein manueller Umschalter, nur die
   Systemeinstellung entscheidet. Weil praktisch die gesamte Datei bereits
   auf diesen Variablen aufbaut, gilt der Dark Mode automatisch für JEDE
   Ansicht von ticket.html UND für faq-verwaltung.php (bindet dieselbe
   Datei ein). */
:root {
    --blau: #2456a6;
    --blau-dunkel: #163a73;
    --blau-hell: #eaf1fb;
    --blau-rand: #dde3ea;
    --text: #1b2430;
    --text-dezent: #69758a;
    --fehler: #b3261e;
    --fehler-hell: #fbeceb;
    --fehler-dunkel: #8c1e18;
    --radius: 0.75rem;

    /* Kartenflächen (Kacheln, Kopf/Fuß, Eingabefelder, ...) vs. der etwas
       abgesetzte Seitenhintergrund darunter - vorher überall hart #fff,
       jetzt eine Variable, damit der Dark Mode unten beides umdrehen kann. */
    --flaeche: #ffffff;
    --flaeche-alt: #f4f6f9;

    /* Runde 31: Ampel-/Konditionsfarben für den Status-Hinweis im
       Geräteauswahl-Schritt und die Störungsübersicht. Drei Ampeltöne
       (gruen/gelb/rot, siehe SIT.statusHinweisFuerMelder) plus ein eigener,
       kräftigerer Ton für C3 ("deutliche Einschränkung"), damit die
       Übersicht C2 und C3 optisch unterscheidet, obwohl beide im
       vereinfachten Drei-Farben-Hinweis als "gelb" gelten. C4 nutzt bewusst
       dieselben Töne wie --fehler/--fehler-hell oben (keine zweite rote
       Farbe pflegen). */
    --gruen: #1e7a42;
    --gruen-hell: #e9f6ee;
    --kond-c2: #9a7d0a;
    --kond-c2-hell: #fdf6e3;
    --kond-c3: #c1440e;
    --kond-c3-hell: #fdece0;

    /* Runde 49: vorher hart codierte Einzelfarben (Status-Pillen in der
       Störungsübersicht, Admin-/Autoren-Badges) - jetzt als Variablen, damit
       der Dark Mode unten eigene, auf dunklem Grund lesbare Töne setzen kann. */
    --status-neu-bg: #fdeaea;
    --status-neu-fg: #b33a3a;
    --status-bearbeitung-bg: #fdf3d9;
    --status-bearbeitung-fg: #8a6d1a;
    --status-offen-bg: #fdeadb;
    --status-offen-fg: #b35a1a;
    --status-geschlossen-bg: #e4f5ea;
    --status-geschlossen-fg: #2f8f5b;
    --admin-label-bg: #c9a0dc;
    --admin-label-fg: #1a1a22;
    --autor-badge-bg: #8a8aa8;
    --autor-badge-fg: #1a1a22;
}

/* Runde 49: automatischer Dark Mode - reine Systemeinstellung, kein
   Umschalter in der Oberfläche ("soll automatisch eingestellt werden, wenn
   das System einen Dark Mode hat", ausdrücklicher Wunsch). --blau-dunkel
   ist im Dark Mode bewusst HELLER als --blau (nicht "dunkler") - die Rolle
   bleibt gleich ("die betontere Variante", für Überschriften/Hover), nur
   bedeutet mehr Betonung auf dunklem Grund heller statt dunkler. */
@media (prefers-color-scheme: dark) {
    :root {
        --blau: #3b82f6;
        --blau-dunkel: #8fc0ff;
        --blau-hell: #16243a;
        --blau-rand: #2b3b52;
        --text: #e6ebf3;
        --text-dezent: #90a0b8;
        --fehler: #ff7a70;
        --fehler-hell: #3a201f;
        --fehler-dunkel: #c94840;

        --flaeche: #161d2c;
        --flaeche-alt: #0d131e;

        --gruen: #58b876;
        --gruen-hell: #16301f;
        --kond-c2: #e0b23a;
        --kond-c2-hell: #362a10;
        --kond-c3: #e2824a;
        --kond-c3-hell: #362212;

        --status-neu-bg: #3a201f;
        --status-neu-fg: #ff9088;
        --status-bearbeitung-bg: #362a10;
        --status-bearbeitung-fg: #e0b23a;
        --status-offen-bg: #362212;
        --status-offen-fg: #e2824a;
        --status-geschlossen-bg: #16301f;
        --status-geschlossen-fg: #58b876;
        --admin-label-bg: #4a3a63;
        --admin-label-fg: #e0cef0;
        --autor-badge-bg: #3a3f52;
        --autor-badge-fg: #c7ccd9;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--flaeche-alt);
    color: var(--text);
    /* Runde 49: kein Google-Font-Import (die Schule verzichtet bewusst auf
       externe Font-Ladeanfragen aus Datenschutzgründen, siehe die bereits
       selbst gehosteten Antonio-Schriftdateien in diesem Ordner) - stattdessen
       ein moderner System-Font-Stack statt des bisherigen "Segoe UI, Verdana,
       Arial", der auf aktuellen Geräten kantiger/älter wirkt. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
}

/* --- Kopfzeile (Runde 40, Titel statt Menüleiste seit Runde 46) ---------
   Bis Runde 45: feste Menüleiste mit drei gleichwertigen Aktionen
   (.hauptmenue/.hauptmenue-btn). Seit Runde 46 ist "Fragen & Probleme" die
   Startseite von ticket.html selbst (siehe renderFaq() in ticket.js) -
   die Menüleiste entfällt hier komplett, übrig bleibt nur noch der
   anklickbare Titel .kopf-titel ("IT SUPPORT"), der zuverlässig zur
   Startseite zurückführt. Das bisherige mobile Burger-Menü (Runde 44) ist
   damit ebenfalls hinfällig - ein einzelner Titel braucht kein
   Auf-/Zuklappen mehr. faq-verwaltung.php nutzte .hauptmenue/.hauptmenue-btn
   bis Runde 54 noch für ihre eigene, kürzere Kopfzeile - seit Runde 55 hat
   auch diese Seite den einheitlichen .kopf-innen-Kopf (siehe dort), die
   beiden Klassen werden nirgends mehr verwendet und sind hier deshalb
   entfernt. ------------------------------------------------------------- */
/* Runde 76: ".kopf-gruppe" umschließt seitdem ".kopf" (+ auf ticket.php/
   zugangsdaten/index.php zusätzlich die neue ".unterleiste" darunter, siehe
   dort) - das "sticky beim Scrollen oben kleben bleiben" sitzt seither HIER
   statt direkt auf .kopf, damit eine Seite mit zweiter Menüleiste die ganze
   Gruppe (Kopf + Unterleiste) gemeinsam oben hält, ohne dafür die genaue
   Höhe von .kopf kennen/hart eintragen zu müssen (fragil, ändert sich je
   nach Bildschirmbreite). Auf den Seiten OHNE Unterleiste (faq-verwaltung.php,
   zugangsdaten.php, gute-nachrichten-verwaltung.php) umschließt
   .kopf-gruppe einfach nur .kopf allein - optisch exakt wie zuvor, nur die
   Zuständigkeit fürs Sticky-Verhalten ist eine Ebene nach außen gewandert. */
.kopf-gruppe {
    position: sticky;
    top: 0;
    z-index: 10;
}
.kopf {
    padding: 0.75rem 1.25rem;
    border-bottom: 3px solid var(--blau);
    background: var(--flaeche);
}

/* Runde 46: einziges Element im Kopf von ticket.html - großer, klickbarer
   Titel statt der bisherigen Menüleiste, führt immer zur Startseite
   zurück ("Fragen & Probleme", siehe zeigeFaq()/#nav-home in ticket.js).
   Runde 53: kurzzeitig durch EIN zentriertes Logo-Bild ersetzt.
   Runde 55: auf ausdrücklichen Wunsch noch einmal umgebaut - linksbündiges
   Icon-Bild + separates Text-Label in einem gemeinsamen Link, plus rechts
   ein eigener Admin-Panel-Link für Admins. .kopf-innen übernimmt Breite/
   Padding von der bisherigen .kopf-titel, ist jetzt aber ein Flex-Container
   statt eines einzelnen zentrierten Elements - dieselbe Bildschirmposition
   wie der Inhalt darunter (.wizard), aber linksbündig statt zentriert
   ("linksbündig, also auf der selben Höhe, wo links der Inhalt anfängt").
   Gilt seit Runde 55 auch für faq-verwaltung.php (siehe dort), das dieselben
   Klassen verwendet - beide Seiten haben jetzt einen einheitlichen Kopf.
   Runde 59 hatte hier "max-width: 40rem; margin: 0 auto;" (zentrierte, auf
   Handy-Breite begrenzte Spalte, selbst auf einem breiten Monitor) entfernt
   - "Die Ticketseite soll die volle Breite des Bildschirms ausnutzen und
   nur bei mobilen Geräten entsprechend schmaler werden", ausdrücklicher
   Wunsch damals.
   Runde 81 nimmt das teilweise zurück: "Die maximale Seitenbreite soll
   sich an einem iPad 11 Zoll im Querformat orientieren, wenn das Display
   breiter ist, sieht das mit den Kacheln nicht mehr gut aus", ausdrücklicher
   Wunsch - auf einem großen Desktop-Monitor wirkten die Kacheln-Zeilen
   (.start-aktionen/.kachel-auswahl-gross/... s. u.) inzwischen unangenehm
   in die Breite gezogen. MAX_SEITENBREITE (hier als Zahl, da CSS keine
   Variablen in Media-Query-Bedingungen erlaubt - s. u.) ist die logische
   (CSS-)Breite eines iPad Pro/Air 11" im Querformat (1194px) - BREITER als
   das wird die Seite jetzt nicht mehr, dafür ab dieser Breite zentriert
   (margin:0 auto) statt wie bis Runde 80 unbegrenzt in die Breite zu
   wachsen. SCHMALER als 1194px (Tablet-Hochformat, Handy) bleibt es
   weiterhin wie seit Runde 59 beschrieben: die Seite nutzt die jeweils
   vorhandene Bildschirmbreite voll aus, keine feste untere Breitengrenze.
   .kopf selbst (Hintergrund/blauer Rand) bleibt bewusst randlos/bildschirm-
   breit (".kopf-innen" trägt nur den tatsächlichen INHALT, s. oben) - das
   hält den Kopf als durchgehendes Band, exakt wie das Vorbild einer
   normalen Webseite mit zentrierter Inhaltsspalte in einem randlosen
   Kopfbereich. Betrifft architekturbedingt gleich mit faq-verwaltung.php
   (teilt sich dieselben Klassen/dieselbe Datei, s. o.). */
.kopf-innen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    max-width: 1194px;
    margin: 0 auto;
    padding: 0.25rem 1.25rem;
}
/* Runde 81, Punkt 5: Zurück-Pfeil + Logo-Link stecken jetzt gemeinsam in
   diesem Wrapper statt der Pfeil TEIL des Logo-Links zu sein (bis Runde 80:
   ein <span aria-hidden> INNERHALB von #nav-home) - der Pfeil ist jetzt ein
   eigenes, eigenständig klickbares <button> (siehe js/verlauf.js), zwei
   interaktive Elemente ineinander verschachtelt (<button> in <a>) wären
   ungültiges HTML. position:relative, damit das Verlaufs-Panel weiter unten
   auf Desktop-Breite exakt an diesem Wrapper verankert werden kann (genau
   wie .stoerung-filter-kachel/.zd-filter-kachel beim Filter-Panel). */
.kopf-logo-gruppe {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    position: relative;
}
/* Logo-Bild + "IT-SUPPORT"-Text gemeinsam EIN Link ("Logo und Text sollen
   zur ticket.php führen") - display:flex hält beide auf derselben Höhe
   nebeneinander.
   Runde 82 (Kopf-Umbau): flex-shrink:0 NEU - vorher durfte dieser Link
   per min-width:0 schrumpfen, was unproblematisch war, solange er das
   einzige variable Element in .kopf-logo-gruppe war. Seit der Logo-Text
   IMMER "IT-SUPPORT" ist (kurz, konstant) und stattdessen der neue, lange
   #kopf-seitenname daneben um Platz konkurriert, würde .kopf-logo-link
   sonst vom Flexbox-Algorithmus zusammengequetscht - der Text selbst hat
   aber kein eigenes Overflow-Handling (white-space:nowrap OHNE
   text-overflow/overflow:hidden, s. u.) und würde dann sichtbar über die
   Nachbarelemente hinweglaufen (auf schmalen Bildschirmen tatsächlich so
   aufgetreten: "IT-SUPPORT" überlappte den Pfeil und den Seitennamen).
   Richtig ist das Gegenteil: Logo+Text bleiben IMMER in voller Größe, nur
   #kopf-seitenname darf schrumpfen/abgeschnitten werden (hat dafür schon
   max-width+text-overflow:ellipsis, s. dort). min-width:0 bleibt trotzdem
   stehen - ohne flex-shrink:0 wäre es allein gegen das Überlaufen
   wirkungslos, umgekehrt sorgt es (zusammen mit dem min-width:0 an
   .kopf-logo-gruppe) weiterhin dafür, dass EXTREM schmale Bildschirme
   nicht durch dieses eine Element gesprengt werden. */
.kopf-logo-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    flex-shrink: 0;
    border: none;
    background: none;
    color: var(--blau-dunkel);
    text-decoration: none;
    cursor: pointer;
}
.kopf-logo-link:hover, .kopf-logo-link:focus-visible { color: var(--blau); }
/* Nur noch das Icon selbst (ohne eingebrannten Schriftzug) - "ein neues
   Bild im Header", separat vom Text-Label daneben. height statt max-height,
   damit es zuverlässig exakt so hoch wie der Text daneben wirkt. */
.kopf-logo-icon {
    display: block;
    height: 2.1rem;
    width: auto;
    flex: 0 0 auto;
}
/* Runde 84: der bisherige Zurück-Pfeil-Knopf (.kopf-zurueck-pfeil) ist aus
   der Menüleiste entfallen - "Der Pfeil soll aus der Menüleiste wieder
   raus", ausdrücklicher Wunsch. Sein "echtes Zurück" (history.back(), siehe
   echtesZurueck() in js/verlauf.js) steht jetzt als eigener Knopf ganz oben
   im Verlaufs-Aufklappmenü (siehe .kopf-verlauf-zurueck weiter unten) - der
   Seitenname bleibt der einzige Weg, dieses Menü zu öffnen.
   Runde 82 (Kopf-Umbau): NEU - zeigt (wo sinnvoll) den Namen der aktuellen
   Unteransicht und öffnet per Klick das Verlaufs-Aufklappmenü ("Das Menü
   mit den zuletzt besuchten Seiten soll erscheinen, wenn man auf den
   Seitennamen tippt", ausdrücklicher Wunsch) - steht im Markup bewusst
   NACH dem Zurück-Pfeil ("Daneben dann der Pfeil und dann ggfs. ein
   Seitenname"). min-width:0 + text-overflow, damit ein langer Seitenname
   auf schmalen Bildschirmen den Kopf nicht sprengt, sondern zur Not mit
   "…" abgeschnitten wird - der Admin-Panel-/Ansicht-Knopf rechts im Kopf
   soll dafür nicht aus dem sichtbaren Bereich gedrängt werden. Gedämpfte
   Farbe wie der Pfeil (kein eigenständiges drittes "Gewicht" neben
   Logo-Text/Pfeil), aber eigene Hover-/Fokus-Hervorhebung, weil hier -
   anders als beim rein visuellen Pfeil bis Runde 81 - tatsächlich wieder
   ein eigener Klick-Handler hängt. */
/* Runde 84: Schriftgröße jetzt identisch zu .kopf-logo-text (1.2rem statt
   bisher 0.98rem) - "Der Name der Seite soll [...] in der selben
   Schriftgröße [wie IT-SUPPORT]" stehen, ausdrücklicher Wunsch. max-width
   dafür von 11rem auf 16rem angehoben - bei der größeren Schrift reichten
   die bisherigen 11rem nicht mehr für längere Seitennamen (z. B.
   "Störungsmeldungen"/"Zugangsdaten-Verwaltung"), die auf dem (ohnehin bis
   1194px breiten, siehe .wizard) Desktop/Tablet unnötig mit "…"
   abgeschnitten wurden. Die SCHMALERE Grenze fürs Smartphone bleibt
   unverändert bei 9rem (siehe @media (width <= 480px) weiter unten). */
/* Runde 88: "Störungsmeldungen oben in der Menüleiste ist abgeschnitten,
   das darf nicht sein" - auf schmalen/mittleren Bildschirmen wurde das
   letzte Zeichen manchmal ohne sichtbares "…" angeschnitten statt sauber
   mit Ellipsis abgeschnitten ("Störungsmeldungen" erschien z. B. wie
   "Störungsmeldunger"). Ursache: white-space/overflow/text-overflow standen
   direkt auf dem <button> selbst - in Kombination mit dessen eigenem
   Innenabstand/Box-Modell und dem Flex-Shrinking daneben (Burger-Knopf
   etc.) kam es so zu Rundungsfehlern beim verfügbaren Platz, die den reinen
   Text-Inhalt knapper trafen als die Ellipsis-Berechnung. Der Text steckt
   seitdem in einem eigenen inneren <span class="kopf-seitenname-text">
   (siehe Markup aller Seiten mit diesem Knopf sowie aktualisiereKopfTitel()
   in js/ticket.js) - DIESES span trägt jetzt min-width/max-width/
   white-space/overflow/text-overflow, der Button selbst ist nur noch ein
   reiner Flex-Rahmen drumherum. */
/* Runde 95: "Die Schrift neben dem Logo soll auch immer die gleiche Größe
   und Farbe haben, wie der Schriftzug 'IT-Support'", ausdrücklicher
   Wunsch - Farbe von var(--text-dezent) (gedämpftes Grau) auf
   var(--blau-dunkel) umgestellt, genau die Farbe, die .kopf-logo-text über
   das umschließende .kopf-logo-link bekommt (siehe dortiger Kopfkommentar
   "In Dem Heisenberg Blau"). Die Größe war schon seit Runde 84 identisch
   (1.2rem), jetzt zusätzlich auch Schriftschnitt/Laufweite angeglichen
   (font-weight 600 -> 700, +letter-spacing), damit der Seitenname auf dem
   Smartphone - wo er .kopf-logo-text ja wörtlich ERSETZT, siehe
   :has()-Regel weiter unten - optisch nicht als eigenes, schwächeres
   drittes Schriftbild wirkt, sondern "im selben Stil da steht, wie jetzt
   IT-Support". */
/* Runde 96: "Der Seitenname in der Menüleiste ist immer noch abgeschnitten,
   manchmal unten (z. B. beim Buchstaben 'g') und manchmal auch hinten, wenn
   der Name des Raumes sehr lang ist. Am besten auf diese Button-Form
   verzichten und einfach nur ein Textfeld verwenden, genau wie auch beim
   Namen neben dem Logo", ausdrücklicher Wunsch, nach mehreren vorherigen,
   letztlich unzureichenden Anläufen (Runde 88/92/95, siehe Git-Historie) -
   diesmal die vom Nutzer selbst vorgeschlagene, grundsätzlichere Lösung
   statt eines weiteren Feintunings:
   1. Die "Button-Form" selbst (padding, negativer margin-left-Ausgleich
      dafür, border-radius, Hintergrund in Ruhe UND bei Hover/Fokus) ist
      komplett entfallen - .kopf-seitenname ist jetzt, genau wie
      .kopf-logo-link nebenan, nur noch ein unsichtbarer Flex-Rahmen ohne
      eigene Box-Optik ("einfach nur ein Textfeld"). Das beseitigt nebenbei
      auch die zweite Ursache des "hinten abgeschnitten"-Bugs: das eigene
      Innenabstand-/Box-Modell dieses Elements neben dem Flex-Shrinking der
      Nachbar-Knöpfe (Burger/Ansicht-Umschalter) führte laut Runde-88-
      Diagnose (s. dort) zu Rundungsfehlern bei der Breitenberechnung, die
      die Ellipsis teils zu knapp treffen ließen - ganz ohne eigenes
      Padding kann dieser Rundungsfehler gar nicht mehr entstehen. Hover/
      Fokus zeigen trotzdem weiterhin eine (dezente) Rückmeldung - statt
      des bisherigen Hintergrund-Pills jetzt derselbe reine Farbwechsel wie
      bei .kopf-logo-link:hover (var(--blau) statt var(--blau-dunkel)), kein
      eigener Rand/Hintergrund mehr nötig.
   2. Das "unten abgeschnitten (z. B. beim Buchstaben 'g')" lag an
      .kopf-seitenname-text selbst: "line-height: 1" ergibt eine Zeilenbox,
      die GENAU einen Schriftgrad hoch ist - schmaler, als die tatsächliche
      Ausdehnung der Glyphen vieler Schriftschnitte (Ober-/Unterlängen
      zusammen sind bei den meisten Fonts spürbar mehr als 1em). Ohne
      eigenes Overflow-Handling (wie bei .kopf-logo-text) fällt das nicht
      auf, weil der Browser trotzdem alles zeichnet; HIER aber steht
      zusätzlich "overflow: hidden" (nötig fürs Ellipsis bei langen
      Raumnamen, s. u.) - und DAS schneidet dann buchstäblich am unteren
      Rand der zu knappen Zeilenbox ab, exakt dort, wo die Unterlänge eines
      "g" hinunterreicht (per Playwright-Vergleichsscreenshot gegen
      .kopf-logo-text nachgewiesen, dort KEIN Abschneiden trotz
      identischem line-height:1, weil dort kein overflow:hidden steht).
      Behoben durch ein leicht großzügigeres line-height (1.2 statt 1) nur
      hier - reicht aus, um Ober-/Unterlängen vollständig Platz zu geben,
      bleibt aber optisch weiterhin eng/einzeilig (die Höhe wird ohnehin
      nur für die Vertikal-Zentrierung in der Flex-Zeile gebraucht, s. o.,
      nicht als eigenständig sichtbarer Abstand).
   3. Beim Regressionstest dieser Runde selbst entdeckt: trotz obiger
      Punkt-1-Änderungen blieb hier noch der Browser-eigene Button-
      Innenabstand (UA-Stylesheet, z. B. "1px 6px" in Chrome) stehen - CSS
      kann "border"/"background" auf einem <button> zurücksetzen, ohne
      automatisch auch "padding"/"margin"/die Button-Schriftvererbung
      mitzunehmen (anders als bei .kopf-logo-link nebenan, einem <a> ohne
      solche UA-Vorgaben). Rein kosmetisch (verursacht keine neue
      Abschneide-Regression, da Ellipsis weiterhin auf dem inneren Span
      sitzt), aber nicht wirklich "genau wie ein Textfeld" - deshalb hier
      zusätzlich explizit "margin: 0; padding: 0; font: inherit;" ergänzt. */
.kopf-seitenname {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: var(--blau-dunkel);
    cursor: pointer;
}
.kopf-seitenname-text {
    display: block;
    min-width: 0;
    max-width: 16rem;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kopf-seitenname:hover,
.kopf-seitenname:focus-visible,
.kopf-seitenname[aria-expanded="true"] {
    color: var(--blau);
}
.kopf-seitenname[hidden] {
    display: none;
}

/* Runde 81, Punkt 5: Verlaufs-Aufklappmenü am Zurück-Pfeil - "per
   Aufklappmenü die letzten Seiten [...], auf die man zurückgehen kann",
   ausdrücklicher Wunsch. Dasselbe Bottom-Sheet-/Dropdown-Muster wie das
   Filter-Panel weiter oben (.filter-panel-hintergrund/.filter-panel) -
   bewusst dieselben Klassenkonzepte unter eigenem kopf-verlauf-Namen
   wiederverwendet statt eines dritten, abweichenden Musters. Die
   Desktop-Sonderbehandlung (verankertes Dropdown) steht zusammen mit der
   des Filter-Panels in der gemeinsamen Media Query weiter unten. */
.kopf-verlauf-panel-bg {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(10, 18, 30, 0.45);
}
.kopf-verlauf-panel {
    position: fixed;
    z-index: 50;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: min(24rem, 75vh);
    overflow-y: auto;
    background: var(--flaeche);
    border-radius: 1.1rem 1.1rem 0 0;
    padding: 1rem 1.15rem calc(1.15rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -0.5rem 2rem rgba(10, 18, 30, 0.25);
}
/* Runde 84: "Zurück"-Knopf ganz oben im Aufklappmenü - ersetzt den
   entfallenen .kopf-zurueck-pfeil in der Menüleiste (s. o.), ruft dasselbe
   echte history.back() (SIT_VERLAUF.echtesZurueck(), siehe js/verlauf.js)
   auf. Eigene, etwas kräftigere Optik (Blau statt des gedämpften Texts der
   übrigen Verlaufs-Einträge) - optisch ein eigener Befehl, keine weitere
   "zuletzt besuchte Seite". */
.kopf-verlauf-zurueck {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin: -0.2rem -0.3rem 0.4rem;
    padding: 0.6rem 0.65rem;
    border: none;
    border-radius: var(--radius);
    background: none;
    color: var(--blau-dunkel);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}
.kopf-verlauf-zurueck:hover, .kopf-verlauf-zurueck:focus-visible { background: var(--blau-hell); }
.kopf-verlauf-zurueck svg { flex: none; opacity: 0.85; }
.kopf-verlauf-panel-kopf {
    margin-bottom: 0.6rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--blau-rand);
}
.kopf-verlauf-panel-kopf strong { font-size: 0.95rem; color: var(--blau-dunkel); }
.kopf-verlauf-liste { display: flex; flex-direction: column; gap: 0.3rem; }
.kopf-verlauf-eintrag {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.6rem 0.65rem;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text);
}
.kopf-verlauf-eintrag:hover, .kopf-verlauf-eintrag:focus-visible { background: var(--blau-hell); color: var(--blau-dunkel); }
.kopf-verlauf-label { font-weight: 600; }
.kopf-verlauf-zeit { flex: 0 0 auto; font-size: 0.78rem; color: var(--text-dezent); }
.kopf-verlauf-leer { margin: 0; padding: 0.4rem 0.2rem; color: var(--text-dezent); font-size: 0.88rem; }

/* Runde 84: gemeinsamer Wrapper für ALLES, was rechts im Kopf steht - bisher
   lag margin-left:auto direkt auf .kopf-burger-gruppe, jetzt auf diesem
   Wrapper, damit der Ansicht-Umschalter (.kopf-ansicht-link, nur für Admins
   auf ticket.php) "nach rechts wandern, links neben den Burger Menü
   Button" steht, ausdrücklicher Wunsch - beide Elemente rutschen dadurch
   gemeinsam ganz an den rechten Rand, mit einem schlichten gap dazwischen,
   statt wie bisher als zwei unabhängig positionierte Geschwister in
   .kopf-innen. */
.kopf-rechts-gruppe { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; flex: none; }
/* Runde 83: Burger-Menü (.kopf-burger-knopf) oben rechts im Kopf - "Ich
   hätte doch gerne ein kleines Burgermenü rechts oben in der Menüleiste,
   wo die wichtigsten Seiten verlinkt sind, aber auch der Abmelden Button",
   ausdrücklicher Wunsch. Exakt dasselbe Bottom-Sheet-/Dropdown-Muster wie
   das Verlaufs-Aufklappmenü oben (.kopf-verlauf-panel-bg/.kopf-verlauf-
   panel) - eigene Klassen, weil dieses Menü RECHTS statt links verankert
   ist und inhaltlich nichts mit dem Seitenverlauf zu tun hat (fester
   Seiten-Katalog + Abmelden statt zuletzt besuchter Seiten, siehe
   js/menue.js). .kopf-burger-gruppe ist position:relative (wie
   .kopf-logo-gruppe links) für die Desktop-Verankerung weiter unten; das
   margin-left:auto, das die ganze rechte Seite an den Rand drückt, liegt
   seit Runde 84 auf dem umschließenden .kopf-rechts-gruppe (s. o.), nicht
   mehr hier. */
.kopf-burger-gruppe { position: relative; flex: none; }
.kopf-burger-knopf {
    width: 2.3rem;
    height: 2.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--blau-rand);
    border-radius: 999px;
    background: var(--flaeche);
    color: var(--blau-dunkel);
    cursor: pointer;
}
.kopf-burger-knopf:hover, .kopf-burger-knopf:focus-visible, .kopf-burger-knopf[aria-expanded="true"] { border-color: var(--blau); background: var(--blau-hell); }
/* Runde 95: "Der Passwort Generator verdeckt bei Admins den 'Abmelden'
   Eintrag des Burger Menüs. Bitte auf ein Burger Menü umstellen, das von
   oben aufklappt", ausdrücklicher Wunsch - vorher war .kopf-burger-panel
   auf schmalen/Touch-Bildschirmen (wie .kopf-verlauf-panel/.filter-panel,
   siehe deren Kopfkommentare) ein von UNTEN hochfahrendes Bottom-Sheet
   (position:fixed, bottom:0) und nur auf "echten" Desktop-Bildschirmen
   (die seinerzeitige Media Query "width > 480px and (hover: hover) and
   (pointer: fine)" weiter unten) ein oben verankertes Dropdown direkt unter
   dem Burger-Knopf. Genau DAS war die eigentliche Ursache des gemeldeten
   Fehlers: zwei verschiedene, beide fest positionierte Bottom-Elemente
   (dieses Bottom-Sheet UND z. B. ".gw-bar", der fest angeheftete
   Passwort-Generator-Streifen der Zugangsdaten-Verwaltung unter
   zugangsdaten/) wollten sich denselben unteren Bildschirmrand teilen - ihr
   jeweiliger z-index half dabei nicht: .kopf-burger-panel steckt über
   .kopf-burger-gruppe in .kopf-gruppe, und DIE hat selbst schon ein
   eigenes z-index (siehe dort) - das öffnet einen eigenen
   Stapelkontext, in dem das hohe z-index des Burger-Panels nur INNERHALB
   dieses Kontexts zählt, nicht gegenüber Geschwister-Elementen wie .gw-bar
   außerhalb davon (ein bekannter CSS-Stolperstein bei verschachtelten
   position:fixed-Elementen). Die sauberste Lösung ist deshalb nicht ein
   gewillkürt noch höheres z-index (nur ein Wettrüsten mit dem nächsten
   künftigen fest angehefteten Element), sondern das, was ausdrücklich
   gewünscht war: das Burger-Menü klappt jetzt IMMER (nicht mehr nur auf
   Desktop-Breite) von OBEN, direkt unter dem Knopf, auf - dieselbe
   Dropdown-Form, die es bisher nur auf echten Desktop-Bildschirmen gab,
   jetzt die einzige Form. Dadurch reicht das Panel gar nicht mehr bis zum
   unteren Bildschirmrand hinunter, der Stapelkontext-Konflikt mit .gw-bar
   (oder jedem anderen künftigen Bottom-Element) entfällt komplett, nicht
   nur kosmetisch behoben. Die bisherige Media-Query-Sonderregel für
   Desktop (siehe frühere Fassung dieser Datei) ist damit überflüssig und
   entfallen - .kopf-verlauf-panel/.filter-panel bleiben bewusst UNVERÄNDERT
   beim bisherigen Bottom-Sheet-auf-Touch-Verhalten, der Wunsch betraf
   ausdrücklich nur das Burger-Menü. */
.kopf-burger-panel-bg {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}
.kopf-burger-panel {
    position: absolute;
    z-index: 50;
    inset: auto 0 auto auto;
    top: calc(100% + 0.5rem);
    bottom: auto;
    left: auto;
    width: 15rem;
    max-width: calc(100vw - 2.3rem);
    max-height: 24rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    background: var(--flaeche);
    border-radius: var(--radius);
    padding: 0.5rem;
    box-shadow: 0 0.75rem 2rem rgba(10, 18, 30, 0.18);
}
/* Bugfix: "display: flex" oben überschreibt sonst das Standard-Verhalten
   des hidden-Attributs (beide Selektoren [.kopf-burger-panel vs. [hidden]]
   kommen aus unterschiedlichen Stylesheets/Spezifitäts-Ebenen, und das
   UA-Default für [hidden] ist zu schwach, um gegen eine eigene
   display-Deklaration zu bestehen) - ohne diese Regel bliebe das Panel
   trotz hidden-Attribut sichtbar (per Playwright-Test aufgedeckt: Panel war
   von Anfang an sichtbar, Escape/Klick-daneben schlossen es aria- aber
   nicht optisch). .kopf-verlauf-panel hat dasselbe Problem nicht, weil es
   gar kein eigenes "display" setzt. */
.kopf-burger-panel[hidden] { display: none; }
.kopf-burger-eintrag {
    padding: 0.65rem 0.7rem;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
}
.kopf-burger-eintrag:hover, .kopf-burger-eintrag:focus-visible { background: var(--blau-hell); color: var(--blau-dunkel); }
.kopf-burger-trenner { border: none; border-top: 1px solid var(--blau-rand); margin: 0.4rem 0; }
.kopf-burger-eintrag--abmelden { color: var(--fehler); }
.kopf-burger-eintrag--abmelden:hover, .kopf-burger-eintrag--abmelden:focus-visible { background: var(--fehler-hell); color: var(--fehler-dunkel); }
/* "Daneben soll IT-SUPPORT stehen, in der Selben Höhe wie das Logo. In Dem
   Heisenberg Blau." - line-height:1 + derselbe Flex-Align wie das Bild
   sorgen für die gleiche vertikale Mitte, die Farbe kommt vom umgebenden
   .kopf-logo-link (color: var(--blau-dunkel)) statt einer eigenen Regel. */
.kopf-logo-text {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1;
    white-space: nowrap;
}
/* Runde 84: der bisherige "Admin-Panel"-Knopf (.kopf-admin-link, "Als Admin
   soll oben rechts noch ein direkt link zum Admin Panel sein") ist auf
   ausdrücklichen Wunsch ("Button Admin-Panel löschen") komplett entfallen -
   das Admin-Dashboard blieb damals weiterhin über das Burger-Menü/die
   unauffälligen Fuß-Links erreichbar (siehe .kopf-burger-eintrag; die
   damaligen Fuß-Links selbst, ".fuss-admin-links", sind seit der
   Fußzeilen-Vereinheitlichung in Runde 85 entfallen, siehe dort). */
/* Runde 74: "Ich brauche auf der IT-Support Seite als Admin einen kleinen
   Button, mit dem ich zwischen Admin Ansicht und 'normaler' Lehreransicht
   wechseln kann. Am besten oben rechts in der Menüleiste neben dem Admin
   Panel Button", ausdrücklicher Wunsch - siehe ansicht-umschalten.php und
   die $sitZeigeAlsAdmin-Logik in ticket.php.
   Runde 75: "Außerdem soll ein Lehrersymbol zu sehen sein, wenn man im
   lehrermodus ist, und ein AdminSymbol, wenn man im Admin modus ist. Ohne
   'Als Lehrkraft ansehen' oder 'Admin Ansicht'", ausdrücklicher Wunsch -
   statt eines Text-Knopfs jetzt ein reiner Icon-Knopf (quadratisch statt
   variabler Textbreite, Beschriftung nur noch als title/aria-label,
   siehe ticket.php).
   Runde 84: "Lehrer Ansicht Button soll nach rechts wandern, links neben
   den Burger Menü Button", ausdrücklicher Wunsch - steht jetzt zusammen mit
   .kopf-burger-gruppe INNERHALB von .kopf-rechts-gruppe (siehe dort), statt
   wie bisher direkt neben dem (jetzt entfallenen) Admin-Panel-Knopf. */
.kopf-ansicht-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    padding: 0;
    border: 1px dashed var(--blau-rand);
    border-radius: var(--radius);
    background: none;
    color: var(--text-dezent);
    text-decoration: none;
    cursor: pointer;
}
.kopf-ansicht-link svg { display: block; }
.kopf-ansicht-link:hover, .kopf-ansicht-link:focus-visible { border-color: var(--blau); border-style: solid; color: var(--blau); background: var(--blau-hell); }

/* --- Zweite, schlanke Menüleiste unter dem Kopf (Runde 76/77) ------------
   Runde 76: "Die Label bzw Links 'Übersicht'/'Neue Zugangsdaten'/
   'Einstellungen' sollen in eine kleinere zweite Menüleiste unter die
   andere Menüleiste wandern, aber deutlich kleiner als jetzt. Das soll
   auch mit den filter und sortierbuttons auf der meine Tickets seite und
   der Aktuelle Probleme seite passieren", ausdrücklicher Wunsch.
   .unterleiste ist der gemeinsame Rahmen dafür - sitzt als zweites Kind in
   .kopf-gruppe (siehe dort) direkt unter .kopf, bleibt zusammen mit ihm
   beim Scrollen oben stehen. Auf ticket.php füllt js/ticket.js sie bei
   "Aktuelle Probleme"/"Meine Tickets" mit der (deutlich verkleinerten,
   s. u.) Filter-/Sortierleiste - sonst bleibt sie leer und per
   hidden-Attribut unsichtbar (kein leerer Leiste-Streifen ohne Inhalt).
   Runde 77: "Die Label Übersicht, Neue Zugangsdaten und Einstellung sollen
   doch weg. Stattdessen soll in diese neue Menüleiste immer der Dialog
   [...] erscheinen", ausdrücklicher Wunsch - die Reiter-Leiste
   (.zd-nav-link, zugangsdaten/index.php) ist deshalb komplett entfallen
   (siehe zugangsdaten/js/main.js/newentry.js). .unterleiste zeigt dort
   jetzt stattdessen denselben Fortschrittsbalken wie ticket.php, sobald
   der "Neue Zugangsdaten"-Dialog läuft (siehe .unterleiste-fortschritt
   weiter unten) - auf den übrigen Ansichten (Übersicht/Einstellungen)
   bleibt sie wie gehabt leer/unsichtbar. position:relative, damit der
   Fortschrittsbalken (position:absolute) sich an IHRER unteren Kante
   ausrichten kann. */
.unterleiste {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1.25rem;
    background: var(--flaeche);
    border-bottom: 1px solid var(--blau-rand);
}
.unterleiste[hidden] { display: none; }

/* Runde 77: "Wenn so ein Dialog erscheint, soll die Linie, die aktuell
   noch unter der 1. Menüleiste ist, unter die 2. Menüleiste wandern und
   dort einen Fortschrittsbalken darstellen mit schöner Animation, so dass
   der Balken von links anfängt und dann nach jedem Schritt weiter
   wandert. Da wo der Fortschrittsbalken noch nicht ist, soll die Linie so
   dick sein, wie sonst um die Kacheln herum bzw so wie aktuell auch die
   Linie unter der 2. Menüleiste", ausdrücklicher Wunsch - Runde 78: "das
   neue Balkensystem ist nur in der Admin ansicht umgesetzt, nicht in der
   Lehrkraft ansicht" - gilt seitdem für ALLE DREI mehrschrittigen Dialoge
   (Melde-Assistent auf ticket.php, "Neue Zugangsdaten" auf
   zugangsdaten/index.php UND das Lehrkraft-Formular auf zugangsdaten.php,
   das dafür jetzt ebenfalls eine eigene #unterleiste bekommen hat). Zwei
   Schichten: die schon vorhandene, dünne border-bottom von .unterleiste
   (1px, dieselbe Dicke wie der Rahmen um die Kacheln, siehe .kachel-btn)
   bleibt unverändert als "noch nicht erreicht"-Grundzustand liegen;
   darüber wächst dieser Balken (3px, exakt die bisherige Dicke von .kopf's
   border-bottom) von links nach rechts. .kopf selbst verliert
   währenddessen seine sonst feste blaue Linie
   (.kopf-gruppe--fortschritt weiter unten) - "die Linie wandert eben um"
   auf diese neue Stelle. js/ticket.js, zugangsdaten/js/newentry.js und
   js/zugangsdaten.js setzen/entfernen beide Klassen gemeinsam (siehe
   dortige renderFortschritt()/aktualisiereFortschritt()). */
.kopf-gruppe--fortschritt .kopf {
    border-bottom-color: transparent;
}
.unterleiste-fortschritt {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    pointer-events: none;
}
.unterleiste-fortschritt-balken {
    height: 100%;
    width: 0%;
    background: var(--blau);
    border-radius: 0 999px 999px 0;
    transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Runde 78: "Die Menüleiste ist größer, wenn es einen Dialog gibt. Die
   soll genauso groß sein wie vorher, also z.B. auf der Startseite, nur
   dass der blaue Balken zum Fortschrittsbalken wird", ausdrücklicher
   Wunsch - .unterleiste trägt normalerweise ein eigenes Innenpolster
   (padding oben/unten, siehe oben), das für die Filter-/Sortierleiste auf
   "Aktuelle Probleme"/"Meine Tickets" auch gebraucht wird. Zeigt die
   Leiste aber NUR den Fortschrittsbalken (kein Filter-Inhalt, der Balken
   selbst liegt wegen position:absolute ohnehin außerhalb des normalen
   Layoutflusses), blähte dieses Polster die ganze zweite Menüleiste
   sichtbar auf - mehrere Pixel höher als z. B. auf der Startseite, wo
   .unterleiste komplett unsichtbar ist (display:none). Diese Klasse hebt
   das Polster für genau diesen Fall wieder auf, übrig bleibt nur noch die
   dünne 1px-Linie (s. o.) als einzige zusätzliche Höhe gegenüber der
   Startseite - exakt der gewünschte Zustand "genauso groß wie vorher". */
.unterleiste--nur-fortschritt {
    padding: 0;
    min-height: 0;
}

/* Runde 76-79 hatten hier die Filter-/Sortierleiste (.stoerung-filterleiste,
   siehe deren eigener Kopfkommentar weiter unten) innerhalb von .unterleiste
   deutlich kompakter gestaltet (eigene Höhen/Innenabstände, sr-only-Labels)
   - Runde 80: "Doch wieder anders: Die Filter und sortieroptionen sollen
   immer in einer eigenen Kachel sein, nicht in der Menüleiste",
   ausdrücklicher Wunsch - die Filterleiste zieht damit aus #unterleiste
   zurück in den Inhalt (siehe renderStoerungsuebersicht() in js/ticket.js,
   jetzt in einer ".stoerung-filter-kachel", s. o.) und bekommt dort wieder
   ihre normale, nicht künstlich verkleinerte Optik samt sichtbaren Labels -
   #unterleiste zeigt für "Aktuelle Probleme"/"Meine Tickets" seitdem gar
   nichts mehr an (bleibt wie auf der FAQ-Startseite unsichtbar). Die
   gesamte .unterleiste-spezifische Kompakt-/Höhen-/Breakpoint-CSS dafür ist
   dadurch ersatzlos entfallen - .unterleiste wird jetzt ausschließlich noch
   für die Fortschrittsbalken der drei Assistenten verwendet (s. o.). */

/* --- Layout --------------------------------------------------------------*/
/* Runde 81: "max-width: 1194px; margin: 0 auto;" dazu (genau wie bei
   .kopf-innen, siehe ausführliche Begründung dort - dieselbe Breite, damit
   Kopf-Inhalt und Seiteninhalt bei jeder Fensterbreite exakt untereinander
   bündig bleiben) - nimmt Runde 59s "max-width ... ist entfallen" für
   GROSSE Bildschirme teilweise zurück, bleibt für kleine/mittlere
   Bildschirme (bis 1194px) unverändert bei "nutzt die volle
   Bildschirmbreite aus" (@media (width <= 480px) weiter unten passt
   innerhalb dessen weiterhin nur die Innenabstände an). */
.wizard {
    flex: 1;
    width: 100%;
    max-width: 1194px;
    margin: 0 auto;
    /* Runde 57: der obere Abstand zum Kopf war 1.5rem - deutlich mehr als
       der Abstand der Kacheln untereinander (0.6rem, siehe .start-aktionen/
       .start-treff) und wirkte dadurch unausgewogen groß ("Der
       Abstand von Top Menü zum Inhalt ist zu groß. Der soll so groß sein,
       wie der Abstand der einzelnen Kacheln zueinander.", ausdrücklicher
       Wunsch) - jetzt auf dasselbe Maß gebracht. */
    padding: 0.6rem 1.25rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.fuss {
    text-align: center;
    padding: 1rem;
    font-size: 0.78rem;
    color: var(--text-dezent);
}

/* --- Anmelde-Kachel (Runde 74) ------------------------------------------
   "Der Login Screen soll eine kleine Kachel mittig sein, ohne menüleiste
   oben", ausdrücklicher Wunsch - ersetzt den Aufbau aus Runde 73
   (header.kopf + volle .wizard/.schritt-Spalte, siehe Git-Historie) auf
   login.php UND, aus demselben Grund wie die Umstellung in Runde 73 (alle
   drei gehören zum selben Anmelde-Ablauf und sollen einheitlich aussehen),
   auch auf auth.php::zugriffVerweigertSeite() ("Kein Zugriff") und
   login-iserv.php::iservFehlerseite(). .anmelde-buehne nimmt genau den
   Platz ein, der vorher .wizard gehörte (flex: 1, volle Breite), zentriert
   die eigentliche Kachel darin aber sowohl horizontal als auch vertikal,
   statt sie wie .wizard als linksbündige volle Spalte unter einem Kopf
   anzuordnen. .anmelde-kachel trägt dafür selbst Rahmen/Hintergrund/
   Schatten - .schritt (weiter oben) tut das bewusst NICHT, der bisherige
   Karten-Eindruck kam dort allein vom umschließenden header+main-Aufbau,
   der hier ja genau entfällt. */
.anmelde-buehne {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1.25rem;
}
.anmelde-kachel {
    width: 100%;
    max-width: 22rem;
    background: var(--flaeche);
    border: 1px solid var(--blau-rand);
    border-radius: var(--radius);
    padding: 1.75rem 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    text-align: center;
}
/* Dasselbe Logo+Text-Paar wie bisher im Kopf (.kopf-logo-link), jetzt oben
   in der Kachel selbst statt in einer eigenen Kopfzeile darüber - "Nimm
   dazu das logo, dass auch auf der ticket seite oben links ist" (Runde 73)
   gilt inhaltlich unverändert weiter, nur die Platzierung ändert sich. */
.anmelde-logo-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--blau-dunkel);
    cursor: pointer;
}
.anmelde-logo-link:hover, .anmelde-logo-link:focus-visible { color: var(--blau); }
.anmelde-logo-icon {
    display: block;
    height: 2.6rem;
    width: auto;
}
.anmelde-logo-text {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1;
}
.anmelde-kachel h2 { margin: 0; font-size: 1.15rem; color: var(--blau-dunkel); }
.anmelde-kachel .hinweis { margin: 0; color: var(--text-dezent); font-size: 0.9rem; }
.anmelde-kachel .btn { width: 100%; }
/* Längere Fehler-/Hinweistexte lesen sich linksbündig leichter als
   zentriert - nur hier abweichend von der sonst zentrierten Kachel. */
.anmelde-kachel .globale-fehlermeldung { text-align: left; }

/* --- Fortschrittsanzeige --------------------------------------------------
   Runde 77: ticket.php (Melde-Assistent) und zugangsdaten/index.php
   ("Neue Zugangsdaten") nutzen dafür den animierten Balken in der zweiten
   Menüleiste (.unterleiste-fortschritt, siehe dort) statt einer Punkte-Zeile
   - Runde 78: "das neue Balkensystem ist nur in der Admin ansicht
   umgesetzt, nicht in der Lehrkraft ansicht, bitte fixen!", ausdrücklicher
   Wunsch - seitdem gilt dasselbe auch für das Lehrkraft-Formular auf
   zugangsdaten.php (bekam dafür jetzt ebenfalls eine eigene #unterleiste,
   siehe dort/js/zugangsdaten.js). Die früheren Fortschritts-Punkte
   (.fortschritt/.punkt, #zd-fortschritt) hatte bis dahin nur noch diese
   eine Seite verwendet - mit ihrem Umstieg sind beide Klassen jetzt
   vollständig ungenutzt und deshalb komplett entfallen. */

/* --- Schritt-Karte(n) -----------------------------------------------------
   Runde 78: "In der Admin Ansicht hast du den Dialog in eine eigene Kachel
   gemacht ... Das hätte ich gerne in allen Dialogen so!" - Runde 79 hatte
   das zunächst auf die Klasse ".schritt" selbst gelegt (traf dadurch
   versehentlich auch FAQ-Startseite/"Aktuelle Probleme" mit, siehe deren
   eigener Korrektur-Kommentar in der Git-Historie) und danach auf eine
   EIGENE Klasse ".schritt--dialog" verschoben, aber als EINE einzige Kachel
   um Überschrift+Inhalt zusammen.
   Runde 80: "Doch wieder anders ... Bei Neues Ticket soll das 'Worum
   gehts', 'Welches Gebäude' usw auch in einer eigenen Kachel sein, analog
   zur Admin Ansicht, wenn man fehlende Zugangsdaten anlegt" + "Bei der
   Lehreransicht ist es beim Anlegen von fehlenden Zugangsdaten auch noch
   falsch, da ist alles in einer Kachel", beides ausdrücklicher Wunsch - die
   Admin-Referenz (zugangsdaten/index.php, newentry.js::kopf()/.card
   "schritt") zeigt NICHT eine, sondern ZWEI Kacheln je Schritt: eine
   schmale Kopf-Kachel (Seitentitel + aktuelle Frage) und darunter die
   eigentliche Inhalts-Kachel (Auswahl-Kacheln/Formularfelder) - dazwischen
   UND darunter (vor Zurück/Weiter) jeweils derselbe Abstand wie zwischen
   allen anderen Kacheln auf der Seite, siehe Screenshot-Referenz. Jetzt
   genauso hier: ".schritt-kopf" (Titel+Frage) und ".schritt-kachel"
   (eigentlicher Inhalt) sind zwei GETRENNTE, gleich aussehende Kacheln
   (identisch zu .kachel-btn/.card: Rahmen/Hintergrund/Ecken), die jede
   renderXxx()-Funktion in js/ticket.js jetzt selbst als zwei Geschwister-
   <div>s in ihr innerHTML schreibt (ersetzt die bisherige EINE
   ".schritt--dialog"-Kachel um beides). #schritt-inhalt selbst (Klasse
   ".schritt") ist dadurch während eines Dialogs nur noch ein reiner
   Stapel-Container für diese zwei Kacheln - die Klasse ".schritt--wizard"
   (js/ticket.js, renderFortschritt()/render(), genau wie zuvor
   ".schritt--dialog" nur innerhalb ansicht === 'wizard' gesetzt) gibt ihm
   dafür display:flex+gap, aber bewusst KEINE eigene Kachel-Optik mehr -
   die liegt jetzt ausschließlich auf den beiden Kindern. Auf
   zugangsdaten.php (immer nur der eine Lehrkraft-Assistent, keine zweite
   Ansicht) tragen ".schritt-screen" direkt dieselbe Stapel-Eigenschaft fest
   im PHP-Markup (siehe dort), ohne JS-Umschaltung. #wizard-nav/
   #zd-wizard-nav/.zd-final-nav (Zurück/Weiter) bleiben weiterhin bewusst
   AUSSERHALB jeder Kachel (eigenes Geschwister-Element, genau wie
   navHtml() im Admin-Assistenten es auch hält, s. Screenshot: die Knöpfe
   stehen frei unter der letzten Kachel, nicht selbst in einer). */
.schritt--wizard {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.schritt-kopf,
.schritt-kachel,
.stoerung-filter-kachel {
    background: var(--flaeche);
    border: 1px solid var(--blau-rand);
    border-radius: var(--radius);
    padding: 1rem 1.15rem;
}
/* Runde 80: "Die Filter und sortieroptionen sollen immer in einer eigenen
   Kachel sein, nicht in der Menüleiste", ausdrücklicher Wunsch (Gegenteil
   von Runde 76) - ".stoerung-filter-kachel" ist dieselbe Kachel-Optik wie
   oben, nur mit zusätzlichem Abstand zur darunterliegenden Störungsliste
   (die KEINE eigene Kachel ist, siehe renderStoerungsuebersicht()) - dieser
   Abstand gehört bewusst nur hierher, nicht allgemein zu ".schritt-kachel"
   (dort regelt stattdessen der flex-gap von ".schritt--wizard" den
   Abstand zu Nachbar-Kacheln, ein zusätzlicher margin-bottom würde sich
   dort draufaddieren und zu viel Abstand ergeben). */
.stoerung-filter-kachel { margin-bottom: 1.25rem; }
/* Runde 81: position:relative, damit das neue Filter-Panel (.filter-panel,
   s. u.) auf dem Desktop als an den Filter-Knopf "angedocktes" Dropdown
   positioniert werden kann (position: absolute relativ zu DIESER Kachel,
   s. u.) statt nur relativ zum gesamten Dokument. */
.stoerung-filter-kachel { position: relative; }
.schritt h2 {
    margin: 0 0 0.3rem;
    font-size: 1.15rem;
    color: var(--blau-dunkel);
}
.schritt .hinweis {
    margin: 0 0 1rem;
    color: var(--text-dezent);
    font-size: 0.9rem;
}
/* Innerhalb der Kopf-Kachel übernimmt deren eigener flex-gap (s. u.) den
   Abstand zwischen Titel und Frage - die obigen, für die frühere
   Einzel-Kachel gedachten Außenabstände (0.3rem unter der Überschrift,
   1rem unter dem Hinweistext, zur Trennung vom direkt folgenden Inhalt)
   wären hier doppelt gemoppelt bzw. störten die gleichmäßige Lücke.
   Gleiche Spezifität wie die beiden Regeln oben (je ein Element- + ein
   Klassenselektor) - gewinnt nur, weil sie weiter unten in der Datei steht,
   siehe ausführliche Begründung dieses genauen Stolpersteins im
   Runde-79-Abschnitt des Kopfkommentars zur Filterleiste weiter unten. */
.schritt-kopf {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.schritt-kopf h2 { margin: 0; }
.schritt-kopf .hinweis { margin: 0; }

/* --- Buttons -------------------------------------------------------------*/
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.65rem 1.1rem;
    /* Runde 49: 1px statt 2px, passend zum übrigen dünneren Rahmen-Stil -
       hält Knöpfe außerdem exakt so hoch wie die (jetzt ebenfalls 1px
       umrandeten) Eingabefelder daneben, siehe z. B. .filter-suchform. */
    border: 1px solid var(--blau);
    border-radius: var(--radius);
    background: var(--blau);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.btn:hover { background: var(--blau-dunkel); border-color: var(--blau-dunkel); }
.btn:disabled { background: var(--blau-rand); border-color: var(--blau-rand); color: #fff; cursor: not-allowed; }
.btn--sekundaer {
    background: var(--flaeche);
    color: var(--blau);
}
.btn--sekundaer:hover { background: var(--blau-hell); }
.btn--klein { padding: 0.4rem 0.8rem; font-size: 0.85rem; }
.btn--voll { width: 100%; }
/* Runde 32: .btn setzt einen eigenen display-Wert (inline-flex) - ohne
   diesen Override gewinnt die Klassenregel gegen das hidden-Attribut (siehe
   "Filter zurücksetzen" in der Störungsübersicht, per JS ein-/ausgeblendet,
   ohne die ganze Filterzeile neu zu rendern - sonst würde das
   Ticketnummer-Feld beim Tippen den Fokus verlieren). */
.btn[hidden] { display: none; }

.wizard-nav {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}
.wizard-nav .rechts { margin-left: auto; display: flex; gap: 0.75rem; }
/* Runde 76: "Beim Schritt 'Worum gehts' beim Anfordern der Zugangsdaten
   sind die Zurück und Weiter buttons zu dicht an den Kacheln darüber",
   ausdrücklicher Wunsch - betrifft #zd-wizard-nav auf zugangsdaten.php
   (dem Anfrage-Formular für Lehrkräfte): anders als auf ticket.php/im
   Admin-Assistenten (dort ist .wizard-nav ein direktes Kind von .wizard und
   bekommt seinen Abstand nach oben automatisch über dessen
   "gap: 1.25rem", siehe .wizard unten) steckt #zd-wizard-nav hier
   zusätzlich noch in .schritt/<form>, VOR diesem flex-gap - ohne eigenen
   oberen Abstand hing die Zeile deshalb direkt an den Kacheln/Feldern des
   gerade sichtbaren Schritts. Bewusst per ID (nicht .wizard-nav generell),
   damit ticket.php und der Admin-Assistent unberührt bleiben. */
#zd-wizard-nav { margin-top: 1rem; }
/* Runde 76: "Anfrage absenden muss zentriert, zurück links daneben",
   ausdrücklicher Wunsch - eigene Zeile nur für den letzten Schritt (siehe
   zugangsdaten.php/js/zugangsdaten.js), beide Knöpfe als zentrierte Gruppe
   nebeneinander statt wie zuvor "Anfrage absenden" allein im Schritt-Inhalt
   und "Zurück" separat darunter in #zd-wizard-nav.
   Runde 80: ".zd-final-nav" ist jetzt ein Geschwister NACH ".schritt-kachel"
   innerhalb von ".schritt-screen" (siehe zugangsdaten.php sowie deren
   eigener flex-gap in css/ticket.css) statt wie zuvor ein Kind VON
   ".schritt-kachel" - "margin-top" dafür entfallen, sonst käme der
   1rem-Abstand aus dem flex-gap noch oben drauf (derselbe Stolperstein wie
   bei ".stoerung-filter-kachel", siehe deren Kommentar weiter oben). */
.zd-final-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
}

/* --- Kachel-Auswahl (Kategorie/Gebäude/Raum/Pool) ------------------------ */
.kachel-auswahl {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.75rem;
}
/* Runde 61: Zusatzklasse für FESTE Spaltenzahlen statt der variablen
   auto-fill-Spaltenzahl der Basisklasse .kachel-auswahl oben - zwei
   Spalten auf dem Smartphone, vier ab Tablet-/Desktopbreite (siehe Media
   Query weiter unten). Ursprünglich NUR für die Kategorie-Kacheln
   (renderKategorie(), "Worum geht's?") gedacht ("kategorie-auswahl"
   hieß die Klasse deshalb zunächst) - Runde 62 wollte dieselbe größere
   Kachel-Optik dann aber ausdrücklich AUCH bei Gebäude/Raum/Gebäude-Frage/
   Pool ("Die Kacheln bei der Auswahl der Gebäude sollen doch lieber
   größer, genauso wie die Kacheln bei der Auswahl bei 'Worum gehts'" /
   "Die Kacheln bei Notebookwagen und iPad-Koffer sollen auch so groß wie
   die Kacheln bei der Gebäudeauswahl", beides ausdrücklicher Wunsch) -
   seither entsprechend umbenannt in den neutraleren Namen
   ".kachel-auswahl-gross" und auf alle fünf Auswahl-Schritte angewendet
   (siehe renderKategorie()/renderGebaeude()/renderRaum()/
   renderGebaeudeFrage()/renderPool() in ticket.js). Die variable
   auto-fill-Basisklasse .kachel-auswahl bleibt als eigenständige Variante
   bestehen (aktuell ohne eigene Verwendung mehr, aber als Baustein für
   einen künftigen Schritt mit wirklich wechselnder, nicht vorab bekannter
   Kachelzahl absichtlich nicht entfernt). */
.kachel-auswahl-gross {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
.kachel-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1.1rem 0.6rem;
    border: 1px solid var(--blau-rand);
    border-radius: var(--radius);
    background: var(--flaeche);
    color: var(--blau-dunkel);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    min-height: 4.5rem;
}
.kachel-btn:hover,
.kachel-btn:focus-visible { border-color: var(--blau); background: var(--blau-hell); }
/* Runde 49 ("Ruhig & Klar"): runder Icon-Badge (Strich-SVG oder, bei einem
   von einem Admin frei angelegten Thema, dessen Emoji als Fallback) -
   ersetzt die bisherigen nackten Emojis auf den Start-/Themen-Kacheln, siehe
   iconBadgeHtml() in ticket.js. Größe/Abstand hier bewusst als eigene,
   kleine Komponente statt an .icon gekoppelt, weil .icon an anderer Stelle
   (z. B. Kategorie-Auswahl im Melde-Assistenten) weiterhin unverändert ein
   einzelnes Emoji ohne Kreis-Hintergrund zeigt. */
.icon-rund {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    background: var(--blau-hell);
    color: var(--blau);
    font-size: 1.05rem;
    line-height: 1;
}
.icon-rund svg { display: block; }
/* Kleine, textgroße Variante ohne Kreis (Themen-Überschrift, Suchtreffer-
   Fundstelle) - siehe iconInlineHtml() in ticket.js. */
.icon-inline {
    display: inline-flex;
    vertical-align: -0.15em;
    margin-right: 0.35rem;
    color: var(--blau);
}
.icon-inline svg { display: block; }
/* Chevron-Pfeil für alle auf-/zuklappbaren Kacheln/Zeilen (ersetzt die
   bisherigen ▲/▼-Textzeichen) - eine einzige SVG, die sich im offenen
   Zustand per Klasse um 180° dreht statt zwei Varianten zu pflegen, siehe
   chevronSvg() in ticket.js. */
.pfeil-svg { display: block; transition: transform 0.15s ease; }
.pfeil-svg--offen { transform: rotate(180deg); }
/* Runde 95: Vor-/Zurück-Pfeile der "IT-Treff"-/"Gute Nachrichten"-Kacheln
   (.start-treff-pfeil-btn/.start-gute-nachrichten-pfeil-btn weiter unten) -
   ersetzen seit Runde 95 die bisherigen Unicode-Pfeilzeichen, siehe
   pfeilNavSvg() in ticket.js für die ausführliche Begründung. "display:
   block" hier ist derselbe Kniff wie bei .pfeil-svg/.icon-inline svg oben:
   ein <svg> ist standardmäßig "inline" und bekommt dadurch (wie ein
   Textzeichen) einen kleinen Leerraum unter sich reserviert (Platz für
   Unterlängen wie "g"/"y") - genau DAS sorgte bei den runden Knöpfen für
   ein paar Pixel sichtbaren Versatz nach oben, trotz korrekt zentriertem
   Knopf selbst. */
.pfeil-nav-svg { display: block; }

.kachel-btn .unterzeile {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-dezent);
}
/* Runde 39: ausgewählter Zustand - anders als die übrigen Kachel-Schritte
   (die sofort mit gehWeiter() weiterspringen) bleibt renderGebaeudeFrage()
   nach einem Klick auf demselben Schritt stehen (der optionale Raum darf
   noch ausgefüllt werden), braucht also eine dauerhaft sichtbare
   "ausgewählt"-Markierung statt nur :hover/:focus-visible. */
.kachel-btn.aktiv {
    border-color: var(--blau);
    background: var(--blau);
    color: #fff;
}
.kachel-btn.aktiv .unterzeile { color: #e6edf5; }

/* Liste (ursprünglich für Raum-/Pool-Auswahl bei vielen Einträgen gedacht -
   "Grid wäre unübersichtlich"). Runde 61 stellte die Raum-Auswahl, Runde 62
   zusätzlich die Pool-Auswahl (Notebookwagen/iPad-Koffer) auf Kacheln um
   (siehe renderRaum()/renderPool() in ticket.js) - .listen-auswahl/
   .listen-btn haben seither KEINE Verwendung mehr im Code, bleiben aber
   als fertige Komponente bestehen, falls ein künftiger Schritt mit sehr
   vielen Einträgen (wo eine Kachel-Zeile pro Eintrag wirklich zu breit
   würde) wieder eine reine Liste braucht. */
.listen-auswahl {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.listen-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--blau-rand);
    border-radius: var(--radius);
    background: var(--flaeche);
    color: var(--text);
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
}
.listen-btn:hover, .listen-btn:focus-visible { border-color: var(--blau); background: var(--blau-hell); }
.listen-btn .anzahl { color: var(--text-dezent); font-size: 0.82rem; white-space: nowrap; }
.leer-hinweis {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--text-dezent);
    border: 2px dashed var(--blau-rand);
    border-radius: var(--radius);
}

/* --- Geräte-Auswahl (Checkboxen) ----------------------------------------*/
.geraete-auswahl { display: flex; flex-direction: column; gap: 0.5rem; }
.geraete-alle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--blau-rand);
    font-size: 0.85rem;
    color: var(--text-dezent);
}
/* Runde 31: .geraet-check war vorher selbst ein <label> (ganze Zeile klickt
   die Checkbox) - jetzt trägt nur noch .geraet-check-haupt darin das
   <label>, weil der Status-Hinweis bei gelb/rot ein eigener, unabhängig
   klickbarer <button> ist (Details aufklappen) und NICHT versehentlich die
   Checkbox mit umschalten darf. */
.geraet-check {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--blau-rand);
    border-radius: var(--radius);
}
.geraet-check:has(.geraet-check-haupt input:checked) { border-color: var(--blau); background: var(--blau-hell); }
.geraet-check-haupt {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}
.geraet-check-haupt input[type="checkbox"] {
    width: 1.2rem;
    height: 1.2rem;
    accent-color: var(--blau);
    flex: none;
}
.geraet-check .geraet-name { font-weight: 600; }
/* Runde 41: reines <span>, kein <button> mehr (vorher bei gelb/rot klickbar,
   um direkt die Details aufzuklappen) - das Label zeigt jetzt NUR noch den
   kurzen Ampel-Status als farbige Pille ("Das war damals anders gemeint",
   ausdrücklicher Wunsch: der Text trug bisher redundant die Farbe in Worten,
   siehe statusHinweisFuerMelder in store.js). Aufklappen übernimmt jetzt der
   eigene .geraet-status-verlauf-Knopf darunter. */
.geraet-check .geraet-status {
    margin-left: auto;
    flex: none;
    font-size: 0.75rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: var(--blau-hell);
    color: var(--blau-dunkel);
    white-space: nowrap;
    border: none;
    font: inherit;
}
.geraet-status--gruen { background: var(--gruen-hell); color: var(--gruen); }
.geraet-status--gelb  { background: var(--kond-c2-hell); color: var(--kond-c2); }
.geraet-status--rot   { background: var(--fehler-hell); color: var(--fehler); }
/* Runde 41: der Text des zuletzt hinterlegten Hinweises/Problems - IMMER
   sichtbar, ohne dass "Verlauf anzeigen" angeklickt werden muss ("es muss
   nicht aufgeklappt werden, damit man die bekannte Fehlermeldung schon
   sieht", ausdrücklicher Wunsch). */
.geraet-status-aktuell {
    flex-basis: 100%;
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: var(--text);
}
/* Runde 45 ("Neues Ticket"): "neben dem Gerät in einem Label 'Ticket
   beachten'" - kompaktes, auffälliges Warn-Label direkt neben dem
   Gerätenamen, nur wenn ticketVorschauFuerGeraet() (ticket.js) ein Ticket
   findet. Bewusst eine eigene, kräftigere Farbe (nicht die neutrale
   .geraet-status-Ampel) - es geht hier gezielt um "Achtung, das hat schon
   jemand gemeldet", nicht um den allgemeinen Gerätezustand. */
.geraet-ticket-badge {
    flex: none;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--fehler-hell);
    color: var(--fehler);
    white-space: nowrap;
}
/* Der strukturierte Ticket-Vorschau-Block darunter - "TICKET" (+ optional
   "NEU") + Datum + Text, darunter bei Bedarf der aktuelle Bearbeitungs-
   Status + Datum + letzter Kommentar. Ersetzt seit Runde 45 die vorherige,
   unspezifische .geraet-status-aktuell-Zeile für den Ticket-Fall; "Keine
   Probleme bekannt" (ticket.js) nutzt dieselbe Klasse für den Leerfall. */
.geraet-ticket-vorschau {
    flex-basis: 100%;
}
.ticket-vorschau-zeile {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3rem 0.5rem;
    margin-top: 0.4rem;
    font-size: 0.85rem;
}
.ticket-vorschau-zeile p {
    flex: 1 1 12rem;
    margin: 0;
    color: var(--text);
}
.ticket-vorschau-datum {
    flex: none;
    color: var(--text-dezent);
    font-size: 0.78rem;
    white-space: nowrap;
}
.ticket-label {
    flex: none;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    background: var(--blau-dunkel);
    color: #fff;
}
.ticket-label--neu { background: var(--fehler); }
.ticket-label--status { background: var(--blau-rand); color: var(--blau-dunkel); }
.ticket-label--status-geschlossen { background: var(--gruen-hell); color: var(--gruen); }
.ticket-label--status-in-bearbeitung { background: var(--kond-c2-hell); color: var(--kond-c2); }
.geraet-keine-probleme {
    flex-basis: 100%;
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: var(--text-dezent);
}
/* Knopf, der den VOLLEN Verlauf (alle Einträge, je mit Admin-Kürzel bei
   Hinweisen + Datum, siehe geraetHinweisDetails in ticket.js) ein-/ausklappt -
   dezent, wie ein Textlink, keine eigene Button-Optik. */
.geraet-status-verlauf {
    flex-basis: 100%;
    padding: 0;
    margin-top: 0.3rem;
    border: none;
    background: none;
    color: var(--blau);
    font-size: 0.78rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.geraet-status-verlauf:hover { color: var(--blau-dunkel); text-decoration: underline; }

.geraet-hinweis-details {
    flex-basis: 100%;
    margin-top: 0.4rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--blau-rand);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.hinweis-eintrag {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
    font-size: 0.85rem;
}
/* Runde 41: Admin-Kürzel vor dem Hinweistext (z. B. "Kis") - nur bei einem
   vom Admin angelegten Hinweis vorhanden (e.autor, siehe
   geraetHinweisDetails in ticket.js), bei einer über die Melde-Seite
   eingegangenen Störung bleibt dieses Element schlicht weg. */
.hinweis-eintrag .hinweis-autor {
    flex: none;
    font-weight: 700;
    color: var(--blau-dunkel);
}
.hinweis-eintrag .hinweis-text { flex: 1 1 12rem; color: var(--text); }
.hinweis-eintrag .hinweis-datum { flex: none; color: var(--text-dezent); white-space: nowrap; font-size: 0.78rem; }

/* --- Formularfelder ------------------------------------------------------*/
.feld { margin-bottom: 1rem; }
.feld label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--blau-dunkel);
}
/* Runde 63: input[type="email"] ergänzt - das neue Anfrage-Formular in
   zugangsdaten.php hat als erste Seite im Projekt ein echtes
   <input type="email">, das vorher hier nicht mit aufgeführt war und
   deshalb ungestylt (Browser-Standard, weißer Hintergrund) blieb - im
   Dark Mode ein grell-weißer Fleck mitten im Formular. Selbst entdeckt
   beim Dark-Mode-Test, kein ausdrücklicher Wunsch dazu nötig. */
.feld input[type="text"],
.feld input[type="search"],
.feld input[type="email"],
.feld select,
.feld textarea {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--blau-rand);
    border-radius: var(--radius);
    font: inherit;
    color: var(--text);
    background: var(--flaeche);
}
.feld input[type="text"]:focus,
.feld input[type="search"]:focus,
.feld input[type="email"]:focus,
.feld select:focus,
.feld textarea:focus {
    outline: none;
    border-color: var(--blau);
}
/* Runde 40: WebKit/Blink fügen input[type=search] einen eigenen
   "Löschen"-Kreis hinzu, der ohne diese Zeile am rechten Rand seltsam
   abgeschnitten aussieht (Feld ist volle Breite, kein Innenabstand dafür
   reserviert). */
.feld input[type="search"]::-webkit-search-cancel-button { margin-left: 0.4rem; }
.feld textarea { min-height: 6rem; resize: vertical; }
.feld-fehler {
    margin-top: 0.35rem;
    color: var(--fehler);
    font-size: 0.82rem;
}

/* --- Fotos ---------------------------------------------------------------*/
.foto-upload {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}
.foto-vorschau {
    position: relative;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 0.4rem;
    overflow: hidden;
    border: 1px solid var(--blau-rand);
}
.foto-vorschau img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-loeschen {
    position: absolute;
    top: 0.1rem;
    right: 0.1rem;
    width: 1.3rem;
    height: 1.3rem;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
}
.foto-hinzufuegen {
    width: 4.5rem;
    height: 4.5rem;
    border: 2px dashed var(--blau-rand);
    border-radius: 0.4rem;
    background: var(--flaeche);
    color: var(--blau);
    font-size: 1.6rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.foto-hinzufuegen:hover { background: var(--blau-hell); }
.foto-hinweis { flex-basis: 100%; font-size: 0.78rem; color: var(--text-dezent); }

/* --- Priorität -------------------------------------------------------- */
.radio-gruppe { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.25rem; }
.radio-option {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--blau-rand);
    border-radius: var(--radius);
    cursor: pointer;
}
.radio-option:has(input:checked) { border-color: var(--blau); background: var(--blau-hell); }
.radio-option input[type="radio"] { margin-top: 0.2rem; accent-color: var(--blau); flex: none; }
.radio-option .radio-titel { font-weight: 600; }
.radio-option .radio-beschreibung { font-size: 0.82rem; color: var(--text-dezent); }

.prio-vorschau {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: var(--radius);
    background: var(--blau-hell);
    border: 1px solid var(--blau-rand);
}
.prio-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    background: var(--prio-farbe, var(--blau));
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
}
.prio-text { font-size: 0.88rem; color: var(--text); }

/* --- Zusammenfassung ------------------------------------------------- */
.zusammenfassung-liste {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.zusammenfassung-liste li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--blau-rand);
    font-size: 0.9rem;
}
/* Runde 42: als farbiges Label-Badge statt schlichtem grauem Text
   ("Die Label beim Ticket-erstellen sind immer noch nicht farbig",
   ausdrücklicher Wunsch) - dieselbe Kasten-Optik wie .admin-label/
   .kommentar-autor-badge weiter unten, nur in der neutralen Schulfarbe
   Blau statt Grün/Grau (hier geht es um Feldbezeichnungen, nicht um eine
   Status- oder Autoren-Kennzeichnung). */
.zusammenfassung-liste .label {
    display: inline-block;
    flex: none;
    padding: 0.05rem 0.5rem;
    border-radius: 0.25rem;
    background: var(--blau-hell);
    color: var(--blau-dunkel);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.zusammenfassung-liste .wert { text-align: right; font-weight: 600; }

/* --- Bestätigung -------------------------------------------------------- */
.bestaetigung {
    text-align: center;
    padding: 2rem 1rem;
}
.bestaetigung .haken {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--blau);
    color: #fff;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bestaetigung h2 { color: var(--blau-dunkel); }
/* Runde 32: Ticketnummer(n) auf der Bestätigungsseite - eigene, etwas
   betontere Zeile (nicht Teil von .hinweis), damit die Nummer als Referenz
   für den neuen Filter "Ticketnummer" in der Störungsübersicht nicht im Text
   untergeht. */
.bestaetigung .ticketnummern-hinweis {
    margin-top: 0.5rem;
    color: var(--blau-dunkel);
}
.bestaetigung .ticketnummern-hinweis strong { color: var(--blau); }
.bestaetigung .aktionen { display: flex; gap: 0.75rem; justify-content: center; margin-top: 1.5rem; flex-wrap: wrap; }

/* --- Störungsübersicht (Runde 31, auf Ticket-Ebene umgebaut in Runde 32,
   Status-/Prioritätsanzeige seit Runde 33) - "Aktuelle Störungen ansehen" -
   eigener Ansichtsmodus derselben Seite (siehe ansicht in ticket.js), zeigt
   NUR Störungen (SIT.alleStoerungen(), quelle:'ticket' - keine Hinweise),
   gruppiert nach Gebäude/Bereich. Bewusst KEIN Melder (spielt hier keine
   Rolle) - stattdessen rechts in der Zeile Status und Priorität
   (PRIO1…PRIO5, farbig), plus Ticketnummer und Datum. */
/* Runde 81: "Überall, wo man sortieren und filtern kann möchte ich nur ein
   Suchfeld in einer Kachel haben und daneben einen Button mit Filter
   Symbol. Die Filteroptionen sollen dann aufploppen", ausdrücklicher
   Wunsch - ersetzt den bisherigen ".stoerung-filterleiste"-Wrapper (Runde
   62: alle Filter-Blöcke nebeneinander, s. Versionsgeschichte) komplett.
   ".filter-leiste" enthält jetzt nur noch genau zwei Elemente: das
   IMMER sichtbare Suchfeld (.filter-suchform) und den Filter-Knopf
   (.filter-knopf), der das Panel mit allen übrigen Filtern (.filter-panel,
   s. u.) auf-/zuklappt. */
.filter-leiste {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    position: relative;
    z-index: 2;
}
.filter-suchform {
    flex: 1 1 auto;
    /* Runde 81 (Bugfix): OHNE dieses min-width:0 verhinderte die
       automatische Mindestbreite verschachtelter Flexboxen (".filter-
       suchform" ist selbst ein Flex-Container INNERHALB von ".filter-
       leiste") das Schrumpfen auf sehr schmalen Smartphones - das
       Suchfeld blieb bei seiner intrinsischen Breite stehen und schob den
       danebenstehenden Filter-Knopf (flex:none) über den rechten
       Bildschirmrand hinaus (unsichtbar/nicht klickbar). min-width:0 auf
       dem Input allein (s. u.) reichte dafür NICHT - die Grenze muss auf
       JEDER verschachtelten Flex-Ebene gesetzt werden. */
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--blau-rand);
    border-radius: 999px;
    padding: 0.1rem 0.3rem 0.1rem 0.9rem;
    background: var(--flaeche-alt);
}
.filter-suchform:focus-within { border-color: var(--blau); }
.filter-suchform input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    color: var(--text);
    padding: 0.55rem 0;
}
/* Runde 81: die eigentliche Beschriftung "Suchen" steht hier nur noch
   per .sr-only für Screenreader im DOM (s. u.) - das Lupen-Symbol im
   Absende-Knopf übernimmt visuell ihre Rolle, genau wie beim Filter-Knopf
   daneben ("Suchfeld in einer Kachel ... daneben einen Button mit Filter
   Symbol", ausdrücklicher Wunsch nach einer knappen, ikonischen Zeile statt
   ausgeschriebener Labels). */
.filter-suchknopf {
    flex: none;
    width: 2.1rem;
    height: 2.1rem;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-dezent);
    cursor: pointer;
}
.filter-suchknopf:hover { color: var(--blau); background: var(--blau-hell); }
.filter-knopf {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    height: 2.5rem;
    padding: 0 1rem;
    border: 1px solid var(--blau-rand);
    border-radius: 999px;
    background: var(--flaeche);
    color: var(--text);
    font: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
}
.filter-knopf:hover { border-color: var(--blau); }
.filter-knopf.aktiv {
    background: var(--blau);
    border-color: var(--blau);
    color: #fff;
}
.filter-knopf-badge {
    display: inline-grid;
    place-items: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: #fff;
    color: var(--blau);
    font-size: 0.75rem;
    font-weight: 800;
}
.filter-knopf:not(.aktiv) .filter-knopf-badge {
    background: var(--blau);
    color: #fff;
}
/* Runde 91: in js/geraeteverwaltung.js, js/stoerungsmeldungen.js und
   js/ticket.js wird dieser Badge nur bei aktivem Filter überhaupt per JS-
   Template erzeugt (kein Badge-Element -> keine [hidden]-Umschaltung
   nötig). In faq-verwaltung.php ist der Badge dagegen von Anfang an fest im
   HTML vorhanden und wird nur per [hidden]-Attribut ein-/ausgeblendet
   (siehe #faqv-filter-badge) - ohne diesen Override gewinnt
   ".filter-knopf-badge { display: inline-grid }" gegen das hidden-Attribut
   und der Badge bliebe sichtbar, genau derselbe Stolperstein wie bei
   ".btn[hidden]" weiter oben (siehe dortiger Kommentar). */
.filter-knopf-badge[hidden] { display: none; }
/* Runde 81: sr-only - rein akustisch für Screenreader/Sprachausgabe
   vorgesehene Beschriftungen (z. B. das <label for="filter-suche"> der
   neuen, rein ikonischen Suchzeile oben), visuell unsichtbar, aber (anders
   als [hidden] oder display:none) weiterhin Teil des Accessibility-Baums. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}
/* Runde 34: die beiden Abschnitts-Knöpfe ("Störungen"/"Hinweise" - siehe
   abschnittSichtbar/stoerungFilterZeile in ticket.js) - eigene Zeile GANZ
   OBEN, noch vor den übrigen Filtern. Unabhängige Ein-/Ausblende-Schalter,
   standardmäßig BEIDE aktiv/blau ("beide blau, also ausgewählt").
   Runde 58-Folge3: "die beiden Buttons 'Störungen' und 'Hinweise' sollen
   alleine in eine Zeile (ganze Breite), der Strich bzw. Trenner dahinter
   kann weg" - bis Runde 58-Folge2 teilten sie sich EINE, per flex-wrap
   umbrechende Zeile mit den Gebäude-/Datum-Sortierknöpfen samt einem
   senkrechten Trennstrich dazwischen (.stoerung-filter-trenner, jetzt
   ersatzlos entfallen); jetzt eine eigene Zeile für sich, die Gebäude-/
   Datum-Knöpfe stehen seither in der eigenen .stoerung-sortier-filter-Zeile
   darunter (s. u.). Beide Zeilen teilen sich trotzdem dieselbe Chip-Optik -
   siehe die kombinierten Selektoren unten. */
.stoerung-abschnitt-filter,
.stoerung-sortier-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}
.stoerung-sortier-filter { margin-bottom: 0.85rem; }
/* Runde 58-Folge: "Die Buttons darunter nutzen nicht die ganze Breite aus"
   (die Chip-Knöpfe klebten links, rechts blieb ungenutzter Leerraum) -
   jeder Knopf wächst jetzt per flex-grow gleichmäßig mit und füllt so seine
   Zeile bis zum rechten Rand, bleibt dabei aber mindestens so breit wie sein
   eingestellter flex-basis-Wert (darunter wandert er per flex-wrap in eine
   neue Zeile, die sich dann ihrerseits wieder auf die volle Breite
   verteilt) - dieselbe Idee wie bei .stoerung-filter .feld weiter unten,
   nur eben auf Chip-Knöpfe statt Formularfelder angewendet. Runde
   58-Folge3: beide Zeilen enthalten jetzt ohnehin nur noch GENAU zwei
   Knöpfe (Störungen/Hinweise bzw. Gebäude/Datum) - flex-grow verteilt die
   Zeilenbreite damit praktisch immer exakt zur Hälfte. white-space:nowrap
   ist hier kein Zufall: OHNE das würde ein Flex-Kind laut Spec trotz
   flex-grow unter seine eigentliche Textbreite schrumpfen dürfen (das
   automatische min-width:auto greift nur bis zur Breite des längsten
   EINZELNEN Worts, nicht der ganzen Beschriftung) und "In Bearbeitung" riss
   dadurch hässlich in eine zweite Zeile um, obwohl der Knopf sichtbar
   breiter war als nötig - nowrap zwingt den Browser, die volle
   Beschriftungsbreite als Minimum zu respektieren. */
.stoerung-abschnitt-filter button,
.stoerung-sortier-filter button {
    flex: 1 1 9rem;
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--blau-rand);
    border-radius: 999px;
    background: var(--flaeche);
    color: var(--text);
    font: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}
.stoerung-abschnitt-filter button:hover,
.stoerung-sortier-filter button:hover { border-color: var(--blau); }
.stoerung-abschnitt-filter button.aktiv,
.stoerung-sortier-filter button.aktiv {
    background: var(--blau);
    border-color: var(--blau);
    color: #fff;
}

/* Runde 33: Status-Filter-Chips ("neu, in Bearbeitung, erfolgreich
   geschlossen, offen" - siehe STATUS_FILTER_MEINE_TICKETS/
   stoerungFilterZeile in ticket.js) - eigene Zeile OBERHALB der übrigen
   Filter (Ticketnummer/Gebäude/Raum), gleiche Chip-Optik wie die
   Kategorie-/Gebäude-Auswahl im Melde-Assistenten selbst. Seit
   Runde 58-Folge3 nur noch bei "Meine Tickets" im Einsatz - "Aktuelle
   Probleme" nutzt stattdessen den einzelnen Umschalt-Knopf
   .stoerung-status-zyklus (s. u.). */
.stoerung-status-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
/* Runde 58-Folge: dieselbe flex-grow-Lösung wie bei .stoerung-abschnitt-
   filter button oben (inklusive white-space:nowrap-Begründung dort), nur
   mit kleinerem flex-basis-Wert (kürzere Labels: "Alle"/"Offen"/"Geparkt"/
   "Erledigt"). */
.stoerung-status-filter button {
    flex: 1 1 7rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--blau-rand);
    border-radius: 999px;
    background: var(--flaeche);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}
.stoerung-status-filter button:hover { border-color: var(--blau); }
.stoerung-status-filter button.aktiv {
    background: var(--blau);
    border-color: var(--blau);
    color: #fff;
}
/* Runde 58-Folge3: "Aktuelle Probleme" - der einzelne Status-Umschalt-Knopf
   ("Alle offenen"/"Neu"/"In Bearbeitung", zyklisch per Klick, siehe
   [data-status-zyklus] in ticket.js), nur sichtbar solange oben "Störungen"
   ausgewählt ist. Volle Zeilenbreite (er ist ja allein in seiner Zeile) und
   dauerhaft in der "aktiv"-Blau-Optik der Chip-Knöpfe darüber - repräsentiert
   schließlich selbst den aktuell aktiven Filterwert, nicht bloß EINE
   Auswahlmöglichkeit unter mehreren. */
.stoerung-status-zyklus {
    display: flex;
    margin-bottom: 1rem;
}
.stoerung-status-zyklus button {
    flex: 1 1 auto;
    width: 100%;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--blau);
    border-radius: 999px;
    background: var(--blau);
    color: #fff;
    font: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    text-align: center;
    cursor: pointer;
}
.stoerung-status-zyklus button:hover { background: var(--blau-dunkel); border-color: var(--blau-dunkel); }
/* Runde 81: das aufploppende Filter-Panel selbst (enthält jetzt
   Abschnitts-Umschalter/Sortierung/Status/Gebäude-Raum-Reset - alles außer
   der Suche, die ja schon immer sichtbar in .filter-leiste steht, s. o.).
   Grundzustand (mobil/touch, s. Kopfkommentar bei .filter-leiste) ist ein
   von unten einschiebendes Bottom-Sheet über der gesamten Bildschirmbreite
   - "insbesondere für tablet und Smartphone hätte ich da gerne eine
   elegante Lösung", ausdrücklicher Wunsch. Erst die Media Query weiter
   unten (Maus-/Trackpad-Geräte ab Tablet-/Desktopbreite) macht daraus ein
   kompaktes, am Filter-Knopf verankertes Dropdown. */
.filter-panel-hintergrund {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(10, 18, 30, 0.45);
}
.filter-panel {
    position: fixed;
    z-index: 50;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: min(32rem, 85vh);
    overflow-y: auto;
    background: var(--flaeche);
    border-radius: 1.1rem 1.1rem 0 0;
    padding: 1rem 1.15rem calc(1.15rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -0.5rem 2rem rgba(10, 18, 30, 0.25);
}
.filter-panel-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.9rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--blau-rand);
}
.filter-panel-kopf strong { font-size: 1rem; color: var(--blau-dunkel); }
.filter-panel-schliessen {
    width: 2.1rem;
    height: 2.1rem;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: var(--flaeche-alt);
    color: var(--text);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}
.filter-panel-schliessen:hover { background: var(--blau-hell); color: var(--blau); }
/* Runde 81: "Gebäude"/"Datum" (Sortierung), die Status-Chips/der
   Status-Zyklus-Knopf und Gebäude-/Raum-Dropdown+Reset bleiben innerhalb
   des Panels bewusst jeweils EIGENE, vollbreite Zeilen (siehe
   .stoerung-abschnitt-filter/.stoerung-sortier-filter/
   .stoerung-status-filter/.stoerung-status-zyklus/.stoerung-filter weiter
   oben/unten, unverändert seit vor Runde 81) - anders als bis Runde 80
   müssen sie sich hier nicht mehr in eine gemeinsame, schmale Zeile
   quetschen (das Panel selbst ist ja schon schmal genug, s. u.), die
   frühere "alles in einer Zeile ab Tablet-/Desktopbreite"-Media-Query
   (Runde 62) ist damit ersatzlos entfallen. */
.stoerung-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}
.stoerung-filter .feld { margin-bottom: 0; flex: 1 1 9rem; }
.stoerung-filter select {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--blau-rand);
    border-radius: var(--radius);
    font: inherit;
    color: var(--text);
    background: var(--flaeche);
}
.stoerung-filter select:focus { outline: none; border-color: var(--blau); }
.stoerung-filter .btn { flex: none; }
/* Runde 34: zwei unabhängige Abschnitte ("Aktuelle Störungen"/"Hinweise",
   siehe stoerungsAbschnitt()/renderStoerungsListe() in ticket.js) je mit
   eigener <h3>-Überschrift - dafür die vorherige Gebäude-Überschrift
   (.stoerung-gebaeude, s. u.) von h3 auf h4 herabgestuft, damit die
   Dokumentstruktur (h2 Seitentitel > h3 Abschnitt > h4 Gebäude) stimmt. */
.stoerung-abschnitt-gruppe { margin-bottom: 2rem; }
.stoerung-abschnitt-gruppe:last-child { margin-bottom: 0; }
.stoerung-abschnitt-titel {
    margin: 0 0 0.9rem;
    color: var(--blau-dunkel);
    font-size: 1.2rem;
}
.stoerung-gebaeude { margin-bottom: 1.5rem; }
.stoerung-gebaeude h4 {
    margin: 0 0 0.6rem;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid var(--blau);
    color: var(--blau-dunkel);
    font-size: 1.05rem;
}
.stoerung-geraete { display: flex; flex-direction: column; gap: 0.5rem; }
.stoerung-geraet {
    border: 1px solid var(--blau-rand);
    border-radius: var(--radius);
    overflow: hidden;
}
/* Runde 48: "Die Labels bei Störungen oder Hinweise (also Prio, Status,
   Zustand) sollen in den Kacheln in eine eigene Zeile, und zwar die
   oberste. Der Name des Gerätes soll nämlich unbedingt in eine Zeile
   passen und da war sonst manchmal nicht genug Platz" (ausdrücklicher
   Wunsch) - vorher standen Name UND Badges (Status/Prio bzw. Zustand) in
   EINER flex-wrap-Zeile, der Name mit flex:1 1 10rem teilte sich die
   Breite mit den Badges und brach bei langen Gerätenamen zusätzlich um.
   Jetzt zwei feste Zeilen übereinander (flex-direction:column): oben
   .stoerung-kopf-zeile1 mit den Badges + dem Auf-/Zuklapp-Pfeil (bleibt
   dort, wo man ihn erwartet - ganz rechts oben), darunter .stoerung-name
   über die volle Breite, siehe stoerungTicketZeile()/hinweisZeile() in
   ticket.js für die zugehörige Markup-Umstellung. */
.stoerung-kopf {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
    width: 100%;
    padding: 0.65rem 0.9rem;
    background: var(--flaeche);
    border: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--text);
}
.stoerung-kopf:hover { background: var(--blau-hell); }
.stoerung-kopf-zeile1 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.65rem;
    width: 100%;
}
.stoerung-name { font-weight: 600; width: 100%; min-width: 0; }
/* Runde 35 bis 45: die Ticketnummer stand hier klein DIREKT HINTER dem
   Namen/Standort (.stoerung-nummer-klein), daneben zusätzlich das Datum
   (.stoerung-datum) - Runde 46: "Datum und Ticketnummer sollen nur in den
   aufklappbaren Bereich", beide Klassen sind damit entfallen. Beides steht
   seither nur noch im aufgeklappten Bereich, in .eintrag-datum direkt
   hinter der Uhrzeit (siehe stoerungTicketZeile in ticket.js). */
/* Runde 33: rechts in der Zeile steht jetzt die Priorität (PRIO1…PRIO5,
   farbig über --prio-farbe, dieselbe Logik wie .prio-badge im Melde-
   Assistenten) statt des früheren C1…C4-Klartext-Zustands ("Bei
   Störungsmeldungen soll rechts die Priorität stehen"), plus der aktuelle
   Status (Neu/In Bearbeitung/Offen/Erfolgreich geschlossen). */
.stoerung-status {
    flex: none;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: var(--blau-hell);
    color: var(--text-dezent);
}
.stoerung-status--neu { background: var(--status-neu-bg); color: var(--status-neu-fg); }
.stoerung-status--in-bearbeitung { background: var(--status-bearbeitung-bg); color: var(--status-bearbeitung-fg); }
.stoerung-status--offen { background: var(--status-offen-bg); color: var(--status-offen-fg); }
.stoerung-status--geschlossen { background: var(--status-geschlossen-bg); color: var(--status-geschlossen-fg); }
.stoerung-prio {
    flex: none;
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.6rem;
    border-radius: 999px;
    background: var(--prio-farbe, var(--blau));
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}
/* Runde 34: Kondition-Pille (C1…C4) bei Hinweis-Zeilen (hinweisZeile() in
   ticket.js) - steht dort, wo bei einer Störungs-Zeile .stoerung-prio
   steht, da Hinweise keine Priorität haben. Farbe kommt aus
   konditionFarbeLokal() in ticket.js (lokale Kopie der Ampelfarben, siehe
   dortigen Kommentar - app.css mit den "echten" --status-*-Variablen wird
   auf dieser Seite nicht eingebunden). */
.stoerung-kondition {
    flex: none;
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.6rem;
    border-radius: 999px;
    background: var(--kondition-farbe, var(--blau));
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}
/* Runde 48: rutscht durch margin-left:auto innerhalb von
   .stoerung-kopf-zeile1 an deren rechtes Ende, wie bisher - vorher übernahm
   das der flex-grow des Namens (.stoerung-name), der jetzt eine eigene
   Zeile darunter hat und die Badges-Zeile nicht mehr mitbestimmt. */
.stoerung-pfeil { flex: none; margin-left: auto; color: var(--text-dezent); font-size: 0.7rem; }
.stoerung-details {
    padding: 0 0.9rem 0.9rem;
    border-top: 1px solid var(--blau-rand);
}
.stoerung-abschnitt h5 {
    margin: 0.75rem 0 0.4rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-dezent);
}
/* Runde 35: "Betroffene Geräte" - nur bei einer Mehrfachmeldung (t.mehrfach
   in stoerungTicketZeile), listet die einzelnen Geräte auf, die zu EINEM
   Ticket zusammengefasst wurden (siehe SIT.alleStoerungenGruppiert() in
   store.js). Schlichte Liste, bewusst ohne die .stoerung-eintrag-Kachel-
   Optik (die ist für Meldung/Kommentare mit eigenem Datum gedacht). */
.stoerung-geraete-liste {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.88rem;
}
.stoerung-geraete-liste li { margin-bottom: 0.15rem; }
.stoerung-eintrag {
    padding: 0.5rem 0.7rem;
    border-radius: 0.4rem;
    background: var(--blau-hell);
    margin-bottom: 0.4rem;
}
.stoerung-eintrag p { margin: 0 0 0.2rem; font-size: 0.88rem; }
.stoerung-eintrag .eintrag-datum { font-size: 0.75rem; color: var(--text-dezent); }
/* Runde 33: Kopfzeile über einem Kommentar - trägt bei Bedarf das
   ADMIN-Label (Kommentar aus dem Admin-Panel, e.vonAdmin) VOR dem Datum. */
.stoerung-eintrag-kopf {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.15rem;
}
.stoerung-eintrag-kopf .eintrag-datum { margin: 0; }
/* Dieselbe Bedeutung wie .admin-label in app.css (eigene Kopie, weil
   ticket.html css/app.css nicht einbindet) - zeigt, dass ein Kommentar vom
   Admin im Admin-Panel stammt, nicht von der meldenden Lehrkraft. */
.admin-label {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: 0.25rem;
    background: var(--admin-label-bg);
    color: var(--admin-label-fg);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* Runde 39: dieselbe Bedeutung wie .kommentar-autor-badge in app.css (eigene
   Kopie, siehe Kopfkommentar oben bei .admin-label) - JEDER Kommentar
   bekommt jetzt einen Namens-Kasten, nicht nur Admin-Kommentare ("der Name
   soll immer in so einem Kasten stehen, wie auch jetzt schon Admin"). */
.kommentar-autor-badge {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: 0.25rem;
    background: var(--autor-badge-bg);
    color: var(--autor-badge-fg);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.stoerung-fotos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.stoerung-fotos img {
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    border-radius: 0.35rem;
    border: 1px solid var(--blau-rand);
    display: block;
}
.kommentar-form { margin-top: 0.5rem; }
.kommentar-form label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--blau-dunkel);
}
/* Runde 38: eigenes, kleines Kürzel-Feld über dem Kommentartext ("Bei
   Kommentaren zu Störungsmeldungen soll man auch das Kürzel angeben
   können") - bewusst schmaler als das Textfeld darunter, dieselbe Optik wie
   das Kürzel-Feld im Melde-Assistenten (#feld-kuerzel, .feld input). */
.kommentar-form input[type="text"] {
    display: block;
    width: 100%;
    max-width: 14rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--blau-rand);
    border-radius: var(--radius);
    font: inherit;
    color: var(--text);
    margin-bottom: 0.6rem;
}
.kommentar-form input[type="text"]:focus { outline: none; border-color: var(--blau); }
.kommentar-form textarea {
    width: 100%;
    min-height: 3.5rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--blau-rand);
    border-radius: var(--radius);
    font: inherit;
    margin-bottom: 0.5rem;
    resize: vertical;
}
.kommentar-form textarea:focus { outline: none; border-color: var(--blau); }
/* Runde 38: Kürzel/Name des Melders (t.melder) bzw. eines Kommentar-Autors
   (e.autor) - dieselbe Bedeutung wie .ticket-karte-melder im Admin-Panel
   (app.css), eigene Kopie weil ticket.html app.css nicht einbindet (siehe
   Kopfkommentar oben bei .admin-label). Dezent, kein Badge wie .admin-label. */
.stoerung-melder {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-dezent);
}
/* Runde 44 (Folge-Rückmeldung): das Kürzel-Label (Melder eines Tickets bzw.
   Ersteller/Bearbeiter eines Hinweises) steht jetzt als eigene Zeile VOR
   dem Meldungs-/Hinweistext, statt wie bisher in einer gemeinsamen Zeile
   mit dem Datum darunter (siehe stoerungTicketZeile/hinweisZeile weiter
   oben) - der direkte Kind-Selektor (>) grenzt das bewusst auf diesen NEUEN
   Fall ein, die Kommentar-Labels in .stoerung-eintrag-kopf (unverändert
   eine Zeile mit Datum) bleiben davon unberührt. */
.stoerung-eintrag > .admin-label,
.stoerung-eintrag > .kommentar-autor-badge,
.stoerung-eintrag > .stoerung-melder {
    display: inline-block;
    margin-bottom: 0.3rem;
}

/* ----------------------------------------------------------------------
   Runde 83 (Störungsmeldungen-/Geräteverwaltung): "Störungsmeldungen und
   Geräteverwaltung nun bitte auch in das Design 'umziehen'", ausdrücklicher
   Wunsch - zwei neue, schlanke Admin-Seiten (js/stoerungsmeldungen.js/
   js/geraeteverwaltung.js) im selben Stil wie faq-verwaltung.php/
   gute-nachrichten-verwaltung.php, "nur die Kernfunktionen" aus dem
   LCARS-Leitstand (index.php, bleibt als Easter Egg unverändert bestehen).
   Reiht sich bewusst in die bestehenden .stoerung-*-Klassen oben ein (bis
   dahin nur auf ticket.php selbst verwendet: dieselbe aufklappbare
   Kopf+Details-Zeile passt strukturell genauso gut für eine Geräte-/
   Standort-Zeile wie für ein Ticket) - hier nur die paar wirklich NEUEN
   Klassen, die beide Verwaltungsseiten zusätzlich brauchen. ---------- */

/* .formzeile/.feld gab es bisher nur in app.css (LCARS) - ticket.css kannte
   bis dahin nur einzelne, immer volle Breite nutzende .feld-Blöcke (Melde-
   Assistent). Für die neuen, kompakteren Verwaltungsformulare (z. B. Name +
   Kategorie + IP + MAC nebeneinander) hier dieselbe schlichte Flex-Zeile
   wie in app.css, eigene Kopie aus demselben Grund wie .admin-label/
   .stoerung-melder weiter oben (ticket.css bindet app.css nicht ein). */
.formzeile { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.formzeile .feld { flex: 1 1 10rem; margin-bottom: 1rem; }

/* Gemeinsame Knopfzeile unter einem Verwaltungsformular (Speichern/
   Abbrechen/Löschen) bzw. unter einer Ticket-/Geräte-Karte (Status-Knöpfe) -
   ersetzt das app.css-spezifische .geraet-aktionen. */
.verwaltung-aktionen { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 0.6rem; }
.verwaltung-aktionen--gefahr { margin-top: 1rem; padding-top: 0.6rem; border-top: 1px solid var(--blau-rand); }

/* Kleiner ×-Knopf zum Löschen EINES Kommentars (Admin-Verwaltung) - dieselbe
   Bedeutung wie .feld-leeren in app.css, eigene, kleinere Optik, weil er
   hier direkt in der schmalen .stoerung-eintrag-kopf-Zeile sitzt. */
.sm-kommentar-loeschen {
    margin-left: auto;
    flex: none;
    width: 1.3rem;
    height: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-dezent);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}
.sm-kommentar-loeschen:hover, .sm-kommentar-loeschen:focus-visible { background: var(--fehler-hell); color: var(--fehler); }

/* Geräteverwaltung: Status-Pille auf einer Geräte-Zeile - eigene,
   feststehende Farben (NICHT SIT.statusKlasse(), die liefert app.css-
   Tile-Klassen wie .tile--fehler, siehe Kopfkommentar zu
   konditionFarbeLokal weiter oben - dieselbe Einschränkung gilt hier). */
.gv-status-pille {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff;
    white-space: nowrap;
}
.gv-status-pille--ok { background: var(--gruen); }
.gv-status-pille--eingeschraenkt { background: var(--kond-c2); color: #3a2e00; }
.gv-status-pille--defekt { background: var(--fehler); }
.gv-status-pille--reparatur { background: var(--kond-c3); }
.gv-status-pille--ausgemustert { background: var(--text-dezent); }

.gv-geraete-liste { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.6rem; }
.gv-geraet-karte { padding: 0.7rem 0.8rem; border-radius: 0.4rem; background: var(--blau-hell); }
.gv-geraet-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.gv-geraet-kopf strong { color: var(--blau-dunkel); }
/* Runde 97: "Details"-Wort + Pfeil weg, stattdessen Klick auf den
   Gerätenamen - .gv-geraet-kopf ist jetzt selbst das <summary>-Element von
   .gv-details (siehe ausführlichen Kopfkommentar bei geraetKarte() in
   js/geraeteverwaltung.js), diese Regel holt dafür nur den nativen
   Dreiecks-Pfeil/die list-item-Optik des Browsers wieder raus (die
   .gv-geraet-kopf-Basisregel oben bleibt unverändert zuständig fürs
   Flex-Layout selbst) - "aber bitte ohne Pfeil", ausdrücklicher Wunsch,
   deshalb kein Ersatz durch einen eigenen chevronSvg() wie andernorts im
   Projekt. list-style/::-webkit-details-marker decken Firefox bzw.
   Chrome/Safari ab (zwei unterschiedliche Mechanismen für denselben
   nativen Pfeil). Der Hover-Farbwechsel sitzt bewusst nur auf dem
   Namen selbst (nicht der ganzen Zeile) - signalisiert "das hier ist
   klickbar", ohne Icon/Kategorie/Status-Pille mit einzufärben, die rein
   informativ bleiben. */
summary.gv-geraet-kopf {
    cursor: pointer;
    list-style: none;
}
summary.gv-geraet-kopf::-webkit-details-marker { display: none; }
summary.gv-geraet-kopf:hover strong { color: var(--blau); }
/* Runde 91 hatte hier die Basis-Regel für Googles Material-Symbols-
   Icon-Schriftart (".material-symbols-outlined") stehen - Runde 93 ersetzt
   die externe Schriftart komplett durch lokale PNG-Icons (siehe
   Kopfkommentar bei SIT.kategorieIcon() in js/store.js: auf dem Smartphone
   zeigte die Schriftart laut Screenshot nur generische Platzhalter statt
   der eigentlichen Symbole). ".gv-geraet-typ-icon-pic" ist der <picture>-
   Wrapper um das eigentliche <img> (zwei <source>/<img>, Hell-/Dunkel-
   Variante je nach Systemfarbschema, siehe geraetKarte() in
   js/geraeteverwaltung.js) - display:contents nimmt ihn komplett aus dem
   Layout heraus, als stünde das <img> direkt in .gv-geraet-kopf (sonst
   bräuchte .gv-geraet-kopf flex-wrap eine zusätzliche Regel NUR für diesen
   einen zusätzlichen Wrapper). ".gv-geraet-typ-icon" selbst (das <img>)
   behält Größe/flex:none von vorher. */
.gv-geraet-typ-icon-pic { display: contents; }
.gv-geraet-typ-icon {
    flex: none;
    width: 1.3rem;
    height: 1.3rem;
    object-fit: contain;
}
.gv-meta { font-size: 0.8rem; color: var(--text-dezent); }
/* Runde 92: "Das Status Label soll immer oben rechts in der jeweiligen
   Kachel sein, da wo man aktuell das Dropdown anklicken kann", ausdrück-
   licher Wunsch - das bisherige <select>/.gv-geraet-status-auswahl (trug
   bis Runde 91 dieses margin-left:auto) ist komplett entfallen (siehe
   geraetKarte() in js/geraeteverwaltung.js), die Pille selbst übernimmt
   jetzt genau diese Position, nur innerhalb von .gv-geraet-kopf (die
   gleichnamige Pille in standortKarte() - "X Probleme" auf der Übersicht -
   sitzt in einem ANDEREN Flex-Kontext und bleibt davon unberührt). */
.gv-geraet-kopf .gv-status-pille { margin-left: auto; flex: none; }

/* Runde 92: Zustandslabel-Chips in "Details" (statusChipReiheHtml() in
   js/geraeteverwaltung.js) - ersetzt das bisherige <select>. "alle label
   in der entsprechenden Farbe anzeigen, aber von den nicht aktiven nur die
   Konturen, ausgefüllt soll nur das aktive Label sein", ausdrücklicher
   Wunsch: --gv-status-farbe kommt inline pro Chip (jeder Status hat seine
   eigene Farbe, dieselben wie .gv-status-pille--xxx oben) - ohne
   .gv-status-chip--aktiv ist das nur eine farbige Kontur auf
   durchsichtigem Grund, MIT der Klasse (der gerade aktive Zustand) füllt
   sich derselbe Rahmen mit genau dieser Farbe, genau wie die read-only
   Pille in der Kopfzeile. */
.gv-status-chip-reihe { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.3rem 0 0.6rem; }
.gv-status-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.65rem;
    border: 1.5px solid var(--gv-status-farbe);
    border-radius: 999px;
    background: none;
    color: var(--gv-status-farbe);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
}
.gv-status-chip:hover, .gv-status-chip:focus-visible { background: var(--blau-hell); }
.gv-status-chip--aktiv {
    background: var(--gv-status-farbe);
    color: #fff;
    cursor: default;
}
.gv-status-chip--aktiv:hover, .gv-status-chip--aktiv:focus-visible { background: var(--gv-status-farbe); }
/* Dieselbe Textfarbe-Ausnahme wie .gv-status-pille--eingeschraenkt oben -
   Weiß auf dem hellen Gelb wäre kaum lesbar. */
.gv-status-chip--aktiv[data-status="eingeschraenkt"] { color: #3a2e00; }

/* Runde 93: Icon-Raster-Bausteine (.gv-icon-auswahl/.gv-icon-option/...) für
   die "Gerätekategorien & Symbole"-Auswahl - ursprünglich Teil von
   geraeteKategorienEinstellenHtml() in js/geraeteverwaltung.js; Runde 96 ist
   diese ganze Einstellungsfläche in die neue Einstellungen-Seite umgezogen
   (zugangsdaten/js/settings-geraete.js, siehe dortigen Kopfkommentar) - das
   Icon-Raster selbst zieht dabei unverändert mit um (css/ticket.css ist
   dort über <link> ebenfalls eingebunden), nur die beiden Zeilen-/Formular-
   Hüllen .gv-kategorien-liste/.gv-kategorie-form (reine Listen-Optik der
   früheren Standort-Übersicht) entfallen dort - die neue Seite baut ihre
   Kategorie-Zeilen stattdessen aus den dortigen .card/.stack/.row-
   Bausteinen auf (siehe zugangsdaten/style.css). Visuell dieselbe Kontur-/
   Füll-Unterscheidung wie .gv-status-chip oben (nicht aktiv: reine Kontur,
   aktiv: gefüllt), nur in Blau statt je einer Zustandsfarbe, da hier alle
   Optionen gleichrangig sind. */
.gv-icon-auswahl {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.3rem 0 0.6rem;
}
.gv-icon-option {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0.3rem;
    border: 1.5px solid var(--blau-rand);
    border-radius: var(--radius);
    background: var(--flaeche);
    cursor: pointer;
}
.gv-icon-option:hover, .gv-icon-option:focus-visible { border-color: var(--blau); background: var(--blau-hell); }
.gv-icon-option--aktiv, .gv-icon-option--aktiv:hover, .gv-icon-option--aktiv:focus-visible {
    border-color: var(--blau);
    background: var(--blau-hell);
}
.gv-icon-option img { width: 1.5rem; height: 1.5rem; object-fit: contain; }
/* Runde 94: "Die Symbole soll man als PNG oder SVG auch hochladen können",
   ausdrücklicher Wunsch - eigene Upload-Kachel ganz am Ende des Rasters
   (siehe iconAuswahlHtml() in js/geraeteverwaltung.js), technisch ein
   <label> um ein verstecktes <input type="file">. Gestrichelte statt
   durchgezogener Kontur, damit sie auf den ersten Blick als "etwas
   Eigenes/Hinzufügen" erkennbar ist, nicht als ein weiteres fertiges
   Katalog-Symbol. */
.gv-icon-option--upload {
    border-style: dashed;
    color: var(--blau);
    font-size: 1.3rem;
    font-weight: 700;
}
.gv-icon-option--upload:hover, .gv-icon-option--upload:focus-within {
    border-color: var(--blau);
    background: var(--blau-hell);
}
.gv-icon-upload-status { margin: 0.2rem 0 0.6rem; font-size: 0.8rem; color: var(--text-dezent); }
.gv-icon-upload-status--fehler { color: var(--fehler); }

/* Runde 84: "Die Kacheln der einzelnen Räume sollen kleiner, es sollen in
   der Desktop Ansicht vier nebeneinander passen", ausdrücklicher Wunsch -
   ersetzt die bisherige, volle Breite nutzende .stoerung-geraete-Liste NUR
   auf geraeteverwaltung.php (stoerungsmeldungen.php bleibt bei der
   einspaltigen Liste, siehe dortiges js). align-items:start, damit eine
   aufgeklappte (und damit deutlich höhere) Standort-Kachel nicht die
   gesamte Zeile auf ihre Höhe streckt - die Nachbar-Kacheln bleiben oben
   ausgerichtet. Eine Spalte auf dem Handy (wie bisher die einfache Liste),
   zwei auf dem Tablet, vier ab einer echten Desktop-Breite - .kopf-innen/
   .wizard erlauben bis zu 1194px, genug Platz für vier spürbar kompaktere
   Kacheln nebeneinander (s. u.). */
.gv-standorte-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    align-items: start;
}
@media (width > 480px) {
    .gv-standorte-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (width > 900px) {
    .gv-standorte-grid { grid-template-columns: repeat(4, 1fr); }
}
/* Runde 96: Verweis-Zeile an der Stelle der früheren "+ Neuen Standort
   anlegen"-/"Raum bearbeiten"-Formulare und der früheren "Gerätekategorien
   & Symbole"-Einstellfläche (siehe neuerStandortFormHtml()/
   standortBearbeitenFormHtml() in js/geraeteverwaltung.js) - schlichter,
   etwas eingerückter Hinweistext mit Link, kein eigenes Kachel-/
   Rahmen-Styling nötig (es ersetzt ja gerade das aufwendigere Formular). */
.gv-einstellungen-verweis {
    margin: 0.8rem 0;
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
    color: var(--text-dezent);
    background: var(--flaeche-alt);
    border-radius: var(--radius);
}
.gv-einstellungen-verweis a { font-weight: 600; }
/* Etwas kompaktere Kopfzeile innerhalb der Kacheln dieses Grids - "die
   Kacheln ... sollen kleiner" bezieht sich nicht nur auf die Breite,
   sondern auch auf die Innenabstände/Schrift, sonst wirken vier schmale
   Spalten mit unverändert großzügigem Innenleben gedrängt statt kompakt. */
.gv-standorte-grid .stoerung-kopf { padding: 0.55rem 0.7rem; gap: 0.25rem; }
.gv-standorte-grid .stoerung-kopf-zeile1 { font-size: 0.8rem; gap: 0.3rem 0.5rem; }
.gv-standorte-grid .stoerung-name { font-size: 0.92rem; }

/* Runde 90: Raum-Kachel ist jetzt ein echter Link (<a href>, siehe
   standortKarte() in js/geraeteverwaltung.js) statt eines Aufklapp-Knopfes -
   das Projekt hat kein globales <a>-Reset, deshalb hier Farbe/Unterstreichung
   zurücksetzen, sonst sieht die Kachel wie ein blauer Textlink aus. */
.gv-raum-kachel {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.gv-raum-kachel:hover .stoerung-name, .gv-raum-kachel:focus-visible .stoerung-name { text-decoration: underline; }

/* Runde 92: der bisherige "Zurück"-Link + Kopfbereich (Name/Typ/Gebäude/
   Notiz/Geräteanzahl) der Raum-Detailseite ("kann alles gelöscht werden",
   ausdrücklicher Wunsch) ist komplett entfallen (.gv-raum-zurueck/
   .gv-raum-kopf gab es bis Runde 91 hier) - der Raumname steht stattdessen
   oben in der Menüleiste selbst, siehe .gv-kopf-seitenname-praefix weiter
   unten sowie aktualisiereKopfTitel() in js/geraeteverwaltung.js. Browser-
   Zurück/Vor (Runde 90) und der Menüpunkt "Geräteverwaltung" im
   Burger-Menü bleiben der Weg zurück zur Übersicht. */

/* Hinweis Runde 90: "die Kacheln der Geräte die ganze Seitenbreite
   einnehmen" ist bereits erfüllt, ohne eine weitere Klasse zu brauchen -
   geraeteDetailHtml()/renderGeraeteListeWrap() (js/geraeteverwaltung.js)
   verwenden für die Detailseite die bestehende .gv-geraete-liste (einspaltig,
   s. o.) statt des 4-Spalten-.gv-standorte-grid, und #gv-geraete-liste-wrap
   steht im normalen, vollbreiten .wizard-Fluss statt in diesem Grid. */

/* --- Fehlermeldung (z. B. Speicher voll) ----------------------------- */
.globale-fehlermeldung {
    padding: 0.9rem 1rem;
    border-radius: var(--radius);
    background: var(--fehler-hell);
    border: 2px solid var(--fehler);
    color: var(--fehler);
    font-size: 0.88rem;
}

/* --- Gebäude-Frage (Internet-Kategorie, Runde 39, Raum/Gerät seit 45) -- */
.feld select#feld-raum-betroffen,
.feld select#feld-geraet-betroffen { max-width: 20rem; }
.feld-fehler {
    margin-top: 0.4rem;
    color: var(--fehler);
    font-size: 0.85rem;
}

/* --- Fragen & Probleme / FAQ (Runde 39/40, Startseite seit Runde 46) ---- */
/* Runde 46: "Fragen & Probleme" ist jetzt die Startseite von ticket.html -
   ganz oben zwei große Schnellzugriff-Kacheln ("Meldungen"/"Störung
   melden", ersetzen die bisherigen Menüpunkte "Aktuelles"/"Neues Ticket").
   Zwei Spalten fest (nicht auto-fill wie .faq-themen/.kachel-auswahl),
   weil es immer genau zwei sind. Runde 47: "'Meldungen' und 'Störung
   melden' sollen auch so hoch sein [wie die Themen-Kacheln]" - Innenabstand/
   Mindesthöhe/Icon-Größe sind seither dieselben Werte wie bei
   .faq-themen .kachel-btn unten (vorher eigene, größere Werte, siehe
   Kopfkommentar dort zur ursprünglichen Round-46-Absicht "hervorstechen" -
   die Farbe/Fettschrift sorgt weiterhin für Unterscheidbarkeit, nur die
   Größe ist jetzt angeglichen). Runde 48: "die Kacheln oben (Meldungen/
   Störung melden) sollen die gleiche Größe UND die gleichen Abstände haben
   wie die Kacheln unten (Themen)" - der Gitter-Abstand (gap) war bisher
   0.75rem, während .faq-themen weiter unten 0.6rem nutzt; jetzt derselbe
   Wert wie dort (siehe auch --start-abstand: dieselbe 0.6rem-Lücke gilt
   jetzt ausnahmslos für ALLE Abstände zwischen IT-Treff/Meldungen-
   Störung melden/Gute Nachrichten/Suchfeld/Themen-Raster, siehe
   .start-treff/.start-gute-nachrichten/.faq-suche-feld unten). */
/* Runde 60: gemeinsamer Wrapper um den Kacheln-Block (IT-Treff/Gute
   Nachrichten) und die Start-Kacheln (.start-aktionen) - übernimmt den
   bisherigen 0.6rem-Abstand ZWISCHEN diesen beiden Blöcken (vorher über
   einzelne margin-bottom/margin-top an den Kacheln selbst gelöst, siehe
   .start-treff/.start-gute-nachrichten unten) als eigenes "gap",
   außerdem den Abstand NACH dem letzten Block (vorher margin-bottom an
   .start-gute-nachrichten) als eigenes margin-bottom.
   Runde 90: "A, B, C und D müssen alle gleich groß sein" (Screenshot zeigte
   den linken Seitenabstand/oberen Abstand zum Kopf/Abstand zwischen zwei
   Kennzahlen-Kacheln/unteren Abstand zum nächsten Block uneinheitlich groß.
   Runde 90 hatte das behoben, indem alle vier Maße auf den GRÖSSEREN
   Seitenabstand von .wizard angehoben wurden (1.25rem/0.9rem) - dabei aber
   übersehen, dass .faq-themen weiter unten (dieselbe Seite, andere
   Kachelgruppe) schon immer einen eigenen, KLEINEREN Gitter-Abstand nutzt
   (0.6rem, seit Runde 46/47 unverändert) und dadurch auf derselben Seite
   zwei sichtbar verschiedene Kachelabstände nebeneinander standen
   ("zwischen den Kacheln unten (bei den FAQ Kategorien) sind kleiner ...
   so klein hätte ich sie gerne überall", ausdrücklicher Wunsch, Runde 91).
   Jetzt umgekehrt: alle vier Maße (gap hier + .dash-stats/.start-aktionen
   weiter unten) auf das KLEINERE, bereits vorhandene .faq-themen-Maß
   abgesenkt (0.6rem) - gilt jetzt einheitlich auf jeder Breite, DESHALB
   entfällt die bisherige Handybreite-Media-Query-Überschreibung dieser vier
   Selektoren weiter unten komplett (0.6rem ist bereits der Zielwert, auf
   jeder Bildschirmbreite - .faq-themen selbst hatte nie eine eigene
   Media-Query-Ausnahme für den Gitter-Abstand). margin-top wird dadurch
   sogar überflüssig: .wizard padding-top ist (unverändert, sitenweit) schon
   0.6rem, exakt der neue Zielwert - 0 zusätzlicher margin-top reicht jetzt,
   wo Runde 90 noch +0.65rem/+0.3rem zum Ausgleich brauchte. */
.start-oben {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0;
    margin-bottom: 0.6rem;
}
/* Runde 56: ursprünglich zwei feste Spalten mit einer Sonderregel, die
   GENAU die dritte Kachel ("Neues Ticket") über die volle Breite spannen
   ließ (ein unregelmäßiges Raster war mit nur drei Kacheln nicht zu
   vermeiden, siehe Kopfkommentar bei .start-aktion oben zur Begründung der
   gleichen Höhe wie die Themen-Kacheln). Runde 61: mit der vierten Kachel
   "Zugangsdaten" (siehe startAktionenHtml() in ticket.js) ergibt sich auf
   dem Smartphone jetzt von selbst ein sauberes, gleichmäßiges 2x2-Raster -
   die bisherige nth-child(3)-Sonderregel ist deshalb ersatzlos entfallen.
   Ab Tablet-/Desktopbreite stehen alle vier stattdessen in einer Zeile
   (siehe Media Query weiter unten) - "Aktuelle Probleme, Meine Tickets und
   neue Tickets sollen auch in eine Zeile auf dem Tablet/Desktop, daneben
   noch eine neue Kachel 'Zugangsdaten'", ausdrücklicher Wunsch.
   Runde 90: gap von 0.6rem auf 1.25rem, Runde 91: wieder zurück auf 0.6rem -
   siehe ausführlichen Kopfkommentar bei .start-oben oben. */
.start-aktionen {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
}
/* Runde 94: Basis-Regel von .dash-stats hierher verschoben (stand bisher
   weiter unten beim eigentlichen Dashboard-Abschnitt, siehe dortiger
   Verweis-Kommentar) - sie MUSS im Quelltext vor der gemeinsamen
   Media-Query-Überschreibung (repeat(4, 1fr), direkt im Anschluss weiter
   unten) stehen, sonst gewinnt bei gleicher Spezifität die später stehende
   Basis-Regel und die Vier-Spalten-Ansicht ab Tablet/Desktop greift nie -
   genau das war der Bug, den "die vier admin kacheln sollen auch so breit
   sein, wie die kacheln darunter" (ausdrücklicher Wunsch, Runde 94)
   gemeldet hat. */
.dash-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
}
/* Runde 49: vorher ein durchgängig blau umrandeter/gefüllter Kasten - im
   "Ruhig & Klar"-Mockup (vom Nutzer als Richtung ausgewählt) sind die
   beiden Start-Kacheln neutrale, dünn umrandete Kacheln wie .kachel-btn;
   die Farbe kommt jetzt nur noch über den runden Icon-Badge (.icon-rund,
   siehe iconBadgeHtml() in ticket.js) - ruhiger, weniger "zugekleistert".
   Farbig bleibt bewusst NUR die Gute-Nachrichten-Kachel weiter unten (die
   soll als Positiv-Hinweis weiterhin hervorstechen). */
.start-aktion {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Runde 48 verlangt exakt dieselbe Höhe wie .faq-themen .kachel-btn
       weiter unten (siehe dortiger Kopfkommentar) - deshalb hier bewusst
       dieselben Werte (Gap + Badge-Größe), nicht die etwas größeren
       Standardwerte von .icon-rund/.kachel-btn. */
    gap: 0.25rem;
    padding: 0.55rem 0.4rem;
    min-height: 2.6rem;
    border: 1px solid var(--blau-rand);
    border-radius: var(--radius);
    background: var(--flaeche);
    /* Runde 58: "Die Formatierung von IT-Sprechstunde, Aktuelle Probleme,
       Meine Tickets und Neues Ticket soll der der übrigen Kacheln
       entsprechen", ausdrücklicher Wunsch - vorher eigene, kräftigere Werte
       (var(--text)/1rem/700), jetzt dieselben wie .faq-themen .kachel-btn
       (Farbe/Größe/Gewicht kommen von der gemeinsamen .kachel-btn-Basis,
       siehe dort) - .start-aktion übernimmt die THEMEN-Kachel-Maße bereits
       für Höhe/Abstand (siehe Kopfkommentar oben), jetzt auch für die
       Schrift. */
    color: var(--blau-dunkel);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    /* Runde 61: "Zugangsdaten" (viertes .start-aktion-Element, siehe
       startAktionenHtml() in ticket.js) ist bewusst ein echtes <a href>
       statt eines <button> (funktioniert dadurch auch ohne JavaScript) -
       ohne dieses text-decoration hätte NUR diese eine Kachel einen
       Link-Unterstrich gezeigt, die anderen drei (echte Buttons) nicht. */
    text-decoration: none;
}
.start-aktion:hover, .start-aktion:focus-visible { border-color: var(--blau); background: var(--blau-hell); }
.start-aktion .icon-rund { width: 1.9rem; height: 1.9rem; }

/* Runde 47: "IT-Sprechstunde" (seit Runde 89: "IT-Treff", siehe
   Kopfkommentar it-sprechstunde-verwaltung.php) - eine einzige Kachel ÜBER
   den beiden Start-Kacheln (siehe .start-aktionen oben). Bis Runde 88 ein
   frei editierbares FAQ-Systemthema, seit Runde 89 die großen
   Termin-Angaben aus treffHtml() (siehe dort in ticket.js) - dieselbe
   Kopf-/Inhalt-Optik wie eine einzelne .faq-frage/.faq-antwort-Zeile, nur
   als eigenständige Kachel statt Teil einer Liste. Klassen bewusst weiter
   mit dem alten "start-sprechstunde-"-Präfix NICHT fortgeführt, sondern auf
   "start-treff-" umbenannt - Runde 89 baut den Inhalt dieser Kachel ohnehin
   komplett neu, ein guter Zeitpunkt für den Namenswechsel. */
/* Runde 49: vorher kräftig blau umrandet + gefüllter Kopf - im "Ruhig &
   Klar"-Mockup ist die Kachel eine neutrale, dünn umrandete Kachel wie die
   Themen-Kacheln (Farbe kommt nur über den Icon-Badge, siehe
   iconInlineHtml() in ticket.js) - nur die Gute-Nachrichten-Kachel weiter
   unten bleibt bewusst farbig. */
.start-treff {
    border: 1px solid var(--blau-rand);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--flaeche);
    /* Runde 48: einheitlicher Abstand zur nächsten Kachel (Meldungen/
       Störung melden), dieselben 0.6rem wie überall in diesem Kachel-Block
       (siehe Kopfkommentar bei .start-aktionen). Runde 60: dieser Abstand
       kommt jetzt vom "gap" des gemeinsamen Wrappers .start-oben (siehe
       dort) statt von einem eigenen margin-bottom - nötig, weil diese
       Kachel ab Tablet-/Desktopbreite nicht mehr zwingend direkt ÜBER der
       nächsten steht, sondern per Grid daneben (siehe Media Query weiter
       unten); ein festes margin-bottom hätte dort die beiden
       nebeneinanderstehenden Kacheln unterschiedlich hoch werden lassen. */
}
/* Runde 94: "In der Überschrift (zentriert) einfach heißen: Nächster
   IT-Treff", ausdrücklicher Wunsch - justify-content/text-align von
   "space-between"/"left" auf "center" umgestellt (Icon, Titeltext und beim
   Admin der Stift-Button rücken dadurch als eine Gruppe mittig zusammen,
   statt wie bisher Titel links/Stift rechts außen). Padding außerdem von
   0.7rem auf 0.55rem gesenkt, Teil der ebenfalls gewünschten Kompaktierung
   dieser Kachel. */
.start-treff-kopf {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    /* Runde 95: unteres Padding von 0.55rem auf 0.2rem gesenkt ("Überschrift
       und Termin in der Zeile darunter sollen deutlich enger zusammen
       sein, also den Abstand deutlich verkleinern!", ausdrücklicher
       Wunsch) - zusammen mit dem auf 0 gesenkten oberen Padding von
       .start-treff-inhalt weiter unten schrumpft der Abstand damit von
       0.95rem auf 0.2rem. Oben bleibt das volle 0.55rem (unverändert für
       einen ausreichend großen Klick-/Tippbereich des Kopfs). */
    padding: 0.55rem 1rem 0.2rem;
    border: none;
    background: none;
    /* Runde 58: gleiche Angleichung an die Themen-Kacheln wie bei
       .start-aktion oben (siehe dortiger Kommentar) - "font: inherit" ergab
       bisher die Browser-Standardgröße (1rem, body selbst setzt keine
       eigene font-size), deshalb zusätzlich explizit auf den Zielwert
       0.95rem gesetzt; Farbe/Gewicht waren bisher abweichend
       (var(--text)/700). */
    color: var(--blau-dunkel);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}
/* Runde 93: "Linien bei der Gute Nachrichten Kachel und der IT-Treff Kachel
   sollen weg, genauso wie der Hover Effekt bei diesen Kacheln im Bereich der
   Überschrift", ausdrücklicher Wunsch (auf Rückfrage: nur die INNERE
   Trennlinie zwischen Kopf und Inhalt - siehe .start-treff-inhalt weiter
   unten, border-top dort entfernt -, die äußere Kachel-Umrandung bleibt).
   Hover und Fokus standen bisher in EINER gemeinsamen Regel
   (":hover, :focus-visible") - hier aufgetrennt: nur der Maus-Hover-Effekt
   entfällt ("Hover Effekt", wörtlich), :focus-visible bleibt bewusst
   bestehen (Tastatur-Bedienbarkeit - ohne jede sichtbare Markierung wüsste
   eine Tastaturnutzerin nicht, dass gerade dieser Kopf fokussiert ist). */
.start-treff-kopf:focus-visible { background: var(--blau-hell); }
.start-treff-titel { display: inline-flex; align-items: center; gap: 0.6rem; }
/* Runde 61: "Der Hintergrund bei der IT-Sprechstunde Kachel soll weiß
   sein", ausdrücklicher Wunsch (Zitat aus Runde 61, damals noch unter dem
   alten Namen) - vorher var(--flaeche-alt) (die etwas gräulich-blaue
   Seitenhintergrundfarbe, sonst zur Abhebung von Karten gedacht, siehe
   Kopfkommentar ganz oben in dieser Datei), das ließ den unteren Teil der
   Kachel leicht grau statt weiß wirken, während .start-treff-kopf direkt
   darüber bereits var(--flaeche) (weiß) nutzt. Jetzt dieselbe Variable wie
   der Kopf - die ganze Kachel ist damit einheitlich weiß (im Dark Mode
   entsprechend die dortige --flaeche-Farbe). */
/* Runde 94: oberes/unteres Padding gesenkt (0.75rem/1rem -> 0.4rem/0.6rem) -
   "Auch hier bitte kompakter!", ausdrücklicher Wunsch. Das vormals größere
   obere Padding kam ursprünglich von der jetzt schon seit Runde 93
   entfernten Trennlinie zum Kopf (s. u.) - ohne Linie braucht es diesen
   Abstand nicht mehr in voller Höhe, "Nächster IT-Treff" und das Datum
   darunter sollen ohnehin "Nächste Zeile" wirken, nicht durch einen
   größeren Leerraum getrennt sein.
   Runde 95: oberes Padding weiter auf 0 gesenkt (siehe ausführlichen
   Kommentar bei .start-treff-kopf oben, derselbe Wunsch) - Überschrift und
   Termin-Zeile liegen jetzt nur noch durch das kleine Kopf-Padding (0.2rem)
   getrennt, nicht mehr zusätzlich durch ein eigenes oberes Polster hier. */
.start-treff-inhalt {
    padding: 0 1rem 0.6rem;
    /* Runde 93: innere Trennlinie zwischen Kopf und Inhalt entfernt (siehe
       ausführlichen Kopfkommentar bei .start-treff-kopf:focus-visible oben)
       - vorher "border-top: 1px solid var(--blau-rand);". */
    background: var(--flaeche);
}
/* Runde 90: "'Nächster Termin' soll über allen anderen Kacheln stehen, in
   einer Kachel die die ganze Breite nutzt. Links und rechts außen an der
   Kachel müssen Pfeile sein, mit denen man dann zwischen den Terminen
   navigiert. Die Übersicht der Termine kann weg", ausdrücklicher Wunsch
   (plus Rückfrage-Antwort: keine zusätzliche Liste, nur die große Anzeige)
   - ersetzt die bisherige Wochen-Vorschau (Pfeile mittig UNTER dem
   "Nächster Termin"-Satz, darunter eine Liste aller Vorkommen der Woche)
   komplett. .start-treff-anzeige ist jetzt der einzige Baustein im Inhalt:
   position:relative, damit die beiden Pfeil-Buttons absolut an den
   äußersten linken/rechten Rand DIESER Kachel andocken können (left/right:
   0, siehe .start-treff-pfeil-btn weiter unten) statt wie bisher in einer
   eigenen, mittigen Zeile zu stehen - "außen an der Kachel", nicht mehr
   zentriert unter dem Text. padding links/rechts schafft dafür Platz, damit
   der Text nicht unter den Pfeilen verschwindet. */
/* Runde 94: min-height von 3.2rem auf 2.5rem gesenkt - reicht weiterhin für
   den Ausfall-Fall (zwei Zeilen: .start-treff-anzeige-haupt +
   .start-treff-anzeige-ausfall, verhindert also weiterhin einen
   Höhensprung gegenüber dem Normalfall mit nur einer Zeile), war im
   Normalfall aber deutlich mehr Luft als der einzeilige Text braucht -
   Teil der für diese Kachel gewünschten Kompaktierung. */
.start-treff-anzeige {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0 2.6rem;
    text-align: center;
}
.start-treff-anzeige-mitte { max-width: 100%; }
/* Runde 91: ".start-treff-anzeige-label" ("Nächster Termin" als kleine Zeile
   hier in der Anzeige) ist ersatzlos entfallen - dieselbe Unterscheidung
   steht jetzt in der Kachel-Überschrift ("IT-Treff: Nächster Termin"/
   "IT-Treff: kommende Termine", siehe treffHtml() in ticket.js), hier wäre
   sie nur noch eine Dopplung gewesen. */
/* Runde 92: "Die Schrift, in der Datum und Raum geschrieben ist, ist zu
   groß, bitte so groß wie die Überschrift", ausdrücklicher Wunsch - bisher
   1.15rem (deutlich größer als die Kachel-Überschrift, siehe
   .start-treff-kopf oben: 0.95rem), jetzt exakt auf diesen Wert gesenkt. */
.start-treff-anzeige-haupt { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--blau-dunkel); }
.start-treff-anzeige-haupt--ausfall { color: var(--fehler); text-decoration: line-through; }
.start-treff-anzeige-ausfall { margin: 0.2rem 0 0; font-weight: 700; color: var(--fehler); }
/* Rund-Knopf-Muster wie .start-gute-nachrichten-pfeil-btn weiter unten, nur
   in Blau statt Grün (passend zur neutralen Kachel-Farbe, siehe
   Kopfkommentar bei .start-treff oben) - jetzt absolut an den äußeren
   Rändern von .start-treff-anzeige verankert und vertikal mittig
   ausgerichtet (top:50% + eigener negativer Versatz über die Höhe/2 statt
   transform, damit :disabled/:hover die Position nicht durch einen
   zusätzlichen transform-Wert verändern). */
/* Runde 96: "ohne die Kreise dargestellt werden", ausdrücklicher Wunsch -
   Rand/Kreis-Hintergrund/-Radius entfallen (vorher: "border: 1px solid
   var(--blau); border-radius: 999px; background: var(--flaeche);"), der
   Knopf ist jetzt ein reiner Pfeil ohne eigene Form. Hover/Fokus zeigen
   trotzdem weiterhin eine dezente Rückmeldung - statt des bisherigen
   volltonig blau gefüllten Kreises jetzt ein leichter, eckiger Farbton
   (dasselbe Muster wie .icon-btn:hover andernorts in dieser Datei), kein
   eigener Rand mehr nötig. Position (top: 50% + margin-top), Breite/Höhe
   (bleiben als reine Klickfläche bestehen) und die links/rechts-Verankerung
   sind unverändert. */
.start-treff-pfeil-btn {
    position: absolute;
    top: 50%;
    margin-top: -1.05rem;
    flex: none;
    width: 2.1rem;
    height: 2.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius);
    background: none;
    color: var(--blau);
    font-size: 1rem;
    cursor: pointer;
}
.start-treff-pfeil-btn--links { left: 0; }
.start-treff-pfeil-btn--rechts { right: 0; }
.start-treff-pfeil-btn:hover, .start-treff-pfeil-btn:focus-visible { background: var(--blau-hell); color: var(--blau); }
.start-treff-pfeil-btn:disabled { opacity: 0.3; cursor: default; }
.start-treff-pfeil-btn:disabled:hover { background: none; }

/* Runde 47: "Gute Nachrichten" - hellgrüne Kachel UNTER den beiden
   Start-Kacheln ("in einem hellen Grün", ausdrücklicher Wunsch - nutzt
   dieselben --gruen/--gruen-hell-Variablen wie die Status-Pillen
   anderswo); bei mehreren Einträgen (Systemthema "gute-nachrichten")
   wechseln die beiden Pfeile zwischen ihnen (siehe guteNachrichtenHtml()
   in ticket.js).
   Runde 60: "soll auf dem Desktop und dem Tablet auch immer aufgeklappt
   sein", ausdrücklicher Wunsch - ab Tablet-/Desktopbreite erzwang die
   Media Query weiter unten damals die Anzeige von .start-gute-nachrichten-
   inhalt unabhängig vom Klapp-Zustand; auf dem Smartphone blieb das
   bisherige Verhalten (nur Kopf sichtbar, Inhalt erst nach Klick) zunächst
   erhalten.
   Runde 96: "Die 'Gute Nachrichten' Kachel soll auch auf dem Smartphone
   immer ausgeklappt sein", ausdrücklicher Wunsch - genau wie seit Runde 58
   bei ".start-treff" (siehe Kopfkommentar dort) ist der Inhalt jetzt auf
   JEDER Breite immer sichtbar, kein Klick/Pfeil zum Auf-/Zuklappen mehr
   nötig; der Kopf ist für normale Nutzer dadurch kein <button> mehr,
   sondern (wie bei .start-treff-kopf) ein reines, nicht interaktives
   <div> (siehe guteNachrichtenHtml() in ticket.js). Details zu den dadurch
   entfallenen Regeln bei .start-gute-nachrichten-inhalt und in der jetzt
   entfernten Media-Query-Regel weiter unten. */
/* Runde 66: "Die Kachel Gute Nachrichten soll genauso aussehen, wie die
   anderen Kacheln, nur dass das Google Symbol in grün ist und auch die
   Überschrift und die Good News (also alles was fettgedruckt ist) in Grün
   sein soll; Die Pfeil-Buttons können so bleiben wie sie sind",
   ausdrücklicher Wunsch - die bisherige durchgängig grün getönte Kachel
   (Rand/Hintergrund in --gruen/--gruen-hell, siehe Git-Historie) ist damit
   entfallen: Rand und Hintergrund jetzt wortwörtlich dieselben Werte wie
   .start-treff oben (neutrale, dünn umrandete Kachel). Grün bleibt
   gezielt nur bei den fettgedruckten Textstellen (Kopf-Überschrift,
   Eintrags-Titel .start-gute-nachrichten-inhalt h4) und beim Icon-Badge -
   die Navigations-Pfeile (.start-gute-nachrichten-pfeil-btn weiter unten,
   schon vorher grün) blieben ausdrücklich unverändert. */
.start-gute-nachrichten {
    border: 1px solid var(--blau-rand);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--flaeche);
    /* Runde 48: dieselben 0.6rem wie bei .start-treff/.start-aktionen
       (siehe Kopfkommentar dort) - vorher 8px, das war knapp weniger als
       der 0.6rem-Gitterabstand der Themen-Kacheln weiter unten.
       Runde 60: dieser Abstand kam danach vom "gap"/margin-bottom des
       gemeinsamen Wrappers .start-oben (siehe Kopfkommentar bei .start-oben
       in ticket.css) - bis Runde 89 ab Tablet-/Desktopbreite NEBEN statt
       UNTER "IT-Treff", seit Runde 90 (".start-oben-kacheln" komplett
       entfallen, siehe dortiger Kopfkommentar) auf jeder Bildschirmbreite
       wieder UNTER den übrigen Blöcken, jetzt als eigener, volle Breite
       nutzender Block. */
}
/* Runde 90 hatte die Überschrift zentriert ("Die Überschrift soll
   zentriert [werden]", damals ausdrücklicher Wunsch) - Runde 91 nahm das
   wieder zurück ("Die Überschrift bei Gute Nachrichten und das Symbol
   sollen linksbündig, nicht zentriert", damals ausdrücklicher Wunsch).
   Runde 95 dreht das jetzt erneut um: "statt der Überschrift 'Gute
   Nachrichten' soll da immer der Titel der Nachricht oben als Überschrift
   stehen (zentriert)", ausdrücklicher Wunsch - anders als bei Runde 90/91
   steht hier jetzt kein fester Text mehr, sondern der wechselnde Titel des
   gerade angezeigten Eintrags (siehe guteNachrichtenHtml() in ticket.js) -
   wieder "justify-content: center"/"text-align: center", identisch zum
   unveränderten .start-treff-kopf oben (Icon, Titel und beim Admin der
   Stift-Button rücken dadurch wieder als eine Gruppe mittig zusammen). */
/* Runde 94: Kopf-Padding von 0.7rem auf 0.55rem gesenkt - dasselbe Maß wie
   .start-aktion/.dash-stat ("die Gute Nachrichten Kachel soll kompakter,
   also von der Höhe her. Da ist mir zu viel Leerraum", ausdrücklicher
   Wunsch). */
.start-gute-nachrichten-kopf {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.55rem 1rem;
    border: none;
    background: none;
    color: var(--gruen);
    font: inherit;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}
/* Runde 66: dasselbe Hover/Fokus-Verhalten wie .start-treff-kopf (statt
   bisher einem Unterstrich) - "aussehen wie die anderen Kacheln" gilt auch
   fürs Zusammenspiel, nicht nur für Rand/Hintergrund in Ruhe. */
/* Runde 93: siehe ausführlichen Kopfkommentar bei .start-treff-kopf:focus-
   visible oben - dieselbe Aufteilung (nur Hover entfällt, Fokus bleibt). */
.start-gute-nachrichten-kopf:focus-visible { background: var(--blau-hell); }
/* Runde 72: für Admins ist der Kopf jetzt ein echter Link (<a>, siehe
   guteNachrichtenHtml() in ticket.js) statt eines <button> - anders als ein
   <button> ist ein <a> standardmäßig unterstrichen und es gibt in dieser
   Datei kein globales Anker-Reset ("a { text-decoration: ... }"), deshalb
   hier eine eigene Regel.
   Runde 82, Punkt 3: seit der Admin-Kopf der damaligen IT-Sprechstunde
   (vorher ein <button>, siehe dortiger Kopfkommentar in ticket.js)
   ebenfalls auf einen echten Link umgestellt wurde (führt jetzt auf
   it-sprechstunde-verwaltung.php statt ein Formular inline zu öffnen),
   braucht .start-treff-kopf--admin (bis Runde 88: .start-sprechstunde-kopf
   --admin) dieselbe Regel - siehe dort, direkt im Anschluss. */
.start-gute-nachrichten-kopf--admin,
.start-treff-kopf--admin {
    text-decoration: none;
}
.start-gute-nachrichten-titel { display: inline-flex; align-items: center; gap: 0.6rem; }
/* Runde 66: vorher ein umgedrehter Badge (heller Kreis, grünes Icon), extra
   nötig, weil die ganze Kachel damals grün getönt war. Jetzt derselbe
   Grundaufbau wie überall (heller Farbkreis + Icon in derselben Farbe,
   siehe .icon-rund oben), nur eben in Grün statt im Standard-Blau. */
.start-gute-nachrichten-titel .icon-rund { background: var(--gruen-hell); color: var(--gruen); }
/* Runde 96: der Klapp-Pfeil (".start-gute-nachrichten-pfeil", vorher: "flex:
   none; color: var(--text-dezent);") ist entfallen - seit Runde 96 gibt es
   für normale Nutzer kein Auf-/Zuklappen mehr (siehe ausführlichen
   Kopfkommentar bei .start-gute-nachrichten oben), der Pfeil-Span steht
   deshalb nicht mehr im Markup (siehe guteNachrichtenHtml() in ticket.js) -
   toter Code, deshalb entfernt. */
/* Runde 60: der Inhalt steht seither IMMER im DOM (siehe guteNachrichtenHtml()
   in ticket.js). Runde 66: plus der trennende obere Rand wie bei
   .start-treff-inhalt (passt jetzt zur neutralen Kachel-Optik).
   Runde 93: innere Trennlinie entfernt (siehe Kopfkommentar bei
   .start-treff-inhalt oben) - vorher zusätzlich "border-top: 1px solid
   var(--blau-rand);".
   Runde 94: unteres Padding von 1rem auf 0.6rem gesenkt (dasselbe Maß wie
   überall sonst in dieser Datei, siehe Kopfkommentar bei .start-oben) -
   zusammen mit dem reduzierten Kopf-Padding und der entfallenen
   Absatz-Unterkante weiter unten ergibt das insgesamt die gewünschte
   geringere Kachel-Höhe.
   Runde 96: "soll auch auf dem Smartphone immer ausgeklappt sein",
   ausdrücklicher Wunsch - genau wie bei ".start-treff-inhalt" (immer offen
   seit Runde 58) ist der Inhalt jetzt auf JEDER Breite unconditioniert
   sichtbar (vorher: "display: none", erst ab Tablet-/Desktopbreite per
   Media Query oder nach einem Klick auf dem Smartphone auf "block"
   umgeschaltet). Die bisherige Modifier-Klasse ".start-gute-nachrichten--
   offen" (setzte "display: block" auf dem Smartphone nach einem Klick) ist
   damit komplett entfallen - toter Code, deshalb entfernt (vorher: ".start-
   gute-nachrichten--offen .start-gute-nachrichten-inhalt { display:
   block; }"). Siehe auch den Kopfkommentar weiter unten bei der jetzt
   entfernten Media-Query-Regel für Tablet/Desktop. */
.start-gute-nachrichten-inhalt { display: block; padding: 0 1rem 0.6rem; }
/* Runde 95: die eigene <h4> mit dem Eintrags-Titel HIER im Inhalt ist
   entfallen (siehe ausführlichen Kommentar bei .start-gute-nachrichten-kopf
   oben - derselbe Titel steht jetzt stattdessen in der Kachel-Überschrift)
   - diese Regel wäre dadurch toter Code, deshalb entfernt (vorher:
   ".start-gute-nachrichten-inhalt h4 { margin: 0 0 0.3rem; font-size:
   0.95rem; color: var(--gruen); }"). */
/* Runde 94: die letzte Zeile des Nachrichtentexts (".faq-antwort-text p",
   siehe dortige Basis-Regel weiter oben) bräuchte normalerweise noch
   0.4rem eigenen Abstand nach unten - hier übernimmt das bereits das
   Innenabstand-Polster von .start-gute-nachrichten-inhalt selbst (s. o.),
   der zusätzliche Absatz-Abstand würde sich sonst einfach draufaddieren. */
.start-gute-nachrichten-inhalt .faq-antwort-text p:last-child { margin-bottom: 0; }
/* Runde 90: "auch sollen die Pfeile nach außen wandern", ausdrücklicher
   Wunsch - genau dasselbe Muster wie .start-treff-anzeige/-pfeil-btn oben
   (position:relative als Anker, die Pfeile absolut an den äußeren Rändern,
   vertikal mittig), nur in Grün statt Blau. Ersetzt die bisherige
   ".start-gute-nachrichten-nav"-Zeile (Pfeile mittig UNTER dem Text). */
.start-gute-nachrichten-anzeige {
    position: relative;
    padding: 0 2.6rem;
    text-align: center;
}
.start-gute-nachrichten-mitte { max-width: 100%; }
/* Runde 96: siehe ausführlichen Kommentar bei .start-treff-pfeil-btn oben -
   dieselbe Entfernung der Kreis-Form, nur in Grün statt Blau. */
.start-gute-nachrichten-pfeil-btn {
    position: absolute;
    top: 50%;
    margin-top: -1.05rem;
    flex: none;
    width: 2.1rem;
    height: 2.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius);
    background: none;
    color: var(--gruen);
    font-size: 1rem;
    cursor: pointer;
}
.start-gute-nachrichten-pfeil-btn--links { left: 0; }
.start-gute-nachrichten-pfeil-btn--rechts { right: 0; }
.start-gute-nachrichten-pfeil-btn:hover, .start-gute-nachrichten-pfeil-btn:focus-visible { background: var(--gruen-hell); color: var(--gruen); }
/* Runde 91: der Zähler "X / Y" unterhalb der Nachricht (".start-gute-
   nachrichten-zaehler") ist ersatzlos entfallen ("1/5, 2/5 usw kann weg",
   ausdrücklicher Wunsch) - keine Regel mehr nötig.
   Runde 48: Erstellungsdatum einer "Gute Nachrichten"-Meldung ("Bei den
   guten Nachrichten soll neben dem Titel auch das Datum der Erstellung
   eingeblendet werden", ausdrücklicher Wunsch) - dezent, damit der Titel
   selbst weiterhin im Vordergrund steht. In der Verwaltung
   (faq-verwaltung.php) eingebbar, siehe dortiges "Datum der Erstellung"-Feld
   im Abschnitt "Startseiten-Inhalte".
   Runde 90: "das Datum [soll] unter die Nachricht wandern (auch
   zentriert)", ausdrücklicher Wunsch - vorher stand es direkt NEBEN dem
   Titel (in derselben h4-Zeile), jetzt als eigene Zeile UNTER dem
   Nachrichtentext (siehe guteNachrichtenHtml() in ticket.js); margin/
   text-align zentrieren es dabei wie den Rest von .start-gute-nachrichten-
   anzeige (text-align:center, siehe oben).
   Runde 94: oberer Abstand von 0.4rem auf 0.3rem gesenkt, Teil der
   allgemeinen Kompaktierung dieser Kachel (siehe Kopfkommentar bei
   .start-gute-nachrichten-kopf). */
.start-gute-nachrichten-datum {
    margin: 0.3rem 0 0;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--text-dezent);
}

/* Runde 47: Hinweistext über den Themen-Kacheln ("oder Thema auswählen") -
   Runde 48: entfallen ("'Thema suchen' soll 'Thema suchen oder auswählen'
   werden, dafür kann das untere 'oder Thema auswählen' weg", ausdrücklicher
   Wunsch) - das Label selbst trägt den Hinweis jetzt bereits (siehe
   .feld label bei #faq-suche in renderFaq(), ticket.js), diese separate
   Zeile darunter wäre nur noch redundant gewesen. Die Regel .faq-such-hinweis
   ist damit ersatzlos entfallen (keine Verwendung mehr in ticket.js). */

/* Runde 48: eigener Modifikator für das Suchfeld auf der FAQ-Startseite -
   ersetzt hier gezielt das generische .feld { margin-bottom: 1rem; } (das
   bleibt für alle anderen Formulare/Schritte unverändert), damit der
   Abstand zum Themen-Raster darunter dieselben 0.6rem sind wie überall
   sonst in diesem Kachel-Block ("die gleichen Abstände wie die Kacheln
   unten", ausdrücklicher Wunsch) statt der sonst üblichen 1rem. */
.faq-suche-feld { margin-bottom: 0.6rem; }
/* Runde 58: "'Thema suchen oder auswählen' soll auch die gleiche
   Schriftgröße und Schriftart und -farbe haben [wie die übrigen Kacheln]",
   ausdrücklicher Wunsch - Schriftart/-farbe stimmen über das generische
   .feld label oben bereits mit .faq-themen .kachel-btn überein (beide
   var(--blau-dunkel)/600), nur die Größe wich mit 0.9rem vom dortigen
   Zielwert 0.95rem ab - deshalb hier gezielt auf .faq-suche-feld
   beschränkt nachgezogen, statt die generische .feld label-Regel (gilt für
   ALLE anderen Formularfelder im Melde-Assistenten) anzufassen. */
.faq-suche-feld label { font-size: 0.95rem; }
/* Runde 49: Lupen-Symbol im Suchfeld (wie im "Ruhig & Klar"-Mockup) -
   eigener Wrapper statt eines ::before auf dem Input, weil <input> keine
   Pseudo-Elemente erlaubt. */
.faq-suche-wrap { position: relative; }
.faq-suche-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dezent);
    pointer-events: none;
    display: flex;
}
.faq-suche-wrap input[type="search"] { padding-left: 2.2rem; }

/* Runde 46: "die Kacheln sollen insgesamt etwas kleiner, also nicht so
   hoch wie bisher sein, damit mehr Kacheln auf eine Seite passen" - gilt
   ausdrücklich nur für die Themen-Kacheln hier (nicht für .kachel-btn an
   anderer Stelle, z. B. die Kategorie-Auswahl im Melde-Assistenten, die
   unverändert bleibt) - deshalb eine auf .faq-themen beschränkte
   Überschreibung von Innenabstand/Mindesthöhe/Icon-Größe statt einer
   Änderung an der gemeinsamen .kachel-btn-Basis. Runde 47: "nur zwei
   Kacheln pro Zeile, also wie vorher" - feste zwei Spalten (wie
   .start-aktionen) statt des Round-46-auto-fill(7rem), das auf breiteren
   Bildschirmen mehr als zwei Spalten ergab; die (gute) Höhe aus Runde 46
   bleibt unverändert.
   Runde 60: diese feste Zweispaltigkeit gilt jetzt nur noch auf dem
   Smartphone ("Auf dem Smartphone nur noch zwei Kacheln", ausdrücklicher
   Wunsch, entspricht ohnehin dem bisherigen Verhalten) - ab Tablet-/
   Desktopbreite macht eine Media Query weiter unten daraus vier Spalten
   samt etwas kleineren Kacheln ("Die Themen Kacheln können auch kleiner
   sein, da sollten vier nebeneinander passen", ausdrücklicher Wunsch). */
.faq-themen {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
}
.faq-themen .kachel-btn {
    padding: 0.55rem 0.4rem;
    min-height: 2.6rem;
    gap: 0.25rem;
}
.faq-themen .kachel-btn .icon-rund { width: 1.9rem; height: 1.9rem; }
.faq-thema-titel { margin: 0 0 0.6rem; font-size: 1.05rem; color: var(--blau-dunkel); }
/* Runde 40: der Eintrag selbst ist jetzt eine aufklappbare Frage/Antwort-
   Zeile (.faq-frage = Kopf, .faq-antwort = Inhalt, nur im DOM wenn
   aufgeklappt) statt sofort sichtbarem Text - "die Antworten sollen noch
   nicht sichtbar sein, erst wenn man die Fragen anklickt", derselbe Aufbau
   wie .stoerung-geraet/.stoerung-kopf/.stoerung-details oben. */
/* Runde 96: "Die Kacheln beim FAQ sollen weißen Hintergrund haben, auch der
   ausgeklappte Teil", ausdrücklicher Wunsch - vorher hatte nur .faq-frage
   (der Kopf) eine eigene Hintergrundfarbe (var(--flaeche), s. u.);
   .faq-antwort (der nur bei aufgeklapptem Eintrag im DOM stehende Inhalt,
   siehe faqEintragZeile() in ticket.js) hatte KEINEN eigenen Hintergrund
   und zeigte dadurch den etwas dunkleren Seitenhintergrund (var(--flaeche-
   alt), siehe body-Regel oben) durch, sichtbar als leichter Farbsprung
   zwischen Kopf und aufgeklapptem Inhalt. Der Hintergrund wandert jetzt auf
   den gemeinsamen Rahmen .faq-eintrag selbst, damit Kopf UND Inhalt
   gleichermaßen (und garantiert lückenlos, auch an den abgerundeten Ecken
   dank "overflow: hidden") durchgängig weiß erscheinen - die eigene
   Hintergrundfarbe von .faq-frage bleibt trotzdem bestehen (siehe dort),
   weil sie weiterhin für den eigenen Hover-/Fokus-Zustand gebraucht wird. */
.faq-eintrag {
    border: 1px solid var(--blau-rand);
    border-radius: var(--radius);
    margin-bottom: 0.6rem;
    overflow: hidden;
    background: var(--flaeche);
}
.faq-frage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    background: var(--flaeche);
    color: var(--blau-dunkel);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.faq-frage:hover, .faq-frage:focus-visible { background: var(--blau-hell); }
.faq-frage-text { flex: 1; }
.faq-frage-thema {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-dezent);
}
.faq-frage-pfeil { flex: none; color: var(--text-dezent); font-size: 0.7rem; }
.faq-antwort {
    /* Runde 54: eigenes padding-top (vorher 0) - der Abstand zwischen
       Überschriftsbereich und Inhalt hing bisher ausschließlich vom
       margin-top des ERSTEN Kindelements ab (siehe :first-child-Regeln
       unten). Ein alter, reiner Text-Eintrag (kein <p>/<h1>/<h2>, siehe
       faqTextHtml()/nl2brFaq() in ticket.js) hat KEIN solches Kindelement
       und rutschte dadurch ohne jeden Abstand direkt unter den Kopf ("Der
       Abstand vom Inhalt zum Überschriftsbereich ist zu klein", mit
       Screenshot belegt - bei den Störungsmeldung-Kacheln entsteht der
       Abstand stattdessen über das margin-top von deren erstem <h5>, siehe
       .stoerung-abschnitt h5, funktioniert dort also unabhängig vom
       Inhaltstyp). padding-top hier übernimmt das jetzt EINHEITLICH für
       jeden Inhaltstyp - die :first-child-margins unten sind deshalb auf 0
       gesetzt, damit sich der Abstand nicht verdoppelt.
    */
    padding: 0.75rem 1rem 0.9rem;
}
.faq-antwort p { margin: 0.7rem 0 0.4rem; font-size: 0.9rem; }
/* Runde 45: Rich-Text-Inhalte aus dem neuen FAQ-Editor (siehe
   .faqv-editor-wrap in faq-verwaltung.php) - .faq-antwort-text ersetzt das
   einzelne <p> als Wrapper, weil formatierte Antworten jetzt auch
   Block-Elemente (H1/H2/Listen/Zitat) enthalten können, die nicht gültig in
   ein <p> verschachtelt wären (siehe faqTextHtml() in ticket.js). */
.faq-antwort-text { font-size: 0.9rem; }
.faq-antwort-text p { margin: 0.7rem 0 0.4rem; }
.faq-antwort-text p:first-child { margin-top: 0; }
.faq-antwort-text h1 { font-size: 1.15rem; margin: 0.8rem 0 0.4rem; color: var(--blau-dunkel); }
.faq-antwort-text h2 { font-size: 1.02rem; margin: 0.7rem 0 0.35rem; color: var(--blau-dunkel); }
.faq-antwort-text h1:first-child, .faq-antwort-text h2:first-child { margin-top: 0; }
.faq-antwort-text ul, .faq-antwort-text ol { margin: 0.5rem 0; padding-left: 1.4rem; }
.faq-antwort-text li { margin-bottom: 0.2rem; }
.faq-antwort-text blockquote {
    margin: 0.5rem 0;
    padding: 0.3rem 0.8rem;
    border-left: 3px solid var(--blau-rand);
    color: var(--text-dezent);
}
/* Runde 56: "Bearbeiten"-Knopf einer aufgeklappten FAQ-Antwort (nur für
   Admins gerendert, siehe faqEintragZeile in ticket.js) - klein/dezent
   wie die Fuß-Admin-Links, damit er die normale Lese-Ansicht für alle
   anderen (nicht-admin) Nutzer nicht ablenkt bzw. für Admins nicht
   aufdringlicher wirkt als nötig. */
.faq-antwort-bearbeiten-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.6rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--blau-rand);
    border-radius: var(--radius);
    background: var(--flaeche);
    color: var(--blau-dunkel);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.faq-antwort-bearbeiten-btn:hover, .faq-antwort-bearbeiten-btn:focus-visible {
    border-color: var(--blau);
    background: var(--blau-hell);
}
/* Speichern/Abbrechen unter dem Editor (faqAntwortEditorHtml). */
.faq-antwort-bearbeiten-aktionen {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.faq-anhaenge {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.4rem;
}
.faq-anhang {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--blau);
    font-size: 0.85rem;
    text-decoration: none;
}
.faq-anhang:hover { text-decoration: underline; }

/* Eigenständiger Hinweistext außerhalb eines Wizard-Schritts (z. B. oben auf
   faq-verwaltung.php) - gleiche Optik wie ".schritt .hinweis", nur nicht auf
   die Verschachtelung dort angewiesen. */
.hinweis { margin: 0 0 1rem; color: var(--text-dezent); font-size: 0.9rem; }

/* Runde 85: Lesetext auf impressum.php (nicht-Admin-Ansicht) - normaler
   Fließtext in normaler Textfarbe (kein ".hinweis", das wäre zu blass für
   den eigentlichen Seiteninhalt), mit etwas mehr Zeilenhöhe, da der Text
   per nl2br() mehrzeilig ist. */
.impressum-text { margin: 0; color: var(--text); line-height: 1.6; white-space: pre-line; }

/* --- Erfolgsmeldung (Gegenstück zu .globale-fehlermeldung) --------------- */
.globale-erfolgsmeldung {
    padding: 0.9rem 1rem;
    border-radius: var(--radius);
    background: var(--gruen-hell);
    border: 2px solid var(--gruen);
    color: var(--gruen);
    font-size: 0.88rem;
}

/* --- Zusätzliche Button-Varianten (Runde 40, für faq-verwaltung.php) ----- */
.btn--gefahr {
    background: var(--fehler);
    border-color: var(--fehler);
}
.btn--gefahr:hover { background: var(--fehler-dunkel); border-color: var(--fehler-dunkel); }
.btn--gefahr-ghost {
    background: var(--flaeche);
    border-color: var(--fehler);
    color: var(--fehler);
}
.btn--gefahr-ghost:hover { background: var(--fehler-hell); }

/* --- FAQ-Verwaltung (Runde 40) -------------------------------------------
   Vorher LCARS-Look (css/lcars-base.css + css/verwaltung.css, verwaltung-*-
   Klassen) - jetzt im Help-Desk-Look auf Basis der Bausteine oben (.btn,
   .feld, .leer-hinweis, ...), nur die Bausteine, die es dort noch nicht gab
   (Filterleiste, Themen-Abschnitt, Eintrags-Karte, Lösch-Bestätigung),
   kommen hier dazu, mit faqv-Präfix zur Abgrenzung. */
.faqv-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--blau-rand);
}
.faqv-filter-btn {
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--blau-rand);
    border-radius: 999px;
    background: var(--flaeche);
    color: var(--blau-dunkel);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.faqv-filter-btn:hover, .faqv-filter-btn:focus-visible { border-color: var(--blau); background: var(--blau-hell); }
.faqv-filter-btn--aktiv {
    background: var(--blau);
    border-color: var(--blau);
    color: #fff;
}
.faqv-filter-btn--aktiv:hover { background: var(--blau-dunkel); border-color: var(--blau-dunkel); }

.faqv-abschnitt {
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--blau-rand);
    border-radius: var(--radius);
}
.faqv-abschnitt-titel { margin: 0 0 1rem; font-size: 1.1rem; color: var(--blau-dunkel); }
/* Runde 47: "Startseiten-Inhalte"-Abschnitt (IT-Sprechstunde/Gute
   Nachrichten) - leicht hervorgehoben (kräftigere Rahmenfarbe + dezenter
   Hintergrund) gegenüber den normalen Themen-Abschnitten darunter, damit
   er als eigener, andersartiger Bereich erkennbar ist. */
.faqv-abschnitt--spezial { border-color: var(--blau); border-width: 3px; }
.faqv-spezial-block { margin-top: 1.25rem; }
.faqv-spezial-block:first-of-type { margin-top: 0; }
/* Runde 57: faqv-spezial-titel ist jetzt eine <summary> (der ganze Block
   ein <details>, siehe faq-verwaltung.php) statt einer festen <h4> - dieselbe
   Aufklapp-Optik wie .faqv-details summary weiter unten, nur etwas größer/
   fetter, passend zur bisherigen Titelgröße. */
.faqv-spezial-titel {
    margin: 0;
    padding: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--blau-dunkel);
    cursor: pointer;
}
.faqv-spezial-titel:hover { color: var(--blau); }
.faqv-spezial-block[open] > .faqv-spezial-titel { padding-bottom: 0.75rem; border-bottom: 1px dashed var(--blau-rand); margin-bottom: 0.75rem; }

/* Runde 57: Ausfall-Schalter für die IT-Sprechstunde ("fällt heute/morgen
   leider aus") - kompakte Zeile mit den beiden Kontrollkästchen + Speichern
   nebeneinander, ähnlich .faqv-zeile, aber ohne größere Formularfelder. */
.faqv-ausfall-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: var(--fehler-hell);
    border: 1px solid var(--fehler);
    border-radius: var(--radius);
}
.faqv-ausfall-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    color: var(--fehler-dunkel);
    cursor: pointer;
}
.faqv-ausfall-checkbox input { margin: 0; }

/* Zeile mit mehreren kompakten Feldern + einem Knopf nebeneinander (z. B.
   Thema umbenennen: Name + Icon + Speichern in einer Reihe). */
.faqv-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.faqv-zeile .feld { margin-bottom: 0; }
.faqv-feld-klein { flex: 0 1 14rem; }
.faqv-feld-klein input[type="text"] { width: auto; min-width: 8rem; }

.faqv-loeschen-bestaetigung {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    background: var(--fehler-hell);
    border: 2px solid var(--fehler);
    border-radius: var(--radius);
}
.faqv-loeschen-bestaetigung p { margin: 0; flex: 1 1 100%; font-size: 0.9rem; color: var(--fehler); }

.faqv-liste {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin: 1rem 0;
}
.faqv-karte {
    padding: 1rem;
    border: 1px solid var(--blau-rand);
    border-radius: var(--radius);
    background: var(--blau-hell);
}
.faqv-anhang-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.faqv-anhang-liste li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; }
.faqv-anhang-liste a { color: var(--blau); }

/* Runde 82 (gute-nachrichten-verwaltung.php): immer sichtbarer Kartenkopf
   mit Titel/Datum/Textvorschau + zwei kleinen Hoch/Runter-Knöpfen - siehe
   ausführlichen Kommentar im PHP bei der Kartenauszeichnung. Eigene
   Klassen mit "gnv-"-Präfix (statt die allgemeinen "faqv-*"-Klassen
   weiterzuverwenden), weil dieser Kartenkopf NUR hier vorkommt und nicht
   mit der eigentlichen FAQ-Verwaltung geteilt wird. */
.gnv-kopf {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.gnv-reorder {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: none;
}
.gnv-reorder-btn {
    width: 2rem;
    height: 1.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--blau-rand);
    border-radius: var(--radius);
    background: var(--flaeche);
    color: var(--blau-dunkel);
    font-size: 0.7rem;
    cursor: pointer;
}
.gnv-reorder-btn:hover, .gnv-reorder-btn:focus-visible { background: var(--blau); color: #fff; border-color: var(--blau); }
/* Am Anfang/Ende der Liste gibt es keinen Nachbarn zum Tauschen - der
   jeweilige Knopf wird dann serverseitig mit "disabled" ausgeliefert statt
   versteckt, damit die feste Zwei-Knopf-Spalte nicht "hüpft". */
.gnv-reorder-btn:disabled { opacity: 0.3; cursor: default; }
.gnv-reorder-btn:disabled:hover { background: var(--flaeche); color: var(--blau-dunkel); border-color: var(--blau-rand); }
.gnv-info { flex: 1 1 auto; min-width: 0; }
.gnv-info-titel {
    margin: 0 0 0.25rem;
    font-weight: 600;
    color: var(--blau-dunkel);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}
.gnv-info-datum { font-size: 0.78rem; font-weight: 400; color: var(--text-dezent); }
.gnv-info-vorschau {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-dezent);
    overflow-wrap: break-word;
}
.gnv-karte .faqv-details { margin-top: 0.6rem; }

/* Runde 89 (it-sprechstunde-verwaltung.php, Abschnitt "Nächste Termine"):
   Wochen-Navigation mit den beiden Pfeil-Buttons und der aktuell
   angezeigten Woche mittig dazwischen - "Man soll sich per Pfeil-Buttons
   durch die nächsten Wochen durchklicken können", ausdrücklicher Wunsch.
   Bis Runde 89 gab es eine ganz ähnliche Wochen-Navigation (anderes Markup)
   noch einmal auf der Start-Kachel selbst - seit Runde 90 blättert die
   Start-Kachel stattdessen TERMIN für Termin statt Woche für Woche und
   zeigt keine Wochen-Liste mehr (siehe .start-treff-anzeige/treffHtml() in
   ticket.js) - .spv-wochen-nav hier auf der Verwaltungsseite ist davon
   unberührt, bleibt unverändert die Wochen-Vorschau fürs Pflegen der
   Ausfälle. */
.spv-wochen-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.spv-wochen-titel { font-weight: 600; color: var(--blau-dunkel); text-align: center; }
/* Ein einzelnes Wochen-Vorkommen eines Termins - rot umrandet/hinterlegt,
   sobald es als Ausfall markiert ist (dieselbe Fehlerfarbe wie
   .globale-fehlermeldung), damit ein Ausfall auch in der Liste sofort ins
   Auge fällt, nicht erst über den reinen Text "fällt aus". */
.spv-vorkommen-karte {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.spv-vorkommen-karte--ausfall {
    border-color: var(--fehler);
    background: var(--fehler-hell);
}
.spv-vorkommen-karte--ausfall .gnv-info-titel,
.spv-vorkommen-karte--ausfall .gnv-info-vorschau { color: var(--fehler); }
.spv-ausfall-form { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.spv-ausfall-label {
    border: 1px solid var(--blau-rand);
    border-radius: var(--radius);
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    min-width: 11rem;
}

/* Runde 86 (benutzerverwaltung.php, Design-Migration von css/verwaltung.css
   auf dieses Stylesheet): Kartenkopf einer Zugangs-Karte (Benutzername +
   "DU"-Chip beim eigenen, gerade angemeldeten Zugang) - eigene, kleine
   "bv-"-Klassen statt der bisherigen ".verwaltung-karte-kopf"/
   ".verwaltung-chip" (css/verwaltung.css), weil dieser Kartenkopf wie
   .gnv-kopf oben nur hier vorkommt. Alles andere auf dieser Seite (Karte
   selbst, Inline-Formulare, Lösch-Rückfrage, Felder, Knöpfe) nutzt bereits
   bestehende .faqv-*/.feld/.btn-* Klassen weiter oben/unten in dieser
   Datei - keine weitere Doppelung nötig. */
.bv-karte-kopf {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}
.bv-benutzername {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--blau-dunkel);
}
.bv-chip {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--kond-c2);
    color: #fff;
}

.faqv-details summary {
    cursor: pointer;
    padding: 0.65rem 0;
    font-weight: 600;
    color: var(--blau-dunkel);
}
.faqv-details summary:hover { color: var(--blau); }
.faqv-details[open] summary { margin-bottom: 0.5rem; }
/* Runde 41: Titel eines bestehenden Eintrags als Summary (faqv-karte >
   faqv-details) - etwas größer als die schlichte "Neuen Eintrag
   anlegen"-Summary, damit er klar als Karten-Überschrift erkennbar ist. */
.faqv-eintrag-titel { padding-top: 0; font-size: 1rem; }

/* Runde 57: "Wenn man eine Rubrik auswählt, soll man alle Einträge
   bearbeiten können und dann erst am Ende alles speichern können" - EIN
   Speichern-Knopf unter der Eintrags-Liste eines Themas statt eines Knopfs
   pro Eintrag (siehe faqv-rubrik-form-<id> in faq-verwaltung.php, die
   Eintrags-Felder selbst hängen nur noch per form="..."-Attribut daran,
   stecken optisch unverändert in .faqv-eintrag-felder statt vorher einem
   eigenen <form> je Eintrag). */
.faqv-eintrag-felder { margin: 0; }
.faqv-rubrik-speichern { margin: 0.75rem 0 1.25rem; text-align: right; }

/* Runde 45: Rich-Text-Editor ("Möglichkeit der Formatierung: H1, H2,
   Fettdruck, Kursiver Text, Aufzählungen, nummerierte Listen, einrücken")
   für den FAQ-Text - ersetzt das bisherige einfache <textarea> in
   faq-verwaltung.php. Optik lehnt sich bewusst an .feld textarea an
   (gleicher Rahmen/Radius/Fokus-Zustand), damit sich der neue Editor nahtlos
   in die bestehenden Formulare einfügt. */
.faqv-editor-wrap { margin-bottom: 0.4rem; }
.faqv-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 0.4rem;
    background: var(--blau-hell);
    border: 1px solid var(--blau-rand);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
}
.faqv-editor-toolbar button {
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--blau-rand);
    border-radius: 0.35rem;
    background: var(--flaeche);
    color: var(--blau-dunkel);
    font-size: 0.82rem;
    font: inherit;
    cursor: pointer;
}
.faqv-editor-toolbar button:hover { background: var(--blau-rand); }
.faqv-editor-toolbar button:active,
.faqv-editor-toolbar button.aktiv { background: var(--blau); color: #fff; border-color: var(--blau); }
.faqv-editor {
    min-height: 7rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--blau-rand);
    border-radius: 0 0 var(--radius) var(--radius);
    background: var(--flaeche);
    color: var(--text);
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.faqv-editor:focus { outline: none; border-color: var(--blau); }

/* Runde 53: Icon-Auswahl beim Anlegen/Bearbeiten eines Themas
   (faqvIconAuswahl() in faq-verwaltung.php) - Kachel-Raster aus dem
   Standard-Icon-Set (FAQV_ICON_SET), optisch an .faqv-editor-toolbar
   button angelehnt, plus ein aufklappbares Fallback-Feld für ein eigenes
   Emoji (Themen, die schon vor Runde 53 eins hatten).
   Runde 57: das ganze Raster steckt jetzt selbst in einem <details>
   (.faqv-icon-auswahl) - mit inzwischen 25 Icons war es sonst zu lang
   ("Auswahl der SVG aufklappbar, nimmt sonst auch zu viel Platz weg",
   ausdrücklicher Wunsch). */
.faqv-icon-auswahl summary {
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--blau-dunkel);
    padding: 0.2rem 0;
    list-style: revert;
}
.faqv-icon-auswahl summary:hover { color: var(--blau); }
.faqv-icon-aktuell { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 600; }
.faqv-icon-aktuell svg, .faqv-icon-aktuell img { flex: none; }
.faqv-icon-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.5rem 0 0.4rem;
}
.faqv-icon-swatch {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: 1px solid var(--blau-rand);
    border-radius: 0.35rem;
    background: var(--flaeche);
    color: var(--blau-dunkel);
    cursor: pointer;
}
.faqv-icon-swatch:hover { background: var(--blau-hell); }
.faqv-icon-swatch.aktiv { background: var(--blau); color: #fff; border-color: var(--blau); }
.faqv-icon-swatch img { width: 1.2rem; height: 1.2rem; object-fit: contain; }
/* Runde 96: "Symbole soll man dort für alles hochladen können, also auch die
   Kacheln auf der Startseite z.B. für die FAQ Kategorien", ausdrücklicher
   Wunsch - Upload-Kachel ganz am Ende des Rasters (siehe faqvIconAuswahl()
   in faq-verwaltung.php), dasselbe Grundmuster wie .gv-icon-option--upload
   oben (gestrichelte statt durchgezogener Kontur, als "etwas Eigenes/
   Hinzufügen" statt als fertiges Katalog-Symbol erkennbar), nur mit den
   etwas kleineren Maßen der übrigen .faqv-icon-swatch-Kacheln hier. */
.faqv-icon-swatch--upload {
    border-style: dashed;
    color: var(--blau);
    font-size: 1.1rem;
    font-weight: 700;
}
.faqv-icon-swatch--upload:hover, .faqv-icon-swatch--upload:focus-within {
    border-color: var(--blau);
    background: var(--blau-hell);
}
.faqv-icon-upload-status { margin: 0.2rem 0 0.4rem; font-size: 0.8rem; color: var(--text-dezent); }
.faqv-icon-upload-status--fehler { color: var(--fehler); }
.faqv-icon-frei { font-size: 0.85rem; margin-bottom: 0.6rem; }
.faqv-icon-frei summary { cursor: pointer; color: var(--blau-dunkel); padding: 0.2rem 0; }
.faqv-icon-frei summary:hover { color: var(--blau); }
.faqv-icon-frei input { margin-top: 0.35rem; }
/* Kompakter Icon-Vorspann vor Themen-Überschriften/Filter-Knöpfen
   (faqvIconPraefix()) - Icon und Label sollen auf einer Zeile bleiben. */
.faqv-icon-praefix { display: inline-flex; vertical-align: -0.2em; }
/* Runde 45: Formatierte Inhalte im Editor selbst brauchen Grund-Styling,
   sonst sehen H1/H2/Listen im Bearbeiten-Modus unformatiert aus, obwohl sie
   es beim Speichern/Anzeigen bereits sind. */
.faqv-editor h1 { font-size: 1.3rem; margin: 0.6rem 0 0.4rem; color: var(--blau-dunkel); }
.faqv-editor h2 { font-size: 1.1rem; margin: 0.5rem 0 0.35rem; color: var(--blau-dunkel); }
.faqv-editor ul,
.faqv-editor ol { margin: 0.4rem 0; padding-left: 1.4rem; }
.faqv-editor blockquote {
    margin: 0.4rem 0;
    padding: 0.3rem 0.8rem;
    border-left: 3px solid var(--blau-rand);
    color: var(--blau-dunkel);
}
.faqv-editor p { margin: 0 0 0.5rem; }
.faqv-editor p:last-child { margin-bottom: 0; }

.faqv-themen-checkboxen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0.5rem 0;
}
.faqv-thema-checkbox {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    font-weight: 400;
    color: var(--text);
    cursor: pointer;
}
.faqv-thema-checkbox input { margin: 0; }
/* Runde 58: kleines Auswahlfeld ("gilt für beide"/Label A/Label B), das
   NEBEN einer Kategorie-Checkbox erscheint, wenn das jeweilige Thema beide
   Unterauswahl-Beschriftungen trägt (z. B. "iPads" -> "Schüler"/
   "Lehrkräfte") - siehe faqvUnterauswahlFeld() in faq-verwaltung.php. Ein
   eigenes, kleineres Feld statt der normalen .feld select-Optik (die wäre
   hier, mitten in der Checkbox-Zeile, zu groß). */
.faqv-unterauswahl-auswahl {
    margin-left: -0.5rem;
    padding: 0.15rem 0.4rem;
    border: 1px solid var(--blau-rand);
    border-radius: var(--radius);
    font-size: 0.8rem;
    color: var(--text);
    background: var(--flaeche);
}
/* Etwas Abstand zwischen den Namen/Icon-Feldern und dem eher selten
   gebrauchten Unterauswahl-Block, damit "Speichern"/"Thema anlegen" nicht
   direkt darunter klebt. */
.faqv-unterauswahl-details { margin: 0.4rem 0 0.75rem; }

/* Runde 60/61: ab Tablet-/Desktopbreite (alles über der bestehenden
   Smartphone-Grenze von 480px, siehe @media (width <= 480px) weiter
   unten - dieselbe Grenze, nur hier als unteres statt oberes Limit, damit
   es keine Lücke/Überlappung zwischen beiden Regeln gibt) mehrere
   Änderungen gegenüber dem Smartphone:
   1. (Runde 96: komplett entfallen - "Gute Nachrichten" ist jetzt auf
      JEDER Breite immer aufgeklappt, nicht mehr erst ab hier, und der Kopf
      ist für normale Nutzer kein <button> mehr, sondern ein reines <div>
      (siehe ausführlichen Kopfkommentar bei .start-gute-nachrichten weiter
      oben sowie guteNachrichtenHtml() in ticket.js). Die früher hier
      stehenden fünf Regeln sind deshalb ersatzlos gestrichen:
      ".start-gute-nachrichten-inhalt { display: block !important; }" (gilt
      jetzt unconditioniert als Basis-Regel), ".start-gute-nachrichten-
      pfeil { display: none; }" (betraf einen inzwischen aus dem Markup
      entfernten Klapp-Pfeil), ".start-gute-nachrichten-kopf { cursor:
      default; }" (unnötig, weil .start-gute-nachrichten-kopf jetzt auf
      jeder Breite "cursor: pointer" behält, genau wie das unveränderte
      .start-treff-kopf es schon immer tut), ".start-gute-nachrichten-kopf:
      hover, .start-gute-nachrichten-kopf:focus-visible { text-decoration:
      none; }" (überflüssig, sobald der nicht-Admin-Kopf kein <button>/<a>
      mehr ist, der je einen Unterstrich bräuchte) und ".start-gute-
      nachrichten-kopf--admin { cursor: pointer; }" (überflüssig, weil die
      Basis-Regel diesen Wert jetzt ohnehin schon liefert, nachdem "cursor:
      default" oben entfallen ist).)
   2. Die Themen-Kacheln (.faq-themen) UND die größeren Kacheln-Schritte im
      Melde-Assistenten (.kachel-auswahl-gross - Kategorie/Gebäude/Raum/
      Gebäude-Frage/Pool, siehe Kopfkommentar dort) zeigen vier statt zwei
      pro Zeile - "da sollten vier nebeneinander passen" (Themen, Runde 60)
      bzw. "nur auf dem Desktop und dem Tablet sollen es vier sein"
      (Kategorien, Runde 61), jeweils ausdrücklicher Wunsch; die
      Themen-Kacheln außerdem
      bei etwas kleineren Maßen, damit das auch auf einem schmaleren Tablet
      nicht gedrängt wirkt.
   Bis Runde 89 stand hier außerdem ein Punkt zum Nebeneinander-Layout von
   IT-Sprechstunde/IT-Treff und Gute Nachrichten (".start-oben-kacheln") -
   seit Runde 90 stehen beide als eigene, volle Breite nutzende Blöcke
   direkt untereinander in .start-oben, auf JEDER Bildschirmbreite gleich
   (siehe dortiger Kopfkommentar) - die zugehörigen Regeln sind komplett
   entfallen. */
@media (width > 480px) {
    .start-aktionen { grid-template-columns: repeat(4, 1fr); }
    /* Runde 93: dieselbe Media Query wie .start-aktionen direkt oben, siehe
       Kopfkommentar bei .dash-stats. */
    .dash-stats { grid-template-columns: repeat(4, 1fr); }

    .kachel-auswahl-gross { grid-template-columns: repeat(4, 1fr); }

    .faq-themen { grid-template-columns: repeat(4, 1fr); }
    .faq-themen .kachel-btn {
        padding: 0.45rem 0.3rem;
        min-height: 2.3rem;
        gap: 0.2rem;
        font-size: 0.85rem;
    }
    .faq-themen .kachel-btn .icon-rund { width: 1.6rem; height: 1.6rem; }

    /* Runde 62 hatte hier alle Filter-Blöcke (Störungen/Hinweise, Gebäude-/
       Datum-Sortierung, Status-Filter, Suche, Gebäude-/Raum-Dropdowns+
       Reset) ab dieser Breite in einer gemeinsamen, umbrechenden Zeile
       nebeneinander angeordnet - seit Runde 81 stecken alle außer der
       Suche in einem eigenen, aufploppenden Panel (.filter-panel, s. o.),
       das ohnehin schmal genug ist, damit jeder Block seine eigene,
       vollbreite Zeile behält (genau wie auf dem Smartphone) - diese
       gesamte Media-Query-Anpassung ist damit ersatzlos entfallen. Die neue
       Desktop-Sonderbehandlung des Panels selbst (verankertes Dropdown
       statt Bottom-Sheet) steht weiter unten in einer eigenen Media Query,
       die zusätzlich auf (hover: hover) and (pointer: fine) prüft - "fehlt"
       eine Maus (Tablet/Smartphone, auch im Querformat), bleibt es beim
       Bottom-Sheet ("insbesondere für tablet und Smartphone hätte ich da
       gerne eine elegante Lösung", ausdrücklicher Wunsch). */
}

/* Runde 81: ab hier bekommt das Filter-Panel seine Desktop-Optik - ein
   kompaktes, am Filter-Knopf "angedocktes" Dropdown statt des mobilen
   Bottom-Sheets (s. o.) - bewusst zusätzlich an (hover: hover) and
   (pointer: fine) gebunden (typischerweise Maus/Trackpad), nicht nur an
   eine Mindestbreite: ein iPad im Querformat (siehe Runde 81,
   "Die maximale Seitenbreite soll sich an einem iPad 11 Zoll im
   Querformat orientieren") bleibt dadurch trotz seiner Breite beim
   touch-freundlichen Bottom-Sheet, echte Maus-/Trackpad-Geräte (auch
   schmalere Laptop-Fenster oberhalb von 480px) bekommen das platzsparende
   Dropdown. */
@media (width > 480px) and (hover: hover) and (pointer: fine) {
    .filter-panel-hintergrund {
        /* Bleibt im DOM (für den Klick-außerhalb-Schließen-Mechanismus,
           siehe filterPanelSchliessen() in ticket.js), aber unsichtbar und
           ohne Abdunklung - ein Dropdown verdeckt den Rest der Seite nicht
           wie ein mobiles Bottom-Sheet. */
        background: transparent;
    }
    .filter-panel {
        position: absolute;
        inset: auto 0 auto auto;
        top: calc(100% + 0.5rem);
        bottom: auto;
        left: auto;
        width: 22rem;
        max-width: calc(100vw - 2.3rem);
        max-height: 28rem;
        border-radius: var(--radius);
        box-shadow: 0 0.75rem 2rem rgba(10, 18, 30, 0.18);
    }
    /* Runde 81, Punkt 5: dasselbe verankerte Dropdown fürs
       Verlaufs-Aufklappmenü, hier links statt rechts ausgerichtet (die
       ganze .kopf-logo-gruppe sitzt links im Kopf, ein rechtsbündiges
       Dropdown würde auf breiten Bildschirmen weit nach rechts
       "wegspringen"). Verankert an .kopf-logo-gruppe (position:relative,
       s. o.), nicht an einem einzelnen Knopf - die sind schmaler als das
       Panel. Runde 82: bewusst weiterhin an der ganzen Gruppe statt am
       jeweils öffnenden Element (Logo-Link ODER #kopf-seitenname, siehe
       js/verlauf.js/aktualisiereKopfTitel() in ticket.js, wer von beiden
       das Menü öffnen darf wechselt je Seite/Ansicht/Rolle) - beide
       Elemente sitzen an derselben linken Kante dieser Gruppe, die
       Verankerung bleibt also für beide Fälle richtig, ohne dass das CSS
       wissen müsste, welches der beiden gerade "zuständig" ist. */
    .kopf-verlauf-panel-bg { background: transparent; }
    .kopf-verlauf-panel {
        position: absolute;
        inset: auto auto auto 0;
        top: calc(100% + 0.5rem);
        bottom: auto;
        right: auto;
        width: 19rem;
        max-width: calc(100vw - 2.3rem);
        max-height: 24rem;
        border-radius: var(--radius);
        box-shadow: 0 0.75rem 2rem rgba(10, 18, 30, 0.18);
    }
    /* Runde 95: die frühere Desktop-Sonderregel fürs Burger-Menü (".kopf-
       burger-panel-bg"/".kopf-burger-panel" hier in dieser Media Query) ist
       entfallen - das verankerte Dropdown ist seitdem die GRUNDregel für
       das Burger-Menü auf jeder Bildschirmbreite (siehe ausführlichen
       Kopfkommentar bei .kopf-burger-panel-bg weiter oben). */
}

@media (width <= 480px) {
    .kopf { padding: 0.6rem 0.75rem; }
    .kopf-innen { padding: 0.2rem 0.9rem; gap: 0.5rem; }
    .kopf-logo-text { font-size: 1.02rem; }
    .kopf-logo-icon { height: 1.8rem; }
    /* Runde 84: "IT-Support Schriftzug soll eigentlich auch immer da
       bleiben, nur in der Smartphone ansicht soll der Schriftzug gegen den
       Seitennamen ausgetauscht werden", ausdrücklicher Wunsch - auf dem
       Handy weicht der feste Schriftzug (.kopf-logo-text) dem aktuellen
       Seitennamen, SOFERN dieser gerade überhaupt sichtbar ist (auf der
       jeweils eigenen Startseite - FAQ-Ansicht für Lehrkräfte, Dashboard für
       Admins - bleibt #kopf-seitenname weiterhin per hidden-Attribut
       ausgeblendet, siehe aktualisiereKopfTitel() in ticket.js/die
       serverseitig gerenderten Startseiten - dort zeigt der Schriftzug
       also auch auf dem Handy weiterhin "IT-SUPPORT"). :has() prüft genau
       das, rein in CSS, ohne eigene JS-Logik für diesen Austausch. */
    .kopf-logo-gruppe:has(.kopf-seitenname:not([hidden])) .kopf-logo-text {
        display: none;
    }
    /* Runde 82: auf dem Handy ist neben Logo+Seitenname oft auch noch der
       Ansicht-Knopf im Kopf - der Seitenname bekommt hier deutlich weniger
       Platz zugestanden, damit er die anderen Elemente nicht aus dem
       sichtbaren Bereich drängt (lieber früh mit "…" abschneiden als dass
       z. B. der Burger-Knopf ganz verschwindet).
       Runde 88: "Der Titel der Seite in der Menüleiste erscheint in der
       Responsiven Ansicht etwas kleiner" - stimmte: hier stand bis Runde 87
       noch 0.9rem, während .kopf-logo-text auf dem Handy (s. u.) 1.02rem
       nutzt UND der Seitenname genau DESSEN Platz einnimmt, sobald er
       sichtbar ist (siehe :has()-Regel weiter unten) - beide Schriftgrößen
       jetzt angeglichen, genau wie auf dem Desktop (dort schon seit Runde 84
       identisch zu .kopf-logo-text, siehe Kopfkommentar oben).
       Runde 95: "Der Seitenname ist immer noch abgeschnitten", ausdrücklicher
       Wunsch - die eigene, engere Handy-Obergrenze hier (zuletzt 9.5rem)
       war der eigentliche Übeltäter: sie schnitt Seitennamen ab, obwohl
       tatsächlich noch reichlich Platz im Kopf frei war (per Playwright
       nachgemessen: selbst auf einem schmalen 360px-Handy bleiben
       mindestens rund 240px zwischen Logo-Icon und Burger-/Ansicht-Knopf-
       Gruppe frei - mehr, als jeder aktuelle Seitenname inklusive der neuen
       fetteren Schrift mit Laufweite (s. o.) überhaupt braucht). Diese
       eigene Obergrenze ist deshalb ersatzlos entfallen - .kopf-seitenname-
       text erbt jetzt dieselbe 16rem-Obergrenze wie auf dem Desktop (s. o.),
       die auf jedem Smartphone ohnehin nie erreicht wird. Zu einem
       tatsächlichen Überlaufen führt das trotzdem nicht: .kopf-seitenname
       ist (wie schon immer) ein schrumpfbares Flex-Kind mit min-width:0 -
       reicht der Platz im Kopf einmal wirklich nicht, schrumpft der Button
       ganz normal per Flexbox auf das tatsächlich verfügbare Maß, die
       Ellipsis auf .kopf-seitenname-text greift dann genau in diesem Maß,
       nicht erst ab der (hier gar nicht mehr gesetzten) festen Grenze - ein
       hart einprogrammierter Rateweit war für diesen Schutz also nie nötig.
       Runde 96: das eigene Handy-Padding hier ("padding: 0.3rem 0.4rem;")
       ist jetzt ebenfalls ersatzlos entfallen - siehe ausführlichen
       Kopfkommentar bei .kopf-seitenname weiter oben ("Button-Form"
       komplett entfernt, auf JEDER Breite, nicht nur auf dem Desktop). */
    .kopf-seitenname-text { font-size: 1.02rem; }
    /* Runde 92: auf der Geräteverwaltungs-Raum-Detailseite trägt
       .kopf-seitenname-text "Geräteverwaltung <Raumname>" (siehe
       aktualisiereKopfTitel() in js/geraeteverwaltung.js, der Praefix
       "Geräteverwaltung" steckt dafür in einem eigenen inneren Span) - "in
       der Smartphone-Ansicht anstelle von Geräteverwaltung", ausdrücklicher
       Wunsch: auf dem Handy bleibt bei max. 9.5rem Breite sonst ohnehin
       kaum Platz für beides, der Praefix weicht hier deshalb ganz dem
       Raumnamen. Auf jeder anderen Seite/im Übersichtszustand dieser Seite
       existiert dieser Span gar nicht erst (dort bleibt .kopf-seitenname-
       text schlicht "Geräteverwaltung", unverändert). */
    .gv-kopf-seitenname-praefix { display: none; }
    .kopf-ansicht-link { width: 1.9rem; height: 1.9rem; }
    .kopf-ansicht-link svg { width: 16px; height: 16px; }
    /* Runde 83: Burger-Knopf hier genauso klein wie der Ansicht-Umschalter
       direkt darüber - auf dem Handy können im Kopf gleichzeitig Pfeil,
       Seitenname, Admin-Panel-Link, Ansicht-Umschalter UND der Burger-Knopf
       stehen, da zählt jedes gesparte Pixel. */
    .kopf-burger-knopf { width: 1.9rem; height: 1.9rem; }
    .kopf-burger-knopf svg { width: 16px; height: 16px; }
    /* Runde 96: "Responsive soll das Burger Menü anders aufklappen, quasi
       als 'Verlängerung' der Menüleiste, die Einträge alle zentriert",
       ausdrücklicher Wunsch - bisher klappte das Burger-Menü auch auf dem
       Handy als rechts verankerte, schwebende Karte auf (eigene abgerundete
       Ecken, Schatten, 0.5rem Lücke zum Knopf, linksbündige Einträge,
       siehe .kopf-burger-panel oben) - exakt dieselbe Form wie auf dem
       Desktop (siehe ausführlichen Kopfkommentar dort, Runde 95). Hier auf
       dem Handy jetzt stattdessen eine eigene, volle Bildschirmbreite
       nutzende Form, die bündig UNTER der ganzen Menüleiste anschließt, statt
       als separat schwebende Karte darüber zu wirken: kein eigener
       Eck-Radius mehr, keine Lücke zum Kopf (top: 100% statt "calc(100% +
       0.5rem)"), volle Breite (left/right: 0 statt rechtsbündig mit fester
       15rem-Breite).
       Containing Block dafür: .kopf-burger-panel ist (unverändert)
       "position: absolute" - WELCHES Element dabei als Bezugsrahmen für
       "inset" dient, hängt an der NÄCHSTEN positionierten Vorfahren-Box im
       DOM-Baum, nicht an dieser Media Query selbst. Bisher war das
       .kopf-burger-gruppe (position:relative, nur wenige Pixel breit, s.
       oben) - hier auf dem Handy wird DESSEN eigenes "position: relative"
       deshalb gezielt wieder aufgehoben ("position: static"), wodurch der
       Bezugsrahmen eine Ebene weiter nach außen rutscht: zum nächsten
       positionierten Vorfahren im Markup, das ist .kopf-gruppe
       (position:sticky, umschließt den GESAMTEN Kopf inkl. evtl.
       Unterleiste, s. dortiger Kopfkommentar) - dessen Box ist randlos/
       bildschirmbreit (s. Kopfkommentar bei .kopf-innen oben), "left:0;
       right:0" am Panel spannt es dadurch exakt über die volle
       Bildschirmbreite auf, "top:100%" setzt es direkt an deren unteren
       Rand, ganz ohne eigene JS-Breitenberechnung. */
    .kopf-burger-gruppe { position: static; }
    .kopf-burger-panel {
        inset: auto 0 auto 0;
        top: 100%;
        width: auto;
        max-width: none;
        max-height: 70vh;
        border-radius: 0;
        box-shadow: 0 0.5rem 1rem rgba(10, 18, 30, 0.15);
    }
    .kopf-burger-eintrag { text-align: center; }
    .anmelde-kachel { padding: 1.25rem 1.1rem; }
    /* Runde 58: diese Regel hatte den Runde-57-Fix (Kopf-zu-Inhalt-Abstand
       = Kachel-Abstand, siehe .wizard oben) auf schmalen Bildschirmen
       (<=480px, also genau die Handy-Breite, auf der der Screenshot
       entstand) wieder auf den alten, größeren Wert zurückgesetzt - "Der
       Abstand ist oben immer noch größer", zu Recht bemängelt. Nur der
       obere Wert wird jetzt ebenfalls auf 0.6rem gebracht, die kleineren
       horizontalen/unteren Werte für schmale Bildschirme bleiben wie
       gehabt. */
    .wizard { padding: 0.6rem 0.9rem 2.5rem; }
    .faqv-abschnitt { padding: 1rem 0.9rem; }
    /* Runde 88: "die Ränder der Kacheln überall gleich sein [...] links und
       rechts sind die Abstände zur Seite größer, als innen zu den
       Kacheln", zu Recht bemängelt (Screenshot im Dark Mode) - .wizard
       trägt auf dem Handy 0.9rem Seitenabstand (s. o.), die Kachel-Raster
       darunter hatten unverändert nur 0.6rem Abstand ZWISCHEN den Kacheln.
       Runde 88/90 hatten das auf 0.9rem angehoben, um zum (damals
       größeren) Seitenabstand zu passen - Runde 91 hat diesen Zielwert
       wieder auf 0.6rem abgesenkt (siehe ausführlicher Kopfkommentar bei
       .start-oben weiter oben: ".faq-themen hat schon immer 0.6rem genutzt,
       das soll jetzt überall gelten"). Die Basis-Regeln von .dash-stats/
       .start-aktionen/.start-oben weiter oben liefern dieses 0.6rem jetzt
       bereits OHNE Media-Query-Ausnahme (genau wie .faq-themen selbst nie
       eine eigene Handybreite-Ausnahme für den Gitter-Abstand hatte) -
       diese eigens auf 0.9rem angehobene Überschreibung ist damit
       ersatzlos entfallen. */
}

/* =========================================================================
   Runde 63: Zugangsdaten-Anfrage (zugangsdaten.php) + Passwort-Generator
   in dessen Fußzeile
   -------------------------------------------------------------------------
   "Als Lehrkraft kann man hier Name, Vorname, Klasse eines oder mehrerer
   Schüler (oder die ganze Klasse) angeben und dann Zugangsdaten für
   bestimmte Plattformen anfordern. Man soll auch angeben können, ob man
   die Datei als PDF im Fach haben möchte, oder digital per Mail oder
   beides oder ob die Zugangsdaten direkt an den Schüler/die Schülerin
   gehen sollen", ausdrücklicher Wunsch - das Formular selbst nutzt dafür
   die vorhandenen .feld/.btn/.hinweis-Bausteine von oben. "Der Passwort
   Generator soll aber auch hier in die Fußzeile", ebenfalls ausdrücklicher
   Wunsch - siehe .zd-pw-* unten sowie
   js/zugangsdaten.js/zugangsdaten-passwort.php.

   Runde 67: "bei Lehrkräften, die nicht admin sind, soll auch diese
   step-by-step Abfrage kommen, wenn man Zugangsdaten anfordern möchte",
   ausdrücklicher Wunsch - die bisherigen eigenen Klassen .zd-plattformen*/
   .zd-zustellart* (schlichte Kästchen-Liste bzw. einspaltige Kartenliste,
   siehe Git-Historie) sind komplett entfallen: Plattformen und Zustellart
   verwenden jetzt dieselbe .kachel-auswahl-gross/.kachel-btn-Optik wie der
   Melde-Assistent weiter oben in dieser Datei. .kachel-eingabe ist der
   einzige neue Baustein dafür - macht aus einem stinknormalen <label>
   mit eingebettetem <input type="checkbox"/radio"> eine Kachel: der
   native Haken/Punkt bleibt (für Tastatur/Screenreader) vorhanden, aber
   unsichtbar, die Markierung übernimmt :has(input:checked) - exakt
   derselbe Mechanismus wie vorher bei .zd-zustellart-eintrag, jetzt nur
   auf die gemeinsame .kachel-btn-Optik gehoben (siehe deren
   .aktiv-Zustand weiter oben, dieselben Farben). */
.kachel-btn.kachel-eingabe { position: relative; }
.kachel-btn.kachel-eingabe input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.kachel-btn.kachel-eingabe:has(input:checked) {
    border-color: var(--blau);
    background: var(--blau);
    color: #fff;
}
.kachel-btn.kachel-eingabe:has(input:checked) .unterzeile { color: #e6edf5; }
.kachel-btn.kachel-eingabe:has(input:focus-visible) { outline: 2px solid var(--blau); outline-offset: 2px; }

/* Schritt-Bildschirme des Lehrkraft-Anfrageformulars (zugangsdaten.php) -
   js/zugangsdaten.js blendet per [hidden] immer nur den aktuellen Schritt
   ein; ohne JavaScript bleibt das [hidden]-Attribut einfach weg und alle
   vier Schritte stehen (wie bisher) untereinander auf einer Seite.
   Runde 80: "Bei der Lehreransicht ist es beim Anlegen von fehlenden
   Zugangsdaten auch noch falsch, da ist alles in einer Kachel",
   ausdrücklicher Wunsch - jeder Schritt bekommt jetzt (wie bei ticket.php
   und dem Admin-Assistenten) ".schritt-kopf" (Titel+Frage) und
   ".schritt-kachel" (eigentlicher Inhalt) als zwei getrennte Geschwister-
   Kacheln (Markup siehe zugangsdaten.php), ".schritt-screen" selbst ist
   dafür nur noch deren Stapel-Container - genau wie ".schritt--wizard"
   auf ticket.php (siehe deren gemeinsamer Kopfkommentar weiter oben),
   hier aber fest im CSS statt per JS umgeschaltet, weil zugangsdaten.php
   ohnehin immer nur den einen Assistenten zeigt.
   Wichtig: ".schritt-screen[hidden]" MUSS display:none erzwingen - sonst
   gewinnt die eigene "display:flex"-Regel gegen das [hidden]-Attribut
   (Autoren-CSS schlägt das UA-Stylesheet bei gleicher Spezifität immer,
   unabhängig von der Quellreihenfolge) und js/zugangsdaten.js's
   [hidden]-Umschaltung zeigt plötzlich wieder ALLE Schritte gleichzeitig -
   derselbe Stolperstein wie bei ".btn[hidden]" weiter oben (siehe dortiger
   Kommentar), hier erstmals auch bei ".schritt-screen" relevant, weil diese
   Klasse jetzt (anders als vorher) selbst einen "display"-Wert setzt. */
.schritt-screen {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.schritt-screen[hidden] { display: none; }
.schritt-screen h3 { margin: 0 0 0.3rem; font-size: 1.05rem; color: var(--blau-dunkel); }
/* Innerhalb von ".schritt-kopf" übernimmt deren eigener flex-gap den
   Abstand zur Frage (".hinweis") darunter - der obige Außenabstand unter
   der Überschrift wäre hier doppelt gemoppelt. Gleiche Spezifität wie die
   Regel direkt darüber (je ein Klassen- + ein Elementselektor) - gewinnt
   nur, weil sie weiter unten in der Datei steht, exakt derselbe
   Stolperstein wie bei ".schritt-kopf h2"/".schritt-kopf .hinweis" weiter
   oben (siehe dortiger Kommentar). */
.schritt-kopf h3 { margin: 0; }
.schritt-screen + .schritt-screen { margin-top: 1.25rem; }

/* Runde 68: letzter Schritt "Wer genau?" - die von js/zugangsdaten.js
   aufgebaute Zeilen-Tabelle (IServ-Konto mit festem "@hghnet.de"-Zusatz,
   Klasse, bei mehreren gewählten Plattformen je eine Kästchen-Spalte pro
   Plattform - "Wenn mehrere Plattformen angeklickt wurden, sollen hinter
   den Namen Checkboxen sein um angeben zu können, wer was braucht",
   ausdrücklicher Wunsch). Eigene, schlanke Tabellen-Optik statt der
   größeren .matrix/.entry-table-Klassen aus der admin-geschützten
   zugangsdaten/style.css (die lädt diese Seite bewusst nicht mit, siehe
   Kopfkommentar von zugangsdaten.php - zwei getrennte Codebasen). */
.table-wrap { overflow: auto; border: 1px solid var(--blau-rand); border-radius: var(--radius); }
.zd-zeilen-tabelle { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.zd-zeilen-tabelle th, .zd-zeilen-tabelle td { padding: 0.45rem 0.6rem; text-align: left; border-bottom: 1px solid var(--blau-rand); vertical-align: middle; }
.zd-zeilen-tabelle thead th { background: var(--blau-hell); font-size: 0.8rem; white-space: nowrap; }
.zd-zeilen-tabelle tbody tr:last-child td { border-bottom: 0; }
.zd-zeilen-tabelle .zd-plat-spalte { text-align: center; }
.zd-zeilen-tabelle input.mono { font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; }
.zd-zeilen-tabelle td input[type="text"],
.zd-zeilen-tabelle td input:not([type="checkbox"]) {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--blau-rand);
    border-radius: 6px;
    background: var(--flaeche);
    color: var(--text);
    font: inherit;
}
.addon { display: flex; align-items: stretch; min-width: 0; }
.addon input { flex: 1; min-width: 0; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.addon-suffix {
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    background: var(--flaeche-alt);
    border: 1px solid var(--blau-rand);
    border-left: 0;
    border-radius: 0 6px 6px 0;
    color: var(--text-dezent);
    font-size: 0.85em;
    white-space: nowrap;
}
.icon-btn { font: inherit; font-size: 1.3rem; line-height: 1; background: none; border: 0; cursor: pointer; color: var(--text-dezent); padding: 0.1rem 0.4rem; border-radius: 6px; }
.icon-btn:hover { background: var(--blau-hell); color: var(--blau); }
.zd-zeilen-aktionen { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; }
/* js/zugangsdaten.js blendet diesen Block per [hidden] ein/aus (CSV-Import
   zuklappbar) - [hidden] hier ausdrücklich nachgezogen, weil "display: flex"
   unten sonst dieselbe Spezifität wie die UA-Standardregel
   "[hidden] { display: none; }" hätte und als Autor-Regel gewinnen würde
   (siehe .btn[hidden]/.kopf-zurueck-pfeil[hidden] weiter oben - derselbe,
   bereits an anderer Stelle im Projekt dokumentierte Stolperstein). */
.zd-csv-feld[hidden] { display: none; }
.zd-csv-feld { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.6rem; padding: 0.7rem; background: var(--flaeche-alt); border-radius: var(--radius); }
.zd-csv-feld label { font-size: 0.85rem; color: var(--text-dezent); }
.zd-csv-feld textarea { width: 100%; box-sizing: border-box; font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; }

/* --- Passwort-Generator in der Fußzeile ---------------------------------
   Bewusst eine normale, nicht fest angeheftete Fußzeile (anders als die
   feste "gw-bar" in der vom Nutzer mitgebrachten Verwaltung unter
   zugangsdaten/) - passt besser zum schlichten, nicht-SPA-artigen Aufbau
   dieser Seite und zur bestehenden .fuss auf ticket.php. */
.zd-pw-generator {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--blau-rand);
    text-align: left;
}
.zd-pw-generator-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
}
.zd-pw-stil { display: flex; gap: 0.3rem; }
.zd-pw-stil button.on { background: var(--blau); color: #fff; border-color: var(--blau); }
.zd-pw-ausgabe {
    font-size: 1rem;
    font-weight: 700;
    padding: 0.3rem 0.6rem;
    border: 1px dashed var(--blau-rand);
    border-radius: var(--radius);
    background: var(--flaeche);
    color: var(--text);
    cursor: pointer;
    word-break: break-all;
}

/* =========================================================================
   Runde 81: Admin-Dashboard - ursprünglich eine eigene Startseite fürs
   Admin-Panel (dashboard.php) im selben Kachel-Stil wie der Rest dieser
   Datei. Runde 85: der Inhalt ist in die FAQ-Startseite von ticket.php
   aufgegangen (dashStatsHtml()/dashBereicheHtml() in js/ticket.js),
   dashboard.php selbst ist nur noch ein Redirect - die Kachel-Bausteine
   hier (.dash-abschnitt/.dash-stats/.dash-nav) werden seitdem direkt von
   dort aus verwendet, bewusst weiterhin hier in css/ticket.css statt in
   einer eigenen Datei (dieselbe Begründung wie zuvor: teilt sich Kopf/Fuß/
   Kachel-Bausteine 1:1 mit den übrigen Seiten, die diese Datei laden). */

.dash-abschnitt {
    font-size: 0.85rem;
    color: var(--text-dezent);
    margin: 1.5rem 0 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Kennzahlen-Kacheln ("4 offene Störungsmeldungen" usw.) - optisch nach dem
   Vorbild von .stat/.stats in zugangsdaten/style.css (das wiederum schon
   auf .start-aktion hier aufbaut, siehe dortiger Kopfkommentar) - hier als
   eigene dash-Klassen, ursprünglich (Runde 81-83) weil die damalige eigene
   dashboard.php css/ticket.css statt zugangsdaten/style.css lud. Seit
   Runde 85 steht dashStatsHtml() direkt auf der IT-Support-Seite (siehe
   Kopfkommentar dort in ticket.js) - die Zahlen stehen serverseitig
   zunächst als "…" fest und werden von ladeDashKennzahlen() (ticket.js,
   ersetzt das damalige js/dashboard.js) nach dem Laden eingesetzt - kein
   Layout-Sprung, weil die Kachel von Anfang an ihre volle Höhe hat
   (padding/num-Schriftgröße stehen schon fest).
   Runde 90: gap von 0.6rem auf 1.25rem, margin-bottom entfallen (der
   Abstand zum nächsten Block kommt jetzt vom gemeinsamen "gap" des
   umgebenden .start-oben, siehe dortiger Kopfkommentar) - direkter
   Bestandteil davon, weil dashStatsHtml() seit Runde 90 selbst ein Kind von
   .start-oben ist statt eines davor stehenden Geschwister-Elements.
   Runde 91: gap wieder zurück auf 0.6rem, siehe Kopfkommentar bei
   .start-oben.
   Runde 93: "Die Vier Admin Kacheln sollen nun doch so groß sein und auch
   die gleiche Schriftart und Schriftfarbe und Schriftgröße haben, wie die
   vier Kacheln darunter", ausdrücklicher Wunsch ("die vier Kacheln
   darunter" = .start-aktionen, direkt im Anschluss in .start-oben, siehe
   renderFaq() in ticket.js) - .dash-stats übernimmt deshalb jetzt
   Spaltenraster UND Media-Query-Umbruch 1:1 von .start-aktionen (fest 2
   Spalten, ab Tablet/Desktop 4 - vorher ein breitenabhängiges auto-fit-
   Raster, das nie wirklich "gleich groß" mit .start-aktionen war).
   Runde 94: die Basis-Regel (grid-template-columns: repeat(2, 1fr)) stand
   bisher HIER, also im Quelltext NACH der gemeinsamen Media-Query-
   Überschreibung (repeat(4, 1fr), siehe Kopfkommentar bei .start-aktionen
   weiter oben) - bei gleicher Spezifität gewinnt im CSS-Cascade bei
   übereinstimmender Media Query die Regel, die im Quelltext ZULETZT steht:
   die Vier-Spalten-Regel griff deshalb ab Tablet/Desktop nie wirklich, die
   Kacheln blieben zweispaltig und damit sichtbar BREITER als die vier
   gleich großen .start-aktion-Kacheln darunter - "die vier admin kacheln
   sollen auch so breit sein, wie die kacheln darunter", ausdrücklicher
   Wunsch. Die Basis-Regel ist deshalb jetzt direkt neben die von
   .start-aktionen gewandert (siehe dort), damit die spätere
   Media-Query-Regel sie wie vorgesehen überschreiben kann - hier bleibt nur
   noch dieser Verweis stehen. */
/* Runde 93: ".dash-stat" ist jetzt wortwörtlich ".start-aktion" (gleiche
   Höhe/Abstände/Schrift, siehe obiger Kopfkommentar) PLUS "position:
   relative" als Anker für das neue "neu"-Overlay-Label (.dash-stat-neu,
   siehe unten) - die bisherigen eigenen, größeren Maße (padding 1.1rem/0.6rem,
   kein fester Schriftstil) sind komplett entfallen. */
.dash-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.55rem 0.4rem;
    min-height: 2.6rem;
    border: 1px solid var(--blau-rand);
    border-radius: var(--radius);
    background: var(--flaeche);
    color: var(--blau-dunkel);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}
.dash-stat:hover, .dash-stat:focus-visible { border-color: var(--blau); background: var(--blau-hell); }
.dash-stat .icon-rund { width: 1.9rem; height: 1.9rem; }
/* Runde 93: die bisherigen Zahlen-Chips (.dash-stat-zahlen/.dash-stat-zahl/
   .num/.lbl) sind komplett entfallen ("Die Statistikzahlen sollen weg",
   ausdrücklicher Wunsch) - ersetzt durch ein kleines Label als Overlay oben
   rechts auf der Kachel. .dash-stat-titel bleibt als Klassenname bestehen
   (eigenes <span> um den Kachel-Text, falls künftig mal mehr als nur Text
   in die Kachel soll), übernimmt aber keine eigene Formatierung mehr - die
   kommt jetzt vollständig von .dash-stat selbst (s. o.), genau wie bei
   .start-aktion span.
   Runde 96: "statt NEU soll da [...] die Anzahl [...] stehen", ausdrück-
   licher Wunsch - aus dem bisherigen EINEN Label (".dash-stat-neu", fester
   Text "neu") werden jetzt bis zu ZWEI Labels nebeneinander (rot + gelb,
   siehe dashStatBadgesHtml() in ticket.js), jedes mit der tatsächlichen
   Zahl statt eines festen Worts - deshalb auch kein "text-transform:
   uppercase"/"letter-spacing" mehr (das war für das Wort "neu" gedacht,
   bei Ziffern ohne jede Wirkung). .dash-stat-badges ist der gemeinsame
   Positionierungs-Anker (ersetzt die bisherige direkte Positionierung AUF
   dem einzelnen Label), .dash-stat-badge selbst trägt nur noch Farbe/Form -
   beide Kinder-Spans bleiben einzeln per "hidden" ein-/ausblendbar (manche
   Kacheln zeigen z. B. nur das rote Label, wenn das gelbe gerade 0 ist). */
.dash-stat-badges {
    position: absolute;
    top: -0.45rem;
    right: -0.45rem;
    display: flex;
    gap: 0.3rem;
}
/* Helle Fläche + farbiger Text statt voller Farbfläche + weißer Text - das
   ist dasselbe Pillen-Muster wie .geraet-status--rot/--gelb oben, nicht das
   bisherige "volle Fläche" von .dash-stat-neu: --fehler/--kond-c2 werden im
   Dark Mode bewusst HELLER (als Textfarbe auf dunklem Grund gedacht, siehe
   @media (prefers-color-scheme: dark) oben) - als Hintergrund mit weißer
   Schrift wäre der Kontrast dort zu schwach. Die "-hell"-Varianten sind
   genau für diesen Fall gedacht und an dutzenden Stellen im Projekt schon
   bewährt. */
.dash-stat-badge {
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}
.dash-stat-badge--rot { background: var(--fehler-hell); color: var(--fehler); }
.dash-stat-badge--gelb { background: var(--kond-c2-hell); color: var(--kond-c2); }
/* Dieselben Akzentfarben wie anderswo im Projekt für denselben Sachverhalt:
   --fehler/--fehler-hell für "Problem/offen" (siehe .geraet-status--rot),
   --kond-c2/--kond-c2-hell für "eingeschränkt" (siehe .geraet-status--gelb) -
   die Zugangsdaten-Kachel bleibt bewusst beim neutralen Blau-Standard von
   .icon-rund, genau wie die gleichnamige Kachel auf zugangsdaten/index.php
   (dort .stat ohne eigene st-*-Klasse hat dieselbe neutrale Akzentfarbe). */
.dash-stat--stoerung .icon-rund { background: var(--fehler-hell); color: var(--fehler); }
.dash-stat--geraete .icon-rund { background: var(--kond-c2-hell); color: var(--kond-c2); }

/* Navigations-Kacheln zu den wichtigsten Bereichen - exakt dieselbe Klasse
   wie die vier Start-Kacheln auf ticket.php (.start-aktion), nur in einem
   eigenen, flexibleren Raster (.dash-nav statt .start-aktionen): hier
   stehen sechs statt vier Kacheln, und .start-aktionen ist (siehe dortiger
   Kopfkommentar) fest auf genau vier Spalten ab Tablet/Desktop ausgelegt. */
.dash-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.6rem;
}
.dash-nav .start-aktion { min-height: 4.2rem; }