/*
  Das Aussehen der Weboberflaeche.

  Dieselbe Sprache wie in der App: heller Grund, weisse Karten mit weichem
  Schatten, Lila als Hausfarbe, Gruen fuer Fortschritt, dicke runde Ecken.
  Wer zwischen Telefon und Bildschirm wechselt, soll nicht umdenken muessen.

  Alles ueber Variablen. Eine Farbe, die an zwanzig Stellen steht, aendert
  man nie wieder.
*/
:root {
  --grund: #f3f5fc;
  --karte: #ffffff;
  --erhoben: #ecf0fa;
  --linie: rgba(27, 35, 64, 0.08);
  --schrift: #15192b;
  --gedaempft: #6b7490;
  --blass: #9aa2b8;

  --marke: #7a5cff;
  --marke-tief: #5b3fd6;
  --marke-blass: #efe9ff;
  --gut: #1fc776;
  --gut-blass: #d8f6ec;
  --warnung: #ffa726;
  --warnung-blass: #fff3dc;
  --gefahr: #ff5a7a;
  --gefahr-blass: #ffe9ef;
  --kalt: #3c8dff;
  --kalt-blass: #e4efff;

  --r1: 14px;
  --r2: 18px;
  --r3: 26px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --schatten: 0 10px 28px rgba(27, 35, 64, 0.07), 0 2px 6px rgba(27, 35, 64, 0.04);
}

* { box-sizing: border-box; }

/*
  Das hidden-Merkmal muss stechen.

  Der Browser bringt dafuer die Regel [hidden] { display: none } mit, aber die
  steht in SEINEM Blatt. Jede eigene display-Angabe gewinnt dagegen, ganz
  egal wie unscheinbar der Wahlspruch ist: eigene Blaetter liegen in der
  Rangfolge ueber dem des Browsers. Weil .anmeldung und .hülle beide
  display: grid setzen, blieb die Anmeldekarte also stehen, auch nachdem die
  Sitzung schon stand. Man tippte Mail und Passwort, die Seite lud neu, und
  dieselbe Karte war wieder da: aussen sieht das aus wie ein falsches
  Passwort, innen war man laengst drin.
*/
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.01em; }
h1 { font-size: 26px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
p { margin: 0; }
a { color: var(--marke); text-decoration: none; }

.gedaempft { color: var(--gedaempft); }
.blass { color: var(--blass); }
.klein { font-size: 12px; }
.mono { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ Anmeldung */
.anmeldung {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--s4);
}
.anmeldekarte { width: min(380px, 100%); display: grid; gap: var(--s3); }
.anmeldekarte label { font-size: 12px; color: var(--gedaempft); font-weight: 600; }
.anmeldekarte input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--linie);
  border-radius: var(--r2);
  background: var(--erhoben);
  font-size: 15px;
  color: var(--schrift);
}
.fehler { color: var(--gefahr); font-size: 13px; }

/* --------------------------------------------------------------- Huelle */
.hülle {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

.seitenleiste {
  background: var(--karte);
  border-right: 1px solid var(--linie);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  position: sticky;
  top: 0;
  height: 100vh;
}

.marke { display: flex; align-items: center; gap: var(--s2); font-weight: 800; font-size: 17px; }
.markenpunkt {
  width: 22px; height: 22px; border-radius: 8px;
  background: linear-gradient(135deg, var(--marke), var(--marke-tief));
}

nav { display: grid; gap: 2px; }
nav button {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--r2);
  background: transparent;
  color: var(--gedaempft);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
nav button:hover { background: var(--erhoben); color: var(--schrift); }
nav button.aktiv { background: var(--marke-blass); color: var(--marke-tief); }
nav .zeichen { width: 20px; height: 20px; flex: 0 0 20px; }

.seitenfuss { margin-top: auto; display: grid; gap: var(--s2); }

/*
  Die Hauptflaeche nimmt den Platz, den der Bildschirm hergibt.

  Vorher stand hier max-width: 1180px. Auf einem grossen Schirm blieb rechts
  ein Drittel leer, und die Listen quetschten sich links zusammen, obwohl
  daneben nichts war. Eine Obergrenze braucht es trotzdem, sonst laufen Saetze
  ueber zwei Meter Breite und das Auge findet den Zeilenanfang nicht mehr.
  1760 ist die Grenze, ab der Text nicht mehr besser wird.
*/
main { padding: 0 32px 56px; width: 100%; min-width: 0; }

/*
  Der Kopf klebt oben. Wer in einer langen Liste nach unten liest, soll noch
  wissen, auf welcher Seite er ist und wo der Knopf zum Neuladen sitzt.
*/
.kopf {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4);
  padding: 22px 0 14px;
  margin-bottom: var(--s4);
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
}
.kopfwerkzeuge { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }

/*
  Zwoelf Spalten, und alles nimmt von allein die ganze Breite.

  Eine Seite muss nichts davon wissen: wer keine Breite angibt, bekommt die
  volle, genau wie vorher. Wer sich aber zu zweit eine Zeile teilen kann, sagt
  .halb und spart dem Leser das Scrollen. Die Leserichtung bleibt dabei von
  oben nach unten, anders als bei einem Mauerwerk aus Spalten, bei dem die
  wichtigste Karte unten rechts landet.
*/
.inhalt {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s4);
  align-items: start;
  max-width: 1760px;
}
.inhalt > * { grid-column: span 12; min-width: 0; }
.inhalt > .halb { grid-column: span 6; }
.inhalt > .drittel { grid-column: span 4; }
.inhalt > .zweidrittel { grid-column: span 8; }

/* --------------------------------------------------------------- Karten */
.karte {
  background: var(--karte);
  border-radius: var(--r3);
  padding: 20px;
  box-shadow: var(--schatten);
}
.karte.schmal { padding: 16px; }

/*
  Gitter mit auto-fit statt fester Spurenzahl: die Kacheln ordnen sich nach
  dem Platz, der da ist, und brechen nicht erst bei einer festen Schwelle um.
  So steht auf dem grossen Schirm eine Viererreihe und auf dem Laptop eine
  Zweierreihe, ohne dass ein Haltepunkt dafuer erfunden werden muss.
*/
.gitter { display: grid; gap: var(--s4); }
.gitter.zwei { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.gitter.drei { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.gitter.vier { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.gitter.eng { gap: var(--s3); }

.abschnitt {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gedaempft);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  margin-bottom: var(--s3);
}

/* ------------------------------------------------------------- Kennzahl */
.kachel { border-radius: var(--r3); padding: 16px; display: grid; gap: 6px; }
.kachel .wert { font-size: 22px; font-weight: 800; }
.kachel .bezeichnung { font-size: 11px; color: var(--gedaempft); }
.kachel.lila { background: var(--marke-blass); }
.kachel.gruen { background: var(--gut-blass); }
.kachel.blau { background: var(--kalt-blass); }
.kachel.gelb { background: var(--warnung-blass); }
.kachel.rot { background: var(--gefahr-blass); }

/* --------------------------------------------------------------- Knöpfe */
.knopf {
  border: 1px solid var(--linie);
  background: var(--karte);
  color: var(--schrift);
  font: inherit;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: var(--r2);
  cursor: pointer;
}
.knopf:hover { background: var(--erhoben); }
.knopf.voll { background: linear-gradient(135deg, var(--marke), var(--marke-tief)); color: #fff; border: 0; }
.knopf.voll:hover { filter: brightness(1.05); }
.knopf.gut { background: var(--gut); color: #fff; border: 0; }
.knopf.leise { background: transparent; border: 0; color: var(--gedaempft); }
.knopf.klein { padding: 6px 10px; font-size: 12px; }

/* --------------------------------------------------------------- Balken */
.spur { background: rgba(27,35,64,0.08); border-radius: 999px; overflow: hidden; height: 10px; position: relative; }
.spur > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--marke), var(--kalt), var(--gut)); }
.spur.duenn { height: 6px; }
.spur .marke-linie { position: absolute; top: -3px; bottom: -3px; width: 2px; background: rgba(27,35,64,0.35); }

/* ------------------------------------------------------------- Deckung */
/*
  Die eine Zahl, um die es geht: wie viel von den privaten Kosten das passive
  Einkommen traegt.

  Sie hat eine eigene Box, weil sie keine Kennzahl unter vielen ist. Der
  Balken ist absichtlich dick: ein Fortschrittsstrich von sechs Pixeln liest
  sich als Zierde, einer von zweiundzwanzig als Messgeraet. Die Marke bei
  hundert Prozent ist der Punkt, an dem der Haushalt ohne Arbeitszeit traegt,
  und sie muss sichtbar bleiben, auch wenn der Balken noch weit davon weg ist.
*/
.deckung {
  background: var(--karte);
  border-radius: var(--r3);
  box-shadow: var(--schatten);
  padding: 24px 26px 26px;
}
.deckung .kopfzeile {
  font-size: 11px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--gedaempft);
  margin-bottom: 14px;
}
.deckung .zahlzeile { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; }
/* Der Satz braucht Zeilenlaenge, sonst steht er als schmale Saeule neben der
   Zahl und liest sich wie ein Beipackzettel. */
.deckung .satz { flex: 1 1 380px; }
.deckung .prozent {
  font-size: 64px; line-height: 1; font-weight: 800; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.deckung .satz { font-size: 15px; color: var(--gedaempft); max-width: 70ch; }

/* Der dicke Balken mit Marke und Skalenschrift darunter. */
.messer { margin-top: 20px; }
.messer .spur { height: 22px; border-radius: 12px; background: var(--erhoben); }
.messer .spur > span { border-radius: 12px; }
.messer .spur .marke-linie { top: -4px; bottom: -4px; width: 3px; background: rgba(27,35,64,0.45); border-radius: 2px; }
.messer .skala {
  display: flex; justify-content: space-between; gap: var(--s2);
  margin-top: 7px; font-size: 12px; color: var(--gedaempft);
}
.messer.klein .spur { height: 10px; border-radius: 6px; }
.messer.klein { margin-top: 16px; }

/* Die Rechnung unter dem Balken: Zaehler, Nenner, Luecke. */
.rechnung {
  display: grid; gap: var(--s3); margin-top: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.rechnung .posten { padding: 14px 16px; border-radius: var(--r2); background: var(--erhoben); }
.rechnung .posten .wert { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rechnung .posten .was { font-size: 12px; color: var(--gedaempft); margin-top: 3px; }
.rechnung .posten.gut { background: var(--gut-blass); }
.rechnung .posten.warm { background: var(--warnung-blass); }
.rechnung .posten.kalt { background: var(--kalt-blass); }
.rechnung .posten.schlecht { background: var(--gefahr-blass); }

/* ---------------------------------------------------------------- Blatt */
/*
  Das Finanzblatt aus dem Cashflow-Spiel.

  Im Spiel liegt die Lehre nicht in den Zahlen, sondern in der Anordnung: ein
  Blatt, zwei Haelften, jede Haelfte zwei Spalten, und unter jeder Haelfte
  EINE Zahl, auf die alles zulaeuft. Oben der Geldfluss mit dem Zahltag,
  unten die Bilanz mit dem Vermoegen. Wer das sieht, versteht in einem Blick,
  warum ein hohes Gehalt und Freiheit zwei verschiedene Dinge sind.

  Darum ist das hier EIN Blatt mit Trennlinien und nicht eine Reihe einzelner
  Karten: vier Karten nebeneinander sehen aus wie vier Themen. Vier Spalten in
  einem Blatt sehen aus wie eine Rechnung, und genau das sind sie.
*/
.blatt {
  background: var(--karte);
  border-radius: var(--r3);
  box-shadow: var(--schatten);
  overflow: hidden;
}

.blattkopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding: 13px 18px;
  background: linear-gradient(135deg, var(--marke-blass), rgba(122, 92, 255, 0.04));
  border-bottom: 1px solid var(--linie);
  flex-wrap: wrap;
}
.blattkopf .titel {
  font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--marke-tief);
}
.blattkopf .unterzeile { font-size: 12px; color: var(--gedaempft); }

.blattkoerper { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.blattspalte { padding: 20px 22px 22px; min-width: 0; border-top: 1px solid var(--linie); }

/*
  Die Spalten tragen Farbe, nicht nur eine Trennlinie.

  Eine Haarlinie zwischen zwei weissen Spalten sieht man erst, wenn man sie
  sucht. Was herein kommt und was hinaus geht, soll man aber unterschieden
  haben, bevor man liest. Darum ein ganz blasser Grund und oben eine kraeftige
  Kante: gruen fuer herein, warm fuer hinaus. Blass genug, dass die Zahlen
  darauf ruhig bleiben.
*/
.blattspalte.herein { background: linear-gradient(180deg, rgba(31,199,118,0.07), rgba(31,199,118,0) 180px); }
.blattspalte.hinaus { background: linear-gradient(180deg, rgba(255,176,32,0.09), rgba(255,176,32,0) 180px); }
.blattspalte.besitz { background: linear-gradient(180deg, rgba(43,124,255,0.07), rgba(43,124,255,0) 180px); }
.blattspalte.schuld { background: linear-gradient(180deg, rgba(255,77,109,0.07), rgba(255,77,109,0) 180px); }
.blattspalte.herein { box-shadow: inset 0 3px 0 var(--gut); }
.blattspalte.hinaus { box-shadow: inset 0 3px 0 var(--warnung); }
.blattspalte.besitz { box-shadow: inset 0 3px 0 var(--kalt); }
.blattspalte.schuld { box-shadow: inset 0 3px 0 var(--gefahr); }

/*
  Der Spaltenkopf: Wort links, Summe rechts, und die Summe gross.

  Vorher stand sie als Kleingedrucktes neben der Ueberschrift und war von
  einer Zwischensumme nicht zu unterscheiden. Sie ist aber das Ergebnis der
  ganzen Spalte.
*/
.spaltenkopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.spaltenkopf .wort {
  font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.spaltenkopf .summe {
  font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  white-space: nowrap;
}
.blattspalte.herein .spaltenkopf .wort { color: #0e7a4a; }
.blattspalte.hinaus .spaltenkopf .wort { color: #9a5b00; }
.blattspalte.besitz .spaltenkopf .wort { color: #1b5fb8; }
.blattspalte.schuld .spaltenkopf .wort { color: #a3203b; }
/* Die erste Zeile Spalten braucht oben keine Linie, der Kopf trennt schon. */
.blattkoerper > .blattspalte:first-child { border-top: 0; }
@media (min-width: 620px) {
  .blattkoerper > .blattspalte:nth-child(-n+2) { border-top: 0; }
  .blattkoerper > .blattspalte:nth-child(2n) { border-left: 1px solid var(--linie); }
}

/*
  Der Fuss ist die Zahl, auf die das Blatt zulaeuft. Er hat einen eigenen
  Grund, damit er nicht als weitere Zeile gelesen wird.
*/
.blattfuss {
  border-top: 2px solid rgba(27, 35, 64, 0.14);
  background: var(--erhoben);
  padding: 14px 18px 16px;
}
.blattfuss .fussreihe { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.blattfuss .fussposten { display: grid; gap: 2px; }
.blattfuss .fussposten .wert { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.blattfuss .fussposten .was { font-size: 11px; color: var(--gedaempft); }
.blattfuss .fussposten.gross .wert { font-size: 28px; letter-spacing: -0.01em; }

/* ---------------------------------------------------------------- Zeilen */
/*
  Eine Zeile ist ein Gitter, kein Flex.

  Mit Flex steht jeder Betrag dort, wo sein eigener Text endet. Mit zwei
  Spuren stehen alle Betraege einer Spalte untereinander, und erst dann kann
  man zwei Zahlen vergleichen, ohne sie zu lesen. Genau darum geht es bei
  einer Auflistung.
*/
.zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: baseline;
  padding: 11px 8px;
  margin: 0 -8px;
  border-bottom: 1px solid var(--linie);
}
.zeile:last-child { border-bottom: 0; }
.zeile:hover { background: var(--grund); }
.zeile .name { font-weight: 600; }
.zeile .hinweis { font-size: 12px; color: var(--gedaempft); }
/* Hinweis und Marken teilen sich eine Zeile unter dem Namen: der Zustand
   gehoert NEBEN die Angabe, nicht darunter. Zwei halbleere Zeilen sind
   doppelt so hoch und sagen nicht mehr. */
.zeile .unterzeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px; }
.zeile .betrag { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; text-align: right; }
.zeile.stark .name, .zeile.stark .betrag { font-weight: 800; }
.zeile.gut .betrag { color: var(--gut); }
.zeile.schlecht .betrag { color: var(--gefahr); }
.zeile.klickbar { cursor: pointer; }
/* Eine Zeile mit Haken davor: Kasten, Inhalt, Betrag. */
.zeile.mithaken { grid-template-columns: auto minmax(0, 1fr) auto; }
.zeile .marken { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }

/*
  Die Zwischenueberschrift mit ihrer eigenen Summe, bis an den Kartenrand.

  Das Band ist der Grund, warum man in einer langen Spalte nicht die
  Orientierung verliert: es trennt sichtbar, ohne eine neue Karte zu
  brauchen. Im Spiel macht das die gedruckte Linie, hier der graue Streifen.
*/
.band {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2);
  margin: 24px -22px 6px;
  padding: 7px 22px;
  background: var(--erhoben);
  font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--gedaempft);
}
.band:first-child { margin-top: 0; }
.band .summe { font-variant-numeric: tabular-nums; color: var(--schrift); }

/*
  Der Abschluss einer Spalte. Zwei Linien, wie auf Papier: die obere trennt
  die Summe von den Posten, die untere schliesst ab.
*/
.abschluss { margin-top: 16px; padding-top: 8px; border-top: 2px solid rgba(27, 35, 64, 0.14); }

/* ------------------------------------------------------------------- Held */
/*
  Die Freiheitszahl quer ueber die Breite: Zahl links, Weg rechts.
  Untereinander waere beides klein. Nebeneinander ist die Zahl gross und der
  Balken lang genug, dass man die Stufen darauf unterscheiden kann.
*/
.held { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--s5); align-items: center; }
.held .zahl { font-size: 56px; line-height: 1; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.held .weg { min-width: 0; }
/* Dieselbe Anordnung, ruhigere Zahl: 56 Pixel gehoeren der Freiheitszahl
   allein, sonst schreit jede Seite gleich laut. */
.held.ruhig .zahl { font-size: 40px; }

/* Die Stufen auf dem Balken, wie die Felder auf dem Spielbrett. */
.stufen { display: grid; gap: 6px; margin-top: 12px; }
.stufe { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 12px; }
.stufe .spur { height: 6px; }
.stufe.erreicht .bezeichnung { color: var(--gut); font-weight: 700; }

/* ------------------------------------------------------------------ Feld */
.feld {
  padding: 9px 12px;
  border: 1px solid var(--linie);
  border-radius: var(--r2);
  background: var(--karte);
  font: inherit;
  color: var(--schrift);
  min-width: 0;
}
.feld:focus { outline: 2px solid var(--marke-blass); border-color: var(--marke); }

/* -------------------------------------------------------------- Tabelle */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--gedaempft); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--linie);
}
td { padding: 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.rechts, th.rechts { text-align: right; }
tbody tr.klickbar:hover { background: var(--erhoben); cursor: pointer; }
/*
  Breite Tabellen laufen in ihrer eigenen Huelle quer, niemals die Seite. Ein
  Koerper, der waagerecht scrollt, verschiebt beim Lesen die Navigation.
*/
.tabellenhuelle { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }

/* --------------------------------------------------------------- Marken */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  background: var(--erhoben); color: var(--gedaempft);
}
.chip.lila { background: var(--marke-blass); color: var(--marke-tief); }
.chip.gruen { background: var(--gut-blass); color: #0e7a4a; }
.chip.gelb { background: var(--warnung-blass); color: #9a5b00; }
.chip.rot { background: var(--gefahr-blass); color: #a3203b; }
.chip.blau { background: var(--kalt-blass); color: #1b5fb8; }

/* -------------------------------------------------------------- Meldung */
.meldung {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--schrift); color: #fff;
  padding: 12px 18px; border-radius: var(--r2);
  box-shadow: var(--schatten); font-size: 14px; z-index: 50;
  max-width: min(520px, 90vw);
}
.meldung.schlecht { background: var(--gefahr); }

/* --------------------------------------------------------------- Ladens */
.schimmer {
  background: linear-gradient(90deg, var(--erhoben), #f7f9ff, var(--erhoben));
  background-size: 200% 100%;
  animation: schimmern 1.3s infinite;
  border-radius: var(--r2);
  height: 18px;
}
@keyframes schimmern { to { background-position: -200% 0; } }

.leer { color: var(--gedaempft); font-size: 14px; }

/* ------------------------------------------------------------- Schmal */
/*
  Unter 1200 Pixel gibt es keine halben Zeilen mehr. Zwei Karten nebeneinander
  auf einem schmalen Laptop sind zwei zu schmale Karten.
*/
@media (max-width: 1200px) {
  .inhalt > .halb, .inhalt > .drittel, .inhalt > .zweidrittel { grid-column: span 12; }
}

@media (max-width: 900px) {
  .hülle { grid-template-columns: 1fr; }
  .seitenleiste {
    position: static; height: auto; flex-direction: row; align-items: center;
    overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--linie);
  }
  .seitenleiste .seitenfuss { margin-top: 0; }
  nav { grid-auto-flow: column; }
  main { padding: 0 var(--s4) var(--s5); }
  .kopf { padding: 16px 0 12px; }
  .held .zahl { font-size: 42px; }
  .blattspalte, .blattkopf, .blattfuss { padding-left: 14px; padding-right: 14px; }
  .band { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
  .blattspalte, .blattkopf, .blattfuss, .deckung { padding-left: 16px; padding-right: 16px; }
  .deckung .prozent { font-size: 46px; }
  .tabellenhuelle { margin: 0 -14px; padding: 0 14px; }
}

/* Anmeldung mit zwei Wegen */
.anmeldekarte img { margin-bottom: 4px; }
.schluesselweg { margin-top: 4px; }
.schluesselweg summary { cursor: pointer; }
.schluesselweg input { margin-top: 8px; }
.marke img { border-radius: 9px; }
.marke-wer { margin-left: auto; font-weight: 600; }