/* Farben der CMC 2027: Cyan #29A8E0 auf Schwarz, dazu Hellgrau #ECEBE7.
   Aus dem Entwurf gemessen, nicht geschätzt (10.10.2026).

   **Die Variable heißt weiter `--gold`.** Sie steht an über hundert Stellen in
   dieser Datei; sie umzubenennen hieße, hundert Zeilen anzufassen, um nichts zu
   gewinnen. Hier wird der Wert getauscht, nicht der Name - der Rest der Datei
   bleibt unberührt und bekommt die neue Farbe von selbst. */

:root {
  --gold: #29a8e0;
  --gold-dunkel: #1b8fc4;
  --anthrazit: #0b0b0c;
  --anthrazit-hell: #1c1c1f;
  --grund: #f6f6f4;
  --karte: #ffffff;
  --text: #2a2a2d;
  --text-leise: #6e6e73;
  --linie: #e0dfdb;
  --warnung: #b4452f;
  --gut: #3f7a4a;
  --radius: 8px;
  --leiste-breite: 224px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* eventbase arbeitet mit 11-13px und Abständen von 8-10px. Das wirkt erst
     eng, zeigt aber deutlich mehr Zeilen - und genau darum geht es bei
     Teilnahme- und Akquiselisten. */
  font: 13.5px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--grund);
  color: var(--text);
}

a { color: var(--anthrazit); }

/* --- Seitenleiste ---------------------------------------------------------
   Links fest, Inhalt daneben. Unter 900 px schiebt sie sich ueber den Inhalt
   und wird ueber die Kopfzeile aufgeklappt - ohne JavaScript, per Checkbox. */

.leiste {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--leiste-breite);
  background: var(--anthrazit);
  color: #ded9d0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 20;
}

.leiste .marke {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 18px 20px 16px;
  text-decoration: none;
  border-bottom: 1px solid #454545;
}

.marke-zeichen { color: var(--gold); font-weight: 700; letter-spacing: 0.08em; }
.marke-text    { color: #9c968b; font-size: 13px; }

.leiste nav { flex: 1; padding: 12px 0 20px; }

.leiste .gruppe {
  padding: 16px 20px 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #837d72;
}

.leiste ul { list-style: none; margin: 0; padding: 0; }

.leiste a,
.leiste .geplant {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 18px;
  font-size: 13.5px;
  text-decoration: none;
  border-left: 3px solid transparent;
  white-space: nowrap;
}

.leiste a { color: #ded9d0; }
.leiste a:hover { background: var(--anthrazit-hell); color: #fff; }

.leiste a.aktiv {
  background: var(--anthrazit-hell);
  color: #fff;
  border-left-color: var(--gold);
}

/* Geplant, aber noch nicht gebaut: sichtbar, damit man die Form des Ganzen
   sieht - aber erkennbar und nicht anklickbar. */
.leiste .geplant { color: #6d675d; cursor: default; }
.leiste .geplant::after {
  content: "bald";
  margin-left: auto;
  flex: none;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  border: 1px solid #4d4a44;
  border-radius: 999px;
  padding: 0 6px;
  color: #6d675d;
}

.leiste .zeichen {
  width: 16px;
  text-align: center;
  color: var(--gold);
  opacity: 0.75;
  font-size: 12px;
}

.leiste .geplant .zeichen { color: #5a554d; }

.leiste-fuss {
  border-top: 1px solid #454545;
  padding: 14px 20px;
  font-size: 13px;
}

.leiste-fuss .wer    { color: #ded9d0; }
.leiste-fuss .rollen { color: #837d72; font-size: 11.5px; margin-bottom: 6px; }
.leiste-fuss a       { color: var(--gold); text-decoration: none; font-size: 12.5px; }
.leiste-fuss a:hover { text-decoration: underline; }

/* --- Rahmen und Kopfzeile fuer schmale Fenster --- */

.rahmen { margin-left: var(--leiste-breite); min-height: 100vh; }

.leiste-schalter, .leiste-schatten, .klein-kopf { display: none; }

@media (max-width: 900px) {
  .leiste {
    transform: translateX(-100%);
    transition: transform 0.18s ease;
    box-shadow: 0 0 30px rgba(0,0,0,0.3);
  }
  .leiste-schalter:checked ~ .leiste { transform: none; }
  .leiste-schalter:checked ~ .leiste-schatten {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 15;
  }
  .rahmen { margin-left: 0; }
  .klein-kopf {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--anthrazit);
    color: var(--gold);
    padding: 12px 16px;
    border-bottom: 3px solid var(--gold);
    font-weight: 600;
    letter-spacing: 0.04em;
  }
  .leiste-knopf { cursor: pointer; font-size: 20px; line-height: 1; }
}

/* --- Inhalt --- */

/* Der Inhalt nutzt die volle Breite des Bildschirms.
   Vorher standen hier 1240px. Auf Bennys 37-Zoll-Schirm blieb dadurch rechts
   ein breiter grauer Streifen ungenutzt, waehrend die Industrieliste mit ihren
   elf Spalten *innerhalb* ihres Rahmens waagerecht scrollen musste - Platz war
   da, er wurde nur nicht hergegeben (17.09.2026).

   Fliesstext bleibt trotzdem schmal: Eine Zeile ueber die ganze Breite eines
   Vier-K-Schirms liest niemand gern. Deshalb wird nur das begrenzt, was
   gelesen wird - Tabellen duerfen sich ausbreiten. */
main { max-width: none; padding: 20px 26px 48px; }

main > p,
main > .unterzeile,
main > .leiser-hinweis,
main > .hinweis,
.karte > p {
  max-width: 96ch;
}

h1 { font-size: 20px; margin: 0 0 3px; }
h2 { font-size: 15px; margin: 22px 0 8px; }
.unterzeile { color: var(--text-leise); font-size: 12.5px; margin: 0 0 16px; }

.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 13px 15px;
}

/* --- Kennzahlen --- */

.zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 9px;
  margin-bottom: 8px;
}

.zahl {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 10px 12px;
}

.zahl .wert { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.zahl .was { color: var(--text-leise); font-size: 11.5px; }
.zahl.achtung { border-left-color: var(--warnung); }
.zahl.achtung .wert { color: var(--warnung); }

/* --- Tabellen --- */

.tabellenrahmen { overflow-x: auto; }

table { border-collapse: collapse; width: 100%; background: var(--karte); }

th, td {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
}

th { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-leise); }
tbody tr:hover { background: #faf8f4; }
td.zahl-rechts { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Kleinteile --- */

.marke-chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  background: #efece5;
  color: var(--text-leise);
}

.marke-chip.bounce, .marke-chip.erloschen { background: #f7e2dd; color: var(--warnung); }
.marke-chip.aktiv { background: #e4efe5; color: var(--gut); }

.leer { color: var(--text-leise); padding: 22px; text-align: center; }

/* --- Formulare --- */

.formular { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }

input[type=text], input[type=email], input[type=password], input[type=date], select {
  padding: 7px 9px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  font-size: 13.5px;
  background: #fff;
  min-width: 0;
}

input:focus, select:focus { outline: 2px solid var(--gold); outline-offset: -1px; }

button {
  padding: 7px 15px;
  border: 0;
  border-radius: 8px;
  background: var(--anthrazit);
  color: var(--gold);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

button:hover { background: var(--anthrazit-hell); }

/* --- Anmeldung --- */

.anmelden-huelle {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--anthrazit);
}

.anmelden-karte {
  background: var(--karte);
  border-radius: 14px;
  padding: 32px;
  width: 100%;
  max-width: 380px;
  border-top: 4px solid var(--gold);
}

.anmelden-karte h1 { font-size: 20px; }
.anmelden-karte label { display: block; font-size: 13px; color: var(--text-leise); margin: 14px 0 5px; }
.anmelden-karte input { width: 100%; }
.anmelden-karte button { width: 100%; margin-top: 22px; }

.fehler {
  background: #f7e2dd;
  color: var(--warnung);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  margin-top: 16px;
}

@media (max-width: 620px) {
  .kopf .innen { gap: 12px; }
  .kopf .rechts { margin-left: 0; width: 100%; }
}

/* --- Aufgaben und Preispflege --- */

td.umbruch { white-space: normal; }

tr.erledigt td { color: var(--text-leise); text-decoration: line-through; }
tr.erledigt td .marke-chip { text-decoration: none; }
tr.ueberfaellig td:first-child + td { font-weight: 600; }

button.haken, button.leise {
  background: none;
  border: 0;
  padding: 0;
  font-size: 17px;
  line-height: 1;
  color: var(--text);
  cursor: pointer;
}

button.leise { color: var(--linie); font-size: 14px; }
button.leise:hover { color: var(--warnung); }
button.haken:hover { color: var(--gold-dunkel); }

/* Formulare in Tabellenzellen sollen keine Zeilenhoehe erzeugen */
td form { display: inline; margin: 0; }

input.zahl-feld {
  width: 92px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding: 5px 8px;
}

input.zahl-feld.schmal { width: 58px; }

.hinweis {
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 14px;
}

.hinweis.gut { background: #e4efe5; color: var(--gut); }

.karte.formular { align-items: center; }

/* --- Leiste einklappen ----------------------------------------------------
   Eingeklappt bleiben nur die Zeichen stehen. Das gibt breiten Tabellen -
   Teilnahmelisten, Rechnungspositionen - spuerbar mehr Platz. Der Zustand
   steht im localStorage und wird vor dem ersten Zeichnen gesetzt. */

:root { --leiste-schmal: 58px; }

.leiste-kopf {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #454545;
}

.leiste-kopf .marke { flex: 1; border: 0; }

button.klapp {
  background: none;
  border: 0;
  color: #837d72;
  font-size: 18px;
  line-height: 1;
  padding: 0 16px 0 6px;
  cursor: pointer;
}

button.klapp:hover { color: var(--gold); }

html.leiste-schmal .rahmen { margin-left: var(--leiste-schmal); }
html.leiste-schmal .leiste { width: var(--leiste-schmal); }

html.leiste-schmal .marke-text,
html.leiste-schmal .leiste .text,
html.leiste-schmal .leiste-fuss .wer,
html.leiste-schmal .leiste-fuss .rollen,
html.leiste-schmal .leiste .gruppe { display: none; }

html.leiste-schmal .leiste .geplant::after { content: none; }

html.leiste-schmal .leiste a,
html.leiste-schmal .leiste .geplant { justify-content: center; padding: 9px 0; }

html.leiste-schmal .leiste .zeichen { width: auto; font-size: 14px; }

html.leiste-schmal .marke { justify-content: center; padding: 18px 0 16px; }
html.leiste-schmal .leiste-kopf { flex-direction: column; gap: 2px; padding-bottom: 8px; }
html.leiste-schmal button.klapp { padding: 0 0 4px; transform: rotate(180deg); }

/* Gruppen trennt im schmalen Zustand ein Strich statt einer Ueberschrift */
html.leiste-schmal .leiste .gruppe + ul { border-top: 1px solid #454545; padding-top: 6px; margin-top: 6px; }

html.leiste-schmal .leiste-fuss { padding: 12px 0; text-align: center; }
.leiste-fuss .kurz { display: none; }
html.leiste-schmal .leiste-fuss .kurz { display: inline; font-size: 16px; }

/* Die eigene Obergrenze fuer den schmalen Zustand ist weg - main hat keine
   mehr, der gewonnene Platz kommt also ohnehin dem Inhalt zugute. */

@media (max-width: 900px) {
  button.klapp { display: none; }
  html.leiste-schmal .leiste { width: var(--leiste-breite); }
  html.leiste-schmal .rahmen { margin-left: 0; }
  html.leiste-schmal .marke-text,
  html.leiste-schmal .leiste .text,
  html.leiste-schmal .leiste .gruppe,
  html.leiste-schmal .leiste-fuss .wer,
  html.leiste-schmal .leiste-fuss .rollen { display: revert; }
}

/* --- Akquise --------------------------------------------------------------
   Die Reihenfolge macht die Arbeit: zugesagt oben, Abgesagte unten. Farbe ist
   nur Beiwerk - wer sie nicht unterscheiden kann, liest die Reihenfolge. */

a.zahl { text-decoration: none; color: inherit; display: block; }
a.zahl:hover { border-color: var(--gold-dunkel); }
.zahl.gewaehlt { outline: 2px solid var(--gold); outline-offset: -1px; }

.zahl.stand-zugesagt      { border-left-color: var(--gut); }
.zahl.stand-wackelt       { border-left-color: #c8922f; }
.zahl.stand-angeschrieben { border-left-color: var(--gold); }
.zahl.stand-offen         { border-left-color: var(--linie); }
.zahl.stand-abgesagt      { border-left-color: var(--warnung); }

table.akquise tr.stand-zugesagt td:nth-child(2) { font-weight: 600; }
table.akquise tr.stand-abgesagt td { color: var(--text-leise); }

select.stand-wahl {
  font-size: 13px;
  padding: 4px 6px;
  border-radius: 6px;
  max-width: 150px;
}

tr.stand-zugesagt select.stand-wahl { border-color: var(--gut); color: var(--gut); }
tr.stand-abgesagt select.stand-wahl { border-color: var(--linie); }

.fehlt {
  display: inline-block;
  font-size: 11.5px;
  color: var(--warnung);
  background: #f7e2dd;
  border-radius: 999px;
  padding: 1px 7px;
  margin-right: 5px;
}

.leise-text { color: var(--text-leise); font-size: 13px; }

.werkzeugleiste {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.knopf-leise {
  display: inline-block;
  padding: 7px 13px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: var(--karte);
  text-decoration: none;
  font-size: 14px;
}

.knopf-leise:hover { border-color: var(--gold-dunkel); }
.leiser-hinweis { color: var(--text-leise); font-size: 12.5px; }
.leiser-link { align-self: center; font-size: 13px; color: var(--text-leise); }

/* --- Rückmeldeseiten ------------------------------------------------------
   Das sieht ein Händler auf dem Handy, nicht das Team am Schreibtisch.
   Große Knöpfe, nichts zu lesen, ein Klick und fertig. */

body.gast { background: var(--anthrazit); }

.gast-huelle {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 28px 20px 48px;
}

/* 430 Pixel waren für die kurze Rückmeldeseite gedacht - eine Frage, ein Knopf.
   Das Anmeldeformular hat fünf Personenblöcke und wirkte dadurch auf dem Laptop
   wie ein Handy mit Rand (Benny, 10.10.2026). Deshalb richtet sich die Breite
   jetzt nach dem Inhalt: Seiten mit `gast-breit` bekommen Platz, alle anderen
   bleiben schmal. */
.gast-karte {
  background: var(--karte);
  border-radius: 16px;
  border-top: 5px solid var(--gold);
  padding: 30px 26px 24px;
  width: 100%;
  max-width: 430px;
}

.gast-karte.gast-breit {
  max-width: 920px;
  padding: 34px 38px 30px;
}

/* Formularzeilen dürfen nebeneinander stehen, sobald Platz da ist. */
@media (min-width: 760px) {
  .gast-breit .gast-block { padding: 22px 24px; }
  .gast-breit .gast-zwei {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
  }
}

.gast-marke {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--gold-dunkel);
  font-weight: 700;
  margin-bottom: 18px;
}

.gast-karte h1 { font-size: 21px; margin: 0 0 4px; }
.gast-zeile { color: var(--text-leise); font-size: 14px; margin: 0 0 20px; }
.gast-frage { font-size: 15.5px; line-height: 1.6; margin: 0 0 20px; }

.gast-knopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-bottom: 9px;
  padding: 14px 16px;
  background: var(--karte);
  border: 1.5px solid var(--linie);
  border-radius: 11px;
  color: var(--text);
  font-size: 15.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.gast-knopf:hover { border-color: var(--gold); background: #fdfbf7; }
.gast-knopf[aria-current] { border-color: var(--gold); background: #fdf7ec; }
.gast-knopf-wert { color: var(--text-leise); font-size: 13px; font-variant-numeric: tabular-nums; }

/* Von sicher nach nein: die Farbe folgt der Antwort, führt sie aber nicht. */
.gast-knopf.w100 { border-left: 5px solid var(--gut); }
.gast-knopf.w75  { border-left: 5px solid #7ba05b; }
.gast-knopf.w50  { border-left: 5px solid #c8922f; }
.gast-knopf.w25  { border-left: 5px solid #c2763a; }
.gast-knopf.w0   { border-left: 5px solid var(--warnung); }

.gast-gruende { margin-bottom: 16px; }

.gast-grund {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--linie);
  border-radius: 9px;
  margin-bottom: 7px;
  cursor: pointer;
  font-size: 14.5px;
}

.gast-grund:hover { border-color: var(--gold); }
.gast-grund input { margin-top: 2px; }
.gast-abmelden { background: #faf8f4; margin-top: 14px; }

.gast-feld { display: block; font-size: 13.5px; color: var(--text-leise); margin-bottom: 6px; }

.gast-feld textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--linie);
  border-radius: 9px;
  font: inherit;
  font-size: 15px;
  resize: vertical;
}

.gast-senden { width: 100%; margin-top: 16px; padding: 13px; font-size: 16px; }

.gast-fuss {
  color: var(--text-leise);
  font-size: 12.5px;
  line-height: 1.55;
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--linie);
}

/* --- Jahrgangs-Umschalter --- */

.jahrgang { padding: 9px 14px 4px 18px; }

.jahrgang select {
  width: 100%;
  background: var(--anthrazit-hell);
  color: var(--gold);
  border: 1px solid #4d4a44;
  font-size: 12px;
  padding: 5px 8px;
}

html.leiste-schmal .jahrgang { display: none; }

/* --- Umbruchpunkte wie bei eventbase: 900 und 560 -------------------------
   Bei 900 verschwindet die Leiste hinter dem Menüknopf. Bei 560 - Handy -
   werden aus Tabellenzeilen Karten: eine Tabelle mit acht Spalten ist auf
   einem Telefon nicht lesbar, egal wie man scrollt. */

@media (max-width: 560px) {
  main { padding: 14px 14px 40px; }
  h1 { font-size: 18px; }

  .zahlen { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 7px; }
  .zahl { padding: 8px 10px; }
  .zahl .wert { font-size: 18px; }

  .formular { gap: 6px; }
  .formular input, .formular select, .formular button { width: 100%; }

  /* Tabellen werden zu Karten. Die Spaltenüberschrift steht dann vor dem Wert -
     dafür trägt jede Zelle sie in data-spalte. */
  table.karten thead { display: none; }
  table.karten, table.karten tbody, table.karten tr, table.karten td { display: block; width: 100%; }

  table.karten tr {
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    margin-bottom: 8px;
    padding: 4px 0;
    background: var(--karte);
  }

  table.karten td {
    border: 0;
    padding: 4px 12px;
    white-space: normal;
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

  table.karten td::before {
    content: attr(data-spalte);
    color: var(--text-leise);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex: none;
    padding-top: 2px;
  }

  table.karten td:empty { display: none; }
  table.karten td.zahl-rechts { text-align: right; }
}

/* --- Aufklappbare Menuegruppen -------------------------------------------
   Benny: "damit es nicht zu voll gehauen ist". Die Gruppe mit der aktiven
   Seite bleibt offen, der Rest klappt zu. Der Zustand haelt im localStorage. */

.leiste details { border: 0; }

.leiste details > summary {
  padding: 13px 18px 5px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #837d72;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.leiste details > summary::-webkit-details-marker { display: none; }
.leiste details > summary::after { content: "▾"; font-size: 9px; opacity: 0.6; }
.leiste details[open] > summary::after { content: "▴"; }
.leiste details > summary:hover { color: var(--gold); }

html.leiste-schmal .leiste details > summary { display: none; }
html.leiste-schmal .leiste details > ul {
  border-top: 1px solid #454545; padding-top: 5px; margin-top: 5px;
}

.gast-block {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 13px 14px;
  margin-bottom: 12px;
}

.gast-block-titel {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-leise);
  margin-bottom: 8px;
}

/* Alle Felder, nicht nur Zahlenfelder: Sonst laufen Text- und Mailfelder aus
   der Karte heraus - auf dem Handy sofort sichtbar. */
.gast-block .gast-feld input,
.gast-block .gast-feld select,
.gast-block .gast-feld textarea,
.gast-feld input,
.gast-feld select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 5px;
  padding: 9px 11px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  font: inherit;
  font-size: 15px;
}

/* Nebeneinanderstehende Felder dürfen nicht über ihren Anteil hinauswachsen */
.gast-block > div[style*="flex"] > .gast-feld { min-width: 0; }

.gast-block .gast-grund { margin-bottom: 6px; }

/* --- Stufe ---------------------------------------------------------------
   Sichtbar, aber nicht laut. Sie ist der Grund, die eigene Teilnahmezahl
   einzutragen - nicht der Zweck der Seite. */

.stufe {
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--linie);
  border-left: 4px solid var(--stufe-farbe);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 16px;
  background: #fdfbf7;
}

.stufe-zeichen { font-size: 26px; line-height: 1; color: var(--stufe-farbe); }
.stufe-name { font-weight: 700; font-size: 15px; }
.stufe-zeile { color: var(--text-leise); font-size: 12.5px; margin-top: 2px; }

/* --- Aufgaben mit Meilensteinen --- */

tr.meilenstein td { background: #fafaf8; }
tr.meilenstein td:nth-child(2) { font-weight: 600; }
.einzug { color: var(--text-leise); margin-right: 5px; }

.prio { display: inline-block; font-weight: 700; margin-right: 5px; }
.prio-1 { color: var(--warnung); }
select.prio-1 { border-color: var(--warnung); color: var(--warnung); }
select.prio-3 { color: var(--text-leise); }

/* --- Summenblock auf der Rechnung --- */

.summenblock {
  margin: 14px 0 0 auto;
  max-width: 320px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--karte);
  padding: 10px 14px;
}

.summenblock > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 3px 0;
  font-variant-numeric: tabular-nums;
}

.summenblock > div span:first-child { color: var(--text-leise); }
.summenblock > div.dick { font-weight: 700; border-top: 1px solid var(--linie); margin-top: 4px; padding-top: 6px; }
.summenblock > div.offen span { color: var(--warnung); font-weight: 600; }

button.warnknopf { background: var(--warnung); color: #fff; }
button.warnknopf:hover { background: #963722; }

/* --- Aussteller-Checkliste --- */

.aussteller-karte { margin-bottom: 9px; }

.aussteller-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}

.checkliste {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  align-items: center;
  border-top: 1px solid var(--linie);
  padding-top: 9px;
}

.checkliste label { font-size: 12.5px; color: var(--text-leise); display: flex; align-items: center; gap: 5px; }
.mini-wahl { white-space: nowrap; }

/* --- Balken in der Auswertung --- */

.balken { height: 9px; border-radius: 999px; background: var(--gold); min-width: 2px; }

.optionsliste { margin: 6px 0 0; padding-left: 18px; color: var(--text-leise); font-size: 12.5px; }

tr.ungelesen td:nth-child(4) { font-weight: 600; }

.hinweis { background: #f6f3ec; color: var(--text); }
.hinweis.warn { background: #f7e2dd; color: var(--warnung); }

/* --- Assistentin --- */

.lage { border-left: 3px solid var(--gold); }
.lage p { margin: 0; line-height: 1.6; font-size: 14px; }
.lage-kopf { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
             color: var(--text-leise); margin-bottom: 7px; }
.lage .leiser-hinweis { margin-top: 9px; }

.hinweis-karte { margin-bottom: 8px; border-left: 3px solid var(--linie); }
.hinweis-karte.dringend-1 { border-left-color: var(--warnung); }
.hinweis-karte.dringend-2 { border-left-color: var(--gold); }

.hinweis-kopf { display: flex; justify-content: space-between; align-items: center;
                gap: 12px; flex-wrap: wrap; }
.hinweis-knoepfe { display: flex; gap: 7px; align-items: center; }
.hinweis-knoepfe form { display: inline; }
.hinweis-text { margin: 6px 0 0; color: var(--text-leise); font-size: 13px; }

button.knopf-leise-echt {
  background: var(--karte); color: var(--text); border: 1px solid var(--linie);
  font-weight: 500;
}
button.knopf-leise-echt:hover { border-color: var(--gold-dunkel); background: var(--karte); }
button.leise { font-size: 12.5px; }

.dashboard-hinweis {
  padding: 5px 0 5px 10px;
  border-left: 3px solid var(--linie);
  margin-bottom: 4px;
  font-size: 13.5px;
}
.dashboard-hinweis.dringend-1 { border-left-color: var(--warnung); }
.dashboard-hinweis.dringend-2 { border-left-color: var(--gold); }
.dashboard-hinweis a { text-decoration: none; font-weight: 500; }
.dashboard-hinweis a:hover { text-decoration: underline; }
.dashboard-hinweis .leise-text { display: block; }

/* --- Freigaben und Wünsche --- */

.freigabe-karte { margin-bottom: 9px; border-left: 3px solid var(--gold); }
.freigabe-zeilen { margin: 9px 0 0; font-size: 13px; }
.freigabe-zeilen > div { padding: 2px 0; }
.freigabe-zeilen span:first-child {
  display: inline-block; width: 110px; color: var(--text-leise); font-size: 12px;
}
.freigabe-knoepfe {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  border-top: 1px solid var(--linie); margin-top: 10px; padding-top: 10px;
}

.wunsch-karte { margin-bottom: 7px; border-left: 3px solid var(--linie); }
.wunsch-zeichen { font-size: 15px; margin-right: 5px; color: var(--gold-dunkel); }

/* ---------------------------------------------------------------------------
   Gesprächsverlauf
   Benny wollte es „wie einen WhatsApp-Verlauf": eingehend links, ausgehend
   rechts, je Nachricht nur die Kernaussage – die ganze Mail einen Klick
   dahinter. Darüber Reiter je Saison zum Zurückblättern.
   --------------------------------------------------------------------------- */

.reiter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 18px;
  border-bottom: 1px solid var(--linie);
  padding-bottom: 8px;
}
.reiter-blatt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--karte);
  color: var(--text);
  font-size: 12px;
  text-decoration: none;
}
.reiter-blatt:hover { border-color: var(--gold-dunkel); }
.reiter-blatt.gewaehlt {
  background: var(--anthrazit);
  border-color: var(--anthrazit);
  color: #fff;
}
.reiter-zahl {
  font-size: 11px;
  opacity: .7;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(0,0,0,.08);
}
.reiter-blatt.gewaehlt .reiter-zahl { background: rgba(255,255,255,.18); }

.verlauf { max-width: 760px; }

/* Der Tagestrenner. Ohne ihn verliert man in einem langen Verlauf das Datum. */
.verlauf-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 10px;
  color: var(--text-leise);
  font-size: 11px;
}
.verlauf-tag::before,
.verlauf-tag::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linie);
}

.blase {
  max-width: 78%;
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px solid var(--linie);
  border-radius: 10px;
  background: var(--karte);
}
.blase.von-ihnen { margin-right: auto; border-bottom-left-radius: 3px; }
.blase.von-uns {
  margin-left: auto;
  border-bottom-right-radius: 3px;
  background: #f0ede6;
}
/* Ungelesenes bekommt eine Kante, keine Farbe – Farbe ist im Verlauf schon
   für die Richtung vergeben. */
.blase.ungelesen { border-left: 3px solid var(--gold-dunkel); }

.blase-kopf {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: var(--text-leise);
}
.blase-wer { font-weight: 600; color: var(--text); }
.blase-betreff { font-size: 12px; font-weight: 600; margin: 3px 0 2px; }
.blase-text { font-size: 12px; line-height: 1.5; }
.blase-fuss {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
  font-size: 11px;
}

.mailtext {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 560px) {
  .blase { max-width: 92%; }
}

/* Orga-Team. Eine eigene Farbe, weil es weder Stand noch Warnung ist, sondern
   eine Eigenschaft der Person: „mit der planen wir zusammen". */
.marke-chip.orga {
  background: var(--anthrazit);
  color: #fff;
  border-color: var(--anthrazit);
}
.marke-chip.orga-alt {
  background: transparent;
  color: var(--text-leise);
  border: 1px dashed var(--linie);
}

/* Dubletten-Entscheidung. Jede Gruppe ist eine eigene Karte mit eigenem
   Formular – so entscheidet man eine nach der anderen und verliert nichts,
   wenn man mittendrin aufhört. */
.dublette { margin-bottom: 18px; }
.dublette-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.dublette-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}
.dublette-fuss input[type=text] { flex: 1; min-width: 200px; }

/* ---------------------------------------------------------------------------
   Umfrage. Sie wird auf dem Telefon ausgefüllt, oft zwischen zwei Terminen –
   große Klickflächen, wenig Text, keine Scrollerei nach rechts.
   --------------------------------------------------------------------------- */
.frage { margin-bottom: 12px; }
.frage-text { font-weight: 600; font-size: 13px; margin-bottom: 3px; }
.frage-hinweis { font-size: 11px; color: var(--text-leise); margin-bottom: 8px; line-height: 1.5; }
.pflicht { color: var(--gold-dunkel); }

/* Das ganze Label ist anklickbar, nicht nur das Kästchen – auf dem Telefon
   trifft man sonst daneben. */
.wahl {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 8px;
  border: 1px solid var(--linie);
  border-radius: 6px;
  margin-bottom: 5px;
  font-size: 13px;
  cursor: pointer;
}
.wahl:hover { border-color: var(--gold-dunkel); }
.wahl input { margin-top: 2px; flex: 0 0 auto; }

.skala { display: flex; align-items: center; gap: 12px; }
.skala input[type=range] { flex: 1; }
.skala-wert {
  min-width: 56px;
  text-align: right;
  font-weight: 600;
  font-size: 15px;
}
.skala-enden {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-leise);
  margin-top: 2px;
}
.frage textarea { width: 100%; box-sizing: border-box; font-size: 13px; }

/* Auswertung. Balken statt Zahlenkolonne – man sieht in einer Sekunde, was
   oben steht, ohne zu vergleichen. */
.balkenzeile {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 2fr 36px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  margin-bottom: 5px;
}
.balken-text { color: var(--text); }
.balken {
  display: block;
  height: 14px;
  background: var(--grund);
  border-radius: 3px;
  overflow: hidden;
}
.balken-fuell { display: block; height: 100%; background: var(--gold-dunkel); }
.balken-zahl { text-align: right; font-weight: 600; }

.freitext {
  border-left: 3px solid var(--linie);
  padding: 4px 0 4px 10px;
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 1.55;
}
.freitext-wer { font-weight: 600; font-size: 11px; color: var(--text-leise); }

@media (max-width: 560px) {
  .balkenzeile { grid-template-columns: 1fr 34px; }
  .balkenzeile .balken { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------------
   Postfach. Briefe als Karten statt Tabellenzeilen: In einer Zeile steht der
   Betreff, aber nicht, worum es geht - und genau das will man beim Durchsehen
   wissen, ohne jede Mail einzeln zu öffnen.
   --------------------------------------------------------------------------- */
.postfach { max-width: 860px; }
.brief {
  border: 1px solid var(--linie);
  border-left: 3px solid var(--linie);
  border-radius: var(--radius);
  background: var(--karte);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.brief.ungelesen { border-left-color: var(--gold-dunkel); }
.brief.erledigt { opacity: .58; }
.brief-kopf {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: var(--text-leise);
}
.brief-wer { font-weight: 600; color: var(--text); }
.pfeil { color: var(--text-leise); }
.brief-betreff { font-size: 13px; font-weight: 600; margin: 3px 0 2px; }
.brief-betreff a { color: var(--text); text-decoration: none; }
.brief-betreff a:hover { color: var(--gold-dunkel); }
.brief-text { font-size: 12px; color: var(--text-leise); line-height: 1.5; }
.brief-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-top: 8px;
  font-size: 11px;
}
.brief-knoepfe { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.inline-form { display: inline; }
.wahl-klein { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }

@media (max-width: 560px) {
  .brief-knoepfe { margin-left: 0; width: 100%; margin-top: 6px; }
}

/* Der neue Stand „nicht erreicht". Eigene Farbe, weil er etwas anderes bedeutet
   als „angeschrieben": Dort wartet man, hier muss man nochmal ran. */
.stand-nicht_erreicht { border-left-color: #8a6f3f; }
.zahl.stand-nicht_erreicht .wert { color: #8a6f3f; }
.marke-chip.nicht_erreicht { background: #f3ece0; border-color: #d9c9a8; }

/* Abschnittstrenner in der Arbeitsliste. Er sagt nicht nur, wo man ist,
   sondern auch, wo man aufhören darf. */
tr.abschnitt td {
  background: var(--grund);
  font-weight: 600;
  font-size: 12px;
  padding: 9px 10px 7px;
  border-top: 2px solid var(--gold-dunkel);
  color: var(--text);
}
tr.abschnitt td .leise-text { float: right; font-weight: 400; }

/* Ansprechpartner-Pflege in der Kundenakte
   Eine Zeile je Person, direkt beschreibbar. Die Felder sind schmal und
   randlos, damit die Tabelle noch wie eine Tabelle aussieht und nicht wie
   ein Formular mit acht Kästen nebeneinander. */
.kontaktpflege input[type="text"],
.kontaktpflege input[type="email"],
.kontaktpflege input:not([type]) {
  border: 1px solid transparent;
  background: transparent;
  padding: 3px 4px;
  border-radius: 4px;
  font: inherit;
  max-width: 100%;
}
.kontaktpflege input:not([type="checkbox"]):hover { border-color: var(--rand, #d8d8d8); }
.kontaktpflege input:not([type="checkbox"]):focus {
  border-color: var(--akzent, #b8860b);
  background: #fff;
  outline: none;
}
.kontaktpflege td { vertical-align: top; }
.kontaktpflege .wahl-klein { display: inline-block; margin: 0 8px 2px 0; white-space: nowrap; }
.kontaktpflege .zeilenformular { display: none; }   /* nur Träger der id */
.kontaktpflege tr.ausgeschieden { opacity: .55; }
.kontaktpflege tr.neue-zeile { background: var(--flaeche-leise, #faf8f4); }
.nowrap { white-space: nowrap; }

/* Verdachtsfall statt Beleg: gedämpft und mit Fragezeichen-Rand, damit man
   beim Durchgehen sieht, dass hier nachgesehen werden muss. */
.karte.dublette.verdacht { border-left: 3px solid var(--warnung, #c8a24a); }
.abschnitt-titel { margin-top: 32px; }

/* Anruf festhalten - das Formular in der Listenzeile
   Aufgeklappt wird nur eine Zeile, der Rest der Liste bleibt schmal. */
details.anruf { margin-top: 4px; }
details.anruf > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--akzent, #8a6d1f);
  list-style: none;
  user-select: none;
}
details.anruf > summary::-webkit-details-marker { display: none; }
details.anruf > summary:hover { text-decoration: underline; }
details.anruf[open] > summary { font-weight: 600; }
.anruf-formular {
  display: grid;
  gap: 6px;
  margin: 6px 0 2px;
  padding: 8px;
  border: 1px solid var(--rand, #e0dcd4);
  border-radius: 6px;
  background: var(--flaeche-leise, #faf8f4);
  min-width: 240px;
}
.anruf-formular label { display: block; font-size: 12px; color: var(--leise, #6b6b6b); }
.anruf-formular textarea,
.anruf-formular input,
.anruf-formular select {
  display: block; width: 100%; margin-top: 2px; font: inherit;
  padding: 4px 6px; border: 1px solid var(--rand, #d8d8d8); border-radius: 4px;
}
.anruf-formular input[type="number"] { width: 5.5em; display: inline-block; }
.anruf-formular button { justify-self: start; }
.notizverlauf {
  white-space: pre-wrap; font: inherit; font-size: 12px;
  margin: 4px 0 0; color: var(--leise, #6b6b6b);
}

/* Auf breiten Schirmen bekommt die Rueckmeldungsspalte Platz.
   Dort stehen seit dem 17.09.2026 die Anrufnotizen - in 132 Pixeln liest die
   niemand. Erst ab 1400px, damit schmale Schirme nicht ins Scrollen kommen. */
@media (min-width: 1400px) {
  td[data-spalte="Rückmeldung"] { min-width: 280px; }
  td[data-spalte="Anschrift"]   { min-width: 200px; }
}