/* ==========================================================================
   MODUL PLANUNG — Stammdaten und (ab Sprint 1) Planungswerkbank

   Heller Schulora-Look. Fachfarben kommen zur Laufzeit als Inline-Custom-Property
   (--fach-bg / --fach-fg) auf den Chip; die Textfarbe rechnet der Server nach
   WCAG-Kontrast aus, damit Portal, Mobile und Infobildschirm identisch aussehen.
   ========================================================================== */

.planung {
    padding: 1.5rem 2rem 3rem;
    max-width: 1400px;
}

.planung__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.planung__title {
    font-family: 'Syne', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #0F172A;
    margin: 0 0 0.25rem;
}

.planung__subtitle {
    color: #64748B;
    font-size: 0.9375rem;
    margin: 0;
    max-width: 62ch;
}

/* -- Kacheln der Übersicht ------------------------------------------------ */

.planung__tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.planung__tile {
    display: block;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.planung__tile:hover {
    border-color: #2563EB;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.10);
}

.planung__tile-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.5rem;
}

.planung__tile-name {
    font-weight: 600;
    color: #0F172A;
    margin-bottom: 0.25rem;
}

.planung__tile-count {
    font-family: 'Syne', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #2563EB;
    line-height: 1.1;
}

.planung__tile-hint {
    font-size: 0.8125rem;
    color: #64748B;
}

/* -- Werkzeugleiste ------------------------------------------------------- */

.planung__toolbar {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.planung__field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 200px;
}

.planung__field--grow {
    flex: 1 1 240px;
}

.planung__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
}

.planung__input,
.planung__select {
    padding: 0.5rem 0.75rem;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    font-size: 0.9375rem;
    background: #FFFFFF;
    color: #0F172A;
    font-family: inherit;
}

.planung__input:focus,
.planung__select:focus {
    outline: 2px solid #2563EB;
    outline-offset: -1px;
    border-color: #2563EB;
}

.planung__checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: #334155;
}

/* -- Schaltflächen -------------------------------------------------------- */

.planung__btn {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.planung__btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Die Textfarbe steht überall auch im Hover-Zustand.
   Grund: `.planung__btn` sitzt teils auf einem <a>, und portal.css setzt
   `a:hover { color: … }` — das ist spezifischer als die Grundregel der Klasse und
   färbte den weißen Text auf dem blauen Knopf dunkelviolett. */
.planung__btn--primary,
.planung__btn--primary:hover:not(:disabled) {
    color: #FFFFFF;
}

.planung__btn--primary {
    background: #2563EB;
}

.planung__btn--primary:hover:not(:disabled) {
    background: #1D4ED8;
}

.planung__btn--ghost,
.planung__btn--ghost:hover:not(:disabled) {
    color: #334155;
}

.planung__btn--ghost {
    background: #FFFFFF;
    border-color: #CBD5E1;
}

.planung__btn--ghost:hover:not(:disabled) {
    border-color: #94A3B8;
}

.planung__btn--danger,
.planung__btn--danger:hover:not(:disabled) {
    color: #B91C1C;
}

.planung__btn--danger {
    background: #FFFFFF;
    border-color: #FCA5A5;
}

.planung__btn--danger:hover:not(:disabled) {
    background: #FEF2F2;
}

.planung__btn--small {
    padding: 0.3125rem 0.625rem;
    font-size: 0.8125rem;
}

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

.planung__table-wrap {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    overflow-x: auto;
}

.planung__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.planung__table th {
    text-align: left;
    padding: 0.75rem 1rem;
    background: #F8FAFC;
    color: #475569;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid #E2E8F0;
    white-space: nowrap;
}

.planung__table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #F1F5F9;
    color: #1E293B;
    vertical-align: middle;
}

.planung__table tr:last-child td {
    border-bottom: none;
}

.planung__row--inactive td {
    opacity: 0.55;
}

.planung__actions {
    display: flex;
    gap: 0.375rem;
    justify-content: flex-end;
}

/* -- Fach-Chip ------------------------------------------------------------
   Der Chip ist das zentrale visuelle Element des ganzen Moduls: im Raster,
   in der Palette, in der Stundentafel und später in Stundenplan und App. */

.planung__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
    background: var(--fach-bg, #64748B);
    color: var(--fach-fg, #FFFFFF);
    white-space: nowrap;
}

.planung__chip--lg {
    min-width: 3rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.9375rem;
}

.planung__chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
}

/* -- Farbwähler ----------------------------------------------------------- */

.planung__palette {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.planung__swatch {
    width: 2rem;
    height: 2rem;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: transform 100ms ease;
}

.planung__swatch:hover {
    transform: scale(1.1);
}

.planung__swatch--active {
    border-color: #0F172A;
    box-shadow: 0 0 0 2px #FFFFFF inset;
}

.planung__color-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.planung__color-input {
    width: 3rem;
    height: 2.25rem;
    padding: 2px;
    border: 1px solid #CBD5E1;
    border-radius: 6px;
    background: #FFFFFF;
    cursor: pointer;
}

/* -- Merkmale (Badges) ---------------------------------------------------- */

.planung__badge {
    display: inline-block;
    padding: 0.1875rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #F1F5F9;
    color: #475569;
    white-space: nowrap;
}

.planung__badge--kurs {
    background: #EDE9FE;
    color: #5B21B6;
}

.planung__badge--teilgruppe {
    background: #FEF3C7;
    color: #92400E;
}

.planung__badge--klasse {
    background: #DBEAFE;
    color: #1E40AF;
}

/* -- Zustände ------------------------------------------------------------- */

.planung__loading,
.planung__empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: #64748B;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
}

.planung__empty-title {
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.375rem;
}

.planung__spinner {
    width: 2rem;
    height: 2rem;
    border: 3px solid #E2E8F0;
    border-top-color: #2563EB;
    border-radius: 50%;
    margin: 0 auto 0.75rem;
    animation: planung-spin 800ms linear infinite;
}

@keyframes planung-spin {
    to { transform: rotate(360deg); }
}

.planung__hint {
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 10px;
    padding: 0.875rem 1.125rem;
    color: #1E3A8A;
    font-size: 0.9375rem;
    margin-bottom: 1.25rem;
}

.planung__hint--warn {
    background: #FFFBEB;
    border-color: #FDE68A;
    color: #92400E;
}

/* -- Modal ---------------------------------------------------------------- */

.planung__modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 1000;
}

.planung__modal {
    background: #FFFFFF;
    border-radius: 14px;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}

.planung__modal--wide {
    max-width: 900px;
}

.planung__modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #E2E8F0;
}

.planung__modal-title {
    font-family: 'Syne', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #0F172A;
    margin: 0;
}

.planung__modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #94A3B8;
    cursor: pointer;
    padding: 0 0.25rem;
}

.planung__modal-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.planung__modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.625rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #E2E8F0;
}

.planung__form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.planung__error {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #B91C1C;
    border-radius: 8px;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
}

/* -- Auswahllisten (Klassen, Schüler) ------------------------------------- */

.planung__picker {
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    max-height: 220px;
    overflow-y: auto;
    background: #FFFFFF;
}

.planung__picker-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #F1F5F9;
    font-size: 0.9375rem;
}

.planung__picker-item:last-child {
    border-bottom: none;
}

.planung__picker-item:hover {
    background: #F8FAFC;
}

.planung__picker-kennung {
    margin-left: auto;
    width: 4.5rem;
}

/* -- Einrichtungsassistent ------------------------------------------------ */

.planung__setup-step {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}

.planung__setup-step-title {
    font-weight: 600;
    color: #0F172A;
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.planung__setup-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #2563EB;
    color: #FFFFFF;
    font-size: 0.8125rem;
    font-weight: 700;
}

.planung__result {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.planung__result-item {
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 10px;
    padding: 0.875rem 1rem;
}

.planung__result-num {
    font-family: 'Syne', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #15803D;
}

.planung__result-label {
    font-size: 0.8125rem;
    color: #166534;
}

@media (max-width: 768px) {
    .planung {
        padding: 1rem;
    }

    .planung__toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .planung__field {
        min-width: 0;
    }
}

/* ==========================================================================
   WERKBANK — Wochenraster mit Drag & Drop (Sprint 1)
   ========================================================================== */

.planung--werkbank {
    max-width: none;
}

.planung__werkbank-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.planung__werkbank-titel {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.planung__werkbank-titel .planung__title {
    margin: 0;
}

.planung__zurueck {
    font-size: 1.75rem;
    line-height: 1;
    text-decoration: none;
    color: #64748B;
    padding: 0 0.375rem;
}

.planung__zurueck:hover {
    color: #2563EB;
}

.planung__werkbank-status {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

/* Die Kommandoleiste der Werkbank bekommt denselben Kasten wie die Filterzeile
   darunter — sonst schweben zwölf Knöpfe ohne Bezug über der Seite. */
.planung__werkbank-status--leiste {
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 0.5rem;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 0.625rem 0.875rem;
}

.planung__speicherstatus {
    font-size: 0.8125rem;
    color: #15803D;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    white-space: nowrap;
}

.planung__speicherstatus--offen {
    color: #92400E;
    background: #FFFBEB;
    border-color: #FDE68A;
}

/* -- Palette -------------------------------------------------------------- */

.planung__palette-leiste {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 0.875rem 1.125rem;
    margin-bottom: 1rem;
}

.planung__palette-kopf {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.625rem;
}

.planung__chip--zieh {
    cursor: grab;
    border: none;
    font-family: inherit;
    transition: transform 120ms ease, box-shadow 120ms ease;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: element;
    /* Nimmt die Verzögerung vor dem Tippen, ohne das Blättern zu blockieren. */
    touch-action: manipulation;
}

.planung__chip--zieh:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}

.planung__chip--zieh:active {
    cursor: grabbing;
}

.planung__chip--aktiv {
    outline: 2px solid #0F172A;
    outline-offset: 2px;
}

/* -- Werkbank-Layout ------------------------------------------------------ */

/* Eine Spalte: Der Inspector liegt über dem Raster, nicht daneben. Zwölf Stunden
   mal fünf Tage sind ohnehin breiter als jeder Bildschirm — eine Spalte daneben
   nähme dem Raster den Platz, den es am dringendsten braucht. */
.planung__werkbank {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.planung__raster-wrap {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    overflow: auto;
    max-height: calc(100vh - 22rem);
}

.planung__raster {
    display: grid;
    /* Die erste Spalte wächst mit dem längsten Namen, aber nur bis 15rem (siehe
       .planung__raster-klasse). Fest auf 7rem lief sie über: „Naturwissenschaftlicher
       Fachraum 2" in der Raumsicht und „Stundenzahl/Deputat" in der Lehrkraft-Sicht
       passen dort nie hinein, und weil die Spalte klebt, schob sich der Text über
       den Plan. */
    grid-template-columns: minmax(7rem, max-content) repeat(calc(var(--spalten) - 1), minmax(2.25rem, 1fr));
    min-width: max-content;
}

.planung__raster-ecke,
.planung__raster-tag,
.planung__raster-stunde {
    background: #F8FAFC;
    border-bottom: 1px solid #E2E8F0;
    border-right: 1px solid #E2E8F0;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    padding: 0.375rem 0.25rem;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 3;
}

.planung__raster-ecke {
    left: 0;
    z-index: 5;
    text-align: left;
    padding-left: 0.75rem;
}

.planung__raster-ecke--klein {
    top: 1.875rem;
}

.planung__raster-tag {
    border-right: 2px solid #CBD5E1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.planung__raster-stunde {
    top: 1.875rem;
    font-weight: 500;
    color: #64748B;
}

.planung__raster-klasse {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #FFFFFF;
    border-bottom: 1px solid #F1F5F9;
    border-right: 1px solid #E2E8F0;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1E293B;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    white-space: nowrap;
    /* Obergrenze der klebenden Spalte: Der Plan soll die Fläche behalten. Weil das
       max-content-Maß des Rasters durch diese Breite gedeckelt wird, wächst die Spalte
       genau bis hierher und keinen Millimeter weiter. */
    max-width: 15rem;
    min-width: 0;
}

.planung__raster-ecke {
    max-width: 15rem;
}

/* Der Name weicht als Erster: Die Kennzahl daneben ist kurz und muss ganz lesbar
   bleiben — eine abgeschnittene Prozentzahl wäre schlimmer als ein gekürzter Name.
   Der volle Text steht im title der Zeile. */
.planung__raster-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.planung__raster-klasse > .planung__raum-auslastung {
    flex: 0 0 auto;
}

.planung__raster-klasse--aktiv {
    background: #EFF6FF;
    color: #1D4ED8;
    box-shadow: inset 3px 0 0 #2563EB;
}

.planung__zelle {
    border-bottom: 1px solid #F1F5F9;
    border-right: 1px solid #F1F5F9;
    min-height: 2.25rem;
    padding: 2px;
    transition: background-color 100ms ease;
}

/* Beim Ziehen über das Raster markierte der Browser sonst die Beschriftungen — der halbe
   Stundenplan wurde blau, und der Zug fühlte sich an, als hätte er nicht gegriffen.
   Im Raster gibt es nichts zu markieren; die Auswahl ist hier nur im Weg. */
.planung__raster,
.planung__raster-klasse,
.planung__raster-tag,
.planung__raster-stunde,
.planung__raster-ecke,
.planung__zelle,
.planung__palette-leiste {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/* Trennlinie zwischen den Wochentagen */
.planung__zelle:nth-child(n) {
    background: #FFFFFF;
}

.planung__zelle--frei {
    background: #DCFCE7;
    box-shadow: inset 0 0 0 2px #22C55E;
}

.planung__zelle--belegt {
    background: #FEE2E2;
    box-shadow: inset 0 0 0 2px #EF4444;
}

.planung__slot {
    height: 100%;
    min-height: 2rem;
    border-radius: 5px;
    background: var(--fach-bg, #64748B);
    color: var(--fach-fg, #FFFFFF);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    cursor: grab;
    position: relative;
    padding: 1px 2px;
    transition: transform 120ms ease, box-shadow 120ms ease;
    -webkit-user-select: none;
    user-select: none;
    /* Safari zieht sonst das Bild des Textes statt der Kachel. */
    -webkit-user-drag: element;
}

/* Kürzel, Lehrkraftkürzel, Pin: Sie dürfen den Griff nicht abfangen. Traf der Druckpunkt
   eines der Kinder, begann der Zug je nach Browser gar nicht — das war das „manchmal
   greift es nicht". */
.planung__slot > * {
    pointer-events: none;
}

.planung__slot:active {
    cursor: grabbing;
}

.planung__slot:hover {
    transform: scale(1.04);
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.25);
    z-index: 1;
}

.planung__slot:active {
    cursor: grabbing;
}

.planung__slot--gewaehlt {
    outline: 2px solid #0F172A;
    outline-offset: 1px;
    z-index: 1;
}

.planung__slot-kuerzel {
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.planung__slot-zusatz {
    font-size: 0.5625rem;
    opacity: 0.85;
    line-height: 1;
}

.planung__slot-pin,
.planung__slot-kurs {
    position: absolute;
    top: -1px;
    font-size: 0.5rem;
    line-height: 1;
}

.planung__slot-pin { right: 0; }
.planung__slot-kurs { left: 1px; font-size: 0.6875rem; font-weight: 700; }

/* -- Inspector ------------------------------------------------------------ */

/* Der Inspector ist eine Leiste über dem Raster: eine Zeile, die wächst, wenn eine
   Stunde gewählt ist, und sonst erklärt, wie man eine wählt. */
.planung__inspector {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex-wrap: wrap;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 0.75rem 1.125rem;
    min-height: 3.25rem;
}

.planung__inspector-felder {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1.5rem;
    flex: 1 1 auto;
    min-width: 0;
}

.planung__inspector-feld {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    min-width: 0;
}

.planung__inspector-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #94A3B8;
}

.planung__inspector-wert {
    font-size: 0.875rem;
    color: #1E293B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.planung__inspector-zusatz {
    color: #64748B;
    font-size: 0.75rem;
}

.planung__inspector-notiz {
    font-size: 0.75rem;
    color: #1E40AF;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 999px;
    padding: 0.1875rem 0.625rem;
    white-space: nowrap;
}

.planung__inspector-icons {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
}

.planung__icon-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0.25rem 0.375rem;
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1;
}

.planung__icon-btn:hover {
    background: #F1F5F9;
    border-color: #CBD5E1;
}

.planung__icon-btn--aktiv {
    background: #DBEAFE;
    border-color: #93C5FD;
}

.planung__inspector-leer {
    color: #64748B;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.planung__inspector-leer strong {
    color: #334155;
    margin-right: 0.25rem;
}

@media (max-width: 1100px) {
    .planung__inspector-wert {
        white-space: normal;
    }
}

/* -- Kontrollleiste (Sprint 2) -------------------------------------------- */

.planung__kontrollleiste {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 10px;
    padding: 0.625rem 1rem;
    margin-bottom: 0.75rem;
}

.planung__kontrollleiste--ok {
    background: #F0FDF4;
    border-color: #BBF7D0;
}

.planung__kontroll-zahlen {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.planung__kontroll-zahl {
    font-weight: 600;
    font-size: 0.9375rem;
    white-space: nowrap;
}

.planung__kontroll-zahl--fehler { color: #B91C1C; }
.planung__kontroll-zahl--warnung { color: #92400E; }

.planung__konfliktliste {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    max-height: 14rem;
    overflow-y: auto;
    margin-bottom: 1rem;
}

.planung__konflikt {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid #F1F5F9;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    font-family: inherit;
    color: #334155;
    cursor: pointer;
}

.planung__konflikt:last-child { border-bottom: none; }
.planung__konflikt:hover { background: #F8FAFC; }

.planung__konflikt-marke { color: #CA8A04; flex-shrink: 0; }
.planung__konflikt--fehler .planung__konflikt-marke { color: #DC2626; }

/* Meldung und Zähler teilen sich eine Zeile: links der Sprung ins Raster, rechts das
   Aufklappen der einzelnen Stunden. Zwei Knöpfe, weil einer nicht im anderen stecken darf. */
.planung__konfliktzeile {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #F1F5F9;
}

.planung__konfliktzeile:last-child { border-bottom: none; }
.planung__konfliktzeile .planung__konflikt { border-bottom: none; }

.planung__konflikt-zaehler {
    flex-shrink: 0;
    background: #F1F5F9;
    border: none;
    border-radius: 999px;
    align-self: center;
    margin-right: 0.625rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    color: #475569;
    cursor: pointer;
    white-space: nowrap;
}

.planung__konflikt-zaehler:hover { background: #E2E8F0; color: #1E293B; }

/* Die einzelnen Stunden einer gebündelten Meldung — eingerückt, damit die Zugehörigkeit
   ohne Linie erkennbar bleibt. */
.planung__konflikt--vorkommen {
    padding-left: 2rem;
    font-size: 0.8125rem;
    color: #64748B;
    background: #FCFDFE;
}

/* Konfliktstunden fallen im Raster auf, ohne die Fachfarbe zu verlieren. */
.planung__slot--konflikt {
    box-shadow: 0 0 0 2px #DC2626;
}

.planung__badge--hart {
    background: #FEE2E2;
    color: #B91C1C;
}

/* -- Raum-Sicht (Sprint 3) ------------------------------------------------ */

.planung__raum-auslastung {
    margin-left: auto;
    font-size: 0.6875rem;
    font-weight: 500;
    color: #64748B;
}

/* -- Generierung (Sprint 4) ----------------------------------------------- */

.planung__regler {
    display: grid;
    grid-template-columns: 14rem 1fr 2rem;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.375rem;
}

.planung__regler-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
}

/* Ein Regler ohne Erklärung wird nicht angefasst — und ein nicht angefasster Regler
   erzeugt einen Plan, der nicht zur Schule passt. */
.planung__regler-erklaerung {
    margin: 0 0 0.875rem;
    padding-left: 0.125rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: #64748B;
    max-width: 44rem;
}

.planung__regler-wert {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #2563EB;
    text-align: right;
}

.planung__fortschritt {
    margin-bottom: 1rem;
}

.planung__fortschritt-balken {
    height: 0.5rem;
    background: #E2E8F0;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.375rem;
}

.planung__fortschritt-fuellung {
    height: 100%;
    background: #2563EB;
    transition: width 300ms ease;
}

/* ==========================================================================
   JAHRESANSICHT — KLASSEN ÜBER KALENDERWOCHEN

   Das Wochenraster ist ein CSS-Grid mit einer Zelle je Stunde. Hier geht das
   nicht: Ein Balken läuft über mehrere Wochen, und zwei Epochen derselben
   Klasse können sich überlagern. Deshalb ist jede Klassenzeile ein Flex-Paar
   aus klebender Namensspalte und einem Stapel von Spuren; jede Spur ist ein
   eigenes Grid über alle Wochen, in dem die Balken per grid-column sitzen.
   ========================================================================== */

.planung__jahr-wrap {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    overflow: auto;
    max-height: calc(100vh - 24rem);
}

.planung__jahr {
    --kw-breite: 2rem;
    --klassen-breite: 10rem;
    min-width: max-content;
}

.planung__jahr-kopf,
.planung__jahr-zeile {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #E2E8F0;
}

.planung__jahr-kopf {
    position: sticky;
    top: 0;
    z-index: 4;
    background: #F8FAFC;
}

.planung__jahr-zeile:nth-child(even) {
    background: #FCFCFD;
}

.planung__jahr-klasse {
    position: sticky;
    left: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.375rem;
    /* Anders als im Wochenraster ist das hier ein Flex-Layout: Die Breite muss für alle
       Zeilen dieselbe sein, sonst franst die klebende Spalte aus. Sie ist deshalb fest —
       und der Name kürzt sich (.planung__jahr-name). */
    flex: 0 0 var(--klassen-breite);
    width: var(--klassen-breite);
    padding: 0.375rem 0.5rem 0.375rem 0.75rem;
    background: inherit;
    border-right: 1px solid #E2E8F0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1E293B;
}

.planung__jahr-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.planung__jahr-zeile .planung__jahr-klasse {
    background: #FFFFFF;
}

.planung__jahr-zeile:nth-child(even) .planung__jahr-klasse {
    background: #FCFCFD;
}

.planung__jahr-klasse--kopf {
    background: #F8FAFC;
    color: #475569;
    font-size: 0.75rem;
}

.planung__jahr-plus {
    border: 1px solid #CBD5E1;
    background: #FFFFFF;
    color: #475569;
    border-radius: 6px;
    width: 1.375rem;
    height: 1.375rem;
    line-height: 1;
    font-size: 0.875rem;
    cursor: pointer;
}

.planung__jahr-plus:hover:not(:disabled) {
    background: #EFF6FF;
    border-color: #2563EB;
    color: #2563EB;
}

.planung__jahr-plus:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.planung__jahr-spuren {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 0;
    flex: 1 0 auto;
}

.planung__jahr-spur {
    display: grid;
    grid-template-columns: repeat(var(--wochen), var(--kw-breite));
    min-height: 1.5rem;
    /* Die Wochenraster-Linien liegen im Hintergrund, nicht als eigene Elemente:
       52 leere Zellen je Spur wären mehrere tausend DOM-Knoten. */
    background-image: repeating-linear-gradient(
        to right,
        transparent 0,
        transparent calc(var(--kw-breite) - 1px),
        #EEF2F7 calc(var(--kw-breite) - 1px),
        #EEF2F7 var(--kw-breite));
}

.planung__jahr-spur--kopf {
    background-image: none;
    min-height: 2.5rem;
}

.planung__jahr-kw {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.125rem;
    padding-bottom: 0.25rem;
    border-right: 1px solid #EEF2F7;
    font-size: 0.625rem;
    color: #64748B;
}

.planung__jahr-kw--monat {
    border-left: 2px solid #CBD5E1;
}

.planung__jahr-monat {
    font-weight: 700;
    color: #334155;
    font-size: 0.625rem;
}

.planung__jahr-kwnr {
    font-variant-numeric: tabular-nums;
}

.planung__jahr-balken {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: none;
    border-radius: 5px;
    margin: 0 1px;
    padding: 0 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    background: var(--fach-bg, #64748B);
    color: var(--fach-fg, #FFFFFF);
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.planung__jahr-balken:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
}

/* Blockwoche: gestreift — die Gruppe ist da, ein Fach steht nicht dahinter. */
.planung__jahr-balken--block {
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.25) 0,
        rgba(255, 255, 255, 0.25) 4px,
        transparent 4px,
        transparent 8px);
}

/* Frei verteilt: nur umrandet — die Lage steht noch nicht fest. */
.planung__jahr-balken--frei {
    background: transparent;
    color: #334155;
    border: 1.5px dashed var(--fach-bg, #64748B);
}

.planung__jahr-balken-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.planung__chip--klein {
    min-width: auto;
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
    gap: 0.25rem;
    border: none;
    cursor: pointer;
    margin: 0 0.25rem 0.25rem 0;
}

.planung__chip-zusatz {
    font-weight: 500;
    opacity: 0.85;
    font-variant-numeric: tabular-nums;
}

/* Epochenstunde im Wochenraster: gehört der Jahresansicht, hier nicht beweglich. */
.planung__slot--epoche {
    cursor: default;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}

/* ==========================================================================
   AUSLASTUNG ÜBER DEM RASTER

   Die Zelle trägt nur die Zahl (`--heat`, 0 bis 1), die Farbe entsteht hier.
   So bleibt die Gestaltung an einer Stelle, und ein anderer Farbverlauf ist
   eine CSS-Änderung statt einer Rechnung im Code.
   ========================================================================== */

/* Die Auslastung sitzt in der Spaltenüberschrift, nicht in den Zellen: In einer gefüllten
   Zelle liegt die Stundenkachel über dem gesamten Hintergrund — dort wäre die Farbe nicht
   zu sehen. Blau statt Rot, weil Rot im Modul den Konflikten gehört. */
.planung__raster-stunde--heat {
    background-color: rgba(37, 99, 235, calc(var(--heat, 0) * 0.85));
    color: #0F172A;
}

/* Ab etwa der Hälfte trägt der Hintergrund keinen dunklen Text mehr. */
.planung__raster-stunde--heat[style*="--heat: 0.6"],
.planung__raster-stunde--heat[style*="--heat: 0.7"],
.planung__raster-stunde--heat[style*="--heat: 0.8"],
.planung__raster-stunde--heat[style*="--heat: 0.9"],
.planung__raster-stunde--heat[style*="--heat: 1.00"] {
    color: #FFFFFF;
}

.planung__raster-last {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

/* Eine Freistunde mitten im Klassentag. Sie ist leer, also ist der Hintergrund frei —
   hier sieht man die Markierung tatsächlich. */
.planung__zelle--hohl {
    background-color: #FEF3C7 !important;
    box-shadow: inset 0 0 0 1px #FCD34D;
}

.planung__heat-legende {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.75rem;
    font-size: 0.75rem;
    color: #475569;
}

.planung__heat-probe {
    display: inline-block;
    width: 1.25rem;
    height: 0.75rem;
    border-radius: 3px;
    border: 1px solid #E2E8F0;
    background-color: rgba(37, 99, 235, calc(var(--heat, 0) * 0.85));
}

.planung__heat-probe--hohl {
    background-color: #FEF3C7;
    border-color: #FCD34D;
}

/* ==========================================================================
   ENTWURFSVERGLEICH
   ========================================================================== */

.planung__vergleich-kopf {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}

.planung__vergleich-karte {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 0.75rem 1rem;
}

.planung__vergleich-name {
    font-weight: 700;
    color: #1E293B;
}

.planung__vergleich-zahl {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2563EB;
    font-variant-numeric: tabular-nums;
}

.planung__vergleich-mitte {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    max-width: 22rem;
    text-align: center;
}

.planung__vergleich-pfeil {
    font-size: 1.5rem;
    color: #94A3B8;
}

.planung__vergleich-zahlen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.planung__badge--links {
    background: #FEF3C7;
    color: #92400E;
}

.planung__badge--rechts {
    background: #DBEAFE;
    color: #1E40AF;
}

/* Ein Balken je Klasse: Wie viel bleibt, wie viel wird umbesetzt, wie viel wandert. */
.planung__vergleich-balken {
    display: flex;
    height: 0.5rem;
    border-radius: 999px;
    overflow: hidden;
    background: #F1F5F9;
}

.planung__vergleich-balken-teil {
    height: 100%;
}

.planung__vergleich-balken-teil--gleich { background: #10B981; }
.planung__vergleich-balken-teil--um     { background: #F59E0B; }
.planung__vergleich-balken-teil--weg    { background: #EF4444; }

.planung__raum-auslastung--warn {
    color: #B45309;
    font-weight: 700;
}