/* ===========================================================================
   Uebersichtsseiten (hub.php) und Startseite - Kommandozentrale 09/2026
   Farben und Grundlagen: css/kz-basis.css
   =========================================================================== */

.hub {
    width: min(1200px, calc(100% - 24px));
    margin: 6px auto 0 auto;
    padding: 0 0 40px 0;
    box-sizing: border-box;
    display: block;
    flex: 1 0 auto;
}

/* --- Kopf ---------------------------------------------------------------- */

.hub-kopf {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 0 18px 0;
    border-bottom: 1px solid var(--kz-rand);
}

.hub-kopf h1 {
    margin: 6px 0 8px 0;
    font-size: clamp(1.6rem, 2.8vw, 2.1rem);
    font-weight: 650;
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: var(--kz-text);
}

.hub-lead {
    margin: 0;
    max-width: 64ch;
    font-size: 15px;
    line-height: 1.6;
    color: var(--kz-text-3);
}

.hub-zahlen {
    display: flex;
    gap: 10px;
    margin: 0;
    flex-shrink: 0;
}
.hub-zahlen > div {
    min-width: 104px;
    padding: 10px 14px;
    background: var(--kz-panel);
    border: 1px solid var(--kz-rand);
    border-radius: 10px;
}
.hub-zahlen dt {
    font-size: 11.5px;
    color: var(--kz-text-3);
}
.hub-zahlen dd {
    margin: 2px 0 0 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--kz-text);
}

/* --- Filterleiste -------------------------------------------------------- */

.hub-werkzeug {
    position: sticky;
    top: calc(12px + var(--nav-hoehe, 92px) + 6px + 44px);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 0 8px 0;
}

.hub-suche {
    display: flex;
    align-items: center;
    gap: 9px;
    width: min(420px, 100%);
    height: 38px;
    padding: 0 12px;
    background: var(--kz-eingabe-bg);
    border: 1px solid var(--kz-rand);
    border-radius: 9px;
    box-shadow: var(--kz-schatten);
    box-sizing: border-box;
}
.hub-suche:focus-within {
    border-color: var(--kz-akzent-rand);
    box-shadow: 0 0 0 3px var(--kz-akzent-bg);
}
.hub-suche svg { width: 15px; height: 15px; color: var(--kz-text-4); flex-shrink: 0; }
:root:root .hub-suche input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: 14px;
    color: var(--kz-text);
}
.hub-taste {
    font-size: 11px;
    color: var(--kz-text-4);
    border: 1px solid var(--kz-rand);
    border-radius: 4px;
    padding: 1px 6px;
}
.hub-treffer { margin: 0; font-size: 12.5px; color: var(--kz-text-3); }

/* --- Gruppen und Panels -------------------------------------------------- */

.hub-gruppe {
    margin: 30px 0 10px 2px;
}

.hub-panel {
    margin: 12px 0 0 0;
    background: var(--kz-panel);
    border: 1px solid var(--kz-rand);
    border-radius: 12px;
    box-shadow: var(--kz-schatten);
    overflow: hidden;
}
.hub-panel[hidden], .hub-gruppe[hidden], .hub-liste li[hidden] { display: none; }

.hub-panel-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--kz-panel-2);
    border-bottom: 1px solid var(--kz-rand-weich);
}
.hub-panel-kopf h3 {
    position: relative;
    padding-left: 12px;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--kz-text);
}
.hub-panel-kopf h3::before {
    content: "";
    position: absolute;
    left: 0; top: .2em; bottom: .2em;
    width: 3px;
    border-radius: 2px;
    background: var(--kz-rot);
}
.hub-panel-kopf h3 a {
    color: inherit;
    text-decoration: none;
}
.hub-panel-kopf h3 a:hover { color: var(--kz-akzent-text); }
/* Erlaeuternder Zusatz zum Schulformnamen, z. B. "Regelschule · Haupt- und Realschulabschluss" */
.hub-zusatz { font-weight: 400; color: var(--kz-text-3); }
.hub-panel-kopf .hub-zusatz { font-size: 13px; }
.hub-panel-kopf .hub-zusatz::before { content: "· "; }
.hub-kopf .hub-zusatz { margin: -4px 0 10px; font-size: 15px; }
.hub-anzahl { font-size: 12px; color: var(--kz-text-3); white-space: nowrap; }

/* Fachliste: Zeilen in Spalten, getrennt durch feine Linien */
.hub-liste {
    list-style: none;
    margin: 0;
    padding: 6px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2px 6px;
}
.hub-liste a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px 9px 12px;
    border-radius: 7px;
    border-left: 2px solid transparent;
    color: var(--kz-text-2);
    text-decoration: none;
    font-size: 14px;
    font-weight: 450;
    line-height: 1.35;
    white-space: normal; /* navigation.php setzt fuer alle Links nowrap */
}
.hub-liste li { min-width: 0; }
.hub-liste a svg {
    width: 14px; height: 14px;
    flex-shrink: 0;
    color: var(--kz-text-4);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .15s ease, transform .15s ease;
}
.hub-liste a:hover,
.hub-liste a:focus-visible {
    background: var(--kz-akzent-bg);
    color: var(--kz-akzent-text);
    border-left-color: var(--kz-akzent-linie);
}
.hub-liste a:hover svg,
.hub-liste a:focus-visible svg { opacity: 1; transform: none; color: var(--kz-akzent); }
.hub-liste a.hub-gesperrt,
.hub-liste a.hub-gesperrt:hover {
    color: var(--kz-text-4);
    background: none;
    border-left-color: transparent;
    cursor: not-allowed;
    opacity: .6;
}

.hub-leer {
    margin: 24px 0;
    padding: 18px;
    text-align: center;
    color: var(--kz-text-3);
    background: var(--kz-panel);
    border: 1px dashed var(--kz-rand);
    border-radius: 12px;
}

@media (max-width: 720px) {
    .hub-kopf { flex-direction: column; align-items: flex-start; }
    .hub-werkzeug { position: static; flex-wrap: wrap; }
    .hub-liste { grid-template-columns: 1fr; }
}

/* Tastenhinweis nur, wo es eine Tastatur gibt */
@media (hover: none) {
    .hub-taste { display: none; }
}

/* --- Hinweis "Lehrplan fehlt?" ----------------------------------------- */

.hub-fehlt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 36px 0 0 0;
    padding: 20px 22px;
    background: var(--kz-panel);
    border: 1px dashed var(--kz-rand);
    border-left: 3px solid var(--kz-rot);
    border-radius: 0 12px 12px 0;
}
.hub-fehlt h2 {
    margin: 6px 0 6px 0;
    font-size: 1.1rem;
    font-weight: 650;
    color: var(--kz-text);
}
.hub-fehlt p:not(.kz-rubrik) {
    margin: 0;
    max-width: 62ch;
    font-size: 14px;
    line-height: 1.55;
    color: var(--kz-text-3);
}
.hub-fehlt .kz-knopf { flex-shrink: 0; }
.hub-leer a { display: inline-block; margin-left: 6px; color: var(--kz-akzent-text); font-weight: 550; }

@media (max-width: 720px) {
    .hub-fehlt { flex-direction: column; align-items: flex-start; }
}