/* Workspace — eigenes CSS, Farben ausschliesslich aus tokens.css (_design).
   Keine feste Farbe hier: ein Markenwechsel muss eine Verteilung sein, keine
   Suchen-und-Ersetzen-Runde. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 var(--body);
}

/* Marke: Ueberschriften in der Display-Schrift, technische Werte in Mono.
   Beides aus tokens.css - nie hier eine Schrift direkt setzen. */
h1, h2, h3, h4 { font-family: var(--display); }
code, kbd, samp, pre { font-family: var(--mono); }

.topbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
  padding: 10px 16px;
  position: sticky; top: 0; z-index: 5;
}
.topbar h1 { font-size: 17px; margin: 0; font-weight: 650; }
/* `flex-wrap` ist hier kein Schmuck: Die fünf Reiter sind zusammen 407 px
   breit, ein Telefon ist 375 px. Ohne Umbruch schob die Leiste die ganze Seite
   um 49 px zur Seite — und eine Seite, die sich quer schieben lässt, fühlt sich
   kaputt an, bevor man einen Satz gelesen hat. */
.topbar nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.topbar a.reiter {
  color: var(--gedaempft); text-decoration: none;
  padding: 6px 12px; border-radius: var(--radius, 8px);
}
.topbar a.reiter:hover { background: var(--flaeche-2); color: var(--text); }
.topbar a.reiter.aktiv { background: var(--akzent); color: var(--akzent-kontrast); }

#theme-toggle-btn {
  background: none; border: 1px solid var(--rand); color: var(--gedaempft);
  border-radius: var(--radius, 8px); padding: 5px 10px; cursor: pointer;
  font-size: 15px;
}
#theme-toggle-btn:hover { border-color: var(--akzent-hell); color: var(--text); }

main { max-width: 900px; margin: 0 auto; padding: 20px 16px 60px; }

.zahlen {
  display: flex; gap: 18px; flex-wrap: wrap;
  color: var(--gedaempft); font-size: 13px; margin-bottom: 18px;
}
.zahlen b { color: var(--text); font-weight: 650; }
.warnung { color: var(--warnung); }

/* Fliesstext bewusst NICHT .zahlen: die ist ein Flex-Container, und ein Satz
   darin zerfaellt an jedem <b> in eine eigene Zeile. */
.fliesstext { color: var(--gedaempft); font-size: 13px; margin: 0 0 18px; }
.fliesstext b { color: var(--text); }

.karte {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius, 8px); padding: 12px 14px; margin-bottom: 10px;
}
.karte .kopf { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.karte .text { font-weight: 600; }
.karte .detail { color: var(--gedaempft); margin-top: 3px; }
.karte .fusszeile {
  color: var(--gedaempft); font-size: 12px; margin-top: 6px;
  display: flex; gap: 12px; flex-wrap: wrap;
}

/* Die Anschrift eines Eintrags (#607). Bewusst KEINE `.marke`: Marken sagen
   etwas über den Zustand („in Arbeit", „wartet auf Andi") und sind bunt; die
   Nummer ist ein Name und soll ruhig bleiben. Tabellenziffern, damit die
   Nummern in einer Liste untereinander gleich breit stehen. */
.nummer {
  font-size: 12px; color: var(--gedaempft); white-space: nowrap;
  font-variant-numeric: tabular-nums; user-select: all;
}

.marke {
  font-size: 12px; padding: 1px 8px; border-radius: 999px;
  background: var(--flaeche-2); color: var(--gedaempft); white-space: nowrap;
}
.marke.akzent { background: var(--akzent-bg); color: var(--akzent); }
.marke.ruht { background: var(--warnung-bg); color: var(--warnung); }
.marke.fertig { background: var(--erfolg-bg); color: var(--erfolg); }

.akt {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius, 8px); margin-bottom: 16px; overflow: hidden;
}
.akt > h2 {
  margin: 0; padding: 12px 14px; font-size: 16px;
  border-bottom: 1px solid var(--rand);
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
}
/* Ein Faden auf der Lage und ein Akt im Drehbuch sind `details` — die Kopfzeile
   sieht dabei aus wie das `h2`, das sie ersetzt. Der Pfeil steht vorne und
   dreht sich; das `list-style: none` nimmt den doppelten Marker weg, den
   Firefox und WebKit sonst zusaetzlich zeichnen. */
details.faltbar > summary {
  margin: 0; padding: 12px 14px; font-size: 16px; font-weight: 600;
  border-bottom: 1px solid var(--rand);
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  cursor: pointer; list-style: none;
}
details.faltbar > summary::-webkit-details-marker { display: none; }
details.faltbar > summary::before {
  content: '▸'; color: var(--gedaempft); font-weight: 400;
  transition: transform .12s ease; display: inline-block;
}
details.faltbar[open] > summary::before { transform: rotate(90deg); }
details.faltbar > summary:hover { background: var(--flaeche-2); }
/* Zugeklappt traegt die Kopfzeile keinen Trennstrich mehr — sonst haengt unter
   dem letzten Faden eine Linie ohne etwas darunter. */
details.faltbar:not([open]) > summary { border-bottom: none; }

.akt .szenen { list-style: none; margin: 0; padding: 0; }
.akt .szenen li {
  padding: 10px 14px; border-bottom: 1px solid var(--rand);
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
}
.akt .szenen li:last-child { border-bottom: none; }
.akt .leer { padding: 12px 14px; color: var(--gedaempft); }

/* Getrennt nach Person (18.08.2026): eigene Punkte oben, darunter eine Zeile,
   die sagt was folgt, und der Rest gedaempft. Gedaempft heisst LESBAR --
   Mitlesen ist der Zweck; verborgen waere es eine andere Entscheidung. */
.akt .szenen li.trenner {
  padding: 8px 14px; background: var(--flaeche-2);
  color: var(--gedaempft); font-size: .9em;
}
.akt .szenen li.fremd { opacity: .72; }
.akt .szenen li.fremd:hover { opacity: 1; }

/* Der Fuss des Akts: was einmal drinstand und wieder heraus ist. Bewusst
   gedaempft und unten — der Akt bleibt oben lesbar, die Spur liegt tiefer. */
.fuss {
  background: var(--flaeche-2); border-top: 1px solid var(--rand);
  padding: 10px 14px; font-size: 13px; color: var(--gedaempft);
}
.fuss h3 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase;
           letter-spacing: .04em; }
.fuss ul { margin: 0; padding-left: 18px; }

.hinweis {
  background: var(--warnung-bg); color: var(--warnung);
  border: 1px solid var(--warnung); border-radius: var(--radius, 8px);
  padding: 10px 14px; margin-bottom: 18px; font-size: 13px;
}

/* Kacheln — die Zugaenge zu den Auspraegungen. */
.kacheln {
  display: grid; gap: 10px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.kachel {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius, 8px); padding: 12px 14px;
  text-decoration: none; color: inherit;
}
a.kachel:hover { border-color: var(--akzent-hell); background: var(--akzent-bg); }
.kachel-name { font-weight: 650; }
.kachel-text { color: var(--gedaempft); font-size: 13px; }
.kachel-aus { opacity: .6; }

/* Anmeldung */
main.schmal { max-width: 380px; }
.feld { display: block; margin-bottom: 12px; }
.feld span {
  display: block; font-size: 13px; color: var(--gedaempft); margin-bottom: 4px;
}
.feld input {
  width: 100%; padding: 8px 10px; font: inherit;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--rand); border-radius: var(--radius, 8px);
}
.feld input:focus { outline: 2px solid var(--akzent-hell); outline-offset: 1px; }
.knopf {
  width: 100%; padding: 9px 14px; font: inherit; font-weight: 600;
  background: var(--akzent); color: var(--akzent-kontrast);
  border: none; border-radius: var(--radius, 8px); cursor: pointer;
}
.knopf:hover { background: var(--akzent-hell); }

/* Wer angemeldet ist, und der Weg hinaus. */
.wer { color: var(--gedaempft); font-size: 13px; }
.abmelden { color: var(--gedaempft); font-size: 13px; text-decoration: none; }
.abmelden:hover { color: var(--text); text-decoration: underline; }

/* Das Eintragsfeld — ganz oben, ein Feld und ein Knopf. */
.eintragen {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius, 8px); padding: 12px 14px; margin-bottom: 18px;
}
.eintragen textarea {
  width: 100%; font: inherit; resize: vertical; min-height: 52px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--rand); border-radius: var(--radius, 8px);
  padding: 8px 10px;
}
.eintragen textarea:focus { outline: 2px solid var(--akzent-hell); outline-offset: 1px; }
.eintragen-fuss {
  display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap;
}
.eintragen select {
  font: inherit; padding: 7px 10px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--rand); border-radius: var(--radius, 8px);
}
.knopf-schmal { width: auto; margin-left: auto; padding: 8px 20px; }

/* Sortieren — zugeklappt, damit die Liste lesbar bleibt. */
.verlauf {
  list-style: none; margin: 8px 0 0; padding: 8px 0 0;
  border-top: 1px solid var(--rand);
  font-size: 12px; color: var(--gedaempft);
}
.verlauf li { margin-bottom: 2px; }
.verlauf b { color: var(--text); font-weight: 600; }

.sortieren { margin-top: 10px; }
.sortieren > summary {
  cursor: pointer; font-size: 12px; color: var(--gedaempft);
  list-style: none; display: inline-block;
  padding: 3px 9px; border: 1px solid var(--rand); border-radius: 999px;
}
.sortieren > summary::-webkit-details-marker { display: none; }
.sortieren > summary:hover { border-color: var(--akzent-hell); color: var(--text); }
.sortieren form {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  margin-top: 8px;
}
.sortieren select, .sortieren input[type="text"] {
  font: inherit; font-size: 13px; padding: 5px 8px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--rand); border-radius: var(--radius, 8px);
}
.sortieren input[type="text"] { flex: 1; min-width: 150px; }
.sortieren .knopf-schmal { margin-left: 0; padding: 5px 14px; font-size: 13px; }

/* Annahme und Bezug */
.karte.vereinbart { border-left: 3px solid var(--erfolg); }
.bezug {
  font-size: 12px; color: var(--gedaempft); margin-bottom: 4px;
  padding-left: 14px; border-left: 2px solid var(--rand);
}
/* Die Antwort — steht sie, ist sie endgueltig; als Entwurf wartet sie auf
   Haken. Deshalb zwei Toenungen: gruen fuer das Beschlossene, Warnton fuer das,
   was noch jemand mittragen muss. */
.antwort {
  margin-top: 10px; padding: 10px 14px; border-radius: var(--radius, 8px);
  border: 1px solid var(--rand); font-size: 14px;
}
.antwort.steht { background: var(--erfolg-bg); border-color: var(--erfolg); }
.antwort.offen { background: var(--warnung-bg); border-color: var(--warnung); }
.antwort-kopf {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-bottom: 6px;
}
.antwort-kopf .gedaempft { color: var(--gedaempft); font-size: 12px; }
.antwort-text { white-space: pre-wrap; }
.antwort-warum { margin-top: 6px; color: var(--gedaempft); }
.antwort-haken { margin-top: 6px; font-size: 12px; color: var(--gedaempft); }
.antwort-knoepfe {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: 10px;
}
.antwort-knoepfe form { margin: 0; display: flex; gap: 6px; }
.antwort .ablehnen input {
  font: inherit; font-size: 12px; padding: 3px 10px; min-width: 200px;
  border: 1px solid var(--rand); border-radius: 999px;
  background: var(--flaeche); color: var(--text);
}
.antwort-neu { margin-top: 10px; }
.antwort-neu > summary { cursor: pointer; color: var(--gedaempft); font-size: 13px; }
.antwort-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.antwort-form textarea.breit { width: 100%; box-sizing: border-box; }
.antwort-form button { align-self: flex-start; }
/* Der Satz, der sagt was der Knopf ausloest. Er steht ueber dem Knopf und
   nicht darunter: Wer erst nach dem Druecken liest, liest zu spaet. */
.antwort-regel { margin: 0; font-size: 12px; color: var(--gedaempft); }

.annahme {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px;
}
.annahme form { margin: 0; }
.knopf-leise {
  background: none; border: 1px solid var(--rand); color: var(--gedaempft);
  border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12px;
  cursor: pointer;
}
.knopf-leise:hover { border-color: var(--akzent-hell); color: var(--text); }
.sortieren input.breit { flex: 1 1 100%; min-width: 0; }
/* Im Sortierfeld stehen Ueberschrift und Rumpf zusammen — deshalb ein
   mehrzeiliger Kasten: In einem einzeiligen Feld liesse sich der Umbruch
   gar nicht setzen, mit dem geteilt wird. */
.sortieren textarea.breit {
  flex: 1 1 100%; min-width: 0; resize: vertical; line-height: 1.5;
  font: inherit; font-size: 13px; padding: 6px 9px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--rand); border-radius: var(--radius, 8px);
}

/* Der Rueckweg aus Lage und Drehbuch */
.dazu { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; width: 100%; }
.dazu input[type="text"] {
  flex: 1; min-width: 160px; font: inherit; font-size: 13px; padding: 5px 8px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--rand); border-radius: var(--radius, 8px);
}
.bearbeiten {
  font-size: 12px; color: var(--gedaempft); text-decoration: none;
  border: 1px solid var(--rand); border-radius: 999px; padding: 2px 9px;
}
.bearbeiten:hover { border-color: var(--akzent-hell); color: var(--text); }

/* Dokumente — lesen, nicht bearbeiten. */
.doku-liste { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.doku {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius, 8px); padding: 4px 20px 20px;
  line-height: 1.6;
}
.doku h1 { font-size: 22px; margin: 20px 0 4px; }
.doku h2 { font-size: 17px; margin: 26px 0 6px; padding-top: 14px;
           border-top: 1px solid var(--rand); }
.doku h3 { font-size: 15px; margin: 18px 0 4px; }
.doku code {
  background: var(--code-bg, var(--flaeche-2)); padding: 1px 5px;
  border-radius: 4px; font-size: 13px;
}
.doku pre { background: var(--flaeche-2); padding: 10px 12px;
            border-radius: var(--radius, 8px); overflow-x: auto; }
.doku blockquote {
  margin: 12px 0; padding: 2px 14px; color: var(--gedaempft);
  border-left: 3px solid var(--akzent-hell);
}
/* Breite Tabellen scrollen in sich, statt die Seite zu sprengen. */
.doku table { border-collapse: collapse; width: 100%; margin: 12px 0;
              font-size: 14px; display: block; overflow-x: auto; }
.doku th, .doku td { border: 1px solid var(--rand); padding: 5px 9px;
                     text-align: left; vertical-align: top; }
.doku th { background: var(--flaeche-2); }
.doku a { color: var(--akzent); }
/* Bilder in den Papieren sind gezeichnete Abläufe: breit, sehr hoch, und mit
   eigenem weißen Grund. Sie laufen auf Spaltenbreite und behalten ihr
   Verhältnis; für die Lupe hängt die Fläche einen Link darum (`_bilder_umbiegen`),
   denn auf 800 Pixel gequetscht ist ein Ablaufdiagramm nicht lesbar. */
.doku img { display: block; max-width: 100%; height: auto; margin: 14px 0;
            border: 1px solid var(--rand); border-radius: var(--radius, 8px);
            background: #ffffff; }
.doku a.doku-bild { display: block; }

/* ── Einträge: nur die Überschrift, dazu zwei Filter ─────────────────
   Der Stapel wächst. Eine Liste, die jeden Punkt in voller Länge zeigt,
   geht irgendwann niemand mehr durch — dann sammelt die Fläche, statt
   zu zeigen.                                                            */

/* Der Zaehler am Reiter Postfach — die einzige Stelle, an der die Flaeche
   von sich aus auf etwas zeigt. Deshalb darf er auffallen. */
.zaehler {
  display: inline-block; min-width: 18px; padding: 0 5px;
  border-radius: 999px; font-size: 11px; line-height: 18px; text-align: center;
  background: var(--akzent); color: var(--akzent-kontrast);
}
.reiter.aktiv .zaehler { background: var(--akzent-kontrast); color: var(--akzent); }
.postfach-datei { font-size: 13px; }

/* Wie frisch der Vault auf der Flaeche ist. Gedaempft, aber vorhanden:
   Die Latenz ist kein Problem, sie ist nur unsichtbar. */
.stand {
  font-size: 12px; color: var(--gedaempft); margin: -6px 0 14px;
}

.eintragen-hinweis {
  font-size: 11px; color: var(--gedaempft); flex: 1; min-width: 0;
}

.filterleiste {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 12px;
}
.filterleiste select, .filterleiste input[type="search"] {
  font: inherit; font-size: 13px; padding: 5px 9px;
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--rand); border-radius: var(--radius, 8px);
}
.filterleiste input[type="search"] { flex: 1; min-width: 180px; }
.filter-zahl { font-size: 12px; color: var(--gedaempft); }

.karte > details.eintrag > summary {
  list-style: none; cursor: pointer;
}
.karte > details.eintrag > summary::-webkit-details-marker { display: none; }
.karte > details.eintrag > summary .kopf { margin: 0; }
/* Das Dreieck vor der Überschrift, damit man sieht, dass da noch etwas ist. */
.karte > details.eintrag > summary .text::before {
  content: '▸'; color: var(--gedaempft); margin-right: 7px;
  display: inline-block; transition: transform .12s;
}
.karte > details.eintrag[open] > summary .text::before { transform: rotate(90deg); }
/* Eine zu lang geratene Überschrift darf die Liste nicht sprengen — sie
   wird gekappt, nicht gekürzt: Der volle Wortlaut steht beim Sortieren. */
.karte > details.eintrag > summary .text {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.karte > details.eintrag[open] > summary .text {
  display: inline; overflow: visible;
}

/* ── Status MyPro — die Matrix ───────────────────────────────────────
   Links der Kurztext, rechts die vier Ausprägungen, aufklappbar der
   Langtext. Eine Rasterspalte je Ausprägung: Die Anzahl kommt aus dem
   Papier, deshalb `repeat(auto-fit, …)` statt einer festen Zahl.       */

.mx-kopfzeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 4px 0 12px;
}
.mx-legende {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12px; color: var(--gedaempft);
}
.mx-legende .mx-zelle { margin-left: 8px; }

.matrix { display: flex; flex-direction: column; gap: 22px; }

.mx-spaltenkopf,
.mx-zeile > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(4, 104px);
  gap: 8px; align-items: center;
}
.mx-spaltenkopf {
  position: sticky; top: 0; z-index: 2;
  padding: 8px 12px; background: var(--bg);
  border-bottom: 1px solid var(--rand);
  font-size: 12px; color: var(--gedaempft); text-transform: uppercase;
  letter-spacing: .04em;
}
.mx-spaltenkopf .mx-zelle {
  background: none; border: none; font-size: 11px; color: var(--gedaempft);
  text-transform: none; letter-spacing: 0;
}

.mx-block > h2 {
  font-size: 17px; margin: 0 0 2px; padding-bottom: 6px;
  border-bottom: 1px solid var(--rand);
}
.mx-einleitung {
  font-size: 13px; color: var(--gedaempft); line-height: 1.55;
  margin: 6px 0 10px;
}
.mx-einleitung p { margin: 4px 0; }
.mx-nr { color: var(--akzent); font-variant-numeric: tabular-nums; }
.mx-leer { font-size: 13px; color: var(--gedaempft); }

.mx-zeile {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius, 8px); margin-top: 6px;
}
.mx-zeile > summary {
  padding: 10px 12px; cursor: pointer; list-style: none;
  border-radius: var(--radius, 8px);
}
.mx-zeile > summary::-webkit-details-marker { display: none; }
.mx-zeile:hover { border-color: var(--akzent-hell); }
.mx-zeile[open] { border-color: var(--akzent-hell); }
.mx-zeile[open] > summary { border-bottom: 1px solid var(--rand); border-radius: 0; }

.mx-links { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mx-titel { font-weight: 600; font-size: 14px; }
/* Das Dreieck sitzt am Titel, nicht am Zeilenanfang: Die Zeile ist zwei
   Zeilen hoch, ein Marker in der Mitte zeigte auf nichts. */
.mx-titel::before {
  content: '▸'; color: var(--gedaempft); margin-right: 6px;
  display: inline-block; transition: transform .12s;
}
.mx-zeile[open] .mx-titel::before { transform: rotate(90deg); }
.mx-kurz { font-size: 13px; color: var(--gedaempft); line-height: 1.5; }
.mx-kurz p { margin: 0; }
.mx-kurz code { font-size: 12px; }

.mx-zelle {
  display: flex; align-items: center; justify-content: center;
  min-height: 30px; padding: 3px 6px; border-radius: 6px;
  font-size: 15px; text-align: center;
  border: 1px solid transparent;
}
/* Textzellen (Block 5) tragen ganze Wörter statt eines Zeichens. */
.mx-zelle.z-text {
  font-size: 11px; line-height: 1.3; color: var(--gedaempft);
  background: var(--flaeche-2); border-color: var(--rand);
}
.mx-zelle.z-ja    { background: color-mix(in srgb, var(--erfolg) 14%, transparent); }
.mx-zelle.z-still { background: var(--flaeche-2); }
.mx-zelle.z-nein  { background: color-mix(in srgb, var(--gedaempft) 12%, transparent); opacity: .65; }
.mx-zelle.z-fehlt { background: color-mix(in srgb, var(--warnung) 18%, transparent); }

.mx-lang { padding: 2px 16px 12px; font-size: 14px; }
.mx-lang > *:first-child { margin-top: 10px; }
/* Der Weg zur Eingabe sitzt am Fuß des Langtextes, gedämpft: Er soll da sein,
   wenn man ihn sucht, und nicht mitlesen, wenn man liest. */
.mx-weiter { margin: 14px 0 2px; }
.mx-anhang { margin-top: 26px; }

/* ══ Telefon ══════════════════════════════════════════════════════════════
   Bis zum 13.08.2026 hatte diese Datei GENAU EINE Media-Query, und die galt
   der MyPro-Matrix. Die Fläche war damit nie fürs Telefon eingerichtet —
   obwohl das ganze Vorhaben auf dem Satz steht: „mir fällt abends etwas ein".
   Wer abends im Bett etwas einträgt, tut es nicht am Schreibtisch.

   Drei Dinge, die dabei zählen, und alle drei sind gemessen, nicht geschätzt:

   1. Kein Querschub. Siehe `.topbar nav` oben.
   2. **Eingabefelder mindestens 16 px.** Darunter zoomt iOS beim Antippen
      selbsttätig in die Seite hinein und geht nicht von allein wieder heraus.
      Die Felder standen auf 13–15 px. Wer einen Gedanken eintippen will und
      danach erst wieder herauszoomen muss, tippt ihn beim nächsten Mal in
      WhatsApp — und genau das soll die Fläche ablösen.
   3. **Tippziele mindestens 44 px hoch.** „abmelden" war 20 px, „annehmen"
      26 px, der Hell/Dunkel-Knopf 31 px. Das trifft man mit dem Daumen nicht. */
@media (max-width: 620px) {
  .topbar { gap: 10px; padding: 10px 12px; }
  .topbar nav { margin-left: 0; width: 100%; order: 3; }
  .topbar a.reiter { padding: 10px 12px; }
  .wer { margin-left: auto; }

  /* Alles, was man antippt, wird daumengroß. */
  .topbar a.reiter,
  .abmelden,
  #theme-toggle-btn,
  .knopf,
  .knopf-schmal,
  .eintragen select,
  main button,
  main select,
  main input[type="text"],
  main input[type="search"] { min-height: 44px; }
  .abmelden { display: inline-flex; align-items: center; }

  /* Nichts unter 16 px, worin getippt oder gewählt wird — siehe Punkt 2.
     Die Liste ist ausgeschrieben und nicht bloß `input, select, textarea`,
     weil jede dieser Regeln oben eine Klasse trägt und damit gewichtiger ist:
     Die kurze Fassung stand hier zuerst und wurde still überstimmt — gemessen
     blieben Filterleiste und Sortieren-Kasten auf 13 px. Wer ein Feld
     dazunimmt, gehört in diese Liste. */
  input, select, textarea,
  .feld input,
  .eintragen textarea, .eintragen select,
  .sortieren select, .sortieren input[type="text"], .sortieren textarea.breit,
  .dazu input[type="text"],
  .filterleiste select, .filterleiste input[type="search"] { font-size: 16px; }

  main { padding: 16px 12px 60px; }
}

/* Schmal: die vier Zellen rutschen unter den Text und beschriften sich
   selbst — ohne Spaltenkopf wäre ein ✅ ohne Bezug. */
@media (max-width: 720px) {
  .mx-spaltenkopf { display: none; }
  .mx-zeile > summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mx-links { grid-column: 1 / -1; }
  .mx-zelle { justify-content: flex-start; gap: 6px; }
  .mx-zelle::before {
    content: attr(data-spalte); font-size: 11px; color: var(--gedaempft);
  }
  .mx-legende .mx-zelle::before { content: none; }
}

/* ── Architektur: die Tafel ───────────────────────────────────────────────
   Sieben Spalten mal elf Zeilen passen auf keinen Telefonschirm und auf die
   meisten Laptops auch nicht. Deshalb scrollt die TAFEL in ihrem Rahmen, nicht
   die Seite: Die erste Spalte bleibt stehen (`position: sticky`), sonst weiss
   nach zwei Wischern niemand mehr, welche Zeile er liest — und genau das
   Vergleichen ueber die Zeile ist der ganze Zweck. */
/* Die Tafel scrollt in BEIDE Richtungen im eigenen Rahmen, nicht die Seite:
   Nur so bleibt die Kopfzeile stehen (`sticky` misst am scrollenden Vorfahren).
   Scrollte die Seite, waeren nach drei Zeilen die Spaltennamen weg — und eine
   Zelle ohne Spaltennamen ist keine Auskunft. Passt die Tafel auf den Schirm,
   erscheint kein einziger Balken. */
.af-rahmen { overflow: auto; max-height: calc(100vh - 150px);
  border: 1px solid var(--rand);
  border-radius: var(--radius, 8px); background: var(--flaeche); }
/* `separate` statt `collapse`, und das ist kein Geschmack: Bei `collapse`
   gehoeren die Raender der TABELLE, nicht den Zellen — und eine Kopfzeile, die
   `sticky` steht, nimmt ihre Raender dann nicht mit. Ergebnis waere eine
   Kopfzeile, die beim Scrollen ihre Linien verliert oder gar nicht klebt.
   Doppelte Linien vermeidet stattdessen: nur rechts und unten zeichnen. */
.af-tafel { border-collapse: separate; border-spacing: 0;
  width: 100%; font-size: 13px; }
.af-tafel th, .af-tafel td {
  border-right: 1px solid var(--rand); border-bottom: 1px solid var(--rand);
  padding: 7px 9px;
  vertical-align: top; text-align: left; min-width: 132px;
}
.af-tafel tr > *:last-child { border-right: none; }
.af-tafel tbody tr:last-child > * { border-bottom: none; }
.af-tafel thead th {
  background: var(--flaeche-2); font-weight: 650; white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
.af-tafel th.af-kachelname {
  position: sticky; left: 0; z-index: 1;
  background: var(--flaeche-2); white-space: nowrap; min-width: 108px;
}
.af-tafel thead th.af-kachelname { z-index: 3; }

/* Tatsache ist die Ruhelage: gedaempft, kein Rahmen, nichts zu tun. Alles
   andere darf sich davon abheben — sonst schreit die ganze Tafel gleich laut. */
.af-zelle.a-tatsache { color: var(--gedaempft); }

.af-loch-zeichen {
  display: inline-block; min-width: 20px; text-align: center;
  border: 1px dashed var(--rand); border-radius: 6px;
  color: var(--gedaempft); font-weight: 700;
}

.af-frage { display: block; text-decoration: none; color: var(--text); }
.af-frage:hover .af-text { text-decoration: underline; }
.af-marke {
  color: var(--akzent); font-variant-numeric: tabular-nums;
  font-size: 11px; margin-left: 4px;
}
.af-haken { float: right; font-size: 12px; letter-spacing: 1px; }

/* Der Zustand sitzt am linken Rand, nicht in der Flaeche: Eine eingefaerbte
   Zelle laesst sich nicht mehr lesen, ein Streifen schon. */
.af-zelle.a-frage { border-left-width: 3px; }
.af-zelle.s-offen   { border-left-color: var(--warnung); }
.af-zelle.s-halb    { border-left-color: var(--akzent-hell); }
.af-zelle.s-einig   { border-left-color: var(--erfolg); background: var(--erfolg-bg); }
.af-zelle.s-verwaist{ border-left-color: var(--fehler); background: var(--fehler-bg); }
.af-zelle.s-einig .af-haken   { color: var(--erfolg); }
.af-zelle.s-halb .af-haken    { color: var(--akzent-hell); }
.af-zelle.s-offen .af-haken   { color: var(--warnung); }
.af-zelle.s-verwaist .af-haken{ color: var(--fehler); }

.af-legende {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  font-size: 12px; color: var(--gedaempft); margin: 12px 0 8px;
}
.af-legende .af-punkt {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 5px; vertical-align: -1px;
}
.af-legende .a-offen { background: var(--warnung); }
.af-legende .a-halb  { background: var(--akzent-hell); }
.af-legende .a-einig { background: var(--erfolg); }
.af-legende .a-loch  { border: 1px dashed var(--gedaempft); background: none; }
.af-zaehler { margin-left: auto; }
.af-vorspann, .af-anhang { font-size: 14px; }
.af-vorspann > summary {
  cursor: pointer; font-size: 13px; color: var(--gedaempft);
  padding: 6px 0;
}
.af-vorspann > summary:hover { color: var(--text); }
.af-vorspann[open] > summary { color: var(--text); font-weight: 600; }
.af-vorspann .doku { font-size: 14px; }


/* ── Standanzeige (26.08.2026) ──
   Zahlen zuerst, gross genug, um ohne Lesen zu wirken. Der Anlass steht bei
   `punkte.stand`: Was diese Seite kann und ein Claude nicht, ist erschrecken. */
.stand-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .75rem;
  margin: 1rem 0 1.5rem;
}
.kachel {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .9rem 1rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
}
/* Die grosse Kachel traegt die Zahl, die zum Handeln zwingt. Sie steht zuerst
   und ist doppelt so laut wie der Rest — sonst liest man wieder alles. */
.kachel.gross { grid-column: span 2; }
.kachel .zahl {
  font-family: var(--display);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--text);
}
.kachel.gross .zahl { font-size: 3.4rem; }
.kachel .was { font-weight: 600; }
.kachel .dazu { color: var(--gedaempft); font-size: .85rem; }

/* Nichts anzupacken ist eine gute Nachricht und soll auch so aussehen. */
.kachel.ist-null { border-color: var(--erfolg); background: var(--erfolg-bg); }
.kachel.ist-null .zahl { color: var(--erfolg); }

/* Ein aufgehaltenes Tor ist die einzige Zahl hier, die faerbt: Sie sagt nicht
   „viel Arbeit", sondern „die Firma wartet". */
.kachel.ist-warnung { border-color: var(--warnung); background: var(--warnung-bg); }
.kachel.ist-warnung .zahl { color: var(--warnung); }

.stand-gruppe {
  font-size: 1rem;
  margin: 1.1rem 0 .35rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

@media (max-width: 640px) {
  .kachel.gross { grid-column: span 1; }
  .kachel.gross .zahl { font-size: 2.6rem; }
}


/* ── Das Punkte-Board (26.08.2026) ──
   Muster: MyTMs Aufgabenbrett, das Franz taeglich benutzt — Filter oben,
   Spalten darunter, Karten darin. Vier Spalten statt drei, weil „abgegeben"
   dazukommt: Er will sehen, was er losgeworden ist. */
.stand-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  margin: .5rem 0 1rem;
}
.stand-personen { display: flex; gap: .35rem; }
.reiter.klein { font-size: .9rem; padding: .25rem .7rem; }

.stand-faeden { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .6rem;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--flaeche);
  font-size: .85rem;
  cursor: pointer;
}
.chip.gewaehlt { border-color: var(--akzent); color: var(--akzent); }
.chip input { margin: 0; }

.punkt-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  align-items: start;
}
.spalte {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
  overflow: hidden;
}
.spalten-kopf {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--rand);
  font-weight: 600;
}
/* Mindesthoehe, damit eine leere Spalte ein sichtbares Ziel bleibt: Wohin man
   nicht zielen kann, dorthin zieht man auch nicht. */
.spalten-koerper {
  padding: .6rem;
  min-height: 6rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.spalten-koerper.nimmt-auf {
  background: var(--akzent-bg);
  outline: 2px dashed var(--akzent);
  outline-offset: -4px;
}

.karte {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--bg);
  padding: .55rem .65rem;
  font-size: .9rem;
  cursor: grab;
}
.karte.zieht { opacity: .4; }
.karte-kopf { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-bottom: .3rem; }
.karte-text { line-height: 1.35; }
.karte-fuss { color: var(--gedaempft); font-size: .8rem; margin-top: .3rem; }
.karte-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  margin-top: .5rem;
  font-size: .8rem;
}
.karte-knoepfe form { display: inline; margin: 0; }
.karte-frage summary { cursor: pointer; list-style: none; }
.karte-frage input[type=text] { width: 100%; margin-top: .35rem; font-size: .85rem; }

/* Auf schmalen Fenstern werden aus vier Spalten zwei — vier waeren dort
   fingerbreit, und dann liest man nichts mehr. Gezogen wird ohnehin nicht:
   dafuer traegt jede Karte denselben Handgriff als Knopf. */
@media (max-width: 1000px) {
  .punkt-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .punkt-board { grid-template-columns: 1fr; }
}