/* VENDORED aus hornse/ci-css v1.9.0 – dort ändern, hierher kopieren! */
/* ============================================================
   ci-komponenten.css – Bausteine der FRG-Projektreihe
   Stufe 2 von 2. Setzt ci-tokens.css voraus.

   REGEL: In dieser Datei steht kein einziger Farbwert. Jede Farbe
   kommt aus einer Variablen von ci-tokens.css. tests/pruefe.sh
   prüft das automatisch – wer hier ein #rrggbb einträgt, bekommt
   einen roten Test.

   Alle Klassen tragen das Präfix ci-. Das ist kein Selbstzweck:
   Während der Umstellung sind in jedem Projekt beide CSS-Dateien
   gleichzeitig geladen, und ohne Präfix würde .karte aus diesem
   Modul still mit .karte aus dem Projekt kollidieren.

   VARIANTEN, DIE NICHT ZU ERRATEN SIND. Ein geratener Klassenname
   sieht richtig aus und hat einfach keine Regel. Deshalb steht hier,
   was es gibt, bevor jemand einen Namen erfindet:

     .ci-raster          Kartenraster, Spalten ab --ci-raster-min
                         (22rem). Für Karten mit Fließtext.
     .ci-raster--schmal  dasselbe Raster mit --ci-raster-min-schmal
                         (9.5rem). Für Kacheln, die nur ein Wort und
                         eine Zahl tragen — zwei davon passen damit
                         auch auf ein Telefon nebeneinander. Die
                         Spalten füllen die Zeile aus (auto-fit),
                         anders als im Grundraster.
     .ci-knopf           bekommt unter (pointer: coarse) ein
                         Mindestmaß von --ci-beruehrung-min. Ein
                         Projekt braucht dafür keine eigene Zeile.

   Die Breitenvarianten für Inhalt und Kopfleiste stehen im Kopf von
   ci-shell.css.

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

/* ---- Grundlage --------------------------------------------
   Wird über die Klasse ci-seite am <body> aktiviert, damit ein
   Projekt schrittweise umstellen kann, ohne dass sich beim
   Einbinden sofort alles ändert. */

.ci-seite {
    margin: 0;
    background: var(--ci-grund);
    color: var(--ci-text);
    font-family: var(--ci-schrift);
    font-size: var(--ci-groesse-normal);
    line-height: var(--ci-zeilenhoehe);
    -webkit-text-size-adjust: 100%;
}

.ci-seite *,
.ci-seite *::before,
.ci-seite *::after { box-sizing: border-box; }

/* Ein sichtbarer Fokusring auf allem, was bedienbar ist.

   BEWUSST AUFGEZAEHLT statt `.ci-seite :focus-visible`: Der
   Nachfahrenselektor trifft jedes Element, auch reine Sprungziele mit
   tabindex="-1". Chrome loest :focus-visible auch bei programmatisch
   gesetztem Fokus aus - dann lag ein Ring um den halben Bildschirm.
   Gemeldet wurde er als „unschoener Kasten", und er war es auch.

   Wer weitere Elemente fokussierbar macht, ergaenzt sie hier. */
.ci-seite a:focus-visible,
.ci-seite button:focus-visible,
.ci-seite input:focus-visible,
.ci-seite select:focus-visible,
.ci-seite textarea:focus-visible,
.ci-seite summary:focus-visible,
.ci-seite [tabindex="0"]:focus-visible {
    outline: none;
    box-shadow: var(--ci-fokus);
    border-radius: var(--ci-radius);
}

/* Sprungziele bekommen KEINEN Ring: Der Fokus wird dort
   programmatisch gesetzt, niemand ist per Tastatur hingelangt. */
.ci-seite [tabindex="-1"]:focus,
.ci-seite [tabindex="-1"]:focus-visible {
    outline: none;
    box-shadow: none;
}

/* ---- Karten ----------------------------------------------- */

.ci-karte {
    background: var(--ci-flaeche);
    border: 1px solid var(--ci-linie);
    border-radius: var(--ci-radius-gross);
    box-shadow: var(--ci-schatten);
    padding: var(--ci-abstand-m) 1.25rem;
    margin-bottom: var(--ci-abstand-m);
}

.ci-karte > h2,
.ci-karte > h3 {
    margin: 0 0 var(--ci-abstand-s);
    font-size: var(--ci-groesse-gross);
    font-weight: 600;
}

/* Für abgeschaltete Einträge: sichtbar, aber zurückgenommen. */
.ci-karte--still { opacity: .55; }

/* Die Karte, an der gerade gearbeitet wird.
   Ein Editor, der unter einer Liste aufklappt, verliert sonst den
   Bezug: Man sieht ein Formular und weiß nicht mehr, zu welchem
   Eintrag es gehört. Der Streifen links ist kräftiger als eine bloße
   Tönung – auf einem hellen Bildschirm im Sonnenlicht bleibt eine
   3-Prozent-Hintergrundfarbe unsichtbar. */
.ci-karte--gewaehlt {
    border-color: var(--ci-akzent);
    border-left-width: 4px;
    background: var(--ci-akzent-flaeche);
}

/* Klammert einen zugehörigen Block optisch an die gewählte Karte.
   Wird ausdrücklich gesetzt, nicht über den Nachbarn erschlossen:
   `.ci-karte--gewaehlt + .ci-karte` traf im Kartenraster die nächste
   Karte DANEBEN, die mit der Auswahl nichts zu tun hat. Sie bekam
   dann einen Akzentstreifen, ohne ausgewählt zu sein. */
.ci-bezug {
    border-left: 4px solid var(--ci-akzent);
}

/* ---- Überschriften ---------------------------------------- */

.ci-titel {
    margin: 0 0 var(--ci-abstand-xs);
    font-size: var(--ci-groesse-titel);
    font-weight: 600;
    line-height: 1.25;
}

.ci-untertitel {
    margin: 0 0 var(--ci-abstand-m);
    color: var(--ci-text-blass);
    font-size: var(--ci-groesse-klein);
}

/* ---- Knöpfe -----------------------------------------------
   Drei Ausprägungen, mehr braucht es nicht: gefüllt für die
   Hauptaktion, leise für alles Weitere, gefährlich für alles,
   was löscht oder unumkehrbar ist. */

.ci-knopf {
    display: inline-flex;
    align-items: center;
    gap: var(--ci-abstand-xs);
    padding: .55rem 1rem;
    border: 1px solid var(--ci-akzent);
    border-radius: var(--ci-radius);
    background: var(--ci-akzent);
    color: var(--ci-flaeche);
    font: inherit;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--ci-zeit), border-color var(--ci-zeit);
}

.ci-knopf:hover:not([disabled]) {
    background: var(--ci-akzent-hover);
    border-color: var(--ci-akzent-hover);
}

.ci-knopf[disabled],
.ci-knopf[aria-disabled="true"] { opacity: .55; cursor: default; }

.ci-knopf--leise {
    background: var(--ci-flaeche);
    color: var(--ci-akzent);
}
.ci-knopf--leise:hover:not([disabled]) {
    background: var(--ci-akzent-flaeche);
    border-color: var(--ci-akzent);
}

.ci-knopf--gefahr {
    background: var(--ci-flaeche);
    color: var(--ci-fehler);
    border-color: var(--ci-fehler);
}
.ci-knopf--gefahr:hover:not([disabled]) {
    background: var(--ci-fehler-flaeche);
}

.ci-knopf--klein { padding: .35rem .7rem; font-size: var(--ci-groesse-klein); }

/* Mindestmaß für einen Finger.

   .55rem Polsterung auf 1.2 Zeilenhöhe ergeben rund 39px - unter der
   üblichen Schwelle von 44px, und .ci-knopf--klein liegt mit rund 32px
   deutlich darunter. Auf einem Telefon trifft man daneben.

   NUR unter (pointer: coarse), und das ist die eigentliche Entscheidung:
   Ein min-height für alle Knöpfe würde jeden Knopf in jeder Anwendung
   höher machen, auch am Monitor mit Maus, wo 39px nie ein Problem
   waren. Das wäre eine sichtbare Änderung am Bestand, die niemand
   angefragt hat. Die Abfrage fragt nach dem Zeigegerät, nicht nach der
   Bildschirmbreite: Ein schmales Fenster am Monitor ist kein Finger,
   ein Tablet in Landschaft schon. */
@media (pointer: coarse) {
    .ci-knopf { min-height: var(--ci-beruehrung-min); }
}

/* ---- Formulare -------------------------------------------- */

.ci-feld { margin-bottom: var(--ci-abstand-s); }

.ci-feld > label,
.ci-beschriftung {
    display: block;
    margin-bottom: var(--ci-abstand-xs);
    color: var(--ci-text-blass);
    font-size: var(--ci-groesse-klein);
}

.ci-seite input[type="text"],
.ci-seite input[type="url"],
.ci-seite input[type="email"],
.ci-seite input[type="password"],
.ci-seite input[type="number"],
.ci-seite input[type="search"],
.ci-seite input[type="date"],
.ci-seite input[type="time"],
.ci-seite input[type="file"],
.ci-seite select,
.ci-seite textarea {
    width: 100%;
    max-width: var(--ci-feld-breite);
    padding: .55rem .65rem;
    border: 1px solid var(--ci-linie);
    border-radius: var(--ci-radius);
    background: var(--ci-flaeche);
    color: var(--ci-text);
    font: inherit;
}

.ci-seite input:hover:not([disabled]),
.ci-seite select:hover:not([disabled]),
.ci-seite textarea:hover:not([disabled]) { border-color: var(--ci-linie-stark); }

.ci-seite input[disabled],
.ci-seite select[disabled],
.ci-seite textarea[disabled] {
    background: var(--ci-flaeche-2);
    color: var(--ci-text-schwach);
}

.ci-seite ::placeholder { color: var(--ci-text-schwach); opacity: 1; }

/* Hilfstext unter einem Feld. */
.ci-hilfe {
    margin-top: var(--ci-abstand-xs);
    color: var(--ci-text-blass);
    font-size: var(--ci-groesse-klein);
}

/* Nebeneinander, solange Platz ist. */
.ci-zeile {
    display: flex;
    gap: var(--ci-abstand-m);
    align-items: flex-start;
    flex-wrap: wrap;
}
.ci-zeile > .ci-wachsen { flex: 1 1 14rem; min-width: 0; }

/* Für Felder, die wirklich Breite brauchen - lange Adressen etwa. */
.ci-feld--breit input,
.ci-feld--breit select,
.ci-feld--breit textarea { max-width: none; }

/* In einer ci-zeile begrenzt bereits der Flex-Anteil; dort würde die
   zusätzliche Obergrenze nur Lücken erzeugen. */
.ci-zeile input,
.ci-zeile select,
.ci-zeile textarea { max-width: none; }

/* Ankreuzfelder als Pillen – auf einem Tablet deutlich leichter
   zu treffen als ein nacktes Kästchen. */
.ci-kaesten { display: flex; flex-wrap: wrap; gap: var(--ci-abstand-s); }

.ci-kaesten label {
    display: inline-flex;
    align-items: center;
    gap: var(--ci-abstand-xs);
    margin: 0;
    padding: .3rem .75rem;
    border: 1px solid var(--ci-linie);
    border-radius: var(--ci-radius-pille);
    background: var(--ci-flaeche);
    color: var(--ci-text);
    font-size: var(--ci-groesse-klein);
    cursor: pointer;
}
.ci-kaesten label:hover { border-color: var(--ci-linie-stark); }
.ci-kaesten input { margin: 0; accent-color: var(--ci-akzent); }

/* Aufklappbereich für selten gebrauchte Einstellungen. */
.ci-erweitert {
    margin-top: var(--ci-abstand-xs);
    padding-top: var(--ci-abstand-s);
    border-top: 1px dashed var(--ci-linie);
}
.ci-erweitert > summary {
    margin-bottom: var(--ci-abstand-s);
    color: var(--ci-akzent);
    font-size: var(--ci-groesse-klein);
    cursor: pointer;
    list-style-position: inside;
}

/* ---- Raster -----------------------------------------------
   Für Listen aus gleichartigen Karten: Bildschirme, Inhalte,
   Werkstätten. Statt einer langen Spalte fließen sie auf breiten
   Anzeigen in zwei oder drei Spalten - so sind bei sechs Bildschirmen
   alle auf einen Blick zu sehen.

   auto-fill statt auto-fit: Bei wenigen Karten bleiben sie in ihrer
   natürlichen Breite stehen, statt sich über die ganze Zeile zu
   dehnen. Eine einzelne Karte, die 1200px breit ist, sieht aus wie
   ein Fehler. */
.ci-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--ci-raster-min), 1fr));
    gap: var(--ci-abstand-m);
    align-items: start;
    margin-bottom: var(--ci-abstand-m);
}

/* Im Raster regelt der Abstand das Gitter, nicht die Karte. */
.ci-raster > .ci-karte { margin-bottom: 0; }

/* Für Kacheln, die nur ein Wort und eine Zahl tragen - eine Stunde,
   ein Raum, ein Zustand. Dafür sind 22rem zu breit: Auf einem Telefon
   steht dann eine Kachel je Zeile, obwohl zwei nebeneinander passen
   und die Ansicht halb so lang machen.

   auto-fit, nicht auto-fill wie im Grundraster: auto-fill legt auch
   LEERE Spalten an. Zwei Kacheln auf einem breiten Bildschirm blieben
   damit beide schmal, und rechts stand Leerraum. Bei breiten Karten
   ist genau das gewollt - eine einzelne Karte soll sich nicht über
   1200px dehnen. Bei schmalen Kacheln ist es der Fehler: Sie sollen
   die Zeile ausfüllen. Ein Zeichen Unterschied, und im meldenden
   Projekt war es schon einmal dieselbe Ursache.

   Der Grundfall bleibt unberührt - dies ist eine zweite Größe, keine
   andere. Wer Bildschirmkarten mit Fließtext setzt, nimmt weiter
   .ci-raster. */
.ci-raster--schmal {
    grid-template-columns: repeat(auto-fit, minmax(var(--ci-raster-min-schmal), 1fr));
}

/* ---- Marken ----------------------------------------------- */

.ci-marke {
    display: inline-block;
    padding: .1rem .55rem;
    border: 1px solid var(--ci-linie);
    border-radius: var(--ci-radius-pille);
    background: var(--ci-grund);
    color: var(--ci-text-blass);
    font-size: .75rem;
    vertical-align: middle;
}

.ci-marke--akzent {
    border-color: var(--ci-akzent);
    background: var(--ci-akzent-flaeche);
    color: var(--ci-akzent-text);
}
.ci-marke--erfolg {
    border-color: var(--ci-erfolg);
    background: var(--ci-erfolg-flaeche);
    color: var(--ci-erfolg-text);
}
.ci-marke--warnung {
    border-color: var(--ci-warnung);
    background: var(--ci-warnung-flaeche);
    color: var(--ci-warnung-text);
}
.ci-marke--fehler {
    border-color: var(--ci-fehler);
    background: var(--ci-fehler-flaeche);
    color: var(--ci-fehler-text);
}

/* ---- Meldungen -------------------------------------------- */

.ci-hinweis {
    margin-bottom: var(--ci-abstand-m);
    padding: .7rem .9rem;
    border: 1px solid var(--ci-linie);
    border-radius: var(--ci-radius);
    background: var(--ci-flaeche);
    font-size: .92rem;
}

.ci-hinweis--erfolg {
    border-color: var(--ci-erfolg);
    background: var(--ci-erfolg-flaeche);
    color: var(--ci-erfolg-text);
}
.ci-hinweis--warnung {
    border-color: var(--ci-warnung);
    background: var(--ci-warnung-flaeche);
    color: var(--ci-warnung-text);
}
.ci-hinweis--fehler {
    border-color: var(--ci-fehler);
    background: var(--ci-fehler-flaeche);
    color: var(--ci-fehler-text);
}

/* ---- Tabellen --------------------------------------------- */

.ci-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}

.ci-tabelle th,
.ci-tabelle td {
    padding: .55rem .5rem;
    border-bottom: 1px solid var(--ci-linie);
    text-align: left;
    vertical-align: top;
}

.ci-tabelle th {
    color: var(--ci-text-blass);
    font-size: .82rem;
    font-weight: 600;
}

.ci-tabelle .ci-rechts { text-align: right; }
.ci-tabelle tbody tr:last-child td { border-bottom: 0; }

/* ---- Hilfsklassen ----------------------------------------- */

.ci-blass  { color: var(--ci-text-blass); font-size: .87rem; }
.ci-schwach { color: var(--ci-text-schwach); }
.ci-mono   { font-family: var(--ci-schrift-mono); }

/* Leerzustand: eine Einladung, keine Entschuldigung. */
.ci-leer {
    padding: var(--ci-abstand-xl) var(--ci-abstand-m);
    color: var(--ci-text-blass);
    text-align: center;
}

/* Nur für Bildschirmleser sichtbar. */
.ci-nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---- Schmale Anzeigen ------------------------------------- */

@media (max-width: 40rem) {
    .ci-karte { padding: var(--ci-abstand-s); }
    .ci-zeile { gap: var(--ci-abstand-s); }
}


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

   Dieselbe Regel wie am Ende von ci-shell.css - und sie muss HIER
   noch einmal stehen, nicht nur dort. EINBINDUNG.md kennt eine Stufe,
   in der ein Projekt ci-tokens.css und ci-komponenten.css laedt, aber
   ci-shell.css nicht. In dieser Stufe schuetzte die Zeile am Ende der
   anderen Datei nichts.

   Beobachtet am 22.09.2026 (Befund A3): .ci-knopf setzt
   display: inline-flex. Ein <button class="ci-knopf" hidden> blieb
   sichtbar, weil die Vorgabe des Browsers gegen jede Autorenregel
   verliert. Der Code war richtig - wie schon bei .ci-leiste in
   signage und bei .ci-nav a.

   Dreifach geschrieben: .ci-feld > label und .ci-kaesten label
   erreichen (0,1,1) und schlagen ein einfaches [hidden]. Die Form ist
   dieselbe wie in ci-shell.css, damit es nur eine zu lesende Loesung
   gibt. Ohne !important, damit ein Projekt uebersteuern kann.
   ============================================================ */

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