/* Seitenspezifische Regeln des Bestands: Pipeline, öffentliche Buchung,
   Realitätscheck, Einstellungen, Aufgaben, Warteliste, Verlauf, Bild zu PDF.

   Was hier NICHT mehr steht: Tokens (tokens.css), Elementregeln und
   Formularfelder (basis.css), Bauteile wie Knopf, Karte, Meldung, Liste
   (komponenten.css), Kopfzeile, Seitenleiste und Breiten (layout.css).

   Diese Datei ist ein Rest und soll weiter schrumpfen: jeder Abschnitt gehört
   auf Dauer in die CSS-Datei seines Features. Nichts Neues hier anbauen. */

/* --- Anmeldung ------------------------------------------------------------ */
.auth-card {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: var(--schatten-2);
  padding: var(--sp-6) var(--sp-5); text-align: center;
}
.auth-card form { text-align: left; margin-top: var(--sp-4); }

/* --- Pipeline ------------------------------------------------------------- */
.kanban { display: flex; gap: var(--sp-3); overflow-x: auto; padding-bottom: var(--sp-4); }
.kanban-col {
  flex: 0 0 250px; background: var(--flaeche-2);
  border-radius: var(--radius); padding: var(--sp-2);
}
.kanban-col > header, .kanban-col > summary {
  font-family: var(--font-display); font-weight: 600; font-size: var(--txt-sm);
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--sp-2); padding: .3rem .2rem; cursor: pointer;
}
/* Zähler: dunkle Pille auf hell, helle Pille auf dunkel. Dreht sich mit dem
   Theme mit, ohne dass die Farbe umgeschaltet werden muss. */
.count {
  background: var(--text); color: var(--flaeche);
  border-radius: var(--radius-pill); font-size: var(--txt-xs);
  padding: .05rem .5rem; font-variant-numeric: tabular-nums;
}
.kanban-cards { display: flex; flex-direction: column; gap: var(--sp-2); min-height: 30px; }
.lead-card {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3);
}
/* Kunde mit offener Anforderung an den Innendienst: sichtbar, ohne zu schreien. */
.lead-card.meldung-offen { border-left: 3px solid var(--warnung); }
.lead-card-main { display: block; text-decoration: none; color: var(--text); }
.lead-card-main strong { display: block; }
.lead-card-main .muted { font-size: var(--txt-sm); }
.lead-card .quelle {
  display: block; font-size: var(--txt-xs); color: var(--text-leise); margin-top: .2rem;
}
.stufe-form select { font-size: var(--txt-xs); padding: .25rem .3rem; margin-top: .45rem; }

/* --- Lead-Detail ---------------------------------------------------------- */
.stufe-bar { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.stufe-bar label { margin: 0; }
.stufe-bar select { width: auto; min-width: 200px; margin: 0; }

.notizen { white-space: pre-wrap; }
/* Angeforderter Text einer Meldung: mehrzeilig, wie der Vertriebler ihn tippte. */
.meldung-text { white-space: pre-line; }
.back { margin-top: var(--sp-5); }

/* --- Einstellungen -------------------------------------------------------- */
.neu-block { margin-top: var(--sp-4); }
.neu-block summary { cursor: pointer; font-weight: 600; }
.neu-block form { margin-top: var(--sp-3); }

.verf-liste { list-style: none; padding: 0; margin: 0; }
.verf-liste li {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--linie);
}
.verf-liste form { margin: 0; }
.verf-neu {
  display: flex; gap: var(--sp-2); align-items: center;
  margin-top: var(--sp-3); flex-wrap: wrap;
}
.verf-neu select, .verf-neu input { width: auto; margin: 0; }

/* --- Öffentliche Buchung -------------------------------------------------- */
.public-head { margin-bottom: var(--sp-5); }
.public-head.center { text-align: center; }
.public-head h1 { font-size: var(--txt-2xl); margin: var(--sp-1) 0 .2rem; }
.typ-liste { display: grid; gap: var(--sp-4); }
.typ-karte {
  display: block; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: var(--schatten-2);
  padding: var(--sp-5); text-decoration: none; color: var(--text);
  transition: transform .08s, box-shadow var(--tempo);
}
.typ-karte:hover { transform: translateY(-2px); box-shadow: var(--schatten-3); }
.typ-karte strong { font-family: var(--font-display); font-size: var(--txt-lg); display: block; }
.typ-karte .dauer {
  display: inline-block; background: var(--flaeche-2); color: var(--text);
  border-radius: var(--radius-pill); font-size: var(--txt-sm);
  padding: .1rem .6rem; margin: .3rem 0;
}
.typ-karte p { color: var(--text-leise); margin: var(--sp-1) 0; }
.typ-karte .weiter { color: var(--akzent); font-weight: 600; }

.buchung-form h2 { font-size: var(--txt-lg); margin-top: var(--sp-5); }
.slot-tag { margin-bottom: var(--sp-5); }
.slot-tag h3 { font-size: 1rem; margin: var(--sp-1) 0; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: var(--sp-2); }
.slot {
  background: var(--flaeche); border: 1px solid var(--linie-stark);
  border-radius: var(--radius-sm); padding: .55rem 0;
  font-family: var(--font-body); font-weight: 600; cursor: pointer;
  font-size: var(--txt-md); color: var(--text);
  font-variant-numeric: tabular-nums;
}
.slot:hover { border-color: var(--zustand); }
.slot.aktiv { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }
.kontaktblock { margin-top: var(--sp-5); border-top: 2px solid var(--linie); padding-top: var(--sp-5); }
.gewaehlt { background: var(--flaeche-2); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); }

.erfolg-haken {
  width: 64px; height: 64px; margin: 0 auto var(--sp-4);
  border-radius: 50%; background: var(--zustand); color: var(--marke-petrol-tief);
  font-size: var(--txt-2xl); display: flex; align-items: center; justify-content: center;
}
.termin-zeit { font-family: var(--font-display); font-size: var(--txt-lg); font-weight: 600; }
/* Umbuchen und Absagen auf der oeffentlichen Seite des Kunden: eine
   .center-card, deshalb steht die Reihe mittig. Hiess bis v3.45 ebenfalls
   .termin-aktionen und zentrierte damit auch die Knoepfe in den Terminlisten,
   wo sie linksbuendig unter dem Termin gehoeren (die Definition steht in
   termine.css). Zwei Bauteile unter einem Namen, das war der Fehler. */
.verwalten-aktionen { display: flex; gap: var(--sp-2); justify-content: center; margin: var(--sp-4) 0 var(--sp-1); }
.verwalten-aktionen form { margin: 0; }

/* --- Stufenzeile mit Balken, und die Quellen ------------------------------ */
/* Die Zeile (Name, Balken, Zahl) traegt zwei Dinge: den Bestand je Stufe im
   Dashboard („Wo es haengt") und die Score-Balken in der Kundenakte. Der eigene
   Funnel-Block, fuer den sie urspruenglich gebaut wurde, ist in v3.95 in der
   Stau-Karte aufgegangen: beide zeigten denselben Bestand mit zwei
   verschiedenen Zahlen. Sein Container (die Klasse funnel, hier bewusst ohne Punkt, sonst haelt
   tools/ui_pruefen.py den Kommentar fuer eine Definition) ist entfallen, die Namen
   der Zeile sind geblieben, weil sie an beiden Orten dasselbe Bauteil meinen. */
/* Die Balkenzeile ist mit v3.179 in den Bauteil-Katalog gewandert
   (`static/komponenten.css`, Abschnitt Balkenzeile): sie traegt jetzt
   zwei Seiten, das Dashboard und die Auswertung. */

.quellen-liste { list-style: none; padding: 0; margin: 0; }
.quellen-liste li {
  display: flex; justify-content: space-between; align-items: center;
  padding: .35rem 0; border-bottom: 1px solid var(--linie);
}
.abo-link {
  display: block; background: var(--flaeche-2); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm); font-size: var(--txt-sm); word-break: break-all;
  font-family: var(--font-mono);
}

.heute-liste { list-style: none; padding: 0; margin: 0 0 var(--sp-3); }
/* Name, Zusatz und die Handlungen in **einer** Reihe, die umbricht. Bis v3.219
   war die Zeile schlichter Fluss: die Knoepfe trugen keine Klasse und sahen
   deshalb aus wie fetter Text mitten im Satz, und ob „Zusagen" ein Wort oder
   ein Knopf war, sah man erst beim Tippen. */
.heute-liste li {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem;
  padding: .45rem 0; border-bottom: 1px solid var(--linie);
}
.heute-liste li:last-child { border-bottom: 0; }
.heute-liste li a:not(.btn) { color: var(--text); text-decoration: none; font-weight: 500; }
.heute-liste li a:not(.btn):hover { text-decoration: underline; }
.heute-liste li.ueberfaellig a:not(.btn) { color: var(--gefahr); }
/* Das Formular ist nur die Huelle um seinen Knopf (jede Handlung, die etwas
   aendert, braucht eins). Es soll die Reihe nicht auseinanderziehen. */
.heute-liste li form { display: inline-flex; }
/* Was in voller Breite darunter gehoert: der Wortlaut einer Aufgabe und die
   letzte Regung. Ohne diese Zeile stuenden sie als weiteres Flex-Element
   neben den Knoepfen. */
.heute-liste li > p { flex: 1 0 100%; }
/* Der Wortlaut einer Aufgabe unter ihrem Kunden. Ein Absatz risse mit dem
   Abstand des Browsers die Zeile auseinander; die Umbrueche im Text
   selbst kommen von `.meldung-text`. */
.heute-liste li .meldung-text { margin: .1rem 0 .15rem; }

/* --- Realitätscheck ------------------------------------------------------- */
.frage { border: 0; border-top: 1px solid var(--linie); padding: var(--sp-3) 0 .3rem; margin: 0; }
.frage legend { font-weight: 600; padding: 0; font-size: var(--txt-md); }
.option { display: flex; align-items: flex-start; gap: var(--sp-2); font-weight: 400; margin-bottom: .35rem; cursor: pointer; }
.option input { margin: .25rem 0 0; }
.check-score { display: flex; gap: var(--sp-5); align-items: center; flex-wrap: wrap; }
.score-zahl {
  font-family: var(--font-display); font-size: var(--txt-3xl); font-weight: 700;
  color: var(--text); line-height: 1; font-variant-numeric: tabular-nums;
}
.score-zahl span { font-size: 1rem; color: var(--text-leise); }
.score-bereiche { flex: 1 1 280px; display: flex; flex-direction: column; gap: var(--sp-1); }
.hebel-titel { font-size: 1rem; margin: var(--sp-4) 0 .3rem; }
.hebel-liste { margin: 0; padding-left: var(--sp-5); }

/* Formular, das als Knopf in einer Zeile steht (Haken abhaken). */
.check-form-inline { margin: 0; }

/* --- Warteliste ----------------------------------------------------------- */
.warteliste-block {
  margin-top: var(--sp-6); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); background: var(--flaeche);
}
.warteliste-block summary { cursor: pointer; font-weight: 600; font-family: var(--font-display); }
.warteliste-block form { margin-top: var(--sp-3); }
.wl-tabelle { width: 100%; border-collapse: collapse; }
.wl-tabelle th, .wl-tabelle td {
  text-align: left; padding: var(--sp-2) var(--sp-1);
  border-bottom: 1px solid var(--linie); vertical-align: top;
}
.wl-tabelle th { font-size: var(--txt-sm); color: var(--text-leise); font-weight: 600; }
.wl-tabelle tr.benachrichtigt { opacity: .6; }
.wl-tabelle form { margin: 0; }

/* --- Termine (CRM) -------------------------------------------------------- */
.termin-zeile {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-4); padding: var(--sp-2) 0; border-bottom: 1px solid var(--linie);
}
.termin-zeile.abgesagt { opacity: .55; text-decoration: line-through; }
.termin-zeile form { margin: 0; }
/* Angebot zum Termin: der Closer sieht auf einen Blick, ob er losfahren kann. */
.angebot-da { color: var(--ok); font-weight: 600; font-size: var(--txt-md); }
.angebot-hinterlegen { margin-top: .3rem; font-size: var(--txt-md); }
.angebot-hinterlegen summary { cursor: pointer; color: var(--akzent); }
.angebot-hinterlegen form { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-1); }

/* --- Verlauf und Aktivitäten ---------------------------------------------- */
.verlauf { list-style: none; padding: 0; margin: 0; }
/* Umbruch, damit am Handy nicht Zeit, Text, Verfasser und Loeschen-Knopf um
   dieselben 390 Pixel streiten: Verfasser und Knopf rutschen dann nach unten. */
.verlauf li {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); padding: .45rem 0;
  border-bottom: 1px solid var(--linie); font-size: var(--txt-md);
}
.verlauf-zeit {
  color: var(--text-leise); font-size: var(--txt-xs); font-family: var(--font-mono);
  white-space: nowrap; min-width: 108px; font-variant-numeric: tabular-nums;
}
/* Website-Anfragen und Notizen sind mehrzeilig. */
.verlauf-text { white-space: pre-line; flex: 1 1 55%; min-width: 0; }
.verlauf-wer {
  color: var(--text-leise); font-size: var(--txt-xs); white-space: nowrap;
  align-self: center; margin-left: auto;
}
.verlauf-weg { margin: 0; align-self: center; }
.verlauf-notiz .verlauf-text { font-weight: 600; }
.verlauf-notiz::before { content: "✎ "; color: var(--akzent); }

/* --- Bild zu PDF (Modul bildpdf) ------------------------------------------ */
.bildpdf-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.bildpdf-item {
  border: 1px solid var(--linie); border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3); background: var(--flaeche);
}
.bildpdf-item.ziehen { opacity: .6; border-color: var(--zustand); }
.bildpdf-kopf { display: flex; align-items: center; gap: var(--sp-1); margin-bottom: var(--sp-2); }
.bildpdf-griff {
  cursor: grab; touch-action: none; color: var(--text-leise); font-size: var(--txt-lg);
  padding: .2rem .45rem; border: 1px solid var(--linie);
  border-radius: var(--radius-sm); user-select: none;
}
.bildpdf-nr { font-family: var(--font-display); font-weight: 700; color: var(--text); min-width: 1.4rem; }
.bildpdf-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bildpdf-vorschau {
  display: block; width: 100%; max-height: 260px; object-fit: contain;
  background: var(--flaeche-2); border-radius: var(--radius-sm);
}
.bildpdf-item textarea { margin: var(--sp-2) 0 0; }
/* Vier Aktionen passen am Handy nicht in eine Zeile: umbrechen statt quetschen. */
.bildpdf-aktionen { flex-wrap: wrap; }

/* --- Responsive ----------------------------------------------------------- */
@media (min-width: 641px) {
  /* Desktop: Pipeline-Spalten immer aufgeklappt */
  .kanban-col > summary { list-style: none; cursor: default; }
  .kanban-col > summary::-webkit-details-marker { display: none; }
  .kanban-col > .kanban-cards { display: flex !important; }
}

@media (max-width: 640px) {
  .stufe-bar { flex-direction: column; align-items: stretch; }
  .stufe-bar select { width: 100%; }
  /* Pipeline-Stufen stapeln und einklappbar */
  .kanban { flex-direction: column; overflow-x: visible; }
  .kanban-col { flex: none; width: 100%; }
  .kanban-col:not([open]) > .kanban-cards { display: none; }
}