/* Kontor -- Oberflaeche fuer kreis.systems
   Ruhiges Bueroprogramm fuer den Werktag: eine Person prueft hier vormittags
   und nachmittags Betriebe, Demos und Briefe an einem Bildschirm, oft laenger
   am Stueck. Klare Tabellen, ein einziger Akzent, gut lesbare Systemschrift,
   kein Schablonen-Look. Kontrast durchgehend mindestens 4,5 zu 1. */

:root {
  /* Neutrale Flaechen, leicht warm getoent (nie reines Schwarz oder Weiss) */
  --grund: oklch(98.2% 0.004 80);
  --flaeche: oklch(100% 0 0);
  --flaeche-erhoben: oklch(99% 0.003 80);
  --rand: oklch(88% 0.006 80);
  --rand-stark: oklch(76% 0.008 80);
  --schrift: oklch(24% 0.012 80);
  --schrift-gedaempft: oklch(42% 0.012 80);
  --schrift-leise: oklch(52% 0.012 80);

  /* Die Farbrollen der Kundenakte gelten ab hier fuer ganz Kontor
     (AN-348). Der bisherige Teal-Akzent bildet die Rolle Blau ab
     (Optionen, Verweise, Filter, Auswahl, Fokusring); zwei weitere
     Familien tragen Gelb (Hinweis, Wartestand, nie auf einem
     Handlungsknopf) und Rot (Verwerfen, Loeschen, Nicht mehr
     kontaktieren, nirgends sonst). Die *-dunkel-Stufe ist die um
     ~8 % dunklere Variante der jeweiligen --ak-*-voll-Rolle, von Hand
     abgestimmt statt aus ihr berechnet (keine relative-color-Syntax,
     wegen Browserstreuung). Werte selbst kommen aus den --ak-*-Token
     weiter unten in dieser Datei. */
  --akzent: var(--ak-blau-voll);
  --akzent-dunkel: oklch(40% 0.145 250);
  --akzent-hell: var(--ak-blau-flaeche);
  --akzent-rand: var(--ak-blau-linie);

  --hinweis: var(--ak-gelb-voll);
  --hinweis-dunkel: oklch(40% 0.09 85);
  --hinweis-hell: var(--ak-gelb-flaeche);
  --hinweis-rand: var(--ak-gelb-linie);

  --gefahr: var(--ak-rot-voll);
  --gefahr-dunkel: oklch(41% 0.16 27);
  --gefahr-hell: var(--ak-rot-flaeche);
  --gefahr-rand: var(--ak-rot-linie);

  --automation: var(--ak-lila-voll);
  --automation-hell: var(--ak-lila-flaeche);
  --automation-rand: var(--ak-lila-linie);

  /* Gruen: Eingabe und Bestaetigung (Senden, Speichern, Anlegen) */
  --erfolg: var(--ak-gruen-voll);
  --erfolg-dunkel: oklch(39% 0.125 150);
  --erfolg-hell: var(--ak-gruen-flaeche);
  --erfolg-rand: var(--ak-gruen-linie);

  --schatten: 0 1px 2px oklch(20% 0.01 80 / 0.06), 0 1px 1px oklch(20% 0.01 80 / 0.04);
  --radius: 6px;
  --schrift-stapel:
    -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Bewegung, ruhig: kurze, gedaempfte Uebergaenge statt harter Spruenge */
  --dauer-mikro: 100ms;
  --dauer-klein: 160ms;
  --dauer-hinweis: 220ms;
  --ease-bewegung: cubic-bezier(0.2, 0, 0, 1);

  /* Abstandsraster, 4-px-Basis. Jede Zahl deckt mehrere aeltere
     Handwerte ab, statt jede fuer sich zu pflegen. */
  --abstand-1: 4px;
  --abstand-2: 8px;
  --abstand-3: 12px;
  --abstand-4: 16px;
  --abstand-5: 24px;
  --abstand-6: 32px;

  /* Schriftskala, Faktor 1,25 je Stufe (mind. gefordert), zwei Gewichte */
  --schrift-klein: 0.8rem;
  --schrift-grund: 1rem;
  --schrift-mittel: 1.25rem;
  --schrift-gross: 1.5625rem;
  --schrift-titel: 1.953rem;
  --gewicht-normal: 400;
  --gewicht-fett: 600;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font-family: var(--schrift-stapel);
  font-size: var(--schrift-grund);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Sprungmarke, sichtbar erst beim Fokus */
.sprung-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.6em 1em;
  background: var(--akzent-dunkel);
  color: var(--flaeche-erhoben);
  border-radius: 0 0 var(--radius) 0;
}

.sprung-link:focus {
  left: 0;
}

/* Sichtbarer Fokus ueberall, keine Ausnahme */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2.5px solid var(--akzent);
  outline-offset: 2px;
  border-radius: 3px;
}

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

a:hover {
  color: var(--akzent);
}

h1, h2, h3, h4 {
  font-weight: var(--gewicht-fett);
  line-height: 1.25;
  color: var(--schrift);
}

h1 {
  font-size: var(--schrift-titel);
  margin: 0 0 var(--abstand-4);
  letter-spacing: -0.01em;
}

h2 {
  font-size: var(--schrift-gross);
  margin: 0 0 var(--abstand-3);
}

h3 {
  font-size: var(--schrift-mittel);
  margin: 0 0 var(--abstand-2);
}

h4 {
  font-size: var(--schrift-grund);
  margin: 0 0 var(--abstand-2);
  color: var(--schrift-gedaempft);
}

p {
  margin: 0 0 var(--abstand-4);
  max-width: 70ch;
}

.unterzeile {
  color: var(--schrift-gedaempft);
  font-size: var(--schrift-grund);
  margin: 0 0 var(--abstand-4);
}

/* Kopfzeile */
.kopf {
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
}

.kopf-zeile {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--abstand-3) var(--abstand-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-4);
}

.marke {
  font-weight: var(--gewicht-fett);
  font-size: var(--schrift-mittel);
  color: var(--schrift);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.marke:hover {
  color: var(--akzent-dunkel);
}

/* Schalter fuers aufklappbare Menue, nur unter 720 px sichtbar (siehe
   Medienquery unten). Er steuert .haupt-navigation ueber [hidden] und
   kontor.js. */
.menu-schalter {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--schrift);
  font-size: var(--schrift-mittel);
  cursor: pointer;
  transition:
    border-color var(--dauer-mikro) var(--ease-bewegung),
    color var(--dauer-mikro) var(--ease-bewegung);
}

.menu-schalter:hover {
  border-color: var(--akzent);
  color: var(--akzent-dunkel);
}

/* .haupt-navigation traegt bewusst kein flex: 1 mehr - auf breiten
   Bildschirmen bleibt sie so breit wie ihr Inhalt, .kopf-werkzeuge
   schiebt sich mit margin-left: auto an den rechten Rand. */
.haupt-navigation {
  display: flex;
  gap: var(--abstand-1);
  flex-wrap: wrap;
}

.haupt-navigation a {
  display: inline-flex;
  align-items: center;
  color: var(--schrift-gedaempft);
  text-decoration: none;
  padding: var(--abstand-2) var(--abstand-3);
  border-radius: var(--radius);
  font-size: var(--schrift-grund);
  transition:
    background-color var(--dauer-mikro) var(--ease-bewegung),
    color var(--dauer-mikro) var(--ease-bewegung);
}

.haupt-navigation a:hover {
  color: var(--schrift);
  background: var(--grund);
}

.haupt-navigation a[aria-current="page"] {
  color: var(--akzent-dunkel);
  background: var(--akzent-hell);
  font-weight: var(--gewicht-fett);
}

.kopf-werkzeuge {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  margin-left: auto;
}

.hilfe-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  border: 1px solid var(--rand-stark);
  color: var(--schrift-gedaempft);
  text-decoration: none;
  font-weight: var(--gewicht-fett);
  font-size: var(--schrift-grund);
  transition:
    border-color var(--dauer-mikro) var(--ease-bewegung),
    color var(--dauer-mikro) var(--ease-bewegung),
    background-color var(--dauer-mikro) var(--ease-bewegung);
}

.hilfe-knopf:hover {
  border-color: var(--akzent);
  color: var(--akzent-dunkel);
  background: var(--akzent-hell);
}

.abmelden-form {
  margin: 0;
}

/* Inhalt */
.inhalt {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--abstand-6) var(--abstand-5) calc(var(--abstand-6) * 2);
}

/* Rueckmeldung nach getaner Handlung (gespeichert, angelegt, entfernt):
   immer Gruen, das ist die Bestaetigung, nicht die Handlung selbst. */
.seitenhinweis {
  background: var(--erfolg-hell);
  border: 1px solid var(--erfolg-rand);
  color: var(--erfolg-dunkel);
  border-radius: var(--radius);
  padding: var(--abstand-3) var(--abstand-4);
  font-size: var(--schrift-grund);
  margin: 0 0 var(--abstand-5);
}

.fehlermeldung {
  background: var(--hinweis-hell);
  border: 1px solid var(--hinweis-rand);
  color: var(--hinweis-dunkel);
  border-radius: var(--radius);
  padding: var(--abstand-3) var(--abstand-4);
  font-size: var(--schrift-grund);
  margin: 0 0 var(--abstand-5);
  font-weight: var(--gewicht-fett);
}

.abschnitt {
  margin: 0 0 calc(var(--abstand-6) + var(--abstand-3));
}

.abschnitt:last-child {
  margin-bottom: 0;
}

.leerer-hinweis {
  color: var(--schrift-leise);
  font-style: normal;
  padding: var(--abstand-4) 0;
  border-top: 1px solid var(--rand);
  max-width: 60ch;
}

.warnungsliste {
  margin: 0;
  padding-left: var(--abstand-5);
  color: var(--hinweis-dunkel);
}

.warnungsliste li {
  margin-bottom: var(--abstand-1);
}

/* Rollfeld fuers Handy: eine Tabelle, die breiter ist als der
   Bildschirm, rollt in ihrem eigenen Feld statt die ganze Seite
   waagerecht zu schieben. grund.html liefert dafuer keine eigene
   Huelle, weil nicht jede Tabelle sie braucht - die Vorlage legt ihre
   .tabelle einfach hinein: <div class="tabelle-rolle"><table ...> */
.tabelle-rolle {
  overflow-x: auto;
  /* contain: layout haelt eine sehr breite Tabelle (lange Adresse,
     viele Spalten) wirklich im eigenen Rollfeld - ohne das wuerde ihr
     Eigenmass trotz overflow-x: auto die Seite selbst in die Breite
     ziehen (Chromium-Eigenheit bei Tabellen in Scrollcontainern). */
  contain: layout;
  /* Rollhinweis ohne JavaScript: die ersten beiden Hintergruende
     decken die Randschatten dahinter zu und laufen mit dem Inhalt
     (background-attachment: local), die Schatten selbst haengen am
     Rollfeld (background-attachment: scroll). Ist am jeweiligen Rand
     nichts mehr zu rollen, schiebt sich die Abdeckung genau darueber -
     der Schatten verschwindet von selbst. */
  background:
    linear-gradient(to right, var(--flaeche) 40%, transparent) left / 24px 100% no-repeat local,
    linear-gradient(to left, var(--flaeche) 40%, transparent) right / 24px 100% no-repeat local,
    linear-gradient(to right, oklch(20% 0.01 80 / 0.16), transparent) left / 10px 100% no-repeat scroll,
    linear-gradient(to left, oklch(20% 0.01 80 / 0.16), transparent) right / 10px 100% no-repeat scroll;
}

/* Tabellen: reichlich Zeilenabstand, klare Trennlinien */
.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--schrift-grund);
}

.tabelle th,
.tabelle td {
  text-align: left;
  padding: var(--abstand-3) var(--abstand-3);
  border-bottom: 1px solid var(--rand);
  vertical-align: middle;
}

.tabelle thead th {
  color: var(--schrift-gedaempft);
  font-weight: var(--gewicht-fett);
  font-size: var(--schrift-klein);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1.5px solid var(--rand-stark);
}

.tabelle tbody tr:hover {
  background: var(--flaeche-erhoben);
}

.tabelle-eingebettet {
  margin: var(--abstand-3) 0;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  overflow: hidden;
}

.tabelle-eingebettet th,
.tabelle-eingebettet td {
  padding: var(--abstand-2) var(--abstand-3);
  font-size: var(--schrift-klein);
}

.zelle-umbruch {
  word-break: break-all;
}

.verborgene-beschriftung {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Kennzeichen */
.kennzeichen {
  display: inline-block;
  font-size: var(--schrift-klein);
  font-weight: var(--gewicht-fett);
  padding: 0.15rem var(--abstand-2);
  border-radius: 999px;
  background: var(--grund);
  border: 1px solid var(--rand-stark);
  color: var(--schrift-gedaempft);
}

/* Ton je Rolle: Gelb fuer Hinweis und Wartestand, Rot ausschliesslich
   fuer Verwerfen/Loeschen/Nicht-mehr-kontaktieren, Lila fuer
   Automationen, Grau fuer Vergangenes und Inaktives. */
.kennzeichen-gelb {
  background: var(--hinweis-hell);
  border-color: var(--hinweis-rand);
  color: var(--hinweis-dunkel);
}

.kennzeichen-rot {
  background: var(--gefahr-hell);
  border-color: var(--gefahr-rand);
  color: var(--gefahr-dunkel);
}

.kennzeichen-lila {
  background: var(--automation-hell);
  border-color: var(--automation-rand);
  color: var(--automation);
}

.kennzeichen-grau {
  background: var(--grund);
  border-color: var(--rand-stark);
  color: var(--schrift-gedaempft);
}

/* Basiskasten: Flaeche, Haarlinie, Ecke, Innenabstand. Die handgebauten
   Kartenrezepturen (Filterleiste, Vorschau, Variante, Pipeline-Spalte
   und -Karte, Anmeldekasten) tragen diese Klasse zusaetzlich zu ihrer
   eigenen und ueberschreiben nur, was bei ihnen abweicht. */
.kasten {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: var(--abstand-4);
}

/* Formulare und Felder */
.feld {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-1);
  margin: 0 0 var(--abstand-4);
}

.feld label {
  font-size: var(--schrift-klein);
  font-weight: var(--gewicht-fett);
  color: var(--schrift-gedaempft);
}

input, select, textarea, button {
  font-family: inherit;
  font-size: var(--schrift-grund);
}

input[type="text"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="password"],
select,
textarea {
  padding: var(--abstand-2) var(--abstand-3);
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--schrift);
  min-width: 0;
  /* Ein select mit langem Optionstext bemisst sich sonst am
     laengsten Wort und schiebt die Seite selbst in die Breite -
     max-width haelt es im Feld, die Auswahlliste zeigt den Text
     trotzdem vollstaendig. */
  max-width: 100%;
}

input:hover, select:hover, textarea:hover {
  border-color: var(--schrift-leise);
}

textarea {
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
}

.filterleiste,
.formular-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--abstand-4);
  margin: 0 0 var(--abstand-5);
}

.feld-klein {
  min-width: 9rem;
  margin: 0;
}

.feld-knopf {
  display: flex;
  gap: var(--abstand-2);
  margin: 0;
}

.inline-formular {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2);
  flex-wrap: wrap;
  margin: 0 0 var(--abstand-2);
  max-width: 100%;
}

/* Ein select bemisst sich sonst an seiner laengsten Option und
   min-width: 0 allein reicht dagegen nicht - flex-basis: 0 nimmt ihm
   die Eigengroesse als Ausgangswert, es waechst nur noch so weit wie
   im Zeilenrest Platz ist. */
.inline-formular select {
  flex: 1 1 0%;
  min-width: 0;
}

.brieftext-formular {
  display: block;
  margin: 0 0 var(--abstand-3);
}

/* Knoepfe: vier Stufen, jede Vorlage haelt sich daran (grep nach
   class="knopf).
     .knopf-primaer         gefuellt,      Hauptaktion, immer Gruen
     .knopf                 umrandet,      Nebenaktion, neutral
     .verweis-knopf         nur Text,      Verweis, Blau
     .knopf-warnung /
     .verweis-knopf-warnung umrandet/Text, zerstoerend, Rot, nirgends sonst */
.knopf,
.verweis-knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-1);
  border-radius: var(--radius);
  font-weight: var(--gewicht-fett);
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  transition:
    background-color var(--dauer-mikro) var(--ease-bewegung),
    color var(--dauer-mikro) var(--ease-bewegung),
    border-color var(--dauer-mikro) var(--ease-bewegung),
    transform var(--dauer-mikro) var(--ease-bewegung);
}

.knopf:active,
.knopf-primaer:active,
.verweis-knopf:active,
.breiten-knopf:active {
  transform: scale(0.98);
}

.knopf {
  padding: var(--abstand-2) var(--abstand-4);
  background: var(--flaeche);
  border-color: var(--rand-stark);
  color: var(--schrift);
}

.knopf:hover {
  border-color: var(--akzent);
  color: var(--akzent-dunkel);
}

/* Hauptaktion, gefuellt: Bestaetigen, Speichern, Anlegen. Immer Gruen,
   voll mit hellem Text, Kontrast ueber 4,5:1. */
.knopf-primaer {
  background: var(--erfolg);
  border-color: var(--erfolg);
  color: var(--flaeche-erhoben);
  transition:
    background-color var(--dauer-mikro) var(--ease-bewegung),
    color var(--dauer-mikro) var(--ease-bewegung),
    border-color var(--dauer-mikro) var(--ease-bewegung),
    transform var(--dauer-mikro) var(--ease-bewegung);
}

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

.knopf:disabled,
.knopf-primaer:disabled {
  background: var(--grund);
  border-color: var(--rand);
  color: var(--schrift-leise);
  cursor: not-allowed;
}

/* Speichern/Anlegen/Bestaetigen als Nebenaktion (umrandet statt
   gefuellt): dieselbe Gruen-Rolle wie .knopf-primaer, nur als helle
   Flaeche mit dunkler Schrift statt voll - die andere in AN-348
   erlaubte Kontrastvariante. */
.knopf-gruen {
  background: var(--erfolg-hell);
  border-color: var(--erfolg-rand);
  color: var(--erfolg-dunkel);
}

.knopf-gruen:hover {
  background: var(--erfolg-hell);
}

/* Gleicher Spezifitaetstrick wie bei .knopf.knopf-warnung:hover unten. */
.knopf.knopf-gruen:hover {
  background: var(--erfolg-hell);
  border-color: var(--erfolg);
  color: var(--erfolg-dunkel);
}

.knopf-warnung {
  background: var(--flaeche);
  border-color: var(--gefahr-rand);
  color: var(--gefahr);
}

.knopf-warnung:hover {
  background: var(--gefahr-hell);
}

/* .knopf:hover hat dieselbe Spezifitaet (0-2-0) wie .knopf-warnung:hover und
   ueberschreibt sonst per Quellreihenfolge Rand- und Schriftfarbe mit dem
   Akzentton - der Warnknopf verliert beim Ueberfahren die Warnfarbe. Diese
   Regel mit zwei Klassen (0-3-0) gewinnt zuverlaessig gegen beide. */
.knopf.knopf-warnung:hover {
  background: var(--gefahr-hell);
  border-color: var(--gefahr-dunkel);
  color: var(--gefahr-dunkel);
}

.verweis-knopf {
  background: none;
  border: none;
  padding: 0.15rem 0.1rem;
  color: var(--akzent-dunkel);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  font-weight: var(--gewicht-normal);
}

.verweis-knopf:hover {
  color: var(--akzent);
}

.verweis-knopf:disabled {
  color: var(--schrift-leise);
  cursor: not-allowed;
  text-decoration: none;
}

.verweis-knopf-gruen {
  color: var(--erfolg-dunkel);
}

.verweis-knopf-gruen:hover {
  color: var(--erfolg);
}

.verweis-knopf-warnung {
  color: var(--gefahr);
}

.verweis-knopf-warnung:hover {
  color: var(--gefahr-dunkel);
}

/* Einstellungstabellen */
.einstellungstabelle td {
  vertical-align: top;
}

.einstellungszeile-pflicht {
  background: var(--hinweis-hell);
}

.einstellungszeile-pflicht td {
  border-bottom-color: var(--hinweis-rand);
}

/* Listen */
.stichwortliste {
  margin: 0;
  padding-left: var(--abstand-4);
}

.stichwortliste li {
  margin-bottom: var(--abstand-2);
}

.beschreibungsliste {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--abstand-2) var(--abstand-5);
  margin: 0 0 var(--abstand-4);
}

.beschreibungsliste dt {
  color: var(--schrift-gedaempft);
  font-weight: var(--gewicht-fett);
}

.beschreibungsliste dd {
  margin: 0;
}

.schrittliste {
  padding-left: var(--abstand-5);
  max-width: 68ch;
}

.schrittliste li {
  margin-bottom: var(--abstand-3);
  line-height: 1.6;
}

/* Freigaben: Vorschau und Bearbeitung nebeneinander */
.freigabe-gruppe {
  padding-bottom: var(--abstand-6);
  border-bottom: 1px solid var(--rand);
}

.freigabe-paar {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--abstand-5);
  align-items: start;
  margin: var(--abstand-4) 0;
}

.vorschau-block {
  position: sticky;
  top: 1rem;
}

.vorschau-werkzeuge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-3);
  margin-bottom: var(--abstand-2);
  flex-wrap: wrap;
}

.vorschau-beschriftung {
  font-size: var(--schrift-klein);
  color: var(--schrift-gedaempft);
  font-weight: var(--gewicht-fett);
}

.breiten-umschalter {
  display: inline-flex;
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius);
  overflow: hidden;
}

.breiten-knopf {
  border: none;
  background: var(--flaeche);
  color: var(--schrift-gedaempft);
  padding: var(--abstand-1) var(--abstand-3);
  font-size: var(--schrift-klein);
  font-weight: var(--gewicht-fett);
  cursor: pointer;
  border-left: 1px solid var(--rand);
  transition:
    background-color var(--dauer-mikro) var(--ease-bewegung),
    color var(--dauer-mikro) var(--ease-bewegung),
    border-color var(--dauer-mikro) var(--ease-bewegung),
    transform var(--dauer-mikro) var(--ease-bewegung);
}

.breiten-knopf:first-child {
  border-left: none;
}

.breiten-knopf:hover {
  background: var(--grund);
  color: var(--schrift);
}

.breiten-knopf-aktiv {
  background: var(--akzent-hell);
  color: var(--akzent-dunkel);
}

.vorschau-rahmen {
  padding: var(--abstand-3);
  overflow-x: auto;
}

/* Freigaben: die Vorschau steckt schon im Kasten .freigaben-vorgang -
   hier traegt .vorschau-rahmen deshalb keine eigene Klasse .kasten mehr
   (kontor/vorlagen/freigaben.html) und bekommt statt Flaeche und Rand
   nur eine Haarlinie oben, damit nicht Kasten in Kasten steht. Auf
   anderen Seiten (z. B. Bausteine) bleibt .vorschau-rahmen ein eigener
   Kasten mit der Grundregel oben. */
.vorschau-block .vorschau-rahmen {
  padding: var(--abstand-3) 0 0;
  border-top: 1px solid var(--rand);
}

.vorschau-iframe {
  display: block;
  width: 1280px;
  max-width: 100%;
  height: 620px;
  border: 1px solid var(--rand);
  border-radius: 3px;
  margin: 0 auto;
  background: var(--grund);
}

.vorschau-rahmen-klein {
  padding: 0;
  max-height: 220px;
  overflow: auto;
}

.freigabe-bearbeitung h3 {
  margin-top: 0;
}

.freigabe-brief {
  margin-top: var(--abstand-6);
  padding-top: var(--abstand-5);
  border-top: 1px solid var(--rand);
}

/* Anmeldung */
.anmelde-seite {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--grund);
}

.anmelde-rahmen {
  width: min(24rem, 90vw);
  border-radius: 10px;
  box-shadow: var(--schatten);
  padding: var(--abstand-6) var(--abstand-6);
}

.anmelde-rahmen h1 {
  margin-bottom: var(--abstand-1);
}

.anmelde-untertitel {
  color: var(--schrift-gedaempft);
  margin-bottom: var(--abstand-5);
}

.anmelde-formular .knopf-primaer {
  width: 100%;
  justify-content: center;
  margin-top: var(--abstand-1);
}

/* Bausteine */
.baustein-block {
  margin-bottom: var(--abstand-6);
  padding-bottom: var(--abstand-6);
  border-bottom: 1px solid var(--rand);
}

.baustein-block:last-child {
  border-bottom: none;
}

.varianten-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--abstand-5);
  margin-top: var(--abstand-3);
}

/* .variante-block deckt sich vollstaendig mit .kasten und traegt im
   Markup nur noch dessen Klasse (kontor/vorlagen/bausteine.html). */

/* Pipelines: Spalten als Brett, keine Kachelwueste */
.pipeline-kopf {
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  margin-bottom: var(--abstand-4);
  flex-wrap: wrap;
}

.pipeline-brett {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: var(--abstand-4);
  overflow-x: auto;
  padding-bottom: var(--abstand-2);
}

.pipeline-spalte {
  background: var(--flaeche-erhoben);
  min-width: 0;
  transition:
    background-color var(--dauer-hinweis) var(--ease-bewegung),
    border-color var(--dauer-hinweis) var(--ease-bewegung);
}

.pipeline-spalte.ziel-hervorgehoben {
  border-color: var(--akzent);
  background: var(--akzent-hell);
}

.pipeline-stufe-formular {
  margin-bottom: var(--abstand-3);
}

.pipeline-stufe-formular input {
  width: 100%;
}

.pipeline-karten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 2.5rem;
}

/* Kunden in der Stufe als Zeilen mit Trennlinie statt eigener Kaesten -
   die Spalte selbst (.pipeline-spalte, .kasten) traegt schon Flaeche und
   Rand, ein zweiter Kasten je Karte wirkte nur schablonenhaft. */
.pipeline-karte {
  padding: var(--abstand-2) var(--abstand-1);
  border-top: 1px solid var(--rand);
  cursor: grab;
  transition:
    background-color var(--dauer-hinweis) var(--ease-bewegung),
    opacity var(--dauer-hinweis) var(--ease-bewegung);
}

.pipeline-karte:first-child {
  border-top: none;
}

.pipeline-karte:hover {
  background: var(--flaeche);
}

.pipeline-karte:active {
  cursor: grabbing;
}

.pipeline-karte.wird-gezogen {
  opacity: 0.5;
}

.pipeline-karte a {
  display: block;
  font-weight: var(--gewicht-fett);
  margin-bottom: 0.15rem;
}

.pipeline-karte .karte-verschieben-formular {
  margin-top: var(--abstand-2);
}

.pipeline-karten li.leerer-hinweis {
  border-top: none;
  padding: var(--abstand-2) 0;
  font-size: var(--schrift-klein);
}

/* Responsiv: schmale Bildschirme */
@media (max-width: 720px) {
  .kopf-zeile {
    padding: var(--abstand-3) var(--abstand-4);
  }

  .marke {
    order: 1;
  }

  .kopf-werkzeuge {
    order: 2;
  }

  /* Der Schalter oeffnet und schliesst die Navigation, die als
     eigene, volle Zeile darunter aufklappt statt die Kopfzeile in
     die Breite zu treiben. */
  .menu-schalter {
    display: inline-flex;
    order: 3;
  }

  .haupt-navigation {
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
  }

  .haupt-navigation[hidden] {
    display: none;
  }

  .haupt-navigation a {
    min-height: 44px;
    padding: var(--abstand-3);
  }

  .hilfe-knopf {
    width: 44px;
    height: 44px;
  }

  .inhalt {
    padding: var(--abstand-5) var(--abstand-4) calc(var(--abstand-6) + var(--abstand-4));
  }

  .freigabe-paar {
    /* minmax(0, 1fr) statt 1fr: eine Rasterspalte darf ohne die
       0-Untergrenze nicht schmaler werden als ihr breitester Inhalt
       (hier die eingebettete Tabelle) und schiebt sonst die Seite
       selbst in die Breite. */
    grid-template-columns: minmax(0, 1fr);
  }

  .vorschau-block {
    position: static;
  }

  .beschreibungsliste {
    grid-template-columns: 1fr;
  }

  .filterleiste,
  .formular-zeile {
    flex-direction: column;
    align-items: stretch;
  }

  /* Bedienelemente auf dem Handy mindestens 44 px hoch treffen koennen
     (Textknoepfe, Aufklapper-Summaries, Eingabefelder, Sprungleiste) -
     Innenabstand traegt die Groesse, nicht die Schriftgroesse. */
  .knopf,
  .verweis-knopf,
  summary,
  input[type="text"],
  input[type="search"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  input[type="password"],
  select,
  .es-sprungleiste a {
    min-height: 44px;
  }

  .knopf,
  .verweis-knopf,
  summary,
  .es-sprungleiste a {
    display: inline-flex;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ==================================================================
   Kundenakte (/betriebe/{id})

   Rollenfarben in OKLCH, je drei Stufen (Flaeche, Linie, Voll). Sie
   liegen NEBEN den bestehenden Token oben, ersetzen sie nicht. Sie
   gelten ab der Kundenakte und werden spaeter auf ganz Kontor
   uebertragen, siehe AN-348.

   Bedeutung der Rollen, verbindlich:
     Gruen  Eingabe und Bestaetigung (Sendefeld, Senden, Uebernehmen)
     Blau   Optionen, Auswahl, Verweise (Filter, Pipeline, gewaehlter
            Eintrag)
     Gelb   Hinweise, Notizen, Wartestaende, nie auf einem Handlungsknopf
     Rot    Abbrechen, Schliessen, Verwerfen, nirgends sonst
     Lila   Automationen, alles was Kontor selbst tut
     Grau   Vergangenes, Metadaten, Handlungen ohne eigenen Ton

   Farbe steht nie allein: zu jedem Punkt gehoert ein Wort, jede Marke
   im Strom traegt ihren Stand zusaetzlich als Text.
   ================================================================== */

:root {
  /* Warme Grautoene der Akte, Hue 85 */
  --ak-grau-1: oklch(23% 0.008 85);
  --ak-grau-2: oklch(43% 0.008 85);
  --ak-grau-3: oklch(54% 0.009 85);
  --ak-grau-4: oklch(72% 0.006 85);
  --ak-grau-5: oklch(87% 0.005 85);
  --ak-grau-6: oklch(95.5% 0.004 85);
  --ak-grund: oklch(98.2% 0.004 85);
  --ak-karte: oklch(99.6% 0.002 85);
  --ak-auf-farbe: oklch(98.6% 0.008 85);

  --ak-gruen-flaeche: oklch(96.8% 0.028 150);
  --ak-gruen-linie: oklch(78% 0.10 150);
  --ak-gruen-voll: oklch(47% 0.125 150);

  --ak-blau-flaeche: oklch(96.8% 0.022 250);
  --ak-blau-linie: oklch(79% 0.085 250);
  --ak-blau-voll: oklch(48% 0.145 250);

  --ak-gelb-flaeche: oklch(96.8% 0.045 85);
  --ak-gelb-linie: oklch(80% 0.11 85);
  --ak-gelb-voll: oklch(48% 0.09 85);

  --ak-rot-flaeche: oklch(96.8% 0.022 27);
  --ak-rot-linie: oklch(79% 0.09 27);
  --ak-rot-voll: oklch(49% 0.16 27);

  --ak-lila-flaeche: oklch(96.8% 0.024 305);
  --ak-lila-linie: oklch(79% 0.07 305);
  --ak-lila-voll: oklch(46% 0.15 305);

  /* Vierte Stufe je Rolle: der Punkt. Hell und satt wie die Ampel
     eines macOS-Fensters (Rot #FF5F57, Gelb #FEBC2E, Gruen #28C840),
     Blau und Lila in derselben Helligkeit dazu. Die Stufe gilt nur
     fuer die Punktknoepfe und die daraus wachsende Pille. Weil die
     Toene hell sind, traegt die Pille dunkle Schrift; alle Werte
     liegen dabei ueber 4,5 zu 1 gegen --ak-grau-1. Text, Linien und
     Flaechen bleiben bei den dunklen Stufen oben. */
  --ak-rot-punkt:   oklch(68.5% 0.196 25);
  --ak-gelb-punkt:  oklch(82% 0.158 82);
  --ak-gruen-punkt: oklch(72% 0.196 145);
  --ak-blau-punkt:  oklch(70% 0.155 250);
  --ak-lila-punkt:  oklch(70% 0.168 305);
  --ak-grau-punkt:  oklch(70% 0.008 85);
  /* Schrift auf einem Punktton: immer dunkel, nie hell */
  --ak-auf-punkt:   oklch(23% 0.008 85);

  --ak-r-gross: 14px;
  --ak-r: 12px;
  --ak-r-klein: 9px;

  --ak-a1: 4px;  --ak-a2: 8px;  --ak-a3: 12px; --ak-a4: 16px;
  --ak-a5: 24px; --ak-a6: 32px; --ak-a7: 40px;

  /* Ein einziges Bewegungssystem fuer die ganze Akte: drei Dauern,
     zwei Kurven, ein Versatz. Keine Stelle setzt eigene Zahlen.

     --ak-t-kurz    Deckkraft, Hoverzustaende, kurze Einblendungen
     --ak-t-mittel  Aufbau von Ueberlagerungen (Pille, Leiste, Block)
     --ak-t-lang    Weg der Blaetter von der Seite herein
     --ak-auf       das eine Ueberschwing-Token, ausschliesslich fuer
                    den einmaligen Aufbau einer Ueberlagerung
     --ak-ab        der ruhige Rueckweg, nie mit Ueberschwingen
     --ak-versatz   Choreografie: Grund zuerst, Inhalt danach */
  --ak-auf: cubic-bezier(0.34, 1.42, 0.64, 1);
  --ak-ab: cubic-bezier(0.4, 0, 0.2, 1);
  --ak-t-kurz: 100ms;
  --ak-t-mittel: 260ms;
  --ak-t-lang: 320ms;
  --ak-versatz: 70ms;

  --ak-kopf-hoch: 88px;
  --ak-kopf-schmal: 52px;
  --ak-leiste-eng: 32px;
  --ak-fuss-eng: 34px;
  --ak-flanke-breit: 42px;
  --ak-flanke-knopf: 34px;
  --ak-blatt-breit: 344px;
  --ak-mono: "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

/* Ein Satz Tonvariablen je Rolle, damit ein Baustein nur data-ton
   traegt und nicht jede Farbe einzeln kennt. */
.akte [data-ton="gruen"] { --ton-flaeche: var(--ak-gruen-flaeche); --ton-linie: var(--ak-gruen-linie); --ton-voll: var(--ak-gruen-voll); --ton-punkt: var(--ak-gruen-punkt); --ton-schild: var(--ak-auf-punkt); }
.akte [data-ton="blau"]  { --ton-flaeche: var(--ak-blau-flaeche);  --ton-linie: var(--ak-blau-linie);  --ton-voll: var(--ak-blau-voll);  --ton-punkt: var(--ak-blau-punkt);  --ton-schild: var(--ak-auf-punkt); }
.akte [data-ton="gelb"]  { --ton-flaeche: var(--ak-gelb-flaeche);  --ton-linie: var(--ak-gelb-linie);  --ton-voll: var(--ak-gelb-voll);  --ton-punkt: var(--ak-gelb-punkt);  --ton-schild: var(--ak-auf-punkt); }
.akte [data-ton="rot"]   { --ton-flaeche: var(--ak-rot-flaeche);   --ton-linie: var(--ak-rot-linie);   --ton-voll: var(--ak-rot-voll);   --ton-punkt: var(--ak-rot-punkt);   --ton-schild: var(--ak-auf-punkt); }
.akte [data-ton="lila"]  { --ton-flaeche: var(--ak-lila-flaeche);  --ton-linie: var(--ak-lila-linie);  --ton-voll: var(--ak-lila-voll);  --ton-punkt: var(--ak-lila-punkt);  --ton-schild: var(--ak-auf-punkt); }
.akte [data-ton="grau"]  { --ton-flaeche: var(--ak-grau-6);        --ton-linie: var(--ak-grau-4);      --ton-voll: var(--ak-grau-2);     --ton-punkt: var(--ak-grau-punkt);  --ton-schild: var(--ak-auf-punkt); }

/* Die Akte fuellt die Seite breiter aus als die uebrigen Bildschirme
   und bringt ihren eigenen Grund mit. */
.inhalt-akte {
  max-width: 1400px;
  padding: 0 var(--ak-a5) calc(var(--ak-fuss-eng) + var(--ak-a6));
}
body:has(.akte) { background: var(--ak-grund); }
.akte {
  color: var(--ak-grau-1);
  font-size: 14px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.akte .zahl { font-variant-numeric: tabular-nums; }
.ak-nur-vorleser {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------- Punktknoepfe, nach Apple-Vorbild -----------------
   Zwei Schichten: der Tropfen traegt die Flaeche und waechst per
   clip-path (keine Breitenanimation, kein scaleX, damit die runden
   Enden rund bleiben), das Schild mit dem Wort liegt darueber in
   eigener Schicht und wird nur eingeblendet, nie beschnitten oder
   skaliert. Nachbarn und Titel weichen um --schub aus, die wache
   Pille verdeckt nie Text. */

.ak-punkte {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.ak-block-kopf, .ak-liste-kopf, .ak-blatt-kopf { --schub: 0px; }
.ak-punkte.ist-aktiv .ak-punkt.ist-wach ~ .ak-punkt { transform: translateX(var(--schub)); }
.ak-punkte.ist-aktiv .ak-tropfen.ist-wach ~ .ak-tropfen { transform: translateX(var(--schub)); }
.ak-punkte ~ .ak-block-titel,
.ak-punkte ~ .ak-block-titel-huelle,
.ak-punkte ~ .ak-liste-titel,
.ak-punkte ~ .ak-unterkopf {
  display: flex;
  align-items: center;
  gap: var(--ak-a3);
  margin: var(--ak-a5) 0 var(--ak-a3);
  padding: var(--ak-a2) var(--ak-a3);
  border-radius: var(--ak-r-klein);
  background: var(--ton-flaeche);
  color: var(--ton-voll);
  font-size: 13px;
  font-weight: 600;
}
.ak-unterkopf h3 { margin: 0; font: inherit; flex: 1 1 auto; }

.ak-vorschlag-fahne {
  transition: transform var(--ak-t-mittel) var(--ak-ab);
}
.ak-punkte.ist-aktiv ~ .ak-block-titel,
.ak-punkte.ist-aktiv ~ .ak-block-titel-huelle,
.ak-punkte.ist-aktiv ~ .ak-liste-titel,
.ak-punkte.ist-aktiv ~ .ak-unterkopf {
  display: flex;
  align-items: center;
  gap: var(--ak-a3);
  margin: var(--ak-a5) 0 var(--ak-a3);
  padding: var(--ak-a2) var(--ak-a3);
  border-radius: var(--ak-r-klein);
  background: var(--ton-flaeche);
  color: var(--ton-voll);
  font-size: 13px;
  font-weight: 600;
}
.ak-unterkopf h3 { margin: 0; font: inherit; flex: 1 1 auto; }

.ak-vorschlag-fahne {
  transform: translateX(var(--schub));
}
/* Fanggebiet: waechst mit der offenen Pille, damit der Zeiger auf dem
   Weg zum Wort nicht aus der Gruppe faellt. */
.ak-punkte.ist-aktiv::after {
  content: "";
  position: absolute;
  top: -10px; bottom: -10px; left: -10px;
  width: calc(var(--fang, 60px) + 20px);
  z-index: 0;
}

.ak-punkte-tropfen {
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 0;
  pointer-events: none;
  z-index: 0;
}
.ak-tropfen {
  position: absolute;
  top: 50%;
  left: calc(var(--i) * 22px);
  width: var(--breite, 14px);
  height: 26px;
  margin-top: -13px;
  border-radius: 999px;
  background: var(--ton-punkt, var(--ton-voll));
  transform-origin: 7px 50%;
  clip-path: inset(6px calc(100% - 14px) 6px 0 round 999px);
  transition: clip-path 220ms var(--ak-ab) 40ms, transform var(--ak-t-mittel) var(--ak-ab);
}
.ak-tropfen.ist-wach {
  z-index: 2;
  clip-path: inset(0 0 0 0 round 999px);
  transition: clip-path var(--ak-t-mittel) var(--ak-auf);
  animation: ak-tropfen-schwung var(--ak-t-mittel) var(--ak-ab);
}
@keyframes ak-tropfen-schwung {
  0%   { transform: scale(1, 1); }
  38%  { transform: scale(1.04, 0.90); }
  70%  { transform: scale(0.995, 1.03); }
  100% { transform: scale(1, 1); }
}

.ak-punkt {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 14px; height: 14px;
  padding: 0; border: 0;
  border-radius: 999px;
  background: var(--ton-punkt, var(--ton-voll));
  cursor: pointer;
  transition: transform var(--ak-t-mittel) var(--ak-ab);
}
.ak-punkte.ist-bereit .ak-punkt { background: none; }
.ak-punkt::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 999px;
}
.ak-punkt.ist-wach { z-index: 4; }
.ak-punkt:focus-visible { outline: none; }
.ak-punkt:focus-visible::before {
  outline: 2px solid var(--ak-grau-2);
  outline-offset: 2px;
  right: auto;
  width: calc(var(--breite, 14px) + 14px);
}

.ak-punkt-schild {
  position: absolute;
  top: 50%; left: 0;
  height: 26px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px 0 9px;
  white-space: nowrap;
  pointer-events: none;
  color: var(--ton-schild, var(--ak-auf-farbe));
  line-height: 1;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  opacity: 0;
  transform: translateY(-50%) translateX(-5px);
  transition: opacity var(--ak-t-kurz) linear, transform var(--ak-t-mittel) var(--ak-ab);
}
.ak-punkt.ist-wach .ak-punkt-schild {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
  transition: opacity var(--ak-t-kurz) linear var(--ak-versatz), transform var(--ak-t-mittel) var(--ak-auf);
}
.ak-punkt-schild svg { flex: 0 0 auto; }

/* ------------------------- Aktenkopf ------------------------------
   Klebt oben, ist immer 88 px hoch und wird beim Rollen per clip-path
   auf 52 px beschnitten, statt seine Hoehe zu animieren. Darum springt
   der Strom darunter nicht. */

.ak-kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--ak-kopf-hoch);
  margin: 0 calc(var(--ak-a5) * -1);
  background: var(--ak-karte);
  display: flex;
  align-items: center;
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--ak-t-mittel) var(--ak-ab);
}
.ak-kopf::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--ak-grau-5);
  transition: transform var(--ak-t-mittel) var(--ak-ab);
}
.ak-kopf-innen {
  width: 100%;
  padding: 0 var(--ak-a5);
  display: flex;
  align-items: center;
  gap: var(--ak-a4);
  transition: transform var(--ak-t-mittel) var(--ak-ab);
}
.ak-monogramm {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--ak-r);
  background: var(--ak-grau-6);
  color: var(--ak-grau-2);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  transition: transform var(--ak-t-mittel) var(--ak-ab);
}
.ak-kopf-text { min-width: 0; flex: 1 1 auto; }
.ak-firma {
  margin: 0;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.14;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform-origin: left center;
  transition: transform var(--ak-t-mittel) var(--ak-ab);
}
.ak-kopf-zeile2 {
  display: flex;
  align-items: center;
  gap: var(--ak-a3);
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ak-grau-3);
  transition: opacity var(--ak-t-kurz) var(--ak-ab),
              transform var(--ak-t-mittel) var(--ak-ab);
}
.ak-kopf-zeile2 .ak-trenner { width: 1px; height: 11px; background: var(--ak-grau-5); }

.ak-marke-status, .ak-kopf .ak-waehler { transition: transform var(--ak-t-mittel) var(--ak-ab); }
.ak-kopf.ist-kompakt { clip-path: inset(0 0 calc(var(--ak-kopf-hoch) - var(--ak-kopf-schmal)) 0); }
.ak-kopf.ist-kompakt::after { transform: translateY(calc(var(--ak-kopf-schmal) - var(--ak-kopf-hoch))); }
.ak-kopf.ist-kompakt .ak-kopf-innen { transform: translateY(-10px); }
.ak-kopf.ist-kompakt .ak-monogramm { transform: translateY(-8px) scale(0.72); }
.ak-kopf.ist-kompakt .ak-firma { transform: translateY(2px) scale(0.78); }
.ak-kopf.ist-kompakt .ak-marke-status,
.ak-kopf.ist-kompakt .ak-waehler { transform: translateY(-8px); }
.ak-kopf.ist-kompakt .ak-kopf-zeile2 { opacity: 0; transform: translateY(-6px); pointer-events: none; }

.ak-marke-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  background: var(--ton-flaeche, var(--ak-grau-6));
  color: var(--ton-voll, var(--ak-grau-2));
  font-size: 12.5px;
  font-weight: 500;
}
.ak-marke-status .ak-kugel { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ------------------- Waehler (Pipeline), Ton Blau ------------------ */

.ak-waehler { position: relative; flex: 0 0 auto; }
.ak-waehler-knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--ak-a2);
  padding: 7px 12px;
  background: var(--ak-blau-flaeche);
  border: 1px solid var(--ak-blau-linie);
  border-radius: var(--ak-r-klein);
  cursor: pointer;
  font-size: 13px;
  color: var(--ak-blau-voll);
}
.ak-waehler-knopf { transition: background-color var(--ak-t-kurz) var(--ak-ab); }
.ak-waehler-knopf:hover { background: var(--ak-karte); }
.ak-waehler-knopf .ak-etikett { color: var(--ak-grau-3); }
.ak-waehler-knopf .ak-wert { font-weight: 600; }

.ak-liste {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 268px;
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--ak-a2) var(--ak-a1) var(--ak-a1);
  background: var(--ak-karte);
  border: 1px solid var(--ak-grau-5);
  border-radius: var(--ak-r);
  box-shadow: 0 10px 28px oklch(24% 0.01 85 / 0.12);
  z-index: 60;
  transform: translateY(-6px) scale(0.985);
  transform-origin: 100% 0;
  opacity: 0;
  transition: opacity var(--ak-t-kurz) var(--ak-ab),
              transform var(--ak-t-mittel) var(--ak-ab);
}
.ak-liste[hidden] { display: none; }
.ak-liste.ist-sichtbar { opacity: 1; transform: translateY(0) scale(1); transition-timing-function: var(--ak-auf); }
.ak-liste-kopf {
  display: flex;
  align-items: center;
  gap: var(--ak-a3);
  padding: var(--ak-a1) var(--ak-a2) var(--ak-a3);
}
.ak-liste-titel { margin: 0; font-size: 12px; color: var(--ak-grau-3); }
.ak-liste-gruppe { margin: var(--ak-a2) 0 var(--ak-a1); padding: 0 var(--ak-a2); font-size: 11px; font-weight: 600; color: var(--ak-grau-3); }
.ak-liste-eintrag {
  display: flex;
  align-items: center;
  gap: var(--ak-a2);
  width: 100%;
  padding: 8px var(--ak-a2);
  border: 0;
  border-radius: var(--ak-r-klein);
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--ak-grau-1);
}
.ak-liste-eintrag { transition: background-color var(--ak-t-kurz) var(--ak-ab); }
.ak-liste-eintrag:hover { background: var(--ak-blau-flaeche); }
.ak-liste-eintrag .ak-haken { flex: 0 0 auto; width: 16px; color: var(--ak-blau-voll); opacity: 0; }
.ak-liste-eintrag[aria-checked="true"] { color: var(--ak-blau-voll); font-weight: 600; background: var(--ak-blau-flaeche); }
.ak-liste-eintrag[aria-checked="true"] .ak-haken { opacity: 1; }
.ak-liste-fuss {
  display: flex;
  justify-content: flex-end;
  gap: var(--ak-a2);
  padding: var(--ak-a2) var(--ak-a2) var(--ak-a1);
  margin-top: var(--ak-a1);
  border-top: 1px solid var(--ak-grau-6);
}

/* ------------- Knoepfe mit Wort: der Ton sagt, was er tut ---------- */

.ak-knopf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--ton-linie);
  border-radius: var(--ak-r-klein);
  background: var(--ton-flaeche);
  color: var(--ton-voll);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
.ak-knopf { transition: background-color var(--ak-t-kurz) var(--ak-ab), border-color var(--ak-t-kurz) var(--ak-ab); }
.ak-knopf:hover { background: var(--ak-karte); }
.akte .ak-knopf[data-ton="grau"] { background: var(--ak-karte); border-color: var(--ak-grau-5); color: var(--ak-grau-2); }
.akte .ak-knopf[data-ton="grau"]:hover { background: var(--ak-grau-6); }
.ak-knopf.ist-verweis {
  background: none; border-color: transparent; color: var(--ak-blau-voll);
  padding-left: 6px; padding-right: 6px;
  text-decoration: underline; text-underline-offset: 3px;
}
.ak-knopf.ist-verweis:hover { background: var(--ak-blau-flaeche); }
.ak-knopf.ist-satt { background: var(--ton-voll); border-color: var(--ton-voll); color: var(--ak-auf-farbe); }
.ak-knopf.ist-satt:hover { filter: brightness(1.14); }
.ak-knopf svg { flex: 0 0 auto; }

/* ---------------------------- Geruest ----------------------------- */

/* Links die schmale Flanke mit drei Kuerzeln, rechts daneben der Strom
   in voller Breite. Was die Flanke aufklappt, legt sich als Blatt
   darueber, es schiebt den Strom nie zur Seite. */
.ak-buehne {
  padding: var(--ak-a4) 0 0;
  display: grid;
  grid-template-columns: var(--ak-flanke-breit) minmax(0, 1fr);
  gap: var(--ak-a5) var(--ak-a5);
  align-items: start;
}
.ak-buehne > .ak-flanke { grid-column: 1; grid-row: 1; }
.ak-buehne > .ak-strom-spalte { grid-column: 2; grid-row: 1; min-width: 0; }
.ak-buehne > .ak-legende { grid-column: 2; grid-row: 2; }

/* ----------------------- Leisten, minimiert -----------------------
   Der Schacht behaelt im Fluss immer die schmale Hoehe. Was waechst,
   ist nur der absolut gesetzte Grund und die Inhaltsschicht darueber,
   also springt nichts darunter. */

.ak-schacht {
  position: relative;
  pointer-events: none;
  height: var(--eng);
}
.ak-leiste-grund {
  position: absolute;
  left: 0; right: 0;
  height: var(--voll, 200px);
  background: var(--ak-karte);
  border: 1px solid var(--ak-grau-5);
  border-radius: var(--ak-r);
  transition: clip-path var(--ak-t-mittel) var(--ak-ab) 40ms;
}
.ak-schacht.ist-offen .ak-leiste-grund { transition: clip-path var(--ak-t-mittel) var(--ak-auf); }

.ak-leiste-eng, .ak-leiste-weit { position: absolute; left: 0; right: 0; }
.ak-leiste-eng {
  height: var(--eng);
  display: flex;
  align-items: center;
  gap: var(--ak-a3);
  padding: 0 var(--ak-a4);
  overflow: hidden;
  pointer-events: auto;
  opacity: 1;
  transition: opacity var(--ak-t-kurz) linear var(--ak-versatz);
}
.ak-schacht.ist-offen .ak-leiste-eng { opacity: 0; pointer-events: none; transition: opacity var(--ak-t-kurz) linear; }
.ak-leiste-weit {
  padding: var(--ak-a3) var(--ak-a4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ak-t-kurz) linear;
}
.ak-schacht.ist-offen .ak-leiste-weit { opacity: 1; pointer-events: auto; transition: opacity var(--ak-t-kurz) linear var(--ak-versatz); }

.ak-eng-marke { font-size: 12px; color: var(--ak-grau-3); flex: 0 0 auto; }
.ak-eng-punkte { display: flex; align-items: center; gap: var(--ak-a3); min-width: 0; flex: 1 1 auto; overflow: hidden; }
.ak-eng-paar { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ak-grau-3); white-space: nowrap; }
.ak-eng-paar .ak-anzahl { color: var(--ak-grau-2); }
/* Kugel je Art: Form und Farbe gemeinsam, das Wort steht immer daneben */
.ak-kugel-art { width: 9px; height: 9px; border-radius: 50%; background: var(--ak-grau-2); flex: 0 0 auto; }
.akte [data-form="ring"] .ak-kugel-art { background: none; border: 2px solid var(--ak-grau-2); }
.akte [data-form="gestrichelt"] .ak-kugel-art { background: none; border: 2px dashed var(--ak-grau-3); }
.akte [data-ton="lila"] .ak-kugel-art { background: var(--ak-lila-voll); }
.akte [data-ton="blau"] .ak-kugel-art { background: var(--ak-blau-voll); }
/* Die kleine Kugel steht auf hellem Grund, sie nimmt darum nicht den
   hellen Punktton, sondern eine mittlere Stufe. */
.akte [data-ton="gelb"] .ak-kugel-art { background: oklch(64% 0.13 85); }
.ak-eng-aktiv {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px 3px 8px;
  border-radius: 999px;
  background: var(--ak-blau-voll);
  color: var(--ak-auf-farbe);
  font-size: 12px;
  font-weight: 600;
}
.ak-eng-aktiv .ak-kugel { width: 8px; height: 8px; border-radius: 50%; background: var(--ak-auf-farbe); }
.ak-eng-wink { margin-left: auto; font-size: 11.5px; color: var(--ak-grau-3); flex: 0 0 auto; }

/* Obere Leiste: Filter, Ton Blau, weil Auswahl */
.ak-filterschacht {
  position: sticky;
  top: calc(var(--ak-kopf-schmal) + var(--ak-a2));
  z-index: 26;
  --eng: var(--ak-leiste-eng);
  margin-bottom: var(--ak-a4);
}
/* deckt den Spalt zwischen Aktenkopf und Leiste ab */
.ak-filterschacht::before {
  content: "";
  position: absolute;
  left: -4px; right: -4px; top: -14px;
  height: 16px;
  background: var(--ak-grund);
  z-index: -1;
}
.ak-filterschacht .ak-leiste-grund {
  top: 0;
  transform-origin: 50% 0;
  clip-path: inset(0 0 calc(100% - var(--eng)) 0 round var(--ak-r));
}
.ak-filterschacht.ist-offen .ak-leiste-grund { clip-path: inset(0 round var(--ak-r)); }
.ak-filterschacht .ak-leiste-eng, .ak-filterschacht .ak-leiste-weit { top: 0; }
.ak-filterschacht .ak-leiste-weit { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ak-a2); }

.ak-filter {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--ak-grau-5);
  border-radius: 999px;
  background: var(--ak-karte);
  color: var(--ak-grau-2);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.ak-filter { transition: background-color var(--ak-t-kurz) var(--ak-ab), color var(--ak-t-kurz) var(--ak-ab), border-color var(--ak-t-kurz) var(--ak-ab); }
.ak-filter:hover { background: var(--ak-blau-flaeche); color: var(--ak-blau-voll); }
.akte .ak-filter[aria-pressed="true"] {
  background: var(--ak-blau-voll);
  border-color: var(--ak-blau-voll);
  color: var(--ak-auf-farbe);
  font-weight: 600;
}
.akte .ak-filter[aria-pressed="true"] .ak-kugel-art { background: var(--ak-auf-farbe); border-color: var(--ak-auf-farbe); }
.ak-filter .ak-anzahl { font-size: 11.5px; opacity: 0.82; }

/* -------------- Untere Leiste: die gruene TicTac-Pille -------------
   Im Ruhezustand eine gefuellte, stark gerundete Pille im hellen
   Gruenton der Punkte, mit einem Wort in dunkler Schrift und dem
   Kanal daneben. Beim Ueberfahren oder Fokussieren ploppt sie zur
   vollen Eingabeleiste auf: der Grund wird per clip-path mit rundem
   Eckterm aufgedeckt (nichts wird skaliert, die runden Enden bleiben
   rund), der Inhalt kommt allein per Deckkraft und gestaffelt
   hinterher. Der Schacht behaelt dabei seine schmale Hoehe, es
   verschiebt sich also nichts im Strom.

   Kontor kann von hier aus nichts versenden. Der Knopf heisst darum
   "Notiz ablegen" und nicht "Senden": was hier entsteht, ist ein
   Protokolleintrag der Art Notiz. */

.ak-fuss {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 30;
  pointer-events: none;
}
.ak-fuss-innen {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--ak-a5) var(--ak-a4);
  display: grid;
  grid-template-columns: var(--ak-flanke-breit) minmax(0, 1fr);
  gap: var(--ak-a5);
  align-items: end;
}
.ak-sendeschacht {
  grid-column: 2;
  --eng: var(--ak-fuss-eng);
  align-self: end;
  justify-self: center;
  width: 100%;
  max-width: 760px;
}
/* Ruhezustand: die Pille ist nur so breit wie ihr Wort, nicht so
   breit wie die spaetere Leiste. --pille wird gemessen, nie geraten. */
.ak-sendeschacht .ak-leiste-grund {
  bottom: 0;
  left: 50%;
  right: auto;
  width: 100%;
  transform: translateX(-50%);
  /* Flach und schlicht: nur die Form eines Dragees, gefuellt in
     Gruen. Kein Schatten, kein Glanz, kein Verlauf. */
  background: var(--ak-gruen-punkt);
  border: 0;
  border-radius: var(--ak-r);
  clip-path: inset(calc(100% - var(--eng))
                   calc(50% - var(--pille, 220px) / 2)
                   0
                   calc(50% - var(--pille, 220px) / 2)
                   round 999px);
  transition: clip-path var(--ak-t-mittel) var(--ak-ab),
              background-color var(--ak-t-mittel) var(--ak-ab);
}
.ak-sendeschacht.ist-offen .ak-leiste-grund {
  background: var(--ak-karte);
  box-shadow: 0 -6px 24px oklch(24% 0.01 85 / 0.09);
  clip-path: inset(0 0 0 0 round var(--ak-r));
  transition: clip-path var(--ak-t-mittel) var(--ak-auf),
              background-color var(--ak-t-mittel) var(--ak-ab);
}
/* Ein Strich in --ak-grau-5 nur im offenen Zustand, als eigene
   Schicht, damit der Rand nicht mit dem Grund mitwaechst. */
.ak-sendeschacht .ak-leiste-grund::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--ak-grau-5);
  border-radius: var(--ak-r);
  opacity: 0;
  transition: opacity var(--ak-t-kurz) linear;
}
.ak-sendeschacht.ist-offen .ak-leiste-grund::after { opacity: 1; transition: opacity var(--ak-t-kurz) linear var(--ak-versatz); }

.ak-sendeschacht .ak-leiste-eng,
.ak-sendeschacht .ak-leiste-weit { bottom: 0; }
.ak-sendeschacht .ak-leiste-eng {
  cursor: pointer;
  justify-content: center;
  gap: var(--ak-a2);
  padding: 0 var(--ak-a5);
}
.ak-eng-wort {
  color: var(--ak-auf-punkt);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.008em;
  flex: 0 0 auto;
}
.ak-eng-platz {
  color: var(--ak-auf-punkt);
  font-size: 13px;
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ak-eng-platz.ist-entwurf { font-weight: 600; }
/* Der Kanal steht gedaempft neben dem Wort, aber dunkel genug: auf dem
   hellen Gruen bringt es 4,6 zu 1, ein Grau haette hier nur 2,7. */
.ak-eng-kanal {
  font-size: 11.5px;
  color: oklch(28% 0.012 150);
  flex: 0 0 auto;
}

.ak-kanalzeile {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--ak-a2) var(--ak-a3);
  margin-bottom: var(--ak-a2);
  font-size: 12.5px; color: var(--ak-grau-3);
}
.ak-sendefeld {
  display: flex; align-items: flex-end; gap: var(--ak-a2);
  border: 1.5px solid var(--ak-grau-5);
  border-radius: var(--ak-r-klein);
  background: var(--ak-karte);
  padding: var(--ak-a2);
  margin: 0;
  transition: border-color var(--ak-t-kurz) var(--ak-ab), box-shadow var(--ak-t-kurz) var(--ak-ab);
}
.ak-sendefeld:focus-within {
  border-color: var(--ak-gruen-voll);
  box-shadow: 0 0 0 3px var(--ak-gruen-flaeche);
}
.ak-sendefeld textarea {
  flex: 1 1 auto;
  min-height: 40px; max-height: 132px;
  padding: 8px var(--ak-a2);
  border: 0; background: none; resize: none; outline: none;
  font: inherit;
  font-size: 14px; line-height: 1.45;
  color: var(--ak-grau-1);
}
.ak-sendefeld textarea::placeholder { color: var(--ak-grau-3); }
.ak-rundknopf {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--ak-gruen-voll);
  border-radius: var(--ak-r-klein);
  background: var(--ak-gruen-voll);
  color: var(--ak-auf-farbe);
  cursor: pointer;
  transition: filter var(--ak-t-kurz) var(--ak-ab);
}
.ak-rundknopf:hover { filter: brightness(1.14); }
.ak-sende-fuss {
  display: flex; align-items: center; gap: var(--ak-a3);
  margin: var(--ak-a2) 0 0;
  font-size: 11.5px; color: var(--ak-grau-3);
}

/* --------------------------- Zeitstrahl --------------------------- */

.ak-strom { list-style: none; margin: 0; padding: 0; position: relative; }
.ak-strom::before {
  content: "";
  position: absolute;
  left: 95px; top: 8px; bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--ak-grau-5);
}
.ak-eintrag {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 0 var(--ak-a6);
  padding: var(--ak-a4) var(--ak-a3) var(--ak-a4) 0;
  border-radius: var(--ak-r);
  border-bottom: 1px solid var(--ak-grau-6);
}
.ak-eintrag.ist-verborgen { display: none; }
.ak-eintrag .ak-schiene { position: relative; padding-right: var(--ak-a4); text-align: right; }

.ak-datum {
  display: block;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ak-grau-2);
  letter-spacing: -0.02em;
}
.ak-datum .ak-jahr { display: block; color: var(--ak-grau-3); font-size: 11px; }
.ak-uhrzeit { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ak-grau-3); }

/* Marken am Strang: Form und Farbe zusammen, nie Farbe allein */
.ak-marke { position: absolute; right: -8px; top: 4px; width: 12px; height: 12px; }
.ak-marke::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--ak-grau-4);
  background: var(--ak-grund);
  box-shadow: 0 0 0 3px var(--ak-grund);
}
.akte .ak-eintrag[data-stand="erledigt"] .ak-marke::after { border-color: var(--ak-grau-4); background: var(--ak-grau-4); }
.akte .ak-eintrag[data-art="automation"] .ak-marke::after { border-color: var(--ak-lila-voll); background: var(--ak-lila-flaeche); }
.akte .ak-eintrag[data-stand="erledigt"][data-art="automation"] .ak-marke::after { background: var(--ak-lila-voll); }
.akte .ak-eintrag[data-stand="wartet"] .ak-marke::after { border-color: var(--ak-gelb-voll); background: var(--ak-gelb-flaeche); }
.akte .ak-eintrag[data-stand="kommend"] .ak-marke::after { border-style: dashed; border-color: var(--ak-grau-4); background: var(--ak-grund); }
/* Frisch abgelegt: ein paar Sekunden gruen als Bestaetigung, dann grau */
.akte .ak-eintrag.ist-frisch .ak-marke::after { border-color: var(--ak-gruen-voll); background: var(--ak-gruen-voll); }
.akte .ak-eintrag.ist-frisch .ak-stand { color: var(--ak-gruen-voll); }
.akte .ak-eintrag.ist-frisch .ak-stand .ak-kugel { background: var(--ak-gruen-voll); }

.ak-korpus { min-width: 0; }
.ak-zeile {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ak-a2);
  font-size: 12.5px;
  color: var(--ak-grau-3);
}
.ak-zeile .ak-art { color: var(--ak-grau-2); }
.ak-zeile .ak-person { color: var(--ak-grau-2); font-weight: 500; }
.ak-zeile .ak-strich { width: 3px; height: 3px; border-radius: 50%; background: var(--ak-grau-4); }

/* Stand: Farbe immer zusammen mit dem Wort. Nur Wartestaende
   bekommen eine Flaeche, weil sie heraussticken sollen. */
.ak-stand {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ton-voll);
  font-size: 12px;
  font-weight: 500;
}
.ak-stand .ak-kugel { width: 7px; height: 7px; border-radius: 50%; background: var(--ton-voll); }
.akte .ak-stand[data-ton="gelb"] {
  padding: 2px 10px 2px 8px;
  border-radius: 999px;
  background: var(--ak-gelb-flaeche);
  font-weight: 600;
}
.akte .ak-stand[data-ton="lila"] { font-weight: 600; }
.akte .ak-stand[data-ton="grau"] { color: var(--ak-grau-3); font-weight: 500; }
.akte .ak-stand[data-ton="grau"] .ak-kugel { background: var(--ak-grau-4); }

.ak-aufklapp {
  display: block; width: 100%;
  padding: 0; border: 0; background: none;
  text-align: left; cursor: pointer;
  border-radius: var(--ak-r-klein);
  color: inherit; text-decoration: none;
  font: inherit;
}
.ak-aufklapp:hover .ak-betreff { color: var(--ak-blau-voll); }
.ak-betreff {
  display: block;
  margin: 5px 0 0;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.014em;
  color: var(--ak-grau-1);
}
.ak-vorschau {
  display: block;
  margin-top: 3px;
  max-width: 64ch;
  color: var(--ak-grau-2);
  font-size: 13.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ak-beiwerk { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ak-a2); margin-top: var(--ak-a3); }
.ak-anhang {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 7px;
  border: 1px solid var(--ak-grau-5);
  border-radius: var(--ak-r-klein);
  background: var(--ak-grau-6);
  font-size: 11.5px;
  color: var(--ak-grau-2);
  font-family: var(--ak-mono);
}

/* Gewaehlter Eintrag: Blau, weil Auswahl */
.akte .ak-eintrag.ist-gewaehlt { background: var(--ak-blau-flaeche); }
.akte .ak-eintrag.ist-gewaehlt .ak-marke::after { box-shadow: 0 0 0 3px var(--ak-blau-flaeche); }
.akte .ak-eintrag.ist-gewaehlt .ak-betreff { color: var(--ak-blau-voll); }

/* Marke Heute, Ton Gruen: hier landet, was wir jetzt eingeben */
.ak-heute {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 0 var(--ak-a6);
  align-items: center;
  padding: var(--ak-a5) var(--ak-a3) var(--ak-a5) 0;
  border: 0;
}
.ak-heute .ak-schiene { text-align: right; padding-right: var(--ak-a4); }
.ak-heute .ak-label { font-size: 12px; color: var(--ak-gruen-voll); font-weight: 500; }
.ak-heute .ak-balken { position: relative; height: 2px; border-radius: 2px; background: var(--ak-gruen-linie); }
.ak-heute .ak-balken::before {
  content: "";
  position: absolute;
  left: -34px; top: -5px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--ak-gruen-voll);
  box-shadow: 0 0 0 4px var(--ak-grund);
}
.ak-heute .ak-balken span {
  position: absolute; left: 0; top: -11px;
  padding-right: var(--ak-a3);
  background: var(--ak-grund);
  color: var(--ak-gruen-voll);
  font-size: 13px;
  font-weight: 600;
}
.akte .ak-eintrag[data-stand="kommend"] .ak-datum { color: var(--ak-grau-3); }
.akte .ak-eintrag[data-stand="kommend"] .ak-betreff { color: var(--ak-grau-2); }
.akte .ak-eintrag[data-stand="kommend"] .ak-vorschau { color: var(--ak-grau-3); }

.ak-strom-hinweis {
  margin: 0;
  padding: var(--ak-a5) 0 var(--ak-a5) 132px;
  color: var(--ak-gelb-voll);
  font-size: 13.5px;
}
.ak-strom-hinweis[hidden] { display: none; }

/* ---------------------- Linke Flanke und Blaetter ------------------
   Eine schmale Leiste am linken Rand mit drei Kuerzeln. Jedes waechst
   beim Ueberfahren zur beschrifteten Pille (dieselbe Mechanik wie die
   Punktknoepfe: Grund per clip-path aufdecken, Wort in eigener
   Schicht nur einblenden) und klappt beim Klicken sein Blatt von
   links ueber den Strom auf. Immer nur eines offen, Escape schliesst
   und gibt den Fokus an das Kuerzel zurueck. */

.ak-flanke {
  position: sticky;
  top: calc(var(--ak-kopf-schmal) + var(--ak-a5));
  z-index: 29;
  display: flex;
  flex-direction: column;
  gap: var(--ak-a3);
}
.ak-flanke-knopf {
  position: relative;
  display: block;
  width: var(--ak-flanke-knopf);
  height: var(--ak-flanke-knopf);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
}
.ak-flanke-grund {
  position: absolute;
  top: 0; left: 0;
  height: var(--ak-flanke-knopf);
  width: var(--breite, 34px);
  border-radius: 999px;
  background: var(--ton-punkt);
  clip-path: inset(0 calc(var(--breite, 34px) - var(--ak-flanke-knopf)) 0 0 round 999px);
  transition: clip-path var(--ak-t-mittel) var(--ak-ab);
}
.ak-flanke-knopf.ist-wach .ak-flanke-grund,
.ak-flanke-knopf[aria-expanded="true"] .ak-flanke-grund {
  clip-path: inset(0 round 999px);
  transition: clip-path var(--ak-t-mittel) var(--ak-auf);
}
.ak-flanke-knopf.ist-wach { z-index: 4; }
.ak-flanke-schild {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: max-content;
  display: flex;
  align-items: center;
  height: var(--ak-flanke-knopf);
  color: var(--ton-schild);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  pointer-events: none;
}
.ak-flanke-kuerzel {
  flex: 0 0 auto;
  width: var(--ak-flanke-knopf);
  display: grid;
  place-items: center;
  font-size: 12px;
  letter-spacing: 0.01em;
}
.ak-flanke-wort {
  opacity: 0;
  padding-right: 15px;
  transition: opacity var(--ak-t-kurz) linear;
}
.ak-flanke-knopf.ist-wach .ak-flanke-wort,
.ak-flanke-knopf[aria-expanded="true"] .ak-flanke-wort {
  opacity: 1;
  transition: opacity var(--ak-t-kurz) linear var(--ak-versatz);
}
.ak-flanke-knopf:focus-visible { outline: none; }
.ak-flanke-knopf:focus-visible .ak-flanke-grund { outline: 2px solid var(--ak-grau-2); outline-offset: 3px; }

/* Das Blatt aus der Flanke: gespiegeltes Seitenblatt, nichtmodal,
   ueberlagert den Strom und verschiebt nichts. */
.ak-flanken-huelle {
  position: fixed;
  inset: 0;
  z-index: 44;
  pointer-events: none;
}
.ak-flanken-huelle[hidden] { display: none; }
.ak-flanken-schirm {
  position: absolute; inset: 0;
  background: oklch(30% 0.012 85 / 0.34);
  opacity: 0;
  pointer-events: auto;
  transition: opacity var(--ak-t-mittel) var(--ak-ab);
}
.ak-flanken-huelle.ist-sichtbar .ak-flanken-schirm { opacity: 1; }
.ak-flanken-spalte {
  position: relative;
  width: 100%;
  max-width: 1400px;
  height: 100%;
  margin: 0 auto;
}
.ak-flankenblatt[hidden] { display: none; }
.ak-flankenblatt {
  position: absolute;
  top: calc(var(--ak-oben, var(--ak-kopf-hoch)) + var(--ak-a3));
  bottom: calc(var(--ak-fuss-eng) + var(--ak-a5));
  left: calc(var(--ak-a5) + var(--ak-flanke-breit) + var(--ak-a3));
  width: var(--ak-blatt-breit);
  display: flex;
  flex-direction: column;
  background: var(--ak-karte);
  border: 1px solid var(--ak-grau-5);
  border-radius: var(--ak-r-gross);
  box-shadow: 14px 0 40px oklch(24% 0.01 85 / 0.10);
  pointer-events: auto;
  opacity: 0;
  transform: translateX(calc(-100% - var(--ak-a7)));
  transition: transform var(--ak-t-lang) var(--ak-ab), opacity var(--ak-t-kurz) linear;
}
.ak-flanken-huelle.ist-sichtbar .ak-flankenblatt {
  opacity: 1;
  transform: translateX(0);
  transition: transform var(--ak-t-lang) var(--ak-auf), opacity var(--ak-t-kurz) linear;
}
.ak-flankenblatt-leib {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ak-grau-5) transparent;
  padding: 0;
  /* Der Inhalt kommt gestaffelt hinter dem Grund, nicht zugleich */
  opacity: 0;
  transition: opacity var(--ak-t-kurz) linear;
}
.ak-flanken-huelle.ist-sichtbar .ak-flankenblatt-leib {
  opacity: 1;
  transition: opacity var(--ak-t-kurz) linear var(--ak-versatz);
}
.ak-flankenblatt .ak-block { border: 0; border-radius: var(--ak-r-gross); }
.ak-flankenblatt h2:focus-visible { outline: none; }

.ak-block {
  border: 1px solid var(--ak-grau-5);
  border-radius: var(--ak-r-gross);
  background: var(--ak-karte);
  overflow: hidden;
  flex: 0 0 auto;
}
.ak-block[hidden] { display: none; }
.ak-block-kopf {
  display: flex;
  align-items: center;
  gap: var(--ak-a3);
  width: 100%;
  padding: var(--ak-a3) var(--ak-a4);
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--ton-flaeche);
  background: var(--ton-flaeche);
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--ton-voll);
}
.ak-block-titel {
  margin: 0;
  min-width: 0; flex: 1 1 auto;
  font: inherit;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ak-block-titel-huelle { margin: 0; min-width: 0; flex: 1 1 auto; display: flex; font: inherit; }
.ak-block-titel-knopf {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: var(--ak-a3);
  min-height: 24px;
  padding: 0; border: 0; background: none;
  font: inherit; color: inherit;
  text-align: left;
  cursor: pointer;
}
.ak-block-titel-knopf .ak-block-titel { flex: 0 1 auto; }
.ak-block-kopf .ak-pfeil {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--ton-voll);
  transition: transform var(--ak-t-mittel) var(--ak-ab);
}
.ak-block-kopf [aria-expanded="true"] .ak-pfeil { transform: rotate(180deg); }
.ak-block-leib {
  padding: var(--ak-a4);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--ak-t-kurz) var(--ak-ab), transform var(--ak-t-mittel) var(--ak-ab);
}
.ak-block-leib[hidden] { display: none; }
.ak-block-leib.ist-sichtbar { opacity: 1; transform: translateY(0); }

.ak-feldliste {
  margin: 0;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: var(--ak-a2) var(--ak-a3);
  font-size: 13px;
}
.ak-feldliste dt { color: var(--ak-grau-3); }
.ak-feldliste dd { margin: 0; color: var(--ak-grau-1); overflow-wrap: anywhere; }
.ak-feldliste a { color: var(--ak-blau-voll); text-decoration: none; }
.ak-feldliste a:hover { text-decoration: underline; }

/* Anstehend: die naechsten Schritte, als Verweise in den Strom */
.ak-anstehend { list-style: none; margin: 0; padding: 0; }
.ak-anstehend li + li { border-top: 1px solid var(--ak-grau-6); }
.ak-anstehend a {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 2px var(--ak-a3);
  padding: var(--ak-a2) 0;
  color: inherit;
  text-decoration: none;
  border-radius: var(--ak-r-klein);
}
.ak-anstehend a:hover .ak-anstehend-betreff { color: var(--ak-blau-voll); text-decoration: underline; text-underline-offset: 3px; }
.ak-anstehend-datum { font-size: 12.5px; font-weight: 500; color: var(--ak-grau-2); }
.ak-anstehend-stand { font-size: 12px; font-weight: 600; color: var(--ton-voll); display: inline-flex; align-items: center; gap: 5px; }
.ak-anstehend-stand .ak-kugel-art { width: 8px; height: 8px; }
.ak-anstehend-betreff { grid-column: 2; font-size: 13px; color: var(--ak-grau-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-anstehend-leer { margin: 0; color: var(--ak-grau-3); font-size: 13px; }

/* Notizfeld: Gelb, weil Hinweis */
.ak-notiz {
  margin: var(--ak-a4) 0 0;
  padding: var(--ak-a3);
  border-radius: var(--ak-r-klein);
  background: var(--ak-gelb-flaeche);
  color: var(--ak-grau-1);
  font-size: 13px;
  line-height: 1.55;
}
.ak-notiz b { color: var(--ak-gelb-voll); font-weight: 600; }
.ak-akten-fuss {
  margin: var(--ak-a3) 0 0;
  padding-top: var(--ak-a3);
  border-top: 1px solid var(--ak-grau-6);
  font-size: 11.5px;
  color: var(--ak-grau-3);
  display: flex; gap: var(--ak-a2); flex-wrap: wrap;
}
.ak-projekt-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ak-a3); font-size: 13px; }
.ak-projekt-zeile + .ak-projekt-zeile { margin-top: var(--ak-a2); }
.ak-projekt-zeile .ak-schluessel { color: var(--ak-grau-3); flex: 0 0 auto; }
.ak-griffreihe { display: flex; flex-wrap: wrap; gap: var(--ak-a2); margin-top: var(--ak-a4); }
.ak-hinweistext { margin: 0; font-size: 12.5px; color: var(--ak-grau-3); line-height: 1.6; }
.ak-hinweistext + .ak-hinweistext { margin-top: var(--ak-a2); }
.ak-unterkopf {
  display: flex;
  align-items: center;
  gap: var(--ak-a3);
  margin: var(--ak-a5) 0 var(--ak-a3);
  padding: var(--ak-a2) var(--ak-a3);
  border-radius: var(--ak-r-klein);
  background: var(--ton-flaeche);
  color: var(--ton-voll);
  font-size: 13px;
  font-weight: 600;
}
.ak-unterkopf h3 { margin: 0; font: inherit; flex: 1 1 auto; }

.ak-vorschlag-fahne {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ak-lila-flaeche);
  color: var(--ak-lila-voll);
  font-size: 11px;
  font-weight: 600;
  flex: 0 0 auto;
}
/* Der Riegel steht ganz am Ende, entschaerft, mit Rueckfrage */
.ak-riegel { margin-top: var(--ak-a2); }
.ak-riegel summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--ak-grau-3);
  padding: var(--ak-a2) 0;
}
.ak-riegel summary:hover { color: var(--ak-rot-voll); }
.ak-riegel-leib { padding-top: var(--ak-a2); }
.ak-riegel-leib .ak-feld {
  width: 100%;
  padding: 7px var(--ak-a2);
  border: 1px solid var(--ak-grau-5);
  border-radius: var(--ak-r-klein);
  background: var(--ak-karte);
  font: inherit;
  font-size: 13px;
  margin-bottom: var(--ak-a2);
}
.ak-riegel-leib .ak-feld:focus { outline: 2px solid var(--ak-rot-voll); outline-offset: 1px; }
.ak-riegel-marke {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px 4px 9px;
  border-radius: 999px;
  background: var(--ak-rot-flaeche);
  color: var(--ak-rot-voll);
  font-size: 12px; font-weight: 600;
}
.ak-riegel-marke .ak-kugel { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ------------------ Seitenblatt (Vollansicht) ---------------------
   Nichtmodales Seitenblatt: der Strom dahinter bleibt lesbar und
   bedienbar, Tab kann es verlassen, Escape schliesst und gibt den
   Fokus an den Eintrag zurueck, aus dem es geoeffnet wurde. */

.ak-blatt-huelle {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
}
.ak-blatt-huelle[hidden] { display: none; }
.ak-blatt-schirm {
  position: absolute; inset: 0;
  background: oklch(30% 0.012 85 / 0.34);
  opacity: 0;
  pointer-events: auto;
  transition: opacity var(--ak-t-mittel) var(--ak-ab);
}
.ak-blatt-huelle.ist-sichtbar .ak-blatt-schirm { opacity: 1; }
.ak-blatt-spalte {
  position: relative;
  width: 100%;
  max-width: 1400px;
  height: 100%;
  margin: 0 auto;
}
.ak-blatt {
  position: absolute;
  top: calc(var(--ak-oben, var(--ak-kopf-hoch)) + var(--ak-a3));
  bottom: calc(var(--ak-fuss-eng) + var(--ak-a5));
  right: var(--ak-a5);
  width: 392px;
  display: flex;
  flex-direction: column;
  background: var(--ak-karte);
  border: 1px solid var(--ak-grau-5);
  border-radius: var(--ak-r-gross);
  box-shadow: -14px 0 40px oklch(24% 0.01 85 / 0.10);
  pointer-events: auto;
  opacity: 0;
  transform: translateX(calc(100% + var(--ak-a6)));
  transition: transform var(--ak-t-lang) var(--ak-ab), opacity 140ms linear;
}
.ak-blatt-huelle.ist-sichtbar .ak-blatt {
  opacity: 1;
  transform: translateX(0);
  transition: transform var(--ak-t-lang) var(--ak-auf), opacity 160ms linear;
}
.ak-blatt h2:focus-visible { outline: none; }
.ak-blatt-kopf {
  display: flex;
  align-items: center;
  gap: var(--ak-a4);
  padding: var(--ak-a3) var(--ak-a4);
  border-bottom: 1px solid var(--ak-grau-6);
  background: var(--ak-karte);
  border-radius: var(--ak-r-gross) var(--ak-r-gross) 0 0;
}
.ak-blatt-kopf .ak-art-marke { margin-left: auto; font-size: 11.5px; color: var(--ak-grau-3); }
.ak-blatt-leib {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--ak-a5) var(--ak-a5) var(--ak-a4);
}
.ak-blatt-leib h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ak-grau-1);
}
.ak-blatt-meta {
  margin: var(--ak-a4) 0 0;
  padding: var(--ak-a3) 0;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 6px var(--ak-a3);
  border-top: 1px solid var(--ak-grau-6);
  border-bottom: 1px solid var(--ak-grau-6);
  font-size: 12.5px;
}
.ak-blatt-meta dt { color: var(--ak-grau-3); }
.ak-blatt-meta dd { margin: 0; color: var(--ak-grau-1); overflow-wrap: anywhere; }
.ak-blatt-text { margin: var(--ak-a5) 0 0; color: var(--ak-grau-1); line-height: 1.65; max-width: 46ch; }
.ak-blatt-text p { margin: 0 0 var(--ak-a3); }
.ak-blatt-text p:last-child { margin-bottom: 0; }
.ak-blatt-fuss {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ak-a2);
  padding: var(--ak-a3) var(--ak-a5) var(--ak-a4);
  background: var(--ak-karte);
  border-radius: 0 0 var(--ak-r-gross) var(--ak-r-gross);
}
.ak-blatt-fuss form { margin: 0; }

/* ----------------------------- Legende ---------------------------- */

.ak-legende {
  border: 1px solid var(--ak-grau-5);
  border-radius: var(--ak-r-gross);
  background: var(--ak-karte);
  overflow: hidden;
}
.ak-legende-kopf {
  display: flex;
  align-items: center;
  gap: var(--ak-a3);
  width: 100%;
  padding: var(--ak-a3) var(--ak-a4);
  border: 0;
  background: var(--ak-grau-6);
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--ak-grau-2);
  cursor: pointer;
}
.ak-legende-kopf .ak-pfeil { margin-left: auto; color: var(--ak-grau-3); transition: transform var(--ak-t-mittel) var(--ak-ab); }
.ak-legende-kopf[aria-expanded="true"] .ak-pfeil { transform: rotate(180deg); }
.ak-legende-leib {
  padding: var(--ak-a4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: var(--ak-a3) var(--ak-a5);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--ak-t-kurz) var(--ak-ab), transform var(--ak-t-mittel) var(--ak-ab);
}
.ak-legende-leib[hidden] { display: none; }
.ak-legende-leib.ist-sichtbar { opacity: 1; transform: translateY(0); }
.ak-legende-zeile { display: flex; align-items: flex-start; gap: var(--ak-a3); font-size: 12.5px; }
.ak-legende-probe { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.ak-legende-probe i { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--ton-voll); }
.ak-legende-probe b { display: block; width: 12px; height: 12px; border-radius: 3px; background: var(--ton-flaeche); border: 1px solid var(--ton-linie); }
.ak-legende-zeile .ak-wort { color: var(--ton-voll); font-weight: 600; }
.ak-legende-zeile p { margin: 0; color: var(--ak-grau-2); }
.ak-legende-breit { grid-column: 1 / -1; }

/* ---------------------------- Umbrueche ---------------------------- */

@media (max-width: 1199px) {
  .ak-flankenblatt { width: min(var(--ak-blatt-breit), calc(100vw - var(--ak-flanke-breit) - var(--ak-a7))); }
}

@media (max-width: 1023px) {
  .ak-blatt-schirm, .ak-flanken-schirm { display: block; }
  .ak-blatt { width: min(400px, calc(100% - var(--ak-a7))); }
}
@media (min-width: 1024px) {
  .ak-blatt-schirm, .ak-flanken-schirm { display: none; }
}

@media (max-width: 719px) {
  /* Auf dem Telefon wird der Kopf beim Rollen nicht beschnitten */
  .akte { --ak-kopf-hoch: 84px; --ak-kopf-schmal: 84px; }
  .inhalt-akte { padding-left: var(--ak-a4); padding-right: var(--ak-a4); }
  .ak-kopf { margin: 0 calc(var(--ak-a4) * -1); }
  .ak-kopf-innen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 6px var(--ak-a3);
    padding: 0 var(--ak-a4);
  }
  .ak-kopf.ist-kompakt .ak-kopf-innen,
  .ak-kopf.ist-kompakt .ak-monogramm,
  .ak-kopf.ist-kompakt .ak-firma,
  .ak-kopf.ist-kompakt .ak-marke-status,
  .ak-kopf.ist-kompakt .ak-waehler { transform: none; }
  .ak-kopf.ist-kompakt .ak-kopf-zeile2 { opacity: 1; transform: none; pointer-events: auto; }
  .ak-monogramm { display: none; }
  .ak-kopf-text { grid-column: 1; grid-row: 1; }
  .ak-marke-status { grid-column: 2; grid-row: 1; padding: 4px 10px 4px 8px; font-size: 11.5px; }
  .ak-kopf .ak-waehler { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .ak-kopf .ak-waehler-knopf { padding: 3px 9px; font-size: 12px; }
  .ak-kopf .ak-liste { right: auto; left: 0; transform-origin: 0 0; }
  .ak-firma { font-size: 18px; }
  .ak-kopf-zeile2 { display: none; }
  .ak-eng-kanal { display: none; }

  /* Die Flanke wird zur Reihe ueber dem Strom, die drei Pillen stehen
     dauerhaft offen mit ihrem Wort: auf Beruehrung gibt es kein
     Ueberfahren, also darf das Kuerzel nicht das einzige Zeichen sein. */
  .ak-buehne { grid-template-columns: minmax(0, 1fr); gap: var(--ak-a4); }
  .ak-buehne > .ak-flanke,
  .ak-buehne > .ak-strom-spalte,
  .ak-buehne > .ak-legende { grid-column: 1; grid-row: auto; }
  .ak-flanke { position: static; flex-direction: row; flex-wrap: wrap; gap: var(--ak-a2); }
  .ak-flanke-knopf { width: auto; height: 44px; }
  .ak-flanke-grund { position: absolute; inset: 0; width: 100%; clip-path: inset(0 round 999px); height: 44px; }
  .ak-flanke-schild { height: 44px; }
  .ak-flanke-kuerzel { display: none; }
  .ak-flanke-wort { opacity: 1; padding: 0 var(--ak-a4); }
  .ak-flanken-huelle { z-index: 46; }
  .ak-flankenblatt { top: 0; bottom: 0; left: 0; width: 100%; border-radius: 0; }
  .ak-fuss-innen { grid-template-columns: minmax(0, 1fr); padding: 0 var(--ak-a4) var(--ak-a3); }
  .ak-sendeschacht { grid-column: 1; }

  .ak-strom::before { left: 5px; }
  .ak-eintrag, .ak-heute { grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: var(--ak-a5); }
  .ak-eintrag .ak-schiene, .ak-heute .ak-schiene { text-align: left; padding-right: 0; margin-bottom: var(--ak-a1); }
  .ak-datum { display: inline; }
  .ak-datum .ak-jahr { display: inline; margin-left: 4px; }
  .ak-uhrzeit { display: inline; margin-left: var(--ak-a2); }
  .ak-marke { right: auto; left: -25px; top: 4px; }
  .ak-heute .ak-balken::before { left: -25px; }
  .ak-heute .ak-balken span { position: static; display: block; padding: 0 0 var(--ak-a1); }
  .ak-heute .ak-balken { margin-top: var(--ak-a3); }
  .ak-strom-hinweis { padding-left: var(--ak-a5); }
  .ak-blatt { top: 0; bottom: 0; right: 0; width: 100%; border-radius: 0; }
  .ak-blatt-leib { padding: var(--ak-a4); }
  .ak-blatt-fuss { padding: var(--ak-a3) var(--ak-a4); }
  .ak-legende-leib { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 479px) {
  /* Ganz schmal stehen die drei Pillen der Flanke untereinander und
     nehmen die volle Breite ein, damit jede Trefferflaeche gross
     genug bleibt. */
  .ak-flanke { flex-direction: column; }
  .ak-flanke-knopf { width: 100%; }
  .ak-flanke-wort { display: block; text-align: left; }
  .ak-eng-punkte { gap: var(--ak-a2); }
}

/* Beruehrung ohne Ueberfahren: Punkte bleiben Kreise (28 px sichtbar,
   44 px Trefferflaeche) mit ihrem Symbol, das Wort traegt der
   Vorlesername. Der Titel steht zuerst, die Punkte sitzen rechts. */
@media (hover: none) {
  .ak-punkte { gap: var(--ak-a2); order: 2; margin-left: auto; --schub: 0px; }
  .ak-punkte-tropfen { display: none; }
  .ak-punkte.ist-aktiv::after { display: none; }
  .akte .ak-punkte.ist-bereit .ak-punkt,
  .akte .ak-punkt {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    background: var(--ton-punkt, var(--ton-voll));
    transform: none;
  }
  .ak-punkt::before { inset: -8px; outline: none; width: auto; right: -8px; }
  .ak-punkt:focus-visible { outline: 2px solid var(--ak-grau-2); outline-offset: 3px; }
  .akte .ak-punkt-schild {
    position: static; opacity: 1; transform: none;
    height: auto; padding: 0; gap: 0;
    pointer-events: none;
  }
  .ak-punkt-schild svg { width: 14px; height: 14px; }
  .ak-punkt-schild .ak-wort { display: none; }
  .akte .ak-punkte ~ .ak-block-titel,
  .akte .ak-punkte ~ .ak-block-titel-huelle,
  .akte .ak-punkte ~ .ak-liste-titel { order: 0; transform: none; }
  .akte .ak-punkte ~ .ak-unterkopf {
  display: flex;
  align-items: center;
  gap: var(--ak-a3);
  margin: var(--ak-a5) 0 var(--ak-a3);
  padding: var(--ak-a2) var(--ak-a3);
  border-radius: var(--ak-r-klein);
  background: var(--ton-flaeche);
  color: var(--ton-voll);
  font-size: 13px;
  font-weight: 600;
}
.ak-unterkopf h3 { margin: 0; font: inherit; flex: 1 1 auto; }

.ak-vorschlag-fahne { order: 1; transform: none; }
  .ak-block-kopf .ak-pfeil { order: 3; }
  .ak-blatt-kopf .ak-art-marke { margin-left: 0; order: 0; }
  /* Die Flanke oeffnet auf Beruehrung nur durch Tippen, die Pille
     steht dabei immer offen und traegt ihr Wort. Die Spalte wird
     dafuer breiter, sonst laeuft das Wort aus ihr heraus. */
  .akte { --ak-flanke-breit: 136px; }
  .akte .ak-flanke-knopf { width: 100%; height: 44px; }
  .akte .ak-flanke-grund { inset: 0; width: 100%; height: 44px; clip-path: inset(0 round 999px); }
  .akte .ak-flanke-schild { height: 44px; }
  .akte .ak-flanke-wort { opacity: 1; }
  /* Die Sendepille oeffnet auf Beruehrung nur durch Tippen */
  .akte .ak-sendeschacht .ak-leiste-eng { min-height: 44px; }
}

/* ------------- Weniger Bewegung, je Muster ein Endzustand ----------
   Kein Pauschalblock ueber alle Uebergaenge: jedes Muster bekommt
   seinen eigenen, vollstaendigen reduzierten Endzustand, damit der
   Fokusring und die kurzen Deckkraftwechsel unter 120 ms erhalten
   bleiben. Weg per clip-path, Weg per transform und jedes
   Ueberschwingen fallen weg, das Element steht sofort an seinem
   Endort. Die Klasse .ist-ruhig setzt kontor.js zusaetzlich, weil die
   Einstellung mitten in der Sitzung umgelegt werden kann und laufende
   WAAPI-Bewegungen dann abgebrochen werden muessen. */

.ist-ruhig.ak-punkte .ak-tropfen { transition: none; animation: none; }
.ist-ruhig.ak-punkte .ak-punkt { transition: none; }
.ist-ruhig.ak-punkte .ak-punkt-schild { transition: opacity var(--ak-t-kurz) linear; transform: translateY(-50%) translateX(0); }
.ist-ruhig.ak-punkte.ist-aktiv .ak-punkt.ist-wach ~ .ak-punkt,
.ist-ruhig.ak-punkte.ist-aktiv .ak-tropfen.ist-wach ~ .ak-tropfen { transform: none; }
.ist-ruhig.ak-flanke .ak-flanke-grund { transition: none; }
.ist-ruhig.ak-flanke .ak-flanke-wort { transition: opacity var(--ak-t-kurz) linear; }
.ist-ruhig.ak-schacht .ak-leiste-grund { transition: none; animation: none; }
.ist-ruhig.ak-schacht .ak-leiste-grund::after { transition: opacity var(--ak-t-kurz) linear; }
.ist-ruhig.ak-schacht .ak-leiste-eng,
.ist-ruhig.ak-schacht .ak-leiste-weit { transition: opacity var(--ak-t-kurz) linear; }
.ist-ruhig.ak-kopf,
.ist-ruhig.ak-kopf::after,
.ist-ruhig.ak-kopf .ak-kopf-innen,
.ist-ruhig.ak-kopf .ak-monogramm,
.ist-ruhig.ak-kopf .ak-firma,
.ist-ruhig.ak-kopf .ak-marke-status,
.ist-ruhig.ak-kopf .ak-waehler { transition: none; }
.ist-ruhig.ak-blatt-huelle .ak-blatt { transition: opacity var(--ak-t-kurz) linear; transform: translateX(0); }
.ist-ruhig.ak-blatt-huelle[hidden] .ak-blatt { transform: translateX(200%); }
.ist-ruhig.ak-blatt-huelle .ak-blatt-schirm { transition: opacity var(--ak-t-kurz) linear; }
.ist-ruhig.ak-flanken-huelle .ak-flankenblatt { transition: opacity var(--ak-t-kurz) linear; transform: translateX(0); }
.ist-ruhig.ak-flanken-huelle[hidden] .ak-flankenblatt { transform: translateX(-200%); }
.ist-ruhig.ak-flanken-huelle .ak-flankenblatt-leib { transition: opacity var(--ak-t-kurz) linear; }
.ist-ruhig.ak-flanken-huelle .ak-flanken-schirm { transition: opacity var(--ak-t-kurz) linear; }
.ist-ruhig.ak-liste { transition: opacity var(--ak-t-kurz) linear; transform: none; }
.ist-ruhig.ak-block-leib,
.ist-ruhig.ak-legende-leib { transition: opacity var(--ak-t-kurz) linear; transform: none; }
.ist-ruhig .ak-pfeil { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .ak-punkte .ak-tropfen { transition: none; animation: none; }
  .ak-punkte .ak-punkt { transition: none; }
  .ak-punkte .ak-punkt-schild { transition: opacity var(--ak-t-kurz) linear; transform: translateY(-50%) translateX(0); }
  .ak-punkte.ist-aktiv .ak-punkt.ist-wach ~ .ak-punkt,
  .ak-punkte.ist-aktiv .ak-tropfen.ist-wach ~ .ak-tropfen { transform: none; }
  .ak-punkte ~ .ak-block-titel,
  .ak-punkte ~ .ak-block-titel-huelle,
  .ak-punkte ~ .ak-liste-titel,
  .ak-punkte ~ .ak-unterkopf {
  display: flex;
  align-items: center;
  gap: var(--ak-a3);
  margin: var(--ak-a5) 0 var(--ak-a3);
  padding: var(--ak-a2) var(--ak-a3);
  border-radius: var(--ak-r-klein);
  background: var(--ton-flaeche);
  color: var(--ton-voll);
  font-size: 13px;
  font-weight: 600;
}
.ak-unterkopf h3 { margin: 0; font: inherit; flex: 1 1 auto; }

.ak-vorschlag-fahne { transition: none; transform: none; }
  .ak-flanke-grund { transition: none; }
  .ak-flanke-wort { transition: opacity var(--ak-t-kurz) linear; }
  .ak-schacht .ak-leiste-grund { transition: none; animation: none; }
  .ak-schacht .ak-leiste-grund::after { transition: opacity var(--ak-t-kurz) linear; }
  .ak-schacht .ak-leiste-eng, .ak-schacht .ak-leiste-weit { transition: opacity var(--ak-t-kurz) linear; }
  .ak-kopf, .ak-kopf::after, .ak-kopf .ak-kopf-innen, .ak-kopf .ak-monogramm,
  .ak-kopf .ak-firma, .ak-kopf .ak-marke-status, .ak-kopf .ak-waehler { transition: none; }
  .ak-blatt-huelle .ak-blatt { transition: opacity var(--ak-t-kurz) linear; transform: translateX(0); }
  .ak-blatt-huelle[hidden] .ak-blatt { transform: translateX(200%); }
  .ak-blatt-huelle .ak-blatt-schirm { transition: opacity var(--ak-t-kurz) linear; }
  .ak-flanken-huelle .ak-flankenblatt { transition: opacity var(--ak-t-kurz) linear; transform: translateX(0); }
  .ak-flanken-huelle[hidden] .ak-flankenblatt { transform: translateX(-200%); }
  .ak-flanken-huelle .ak-flankenblatt-leib { transition: opacity var(--ak-t-kurz) linear; }
  .ak-flanken-huelle .ak-flanken-schirm { transition: opacity var(--ak-t-kurz) linear; }
  .ak-liste { transition: opacity var(--ak-t-kurz) linear; transform: none; }
  .ak-block-leib, .ak-legende-leib { transition: opacity var(--ak-t-kurz) linear; transform: none; }
  .ak-pfeil { transition: none; }
}

/* Seite freigaben */

/* Arbeitsflaeche: links die flache Liste der offenen Vorgaenge, rechts
   genau einer davon in voller Bearbeitung. minmax(0, ...) auf beiden
   Spalten haelt das Raster in jeder Breite im Rahmen, siehe .freigabe-paar
   weiter oben fuer dasselbe Vorgehen. */
.freigaben-flaeche {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--abstand-5);
  align-items: start;
}

/* Die rechte Spalte von .freigabe-paar (Grundgeruest) ist hier schmaler
   als bei Demo und Brief nebeneinander, weil links zusaetzlich die
   Vorgangsliste steht. min-width: 0 auf beiden Spalten laesst das
   verschachtelte Raster wirklich auf Spaltenbreite schrumpfen (Grundregel
   des Formulars weiter oben reicht bei zwei ineinander liegenden Rastern
   nicht von allein); white-space: normal auf den Knoepfen darin erlaubt
   ihrem Text den Umbruch, statt die Spalte ueber ihre Breite hinaus
   aufzuziehen. */
.freigaben-vorgang .vorschau-block,
.freigaben-vorgang .freigabe-bearbeitung,
.freigaben-vorgang .feld {
  min-width: 0;
}

.freigaben-vorgang .knopf,
.freigaben-vorgang .knopf-primaer,
.freigaben-vorgang .verweis-knopf {
  white-space: normal;
  text-align: center;
}

.freigaben-liste,
.freigaben-vorgang {
  min-width: 0;
}

.freigaben-liste h2 {
  font-size: var(--schrift-grund);
}

.freigaben-eintraege {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2);
}

.freigaben-eintrag {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--abstand-1);
  padding: var(--abstand-3);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
  text-decoration: none;
  color: var(--schrift);
  transition:
    border-color var(--dauer-mikro) var(--ease-bewegung),
    background-color var(--dauer-mikro) var(--ease-bewegung);
}

.freigaben-eintrag:hover {
  border-color: var(--rand-stark);
  background: var(--flaeche-erhoben);
}

/* Ausgewaehlter Vorgang: Rand und Flaeche in Blau (Auswahl-Rolle), dazu
   zusaetzlich fettes Gewicht auf dem Firmennamen - Farbe steht hier nie
   allein fuer den Zustand. */
.freigaben-eintrag-aktiv,
.freigaben-eintrag-aktiv:hover {
  border-color: var(--akzent);
  background: var(--akzent-hell);
}

.freigaben-eintrag-aktiv .freigaben-eintrag-betrieb {
  font-weight: var(--gewicht-fett);
  color: var(--akzent-dunkel);
}

.freigaben-eintrag-alter {
  font-size: var(--schrift-klein);
  color: var(--schrift-gedaempft);
}

.freigaben-vorgang h2 {
  margin-bottom: 0;
}

.freigaben-vorgang h2 a {
  color: inherit;
  text-decoration: none;
}

.freigaben-vorgang h2 a:hover {
  color: var(--akzent-dunkel);
  text-decoration: underline;
}

.freigaben-vorgang h3 {
  margin-top: var(--abstand-5);
}

/* Nebenaktionen Bausteine und Stilvariante als aufklappbare Werkzeuge:
   am Entscheidungspunkt bleiben so hoechstens vier Bedienelemente sichtbar
   (Bausteine, Stilvariante, Freigeben, Verwerfen), nicht die volle
   Bausteintabelle und der Variantenwaehler zugleich. */
.freigaben-werkzeug {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  margin: 0 0 var(--abstand-3);
}

.freigaben-werkzeug summary {
  cursor: pointer;
  padding: var(--abstand-2) var(--abstand-3);
  font-weight: var(--gewicht-fett);
  font-size: var(--schrift-klein);
  color: var(--schrift-gedaempft);
}

.freigaben-werkzeug[open] summary {
  border-bottom: 1px solid var(--rand);
  color: var(--schrift);
}

.freigaben-werkzeug > .tabelle-rolle,
.freigaben-werkzeug > form {
  padding: var(--abstand-3);
}

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

  /* Reiterleiste: die Liste laeuft waagerecht statt senkrecht, sie steht
     ueber dem Vorgang statt daneben (Paket 2: "unter 720 px Liste ueber
     dem Vorgang mit Reitern"). contain: layout wie bei .tabelle-rolle,
     damit die Reiterleiste in ihrem eigenen Feld rollt statt die Seite
     selbst in die Breite zu ziehen. */
  .freigaben-liste {
    overflow-x: auto;
    contain: layout;
  }

  .freigaben-eintraege {
    flex-direction: row;
  }

  .freigaben-eintrag {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
  }
}

/* Seite einstellungen */
/* Entruempelung Paket 2: Beschreibung/Typ-Spalten fielen weg, die
   Bezeichnung kommt aus dem Schluessel. Praefix "es-" haelt die Klassen
   dieser Seite von den uebrigen Bildschirmen getrennt. */
.es-sprungleiste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-1) var(--abstand-4);
  margin: 0 0 var(--abstand-5);
  padding-bottom: var(--abstand-3);
  border-bottom: 1px solid var(--rand);
  font-size: var(--schrift-klein);
}

.es-hinweis {
  margin: var(--abstand-1) 0 0;
  color: var(--schrift-gedaempft);
  font-size: var(--schrift-klein);
  font-weight: var(--gewicht-normal);
  max-width: 42ch;
}

/* Wertefelder wachsen mit ihrem Inhalt (field-sizing, wo unterstuetzt),
   sonst reicht die volle Zellenbreite - eine Textarea bricht lange Werte
   (E-Mail, URL, Prompt-Namen) ohnehin um, statt sie abzuschneiden. */
.einstellungstabelle textarea.es-feld,
.einstellungstabelle input.es-feld {
  width: 100%;
  max-width: 56ch;
  min-height: 2.4em;
  field-sizing: content;
}

/* Auf der Workflow-Seite steht Speichern neben dem Feld statt in eigener
   Spalte (kein zweiter Knopf je Abschnitt dort) - das Feld bleibt darum
   schmal am Inhalt statt die ganze Zeile zu beanspruchen, sonst wirft die
   volle Breite den Knopf aus der Zeile. */
.inline-formular textarea.es-feld,
.inline-formular input.es-feld {
  width: auto;
  min-width: 8ch;
  /* vw-Grenze statt fester ch-Zahl: auf schmalen Bildschirmen bleibt neben
     dem Feld noch Platz fuer den Speichern-Knopf in derselben Zeile, ein
     langer Wert bricht dann in der Textarea um statt zu ueberlaufen. */
  max-width: min(40ch, 55vw);
  flex: 0 1 auto;
}

.es-abschnitt-fuss {
  display: flex;
  justify-content: flex-end;
  margin: var(--abstand-3) 0 0;
}

/* Seite bausteine */
/* Katalogzeile: Varianten als Chips, mehrere je Zeile, Umbruch statt
   Ueberlauf; Blau ist die bestehende Farbrolle fuer Optionen/Auswahl. */
.chip-liste {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--abstand-1);
}

.kennzeichen-blau {
  background: var(--akzent-hell);
  border-color: var(--akzent-rand);
  color: var(--akzent-dunkel);
}

/* Vorschau: ein aufklappbarer Block je Baustein, gleiche Bauart wie
   .freigaben-werkzeug, nur unter eigenem Namen, weil diese Seite die
   Freigaben-Regeln nicht mitziehen soll. */
.baustein-vorschau-block {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  margin: 0 0 var(--abstand-1);
}

.baustein-vorschau-block:last-child {
  margin-bottom: 0;
}

.baustein-vorschau-block summary {
  cursor: pointer;
  padding: var(--abstand-2) var(--abstand-4);
  font-weight: var(--gewicht-fett);
}

.baustein-vorschau-block[open] summary {
  border-bottom: 1px solid var(--rand);
}

.baustein-vorschau-block summary .unterzeile {
  font-weight: var(--gewicht-normal);
  margin-left: var(--abstand-1);
}

.baustein-vorschau-leib {
  padding: var(--abstand-4);
  display: grid;
  gap: var(--abstand-4);
  /* Ein Rastergegenstand bemisst sich sonst am laengsten Inhalt (hier
     das nicht umbrechende Markup-Feld) und zieht die ganze Seite in
     die Breite - min-width: 0 laesst ihn wirklich auf Spaltenbreite
     schrumpfen, siehe .markup-code weiter unten. */
  min-width: 0;
}

/* Rastergegenstand: dieselbe min-width:0-Regel wie beim umgebenden
   .baustein-vorschau-leib, sonst zieht das Markup-Feld darin die Seite
   waagerecht auf, sobald "Markup zeigen" offen ist. Kein eigener Rahmen
   und keine eigene Flaeche mehr (vormals .kasten) - im geoeffneten
   Aufklapper stand sonst Kasten in Kasten in Kasten (Variante, Vorschau,
   Markup-Feld). Die Variante trennt sich stattdessen ueber ihre
   Ueberschrift (h4, Variantenname) und den Grid-Abstand von
   .baustein-vorschau-leib; einzige verbleibende Rahmenebene ist die
   Vorschau selbst (.baustein-vorschau). */
.baustein-vorschau-variante {
  min-width: 0;
}

.baustein-vorschau-variante h4 {
  margin: 0 0 var(--abstand-3);
  font-size: var(--schrift-klein);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--schrift-gedaempft);
}

/* Markup je Variante bleibt bis zum Klick verborgen, danach ein
   waagerecht rollendes, nie umbrechendes Codefeld. */
.markup-anzeige {
  margin-top: var(--abstand-3);
  max-width: 100%;
}

.markup-anzeige summary {
  cursor: pointer;
  font-size: var(--schrift-klein);
  color: var(--schrift-gedaempft);
}

/* Nur Flaechenton, kein eigener Rahmen: die Vorschau darueber
   (.baustein-vorschau) traegt schon die einzige Rahmenebene des
   Aufklappers, ein zweiter Rahmen ums Markup-Feld waere Kasten in
   Kasten. */
.markup-code {
  margin: var(--abstand-2) 0 0;
  padding: var(--abstand-3);
  background: var(--grund);
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: var(--schrift-klein);
  line-height: 1.5;
  white-space: pre;
}

/* Eingebettetes Baustein-Markup: eigene Ueberschriften- und Bildregeln,
   weil bausteine/grund.css hier nicht laedt (kein zweiter Mount fuer
   diese Seite). Kein Anspruch auf die echte Marketingoptik, nur lesbar
   und ohne Ueberlauf. */
.baustein-vorschau {
  max-width: 640px;
}

.baustein-vorschau img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}

.baustein-vorschau h5,
.baustein-vorschau h6 {
  margin: 0 0 var(--abstand-2);
}

.baustein-vorschau p {
  margin: 0 0 var(--abstand-3);
}

.baustein-vorschau ul,
.baustein-vorschau ol,
.baustein-vorschau dl {
  margin: 0;
  padding: 0;
  list-style: none;
}

.baustein-vorschau li {
  margin-bottom: var(--abstand-2);
}

.baustein-vorschau dl > div {
  display: flex;
  justify-content: space-between;
  gap: var(--abstand-3);
  padding: var(--abstand-1) 0;
  border-bottom: 1px solid var(--rand);
}

.baustein-vorschau dt,
.baustein-vorschau dd {
  margin: 0;
}

.baustein-vorschau figure {
  margin: 0 0 var(--abstand-3);
}

.baustein-vorschau figcaption {
  font-size: var(--schrift-klein);
  color: var(--schrift-gedaempft);
  margin-top: var(--abstand-1);
}

.baustein-vorschau .bs-bild {
  margin-bottom: var(--abstand-3);
}

/* Bildreihen (Referenzengalerie, Team-Portraets, Vorher-Nachher): ohne
   eigenes Raster stapelt der Browser mehrere hochkant lange Fotos zu
   einer einzigen sehr langen Spalte statt einer Reihe. */
.baustein-vorschau .bs-referenzen-galerie,
.baustein-vorschau .bs-team-portraets,
.baustein-vorschau .bs-vergleich {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--abstand-3);
}

.baustein-vorschau .bs-referenzen-galerie .bs-bild,
.baustein-vorschau .bs-team-portraets .bs-bild,
.baustein-vorschau .bs-vergleich .bs-bild {
  margin-bottom: 0;
}

.baustein-vorschau .bs-referenzen-galerie img,
.baustein-vorschau .bs-team-portraets img,
.baustein-vorschau .bs-vergleich img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.baustein-vorschau label {
  display: block;
  font-size: var(--schrift-klein);
  color: var(--schrift-gedaempft);
  margin: var(--abstand-2) 0 var(--abstand-1);
}

.baustein-vorschau input,
.baustein-vorschau textarea {
  width: 100%;
  max-width: 100%;
}

/* Seite bausteine: engerer Rhythmus als sonst, drei Abschnitte plus
   dreizehn Vorschauzeilen sollen bei 1280 px ohne Aufklappen unter die
   uebliche Bildschirmhoehe passen. */
.bausteine-seite .abschnitt {
  margin-bottom: var(--abstand-5);
}

.bausteine-seite .abschnitt:last-child {
  margin-bottom: 0;
}

main.bausteine-seite {
  padding-bottom: var(--abstand-6);
}

/* Katalogtabelle: Zweck ist ein ganzer Satz, ohne Mindestbreite quetscht
   ihn table-layout:auto auf schmalen Bildschirmen fast auf ein Wort je
   Zeile. Wie die uebrigen Tabellen im Haus rollt sie stattdessen in ihrem
   eigenen Feld (.tabelle-rolle). */
.tabelle-bausteine {
  min-width: 640px;
}

/* Das eingebettete Baustein-Markup nutzt fuer Handlungslinks <a
   class="knopf">, im uebrigen Kontor kommt .knopf nur an <button> vor
   (siehe grep "class=\"knopf\""). Ohne diese Zeile erbt der Link die
   globale Anker-Unterstreichung und sieht aus wie Fliesstext, nicht wie
   ein Knopf. */
.baustein-vorschau a.knopf {
  text-decoration: none;
}

/* Seite heute-kunden */

/* Heute: Blockkopf traegt Ueberschrift und, wo vorhanden, eine
   Nebenaktion (z. B. "Alle Freigaben bearbeiten") in derselben Zeile. */
.block-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--abstand-3);
}

.block-kopf h2 {
  margin: 0 0 var(--abstand-2);
}

.block-nebenaktion {
  white-space: nowrap;
}

/* Je Block eine klare naechste Handlung, knapp unter der Ueberschrift. */
.block-handlung {
  color: var(--schrift-gedaempft);
  margin: 0 0 var(--abstand-3);
}

/* Ueberfaellige Wiedervorlage: kein Randstreifen als Schablonen-Akzent -
   die Datumszelle bekommt stattdessen eine dezente Gelbflaeche, das Datum
   fettes Gewicht und der Text "seit N Tagen" steht selbst in der
   Hinweisfarbe. Die Farbe allein traegt die Aussage nicht, Gewicht und
   Wort tun es. */
.wv-ueberfaellig td:first-child {
  background: var(--hinweis-hell);
}

.wv-datum-ueberfaellig {
  font-weight: var(--gewicht-fett);
}

.wv-seit {
  display: block;
  font-size: var(--schrift-klein);
  color: var(--hinweis-dunkel);
}

/* Unter 720 px faellt die eigene Hinweis-Spalte weg, der Hinweis steht
   dann als Zweitzeile unter dem Titel - siehe Medienabfrage direkt
   darunter (bewusst hier bei .wv-titel-hinweis statt bei der
   Layout-Medienabfrage weiter oben, damit die Reihenfolge im
   Stylesheet nicht ueber die Regel entscheidet). */
.wv-titel-hinweis {
  display: none;
}

@media (max-width: 720px) {
  .wv-hinweis-spalte {
    display: none;
  }

  .wv-titel-hinweis {
    display: block;
    font-size: var(--schrift-klein);
    color: var(--schrift-gedaempft);
  }
}

/* Kunden: Suchfeld bleibt immer sichtbar, die uebrigen Filter liegen
   hinter einem Aufklapper. */
.kunden-suchform {
  margin: 0 0 var(--abstand-4);
}

.kunden-suchzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--abstand-3);
}

.kunden-suchfeld {
  min-width: 16rem;
  flex: 1 1 16rem;
}

.kunden-filter {
  margin-top: var(--abstand-4);
  border-top: 1px solid var(--rand);
  padding-top: var(--abstand-3);
}

.kunden-filter summary {
  cursor: pointer;
  font-weight: var(--gewicht-fett);
  color: var(--schrift-gedaempft);
}

.kunden-filter .filterleiste {
  margin-top: var(--abstand-4);
  margin-bottom: 0;
}

/* Zahlenspalten: rechtsbuendig mit stehenden (tabellarischen) Ziffern,
   damit Werte untereinander vergleichbar bleiben. */
.zelle-zahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.zahl-fehlt {
  color: var(--schrift-leise);
}

.kunden-zeilenzahl {
  color: var(--schrift-gedaempft);
  font-size: var(--schrift-klein);
  margin: 0 0 var(--abstand-2);
}

.kunden-blaetterung {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-4);
  margin: var(--abstand-4) 0 0;
}

.kunden-blaetterung-stand {
  color: var(--schrift-gedaempft);
  font-size: var(--schrift-klein);
}

.kunden-blaetterung-inaktiv {
  color: var(--schrift-leise);
}

/* Seite demos-pipelines */

/* Vierte Kennzeichen-Rolle: Gruen fuer veroeffentlicht/abgeschlossen,
   dieselben Erfolgs-Token wie .knopf-gruen und .verweis-knopf-gruen. Die
   drei anderen Rollen (Gelb, Rot, Grau, Lila) stehen schon im
   Grundgeruest weiter oben in dieser Datei. */
.kennzeichen-gruen {
  background: var(--erfolg-hell);
  border-color: var(--erfolg-rand);
  color: var(--erfolg-dunkel);
}

/* Demos: die Filterzeile traegt nur .formular-zeile aus dem
   Grundgeruest, Aufrufe die bestehende .zelle-zahl-Rolle (Abschnitt
   Kundenfilter). Code-Spalte schmal und einzeilig statt umbrechend, in
   der Kundenakte-Monoschrift, damit sie sich als Kennung lesen laesst. */
.demo-stand .kennzeichen {
  white-space: nowrap;
}

/* Alle Codes beginnen mit demselben Firmenslug - die Ellipse muss also
   den Anfang kuerzen, nicht das Ende, sonst verschwindet genau der
   unterscheidende Zeitstempel. direction: rtl dreht die Kuerzrichtung
   um, unicode-bidi: plaintext haelt den lateinischen Text dabei lesbar
   von links nach rechts; der volle Code bleibt im title-Attribut. */
.demo-code {
  max-width: 12rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  direction: rtl;
  text-align: left;
  font-family: var(--ak-mono);
  font-size: var(--schrift-klein);
  color: var(--schrift-gedaempft);
}

/* Aktionsspalte breit genug halten, damit "Bearbeiten" mit eigenem
   Dreieck davor nicht in eine zweite Zeile umbricht. */
.spalte-aktion {
  min-width: 7rem;
}

/* "Bearbeiten" ohne das verwaiste Standarddreieck des Browsers (in der
   schmalen Aktionsspalte rutschte die native Markierung ueber den Text
   statt davor): list-style aus, eigenes, kleines Zeichen davor. Zeichen
   und Wort bleiben in einer Zeile. */
.demo-bearbeiten-block summary {
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.demo-bearbeiten-block summary::-webkit-details-marker {
  display: none;
}

.demo-bearbeiten-block summary::before {
  content: "▸ ";
  color: var(--schrift-leise);
}

.demo-bearbeiten-block[open] summary::before {
  content: "▾ ";
}

/* Pipelines: Umbenennen und Stufe-Feldwerk hinter einem Aufklapper,
   geschlossen als Vorgabe - der Pipeline-Name steht dann nur einmal
   (in der Ueberschrift), nicht ein zweites Mal im vorbelegten Feld.
   Gleiches Dreieck-Rezept wie .demo-bearbeiten-block oben. */
.pipeline-umbenennen {
  margin: 0;
}

.pipeline-umbenennen summary,
.stufe-bearbeiten summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--schrift-klein);
  font-weight: var(--gewicht-fett);
  color: var(--schrift-gedaempft);
}

.pipeline-umbenennen summary::-webkit-details-marker,
.stufe-bearbeiten summary::-webkit-details-marker {
  display: none;
}

.pipeline-umbenennen summary::before,
.stufe-bearbeiten summary::before {
  content: "▸ ";
  color: var(--schrift-leise);
}

.pipeline-umbenennen[open] summary::before,
.stufe-bearbeiten[open] summary::before {
  content: "▾ ";
}

.pipeline-umbenennen summary:hover,
.stufe-bearbeiten summary:hover {
  color: var(--schrift);
}

.pipeline-umbenennen form {
  margin-top: var(--abstand-2);
}

.stufe-bearbeiten {
  margin-bottom: var(--abstand-3);
}

.stufe-bearbeiten .pipeline-stufe-formular {
  margin-top: var(--abstand-2);
}

/* Neue-Stufe- und Neue-Pipeline-Kasten leiser als die Stufen-Spalten:
   keine Flaeche, gestrichelter statt durchgezogener Rand - ein
   Anlegeformular, kein Arbeitsinhalt wie die Stufen-Spalten daneben. */
.kasten-leise {
  background: transparent;
  border-style: dashed;
  border-color: var(--rand);
}

/* Unter 700 px stehen die Pipeline-Stufen untereinander statt in
   waagerecht rollenden Spalten - auf dem Handy nichts zu ziehen, was
   ausserhalb des Bildschirms liegt. */
@media (max-width: 700px) {
  .pipeline-brett {
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: 1fr;
  }
}

/* Korrektur pipelines.html */
/* Neue Stufe hinter Aufklapper wie .pipeline-umbenennen und
   .stufe-bearbeiten - gleiches Dreieck-Rezept, damit "Stufe anlegen"
   nicht mehr offen und dauerhaft gruen unter den Pipeline-Spalten
   steht, sondern wie die anderen Bearbeiten-Formulare erst auf
   Wunsch erscheint. */
.stufe-anlegen summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--schrift-klein);
  font-weight: var(--gewicht-fett);
  color: var(--schrift-gedaempft);
}

.stufe-anlegen summary::-webkit-details-marker {
  display: none;
}

.stufe-anlegen summary::before {
  content: "▸ ";
  color: var(--schrift-leise);
}

.stufe-anlegen[open] summary::before {
  content: "▾ ";
}

.stufe-anlegen summary:hover {
  color: var(--schrift);
}

.stufe-anlegen .formular-zeile {
  margin: var(--abstand-2) 0 0;
}

/* Korrektur einstellungen.html */
/* Webhook-Ziele-Tabelle: fuenf Spalten mit einer ganzen Adresse als
   Inhalt quetschten sich bei schmalem Bildschirm ineinander, die
   Adresse riss dabei zeichenweise um. Wie .tabelle-bausteine bekommt
   sie eine Mindestbreite und rollt stattdessen in ihrem .tabelle-rolle
   -Feld; das title-Attribut auf der Zelle zeigt die volle Adresse auch
   dann, wenn sie am Rand doch einmal abgeschnitten erscheint. */
.es-tabelle-webhooks {
  min-width: 760px;
}

/* Korrektur demos.html */

/* Die Code-Spalte war bei fast jeder Zeile auf denselben Firmenslug
   gekuerzt und damit als Unterscheidungsmerkmal wertlos, waehrend der
   Kundenname daneben umbrach. Eigene Spalte gestrichen, Code steht
   stattdessen als leise, kleine Monoschrift-Zweitzeile unter dem
   Kundennamen (voller Code bleibt zusaetzlich im title-Attribut). */
.demo-code-zeile {
  margin-top: 0.15em;
  font-family: var(--ak-mono);
  font-size: var(--schrift-klein);
  color: var(--schrift-gedaempft);
  overflow-wrap: anywhere;
}

/* Der Bearbeiten-Inhalt (vier Aktionsformulare plus Bildherkunft-
   Tabelle) sprengte in der schmalen Aktionszelle die Zeilenhoehe und
   zwang die eingebettete Tabelle zum seitlichen Rollen. Er zieht jetzt
   in eine eigene Zeile ueber die volle Tabellenbreite um, die nur
   erscheint, solange der Bearbeiten-Aufklapper der Datenzeile offen
   ist - ganz ohne JavaScript ueber :has() auf den offen-Zustand. */
.demo-bearbeiten-zeile {
  display: none;
}

.tabelle tbody tr:has(> td > .demo-bearbeiten-block[open]) + .demo-bearbeiten-zeile {
  display: table-row;
}

.demo-bearbeiten-zeile > td {
  background: var(--flaeche-erhoben);
}

.demo-bearbeiten-inhalt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-2);
  margin-bottom: var(--abstand-3);
}

/* Korrektur freigaben.html */

/* Sortierknoepfe der Bausteinliste (Hoch/Runter): eigene Klasse statt
   .verweis-knopf, damit sie als .knopf umrandet und mit einer
   Mindesttippflaeche von 44 x 44 px erscheinen statt als kaum sichtbarer,
   fast untreffbarer Textknopf. */
.sortier-knopf {
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  padding: var(--abstand-2);
}

/* Entscheidungsblock "Zurueck an die KI": Anmerkungsfeld und der dazu-
   gehoerige Knopf stehen erkennbar als ein Fieldset zusammen, statt lose
   neben einem gefuellten Freigeben-Knopf zu wirken. Neutrale .knopf-Rolle
   (nicht rot), weil nichts geloescht wird - die Vorlage geht nur mit
   Anmerkung zurueck an die KI (Rot bleibt Loeschen vorbehalten). */
.freigaben-rueckgabe {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: var(--abstand-3);
  margin: 0 0 var(--abstand-3);
  min-width: 0;
}

.freigaben-rueckgabe legend {
  padding: 0 var(--abstand-1);
  font-weight: var(--gewicht-fett);
  font-size: var(--schrift-klein);
  color: var(--schrift-gedaempft);
}

.freigaben-rueckgabe .feld {
  margin-bottom: var(--abstand-3);
}

/* Freigeben steht als letzte, eigens hervorgehobene Handlung nach dem
   Ruecksendungs-Fieldset, rechtsbuendig statt zwischen Werkzeugen und
   Textfeld eingeklemmt. */
.freigaben-abschluss {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

/* Versandstapel unter 720 px: eine Zeile je Brief als gestapelter Block
   statt als Tabellenzelle, damit Datum, Zustellart und der Bestaetigen-
   Knopf ohne seitliches Rollen sichtbar und in voller Breite erreichbar
   sind. Der Kopf bleibt fuer Screenreader erhalten (gleiche Technik wie
   .verborgene-beschriftung), verschwindet aber sichtbar, weil jede Zeile
   ihre Spaltennamen ueber data-titel selbst traegt. */
@media (max-width: 720px) {
  .tabelle-stapel thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .tabelle-stapel tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--abstand-1) var(--abstand-3);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: var(--abstand-3);
    margin-bottom: var(--abstand-3);
  }

  .tabelle-stapel tbody tr:last-child {
    margin-bottom: 0;
  }

  .tabelle-stapel td {
    display: block;
    border-bottom: none;
    padding: 0;
  }

  .tabelle-stapel td:first-child {
    font-weight: var(--gewicht-fett);
  }

  /* Kunde, Art und Gueltig bis (erste drei Zellen) bleiben eine gemeinsame
     Zeile (kompakte Kennzeichnung), die Aktionsspalte (vierte, letzte
     Zelle) bricht darunter in voller Breite um. */
  .tabelle-stapel td:last-child {
    flex: 1 1 100%;
    padding-top: var(--abstand-2);
    border-top: 1px solid var(--rand);
  }

  .tabelle-stapel td:last-child .inline-formular {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .tabelle-stapel td:last-child .inline-formular input,
  .tabelle-stapel td:last-child .inline-formular select,
  .tabelle-stapel td:last-child .inline-formular button {
    width: 100%;
  }
}

/* Korrektur freigaben.html */

/* Sortieren-Spalte im Aufklapper "Bausteine": die beiden 44-px-Pfeilknoepfe
   sollen nebeneinander stehen statt untereinander umzubrechen (das machte
   jede Zeile rund 120 px hoch). Mindestbreite fuer die Spalte, kein Umbruch
   im Formular (Korrektur freigaben.html, Runde 2). */
.sortier-zelle {
  white-space: nowrap;
  min-width: 6rem;
}

.sortier-zelle .inline-formular {
  flex-wrap: nowrap;
}