/* Aussehen des CRM. Alle Farb- und Schriftwerte stehen in farben.css, hier
 * steht kein einziger Hex-Wert. Abgegrenzt wird ueber Flaechenhelligkeit,
 * nicht ueber Rahmen.
 */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--schrift-system);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
}

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

/* --- Kopfzeile --- */

.kopf {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px var(--luft) 5px;
  background: var(--grund);
}
.marke {
  font-family: var(--schrift-marke);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--text-stark);
}
.marke::after {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 3px;
  border-radius: 50%;
  background: var(--marke-akzent);
  vertical-align: 2px;
}
.etappe { color: var(--text-leise); font-size: 12px; }
.kopf .rechts { margin-left: auto; }

/* Umschalter hell/dunkel */
.themaknopf {
  font-family: var(--schrift-marke);
  font-size: 12px;
  padding: 5px 12px;
  border: none;
  border-radius: var(--radius-pille);
  background: var(--kachel-hoch);
  color: var(--text);
  cursor: pointer;
}
.themaknopf:hover { background: var(--kachel); color: var(--text-stark); }

/* --- Gerüst --- */

.rahmen {
  display: flex;
  align-items: stretch;
  gap: var(--luft);
  padding: 0 var(--luft) var(--luft);
  min-height: calc(100vh - 50px);
}
main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--luft); }

h1 {
  font-family: var(--schrift-marke);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text-stark);
  margin: 0;
}
h2 {
  font-family: var(--schrift-marke);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-stark);
  margin: 22px 0 8px;
}

/* --- Seitenleiste --- */

.seitenleiste {
  flex: 0 0 210px;
  background: var(--kachel);
  border-radius: var(--radius-kachel);
  padding: 16px 0 20px;
  font-family: var(--schrift-marke);
  align-self: flex-start;
  position: sticky;
  top: var(--luft);
}
.seitenleiste .bereich {
  padding: 0 16px 8px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-leise);
}
.seitenleiste ul { list-style: none; margin: 0; padding: 0 8px; }
.seitenleiste .unterpunkte { margin: 2px 0 6px; padding: 0; }

.navpunkt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: 2px;
  border-radius: var(--radius-feld);
  color: var(--text);
  text-decoration: none;
  border: 1px solid transparent;
}
a.navpunkt:hover { background: var(--kachel-hoch); color: var(--text-stark); }
.navpunkt.aktiv { color: var(--text-stark); font-weight: 500; }
.navpunkt.unter { padding-left: 20px; font-size: 13px; color: var(--text-leise); }
/* Die aktive Auswahl bekommt einen duennen Rahmen, keine Fuellung. */
.navpunkt.unter.gewaehlt {
  border-color: var(--marke-akzent);
  color: var(--text-stark);
  font-weight: 500;
}
.navpunkt .anzahl {
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 500;
}
/* --akzent-text, nicht --marke-akzent: auf hellem Grund waere die reine
   Limette mit 1,29:1 nicht lesbar. */
.navpunkt.unter.gewaehlt .anzahl { color: var(--akzent-text); }
.navpunkt.spaeter { color: var(--text-leise); cursor: default; opacity: .6; }
.navpunkt.spaeter .anzahl { font-size: 11px; }
.navfuss { margin: 16px 16px 0; font-size: 11px; line-height: 1.4; color: var(--text-leise); opacity: .8; }

/* --- Kacheln --- */

.kachel {
  background: var(--kachel);
  border-radius: var(--radius-kachel);
  padding: 12px 16px 14px;
}

/* --- Filter --- */

.filter { margin: 0; }
.filterzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filterzeile .suche { flex: 1 1 240px; min-width: 190px; max-width: 340px; }
.filterzeile select { max-width: 210px; }
.filterzeile input, .filterzeile select, .feld input, .feld select {
  font-family: var(--schrift-system);
  font-size: 13px;
  padding: 7px 10px;
  border: none;
  border-radius: var(--radius-feld);
  background: var(--kachel-hoch);
  color: var(--text);
}
.filterzeile input::placeholder, .feld input::placeholder { color: var(--text-leise); }
.filterzeile input:focus-visible, .filterzeile select:focus-visible,
.feld input:focus-visible, .feld select:focus-visible,
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--marke-akzent);
  outline-offset: 1px;
}
.filterzeile .schalter {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-leise); white-space: nowrap;
}
.schalter input[type=checkbox] { accent-color: var(--marke-akzent); }

/* Der Bearbeiten-Schalter an den vier Textkacheln. Gleiche Bauart wie
   details.weitere, nur mit etwas mehr Abstand nach oben, weil darueber
   Fliesstext steht und keine Tabelle. */
details.nachtragen { margin-top: 14px; }
details.nachtragen > summary { margin-bottom: 10px; }

details.weitere { margin-top: 12px; }
details.weitere > summary, details.nachtragen > summary {
  display: inline-block;
  font-family: var(--schrift-marke);
  font-size: 13px;
  color: var(--akzent-text);
  cursor: pointer;
  list-style: none;
}
details.weitere > summary::-webkit-details-marker,
details.nachtragen > summary::-webkit-details-marker { display: none; }
details.weitere > summary::before,
details.nachtragen > summary::before { content: "▸ "; }
details.weitere[open] > summary::before,
details.nachtragen[open] > summary::before { content: "▾ "; }

.filter-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px 14px;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--linie);
}
/* min-width: 0 ist hier kein Schmuck: Raster- und Flexkinder haben von Haus
   aus min-width:auto und schrumpfen nicht unter ihre Inhaltsbreite. Zwei
   Datumsfelder haben in Chrome eine feste Mindestbreite und ragten dadurch
   73px in die Nachbarzelle, wo ihr Kalendersymbol über der Beschriftung von
   "Letzter Kontakt älter als" lag. */
.feld { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.feld > label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-leise);
}
.feld input, .feld select { width: 100%; min-width: 0; }
.feldnotiz { font-size: 11px; color: var(--text-leise); }
.spanne { display: flex; gap: 6px; align-items: center; min-width: 0; }
.spanne input { flex: 1 1 0; min-width: 0; }
/* Das Kalendersymbol darf das Feld nicht sprengen. */
input[type="date"]::-webkit-calendar-picker-indicator { margin-left: 0; padding-left: 2px; }

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

button, .knopf {
  font-family: var(--schrift-marke);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 16px;
  border: none;
  border-radius: var(--radius-pille);
  background: var(--kachel-hoch);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
}
button:hover, .knopf:hover { background: var(--kachel); color: var(--text-stark); }
button.haupt { background: var(--akzent-flaeche); color: var(--auf-akzent); }
button.haupt:hover { background: var(--akzent-flaeche); color: var(--auf-akzent); filter: brightness(1.08); }

/* --- Marken für aktive Filter --- */

.markenzeile { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.filtermarke {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px;
  padding: 4px 11px;
  border-radius: var(--radius-pille);
  background: var(--kachel-hoch);
  color: var(--text);
  text-decoration: none;
  border: 1px solid transparent;
}
.filtermarke:hover { border-color: var(--marke-akzent); }
.filtermarke .mname { color: var(--text-leise); }
.filtermarke .weg { color: var(--text-leise); font-size: 13px; }
.filtermarke.alle-weg { background: transparent; color: var(--text-leise); border: 1px dashed var(--linie); }

/* --- Kopfzeile des Ergebnisses --- */

.ergebniskopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.treffer {
  font-family: var(--schrift-marke);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-stark);
  line-height: 1.1;
}
.treffer .einheit { font-size: 13px; font-weight: 400; color: var(--text-leise); }
.treffer .leise { font-size: 12px; font-weight: 400; color: var(--text-leise); }

.umschalter { display: flex; gap: 6px; }
.umschalter a {
  padding: 5px 14px;
  border-radius: var(--radius-pille);
  border: 1px solid transparent;
  background: var(--kachel-hoch);
  text-decoration: none;
  color: var(--text);
  font-family: var(--schrift-marke);
  font-size: 13px;
}
.umschalter a:hover { color: var(--text-stark); }
/* Aktive Auswahl: duenner Rahmen, keine Fuellung. */
.umschalter a.aktiv { background: transparent; border-color: var(--marke-akzent); color: var(--text-stark); }

/* --- Tabelle --- */

.tabellenrahmen { overflow-x: auto; border-radius: var(--radius-feld); }
table.leadtabelle {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-family: var(--schrift-system);
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text);
}
.leadtabelle th, .leadtabelle td {
  text-align: left;
  white-space: nowrap;
  border: none;
  vertical-align: middle;
}
/* Kopfzeile in Markenfarbe. */
.leadtabelle thead th {
  background: var(--akzent-flaeche);
  color: var(--auf-akzent);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 7px 12px 7px 0;
  position: sticky;
  top: 0;
  z-index: 1;
}
.leadtabelle thead th:first-child { padding-left: 14px; border-radius: var(--radius-feld) 0 0 var(--radius-feld); }
.leadtabelle thead th:last-child { padding-right: 14px; border-radius: 0 var(--radius-feld) var(--radius-feld) 0; }

/* Dunkle Flaechen brauchen mehr Luft. */
.leadtabelle tbody td { padding: var(--zeilenluft) 12px; padding-left: 0; border-bottom: 1px solid var(--linie); }
.leadtabelle tbody td:first-child { padding-left: 14px; }
.leadtabelle tbody tr:last-child td { border-bottom: none; }
.leadtabelle tbody tr:hover td { background: var(--hover); }

.leadtabelle tfoot td {
  padding: var(--zeilenluft) 12px;
  padding-left: 0;
  border-top: 1px solid var(--linie);
  color: var(--text-leise);
  font-size: 12px;
}
.leadtabelle tfoot td:first-child { padding-left: 14px; }
.leadtabelle tfoot .summe {
  color: var(--text-stark);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Bei sechzehn Spalten scrollt die Tabelle quer. Die Firma bleibt stehen,
   sonst weiss man nach zwei Spalten nicht mehr, wessen Zeile man liest. */
.leadtabelle .sp-firma { position: sticky; left: 0; z-index: 2; background: var(--kachel); }
.leadtabelle tfoot .sp-firma { background: var(--kachel); }
.leadtabelle thead th.sp-firma { z-index: 3; background: var(--akzent-flaeche); }
.leadtabelle tbody tr:hover td.sp-firma { background: var(--hover); }
.leadtabelle td.zahl { font-variant-numeric: tabular-nums; }
.leise { color: var(--text-leise); }

.firmenzelle { display: flex; align-items: center; gap: 5px; max-width: 330px; }
/* Der Firmenname bleibt neutral: ueber zwanzig Zeilen hinweg soll die Tabelle
   ruhig bleiben. */
.firmenname {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-stark);
  text-decoration: none;
  font-weight: 500;
}
.firmenname:hover { text-decoration: underline; text-decoration-color: var(--marke-akzent); }
.zeichenreihe { flex: none; display: flex; gap: 3px; }

/* Warnstreifen links an der Zeile. */
tr.zeile-verbot  td:first-child { box-shadow: inset 3px 0 0 var(--warn-verbot-voll); }
tr.zeile-achtung td:first-child { box-shadow: inset 3px 0 0 var(--warn-achtung-voll); }
tr.zeile-neutral td:first-child { box-shadow: inset 3px 0 0 var(--warn-neutral-voll); }
tr.zeile-neutral td, tr.zeile-neutral .firmenname { color: var(--text-leise); }

/* Strichsymbol statt farbigem Kreis: die Farbe kommt ueber currentColor
   aus der Palette, das Symbol bringt keine eigene mit. */
.zeichen { display: inline-flex; align-items: center; cursor: help; }
.zeichen .symbol { display: block; }
.zeichen-verbot  { color: var(--warn-verbot-voll); }
.zeichen-achtung { color: var(--warn-achtung-voll); }
.zeichen-neutral { color: var(--warn-neutral-voll); }

/* Legende unter der Tabelle */
.legende {
  list-style: none;
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--linie);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 12px;
}
.legende li { display: flex; align-items: center; gap: 6px; }
.legende .leise { font-size: 11.5px; }

/* Status als Pille. */
.pille {
  display: inline-block;
  font-family: var(--schrift-system);
  padding: 2px 10px;
  border-radius: var(--radius-pille);
  font-size: 11.5px;
  line-height: 1.5;
  white-space: nowrap;
}
.pille-blau  { color: var(--pille-blau-text);  background: var(--pille-blau-grund); }
.pille-gruen { color: var(--pille-gruen-text); background: var(--pille-gruen-grund); }
.pille-grau  { color: var(--pille-grau-text);  background: var(--pille-grau-grund); padding-left: 0; }
.pille-nachfassen {
  color: var(--pille-nachfassen-text);
  background: var(--pille-nachfassen-grund);
  font-weight: 500;
}

/* Prioritaet */
.prio {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-pille);
  font-size: 11.5px;
  line-height: 1.5;
  font-weight: 500;
  white-space: nowrap;
}
.prio-hoch    { color: var(--prio-hoch-text);    background: var(--prio-hoch-grund); }
.prio-mittel  { color: var(--prio-mittel-text);  background: var(--prio-mittel-grund); }
.prio-niedrig { color: var(--prio-niedrig-text); background: var(--prio-niedrig-grund); }

/* Score als schmaler Balken mit Zahl daneben */
.scorezelle { display: inline-flex; align-items: center; gap: 7px; cursor: help; }
.scorebalken {
  display: block;
  width: 42px; height: 4px;
  border-radius: var(--radius-pille);
  background: var(--kachel-hoch);
  overflow: hidden;
}
.scorebalken > span {
  display: block; height: 100%;
  border-radius: var(--radius-pille);
  /* --akzent-text und nicht --akzent-flaeche: die Fuellung ist Vordergrund
     auf dem Gleis. Die reine Limette haette im hellen Satz 1,29:1 und waere
     schlicht unsichtbar. */
  background: var(--akzent-text);
}
.scorezahl { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.scorezahl .vonmax { color: var(--text-leise); font-size: 11px; }

.legende-trenner { gap: 6px; }
.legende-trenner .leise { margin-right: 10px; }

/* --- Kanban --- */

.kanban { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.spalte { flex: 0 0 248px; background: var(--kachel-hoch); border-radius: var(--radius-kachel); padding-bottom: 4px; }
.spalte.leer { opacity: .55; }
.spaltenkopf {
  padding: 8px 10px;
  font-size: 12px;
  display: flex; justify-content: space-between; gap: 6px;
  color: var(--text-stark);
}
.spaltenkopf .spaltenname { font-weight: 500; }
.spaltenkopf .anzahl { color: var(--text-leise); font-weight: 700; }
.spaltenzusatz {
  padding: 0 10px 6px;
  font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-leise);
}
.karten { padding: 6px; display: flex; flex-direction: column; gap: 6px; min-height: 8px; }
.karte {
  display: block;
  background: var(--kachel);
  border-radius: var(--radius-feld);
  transition: background .12s;
  border-left: 3px solid transparent;
  padding: 8px 10px;
  text-decoration: none;
  color: var(--text);
  font-size: 12px;
}
.karte:hover { background: var(--hover); }
.karte.karte-verbot  { border-left-color: var(--warn-verbot-voll); }
.karte.karte-achtung { border-left-color: var(--warn-achtung-voll); }
.karte.karte-neutral { border-left-color: var(--warn-neutral-voll); }
.karte .firma { font-weight: 500; display: block; color: var(--text-stark); }
.karte .zeile { color: var(--text-leise); display: block; }

.marken { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.marke-warn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; padding: 2px 8px; border-radius: var(--radius-pille);
  white-space: nowrap; border: none;
}
.warn-verbot  { color: var(--warn-verbot);  background: var(--warn-verbot-grund); }
.warn-achtung { color: var(--warn-achtung); background: var(--warn-achtung-grund); }
.warn-neutral { color: var(--warn-neutral); background: var(--warn-neutral-grund); }

/* --- Detailansicht --- */

.zurueck { display: inline-block; font-size: 13px; }
.saeulen { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--luft); align-items: start; }
/* Jede Spalte stapelt ihre Kacheln selbst. Ohne diese Klammer setzt das
   Raster die Kacheln abwechselnd links und rechts und zerreisst die
   Reihenfolge, in der sie beim Telefonat gelesen werden. */
.saeulen > .spalte { display: grid; gap: var(--luft); align-content: start; min-width: 0; }
@media (max-width: 860px) { .saeulen { grid-template-columns: 1fr; } }

dl.felder { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px 16px; margin: 0; font-size: 13px; }
dl.felder dt { color: var(--text-leise); }
dl.felder dd { margin: 0; color: var(--text); }
dd.fehlt { color: var(--text-leise); font-style: italic; opacity: .8; }

.kasten {
  background: var(--kachel-hoch);
  border-radius: var(--radius-feld);
  padding: 10px 14px;
  margin-bottom: 10px;
}
.kasten.warnung-verbot, .kasten.warnung-achtung, .kasten.warnung-neutral {
  display: flex; align-items: center; gap: 9px;
}
.kasten.warnung-verbot  { background: var(--warn-verbot-grund);  color: var(--warn-verbot); }
.kasten.warnung-achtung { background: var(--warn-achtung-grund); color: var(--warn-achtung); }
.kasten.warnung-neutral { background: var(--warn-neutral-grund); color: var(--warn-neutral); }
.kasten .symbol { flex: none; }

.fliesstext { white-space: pre-wrap; font-size: 13px; margin: 0; color: var(--text); }

.verlauf { list-style: none; padding: 0; margin: 0; }
.verlauf li { border-left: 2px solid var(--linie); padding: 0 0 14px 14px; }
.verlauf li:last-child { padding-bottom: 0; }
.verlauf .zeitpunkt { font-size: 12px; color: var(--text-leise); }
.verlauf .art {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  background: var(--kachel-hoch); color: var(--text-leise);
  padding: 1px 7px; border-radius: var(--radius-pille);
}

.phasenleiste { list-style: none; padding: 0; margin: 0; font-size: 12px; }
.phasenleiste li { border-radius: var(--radius-feld); color: var(--text-leise); border: 1px solid transparent; display: flex; align-items: center; gap: 6px; }
.phasenleiste li > span { padding: 3px 8px; }
.phasenleiste form { display: contents; }
.phasenknopf {
  font-family: var(--schrift-system); font-size: 12px; font-weight: 400;
  background: transparent; color: var(--text-leise);
  padding: 3px 8px; border-radius: var(--radius-feld); text-align: left;
}
.phasenknopf:hover { background: var(--kachel-hoch); color: var(--text-stark); }
.phasenleiste li.hier { border-color: var(--marke-akzent); color: var(--text-stark); font-weight: 500; }
.phasenleiste li.hier > span { color: var(--text-stark); }

.hinweiszeile { color: var(--text-leise); font-size: 12px; margin-top: 12px; }

@media (max-width: 760px) {
  .rahmen { flex-direction: column; }
  .seitenleiste { flex: none; position: static; }
}

/* --- Bearbeitung, Etappe 4 --- */

.sp-wahl { width: 28px; padding-left: 10px !important; }
.sp-wahl input { accent-color: var(--marke-akzent); }
.leadtabelle .sp-aktionen { text-align: right; padding-right: 14px; }

.aktionen { display: inline-flex; gap: 2px; justify-content: flex-end; }
.aktion {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 24px;
  border: none; border-radius: var(--radius-feld);
  background: transparent; color: var(--text-leise);
  cursor: pointer; padding: 0;
}
.aktion:hover { background: var(--kachel-hoch); color: var(--text-stark); }

/* Die Status-Pille ist ein Knopf, sieht aber aus wie vorher. */
.pillenknopf {
  font-family: var(--schrift-system);
  font-weight: 400;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 2px 10px;
}
.pillenknopf:hover { border-color: var(--marke-akzent); background: inherit; }
.statuswahl select {
  font-family: var(--schrift-system); font-size: 12px;
  padding: 2px 6px; border: 1px solid var(--marke-akzent);
  border-radius: var(--radius-pille);
  background: var(--kachel-hoch); color: var(--text);
  max-width: 190px;
}

/* --- Massenaktionen --- */

.massenleiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 12px; padding: 10px 14px;
  background: var(--kachel-hoch); border-radius: var(--radius-feld);
  font-size: 13px;
}
.massenleiste[hidden] { display: none; }
.massenform { display: flex; gap: 6px; align-items: center; }
.massenform select, .massenform input {
  font-family: var(--schrift-system); font-size: 13px;
  padding: 5px 8px; border: none; border-radius: var(--radius-feld);
  background: var(--kachel); color: var(--text);
}
.massenform button {
  padding: 5px 12px; font-size: 12px;
  background: var(--kachel); color: var(--text);
}

/* --- Dialog --- */

dialog {
  border: none; border-radius: var(--radius-kachel);
  background: var(--kachel); color: var(--text);
  padding: 0; max-width: 560px; width: calc(100vw - 40px);
}
dialog::backdrop { background: rgba(0, 0, 0, .55); }
.dialoginhalt { padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 12px; }
.dialoginhalt h2 { margin: 0; }
.dialoginhalt > p { margin: 0; }
.dialograster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px 14px;
}
.dialoginhalt textarea, .dialoginhalt input, .dialoginhalt select {
  font-family: var(--schrift-system); font-size: 13px;
  padding: 7px 10px; border: none; border-radius: var(--radius-feld);
  background: var(--kachel-hoch); color: var(--text);
  width: 100%; min-width: 0;
}
.dialoginhalt textarea { resize: vertical; }
.dialogknoepfe { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* --- Detailansicht, Kacheln --- */

.detailkopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.detailkopf h1 { margin: 0; }
.detailkopf p { margin: 2px 0 0; }
.detailaktionen { display: flex; gap: 8px; }
.detailaktionen .knopf { display: inline-flex; align-items: center; gap: 6px; }
h2.erste { margin-top: 0; }

.feldform { display: flex; gap: 6px; align-items: center; }
.feldform input[type="text"] {
  font-family: var(--schrift-system); font-size: 13px;
  padding: 3px 8px; border: none; border-radius: var(--radius-feld);
  background: var(--kachel-hoch); color: var(--text);
  width: 100%; min-width: 0;
}
.feldform input.schmal { max-width: 140px; }
.notizform { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.notizform textarea {
  font-family: var(--schrift-system); font-size: 13px; line-height: 1.5;
  padding: 10px 12px; border: none; border-radius: var(--radius-feld);
  background: var(--kachel-hoch); color: var(--text);
  width: 100%; resize: vertical;
}

/* --- Etappe 5: Anmeldung ------------------------------------------------- */

.anmeldeseite {
  min-height: 100vh; display: grid; place-items: center;
  background: var(--grund); padding: 24px;
}
.anmeldekachel {
  background: var(--kachel); border-radius: var(--radius-kachel);
  padding: 32px; width: 100%; max-width: 360px; min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.anmeldekachel h1 {
  font-family: var(--schrift-marke); font-size: 22px; margin: 0 0 2px;
  color: var(--text-stark);
}
.anmeldekachel label {
  font-size: 12px; color: var(--text-leise); margin-top: 12px;
}
.anmeldekachel input {
  font-family: var(--schrift-system); font-size: 14px;
  padding: 9px 11px; border: none; border-radius: var(--radius-feld);
  background: var(--kachel-hoch); color: var(--text); width: 100%;
}
.anmeldekachel button { margin-top: 18px; }
.anmeldekachel .klein { margin-top: 18px; }
.anmeldefehler {
  margin: 12px 0 0; padding: 9px 11px; border-radius: var(--radius-feld);
  background: var(--warn-verbot-grund); color: var(--warn-verbot-voll);
  font-size: 13px;
}

/* Wer angemeldet ist, steht in der Kopfzeile. */
.kopf .wer {
  font-family: var(--schrift-marke); font-size: 13px; color: var(--text);
  display: inline-flex; align-items: baseline; gap: 7px;
}
.kopf .wer .rolle {
  font-family: var(--schrift-system); font-size: 11px; color: var(--text-leise);
}
.abmeldeform { display: inline; margin: 0; }
.abmelden {
  font-family: var(--schrift-marke); font-size: 12px;
  background: none; border: none; color: var(--text-leise);
  cursor: pointer; padding: 4px 6px; border-radius: var(--radius-feld);
}
.abmelden:hover { color: var(--text); background: var(--kachel-hoch); }

/* Schlichte Tabelle fuer die Einstellungsseite. Nicht die Leadtabelle:
   die traegt Sortierung, Auswahl und fixierte Spalte, hier braucht es das
   alles nicht. */
table.schlicht { width: 100%; border-collapse: collapse; font-size: 13px; }
table.schlicht th {
  text-align: left; font-family: var(--schrift-marke); font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-leise); padding: 0 12px 7px 0; font-weight: 500;
}
table.schlicht td { padding: 7px 12px 7px 0; border-top: 1px solid var(--linie); }
/* Rechtsbuendig, aber nur die LETZTE Spalte darf ihren rechten Abstand
   verlieren. Sonst klebt eine Zahlenspalte an der naechsten Spalte, und aus
   "9" und "aktiv" wird gelesen "9aktiv". */
table.schlicht th.zahl, table.schlicht td.zahl { text-align: right; }
table.schlicht th.zahl:last-child, table.schlicht td.zahl:last-child { padding-right: 0; }
.warnhinweis { color: var(--warn-verbot-voll); }

/* Ein zweiter Bereich in der Seitenleiste braucht Abstand zum ersten,
   sonst sitzt "Verwaltung" direkt auf dem letzten Navigationspunkt. */
.seitenleiste .nav + .bereich { margin-top: 22px; }
/* Die letzte Spalte bekommt links Luft, damit sie nicht an der Zahlenspalte
   davor klebt. */
table.schlicht th.letzte, table.schlicht td.letzte { padding-left: 18px; }

/* --- Etappe 6: Pipeline-Verwaltung und Telefonskripte -------------------- */

/* Formularzeile: Felder nebeneinander, Knopf am Ende. Bricht auf schmalen
   Fenstern um; die Kinder brauchen min-width: 0, sonst schrumpfen sie nicht
   unter ihre Inhaltsbreite. */
.zeilenform {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: 12px; margin-top: 18px;
}
.zeilenform .feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 0 1 220px; }
.zeilenform .feld.breit { flex: 1 1 280px; }
.zeilenform label { font-size: 12px; color: var(--text-leise); }
.zeilenform input, .zeilenform select {
  font-family: var(--schrift-system); font-size: 13px;
  padding: 8px 10px; border: none; border-radius: var(--radius-feld);
  background: var(--kachel-hoch); color: var(--text); width: 100%;
}
.knopfreihe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.knopfreihe form { margin: 0; }

/* Phasentabelle. Eigene Tabelle und nicht die Leadtabelle: hier stehen
   Eingabefelder in den Zellen, keine Messwerte. */
.phasentabelle { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 14px; }
.phasentabelle th {
  text-align: left; font-family: var(--schrift-marke); font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em; font-weight: 500;
  color: var(--text-leise); padding: 0 10px 7px 0;
}
.phasentabelle td { padding: 5px 10px 5px 0; border-top: 1px solid var(--linie); vertical-align: middle; }
.phasentabelle th.zahl, .phasentabelle td.zahl { text-align: right; }
.phasentabelle td.nowrap { white-space: nowrap; }
.phasentabelle input[type=text], .phasentabelle input[type=number] {
  font-family: var(--schrift-system); font-size: 13px;
  padding: 5px 8px; border: none; border-radius: var(--radius-feld);
  background: var(--kachel-hoch); color: var(--text); width: 100%; min-width: 0;
}
.phasentabelle input.schmal { width: 70px; text-align: right; }
.phasentabelle tr.zieht { opacity: .45; }
.phasentabelle td.griff { cursor: grab; color: var(--text-leise); }
.phasentabelle button[disabled] { opacity: .3; cursor: default; }

/* Skripte */
.skriptform textarea {
  font-family: var(--schrift-system); font-size: 13px; line-height: 1.55;
  padding: 12px 14px; border: none; border-radius: var(--radius-feld);
  background: var(--kachel-hoch); color: var(--text); width: 100%; resize: vertical;
}
.skriptvorschau {
  font-family: var(--schrift-system); font-size: 12px; line-height: 1.5;
  white-space: pre-wrap; margin: 10px 0 0; padding: 12px 14px;
  background: var(--kachel-hoch); border-radius: var(--radius-feld);
  color: var(--text); max-height: 340px; overflow-y: auto;
}
.platzhalterliste, .statusliste, .fassungsliste { list-style: none; padding: 0; margin: 10px 0 0; }
.platzhalterliste li { font-size: 12px; padding: 3px 0; }
.platzhalterliste code, .skriptform code, .fassungsliste code {
  font-size: 12px; background: var(--kachel-hoch); padding: 1px 5px; border-radius: 5px;
}
.statusliste { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.statusliste li { font-size: 13px; }
.fassungsliste li { padding: 10px 0; border-top: 1px solid var(--linie); }
.fassungsliste li:first-child { border-top: none; }
.fassungsliste li.geltend > div:first-child { display: flex; align-items: center; gap: 8px; }
.hinweiskasten { background: var(--kachel-hoch); color: var(--text); }

/* Geteilte Anrufansicht: links der Leitfaden, rechts das Formular.
   Der Dialog ist sonst auf 560px gebaut, fuer ein einspaltiges Formular.
   Mit dem Leitfaden daneben braucht er mehr, sonst stehen beide Spalten als
   schmale Saeulen da und der Leitfaden ist nicht mehr lesbar. */
dialog:has(.anrufteilung) { max-width: 1040px; }
.anrufteilung {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0; align-items: stretch;
}
@media (max-width: 900px) { .anrufteilung { grid-template-columns: 1fr; } }
.anrufskript {
  background: var(--kachel-hoch);
  border-radius: var(--radius-kachel) 0 0 var(--radius-kachel);
  padding: 20px 22px; max-height: 72vh; overflow-y: auto; min-width: 0;
}
@media (max-width: 900px) {
  .anrufskript { border-radius: var(--radius-kachel) var(--radius-kachel) 0 0; max-height: 40vh; }
}
.anrufskript .skriptkopf h2 { margin: 0 0 2px; font-size: 15px; }
.skripttext {
  font-family: var(--schrift-system); font-size: 13px; line-height: 1.6;
  white-space: pre-wrap; margin-top: 12px; color: var(--text);
}
.skriptfehlstellen {
  font-size: 12px; margin: 10px 0 0; padding: 7px 10px;
  border-radius: var(--radius-feld);
  background: var(--warn-achtung-grund); color: var(--warn-achtung-voll);
}
.anrufformular { min-width: 0; }
/* Der gerenderte Leitfaden. Die Zeilenumbrüche des Textes bleiben stehen
   (ein Satz je Zeile, so ist er geschrieben), Überschriften bekommen Luft. */
.skripttext h3, .skripttext h4, .skripttext h5, .skripttext h6 {
  font-family: var(--schrift-marke); font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--akzent-text); margin: 18px 0 6px;
}
.skripttext h3:first-child, .skripttext h4:first-child { margin-top: 0; }
.skripttext strong { color: var(--text-stark); }
.skripttext hr { border: none; border-top: 1px solid var(--linie); margin: 16px 0 10px; }

/* --- Kontaktbearbeitung -------------------------------------------------- */

.kontaktkasten { display: block; }
.kontaktkopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kontaktform { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.kontaktraster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 12px;
}
.kontaktform label, .kontaktraster label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--text-leise); min-width: 0;
}
.kontaktraster label.breit, .kontaktform > label.breit { grid-column: 1 / -1; }
.kontaktform input[type=text], .kontaktform input[type=email], .kontaktform select {
  font-family: var(--schrift-system); font-size: 13px;
  padding: 7px 9px; border: none; border-radius: var(--radius-feld);
  background: var(--kachel); color: var(--text); width: 100%; min-width: 0;
}
.kontaktschalter { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.kontaktform label.schalter {
  flex-direction: row; align-items: center; gap: 7px;
  font-size: 13px; color: var(--text); cursor: pointer;
}
.kontaktform label.schalter input { width: auto; }
.kontaktform .knopfreihe { margin-top: 2px; }

/* --- Etappe 7: Kalender und Startseite ----------------------------------- */

.kalenderkopf {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.kalenderkopf h1 { margin: 0; }
.kalendersteuerung { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ansichtswahl { display: inline-flex; gap: 6px; margin-left: 6px; }
.knopf.gewaehlt { background: var(--akzent-flaeche); color: var(--auf-akzent); }

.kalenderfilter {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px;
  margin-bottom: 14px;
}
.kalenderfilter label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--text-leise); min-width: 0;
}
.kalenderfilter select {
  font-family: var(--schrift-system); font-size: 13px;
  padding: 7px 9px; border: none; border-radius: var(--radius-feld);
  background: var(--kachel); color: var(--text);
}
.kalenderlegende { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-left: auto; }
.legendenpunkt { font-size: 12px; color: var(--text-leise); display: inline-flex; align-items: center; gap: 6px; }
.legendenpunkt::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--personenfarbe, var(--person-ohne)); flex: none;
}
.legendenpunkt:last-child::before { display: none; }

/* Die Farbe der Person. Eine Variable je Topf, damit stil.css keinen
   einzigen Hexwert kennt. */
.benutzerfarbe-a, .legendenpunkt.benutzerfarbe-a { --personenfarbe: var(--person-a); }
.benutzerfarbe-b, .legendenpunkt.benutzerfarbe-b { --personenfarbe: var(--person-b); }
.benutzerfarbe-c, .legendenpunkt.benutzerfarbe-c { --personenfarbe: var(--person-c); }
.benutzerfarbe-d, .legendenpunkt.benutzerfarbe-d { --personenfarbe: var(--person-d); }
.benutzerfarbe-e, .legendenpunkt.benutzerfarbe-e { --personenfarbe: var(--person-e); }
.benutzerfarbe-f, .legendenpunkt.benutzerfarbe-f { --personenfarbe: var(--person-f); }
.benutzerfarbe-ohne { --personenfarbe: var(--person-ohne); }

.monatsraster { width: 100%; border-collapse: collapse; table-layout: fixed; }
.monatsraster th {
  font-family: var(--schrift-marke); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-leise); text-align: left; padding: 0 0 8px 4px;
}
.monatsraster td {
  vertical-align: top; border-top: 1px solid var(--linie);
  padding: 5px 4px 8px; height: 96px; min-width: 0;
}
.monatsraster td.fremd { opacity: .4; }
.monatsraster td.heute { background: var(--kachel-hoch); }
.tageszahl {
  display: inline-block; font-size: 12px; color: var(--text-leise);
  text-decoration: none; margin-bottom: 3px;
}
.monatsraster td.heute .tageszahl { color: var(--akzent-text); font-weight: 600; }
.mehr { display: block; font-size: 11px; color: var(--text-leise); margin-top: 2px; }

/* Ein Eintrag. Der farbige Balken links steht für die Person. */
.kalendereintrag {
  display: flex; align-items: baseline; gap: 5px;
  font-size: 12px; line-height: 1.35; text-decoration: none; color: var(--text);
  padding: 2px 5px 2px 6px; margin-bottom: 2px; border-radius: 5px;
  border-left: 3px solid var(--personenfarbe, var(--person-ohne));
  background: var(--kachel-hoch); min-width: 0;
}
.kalendereintrag:hover { background: var(--hover); }
.kalendereintrag .uhrzeit { color: var(--text-leise); font-variant-numeric: tabular-nums; flex: none; }
.kalendereintrag .wen { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kalendereintrag.aufgabe { border-left-style: dashed; }
.aufgabenzeichen { color: var(--personenfarbe, var(--person-ohne)); flex: none; font-size: 9px; }

.tagesspalten {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; align-items: start;
}
.tagesspalten.einzeln { grid-template-columns: minmax(0, 560px); }
@media (max-width: 1100px) { .tagesspalten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tagesspalte { padding: 12px 12px 14px; }
.tagesspalte h2 { font-size: 13px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.tagesspalte.heute { outline: 1px solid var(--akzent-flaeche); }

/* Startseite */
.aufgabenliste { list-style: none; padding: 0; margin: 10px 0 0; }
.aufgabenliste li { padding: 9px 0; border-top: 1px solid var(--linie); }
.aufgabenliste li:first-child { border-top: none; }
.aufgabenliste a {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  text-decoration: none; color: var(--text); font-size: 13px;
}
.aufgabenliste a:hover .firma { text-decoration: underline; }
.aufgabenliste .firma { font-weight: 500; }
/* Der Punkt in der Legende steht in einer Textzeile und wird wie Text
   gemessen. Mit der Personenfarbe "ohne" kam er auf 4,12:1. */
.legendenpunkt .aufgabenzeichen { color: var(--text-leise); }