/* ===================================================================
   mahiru-tracker - projekteigenes Stylesheet.

   Ergaenzt mahiru.css, ersetzt nichts daraus. Jede Farbe und jeder
   Abstand kommt aus einer Variablen der Mappe.

   Aufgebaut vom Telefon aufwaerts: der Normalfall ist die schmale
   Ansicht, die breite kommt als Erweiterung darueber. Die Anwendung
   wird im Gym bedient, nicht am Schreibtisch.
   =================================================================== */

/* --- 1. Verhalten wie eine Anwendung, nicht wie eine Seite -------- */

html {
  /* Ohne das vergroessert iOS beim Drehen ins Querformat die Schrift
     eigenmaechtig, und das Raster verrutscht. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  /* Dieselbe Farbe wie Kopfzeile und Leiste. Bleibt am unteren Rand
     ein Streifen uebrig - Home-Indikator, gerundete Ecken, was das
     Geraet sonst noch fuer sich beansprucht -, ist er schwarz und
     faellt nicht auf. Ohne das schimmert dort der Seitenhintergrund
     durch, und der ist einen Hauch heller als die Leiste. */
  background: var(--kopf);
}

/* Nicht die Seite rollt, sondern der Inhaltsbehaelter darin.
   Der Grund ist iOS: den Rollbalken des Dokuments zeichnet dort das
   System, und kein Stylesheet kommt daran. Den eines gewoehnlichen
   Behaelters dagegen schon - siehe die Regel weiter unten. Nebenbei
   stehen Kopfzeile und Leiste damit wirklich still, statt nur fast. */
body {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;

  /* Schwarz wie Kopfzeile und Leiste, NICHT der Seitenton.
     Der Grund sitzt ausserhalb der Seite: iOS toent den Streifen am
     unteren Rand - dort, wo im Browser die Adresszeile sitzt - mit der
     Hintergrundfarbe des Koerpers. Stand die auf --hintergrund
     (#0a0a0c), blieb unter der Leiste ein grauer Balken stehen, und
     kein Stylesheet kam daran: die Seite kann dort nicht malen.
     Der Seitenton sitzt deshalb eine Ebene tiefer, am rollenden
     Inhalt. */
  background: var(--kopf);

  /* Schaltet den Doppeltipp-Zoom ab - und nur den. Pinch-Zoom und die
     Systemschriftgroesse bleiben, anders als bei user-scalable=no.
     Nebenwirkung, die der eigentliche Gewinn ist: der Browser wartet
     nach jedem Tippen keine drittel Sekunde mehr ab, ob ein zweiter
     folgt. Ohne das fuehlt sich jede Bedienung traege an. */
  touch-action: manipulation;

  /* Kein Gummiband am Ende der Liste und kein Neuladen durch Ziehen
     von oben. Beides gibt es in einer Anwendung nicht. */
  overscroll-behavior-y: contain;

  -webkit-tap-highlight-color: transparent;

  /* Die Oberflaeche ist kein Text zum Markieren. Der Langdruck soll
     die Wischgeste nicht mit dem Auswahl-Menue stoeren. Eingabefelder
     sind unten ausgenommen - dort braucht man beides. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

input,
textarea {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* Keine Rollbalken. In einer Anwendung sagt der Balken nichts, was
   der Inhalt nicht schon sagt, und der kurze Streifen bei jeder
   Wischbewegung fuehlt sich nach Webseite an.

   Wichtig: das greift nur bei Behaeltern, die selbst rollen. Den
   Balken des Dokuments zeichnet iOS selbst - deshalb rollt hier der
   Inhalt und nicht die Seite. */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Unter 16 px zoomt iOS beim Hineinspringen in ein Feld von selbst -
   und kommt nicht wieder heraus. Das ist der haeufigste Grund dafuer,
   dass sich eine Webanwendung am Telefon nicht wie eine Anwendung
   anfuehlt. Gilt fuer jedes Feld, auch das im Importfenster. */
input,
textarea,
select {
  font-size: max(1rem, 16px);
}

/* --- 2. Geruest --------------------------------------------------- */

.inhalt {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Der Seitenton. Er sass am Koerper - siehe dort, warum er hier
     hingehoert. */
  background: var(--hintergrund);
  overscroll-behavior-y: contain;
  /* Traegheit beim Loslassen, wie in einer nativen Anwendung. */
  -webkit-overflow-scrolling: touch;

  /* Ueber die volle Breite, obwohl der Inhalt schmaler bleibt.
     Gerollt wird der Behaelter, nicht die Seite - stuende er nur in
     der Mitte, waere links und rechts davon nichts, was auf das
     Mausrad hoert, und am Schreibtisch ginge Rollen nur ueber den
     Uebungen. Die Begrenzung auf 60rem sitzt deshalb eine Ebene
     tiefer, an der Ansicht. */
  width: 100%;
  max-width: none;
  margin: 0;
  /* Die seitliche Luft wandert mit nach innen, sonst sitzt sie am
     Fensterrand statt am Inhalt. */
  padding-inline: 0;
  /* Platz fuer die Leiste am unteren Rand, damit die letzte Zeile
     nicht dahinter verschwindet. */
  padding-bottom: calc(4rem + var(--luft-5) + var(--rand-unten, env(safe-area-inset-bottom)));
}

/* Die eigentliche Breitenbegrenzung. Sie sass frueher am rollenden
   Behaelter - siehe oben. */
.ansicht {
  width: 100%;
  max-width: 60rem;
  margin-inline: auto;
  padding-inline: calc(var(--luft-5) + env(safe-area-inset-left))
                  calc(var(--luft-5) + env(safe-area-inset-right));
}

/* Am Telefon traegt die Kopfzeile nur noch das Logo. */
.kopfzeile {
  flex-wrap: wrap;
  row-gap: var(--luft-3);
  flex-shrink: 0;
  z-index: 15;
  /* Schmaler als die Vorgabe: die Zeile klebt oben fest und kostet
     ihren Platz auf jedem Bildschirm, nicht nur einmal. */
  padding-block: calc(var(--luft-3) + env(safe-area-inset-top)) var(--luft-3);
  padding-inline: calc(var(--luft-4) + env(safe-area-inset-left))
                  calc(var(--luft-4) + env(safe-area-inset-right));
}

.kopfzeile .logo-marke {
  width: 1.625rem;
  height: 1.625rem;
}

.kopfzeile .logo-schrift {
  font-size: 0.95rem;
}

/* Nur oben. Ein padding-block-Kurzbefehl wuerde das grosse untere
   Polster mit ueberschreiben, das die Leiste freihaelt - und die
   letzte Zeile verschwaende dann dahinter. */
.inhalt {
  padding-top: var(--luft-4);
}

.kopf-aktionen {
  display: flex;
  align-items: center;
  gap: var(--luft-2);
  margin-left: auto;
}

.nur-breit {
  display: none;
}

.nur-vorleser {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- 3. Die Leiste am unteren Rand -------------------------------- */

/* Symbole statt Schrift: bei drei Zielen ist die Bedeutung eindeutig,
   und Schrift in dieser Groesse liest ohnehin niemand. Den Namen
   traegt jeder Knopf als aria-label - fuer ein Vorleseprogramm ist er
   damit vollstaendig beschriftet. */
.tableiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  gap: var(--luft-1);
  background: var(--kopf);
  border-top: 1px solid var(--rand);
  padding: var(--luft-1) var(--luft-3);
  padding-bottom: calc(var(--luft-1) + var(--rand-unten, env(safe-area-inset-bottom)));
}

/* Der Streifen unter der Leiste - Home-Indikator, gerundete Ecken,
   was das Geraet sonst noch fuer sich beansprucht.

   Hier lag ein Fehler: die Verlaengerung hing als ::after an der
   Leiste selbst, mit top: 100%. Die Leiste steht aber fix am unteren
   Rand, ihr unteres Ende IST der Bildschirmrand - die Verlaengerung
   begann also genau dort, wo der Bildschirm aufhoert, und war nie zu
   sehen. Sichtbar blieb stattdessen der Seitenhintergrund (#0a0a0c)
   gegen das Schwarz der Leiste: der graue Balken unten.

   Jetzt liegt der Streifen am Koerper und ist fest am unteren Rand
   verankert, eine Ebene unter der Leiste. */
body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Mindestens etwas, auch wo es keine Aussparung gibt: eine Kante
     zwischen zwei fast gleichen Schwarztoenen faellt sonst genau dann
     auf, wenn das Geraet einen Pixel anders rechnet. */
  height: max(var(--rand-unten, env(safe-area-inset-bottom)), 2px);
  background: var(--kopf);
  z-index: 19;
  pointer-events: none;
}

.tabknopf {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Tippziel nach 03-regeln.md; in der Leiste darf es grosszuegiger
     sein, weil hier der Daumen arbeitet. */
  min-height: 3rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--rund-klein);
  background: transparent;
  color: var(--text-schwach);
  transition:
    color var(--takt-kurz) var(--schwung-weich),
    background-color var(--takt-kurz) var(--schwung-weich),
    transform var(--takt-kurz) var(--schwung);
}

.tabknopf svg {
  width: 1.375rem;
  height: 1.375rem;
}

.tabknopf.aktiv {
  color: var(--akzent);
}

/* Der Punkt unter dem Symbol ist das zweite Merkmal neben der Farbe.
   Eine Auskunft, die nur farbig ist, faellt bei Farbenblindheit weg -
   und ein voller Farbblock waere hier zu laut fuer eine Leiste, die
   immer zu sehen ist. */
.tabknopf::after {
  content: "";
  width: 0.25rem;
  height: 0.25rem;
  margin-top: 0.25rem;
  border-radius: var(--rund-voll);
  background: currentColor;
  opacity: 0;
  transition: opacity var(--takt-kurz) var(--schwung-weich);
}

.tabknopf.aktiv::after {
  opacity: 1;
}

.tabknopf:active {
  transform: scale(0.92);
}

/* --- 4. Abschnittskoepfe ------------------------------------------ */

.abschnitt-kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--luft-4);
  flex-wrap: wrap;
  margin-bottom: var(--luft-4);
}

.abschnitt-titel {
  /* Ohne min-width sprengt ein langer Planname die Zeile, statt
     umzubrechen. Haeufigste Ursache fuer seitliches Scrollen. */
  min-width: 0;
  flex: 1 1 12rem;
}

.abschnitt-titel .leer {
  margin: var(--luft-1) 0 0;
}

/* Der Loeschknopf im Kopf der Uebungsansicht. Am Telefon unter den
   Titel, nicht daneben: ein Uebungsname wie "Latzug eng oder Rudern
   eng" laesst neben sich keinen Platz. */
.abschnitt-kopf .knopf.gefahr {
  flex-shrink: 0;
  min-height: 2.75rem;
}

.uebung-knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--luft-2);
}

.uebung-knoepfe .knopf {
  flex-shrink: 0;
  min-height: 2.75rem;
}

.gross {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

.abschnitt-fuss {
  margin-top: var(--luft-5);
}

.suche input {
  width: min(14rem, 100%);
}

/* Filtern und Sortieren gehoeren zusammen und stehen nebeneinander.
   Am Telefon umbrechen sie, statt die Zeile zu sprengen. */
.verlauf-werkzeuge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--luft-2);
}

.verlauf-werkzeuge .knopf {
  min-height: 2.75rem;
  flex-shrink: 0;
}

/* Der Name der Sortierung steht auf dem Knopf: sonst muss man ihn
   aufmachen, um zu sehen, wonach die Liste gerade steht. */
#sortier-name {
  font-variant-numeric: tabular-nums;
}

.sortier-eintrag {
  align-items: flex-start;
  padding-block: var(--luft-2);
}

.menue-eintrag-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  text-align: left;
}

.menue-eintrag-text b {
  font-weight: 500;
}

.menue-eintrag-text .leer {
  margin: 0;
  font-size: 0.8rem;
}

.sortier-eintrag .haken {
  flex-shrink: 0;
  color: var(--akzent);
}

.mit-symbol {
  display: inline-flex;
  align-items: center;
  gap: var(--luft-2);
}

.mit-symbol svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* --- 5. Blanko-Felder --------------------------------------------- */

/* Felder, die wie Text aussehen, bis man sie anfasst. Der Plan soll
   gelesen werden koennen wie die Notizen, aus denen er kommt - nicht
   wie ein Formular.

   Der Typwaehler in mahiru.css (input[type="text"] { border: ... })
   ist genauso spezifisch wie eine Klasse, eine blosse .blanko-Regel
   verliert gegen ihn - und zwar lautlos. Deshalb steht hier ueberall
   input.blanko. */
input.blanko,
.blanko {
  width: 100%;
  padding: 0.125rem var(--luft-2);
  line-height: 1.4;
  border: 1px solid transparent;
  border-radius: var(--rund-klein);
  background: transparent;
  color: var(--text);
  font: inherit;
  transition:
    border-color var(--takt-kurz) var(--schwung-weich),
    background-color var(--takt-kurz) var(--schwung-weich);
}

input.blanko:hover,
.blanko:hover {
  border-color: var(--rand);
}

input.blanko:focus,
.blanko:focus {
  border-color: var(--akzent);
  background: var(--hintergrund);
  outline: none;
}

input.blanko.gross,
.blanko.gross {
  font-size: 1.25rem;
  font-weight: 700;
  margin-left: calc(var(--luft-2) * -1);
}

/* Die Zahlenfelder sind Textfelder mit numerischer Tastatur, nicht
   type="number". Zwei Gruende: nur dort laesst sich der Inhalt
   zuverlaessig markieren - und darauf beruht, dass eine getippte
   Ziffer den alten Wert ersetzt, statt sich irgendwo einzureihen.
   Und die Pfeilchen von type="number" trifft der Daumen ohnehin
   nicht. Was der Browser damit nicht mehr prueft, prueft
   zahlenfeld.js. */

/* --- 6. Tag ------------------------------------------------------- */

.tag {
  margin-bottom: var(--luft-5);
}

.tag-kopf {
  position: relative;
  overflow: hidden;
  border-radius: var(--rund-klein);
}

.tag-kopf-inhalt {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--luft-2);
  padding: var(--luft-1) 0;
  /* Deckend, weil die Loeschflaeche darunter liegt. */
  background: var(--hintergrund);
}

.tag-name {
  flex: 1;
  min-width: 0;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-schwach);
}

/* Die Summenzeile aus den Notizen - hier gerechnet statt abgetippt. */
.tag-summe {
  flex-shrink: 0;
  padding-right: var(--luft-2);
  font-size: 0.85rem;
  color: var(--text-schwach);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- 7. Zeilen ---------------------------------------------------- */

.tabelle {
  /* Fuenf Spalten: Name, Saetze, Wiederholungen, Gewicht - und ganz
     rechts der Loeschknopf. Fehlt seine Spalte, findet er im Raster
     keinen Platz mehr und faellt in eine zweite Zeile, die jede
     Tabellenzeile doppelt so hoch macht. */
  --spalten: 2.25rem minmax(0, 1fr) 4.5rem 4.5rem 5.5rem 4.5rem;
  border: 1px solid var(--rand);
  border-radius: var(--rund);
  background: var(--flaeche);
  overflow: hidden;
}

/* Der Tabellenkopf gehoert zur breiten Ansicht. Am Telefon sagen die
   Werte selbst, was sie sind: 2 x 5 x 70 kg ist genau die Schreibweise
   aus den Notizen. */
.tabelle-kopf {
  display: none;
}

.zeile {
  position: relative;
  overflow: hidden;
  /* Senkrecht scrollt die Seite, waagerecht gehoert die Geste uns.
     Ohne das entscheidet der Browser zuerst und die Zeile ruckelt
     hinterher. */
  touch-action: pan-y;
}

.zeile + .zeile {
  border-top: 1px solid var(--rand);
}

.zeile-inhalt {
  position: relative;
  /* Ueber der Loeschflaeche. Beide sind positioniert, und ohne
     ausdrueckliche Ebene gewinnt das spaetere im Dokument - die
     Loeschflaeche stuende dann dauerhaft offen. */
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  row-gap: 0;
  column-gap: var(--luft-2);
  align-items: center;
  padding: var(--luft-2) var(--luft-3);
  /* Deckend, weil die Loeschflaeche darunter liegt. Eine
     durchscheinende Zeile liesse sie die ganze Zeit durchschimmern. */
  background: var(--flaeche);
  transition: transform var(--takt) var(--schwung);
}

.zeile:focus-within .zeile-inhalt {
  background: var(--hintergrund);
}

/* Waehrend der Finger zieht, folgt die Zeile ohne Uebergang - sonst
   laeuft sie der Bewegung hinterher. */
.zeile.zieht .zeile-inhalt {
  transition: none;
}

/* Der Griff steht ueber Namens- und Zahlenzeile hinweg, wie die
   Knoepfe gegenueber. Nur auf Zeile eins gesetzt haengt er am oberen
   Rand und sieht aus, als gehoere er zum Namen. */
.zeilen-griff {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  display: flex;
  align-items: center;
  /* Der Knopf bringt eigene Luft mit. Ohne den Ausgleich steht der
     Griff weiter vom Rand weg als jedes andere Element der Zeile. */
  margin-left: calc(var(--luft-2) * -1);
}

.zelle-name {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

/* Im Plan kommt links eine Spalte fuer den Ziehgriff dazu, und alles
   andere rueckt um eins nach rechts. Nur im Plan: die Punktliste
   traegt dieselben Klassen, hat aber nichts zu ziehen. */
.tag .zeile-inhalt {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.tag .zelle-name,
.tag .zahlenzeile {
  grid-column: 2;
}

.tag .zeilen-knoepfe {
  grid-column: 3;
}

/* Am Telefon sitzen die Knoepfe oben rechts neben dem Namen; im
   Dokument stehen sie hinter den Zahlen, weil das Raster der breiten
   Ansicht sie dort erwartet. Ausdrueckliche Platzierung loest den
   Widerspruch, ohne die Reihenfolge im Dokument zu verdrehen - und
   die bestimmt, wo die Tastatur hinspringt. */
.zeilen-knoepfe {
  grid-column: 2;
  /* Ueber Namens- und Zahlenzeile hinweg, mittig dazwischen. Nur auf
     Zeile eins gesetzt haengt der Knopf am oberen Rand und sieht aus,
     als gehoere er zum Namen statt zur Uebung. Die dritte Zeile mit
     Peak und Vorwert bleibt aussen vor - sonst saesse der Knopf je
     nach Vorgeschichte mal hier und mal da. */
  grid-row: 1 / 3;
  align-self: center;
  display: flex;
  align-items: center;
  gap: var(--luft-1);
}

/* Am Telefon stehen die beiden Knoepfe uebereinander. Nebeneinander
   nehmen sie der Zahlenzeile so viel Breite, dass "1 - 2 x 7 x 65 kg"
   umbricht und die Zeile doppelt so hoch wird. Hochkant kosten sie
   nichts: die Spalte ist ohnehin so hoch wie Name und Zahlen
   zusammen. */
.zeilen-knoepfe {
  flex-direction: column;
  gap: 0.25rem;
}

/* Die drei Werte in einer Zeile, in der Schreibweise der Notizen. */
.zahlenzeile {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  padding-left: var(--luft-1);
}

.zelle-zahl {
  display: flex;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}

.mal {
  color: var(--text-schwach);
  font-size: 0.85rem;
}

/* Am Telefon tragen die Werte keine Beschriftung: das Mal-Zeichen
   dazwischen und das kg dahinter sagen genug. */
.beschriftung {
  display: none;
}

.spanne {
  display: flex;
  align-items: baseline;
  gap: 0.125rem;
}

.spanne input.blanko {
  width: 2rem;
  padding-inline: 0.125rem;
  text-align: center;
}

.zelle-wdh input.blanko {
  width: 2.5rem;
  text-align: center;
}

.zelle-gewicht input.blanko {
  width: 3.5rem;
  text-align: center;
}

/* Solange keine Spanne eingetragen ist, treten Bindestrich und
   zweites Feld zurueck: in den Notizen steht "2x" und nicht "2-2x".
   Sie verschwinden nur optisch - den Platz behalten sie, sonst
   springt die Spalte beim Anfassen. */
/* Der Bindestrich tritt nur zurueck, solange das Obergrenzenfeld leer
   ist. Steht dort eine Zahl, gehoert er dazwischen - sonst liest sich
   "1-2" als "1 2", und das ist keine Spanne mehr. */
.spanne:has(input.blanko:placeholder-shown) .bis,
.spanne input.blanko:placeholder-shown {
  opacity: 0;
  transition: opacity var(--takt-kurz) var(--schwung-weich);
}

.spanne .bis {
  color: var(--text-schwach);
  font-size: 0.8rem;
}

.zeile:hover .spanne .bis,
.zeile:hover .spanne input.blanko:placeholder-shown,
.spanne:focus-within .bis,
.spanne:focus-within input.blanko:placeholder-shown {
  opacity: 1;
}

/* Mit Spanne ist der Bindestrich immer zu sehen. */
.spanne:not(:has(input.blanko:placeholder-shown)) .bis {
  opacity: 1;
}

/* Am Telefon gibt es kein Darueberfahren. Ein unsichtbares Feld, das
   trotzdem Platz belegt, risse in jede Zeile ein Loch - also nimmt es
   erst Platz ein, wenn es gebraucht wird. Beim Hineinspringen in die
   Satzzahl klappt es auf, und dann ist es auch erreichbar. */
@media (hover: none) {
  /* Nur solange das Obergrenzenfeld leer ist. Steht dort eine Zahl,
     gehoert der Bindestrich dazwischen - sonst liest sich "1-2" als
     "1 2", und das ist keine Spanne mehr, sondern ein Tippfehler. */
  .spanne:has(input.blanko:placeholder-shown) .bis,
  .spanne input.blanko:placeholder-shown {
    width: 0;
    padding-inline: 0;
    overflow: hidden;
  }

  .spanne:focus-within .bis {
    width: auto;
  }

  .spanne:focus-within input.blanko:placeholder-shown {
    width: 2rem;
    padding-inline: 0.125rem;
  }
}

.einheit {
  color: var(--text-schwach);
  font-size: 0.8rem;
  margin-left: 0.125rem;
}

/* --- 7a. Vorschlaege unter dem Namensfeld -------------------------- */

/* Schwebt ueber dem Folgenden, statt es wegzuschieben: eine Liste, die
   die halbe Seite nach unten drueckt, waehrend man noch tippt, laesst
   einen den Faden verlieren.

   Sie haengt am Koerper, nicht in der Zeile - die hat overflow:
   hidden fuer die Loeschflaeche und schnitte sie nach einem Eintrag
   ab. Die Stelle rechnet auswahl.js aus; hier steht nur, wie sie
   aussieht. Ueber der Leiste am unteren Rand, damit sie auch dort
   noch lesbar ist. */
.vorschlaege {
  position: fixed;
  z-index: 22;
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: var(--luft-1);
  padding: var(--luft-1);
  max-height: 14rem;
  overflow-y: auto;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--rund);
  box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 0.7);
}

.vorschlag {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--luft-3);
  width: 100%;
  min-height: 2.75rem;
  padding: var(--luft-2) var(--luft-3);
  border: 1px solid transparent;
  border-radius: var(--rund-klein);
  background: transparent;
  color: var(--text);
  text-align: left;
}

.vorschlag:hover:not(:disabled) {
  border-color: var(--rand);
  background: var(--hintergrund);
}

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

.vorschlag small {
  flex-shrink: 0;
  color: var(--text-schwach);
  font-size: 0.75rem;
}

/* Was schon im Plan steht, bleibt sichtbar, aber nicht waehlbar.
   Auszublenden hiesse, jemanden suchen zu lassen, was da ist. */
.vorschlag.belegt {
  opacity: 0.45;
}

/* Zwei Zeilen je Knopf: die Handlung oben, ihre Folge darunter. Bei
   einer Frage, die sich nicht rueckgaengig machen laesst, gehoert die
   Folge an den Knopf und nicht in den Fliesstext darueber. */
.dialog-knoepfe.senkrecht {
  flex-direction: column;
}

.dialog-knoepfe.senkrecht .knopf {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  text-align: left;
  padding: var(--luft-3) var(--luft-4);
}

.dialog-knoepfe.senkrecht .knopf small {
  font-weight: 400;
  font-size: 0.8rem;
  opacity: 0.75;
}

/* --- 7b. Schnellwahl waehrend der Eingabe ------------------------- */

/* Erscheint nur, solange ein Zahlenfeld dieser Zeile bearbeitet wird.
   Dauerhaft sichtbar waeren es sechs zusaetzliche Knoepfe je Zeile -
   genau der Ballast, den die Ansicht nicht haben soll. */
.schnellwahl {
  grid-column: 1 / -1;
  grid-row: 4;
  display: flex;
  flex-wrap: wrap;
  gap: var(--luft-2);
  margin-top: var(--luft-2);
}

.stufe {
  flex: 1 1 0;
  /* Tippziel nach 03-regeln.md - hier arbeitet der Daumen, waehrend
     die Tastatur schon offen ist. */
  min-height: 2.75rem;
  min-width: 3.25rem;
  padding: var(--luft-1) var(--luft-2);
  border: 1px solid var(--rand);
  border-radius: var(--rund-klein);
  background: var(--flaeche);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.stufe:active {
  background: var(--akzent-schwach);
  border-color: var(--akzent);
  color: var(--akzent);
}

/* --- 7c. Ziehen zum Umsortieren ----------------------------------- */

/* Ein eigener Griff, weil Wischen die Waagerechte und Scrollen die
   Senkrechte schon besetzt haben. Nur von hier aus beginnt ein
   Ziehen - sonst waere jede Bewegung mehrdeutig. */
.ziehgriff {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--rund-klein);
  background: transparent;
  color: var(--text-schwach);
  cursor: grab;
  /* Der Griff gehoert der Geste, nicht der Seite - ohne das scrollt
     der Browser mit, sobald man losfaehrt. */
  touch-action: none;
}

.ziehgriff:active {
  cursor: grabbing;
  color: var(--text);
}

.ziehgriff svg {
  width: 1rem;
  height: 1rem;
}

/* Die gezogene Zeile schwebt ueber allem und faengt selbst keine
   Treffer ab: nur so findet elementFromPoint, was darunter liegt. */
.zeile.schwebt {
  position: fixed;
  z-index: 24;
  pointer-events: none;
  /* Eigene Ebene, solange gezogen wird. Damit zeichnet der Browser
     den Schatten einmal statt in jedem Bild neu, und die Bewegung
     kostet nichts als das Verschieben dieser Ebene. */
  will-change: transform;
  border: 1px solid var(--akzent);
  border-radius: var(--rund);
  box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 0.7);
}

.zeile.schwebt .zeile-inhalt {
  transition: none;
}

/* Haelt die Luecke offen. Ohne ihn springt alles darunter hoch und
   der Zielort wandert unter dem Finger weg. */
.zeile-platzhalter {
  border: 1px dashed var(--akzent-schwach);
  border-radius: var(--rund-klein);
  background: var(--akzent-schwach);
  opacity: 0.5;
}

/* --- 8. Nebenwerte: vorheriger Stand und Peak --------------------- */

.nebenwerte {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--luft-3);
  padding-left: calc(var(--luft-1) + var(--luft-2));
  font-size: 0.8rem;
  color: var(--text-schwach);
  font-variant-numeric: tabular-nums;
}

.nebenwerte:empty {
  display: none;
}

.nebenwert {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  white-space: nowrap;
}

.nebenwert b {
  font-weight: 400;
  color: var(--text);
}

/* Der Peak ist der eine Wert, um den es geht - er bekommt den Akzent.
   Mehr als eine Hervorhebung je Zeile, und bei zwanzig Zeilen
   leuchtet die ganze Seite. */
.nebenwert.peak b {
  color: var(--akzent);
}

.nebenwert.peak.erreicht::after {
  content: "✓";
  color: var(--erfolg);
}

.nebenwert.hoch b { color: var(--erfolg); }
.nebenwert.runter b { color: var(--fehler); }

/* Wie weit es bis zum Peak noch ist. Steht bewusst hinter dem
   Peakwert und nicht bei den aktuellen Zahlen: es ist eine Auskunft
   ueber den Peak, keine dritte Zahl in der Zeile. */
.nebenwert .abstand {
  margin-left: 0.25rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-schwach);
}

/* Der Trendpfeil. Ein Zeichen, keine Flaeche - bei zwanzig Zeilen
   waere jede farbige Plakette zu viel. Die Bedeutung steht als Text
   im title und im aria-label, sonst waere die Farbe die einzige
   Auskunft. */
.trend {
  font-size: 0.95rem;
  line-height: 1;
  color: var(--text-schwach);
}

.trend.hoch { color: var(--erfolg); }
.trend.runter { color: var(--fehler); }

/* Auf der Karte steht der Pfeil neben dem Namen, nicht am Zeilenende:
   dort gaebe es keine Zeile, an deren Ende er sitzen koennte. */
.verlauf-name {
  display: inline-flex;
  align-items: center;
  gap: var(--luft-2);
}

.verlauf-name .trend {
  margin-left: 0;
  padding-left: 0;
}

/* --- 9. Wischen zum Loeschen -------------------------------------- */

/* Liegt hinter der Zeile und wird sichtbar, wenn die Zeile nach links
   zieht. Eine deckende Flaeche ist hier die Ausnahme von "Kanten
   statt Flaechen": sie ist nur waehrend der Geste zu sehen, und eine
   Loeschflaeche, die man suchen muss, ist keine. */
.loeschflaeche {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: stretch;
  /* Unsichtbar, solange nicht gewischt wird. Der deckende
     Zeileninhalt darueber verdeckt sie zwar, aber an der gerundeten
     Ecke und bei krummen Geraetepixeln blitzt sonst ein roter Faden
     am Rand durch. Nicht visibility: hidden - damit fiele der Knopf
     aus der Tastaturreihenfolge. */
  opacity: 0;
  transition: opacity var(--takt-kurz) var(--schwung-weich);
}

.zeile.zieht .loeschflaeche,
.zeile.offen .loeschflaeche,
.tag-kopf.zieht .loeschflaeche,
.tag-kopf.offen .loeschflaeche,
.loeschflaeche:focus-within {
  opacity: 1;
}

.zeile.zieht .loeschflaeche,
.tag-kopf.zieht .loeschflaeche {
  transition: none;
}

.loeschknopf {
  display: grid;
  place-items: center;
  width: 5rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: var(--fehler);
  color: var(--flaeche);
}

.loeschknopf svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Mit der Tastatur gibt es keine Wischgeste. Springt der Fokus auf
   den Loeschknopf, faehrt die Zeile von selbst zur Seite - sonst
   stuende der Fokus auf etwas Unsichtbarem. */
.zeile:has(.loeschknopf:focus-visible) .zeile-inhalt,
.tag-kopf:has(.loeschknopf:focus-visible) .tag-kopf-inhalt {
  transform: translateX(-5rem);
}

.tag-kopf-inhalt {
  transition: transform var(--takt) var(--schwung);
}

.tag-kopf.zieht .tag-kopf-inhalt {
  transition: none;
}

/* Der X-Knopf ist die Fassung fuer Zeigergeraete. Am Telefon
   uebernimmt die Wischgeste, dort ist er im Weg. */
.zeile-knopf {
  display: none;
}

/* Sprung in den Verlauf der Uebung, direkt aus der Planzeile.
   Bewusst der gedaempfte Akzent auf seiner eigenen Flaeche und nicht
   der volle: der Akzent soll je Ansicht eine Sache markieren, und bei
   zwanzig Zeilen waeren zwanzig volle Lila-Knoepfe genau das
   Gegenteil. Als Lila erkennbar bleibt er trotzdem. */
.verlaufknopf {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--rund-klein);
  background: var(--akzent-schwach);
  color: var(--akzent);
  transition:
    background-color var(--takt-kurz) var(--schwung-weich),
    transform var(--takt-kurz) var(--schwung);
}

.verlaufknopf svg {
  width: 1.0625rem;
  height: 1.0625rem;
}

.verlaufknopf:active {
  transform: scale(0.92);
}

/* "War heute genauso." Gedaempft, solange es aussteht - bei zwanzig
   Zeilen ist das zwanzigmal derselbe Knopf, und keiner davon ist die
   Hauptsache der Ansicht. Erledigt bekommt er die Erfolgsfarbe: ein
   Blick auf die Spalte sagt dann, was heute schon steht. */
.wiederknopf {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--rund-klein);
  background: transparent;
  color: var(--text-schwach);
  transition:
    color var(--takt-kurz) var(--schwung-weich),
    background-color var(--takt-kurz) var(--schwung-weich),
    transform var(--takt-kurz) var(--schwung);
}

.wiederknopf svg {
  width: 1.125rem;
  height: 1.125rem;
}

.wiederknopf:active {
  transform: scale(0.92);
}

.wiederknopf.fertig {
  color: var(--erfolg);
}

/* Ohne Zahlen gibt es nichts festzuhalten. Der Knopf bleibt stehen,
   damit die Zeilen nicht unterschiedlich breit werden - er sagt nur
   nichts mehr. */
.wiederknopf:disabled {
  opacity: 0.25;
  cursor: default;
}

/* Die Anlegezeile am Ende der Tabelle. */
.zeile-fuss {
  padding: var(--luft-2) var(--luft-3);
  border-top: 1px solid var(--rand);
}

/* --- 8b. Die Maske zum Nachtragen --------------------------------- */

/* Wie das Menue: am Telefon ein Blatt von unten, am Schreibtisch ein
   Kasten in der Mitte. Die Regel steht unten im breiten Abschnitt. */
.masken-karte {
  /* Am Telefon ein Blatt von unten, wie Menue und Import: dort ist der
     Daumen. Der breite Abschnitt weiter unten rueckt es in die Mitte. */
  width: 100%;
  max-height: 92dvh;
  overflow-y: auto;
  border-radius: var(--rund) var(--rund) 0 0;
  padding-bottom: calc(var(--luft-4) + var(--rand-unten, env(safe-area-inset-bottom)));
  display: flex;
  flex-direction: column;
  gap: var(--luft-3);
}

.masken-karte h3 {
  margin: 0;
}

.masken-karte .leer {
  margin: 0;
}

.masken-felder {
  display: flex;
  flex-direction: column;
  gap: var(--luft-2);
}

/* Beschriftung und Feld nebeneinander, Beschriftungen auf gleicher
   Breite - so stehen die Felder auf einer Kante, statt je nach Laenge
   des Wortes zu versetzen. */
.masken-feld {
  display: flex;
  align-items: center;
  gap: var(--luft-3);
  min-height: 2.75rem;
}

.masken-name {
  flex: 0 0 7rem;
  color: var(--text-schwach);
  font-size: 0.85rem;
}

.masken-feld input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--rand);
  border-radius: var(--rund-klein);
  padding: var(--luft-2) var(--luft-3);
  background: var(--hintergrund);
}

.masken-feld input:focus-visible {
  border-color: var(--akzent);
}

/* Die Satzspanne teilt sich eine Zeile: "2" bis "3". Das zweite Feld
   traegt seine eigene, kurze Beschriftung. */
.masken-spanne {
  display: flex;
  align-items: center;
  gap: var(--luft-2);
}

.masken-spanne .masken-feld {
  flex: 1;
  min-width: 0;
}

.masken-spanne .masken-feld:last-child .masken-name {
  flex: 0 0 auto;
}

.masken-hinweis {
  margin: 0;
}

/* Luft zwischen den Abschnitten des Blattes. mahiru.css gibt den
   Ueberschriften nur Abstand nach unten - stand darueber eine
   Knopfreihe, kam ihr eigener Abstand dazu; stand dort ein einzelner
   Knopf, klebte die naechste Ueberschrift daran. */
.feld h2 + * {
  margin-top: 0;
}

.feld h2:not(:first-of-type) {
  margin-top: var(--luft-4);
}

/* --- 9b. Wischbare Karten ----------------------------------------- */

/* Dieselbe Geste wie bei den Planzeilen, nur um eine Karte herum. Der
   Aufbau muss derselbe sein: aussen wird geklippt, innen wird
   geschoben, die Loeschflaeche liegt dahinter. */
.wischbar {
  position: relative;
  overflow: hidden;
  border-radius: var(--rund);
  touch-action: pan-y;
}

.wisch-inhalt {
  position: relative;
  z-index: 1;
  transition: transform var(--takt) var(--schwung);
}

.wischbar.zieht .wisch-inhalt {
  transition: none;
}

.wischbar.zieht .loeschflaeche,
.wischbar.offen .loeschflaeche {
  opacity: 1;
}

.wischbar:has(.loeschknopf:focus-visible) .wisch-inhalt {
  transform: translateX(-5rem);
}

/* --- 10. Verlauf -------------------------------------------------- */

.liste {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--luft-3);
  margin: 0;
  padding: 0;
}

.verlauf-karte {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--luft-2);
  align-items: center;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.verlauf-titel {
  min-width: 0;
  font-weight: 700;
}

.verlauf-titel .leer {
  margin: 0.125rem 0 0;
  font-weight: 400;
}

.kennzahlen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--luft-4);
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
}

.kennzahl span {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-schwach);
}

.kennzahl.hoch b { color: var(--erfolg); }
.kennzahl.runter b { color: var(--fehler); }
.kennzahl.peak b { color: var(--akzent); }

.kurve {
  grid-column: 1 / -1;
  width: 100%;
  height: 2.5rem;
}

/* --- 11. Diagramm ------------------------------------------------- */

.kurve .linie,
.diagramm .linie {
  fill: none;
  stroke: var(--akzent);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.kurve .flaeche,
.diagramm .flaeche {
  fill: rgb(var(--akzent-rgb) / 0.12);
  stroke: none;
}

.diagramm {
  width: 100%;
  height: auto;
  margin: var(--luft-4) 0;
}

.diagramm .gitter {
  stroke: var(--rand);
  stroke-width: 1;
}

.diagramm .achse {
  fill: var(--text-schwach);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.diagramm .punkt {
  fill: var(--akzent);
}

/* Die Wiederholungen liegen auf einer eigenen Skala und treten
   zurueck: sie sind die Nebenauskunft zum Gewicht. */
.diagramm .linie-wdh {
  fill: none;
  stroke: var(--text-schwach);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

.diagramm .marke-peak {
  stroke: var(--akzent);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--luft-3);
  font-size: 0.8rem;
  color: var(--text-schwach);
}

.legende span {
  display: inline-flex;
  align-items: center;
  gap: var(--luft-1);
}

.legende i {
  width: 0.75rem;
  height: 0;
  border-top: 2px solid currentColor;
}

.legende .gewicht { color: var(--akzent); }

/* --- 12. Die Punkte einer Uebung ---------------------------------- */

/* Dieselben Klassen wie die Planzeilen: zeile, zeile-inhalt,
   zahlenzeile, zeilen-knoepfe. Nur die erste Spalte traegt hier ein
   Datum statt eines Namens. */
.punkte-liste {
  --spalten: minmax(0, 1fr) 4.5rem 4.5rem 5.5rem 4.25rem;
  margin-top: var(--luft-4);
}

input.blanko.punkt-datum {
  font-variant-numeric: tabular-nums;
  /* Nur so breit wie das Datum. Ueber die volle Spalte gezogen sitzt
     das Kalendersymbol am rechten Rand und sieht dort aus wie ein
     verirrter Kasten statt wie ein Teil des Feldes. */
  width: auto;
  min-width: 0;
  max-width: 100%;
}

/* Das Kalendersymbol tritt zurueck, bis man die Zeile anfasst - in
   einer Liste von zwanzig Eintraegen sind zwanzig blaue Symbole
   Laerm. */
input.blanko.punkt-datum::-webkit-calendar-picker-indicator {
  opacity: 0.35;
  filter: invert(1);
  cursor: pointer;
}

.zeile:hover input.blanko.punkt-datum::-webkit-calendar-picker-indicator,
input.blanko.punkt-datum:focus::-webkit-calendar-picker-indicator {
  opacity: 0.8;
}

.punkte-hinweis {
  margin: var(--luft-3) 0 0;
}

/* --- 13. Menue als Blatt von unten -------------------------------- */

/* mahiru.css legt .feld an den oberen Rand. Am Telefon sitzt der
   ausloesende Knopf unten, also kommt das Feld von dort - alles
   andere waere eine Bewegung weg vom Finger. */
.feld {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: auto;
  /* Hoeher als die Leiste am unteren Rand - und weil das Feld auf
     Koerperebene steht, gilt die Zahl auch wirklich. Lag es in der
     Kopfzeile, wurde es mit deren z-index einsortiert und verschwand
     hinter der Leiste, egal wie gross die Zahl hier war. */
  z-index: 25;
  max-height: 75dvh;
  border-radius: var(--rund) var(--rund) 0 0;
  border-bottom: none;
  padding: var(--luft-3) var(--luft-5);
  padding-bottom: calc(var(--luft-5) + var(--rand-unten, env(safe-area-inset-bottom)));
}

.feld[hidden] {
  transform: translateY(100%);
}

@starting-style {
  .feld:not([hidden]) {
    transform: translateY(100%);
  }
}

/* Der Griff sagt ohne Worte, dass das Blatt von unten kommt. */
.griff {
  width: 2.25rem;
  height: 0.25rem;
  margin: 0 auto var(--luft-4);
  border-radius: var(--rund-voll);
  background: var(--rand);
}

.menue-gruppe {
  display: flex;
  flex-direction: column;
  gap: var(--luft-1);
  margin-bottom: var(--luft-3);
}

/* Plan waehlen links, Plan loeschen rechts. Getrennte Knoepfe, damit
   ein Fehlgriff hoechstens den falschen Plan aktiviert. */
.menue-zeile {
  display: flex;
  align-items: center;
  gap: var(--luft-1);
}

.menue-zeile .menue-eintrag {
  flex: 1;
  min-width: 0;
}

.menue-loeschen {
  flex-shrink: 0;
  min-height: 2.75rem;
  min-width: 2.75rem;
  border-color: transparent;
  background: transparent;
}

.menue-loeschen:hover {
  color: var(--fehler);
}

.menue-eintrag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--luft-2);
  width: 100%;
  min-height: 2.75rem;
  text-align: left;
  border-color: transparent;
  background: transparent;
}

.menue-eintrag:hover { border-color: var(--rand); }
.menue-eintrag.aktiv { color: var(--akzent); }

.menue-eintrag small {
  color: var(--text-schwach);
  font-variant-numeric: tabular-nums;
}

.menue-knoepfe,
.dialog-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--luft-2);
  margin-top: var(--luft-3);
}

/* Luft vor der naechsten Ueberschrift. Ohne das klebt "Import"
   unmittelbar an den Knoepfen darueber und sieht aus, als gehoere es
   noch zum Plan. */
.menue-knoepfe {
  margin-bottom: var(--luft-5);
}

.menue-knoepfe .knopf,
.dialog-knoepfe .knopf {
  flex: 1 1 8rem;
  min-height: 2.75rem;
}

.willkommen h3 { margin: 0 0 var(--luft-2); }

.zurueck { margin-bottom: var(--luft-4); }

/* --- 14. Import --------------------------------------------------- */

.schicht {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: end center;
  background: rgb(0 0 0 / 0.7);
  overflow-y: auto;
}

.import-kasten {
  width: 100%;
  max-height: 92dvh;
  overflow-y: auto;
  border-radius: var(--rund) var(--rund) 0 0;
  padding-bottom: calc(var(--luft-4) + var(--rand-unten, env(safe-area-inset-bottom)));
}

.import-kasten h3 {
  margin: 0 0 var(--luft-2);
}

.import-kasten code {
  font-family: var(--schrift-fest);
  font-size: 0.85em;
  color: var(--text);
}

.import-kasten textarea {
  font-family: var(--schrift-fest);
  resize: vertical;
}

.import-vorschau {
  margin-top: var(--luft-3);
  padding: var(--luft-3);
  border: 1px solid var(--rand);
  border-radius: var(--rund-klein);
  background: var(--hintergrund);
  font-size: 0.85rem;
  max-height: 12rem;
  overflow-y: auto;
}

.import-vorschau h4 {
  margin: var(--luft-3) 0 var(--luft-1);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-schwach);
}

.import-vorschau h4:first-child { margin-top: 0; }

.import-vorschau ul {
  margin: 0;
  padding-left: var(--luft-4);
  color: var(--text-schwach);
  font-variant-numeric: tabular-nums;
}

.import-vorschau .ohne-zahlen { color: var(--fehler); }

/* --- 14b. Rueckfragen --------------------------------------------- */

/* Fuer alles, was sich nicht nebenbei beantworten laesst: jedes
   Loeschen, und die Frage ob ein neuer Name ein Umbenennen ist.

   Mittig und klein, nicht als Blatt von unten: sie unterbricht, und
   das soll sie auch. Aber sie nimmt nur so viel Platz wie noetig -
   eine Frage, die den ganzen Bildschirm fuellt, liest man nicht,
   sondern wischt sie weg. */
.frage-schicht {
  place-items: center;
  padding: var(--luft-4);
  padding-bottom: calc(var(--luft-4) + var(--rand-unten, env(safe-area-inset-bottom)));
}

.frage-karte {
  width: min(24rem, 100%);
  max-height: 85dvh;
  overflow-y: auto;
  border-radius: var(--rund);
}

.frage-karte h3 {
  margin: 0 0 var(--luft-3);
  font-size: 1.05rem;
  line-height: 1.35;
}

/* Die Bilanz: links wovon, rechts wie viel. Zahlen untereinander und
   dicktengleich, damit man sie vergleichen kann statt sie zu lesen.
   Bei einer Uebung mit jahrelangem Verlauf steht hier die Anzahl und
   der Zeitraum - nicht jeder Eintrag einzeln, das waere eine Liste
   und keine Frage. */
.bilanz {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--luft-1) var(--luft-4);
  margin: 0 0 var(--luft-3);
  padding: var(--luft-3);
  border: 1px solid var(--rand);
  border-radius: var(--rund-klein);
  background: var(--hintergrund);
  font-size: 0.9rem;
}

.bilanz dt {
  color: var(--text-schwach);
  min-width: 0;
}

.bilanz dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Die kleine Kurve zeigt in einer Zeile, was eine Tabelle mit
   dreihundert Eintraegen nicht zeigen koennte: dass da etwas ist. */
.frage-karte .kurve {
  height: 3rem;
  margin-bottom: var(--luft-3);
}

/* Was NICHT verlorengeht. Steht bewusst dabei: ohne den Satz haelt
   man jedes Loeschen fuer endgueltig und traut sich an keins. */
.bleibt {
  display: flex;
  align-items: baseline;
  gap: var(--luft-2);
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-schwach);
}

.bleibt .haken {
  color: var(--erfolg);
  flex-shrink: 0;
}

/* --- 15. Rueckmeldung --------------------------------------------- */

/* Frueher stand das in einer Fusszeile. Die ist der Leiste gewichen,
   also schwebt die Meldung jetzt darueber und geht von selbst wieder
   weg. */
.hinweis {
  position: fixed;
  left: 50%;
  bottom: calc(4.5rem + var(--rand-unten, env(safe-area-inset-bottom)));
  z-index: 26;
  margin: 0;
  padding: var(--luft-2) var(--luft-4);
  border: 1px solid var(--rand);
  border-radius: var(--rund-voll);
  background: var(--flaeche);
  color: var(--text-schwach);
  font-size: 0.85rem;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
  transition:
    opacity var(--takt) var(--schwung),
    transform var(--takt) var(--schwung),
    display var(--takt) allow-discrete;
}

.hinweis.fehler {
  color: var(--fehler);
  border-color: var(--fehler);
}

.hinweis[hidden] {
  opacity: 0;
  transform: translateX(-50%) translateY(0.5rem);
}

@starting-style {
  .hinweis:not([hidden]) {
    opacity: 0;
    transform: translateX(-50%) translateY(0.5rem);
  }
}

/* --- 16. Ab Tablet: zurueck zur Tabelle --------------------------- */

@media (min-width: 40rem) {
  .inhalt {
    padding-bottom: var(--luft-6);
  }

  .nur-breit {
    display: flex;
  }

  /* Die Leiste unten gehoert dem Daumen. Mit Maus und Tastatur sitzt
     die Navigation oben, wo auch das Logo steht. */
  .tableiste {
    display: none;
  }

  .reiter {
    display: flex;
    gap: var(--luft-1);
  }

  .reiterknopf {
    min-height: 2.75rem;
    padding: var(--luft-2) var(--luft-3);
  }

  .reiterknopf.aktiv {
    color: var(--akzent);
    border-color: var(--akzent-schwach);
  }

  /* Vier Spalten mit Kopfzeile: am Schreibtisch liest sich eine
     Tabelle besser als gestapelte Karten. */
  .tabelle-kopf {
    display: grid;
    grid-template-columns: var(--spalten);
    gap: var(--luft-2);
    align-items: center;
    padding: var(--luft-2) var(--luft-3);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-schwach);
    border-bottom: 1px solid var(--rand);
  }

  .tabelle-kopf span {
    text-align: right;
  }

  .tabelle-kopf .kopf-name {
    text-align: left;
  }

  .zeile-inhalt {
    grid-template-columns: var(--spalten);
    row-gap: var(--luft-1);
    padding: var(--luft-2) var(--luft-3);
  }

  .zelle-name,
  .tag .zelle-name,
  .tag .zahlenzeile,
  .tag .zeilen-knoepfe {
    grid-column: auto;
  }

  .tag .zeile-inhalt {
    grid-template-columns: var(--spalten);
  }

  /* Die Spalte ist hier genau so breit wie der Knopf, damit
     Kopfzeile und Zeilen dieselben Spaltenkanten haben. */
  .zeilen-griff {
    grid-column: 1;
    grid-row: 1;
    margin-left: 0;
  }

  /* display: contents reicht die drei Zellen ans Raster durch, ohne
     eine Ebene dazwischenzuschieben. */
  .zahlenzeile {
    display: contents;
  }

  .zelle-zahl {
    justify-content: flex-end;
  }

  /* Die Mal-Zeichen gehoeren zur Schreibweise der Notizen. In der
     Tabelle sagen die Spaltenkoepfe dasselbe. */
  .mal {
    display: none;
  }

  /* Die letzte Spalte traegt beide Knoepfe nebeneinander. Der Wert
     gehoert an die Tabelle und nicht an die Zeile: die Kopfzeile
     liest dieselbe Variable, und stuende sie nur an der Zeile, liefen
     Beschriftungen und Werte auseinander. */
  .tabelle {
    --spalten: 2.25rem minmax(0, 1fr) 4.5rem 4.5rem 5.5rem 9rem;
  }

  /* Die Punktliste ist auch eine .tabelle, hat aber keinen Ziehgriff
     und darum eine Spalte weniger. Ohne diese Zeile gewinnt die Regel
     darueber - gleiche Spezifitaet, spaeter im Stylesheet -, die
     Liste bekaeme sechs Spalten fuer fuenf Zellen, und das Datum
     saesse in der schmalen Griffspalte. Genau das war der Fall. */
  .punkte-liste {
    --spalten: minmax(0, 1fr) 4.5rem 4.5rem 5.5rem 4.25rem;
  }

  .zeilen-knoepfe {
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
    flex-direction: row;
    gap: var(--luft-1);
    justify-content: flex-end;
  }

  .zahlenzeile {
    grid-column: auto;
    grid-row: auto;
  }

  .nebenwerte {
    grid-row: auto;
  }

  .schnellwahl {
    grid-row: auto;
  }

  /* Mit Maus und Tastatur ist der Schreibzeiger kein Problem. Die
     Schnellwahl bleibt trotzdem - sie ist auch dort der kuerzere Weg
     zu "zweieinhalb Kilo mehr". Nur schmaler, weil hier Platz ist und
     sie sonst die halbe Tabelle einnimmt. */
  .stufe {
    flex: 0 0 auto;
    min-height: 2rem;
    min-width: 2.75rem;
    font-weight: 400;
  }

  .verlaufknopf {
    width: 1.875rem;
    height: 1.875rem;
  }

  .verlaufknopf svg {
    width: 0.9375rem;
    height: 0.9375rem;
  }

  .verlaufknopf:hover {
    background: var(--akzent);
    color: #fff;
  }

  .wiederknopf {
    width: 1.875rem;
    height: 1.875rem;
  }

  .wiederknopf svg {
    width: 1rem;
    height: 1rem;
  }

  .wiederknopf:hover:not(:disabled) {
    background: var(--flaeche-hoch, var(--hintergrund));
    color: var(--erfolg);
  }

  .zeile-knopf {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-color: transparent;
    background: transparent;
    color: var(--text-schwach);
    opacity: 0;
    transition: opacity var(--takt-kurz) var(--schwung-weich);
  }

  .zeile-knopf svg { width: 0.875rem; height: 0.875rem; }
  .zeile-knopf:hover { color: var(--fehler); }

  /* Erscheint beim Darueberfahren. Zwanzig Kreuze untereinander sind
     Laerm, solange man keines davon braucht. */
  .zeile:hover .zeile-knopf,
  .zeile:focus-within .zeile-knopf,
  .zeile-knopf:focus-visible {
    opacity: 1;
  }

  /* Mit Zeigergeraet gibt es keine Wischgeste - dort ist der Knopf
     der Weg. */
  .loeschflaeche {
    display: none;
  }

  .tag-kopf:hover .tag-knopf,
  .tag-kopf:focus-within .tag-knopf {
    opacity: 1;
  }

  .nebenwerte {
    grid-column: 1 / -1;
    padding-left: var(--luft-2);
  }

  .beschriftung {
    display: none;
  }

  .tag-kopf-inhalt {
    padding: 0;
  }

  .verlauf-karte {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--luft-2) var(--luft-4);
  }

  .kennzahlen {
    flex-wrap: nowrap;
  }

  .kennzahl {
    text-align: right;
  }

  /* Das Menue faellt wieder von oben herunter, unter seinem Knopf.
     Weiterhin fixed und nicht absolute: es steht auf Koerperebene und
     haette sonst keinen Bezugspunkt ausser der Seite selbst. */
  .feld {
    top: 3.5rem;
    right: var(--luft-4);
    left: auto;
    bottom: auto;
    width: min(20rem, calc(100vw - 2rem));
    max-height: 60vh;
    border-radius: var(--rund);
    border-bottom: 1px solid var(--rand);
    padding: var(--luft-4);
  }

  .feld[hidden] {
    transform: translateY(-0.45rem) scale(0.975);
  }

  @starting-style {
    .feld:not([hidden]) {
      transform: translateY(-0.45rem) scale(0.975);
    }
  }

  .griff {
    display: none;
  }

  .schicht {
    place-items: center;
    padding: var(--luft-4);
  }

  .masken-karte {
    width: min(26rem, 100%);
    max-height: 100%;
    border-radius: var(--rund);
    padding-bottom: var(--luft-4);
  }

  .import-kasten {
    width: min(38rem, 100%);
    max-height: 100%;
    border-radius: var(--rund);
    padding-bottom: var(--luft-4);
  }

  .hinweis {
    left: auto;
    right: var(--luft-5);
    bottom: var(--luft-5);
    transform: none;
  }

  .hinweis[hidden] {
    transform: translateY(0.5rem);
  }

  @starting-style {
    .hinweis:not([hidden]) {
      transform: translateY(0.5rem);
    }
  }
}