/*
 * Oberfläche der Trainings-App.
 *
 * Die Farben kommen aus Franks Studio: dunkler Grundton nach dem
 * grau-blauen Teppich, warmes Off-White nach den ockerfarbenen Wänden,
 * Gelb nach den Gerätenummern-Schildern, Orange nach dem Bankvinyl.
 * Das Gelb heißt "hier tippen", das Orange heißt "Steigerung fällig".
 * Beide sonst nirgends verwenden, sie verlieren sonst ihre Bedeutung.
 *
 * Bedient wird mit dem Daumen, oft verschwitzt, morgens um sieben.
 * Daher: Hauptaktionen unten, Touch-Ziele ab 56px, keine feinen Ziele.
 */

:root {
    --raum:        #1b1e24;
    --raum-hoch:   #262a32;
    --linie:       #3a404b;
    --schrift:     #e8e6e1;
    --schrift-leise: #949aa5;
    --tag:         #f2b705;
    --vinyl:       #c8562b;

    /* Die Pausen-Farbe. Kein dritter Akzent, sie tritt nur im Pausen-Panel
       auf und sagt dort "warte". Bewusst dunkel: die Pause dauert zwei
       Minuten, ein leuchtender Block über ein Drittel des Bildschirms
       blendet morgens um sieben. Ein Gegenstück für "los" braucht es
       nicht — bei null ist das Panel weg. */
    --ruhe:        #4e2a2c;
    --ruhe-linie:  #6d3a3c;
    --ruhe-mini:   #c49b98;

    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

    /*
     * Schriftskala. Vorher standen 21 verschiedene Größen im Stylesheet,
     * elf davon innerhalb von zehn Pixeln — jede in dem Moment erfunden,
     * in dem sie gebraucht wurde. Deshalb konnte eine Abschnitts-
     * überschrift auf 12px landen, während der Fließtext daneben auf 17px
     * stand: Es gab nichts, woran sich das hätte brechen können.
     *
     * Neun Stufen, Verhältnis rund 1,2. Neue Größen werden nicht erfunden,
     * sondern aus dieser Liste gewählt. Wer eine Zwischengröße braucht,
     * braucht sie in aller Regel nicht.
     *
     * Eine bewusste Ausnahme: die Zahl im Pausen-Panel. Sie ist keine
     * Schrift im Fließtext, sondern eine Anzeige, die man aus zwei Metern
     * lesen soll, und skaliert deshalb mit der Bildschirmbreite.
     */
    --s-marke:  11px;   /* Versalien-Marken, Kleinstangaben */
    --s-klein:  13px;   /* Nebenzeilen, Datenzeilen */
    --s-neben:  15px;   /* Sekundärtext, leise Knöpfe */
    --s-text:   17px;   /* Fließtext */
    --s-betont: 20px;   /* Knöpfe, Eingabefelder, Abschnittsüberschriften */
    --s-zahl:   24px;   /* hervorgehobene Zahl auf der Übungskachel */
    --s-titel:  30px;   /* Seitenüberschrift */
    --s-gross:  36px;   /* die Zahl am Regler */
    --s-riesig: 44px;   /* der Trainingstag auf der Startseite */

    --rand: 20px;
    --ziel: 56px;
    /* Gebaut fürs Handy. Am Mac soll sich der Inhalt nicht auf
       Bildschirmbreite ziehen, sondern die Handybreite behalten. */
    --breite: 460px;
}

.kopf,
.tor__mitte,
.tor__fuss,
.inhalt {
    width: 100%;
    max-width: var(--breite);
    margin-inline: auto;
}

* { box-sizing: border-box; }

/* Muss sein, sonst schlägt jede Klasse mit display-Angabe die Browser-Regel
   für [hidden], weil eine Klasse spezifischer ist als ein Attribut. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    display: flex;
    flex-direction: column;
    margin: 0;
    min-height: 100svh;
    background: var(--raum);
    color: var(--schrift);
    font: var(--s-text)/1.5 var(--sans);
    -webkit-font-smoothing: antialiased;
    /* Kein Gummiband-Scrollen und kein Doppeltipp-Zoom im Studio. */
    overscroll-behavior-y: none;
    touch-action: manipulation;
}

/* ---------- Wiederkehrende Teile ---------- */

/* Die Geräteplakette, nachempfunden den gelben Nummernschildern im Studio. */
.plakette {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 4px;
    background: var(--tag);
    color: #1b1e24;
    font: 600 var(--s-neben)/1.2 var(--mono);
    letter-spacing: 0.04em;
}

.wortmarke {
    font: 600 var(--s-neben)/1 var(--mono);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--schrift);
}

.kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(env(safe-area-inset-top) + 18px) var(--rand) 18px;
}

/*
 * Fußzeile mit dem Abmelden-Knopf. Ganz unten, klein und in der leisen
 * Schriftfarbe: eine Notausfahrt, keine Hauptaktion. Der Strich darüber
 * und der Abstand trennen ihn von dem, was in der Daumenzone wirklich
 * gedrückt wird.
 */
.fuss {
    width: 100%;
    max-width: var(--breite);
    margin-inline: auto;
    padding: 28px var(--rand) calc(env(safe-area-inset-bottom) + 20px);
    border-top: 1px solid var(--linie);
}

.fuss__knopf {
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--schrift-leise);
    font: var(--s-neben)/1 var(--sans);
    cursor: pointer;
}

/* Angefragt: dieselbe Sprache wie das Löschen eines Fotos. Der Text wird
   deutlicher, der Knopf bleibt schmal. */
.fuss__knopf.ist-scharf { color: var(--schrift); }

/* ---------- Bedienelemente ---------- */

.knopf {
    display: block;
    width: 100%;
    min-height: 64px;
    padding: 0 20px;
    border: 0;
    border-radius: 12px;
    background: var(--tag);
    color: #1b1e24;
    font: 600 var(--s-betont)/1 var(--sans);
    cursor: pointer;
}

.knopf:active { transform: translateY(1px); }
.knopf:disabled { opacity: 0.5; cursor: default; }

.knopf--leise {
    min-height: var(--ziel);
    background: transparent;
    border: 1px solid var(--linie);
    color: var(--schrift);
    font-size: var(--s-text);
}

:where(a, button, input):focus-visible {
    outline: 3px solid var(--tag);
    outline-offset: 3px;
}

/* ---------- Anmeldung ---------- */

/* flex statt min-height: 100svh. Der Body ist selbst eine Flex-Spalte,
   und die volle Bildschirmhöhe hier drin ergäbe zusammen mit dem Kopf
   mehr als eine Bildschirmhöhe. Die Seite scrollte dann, und der mittig
   gesetzte Inhalt rutschte nach unten aus dem Bild. */
.tor {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.tor__mitte {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 var(--rand);
}

.tor__titel {
    margin: 0 0 6px;
    font-size: var(--s-titel);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.tor__hinweis {
    margin: 0 0 28px;
    color: var(--schrift-leise);
    font: var(--s-neben)/1.5 var(--mono);
}

/* Kleine Versalien-Beschriftung, dieselbe Sprache wie die Geräteschilder. */
.mini {
    display: block;
    margin-bottom: 8px;
    color: var(--schrift-leise);
    font: 600 var(--s-klein)/1 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/*
 * Die Höhe kommt aus der Polsterung, nicht aus min-height, und
 * line-height steht auf normal.
 *
 * iOS Safari zentriert den Text in einem Eingabefeld nicht, wenn die Höhe
 * über min-height entsteht und line-height auf 1 steht: Er klebt dann am
 * oberen Rand, und ein Datumsfeld bringt zusätzlich seine eigene Höhe mit,
 * sodass zwei Felder nebeneinander verschieden hoch werden. Mit Polsterung
 * ergibt sich die Höhe aus dem Inhalt, und die Mitte stimmt überall.
 */
.feld {
    width: 100%;
    padding: 17px 16px;
    border: 1px solid var(--linie);
    border-radius: 12px;
    background: var(--raum-hoch);
    color: var(--schrift);
    font-family: var(--mono);
    font-size: var(--s-betont);
    line-height: normal;
    letter-spacing: 0.1em;
}

.feld:focus {
    border-color: var(--tag);
    outline: none;
}

.fehler {
    min-height: 22px;
    margin: 12px 0 0;
    color: var(--vinyl);
    font: var(--s-neben)/1.4 var(--sans);
}

/*
 * Bestätigung, wenn etwas geklappt hat.
 *
 * Kein Grün: Gelb heißt "hier tippen", Orange heißt "Steigerung fällig",
 * und ein dritter Akzent allein dafür, dass etwas gutgegangen ist, wäre
 * einer zu viel. Sie steht an derselben Stelle wie die Fehlermeldung und
 * unterscheidet sich von ihr durch die Farbe der Schrift.
 *
 * Bewusst ohne Kasten: Mit Rahmen, Fläche und Rundung sah sie aus wie ein
 * viertes, leeres Eingabefeld unter den dreien darüber.
 */
.quittung {
    margin: 12px 0 0;
    color: var(--schrift);
    font: 600 var(--s-neben)/1.4 var(--sans);
}

.tor__fuss {
    padding: 0 var(--rand) calc(env(safe-area-inset-bottom) + 24px);
}

/* ---------- Start ---------- */

.inhalt {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0 var(--rand) calc(env(safe-area-inset-bottom) + 24px);
}

.leer {
    margin-top: 8px;
    padding: 28px 22px;
    border: 1px dashed var(--linie);
    border-radius: 14px;
}

.leer__titel {
    margin: 0 0 10px;
    font-size: var(--s-betont);
    font-weight: 600;
}

.leer__text {
    margin: 0;
    color: var(--schrift-leise);
    line-height: 1.6;
}

.schritte {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    color: var(--schrift-leise);
    font: var(--s-neben)/1.9 var(--mono);
}

.schritte li::before {
    content: "□ ";
    color: var(--tag);
}

/* ---------- Mein Plan ----------
 *
 * Gegenstück zum Studio-Modus: hier wird zu Hause geplant, nicht zwischen
 * zwei Sätzen getippt. Darf dichter sein und liest sich als Planblatt,
 * nach Trainingstag gruppiert, Zahlen in einer Spalte untereinander.
 */

.kopfknopf {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--linie);
    border-radius: 9px;
    background: transparent;
    color: var(--schrift);
    font: var(--s-neben)/1 var(--sans);
    cursor: pointer;
}

.kopfknopf:disabled {
    opacity: 0.35;
    cursor: default;
}

.titelzeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 26px;
}

.titel {
    margin: 0;
    font-size: var(--s-titel);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.tag { margin-bottom: 34px; }

/*
 * Getippte Abschnittsmarke, wie auf einem Planblatt im Spind.
 *
 * Sie war lange 12px und damit die kleinste Schrift auf der Seite —
 * kleiner als jede Zeile darunter und um ein Vielfaches kleiner als die
 * Knöpfe. Eine Überschrift, die man erst suchen muss, ordnet nichts.
 * Jetzt 19px, dafür weniger gesperrt: eine Sperrung, die bei 12px
 * auflockert, reißt bei 19px die Wörter auseinander.
 */
.tag__kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--linie);
}

.tag__name {
    font: 600 var(--s-betont)/1.2 var(--mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--schrift);
}

.tag__zahl {
    font: var(--s-klein)/1 var(--mono);
    color: var(--schrift-leise);
}

.tag__kopf + * { margin-top: 14px; }

.tag__leer {
    margin: 14px 0 0;
    color: var(--schrift-leise);
    font-size: var(--s-neben);
    line-height: 1.5;
}

.zeile {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 68px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--linie);
}

/* Vorschaubild und Zeilentext sind zwei Ziele: das Bild vergrößert,
   der Text führt in die Übung. */
.zeile__foto {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 0;
    cursor: zoom-in;
}

.zeile__foto .kachel__bild {
    width: 56px;
    height: 56px;
    border-radius: 9px;
    object-fit: cover;
}

.zeile__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.zeile__text:active { opacity: 0.7; }

.zeile__name {
    font-size: var(--s-text);
    font-weight: 600;
}

.zeile__daten {
    font: var(--s-klein)/1.3 var(--mono);
    color: var(--schrift-leise);
}

/* Ohne Gerätenummer bleibt die Plakette leer statt zu verschwinden,
   damit die Namen in einer Spalte bleiben. */
.plakette--leer {
    background: transparent;
    border: 1px dashed var(--linie);
    color: var(--schrift-leise);
}

.zufuegen {
    width: 100%;
    min-height: var(--ziel);
    margin-top: 14px;
    border: 1px dashed var(--linie);
    border-radius: 12px;
    background: transparent;
    color: var(--schrift-leise);
    font: var(--s-neben)/1 var(--sans);
    cursor: pointer;
}

.zufuegen:active { color: var(--schrift); }

/* ---------- Verlauf ----------
 *
 * Die Linie trägt die Schriftfarbe, nicht Gelb und nicht Orange: beide
 * haben in dieser App eine feste Bedeutung und verlören sie als Datenfarbe.
 * Raster und Achsen bleiben zurückgenommen, damit die Linie die Aussage
 * trägt und nicht das Gitter.
 */

.verlauf { margin-bottom: 28px; }

/* Zwei gewollte Zeilen statt eines zufälligen Umbruchs: erst welche
   Einheit, dann was dabei herauskam. */
.verlauf__lese {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--linie);
}

.verlauf__datum {
    font: 600 var(--s-klein)/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--schrift-leise);
}

.verlauf__werte {
    font: var(--s-text)/1.4 var(--mono);
    color: var(--schrift);
}

.chart__kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 18px 0 2px;
}

.chart__kopf .mini { margin-bottom: 0; }

.chart__einheit {
    font: var(--s-marke)/1 var(--mono);
    color: var(--schrift-leise);
}

.chart {
    display: block;
    width: 100%;
    height: auto;
    touch-action: manipulation;
}

/*
 * Leseanleitung unter einem Diagramm, dessen Richtung nicht selbsterklärend
 * ist. Bislang nur die Unterstützungsmaschine: dort ist die fallende Kurve
 * die gute. Bewusst in Fließtextgröße und leise, nicht als Warnung.
 */
.chart__fuss {
    margin: 4px 0 0;
    color: var(--schrift-leise);
    font: var(--s-klein)/1.45 var(--sans);
}

.ch-linie {
    fill: none;
    stroke: var(--schrift);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.ch-raster {
    stroke: var(--linie);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.ch-kreuz {
    stroke: var(--schrift-leise);
    stroke-width: 1;
    stroke-dasharray: 2 3;
    vector-effect: non-scaling-stroke;
}

.ch-punkt {
    fill: var(--tag);
    stroke: var(--raum);
    stroke-width: 2;
}

.ch-achse {
    fill: var(--schrift-leise);
    font-family: var(--mono);
    font-size: var(--s-marke);
}

/* ---------- Editor ---------- */

.editor {
    padding: 20px 18px;
    margin-top: 14px;
    border: 1px solid var(--linie);
    border-radius: 14px;
    background: var(--raum-hoch);
}

.editor .mini { margin-top: 16px; }
.editor > .mini:first-child { margin-top: 0; }

/* Kein font-Kurzschreiber: der setzte line-height wieder auf 1 zurück. */
.feld--text {
    font-family: var(--sans);
    font-size: var(--s-text);
    letter-spacing: normal;
}

.paar, .drei {
    display: grid;
    gap: 12px;
}

.paar { grid-template-columns: 1fr 1fr; }
.drei { grid-template-columns: repeat(3, 1fr); }

/*
 * Felder nebeneinander werden gleich hoch, egal was drinsteht.
 *
 * Ein Datumsfeld bringt in WebKit ein eigenes Bedienelement mit eigener
 * Höhe mit und wurde dadurch 4px höher als das Textfeld daneben — in
 * Chrome nicht zu sehen, in Safari schon. Statt auf eine Pixelzahl zu
 * raten, die beim nächsten Systemupdate wieder falsch ist: die Spalte
 * streckt sich, das Feld füllt sie aus. Das höhere gibt die Höhe vor.
 */
.paar > div,
.drei > div {
    display: flex;
    flex-direction: column;
}

.paar > div > .feld,
.drei > div > .feld { flex: 1; }

.paar .mini, .drei .mini { margin-top: 16px; }

.hinweis {
    margin: 7px 0 0;
    color: var(--schrift-leise);
    font: var(--s-klein)/1.4 var(--mono);
}

.werkzeuge {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.werkzeuge .knopf {
    flex: 1;
    width: auto;
}

.loeschen {
    display: block;
    width: 100%;
    min-height: var(--ziel);
    margin-top: 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--schrift-leise);
    font: var(--s-neben)/1 var(--sans);
    cursor: pointer;
}

.loeschen--scharf {
    border: 1px solid var(--vinyl);
    color: var(--vinyl);
    font-weight: 600;
}

/* ---------- Schwerpunkte ----------
 *
 * Kein dritter Akzent: Gelb heißt "hier tippen", Orange heißt "Steigerung
 * fällig". Der aktive Zustand wird stattdessen invertiert.
 */

.prio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--ziel);
    border-bottom: 1px solid var(--linie);
}

.prio__name {
    font: var(--s-neben)/1 var(--mono);
    color: var(--schrift);
}

.schalter {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--linie);
    border-radius: 10px;
}

.schalter__teil {
    min-height: 38px;
    padding: 0 13px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--schrift-leise);
    font: var(--s-klein)/1 var(--sans);
    cursor: pointer;
}

.schalter__teil.ist-an {
    background: var(--schrift);
    color: var(--raum);
    font-weight: 600;
}

/*
 * Derselbe Schalter, aber als Gliederung einer ganzen Seite statt einer
 * Zeile: die Bereichswahl in den Einstellungen.
 *
 * Kein zweites Muster für dieselbe Frage. "Eins von zweien" sieht in
 * dieser App so aus, seit die Schwerpunkte es so machen; ein Reiter im
 * Stil einer fremden Bibliothek wäre eine zweite Bildsprache für
 * denselben Handgriff. Größer ist er trotzdem: hier wird er beim Betreten
 * der Seite gelesen und nicht beiläufig umgelegt.
 */
.schalter--breit {
    display: flex;
    width: 100%;
    margin-bottom: 28px;
}

.schalter--breit .schalter__teil {
    flex: 1;
    min-height: 48px;
    font-size: var(--s-neben);
}

/* ---------- Statusleiste des Puffers ----------
 *
 * Ohne dritte Farbe: Gelb heißt "hier tippen", Orange heißt "Steigerung
 * fällig". Der Puffer meldet sich über eine abgesetzte Fläche, nicht über
 * einen neuen Farbton. Nur eine echte Ablehnung durch den Server bekommt
 * das Orange, denn dann ist tatsächlich etwas schiefgegangen.
 */

.status {
    width: 100%;
    max-width: var(--breite);
    margin: 0 auto 16px;
    padding: 11px var(--rand);
    background: var(--raum-hoch);
    border-top: 1px solid var(--linie);
    border-bottom: 1px solid var(--linie);
    font: var(--s-klein)/1.45 var(--mono);
    color: var(--schrift-leise);
}

.status.ist-offline { color: var(--schrift); }

.status.ist-kaputt {
    border-color: var(--vinyl);
    color: var(--vinyl);
    font-weight: 600;
}

/* ---------- Start: welcher Tag ist dran ---------- */

/*
 * Ein Abschnitt der Startseite. Sie trug vorher vier gleich aussehende
 * Beschriftungen untereinander, ohne Linie und mit fast gleichen
 * Abständen — das las sich als ein einziger Textblock, und was zu was
 * gehörte, war nicht zu sehen. Jetzt dieselbe Abschnittsmarke wie unter
 * "Mein Plan": Versalien mit Strich darunter, davor viel Luft.
 */
.abschnitt { margin-bottom: 34px; }

.heute { margin-bottom: 34px; }

.heute__tag {
    margin: 10px 0 8px;
    font-size: var(--s-riesig);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.heute__zeile {
    margin: 0;
    color: var(--schrift-leise);
    font: var(--s-neben)/1.5 var(--mono);
}

.tagwahl__reihe {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.tagknopf {
    min-height: var(--ziel);
    padding: 0 18px;
    border: 1px solid var(--linie);
    border-radius: 12px;
    background: transparent;
    color: var(--schrift);
    font: var(--s-text)/1 var(--sans);
    cursor: pointer;
}

.tagknopf.ist-an {
    background: var(--schrift);
    border-color: var(--schrift);
    color: var(--raum);
    font-weight: 600;
}

.verweis {
    display: block;
    width: 100%;
    min-height: var(--ziel);
    border: 0;
    border-top: 1px solid var(--linie);
    background: transparent;
    color: var(--schrift-leise);
    font: var(--s-neben)/1 var(--sans);
    text-align: left;
    cursor: pointer;
}

/* Die Startseite füllt die Höhe, damit die Hauptaktion unten in der
   Daumenzone sitzt und nicht auf halber Höhe klebt. */
.start {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/*
 * Die Hauptaktion klebt am unteren Rand, solange darüber noch Seite ist.
 * Mit dem Rückblick wird die Startseite länger als der Bildschirm, und ein
 * Startknopf, den man erst herunterscrollen muss, ist keiner.
 *
 * sticky und nicht fixed: fixed bräuchte eine Ausgleichs-Polsterung am
 * Inhalt, die man bei jeder Layoutänderung nachziehen muss. Und am
 * Seitenende gibt sticky den Platz für "Abmelden" von selbst wieder frei.
 */
.fussleiste {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding-top: 20px;
    padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
    background: var(--raum);
}

/* Körpergewicht eintragen. Die Felder erben .paar aus dem
   Übungsformular, hier bleibt nur der Abstand zum Knopf und zur Liste. */
/*
 * Ein Formular innerhalb eines Abschnitts: Körpergewicht, Passwort.
 *
 * Der Abstand hängt am direkten Kind, nicht an jeder Beschriftung. Im
 * Gewichtsformular stehen Datum und Kilo nebeneinander in einem Raster;
 * dort setzt die Lücke des Rasters den Abstand, und ein margin-top an
 * denselben Beschriftungen schöbe sie in ihren Zellen nach unten.
 */
.formular { margin-bottom: 18px; }
.formular .knopf { margin-top: 16px; }
.formular > .mini { margin-top: 16px; }

/*
 * Das Datumsfeld soll aussehen wie das Feld daneben. iOS bringt dafür ein
 * eigenes Bedienelement mit eigener Höhe mit; ohne appearance:none ist das
 * Feld höher als sein Nachbar und der Wert sitzt woanders. Der Tipp öffnet
 * die Datumsauswahl trotzdem, die hängt nicht an der Darstellung.
 */
.feld[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    text-align: left;
}

.zeile--schmal { min-height: 44px; }

/*
 * "Übung zufügen" ist auf der Planseite ein Knopf wie jeder andere.
 * Er trägt nur weniger Gewicht als eine Hauptaktion, deshalb etwas
 * flacher. Die gestrichelte Fassung (.zufuegen) bleibt dem Studio, wo
 * "Noch einen Satz" eine Nebenhandlung neben den fertigen Sätzen ist.
 */
.knopf--zufuegen {
    min-height: var(--ziel);
    margin-top: 14px;
    font-size: var(--s-text);
}

/* ---------- Kalender ---------- */

.kal__steuer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.kal__zahl {
    font: var(--s-klein)/1 var(--mono);
    color: var(--schrift-leise);
}

.kal {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 20px;
}

.kal__kopf {
    padding-bottom: 4px;
    font: 600 var(--s-marke)/1 var(--mono);
    letter-spacing: 0.08em;
    color: var(--schrift-leise);
    text-align: center;
}

/*
 * Quadratische Felder über aspect-ratio: Sieben Spalten auf 390 Punkten
 * ergeben rund 44 Pixel, und ein Raster, dessen Zeilen unterschiedlich hoch
 * sind, liest sich nicht mehr als Monat.
 */
.kal__tag,
.kal__leer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    aspect-ratio: 1;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--schrift-leise);
    font: var(--s-neben)/1 var(--mono);
}

/*
 * Der trainierte Tag ist gefüllt, nicht nur umrandet. Beim Blick auf den
 * Monat zählt das Muster aus Blöcken, und ein Rahmen verschwindet darin.
 * Kein Gelb: das heißt in dieser App "hier tippen", und hier ist jeder
 * Tag antippbar.
 */
.kal__tag.ist-training {
    background: var(--raum-hoch);
    color: var(--schrift);
    font-weight: 600;
    cursor: pointer;
}

.kal__tag.ist-training:active { opacity: 0.7; }

.kal__art {
    font-size: var(--s-marke);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--schrift-leise);
}

/* Heute nur umrandet, damit es die gefüllten Tage nicht überstimmt. */
.kal__tag.ist-heute {
    box-shadow: inset 0 0 0 1px var(--schrift-leise);
}

/* ---------- Fortschrittskurve ---------- */

/* Zahl und Wort auf einer Grundlinie beieinander, wie am Regler und an
   der Vorgabe auf der Kachel. Der Abstand zum Start steht in der
   Abschnittsmarke, nicht hier. */
.fortschritt__stand {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 14px 0 6px;
    font: var(--s-neben)/1.2 var(--mono);
    color: var(--schrift-leise);
}

/* Die Punktzahl groß, das Wort klein — dieselbe Regel wie am Regler und
   an der Vorgabe auf der Kachel. */
.fortschritt__stand b {
    font-size: var(--s-titel);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--schrift);
}

/* ---------- Rückblick: die letzten Einheiten ---------- */

.rueckblick .einheit:first-of-type { padding-top: 14px; }

.einheit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    width: 100%;
    min-height: var(--ziel);
    padding: 11px 0;
    border: 0;
    border-bottom: 1px solid var(--linie);
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.einheit:active { opacity: 0.7; }

/* Der letzte Eintrag ohne Strich: darunter folgt "Mein Plan" mit einem
   eigenen, und zwei Linien mit einem Spalt dazwischen lesen sich wie ein
   Fehler. Steht die Deckel-Zeile dahinter, ist sie das letzte Kind und der
   Strich bleibt richtig. */
.einheit:last-child { border-bottom: 0; }

.einheit__wann {
    font: var(--s-text)/1.3 var(--sans);
    color: var(--schrift);
}

.einheit__umfang {
    font: var(--s-klein)/1.3 var(--mono);
    color: var(--schrift-leise);
}

/* Kein eigener Akzent dafür. Unvollständig ist eine Auskunft und keine
   Warnung; Orange hieße "Steigerung fällig" und wäre hier gelogen. */
.einheit__offen {
    color: var(--schrift-leise);
    font-style: italic;
}

/* ---------- Eine Einheit, die noch läuft ----------
 *
 * Sie führt nicht in die Leseansicht, sondern zurück ins Studio. Ein
 * anderes Ziel muss anders aussehen, sonst tippt man auf gut Glück.
 *
 * Gelb ist hier keine Dekoration, sondern genau seine Bedeutung in dieser
 * App: "hier tippen". Der Balken links rückt die Zeile aus der Flucht der
 * übrigen, damit sie beim Überfliegen auffällt, ohne dass die Liste
 * unruhig wird.
 *
 * "Unvollständig" bleibt daneben bestehen und heißt weiter etwas anderes:
 * eine Einheit von früher, die nie fertig wurde. Die ist Geschichte und
 * bleibt leise und kursiv.
 */
.einheit--offen {
    position: relative;
    padding-left: 12px;
    padding-right: 74px;
    border-left: 3px solid var(--tag);
}

.einheit__marke {
    color: var(--tag);
    font-family: var(--mono);
    font-size: var(--s-klein);
}

/* Sagt, was das Antippen tut. Rechts und senkrecht mittig, damit es zu
   beiden Zeilen gehört und nicht zu einer von ihnen. */
.einheit__weiter {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tag);
    font: 600 var(--s-neben)/1 var(--sans);
}

/* Die Bilanzzeile über den Kacheln einer abgeschlossenen Einheit. */
.einheit__bilanz {
    margin: -14px 0 24px;
    color: var(--schrift-leise);
    font: var(--s-neben)/1.4 var(--mono);
}

/* Die Sätze dieser Einheit auf der Kachel, dort wo im Studio "zuletzt"
   steht. Volle Schriftfarbe: hier sind sie die Auskunft und nicht der
   Nebensatz. */
.kachel__werte {
    font: var(--s-neben)/1.5 var(--mono);
    color: var(--schrift);
}

.kachel__text[disabled] { cursor: default; opacity: 0.7; }

/* ---------- Fortschritt in der Einheit ----------
 *
 * Ohne diese Zeile ist eine Liste aus neun gleich aussehenden Kacheln
 * nicht einzuordnen: man weiß weder, wo man steht, noch wie weit es noch ist.
 */

.fortschritt {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.fortschritt__zahl {
    flex: 0 0 auto;
    font: var(--s-klein)/1 var(--mono);
    color: var(--schrift-leise);
    white-space: nowrap;
}

.fortschritt__balken {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--linie);
    overflow: hidden;
}

.fortschritt__voll {
    display: block;
    height: 100%;
    background: var(--schrift);
}

.geschafft {
    margin-bottom: 26px;
    padding: 22px 20px;
    border: 1px solid var(--schrift-leise);
    border-radius: 16px;
}

.geschafft__titel {
    margin: 0 0 8px;
    font: 600 var(--s-betont)/1.3 var(--sans);
}

.geschafft .knopf { margin-top: 18px; }

/* Die zweite Ausfertigung unter der letzten Kachel. Die Kachel darüber
   bringt 14px mit, zusammen mit diesen 12 steht der Abschluss genauso frei
   wie der obere. */
.geschafft--unten { margin: 12px 0 0; }

/* Der Ausgang bei offener Einheit. Ohne Rahmen und ohne Gelb: Er soll
   erreichbar sein, wenn man ihn braucht, und sonst nichts von einem wollen.
   Mehr Luft nach oben als die Kacheln untereinander, damit er nicht als
   zehnte Kachel gelesen wird. */
.beenden { margin: 26px 0 0; }

.beenden__stand {
    margin: 0 0 12px;
    color: var(--schrift-leise);
    font: var(--s-neben)/1 var(--mono);
    text-align: center;
}

/* ---------- Studio: Übungskacheln ---------- */

.kachel {
    margin-bottom: 14px;
    border: 1px solid var(--linie);
    border-radius: 16px;
    overflow: hidden;
}

/* Die offene Kachel ist die, an der gerade gearbeitet wird. Sie hebt sich
   ab, damit im Studio auf einen Blick klar ist, wo man steht. */
.kachel.ist-offen {
    border-color: var(--schrift-leise);
    background: var(--raum-hoch);
}

/* Erledigt tritt zurück, ohne zu verschwinden: man will noch nachsehen
   können, was man gemacht hat. */
.kachel.ist-fertig { opacity: 0.55; }
.kachel.ist-fertig.ist-offen { opacity: 1; }

/* Kein Knopf, sondern eine Reihe aus zwei Knöpfen: Foto vergrößern und
   Übung aufklappen sind zwei verschiedene Absichten. */
/* Foto und Name beginnen auf derselben Höhe. Mittig gesetzt rutschte das
   Foto in die Mitte einer hohen Textspalte und der Name stand allein
   darüber; oben angeschlagen liest sich die Kachel von einer Kante aus. */
.kachel__kopf {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    padding: 14px;
}

.kachel__foto {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 0;
    cursor: zoom-in;
}

/* ---------- Die Gerätenummer unter dem Foto ----------
 *
 * Sie lag bisher NUR dort, wo ein Foto fehlt — und da alle Übungen ein Bild
 * haben, war sie unsichtbar. Eingetragene Nummern sah man nirgends, außer
 * man tippte das Foto groß auf. Das half im Studio nicht: Dort sucht man
 * das Gerät, und dafür muss die Nummer ohne Zutun dastehen.
 *
 * Unter dem Foto und nicht darauf: Die Textspalte daneben ist rund 130
 * Punkte hoch, das Bild nur 76 — darunter liegt ohnehin Platz brach. So
 * bleibt das Foto unversehrt, und die Nummer bekommt die volle Bildbreite
 * und darf so groß sein, wie man sie auf Armlänge lesen muss. Auf dem Bild
 * hätte sie ein Viertel davon verdeckt (Vorgabe von Frank: kleiner ist auf
 * dem Handy nicht lesbar).
 */
.kachel__geraet {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 6px;
}

.plakette--unten {
    display: grid;
    place-items: center;
    width: 100%;
    padding: 3px 0;
    border-radius: 8px;
    font-size: var(--s-zahl);
}

/*
 * Auf der AUFGEKLAPPTEN Kachel wird die Nummer quadratisch und so groß wie
 * das Foto darüber.
 *
 * Genau diese eine Übung steht man gerade an. Das Foto hat einen zweiten
 * Job — man erkennt daran das Gerät —, aber wenn man davorsteht, sucht man
 * nicht mehr, sondern gleicht ab: Stimmt die Nummer, ist es das richtige
 * Gerät. Deshalb bekommt sie hier die volle Fläche und eine Schrift, die
 * man auf Armlänge liest. Auf den zugeklappten Kacheln bleibt sie flach,
 * sonst würde die Liste doppelt so lang.
 *
 * padding auf 0: Bei aspect-ratio zählt die Polsterung zur Höhe und machte
 * den Kasten höher als breit.
 */
.kachel.ist-offen .plakette--unten {
    aspect-ratio: 1;
    padding: 0;
    border-radius: 11px;
    font-size: var(--s-gross);
}

.zeile .plakette--unten {
    padding: 1px 0;
    border-radius: 6px;
    font-size: var(--s-neben);
}

/*
 * Alle gelben Nummernfelder einer Liste gleich breit.
 *
 * Sie sitzen in derselben Spalte: mal unter einem Foto, mal anstelle eines
 * fehlenden. Inhaltsbreite ergab dort eine ausgefranste Kante — "7" schmal,
 * "43" breiter, und darunter ein Foto von 56 Punkten. Maßgeblich ist die
 * Breite des Fotos, denn die bestimmt die Spalte.
 *
 * Gilt nur für das direkte Kind: Die Plakette unter einem Foto steckt in
 * .kachel__geraet und holt ihre Breite schon von dort.
 */
.zeile > .plakette {
    display: grid;
    place-items: center;
    width: 56px;
    padding: 3px 0;
}

/* Dieselbe Regel eine Ebene höher: Auf der Kachel ist das Foto 76 breit. */
.kachel__kopf > .plakette {
    display: grid;
    place-items: center;
    width: 76px;
    padding: 3px 0;
}



.kachel__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

/* ---------- Gerätefoto groß ---------- */

.lupe {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 20px;
    padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
    background: rgba(12, 14, 18, 0.96);
    cursor: zoom-out;
    /* Bild und Ausführung zusammen können höher werden als der Bildschirm.
       Ohne das wäre der untere Teil der Anleitung nicht erreichbar. */
    overflow-y: auto;
}

/* Bei zusätzlicher Anleitung darf das Bild weniger Höhe nehmen, sonst
   bliebe für den Text nichts übrig. */
.lupe:has(.lupe__anleitung:not(:empty)) .lupe__bild { max-height: 46vh; }

.lupe__bild {
    max-width: 100%;
    max-height: 78vh;
    border-radius: 14px;
    object-fit: contain;
}

.lupe__fuss {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lupe__name {
    font: var(--s-text)/1.3 var(--sans);
    color: var(--schrift);
}

.lupe .plakette { font-size: var(--s-text); padding: 5px 12px; }

/* ---------- Die Ausführung in der Großansicht ----------
 *
 * Sie war bis zum 26.08.2026 ein Aufklapper auf der Kachel und schob dort
 * die Regler nach unten — also genau das weg, wofür man die Kachel
 * geöffnet hat. Jetzt steht sie neben dem Bild des Geräts, wo dieselbe
 * Frage ohnehin gestellt wird.
 *
 * Der Cursor wird zurückgesetzt: Über der Lupe steht zoom-out, weil ein
 * Tipp sie schließt. Über einem Textabsatz wäre das eine Lüge, und über
 * den Verweisen erst recht.
 */
.lupe__anleitung {
    max-width: var(--breite);
    cursor: auto;
}

.lupe__anleitung:empty { display: none; }

.lupe__anleitung .ausfuehrung { margin: 0; }

.kachel__bild,
.kachel__platzhalter {
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    border-radius: 11px;
    object-fit: cover;
}

/* Ohne Foto steht die Gerätenummer groß da: im Studio findet man das
   Gerät über die Nummer, nicht über den Namen. */
.kachel__platzhalter {
    display: grid;
    place-items: center;
    background: var(--tag);
    color: #1b1e24;
    font: 700 var(--s-zahl)/1 var(--mono);
}

.kachel__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.kachel__name {
    font-size: var(--s-betont);
    font-weight: 600;
}

.kachel__ziel,
.kachel__zuletzt {
    font: var(--s-betont)/1.35 var(--mono);
    color: var(--schrift-leise);
}

/* Die Vorgabe ist das, was man vor dem Gerät sucht: wie viele Sätze, wie
   viele Wiederholungen. Groß gesetzt sind nur die Zahlen, die Wörter
   bleiben ihre Einheit. So sticht die Auskunft ins Auge, ohne dass die
   Zeile zur zweiten Überschrift wird. */
.kachel__ziel { margin-top: 2px; }

.kachel__zahl {
    font-size: var(--s-zahl);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--schrift);
}

/* Der Bezug hinter der gemachten Zahl im Rückblick: "2/4". Klein und leise,
   weil die 2 die Auskunft ist und die 4 nur der Maßstab. */
.kachel__von {
    font-size: var(--s-neben);
    font-weight: 600;
    color: var(--schrift-leise);
}

/* Die Coach-Ansage. Orange heißt in dieser App "Steigerung fällig", und
   genau dieser eine Fall wird hervorgehoben. Alles andere bleibt leise. */
/* Die Begründung unter der Handlung: erklärt, warum, drängt sich aber
   nicht vor. Im Studio wird nur die erste Zeile gelesen. */
.kachel__grund {
    font: var(--s-klein)/1.35 var(--mono);
    color: var(--schrift-leise);
}

.punkte {
    display: flex;
    /* Umbruch als Sicherung: Eine Übung darf bis zu zwölf Sätze haben, und
       zwölf größere Punkte passen nicht mehr in eine Zeile der Textspalte. */
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

/* Der leere Punkt trägt dieselbe Auskunft wie der volle: er sagt, wie viel
   noch kommt. Mit haarfeinem Rand in Linienfarbe war er auf Armlänge nicht
   zu sehen, damit war die Reihe nur halb zu lesen. */
.punkt {
    width: 28px;
    height: 28px;
    border: 3px solid var(--schrift-leise);
    border-radius: 50%;
}

.punkt.ist-voll {
    background: var(--tag);
    border-color: var(--tag);
}

/* ---------- Satz-Eingabe ---------- */

.saetze {
    padding: 4px 14px 16px;
    border-top: 1px solid var(--linie);
}

.satz__korr {
    min-height: 40px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: var(--schrift-leise);
    font: var(--s-klein)/1 var(--sans);
    cursor: pointer;
}

.satz--dran { padding: 16px 0 4px; }

.satz__fertig {
    margin: 14px 0 0;
    color: var(--schrift-leise);
    font: var(--s-neben)/1.5 var(--mono);
}

/* Große Ziele, weil im Studio mit dem Daumen und nass getippt wird. */
.regler {
    display: grid;
    grid-template-columns: 68px 1fr 68px;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.regler__knopf {
    height: 62px;
    border: 1px solid var(--linie);
    border-radius: 12px;
    background: var(--raum-hoch);
    color: var(--schrift);
    font: 300 var(--s-titel)/1 var(--sans);
    cursor: pointer;
}

.regler__knopf:active { background: var(--linie); }

/* Die Zahl ist die Hauptsache und der größte Text der Kachel: sie wird im
   Halbdunkel, mit Armlänge Abstand und schwerem Atem abgelesen. Die
   Einheit steht daneben auf derselben Grundlinie, klein und leise — dass
   es Kilogramm sind, muss niemand nachlesen. */
.regler__wert {
    font: var(--s-text)/1 var(--mono);
    text-align: center;
    color: var(--schrift-leise);
}

.regler__zahl {
    font-size: var(--s-gross);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--schrift);
}

.regler__schritt {
    grid-column: 1 / -1;
    margin-top: -4px;
    font: var(--s-marke)/1 var(--mono);
    color: var(--schrift-leise);
    text-align: center;
}

.satz__ok { margin-top: 8px; }

/* ---------- Pausen-Timer ---------- */

/*
 * Das Pausen-Panel nimmt das untere Drittel ein. Als schmaler Balken war
 * die Restzeit zwischen zwei Sätzen kaum abzulesen: man sitzt auf der Bank,
 * das Handy liegt daneben, und geguckt wird im Vorbeigehen. Deshalb eine
 * Zahl, die man aus zwei Metern liest, und eine Fläche, deren Farbe schon
 * vor dem Lesen sagt, woran man ist.
 */
.pause {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    width: 100%;
    max-width: var(--breite);
    margin-inline: auto;
    padding: 24px var(--rand) calc(env(safe-area-inset-bottom) + 22px);
    background: var(--ruhe);
    border-top: 1px solid var(--ruhe-linie);
}

/* Solange das Panel steht, braucht der Inhalt darunter Platz, sonst liegt
   die unterste Kachel während der Pause darunter. Der Wert deckt die Höhe
   des Panels ab, nicht knapp, sondern mit Luft: die Beschriftung trägt bei
   Supersets den Namen der nächsten Übung und darf umbrechen. */
body.hat-pause .inhalt { padding-bottom: calc(env(safe-area-inset-bottom) + 290px); }

.pause__mini {
    font: 600 var(--s-klein)/1.4 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ruhe-mini);
}

/* Tabellenziffern: ohne sie springt die Zahl bei jedem Tick in der Breite,
   und ein zappelnder Timer zieht das Auge auf die Bewegung statt auf den
   Wert. */
.pause__zeit {
    font: 600 min(24vw, 92px)/1 var(--mono);
    font-variant-numeric: tabular-nums;
    text-align: center;
    letter-spacing: -0.02em;
    color: var(--schrift);
}

.pause__weg {
    min-height: var(--ziel);
    padding: 0 16px;
    border: 1px solid var(--ruhe-linie);
    border-radius: 12px;
    background: transparent;
    color: var(--schrift);
    font: var(--s-text)/1 var(--sans);
    cursor: pointer;
}

@media (max-width: 360px) {
    .drei { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ---------- Bildauswahl im Übungsformular ----------
 *
 * Ein Raster zum Antippen statt eines Textfelds für einen Dateinamen.
 * Auf einem Foto sieht man das Gerät, aber nicht, welche Übung jemand
 * daran macht: diese Zuordnung kann nur Frank treffen, also gehört sie
 * in die App.
 */

.bildwahl {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--linie);
    border-radius: 12px;
    background: var(--raum);
}

.bildwahl__stueck,
.bildwahl__keins {
    padding: 0;
    border: 2px solid transparent;
    border-radius: 9px;
    background: var(--raum-hoch);
    cursor: pointer;
    overflow: hidden;
}

.bildwahl__stueck {
    aspect-ratio: 1;
    line-height: 0;
}

.bildwahl__stueck img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bildwahl__keins {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    color: var(--schrift-leise);
    font: var(--s-marke)/1.2 var(--mono);
    text-align: center;
}

.bildwahl .ist-gewaehlt {
    border-color: var(--tag);
}

/* ---------- Foto hochladen ----------
 *
 * Das eigentliche Dateifeld ist unsichtbar, das Label ist der Knopf.
 * Browser lassen sich das native Feld nicht gestalten, und ein grauer
 * "Datei auswählen"-Knopf mitten in der Oberfläche sähe aus wie ein
 * Fremdkörper.
 */

.hochladen {
    display: block;
    min-height: var(--ziel);
    margin-bottom: 10px;
    padding: 17px 16px;
    border: 1px dashed var(--linie);
    border-radius: 12px;
    background: transparent;
    color: var(--schrift);
    font: var(--s-neben)/1 var(--sans);
    text-align: center;
    cursor: pointer;
}

.hochladen:active { background: var(--raum-hoch); }

.hochladen input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Löschknopf auf jedem Bild in der Auswahl. Zwei Schritte, wie überall
   sonst: ein Bild ist schnell weg und nicht wiederzuholen. */
.bildwahl__feld {
    position: relative;
    display: block;
}

.bildwahl__weg {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border: 0;
    border-radius: 6px;
    background: rgba(12, 14, 18, 0.82);
    color: var(--schrift);
    font: 600 var(--s-klein)/1 var(--sans);
    cursor: pointer;
}

.bildwahl__weg.ist-scharf {
    background: var(--vinyl);
    font: 600 var(--s-marke)/1 var(--sans);
    color: #fff;
}

/* ---------- Ausführung und Nachschlagen ---------- */

.ausfuehrung {
    margin-bottom: 24px;
    padding: 18px;
    border: 1px solid var(--linie);
    border-radius: 14px;
    background: var(--raum-hoch);
}

.ausfuehrung__text {
    margin: 0;
    font-size: var(--s-text);
    line-height: 1.55;
}

.ausfuehrung__suche {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.ausfuehrung__begriff {
    flex: 1;
    min-width: 0;
    font: var(--s-klein)/1.3 var(--mono);
    color: var(--schrift-leise);
}

.ausfuehrung__suche .kopfknopf {
    display: inline-block;
    padding: 9px 14px;
    text-decoration: none;
    line-height: 1;
}

/* ---------- Anleitung auf der offenen Kachel ----------
 *
 * Ein leiser Aufklapper zwischen Kachelkopf und Reglern. Er darf nicht
 * wie eine Aktion aussehen: Gelb heißt in dieser App "hier tippen" und
 * gehört dem Satzknopf, der zwei Fingerbreit darunter sitzt.
 */

.anleitung {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 0 18px;
    border: 0;
    border-top: 1px solid var(--linie);
    background: transparent;
    color: var(--schrift-leise);
    font: var(--s-neben)/1 var(--sans);
    text-align: left;
    cursor: pointer;
}

/* Winkel aus zwei Rändern statt einem Zeichen: ein Glyph säße je nach
   Schrift anders auf der Grundlinie und ließe sich nicht sauber drehen. */
.anleitung__pfeil {
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .15s ease;
}


@media (prefers-reduced-motion: reduce) {
    .anleitung__pfeil { transition: none; }
}

/* Im Studio sitzt der Block in der Kachel, nicht frei auf der Seite:
   kein zweiter Rahmen im Rahmen, keine eigene Rundung. */
.kachel .ausfuehrung {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--linie);
    border-radius: 0;
    background: transparent;
}

.feld--lang {
    padding: 14px 16px;
    line-height: 1.5;
    resize: vertical;
}

/* Hinweis auf die Partnerübung, steht über den Reglern der offenen Kachel. */
.wechsel {
    margin: 0 0 16px;
    padding: 10px 12px;
    border-left: 3px solid var(--linie);
    font: var(--s-klein)/1.45 var(--mono);
    color: var(--schrift-leise);
}

.wechsel strong {
    color: var(--schrift);
    font-weight: 600;
}

/* Beim Wechsel steht in der Pausenleiste, was als Nächstes kommt. Der
   Text wird dann länger als das kurze "Pause". */
.pause__mini {
    flex: 0 1 auto;
    min-width: 0;
    letter-spacing: 0.08em;
}

/* Die umgekehrte Gewichtsrichtung muss auffallen, sonst dreht man im
   Studio in die falsche Richtung. Kein Orange: das heißt "Steigerung
   fällig". Eine abgesetzte Fläche mit kräftiger Kante reicht. */
.wechsel--hilfe {
    border-left-color: var(--schrift);
    background: var(--raum-hoch);
    border-radius: 0 8px 8px 0;
    color: var(--schrift);
}