/* =====================================================================
   manager-ziele.css — die vier festen Monatsaufgaben (02.10.2026)
   =====================================================================

   DREI REGELN, DIE HIER ÜBERALL GELTEN:

   1. KEINE EIGENEN AMPELFARBEN. Das Haus hat sie schon -- `--k-gut`,
      `--k-mittel`, `--k-warn`, `--k-neutral` in gate.css. Sie sind
      gegen den dunklen Grund gemessen und augenschonend gewählt. Ein
      eigenes Grasgrün hier wäre eine fünfte Wahrheit über dieselbe
      Sache und müsste bei jeder Kontrastmessung einzeln nachgezogen
      werden.

   2. FARBE NIE ALLEIN. Jede Stufe trägt zusätzlich ein Zeichen und
      einen Satz. Wer Farben nicht unterscheiden kann, liest sonst
      vier gleich aussehende Zeilen.

   3. MOBILE FIRST, und zwar als Regel statt als Zahl. Die Reihen
      brechen über `flex-wrap` um, nicht über eine Schwelle in Pixeln
      -- eine feste Zahl ist eine Rechnung von gestern und wird beim
      nächsten zusätzlichen Element still falsch (gemessen am
      06.09.2026 in der Kopfleiste, wo genau das zweimal passiert ist).
   ===================================================================== */

.mz-seite {
  --mz-gut:     var(--k-gut,     #5fc99a);
  --mz-mittel:  var(--k-mittel,  #e8b877);
  --mz-warn:    var(--k-warn,    #f0868f);
  --mz-still:   var(--k-neutral, #8e9cb0);
}

/* ---------------------------------------------------------------------
   DIE STUFE AN EINEM ELEMENT

   Ein einziger Griff (`data-stufe`) setzt die Farbe für alles, was
   darunter hängt. Die Alternative wären vier Klassen je Bauteil --
   und beim fünften Bauteil hätte eine davon gefehlt. */
[data-stufe="gruen"]   { --mz-ton: var(--mz-gut); }
[data-stufe="orange"]  { --mz-ton: var(--mz-mittel); }
[data-stufe="rot"]     { --mz-ton: var(--mz-warn); }
[data-stufe="neutral"] { --mz-ton: var(--mz-still); }
[data-stufe="aus"]     { --mz-ton: var(--mz-still); }

/* =====================================================================
   DER KOPF: Monat, Fortschritt, Resttage
   ===================================================================== */

.mz-kopf {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--rand, rgba(150, 186, 220, .16));
  background: var(--flaeche, rgba(9, 13, 22, .89));
  clip-path: polygon(var(--fase, 18px) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase, 18px));
  margin-bottom: 18px;
}

/* Der Ring. Eine `conic-gradient` statt eines SVG: Sie lässt sich mit
   einer einzigen Variablen (`--mz-anteil`) bewegen und braucht kein
   zweites Zahlensystem. */
.mz-ring {
  position: relative;
  flex: 0 0 auto;
  width: 84px; height: 84px; border-radius: 50%;
  background:
    conic-gradient(var(--mz-ton, var(--mz-still)) calc(var(--mz-anteil, 0) * 1%),
                   rgba(150, 186, 220, .13) 0);
  display: grid; place-items: center;
  /* DEZENT, NICHT SPIELERISCH. 600 ms, und bei
     `prefers-reduced-motion` gar nicht -- Hausregel. */
  transition: background .6s ease;
}
.mz-ring::after {
  content: ""; position: absolute; inset: 8px; border-radius: 50%;
  background: var(--tinte, #05070d);
}
.mz-ring__text {
  position: relative; z-index: 1; text-align: center; line-height: 1.1;
}
.mz-ring__zahl  { display: block; font-size: 1.3rem; font-weight: 700; color: #f2f7fd; }
.mz-ring__von   { display: block; font-size: .75rem; color: var(--text-leise, #9fb0c6); }

.mz-kopf__text { flex: 1 1 240px; min-width: 0; }
.mz-kopf__monat {
  margin: 0 0 2px; font-size: 1.12rem; font-weight: 700; color: #f2f7fd;
}
.mz-kopf__stand { margin: 0 0 4px; color: var(--text, #dbe4ef); font-size: .92rem; }
.mz-kopf__rest  { margin: 0; color: var(--text-leise, #9fb0c6); font-size: .84rem; }
.mz-kopf__rest[data-stufe="rot"]    { color: var(--mz-warn); }
.mz-kopf__rest[data-stufe="orange"] { color: var(--mz-mittel); }

/* =====================================================================
   DIE VIER AUFGABENZEILEN
   ===================================================================== */

.mz-liste { display: grid; gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; }

.mz-zeile {
  border: 1px solid var(--rand, rgba(150, 186, 220, .16));
  border-left: 3px solid var(--mz-ton, var(--mz-still));
  background: var(--flaeche, rgba(9, 13, 22, .89));
}

.mz-zeile__kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  width: 100%; padding: 13px 14px;
  background: none; border: 0; color: inherit; text-align: left;
  font: inherit; cursor: pointer;
  /* 44 Pixel Mindesthöhe -- dasselbe Berührziel wie überall im Haus
     (`--feld-ziel`). pruef-fingermass misst das nach. */
  min-height: 44px;
}
.mz-zeile__kopf:focus-visible { outline: 2px solid var(--akzent, #6f89a8); outline-offset: -3px; }

/* Das Zeichen der Aufgabe. `--ton` wird hier auf die Ampelfarbe
   gesetzt, weil die Hausgestaltung der kleinen Zeichen (`.dran__svg`)
   genau diese Variable liest -- so traegt das Zeichen die Stufe,
   ohne dass eine einzige Regel doppelt geschrieben waere. */
.mz-zeile__zeichen {
  --ton: var(--mz-ton, var(--mz-still));
  flex: 0 0 auto; width: 30px; height: 30px;
  display: grid; place-items: center;
  color: var(--mz-ton, var(--mz-still)); font-size: 1rem;
}

/* Das Statuszeichen vor dem Satz. Schmal und mit fester Breite, damit
   die Saetze aller vier Zeilen an derselben Stelle beginnen -- sonst
   wandert der Text je nach Stufe um ein paar Pixel. */
.mz-zeile__stufe {
  display: inline-block; width: 1.1em; margin-right: 2px;
  font-weight: 700; text-align: left;
}
.mz-zeile__text { flex: 1 1 160px; min-width: 0; }
.mz-zeile__name {
  display: block; font-weight: 650; color: #eaf1f9; font-size: .97rem;
}
.mz-zeile__lage {
  display: block; margin-top: 2px;
  font-size: .8rem; color: var(--text-leise, #9fb0c6);
}
.mz-zeile__lage[data-stufe="rot"]    { color: var(--mz-warn); }
.mz-zeile__lage[data-stufe="orange"] { color: var(--mz-mittel); }
.mz-zeile__lage[data-stufe="gruen"]  { color: var(--mz-gut); }

.mz-zeile__zahl {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 1.02rem; color: var(--mz-ton, var(--mz-still));
}
.mz-zeile__pfeil {
  flex: 0 0 auto; color: var(--text-leise, #9fb0c6);
  transition: transform .18s ease;
}
.mz-zeile[data-auf="ja"] .mz-zeile__pfeil { transform: rotate(90deg); }

/* Der eigene Balken je Aufgabe. Liegt UNTER der Kopfzeile und über der
   Liste -- so trennt er beide optisch, ohne eine weitere Linie. */
.mz-balken {
  height: 4px; margin: 0 14px 10px;
  background: rgba(150, 186, 220, .13);
  overflow: hidden;
}
.mz-balken__fuell {
  display: block; height: 100%;
  width: calc(var(--mz-anteil, 0) * 1%);
  background: var(--mz-ton, var(--mz-still));
  transition: width .6s ease;
}

.mz-zeile__fuss {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 0 14px 13px;
}
.mz-zeile__fuss .knopf { min-height: 44px; }

/* =====================================================================
   DER SCHNELL-EINTRAG
   =====================================================================
   `flex-wrap` und keine Schwelle in Pixeln: Die Reihe bricht genau
   dann um, wenn der Platz nicht reicht. Eine feste Zahl waere beim
   naechsten zusaetzlichen Knopf still falsch -- gemessen am
   06.09.2026 in der Kopfleiste, wo genau das zweimal passiert ist. */
.mz-schnell {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  width: 100%;
}
.mz-schnell .knopf, .mz-schnell .schritt { min-height: 44px; }

/* Das Feld nimmt den uebrigen Platz -- aber nie weniger als 180 px,
   sonst steht auf dem Handy ein Schlitz, in den niemand zielt. */
.mz-schnell__feld {
  flex: 1 1 180px; min-width: 180px; min-height: 44px;
  padding: 10px 12px;
  background: rgba(10, 14, 23, .7); color: var(--text, #dbe4ef);
  border: 1px solid var(--rand, rgba(150, 186, 220, .16));
  font: inherit;
}
.mz-schnell__feld:focus-visible {
  outline: 2px solid var(--akzent, #6f89a8); outline-offset: -2px;
}
.mz-schnell__art {
  min-height: 44px; padding: 8px 10px;
  background: rgba(10, 14, 23, .7); color: var(--text, #dbe4ef);
  border: 1px solid var(--rand, rgba(150, 186, 220, .16));
  font: inherit;
}

/* Die drei fertigen Tage im Dialog. */
.mz-schnelltage { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; }
.mz-schnelltage .schritt { min-height: 40px; }
.mz-schnelltage .schritt[data-an="ja"] {
  border-color: color-mix(in srgb, var(--mz-gut) 60%, transparent);
  color: var(--mz-gut);
}

/* Die aufgeklappte Liste der eigenen Einträge. */
.mz-eintraege { padding: 0 14px 12px; }
.mz-eintrag {
  display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline;
  padding: 9px 0;
  border-top: 1px solid rgba(150, 186, 220, .10);
}
.mz-eintrag__datum {
  flex: 0 0 auto; font-variant-numeric: tabular-nums;
  font-size: .82rem; color: var(--text-leise, #9fb0c6);
}
.mz-eintrag__was { flex: 1 1 160px; min-width: 0; color: var(--text, #dbe4ef); font-size: .9rem; }
/* Das Beruehrziel eines Links. 20 px hoch war es vorher -- gemessen,
   nicht geschaetzt: `mess-manager-ziele.mjs` meldete „a.-: 20px". Auf
   einem Handy trifft man das nur mit Glueck. */
.mz-eintrag__was a { color: inherit; display: inline-block; padding: 9px 0; }
.mz-eintrag__notiz {
  display: block; margin-top: 2px;
  font-size: .8rem; color: var(--text-leise, #9fb0c6);
  overflow-wrap: anywhere;
}
.mz-eintrag__marke {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  /* .75rem und nicht .7rem: Unter 11,5 px wird es im Haus als zu
     klein gezaehlt (pruef-css-klassen misst jede Schriftgroesse). */
  font-size: .75rem; border-radius: 999px;
  background: rgba(150, 186, 220, .14); color: var(--text-leise, #9fb0c6);
}
.mz-eintrag__knoepfe { flex: 0 0 auto; display: flex; gap: 6px; }
.mz-eintrag__knoepfe .schritt { min-height: 40px; }

.mz-leer {
  padding: 14px; text-align: center;
  color: var(--text-leise, #9fb0c6); font-size: .88rem;
}

/* =====================================================================
   DIE VORSCHLÄGE AUS DER SCOUT-PIPELINE
   =====================================================================
   Sichtbar abgesetzt, damit niemand sie für bereits gezählt hält.
   Sie sind ein Angebot, kein Stand. */
.mz-vorschlag {
  margin: 0 14px 12px; padding: 10px 12px;
  border: 1px dashed rgba(150, 186, 220, .26);
  background: rgba(150, 186, 220, .05);
}
.mz-vorschlag__titel {
  margin: 0 0 7px; font-size: .82rem; font-weight: 650;
  color: var(--text-leise, #9fb0c6);
}
.mz-vorschlag__reihe { display: flex; flex-wrap: wrap; gap: 6px; }
.mz-vorschlag__knopf { min-height: 40px; }

/* =====================================================================
   DER DAUERHAFTE HINWEIS
   ===================================================================== */
.mz-merksatz {
  margin: 0 0 22px; padding: 12px 14px;
  border-left: 3px solid var(--mz-mittel);
  background: rgba(232, 184, 119, .07);
  color: var(--text, #dbe4ef); font-size: .86rem; line-height: 1.5;
}

/* =====================================================================
   VERLAUF UND TEAM
   ===================================================================== */
.mz-block { margin-top: 26px; }
.mz-block__titel {
  margin: 0 0 10px; font-size: 1.02rem; font-weight: 700; color: #eaf1f9;
}

/* Eine Tabelle, die auf dem Handy nicht quer scrollt: Sie wird dort zu
   Karten. `display: block` je Zeile statt `overflow-x: auto` -- ein
   waagerechter Schiebebalken ist im Haus ausdrücklich unerwünscht. */
.mz-tabelle { width: 100%; border-collapse: collapse; font-size: .86rem; }
.mz-tabelle th, .mz-tabelle td {
  padding: 8px 10px; text-align: left;
  border-bottom: 1px solid rgba(150, 186, 220, .10);
}
.mz-tabelle th { color: var(--text-leise, #9fb0c6); font-weight: 600; padding: 0; }

/* Die Spaltenueberschrift als Knopf. Sie sieht aus wie eine
   Ueberschrift und ist eine -- nur bedienbar, mit Tastatur und mit
   sichtbarem Fokus. */
.mz-sort {
  display: flex; align-items: center; gap: 5px;
  width: 100%; min-height: 40px; padding: 8px 10px;
  background: none; border: 0; color: inherit;
  font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.mz-sort:hover { color: var(--text, #dbe4ef); }
.mz-sort:focus-visible { outline: 2px solid var(--akzent, #6f89a8); outline-offset: -2px; }
/* Feste Breite, damit die Ueberschriften beim Umsortieren nicht
   springen -- der Pfeil kommt und geht, die Spalte bleibt. */
.mz-sort__pfeil { display: inline-block; width: .8em; font-size: .8em; }

/* Ein Name ohne Knopf: ein geloeschter Zugang, den man nicht mehr
   aufmachen kann. */
.mz-ehemalig { color: var(--text-leise, #9fb0c6); font-style: italic; }
.mz-tabelle td { color: var(--text, #dbe4ef); }
.mz-tabelle .mz-wert { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Der Name ist der Weg zu einer Person -- also das meistgetroffene
   Ziel dieser Tabelle. Die Hausgroesse von `.schritt` sind 33 px; das
   ist fuer einen Nebenknopf richtig und fuer diesen hier zu wenig. */
.mz-tabelle .schritt { min-height: 40px; }

.mz-punkt {
  display: inline-block; width: 9px; height: 9px; margin-right: 6px;
  border-radius: 50%; background: var(--mz-ton, var(--mz-still));
  vertical-align: baseline;
}

.mz-steuer {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 12px;
}
.mz-steuer .schritt { min-height: 44px; }
.mz-steuer select, .mz-steuer input {
  min-height: 44px; padding: 8px 10px;
  background: rgba(10, 14, 23, .7); color: var(--text, #dbe4ef);
  border: 1px solid var(--rand, rgba(150, 186, 220, .16));
}

@media (max-width: 640px) {
  .mz-tabelle, .mz-tabelle tbody, .mz-tabelle tr, .mz-tabelle td { display: block; width: 100%; }
  /* Die Ueberschriftenzeile verschwindet im Kartenmodus -- die
     Spaltennamen stehen dort vor jedem Wert (`data-schild`). Das
     Sortieren bleibt trotzdem erreichbar -- ueber das Feld
     „Sortieren" in der Leiste darueber, das genau dafuer gebaut ist
     und mit den Spaltenknoepfen gleichlaeuft. Ohne es waere das
     Sortieren auf einem Telefon schlicht nicht vorhanden. */
  .mz-tabelle thead { display: none; }
  .mz-tabelle tr {
    margin-bottom: 10px; padding: 10px;
    border: 1px solid var(--rand, rgba(150, 186, 220, .16));
    border-left: 3px solid var(--mz-ton, var(--mz-still));
  }
  .mz-tabelle td { border: 0; padding: 3px 0; }
  /* Der Spaltenname wandert vor den Wert -- sonst stünden auf dem
     Handy nackte Zahlen ohne Bezug. */
  .mz-tabelle td[data-schild]::before {
    content: attr(data-schild) ": ";
    color: var(--text-leise, #9fb0c6);
  }
}

/* =====================================================================
   DAS FORMULAR
   ===================================================================== */
.mz-form { display: grid; gap: 12px; padding: 18px; }
.mz-feld { display: block; }
.mz-feld__schild {
  display: block; margin-bottom: 5px;
  font-size: .82rem; color: var(--text-leise, #9fb0c6);
}
.mz-feld input, .mz-feld select, .mz-feld textarea {
  width: 100%; min-height: 44px; padding: 10px 12px;
  background: rgba(10, 14, 23, .7); color: var(--text, #dbe4ef);
  border: 1px solid var(--rand, rgba(150, 186, 220, .16));
  font: inherit;
}
.mz-feld textarea { min-height: 76px; resize: vertical; }

/* Die Namensvorschläge aus der Pipeline. `position: relative` am
   Eltern-Feld, damit die Liste über dem Formular liegt statt es
   auseinanderzuschieben. */
.mz-feld--vorschlag { position: relative; }
.mz-treffer {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
  margin: 2px 0 0; padding: 0; list-style: none;
  max-height: 190px; overflow-y: auto;
  background: #0b1019; border: 1px solid var(--rand-hell, rgba(150, 186, 220, .30));
}
.mz-treffer li { margin: 0; }
.mz-treffer button {
  display: block; width: 100%; min-height: 42px; padding: 9px 12px;
  background: none; border: 0; color: var(--text, #dbe4ef);
  font: inherit; text-align: left; cursor: pointer;
}
.mz-treffer button:hover, .mz-treffer button:focus-visible {
  background: rgba(150, 186, 220, .12);
}
.mz-treffer__lage { display: block; font-size: .76rem; color: var(--text-leise, #9fb0c6); }

.mz-form__fehler { margin: 0; min-height: 1.2em; color: var(--mz-warn); font-size: .86rem; }
.mz-form__warnung { margin: 0; color: var(--mz-mittel); font-size: .84rem; }

/* Eine kurze Erfolgsmeldung. Sie verschwindet von selbst; ein Knopf
   zum Wegklicken wäre ein zweiter Handgriff für eine gute Nachricht. */
.mz-gelungen {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 40; padding: 11px 14px 11px 18px;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  max-width: min(560px, calc(100vw - 24px));
  background: #0d1520; border: 1px solid var(--mz-gut);
  color: #eaf1f9; font-size: .9rem;
  box-shadow: 0 8px 26px -10px rgba(0, 0, 0, .8);
}
/* „Rückgängig" ist der Ersatz für die Sicherheitsabfrage VOR dem
   Eintragen. Es muss deshalb gut zu treffen sein -- 40 px, nicht die
   kleine Schriftgröße einer Fußnote. */
.mz-gelungen__zurueck {
  min-height: 40px; padding: 8px 14px;
  background: rgba(150, 186, 220, .12);
  border: 1px solid var(--rand-hell, rgba(150, 186, 220, .30));
  color: #eaf1f9; font: inherit; cursor: pointer;
}
.mz-gelungen__zurueck:hover { background: rgba(150, 186, 220, .2); }
.mz-gelungen__zurueck:focus-visible {
  outline: 2px solid var(--akzent, #6f89a8); outline-offset: 2px;
}
.mz-gelungen__zurueck[disabled] { opacity: .5; cursor: default; }

/* =====================================================================
   DIE ZIELZAHLEN (nur DogFather und Spicy Media)
   ===================================================================== */
.mz-ziele__gilt {
  margin: 0 0 12px; font-size: .84rem; color: var(--text-leise, #9fb0c6);
}
.mz-ziele__zahl { width: 72px; min-height: 44px; text-align: center; }

/* =====================================================================
   RUHIGE BEWEGUNG
   =====================================================================
   Hausregel, nicht Geschmack: Wer `prefers-reduced-motion` gesetzt
   hat, bekommt den Endzustand sofort statt einer Animation. */
@media (prefers-reduced-motion: reduce) {
  .mz-ring, .mz-balken__fuell, .mz-zeile__pfeil { transition: none; }
}