/* =============================================================================
   Schuldenuhr der Stadt Selm (v1.25.0)

   Eigene kleine Datei UEBER design.css (Regel im Kopf von design.css:
   Domain-Spezifisches in eigene Dateien, Tokens nicht duplizieren). Geladen
   wird sie nur, wenn die Sektion auf der Seite steht (renderOnepager →
   $zusatzStylesheets in views/layout/head.php). Alle Klassen tragen das
   Praefix `su` bzw. `su-d` (Diagramm) – keine Ueberschneidung mit design.css.

   Gestalt: vollflaechiger Farbblock in Rhoendorf (wie die fruehere
   Schuldenuhr und die Baender), darin ein schwarzes Gehaeuse mit roter
   Punktmatrix. Das Gehaeuse hat als einzige Flaeche der Website leicht
   gerundete Ecken: Es stellt ein GERAET dar (LED-Anzeige), keine
   Bedienflaeche – fuer die gilt weiter --r: 0.

   Ohne JavaScript zeigt .su__ziffern den Stand in roten Tabellenziffern;
   schuldenuhr.js setzt .su--js und ersetzt die Ziffern durch ein Canvas.
   ============================================================================= */

.su{
  --su-schwarz:#0a0a0a;
  --su-rot:#ff3b2f;            /* leuchtender Punkt */
  --su-rot-aus:#2c0b09;        /* unbeleuchteter Punkt */
  --su-rot-text:#ff4a3d;       /* Ziffern ohne Skript: 5,6:1 auf Schwarz */
  --su-inv:rgba(45,60,75,.42); /* Rhoendorf-Ton im Diagramm */
  --su-inv-linie:#2d3c4b;
  --su-liq:#d0342a;            /* Rot im Diagramm, passend zur Matrix */
  position:relative;
  padding-block:var(--sec-pad);
  background:var(--rhoendorf);
  color:var(--on-dark);
}
.su .h-section{color:var(--on-dark);}
.su__kopf{border-bottom-color:rgba(255,255,255,.18);}

/* --- Gehaeuse und Hauptanzeige --------------------------------------------- */
.su__gehaeuse{
  background:var(--su-schwarz);
  border-radius:6px;
  border:1px solid #1d1d1d;
  box-shadow:inset 0 2px 14px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.03),0 10px 30px rgba(0,0,0,.25);
  padding:clamp(.6rem,1.6vw,1.1rem) clamp(.6rem,1.6vw,1.2rem);
  width:fit-content;max-width:100%;   /* so breit wie die Anzeige, nicht wie die Seite */
  margin-inline:auto;                  /* mittig (Entscheid 06.10.2026) */
}
.su__anzeige{position:relative;min-height:2.6rem;}
.su__anzeige canvas{display:block;max-width:100%;}
/* Ohne Skript: rote Tabellenziffern. Mit Skript (.su--js) ersetzt das Canvas sie. */
.su__ziffern{
  margin:0;text-align:right;white-space:nowrap;
  font-family:var(--font-ui);font-weight:700;font-variant-numeric:tabular-nums;
  font-size:clamp(1.35rem,5vw,2.6rem);line-height:1.1;letter-spacing:.02em;
  color:var(--su-rot-text);text-shadow:0 0 12px rgba(255,59,47,.55);
}
.su--js .su__ziffern{display:none;}
.su--js .su__anzeige{min-height:0;}

.su__aufteilung{
  margin:var(--s4) 0 0;font-family:var(--font-ui);font-size:var(--fs-small);line-height:1.6;
  color:var(--on-dark-muted);text-align:center;
}
.su__betrag{color:var(--on-dark);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;}

/* --- Sternchen (v1.32.0): kein Stichtag in der Zukunft -------------------- */
/* Ohne Skript hochgestellt hinter den Ziffern; mit Skript zeichnet die Matrix
   das Sternchen selbst (Glyphe '*' in schuldenuhr.js). */
.su__stern{font-size:.55em;vertical-align:.7em;margin-left:.08em;}
/* Dezent unter der Aufteilung, gleiche Schrift und Farbe wie diese. */
.su__stern-hinweis{
  margin:var(--s2) auto 0;max-width:60ch;font-family:var(--font-ui);font-size:var(--fs-small);line-height:1.6;
  color:var(--on-dark-muted);text-align:center;overflow-wrap:anywhere;
}

/* --- Veraenderung ---------------------------------------------------------- */
.su__kacheln{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);
  margin-top:var(--s8);
}
@media (max-width:900px){ .su__kacheln{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:420px){ .su__kacheln{grid-template-columns:minmax(0,1fr);} }
.su__kachel{
  border:1px solid rgba(255,255,255,.18);border-radius:var(--r);
  padding:var(--s4) var(--s5);display:flex;flex-direction:column;justify-content:space-between;gap:var(--s3);
  min-width:0;align-items:center;text-align:center;
}
.su__kachel-k{
  margin:0;font-family:var(--font-ui);font-size:var(--fs-label);font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--on-dark-muted);
}
.su__kachel-v{
  margin:0;font-family:var(--font-ui);font-weight:700;font-variant-numeric:tabular-nums;
  font-size:clamp(1.25rem,2.3vw,1.85rem);line-height:1.1;letter-spacing:-.01em;color:var(--on-dark);
  white-space:nowrap;
}

/* Gestaffeltes Einblenden der Kacheln beim ersten Sichtbarwerden (nur mit
   Skript; ohne Skript und bei reduzierter Bewegung stehen sie sofort da). */
.su--js .su__kachel{opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);}
.su--an .su__kachel{opacity:1;transform:none;}
.su--an .su__kachel:nth-child(2){transition-delay:.12s;}
.su--an .su__kachel:nth-child(3){transition-delay:.24s;}
.su--an .su__kachel:nth-child(4){transition-delay:.36s;}

.su__fuss{
  margin:var(--s6) 0 0;max-width:80ch;font-size:var(--fs-small);line-height:1.6;color:var(--on-dark-muted);
}

/* --- Aufklapper „Verlauf anzeigen" ---------------------------------------- */
.su__verlauf-knopf{display:flex;margin:var(--s6) auto 0;}   /* mittig unter den Kacheln */
.su__pfeil{transform:rotate(90deg);transition:transform .3s var(--ease);}
.su__verlauf-knopf[aria-expanded="true"] .su__pfeil{transform:rotate(-90deg);}
.su__verlauf{overflow:hidden;transition:height .38s var(--ease);}
.su__verlauf-innen{
  margin-top:var(--s5);background:var(--grund);color:var(--ink);
  padding:clamp(.9rem,2.2vw,1.6rem);
}
.su__zeitraum{margin-bottom:var(--s4);}
.su__zeitraum .chip[disabled]{opacity:.38;cursor:not-allowed;}
.su__zeitraum .chip[disabled]:hover{border-color:var(--linie);color:var(--ink-muted);}

/* --- Diagramm (Inline-SVG aus schuldenuhr.js) ------------------------------ */
.su-d{position:relative;outline-offset:4px;}
.su-d svg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--font-ui);}
.su-d__raster line{stroke:var(--linie);stroke-width:1;}
.su-d__achse text{fill:var(--ink-muted);font-size:11px;font-variant-numeric:tabular-nums;}
.su-d__achse line{stroke:var(--linie-stark);}
.su-d__inv{fill:var(--su-inv);}
.su-d__liq{fill:var(--su-liq);fill-opacity:.82;}
.su-d__plan .su-d__inv,.su-d__plan .su-d__liq{fill-opacity:.38;}
.su-d__schraffur{fill:url(#su-d-schraffur);}
.su-d__schraffur-linie{stroke:rgba(255,255,255,.75);stroke-width:1.4;}
.su-d__summe{fill:none;stroke:var(--su-liq);stroke-width:2;stroke-linejoin:round;}
.su-d__summe--plan{stroke-dasharray:5 4;}
.su-d__punkt{fill:var(--grund);stroke:var(--su-liq);stroke-width:2;}
.su-d__heute line{stroke:var(--ink);stroke-width:1.25;stroke-dasharray:2 3;}
.su-d__heute circle{fill:var(--su-liq);stroke:var(--grund);stroke-width:2;}
.su-d__heute text{fill:var(--ink);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;}
.su-d__heute-hg{fill:var(--grund);fill-opacity:.88;}
.su-d__kreuz line{stroke:var(--ink);stroke-width:1;}
.su-d__kreuz circle{fill:var(--ink);stroke:var(--grund);stroke-width:2;}
.su-d__tip{
  position:absolute;z-index:2;pointer-events:none;min-width:12.5rem;
  background:var(--rhoendorf);color:var(--on-dark);padding:.6rem .75rem;
  font-family:var(--font-ui);font-size:.8rem;line-height:1.45;box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.su-d__tip b{font-weight:700;}
.su-d__tip dl{display:grid;grid-template-columns:auto auto;gap:0 .9rem;margin:.3rem 0 0;}
.su-d__tip dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;}
.su-d__tip-art{color:var(--on-dark-muted);font-size:.74rem;margin-top:.3rem;}
.su-d:focus-visible{outline:2px solid var(--ink);}

.su-d__legende{
  display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;list-style:none;margin:var(--s4) 0 0;padding:0;
  font-family:var(--font-ui);font-size:var(--fs-small);color:var(--ink-muted);
}
.su-d__legende li{display:inline-flex;align-items:center;gap:.45rem;}
.su-d__muster{display:inline-block;width:14px;height:10px;}
.su-d__muster--inv{background:var(--su-inv);}
.su-d__muster--liq{background:var(--su-liq);opacity:.82;}
.su-d__muster--plan{
  background:repeating-linear-gradient(135deg,rgba(208,52,42,.38) 0 3px,rgba(255,255,255,.9) 3px 5px);
  border-top:2px dashed var(--su-liq);
}
.su-d__muster--heute{width:2px;height:14px;background:var(--ink);}

@media (prefers-reduced-motion:reduce){
  .su--js .su__kachel{opacity:1;transform:none;transition:none;}
  .su__verlauf,.su__pfeil{transition:none;}
}