/* 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;
  --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;

  --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;
    --klaer-flaeche: #26324f;
    --zeile-hover: #232730;
    --erwaehnung: #26324f;

    --mein: #49d8d7;
    --mein-tief: #3d5cc4;
    --fremd: #9aa1ad;
    --fremd-flaeche: #23262d;
    --gestoppt: #8fd69a;
    --warn: #f2b25c;

    /* 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;
  --klaer-flaeche: #26324f;
  --zeile-hover: #232730;
  --erwaehnung: #26324f;

  --mein: #49d8d7;
  --mein-tief: #3d5cc4;
  --fremd: #9aa1ad;
  --fremd-flaeche: #23262d;
  --gestoppt: #8fd69a;
  --warn: #f2b25c;

  /* 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);
}

.marke {
  padding: 0 0.5rem 0.75rem;
  font-family: var(--schrift-titel);
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
  color: #ffffff;
}

.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);
}

.demo-marke {
  padding: 0.1rem 0.6rem;
  border-radius: 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--auf-petrol);
  background: var(--petrol);
}

/* 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);
}

.leiste-unten .leiste-umschalter {
  border-color: transparent;
}

.leiste-umschalter {
  align-self: stretch;
  justify-content: flex-start;
  margin-bottom: 0.25rem;
  padding: 0.45rem 0.6rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: inherit;
  background: transparent;
}

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

/* 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 .marke {
    padding: 0;
    font-size: 1.1rem;
    text-align: center;
  }

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

  .leiste-schmal .leiste-umschalter .symbol {
    transform: rotate(180deg);
  }

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

  .leiste-schmal .demo-marke {
    padding: 0.1rem 0.4rem;
    font-size: 0.7rem;
  }

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

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

@media (max-width: 56rem) {
  .leiste-umschalter {
    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"],
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: "✓";
}

/* 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,
.regel,
.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);
}

/* Die Meldeformel: große Schrift ohne Kasten, davor der Petrol-Strich. */
.meldeformel {
  padding: 0.2rem 0 0.2rem 1.1rem;
  border-left: 0.4rem solid var(--petrol);
}

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

.meldeformel p {
  margin: 0.1rem 0 0;
  font-family: var(--schrift-titel);
  font-size: 1.7rem;
  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;
}

.regeln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.8rem;
}

.regel {
  padding: 0.6rem 0.9rem;
}

.regel h2 {
  margin: 0 0 0.1rem;
  font-family: var(--schrift);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--blass);
}

.regel p {
  margin: 0 0 0.4rem;
}

.regel p:last-child {
  margin-bottom: 0;
}

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

.letzte-tickets h2 {
  margin: 0.5rem 0 0.2rem;
}

.letzte-tickets .hinweis {
  margin: 0 0 0.3rem;
}

.maske-teil {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 60%;
  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;
}

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

.maske-offen .blitz h1 {
  font-size: 1.35rem;
}

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

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

.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;
  justify-content: space-between;
  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;
}

.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;
}

.maske-zeile.namen {
  grid-template-columns: auto 1fr 1fr;
}

/* Die vier Schalter des Eingangskanals bekommen, was sie brauchen; die
   Telefonnummer nimmt den Rest. */
.maske-zeile.kanal {
  grid-template-columns: minmax(9rem, 1fr) auto;
}

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

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

.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); }

.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;
  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));
}

.pfad .schritt.aktuell {
  color: var(--grund);
  background: var(--c);
  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;
}

.kacheln {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}

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

.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 {
  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 {
    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);
}

.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;
}

.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);
}

/* Die Warteschlange der HV als Überzeile über dem Kundennamen. */
.hv-marke {
  display: block;
  margin: 0 0 0.15rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--blass);
}

.hv-marke .symbol {
  width: 0.85rem;
  height: 0.85rem;
  margin-right: 0.3rem;
  vertical-align: -0.12rem;
  stroke-width: 2.2;
}

@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;
  }
}

/* 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);
}

/* Das eben gespeicherte Ticket: der Petrol-Strich zeigt, wo es liegt. */
.ticketkarte.neu::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: var(--rund-karte) 0 0 var(--rund-karte);
  background: var(--petrol);
}

/* 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;
}

.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;
}

.anrufliste {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0;
  list-style: none;
}

.probe {
  margin: 2rem 0;
  padding-top: 1rem;
  border-top: 1px solid var(--linie);
}

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

.karte {
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-karte);
  background: var(--grund);
  cursor: grab;
  user-select: none;
}

/* ------------------------------------------------- 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;
}

.nutzerliste tr.ausgeschieden td {
  color: var(--blass);
}

.nutzerliste td form {
  margin: 0;
}

.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;
}

.nutzerliste .aktionen {
  flex-wrap: nowrap;
}

.nutzerliste .aktionen button,
.nutzerliste .aktionen .knopf,
.nutzerliste td:nth-child(2),
.nutzerliste td:nth-child(3) {
  white-space: nowrap;
}

/* ---- 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;
}

.sprungleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem;
  margin: 0 0 0.6rem;
}

.sprungleiste a,
.sprungleiste span {
  min-width: 1.65rem;
  padding: 0.1rem 0;
  border-radius: var(--rund);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

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

.sprungleiste span {
  color: var(--linie);
}

.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);
}

.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;
}

.marke-zeile .marke {
  padding-bottom: 0;
}

.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;
  }

  .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.fremd > a {
  display: block;
  padding-right: 3.3rem;
}

.ticketkarte.ausserhalb {
  opacity: 0.8;
}

.phase-marke {
  display: inline-block;
  margin-top: 0.3rem;
  padding: 0 0.45rem;
  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;
}

.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. */
.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;
}

.schalter-zeile input {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.15rem;
  accent-color: var(--akzent);
}

.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;
  }
}