/* =====================================================================
   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; }

.mz-zeile__zeichen {
  flex: 0 0 auto; width: 26px; height: 26px;
  display: grid; place-items: center;
  color: var(--mz-ton, var(--mz-still)); font-size: 1rem;
}
.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; }

/* 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; }
.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%; }
  .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 18px;
  background: #0d1520; border: 1px solid var(--mz-gut);
  color: #eaf1f9; font-size: .9rem;
  box-shadow: 0 8px 26px -10px rgba(0, 0, 0, .8);
}

/* =====================================================================
   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; }
}