/*
 * Fallverwaltung -- Gestaltung.
 *
 * Handgeschriebenes CSS ohne Framework und ohne Build-Schritt: eine Datei,
 * die sich lesen und aendern laesst, ohne erst eine Werkzeugkette zu
 * installieren.
 *
 * Die Farben stehen nicht hier, sondern in `farben.css`. Diese Tafel gilt
 * auch fuer die Stammdatenverwaltung (`verwaltung.css`), damit eine
 * Farbaenderung an genau einer Stelle geschieht. `basis.html` bindet die
 * Tafel vor dieser Datei ein.
 *
 * Umbruchbreiten -- genau zwei; die @media-Bloecke stehen beim jeweiligen
 * Baustein:
 *   640px   Handy: Seitenrahmen, Formulare, Zeilen untereinander, Tabellen
 *           als Karten, Klappen (Gegenstueck: min-width 641px; dieselbe
 *           Grenze in klappen.js, erinnerungen.js, kalender_handy.js)
 *   1140px  Hauptmenue hinter dem Menueknopf, schmale Raster (Gegenstueck:
 *           min-width 1141px)
 *
 * Druck: alle @media-print-Regeln stehen in EINEM Block am Dateiende --
 * dort schlagen sie jede Bildschirmregel gleicher Spezifitaet.
 */

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

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

/* Einstellung "Grosse Schrift" im Benutzerkonto: der Koordinator setzt die
   Klasse in basis.html aus user.darstellung. 125 % = 20px Grundschrift,
   alles in rem waechst mit. */
html.darstellung-gross {
  font-size: 125%;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  /* 1rem = 16px (oder mehr bei "Grosse Schrift"). Keine Schrift der
     Anwendung liegt darunter. Mindestens 16px
     verhindert auch, dass iOS beim Fokus in ein Eingabefeld hineinzoomt. */
  font-size: 1rem;
  line-height: 1.5;
}

a {
  color: var(--akzent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

h1,
h2,
h3 {
  line-height: 1.25;
  margin: 0 0 0.6rem;
  font-weight: 600;
}

h1 {
  font-size: 1.45rem;
}
h2 {
  font-size: 1.15rem;
}
h3 {
  font-size: 1rem;
}

/* -------------------------------------------------- Kopf und Navigation */

.kopf {
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
  position: sticky;
  top: 0;
  z-index: 20;
  transition: transform 0.2s ease;
}
/* Beim Herunterrollen auf breiten Bildschirmen aus dem Bild (oberflaeche.js). */
@media (min-width: 1141px) {
  .kopf.kopf-weg {
    transform: translateY(-100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .kopf {
    transition: none;
  }
}

/* Der Kopf darf breiter sein als der Inhalt: Marke und volle Menueleiste
   brauchen rund 1330px und passten in --breite nie in eine Zeile.
   position: relative ist der Bezugspunkt der Verwaltungstafel (unten). */
.kopf-innen {
  position: relative;
  max-width: max(var(--breite), 86rem);
  margin: 0 auto;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.marke {
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.marke span {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-gedaempft);
}

.navigation {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  margin-left: auto;
  align-items: center;
}

/* 0.5rem seitlich statt 0.7rem: so passt die Lupe ab 1200px Breite noch in
   die Menuezeile, statt allein in eine dritte Zeile zu rutschen. */
.navigation a,
.navigation button {
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  font-size: 1rem;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

.navigation a:hover,
.navigation button:hover {
  background: var(--flaeche-gedaempft);
}

.navigation a[aria-current="page"] {
  background: var(--akzent-schwach);
  color: var(--akzent);
  font-weight: 600;
}

/* Ausklappbarer Menuepunkt "Sonstiges" */
.untermenu {
  position: relative;
}

.untermenu > summary {
  list-style: none;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius);
  font-size: 1rem;
  cursor: pointer;
  user-select: none;
}

.untermenu > summary::-webkit-details-marker {
  display: none;
}

.untermenu > summary::after {
  content: " ▾";
  font-size: 1em;
}

.untermenu > summary:hover,
.untermenu[open] > summary {
  background: var(--flaeche-gedaempft);
}

.untermenu > summary.aktiv {
  background: var(--akzent-schwach);
  color: var(--akzent);
  font-weight: 600;
}

.untermenu-liste {
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  min-width: 11rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.35rem;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  z-index: 20;
  /* Kein Untermenue darf ueber den unteren Bildschirmrand hinaus: Der Kopf
     bleibt oben stehen, und was darunter haengt, rollt nicht mit der Seite --
     ein zu langes Menue war unten unerreichbar. Es rollt deshalb in sich selbst.
     --kopf-unten misst oberflaeche.js (Unterkante des Kopfs). */
  max-height: calc(100vh - var(--kopf-unten, 5rem) - 1rem);
  max-height: calc(100dvh - var(--kopf-unten, 5rem) - 1rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.untermenu-trenner {
  border: 0;
  border-top: 1px solid var(--rand);
  margin: 0.25rem 0;
}

/* Zwischentitel in einer Menuegruppe (Verwaltung: Buero, Arbeitsweise, ...) */
.untermenu-titel {
  padding: 0.45rem 0.7rem 0.1rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-gedaempft);
}

.untermenu-titel:first-child {
  padding-top: 0.2rem;
}

/* Die Verwaltung als Tafel: Spalten ueber die volle Breite des Kopfs statt
   einer Liste mit gut zwanzig Zeilen. Bezugspunkt ist .kopf-innen, nicht der
   Menuepunkt -- sonst ragte die Tafel links aus dem Bild, wenn der Punkt
   weit links steht. */
.untermenu-tafel {
  position: static;
}
.untermenu-tafel > .untermenu-liste {
  left: 1rem;
  right: 1rem;
  top: calc(100% - 0.25rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.25rem 1rem;
  padding: 0.5rem 0.75rem 0.75rem;
}
.untermenu-spalte {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.untermenu-liste .abmeldeform {
  display: block;
}

.untermenu-liste .abmeldeform button {
  width: 100%;
  text-align: left;
}

/* Der Lupenknopf ganz rechts im Kopf. Oeffnet das Suchfenster; ohne
   Skript ist er ein Verweis auf die Suchseite.

   Er steht als erster Eintrag in der Navigation (damit er auf dem Handy
   zuoberst im Menue landet) und wird hier mit "order" wieder ans rechte
   Ende der Leiste gesetzt. */
.suchknopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid var(--rand-stark);
  background: var(--flaeche-gedaempft);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.suchknopf:hover,
.suchknopf:focus-visible {
  background: var(--akzent-schwach);
  border-color: var(--akzent);
  color: var(--akzent);
  outline: none;
}

/* In der Navigation gelten die Regeln fuer ".navigation a" -- sie sind
   staerker als ".suchknopf" und wuerden den runden Knopf einebnen.
   Deshalb hier zurueckgenommen. */
.navigation .suchknopf {
  order: 99;
  margin-left: 0.75rem;
  padding: 0;
  border: 1px solid var(--rand-stark);
  border-radius: 999px;
  background: var(--flaeche-gedaempft);
}

.navigation .suchknopf:hover,
.navigation .suchknopf:focus-visible {
  background: var(--akzent-schwach);
  border-color: var(--akzent);
  color: var(--akzent);
}

/* Das Suchfeld im Kopf: nur auf breiten Bildschirmen, dort statt der Lupe.
   Es steht in einer eigenen Zeile mittig unter dem Hauptmenue; den Umbruch
   davor erzwingt ein leeres Element ueber die volle Breite. */
.kopfsuche {
  display: none;
}
@media (min-width: 1141px) {
  .navigation .suchknopf {
    display: none;
  }
  .navigation::after {
    content: "";
    order: 98;
    flex-basis: 100%;
    height: 0;
  }
  .kopfsuche {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    order: 99;
    flex: 0 1 30rem;
    margin: 0.2rem auto 0;
    padding: 0 0.75rem;
    border: 1px solid var(--rand-stark);
    border-radius: 999px;
    background: var(--flaeche-gedaempft);
    color: var(--text-gedaempft);
  }
  .kopfsuche:focus-within {
    border-color: var(--akzent);
    background: var(--flaeche);
    color: var(--akzent);
  }
  .navigation .kopfsuche input {
    flex: 1;
    min-width: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    color: var(--text);
    font: inherit;
    padding: 0.5rem 0;
    outline: none;
  }
}

/* Die Aufschrift des Knopfes. In der breiten Leiste traegt die Lupe allein,
   die Aufschrift bleibt fuer Vorleser da -- sie ist der Name des Knopfes.
   Auf dem Handy wird sie sichtbar (siehe Handy-Abschnitt). */
.suchknopf-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Das Suchfenster: oben im Bild, breit, mit grossem Eingabefeld. */
.suchdialog {
  border: 1px solid var(--rand);
  border-radius: 12px;
  background: var(--flaeche);
  color: var(--text);
  padding: 0;
  width: min(94vw, 40rem);
  margin: 12vh auto 0;
  box-shadow: 0 14px 48px rgba(0, 0, 0, 0.35);
}

.suchdialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.suchdialog-form {
  display: flex;
  flex-direction: column;
}

.suchdialog-feld {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem 0.6rem 1rem;
  border-bottom: 1px solid var(--rand);
  color: var(--text-gedaempft);
}

.suchdialog-feld input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 1.15rem;
  padding: 0.45rem 0;
  outline: none;
}

.suchdialog-feld input::-webkit-search-cancel-button {
  cursor: pointer;
}

.suchdialog-schliessen {
  border: 0;
  background: none;
  color: var(--text-gedaempft);
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  cursor: pointer;
}

.suchdialog-schliessen:hover,
.suchdialog-schliessen:focus-visible {
  background: var(--flaeche-gedaempft);
  color: var(--text);
}

.suchdialog-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 1rem 0.75rem;
  flex-wrap: wrap;
}

.suchdialog-fuss .hilfetext {
  margin: 0;
  flex: 1 1 16rem;
}

.suchdialog-knoepfe {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-left: auto;
}

/* "Suchen" steht im Formular zuerst (Eingabetaste), sichtbar aber rechts. */
.suchdialog-knoepfe .knopf.wichtig {
  order: 2;
}

@media (max-width: 640px) {
  .suchdialog {
    margin-top: 4vh;
  }
  .suchdialog-feld input {
    font-size: 1.05rem;
  }
  .suchdialog-knoepfe {
    width: 100%;
  }
  .suchdialog-knoepfe .knopf {
    flex: 1;
    justify-content: center;
  }
}

.abmeldeform {
  display: inline;
}

/* Der Hamburger-Knopf: auf breiten Bildschirmen unsichtbar, auf schmalen
   klappt er die Navigation auf und zu. Ein echter Knopf (aria-expanded,
   aria-controls) statt einer Checkbox -- oberflaeche.js schaltet
   .navigation.offen. */
.menue-knopf {
  display: none;
  margin-left: auto;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: inherit;
  font: inherit;
  cursor: pointer;
  user-select: none;
  font-size: 1rem;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.4rem;
}

.menue-knopf:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
}

.menue-knopf[aria-expanded="true"] {
  background: var(--akzent-schwach);
  color: var(--akzent);
  border-color: var(--akzent);
}

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

main {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 1.25rem 1rem 4rem;
}

/* Eingangskorb auf grossen Bildschirmen fast in voller Breite: Schreiben und
   Sortiertisch stehen dann gross nebeneinander. Die uebrigen Seiten bleiben
   beim gewohnten Mass. */
@media (min-width: 1141px) {
  body.seite-breit {
    --breite: calc(100vw - 4rem);
  }
}

.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  box-shadow: var(--schatten);
}

.karte > h2:first-child,
.karte > h3:first-child {
  margin-top: 0;
}

.raster {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.kopfzeile {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

/* Ueberschrift und die Handlungen, die dort immer gebraucht werden. */
.titelzeile {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}

.titelzeile h1,
.titelzeile h2 {
  margin: 0;
}

/* Wo viele Schaltflaechen im Kopf stehen, ruecken sie in zwei Zeilen: die
   staendig gebrauchte allein nach oben rechts, alles Weitere darunter.
   Sonst rutscht sie beim Umbruch ans untere Ende und ist am schwersten zu
   finden, obwohl sie am haeufigsten gebraucht wird. */
.kopfwerkzeuge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.kopfwerkzeuge .werkzeuge {
  justify-content: flex-end;
}

/* Die Dateiansicht: der Rahmen fuellt den Bildschirm, damit ein Bescheid
   ohne Scrollen lesbar ist. Die Hoehe in vh und nicht in Pixeln -- ein
   Notebook hat weniger Platz als der Bildschirm am Schreibtisch. */
.dateiansicht {
  padding: 0.4rem;
}

.dateiansicht iframe {
  width: 100%;
  height: 78vh;
  min-height: 320px;
  border: 0;
  display: block;
  background: var(--flaeche-gedaempft);
}

.dateiansicht img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* PDF-Seiten als Bilder (js/dateiansicht.js): eine unter der anderen, wie
   ein Stapel Papier. */
.dateiansicht .seitenbilder img {
  width: 100%;
  max-width: 60rem;
  margin: 0 auto 0.6rem;
  border: 1px solid var(--rand);
  background: #fff;
}

.dateiansicht-hilfe {
  margin: 0.5rem 0 0;
}

/* Reiter Finanzen: Reihenfolge der Zeilen (js/sortieren.js, finanzen:sortieren). */
.sortierknoepfe {
  display: inline-flex;
  gap: 0.15rem;
  margin: 0;
}

.sortierknoepfe .knopf {
  padding: 0.1rem 0.45rem;
  min-height: 1.9rem;
  line-height: 1.2;
}

.sortierknoepfe .knopf[disabled] {
  opacity: 0.6;
  cursor: default;
}

.sortierhinweis {
  margin: 0 0 0.5rem;
}

[data-sortier-pk][draggable="true"] {
  cursor: grab;
}

[data-sortier-pk].wird-gezogen {
  opacity: 0.5;
}

/* Die Entwurfsleiste ueber dem Antwortfeld. Der Entwurf steht als Vorschau
   darin -- vorformatiert, damit Absaetze so aussehen, wie sie ankommen.
   Dieselbe Darstellung gilt fuer die Entwuerfe im Berichtseditor. */
.entwurfsleiste .entwurf-text,
.entwurf-text {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--flaeche-gedaempft);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 0.7rem;
  margin: 0.3rem 0 0.7rem;
  font: inherit;
}

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

/* ---------------------------------------------------------- Schaltflächen */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--rand-stark);
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.knopf:hover {
  background: var(--flaeche-gedaempft);
}

.knopf.wichtig {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--akzent-text);
  font-weight: 600;
}

.knopf.wichtig:hover {
  filter: brightness(1.08);
}

/* Auf dem Handy darf ein langer Knopftext umbrechen. Mit nowrap schoebe er
   die ganze Seite nach rechts, und dann liesse sich jede Seite seitlich
   wegziehen (etwa "Zum Protokoll — filtern und als Datei ausgeben"). */
@media (max-width: 640px) {
  .knopf {
    white-space: normal;
    max-width: 100%;
  }
}

.knopf.gefahr {
  color: var(--fehler);
  border-color: var(--fehler);
}

.knopf.klein {
  padding: 0.28rem 0.55rem;
  font-size: 1rem;
}

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

.formularzeile {
  margin-bottom: 0.9rem;
}

.formularzeile > label,
.feldgruppe > legend {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.25rem;
}

/* Abschnitte in langen Formularen. Der Strich oben trennt, ohne einen
   Kasten um jeden Abschnitt zu ziehen -- der Bogen bleibt ein Bogen. */
.formularabschnitt {
  border: 0;
  border-top: 1px solid var(--rand);
  padding: 1rem 0 0 0;
  margin: 0 0 0.4rem 0;
}

.formularabschnitt:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.formularabschnitt > legend {
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.formularabschnitt > .abschnittshinweis {
  margin: 0.1rem 0 0.8rem 0;
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="tel"],
input[type="file"],
select,
textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
}

textarea {
  resize: vertical;
  min-height: 4.5rem;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.knopf:focus-visible,
a:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 1px;
}

.hilfetext {
  display: block;
  font-size: 1rem;
  color: var(--text-gedaempft);
  margin-top: 0.25rem;
}

.feldfehler {
  color: var(--fehler);
  font-size: 1rem;
  margin-top: 0.25rem;
}

.formularzeile.hat-fehler input,
.formularzeile.hat-fehler select,
.formularzeile.hat-fehler textarea {
  border-color: var(--fehler);
}

/* Eine beanstandete Zeile in einer Erfassungstabelle (Betreuungen
   nachtragen). Der Grund steht in der Zeile; die Faerbung sorgt nur
   dafuer, dass man sie in zwanzig Zeilen ueberhaupt findet. */
tr.zeile-beanstandet > td {
  background: var(--fehler-flaeche);
}

.ankreuzzeile {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.ankreuzzeile input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.2rem;
  flex: none;
}

.ankreuzzeile label {
  font-weight: 400;
  color: var(--text);
  margin: 0;
}

.mehrfachauswahl ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.3rem 1rem;
}

.mehrfachauswahl li label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 400;
  color: var(--text);
}

.mehrfachauswahl input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
}

.formularaktionen {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rand);
}

.filterleiste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.75rem;
  align-items: end;
}

/* Klientenliste: vier Filter und die Knoepfe in einer Reihe, "Suchen"
   buendig hinter dem letzten Filter (Wunsch des Bueros). */
.klientenfilter .werkzeuge {
  flex-wrap: nowrap;
}
@media (min-width: 1141px) {
  .klientenfilter {
    grid-template-columns: minmax(200px, 2fr) repeat(3, minmax(140px, 1fr)) auto;
  }
}

/* Vorschlaege unter den Suchfeldern (vorschlaege.js). Die Liste haengt am
   Ende der Seite bzw. im Suchfenster; Lage und Breite setzt das Skript. */
.vorschlagsliste {
  position: absolute;
  z-index: 60;
  max-height: 22rem;
  overflow-y: auto;
  margin: 0.2rem 0 0;
  padding: 0.25rem 0;
  list-style: none;
  text-align: left;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.vorschlagsliste .hilfetext {
  display: block;
  margin: 0;
}
.vorschlagsliste a {
  display: block;
  padding: 0.35rem 0.7rem;
  text-decoration: none;
}
.vorschlagsliste a:hover,
.vorschlagsliste li[aria-selected="true"] a {
  background: var(--grund);
}

/* Pruefliste vor dem Absenden eines Berichts (berichte/bericht.html). */
.pruefliste .ankreuzliste {
  list-style: none;
  margin: 0.4rem 0;
  padding: 0;
}
.pruefliste .ankreuzliste li {
  margin: 0.35rem 0;
}

/* Angebot des Aktenanlage-Assistenten und seine Abschlussliste. */
.angebot {
  border-left: 3px solid var(--akzent);
}
.angebot p {
  margin: 0 0 0.5rem;
}
.angebot .werkzeuge {
  align-items: center;
}
.angebot .werkzeuge form {
  display: inline;
  margin: 0;
}
.vorschlagsschritte {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vorschlagsschritte li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  margin: 0.45rem 0;
}
.vorschlagsschritte .hilfetext {
  flex: 1 1 18rem;
  margin: 0;
}

/* Wegweiser durch einen Ablauf (teile/wegweiser.html). */
.wegweiser-schritte {
  list-style: none;
  counter-reset: wegweiser;
  margin: 0.4rem 0 0.8rem;
  padding: 0;
}
.wegweiser-schritte li {
  counter-increment: wegweiser;
  padding: 0.45rem 0 0.45rem 2.2rem;
  position: relative;
  border-top: 1px solid var(--rand);
}
.wegweiser-schritte li::before {
  content: counter(wegweiser);
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  border: 1px solid var(--rand-stark);
  display: grid;
  place-items: center;
}
.wegweiser-schritte li.erledigt::before {
  content: "✓";
  background: var(--erfolg-flaeche);
  color: var(--erfolg);
  border-color: transparent;
}
.wegweiser-schritte li.aktuell::before {
  border-color: var(--akzent);
  color: var(--akzent);
  font-weight: 600;
}
.wegweiser-schritte .hilfetext {
  margin: 0.15rem 0 0.35rem;
}
.wegweiser-aus {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* Kasten „Als Nächstes“ oben im Wegweiser der Rechnungslegung:
   der erste offene Schritt, sein Grund und genau ein Knopf. */
.alsnaechstes {
  border-left: 4px solid var(--akzent);
  background: var(--akzent-schwach);
  padding: 0.8rem 1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 1rem;
}
.alsnaechstes .alsnaechstes-kopf {
  margin: 0;
  font-weight: 600;
}
.alsnaechstes h2 {
  margin: 0.2rem 0 0.35rem;
}
.alsnaechstes p {
  margin: 0.25rem 0 0.5rem;
}
.alsnaechstes .alsnaechstes-laeuft {
  margin-bottom: 0;
}

/* Karte „Stände“ (Sammeleingabe aller Anfangs- und Endstände). */
.staendetabelle input[type="text"] {
  text-align: right;
  width: 11rem;
  max-width: 100%;
}
.staendetabelle details {
  margin-top: 0.3rem;
}
.staendetabelle details input[type="text"],
.staendetabelle details select {
  width: 100%;
  text-align: left;
}
.staendetabelle details label {
  display: block;
  margin-top: 0.3rem;
}
.rechenprobe {
  border-left: 3px solid var(--rand-stark);
  padding-left: 0.6rem;
  margin: 0.4rem 0;
}

/* Hinweise zum Zeitraum (Karte „Zeitraum“ und Formular). */
.zeitraumhinweis {
  margin: 0.35rem 0;
}
.zeitraumhinweis form {
  display: inline;
}
.zeitraumknoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.4rem 0 0.8rem;
}

/* Umsaetze im Zeitraum: Abruf fuer alle Konten, sichere Umsaetze. */
.umsatzabruf,
.karte > .sicher-kasten {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rand);
}
.abrufformular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0.4rem 0 0.8rem;
}
.abrufformular input[type="text"] {
  width: 9rem;
  max-width: 100%;
}
.umsatzweg .hilfetext {
  display: block;
  margin-top: 0.25rem;
}
.umsatzweg .umsatz-warnung {
  border-left: 3px solid var(--warnung);
  padding-left: 0.5rem;
}
.stand-angebot {
  margin: 0.5rem 0;
}

/* --------------------------------------------------------------- Tabellen */

.tabellenrahmen {
  overflow-x: auto;
}

/* Knoepfe am Zeilenende (Bearbeiten, Loeschen) bleiben nebeneinander. */
td.zeilenwerkzeuge {
  white-space: nowrap;
  text-align: right;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}

th,
td {
  text-align: left;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--rand);
  vertical-align: top;
}

th {
  font-size: 1rem;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}

tbody tr:hover {
  background: var(--flaeche-gedaempft);
}

td.zahl,
th.zahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------- Beschreibungslisten */

.angaben {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: 0.35rem 1rem;
  margin: 0;
  font-size: 1rem;
}

.angaben dt {
  color: var(--text-gedaempft);
  font-size: 1rem;
  padding-top: 0.1rem;
}

.angaben dd {
  margin: 0;
  /* Dateinamen und Aktenzeichen haben keine Leerzeichen, an denen eine
     Zeile umbrechen koennte. Ohne diese Zeile schiebt ein Name wie
     "Betriebskostenabrechnung-2025-Familie-Yilmaz.pdf" die ganze Liste aus
     der Karte heraus. */
  overflow-wrap: anywhere;
}

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

.marker {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  border: 1px solid var(--rand-stark);
  white-space: nowrap;
}

.marker.aktiv {
  background: var(--erfolg-flaeche);
  color: var(--erfolg);
  border-color: transparent;
}
.marker.ruhend {
  background: var(--warnung-flaeche);
  color: var(--warnung);
  border-color: transparent;
}
.marker.beendet {
  background: var(--flaeche-gedaempft);
  color: var(--text-gedaempft);
  border-color: transparent;
}
.marker.hinweis {
  background: var(--akzent-schwach);
  color: var(--akzent);
  border-color: transparent;
}
/* Etwas fehlt oder ist duenn -- kein Fehler, aber hinzusehen. */
.marker.warnung {
  background: var(--warnung-flaeche);
  color: var(--warnung);
  border-color: transparent;
}

/* Import pruefen / Umsaetze pruefen: eine Karte je Umsatz statt einer
   Tabelle mit acht Spalten. Oben Haken, Nummer, Datum, Gegenseite und
   rechts Richtung mit Betrag; darunter der Verwendungszweck in voller
   Breite; unten Kategorie und Herkunft des Vorschlags. */
.umsatzliste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.umsatzzeile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "haken kopf betrag"
    "haken zweck zweck"
    "haken fuss fuss";
  gap: 0.45rem 0.8rem;
  align-items: center;
  padding: 0.8rem 0.4rem;
  border-bottom: 1px solid var(--rand);
}

.umsatzzeile:last-child {
  border-bottom: 0;
}

.umsatzzeile-haken {
  grid-area: haken;
  align-self: start;
  padding-top: 0.55rem;
}

.umsatzzeile-haken input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
}

.umsatzzeile-kopf {
  grid-area: kopf;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.9rem;
  min-width: 0;
}

.umsatzzeile-nummer {
  color: var(--text-gedaempft);
  font-variant-numeric: tabular-nums;
  min-width: 1.4rem;
}

.umsatzzeile-kopf .datumsfeld {
  flex: 0 0 auto;
  width: 9rem;
}

.umsatzzeile-wer {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.umsatzzeile-kopf .hilfetext {
  margin: 0;
}

.umsatzzeile-betrag {
  grid-area: betrag;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  white-space: nowrap;
}

.umsatzzeile-betrag select {
  width: auto;
}

.umsatzzeile-betrag input {
  width: 7.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.umsatzzeile-zweck {
  grid-area: zweck;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.umsatzzeile-zweck .feldname,
.umsatzzeile-fuss label {
  flex: 0 0 auto;
  font-size: 1rem;
  color: var(--text-gedaempft);
}

.umsatzzeile-zweck textarea {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.4em;
  line-height: 1.35;
  resize: vertical;
  /* Waechst mit dem Text; Browser ohne field-sizing zeigen die zwei Zeilen aus rows. */
  field-sizing: content;
}

.umsatzzeile-fuss {
  grid-area: fuss;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
}

.umsatzzeile-fuss label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  max-width: 100%;
}

.umsatzzeile-fuss select {
  width: auto;
  min-width: 0;
  max-width: 100%;
}

.umsatzzeile-fuss .herkunft {
  flex: 1 1 14rem;
  margin: 0;
}

.umsatzzeile.ist-vorhanden {
  background: var(--flaeche-gedaempft);
}

/* Belege zuordnen: ein Beleg, darunter die Buchungen, die in Frage kommen */
.belegwahl {
  padding: 0.8rem 0.2rem;
  border-bottom: 1px solid var(--rand);
}

.belegwahl:last-child {
  border-bottom: 0;
}

.belegwahl-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.8rem;
  margin-bottom: 0.4rem;
}

.belegwahl-kopf .hilfetext {
  margin: 0;
}

.belegwahl-liste {
  list-style: none;
  margin: 0 0 0.5rem 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.belegwahl-liste label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
}

.belegwahl-liste input[type="radio"] {
  margin-top: 0.3rem;
}

.belegwahl-liste .hilfetext {
  margin-top: 0.1rem;
}

/* Stapel trennen: wohin mit den Teilen */
.trennziel {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem 0.8rem;
  margin: 0 0 0.8rem;
}

.trennziel legend {
  font-weight: 600;
  padding: 0 0.3rem;
}

.trennziel-akte {
  margin: 0.3rem 0 0.4rem 1.6rem;
  align-items: center;
}

.trennziel-akte select {
  width: auto;
  max-width: 100%;
}

.trennziel-ordner {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1rem;
  color: var(--text-gedaempft);
}

.trennziel-ordner input {
  width: 13rem;
}

.trennziel-ordner select {
  width: auto;
  max-width: 24rem;
}

/* Eingangskorb: Haken je Eintrag und die Leiste "Angehakte loeschen" */
.korb-titel {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}

.korb-haken {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.35rem 0 0;
  flex: none;
}

.korb-leiste {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-top: 0.8rem;
  padding: 0.6rem 0.9rem;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
}
/* Erst mit dem ersten Haken sichtbar (eingangskorb.js). */
.korb-leiste[hidden] {
  display: none;
}
/* Auf dem Handy naehme die klebende Leiste mit ihrem Hilfetext fast den
   ganzen Bildschirm ein -- auch ohne einen einzigen Haken. Dort steht sie
   unten im Fluss der Seite und klebt nur,
   solange etwas angehakt ist -- dann knapp, nur mit den Knoepfen. */
@media (max-width: 640px) {
  .korb-leiste {
    position: static;
    box-shadow: none;
  }
  .korb-leiste.hat-auswahl {
    position: sticky;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
    padding: 0.4rem 0.6rem;
  }
  .korb-leiste.hat-auswahl .hilfetext {
    display: none;
  }
}

/* Reihenfolge von Hand: Pfeile an der Ordnerzeile und an der Depotposition */
.ablage-ordnerzeile .sortierknoepfe {
  margin-left: auto;
  align-self: center;
}

.positionswerkzeuge {
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
}

/* Depot: Kopfzeile je Bestand mit Stichtag und Loeschknopf */
.bestandkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0.9rem 0 0.25rem;
}

.bestandkopf h3,
.bestandkopf form {
  margin: 0;
}

/* Was aus der Notiz folgt: Ankreuzliste mit Titel, Termin, wichtig */
.folgen-liste {
  display: grid;
  gap: 0.4rem;
}

.folgen-zeile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 10.5rem 4rem;
  gap: 0.6rem;
  align-items: center;
}

.folgen-zeile.folgen-kopf {
  font-size: 1rem;
  color: var(--text-gedaempft);
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--rand);
}

.folgen-zeile input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  justify-self: center;
}

@media (max-width: 640px) {
  .folgen-zeile {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .folgen-zeile input[type="date"] {
    grid-column: 2;
  }

  .folgen-zeile input[name^="a_wichtig"] {
    grid-column: 2;
    justify-self: start;
  }

  .folgen-kopf {
    display: none;
  }
}

/* Eine Importzeile, deren Kategorie ein Sprachmodell gesetzt hat. Sie ist
   absichtlich sichtbar anders: Ihr Haken ist gefallen und muss von Hand
   wieder gesetzt werden. */
.umsatzzeile.ki-vorgeschlagen {
  background: var(--warnung-flaeche);
}

@media (max-width: 640px) {
  .umsatzzeile {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "haken kopf"
      "haken betrag"
      "haken zweck"
      "haken fuss";
  }

  .umsatzzeile-betrag {
    justify-content: flex-start;
  }

  .umsatzzeile-zweck {
    flex-wrap: wrap;
  }

  .umsatzzeile-fuss label {
    flex: 1 1 100%;
  }

  .umsatzzeile-fuss select {
    flex: 1 1 auto;
  }
}

/* -------------------------------------------------------------- Meldungen */

.meldungen {
  margin-bottom: 1rem;
}

.meldung {
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.meldung.success {
  background: var(--erfolg-flaeche);
  color: var(--erfolg);
}
.meldung.error {
  background: var(--fehler-flaeche);
  color: var(--fehler);
}
.meldung.warning {
  background: var(--warnung-flaeche);
  color: var(--warnung);
}
.meldung.info {
  background: var(--akzent-schwach);
  color: var(--akzent);
}

/* Eingangskorb: Meldung einer uebernommenen Zeile blendet sich aus (eingangskorb.js). */
.korb-erledigt {
  transition: opacity 0.4s ease;
}
.korb-erledigt.verschwindet {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .korb-erledigt {
    transition: none;
  }
}

/* Warnung vor dem KI-Monatslimit (basis.html): Knoepfe als Formulare. */
.budgetwarnung p,
.papierakte-fertig p {
  margin: 0 0 0.5rem;
}
.budgetwarnung .werkzeuge form,
.papierakte-fertig .werkzeuge form {
  display: inline;
  margin: 0;
}

.hinweiskasten {
  border-left: 3px solid var(--warnung);
  background: var(--warnung-flaeche);
  color: var(--warnung);
  padding: 0.7rem 0.9rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1rem;
  margin-bottom: 1rem;
}

.leer {
  color: var(--text-gedaempft);
  font-style: italic;
  padding: 1rem 0;
}

/* ----------------------------------------------------------------- Reiter */

.reiter {
  display: flex;
  gap: 0.15rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--rand);
  margin-bottom: 1rem;
  scrollbar-width: thin;
}

.reiter a,
.reiter span {
  padding: 0.55rem 0.85rem;
  text-decoration: none;
  color: var(--text-gedaempft);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  font-size: 1rem;
}

.reiter a:hover {
  color: var(--text);
}

.reiter a[aria-current="page"] {
  color: var(--akzent);
  border-bottom-color: var(--akzent);
  font-weight: 600;
}

.reiter span {
  color: var(--text-gedaempft);
  font-style: italic;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------- Notizen */

.notiz {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.6rem;
  background: var(--flaeche);
  scroll-margin-top: 4rem;
}

.notiz-kopf {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: 1rem;
  color: var(--text-gedaempft);
  margin-bottom: 0.35rem;
}

.notiz-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.nachtrag {
  border-left: 2px solid var(--rand-stark);
  margin: 0.6rem 0 0 0.4rem;
  padding: 0.35rem 0 0.35rem 0.7rem;
  font-size: 1rem;
}

.schnellnotiz {
  border: 1px solid var(--akzent);
  border-radius: var(--radius);
  padding: 0.8rem;
  background: var(--akzent-schwach);
  margin-bottom: 1.2rem;
}

.schnellnotiz textarea {
  background: var(--flaeche);
}

/* ------------------------------------------------------------- Kennzahlen */

.kennzahl {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
}

.kennzahl .wert {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.kennzahl .beschriftung {
  font-size: 1rem;
  color: var(--text-gedaempft);
}

/* --------------------------------------------------------------- Anmeldung */

.mittig {
  max-width: 25rem;
  margin: 3rem auto;
}

.codeliste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.4rem;
  font-family: "Cascadia Mono", Consolas, "SF Mono", monospace;
  font-size: 1.05rem;
  margin: 1rem 0;
}

.codeliste span {
  background: var(--flaeche-gedaempft);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 0.4rem 0.6rem;
  text-align: center;
  letter-spacing: 0.06em;
}

.geheimnis {
  font-family: "Cascadia Mono", Consolas, monospace;
  background: var(--flaeche-gedaempft);
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius);
  word-break: break-all;
  display: inline-block;
  font-size: 1rem;
}

.qr {
  display: block;
  width: 200px;
  height: 200px;
  margin: 1rem auto;
  background: #ffffff;
  padding: 0.5rem;
  border-radius: var(--radius);
}

/* ------------------------------------------------------------- Blätterung */

.blaetterung {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  margin-top: 1.2rem;
  font-size: 1rem;
  flex-wrap: wrap;
}

/* "Zu Seite 17" (teile/blaetterung.html) */
.seitensprung {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  margin: 0;
}

.seitensprung label {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  white-space: nowrap;
}

.seitensprung input {
  width: 4.5rem;
  min-height: 0;
  padding: 0.2rem 0.4rem;
}

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

/* Unterhalb von 1140px weicht die Menueleiste dem Menueknopf -- darueber
   passt sie in eine, hoechstens zwei Zeilen. Die Navigation klappt als
   Flaeche unter dem Kopf auf. Knapp oberhalb der Grenze braeche die volle
   Leiste schon in drei Zeilen um. */
@media (max-width: 1140px) {
  .menue-knopf {
    display: inline-flex;
  }
  /* Das aufgeklappte Menue gehoert zum oben klebenden Kopf. Waechst es ueber
     den Bildschirm hinaus (Untermenues!), rollt es nicht mit der Seite weg --
     die unteren Eintraege waeren unerreichbar. Darum rollt das Menue in sich
     selbst, und die Seite dahinter bleibt stehen. */
  .navigation {
    display: none;
    flex-basis: 100%;
    width: 100%;
    margin-left: 0;
    flex-direction: column;
    /* Kein Umbruch in eine zweite Spalte, wenn das Menue hoeher wird als der
       Bildschirm -- es rollt stattdessen (max-height unten). */
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.15rem;
    padding: 0.5rem 0 0.25rem;
    border-top: 1px solid var(--rand);
    max-height: calc(100vh - 4.5rem);
    max-height: calc(100dvh - 4.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* Aufgeklappt per Knopf -- oder ohne Skript immer sichtbar, damit das
     Menue nie hinter einem Knopf verschwindet, der nichts tun kann. */
  .navigation.offen,
  html[data-ohne-skript] .navigation {
    display: flex;
  }
  /* Aufgeklappt per Knopf liegt das Menue als Flaeche von der Unterkante des
     Kopfs bis zum unteren Bildschirmrand und rollt in sich. Vorher rechnete
     es mit einer festen Kopfhoehe -- war der Kopf hoeher (Marke mit
     Bueroname, grosse Schrift), fehlte unten ein Stueck. */
  .navigation.offen {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--kopf-unten, 4.5rem);
    bottom: 0;
    max-height: none;
    padding: 0.5rem 1rem 2rem;
    background: var(--flaeche);
    border-top: 1px solid var(--rand);
    z-index: 30;
  }
  html.menue-offen {
    overflow: hidden;
  }
  /* Im aufgeklappten Menue rollt die ganze Flaeche -- die Gruppen nicht
     noch einmal fuer sich, und die Tafel der Verwaltung wird eine Spalte. */
  .untermenu-liste {
    max-height: none;
    overflow: visible;
  }
  .untermenu-tafel > .untermenu-liste {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0 0 0.25rem 1rem;
  }
  .navigation a,
  .navigation button,
  .untermenu > summary {
    padding: 0.65rem 0.75rem;
    font-size: 1rem;
    min-height: 2.75rem;
    display: flex;
    align-items: center;
  }
  .untermenu {
    position: static;
  }
  /* Untermenues klappen im Fluss auf statt zu schweben, leicht
     eingerueckt, damit die Gruppe erkennbar bleibt. */
  .untermenu-liste {
    position: static;
    border: 0;
    box-shadow: none;
    padding: 0 0 0.25rem 1rem;
    min-width: 0;
  }
  .abmeldeform {
    display: block;
  }
  .abmeldeform button {
    width: 100%;
    text-align: left;
  }
  /* Die Suche zuoberst im Menue (Wunsch des Bueros): im
     aufgeklappten Menue steht sie zwischen lauter beschrifteten Zeilen --
     also auch selbst als beschriftete Zeile, nicht als Lupe allein.
     "order: -1" hebt sie vor "Start"; im Quelltext steht sie ohnehin
     zuerst, damit das Menue beim Aufklappen auf ihr aufsetzt. */
  .navigation .suchknopf {
    order: -1;
    margin-left: 0;
    margin-bottom: 0.25rem;
    width: auto;
    height: auto;
    border-radius: var(--radius);
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    min-height: 2.75rem;
  }
  .suchknopf-text {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
}

@media (max-width: 640px) {
  .kopf-innen {
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
  }
  main {
    padding: 1rem 0.75rem 3.5rem;
  }
  .karte {
    padding: 0.85rem;
  }
  .angaben {
    /* "minmax(0, 1fr)" statt "1fr": eine Spalte aus 1fr darf von Haus aus
       nicht schmaler werden als ihr laengstes Wort und sprengt sonst die
       Karte. Mit der Null als Untergrenze darf sie schrumpfen. */
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem 0;
  }
  .angaben dt {
    margin-top: 0.5rem;
  }
  /* Eingabefelder mindestens 16px gross, sonst zoomt das iPhone beim
     Antippen in die Seite hinein. */
  input,
  select,
  textarea {
    font-size: 1rem;
  }
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  select {
    min-height: 2.6rem;
  }
  /* Fingerfreundliche Schaltflaechen. */
  .knopf,
  button.knopf {
    min-height: 2.75rem;
    padding: 0.55rem 0.9rem;
  }
  .formularaktionen .knopf {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }
  /* Akten-Reiter laufen seitlich durch statt umzubrechen. */
  .reiter {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .reiter a,
  .reiter span {
    white-space: nowrap;
  }
  .werkzeuge {
    width: 100%;
  }
  .kopfwerkzeuge {
    width: 100%;
    align-items: stretch;
  }
  .werkzeuge .knopf {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }
}

/* ================================================================ Fristen */

.fristzeile {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rand);
}

.fristzeile:last-child {
  border-bottom: none;
}

.fristzeile-datum {
  flex: 0 0 5.5rem;
  text-align: center;
  line-height: 1.2;
}

.fristzeile-datum .tag {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fristzeile-datum .jahr {
  display: block;
  font-size: 1rem;
  color: var(--text-gedaempft);
}

.fristzeile-inhalt {
  flex: 1 1 auto;
  min-width: 0;
}

.fristzeile-zusatz {
  font-size: 1rem;
  color: var(--text-gedaempft);
  margin-top: 0.15rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.fristzeile-aktion {
  display: flex;
  gap: 0.35rem;
  flex: none;
  align-items: center;
}

.fristzeile-aktion form {
  display: inline;
}

.fristzeile.ist-ueberfaellig .fristzeile-datum .tag {
  color: var(--fehler);
}

.fristzeile.ist-erledigt .fristzeile-inhalt > a,
.fristzeile.ist-erledigt .fristzeile-datum {
  color: var(--text-gedaempft);
}

.marker.ueberfaellig {
  background: var(--fehler-flaeche);
  color: var(--fehler);
  border-color: transparent;
}

.marker.gesetzlich {
  border-color: var(--rand-stark);
  color: var(--text-gedaempft);
  font-weight: 400;
}

/* Farbige Kante je Fach des Dashboards */
.kennzahl.ueberfaellig {
  border-left: 3px solid var(--fehler);
}
.kennzahl.woche {
  border-left: 3px solid var(--warnung);
}
.kennzahl.monat {
  border-left: 3px solid var(--akzent);
}
.kennzahl.spaeter {
  border-left: 3px solid var(--rand-stark);
}

.karte.fach-ueberfaellig {
  border-left: 3px solid var(--fehler);
}
.karte.fach-woche {
  border-left: 3px solid var(--warnung);
}

/* Ankreuzkästchen der gedruckten Tagesübersicht */
.kaestchen {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid var(--rand-stark);
  border-radius: 2px;
}

.druckkopf {
  display: none;
}

@media (max-width: 640px) {
  .fristzeile {
    flex-wrap: wrap;
  }
  .fristzeile-datum {
    flex: 0 0 4.5rem;
    text-align: left;
  }
  .fristzeile-aktion {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ================================================================ Versand */

.marker.versand-entwurf {
  background: var(--flaeche-gedaempft);
  color: var(--text-gedaempft);
  border-color: transparent;
}
.marker.versand-versandt,
.marker.versand-manuell_erledigt {
  background: var(--erfolg-flaeche);
  color: var(--erfolg);
  border-color: transparent;
}
.marker.versand-fehlgeschlagen {
  background: var(--fehler-flaeche);
  color: var(--fehler);
  border-color: transparent;
}
.marker.versand-abgebrochen {
  background: var(--warnung-flaeche);
  color: var(--warnung);
  border-color: transparent;
}

/* ============================================================== Briefe */

.briefvorschau {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  max-width: 46rem;
  line-height: 1.55;
}

.briefvorschau .anschriftenfeld {
  border: 1px dashed var(--rand-stark);
  padding: 0.6rem 0.8rem;
  margin-bottom: 1.5rem;
  min-height: 6rem;
  font-size: 1rem;
}

.briefvorschau p {
  margin: 0 0 0.9rem;
}

code {
  background: var(--flaeche-gedaempft);
  border-radius: 3px;
  padding: 0.05rem 0.3rem;
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: 1em;
}

/* ============================================================== Berichte */

.abschnitt.unbestaetigt {
  border-left: 3px solid var(--warnung);
}

.abschnitt textarea {
  font-size: 1rem;
  line-height: 1.55;
}

.abschnitt-titel input[type="text"] {
  font-weight: 600;
  font-size: 1.05rem;
  max-width: 30rem;
}

.einfuegeleiste {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.6rem;
}

.einfuegeleiste .baustein-gruppe {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
}

.einfuegeleiste select {
  width: auto;
  padding: 0.28rem 0.5rem;
  font-size: 1rem;
}

/* Der Entwurf eines Abschnitts (Katalog Nr. 22). Zugeklappt, weil er Geld
   kostet: Er soll angeboten werden, nicht sich aufdraengen. */
.ki-entwurf {
  margin-top: 0.7rem;
  border: 1px dashed var(--rand-stark);
  border-radius: var(--radius);
  padding: 0.5rem 0.7rem;
}

.ki-entwurf > summary {
  cursor: pointer;
  font-size: 1rem;
  color: var(--text-gedaempft);
}

.ki-entwurf[open] > summary {
  margin-bottom: 0.5rem;
  color: var(--text);
}

/* Die Bereichstexte (Katalog Nr. 24) stehen als Karten untereinander. */
.hilfe-bereiche-liste .karte {
  margin-bottom: 0.7rem;
}

.hilfe-bereiche-liste h4 {
  margin: 0 0 0.4rem;
}

.einfuegeleiste .bestaetigung {
  margin-left: auto;
  background: var(--warnung-flaeche);
  color: var(--warnung);
  border-radius: var(--radius);
  padding: 0.3rem 0.6rem;
  font-weight: 600;
}

.abschnitt input[name$="-reihenfolge"] {
  width: 4.5rem;
}

/* Abschnitt mit Fehlern nach dem Speichern: in zwanzig Abschnitten sofort
   zu finden; steht nach .unbestaetigt, damit Rot das Gelb ueberdeckt. */
.abschnitt.hat-fehler {
  border-left: 3px solid var(--fehler);
  outline: 2px solid var(--fehler);
  outline-offset: 2px;
}

/* Datumsfelder: Texteingabe im deutschen Format, bewusst schmal. */
input.datumsfeld {
  max-width: 11rem;
}

/* Schmale, mittige Spalte -- fuer Erfassungsformulare, die sonst ueber die
   ganze Seitenbreite laufen wuerden. */
.schmal {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

/* Aufenthalte in der Personenkarte der Akte */
.aufenthaltseintrag {
  padding: 0.45rem 0;
}

.aufenthaltseintrag + .aufenthaltseintrag {
  border-top: 1px solid var(--rand);
}

/* ====================================================== Brieftext-Editor */

.editorleiste {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 0.35rem;
}

.editorknopf {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}

.editorknopf:hover {
  background: var(--flaeche-gedaempft);
}

.editorknopf-bold { font-weight: 700; }
.editorknopf-italic { font-style: italic; }
.editorknopf-underline { text-decoration: underline; }
.editorknopf-vorlage { margin-left: auto; color: var(--text-gedaempft); }

.editorflaeche {
  min-height: 16rem;
  background: var(--flaeche);
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  line-height: 1.55;
  font-size: 1rem;
}

.editorflaeche:focus {
  outline: 2px solid var(--akzent);
  outline-offset: -1px;
}

.editorflaeche p,
.brieftext p {
  margin: 0 0 0.8rem;
}

.editorflaeche ul,
.editorflaeche ol,
.brieftext ul,
.brieftext ol {
  margin: 0 0 0.8rem;
  padding-left: 1.6rem;
}

/* Formulierungshilfe und Diktat stehen unter der Schreibflaeche. */
.editorflaeche + .textwerkstatt,
.editorflaeche + .diktat-leiste {
  margin-top: 0.35rem;
}

/* =============================================== Lichtbox (Klientenfoto) */

.fotoknopf {
  border: 0;
  padding: 0;
  background: none;
  border-radius: 50%;
  cursor: zoom-in;
  flex-shrink: 0;
  line-height: 0;
}

.fotoknopf:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}

.lichtbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 92vw;
  max-height: 92vh;
}

.lichtbox::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

.lichtbox img {
  display: block;
  max-width: min(92vw, 40rem);
  max-height: 86vh;
  border-radius: var(--radius);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  cursor: zoom-out;
}

/* ============================================ Posteingang: Stapelauswahl */

.mailzeile {
  border-top: 1px solid var(--rand);
  padding-top: 0.6rem;
  margin-top: 0.6rem;
}

.mailzeile-inhalt {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-width: 0;
}

/* Der Textblock neben dem Haken muss schrumpfen duerfen. Ein Flex-Element
   geht von sich aus nie unter die Breite seines laengsten Wortes -- und
   eine Absenderadresse wie
   "sachbearbeitung.betreuungsstelle@ennepe-ruhr-kreis.de" ist ein einziges
   Wort. Auf dem Telefon schoebe sie die ganze Seite nach rechts. min-width: 0
   erlaubt das Schrumpfen, overflow-wrap den Umbruch mitten im Wort. */
.mailzeile-inhalt > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mailhaken {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.35rem;
  flex-shrink: 0;
  accent-color: var(--akzent);
}

.stapelleiste {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.7rem;
  margin-top: 0.6rem;
  border-radius: var(--radius);
  background: var(--flaeche-gedaempft);
}

.stapelleiste.unten {
  margin-top: 1rem;
}

.stapelleiste .stapel-anzahl {
  margin: 0;
  flex: 1 1 6rem;
}

.stapel-alle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 1rem;
  cursor: pointer;
}

.stapel-alle input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--akzent);
}

.stapel-seitengroesse {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

/* "Ablegen in ..." -- Auswahlfeld und Knopf gehoeren zusammen. */
.stapel-ablegen {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.stapel-ablegen select {
  max-width: 13rem;
  padding: 0.35rem 0.5rem;
  font-size: 1rem;
}

/* Alles, was eine Markierung braucht, ist ohne Markierung sichtbar aus. */
[data-stapel][disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ================================================== Aufgaben (Modul) */

/* --- Schnelleingabe: ein Feld, ein Knopf ------------------------------- */

.schnelleingabe {
  display: flex;
  gap: 0.5rem;
}

.schnelleingabe input[type="text"] {
  flex: 1 1 12rem;
  min-width: 0;
}

.schnellhilfe {
  margin-top: 0.35rem;
}

.schnellhilfe code {
  font-size: 1rem;
  background: var(--flaeche-gedaempft);
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
}

/* --- Fokusliste -------------------------------------------------------- */

.fokusgruppe {
  margin: 1.1rem 0 0.3rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rand);
  font-size: 1.02rem;
}

.fokusgruppe.fokus-ueberfaellig {
  color: var(--fehler);
}

.aufgabenzeile {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.4rem 0.2rem;
  border-radius: var(--radius);
}

.aufgabenzeile:hover {
  background: var(--flaeche-gedaempft);
}

.aufgabenzeile-mitte {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem;
  min-width: 0;
}

.aufgabentitel {
  font-weight: 500;
  overflow-wrap: anywhere;
}

.aufgabentitel.prio-hoch::before {
  content: "!";
  color: var(--fehler);
  font-weight: 700;
  margin-right: 0.3rem;
}

.aufgabenmeta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 1rem;
  color: var(--text-gedaempft);
}

.aufgabenklient {
  color: var(--text-gedaempft);
}

.teilstand {
  white-space: nowrap;
}

.durchgestrichen {
  text-decoration: line-through;
  color: var(--text-gedaempft);
}

/* Der Abhak-Kreis: gross genug fuer den Daumen, eindeutig als Ziel. */
.erledigt-knopf {
  width: 1.5rem;
  height: 1.5rem;
  /* Ohne Angabe nimmt ein Knopf die kleine Schrift des Browsers (13 px).
     Der Haken darin gehoert zur Schrift der Seite. */
  font-size: 1rem;
  line-height: 1;
  margin-top: 0.15rem;
  border-radius: 50%;
  border: 2px solid var(--rand-stark);
  background: var(--flaeche);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.erledigt-knopf:hover {
  border-color: var(--erfolg);
  background: var(--erfolg-flaeche);
}

.erledigt-knopf.an {
  border-color: var(--erfolg);
  background: var(--erfolg);
}

.erledigt-knopf.an::after {
  content: "✓";
  color: var(--akzent-text);
  display: block;
  font-size: 1rem;
  line-height: 1.3rem;
  text-align: center;
}

.erledigt-form {
  line-height: 0;
}

/* --- Etiketten --------------------------------------------------------- */

.etikett {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--etikett-schrift);
}

.etikett-blau { background: var(--etikett-blau); }
.etikett-gruen { background: var(--etikett-gruen); }
.etikett-gelb { background: var(--etikett-gelb); }
.etikett-orange { background: var(--etikett-orange); }
.etikett-rot { background: var(--etikett-rot); }
.etikett-lila { background: var(--etikett-lila); }
.etikett-tuerkis { background: var(--etikett-tuerkis); }
.etikett-grau { background: var(--etikett-grau); }

/* --- Brett (Kanban) ---------------------------------------------------- */

.brett {
  display: grid;
  grid-template-columns: repeat(4, minmax(15rem, 1fr));
  gap: 0.8rem;
  align-items: start;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

@media (max-width: 1140px) {
  .brett {
    grid-template-columns: repeat(2, minmax(14rem, 1fr));
  }
}

@media (max-width: 640px) {
  .brett {
    grid-template-columns: 1fr;
  }
}

.brett-spalte {
  background: var(--flaeche-gedaempft);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 0.65rem;
  min-height: 8rem;
}

.brett-spalte > h2 {
  margin: 0 0 0.55rem;
  font-size: 1rem;
}

.brett-spalte.ablagebereit {
  outline: 2px dashed var(--akzent);
  outline-offset: -4px;
}

.aufgabenkarte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 0.55rem 0.65rem;
  margin-bottom: 0.55rem;
  box-shadow: var(--schatten);
  cursor: grab;
  display: grid;
  gap: 0.3rem;
}

.aufgabenkarte.wird-gezogen {
  opacity: 0.5;
}

.aufgabenkarte.ueberfaellig {
  border-left: 3px solid var(--fehler);
}

/* --- Aufgabenseite ----------------------------------------------------- */

.teilzeile {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.28rem 0;
  border-top: 1px solid var(--rand);
}

.teilzeile:first-of-type {
  border-top: 0;
}

.teilzeile .teil-entfernen {
  margin-left: auto;
  line-height: 0;
}

.verweise {
  margin: 0;
  padding-left: 1.2rem;
}

.verweise li {
  margin-bottom: 0.3rem;
}

.paketbeispiel {
  background: var(--flaeche-gedaempft);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  font-size: 1rem;
  overflow-x: auto;
}

.aufgabenfilter select,
.aufgabenfilter input[type="search"] {
  max-width: 14rem;
}

/* ================================================= Kalender (Fristen/Aufgaben) */

.kalenderkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}

.kalendertitel {
  font-weight: 700;
  font-size: 1.05rem;
  flex: 1 1 auto;
  text-align: center;
  min-width: 10rem;
}

.kalenderraster {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.kal-spaltenkopf {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-gedaempft);
  text-align: center;
  padding: 0.15rem 0;
}

.kal-zelle {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 6px;
  min-height: 5.4rem;
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.kalenderraster.woche .kal-zelle {
  min-height: 11rem;
}

/* Nachbarmonat: gedaempfte Flaeche und gestrichelter Rand statt opacity,
   damit die Tageszahl lesbar bleibt. */
.kal-zelle.nachbar {
  background: var(--flaeche-gedaempft);
  border-style: dashed;
}

.kal-zelle.frei {
  background: var(--flaeche-gedaempft);
}

.kal-zelle.heute {
  border-color: var(--akzent);
  box-shadow: inset 0 0 0 1px var(--akzent);
}

.kal-tagzeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem;
}

.kal-tagzahl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  min-height: 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-gedaempft);
  text-decoration: none;
  padding: 0 0.3rem;
  border-radius: 4px;
}

.kal-tagzahl:hover {
  background: var(--akzent-schwach);
  color: var(--akzent);
}

.kal-zelle.heute .kal-tagzahl {
  color: var(--akzent);
}

.kal-feiertag {
  color: var(--warnung);
  font-size: 1rem;
}

.kal-eintrag {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-left: 3px solid var(--akzent);
  border-radius: 4px;
  background: var(--akzent-schwach);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  line-height: 1.25;
  padding: 0.14rem 0.3rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kal-eintrag:hover {
  filter: brightness(0.96);
}

.kal-eintrag.gross {
  font-size: 1rem;
  padding: 0.5rem 0.7rem;
  margin-bottom: 0.35rem;
  white-space: normal;
}

/* Ebenen des gemeinsamen Kalenders. Fristen behalten den Akzent. */
.kal-eintrag.ebene-aufgaben { border-left-color: var(--erfolg); background: var(--erfolg-flaeche); }
.kal-eintrag.ebene-termine { border-left-color: var(--text-gedaempft); }
.kal-eintrag.ebene-privat { border-left: 3px dashed var(--rand-stark); background: var(--flaeche-gedaempft); font-style: italic; }
.kal-eintrag.vergangen { color: var(--text-gedaempft); }
/* Terminarten: dieselbe Palette wie die Etiketten. */
.kal-eintrag.farbe-blau { background: var(--etikett-blau); color: var(--etikett-schrift); }
.kal-eintrag.farbe-gruen { background: var(--etikett-gruen); color: var(--etikett-schrift); }
.kal-eintrag.farbe-gelb { background: var(--etikett-gelb); color: var(--etikett-schrift); }
.kal-eintrag.farbe-orange { background: var(--etikett-orange); color: var(--etikett-schrift); }
.kal-eintrag.farbe-rot { background: var(--etikett-rot); color: var(--etikett-schrift); }
.kal-eintrag.farbe-lila { background: var(--etikett-lila); color: var(--etikett-schrift); }
.kal-eintrag.farbe-tuerkis { background: var(--etikett-tuerkis); color: var(--etikett-schrift); }
.kal-eintrag.farbe-grau { background: var(--etikett-grau); color: var(--etikett-schrift); }

.kal-eintrag.ueberfaellig {
  border-left-color: var(--fehler);
  background: var(--fehler-flaeche);
}

.kal-eintrag.warnung {
  border-left-color: var(--warnung);
  background: var(--warnung-flaeche);
}

.kal-eintrag.erledigt {
  border-left-color: var(--rand-stark);
  background: var(--flaeche-gedaempft);
  color: var(--text-gedaempft);
  text-decoration: line-through;
}

.kal-mehr {
  font-size: 1rem;
  color: var(--akzent);
  text-decoration: none;
}

.kal-leer {
  color: var(--text-gedaempft);
  font-size: 1rem;
}

/* Jahresansicht: zwoelf Mini-Monate */

.kalenderjahr {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.9rem;
}

.kal-minimonat {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 0.5rem 0.6rem;
}

.kal-minimonat-name {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.3rem;
  color: var(--text);
  text-decoration: none;
}

.kal-minimonat-name:hover {
  color: var(--akzent);
}

.kal-miniraster {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

.kal-minikopf {
  font-size: 1rem;
  color: var(--text-gedaempft);
  text-align: center;
}

.kal-minitag {
  font-size: 1rem;
  text-align: center;
  padding: 0.1rem 0;
  border-radius: 4px;
  color: var(--text-gedaempft);
  text-decoration: none;
}

.kal-minitag.belegt {
  background: var(--akzent);
  color: var(--akzent-text);
  font-weight: 600;
}

.kal-minitag.heute {
  box-shadow: inset 0 0 0 1px var(--akzent);
  color: var(--akzent);
}

.kal-minitag.belegt.heute {
  color: var(--akzent-text);
}

/* Vorschau-Dialog (Lightbox) */

.vorschau-dialog {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--text);
  padding: 0;
  width: min(94vw, 34rem);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
}

.vorschau-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.vorschau-kopf {
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem 0.6rem 0;
}

.vorschau-inhalt {
  padding: 0 1.1rem 1.1rem;
}

.vorschau-inhalt h2 {
  margin: 0.1rem 0 0.5rem;
  font-size: 1.15rem;
}

.vorschau-zeile {
  display: flex;
  gap: 0.6rem;
  margin: 0.25rem 0;
  font-size: 1rem;
}

.vorschau-zeile > span:first-child {
  flex: 0 0 8rem;
  color: var(--text-gedaempft);
}

.vorschau-text {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rand);
  white-space: pre-wrap;
}

.vorschau-fuss {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.9rem;
}

/* Ebenen-Schalter ueber dem Kalender */
.ebenen-leiste { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.8rem; }
.ebene-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.7rem; border: 1px solid var(--rand); border-radius: 999px; font-size: 1rem; text-decoration: none; color: var(--text-gedaempft); background: var(--flaeche); }
.ebene-chip::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 1px solid var(--rand-stark); background: transparent; }
.ebene-chip.aktiv { color: var(--text); border-color: var(--rand-stark); background: var(--akzent-schwach); }
.ebene-chip.aktiv.ebene-fristen::before { background: var(--akzent); border-color: var(--akzent); }
.ebene-chip.aktiv.ebene-aufgaben::before { background: var(--erfolg); border-color: var(--erfolg); }
.ebene-chip.aktiv.ebene-termine::before { background: var(--text-gedaempft); border-color: var(--text-gedaempft); }
.ebene-chip.aktiv.ebene-privat::before { background: var(--rand-stark); border-style: dashed; }
.ebene-zahl { font-size: 1rem; color: var(--text-gedaempft); }
/* Terminzeilen auf der Startseite */
.terminzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid var(--rand); }
.terminzeile:last-child { border-bottom: 0; }
.terminzeile-zeit { min-width: 6.5rem; font-variant-numeric: tabular-nums; color: var(--text-gedaempft); }
.terminzeile.privat { font-style: italic; }
.zeitfeld { max-width: 6rem; }

@media (max-width: 640px) {
  .kalenderraster.monat .kal-zelle {
    min-height: 3.4rem;
  }
  .kalenderraster.monat .kal-eintrag,
  .kalenderraster.monat .kal-mehr {
    display: none; /* am Handy zaehlt der Punkt, Details in der Tagesansicht */
  }
  .kalenderraster.monat .kal-zelle.belegt-punkt::after {
    content: "●";
    color: var(--akzent);
    font-size: 1rem;
    text-align: center;
  }
  .kalenderraster.woche {
    grid-template-columns: 1fr;
  }
  .kalenderraster.woche .kal-zelle {
    min-height: 0;
  }
}

/* ================================================== Textwerkstatt (KI) */

/* Die Knopfleiste ueber einem Textfeld. Bewusst unauffaellig: sie ist ein
   Angebot, kein Bedienelement, das sich in den Vordergrund draengt. */
.textwerkstatt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.55rem;
  margin-bottom: 0.35rem;
  border: 1px dashed var(--rand-stark);
  border-radius: var(--radius);
  background: var(--flaeche-gedaempft);
}

.textwerkstatt .hilfetext {
  margin: 0;
}

.textwerkstatt .werkstatt-hinweis {
  flex-basis: 100%;
  font-size: 1rem;
}

.werkstatt-dialog {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--text);
  padding: 1rem 1.1rem 1.1rem;
  width: min(96vw, 62rem);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
}

.werkstatt-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.werkstatt-dialog h3 {
  margin: 0.8rem 0 0.3rem;
  font-size: 1rem;
}

/* Original und Vorschlag nebeneinander -- so sieht man sofort, was sich
   aendert. Auf schmalen Geraeten untereinander. */
.werkstatt-spalten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}

.werkstatt-spalten pre {
  margin: 0;
  padding: 0.7rem 0.8rem;
  max-height: 45vh;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche-gedaempft);
}

.werkstatt-spalten .werkstatt-vorschlag {
  background: var(--flaeche);
  border-color: var(--akzent);
}

@media (max-width: 640px) {
  .werkstatt-spalten {
    grid-template-columns: 1fr;
  }
}

/* --- Ablage: Ordnerbaum und Inhalt ---------------------------------- */

.ablage {
  display: grid;
  grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr);
  gap: 1.2rem;
  align-items: start;
}

/* Der Baum darf nie breiter werden als seine Spalte: Ordnernamen stehen in
   einer Zeile (Ellipse), und ein Rasterfeld waechst sonst auf deren volle
   Breite -- auf dem Handy lief die ganze Seite damit nach rechts ueber. */
.ablage-baum {
  min-width: 0;
}

@media (max-width: 640px) {
  .ablage {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ordnerbaum {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ordnerbaum li {
  padding-left: calc(var(--tiefe, 0) * 0.9rem);
}

.ordnerbaum-vorschau li[data-tiefe] {
  margin-left: calc(var(--tiefe, 0) * 1rem + 0.5rem);
}

.ordnerknoten {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
}

.ordnerknoten .ordnername {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ordnerknoten:hover {
  background: var(--flaeche-gedaempft);
}

.ordnerknoten[aria-current="page"] {
  background: var(--akzent-schwach);
  color: var(--akzent-text);
  font-weight: 600;
}

.ordnerknoten.fest .ordnername {
  font-style: italic;
}

.ablage-ziel.ablagebereit {
  outline: 2px dashed var(--akzent);
  outline-offset: 2px;
  background: var(--akzent-schwach);
}

.ablage-ziel.wird-gezogen,
.ablage-dokument.wird-gezogen {
  opacity: 0.5;
}

.ablage-neu {
  margin-top: 0.7rem;
}

.ablage-neu-form {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.ablage-neu-form input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
}

.ablage-inhalt {
  min-width: 0;
}

.ablage-pfad {
  margin: 0;
  font-size: 1.1rem;
}

.ablage-ordnerzeile {
  cursor: pointer;
}

.ablage-ordnerzeile .ordnersymbol {
  color: var(--text-gedaempft);
}

.ablage-dokument {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

.ablage-dokument[draggable="true"] {
  cursor: grab;
}

.ablage-dokument .fristzeile {
  flex: 1 1 auto;
  min-width: 0;
}

.ablage-dokument .ablage-haken {
  margin-top: 0.95rem;
}

.ablage-verschiebeleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.8rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rand);
}

.ablage-ordnerwerkzeuge-inhalt {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

/* Aufgeklappt braucht das Werkzeug die ganze Zeile. Zugeklappt ist es nur
   so breit wie seine Beschriftung -- auf dem Handy waren das 129 Punkte,
   und das Formular darin (248 Punkte) stand zur Haelfte ausserhalb der
   Karte. */
.werkzeuge > .ablage-ordnerwerkzeuge[open] {
  flex: 1 1 100%;
  min-width: 0;
}

/* Klappt ein Werkzeug (Unterordner, Ordner ...) auf, sollen die Knoepfe
   daneben nicht mitwachsen. */
.ablage-inhalt > .kopfzeile > .werkzeuge {
  align-items: flex-start;
}

.ablage-unterordner .werkzeuge {
  flex-wrap: nowrap;
}

.ablage-unterordner input[type="text"] {
  flex: 1 1 auto;
  min-width: 10rem;
}

.ordnerzeile-aktion {
  white-space: nowrap;
}

/* Startordner der Akten: der Baum als Tabelle, Unterordner eingerueckt */
.startordner-tabelle .startordner-name {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.startordner-tabelle .startordner-name input[type="text"] {
  flex: 1 1 auto;
  min-width: 10rem;
}

.startordner-einzug {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.15rem;
}

.startordner-einzug span {
  display: inline-block;
  width: 1.1rem;
  height: 1px;
  background: var(--rand);
}

.startordner-einzug span:last-child {
  width: 0.7rem;
  height: 0.7rem;
  border-left: 1px solid var(--rand);
  border-bottom: 1px solid var(--rand);
  background: none;
  margin-top: -0.7rem;
}

.startordner-tabelle tr[data-inaktiv] input[type="text"] {
  color: var(--text-gedaempft);
}

.ablage-filter {
  margin-bottom: 0.8rem;
}

.ablage-filter .filterleiste {
  margin-top: 0.6rem;
}

.freigabeliste {
  padding-left: 1.2rem;
}

.freigabeliste li {
  margin: 0.3rem 0;
}

/* --- Fristerkennung: Fund, Zitat, Rechenweg --------------------------- */

.frist-fund {
  border: 1px solid var(--rand);
  border-left: 3px solid var(--akzent);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  margin-bottom: 0.9rem;
  background: var(--flaeche-gedaempft);
}

.frist-fund h3 {
  margin: 0 0 0.5rem;
}

/* Das Zitat ist der Beleg: Es muss sich vom Rest abheben, damit man
   nachschlagen kann, worauf sich der Vorschlag stuetzt. */
.frist-zitat {
  margin: 0 0 0.6rem;
  padding: 0.5rem 0.8rem;
  border-left: 2px solid var(--rand-stark);
  background: var(--flaeche);
  font-style: italic;
  font-size: 1rem;
}

.frist-ergebnis {
  margin: 0.4rem 0;
  font-size: 1.05rem;
}

/* Der Rechenweg -- jeder Schritt einzeln nachlesbar. */
.frist-rechenweg {
  margin: 0.2rem 0 0.6rem;
  padding-left: 1.4rem;
  font-size: 1rem;
  line-height: 1.6;
}

.frist-rechenweg li {
  margin-bottom: 0.15rem;
}

/* Ein Fund, dessen Ereignisdatum nur angenommen ist -- er darf nicht
   aussehen wie ein belegtes Ergebnis. */
.frist-fund.unsicher {
  border-left-color: var(--warnung);
  background: var(--warnung-flaeche);
}

.frist-datum {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 0.7rem;
  font-size: 1rem;
}

.frist-datum input[type="date"] {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: inherit;
  font: inherit;
  font-size: 1rem;
}

/* --- Rechtsquellen: aufklappbare Vorschriften ------------------------- */

.rechtsnorm {
  border-top: 1px solid var(--rand);
  padding: 0.6rem 0;
}

.rechtsnorm > summary {
  cursor: pointer;
  padding: 0.2rem 0;
  font-size: 1rem;
}

.rechtsnorm > summary:hover {
  color: var(--akzent);
}

.rechtsnorm .notiz-text {
  margin-top: 0.5rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--rand-stark);
  font-size: 1rem;
}

/* --- Mailsichtung: Kurzfassung und Vorschlaege ------------------------ */

.sichtung {
  border-left: 3px solid var(--akzent);
}

.sichtung-marker {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0 0 0.7rem;
}

/* Die Kurzfassung ist das Erste, was man liest -- entsprechend gesetzt. */
.sichtung-kurzfassung {
  margin: 0 0 0.6rem;
  font-size: 1.02rem;
  line-height: 1.55;
}

/* Jeder Vorschlag steht fuer sich, mit seinem eigenen Knopf. So ist
   sichtbar, dass nichts von allein geschieht. */
.sichtung-vorschlag {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.6rem;
  background: var(--flaeche-gedaempft);
}

.marker.dringend-hoch {
  background: var(--fehler-flaeche);
  color: var(--fehler);
  border-color: var(--fehler);
}

.marker.dringend-mittel {
  background: var(--warnung-flaeche);
  color: var(--warnung);
  border-color: var(--warnung);
}

.marker.dringend-niedrig {
  background: var(--flaeche-gedaempft);
  color: var(--text-gedaempft);
}

/* ---------------------------------------------------------------- Immobilien */

/* Fortschritt eines Verkaufs: erledigte von zaehlenden Stationen. */
.fortschritt {
  height: 0.55rem;
  background: var(--flaeche-gedaempft);
  border-radius: 999px;
  overflow: hidden;
  margin: 0.4rem 0 0.8rem;
}

.fortschritt > span {
  display: block;
  width: calc(var(--prozent, 0) * 1%);
  height: 100%;
  background: var(--akzent);
}

.stationen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.station {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: 0.6rem;
  align-items: start;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
}

.station.erledigt {
  border-color: var(--erfolg);
}

.station.uebersprungen {
  border-style: dashed;
}

/* Die naechste offene Station -- da geht es weiter. */
.station.naechste {
  border-color: var(--akzent);
  box-shadow: 0 0 0 2px var(--akzent-schwach);
}

.station-nummer {
  font-weight: 700;
  color: var(--text-gedaempft);
}

.station-titel {
  font-weight: 600;
}

.station-details {
  font-size: 1rem;
  color: var(--text-gedaempft);
}

/* Trenner nur zwischen den Angaben, nicht dahinter. */
.station-details .detail + .detail::before {
  content: " · ";
}

.station-werkzeuge {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: flex-end;
}
/* Sprechen: die Vorschlagskarten und das Gespraech (static/js/sprechen.js). */
/* Antwort waehrend des Entstehens: ein blinkender Strich am Ende. */
.sprechen-live::after {
  content: "\258D";
  margin-left: 0.1rem;
  color: var(--akzent);
  animation: sprechen-blinken 1s steps(1) infinite;
}

@keyframes sprechen-blinken {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sprechen-live::after {
    animation: none;
  }
}

.sprechen-karte.alt {
  border-style: dashed;
}

.sprechen-karte {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  margin: 0.6rem 0;
  background: var(--flaeche-gedaempft);
}

.sprechen-karte h3 {
  margin: 0 0 0.4rem;
}

.sprechen-karte .werkzeuge {
  margin-top: 0.5rem;
}

.sprechen-posten {
  margin: 0.4rem 0 0.4rem 1.2rem;
  padding: 0;
}

/* Diktat: der Mikrofon-Knopf (static/js/diktat.js). */
.diktat-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.35rem;
}

.diktat-knopf.aktiv {
  background: var(--fehler-flaeche);
  border-color: var(--fehler);
  animation: diktat-puls 1.2s ease-in-out infinite;
}

@keyframes diktat-puls {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

/* Sprache und Glaettung je Diktat, neben dem Knopf. */
.diktat-wahl {
  width: auto;
  max-width: 16rem;
  padding: 0.2rem 0.4rem;
}

/* Abschrift und Vorschlag nebeneinander; der Vorschlag ist das Feld, in dem
   die Person vor dem Uebernehmen verbessert. */
.diktat-dialog .diktat-vorschlag {
  width: 100%;
  min-height: 12rem;
  max-height: 45vh;
  font-size: 1rem;
  line-height: 1.5;
  border-color: var(--akzent);
}

/* Lesefassung auf Russisch: Original und Uebersetzung nebeneinander; Zahlen,
   Daten und Betraege markiert, damit man sie links und rechts vergleicht. */
.uebersetzung-spalten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 0.8rem;
}

.lesefassung {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.55;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
}

.lesefassung mark {
  background: var(--warnung-flaeche);
  color: inherit;
  padding: 0 0.1em;
  border-radius: 2px;
}

.uebersetzung-aktionen {
  margin: 0.8rem 0;
}

@media (max-width: 640px) {
  .uebersetzung-spalten {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .diktat-knopf.aktiv {
    animation: none;
  }
}

/* Wiedervorlagen bei einer Antwort (fristen/teil_wiedervorlagen.html). */
.wiedervorlagen-kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  margin: 0 0 0.4rem;
}

.wiedervorlagen.eingebettet {
  margin: 0.5rem 0 0.2rem;
}

.wiedervorlage-zeile {
  padding: 0.35rem 0.4rem;
  border-top: 1px solid var(--rand);
}

.wiedervorlage-zeile.passt {
  background: var(--erfolg-flaeche);
  border-radius: var(--radius);
}

.wiedervorlage-zeile .frist-haken {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

/* Erinnerungen: Karte auf der Startseite (fristen/teil_erinnerungen.html)
   und Leiste im Kalender (fristen/teil_erinnerungsleiste.html). */
.karte.fach-erinnerungen {
  border-left: 3px solid var(--warnung);
}

.erinnerung-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--rand);
}

.erinnerung-zeile:last-of-type {
  border-bottom: 0;
}

.erinnerung-inhalt {
  flex: 1 1 18rem;
}

.erinnerung-aktion {
  margin: 0;
}

/* Einmal oben auf der Seite, rollt mit ihr weg -- nicht mehr klebend: als
   klebende Leiste rutschte sie unter den ebenfalls klebenden Kopf. */
.erinnerungs-leiste {
  margin: 0 0 1rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--warnung);
  background: var(--warnung-flaeche);
  border-radius: var(--radius);
}

.erinnerungs-leiste .kopf {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.erinnerungs-leiste .zeile {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.25rem 0;
}

.erinnerungs-leiste .zeile + .zeile {
  border-top: 1px solid var(--rand);
}

.erinnerungs-leiste .text {
  flex: 1 1 14rem;
}

/* Fristvorschlaege aus dem Eingang (teile/fristvorschlaege.html). Die
   Fundkaesten kommen von der Fristerkennung; hier nur das Drumherum. */
.fristvorschlaege-kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0 0 0.5rem;
}

.fristvorschlaege.eingebettet {
  margin: 0.6rem 0 0.2rem;
}

.frist-fund.entschieden {
  border-left-color: var(--rand-stark);
  background: var(--flaeche-gedaempft);
}

.frist-details summary {
  cursor: pointer;
  font-size: 1rem;
}

.frist-felder {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: flex-end;
  margin: 0.5rem 0 0.3rem;
}

.frist-felder label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 1rem;
}

.frist-felder label.frist-haken {
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  flex-basis: 100%;
}

.frist-felder .frist-aufgabe {
  flex: 1 1 18rem;
}

.frist-felder input[type="text"] {
  width: 100%;
}

.frist-verwerfen {
  margin-top: 0.3rem;
}

/* ------------------------------------------------------- Scan-Helfer */

/* Der Koppelcode: gross, mit Luecke in der Mitte, gut abzutippen. */
.koppelcode {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin: 0.3rem 0;
  color: var(--akzent);
  font-variant-numeric: tabular-nums;
}

.koppelcode span {
  display: inline-block;
  width: 0.6em;
}

.scanhelfer-downloads {
  list-style: none;
  padding: 0;
  margin: 0.3rem 0 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
}

.scanhelfer-downloads .hilfetext {
  margin-top: 0.3rem;
}

.scanhelfer-tabelle tr.gesperrt td {
  color: var(--text-gedaempft);
}

.scanhelfer-tabelle form {
  display: inline;
}

/* --- Barrierefreiheit-Grundbausteine --- */

/* Nur fuer Screenreader: sichtbar fuer die Vorlesefunktion, nicht auf dem
   Bildschirm. Genutzt von der Live-Region #ansage, dem Text
   "(Pflichtangabe)" hinter dem Sternchen und den Kalender-Zusaetzen.

   "left: 0" ist kein Schoenheitsfehler: ohne die Angabe steht der Kasten an
   seiner natuerlichen Stelle -- in einer breiten Tabelle also weit rechts,
   ausserhalb des Fensters. Er rollt aus dem Rahmen heraus und zieht die
   ganze Seite in die Breite (Handy, Verguetung war 504 statt 375 Punkte
   breit). Links angeschlagen kann das nicht passieren; gesehen wird er
   ohnehin nicht. */
.nur-vorlesen {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Der erste Link der Seite: unsichtbar, bis er per Tastatur den Fokus
   bekommt -- dann oben links, kontrastreich, ueber allem. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0.5rem;
  z-index: 1000;
  padding: 0.6rem 1rem;
  background: var(--akzent);
  color: var(--akzent-text);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus {
  top: 0.5rem;
  outline: 3px solid var(--text);
  outline-offset: 2px;
}

main:focus {
  outline: none;
}

/* Das Sternchen der Pflichtangabe am Label. */
.pflicht {
  color: var(--fehler);
  margin-left: 0.15rem;
}

/* Darstellung je Benutzer (user.darstellung): "gross" oben bei html,
   "kontrast" mit Farben in farben.css und Linien im Block "Darstellung" unten. */

/* --- Darstellung, Kontrast, Handy-Optik, Tabellen als Karten --- */

/* Hoher Kontrast (html.darstellung-kontrast, Farben in farben.css):
   staerkere Linien, unterstrichene Verweise, breiter Fokusring. */
html.darstellung-kontrast a {
  text-decoration: underline;
}
html.darstellung-kontrast .knopf,
html.darstellung-kontrast .menue-knopf,
html.darstellung-kontrast .karte,
html.darstellung-kontrast .notiz,
html.darstellung-kontrast .marker,
html.darstellung-kontrast .kal-zelle,
html.darstellung-kontrast input[type="text"],
html.darstellung-kontrast input[type="search"],
html.darstellung-kontrast input[type="email"],
html.darstellung-kontrast input[type="password"],
html.darstellung-kontrast input[type="date"],
html.darstellung-kontrast input[type="number"],
html.darstellung-kontrast input[type="tel"],
html.darstellung-kontrast select,
html.darstellung-kontrast textarea {
  border-width: 2px;
  box-shadow: none;
}
html.darstellung-kontrast .marker {
  border-color: currentColor;
}
html.darstellung-kontrast :focus-visible {
  outline-width: 3px;
}
html.darstellung-kontrast .hilfetext,
html.darstellung-kontrast .fristzeile-zusatz,
html.darstellung-kontrast .notiz-kopf,
html.darstellung-kontrast .aufgabenmeta {
  color: var(--text);
}

/* Grossdruck fuer Zettel und Tagesuebersicht: der Knopf "Grossdruck" haengt
   ?grossdruck=1 an, die Vorlage setzt body.grossdruck. */
body.grossdruck main {
  font-size: 1.3rem;
}

/* Statuszeile unter der Ueberschrift: Marker wie "erledigt" oder "3 im
   Posteingang" stehen nicht mehr im h1, sondern in einer eigenen Zeile mit
   sichtbarer Beschriftung "Status:". */
.statuszeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.4rem;
}

/* Einklappbare Bloecke (Filter, Aktenkopf "Mehr", Erinnerungen, KI-Kasten).
   Auf schmalen Bildschirmen zugeklappt, auf breiten oeffnet klappen.js
   sie (data-offen-ab). Ohne Skript bleiben sie ein gewoehnliches
   <details>, das sich mit Tastatur oder Finger oeffnen laesst. */
details.klappe > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.35rem 0;
  list-style: none;
  min-height: 1.5rem;
}
details.klappe > summary::-webkit-details-marker {
  display: none;
}
details.klappe > summary::before {
  content: "\25B8 ";
}
details.klappe[open] > summary::before {
  content: "\25BE ";
}
details.klappe > summary:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}
details.klappe > summary .marker {
  margin-left: 0.3rem;
}
/* Eine Kartenueberschrift als Klapptitel (Akte: Stand, Zeitstrahl, Zugriff):
   bleibt Ueberschrift fuer den Screenreader, steht aber neben dem Pfeil. */
details.klappe > summary .klapptitel {
  display: inline;
  margin: 0;
}
details.karte.klappe[open] > summary {
  margin-bottom: 0.5rem;
}
/* Auf breiten Bildschirmen ist der Klapptitel nur ein Kopf, kein Schalter:
   Bloecke mit .nur-schmal verstecken ihn dort ganz (klappen.js oeffnet). Ohne
   Skript bleibt er sichtbar, damit der Inhalt erreichbar ist. */
@media (min-width: 641px) {
  html:not([data-ohne-skript]) details.klappe.nur-schmal > summary {
    display: none;
  }
}
details.klappe.filter > .filterleiste {
  margin-top: 0.5rem;
}

/* Reiterleiste: ein Verlauf am rechten Rand zeigt, dass rechts weitere
   Reiter folgen (sonst stuende "Notizer" angeschnitten da). */
.reiter::after {
  content: "";
  position: sticky;
  right: 0;
  flex: none;
  width: 2.5rem;
  margin-left: -2.5rem;
  background: linear-gradient(to right, transparent, var(--grund));
  pointer-events: none;
}


/* Tabellen als Karten auf schmalen Bildschirmen: jede Zeile ein Kasten,
   jede Zelle mit ihrer Spaltenueberschrift aus data-label davor. Die
   Kopfzeile bleibt fuer Screenreader erhalten (nur verschoben). */
@media (max-width: 640px) {
  .kartentabelle thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
  }
  .kartentabelle,
  .kartentabelle tbody,
  .kartentabelle tfoot,
  .kartentabelle tr,
  .kartentabelle td {
    display: block;
  }
  /* Manche Listen tragen den Namen als Zeilenkopf statt als erste Zelle
     (<th scope="row">). In der Karte ist er die Ueberschrift: er steht
     oben, ohne Beschriftung davor -- die Karte selbst ist die Zeile. */
  .kartentabelle tbody th[scope="row"] {
    display: block;
    border: 0;
    padding: 0 0 0.3rem;
    text-align: left;
    font-size: 1.05rem;
    /* Auch die Ueberschrift der Karte muss umbrechen duerfen -- sonst
       spreizt ein langer Eintrag ("Morgenmail (Fristen und Termine …)")
       die Karte wieder ueber den Bildschirm hinaus. */
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .kartentabelle tr {
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: 0.5rem 0.7rem;
    margin-bottom: 0.7rem;
    background: var(--flaeche);
  }
  .kartentabelle tbody tr:hover {
    background: var(--flaeche);
  }
  /* Die Zelle ist ein Block, kein Flex-Kasten. Mit display:flex wird jedes
     Stueck in der Zelle zu einem eigenen Element derselben Zeile: Gericht,
     Aktenzeichen und die Marker standen dann nebeneinander statt
     untereinander, die Zelle wurde breiter als das Telefon und die Karte
     liess sich seitlich wegziehen -- links fehlten die Beschriftungen,
     rechts die Werte.
     Als Block flaettert der Inhalt so um, wie er es ueberall sonst tut. */
  .kartentabelle td {
    display: block;
    border: 0;
    padding: 0.2rem 0;
    white-space: normal;
    text-align: left;
    /* Ein Aktenzeichen ohne Leerzeichen darf notfalls umbrechen, statt die
       Karte aufzuspreizen. */
    overflow-wrap: anywhere;
  }
  .kartentabelle td[data-label]::before {
    content: attr(data-label);
    display: inline-block;
    /* min-width statt width: eine lange Ueberschrift ("geführte
       Betreuungen") schiebt den Wert dann auf die naechste Zeile, statt
       aus dem Kasten zu laufen. */
    min-width: 6.5rem;
    margin-right: 0.6rem;
    vertical-align: top;
    font-weight: 600;
  }
  .kartentabelle td.zeilenwerkzeuge {
    padding-top: 0.5rem;
  }
  .kartentabelle td .hilfetext {
    display: inline;
    margin-left: 0.3rem;
  }
}

/* Erinnerungsleiste im Kalender: auf dem Handy eingeklappt, der Kopf
   nennt die Zahl ("3 Erinnerungen"), darunter erst die Zeilen. */
.erinnerungs-leiste > summary.kopf {
  cursor: pointer;
  margin: 0;
}
.erinnerungs-leiste .zeilen {
  margin-top: 0.25rem;
}

/* Kalender auf dem Handy: Hinweis auf Tages- und Listenansicht; die
   Monatsansicht zeigt dort nur Punkte. Nur unter 640px sichtbar. */
.kalender-handy {
  display: none;
}
@media (max-width: 640px) {
  .kalender-handy {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin: 0 0 0.8rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: var(--flaeche-gedaempft);
  }
  .kalender-handy .knopf {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* Startseite am Desktop kompakter: weniger Innenabstand in den Karten,
   der KI-Kasten als Klappe (startseite.js merkt sich den Zustand). */
.seite-start .karte {
  padding: 0.8rem 1rem;
  margin-bottom: 0.75rem;
}
.seite-start .start-knoepfe {
  margin: 0.2rem 0 0.4rem;
}
/* "Beleg erfassen": das Dateifeld liegt unsichtbar ueber dem Knopf --
   Tippen oeffnet am Handy die Kamera, die Tastatur erreicht das Feld
   selbst, der Rahmen zeigt den Fokus am Knopf. */
.datei-formular {
  display: inline-flex;
  gap: 0.4rem;
  margin: 0;
}
.datei-knopf {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.datei-knopf input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.datei-knopf:focus-within {
  outline: 2px solid var(--akzent);
  outline-offset: 1px;
}
.datei-knopf.laedt {
  opacity: 0.6;
  pointer-events: none;
}
.seite-start .kopfzeile {
  margin-bottom: 0.6rem;
}
#tageshilfe > summary .marker {
  font-weight: 400;
}
#tageshilfe .tageshilfe-inhalt {
  margin-top: 0.4rem;
}

/* Startseite: Kopf mit Umschalter "Meins | Ganzes Buero", drei Knoepfe,
   Hinweiszeilen, Klappkoepfe mit Vorschau, auf dem Handy die Knoepfe einer
   Frist hinter "…" und die Karte Verguetung. */
.start-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1rem;
}
.start-kopf h1 {
  margin: 0;
}
.sichtwahl {
  display: inline-flex;
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius);
  overflow: hidden;
}
.sichtwahl a {
  padding: 0.4rem 0.9rem;
  color: var(--text);
  text-decoration: none;
  background: var(--flaeche);
}
.sichtwahl a + a {
  border-left: 1px solid var(--rand-stark);
}
.sichtwahl a[aria-current="page"] {
  background: var(--akzent);
  color: var(--akzent-text);
  font-weight: 600;
}
.sichtwahl a:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: -2px;
}
.start-stand {
  margin: 0.2rem 0 0.4rem;
}
.neu-menue {
  position: relative;
}
.neu-menue > summary {
  list-style: none;
}
.neu-menue > summary::-webkit-details-marker {
  display: none;
}
.neu-liste {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.25rem);
  left: 0;
  min-width: 11rem;
  display: flex;
  flex-direction: column;
  background: var(--flaeche);
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.neu-liste a {
  padding: 0.55rem 0.9rem;
  color: var(--text);
  text-decoration: none;
}
.neu-liste a:hover,
.neu-liste a:focus-visible {
  background: var(--akzent-schwach);
}
.start-hinweise {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.9rem;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
}
.start-hinweise li {
  padding: 0.2rem 0;
}
.start-hinweis-titel {
  font-weight: 600;
}
.start-hinweise li.start-hinweis-achtung {
  color: var(--warnung);
}
.klapp-vorschau {
  font-weight: 400;
  color: var(--text-gedaempft);
  margin-left: 0.3rem;
}
.start-unterkopf {
  margin: 0.8rem 0 0.3rem;
}
.start-fuss {
  margin: 0.6rem 0 0;
}
details.zeilen-aktionen > summary {
  display: inline-block;
  padding: 0.2rem 0.8rem;
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius);
  font-weight: 700;
}
details.zeilen-aktionen > summary::before {
  content: none;
}
/* Auf dem Handy: Datum und "…" in einer Zeile, darunter Titel und Akte.
   Fristtyp, Zustaendigkeit und der Verschiebungsgrund stehen auf der
   Frist selbst -- hier nahm eine Zeile sonst ein Drittel des Bildschirms. */
@media (max-width: 640px) {
  .seite-start .fristzeile {
    flex-wrap: wrap;
    gap: 0.15rem 0.5rem;
  }
  .seite-start .fristzeile-datum {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.4rem;
    text-align: left;
  }
  .seite-start .fristzeile-datum .tag,
  .seite-start .fristzeile-datum .jahr {
    display: inline;
  }
  .seite-start .fristzeile .zeilen-aktionen {
    order: 1;
    flex: none;
  }
  .seite-start .fristzeile-inhalt {
    order: 2;
    flex: 1 1 100%;
  }
  .seite-start .fristzeile .zeilen-aktionen[open] {
    order: 3;
    flex: 1 1 100%;
    text-align: right;
  }
  .seite-start .fristzeile .zeilen-aktionen[open] .fristzeile-aktion {
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 0.3rem;
  }
  .seite-start .zusatz-typ,
  .seite-start .zusatz-zustaendig,
  .seite-start .verschiebung-text,
  .seite-start .zusatz-akte .trenner {
    display: none;
  }
}
.seite-start .kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.6rem;
}
.seite-start .kennzahl .wert {
  display: block;
  font-size: 1.4rem;
}
.seite-start .kennzahl .beschriftung {
  display: block;
}
.seite-start .kennzahl-summe {
  border-color: var(--akzent);
  background: var(--akzent-schwach);
}
.antragsliste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.antragsliste li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--rand);
}
.antragsliste li:last-child {
  border-bottom: none;
}
.antrag-datum {
  flex: 0 0 8rem;
  font-variant-numeric: tabular-nums;
}
.antrag-datum.ist-faellig {
  color: var(--fehler);
  font-weight: 600;
}
.antrag-betrag {
  margin-left: auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Kopfzeile: Marke, Suchlupe und Menueknopf bleiben unterhalb von 1140px
   in einer Zeile; nur die aufgeklappte Navigation nimmt eine eigene. */
@media (max-width: 1140px) {
  .kopf-innen {
    flex-wrap: wrap;
    row-gap: 0;
  }
  .marke {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* Screenreader: Tabellen mit versteckter Ueberschrift (caption) und
   versteckter Spaltenueberschrift "Aktionen" -- die Klasse .nur-vorlesen
   steht im Block des Koordinators weiter oben. */
caption.nur-vorlesen {
  position: absolute;
}

/* --- Lebenszyklus der Akte (Zeitstrahl, Ampel, Historie) --- */
.pruefliste { list-style: none; margin: 0; padding: 0; }
.pruefpunkt { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .5rem; padding: .35rem 0; border-top: 1px solid var(--rand); }
.pruefpunkt:first-child { border-top: 0; }
.pruefpunkt .hilfetext { flex-basis: 100%; margin-left: 1.3rem; }
/* Ampel aus der Farbtafel (hell, dunkel, hoher Kontrast); der Zustand steht
   daneben zusaetzlich als Wort (.ampelwort) -- Farbe allein reicht nicht. */
.pruefpunkt .ampelpunkt { width: .8rem; height: .8rem; border-radius: 50%; display: inline-block; flex: 0 0 auto; background: var(--erfolg); }
.pruefpunkt.hinweis .ampelpunkt { background: var(--warnung); }
.pruefpunkt.fehlt .ampelpunkt { background: var(--fehler); }
.pruefpunkt .ampelwort {
  display: inline-block; padding: 0 .45rem; border-radius: 999px;
  font-size: 1rem; font-weight: 600;
  color: var(--erfolg); background: var(--erfolg-flaeche); border: 1px solid var(--erfolg);
}
.pruefpunkt.hinweis .ampelwort { color: var(--warnung); background: var(--warnung-flaeche); border-color: var(--warnung); }
.pruefpunkt.fehlt .ampelwort { color: var(--fehler); background: var(--fehler-flaeche); border-color: var(--fehler); }
.ampelkarte.ampel-rot { border-left: 5px solid var(--fehler); }
.ampelkarte.ampel-gelb { border-left: 5px solid var(--warnung); }
.ampelkarte.ampel-gruen { border-left: 5px solid var(--erfolg); }

.zeitstrahl { list-style: none; margin: 0; padding: 0 0 0 .6rem; border-left: 3px solid var(--rand-stark); }
/* Eigenes Raster: .station ist auch die Schrittkarte der Ablaeufe (2rem-Spalte,
   Rahmen) -- die Datumsspalte lief sonst in den Text. */
.zeitstrahl .station { position: relative; display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: .1rem .6rem; align-items: baseline; padding: .25rem 0 .55rem .9rem; border: 0; border-radius: 0; background: none; box-shadow: none; }
.zeitstrahl .station-text { min-width: 0; overflow-wrap: anywhere; }
.zeitstrahl .station-text .marker { white-space: normal; }
@media (max-width: 640px) { .zeitstrahl .station { grid-template-columns: minmax(0, 1fr); } }
.zeitstrahl .station::before { content: ""; position: absolute; left: -.6rem; top: .55rem; width: .75rem; height: .75rem; border-radius: 50%; background: var(--akzent); border: 2px solid var(--flaeche); }
.zeitstrahl .station.tod::before, .zeitstrahl .station.ende::before { background: var(--text-gedaempft); }
.zeitstrahl .station.zukunft::before { background: var(--flaeche); border-color: var(--akzent); }
.zeitstrahl .station-datum { display: inline-block; min-width: 6.2rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.zeitstrahl .station-text .hilfetext { display: block; }

details.historie { margin-top: .25rem; }
details.historie summary { cursor: pointer; }
.historie-liste { margin: .3rem 0 0; padding-left: 1.1rem; }
.historie-liste li { margin-bottom: .4rem; }

/* --- Anbindungen (Ampeln), einklappbare Einstellungsabschnitte, Datenblatt, Assistent --- */

/* Einstellungsseiten KI und Telefon: das Noetige offen, der Rest hinter "Mehr". */
.einstellungen-mehr {
  margin: 0.8rem 0;
  border-top: 1px solid var(--rand);
  padding-top: 0.6rem;
}
.einstellungen-mehr > summary,
.einstellungen-abschnitt > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.3rem 0;
}
.einstellungen-abschnitt > summary .titelzeile {
  font-size: 1.1rem;
}
.einstellungen-abschnitt[open] > summary {
  margin-bottom: 0.6rem;
}

/* Die Ampel je Anbindung: ein Punkt, dann der Zustand in Worten. */
.ampel {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  white-space: nowrap;
}
.ampel::before {
  content: "";
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--text-gedaempft);
  flex: 0 0 auto;
}
.ampel.gruen::before {
  background: var(--erfolg);
}
.ampel.gelb::before {
  background: var(--warnung);
}
.ampel.rot::before {
  background: var(--fehler);
}
.anbindungen-tabelle td {
  vertical-align: top;
}
.anbindungen-tabelle .werkzeuge {
  flex-wrap: wrap;
}
/* Verlauf der letzten Tage je Anbindung. */
.ampelverlauf {
  display: flex;
  gap: 0.2rem;
  margin-top: 0.3rem;
}
.ampelpunkt {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--text-gedaempft);
}
.ampelpunkt.gruen {
  background: var(--erfolg);
}
.ampelpunkt.gelb {
  background: var(--warnung);
}
.ampelpunkt.rot {
  background: var(--fehler);
}
/* Rollenliste im Kontoformular und Verlauf der Einstellungsseiten. */
.rollenliste dt {
  font-weight: 600;
  margin-top: 0.4rem;
}
.rollenliste dd {
  margin: 0.1rem 0 0 0;
}
.verlaufsliste {
  padding-left: 1.1rem;
}
.verlaufsliste li {
  margin-bottom: 0.3rem;
}

/* Datenblatt "Was hinausgeht": Begriff und Erklaerung nebeneinander, druckbar. */
.datenblatt-liste {
  display: grid;
  grid-template-columns: minmax(10rem, 16rem) 1fr;
  gap: 0.5rem 1.2rem;
  margin: 0;
}
.datenblatt-liste dt {
  font-weight: 600;
}
.datenblatt-liste dd {
  margin: 0;
}
@media (max-width: 640px) {
  .datenblatt-liste {
    grid-template-columns: 1fr;
  }
}

/* Der Fuenf-Schritte-Assistent der Telefonanlage. */
.assistent-fortschritt {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.assistent-fortschritt li {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--rand-stark);
  font-size: 1rem;
}
.assistent-fortschritt li.erledigt {
  background: var(--erfolg-flaeche);
  color: var(--erfolg);
  border-color: transparent;
}
.assistent-fortschritt li.aktuell {
  background: var(--akzent-schwach);
  color: var(--akzent);
  border-color: transparent;
  font-weight: 600;
}
.assistent-schritt {
  border-left: 3px solid var(--rand-stark);
  padding-left: 1rem;
  margin-bottom: 1.2rem;
}
.assistent-schritt.erledigt {
  border-left-color: var(--erfolg);
}
.assistent-schritt.aktuell {
  border-left-color: var(--akzent);
}
.assistent-schritt h2 {
  margin-top: 0;
}

/* --- Fristen -- Sammelaktion, Auswahlkaestchen, Unterschriftszeile, Pruefknopf --- */

.fristzeile-auswahl {
  display: flex;
  align-items: center;
  padding-right: 0.5rem;
}

.fristzeile-auswahl input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
}

.sammelaktion .hilfetext {
  display: block;
}

.inline-formular {
  display: inline-block;
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* Abzeichenbarer Tagesausdruck: drei Linien fuer Name, Datum, Unterschrift. */
.unterschriftszeile {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
  padding-top: 0.5rem;
}

.unterschriftszeile > div {
  flex: 1 1 12rem;
  font-size: 1rem;
}

.unterschriftslinie {
  display: block;
  border-bottom: 1px solid currentColor;
  height: 2rem;
  margin-bottom: 0.25rem;
}

/* --- Eingangskorb als Sortiertisch, Quittung, Papierkorb --- */
.korb-zeile.hat-fehler {
  outline: 2px solid var(--fehler);
  outline-offset: 4px;
  border-radius: 6px;
}
.korb-zeile .korb-uebernehmen {
  align-self: end;
}

/* Erst sehen, dann sortieren: links die erste Seite, rechts der Sortiertisch,
   je zur Hälfte. Ein Klick auf die Seite öffnet die Detailansicht. */
.korb-karte {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.korb-karte-inhalt {
  min-width: 0;
}
.korb-vorschau {
  display: block;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  cursor: zoom-in;
}
.korb-vorschau img {
  display: block;
  width: 100%;
  height: auto;
}
.korb-vorschau .leer {
  display: block;
  padding: 3rem 1rem;
  text-align: center;
}
@media (max-width: 1140px) {
  .korb-karte {
    grid-template-columns: minmax(0, 1fr);
  }
  .korb-vorschau {
    max-width: 30rem;
  }
}

/* Detailansicht eines Schreibens: das Schreiben füllt die Höhe, der
   Sortiertisch bleibt beim Blättern im Schreiben stehen. */
.korb-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.korb-detail .dateiansicht iframe {
  height: calc(100vh - 11rem);
}
.korb-detail-arbeit {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}
@media (max-width: 1140px) {
  .korb-detail {
    grid-template-columns: minmax(0, 1fr);
  }
  .korb-detail-arbeit {
    position: static;
    max-height: none;
  }
}
.meldung ul.quittung {
  margin: 0.4rem 0 0 1.2rem;
  padding: 0;
}
.meldung ul.quittung li {
  margin: 0.15rem 0;
}
#weitergegeben .fristzeile-inhalt strong {
  overflow-wrap: anywhere;
}

/* --- Finanzen -- Saldo, Storno, Import, Regeln --- */
.saldokasten .kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.8rem;
  margin-bottom: 0.6rem;
}
.saldokasten .kennzahl .wert {
  font-size: 1.5rem;
}
tr.buchung-storno td {
  text-decoration: line-through;
  text-decoration-color: var(--text-gedaempft);
  opacity: 0.75;
}
tr.buchung-storno td .marker,
tr.buchung-storno td .knopf {
  text-decoration: none;
}
tr.importzeile-unlesbar td {
  color: var(--text-gedaempft);
  background: var(--flaeche);
}
.regelliste {
  margin: 0.3rem 0 0.6rem 1.2rem;
  line-height: 1.6;
}
.belegwahl-frei {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.belegwahl-frei select {
  flex: 1 1 18rem;
  min-width: 0;
}

/* --- Handbuch als Webseite, Glossar, Rechtsangaben --- */
.handbuch {
  max-width: 48rem;
  line-height: 1.55;
}
.handbuch-kapitel {
  margin-top: 2rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rand);
  scroll-margin-top: 4rem;
}
.handbuch-kapitel:first-child {
  margin-top: 0;
  border-top: 0;
}
.handbuch-code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 1em;
  padding: 0.5rem 0.7rem;
  background: var(--flaeche-gedaempft);
}
.handbuch-verzeichnis {
  columns: 2 16rem;
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.handbuch-verzeichnis li {
  break-inside: avoid;
  margin-bottom: 0.2rem;
}
/* Verschachtelt: der Buchteil als Eintrag,
   seine Kapitel als Liste darin. */
.handbuch-verzeichnis > li {
  break-inside: auto;
}
.handbuch-verzeichnis ul {
  list-style: none;
  margin: 0.2rem 0 0.4rem;
  padding-left: 0;
  font-weight: normal;
  color: var(--text);
}
.handbuch-verzeichnis-teil {
  font-weight: 600;
  color: var(--akzent);
  margin-top: 0.6rem;
}
.handbuch-zurueck {
  margin: 1.5rem 0 0;
}
/* Ein Buchteil im Fließtext: großer Zwischentitel mit Linie, wie die
   Titelseite eines Teils im PDF. */
.handbuch-teil {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 3px solid var(--akzent);
  color: var(--akzent);
  font-size: 1.6rem;
}
.handbuch-teil:first-child {
  margin-top: 0;
}
.handbuch-teil-satz {
  font-size: 1.1rem;
  color: var(--text-gedaempft);
}
/* Die Kästen des Handbuchs in denselben Farben wie im PDF: blau "Gut zu
   wissen", rot "Achtung", sandfarben "Aus dem Alltag" (die Szenen, die
   einen Ablauf an einem Beispiel zeigen) und grau "Auf einen Blick" (die
   Kurzfassung am Kapitelanfang). Text immer in der Grundfarbe -- farbiger
   Fließtext liest sich schlecht, die Farbe trägt der Rand. */
.handbuch .hinweiskasten {
  color: var(--text);
}
.handbuch-hinweis {
  border-left-color: var(--akzent);
  background: var(--akzent-schwach);
}
.handbuch-warnung {
  border-left-color: var(--fehler);
  background: var(--fehler-flaeche);
}
.handbuch-alltag {
  border-left-color: var(--warnung);
  background: var(--warnung-flaeche);
}
.handbuch-kurz {
  border-left-color: var(--rand-stark);
  background: var(--flaeche-gedaempft);
}
.handbuch-kasten-titel {
  display: block;
  margin-bottom: 0.25rem;
}
.handbuch-schritte > li {
  margin-bottom: 0.35rem;
}
.glossar dt,
#glossar,
#tastenkuerzel,
.glossar-buchstabe {
  scroll-margin-top: 4rem;
}
.glossar-abc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
  margin: 0.6rem 0;
}
.glossar-buchstabe {
  margin: 1rem 0 0.3rem;
  color: var(--akzent);
}
.schnelleinstiege,
.neuigkeiten,
.papierkorb-uebersicht,
.erklaerkapitel {
  margin: 0.3rem 0 0;
  padding-left: 1.2rem;
}
.schnelleinstiege li,
.neuigkeiten li,
.papierkorb-uebersicht li {
  margin-bottom: 0.35rem;
}
.rechtsangabe {
  display: inline;
  font-style: italic;
}

/* --- Aufgaben (Sammelleiste, Zustaendig, Timer, Entfallen) --- */

.sammel-kaestchen {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0.35rem 0.4rem 0 0;
  flex: 0 0 auto;
}

.sammelleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
  margin-top: 1rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche-gedaempft);
}

.sammelleiste-titel {
  font-weight: 600;
}

.sammel-feld {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.aufgabenzustaendig {
  display: inline-block;
  padding: 0 0.35rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
}

.entfallen-form,
.timer-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.entfallen-form input[type="text"] {
  flex: 1 1 14rem;
}

/* --- Kalender (Agenda, Anrufen/Route, Ebenenknoepfe) --- */

.kal-eintragzeile {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.kal-eintragzeile .kal-eintrag {
  flex: 1 1 auto;
  min-width: 0;
}

.kal-unterwegs {
  flex: 0 0 auto;
  text-decoration: none;
  padding: 0 0.2rem;
}

.kal-art {
  font-weight: 600;
}

.kalenderagenda .agenda-tag {
  padding: 0.6rem 0;
  border-top: 1px solid var(--rand);
}

.kalenderagenda .agenda-tag.heute {
  background: var(--akzent-schwach);
  border-radius: var(--radius);
  padding: 0.6rem;
}

.kalenderagenda .agenda-tagtitel {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.kalenderagenda .agenda-abschnitt {
  margin: 1rem 0 0.3rem;
  font-size: 1rem;
}

.kalenderagenda .kal-eintragzeile {
  margin-bottom: 0.35rem;
}

.ebenen-leiste button.ebene-chip {
  font: inherit;
  cursor: pointer;
}

.vorschau-unterwegs {
  margin: 0 0 0.6rem;
}

/* --- Meine Ablage --- */

.ablagenotiz .ablage-zuordnen {
  margin-top: 0.4rem;
}

/* --- Sortierung, Auswahlsuche, Fehlersammlung --- */

/* Sortierbare Spaltenkoepfe (apps/core/sortierung.py): der ganze Kopf ist
   der Link, der Pfeil zeigt den Stand; aria-sort sagt ihn dem Screenreader. */
th .sortierlink {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  min-height: 1.5rem;
  color: inherit;
  text-decoration: none;
}
th .sortierlink:hover,
th .sortierlink:focus-visible {
  text-decoration: underline;
}
.sortierpfeil {
  color: var(--text-gedaempft);
}
.sortierlink.aktiv .sortierpfeil,
.sortierleiste .wichtig .sortierpfeil {
  color: inherit;
}
.sortierleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: 0.4rem 0 0.6rem;
}
.sortierleiste .sortierpfeil {
  margin-left: 0.3rem;
}
.sortierleiste-titel {
  font-weight: 600;
}

/* Tippfeld vor langen Auswahllisten (js/auswahlsuche.js). */
.auswahlsuche {
  margin-bottom: 0.3rem;
}
.auswahlsuche-feld {
  width: 100%;
  max-width: 24rem;
  font-size: 1rem;
}
.werkzeuge .auswahlsuche {
  margin-bottom: 0;
}
.werkzeuge .auswahlsuche-feld {
  width: 12rem;
}

/* Sammelmeldung mit Feldnamen ueber einem Formular (KI-Einstellungen). */
.fehlersammlung ul {
  margin: 0.3rem 0 0;
  padding-left: 1.2rem;
}
.fehlersammlung a {
  color: inherit;
  font-weight: 600;
}

/* ============================================ Bedienen mit dem Finger */
/*
 * Am Schreibtisch zielt die Maus auf den Punkt genau; auf dem Handy trifft
 * die Fingerkuppe rund einen Zentimeter breit. Alles, was zum Antippen da
 * ist, braucht darum am Telefon mehr Platz als am Bildschirm -- die
 * Richtgroesse sind 44 Punkte.
 *
 * "pointer: coarse" trifft Geraete, die mit dem Finger bedient werden, und
 * laesst Maus und Stift unberuehrt. Am Schreibtisch aendert sich also
 * nichts.
 */
@media (pointer: coarse) {
  /* Kaestchen und Punkte: gross genug, um sie sicher zu treffen. Die
     Stellen mit eigener Groesse stehen mit dabei -- sonst behielte ihre
     genauere Regel die Oberhand und das Kaestchen bliebe klein. */
  input[type="checkbox"],
  input[type="radio"],
  .ankreuzzeile input[type="checkbox"],
  .mehrfachauswahl input[type="checkbox"],
  .umsatzzeile-haken input[type="checkbox"],
  .folgen-zeile input[type="checkbox"],
  .fristzeile-auswahl input[type="checkbox"],
  .sammel-kaestchen {
    width: 1.5rem;
    height: 1.5rem;
  }

  /* Der runde Haken an Aufgaben und Fristen bleibt so gross, wie er
     aussieht -- die Trefferflaeche darum herum waechst unsichtbar mit. */
  .erledigt-knopf,
  .knopf.klein,
  .ebene-chip,
  .kal-eintrag {
    position: relative;
  }
  .erledigt-knopf::after,
  .knopf.klein::after,
  .ebene-chip::after,
  .kal-eintrag::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
}

/* Felder und Abschnitte, die ein Skript ausblendet (kontaktfelder.js)
   .formularzeile und fieldset haben eigene display-Regeln, gegen die das
   Attribut hidden sonst nicht ankommt. */
.formularzeile[hidden],
fieldset.formularabschnitt[hidden] {
  display: none;
}

/* ========================================= Kontakte */
/* Akte, Reiter Kontakte: eine Ueberschrift je Rolle. */
.kontaktgruppe {
  margin: 1.25rem 0 0.5rem;
  font-size: 1.05rem;
}
.kontaktgruppe:first-of-type {
  margin-top: 0.5rem;
}

/* Fruehere Kontakte, Verlauf der Kontaktseite, Dublettengruppen:
   schlichte Listen mit etwas Luft zwischen den Eintraegen. */
.fruehere-kontakte,
.kontaktverlauf,
.dublettengruppe {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fruehere-kontakte li,
.kontaktverlauf li,
.dublettengruppe li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rand);
  overflow-wrap: anywhere;
}
.fruehere-kontakte li:last-child,
.kontaktverlauf li:last-child,
.dublettengruppe li:last-child {
  border-bottom: 0;
}
.fruehere-kontakte form,
.dublettengruppe form {
  display: inline;
}
.kontaktverlauf-zeit {
  display: inline-block;
  min-width: 6.5em;
  font-variant-numeric: tabular-nums;
}

/* ========================================= Fristen */
/* „Wiedervorlage …“: ein Knopf, darunter Titel und die Abstaende. Am
   Schreibtisch klappt das Feld unter dem Knopf auf, auf dem Handy im Fluss
   der Seite -- dort waere ein schwebendes Feld am Rand abgeschnitten. */
.schnell-wiedervorlage > summary {
  cursor: pointer;
}
.schnell-wiedervorlage-formular {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.4rem;
  padding: 0.75rem;
  max-width: 100%;
  background: var(--flaeche);
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius);
}
.schnell-wiedervorlage-formular input[type="text"] {
  width: 100%;
}
@media (min-width: 641px) {
  .schnell-wiedervorlage-formular {
    position: absolute;
    z-index: 20;
    right: 0;
    top: calc(100% + 0.25rem);
    width: 22rem;
    max-width: calc(100vw - 2rem);
    margin-top: 0;
    box-shadow: var(--schatten);
  }
}

/* Belege der Frist: Herkunft, Versand, Notizen -- schlichte Listen. */
.fristbelege h3 {
  margin: 1rem 0 0.4rem;
  font-size: 1.05rem;
}
.fristbelege h3:first-of-type {
  margin-top: 0.25rem;
}
.fristbeleg + .fristbeleg {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rand);
}
.fristbelege-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fristbelege-liste li {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--rand);
  overflow-wrap: anywhere;
}
.fristbelege-liste li:last-child {
  border-bottom: 0;
}

/* Fristenkontrolle unter der Tagesuebersicht und im Kontrollbuch. */
.fristenkontrolle {
  margin-top: 1.25rem;
}
.fristenkontrolle h3 {
  margin-bottom: 0.4rem;
}
tr.ohne-kontrolle td {
  color: var(--text-gedaempft);
}

/* Fristvorschlag: „Passt zu einer laufenden Frist“ nimmt die ganze Breite. */
.frist-felder label.frist-ziel {
  flex-basis: 100%;
}
.frist-felder label.frist-ziel select {
  max-width: 100%;
}

/* ========================================= Aufgaben */
/* Checkliste: der Titel klappt zum Aendern auf, rechts Hoch/Runter/Entfernen. */
.teilzeile .teil-aendern {
  flex: 1 1 auto;
  min-width: 0;
}
.teilzeile .teil-aendern > summary {
  cursor: pointer;
  list-style: none;
  overflow-wrap: anywhere;
}
.teilzeile .teil-aendern > summary::-webkit-details-marker {
  display: none;
}
.teilzeile .teil-aendern[open] > summary {
  margin-bottom: 0.3rem;
}
.teilzeile .teil-werkzeuge {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
  flex: 0 0 auto;
}
.teilzeile .teil-werkzeuge form {
  line-height: 0;
}

/* Verlauf der Aufgabe: Zeitpunkt und Person klein vorneweg. */
.verlaufszeile {
  flex-wrap: wrap;
  gap: 0.2rem 0.55rem;
}
.verlaufszeile > span:last-child {
  flex: 1 1 18rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Erreichbarkeit des Empfaengers unter „Verknuepft“ und in der Vorschau. */
.verweise .erreichbar {
  margin: 0.25rem 0 0;
  padding-left: 1rem;
  list-style: disc;
}
.verweise .erreichbar li {
  margin-bottom: 0.15rem;
}
.vorschau-zeile .erreichbar {
  margin: 0.2rem 0 0;
  padding-left: 1rem;
}

/* Etiketten pflegen: eine Zeile je Etikett. */
.etikettzeile {
  padding: 0.55rem 0;
  border-top: 1px solid var(--rand);
}
.etikettzeile:first-of-type {
  border-top: 0;
}
.etikettzeile-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.55rem;
  margin-bottom: 0.35rem;
}
.etikettzeile-felder {
  align-items: center;
}
.etikettzeile-felder input[type="text"] {
  flex: 1 1 12rem;
  min-width: 0;
}

/* Die Statusknoepfe der Aufgabe: der gewaehlte Status nicht in voller
   Hoehe, wenn das Feld „Entfallen lassen“ umbricht. */
.karte > .werkzeuge[aria-label="Status setzen"] {
  align-items: flex-start;
}

/* ========================================= Kalender */
/* Abgesagt: durchgestrichen statt geloescht. Nicht angetroffen hat
   stattgefunden -- nur schraeg, der Text sagt den Rest. */
.kal-eintrag.abgesagt {
  text-decoration: line-through;
  opacity: 0.75;
}

.kal-eintrag.nicht-angetroffen {
  font-style: italic;
}

/* Ueberschneidung derselben Person: roter Rand; der Text dazu steht fuer
   Vorleser in der Zeile. */
.kal-eintrag.ueberschneidung {
  outline: 2px solid var(--fehler);
  outline-offset: -2px;
}

/* Abwesenheit: wer nicht da ist, schraeg gesetzt. */
.kal-eintrag.abwesenheit {
  font-style: italic;
}

/* Tag und Woche: „10:00–11:00“ vor dem Titel. */
.kal-zeit {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Freie Zeit zwischen zwei Terminen. */
.kal-luecke {
  margin: 0.2rem 0 0.2rem 1rem;
  padding-left: 0.6rem;
  border-left: 2px dotted var(--rand-stark);
  color: var(--text-gedaempft);
}

.vorschau-nachher,
.vorschau-absagen {
  margin: 0.6rem 0;
}

/* Der Plan zum Mitnehmen. */
.terminplan-tag {
  margin: 1rem 0 0.4rem;
  font-size: 1.1rem;
}

.terminplan-tabelle tr.abgesagt td {
  text-decoration: line-through;
}

.nur-drucken {
  display: none;
}

/* ========================================= Kommunikation */
/* Stoerungen oben auf der Startseite, Schriftverkehr der Akte. */
.start-stoerungen ul {
  margin: 0.3rem 0 0;
  padding-left: 1.2rem;
}

.start-stoerungen li {
  margin: 0.15rem 0;
}

.schriftverkehr .marker {
  white-space: nowrap;
}

/* ========================================= Schmale Bildschirme: Sicherheitsnetz */
/* Ueberlaufende Stellen einzeln zu fangen -- eine lange Mailadresse hier,
   ein Kennzeichen dort -- reicht nicht: Jede neue Seite braechte neue. Mit
   groesserer Systemschrift am Telefon wird ein 375-px-Bildschirm praktisch zu
   300 px, und dann liefe an vielen Stellen Text ueber. Deshalb gilt unter 640 px fuer alles:
   * lange Woerter werden getrennt (deutsche Silbentrennung, sonst notfalls
     mitten im Wort -- Aktenzeichen, Dateinamen, Mailadressen);
   * Kennzeichen (.marker) duerfen umbrechen;
   * Feldgruppen, Auswahllisten und Eingabefelder werden nie breiter als
     ihr Platz -- ein <fieldset> ist sonst nie schmaler als sein breitester
     Inhalt, und eine lange Auswahlliste zieht die Seite auf.
   Tabellen, die bewusst seitlich rollen, behalten ihre Woerter ganz. */
@media (max-width: 640px) {
  body {
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  table:not(.kartentabelle) {
    overflow-wrap: normal;
    -webkit-hyphens: manual;
    hyphens: manual;
  }

  .marker {
    white-space: normal;
  }

  fieldset {
    min-width: 0;
  }

  select,
  input,
  textarea,
  img,
  video,
  iframe {
    max-width: 100%;
  }

  .einfuegeleiste .baustein-gruppe {
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
  }
}

/* ========================================= Akte: Erreichbarkeit, Hinweise */
/* Die Person selbst erreichen und was man vorher wissen muss. */

.akte-erreichbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 1rem;
  margin: 0.2rem 0 0.4rem;
}

.akte-erreichbar > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.akte-erreichbar .waehlform {
  display: inline;
}

.akte-hinweise {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.6rem;
}

.akte-hinweise-text {
  flex: 1 1 18rem;
}

/* ========================================= Aktenpaket zusammenstellen */
/* Vor dem Packen: jedes Dokument mit Haken. */

.aktenpaket fieldset.karte {
  min-width: 0;
}

.aktenpaket fieldset.karte > legend {
  padding: 0;
  float: left;
  width: 100%;
  margin-bottom: 0.6rem;
}

.aktenpaket fieldset.karte > legend + * {
  clear: both;
}

.paket-alle {
  margin-bottom: 0.8rem;
}

.paketgruppe {
  border: 0;
  margin: 0 0 1rem;
  padding: 0;
  min-width: 0;
}

.paketgruppe > legend {
  padding: 0.3rem 0;
  width: 100%;
  border-bottom: 1px solid var(--rand);
}

.paketzeile {
  padding: 0.35rem 0 0.35rem 1.6rem;
  border-bottom: 1px solid var(--rand);
}

.aktenpaket fieldset.karte > .paketzeile {
  padding-left: 0;
}

.paketzeile label {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.paketzeile label .hilfetext {
  display: block;
}

.paket-ansehen {
  flex: none;
  align-self: center;
}

.paket-stand {
  font-weight: 600;
  margin-top: 0;
}

/* Knoepfe und Umschalter haben eigene display-Regeln -- ohne diese Zeile
   bliebe, was das Skript verbirgt, trotzdem sichtbar. */
.paket-ansichtwahl[hidden],
.aktenpaket [hidden] {
  display: none;
}

/* Umschalter Liste / Vorschau -- wie .sichtwahl der Startseite, als Knoepfe. */
.paket-ansichtwahl button {
  padding: 0.4rem 0.9rem;
  color: var(--text);
  background: var(--flaeche);
  border: 0;
  font: inherit;
  cursor: pointer;
}

.paket-ansichtwahl button + button {
  border-left: 1px solid var(--rand-stark);
}

.paket-ansichtwahl button[aria-pressed="true"] {
  background: var(--akzent);
  color: var(--akzent-text);
  font-weight: 600;
}

.paket-ansichtwahl button:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: -2px;
}

/* Die Vorschau: links das Verzeichnis, rechts das Blatt. */
.paket-vorschau-raster {
  display: grid;
  grid-template-columns: minmax(15rem, 22rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.paket-verzeichnis {
  max-height: 80vh;
  overflow-y: auto;
  border-right: 1px solid var(--rand);
  padding-right: 0.5rem;
}

.paket-verzeichnis ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.paket-vz-gruppe {
  font-weight: 600;
  margin: 0.8rem 0 0.2rem;
}

.paket-vz-gruppe:first-child {
  margin-top: 0;
}

.paket-vz-eintrag {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.15rem 0.2rem;
  border-radius: var(--radius);
}

.paket-vz-eintrag input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.3rem;
  flex: none;
}

.paket-vz-titel {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  background: none;
  border: 0;
  padding: 0.15rem 0;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  overflow-wrap: anywhere;
}

.paket-vz-eintrag.gezeigt {
  background: var(--flaeche-gedaempft);
  outline: 2px solid var(--akzent);
  outline-offset: -2px;
}

.paket-vz-eintrag.gezeigt .paket-vz-titel {
  font-weight: 600;
}

/* Weggelassen: durchgestrichen, damit man es beim Blaettern sofort sieht. */
.paket-vz-eintrag.weggelassen .paket-vz-titel {
  text-decoration: line-through;
}

.paket-betrachter-kopf {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.paket-betrachter-titel {
  min-width: 0;
  flex: 1 1 16rem;
}

.paket-betrachter-titel h2 {
  margin: 0;
  overflow-wrap: anywhere;
}

.paket-betrachter-titel .hilfetext {
  margin: 0.2rem 0 0;
  overflow-wrap: anywhere;
}

.paket-betrachter-haken {
  font-weight: 600;
  white-space: nowrap;
}

.paket-betrachter-knoepfe {
  margin: 0.6rem 0;
  align-items: center;
}

.paket-betrachter-flaeche iframe {
  width: 100%;
  height: 72vh;
  min-height: 320px;
  border: 1px solid var(--rand);
  display: block;
  background: var(--flaeche-gedaempft);
}

.paket-betrachter-flaeche img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 0.6rem;
  border: 1px solid var(--rand);
}

.paket-betrachter-hilfe {
  margin: 0.5rem 0 0;
}

@media (max-width: 640px) {
  .paket-vorschau-raster {
    grid-template-columns: minmax(0, 1fr);
  }

  .paket-verzeichnis {
    max-height: 35vh;
    border-right: 0;
    border-bottom: 1px solid var(--rand);
    padding: 0 0 0.5rem;
  }
}

/* Auf dem Handy reicht der Dateiname -- der Pfad im Paket macht die Zeile
   dreimal so hoch. */
@media (max-width: 640px) {
  .paketzeile .paket-name {
    display: none;
  }
}

/* ================================================ Persoenliches */
/* Menue unter dem eigenen Namen, Papierkoerbe, Mein Konto, Hinweis vor der
   Abmeldung. */

/* Das Kuerzel steht sichtbar im Namen des Menues (Sprachsteuerung „BN
   klicken“); in der breiten Leiste nur das Kuerzel, im Handymenue dazu der
   volle Name. */
.persoenlich-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (max-width: 1140px) {
  .persoenlich-name {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }
}

.papierkorb-reiter {
  margin-bottom: 1rem;
}
.papierkorb-titel {
  margin: 0;
}
.papierkorb-zeile {
  margin: 0.2rem 0 0;
}
.papierkorb-leeren {
  margin-top: 1rem;
}
.eingabe-schmal {
  max-width: 14rem;
}

/* Mein Konto: Sprungleiste, Abschnittstitel, Wochentage, Unterschrift. */
.sprungleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
}
.abschnittstitel {
  margin: 1.5rem 0 0.6rem;
  scroll-margin-top: 4rem;
}
.karte[id] {
  scroll-margin-top: 4rem;
}
#passwort.schmal {
  margin-left: 0;
}
.wochentage {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
}
.unterschrift-bild {
  max-height: 80px;
  max-width: 320px;
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 4px;
  padding: 0.3rem;
}
.ablaufschritte li {
  margin-bottom: 0.7rem;
}

/* Der Hinweis zwei Minuten vor der Abmeldung. */
.sitzungshinweis {
  border: 1px solid var(--rand);
  border-radius: 12px;
  background: var(--flaeche);
  color: var(--text);
  width: min(94vw, 30rem);
  padding: 1rem 1.2rem;
  box-shadow: 0 14px 48px rgba(0, 0, 0, 0.35);
}
.sitzungshinweis::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.sitzungshinweis h2 {
  margin-top: 0;
}

/* Ausfuellbare Formulare: „Zwischenspeichern“ steht im Formular zuerst (Eingabetaste); */
/* angezeigt wird „PDF erzeugen“ vorn.                                    */
.formular-ausfuellen-aktionen .erzeugen-knopf {
  order: -1;
}
/* Die PDF-Feldnamen auf Wunsch unter jedem Feld -- auch am Handy. */
.formular-ausfuellen .pdf-feldname {
  display: none;
}
.formular-ausfuellen:has(#feldnamen-zeigen:checked) .pdf-feldname {
  display: block;
  margin: -0.4rem 0 0.8rem;
}
.feldnamen-schalter {
  margin-bottom: 0.8rem;
}

/* Seitenbilder (js/dateiansicht.js, js/aktenpaket.js): schon vor dem Laden */
/* so hoch wie ein A4-Blatt. Sonst sind alle noch leeren Bilder 0 px hoch,  */
/* liegen zugleich im Blick, und loading=lazy stoesst alle Rasterungen auf  */
/* einmal an. "auto": nach dem Laden gilt das echte Seitenformat, auch quer. */
.dateiansicht .seitenbilder img,
.paket-betrachter-flaeche .seitenbilder img {
  aspect-ratio: auto 1 / 1.414;
}
.paket-betrachter-flaeche .seitenbilder img {
  width: 100%;
}

/* Abgeschaltete Knoepfe als <span> (PDF-Nachweis im Zugriffsprotokoll,     */
/* Scanhelfer-Setup) sehen nicht aus wie aktive. Ohne pointer-events: none */
/* -- der title, warum es nicht geht, soll beim Zeigen erscheinen.          */
.knopf[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Aus der globalen Suche angesprungene Notiz (teil_notizliste.html setzt   */
/* id="notiz-<pk>" und an der gesuchten „hervorgehoben“): nicht unter der   */
/* Kopfleiste und deutlich markiert.                                       */
.notiz.hervorgehoben {
  border-color: var(--akzent);
  box-shadow: 0 0 0 2px var(--akzent);
  background: var(--akzent-schwach);
}
/* Im Kontrastmodus nimmt „html.darstellung-kontrast .notiz“ den Schatten   */
/* weg -- dort markiert ein kraeftiger Rand.                                 */
html.darstellung-kontrast .notiz.hervorgehoben {
  border-width: 4px;
  border-color: var(--akzent);
}

/* Offene Rechnungen zum Bezahlen: Angaben als zweispaltige Liste, auf dem */
/* Handy untereinander; der GiroCode gross genug zum Scannen.               */
.rechnung-ueberfaellig {
  border-left: 4px solid var(--fehler);
}
.rechnung-summe {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}
.rechnung-angaben {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1rem;
  margin: 0.75rem 0;
}
.rechnung-angaben dt {
  font-weight: 600;
}
.rechnung-angaben dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.rechnung-iban {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: 0.02em;
}
.girocode img {
  display: block;
  width: 240px;
  height: 240px;
  background: #fff;
  padding: 0.5rem;
  margin: 0.5rem 0;
}
/* Banking: Lage oben, je Akte eine Karte. */
.banking-zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
}
.banking-achtung,
.banking-ab {
  color: var(--fehler);
}
.banking-bedarf {
  border-left: 4px solid var(--fehler);
}
.banking-posten,
.banking-abrufe {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.banking-posten li {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  gap: 0.5rem;
}
.banking-abrufe li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.banking-abrufknopf {
  display: inline;
}
@media (max-width: 640px) {
  .rechnung-angaben {
    grid-template-columns: 1fr;
  }
  .rechnung-angaben dd {
    margin-bottom: 0.4rem;
  }
  .rechnung-summe {
    align-items: flex-start;
  }
}

/* ================================================= Schreibwerkstatt */
/* Der Editor braucht die ganze Breite und fast die ganze Hoehe; die Seite
   selbst scrollt dabei nicht. */
.seite-werkstatt main { max-width: none; padding: .75rem 1rem 1rem; }
.werkstatt-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .5rem 1rem; }
.werkstatt-kopf h1 { margin: 0; }
.werkstatt-rahmen {
  height: calc(100vh - 14rem);
  min-height: 32rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--flaeche);
}

/* ========================================================= Rundgang */
/* Die Einfuehrung: Lichtkegel auf dem Element, Sprechblase daneben. Der
   Lichtkegel ist nur Bild -- er faengt keine Klicks ab, damit die Seite bei
   Mitmach-Schritten bedienbar bleibt. */
.rundgang-licht {
  position: fixed;
  z-index: 900;
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 0 0 100vmax rgba(10, 20, 35, .52), 0 0 0 3px var(--akzent);
  pointer-events: none;
  transition: top .35s ease, left .35s ease, width .35s ease, height .35s ease;
}
.rundgang-licht.ohne-ziel { box-shadow: 0 0 0 100vmax rgba(10, 20, 35, .42); }
.rundgang-blase {
  position: fixed;
  z-index: 901;
  right: 1rem;
  bottom: 1rem;
  width: min(28rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow: auto;
  background: var(--flaeche);
  color: var(--text);
  border: 1px solid var(--rand-stark);
  border-top: 5px solid var(--akzent);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .12);
  padding: 1rem 1.15rem .8rem;
}
.rundgang-blase.bereit { animation: rundgang-auf .28s ease-out; }
.rundgang-an .rundgang-blase.bereit:not(.unten) { right: auto; bottom: auto; }
.rundgang-blase.mitte { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); }
.rundgang-blase.unten { left: .5rem; right: .5rem; bottom: .5rem; top: auto; width: auto; }
.rundgang-blase:focus { outline: 3px solid var(--akzent); outline-offset: 2px; }
.rundgang-blase h2 { margin: .35rem 0 .4rem; font-size: 1.3rem; }
.rundgang-kopf { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; color: var(--akzent); font-weight: 600; }
.rundgang-kapitel { display: inline-flex; align-items: center; gap: .4rem; }
.rundgang-zahl { color: var(--text-gedaempft); font-weight: 400; }
.rundgang-punkte { display: flex; gap: .3rem; list-style: none; margin: .55rem 0 0; padding: 0; }
.rundgang-punkte li { flex: 1; height: .35rem; border-radius: 999px; background: var(--rand-stark); }
.rundgang-punkte li.fertig { background: var(--akzent); }
.rundgang-punkte li.jetzt { background: var(--akzent); box-shadow: 0 0 0 2px var(--akzent-schwach); }
.rundgang-text { margin: 0 0 .6rem; line-height: 1.5; }
.rundgang-text kbd { border: 1px solid var(--rand-stark); border-bottom-width: 2px; border-radius: 4px; padding: 0 .3rem; background: var(--flaeche-gedaempft); font-family: inherit; }
.rundgang-auftrag { margin: 0 0 .7rem; padding: .45rem .6rem; border-radius: var(--radius); background: var(--warnung-flaeche); color: var(--text); border-left: 4px solid var(--warnung); }
.rundgang-auftrag.erledigt { background: var(--erfolg-flaeche); border-left-color: var(--erfolg); }
.rundgang-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.rundgang-knoepfe form, .rundgang-fuss form { margin: 0; }
.rundgang-fuss { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin-top: .7rem; padding-top: .55rem; border-top: 1px solid var(--rand); }
.rundgang-link { background: none; border: 0; padding: 0; color: var(--akzent); text-decoration: underline; cursor: pointer; font: inherit; }
.rundgang-pille {
  position: fixed;
  z-index: 880;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .7rem;
  max-width: calc(100vw - 2rem);
  padding: .55rem .8rem;
  background: var(--flaeche);
  border: 1px solid var(--rand-stark);
  border-left: 5px solid var(--akzent);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.rundgang-pille form { margin: 0; }
/* Auf dem Handy bricht die Leiste um -- als Pille wurde sie zur Blase. */
@media (max-width: 640px) {
  .rundgang-pille { left: .6rem; right: .6rem; bottom: .6rem; max-width: none; border-radius: calc(var(--radius) + 6px); }
}
.rundgang-symbol { flex: 0 0 auto; color: var(--akzent); }
@keyframes rundgang-auf { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rundgang-blase.mitte.bereit { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .rundgang-licht { transition: none; }
  .rundgang-blase.bereit { animation: none; }
}

/* Willkommen */
.rundgang-willkommen { max-width: 34rem; border: 0; border-top: 6px solid var(--akzent); border-radius: calc(var(--radius) + 8px); padding: 1.6rem 1.6rem 1.2rem; background: var(--flaeche); color: var(--text); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); text-align: center; }
.rundgang-willkommen::backdrop { background: rgba(10, 20, 35, .55); }
.rundgang-willkommen .formularaktionen { justify-content: center; }
.rundgang-willkommen-zeichen { display: inline-grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--akzent-schwach); }
.rundgang-willkommen-zeichen .rundgang-symbol { width: 2.2rem; height: 2.2rem; }

/* Die Rundgang-Zentrale */
.rundgang-buehne { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem 1.6rem; align-items: center; padding: 1.4rem 1.5rem; margin-bottom: 1rem; border-radius: calc(var(--radius) + 8px); background: linear-gradient(135deg, var(--akzent-schwach), var(--flaeche) 70%); border: 1px solid var(--rand); }
.rundgang-buehne h1 { margin: 0 0 .3rem; }
.rundgang-buehne p { margin: 0 0 .7rem; }
.rundgang-ring { width: 7.5rem; height: 7.5rem; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--akzent) calc(var(--prozent, 0) * 1%), var(--rand) 0); }
.rundgang-ring span { display: grid; place-items: center; width: 5.9rem; height: 5.9rem; border-radius: 50%; background: var(--flaeche); font-size: 1.4rem; font-weight: 700; text-align: center; line-height: 1.15; }
.rundgang-ring small { display: block; font-size: 1rem; font-weight: 400; color: var(--text-gedaempft); }
@media (max-width: 640px) { .rundgang-buehne { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.rundgang-kapitelliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.rundgang-karte { display: flex; flex-direction: column; gap: .45rem; height: 100%; margin: 0; border-top: 4px solid var(--rand-stark); }
.rundgang-karte.erledigt { border-top-color: var(--erfolg); }
.rundgang-karte.laeuft { border-top-color: var(--akzent); }
.rundgang-karte h2 { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.15rem; }
.rundgang-karte .rundgang-nummer { display: inline-grid; place-items: center; min-width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--akzent-schwach); color: var(--akzent); font-weight: 700; }
.rundgang-karte p { margin: 0; }
.rundgang-karte .rundgang-aktionen { margin-top: auto; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.rundgang-karte details summary { cursor: pointer; color: var(--akzent); }
.rundgang-karte details ol { margin: .4rem 0 0; padding-left: 1.3rem; }
.rundgang-karte details li form { display: inline; }
.rundgang-kontoliste { list-style: none; padding: 0; margin: 0; }
.rundgang-kontoliste li { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; border-top: 1px solid var(--rand); }
.rundgang-kontoliste li:first-child { border-top: 0; }
.rundgang-haken { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid var(--rand-stark); font-weight: 700; }
.rundgang-haken.ja { background: var(--erfolg); border-color: var(--erfolg); color: var(--flaeche); }

/* ===================================================== Einarbeitung */
.einarbeitung-start { margin: 0 0 .9rem; padding: .55rem .9rem; border-left: 4px solid var(--akzent); border-radius: var(--radius); background: var(--akzent-schwach); }
.einarbeitung-liste { list-style: none; padding: 0; margin: 0; }
.einarbeitung-liste li { padding: .45rem 0; border-top: 1px solid var(--rand); }
.einarbeitung-liste li:first-child { border-top: 0; }
.einarbeitung-liste .inline-formular { margin-left: .4rem; }
.einarbeitung-freigabe h2 { font-size: 1.15rem; }
.einarbeitung-hinweis form { margin-top: .5rem; }
.einarbeitung-hinweis p { margin: 0; }
.einarbeitung-regel { border-left: 4px solid var(--akzent); }
.einarbeitung-regel.bestaetigt { border-left-color: var(--erfolg); }
.einarbeitung-regeltext { max-width: 46rem; }
.einarbeitung-notiz { padding: .4rem 0; border-top: 1px solid var(--rand); }
.einarbeitung-notiz:first-of-type { border-top: 0; }
.einarbeitung-notiz p { margin: .1rem 0; }

/* ========================================= Betreiberbereich */
/* Protokoll eines Laufs: lange Zeilen umbrechen statt die Seite zu verbreitern,
   und nicht hoeher als der Bildschirm -- der Kasten rollt selbst. */
.betreiber-protokoll {
  font-family: "Cascadia Mono", Consolas, "SF Mono", monospace;
  font-size: 1rem;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--flaeche-gedaempft);
  border: 1px solid var(--rand);
  border-radius: 6px;
  padding: .7rem .9rem;
  margin: .6rem 0 0 0;
}
.betreiber-schluessel {
  font-family: "Cascadia Mono", Consolas, "SF Mono", monospace;
  font-size: 1rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: all;
  background: var(--flaeche-gedaempft);
  border: 1px solid var(--rand);
  border-radius: 6px;
  padding: .5rem .7rem;
}
.betreiber-einmalig { border-left: 5px solid var(--warnung); }
.betreiber-einmalig code { font-size: 1.05rem; user-select: all; }
.schlichte-liste { list-style: none; padding-left: 0; margin: 0; }
.schlichte-liste li { padding: .3rem 0; border-bottom: 1px solid var(--rand); }
.schlichte-liste li:last-child { border-bottom: 0; }

/* ===================== Rechnungslegung */
/* Papierfall in der Karte „Umsätze“, Vergleich mit dem vorigen Zeitraum, offene
   Rechnungslegungen bei der Abwesenheit. */
.papierfall { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; }
.vergleichstabelle .vergleich-gruppe th {
  text-align: left;
  padding-top: .6rem;
  border-bottom: 1px solid var(--rand);
}
.vergleichstabelle .vergleich-auffaellig td { font-weight: 600; }
.abwesenheit-rl { margin-top: 1rem; }
.abwesenheit-rl ul { margin: .2rem 0 0; padding-left: 1.1rem; }

/* ============ Rechnungslegung beim Gericht */
/* Karte „Beim Gericht“: Unterschiede zur versandten Fassung, Berichtigung und Nachreichung,
   Verlauf mit Rückfrage und „geprüft“. */
.rl-unterschiede ul { margin: .3rem 0 .6rem; padding-left: 1.2rem; }
.rl-unterschiede li { color: var(--text); }
.rl-nachsenden { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: flex-end; }
.rl-nachsenden form { display: flex; flex-direction: column; gap: .3rem; min-width: 16rem; }
.rl-verlauf { list-style: none; padding-left: 0; margin: .3rem 0 .8rem; }
.rl-verlauf li { padding: .35rem 0; border-bottom: 1px solid var(--rand); }
.rl-verlauf li:last-child { border-bottom: 0; }
.rl-verlauf form.eingebettet { display: inline; margin-left: .4rem; }
.rl-weitere form { display: flex; flex-direction: column; gap: .3rem; max-width: 32rem; margin: .6rem 0; }

/* Das Loeschen unter einem Formular, mit etwas Abstand zu Speichern und Abbrechen. */
.loeschformular { margin-top: .6rem; }

/* ========================================================= Hilfsklassen */
/*
 * Fuer Kleinigkeiten an einzelnen Stellen -- statt style-Attributen, die die
 * Sicherheitsrichtlinie (style-src ohne 'unsafe-inline') verwirft. Die Zahl
 * im Namen ist der Wert in rem, der Bindestrich das Komma: oben-0-6 ist
 * margin-top: .6rem. !important, weil sie wie das Attribut, das sie
 * ersetzen, ueber jeder Regel der Umgebung stehen muessen.
 */
.in-zeile { display: inline !important; }
.in-zeile-flex { display: inline-flex !important; }
.flex { display: flex !important; }
.flex-1 { flex: 1 !important; }
.flex-20 { flex: 1 1 20rem !important; }
.flex-24 { flex: 1 1 24rem !important; }
.flex-30 { flex: 1 1 30rem !important; }
.achse-mittig { align-items: center !important; }
.selbst-mittig { align-self: center !important; }
.umbrechen { flex-wrap: wrap !important; }
.luecke-0-4 { gap: .4rem !important; }
.luecke-0-9 { gap: .9rem !important; }
.rechtsbuendig { text-align: right !important; }
.linksbuendig { text-align: left !important; }
.zeilen-erhalten { white-space: pre-line !important; }
.leerraum-erhalten { white-space: pre-wrap !important; }
.umbruch-ueberall { word-break: break-all !important; }
.ganz-markieren { user-select: all !important; }
.blass { opacity: .55 !important; }
.zeiger-normal { cursor: default !important; }
.schrift-1-2em { font-size: 1.2em !important; }
.schrift-1-3 { font-size: 1.3rem !important; }

.breite-voll { width: 100% !important; }
.breite-auto { width: auto !important; }
.breite-2-5 { width: 2.5rem !important; }
.breite-3-5 { width: 3.5rem !important; }
.breite-4-5 { width: 4.5rem !important; }
.breite-5 { width: 5rem !important; }
.breite-5-5 { width: 5.5rem !important; }
.breite-6 { width: 6rem !important; }
.breite-6-5 { width: 6.5rem !important; }
.breite-7 { width: 7rem !important; }
.breite-8 { width: 8rem !important; }
.breite-8-5 { width: 8.5rem !important; }
.breite-9 { width: 9rem !important; }
.breite-10 { width: 10rem !important; }
.breite-11 { width: 11rem !important; }
.breite-12 { width: 12rem !important; }
.hoechstens-6 { max-width: 6rem !important; }
.hoechstens-13 { max-width: 13rem !important; }
.hoechstens-16 { max-width: 16rem !important; }

/* rand-0 zuerst: rand-0 oben-0-2 ist margin: .2rem 0 0. */
.rand-0 { margin: 0 !important; }
.oben-0 { margin-top: 0 !important; }
.oben-0-2 { margin-top: .2rem !important; }
.oben-0-25 { margin-top: .25rem !important; }
.oben-0-3 { margin-top: .3rem !important; }
.oben-0-35 { margin-top: .35rem !important; }
.oben-0-4 { margin-top: .4rem !important; }
.oben-0-5 { margin-top: .5rem !important; }
.oben-0-6 { margin-top: .6rem !important; }
.oben-0-7 { margin-top: .7rem !important; }
.oben-0-8 { margin-top: .8rem !important; }
.oben-0-9 { margin-top: .9rem !important; }
.oben-1 { margin-top: 1rem !important; }
.oben-1-1 { margin-top: 1.1rem !important; }
.oben-1-2 { margin-top: 1.2rem !important; }
.unten-0 { margin-bottom: 0 !important; }
.unten-0-2 { margin-bottom: .2rem !important; }
.unten-0-25 { margin-bottom: .25rem !important; }
.unten-0-3 { margin-bottom: .3rem !important; }
.unten-0-35 { margin-bottom: .35rem !important; }
.unten-0-4 { margin-bottom: .4rem !important; }
.unten-0-5 { margin-bottom: .5rem !important; }
.unten-0-6 { margin-bottom: .6rem !important; }
.unten-0-8 { margin-bottom: .8rem !important; }
.links-0 { margin-left: 0 !important; }

/* Einzelstuecke mit eigenem Namen. */
.linie-oben { border-top: 1px solid var(--rand) !important; padding-top: .6rem !important; margin-top: .6rem !important; }
.linie-oben-weit { border-top: 1px solid var(--rand) !important; padding-top: .7rem !important; margin-top: .9rem !important; }
.titel-in-zeile { display: inline !important; margin: 0 !important; font-size: inherit !important; }
.startschritte { margin: .4rem 0 .8rem 1.2rem !important; line-height: 1.7 !important; }
.suchfeld-breit { min-width: min(18rem, 100%) !important; }
.feld-fast-voll { min-width: min(16rem, 100%) !important; width: 95% !important; }
.klientenfoto { width: 64px !important; height: 64px !important; border-radius: 50% !important; object-fit: cover !important; border: 1px solid var(--rand) !important; }
.bankgrafik { max-width: 240px !important; background: #fff !important; padding: .5rem !important; }
.mailrahmen { width: 100% !important; height: 32rem !important; border: 1px solid var(--rand) !important; border-radius: 6px !important; background: #fff !important; resize: vertical !important; overflow: auto !important; }

/* ================================== Ausweisfotos (Gesundheit) */

/* Der Streifen in der Karte: ein paar Daumennaegel und der Knopf daneben.
   Vier Bilder reichen -- wer mehr hinterlegt hat, sieht sie auf der eigenen
   Seite. */
.bildstreifenblock {
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rand);
}

.bildstreifenblock > p {
  margin: 0;
}

.bildstreifen {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.bildstreifen img {
  display: block;
  height: 3.2rem;
  width: auto;
  max-width: 6rem;
  object-fit: cover;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche-gedaempft);
}

/* Die eigene Seite: gross genug, um die Nummer auf dem Ausweis abzulesen. */
.ausweisbilder {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

.ausweisbilder > li {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.6rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche-gedaempft);
}

.ausweisbilder img {
  display: block;
  width: 100%;
  height: 11rem;
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--flaeche);
}

.ausweisbilder .bildzeile {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  word-break: break-word;
}

/* ================================== Behandelnde Aerzte und Dienste */

/* Je Behandler eine Kachel: oben, wer es ist, darunter Anschrift und
   Erreichbarkeit nebeneinander. Zwei Spalten, solange Platz ist -- auf dem
   Telefon untereinander. Angerufen wird haeufiger als gelesen, deshalb
   stehen die Nummern gross genug zum Antippen. */
.behandlerliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 0.8rem;
}

.behandler {
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche-gedaempft);
}

.behandlerkopf {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.behandlerkopf .hilfetext {
  margin: 0;
}

.behandlerdaten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.4rem;
  margin-top: 0.5rem;
}

.behandlerdaten .anschrift,
.behandlerdaten .erreichbarkeit {
  margin: 0;
  line-height: 1.45;
}

.behandlerdaten .erreichbarkeit {
  display: flex;
  flex-direction: column;
}

.behandler .werkzeuge {
  margin-top: 0.6rem;
}

.behandler .notiz-text {
  margin: 0.4rem 0 0;
}

/* ---------------------------------------------------------------------------
   Formularsammlung: Eingabeformular je PDF-Seite, Zuordnungstabelle
   --------------------------------------------------------------------------- */

.formular-seite > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.2rem 0;
}

.formular-seite > summary .hilfetext {
  font-weight: 400;
  margin-left: 0.5rem;
}

.formular-seite[open] > summary {
  color: var(--akzent);
  margin-bottom: 0.6rem;
}

.formular-seite-felder .formularzeile input[type="text"],
.formular-seite-felder .formularzeile textarea {
  max-width: 40rem;
}

.formularkatalog td.aktionen,
.formularkatalog td.aktionen form {
  white-space: nowrap;
}

.zuordnung-tabelle input[type="text"] {
  width: 100%;
  min-width: 9rem;
}

.zuordnung-tabelle tr.eigen td:first-child {
  border-left: 3px solid var(--akzent);
}

.zuordnung-tabelle code {
  font-size: 1em;
  word-break: break-all;
}

.formular-seitenbild {
  margin: 0 0 0.8rem;
}

.formular-seitenbild > summary {
  cursor: pointer;
  font-size: 1em;
  color: var(--text-gedaempft);
}

.formular-seitenbild img {
  display: block;
  max-width: 100%;
  margin-top: 0.5rem;
  border: 1px solid var(--rand);
  background: #fff;
}

/* ========================================= Vorschlag der Assistenz (Detailseite) */
/* Widerspruch und inzwischen Geaendertes tragen einen roten Rand --
   zusaetzlich steht es als Wort da. */
.konfliktzeile {
  margin: .4rem 0;
  padding: .35rem .6rem;
  border: 1px solid var(--fehler);
  border-radius: var(--radius);
  background: var(--fehler-flaeche);
  color: var(--text);
}
.vorschlagskarte {
  margin: .8rem 0 0;
  padding: .7rem 0 .2rem;
  border-top: 1px solid var(--rand);
}
.vorschlagskarte.achtung { border-left: 4px solid var(--fehler); padding-left: .7rem; }
.vorschlagskarte h3 { margin: .8rem 0 .2rem; font-size: 1rem; }
.vorschlag-titel { margin: 0 0 .2rem; font-size: 1.1rem; }
.vorschlag-fremdinhalt { margin: .3rem 0; }
.vorschlag-quelle q { display: block; margin: .2rem 0 0 1rem; font-style: italic; }
.vorschlag-aktionen { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .5rem 0; }
.vorschlag-aktionen form { margin: 0; }
.vorschlag-antwort { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.vorschlag-verwerfen > summary { cursor: pointer; color: var(--text-gedaempft); }
.agenten-meldung { margin: .3rem 0; font-weight: 600; }
/* Ein Platzhalter, fuer den es keinen Namen gab: auffallen, nicht raten. */
mark.platzhalter-uebrig {
  padding: 0 .2rem;
  border: 1px dashed var(--warnung);
  border-radius: var(--radius);
  background: var(--warnung-flaeche);
  color: var(--text);
}

/* ========================================= Wissen und Prüffälle (Assistenz) */
/* Vergleich zweier Wissensfassungen: Zeile fuer Zeile, Weggefallenes und
   Neues mit Flaeche und Zeichen -- die Farbe allein traegt es nicht. */
.wissensvergleich {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
.wissensvergleich li { display: flex; gap: .5rem; padding: .1rem .4rem; }
.wissensvergleich .vergleich-nummer {
  flex: 0 0 3rem;
  color: var(--text-gedaempft);
  text-align: right;
}
.wissensvergleich .vergleich-zeichen { flex: 0 0 1rem; font-weight: 700; }
.wissensvergleich .vergleich-text { flex: 1; white-space: pre-wrap; overflow-wrap: anywhere; }
.wissensvergleich .vergleich-neu { background: var(--erfolg-flaeche); }
.wissensvergleich .vergleich-weg { background: var(--fehler-flaeche); }
.wissensvergleich .vergleich-weg .vergleich-text { text-decoration: line-through; }
/* Der pseudonymisierte Text eines Prueffalls: Ersetztes faellt auf, damit
   der Blick auf dem Rest liegt. */
.prueffall-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: .6rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
}
mark.platzhalter {
  padding: 0 .15rem;
  border-radius: var(--radius);
  background: var(--akzent-schwach);
  color: var(--text);
}

/* ========================================= Einstellungen der Assistenz */
/* Schalter, Anbieter und Modellstufe je Agent stehen in einer Tabellenzelle
   nebeneinander und brechen auf schmalen Bildschirmen um. */
.agenten-schalterform {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .8rem;
  align-items: center;
  margin: 0;
}
.agenten-schalterform input[type="text"] { flex: 1 1 14rem; min-width: 0; }
/* ========================================= Tagesliste */

.tagesliste-punkte {
  margin: 0;
  padding-left: 1.6rem;
}

.tagesliste-punkt {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--rand);
}

.tagesliste-punkt > span {
  display: block;
}

.tagesliste-schritte {
  margin-top: 0.15rem;
}

/* Ein Vorschlag der Assistenz: ein Satz, darunter die Knoepfe direkt am Punkt. */
.tagesliste-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  align-items: center;
  margin-top: 0.3rem;
}

.tagesliste-knoepfe form {
  margin: 0;
}

.tagesliste-leise {
  color: var(--text-gedaempft);
}

/* Die Begleiter-Leiste: der Agent fuehrt durch die Liste, unten auf jeder
   Seite. Unter dem Rundgang (900), damit dessen Blase vorn bleibt. */
.begleiter {
  position: fixed;
  z-index: 850;
  right: 1rem;
  bottom: 1rem;
  width: min(34rem, calc(100vw - 2rem));
  max-height: 70vh;
  overflow: auto;
  background: var(--flaeche);
  border: 2px solid var(--akzent);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}

.begleiter summary {
  cursor: pointer;
  padding: 0.6rem 0.9rem;
  font-weight: 600;
}

.begleiter-marke {
  display: inline-block;
  margin-right: 0.4rem;
  padding: 0 0.45rem;
  border-radius: var(--radius);
  background: var(--akzent);
  color: var(--akzent-text);
}

.begleiter-inhalt {
  padding: 0 0.9rem 0.8rem;
}

.begleiter-titel {
  margin: 0;
}

.begleiter-schritte {
  margin: 0.4rem 0 0.6rem;
  padding-left: 1.4rem;
}

.begleiter-schritte li {
  padding: 0.15rem 0;
}

.begleiter-schritte li.aktuell {
  font-weight: 600;
  background: var(--akzent-schwach);
}

.begleiter-schritte li.getan {
  text-decoration: line-through;
}

.begleiter-anleitung {
  margin: 0.4rem 0 0.6rem;
  padding: 0.5rem 0.7rem;
  border-left: 3px solid var(--akzent);
  background: var(--akzent-schwach);
}

.begleiter-knoepfe {
  margin-top: 0.4rem;
}

.begleiter-einfach {
  margin: 0.4rem 0 0.6rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
}

.begleiter-einfach ol {
  margin: 0.3rem 0;
  padding-left: 1.4rem;
}

.begleiter-merksatz {
  margin: 0;
}

.begleiter-woerter dt {
  font-weight: 600;
}

.begleiter-woerter dd {
  margin: 0 0 0.3rem;
}

.begleiter-schrittliste summary {
  padding: 0.2rem 0;
  font-weight: 400;
}

/* Die Leiste soll das Seitenende nicht dauerhaft verdecken. */
body:has(.begleiter details[open]) main {
  padding-bottom: 45vh;
}

@media (max-width: 640px) {
  .begleiter {
    right: 0.5rem;
    bottom: 0.5rem;
    width: calc(100vw - 1rem);
    max-height: 45vh;
  }
}

/* ------------------------------------------------------------- Fristseite */

/* Eine Knopfreihe unter dem Kopf. "Entfaellt …" und "Weitere …" klappen ihr
   Formular unter der Reihe auf statt als schwebendes Menue: darin stehen
   Eingabefelder, die auf dem Handy die ganze Breite brauchen. */
.fristkopf .angaben {
  margin-top: 0.6rem;
}
.fristbeschreibung {
  margin: 0.8rem 0 0.2rem;
}
.fristaktionen {
  margin-top: 1rem;
  align-items: flex-start;
}
.fristaktionen form {
  margin: 0;
}
.fristaktion > summary {
  list-style: none;
}
.fristaktion > summary::-webkit-details-marker {
  display: none;
}
.fristaktion[open] {
  flex-basis: 100%;
}
.fristaktionen-feld {
  margin-top: 0.5rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
}
form.fristaktionen-feld {
  margin-top: 0.5rem;
}
.fristaktionen-feld h3 {
  margin: 1rem 0 0.3rem;
  font-size: 1rem;
}
details.klappe > summary .klapptitel + .marker {
  margin-left: 0.4rem;
}

/* ========================================= Mein Tag: Jetzt dran */
/* Eins nach dem anderen: vorn genau ein Punkt, gross und ruhig; die ganze
   Liste darunter hinter einem Klick. */
.jetzt-dran {
  border-left: 0.35rem solid var(--akzent);
}
.jetzt-dran-punkt {
  font-size: 1.25rem;
  margin: 0.2rem 0 0.3rem;
}
.jetzt-dran-knoepfe {
  margin-top: 0.8rem;
  flex-wrap: wrap;
}
.jetzt-dran-schritte {
  margin-top: 0.5rem;
}
.jetzt-dran-vorschau {
  margin-top: 0.9rem;
}
.jetzt-dran-arbeitsschritte li.getan {
  text-decoration: line-through;
}
.jetzt-dran-arbeitsschritte li form {
  margin-right: 0.4rem;
}
.jetzt-dran-quelle,
.jetzt-dran-passt-nicht {
  margin-top: 0.6rem;
}
.tagesliste-zeiten {
  list-style: none;
  padding-left: 0;
}
.tagesliste-uhrzeit {
  display: inline-block;
  min-width: 7.5rem;
  font-variant-numeric: tabular-nums;
}
.jetzt-dran-geparkt {
  margin-top: 0.8rem;
}
.jetzt-dran-geparkt li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
details.ganze-liste {
  margin-top: 1rem;
}
details.ganze-liste > summary {
  display: inline-block;
  margin-bottom: 0.8rem;
}

/* ========================================= Vorlagen der Assistenz (Fenster) */
.vorlage-dialog {
  max-width: 46rem;
  width: calc(100% - 2rem);
}
.vorlage-teile {
  padding-left: 1.25rem;
}
.vorlage-teil {
  margin-bottom: 0.75rem;
}
.vorlage-teil.achtung {
  border-left: 3px solid var(--warnung);
  padding-left: 0.5rem;
}
.vorlage-angaben {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.15rem 0.75rem;
  margin: 0.25rem 0;
}
.vorlage-angaben dt {
  font-weight: 600;
}
.vorlage-angaben dd {
  margin: 0;
  white-space: pre-line;
}

/* ========================================= Meine Planung (Blöcke und Auslastung) */
.kal-eintrag.ebene-planung { border-left: 3px dotted var(--akzent); background: var(--flaeche-gedaempft); }
.kal-eintrag.ebene-planung.warnung { border-left-color: var(--warnung); }
.auslastung-liste { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.auslastung-zeile { display: grid; grid-template-columns: 7rem 1fr 6rem; gap: 0.6rem; align-items: center; }
.auslastung-balken { height: 0.8rem; border-radius: 0.4rem; background: var(--flaeche-gedaempft); overflow: hidden; }
.auslastung-balken > span { display: block; height: 100%; background: var(--erfolg); }
.auslastung-balken.voll > span { background: var(--warnung); }
.auslastung-balken .b10 { width: 10%; } .auslastung-balken .b20 { width: 20%; }
.auslastung-balken .b30 { width: 30%; } .auslastung-balken .b40 { width: 40%; }
.auslastung-balken .b50 { width: 50%; } .auslastung-balken .b60 { width: 60%; }
.auslastung-balken .b70 { width: 70%; } .auslastung-balken .b80 { width: 80%; }
.auslastung-balken .b90 { width: 90%; } .auslastung-balken .b100 { width: 100%; }
.auslastung-balken .b0 { width: 0; }

/* ========================================= Aufgabenseite: Herkunft und Erledigen */
.aufgabenkopf { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.aufgabenherkunft { border-left: 4px solid var(--akzent); }
.aufgabenherkunft > * + * { margin-top: 0.5rem; }
.herkunftszeile { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; align-items: baseline; margin: 0; }
.herkunftsauszug {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.8rem;
  border-left: 3px solid var(--rand);
  background: var(--flaeche-gedaempft);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.herkunftsauszug p { margin: 0; font-style: italic; }
.herkunftsauszug footer { margin-top: 0.25rem; }
.erledigungswege { margin-bottom: 0.6rem; }
.erledigen-form { margin-top: 0.4rem; }
#erledigen details.klappe { margin-top: 0.6rem; }
.aufgabenherkunft-zeile { display: block; color: var(--text-gedaempft); }

/* ========================================= Fristenliste: Reiter, Sammelaktion, Zeilen */
.schnellreiter { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.8rem; }
.schnellreiter .marker { margin-left: 0.3rem; }
.sortierkarte { margin-top: 0.8rem; }
/* Trennpunkt und Name bleiben beisammen -- sonst stand der Punkt allein in einer Zeile. */
.fristzeile-zusatz .zusatz-zustaendig { white-space: nowrap; }
/* Erscheint erst mit einem Haken -- dann unten fest, damit sie neben der Zeile bleibt. */
.karte.sammelaktion {
  position: sticky;
  bottom: 0;
  z-index: 5;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
}
/* Bis zur Schreibtischbreite stehen die Knöpfe unter dem Titel statt daneben. */
@media (min-width: 641px) and (max-width: 1100px) {
  .fristzeile { flex-wrap: wrap; }
  .fristzeile-inhalt { flex: 1 1 0; }
  .fristzeile-aktion { flex-wrap: wrap; width: 100%; padding-left: 6.4rem; }
}
.fristtyp-pruefzeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  justify-content: space-between;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rand);
}
.fristtyp-pruefzeile:last-child { border-bottom: none; }
.fristtyp-pruefzeile-inhalt { flex: 1 1 28rem; min-width: 0; }

/* ========================================= Startseite: Jetzt dran, Liegen geblieben */
.erfassen-menue .neu-liste { min-width: 14rem; }
.erfassen-menue .datei-formular { display: flex; flex-direction: column; gap: 0; }
.erfassen-menue .datei-knopf { display: block; padding: 0.55rem 0.9rem; color: var(--text); }
.erfassen-menue .datei-knopf:hover { background: var(--akzent-schwach); }
.jetzt-dran { border-left: 4px solid var(--akzent); }
.jetzt-zeile {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rand);
}
.jetzt-zeile:last-of-type { border-bottom: none; }
.jetzt-nr {
  flex: 0 0 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--akzent-schwach);
  color: var(--akzent);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jetzt-zeile.ist-dringend .jetzt-nr { background: var(--fehler-flaeche); color: var(--fehler); }
.jetzt-inhalt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.jetzt-aktion { flex: none; }
.liegen-geblieben .liegen-zeile {
  border-top: 1px solid var(--rand);
  padding: 0.3rem 0;
}
.liegen-geblieben .liegen-zeile[open] { padding-bottom: 0.8rem; }
.liegen-geblieben .liegen-zeile > summary .klapptitel { font-weight: 700; margin-right: 0.4rem; }
.liegen-geblieben .start-hinweise { border: none; padding: 0.5rem 0 0; margin: 0.3rem 0 0; border-top: 1px solid var(--rand); background: none; }
.liegen-geblieben .karte { box-shadow: none; border: none; padding: 0; margin: 0.6rem 0 0; }
.aufraeum-buendel { border-top: 1px solid var(--rand); padding: 0.7rem 0; }
.aufraeum-liste { list-style: none; margin: 0.3rem 0 0.6rem; padding: 0; display: grid; gap: 0.25rem; }

/* ========================================= Akte: Jetzt dran, Lage, Zuletzt, Noch nicht erfasst */
.jetzt-weitere { margin-top: 0.4rem; }
.aktenlage { border-left: 4px solid var(--akzent); background: var(--akzent-schwach); padding: 0.6rem 0.9rem; margin: 0.4rem 0 0.6rem; display: grid; gap: 0.4rem; }
.aktenlage[hidden], .aktenlage-liste[hidden] { display: none; }
.aktenlage-liste { margin: 0; padding-left: 1.3rem; display: grid; gap: 0.2rem; }
.lage-geld { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.lage-geld li { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; align-items: baseline; }
.zuletzt-zeile { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; align-items: baseline; padding: 0.3rem 0; border-bottom: 1px solid var(--rand); }
.zuletzt-zeile:last-of-type { border-bottom: none; }
.zuletzt-tag { font-variant-numeric: tabular-nums; min-width: 6.2rem; }
.noch-offen-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.noch-offen-liste li { display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; align-items: center; padding: 0.3rem 0; border-bottom: 1px solid var(--rand); }
.noch-offen-liste li:last-child { border-bottom: none; }
.luecken-ausgeblendet { display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; align-items: center; margin-top: 0.6rem; }
.noch-offen-liste .noch-offen-text { flex: 1 1 18rem; min-width: 0; }
.akte-menue .neu-liste { min-width: 13rem; }
.akte-menue .neu-liste .gefahr-text { color: var(--fehler); border-top: 1px solid var(--rand); }
.akte-meta { margin: 0.15rem 0 0.3rem; }
.ausweise-klappe > summary { cursor: pointer; font-weight: 600; margin-top: 0.5rem; }
.reiter a.reiter-leer { opacity: 0.6; }

/* Klientenliste als Kacheln: vier je Reihe, schmaler zwei, auf dem Handy eine. */
.klientenkacheln {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (max-width: 1140px) {
  .klientenkacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .klientenkacheln { grid-template-columns: minmax(0, 1fr); }
}
.klientenkachel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  height: 100%;
  padding: 0.8rem 0.95rem;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.klientenkachel:hover,
.klientenkachel:focus-visible {
  border-color: var(--akzent);
  box-shadow: var(--schatten);
  outline: none;
}
.klientenkachel-name { overflow-wrap: anywhere; }
.klientenkachel-gericht { color: var(--text-gedaempft); overflow-wrap: anywhere; }

/* Downloads: je Unterlage eine Karte, Knoepfe rechts, schmal darunter. */
.downloadliste { list-style: none; margin: 0; padding: 0; }
.downloadkarte {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}
.downloadkarte-text { flex: 1 1 24rem; min-width: 0; }
.downloadkarte-text h2 { margin: 0 0 0.25rem; font-size: 1.1rem; }
.downloadkarte-text p { margin: 0.25rem 0; }
.downloadkarte .werkzeuge { flex: 0 1 auto; }

/* Stammdaten kompakt: kleine Karten in Spalten wie eine Zeitung -- bis zu
   drei, je nach Breite; unter kurzen Karten bleibt keine Luecke. Die
   Betreuungen stehen ueber die volle Breite. Je Zeile Bezeichnung und Wert. */
.sd-oben {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 0 0.75rem;
  align-items: start;
}
.sd-spalten {
  columns: 3 19rem;
  column-gap: 0.75rem;
}
.stammdatenblatt .sd-karte {
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  margin: 0 0 0.75rem;
  padding: 0.7rem 0.9rem 0.8rem;
  min-width: 0;
}
.stammdatenblatt .sd-breit { display: block; }
.sd-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.sd-kopf h2,
.sd-kopf h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}
.sd-unterkopf { margin-top: 0.8rem; padding-top: 0.6rem; border-top: 1px solid var(--rand); }
.sd-angaben {
  display: grid;
  grid-template-columns: minmax(6.5rem, 36%) minmax(0, 1fr);
  gap: 0.2rem 0.7rem;
  margin: 0;
}
.sd-angaben dt { color: var(--text-gedaempft); font-weight: 400; }
.sd-angaben dd { margin: 0; overflow-wrap: anywhere; }
.sd-zweispaltig { grid-template-columns: minmax(7.5rem, 18%) minmax(0, 1fr) minmax(7.5rem, 18%) minmax(0, 1fr); }
.sd-zweispaltig .sd-ganz { grid-column: span 3; }
@media (max-width: 1140px) {
  .sd-zweispaltig { grid-template-columns: minmax(6.5rem, 36%) minmax(0, 1fr); }
  .sd-zweispaltig .sd-ganz { grid-column: auto; }
}
.sd-zeile { display: block; }
.sd-eintrag { padding: 0.3rem 0; border-bottom: 1px solid var(--rand); }
.sd-eintrag:last-of-type { border-bottom: none; }
.sd-klappe { margin-top: 0.4rem; }
.sd-klappe > summary { cursor: pointer; color: var(--akzent); }
.sd-formular { margin-top: 0.3rem; }
.sd-betreuung { padding: 0.4rem 0 0.6rem; border-bottom: 1px solid var(--rand); }
.sd-betreuung:last-child { border-bottom: none; }
.sd-betreuung[open] > summary { margin-bottom: 0.3rem; }
.sd-unterlagen .kopfzeile { margin: 0; gap: 0.3rem; }
.sd-unterlagen h3 { font-size: 1rem; }
.sd-unterlagen .oben-0-7 { margin-top: 0.4rem; }
.sd-unterlagen p.leer { margin: 0; padding: 0; }
.sd-betreuung-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; margin-bottom: 0.4rem; }
.sd-aktionen { margin-left: auto; }
.sd-aktionen .neu-liste { right: 0; left: auto; }
.sd-aktionen .neu-liste form { margin: 0; }
.menue-knopf-zeile,
.sd-knopf-link {
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--akzent);
  padding: 0;
}
.menue-knopf-zeile { display: block; width: 100%; text-align: left; padding: 0.55rem 0.9rem; color: var(--text); }
.menue-knopf-zeile:hover { background: var(--akzent-schwach); }
.sd-knopf-link { margin-left: 0.4rem; }
.berichtsstand-kurz { display: block; }

/* ========================================= Posteingang: Jetzt dran, Sammelleiste */
/* Die Punkte von „Jetzt dran“ im Posteingang: Zahl, Satz und die Knoepfe
   dazu in einer Zeile; auf dem Handy bricht die Zeile um. */
.jetzt-dran-liste {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.jetzt-dran-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.9rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--rand);
}
.jetzt-dran-zeile:last-child {
  border-bottom: none;
}
.jetzt-dran-zeile .jetzt-dran-punkt {
  flex: 1 1 16rem;
  font-size: 1.1rem;
}
.jetzt-dran-zeile .jetzt-dran-knoepfe {
  margin-top: 0;
}

/* Die Sammelleiste des Posteingangs erscheint erst mit dem ersten Haken
   (stapelauswahl.js). .sammelleiste setzt display:flex und schluege sonst
   das hidden-Attribut. */
.sammelleiste[hidden] {
  display: none;
}

/* Die Kurzfassung der Sichtung unter dem Betreff: ein Satz, nicht die
   ganze Nachricht. */
.mail-kurzfassung {
  color: var(--text);
}

/* Ordner durchsehen: das Suchfeld ueber der Tabelle. */
.ordnerfilter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

/* ========================================= Mailansicht: Aktionen-Menue */
/* Das Menue haengt rechts in der Kopfzeile; Formulare darin sind Zeilen
   wie die Links. Fristerkennung und Schnell-Wiedervorlage bringen eigene
   Knoepfe mit und werden hier zu Menuezeilen. */
.mail-aktionen .neu-liste {
  right: 0;
  left: auto;
  min-width: 14rem;
}
.mail-aktionen .neu-liste form {
  margin: 0;
}
.mail-aktionen .neu-liste .gefahr-text {
  color: var(--fehler);
  border-top: 1px solid var(--rand);
}
.mail-aktionen .neu-liste #fristerkennung .knopf,
.mail-aktionen .neu-liste .schnell-wiedervorlage > summary {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0.55rem 0.9rem;
  color: var(--text);
  font: inherit;
}
.mail-aktionen .neu-liste #fristerkennung .knopf:hover,
.mail-aktionen .neu-liste .schnell-wiedervorlage > summary:hover {
  background: var(--akzent-schwach);
}
.mail-aktionen .neu-liste .schnell-wiedervorlage {
  position: static;
}
.mail-aktionen .neu-liste .schnell-wiedervorlage-formular {
  position: static;
  width: auto;
  box-shadow: none;
  border: 0;
  border-top: 1px solid var(--rand);
}

/* ========================================= Mailansicht: Anhaenge */
/* Ein Formular fuer alle Anhaenge: die Knopfzeile buendig unter den
   Feldern, der Haken vor dem Dateinamen. */
.anhaenge-knopfzeile {
  align-self: end;
}
.anhangzeile input[type="checkbox"] {
  margin-right: 0.4rem;
  vertical-align: middle;
}
.mehr-zuordnung > summary {
  color: var(--akzent);
}

/* ========================================= Eingangskorb: Jetzt dran, Zeile, Klappen, Trennseite */

/* Jetzt dran: die Punkte als Knoepfe mit Zahl davor. */
.jetzt-dran .jetzt-dran-knoepfe {
  margin-top: 0.5rem;
}
.jetzt-dran .jetzt-dran-knoepfe .knopf .marker {
  margin-right: 0.3rem;
}

/* Die Zeile: Eingangsweg als Marker (verlinkt bei Fax und Mail), darunter
   der Satz der Sichtung. */
a.marker.korb-weg {
  text-decoration: none;
}
a.marker.korb-weg:hover,
a.marker.korb-weg:focus-visible {
  text-decoration: underline;
}
.korb-kurzfassung {
  margin: 0.2rem 0 0.3rem;
}

/* Nebenschauplaetze unter der Liste (Papierakten, Weitergegebenes). Die
   Papierakten-Tabelle bringt ihre eigene Karte mit -- deren Titel und Rahmen
   fallen in der Klappe weg. */
.korb-klappe {
  margin-top: 1rem;
}
#papierakten-klappe > .karte {
  border: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
}
#papierakten-klappe > .karte > h2 {
  display: none;
}

/* Trennseite: ein kleines Seitenbild neben dem Textanfang. */
.trenn-seite {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.trenn-seitenbild {
  flex: none;
  width: 8rem;
  max-width: 30%;
  height: auto;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: #fff;
}
.trenn-seite .hilfetext {
  flex: 1 1 auto;
  min-width: 0;
}

/* Vorschlagszeilen der Aufnahmen mit Knopf „Anlegen“ je Zeile: eine fünfte
.folgen-zeile.einzeln {
  grid-template-columns: auto minmax(0, 1fr) 10.5rem 4rem auto;
}

@media (max-width: 640px) {
  .folgen-zeile.einzeln {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .folgen-zeile.einzeln .knopf,
  .folgen-zeile.einzeln .marker {
    grid-column: 2;
    justify-self: start;
  }
}

/* ========================================= Akte, Reiter Finanzen: Kontozeile */
/* Die Marke „ohne Beleg n“ an der Kontozeile ist ein Link auf die Belegseite. */
a.marker.ohne-beleg {
  text-decoration: none;
}
a.marker.ohne-beleg:hover,
a.marker.ohne-beleg:focus-visible {
  text-decoration: underline;
}
/* Die Kontozeile: Stand und Marke stehen in einer Zeile mit dem Namen. */
.konto-zeile .konto-stand {
  white-space: nowrap;
}
/* Im Menü „Aktionen“ der Kontozeile: der gesperrte Pfeil (oberste/unterste Zeile). */
.menue-knopf-zeile:disabled {
  opacity: 0.5;
  cursor: default;
}
.menue-knopf-zeile:disabled:hover {
  background: none;
}

/* ========================================= Banking, Bankzugänge, Überweisungen */
/* Die Erklärung zu Stand und Vorschau liegt zugeklappt unter den Reitern. */
.banking-erklaerung {
  margin: 0 0 0.8rem;
}
.banking-erklaerung > summary {
  font-weight: 400;
  color: var(--text-gedaempft);
}
/* „offen: n Umsätze“ und „Stand bestätigen“ unter dem Kontonamen. */
.banking-offen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.3rem;
}
.banking-offen .marker {
  text-decoration: none;
}
/* Das Menü „Aktionen ▾“ in der letzten Spalte klappt nach links auf, damit es
   nicht aus der Tabelle läuft; Formulare darin ohne Abstand. */
.banking-aktionen {
  text-align: right;
  white-space: nowrap;
}
.banking-aktionen .werkzeuge {
  justify-content: flex-end;
}
.banking-aktionen .neu-liste {
  left: auto;
  right: 0;
  text-align: left;
}
.banking-aktionen .neu-liste form {
  margin: 0;
}
.banking-warnzeile td {
  background: var(--warnung-flaeche);
}
/* Jahreswahl der Überweisungsliste. */
.ueberweisungen-jahre {
  gap: 0.3rem;
}

/* ============================================ Kontoseite: Hauptknopf und Menue „Aktionen“ */
/* Das Menue klappt nach links auf (es steht am rechten Rand der Kopfzeile);
   die Formulare darin (Jetzt abrufen, Verbindung testen) sind Menuezeilen. */
.konto-aktionen .neu-liste { right: 0; left: auto; min-width: 14rem; }
.konto-aktionen .neu-liste form { margin: 0; }

/* Die Suche in der Klappe ueber den Buchungen: Feld und Knopf in einer Zeile. */
.konto-suche {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
  margin-top: 0.5rem;
}
.konto-suche input[type="search"] { flex: 1 1 14rem; max-width: 24rem; }

/* Bis zu drei Knoepfe an der Buchung (Bearbeiten, Beleg zuordnen, Beleg fehlt):
   die Zelle darf umbrechen, sonst sprengt sie die Tabelle. */
#buchungen td.zeilenwerkzeuge { white-space: normal; }
#buchungen td.zeilenwerkzeuge .knopf { margin: 0.1rem 0; }

/* ============================================ Pruefliste der Umsaetze: Kopf der Liste */
/* „Alle anhaken“ und die Zahl der Haken ueber der Liste; die Sammelleiste
   darunter erscheint erst mit dem ersten Haken (umsaetze.js). */
.umsatzliste-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  margin: 0 0 0.5rem;
  padding: 0 0.4rem;
}
.umsatzliste-kopf .alle-anhaken-feld { display: inline-flex; align-items: center; gap: 0.4rem; }
.umsatzliste-kopf .stapel-anzahl { margin: 0; }
.umsatzform .sammelleiste[hidden] { display: none; }

/* ========================================= Belege zuordnen und Rechnungslegung: Klappen
   nav.schnellreiter, details.klappe, .klapptitel und .marker gibt es schon. */

/* Eine fremde Karte in einer Klappe (Rechnungslegung: "Umsätze im Zeitraum" bleibt
   unveraendert und bekommt ihre Klappe von aussen). Der Klapptitel sieht aus wie
   eine Kartenueberschrift, die Karte darunter verliert nur ihren oberen Abstand. */
details.karten-klappe > summary .klapptitel {
  font-size: 1.15rem;
  font-weight: 700;
}
details.karten-klappe[open] > summary {
  margin-bottom: 0.5rem;
}
details.karten-klappe > .karte {
  margin-top: 0;
}

/* Kartenklappen (Zeitraum, Stände, Belegstapel, Belege, Zeitraum ändern): die
   Werkzeugknoepfe stehen direkt unter dem Klapptitel, nicht mehr rechts im Kopf. */
details.karte.klappe > .werkzeuge {
  margin: 0 0 0.6rem;
}
/* Eine Klappe fuer Erklaertexte ("Was gilt hier?", "Wie die Zuordnung arbeitet") am
   Ende einer Karte: ruhig, ohne eigenen Rahmen. */
.karte > details.klappe:last-child,
details.karte.klappe > details.klappe:last-child {
  margin-top: 0.6rem;
}
details.klappe > .hilfetext:first-of-type {
  margin-top: 0.3rem;
}

/* ========================================= Vergütung und Einkommen */
/* Status-Marker der Vergütung -- bisher mit den Versand-Klassen eingefärbt,
   jetzt mit eigenen Namen in denselben Farben. */
.marker.verguetung-offen {
  background: var(--flaeche-gedaempft);
  color: var(--text-gedaempft);
  border-color: transparent;
}
.marker.verguetung-beantragt,
.marker.verguetung-gezahlt {
  background: var(--erfolg-flaeche);
  color: var(--erfolg);
  border-color: transparent;
}
.marker.verguetung-gekuerzt {
  background: var(--fehler-flaeche);
  color: var(--fehler);
  border-color: transparent;
}

/* Das Jahr unter den Status-Reitern: eine zweite, leisere Reihe. */
.schnellreiter.jahresreiter { margin-top: -0.4rem; }

/* „Mehr ▾“ und „Steuer ▾“ im Kopf: wie das Erfassen-Menü, nach links geöffnet,
   damit es am rechten Rand nicht aus dem Bild läuft. */
.mehr-menue .neu-liste,
.steuer-menue .neu-liste { min-width: 13rem; right: 0; left: auto; }

/* Bürokonto-Karte auf der Einkommensübersicht: je Zugang eine Zeile mit
   Stand, Abruf und Knöpfen; auf dem Handy bricht sie um. */
.buerokonto-liste { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.buerokonto-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rand);
}
.buerokonto-zeile:last-child { border-bottom: none; }

/* Kontoauszug: das Zeilenformular „Zuordnen“ erst auf Klick; die Sammelleiste
   unter der Tabelle. */
.zuordnen-klappe .filterleiste { margin-top: 0.3rem; }
.sammelleiste {
  align-items: center;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rand);
}

/* Aufgeklappte Karten: die Überschrift in der Zusammenfassung ohne Rand. */
details.karte.klappe > summary .klapptitel { display: inline; margin: 0; }

/* Dokumentliste: Jetzt dran, Akte zuordnen aus der Zeile, Mehr-Menue */
.jetzt-dran-dokumente {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  border-top: 1px solid var(--rand);
}
.jetzt-dran-dokument {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.8rem;
  align-items: center;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--rand);
}
.jetzt-dran-dokument .jetzt-dran-antwort {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-left: auto;
}
.jetzt-dran-dokument .jetzt-dran-antwort form {
  margin: 0;
}
.akte-zuordnen > summary {
  list-style: none;
  cursor: pointer;
}
.akte-zuordnen > summary::-webkit-details-marker {
  display: none;
}
.akte-zuordnen[open] > summary {
  display: none;
}
.akte-zuordnen-formular {
  align-items: center;
}
.dokumente-mehr .neu-liste,
.dokument-aktionen .neu-liste,
.dokument-antworten .neu-liste {
  right: 0;
  left: auto;
  min-width: 13rem;
}
.dokument-aktionen .neu-liste form {
  margin: 0;
}
.dokument-aktionen .neu-liste .gefahr-text {
  color: var(--fehler);
  border-top: 1px solid var(--rand);
}

/* Dokumentseite: Klappen fuer Verschieben, Andere Akte, Wiedervorlage, Stempel, Fassung */
details.klappe.karte > summary {
  font-weight: 600;
  cursor: pointer;
}
details.klappe.karte > .ablage-verschiebeleiste {
  border-top: none;
  padding-top: 0.2rem;
}
.stempel-klappe > summary {
  cursor: pointer;
  font-size: 1rem;
}
.datum-nachtragen {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.5rem;
}
.datum-nachtragen input {
  width: 8rem;
}

/* ========================================= Ablage: Sammelleiste, Posteingang, Klappen
   .sammelleiste, details.klappe, .klapptitel und .marker gibt es schon. */

/* Die Sammelleiste der Ablage erscheint mit dem ersten Haken (ablage.js).
   .ablage-verschiebeleiste setzt display:flex und schluege sonst das
   hidden-Attribut; ohne Skript (html[data-ohne-skript]) bleibt sie da. */
.ablage-verschiebeleiste[hidden] {
  display: none;
}
html[data-ohne-skript] .ablage-verschiebeleiste[hidden] {
  display: flex;
}

/* Posteingang der Akte: „n nicht einsortiert“ unter dem Pfad, und je Zeile
   der Knopf „Nach <Ordner>“ bzw. „Verschieben …“ rechts neben der Zeile. */
.ablage-posteingang-stand {
  margin: 0.3rem 0 0;
}
.ablage-dokument > .ablage-vorschlag {
  flex: 0 0 auto;
  margin-top: 0.75rem;
}
.ablage-dokument > button.ablage-vorschlag[hidden] {
  display: none;
}

/* „So arbeitet die Ablage“ unter der Ueberschrift: ruhig, ohne Rahmen. */
.kopfzeile details.ablage-erklaerung {
  margin-top: 0.2rem;
}
.kopfzeile details.ablage-erklaerung > summary {
  font-weight: 500;
  color: var(--text-gedaempft);
}

/* Papierkorb: die Frist als Marker statt Erklaertext. */
.papierkorb-frist {
  margin: 0.3rem 0 0;
}

/* .ablage-neu und .ablage-neu-form (Klappe im Baum) werden nicht mehr gebraucht
   und koennen aus stil.css entfallen. */

/* Postausgang: gescheiterte Mails fallen in der Liste auf. */
.mailzeile.ausgang-gescheitert {
  border-left: 3px solid var(--fehler);
  padding-left: 0.6rem;
}
/* „Jetzt dran“ im Postausgang: Statusmarke, Betreff und Empfaenger in einer Zeile. */
.jetzt-dran-punkt .marker {
  margin-right: 0.3rem;
}

/* Mailformular: Suchliste „Dokumente aus der Ablage“ und die Klappe „Mehr …“. */
.dokumentsuche .hakenliste {
  max-height: 14rem;
  overflow-y: auto;
  margin-top: 0.4rem;
}
.dokumentsuche .dokumentsuche-feld {
  width: 100%;
  max-width: 28rem;
}
.dokumentsuche .dokumentsuche-stand {
  display: block;
  margin-top: 0.2rem;
}
details.klappe.mailformular-mehr {
  margin: 0.8rem 0;
}
details.klappe.mailformular-mehr > summary .hilfetext {
  font-weight: 400;
  margin-left: 0.3rem;
}

/* Antworten: „Darauf ist schon hinausgegangen“ als eine Zeile. */
.schon-hinaus .marker {
  margin-left: 0.2rem;
}

/* ========================================= Versand: Liste, Vorgang, Formular */
/* Die Herkunft in der Listenzeile: eine leise zweite Zeile unter dem Betreff. */
.versand-herkunft {
}

/* Das Menue „Aktionen“ am Vorgang haengt rechts an der Kopfzeile. */
.vorgang-aktionen .neu-liste {
  right: 0;
  left: auto;
  min-width: 15rem;
}
.vorgang-aktionen .neu-liste form {
  margin: 0;
}
.vorgang-aktionen .neu-liste .gefahr-text {
  color: var(--fehler);
  border-top: 1px solid var(--rand);
}

/* Die Klappe „Mehr“ im Vorgangsformular sieht aus wie die Abschnitte davor. */
.versandformular .formularabschnitt-klappe {
  margin-top: 1rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
}
.versandformular .formularabschnitt-klappe > summary {
  font-weight: 600;
}
.versandformular .formularabschnitt-klappe > summary .hilfetext {
  font-weight: 400;
  margin-left: 0.4rem;
}

/* Die Sammelleiste der Versandliste: Datum und Knopf in einer Zeile. */
.stapelform.sammelleiste label {
  margin: 0;
}

/* ========================================= Akte: Reiterleiste mit „Mehr“, Notizen, Schriftverkehr, Schnellnotiz */
/* Die Reiterleiste der Akte traegt ein Menue „Mehr ▾“ (details.neu-menue):
   sie darf darum nicht seitlich scrollen, sonst schnitte sie das Menue ab.
   Die sieben Alltagsreiter brechen stattdessen um. */
#aktenreiter {
  overflow: visible;
  flex-wrap: wrap;
}
#aktenreiter::after {
  display: none;
}
#aktenreiter .reiter-mehr > summary {
  padding: 0.55rem 0.85rem;
  color: var(--text-gedaempft);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  font-size: 1rem;
}
#aktenreiter .reiter-mehr > summary:hover {
  color: var(--text);
}
#aktenreiter .reiter-mehr > summary:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}
#aktenreiter .reiter-mehr .neu-liste a {
  padding: 0.55rem 0.9rem;
  border-bottom: 0;
  white-space: nowrap;
}
#aktenreiter .reiter-mehr .neu-liste a[aria-current="page"] {
  font-weight: 600;
  color: var(--akzent);
}
#aktenreiter .reiter-mehr .neu-liste a.reiter-leer {
  opacity: 0.6;
}

/* Notizen: Schnellreiter ueber dem Verlauf, Suche und Kategorie zugeklappt. */
#notiz-schnellreiter {
  margin-top: 0.6rem;
}
/* Eine Formularzeile nur mit Knoepfen -- ohne leeres Label darueber. */
.formularzeile-knoepfe {
  align-self: flex-end;
}
/* „Aktionen ▾“ je Notiz: ein Menue in der Kopfzeile mit Knoepfen als Zeilen. */
.notiz-aktionen > summary.knopf {
  list-style: none;
}
.notiz-aktionen > summary::-webkit-details-marker {
  display: none;
}
.notiz-aktionen .neu-liste {
  min-width: 15rem;
}
.notiz-aktionen .neu-liste form {
  margin: 0;
}
.notiz-aktionen .neu-liste .gefahr-text {
  color: var(--fehler);
  border-top: 1px solid var(--rand);
}

/* Schriftverkehr: die Kurzfassung der Sichtung als zweite Zeile unter dem Betreff. */
.schriftverkehr .sv-kurzfassung {
  display: block;
  margin-top: 0.15rem;
  max-width: 36rem;
}

/* Schnellnotiz: die Akte ueber Suchfeld und Chips „zuletzt: …“. */
#schnellnotiz .zuletzt-akten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
  align-items: center;
  margin: 0.4rem 0 0;
}
#schnellnotiz [data-klient-gewaehlt] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
  align-items: center;
  margin: 0.4rem 0 0;
}
.ablagenotiz .ablage-andere {
  margin-top: 0.3rem;
}
.ablagenotiz .ablage-andere > summary {
  font-weight: 400;
  color: var(--text-gedaempft);
}
.ablagenotiz .ablage-andere .werkzeuge {
  margin-top: 0.3rem;
}

/* Alltagsreiter der Akte (Dokumente, Termine, Kontakte, Versand).

/* „Aktionen ▾“ an einer Zeile (Kontakte, Termine): das Menue klappt nach
   links auf, damit es am rechten Rand der Tabelle nicht abgeschnitten wird;
   die Formulare darin tragen keinen Abstand. */
.zeilen-aktionen .neu-liste { right: 0; left: auto; min-width: 13rem; }
.zeilen-aktionen .neu-liste form { margin: 0; }
.zeilen-aktionen .neu-liste .gefahr-text { color: var(--fehler); border-top: 1px solid var(--rand); }
/* Der Tabellenrahmen schneidet mit overflow-x das aufgeklappte Menue ab --
   solange ein Menue offen ist, darf die Kontakttabelle ueberlaufen. */
.kartentabelle:has(.zeilen-aktionen[open]) { overflow: visible; }
.tabellenrahmen:has(.zeilen-aktionen[open]) { overflow: visible; }

/* Die Knoepfe „Wahrgenommen + Notiz“ / „Nicht angetroffen“ an einem
   vergangenen, noch geplanten Termin: rechts in der Zeile, auf dem Handy
   darunter. */
.terminzeile-ergebnis { margin-left: auto; }
.terminzeile-ergebnis form { margin: 0; }
@media (max-width: 640px) {
  .terminzeile-ergebnis { margin-left: 0; flex-basis: 100%; }
}

/* ========================================= Kontakte: Liste, Kontaktseite, Dubletten */
/* Die Klappe „Filter“ (Rolle, Ort) liegt unter dem Suchfeld und nimmt die
   ganze Breite der Filterleiste. */
.kontaktsuche .kontaktfilter {
  flex-basis: 100%;
  margin-top: 0.25rem;
}
.kontaktsuche .kontaktfilter .formularzeile {
  display: inline-block;
  margin-right: 1rem;
  vertical-align: top;
}

/* Das Menue „Aktionen“ der Kontaktseite: rechtsbuendig, mit dem Formular
   „Einer Akte zuordnen“ (Auswahl mit Tippfeld) als erster Zeile. */
.kontakt-aktionen .neu-liste {
  right: 0;
  left: auto;
  min-width: 16rem;
}
.kontakt-aktionen .neu-liste form {
  margin: 0;
}
.kontakt-aktionen .neu-liste .menue-formular {
  display: grid;
  gap: 0.35rem;
  padding: 0.55rem 0.9rem 0.7rem;
  border-bottom: 1px solid var(--rand);
}
.kontakt-aktionen .neu-liste .menue-formular label {
  font-weight: 600;
}
.kontakt-aktionen .neu-liste .gefahr-text {
  color: var(--fehler);
  border-top: 1px solid var(--rand);
}

/* Dublettenhinweis beim Tippen im Kontaktformular. */
.dublettenhinweis ul {
  margin: 0.3rem 0;
  padding-left: 1.2rem;
}
.dublettenhinweis li {
  margin: 0.15rem 0;
}

/* Mögliche Dubletten: je Gruppe die beiden Wege in einer Zeile; die Auswahl
   „Bleibt“ steht neben ihrem Knopf. */
.dubletten-wege {
  margin-top: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.dubletten-wege form {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.dubletten-wege select {
  max-width: 18rem;
}
.dublettenkarte h2 .marker {
  font-weight: 400;
  margin-left: 0.4rem;
}

/* ========================================= Kalender und Termine */
/* Legende unter dem Kalender: zugeklappt, Hilfetexte ohne Abstand nach oben. */
.kalender-legende { margin: 0.4rem 0 0; }
.kalender-legende .hilfetext { margin: 0.3rem 0; }

/* Herkunft eines Termins (Frist, Abo, angelegt von) in Zeile und Vorschau. */
.terminherkunft a { white-space: nowrap; }

/* Terminliste: Zeilenaktionen nebeneinander, „Absagen …“ klappt die Zeile auf. */
.terminliste-aktionen { white-space: normal; }
.terminliste-aktionen form.in-zeile { display: inline-block; margin: 0 0.2rem 0.2rem 0; }
.zeilen-absagen { display: inline-block; }
.zeilen-absagen > summary { list-style: none; display: inline-block; }
.zeilen-absagen > summary::-webkit-details-marker { display: none; }
.zeilen-absagen[open] > .werkzeuge { margin-top: 0.4rem; }

/* Plan drucken: die Schalter stehen als eigene Karte ueber dem Plan. */
.terminplan-schalter { align-items: center; gap: 0.5rem; }
.terminplan-schalter label { margin: 0; }

/* Handy und Abo: Statuskarte mit drei Zeilen. */
.abo-stand { list-style: none; margin: 0; padding: 0; }
.abo-stand li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--rand);
}
.abo-stand li:first-child { border-top: 0; }
.abo-stand-name { flex: 0 0 11rem; font-weight: 600; }
.abo-stand-text { flex: 1 1 14rem; }
details.karte.klappe > details.klappe { margin-bottom: 0.6rem; }

/* Meine Planung und Kontakt & Besuche: Klappen, Hinweis „wird geplant“ und
   die Knopfreihe am Block. .karte.jetzt-dran, nav.schnellreiter,
   details.klappe, .marker und .hilfetext gibt es schon. */
.planung-laeuft {
  margin: 0 0 0.8rem;
}
.planung-erklaerung {
  margin: 0.8rem 0 0;
}
.planung-erklaerung > summary {
  cursor: pointer;
}
.planung-erklaerung > .hilfetext {
  margin: 0.5rem 0 0;
}
.block-werkzeuge {
  margin-top: 0.6rem;
}
details.besuche-klappe {
  margin: 0 0 1rem;
}
details.besuche-klappe > summary {
  font-size: 1.15rem;
  font-weight: 600;
  padding: 0.4rem 0;
}
details.besuche-klappe > .karte {
  margin-top: 0.4rem;
}

/* Der Rahmen nimmt, was unter Kopf und Hinweisen bleibt: schreibwerkstatt.js
   misst die Oberkante und setzt --werkstatt-oben; ohne Skript gilt die alte
   Schaetzung. */
.werkstatt-rahmen {
  height: calc(100vh - var(--werkstatt-oben, 14rem) - 1rem);
  min-height: 24rem;
}

/* Die zugeklappte Leiste aus „Direkt antworten“ ueber dem Editor. */
.werkstatt-hinweise {
  margin: .4rem 0 .5rem;
}
.werkstatt-hinweise > .hinweiskasten {
  margin-top: .4rem;
}

/* Startseite: beide Listen gleich, eine Zeile je Bearbeitung. */
.werkstatt-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.werkstatt-liste li {
  padding: .35rem 0;
  border-bottom: 1px solid var(--rand);
}
.werkstatt-liste li:last-child {
  border-bottom: none;
}
.werkstatt-liste .marker,
.werkstatt-liste .knopf {
  margin-left: .3rem;
}
.werkstatt-liste .hilfetext {
  display: block;
}

/* ========================================= Berichte: Liste, Bericht, Textbausteine */

/* Menue „Aktionen“ in Liste und Bericht: rechtsbuendig, Formulare ohne Rand. */
.berichte-aktionen .neu-liste,
.bericht-aktionen .neu-liste {
  right: 0;
  left: auto;
  min-width: 15rem;
}
.bericht-aktionen .neu-liste form {
  margin: 0;
}
.bericht-aktionen .neu-liste .gefahr-text {
  color: var(--fehler);
  border-top: 1px solid var(--rand);
}

/* „Jetzt dran“: die weiteren faelligen Fristen in einer Klappe unter der Liste. */
.jetzt-dran-mehr {
  margin-top: 0.4rem;
}
.jetzt-dran-mehr > summary {
  cursor: pointer;
}

/* Kopf des Berichts: Frist mit Herkunft als eigene Zeile unter den Angaben. */
.bericht-frist {
  margin-top: 0.15rem;
}

/* Datengrundlage: der Knopf „Nachtragen“ in der Zeile. */
.datengrundlage .knopf.klein {
  margin-left: 0.4rem;
}

/* Die KI-Hilfe zugeklappt: Knoepfe und „Was hinausgeht“ mit Abstand. */
.berichtshilfe > .werkzeuge {
  margin: 0.5rem 0;
}

/* Der eine Dialog „Textbaustein einfügen“ fuer alle Abschnitte. */
.bausteindialog {
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--text);
  width: min(94vw, 40rem);
  padding: 1rem 1.25rem;
  box-shadow: var(--schatten);
}
.bausteindialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}
.bausteindialog h2 {
  margin-top: 0;
  font-size: 1.1rem;
}
.bausteindialog select {
  width: 100%;
}
.bausteindialog-vorschau {
  max-height: 14rem;
  overflow-y: auto;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--rand-stark);
  background: var(--akzent-schwach);
}

/* Textbausteine: Kategorie als Sprungliste. */
.sprungliste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  margin-bottom: 0.75rem;
}

/* Formulare: Stand-Zeile ueber dem Eingabeformular, Pflichtfelder,
   Filterzeile der Feldzuordnung. In stil.css vor „Checklistenzettel
   (Aufgaben)“ einfuegen. .hinweiskasten, details.klappe, .marker,
   .jetzt-dran und nav.schnellreiter gibt es schon. */
.ausfuellen-stand > details.klappe {
  margin-top: 0.4rem;
}
.ausfuellen-stand > details.klappe p {
  margin: 0.3rem 0;
}
.pflicht-liste {
  margin: 0.3rem 0 0;
  padding-left: 1.2rem;
}
.formular-seite-felder .pflicht-marker {
  display: inline-block;
  margin: -0.4rem 0 0.8rem;
}
[data-zuordnung-filter] {
  align-items: center;
}
/* .filterleiste und die Kartentabelle setzen display -- hidden muss gewinnen. */
[data-zuordnung-filter][hidden],
.zuordnung-tabelle tr[hidden],
.pflicht-liste li[hidden] {
  display: none;
}

/* Rechtsauskunft: Beispielfragen unter dem Fragefeld. */
.beispielfragen {
  margin-top: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Gesetzesbestand „Jetzt dran“: der Knopf „Erneuern“ in der Zeile. */
.jetzt-dran .verweise form {
  display: inline;
  margin-left: 0.4rem;
}

/* Folgearbeit in der Fristzeile: Menü am rechten Rand, damit es nicht aus der Zeile läuft. */
.folgearbeit-menue {
  display: inline-block;
}
.fristzeile-aktion .folgearbeit-menue .neu-liste {
  left: auto;
  right: 0;
  min-width: 14rem;
}

/* Automatiken: Zeilen ausserhalb des gewaehlten Reiters bleiben im Formular und
   sind nur verborgen. Auf dem Handy macht .kartentabelle jede Zeile zum Block --
   ohne diese Regel kaeme die verborgene Zeile dort wieder zum Vorschein. */
.kartentabelle tr[hidden] {
  display: none;
}

/* ========================================= Verwaltung: Benutzer, Büro, Startordner */
/* Das Menü „Aktionen ▾“ in der Kontozeile: in der letzten Spalte nach links
   aufklappen, damit es nicht über den Rand läuft; Formulare ohne Abstand. */
.konto-aktionen .neu-liste {
  right: 0;
  left: auto;
  min-width: 14rem;
}
.konto-aktionen .neu-liste form {
  margin: 0;
}
.konto-aktionen .neu-liste .gefahr-text {
  color: var(--fehler);
  border-top: 1px solid var(--rand);
}

/* Die vier Klappen der Büro-Einstellungen und die Zeile „gilt: …“ unter jedem Feld. */
.buero-abschnitt {
  margin: 0 0 0.75rem;
}
.buero-abschnitt > summary {
  font-weight: 600;
}
.buero-gilt {
  margin: -0.35rem 0 0.75rem;
}

/* Startordner: die Aufgabenkreise je Zeile als kleine Klappe mit Haken untereinander. */
.startordner-kreise > summary {
  white-space: nowrap;
}
.startordner-kreise .ankreuzzeile {
  display: flex;
  margin: 0.2rem 0;
}

/* ------------------------------------------------------------------ */
/* Anbindungen, KI, Assistenz, Briefdienst, Telefon, Konto */
/* ------------------------------------------------------------------ */

/* Anbindungen: je Postfach eine Zeile mit eigenem Prüfknopf. */
.anbindung-postfaecher {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.anbindung-postfaecher li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.6rem;
}
/* Der Prüftext steht sichtbar unter der Prüfung, nicht im Tooltip. */
.anbindung-pruefung-text {
  overflow-wrap: anywhere;
}

/* KI-Unterstützung: Budget-Karte mit vier Zahlen nebeneinander. */
.ki-budget-zahlen,
.agenten-betrieb-zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.6rem 1.2rem;
  margin: 0.5rem 0;
}
.ki-budget-zahlen div,
.agenten-betrieb-zahlen div {
  margin: 0;
}
.ki-budget-zahlen dt,
.agenten-betrieb-zahlen dt {
  color: var(--text-gedaempft);
}
.ki-budget-zahlen dd,
.agenten-betrieb-zahlen dd {
  margin: 0.1rem 0 0;
  font-weight: 600;
}
.ki-budget-zahlen dd .hilfetext,
.agenten-betrieb-zahlen dd .hilfetext {
  font-weight: 400;
}
/* Je Bereich eine Klappe; Funktionen ohne Aufruf in 30 Tagen treten zurück. */
.ki-bereich + .ki-bereich {
  margin-top: 0.4rem;
}
.ki-funktion-still td {
  color: var(--text-gedaempft);
}

/* Assistenz: Betriebskarte oben. */
.agenten-betrieb h2 .ampel {
  margin-left: 0.5rem;
  font-size: 1rem;
}

/* Telefonanlage: Ergebnis von „Verbindung prüfen“ als Prüfliste. */
.pruefliste {
  margin: 0.6rem 0;
}
.pruefliste-punkte {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.pruefliste-punkt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
}
.pruefliste-zeichen {
  display: inline-flex;
  justify-content: center;
  width: 1.3rem;
  font-weight: 700;
}
.pruefliste-punkt.ok .pruefliste-zeichen {
  color: var(--erfolg);
}
.pruefliste-punkt.warnung .pruefliste-zeichen {
  color: var(--warnung);
}
.pruefliste-punkt.fehler .pruefliste-zeichen {
  color: var(--fehler);
}

/* Mein Konto: Reiter; die Abschnitte blendet konto-reiter.js um. */
.konto-reiterleiste {
  margin-bottom: 1rem;
}
.konto-reiter[hidden] {
  display: none;
}

/* Zweisprachig: Hilfe und Erklaerungen zusaetzlich auf Russisch. Die
   deutsche Fassung bleibt vorn und in voller Groesse -- sie ist, was auf dem
   Bildschirm und in den Schreiben steht; die russische steht abgesetzt
   darunter, mit eigenem Rand, damit das Auge sie sofort findet. */
.russisch-fassung {
  margin-top: 0.5rem;
  padding: 0.35rem 0 0.35rem 0.75rem;
  border-left: 3px solid var(--rand-stark);
  color: var(--text);
}
.russisch-fassung > :first-child {
  margin-top: 0;
}
.russisch-fassung > :last-child {
  margin-bottom: 0;
}
.russisch-liste {
  margin: 0.25rem 0 0;
  padding-left: 1.25rem;
}
.handbuch-sprachwahl {
  margin: 0.5rem 0;
}
.handbuch-veraltet {
  border-left-color: var(--warnung);
  background: var(--warnung-flaeche);
}
/* Der persoenliche Gruss im Willkommen -- vom Buero fuer die neue Person. */
.willkommensgruss {
  white-space: pre-line;
  text-align: left;
}

/* ========================================= Checklistenzettel (Aufgaben) */
/*
 * Der Zettel fuer den Schreibtisch: alle Checklisten auf einem Blatt.
 *
 * EINE Spalte, am Bildschirm wie auf Papier.
 *
 * Zwei CSS-Spalten waren an beiden Stellen falsch. Am Bildschirm wird die
 * Spaltenhoehe einmal ausbalanciert; ein Block, der hoeher ist als diese
 * Hoehe und laut `break-inside: avoid` nicht geteilt werden darf, wird dann
 * abgeschnitten statt umbrochen. Auf Papier verteilte der Spaltensatz die
 * Listen kreuz und quer: die linke Spalte laeuft bis zum Seitenende, der
 * Rest steht rechts, und wo eine Liste anfaengt, sieht man erst beim
 * Suchen.
 *
 * Auf Papier gilt: eine Liste, eine neue Seite. Siehe den Druckblock am
 * Dateiende.
 */

.zettel-hinweis p {
  margin: 0 0 0.5rem 0;
}
.zettel-hinweis p:last-child {
  margin-bottom: 0;
}

#zettelliste {
  max-width: 46rem;
}

.zettel-liste {
  margin-bottom: 1.2rem;
  break-inside: avoid;
}

.zettel-kopf {
  border-bottom: 1px solid var(--rand);
  padding-bottom: 0.6rem;
  margin-bottom: 0.8rem;
}
.zettel-kopf h2 {
  margin: 0 0 0.2rem 0;
}
.zettel-kopf .hilfetext {
  margin: 0;
}

.zettel-quellen {
  margin: 0.4rem 0 0 0;
  font-size: 1rem;
}
.zettel-quellen cite,
.zettel-text cite,
.zettel-teil cite,
.zettel-kopf cite {
  font-style: italic;
  color: var(--akzent);
}

.zettel-posten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.zettel-punkt {
  display: grid;
  grid-template-columns: 2.7rem 1.1rem 1fr;
  gap: 0 0.5rem;
  align-items: start;
  line-height: 1.42;
}

.zettel-tag {
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-gedaempft);
  background: var(--flaeche-gedaempft);
  border-radius: 4px;
  padding: 0.1rem 0.3rem;
  text-align: center;
  margin-top: 0.12rem;
  white-space: nowrap;
}
.zettel-punkt.ist-wichtig .zettel-tag {
  color: var(--warnung);
  background: var(--warnung-flaeche);
}
.zettel-punkt.ist-wichtig .zettel-text {
  font-weight: 700;
}

.zettel-punkt > .kaestchen {
  margin-top: 0.2rem;
}
.zettel-punkt.ist-wichtig > .kaestchen {
  border-color: var(--warnung);
}
.kaestchen.klein {
  width: 0.72rem;
  height: 0.72rem;
  border-width: 1px;
  margin-top: 0.28rem;
}

.zettel-text .marker {
  margin-left: 0.3rem;
}

.zettel-teil {
  grid-column: 3;
  list-style: none;
  margin: 0.35rem 0 0.1rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}
.zettel-teil li {
  display: flex;
  gap: 0.45rem;
  align-items: start;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text-gedaempft);
}

.zettel-fuss {
  margin: 0.85rem 0 0 0;
  padding-top: 0.55rem;
  border-top: 1px solid var(--rand);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-gedaempft);
}

/* ================================================================ Druck */
/* Alle Druckregeln in einem Block, als Letztes in der Datei: So schlagen
   sie jede Bildschirmregel gleicher Spezifitaet, ganz gleich, wo deren
   Baustein steht. Neue Druckregeln kommen hier hinein. */
@media print {
  /* -- Allgemein */
  .kopf,
  .werkzeuge,
  .formularaktionen,
  .reiter {
    display: none;
  }
  /* Telefon- und Erinnerungsleiste tragen Namen aus fremden Akten; die von
     Skripten eingefuegten Leisten gehoeren nicht aufs Papier. */
  .telefon-leiste,
  .erinnerungs-leiste,
  .textwerkstatt,
  .diktat-leiste,
  .editorleiste {
    display: none !important;
  }
  .karte {
    border: none;
    box-shadow: none;
    padding: 0;
  }

  /* -- Fristen */
  .nicht-drucken {
    display: none;
  }
  .druckkopf {
    display: block;
    margin-bottom: 0.8rem;
  }
  .fristzeile-aktion {
    display: none;
  }
  tr.ist-ueberfaellig td {
    font-weight: 700;
  }

  /* -- Grossdruck */
  body.grossdruck #zettelliste,
  body.grossdruck table {
    font-size: 14pt;
  }
  body.grossdruck .druckkopf h2,
  body.grossdruck .seite-zettel .druckkopf h2 {
    font-size: 18pt;
  }
  body.grossdruck .druckkopf .hilfetext,
  body.grossdruck .seite-zettel .druckkopf .hilfetext,
  body.grossdruck .zettel-hinweis {
    font-size: 12pt;
  }
  body.grossdruck .zettel-punkt {
    grid-template-columns: 3.2rem 1.3rem 1fr;
  }

  /* -- Einstellungen und Datenblatt */
  .einstellungen-abschnitt > summary,
  .anbindungen-tabelle .werkzeuge,
  .assistent-fortschritt {
    display: none;
  }
  .datenblatt {
    break-inside: avoid;
  }

  /* -- Unterschriftszeile */
  .unterschriftszeile {
    break-inside: avoid;
    margin-top: 3rem;
  }

  /* -- Kalender */
  .nur-drucken {
    display: block;
  }
  .terminplan-tag {
    break-after: avoid;
  }

  /* -- Rundgang */
  .rundgang-licht, .rundgang-blase, .rundgang-pille { display: none !important; }

  /* -- Begleiter-Leiste der Tagesliste */
  .begleiter { display: none !important; }

  /* -- Checklistenzettel */
  /* Der Zettel darf die ganze Blattbreite haben. Das Geruest ist auf
     Bildschirmbreite ausgelegt und wuerde sonst einen Rand verschenken,
     den das Blatt schon selbst mitbringt. */
  .seite-zettel main {
    max-width: none;
    padding: 0;
  }
  /* Der Kopf des Blattes bleibt schlank: er teilt sich die erste Seite
     mit der ersten Liste, und jeder Punkt, den er hier zu viel nimmt,
     schiebt diese Liste auf ein zweites Blatt. Nur auf dem Zettel --
     die Tagesuebersicht hat ihren eigenen Kopf. */
  .seite-zettel .druckkopf {
    margin-bottom: 3mm;
  }
  .seite-zettel .druckkopf h2 {
    font-size: 13pt;
    margin: 0 0 0.15rem 0;
  }
  .seite-zettel .druckkopf .hilfetext {
    font-size: 9pt;
    line-height: 1.35;
  }

  #zettelliste {
    max-width: none;
    /* Bewusst KEIN `columns`. Siehe die Erklaerung oben. */
    font-size: 10.5pt;
  }

  /* Eine Liste, eine Seite: das ist die eigentliche Aenderung. Geteilt
     werden darf sie trotzdem (`break-inside: auto`) -- heute ist die
     laengste 34 Zeilen lang und passt, aber wer eine Liste ergaenzt, soll
     den Rest nicht verlieren. */
  .zettel-liste {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    break-before: page;
    break-inside: auto;
  }
  /* Die erste gedruckte Liste teilt sich die Seite mit dem Kopf, sonst
     bliebe Seite 1 fast leer. Welche das ist, haengt von der Suche ab --
     deshalb setzt static/js/zettel.js die Klasse vor dem Druck neu. Die
     Vorlage gibt sie der ersten Liste schon mit, damit es auch ohne
     Javascript stimmt. */
  .zettel-liste.erste-im-druck {
    break-before: auto;
  }

  /* Zusammenhalten, was zusammengehoert: eine Ueberschrift ohne ihre
     erste Zeile und eine Aufgabe ohne ihre Unterpunkte sind der Grund,
     warum gedruckte Listen unruhig wirken. */
  .zettel-kopf {
    break-after: avoid;
  }
  .zettel-punkt,
  .zettel-teil li {
    break-inside: avoid;
  }
  .zettel-fuss {
    break-before: avoid;
  }

  /*
   * Enger gesetzt und durchgehend in em.
   *
   * Am Bildschirm stehen hier rem -- feste Groessen, die den Grundtext
   * nicht kennen. Im Druck laeuft der Grundtext auf 9,5pt (12,7px); die
   * Unterpunkte waeren mit ihren 0,9rem (14,4px) also GROESSER geworden
   * als die Aufgaben darueber. In em rechnen sie mit.
   *
   * Die Werte sind nachgemessen, nicht geschaetzt: bei A4 und Chromes
   * Standardrand bleiben fuer eine Liste 986 Punkt, die laengste (das
   * Erstgespraech) braucht 831.
   */
  .zettel-kopf {
    padding-bottom: 0.4rem;
    margin-bottom: 0.55rem;
  }
  .zettel-kopf h2 {
    font-size: 1.3em;
    margin-bottom: 0.1rem;
  }
  .zettel-kopf .hilfetext {
    font-size: 0.88em;
  }
  .zettel-quellen {
    font-size: 0.85em;
    margin-top: 0.3rem;
  }
  .zettel-posten {
    gap: 0.32rem;
  }
  .zettel-punkt {
    grid-template-columns: 2.4rem 1rem 1fr;
    line-height: 1.32;
  }
  /* Die Tagesangabe: kleiner als der Text, ohne Flaeche, mit Rahmen --
     Hintergruende druckt der Browser nur auf Anforderung. */
  .zettel-tag {
    font-size: 0.78em;
    background: none;
    border: 0.5pt solid #bbb;
  }
  .zettel-teil {
    gap: 0.16rem;
    margin: 0.22rem 0 0.05rem 0;
  }
  .zettel-teil li {
    font-size: 0.9em;
    line-height: 1.3;
  }
  /* Nur auf dem Zettel: `.kaestchen` gehoert auch der gedruckten
     Tagesuebersicht, und dort steht der Text auf voller Groesse. */
  #zettelliste .kaestchen {
    width: 0.85em;
    height: 0.85em;
  }
  #zettelliste .kaestchen.klein {
    width: 0.68em;
    height: 0.68em;
    margin-top: 0.24rem;
  }
  .zettel-fuss {
    font-size: 0.82em;
    margin-top: 0.55rem;
    padding-top: 0.35rem;
  }

  .zettel-hinweis {
    border: 0.5pt solid #999;
    padding: 1.6mm 2mm;
    margin-bottom: 4mm;
    font-size: 9pt;
    line-height: 1.35;
  }
  .zettel-hinweis p {
    margin-bottom: 0.3rem;
  }
  /* In Schwarzweiss traegt die Flaeche nichts; Rahmen und Schrift schon. */
  .zettel-punkt.ist-wichtig .zettel-tag {
    background: none;
    border: 1pt solid #000;
    color: #000;
  }
  .zettel-text .marker {
    background: none;
    border: 0.5pt solid #bbb;
  }
  /* Postausgangsbuch: Die Akte ist am Bildschirm ein Link, auf dem Papier nur der Name. */
  .ausgangsbuch-tabelle a {
    color: inherit;
    text-decoration: none;
  }
}