@import url("tokens-QLlQ_yp.css");

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 14px;
    color: var(--ink);
    background: var(--card);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--ink-2); }

input, select, textarea, button { font-family: var(--font); font-size: inherit; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }

/* ---------------------------------------------------------------- Seite */

.page { padding: var(--pad-top) var(--pad-x) 0; }
.page-title { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.page-sub { font-size: 13px; color: var(--ink-3); margin-top: 3px; }
/* Seiten mit der globalen Kopfzeile (AP4 Teil A, "Doppelter Seitenkopf")
   haben den oberen Abstand schon durch sie: .page braeuchte ihn hier
   kein zweites Mal. Seiten ohne Kopfzeile (Anmeldung, oeffentliche
   Freigabe) behalten .page unveraendert. */
.page--unter-kopf { padding-top: 0; }

/* Dokument-Detail (Entwurf "Detail 390" Zeile 300 ff.): der Titel
   faellt kleiner aus als die uebliche .page-title. Er ist ein Link auf
   die Bearbeiten-Seite (Punkt 2 im Bericht: "Bearbeiten" hat im
   Entwurf keinen eigenen Knopf mehr), display:block und die geerbte
   Linkfarbe/-unterstreichung (siehe Basisregel oben) lassen ihn
   trotzdem wie einen gewoehnlichen Titel aussehen. */
.page-title--dokument { font-size: var(--t-lg); font-weight: 600; line-height: 1.3; display: block; }
.datenraster {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 12px;
    align-items: center;
    margin-top: 14px;
}
.datenraster__label {
    font: 400 11px var(--mono);
    letter-spacing: 0.04em;
    color: var(--ink-3);
}
.datenraster__wert { font-size: 14px; color: var(--ink); }
.datenraster__ordner { color: var(--accent); }
.datenraster__herkunft {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: var(--r-sm);
    background: var(--well);
    color: var(--ink-2);
    font: 400 10px var(--mono);
}
/* Detail 390 Zeile 322 ff.: Tags im Datenraster als Pillen statt der
   sonst app-weiten Punkt+Text-Form (.abzeichen__tag, Entwurf Zeile 139
   an anderer Stelle, siehe tokens.css). Scoped auf .datenraster, damit
   die App-weite Form ueberall sonst unangetastet bleibt. */
.datenraster .abzeichen { gap: 6px; }
.datenraster .abzeichen__tag {
    border: 1px solid var(--bd-btn);
    border-radius: var(--r-pill);
    padding: 5px 12px;
    font-weight: 500;
}
/* Freigeben/Zu Vorgang elastisch, das Loeschen-Symbol behaelt seine
   feste Groesse (Entwurf Zeile 331 ff.). margin oben UND unten: die
   Zeile ist jetzt das letzte sichtbare Element der Karte, unten
   braucht sie denselben Atemraum wie oben (Entwurf "padding:18px 20px"). */
.knopfzeile { display: flex; gap: 10px; margin: 18px 0; }
.knopfzeile .btn { flex: 1; height: var(--h-ctl); }

.eyebrow {
    font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-3);
}
.section-label {
    font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--ink-3);
    margin: 20px 0 8px;
}

.detail-header {
    /* 14px wie .dokument-kopf aus dem Entwurf "Detail 390". */
    padding: var(--pad-top-detail) 14px 8px;
    display: flex; align-items: center; gap: 4px;
    border-bottom: 1px solid var(--line-soft);
}
/* Kein h1-Tag mehr (AP4 Teil A, Korrektur): die globale Kopfzeile
   traegt jetzt das einzige h1 der Seite, siehe partials/_kopf.html.twig. */
.detail-header__titel { font-size: 17px; font-weight: 600; margin: 0; }

/* -------------------------------------------------------------- Buttons */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    height: var(--h-primary); padding: 0 16px;
    border: none; border-radius: var(--r-md);
    background: var(--accent); color: var(--accent-fg);
    font-size: 15px; font-weight: 600; cursor: pointer;
}
.btn:hover { background: var(--accent-hover); color: var(--accent-fg); }
.btn:disabled { background: var(--accent-muted); cursor: default; }
.btn--block { width: 100%; }
.btn--ghost {
    background: var(--card); color: var(--ink);
    border: 1px solid var(--bd-btn);
}
.btn--ghost:hover { background: var(--paper); color: var(--ink); }
.btn--quiet {
    height: var(--h-ctl); background: none; color: var(--ink-3);
    font-size: 14px;
}
.btn--quiet:hover { background: none; color: var(--ink); }
.btn--danger {
    background: var(--card); color: var(--danger);
    border: 1px solid var(--danger-bd);
}
.btn--danger:hover { background: var(--danger-soft); color: var(--danger); }

.icon-btn {
    width: var(--h-ctl); height: var(--h-ctl); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--bd-input); border-radius: var(--r-md);
    background: var(--card); color: var(--ink); cursor: pointer;
}
.icon-btn:hover { background: var(--paper); }
.icon-btn--bare { border: none; background: none; }
.icon-btn--gefahr { color: var(--danger); border-color: var(--danger-bd); }
.icon-btn--gefahr:hover { background: var(--danger-soft); }

/* --------------------------------------------------------------- Felder */

.field { display: block; }
.input, .select, .textarea {
    width: 100%; height: var(--h-ctl);
    border: 1px solid var(--bd-input); border-radius: var(--r-md);
    padding: 0 12px; font-size: 14px;
    background: var(--card); color: var(--ink); outline: none;
}
.select { height: var(--h-ctl); border-color: var(--bd-btn); }
.textarea { height: auto; min-height: 120px; padding: 12px; line-height: 1.55; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--ink-3); }
.input[readonly] { background: var(--paper); }

.form-error { color: var(--danger); font-size: 13px; margin-top: 6px; }
.form-errors { list-style: none; padding: 0; margin: 6px 0 0; }

/* --------------------------------------------------------------- Badges */

.badge {
    display: inline-block;
    font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
    padding: 2px 8px; border-radius: var(--r-sm);
    color: var(--cat, var(--ink-2));
    background: color-mix(in srgb, var(--cat, var(--ink-3)) 10%, var(--card));
    border: 1px solid color-mix(in srgb, var(--cat, var(--ink-3)) 22%, var(--card));
}

/* ---------------------------------------------------------------- Listen */

.list { padding: 4px 0 24px; }
.row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px var(--pad-x); min-height: 64px;
    border-bottom: 1px solid var(--line-soft);
    cursor: pointer; color: var(--ink);
}
.row:hover { background: var(--paper); color: var(--ink); }
.row__main { flex: 1; min-width: 0; }
.row__title {
    display: block;
    font-size: 15px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* display:block, weil die Zeilen als <span> gerendert werden und sonst
   Titel und Meta nebeneinander statt untereinander stehen. */
.row__meta { display: block; font-size: 13px; color: var(--ink-3); margin-top: 1px; }
.row__aside { font-size: 13px; color: var(--ink-3); flex-shrink: 0; }

/* Der Farbpunkt vor jedem Tag in der Meta-Zeile (Timeline/Suche,
   Nachtrag zu AP4 Teil B, Entwurf "Timeline 390" Zeile 28): dieselben
   Masse wie .abzeichen__punkt, aber mit eigenem display, weil er hier
   in Fliesstext steht statt in einem Flex-Container, der einem Kind
   sein display schon aufzwingt. */
.row__meta-punkt {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 2px;
    border-radius: 50%;
    background: var(--cat, var(--ink-3));
    vertical-align: middle;
}

.avatar {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--well); color: var(--ink-2);
    font-size: 15px; font-weight: 600;
}
.avatar--lg { width: 56px; height: 56px; font-size: 18px; }

.data-row {
    display: flex; justify-content: space-between; gap: 16px;
    padding: 12px 0; border-bottom: 1px solid var(--line-soft);
}
.data-row__label { font-size: 13px; color: var(--ink-3); flex-shrink: 0; }
.data-row__value { font-size: 13px; font-weight: 500; text-align: right; }

.empty {
    padding: 48px var(--pad-x); text-align: center;
    font-size: 14px; color: var(--ink-3);
}

.card {
    border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 14px; margin-bottom: 12px;
}

/* --------------------------------------------------------------- Meldung */

.flash {
    margin: 12px var(--pad-x) 0; padding: 11px 12px;
    border-radius: var(--r-md); font-size: 13px; font-weight: 500;
}
.flash--success { background: color-mix(in srgb, var(--ok) 8%, var(--card)); color: var(--ok); }
.flash--error { background: var(--danger-soft); color: var(--danger); }

/* ------------------------------------------------------------ App-Rahmen */

body { background: var(--well); }

/*
 * Mobile-first. Auf dem Handy fuellt die App den Bildschirm, auf groesseren
 * Displays bleibt sie auf Handybreite stehen statt in die Breite zu laufen.
 */
.app {
    max-width: 430px;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
    background: var(--paper);
    position: relative;
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------------- Login */

.login {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 var(--pad-x) 15vh;
}
.login__head { margin-bottom: 28px; }
.login__form .section-label:first-of-type { margin-top: 0; }
.login__submit { margin-top: 28px; }

/* ------------------------------------------------------ Kopf und Formular */

.page-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
/* Der Text nimmt den Platz, die Knoepfe stehen als Gruppe rechts. Ohne
   das verteilte "space-between" zwei Knoepfe ueber die ganze Breite. */
.page-head > .page { flex: 1; min-width: 0; }
.detail-header__action {
    margin-left: auto; padding-right: 8px;
    font-size: 14px; font-weight: 600; color: var(--ink-3);
}
.detail-header__action:hover { color: var(--ink); }
/* Die erste Aktion (Zurueck, Abbrechen) gehoert nach links. Mit dem
   auto-Rand von oben teilten sich zwei Aktionen den freien Platz, und
   der Zurueck-Pfeil stand mitten in der Zeile (Browser-Befund
   /notes/1). */
.detail-header > .detail-header__action:first-child { margin-left: 0; }

.field-help { font-size: 12px; color: var(--ink-3); margin: 6px 0 0; }
.form-submit { margin-top: 28px; }
/* Zusatzpunkt 13 (Randpruefung des Koordinators, 10.09.2026): .form-submit
   dient an zwei Stellen - als umschliessendes <div> um den Absendeknopf
   (Wurzel des Randproblems: der Knopf lief dort von 0 bis 390px, auf
   /capture, /documents/new, /documents/{id}/edit, /notizen/neu,
   /notizen/{id}/bearbeiten, /vorgaenge/neu, /vorgaenge/{id}/bearbeiten,
   ueberall dort ohne umschliessenden .page-Rahmen), und als
   Zusatzklasse direkt am <button class="btn btn--block form-submit">
   in contact/_form.html.twig und tag/_form.html.twig - beide Seiten
   polstern dort schon von Hand (style="padding: 0 var(--pad-x) 28px").
   Ein Element-Selektor haelt beide Rollen auseinander: div.form-submit
   trifft nur die erste, der Knopf behaelt sein eigenes .btn-Polster
   (0 16px), statt es zu ueberschreiben. .beschriften-blatt .form-submit
   ist spezifischer und setzt sein eigenes Randmass weiter oben/unten. */
div.form-submit { padding: 0 var(--pad-x); }

.collection__item { display: flex; gap: 8px; margin-bottom: 8px; }
/* Bei nur einer Zeile gibt es nichts zu entfernen. */
.collection__item:only-child .icon-btn { display: none; }
.collection__item .input { flex: 1; }
.collection__add { height: var(--h-ctl); font-size: 14px; }

.row--static { cursor: default; }
.row--static:hover { background: none; }

/* Die Anhaenge stehen am Mail-Detail ausserhalb von .page. Ohne eigenes
   Polster klebte ihre Beschriftung am Handy am Fensterrand; die Zeilen
   darunter polstern mit demselben Wert. */
.mail-abschnitt { padding: 0 var(--pad-x); }

.contact-head { display: flex; align-items: center; gap: 14px; }
.contact-head__name { font-size: 17px; font-weight: 700; line-height: 1.3; }

.mail-row {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 0; border-bottom: 1px solid var(--line-soft);
    font-size: 13px; font-weight: 500;
}

.prose { font-size: 14px; line-height: 1.65; color: var(--ink-2); }

/* Der HTML-Rumpf einer Mail. Er kommt von fremden Mailprogrammen, wird
   gesaeubert ausgegeben (MailBody) und hier auf die Typografie der Akte
   gebracht: eigene Schriftgroessen und Farben sind entfernt, die
   Struktur bleibt. Breite Tabellen rollen in sich, damit die Seite
   nicht seitlich laeuft. */
.mailtext {
    font-size: 14px; line-height: 1.65; color: var(--ink-2);
    overflow-x: auto;
    overflow-wrap: break-word;
}
.mailtext p, .mailtext div, .mailtext li { margin: 0 0 10px; }
.mailtext p:last-child, .mailtext div:last-child { margin-bottom: 0; }
.mailtext h1, .mailtext h2, .mailtext h3, .mailtext h4 {
    margin: 18px 0 8px; font-size: 15px; font-weight: 600; color: var(--ink);
}
.mailtext a { color: var(--accent); overflow-wrap: anywhere; }
.mailtext table { border-collapse: collapse; max-width: 100%; }
.mailtext td, .mailtext th { padding: 4px 8px; text-align: left; vertical-align: top; }
/* Zitierte Vorgaenger, in HTML-Mails oft der halbe Verlauf. */
.mailtext blockquote {
    margin: 12px 0; padding-left: 12px;
    border-left: 2px solid var(--line-soft); color: var(--ink-2);
}
.mailtext hr { border: 0; border-top: 1px solid var(--line-soft); margin: 16px 0; }

/* Derselbe Rumpf im Zuordnen-Sheet. Dort ist er Beiwerk zur
   Entscheidung, nicht der Hauptinhalt: in der Hoehe begrenzt, damit die
   Felder darunter ohne langes Scrollen erreichbar bleiben. */
.mailauszug {
    max-height: 34vh;
    overflow-y: auto;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    overscroll-behavior: contain;
}

.delete-form { margin-top: 32px; }

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

/* Kopfzeile jeder Seite (AP2): Titel links, runder Suchknopf rechts.
   Das Suchfeld und das Datum daneben sind fuer den Desktop, siehe
   @media weiter unten. */
.kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--pad-top) var(--pad-x) var(--s-2);
}

.kopf__titel {
    /* Die Knoepfe stehen rechts beisammen (Entwurf: Lupe und Mond
       nebeneinander); space-between setzte die Lupe sonst in die Mitte. */
    margin-right: auto;
    font-size: var(--t-xl);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kopf__thema,
.kopf__suchknopf {
    border-radius: 50%;
}

/* Nacharbeit Timeline Handy Punkt 8a (Entwurf "Timeline dunkel 390"
   Zeile 11): bei aktivem Dunkel-Design zeigt der Mond-Knopf sich
   selbst als eingeschaltet, gefuellte Akzentflaeche statt des leeren
   Umrisses. thema_controller.js setzt aria-pressed schon beim Laden
   und beim Umschalten (aktualisieren()), hier steht nur das Aussehen
   dazu. */
.kopf__thema[aria-pressed='true'] {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.kopf__suchform,
.kopf__datum {
    display: none;
}

/* -------------------------------------------------------- Gruppen-Nav */

/* Die Bereiche der aktiven Gruppe als Chip-Zeile, nur auf dem Handy
   (siehe @media weiter unten). Eigener Klassenname statt der geteilten
   ".chips", damit E87 ("keine Ansicht traegt wortlos eine Chipreihe")
   an der richtigen Stelle greift. */
/* Der Abrufknopf auf /inbox (Punkt 2, Unsortiert-Handy-Auftrag) haengt
   sich rechts an, ohne mit den Chips selbst umzubrechen: die Chips
   fahren fuer sich horizontal, der Knopf bleibt als schmale, runde
   Flaeche stehen. */
.gruppennav {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: 0 var(--pad-x) var(--s-1);
}

.gruppennav__chips {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.gruppennav .icon-btn {
    flex-shrink: 0;
    border-radius: 50%;
}

.gruppennav__chip {
    flex-shrink: 0;
}

.gruppennav__zahl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: var(--r-pill);
    background: var(--danger);
    color: var(--accent-fg);
    font-size: 10px;
    font-weight: 700;
}

/* Im gefuellten aktiven Chip waere ein roter Punkt ein Bruch im Bild,
   der Entwurf zeigt dort eine helle Pille in der Akzentfarbe. */
.gruppennav__chip.is-active .gruppennav__zahl {
    background: var(--accent-fg);
    color: var(--accent);
}

/* ------------------------------------------------------------- Tab-Bar */

/* Nacharbeit `/dateien` Handy Punkt 9: display:flex/flex-direction:column
   hier statt einer Prozentketten-Hoehe an .bereich--dateien (die griff
   nicht, weil .app__spalte auf dem Handy display:contents ist - ein
   display:contents-Kasten erzeugt keine eigene Box, an der Prozente
   verankern koennten, seine Kinder werden aber zu echten Flex-Kindern
   dieses Kastens hier, genau wie bei einem "normalen" Kind). .bereich--
   dateien bekommt dafuer weiter unten flex:1 statt min-height:100%.
   Ab 1024px wird .app__main wieder display:block (siehe @media-Block
   unten): dort ist .app__spalte keine display:contents-Huelle mehr,
   die alte Prozentkette reicht dort aus. */
.app__main {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Die Leiste bleibt im Fluss und klebt zusaetzlich unten am Rand. So
   verdeckt sie nie Inhalt, ist aber beim Scrollen immer erreichbar. */
.tabbar-rahmen {
    position: sticky;
    bottom: 0;
    z-index: 5;
}

.tabbar {
    display: flex;
    align-items: flex-end;
    padding: 8px 6px calc(24px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--card);
}

.tabbar__tab,
.tabbar__shutter {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    min-height: 48px;
    padding: 4px 0;
    color: var(--ink-3);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

/* Der Mehr-Knopf ist ein Knopf, kein Link: er oeffnet ein Sheet. Ohne
   diese Zeilen brachte er den Rahmen und den Grund des Browsers mit. */
button.tabbar__tab {
    border: 0;
    background: none;
    cursor: pointer;
}

/* Der lange Druck auf den Ausloeser darf weder Text markieren noch die
   Linkvorschau von iOS aufziehen. */
.tabbar__shutter {
    -webkit-touch-callout: none;
    user-select: none;
    touch-action: manipulation;
}

.tabbar__tab.is-active {
    color: var(--accent);
}

.tabbar__symbol {
    position: relative;
    display: flex;
}

.tabbar__label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.tabbar__badge {
    position: absolute;
    top: -5px;
    right: -8px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--danger);
    color: var(--accent-fg);
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

/* Ragt ueber die Leiste hinaus, der weisse Rand schneidet sie frei. */
.tabbar__shutter {
    margin-top: -24px;
    justify-content: flex-start;
}

.tabbar__shutter-kreis {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    box-sizing: content-box;
    border: 4px solid var(--card);
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-fg);
}

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

/* ------------------------------------------------- Icon-Kachel, Option */

.icon-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--well);
    color: var(--ink-3);
}

.optionen {
    padding: 0 var(--pad-x) 24px;
}

.option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
}

.option:hover {
    background: var(--paper);
}

.option__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.option__titel {
    font-size: 15px;
    font-weight: 600;
}

.option__meta {
    font-size: 12px;
    color: var(--ink-3);
}

/* -------------------------------------------------------------- Sheet */

/* Nativer Dialog: Backdrop, Escape und Fokusfalle bringt der Browser
   mit, der Controller muss nur oeffnen und schliessen. */
.sheet {
    width: 100%;
    max-width: 430px;
    max-height: 78dvh;
    margin: auto auto 0;
    padding: 0;
    border: none;
    border-radius: 16px 16px 0 0;
    background: var(--card);
    color: var(--ink);
    overflow: hidden;
}

.sheet::backdrop {
    background: rgba(20, 20, 24, 0.4);
}

.sheet__flaeche {
    display: flex;
    flex-direction: column;
    max-height: 78dvh;
}

.sheet__griff {
    width: 36px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: var(--r-pill);
    background: var(--line);
}

.sheet__kopf {
    flex: none;
    padding: 14px var(--pad-x) 12px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 16px;
    font-weight: 700;
}

/* In den meisten Sheets liegt ein Formular zwischen Flaeche und Inhalt.
   Ohne eigene Spalte waere der scrollende Bereich kein Flex-Element und
   gaebe gar nicht nach: er blieb auf voller Hoehe stehen und schob die
   Fussleiste mit den Knoepfen aus dem Sheet heraus. */
.sheet__flaeche > form {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
}

/* Nur der mittlere Bereich gibt nach: flex plus min-height, sonst
   schrumpft ein scrollender Bereich in einer Flex-Spalte gar nicht.
   Kopf und Fussleiste bleiben fest, sonst verteilt der Browser das
   Schrumpfen auf alle drei und staucht die Knoepfe unten weg. */
.sheet__inhalt {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 10px 6px;
}

.sheet__fuss {
    flex: none;
    padding: 8px var(--pad-x) calc(24px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line-soft);
}

/* --------------------------------------------------------------- Chip */

.chip {
    display: inline-flex;
    align-items: center;
    height: var(--h-chip);
    padding: 0 15px;
    border: 1px solid var(--bd-btn);
    border-radius: var(--r-pill);
    background: var(--card);
    color: var(--ink-2);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

/* is-active fuer Links (Filter), :has fuer Haken und Radios: ein
   angeklicktes Feld rendert die Seite nicht neu, die Markierung muss
   deshalb aus dem CSS kommen und nicht aus Twig. */
.chip.is-active,
.chip:has(.chip__wahl:checked) {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-fg);
}

/* Tag-Chip (AP.. Punkt B, Entwurf unsortiert-390.html Zeile 31-34,
   ebenso beschriften-390.html): deutlich groesser als die uebrigen Chips
   und mit einem Farbpunkt statt eines eingefaerbten Grunds. Zwei
   unabhaengige Bildschirme des Entwurfs zeigen diese Masse gleich, sie
   gelten deshalb fuer alle sechs Verwender der Pillenreihe (Dokument,
   Fotostapel, Notiz, Mail, Vorgang), nicht nur fuer Unsortiert, siehe
   Bericht. */
/* .chip--kontakt teilt sich diese Masse (Bericht Fundstelle 1): die
   Kontakt-Pillenreihe auf der Unsortiert-Karte soll im selben Stil wie
   die Tag-Pillen stehen, bekommt aber eine eigene Klasse, damit sie bei
   den .chip--cat-Zaehlungen (Tag-Pillen) nicht mitzaehlt. */
.chip--cat,
.chip--kontakt {
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
}

/* Ausgewaehlt: einheitliches --accent statt einer je Tag eingefaerbten
   Flaeche (color-mix). Der Grund steht schon in tokens.css: beliebige
   Kategoriefarben als Flaeche unterlaufen den Kontrasttest, deshalb
   traegt nur noch der Punkt die eigene Farbe, die Flaeche faellt auf
   die generische .chip.is-active-Regel zurueck. */
.chip--cat.is-active .chip__farbpunkt,
.chip--cat:has(.chip__wahl:checked) .chip__farbpunkt {
    background: var(--accent-fg);
}

/* Der Farbpunkt vor dem Namen (Entwurf Zeile 39-42): dieselben Masse wie
   .abzeichen__punkt, aber ohne dessen margin-right, der Abstand kommt
   hier vom "gap" auf .chip--cat. Eigene Klasse statt .abzeichen__punkt
   zu teilen: der sitzt in einer anderen Ansicht (gelesene Tags, nicht
   die Auswahl) und braucht diesen Abstand nicht. */
.chip__farbpunkt {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cat, var(--ink-3));
    flex-shrink: 0;
}

/* "Alle Tags" am Ende der Reihe (Entwurf Zeile 42): rein optisch, siehe
   _tag_chips.html.twig. Gestrichelt statt der durchgezogenen
   Chip-Umrandung, ohne Punkt. */
.chip--alle {
    border-style: dashed;
    border-color: var(--bd-dashed);
    color: var(--ink-2);
    cursor: default;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Die Tags eines Eintrags. Sie umbrechen, statt die Zeile zu dehnen. */
.abzeichen {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Ein Tag als Punkt plus Name in --ink statt eines gefuellten
   Abzeichens (Entwurf Zeile 139): beliebige Farben aus Tag.color
   funktionieren so, ohne den Kontrasttest zu beruehren, siehe die
   Begruendung am Anfang von tokens.css. */
.abzeichen__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ink);
}
.abzeichen__punkt {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cat, var(--ink-3));
    flex-shrink: 0;
}

/* ----------------------------------------------------- Aufnehmen */

.ausloeser {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 8px var(--pad-x) 4px;
    padding: 28px 20px;
    border: 1px dashed var(--bd-dashed);
    border-radius: 14px;
    cursor: pointer;
}

.ausloeser:hover {
    background: var(--paper);
}

/* Das Dateifeld liegt weggeblendet im Label, den Fokus zeigt deshalb
   das Label. Ohne diese Regel waere die Tastaturbedienung zwar da, aber
   unsichtbar, und das ist so gut wie keine. */
.ausloeser:has(input:focus-visible),
.btn:has(input:focus-visible) {
    outline: 2px solid var(--ink-3);
    outline-offset: 2px;
}

.ausloeser__kreis {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-fg);
}

.ausloeser__text {
    font-size: 15px;
    font-weight: 600;
}

.sammlung {
    padding: 16px var(--pad-x) 4px;
}

.sammlung__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.sammlung__kopf .section-label {
    padding: 0;
}

/* Serienstapel statt der Zaehlerzeile (AP4 Teil C Punkt 2, Entwurf
   "Aufnehmen Kamera 390" Zeile 18 ff.): drei versetzte Ebenen, die
   dunkle Kamera des Entwurfs auf die helle Seite hier uebertragen
   (--bg-photo/--well/--line statt der drei dunklen Grautoene). */
.serienstapel-zeile { display: flex; align-items: center; gap: 10px; }
/* Nacharbeit Aufnehmen/Beschriften Punkt 2: ohne diese Zeile gewinnt die
   Klassenregel oben gegen die UA-Vorgabe fuer [hidden] (Autor schlaegt
   User-Agent, unabhaengig von der Spezifitaet), die Zeile stand deshalb
   auch bei null Fotos da, obwohl capture_controller.js#zeichneSerienstapel
   das hidden-Attribut korrekt setzt. */
.serienstapel-zeile[hidden] { display: none; }
.serienstapel { position: relative; width: 52px; height: 52px; flex-shrink: 0; }
.serienstapel__ebene {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-photo);
    overflow: hidden;
}
.serienstapel__ebene--unten { background: var(--line); transform: rotate(-6deg); }
.serienstapel__ebene--mitte { background: var(--well); transform: rotate(4deg); }
.serienstapel__ebene--oben { background: var(--bg-photo); }
.serienstapel__ebene--oben img { width: 100%; height: 100%; object-fit: cover; display: block; }
.serienstapel__zahl {
    position: absolute;
    top: -8px;
    right: -8px;
    padding: 2px 7px;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: var(--accent-fg);
    font: 600 11px var(--mono);
}
.serienstapel__zeit { font: 400 11px var(--mono); color: var(--ink-3); }

/* Der Streifen scrollt fuer sich, die Seite bleibt ruhig. */
.streifen {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.streifen__kachel {
    position: relative;
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-photo);
    display: flex;
    align-items: center;
    justify-content: center;
}

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

/* Ohne Vorschaubild (Entwurf "Beschriften 390" Zeile 12 ff.): dieselbe
   Kamerasymbol-Farbe wie an anderen Foto-Platzhaltern. */
.streifen__kachel-icon { color: var(--icon-photo); }

.streifen__weg {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(20, 20, 24, 0.65);
    color: #fff;
    font-size: 15px;
    line-height: 22px;
    cursor: pointer;
}

/* Beim Beschriften (AP4 Teil A Punkt 8, Entwurf Zeile 435 ff.) faellt
   die Reihe groesser aus als beim Aufnehmen selbst, die Serie ist zu
   diesem Zeitpunkt schon vollstaendig und braucht keinen Rand fuer
   den Ausloeser mehr. */
.streifen--stapel { gap: 10px; padding: 12px var(--pad-x); }
.streifen--stapel .streifen__kachel { width: 104px; height: 104px; border-radius: 12px; }

/* Nacharbeit Aufnehmen/Beschriften Punkt 1 (und Zusatzpunkt 13, Rand-
   pruefung des Koordinators, 10.09.2026: dieselbe Randlosigkeit auch auf
   /documents/new, /documents/{id}/edit und weiteren Formularseiten,
   siehe die Wurzelregel div.form-submit unten): der fruehere .page-
   Rahmen um Titel und Inhalt ist auf dieser Seite entfallen (AP4 Teil C
   Punkt 1), "Andere Wege" stiess dadurch randlos an. .section-label
   traegt sonst keinen eigenen Seitenrand (sie steht meist in einem
   schon gepolsterten Rahmen wie .sammlung oder .page). */
.andere-wege .section-label { padding: 0 var(--pad-x); }

/* ------------------------------------------------------- Beschriften */

/* Vollbild-Blatt am Handy (AP4 Teil A Punkt 1, Entwurf "Beschriften
   390"): body.vollbild-beschriften kommt aus capture/details.html.twig
   (block bodyklasse). Ab 1024px haengt dieselbe Seite im Turbo-Frame
   der Timeline (Punkt 9), dort bleiben Kopf und Seitenleiste stehen,
   siehe die Wiederherstellung im @media-Block unten. */
body.vollbild-beschriften .kopf,
body.vollbild-beschriften .tabbar-rahmen {
    display: none;
}

/* ------------------------------------------------------------- Suche */

/* Vollbild-Suche am Handy (Nacharbeit Suche Handy Punkt 1, Entwurf
   "Suche 390"): body.vollbild-suche kommt aus suche/index.html.twig,
   derselbe Mechanismus wie oben bei vollbild-beschriften. Ab 1024px
   bleiben Kopf und Tab-Bar stehen, siehe die Wiederherstellung im
   @media-Block unten. */
body.vollbild-suche .kopf,
body.vollbild-suche .tabbar-rahmen {
    display: none;
}

/* --------------------------------------------------------- Dokument */

/* Vollbild-Detail am Handy (Entwurf "Detail 390" Punkt 1):
   body.vollbild-dokument kommt aus document/show.html.twig, derselbe
   Mechanismus wie oben bei vollbild-beschriften. Ab 1024px bleiben
   Kopf und Tab-Bar stehen, siehe die Wiederherstellung im
   @media-Block unten. */
body.vollbild-dokument .kopf,
body.vollbild-dokument .tabbar-rahmen {
    display: none;
}

/* Kopfzeile: Zurueck links, Titel mittig, Teilen rechts, je 44px ohne
   Rahmen (Entwurf "Detail 390" Punkt 1). --pad-top-detail traegt den
   Abstand zur Statusleiste, denselben Token wie schon .detail-header
   an anderer Stelle nutzt, und wird am Desktop 0 (siehe app.css weiter
   unten), dort sitzt die Seite im Turbo-Frame der Timeline. */
.dokument-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--pad-top-detail) 14px 8px;
}
.dokument-kopf__titel { font-size: 15px; font-weight: 600; }
/* Entwurf: Zurueck 22px, Teilen 20px, groesser als die App-weiten Makros. */
.dokument-kopf > a.icon-btn svg { width: 22px; height: 22px; }
.dokument-kopf button.icon-btn svg { width: 20px; height: 20px; }

/* Die weisse Karte, die Vorschau, Titel, Datenraster, Volltext und
   Knopfzeile traegt (Entwurf Punkt 3: "Inhalt auf weißer Fläche,
   radius 20px 20px 0 0"). Bewusst ohne feste Hoehe/overflow:hidden
   wie im (statischen) Entwurf: der Inhalt ist hier unterschiedlich
   lang (Titel, Tag-Zahl, Volltext-Ausschnitt), die Karte waechst
   normal mit, die Seite scrollt als Ganzes. */
.dokument-flaeche {
    background: var(--card);
    border-radius: 20px 20px 0 0;
    /* Eigener Formatierungskontext: sonst faellt der 20px-Aussenabstand
       der Vorschau durch die Karte hindurch, die Karte rutscht um 20px
       nach unten und die Vorschau klebt an ihrer Oberkante. */
    display: flow-root;
}
/* Nur am Handy: keine Bereichs-Chips ueber dem Vollbild, und die weisse
   Karte reicht wie im Entwurf bis unten (.app__main ist dort eine
   Flex-Spalte, turbo-frame#detail ihr Kind, .app__spalte ist contents). */
@media (max-width: 1023.98px) {
    body.vollbild-dokument .gruppennav { display: none; }
    body.vollbild-dokument turbo-frame#detail { flex: 1; display: flex; flex-direction: column; }
    body.vollbild-dokument .dokument-flaeche { flex: 1; }
}
/* Entwurf "Timeline Desktop" Zeile 76 ff.: die Karte legt sich als
   Raster an, Vorschau links, Titel/Aktionen und Datenraster rechts
   daneben, Volltext und die Vorgangszeile darunter ueber die volle
   Kartenbreite. Ersetzt die fruehere --pad-x-Regel (20px, angelehnt an
   den Aussenabstand der Vorschau): die Karte traegt ihren Innenabstand
   jetzt selbst (24px wie im Entwurf), .page--unter-kopf braucht keinen
   eigenen mehr und wird deshalb unten auf display:contents gesetzt.
   Der eigene Kopf (Zurueck/Teilen) entfaellt in der Detailspalte: die
   Suchfeld-Kopfzeile und die Knopfzeile in der Karte (Freigeben)
   decken beides schon ab, siehe Bericht. */
@media (min-width: 1024px) {
    /* Nur in der Spalte: allein geoeffnet (etwa aus /bilder) ist der
       Kopf der einzige Weg zurueck (Nutzerbefund 26.10.2026). */
    .timeline-detail .dokument-kopf { display: none; }

    /* Aktionen unter dem Titel: der Entwurf setzt beide in eine Zeile
       mit flex-wrap, und bei jeder realistischen Spaltenbreite brechen
       die Knoepfe dort unter den Titel (so auch im Artboard). Als
       eigene Spalte daneben quetschten sie den Titel auf zwei Zeilen
       (Browser-Befund /documents/32). */
    .dokument-flaeche {
        display: grid;
        grid-template-columns: 180px minmax(0, 1fr);
        grid-template-areas:
            "vorschau titel"
            "vorschau aktionen"
            "vorschau raster"
            "hinweis  hinweis"
            "volltext volltext"
            "vorgang  vorgang";
        grid-template-rows: auto auto 1fr;
        column-gap: 20px;
        padding: 24px;
    }
    /* .page--unter-kopf ist damit keine eigene Box mehr: ihre Kinder
       (Titel, Datenraster, Dubletten-Hinweis, Volltext, Knopfzeile,
       das leere Loeschen-Formular) werden direkte Rasterfelder dieser
       Karte, ohne dass das Markup sich aendert oder verdoppelt. Ohne
       das bliebe Volltext auf die rechte Spalte begrenzt statt ueber
       die ganze Karte zu reichen (Entwurf: "ueber die volle
       Kartenbreite"). Alle Regeln dieses Blocks stehen mit
       .dokument-flaeche davor: ohne das nahm display:contents jeder
       .page--unter-kopf am Desktop den Innenabstand (Browser-Befund
       /dateien, Brotkrume am Kartenrand). */
    .dokument-flaeche .page--unter-kopf { display: contents; }

    /* Mit .dokument-flaeche davor: die Grundregel .vorschau (Rand 20px,
       Hoehe 180px) steht weiter unten in der Datei und gewann bei
       gleicher Spezifitaet, die Vorschau rutschte 20px nach rechts und
       stiess an den Titel (Browser-Befund /documents/32). */
    .dokument-flaeche .vorschau { grid-area: vorschau; width: 180px; height: 230px; margin: 0; }

    /* .page-title traegt am Desktop app-weit 26px (siehe "Bausteine"
       weiter unten in dieser Datei): gleiche Spezifitaet wie
       .page-title--dokument (je eine Klasse), .dokument-flaeche als
       Vorspann gewinnt deshalb unabhaengig von der Reihenfolge im
       Stylesheet. */
    .dokument-flaeche .page-title--dokument {
        grid-area: titel;
        align-self: start;
        font-size: var(--t-lg);
    }

    /* align-self: start, sonst streckt sich das Raster ueber die Resthoehe
       der 230px-Vorschau und zieht DATUM, VON, ORDNER weit auseinander
       (Browser-Befund /documents/24 in der Detailspalte). */
    .dokument-flaeche .datenraster { grid-area: raster; margin-top: 16px; align-self: start; }
    .dokument-flaeche .dublette-hinweis { grid-area: hinweis; }
    .dokument-flaeche .volltext { grid-area: volltext; margin-top: 20px; border-radius: var(--r-md); }
    .dokument-flaeche .dokument-vorgang { grid-area: vorgang; }

    /* 12px unter dem Titel, die Luecke des umbrechenden Flex im Entwurf. */
    .dokument-flaeche .knopfzeile { grid-area: aktionen; align-self: start; margin: 12px 0 0; gap: 8px; }
    /* Das leere Loeschen-Formular (haelt nur den CSRF-Token) braucht kein
       eigenes Rasterfeld: teilte es sich "aktionen" mit der Knopfzeile,
       laege seine (unsichtbare, aber trotzdem klickbare) Box ueber deren
       Knoepfen, spaeter im Quelltext also oben im Stapel. display:contents
       nimmt es ganz aus dem Raster, sein einziger Inhalt ist ohnehin ein
       verstecktes Eingabefeld ohne eigene Box. */
    .dokument-flaeche .delete-form { display: contents; }
}
/* Seitenkopf der Listenseiten in der Karte: 16px Luft zur Liste (Befund
   /freigaben), und der Knopf rechts steht in einer Senkrechten mit dem
   Zeileninhalt darunter (Befund /notes). Die Zeilen padden je Seite
   verschieden: .row 0 (Kontakte, Tags, die umrandeten Freigaben-Kaesten),
   .row--teilbar 16px rechts und 4px links (Notizen), .row--eintrag 8px
   (Vorgaenge). Der Kopf uebernimmt deshalb das Mass seiner Liste. */
@media (min-width: 1024px) {
    .app__spalte:not(.app__spalte--voll, .app__spalte--schmal, .app__spalte--extern, .app__spalte--frei) .page-head.page {
        padding: 0;
        margin-bottom: 16px;
    }
    /* Das :not(...) auch hier, sonst traf die Vorgaenge-Regel /dateien
       (dessen Liste fuehrt ebenfalls .row--eintrag). */
    .app__spalte:not(.app__spalte--voll, .app__spalte--schmal, .app__spalte--extern, .app__spalte--frei):has(.list .row--teilbar) .page-head.page { padding: 0 16px 0 4px; }
    .app__spalte:not(.app__spalte--voll, .app__spalte--schmal, .app__spalte--extern, .app__spalte--frei):has(.list .row--eintrag) .page-head.page { padding: 0 8px; }
    /* Der Titel ist ein p (das h1 steht im Kopf), ohne das bekaeme er
       dessen Standardrand von 1em und saesse 20px unter dem Plus. */
    .page-head .page-title { margin: 0; }
    .page-head > .page-title { align-self: center; }

    /* Plus neben "Ordner" in der Baumspalte (Nutzerbefund 10.09.2026). */
    .dateien-baum__kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .dateien-baum__kopf .icon-btn { width: 28px; height: 28px; flex-shrink: 0; }

    /* In der Detailspalte der Timeline steht die Liste daneben, ein
       Zurueck fuehrte nur aus der Timeline heraus (bei Mails nach
       /inbox). Wie .dokument-kopf dort ausgeblendet. */
    .timeline-detail .detail-header > .detail-header__action[aria-label="Zurück"] { display: none; }
}
/* Loeschknopf in der Knopfzeile (Entwurf): 44px, neutraler Rand, Radius 10. */
.knopfzeile .icon-btn--gefahr {
    width: 44px; height: 44px; flex-shrink: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--danger);
    background: var(--card);
}
.knopfzeile .icon-btn--gefahr svg { width: 18px; height: 18px; }

/* Am Desktop sind die Aktionen keine 44px-Touch-Ziele mehr, sondern nur
   so gross wie ihr Inhalt (Entwurf Zeile 87 ff.): 36px hoch statt 44,
   Radius 8 (--r-tile) statt 10, Knoepfe nicht mehr flex:1 gestreckt.
   Eigener, spaeterer Block statt in der grossen Raster-Regel weiter
   oben: dieselbe Selektor-Spezifitaet wie die beiden Handy-Regeln
   direkt darueber, hier gewinnt die Reihenfolge im Stylesheet. */
@media (min-width: 1024px) {
    .knopfzeile .btn {
        flex: none;
        height: 36px;
        padding: 0 14px;
        border-radius: var(--r-tile);
        font-size: 13px;
        font-weight: 500;
    }
    .knopfzeile .icon-btn--gefahr {
        width: 36px;
        height: 36px;
        border-radius: var(--r-tile);
    }
    .knopfzeile .icon-btn--gefahr svg { width: 15px; height: 15px; }
}

/* Volltext-Kasten (Entwurf Punkt 7, aendert Architektur-Entscheidung
   16 im CLAUDE.md): eigene Flaeche in --paper statt einer .list-Zeile.
   Horizontal kein eigener Rand, der kommt von .page (--pad-x), in dem
   der Kasten steht. */
.volltext {
    margin: 18px 0 0;
    background: var(--paper);
    border-radius: 12px;
    padding: 14px 16px;
}
.volltext__kopf {
    font: 400 11px var(--mono);
    color: var(--ink-3);
    margin-bottom: 6px;
}
.volltext__text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-2);
}

/* "Teil von Vorgang" am Fuss der Karte (Entwurf "Timeline Desktop"
   Zeile 108 ff.): mehrere Straenge stapeln sich mit demselben
   Zeilenabstand wie die Vorgangsliste selbst, statt zusammenzulaufen. */
.dokument-vorgang {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dokument-vorgang__zeile {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font: 400 12px var(--mono);
    color: var(--ink-3);
}
.dokument-vorgang__zeile a {
    color: var(--accent);
    font-weight: 500;
}

/* Oben Abstand zur Statusleiste wie .dokument-kopf und .beschriften-kopf. */
.suche-kopf-mobil { padding: max(8px, var(--pad-top-detail)) 20px 4px; }
.suche-kopf-mobil__zeile { display: flex; align-items: center; gap: 10px; }
.suche-feld-mobil {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 14px;
    background: var(--card);
    border: 2px solid var(--accent);
    border-radius: 12px;
    color: var(--accent);
}
.suche-feld-mobil__eingabe {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
}
.suche-abbruch {
    flex-shrink: 0;
    font-size: var(--t-base);
    font-weight: 500;
    color: var(--accent);
}
.suche-kopf-mobil__meta {
    padding: 4px 20px 10px;
    font-family: var(--mono);
    font-size: var(--t-xs);
    color: var(--ink-3);
}

/* Die weisse Flaeche unter dem Suchfeld (Suche Handy Punkt 2), dasselbe
   Muster wie .papierblatt auf der Timeline. Ohne eigenen Innenabstand
   (die Zeilen und Abschnittskoepfe tragen ihren eigenen, siehe unten),
   .page traegt sonst --pad-top/--pad-x fuer die Kopfzeile, die hier
   nicht steht. */
.page.suche { padding: 0; background: var(--card); border-radius: 20px 20px 0 0; }

.beschriften-blatt {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}
/* Nacharbeit Aufnehmen/Beschriften Punkt 3: margin-top:auto wirkt nur an
   einem Flex-Kind, .form-submit haengt aber im <form> (form_start()),
   nicht direkt in .beschriften-blatt. Ohne diese Regel blieb "auto"
   wirkungslos (normaler Block-Fluss kennt keinen Auto-Rand), der Knopf
   stand deshalb mitten auf der Seite statt unten angedockt. Am Desktop
   ohne Wirkung: .form-submit bekommt dort weiter unten ein festes
   margin-top zurueck, .beschriften-blatt selbst wird wieder display:block. */
.beschriften-blatt form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
/* Der Ablegen-Knopf haengt unten an (Punkt 6: "margin-top auto"), der
   Rest der Seite bleibt normaler Fluss darueber. Rand wie im Entwurf
   (Zeile 34, "padding:0 20px 8px"): der Abstand nach oben kommt vom
   Auto-Rand selbst. */
.beschriften-blatt .form-submit { margin-top: auto; padding: 0 var(--pad-x) 8px; }
/* Entwurf "Beschriften": Pillen 15px statt der 14px aus Unsortiert, der
   Ablegen-Knopf 52px hoch mit Radius 12. Nur auf diesem Blatt, --r-md
   und .chip--cat bleiben fuer alle anderen Seiten unveraendert. */
.beschriften-blatt .chip--cat,
.beschriften-blatt .chip--kontakt { font-size: 15px; }
.beschriften-blatt .form-submit .btn { height: 52px; border-radius: 12px; font-size: 16px; font-weight: 600; }

.beschriften-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* Am Handy Abstand zur Statusleiste wie .dokument-kopf (Entwurf: der
       Titel steht unter der Statusleiste), am Desktop ist der Token 0. */
    padding: max(8px, var(--pad-top-detail)) 20px 4px;
}
.beschriften-kopf__titel { font-size: 22px; font-weight: 700; }
.beschriften-kopf__aktionen { display: flex; gap: 8px; flex-shrink: 0; }
.icon-btn--rund { border-radius: 50%; }

.beschriften-feld { padding: 16px var(--pad-x) 0; }
.beschriften-feld:first-of-type { padding-top: 8px; }
.beschriften-feldlabel {
    display: block;
    font: 400 11px var(--mono);
    color: var(--ink-3);
    margin-bottom: 6px;
}
.beschriften-titel {
    height: 48px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
}
.beschriften-titel:focus { border-width: 2px; border-color: var(--accent); }

/* "Alle Tags" wird zur echten Aufklappflaeche (_tag_chips.html.twig):
   der native Pfeil vor <summary> entfaellt, die Pille traegt die
   Bedienung schon selbst. */
.chip-aufklappen summary { list-style: none; cursor: pointer; }
.chip-aufklappen summary::-webkit-details-marker { display: none; }
.chip-aufklappen__inhalt { flex-basis: 100%; margin-top: 10px; }
.chip-aufklappen__inhalt .chips { margin-bottom: 10px; }

/* Datum und Kontakt (Punkt 5 und 7): eine tippbare Zeile im selben
   Mono-Stil wie .beschriften-feldlabel, aufklappbar statt einem
   dauerhaft sichtbaren Feld. */
.beschriften-aufklappen summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px var(--pad-x) 0;
}
.beschriften-aufklappen summary::-webkit-details-marker { display: none; }
.beschriften-aufklappen + .beschriften-aufklappen summary { padding-top: 10px; }
.beschriften-zeile__text { font: 400 12px var(--mono); color: var(--ink-3); }
.beschriften-aufklappen__inhalt { padding: 10px var(--pad-x) 0; }

.beschriften-hinweis {
    text-align: center;
    font: 400 11px var(--mono);
    color: var(--ink-3);
    margin: 8px 0 0;
}

/* Nacharbeit Entwurfsabgleich Punkt 2: "Serie teilen" tritt hinter die
   Hinweiszeile zurueck statt im Kopf zu stehen, gleicher Ton wie
   .beschriften-hinweis darueber (Mono 11px, --ink-3). Eigene Regel statt
   derselben Klasse: die Hinweiszeile ist ein <p>, dieser Knopf braucht
   zusaetzlich einen Button-Reset und eine Tippflaeche von 44px. */
.beschriften-teilen-link {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Nur so breit wie der Text (plus Tippflaeche), mittig: ueber die volle
       Breite stuende der Fokusrahmen am Fensterrand. */
    width: fit-content;
    min-height: 44px;
    margin: 0 auto 8px;
    padding: 0 16px;
    border: none;
    background: none;
    font: 400 11px var(--mono);
    color: var(--ink-3);
    cursor: pointer;
}

/* -------------------------------------------- Raster, Miniaturen */

.raster {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 0 var(--pad-x) 16px;
}

.raster__kachel {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-photo);
}

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

.miniatur {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-photo);
}

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

/* Dokument-Detail (Entwurf "Detail 390" Punkt 4): ein fester 180px-
   Kasten statt einer variablen Mindesthoehe, Inhalt wird eingepasst
   (contain), nicht mehr nur zentriert reingelegt. Exklusiv fuer
   document/show.html.twig, siehe .vorschau__bild/__inhalt/__blattbox
   darunter. */
.vorschau {
    margin: 20px;
    height: 180px;
    background: var(--well);
    border-radius: 12px;
    overflow: hidden;
}

.vorschau__bild {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Die PDF-Vorschau fuehrt zum Viewer des Browsers, die Datei ohne
   Inline-Weg zum Herunterladen. Als Link wuerde sie sonst die
   Linkfarbe und einen Unterstrich erben. */
.vorschau__link {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
}
/* Ein Foto oeffnet sich gross im eigenen Tab, die Lupe sagt das an. */
.vorschau__link .vorschau__bild { cursor: zoom-in; }

/* Der gepolsterte, zentrierte Innenbereich des Kastens: traegt die
   Stimulus-Bindung fuer die PDF-Vorschau bzw. (im "sonstige Datei"-
   Zweig) das Platzhaltersymbol samt Bildunterschrift. */
.vorschau__inhalt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    padding: 16px;
    box-sizing: border-box;
}

/* Traegt die tatsaechliche Groesse des gerenderten PDF-Blatts
   (pdfvorschau_controller.js misst hier "contain" statt voller
   Breite, seit der Kasten eine feste Hoehe hat). flex:1 gibt ihr den
   Rest der Hoehe, nachdem die Bildunterschrift ihre eigene genommen
   hat. */
.vorschau__blattbox {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vorschau__blatt {
    display: block;
    border-radius: 6px;
}

/* Zwei gestapelte Knoepfe brauchen Luft. Der Zeilenumbruch zwischen
   ihnen gaebe sonst nur den Leerraum eines Leerzeichens her. */
.page .btn--block + .btn--block {
    margin-top: 10px;
}

/* Bilder aus dem Mailtext. Sie kommen in Originalgroesse und sprengten
   sonst jede Spalte. */
.mailtext img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    margin: 8px 0;
}

/* Die Bilder, die im Text keinen Platz gefunden haben. Eine Reihe zum
   Wischen statt eines Rasters: im Sheet ist die Hoehe knapp. */
.mailbilder {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.mailbilder__bild {
    width: 96px;
    height: 96px;
    flex: none;
    border-radius: 8px;
    overflow: hidden;
    background: var(--paper);
}

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

.vorschau__hinweis {
    margin: 0;
    font: 400 11px var(--mono);
    color: var(--ink-3);
    text-align: center;
}

/* ------------------------------------------------------ Formulare */

.feld {
    padding: 8px var(--pad-x);
}

/* Das Auswahlfeld selbst ist unsichtbar, der Chip ist die Bedienung. */
.chip__wahl {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.chip:has(.chip__wahl:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.file-input {
    width: 100%;
    padding: 10px 0;
    font-size: 14px;
}

.file-input::file-selector-button {
    height: 36px;
    margin-right: 10px;
    padding: 0 14px;
    border: 1px solid var(--bd-btn);
    border-radius: var(--r-pill);
    background: var(--card);
    color: var(--ink-2);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* ------------------------------------------------------- Timeline */

.filterleiste {
    padding: 0 var(--pad-x) 6px;
}

.suchfeld {
    position: relative;
    color: var(--ink-3);
}

.suchfeld svg {
    position: absolute;
    left: 13px;
    top: 13px;
    pointer-events: none;
}

.suchfeld__eingabe {
    padding-left: 40px;
    border-radius: var(--r-md);
}

.filterleiste .chips {
    margin: 12px 0 6px;
}

/* Traegt keine eigene Flaeche mehr (Tageskarten-Entwurf, Punkt 1): jeder
   Tag liegt jetzt in seiner eigenen Karte (.papierblatt .tagesgruppe
   weiter unten), dieser Rahmen ist nur noch der Seitenrand auf --paper.
   Bewusst kein overflow:hidden mehr: sonst waere dieses Element der
   naechste Vorfahr mit eigenem Scroll-Kontext fuer .monatszeile
   (position:sticky, Punkt 3), obwohl am Handy tatsaechlich das Dokument
   scrollt (.app__spalte ist dort display:contents, siehe app__main
   weiter unten). Das Clipping der abgerundeten Kartenecken uebernimmt
   jede Karte jetzt selbst. */
.papierblatt {
    margin-top: var(--s-2);
    padding: 0 var(--s-4);
}

/* Klebt am oberen Rand des scrollenden Dokuments (Punkt 3): am Handy
   scrollt die Seite selbst (siehe .papierblatt oben), am Desktop
   .timeline-liste (dort eigenes overflow-y:auto). Ein eigener
   Hintergrund ist noetig, sonst blieben darunter wegscrollende Karten
   sichtbar. z-index haelt sie ueber den Karten, aber unter der
   Auswahlleiste/Tab-Bar. Am Desktop ueberschreibt
   .timeline-liste .monatszeile weiter unten nur die Innenabstaende. */
.monatszeile {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--paper);
    /* Werte aus dem Tageskarten-Entwurf "Timeline 390". */
    padding: 8px 8px 10px;
}

.monatszeile__monat {
    font: 600 11px var(--mono);
    letter-spacing: 0.08em;
    color: var(--accent);
}

.monatszeile__kw {
    font: 400 11px var(--mono);
    color: var(--ink-3);
}

/* Zeilentypografie der Timeline und der Namenstreffer der Suche, die sich
   dieselbe Datei teilen (Entwurf Zeile 138/152): Titel etwas leichter,
   die Meta-Zeile in --mono statt --font. Bewusst nur hier, nicht am
   allgemeinen .row__title/.row__meta, das auch Kontakte- und
   Vorgangslisten tragen. */
.tagesgruppe .row__title { font-weight: 500; }
/* Nacharbeit Timeline Handy Punkt 7: 2px statt der 1px von .row__meta,
   gilt so auch schon am Desktop (siehe Entwurf "Timeline Desktop"). */
.tagesgruppe .row__meta { font-family: var(--mono); font-size: 12px; margin-top: 2px; }

/* Ueberschrift einer Tagesgruppe des Fotostroms (/bilder): eigene obere
   Kante statt einer Karte, siehe .fotostrom .tagesgruppe weiter unten.
   Die Timeline zeigt stattdessen .papierblatt .tagesgruppe__kopf (Kopf
   einer Tageskarte, weiter unten), ohne Kante. */
.tagesgruppe__kopf {
    padding: 16px var(--pad-x) 8px;
    border-top: 1px solid var(--line-soft);
    margin-top: 6px;
    background: var(--card);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
}
/* "Die erste": das ist entweder die erste Tagesgruppe selbst (Suche, ohne
   Monatszeile) oder die erste nach der ersten Monatszeile (Timeline). */
.tagesgruppe:first-child .tagesgruppe__kopf,
.monatszeile:first-child + .tagesgruppe .tagesgruppe__kopf {
    border-top: none;
    margin-top: 0;
}

/* Kopf einer Tageskarte (Tageskarten-Entwurf, Punkt 2): Tagesname links,
   Anzahl der Eintraege rechts (.tagesgruppe__zahl, _tage.html.twig).
   Keine Kante mehr, jede Karte traegt ihre eigene Flaeche (siehe
   .papierblatt .tagesgruppe weiter unten), die Ausnahme fuer die erste
   Gruppe des geteilten .tagesgruppe__kopf oben entfaellt damit: alle
   Kartenkoepfe tragen dasselbe Innenmass. */
.papierblatt .tagesgruppe__kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 12px 18px 4px;
    border-top: none;
    margin-top: 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink);
}

/* Die Zahl rechts im Kartenkopf, gleich in beiden Entwuerfen ("Timeline
   390"/"Timeline Desktop"). Eigene, ungebundene Klasse: sie steht nur in
   _tage.html.twig, keine andere Ansicht teilt sie sich. */
.tagesgruppe__zahl {
    font: 400 11px var(--mono);
    color: var(--ink-3);
}

/* Jeder Tag eine eigene Karte (Tageskarten-Entwurf, Punkt 1): weisse
   Flaeche, Radius --r-lg, Schatten --shadow-card, kein Rand. overflow
   hidden clippt die quadratischen Zeilen-Hover-Flaechen an den runden
   Ecken. 14px Abstand zur vorigen Karte, die erste traegt keinen: sie
   folgt direkt auf ihre Monatszeile (Timeline zeigt sie immer mit
   mitMonat=true, siehe timeline/index.html.twig). */
.papierblatt .tagesgruppe {
    background: var(--card);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    padding: 4px 0 8px;
    margin-top: 14px;
}
.papierblatt .tagesgruppe:first-child,
.papierblatt .monatszeile:first-child + .tagesgruppe {
    margin-top: 0;
}

/* Nacharbeit Timeline Handy Punkt 2/3: keine Linie zwischen den Zeilen
   (nur die Tagesueberschrift traegt eine), 9px statt 14px senkrechter
   Abstand. Scoped auf .papierblatt: Inbox und Ordnerliste teilen sich
   .row--eintrag und behalten ihre eigenen Werte. */
.papierblatt .row--eintrag {
    padding-top: 9px;
    padding-bottom: 9px;
    border-bottom: none;
}

.row--eintrag {
    align-items: flex-start;
    padding-top: 14px;
    padding-bottom: 14px;
}

.row--eintrag .icon-tile {
    margin-top: 2px;
}

/* Nacharbeit Timeline Handy Punkt 4: 44x44 statt 36x36, Icon 18px statt
   der eingebetteten Groesse der SVG-Makros. Scoped auf .papierblatt, die
   Inbox/Ordnerliste-Kacheln bleiben unberuehrt. */
.papierblatt .row--eintrag .icon-tile {
    width: 44px;
    height: 44px;
}
.papierblatt .row--eintrag .icon-tile svg {
    width: 18px;
    height: 18px;
}

/* Die Kachel faerbt sich nach Art des Eintrags (Entwurf Zeile 132-183).
   Fuer Fotos gibt es keinen eigenen Token fuer die Symbolfarbe, der
   Entwurf zeichnet sie dort nur wenig dunkler als bei den uebrigen
   Kacheln, --ink-3 (schon die Grundfarbe von .icon-tile) deckt das. */
.icon-tile--foto { background: var(--bg-photo); }
.icon-tile--mail { background: var(--accent-soft); color: var(--accent); }
.icon-tile--notiz { background: var(--ok-soft); color: var(--ok); }
.icon-tile--kuerzel {
    font: 600 10px var(--mono);
    letter-spacing: 0.02em;
}

/* AP4 Teil A Punkt 7 (Entwurf Zeile 356 ff.): das Aelteste in Unsortiert
   faellt als Karte auf. Diese Zeilen-Fassung ist inzwischen Desktop-
   exklusiv (.unsortiert-liste traegt .nur-desktop, siehe
   inbox/index.html.twig): am Handy steht seit Punkt 3 des Unsortiert-
   Handy-Auftrags die echte aufgeklappte Karte, .unsortiert-mobil-karte
   weiter unten. .unsortiert-danach bleibt beiden gemeinsam, die Regel
   kennt keinen Unterschied zwischen den beiden Verwendern. */
.row--eintrag--hervorgehoben {
    align-items: center;
    padding: 18px;
    background: var(--card);
    border-bottom: none;
    border-radius: var(--r-sheet);
    box-shadow: var(--shadow-card);
    margin: 4px var(--pad-x) 12px;
}
.row--eintrag--hervorgehoben .row__title { font-size: 16px; }
.row--eintrag--hervorgehoben .icon-tile--gross { background: var(--accent-soft); color: var(--accent); }
.unsortiert-danach { margin: 4px var(--pad-x) 8px; }

/* ---------------------------------------------------- Unsortiert Handy */

/* Punkt 3 (Entwurf "Unsortiert 390"): die aufgeklappte Karte der
   aeltesten Mail, direkt in der Liste statt in einem Sheet. Radius und
   Schatten kommen von denselben Tokens wie die Desktop-Zeile oben
   (--r-sheet/--shadow-card), fuer denselben "faellt als Karte auf"-
   Charakter. Aussenabstand 16px wie im Entwurf ("padding:10px 16px 0"
   am Behaelter), nicht --pad-x. */
.unsortiert-mobil { padding: 10px 0 var(--s-6); }

.unsortiert-mobil-karte {
    margin: 0 16px;
    padding: 18px;
    background: var(--card);
    border-radius: var(--r-sheet);
    box-shadow: var(--shadow-card);
}
.unsortiert-mobil-karte__kopf { display: flex; align-items: center; gap: 12px; }
.unsortiert-mobil-karte__titel { display: block; font-size: 16px; font-weight: 600; color: var(--ink); }
.unsortiert-mobil-karte__meta { display: block; font: 12px var(--mono); color: var(--ink-3); margin-top: 2px; }
/* "Tag wählen" in derselben mono/klein-Schrift wie .unsortiert-danach,
   siehe Entwurf Zeile 29: die einzige .section-label auf dieser Karte
   ist die der Tag-Pillenreihe. */
.unsortiert-mobil-karte .section-label { display: block; font: 400 11px var(--mono); text-transform: uppercase; margin: 16px 0 8px; }
/* .feld bringt sein Seiten-Padding fuer ganze Formularseiten mit; in der
   Karte stehen Label und Pillen buendig mit dem Kartenkopf (Entwurf). */
.unsortiert-mobil-karte .feld { padding: 0; }

/* Punkt 4: Kontaktwahl und "Absender merken" liegen zugeklappt hinter
   derselben <details>-Mechanik wie beim Beschriften (kein JS noetig). */
.unsortiert-mobil-karte__kontakt { margin-top: 16px; }
.unsortiert-mobil-karte__kontakt-oeffner {
    display: block;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
    list-style: none;
}
.unsortiert-mobil-karte__kontakt-oeffner::-webkit-details-marker { display: none; }
.unsortiert-mobil-karte__kontakt-inhalt { margin-top: 10px; }
.unsortiert-mobil-karte__kontakt-inhalt .chip--kontakt { height: 40px; padding: 0 15px; }

.unsortiert-mobil-karte__fuss { margin-top: 18px; }

/* Punkt 5: die "Danach"-Eintraege als kleine, gedaempfte Karten. Jede
   steht in ihrem eigenen Turbo-Frame (Markup), damit Antippen genau sie
   zur Karte macht, siehe inbox/index.html.twig. */
.unsortiert-mobil-eintrag-rahmen { display: block; margin: 0 16px; }
/* Der Rahmen haelt den Aussenabstand schon, eine hier aufgeklappte Karte
   saesse sonst doppelt eingerueckt. */
.unsortiert-mobil-eintrag-rahmen .unsortiert-mobil-karte { margin: 0; }
.unsortiert-mobil-eintrag-rahmen + .unsortiert-mobil-eintrag-rahmen { margin-top: 8px; }

.unsortiert-mobil-eintrag {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--card);
    border-radius: 12px;
    opacity: .75;
    color: inherit;
}
.unsortiert-mobil-eintrag .row__title { font-size: 14px; font-weight: 500; }
.unsortiert-mobil-eintrag .row__meta { font-family: var(--mono); font-size: 11px; }

/* -------------------------------------------------- Zuordnen-Sheet */

.sheet__unterzeile {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 400;
    color: var(--ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Gestapelt statt nebeneinander (AP.. Punkt B, Entwurf Zeile 36 f.):
   ausschliesslicher Verwender ist das Zuordnen-Sheet, die Regel darf
   deshalb direkt an .sheet__fuss--zwei aendern statt an .btn/.btn--quiet
   selbst, die anderswo mit anderen Massen stehen. */
.sheet__fuss--zwei {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sheet__fuss--zwei > * {
    justify-content: center;
}

.sheet__fuss--zwei .btn {
    border-radius: 12px;
    font-size: 16px;
}

.sheet__fuss--zwei .btn--quiet {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-2);
}

.wahlliste {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wahlzeile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
}

.wahlzeile:has(.chip__wahl:checked) {
    border-color: var(--accent);
    background: var(--paper);
}

.haken {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}

.haken input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--accent);
}

/* ------------------------------------------------ Freigabe (extern) */

/* Die Seite fuer Externe hat keine Tab-Bar, deshalb unten Luft statt
   Platz fuer die Leiste. */
.freigabe { padding-bottom: 40px; }

.freigabe__kopf { margin-bottom: 20px; }

.freigabe__zip { margin: 0 0 8px; }

/* Fotokachel der Freigabe: die Flaeche oeffnet das Foto, der Knopf in der
   Ecke laedt es. 36px Knopf in 44px Trefferflaeche, wie .kachelhaken
   dunkel hinterlegt, damit er auf hellen Fotos lesbar bleibt. */
.freigabe__kachel { position: relative; }
.freigabe__kachel > a:first-child { display: block; width: 100%; height: 100%; }
.freigabe__laden {
    position: absolute; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    color: #fff;
}
.freigabe__laden::before {
    content: "";
    position: absolute; inset: 4px;
    border-radius: 8px;
    background: rgba(20, 20, 24, 0.45);
}
.freigabe__laden svg { position: relative; width: 18px; height: 18px; }

.raster__ersatz {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 6px;
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
    color: var(--ink-3);
}

.freigabe__notiz,
.freigabe__mail { margin-bottom: 10px; }

.freigabe__notiz .abzeichen { margin-top: 6px; }

.freigabe__notiz .prose,
.freigabe__mail .prose { margin: 8px 0 0; }

/* Die Anhaenge stehen in der Mailkarte, dort braucht die Liste keinen
   eigenen Aussenabstand mehr. */
.freigabe__mail .list { padding: 8px 0 0; }
.freigabe__mail .list .row { padding-left: 0; padding-right: 0; }

/* -------------------------------------------------- Sammelmappe */

/* Schwebt ueber der Tab-Bar, damit sie aus jeder Ansicht erreichbar ist,
   ohne einen der fuenf festen Plaetze zu belegen. */
.sammelmappe {
    position: absolute;
    right: var(--pad-x);
    bottom: calc(100% + 8px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line); /* --bd gab es nie, die Regel fiel still auf currentColor zurueck */
    border-radius: 18px;
    background: var(--card);
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
}

.sammelmappe__zaehler {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--accent);
    color: var(--accent-fg);
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}

.sammlung-zeile { gap: 4px; }
.sammlung-zeile__knopf { display: flex; flex-shrink: 0; }

/* Die Optionen im Teilen-Sheet stehen je in einem eigenen Formular, weil
   sie verschiedene Ziele haben. Der Knopf fuellt die Breite trotzdem ganz
   aus, und ein Knopf zentriert seinen Text von Haus aus. */
.optionen form { display: block; }

.optionen form .option {
    width: 100%;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* Zeile mit Teilen-Knopf: die Zeile selbst ist der Behaelter, der Link
   darin deckt die Flaeche, der Knopf steht daneben. Ein Knopf innerhalb
   eines Links waere ungueltiges HTML.
   16px statt der frueheren 8px (Randkorrektur Punkt 2): der Mehr-Knopf
   sitzt sonst naeher am Fensterrand als die uebrigen Zeilen. .dokumente
   ueberschreibt das Polster ohnehin vollstaendig (padding: 0), am
   Desktop bleibt die Zeile dank des breiten .app__spalte-Randes weit
   genug vom Fenster entfernt, hier veraendert sich also nichts, was
   dort schon passt. */
.row--teilbar { padding-right: 16px; }

.row__flaeche {
    display: flex;
    align-items: inherit;
    gap: 12px;
    flex: 1;
    min-width: 0;
    color: inherit;
}

.row__teilen { flex-shrink: 0; }
/* Das Gewerk darf nicht zusammengedrueckt werden, sonst steht die
   Haelfte des Namens im Badge. In der Dokumententabelle des Desktops
   ist es ein Rasterfeld, dort wirkt die Angabe nicht. */
.row__kategorie { flex-shrink: 0; }

/* ------------------------------------------------------ Ordnerlisten */

/* Der Umschalter zwischen den drei Sichten auf denselben Ordner. Er
   steht unter der Beschreibung, nicht in einer eigenen Leiste: er
   gehoert zum Kopf dieser Seite und nicht zur Navigation. Bei 390px
   passen die drei nebeneinander. */
.page-head .chips { margin-top: 10px; }

/* Ein Bild in der Zeilenliste zeigt sich selbst, statt hinter dem
   Papiersymbol zu verschwinden. Die Kachelgroesse bleibt, damit die
   Zeilen nicht springen. */
.icon-tile--bild {
    object-fit: cover;
    background: var(--well);
}

/* Datei- und Mailzeilen im Dateibaum tragen eine groessere Kachel
   (Entwurf Zeile 284, AP4 Teil A Punkt 5). */
.icon-tile--gross {
    width: 40px;
    height: 40px;
}

/* Nacharbeit `/dateien` Handy Punkt 1 (auftrag-dateien-nacharbeit.md,
   dateien-390.html Zeile 17): eine weisse Flaeche statt des
   Papiergrundes darunter, radius nur oben, reicht bis zum unteren Rand.
   .dateien-baum und .dateien-liste bleiben "display: contents" (oben),
   ihre Kinder werden damit direkte Flex-Kinder von .bereich--dateien:
   die order-Regeln darunter bringen Brotkrume, Ordner und Dateien in
   die Reihenfolge des Entwurfs, ohne das Markup umzubauen. Scoped auf
   --dateien: /mails ist nicht Teil dieses Auftrags und bleibt wie es
   ist. Ab 1024px setzt .bereich, .bereich--dateien weiter unten alles
   zurueck, die Spalten dort bleiben unveraendert.
   flex:1 statt min-height:100% (Nacharbeit Punkt 9): die Flaeche endete
   vorher nach der letzten Datei, weil die Prozentkette an .app__spalte
   (display:contents) abriss. .bereich--dateien ist dank .app__spalte
   jetzt ein echtes Flex-Kind von .app__main (siehe dort) und waechst
   darueber auf die restliche Hoehe. */
.bereich--dateien {
    display: flex;
    flex-direction: column;
    flex: 1;
    background: var(--card);
    border-radius: 20px 20px 0 0;
    margin-top: 8px;
    overflow: hidden;
}
.bereich--dateien .page-head { order: 1; padding: 16px 20px 8px; }
.bereich--dateien .dateien-baum__mobil { order: 2; }
.bereich--dateien .empty,
.bereich--dateien .dateien-zeilen-mobil,
.bereich--dateien form#einsortieren { order: 3; }

/* Mono statt Fliesstext (Entwurf Zeile 270/731, AP4 Teil A Punkt 5):
   steht jetzt immer da, auch an der Wurzel ohne gewaehlten Ordner, und
   ersetzt dort den frueheren eigenen Seitentitel. */
.brotkrume {
    display: flex; flex-wrap: nowrap; align-items: center; gap: 6px;
    font-family: var(--mono); font-size: 12px; color: var(--ink-3);
    margin-bottom: 4px;
    /* Nacharbeit `/dateien` Handy Punkt 2: der Entwurf zeigt die
       Brotkrume neben dem Anlegen-Knopf in einer Zeile (dateien-390.html
       Zeile 18), am Handy blieb dafuer bisher kein Platz und sie brach in
       mehrere Zeilen um. flex:1/min-width:0 lassen sie schrumpfen statt
       umzubrechen, overflow:hidden schneidet einen zu langen Pfad sauber
       ab, statt ueber die Knoepfe zu laufen. */
    flex: 1; min-width: 0; overflow: hidden;
}
.brotkrume a { color: var(--ink-3); }
.brotkrume a:hover { color: var(--ink); }
.brotkrume__trenner { color: var(--ink-3); }
.brotkrume__hier { color: var(--ink); font-weight: 500; }
.brotkrume__anzahl { color: var(--ink-3); }

/* Nacharbeit `/dateien` Handy Punkt 8 (dateien-390.html, Unterordner):
   ohne white-space:nowrap bricht jeder Teil in sich um, statt in einer
   Zeile zu bleiben (.brotkrume selbst verhindert nur, dass die TEILE
   sich untereinander stellen, nicht dass ihr eigener Text umbricht).
   Die vorderen Stufen duerfen dafuer schrumpfen und werden mit Ellipse
   abgeschnitten, der aktuelle Ordner am Ende (.brotkrume__hier) bleibt
   immer ganz da. */
.brotkrume__stufe,
.brotkrume__hier {
    white-space: nowrap;
}
.brotkrume__stufe {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brotkrume__hier {
    flex-shrink: 0;
}

.ordnerliste { padding-bottom: 0; }

/* Die Ordnerzeile am Handy (Entwurf Zeile 271 ff., dateien-390.html):
   Symbol, Name, und die Zahl rechtsbuendig als blosse Ziffer in mono,
   ohne Unterzeile und ohne Chevron. Scoped statt die geteilte .row--
   eintrag zu aendern: die traegt auch Kontakte- und Tag-Zeilen, die
   ihre zweizeilige Form behalten (Browser-Check des Koordinators,
   10.09.2026, Handy-Runde, Befund 1).
   min-height:44px statt der geerbten 64px von .row (Nacharbeit `/dateien`
   Handy Punkt 7): padding 12px + 20px Symbol treffen von selbst auf
   44px, das Touch-Ziel bleibt damit gewahrt. */
.ordnerliste .ordnerzeile { align-items: center; padding-top: 12px; padding-bottom: 12px; min-height: 44px; }
.ordnerliste .ordnerzeile .row__title { flex: 1; min-width: 0; font-weight: 500; }
.ordnerliste .ordnerzeile .row__zahl { flex-shrink: 0; font: 400 12px var(--mono); color: var(--ink-3); }

/* Nacharbeit `/dateien` Handy Punkt 3 (dateien-390.html Zeile 271 ff.):
   der Ordner-Strich steht ohne Kachel, das rohe Symbol in Ocker statt
   des gedaempften Kachel-Tons. Eigene Klasse statt .icon-tile, sonst
   traegt sie auch dessen Flaeche und feste Groesse. */
.ordnerliste .ordnerzeile__symbol { color: var(--ocker); flex-shrink: 0; }

/* Der Tag in der Metazeile der Dateizeile (Nutzer-Entscheidung,
   10.09.2026): derselbe farbige Punkt wie in der Timeline-Metazeile,
   "14:32 · Foto · ● Rohbau". Eigene, schmal scopte Klasse statt
   .abzeichen__punkt zu teilen: die sitzt in einer eigenen
   inline-flex-Huelle (.abzeichen__tag) und braucht deren Abstand hier
   nicht, der Punkt steht im reinen Textfluss der Metazeile. */
.dateien-zeilen-mobil .metapunkt {
    display: inline-block;
    width: 7px; height: 7px;
    margin: 0 4px -1px 0;
    border-radius: 50%;
    background: var(--cat, var(--ink-3));
}

/* Nacharbeit `/dateien` Handy Punkt 4 (dateien-390.html Zeile 284 ff.):
   engere Zeile ohne Trennlinie, Titel etwas leichter, Meta in mono statt
   Fliesstext. .row/.row__title/.row__meta gelten app-weit, deshalb
   scoped statt sie selbst zu aendern. */
.dateien-zeilen-mobil .row { padding: 11px 20px; border-bottom: none; }
/* Das Ankreuzfeld ist in der Ruhelage ausgeblendet (Punkt 6, "Weg A"),
   der 4px-Vorhalt aus .row--waehlbar braucht es dann nicht mehr: sonst
   staende die Kachel 4px weiter rechts als der Entwurf zeigt. */
.dateien-zeilen-mobil .row--waehlbar { padding-left: 20px; }
.dateien-zeilen-mobil .row__title { font-weight: 500; }
.dateien-zeilen-mobil .row__meta { font-family: var(--mono); font-size: 12px; margin-top: 2px; }
/* Kamerasymbol bei einem Bild ohne Miniatur, wie am Desktop schon (siehe
   dort): gleicher Wert wie --ink-3, aber ausdruecklich benannt statt
   zufaellig gleich. */
.dateien-zeilen-mobil .icon-tile--foto { color: var(--icon-photo); }

/* Nacharbeit `/dateien` Handy Punkt 6 (Weg A, dateien-390.html zeigt
   kein Ankreuzfeld in der Ruhelage): das Feld kommt erst mit dem
   "Auswählen"-Knopf im Kopf (ablage_controller.js#auswahlUmschalten),
   der die Klasse am Bereich umschaltet. */
.dateien-zeilen-mobil .zeilenhaken { display: none; }
.bereich.ist-auswahl-aktiv .dateien-zeilen-mobil .zeilenhaken { display: flex; }
.bereich.ist-auswahl-aktiv .dateien-zeilen-mobil .row--waehlbar { padding-left: 4px; }

/* Nacharbeit `/dateien` Handy Punkt 10: der eingeschaltete Zustand
   zeigt sich am Knopf selbst, genau wie der Mond-Knopf im Dunkel-
   Entwurf (.kopf__thema[aria-pressed='true'] oben). */
[data-action='ablage#auswahlUmschalten'][aria-pressed='true'] {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.brotkrume__stufe { border-radius: 6px; padding: 1px 4px; margin: 0 -4px; }

/* Ziehen: das Gezogene tritt zurück, das Ziel unter dem Zeiger tritt
   hervor. Ohne diese beiden Zeichen ist nicht zu sehen, wo etwas landet. */
.zieht { opacity: 0.45; }

.ist-ziel {
    background: var(--well);
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.ordnerzeile { cursor: pointer; }

/* Das Kontextmenü steht über allem, auch über der Tab-Bar. */
.kontextmenu {
    position: fixed;
    z-index: 20;
    min-width: 200px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    box-shadow: 0 12px 32px rgba(20, 20, 24, 0.18);
}
.kontextmenu[hidden] { display: none; }

.kontextmenu__eintrag {
    display: block;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    font-size: 14px;
    text-align: left;
    color: var(--ink);
    cursor: pointer;
}
.kontextmenu__eintrag:hover { background: var(--paper); }
.kontextmenu__eintrag--gefahr { color: var(--danger); }
.kontextmenu__eintrag--gefahr:hover { background: var(--danger-soft); }

.kontextmenu__trenner {
    height: 1px; margin: 5px 6px;
    border: 0; background: var(--line-soft);
}

/* Zeile mit Ankreuzfeld: das Feld steht links, der Rest der Zeile
   bleibt der Link auf das Element. */
.row--waehlbar { padding-left: 4px; }

.zeilenhaken {
    display: flex; align-items: center;
    padding: 0 8px; flex-shrink: 0;
    cursor: pointer;
}
.zeilenhaken input,
.kachelhaken input {
    width: 20px; height: 20px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* Titel nimmt den Platz, das Gewerk steht rechts. */
.row--waehlbar .row__titelzelle { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }

/* Im Raster liegt das Feld auf der Kachel. Der dunkle Grund haelt es
   auch auf einem hellen Bild sichtbar. */
.raster__kachel--waehlbar { position: relative; }
.raster__kachel--waehlbar > a { display: block; width: 100%; height: 100%; }

.kachelhaken {
    position: absolute; top: 6px; left: 6px;
    display: flex; padding: 4px;
    border-radius: 8px;
    background: rgba(20, 20, 24, 0.45);
}

/* /bilder (Nutzerentscheid 26.10.2026): die Ankreuzfelder der Kacheln
   gibt es erst in der Auswahl. ablage_controller.js#auswahlUmschalten
   setzt ist-auswahl-aktiv am Behaelter .fotoauswahl; ohne die Klasse ist
   jede Kachel nur ein Link auf das Foto. In der Auswahl legt sich das
   Etikett ueber die ganze Kachel, ein Tipp irgendwo kreuzt also an statt
   zu oeffnen, und das Feld sitzt als dunkler Chip in der Ecke. Der Ring
   zeigt, was angekreuzt ist. */
.fotostrom .kachelhaken { display: none; }
.fotoauswahl.ist-auswahl-aktiv .fotostrom .kachelhaken { display: flex; }
.kachelhaken--flaeche {
    inset: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    align-items: flex-start;
    cursor: pointer;
}
.kachelhaken__feld {
    display: flex;
    margin: 6px; padding: 4px;
    border-radius: 8px;
    background: rgba(20, 20, 24, 0.45);
}
.fotostrom .raster__kachel:has(input:checked) {
    outline: 3px solid var(--accent);
    outline-offset: -3px;
}

/* Kopf von /bilder: der Satz nimmt den Platz, der Auswaehlen-Knopf steht
   rechts, wie im Kopf von /dateien. */
.fotokopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fotokopf .page-lead { flex: 1; min-width: 0; }

/* "Aeltere laden" unter dem Strom. */
.fotostrom__weiter {
    display: flex; justify-content: center;
    margin: 0; padding: var(--s-5) var(--pad-x) 24px;
}

/* Die Leiste kommt erst mit der ersten Auswahl. Sie klebt ueber der
   Tab-Bar, damit sie am Daumen liegt und die Liste nicht bis ans Ende
   gescrollt werden muss. */
.auswahlleiste {
    position: sticky;
    bottom: calc(88px + env(safe-area-inset-bottom));
    z-index: 4;
    /* Umbruch, weil zwei Knoepfe neben der Zahl auf 390px nicht mehr
       nebeneinander passen. Sie rutschen dann geschlossen eine Zeile
       tiefer, statt aus der Leiste zu laufen. */
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 0 var(--pad-x) 24px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--card);
    box-shadow: 0 6px 20px rgba(20, 20, 24, 0.12);
}
/* "display: flex" schlaegt das hidden-Attribut, deshalb hier
   ausdruecklich: ohne Auswahl ist die Leiste nicht da. */
.auswahlleiste[hidden] { display: none; }
.auswahlleiste__zahl { font-size: 13px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.auswahlleiste .select { flex: 1; min-width: 0; }
.auswahlleiste .btn { width: auto; flex-shrink: 0; }

/* Feld und Knopf nebeneinander, wie im Verwalten-Sheet gebraucht. */
.feldzeile { display: flex; gap: 8px; }
.feldzeile .input, .feldzeile .select { flex: 1; min-width: 0; }
.feldzeile .btn { width: auto; flex-shrink: 0; }

/* ============================================================ Papierkorb
 *
 * Vier Abschnitte in einer Ansicht, jeder mit eigener Auswahl. Sonst
 * dieselben Bausteine wie in den Ordnern: Liste, Raster, Auswahlleiste.
 */

.papierkorb__bereich { margin-bottom: 8px; }
.papierkorb__titel {
    display: flex; align-items: center; gap: 8px;
    margin: 0; padding: 20px var(--pad-x) 8px;
    font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--ink-3);
}
.papierkorb__zahl {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--paper);
    font-size: 12px; font-weight: 600; letter-spacing: 0;
    color: var(--ink-3);
}

/* Die Knoepfe stehen rechts und bleiben beim Umbruch zusammen. Auf einer
   eigenen Zeile teilen sie sich die Breite. */
.auswahlleiste__knoepfe { display: flex; gap: 10px; margin-left: auto; }
/* Basis auto, damit die Beschriftung die Breite bestimmt: mit
   Basis 0 waeren beide Knoepfe gleich breit und der laengere
   Text braeche um. */
.auswahlleiste__knoepfe .btn { flex: 1 0 auto; }

/* ============================================================= Vorgaenge
 *
 * Eine Arbeitsliste. Die offenen stehen oben in den normalen Zeilen, die
 * erledigten darunter zurueckgenommen: sie sind Beleg, nicht Aufgabe.
 */

/* Zwischenueberschrift innerhalb einer Ansicht, gleiche Optik wie die
   Abschnittstitel im Papierkorb. */
.abschnitt {
    margin: 0; padding: 24px var(--pad-x) 8px;
    font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--ink-3);
}

/* Ueberschrift plus Trefferzahl auf der Suchseite (AP2). Die Zahl steht
   in --mono wie jede Meta-Angabe im Entwurf. */
.abschnitt-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    padding: 0 var(--pad-x);
}
.abschnitt-kopf .abschnitt { padding: 0; }
.abschnitt-kopf--zweite {
    margin-top: var(--s-2);
    padding-top: var(--s-5);
    border-top: 1px solid var(--line-soft);
}
.abschnitt__zahl {
    flex-shrink: 0;
    font-family: var(--mono); font-size: 12px; font-weight: 500;
    color: var(--ink-3);
}

/* Nacharbeit Suche Handy Punkt 2 (Entwurf "Suche 390" Zeile 16 ff.):
   dunkler, satzgemaesser Titel ohne Sperrsatz/Versal, wie die
   Timeline-Tagesueberschrift seit Nacharbeit Timeline Handy Punkt 5,
   nicht das gedaempfte, versale Original von Matter/Papierkorb.
   .suche allein reicht als Anker: die Klasse traegt nur diese eine
   Seite. Desktop-Gegenstueck (14px, kein Sperrsatz, margin-top statt
   Linie bei der zweiten Ueberschrift) im @media-Block unten. */
.suche .abschnitt-kopf { padding: 18px var(--pad-x) 6px; }
.suche .abschnitt-kopf--zweite { padding-top: 20px; }
.suche .abschnitt {
    font-size: 13px;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink);
}

/* Eine der beiden Suchgruppen ohne Treffer (AP2), mit dem erklaerenden
   Satz aus dem Entwurf statt einer stumm leeren Flaeche. */
.suche-leer {
    margin: var(--s-2) var(--pad-x) var(--s-3);
    padding: var(--s-5) var(--s-6);
    border-radius: var(--r-lg);
    background: var(--well);
}
.suche-leer__satz {
    margin: 0;
    font-size: var(--t-base); font-weight: 500; color: var(--ink);
}
.suche-leer__meta {
    margin: 4px 0 0;
    font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-2);
}

/* Die flache Trefferzeile (suche/_treffer.html.twig, Nacharbeit Suche
   Desktop/Handy): Basis sind die Handy-Masse (Entwurf "Suche 390"),
   das Desktop-Gegenstueck (Entwurf "Suche Desktop") steht im
   @media-Block unten. */
.suche-treffer__zeile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px var(--pad-x);
    color: inherit;
    text-decoration: none;
}
.suche-treffer .icon-tile { width: 44px; height: 44px; }
.suche-treffer .icon-tile svg { width: 18px; height: 18px; }
.suche-treffer__haupt { flex: 1; min-width: 0; }
.suche-treffer__titel {
    display: block;
    font-size: var(--t-base);
    font-weight: 500;
    color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.suche-treffer__meta {
    display: block;
    /* Einzeilig wie im Entwurf, lange Absender enden in Auslassungspunkten. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 2px;
}

/* Die Ausschnittskarte bleibt seit der Nacharbeit dem Handy vorbehalten
   (Suche Handy Punkt 4, Entwurf "Suche 390" Zeile 40 ff.): --paper
   statt --card, engere Masse als das bisherige .card-Vorbild. */
.inhaltstreffer {
    display: block;
    margin: 0 var(--pad-x);
    padding: 12px 14px;
    border-radius: var(--r-md);
    background: var(--paper);
    color: var(--ink);
}
.inhaltstreffer + .inhaltstreffer { margin-top: 8px; }
/* Nur der Rahmen der Inhaltstreffer (suche/index.html.twig), nicht die
   Meta-Zeile der Namenstreffer (span.nur-mobil): die wurde sonst 32px hoch. */
.suche-inhalt div.nur-mobil { padding: 6px 0 10px; }

/* Die hervorgehobenen Suchwoerter, im Titel eines Namenstreffers und im
   Ausschnitt eines Inhaltstreffers (AP3, Teil A): eine Stelle fuer
   beide, siehe partials/_teile.html.twig. */
mark {
    background: var(--accent-soft); color: var(--accent);
    /* Nacharbeit Suche Desktop/Handy Punkt 4: 3px, nicht --r-sm (6px). */
    padding: 0 2px; border-radius: 3px;
}

/* Titel, Ausschnitt in Anfuehrungszeichen, Herkunft in der
   Ausschnittskarte (siehe .inhaltstreffer weiter oben, Entwurf "Suche
   390" Zeile 41-43). */
.inhaltstreffer__titel { display: block; font-size: 14px; font-weight: 500; }
.inhaltstreffer__ausschnitt {
    display: block;
    margin-top: var(--s-1);
    font-size: var(--t-sm); line-height: var(--lh-base); color: var(--ink-2);
}
.inhaltstreffer__herkunft {
    display: block;
    margin-top: var(--s-2);
    font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3);
}

.list--erledigt .row__title { color: var(--ink-2); }
.list--erledigt .icon-tile { color: var(--ink-3); }

.vorgang__meta {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 12px 0 0;
    font-size: 14px; color: var(--ink-2);
}

.vorgang__schalter { padding: 20px var(--pad-x) 0; }

/* Eine Zeile, die ein Formular abschickt. Der Knopf muss dafuer die
   Standardoptik eines Buttons ablegen. */
.row--knopf {
    width: 100%;
    border: none; background: none; font: inherit; color: inherit;
    text-align: left; cursor: pointer;
}

.feld__hilfe { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); }

/* Beim Hinzufuegen: was schon am Vorgang haengt, steht in der Liste, ist
   aber nicht waehlbar. Statt des Ankreuzfeldes ein Haken, an derselben
   Stelle und in derselben Breite, damit die Zeilen buendig bleiben. */
.row--schon { padding-left: 4px; }
.row--schon .row__title, .row--schon .icon-tile { color: var(--ink-2); }

.zeilenhaken--fest {
    color: var(--ink-3);
    cursor: default;
}
.zeilenhaken--fest svg { width: 20px; height: 20px; }

/* ================================================================ Desktop
 *
 * Ab 1024px tritt eine Seitenleiste an die Stelle der Tab-Bar, und der
 * Inhalt bekommt eine begrenzte Spalte statt der Handybreite. Unterhalb
 * der Schwelle aendert sich nichts: dieser Abschnitt ist die einzige
 * Stelle im Stylesheet, die von der mobilen Ansicht abweicht.
 *
 * Beide Navigationen stehen im Markup, hier wird je eine ausgeblendet.
 * Die Spalte ist auf dem Handy "display: contents" und damit fuer das
 * Layout gar nicht vorhanden.
 */

.seitenleiste { display: none; }
.app__spalte { display: contents; }
.nur-desktop { display: none; }
/* Anzeige fuer Fotos, die auf /bilder gezogen werden. Am Handy gibt es
   kein Ziehen, die Zustaende unten stehen im Desktop-Block. */
.bildablage { display: none; }

/* Zellen, die es nur in der Tabellenansicht des Desktops gibt. Die
   beiden Huellen sind auf dem Handy aufgeloest, damit die Zeile dort
   genauso aussieht wie vorher. */
.row__spalte { display: none; }
.row__titelzelle, .row__kategorie { display: contents; }
.zweispalt, .zweispalt__detail { display: contents; }

/* Dateien (AP4 Teil C Punkt 2): am Handy loesen sich Baum und Liste
   wieder auf, genau wie beim Zweispalt-Muster oben. */
.dateien-baum, .dateien-liste { display: contents; }

@media (min-width: 1024px) {

/* ------------------------------------------------------------- Rahmen */

.app {
    /* Der horizontale Rand wandert von den einzelnen Bausteinen an die
       Spalte. Alles, was mit diesen Variablen arbeitet, sitzt dadurch
       buendig an der Spaltenkante. */
    --pad-x: 0px;
    --pad-top: 0px;
    --pad-top-detail: 0px;

    max-width: none;
    min-height: 0;
    height: 100vh;
    height: 100dvh;
    flex-direction: row;
    align-items: stretch;
}

/* Kein Rahmen um die App mehr, das Fenster ist die Flaeche. */
body { background: var(--card); }

.tabbar-rahmen { display: none; }
.nur-desktop { display: block; }
.nur-mobil { display: none; }

/* display:block statt der Flex-Spalte vom Handy (Punkt 9): ab hier ist
   .app__spalte keine display:contents-Huelle mehr (siehe weiter unten
   in diesem @media-Block), die alte Prozentkette (.app__spalte--voll,
   .bereich--dateien) traegt hier wieder von selbst. */
.app__main { display: block; min-width: 0; overflow-y: auto; }

/* Aus dem Titel mit rundem Suchknopf wird ein offenes Suchfeld mit dem
   heutigen Datum, ueber die volle Breite neben der Seitenleiste. */
/* Drei Spalten statt einer Reihe: das Suchfeld steht damit in der Mitte
   der Leiste, unabhaengig davon, wie breit das Datum rechts gerade
   ausfaellt. Mit "space-between" oder "margin: auto" wanderte es jeden
   Monat ein paar Pixel, sobald das Datum eine Stelle mehr braucht. */
/* Entwurf "Timeline Desktop": Suchfeld 460px links, Datum ganz rechts.
   Das Datum steht in einer eigenen Spalte, das Suchfeld wandert also
   nicht mit der Datumsbreite. */
.kopf {
    display: grid;
    grid-template-columns: minmax(0, 460px) 1fr auto;
    height: 64px;
    padding: 0 24px;
    gap: var(--s-4);
    border-bottom: 1px solid var(--line-soft);
}
/* Der Entwurf zeigt in der Desktop-Kopfzeile keinen Titel, nur Suchfeld
   und Datum (Punkt 1 im Auftrag): die Seitenleiste traegt "Hausakte"
   schon. Das h1 bleibt aber im Baum, nur wie .visually-hidden behandelt
   (dieselben Werte, hier dupliziert statt die globale Regel zu
   verschieben: sie gilt auch ausserhalb dieses @media, siehe z.B.
   .seitenleiste__zahl), sonst haette /bilder & co. am Desktop wieder gar
   keine Hauptueberschrift (AP4 Teil A, "Doppelter Seitenkopf"). Als
   absolut gesetztes Element belegt es keine Spalte des Rasters. */
.kopf__titel {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.kopf__suchknopf {
    display: none;
}
/* Der Schalter fuers Handy weicht am Desktop der Zeile im Fuss der
   Seitenleiste (AP4 Teil B), sonst staende er doppelt da. */
.kopf__thema {
    display: none;
}
.kopf__suchform {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: var(--h-ctl);
    padding: 0 var(--s-3);
    border: 1px solid var(--bd-input);
    border-radius: var(--r-md);
    color: var(--ink-3);
}
.kopf__sucheingabe {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    font-size: var(--t-base);
    color: var(--ink);
    outline: none;
}
.kopf__datum {
    grid-column: 3;
    display: block;
    justify-self: end;
    flex-shrink: 0;
    white-space: nowrap;
    font-family: var(--mono);
    font-size: var(--t-xs);
    color: var(--ink-3);
}
/* Zusatzpunkt 5 (Koordinator, 10.09.2026, Nutzerentscheid): der Knopf
   steht in Spalte 2, der leeren Mitte zwischen Suchfeld und Datum.
   Rasterelement ist sein Formular (partials/_mailabruf.html.twig), nicht
   der Knopf. Es kommt im Markup vor dem Suchfeld; ohne feste Zelle nahm
   es Spalte 1 und schob das Suchfeld in eine zweite Zeile
   (Browser-Befund /inbox). */
.kopf > form:has(.kopf__mailabruf) { grid-column: 2; grid-row: 1; justify-self: start; }

/* Die Seitenleiste zeigt dieselben Bereiche schon als Liste. */
.gruppennav { display: none; }

.app__spalte {
    display: block;
    max-width: 800px;
    margin: 0 auto;
    padding: 44px 40px 64px;
}
.app__spalte--breit { max-width: 940px; }
/* Zwei Spalten fuellen das Fenster selbst, ohne Rand darum. */
.app__spalte--voll { max-width: none; padding: 0; height: 100%; }
/* Anmeldung und Passwort-Abfrage: eine schmale Karte in der Fenstermitte.
   Die volle Hoehe gibt dem Formular darin sein "justify-content: center"
   zurueck, das auf dem Handy die Tab-Bar-lose Seite mittig haelt. */
.app__spalte--schmal {
    max-width: 420px;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* ------------------------------------------------------- Seitenleiste */

/* AP4 Teil G (Entwurf "Timeline Desktop"/"Suche Desktop" Zeile 6): weiss
   ausdruecklich gesetzt statt von --paper geerbt (derselbe Fehler wie
   vorher bei .dateien-baum/.dateien-liste).
   Breite 228px statt 248px (Tageskarten-Entwurf, Punkt 6): einzige
   Fundstelle fuer dieses Mass, geprueft per Suche nach "248" in dieser
   Datei, keine Kopf- oder Spaltenberechnung wiederholt es. */
.seitenleiste {
    display: flex;
    flex-direction: column;
    width: 228px;
    flex-shrink: 0;
    padding: 28px 16px 24px;
    background: var(--card);
    border-right: 1px solid var(--line-soft);
}

.seitenleiste__kopf { padding: 0 12px; }
.seitenleiste__projekt {
    font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin-top: 2px;
}
.seitenleiste__zahl-dokumente {
    margin-top: 2px;
    font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3);
}

.seitenleiste__nav {
    display: flex; flex-direction: column; gap: 2px; margin-top: 12px;
}

/* Ueberschrift einer Gruppe (Finden, Klaeren, Verwalten), AP2: ersetzt
   den fruehreren Trenner-Strich, die drei Gruppen erklaeren sich jetzt
   selbst statt durch einen stummen Abstand. */
.seitenleiste__gruppe {
    margin: 16px 12px 6px;
    font-family: var(--mono); font-size: 10px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-3);
}
.seitenleiste__gruppe:first-child { margin-top: 0; }

.seitenleiste__ziel {
    display: flex; align-items: center; gap: 11px;
    height: 42px; padding: 0 12px;
    border-radius: 9px;
    font-size: 14px; font-weight: 600;
    color: var(--ink-3);
}
.seitenleiste__ziel:hover { background: var(--well); color: var(--ink-3); }
.seitenleiste__ziel.is-active { background: var(--accent-soft); color: var(--accent); }
.seitenleiste__ziel span:not(.seitenleiste__zahl) { flex: 1; }

.seitenleiste__zahl {
    min-width: 19px; height: 19px; padding: 0 5px;
    border-radius: 10px;
    background: var(--danger); color: var(--accent-fg);
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

/* Der Knopf sitzt unten, deshalb schiebt der Fuss sich mit auto-Rand
   an das Ende der Leiste. */
.seitenleiste__fuss { margin-top: auto; }
.seitenleiste__anlegen {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    height: 46px;
    /* Zusatzpunkt 6: steht jetzt zuerst im Fuss, nicht mehr zuletzt,
       braucht deshalb selbst den Abstand nach unten. */
    margin-bottom: 8px;
}
.seitenleiste__fuss .sammelmappe {
    position: static; margin: 0 0 8px; width: 100%; justify-content: flex-start;
}

/* Der Dunkel/Hell-Schalter im Fuss der Seitenleiste (AP4 Teil B). */
.seitenleiste__thema {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; height: 42px; padding: 0 12px; margin-bottom: 8px;
    border: none; background: none; border-radius: 9px;
    font-size: 14px; font-weight: 600; color: var(--ink-3);
    cursor: pointer;
}
.seitenleiste__thema:hover { background: var(--well); }

/* Ein Schalter aus zwei Flaechen statt eines Kontrollkaestchens, der
   Punkt wandert per aria-pressed am Elternknopf. */
.schalter {
    display: inline-flex; align-items: center; flex-shrink: 0;
    width: 36px; height: 20px; padding: 2px;
    border-radius: var(--r-pill);
    background: var(--well);
}
.schalter__punkt {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--card);
    box-shadow: var(--shadow-card);
    transition: transform 0.15s ease;
}
[aria-pressed='true'] .schalter {
    background: var(--accent);
}
[aria-pressed='true'] .schalter__punkt {
    transform: translateX(16px);
}

/* ----------------------------------------------------------- Bausteine */

.page-title { font-size: 26px; }
.page-sub { font-size: 14px; margin-top: 4px; }
.empty { padding: 72px 0; }
.list { padding: 0; }
.flash { margin: 0 0 16px; }

.detail-header {
    padding: 0 0 12px;
    border-bottom: none;
}

/* Beschriften (Punkt 9): am Desktop haengt die Seite im Turbo-Frame der
   Timeline, Kopf und Seitenleiste gehoeren dort weiter dazu. Gilt auch
   fuer das eigenstaendige Laden (z.B. Redirect nach dem Aufnehmen):
   body.vollbild-beschriften blendet beides nur unterhalb 1024px aus. */
body.vollbild-beschriften .kopf { display: grid; }
/* Suche (Nacharbeit Suche Handy Punkt 1): body.vollbild-suche blendet
   den Kopf nur unterhalb 1024px aus, am Desktop bleibt er stehen. Die
   Tab-Bar braucht keine eigene Wiederherstellung: .tabbar-rahmen ist
   ab hier ohnehin immer display:none (die Seitenleiste ersetzt sie). */
body.vollbild-suche .kopf { display: grid; }
/* Dokument-Detail (Entwurf "Detail 390" Punkt 9): am Desktop haengt die
   Seite im Turbo-Frame der Timeline, dort darf nichts ausgeblendet
   sein, derselbe Grund wie oben bei Beschriften und Suche. */
body.vollbild-dokument .kopf { display: grid; }
.beschriften-blatt {
    display: block;
    min-height: 0;
}
.beschriften-blatt .form-submit { margin-top: 28px; padding: 0; }

/* Master-Detail ab 1024px (Punkt 3, Entwurf "Timeline Desktop"): links
   die Liste, rechts die Detailansicht, ohne Seitenwechsel (siehe
   detailrahmen_controller.js). Am Handy bleibt .timeline-layout ein
   gewoehnlicher Block, die Seite damit einspaltig wie bisher. */
.timeline-layout { display: flex; height: 100%; align-items: stretch; }
/* Waehrend des Ziehens (spaltenbreite_controller.js) markiert diese Klasse
   die ganze Spalte, sonst markierte ein schneller Zug quer durch die Liste
   deren Text, statt die Breite zu aendern. */
.timeline-layout.zieht-breite { user-select: none; }
.timeline-liste {
    /* Die Randbreite der Liste: alles darin, das mit --pad-x arbeitet
       (.filterleiste, .monatszeile, .tagesgruppe__kopf), rueckt dadurch
       von selbst wieder ein, ohne jede Regel einzeln zu wiederholen.
       .app setzt --pad-x im ganzen @media-Block auf 0, weil die alte,
       nun abgeloeste Timeline-Spalte ihren Rand stattdessen von
       .app__spalte bekam. */
    --pad-x: var(--s-5);
    /* Verbreiterbar (Nutzerwunsch 11.09.2026): spaltenbreite_controller.js
       setzt --timeline-breite auf .timeline-layout, 440px bleibt die
       Vorgabe ohne eigene Einstellung (unveraendert gegenueber vorher). */
    width: var(--timeline-breite, 440px);
    flex-shrink: 0;
    /* Traeger fuer den absolut positionierten Griff am rechten Rand. */
    position: relative;
    /* Tageskarten-Entwurf, Punkt 6: --paper statt --card, die Liste ist
       keine eigene Flaeche mehr, das sind jetzt die Tageskarten darin.
       12px Innenrand ("Timeline Desktop"), box-sizing haelt die 440px
       Breite dabei fest. */
    background: var(--paper);
    padding: 0 var(--s-3);
    box-sizing: border-box;
    border-right: 1px solid var(--line-soft);
    overflow-y: auto;
}
/* Der Ziehgriff: 8px Trefferflaeche ueber die volle Hoehe, in Ruhe nur die
   vorhandene Trennlinie von .timeline-liste (kein eigener Strich), sichtbar
   erst bei Hover/Fokus/Ziehen (::after, 2px in --accent). Deckt sich mit
   dem border-right der Liste, damit kein zweiter Rand entsteht. */
.timeline-liste__griff {
    position: absolute;
    top: 0;
    right: -4px;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 1;
}
.timeline-liste__griff::after {
    content: '';
    position: absolute;
    top: 0;
    left: 3px;
    width: 2px;
    height: 100%;
    background: transparent;
}
.timeline-liste__griff:hover::after,
.timeline-liste__griff.is-aktiv::after {
    background: var(--accent);
}
.timeline-liste__griff:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}
/* .papierblatt traegt am Handy den Seitenrand der Karten (16px, siehe
   dort); hier uebernimmt .timeline-liste selbst den Innenrand. */
.timeline-liste .papierblatt { margin-top: 0; padding: 0; }
/* Die gewaehlte Zeile (detailrahmen_controller.js markiert sie beim
   Klick, kein JS-Testlauf in diesem Projekt, siehe Auftrag): Flaeche
   --accent-soft, 8px vom Kartenrand eingerueckt, Titel in --accent
   (Entwurf "Timeline Desktop"). */
.timeline-liste .row--eintrag.is-aktiv {
    margin: 0 var(--s-2);
    border-radius: var(--r-md);
    background: var(--accent-soft);
}
.timeline-liste .row--eintrag.is-aktiv > .row__flaeche { padding: 8px 12px; }
.timeline-liste .row--eintrag.is-aktiv .row__title { color: var(--accent); font-weight: 600; }
/* Die Zeile ist ab hier eine einfache Reihe aus Kachel und Textspalte
   (Entwurf "Timeline Desktop"), keine Rasterzeile mit Abzeichen-Spalte
   mehr: die gemeinsame .row--eintrag weiter unten (Inbox, Ordner,
   Vorgaenge) setzt dafuer display:grid, hier eigens zurueckgesetzt. */
.timeline-liste .row--eintrag > .row__flaeche {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 20px;
}
.timeline-liste .row--eintrag .row__main { display: block; }
.timeline-liste .row--eintrag { border-bottom: none; padding-top: 0; padding-bottom: 0; }
/* Kachelgroesse wie im Entwurf (40x40 statt 38x38). align-self:center
   statt des geerbten "start" von der gemeinsamen .row--eintrag .icon-tile
   weiter unten (Rasterzeile): die Zeile hier ist keine Rasterzeile mehr
   (siehe .row__flaeche oben), die Kachel soll mit dem Text mittig
   stehen, wie im Entwurf. */
.timeline-liste .row--eintrag .icon-tile { width: 40px; height: 40px; align-self: center; margin-top: 0; }
.timeline-liste .row--eintrag .icon-tile svg { width: auto; height: auto; }
/* Entwurf "Timeline Desktop": Titel 14px, Meta 11px, beide etwas
   enger als am Handy (15px/12px, siehe .tagesgruppe weiter oben). */
.timeline-liste .tagesgruppe .row__title { font-size: 14px; }
.timeline-liste .tagesgruppe .row__meta { font-size: 11px; }

/* Sichtbarkeit kommt von .nur-desktop im Markup: am Handy bleibt die
   Spalte weg, ohne sie waere die Seite dort zweizeilig statt einspaltig. */
.timeline-detail {
    flex: 1;
    min-width: 0;
    background: var(--paper);
    padding: var(--s-6) 28px;
    overflow-y: auto;
    box-sizing: border-box;
}
.timeline-detail__platzhalter { color: var(--ink-3); font-size: var(--t-sm); }

/* Die Filterzeile hat auf dem Desktop Platz nebeneinander (geteilt mit
   Matter "Inhalte hinzufuegen", die dort weiterhin ihr Suchfeld neben
   den Chips zeigt). */
.filterleiste { padding: 18px 0 0; display: flex; align-items: center; gap: 12px; }
.filterleiste form { flex: 1; min-width: 0; }
.filterleiste .chips { margin: 0; flex-wrap: nowrap; }
.filterleiste .chip { height: var(--h-chip); }

/* .filterleiste und .tagesgruppe__kopf teilen sich Matter (Inhalte
   hinzufuegen) und, bei .tagesgruppe__kopf, auch die Suche (beide nicht
   mein Auftrag): die folgenden Regeln ueberschreiben die gemeinsame
   Klasse deshalb nur innerhalb von .timeline-liste, mit hoeherer
   Spezifitaet, statt sie selbst zu aendern. .monatszeile ist wie
   .tagesgruppe/.tagesgruppe__zahl an keine andere Ansicht vergeben
   (mitMonat=true nur auf der Timeline), die Desktop-Regel weiter unten
   scoped trotzdem auf .timeline-liste, als Gegenstueck zu den
   8px/8px/10px vom Handy (siehe die ungescopte Basisregel weiter oben). */
.timeline-liste .filterleiste { padding: 14px var(--pad-x) 6px; }
/* AP4 Teil E (Entwurf "Timeline Desktop" Zeile 39-42): eine Zeile statt
   zweien. --h-chip-desktop, engere Innenabstaende (--s-3 statt der 15px
   von .chip) und die kleinere Schrift des Entwurfs schaffen zusammen
   den Platz fuer alle fuenf Chips in der 440px breiten Listenspalte. */
.timeline-liste .filterleiste .chips { margin: 0; flex-wrap: nowrap; }
.timeline-liste .filterleiste .chip {
    height: var(--h-chip-desktop);
    padding: 0 var(--s-3);
    font-size: var(--t-xs);
    font-weight: 500;
}
/* Tageskarten-Entwurf, Punkt 6: der aktive Chip fuellt sich hier mit
   --ink statt --accent (Entwurf "Timeline Desktop" Zeile 43), anders als
   .chip.is-active sonst ueberall in der App. */
.timeline-liste .filterleiste .chip.is-active {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--card);
}
/* Werte aus dem Entwurf "Timeline Desktop": 12px/20px/2px statt der
   8px/8px/10px vom Handy. Der 12px-Innenrand von .timeline-liste selbst
   zaehlt automatisch dazu, .monatszeile bleibt dafuer ein normales Kind. */
.timeline-liste .monatszeile { padding: 12px var(--pad-x) 2px; }

/* Bislang gemeinsame Regel fuer alle drei Nutzer (Timeline, Suche,
   Matter). Der hoehere Abstand blieb erhalten, nur die Timeline bekommt
   unten die engere, dunklere Entwurfs-Fassung obendrauf. */
.tagesgruppe__kopf { padding: 28px 0 10px; }
/* Kopf der Tageskarte am Desktop (Entwurf "Timeline Desktop" Zeile 50):
   enger als am Handy (12px 18px 4px), display/border/margin kommen
   unveraendert von .papierblatt .tagesgruppe__kopf weiter oben, gleiche
   Spezifitaet, diese Regel steht nur spaeter in der Datei. */
.timeline-liste .tagesgruppe__kopf {
    padding: 10px 16px 2px;
    font-size: var(--t-sm);
}
/* Jeder Tag eine eigene Karte, auch hier (Tageskarten-Entwurf, Punkt 1):
   12px Abstand statt 14px, sonst dieselbe Form wie am Handy (.papierblatt
   .tagesgruppe weiter oben). */
.timeline-liste .tagesgruppe {
    background: var(--card);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    padding: 4px 0 6px;
    margin-top: 12px;
}
.timeline-liste .tagesgruppe:first-child,
.timeline-liste .monatszeile:first-child + .tagesgruppe {
    margin-top: 0;
}

/*
 * Zeilen der Timeline und der Inbox. "display: contents" loest den
 * inneren Behaelter auf, dadurch koennen Titel, Meta und Kategorie im
 * selben Raster liegen: das Abzeichen steht neben dem Titel statt am
 * Zeilenende, wie im Entwurf.
 */
/* Der Strich gehoert an die Zeile, nicht an die Flaeche darin: sonst
   endet er vor dem Teilen-Knopf. */
.row--eintrag {
    padding: 0; min-height: 0;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 6px;
}
.row--eintrag:hover { background: var(--paper); }

.row--eintrag > .row__flaeche,
a.row--eintrag {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "symbol titel kategorie"
        "symbol meta  meta";
    align-items: center;
    gap: 2px 14px;
    padding: 16px 8px;
    border-bottom: none;
}
.row--eintrag > .row__flaeche:hover { background: none; }
.row--eintrag .row__main { display: contents; }
.row--eintrag .icon-tile {
    grid-area: symbol; width: 38px; height: 38px;
    align-self: start; margin-top: 2px;
}
.row--eintrag .row__title { grid-area: titel; }
.row--eintrag .row__meta { grid-area: meta; }
/* Entwurf "Timeline Desktop"/"Suche Desktop": die Meta-Zeile zeigt den
   Farbpunkt dort nicht, nur "Timeline 390" (Handy) tut das. */
.row--eintrag .row__meta-punkt { display: none; }
.row--eintrag .abzeichen { grid-area: kategorie; justify-content: flex-end; }
.row--eintrag > svg { display: none; }

/* Die Teilen-Spalte haengt am rechten Rand der Zeile. */
.row--teilbar { align-items: stretch; }
.row--eintrag .row__teilen { display: flex; align-items: center; }

/* Die Inbox zeigt Karten statt Listenzeilen, wie im Entwurf. */
.inbox-liste .row--eintrag {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    margin-bottom: 14px;
}
.inbox-liste .row--eintrag > .row__flaeche,
.inbox-liste a.row--eintrag { padding: 18px 20px; }
.inbox-liste .row__title { font-size: 16px; }

/* --------------------------------------------------------- Dokumente */

/* Die Liste wird zur Tabelle. Datum, Groesse und Kategorie stehen in
   eigenen Spalten, die Meta-Zeile des Handys entfaellt dafuer. */
.dokumente {
    margin-top: 20px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.dokumente__kopf,
.dokumente .row--teilbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px 90px 150px 44px;
    gap: 16px;
    align-items: center;
    padding: 11px 20px;
}
.dokumente__kopf {
    background: var(--paper);
    border-bottom: 1px solid var(--line-soft);
    font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-3);
}
.dokumente .row--teilbar { padding: 0; border-bottom: 1px solid var(--line-soft); }
.dokumente .row--teilbar:last-child { border-bottom: none; }
.dokumente .row__flaeche {
    display: contents;
}
.dokumente .row__titelzelle {
    display: flex; align-items: center; gap: 12px; min-width: 0;
    padding: 13px 0 13px 20px;
}
.dokumente .miniatur { width: 34px; height: 34px; }
.dokumente .row__meta { display: none; }
.dokumente .row__spalte { display: block; font-size: 13px; color: var(--ink-3); }
.dokumente .row__titelzelle { display: flex; }
.dokumente .row__kategorie { display: block; }
.dokumente .row__teilen { padding-right: 12px; }

/* ---------------------------------------------------------- Freigaben */

/* Karten statt Listenzeilen, wie im Entwurf. */
.freigaben .row {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 18px 20px;
    margin-bottom: 14px;
    min-height: 0;
}
.freigaben .row__title { font-size: 16px; }
.freigaben .row__meta { margin-top: 6px; }

/* ---------------------------------------------------- Externe Ansicht */

.app__spalte--extern {
    max-width: 1040px;
    padding-top: 56px;
    padding-bottom: 56px;
}

/* Kopfzeile und Sammel-Download stehen nebeneinander. Das Raster ordnet
   die vorhandenen Elemente um, ohne eine Huelle im Markup zu brauchen,
   damit die Handy-Ansicht unveraendert bleibt. */
.app__spalte--extern .freigabe {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
}
.app__spalte--extern .freigabe > * { grid-column: 1 / -1; }
.app__spalte--extern .freigabe__kopf {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 28px;
}
.app__spalte--extern .freigabe__zip {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    width: auto;
    margin: 0;
}

/* --------------------------------------------------------- Ordnerlisten */

/* Ohne Tab-Bar liegt die Leiste am unteren Fensterrand. */
.auswahlleiste { bottom: 16px; }

/* Mehr Platz, mehr Kacheln. Der Abstand darf groesser sein als auf dem
   Handy, dort klebt das Raster bewusst am Rand. */
.raster {
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    padding: 16px 0 24px;
}
.raster__kachel { border-radius: 8px; }

/* AP4 Teil H: /bilder hat keine eigene Entwurfs-Ansicht fuer den
   Desktop, die Kopfzeile lag deshalb bisher auf einer weissen Flaeche
   (.tagesgruppe__kopf setzt --card), das Raster darunter auf dem
   geerbten --paper von .app (derselbe Fehler wie Teil G). Ausgerichtet
   an der Formensprache der uebrigen Listen: ein duenner Rahmen statt
   eines Schattens (CLAUDE.md, "keine Verlaeufe/Schatten"), wie bei
   .dokumente, Kopf und Raster in einer Karte je Tag. Ein eigener
   Rahmen um die Tagesgruppen (.fotostrom, siehe gallery/index.html.twig)
   haelt das an /bilder fest, Timeline und Suche behalten ihre
   bisherige, bereits weisse Flaeche unangetastet. */
.fotostrom { display: flex; flex-direction: column; gap: var(--s-5); }
.fotostrom .tagesgruppe {
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.fotostrom .tagesgruppe__kopf { border-top: none; margin-top: 0; padding: var(--s-4) var(--s-5) var(--s-3); }
.fotostrom .raster { padding: 0 var(--s-5) var(--s-5); }

.ordnerliste { margin-top: 20px; }

.app__spalte--extern .raster {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 20px 0 0;
}
.app__spalte--extern .raster__kachel { border-radius: 8px; }

/* ------------------------------------------------------ Zwei Spalten */

/* Kontakte: links die Liste, rechts das Detail. Beide Spalten scrollen
   fuer sich, damit die Liste beim Lesen stehen bleibt. */
.zweispalt { display: flex; height: 100%; align-items: stretch; }
/* AP4 Teil G: weiss ausdruecklich gesetzt statt von --paper geerbt
   (derselbe Fehler wie vorher bei .dateien-baum/.dateien-liste). */
.zweispalt__liste {
    width: 340px; flex-shrink: 0;
    background: var(--card);
    border-right: 1px solid var(--line-soft);
    overflow-y: auto;
    padding: 44px 0 32px;
}
.zweispalt__kopf { padding: 0 24px 16px; }
.zweispalt__liste .row { padding: 12px 24px; border-bottom: none; }
.zweispalt__liste .row.is-active { background: var(--well); }
.zweispalt__detail {
    display: block; flex: 1; min-width: 0;
    background: var(--card);
    overflow-y: auto;
    padding: 44px 40px 64px;
}
/* Der Inhalt bleibt lesbar breit, auch wenn die Spalte es nicht ist. */
.zweispalt__detail > * { max-width: 640px; }

/* Dateien (AP4 Teil C Punkt 2 und 3, Entwurf Zeile 705 ff.): vier
   Spalten in einer Reihe (Navigation, Ordner, Liste, Vorschau), keine
   Luecke dazwischen, nur die Trennlinie: der Entwurf zeichnet die
   Kanten mit border-right, nicht mit einem Abstand. .bereich traegt
   das Ziehen und Kontextmenue schon, das Kontextmenue selbst bleibt
   ausserhalb der Spalten. */
.bereich,
.bereich--dateien {
    display: flex; align-items: stretch; height: 100%; gap: 0;
    /* Setzt die weisse Flaeche der Handy-Nacharbeit (Punkt 1) wieder
       zurueck: .dateien-baum/.dateien-liste sind ab hier echte Boxen
       (display: block weiter unten), die order-Regeln der Handy-Karte
       greifen dort ohnehin nicht mehr, siehe Kommentar dort. */
    flex-direction: row; margin-top: 0; background: none; border-radius: 0;
}
.dateien-baum {
    display: block;
    width: 260px; flex-shrink: 0;
    padding: 20px 12px;
    background: var(--card);
    border-right: 1px solid var(--line-soft);
}

/* Am Handy zeigt die Baumspalte nur die Unterordner der aktuellen
   Ebene, wie schon vor AP4 Teil C Punkt 3. Ab 1024px uebernimmt
   .dateien-baum__desktop (per .nur-desktop bereits sichtbar), diese
   Liste faellt dort weg, sonst stuende die aktuelle Ebene doppelt da. */
.dateien-baum__mobil { display: none; }
.dateien-baum__desktop .section-label {
    font: 500 10px var(--mono); letter-spacing: 0.08em;
    color: var(--ink-3);
    margin: 0 10px 8px; padding: 0;
}
.dateien-baum__leer { padding: 0 10px; color: var(--ink-3); font-size: 13px; }

.ordnerbaum { display: flex; flex-direction: column; }
.ordnerbaum__zeile {
    display: flex; align-items: center; gap: 8px;
    height: 34px; padding: 0 10px;
    border-radius: var(--r-tile);
    color: var(--ink-2);
    font-size: 13px; font-weight: 500;
    text-decoration: none;
}
.ordnerbaum__zeile--unter {
    height: 32px;
    /* Tiefe 1 sitzt bei 26px (Entwurf), jede weitere Ebene der
       aufgeklappten Vorfahrenkette rueckt um denselben Schritt weiter
       ein. FolderContents::baum() liefert die Tiefe, hier nur die
       Rechnung dazu. */
    padding-left: calc(10px + var(--tiefe, 1) * 16px);
    border-radius: 0;
}
.ordnerbaum__zeile--oben.ist-aktiv {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}
.ordnerbaum__zeile--unter.ist-aktiv { color: var(--accent); }
.ordnerbaum__name {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ordnerbaum__zahl { font: 400 11px var(--mono); color: var(--ink-3); margin-left: auto; }
.ordnerbaum__zeile--oben.ist-aktiv .ordnerbaum__zahl { color: inherit; }

.dateien-liste {
    display: block;
    flex: 1; min-width: 0;
    /* Rundum 20px wie Brotkrume und Zeilen unter /dateien (12px Spalte
       plus 8px Kopf); vorher 44/40/64/20, damit stand /mails schief in
       seiner Karte (Browser-Befund 10.09.2026). */
    padding: 20px 20px 24px;
    background: var(--card);
    border-right: 1px solid var(--line-soft);
}
/* Unter /dateien gilt das Mass aus dem Entwurf (Innenabstand 12px 0,
   Brotkrume und Zeilen padden selbst mit 8px/20px bzw. 10px/20px), die
   Spalte braucht dafuer keinen eigenen Rand mehr, .dateien-liste--dateien
   setzt den obigen Rand deshalb komplett zurueck (eigener Wert je Seite,
   siehe Kommentar dort).
   Unter /mails traegt stattdessen der Rand der Spalte selbst die 20px
   links (Randkorrektur Punkt 1): die Zeilen padden dort nicht selbst
   (.row nutzt --pad-x, das ist am Desktop 0), Brotkrume, Einleitung,
   Mailzeilen und Leerzustand ruecken darum ohne eigene Regel gemeinsam
   ein, ohne doppelt einzuruecken. */
.dateien-liste--dateien { padding: 12px 0; }
.dateien-liste--dateien .page-head { padding: 8px 20px; }

/* Der lange Einleitungssatz an der Wurzel faltete sich sonst unter
   "Alle Dateien" und liess den Anlegen-Knopf frei schweben (Befund 4):
   er steht deshalb fuer sich in .dateien-einleitung statt in der
   Brotkrume (die seit der Handy-Nacharbeit ohnehin nicht mehr umbricht,
   siehe .brotkrume weiter oben). Gilt fuer /mails mit. */
.dateien-einleitung { padding: 0 0 8px; font-size: 13px; color: var(--ink-3); }
.dateien-liste--dateien .dateien-einleitung { padding: 0 20px 10px; }

.dateien-zeilen-mobil { display: none; }
.dateien-zeile {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 20px;
    color: inherit;
    text-decoration: none;
}
.dateien-zeile.ist-aktiv { background: var(--accent-soft); }
.dateien-zeile.ist-aktiv .icon-tile { background: var(--card); color: var(--accent); }
.dateien-zeile.ist-aktiv .dateien-zeile__name,
.dateien-zeile.ist-aktiv .dateien-zeile__meta { color: var(--accent); }
.dateien-zeile.ist-aktiv .dateien-zeile__name { font-weight: 600; }
.dateien-zeile__name {
    flex: 1; min-width: 0;
    font-size: 14px; font-weight: 500; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dateien-zeile__meta { font: 400 11px var(--mono); color: var(--ink-3); flex-shrink: 0; }
/* Das Kamerasymbol eines Bilds ohne Miniatur, siehe tokens.css
   (--icon-photo statt des Entwurfswerts, der auf --bg-photo unter
   3:1 liegt). Scoped statt an der geteilten .icon-tile--foto (die
   traegt auch die Timeline), --icon-photo ist wertgleich mit --ink-3,
   das dort schon greift. */
.dateien-zeile .icon-tile--foto,
.vorschaukarte__feld .icon-tile--foto { color: var(--icon-photo); }

/* Die Vorschauspalte, nur unter /dateien (Entwurf zeigt sie unter
   /mails nicht). */
.dateien-vorschau {
    width: 340px; flex-shrink: 0;
    background: var(--paper);
    padding: var(--s-5);
    overflow-y: auto;
}
.dateien-vorschau__leer { padding: var(--s-6) var(--s-3); color: var(--ink-3); font-size: 13px; text-align: center; }

/* Mails (Nutzerwunsch 26.10.2026, der Entwurf zeigt dort keine
   Detailspalte): Baum | Liste | Detail. Die Detailspalte ist die der
   Timeline (.timeline-detail samt Karte und ausgeblendetem Zurueck-Pfeil,
   siehe dort), hier mit eigenem Mass. Liste und Detail teilen sich den
   Rest nach dem Baum im Verhaeltnis 4:5, die Liste bleibt dabei zwischen
   320px und 460px (darunter laufen Tag und Metazeile ineinander).
   12px Innenrand, damit der Schatten der Karte nicht am Scrollrand
   abgeschnitten wird. Bis 1279px Fensterbreite wird der Baum schmaler,
   sonst bliebe der Detailspalte fast nichts. */
.bereich--mails .dateien-liste { flex: 4 1 0; min-width: 320px; max-width: 460px; }
.bereich--mails .timeline-detail { flex: 5 1 0; padding: var(--s-3); }
@media (max-width: 1279px) {
    .bereich--mails .dateien-baum { width: 200px; }
}
/* Die gewaehlte Mail (detailrahmen_controller.js setzt .is-aktiv): wie
   .timeline-liste .row--eintrag.is-aktiv. Rechts 12px Luft, sonst
   stuenden Tags und Rand der Markierung buendig. */
.bereich--mails .row--waehlbar { padding-right: var(--s-3); }
.bereich--mails .row--waehlbar.is-aktiv {
    background: var(--accent-soft);
    border-radius: var(--r-md);
}
.bereich--mails .row--waehlbar.is-aktiv .row__title { color: var(--accent); font-weight: 600; }
.vorschaukarte {
    background: var(--card);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    padding: 18px;
}
.vorschaukarte__feld {
    height: 150px;
    background: var(--well);
    border-radius: var(--r-md);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    overflow: hidden;
}
.vorschaukarte__feld img { width: 100%; height: 100%; object-fit: cover; }
.vorschaukarte__feld .icon-tile { width: 56px; height: 56px; }
.vorschaukarte__kuerzel {
    font: 600 12px var(--mono); color: var(--ink-3);
    border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: 3px 9px;
}
.vorschaukarte__titel { font-size: 15px; font-weight: 600; color: var(--ink); margin-top: 12px; }
.vorschaukarte__meta { font: 400 11px var(--mono); color: var(--ink-3); margin-top: 4px; }
.vorschaukarte__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.vorschaukarte__tag {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--line); border-radius: var(--r-pill);
    padding: 4px 11px;
    font-size: 12px; font-weight: 500; color: var(--ink);
}
.vorschaukarte__punkt { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--cat); }
.vorschaukarte__oeffnen { height: 40px; border-radius: 9px; font-size: 13px; margin-top: 14px; }

/* ----------------------------------------------- Aufnehmen Desktop */

/* Kein Geraet hat hier eine Kamera, die Ablagezone tritt an die Stelle
   des Ausloesers (AP4 Teil C Punkt 4, Entwurf Zeile 826 ff.). Solange
   noch nichts gesammelt ist, ist die Zone der ganze Bildschirm (im
   Inhaltsbereich horizontal UND vertikal zentriert); Sammlung,
   Ablegen-Knopf blenden erst mit dem ersten Foto ein. */
.ausloeser { display: none; }
form[data-controller='capture'] {
    display: flex;
    flex-direction: column;
    min-height: 60vh;
}
form[data-controller='capture']:not(:has(.streifen:not([hidden]))) {
    justify-content: center;
    align-items: center;
}
form[data-controller='capture'] .sammlung,
form[data-controller='capture'] .form-submit {
    display: none;
}
form[data-controller='capture']:has(.streifen:not([hidden])) .sammlung,
form[data-controller='capture']:has(.streifen:not([hidden])) .form-submit {
    display: block;
}
.dropzone {
    width: 640px;
    max-width: 100%;
    padding: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    border: 2px dashed var(--bd-dashed);
    border-radius: var(--r-lg);
    background: var(--card);
}
.dropzone--ueber { border-color: var(--accent); background: var(--accent-soft); }
.dropzone__kreis {
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
}
.dropzone__titel { font-size: 18px; font-weight: 600; }
.dropzone__text { font-size: 13px; color: var(--ink-2); margin: 0; }
/* Steht jetzt unter dem Kasten statt darin (Entwurf "Aufnehmen Desktop"
   Zeile 18): text-align kommt nicht mehr von .dropzone geerbt. */

/* /bilder: Fotos aus Fotos.app auf die Seite ziehen (Nutzerentscheid
   26.10.2026). Beim Ziehen deckt ein gestrichelter Rahmen die ganze Seite,
   16px vom Fensterrand, danach steht die Fortschrittszeile unten in der
   Mitte (assets/controllers/bildablage_controller.js). Beides nimmt dem
   Zeiger nichts weg: die Seite darunter bleibt bedienbar. */
.bildablage--ueber,
.bildablage--laeuft,
.bildablage--fehler {
    display: flex;
    position: fixed;
    z-index: 30;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-align: center;
    border-radius: var(--r-lg);
}
.bildablage--ueber {
    inset: 16px;
    font-size: 18px; font-weight: 600;
    color: var(--accent);
    border: 2px dashed var(--accent);
    background: color-mix(in srgb, var(--accent-soft) 92%, transparent);
}
.bildablage--laeuft,
.bildablage--fehler {
    left: 50%; bottom: 16px;
    transform: translateX(-50%);
    max-width: calc(100% - 32px);
    padding: 12px 20px;
    font-size: 14px; font-weight: 500;
    background: var(--card);
    border: 1px solid var(--line);
}
.bildablage--laeuft { color: var(--ink); }
.bildablage--fehler { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-bd); }

/* Suche: links die Treffer, rechts das Eingrenzen (Entwurf, AP3 Teil B).
   Gleiches Muster wie .zweispalt, nur die schmale Spalte rechts statt
   links und ohne aktive Zeile. */
.suche-layout { display: flex; height: 100%; align-items: stretch; }
.suche-inhalt {
    flex: 1; min-width: 0;
    overflow-y: auto;
    /* Nacharbeit Suche Desktop Punkt 2: 24px 28px statt 44px 40px, die
       Trefferspalte sass sonst zu weit vom Filter weg. */
    padding: 24px 28px;
}
.suche-inhalt > * { max-width: 720px; }
/* AP4 Teil F (Entwurf "Suche Desktop" Zeile 40): weisser Grund, sonst
   erbt die Spalte --paper von .app und die Luecke zur Trefferspalte
   sieht aus wie ein Fehler statt wie zwei Spalten. */
.suche-filter {
    width: 280px; flex-shrink: 0;
    border-left: 1px solid var(--line-soft);
    background: var(--card);
    overflow-y: auto;
    /* Nacharbeit Suche Desktop Punkt 6: 24px 20px statt 44px/20px/32px. */
    padding: 24px var(--s-5);
}
.suche-filter__label {
    font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: var(--s-3);
}
.suche-filter__gruppe { font-size: var(--t-sm); font-weight: 600; margin: var(--s-5) 0 var(--s-2); }
.suche-filter__gruppe:first-of-type { margin-top: 0; }
/* AP4 Teil E (Entwurf "Suche Desktop" Zeile 44-58): dieselben 32px wie
   bei der Timeline-Filterleiste, siehe Begruendung dort. */
.suche-filter .chip { height: var(--h-chip-desktop); padding: 0 var(--s-3); font-size: var(--t-xs); font-weight: 500; }
.chip__punkt { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-right: 2px; }

/* Nacharbeit Suche Desktop Punkt 3: Gegenstueck zu .suche
   .abschnitt-kopf/.abschnitt weiter oben (dort die Handy-Masse). */
.suche-inhalt .abschnitt-kopf { padding-top: 0; padding-bottom: 0; }
.suche-inhalt .abschnitt-kopf--zweite {
    padding-top: 0;
    margin-top: 28px;
    border-top: none;
}
.suche-inhalt .abschnitt { font-size: 14px; }

/* Nacharbeit Suche Desktop Punkt 4: eine weisse Karte statt einzelner
   Zeilen. Der Schatten kommt aus --shadow-card (Entwurf "Suche
   Desktop" Zeile 24: identische Werte), obwohl CLAUDE.md fuer die UI
   "keine Schatten" vorgibt; derselbe Token traegt schon andere Karten
   in der App (z.B. .row--eintrag--hervorgehoben), im Bericht genannt. */
.suche-treffer {
    background: var(--card);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    margin-top: 10px;
    overflow: hidden;
}
.suche-treffer__zeile {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-soft);
}
.suche-treffer__zeile:hover { background: var(--paper); }
.suche-treffer__zeile:last-child { border-bottom: none; }
.suche-treffer .icon-tile { width: 40px; height: 40px; }
.suche-treffer .icon-tile svg { width: 16px; height: 16px; }
.suche-treffer__titel { font-size: 14px; }
.suche-treffer__meta { font-size: 11px; }

/* Nacharbeit Suche Desktop Punkt 5: 12px/18px/12px statt der 20px/24px
   von .suche-leer am Handy, Radius 12px statt --r-lg (14px). */
.suche-inhalt .suche-leer {
    margin: 10px 0 0;
    padding: 18px 20px;
    border-radius: 12px;
}

/* -------------------------------------------------------------- Sheet */

/* Aus dem Bottom-Sheet wird ein Dialog in der Mitte. */
.sheet {
    max-width: 560px;
    max-height: 82vh;
    margin: auto;
    border-radius: var(--r-sheet);
}
.sheet__flaeche { max-height: 82vh; }
.sheet__griff { display: none; }
.sheet__kopf { padding: 22px 26px 14px; }
.sheet__inhalt { padding: 16px 26px; }
.sheet__fuss { padding: 14px 26px 20px; }

/* --------------------------------------------------- Unsortiert Desktop */

/* AP.. Punkt A (Entwurf "Unsortiert Desktop"): Liste und Karte stehen
   nebeneinander statt der Liste allein mit einem Sheet darueber.
   .unsortiert-spalte macht aus der Spalte selbst eine Flex-Spalte, damit
   .unsortiert-spalten die Hoehe unter dem Kopf ausfuellt (dasselbe
   Muster wie .timeline-layout, nur mit einem Kopf davor, den die
   Timeline nicht hat). */
/* Zusatzpunkt 4 (Koordinator, 10.09.2026): 100% waere hier 100% von
   .app__main (dessen echte Hoehe per Flex-Stretch von .app kommt), nicht
   "der Rest unter dem Kopf" - .app__main ist hier display:block (siehe
   dort) und stapelt .kopf (64px, height dort fest gesetzt) und diese
   Spalte im normalen Fluss uebereinander, height:100% zog die Spalte
   also 64px zu weit, .app__main (overflow-y:auto) schnitt genau das am
   unteren Rand ab. turbo-frame#zuordnen-karte (inbox/index.html.twig)
   mass sich in diesem instabilen Layout nie zuverlaessig als sichtbar,
   sein loading=lazy loeste deshalb nie aus (AppearanceObserver in
   assets/vendor/@hotwired/turbo/turbo.index.js nutzt einen
   IntersectionObserver ohne eigenen root/threshold - er braucht eine
   endgueltige, nicht mehr wackelnde Geometrie). calc() zieht die festen
   64px des Kopfs hier ab, .app__main bleibt unveraendert: das ist von
   anderen Bereichen mitgenutzt. */
.unsortiert-spalte { display: flex; flex-direction: column; height: calc(100% - 64px); }
.unsortiert-spalte > .unsortiert-kopf { flex: none; padding: var(--s-6) 40px var(--s-5); }
.unsortiert-spalte > .unsortiert-spalten { flex: 1; min-height: 0; }

.unsortiert-spalten { display: flex; align-items: stretch; }

.unsortiert-liste {
    width: 400px;
    flex-shrink: 0;
    padding: 16px 0;
    background: var(--card);
    border-right: 1px solid var(--line-soft);
    overflow-y: auto;
}
.unsortiert-liste .list { padding: 0; }
.unsortiert-liste__kopf {
    padding: 0 20px 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}

/* Zeilen: einheitliche Kachelgroesse, kein Trennstrich unten, kein
   Chevron. Die mobile Grosskarte (.row--eintrag--hervorgehoben) und die
   "DANACH"-Beschriftung sind Handy-Muster (AP4 Teil A Punkt 7) und
   entfallen hier zugunsten von .is-aktiv, das
   unsortiertkarte_controller.js beim Klick setzt. Eigene, engere Regeln
   statt .row--eintrag selbst zu aendern: die teilt sich die Inbox mit
   der Timeline (siehe deren Kommentar bei .timeline-liste weiter oben). */
.unsortiert-liste .row--eintrag,
.unsortiert-liste .row--eintrag--hervorgehoben {
    align-items: center;
    margin: var(--s-2) var(--s-3);
    padding: 12px 14px;
    min-height: 0;
    /* Alle vier Kanten: die geteilte Zeilenregel zieht sonst links, rechts
       und oben einen Rahmen, den der Entwurf an keiner Zeile zeigt. */
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.unsortiert-liste .unsortiert-danach { display: none; }
.unsortiert-liste .row--eintrag > svg:last-child { display: none; }

.unsortiert-liste .row--eintrag .icon-tile,
.unsortiert-liste .row--eintrag .icon-tile--gross {
    width: 40px;
    height: 40px;
    background: var(--accent-soft);
    color: var(--accent);
}
.unsortiert-liste .row--eintrag .row__title,
.unsortiert-liste .row--eintrag--hervorgehoben .row__title {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
}
.unsortiert-liste .row--eintrag .row__meta {
    font: 11px var(--mono);
    color: var(--ink-3);
    margin-top: 2px;
}

.unsortiert-liste .row--eintrag.is-aktiv {
    margin: 0 var(--s-3);
    background: var(--accent-soft);
    border-radius: var(--r-md);
}
.unsortiert-liste .row--eintrag.is-aktiv .icon-tile {
    background: var(--card);
    color: var(--accent);
}
.unsortiert-liste .row--eintrag.is-aktiv .row__title { color: var(--accent); font-weight: 600; }
.unsortiert-liste .row--eintrag.is-aktiv .row__meta { color: var(--accent); opacity: .8; }

.unsortiert-karte {
    flex: 1;
    min-width: 0;
    padding: var(--s-6) 28px;
    background: var(--paper);
    overflow-y: auto;
    box-sizing: border-box;
}
.unsortiert-karte__platzhalter { color: var(--ink-3); font-size: var(--t-sm); }

.unsortiert-karte__flaeche {
    max-width: 620px;
    padding: var(--s-6);
    background: var(--card);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
}
.unsortiert-karte__titel { font-size: 18px; font-weight: 600; color: var(--ink); }
.unsortiert-karte__meta { font: 12px var(--mono); color: var(--ink-3); margin-top: 4px; }
.unsortiert-karte__auszug {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--paper);
    border-radius: var(--r-md);
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-2);
}

/* "Tag wählen" in derselben mono/klein-Schrift wie die uebrigen
   Zwischenueberschriften des Entwurfs (z.B. .unsortiert-danach). Ueber
   .feld--tags statt .section-label allein: .sheet__inhalt teilt sich
   andere Sheets (Teilen, Ordner anlegen) mit eigenen, unabhaengigen
   section-labels, die davon unberuehrt bleiben sollen.
   Auf der Karte selbst gilt die mono Schrift dagegen fuer jedes Feld
   (Bericht Fundstelle 1: "dieselbe Sprache wie dem Rest der Karte"),
   deshalb dort ueber .feld statt nur .feld--tags. */
.sheet__inhalt .feld--tags .section-label,
.unsortiert-karte__flaeche .feld .section-label {
    font: 400 11px var(--mono);
    letter-spacing: normal;
    text-transform: uppercase;
    margin: 16px 0 8px;
    color: var(--ink-3);
}

.unsortiert-karte .chip--cat,
.unsortiert-karte .chip--kontakt { height: 40px; padding: 0 15px; }

.unsortiert-karte__fuss { display: flex; gap: 10px; margin-top: 20px; }
.unsortiert-karte__fuss .btn {
    height: var(--h-ctl);
    padding: 0 22px;
    border-radius: var(--r-md);
    font-size: 15px;
}
.unsortiert-karte__fuss .btn--ghost {
    padding: 0 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-2);
}

}

/* Dubletten. Die Gruppe ist eine gewoehnliche Liste, nur die Zeile
   traegt rechts ihren eigenen Knopf, und ein weggeworfenes Mitglied
   steht gedaempft da, damit sichtbar bleibt, wohin es gegangen ist. */
.dubletten .dublette + .dublette { margin-top: 16px; }
.dublette__zeile { align-items: flex-start; flex-wrap: wrap; }
.dublette__zeile .row__main { min-width: 100%; }
.dublette__zeile form { width: 100%; }
.dublette__zeile--weg { opacity: .55; }
/* 16px zur Linie, sonst klebt der Text an ihr. */
.dublette--zuletzt { border-left: 3px solid var(--ink-3); padding-left: 16px; }
.dublette-hinweis .row__meta { white-space: normal; }
/* F5 in docs/PLAN-MAILKETTE.md: die Begruendung einer Gruppe ueber den
   groben Schluessel, gleiche Schrift wie .row__meta, mit Abstand zur
   folgenden Liste. */
.dublette__grund { font-size: 13px; color: var(--ink-3); margin: 0 0 12px; }
.anhang-erkannt { white-space: normal; font-style: italic; }

/* Ab Desktop steht der Knopf neben der Zeile. Auf dem Handy braucht der
   Text die ganze Breite, sonst bleibt fuer den Dateinamen die Haelfte. */
@media (min-width: 1024px) {
    .dublette__zeile { flex-wrap: nowrap; }
    .dublette__zeile .row__main { min-width: 0; padding-right: 12px; }
    .dublette__zeile form { width: auto; flex-shrink: 0; }
}

/* ------------------------------------------------------------ Karten */

/* Am Desktop liegen die weissen Inhaltsbereiche als Karten auf --paper,
   12px voneinander und vom Rand, damit der Papierton dazwischen zu
   sehen bleibt (Nutzerbefund 10.09.2026, "mach es wie cards"). Dieselbe
   Form wie die Tagesgruppen unter /bilder: Rand --line-soft, Radius
   --r-lg, kein Schatten. Die Seitenleiste bleibt buendig, sie ist
   Navigation, kein Inhalt. Steht am Ende der Datei, damit es die
   Trennlinien der Spalten weiter oben ohne hoehere Spezifitaet ersetzt.
   .timeline-layout und .timeline-liste sind hier bewusst nicht mehr
   dabei (Tageskarten-Entwurf): die Timeline traegt ihre eigenen Karten
   jetzt direkt (.timeline-liste .tagesgruppe, siehe dort), keine einzelne
   Listenkarte mehr mit Rand um die ganze Spalte. */
@media (min-width: 1024px) {
    /* Die zentrierte Spalte: Listen, Formulare, Details, Beschriften.
       Seiten mit eigenen Karten nehmen sich per --frei aus. Die Breite
       laesst auch im schmalsten Fenster 12px Papier links und rechts. */
    .app__spalte:not(.app__spalte--voll, .app__spalte--schmal, .app__spalte--extern, .app__spalte--frei) {
        width: calc(100% - 24px);
        margin: 12px auto;
        padding: 32px 40px 40px;
        background: var(--card);
        border: 1px solid var(--line-soft);
        border-radius: var(--r-lg);
    }

    /* Spaltenansichten: genau die Hoehe unter dem Kopf (64px, siehe
       .kopf), sonst laege die untere Luecke unter dem Fensterrand. */
    .app__spalte--voll { height: calc(100% - 64px); }
    .bereich,
    .bereich--dateien,
    .zweispalt,
    .suche-layout,
    .unsortiert-spalten {
        gap: 12px;
        padding: 12px;
    }
    .dateien-baum,
    .dateien-liste,
    .zweispalt__liste,
    .zweispalt__detail,
    .suche-inhalt,
    .suche-filter,
    .unsortiert-liste {
        background: var(--card);
        border: 1px solid var(--line-soft);
        border-radius: var(--r-lg);
        overflow-y: auto;
    }
    /* Die Suche lag als ein weisses Blatt ueber beiden Spalten. Volle
       Hoehe, sonst endet .suche-layout (height 100%) mit dem Inhalt. */
    .page.suche { height: 100%; background: none; border-radius: 0; }

    /* Der Knopf "Wieder öffnen" stiess ohne Luecke an den Plus-Knopf
       von "Dazu gehört" darunter (Browser-Befund /vorgaenge/1). */
    .vorgang__schalter { padding-bottom: 16px; }

    /* Das Dokument ist schon eine Karte, jetzt ringsum gerundet. Der
       Entwurf "Timeline Desktop" (Zeile 77) zeichnet sie mit Schatten
       statt Rand, anders als die uebrigen Karten in diesem Block. */
    .dokument-flaeche {
        box-shadow: var(--shadow-card);
        border-radius: var(--r-lg);
    }

    /* Detailspalte der Timeline: was dort geladen wird (Dokument, Mail,
       Notiz, Fotostapel), liegt auf einer weissen Karte wie im Entwurf
       "Timeline Desktop". Die Karte ist der Rahmen selbst, damit jede
       Inhaltsart sie bekommt; nur der Platzhalter vor der ersten Wahl
       bleibt auf dem Papier (Nutzerbefund 10.09.2026). Das Dokument
       bringt seine Karte schon mit und legt sie hier ab, sonst stuende
       Karte in Karte. */
    .timeline-detail > turbo-frame#detail:not(:has(> .timeline-detail__platzhalter)) {
        display: block;
        padding: 24px;
        background: var(--card);
        border-radius: var(--r-lg);
        box-shadow: var(--shadow-card);
    }
    .timeline-detail .dokument-flaeche { padding: 0; box-shadow: none; border-radius: 0; }

    /* Beschriften: der Kopf rueckte mit 20px Seitenrand 15px weiter ein
       als Fotos und Felder darunter (Browser-Befund /capture/1). */
    .beschriften-kopf { padding-left: 0; padding-right: 0; }
}