/* Eine Datei, kein Build-Schritt. Die CSP erlaubt nur Stile aus eigenen
   Dateien, deshalb steht nichts in den Vorlagen selbst.

   Farben und Formen folgen der Website der Firma (Stand 02.10.2026, aus
   deren Stylesheet gelesen): Blau als tragende Farbe, Petrol sparsam als ein
   Knopf und ein Strich, Knöpfe und Felder mit 4 Pixeln Rundung, Karten mit 8.
   Den dunklen Modus gibt es dort nicht. Er heißt „Graphit“ und ist am
   05.10.2026 aus fünf Entwürfen gewählt: neutrales Dunkelgrau, Blau nur als
   Akzent auf Knöpfen, Links und Auswahl; die Leiste geht in die Seite über,
   der Petrol-Strich zeigt, wo man ist. Jedes Paar aus Schrift und Grund
   erreicht 4,5 : 1, Feldrahmen 3 : 1. */

:root {
  color-scheme: light dark;

  --petrol: #49d8d7;
  --auf-petrol: #132768;

  --seite: #f6f7fb;
  --grund: #ffffff;
  --flaeche: #eceff8;
  --zart: #e5eaf5;
  --linie: #ccd6eb;
  --feldrand: #757d8b;
  --text: #1a1a1a;
  --blass: #666666;

  /* Blau als Fläche und Blau als Schrift sind getrennt, weil sie im dunklen
     Modus zwei verschiedene Töne brauchen. */
  --akzent: #1a3691;
  --akzent-tief: #132768;
  --auf-akzent: #ffffff;
  --akzent-text: #1a3691;
  --fokus: #1a3691;

  --leiste: #1a3691;
  --leiste-aktiv: #132768;
  --auf-leiste: #dce3f5;
  --leiste-rand: transparent;

  --fehler: #cc1535;
  --fehler-flaeche: #fff4f6;
  --erfolg: #2e762e;
  --erfolg-flaeche: #e4f4e4;

  /* Phasen auf der Ticketseite, Klärung mit eigener Fläche, Zeile unter
     der Maus, erwähnte Kollegen. */
  --ph-offen: #5f6672;
  --ph-bearbeitung: #1a3691;
  --ph-klaerung: #1a3691;
  --ph-pruefen: #6d35d6;
  --ph-erledigt: #2e762e;
  --ph-anruf: #9a5b00;
  --klaer-flaeche: #e7ecfb;
  --zeile-hover: #f0f3fb;
  --erwaehnung: #e7ecfb;

  /* Timer: Petrol heißt „läuft bei dir“, Grau „bei jemand anderem“. */
  --mein: #49d8d7;
  --mein-tief: #1a3691;
  --fremd: #6b7280;
  --fremd-flaeche: #eef0f3;
  --gestoppt: #2e762e;
  --warn: #a35300;
  /* Fälligkeit an der Ticketkarte (09.10.2026): drei Farben, das Rot gedämpft. */
  --frist-rot: #c2505b;
  --frist-rot-flaeche: #fbedee;
  --frist-orange: #b4610f;
  --frist-orange-flaeche: #fdf2e6;
  --frist-grau-linie: #a9b0bd;
  /* Eingangskanal an der Ticketkarte (09.10.2026): Blau Anruf, Gelb E-Mail,
     Grau Anrufbeantworter, Lila CRM4US. */
  --kanal-telefon: #2f6bd8;
  --kanal-mail: #e2b100;
  --kanal-ab: #a3a9b4;
  --kanal-crm: #8b5cf6;

  --schatten: 0 3px 5px rgba(0, 0, 0, 0.2), 0 0 2px rgba(0, 0, 0, 0.23);
  --schatten-gross: 0 8px 16px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(0, 0, 0, 0.12),
    0 0 2px rgba(0, 0, 0, 0.2);
  --maske-schatten: -1rem 0 2.5rem rgba(10, 20, 40, 0.14);
  --kartenrand: transparent;
  --rund: 4px;
  --rund-karte: 8px;

  /* Die Hausschriften greifen, sobald sie auf dem Rechner oder unter
     static/ liegen; bis dahin die Schriften des Systems. */
  --schrift: "SI Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --schrift-titel: "SI Serif", Georgia, "Times New Roman", serif;

  --kurve: cubic-bezier(0.22, 0.8, 0.24, 1);
  --pfeil: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Dunkel: wenn der Rechner dunkel eingestellt ist und das Konto nichts
   anderes sagt, oder wenn das Konto „Dunkel“ gewählt hat (data-darstellung
   am <html>, Benutzereinstellungen). Beide Blöcke tragen dieselben Werte;
   ein Test hält sie gleich. */
@media (prefers-color-scheme: dark) {
  :root:not([data-darstellung="hell"]) {
    --seite: #111317;
    --grund: #1b1e24;
    --flaeche: #16181d;
    --zart: #262a33;
    --linie: #343944;
    --feldrand: #6c7482;
    --text: #e6e8ec;
    --blass: #a0a6b1;

    --akzent: #3d5cc4;
    --akzent-tief: #3350b0;
    --akzent-text: #93b4ff;
    --fokus: #93b4ff;

    /* Die Leiste hat den Ton der Spalten, ein Rand trennt sie von der Seite. */
    --leiste: #16181d;
    --leiste-aktiv: #262a33;
    --auf-leiste: #c9ced8;
    --leiste-rand: #2c3039;

    --fehler: #ff9a94;
    --fehler-flaeche: #3a1d1f;
    --erfolg: #8fd69a;
    --erfolg-flaeche: #1a3020;

    --ph-offen: #a0a6b1;
    --ph-bearbeitung: #93b4ff;
    --ph-klaerung: #93b4ff;
    --ph-pruefen: #c4a5ff;
    --ph-erledigt: #8fd69a;
    --ph-anruf: #f2b866;
    --klaer-flaeche: #26324f;
    --zeile-hover: #232730;
    --erwaehnung: #26324f;

    --mein: #49d8d7;
    --mein-tief: #3d5cc4;
    --fremd: #9aa1ad;
    --fremd-flaeche: #23262d;
    --gestoppt: #8fd69a;
    --warn: #f2b25c;
    --frist-rot: #e8939b;
    --frist-rot-flaeche: #33232a;
    --frist-orange: #f0b46e;
    --frist-orange-flaeche: #312a22;
    --frist-grau-linie: #5d6470;
    --kanal-telefon: #6f9bff;
    --kanal-mail: #e6c34a;
    --kanal-ab: #737a87;
    --kanal-crm: #b394ff;

    /* Schatten trägt auf dunklem Grund nicht; Karten bekommen einen Rand. */
    --schatten: none;
    --schatten-gross: 0 8px 24px rgba(0, 0, 0, 0.55);
    --maske-schatten: -1rem 0 2.5rem rgba(0, 0, 0, 0.35);
    --kartenrand: #2c3039;
    --pfeil: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23a0a6b1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  }
}

:root[data-darstellung="dunkel"] {
  --seite: #111317;
  --grund: #1b1e24;
  --flaeche: #16181d;
  --zart: #262a33;
  --linie: #343944;
  --feldrand: #6c7482;
  --text: #e6e8ec;
  --blass: #a0a6b1;

  --akzent: #3d5cc4;
  --akzent-tief: #3350b0;
  --akzent-text: #93b4ff;
  --fokus: #93b4ff;

  /* Die Leiste hat den Ton der Spalten, ein Rand trennt sie von der Seite. */
  --leiste: #16181d;
  --leiste-aktiv: #262a33;
  --auf-leiste: #c9ced8;
  --leiste-rand: #2c3039;

  --fehler: #ff9a94;
  --fehler-flaeche: #3a1d1f;
  --erfolg: #8fd69a;
  --erfolg-flaeche: #1a3020;

  --ph-offen: #a0a6b1;
  --ph-bearbeitung: #93b4ff;
  --ph-klaerung: #93b4ff;
  --ph-pruefen: #c4a5ff;
  --ph-erledigt: #8fd69a;
  --ph-anruf: #f2b866;
  --klaer-flaeche: #26324f;
  --zeile-hover: #232730;
  --erwaehnung: #26324f;

  --mein: #49d8d7;
  --mein-tief: #3d5cc4;
  --fremd: #9aa1ad;
  --fremd-flaeche: #23262d;
  --gestoppt: #8fd69a;
  --warn: #f2b25c;
  --frist-rot: #e8939b;
  --frist-rot-flaeche: #33232a;
  --frist-orange: #f0b46e;
  --frist-orange-flaeche: #312a22;
  --frist-grau-linie: #5d6470;
  --kanal-telefon: #6f9bff;
  --kanal-mail: #e6c34a;
  --kanal-ab: #737a87;
  --kanal-crm: #b394ff;

  /* Schatten trägt auf dunklem Grund nicht; Karten bekommen einen Rand. */
  --schatten: none;
  --schatten-gross: 0 8px 24px rgba(0, 0, 0, 0.55);
  --maske-schatten: -1rem 0 2.5rem rgba(0, 0, 0, 0.35);
  --kartenrand: #2c3039;
  --pfeil: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23a0a6b1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

:root[data-darstellung="hell"] {
  color-scheme: light;
}

:root[data-darstellung="dunkel"] {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--schrift);
  line-height: 1.5;
  color: var(--text);
  background: var(--seite);
}

h1,
h2 {
  font-family: var(--schrift-titel);
  font-weight: 600;
  line-height: 1.2;
}

h1 {
  margin: 0 0 0.75rem;
  font-size: 1.8rem;
}

h2 {
  font-size: 1.15rem;
}

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

:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
}

.symbol {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------------------- Rahmen
   Angemeldet: links die Leiste, rechts die Seite. Beide füllen das Fenster
   und scrollen für sich. */

.rahmen {
  display: grid;
  grid-template-columns: 13.5rem minmax(0, 1fr);
  height: 100vh;
}

.leiste {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 0.75rem;
  overflow-y: auto;
  border-right: 1px solid var(--leiste-rand);
  color: var(--auf-leiste);
  background: var(--leiste);
}

/* Das Logo: gefüllte Sprechblase mit „ZAI“, in der schmalen Leiste nur das Z
   (Post-it #67, drei Wegwerf-Runden, 16.10.2026). Die Marke ist zugleich der
   Umschalter der Leiste; die Hover-Fläche hat rundum Luft. */
a.marke {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.5rem;
  margin: -0.35rem 0 -0.35rem -0.5rem;
  border-radius: var(--rund);
  line-height: 0;
  text-decoration: none;
  color: #ffffff;
}

a.marke:hover {
  background: var(--leiste-aktiv);
}

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

.logo {
  display: block;
  height: 2rem;
  width: auto;
}

.marke .logo-schmal {
  display: none;
}

.logo .logo-blase {
  fill: currentColor;
}

.logo text {
  font-family: var(--schrift);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.3px;
  fill: var(--leiste);
}

.logo-schmal text {
  font-size: 13px;
}

/* Auf hellem Grund (Anmeldung): Umriss in Blau, Schrift wie die Überschriften. */
.logo-umriss .logo-blase {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}

.logo-umriss text {
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.2px;
  fill: currentColor;
}

.anmelden-logo {
  display: flex;
  justify-content: center;
  margin: 0 0 1.1rem;
  color: var(--akzent-text);
}

.anmelden-logo .logo {
  height: 3.6rem;
}

.leiste nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.leiste nav a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.6rem;
  font-size: 0.95rem;
  border-radius: var(--rund);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  color: inherit;
}

.leiste nav a:hover {
  background: var(--leiste-aktiv);
}

.leiste nav a[aria-current="page"] {
  color: #ffffff;
  background: var(--leiste-aktiv);
  box-shadow: inset 0.28rem 0 0 var(--petrol);
}

.leiste :focus-visible {
  outline-color: #ffffff;
}

.leiste-unten {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin: auto 0 0;
  padding: 0.5rem;
  font-size: 0.9rem;
}

.leiste-unten button {
  padding: 0.3rem 0.7rem;
  border-color: var(--auf-leiste);
  font-weight: 500;
  color: #ffffff;
  background: transparent;
}

.leiste-unten button:hover {
  background: var(--leiste-aktiv);
}

/* Vorschau-Server (ZAI_UMGEBUNG): ein Band oben in der Mitte über allem.
   Es liegt außerhalb des Rasters und lässt Klicks durch. */
.umgebung-band {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 1000;
  padding: 0.1rem 0.9rem 0.15rem;
  border-radius: 0 0 0.5rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #ffffff;
  background: #b3261e;
  transform: translateX(-50%);
  pointer-events: none;
}

/* Ein- und ausklappen. Der Knopf steht unten über dem Namen. */
.rahmen {
  transition: grid-template-columns 0.2s var(--kurve);
}

/* Das eigene Bild (oder Kürzel) mit Namen; öffnet das Benutzermenü. */
.ich {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 0.6rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--rund);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  color: #ffffff;
}

.ich:hover,
.ich[aria-expanded="true"] {
  background: var(--leiste-aktiv);
}

.ich .beschriftung {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ich-pfeil .symbol {
  width: 1rem;
  height: 1rem;
  opacity: 0.7;
}

.avatar {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--auf-leiste);
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  object-fit: cover;
}

img.avatar {
  border-color: transparent;
}

.avatar.mittel,
.avatar.gross {
  border-color: var(--linie);
  color: var(--akzent-text);
  background: var(--zart);
}

.avatar.mittel {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 0.95rem;
}

.avatar.gross {
  width: 4.5rem;
  height: 4.5rem;
  font-size: 1.4rem;
}

@media (min-width: 56.01rem) {
  .leiste-schmal {
    grid-template-columns: 4.25rem minmax(0, 1fr);
  }

  .leiste-schmal .leiste {
    padding: 1rem 0.5rem;
    overflow-x: hidden;
  }

  /* Die Beschriftungen bleiben für Screenreader; sichtbar sind die Symbole,
     ihr Name steht im Tooltip. */
  .leiste-schmal .leiste .beschriftung {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .leiste-schmal a.marke {
    justify-content: center;
    padding: 0.35rem;
    margin: -0.35rem -0.35rem 0;
  }

  .leiste-schmal .marke .logo-breit {
    display: none;
  }

  .leiste-schmal .marke .logo-schmal {
    display: block;
  }

  .leiste-schmal .knopf.petrol,
  .leiste-schmal .leiste nav a {
    justify-content: center;
    padding-right: 0;
    padding-left: 0;
  }

  .leiste-schmal .leiste-unten {
    align-items: center;
    padding: 0.5rem 0;
  }

  .leiste-schmal .ich {
    justify-content: center;
    padding-right: 0;
    padding-left: 0;
  }

  .leiste-schmal .ich-pfeil {
    display: none;
  }
}

main {
  padding: 1.75rem 2rem 3rem;
  overflow-y: auto;
}

.inhalt {
  max-width: 62rem;
}

main.breit .inhalt {
  max-width: none;
}

/* Die Akte füllt die Seite selbst aus; ihre zwei Hälften scrollen für sich. */
main.voll {
  padding: 0;
  overflow: hidden;
}

main.voll .inhalt {
  max-width: none;
  height: 100%;
}

/* Ohne Anmeldung gibt es keine Leiste: eine Karte in der Mitte. */
.allein {
  display: grid;
  place-items: start center;
  min-height: 100vh;
  padding: 12vh 1rem 2rem;
}

.allein main {
  width: 100%;
  max-width: 26rem;
  padding: 2rem;
  overflow: visible;
  border: 1px solid var(--kartenrand);
  border-radius: var(--rund-karte);
  background: var(--grund);
  box-shadow: var(--schatten);
}

/* -------------------------------------------------------------- Knöpfe
   Hauptknopf blau gefüllt, zweiter Knopf weiß mit blauem Rand. */

button,
input,
select,
textarea {
  font: inherit;
}

button,
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--rund);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  color: var(--auf-akzent);
  background: var(--akzent);
  cursor: pointer;
  transition: background-color 0.2s;
}

button:hover,
.knopf:hover {
  background: var(--akzent-tief);
}

button.schlicht,
.knopf.schlicht {
  border-color: var(--akzent-text);
  color: var(--akzent-text);
  background: var(--grund);
}

button.schlicht:hover,
.knopf.schlicht:hover {
  background: var(--zart);
}

/* Der eine Petrol-Knopf: Ticket anlegen in der Leiste. */
.knopf.petrol {
  justify-content: flex-start;
  margin-bottom: 0.75rem;
  padding: 0.6rem 0.7rem;
  color: var(--auf-petrol);
  background: var(--petrol);
}

.knopf.petrol:hover {
  background: #74e1e1;
}

.nur-symbol {
  padding: 0.35rem;
  border-color: transparent;
  color: var(--blass);
  background: transparent;
}

.nur-symbol:hover {
  color: var(--akzent-text);
  background: var(--zart);
}

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

label,
legend {
  display: block;
  margin: 0 0 0.25rem;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="tel"],
select,
textarea {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--feldrand);
  border-radius: var(--rund);
  color: var(--text);
  background-color: var(--grund);
}

textarea {
  display: block;
  resize: vertical;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 0;
  border-color: var(--fokus);
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.helptext {
  display: block;
  margin: -0.15rem 0 0.25rem;
  font-size: 0.8rem;
  color: var(--blass);
}

.errorlist {
  margin: 0 0 0.25rem;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--fehler);
}

.fehler {
  color: var(--fehler);
}

.hinweis {
  font-size: 0.9rem;
  color: var(--blass);
}

.meldung {
  margin: 0;
  padding: 0.6rem 0.9rem;
  border-radius: var(--rund);
}

.meldung.erfolg {
  color: var(--erfolg);
  background: var(--erfolg-flaeche);
}

.meldung.erfolg a {
  color: inherit;
  font-weight: 600;
}

/* Auswahlliste: eigener Pfeil; wo der Browser es kann, auch eine eigene
   aufgeklappte Liste. Sonst klappt die Liste des Systems auf. */

select {
  padding-right: 2.2rem;
  appearance: none;
  background-image: var(--pfeil);
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 1.2rem;
  cursor: pointer;
}

@supports (appearance: base-select) {
  select,
  select::picker(select) {
    appearance: base-select;
  }

  select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 0.7rem;
    background-image: none;
  }

  select::picker-icon {
    width: 1.2rem;
    height: 1.2rem;
    content: "";
    background: var(--pfeil) center / contain no-repeat;
    transition: rotate 0.2s;
  }

  select:open::picker-icon {
    rotate: 180deg;
  }

  select::picker(select) {
    margin-top: 0.25rem;
    padding: 0.3rem;
    border: 1px solid var(--linie);
    border-radius: var(--rund-karte);
    background: var(--grund);
    box-shadow: var(--schatten-gross);
  }

  select option {
    padding: 0.45rem 0.7rem;
    border-radius: var(--rund);
  }

  select option::checkmark {
    display: none;
  }

  select option:hover,
  select option:focus-visible {
    background: var(--zart);
    outline: none;
  }

  select option:checked {
    font-weight: 600;
    color: var(--auf-akzent);
    background: var(--akzent);
  }
}

/* Auswahl unter wenigen: zusammenhängende Schalter. Darunter liegen echte
   Radio-Knöpfe, deshalb gehen Tab und Pfeiltasten wie gewohnt. */

.schalter fieldset > div,
.kacheln fieldset > div {
  position: relative;
}

.schalter input[type="radio"],
.kacheln input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.schalter fieldset > div {
  display: inline-flex;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--feldrand);
  border-radius: var(--rund);
  background: var(--grund);
}

.schalter fieldset > div > div + div {
  border-left: 1px solid var(--feldrand);
}

.schalter fieldset label {
  min-height: calc(2.5rem - 2px);
  margin: 0;
  padding: 0.45rem 0.9rem;
  font-size: 1rem;
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
}

.schalter fieldset label:hover {
  background: var(--zart);
}

.schalter fieldset label:has(input:checked) {
  font-weight: 600;
  color: var(--auf-akzent);
  background: var(--akzent);
}

.schalter fieldset label:has(input:focus-visible),
.kacheln fieldset label:has(input:focus-visible) {
  outline: 2px solid var(--fokus);
  outline-offset: -4px;
}

.schalter fieldset label:has(input:checked:focus-visible) {
  outline-color: var(--auf-akzent);
}

/* Auswahl mit langen Namen: Kacheln, zwei nebeneinander. */

.kacheln fieldset > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.kacheln fieldset label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  height: 100%;
  min-height: 2.5rem;
  margin: 0;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--feldrand);
  border-radius: var(--rund-karte);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.25;
  background: var(--grund);
  cursor: pointer;
}

.kacheln fieldset label:hover {
  background: var(--zart);
}

.kacheln fieldset label:has(input:checked) {
  border-color: var(--akzent-text);
  font-weight: 600;
  color: var(--akzent-text);
  background: var(--zart);
  box-shadow: inset 0 0 0 1px var(--akzent-text);
}

.kacheln fieldset label:has(input:checked)::after {
  content: "✓";
}

/* Eine Zahl mit Einheit in derselben Zeile, etwa „Erledigte sichtbar 14 Tage“. */

.zahlfeld {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.zahlfeld input[type="number"] {
  width: 5rem;
  font-weight: 400;
}

/* Ein und aus: Kippschalter über einem echten Ankreuzfeld. */

.kippschalter {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.kippschalter input[type="checkbox"] {
  position: relative;
  flex: none;
  width: 2.75rem;
  height: 1.5rem;
  margin: 0;
  border-radius: 1rem;
  appearance: none;
  background: var(--feldrand);
  cursor: pointer;
  transition: background-color 0.2s;
}

.kippschalter input[type="checkbox"]::before {
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  content: "";
  background: #ffffff;
  transition: translate 0.2s var(--kurve);
}

.kippschalter input[type="checkbox"]:checked {
  background: var(--akzent);
}

.kippschalter input[type="checkbox"]:checked::before {
  translate: 1.25rem 0;
}

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

.flaeche,
.blitz-zeile,
.ticketkarte,
.agenturliste a {
  border: 1px solid var(--kartenrand);
  border-radius: var(--rund-karte);
  background: var(--grund);
  box-shadow: var(--schatten);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 0.5rem 0.9rem 0.5rem 0;
  border-bottom: 1px solid var(--linie);
  text-align: left;
}

th {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--blass);
}

td a {
  font-weight: 600;
  text-decoration: none;
}

.formular {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.formular p {
  margin: 0 0 0.6rem;
}

.formular button {
  align-self: flex-start;
}

/* ------------------------------------------------------------ Agenturen */

.seitenkopf,
.aktenkopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.seitenkopf h1,
.aktenkopf h1 {
  margin: 0;
}

.aktenkopf p {
  margin: 0.2rem 0 0;
}

.agenturliste {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}

.agenturliste a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.6rem 0.9rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
}

.agenturliste a:hover {
  outline: 1px solid var(--akzent-text);
}

.agenturliste small {
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--blass);
}

/* Akte: gebaut für den Moment des Klingelns. Die Meldeformel muss ohne
   Suchen lesbar sein, der Knopf ohne Scrollen erreichbar.

   Ein Klick auf „Ticket anlegen" macht aus der Akte den Agenturblitz: Sie
   rückt nach links, die letzten Tickets verschwinden, und von rechts fährt
   die Maske herein. Die Klasse .maske-offen setzt akte.js oder, ohne Skript,
   die Vorlage. */

.akte {
  position: relative;
  display: flex;
  height: 100%;
  overflow: hidden;
}

.blitz {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  width: 100%;
  min-width: 0;
  padding: 1.75rem 2rem 3rem;
  overflow-y: auto;
  transition: width 0.55s var(--kurve);
}

.blitz h1 {
  transition: font-size 0.55s var(--kurve);
}

/* Der Agenturblitz (Post-it #40; Runden am 13.10.2026: Fassung 3 „Kacheln“
   mit Form B). Die Meldeformel steht groß in zarter Fläche mit Petrol-Kante,
   jede Arbeitsanweisung ist eine Kachel mit der Bezeichnung als Überzeile,
   darunter „Zur Agentur“ als gedämpfte Kacheln ohne Schatten: immer
   sichtbar, aber leiser als die Anweisungen. */
.agenturblitz {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.meldeformel {
  padding: 1rem 1.2rem;
  border-left: 0.35rem solid var(--petrol);
  border-radius: var(--rund-karte);
  background: var(--zart);
}

.meldeformel h2 {
  margin: 0 0 0.2rem;
  font-family: var(--schrift);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--blass);
}

.meldeformel p {
  margin: 0;
  font-family: var(--schrift-titel);
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.3;
  transition: font-size 0.55s var(--kurve);
}

.meldeformel p.hinweis {
  font-family: var(--schrift);
  font-size: 0.9rem;
  font-weight: 400;
}

.blitz-abschnitt {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 1.3rem 0 0.6rem;
  font-family: var(--schrift);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--blass);
}

.blitz-abschnitt .symbol {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--petrol);
}

.blitzsymbol {
  fill: currentColor;
}

.blitz-zeilen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.8rem;
  margin: 0;
}

.blitz-zeile {
  display: grid;
  align-content: start;
  gap: 0.2rem;
  padding: 0.75rem 0.95rem;
}

.blitz-zeile dt {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blass);
}

.blitz-zeile dd {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
}

.blitz-zeile dd p {
  margin: 0 0 0.4rem;
}

.blitz-zeile dd p:last-child {
  margin-bottom: 0;
}

/* „Zur Agentur“: dieselben Kacheln, flach auf grauer Fläche. */
.zur-agentur {
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.6rem;
}

.zur-agentur .blitz-zeile {
  padding: 0.55rem 0.8rem;
  border-color: transparent;
  background: var(--flaeche);
  box-shadow: none;
}

.zur-agentur .blitz-zeile dd {
  font-size: 0.88rem;
}

.letzte-tickets {
  max-height: 40rem;
  overflow: hidden;
  transition: opacity 0.3s, max-height 0.55s var(--kurve);
}

.maske-teil {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  /* Breite Maske mit Leiste (08.10.2026); die Akte bleibt als schmaler Blitz. */
  width: 76%;
  border-left: 1px solid var(--linie);
  background: var(--grund);
  box-shadow: var(--maske-schatten);
  transform: translateX(103%);
  visibility: hidden;
  transition: transform 0.55s var(--kurve), visibility 0s 0.55s;
}

/* Neben der Maske der Agenturblitz „straff“ (Post-it #46, Runde 1 am 14.10.2026: Fassung 1):
   gleiche Breite, Kopf in einer Zeile ohne Knöpfe, Meldeformel und Kacheln kleiner und
   dichter; „Zur Agentur“ als leise Liste ohne Kacheln (aus Fassung 3). */
.maske-offen .blitz {
  width: 24%;
  gap: 0.7rem;
  padding: 1.1rem 1rem 2rem;
}

.maske-offen .aktenknoepfe {
  display: none;
}

.maske-offen .aktenkopf > div:first-child {
  min-width: 0;
}

.maske-offen .blitz h1 {
  overflow: hidden;
  font-size: 1.05rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.maske-offen .meldeformel {
  padding: 0.6rem 0.75rem;
  border-left-width: 0.25rem;
}

.maske-offen .meldeformel h2,
.maske-offen .blitz-abschnitt {
  letter-spacing: 0;
}

.maske-offen .meldeformel p {
  font-size: 1rem;
  line-height: 1.35;
}

.maske-offen .meldeformel p.hinweis {
  font-size: 0.85rem;
}

.maske-offen .blitz-abschnitt {
  margin: 0.8rem 0 0.4rem;
  font-size: 0.68rem;
}

.maske-offen .blitz-zeilen {
  grid-template-columns: 1fr;
  gap: 0.4rem;
}

.maske-offen .blitz-zeile {
  gap: 0.1rem;
  padding: 0.45rem 0.6rem;
}

.maske-offen .blitz-zeile dt {
  font-size: 0.7rem;
}

.maske-offen .blitz-zeile dd {
  font-size: 0.82rem;
  line-height: 1.35;
}

.maske-offen .zur-agentur {
  gap: 0.1rem;
}

.maske-offen .zur-agentur .blitz-zeile {
  padding: 0.3rem 0.1rem;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.maske-offen .zur-agentur .blitz-zeile dd {
  color: var(--blass);
}

.maske-offen .letzte-tickets {
  max-height: 0;
  opacity: 0;
}

.maske-offen .aktenkopf .maske-oeffnen {
  display: none;
}

.maske-offen .maske-teil {
  transform: none;
  visibility: visible;
  transition: transform 0.55s var(--kurve), visibility 0s;
}

/* Ticketmaske */

.maske-inhalt,
.maske {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.maske-kopf {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1.25rem;
  border-bottom: 1px solid var(--linie);
}

.maske-kopf h2 {
  margin: 0;
  font-size: 1.35rem;
}

/* Inbound/Outbound ganz links, der Titel daneben, das Kreuz rechts. */
.maske-kopf .maske-zu {
  margin-left: auto;
}

.maske-kopf .maske-richtung {
  flex: 0 0 15rem;
}

/* Kopf im Raster der Maske (Post-it #16, 08.10.2026): Inbound/Outbound so
   breit wie die Felder der Leiste, der Titel über dem Kundenkasten. */
.maske-kopf.mit-raster {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr) auto;
  gap: 0;
  padding: 0;
}

.maske-kopf.mit-raster .maske-richtung {
  margin: 0.7rem 1rem;
}

.maske-kopf.mit-raster h2 {
  padding: 0.7rem 1.25rem;
}

.maske-kopf.mit-raster .maske-zu {
  margin: 0 1.25rem 0 0;
}

.maske-kopf .maske-richtung label {
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

/* Links die Leiste mit Agenturpartner und Eingangskanal, rechts der Inhalt. */
.maske-raster {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}

.maske-seite {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-height: 0;
  padding: 1.1rem 1rem;
  overflow: hidden auto;
  border-right: 1px solid var(--linie);
  background: var(--flaeche);
}

.maske-seite select {
  width: 100%;
}

.schalter.senkrecht fieldset > div {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.schalter.senkrecht fieldset > div > div + div {
  border-top: 1px solid var(--feldrand);
  border-left: 0;
}

.schalter.senkrecht fieldset label {
  display: block;
  min-height: 0;
  padding: 0.45rem 0.75rem;
  white-space: normal;
}

/* Der Kunde im Kasten. */
.kundenkasten {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-radius: var(--rund-karte);
  background: var(--flaeche);
}

.maske-zeile.drei {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.maske-anliegen textarea {
  min-height: 5rem;
}

.maske-felder select {
  width: 100%;
}

.maske-felder {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.8rem;
  min-height: 0;
  padding: 1.1rem 1.25rem;
  overflow: hidden auto;
}

.maske-zeile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}

/* Drei gleiche Spalten im Kundenkasten (Post-it #21, 08.10.2026): Anrede
   über Telefon, Vorname über E-Mail, Nachname über Versicherungsnummer. */
.maske-zeile.namen {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.maske-zeile.namen .schalter fieldset > div,
.maske-zeile.kundenart .schalter fieldset > div {
  display: flex;
}

.maske-zeile.namen .schalter fieldset > div > div,
.maske-zeile.kundenart .schalter fieldset > div > div {
  flex: 1;
}

.maske-zeile.namen .schalter fieldset label,
.maske-zeile.kundenart .schalter fieldset label {
  display: block;
  text-align: center;
}

/* Kunde oder Interessent und Person oder Firma: zwei Schalter im Dreierraster,
   bündig über Anrede und Vorname (X118, Post-its der Wegwerf-Runde, 02.11.2026).
   Bei einer Firma steht der Firmenname in der Namenszeile über die ganze
   Breite; bei einer Person verschwindet er (ohne Skript, über :has). Ein
   Interessent hat keine Versicherungsnummer. */
.maske-zeile.kundenart {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.maske-zeile.kundenart .schalter fieldset label {
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}

.maske-zeile.namen > .nur-firma {
  grid-column: 1 / -1;
}

form:has(input[name="kundenart"][value="person"]:checked) .nur-firma,
form:has(input[name="kundenart"][value="firma"]:checked) .nur-person,
form:has(input[name="kundenstatus"][value="interessent"]:checked) .nur-kunde {
  display: none;
}

/* Inbound oder Outbound (nur Supervisoren): Die Maske blendet um, ohne
   Skript. Ohne den Schalter ist es immer Inbound. */
.maske-inhalt:has(input[name="richtung"][value="outbound"]:checked) .nur-inbound,
.maske-inhalt:not(:has(input[name="richtung"][value="outbound"]:checked)) .nur-outbound {
  display: none;
}

/* Bei Outbound steht CRM4US oben (Post-it #18, 08.10.2026; vorgewählt in
   akte.js). Die Trennlinien kommen deshalb aus dem Abstand, nicht aus dem
   Rand des zweiten Knopfs. */
.maske-seite .schalter.senkrecht fieldset > div {
  gap: 1px;
  background: var(--feldrand);
}

.maske-seite .schalter.senkrecht fieldset > div > div {
  background: var(--grund);
}

.maske-seite .schalter.senkrecht fieldset > div > div + div {
  border-top: 0;
}

.maske-inhalt:has(input[name="richtung"][value="outbound"]:checked) #id_eingangskanal > div:has(input[value="crm4us"]) {
  order: -1;
}

.maske-bearbeiter select {
  width: 100%;
}

/* Nachricht an ADP: an wen (Post-it #12@demo, X121, 03.11.2026; Wegwerf-Runden 2 bis 7).
   Der Block steht unter dem Bearbeiter und erscheint, sobald die Kategorie gewählt ist:
   Er gleitet von links herein (0,5 s, mit Nachschwingen), dann färben sich Rand und
   Zeilen einmal akzentblau und verblassen (0,8 s). Rolle klein unter dem Namen. */
.maske-empfaenger {
  display: none;
}

.maske-inhalt:not(:has(input[name="richtung"][value="outbound"]:checked)):has(input[name="kategorie"][value="nachricht_an_adp"]:checked) .maske-empfaenger {
  display: block;
  animation: empfaenger-herein 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.maske-empfaenger fieldset > div {
  border-radius: var(--rund-karte);
  outline: 2px solid transparent;
  outline-offset: -1px;
  animation: empfaenger-rand 0.8s ease-out 0.5s 1 both;
}

.maske-seite .maske-empfaenger fieldset > div > div {
  animation: empfaenger-flaeche 0.8s ease-out 0.5s 1 both;
}

.maske-seite .maske-empfaenger fieldset label {
  display: flex;
  flex-direction: column;
  padding: 0.4rem 0.75rem;
}

.maske-empfaenger fieldset label small {
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--blass);
}

.maske-empfaenger fieldset label:has(input:checked) small {
  color: inherit;
  opacity: 0.85;
}

.maske-empfaenger .leer {
  margin: 0;
  color: var(--blass);
}

@keyframes empfaenger-herein {
  from {
    opacity: 0;
    transform: translateX(-1.5rem);
  }
}

@keyframes empfaenger-rand {
  0%, 35% {
    outline-color: var(--akzent);
  }
  100% {
    outline-color: transparent;
  }
}

@keyframes empfaenger-flaeche {
  0%, 30% {
    background: color-mix(in srgb, var(--akzent) 22%, var(--grund));
  }
  100% {
    background: var(--grund);
  }
}

@media (prefers-reduced-motion: reduce) {
  .maske-empfaenger,
  .maske-empfaenger fieldset > div,
  .maske-empfaenger fieldset > div > div {
    animation: none;
  }
}

/* Im Blatt (Zuordnung bearbeiten) gibt es den Empfänger nur bei „Nachricht an ADP“. */
.kartenform.zuordnung:not(:has(select[name="kategorie"] option[value="nachricht_an_adp"]:checked)) .feldzeile:has(select[name="empfaenger"]) {
  display: none;
}

/* Ein Auftrag kommt nicht als AB-Nachricht, ein Kunde nicht über CRM4US. */
.maske-inhalt:has(input[name="richtung"][value="outbound"]:checked) #id_eingangskanal > div:has(input[value="ab_nachricht"]),
.maske-inhalt:not(:has(input[name="richtung"][value="outbound"]:checked)) #id_eingangskanal > div:has(input[value="crm4us"]) {
  display: none;
}

/* Pflichtfelder der Maske (Post-its #49 und #51, 14.10.2026): Sternchen an der Bezeichnung;
   „speichern“ bleibt grau, bis alles ausgefüllt ist (pflicht.js). Telefonnummer und E-Mail
   sind Pflicht je Eingangskanal (X118): data-pflicht-bei nennt die Kanäle, bei Outbound
   zählt nur „outbound“. */
[data-pflicht] > label::after,
[data-pflicht] > fieldset > legend::after,
.maske-inhalt:has(input[name="richtung"][value="outbound"]:checked) [data-pflicht-bei~="outbound"] > label::after,
.maske-inhalt:not(:has(input[name="richtung"][value="outbound"]:checked)):has(input[name="eingangskanal"][value="telefon"]:checked) [data-pflicht-bei~="telefon"] > label::after,
.maske-inhalt:not(:has(input[name="richtung"][value="outbound"]:checked)):has(input[name="eingangskanal"][value="ab_nachricht"]:checked) [data-pflicht-bei~="ab_nachricht"] > label::after,
.maske-inhalt:not(:has(input[name="richtung"][value="outbound"]:checked)):has(input[name="eingangskanal"][value="e_mail"]:checked) [data-pflicht-bei~="e_mail"] > label::after {
  content: " *";
  font-weight: 700;
  color: var(--fehler);
}

.maske-zeile [data-pflicht] > label,
.maske-zeile [data-pflicht-bei] > label {
  white-space: nowrap;
}

.maske-fuss button[data-pflicht-knopf]:disabled {
  border-color: var(--feldrand);
  color: var(--blass);
  background: var(--flaeche);
  box-shadow: none;
  opacity: 1;
}

.maske-zeile > div {
  min-width: 0;
}

/* Fälligkeit (Post-it #22, 08.10.2026; Entwurf „Zwei gleiche Zeilen“):
   oben die Liste als Schalter mit dem Kalender als letztem Knopf (Post-it
   #48, 14.10.2026), darunter „ganztägig“ und die Zeitleiste
   (tickets/_faelligwahl.html, faelligwahl.js). Die sechs Knöpfe sind gleich
   breit, „heute“ und „ganztägig“ stehen bündig untereinander; gewählt wird
   nichts fett, damit nichts springt. */
.maske-faellig {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.faellig-titel {
  font-size: 0.95rem;
  font-weight: 600;
}

html:not(.mit-skript) .nur-skript {
  display: none;
}

.faelligwahl {
  display: flex;
  align-items: stretch;
  gap: 0.9rem;
  padding: 0.7rem 0.75rem 0.8rem;
  border-radius: var(--rund-karte);
  background: var(--flaeche);
}

.fw-zeilen {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.fw-tage {
  position: relative;
  display: flex;
  overflow: hidden;
  border: 1px solid var(--feldrand);
  border-radius: var(--rund);
  background: var(--feldrand);
  gap: 1px;
}

.fw-tage input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.fw-tag {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.25rem 0.15rem;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.15;
  white-space: nowrap;
  background: var(--grund);
  cursor: pointer;
}

.fw-tag span {
  font-size: 0.82rem;
}

.fw-tag small {
  font-size: 0.72rem;
  color: var(--blass);
}

.fw-tag:hover {
  background: var(--zart);
}

.fw-tag:has(input:checked) {
  color: var(--auf-akzent);
  background: var(--akzent);
}

.fw-tag:has(input:checked) small {
  color: var(--auf-akzent);
}

.fw-tag:has(input:focus-visible) {
  outline: 2px solid var(--fokus);
  outline-offset: -4px;
}

.fw-tag:has(input:checked:focus-visible) {
  outline-color: var(--auf-akzent);
}

/* Über der Leiste steht nichts mehr (14.10.2026), daher nur ein kleiner Abstand;
   nichts darin lässt sich beim Ziehen markieren. */
.fw-zeit {
  display: flex;
  align-items: flex-start;
  padding-top: 0.4rem;
  user-select: none;
}

.fw-ganz {
  display: inline-flex;
  /* So breit wie ein Knopf darüber (sechs Knöpfe, fünf Fugen, zwei Ränder) samt Rand; damit es
     auch schmal passt, steht das Symbol über dem Wort wie beim Kalenderknopf (14.10.2026). */
  flex: 0 0 calc((100% - 7px) / 6 + 1px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  min-width: 0;
  height: 2.5rem;
  padding: 0 0.3rem;
  border: 1px solid var(--feldrand);
  border-right: 0;
  border-radius: var(--rund) 0 0 var(--rund);
  font-size: 0.78rem;
  line-height: 1.1;
  font-weight: 400;
  color: var(--text);
  background: var(--grund);
}

.fw-ganz:hover {
  background: var(--zart);
}

.fw-ganz.an,
.fw-ganz.an:hover {
  color: var(--auf-akzent);
  background: var(--akzent);
  border-color: var(--akzent);
}

.fw-ganz .symbol {
  width: 1rem;
  height: 1rem;
}

/* Mit Uhrzeit zeigt der Knopf die Wahl, wie der Kalenderknopf das Datum. */
.fw-ganz.mit-zeit span {
  font-weight: 700;
  white-space: nowrap;
  color: var(--akzent-text);
}

.fw-leiste-ort {
  flex: 1;
  min-width: 0;
}

.fw-leiste {
  position: relative;
  height: 2.5rem;
  border: 1px solid var(--feldrand);
  border-radius: 0 var(--rund) var(--rund) 0;
  background: var(--grund);
  cursor: pointer;
  user-select: none;
  touch-action: none;
}

/* Kein Fokusrahmen und kein Schleier um den Strich nach einem Mausklick: Die Leiste nimmt den
   Fokus per Skript, Chrome hält das für Tastatur und setzt :focus-visible (Chris, 30.10.2026).
   Der Rahmen hängt darum an der Klasse „tastatur“, die nur eine Taste setzt (faelligwahl.js,
   datumwahl.js). */
.fw-leiste:focus,
.fw-leiste:focus-visible {
  outline: none;
}

.fw-leiste.tastatur:focus {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
}

/* Ein Strich je Stunde; an den ungeraden Stunden 9 bis 19 steht die Zahl im Strich. */
.fw-striche {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fw-strich {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
}

.fw-strich::before,
.fw-strich::after {
  position: absolute;
  left: -0.5px;
  width: 1px;
  content: "";
  background: var(--linie);
}

.fw-strich::before {
  top: 0;
  bottom: 0;
}

.fw-strich.mit-zahl::before {
  bottom: auto;
  height: calc(50% - 0.55rem);
}

.fw-strich.mit-zahl::after {
  bottom: 0;
  height: calc(50% - 0.55rem);
}

.fw-strich span {
  position: absolute;
  top: 50%;
  left: 0;
  font-size: 0.72rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--blass);
  transform: translate(-50%, -50%);
}

.fw-vorbei {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background: repeating-linear-gradient(135deg, transparent 0 5px, rgba(127, 127, 127, 0.22) 5px 7px);
  pointer-events: none;
}

.fw-bis {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: color-mix(in srgb, var(--akzent) 22%, transparent);
  pointer-events: none;
}

/* Der Strich bleibt in der Leiste (Chris, 30.10.2026). */
.fw-marke {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--akzent);
  pointer-events: none;
}

.fw-leiste.ohne .fw-bis,
.fw-leiste.ohne .fw-marke {
  display: none;
}

.fw-schatten {
  position: absolute;
  top: 0;
  bottom: 0;
  display: none;
  width: 2px;
  margin-left: -1px;
  background: var(--feldrand);
  opacity: 0.55;
  pointer-events: none;
}

.fw-leiste:hover .fw-schatten {
  display: block;
}

.fw-eingaben {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
}

.fw-eingaben label {
  margin: 0;
}

.fw-eingaben input {
  width: 8rem;
}

/* Der Kalender als letzter Knopf: oben das Symbol, darunter „Datum wählen“ oder das Datum. */
.fw-tag.fw-kalender {
  gap: 0.15rem;
  border: 0;
  border-radius: 0;
  color: var(--text);
  background: var(--grund);
  box-shadow: none;
}

.fw-kalender .symbol {
  width: 1.15rem;
  height: 1.15rem;
}

.fw-tag.fw-kalender:hover {
  color: var(--text);
  background: var(--zart);
}

.fw-tag.fw-kalender:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: -4px;
}

.fw-tag.fw-kalender.an,
.fw-tag.fw-kalender.an small {
  color: var(--auf-akzent);
  background: var(--akzent);
}

.fw-klappe.dw-klappe {
  width: 17rem;
}

.fw-klappe .dw-tag[disabled] {
  cursor: default;
}

.fw-klappe .dw-tag[disabled]:hover {
  background: none;
}

.fw-k-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--linie);
  font-size: 0.8rem;
  color: var(--blass);
}

.fw-k-fuss button {
  padding: 0.15rem 0.5rem;
  border-radius: var(--rund);
  font-size: 0.82rem;
}

.maske-fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 0.7rem 1.25rem;
  border-top: 1px solid var(--linie);
}

.fuss-rechts {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}

.fuss-rechts .uhr {
  margin-right: 0.4rem;
}

/* Nur Inbound: „Ablegen in“ als Pfad, wie im Ticket (08.10.2026). Die Knöpfe
   sind Radio-Knöpfe; die Farbe folgt der gewählten Phase. */
.maske-ablegen {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.7rem;
}

.ablegen-titel {
  color: var(--blass);
  font-size: 0.82rem;
  font-weight: 600;
}

.maske-pfad { --c: var(--ph-offen); }
.maske-pfad:has(input[value="klaerung_ausstehend"]:checked) { --c: var(--ph-klaerung); }
.maske-pfad:has(input[value="umsetzung_pruefen"]:checked) { --c: var(--ph-pruefen); }
.maske-pfad:has(input[value="erledigt"]:checked) { --c: var(--ph-erledigt); }

.maske-pfad input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.maske-pfad .schritt:has(input:checked) {
  color: var(--grund);
  background: var(--c);
}

.maske-pfad .schritt:has(input:focus-visible) {
  outline: 2px solid var(--fokus);
  outline-offset: -3px;
}

.maske-ablegen .fehler {
  flex-basis: 100%;
}

/* Die Warteschlangen über dem Pfad: offen, solange bei „Klären“ noch keine
   gewählt ist (auch ohne Skript), oder wenn akte.js sie zum Ändern öffnet. */
.maske-ablegen .maske-hv {
  top: auto;
  bottom: calc(100% + 0.7rem);
  left: 0;
  display: none;
  transform: none;
}

.maske-ablegen .maske-hv::before {
  top: auto;
  bottom: -0.4rem;
  left: 11rem;
  transform: rotate(225deg);
}

.maske-ablegen:has(input[value="klaerung_ausstehend"]:checked):not(:has(input[name="warteschlange_hv"]:checked)) .maske-hv,
.maske-ablegen.hv-offen .maske-hv {
  display: block;
}

.maske-hv input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.maske-hv .k-liste label {
  display: grid;
  grid-template-columns: 1.9rem 1fr auto 1rem;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.3rem 0.5rem;
  border-radius: 0.5rem;
  font-weight: 400;
  cursor: pointer;
}

.maske-hv .k-liste label:hover,
.maske-hv .k-liste label:has(input:focus-visible) {
  background: var(--zeile-hover);
}

.maske-hv .k-liste label .k-haken {
  visibility: hidden;
}

.maske-hv .k-liste label:has(input:checked) {
  background: var(--klaer-flaeche);
}

.maske-hv .k-liste label:has(input:checked) .k-haken {
  visibility: visible;
}

.maske-hv .k-liste label:has(input:checked) .k-ico,
.maske-hv .k-liste label:hover .k-ico {
  color: var(--ph-klaerung);
  background: var(--klaer-flaeche);
}

.uhr {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: auto;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  color: var(--blass);
}

/* --------------------------------------------------------------- Ticket
   Das Ticket liegt als Blatt über dem Brett, aus dem es geöffnet wurde
   (Entwurf „Ticket als Blatt“, Variante 1, gewählt am 05.10.2026). Links
   schaut das Brett hervor; die Lasche, ein Klick aufs Brett oder Esc führen
   zurück. Rechts im Blatt stehen die Bemerkungen. */

.rahmen {
  --leiste-breite: 13.5rem;
}

.phase-offen { --c: var(--ph-offen); }
.phase-in_bearbeitung { --c: var(--ph-bearbeitung); }
.phase-klaerung_ausstehend { --c: var(--ph-klaerung); }
.phase-umsetzung_pruefen { --c: var(--ph-pruefen); }
.phase-erledigt { --c: var(--ph-erledigt); }
/* Outbound (Post-it #14, 08.10.2026): Inbound und Outbound sehen gleich aus,
   also hat jede Phase eine Farbe; die drei Anrufversuche teilen sich eine. */
.phase-anruf_1,
.phase-anruf_2,
.phase-anruf_3 { --c: var(--ph-anruf); }

.brett-dahinter {
  pointer-events: none;
  user-select: none;
}

.schleier {
  position: fixed;
  inset: 0 0 0 var(--leiste-breite);
  z-index: 10;
  background: rgba(10, 20, 40, 0.38);
}

.blatt {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: calc(var(--leiste-breite) + 4rem);
  z-index: 11;
  background: var(--seite);
  box-shadow: -1.1rem 0 2.5rem rgba(10, 20, 40, 0.25);
}

.blatt.einfahren {
  animation: blatt-rein 0.35s var(--kurve);
}

.blatt.einfahren ~ .schleier,
.einfahren-schleier {
  animation: schleier-rein 0.25s;
}

.blatt.raus {
  animation: blatt-raus 0.25s ease-in forwards;
}

@keyframes blatt-rein {
  from {
    transform: translateX(3.75rem);
    opacity: 0;
  }
}

@keyframes blatt-raus {
  to {
    transform: translateX(5rem);
    opacity: 0;
  }
}

@keyframes schleier-rein {
  from {
    opacity: 0;
  }
}

.lasche {
  position: absolute;
  top: 1.4rem;
  left: -2.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  width: 2.9rem;
  padding: 0.75rem 0 0.7rem;
  border-radius: 0.65rem 0 0 0.65rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--auf-petrol);
  background: var(--petrol);
  box-shadow: -0.4rem 0.25rem 0.9rem rgba(10, 20, 40, 0.2);
  transition: left 0.2s var(--kurve), width 0.2s var(--kurve);
}

.lasche:hover {
  left: -3.4rem;
  width: 3.4rem;
}

.lasche .symbol {
  width: 1.1rem;
  height: 1.1rem;
}

.blatt-raster {
  display: grid;
  /* Bemerkungen wieder 22rem (Post-it #13, 08.10.2026; 32rem vom 07.10. war zu breit).
     Gleich für Inbound und Outbound. */
  grid-template-columns: minmax(0, 1fr) 22rem;
  height: 100%;
}

.blatt-haupt {
  min-width: 0;
  padding: 1.25rem 2rem 3rem;
  overflow-y: auto;
  container-type: inline-size;
}

.blatt-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1rem;
}

.ueberzeile {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--blass);
}

.blatt-karte {
  padding: 1rem 1.25rem;
  border: 1px solid var(--kartenrand);
  border-radius: var(--rund-karte);
  background: var(--grund);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.15);
}

.blatt-karte h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2rem;
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

.stift-knopf {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--blass);
  background: transparent;
  cursor: pointer;
  list-style: none;
}

.stift-knopf::-webkit-details-marker {
  display: none;
}

.stift-knopf:hover {
  color: var(--akzent-text);
  background: var(--zart);
}

.stift-knopf .symbol {
  width: 1rem;
  height: 1rem;
}

/* ---- Der Pfad der Phasen */

.pfad {
  display: flex;
  max-width: 100%;
}

.pfad .schritt {
  --k: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 2.15rem;
  margin-left: -0.35rem;
  padding: 0 1rem 0 calc(var(--k) + 0.7rem);
  border: 0;
  border-radius: 0;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--blass);
  background: var(--zart);
  clip-path: polygon(0 0, calc(100% - var(--k)) 0, 100% 50%, calc(100% - var(--k)) 100%, 0 100%, var(--k) 50%);
  cursor: pointer;
  list-style: none;
  transition: background-color 0.2s, color 0.2s;
}

.pfad .schritt::-webkit-details-marker {
  display: none;
}

.pfad > :first-child.schritt {
  margin-left: 0;
  padding-left: 0.9rem;
  border-radius: 0.4rem 0 0 0.4rem;
  clip-path: polygon(0 0, calc(100% - var(--k)) 0, 100% 50%, calc(100% - var(--k)) 100%, 0 100%);
}

.pfad > :last-child.schritt {
  padding-right: 0.9rem;
  border-radius: 0 0.4rem 0.4rem 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--k) 50%);
}

.pfad .schritt.fertig {
  color: var(--c);
  background: color-mix(in srgb, var(--c) 22%, var(--grund));
}

/* Die aktuelle Phase ist ein gesperrter Knopf, aber nicht blass wie andere gesperrte Knöpfe. */
.pfad .schritt.aktuell {
  color: var(--grund);
  background: var(--c);
  opacity: 1;
  cursor: default;
}

.pfad summary.schritt.aktuell {
  cursor: pointer;
}

.pfad .schritt:not(.aktuell):hover {
  color: var(--text);
  background: color-mix(in srgb, var(--c) 35%, var(--grund));
}

.pfad .schritt .hv {
  font-weight: 500;
}

.pfad .schritt .symbol {
  width: 0.8rem;
  height: 0.8rem;
}

.pfad-klappe {
  position: relative;
  margin-left: -0.35rem;
}

.pfad-klappe .schritt {
  margin-left: 0;
}

/* Die Klappe mit den Warteschlangen hängt unter dem Segment „Klärung“. */
.hv-klappe {
  position: absolute;
  top: calc(100% + 0.65rem);
  left: 50%;
  z-index: 20;
  width: 19.5rem;
  padding: 0.4rem;
  border: 1px solid var(--linie);
  border-radius: 0.75rem;
  background: var(--grund);
  box-shadow: var(--schatten-gross);
  transform: translateX(-50%);
  animation: klappe-auf 0.18s var(--kurve);
}

.hv-klappe::before {
  content: "";
  position: absolute;
  top: -0.4rem;
  left: calc(50% - 0.4rem);
  width: 0.75rem;
  height: 0.75rem;
  border-top: 1px solid var(--linie);
  border-left: 1px solid var(--linie);
  background: var(--grund);
  transform: rotate(45deg);
}

/* Dieselbe Klappe auf dem Brett, neben der Karte, die nach „Klärung“ gezogen wurde. */
.hv-klappe.schwebend {
  position: fixed;
  z-index: 40;
  transform: none;
  animation: schleier-rein 0.15s;
}

.hv-klappe.schwebend::before {
  display: none;
}

@keyframes klappe-auf {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-0.35rem) scale(0.97);
  }
}

.k-kopf {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.35rem;
  padding: 0.55rem 0.6rem 0.65rem;
  border-bottom: 1px solid var(--zart);
}

.k-sym {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 0.55rem;
  color: var(--ph-klaerung);
  background: var(--klaer-flaeche);
}

.k-kopf b {
  display: block;
  font-size: 0.92rem;
  line-height: 1.2;
}

.k-kopf small {
  font-size: 0.78rem;
  color: var(--blass);
}

.k-liste {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.k-liste button {
  display: grid;
  grid-template-columns: 1.9rem 1fr auto 1rem;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.5rem;
  border: 0;
  border-radius: 0.5rem;
  font-weight: 400;
  text-align: left;
  color: var(--text);
  background: transparent;
}

.k-liste button:hover,
.k-liste button:focus-visible {
  outline: 0;
  background: var(--zeile-hover);
}

.k-ico {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 0.5rem;
  color: var(--blass);
  background: var(--flaeche);
  transition: background-color 0.12s, color 0.12s;
}

.k-ico .symbol {
  width: 1.1rem;
  height: 1.1rem;
}

.k-liste button:hover .k-ico,
.k-liste button:focus-visible .k-ico {
  color: var(--ph-klaerung);
  background: var(--klaer-flaeche);
}

.k-name {
  font-size: 0.9rem;
  font-weight: 600;
}

.k-zahl {
  font-size: 0.74rem;
  color: var(--blass);
}

.k-haken {
  font-weight: 700;
  color: var(--ph-klaerung);
}

.k-liste button.an {
  background: var(--klaer-flaeche);
}

.k-liste button.an .k-ico {
  color: var(--grund);
  background: var(--ph-klaerung);
}

/* ---- Kopf mit Kundenname, Kacheln */

.held {
  position: relative;
  overflow: hidden;
  padding-left: 1.5rem;
}

.blatt-karte.held {
  padding-left: 1.6rem;
}

.held::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--c);
}

.held h1 {
  margin: 0.1rem 0 0;
  font-size: 1.75rem;
}

.held-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.held-knoepfe:empty {
  display: none;
}

/* Nach dem Klick auf „E-Mail“: die Agenturadresse liegt in der Zwischenablage (X105). */
.held-knoepfe .kopiert {
  align-self: center;
  padding: 0.05rem 0.55rem;
  border-radius: 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--erfolg);
  background: var(--erfolg-flaeche);
  animation: schleier-rein 0.2s;
}

/* Drei Kacheln: Fälligkeit, Bearbeiter, Zeit (Anlegen und Bearbeiten in einer, 08.10.2026). */
.kacheln {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}

@container (max-width: 55rem) {
  .kacheln {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kacheln .kachel.zeit {
    grid-column: 1 / -1;
  }
}

/* In der Maske heißt die Hülle der Kategorie auch „kacheln“; dort kein Raster
   des Ticketblatts, sonst wird die Kategorie halb so breit (08.10.2026). */
.maske-felder .kacheln {
  display: block;
  margin: 0;
}

.kachel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--zart);
  border-radius: var(--rund-karte);
  background: var(--grund);
  transition: border-color 0.15s;
}

.kachel:hover {
  border-color: var(--linie);
}

.kachel .k-ico {
  --t: var(--blass);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.65rem;
  color: var(--t);
  background: color-mix(in srgb, var(--t) 13%, var(--grund));
}

.kachel .k-ico .symbol {
  width: 1.25rem;
  height: 1.25rem;
}

.kachel.faellig.gut .k-ico,
.kachel.faellig.gut .u {
  --t: var(--erfolg);
}

.kachel.faellig.bald .k-ico,
.kachel.faellig.bald .u {
  --t: var(--ph-klaerung);
}

.kachel.faellig.ueberfaellig .k-ico,
.kachel.faellig.ueberfaellig .u {
  --t: var(--fehler);
}

.kachel.faellig .u {
  font-weight: 600;
  color: var(--t, var(--blass));
}

.kachel.bearbeiter .k-ico {
  --t: var(--akzent-text);
}

.kachel.zeit .k-ico {
  --t: var(--erfolg);
}

.kachelbild {
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 0.65rem;
  font-size: 0.9rem;
  color: var(--auf-akzent);
  background: var(--akzent);
}

.k-text {
  min-width: 0;
}

.kachel .l {
  font-size: 0.75rem;
  color: var(--blass);
}

.kachel .w {
  overflow: hidden;
  font-size: 1.05rem;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.kachel .u {
  font-size: 0.78rem;
  color: var(--blass);
}

.kachel .u .fehler {
  margin-left: 0.3rem;
}

.laeuft {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 600;
  color: var(--erfolg);
}

.laeuft::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--erfolg);
  animation: puls 1.6s infinite;
}

@keyframes puls {
  50% {
    opacity: 0.25;
  }
}

/* Der Stift am Bearbeiter klappt die Auswahl auf (zuweisen.js fragt vor dem Umstellen). */
.kachel-wahl {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
}

.mit-skript .kachel-wahl:not([open]) > .stift-knopf {
  opacity: 0;
}

.kachel:hover .kachel-wahl > .stift-knopf,
.kachel-wahl > .stift-knopf:focus-visible {
  opacity: 1;
}

.wahl-klappe {
  position: absolute;
  top: calc(100% + 0.3rem);
  right: 0;
  z-index: 20;
  width: 18rem;
  padding: 0.8rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-karte);
  background: var(--grund);
  box-shadow: var(--schatten-gross);
}

.wahl-klappe form {
  display: grid;
  gap: 0.5rem;
}

.wahl-klappe p {
  margin: 0;
}

/* ---- Karten: links Zuordnung und Kunde, rechts das Anliegen */

.blatt-karten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 1rem;
}

.blatt-karten .anliegen,
.blatt-karten .rechts {
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* Neben dem Anliegen ist die Spalte schmal: die Beschriftung über den Wert. */
@container (max-width: 50rem) {
  .blatt-karten .zeile:not(.block) {
    grid-template-columns: minmax(0, 1fr) 1.25rem;
    row-gap: 0;
  }

  .blatt-karten .zeile:not(.block) .l {
    grid-column: 1 / -1;
    font-size: 0.75rem;
  }
}

@container (max-width: 26rem) {
  .kacheln {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container (max-width: 38rem) {
  .blatt-karten {
    grid-template-columns: minmax(0, 1fr);
  }

  .blatt-karten .anliegen,
  .blatt-karten .rechts {
    grid-column: auto;
    grid-row: auto;
  }
}

.zeilen {
  display: flex;
  flex-direction: column;
  margin: 0 -0.6rem;
}

.zeile {
  position: relative;
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) 1.25rem;
  align-items: center;
  gap: 0.6rem;
  padding: 0.38rem 0.6rem;
  border-radius: 0.4rem;
  transition: background-color 0.12s;
}

.zeile .l {
  font-size: 0.85rem;
  color: var(--blass);
}

.zeile .w {
  min-width: 0;
  overflow-wrap: break-word;
}

.zeile .w.stark {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.zeile .zusatz,
.zeile .leer {
  color: var(--blass);
}

.zeile .ki {
  display: grid;
  place-items: center;
  color: var(--blass);
  opacity: 0;
  transition: opacity 0.12s;
}

.zeile .ki .symbol {
  width: 1rem;
  height: 1rem;
}

.mit-skript .zeile[data-kopie] {
  cursor: copy;
}

.mit-skript .zeile[data-kopie]:hover {
  background: var(--zeile-hover);
}

.mit-skript .zeile[data-kopie]:hover .ki {
  color: var(--akzent-text);
  opacity: 1;
}

.zeile.block {
  grid-template-columns: minmax(0, 1fr) 1.25rem;
  align-items: start;
  padding: 0.5rem 0.6rem;
  font-size: 1.02rem;
  line-height: 1.6;
  white-space: pre-wrap;
}

.zeile.block .ki {
  padding-top: 0.25rem;
}

.zeile .kopiert {
  position: absolute;
  top: 50%;
  right: 0.6rem;
  padding: 0.05rem 0.55rem;
  border-radius: 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--erfolg);
  background: var(--erfolg-flaeche);
  transform: translateY(-50%);
  animation: schleier-rein 0.2s;
}

.zeile.block .kopiert {
  top: 0.9rem;
}

.zeile:has(.kopiert) .ki {
  visibility: hidden;
}

.kartenform {
  display: grid;
  gap: 0.6rem;
}

.kartenform.kunde {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kartenform .feldzeile label {
  font-size: 0.8rem;
  color: var(--blass);
}

.kartenform .knopfreihe {
  grid-column: 1 / -1;
  justify-content: flex-end;
  margin: 0.3rem 0 0;
}

.kartenform.anliegen textarea {
  min-height: 14rem;
}

.kartenform .fehler {
  display: block;
  font-size: 0.85rem;
}

/* ---- Bemerkungen */

.bemerkungsleiste {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--linie);
  background: var(--grund);
}

.leisten-kopf {
  padding: 1rem 1.1rem 0.6rem;
  border-bottom: 1px solid var(--zart);
}

.leisten-kopf h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1.05rem;
}

.zaehler {
  padding: 0.05rem 0.45rem;
  border-radius: 1rem;
  font-family: var(--schrift);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--blass);
  background: var(--flaeche);
}

.strom {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 0.9rem 1.1rem;
  overflow-y: auto;
}

.strom .keine {
  margin: 0;
}

.faden {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.antworten {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-left: 2.2rem;
  padding-left: 0.8rem;
  border-left: 2px solid var(--zart);
}

.antworten > .eingabekarte {
  align-self: stretch;
  margin: 0;
}

.antworten-knopf {
  padding: 0;
  border: 0;
  font-size: 0.78rem;
  color: var(--akzent-text);
  background: none;
}

.antworten-knopf:hover {
  text-decoration: underline;
  background: none;
}

.bemerkung {
  display: flex;
  gap: 0.6rem;
  border-radius: var(--rund);
}

.bemerkung:target,
.bemerkung.neu {
  animation: bemerkung-neu 1.6s;
}

@keyframes bemerkung-neu {
  from {
    background: var(--erwaehnung);
  }
}

.bemerkungsbild {
  width: 1.75rem;
  height: 1.75rem;
  border-color: var(--linie);
  font-size: 0.68rem;
  color: var(--akzent-text);
  background: var(--zart);
}

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

.bem-kopf b {
  font-size: 0.9rem;
}

.bem-kopf time {
  font-size: 0.75rem;
  color: var(--blass);
}

.bem-text {
  margin-top: 0.1rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.erwaehnung {
  padding: 0 0.2rem;
  border-radius: 3px;
  font-weight: 600;
  color: var(--akzent-text);
  background: var(--erwaehnung);
}

/* Die Eingabe: eine Karte. Mit Skript liegt der Text sichtbar in einem
   Spiegel hinter dem durchsichtigen Feld, damit erwähnte Kollegen schon beim
   Tippen markiert sind. Die Markierung ändert deshalb nie die Breite. */
.eingabekarte {
  margin: 0.75rem 1.1rem 1rem;
  border: 1px solid var(--linie);
  border-radius: 0.65rem;
  background: var(--grund);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.eingabekarte:focus-within {
  border-color: var(--akzent-text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent-text) 16%, transparent);
}

.eingabe-feld {
  position: relative;
}

.eingabe-feld textarea,
.eingabe-feld .spiegel {
  margin: 0;
  padding: 0.65rem 0.8rem 0.55rem;
  border: 0;
  font: inherit;
  line-height: 1.5;
  letter-spacing: normal;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.eingabe-feld textarea {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 3.1rem;
  max-height: 10rem;
  resize: none;
  background: transparent;
  scrollbar-width: none;
}

.eingabe-feld textarea:focus-visible {
  outline: 0;
}

.eingabe-feld .spiegel {
  display: none;
}

.mit-skript .eingabe-feld textarea {
  color: transparent;
  caret-color: var(--text);
}

.mit-skript .eingabe-feld textarea::selection {
  color: transparent;
  background: color-mix(in srgb, var(--akzent-text) 30%, transparent);
}

.mit-skript .eingabe-feld .spiegel {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  color: var(--text);
  pointer-events: none;
}

.spiegel .markiert {
  border-radius: 3px;
  color: var(--akzent-text);
  background: var(--erwaehnung);
  box-shadow: 0 0 0 2px var(--erwaehnung);
}

.eingabe-fuss {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.5rem 0.4rem 0.4rem;
  border-top: 1px solid var(--zart);
}

.eingabe-fuss .geist {
  padding: 0.3rem 0.5rem;
  border: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--akzent-text);
  background: transparent;
}

.eingabe-fuss .geist:hover {
  background: var(--zart);
}

.eingabe-fuss [data-at] {
  display: none;
}

.mit-skript .eingabe-fuss [data-at] {
  display: inline-flex;
}

.eingabe-fuss .senden {
  margin-left: auto;
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
}

.eingabe-fuss .senden .symbol {
  width: 0.95rem;
  height: 0.95rem;
}

.eingabe-fuss .senden:disabled {
  opacity: 0.4;
  cursor: default;
}

.erwaehnen-liste {
  position: absolute;
  right: -0.5rem;
  bottom: calc(100% + 0.6rem);
  left: -0.5rem;
  z-index: 25;
  max-height: 15rem;
  padding: 0.3rem;
  overflow-y: auto;
  border: 1px solid var(--linie);
  border-radius: var(--rund-karte);
  background: var(--grund);
  box-shadow: var(--schatten-gross);
}

.erwaehnen-liste .titel {
  padding: 0.2rem 0.5rem;
  font-size: 0.72rem;
  color: var(--blass);
}

.erwaehnen-liste button {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 0;
  border-radius: 0.4rem;
  font-weight: 400;
  text-align: left;
  color: var(--text);
  background: transparent;
}

.erwaehnen-liste button.an,
.erwaehnen-liste button:hover {
  background: var(--flaeche);
}

.erwaehnen-liste .plakette {
  flex: none;
}

.erwaehnen-liste small {
  margin-left: auto;
  color: var(--blass);
}

/* ---- Glocke in der Leiste: Erwähnungen */

.glocke {
  position: relative;
  align-self: stretch;
}

.glocke > summary {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--rund);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

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

.glocke > summary:hover,
.glocke[open] > summary {
  background: var(--leiste-aktiv);
}

/* „Anruf simulieren“ (nur Vorschau und Demo): Klappe wie die Glocke. */
.anruf-klappe {
  position: relative;
  align-self: stretch;
}

.anruf-klappe > summary {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--rund);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

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

.anruf-klappe > summary:hover,
.anruf-klappe[open] > summary {
  background: var(--leiste-aktiv);
}

.anruf-wahl {
  position: fixed;
  bottom: 7rem;
  left: calc(var(--leiste-breite) + 0.5rem);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 19rem;
  padding: 0.8rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-karte);
  font-size: 0.9rem;
  color: var(--text);
  background: var(--grund);
  box-shadow: var(--schatten-gross);
}

.leiste .anruf-wahl label {
  font-weight: 700;
  color: var(--text);
}

.leiste .anruf-wahl select {
  color: var(--text);
  background-color: var(--grund);
}

.leiste .anruf-wahl button {
  justify-content: center;
  width: auto;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--akzent);
  color: var(--auf-akzent);
  background: var(--akzent);
}

/* Das Band in der Akte, solange ein Anruf der Agentur gilt. */
.anrufband {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--rund-karte);
  color: var(--auf-akzent);
  background: var(--akzent);
}

.anrufband > .symbol {
  width: 1.4rem;
  height: 1.4rem;
}

.anrufband-text {
  display: flex;
  flex: 1 1 8rem;
  flex-direction: column;
  min-width: 0;
}

.anrufband-text b {
  font-size: 1rem;
}

.anrufband form {
  margin: 0;
}

.anrufband .geist {
  color: var(--auf-akzent);
  border-color: transparent;
  background: transparent;
}

/* Mit offener Maske ist man schon beim Anlegen (Post-it #59, 14.10.2026). */
.akte.maske-offen .anrufband .maske-oeffnen,
.akte.maske-offen .aktenknoepfe .maske-oeffnen {
  display: none;
}

/* Rechte in der Nutzerverwaltung: Schalter, die wie Häkchen aussehen. */
.rechte {
  display: flex;
  gap: 0.9rem;
  margin: 0;
}

.recht {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 0;
  padding: 0.15rem 0;
  border: 0;
  font-weight: 400;
  color: var(--text);
  background: transparent;
  box-shadow: none;
}

.recht .kasten {
  display: inline-grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  border: 1.5px solid var(--feldrand);
  border-radius: 3px;
  background: var(--grund);
}

.recht .kasten .symbol {
  width: 0.8rem;
  height: 0.8rem;
  visibility: hidden;
}

.recht.an .kasten {
  border-color: var(--akzent);
  color: var(--auf-akzent);
  background: var(--akzent);
}

.recht.an .kasten .symbol {
  visibility: visible;
}

/* Der Schalter ist ein Button; die allgemeine Regel button:hover würde ihn
   beim Überfahren dunkel füllen (Post-it #21 auf zai-demo, 15.10.2026).
   Stattdessen hebt sich nur der Kasten ab. */
.recht:hover {
  background: transparent;
}

.recht:not(:disabled):hover .kasten {
  border-color: var(--akzent);
}

.recht:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Neu für mich (Post-it #16 auf zai-demo, X92): ein Punkt am Symbol von
   Inbound und Outbound, solange dort ungelesene Zuweisungen an mich liegen.
   Ohne Zahl; die Einzelheiten stehen als Meldung in der Glocke. */
.leiste nav a {
  position: relative;
}

.neu-punkt {
  position: absolute;
  top: 0.4rem;
  left: 1.65rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--petrol);
  box-shadow: 0 0 0 2px var(--leiste);
}

.leiste nav a[aria-current="page"] .neu-punkt {
  box-shadow: 0 0 0 2px var(--leiste-aktiv);
}

.neu-punkt[hidden] {
  display: none;
}

/* Live-Abfrage (X93, Fassung 5): Beim Speichern einer Karte hat jemand
   anderes dasselbe Feld inzwischen anders geändert. Die Karte bleibt offen,
   beide Werte stehen da, die Person entscheidet. */
.live-konflikt {
  margin: 0.6rem 0 0;
  padding: 0.5rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--fehler) 50%, transparent);
  border-radius: var(--rund);
  background: var(--fehler-flaeche);
  font-size: 0.85rem;
  line-height: 1.45;
}

.live-konflikt b {
  display: block;
  margin-bottom: 0.2rem;
}

.live-konflikt ul {
  margin: 0 0 0.4rem;
  padding-left: 1.1rem;
}

.live-konflikt .knopfreihe {
  margin-top: 0.4rem;
}

.glocken-zahl {
  min-width: 1.2rem;
  margin-left: auto;
  padding: 0 0.35rem;
  border-radius: 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  color: #ffffff;
  background: var(--fehler);
}

.glocken-zahl[hidden] {
  display: none;
}

.glocken-liste {
  position: fixed;
  bottom: 4.5rem;
  left: calc(var(--leiste-breite) + 0.5rem);
  z-index: 30;
  width: 21rem;
  max-height: 70vh;
  padding: 0.4rem;
  overflow-y: auto;
  border: 1px solid var(--linie);
  border-radius: var(--rund-karte);
  font-size: 0.9rem;
  color: var(--text);
  background: var(--grund);
  box-shadow: var(--schatten-gross);
}

.glocken-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0.5rem 0.5rem;
}

.glocken-kopf .geist {
  padding: 0.2rem 0.5rem;
  border: 0;
  font-size: 0.8rem;
  color: var(--akzent-text);
  background: transparent;
}

/* Nicht das dunkle Hover der Leiste: Die Liste ist hell (Post-it #64, 14.10.2026). */
.glocken-kopf .geist:hover {
  background: var(--zart);
}

.glocken-liste .hinweis {
  margin: 0.25rem 0.5rem 0.5rem;
}

.meldung-eintrag {
  display: flex;
  gap: 0.6rem;
  padding: 0.5rem;
  border-radius: 0.4rem;
  text-decoration: none;
  color: inherit;
}

.meldung-eintrag:hover {
  background: var(--flaeche);
}

.meldung-eintrag.neu {
  background: var(--erwaehnung);
}

.meldung-eintrag small {
  display: block;
  color: var(--blass);
}

/* „Heute fällig“ und „Überfällig“ (X70) haben statt des Gesichts ein Symbol. */
.meldung-symbol {
  flex: none;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--linie);
  border-radius: 50%;
}

.meldung-symbol .symbol {
  width: 1rem;
  height: 1rem;
}

.meldung-eintrag.ueberfaellig .meldung-symbol {
  color: var(--fehler);
  background: var(--fehler-flaeche);
}

@media (min-width: 56.01rem) {
  .leiste-schmal {
    --leiste-breite: 4.25rem;
  }

  .leiste-schmal .glocke > summary {
    justify-content: center;
    padding-right: 0;
    padding-left: 0;
  }

  .leiste-schmal .glocken-zahl {
    position: absolute;
    top: 0.1rem;
    right: 0.2rem;
    margin: 0;
  }

  /* Post-it-Eintrag und „Anruf simulieren“ wie die Glocke: Zahl als Plakette
     oben rechts, Symbol mittig. Fehlte; auf dem Foto von Ike und Chris
     (15.10.2026) schob die Zahl das Symbol nach links. */
  .leiste-schmal .postit-zahl {
    position: absolute;
    top: 0.1rem;
    right: 0.2rem;
    margin: 0;
  }

  .leiste-schmal .anruf-klappe > summary {
    justify-content: center;
    padding-right: 0;
    padding-left: 0;
  }

  .leiste-schmal .neu-punkt {
    top: 0.35rem;
    right: 0.5rem;
    left: auto;
  }
}

/* Schmale Fenster: Das Blatt ist die Seite, das Brett bleibt weg. */
@media (max-width: 56rem) {
  .brett-dahinter,
  .schleier {
    display: none;
  }

  .blatt {
    position: static;
    box-shadow: none;
  }

  .blatt-raster {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }

  .pfad {
    overflow-x: auto;
  }

  .hv-klappe {
    position: fixed;
    top: auto;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    width: auto;
    transform: none;
    animation: none;
  }

  .hv-klappe::before {
    display: none;
  }

  .lasche {
    position: static;
    flex-direction: row;
    width: auto;
    margin: 0 0 0.75rem;
    padding: 0.4rem 0.8rem;
    border-radius: var(--rund);
    box-shadow: none;
  }

  .lasche:hover {
    width: auto;
  }

  .blatt-haupt {
    padding: 0;
    overflow: visible;
  }

  .bemerkungsleiste {
    margin-top: 1rem;
    border: 1px solid var(--linie);
    border-radius: var(--rund-karte);
  }

  .glocken-liste {
    position: absolute;
    top: calc(100% + 0.4rem);
    bottom: auto;
    left: auto;
    right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blatt.einfahren,
  .blatt.raus,
  .hv-klappe {
    animation: none;
  }
}

/* --------------------------------------------------------------- Kanban */

.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1rem 0 0.9rem;
}

.filter a,
.filter strong {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 1rem;
  border-radius: 12.5rem;
  font-weight: 500;
  text-decoration: none;
}

.filter a {
  color: var(--akzent-text);
  background: var(--zart);
}

.filter a:hover {
  background: var(--linie);
}

.filter strong {
  font-weight: 600;
  color: var(--auf-akzent);
  background: var(--akzent);
}

.anzahl {
  font-weight: 400;
  color: var(--blass);
}

/* In der Filterzeile sagt die Zahl, wo noch jemand hinsehen muss. */
.filter .anzahl {
  min-width: 1.4rem;
  padding: 0 0.4rem;
  border-radius: 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
  color: var(--fehler);
  background: var(--fehler-flaeche);
}

.filter .anzahl.null {
  color: var(--blass);
  background: var(--grund);
}

/* -------------------------------------------------------------- Filter
   Die Kundensuche steht als Knopf „Suchen“ neben „Filter“ und klappt zum
   Feld auf. Die übrigen Filter liegen in einer Spalte rechts neben dem
   Brett, die der Knopf „Filter“ ein- und ausblendet; ohne Auswahl ist sie zu. */

.suche {
  display: flex;
  flex: 0 1 auto;
}

.suche.offen {
  flex-basis: 18rem;
}

.suche + .filterknopf {
  margin-left: 0;
}

.suche-knopf {
  padding: 0.3rem 0.9rem;
}

.suche-knopf .symbol {
  width: 1.05rem;
  height: 1.05rem;
}

.suche .kundensuche {
  display: none;
  flex: 1 1 auto;
}

.suche.offen .kundensuche {
  display: block;
}

.suche.offen .suche-knopf {
  display: none;
}

.suchfeld {
  position: relative;
  display: block;
  margin: 0;
}

.suchfeld .symbol {
  position: absolute;
  top: 50%;
  left: 0.7rem;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--blass);
  transform: translateY(-50%);
  pointer-events: none;
}

.suchfeld input {
  padding-left: 2.2rem;
}

/* Überschrift links, Suche und Filter rechts, in einer Zeile. */
.brettkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  min-height: 2.6rem;
  margin: 0 0 0.9rem;
}

/* Rechts neben der Überschrift; wird es eng, darunter links. */
.brettkopf h1 {
  margin: 0 auto 0 0;
}

.brettkopf .filter {
  margin: 0;
}

.filterknopf {
  margin-left: auto;
  padding: 0.3rem 0.9rem;
}

.filterknopf .symbol {
  width: 1.05rem;
  height: 1.05rem;
}

.filterknopf[aria-expanded="true"] {
  background: var(--zart);
}

.punkt {
  min-width: 1.2rem;
  padding: 0 0.35rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: var(--auf-akzent);
  background: var(--akzent);
}

.brett-und-filter {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.filterspalte {
  display: none;
}

.panel-offen .brett-und-filter {
  grid-template-columns: minmax(0, 1fr) 14rem;
}

.panel-offen .brett {
  grid-template-columns: repeat(4, minmax(8.5rem, 1fr));
  gap: 0.5rem;
}

.panel-offen .filterspalte {
  position: sticky;
  top: 1rem;
  display: block;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 0.3rem 0.8rem 0.8rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-karte);
  background: var(--grund);
}

.filterspalte details {
  border-bottom: 1px solid var(--linie);
}

.filterspalte summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

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

.filterspalte summary::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  margin-left: auto;
  border: solid var(--blass);
  border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s;
}

.filterspalte details[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.wertliste {
  margin: 0;
  padding: 0 0 0.4rem;
  list-style: none;
}

.wertliste label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.25rem 0.3rem;
  border-radius: var(--rund);
  font-size: 0.875rem;
  font-weight: 400;
  cursor: pointer;
}

.wertliste label:hover {
  background: var(--zart);
}

.wertliste label.null {
  color: var(--blass);
}

.wertliste .titel {
  min-width: 0;
  overflow-wrap: anywhere;
}

.wertliste .zahl {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--blass);
  font-variant-numeric: tabular-nums;
}

/* Eigene Häkchen und Punkte statt der des Browsers. */
.wertliste input {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  border: 1.5px solid var(--feldrand);
  border-radius: 3px;
  background: var(--grund);
  appearance: none;
  cursor: pointer;
}

.wertliste input[type="radio"] {
  border-radius: 50%;
}

.wertliste input:checked {
  border-color: var(--akzent);
  background: var(--akzent);
}

.wertliste input[type="checkbox"]:checked::before {
  content: "";
  width: 0.3rem;
  height: 0.55rem;
  border: solid var(--auf-akzent);
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}

.wertliste input[type="radio"]:checked::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--auf-akzent);
}

.filterfuss {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  font-size: 0.85rem;
}

.filterfuss .hinweis {
  font-size: 0.8rem;
}

.brett {
  display: grid;
  grid-template-columns: repeat(4, minmax(11rem, 1fr));
  gap: 0.75rem;
  overflow-x: auto;
}

/* Die ganze Spalte ist Ablagefläche: Die Karten liegen direkt in ihr. */
.spalte {
  display: flex;
  flex-direction: column;
  min-height: 9rem;
  padding: 0.6rem;
  border-radius: var(--rund-karte);
  background: var(--flaeche);
}

.spalte h2 {
  display: flex;
  justify-content: space-between;
  margin: 0 0 0.6rem;
  font-family: var(--schrift);
  font-size: 0.95rem;
}

.ticketkarte {
  position: relative;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.7rem;
  cursor: grab;
}

.ticketkarte a {
  font-weight: 600;
  text-decoration: none;
}

/* Die ganze Karte öffnet das Ticket, nicht nur der Name: Der Link wird über
   die Karte gespannt. Ziehen geht weiter, weil SortableJS Links beim Ziehen
   übergeht und die Karte nimmt. */
.ticketkarte a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ticketkarte:hover {
  outline: 1px solid var(--akzent-text);
}

/* Auch Fußband, Marken und Kanal öffnen die Karte (karte.js, Post-it #34). */
.ticketkarte .fussband,
.ticketkarte .karte-marke,
.ticketkarte .karte-kanal,
.ticketkarte .kollegen {
  cursor: pointer;
}

/* Beim Ziehen hängt die Karte am Mauszeiger. Die Karte selbst (SortableJS:
   sortable-ghost) bleibt unsichtbar und ohne Höhe im Brett, so steht nie ein
   zweites Ticket da und nichts rückt hin und her. Liegt sie in einer anderen
   Spalte als der, aus der sie kommt, ist diese Spalte das Ziel und wird
   hervorgehoben. */
.ticketkarte.sortable-ghost {
  height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  visibility: hidden;
}

.spalte:not(.herkunft):has(.sortable-ghost) {
  outline: 2px dashed var(--akzent-text);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--akzent-text) 10%, var(--flaeche));
}

.seitenkopf + .meldung {
  margin-top: 0.75rem;
}

.ticketkarte .hinweis {
  font-size: 0.8rem;
}

/* ------------------------------------------------------------ Zuweisen
   Die Plakette unten rechts auf der Karte trägt das Kürzel des Bearbeiters;
   ein gestrichelter Kreis heißt „niemand“. Ein Klick öffnet das
   Auswahlfeld (zuweisen.js). Sie liegt über dem Link, der die Karte spannt. */

.kartenfuss {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.2rem;
}

/* In schmalen Spalten kürzt die Kategorie, die Plakette bleibt in der Karte. */
.kartenfuss .hinweis {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plakette {
  position: relative;
  z-index: 1;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--akzent-text);
  background: var(--zart);
  cursor: pointer;
}

.plakette:hover {
  background: var(--linie);
}

.plakette.ich {
  border-color: var(--akzent);
  color: var(--auf-akzent);
  background: var(--akzent);
}

.plakette.ich:hover {
  background: var(--akzent-tief);
}

.plakette.niemand {
  border: 1.5px dashed var(--feldrand);
  font-size: 1rem;
  font-weight: 400;
  color: var(--blass);
  background: transparent;
}

.plakette.klein {
  width: 1.6rem;
  height: 1.6rem;
  font-size: 0.66rem;
}

span.plakette {
  cursor: inherit;
}

.waehler {
  position: fixed;
  z-index: 20;
  width: 17rem;
  padding: 0.35rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-karte);
  background: var(--grund);
  box-shadow: var(--schatten-gross);
}

.waehler input {
  width: 100%;
  min-height: 2.2rem;
  margin-bottom: 0.3rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--feldrand);
  border-radius: var(--rund);
  color: var(--text);
  background: var(--grund);
}

.waehler ul {
  max-height: 19rem;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.waehler li button {
  width: 100%;
  justify-content: flex-start;
  gap: 0.6rem;
  padding: 0.35rem 0.5rem;
  font-weight: 400;
  color: var(--text);
  background: transparent;
}

.waehler li button:hover,
.waehler li button.aktiv {
  background: var(--zart);
}

.waehler li button[aria-checked="true"] {
  font-weight: 600;
}

.waehler li button[aria-checked="true"]::after {
  content: "✓";
  margin-left: auto;
  color: var(--akzent-text);
}

.waehler .last {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--blass);
}

.waehler li button[aria-checked="true"] .last {
  margin-left: 0.3rem;
}

.waehler .trenner {
  height: 1px;
  margin: 0.3rem 0;
  background: var(--linie);
}

.waehler .leer {
  padding: 0.4rem 0.5rem;
}

/* Die Rückfrage vor dem Umstellen. */
dialog.rueckfrage {
  max-width: 28rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--kartenrand);
  border-radius: var(--rund-karte);
  color: var(--text);
  background: var(--grund);
  box-shadow: var(--schatten-gross);
}

dialog.rueckfrage::backdrop {
  background: rgba(10, 20, 40, 0.35);
}

dialog.rueckfrage h2 {
  margin: 0 0 0.5rem;
}

/* Die E-Mail an die Agentur beim Erledigen (X117): der Entwurf im Dialog. */
dialog.mailfrage {
  width: min(40rem, 94vw);
  max-width: none;
}

dialog.mailfrage p {
  margin: 0 0 0.9rem;
  color: var(--blass);
}

.mf-entwurf {
  border: 1px solid var(--linie);
  border-radius: var(--rund-karte);
  font-size: 0.88rem;
  background: var(--flaeche);
}

.mf-entwurf dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.8rem;
  margin: 0;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--linie);
}

.mf-entwurf dt {
  color: var(--blass);
}

.mf-entwurf dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.mf-entwurf pre {
  max-height: 11rem;
  margin: 0;
  padding: 0.6rem 0.8rem;
  overflow: auto;
  font: inherit;
  white-space: pre-wrap;
  color: var(--text);
}

dialog.mailfrage .knopfreihe {
  flex-wrap: wrap;
}

.knopfreihe {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
}

.bearbeiterform,
.rueckfrage-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.rueckfrage-zeile span {
  flex-basis: 100%;
}

.bearbeiterform select {
  flex: 0 1 20rem;
  width: auto;
}

.meldung.fehler {
  margin-bottom: 0.75rem;
  color: var(--fehler);
  background: var(--fehler-flaeche);
}

/* -------------------------------------------- Einstellungen, Demo, Probe */

.einstellungen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  max-width: 38rem;
  padding: 1.1rem 1.25rem;
}

.einstellungen p {
  margin: 0;
}

.einstellungen + .einstellungen {
  margin-top: 1rem;
}

.einstellungen h2 {
  margin: 0;
  font-size: 1.05rem;
}

/* ------------------------------------------------- Benutzermenü
   Variante 2 der Entwürfe vom 05.10.2026: Name und Adresse, darunter Hell,
   Dunkel, System, dann Benutzereinstellungen und Abmelden. Die Lage setzt
   benutzermenue.js. */

.benutzermenue {
  position: fixed;
  z-index: 30;
  width: 19.5rem;
  padding: 0.4rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-karte);
  font-size: 0.92rem;
  color: var(--text);
  background: var(--grund);
  box-shadow: var(--schatten-gross);
}

.benutzermenue[hidden] {
  display: none;
}

.menue-kopf {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.6rem 0.65rem;
  border-bottom: 1px solid var(--linie);
}

.menue-kopf div {
  min-width: 0;
}

.menue-kopf b,
.menue-kopf small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menue-kopf small {
  color: var(--blass);
}

.benutzermenue .darstellung-wahl {
  padding: 0.5rem 0.6rem 0.65rem;
  border-bottom: 1px solid var(--linie);
}

.darstellung-wahl fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.benutzermenue legend {
  margin-bottom: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--blass);
}

.benutzermenue .eintrag {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  justify-content: flex-start;
  width: 100%;
  margin-top: 0.2rem;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: var(--rund);
  font-weight: 400;
  text-align: left;
  text-decoration: none;
  color: inherit;
  background: transparent;
}

.benutzermenue .eintrag:hover {
  background: var(--zart);
}

.benutzermenue .eintrag .symbol {
  width: 1rem;
  height: 1rem;
}

.benutzermenue .abmelden {
  color: var(--fehler);
}

/* Ohne Skript gibt es Knöpfe zum Speichern; mit Skript gilt die Wahl sofort. */
.mit-skript .ohne-skript {
  display: none;
}

.darstellung-wahl .ohne-skript {
  margin-top: 0.5rem;
}

.segment {
  display: flex;
  gap: 0.15rem;
  padding: 0.2rem;
  border-radius: calc(var(--rund) + 2px);
  background: var(--zart);
}

.segment label {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 0;
  margin: 0;
  padding: 0.35rem 0.4rem;
  border-radius: var(--rund);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--blass);
  cursor: pointer;
}

.segment .symbol {
  width: 1rem;
  height: 1rem;
}

.segment input,
.kacheln-darstellung input,
.datei-feld {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.segment label:has(input:checked) {
  color: var(--text);
  background: var(--grund);
  box-shadow: var(--schatten);
  outline: 1px solid var(--kartenrand);
}

.segment label:has(input:focus-visible),
.kacheln-darstellung label:has(input:focus-visible),
label:has(.datei-feld:focus-visible) {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
}

/* ------------------------------------------------- Benutzereinstellungen
   Variante 5 der Entwürfe: links die drei Teile, rechts der gewählte. */

.konto {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  max-width: 56rem;
}

.konto-nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.konto-nav a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--rund);
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
}

.konto-nav .symbol {
  width: 1rem;
  height: 1rem;
}

.konto-nav a:hover {
  background: var(--zart);
}

.konto-nav a[aria-current="page"] {
  color: var(--akzent-text);
  background: var(--zart);
  box-shadow: inset 0.22rem 0 0 var(--akzent-text);
}

.konto-teil h2 {
  margin: 0 0 0.25rem;
}

.konto-teil > .hinweis {
  margin: 0 0 1.25rem;
}

.konto-teil > .meldung {
  margin-bottom: 1rem;
}

.bildzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

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

.bildzeile .hinweis {
  margin: 0.4rem 0 0;
}

/* Der Knopf zum Wählen ist ein Label um das Dateifeld; er sieht aus wie
   „Entfernen“ daneben. */
.bild-hochladen .knopf {
  position: relative;
  margin: 0;
  font-size: 1rem;
  cursor: pointer;
}

.ablage {
  display: grid;
  place-items: center;
  gap: 0.3rem;
  max-width: 32rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 2px dashed var(--linie);
  border-radius: var(--rund-karte);
  font-size: 0.9rem;
  text-align: center;
  color: var(--blass);
  cursor: pointer;
}

.ablage[hidden] {
  display: none;
}

.ablage.darueber {
  border-color: var(--akzent-text);
  background: var(--zart);
}

.kacheln-darstellung {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 10rem));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  border: 0;
}

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

.kacheln-darstellung label {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.5rem;
  border: 2px solid var(--linie);
  border-radius: var(--rund-karte);
  font-weight: 600;
  cursor: pointer;
}

.kacheln-darstellung label:has(input:checked) {
  border-color: var(--akzent-text);
}

.kacheln-darstellung small {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--blass);
}

/* Kleine Bilder von Leiste und Karten, fest in den Farben des jeweiligen
   Modus, damit man vor dem Wählen sieht, wie es aussieht. */
.vorschau {
  position: relative;
  display: grid;
  grid-template-columns: 22% 1fr;
  height: 4.5rem;
  overflow: hidden;
  border: 1px solid var(--linie);
  border-radius: var(--rund);
}

.vorschau i:first-child {
  background: #1a3691;
}

.vorschau i:last-child {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 6px;
  background: #f6f7fb;
}

.vorschau b {
  height: 8px;
  border-radius: 2px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.vorschau.dunkel i:first-child {
  border-right: 1px solid #2c3039;
  background: #16181d;
}

.vorschau.dunkel i:last-child {
  background: #111317;
}

.vorschau.dunkel b {
  background: #1b1e24;
  box-shadow: none;
  outline: 1px solid #2c3039;
}

.vorschau.system::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 50%, #111317 50%);
  opacity: 0.92;
}

/* Das Profilbild auf der Plakette der Ticketkarte. */
.plakette img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* ------------------------------------------------- Schmale Fenster, Ruhe */

@media (max-width: 56rem) {
  .rahmen {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 100vh;
  }

  .leiste {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    border-right: 0;
    border-bottom: 1px solid var(--leiste-rand);
  }

  .leiste nav {
    flex-direction: row;
  }

  .marke,
  .knopf.petrol {
    margin: 0;
  }

  .marke {
    padding: 0 0.5rem;
  }

  .leiste-unten {
    flex-direction: row;
    align-items: center;
    margin: 0 0 0 auto;
  }

  .ich .beschriftung,
  .ich-pfeil {
    display: none;
  }

  .konto {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .konto-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .kacheln-darstellung {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  main.voll {
    overflow: visible;
  }

  .akte {
    display: block;
    height: auto;
    overflow: visible;
  }

  .blitz {
    overflow: visible;
  }

  .maske-teil {
    display: none;
  }

  .maske-offen .blitz {
    width: 100%;
  }

  .maske-offen .maske-teil {
    position: static;
    display: flex;
    width: 100%;
    border-left: 0;
    border-top: 1px solid var(--linie);
    box-shadow: none;
  }

  .maske-felder {
    overflow: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* ------------------------------------------------------------ Nutzer */

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

.marke-klein {
  margin-left: 0.3rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  font-size: 0.75rem;
  color: var(--blass);
}

.link-ausgabe {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
}

.link-ausgabe input {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, monospace;
}

/* Der QR-Code bleibt auch im dunklen Modus schwarz auf weiß, sonst liest
   ihn die Kamera nicht. */
.qr-code {
  display: block;
  margin: 0.5rem 0 0.75rem;
  background: #fff;
  image-rendering: pixelated;
}

.passwortregeln {
  margin: -0.4rem 0 0.8rem;
}

.passwortregeln ul {
  margin: 0;
  padding-left: 1.1rem;
}

.aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* ---- Agenturtabelle
   Seite „Agenturen“ und Wahl bei „Ticket anlegen“: dicht, sortierbar, mit
   Sprungleiste. Gewählt am 05.10.2026 aus drei Entwürfen (Variante 3). */

.tabellenwerkzeug {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.25rem 0 0.6rem;
}

.tabellenwerkzeug input[type="search"] {
  width: 22rem;
}

/* Mit Skript filtert schon das Tippen; der Knopf ist der Weg ohne Skript. */
.mit-skript .tabellenwerkzeug button {
  display: none;
}

.tabellenrahmen {
  border: 1px solid var(--linie);
  border-radius: var(--rund-karte);
  background: var(--grund);
  overflow-x: auto;
}

/* Feste Spaltenbreiten: Die Tabelle passt bei 1366 Pixeln ohne Scrollen,
   und Sortieren verschiebt keine Spalte. Den Rest bekommt der Name. */
table.agenturen {
  table-layout: fixed;
  font-size: 0.92rem;
}

table.agenturen th:nth-child(2) {
  width: 9rem;
}

table.agenturen th:nth-child(3) {
  width: 9rem;
}

table.agenturen th:nth-child(4) {
  width: 6rem;
}

table.agenturen th:nth-child(5) {
  width: 9.5rem;
}

table.agenturen th:nth-child(6) {
  width: 11.5rem;
}

table.agenturen.ziel-ticket th:nth-child(6) {
  width: 7.5rem;
}

table.agenturen th {
  position: sticky;
  top: 0;
  padding: 0.3rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--flaeche);
}

table.agenturen th button {
  padding: 0.25rem 0;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: transparent;
}

table.agenturen th button:hover {
  color: var(--text);
  background: transparent;
}

table.agenturen th[aria-sort] button {
  color: var(--akzent-text);
}

/* Der Pfeil hat immer seinen Platz, damit die Spalten beim Sortieren nicht
   springen. */
table.agenturen th button::after {
  display: inline-block;
  width: 1rem;
  content: "";
  text-align: right;
}

table.agenturen th[aria-sort="ascending"] button::after {
  content: "▲";
}

table.agenturen th[aria-sort="descending"] button::after {
  content: "▼";
}

table.agenturen td {
  padding: 0.45rem 0.8rem;
  vertical-align: middle;
  white-space: nowrap;
}

/* Name und Ort dürfen umbrechen, Nummer, Zahl und Datum nicht. */
table.agenturen td:nth-child(-n + 2) {
  white-space: normal;
}

table.agenturen th.zahl,
table.agenturen td.zahl {
  text-align: right;
}

table.agenturen tbody tr:last-child td {
  border-bottom: 0;
}

.mit-skript table.agenturen tbody tr[data-wohin] {
  cursor: pointer;
}

table.agenturen tbody tr[data-wohin]:hover,
table.agenturen tbody tr.aktiv {
  background: var(--zart);
}

table.agenturen tbody tr.aktiv td:first-child {
  box-shadow: inset 3px 0 0 var(--akzent-text);
}

table.agenturen td small,
table.agenturen td.nummer,
table.agenturen td.blass {
  color: var(--blass);
}

table.agenturen td.nummer,
table.agenturen td.zahl {
  font-variant-numeric: tabular-nums;
}

.agenturen .agenturname {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  white-space: normal;
}

.agenturen .agenturname a {
  color: var(--text);
}

.agenturen .namensschild {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  font: 700 0.8rem/1 var(--schrift-titel);
  color: var(--akzent-text);
  background: var(--zart);
}

.agenturen .pille {
  padding: 0.05rem 0.55rem;
  border: 1px solid var(--linie);
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--blass);
}

/* Angefangene Anpassung (09.10.2026): orange wie „Anpassung offen“ in der Akte. */
.agenturen .pille.warn {
  margin-left: 0.3rem;
  border-color: var(--warn);
  color: var(--warn);
}

.agenturen .offen {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
}

.agenturen .offen.viele {
  font-weight: 700;
  color: var(--fehler);
}

.agenturen .balken {
  display: block;
  height: 0.4rem;
  border-radius: 1rem;
  background: var(--akzent-text);
  opacity: 0.55;
}

.agenturen .offen.viele .balken {
  background: var(--fehler);
  opacity: 0.8;
}

.agenturen .balken.stufe-1 {
  width: 0.8rem;
}

.agenturen .balken.stufe-2 {
  width: 1.6rem;
}

.agenturen .balken.stufe-3 {
  width: 2.4rem;
}

.agenturen .balken.stufe-4 {
  width: 3.2rem;
}

.agenturen .balken.stufe-5 {
  width: 4rem;
}

.agenturen .zeilenknoepfe {
  text-align: right;
}

.knopf.klein {
  padding: 0.3rem 0.65rem;
  font-size: 0.85rem;
}

.knopf.klein .symbol {
  width: 1rem;
  height: 1rem;
}

.agenturen .zeilenknoepfe .knopf {
  vertical-align: middle;
}

.agenturen .zeilenknoepfe .knopf + .knopf {
  margin-left: 0.35rem;
}

/* Die Knöpfe erscheinen an der Zeile, auf die man zeigt; ohne Maus, bei der
   Wahl fürs Ticket und ohne Skript sind sie immer da. */
.mit-skript table.agenturen:not(.ziel-ticket) .zeilenknoepfe .knopf {
  opacity: 0;
  transition: opacity 0.12s;
}

.mit-skript table.agenturen:not(.ziel-ticket) tr:hover .zeilenknoepfe .knopf,
.mit-skript table.agenturen:not(.ziel-ticket) tr.aktiv .zeilenknoepfe .knopf,
.mit-skript table.agenturen:not(.ziel-ticket) tr:focus-within .zeilenknoepfe .knopf {
  opacity: 1;
}

@media (hover: none) {
  .mit-skript table.agenturen .zeilenknoepfe .knopf {
    opacity: 1;
  }
}

.agenturen td.leer {
  padding: 1.5rem;
  text-align: center;
}

/* ---------------------------------------------------------------- Timer
   Entschieden am 06.10.2026 aus dem Prototyp „Zeiterfassung“: Wer ein
   Ticket öffnet, startet seinen Timer. Ein Lauflicht heißt „läuft bei dir“
   – um die Uhr in der Leiste, um die eigene Karte, um die Uhr im Ticket. Wo
   ein Kollege arbeitet, steht eine graue Eckfahne mit Stoppuhr und Kürzel.
   Bewegung steht still, wenn der Rechner „Bewegung reduzieren“ will. */

@property --winkel {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes kreisen {
  to {
    --winkel: 360deg;
  }
}

@keyframes haken-zeichnen {
  from {
    stroke-dashoffset: 24;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* Das Lauflicht: ein Ring, der nur am Rand sichtbar ist. */
.zeituhr.uhr-an::before,
.ticketkarte.meins::after,
.blattuhr.uhr-an::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 2;
  padding: 2px;
  border-radius: calc(var(--rund-karte) + 2px);
  background: conic-gradient(from var(--winkel), var(--mein-tief), var(--mein) 15%, #fff 20%, var(--mein) 25%,
      var(--mein-tief) 45%, var(--mein-tief) 55%, var(--mein) 65%, #fff 70%, var(--mein) 75%, var(--mein-tief));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: kreisen 3.2s linear infinite;
  pointer-events: none;
}

/* ---- Die Uhr in der Leiste */

/* Name und Timer in einer Zeile. */
.marke-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0 0.75rem;
}

.zeituhr {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.3rem 0.55rem;
  border-radius: var(--rund-karte);
  text-decoration: none;
  color: #ffffff;
}

.zeituhr.uhr-an {
  background: color-mix(in srgb, #000 28%, var(--leiste-aktiv));
  box-shadow: 0 0 16px color-mix(in srgb, var(--mein) 45%, transparent);
}

.zeituhr.uhr-an:hover {
  background: color-mix(in srgb, #000 12%, var(--leiste-aktiv));
}

.zeituhr.ruht {
  border: 1px dashed color-mix(in srgb, var(--auf-leiste) 45%, transparent);
  color: var(--auf-leiste);
  opacity: 0.85;
}

.zeituhr.gestoppt {
  background: var(--gestoppt);
  box-shadow: none;
}

.zeituhr.gestoppt::before {
  display: none;
}

/* Das Symbol der Uhr in der Leiste, ohne Ring. */
.zu-symbol {
  flex: none;
  display: grid;
  place-items: center;
}

.zu-symbol > .symbol {
  width: 1.1rem;
  height: 1.1rem;
}

.zeituhr.uhr-an .zu-symbol {
  color: var(--mein);
}

.zu-ring {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
}

.zu-ring > svg:first-child {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.zu-ring circle {
  fill: none;
  stroke-width: 3.2;
}

.zu-spur {
  stroke: color-mix(in srgb, currentColor 22%, transparent);
}

.zu-bogen {
  stroke: var(--mein);
  stroke-linecap: round;
}

.zu-ring > .symbol {
  width: 1.1rem;
  height: 1.1rem;
}

.zu-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

/* Kompakt neben dem Namen genügt die Zeit; „Timer“ liest nur der Screenreader. */
.zu-kopf {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.zu-zeit {
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.zeituhr.uhr-an .zu-zeit {
  color: var(--mein);
  text-shadow: 0 0 12px color-mix(in srgb, var(--mein) 55%, transparent);
}

.zeituhr.ruht .zu-zeit {
  font-size: 0.95rem;
  font-weight: 600;
}

/* Eingeklappt: Name, darunter Symbol und Zeit mit Sekunden. */
@media (min-width: 56.01rem) {
  .leiste-schmal .marke-zeile {
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 1.1rem;
  }

  .leiste-schmal .zeituhr {
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.4rem 0;
  }

  .leiste-schmal .zeituhr .zu-zeit {
    font-size: 0.76rem;
    letter-spacing: -0.02em;
  }

  .leiste-schmal .zeituhr.ruht .zu-zeit {
    font-size: 0.72rem;
  }
}

.leiste nav a {
  white-space: normal;
  line-height: 1.2;
}

/* ---- Die Karten */

.ticketkarte.meins {
  box-shadow: 0 0 14px color-mix(in srgb, var(--mein) 45%, transparent);
}

.kollegen {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.12rem 0.5rem 0.15rem 0.45rem;
  border-radius: 0 var(--rund-karte) 0 var(--rund-karte);
  font-size: 0.66rem;
  font-weight: 700;
  color: #ffffff;
  background: var(--fremd);
}

.kollegen[hidden] {
  display: none;
}

.kollegen .symbol {
  width: 0.8rem;
  height: 0.8rem;
}

.ticketkarte.ausserhalb {
  opacity: 0.8;
}

.phase-marke {
  flex: none;
  display: inline-block;
  padding: 0 0.45rem;
  white-space: nowrap;
  border-radius: 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ph-pruefen);
  background: color-mix(in srgb, var(--ph-pruefen) 14%, var(--grund));
}

/* ---- Die Uhr im Ticket */

.held {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
}

.held > :not(.held-uhr) {
  grid-column: 1;
}

.held-uhr {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
}

.kopf-rechts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
}

.blattuhr {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.35rem 0.4rem 0.35rem 0.5rem;
  border-radius: 2rem;
  color: var(--text);
  background: var(--grund);
  box-shadow: 0 0 0 1px var(--linie);
}

.blattuhr.uhr-an::before {
  border-radius: 2rem;
}

.blattuhr.uhr-an {
  box-shadow: 0 0 16px color-mix(in srgb, var(--mein) 40%, transparent);
}

.blattuhr.ruht {
  padding-left: 1rem;
}

.blattuhr .zu-ring {
  width: 2.3rem;
  height: 2.3rem;
  color: var(--akzent-text);
}

.blattuhr .zu-ring > .symbol {
  display: none;
  width: 1.2rem;
  height: 1.2rem;
  stroke: var(--gestoppt);
  stroke-width: 3;
  stroke-dasharray: 24;
}

.blattuhr.gestoppt {
  box-shadow: 0 0 0 2px var(--gestoppt);
}

.blattuhr.gestoppt .zu-bogen {
  stroke: var(--gestoppt);
  stroke-dasharray: 60 60;
}

.blattuhr.gestoppt .zu-ring > .symbol {
  display: block;
  animation: haken-zeichnen 0.4s 0.05s ease-out both;
}

.blattuhr.gestoppt .bu-zeit,
.bu-hinweis {
  color: var(--gestoppt);
}

.blattuhr.gestoppt form {
  display: none;
}

.bu-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.bu-text small {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--blass);
}

.bu-zeit {
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.bu-zeit.klein {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--blass);
}

.blattuhr.ruht .bu-zeit {
  color: var(--blass);
}

.bu-hinweis {
  padding-right: 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.bu-stopp,
.bu-start {
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  border-radius: 2rem;
}

.bu-stopp {
  background: var(--fehler);
}

.bu-stopp:hover {
  background: color-mix(in srgb, #000 15%, var(--fehler));
}

.bu-stopp::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  background: currentColor;
}

.bu-start::before {
  content: "";
  border-top: 0.38rem solid transparent;
  border-bottom: 0.38rem solid transparent;
  border-left: 0.6rem solid currentColor;
}

.mitarbeit {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--fremd);
}

.mitarbeit .symbol {
  width: 0.95rem;
  height: 0.95rem;
}

.band {
  margin: 0 0 1rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--mein) 55%, transparent);
  border-radius: var(--rund-karte);
  font-size: 0.9rem;
  background: color-mix(in srgb, var(--mein) 14%, var(--grund));
}

.band.neutral {
  border-color: var(--linie);
  background: var(--fremd-flaeche);
}

.zeitliste {
  margin: 0.3rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
  color: var(--blass);
}

.zeitliste b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.zeitliste .geaendert {
  font-style: italic;
}

/* Supervisoren: Zeit je Person ändern (Stift an der Zeit-Kachel). */
.zeit-form .zeit-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.5rem auto;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
}

.zeit-form .zeit-zeile span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.zeit-form .zeit-zeile input {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.zeit-form .zeit-zeile select {
  min-width: 0;
}

.zeit-form .hinweis {
  margin: 0;
  font-size: 0.78rem;
}

.blatt.gesperrt .blatt-raster,
.blatt.gesperrt .lasche {
  pointer-events: none;
}

/* ---- Die Frage, bevor ein Timer gestoppt wird */

.frage-schleier {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(10, 20, 40, 0.45);
  animation: schleier-rein 0.15s;
}

.frage {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 61;
  width: min(30rem, 92vw);
  padding: 1.25rem 1.4rem 1.1rem;
  border-radius: 12px;
  background: var(--grund);
  box-shadow: var(--schatten-gross);
  transform: translate(-50%, -50%);
}

.frage h2 {
  margin: 0.7rem 0 0.4rem;
  font-size: 1.2rem;
}

.frage p {
  margin: 0 0 1rem;
  font-size: 0.92rem;
  color: var(--blass);
}

.frage .knopfreihe {
  display: flex;
  gap: 0.5rem;
}

.frage-uhr {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem 0.3rem 0.5rem;
  border-radius: 2rem;
  font-size: 0.82rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--mein) 16%, var(--grund));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mein) 60%, transparent);
}

.frage-uhr .symbol {
  width: 1rem;
  height: 1rem;
  color: var(--akzent-text);
}

.frage-uhr [data-uhr] {
  font-variant-numeric: tabular-nums;
}

/* ---- Warteschlange Klärung: Spalten klappen zu schmalen Leisten zusammen */

.hvbrett {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.hvspalte {
  position: relative;
  flex: 1 0 15rem;
  min-width: 15rem;
  max-width: 26rem;
  padding: 0.6rem;
  border-radius: var(--rund-karte);
  background: var(--flaeche);
}

.hvspalte.sammel-an {
  outline: 2px solid color-mix(in srgb, var(--mein) 70%, transparent);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--mein) 10%, var(--flaeche));
}

.hv-kopf {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  margin: 0 0 0.55rem;
  padding: 0;
  border: 0;
  text-align: left;
  color: var(--text);
  background: transparent;
}

/* Der Kopf ist ein Knopf, soll aber nicht wie einer blau werden. */
.hv-kopf:hover {
  background: transparent;
}

.hv-kopf:hover:not(:disabled) .einklapp {
  color: var(--akzent-text);
}

.hv-kopf:disabled {
  cursor: default;
}

.hv-kopf .k-ico,
.hvspalte.zu .k-ico {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: var(--akzent-text);
  background: var(--erwaehnung);
}

.hv-kopf .k-ico .symbol {
  width: 1.05rem;
  height: 1.05rem;
}

.hv-name {
  overflow: hidden;
  font-size: 0.98rem;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hv-zahl {
  padding: 0 0.45rem;
  border-radius: 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blass);
  background: var(--grund);
}

.hv-zahl.null {
  opacity: 0.55;
}

.einklapp {
  display: grid;
  place-items: center;
  color: var(--blass);
}

.einklapp .symbol {
  width: 1rem;
  height: 1rem;
}

.hv-karten {
  min-height: 3rem;
}

.sammel-knopf {
  justify-content: center;
  width: 100%;
  margin: 0 0 0.6rem;
  padding: 0.35rem 0.65rem;
  font-size: 0.82rem;
}

.sammel-knopf .symbol {
  width: 0.95rem;
  height: 0.95rem;
}

.sammeluhr {
  margin: 0 0 0.6rem;
}

.sammeluhr .blattuhr {
  justify-content: space-between;
  width: 100%;
  gap: 0.45rem;
  padding: 0.3rem 0.3rem 0.3rem 0.4rem;
}

.sammeluhr .zu-ring {
  width: 1.9rem;
  height: 1.9rem;
}

.sammeluhr .bu-zeit {
  font-size: 1.2rem;
}

.sammeluhr .bu-stopp {
  padding: 0.45rem 0.8rem;
}

/* Eingeklappt: schmale Leiste mit Symbol, Zahl und senkrechtem Namen; ein
   Klick klappt auf. Die Kartenliste bleibt als Ablage darüber liegen. */
/* Eingeklappt und leer: ausgeblendet (07.10.2026), ohne Hinweis und ohne
   „Alle zeigen“ (08.10.2026). */
.hvspalte.zu.leer {
  display: none;
}

.hvspalte.zu {
  flex: 0 0 2.9rem;
  min-width: 2.9rem;
  min-height: 15rem;
  padding: 0.55rem 0;
  cursor: pointer;
}

.hvspalte.zu:hover {
  background: var(--zart);
}

.hvspalte.zu .hv-kopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.hvspalte.zu .hv-name {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  overflow: visible;
  font-size: 0.88rem;
}

.hvspalte.zu .hv-zahl {
  order: -1;
}

.hvspalte.zu .einklapp {
  display: none;
}

.hvspalte.zu .hv-inhalt > :not(.hv-karten) {
  display: none;
}

.hvspalte.zu .hv-karten {
  position: absolute;
  inset: 0;
  min-height: 0;
}

.hvspalte.zu .hv-karten > * {
  display: none;
}

.hvspalte.ohne .hv-kopf {
  grid-template-columns: minmax(0, 1fr) auto;
}

.bilanz {
  max-width: 30rem;
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--rund-karte);
  font-size: 0.88rem;
  background: var(--grund);
  box-shadow: var(--schatten);
}

.bilanz .symbol {
  width: 1rem;
  height: 1rem;
  vertical-align: -0.15rem;
  color: var(--gestoppt);
}

.bilanz table {
  width: 100%;
  margin-top: 0.35rem;
  border-collapse: collapse;
}

.bilanz td {
  padding: 0.15rem 0;
  border-bottom: 1px solid var(--linie);
}

.bilanz td:last-child {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---- Timer prüfen */

.pruef-unter {
  margin: 0.2rem 0 1rem;
  color: var(--blass);
}

table.pruef {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--rund-karte);
  overflow: hidden;
  font-size: 0.9rem;
  background: var(--grund);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

table.pruef th,
table.pruef td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--linie);
  text-align: left;
  vertical-align: middle;
}

table.pruef th {
  font-size: 0.78rem;
  color: var(--blass);
  background: var(--flaeche);
}

table.pruef td small {
  display: block;
  font-size: 0.78rem;
  color: var(--blass);
}

table.pruef td a {
  font-weight: 700;
  text-decoration: none;
}

table.pruef .dauer {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--warn);
}

.pruef-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.pruef-form .korr {
  width: 5.5rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--feldrand);
  border-radius: var(--rund);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--grund);
}

.pruef-form button {
  padding: 0.35rem 0.7rem;
  font-size: 0.82rem;
}

.laeuft-marke {
  padding: 0 0.45rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--auf-petrol);
  background: var(--mein);
}

.pruef-h2 {
  margin: 2rem 0 0.5rem;
  font-size: 1.05rem;
}

.geprueft {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
  color: var(--blass);
}

.geprueft li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0;
}

.geprueft .symbol {
  width: 1rem;
  height: 1rem;
  color: var(--gestoppt);
}

.geprueft b {
  color: var(--text);
}

/* ---- Benutzereinstellungen: Autostart (nur Admins) */

.schalter-zeile {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
  cursor: pointer;
}

/* Ein eigenes Häkchen statt des Ankreuzfelds des Browsers (Post-it #37, 13.10.2026). */
.schalter-zeile input {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0.15rem 0 0;
  border: 1.5px solid var(--feldrand);
  border-radius: 3px;
  background: var(--grund);
  appearance: none;
  cursor: pointer;
}

.schalter-zeile input:checked {
  border-color: var(--akzent);
  background: var(--akzent);
}

.schalter-zeile input:checked::before {
  content: "";
  width: 0.35rem;
  height: 0.65rem;
  border: solid var(--auf-akzent);
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}

.schalter-zeile input:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
}

.schalter-zeile small {
  display: block;
  font-size: 0.82rem;
  color: var(--blass);
}

.maske-fuss .uhr b {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .zeituhr.uhr-an::before,
  .ticketkarte.meins::after,
  .blattuhr.uhr-an::before {
    animation: none;
  }
}

/* ------------------------------------------------------------- Post-its
   Nur auf dem Vorschau-Server (postits.js). Gelb wie Papier, in beiden
   Modi gleich; dunkle Schrift darauf. Die Ebene liegt über allem und lässt
   Klicks durch, nur Punkte und Blatt fangen sie. */

#postit-ebene {
  --postit: #ffe680;
  --postit-rand: #d9b200;
  --postit-text: #3d3200;
  --postit-blass: #6b5a14;

  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
}

.postit-punkt {
  position: fixed;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  margin: -0.75rem 0 0 -0.75rem;
  padding: 0 0.3rem;
  border: 2px solid var(--postit-rand);
  border-radius: 0.75rem 0.75rem 0.75rem 0.15rem;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--postit-text);
  background: var(--postit);
  box-shadow: var(--schatten);
  cursor: pointer;
  pointer-events: auto;
}

.postit-punkt:hover,
.postit-punkt.offen {
  background: #ffd633;
}

.postit-punkt.erledigt {
  opacity: 0.65;
}

.postit-punkt.entwurf {
  width: 1.5rem;
  border-style: dashed;
  cursor: default;
}

.postit-punkt.leuchtet {
  animation: postit-leuchten 0.9s ease-in-out 4;
}

@keyframes postit-leuchten {
  50% {
    box-shadow: 0 0 0 0.6rem rgba(255, 214, 51, 0.55);
  }
}

/* Zettel, deren Element fehlt oder versteckt ist: gestapelt unter dem Band. */
.postit-stapel {
  position: fixed;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.3rem;
  padding: 0.3rem 0.4rem;
  border-radius: var(--rund-karte);
  background: rgba(61, 50, 0, 0.12);
  pointer-events: auto;
}

.postit-stapel[hidden] {
  display: none;
}

.postit-stapel .postit-punkt {
  position: static;
  margin: 0;
}

.postit-blatt {
  position: fixed;
  top: 0;
  left: 0;
  width: 20rem;
  max-width: calc(100vw - 1rem);
  max-height: calc(100vh - 1rem);
  overflow-y: auto;
  pointer-events: auto;
}

.postit-karte {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem 0.8rem;
  border: 1px solid var(--postit-rand, #d9b200);
  border-radius: var(--rund-karte);
  font-size: 0.9rem;
  color: var(--postit-text, #3d3200);
  background: var(--postit, #ffe680);
  box-shadow: var(--schatten-gross);
}

.postit-kopf {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.postit-kopf time,
.postit-antwort time,
.postit-erledigt {
  font-size: 0.8rem;
  color: var(--postit-blass, #6b5a14);
}

.postit-nummer {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--postit-blass, #6b5a14);
}

.postit-zu {
  margin-left: auto;
  padding: 0 0.35rem;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--postit-blass, #6b5a14);
}

.postit-wand .postit-zu {
  display: none;
}

.postit-seite {
  font-weight: 600;
  color: inherit;
}

.postit-seite span {
  white-space: nowrap;
}

.postit-text {
  white-space: normal;
  overflow-wrap: anywhere;
}

.postit-antwort {
  padding-left: 0.6rem;
  border-left: 3px solid var(--postit-rand, #d9b200);
  overflow-wrap: anywhere;
}

.postit-erledigt {
  margin: 0;
}

.postit-karte textarea {
  min-height: 2.5rem;
  border-color: var(--postit-rand, #d9b200);
  color: #1a1a1a;
  background: #fffbe6;
}

.postit-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.postit-knoepfe button {
  padding: 0.3rem 0.65rem;
  font-size: 0.85rem;
}

/* Auf dem gelben Papier in beiden Modi dieselben Knöpfe. */
.postit-knoepfe button.schlicht {
  border-color: #1a3691;
  color: #1a3691;
  background: #fffbe6;
}

.postit-knoepfe button.schlicht:hover {
  background: #ffffff;
}

.postit-knoepfe .geist {
  border: 0;
  color: var(--postit-blass, #6b5a14);
  background: transparent;
}

.postit-knoepfe .geist.scharf {
  color: #ffffff;
  background: #b3261e;
}

.postit-karte.erledigt {
  opacity: 0.8;
}

.postit-karte.fehlgeschlagen {
  outline: 2px solid #b3261e;
}

.postit-hinweis {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--postit-text);
  background: var(--postit);
  box-shadow: var(--schatten-gross);
  transform: translateX(-50%);
}

.postit-hinweis[hidden] {
  display: none;
}

body.postit-modus,
body.postit-modus * {
  cursor: crosshair !important;
}

/* Der Knopf in der Leiste, wie „Einklappen“; gedrückt, solange man setzt. */
.leiste-unten .postit-setzen {
  align-self: stretch;
  justify-content: flex-start;
  padding: 0.45rem 0.6rem;
  border-color: transparent;
  font-size: 0.9rem;
  font-weight: 500;
  color: inherit;
  background: transparent;
}

.leiste-unten .postit-setzen:hover,
.leiste-unten .postit-setzen[aria-pressed="true"] {
  color: var(--postit-text, #3d3200);
  background: #ffe680;
}

.leiste-schmal .leiste-unten .postit-setzen {
  justify-content: center;
  padding-right: 0;
  padding-left: 0;
}

.postit-zahl {
  min-width: 1.2rem;
  margin-left: auto;
  padding: 0 0.35rem;
  border-radius: 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  color: #3d3200;
  background: #ffe680;
}

.postit-zahl[hidden] {
  display: none;
}

/* Übersicht: Filter und eine Wand aus Karten. */
.postit-filter {
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0 1.25rem;
}

.postit-filter a {
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--linie);
  border-radius: 2rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
}

.postit-filter a[aria-current="page"] {
  border-color: var(--akzent);
  color: var(--auf-akzent);
  background: var(--akzent);
}

.postit-filter span {
  margin-left: 0.3rem;
  font-weight: 400;
}

.postit-wand {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  align-items: start;
  gap: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .postit-punkt.leuchtet {
    animation: none;
    outline: 3px solid #ffd633;
  }
}

/* Agenturpartner ganz oben in der Maske (07.10.2026). */
.maske-partner select {
  max-width: 26rem;
}

/* Outbound-Brett (07.10.2026): vier Spalten wie Inbound (seit 08.10.2026),
   die Kachel nennt Grund, Frist und den letzten Anrufversuch; erledigte
   tragen das Ergebnis. */
.ergebnis-notiz {
  width: calc(100% - 1rem);
  margin: 0.3rem 0.5rem 0.5rem;
  font-size: 0.88rem;
}

/* Erledigt ist erledigt (08.10.2026): Nur Supervisoren ziehen solche Karten
   wieder heraus; für alle anderen liegen sie fest. */
.ticketkarte.fest {
  cursor: default;
}

.pfad.fest .schritt {
  cursor: default;
}

/* ------------------------------------------------------- Datumsauswahl
   Fälligkeit (08.10.2026): Datum TT.MM.JJJJ und freiwillig eine Uhrzeit,
   dazu eine Klappe mit Schnellwahl, Monatskalender und Uhrzeiten
   (datumwahl.js). Die Klappe hängt am body und liegt fest im Fenster. */

.datumwahl > label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
}

/* Als Feld eines Formulars (DatumEingabe, Post-it #36) ist der Rahmen ein span. */
.datumwahl {
  display: block;
}

.dw-felder {
  display: flex;
  gap: 0.5rem;
}

.dw-feld {
  position: relative;
  display: flex;
  align-items: center;
}

.dw-datum {
  flex: 1 1 9rem;
  min-width: 8.5rem;
}

.dw-zeit {
  flex: 0 0 7rem;
}

.dw-feld > .symbol {
  position: absolute;
  left: 0.6rem;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--blass);
  pointer-events: none;
}

.dw-feld input[type="text"] {
  padding-left: 2.1rem;
  font-variant-numeric: tabular-nums;
}

.dw-datum input[type="text"] {
  padding-right: 2.4rem;
}

.datumwahl.offen .dw-datum input[type="text"] {
  border-color: var(--fokus);
}

.dw-feld input[aria-invalid="true"] {
  border-color: var(--fehler);
  background: var(--fehler-flaeche);
}

/* Der Wochentag hinter dem Datum, sobald es vollständig ist. */
.dw-wtag {
  position: absolute;
  right: 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--akzent-text);
  pointer-events: none;
}

.datumwahl .fehler {
  display: block;
  margin-top: 0.25rem;
}

.dw-klappe {
  position: fixed;
  z-index: 60;
  width: 28rem;
  max-width: calc(100vw - 1rem);
  overflow-y: auto;
  padding: 0.75rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-karte);
  color: var(--text);
  background: var(--grund);
  box-shadow: var(--schatten-gross);
  animation: dw-auf 0.12s ease-out;
}

.dw-klappe.nach-oben {
  animation-name: dw-auf-oben;
}

.dw-klappe[hidden] {
  display: none;
}

@keyframes dw-auf {
  from {
    opacity: 0;
    translate: 0 -0.3rem;
  }
}

@keyframes dw-auf-oben {
  from {
    opacity: 0;
    translate: 0 0.3rem;
  }
}

.dw-oben {
  display: grid;
  grid-template-columns: 7.6rem minmax(0, 1fr);
  gap: 0.75rem;
}

.dw-klappe button {
  font-weight: 500;
  color: var(--text);
  background: transparent;
  transition: background-color 0.12s, color 0.12s;
}

.dw-klappe button:hover {
  background: var(--zart);
}

.dw-klappe button:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: -2px;
}

/* Schnellwahl: untereinander, Name und Tag. */
.dw-schnell {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-right: 0.75rem;
  border-right: 1px solid var(--linie);
}

.dw-schnellwahl {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 0.22rem 0.5rem;
  line-height: 1.2;
  text-align: left;
  white-space: normal;
}

.dw-schnellwahl span {
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 600;
}

.dw-schnellwahl small {
  font-size: 0.75rem;
  color: var(--blass);
}

.dw-klappe .dw-schnellwahl.an {
  color: var(--auf-akzent);
  background: var(--akzent);
}

.dw-schnellwahl.an small {
  color: inherit;
  opacity: 0.85;
}

/* Kalender */
.dw-monat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.3rem;
}

.dw-monat b {
  font-size: 0.95rem;
}

.dw-klappe .dw-blaettern {
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--akzent-text);
}

.dw-raster {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.1rem;
}

.dw-kopf {
  padding: 0.15rem 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  color: var(--blass);
}

.dw-klappe .dw-tag {
  height: 1.85rem;
  padding: 0;
  border-radius: 50%;
  font-size: 0.88rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.dw-kopf.we,
.dw-klappe .dw-tag.we {
  color: var(--blass);
}

.dw-klappe .dw-tag.fremd,
.dw-klappe .dw-tag.vorbei {
  opacity: 0.45;
}

.dw-klappe .dw-tag.heute {
  box-shadow: inset 0 0 0 1.5px var(--akzent-text);
  font-weight: 700;
}

.dw-klappe .dw-tag.vorschau {
  background: var(--zart);
}

.dw-klappe .dw-tag.an {
  opacity: 1;
  font-weight: 700;
  color: var(--auf-akzent);
  background: var(--akzent);
}

/* Uhrzeit */
/* Sieben gleich breite Uhrzeiten in einer Zeile, „ohne“ vorn. */
.dw-uhr {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.25rem;
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--linie);
}

.dw-uhr[hidden] {
  display: none;
}

.dw-klappe .dw-chip {
  padding: 0.2rem 0.42rem;
  border: 1px solid var(--linie);
  border-radius: 1rem;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.dw-klappe .dw-chip.an {
  border-color: var(--akzent);
  color: var(--auf-akzent);
  background: var(--akzent);
}

.dw-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* In der Kachel „Fällig“ braucht das Datum mit Wochentag etwas mehr Platz. */
.kachel.faellig .wahl-klappe {
  width: 21rem;
}

.dw-tipp {
  font-size: 0.75rem;
  color: var(--blass);
}

.dw-tipp kbd {
  padding: 0 0.25rem;
  border: 1px solid var(--linie);
  border-radius: 3px;
  font-family: inherit;
  font-size: 0.72rem;
}

.dw-klappe [data-dw-fertig] {
  padding: 0.3rem 0.8rem;
  font-weight: 600;
  color: var(--auf-akzent);
  background: var(--akzent);
}

.dw-klappe [data-dw-fertig]:hover {
  background: var(--akzent-tief);
}

@media (max-width: 30rem) {
  .dw-oben {
    grid-template-columns: 1fr;
  }

  .dw-schnell {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0 0 0.6rem;
    border-right: 0;
    border-bottom: 1px solid var(--linie);
  }
}

/* ---------- Akte mit Reitern und Lebensphase (V1, 08.10.2026) ----------
   „Am Telefon“ bleibt die Akte beim Klingeln; Stammblatt, Daten und Verlauf
   zeigen die Agentur als Kunden. Der Petrol-Strich zeigt den offenen Reiter. */

.akte-reiter {
  display: flex;
  gap: 0.2rem;
  border-bottom: 1px solid var(--linie);
  overflow-x: auto;
  overflow-y: hidden;
}

.akte-reiter a {
  position: relative;
  padding: 0.5rem 0.85rem 0.6rem;
  border-radius: var(--rund) var(--rund) 0 0;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  color: var(--blass);
}

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

.akte-reiter a[aria-current] {
  color: var(--text);
}

.akte-reiter a[aria-current]::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--petrol);
}

.reiter-zahl {
  margin-left: 0.25rem;
  padding: 0 0.4rem;
  border-radius: 1rem;
  font-size: 0.72rem;
  color: var(--akzent-text);
  background: var(--zart);
}

/* Mit offener Maske ist links nur der Agenturblitz: ohne Reiter. */
.maske-offen .akte-reiter,
.maske-offen .akte-phase {
  display: none;
}

/* Mehrere Karten untereinander in einer Spalte des Rasters (Technik: Telefonie und Anhänge). */
.akte-spalte {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.akte-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1rem;
  align-items: start;
}

.ansprechpartner {
  padding: 0.5rem 0;
  border-top: 1px solid var(--zart);
}

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

.akte-pflege {
  margin-top: 0.75rem;
}

.akte-pflege summary {
  font-weight: 600;
  color: var(--akzent-text);
  cursor: pointer;
}

.akte-formular {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.6rem 1rem;
  align-items: end;
  margin-top: 0.6rem;
}

.akte-formular label {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.akte-formular input,
.akte-formular select {
  width: 100%;
}

.akte-formular button {
  justify-self: start;
}

/* Lebenslauf: ein Strich, je Punkt ein Kreis; offene Punkte blass. */
.lebenslauf {
  margin: 0;
  padding: 0 0 0 0.5rem;
  list-style: none;
}

.lebenslauf li {
  position: relative;
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 1rem;
  padding: 0.5rem 0 0.5rem 1.4rem;
  border-left: 2px solid var(--zart);
}

.lebenslauf li::before {
  content: "";
  position: absolute;
  left: -0.45rem;
  top: 0.8rem;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--erfolg);
  border-radius: 50%;
  background: var(--grund);
}

.lebenslauf li.da::before {
  background: var(--erfolg);
}

.lebenslauf li.offen {
  color: var(--blass);
}

.lebenslauf li.offen::before {
  border-color: var(--linie);
}

.lebenslauf .wann {
  font-weight: 600;
}

.lebenslauf small {
  display: block;
  color: var(--blass);
}

/* Reiter „Technik“ (bis 14.10.2026 „3CX-Technik“): die Bandansagen (Post-it #41, 13.10.2026). */
.ansagen-hinweis {
  margin: -0.2rem 0 0.8rem;
}

.ansagen {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.ansage {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-karte);
}

.ansage-kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.ansage-wann {
  font-size: 0.8rem;
  color: var(--blass);
}

.ansage-text {
  margin: 0.1rem 0;
  font-style: italic;
  line-height: 1.45;
}

.ansage audio {
  width: 100%;
  height: 2.2rem;
}

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

.ansage-fuss code {
  font-size: 0.78rem;
  color: var(--blass);
  overflow-wrap: anywhere;
}

.ansage-fuss .knopf .symbol {
  width: 1rem;
  height: 1rem;
}

.chronik .blatt-karte h2 .reiter-zahl {
  margin-left: 0.3rem;
  font-family: var(--schrift);
}

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

.verlauf .ereignis {
  padding: 0.6rem 0 0.6rem 0.8rem;
  border-top: 1px solid var(--zart);
  border-left: 3px solid var(--zart);
}

.verlauf .ereignis.notiz {
  border-left-color: var(--akzent);
}

.verlauf .ereignis.regel {
  border-left-color: var(--warn);
}

.verlauf .ereignis.phase {
  border-left-color: var(--erfolg);
}

.verlauf small {
  color: var(--blass);
}

.verlauf p {
  margin: 0.2rem 0 0;
}

.verlauf .vorher {
  text-decoration: line-through;
  color: var(--fehler);
}

.verlauf .nachher {
  color: var(--erfolg);
}

/* Lebensphase als Pille, in der Akte und in der Tabelle. */
.pille.phase-interessent,
.pille.phase-einrichtung,
.pille.phase-pausiert,
.pille.phase-beendet,
.pille.phase-verloren {
  padding: 0.05rem 0.55rem;
  border: 1px solid var(--linie);
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--blass);
}

.pille.phase-einrichtung {
  border-color: var(--petrol);
  color: var(--akzent-text);
}

.pille.phase-pausiert {
  border-color: var(--warn);
  color: var(--warn);
}

/* Archiviert (intern `verloren`) ist kein Fehler und bleibt grau (Post-it #33, 13.10.2026). */
.pille.phase-beendet {
  border-color: var(--fehler);
  color: var(--fehler);
}

.phasenwahl {
  display: inline-flex;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  overflow: hidden;
}

.phasenwahl a {
  padding: 0.35rem 0.8rem;
  border-left: 1px solid var(--linie);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
  background: var(--grund);
}

.phasenwahl a:first-child {
  border-left: 0;
}

.phasenwahl a[aria-current] {
  color: var(--auf-akzent);
  background: var(--akzent);
}

.phasenwahl small {
  margin-left: 0.25rem;
  opacity: 0.75;
}

/* ---------- Zahlen der Akte ---------- */

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}

.kennzahlen div {
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--zart);
  border-radius: var(--rund-karte);
  background: var(--grund);
}

.kennzahlen small {
  color: var(--blass);
}

.kennzahlen b {
  display: block;
  font-size: 1.5rem;
}

.monatsbalken {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: 0.4rem;
  height: 10rem;
}

.monatsbalken div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  font-size: 0.75rem;
}

.monatsbalken i {
  display: block;
  width: 100%;
  max-width: 2rem;
  border-radius: 3px 3px 0 0;
  background: var(--akzent);
}

.monatsbalken small {
  color: var(--blass);
}

.monatsbalken .hoehe-0 {
  height: 0%;
}

.monatsbalken .hoehe-1 {
  height: 7%;
  min-height: 2px;
}

.monatsbalken .hoehe-2 {
  height: 14%;
  min-height: 2px;
}

.monatsbalken .hoehe-3 {
  height: 21%;
  min-height: 2px;
}

.monatsbalken .hoehe-4 {
  height: 28%;
  min-height: 2px;
}

.monatsbalken .hoehe-5 {
  height: 35%;
  min-height: 2px;
}

.monatsbalken .hoehe-6 {
  height: 42%;
  min-height: 2px;
}

.monatsbalken .hoehe-7 {
  height: 49%;
  min-height: 2px;
}

.monatsbalken .hoehe-8 {
  height: 56%;
  min-height: 2px;
}

.monatsbalken .hoehe-9 {
  height: 63%;
  min-height: 2px;
}

.monatsbalken .hoehe-10 {
  height: 70%;
  min-height: 2px;
}

/* ---------- Einrichtung wie ZAI Studio (V4–V6, X62, 08.10.2026) ----------
   Schrittleiste, Karten mit Kopf und Fuß, Ring in 1c, Freigabe in 2b,
   Fragefolge in 2c und Pipeline in 2d nach ZAI Studio, in den Farben von
   ZAI: Petrol heißt erledigt, Bernstein in Bearbeitung (Studio: Türkis und
   Bernstein), Rot nur für die Marken der Bildschirmfotos. Die Nachbildung
   der 3CX-Konsole ist immer hell, wie die Anlage. */

/* Erledigt heißt Blau, nicht Türkis: die Farben des Corporate Designs (Post-it #3, Runde 2 „In Einrichtung“, 14.10.2026). */
:root { --st-ok: var(--akzent); --st-ok-text: var(--akzent-text); --st-ok-flaeche: color-mix(in srgb, var(--akzent) 9%, var(--grund)); --st-jetzt: #b26a00; --st-jetzt-flaeche: #fff3e0; --st-marke: #d93b36; --st-mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, monospace; }
@media (prefers-color-scheme: dark) { :root:not([data-darstellung="hell"]) { --st-jetzt: #f5a524; --st-jetzt-flaeche: #3a2a14; --st-marke: #ff7a75; } }
:root[data-darstellung="dunkel"] { --st-jetzt: #f5a524; --st-jetzt-flaeche: #3a2a14; --st-marke: #ff7a75; }

.st-karte { margin-bottom: 1.2rem; border: 1px solid var(--zart); border-radius: var(--rund-karte); background: var(--grund); overflow: hidden; }
.st-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: .95rem 1.2rem; border-bottom: 1px solid var(--zart); background: var(--grund); }
.st-ttl { display: flex; align-items: flex-start; gap: .6rem; min-width: 0; }
.st-ttl h2 { margin: 0; font-family: var(--schrift); font-size: 1.02rem; }
.st-ttl .sub { display: block; margin-top: .1rem; font-size: .82rem; color: var(--blass); }
.st-ico { flex: none; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--rund); color: var(--st-ok-text); background: var(--st-ok-flaeche); }
.st-ico.warn { color: var(--st-jetzt); background: var(--st-jetzt-flaeche); }
.st-ico .symbol { width: 1.1rem; height: 1.1rem; }
.st-body { padding: 1.1rem 1.2rem; }
.st-flaeche { padding-top: 1rem; }
.st-fuss { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.2rem; border-top: 1px solid var(--zart); background: var(--grund); }
.st-fuss .st-grund { flex: 1; text-align: right; font-size: .85rem; color: var(--st-jetzt); }
.st-fuss .knopf .symbol { width: 1rem; height: 1rem; }
.st-badge { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; color: var(--blass); background: var(--zart); }
.st-badge .symbol { width: .85rem; height: .85rem; }
.st-badge.ok { color: var(--st-ok-text); background: var(--st-ok-flaeche); }
.st-badge.warn { color: var(--st-jetzt); background: var(--st-jetzt-flaeche); }
.st-badge.gen { animation: st-puls 1.4s ease-in-out infinite; }
.st-badge.mono { font-variant-numeric: tabular-nums; }
@keyframes st-puls { 50% { opacity: .45; } }

.st-cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.1rem; }
.st-cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem 1.1rem; }
@container (max-width: 60rem) { .st-cols3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.st-fld.breit { grid-column: 1 / -1; }
.st-fld label { display: block; margin-bottom: .25rem; font-size: .84rem; font-weight: 600; }
.st-fld label small { font-weight: 400; color: var(--blass); }
.st-fld input, .st-fld textarea { width: 100%; border-color: var(--linie); border-radius: 6px; }
.st-fld input:hover, .st-fld textarea:hover { border-color: var(--feldrand); }
.st-fld .st-hilfe { display: block; margin-top: .2rem; font-size: .76rem; color: var(--blass); }
.st-fld .st-fehler { display: block; margin-top: .2rem; font-size: .8rem; font-weight: 600; color: var(--fehler); }
.st-geaendert { border-color: var(--st-jetzt) !important; box-shadow: 0 0 0 1px var(--st-jetzt); }
.st-fest { margin-top: 1.2rem; padding: .9rem 1rem; border: 1px dashed var(--linie); border-radius: var(--rund); }
.st-fest h3 { display: flex; align-items: center; gap: .4rem; margin: 0 0 .2rem; font-family: var(--schrift); font-size: .92rem; }
.st-fest h3 .symbol { width: 1rem; height: 1rem; }

/* Abschluss: der volle Ring (fertig-ring) */
.st-spur { fill: none; stroke: var(--zart); stroke-width: 4; }
.st-bogen { fill: none; stroke: var(--st-ok); stroke-width: 4; stroke-linecap: round; }
.st-bogen.voll { stroke-dasharray: 100 100; animation: st-ring 1s var(--kurve) both; }
@keyframes st-ring { from { stroke-dasharray: 0 100; } }
.st-vergleich { width: 100%; border-collapse: collapse; margin-bottom: .5rem; font-size: .88rem; }
.st-vergleich th, .st-vergleich td { padding: .45rem .5rem; border-bottom: 1px solid var(--zart); text-align: left; vertical-align: top; }

/* 2b */
.st-ansage { padding: .9rem 1rem; border: 1px solid var(--linie); border-radius: 6px; background: var(--grund); }
.st-ansage-kopf { display: flex; justify-content: space-between; gap: .6rem; align-items: center; margin-bottom: .6rem; }
.st-spieler { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.st-leiste { flex: 1; height: .35rem; border-radius: 1rem; background: var(--zart); overflow: hidden; }
.st-leiste i { display: block; width: 0; height: 100%; background: var(--st-ok); }
.st-leiste.spielt i { animation: st-spielen 4s linear forwards; }
.st-leiste.laeuft i { width: 40%; animation: st-lauf 1.1s ease-in-out infinite alternate; }
@keyframes st-spielen { to { width: 100%; } }
@keyframes st-lauf { from { margin-left: 0; } to { margin-left: 60%; } }
.st-zitat { margin: 0 0 .5rem; font-size: .9rem; }
.st-datei { display: inline-block; margin-bottom: .4rem; font-family: var(--st-mono); font-size: .78rem; color: var(--blass); }

/* 2c und 2d: Spalte links, Bild rechts */
.pipe-buehne { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); gap: 1.4rem; align-items: start; }
@container (max-width: 62rem) { .pipe-buehne { grid-template-columns: minmax(0, 1fr); } }
.pipe-kopfzeile { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; margin-bottom: .9rem; }
.pipe-titel { margin: .2rem 0 .6rem; font-family: var(--schrift); font-size: .98rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.pipe-nst { font-family: var(--st-mono); font-size: .85rem; color: var(--st-ok-text); }
.pk-liste { display: flex; flex-direction: column; }
.pk { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); align-items: center; gap: .55rem; padding: .5rem .3rem; border-top: 1px solid var(--zart); font-size: .88rem; }
.pk-wert { grid-template-columns: 1.6rem minmax(0, 1fr) auto auto; cursor: copy; border-radius: var(--rund); }
.st-fest .pk-wert { grid-template-columns: minmax(0, 1fr) auto auto; }
.pk-wert:hover { background: var(--zart); }
.pk-wert.kopiert { background: var(--st-ok-flaeche); }
.pk-marke { display: inline-block; width: 1.45rem; height: 1.45rem; border-radius: 50%; font-size: .72rem; font-weight: 700; line-height: 1.45rem; text-align: center; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #fff; background: var(--akzent); }
.pk-marke.leer { background: none; }
.pk-tun { white-space: pre-line; }
.pk-k { color: var(--blass); }
.pk-v { font-family: var(--st-mono); font-size: .82rem; font-weight: 600; text-align: right; word-break: break-word; color: var(--text); }
.pk-ico .symbol { width: .95rem; height: .95rem; color: var(--blass); }
.pipe-nav { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: 1rem; }
.pipe-knopf { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid var(--linie); border-radius: 50%; background: var(--grund); color: var(--text); cursor: pointer; }
.pipe-knopf.primaer { border-color: var(--petrol); color: var(--auf-petrol); background: var(--petrol); }
.pipe-knopf:disabled { opacity: .45; cursor: default; }
.pipe-knopf .symbol { width: 1.15rem; height: 1.15rem; }
.unsichtbar-platz { visibility: hidden; }
.pipe-punkte { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; }
.pipe-punkte i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--zart); }
.pipe-punkte i.ok { background: var(--st-ok); }
.pipe-punkte i.hier { outline: 2px solid var(--st-jetzt); outline-offset: 1px; }

/* 2c wie ZAI Studio (Post-its #2/#3, Runde 3 „In Einrichtung“): Kasten je Zeile, Nummer im gesperrten Feld,
   die Frage am Fuß der Spalte (gestaltung.css .nst, .frei-box, .nst-stift, .frei-frage). */
.frei-2c { align-items: stretch; }
.frei-spalte { display: flex; flex-direction: column; min-width: 0; }
.frei-liste { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .9rem; }
.nst { display: flex; align-items: center; gap: .65rem; padding: .5rem .75rem .5rem .55rem; border: 1px solid var(--linie); border-radius: 6px; background: var(--grund); }
.nst.is-dran { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 6%, var(--grund)); }
.nst.is-strittig { border-color: var(--fehler); background: color-mix(in srgb, var(--fehler) 5%, var(--grund)); }
.nst-rollen { flex: 1; min-width: 0; }
.nst-rolle { display: block; font-size: .82rem; }
.nst-rolle + .nst-rolle { margin-top: .3rem; padding-top: .3rem; border-top: 1px solid var(--zart); }
.nst.is-dran .nst-rolle + .nst-rolle { border-top-color: color-mix(in srgb, var(--akzent) 20%, var(--grund)); }
.nst-voll { display: block; margin-top: .1rem; font-family: var(--st-mono); font-size: .76rem; color: var(--blass); }
.frei-box { flex: none; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 1.5px solid var(--linie); border-radius: 7px; color: transparent; background: var(--grund); user-select: none; }
.frei-box .symbol { width: 1.05rem; height: 1.05rem; stroke-width: 2.6; }
.frei-box.is-halb { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 12%, var(--grund)); }
.frei-strich { width: .6rem; height: 2px; border-radius: 1px; background: var(--akzent-text); }
.frei-box.is-voll { border-color: var(--akzent); color: #fff; background: var(--akzent); }
.st-haken { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border: 1.5px solid var(--linie); border-radius: 50%; }
.st-haken.voll { border-color: var(--st-ok); color: #fff; background: var(--st-ok); }
.st-haken .symbol { width: .8rem; height: .8rem; }
.frei-spalte input.nst-feld {
  flex: none; width: 4.6rem; min-height: 2.25rem; padding: .3rem .4rem; text-align: center;
  font-family: var(--st-mono); font-size: 1rem; font-weight: 700; color: var(--akzent-text);
  border: 1px solid var(--feldrand); border-radius: 6px; background: var(--grund);
}
.frei-spalte input.nst-feld[readonly] { cursor: default; border-color: var(--zart); background: var(--flaeche); }
.frei-spalte input.nst-feld[readonly]:focus-visible { outline: none; }
.frei-spalte input.nst-feld[readonly]::selection { background: transparent; }
.nst-stift { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; margin-left: auto; padding: 0; border: 1px solid transparent; border-radius: 6px; color: var(--blass); background: none; opacity: .55; }
.nst:hover .nst-stift { opacity: 1; border-color: var(--linie); }
.nst-stift:hover { color: var(--akzent-text); background: var(--zart); }
.nst-stift:focus-visible { opacity: 1; }
.nst-stift .symbol { width: 1rem; height: 1rem; }
/* Die Frage steht still am Fuß der Spalte, die Liste wächst darüber (Studio .frei-frage). */
.frei-frage { flex: none; margin-top: auto; padding: .85rem 1rem; border: 1px solid var(--linie); border-radius: 6px; background: var(--grund); container-type: inline-size; }
.frei-frage.is-strittig { border-color: var(--fehler); background: color-mix(in srgb, var(--fehler) 4%, var(--grund)); }
.frei-frage.is-strittig .frei-frage-text b { color: var(--fehler); }
.frei-frage-kopf { display: flex; align-items: center; gap: .4rem; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--blass); }
.frei-frage-kopf .symbol { width: .95rem; height: .95rem; }
/* In einer Zeile, auch die längste Frage (Post-it #5, Runde 4). */
.frei-frage-text { margin: .35rem 0 0; font-size: clamp(.7rem, 2.85cqi, .95rem); font-weight: 600; line-height: 1.4; }
.frei-frage-text b { font-family: var(--st-mono); color: var(--akzent-text); }
.frei-fehler { display: flex; align-items: center; gap: .35rem; margin: .45rem 0 0; font-size: .82rem; font-weight: 600; color: var(--fehler); }
.frei-fehler .symbol { flex: none; width: 1rem; height: 1rem; }
.frei-frage-knoepfe { display: flex; gap: .5rem; margin-top: .75rem; }
.frei-frage-knoepfe .symbol { width: .95rem; height: .95rem; }
.frei-buehne { position: relative; align-self: start; }
.frei-schild { position: absolute; left: 0; right: 0; bottom: 0; padding: .7rem .8rem; border-radius: 0 0 var(--rund) var(--rund); color: #fff; background: linear-gradient(transparent, rgba(10, 14, 22, .92) 35%); }
.frei-marken { display: inline-block; margin-right: .5rem; padding: 0 .4rem; border-radius: 1rem; font-size: .75rem; font-weight: 700; background: var(--st-marke); }
.frei-weg { font-size: .82rem; }
.frei-reiter { display: flex; gap: .3rem; margin-top: .5rem; }
.frei-reiter button { padding: .25rem .6rem; border: 1px solid rgba(255,255,255,.35); border-radius: 1rem; font-size: .75rem; color: #fff; background: transparent; cursor: pointer; }
.frei-reiter button[aria-pressed="true"] { background: rgba(255,255,255,.2); border-color: #fff; }

/* Attrappe der 3CX-Konsole (immer hell, wie die Anlage) */
.ax { position: relative; border: 1px solid #c9ced8; border-radius: var(--rund); overflow: hidden; background: #f4f6f9; color: #1f2937; font-size: .74rem; aspect-ratio: 1673 / 909; display: flex; flex-direction: column; }
.ax-top { display: flex; align-items: center; gap: 1rem; padding: .35rem .6rem; color: #fff; background: #0f5aa8; font-weight: 700; }
.ax-suche { flex: 1; max-width: 12rem; height: .9rem; border-radius: 3px; background: rgba(255,255,255,.25); }
.ax-rumpf { flex: 1; display: grid; grid-template-columns: 8.5rem 1fr; min-height: 0; }
.ax-menue { display: flex; flex-direction: column; gap: .1rem; padding: .4rem; background: #fff; border-right: 1px solid #e3e6eb; }
.ax-menue span { padding: .2rem .4rem; border-radius: 3px; color: #4b5563; }
.ax-menue span.an { color: #0f5aa8; background: #e5effa; font-weight: 700; }
.ax-inhalt { padding: .5rem .7rem; overflow: hidden; display: flex; flex-direction: column; gap: .3rem; }
.ax-zeile { display: grid; grid-template-columns: 1.3rem 11rem 1fr; gap: .4rem; align-items: center; }
.ax-marke { display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%; font-size: .65rem; font-weight: 700; color: #fff; background: #e3625f; box-shadow: 0 0 0 2px #fff; }
.ax-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #374151; }
.ax-feld { height: 1.25rem; padding: 0 .35rem; border: 1px solid #cbd2dc; border-radius: 3px; background: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.2rem; font-family: var(--st-mono); font-size: .68rem; }
.ax-feld.knopf-art { width: 5rem; border-color: #0f5aa8; background: #e5effa; }
.ax-tabelle { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .3rem; }
.ax-tz { display: grid; grid-template-columns: 2fr 3fr 2fr; gap: .4rem; padding: .25rem; background: #fff; border-radius: 2px; }
.ax-tz i { height: .45rem; border-radius: 2px; background: #dfe3ea; }
.ax-tz.markiert { outline: 2px solid #e3625f; }
.ax-hinweis { position: absolute; right: .5rem; top: 2.1rem; padding: .15rem .45rem; border-radius: 3px; font-size: .65rem; color: #6b7280; background: rgba(255,255,255,.85); }

/* Abschluss */
.fertig-blatt { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2.4rem 1.5rem 2rem; }
.fertig-ring { position: relative; width: 6.5rem; height: 6.5rem; margin-bottom: 1.2rem; }
.fertig-ring > svg { width: 6.5rem; height: 6.5rem; transform: rotate(-90deg); }
.fertig-ring .haken { position: absolute; inset: 0; display: grid; place-items: center; color: var(--st-ok); }
.fertig-ring .haken .symbol { width: 2.6rem; height: 2.6rem; stroke-width: 2.5; }
.fertig-blatt h2 { margin: 0; font-size: 1.6rem; }
.fertig-sub { max-width: 56ch; margin: .5rem 0 0; color: var(--blass); }
.fertig-zeit { margin: .6rem 0 0; font-family: var(--st-mono); font-size: .8rem; color: var(--blass); }
.fertig-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; width: 100%; max-width: 62rem; margin-top: 1.8rem; text-align: left; }
@container (max-width: 50rem) { .fertig-karten { grid-template-columns: minmax(0, 1fr); } }
.fertig-karte { padding: .9rem 1rem; border: 1px solid var(--zart); border-radius: var(--rund); background: var(--flaeche); }
.fertig-karte h3 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .5rem; font-family: var(--schrift); font-size: .92rem; }
.fertig-karte h3 .symbol, .fertig-karte li .symbol { width: 1rem; height: 1rem; color: var(--st-ok); flex: none; }
.fertig-karte ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .35rem; font-size: .84rem; }
.fertig-karte li { display: flex; gap: .45rem; }
.fertig-karte code, .st-fld code { font-family: var(--st-mono); font-size: .8rem; }
.fertig-nav { display: flex; gap: .7rem; margin-top: 1.8rem; }
.st-danach { width: 100%; max-width: 62rem; margin-top: 1.4rem; padding: .9rem 1rem; border: 1px dashed var(--st-ok); border-radius: var(--rund); text-align: left; }
.st-danach h3 { margin: 0 0 .5rem; font-family: var(--schrift); font-size: .92rem; }
.st-danach-zeile { display: grid; grid-template-columns: 1.4rem 1fr auto; gap: .6rem; align-items: center; padding: .45rem 0; border-top: 1px solid var(--zart); font-size: .88rem; }
.st-danach-zeile.ok { color: var(--blass); }

/* Vorgangskarte, Weiche */
.st-stand { display: grid; grid-template-columns: 12rem 1fr; gap: .45rem 1rem; margin: 0; font-size: .9rem; }
.st-stand dt { color: var(--blass); }
.st-stand dd { margin: 0; display: flex; gap: .35rem; align-items: center; }
.st-stand dd.ok { color: var(--st-ok); font-weight: 600; }
.st-stand dd .symbol { width: 1rem; height: 1rem; }
.pipe-knopf { padding: 0; }
.pipe-knopf:hover { background: var(--zart); }
.pipe-knopf.primaer:hover { background: #74e1e1; }
.frei-reiter button:hover { background: rgba(255,255,255,.15); }
.gw-kl-wahl button, .gw-kl-wahl button:hover { padding: 0; background: none; }
.ax-hinweis { top: auto; bottom: .4rem; }
.frei-buehne .ax-hinweis { bottom: auto; top: 2.1rem; }
button:disabled, .knopf[disabled] { opacity: .45; cursor: not-allowed; }

/* Lücken wie in ZAI Studio (Post-it #1, Runde 3, 14.10.2026): keine Vorschau; wer weiter
   will, sieht das Feld rot pulsieren und den Grund über dem Fuß. */
.st-fld textarea.st-beanstandet {
  border-color: var(--fehler);
  animation: st-beanstandet 0.5s ease-in-out 2;
}

@keyframes st-beanstandet {
  50% {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fehler) 30%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .st-fld textarea.st-beanstandet {
    animation: none;
  }
}

.st-luecke-hinweis {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0 1.2rem 0.9rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--fehler);
}

.st-luecke-hinweis[hidden] {
  display: none;
}

.st-luecke-hinweis .symbol {
  flex: none;
  width: 1rem;
  height: 1rem;
}

.pipe-knopf.vor .symbol {
  transform: rotate(-90deg);
}

.st-bild {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1673 / 909;
  border-radius: var(--rund);
}

.st-ansage audio {
  width: 100%;
  margin-bottom: 0.5rem;
}

.st-vergleich .vorher {
  text-decoration: line-through;
  color: var(--fehler);
}

.st-vergleich .nachher {
  color: var(--erfolg);
}

.frei-reiter a {
  padding: 0.25rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 1rem;
  font-size: 0.75rem;
  text-decoration: none;
  color: #fff;
}

.frei-reiter a[aria-current] {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.2);
}

/* Nur bis zum erreichten Fundort (Studio: renderFreiBild). */
.frei-reiter .gesperrt {
  padding: 0.25rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}

form.st-danach-zeile button {
  justify-self: end;
}

button.petrol {
  color: var(--auf-petrol);
  background: var(--petrol);
}

button.petrol:hover {
  background: #74e1e1;
}

.st-karte .knopf.petrol,
.seitenkopf .knopf.petrol,
.brettkopf .knopf.petrol,
.fertig-nav .knopf.petrol {
  justify-content: center;
  margin-bottom: 0;
}

button.klein {
  padding: 0.3rem 0.65rem;
  font-size: 0.85rem;
}

button.klein .symbol {
  width: 1rem;
  height: 1rem;
}

button.gruen {
  background: var(--erfolg);
}

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

/* ---------- Vertrieb (V3, nach dem Vorbild Pipedrive; bis 09.10.2026 „Gewinnung“) ---------- */
/* Seit Post-it #30 (13.10.2026) gebaut wie das Ticketbrett: dieselben Spalten,
   dieselbe Karte (Gesicht links, Name, Ort, Fußband mit dem nächsten Schritt
   wie die Fälligkeit am Ticket). Vier Spalten: drei Stufen und „In Einrichtung“
   (Ike und Chris, 13.10.2026; „Vertrag unterschrieben“ ist der Übergang, keine Spalte). */

/* Fünf Spalten: Kontakt, Angebot, Verträge (X107, X108), Onboarding (X102), In Einrichtung. */
.brett.gw-brett {
  grid-template-columns: repeat(5, minmax(10rem, 1fr));
  padding-bottom: 5rem;
}

.gw-brett .spalte {
  min-height: 20rem;
}

.gw-brett .spalte.gw-einrichtung {
  background: color-mix(in srgb, var(--petrol) 13%, var(--flaeche));
}

/* ---- Phase „Verträge“ (X107, Chris, 28.10.2026): eine Farbe für Spalte, Pfad und Fußband;
   die Karte zeigt die drei Unterlagen ZA · DS · VM als Chips, das Fußband zählt sie. */
:root {
  --vt: #b7791f;
}

:root[data-darstellung="dunkel"] {
  --vt: #e0b35a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-darstellung="hell"]) {
    --vt: #e0b35a;
  }
}

.gw-brett .spalte.gw-vertraege {
  background: color-mix(in srgb, var(--vt) 13%, var(--flaeche));
}

.pfad .schritt.vertraege {
  --c: var(--vt);
}

.gw-docs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0.45rem 0 0;
}

.gw-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--blass);
  background: var(--grund);
}

.gw-chip .symbol {
  width: 0.7rem;
  height: 0.7rem;
}

.gw-chip.an {
  border-color: var(--st-ok);
  color: var(--st-ok-text);
  background: var(--st-ok-flaeche);
}

.fussband.gw-band {
  --frist: var(--vt);
}

/* „In Einrichtung“ im Pfad, solange eine Unterlage fehlt: blass, der Klick führt zur Karte. */
.pfad .schritt.gesperrt {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Die Karte „Vertragsunterlagen“ im Blatt: eine Zeile je Unterlage mit Haken, Name und Datei. */
.gw-unterlagen {
  margin-bottom: 1rem;
}

.gw-doc-zeile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.9rem;
  align-items: center;
  padding: 0.65rem 0;
  border-top: 1px solid var(--linie);
}

.gw-doc-zeile:first-of-type {
  border-top: 0;
}

.gw-doc-zeile form {
  display: contents;
}

.gw-doc-zeile .t {
  font-weight: 600;
}

.gw-doc-zeile .u {
  display: block;
  font-size: 0.78rem;
  color: var(--blass);
}

.gw-doc-zeile.an .u {
  color: var(--st-ok-text);
}

.gw-doc-recht {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--blass);
}

.gw-doc-recht .knopf {
  margin: 0;
}

.gw-datei {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--text);
}

.gw-datei .symbol {
  width: 0.9rem;
  height: 0.9rem;
}

.gw-haken-gross {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.35rem 0.8rem 0.35rem 0.5rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  font: inherit;
  font-size: 0.85rem;
  color: var(--blass);
  background: var(--grund);
  box-shadow: none;
  cursor: pointer;
}

.gw-haken-gross.an {
  border-color: var(--st-ok);
  color: var(--st-ok-text);
  background: var(--st-ok-flaeche);
}

.gw-haken {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  border: 1.5px solid var(--feldrand);
  border-radius: 50%;
  color: transparent;
  background: var(--grund);
}

.gw-haken .symbol {
  width: 0.65rem;
  height: 0.65rem;
}

.gw-haken-gross.an .gw-haken {
  border-color: var(--st-ok);
  color: #fff;
  background: var(--st-ok);
}

.gw-abschluss .hinweis.gw-sperre {
  margin: 0.7rem 0 0;
  padding: 0.45rem 0.7rem;
  border-radius: var(--rund);
  background: var(--zart);
}

.gw-karte {
  padding: 0.6rem 0.7rem 0;
}

.gw-karte.fest {
  cursor: default;
}

/* Die Plakette der Einrichtung ist kein Knopf. */
.gw-karte.fest .plakette {
  cursor: default;
}

/* Rechts in der Ortszeile die Art des Schritts (Anruf, Termin, E-Mail, Aufgabe). */
.karte-marke.schritt {
  color: var(--blass);
}

/* Die Marke „neu“ bis zum ersten Kontakt (X108): eine kleine Pille in der Ortszeile. */
.karte-marke.neu {
  margin: 0 0.3rem 0 0.35rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  background: var(--akzent);
}

.gw-ablage {
  position: fixed;
  left: 15rem;
  right: 1.5rem;
  bottom: 1rem;
  z-index: 30;
  display: none;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.leiste-schmal .gw-ablage {
  left: 6rem;
}

body.gw-zieht .gw-ablage {
  display: grid;
}

.gw-ablage > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 4.2rem;
  border: 2px dashed currentColor;
  border-radius: var(--rund-karte);
  font-weight: 700;
  background: var(--grund);
  box-shadow: var(--schatten-gross);
}

/* Archivieren ist kein Fehler: die Ablage in der Grundfarbe (Post-it #33, 13.10.2026). */
.gw-ablage .verloren {
  color: var(--text);
}

/* Karten, die über einer Ablage hängen, verschwinden darin. */
.gw-ablage .gw-karte {
  display: none;
}

.gw-akte {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* Das Blatt eines Interessenten, gebaut wie das Ticket (Ike und Chris, 13.10.2026):
   eine Farbe für Pfad und Kopf; wo am Ticket die Uhr steht, die beiden Ausgänge. */
.gw-pfad,
.gw-held {
  --c: var(--akzent);
}

.gw-ausgang {
  gap: 0.4rem;
}

.gw-ausgang .knopf {
  justify-content: center;
  min-width: 9.5rem;
}

/* Der letzte Schritt im Pfad führt in die Einrichtung: grün wie der Erfolg. */
.pfad a.schritt {
  text-decoration: none;
}

.pfad .schritt.einrichtung {
  color: var(--erfolg);
  background: color-mix(in srgb, var(--erfolg) 14%, var(--grund));
}

.pfad .schritt.einrichtung:hover {
  color: var(--grund);
  background: var(--erfolg);
}

.gw-abschluss {
  margin-top: 1rem;
}

.gw-abschluss .hinweis {
  margin: 0 0 0.75rem;
}

.kartenform.unterschrieben {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wahl-klappe .nur-erledigt {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--zart);
}

.wahl-klappe .nur-erledigt button {
  width: 100%;
}

.gw-verloren-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* „Interessent anlegen“ (bis 15.10.2026 ein freistehender Kasten .maske-eigen,
   Post-it #30): seit X87 (Ike und Chris, 15.10.2026, nach drei Wegwerf-Runden,
   Fassung „Zweierraster bündig“) eine Maske wie die Ticketmaske, die über dem
   Brett „Vertrieb“ steht und von rechts hereinfährt wie das Blatt. Sie trägt
   .maske-teil für den Aufbau, steht aber fest und sichtbar im Fenster; herein
   und hinaus geht es mit den Keyframes des Blatts (ticket.js setzt „raus“). */
.maske-allein {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
  width: 62%;
  max-width: 66rem;
  min-width: 46rem;
  transform: none;
  visibility: visible;
  transition: none;
}

.maske-allein.einfahren {
  animation: maske-rein 0.35s var(--kurve);
}

.maske-allein.raus {
  animation: blatt-raus 0.25s ease-in forwards;
}

@keyframes maske-rein {
  from {
    transform: translateX(3.75rem);
    opacity: 0;
  }
}

.maske-allein .maske-inhalt {
  height: 100%;
}

.maske-allein .maske-partner textarea {
  width: 100%;
  max-width: none;
}

/* Hinweis unter einem Feld: die Kurzform aus dem Namen, das Telefonformat, die Maildomäne. */
.feldhinweis {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: var(--blass);
}

.feldhinweis code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color: var(--akzent-text);
}

.maske-zeile.eins {
  grid-template-columns: 1fr;
}

/* Zweierraster, alle Kanten bündig (Post-it „sollen bündig sein“): links Straße über
   Telefon, rechts PLZ und Ort als Unterraster über E-Mail. */
.maske-zeile.zwei {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.maske-zeile.plz-ort {
  grid-template-columns: 7rem minmax(0, 1fr);
  min-width: 0;
}

/* Erster Schritt: Art und Was in einer Zeile, darunter mit etwas mehr Abstand
   (Post-it „etwas mehr Abstand“) „Fällig am“ mit der Leiste ohne Uhrzeit. */
.maske-schritt {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.maske-zeile.art-was {
  grid-template-columns: 11rem minmax(0, 1fr);
}

.maske-schritt .faellig-titel + .maske-zeile + .faellig-titel {
  margin-top: 0.6rem;
}

/* Schmale Fenster: Die Maske ist die Seite, das Brett bleibt weg (wie das Blatt). */
@media (max-width: 56rem) {
  .maske-allein {
    position: static;
    display: flex;
    width: 100%;
    min-width: 0;
    max-width: none;
    border-left: 0;
    box-shadow: none;
  }

  .maske-allein .maske-inhalt {
    height: auto;
  }

  .maske-allein .maske-seite,
  .maske-allein .maske-felder {
    overflow: visible;
  }
}

/* Agenturpartner im Stammblatt: Name, Vermittlernummer, Entfernen (Post-it #27, 13.10.2026). */
.zeile.partnerzeile {
  grid-template-columns: minmax(7rem, auto) minmax(0, 1fr) auto;
}

.zeile.partnerzeile .l {
  color: var(--text);
}

.zeile.partnerzeile.inaktiv .l,
.zeile.partnerzeile.inaktiv .w {
  color: var(--blass);
}

.partner-weg {
  margin: 0;
}

/* In der schmalen Spalte des Blatts: der Name darüber, darunter Nummer und Entfernen. */
@container (max-width: 50rem) {
  .blatt-karten .zeile.partnerzeile {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* In der Akte ist der Agenturblitz eine Spalte mit fester Höhe: Was dort
   steht, darf nicht schrumpfen, sonst fallen die Reiter auf einen Pixel. */
.blitz > .akte-reiter,
.blitz > .gw-akte,
.blitz > .st-vorgang,
.blitz > .band {
  flex-shrink: 0;
}

.fertig-karte code {
  overflow-wrap: anywhere;
}

/* ------------------------------------------- Fußband an der Ticketkarte */
/* Runde 6 · „Trennlinie“ (Ike und Chris, 09.10.2026): unten an jeder offenen
   Karte eine Fußzeile mit „4 Tage offen“ und der Fälligkeit. Ihre Oberkante
   ist die Restzeit-Linie, grau, solange nichts drängt; erst heute fällig
   (orange) oder überfällig (rot) wird die Fußzeile zum getönten Band. Sie ist ein Rahmen, kein Kasten mit Höhe: Rahmen rundet
   der Browser überall gleich, so ist sie auf jeder Karte gleich dick, auch
   wenn die Karte auf einem krummen Pixelwert steht. */
.ticketkarte:has(> .fussband) {
  padding-bottom: 0;
}

.fussband {
  --frist: var(--blass);
  --frist-flaeche: transparent;
  --frist-linie: var(--frist-grau-linie);
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
  margin: 0.45rem -0.7rem 0;
  padding: 0.32rem 0.7rem;
  border-top: 1px solid var(--zart);
  border-radius: 0 0 calc(var(--rund-karte) - 1px) calc(var(--rund-karte) - 1px);
  font-size: 0.72rem;
  color: var(--frist);
  background: var(--frist-flaeche);
}

/* Ein leeres Band (Interessent ohne nächsten Schritt, Post-it #31) behält die Höhe einer Zeile. */
.fussband-text:empty::after {
  content: "\200b";
}

.fussband.heute {
  --frist: var(--frist-orange);
  --frist-linie: var(--frist-orange);
}

.fussband.ueber {
  --frist: var(--frist-rot);
  --frist-flaeche: var(--frist-rot-flaeche);
  --frist-linie: var(--frist-rot);
}

/* Die Restzeit-Linie ist so dick wie die feine Kante ohne Fälligkeit, bei
   „erledigt“ und „In Einrichtung“ (Ike und Chris, 13.10.2026); so sind alle
   Fußbänder gleich hoch. */
.fussband.mit-linie {
  border-top: 1px solid color-mix(in srgb, var(--frist-linie) 22%, var(--grund));
}

.fussband-linie {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 0;
}

.fussband-linie i {
  display: block;
  height: 0;
  border-top: 1px solid var(--frist-linie);
}

/* Eine Zeile, auf jeder Karte gleich hoch (Ike und Chris, 09.10.2026): Wird
   es eng, kürzt „4 Tage offen“, die Fälligkeit bleibt ganz. */
.fussband-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--blass);
  white-space: nowrap;
}

.fussband-frist {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  font-weight: 700;
  white-space: nowrap;
}

.fussband.spaeter .fussband-frist {
  font-weight: 600;
}

.fussband-frist .symbol {
  width: 0.85rem;
  height: 0.85rem;
}

.fussband-linie .p5 { width: 5%; }
.fussband-linie .p10 { width: 10%; }
.fussband-linie .p15 { width: 15%; }
.fussband-linie .p20 { width: 20%; }
.fussband-linie .p25 { width: 25%; }
.fussband-linie .p30 { width: 30%; }
.fussband-linie .p35 { width: 35%; }
.fussband-linie .p40 { width: 40%; }
.fussband-linie .p45 { width: 45%; }
.fussband-linie .p50 { width: 50%; }
.fussband-linie .p55 { width: 55%; }
.fussband-linie .p60 { width: 60%; }
.fussband-linie .p65 { width: 65%; }
.fussband-linie .p70 { width: 70%; }
.fussband-linie .p75 { width: 75%; }
.fussband-linie .p80 { width: 80%; }
.fussband-linie .p85 { width: 85%; }
.fussband-linie .p90 { width: 90%; }
.fussband-linie .p95 { width: 95%; }
.fussband-linie .p100 { width: 100%; }

/* ------------------------------------------------------- Ticketkarte
   Aus acht Wegwerf-Runden (Ike und Chris, 09.10.2026): links das Gesicht
   des Bearbeiters, daneben Name und darunter mit etwas Abstand die Agentur,
   rechts in der Agenturzeile nur ein Symbol (Warteschlange, Anruf,
   Ergebnis). Jede Karte ist gleich hoch: Jede Zeile bleibt einzeilig und
   kürzt mit „…“, der Kopf hat eine feste Höhe. Oben links eine Form in der
   Farbe des Eingangskanals, die zur Mitte dicker wird und unter dem Gesicht
   spitz ausläuft (Runde 8 · 4 „Länger“); für Inbound und Outbound (Regel 9). */

.ticketkarte[data-kanal] {
  padding: 0.6rem 0.7rem 0 0.9rem;
}

.ticketkarte[data-kanal="telefon"] { --kanal: var(--kanal-telefon); }
.ticketkarte[data-kanal="e_mail"] { --kanal: var(--kanal-mail); }
.ticketkarte[data-kanal="ab_nachricht"] { --kanal: var(--kanal-ab); }
.ticketkarte[data-kanal="crm4us"] { --kanal: var(--kanal-crm); }

/* Von der Oberkante bis zur Unterkante des Gesichts: Polster oben, halber
   Kopf, halbes Gesicht. */
.karte-kanal {
  position: absolute;
  z-index: 1;
  top: -1px;
  left: -1px;
  width: 6px;
  height: calc(1px + 0.6rem + 1.425rem + 1.2rem);
  border-top-left-radius: var(--rund-karte);
  background: var(--kanal, transparent);
  clip-path: polygon(0 0, 35.0% 0.0%, 47.1% 4.2%, 58.7% 8.3%, 69.6% 12.5%, 79.2% 16.7%, 87.3% 20.8%, 93.6% 25.0%, 97.8% 29.2%, 99.8% 33.3%, 99.8% 37.5%, 98.7% 41.7%, 96.6% 45.8%, 93.5% 50.0%, 89.5% 54.2%, 84.5% 58.3%, 78.7% 62.5%, 72.1% 66.7%, 64.8% 70.8%, 56.8% 75.0%, 48.2% 79.2%, 39.2% 83.3%, 29.8% 87.5%, 20.0% 91.7%, 10.1% 95.8%, 0.0% 100.0%, 0 100%);
}

.karte-kopf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.65rem;
  align-items: center;
  height: 2.85rem;
}

.karte-kopf .plakette {
  width: 2.4rem;
  height: 2.4rem;
  font-size: 0.78rem;
}

.karte-kopf .plakette img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.karte-text {
  min-width: 0;
}

/* Etwas kleiner als die Grundschrift (Ike und Chris, 13.10.2026). */
.ticketkarte .karte-name {
  display: block;
  overflow: hidden;
  font-size: 0.9rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticketkarte.fremd .karte-name {
  padding-right: 3.1rem;
}

.karte-agentur {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: 1.3rem;
  margin-top: 0.22rem;
  font-size: 0.8rem;
  color: var(--blass);
}

.karte-agenturname {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.karte-marke {
  position: relative;
  z-index: 1;
  flex: none;
  display: inline-flex;
  color: var(--akzent-text);
}

.karte-marke .symbol {
  width: 1rem;
  height: 1rem;
}

.karte-marke.anruf { color: var(--ph-anruf); }
.karte-marke.erreicht { color: var(--erfolg); }
.karte-marke.nicht_erreicht { color: var(--fehler); }
.karte-marke.nummer_falsch { color: var(--warn); }

.ticketkarte[data-kanal] > .fussband {
  margin-left: -0.9rem;
  padding-left: 0.9rem;
}

.fussband.erledigt .fussband-frist {
  font-weight: 400;
  color: var(--blass);
}

.fussband.erledigt .fussband-frist .symbol {
  color: var(--erfolg);
  stroke-width: 2.6;
}

/* Der Weg ins Archiv neben „Interessent“ (Post-it #33, 13.10.2026). */
.brettkopf .gw-archiv {
  margin-bottom: 0;
}

.gw-archiv .anzahl {
  font-weight: 400;
  color: var(--blass);
}

/* Anhänge an der Akte (Post-its #28 und #29, 13.10.2026): Name zum Herunterladen,
   darunter Art, Größe, Tag und Person; Entfernen fragt einmal nach. */
.anhaenge {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

.anhang {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 0.6rem;
}

.anhang-name {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  font-weight: 600;
  text-decoration: none;
}

.anhang-name span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.anhang-name .symbol {
  flex: none;
  width: 1rem;
  height: 1rem;
}

.anhang-info {
  grid-column: 1;
  font-size: 0.8rem;
  color: var(--blass);
}

.anhang-weg {
  grid-column: 2;
  grid-row: 1 / span 2;
  text-align: right;
}

.anhang-weg summary {
  font-size: 0.8rem;
  color: var(--blass);
  cursor: pointer;
  list-style: none;
}

.anhang-weg summary::-webkit-details-marker {
  display: none;
}

.anhang-weg[open] summary {
  display: none;
}

/* Offen steht die Rückfrage in einer eigenen Zeile, damit der Name lesbar bleibt. */
.anhang-weg[open] {
  grid-column: 1 / -1;
  grid-row: auto;
  margin-top: 0.3rem;
  text-align: left;
}

.anhang-weg button {
  background: var(--fehler);
  border-color: var(--fehler);
}

.angebot-erstellen {
  margin: 0;
}

/* ---- Eigene Bedienelemente statt der des Browsers (Post-it #37, 13.10.2026) */

/* Datei wählen: ein Knopf wie jeder andere, das Feld liegt unsichtbar darin;
   daneben die gewählte Datei (dateiwahl.js). Die Regeln für Beschriftungen
   in Formularen gelten hier nicht. */
.dateiwahl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.7rem;
  min-width: 0;
}

.dateiwahl > label.knopf {
  position: relative;
  display: inline-flex;
  margin: 0;
  font-size: 0.85rem;
  color: var(--akzent-text);
}

.dateiwahl-name {
  min-width: 0;
  font-size: 0.85rem;
  color: var(--blass);
  overflow-wrap: anywhere;
}

.dateiwahl-name.gewaehlt {
  font-weight: 600;
  color: var(--text);
}

/* Auswahl unter mehreren (etwa der Grund beim Archivieren): Knöpfe zum
   Anklicken über echten Radio-Knöpfen, Tab und Pfeiltasten gehen weiter. */
div.wahlknoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

div.wahlknoepfe label {
  position: relative;
  display: inline-flex;
  margin: 0;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--feldrand);
  border-radius: var(--rund);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  background: var(--grund);
  cursor: pointer;
}

div.wahlknoepfe label:hover {
  background: var(--zart);
}

div.wahlknoepfe input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

div.wahlknoepfe label:has(input:checked) {
  border-color: var(--akzent);
  color: var(--auf-akzent);
  background: var(--akzent);
}

div.wahlknoepfe label:has(input:focus-visible) {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
}

/* ------------------------------------------------------------- Pipeline wie ZAI Studio
   Post-it #3, Runde 3 (14.10.2026). Die linke Säule liegt absolut in ihrer Zelle und gibt
   der Zeile keine Höhe: das Maß gibt das Bild (alle 1673×909), die Pfeile sitzen in allen
   Teilschritten an derselben Stelle, der Inhalt scrollt. Nur, solange Säule und Bild
   nebeneinander stehen – darunter hieße absolut unsichtbar (Studio: gestaltung.css). */
.pipe-buehne:has(.pipe-saeule) {
  align-items: stretch;
}

.pipe-saeule {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pipe-saeule .pipe-kopfzeile {
  flex: none;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--zart);
}

.pipe-saeule .pipe-nav {
  flex: none;
  margin-top: auto;
  padding-top: 0.75rem;
}

.pipe-buehne:has(.pipe-saeule) .pipe-bild {
  align-self: start;
}

@container (min-width: 62rem) {
  .pipe-spalte:has(.pipe-saeule) {
    position: relative;
  }

  .pipe-saeule {
    position: absolute;
    inset: 0;
  }

  /* Kein Scrollbalken (Post-it #6, Runde 2 „In Einrichtung“): Die Liste rückt zusammen, bis sie passt
     (einrichtung.js setzt is-dicht-1 bis -3); reicht das nicht, zeigt „mehr ↓“ den Rest. */
  .pipe-inhalt {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
  }

  .pipe-inhalt::-webkit-scrollbar {
    display: none;
  }

  /* Der Verlauf sagt: Hier kommt noch etwas (einrichtung.js setzt is-mehr). */
  .pipe-inhalt.is-mehr {
    mask-image: linear-gradient(#000 calc(100% - 2.5rem), transparent);
  }
}

/* Zwei feste Spalten: Beschriftung oder Handgriff links, der Wert daneben; sie stoßen nie
   aneinander. Die roten Marken hängen an einer Spur. */
.pipe-inhalt .pk-liste {
  --spalte: min(185px, 40%);
}

.pipe-inhalt .pk,
.pipe-inhalt .pk-wert {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  position: relative;
  padding: 0.6rem 0.3rem 0.6rem 0;
  border-top: 0;
}

.pipe-inhalt .pk::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(0.725rem - 0.5px);
  width: 1px;
  background: color-mix(in srgb, var(--st-marke) 35%, var(--grund));
}

.pipe-inhalt .pk:first-child::before {
  top: 50%;
}

.pipe-inhalt .pk:last-child::before {
  bottom: 50%;
}

.pipe-inhalt .pk:only-child::before {
  display: none;
}

.pipe-inhalt .pk::after {
  content: "";
  position: absolute;
  left: 2.1rem;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--zart);
}

.pipe-inhalt .pk:last-child::after {
  display: none;
}

.pipe-inhalt .pk-marke {
  flex: none;
  position: relative;
  z-index: 1;
}

.pipe-inhalt .pk-marke.leer {
  background: var(--grund);
}

.pipe-inhalt .pk-marke.leer::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--st-marke) 35%, var(--grund));
}

.pipe-inhalt .pk-tun {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Hat die Liste Werte, bleibt ein Handgriff ohne Wert in der linken Spalte (Post-it #1, Runde 4). */
.pipe-inhalt .pk-liste:has(.pk-wert) .pk-tun {
  flex: none;
  width: var(--spalte);
  margin-right: 0.4rem;
}

/* Zusammenrücken nur zwischen den Zeilen: Schrift und Anfang der Liste bleiben in allen
   Teilschritten gleich (Post-its #3 und #4, Runde 5). */
.pipe-inhalt.is-dicht-1 .pk:not(:first-child) {
  padding-top: 0.45rem;
}

.pipe-inhalt.is-dicht-1 .pk:not(:last-child) {
  padding-bottom: 0.45rem;
}

.pipe-inhalt.is-dicht-2 .pk:not(:first-child) {
  padding-top: 0.3rem;
}

.pipe-inhalt.is-dicht-2 .pk:not(:last-child) {
  padding-bottom: 0.3rem;
}

.pipe-inhalt.is-dicht-3 .pk:not(:first-child) {
  padding-top: 0.18rem;
}

.pipe-inhalt.is-dicht-3 .pk:not(:last-child) {
  padding-bottom: 0.18rem;
}

.pipe-mehr {
  display: none;
  align-self: center;
  margin: -0.2rem 0 0;
  padding: 0.1rem 0.6rem;
  border: 0;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--akzent-text);
  background: var(--zart);
}

.pipe-mehr:hover {
  background: color-mix(in srgb, var(--akzent) 15%, var(--grund));
}

.pipe-saeule:has(.pipe-inhalt.is-mehr) .pipe-mehr {
  display: inline-flex;
}

/* Zurück mit demselben Pfeil wie Weiter (Post-it #2, Runde 5). */
.pipe-knopf.rueck .symbol {
  transform: rotate(90deg);
}

/* Der Pfad steht als Schild im Bild wie in 2c, ohne Marken (Post-its #4, Runden 3 und 4). */
.pipe-bild {
  position: relative;
}

/* Vollbild wie ZAI Studio (gemeinsam.js vollAuf): Klick aufs Bild, Klick irgendwohin oder Esc schließt. */
.pipe-bild img[data-voll],
.frei-buehne img[data-voll] {
  cursor: zoom-in;
}

.ei-voll {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: #0b0d11;
  cursor: zoom-out;
}

.ei-voll[hidden] {
  display: none;
}

.ei-voll img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pipe-inhalt .pk-k {
  flex: none;
  width: var(--spalte);
  margin-right: 0.4rem;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.pipe-inhalt .pk-v {
  flex: 1;
  min-width: 0;
  text-align: left;
  word-break: normal;
  overflow-wrap: break-word;
}

/* „807  Name“: Die Nummer hält ihre Spalte, der Name bricht darunter an den Unterstrichen um. */
.pipe-inhalt .pk-v-haenge {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.6em;
}

.pipe-inhalt .pk-ico,
.pipe-inhalt .pk .knopf {
  flex: none;
}

.pipe-inhalt .pk-wert:hover {
  background: linear-gradient(90deg, transparent 0 2.1rem, var(--zart) 2.1rem);
}

.pipe-inhalt .pk-wert.kopiert {
  background: linear-gradient(90deg, transparent 0 2.1rem, var(--st-ok-flaeche) 2.1rem);
}

/* ------------------------------------------------------------- Einrichtung im Blatt (X83)
   Wie das Blatt eines Interessenten; am Pfad hängt unter „In Einrichtung“ die Strecke im
   selben Pfeilstil, rechts ein schmaler Streifen für die Bemerkungen. */
.ei-kopf {
  margin-bottom: 0;
}

.pfad span.schritt {
  cursor: default;
}

/* Ohne Kasten: die Schritte hängen an einer feinen Linie unter dem Pfad (Runde 1 · 3 „In Einrichtung“). */
.ei-unterpfad {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 1.4rem;
  margin: 0.7rem 0 1.1rem;
  padding: 0.7rem 0 0;
  border-top: 1px solid var(--linie);
}

/* Der Pfeil zeigt auf „In Einrichtung“; einrichtung.js misst die Stelle. */
.ei-unterpfad::before,
.ei-unterpfad::after {
  content: "";
  position: absolute;
  top: -0.5rem;
  left: var(--pfeil-x, 60%);
  border: 0.5rem solid transparent;
  border-top: 0;
  border-bottom: 0.5rem solid var(--linie);
}

.ei-unterpfad::after {
  top: -0.43rem;
  margin-left: 1px;
  border-width: 0 calc(0.5rem - 1px) 0.48rem;
  border-bottom-color: var(--seite);
}

.ei-gruppe {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.ei-gtitel {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--blass);
}

.ei-gruppe .pfad {
  flex-wrap: wrap;
  row-gap: 0.3rem;
}

.ei-gruppe .pfad .schritt {
  height: 1.85rem;
  font-size: 0.78rem;
}

.ei-gruppe.is-locked .schritt {
  color: color-mix(in srgb, var(--blass) 80%, var(--grund));
  background: var(--flaeche);
}

.ei-blatt .gw-held {
  margin-bottom: 1rem;
}

.blatt-raster.ei-raster {
  grid-template-columns: minmax(0, 1fr) 3.2rem;
}

.ei-streifen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.1rem 0;
  border-left: 1px solid var(--linie);
  text-decoration: none;
  color: var(--akzent-text);
  background: var(--grund);
}

.ei-streifen:hover {
  background: var(--zeile-hover);
}

.ei-streifen .symbol {
  width: 1.2rem;
  height: 1.2rem;
}

.ei-streifen-zahl {
  min-width: 1.4rem;
  padding: 0 0.3rem;
  border-radius: 0.7rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  background: var(--zart);
}

.ei-streifen-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* Geöffnet legen sich die Bemerkungen über den rechten Rand des Blatts (Post-it #1, Runde 4). */
.ei-bemerkungen {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  width: min(24rem, 100%);
  box-shadow: -1rem 0 2rem rgba(10, 20, 40, 0.2);
}

.ei-bemerkungen[hidden] {
  display: none;
}

.ei-bemerkungen .bemerkungsleiste {
  flex: 1;
  min-width: 0;
}

.ei-bem-zu {
  position: absolute;
  top: 0.7rem;
  right: 0.9rem;
  z-index: 1;
  font-size: 1.4rem;
  line-height: 1;
  text-decoration: none;
  color: var(--blass);
}

.ei-bem-zu:hover {
  color: var(--text);
}

/* ------------------------------------------------------------- Anpassen im Blatt über der Akte (X88, 15.10.2026)
   Wie das Blatt der Einrichtung, aber über der Akte und ohne Bemerkungsstreifen: Stammdaten, Informationen
   und Ansagetexte auf einer Seite, geänderte Felder gelb mit dem bisherigen Wert darunter; nach dem Speichern
   der Pfad nur mit den Schritten, die die Änderungen in 3CX nach sich ziehen. */
.blatt-raster.an-raster {
  grid-template-columns: minmax(0, 1fr);
}

.an-kopf {
  align-items: flex-end;
  margin-bottom: 0.6rem;
}

.an-kopf h1 {
  margin: 0;
  font-size: 1.55rem;
}

.an-unterzeile {
  flex-basis: 100%;
  max-width: 60ch;
  margin: 0;
}

/* Der Pfad an einer feinen Linie, wie der Unterpfad der Einrichtung */
.an-pfad {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0.4rem 0 1.1rem;
  padding: 0.7rem 0 0;
  border-top: 1px solid var(--linie);
}

.an-pfad .pfad {
  flex-wrap: wrap;
  row-gap: 0.3rem;
}

.an-pfad .pfad .schritt {
  height: 1.95rem;
  font-size: 0.8rem;
}

.an-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.an-form .st-karte {
  margin: 0;
}

.an-fuss {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: -0.5rem;
  border: 1px solid var(--kartenrand);
  border-radius: var(--rund-karte);
  box-shadow: 0 -6px 14px -10px rgba(10, 20, 40, 0.35);
}

.an-fuss .an-folgen {
  color: var(--blass);
}

.an-fuss .an-folgen.an {
  font-weight: 600;
  color: var(--st-jetzt);
}

/* geänderte Felder: Marke am Namen, der bisherige Wert durchgestrichen darunter */
.an-marke {
  margin-left: 0.4rem;
  padding: 0 0.4rem;
  border-radius: 0.6rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
  color: var(--st-jetzt);
  background: var(--st-jetzt-flaeche);
}

.an-alt {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--blass);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--blass) 60%, transparent);
}

.an-alt-k {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}

.st-ansage.still {
  opacity: 0.6;
}

/* Eine angefangene Anpassung ist in der Akte nur eine Plakette im Kopf */
.plakette-anpassung {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.7rem;
  padding: 0.1rem 0.6rem 0.1rem 0.45rem;
  border: 1px solid color-mix(in srgb, var(--st-jetzt) 45%, transparent);
  border-radius: 1rem;
  font-size: 0.76rem;
  font-weight: 700;
  vertical-align: middle;
  text-decoration: none;
  color: var(--st-jetzt);
  background: var(--st-jetzt-flaeche);
}

.plakette-anpassung:hover {
  color: var(--grund);
  background: var(--st-jetzt);
}

.plakette-anpassung:first-child {
  margin-left: 0;
}

.plakette-punkt {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

/* ---- Nutzerverwaltung (X96, 16.10.2026)
   Links Suche und Personen in Gruppen, rechts die gewählte Person: Kopfkarte
   mit Anwesenheit, Rechte als Tabelle „Recht · Sieht · Darf“, Zugang als
   Zeilen (Knopf links, Erklärung rechts). Links und Rückfragen als Dialog.
   Aus sechs Wegwerf-Runden mit Ike und Chris. */

.nv-kopf {
  margin-bottom: 1.1rem;
}

.nv {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  max-width: 78rem;
}

.nv-links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.nv-suche {
  position: relative;
  margin: 0;
}

.nv-suche .symbol {
  position: absolute;
  top: 50%;
  left: 0.6rem;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  color: var(--blass);
  pointer-events: none;
}

.nv-suche input {
  box-sizing: border-box;
  width: 100%;
  padding-left: 2.1rem;
  font-size: 0.9rem;
}

/* Feste Zeilen: Avatar, Name und Status in einem Raster; lange Namen brechen um. */
.nv-liste a {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  min-height: 2.9rem;
  padding: 0.3rem 0.6rem;
}

.nv-liste a[hidden] {
  display: none;
}

.nv-liste a > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.nv-liste a b {
  font-weight: 600;
}

.nv-liste a small {
  font-size: 0.74rem;
  font-weight: 400;
  color: var(--blass);
}

.nv-liste a.ausgeschieden {
  color: var(--blass);
}

.nv-liste a.ausgeschieden .avatar {
  opacity: 0.5;
}

.nv-trenn {
  display: block;
  height: 1px;
  margin: 0.3rem 0.6rem;
  background: var(--linie);
}

.nv-trenn[hidden] {
  display: none;
}

.nv-gruppe {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--linie);
}

.nv-gruppe summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.6rem;
  border-radius: var(--rund);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--blass);
  cursor: pointer;
  list-style: none;
}

.nv-gruppe summary::-webkit-details-marker {
  display: none;
}

.nv-gruppe summary::before {
  content: "▸";
  font-size: 0.7rem;
}

.nv-gruppe[open] summary::before {
  content: "▾";
}

.nv-gruppe summary small {
  padding: 0 0.4rem;
  border-radius: 1rem;
  background: var(--zart);
  font-size: 0.72rem;
}

.nv-gruppe summary:hover {
  background: var(--zart);
}

.nv-gruppe.leer summary {
  opacity: 0.55;
}

.nv-neu {
  margin-top: 0.5rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--linie);
  border-radius: 0;
  color: var(--akzent-text);
}

.nv-neu .symbol {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0 auto;
}

.nv-neu[aria-current] {
  border-radius: var(--rund);
}

/* Avatar mit Anwesenheitspunkt: grün anwesend, gelb abwesend, grau offline. */
.nv-avp {
  position: relative;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  line-height: 0;
}

.avatar.nv-av {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-color: var(--linie);
  font-size: 0.7rem;
  line-height: 1;
  color: var(--akzent-text);
  background: var(--zart);
}

img.avatar.nv-av {
  border-color: transparent;
}

.nv-punkt {
  position: absolute;
  right: -0.1rem;
  bottom: -0.1rem;
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid var(--grund);
  border-radius: 50%;
  background: #b9bfc9;
}

.nv-punkt.anwesend {
  background: var(--erfolg);
}

.nv-punkt.abwesend {
  background: #e3b505;
}

.nv-liste a[aria-current="page"] .nv-punkt {
  border-color: var(--zart);
}

.nv-rechts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.nv-held {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.nv-held h1 {
  margin: 0 0 0.2rem;
  font-size: 1.5rem;
}

.nv-held p {
  margin: 0 0 0.3rem;
}

.nv-blass {
  color: var(--blass);
}

.nv-kopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.nv-pille {
  display: inline-block;
  padding: 0.05rem 0.55rem;
  border: 1px solid var(--linie);
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--blass);
}

.nv-pille.still {
  border-color: transparent;
  background: var(--zart);
}

.nv-pille.warn {
  border-color: var(--warn);
  color: var(--warn);
}

.nv-pille.petrol {
  border-color: var(--petrol);
  color: var(--akzent-text);
}

.nv-anw {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
}

.nv-anw .nv-punkt {
  position: static;
  width: 0.7rem;
  height: 0.7rem;
  border: 0;
}

.nv-karte h2 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

/* Rechte als Tabelle; der Schalter in der ersten Spalte ist ein Formular je Zeile. */
.nv-rtab {
  font-size: 0.85rem;
}

.nv-rtab th {
  padding: 0.3rem 0.6rem 0.3rem 0;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nv-rtab td {
  padding: 0.55rem 0.9rem 0.55rem 0;
  vertical-align: top;
}

.nv-rtab td:first-child {
  width: 9rem;
  white-space: nowrap;
}

.nv-rtab tbody tr:last-child td {
  border-bottom: 0;
}

.nv-rtab ul {
  margin: 0;
  padding-left: 1rem;
  line-height: 1.4;
  color: var(--blass);
}

.nv-rtab .rechte {
  gap: 0;
}

.nv-rtab .recht {
  font-weight: 700;
}

.nv-rt-schalter {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  cursor: pointer;
}

.nv-rt-schalter input {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
  border: 1.5px solid var(--feldrand);
  border-radius: 3px;
  background: var(--grund);
  appearance: none;
  cursor: pointer;
}

.nv-rt-schalter input:checked {
  border-color: var(--akzent);
  background: var(--akzent);
}

.nv-rt-schalter input:checked::before {
  content: "";
  width: 0.35rem;
  height: 0.65rem;
  border: solid var(--auf-akzent);
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}

/* Zugang: Knopf links, Erklärung rechts in derselben Zeile. */
.nv-zugang {
  display: flex;
  flex-direction: column;
}

.nv-zeile {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--zart);
}

.nv-zeile:first-child {
  padding-top: 0.2rem;
  border-top: 0;
}

.nv-zeile form {
  margin: 0;
}

.nv-zeile button,
.nv-zeile .knopf {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  margin: 0;
}

.nv-zeile .symbol {
  width: 1rem;
  height: 1rem;
}

.nv-zeile p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--blass);
}

.nv-ausknopf {
  border-color: var(--fehler);
  color: var(--fehler);
}

.nv-ausknopf:hover {
  border-color: var(--fehler);
  color: var(--fehler);
  background: color-mix(in srgb, var(--fehler) 8%, var(--grund));
}

.nv-ausknopf.scharf,
.nv-ausknopf.scharf:hover {
  border-color: var(--fehler);
  color: #fff;
  background: var(--fehler);
}

/* Neuer Nutzer rechts auf der Seite */
.nv-teil {
  padding: 1.1rem 1.4rem 1.4rem;
  border: 1px solid var(--kartenrand);
  border-radius: var(--rund-karte);
  background: var(--grund);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.15);
}

.nv-neuform .formular p {
  max-width: 28rem;
}

.nv-neuform .fehler {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.85rem;
}

.nv-neuform h3 {
  margin: 1rem 0 0.4rem;
  font-size: 1rem;
}

.nv-neuform .knopfreihe a {
  margin: 0;
}

/* Dialog über der Seite: Link, Rückfrage zum Zurücksetzen, zum Ausscheiden. */
.nv-schleier {
  cursor: pointer;
}

.nv-dialog {
  position: fixed;
  z-index: 12;
  top: 40%;
  left: 50%;
  width: min(34rem, 90vw);
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--kartenrand);
  border-radius: var(--rund-karte);
  color: var(--text);
  background: var(--grund);
  box-shadow: var(--schatten-gross);
  transform: translate(-50%, -50%);
}

.nv-dialog h2 {
  margin: 0 0 0.5rem;
}

.nv-dialog p {
  margin: 0 0 0.8rem;
  font-size: 0.9rem;
  color: var(--blass);
}

.nv-dialog .meldung {
  margin: 0 0 0.8rem;
}

.nv-dialog .hinweis {
  font-size: 0.85rem;
}

.nv-dialog .link-ausgabe {
  margin: 0 0 0.6rem;
}

.nv-dialog .knopfreihe a,
.nv-dialog .knopfreihe button {
  margin: 0;
}

.nv-regeln {
  margin: 0 0 0.8rem;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--blass);
}

@media (max-width: 70rem) {
  .nv {
    grid-template-columns: 1fr;
  }

  .nv-zeile {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------ Auswertung
   X100 (26.10.2026), acht Wegwerf-Runden mit Ike und Chris: blaues Band mit
   Zeitraum, Filter und fünf Kennzahlen, darunter Verlauf und Rangliste; die
   Einzelansicht je Person oder Agentur mit Pfeilknopf zurück. Höhen und
   Breiten der Balken sind Klassen (hoehe-0…10, breite-0…20), die CSP erlaubt
   keine Stile im Markup. Klassen mit Vorsilbe aw-. */

.aw-band {
  margin: 0 0 1rem;
  padding: 1rem 1.25rem 1.15rem;
  border-radius: var(--rund-karte);
  color: #ffffff;
  background: linear-gradient(120deg, var(--akzent), color-mix(in srgb, var(--akzent) 80%, var(--petrol)));
}

.aw-band-einzel {
  padding: 1.3rem 1.5rem 1.5rem;
}

.aw-kopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin: 0 0 0.6rem;
}

.aw-band-einzel .aw-kopfzeile {
  margin-bottom: 0.9rem;
}

.aw-band h1 {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  color: #ffffff;
}

.aw-band-einzel h1 {
  gap: 0.85rem;
}

.aw-band .aw-avatar {
  width: 3.1rem;
  height: 3.1rem;
  border-color: #ffffff;
  color: var(--akzent);
  background: #ffffff;
  font-size: 1.05rem;
}

.aw-band .aw-avatar .symbol {
  width: 1.5rem;
  height: 1.5rem;
}

/* Der Pfeilknopf zurück (Runde 8, Fassung 2) */
.aw-pfeilknopf {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-right: 0.2rem;
  border-radius: 50%;
  color: var(--akzent);
  background: #ffffff;
  box-shadow: var(--schatten);
}

.aw-pfeilknopf .symbol {
  width: 1.2rem;
  height: 1.2rem;
}

.aw-pfeilknopf:hover {
  color: var(--auf-petrol);
  background: var(--petrol);
}

.aw-betreut {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.6rem;
  padding: 0.15rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  font-family: var(--schrift);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

.aw-betreut .symbol {
  width: 0.9rem;
  height: 0.9rem;
}

.aw-betreut:hover {
  background: rgba(255, 255, 255, 0.22);
}

.aw-band .filterknopf {
  margin: 0;
  padding: 0.3rem 0.8rem;
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

.aw-band .filterknopf:hover,
.aw-band .filterknopf[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.22);
}

/* Die Suche im Band (X101): wie die Kundensuche am Brett rollt das Feld aus dem
   Knopf „Suchen“ aus (Klasse offen, auswertung.js). Ohne Skript (kein mit-skript
   am html) steht das Feld offen, der Knopf fehlt. */
.aw-suche {
  position: relative;
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  margin: 0 0 0 auto;
}

.aw-suche.offen {
  flex-basis: 24rem;
}

.aw-suche .aw-suchknopf {
  display: none;
}

.mit-skript .aw-suche .aw-suchknopf {
  display: inline-flex;
}

.mit-skript .aw-suche:not(.offen) .aw-suchform {
  display: none;
}

.mit-skript .aw-suche.offen .aw-suchknopf {
  display: none;
}

.aw-suchform {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.aw-suchfeld input {
  width: 100%;
  min-width: 0;
  border-color: transparent;
  color: var(--text);
  background: var(--grund);
}

.aw-band .aw-suchknopf {
  flex: none;
  margin: 0;
  padding: 0.3rem 0.8rem;
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

.aw-band .aw-suchknopf:hover {
  background: rgba(255, 255, 255, 0.22);
}

.aw-band .aw-suchknopf .symbol {
  width: 1.05rem;
  height: 1.05rem;
}

.aw-namen {
  position: absolute;
  top: calc(100% + 0.3rem);
  right: 0;
  left: 0;
  z-index: 40;
  max-height: 24rem;
  margin: 0;
  padding: 0.3rem;
  overflow: auto;
  list-style: none;
  border: 1px solid var(--linie);
  border-radius: var(--rund-karte);
  color: var(--text);
  background: var(--grund);
  box-shadow: var(--schatten-gross);
  font-family: var(--schrift);
  font-size: 0.9rem;
}

.aw-namen[hidden],
.aw-namen .weg {
  display: none;
}

.aw-namen-gruppe {
  padding: 0.35rem 0.5rem 0.15rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blass);
}

.aw-namen a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.5rem;
  border-radius: var(--rund);
  text-decoration: none;
  color: var(--text);
}

.aw-namen a:hover,
.aw-namen li:not(.weg) a:focus {
  background: var(--zart);
}

.aw-namen a span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aw-namen a small {
  flex: none;
  color: var(--blass);
  font-variant-numeric: tabular-nums;
}

.aw-namen a.null {
  color: var(--blass);
}

.aw-suche-leer {
  margin: -0.4rem 0 0.8rem;
}

.aw-band .punkt {
  color: var(--auf-petrol);
  background: var(--petrol);
}

/* Zeitraumzeile: Pfeile, Knopf mit Klappe, Länge, aktive Filter */
.aw-zrzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.8rem;
}

.aw-schieb,
.aw-zrzeile .aw-zrknopf {
  display: inline-flex;
  align-items: center;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--rund);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  text-decoration: none;
}

.aw-schieb {
  justify-content: center;
  width: 1.95rem;
  height: 1.95rem;
  font-size: 1.1rem;
  line-height: 1;
}

.aw-schieb:hover,
.aw-zrzeile .aw-zrknopf:hover,
.aw-zr[open] > .aw-zrknopf {
  background: rgba(255, 255, 255, 0.22);
}

.aw-zr {
  position: relative;
}

.aw-zrzeile .aw-zrknopf {
  gap: 0.5rem;
  padding: 0.3rem 0.8rem;
  font-size: 0.88rem;
  list-style: none;
  cursor: pointer;
}

.aw-zrknopf::-webkit-details-marker {
  display: none;
}

.aw-zrknopf .symbol {
  width: 1.05rem;
  height: 1.05rem;
}

.aw-zrknopf b {
  font-weight: 700;
}

.aw-zrknopf span,
.aw-zrknopf i {
  font-style: normal;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
  font-variant-numeric: tabular-nums;
}

.aw-zrknopf i {
  font-size: 0.75rem;
}

.aw-zrinfo {
  font-size: 0.88rem;
  font-weight: 600;
}

.aw-aktiv {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}

.aw-aktiv-leer {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.72);
}

.aw-aktivchip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.12rem 0.3rem 0.12rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
}

.aw-aktivchip i {
  display: inline-grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  font-style: normal;
  font-size: 0.8rem;
  line-height: 1;
  background: rgba(255, 255, 255, 0.25);
}

.aw-aktivchip:hover i {
  color: var(--akzent);
  background: #ffffff;
}

/* Die Klappe: links die Vorgaben, rechts Felder und zwei Monate. */
.aw-klappe {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 0.75rem;
  width: max-content;
  max-width: calc(100vw - 2rem);
  color: var(--text);
}

.aw-schnell {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-right: 0.75rem;
  border-right: 1px solid var(--linie);
}

.aw-schnell .dw-schnellwahl {
  text-decoration: none;
  color: var(--text);
  border-radius: var(--rund);
}

.aw-schnell .dw-schnellwahl:hover {
  background: var(--zart);
}

.aw-schnell .dw-schnellwahl.an {
  color: var(--auf-akzent);
  background: var(--akzent);
}

.aw-kal-felder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
}

.aw-feldpfeile {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

.aw-feldpfeile label {
  margin: 0 0.3rem 0 0;
  font-weight: 600;
}

.aw-feldpfeile input {
  width: 7.2rem;
  padding: 0.25rem 0.4rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.aw-klappe .dw-blaettern {
  display: inline-grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  color: var(--akzent-text);
  background: var(--grund);
}

.aw-klappe .dw-blaettern:hover {
  background: var(--zart);
}

.aw-klappe .dw-blaettern.aus {
  visibility: hidden;
}

.aw-kal-tage {
  margin-left: auto;
  color: var(--blass);
}

.aw-kal {
  display: grid;
  grid-template-columns: 15rem 15rem;
  gap: 1rem;
}

.aw-kal .dw-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 1.95rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1;
  color: var(--text);
  background: transparent;
  box-shadow: none;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.aw-kal .dw-tag:hover {
  background: var(--zart);
}

.aw-kal .dw-tag.we {
  color: var(--blass);
}

.aw-kal .dw-tag.vorbei {
  opacity: 0.45;
}

.aw-kal .dw-tag.heute {
  box-shadow: inset 0 0 0 1.5px var(--akzent-text);
  font-weight: 700;
}

.aw-kal .dw-tag.vorschau {
  border-radius: 0;
  background: var(--zart);
}

.aw-kal .dw-tag.an {
  opacity: 1;
  font-weight: 700;
  color: var(--auf-akzent);
  background: var(--akzent);
}

/* Anfang und Ende als Rechtecke mit leiser Kante (Runden 5 und 6). */
.aw-kal .dw-tag.von-ende {
  border-radius: 3px 0 0 3px;
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--petrol) 70%, transparent);
  cursor: ew-resize;
}

.aw-kal .dw-tag.bis-ende {
  border-radius: 0 3px 3px 0;
  box-shadow: inset -2px 0 0 color-mix(in srgb, var(--petrol) 70%, transparent);
  cursor: ew-resize;
}

.aw-kal .dw-tag.von-ende.bis-ende {
  border-radius: 3px;
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--petrol) 70%, transparent), inset -2px 0 0 color-mix(in srgb, var(--petrol) 70%, transparent);
}

.aw-kal .dw-tag.fremd {
  cursor: default;
}

.aw-zieht,
.aw-zieht * {
  cursor: col-resize !important;
  user-select: none;
}

/* Fünf Kennzahlen im Band mit Vergleich zum Vorzeitraum */
.aw-bandzahlen {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.2rem;
  margin: 1.1rem 0 0;
}

.aw-bandzahlen > div {
  padding: 0.1rem 0 0.1rem 0.8rem;
  border-left: 2px solid var(--petrol);
}

.aw-bandzahlen small {
  display: block;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
}

.aw-bandzahlen b {
  display: block;
  margin: 0.1rem 0;
  font-size: 1.75rem;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.aw-vergleich {
  display: block;
  font-style: normal;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.72);
}

.aw-vergleich.plus {
  color: #bff5d6;
}

.aw-vergleich.minus {
  color: #ffd0c2;
}

/* Verlauf: Balken je Stunde, Tag, Woche oder Monat */
.aw-inhalt {
  min-width: 0;
}

.aw-verlauf {
  margin: 0 0 1rem;
}

.aw-verlauf h2,
.aw-balkenkarte h2 {
  margin: 0 0 0.6rem;
  font-size: 1rem;
}

.aw-balkenkarte h2 small {
  font-family: var(--schrift);
  font-weight: 400;
  color: var(--blass);
}

.aw-balkenreihe {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: end;
  gap: 0.4rem;
  height: 7rem;
}

.aw-balkenreihe > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.aw-balkenreihe i {
  display: block;
  width: 100%;
  max-width: 2rem;
  border-radius: 3px 3px 0 0;
  background: var(--akzent);
}

.aw-balkenreihe i.laufend,
.aw-sb i.laufend {
  opacity: 0.45;
}

.aw-balkenreihe small {
  color: var(--blass);
}

.aw-balkenreihe b {
  font-size: 0.8rem;
}

.aw-reiter {
  margin: 0.25rem 0 0.8rem;
}

/* Rangliste: eine Karte je Person oder Agentur (Runde 3, Fassung 3) */
.aw-rang {
  display: grid;
  grid-template-columns: 1.6rem 2.75rem minmax(10rem, 1.1fr) minmax(8rem, 0.9fr) minmax(0, 2.1fr) 9rem;
  gap: 1rem;
  align-items: center;
  margin: 0 0 0.55rem;
  padding: 0.7rem 1rem;
}

.panel-offen .aw-rang {
  grid-template-columns: 1.6rem 2.75rem minmax(9rem, 1.1fr) minmax(7rem, 0.8fr) minmax(0, 2fr) 8rem;
  gap: 0.8rem;
}

.aw-rangnr {
  font-family: var(--schrift-titel);
  font-size: 1.35rem;
  text-align: center;
  color: var(--blass);
}

.aw-rang:first-of-type .aw-rangnr {
  color: var(--akzent-text);
}

.aw-rangbild .symbol {
  width: 1.3rem;
  height: 1.3rem;
}

.aw-rangname a {
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}

.aw-rangname small {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.78rem;
  color: var(--blass);
}

/* Beschriftete Verlaufsbalken (Runde 8, Post-it #1): Zahl oben, Woche unten. */
.aw-spark {
  display: flex;
  align-items: stretch;
  gap: 3px;
  height: 3.2rem;
}

.aw-sb {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.aw-sb b {
  font-size: 0.6rem;
  line-height: 1;
  color: var(--blass);
  font-variant-numeric: tabular-nums;
}

.aw-sb i {
  display: block;
  width: 100%;
  max-width: 1.6rem;
  margin-top: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--akzent);
  opacity: 0.6;
}

.aw-sb small {
  margin-top: 2px;
  font-size: 0.58rem;
  line-height: 1;
  color: var(--blass);
}

.aw-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.aw-pill {
  display: inline-flex;
  flex-direction: column;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  font-size: 0.82rem;
  line-height: 1.25;
  text-decoration: none;
  color: var(--text);
  background: var(--grund);
}

.aw-pill:hover {
  background: var(--zart);
}

.aw-pill small {
  font-size: 0.64rem;
  color: var(--blass);
}

.aw-pill b {
  font-variant-numeric: tabular-nums;
}

.aw-pill.warn {
  border-color: #e2b363;
  background: #fff6e5;
}

.aw-pill.an {
  border-color: var(--akzent);
  color: var(--auf-akzent);
  background: var(--akzent);
}

.aw-pill.an small {
  color: rgba(255, 255, 255, 0.8);
}

.aw-ranghaupt {
  position: relative;
  padding-bottom: 0.45rem;
  text-align: right;
}

.aw-ranghaupt b {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.aw-ranghaupt small {
  font-size: 0.72rem;
  color: var(--blass);
}

.aw-ranghaupt i {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--petrol);
}

/* Einzelansicht */
.aw-kennzahlen {
  margin: 0 0 0.9rem;
}

.aw-kennzahlen em {
  display: block;
  margin-top: 0.1rem;
  font-style: normal;
  font-size: 0.76rem;
  color: var(--blass);
}

.aw-zwei {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.8rem;
  margin: 0 0 0.8rem;
}

.aw-zwei .aw-verlauf {
  margin: 0;
}

.aw-balken {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr) 4.5rem;
  gap: 0.6rem;
  align-items: center;
  margin: 0.3rem 0;
  font-size: 0.85rem;
}

.aw-balken span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aw-balken i {
  display: block;
  height: 0.85rem;
  border-radius: 3px;
  background: var(--akzent);
}

.aw-balken b {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.aw-tickets h2 {
  margin: 0.4rem 0 0.5rem;
  font-size: 1.05rem;
}

.aw-tickets h2 small {
  font-family: var(--schrift);
  font-weight: 400;
  color: var(--blass);
}

.aw-tabelle {
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}

.aw-tabelle th,
.aw-tabelle td {
  padding: 0.4rem 0.6rem;
  white-space: nowrap;
}

.aw-tabelle th a {
  text-decoration: none;
  color: inherit;
}

.aw-tabelle th.an a {
  color: var(--akzent-text);
}

.aw-tabelle th.an.ab a::after {
  content: " ▾";
}

.aw-tabelle th.an.auf a::after {
  content: " ▴";
}

.aw-tabelle td.zahl {
  text-align: right;
}

.aw-phase {
  display: inline-block;
  padding: 0 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--blass);
  background: var(--zart);
}

.aw-phase.erledigt {
  color: #2e762e;
  background: #e7f3e7;
}

.aw-phase.klaerung_ausstehend {
  color: #7a4a00;
  background: #fff1d6;
}

/* Höhen 0–10 und Breiten 0–20 als Klassen (CSP). */
.aw-balkenreihe .hoehe-0, .aw-sb .hoehe-0 { height: 0; }
.aw-balkenreihe .hoehe-1, .aw-sb .hoehe-1 { height: 10%; min-height: 2px; }
.aw-balkenreihe .hoehe-2, .aw-sb .hoehe-2 { height: 20%; }
.aw-balkenreihe .hoehe-3, .aw-sb .hoehe-3 { height: 30%; }
.aw-balkenreihe .hoehe-4, .aw-sb .hoehe-4 { height: 40%; }
.aw-balkenreihe .hoehe-5, .aw-sb .hoehe-5 { height: 50%; }
.aw-balkenreihe .hoehe-6, .aw-sb .hoehe-6 { height: 60%; }
.aw-balkenreihe .hoehe-7, .aw-sb .hoehe-7 { height: 70%; }
.aw-balkenreihe .hoehe-8, .aw-sb .hoehe-8 { height: 80%; }
.aw-balkenreihe .hoehe-9, .aw-sb .hoehe-9 { height: 90%; }
.aw-balkenreihe .hoehe-10, .aw-sb .hoehe-10 { height: 100%; }
.aw-sb .hoehe-0 { height: 0; }
.aw-balken .breite-0, .aw-ranghaupt .breite-0 { width: 0; }
.aw-balken .breite-1, .aw-ranghaupt .breite-1 { width: 5%; }
.aw-balken .breite-2, .aw-ranghaupt .breite-2 { width: 10%; }
.aw-balken .breite-3, .aw-ranghaupt .breite-3 { width: 15%; }
.aw-balken .breite-4, .aw-ranghaupt .breite-4 { width: 20%; }
.aw-balken .breite-5, .aw-ranghaupt .breite-5 { width: 25%; }
.aw-balken .breite-6, .aw-ranghaupt .breite-6 { width: 30%; }
.aw-balken .breite-7, .aw-ranghaupt .breite-7 { width: 35%; }
.aw-balken .breite-8, .aw-ranghaupt .breite-8 { width: 40%; }
.aw-balken .breite-9, .aw-ranghaupt .breite-9 { width: 45%; }
.aw-balken .breite-10, .aw-ranghaupt .breite-10 { width: 50%; }
.aw-balken .breite-11, .aw-ranghaupt .breite-11 { width: 55%; }
.aw-balken .breite-12, .aw-ranghaupt .breite-12 { width: 60%; }
.aw-balken .breite-13, .aw-ranghaupt .breite-13 { width: 65%; }
.aw-balken .breite-14, .aw-ranghaupt .breite-14 { width: 70%; }
.aw-balken .breite-15, .aw-ranghaupt .breite-15 { width: 75%; }
.aw-balken .breite-16, .aw-ranghaupt .breite-16 { width: 80%; }
.aw-balken .breite-17, .aw-ranghaupt .breite-17 { width: 85%; }
.aw-balken .breite-18, .aw-ranghaupt .breite-18 { width: 90%; }
.aw-balken .breite-19, .aw-ranghaupt .breite-19 { width: 95%; }
.aw-balken .breite-20, .aw-ranghaupt .breite-20 { width: 100%; }

:root[data-darstellung="dunkel"] .aw-pill.warn {
  border-color: #8a6a2a;
  background: #2a2214;
}

:root[data-darstellung="dunkel"] .aw-phase.erledigt {
  color: #8fd48f;
  background: #1d2b1d;
}

:root[data-darstellung="dunkel"] .aw-phase.klaerung_ausstehend {
  color: #f0b35a;
  background: #2a2214;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-darstellung="hell"]) .aw-pill.warn {
    border-color: #8a6a2a;
    background: #2a2214;
  }

  :root:not([data-darstellung="hell"]) .aw-phase.erledigt {
    color: #8fd48f;
    background: #1d2b1d;
  }

  :root:not([data-darstellung="hell"]) .aw-phase.klaerung_ausstehend {
    color: #f0b35a;
    background: #2a2214;
  }
}

/* ================================================= Onboarding (X102, 26.10.2026) */
/* Eigene Spalte „Onboarding“ auf dem Brett „Vertrieb“ vor „In Einrichtung“ und als Phase im Lebenslauf;
   die Vorbereitung auf dem Blatt der Agentur; das Gespräch mit der Agentur als eine Seite mit neun
   aufklappbaren Abschnitten, je Abschnitt die Tabelle „Punkt · Haken · Angabe“ (Wegwerf-Runden 1–4). */
:root {
  --ob: #7a4fb8;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-darstellung="hell"]) {
    --ob: #a98be0;
  }
}

:root[data-darstellung="dunkel"] {
  --ob: #a98be0;
}

.gw-brett .spalte.gw-onboarding {
  background: color-mix(in srgb, var(--ob) 13%, var(--flaeche));
}

.pfad .schritt.onboarding {
  --c: var(--ob);
}

.ei-ob-held {
  margin-top: 1rem;
}

/* Onboarding (X111, 28.10.2026): zehn Folien, Gestaltung „Plakat“ aus zwei Wegwerf-Runden,
   im Firmenblau mit runden Ecken (Post-its #1 und #2, Runde 2). Vorsilbe ob-. */
.ob-form {
  margin: 0 -2rem;
}

.ob-folie {
  position: relative;
  padding: 0 0 1.4rem;
}

.ob-kopfzeile {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  padding: 0.6rem 2rem 0.7rem;
  font-size: 0.85rem;
  color: var(--blass);
}

.ob-kopfzeile b {
  color: var(--text);
}

.ob-folie .meldung {
  margin: 0 2rem 0.6rem;
}

.ob-kopfblock {
  padding: 2.2rem 4.5rem 2.4rem;
  color: #fff;
  background: var(--akzent);
}

.ob-thema {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.ob-kopfblock h1 {
  max-width: 20ch;
  margin: 0.5rem 0 0;
  font-size: 3.2rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff;
}

.ob-frage {
  margin: 0.5rem 0 0;
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.85);
}

.ob-folie.titel .ob-kopfblock {
  padding: 4.5rem 4.5rem 3.6rem;
  text-align: center;
}

.ob-folie.titel .ob-kopfblock h1 {
  max-width: none;
  font-size: 4rem;
}

/* Vortragsteil; die runden Pfeile in der Mitte gibt es seit 29.10.2026 nicht mehr (Post-it #7 der Wegwerf-Runde 4). */
.ob-mitte {
  position: relative;
  min-height: 5rem;
}

.ob-body {
  padding: 1.6rem 4.5rem 0;
}

.ob-folie.titel .ob-body {
  max-width: 52rem;
  margin: 0 auto;
  text-align: center;
}

.ob-folie.titel .ob-punkte {
  text-align: left;
}

.ob-lead {
  max-width: 54rem;
  margin: 0.6rem 0;
  font-size: 1.25rem;
  line-height: 1.5;
}

.ob-folie.titel .ob-lead {
  margin-left: auto;
  margin-right: auto;
}

/* Folie 2: zwei Karten mit Marken, Haken und Kreuz, die Überschrift als Band (Wegwerf-Runde 5, Fassung 1, 29.10.2026). */
.ob-spalten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  margin: 1.2rem 0 0.4rem;
}

.ob-spalte {
  padding: 0 0 0.8rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-karte);
  background: var(--grund);
  box-shadow: 0 2px 8px rgba(20, 30, 60, 0.06);
  overflow: hidden;
}

.ob-spalte h3 {
  margin: 0 0 0.6rem;
  padding: 0.6rem 1.1rem;
  font-size: 1rem;
  color: #fff;
  background: var(--akzent);
}

.ob-spalte.nicht h3 {
  background: var(--blass);
}

.ob-spalte ul {
  margin: 0;
  padding: 0 1.1rem;
  list-style: none;
  line-height: 1.5;
  font-size: 1.05rem;
}

.ob-spalte li {
  position: relative;
  padding: 0.35rem 0 0.35rem 2rem;
}

.ob-spalte li::before {
  content: "✓";
  position: absolute;
  top: 0.4rem;
  left: 0;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--akzent);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}

.ob-spalte.nicht li::before {
  content: "×";
  background: var(--linie);
  color: var(--text);
  font-size: 1rem;
}

.ob-drei {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  margin: 1.4rem 0;
}

.ob-weg {
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-karte);
  background: var(--grund);
}

.ob-weg-nr {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--akzent);
  color: #fff;
  font-family: var(--schrift-titel);
  font-size: 1.3rem;
}

.ob-weg h3 {
  margin: 0.7rem 0 0.3rem;
  font-size: 1.3rem;
}

.ob-weg p {
  margin: 0;
  line-height: 1.45;
  color: var(--blass);
}

.ob-punkte {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 1.2rem;
}

/* Eine Frage ist eine getönte Fläche, ihre Antworten liegen darin auf einer weißen Karte
   (.ob-steuer), die bis unten reicht (Wegwerf-Runden 1 bis 4 zu den Kacheln, 30.10.2026). */
.ob-punkt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 1.2rem;
  align-items: stretch;
  padding: 0.9rem;
  border-radius: calc(var(--rund-karte) + 4px);
  background: var(--zart);
}

.ob-punkt-text {
  padding: 0.4rem 1.2rem 0.4rem 0.5rem;
}
/* Das Organigramm steht ohne Fläche und Karte auf der Folie. */
.ob-punkt-breit {
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  background: transparent;
}
.ob-punkt-breit .ob-punkt-text {
  display: none;
}
/* Eine Infobox: nur Überschrift und Text, ohne Fläche zwischen zwei blauen Linien, davor ein „i“. */
.ob-infobox {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  padding: 1rem 0.5rem 1rem 3.7rem;
  border-top: 2px solid var(--akzent);
  border-bottom: 2px solid var(--akzent);
  border-radius: 0;
  background: transparent;
}
.ob-infobox::before {
  content: "i";
  position: absolute;
  top: 1rem;
  left: 0.6rem;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  box-sizing: border-box;
  border: 2px solid var(--akzent);
  border-radius: 50%;
  color: var(--akzent-text);
  font-family: Georgia, serif;
  font-size: 1.1rem;
  font-style: italic;
  font-weight: 700;
}
.ob-infobox .ob-punkt-text {
  padding-left: 0;
}
.ob-infobox .ob-punkt-text b {
  font-size: 1.1rem;
  color: var(--akzent-text);
}
.ob-infobox .ob-punkt-text small {
  color: var(--text);
  font-size: 0.95rem;
}
.ob-punkt-text b {
  display: block;
  font-size: 1.2rem;
}

.ob-punkt-text p {
  margin: 0.25rem 0 0;
}

.ob-punkt-text .ob-unterfrage {
  font-weight: 600;
}

.ob-punkt-text small {
  display: block;
  margin-top: 0.3rem;
  line-height: 1.4;
  color: var(--blass);
}


.ob-steuer {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
  padding: 0.9rem 1rem;
  border-radius: var(--rund-karte);
  background: var(--grund);
  box-shadow: 0 1px 2px rgba(20, 30, 60, 0.1), 0 3px 10px rgba(20, 30, 60, 0.08);
}
.ob-punkt-breit .ob-steuer {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.ob-steuer input[type="text"],
.ob-steuer input[type="date"],
.ob-steuer input[type="time"],
.ob-steuer textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  background: var(--grund);
  color: inherit;
  font: inherit;
}

.ob-steuer textarea {
  resize: vertical;
}

.ob-steuer input[type="date"],
.ob-steuer input[type="time"] {
  width: auto;
}

/* Antworten als Chips: Radio oder Kästchen in der Beschriftung, Haken gezeichnet; untereinander
   in voller Breite, auch die Unterknöpfe (Kacheln Runden 3 und 4, 30.10.2026). */
.ob-opts {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

.ob-opt {
  display: contents;
}

.ob-chip {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.5rem 1rem 0.5rem 0.75rem;
  border: 2px solid var(--akzent);
  border-radius: var(--rund-karte);
  background: var(--grund);
  color: var(--text);
  font-weight: 400;
  cursor: pointer;
}

.ob-chip:hover {
  background: var(--flaeche);
}

.ob-chip:has(:checked) {
  background: var(--akzent);
  color: #fff;
}

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

.ob-chip input {
  flex: none;
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  margin: 0;
  border: 2px solid var(--akzent);
  border-radius: 50%;
  background: var(--grund);
  appearance: none;
  cursor: pointer;
}

.ob-chip input[type="checkbox"] {
  border-radius: 3px;
}

.ob-chip input:checked {
  border-color: #fff;
  background: #fff;
}

.ob-chip input:checked::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: inherit;
  background: var(--akzent);
}

.ob-chip b {
  font-weight: 600;
}

.ob-chip small {
  display: block;
  margin-top: 0.1rem;
  line-height: 1.35;
  color: var(--blass);
}

.ob-chip:has(:checked) small {
  color: rgba(255, 255, 255, 0.85);
}

/* Die Felder einer Antwort direkt unter ihrem Knopf, nur wenn sie gewählt ist; ohne :has immer.
   Größeres (Wochenbild, Durchstellen) hängt an einem Strich links. */
.ob-wenn {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.8rem;
  margin: 0.1rem 0 0.3rem 0.6rem;
  padding: 0.5rem 0.6rem;
  border-left: 3px solid var(--akzent);
}

.ob-opt:not(:has(> .ob-chip input:checked)) > .ob-wenn {
  display: none;
}

/* Unterknöpfe, eine Personenwahl oder ein einzelnes Feld hängen an einem Winkel, der auf die Mitte
   des Elements zeigt (Kacheln Runden 2 und 3, 30.10.2026). */
.ob-wenn:is(:has(> .ob-opts.sub), :has(> .ob-personwahl), :has(> .ob-feld)) {
  position: relative;
  margin: 0 0 0.2rem 1.3rem;
  padding: 0.45rem 0 0.1rem 1.9rem;
  border-left: 0;
}
.ob-wenn:has(> .ob-personwahl) {
  --knick: 2.05rem;
}
.ob-wenn:has(> .ob-feld) {
  --knick: 3.15rem;
}
.ob-wenn:is(:has(> .ob-personwahl), :has(> .ob-feld))::before {
  content: "";
  position: absolute;
  top: -0.3rem;
  left: 0;
  width: 1.3rem;
  height: var(--knick);
  border-bottom: 2px solid var(--akzent);
  border-left: 2px solid var(--akzent);
  border-bottom-left-radius: 10px;
}

/* Unterknöpfe: rund und kleiner. Von einer senkrechten Linie geht zu jedem ein Ast ab, der letzte
   biegt rund ab (Skizze von Chris, Kacheln Runde 4, 30.10.2026). Jeder Knopf zeichnet die Linie
   vom Abstand darüber bis zu seiner Mitte (::before) und, wenn noch einer folgt, weiter bis unter
   sich (::after); so bleibt sie geschlossen, wie hoch die Knöpfe auch sind. Klappt ein oberer
   Unterknopf Felder auf, führt deren Strich die Linie weiter. */
.ob-opts.sub {
  flex-basis: 100%;
  gap: 0.4rem;
}
.ob-opts.sub .ob-chip {
  position: relative;
  padding: 0.3rem 0.95rem 0.3rem 0.6rem;
  border-width: 1.5px;
  border-color: var(--linie);
  border-radius: 999px;
  background: var(--flaeche);
  font-size: 0.92rem;
}
.ob-opts.sub > .ob-opt > .ob-chip::before,
.ob-opts.sub > .ob-opt:not(:last-child) > .ob-chip::after,
.ob-opts.sub > .ob-opt:not(:last-child) > .ob-wenn::after {
  content: "";
  position: absolute;
  left: -1.9rem;
  border-left: 2px solid var(--akzent);
  pointer-events: none;
}
.ob-opts.sub > .ob-opt > .ob-chip::before {
  top: calc(-0.4rem - 1px);
  width: 1.3rem;
  height: calc(50% + 0.4rem + 1px);
  border-bottom: 2px solid var(--akzent);
}
.ob-opts.sub > .ob-opt:first-child > .ob-chip::before {
  top: -0.75rem;
  height: calc(50% + 0.75rem);
}
.ob-opts.sub > .ob-opt:last-child > .ob-chip::before {
  border-bottom-left-radius: 10px;
}
.ob-opts.sub > .ob-opt:not(:last-child) > .ob-chip::after {
  top: 50%;
  bottom: -0.4rem;
}
.ob-opts.sub > .ob-opt:not(:last-child) > .ob-wenn::after {
  top: 0;
  bottom: -0.6rem;
  left: -3.2rem;
}
.ob-opts.sub .ob-chip input {
  border-color: var(--blass);
}
.ob-opts.sub .ob-chip:hover {
  background: var(--zart);
}
.ob-opts.sub .ob-chip:has(:checked) {
  border-color: var(--akzent);
  background: var(--akzent);
}
.ob-opts.sub .ob-chip:has(:checked) input {
  border-color: #fff;
}

.ob-feld {
  display: flex;
  flex: 1 1 14rem;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  margin: 0;
  font-weight: 400;
}

.ob-feld.kurz {
  flex: 0 0 auto;
}

.ob-feld.kurz input {
  width: 7.5rem;
}

.ob-feld > span {
  font-size: 0.78rem;
  color: var(--blass);
}

.ob-haken {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  padding: 0.3rem 0.8rem 0.3rem 0.5rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-karte);
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--blass);
  background: var(--grund);
  cursor: pointer;
}

.ob-haken:has(:checked) {
  border-color: var(--st-ok);
  color: var(--st-ok-text);
  background: var(--st-ok-flaeche);
}
.ob-haken .ob-haken-erledigt,
.ob-haken:has(:checked) .ob-haken-offen {
  display: none;
}
.ob-haken:has(:checked) .ob-haken-erledigt {
  display: inline;
}

.ob-haken input {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.15rem 0 0;
  border: 1.5px solid var(--blass);
  border-radius: 50%;
  background: var(--grund);
  appearance: none;
  cursor: pointer;
}

.ob-haken input:checked {
  border-color: var(--st-ok);
  background: var(--st-ok);
}

.ob-haken input:checked::before {
  content: "";
  width: 0.5rem;
  height: 0.28rem;
  margin-top: -0.15rem;
  border: solid #fff;
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}



.ob-tage {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.ob-tag {
  margin: 0;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-karte);
  background: var(--grund);
  font-weight: 400;
  cursor: pointer;
}

.ob-tag:has(:checked) {
  border-color: var(--akzent);
  background: var(--akzent);
  color: #fff;
}

.ob-tag input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}




.ob-postfach {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.ob-postfach input {
  max-width: 17.5rem; /* ein Viertel breiter (Post-it #110@nightly, 02.11.2026) */
}

.ob-domaene {
  font-family: var(--schrift-mono, monospace);
  color: var(--blass);
}

.ob-intern {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

.ob-hilfe {
  margin: 0;
  font-size: 0.85rem;
  color: var(--blass);
}

/* Fuß: Zurück, Fortschritt, Punkte, Weiter. */
.ob-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1rem;
  margin: 1.6rem 4.5rem 0;
  padding-top: 1rem;
  border-top: 1px solid var(--linie);
}

.ob-balken {
  position: relative;
  flex: 1 1 8rem;
  height: 0.7rem;
  border-radius: 0.4rem;
  background: var(--flaeche);
  overflow: hidden;
}

.ob-balken i {
  display: block;
  height: 100%;
  border-radius: 0.4rem;
  background: var(--akzent);
  transition: width 0.3s;
}

.ob-balken i.p5 { width: 5%; }
.ob-balken i.p10 { width: 10%; }
.ob-balken i.p15 { width: 15%; }
.ob-balken i.p20 { width: 20%; }
.ob-balken i.p25 { width: 25%; }
.ob-balken i.p30 { width: 30%; }
.ob-balken i.p35 { width: 35%; }
.ob-balken i.p40 { width: 40%; }
.ob-balken i.p45 { width: 45%; }
.ob-balken i.p50 { width: 50%; }
.ob-balken i.p55 { width: 55%; }
.ob-balken i.p60 { width: 60%; }
.ob-balken i.p65 { width: 65%; }
.ob-balken i.p70 { width: 70%; }
.ob-balken i.p75 { width: 75%; }
.ob-balken i.p80 { width: 80%; }
.ob-balken i.p85 { width: 85%; }
.ob-balken i.p90 { width: 90%; }
.ob-balken i.p95 { width: 95%; }
.ob-balken i.p100 { width: 100%; }

.ob-punkte-nav {
  display: flex;
  gap: 0.35rem;
}

.ob-punktknopf {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--linie);
  border-radius: 50%;
  background: var(--grund);
  color: var(--blass);
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: none;
  cursor: pointer;
}

.ob-punktknopf:hover {
  background: var(--flaeche);
  color: var(--text);
}

.ob-punktknopf.an,
.ob-punktknopf.an:hover {
  border-color: var(--akzent);
  background: var(--akzent);
  color: #fff;
}

.ob-fuss .ob-zurueck .symbol {
  width: 1rem;
  height: 1rem;
}





/* Präsentationsmodus (Post-it #83@nightly, 28.10.2026): die Bühne im Vollbild des Browsers, die Folie
   mittig auf der Fläche, Esc beendet. Der Folienwechsel tauscht nur das Formular in der Bühne. */
.ob-buehne:fullscreen {
  overflow: auto;
  background: var(--flaeche);
}

.ob-buehne:fullscreen .ob-form {
  display: flex;
  flex-direction: column;
  max-width: 100rem;
  min-height: 100%;
  margin: 0 auto;
  background: var(--grund);
}

.ob-buehne:fullscreen .ob-folie {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  padding-bottom: 0;
  font-size: 1.1rem;
}

/* Die Leiste mit Zurück, Fortschritt, Nummern und Weiter am unteren Rand des Bildschirms, bei kurzen
   und bei langen Folien (Post-it #106@nightly, 29.10.2026). */
.ob-buehne:fullscreen .ob-fuss {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: auto;
  padding-bottom: 1rem;
  background: var(--grund);
}

@media (max-width: 1100px) {
  .ob-kopfblock,
  .ob-body,
  .ob-fuss {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .ob-fuss {
    margin-left: 0;
    margin-right: 0;
  }

  .ob-punkt,
  .ob-spalten,
  .ob-drei {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Die Plakatwand unter Einstellungen (Post-its #85 und #86@nightly, 28.10.2026, Wegwerf-Runde:
   Fassung 2): alle Folien untereinander, etwas verkleinert, jeder Text ein Feld an Ort und
   Stelle in Schrift und Farbe der Folie; links die Nummern, unten die Leiste mit „Speichern“.
   Vorsilbe ft-. */
.ft-kopf-knoepfe {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.ft-wand {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.ft-leiste {
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ft-leiste a {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--linie);
  border-radius: 50%;
  background: var(--grund);
  color: var(--akzent-text);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}

.ft-leiste a:hover {
  background: var(--zart);
}

.ft-folie {
  margin-bottom: 1.2rem;
  padding: 0 0 1.2rem;
  border-radius: var(--rund-karte);
  background: var(--grund);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.15);
  scroll-margin-top: 1rem;
  zoom: 0.82;
}

.ft-stand {
  font-size: 0.85rem;
  color: var(--blass);
}

.ft-stand b {
  color: var(--text);
}

.ft-stand.an b {
  color: var(--akzent-text);
}

.ft-unten {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1rem;
  border-radius: var(--rund-karte);
  background: var(--grund);
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.12);
}

/* Das Feld sieht aus wie der Text, erst beim Darüberfahren wie ein Feld; die Auswahl schlägt
   die allgemeinen Regeln für input[type="text"] und textarea. */
.ft-wand input.ft-feld,
.ft-wand textarea.ft-feld {
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0 0.2rem;
  border: 0;
  border-radius: 4px;
  outline: 1px dashed transparent;
  outline-offset: 3px;
  background-color: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  resize: none;
  overflow: hidden;
  field-sizing: content;
  transition: outline-color 0.12s;
}

.ft-wand .ft-feld::placeholder {
  color: inherit;
  opacity: 0.45;
}

.ft-wand .ob-kopfblock .ft-feld:hover {
  outline-color: rgba(255, 255, 255, 0.75);
}

.ft-wand .ob-kopfblock .ft-feld:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  background-color: rgba(255, 255, 255, 0.1);
}

.ft-wand .ob-mitte .ft-feld:hover {
  outline-color: var(--akzent);
}

.ft-wand .ob-mitte .ft-feld:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
  background-color: var(--zart);
}

.ft-feld[data-geaendert] {
  box-shadow: -6px 0 0 -3px var(--st-jetzt);
}

.ob-kopfblock h1 .ft-feld {
  max-width: none;
}

.ob-spalte li .ft-feld {
  padding: 0 0.2rem;
}

/* Fragen und Antworten: fest */



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

  .ft-leiste {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.ei-herkunft {
  flex: none;
  align-self: center;
  text-decoration: none;
}

@media (max-width: 1100px) {
  .ob-tabelle th:nth-child(2) {
    width: 30%;
  }
}

/* Abrechnung (F8, X103): Monatsliste, Monatsseite, Knöpfe im Seitenkopf. */
.ab-rechnen {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.2rem;
  flex-wrap: wrap;
}

.ab-rechnen label {
  font-weight: 600;
}

.ab-rechnen input {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  font: inherit;
}

.ab-knoepfe {
  display: inline;
  margin-left: 0.5rem;
}

.ab-frei {
  font-weight: 600;
  color: var(--petrol, inherit);
}

.ab-gesamt td {
  font-weight: 600;
}

.ab-zurueck {
  display: inline-flex;
  margin-right: 0.4rem;
  vertical-align: middle;
}

.ab-zurueck .symbol {
  width: 1.1em;
  height: 1.1em;
}

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

/* --------------------------------------------------------------- Vorbelegungen: Marken (X109)
   Die drei Platzhalter stehen als Marken im Text (vorbelegungen.js): Agentur in Petrol,
   Mitarbeiter in Blau, die Lücke orange gestrichelt. Gespeichert wird Klartext. */
.vb-feld textarea[hidden] { display: none; }
/* Die Knöpfe haben ihren Platz neben oder unter der Beschriftung, auch unsichtbar: Nichts rückt, nichts wird verdeckt. */
.vb-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; margin-bottom: .25rem; }
.vb-kopf label { margin: 0; }
.vb-text { display: block; width: 100%; min-height: 6.3rem; padding: .45rem .7rem; border: 1px solid var(--linie); border-radius: 6px; color: var(--text); background: var(--grund); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; cursor: text; }
.vb-text:hover { border-color: var(--feldrand); }
.vb-text:focus { outline: 2px solid var(--fokus); outline-offset: 0; border-color: var(--fokus); }
.vb-text:empty::before { content: attr(data-ph); color: var(--blass); }
.vb-marke { display: inline-flex; align-items: center; gap: .25rem; padding: 0 .5rem 0 .35rem; margin: 0 1px; border-radius: 999px; font-size: .8rem; font-weight: 600; line-height: 1.3rem; vertical-align: baseline; white-space: nowrap; user-select: all; cursor: default; }
.vb-marke .symbol { width: .8rem; height: .8rem; }
.vb-agentur { color: var(--akzent-text); background: color-mix(in srgb, var(--petrol) 22%, var(--grund)); border: 1px solid color-mix(in srgb, var(--petrol) 70%, transparent); }
.vb-mitarbeiter { color: var(--akzent-text); background: var(--zart); border: 1px solid color-mix(in srgb, var(--akzent) 55%, transparent); }
.vb-luecke { color: var(--st-jetzt); background: var(--st-jetzt-flaeche); border: 1px dashed var(--st-jetzt); }
/* Die Knöpfe erscheinen am Feld, in dem man schreibt. */
.vb-setz { display: flex; gap: .35rem; margin-left: auto; opacity: 0; pointer-events: none; transition: opacity .12s; }
.vb-setz[hidden] { display: none; }
.vb-feld:focus-within .vb-setz { opacity: 1; pointer-events: auto; }
button.vb-knopf { margin: 0; padding: 0 .55rem 0 .4rem; border-radius: 999px; font-size: .76rem; font-weight: 600; line-height: 1.35rem; background: var(--grund); }
button.vb-knopf .symbol { width: .8rem; height: .8rem; }
button.vb-knopf.vb-agentur:hover { background: color-mix(in srgb, var(--petrol) 22%, var(--grund)); }
button.vb-knopf.vb-mitarbeiter:hover { background: color-mix(in srgb, var(--akzent) 14%, var(--grund)); }
button.vb-knopf.vb-luecke:hover { background: var(--st-jetzt-flaeche); }
/* Die Frage nach dem Inhalt einer Lücke */
.vb-frage { position: absolute; z-index: 70; width: 19rem; padding: .75rem; border: 1px solid var(--linie); border-radius: var(--rund-karte); background: var(--grund); box-shadow: var(--schatten-gross); display: flex; flex-direction: column; gap: .5rem; }
.vb-frage[hidden] { display: none; }
.vb-frage label { margin: 0; font-size: .84rem; font-weight: 600; }
.vb-frage small { display: block; margin-top: -.25rem; color: var(--blass); font-size: .76rem; }
.vb-frage input { width: 100%; }
.vb-frage-knoepfe { display: flex; justify-content: flex-end; gap: .4rem; }
.vb-frage-knoepfe button.klein { margin: 0; padding: .3rem .65rem; font-size: .82rem; }

/* --------------------------------------------------------------- Onboarding seit 29.10.2026 (X112)
   Acht Wegwerf-Runden zu den Post-its #87–#104@nightly: Zeitstrahl und Wochenbild, Organigramm,
   Durchstellen als Tabelle, Personenwahl, Meldeformel mit Marke, Bilder, die Datumwahl knapp. */
/* Zeitstrahl (zeitstrahl.js): Spur, Bereich, Griffe; die Zeitfelder verschwinden, sobald er steht. */
.mit-zeitstrahl input[type="time"],
.mit-zeitstrahl .ob-wb-bis {
  display: none;
}
.zs {
  width: 100%;
  padding: 1.5rem 0.3rem 0.9rem;
}
.zs-spur {
  position: relative;
  height: 0.5rem;
  border-radius: 0.25rem;
  background: var(--linie);
}
.zs-bereich {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 0.25rem;
  background: var(--akzent);
}
.zs-griff,
.dw-klappe .zs-griff {
  position: absolute;
  top: 50%;
  margin: 0;
  padding: 0.15rem 0.45rem;
  border: 2px solid var(--akzent);
  border-radius: 1rem;
  background: var(--grund);
  color: var(--akzent-text);
  font: 600 0.78rem/1.3 var(--schrift);
  font-variant-numeric: tabular-nums;
  transform: translate(-50%, -50%);
  cursor: grab;
  touch-action: none;
  user-select: none;
  white-space: nowrap;
}
.zs-griff:hover,
.zs-griff:active,
.dw-klappe .zs-griff:hover {
  background: var(--akzent);
  color: #fff;
  cursor: grabbing;
}
.zs-skala {
  position: relative;
  height: 1rem;
  margin-top: 0.35rem;
  font-size: 0.7rem;
  color: var(--blass);
}
.zs-skala span {
  position: absolute;
  transform: translateX(-50%);
}
.zs-einzel .zs-spur {
  cursor: pointer;
}
.zs.leer .zs-bereich {
  display: none;
}
.zs.leer .zs-griff,
.dw-klappe .zs.leer .zs-griff {
  border-style: dashed;
  border-color: var(--blass);
  color: var(--blass);
}
/* Wochenbild: eine Achse, darunter je Tag ein schmaler Balken, rechts die Zeit. */
.ob-wochenbild {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 100%;
}
.ob-wb-achse,
.ob-wb-zeile {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) 6.6rem;
  align-items: center;
  gap: 0.5rem;
}
.ob-wb-achse {
  display: none;
}
.ob-wochenbild:has(.mit-zeitstrahl) .ob-wb-achse {
  display: grid;
}
.ob-wb-skala {
  position: relative;
  display: block;
  height: 0.9rem;
  font-size: 0.7rem;
  color: var(--blass);
}
.ob-wb-skala span {
  position: absolute;
  transform: translateX(-50%);
}
.ob-wb-zeile .ob-tag {
  padding: 0.15rem 0.2rem;
  font-size: 0.8rem;
  text-align: center;
}
.ob-wb-zeiten {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  font-size: 0.85rem;
  color: var(--blass);
}
.ob-wb-zeiten input[type="time"] {
  width: auto;
  padding: 0.25rem 0.4rem;
}
.zs-schmal {
  padding: 0.25rem 0.3rem;
}
.zs-schmal .zs-spur {
  height: 0.9rem;
  border-radius: 0.2rem;
  background: var(--flaeche);
}
.zs-schmal .zs-bereich {
  border-radius: 0.2rem;
}
.zs-schmal .zs-griff {
  width: 0.7rem;
  height: 1.3rem;
  padding: 0;
  border-color: var(--grund);
  border-radius: 0.25rem;
  background: var(--akzent-tief, #142a70);
  color: transparent;
  font-size: 0;
}
.zs-schmal .zs-griff:hover {
  background: var(--akzent);
}
.ob-wb-zeile:not(.an) .zs {
  opacity: 0.5;
  pointer-events: none;
}
.ob-wb-zeile:not(.an) .zs-bereich,
.ob-wb-zeile:not(.an) .zs-griff,
.ob-wb-zeile:not(.an) .zs-pause {
  visibility: hidden;
}
/* Pausen im Wochenbild (X114, Wegwerf „Mehrere Zeiträume“, Fassung 2, 30.10.2026): ein Klick in
   den Balken schneidet eine Stunde heraus, schraffiert; der gestrichelte Rahmen zeigt vorher, wo. */
.ob-wochenbild[data-pausen] .ob-wb-achse,
.ob-wochenbild[data-pausen] .ob-wb-zeile {
  grid-template-columns: 2.6rem minmax(0, 1fr) 7.6rem;
}
.ob-wb-zeiten:not(.mit-zeitstrahl) {
  flex-wrap: wrap;
}
.ob-wb-pause {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.mit-zeitstrahl .ob-wb-pause {
  display: none;
}
.zs-mit-pausen .zs-bereich {
  cursor: pointer;
}
.zs-pause {
  position: absolute;
  top: 0;
  height: 100%;
  background: repeating-linear-gradient(135deg, var(--akzent) 0 1.5px, var(--grund) 1.5px 5px);
  box-shadow: inset 0 2px 0 var(--akzent), inset 0 -2px 0 var(--akzent);
}
.zs-geist {
  position: absolute;
  top: -1px;
  bottom: -1px;
  border: 1.5px dashed var(--grund);
  border-radius: 0.2rem;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--grund) 70%, transparent) 0 1.5px, transparent 1.5px 5px);
  pointer-events: none;
}
.zs-geist[hidden] {
  display: none;
}
.zs-pause-weg {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: none;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--grund);
  color: var(--akzent-text);
  font: 700 0.8rem/1 var(--schrift);
  box-shadow: 0 0 0 1px var(--akzent);
  transform: translate(-50%, -50%);
  cursor: pointer;
}
/* Beim Zeigen wird der Kreis blau, das × darin weiß (Chris, 30.10.2026). */
.zs-pause-weg:hover {
  background: var(--akzent);
  color: #fff;
}
.zs-pause:hover > .zs-pause-weg {
  display: grid;
}
.ob-wb-zeile:not(.an):not(:has(.mit-zeitstrahl)) .ob-wb-zeiten {
  opacity: 0.45;
}
.ob-wb-text {
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ob-wb-text small {
  display: block;
  font-size: 0.74rem;
  color: var(--blass);
}
.ob-wb-zeile:not(.an) .ob-wb-text {
  color: var(--blass);
}
/* Arbeitszeit unter Einstellungen: zwei Felder, mit Skript der Strahl. */
.az-zeiten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-self: stretch;
  max-width: 32rem;
  margin: 0.6rem 0 0.8rem;
}
.az-zeiten .ob-feld.kurz input {
  width: 7rem;
}
.az-zeiten.mit-zeitstrahl .ob-feld {
  display: none;
}
.az-zeiten .zs {
  flex-basis: 100%;
}
/* Personen aus der Struktur wählen; das Namensfeld erscheint mit „Andere Person“. */
.ob-personwahl {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
}
.ob-person-select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  background: var(--grund);
  color: var(--text);
  font: inherit;
}
.ob-person-andere {
  display: none;
}
.ob-personwahl:has(option[value="andere"]:checked) .ob-person-andere {
  display: block;
}
/* Organigramm: Stufen je Rolle, Personen als Chips, das Blatt klappt darunter auf. */
.ob-organigramm {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 1rem;
}
.ob-stufe {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 0 0.9rem;
}
.ob-stufe + .ob-stufe::before {
  content: "";
  position: absolute;
  top: -0.2rem;
  left: 50%;
  width: 2px;
  height: 0.9rem;
  background: var(--linie);
}
.ob-stufe-titel {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blass);
}
.ob-stufe-reihe {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 0.4rem;
}
/* Das Plus steht neben den Namen, ohne sie aus der Mitte zu schieben (Kacheln Runde 2, Fassung 1). */
.ob-stufe-reihe > .ob-plus:not(:only-child) {
  position: absolute;
  top: 0.15rem;
  left: calc(100% + 0.5rem);
  margin: 0;
}
.ob-kachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}
.ob-kachel:has(.ob-person[open]) {
  flex-basis: 100%;
}
.ob-person {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ob-person-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.8rem;
  border: 2px solid var(--akzent);
  border-radius: var(--rund-karte);
  background: var(--grund);
  color: var(--text);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.ob-person-chip::-webkit-details-marker {
  display: none;
}
.ob-person-chip .symbol {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--akzent-text);
}
.ob-person-chip:hover {
  background: var(--zart);
}
.ob-person[open] > .ob-person-chip {
  background: var(--akzent);
  color: #fff;
}
.ob-person[open] > .ob-person-chip .symbol {
  color: #fff;
}
.ob-person-blatt {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem;
  width: min(40rem, 80vw);
  margin: 0.4rem 0 0.2rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-karte);
  background: var(--grund);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  text-align: left;
}
.ob-person-blatt .ob-feld {
  flex: 1 1 12rem;
}
.ob-person-blatt .ob-feld > span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.ob-person-blatt .symbol {
  width: 0.8rem;
  height: 0.8rem;
}
.ob-person-blatt input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  background: var(--grund);
  color: inherit;
  font: inherit;
}
.ob-person-knoepfe {
  flex-basis: 100%;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
.ob-person-knoepfe button.klein {
  margin: 0;
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
}
.ob-rot {
  color: var(--fehler, #b3261e) !important;
}
.ob-rot:hover {
  background: var(--fehler-flaeche, #fde7e9) !important;
}
.ob-person-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 14rem;
  overflow: hidden;
  font-size: 0.72rem;
  color: var(--blass);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ob-person-link .symbol {
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  color: var(--petrol, var(--akzent-text));
}
.ob-person-link.leer {
  font-style: italic;
  opacity: 0.7;
}
.ob-plus {
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  margin: 0.25rem 0 0;
  padding: 0;
  border: 2px dashed var(--linie);
  border-radius: 50%;
  background: transparent;
  color: var(--blass);
  font-size: 1.1rem;
  cursor: pointer;
}
.ob-plus:hover {
  border-color: var(--akzent);
  background: var(--zart);
  color: var(--akzent-text);
}
/* Durchstellen: Tabelle Person · Nummer, „+ Person“ klappt die übrigen auf. */
.ob-durch {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}
.ob-durch-tabelle {
  width: 100%;
  border-collapse: collapse;
}
.ob-durch-tabelle th {
  padding: 0.2rem 0.3rem 0.35rem;
  border-bottom: 2px solid var(--akzent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
  color: var(--blass);
}
.ob-durch-tabelle td {
  padding: 0.35rem 0.3rem;
  border-bottom: 1px solid var(--linie);
  vertical-align: middle;
}
.ob-durch-tabelle td b {
  display: block;
  font-size: 0.9rem;
}
.ob-durch-tabelle td small {
  display: block;
  font-size: 0.7rem;
  color: var(--blass);
}
.ob-durch-tabelle td:nth-child(2) {
  width: 13rem;
}
.ob-durch-tabelle td:last-child {
  width: 1.6rem;
  padding-right: 0;
}
.ob-durch-tabelle input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 0.3rem 0.4rem;
}
.ob-x {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: 50%;
  background: var(--grund);
  color: var(--blass);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}
.ob-x:hover {
  background: var(--zart);
  color: var(--text);
}
.ob-menue {
  position: relative;
  align-self: flex-start;
}
.ob-menue > summary {
  list-style: none;
}
.ob-menue > summary::-webkit-details-marker {
  display: none;
}
.ob-menue-liste {
  position: absolute;
  z-index: 8;
  top: calc(100% + 0.3rem);
  left: 0;
  display: flex;
  flex-direction: column;
  min-width: 16rem;
  padding: 0.3rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-karte);
  background: var(--grund);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}
.ob-menue-liste button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.4rem 0.6rem;
  border: 0;
  border-radius: var(--rund);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ob-menue-liste button:hover {
  background: var(--zart);
  color: var(--text);
}
.ob-menue-liste button .symbol {
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
  color: var(--akzent-text);
}
.ob-menue-liste button small {
  margin-left: auto;
  font-size: 0.74rem;
  color: var(--blass);
}
#punkt-durchstellen {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}
/* Meldeformel: der Text mit der Marke [Mitarbeiter], wie die Vorbelegungen. */
.ob-meldung {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.ob-meldung .vb-text {
  min-height: 3.2rem;
  font-size: 1.02rem;
}
.ob-meldung .vb-kopf label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--blass);
}
/* Bilder auf der Folie (Folienbild). */
.ob-bild {
  position: relative;
  margin: 1.2rem 0 0;
}
.ob-bild img {
  display: block;
  max-width: 100%;
  max-height: 24rem;
  border-radius: var(--rund-karte);
  box-shadow: 0 2px 8px rgba(20, 30, 60, 0.1);
}
.ob-folie.titel .ob-bild img {
  margin: 0 auto;
}
.ob-bild figcaption {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  color: var(--blass);
}
/* Die Datumwahl knapp (Onboarding): ohne Schnellwahl und Tipps, so schmal wie beim Ticket, die
   Tage als Kreise; die Uhrzeit als Leiste wie beim Ticket, der Knopf als Zeile darüber (Wegwerf
   „Datumwahl“, Runde 2, Fassung 1, 30.10.2026). */
.dw-strahl {
  display: none;
  margin-top: 0.55rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--linie);
}
.dw-knapp .dw-strahl {
  display: block;
}
.dw-knapp .dw-schnell,
.dw-knapp .dw-uhr,
.dw-knapp .dw-tipp {
  display: none;
}
.dw-knapp .dw-oben {
  grid-template-columns: minmax(0, 1fr);
}
.dw-knapp.dw-klappe {
  width: 17rem;
}
.dw-knapp .dw-tag {
  width: 1.85rem;
  justify-self: center;
}
.dw-knapp .dw-fuss {
  justify-content: flex-end;
}
.dw-strahl-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dw-strahl-titel {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blass);
}
.dw-strahl .fw-zeit {
  flex-direction: column;
  align-items: stretch;
  padding-top: 0.45rem;
}
.dw-strahl .fw-ganz {
  flex: none;
  flex-direction: row;
  gap: 0.35rem;
  height: 1.9rem;
  border-right: 1px solid var(--feldrand);
  border-bottom: 0;
  border-radius: var(--rund) var(--rund) 0 0;
}
.dw-strahl .fw-leiste {
  border-radius: 0 0 var(--rund) var(--rund);
}
.ob-steuer .datumwahl {
  width: 100%;
}
.ob-steuer .dw-feld input[type="text"] {
  width: 100%;
  padding-left: 2.1rem;
}
.ob-steuer .dw-datum input[type="text"] {
  padding-right: 2.4rem;
}
.ob-spalte .ft-liste {
  margin: 0 1.1rem;
  width: calc(100% - 2.2rem);
}
/* Plakatwand: die Felder in den Kästen; die Antwortmöglichkeiten gesperrt, ihre Texte frei. */
.ft-chip-texte {
  display: grid;
  flex: 1 1 auto;
  gap: 0.1rem;
  min-width: 0;
}
/* Die Regel `.ob-chip input` meint das Kästchen; die Textfelder der Antwort sind Zeilen. */
.ft-wand .ob-chip input.ft-chip-t,
.ft-wand .ob-chip input.ft-chip-e {
  display: block;
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0;
  border-radius: 4px;
  appearance: auto;
  place-items: initial;
  field-sizing: content;
  text-align: left;
  cursor: text;
}
.ft-wand input.ft-chip-t {
  font-weight: 600;
}
.ft-wand input.ft-chip-e {
  font-size: 0.85rem;
  line-height: 1.35;
  opacity: 0.85;
}
.ft-wand .ob-chip:has(> input:disabled) {
  border-style: dashed;
  border-color: var(--feldrand, #9aa3b5);
  cursor: default;
}
.ft-wand .ob-chip:has(> input:disabled):hover {
  background: var(--grund);
}
.ft-wand .ob-opt > .ob-wenn {
  display: flex !important;
}
.ft-wand .ob-steuer input:disabled:not(.ft-feld),
.ft-wand .ob-steuer select:disabled,
.ft-wand .ob-steuer textarea:disabled:not(.ft-feld),
.ft-wand .ob-steuer button:disabled,
.ft-wand .ob-wochenbild,
.ft-wand .ob-organigramm,
.ft-wand .ob-durch,
.ft-wand .datumwahl {
  opacity: 0.45;
  pointer-events: none;
}
.ft-wand .ob-chip > input:disabled {
  opacity: 0.45;
}
.ft-wand .ob-punkt-text .ft-feld {
  display: block;
}
.ft-wand .ft-liste {
  white-space: pre-wrap;
}
.ft-wand .ft-hinweis {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.74rem;
  color: var(--blass);
}
.ft-wand .ob-spalte .ft-hinweis {
  margin: 0.3rem 1.1rem 0;
}
.ft-wand .ft-meld {
  white-space: pre-wrap;
}
.ft-wand .ob-infobox,
.ft-wand .ob-bild {
  position: relative;
}
.ft-weg {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: 50%;
  background: var(--grund);
  color: var(--blass);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}
.ft-weg:hover {
  background: var(--zart);
  color: var(--text);
}
.ft-dazu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.8rem;
}
.ft-dazu .ft-hinweis {
  margin: 0;
}
.ft-dazu button.klein,
.ft-dazu .knopf.klein {
  margin: 0;
}
.ft-wand.mit-skript .ft-bild-hochladen {
  display: none;
}