/* Bausteine — die eine Bauteil-Schicht der Suite (aus dem Styleguide, Fassung 2.0). */

/* Knopf: vollrund, 40 hoch, hebt sich beim Überfahren */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--r1);
  min-height: 40px; padding: 0 var(--r3);
  border-radius: var(--rund-voll); border: 1px solid transparent;
  font: inherit; font-size: var(--grund-groesse); font-weight: var(--gewicht-halbfett);
  cursor: pointer; text-decoration: none;
  transition: transform var(--uebergang), box-shadow var(--uebergang), background var(--uebergang);
}
.knopf:hover { transform: translateY(-1px); box-shadow: var(--schatten-karte); }
.knopf:active { transform: none; }
.knopf.primaer { background: var(--wirkung); color: var(--tinte-hell); }
.knopf.sekundaer { background: var(--karte); color: var(--tinte); border-color: var(--linie); }
.knopf.geist { background: transparent; color: var(--wirkung); }
.knopf.geist:hover { box-shadow: none; background: var(--farbe-navy-100); }
.knopf svg { width: 17px; height: 17px; }

/* Pille: Zustand mit Punkt */
.pille {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: var(--rund-voll);
  font-size: var(--klein-groesse); line-height: var(--klein-zeile); font-weight: var(--gewicht-halbfett);
}
.pille::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pille.erfolg  { background: var(--erfolg-flaeche); color: var(--erfolg); }
.pille.warnung { background: var(--farbe-gold-100); color: var(--warnung); }
.pille.fehler  { background: var(--fehler-flaeche); color: var(--fehler); }
.pille.inaktiv { background: var(--farbe-navy-100); color: var(--tinte-gedaempft); }

/* Karte */
.karte {
  background: var(--karte); border: 1px solid var(--linie-zart);
  border-radius: var(--rund-gross); box-shadow: var(--schatten-karte);
  padding: var(--r3);
}

/* Modulkachel: klickbare Modulkarte der Tafel */
.modulkachel {
  display: flex; flex-direction: column; gap: var(--r2);
  background: var(--karte); border: 1px solid var(--linie-zart);
  border-radius: var(--rund-gross); box-shadow: var(--schatten-karte);
  padding: var(--r3); color: var(--tinte);
  transition: border-color var(--uebergang);
}
/* Beschluss 30.08.2026: Karten heben sich nicht — im Hover nur der Goldrand. */
.modulkachel:hover { border-color: var(--akzent); }
.modulkachel.inaktiv { opacity: .6; border-style: dashed; pointer-events: none; }
/* Zeichenrahmen = .mono des Styleguides: Goldton 12 %, feiner Goldrand, Zeichen in Markengold */
.modulkachel .zeichen {
  width: 40px; height: 40px; flex: none; border-radius: var(--rund);
  display: grid; place-items: center;
  background: rgba(194,161,92,.12); border: 1.5px solid rgba(194,161,92,.45);
  color: var(--akzent);
}
.modulkachel .zeichen svg { width: 22px; height: 22px; }
.modulkachel .fuss { margin-top: auto; display: flex; align-items: center; justify-content: space-between; }
.modulkachel .beschreibung { color: var(--tinte-gedaempft); }

/* Verweis-Knöpfe in Papas Wortlaut — übergreifend nutzbar (a wie button). */
a.knopf { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.knopf.zweit { background: var(--karte); color: var(--tinte); border: 1px solid var(--linie); }
.knopf.zweit:hover { background: var(--flaeche-ruhig); }
.knopf.klein { min-height: 32px; padding: 0 16px; font-size: 13px; }
.hinweis { font-size: 12px; color: var(--tinte-gedaempft); margin-top: var(--r1); line-height: 1.5; }

/* Gitter-Kinder dürfen schmaler werden als ihr Inhalt — sonst kann eine breite
   Tabelle ihre Roll-Hülle nie zum Rollen bringen (Befund 31.08.). */
.st-zweier > *, .st-kennzahlen > *, .kfix-fluss > *, .hero-reihe > *, .kpis > * { min-width: 0; }
.karte { min-width: 0; max-width: 100%; }
.tab-rollen { overflow-x: auto; max-width: 100%; padding-bottom: var(--halb); }
.tab-rollen::-webkit-scrollbar { height: 8px; }
.tab-rollen::-webkit-scrollbar-track { background: var(--flaeche-ruhig); border-radius: 4px; }
.tab-rollen::-webkit-scrollbar-thumb { background: var(--farbe-navy-300); border-radius: 4px; }

/* Strichzeichen (bausteine/Zeichen.tsx): mittig zur Schrift, färbt mit. */
.zeichen-strich { display: inline-flex; vertical-align: -3px; margin-right: 8px; }
.zeichen-strich:last-child { margin-right: 0; }

/* Die Denk-Schleife — Docs Regel (31.08.): Immer, wenn gerechnet oder
   nachgedacht wird, dreht sich das Logo. EIN Baustein für alle Module. */
.denk-schleife { width: 24px; height: 24px; flex: none; }
.denk-schleife.klein { width: 16px; height: 16px; }
.denk-schleife canvas { display: block; }
.denk-blase { display: flex; align-items: center; gap: var(--r1); }

.warteschirm {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(255, 255, 255, 0.78);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--r2); text-align: center; padding: var(--r3);
}
.warteschirm-schleife { width: 150px; height: 150px; }
.warteschirm p {
  font-weight: var(--gewicht-halbfett); color: var(--kopf);
  max-width: 520px; font-size: var(--betont-groesse, 1.05rem);
}

/* Nebenher (Doc 15.09., Dummy „Arbeitswolke"): kein Schirm, nichts gesperrt.
   Erst 150 px in der Mitte mit dem Satz als dunkle Pille, nach 1,5 s (`ruhe`)
   oben links unter der Kopfzeile: 56 px, halb durchsichtig, ohne Rahmen, nur
   die Sekunden daneben. Der Kasten selbst wandert — so gleitet die Wolke. */
.warteschirm.nebenher {
  inset: auto; background: none; pointer-events: none; padding: 0; gap: 0;
  display: block; width: 150px; height: 150px;
  left: calc(50vw - 75px); top: calc(50vh - 75px);
  transition: left .55s cubic-bezier(.4, 0, .2, 1), top .55s cubic-bezier(.4, 0, .2, 1),
              width .55s, height .55s, opacity .4s;
}
.warteschirm.nebenher .warteschirm-schleife { width: 100%; height: 100%; }
.warteschirm.nebenher p {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: var(--r1); white-space: nowrap; max-width: none;
  background: var(--kopf); color: #fff; border-radius: 999px; padding: .35rem 1rem;
  font-size: .95rem; box-shadow: 0 4px 18px rgba(23, 37, 56, .25); transition: all .4s;
}
.warteschirm.nebenher p .warteschirm-sekunden { color: rgba(255, 255, 255, .8); }
.warteschirm.nebenher.ruhe {
  left: 14px; top: 68px; width: 56px; height: 56px; opacity: .5;
}
.warteschirm.nebenher.ruhe p {
  top: 50%; left: 100%; transform: translateY(-50%); margin: 0 0 0 .5rem;
  background: none; color: var(--kopf); padding: 0; box-shadow: none; font-size: .8rem;
}
.warteschirm.nebenher.ruhe p .warteschirm-sekunden { color: var(--kopf); }
@media (prefers-reduced-motion: reduce) { .warteschirm.nebenher { transition: none; } }

/* Schwebende Fenster: verschiebbar (Griff = Überschrift) und in der Größe
   ziehbar (rechte untere Ecke) — EIN Baustein, bausteine/fenster.ts. */
/* Docs Befund 02.09.: Ohne Höhengrenze wuchs eine volle Karte über den
   Bildschirm hinaus — und dann gibt es nichts zu scrollen, weil die Karte
   selbst nie überläuft. Die Grenze macht jedes bewegliche Fenster kleiner
   als den Schirm; was nicht passt, scrollt IM Fenster. Gilt suite-weit. */
.fenster-beweglich { resize: both; overflow: auto; max-height: 92vh; max-width: 96vw; }
.fenster-beweglich h3, .fenster-beweglich .dk-tafelkopf, .fenster-griff { cursor: move; user-select: none; }

/* Sekundenzähler am Warteschirm (Doc, 01.09.2026: „bei Wolke neben dem Text
   Sekundenanzahl"). Ruhig gesetzt — er soll begleiten, nicht drängen; er
   erscheint erst nach drei Sekunden, damit kurze Wartezeiten still bleiben. */
.warteschirm-sekunden {
  color: var(--tinte-gedaempft); font-variant-numeric: tabular-nums;
  font-size: .92em; margin-left: .15em;
}

/* ===== Rollbalken (bausteine/Rollbalken.tsx) — immer sichtbar, ohne Pfeile =====
   Doc, 13.09.2026. Bahn hellblau, Griff navy; ist nichts zu rollen, füllt der
   Griff die Bahn und wird hell. */
.rollbalken { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0; user-select: none; }
.rollbalken-bahn { flex: 1; width: 14px; min-height: 40px; position: relative; border-radius: 7px; background: var(--farbe-navy-100); }
.rollbalken-griff {
  position: absolute; left: 2px; right: 2px; min-height: 28px; border-radius: 5px;
  background: var(--kopf); box-shadow: 0 1px 3px rgba(23, 37, 56, .3); cursor: grab; touch-action: none;
}
.rollbalken-griff:active { cursor: grabbing; background: var(--akzent); }
.rollbalken.ohne .rollbalken-griff { background: var(--farbe-navy-200); cursor: default; box-shadow: none; }