/* ============================================================
   Fachkonferenzen FRG – Gestaltung

   Farben, Radien, Abstände und Schriftgrößen kommen seit v1.4.0 aus
   dem Modul `hornse/ci-css` (vendored unter frontend/vendor/ci-css/).
   Diese Datei definiert keine eigenen Farbwerte mehr, sondern bildet
   die gewachsenen Variablennamen auf die gemeinsamen Tokens ab.

   ZUR LEITIDEE „Kreide auf Tafel": Das Tafelgrün bleibt – es ist die
   Kennfarbe dieser Anwendung und steckt als --ci-akzent im Modul.
   Aufgegeben wurden die Serifenüberschriften und die warme
   Papier-Palette: Eine eigene Schriftfamilie ist der sichtbarste
   Unterschied überhaupt, deutlicher als jede Farbe, und stand der
   Erkennbarkeit der Projektreihe im Weg. Wer sie zurückholen will,
   nimmt ein Token --ci-schrift-titel ins Modul auf, statt sie hier
   allein zu führen.

   REGEL: Kein Farbwert ohne Token. Fehlt hier eine Farbe, gehört sie
   ins Modul – nicht hierher.

   Die Klassennamen sind bewusst UNVERÄNDERT geblieben: app.js setzt
   sie in HTML-Vorlagen an über 130 Stellen.

   SPDX-License-Identifier: GPL-3.0-or-later
   ============================================================ */

:root {
    /* ---- Abbildung auf die gemeinsamen Tokens --------------- */
    --tafel:       var(--ci-akzent);
    --tafel-tief:  var(--ci-akzent-text);
    --kreide:      var(--ci-flaeche);
    --papier:      var(--ci-grund);
    --karte:       var(--ci-flaeche);
    --tinte:       var(--ci-text);
    --tinte-blass: var(--ci-text-blass);
    --linie:       var(--ci-linie);

    /* Das frühere --gold (#B98A2F) erreichte auf Weiß nur 3.12 und auf
       der Hinweisfläche 2.70 – deutlich unter dem geforderten 4.5.
       Ausgerechnet die Farbe, die Hinweise hervorheben soll, war kaum
       lesbar. --ci-warnung erreicht 5.06 bzw. 6.90. */
    --gold:        var(--ci-warnung);

    --warn:        var(--ci-fehler);
    --warn-hell:   var(--ci-fehler-flaeche);
    --ok:          var(--ci-erfolg);

    /* Die Reihe setzt 76rem (1216px); fachkonferenzen hatte vorher
       1100px. Wer es enger möchte, ändert nur diese Zeile – das Modul
       liest den Wert, alle Regeln folgen. */
    /* --ci-inhalt-breite: 69rem; */

    --radius:      var(--ci-radius);
    --schatten:    var(--ci-schatten);

    /* ---- Flächen für die farbigen Kästen -------------------- */
    --ok-flaeche:      var(--ci-erfolg-flaeche);
    --hinweis-flaeche: var(--ci-warnung-flaeche);

    /* ---- Aufhellungen auf dem Tafelgrün ---------------------
       Weiß mit Transparenz, nicht als Farbe der Palette. Sie stehen
       hier, damit sie nicht verstreut im Blech liegen. */
    --auf-tafel-flaeche: rgba(255, 255, 255, .12);
    --auf-tafel-aktiv:   rgba(255, 255, 255, .18);
    --auf-tafel-linie:   rgba(255, 255, 255, .55);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--papier);
    color: var(--tinte);
    font: var(--ci-groesse-normal)/var(--ci-zeilenhoehe) var(--ci-schrift);
}

/* Überschriften seit v1.4.0 in der Systemschrift wie in den übrigen
   Anwendungen der Reihe. Die Serifen waren der sichtbarste Unterschied
   zwischen den fünf Projekten. */
h1, h2, h3, .marke-text { letter-spacing: .01em; }
h1 { font-size: 1.7rem; margin: 0 0 .35rem; }
h2 { font-size: 1.2rem; margin: 1.6rem 0 .6rem; }
h1 + .untertitel { color: var(--tinte-blass); margin: 0 0 1.4rem; }

a { color: var(--tafel); }

/* Die Marke in der Kopfleiste ist ein Link zur Startansicht. Ohne
   diese Zeile werden Anwendungsname und Schulname unterstrichen. */
.ci-schild { text-decoration: none; color: inherit; }
.ci-schild:hover .ci-schild-name { text-decoration: underline; }

/* Sprungmarke: Ohne sie muss sich jede Tastaturbedienung bei jedem
   Seitenwechsel erst durch die Navigation arbeiten. */
.skip-link {
    position: absolute; left: -9999px;
    background: var(--karte); color: var(--tafel);
    padding: .6rem 1rem; border-radius: var(--radius); z-index: 100;
}
.skip-link:focus {
    left: .75rem; top: .75rem;
    outline: 3px solid var(--gold); outline-offset: 2px;
}

/* Der Inhaltsbereich bekommt den Fokus nach einem Ansichtswechsel,
   damit Bildschirmleser dort weiterlesen statt am Seitenanfang. */
/* Der Fokusring am Sprungziel entfaellt seit ci-css v1.5.2 im Modul:
   Dort ist [tabindex="-1"] ausdruecklich ausgenommen. Eine eigene
   Regel hier waere Doppelung - und die erste Fassung griff ohnehin
   daneben, weil sie outline setzte, das Modul aber box-shadow. */

/* --- Inhalt -------------------------------------------------
   Kopfleiste, Navigation und Inhaltsbreite kommen seit v1.5.0 aus
   ci-shell.css (Variante .ci-huelle--kopf). Die früheren Regeln für
   .kopf, .kopf-innen, .marke, .nav und .benutzer sind entfallen –
   rund 40 Zeilen, die das Modul besser abdeckt.

   NICHT entfallen sind Karten, Knöpfe und Felder: app.js erzeugt
   `class="karte"`, das Modul kennt aber `.ci-karte`. Wer die Regeln
   hier löscht, weil „das Modul das abdeckt", steht ohne Karten da –
   genau das ist beim ersten Anlauf dieses Pakets passiert. Die Regeln
   beziehen ihre Werte aus den Tokens, doppeln also nichts.
   ------------------------------------------------------------- */

.karte {
    background: var(--karte); border: 1px solid var(--linie);
    border-radius: var(--radius); box-shadow: var(--schatten);
    padding: 1.1rem 1.3rem; margin-bottom: 1rem;
}

.raster { display: grid; gap: 1rem; }
.raster.zweispaltig { grid-template-columns: 1fr 1fr; }
@media (max-width: 800px) { .raster.zweispaltig { grid-template-columns: 1fr; } }

/* --- Formulare und Knöpfe -----------------------------------
   Ebenfalls nicht entfallen: app.js setzt `sekundaer`, `gefahr` und
   `klein` als Knopfklassen, nicht die ci-Varianten.
   ------------------------------------------------------------- */
label { display: block; font-size: .8rem; color: var(--tinte-blass); margin: .7rem 0 .2rem; }
input, select, textarea {
    width: 100%; padding: .5rem .6rem; font: inherit;
    border: 1px solid var(--linie); border-radius: var(--radius);
    background: var(--kreide); color: var(--tinte);
}
input:focus, select:focus, textarea:focus, button:focus-visible {
    outline: 2px solid var(--gold); outline-offset: 1px;
}
select.klein, input.klein { width: auto; padding: .25rem .4rem; font-size: .85rem; }

button {
    font: inherit; cursor: pointer; padding: .5rem .9rem;
    border: 1px solid var(--tafel); border-radius: var(--radius);
    background: var(--tafel); color: var(--kreide);
}
button:hover { background: var(--tafel-tief); }
button.sekundaer { background: transparent; color: var(--tafel); }
button.sekundaer:hover { background: var(--papier); }
button.gefahr { background: transparent; border-color: var(--warn); color: var(--warn); }
button.klein { padding: .25rem .55rem; font-size: .82rem; }
button:disabled { opacity: .5; cursor: default; }


/* --- Tabellen -----------------------------------------------
   app.js erzeugt Tabellen ohne Klasse; ci-komponenten.css greift nur
   über .ci-tabelle. Der Block bleibt deshalb, übernimmt aber Farben
   und Abstände aus den Tokens.
   ------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinte-blass); font-weight: 600; }
tr:hover td { background: var(--papier); }

/* --- Plan-Raster (Signaturelement) --------------------------- */
.slot-block { margin-bottom: 1rem; border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; background: var(--karte); }
.slot-kopf {
    background: var(--tafel); color: var(--kreide);
    padding: .5rem .9rem; display: flex; gap: .9rem; align-items: baseline; flex-wrap: wrap;
}
.slot-kopf .zeit { font-size: .85rem; opacity: .85; }
.slot-kopf .werkzeuge { margin-left: auto; }
.slot-inhalt { padding: .7rem .9rem; display: flex; gap: .5rem; flex-wrap: wrap; min-height: 2.6rem; }

.chip {
    display: inline-flex; align-items: center; gap: .45rem;
    border: 1px solid var(--linie); border-radius: 999px;
    background: var(--kreide); padding: .28rem .75rem; font-size: .88rem;
}
.chip .raum { color: var(--tinte-blass); font-size: .78rem; }
.chip.konflikt { border-color: var(--warn); background: var(--warn-hell); }
.chip button { border: none; background: none; color: var(--tinte-blass); padding: 0 .1rem; font-size: .95rem; }
.chip button:hover { color: var(--warn); background: none; }

.konflikt-kasten { border-left: 4px solid var(--warn); background: var(--warn-hell); padding: .7rem 1rem; border-radius: var(--radius); margin: .8rem 0; }
.ok-kasten { border-left: 4px solid var(--ok); background: var(--ok-flaeche); padding: .7rem 1rem; border-radius: var(--radius); margin: .8rem 0; }
.hinweis-kasten { border-left: 4px solid var(--gold); background: var(--hinweis-flaeche); padding: .7rem 1rem; border-radius: var(--radius); margin: .8rem 0; }

.status-marke { font-size: .74rem; padding: .15rem .55rem; border-radius: 999px; border: 1px solid var(--linie); color: var(--tinte-blass); }
.status-marke.veroeffentlicht { border-color: var(--ok); color: var(--ok); }

/* --- Login --------------------------------------------------- */
.login-buehne { min-height: 60vh; display: grid; place-items: center; }
.login-karte { width: min(400px, 92vw); }
.login-karte .karte { padding: 1.6rem 1.8rem 1.8rem; }
.login-tabs { display: flex; gap: .3rem; margin-bottom: 1rem; }
.login-tabs button { flex: 1; }
.login-tabs button.inaktiv { background: transparent; color: var(--tinte-blass); border-color: var(--linie); }

/* --- Meldungen ----------------------------------------------- */
.meldung {
    position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
    background: var(--tinte); color: var(--kreide);
    padding: .6rem 1.2rem; border-radius: var(--radius); box-shadow: var(--schatten);
    max-width: 90vw; z-index: 50;
}
.meldung.fehler { background: var(--warn); }

.leer { color: var(--tinte-blass); font-style: italic; }

.tab-leiste { display: flex; gap: .3rem; border-bottom: 1px solid var(--linie); margin-bottom: 1rem; flex-wrap: wrap; }
.tab-leiste button { border: none; background: none; color: var(--tinte-blass); border-bottom: 2px solid transparent; border-radius: 0; }
.tab-leiste button:hover { background: none; color: var(--tinte); }
.tab-leiste button.aktiv { color: var(--tafel); border-bottom-color: var(--tafel); font-weight: 600; }

@media (prefers-reduced-motion: no-preference) {
    .karte, .slot-block { transition: box-shadow .15s ease; }
}

.chip.warn { border-color: var(--gold); background: var(--hinweis-flaeche); }