/* ===========================================================================
   Lehrplan-Ansicht "Kommandozentrale" (Designrichtung B, Entwurf 08/2026)

   Eigenstaendiges Stylesheet - laeuft PARALLEL zu css/lehrplaene.css und
   ersetzt es nicht. Eingebunden wird es ausschliesslich von
   _lehrplan-kommandozentrale.php.

   Aufbau: drei feste Spalten (Bereichsleiste | Kompetenzliste | Werkbank)
   in einer Flaeche mit eigener Hoehe; gescrollt wird INNERHALB der Spalten,
   nicht die Seite. Darunter eine Statusleiste.

   Hell/Dunkel: alle Farben stehen als --kz-*-Variablen in css/kz-basis.css,
   das head-meta.php auf jeder Seite einbindet - samt dem Inline-Skript, das
   data-kz-theme vor dem ersten Pixel setzt.

   Zur Reihenfolge: navigation.php und footer.php geben ihre <style>-Bloecke
   erst spaeter im Body aus. Regeln von dort gewinnen bei gleicher
   Spezifitaet. Deshalb tragen alle Regeln, die deren Optik anfassen, den
   Praefix :root[data-kz-theme="dunkel"] - damit liegen sie hoeher und
   gewinnen unabhaengig von der Reihenfolge.
   =========================================================================== */

/* --- Farbmarken ---------------------------------------------------------- */

/* Stehen seit 09/2026 in css/kz-basis.css (seitenweit, via head-meta.php). */

/* --- Grundlagen ---------------------------------------------------------- */

html { background: var(--kz-bg); }

/* Klasse statt reinem Elementselektor: body-Regeln aus navigation.php und
   footer.php stehen weiter unten im Dokument und wuerden sonst gewinnen. */
body.kz-body {
    background: var(--kz-bg);
    color: var(--kz-text);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.kz-mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono",
                 Menlo, Consolas, "Liberation Mono", monospace;
    font-variant-ligatures: none;
}

/* :where() zaehlt nicht zur Spezifitaet - der Reset liegt damit auf .kz
   allein und wird von jeder spaeteren Klassenregel ueberschrieben. Ohne
   das gewann ".kz button" (0,1,1) gegen .kz-generieren (0,1,0), und der
   Knopf trug geerbte statt eigener Textfarbe. */
.kz :where(button) { font: inherit; color: inherit; cursor: pointer; }

.kz :focus-visible {
    outline: 2px solid var(--kz-fokus);
    outline-offset: 2px;
    border-radius: 4px;
}

.kz-nur-sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Navigation und Brotkrumen kleben site-weit am oberen Rand. Auf dieser
   Seite legen sie sich beim Scrollen ueber die Kopfzeile der Anwendung
   (Suche, Zaehler, Schalter). Die Anwendung bringt ihre eigene, dauerhaft
   sichtbare Kopfzeile mit - die Site-Leisten duerfen also mitscrollen.

   'relative' statt 'static': beide behalten damit ihren z-index, sodass die
   Menue-Aufklapper weiter ueber dem Inhalt liegen. Die Aufklapper selbst
   haengen an 'li { position: relative }' und sind davon nicht betroffen.
   Die Klasse hebt die Spezifitaet ueber die spaeteren Regeln aus
   navigation.php. */
body.kz-body nav:not(.brotkrumen),
body.kz-body .brotkrumen {
    position: relative;
    top: auto;
}

/* --- Rahmen der Anwendung ------------------------------------------------ */

.kz {
    width: min(1600px, calc(100% - 24px));
    margin: 0 auto 18px auto;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--kz-rand);
    border-radius: 14px;
    background: var(--kz-panel-2);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.kz-kopf {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 14px;
    height: 52px;
    background: var(--kz-panel);
    border-bottom: 1px solid var(--kz-rand);
    flex-shrink: 0;
}

.kz-marke {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
}

.kz-marke-zeichen {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
}
.kz-marke-zeichen img { width: 26px; height: 26px; display: block; }

.kz-marke-name {
    font-size: 13px; font-weight: 600; letter-spacing: .02em;
    color: var(--kz-text);
}

.kz-pfad {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--kz-text-3);
    min-width: 0;
}
.kz-pfad span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kz-pfad .kz-trenner { color: var(--kz-text-4); opacity: .7; }
.kz-pfad .kz-jetzt { color: var(--kz-text); font-weight: 500; }

.kz-suche {
    display: flex; align-items: center; gap: 9px;
    margin-left: auto;
    padding: 0 11px;
    height: 30px; width: min(340px, 30vw);
    border: 1px solid var(--kz-rand);
    border-radius: 7px;
    background: var(--kz-eingabe-bg);
    flex-shrink: 0;
}
.kz-suche svg { width: 14px; height: 14px; color: var(--kz-text-4); flex-shrink: 0; }
.kz-suche input {
    flex: 1; min-width: 0;
    border: 0; background: none; outline: none;
    font: inherit; font-size: 13px; color: var(--kz-text);
}
.kz-suche input::placeholder { color: var(--kz-text-4); }
.kz-suche:focus-within { border-color: var(--kz-akzent-rand); }

.kz-taste {
    font-size: 11px; line-height: 1.4;
    color: var(--kz-text-4);
    border: 1px solid var(--kz-rand);
    border-radius: 4px;
    padding: 1px 5px;
    white-space: nowrap;
}

.kz-kopf-rechts { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.kz-zaehler { font-size: 12px; color: var(--kz-text-3); white-space: nowrap; }
.kz-zaehler b { color: var(--kz-akzent); font-weight: 600; }

.kz-knopf-flach {
    font-size: 12.5px;
    padding: 5px 11px;
    border: 1px solid var(--kz-rand);
    background: var(--kz-erhoben);
    color: var(--kz-text-2);
    border-radius: 6px;
}
.kz-knopf-flach:hover { border-color: var(--kz-text-4); color: var(--kz-text); }

.kz-icon-knopf {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    border: 1px solid var(--kz-rand);
    background: var(--kz-erhoben);
    color: var(--kz-text-2);
    border-radius: 6px;
}
.kz-icon-knopf:hover { border-color: var(--kz-text-4); color: var(--kz-text); }
.kz-icon-knopf svg { width: 16px; height: 16px; }

/* Sonne im Hellmodus, Mond im Dunkelmodus - jeweils das Symbol dessen,
   worauf umgeschaltet wird. */
.kz-icon-mond { display: none; }
:root[data-kz-theme="hell"] .kz-icon-mond { display: block; }
:root[data-kz-theme="hell"] .kz-icon-sonne { display: none; }

/* --- Drei Spalten -------------------------------------------------------- */

.kz-flaeche {
    position: relative; /* Bezug fuer die Spaltengriffe (js/kz-spalten.js) */
    display: grid;
    /* --kz-links / --kz-rechts setzt js/kz-spalten.js, wenn jemand zieht */
    grid-template-columns: var(--kz-links, 258px) minmax(0, 1fr) var(--kz-rechts, 424px);
    height: clamp(560px, calc(100vh - 250px), 1000px);
    min-height: 0;
}

/* --- Spalte 1: Bereiche -------------------------------------------------- */

.kz-rail {
    border-right: 1px solid var(--kz-rand-weich);
    background: var(--kz-panel);
    padding: 12px 10px;
    display: flex; flex-direction: column; gap: 14px;
    overflow-y: auto;
    min-height: 0;
}

.kz-rail-gruppe { display: flex; flex-direction: column; gap: 2px; }

.kz-rubrik {
    font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--kz-rot); font-weight: 600;
    padding: 4px 8px 6px 8px;
}

.kz-rail button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px; align-items: center;
    width: 100%; text-align: left;
    font-size: 13px;
    border: 0; border-left: 2px solid transparent;
    background: none;
    color: var(--kz-text-3);
    padding: 7px 9px;
    border-radius: 0 6px 6px 0;
}
.kz-rail button span:first-child {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kz-rail button:hover { background: var(--kz-zeile-hover); color: var(--kz-text-2); }
.kz-rail button[aria-current="true"] {
    border-left-color: var(--kz-akzent-linie);
    background: var(--kz-akzent-bg);
    color: var(--kz-text);
    font-weight: 500;
}

.kz-rail-n {
    font-size: 11px;
    color: var(--kz-text-4);
    background: var(--kz-erhoben);
    padding: 1px 6px; border-radius: 4px;
}
.kz-rail button[aria-current="true"] .kz-rail-n {
    color: var(--kz-akzent); background: var(--kz-panel);
}
/* Trefferzahl der Suche - ersetzt die Gesamtzahl, solange gefiltert wird */
.kz-rail button[data-treffer="0"] { opacity: .4; }

/* --- Spalte 2: Kompetenzen ----------------------------------------------- */

.kz-liste {
    display: flex; flex-direction: column;
    min-height: 0;
    background: var(--kz-panel-2);
}

.kz-liste-kopf {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--kz-rand-weich);
    flex-shrink: 0; flex-wrap: wrap;
}
.kz-liste-kopf h2 {
    margin: 0; font-size: 14px; font-weight: 600; color: var(--kz-text);
    line-height: 1.3;
}
.kz-liste-kopf .kz-liste-n { font-size: 11.5px; color: var(--kz-text-3); }

.kz-chips { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.kz-chip {
    font-size: 11.5px;
    padding: 4px 9px;
    border: 1px solid var(--kz-rand);
    background: var(--kz-erhoben);
    color: var(--kz-text-3);
    border-radius: 5px;
}
.kz-chip[aria-pressed="true"] {
    border-color: var(--kz-akzent-rand);
    background: var(--kz-akzent-bg);
    color: var(--kz-akzent-text);
}

.kz-liste-koerper { flex: 1; overflow-y: auto; padding: 6px 0 18px 0; min-height: 0; }

/* Das hidden-Attribut setzt display:none nur im Browser-Stylesheet - jede
   eigene display-Regel (grid, flex ...) gewinnt dagegen. Alles, was die
   Suche ausblendet, braucht die Regel deshalb ausdruecklich. */
.kz-bereich[hidden],
.kz-zeile[hidden],
.kz-schwerpunkt[hidden],
.kz-stufe[hidden] { display: none; }

.kz-schwerpunkt {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 18px 7px 18px;
    font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--kz-text-4); font-weight: 600;
}
.kz-schwerpunkt::after {
    content: ""; flex: 1; height: 1px; background: var(--kz-rand-weich);
}

.kz-stufe {
    padding: 8px 18px 2px 88px;
    font-size: 11.5px; font-weight: 600; color: var(--kz-text-3);
}

.kz-zeile {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr); /* Kennung seit 09/2026 nicht mehr angezeigt */
    gap: 12px; align-items: start;
    width: 100%; text-align: left;
    border: 0; border-left: 2px solid transparent;
    background: none;
    padding: 8px 18px 8px 16px;
}
.kz-zeile:hover { background: var(--kz-zeile-hover); }

.kz-kasten {
    display: flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; margin-top: 2px;
    border: 1.5px solid var(--kz-text-4);
    border-radius: 4px;
    background: transparent;
}
.kz-kasten svg { width: 11px; height: 11px; display: none; }

.kz-kennung {
    font-size: 11.5px; color: var(--kz-text-4); margin-top: 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.kz-text { font-size: 13.5px; line-height: 1.5; color: var(--kz-text-2); }
.kz-text mark {
    background: var(--kz-treffer); color: inherit;
    border-radius: 2px; padding: 0 1px;
}

.kz-zeile[aria-pressed="true"] {
    border-left-color: var(--kz-akzent-linie);
    background: var(--kz-akzent-bg);
}
.kz-zeile[aria-pressed="true"] .kz-kasten {
    border-color: var(--kz-akzent);
    background: var(--kz-akzent);
}
.kz-zeile[aria-pressed="true"] .kz-kasten svg {
    display: block; color: var(--kz-akzent-kontrast);
}
.kz-zeile[aria-pressed="true"] .kz-kennung { color: var(--kz-akzent); }
.kz-zeile[aria-pressed="true"] .kz-text { color: var(--kz-text); }

.kz-leer {
    margin: 0; padding: 28px 18px;
    font-size: 13px; color: var(--kz-text-3); line-height: 1.5;
}

/* --- Spalte 3: Werkbank -------------------------------------------------- */

.kz-werkbank {
    border-left: 1px solid var(--kz-rand-weich);
    background: var(--kz-panel);
    display: flex; flex-direction: column;
    min-height: 0;
}

.kz-reiter {
    display: flex; gap: 0;
    border-bottom: 1px solid var(--kz-rand-weich);
    padding: 0 12px;
    flex-shrink: 0;
}
.kz-reiter button {
    font-size: 12.5px; color: var(--kz-text-3);
    background: none; border: 0;
    border-bottom: 2px solid transparent;
    padding: 13px 12px;
}
.kz-reiter button:hover { color: var(--kz-text-2); }
.kz-reiter button[aria-selected="true"] {
    color: var(--kz-text); font-weight: 600;
    border-bottom-color: var(--kz-akzent-linie);
}
.kz-reiter-n {
    font-size: 11px; color: var(--kz-text-4);
    margin-left: 5px;
}
.kz-reiter button[aria-selected="true"] .kz-reiter-n { color: var(--kz-akzent); }

.kz-tafel {
    padding: 14px;
    border-bottom: 1px solid var(--kz-rand-weich);
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 150px;
}
.kz-tafel[hidden] { display: none; }

/* Auswahl */
.kz-auswahl { display: flex; flex-direction: column; gap: 8px; }
.kz-auswahl-zeile {
    display: grid; grid-template-columns: minmax(0, 1fr) 18px;
    gap: 10px; align-items: start;
    padding: 8px 10px;
    background: var(--kz-erhoben);
    border: 1px solid var(--kz-rand);
    border-radius: 6px;
}
.kz-auswahl-zeile .kz-kennung { color: var(--kz-akzent); margin-top: 2px; }
.kz-auswahl-zeile p {
    margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--kz-text-2);
}
.kz-weg {
    border: 0; background: none; padding: 0; margin-top: 2px;
    color: var(--kz-text-4);
    display: flex; align-items: center; justify-content: center;
}
.kz-weg:hover { color: var(--kz-text); }
.kz-weg svg { width: 13px; height: 13px; }

/* Anweisung */
/* Die Tafel ist eine Spalte: KI-Hinweis oben, Textfeld fuellt den Rest.
   Der id-Selektor liegt ueber .kz-tafel[hidden], deshalb steht die
   hidden-Regel hier noch einmal mit id. */
#kz-tafel-anweisung { display: flex; flex-direction: column; }
#kz-tafel-anweisung[hidden] { display: none; }

.kz-tafel textarea {
    width: 100%; flex: 1 1 auto; min-height: 170px;
    box-sizing: border-box;
    border: 1px solid var(--kz-rand);
    background: var(--kz-eingabe-bg);
    color: var(--kz-text);
    border-radius: 6px;
    padding: 10px 12px;
    font: inherit; font-size: 12.5px; line-height: 1.55;
    resize: vertical;
}
.kz-tafel textarea::placeholder { color: var(--kz-text-4); }

/* Ergebnis */
.kz-ergebnis {
    border: 1px solid var(--kz-rand);
    background: var(--kz-eingabe-bg);
    border-radius: 6px;
    padding: 12px;
    min-height: 150px;
    font-size: 13px; line-height: 1.6; color: var(--kz-text-2);
    -webkit-user-select: text; user-select: text;
}
.kz-ergebnis p { margin: 0; }
#responseText { white-space: pre-wrap; }
.kz-ergebnis .lp-hinweis { color: var(--kz-text-4); font-size: 13px; }

.kz-export { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.kz-loader {
    display: none;
    width: 18px; height: 18px; margin: 12px auto 0 auto;
    border: 2px solid var(--kz-rand);
    border-top-color: var(--kz-akzent);
    border-radius: 50%;
    animation: kz-dreh .8s linear infinite;
}
@keyframes kz-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .kz-loader { animation-duration: 3s; }
}

/* Fuss der Werkbank */
.kz-werkbank-fuss {
    padding: 14px;
    display: flex; flex-direction: column; gap: 14px;
    flex-shrink: 0;
}

.kz-auftrag { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.kz-auftrag button {
    font-size: 12.5px; text-align: left;
    padding: 9px 11px;
    border: 1px solid var(--kz-rand);
    background: var(--kz-erhoben);
    color: var(--kz-text-2);
    border-radius: 6px;
}
.kz-auftrag button:hover { border-color: var(--kz-akzent-rand); color: var(--kz-text); }
.kz-auftrag button.kz-auftrag-foerder {
    border-color: var(--kz-warm-rand);
    background: var(--kz-warm-bg);
    color: var(--kz-warm-text);
}

/* Aktiver Auftrag: gefuellt, mit Haken. Erneuter Klick nimmt ihn heraus. */
.kz-auftrag button { position: relative; }
.kz-auftrag button[aria-pressed="true"] {
    background: var(--kz-akzent);
    border-color: var(--kz-akzent);
    color: var(--kz-akzent-kontrast);
    font-weight: 600;
    padding-right: 28px;
}
.kz-auftrag button.kz-auftrag-foerder[aria-pressed="true"] {
    background: var(--kz-warm-text);
    border-color: var(--kz-warm-text);
    color: var(--kz-panel);
}
.kz-auftrag button[aria-pressed="true"]::after {
    content: "";
    position: absolute;
    right: 11px; top: 50%;
    width: 5px; height: 9px;
    margin-top: -6px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.kz-erzeugen { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }

.kz-modell {
    display: flex; align-items: center; gap: 8px;
    padding: 0 8px 0 11px; height: 36px;
    border: 1px solid var(--kz-rand);
    background: var(--kz-erhoben);
    border-radius: 6px;
}
.kz-modell::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--kz-akzent); flex-shrink: 0;
}
.kz-modell select {
    flex: 1; min-width: 0;
    border: 0; background: none; outline: none;
    font: inherit; font-size: 12px; color: var(--kz-text-2);
    -webkit-appearance: none; appearance: none;
}
/* Die Optionsliste zeichnet das Betriebssystem - im Dunkelmodus sonst
   schwarze Schrift auf schwarzem Grund. */
.kz-modell select option { background: var(--kz-panel); color: var(--kz-text); }

.kz-generieren {
    display: flex; align-items: center; gap: 9px;
    font-size: 13px; font-weight: 600;
    height: 36px; padding: 0 15px;
    border: 0;
    background: var(--kz-akzent);
    color: var(--kz-akzent-kontrast);
    border-radius: 6px;
}
.kz-generieren:hover { filter: brightness(1.08); }
.kz-generieren:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.kz-generieren .kz-taste { border-color: currentColor; color: inherit; opacity: .7; }

/* --- Statusleiste -------------------------------------------------------- */

.kz-status {
    display: flex; align-items: center; gap: 16px;
    min-height: 30px; padding: 6px 18px;
    background: var(--kz-status-bg);
    border-top: 1px solid var(--kz-rand-weich);
    font-size: 11.5px; color: var(--kz-text-4);
    flex-shrink: 0; flex-wrap: wrap;
}
.kz-status .kz-status-aktiv { color: var(--kz-akzent); }
.kz-status-tipp {
    display: flex; align-items: center; gap: 8px;
    min-width: 0; flex: 1 1 260px;
}
.kz-status-tipp p {
    margin: 0; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kz-status-tipp button {
    border: 0; background: none; padding: 0 2px; color: var(--kz-text-4);
    display: flex; align-items: center;
}
.kz-status-tipp button:hover { color: var(--kz-text-2); }
.kz-status-tipp svg { width: 12px; height: 12px; }
.kz-status-tasten { display: flex; gap: 14px; margin-left: auto; }

/* --- Hilfe-Aufklapper ---------------------------------------------------- */

.kz-hilfe { position: relative; }
.kz-hilfe-popup {
    display: none;
    position: absolute; top: calc(100% + 10px); right: 0;
    width: 300px; z-index: 950;
    padding: 16px 18px;
    background: var(--kz-panel);
    border: 1px solid var(--kz-rand);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
    text-align: left;
}
.kz-hilfe-popup.show-popup { display: block; }
.kz-hilfe-popup h2 {
    margin: 0 0 10px 0; font-size: 13px; font-weight: 600; color: var(--kz-text);
}
.kz-hilfe-popup ol {
    margin: 0 0 12px 0; padding: 0 0 0 18px;
    list-style: decimal;
    font-size: 12.5px; line-height: 1.6; color: var(--kz-text-3);
}
.kz-hilfe-popup ol li { list-style: decimal; margin: 0; }
.kz-hilfe-popup dl {
    margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 10px; font-size: 12px; color: var(--kz-text-3);
}
.kz-hilfe-popup dt { margin: 0; }
.kz-hilfe-popup dd { margin: 0; }

/* --- Fremde Bausteine im Dunkelmodus ------------------------------------- */
/* Praefix noetig: footer.php gibt seine Regeln spaeter im Body aus. */

:root[data-kz-theme="dunkel"] .footer {
    background-color: var(--kz-status-bg);
    border-top: 1px solid var(--kz-rand);
}
:root[data-kz-theme="dunkel"] .footer-links a { color: var(--kz-text-3); }
:root[data-kz-theme="dunkel"] .footer-links a:hover { color: var(--kz-akzent); }
:root[data-kz-theme="dunkel"] .footer,
:root[data-kz-theme="dunkel"] .footer small { color: var(--kz-text-3); }

/* KI-Kennzeichnung (ki-hinweis.php): seit 09/2026 in css/kz-basis.css. */

/* --- Werkzeugseiten (Eigene Items, Textbearbeitung) ---------------------- */

/* Platzhalter im Kopf, wenn die Suche fehlt - haelt die rechte Gruppe rechts. */
.kz-kopf-luecke { margin-left: auto; }

.kz-werkzeug-rail { gap: 20px; }

.kz-rail-text {
    margin: 0;
    padding: 0 8px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--kz-text-3);
}

/* Datei-Feld: das Label ist die ganze Flaeche, das input liegt unsichtbar darin. */
.kz-datei {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    margin: 2px 0 0 0;
    padding: 18px 12px 16px 12px;
    border: 1px dashed var(--kz-rand);
    border-radius: 10px;
    background: var(--kz-panel-2);
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.kz-datei svg { width: 26px; height: 26px; color: var(--kz-akzent); margin-bottom: 6px; }
.kz-datei-titel { font-size: 13.5px; font-weight: 600; color: var(--kz-text); }
.kz-datei-hinweis { font-size: 12px; color: var(--kz-text-3); }
.kz-datei-formate { margin-top: 6px; font-size: 11px; color: var(--kz-text-4); }
.kz-datei:hover,
.kz-datei.kz-datei-ueber,
.kz-datei:focus-within {
    border-color: var(--kz-akzent-rand);
    background: var(--kz-akzent-bg);
}
.kz-datei:focus-within { outline: 2px solid var(--kz-fokus); outline-offset: 2px; }

.kz-datei-status {
    margin: 6px 0 0 0;
    padding: 0 8px;
    min-height: 1.4em;
    font-size: 12px;
    line-height: 1.4;
    color: var(--kz-akzent-text);
    overflow-wrap: anywhere;
}
.kz-datei-status:empty { display: none; }
.kz-datei-status.kz-datei-fehler { color: var(--kz-warm-text); }

/* .kz-rail button stylt Bereichsknoepfe - der Beispielknopf ist ein normaler Flachknopf. */
.kz-rail .kz-beispiel {
    display: inline-flex; width: auto;
    align-self: flex-start;
    margin: 8px 0 0 0;
    padding: 5px 11px;
    font-size: 12.5px;
    border: 1px solid var(--kz-rand);
    border-radius: 6px;
    background: var(--kz-erhoben);
    color: var(--kz-text-2);
}
.kz-rail .kz-beispiel:hover { border-color: var(--kz-text-4); color: var(--kz-text); background: var(--kz-erhoben); }

/* Textbearbeitung: das Textfeld fuellt die mittlere Spalte */
.kz-text-koerper {
    flex: 1;
    min-height: 0;
    display: flex; flex-direction: column; gap: 12px;
    padding: 14px 18px 18px 18px;
}
.kz-text-koerper textarea {
    flex: 1 1 auto;
    min-height: 260px;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    border: 1px solid var(--kz-rand);
    border-radius: 8px;
    background: var(--kz-eingabe-bg);
    color: var(--kz-text);
    font: inherit;
    font-size: 14px;
    line-height: 1.65;
    resize: none;
}
.kz-text-koerper textarea::placeholder { color: var(--kz-text-4); }
.kz-text-koerper textarea:focus {
    outline: none;
    border-color: var(--kz-akzent-rand);
    box-shadow: 0 0 0 3px var(--kz-akzent-bg);
}

/* --- Schmalere Fenster --------------------------------------------------- */

@media (max-width: 1280px) {
    .kz-flaeche { grid-template-columns: var(--kz-links, 210px) minmax(0, 1fr) var(--kz-rechts, 380px); }
    .kz-suche { width: 200px; }
}

@media (max-width: 1080px) {
    /* Werkbank wandert unter die Liste, die Bereichsleiste bleibt links. */
    .kz-flaeche {
        grid-template-columns: 210px minmax(0, 1fr);
        grid-template-rows: minmax(280px, 1fr) minmax(320px, auto);
        height: auto;
    }
    .kz-rail { grid-row: 1 / 3; }
    .kz-liste { max-height: 60vh; }
    .kz-werkbank {
        border-left: 1px solid var(--kz-rand-weich);
        border-top: 1px solid var(--kz-rand-weich);
    }
    .kz-status-tasten { display: none; }
}

@media (max-width: 820px) {
    .kz-flaeche {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto;
    }
    .kz-rail {
        grid-row: auto;
        flex-direction: row; gap: 10px;
        overflow-x: auto; overflow-y: hidden;
        border-right: 0; border-bottom: 1px solid var(--kz-rand-weich);
    }
    .kz-rail-gruppe { flex-direction: row; gap: 4px; }
    .kz-rubrik { display: none; }
    .kz-rail button {
        border-left: 0; border-bottom: 2px solid transparent;
        border-radius: 6px; white-space: nowrap; width: auto;
        grid-template-columns: auto auto;
    }
    .kz-rail button[aria-current="true"] { border-bottom-color: var(--kz-akzent-linie); }
    .kz-pfad, .kz-marke-name { display: none; }
    .kz-suche { width: auto; flex: 1; }
}

/* Werkzeugseiten (Eigene Items, Textbearbeitung, Befrag den Lehrplan): die
   Leiste traegt Datei, Hinweise und Links statt Bereichsknoepfen. Schmal
   wird sie deshalb keine Scrollzeile wie bei den Lehrplaenen, sondern ein
   kompakter Block ueber dem Inhalt. */
@media (max-width: 820px) {
    .kz-rail.kz-werkzeug-rail {
        flex-direction: column;
        gap: 14px;
        overflow: visible;
    }
    .kz-werkzeug-rail .kz-rail-gruppe { flex-direction: column; gap: 4px; }
    .kz-werkzeug-rail .kz-rubrik { display: block; }
}

/* --- Spaltengriffe (js/kz-spalten.js) ------------------------------------ */

.kz-griff {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 4;
    width: 11px;
    margin-left: -5px;          /* mittig auf der Spaltengrenze */
    padding: 0;
    border: 0;
    background: none;
    cursor: col-resize;
    touch-action: none;
}
.kz-griff::before {             /* sichtbare Linie */
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 5px;
    width: 1px;
    background: transparent;
    transition: background-color .15s ease, width .15s ease, left .15s ease;
}
.kz-griff::after {              /* Griffmarke in der Mitte */
    content: "";
    position: absolute;
    top: 50%; left: 3px;
    width: 5px; height: 28px;
    margin-top: -14px;
    border-radius: 3px;
    background: var(--kz-rand);
    opacity: 0;
    transition: opacity .15s ease;
}
.kz-flaeche:hover .kz-griff::after { opacity: 1; }
.kz-griff:hover::before,
.kz-griff:focus-visible::before,
.kz-griff.kz-griff-aktiv::before {
    left: 4px; width: 3px;
    background: var(--kz-akzent-linie);
}
.kz-griff:hover::after,
.kz-griff:focus-visible::after,
.kz-griff.kz-griff-aktiv::after { opacity: 0; }
.kz-griff:focus-visible { outline: none; }

/* Waehrend des Ziehens keine Textauswahl und ueberall der Spaltencursor */
body.kz-zieht, body.kz-zieht * { cursor: col-resize !important; user-select: none !important; }

/* Schmal stapeln sich die Spalten - dann gibt es nichts zu ziehen. */
@media (max-width: 1080px) {
    .kz-griff { display: none; }
}