/*
  Aufgaben-Modul – Darstellung.

  Regel (Entscheidung E5): In den Komponenten steht KEIN Farbwert. Farben
  existieren ausschließlich in dem :root-Block hier darunter. Wer das Aussehen
  ändern will, ändert diesen Block – sonst nichts.

  Form, Abstände, Schrift und Touch-Größe kommen weiter aus bb-theme.css
  (--bb-radius*, --bb-shadow*, --bb-font, --bb-tap, --bb-motion).
*/

:root {
    /*
      Semantische Ebene. Das Modul läuft HELL, weil die umgebende Anwendung
      hell läuft (Entscheidung E12) – bb-theme.css ist ein dunkles Theme, seine
      Flächen- und Textfarben passen hier deshalb nicht.

      Form und Rhythmus kommen weiter aus bb-theme (Radien, Schatten, Schrift,
      Touch-Größe). Wird die Anwendung später auf dunkel umgestellt, ist genau
      dieser Block die einzige Stelle, die sich ändert.
    */

    /* Flächen */
    --todo-card-bg: #ffffff;
    --todo-card-bg-hover: #f6f8fb;
    --todo-card-border: #dbe2ea;
    --todo-card-radius: var(--bb-radius-lg);
    --todo-feld-bg: #ffffff;
    --todo-feld-rand: #cbd5e1;
    --todo-block-bg: #f6f8fb;

    /* Text */
    --todo-text: #0f172a;
    --todo-text-leise: #64748b;
    --todo-text-sehr-leise: #94a3b8;

    /* Bedeutungen – dunklere Töne als im Dunkel-Theme, sonst zu blass auf Weiß */
    --todo-status-offen: #64748b;
    --todo-status-arbeit: #0369a1;
    --todo-status-erledigt: #15803d;
    --todo-status-blockiert: #b45309;
    --todo-vorrang: #b91c1c;

    --todo-aktion-start: #0d9488;
    --todo-aktion-start-text: #ffffff;
    --todo-aktion-erledigt: #15803d;
    --todo-aktion-problem: #b45309;

    /*
      Cockpit (cockpit.css). Steht hier und nicht dort, weil E5 gilt: Farben
      leben in genau einem :root-Block. cockpit.css enthält keinen einzigen
      Farbwert, nur Verweise auf diese Namen.

      Die dunkle Leiste ist Absicht und kein Bruch mit E12: Die Anwendung
      bleibt hell, die Leiste ist eine Navigationsfläche – so wie die
      Kopfleiste der Anwendung ebenfalls dunkel ist.
    */

    /*
      Reiterleiste links.

      Auf dem dunklen Blau ist die Schrift WEISS – nicht hellblau. Ein blasser
      Blauton auf dunklem Blau liest sich schlecht, und der aktive Reiter hebt
      sich ohnehin durch Fläche und Balken ab, nicht durch die Schriftfarbe.
      Auch die leisen Zeilen (Untertitel, Fußzeile) sind hell genug zum Lesen.
    */
    --cp-leiste-bg: #1b2a5e;
    --cp-leiste-marke: #ffffff;
    --cp-leiste-sub: #cbd8f0;
    --cp-leiste-text: #ffffff;
    --cp-leiste-text-aktiv: #ffffff;
    --cp-leiste-aktiv-bg: #2b3d7a;
    --cp-leiste-hover-bg: #24346e;
    --cp-leiste-trenner: #33437e;

    /*
      Marke am Reiter („10 neue Beschwerden"). Dasselbe Rot wie der
      Chat-Zähler in der Kopfleiste (app-shell.css, .bc-top-unread-badge) —
      ein Zähler soll in der ganzen Anwendung dieselbe Farbe haben, sonst
      lernt niemand, dass es einer ist.
    */
    --cp-leiste-zahl-bg: #dc2626;
    --cp-leiste-zahl-text: #ffffff;

    /* Bühne und Kopf */
    --cp-titel: #1e3a8a;

    /* Knöpfe */
    --cp-btn-bg: #ffffff;
    --cp-btn-rand: #cbd5e1;
    --cp-btn-text: #1e293b;
    --cp-btn-haupt-bg: #1e3a8a;
    --cp-btn-haupt-text: #ffffff;

    /* „Stand 14:32" — leiser als die Aktionen daneben, aber lesbar. */
    --cp-stand-text: #475569;

    /* Befund-Marken und Urteilsblock */
    --cp-marke-gut-bg: #dcfce7;
    --cp-marke-gut-text: #15803d;
    --cp-marke-schlecht-bg: #fee2e2;
    --cp-marke-schlecht-text: #b91c1c;
    --cp-urteil-gut-bg: #ecfdf5;
    --cp-urteil-gut-rand: #a7f3d0;
    --cp-urteil-warn-bg: #fffbeb;
    --cp-urteil-warn-rand: #fde68a;
    --cp-zeile-fehlend-bg: #fef2f2;

    /* Erfassungsmaske und Vorlagen */
    --cpf-pille-bg: #ffffff;
    --cpf-pille-rand: #cbd5e1;
    --cpf-pille-text: #334155;
    --cpf-pille-aktiv-bg: #1e3a8a;
    --cpf-pille-aktiv-text: #ffffff;

    --cpf-gruppe-text: #94a3b8;
    --cpf-pflicht: #b91c1c;
    --cpf-optional: #94a3b8;

    --cpf-platzhalter-bg: #f1f5f9;
    --cpf-platzhalter-text: #64748b;

    --cpf-prio-bg: #f5f8ff;
    --cpf-prio-rand: #c7d7f5;

    --cpf-vorrang-bg: #fff7ed;
    --cpf-vorrang-rand: #fdba74;
    --cpf-vorrang-text: #b45309;

    /* Gemeldetes Problem (3a) — Rand/Text wie beim Löschen-Knopf (--cpf-loeschen-*),
       nur der Kartenhintergrund ist neu: ein Ton heller als der Rand, gleiche
       Bauart wie bei Vorrang. */
    --cpf-problem-bg: #fef2f2;

    --cpf-meldung-bg: #ecfdf5;
    --cpf-meldung-rand: #a7f3d0;
    --cpf-meldung-text: #15803d;

    --cpf-loeschen-text: #b91c1c;
    --cpf-loeschen-rand: #fecaca;

    /* Kennzahlen, Fortschritt, Projektampel */
    --cpk-zahl: #1e3a8a;
    --cpk-zahl-rot: #b91c1c;
    --cpk-zahl-leer: #cbd5e1;
    --cpk-zahl-orange: #b45309;
    --cpk-strich: #e2e8f0;
    --cpk-strich-blau: #1e3a8a;
    --cpk-strich-rot: #b91c1c;

    --cpk-balken-bg: #e2e8f0;
    --cpk-balken-fuell: #15803d;

    --cpk-ampel-kurs-bg: #dcfce7;
    --cpk-ampel-kurs-text: #15803d;
    --cpk-ampel-blocker-bg: #fee2e2;
    --cpk-ampel-blocker-text: #b91c1c;
    --cpk-ampel-pausiert-bg: #f1f5f9;
    --cpk-ampel-pausiert-text: #64748b;
    --cpk-ampel-fertig-bg: #e0f2fe;
    --cpk-ampel-fertig-text: #0369a1;

    --cpk-chip-bg: #eef2f9;
    --cpk-chip-text: #1e293b;

    --cpk-blocker-bg: #fef2f2;
    --cpk-blocker-rand: #fecaca;
    --cpk-blocker-text: #b91c1c;

    /* Stammdaten */
    --cps-nav-bg: #ffffff;
    --cps-nav-rand: #dbe2ea;
    --cps-nav-text: #64748b;
    --cps-nav-aktiv-text: #1e3a8a;
    --cps-formel-bg: #f5f8ff;
    --cps-formel-rand: #c7d7f5;

    /* Ladeanzeige */
    --cp-lade-ring: #1e3a8a;
    --cp-lade-ring-bg: #dbe2ea;

    /*
      Dispositionsliste (cpd-).

      Der Score bekommt drei Stufen statt einer Farbe (Spezifikation 4.5):
      ab 4 auffällig, 2 bis 4 normal, darunter leise. Wichtig ist, dass die
      leise Stufe wirklich leise ist – eine Liste, in der alles bunt leuchtet,
      hat keine Rangfolge mehr.
    */
    --cpd-score-hoch-bg: #fef3c7;
    --cpd-score-hoch-text: #92400e;
    --cpd-score-mittel-bg: #e0eaff;
    --cpd-score-mittel-text: #1e3a8a;
    --cpd-score-leise-bg: #f1f5f9;
    --cpd-score-leise-text: #64748b;

    /* Zeilen: Vorrang und Blocker bekommen einen Balken links, keine Fläche */
    --cpd-zeile-trenner: #eef2f7;
    --cpd-zeile-hover: #f8fafc;
    --cpd-zeile-gewaehlt-bg: #f5f8ff;
    --cpd-zeile-markiert-bg: #eef4ff;
    --cpd-zeile-vorrang: #b91c1c;
    --cpd-zeile-blockiert: #b45309;

    /* Die ausgeklappte Aufgabe hebt sich leicht ab, ohne zu leuchten */
    --cpd-detail-bg: #fbfcfe;

    /*
      Reihenfolge (E52). „Wartet" ist kein Problem und keine Warnung, sondern
      ein Zustand — deshalb ein ruhiges Blaugrau und kein Rot. Rot bleibt dem
      vorbehalten, was jemanden aufhalten SOLL.
    */
    --cpr-wartet-text: #475569;
    --cpr-wartet-bg: #f1f5f9;
    --cpr-gesperrt-text: #94a3b8;

    --cpd-vorrang-text: #b91c1c;
    --cpd-blocker-text: #b45309;
    --cpd-frist-rot: #b91c1c;
    --cpd-frist-orange: #b45309;

    --cpd-eff-bg: #f1f5f9;
    --cpd-eff-text: #334155;

    /* Der Eingang ist ein eigener Bereich, kein Teil der Liste */
    --cpd-eingang-bg: #fffbeb;
    --cpd-eingang-rand: #fde68a;
    --cpd-eingang-titel: #92400e;

    /* Auswahl „zuweisen": offen sticht hervor, gesetzt tritt zurück */
    --cpd-zuweisen-offen-rand: #1e3a8a;
    --cpd-zuweisen-offen-text: #1e3a8a;

    /* Auslastungsbalken – dieselben drei Stufen wie die Ampel */
    --cpd-balken-bg: #e2e8f0;
    --cpd-balken-frei: #15803d;
    --cpd-balken-gut: #b45309;
    --cpd-balken-voll: #b91c1c;

    /*
      Wochenplaner (cpp-, E100 Stufe 2).

      KEINE eigenen Ampelfarben: Die drei Stufen sind dieselben wie in der
      Dispositionsliste und zeigen auf dieselben Werte. Eine Zelle, die „voll"
      anders färbt als die Leiste zwei Klicks weiter, wäre eine zweite
      Bedeutung für dieselbe Farbe – und Farbe ist das Einzige an dieser
      Ansicht, das man aus drei Metern Entfernung noch lesen kann.

      Was hier eigene Werte braucht, ist der PLANUNGSZUSTAND: Was ist noch
      nicht geschrieben, wo darf etwas hin, wo liegt gerade der Zeiger. Das
      sind Zustände der Bedienung, keine Aussagen über die Arbeit – deshalb
      blau und nicht in den Ampelfarben.
    */
    --cpp-kopf-bg: #f8fafc;
    --cpp-rand: #dbe2ea;
    --cpp-rand-stark: #c7d2dd;
    --cpp-zelle-bg: #ffffff;
    --cpp-zelle-vergangen-bg: #f8fafc;
    --cpp-woche-aktuell-bg: #eef4ff;
    --cpp-woche-aktuell-rand: #1e3a8a;

    --cpp-karte-bg: #f1f5f9;
    --cpp-karte-rand: #dbe2ea;
    --cpp-karte-text: #1e293b;

    /* Offen = im Browser verschoben, aber noch nicht geschrieben. */
    --cpp-offen-bg: #eef4ff;
    --cpp-offen-rand: #1e3a8a;
    --cpp-offen-text: #1e3a8a;

    /* Moegliche Ziele beim Ziehen, und das eine, auf dem der Zeiger steht. */
    --cpp-moeglich-bg: #f5f8ff;
    --cpp-ziel-bg: #e0eaff;
    --cpp-ziel-rand: #1e3a8a;

    --cpp-fortsetzung-text: #64748b;
    --cpp-pool-bg: #f8fafc;

    /*
      „Meine Aufgaben" – die Arbeitssicht (ma-).

      Eigene Werte und nicht die des Cockpits, weil hier ein anderer Massstab
      gilt: Diese Seite wird mit HANDSCHUHEN bedient, oft mit Schutzbrille statt
      Lesebrille und im Gegenlicht eines Treppenhauses. Deshalb sind die leisen
      Töne hier dunkler als sonst und die Marken gefüllt statt umrandet – eine
      Umrandung mit 1 px verschwindet unter solchen Bedingungen.

      Was NICHT vorkommt: eine Mahnfarbe für „überfällig". Das ist ein Signal an
      die Leitung, kein Vorwurf an den Mann (Spezifikation 9.2).
    */

    /* Flächen und Schrift */
    --ma-karte-bg: #ffffff;
    --ma-karte-rand: #d3dce7;
    --ma-karte-rand-stark: #94a3b8;
    --ma-text: #0f172a;
    --ma-text-leise: #475569;
    --ma-abschnitt: #334155;
    --ma-gut: #15803d;

    /* Marken – gefüllt, damit sie auch schräg und im Sonnenlicht stehen */
    --ma-marke-termin-bg: #1e3a8a;
    --ma-marke-termin-text: #ffffff;
    --ma-marke-vorrang-bg: #b91c1c;
    --ma-marke-vorrang-text: #ffffff;
    --ma-marke-arbeit-bg: #0369a1;
    --ma-marke-arbeit-text: #ffffff;
    --ma-marke-problem-bg: #b45309;
    --ma-marke-problem-text: #ffffff;
    --ma-marke-leise-bg: #e8edf5;
    --ma-marke-leise-text: #334155;

    /* Gruppe (19.08.2026): „noch niemandem zugeteilt, aber für dich zu holen".
       Ein eigener Ton, weil es weder Zustand noch Dringlichkeit ist, sondern
       eine Zuständigkeitsfrage. */
    --ma-marke-gruppe-bg: #5b21b6;
    --ma-marke-gruppe-text: #ffffff;
    --ma-btn-uebernehmen-bg: #5b21b6;
    --ma-btn-uebernehmen-text: #ffffff;

    /*
      Zutritt auf der Kachel (E54). Grün heisst „du kommst rein", alles andere
      heisst „vorher passiert noch etwas". KEIN Rot: Ein fehlender Zutritt ist
      eine Information, kein Vorwurf (Spezifikation 9.2).
    */
    --ma-zutritt-frei-bg: #15803d;
    --ma-zutritt-frei-text: #ffffff;
    --ma-zutritt-tun-bg: #b45309;
    --ma-zutritt-tun-text: #ffffff;
    --ma-zutritt-unklar-bg: #475569;
    --ma-zutritt-unklar-text: #ffffff;

    /* Arbeitsfläche der breiten Fassung, solange nichts gewählt ist (E53) */
    --ma-flaeche-rand: #cbd5e1;
    --ma-flaeche-text: #94a3b8;

    /*
      Melden (E59). Der Knopf ist bewusst NICHT in den Farben der drei
      Handlungen (Starten/Erledigt/Problem) gehalten: Melden ist etwas anderes
      als die eigene Arbeit — es betrifft nicht die Aufgabe, vor der man steht.

      Eigene Namen (--ma-melden-*), NICHT --ma-meldung-*: So hiessen sie bis
      zum 19.08.2026, genau wie die des Erfolgsbandes dreissig Zeilen weiter
      unten. In einem :root-Block gewinnt der zweite Wert — der Melden-Knopf
      war deshalb grün wie eine Erfolgsmeldung statt blau, und der Kommentar
      darüber beschrieb eine Farbe, die nie zu sehen war. Zwei Bedeutungen
      brauchen zwei Namen.

      ─── Farbe (Felix, 19.08.2026) ───────────────────────────────────────────
      Das Blau von damals war zugleich die Farbe von „Starten" UND der
      aktiven Sichtleiste — der schwebende Knopf ging darin unter, gerade weil
      er ein SCHWEBENDER Knopf ist, der sich von allem darunter abheben soll.
      Jetzt Orange: eigenständig gegenüber Blau (Starten, Navigation), Grün
      (Erledigt) und Rot (Vorrang) — und bewusst kräftiger als das gedeckte
      Amberbraun von „Problem", damit beide nebeneinander unterscheidbar
      bleiben. Weisse Schrift bleibt auf diesem Ton noch klar lesbar
      (Kontrast ø 5,3:1, über der WCAG-AA-Schwelle von 4,5:1).
    */
    --ma-melden-bg: #c2410c;
    --ma-melden-rand: #9a3412;
    --ma-melden-text: #ffffff;

    /* Quittung: was ich gemeldet habe und was daraus wurde */
    --ma-quittung-rand: #e2e8f0;
    --ma-quittung-stand: #64748b;

    /* Knöpfe – Farben aus Entwurf 09 */
    --ma-btn-start-bg: #1e3a8a;
    --ma-btn-start-text: #ffffff;
    --ma-btn-erledigt-bg: #15803d;
    --ma-btn-erledigt-text: #ffffff;
    --ma-btn-problem-rand: #b45309;
    --ma-btn-problem-text: #b45309;
    --ma-btn-leise-bg: #ffffff;
    --ma-btn-leise-rand: #94a3b8;
    --ma-btn-leise-text: #1e293b;
    --ma-btn-kontakt-bg: #0d9488;
    --ma-btn-kontakt-text: #ffffff;

    /* „Gut, dass du es meldest" */
    --ma-lob-bg: #fffbeb;
    --ma-lob-rand: #fde68a;
    --ma-lob-text: #92400e;

    --ma-meldung-bg: #ecfdf5;
    --ma-meldung-rand: #a7f3d0;
    --ma-meldung-text: #14532d;

    --ma-chip-bg: #ffffff;
    --ma-chip-rand: #94a3b8;
    --ma-chip-text: #1e293b;
    --ma-chip-aktiv-bg: #1e3a8a;
    --ma-chip-aktiv-text: #ffffff;

    /*
      Grössen. Sie stehen hier und nicht in der Komponente, weil sie zusammen
      mit den Farben die eine Stellschraube dieser Ansicht sind.

      ─── 19.08.2026: die Handschuh-Prämisse ist zurückgenommen ───────────────
      Bis hierher galten 60 px, weil ein Daumen im Arbeitshandschuh 48 px nicht
      zuverlässig trifft. Felix hat das als Relikt der Ursprungsplanung
      verworfen: Die Mitarbeiter tragen selten Handschuhe — und wenn dafür das
      ganze übrige Interface schlechter wird, ist nichts gewonnen. 60 px kosten
      je Knopf ein Viertel Höhe, und Höhe ist auf einem Handy das knappste Gut
      überhaupt: Vor der ersten Aufgabe stand die halbe Bildschirmhöhe leer.

      48 px ist nicht „klein", sondern das Mass, das Apple und Google als
      Mindestgrösse führen. Zweite Handlungen dürfen auf 40 px, Marken und
      Filterknöpfe auf 34 px — auch die trifft man in der Ausnahme noch.
    */
    --ma-tap: 48px;
    --ma-tap-zweit: 40px;
    --ma-tap-klein: 34px;
    --ma-titel: 1.08rem;
    --ma-schrift: 0.975rem;

    /*
      Sichtleiste und Filterblatt (19.08.2026). Der aktive Reiter ist GEFÜLLT
      und nicht nur unterstrichen: Ein Unterstrich ist auf einem Handy im
      Freien die schwächste Auszeichnung, die es gibt.
    */
    --ma-sicht-bg: #ffffff;
    --ma-sicht-rand: #cbd5e1;
    --ma-sicht-text: #334155;
    --ma-sicht-aktiv-bg: #1e3a8a;
    --ma-sicht-aktiv-text: #ffffff;
    --ma-sicht-zahl: #64748b;
    --ma-sicht-zahl-aktiv: #c7d7f5;
    --ma-leiste-bg: #f8fafc;

    --ma-blatt-bg: #ffffff;
    --ma-blatt-schirm: rgba(15, 23, 42, 0.45);
}

/* ---------- Erfassungsmaske: Kopf ---------- */

.todo-kopf {
    padding: 0.25rem 0 0.75rem;
}

.todo-kopf h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: inherit;
}

.todo-kopf .todo-kopf-sub {
    color: var(--todo-text-leise);
    font-size: 0.9rem;
}

.todo-kopfzeile {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.todo-kopfzeile .todo-btn {
    flex: 0 1 auto;
    padding: 0 1.1rem;
}

/* ---------- Aktionen ---------- */

.todo-aktionen {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.85rem;
}

/* Gilt für <button> und <a> gleichermaßen – Navigation laeuft ueber echte
   Links, damit sie auch ohne Interaktivitaet und im WebView funktioniert. */
.todo-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--bb-tap);
    padding: 0 0.9rem;
    border-radius: var(--bb-radius-sm);
    border: 1px solid transparent;
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--bb-font);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: filter var(--bb-motion);
}

a.todo-btn:hover {
    text-decoration: none;
}

.todo-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.todo-btn:not(:disabled):hover {
    filter: brightness(1.12);
}

.todo-btn-start {
    background: var(--todo-aktion-start);
    color: var(--todo-aktion-start-text);
}

/* ---------- Erfassungsmaske ---------- */

.todo-form {
    max-width: 640px;
    padding-bottom: 2rem;
}

.todo-feld {
    margin-bottom: 1rem;
}

.todo-feld > label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--todo-text-leise);
    margin-bottom: 0.3rem;
}

.todo-feld-hinweis {
    font-size: 0.8rem;
    color: var(--todo-text-sehr-leise);
    margin-top: 0.25rem;
}

.todo-input {
    width: 100%;
    min-height: var(--bb-tap);
    padding: 0.55rem 0.75rem;
    font-size: 1rem;
    font-family: var(--bb-font);
    color: var(--todo-text);
    background: var(--todo-feld-bg);
    border: 1px solid var(--todo-feld-rand);
    border-radius: var(--bb-radius-sm);
}

.todo-input:focus {
    outline: 2px solid var(--todo-aktion-start);
    border-color: var(--todo-aktion-start);
}

.todo-textarea {
    min-height: 6rem;
    resize: vertical;
}

.todo-bewertung {
    border: 1px solid var(--todo-feld-rand);
    border-radius: var(--bb-radius);
    padding: 0.9rem 1rem 0.5rem;
    margin-bottom: 1rem;
    background: var(--todo-block-bg);
}

.todo-bewertung-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-weight: 800;
    color: inherit;
    margin-bottom: 0.7rem;
}

.todo-score {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--todo-aktion-start);
}

.todo-bewertung-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 0.75rem;
}

.todo-haken {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    margin-top: 0.5rem;
}

/* `inherit`: Text direkt auf dem Seitenhintergrund folgt der Anwendung. */
.todo-haken label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: var(--bb-tap);
    color: inherit;
    cursor: pointer;
}

.todo-haken input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--todo-aktion-start);
}

.todo-umschalter {
    display: flex;
    gap: 0.4rem;
}

.todo-umschalter-knopf {
    flex: 1 1 0;
    min-height: var(--bb-tap);
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--bb-font);
    color: var(--todo-text-leise);
    background: var(--todo-feld-bg);
    border: 1px solid var(--todo-feld-rand);
    border-radius: var(--bb-radius-sm);
    cursor: pointer;
}

.todo-umschalter-knopf.is-aktiv {
    color: var(--todo-aktion-start-text);
    background: var(--todo-aktion-start);
    border-color: var(--todo-aktion-start);
}

.todo-btn-zweit {
    background: transparent;
    color: var(--todo-text);
    border-color: var(--todo-feld-rand);
}

.todo-meldung {
    padding: 0.75rem 1rem;
    border-radius: var(--bb-radius-sm);
    border: 1px solid var(--todo-status-erledigt);
    color: var(--todo-status-erledigt);
    margin-bottom: 0.75rem;
}

/* ---------- Zustände ---------- */

.todo-hinweis {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--todo-text-leise);
}

.todo-warnung {
    color: var(--todo-status-blockiert);
    font-weight: 700;
}

.todo-fehler {
    padding: 0.75rem 1rem;
    border-radius: var(--bb-radius-sm);
    border: 1px solid var(--todo-vorrang);
    color: var(--todo-vorrang);
    margin-bottom: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   „Meine Aufgaben" (ma-) – die Arbeitssicht
   ═══════════════════════════════════════════════════════════════════════════

   Zwei Fassungen, EIN Satz Markup. Die Grundregeln hier sind die für das
   Handy; die breite Fassung steht ganz unten in einer Container-Abfrage.

   Warum Container und nicht Bildschirmbreite (@media): Der Anwender darf die
   Fassung erzwingen. Mit `@media` ginge das nicht ohne jede Regel zweimal zu
   schreiben – mit einem Container genügt es, dessen Breite zu ändern:

     .ma.ist-handy   → Container wird schmal   → Handy-Regeln greifen
     .ma.ist-desktop → Container wird breit    → breite Regeln greifen
     ohne beides     → Container ist so breit wie das Fenster (Vorgabe)

   Nebeneffekt, der die Bedienung erst rund macht: Auch die Sichtbarkeit der
   beiden Umschaltknöpfe hängt daran. Sichtbar ist immer NUR der, der in die
   andere Fassung führt – und das weiss CSS, nicht der Code.

   Kann ein Browser keine Container-Abfragen, bleibt alles bei der
   Handy-Fassung. Das ist der richtige Rückfall: bedienbar, nur grösser.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Erzwungene breite Fassung auf einem schmalen Gerät soll waagerecht scrollen
   dürfen, statt den Rest der Seite zu sprengen.

   Das `:has()` ist Absicht und keine Spielerei: Ein `overflow` ausser
   `visible` macht dieses Element zum Scroll-Container, und `position: sticky`
   weiter innen richtet sich dann nach IHM statt nach dem Fenster – die
   klebende Knopfleiste im Detail wäre wirkungslos. Deshalb bekommt der Rahmen
   den Überlauf nur in dem einen Fall, in dem er gebraucht wird: bei erzwungen
   breiter Fassung. Und genau dort ist die Knopfleiste ohnehin nicht klebend. */
.ma-rahmen:has(> .ma.ist-desktop) {
    overflow-x: auto;
}

.ma {
    container: meineaufgaben / inline-size;
    font-family: var(--bb-font);
    font-size: var(--ma-schrift);
    color: var(--ma-text);

    /*
      Wo „oben" für klebende Elemente dieser Ansicht anfängt.

      Die Kopfleiste der Anwendung klebt selbst bei `top: 0` und liegt mit
      `z-index: 40` über allem hier. Ein Element mit `position: sticky;
      top: 0` bliebe also genau DAHINTER stehen — sichtbar wäre nichts. Der
      Wert ist die Höhe jener Leiste (2,75 rem in `MainLayout.razor.css`) plus
      der Einkerbung oben am iPhone.

      Als Variable und nicht als fester Wert, damit ein Host mit einer anderen
      Leiste sie überschreiben kann, ohne diese Datei anzufassen. Steht sie
      falsch, hält das klebende Element ein paar Pixel zu hoch oder zu tief —
      sichtbar bleibt es in jedem Fall.
    */
    --ma-kleber-oben: calc(2.75rem + env(safe-area-inset-top, 0px));
}

.ma.ist-handy {
    max-width: 460px;
    margin-inline: auto;
}

.ma.ist-desktop {
    min-width: 900px;
}

.ma-inhalt {
    padding-bottom: 2rem;
}

/* ---------- Kopf ---------- */

/*
  Bis zum 19.08.2026 stand hier zusätzlich ein Titel „Meine Aufgaben" und eine
  Zählzeile („Felix Fendt · 4 offen · 1 später") — zwei Zeilen, bevor auch nur
  eine Aufgabe zu sehen war. Beides ist raus (Felix): Der Name steht jetzt in
  der dunkelblauen App-Kopfleiste, die Zahlen standen ohnehin schon an der
  Sichtleiste darunter. Übrig ist nur noch das Werkzeug — eine schmale Zeile.
*/
.ma-kopf {
    padding: 0.4rem 0 0.6rem;
}

/* Stand/Aktualisieren, Neue Aufgabe, Fassung. Alles, was man selten braucht —
   deshalb klein, rechtsbündig, am Rand. */
.ma-kopf-werkzeug {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* „Stand 14:32" IST der Aktualisieren-Knopf (19.08.2026). Zwei getrennte
   Elemente für dieselbe Frage waren eine Zeile zu viel: Wer wissen will, ob
   er auf einen frischen Stand sieht, will im selben Moment auch neu laden. */
.ma-stand {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: var(--ma-tap-klein);
    padding: 0 0.6rem;
    border: 1px solid var(--ma-sicht-rand);
    border-radius: 999px;
    background: var(--ma-sicht-bg);
    color: var(--ma-text-leise);
    font-family: var(--bb-font);
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.ma-stand:not(:disabled):hover {
    border-color: var(--ma-karte-rand-stark);
    color: var(--ma-text);
}

.ma-stand:disabled {
    cursor: default;
}

.ma-stand-zeichen {
    font-size: 1rem;
    line-height: 1;
}

/* Beim Laden dreht sich das Zeichen — die Rückmeldung, ohne die ein Griff
   folgenlos wirkt und ein zweites Mal getan wird (E34). */
.ma-stand.ist-aktiv .ma-stand-zeichen {
    animation: ma-dreht 0.9s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .ma-stand.ist-aktiv .ma-stand-zeichen {
        animation: ma-pulst 1.4s ease-in-out infinite;
    }
}

/* Nur in der breiten Fassung — siehe Container-Abfrage unten (E53). */
.ma-nur-gross {
    display: none;
}

/* Beide Knöpfe stehen im Markup; welcher zu sehen ist, entscheidet die
   Container-Abfrage unten. Schmal heisst: „Desktop-Ansicht" anbieten.

   Auf dem Handy nur das Zeichen: Der Griff ist selten, und das Wort dahinter
   kostete die halbe Kopfzeile (Felix, 19.08.2026). Der Name steht im
   title- und aria-label-Attribut, ist also weiterhin vorlesbar. */
.ma-ansicht {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: var(--ma-tap-klein);
    min-height: var(--ma-tap-klein);
    padding: 0 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--ma-sicht-rand);
    background: var(--ma-sicht-bg);
    color: var(--ma-sicht-text);
    font-family: var(--bb-font);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
}

.ma-ansicht:hover {
    border-color: var(--ma-karte-rand-stark);
}

.ma-ansicht-gross {
    display: inline-flex;
}

.ma-ansicht-wort {
    display: none;
}

/*
  Gezeichnete Symbole statt Emoji (Felix, 19.08.2026) — Desktop-Ansicht,
  Filter, und das grosse Zeichen im leeren „Kein Treffer"-Zustand.

  `width/height: 1em` macht das Symbol mit dem Text seines Knopfes mitwachsend
  — an der Sichtleiste klein, im leeren Zustand (dort mit `font-size: 2.6rem`
  am Elternelement) entsprechend gross, ohne dass hier zwei Grössen gepflegt
  werden müssten. `stroke: currentColor` lässt es die Farbe des Knopfes tragen,
  auch im aktiven, gefüllten Zustand (weiss auf Blau).
*/
.ma-symbol {
    width: 1em;
    height: 1em;
    display: inline-block;
    flex-shrink: 0;
    vertical-align: -0.125em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Sichtleiste ---------- */

/*
  Die Reiterzeile. Sie ersetzt seit dem 19.08.2026 den Umschalter, der
  abwechselnd „Alle offenen" und „Nur meine" hiess — und damit nie sagte, was
  gerade gilt, sondern nur, was passieren würde. Hier stehen alle Sichten
  nebeneinander, die aktive ist gefüllt.

  Waagerecht scrollbar, damit später Wohnungswechsel danebenpasst, ohne dass
  hier etwas umgebaut werden muss. Der Filterknopf steht AUSSERHALB des
  scrollenden Teils: Er darf nie wegrutschen.
*/
.ma-leiste {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
}

.ma-sichten {
    display: flex;
    gap: 0.35rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    /* Ein angeschnittener Reiter am Rand ist der Hinweis, dass es weitergeht —
       deshalb kein `flex-wrap`. Zwei Zeilen Reiter wären keine Leiste mehr. */
    -webkit-overflow-scrolling: touch;
}

.ma-sichten::-webkit-scrollbar {
    display: none;
}

.ma-sicht {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    min-height: var(--ma-tap-zweit);
    padding: 0 0.75rem;
    border: 1px solid var(--ma-sicht-rand);
    border-radius: 999px;
    background: var(--ma-sicht-bg);
    color: var(--ma-sicht-text);
    font-family: var(--bb-font);
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.ma-sicht:not(:disabled):hover {
    border-color: var(--ma-karte-rand-stark);
}

.ma-sicht.ist-aktiv {
    background: var(--ma-sicht-aktiv-bg);
    border-color: var(--ma-sicht-aktiv-bg);
    color: var(--ma-sicht-aktiv-text);
}

.ma-sicht:disabled {
    opacity: 0.6;
    cursor: default;
}

.ma-sicht-zahl {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--ma-sicht-zahl);
}

.ma-sicht.ist-aktiv .ma-sicht-zahl {
    color: var(--ma-sicht-zahl-aktiv);
}

/* Der Filterknopf. Ohne gesetzten Filter nur das Zeichen, mit Filter zusätzlich
   die Anzahl — so ist von aussen zu sehen, dass die Liste beschnitten ist,
   ohne dass die Marken darunter gelesen werden müssen. */
.ma-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    flex: 0 0 auto;
    min-width: var(--ma-tap-zweit);
    min-height: var(--ma-tap-zweit);
    padding: 0 0.6rem;
    border: 1px solid var(--ma-sicht-rand);
    border-radius: 999px;
    background: var(--ma-sicht-bg);
    color: var(--ma-sicht-text);
    font-family: var(--bb-font);
    font-size: 1.05rem;
    font-weight: 800;
    cursor: pointer;
}

.ma-filter:hover {
    border-color: var(--ma-karte-rand-stark);
}

.ma-filter.ist-aktiv {
    background: var(--ma-sicht-aktiv-bg);
    border-color: var(--ma-sicht-aktiv-bg);
    color: var(--ma-sicht-aktiv-text);
}

.ma-filter-zahl {
    font-size: 0.85rem;
}

/* Was gerade gefiltert ist — einzeln wegklickbar. Dieselbe Idee wie die
   Marken-Zeile über der Dispositionsliste. */
.ma-filtermarken {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
}

.ma-filtermarke {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: var(--ma-tap-klein);
    padding: 0 0.6rem;
    border: 1px solid var(--ma-sicht-aktiv-bg);
    border-radius: 999px;
    background: var(--ma-sicht-aktiv-bg);
    color: var(--ma-sicht-aktiv-text);
    font-family: var(--bb-font);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.ma-filter-weg {
    min-height: var(--ma-tap-klein);
    padding: 0 0.5rem;
    border: 0;
    background: transparent;
    color: var(--ma-text-leise);
    font-family: var(--bb-font);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

/* ---------- Bühne ---------- */

.ma-buehne {
    display: block;
}

/* Auf dem Handy tritt das Detail an die Stelle der Liste – nebeneinander ist
   dort kein Platz, und zwei Ebenen übereinander wären eine Ebene zu viel.
   Kopf, Sichtleiste und Filtermarken gehen mit: Sie helfen niemandem, der
   gerade vor einer Wohnungstür steht, und kosten die halbe erste
   Bildschirmhöhe. Der schwebende Melde-Knopf verschwindet ebenfalls — im
   Detail klebt bereits eine eigene Knopfleiste unten. */
.ma-inhalt.ist-offen .ma-spalte-liste,
.ma-inhalt.ist-offen .ma-kopf,
.ma-inhalt.ist-offen .ma-leiste,
.ma-inhalt.ist-offen .ma-filtermarken {
    display: none;
}

/* Umgekehrt: Solange nichts gewählt ist, gibt es auf dem Handy keine
   Arbeitsfläche. Sie wäre dort nur eine leere Kachel unter der Liste. */
.ma-inhalt:not(.ist-offen) .ma-spalte-detail {
    display: none;
}

/* ---------- Abschnitte ---------- */

.ma-abschnitt {
    margin: 1.4rem 0 0.6rem;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ma-abschnitt);
}

.ma-abschnitt:first-child {
    margin-top: 0.2rem;
}

.ma-abschnitt span {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    color: var(--ma-text-leise);
}

/*
  „Zukünftige Termine" (1b): derselbe Abschnittskopf, nur ohne den kräftigen
  dunklen Ton — sonst zöge der am Ende der Seite noch einmal genauso viel
  Blick auf sich wie „Feste Termine" ganz oben, und genau das soll er nicht.
*/
.ma-abschnitt-leise {
    color: var(--ma-text-leise);
}

/* Die Zwischenüberschrift im Nachrück-Block (D12): Sie trennt die eigene
   Arbeit der nächsten Wochen von dem, was noch niemandem gehört. Leiser als
   eine Abschnittsüberschrift, denn sie steht bereits INNERHALB eines
   aufgeklappten Blocks — zwei gleich laute Überschriften übereinander lesen
   sich wie zwei getrennte Listen. */
.ma-gruppenangebot-kopf {
    margin: 1rem 0 0.5rem;
    font-size: 0.8rem;
    color: var(--ma-text-leise);
}

/* ---------- Karte ---------- */

.ma-liste {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.ma-karte {
    background: var(--ma-karte-bg);
    border: 1px solid var(--ma-karte-rand);
    /* Der Balken links ist immer da, nur meist grau: Sonst würden die Karten
       je nach Zustand unterschiedlich breit stehen. */
    border-left: 6px solid var(--ma-karte-rand);
    border-radius: var(--bb-radius-lg);
    box-shadow: var(--bb-shadow-sm);
    overflow: hidden;
}

/*
  Grau hinterlegt (1b, Felix 17.08.2026): Kontrast bleibt bewusst hoch genug
  zum Lesen mit Handschuhen (AGENTS.md) — gedämpft heisst hier ein ruhigerer
  Titel und kein Schatten, nicht blasser Text auf hellem Grund.
*/
.ma-liste-zukuenftig .ma-karte {
    background: var(--ma-marke-leise-bg);
    box-shadow: none;
}

.ma-liste-zukuenftig .ma-titel {
    color: var(--ma-text-leise);
    font-weight: 700;
}

.ma-karte.ist-arbeit { border-left-color: var(--ma-marke-arbeit-bg); }
.ma-karte.ist-problem { border-left-color: var(--ma-marke-problem-bg); }
.ma-karte.ist-vorrang { border-left-color: var(--ma-marke-vorrang-bg); }
.ma-karte.ist-termin { border-left-color: var(--ma-marke-termin-bg); }

.ma-karte.ist-offen {
    border-color: var(--ma-karte-rand-stark);
}

/* Der halbe Kartenkopf ist die Trefferfläche zum Öffnen – ein kleines
   Pfeilchen am Rand wäre mit Handschuhen nicht zu treffen. */
.ma-karte-kopf {
    display: block;
    width: 100%;
    padding: 1rem 1.1rem 0.5rem;
    text-align: left;
    background: transparent;
    border: 0;
    font-family: var(--bb-font);
    font-size: inherit;
    color: inherit;
    cursor: pointer;
}

.ma-karte-kopf:hover {
    background: var(--todo-card-bg-hover);
}

/* Titel, Ort und Notiz sind <span> und keine <div>: Sie stehen im Kartenknopf,
   und ein Knopf nimmt nur Phrasing Content. Blockdarstellung deshalb hier. */
.ma-kartenzeile {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.7rem;
}

.ma-titel {
    display: block;
    font-size: var(--ma-titel);
    font-weight: 800;
    line-height: 1.25;
}

/* Der Score steht nur in der breiten Fassung (E53) — auf dem Handy wird von
   oben nach unten gearbeitet, nicht gerechnet (Spezifikation 9.1). */
.ma-score {
    display: none;
    flex: 0 0 auto;
    min-width: 2.6rem;
    padding: 0.15rem 0.5rem;
    border-radius: var(--bb-radius-xs);
    font-size: 0.95rem;
    font-weight: 800;
    text-align: center;
}

.ma-score.ist-hoch { background: var(--cpd-score-hoch-bg); color: var(--cpd-score-hoch-text); }
.ma-score.ist-mittel { background: var(--cpd-score-mittel-bg); color: var(--cpd-score-mittel-text); }
.ma-score.ist-leise { background: var(--cpd-score-leise-bg); color: var(--cpd-score-leise-text); }

.ma-ort {
    display: block;
    margin-top: 0.2rem;
    color: var(--ma-text-leise);
    font-size: 1.02rem;
    font-weight: 600;
}

.ma-notiz {
    margin-top: 0.5rem;
    font-size: 1rem;
    line-height: 1.4;
    /* Lange Notizen dürfen die Karte nicht sprengen – ganz steht sie im Detail. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Marken ---------- */

.ma-marken {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.55rem;
}

.ma-marken:empty {
    display: none;
}

.ma-marke {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 800;
    white-space: nowrap;
}

.ma-marke.ist-termin { background: var(--ma-marke-termin-bg); color: var(--ma-marke-termin-text); }
.ma-marke.ist-vorrang { background: var(--ma-marke-vorrang-bg); color: var(--ma-marke-vorrang-text); }
.ma-marke.ist-arbeit { background: var(--ma-marke-arbeit-bg); color: var(--ma-marke-arbeit-text); }
.ma-marke.ist-problem { background: var(--ma-marke-problem-bg); color: var(--ma-marke-problem-text); }
.ma-marke.ist-leise { background: var(--ma-marke-leise-bg); color: var(--ma-marke-leise-text); }
.ma-marke.ist-gruppe { background: var(--ma-marke-gruppe-bg); color: var(--ma-marke-gruppe-text); }

.ma-marke.ist-zutritt-frei { background: var(--ma-zutritt-frei-bg); color: var(--ma-zutritt-frei-text); }
.ma-marke.ist-zutritt-tun { background: var(--ma-zutritt-tun-bg); color: var(--ma-zutritt-tun-text); }
.ma-marke.ist-zutritt-unklar { background: var(--ma-zutritt-unklar-bg); color: var(--ma-zutritt-unklar-text); }

/* ---------- Knöpfe ---------- */

/* Gilt für <button> und <a> gleichermassen – Navigation läuft über echte
   Links, damit sie auch ohne Interaktivität und im WebView funktioniert.
   ACHTUNG: `.ma-btn` steht in der :not()-Kette von BBBlazor/wwwroot/app.css.
   Fehlt es dort, färbt jene Regel die Schrift des Links hellblau – mit
   !important und höherer Spezifität, also nicht von hier aus zu korrigieren. */
.ma-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--ma-tap);
    padding: 0 1.1rem;
    border-radius: var(--bb-radius-sm);
    border: 2px solid transparent;
    font-family: var(--bb-font);
    font-size: 1.1rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: filter var(--bb-motion);
}

a.ma-btn:hover {
    text-decoration: none;
}

.ma-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.ma-btn:not(:disabled):hover {
    filter: brightness(1.08);
}

/* Sichtbarer Fokus ist hier kein Beiwerk: Auf einem Tablet mit Tastatur oder
   einem Handschuh-Stift ist er oft die einzige Rückmeldung. */
.ma-btn:focus-visible,
.ma-chip:focus-visible,
.ma-karte-kopf:focus-visible,
.ma-ansicht:focus-visible,
.ma-zurueck:focus-visible,
.ma-sicht:focus-visible,
.ma-filter:focus-visible,
.ma-filtermarke:focus-visible,
.ma-filter-weg:focus-visible,
.ma-stand:focus-visible,
.ma-blatt-zu:focus-visible {
    outline: 3px solid var(--ma-marke-termin-bg);
    outline-offset: 2px;
}

/* Der Schirm hinter dem Filterblatt ist ein Knopf und bekommt deshalb sonst
   einen Rahmen quer über den halben Bildschirm. Er ist als Fläche gemeint,
   nicht als Ziel — den Weg mit der Tastatur nimmt „Schliessen" im Kopf. */
.ma-blatt-schirm:focus-visible {
    outline: none;
}

.ma-btn-start {
    background: var(--ma-btn-start-bg);
    color: var(--ma-btn-start-text);
}

.ma-btn-erledigt {
    background: var(--ma-btn-erledigt-bg);
    color: var(--ma-btn-erledigt-text);
}

.ma-btn-problem {
    background: transparent;
    color: var(--ma-btn-problem-text);
    border-color: var(--ma-btn-problem-rand);
}

.ma-btn-melden {
    background: var(--ma-btn-start-bg);
    color: var(--ma-btn-start-text);
}

.ma-btn-leise {
    background: var(--ma-btn-leise-bg);
    color: var(--ma-btn-leise-text);
    border-color: var(--ma-btn-leise-rand);
    font-size: 0.95rem;
    min-height: var(--ma-tap-zweit);
}

/* Übernehmen: die einzige Handlung an einer Gruppenaufgabe. Eigener Ton, weil
   es weder Starten noch Erledigen ist — es geht nicht um die Arbeit, sondern
   darum, wer sie macht. */
.ma-btn-uebernehmen {
    background: var(--ma-btn-uebernehmen-bg);
    color: var(--ma-btn-uebernehmen-text);
}

/* Die zweite Reihe im Detail: kleiner und leiser als die Haupthandlung. Der
   Unterschied ist die ganze Aussage — drei gleich grosse Knöpfe liessen offen,
   welcher gemeint ist (19.08.2026). */
.ma-btn-schmal {
    min-height: var(--ma-tap-zweit);
    font-size: 0.95rem;
    font-weight: 700;
}

.ma-btn-haupt {
    width: 100%;
}

.ma-aktionen {
    display: flex;
    gap: 0.6rem;
    padding: 0.4rem 1rem 1rem;
}

.ma-aktionen .ma-btn {
    flex: 1 1 0;
}

.ma-fremd {
    padding: 0.2rem 1.1rem 1.1rem;
    color: var(--ma-text-leise);
    font-size: 1rem;
    line-height: 1.4;
}

/* ---------- Geöffnete Aufgabe ---------- */

.ma-detail {
    background: var(--ma-karte-bg);
    border: 1px solid var(--ma-karte-rand);
    border-radius: var(--bb-radius-lg);
    box-shadow: var(--bb-shadow-sm);
    padding: 1rem 1.1rem 1.2rem;
}

/*
  Die klebende Kopfleiste der geöffneten Aufgabe (19.08.2026).

  Sie bleibt beim Scrollen oben stehen und beantwortet dabei zwei Fragen
  gleichzeitig: „Wo bin ich?" (der Titel) und „Wie komme ich zurück?". Vorher
  gab es dafür einen Knopf über die volle Breite ganz oben — der schob alles
  Wichtige nach unten und war nach dem ersten Scrollen ebenso weg wie der
  Titel; man las Fotos und Zutritt, ohne noch zu sehen, wozu.

  Die negativen Ränder heben die Polsterung von `.ma-detail` auf, damit die
  Leiste bis an die Kanten der Karte reicht.
*/
.ma-detail-kopf {
    position: sticky;
    top: var(--ma-kleber-oben);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: -1rem -1.1rem 0.8rem;
    padding: 0.5rem 0.9rem;
    background: var(--ma-karte-bg);
    border-bottom: 1px solid var(--ma-karte-rand);
    border-radius: var(--bb-radius-lg) var(--bb-radius-lg) 0 0;
}

.ma-detail-kopf-titel {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ma-text-leise);
}

/* Ein echter Knopf und kein Textlink — als Knopf erkennbar musste er bleiben
   (Felix, 07.08.2026). Nur nicht mehr über die volle Breite: Ein Wort genügt,
   und 48 px hoch ist er weiterhin. */
.ma-zurueck {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: var(--ma-tap);
    padding: 0 0.9rem;
    background: var(--ma-marke-leise-bg);
    border: 1px solid var(--ma-btn-leise-rand);
    border-radius: var(--bb-radius-sm);
    font-family: var(--bb-font);
    font-size: 1rem;
    font-weight: 800;
    color: var(--ma-btn-leise-text);
    cursor: pointer;
}

/* „Abbrechen" im Melde- und Problem-Formular steht weiterhin allein und ohne
   Kopfleiste darum — dort bleibt es ein Knopf über die volle Breite. */
.ma-detail > .ma-zurueck {
    display: flex;
    width: 100%;
    margin-bottom: 1rem;
}

.ma-zurueck:hover {
    border-color: var(--ma-karte-rand-stark);
}

.ma-detail-titel {
    margin: 0.2rem 0 0;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.25;
    color: inherit;
}

.ma-detail-ort {
    margin-top: 0.15rem;
    color: var(--ma-text-leise);
    font-size: 1.05rem;
    font-weight: 600;
}

.ma-detail-text {
    margin-top: 0.85rem;
    font-size: 1.05rem;
    line-height: 1.45;
}

.ma-daten {
    margin: 1.1rem 0 0;
}

.ma-datenzeile {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.7rem 0;
    border-top: 1px solid var(--ma-karte-rand);
}

.ma-datenzeile dt {
    color: var(--ma-text-leise);
    font-weight: 600;
}

.ma-datenzeile dd {
    margin: 0;
    text-align: right;
    font-weight: 800;
}

.ma-datenzeile dd.ist-gut {
    color: var(--ma-gut);
}

/* Anrufen ist vor Ort die häufigste Handlung nach „Starten" – deshalb ein
   eigener Knopf über die volle Breite und keine Nummer zum Abtippen. */
.ma-btn-kontakt {
    width: 100%;
    margin-top: 1.1rem;
    padding: 0.7rem 1.1rem;
    flex-wrap: wrap;
    background: var(--ma-btn-kontakt-bg);
    color: var(--ma-btn-kontakt-text);
}

.ma-btn-zusatz {
    flex-basis: 100%;
    font-size: 0.95rem;
    font-weight: 600;
    opacity: 0.92;
}

.ma-fussnote {
    margin-top: 1.1rem;
    color: var(--ma-text-leise);
    font-size: 0.98rem;
    line-height: 1.4;
}

/* ---------- Melden ---------- */

/*
  Der schwebende Melde-Knopf (Felix, 19.08.2026).

  Bis hierher stand er ganz oben über die volle Breite (E59). Die Begründung
  war richtig — wer im Treppenhaus etwas sieht, soll sofort draufdrücken
  können —, die Umsetzung nicht: Ganz oben ist er weg, sobald man einmal
  scrollt, und er kostete eine volle Zeile am teuersten Platz der Seite.

  `position: fixed` und nicht `sticky`: Er soll an derselben Stelle des
  BILDSCHIRMS stehen, nicht an einer Stelle des Dokuments. Ein Vorfahr mit
  `transform`, `filter` oder `will-change` würde daraus einen Bezug auf jenen
  Vorfahren machen — im Weg von `.bb-page` bis hier steht keiner, und wer
  einen einbaut, verschiebt diesen Knopf.

  `env(safe-area-inset-bottom)` wegen der Wischleiste am iPhone: ohne sie
  läge der Knopf teils darunter.
*/
.ma-melden-schwebend {
    position: fixed;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 20;
}

.ma-btn-melden-fab {
    min-height: var(--ma-tap);
    padding: 0 1.15rem;
    border-radius: 999px;
    background: var(--ma-melden-bg);
    color: var(--ma-melden-text);
    border: 2px solid var(--ma-melden-rand);
    font-size: 1rem;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.28);
}

/* Damit die letzte Karte nicht dauerhaft unter dem Knopf liegt. */
.ma-spalte-liste {
    padding-bottom: calc(var(--ma-tap) + 1.5rem);
}

.ma-eingabe-gross {
    font-size: 1.05rem;
    line-height: 1.4;
}

/* Zweites Auswahlfeld (Einheit) direkt unter dem ersten */
.ma-eingabe-zweit {
    margin-top: 0.5rem;
}

/* Was gerade läuft, während die Meldung rausgeht (E62). Kein Ring, der sich
   nur dreht: Der Text sagt, WORAUF man wartet — „Foto wird abgelegt" erklärt
   die Wartezeit, „Bitte warten" nicht. */
.ma-schritt {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--bb-radius-sm);
    background: var(--ma-marke-leise-bg);
    color: var(--ma-marke-leise-text);
    font-weight: 700;
}

.ma-schritt-ring {
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    border: 3px solid var(--ma-flaeche-rand);
    /* Bis zum 19.08.2026 zeigte diese Kante auf `--ma-meldung-rand` — ein
       blasses Grün auf hellgrauem Grund, also praktisch unsichtbar. Dass es
       überhaupt Grün war, lag am doppelt vergebenen Namen (siehe :root). */
    border-top-color: var(--ma-melden-bg);
    border-radius: 50%;
    animation: ma-dreht 0.9s linear infinite;
}

@keyframes ma-dreht {
    to { transform: rotate(360deg); }
}

/* Wer reduzierte Bewegung eingestellt hat, bekommt ein Pulsieren statt einer
   Drehung — unsichtbar darf die Anzeige nicht werden, sonst fehlt sie genau
   denen, die sie brauchen. */
@media (prefers-reduced-motion: reduce) {
    .ma-schritt-ring {
        animation: ma-pulst 1.4s ease-in-out infinite;
    }

    @keyframes ma-pulst {
        50% { opacity: 0.35; }
    }
}

/* Die Quittung ist keine Arbeitsliste — leise, klein, nur zum Nachsehen. */
.ma-quittungen {
    display: flex;
    flex-direction: column;
}

.ma-quittung {
    padding: 0.55rem 0;
    border-top: 1px solid var(--ma-quittung-rand);
}

.ma-quittung-text {
    display: block;
    font-weight: 600;
    line-height: 1.35;
}

.ma-quittung-stand {
    display: block;
    margin-top: 0.1rem;
    color: var(--ma-quittung-stand);
    font-size: 0.9rem;
}

/* ---------- Fotos ---------- */

.ma-fotoblock {
    margin-top: 1.3rem;
}

.ma-fotos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}

/* Antippen macht das Bild gross — dieselben Daten, nur andere Masse. Ein
   zweiter Weg über die Leitung entsteht dadurch nicht. */
.ma-foto {
    width: 104px;
    height: 104px;
    padding: 0;
    overflow: hidden;
    background: var(--ma-marke-leise-bg);
    border: 2px solid var(--ma-karte-rand);
    border-radius: var(--bb-radius-sm);
    cursor: pointer;
}

.ma-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ma-foto.ist-gross {
    width: 100%;
    height: auto;
    border-color: var(--ma-marke-termin-bg);
}

.ma-foto.ist-gross img {
    height: auto;
    object-fit: contain;
}

.ma-foto-zeile {
    padding: 0.5rem 0.2rem;
    color: var(--ma-text-leise);
}

/* Der Knopf ist ein <label> zum verborgenen Dateifeld: So wird aus einem
   winzigen „Durchsuchen…" eine Fläche, die ein Handschuh trifft — ohne
   JavaScript, und damit auch im WebView der App. */
.ma-btn-foto {
    width: 100%;
    background: var(--ma-btn-leise-bg);
    color: var(--ma-btn-leise-text);
    border: 2px dashed var(--ma-btn-leise-rand);
}

/* Ein <label> lässt sich nicht deaktivieren — also nimmt man ihm die Klicks. */
.ma-btn.ist-gesperrt {
    opacity: 0.5;
    pointer-events: none;
}

/* Sichtbar verborgen, aber weiterhin bedienbar: Das Label braucht ein echtes
   Feld zum Anklicken, `display: none` würde es unerreichbar machen. */
.ma-dateifeld {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/*
  Die Handlungen bleiben in Daumenreichweite, auch wenn das Detail lang ist.

  Zwei Reihen statt drei gleicher Knöpfe (19.08.2026): oben der naheliegende
  nächste Schritt über die volle Breite, darunter kleiner die übrigen. Vorher
  standen hier drei Knöpfe zu je 60 px untereinander — einhundertachtzig Pixel
  klebende Leiste auf einem Bildschirm, der selten mehr als sechshundert hoch
  ist, und trotzdem liess die Anordnung offen, welcher gemeint ist.
  Weggenommen wird nichts: Alle drei Wege bleiben erreichbar (E40).

  `padding-bottom` mit der Safe-Area: sonst liegt die untere Knopfreihe am
  iPhone unter der Wischleiste.
*/
.ma-detail-aktionen {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1.3rem -1.1rem -1.2rem;
    padding: 0.8rem 1.1rem calc(0.8rem + env(safe-area-inset-bottom, 0px));
    background: var(--ma-karte-bg);
    border-top: 1px solid var(--ma-karte-rand);
}

.ma-detail-aktionen > .ma-btn {
    width: 100%;
}

.ma-detail-aktionen-zweit {
    display: flex;
    gap: 0.5rem;
}

.ma-detail-aktionen-zweit .ma-btn {
    flex: 1 1 0;
}

/* ---------- Problem melden ---------- */

.ma-lob {
    margin-top: 0.9rem;
    padding: 0.9rem 1rem;
    border-radius: var(--bb-radius-sm);
    background: var(--ma-lob-bg);
    border: 1px solid var(--ma-lob-rand);
    color: var(--ma-lob-text);
    font-size: 1.02rem;
    line-height: 1.45;
}

.ma-feldtitel {
    margin: 1.2rem 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 800;
}

.ma-feldtitel span {
    font-weight: 600;
    color: var(--ma-text-leise);
}

.ma-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ma-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: var(--ma-tap-zweit);
    padding: 0 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--ma-chip-rand);
    background: var(--ma-chip-bg);
    color: var(--ma-chip-text);
    font-family: var(--bb-font);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
}

.ma-chip.ist-aktiv {
    background: var(--ma-chip-aktiv-bg);
    color: var(--ma-chip-aktiv-text);
    border-color: var(--ma-chip-aktiv-bg);
}

/* Die Anzahl hinter dem Namen: Sie sagt vor dem Antippen, ob sich der Griff
   lohnt. Ohne sie wählt man ein Haus und landet auf einer leeren Liste. */
.ma-chip-zahl {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--ma-sicht-zahl);
}

.ma-chip.ist-aktiv .ma-chip-zahl {
    color: var(--ma-sicht-zahl-aktiv);
}

.ma-eingabe {
    width: 100%;
    padding: 0.65rem 0.75rem;
    font-family: var(--bb-font);
    font-size: 1rem;
    color: var(--ma-text);
    background: var(--todo-feld-bg);
    border: 2px solid var(--ma-karte-rand);
    border-radius: var(--bb-radius-sm);
}

.ma-eingabe:focus {
    outline: 3px solid var(--ma-marke-termin-bg);
    outline-offset: 1px;
}

/* ---------- Zustände ---------- */

.ma-meldung {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
    padding: 0.8rem 1rem;
    border-radius: var(--bb-radius-sm);
    background: var(--ma-meldung-bg);
    border: 1px solid var(--ma-meldung-rand);
    color: var(--ma-meldung-text);
    font-weight: 700;
}

.ma-btn-rueck {
    min-height: 48px;
    font-size: 1rem;
    background: transparent;
    color: var(--ma-meldung-text);
    border-color: var(--ma-meldung-text);
}

.ma-fehler {
    margin-bottom: 0.9rem;
    padding: 0.8rem 1rem;
    border-radius: var(--bb-radius-sm);
    border: 2px solid var(--todo-vorrang);
    color: var(--todo-vorrang);
    font-weight: 700;
}

.ma-hinweis {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--ma-text-leise);
    font-size: 1.05rem;
}

.ma-leer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem 1rem;
    text-align: center;
}

.ma-leer-zeichen {
    font-size: 2.6rem;
    line-height: 1;
    color: var(--ma-gut);
}

/* „Kein Treffer" ist kein Erfolg, sondern nur eine Feststellung — das grüne
   Häkchen-Grün von oben passt hier nicht. Der Trichter bleibt neutral. */
.ma-leer-zeichen.ist-filter {
    color: var(--ma-flaeche-text);
}

.ma-leer-text {
    margin-top: 0.6rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ma-text-leise);
}

/* Der zweite Satz sagt, WARUM nichts da ist. Das ist der Unterschied zwischen
   „alles erledigt" und „der Filter nimmt gerade alles weg" — die häufigste
   Stelle, an der eine Oberfläche unbeabsichtigt lügt. */
.ma-leer-sub {
    margin-top: 0.25rem;
    max-width: 34ch;
    color: var(--ma-text-leise);
    font-size: 0.95rem;
    line-height: 1.4;
}

.ma-leer .ma-btn {
    margin-top: 1.1rem;
}

/* Die leere Arbeitsfläche (E53). Sie hält den Platz sichtbar frei, damit das
   Layout beim Anklicken nicht umspringt — und macht nebenbei sichtbar, wo
   künftige Werkzeuge hingehören. Gestrichelt, damit sie nicht wie eine
   inhaltsleere Karte aussieht, sondern wie ein reservierter Bereich. */
.ma-arbeitsflaeche {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 18rem;
    padding: 2rem 1.5rem;
    text-align: center;
    border: 2px dashed var(--ma-flaeche-rand);
    border-radius: var(--bb-radius-lg);
    color: var(--ma-flaeche-text);
}

.ma-arbeitsflaeche-zeichen {
    font-size: 2.2rem;
    line-height: 1;
    opacity: 0.7;
}

.ma-arbeitsflaeche-text {
    margin-top: 0.7rem;
    font-size: 1.1rem;
    font-weight: 700;
}

.ma-arbeitsflaeche-sub {
    margin-top: 0.35rem;
    max-width: 30ch;
    font-size: 0.95rem;
    line-height: 1.4;
}

/* ---------- Filterblatt ---------- */

/*
  Auf dem Handy von unten hereingeschoben, in der breiten Fassung eine Karte
  in der Mitte (siehe Container-Abfrage). Von unten, weil dort der Daumen
  liegt — ein Dialog in der Bildschirmmitte zwingt zum Umgreifen.
*/
.ma-blatt-rahmen {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: flex-end;
}

/* Der Schirm ist ein echter <button>: Tippen daneben schliesst, und das muss
   auch mit der Tastatur gehen. Ein <div> mit Klick-Handler kann das nicht. */
.ma-blatt-schirm {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: var(--ma-blatt-schirm);
    cursor: pointer;
}

.ma-blatt {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 85vh;
    background: var(--ma-blatt-bg);
    border-radius: var(--bb-radius-lg) var(--bb-radius-lg) 0 0;
    box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.3);
}

.ma-blatt-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1rem 0.2rem;
}

.ma-blatt-kopf h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--ma-text);
}

.ma-blatt-zu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ma-tap-zweit);
    height: var(--ma-tap-zweit);
    border: 0;
    border-radius: 999px;
    background: var(--ma-marke-leise-bg);
    color: var(--ma-text-leise);
    font-family: var(--bb-font);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

/* Der mittlere Teil scrollt, Kopf und Fuss bleiben stehen — sonst wäre der
   Knopf „Anzeigen" bei vielen Häusern nicht mehr erreichbar. */
.ma-blatt-inhalt {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 1rem 0.5rem;
}

.ma-blatt-inhalt .ma-feldtitel:first-child {
    margin-top: 0.6rem;
}

.ma-blatt-fuss {
    display: flex;
    gap: 0.6rem;
    padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--ma-karte-rand);
}

.ma-blatt-fuss .ma-btn {
    flex: 1 1 0;
}

/* Der zweite Knopf trägt die Zahl und ist deshalb der breitere. */
.ma-blatt-fuss .ma-btn-start {
    flex: 2 1 0;
}

/* ---------- Erledigt ---------- */

/* Ein Nachweis, keine Arbeitsliste: gedämpft, ohne Marken, ohne Score. */
.ma-liste-erledigt .ma-karte {
    border-left-color: var(--ma-karte-rand);
}

.ma-liste-erledigt .ma-titel {
    color: var(--ma-text-leise);
}

.ma-erledigt-zeile {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.8rem 1rem 0.2rem;
}

.ma-erledigt-text {
    min-width: 0;
}

.ma-erledigt-wann {
    flex: 0 0 auto;
    color: var(--ma-text-leise);
    font-size: 0.85rem;
    font-weight: 700;
}

/* ═══ Die breite Fassung ═══════════════════════════════════════════════════
   Alles hierunter gilt NUR, wenn der Container breit genug ist. Es steht an
   genau einer Stelle; die Handy-Fassung darüber bleibt die Grundlage.

   Wichtig: Eine Container-Abfrage kann ihren eigenen Container nicht
   gestalten. Die Grössen-Variablen gehen deshalb an `.ma-inhalt`, nicht an
   `.ma` – von dort erben sie nach unten. */
@container meineaufgaben (min-width: 880px) {

    /* Der Umschalter zeigt jetzt in die andere Richtung — und darf hier sein
       Wort tragen, weil oben Platz ist. */
    .ma-ansicht-gross { display: none; }
    .ma-ansicht-handy { display: inline-flex; }
    .ma-ansicht { padding: 0 0.8rem; }
    .ma-ansicht-wort { display: inline; }

    /* Ruhigere Masse. Der Abstand zur Handy-Fassung ist seit dem 19.08.2026
       klein — dort gelten jetzt ebenfalls normale Masse. */
    .ma-inhalt {
        --ma-tap: 42px;
        --ma-tap-zweit: 36px;
        --ma-titel: 1.05rem;
        --ma-schrift: 0.95rem;

        font-size: var(--ma-schrift);
    }

    .ma-btn {
        font-size: 1rem;
        border-width: 1px;
    }

    .ma-marke {
        font-size: 0.82rem;
        font-weight: 700;
        padding: 0.2rem 0.6rem;
    }

    .ma-titel { font-size: var(--ma-titel); }
    .ma-ort,
    .ma-notiz { font-size: 0.92rem; }

    /* Score und „+ Neue Aufgabe" gibt es nur hier (E53). */
    .ma-score { display: inline-block; }
    .ma-nur-gross { display: inline-flex; }

    /* Die ganze Kopfleiste des Details entfällt: Die Liste steht ja daneben,
       und der Titel eine Zeile tiefer ohnehin. Ein zweiter Klick auf dieselbe
       Karte leert die Arbeitsfläche wieder. Der Weg zurück AUS dem
       Problem-Formular bleibt — der führt nicht zur Liste, sondern eine Ebene
       höher. */
    .ma-detail-kopf { display: none; }

    /* Melden schwebt hier nicht: Am Schreibtisch ist Platz, und ein Knopf über
       dem Fenster wäre dort nur im Weg. Er steht wieder im Fluss, oben in der
       Listenspalte — an derselben Stelle wie vor dem 19.08.2026. */
    .ma-melden-schwebend {
        position: static;
        margin-bottom: 1rem;
    }

    .ma-btn-melden-fab {
        width: 100%;
        box-shadow: none;
    }

    .ma-spalte-liste { padding-bottom: 0; }

    /* Das Filterblatt ist hier kein Blatt von unten, sondern eine Karte in der
       Mitte: Ein Bildschirmrand ist am Schreibtisch keine bevorzugte Stelle. */
    .ma-blatt-rahmen { align-items: center; justify-content: center; }

    .ma-blatt {
        width: min(30rem, 90vw);
        max-height: 80vh;
        border-radius: var(--bb-radius-lg);
    }

    /*
      Zwei Spalten, IMMER (E53): links die Liste, rechts die Arbeitsfläche.
      Vorher wechselte das Layout beim Anklicken von einspaltig auf zweispaltig
      — die Liste sprang dabei an eine andere Stelle, und man musste sich neu
      orientieren. Jetzt steht der Platz von Anfang an fest.
    */
    .ma-liste {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
    }

    .ma-buehne {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        gap: 1.5rem;
        align-items: start;
    }

    /* Beide Spalten sind hier immer sichtbar — die Regeln der Handy-Fassung,
       die je nach Auswahl eine davon ausblenden, gelten hier nicht. Kopf,
       Sichtleiste und Filtermarken bleiben ebenfalls stehen: Sie gehören zur
       Liste, und die steht hier ja daneben. */
    .ma-inhalt.ist-offen .ma-spalte-liste,
    .ma-inhalt:not(.ist-offen) .ma-spalte-detail {
        display: block;
    }

    .ma-inhalt.ist-offen .ma-kopf {
        display: block;
    }

    .ma-inhalt.ist-offen .ma-leiste,
    .ma-inhalt.ist-offen .ma-filtermarken {
        display: flex;
    }

    /* Auch hier gilt die Kopfleiste der Anwendung: Mit `top: 1rem` blieb die
       Arbeitsfläche bisher einen Zentimeter unter der Fensterkante stehen —
       also hinter jener Leiste. */
    .ma-spalte-detail {
        position: sticky;
        top: calc(var(--ma-kleber-oben) + 0.5rem);
    }

    /* Kein festgeklebter Balken am unteren Rand – im Fenster ist Platz. Und
       keine Zweiteilung: Nebeneinander ist genug Breite für alle Wege, die
       Hierarchie über die Grösse braucht es hier nicht. */
    .ma-detail-aktionen {
        position: static;
        flex-direction: row;
        margin: 1.3rem 0 0;
        padding: 1rem 0 0;
    }

    .ma-detail-aktionen > .ma-btn,
    .ma-detail-aktionen-zweit .ma-btn {
        width: auto;
        flex: 1 1 0;
    }

    .ma-detail-aktionen-zweit {
        display: contents;
    }

    .ma-detail-titel { font-size: 1.25rem; }
    .ma-chip { min-height: 44px; font-size: 0.95rem; }
    .ma-btn-kontakt { width: auto; }
    .ma-foto { width: 84px; height: 84px; }
    .ma-btn-foto { width: auto; }
}

/* Die Einheit VOR dem Aufgabentitel (Felix, 20.08.2026).
   „B39 · Herdplatte tauschen" ist auf einen Blick zu erfassen, „Herdplatte
   tauschen" mit der Einheit eine Zeile tiefer nicht — wer zehn Karten
   durchgeht, sucht zuerst den Ort. Sie steht IM Titel-Element, bricht also
   mit um und braucht keine eigene Spalte. */
.ma-einheit {
    margin-right: 0.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: var(--bb-radius-xs);
    background: var(--ma-marke-termin-bg);
    color: var(--ma-marke-termin-text);
    font-size: 0.88em;
    font-weight: 800;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Disposition in der Arbeitssicht (E109, D1/D4)

   Zwei neue Bausteine, beide bewusst LEISE: Sie sagen, was NICHT dasteht.
   Auf einer Seite, die mit Handschuhen im Treppenhaus bedient wird, darf das
   nicht mit der Arbeit selbst um Aufmerksamkeit ringen (E82).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Der Aufklapper fuer „Wenn noch Zeit ist". Ein Knopf, kein Link — er
   navigiert nicht, er zeigt. Die Trefferflaeche ist die ganze Zeile: mit
   Handschuhen trifft man kein Dreieck von 12 px (E82/E47). */
.ma-aufklapp {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    width: 100%;
    min-height: var(--bb-tap, 48px);
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.ma-aufklapp-zeichen {
    flex: none;
    font-size: 0.85em;
}

/* Was zugewiesen, aber nicht eingeplant ist: eine Zeile, keine Liste.
   Der Mitarbeiter soll WISSEN, dass da etwas liegt — und es NICHT selbst
   sortieren. Das ist die Arbeit des Buros. */
.ma-nichtdisponiert {
    margin-top: 0.9rem;
    padding: 0.7rem 0.85rem;
    border: 1px dashed var(--ma-karte-rand);
    border-radius: var(--bb-radius-sm, 10px);
    color: var(--ma-text-leise);
    font-size: 0.9rem;
    line-height: 1.45;
}

.ma-textknopf {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-weight: 700;
    color: var(--ma-abschnitt);
    text-decoration: underline;
    cursor: pointer;
}

/* „seit KW 34" an der Karte. Die Marke, die es ohne E110 gar nicht gaebe:
   Haetten wir den Uebertrag umgebucht statt ihn zu rechnen, waere diese
   Angabe mit dem alten Datum verloren gegangen. */
.ma-marke.ist-uebertrag {
    background: var(--ma-marke-leise-bg);
    color: var(--ma-marke-problem-bg);
}