/* AUFTRAG-APP-SHELL-CC.md Paket B (Doc 19 Kap. 3): Kassen-Stil (pos-theme.css
   Token-Kit, "Elevation" Doc 12 Kap. 10.5) auf die Navigation/Chrome der
   App-Shell ausgeweitet - bewusst NUR Sidebar + obere Leiste, NICHT
   .content/.footer (dort liegt @Body, die noch unumgebauten Formular-Seiten -
   "kein Umbau der Formular-Seiten, nur Shell").

   AUFTRAG-CI-ROLLOUT-CC.md Paket C (Doc 20 Kap. 4): die Backoffice-Chrome
   bekommt eine FESTE Farbe (Aubergine-Nav, Sand-Inhaltsflaeche) statt der
   Hell/Dunkel-Kassenpalette. Die eigentliche Kasse (PosVisitDetail/PosKitchen)
   hat ihren eigenen, weiterhin vollstaendig funktionsfaehigen Toggle (eigener
   Storage-Key, eigenes .pos-shell-Scoping) - unangetastet.

   AUFTRAG-DRUCKWEG-2-NAVIGATION-CC.md Paket 1 (09.08.2026): RAIL + PANEL.
   Aus der einspaltigen Linkliste sind zwei Spalten geworden - schmale Rail mit
   den vier Orten der Arbeit, daneben das Panel mit den Punkten der gewaehlten
   Gruppe. Die frueheren Regeln fuer .nav-scroll/.nav-group/.nav-item sind
   entfallen: Diese Elemente gibt es nicht mehr. */

.sidebar.pos-shell {
    /* Zwei Spalten nebeneinander (Rail | Panel) statt einer Spalte. Die Breite
       kommt aus dem Inhalt, weil das Panel zuklappbar ist - site.css setzt
       .sidebar auf feste 250px, und diese Regel (zwei Klassen) gewinnt
       unabhaengig von der Einbindungsreihenfolge. */
    display: flex;
    flex-direction: row;
    width: auto;
    background: var(--tim-aubergine);
    border-right: 1px solid var(--tim-aubergine-tief);
    font-family: var(--tim-font);
}

.nav-shell {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* ---------------------------------------------------------------- Die Rail

   Sie steht IMMER an derselben Stelle. Das ist der ganze Unterschied zum
   abgelehnten Akkordeon: Wer die Gruppe wechselt, findet die Icons dort
   wieder, wo er sie gerade losgelassen hat. */

.nav-rail {
    flex: 0 0 76px;
    width: 76px;
    display: flex;
    flex-direction: column;
    background: var(--tim-aubergine-tief);
    padding: 8px 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.nav-rail-item {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    border-left: 3px solid transparent;
    color: rgba(247, 241, 234, 0.72);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
    font-size: 10px;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.nav-rail-item .fa {
    font-size: 18px;
}

.nav-rail-label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.nav-rail-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--tim-sand);
    text-decoration: none;
}

/* Die GEZEIGTE Gruppe: gefuellt wie das Panel daneben - die beiden gehoeren
   sichtbar zusammen. */
.nav-rail-item.nav-rail-open {
    background: var(--tim-aubergine);
    color: var(--tim-sand);
}

/* Die Gruppe, in der die aktuelle SEITE liegt: Tomate-Kante (Doc 20 Kap. 4 -
   Tomate als Akzent fuer aktive Zustaende). Beides kann auseinanderfallen:
   Wer blaettert, hat noch nicht navigiert. */
.nav-rail-item.nav-rail-active,
.nav-rail-home.active {
    border-left-color: var(--tim-tomate);
    color: var(--tim-sand);
}

.nav-rail-toggle {
    margin-top: auto;
    opacity: 0.65;
}

/* ---------------------------------------------------------------- Das Panel */

.nav-panel {
    flex: 0 0 212px;
    width: 212px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--tim-aubergine);
}

.nav-shell-collapsed .nav-panel {
    display: none;
}

.nav-panel-brand {
    padding: 14px 16px 6px;
}

.nav-panel-head {
    padding: 4px 16px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(247, 241, 234, 0.5);
}

/* Nur diese Spalte scrollt, und nur bei Bedarf (Lehre aus
   AUFTRAG-MENUE-SCROLLEN-CC.md: min-height:0 gegen die Flex-Falle "Inhalt darf
   nicht schrumpfen" - sonst laeuft die Liste unten aus der fixen Box, ohne
   Scrollleiste und damit unerreichbar). */
.nav-panel-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
}

.nav-panel-section {
    padding: 12px 16px 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(247, 241, 234, 0.4);
}

/* Der Trennstrich vor einem Punkt ohne Abschnitt (Routing). Ohne ihn liest
   man ihn als letzten Punkt des Abschnitts darueber. */
.nav-panel-break {
    height: 1px;
    margin: 10px 16px 6px;
    background: rgba(255, 255, 255, 0.14);
}

.nav-panel-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    font-size: 0.875rem;
    line-height: 1.25;
    color: rgba(247, 241, 234, 0.8);
    text-decoration: none;
    border-left: 3px solid transparent;
}

.nav-panel-item .fa {
    width: 1.1rem;
    text-align: center;
    opacity: 0.8;
}

.nav-panel-item:hover {
    background: var(--tim-aubergine-tief);
    color: var(--tim-sand);
    text-decoration: none;
}

.nav-panel-item.active {
    background: var(--tim-aubergine-tief);
    color: var(--tim-sand);
    border-left-color: var(--tim-tomate);
}

/* ----------------------------------------------- Der Assistent, fester Platz

   AUFTRAG-ASSISTENT-AUSBAU-CC.md Paket 2. Bis dahin war er ein Blatt ueber der
   Reservierungs-Timeline (position: fixed, unten rechts) und hing damit an
   EINER Seite. Jetzt sitzt der GRIFF unten in der Seitenleiste - dort, wo er
   auf jeder Backoffice-Seite an derselben Stelle steht.

   Der KOERPER ist fixiert und nicht im Fluss, und das ist Absicht: Das
   Nav-Panel ist 212 Pixel breit, ein Gespraech darin waere eine Spalte aus
   Einzelwoertern. Er klappt deshalb nach rechts neben die Rail auf. Weil er
   ein Kind des Panels bleibt, verschwindet er mit ihm, wenn jemand das Panel
   einklappt - dasselbe Zuklappen, eine Geste. */

.assistent-dock {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.assistent-griff {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    border: 0;
    border-left: 3px solid transparent;
    background: transparent;
    color: rgba(247, 241, 234, 0.8);
    font-family: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

.assistent-griff:hover {
    background: var(--tim-aubergine-tief);
    color: var(--tim-sand);
}

.assistent-dock--offen .assistent-griff {
    background: var(--tim-aubergine-tief);
    color: var(--tim-sand);
    border-left-color: var(--tim-tomate);
}

.assistent-griff-text {
    flex: 1 1 auto;
    text-align: left;
}

.assistent-griff-pfeil {
    opacity: 0.6;
}

.assistent-korpus {
    /* Bezugsrahmen fuer das Ziehfeld (Paket 4), das sich darueberlegt. */
    position: fixed;
    left: 76px; /* genau die Breite der Rail */
    bottom: 0;
    z-index: 1030;
    display: flex;
    flex-direction: column;
    width: min(380px, calc(100vw - 76px));
    max-height: min(560px, 72vh);
    background: var(--tim-sand, #F7F1EA);
    color: #2A2024;
    border: 1px solid var(--tim-aubergine-tief);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.28);
    overflow: hidden;
    font-size: 0.875rem;
}

.assistent-kopf {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 14px;
    background: var(--tim-aubergine);
    color: var(--tim-sand);
    font-weight: 600;
}

.assistent-kopf > span:first-child {
    flex: 1 1 auto;
}

.assistent-kopf-knopf {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    color: rgba(247, 241, 234, 0.8);
    padding: 4px 8px;
    cursor: pointer;
}

.assistent-kopf-knopf:hover {
    color: var(--tim-sand);
}

.assistent-verlauf {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.assistent-leer {
    margin: 0;
    color: #6B5F65;
    font-style: italic;
}

.assistent-zeile {
    margin: 0;
    padding: 8px 10px;
    border-radius: 8px;
    white-space: pre-wrap;
    line-height: 1.35;
    max-width: 92%;
    overflow-wrap: anywhere;
}

.assistent-zeile--nutzer {
    align-self: flex-end;
    background: var(--tim-tomate);
    color: #FFFFFF;
}

.assistent-zeile--assistent {
    align-self: flex-start;
    background: #EDE4DB;
}

.assistent-laeuft {
    color: #6B5F65;
    font-style: italic;
}

/* ---------------------------------------------------------------------------
   AUFTRAG-ASSISTENT-ROBUST-CC.md Paket 1: DIE FORTSCHRITTSZEILEN.

   Sie stehen unter dem laufenden Eintrag und sind bewusst KEINE Sprechblasen:
   Was hier steht, hat der Assistent nicht GESAGT, sondern GETAN. Eine Blase
   dafuer haette den Verlauf mit Halbsaetzen gefuellt, die niemand
   wiederlesen will. Nach dem Lauf verschwinden sie - ausser nach einem
   Abriss, wo sie der einzige Beleg des Geschehenen sind (Regel 11, R3+). */
.assistent-fortschritt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 10px;
    border-left: 2px solid rgba(107, 95, 101, 0.28);
    align-self: stretch;
}

.assistent-fortschritt-zeile {
    margin: 0;
    color: #6B5F65;
    font-size: 0.8125rem;
    line-height: 1.35;
}

/* Die Zeile, die JETZT gilt. Sie ist dunkler als die erledigten darueber -
   derselbe Unterschied, den ein Mensch macht, wenn er auf eine Liste zeigt. */
.assistent-fortschritt-zeile--jetzt {
    color: #2A2024;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Paket 2/3: DER ABRISS. Er sieht aus wie eine Meldung und nicht wie ein
   Fehler - denn in der Haelfte der Faelle ist er gar keiner, sondern die
   Bestaetigung, dass alles durchgelaufen ist. */
.assistent-abriss {
    align-self: stretch;
    padding: 10px 12px;
    border-radius: 8px;
    border-left: 3px solid #6B5F65;
    background: #EDE4DB;
}

.assistent-abriss--executed {
    border-left-color: #3F7D4E;
}

.assistent-abriss--notarrived,
.assistent-abriss--notexecuted,
.assistent-abriss--unclear {
    border-left-color: var(--tim-tomate);
}

.assistent-abriss-kopf {
    margin: 0;
    font-weight: 600;
    line-height: 1.35;
}

.assistent-abriss-text {
    margin: 6px 0 0;
    white-space: pre-wrap;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.assistent-abriss-kennung {
    margin: 6px 0 0;
    font-size: 0.8125rem;
    color: #6B5F65;
}

.assistent-abriss-knopf {
    appearance: none;
    -webkit-appearance: none;
    margin-top: 8px;
    padding: 6px 12px;
    border: 1px solid var(--tim-aubergine-tief);
    border-radius: 6px;
    background: transparent;
    color: var(--tim-aubergine-tief);
    font-family: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}

.assistent-abriss-knopf:hover {
    background: rgba(42, 32, 36, 0.06);
}

/* ---------------------------------------------------------------------------
   Paket 4: der Weg zurueck ans Ende. Er erscheint NUR, wenn der Mensch
   hochgescrollt hat UND unten etwas angekommen ist - ein dauerhafter Knopf
   waere ein Hinweis auf etwas, das es meistens nicht gibt. */
.assistent-nachlauf {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 88px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 0;
    border-radius: 999px;
    background: var(--tim-aubergine);
    color: var(--tim-sand);
    font-family: inherit;
    font-size: 0.8125rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.assistent-nachlauf:hover {
    background: var(--tim-aubergine-tief);
}

/* ---------------------------------------------------------------------------
   Paket 5: DIE AKTIVITAETSANZEIGE am Griff.

   Ein sachtes Pulsieren, kein Gehuepfe: Der Griff steht in der Seitenleiste
   neben allem anderen, und etwas, das dort springt, zieht den Blick vom
   Arbeiten weg. Er ist auch bei ZUGEKLAPPTEM Dock sichtbar - genau dann ist
   er die einzige Stelle, an der ueberhaupt etwas davon zu sehen ist. */
.assistent-griff--laeuft {
    border-left-color: var(--tim-tomate);
    animation: assistent-griff-puls 2.4s ease-in-out infinite;
}

@keyframes assistent-griff-puls {
    0%, 100% {
        background: transparent;
    }
    50% {
        background: rgba(228, 87, 46, 0.22);
    }
}

/* Wer Bewegung abgestellt hat, bekommt keine. Der Zustand bleibt trotzdem
   sichtbar - ueber die Farbe, nicht ueber den Takt. */
@media (prefers-reduced-motion: reduce) {
    .assistent-griff--laeuft {
        animation: none;
        background: rgba(228, 87, 46, 0.22);
    }
}

/* Paket 3: der Lautsprecher an JEDER Antwort. Er steht neben der Blase und
   nicht darin - eine Sprechblase mit einem Knopf darin liest sich wie ein
   Formular. */
.assistent-zeile-block {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    max-width: 100%;
}

.assistent-zeile-block--nutzer {
    justify-content: flex-end;
}

.assistent-zeile-sprecher {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    color: #8A7C82;
    padding: 6px 4px;
    cursor: pointer;
    line-height: 1;
}

.assistent-zeile-sprecher:hover {
    color: var(--tim-tomate);
}

.assistent-kopf-knopf--an {
    color: var(--tim-tomate);
}

/* Das Mikrofon. Aufnahme laeuft = Tomate und ein ruhiger Puls: Ein offenes
   Mikrofon, das man nicht sieht, ist das Einzige an dieser Stelle, das
   wirklich schadet. */
.assistent-mikro {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    padding: 7px 11px;
    border: 1px solid #DCD1C6;
    border-radius: 8px;
    background: #FFFFFF;
    color: #2A2024;
    cursor: pointer;
}

.assistent-mikro:disabled {
    opacity: 0.5;
    cursor: default;
}

.assistent-mikro--an {
    border-color: var(--tim-tomate);
    background: var(--tim-tomate);
    color: #FFFFFF;
    animation: assistent-mikro-puls 1.4s ease-in-out infinite;
}

@keyframes assistent-mikro-puls {
    0%, 100% { box-shadow: 0 0 0 0 rgba(228, 87, 46, 0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(228, 87, 46, 0); }
}

/* Wer eine Bewegungsreduktion eingestellt hat, bekommt keine - die Farbe
   allein sagt es auch. */
@media (prefers-reduced-motion: reduce) {
    .assistent-mikro--an {
        animation: none;
    }
}

/* --------------------------------------------------- Paket 4: die Anhaenge */

.assistent-anhaenge {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid #DCD1C6;
    background: #FBF7F3;
}

.assistent-anhang {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
}

.assistent-anhang-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

/* Der Satz, WAS mit der Datei geschieht - Frist und Anbieter. Er steht unter
   dem Namen und nicht in einer Fussnote: Wer eine Datei irgendwo hinlegt, hat
   ein Recht darauf zu wissen, wie lange sie dort liegt (Regel 11, R3+). */
.assistent-anhang-hinweis {
    grid-column: 1 / -1;
    font-size: 0.72rem;
    color: #6B5F65;
    line-height: 1.3;
}

.assistent-anhang-weg {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    color: #8A7C82;
    padding: 2px 6px;
    cursor: pointer;
}

.assistent-anhang-weg:hover {
    color: #B3261E;
}

.assistent-klammer {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    border: 1px solid #DCD1C6;
    border-radius: 8px;
    background: #FFFFFF;
    color: #2A2024;
    cursor: pointer;
    margin: 0;
}

/* Das Dateifeld selbst ist unsichtbar und liegt genau unter der Klammer -
   nicht display:none, denn ein verstecktes Feld nimmt keine Klicks entgegen. */
.assistent-klammer-feld {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* Das Ziehfeld. Es liegt NUR waehrend eines Ziehens ueber dem Gespraech -
   danach waere die Eingabe darunter nicht mehr zu treffen. */
.assistent-drop {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(247, 241, 234, 0.96);
    border: 2px dashed var(--tim-tomate);
    border-radius: 10px 10px 0 0;
    color: var(--tim-tomate);
    font-weight: 600;
    pointer-events: auto;
}

.assistent-drop .fa {
    font-size: 28px;
}

.assistent-drop-feld {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: copy;
}

.assistent-fehler {
    margin: 0;
    color: #B3261E;
}

/* AUFTRAG-ASSISTENT-RUNDEN-STAFFEL-CC.md Paket 7: der Weg zurueck. Er ist
   ausdruecklich LEISER als der Sprung daneben - die naechste Handlung steht
   im Vordergrund, die Ruecknahme ist die Ausnahme (Regel 11 R1: zu jedem
   Zeitpunkt EINE offensichtliche naechste Handlung). */
.assistent-zurueck {
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.assistent-zurueck-knopf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid #DCD1C6;
    border-radius: 8px;
    background: #FFFFFF;
    color: #6B5D52;
    font-family: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}

.assistent-zurueck-knopf:hover:not(:disabled) {
    border-color: var(--tim-tomate);
    color: var(--tim-tomate);
}

.assistent-zurueck-knopf:disabled {
    opacity: 0.5;
    cursor: default;
}

.assistent-zurueck-hinweis {
    flex: 1 1 120px;
    min-width: 0;
    color: #6B5D52;
    font-size: 0.75rem;
}

/* Regel 11: Jede Meldung fuehrt weiter. Der Sprung ist ein KNOPF und kein
   Satz - deshalb sieht er auch aus wie einer und steht fuer sich. */
.assistent-sprung {
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid var(--tim-tomate);
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--tim-tomate);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.assistent-sprung:hover {
    background: var(--tim-tomate);
    color: #FFFFFF;
}

.assistent-eingabe {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid #DCD1C6;
    background: #FFFFFF;
}

.assistent-eingabe input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid #DCD1C6;
    border-radius: 8px;
    background: #FFFFFF;
    color: #2A2024;
    font-family: inherit;
}

.assistent-eingabe button {
    padding: 7px 14px;
    border: 1px solid var(--tim-tomate);
    border-radius: 8px;
    background: var(--tim-tomate);
    color: #FFFFFF;
    font-family: inherit;
    cursor: pointer;
}

.assistent-eingabe button:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Die Vorschau hebt sich absichtlich deutlich vom Gespraech ab: Was hier
   steht, ist NOCH NICHT geschehen, und diese Unterscheidung darf nicht an
   einer Nuance haengen. */
.assistent-vorschau {
    align-self: stretch;
    margin: 4px 0;
    padding: 10px 12px;
    border: 1px solid var(--tim-tomate);
    border-radius: 8px;
    background: #FFFFFF;
}

.assistent-vorschau-kopf {
    margin: 0 0 8px;
    font-weight: 600;
}

.assistent-vorschau-titel {
    margin: 0 0 8px;
    font-style: italic;
}

.assistent-vorschau-felder {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 12px;
    margin: 0 0 10px;
}

.assistent-vorschau-felder dt {
    color: #6B5F65;
}

.assistent-vorschau-felder dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Die Kennung (und der technische Feldname) treten zurueck - klein und
   gedaempft daneben, fuer den Zweifelsfall. Sie verschwinden nicht: Wer wissen
   will, worauf genau er zeichnet, findet es hier (Regel 11, R3+). */
.assistent-vorschau-technisch {
    display: block;
    font-size: 0.72rem;
    color: #8A7C82;
    overflow-wrap: anywhere;
}

.assistent-vorschau-knoepfe {
    display: flex;
    gap: 8px;
}

.assistent-vorschau-knoepfe button {
    padding: 7px 12px;
    border-radius: 8px;
    font-family: inherit;
    cursor: pointer;
}

.assistent-zeichnen {
    border: 1px solid var(--tim-tomate);
    background: var(--tim-tomate);
    color: #FFFFFF;
}

.assistent-ablehnen {
    border: 1px solid #DCD1C6;
    background: #FFFFFF;
    color: #2A2024;
}

/* AUFTRAG-ERLOESEINHEIT-CC.md Paket E.4: die Build-Kennung unten. Sie muss
   lesbar sein, aber nichts wegnehmen - deshalb gedaempft, klein und monospace
   (ein Hash liest sich nur als Hash). */
.sidebar.pos-shell .build-stamp {
    padding: 0.5rem 1rem 0.75rem;
    font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------------------------------------------- Handy: dasselbe Modell

   Die Rail wird zur unteren Leiste, das Panel oeffnet als Blatt darueber -
   kein zweites Navigationsmodell, nur eine andere Kante. Die Kasse (PosLayout)
   haengt nicht unter MainLayout und behaelt ihre eigene Bodenleiste; dort
   erscheint diese Rail ausdruecklich nicht zusaetzlich. */

@media (max-width: 767.98px) {
    .sidebar.pos-shell {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        height: auto;
        width: auto;
        z-index: 1035;
        flex-direction: column;
        border-right: 0;
    }

    .nav-shell {
        flex-direction: column-reverse;
        height: auto;
    }

    .nav-rail {
        flex: 0 0 auto;
        width: 100%;
        flex-direction: row;
        justify-content: space-around;
        overflow: visible;
        padding: 2px 0 0;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .nav-rail-item {
        flex: 1 1 0;
        min-width: 0;
        border-left: 0;
        border-top: 3px solid transparent;
    }

    .nav-rail-item.nav-rail-active,
    .nav-rail-home.active {
        border-left-color: transparent;
        border-top-color: var(--tim-tomate);
    }

    /* Auf 360 Pixeln gibt es keine Flaeche zu gewinnen - das Blatt ist ohnehin
       nur so lange offen, wie man es braucht. */
    .nav-rail-toggle {
        display: none;
    }

    .nav-panel {
        display: none;
        width: 100%;
        flex: 0 0 auto;
        max-height: 60vh;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
    }

    /* Zwei Klassen schlagen die eine der Desktop-Regel darueber: Ein
       eingeklapptes Panel darf das Blatt nicht verschlucken. */
    .nav-shell-sheet .nav-panel,
    .nav-shell-sheet.nav-shell-collapsed .nav-panel {
        display: flex;
    }

    .nav-panel-brand {
        display: none;
    }

    /* Platz fuer die Bodenleiste - sie liegt fest ueber dem Inhalt. */
    .main {
        padding-bottom: 76px;
    }

    /* Der Schluessel und das Konto-Menue stehen auf dem Handy in der OBEREN
       Leiste. site.css blendet .main .top-row dort aus (Stand von vor der
       Rail); ohne diese Gegenregel waere der Scope-Wechsel auf dem Handy nicht
       mehr erreichbar, seit die Navigation keine eigene Kopfzeile mehr hat. */
    .main .top-row.pos-shell {
        display: flex;
    }

    /* Auf 360 Pixeln gibt es kein „daneben" - der Assistent nimmt die ganze
       Breite ueber der Bodenleiste. Dieselbe Kante wie das Navigationsblatt. */
    .assistent-korpus {
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        max-height: 78vh;
        border-radius: 0;
    }
}

/* ---------------------------------------------------- Die obere Leiste (main) */

.top-row.pos-shell {
    background: var(--tim-aubergine);
    border-bottom: 1px solid var(--tim-aubergine-tief);
}

/* Bugfix 23.07.2026: ci-bridge.css setzt Links global auf Aubergine-Text (fuer
   helle Flaechen gedacht) - in der jetzt selbst Aubergine-farbenen Kopfzeile
   (LoginLinks: Register/Login bei abgemeldetem Zustand) war das dunkler Text
   auf dunklem Grund, also unsichtbar. */
.top-row.pos-shell a,
.top-row.pos-shell .btn-link {
    color: rgba(247, 241, 234, 0.85);
}

.top-row.pos-shell a:hover,
.top-row.pos-shell .btn-link:hover {
    color: var(--tim-sand);
}

/* AUFTRAG-SCHLUESSEL-SCOPING-CC.md Paket D Punkt 13: die obige Sand-Regel
   (fuer Links AUF der Aubergine-Kopfzeile gedacht) wirkte auch in die
   weissen Bootstrap-.dropdown-menu hinein (Schluessel- und Zahnrad-Menue)
   - Sand-auf-Weiss war praktisch unsichtbar. Gegenregel mit hoeherer
   Spezifitaet, CI-Token (Aubergine) statt Ad-hoc-Hex. */
.top-row.pos-shell .dropdown-menu a,
.top-row.pos-shell .dropdown-menu .dropdown-item-text {
    color: var(--tim-aubergine);
}

.top-row.pos-shell .dropdown-menu a:hover {
    color: var(--tim-aubergine-tief);
}

.top-row.pos-shell .dropdown-menu .dropdown-item-text.text-muted {
    color: rgba(59, 44, 53, 0.55) !important;
}

/* Inhaltsflaeche: Sand als Grundton (Doc 20 Kap. 4) - einzelne Formular-/
   Listing-Seiten legen ihre Karten/Formulare (weiss) selbst darauf. */
.content {
    background: var(--tim-sand);
    min-height: calc(100vh - 3.5rem);
}