/* Zweites Gehirn — Dashboard
   Raster und Kachelsprache nach Toms Vorlage, Farben nach RU21-Branding:
   Mystical Transformation als Grundflaeche, Rose Dust als Akzent, Nurturing Forrest fuer Zustaende. */

@font-face { font-family: "Ninna";  src: local("Ninna"),  url("/web/schriften/ninna.otf")  format("opentype"); font-display: swap; }
@font-face { font-family: "Optima"; src: local("Optima"), url("/web/schriften/optima.ttf") format("truetype"); font-display: swap; }

:root {
  --tinte:        #051310;
  --tinte-tief:   #030d0b;
  --flaeche:      #0a231e;
  --flaeche-hoch: #0d2b25;
  --rand:         rgba(215, 141, 103, .14);
  --rand-stark:   rgba(215, 141, 103, .34);
  --rose:         #d78d67;
  --rose-hell:    #edb691;
  --wald:         #2e5043;
  --wald-hell:    #6aa98a;
  --text:         #f3ece6;
  --gedaempft:    #8ea59c;
  --leise:        #63796f;
  --serif:  "Ninna", "Optima", Palatino, "Palatino Linotype", Georgia, serif;
  --sans:   "Optima", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 18px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(1100px 600px at 12% -8%, rgba(215,141,103,.09), transparent 60%),
    radial-gradient(900px 500px at 92% 4%, rgba(46,80,67,.22), transparent 62%),
    var(--tinte);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.huelle { max-width: 1460px; margin: 0 auto; padding: 30px 28px 60px; }
.serif  { font-family: var(--serif); font-weight: 600; letter-spacing: .01em; }

/* ---------------------------------------------------------------- Kopf */

.kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.marke { display: flex; align-items: center; gap: 15px; }

.signet {
  min-width: 62px; height: 46px; padding: 0 13px; border-radius: 13px; display: grid; place-items: center;
  font-family: var(--serif); font-size: 17px; letter-spacing: .05em; color: #2a1409;
  background: linear-gradient(150deg, var(--rose-hell), var(--rose));
  box-shadow: 0 8px 22px rgba(215,141,103,.26);
}

.kopf h1 { font-family: var(--serif); font-size: 26px; letter-spacing: .085em; margin: 0; line-height: 1.15; }
.pfad { margin: 3px 0 0; font-size: 12px; color: var(--leise); letter-spacing: .02em; }

.kopf-rechts { display: flex; align-items: center; gap: 14px; }
.gruss { text-align: right; }
.gruss-zeile { font-family: var(--serif); font-size: 19px; margin: 0; }
.datum { margin: 2px 0 0; font-size: 12.5px; color: var(--gedaempft); }

.kreis {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.04); border: 1px solid var(--rand); color: var(--gedaempft);
  cursor: pointer; transition: .18s;
}
.kreis:hover { color: var(--rose-hell); border-color: var(--rand-stark); transform: rotate(-25deg); }
.kreis.dreht svg { animation: dreh .9s linear infinite; }
@keyframes dreh { to { transform: rotate(360deg); } }


/* ---------------------------------------------------------------- Karten */

.karte {
  background: linear-gradient(180deg, var(--flaeche-hoch), var(--flaeche));
  border: 1px solid var(--rand); border-radius: var(--radius); padding: 20px 22px;
}

.marke-zeile {
  display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
  font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--gedaempft);
}
.marke-zeile svg { color: var(--rose); flex: none; }

.kennzahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 18px; }

/* Abschnittsüberschrift zwischen den Zeilen */
.abschnitt {
  display: flex; align-items: center; gap: 14px; margin: 30px 0 15px;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--rose);
}
.abschnitt::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--rand), transparent); }

/* Priorität #1 — der Hebel des Tages, volle Breite */
.prio {
  display: flex; align-items: center; gap: 20px; margin-bottom: 18px;
  border-left: 3px solid var(--rose);
}
.prio-stern {
  flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(215,141,103,.14); color: var(--rose); border: 1px solid var(--rand);
}
.prio-text { flex: 1; min-width: 0; }
.prio-name { font-family: var(--serif); font-size: 25px; margin: 4px 0 3px; }
.prio-grund { margin: 0; font-size: 13px; color: var(--gedaempft); }
.prio-aktion {
  flex: none; font-size: 12.5px; color: var(--rose-hell); padding: 9px 16px;
  border: 1px solid var(--rand-stark); border-radius: 12px; background: rgba(215,141,103,.08);
}

/* Pace gegen das Wochenziel */
.pace-karte { display: flex; align-items: center; gap: 24px; margin-bottom: 4px; }
.pace-text { flex: none; min-width: 210px; }
.pace-balken { flex: 1; }
.pace-urteil { font-size: 12px; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.pace-urteil.gut  { background: rgba(46,80,67,.42); color: var(--wald-hell); border: 1px solid rgba(106,169,138,.3); }
.pace-urteil.mies { background: rgba(215,141,103,.13); color: var(--rose-hell); border: 1px solid var(--rand); }
.ziel-marke { position: relative; }
.ziel-marke::after {
  content: ""; position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--wald-hell); opacity: .75;
}

/* Quoten — sechs kompakte Kacheln */
.quoten { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }

/* Klick auf eine Kachel zeigt die Belege: welche Leads hinter der Zahl stehen.
   Gilt fuer die Quoten und die vier Kennzahlen. */
.karte.klickbar { cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.karte.klickbar:hover { border-color: var(--rand-stark); transform: translateY(-2px); }

.quoten-detail { max-height: 56vh; overflow-y: auto; padding-right: 8px; }
.quoten-detail::-webkit-scrollbar { width: 5px; }
.quoten-detail::-webkit-scrollbar-thumb { background: var(--rand-stark); border-radius: 99px; }
.quoten-detail::-webkit-scrollbar-track { background: transparent; }
.detail-gruppe { margin-bottom: 16px; }
.detail-gruppe:last-child { margin-bottom: 4px; }
.detail-titel {
  margin: 0 0 6px; font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--rose-hell);
}
.detail-lead {
  margin: 0; padding: 6px 2px; font-size: 13.5px; font-family: var(--serif);
  border-bottom: 1px solid var(--rand);
}
.detail-gruppe .detail-lead:last-child { border-bottom: none; }
.quote { padding: 16px 15px; text-align: center; }
.quote .marke-zeile { justify-content: center; margin-bottom: 12px; font-size: 9.5px; letter-spacing: .12em; }
.quote-wert { font-family: var(--serif); font-size: 24px; line-height: 1.1; }
.quote-absolut { margin: 7px 0 0; font-size: 11.5px; color: var(--leise); }
.quote-formel { margin: 6px 0 0; font-size: 10.5px; color: #4f6259; line-height: 1.35; }

/* Trichter — waagerechte Stufen */
.stufen { display: grid; gap: 11px; margin-top: 4px; }
.stufe-zeile { display: grid; grid-template-columns: 116px 1fr 46px; align-items: center; gap: 12px; font-size: 12.5px; }
.stufe-name { color: var(--gedaempft); }
.stufe-zahl { text-align: right; font-family: var(--serif); font-size: 15px; }
.stufe-zeile.klickbar { cursor: pointer; border-radius: 8px; transition: background .15s ease; }
.stufe-zeile.klickbar:hover { background: rgba(215,141,103,.07); }
.stufe-zeile.klickbar:hover .stufe-name { color: var(--rose-hell); }
.stufe-balken { height: 20px; border-radius: 6px; background: rgba(255,255,255,.05); overflow: hidden; }
.stufe-balken > i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--rose), var(--rose-hell)); }

.zahl      { font-family: var(--serif); font-size: 38px; line-height: 1.05; letter-spacing: -.01em; }
.zahl.akzent { color: var(--rose); }
.zahl.klein  { font-size: 25px; }
.einheit   { font-family: var(--serif); font-size: 19px; color: var(--leise); }
.unterzeile { margin: 12px 0 0; font-size: 12.5px; color: var(--gedaempft); }
.kachel-inhalt { display: flex; align-items: center; gap: 18px; }

.balken { height: 6px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; margin-top: 14px; }
.balken > i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--rose), var(--rose-hell)); }
.balken-fuss { display: flex; justify-content: space-between; margin-top: 9px; font-size: 12px; color: var(--gedaempft); }

.ring { flex: none; }
.ring text { font-family: var(--sans); font-size: 13px; fill: var(--text); }

.delta { font-size: 12.5px; }
.delta.auf { color: var(--wald-hell); }
.delta.ab  { color: var(--rose-hell); }

/* Leerzustand, wenn noch keine Vertriebsdaten da sind */
.leer { color: var(--leise); }
.leer .zahl, .leer .quote-wert, .leer .prio-name { color: #2c4139; }
.leer-hinweis {
  margin-top: 12px; font-size: 12px; color: var(--leise);
  border-left: 2px solid var(--rand-stark); padding-left: 10px;
}

/* ---------------------------------------------------------------- Umsatz-Tracker
   Balkenstruktur nach Toms Vorlage vom 22.08.2026: ein Balken je Zeitraum, der
   Ist-Wert steht im Balken, das Ziel als Marke darueber, aufklappbar auf die
   Onboardings dahinter. Bewusst ohne Glocken und ohne Prognose-Zeile.
   Farben, Radien und Kachelsprache wie im uebrigen Dashboard. */

.umsatz { display: grid; gap: 16px; margin-bottom: 18px; }
.umsatz-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.umsatz-karte { padding: 20px 22px 18px; }
.umsatz-kopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-bottom: 15px;
}
.umsatz-titel { font-family: var(--serif); font-size: 21px; margin: 0; }
.umsatz-titel.klein { font-size: 17px; }
.umsatz-notiz { font-size: 11.5px; color: var(--leise); letter-spacing: .02em; }

/* Zielfeld — Klick macht daraus ein Eingabefeld */
.uziel {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--gedaempft);
  background: none; border: 1px solid transparent; border-radius: 9px; padding: 4px 9px;
  font-family: var(--sans); cursor: pointer; transition: .15s;
}
.uziel:hover { border-color: var(--rand-stark); color: var(--rose-hell); }
.uziel svg { opacity: .7; }
.uziel-feld {
  width: 130px; font-family: var(--sans); font-size: 12.5px; color: var(--text);
  background: var(--tinte-tief); border: 1px solid var(--rand-stark); border-radius: 9px; padding: 5px 9px;
}
.uziel-feld:focus { outline: none; border-color: var(--rose); }

/* Der Balken selbst */
.ubalken-zeile { display: flex; align-items: center; gap: 16px; }
.ubalken-huelle { flex: 1; min-width: 0; }
.ubalken {
  position: relative; height: 44px; border-radius: 11px; overflow: hidden;
  background: rgba(255,255,255,.055); border: 1px solid var(--rand);
}
.ubalken.schmal { height: 34px; border-radius: 9px; }
.ubalken > i {
  display: block; height: 100%; border-radius: 10px 0 0 10px;
  background: linear-gradient(90deg, var(--rose), var(--rose-hell));
  transition: width .5s cubic-bezier(.2,.7,.3,1);
}
.ubalken.voll > i { border-radius: 10px; background: linear-gradient(90deg, var(--wald), var(--wald-hell)); }
.ubalken-wert {
  position: absolute; top: 0; bottom: 0; display: flex; align-items: center;
  font-family: var(--serif); font-size: 17px; color: #2a1409; padding: 0 13px; white-space: nowrap;
}
.ubalken-wert.aussen { color: var(--text); }
.ubalken-ziel { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--wald-hell); opacity: .8; }
.ubalken-zielzahl {
  position: absolute; top: -20px; transform: translateX(-50%);
  font-size: 11px; color: var(--wald-hell); white-space: nowrap;
}
.ubalken-fuss { display: flex; justify-content: space-between; gap: 12px; margin-top: 9px; font-size: 12px; color: var(--gedaempft); }
.ubalken-marke { flex: none; font-size: 12.5px; color: var(--gedaempft); min-width: 74px; }

/* Der grosse All-time-Balken traegt dieselbe Struktur, nur kraeftiger. */
.umsatz-karte.gross .ubalken { height: 52px; }
.umsatz-karte.gross .ubalken-wert { font-size: 21px; }
.umsatz-karte.gross .umsatz-titel { font-size: 24px; }

.umsatz-leer { font-size: 12.5px; color: var(--leise); }

@media (max-width: 1000px) {
  .umsatz-paar { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- Diagramme */

.diagramme { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 30px; }
.diagramm-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.diagramm-kopf h3 { font-family: var(--serif); font-size: 19px; margin: 0; display: flex; align-items: center; gap: 9px; }
.diagramm-kopf h3 svg { color: var(--rose); }
.notiz { font-size: 12px; color: var(--gedaempft); }
.abzeichen {
  font-size: 11.5px; padding: 5px 11px; border-radius: 999px;
  background: rgba(215,141,103,.13); color: var(--rose-hell); border: 1px solid var(--rand);
}
.diagramm svg { width: 100%; height: auto; display: block; }
.diagramm-fuss { margin-top: 6px; text-align: center; font-size: 12px; color: var(--gedaempft); }
.legende { display: flex; gap: 16px; justify-content: center; margin-top: 8px; font-size: 12px; color: var(--gedaempft); }
.legende i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 6px; }

/* ---------------------------------------------------------------- Unterer Teil */

.unten { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; align-items: start; }

.katalog-kopf { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.katalog-kopf h2 { font-size: 22px; margin: 0; display: flex; align-items: center; gap: 10px; }
.katalog-kopf h2 svg { color: var(--rose); }
.zaehler { font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--gedaempft); letter-spacing: 0; }

.suche {
  display: flex; align-items: center; gap: 9px; padding: 9px 16px; min-width: 240px;
  background: rgba(255,255,255,.035); border: 1px solid var(--rand); border-radius: 999px; color: var(--leise);
}
.suche input { background: none; border: 0; outline: none; color: var(--text); font-family: var(--sans); font-size: 14px; width: 100%; }
.suche input::placeholder { color: var(--leise); }

.gruppe-titel {
  display: flex; align-items: center; gap: 10px; margin: 26px 0 14px;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--rose);
}
.gruppe-titel:first-child { margin-top: 0; }
.gruppe-titel b { color: var(--gedaempft); font-weight: 400; }
.gruppe-titel::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--rand), transparent); }

.skill-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Uebersicht, kein Knopf: seit 23.08.2026 wird aus dem Dashboard nichts gestartet. */
.skill {
  display: flex; gap: 14px; padding: 16px 18px; text-align: left; width: 100%;
  background: linear-gradient(180deg, var(--flaeche-hoch), var(--flaeche));
  border: 1px solid var(--rand); border-radius: 15px; color: inherit;
  font-family: var(--sans);
}
.skill-symbol {
  flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(215,141,103,.13); color: var(--rose); border: 1px solid var(--rand);
}
.skill-name { font-family: var(--serif); font-size: 15.5px; margin: 0 0 4px; }
.skill-text { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--gedaempft); }
.warnung { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 11px; color: #c98f6b; }

/* ---------------------------------------------------------------- Seitenspalte */

.seite { display: grid; gap: 18px; }
.seite h3 { font-family: var(--serif); font-size: 17px; margin: 0 0 14px; display: flex; align-items: center; gap: 9px; }
.seite h3 svg { color: var(--rose); }

.punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.punkte li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.punkt { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--wald-hell); box-shadow: 0 0 9px rgba(106,169,138,.6); }
.punkt.aus { background: #6b4a3a; box-shadow: none; }
.punkte small { margin-left: auto; color: var(--leise); font-size: 11.5px; }

.zeilen { display: grid; gap: 14px; }
.zeile-titel { font-size: 13.5px; font-weight: 600; margin: 0; }
.zeile-text { margin: 3px 0 0; font-size: 11.5px; color: var(--leise); word-break: break-word; }

.marker { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; margin-right: 9px; }
.marker.neu       { background: rgba(215,141,103,.16); color: var(--rose-hell); }
.marker.geaendert { background: rgba(255,255,255,.06); color: var(--gedaempft); }
.marker.offen     { background: rgba(46,80,67,.4);  color: var(--wald-hell); }

.projekt-zeile { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; }
.projekt-zeile span { margin-left: auto; font-size: 11.5px; color: var(--leise); white-space: nowrap; }

.fuss { margin-top: 34px; text-align: center; font-size: 11.5px; color: var(--leise); }

/* ---------------------------------------------------------------- Lauf-Fenster */

.fenster { position: fixed; inset: 0; background: rgba(3,10,9,.76); display: grid; place-items: center; padding: 26px; z-index: 20; }
.fenster[hidden] { display: none; }   /* sonst schlaegt display:grid das hidden-Attribut */
.fenster-karte {
  width: min(860px, 100%); max-height: 82vh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--flaeche-hoch), var(--tinte-tief));
  border: 1px solid var(--rand-stark); border-radius: var(--radius); padding: 22px 24px;
}
.fenster-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.fenster-kopf h3 { font-size: 19px; margin: 0; }
.fenster-status { margin: 0 0 14px; font-size: 12.5px; color: var(--gedaempft); }
.fenster pre {
  flex: 1; overflow: auto; margin: 0; padding: 16px; white-space: pre-wrap; word-break: break-word;
  background: rgba(0,0,0,.32); border: 1px solid var(--rand); border-radius: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; line-height: 1.6; color: #d6e2dc;
}

/* ---------------------------------------------------------------- Schmale Bildschirme */

@media (max-width: 1350px) {
  .quoten { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1150px) {
  .kennzahlen { grid-template-columns: 1fr 1fr; }
  .diagramme { grid-template-columns: 1fr 1fr; }
  .unten { grid-template-columns: 1fr; }
  .seite { grid-template-columns: 1fr 1fr; }
  .prio { flex-wrap: wrap; }
  .pace-karte { flex-wrap: wrap; gap: 14px; }
  .pace-balken { flex-basis: 100%; }
}
@media (max-width: 760px) {
  .huelle { padding: 20px 16px 44px; }
  .kennzahlen, .diagramme, .skill-raster, .seite { grid-template-columns: 1fr; }
  .quoten { grid-template-columns: 1fr 1fr; }
  .kopf { flex-direction: column; align-items: flex-start; }
  .katalog-kopf { flex-direction: column; align-items: stretch; }
  .stufe-zeile { grid-template-columns: 88px 1fr 40px; }
}

/* ---------------------------------------------------------------- To-dos
   Die Haupt-To-do-Liste aus 02 Projekte/TO-DO.md. Nummern und Reihenfolge
   sind die der Datei — hier wird nichts umsortiert (Toms Vorgabe 20.08.2026). */

.todo-kopfzeile { margin: 0 0 14px; color: var(--gedaempft); font-size: 12.5px; letter-spacing: .02em; }
.todo-kopfzeile b { color: var(--rose-hell); font-weight: 600; }

.todo-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }

.todo {
  display: grid; gap: 7px; text-align: left; cursor: pointer;
  background: var(--flaeche); border: 1px solid var(--rand); border-left: 3px solid var(--leise);
  border-radius: 14px; padding: 13px 15px; color: inherit; font: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.todo:hover { border-color: var(--rand-stark); transform: translateY(-2px); }

.todo-kopf { display: flex; align-items: baseline; gap: 9px; }
.todo-nr {
  flex: none; min-width: 21px; height: 21px; border-radius: 7px; display: grid; place-items: center;
  background: rgba(215,141,103,.12); color: var(--rose-hell);
  font-size: 11.5px; font-variant-numeric: tabular-nums; padding: 0 5px;
}
.todo-titel { font-family: var(--serif); font-size: 15px; line-height: 1.25; }
.todo-schritt {
  color: var(--gedaempft); font-size: 12.5px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Die Ampel ist die der Datei, nur als Farbe statt als Zeichen. */
.todo.ampel-rot     { border-left-color: #d9604f; }
.todo.ampel-orange  { border-left-color: #e0904a; }
.todo.ampel-gelb    { border-left-color: #ddc25a; }
.todo.ampel-gruen   { border-left-color: var(--wald-hell); }
.todo.ampel-fertig  { border-left-color: var(--wald); opacity: .55; }
.todo.ampel-wartet,
.todo.ampel-pause   { border-left-color: var(--leise); opacity: .7; }

/* ---------------------------------------------------------------- Termine der Woche
   Kopie des echten Kalenders, geliefert von der Routine ru21-kalender-woche. */

.kal { display: grid; gap: 3px; }
.kal-tag { padding: 8px 0; border-bottom: 1px solid rgba(215,141,103,.09); }
.kal-tag:last-child { border-bottom: none; }
.kal-tag.ist-heute .kal-datum { color: var(--rose-hell); }
.kal-datum {
  margin: 0 0 5px; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--leise);
}
.kal-termin { display: flex; gap: 9px; align-items: baseline; margin-bottom: 5px; font-size: 13px; }
.kal-termin:last-child { margin-bottom: 0; }
.kal-zeit {
  flex: none; color: var(--rose); font-variant-numeric: tabular-nums; font-size: 12px; min-width: 78px;
}
.kal-text { display: grid; line-height: 1.3; }
.kal-text small { color: var(--leise); font-size: 11.5px; }
.kal-frei { margin: 0; color: var(--leise); font-size: 12.5px; }

/* Drittes Licht: grau heisst "nicht geprueft" — nie gruen auf Verdacht. */
.punkt.grau { background: var(--leise); box-shadow: none; opacity: .6; }

@media (max-width: 900px) {
  .todo-raster { grid-template-columns: 1fr; }
}

/* Umsatzziel ohne Aenderungsrecht (24.08.2026): sichtbar, aber kein Knopf.
   Nur Toms Konto darf Ziele setzen -- die Sperre selbst sitzt im Server. */
.uziel.starr { cursor: default; opacity: .72; }
.kopf-rechts a.kreis { text-decoration: none; }
.kopf-rechts a.kreis:hover { transform: none; }

/* ------------------------------------------------- Aktuelle Kampagne */
/* Eine breite Zeile zwischen Quoten und Verlauf (Toms Aufbau, 24.08.2026):
   welches Cluster gerade bearbeitet wird, wie weit es ist, und der Weg zur Karte.
   Proportionen wie die grosse Umsatz-Kachel. */

.kampagne-karte { padding: 22px 24px 20px; }

.kampagne-kopf {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 22px;
  margin-bottom: 20px;
}
.kampagne-titel {
  font-family: var(--serif); font-size: 23px; margin: 0; font-weight: 600;
  display: flex; align-items: baseline; gap: 12px;
}
.kampagne-kennung {
  font-size: 15px; color: var(--rose); letter-spacing: .09em;
  border: 1px solid var(--rand); border-radius: 999px; padding: 3px 11px;
}
.kampagne-notiz { margin: 6px 0 0; font-size: 12px; color: var(--leise); letter-spacing: .02em; }
.kampagne-notiz b { color: var(--rose-hell); font-weight: 400; }

.kampagne-knopf {
  flex: none; display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  background: linear-gradient(150deg, var(--rose-hell), var(--rose)); color: #2a1409;
  font-family: var(--sans); font-size: 13px; letter-spacing: .02em; font-weight: 600;
  padding: 11px 19px; border-radius: 999px;
  box-shadow: 0 8px 22px rgba(215,141,103,.24);
  transition: transform .15s ease, box-shadow .15s ease;
}
.kampagne-knopf:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(215,141,103,.34); }

.kampagne-zahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.kampagne-zahlen .unterzeile { margin-top: 5px; font-size: 11.5px; }
.kampagne-balken { margin-top: 18px; }

@media (max-width: 860px) {
  .kampagne-kopf { flex-direction: column; }
  .kampagne-zahlen { grid-template-columns: repeat(2, 1fr); }
}