/* ===========================================================================
   MANAGEMENT — Gestaltung des Erklaerbereichs
   ---------------------------------------------------------------------------
   Gleiche Sprache wie der Rest der App: Glas statt Farbflaeche, Rot nur als
   Akzent, viel Ruhe. Die Grafiken sind aus CSS gebaut, nicht als Bild - so
   koennen sie nie beschnitten werden und passen sich jeder Breite an.

   Alle Breitenregeln fragen den App-Rahmen ab (@container apprahmen, in
   auftrag.css am .inhalt gesetzt), nicht das Fenster.
   =========================================================================== */

/* ─────────────────────────────────────────────────────────────────────
   DIE AUFTEILUNG — der Kern der ganzen Sache
   Zwei Balken nebeneinander, deren Breite dem Anteil entspricht. Wer
   nur hinsieht, hat die Aussage schon.
   ───────────────────────────────────────────────────────────────────── */
.mgmt__wahl { display: flex; gap: 7px; margin-bottom: 14px; }
.mgmt__wk {
  flex: 1; min-height: 38px; padding: 0 9px; border-radius: 10px;
  border: 1px solid var(--linie); background: var(--flaeche-2);
  color: var(--text-leise); font-size: 12.5px; font-weight: 700;
  transition: background .18s var(--kurve), color .18s, border-color .18s, transform .18s var(--kurve);
}
.mgmt__wk:active { transform: scale(.97); }
/* Aktiv als Glas mit Goldkante - kein roter Farbklotz. */
.mgmt__wk[aria-pressed="true"] {
  background: var(--glas-an); color: var(--text);
  border-color: rgba(232,192,122,.5);
  box-shadow: var(--glas-licht);
}

.mgmt__balken {
  display: flex; gap: 5px; align-items: stretch;
  border-radius: 13px; overflow: hidden;
}
.mgmt__b {
  flex: var(--t) 1 0; min-width: 0;
  padding: 15px 13px 13px; border-radius: 11px;
  display: flex; flex-direction: column; align-items: flex-start;
  transition: flex-grow .45s var(--kurve);
}
.mgmt__b--du {
  background: rgba(74,222,128,.11); border: 1px solid rgba(74,222,128,.3);
}
.mgmt__b--wir {
  background: var(--glas); border: 1px solid var(--linie);
}
.mgmt__bz {
  font-family: var(--anzeige); font-size: 30px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.mgmt__b--du .mgmt__bz { color: var(--gruen); }
.mgmt__be { font-size: 15px; font-weight: 700; color: var(--text-leise); margin-left: 1px; }
.mgmt__b--du .mgmt__be { color: var(--gruen); }
.mgmt__bw {
  display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.35;
  color: var(--text-still); font-weight: 600;
}
.mgmt__mname {
  margin: 11px 0 0; font-size: 12.5px; font-weight: 700; color: var(--text-leise);
}
.mgmt__fuss { margin-top: 12px; }

/* Bei sehr schmalem Rahmen untereinander - nebeneinander waeren die
   Zahlen sonst zweizeilig und der Vergleich waere weg. */
@container apprahmen (max-width: 330px) {
  .mgmt__balken { flex-direction: column; }
  .mgmt__b { flex: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   DER ABLAUF — sechs nummerierte Schritte
   ───────────────────────────────────────────────────────────────────── */
.mgmt__weg { list-style: none; margin: 0; padding: 0; counter-reset: mgmt; }
.mgmt__ws {
  position: relative; display: flex; gap: 12px; align-items: flex-start;
  padding: 0 0 15px;
}
.mgmt__ws:last-child { padding-bottom: 0; }
.mgmt__ws::before {
  content: ''; position: absolute; left: 13px; top: 27px; bottom: 1px;
  width: 2px; border-radius: 2px; background: var(--linie);
}
.mgmt__ws:last-child::before { display: none; }
.mgmt__wn {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: grid; place-content: center;
  background: rgba(232,192,122,.13); border: 1px solid rgba(232,192,122,.32);
  color: var(--gold); font-size: 12.5px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.mgmt__wt { flex: 1; min-width: 0; padding-top: 3px; }
.mgmt__wt b { display: block; font-size: 13.5px; font-weight: 700; color: var(--text); }
.mgmt__wt i {
  display: block; font-style: normal; font-size: 11.5px; line-height: 1.5;
  color: var(--text-still); margin-top: 2px;
}
.bild[data-an="1"] .mgmt__ws { animation: mgmtRein .34s var(--kurve) both; animation-delay: calc(var(--n) * 45ms); }
@keyframes mgmtRein { from { opacity: 0; transform: translateY(7px); } }
@media (prefers-reduced-motion: reduce) { .mgmt__ws { animation: none !important; } }

/* ─────────────────────────────────────────────────────────────────────
   DIE FRISTEN ALS STRECKE
   Die Breite entspricht der Dauer - 7 Tage sind sichtbar kuerzer als 14.
   ───────────────────────────────────────────────────────────────────── */
.mgmt__zeit { display: flex; gap: 6px; align-items: stretch; }
.mgmt__zabschnitt {
  flex: var(--teil) 1 0; min-width: 0;
  padding: 13px 12px; border-radius: 11px;
  background: var(--glas-tief); border: 1px solid var(--linie);
}
.mgmt__zabschnitt--zwei {
  background: rgba(232,192,122,.08); border-color: rgba(232,192,122,.26);
}
.mgmt__ztage {
  display: block; font-family: var(--anzeige); font-size: 19px; font-weight: 700;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.mgmt__zabschnitt--zwei .mgmt__ztage { color: var(--gold); }
.mgmt__zwas {
  display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.35;
  color: var(--text-still); font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────
   DIE MODELLE
   ───────────────────────────────────────────────────────────────────── */
.mgmt__m {
  padding: 13px 0; border-bottom: 1px solid var(--linie);
}
.mgmt__m:last-of-type { border-bottom: 0; padding-bottom: 0; }
.mgmt__mk { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mgmt__mk b { font-family: var(--anzeige); font-size: 15.5px; font-weight: 700; color: var(--text); }
.mgmt__mq {
  flex: none; font-family: var(--anzeige); font-size: 17px; font-weight: 700;
  color: var(--text-leise); font-variant-numeric: tabular-nums;
}
.mgmt__m[data-an="1"] .mgmt__mq { color: var(--gold); }
.mgmt__ma { margin: 5px 0 0; font-size: 12.5px; font-weight: 700; color: var(--text-leise); }
.mgmt__mu { margin: 4px 0 0; font-size: 12px; line-height: 1.55; color: var(--text-still); }