/* Masken · Teil 1a (Spec docs/superpowers/specs/2026-10-31-masken-mensch-design.md) · Werte aus der Werkbank
   (docs/vorschau/2026-10-30-masken/werkbank.html, Stil „Dao“), Farben nur aus tokens.css (hell und dunkel).
   Spalten nach der Breite der Auslage: .bahn-auslage ist Container (basis.css), zweispaltig ab 640 px. Am Handy ist die
   Auslage kein Container (feste Aktionsleiste), dort gilt die einspaltige Grundregel. Kästen nur für Listen und Daten (E7). */

.karte:has(>.maske){max-width:none}
.maske{display:grid;grid-template-columns:minmax(0,1fr);min-width:0}

/* Kopfbereich als Band (Spec, Thomas 31.10.) · Kopf, Platz der Zeitleiste (1b) und die Zeile aus Befehlszeile und
   Aktionen auf --flaeche3 über die volle Breite der Auslage (Rand wie .bahn-auslage in basis.css), feine Linie unten,
   luftig: 28 px oben, 22 px unten und zwischen den Teilen. Der Kopf im Band ist keine eigene Karte. */
.maskenkopf{--rand:16px;--oben:var(--s4);display:grid;gap:22px;min-width:0;margin:0 calc(-1 * var(--rand));padding:28px var(--rand) 22px;background:var(--flaeche3);border-bottom:1px solid var(--linie2)}
.bahn-auslage>.karte:first-child .maskenkopf{margin-top:calc(-1 * var(--oben))}
.maskenkopf .auslagenkopf{margin:0;padding:0;background:none;border-top:0;border-radius:0}
@media (min-width:860px){.maskenkopf{--rand:40px;--oben:var(--s6)}}
@media (min-width:1280px){.maskenkopf{--rand:48px}}

/* Markenwahl · erst ab zwei Profilen */
.markenwahl{display:flex;flex-wrap:wrap;gap:var(--s3);font-size:.84rem}
.markenwahl a{color:var(--ink2);text-decoration:none}
.markenwahl a[aria-current="true"]{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:4px}

/* Zeile aus Befehlszeile und Aktionen (E6, Änderung 31.10.) · links die Befehlszeile, rechts die Knöpfe, umbrechend ·
   ohne Skript fehlt die Befehlszeile, die Aktionen stehen dann allein rechts */
.befehl-zeile{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s4);min-width:0}
.maske .masken-aktionen{margin:0 0 0 auto;justify-content:flex-end;gap:4px}
.maske .masken-aktionen .knopf{min-height:var(--knopf-hoehe);padding:var(--knopf-polster);font-size:var(--knopf-schrift)}   /* zentrale Maße (basis.css) */

/* Befehlszeile (E5) · 32 px, ohne Skript [hidden] */
.befehl:not([hidden]){position:relative;display:flex;align-items:center;gap:var(--s2);flex:0 1 380px;min-width:220px;height:var(--feld-hoehe);padding:0 10px;border:1px solid var(--linie2);border-radius:4px;background:var(--flaeche)}
.befehl:focus-within{border-color:var(--fokus);outline:2px solid var(--fokus);outline-offset:1px}
/* Mit Skript (Klasse `mit-befehl` aus masken.js) ersetzt das Feld die Knöpfe und füllt die Zeile · Thomas 03.11.2026 */
.befehl-zeile.mit-befehl .masken-aktionen{display:none}
.befehl-zeile.mit-befehl .befehl:not([hidden]){flex:1 1 100%;min-width:0}
.befehl-feld{flex:1;min-width:0;height:100%;border:0;background:none;color:var(--ink);font:inherit;font-size:.86rem}
.befehl-feld:focus{outline:none}
.befehl-feld::placeholder{color:var(--muted)}
.befehl-taste{display:inline-grid;place-items:center;min-width:18px;height:18px;border:1px solid var(--linie2);border-radius:3px;font:600 .7rem/1 var(--font);color:var(--muted)}
.befehl-treffer{position:absolute;z-index:20;top:calc(100% + 4px);left:0;right:0;margin:0;padding:4px 0;list-style:none;background:var(--flaeche);border:1px solid var(--linie2);border-radius:var(--r);box-shadow:0 12px 32px var(--schatten)}
.befehl-treffer[hidden],.befehl-treffer li[hidden]{display:none}
.befehl-treffer a{display:block;padding:6px 12px;color:var(--ink);text-decoration:none}
.befehl-treffer li[aria-selected="true"] a{background:var(--akzent-weich)}

/* Reiterzeile · nur Reiter, auf normalem Grund direkt unter dem Band */
.reiterzeile{display:flex;align-items:flex-end;margin:0 0 var(--s4);padding-top:4px;border-bottom:1px solid var(--linie2)}
.reiter{display:flex;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none}
.reiter-knopf{display:inline-flex;align-items:center;height:36px;padding:0 14px;margin-bottom:-1px;color:var(--ink2);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent}
.reiter-knopf[aria-selected="true"]{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
.reiter-knopf:focus-visible{outline:2px solid var(--fokus);outline-offset:-2px}
.mehr-liste{list-style:none;margin:0}
.mehr-liste a{color:var(--ink);text-decoration:none}

/* Reiter · ohne Skript stehen alle untereinander mit Überschrift; mit Skript nur der aktive, Überschrift für Screenreader */
.reiter-inhalt{display:grid;gap:var(--s5);min-width:0}
.maske:not(.mit-reitern) .reiter-inhalt+.reiter-inhalt{margin-top:var(--s6)}   /* ohne Skript untereinander */
.reiter-inhalt[hidden]{display:none}
.maske :is(#begegnung-neu,[id^="begegnung-"],#alle-gespraeche,#dateien,#notizen,[id^="notiz-"]){scroll-margin-top:calc(var(--kopf) + var(--unter,0px) + 16px)}   /* Ankersprung landet unter der festen Kopfleiste, nicht dahinter */
.reiter-inhalt:focus-visible{outline:2px solid var(--fokus);outline-offset:4px}
.reiter-titel{margin:var(--s4) 0 0;font-family:var(--buch);font-weight:500;font-size:1.3rem}
.maske.mit-reitern .reiter-titel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mk-oben,.mk-links,.mk-rechts{display:grid;gap:var(--s5);min-width:0;align-content:start}
.mk-zwei{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5)}
.mk-unten{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5)}
.maske .rm-block{margin-top:0}   /* Abstand gibt das Raster (gap), Block aus makros.rueckmeldungen_block */
@container (min-width:640px){
  .mk-zwei{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s6)}
  .mk-unten{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--s6)}
  .mk-links,.mk-rechts{container-type:inline-size}   /* Blöcke (Dateien @container) messen die Spalte, nicht die Auslage */
}

/* Blöcke */
.mk-block{min-width:0}
.mk-block>.abschnittkopf{display:flex;align-items:center;gap:6px}
.mk-block>.abschnittkopf .zeichen{width:14px;height:14px;flex:0 0 auto;color:var(--ink2)}
.mk-kasten{background:var(--flaeche);border:1px solid var(--linie);border-radius:6px;padding:12px 14px}
.mk-frei{border-top:1px solid var(--linie2);padding-top:10px}
.mk-frei>.abschnittkopf{border-bottom:0;padding-bottom:0}
.mk-klein{margin:6px 0 0;font-size:.8rem;color:var(--muted)}

/* Lage mit Puls-Kreis rechts (E8: Wichtiges groß) */
.mk-lage{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);align-items:center;justify-content:space-between}
.mk-lage-text{flex:1 1 18rem;min-width:0}
.mk-lage .puls-satz{margin:0;max-width:52em;font-family:var(--buch);font-size:1.45rem;line-height:1.28;color:var(--ink)}
.puls-kreis{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.pk-ring{position:relative;width:88px;height:88px}
.pk-ring svg{display:block;width:88px;height:88px;fill:none;transform:rotate(-90deg)}
.pk-spur,.pk-lauf{fill:none;stroke-width:11}
.pk-spur{stroke:var(--flaeche3)}
.pk-lauf{stroke:var(--signal);stroke-linecap:round}
.pk-mitte{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.pk-mitte b{font:600 1.75rem/1 var(--font);letter-spacing:-.02em;color:var(--ink)}
.pk-mitte span{font-size:.66rem;color:var(--muted)}
.pk-daten{display:grid;grid-template-columns:auto auto;gap:2px 10px;margin:0;font-size:.78rem}
.pk-daten dt{color:var(--muted)}
.pk-daten dd{margin:0;font-weight:600;color:var(--ink)}

/* Eure Gespräche · Kanal-Symbol, Titel, Zeile „zuletzt von …“, Pille mit Text (Farbe nie allein) */
.mk-verlauf{list-style:none;margin:0;padding:0}
.mk-gespraech{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:baseline;padding:6px 0;border-top:1px solid var(--linie)}
.mk-gespraech:first-child{border-top:0}
.mk-gespraech>.zeichen{width:16px;height:16px;align-self:center;color:var(--ink2)}
.mk-g-text{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
.mk-g-text .z-titel{font-family:var(--buch);font-size:.98rem}
.mk-g-unter{font-size:.78rem;color:var(--ink2)}
.mk-g-wann{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted);white-space:nowrap}
.pille{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:10px;font-size:.72rem;font-weight:600;white-space:nowrap}
.pille::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pille.warte{background:var(--st-warte2);color:var(--st-warte2-text)}
.pille.ja{background:var(--st-ja);color:var(--st-ja-text)}
.pille.ruht{background:var(--st-nein);color:var(--st-nein-text)}
.mk-mehr{margin:var(--s2) 0 0;font-size:.8rem}

/* Offen zwischen euch · ihre Zusagen gestrichelt (◌), deine durchgezogen (☐) */
.mk-offen .ihre .haken-feld{border-style:dashed}
/* Die Raum-Regel .bahn-auslage (basis.css, ab 860 px: rechte Angabe nowrap, Spalte auto) trifft auch die Maske im Auslage-Rahmen ·
   hier bleibt die Angabe in 7,5 rem und bricht um, der Titel behält seinen Platz */
@media (min-width:860px){
  .maske .mk-offen .b-zeile{grid-template-columns:34px minmax(0,1fr) 7.5rem}
  .maske .mk-offen .sp-wann{white-space:normal}
}

/* Freie Gedanken · Text steht frei */
.mk-gedanke{margin:0;font-family:var(--buch);font-size:1.02rem;line-height:1.45;white-space:pre-line;overflow-wrap:anywhere}
.mk-fragen{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.mk-fragen li{display:flex;flex-direction:column}
.mk-datum{margin:0;font:400 1.9rem/1.1 var(--buch);color:var(--ink)}

@media (prefers-reduced-motion:no-preference){
  .reiter-knopf{transition:color .15s,border-color .15s}
}

/* ---------- Zeitleiste (Teil 1b) ---------- */
/* F10: Karte nur mit Skript. zeitleiste.js setzt beim Start .zl-an; ohne Klasse bleibt nur die .sr-Liste für Screenreader
   (visuell weg, aus dem Grid-Fluss genommen, kein Rahmen, keine Lücke) */
.zeitleiste:not(.zl-an){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.zeitleiste.zl-an{background:var(--flaeche);border:1px solid var(--linie);border-radius:10px;padding:var(--s2) var(--s3) var(--s3);min-width:0}
.zl-kopf:not([hidden]){display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);font-size:var(--t-meta)}
.zl-klappe,.zl-kanal,.zl-zeitraum,.zl-schraeg,.zl-zurueck{min-height:var(--knopf-hoehe);padding:0 10px;border:1px solid var(--linie);border-radius:999px;background:var(--flaeche2);color:var(--ink2);font:inherit;cursor:pointer}
.zl-klappe{border:0;background:none;padding-left:0;font-weight:600;color:var(--ink)}
.zl-kanaele{display:flex;flex-wrap:wrap;gap:6px}
.zl-zeitraeume{display:flex;gap:4px;margin-left:auto}
.zl-kanaele[hidden],.zl-zeitraeume[hidden]{display:none}
.zl-kanal{display:inline-flex;align-items:center;gap:6px}
.zl-kanal[aria-pressed=false]{background:none;color:var(--muted)}
.zl-kanal[aria-pressed=false] .kanalz{opacity:.35}
/* Zeitraum 3 M … 36 M als Segment-Steuerung wie .segmente (basis.css, 03.11.): Spur, gewählter Zeitraum als Daumen */
.zl-zeitraeume:not([hidden]){gap:2px;padding:2px;border-radius:calc(var(--r) + 2px);background:var(--spur);box-shadow:inset 0 0 0 1px var(--spur-rand)}
.zl-zeitraum{min-height:calc(var(--knopf-hoehe) - 4px);border:0;border-radius:var(--r);background:transparent;font-weight:550}
.zl-zeitraum:hover{color:var(--ink);background:var(--hauch)}
.zl-zeitraum[aria-pressed=true]{background:var(--daumen);color:var(--ink);font-weight:650;box-shadow:0 1px 2px var(--schatten),0 0 0 1px var(--spur-rand)}
/* Schräg/waagerecht und „zurück“ sitzen mit in der Spur, aber als leise Handlung hinter einer Trennlinie, nicht als zweiter Daumen */
.zl-schraeg,.zl-zurueck{position:relative;margin-left:5px;border:0;border-radius:var(--r);background:transparent}
.zl-schraeg::after,.zl-zurueck::after{content:"";position:absolute;left:-4px;top:22%;bottom:22%;width:1px;background:var(--linie2)}
.zl-schraeg:hover,.zl-zurueck:hover{color:var(--ink);background:var(--hauch)}
.zl-schraeg[aria-pressed=true]{color:var(--ink)}
.zl-bild:not([hidden]){position:relative;margin-top:var(--s2);touch-action:pan-y;user-select:none}
.zl-bild svg:not(.kanalz){display:block;width:100%;height:auto;overflow:visible;fill:var(--ink2)}   /* Vorgabe der Zeichenfüllung (sonst Schwarz); Punkte, Namen, Achse setzen ihre eigene */
.zl-bahn-name{font-size:11px;fill:var(--muted)}
.zl-achse line{stroke:var(--linie)}
.zl-achse text{font-size:11px;fill:var(--muted)}
.zl-heute{stroke:var(--signal);stroke-width:1.5}
.zl-punkt{cursor:pointer}
.zl-punkt:focus{outline:none}
.zl-punkt:focus-visible .zl-marke{stroke:var(--fokus);stroke-width:3}
/* Geplant: blasser und gestrichelt umrandet, Randfarbe = Kanalfarbe (currentColor wäre hier die Textfarbe) */
.zl-geplant .zl-marke{fill-opacity:.55;stroke-width:1.6;stroke-dasharray:2 2}
.zl-geplant .zl-marke.k-praesenz{stroke:var(--k-praesenz)}.zl-geplant .zl-marke.k-video{stroke:var(--k-video)}.zl-geplant .zl-marke.k-telefon{stroke:var(--k-telefon)}.zl-geplant .zl-marke.k-rest{stroke:var(--k-rest)}
.zl-name{font-size:11.5px;fill:var(--ink2);paint-order:stroke;stroke:var(--flaeche);stroke-width:3px;stroke-linejoin:round}   /* Flächenrand: Namen bleiben über Punkten lesbar */
.zl-stiel{stroke:var(--linie2);stroke-width:1;fill:none}
.zl-zahl{font-size:10px;fill:var(--muted)}
.zeitleiste.zl-an .zl-leer{margin:var(--s2) 0 0;color:var(--muted);font-size:var(--t-meta)}
.zeitleiste.zu .zl-inhalt{display:none}
.zl-tip{position:absolute;z-index:5;max-width:min(360px,90cqw);max-height:260px;overflow:auto;padding:var(--s2) var(--s3);background:var(--flaeche);border:1px solid var(--linie2);border-radius:var(--r);box-shadow:0 6px 20px var(--schatten);font-size:var(--t-meta)}
.zl-tip li+li{margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--linie)}
/* Kanal-Zeichen in Listen und Knöpfen · Linien-Icon in currentColor, gedämpft wie die Metazeile · Klasse .kanalz (nicht die Kontaktzeilen-Klasse aus basis.css) */
.kanalz{width:1em;height:1em;flex:none;vertical-align:-.125em;color:var(--muted)}
/* Diagramm-Punkte der Zeitleiste behalten ihre Kanal-Farben (Klasse .zl-marke) */
.zl-marke.k-praesenz{fill:var(--k-praesenz)}.zl-marke.k-video{fill:var(--k-video)}.zl-marke.k-telefon{fill:var(--k-telefon)}
.zl-marke.k-mail{fill:none;stroke:var(--k-mail);stroke-width:1.6}
.zl-marke.k-rest{fill:var(--k-rest)}
.mk-begegnungen .geplant .z-titel{font-style:italic}
.pk-hinweis{margin:var(--s1) 0 0;font-size:var(--t-meta);color:var(--muted)}
.mk-begegnung-neu .mk-formular,.mk-begegnung-bearbeiten .mk-formular,.mk-notiz-neu .mk-formular,.mk-notiz-bearbeiten .mk-formular{display:grid;gap:var(--s2);max-width:30rem}
/* Freie Notizen (Plan 2026-11-07) · Text mit Zeilenumbrüchen, Formulare der Zeile im Fluss · „Neue Notiz“ und „Begegnung festhalten" stehen im Rahmen unter der Überschrift (Thomas 08.11.) */
/* Standard für alle Rahmen (Thomas 08.11.): rechts im Kopf ein kleines Zeichen · „+“ legt an (`.mk-plus` mit Formular, `.mk-aktion` als Link), Stift bearbeitet nur das Feld des Rahmens (`.mk-plus.mk-stift`), nie die ganze Maske */
.mk-block:has(>.mk-plus),.mk-block:has(>.mk-aktion){position:relative}
.mk-block>.mk-plus,.mk-block>.mk-aktion{position:absolute;top:9px;right:12px;margin:0}
.mk-frei>.mk-plus,.mk-frei>.mk-aktion{top:7px;right:0}
.mk-plus>summary,.mk-aktion{list-style:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;box-sizing:border-box;border:1px solid transparent;border-radius:var(--r,6px);background:none;color:var(--ink2);cursor:pointer;text-decoration:none}
.mk-plus>summary::-webkit-details-marker{display:none}
.mk-plus>summary:hover,.mk-plus>summary:focus-visible,.mk-plus[open]>summary,.mk-aktion:hover,.mk-aktion:focus-visible{color:var(--ink);border-color:var(--linie2);background:var(--flaeche)}
.mk-plus>summary .zeichen,.mk-aktion .zeichen{width:14px;height:14px}
.mk-plus>.ausklapp-form{left:auto;right:0}
/* Stift: das Feld geht im Rahmen auf (kein schwebendes Fenster), ersetzt den Text darunter und nimmt die ganze Breite des Rahmens */
.mk-block>.mk-plus.mk-stift{position:static;margin:0}
.mk-block>.mk-stift>summary{position:absolute;top:9px;right:12px}
.mk-frei>.mk-stift>summary{top:7px;right:0}
.mk-stift>.ausklapp-form{position:static;width:auto;padding:0;border:0;box-shadow:none;background:none;margin:var(--s2) 0 0}
.mk-stift .mk-formular{max-width:none}
.mk-stift textarea{width:100%;min-height:12rem}
.mk-stift[open]~*{display:none}
/* Organisation (Thomas 08.11.): Rahmen ohne Kasten, Zeichen sitzt rechts in der Kopfzeile des Abschnitts */
.mk-org{position:relative}
.mk-block.mk-org>.mk-plus:not(.mk-stift),.mk-block.mk-org>.mk-aktion{top:-4px;right:0}
.mk-block.mk-org>.mk-stift>summary{top:-4px;right:0}
.mk-notiz-text{flex:1 1 100%;white-space:pre-line;overflow-wrap:anywhere}
.mk-notizen .zeile-form{display:inline;margin:0}
/* Raum-Auslage (Task 5) · „Notiz“ über dem Block, Block ohne Kasten wie die anderen Abschnitte der Auslage, Kästchen links vom Namen */
.raum-notizen{display:grid;gap:var(--s3);min-width:0}
.raum-notizen>.mk-notiz-neu{justify-self:start}
.raum-notizen>.mk-kasten{background:none;border:0;border-radius:0;padding:0}
.mk-art{display:flex;flex-wrap:wrap;gap:var(--s3);border:0;padding:0;margin:0}
.mk-art label{flex-direction:row;align-items:center;gap:var(--s2);min-height:var(--tippflaeche);font-weight:400}   /* Radio links, Wort rechts (basis.css: .formular label stapelt) */
.mk-art input:is([type=radio],[type=checkbox]){width:auto;padding:0;margin:0;border:0;flex:none}   /* basis.css: .ausklapp-form input setzt width:100% und verschob die Wörter (Thomas 03.11.) */

/* Rechner · „⋯“ steht ganz rechts, sein Menü klappt darum rechtsbündig auf (wie .sk-aktionen, .listenkopf in basis.css) */
@media (min-width:860px){
  .maske .mehr-aktionen .ausklapp-form{left:auto;right:0}
}

/* Handy · Tippflächen --tippflaeche, Aktionen als feste Leiste unten (basis.css .ist-detail .aktionsleiste), Platz darunter */
@media (max-width:859px){
  .maskenkopf{gap:var(--s4);padding-top:var(--s5);padding-bottom:var(--s4)}
  .befehl:not([hidden]){height:var(--knopf-hoehe-handy);flex:1 1 100%;min-width:0}
  .befehl-feld{height:var(--tippflaeche);margin-block:calc((var(--knopf-hoehe-handy) - 2px - var(--tippflaeche)) / 2)}   /* sichtbar wie ein Knopf, Tippfläche unsichtbar größer */
  .reiter-knopf{height:var(--tippflaeche)}
  .reiterzeile{align-items:stretch}
  .ist-detail .maske .masken-aktionen{margin:0}
  .ist-detail .maske .masken-aktionen{flex-wrap:wrap}
  .ist-detail .maske .masken-aktionen>*{flex:1 1 auto}
  .ist-detail .maske .masken-aktionen .knopf{width:auto;min-width:var(--tippflaeche)}   /* basis.css: width:100% · sonst jeder Knopf eine eigene Zeile */
  .maske .masken-aktionen .knopf{min-height:var(--knopf-hoehe-handy)}   /* Tippfläche 44 px über .knopf::before (basis.css) */
  .ist-detail .maske:has(.befehl-zeile:not(.mit-befehl) .masken-aktionen){padding-bottom:5rem}   /* Platz für die feste Leiste (Rückfall ohne Skript) */
  html:has(body.ist-detail .befehl-zeile:not(.mit-befehl) .masken-aktionen){scroll-padding-bottom:9rem}
  /* Zeitleiste: Tippflächen */
  .zl-klappe,.zl-kanal,.zl-zeitraum,.zl-schraeg,.zl-zurueck{min-height:var(--tippflaeche)}
  .zl-zeitraum,.zl-schraeg{min-width:var(--tippflaeche)}
  .zl-schraeg{min-width:var(--tippflaeche)}
  .mk-art label{min-height:var(--tippflaeche);display:inline-flex;align-items:center}
  /* Ende Tippflächen */
  .mk-lage{flex-direction:column;align-items:flex-start}
  .mk-gespraech{position:relative;min-height:var(--tippflaeche)}
  .mk-g-text .z-titel::after{content:"";position:absolute;inset:0}   /* Trefferfläche ganze Zeile */
  .befehl-treffer a,.mehr-liste a,.mk-mehr a,.mk-naechstes a,.markenwahl a{display:flex;align-items:center;min-height:var(--tippflaeche)}
}

/* ---------- Aufgabe bearbeiten · Plan Aufgaben A (Spec §5.1, Vorschau a1/a5) ----------
   Titel als Feld im Kopf, Abschnitte Wann · Frist · Beschreibung, Schnellwahl, Meldung mit „rückgängig“, Fehler am Feld.
   Nur Tokens; Fehler und Hinweise in Tinte, kein Rot. Mit Skript (body[data-ab-bereit]) fallen die Speichern-Knöpfe weg. */
.detailkopf .ab-abschnitt[data-was="titel"]{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin:2px 0 var(--s1)}
.detailkopf .ab-abschnitt[data-was="titel"] .detailtitel{flex:1 1 12rem;min-width:0;max-width:none;margin:0}
.titel-feld{width:100%;min-width:0;font:inherit;letter-spacing:inherit;line-height:inherit;color:var(--ink);
  background:transparent;border:1px solid transparent;border-radius:var(--r);padding:2px 6px;margin-left:-7px;
  display:block;field-sizing:content;resize:none;overflow:hidden}
.titel-feld:hover{border-color:var(--linie)}
.titel-feld:focus{border-color:var(--linie2);background:var(--flaeche);outline:2px solid var(--fokus);outline-offset:1px}
body[data-ab-bereit] .ab-ohne-skript{display:none}
.ab-meldung{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);align-items:baseline;margin:var(--s2) 0 var(--s3);padding:var(--s2) var(--s3);
  border-radius:var(--r);background:var(--akzent-weich);font-size:.86rem}
.ab-meldung[hidden],.ab-rueck[hidden]{display:none}
.ab-meldung-text{flex:1 1 20rem}
.ab-rueck{display:inline;margin:0}
.ab-meldung .knopf-text{font:inherit;font-weight:650;color:var(--ink);background:none;border:0;padding:0;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer}
.au-abschnitt{margin:0 0 var(--s5)}
.ak-unter{font-weight:500;color:var(--muted);font-size:.8rem;margin-left:6px;text-transform:none;letter-spacing:0}
.au-abschnitt>.ab-abschnitt{display:flex;flex-direction:column;gap:6px}
.au-wann{display:grid;grid-template-columns:minmax(9rem,1.3fr) minmax(6rem,.9fr) minmax(6rem,.9fr);gap:var(--s2);align-items:start}
.ab-bezug .tf-suche input{flex:1;min-width:0;width:100%;font-size:.95rem;padding:0 9px;border:1px solid var(--linie2);border-radius:var(--r);background:var(--flaeche);color:var(--ink);height:var(--feld-hoehe)}
.ab-bezug-knopf{margin-top:var(--s2)}
@media (max-width:859px){.ab-bezug .tf-chip-x{width:var(--tippflaeche);height:var(--tippflaeche)}}
.au-wann label{display:flex;flex-direction:column;gap:4px;font-size:.8rem;font-weight:600;color:var(--ink2)}
.au-wann input,.au-wann select{font-size:.95rem;padding:0 9px;border:1px solid var(--linie2);border-radius:var(--r);background:var(--flaeche);
  color:var(--ink);width:100%;min-width:0;font-weight:400}
.au-wann>.knopf{justify-self:start;align-self:end}
.au-frist{grid-template-columns:minmax(9rem,1.3fr) minmax(9rem,1.3fr) minmax(0,1fr)}
.au-fristart{margin:0;font-size:.88rem;color:var(--ink2);align-self:end;padding-bottom:8px}
.au-schnell{display:flex;flex-wrap:wrap;gap:4px 14px;margin:2px 0 0}
.au-schnell .ab-abschnitt{display:inline;margin:0}
.au-text{width:100%;min-height:5.5rem;max-height:22rem;field-sizing:content;resize:vertical;font-family:var(--buch);font-size:1rem;line-height:1.5;
  padding:8px 10px;border:1px solid var(--linie);border-radius:var(--r);background:var(--flaeche);color:var(--ink)}
.au-text:hover{border-color:var(--linie2)}
.au-text::placeholder{color:var(--muted)}
.feld-fehler{margin:4px 0 0;padding:6px 10px;border-left:3px solid var(--ink);background:var(--flaeche2);font-size:.85rem;color:var(--ink)}
.au-wann .feld-fehler{grid-column:1 / -1}
.ab-hinweis{margin:0;font-size:.84rem;color:var(--ink2)}
.ab-hinweis[hidden]{display:none}
@media (max-width:859px){
  .au-wann{grid-template-columns:1fr 1fr}
  .au-wann label:first-child{grid-column:1 / -1}
  .au-frist{grid-template-columns:1fr}
  .au-schnell .textknopf{min-height:var(--tippflaeche)}
  .ab-meldung .knopf-text{position:relative}
  .ab-meldung .knopf-text::before{content:"";position:absolute;left:-8px;right:-8px;top:50%;height:var(--tippflaeche);transform:translateY(-50%)}
}

/* Termine bei … (Info-Termine) · volle Breite unter den anderen Blöcken, die Zeilen stehen sonst zu schmal */
.mk-info-termine{grid-column:1 / -1}
/* Zeilen mit Zeichen rechts (Thomas 08.11.): Stift öffnet nur diesen Eintrag, Papierkorb fragt nach · die Formulare gehen in der Zeile auf */
.b-zeile.mk-akt-zeile{position:relative;padding-right:60px;row-gap:0}
.b-zeile.mk-notiz-zeile{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:none;column-gap:var(--s3);align-items:start}
.mk-notiz-zeile .sp-was{grid-area:auto}.mk-notiz-zeile .sp-wann{grid-area:auto;text-align:right}
.mk-akt-zeile>.mk-zeile-akt{position:static;grid-column:1/-1;margin:0}
.mk-zeile-akt>summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;box-sizing:border-box;border:1px solid transparent;border-radius:var(--r,6px);color:var(--ink2);cursor:pointer;position:absolute;top:8px}
.mk-zeile-akt>summary::-webkit-details-marker{display:none}
.mk-zeile-akt>summary:hover,.mk-zeile-akt>summary:focus-visible,.mk-zeile-akt[open]>summary{color:var(--ink);border-color:var(--linie2);background:var(--flaeche)}
.mk-zeile-akt>summary .zeichen{width:14px;height:14px}
.mk-zeile-stift>summary{right:30px}
.mk-zeile-loeschen>summary{right:0}
.mk-zeile-akt>.ausklapp-form{position:static;width:auto;padding:0;border:0;box-shadow:none;background:none;margin:var(--s2) 0}
.mk-zeile-akt .mk-formular{max-width:none}
.mk-frage{margin:0;font-weight:600}
/* Kennzeichen „automatisch“ rechts im Kopf berechneter Rahmen (Thomas 08.11.) · kein „+“, kein Stift */
.mk-block>.abschnittkopf .mk-auto{margin-left:auto;font-size:.68rem;font-weight:500;letter-spacing:.03em;color:var(--muted);cursor:help}
/* Fragen-Liste (Thomas 08.11.): Auswahlfelder unter dem Suchfeld, jedes in voller Breite, Knöpfe in einer Zeile */
.bahn-liste>.fr-filter{display:grid;gap:var(--s2);padding:0 16px var(--s3)}
.fr-filter select{width:100%}                  /* Höhe, Rahmen und Schrift kommen zentral (einheitliche Feldhöhe 04.11.) */
.fr-filter .knopf{justify-self:start}