/* Terminraster: sieben Plätze, drei Donnerstage. Der Baustein beantwortet
   genau eine Frage - wenn ich diesen Platz nehme, wann bin ich im Monat
   gebunden. Sichtbar sind deshalb nur die drei Termine des gewählten
   Platzes, nicht alle 21. Träger sind Radiofelder wie beim Stufenregler;
   wahl.js hält die Seite dabei an ihrem Platz.
   Siehe steuerung/64-terminraster.yaml. Nur vorhandene Custom Properties. */

.termine {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: var(--space-sm);
    margin-block: var(--space-2xl);
}

/* Die Felder tragen den Zustand und sind nicht zu sehen. Aus dem Sichtfeld
   geschoben statt display none, sonst wären sie für Vorleseprogramme und
   Tastatur verloren; absolut gestellt im eigenen Block, damit der Fokus
   nicht an den Seitenanfang wandert. */
.termine > input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.termin-platz {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-primary-light);
    border-radius: var(--radius-md);
    text-align: center;
    font-size: var(--font-size-sm);
    line-height: 1.3;
    color: var(--color-text-light);
    cursor: pointer;
    transition: all var(--transition-base);
}

.termin-platz:hover {
    border-color: var(--color-secondary);
}

.termin-stand {
    display: block;
}

/* Ein vergebener Platz bleibt anklickbar: erst dadurch ist zu sehen,
   welche Zeiten er bindet. */
.termin-platz.belegt {
    border-style: dashed;
}

.termin-platz.belegt .termin-stand {
    text-decoration: line-through;
}

/* Sieben Regeln statt einer Schleife im Skript, wie beim Stufenregler. */
.termine > input:nth-of-type(1):checked ~ .termin-platz:nth-of-type(1),
.termine > input:nth-of-type(2):checked ~ .termin-platz:nth-of-type(2),
.termine > input:nth-of-type(3):checked ~ .termin-platz:nth-of-type(3),
.termine > input:nth-of-type(4):checked ~ .termin-platz:nth-of-type(4),
.termine > input:nth-of-type(5):checked ~ .termin-platz:nth-of-type(5),
.termine > input:nth-of-type(6):checked ~ .termin-platz:nth-of-type(6),
.termine > input:nth-of-type(7):checked ~ .termin-platz:nth-of-type(7) {
    /* Weiße Schrift auf diesem Ton trägt 4.80; auf #c99e67 nur 2.45. */
    background: var(--color-secondary-text);
    border-color: var(--color-secondary-text);
    color: var(--color-white);
}

.termine > input:focus-visible ~ .termin-platz {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* Drei Spalten, eine je Donnerstag. Die Kopfzeilen stehen immer, die
   Karten kommen mit der Wahl. */
.termin-plan {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

.termin-tag {
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--color-primary-light);
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
}

.tag-1 { grid-column: 1; }
.tag-2 { grid-column: 2; }
.tag-3 { grid-column: 3; }

.termin {
    display: none;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
    line-height: 1.3;
}

.termin-zeit {
    display: block;
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
}

/* Die Platznummer gehört ins Markup, aber nicht ins Bild: im Kalender
   steht, mit wem der Termin ist. Für Vorleseprogramme bleibt sie hörbar. */
.termin-nummer {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.termin.belegt {
    background: transparent;
    border: 1px dashed var(--color-primary-light);
    color: var(--color-text-muted);
}

.termine > input:nth-of-type(1):checked ~ .termin-plan .platz-1,
.termine > input:nth-of-type(2):checked ~ .termin-plan .platz-2,
.termine > input:nth-of-type(3):checked ~ .termin-plan .platz-3,
.termine > input:nth-of-type(4):checked ~ .termin-plan .platz-4,
.termine > input:nth-of-type(5):checked ~ .termin-plan .platz-5,
.termine > input:nth-of-type(6):checked ~ .termin-plan .platz-6,
.termine > input:nth-of-type(7):checked ~ .termin-plan .platz-7 {
    display: block;
}

/* Der Hinweis steht, solange keine Wahl getroffen ist, und geht dann weg. */
.termin-hinweis {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.termine:has(> input:checked) .termin-hinweis {
    display: none;
}

@media (max-width: 34rem) {
    .termine {
        grid-template-columns: 1fr 1fr;
    }
}