/* ------------------------------------- Seite /soziales-entscheiden (sen-) */
/* Nur für landing/seiten/soziales-entscheiden.mjs. Farben über die Ratgeber-
   Variablen (--r-…, --akzent), damit der Dunkelmodus mitläuft. Der Trainer
   selbst nutzt se- (landing/css/soziales-entscheiden.css). */

.r-band .sen-mitte { text-align: center; max-width: 680px; margin-left: auto; margin-right: auto; }

.sen-bildtitel, .r-band p.sen-bildtitel { display: block; margin: 0 0 14px; font: 700 12px/1.2 "Work Sans", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--r-leise); }

/* Rangfarben: Rang 1 kräftig, Rang 5 blass — Pyramide und Rang-Kreise gleich */
.sen-r1 { --sen-f: var(--akzent); --sen-t: #fff; }
.sen-r2 { --sen-f: color-mix(in srgb, var(--akzent) 76%, var(--r-weiss)); --sen-t: #fff; }
.sen-r3 { --sen-f: color-mix(in srgb, var(--akzent) 52%, var(--r-weiss)); --sen-t: var(--r-kopf); }
.sen-r4 { --sen-f: color-mix(in srgb, var(--akzent) 32%, var(--r-weiss)); --sen-t: var(--r-kopf); }
.sen-r5 { --sen-f: color-mix(in srgb, var(--akzent) 17%, var(--r-weiss)); --sen-t: var(--r-kopf); }
@media (prefers-color-scheme: dark) {
  .sen-r1, .sen-r2 { --sen-t: #1b1815; }
}
.sen-rang { flex: none; width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--sen-f); color: var(--sen-t); font: 800 14px/1 "Manrope", sans-serif; font-variant-numeric: tabular-nums; }
.sen-r5.sen-rang, .sen-r4.sen-rang { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--akzent) 40%, transparent); }

/* Testblatt: Situation, Frage, fünf Überlegungen (immer hell wie Papier) */
.r-band .sen-tb .sen-tb-sit { margin: 0 0 14px; font: 400 16.5px/1.65 "Work Sans", sans-serif; color: #1d1916; }
.r-band .sen-tb .sen-tb-frage { margin: 0 0 16px; font: 600 15px/1.5 "Work Sans", sans-serif; color: #1d1916; }
.sen-tb-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.r-band .sen-tb-liste li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border: 1px solid #d9d0c4; border-radius: 4px; font: 400 15.5px/1.5 "Work Sans", sans-serif; color: #1d1916; }
.r-band .sen-tb-liste li b { flex: none; width: 22px; font: 700 15px/1.5 "Work Sans", sans-serif; color: #776c61; }

/* Lösung als Rangliste */
.sen-loesung { margin-bottom: 26px; }
.sen-reihe { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.r-band .sen-reihe li { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 16.5px; line-height: 1.5; }
.r-band .sen-reihe .sen-bu { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--r-hell); font: 700 14px/1 "Work Sans", sans-serif; color: var(--r-kopf); }
.weiss .sen-reihe .sen-bu { background: var(--r-weiss); }

/* Antwortbogen-Raster (Papier: immer hell, blaue Kreuze wie die Kugelschreiber am Testtag) */
.sen-bogen { margin: 26px 0 26px; padding: 26px 28px; border-radius: 22px; background: var(--r-weiss); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: center; }
.sen-raster { display: grid; grid-template-columns: 26px repeat(5, 36px); gap: 6px; padding: 16px 18px; border-radius: 6px; background: #fff; box-shadow: 0 1px 0 #e3dbd0, 0 18px 40px -28px rgba(60, 45, 30, 0.45); }
.sen-raster > span { display: grid; place-items: center; height: 36px; font: 700 13px/1 "Work Sans", sans-serif; color: #776c61; }
.sen-raster .sen-z { color: #1d1916; font-size: 14px; }
.sen-raster .sen-box { border: 1.5px solid #b9aea2; border-radius: 4px; background: #fff; }
.sen-raster .sen-box svg { width: 24px; height: 24px; fill: none; stroke: #2c4ba0; stroke-width: 2.4; stroke-linecap: round; }

.sen-raster.klein { grid-template-columns: 20px repeat(5, 26px); gap: 4px; padding: 12px 14px; }
.sen-raster.klein > span { height: 26px; font-size: 12px; }
.sen-raster.klein .sen-box svg { width: 18px; height: 18px; }
.sen-bogen figcaption .sen-bildtitel { margin-bottom: 12px; }
.sen-legende { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.r-band .sen-legende li { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; margin: 0; font-size: 16.5px; line-height: 1.45; }
.r-band .sen-legende b { font: 700 13px/1.75 "Work Sans", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--akzent-tief); }

/* Zwei Fehler-Bögen: Raster oben, Text darunter */

/* Pyramide: schmale Spitze = Rang 1. --o/--u: Einzug oben/unten in % */

/* Fallen-Karten */

/* Teilpunkte als Balken */

@media (max-width: 760px) {
  .sen-bogen { grid-template-columns: 1fr; gap: 20px; padding: 22px 18px; justify-items: center; }
  .sen-bogen figcaption { justify-self: stretch; }
  .sen-raster { grid-template-columns: 22px repeat(5, 32px); gap: 5px; padding: 14px; }
  .sen-raster > span { height: 32px; }
  .sen-raster .sen-box svg { width: 21px; height: 21px; }
  
  
  
  .sen-raster.klein { grid-template-columns: 16px repeat(5, 22px); gap: 3px; padding: 10px; }
  .sen-raster.klein > span { height: 22px; font-size: 11px; }
  .sen-raster.klein .sen-box svg { width: 15px; height: 15px; }
  .r-band .sen-reihe li { gap: 10px; font-size: 15.5px; }
  .r-band .sen-reihe .sen-bu, .sen-reihe .sen-rang { width: 26px; height: 26px; font-size: 13px; }
  .sen-loesung { padding: 20px 16px 16px; }
  
  
  
  
  
  
  
  
  
  
  
  
  
  .r-band .sen-tb-liste li { font-size: 15px; padding: 9px 10px; gap: 10px; }
  .r-band .sen-tb .sen-tb-sit { font-size: 16px; }
}