/* ---------- Aus Chaos wird Ordnung (Probe 23.10.) ----------
   Mit Bewegung (html.bewegung): Abschnitt ist 300vh hoch, die Bühne bleibt stehen, Karten fliegen per transform.
   Ohne Bewegung: Bühne 100vh, Karten stehen gleich sortiert und abgehakt da. Positionen setzt chaos.js. */
.chaos { position: relative; height: 100vh; min-height: 640px; }
html.bewegung .chaos { height: 300vh; }
.chaos-buehne { position: sticky; top: 0; height: 100vh; min-height: 640px; overflow: hidden; }
.c-kopf { position: absolute; left: 0; right: 0; text-align: center; padding: 0 20px; z-index: 2; pointer-events: none; }
.c-satz {
  position: relative; height: 1.15em; margin: 0; font-family: "Manrope", sans-serif; font-weight: 700; color: var(--dunkel);
  font-size: clamp(1.9rem, 4.6vw, 3.6rem); letter-spacing: -0.035em; line-height: 1.05;
}
.c-satz > span { position: absolute; left: 0; right: 0; white-space: nowrap; transition: opacity .5s, transform .5s; }
.c-satz .b span { color: var(--eukalyptus); }
.c-satz .b { opacity: 0; transform: translateY(14px); }
.chaos.ordnung .c-satz .a { opacity: 0; transform: translateY(-14px); }
.chaos.ordnung .c-satz .b { opacity: 1; transform: none; }
.c-spalte {
  position: absolute; font-family: "Manrope", sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--braun); opacity: 0; transition: opacity .5s;
}
.chaos.ordnung .c-spalte { opacity: 1; }
.karte-t {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--linie); border-radius: 14px; padding: 12px 16px 12px 12px;
  box-shadow: 0 14px 30px -18px rgba(52,74,59,.45); font-size: .98rem; line-height: 1.3; color: var(--dunkel);
  will-change: transform; transform-origin: 50% 50%;
}
.karte-t .sym {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--salbei-hell); color: var(--button); transition: background .35s, color .35s;
}
.karte-t .sym svg { width: 18px; height: 18px; }
.karte-t .haken { display: none; }
.karte-t.erledigt .sym { background: var(--button); color: #fff; }
.karte-t.erledigt .sym .bild { display: none; }
.karte-t.erledigt .haken { display: block; }
.karte-t small { display: block; font-size: .75rem; color: var(--text-leise); }
@media (max-width: 760px) {
  .karte-t { font-size: .8rem; padding: 8px 10px 8px 8px; gap: 8px; border-radius: 11px; line-height: 1.2; }
  .karte-t .sym { width: 26px; height: 26px; border-radius: 8px; }
  .karte-t .sym svg { width: 14px; height: 14px; }
  .karte-t small { font-size: .66rem; }
  .c-spalte { font-size: .62rem; letter-spacing: .14em; }
  .c-satz { font-size: clamp(1.4rem, 6.6vw, 2.2rem); }
}