/* Nur was Unfold nicht mitbringt: die Eingabezeile im Kopf, die Statusampel
   und die Tabellenzellen. Alles andere kommt aus dem Theme. */

/* --- Eingabezeile -------------------------------------------------- */

.gen-start__label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-base-500);
}

.gen-start__row {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
}

.gen-start__row input[type="url"] {
  flex: 1;
  min-width: 0;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-base-900);
  background: var(--color-base-50);
  border: 1px solid var(--color-base-200);
  border-radius: var(--radius-default, 0.375rem);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.gen-start__row input[type="url"]::placeholder {
  color: var(--color-base-400);
}

.gen-start__row input[type="url"]:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary-500) 18%, transparent);
}

/* Der Knopf ist die Hauptaktion der Seite — er darf nicht kleiner
   aussehen als das Feld daneben. */
.gen-start__row button[type="submit"] {
  padding-inline: 1.75rem;
  font-size: 0.9375rem;
  white-space: nowrap;
}

.gen-start__hint {
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-base-500);
}

/* --- Tabelle -------------------------------------------------------- */

.gen-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.gen-tabelle th {
  padding: 0.75rem;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-base-500);
  background: var(--color-base-50);
  border-bottom: 1px solid var(--color-base-200);
  white-space: nowrap;
}

.gen-tabelle td {
  /* Seitlich schmaler als oben und unten. Acht Spalten mal zwei Ränder sind
     bei 1rem schon 256 Pixel, die für nichts stehen — genug, um in der
     Leadliste die letzte Spalte aus dem Bild zu schieben. */
  padding: 0.875rem 0.75rem;
  vertical-align: top;
  border-bottom: 1px solid var(--color-base-100);
}

.gen-tabelle tr:last-child td {
  border-bottom: 0;
}

.gen-quelle {
  display: block;
  color: var(--color-base-900);
  text-decoration: none;
  word-break: break-all;
}

.gen-quelle:hover {
  text-decoration: underline;
}

.gen-slug,
.gen-dim {
  color: var(--color-base-400);
  font-size: 0.8125rem;
}

.gen-slug {
  display: block;
  margin-top: 0.125rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.gen-mono {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.gen-link {
  color: var(--color-primary-600);
  text-decoration: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
}

.gen-link:hover {
  text-decoration: underline;
}

/* --- Statusampel ---------------------------------------------------- */

.gen-status {
  display: inline-block;
  padding: 0.1875rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 999px;
  white-space: nowrap;
}

.gen-status--fertig {
  color: #0b5d3b;
  background: #d9f2e5;
}

.gen-status--fehler {
  color: #8a1c1c;
  background: #fbdcdc;
}

/* Die drei laufenden Zustände teilen sich eine Farbe und pulsieren, damit
   erkennbar bleibt, dass gerade etwas passiert — der Schrittname darunter
   sagt, was. */
.gen-status--wartet,
.gen-status--crawlt,
.gen-status--schreibt,
.gen-status--baut {
  color: #6b4b00;
  background: #fdeec7;
}

@media (prefers-reduced-motion: no-preference) {
  .gen-status--crawlt,
  .gen-status--schreibt,
  .gen-status--baut {
    animation: gen-puls 1.8s ease-in-out infinite;
  }
}

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

.gen-schritt {
  display: block;
  margin-top: 0.3125rem;
  font-size: 0.75rem;
  color: var(--color-base-500);
}

.gen-fehler {
  display: block;
  margin-top: 0.3125rem;
  font-size: 0.75rem;
  color: #8a1c1c;
}

/* --- Leads: Kennzahlen, Filter, Statuswahl -------------------------- */

.gen-kennzahl {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.875rem 1.125rem;
  border: 1px solid var(--color-base-200);
  border-radius: var(--radius-default, 0.375rem);
}

/* „Ohne eigene Website" ist die Zahl, für die man diese Liste öffnet —
   dort gibt es nichts zu überzeugen, nur etwas zu liefern. */
.gen-kennzahl--betont {
  border-color: var(--color-primary-300);
  background: var(--color-primary-50);
}

.gen-kennzahl__wert {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--color-base-900);
}

.gen-kennzahl__label {
  margin-top: 0.1875rem;
  font-size: 0.75rem;
  color: var(--color-base-500);
}

.gen-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  align-items: center;
}

.gen-filter select,
.gen-statuswahl {
  /* Ein Auswahlfeld ist im zugeklappten Zustand so breit wie sein laengster
     Eintrag — hier „Kein Interesse", das man nur beim Aufklappen sieht. Ohne
     Deckel bezahlt die Tabelle also Platz fuer eine unsichtbare Zeile. */
  max-width: 8.5rem;
  padding: 0.375rem 0.625rem;
  font-size: 0.8125rem;
  font-family: inherit;
  color: var(--color-base-700);
  background: var(--color-base-50);
  border: 1px solid var(--color-base-200);
  border-radius: var(--radius-default, 0.375rem);
  cursor: pointer;
}

.gen-status--chance {
  color: #6b3b00;
  background: #ffe2bd;
}

.gen-kennzahl--warnung {
  border-color: #e9b7b7;
  background: #fdf1f1;
}

.gen-rechts {
  text-align: right;
}

.gen-schmal {
  width: 1%;
  white-space: nowrap;
}

/* --- Leads verteilen und zuweisen ----------------------------------- */



.verteilen__person,
.verteilen__anzahl,
.zuweisen__alle,

.verteilen__anzahl input {
  width: 5rem;
  padding: 0.3125rem 0.5rem;
  font-size: 0.8125rem;
  font-family: inherit;
  color: var(--color-base-900);
  background: var(--color-base-50);
  border: 1px solid var(--color-base-200);
  border-radius: var(--radius-default, 0.375rem);
}


.zuweisen select {
  padding: 0.3125rem 0.5rem;
  font-size: 0.8125rem;
  font-family: inherit;
  color: var(--color-base-700);
  background: var(--color-base-25, #fff);
  border: 1px solid var(--color-base-200);
  border-radius: var(--radius-default, 0.375rem);
}

.gen-summe td {
  font-weight: 600;
  border-top: 2px solid var(--color-base-300);
  background: var(--color-base-50);
}

/* --- Kunde mit Anrufhistorie ---------------------------------------- */







.kunde__name {
  display: block;
  font-weight: 500;
  color: var(--color-base-900);
}

.kunde__zeile2,
.kunde__person,
.kunde__anzahl {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--color-base-500);
}

.kunde__tel {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875rem;
  color: var(--color-primary-600);
  text-decoration: none;
}

.kunde__tel:hover {
  text-decoration: underline;
}

.kunde__faellig {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #c2410c;
}


.kunde__daten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem 1.25rem;
  margin: 0;
}

.kunde__daten dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-base-400);
}

.kunde__daten dd {
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
  color: var(--color-base-800);
}

.kunde__leer {
  font-size: 0.8125rem;
  color: var(--color-base-500);
}

/* --- Anruf protokollieren ------------------------------------------- */

.anruf {
  padding: 0.875rem;
  border: 1px dashed var(--color-base-300);
  border-radius: var(--radius-default, 0.375rem);
}

.anruf__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}

.anruf__label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-base-500);
}

.anruf select,
.anruf input,
.anruf textarea {
  padding: 0.4375rem 0.625rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--color-base-900);
  background: var(--color-base-25, #fff);
  border: 1px solid var(--color-base-200);
  border-radius: var(--radius-default, 0.375rem);
}

.anruf textarea {
  width: 100%;
  margin-top: 0.625rem;
  resize: vertical;
}

.anrufliste {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.anrufliste th {
  padding: 0.4375rem 0.625rem;
  text-align: left;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-base-400);
  border-bottom: 1px solid var(--color-base-200);
}

.anrufliste td {
  padding: 0.5rem 0.625rem;
  border-bottom: 1px solid var(--color-base-100);
  vertical-align: top;
}

.anrufliste tr:last-child td {
  border-bottom: 0;
}

.anrufliste__ja {
  color: #0b5d3b;
  font-weight: 500;
}

.gen-aktion--aktiv {
  color: var(--color-base-900);
  border-color: var(--color-base-500);
  background: var(--color-base-100);
}

/* --- Aktionen ------------------------------------------------------- */

.gen-aktionen {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

/* Die Seite-Spalte der Leadliste stapelt: oben der Zustand, darunter die
   Schaltflächen. `.gen-aktionen` legt seine Kinder nebeneinander — mit zwei
   zusätzlichen Schaltflächen wäre die Spalte doppelt so breit geworden. */
.gen-seitenzelle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
}

/* Adresse und Mülleimer nebeneinander, der Mülleimer klein und ohne Rahmen:
   Er steht in jeder erzeugten Zeile und soll nicht um Aufmerksamkeit
   konkurrieren mit dem, worauf er zeigt. */
.seite-zeile {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

.gen-muelleimer {
  display: inline-flex;
  padding: 0.125rem;
  color: var(--color-base-400);
  background: transparent;
  border: 0;
  border-radius: var(--radius-default, 0.375rem);
  cursor: pointer;
}

.gen-muelleimer .material-symbols-outlined {
  font-size: 1.0625rem;
}

.gen-muelleimer:hover {
  color: var(--color-red-600);
  background: var(--color-base-100);
}

.dark .gen-muelleimer:hover {
  color: var(--color-red-400);
  background: var(--color-base-800);
}

/* Der Slug der erzeugten Seite kann lang sein. Ohne diese Regel brach
   „/radiologie-nuklearmedizin-bonn" auf drei Zeilen um und zog die Spalte
   auf, statt sich zu kürzen. */
.gen-aktionen .gen-link,
.seite-zeile .gen-link {
  display: block;
  max-width: 13ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gen-aktion {
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  color: var(--color-base-600);
  background: transparent;
  border: 1px solid var(--color-base-200);
  border-radius: var(--radius-default, 0.375rem);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.gen-aktion:hover {
  color: var(--color-base-900);
  border-color: var(--color-base-400);
}

.gen-aktion--weg:hover {
  color: #8a1c1c;
  border-color: #e5a3a3;
}

/* --- Dunkler Modus -------------------------------------------------- */

.dark .gen-start__row input[type="url"] {
  color: var(--color-base-100);
  background: var(--color-base-900);
  border-color: var(--color-base-700);
}

.dark .gen-tabelle th {
  color: var(--color-base-400);
  background: var(--color-base-900);
  border-bottom-color: var(--color-base-800);
}

.dark .gen-tabelle td {
  border-bottom-color: var(--color-base-800);
}

.dark .gen-quelle {
  color: var(--color-base-100);
}

.dark .gen-aktion {
  color: var(--color-base-400);
  border-color: var(--color-base-700);
}

.dark .gen-aktion:hover {
  color: var(--color-base-100);
  border-color: var(--color-base-500);
}

.dark .gen-status--fertig {
  color: #7ee2b8;
  background: rgb(16 122 80 / 0.22);
}

.dark .gen-status--fehler {
  color: #f5a3a3;
  background: rgb(150 30 30 / 0.22);
}

.dark .gen-status--wartet,
.dark .gen-status--crawlt,
.dark .gen-status--schreibt,
.dark .gen-status--baut {
  color: #f2d68a;
  background: rgb(140 100 10 / 0.24);
}

.dark .gen-kennzahl {
  border-color: var(--color-base-800);
}

.dark .gen-kennzahl--betont {
  border-color: var(--color-primary-700);
  background: rgb(from var(--color-primary-900) r g b / 0.35);
}

.dark .gen-kennzahl__wert {
  color: var(--color-base-100);
}

.dark .gen-filter select,
.dark .gen-statuswahl {
  color: var(--color-base-200);
  background: var(--color-base-900);
  border-color: var(--color-base-700);
}

.dark .gen-status--chance {
  color: #ffcf94;
  background: rgb(150 90 10 / 0.26);
}

.dark .gen-kennzahl--warnung {
  border-color: rgb(180 60 40 / 0.5);
  background: rgb(150 40 30 / 0.18);
}

.dark .gen-summe td {
  border-top-color: var(--color-base-600);
  background: var(--color-base-900);
}

.dark .kunde {
  border-color: var(--color-base-800);
  background: var(--color-base-900);
}

.dark .kunde[open] .kunde__kopf {
  border-bottom-color: var(--color-base-800);
}

.dark .kunde__name {
  color: var(--color-base-100);
}

.dark .kunde__daten dd {
  color: var(--color-base-200);
}

.dark .kunde__faellig {
  color: #fb923c;
}

.dark .kunde[data-ueberfaellig] {
  border-left-color: #fb923c;
}

.dark .anruf {
  border-color: var(--color-base-700);
}

.dark .anruf select,
.dark .anruf input,
.dark .anruf textarea {
  color: var(--color-base-100);
  background: var(--color-base-800);
  border-color: var(--color-base-700);
}

.dark .anrufliste th {
  border-bottom-color: var(--color-base-800);
}

.dark .anrufliste td {
  border-bottom-color: var(--color-base-800);
}

.dark .anrufliste__ja {
  color: #7ee2b8;
}

.dark .zuweisen,
.dark .verteilen__anzahl input {
  border-color: var(--color-base-800);
  background: var(--color-base-900);
}

.dark .zuweisen select,
.dark .verteilen__anzahl input {
  color: var(--color-base-200);
  background: var(--color-base-800);
  border-color: var(--color-base-700);
}

.dark .verteilen__person,
.dark .verteilen__anzahl,
.dark .zuweisen__alle,
.dark .zuweisen__text {
  color: var(--color-base-300);
}

.dark .gen-aktion--aktiv {
  color: var(--color-base-100);
  border-color: var(--color-base-500);
  background: var(--color-base-800);
}

/* ---------------------------------------------------------------------------
   Arbeitsliste

   Eine Tabelle, deren Zeilen aufklappen. Der aufgeklappte Teil ist eine
   eigene <tr> über die volle Breite: Er soll die Spaltenbreiten nicht erben,
   sondern eigene Bereiche nebeneinander stellen dürfen.
--------------------------------------------------------------------------- */

/* Bis Alpine geladen hat, wäre der aufgeklappte Bereich sichtbar — für einen
   Wimpernschlag stünde jede Zeile offen. */
[x-cloak] {
  display: none !important;
}

.lead__zeile td {
  vertical-align: top;
}

.lead__zeile--offen td {
  background: var(--color-base-50);
}

/* Überfällige Rückrufe bekommen einen Balken an der Kante statt einer
   eingefärbten Zeile: Die Tabelle bleibt ruhig, und der Hinweis ist trotzdem
   im Augenwinkel zu sehen. */
.lead__zeile[data-ueberfaellig] td:first-child {
  box-shadow: inset 2px 0 0 var(--color-red-500);
}

.lead__pfeil {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  background: none;
  color: var(--color-base-400);
  cursor: pointer;
}

.lead__pfeil:hover {
  color: var(--color-base-700);
}

/* Die Drehung ist der einzige Hinweis darauf, dass sich gleich etwas öffnet —
   ohne Übergang wirkt der Sprung wie ein Fehler. */
.lead__pfeil .material-symbols-outlined {
  /* `block` ist keine Kosmetik: Auf ein Inline-Element wirkt `transform`
     nicht, und der Pfeil blieb stumm stehen, obwohl Klasse und Regel
     stimmten. */
  display: block;
  font-size: 1.25rem;
  transition: transform 0.2s ease;
}

/* Eigener Name statt `rotate-90`: Tailwind bringt eine Utility desselben
   Namens mit, und beide zusammen drehten den Pfeil um 180 Grad. */
.lead__pfeil .lead__pfeil--offen {
  transform: rotate(90deg);
}

.lead__name {
  display: block;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 500;
  color: var(--color-base-900);
  cursor: pointer;
  text-align: left;
}

.lead__name:hover {
  color: var(--color-primary-600);
}

.lead__auf > td {
  padding: 0 1rem 1.25rem;
  background: var(--color-base-50);
  border-bottom: 1px solid var(--color-base-200);
}

.detail {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  /* Das Einblenden liegt hier und nicht an der Zeile: Die Höhe eines <tr>
     lässt sich nicht zuverlässig animieren, und Alpines Collapse-Plugin
     liefert Unfold nicht mit. */
  animation: detail-auf 0.18s ease-out;
}

@keyframes detail-auf {
  from {
    opacity: 0;
    transform: translateY(-0.35rem);
  }
}

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

  .lead__pfeil .material-symbols-outlined {
    transition: none;
  }
}

/* --- Was der Generator gerade tut ----------------------------------- */

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

.laeufe__eintrag {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--color-base-200);
  border-radius: var(--radius-default, 0.375rem);
  background: var(--color-base-50);
}

.laeufe__name {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  color: var(--color-base-900);
}

.gen-kennzahl--klickbar {
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.gen-kennzahl--klickbar:hover {
  border-color: var(--color-primary-500);
}

/* --- Dunkelmodus ---------------------------------------------------- */

.dark .lead__zeile--offen td,
.dark .lead__auf > td,
.dark .laeufe__eintrag {
  background: var(--color-base-900);
}

.dark .lead__auf > td,
.dark .laeufe__eintrag {
  border-color: var(--color-base-800);
}

.dark .lead__name,
.dark .laeufe__name {
  color: var(--color-base-100);
}

.dark .lead__pfeil {
  color: var(--color-base-500);
}

.dark .lead__pfeil:hover {
  color: var(--color-base-200);
}

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

   Nach dem Vorbild der Toasts aus traceflow2: oben rechts, farbig nach Art,
   selbstschließend. Dort ist es Bootstrap, hier Alpine und Unfolds Tokens —
   das Verhalten ist dasselbe, die Bausteine sind die der jeweiligen Oberfläche.
--------------------------------------------------------------------------- */
.hinweise {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}

.hinweis {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--color-base-200);
  border-left-width: 3px;
  border-radius: var(--radius-default, 0.375rem);
  background: #fff;
  box-shadow: 0 8px 24px -8px rgb(0 0 0 / 0.18);
  pointer-events: auto;
}

.hinweis__symbol {
  font-size: 1.125rem;
  line-height: 1.35;
}

.hinweis__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.hinweis__titel {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-base-500);
}

.hinweis__inhalt {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-base-800);
  overflow-wrap: anywhere;
}

.hinweis__zu {
  border: 0;
  background: none;
  padding: 0;
  color: var(--color-base-400);
  cursor: pointer;
}

.hinweis__zu:hover {
  color: var(--color-base-700);
}

.hinweis__zu .material-symbols-outlined {
  display: block;
  font-size: 1rem;
}

.hinweis--erfolg {
  border-left-color: var(--color-green-600);
}
.hinweis--erfolg .hinweis__symbol {
  color: var(--color-green-600);
}

.hinweis--fehler {
  border-left-color: var(--color-red-600);
}
.hinweis--fehler .hinweis__symbol {
  color: var(--color-red-600);
}

.hinweis--warnung {
  border-left-color: var(--color-orange-500);
}
.hinweis--warnung .hinweis__symbol {
  color: var(--color-orange-500);
}

.hinweis--info {
  border-left-color: var(--color-primary-500);
}
.hinweis--info .hinweis__symbol {
  color: var(--color-primary-500);
}

/* Alpine setzt diese Klassen beim Ein- und Ausblenden. */
.hinweis--kommt {
  animation: hinweis-rein 0.22s ease-out;
}

.hinweis--geht {
  animation: hinweis-raus 0.18s ease-in forwards;
}

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

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

.dark .hinweis {
  background: var(--color-base-900);
  border-color: var(--color-base-800);
}

.dark .hinweis__inhalt {
  color: var(--color-base-100);
}

@media (prefers-reduced-motion: reduce) {
  .hinweis--kommt,
  .hinweis--geht {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   Knöpfe

   Unfolds Button-Komponente ist ein Formular-Absender; für Knöpfe, die nur
   etwas aufklappen oder schließen, braucht es eine eigene, schlichtere Form.
--------------------------------------------------------------------------- */
.gen-knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--color-base-200);
  border-radius: var(--radius-default, 0.375rem);
  background: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-base-700);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.gen-knopf:hover {
  border-color: var(--color-base-300);
  background: var(--color-base-50);
}

.gen-knopf--primaer {
  border-color: var(--color-primary-600);
  background: var(--color-primary-600);
  color: #fff;
}

.gen-knopf--primaer:hover {
  border-color: var(--color-primary-700);
  background: var(--color-primary-700);
}

.gen-knopf:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.dark .gen-knopf {
  background: var(--color-base-900);
  border-color: var(--color-base-800);
  color: var(--color-base-200);
}

.dark .gen-knopf:hover {
  background: var(--color-base-800);
}

/* ---------------------------------------------------------------------------
   Dialog

   Nach dem Vorbild des Import-Modals aus traceflow2. Dort Bootstrap, hier
   Alpine — Verhalten und Aufbau sind dieselben: Grund, Kasten, Kopf, Inhalt,
   Fuß, und ein Absenden-Knopf, der gesperrt bleibt, bis eine Datei gewählt ist.
--------------------------------------------------------------------------- */
.dialog {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.dialog__grund {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.45);
}

.dialog__kasten {
  position: relative;
  width: min(32rem, 100%);
  border-radius: var(--radius-default, 0.5rem);
  background: #fff;
  box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.35);
  overflow: hidden;
}

.dialog__kasten--kommt {
  animation: dialog-rein 0.18s ease-out;
}

@keyframes dialog-rein {
  from {
    opacity: 0;
    transform: translateY(0.75rem) scale(0.98);
  }
}

.dialog__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-base-200);
}

.dialog__titel {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-base-900);
}

.dialog__zu {
  border: 0;
  background: none;
  padding: 0;
  color: var(--color-base-400);
  cursor: pointer;
}

.dialog__zu:hover {
  color: var(--color-base-700);
}

.dialog__zu .material-symbols-outlined {
  display: block;
  font-size: 1.25rem;
}

.dialog__inhalt {
  padding: 1.25rem;
}

.dialog__fuss {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--color-base-200);
  background: var(--color-base-50);
}

/* --- Ablagefläche --------------------------------------------------- */

.ablage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 2rem 1rem;
  border: 1px dashed var(--color-base-300);
  border-radius: var(--radius-default, 0.375rem);
  background: var(--color-base-50);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background-color 0.15s;
}

.ablage:hover {
  border-color: var(--color-primary-500);
}

.ablage--gefuellt {
  border-style: solid;
  border-color: var(--color-primary-500);
  background: color-mix(in oklab, var(--color-primary-500) 6%, transparent);
}

/* Das echte Feld verschwindet, das Label übernimmt die Fläche. `hidden` ginge
   nicht: Ein verstecktes Feld nimmt die Tastaturbedienung mit. */
.ablage__feld {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.ablage__symbol {
  font-size: 1.75rem;
  color: var(--color-primary-600);
}

.ablage__text {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-base-800);
  overflow-wrap: anywhere;
}

.ablage__hinweis {
  font-size: 0.75rem;
  color: var(--color-base-500);
}

.dark .dialog__kasten {
  background: var(--color-base-900);
}

.dark .dialog__kopf,
.dark .dialog__fuss {
  border-color: var(--color-base-800);
}

.dark .dialog__fuss,
.dark .ablage {
  background: var(--color-base-800);
}

.dark .dialog__titel,
.dark .ablage__text {
  color: var(--color-base-100);
}

@media (prefers-reduced-motion: reduce) {
  .dialog__kasten--kommt {
    animation: none;
  }
}

.gen-aktion--mit-symbol {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.gen-aktion--mit-symbol .material-symbols-outlined {
  font-size: 1rem;
}





/* --- Aufklappbereich: Anruf und Historie ----------------------------- */

.detail__fehler {
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-red-200);
  border-left-width: 3px;
  border-left-color: var(--color-red-600);
  border-radius: var(--radius-default, 0.375rem);
  background: var(--color-red-50);
  font-size: 0.875rem;
  color: var(--color-red-700);
}

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

.anruf__notiz textarea {
  width: 100%;
  padding: 0.625rem 0.75rem;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-base-900);
  background: #fff;
  border: 1px solid var(--color-base-200);
  border-radius: var(--radius-default, 0.375rem);
  resize: vertical;
}

.anruf__notiz textarea:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary-500) 18%, transparent);
}

.anrufliste__weg {
  display: flex;
  border: 0;
  background: none;
  padding: 0.125rem;
  color: var(--color-base-400);
  cursor: pointer;
}

.anrufliste__weg:hover {
  color: var(--color-red-600);
}

.anrufliste__weg .material-symbols-outlined {
  display: block;
  font-size: 1.125rem;
}

.detail__fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.25rem;
}

.dark .anruf__notiz textarea {
  background: var(--color-base-800);
  border-color: var(--color-base-700);
  color: var(--color-base-100);
}

.dark .detail__fehler {
  background: color-mix(in oklab, var(--color-red-600) 12%, transparent);
  border-color: var(--color-red-800);
  color: var(--color-red-200);
}

/* Einheitliche Breite für die Textfelder im Benutzerformular. Django setzt
   am Benutzernamen nur ein `maxlength`, keine Breite — das Feld lief deshalb
   über die ganze Spalte, während die Passwortfelder ihre Vorgabe behielten.
   Drei Felder untereinander in drei Breiten sehen nach Versehen aus. */
.gen-feld {
  max-width: 24rem;
  width: 100%;
}

/* ---------------------------------------------------------------------------
   Sofortsuche und sortierbare Spalten
--------------------------------------------------------------------------- */
.suche {
  position: relative;
  display: flex;
  align-items: center;
}

.suche__symbol {
  position: absolute;
  left: 0.625rem;
  font-size: 1.125rem;
  color: var(--color-base-400);
  pointer-events: none;
}

.suche input {
  width: 16rem;
  padding: 0.5rem 2rem 0.5rem 2.25rem;
  font-family: inherit;
  font-size: 0.8125rem;
  color: var(--color-base-900);
  background: #fff;
  border: 1px solid var(--color-base-200);
  border-radius: var(--radius-default, 0.375rem);
}

.suche input:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary-500) 18%, transparent);
}

/* Das eigene Kreuz des Browsers verschwindet — es sitzt je nach Browser
   woanders und sieht überall anders aus. */
.suche input::-webkit-search-cancel-button {
  display: none;
}

.suche__leeren {
  position: absolute;
  right: 0.5rem;
  display: flex;
  border: 0;
  background: none;
  padding: 0;
  color: var(--color-base-400);
  cursor: pointer;
}

.suche__leeren:hover {
  color: var(--color-base-700);
}

.suche__leeren .material-symbols-outlined {
  display: block;
  font-size: 1rem;
}

.spalte {
  padding: 0 !important;
}

.spalte__link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.spalte__link:hover {
  color: var(--color-base-800);
}

.spalte__link--aktiv {
  color: var(--color-primary-600);
}

/* Der Doppelpfeil der unsortierten Spalten bleibt blass: Er soll sagen
   „hier ginge etwas", ohne mit dem aktiven Pfeil zu konkurrieren. */
.spalte__pfeil {
  display: block;
  font-size: 1rem;
  opacity: 0.35;
}

.spalte__link--aktiv .spalte__pfeil {
  opacity: 1;
}

.spalte__link:hover .spalte__pfeil {
  opacity: 0.7;
}

.dark .suche input {
  background: var(--color-base-900);
  border-color: var(--color-base-800);
  color: var(--color-base-100);
}

.dark .spalte__link:hover {
  color: var(--color-base-100);
}

.dark .spalte__link--aktiv {
  color: var(--color-primary-500);
}

/* --- Fällig-Spalte --------------------------------------------------- */

.faellig__datum {
  color: var(--color-base-500);
}

/* Überfällig heißt: Der Zeitpunkt ist vorbei und niemand hat angerufen.
   Das ist die einzige Stelle der Tabelle, die um Aufmerksamkeit bittet. */
.faellig__datum--offen {
  color: var(--color-red-600);
  font-weight: 600;
}

.dark .faellig__datum--offen {
  color: var(--color-red-400);
}

/* ---------------------------------------------------------------------------
   Werkzeugleiste

   Suche und Filter in einer Zeile statt in einer Karte mit gestapelten
   Auswahlfeldern. Die Suche steht links, weil sie am häufigsten benutzt wird;
   die Beschriftungen stehen neben den Feldern und nicht darüber, was eine
   Zeile Höhe spart, ohne dass man raten muss, was ein Feld filtert.
--------------------------------------------------------------------------- */
.werkzeuge {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-base-200);
  border-radius: var(--radius-default, 0.375rem);
  background: #fff;
}

.werkzeuge__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* Trennt die Suche von den Filtern — sie tut etwas anderes: Die Suche
   filtert beim Tippen im Browser, die Auswahlfelder schicken ab. */
.werkzeuge__trenner {
  width: 1px;
  align-self: stretch;
  background: var(--color-base-200);
}

.feld {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.feld__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-base-500);
  white-space: nowrap;
}

.feld select {
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  font-family: inherit;
  color: var(--color-base-900);
  background: var(--color-base-50);
  border: 1px solid var(--color-base-200);
  border-radius: var(--radius-default, 0.375rem);
  max-width: 11rem;
}

.feld select:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary-500) 18%, transparent);
}

/* Nur ein Symbol: Der Knopf erscheint erst, wenn ein Filter gesetzt ist —
   dann weiß man auch ohne Beschriftung, was er zurücknimmt. */
.werkzeuge__weg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-base-200);
  border-radius: var(--radius-default, 0.375rem);
  color: var(--color-base-500);
  text-decoration: none;
}

.werkzeuge__weg:hover {
  border-color: var(--color-primary-500);
  color: var(--color-primary-600);
}

.werkzeuge__weg .material-symbols-outlined {
  display: block;
  font-size: 1.125rem;
}

.werkzeuge__zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-base-100);
  font-size: 0.8125rem;
  color: var(--color-base-500);
}

.werkzeuge__zahlen strong {
  color: var(--color-base-900);
  font-weight: 600;
}

.dark .werkzeuge {
  background: var(--color-base-900);
  border-color: var(--color-base-800);
}

.dark .werkzeuge__trenner,
.dark .werkzeuge__zahlen {
  border-color: var(--color-base-800);
  background: var(--color-base-800);
}

.dark .werkzeuge__zahlen {
  background: transparent;
}

.dark .feld select,
.dark .werkzeuge__weg {
  background: var(--color-base-800);
  border-color: var(--color-base-700);
  color: var(--color-base-100);
}

.dark .werkzeuge__zahlen strong {
  color: var(--color-base-100);
}