/* ============================================================
   Startseite – Gestaltung

   Farben, Radien, Abstände und Schriften kommen aus dem Modul
   `hornse/ci-css` (vendored unter vendor/ci-css/).

   Die Seite trägt bewusst KEIN data-projekt: Sie gehört keiner
   Anwendung, sie führt zu allen. Die Akzentfarbe steckt in den
   Kacheln — dadurch lernt man nebenbei, welche Farbe zu welcher
   Anwendung gehört.

   REGEL: Kein Farbwert ohne Token. Ausnahme sind die
   Kachel-Flächentöne unten; für sie führt das Modul noch keinen
   projektübergreifenden Token, anders als für den Textton (siehe
   --f-* direkt darunter).

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

:root {
    /* ---- Kachelfarben, Textton --------------------------------
       Referenz auf --ci-farbe-<projekt> aus ci-tokens.css (Modul
       ab v1.7.0) statt einer eigenen Kopie. [data-projekt] kann die
       Startseite nicht benutzen — sie zeigt alle Anwendungen
       gleichzeitig, das Attribut aber gilt nur je Dokument einmal.
       --ci-farbe-<projekt> ist deshalb die EINE Quelle: dieselbe
       Variable, die auch im Projektblock selbst über var() referenziert
       wird. Eine Abweichung wie bei --f-lernzeiten (bis 01.09.2026
       #5b4a1f statt #09474e, zehn Tage unbemerkt) ist damit
       ausgeschlossen. */
    --f-sprechtag:       var(--ci-farbe-sprechtag);
    --f-lernzeiten:      var(--ci-farbe-lernzeiten);
    --f-fachkonferenzen: var(--ci-farbe-fachkonferenzen);
    --f-projektstunden:  var(--ci-farbe-projektstunden);
    --f-schulprozesse:   var(--ci-farbe-schulprozesse);
    --f-signage:         var(--ci-farbe-signage);
    --f-kurse:           var(--ci-farbe-kurse);

    /* ---- Kachelfarben, Fläche ----------------------------------
       Gedämpfte Fläche hinter dem Textton. Bleibt vorerst eine
       eigene Kopie aus --ci-akzent-flaeche der jeweiligen Projekt-
       blöcke — dafür gibt es noch keinen --ci-farbe-…-Token im
       Modul (nur der Textton wurde in v1.7.0 strukturell verbunden).

       --f-lernzeiten-flaeche ist Teil dieser Korrektur: Sie gehörte
       zum falschen Olivton (#5b4a1f) und wäre sonst als cremiger
       Fleck hinter dem jetzt korrekten Petrol-Text stehengeblieben.
       Die übrigen fünf Flächentöne weichen ebenfalls minimal von
       --ci-akzent-flaeche ab (siehe Bericht) — unangetastet, das war
       nicht Teil dieses Auftrags. */
    --f-sprechtag-flaeche:       #e6f1fb;
    --f-lernzeiten-flaeche:      #edf9fa;
    --f-fachkonferenzen-flaeche: #e6f2ec;
    --f-projektstunden-flaeche:  #eef5e4;
    --f-schulprozesse-flaeche:   #eeecfa;
    --f-signage-flaeche:         #fbeee8;
    --f-kurse-flaeche:           #f9edf6;
}

/* ---- Sprungmarke ------------------------------------------- */
.skip-link {
    position: absolute; left: -9999px; z-index: 100;
    background: var(--ci-flaeche); color: var(--ci-text);
    padding: .6rem 1rem; border-radius: var(--ci-radius);
}
.skip-link:focus {
    left: .75rem; top: .75rem;
    outline: 3px solid var(--ci-text); outline-offset: 2px;
}
main:focus, main:focus-visible { outline: none; }

/* ---- Kopf --------------------------------------------------
   Keine Akzentfarbe: Die Startseite gehört keiner Anwendung. */
.kopf {
    background: var(--ci-flaeche);
    border-bottom: 1px solid var(--ci-linie);
    padding: var(--ci-abstand-l) 1.5rem;
}

.kopf-innen {
    display: flex; align-items: center; gap: var(--ci-abstand-m);
    max-width: var(--ci-inhalt-breite); margin: 0 auto;
}

.kopf-logo { height: 3rem; width: auto; object-fit: contain; }
.kopf-logo[hidden] { display: none; }

.kopf h1 {
    margin: 0;
    font-size: var(--ci-groesse-titel);
    line-height: 1.2;
}

.kopf-ort {
    margin: .1rem 0 0;
    color: var(--ci-text-blass);
    font-size: var(--ci-groesse-normal);
}

/* ---- Inhalt ------------------------------------------------ */
main {
    max-width: var(--ci-inhalt-breite);
    margin: 0 auto;
    padding: var(--ci-abstand-xl) 1.5rem var(--ci-abstand-xl);
}

main section + section { margin-top: var(--ci-abstand-xl); }

main h2 {
    margin: 0 0 var(--ci-abstand-s);
    font-size: var(--ci-groesse-gross);
}

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

/* ---- Kacheln -----------------------------------------------
   auto-fill statt auto-fit: Bei zwei Kacheln bleiben sie in ihrer
   natürlichen Breite stehen, statt sich über die ganze Zeile zu
   dehnen. Eine einzelne 1200px breite Kachel sieht aus wie ein
   Fehler. */
.kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: var(--ci-abstand-m);
}

.kachel {
    display: block;
    padding: 1.2rem 1.3rem;
    background: var(--ci-flaeche);
    border: 1px solid var(--ci-linie);
    /* Der Streifen links trägt die Anwendungsfarbe. Kräftiger als
       eine Tönung: Auf einem hellen Bildschirm im Sonnenlicht bleibt
       eine Drei-Prozent-Hintergrundfarbe unsichtbar. */
    border-left: 4px solid var(--kachel-farbe, var(--ci-linie));
    border-radius: var(--ci-radius);
    box-shadow: var(--ci-schatten);
    color: var(--ci-text);
    text-decoration: none;
    transition: box-shadow var(--ci-zeit), transform var(--ci-zeit);
}

.kachel:hover {
    box-shadow: var(--ci-schatten-gross);
    transform: translateY(-2px);
}

.kachel:focus-visible {
    outline: 3px solid var(--kachel-farbe, var(--ci-text));
    outline-offset: 2px;
}

/* Bei „Bewegung reduzieren" bleibt die Kachel stehen. */
@media (prefers-reduced-motion: reduce) {
    .kachel { transition: none; }
    .kachel:hover { transform: none; }
}

.kachel-symbol {
    display: block;
    width: 1.75rem; height: 1.75rem;
    margin-bottom: .6rem;
    color: var(--kachel-farbe, var(--ci-text));
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}

.kachel-name {
    display: block;
    margin-bottom: .3rem;
    font-size: var(--ci-groesse-gross);
    font-weight: 600;
    color: var(--kachel-farbe, var(--ci-text));
}

.kachel-text {
    display: block;
    color: var(--ci-text-blass);
    font-size: var(--ci-groesse-klein);
    line-height: 1.5;
}

/* Je Anwendung ihre Farbe. */
.kachel[data-farbe="sprechtag"]       { --kachel-farbe: var(--f-sprechtag);
                                        background: var(--f-sprechtag-flaeche); }
.kachel[data-farbe="lernzeiten"]      { --kachel-farbe: var(--f-lernzeiten);
                                        background: var(--f-lernzeiten-flaeche); }
.kachel[data-farbe="fachkonferenzen"] { --kachel-farbe: var(--f-fachkonferenzen);
                                        background: var(--f-fachkonferenzen-flaeche); }
.kachel[data-farbe="projektstunden"]  { --kachel-farbe: var(--f-projektstunden);
                                        background: var(--f-projektstunden-flaeche); }
.kachel[data-farbe="schulprozesse"]   { --kachel-farbe: var(--f-schulprozesse);
                                        background: var(--f-schulprozesse-flaeche); }
.kachel[data-farbe="signage"]         { --kachel-farbe: var(--f-signage);
                                        background: var(--f-signage-flaeche); }
.kachel[data-farbe="kurse"]           { --kachel-farbe: var(--f-kurse);
                                        background: var(--f-kurse-flaeche); }

/* ---- Fließtextseiten (Impressum, Kontakt) ------------------ */
.text { max-width: 42rem; }

.text h2 {
    margin: var(--ci-abstand-l) 0 var(--ci-abstand-s);
    font-size: var(--ci-groesse-gross);
}
.text h2:first-child { margin-top: 0; }

.text p {
    margin: 0 0 var(--ci-abstand-m);
    line-height: 1.65;
}

.text a { color: var(--ci-text); }

.kopf-ort a { color: var(--ci-text-blass); }

/* ---- Fuß --------------------------------------------------- */
footer {
    max-width: var(--ci-inhalt-breite);
    margin: 0 auto;
    padding: var(--ci-abstand-l) 1.5rem var(--ci-abstand-xl);
    border-top: 1px solid var(--ci-linie);
    color: var(--ci-text-blass);
    font-size: var(--ci-groesse-klein);
}

footer p { margin: 0 0 .5rem; }
footer a { color: var(--ci-text-blass); }
.fuss-technik { max-width: 46rem; line-height: 1.6; }

/* ---- Schmale Anzeigen -------------------------------------- */
@media (max-width: 48rem) {
    .kopf { padding: var(--ci-abstand-m) 1rem; }
    main  { padding: var(--ci-abstand-l) 1rem var(--ci-abstand-xl); }
    footer { padding: var(--ci-abstand-m) 1rem var(--ci-abstand-l); }
    .kacheln { grid-template-columns: 1fr; }
}