/* ==========================================================================
   RAID-WERKSTATT  -  alles unter .raidw gescoped
   ========================================================================== */
.raidw {
  display: block; max-width: 1180px; margin: 0 auto; padding: 20px 22px 48px;
  --karte: rgba(20,20,31,.58);
  --karte-2: rgba(25,25,38,.55);
  --erhoben: rgba(29,29,44,.58);
  --line: #262637;
  --line-soft: #1e1e2c;
  --txt: #eef0f6;
  --dim: #a2a2ba;
  --faint: #6a6a86;
  --blue: #3da9ff;
  --green: #3ddc84;
  --amber: #ffb347;
  --violet: #b47bff;
  --red: #ff3b5c;
  --mono: 'FQ Ziffern', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --label: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--txt); font-family: var(--label);
}
@media (max-width: 700px) { .raidw { padding: 14px 12px 36px; } }

.raidw .rw-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--karte); border: 1px solid var(--line); color: var(--txt);
  font-size: 13px; font-weight: 600; padding: 9px 15px;
  border-radius: 10px; cursor: pointer; margin-bottom: 16px;
}
.raidw .rw-back:hover { border-color: var(--blue); color: var(--blue); }

.raidw .rw-kopf { margin-bottom: 14px; }
.raidw .rw-kopf-l h1 {
  margin: 0; font-family: 'Press Start 2P', monospace; font-size: 16px; line-height: 1.5;
  background: linear-gradient(90deg, var(--amber), var(--red));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.raidw .rw-kopf-s { font-size: 12.5px; color: var(--dim); margin-top: 9px; }

/* ---------- Modus- und Stufenleiste ---------- */
.raidw .rw-modebar { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.raidw .rw-modebtn {
  font-size: 12.5px; font-weight: 700; padding: 9px 18px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: var(--karte); color: var(--dim);
}
.raidw .rw-modebtn.on { border-color: var(--green); color: var(--green); background: rgba(61,220,132,.10); }

.raidw .rw-stufen { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.raidw .rw-stufe {
  display: flex; align-items: center; gap: 8px;
  background: var(--karte); border: 1px solid var(--line); color: var(--dim);
  font-size: 12.5px; font-weight: 600; padding: 8px 13px 8px 8px; border-radius: 12px;
  cursor: pointer; transition: border-color .15s, color .15s, transform .1s;
}
.raidw .rw-stufe:hover { color: var(--txt); border-color: #34344c; transform: translateY(-1px); }
.raidw .rw-stufe .n {
  display: grid; place-items: center; min-width: 24px; height: 24px;
  border-radius: 8px; background: var(--erhoben); color: var(--faint);
  font-family: var(--mono); font-size: 11px;
}
.raidw .rw-stufe.on { border-color: var(--amber); color: var(--txt); background: rgba(255,179,71,.10); }
.raidw .rw-stufe.on .n { background: var(--amber); color: #2a1a04; }

/* ---------- Aufgabenkarte ---------- */
.raidw .rw-karte {
  background: var(--karte); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; margin-bottom: 14px;
}
.raidw .rw-k-kopf {
  display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap;
  padding: 15px 18px; border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(255,179,71,.07), transparent);
}
.raidw .rw-k-nr { font-family: var(--mono); font-size: 12px; color: var(--amber); white-space: nowrap; }
.raidw .rw-k-frage { flex: 1; min-width: 220px; font-size: 14.5px; line-height: 1.55; }
.raidw .rw-k-xp {
  font-family: var(--mono); font-size: 12px; white-space: nowrap; color: var(--green);
  border: 1px solid rgba(61,220,132,.35); padding: 4px 10px; border-radius: 8px;
}
.raidw .rw-k-body { padding: 16px 18px; }

/* ---------- Layout Palette / Verbund ---------- */
.raidw .rw-layout { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
@media (max-width: 860px) { .raidw .rw-layout { grid-template-columns: 1fr; } }
.raidw .rw-links, .raidw .rw-rechts { min-width: 0; }

/* Level-Auswahl */
.raidw .rw-levels { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.raidw .rw-lvl {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: var(--karte-2); border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: 11px; padding: 9px 12px; cursor: pointer; text-align: left; color: var(--dim);
}
.raidw .rw-lvl b { font-size: 13.5px; color: var(--txt); }
.raidw .rw-lvl span { font-size: 11px; }
.raidw .rw-lvl:hover { border-color: #34344c; }
.raidw .rw-lvl.f-blue.on   { border-color: var(--blue);   border-left-color: var(--blue);   background: rgba(61,169,255,.12); }
.raidw .rw-lvl.f-green.on  { border-color: var(--green);  border-left-color: var(--green);  background: rgba(61,220,132,.12); }
.raidw .rw-lvl.f-amber.on  { border-color: var(--amber);  border-left-color: var(--amber);  background: rgba(255,179,71,.12); }
.raidw .rw-lvl.f-violet.on { border-color: var(--violet); border-left-color: var(--violet); background: rgba(180,123,255,.12); }
.raidw .rw-lvl.f-red.on    { border-color: var(--red);    border-left-color: var(--red);    background: rgba(255,59,92,.12); }

.raidw .rw-lvl-info {
  margin-top: 12px; background: var(--karte-2); border: 1px solid var(--line-soft);
  border-radius: 11px; padding: 11px 13px;
}
.raidw .rw-lvl-info b { display: block; font-size: 13px; margin-bottom: 5px; }
.raidw .rw-lvl-info span { font-size: 12.5px; color: var(--dim); line-height: 1.55; }

/* Palette */
.raidw .rw-palette {
  background: var(--karte-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px;
}
.raidw .rw-ph {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 9px;
}
.raidw .rw-pl-reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.raidw .rw-pl-btn {
  background: var(--erhoben); border: 1px solid var(--line); color: var(--txt);
  font-family: var(--mono); font-size: 12px; padding: 9px 4px; border-radius: 9px; cursor: pointer;
}
.raidw .rw-pl-btn:hover { border-color: var(--blue); color: var(--blue); }
.raidw .rw-pl-clear {
  width: 100%; margin-top: 8px; background: transparent; border: 1px solid var(--line);
  color: var(--faint); font-size: 11.5px; padding: 7px; border-radius: 9px; cursor: pointer;
}
.raidw .rw-pl-clear:hover { border-color: var(--red); color: var(--red); }

/* ==========================================================================
   SERVER-RACK
   Leichte Aufsicht durch perspective + rotateX, damit es nicht flach wirkt.
   ========================================================================== */
.raidw .rw-rack {
  position: relative; margin-bottom: 16px; border-radius: 14px; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 18%),
    linear-gradient(160deg, #23232f 0%, #16161f 45%, #101018 100%);
  border: 1px solid #34344a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -18px 30px -20px rgba(0,0,0,.9),
    0 18px 34px -22px rgba(0,0,0,.85);
}

/* Blende oben */
.raidw .rw-rack-blende {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 14px; border-bottom: 1px solid #2b2b3c;
  background: linear-gradient(180deg, #262633, #1b1b26);
}
.raidw .rw-rack-blende .marke {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: #6d6d88;
}
.raidw .rw-rack-blende .stat {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
}
.raidw .rw-rack-blende .stat .pt {
  width: 8px; height: 8px; border-radius: 50%; display: block;
}
.raidw .rw-rack-blende .s-ok   { color: var(--green); }
.raidw .rw-rack-blende .s-ok .pt   { background: var(--green); box-shadow: 0 0 8px var(--green); }
.raidw .rw-rack-blende .s-warn { color: var(--amber); }
.raidw .rw-rack-blende .s-warn .pt { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.raidw .rw-rack-blende .s-err  { color: var(--red); }
.raidw .rw-rack-blende .s-err .pt  { background: var(--red); box-shadow: 0 0 9px var(--red); }
.raidw .rw-rack-blende .s-aus  { color: var(--faint); }
.raidw .rw-rack-blende .s-aus .pt  { background: #3a3a52; }

/* Einschubschacht mit leichter Aufsicht */
.raidw .rw-schacht {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px;
  padding: 14px; perspective: 900px;
}
@media (max-width: 760px) { .raidw .rw-schacht { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 420px) { .raidw .rw-schacht { grid-template-columns: repeat(2, 1fr); } }

.raidw .rw-slot {
  position: relative; height: 108px; border-radius: 7px; overflow: hidden;
  background: linear-gradient(180deg, #0a0a10, #06060a);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.9), inset 0 -1px 0 rgba(255,255,255,.04);
}
.raidw .rw-slot .schiene {
  position: absolute; inset: 5px 4px; border-radius: 5px;
  border-left: 2px solid rgba(255,255,255,.05);
  border-right: 2px solid rgba(0,0,0,.6);
}
.raidw .rw-slot.frei .leerhinweis {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--mono); font-size: 9.5px; color: #2f2f44; letter-spacing: .14em;
}

/* Das Laufwerk selbst */
.raidw .rw-caddy {
  position: absolute; inset: 4px; border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 30%),
    linear-gradient(155deg, #2e2e3d, #1d1d28 60%, #171720);
  border: 1px solid #3d3d52;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 5px 12px -6px rgba(0,0,0,.9);
  transform: translateX(0) rotateY(0deg);
  transition: transform .34s cubic-bezier(.22,1.1,.36,1), opacity .3s,
              border-color .3s, box-shadow .3s, background .3s;
}
/* Startposition beim Einfahren: seitlich draussen und leicht gekippt */
.raidw .rw-caddy.rein {
  transform: translateX(115%) rotateY(-22deg); opacity: 0;
}
.raidw .rw-caddy.raus {
  transform: translateX(115%) rotateY(-22deg); opacity: 0;
}

.raidw .rw-caddy .griff {
  position: absolute; left: 5px; top: 8px; bottom: 8px; width: 7px;
  border-radius: 3px; background: linear-gradient(180deg, #3f3f55, #23232f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.raidw .rw-caddy .griff i {
  position: absolute; left: 1px; right: 1px; top: 18px; height: 12px;
  border-radius: 2px; background: rgba(0,0,0,.5);
}
.raidw .rw-caddy .mitte { text-align: center; padding-left: 8px; }
.raidw .rw-caddy .nr { font-family: var(--mono); font-size: 9px; color: #5e5e7a; }
.raidw .rw-caddy .kap {
  font-family: var(--mono); font-size: 14px; color: var(--txt); margin-top: 3px;
}
.raidw .rw-caddy .teil { font-size: 8.5px; color: var(--amber); margin-top: 2px; }
.raidw .rw-caddy .pr { font-size: 8.5px; color: var(--violet); margin-top: 2px; }

/* LEDs */
.raidw .rw-caddy .leds {
  position: absolute; right: 6px; top: 8px; display: flex; flex-direction: column; gap: 5px;
}
.raidw .rw-caddy .led {
  width: 6px; height: 6px; border-radius: 50%; display: block;
  background: #23233a; transition: background .18s, box-shadow .18s;
}
.raidw .rw-caddy .led.pwr { background: #1f7a45; box-shadow: 0 0 5px rgba(61,220,132,.5); }
.raidw .rw-caddy.aktiv .led.act { background: var(--green); box-shadow: 0 0 9px var(--green); }
.raidw .rw-caddy.aktiv-par .led.act { background: var(--amber); box-shadow: 0 0 9px var(--amber); }
.raidw .rw-caddy.aktiv { border-color: rgba(61,220,132,.5); }
.raidw .rw-caddy.aktiv-par { border-color: rgba(255,179,71,.5); }

/* Spiegelpaare farbig kennzeichnen */
.raidw .rw-caddy.paar0 .griff { background: linear-gradient(180deg, var(--violet), #5c3a99); }
.raidw .rw-caddy.paar1 .griff { background: linear-gradient(180deg, var(--blue), #1c4f8f); }
.raidw .rw-caddy.ungleich { border-color: rgba(255,179,71,.45); }

/* Ausgefallenes Laufwerk */
.raidw .rw-caddy.tot {
  background: linear-gradient(155deg, #3a1c25, #24121a 60%, #1a0e14);
  border-color: var(--red);
}
.raidw .rw-caddy.tot .kap { color: var(--red); text-decoration: line-through; }
.raidw .rw-caddy.tot .led.pwr { background: var(--red); box-shadow: 0 0 9px var(--red); }
.raidw .rw-caddy.tot .led.act { background: #4a1520; box-shadow: none; }
.raidw .rw-caddy.klick { cursor: pointer; }
.raidw .rw-caddy.klick:hover { border-color: var(--amber); transform: translateY(-2px); }

.raidw .rw-caddy-x {
  position: absolute; top: 3px; right: 3px; width: 17px; height: 17px; line-height: 1;
  border-radius: 5px; border: none; background: transparent; color: #4d4d68;
  font-size: 13px; cursor: pointer; z-index: 3;
}
.raidw .rw-caddy-x:hover { background: rgba(255,59,92,.2); color: var(--red); }

/* Lueftergitter */
.raidw .rw-rack-boden {
  display: flex; gap: 3px; justify-content: center; padding: 8px 14px 11px;
  border-top: 1px solid #242432;
  background: linear-gradient(180deg, #14141d, #0e0e15);
}
.raidw .rw-rack-boden i {
  width: 4px; height: 9px; border-radius: 2px; display: block;
  background: linear-gradient(180deg, #0a0a10, #1a1a26);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.8);
}
.raidw .rw-rack-leer {
  padding: 0 14px 14px; font-size: 12px; color: var(--faint); text-align: center;
}

/* ---------- Ergebnis ---------- */
.raidw .rw-erg {
  background: var(--karte); border: 1px solid var(--line); border-radius: 14px; padding: 15px 16px;
}
.raidw .rw-erg-hint { color: var(--faint); font-size: 12.5px; }
.raidw .rw-erg-warn {
  background: rgba(255,179,71,.10); border: 1px solid rgba(255,179,71,.45); color: var(--amber);
  border-radius: 10px; padding: 11px 13px; font-size: 12.5px; line-height: 1.55;
}
.raidw .rw-kacheln { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
@media (max-width: 620px) { .raidw .rw-kacheln { grid-template-columns: repeat(2, 1fr); } }
.raidw .rw-kachel {
  background: var(--karte-2); border: 1px solid var(--line-soft); border-radius: 11px;
  padding: 11px 10px; text-align: center;
}
.raidw .rw-kachel .v { font-family: var(--mono); font-size: 16px; color: var(--txt); }
.raidw .rw-kachel .l {
  font-size: 10.5px; color: var(--faint); margin-top: 4px; letter-spacing: .04em;
}
.raidw .rw-kachel.gross { border-color: rgba(61,220,132,.4); background: rgba(61,220,132,.08); }
.raidw .rw-kachel.gross .v { color: var(--green); font-size: 19px; }

.raidw .rw-leiste {
  display: flex; height: 22px; border-radius: 7px; overflow: hidden; margin: 14px 0 7px;
  background: var(--karte-2); border: 1px solid var(--line-soft);
}
.raidw .rw-leiste .seg {
  display: grid; place-items: center; font-family: var(--mono); font-size: 10px; color: #05140b;
  transition: width .25s ease;
}
.raidw .rw-leiste .seg.nutz { background: linear-gradient(90deg, #2fbf70, var(--green)); }
.raidw .rw-leiste .seg.red  { background: rgba(180,123,255,.55); color: #1a1030; }
.raidw .rw-leiste .seg.weg  { background: rgba(255,179,71,.45); color: #2a1a04; }
.raidw .rw-leg { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; }
.raidw .rw-leg span { display: inline-flex; align-items: center; gap: 5px; color: var(--dim); }
.raidw .rw-leg span::before {
  content: ""; width: 9px; height: 9px; border-radius: 3px; display: inline-block;
}
.raidw .rw-leg .l-nutz::before { background: var(--green); }
.raidw .rw-leg .l-red::before  { background: rgba(180,123,255,.75); }
.raidw .rw-leg .l-weg::before  { background: rgba(255,179,71,.75); }

.raidw .rw-hinweis {
  margin-top: 11px; font-size: 12px; color: var(--amber); line-height: 1.55;
  background: rgba(255,179,71,.07); border-left: 3px solid rgba(255,179,71,.5);
  padding: 9px 12px; border-radius: 0 9px 9px 0;
}
.raidw .rw-status {
  margin-top: 12px; padding: 11px 13px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.55;
}
.raidw .rw-status.ok   { background: rgba(61,220,132,.09); border: 1px solid rgba(61,220,132,.4); color: var(--green); }
.raidw .rw-status.warn { background: rgba(255,179,71,.09); border: 1px solid rgba(255,179,71,.45); color: var(--amber); }
.raidw .rw-status.weg  { background: rgba(255,59,92,.10); border: 1px solid rgba(255,59,92,.5); color: #ff7d90; }

/* ---------- Eingabe, Knoepfe, Rueckmeldung ---------- */
.raidw .rw-eingabe { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.raidw .rw-input {
  width: 150px; background: var(--karte-2); border: 1px solid var(--line); color: var(--txt);
  font-family: var(--mono); font-size: 15px; padding: 11px 13px; border-radius: 10px;
}
.raidw .rw-input:focus { outline: none; border-color: var(--blue); }
.raidw .rw-einheit { font-family: var(--mono); font-size: 13px; color: var(--faint); }

.raidw .rw-btnreihe { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 14px; }
.raidw .rw-btn {
  background: linear-gradient(135deg, #d18420, var(--amber)); border: none; color: #2a1a04;
  font-size: 13px; font-weight: 700; padding: 11px 20px; border-radius: 11px; cursor: pointer;
}
.raidw .rw-btn:hover:not(:disabled) { filter: brightness(1.1); }
.raidw .rw-btn.geist {
  background: transparent; border: 1px solid var(--line); color: var(--dim); font-weight: 600;
}
.raidw .rw-btn.geist:hover { border-color: var(--amber); color: var(--amber); filter: none; }
.raidw .rw-btn.go {
  background: linear-gradient(135deg, #1f9e63, var(--green)); color: #04140a; margin-top: 12px;
}

.raidw .rw-rueck {
  display: none; margin-top: 14px; padding: 12px 15px; border-radius: 11px;
  font-size: 13px; line-height: 1.6;
}
.raidw .rw-rueck.show { display: block; }
.raidw .rw-rueck.ok  { background: rgba(61,220,132,.10); border: 1px solid var(--green); color: var(--green); }
.raidw .rw-rueck.err { background: rgba(255,59,92,.09); border: 1px solid var(--red); color: #ff7d90; }

/* ---------- Antwortknoepfe (Ausfall) ---------- */
.raidw .rw-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 4px; }
@media (max-width: 700px) { .raidw .rw-opts { grid-template-columns: 1fr; } }
.raidw .rw-opt {
  background: var(--karte-2); border: 1px solid var(--line); color: var(--txt);
  font-size: 13px; padding: 13px 14px; border-radius: 11px; cursor: pointer; text-align: left;
}
.raidw .rw-opt:hover:not(:disabled) { border-color: var(--amber); }
.raidw .rw-opt:disabled { opacity: .5; cursor: default; }
.raidw .rw-opt.ok  { border-color: var(--green); color: var(--green); background: rgba(61,220,132,.10); opacity: 1; }
.raidw .rw-opt.bad { border-color: var(--red); color: #ff7d90; background: rgba(255,59,92,.09); }

/* ---------- Sicherungs-Zeitleiste ---------- */
.raidw .rw-strat-info {
  font-size: 12.5px; color: var(--dim); line-height: 1.6; margin-bottom: 12px;
  background: var(--karte-2); border-left: 3px solid var(--blue);
  padding: 10px 13px; border-radius: 0 10px 10px 0;
}
.raidw .rw-woche { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; margin-bottom: 14px; }
/* Die Woche bleibt auch schmal siebenspaltig - genau wie in der Demo.
   Vier Spalten wuerden die Woche willkuerlich zerreissen. */
@media (max-width: 560px) {
  .raidw .rw-woche { gap: 3px; }
  .raidw .rw-tag { padding: 6px 2px; }
  .raidw .rw-tag .tg { font-size: 9px; }
  .raidw .rw-tag .art { font-size: 9px; padding: 4px 1px; }
}
.raidw .rw-tag {
  background: var(--karte-2); border: 1px solid var(--line); border-radius: 11px;
  padding: 9px 5px; text-align: center;
}
.raidw .rw-tag .tg { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-bottom: 6px; }
.raidw .rw-tag .art {
  font-size: 11px; font-weight: 700; padding: 5px 3px; border-radius: 7px;
}
.raidw .rw-tag .art.voll { background: rgba(61,169,255,.18); color: var(--blue); }
.raidw .rw-tag .art.diff { background: rgba(255,179,71,.18); color: var(--amber); }
.raidw .rw-tag .art.inkr { background: rgba(61,220,132,.18); color: var(--green); }
.raidw .rw-tag .art.aus  { background: rgba(255,59,92,.20); color: #ff7d90; }
.raidw .rw-tag .art.leer { background: transparent; color: var(--faint); }
.raidw .rw-tag.ausfall { border-color: var(--red); }
.raidw .rw-tag.noetig {
  border-color: var(--green); box-shadow: 0 0 0 1px rgba(61,220,132,.35);
  background: rgba(61,220,132,.07);
}

.raidw .rw-frei-info {
  font-size: 12.5px; color: var(--dim); line-height: 1.6; margin-bottom: 14px;
  background: linear-gradient(180deg, rgba(61,220,132,.06), transparent);
  border: 1px solid var(--line); border-left: 3px solid var(--green);
  border-radius: 12px; padding: 11px 14px;
}

/* ==========================================================================
   LERNTEIL UND ANIMIERTE DEMOS
   ========================================================================== */
.raidw .rw-lern {
  background: var(--karte); border: 1px solid var(--line); border-left: 3px solid var(--violet);
  border-radius: 14px; margin-bottom: 14px; overflow: hidden;
}
.raidw .rw-lern-kopf {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: none; cursor: pointer; padding: 14px 16px;
  color: var(--txt); font-family: var(--label); font-size: 14px; font-weight: 700;
}
.raidw .rw-lern-kopf .ico { color: var(--violet); font-size: 12px; transition: transform .18s; }
.raidw .rw-lern.offen .rw-lern-kopf .ico { transform: rotate(90deg); }
.raidw .rw-lern-kopf .t { flex: 1; }
.raidw .rw-lern-kopf .s { font-size: 11px; font-weight: 500; color: var(--faint); }
.raidw .rw-lern-body { padding: 0 18px 16px; }
.raidw .rw-lern-body p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.65; color: var(--dim); }

.raidw .rw-merke {
  background: rgba(255,179,71,.08); border: 1px solid rgba(255,179,71,.32);
  border-radius: 11px; padding: 12px 14px; margin: 12px 0 0;
  font-size: 13px; line-height: 1.6; color: var(--txt);
}
.raidw .rw-merke .l {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 6px;
}
.raidw .rw-weg2 { margin-top: 12px; }
.raidw .rw-weg2-t {
  display: none; margin-top: 10px; padding: 11px 14px; border-radius: 10px;
  background: rgba(180,123,255,.08); border: 1px solid rgba(180,123,255,.3);
  font-size: 13px; line-height: 1.6; color: var(--txt);
}
.raidw .rw-weg2-t.show { display: block; }

/* ---------- Demo-Rahmen ---------- */
.raidw .rw-demo {
  background: var(--karte-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px; margin: 6px 0 16px;
}
.raidw .rw-demo-kopf {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.raidw .rw-demo-kopf .t {
  flex: 1; min-width: 180px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}
.raidw .rw-demo-wahl, .raidw .rw-demo-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.raidw .rw-demo-btns { margin-top: 12px; }
.raidw .rw-demo-b {
  background: var(--erhoben); border: 1px solid var(--line); color: var(--dim);
  font-family: var(--label); font-size: 11.5px; font-weight: 600;
  padding: 6px 11px; border-radius: 8px; cursor: pointer;
}
.raidw .rw-demo-b:hover { color: var(--txt); border-color: #3a3a58; }
.raidw .rw-demo-b.on { border-color: var(--amber); color: var(--amber); background: rgba(255,179,71,.12); }
.raidw .rw-demo-text {
  margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: var(--dim);
  min-height: 38px;
}

/* ---------- Schrittsteuerung ---------- */
.raidw .rw-schritt-text {
  margin-top: 12px; background: rgba(61,169,255,.07);
  border: 1px solid rgba(61,169,255,.28); border-radius: 11px; padding: 12px 14px;
  min-height: 62px;
}
.raidw .rw-schritt-text .st {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  color: var(--blue); margin-bottom: 6px;
}
.raidw .rw-schritt-text .tx { font-size: 13px; line-height: 1.65; color: var(--txt); }

.raidw .rw-punkte { display: flex; gap: 6px; justify-content: center; margin: 12px 0 10px; }
.raidw .rw-punkte .pk {
  width: 26px; height: 7px; border-radius: 99px; cursor: pointer;
  background: rgba(255,255,255,.12); border: none; padding: 0;
  transition: background .25s, transform .2s;
}
.raidw .rw-punkte .pk:hover { transform: scaleY(1.6); }
.raidw .rw-punkte .pk.done { background: rgba(61,220,132,.55); }
.raidw .rw-punkte .pk.on { background: var(--blue); transform: scaleY(1.6); }

.raidw .rw-steuer { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.raidw .rw-steuer .rw-demo-b { padding: 8px 16px; font-size: 12px; }
.raidw .rw-steuer .rw-demo-b:disabled { opacity: .3; cursor: default; }
.raidw .rw-steuer .rw-demo-b.vor { border-color: rgba(61,169,255,.45); color: var(--blue); }
.raidw .rw-steuer .rw-demo-b.auto.on { border-color: var(--amber); color: var(--amber); }

/* ---------- SVG-Demo: Grundideen ---------- */
.raidw .rw-demo-buehne { overflow-x: auto; }
.raidw .rw-svg { display: block; width: 100%; height: auto; max-width: 560px; margin: 0 auto; }
.raidw .rw-svg .titel {
  fill: var(--dim); font-family: 'Inter',system-ui,sans-serif; font-size: 13px;
  font-weight: 700; text-anchor: middle;
}
.raidw .rw-svg .titel.rot { fill: var(--red); }
.raidw .rw-svg .rwd-disk .geh {
  fill: rgba(29,29,44,.9); stroke: #3a3a58; stroke-width: 1.5;
  transition: stroke .3s;
}
.raidw .rw-svg .rwd-disk.p0 .geh { stroke: var(--violet); }
.raidw .rw-svg .rwd-disk.p1 .geh { stroke: var(--blue); }
.raidw .rw-svg .rwd-disk.tot .geh { stroke: var(--red); fill: rgba(255,59,92,.10); }
.raidw .rw-svg .kreuz { stroke: var(--red); stroke-width: 2.5; stroke-linecap: round; }
.raidw .rw-svg .lab {
  fill: var(--faint); font-family: 'JetBrains Mono',monospace; font-size: 10px; text-anchor: middle;
}
.raidw .rw-svg .bx {
  fill: rgba(61,169,255,.22); stroke: var(--blue); stroke-width: 1.4;
}
.raidw .rw-svg .bx.par { fill: rgba(255,179,71,.22); stroke: var(--amber); }
.raidw .rw-svg .bx.weg { fill: rgba(255,59,92,.12); stroke: rgba(255,59,92,.5); }
.raidw .rw-svg .bt {
  fill: #fff; font-family: 'JetBrains Mono',monospace; font-size: 11px;
  font-weight: 700; text-anchor: middle;
}
.raidw .rw-svg .bt.weg { fill: rgba(255,125,144,.6); }

/* ---------- Demo: Nutzgrad-Regler ---------- */
.raidw .rw-demo-regler { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.raidw .rw-reg-l {
  font-family: var(--mono); font-size: 12px; color: var(--txt); min-width: 92px;
}
.raidw .rw-range { flex: 1; accent-color: #ffb347; }
.raidw .rw-demo-tab { display: flex; flex-direction: column; gap: 7px; }
.raidw .rw-dz { display: flex; align-items: center; gap: 10px; }
.raidw .rw-dz.aus { opacity: .38; }
.raidw .rw-dz .nm {
  width: 68px; flex: none; font-family: var(--mono); font-size: 11.5px; color: var(--txt);
}
.raidw .rw-dz .bar {
  flex: 1; height: 17px; border-radius: 6px; overflow: hidden;
  background: rgba(255,255,255,.05); border: 1px solid var(--line-soft);
}
.raidw .rw-dz .bar i {
  display: block; height: 100%; border-radius: 6px;
  transition: width .35s cubic-bezier(.2,.8,.2,1);
}
.raidw .rw-dz .bar i.f-blue   { background: linear-gradient(90deg,#2b6fd0,var(--blue)); }
.raidw .rw-dz .bar i.f-green  { background: linear-gradient(90deg,#1f9e63,var(--green)); }
.raidw .rw-dz .bar i.f-amber  { background: linear-gradient(90deg,#d18420,var(--amber)); }
.raidw .rw-dz .bar i.f-violet { background: linear-gradient(90deg,#7c4fd0,var(--violet)); }
.raidw .rw-dz .bar i.f-red    { background: linear-gradient(90deg,#c81e3c,var(--red)); }
.raidw .rw-dz .vl {
  width: 116px; flex: none; text-align: right;
  font-family: var(--mono); font-size: 11px; color: var(--dim);
}
@media (max-width: 560px) {
  .raidw .rw-dz .nm { width: 56px; font-size: 10.5px; }
  .raidw .rw-dz .vl { width: 92px; font-size: 10px; }
}

/* ---------- Demo: XOR-Parity ---------- */
.raidw .rw-par-buehne {
  display: flex; align-items: flex-start; justify-content: center; gap: 8px;
  flex-wrap: wrap; padding: 4px 0;
}
.raidw .rw-par-sp {
  background: var(--erhoben); border: 1px solid var(--line); border-radius: 11px;
  padding: 10px 11px; text-align: center; min-width: 128px;
}
.raidw .rw-par-sp.par { border-color: rgba(255,179,71,.5); background: rgba(255,179,71,.07); }
.raidw .rw-par-sp.tot { border-color: var(--red); background: rgba(255,59,92,.08); }
.raidw .rw-par-sp .kopf {
  font-family: var(--mono); font-size: 10.5px; color: var(--faint); margin-bottom: 8px;
}
.raidw .rw-par-sp.par .kopf { color: var(--amber); }
.raidw .rw-par-sp.tot .kopf { color: var(--red); }
.raidw .rw-bits { display: flex; gap: 4px; justify-content: center; }
.raidw .rw-bits .bit {
  width: 24px; height: 30px; display: grid; place-items: center; border-radius: 6px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: 14px; color: var(--txt);
  transition: background .3s, border-color .3s, color .3s, transform .3s;
}
.raidw .rw-bits.parity .bit { border-color: rgba(255,179,71,.4); color: var(--amber); }
.raidw .rw-bits.wieder .bit { color: var(--faint); }
.raidw .rw-bits.wieder .bit.neu {
  background: rgba(61,220,132,.16); border-color: var(--green); color: var(--green);
}
.raidw .rw-bits.wieder .bit.aktiv {
  background: rgba(255,179,71,.2); border-color: var(--amber); color: var(--amber);
  transform: translateY(-3px) scale(1.08);
}
.raidw .rw-par-sp .zst { font-size: 10px; color: var(--faint); margin-top: 8px; }
.raidw .rw-par-sp.tot .zst { color: var(--red); }
.raidw .rw-par-sp .kill {
  margin-top: 8px; width: 100%; background: transparent; border: 1px solid var(--line);
  color: var(--faint); font-size: 10.5px; padding: 5px; border-radius: 7px; cursor: pointer;
}
.raidw .rw-par-sp .kill:hover { border-color: var(--red); color: var(--red); }
.raidw .rw-par-op {
  align-self: center; font-family: var(--mono); font-size: 17px; color: var(--faint);
  padding: 0 2px; margin-top: 22px;
}
@media (max-width: 620px) {
  .raidw .rw-par-sp { min-width: 108px; padding: 9px 7px; }
  .raidw .rw-bits .bit { width: 20px; height: 26px; font-size: 12px; }
  .raidw .rw-par-op { margin-top: 18px; font-size: 14px; }
}

/* ---------- Demo: Sicherungswoche ---------- */
.raidw .rw-bk-buehne { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.raidw .rw-bk-tag {
  background: var(--erhoben); border: 1px solid var(--line-soft); border-radius: 10px;
  padding: 8px 4px; text-align: center; transition: border-color .3s, background .3s;
}
.raidw .rw-bk-tag .tg { font-family: var(--mono); font-size: 10px; color: var(--faint); }
.raidw .rw-bk-tag .saeule {
  height: 62px; margin: 7px auto 5px; width: 22px; display: flex; align-items: flex-end;
  background: rgba(255,255,255,.04); border-radius: 4px; overflow: hidden;
}
.raidw .rw-bk-tag .saeule i {
  display: block; width: 100%; border-radius: 4px;
  transition: height .45s cubic-bezier(.2,.8,.2,1);
}
.raidw .rw-bk-tag .saeule i.voll { background: linear-gradient(180deg,var(--blue),#2b6fd0); }
.raidw .rw-bk-tag .saeule i.diff { background: linear-gradient(180deg,var(--amber),#d18420); }
.raidw .rw-bk-tag .saeule i.inkr { background: linear-gradient(180deg,var(--green),#1f9e63); }
.raidw .rw-bk-tag .mg { font-family: var(--mono); font-size: 9.5px; color: var(--dim); }
.raidw .rw-bk-tag.noetig {
  border-color: var(--green); background: rgba(61,220,132,.08);
}
@media (max-width: 560px) {
  .raidw .rw-bk-buehne { grid-template-columns: repeat(7, 1fr); gap: 3px; }
  .raidw .rw-bk-tag { padding: 6px 2px; }
  .raidw .rw-bk-tag .saeule { width: 14px; height: 48px; }
  .raidw .rw-bk-tag .mg { font-size: 8px; }
}

/* ---------- Parity-Demo: neue Bit-Zustaende ---------- */
.raidw .rw-par-sp.neu { border-color: var(--green); background: rgba(61,220,132,.08); }
.raidw .rw-par-sp.neu .kopf { color: var(--green); }
.raidw .rw-par-sp.quelle { box-shadow: 0 0 0 2px rgba(255,179,71,.35); }
.raidw .rw-bits .bit.leer { color: var(--faint); opacity: .55; }
.raidw .rw-bits .bit.benutzt {
  background: rgba(61,169,255,.14); border-color: rgba(61,169,255,.45); color: var(--blue);
}
.raidw .rw-bits .bit.gesetzt {
  background: rgba(255,179,71,.14); border-color: rgba(255,179,71,.5); color: var(--amber);
}
.raidw .rw-bits .bit.zurueck,
.raidw .rw-bits .bit.neu {
  background: rgba(61,220,132,.16); border-color: var(--green); color: var(--green);
}
.raidw .rw-bits .bit.aktiv {
  background: rgba(255,179,71,.24); border-color: var(--amber); color: var(--amber);
  transform: translateY(-4px) scale(1.12);
  box-shadow: 0 6px 14px -6px rgba(255,179,71,.7);
}
.raidw .rw-degradiert {
  width: 100%; margin-top: 14px; text-align: center;
  background: rgba(255,179,71,.09); border: 1px solid rgba(255,179,71,.42);
  border-radius: 10px; padding: 9px 12px; font-size: 12px; color: var(--amber);
}
.raidw .rw-rebuild { width: 100%; margin-top: 14px; }
.raidw .rw-rebuild .l { font-size: 11.5px; color: var(--green); margin-bottom: 6px; text-align: center; }
.raidw .rw-rebuild .bar {
  height: 10px; border-radius: 99px; background: rgba(255,255,255,.06);
  border: 1px solid var(--line-soft); overflow: hidden;
}
.raidw .rw-rebuild .bar i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #1f9e63, var(--green));
  transition: width .8s cubic-bezier(.2,.8,.2,1);
}

/* ---------- Sicherungswoche ---------- */
.raidw .rw-bk-inner { margin-top: 4px; }
.raidw .rw-bk-inner .rw-demo {
  background: transparent; border: none; padding: 0; margin: 0;
}
.raidw .rw-bk-inner .rw-demo-kopf { margin-bottom: 10px; }
.raidw .rw-bk-tag.heute { border-color: var(--blue); }
.raidw .rw-bk-summe {
  margin-top: 12px; text-align: center; font-size: 12.5px; color: var(--dim);
}
.raidw .rw-bk-summe b {
  font-family: var(--mono); font-size: 15px; color: var(--green); margin-right: 4px;
}

/* ---------- Aufgabenhilfen ---------- */
.raidw .rw-hilfe { margin-top: 4px; }
.raidw .rw-hilfe-t {
  display: none; margin-top: 12px; padding: 11px 14px; border-radius: 10px;
  background: rgba(61,169,255,.08); border: 1px solid rgba(61,169,255,.32);
  font-size: 12.5px; line-height: 1.6; color: var(--txt);
}
.raidw .rw-hilfe-t.show { display: block; }
.raidw .rw-hilfe-fest {
  margin-bottom: 12px; padding: 10px 13px; border-radius: 10px;
  background: rgba(61,169,255,.07); border-left: 3px solid rgba(61,169,255,.5);
  font-size: 12.5px; line-height: 1.6; color: var(--dim);
}

/* Punktzahl der Aufgabe, wenn nur noch der Wiederholungsbonus zu holen ist */
.raidw .rw-k-xp { transition: color .2s, border-color .2s; }