/* 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 1rem;
  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 {
  padding: 0.875rem 1rem;
  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 {
  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__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  align-items: center;
}

.verteilen__leute {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.verteilen__person,
.verteilen__anzahl,
.zuweisen__alle,
.zuweisen__text {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--color-base-600);
}

.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 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  padding: 0.625rem 0.875rem;
  margin-bottom: 0.625rem;
  border: 1px solid var(--color-base-200);
  border-radius: var(--radius-default, 0.375rem);
  background: var(--color-base-50);
}

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

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

.kunde {
  border: 1px solid var(--color-base-200);
  border-radius: var(--radius-default, 0.375rem);
  background: var(--color-base-50);
}

.kunde[data-ueberfaellig] {
  border-left: 3px solid #c2410c;
}

.kunde__kopf {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr) minmax(0, 0.9fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 0.875rem 1.125rem;
  cursor: pointer;
  list-style: none;
}

.kunde__kopf::-webkit-details-marker {
  display: none;
}

.kunde[open] .kunde__kopf {
  border-bottom: 1px solid var(--color-base-200);
}

.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__inhalt {
  padding: 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

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

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