/* VENDORED aus hornse/ci-css v1.9.0 – dort ändern, hierher kopieren! */
/* ============================================================
   ci-shell.css – Gerüst der FRG-Projektreihe
   Stufe 3 von 3. Setzt ci-tokens.css voraus, ergänzt ci-komponenten.css.

   ZWEI VARIANTEN, je nach Zahl der Navigationspunkte:

     .ci-huelle--leiste   Seitenleiste links (Standard)
     .ci-huelle--kopf     Kopfleiste oben

   Warum zwei: Eine Bestandsaufnahme der fünf Anwendungen zeigte, dass
   die Aufteilung nicht zufällig ist. sprechtag hat über zehn
   Navigationspunkte, projektstunden acht – dort brächen Reiter in
   horizontales Scrollen um, und das findet auf einem Tablet niemand.
   fachkonferenzen und schulprozesse haben je fünf; eine Seitenleiste
   verschenkte dort ein Sechstel der Bildschirmbreite an vier Wörter.

   Faustregel: bis sechs Punkte Kopfleiste, darüber Seitenleiste.

   Beide Varianten teilen Tokens, Symbole, den aktiven Zustand und die
   Schublade unter 768 px. Unterschiedlich ist nur die Anordnung.

   Die Seitenleiste kennt drei Zustände:

     voll     ab 1024 px – Leiste mit Text
     symbole  eingeklappt, nur Symbole (Beschriftung als Tooltip)
     offen    unter 768 px – Schublade über dem Inhalt

   BREITE DER BAHNEN. Inhalt und Kopfleiste laufen normalerweise auf
   --ci-inhalt-breite. Wer davon abweicht, nimmt eine dieser Klassen —
   geraten wird kein Name, hier steht, welche es gibt:

     .ci-huelle--breit            an der HÜLLE. Stellt Inhalt UND
                                  Kopfleiste zugleich breit. Der
                                  Regelfall für eine breite Ansicht:
                                  Wochenplan, Reihenfolge-Editor,
                                  Tabelle über viele Spalten.
     .ci-inhalt-innen--breit      nur der Inhalt, Kopfleiste bleibt
                                  schmal. Für den selteneren Fall,
                                  dass genau das gewollt ist.
     .ci-inhalt-innen--formular   38rem. Seiten, die aus genau EINEM
                                  Formular bestehen: Anmeldung,
                                  Passwortwechsel, Bestätigung.
     .ci-inhalt-innen--lesen      60rem. Reine Textseiten: Hilfe,
                                  Impressum, Datenschutz.

   REGEL wie überall: kein Farbwert, nur Tokens.

   Copyright (C) 2026 Sebastian Horn, Friedrich-Rückert-Gymnasium
   SPDX-License-Identifier: GPL-3.0-or-later
   ============================================================ */

/* ---- Hülle ------------------------------------------------- */

.ci-huelle {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;   /* auf Mobilgeräten ohne Adressleistensprung */
}

/* Ohne Variantenklasse gilt die Seitenleiste – so bleiben bestehende
   Einbindungen unverändert gültig. */
.ci-huelle--kopf {
    display: block;
}

/* ---- Seitenleiste ------------------------------------------ */

.ci-leiste {
    display: flex;
    flex-direction: column;
    flex: 0 0 15rem;
    width: 15rem;
    background: var(--ci-flaeche);
    border-right: 1px solid var(--ci-linie);
    transition: flex-basis var(--ci-zeit), width var(--ci-zeit);
}

/* ---- Schild: Logo, Name, Schule ---------------------------- */

.ci-schild {
    display: flex;
    align-items: center;
    gap: var(--ci-abstand-s);
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--ci-linie);
    min-height: 4.4rem;
}

.ci-schild-logo {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    border-radius: var(--ci-radius);
}

/* Ohne diese Zeile bleibt ein Logo mit hidden-Attribut sichtbar: In
   einem Flex-Behaelter setzt der Browser display auf block, und das
   ueberschreibt die Vorgabe von hidden. Ergebnis waere Platzhalter
   UND Logo nebeneinander. Gilt fuer beide gleichermassen. */
.ci-schild-logo[hidden],
.ci-schild-platzhalter[hidden] { display: none; }

/* Platzhalter, solange kein Logo hinterlegt ist. */
.ci-schild-platzhalter {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: var(--ci-radius);
    background: var(--ci-akzent);
    color: var(--ci-flaeche);
    font-weight: 600;
}

.ci-schild-text { min-width: 0; }

.ci-schild-name {
    display: block;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ci-schild-schule {
    display: block;
    margin-top: .15rem;
    color: var(--ci-text-blass);
    font-size: .78rem;
    line-height: 1.3;
}

/* ---- Navigation -------------------------------------------- */

.ci-nav {
    flex: 1;
    padding: var(--ci-abstand-s);
    overflow-y: auto;
}

.ci-nav a,
.ci-nav button {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .5rem .6rem;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 0 var(--ci-radius) var(--ci-radius) 0;
    background: none;
    color: var(--ci-text-blass);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.ci-nav a:hover,
.ci-nav button:hover { background: var(--ci-flaeche-2); color: var(--ci-text); }

.ci-nav [aria-current="page"],
.ci-nav [aria-selected="true"] {
    background: var(--ci-akzent-flaeche);
    border-left-color: var(--ci-akzent);
    color: var(--ci-akzent-text);
    font-weight: 600;
}

.ci-nav-trenner {
    height: 1px;
    margin: var(--ci-abstand-s) .6rem;
    background: var(--ci-linie);
}

.ci-nav .ci-abmelden { color: var(--ci-fehler); }
.ci-nav .ci-abmelden:hover { background: var(--ci-fehler-flaeche); color: var(--ci-fehler-text); }

/* ---- Symbole ----------------------------------------------- */

.ci-symbol {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
}

.ci-nav-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Fuß der Leiste ---------------------------------------- */

.ci-leiste-fuss {
    padding: .75rem 1rem;
    border-top: 1px solid var(--ci-linie);
    color: var(--ci-text-blass);
    font-size: .75rem;
    line-height: 1.5;
}

/* ---- Inhaltsfläche ----------------------------------------- */

.ci-inhalt {
    flex: 1;
    min-width: 0;
    padding: var(--ci-abstand-l) 1.5rem var(--ci-abstand-xl);
}

.ci-inhalt-innen {
    max-width: var(--ci-inhalt-breite);
    margin: 0 auto;
}

/* Für Ansichten, die wirklich die ganze Fläche brauchen: breite
   Tabellen, Reihenfolge-Editoren. Die Eingabefelder bleiben trotzdem
   begrenzt (siehe --ci-feld-breite) - die Grenze sitzt am
   Bedienelement, nicht am Container. */
.ci-inhalt-innen--breit { max-width: none; }

/* Seiten, die aus genau EINEM Formular bestehen: Anmeldung,
   Passwortwechsel, Bestätigungsdialog. Ohne diese Variante steht dort
   eine Karte über die volle Inhaltsbreite um ein Formular, das
   --ci-feld-breite nie überschreitet. */
.ci-inhalt-innen--formular { max-width: var(--ci-formular-breite); }

/* Reine Textseiten: Hilfe, Impressum, Datenschutz. 76rem sind für
   einen Absatz zu weit - das Auge verliert beim Zeilenwechsel den
   Anschluss. Der Wert stand als Begründung schon an
   --ci-inhalt-breite, nur nicht als Klasse. */
.ci-inhalt-innen--lesen { max-width: var(--ci-lese-breite); }

/* Schalter zum Ein- und Ausklappen. Auf breiten Anzeigen sitzt er
   unten in der Leiste, auf schmalen als Menüknopf über dem Inhalt. */
.ci-leiste-schalter {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .5rem .6rem;
    border: 0;
    border-radius: var(--ci-radius);
    background: none;
    color: var(--ci-text-blass);
    font: inherit;
    cursor: pointer;
}
.ci-leiste-schalter:hover { background: var(--ci-flaeche-2); color: var(--ci-text); }

.ci-menue-knopf {
    display: none;
    align-items: center;
    gap: .5rem;
    margin-bottom: var(--ci-abstand-m);
    padding: .45rem .7rem;
    border: 1px solid var(--ci-linie);
    border-radius: var(--ci-radius);
    background: var(--ci-flaeche);
    color: var(--ci-text);
    font: inherit;
    cursor: pointer;
}

/* ---- Zustand: eingeklappt ---------------------------------- */

.ci-huelle[data-leiste="symbole"] .ci-leiste { flex-basis: 3.75rem; width: 3.75rem; }

.ci-huelle[data-leiste="symbole"] .ci-schild-text,
.ci-huelle[data-leiste="symbole"] .ci-nav-text,
.ci-huelle[data-leiste="symbole"] .ci-leiste-fuss,
.ci-huelle[data-leiste="symbole"] .ci-leiste-schalter .ci-nav-text { display: none; }

.ci-huelle[data-leiste="symbole"] .ci-schild { justify-content: center; padding: .9rem .5rem; }

.ci-huelle[data-leiste="symbole"] .ci-nav a,
.ci-huelle[data-leiste="symbole"] .ci-nav button,
.ci-huelle[data-leiste="symbole"] .ci-leiste-schalter {
    justify-content: center;
    padding: .55rem 0;
}

/* ---- Schmale Anzeigen: Schublade --------------------------- */

@media (max-width: 48rem) {
    .ci-leiste {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 30;
        width: 16rem;
        flex-basis: 16rem;
        transform: translateX(-100%);
        box-shadow: var(--ci-schatten);
        transition: transform var(--ci-zeit);
    }

    /* Auf schmalen Anzeigen gibt es keinen Symbolstreifen: Ein 60 px
       breiter Streifen frisst dort Platz, ohne etwas zu erklären. */
    .ci-huelle[data-leiste="offen"] .ci-leiste { transform: translateX(0); }
    .ci-huelle[data-leiste="symbole"] .ci-leiste { width: 16rem; flex-basis: 16rem; }
    .ci-huelle[data-leiste="symbole"] .ci-schild-text,
    .ci-huelle[data-leiste="symbole"] .ci-nav-text,
    .ci-huelle[data-leiste="symbole"] .ci-leiste-fuss { display: revert; }
    .ci-huelle[data-leiste="symbole"] .ci-schild { justify-content: flex-start; padding: .9rem 1rem; }
    .ci-huelle[data-leiste="symbole"] .ci-nav a,
    .ci-huelle[data-leiste="symbole"] .ci-nav button { justify-content: flex-start; padding: .5rem .6rem; }

    .ci-menue-knopf { display: inline-flex; }
    .ci-leiste-schalter { display: none; }
    .ci-inhalt { padding: var(--ci-abstand-m) 1rem var(--ci-abstand-xl); }

    .ci-abdeckung {
        position: fixed;
        inset: 0;
        z-index: 20;
        background: var(--ci-text);
        opacity: .35;
        border: 0;
        cursor: pointer;
    }
}

@media (min-width: 48.01rem) {
    .ci-abdeckung { display: none; }
}


/* ============================================================
   Variante: Kopfleiste
   ============================================================ */

.ci-huelle--kopf .ci-leiste {
    display: block;
    flex: none;
    width: auto;
    border-right: 0;
    border-bottom: 1px solid var(--ci-linie);
    /* Die Kopfleiste bleibt beim Scrollen stehen: Bei acht Bildschirmen
       Inhalt sonst kein Weg zurück zur Navigation ohne Hochscrollen. */
    position: sticky;
    top: 0;
    z-index: 15;
}

.ci-huelle--kopf .ci-leiste-innen {
    display: flex;
    align-items: center;
    gap: var(--ci-abstand-l);
    max-width: var(--ci-inhalt-breite);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Breite Ansicht, an EINER Stelle geschaltet.

   Bis hierher gab es .ci-inhalt-innen--breit, aber nichts für die
   Leiste darüber. Jede Anwendung, die den Inhalt breit stellte, trug
   eine Kopfleiste in anderer Breite als ihren Inhalt - die Kante
   zwischen beiden sprang sichtbar.

   Bewusst KEINE zweite Variantenklasse .ci-leiste-innen--breit: Die
   wäre kleiner gewesen, hätte aber zwei Stellen geschaffen, die
   zusammenpassen müssen. Genau daraus ist der Fehler entstanden, den
   sie beheben soll - wer eine setzt und die andere vergisst, hat ihn
   wieder. Hier gibt es nur einen Schalter, und er sitzt an der Hülle:
   Die beiden Bahnen können nicht mehr auseinanderlaufen.

   .ci-inhalt-innen--breit bleibt unverändert. Es ist weiterhin
   richtig für den Fall, dass NUR der Inhalt breit werden soll -
   etwa eine breite Tabelle unter einer normal breiten Kopfleiste. */
.ci-huelle--breit .ci-inhalt-innen,
.ci-huelle--breit .ci-leiste-innen { max-width: none; }

.ci-huelle--kopf .ci-schild {
    border-bottom: 0;
    padding: .7rem 0;
    min-height: 0;
    flex: 0 0 auto;
}

/* Der Schulname steht in der Kopfleiste unter dem Anwendungsnamen und
   drückt die Zeile sonst auseinander. Ab 1200 px ist Platz dafür. */
.ci-huelle--kopf .ci-schild-schule { display: none; }

.ci-huelle--kopf .ci-nav {
    display: flex;
    flex: 0 1 auto;
    gap: .2rem;
    padding: 0;
    /* BEWUSST KEIN overflow-x. Ein Scrollbalken in der Navigation ist
       kein Ventil, sondern ein verstecktes Versagen: Man sieht nicht,
       dass Punkte fehlen, und schiebt monatelang hin und her. Passen
       die Punkte nicht, muss die Umschaltgrenze unten steigen - und
       das faellt sofort auf. */
}

/* Symbole tragen in einer Kopfleiste nichts bei: Der Text steht
   daneben. In der Seitenleiste sind sie unverzichtbar, weil dort der
   eingeklappte Zustand nur sie zeigt - hier kosten sie nur Breite.
   Etwa 30 % davon, und genau die fehlten bei sechs Punkten. */
.ci-huelle--kopf .ci-nav .ci-symbol { display: none; }

.ci-huelle--kopf .ci-nav a,
.ci-huelle--kopf .ci-nav button {
    width: auto;
    white-space: nowrap;
    padding: .5rem .8rem;
    /* Der aktive Punkt wird unten markiert statt links – in einer
       waagerechten Leiste läge ein linker Streifen quer zur Leserichtung. */
    border-left: 0;
    border-bottom: 3px solid transparent;
    border-radius: var(--ci-radius) var(--ci-radius) 0 0;
}

.ci-huelle--kopf .ci-nav [aria-current="page"],
.ci-huelle--kopf .ci-nav [aria-selected="true"] {
    border-left-color: transparent;
    border-bottom-color: var(--ci-akzent);
}

/* Trenner und Fußbereich haben in einer Kopfleiste keinen Platz.
   Was dort stand – Rolle, Lizenz –, gehört in den Fuß der Seite. */
.ci-huelle--kopf .ci-nav-trenner,
.ci-huelle--kopf .ci-leiste-fuss,
.ci-huelle--kopf .ci-leiste-schalter { display: none; }

/* Rechts neben der Navigation: Benutzername, Abmelden. */
.ci-huelle--kopf .ci-kopf-rechts {
    display: flex;
    align-items: center;
    gap: var(--ci-abstand-s);
    margin-left: auto;
    flex: 0 0 auto;
    font-size: var(--ci-groesse-klein);
    color: var(--ci-text-blass);
}

.ci-huelle--kopf .ci-inhalt {
    display: block;
    padding: var(--ci-abstand-l) 1.5rem var(--ci-abstand-xl);
}

@media (min-width: 75rem) {
    .ci-huelle--kopf .ci-schild-schule { display: block; }
}

/* ---- Umschaltgrenze der Kopfleiste -------------------------
   Die Seitenleiste klappt bei 768 px ein; fuer die Kopfleiste ist das
   zu spaet. Sechs Punkte mit Benutzername und Abmelden brauchen rund
   1100 px, darunter draengeln sie sich. Die Grenze richtet sich also
   nach dem Inhalt, nicht nach einer runden Zahl.
   ------------------------------------------------------------ */
@media (max-width: 68.75rem) {
    .ci-huelle--kopf .ci-leiste-innen { flex-wrap: wrap; }

    .ci-huelle--kopf .ci-nav {
        display: none;
        order: 3;
        flex-basis: 100%;
        flex-direction: column;
        padding: var(--ci-abstand-s) 0;
        border-top: 1px solid var(--ci-linie);
    }
    .ci-huelle--kopf[data-leiste="offen"] .ci-nav { display: flex; }

    /* Aufgeklappt untereinander: Dort helfen die Symbole wieder, weil
       die Punkte wie in einer Seitenleiste stehen. */
    .ci-huelle--kopf .ci-nav .ci-symbol { display: inline; }

    .ci-huelle--kopf .ci-nav a,
    .ci-huelle--kopf .ci-nav button {
        width: 100%;
        border-bottom: 0;
        border-left: 3px solid transparent;
        border-radius: 0 var(--ci-radius) var(--ci-radius) 0;
    }
    .ci-huelle--kopf .ci-nav [aria-current="page"] {
        border-left-color: var(--ci-akzent);
        border-bottom-color: transparent;
    }

    .ci-huelle--kopf .ci-menue-knopf {
        display: inline-flex;
        order: 2;
        margin: 0 0 0 auto;
    }
    .ci-huelle--kopf .ci-abdeckung { display: none; }
}

/* ---- Kopfleiste auf sehr schmalen Anzeigen -----------------
   Die Umschaltung selbst steht oben bei 68.75rem. Hier bleibt nur,
   was die gemeinsame 48rem-Regel fuer die Seitenleiste sonst auch auf
   die Kopfleiste anwenden wuerde.
   ------------------------------------------------------------ */
@media (max-width: 48rem) {
    .ci-huelle--kopf .ci-leiste {
        position: sticky;
        transform: none;
        width: auto;
        flex-basis: auto;
        box-shadow: none;
    }
    .ci-huelle--kopf .ci-leiste-innen { padding: 0 1rem; }
}


/* ============================================================
   hidden hat das letzte Wort

   Jede Regel, die `display` setzt, ueberschreibt die Vorgabe des
   hidden-Attributs. Wer `element.hidden = true` schreibt, erwartet
   aber, dass das Element verschwindet — und sucht den Fehler sonst
   im JavaScript statt im CSS.

   Beobachtet in signage: Die Seitenleiste blieb vor der Anmeldung
   sichtbar, samt „Abmelden" und „Einstellungen", weil .ci-leiste
   display:flex setzt. Der Code war richtig.

   Die Regel steht am ENDE der Datei: Gleiche Spezifitaet wie eine
   Klassenregel, aber spaeter — damit gewinnt sie. Ohne !important,
   das ein Projekt nicht mehr uebersteuern koennte.

   NACHGETRAGEN 22.09.2026 (Befund A3): "Gleiche Spezifitaet" genuegte
   nicht. Sie genuegt gegen .ci-leiste, nicht gegen .ci-nav a (0,1,1)
   oder .ci-huelle--kopf .ci-nav .ci-symbol (0,3,0) - elf Regeln dieser
   Datei schlugen die Zeile. Das Attribut wird deshalb dreimal
   geschrieben: derselbe Treffer, Spezifitaet (0,3,0), und als letzte
   Regel gewinnt sie auch den Gleichstand.

   Drei und nicht mehr, weil (0,3,0) der hoechste Wert ist, den eine
   display-Regel dieser Datei erreicht. Ein Projekt kann weiterhin
   uebersteuern - es laedt spaeter. Genau das war der Grund gegen
   !important, und er gilt unveraendert.

   Aufgezaehlt wird hier nichts: tests/pruefe.sh ERMITTELT die
   display-Regeln und rechnet nach, ob diese Zeile sie schlaegt.
   ============================================================ */

[hidden],
[hidden][hidden][hidden] { display: none; }