/* kapaz-gemeinsam.css – Bauteile, die sich Kapazitaetsplanung und Kapazitaets-
   berechnung teilen. Sie muessen auf beiden Seiten GLEICH aussehen, also stehen
   sie hier einmal statt zweimal (dieselbe Regel wie beim Auswahlfeld der
   Report-Kopfzeile und beim Avatar). Beide Seiten binden diese Datei ein.
   ⚠ Nicht in eine Seiten-CSS zurueckschreiben. */

/* ── Reiterreihe: Optik zentral (eris-theme.css). Hier nur, was die
   Kapazitaets-Seiten eigen haben: der Lehreinheitsname am rechten Rand. ── */
.tab-le{margin-left:auto;font-size:var(--fs-basis,13px);color:var(--blue-d);font-weight:600;font-family:var(--font-serif)}

/* ── Sortier-Anzeige im Tabellenkopf ─────────────────────────────────────────
   Stand vorher zweimal (Planung und Berechnung) und war beide Male ueber
   `opacity:.55` gedaempft – gemessen 2,5:1 in Hell und 3,98 im Dunkeln, also
   unter den 4,5, die 9-px-Schrift braucht. Die Deckkraft ist dafuer das falsche
   Mittel: sie zieht die Schrift zum Untergrund, egal welche Farbe daruntersteht,
   und laesst sich in keinem Theme nachjustieren.
   Der Unterschied inaktiv/aktiv haengt jetzt an dem, was ihn ohnehin traegt:
   der GLYPHE (↕ gegen ▲/▼, gesetzt im JS), der FARBE (gedaempft gegen Blau) und
   der Fettung des aktiven Pfeils.
   ⚠ Der Pfeil ist ein ZUSTANDSSYMBOL, kein Fliesstext: der Massstab ist die
   3:1-Schwelle fuer nicht-textliche Bedienelemente, nicht 4,5. Mit `opacity:.55`
   lag er bei 2,5:1 und riss auch die; ohne Deckkraft sind es 4,28:1.
   ⚠ NICHT auf die Fliesstextfarbe setzen: die ergibt 6,9 (hell) bis 13,1
   (Praesentation) und stellt den INAKTIVEN Pfeil damit staerker heraus als den
   aktiven (5,97 im Dunkeln) — die Rangfolge stuende auf dem Kopf. */
/* ⚠ HIER STAND `position:relative` auf den Spaltenkoepfen. Es war ueberfluessig
   (die Sortier-Anzeige sitzt inline, nichts wird absolut positioniert) und hat
   das `position:sticky` des Tabellenkopfs geschlagen — der Kopf scrollte damit
   aus dem Bild, und in einer langen Tabelle weiss man dann nicht mehr, welche
   Spalte man liest. Nicht wieder einfuegen. */
/* Sortier-Anzeige: seit 10.09.2026 zentral in der Theme-Ebene (Block „SORTIER-ANZEIGE
   EINER TABELLE"). Die hier am 08.09. gefundene Fassung (Farbe statt Deckkraft) ist
   dorthin gewandert — sie trug nur, solange eine Seite DIESE Datei laedt, und das tun
   nur die beiden Kapazitaetsseiten. */

/* ── Zweiwege-Schalter ────────────────────────────────────────────────────────
   ⚠ Die Optik von `.tsw` steht seit 09.09. ZENTRAL in eris-theme.css (Block
   „ZWEIWEGE-SCHALTER"), weil das Bauteil auch außerhalb der Kapazitätsseiten
   gebraucht wird. Hier bleibt nur die Beschriftung, die es sonst nirgends gibt.
   Nicht zurückschreiben. */
.ck-tog-l{font-size:11px;color:var(--text-muted);font-weight:600;white-space:nowrap}

/* ── Hilfe-Tab: Rechenweg der Kapazitaetsberechnung ───────────────────────────
   Zwei Spuren (Angebot/Nachfrage) laufen in eine gemeinsame Kette. Derselbe Weg
   traegt zwei Fuellungen: Formel und Beispielzahlen; umgeschaltet wird ueber
   data-modus am Wurzelknoten, nicht durch Neuaufbau.
   ⚠ Alle Flaechen ueber die Toenungen aus eris-theme.css (Hellwert als Rueckfall) –
   feste Hellfarben stuenden im Dunkelmodus als helle Flecken da. */
.hlp{padding:16px 18px 20px}
/* Der Kopf soll umbrechen, die Schaltergruppe darin NICHT: sonst schnurrt der Titel
   auf schmalen Fenstern zu einer Wortsaeule zusammen, statt dass die Gruppe rutscht. */
.hlp-kopf{flex-wrap:wrap}
.hlp-tog{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.hlp-intro{margin:0 0 14px;font-size:var(--fs-gross,14px);line-height:1.5;color:var(--text);max-width:78ch}
.hlp-bsp-kopf{display:none;margin:0 0 14px;padding:8px 12px;font-size:var(--fs-basis,13px);line-height:1.5;
  border-radius:8px;border:1px solid var(--line);background:var(--t-neutral-bg,#f7f3ec);color:var(--t-fliess,var(--text))}

/* Modus-Umschaltung: es steht immer genau eine der beiden Fuellungen. */
.hlp[data-modus="formel"] .hlp-b{display:none}
.hlp[data-modus="beispiel"] .hlp-f{display:none}
.hlp[data-modus="beispiel"] .hlp-bsp-kopf{display:block}

/* Zwei Spuren nebeneinander; unter ~640px untereinander (Container-Breite, nicht Fenster). */
.hlp-lanes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px}
.hlp-lane{border:1px solid;border-radius:10px;padding:12px 14px 14px}
.hlp-lane-t{font-family:var(--font-serif);font-size:var(--fs-gross,14px);font-weight:600;margin-bottom:10px}
.hlp-blau{background:var(--t-blau-bg,#eaf1fa);border-color:var(--t-blau-bd,#c8d8ee)}
.hlp-blau .hlp-lane-t,.hlp-blau .hlp-num{color:var(--t-blau-fg,var(--blue))}
.hlp-amber{background:var(--t-amber-bg,#fdf3d8);border-color:var(--t-amber-bd,var(--amber))}
.hlp-amber .hlp-lane-t,.hlp-amber .hlp-num{color:var(--t-amber-fg,#7d5500)}

/* Ein Rechenschritt. Die Nummer sitzt als Kreis links oben ausserhalb des Textflusses,
   damit Formel und Beispiel exakt dieselbe Zeilenbreite haben (kein Springen beim Umschalten). */
.hlp-step{position:relative;background:var(--t-flaeche,#fff);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px 10px 42px}
.hlp-num{position:absolute;left:10px;top:10px;width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-klein,12px);font-weight:700;
  background:var(--t-flaeche,#fff);border:1px solid var(--line);color:var(--text-muted)}
.hlp-t{font-weight:700;font-size:var(--fs-basis,13px);margin-bottom:6px}
.hlp-t i{font-style:normal;font-weight:600;color:var(--text-muted)}
.hlp-tag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:10px;vertical-align:1px;
  font-size:var(--fs-mikro,11px);font-weight:600;
  background:var(--t-flaeche,#fff);color:var(--t-fliess,#5a5347);border:1px solid var(--line)}
/* Formel- bzw. Beispielzeile: gleiche Optik, damit der Umschalter nur den Inhalt tauscht. */
.hlp-f,.hlp-b{font-size:var(--fs-basis,13px);line-height:1.7;font-variant-numeric:tabular-nums;
  padding:6px 10px;border-radius:6px;background:var(--t-neutral-bg,#f7f3ec);
  border-left:2px solid var(--line);min-height:34px}
.hlp-f{color:var(--t-fliess,var(--text))}
.hlp-b b{color:var(--blue);font-weight:700}
.hlp-d{margin-top:6px;font-size:var(--fs-klein,12px);line-height:1.5;color:var(--text-muted)}
.hlp-arrow{text-align:center;font-size:var(--fs-lead,16px);line-height:1;padding:6px 0;color:var(--t-fliess,#5a5347)}

/* Zusammenfuehrung beider Spuren: Linie links und rechts, Pfeil in der Mitte. */
.hlp-join{display:flex;align-items:center;gap:8px;padding:10px 0 8px}
.hlp-join-l{flex:1;height:1px;background:var(--line)}
.hlp-join-p{font-size:var(--fs-titel,18px);line-height:1;color:var(--t-fliess,#5a5347)}

.hlp-chain{display:flex;flex-direction:column}
.hlp-wide{width:100%}
.hlp-gruen{border-left:4px solid var(--t-gruen-bd,var(--green))}
.hlp-gruen .hlp-t,.hlp-gruen .hlp-num{color:var(--t-gruen-fg,#3d6e1a)}
.hlp-ziel{border-left-width:8px}
.hlp-ziel .hlp-b,.hlp-ziel .hlp-f{background:var(--t-gruen-bg,#edf5e6)}
.hlp-lila{border-left:4px solid var(--t-lila-bd,#8a3a75)}
.hlp-lila .hlp-t,.hlp-lila .hlp-num{color:var(--t-lila-fg,#8a3a75)}

.hlp-wo{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:18px;padding:10px 12px;border-radius:8px;
  font-size:var(--fs-klein,12px);color:var(--t-fliess,#5a5347);
  background:var(--t-neutral-bg,#f7f3ec);border:1px solid var(--line)}
.hlp-wo b{color:var(--text)}