/*
 * CMS messe-intern.futureweb.at (Teil D).
 * Bewusst eigenstaendig: das CMS liegt in einem anderen Docroot als die App,
 * /assets/app.css ist hier nicht erreichbar — und ein Verweis auf die
 * App-Domain wuerde am Basic-Auth eine Passwortabfrage ausloesen.
 * Farben aus dem Futureweb-CI (httpdocs/assets/ci/ci.css) uebernommen.
 */
:root {
  --fw-tuerkis: #00aeaf;
  --fw-tuerkis-dunkel: #007a7b;
  --fw-tuerkis-hell: #e0f5f5;
  --fw-schwarz: #0b0f0e;
  --fw-weiss: #ffffff;
  --fw-grau-hell: #f2f4f4;
  --fw-grau: #5f6866;
  --fw-fehler: #b3261e;
  --fw-fehler-hell: #fdecea;
  --fw-warnung: #8a5a00;
  --fw-warnung-hell: #fdf3e0;
  --fw-gut: #1b6b3a;
  --fw-gut-hell: #e6f4ea;
  --linie: #d8dedd;
  --radius: 8px;
  --schrift: 'Barlow', system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--schrift);
  color: var(--fw-schwarz);
  background: var(--fw-grau-hell);
  line-height: 1.5;
}

.kopf {
  background: var(--fw-schwarz);
  color: var(--fw-weiss);
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.kopf .marke { font-weight: 700; letter-spacing: 0.02em; }
.kopf .marke span { color: var(--fw-tuerkis); }
.kopf nav { display: flex; gap: 1rem; margin-left: auto; align-items: center; }
.kopf nav a {
  color: var(--fw-weiss);
  text-decoration: none;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius);
  font-size: 0.95rem;
}
.kopf nav a:hover { background: rgba(255, 255, 255, 0.12); }
.kopf nav a.aktiv { background: var(--fw-tuerkis-dunkel); }
.kopf .wer { font-size: 0.85rem; opacity: 0.75; }
.kopf button.abmelden {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--fw-weiss);
  border-radius: var(--radius);
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
}
.kopf button.abmelden:hover { background: rgba(255, 255, 255, 0.12); }

main { padding: 1.5rem; max-width: 1400px; margin: 0 auto; }
h1 { font-size: 1.5rem; margin: 0 0 0.25rem; }
h2 { font-size: 1.1rem; margin: 2rem 0 0.75rem; }
.unterzeile { color: var(--fw-grau); margin: 0 0 1.5rem; }

/* --------------------------------------------------------------- Meldungen */
.meldung {
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  border: 1px solid;
}
.meldung.ok { background: var(--fw-gut-hell); border-color: #b7dfc4; color: var(--fw-gut); }
.meldung.fehler { background: var(--fw-fehler-hell); border-color: #f3c4c0; color: var(--fw-fehler); }

/* ------------------------------------------------------------------- Login */
.login-huelle {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}
.login-karte {
  background: var(--fw-weiss);
  padding: 2rem;
  border-radius: var(--radius);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
  width: min(100%, 380px);
}
.login-karte h1 { margin-bottom: 1.25rem; }
/* `display: block` ist hier kein Schoenheitsfehler, sondern noetig: im
   Assistenten ist `.feld` ein <label>, und bei einem inline-Element wirkt
   `margin-bottom` gar nicht — die Felder klebten dadurch aneinander (gemessen:
   0 px). Auf den Seiten, wo `.feld` ein <div> ist, aendert es nichts. */
.feld { display: block; margin-bottom: 1rem; }
.feld label { display: block; font-size: 0.9rem; margin-bottom: 0.3rem; font-weight: 600; }
.feld input {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  font: inherit;
}
.feld input:focus { outline: 2px solid var(--fw-tuerkis); border-color: transparent; }

.knopf {
  background: var(--fw-tuerkis-dunkel);
  color: var(--fw-weiss);
  border: none;
  border-radius: var(--radius);
  padding: 0.6rem 1.1rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.knopf:hover { background: var(--fw-tuerkis); }
.knopf.voll { width: 100%; }
.knopf.klein { padding: 0.35rem 0.7rem; font-size: 0.85rem; font-weight: 500; }
.knopf.hell { background: var(--fw-weiss); color: var(--fw-schwarz); border: 1px solid var(--linie); }
.knopf.hell:hover { background: var(--fw-grau-hell); }
.knopf.gefahr { background: var(--fw-fehler); }
.knopf.gefahr:hover { background: #8f1e17; }
.knopf:disabled { opacity: 0.45; cursor: not-allowed; }

/* ------------------------------------------------------------- Bilderraster */
.raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
}
.karte {
  background: var(--fw-weiss);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--linie);
  display: flex;
  flex-direction: column;
}
.karte img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; background: var(--fw-grau-hell); }
.karte .kein-bild {
  aspect-ratio: 2 / 3;
  display: grid;
  place-items: center;
  background: var(--fw-grau-hell);
  color: var(--fw-grau);
  font-size: 0.9rem;
}
.karte-text { padding: 0.8rem 0.9rem 0.5rem; }
.karte-text .name { font-weight: 700; }
.karte-text .betrieb { color: var(--fw-grau); font-size: 0.9rem; }
.karte-text .zeit { color: var(--fw-grau); font-size: 0.8rem; }

/* ------------------------------------------------- Zustellstatus-Symbole */
.status-zeile {
  display: flex;
  gap: 0.5rem;
  padding: 0 0.9rem 0.6rem;
  flex-wrap: wrap;
}
.status-marke {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--linie);
  background: var(--fw-grau-hell);
  cursor: help;
}
.status-marke .zeichen { font-size: 0.95rem; line-height: 1; }
.status-marke.zugestellt { background: var(--fw-gut-hell); border-color: #b7dfc4; color: var(--fw-gut); }
.status-marke.gelesen { background: var(--fw-tuerkis-hell); border-color: #a6dedf; color: var(--fw-tuerkis-dunkel); }
.status-marke.gesendet { background: var(--fw-grau-hell); color: var(--fw-grau); }
.status-marke.wartet { background: var(--fw-warnung-hell); border-color: #e8d3a8; color: var(--fw-warnung); }
.status-marke.fehler { background: var(--fw-fehler-hell); border-color: #f3c4c0; color: var(--fw-fehler); }
.status-marke.keiner { opacity: 0.55; }

/* Statuszeile der Galerie (freigegeben/ausgeblendet/…) */
.zustand {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  font-weight: 600;
}
.zustand.freigegeben { background: var(--fw-gut-hell); color: var(--fw-gut); }
.zustand.moderation { background: var(--fw-warnung-hell); color: var(--fw-warnung); }
.zustand.ausgeblendet, .zustand.abgelehnt { background: var(--fw-grau-hell); color: var(--fw-grau); }

/* ----------------------------------------------------------------- Aktionen */
.aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.6rem 0.9rem 0.9rem;
  margin-top: auto;
  border-top: 1px solid var(--linie);
}
.aktionen form { display: inline; }

/* ------------------------------------------------------------- Zeitstrahl */
details.verlauf { border-top: 1px solid var(--linie); }
details.verlauf > summary {
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--fw-tuerkis-dunkel);
  font-weight: 600;
  user-select: none;
}
details.verlauf > summary:hover { background: var(--fw-grau-hell); }
.zeitstrahl { list-style: none; margin: 0; padding: 0 0.9rem 0.9rem; font-size: 0.82rem; }
.zeitstrahl li {
  display: grid;
  grid-template-columns: 3.4rem 1.1rem 1fr;
  gap: 0.4rem;
  padding: 0.25rem 0;
  align-items: baseline;
}
.zeitstrahl .uhr { color: var(--fw-grau); font-family: var(--mono); font-size: 0.78rem; }
.zeitstrahl .fehlertext { color: var(--fw-fehler); font-size: 0.78rem; }
.zeitstrahl .nebensache { color: var(--fw-grau); font-size: 0.78rem; }

/* --------------------------------------------------------------- Protokoll */
.filterleiste { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filterleiste a {
  text-decoration: none;
  font-size: 0.85rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--linie);
  background: var(--fw-weiss);
  color: var(--fw-schwarz);
}
.filterleiste a.aktiv { background: var(--fw-tuerkis-dunkel); color: var(--fw-weiss); border-color: transparent; }

table.protokoll {
  width: 100%;
  border-collapse: collapse;
  background: var(--fw-weiss);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 0.88rem;
}
table.protokoll th {
  text-align: left;
  padding: 0.6rem 0.8rem;
  background: var(--fw-grau-hell);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--fw-grau);
}
table.protokoll td { padding: 0.5rem 0.8rem; border-top: 1px solid var(--linie); vertical-align: top; }
table.protokoll tr.fehler td { background: var(--fw-fehler-hell); }
table.protokoll .uhr { font-family: var(--mono); font-size: 0.82rem; white-space: nowrap; color: var(--fw-grau); }
table.protokoll .fehlertext { color: var(--fw-fehler); font-size: 0.82rem; }
.tabelle-huelle { overflow-x: auto; }

.leer { padding: 2rem; text-align: center; color: var(--fw-grau); background: var(--fw-weiss); border-radius: var(--radius); }

@media (max-width: 600px) {
  main { padding: 1rem; }
  .kopf { padding: 0.8rem 1rem; }
}

/* Cartoons ohne Galerie-Einverstaendnis: kein Freigabe-Knopf, nur ein Hinweis */
.hinweis-kein-bildschirm {
  font-size: 0.8rem;
  color: var(--fw-grau);
  align-self: center;
  padding: 0.35rem 0;
}

/* ------------------------------------------------------- Bestaetigungsdialog */
.fw-dialog {
  border: none;
  border-radius: var(--radius);
  padding: 0;
  max-width: min(92vw, 460px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
  color: var(--fw-schwarz);
  background: var(--fw-weiss);
}
.fw-dialog::backdrop { background: rgba(11, 15, 14, 0.55); }
.fw-dialog form { padding: 1.5rem; margin: 0; }
.fw-dialog-titel { font-size: 1.15rem; margin: 0 0 0.6rem; }
.fw-dialog-text { margin: 0 0 1rem; color: var(--fw-grau); font-size: 0.95rem; line-height: 1.55; }
.fw-dialog-feld { display: block; margin-bottom: 1.2rem; }
/* Muss NACH der Regel oben stehen und mitgesetzt sein: ein blosses [hidden]
   verliert sonst gegen `display: block` und das Feld bliebe sichtbar. */
.fw-dialog-feld[hidden] { display: none; }
.fw-dialog-feld span { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.3rem; }
.fw-dialog-feld input {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  font: inherit;
}
.fw-dialog-feld input:focus { outline: 2px solid var(--fw-tuerkis); border-color: transparent; }
.fw-dialog-knoepfe { display: flex; gap: 0.6rem; justify-content: flex-end; }

/* Meldungen blenden nach ein paar Sekunden aus (cms.js setzt .verblasst) */
.meldung {
  transition: opacity 0.55s ease, transform 0.55s ease, margin 0.55s ease, max-height 0.55s ease;
  max-height: 20rem;
}
.meldung.verblasst {
  opacity: 0;
  transform: translateY(-0.4rem);
  max-height: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

/* ------------------------------------------------- Neu erzeugen (Assistent)
 * Dreistufiges Formular: Hintergrund → Person → Stil. Ohne JavaScript stehen
 * alle drei Abschnitte untereinander, cms.js blendet sie einzeln ein.
 */
.assistent {
  background: var(--fw-weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem 1.5rem;
}
.assistent h2 { margin-top: 0; }

.schritt-leiste {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  flex-wrap: wrap;
}
.schritt-leiste li {
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: var(--fw-grau-hell);
  color: var(--fw-grau);
  font-size: 0.85rem;
  font-weight: 600;
}
.schritt-leiste li.aktiv { background: var(--fw-tuerkis-hell); color: var(--fw-tuerkis-dunkel); }
/* Nur anklickbar, wenn cms.js die Schritte tatsächlich steuert */
.assistent.gefuehrt .schritt-leiste li { cursor: pointer; }

.schritt { border-top: 1px solid var(--linie); padding-top: 1.25rem; }
.schritt:first-of-type { border-top: none; padding-top: 0; }

/* Auswahlzeile mit Radio/Checkbox links und erklärendem Text rechts */
.wahl {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  margin-bottom: 0.6rem;
  cursor: pointer;
}
.wahl:hover { border-color: var(--fw-tuerkis); }
.wahl input { margin-top: 0.25rem; flex: none; }
.wahl > span { display: flex; flex-direction: column; gap: 0.15rem; }
.wahl:has(input:checked) { border-color: var(--fw-tuerkis); background: var(--fw-tuerkis-hell); }
.versand-wahl { margin-top: 1.5rem; }

/* Label-als-Feld (Beschriftung im span, Eingabe darunter) */
.feld > span { display: block; font-size: 0.9rem; margin-bottom: 0.3rem; font-weight: 600; }
.feld select {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  font: inherit;
  background: var(--fw-weiss);
}
.feld-eingerueckt { margin-left: 2rem; }

.nebensache { color: var(--fw-grau); font-size: 0.85rem; font-weight: 400; }
.gruppen-titel {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fw-grau);
  margin: 1rem 0 0.5rem;
}

.hobbys { border: none; padding: 0; margin: 0 0 1rem; }
.hobbys legend { font-size: 0.9rem; font-weight: 600; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  font-size: 0.9rem;
  cursor: pointer;
  background: var(--fw-weiss);
}
.chip:has(input:checked) {
  border-color: var(--fw-tuerkis);
  background: var(--fw-tuerkis-hell);
  color: var(--fw-tuerkis-dunkel);
  font-weight: 600;
}
/* Gesperrt, sobald drei Hobbys gewählt sind — der Server weist mehr ohnehin ab */
.chip:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }

.stil-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.6rem; }
.stil-karte {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--fw-weiss);
}
.stil-karte:hover { border-color: var(--fw-tuerkis); }
.stil-karte:has(input:checked) { border-color: var(--fw-tuerkis); background: var(--fw-tuerkis-hell); }
.stil-karte input { margin-top: 0.25rem; flex: none; }
.stil-karte > span { display: flex; flex-direction: column; gap: 0.15rem; }
.marke {
  align-self: flex-start;
  margin-top: 0.2rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--fw-tuerkis-dunkel);
  color: var(--fw-weiss);
  font-size: 0.7rem;
  font-weight: 700;
}

.assistent-fuss {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linie);
  flex-wrap: wrap;
}
.assistent-fuss a.knopf { text-decoration: none; display: inline-block; }
.assistent-fuss [data-absenden] { margin-left: auto; }
.assistent-fuss button:disabled { opacity: 0.4; cursor: not-allowed; }

/* Knopf + Frist unten auf der Bildkarte */
/* Fusszeile der Bilderkarte: „Neu erzeugen" + Restfrist.
   Eigene Abstaende statt der von `.karte-text` geerbten 0.5rem — die liessen
   die Zeile oben an den Knoepfen und unten am Kartenrand kleben (gemessen:
   0 px bzw. 1 px). Unten dasselbe Mass wie `.aktionen`, damit die Karte unten
   ruhig ausklingt. */
.neu-zeile {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.7rem 0.9rem 0.9rem;
  margin-top: -0.2rem; /* die Knopfreihe darueber bringt schon eigenen Abstand mit */
  border-top: 1px solid var(--linie);
}
.neu-zeile a.knopf { text-decoration: none; }

/* Vorschau des aktuellen Cartoons über dem Assistenten */
.jetzt-bild { margin: 0 0 1.25rem; }
.jetzt-bild img {
  max-width: 260px;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--linie);
  display: block;
}
.jetzt-bild figcaption { margin-top: 0.35rem; }

/* ------------------------------------------- Anderes Foto beim Neu-Erzeugen */
/* Warnton fuer die Loesch-Frist: nicht rot (es ist kein Fehler), aber deutlich
   genug, dass niemand mit 24 Stunden ab Upload rechnet. */
.meldung.warnung {
  background: var(--fw-warnung-hell);
  border-color: #e8d3a8;
  color: var(--fw-warnung);
}

.foto-tausch {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 0 0.9rem;
  margin-bottom: 1.25rem;
  background: var(--fw-grau-hell);
}
.foto-tausch > summary {
  padding: 0.7rem 0;
  cursor: pointer;
  font-weight: 600;
  color: var(--fw-tuerkis-dunkel);
  user-select: none;
}
.foto-tausch[open] > summary { border-bottom: 1px solid var(--linie); margin-bottom: 0.9rem; }
.foto-tausch > *:last-child { margin-bottom: 0.9rem; }
.foto-tausch input[type="file"] {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--fw-weiss);
  font: inherit;
  font-size: 0.9rem;
}

.hinweis-fehler { color: var(--fw-fehler); font-size: 0.9rem; margin: 0 0 0.9rem; }

/* Kontrollkaestchen mit mehrzeiligem Text sauber ausrichten */
.haken {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  margin-bottom: 0.9rem;
  font-size: 0.92rem;
  line-height: 1.45;
  cursor: pointer;
}
.haken input { margin-top: 0.2rem; flex: none; }

/* ------------------------------------------------------------------- Leads */
/* Tageszaehler: eine Reihe grosser Zahlen ueber der Tabelle. Bricht auf
   schmalen Geraeten um, statt die Seite waagrecht zu schieben. */
.zaehler-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.8rem;
  margin-bottom: 1.25rem;
}
.zaehler {
  background: var(--fw-weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  font-size: 0.85rem;
  color: var(--fw-grau);
}
.zaehler .zahl {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--fw-schwarz);
}

/* Einstufung laut SPEC 5. Farbe UND Zeichen (🔥/🌤/❄️), damit die Stufe nicht
   allein an der Farbe haengt. */
.prio {
  display: inline-block;
  white-space: nowrap;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.82rem;
}
.prio-heiss { background: var(--fw-fehler-hell); color: var(--fw-fehler); }
.prio-warm { background: var(--fw-warnung-hell); color: var(--fw-warnung); }
.prio-kalt { background: var(--fw-grau-hell); color: var(--fw-grau); }

/* Abmeldung sticht das Opt-in — muss ins Auge fallen, bevor jemand anruft. */
.abgemeldet {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius);
  background: var(--fw-fehler-hell);
  color: var(--fw-fehler);
  font-size: 0.75rem;
  font-weight: 600;
}

/* Status und Notiz direkt in der Tabellenzeile.
   Zwei Zeilen (oben Auswahl + Knopf, darunter die Notiz ueber die volle Breite)
   statt alles nebeneinander: nebeneinander wurde die Tabelle breiter als das
   Fenster und das Notizfeld schob sich aus dem sichtbaren Bereich hinaus. */
.lead-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem;
  align-items: center;
}
.lead-form input[type="text"] { grid-column: 1 / -1; }
.lead-form select,
.lead-form input[type="text"] {
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--fw-weiss);
  font: inherit;
  font-size: 0.85rem;
}
.lead-form input[type="text"] { width: 100%; min-width: 0; }
.lead-form select { min-width: 0; }
.lead-form select:focus,
.lead-form input:focus { outline: 2px solid var(--fw-tuerkis); outline-offset: 1px; }

table.protokoll.leads td { vertical-align: middle; }
/* Genug Platz fuer Auswahl und Notiz, aber nicht so viel, dass die Tabelle
   breiter wird als das Fenster. */
table.protokoll.leads th:last-child { min-width: 15rem; }
/* Die Kontaktspalte enthaelt lange Mailadressen — umbrechen lassen, statt die
   ganze Tabelle in die Breite zu ziehen. */
table.protokoll.leads td:nth-child(5) { word-break: break-word; }

.leads-fuss {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.leads-fuss .unterzeile { margin: 0; }

/* ------------------------------------------------------ Gewinnspiel-Ziehung */
.ziehung-form { width: auto; max-width: 520px; margin-bottom: 2rem; }

.ziehung-block {
  background: var(--fw-weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}
.ziehung-kopf {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
}
.ziehung-daten { font-size: 0.85rem; color: var(--fw-grau); }
.ziehung-daten code { font-family: var(--mono); font-size: 0.8rem; }

.gewinner-liste { margin: 0.8rem 0; padding-left: 1.4rem; }
.gewinner-liste li { margin-bottom: 0.35rem; line-height: 1.4; }
.gewinner-liste .uhr { color: var(--fw-grau); font-family: var(--mono); font-size: 0.78rem; }

/* Fusszeile mit dem Protokoll-Link: eigener Bereich mit Trennlinie, damit sie
   nicht an der Gewinnerliste klebt (derselbe Fehler wie bei der Bilderkarte). */
.ziehung-fuss {
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
  flex-wrap: wrap;
  border-top: 1px solid var(--linie);
  padding-top: 0.7rem;
  margin-top: 0.9rem;
}
.ziehung-fuss .unterzeile { margin: 0; font-size: 0.8rem; }

/* --------------------------------------------------------- Betrieb (Dashboard) */
/* Ampel oben: Farbe UND Wortlaut. Wer aus zwei Metern draufschaut, soll die Lage
   erkennen, ohne zu lesen — wer liest, soll nicht raten müssen. */
.lage-ampel {
  padding: 1rem 1.2rem;
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  border: 1px solid;
  font-size: 1.05rem;
}
.lage-gut { background: var(--fw-gut-hell); border-color: #b7dfc4; color: var(--fw-gut); }
.lage-warnung { background: var(--fw-warnung-hell); border-color: #e8d3a8; color: var(--fw-warnung); }
.lage-stoerung { background: var(--fw-fehler-hell); border-color: #f3c4c0; color: var(--fw-fehler); }

/* Große Kacheln fürs Tablet: aus zwei Metern lesbar. */
.zaehler.gross .zahl { font-size: 2.6rem; }
.zaehler .zusatz {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--fw-grau);
}
.zaehler.schlecht { border-color: #f3c4c0; background: var(--fw-fehler-hell); }
.zaehler.schlecht .zahl { color: var(--fw-fehler); }

/* Anlagentabelle: Beschriftung links, schmal und ohne Umbruch */
table.protokoll th[scope], table.protokoll tbody th {
  text-align: left;
  white-space: nowrap;
  width: 1%;
  vertical-align: top;
  padding: 0.5rem 0.8rem;
  background: var(--fw-grau-hell);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--fw-grau);
}

/* Status-Filter auf der Leads-Seite (02.09.) */
.status-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 14px; font-size: 0.9rem;
}
.status-filter .filter-titel { color: var(--fw-grau); font-weight: 600; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--fw-grau-hell); border: 1px solid #d8dedd;
  border-radius: 999px; padding: 4px 12px; user-select: none;
}
.filter-chip:has(input:checked) { background: var(--fw-tuerkis-hell); border-color: var(--fw-tuerkis); }
.filter-chip input { accent-color: var(--fw-tuerkis); margin: 0; }
.status-filter .btn-link { color: var(--fw-tuerkis-dunkel); }

/* Sortierbare Spaltenkoepfe auf der Leads-Seite (02.09.) */
.sortier-link { color: inherit; text-decoration: none; white-space: nowrap; }
.sortier-link:hover { color: var(--fw-tuerkis-dunkel); text-decoration: underline; }

/* Leads: Zeilen-Hintergrund je Status (Wunsch Christian 24.09.) — leichte
   Toene, damit Text und Bedienelemente lesbar bleiben. Bedeutung:
   gruen = Auftrag, rot = kein Interesse, grau = kein Kontakt sinnvoll,
   bernstein = nachfassen (Handlung noetig), blau/tuerkis = in Arbeit,
   violett = Termin steht. "neu" bleibt bewusst weiss. */
table.protokoll.leads tr.status-kontaktiert td { background: #eaf1fb; }
table.protokoll.leads tr.status-mail_verschickt td { background: var(--fw-tuerkis-hell); }
table.protokoll.leads tr.status-nachfassen td { background: var(--fw-warnung-hell); }
table.protokoll.leads tr.status-termin td { background: #f1ecfa; }
table.protokoll.leads tr.status-auftrag_erhalten td { background: var(--fw-gut-hell); }
table.protokoll.leads tr.status-kein_interesse td { background: var(--fw-fehler-hell); }
table.protokoll.leads tr.status-kein_kontakt_sinnvoll td { background: var(--fw-grau-hell); }