/* Slide Rechte. Oben ausgerichtet: die Texte sind verschieden lang, zentriert
   wuerde der Block bei jeder Auswahl springen. Flach, ohne Zierrat. */

.rechtebody { display: flex; flex-direction: column; gap: var(--space-4); height: 100%; justify-content: flex-start; }
.rechtebody > * { flex-shrink: 0; }

.rechtebody .erklaerung { margin: 0; font-size: clamp(.95rem, 1.3vw, 1.4rem); line-height: 1.4; font-weight: 700; color: var(--color-text-primary); max-width: 80ch; }

.rechtebody .wahl { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.rechtebody .wahl label { font-weight: 700; color: var(--color-text-primary); }
.rechtebody .wahl select { font: inherit; padding: .4em .7em; border: 1px solid var(--color-text-primary); background: var(--color-surface); color: var(--color-text-primary); max-width: 100%; }
.rechtebody .wahl select:focus-visible { outline: 2px solid var(--color-text-primary); outline-offset: 2px; }

/* Die Auflagen. Feste Spaltenbreite, damit die Werte an derselben Stelle
   stehen bleiben, wenn die Auswahl wechselt. */
.auflagen { display: grid; grid-template-columns: 22ch 1fr; gap: .25em var(--space-4); margin: 0; align-content: start; }
.auflagen dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); }
.auflagen dd { margin: 0; font-size: clamp(.85rem, 1vw, 1.1rem); line-height: 1.35; color: var(--color-text-primary); }
.auflagen dd.noetig { font-weight: 700; }

.stationen { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); align-items: start; }

.station { position: relative; padding-top: var(--space-3); border-top: 2px solid var(--color-text-primary); }
.station h3 { margin: 0; font-size: clamp(.95rem, 1.2vw, 1.25rem); color: var(--color-text-primary); }
.station .rolle { margin: 0 0 .5em; font-size: .8rem; color: var(--color-text-muted); }
.station .zeile { display: grid; grid-template-columns: 11ch 1fr; gap: var(--space-2); margin-top: .35em; }
.station .zeilentitel { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); line-height: 1.5; }
.station .zeilentext { font-size: clamp(.72rem, .85vw, .95rem); line-height: 1.35; color: var(--color-text-primary); }

/* Die Richtung zwischen den Stationen, ohne eigenes Markup. */
.station + .station::before {
    content: '';
    position: absolute;
    left: calc(var(--space-5) * -1);
    top: -2px;
    width: var(--space-5);
    height: 2px;
    background: var(--color-border);
}

@media (max-width: 800px) {
    .stationen { grid-template-columns: minmax(0, 1fr); }
    .auflagen { grid-template-columns: minmax(0, 1fr); }
    .auflagen dd { margin-bottom: .5em; }
    .station + .station::before { display: none; }
    .station .zeilentext { overflow-wrap: anywhere; }
}