/* Stufenregler: fünf Fassungen desselben Sachverhalts, von knapp bis
   ausführlich. Das Verhalten steckt in den Radiofeldern des Browsers
   selbst, nicht in einem Skript; damit ist es ohne JavaScript bedienbar
   und mit der Tastatur von Haus aus zugänglich.
   Nur vorhandene Custom Properties. */

.stufen {
    margin-block: var(--space-2xl);
}

/* Die Felder tragen den Zustand, sind aber nicht zu sehen: sichtbar sind
   die Beschriftungen. Ausserhalb des Sichtfeldes statt display none,
   sonst wären sie für Vorleseprogramme und Tastatur verloren. */
.stufen > input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.stufen-regler {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
}

.stufen-regler label {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border: 1px solid var(--color-primary-light);
    border-radius: var(--radius-full);
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-base);
}

.stufen-regler label:hover {
    border-color: var(--color-secondary);
}

.stufen-hinweis {
    margin-bottom: var(--space-md);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

/* Der Stand des Schiebers wird genannt, nicht gezeigt: die Stufe selbst
   steht ja sichtbar darunter. Nicht display none, sonst lesen ihn
   Vorleseprogramme auch nicht. */
.stufen-stand {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.stufe {
    display: none;
}

/* Je Feld eine Regel: das gewählte Feld zeigt seine Stufe und färbt
   seine Beschriftung. Fünf Regeln statt einer Schleife im Skript. */
/* Nachfahre statt direktes Kind und nth-of-type statt nth-child: die
   Stufen koennen im Markup von einer Huelle umgeben sein, und zwischen
   ihnen kann anderes stehen. Die Regel darf daran nicht scheitern. */
.stufen > input:nth-of-type(1):checked ~ .stufen-inhalt .stufe:nth-of-type(1),
.stufen > input:nth-of-type(2):checked ~ .stufen-inhalt .stufe:nth-of-type(2),
.stufen > input:nth-of-type(3):checked ~ .stufen-inhalt .stufe:nth-of-type(3),
.stufen > input:nth-of-type(4):checked ~ .stufen-inhalt .stufe:nth-of-type(4),
.stufen > input:nth-of-type(5):checked ~ .stufen-inhalt .stufe:nth-of-type(5) {
    display: block;
}

.stufen > input:nth-of-type(1):checked ~ .stufen-regler label:nth-of-type(1),
.stufen > input:nth-of-type(2):checked ~ .stufen-regler label:nth-of-type(2),
.stufen > input:nth-of-type(3):checked ~ .stufen-regler label:nth-of-type(3),
.stufen > input:nth-of-type(4):checked ~ .stufen-regler label:nth-of-type(4),
.stufen > input:nth-of-type(5):checked ~ .stufen-regler label:nth-of-type(5) {
    /* Weisse Schrift auf #c99e67 trug nur 2.45; auf diesem Ton 4.80. */
    background: var(--color-secondary-text);
    border-color: var(--color-secondary-text);
    color: var(--color-white);
}

/* Die Selbsteinschaetzung nennt die Zustaende statt blosser Zahlen: bei
   ihr traegt der Zustand die Bedeutung, nicht die Ziffer. */
.lage-regler {
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
}

.lage-regler label {
    width: auto;
    height: auto;
    padding: var(--space-xs) var(--space-lg);
    border-radius: var(--radius-full);
    line-height: 1.4;
}

/* Das Symbol des Zustands, in seiner gedachten Groesse und mittig. */
.lage-bild {
    text-align: center;
    margin-bottom: var(--space-md);
}

/* Die Groesse gehoert hierher, nicht in den Inhalt: dort stand sie 14 mal
   als width und height am Bild. 9.375rem sind dieselben 150px wie bisher.
   Die Hoehe folgt dem Seitenverhaeltnis der Datei und kann damit nichts
   verzerren, auch wenn ein Symbol einmal nicht quadratisch ist. */
.lage-bild img {
    width: 9.375rem;
    height: auto;
}

.lage .stufe h2,
.lage .stufe h3 {
    text-align: center;
}

.lage .stufe h2 {
    margin-top: 0;
}

.lage .stufe h2::after {
    margin-inline: auto;
}

/* Die Tastaturbedienung muss sichtbar sein. */
.stufen > input:focus-visible ~ .stufen-regler label {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* Der Fassungsregler ist ein Schieber statt einer Knopfreihe: gefragt ist
   nicht eine Ziffer, sondern wie weit man geschoben hat. Bahn und Griff
   entstehen aus denselben Farben wie die Knoepfe. Traeger bleiben die
   Radiofelder; jede Beschriftung ist ein Abschnitt der Bahn. */
.schieber .stufen-regler {
    position: relative;
    max-width: 20rem;
    margin-inline: auto;
    gap: 0;
    touch-action: pan-y;
}

.schieber .stufen-regler::before,
.schieber .stufen-regler::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    height: 0.35rem;
    border-radius: var(--radius-full);
    transform: translateY(-50%);
    pointer-events: none;
}

.schieber .stufen-regler::before {
    right: 0;
    background: var(--color-primary-light);
}

.schieber .stufen-regler::after {
    background: var(--color-secondary);
    transition: width var(--transition-base);
}

/* Die Ziffer bleibt im Text, damit Vorleseprogramme die Stufe nennen; zu
   sehen ist sie nicht mehr. */
.schieber .stufen-regler label {
    position: relative;
    flex: 1;
    width: auto;
    height: 2rem;
    border: 0;
    border-radius: 0;
    font-size: 0;
}

/* Je Stufe eine Regel: wie weit die Bahn gefuellt ist und wo der Griff
   sitzt. Der Griff sitzt in der Mitte des gewaehlten Abschnitts. */
.schieber > input:nth-of-type(1):checked ~ .stufen-regler::after { width: 10%; }
.schieber > input:nth-of-type(2):checked ~ .stufen-regler::after { width: 30%; }
.schieber > input:nth-of-type(3):checked ~ .stufen-regler::after { width: 50%; }
.schieber > input:nth-of-type(4):checked ~ .stufen-regler::after { width: 70%; }
.schieber > input:nth-of-type(5):checked ~ .stufen-regler::after { width: 90%; }

.schieber > input:nth-of-type(1):checked ~ .stufen-regler label:nth-of-type(1),
.schieber > input:nth-of-type(2):checked ~ .stufen-regler label:nth-of-type(2),
.schieber > input:nth-of-type(3):checked ~ .stufen-regler label:nth-of-type(3),
.schieber > input:nth-of-type(4):checked ~ .stufen-regler label:nth-of-type(4),
.schieber > input:nth-of-type(5):checked ~ .stufen-regler label:nth-of-type(5) {
    background: none;
}

.schieber > input:nth-of-type(1):checked ~ .stufen-regler label:nth-of-type(1)::after,
.schieber > input:nth-of-type(2):checked ~ .stufen-regler label:nth-of-type(2)::after,
.schieber > input:nth-of-type(3):checked ~ .stufen-regler label:nth-of-type(3)::after,
.schieber > input:nth-of-type(4):checked ~ .stufen-regler label:nth-of-type(4)::after,
.schieber > input:nth-of-type(5):checked ~ .stufen-regler label:nth-of-type(5)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.4rem;
    height: 1.4rem;
    background: var(--color-secondary);
    border: 2px solid var(--color-white);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    transform: translate(-50%, -50%);
}

/* Beim Schieber umfasst der Rahmen die ganze Bahn, nicht jeden Abschnitt. */
.schieber > input:focus-visible ~ .stufen-regler label {
    outline: none;
}

.schieber > input:focus-visible ~ .stufen-regler {
    outline: 2px solid var(--color-secondary);
    outline-offset: 6px;
    border-radius: var(--radius-full);
}