/* =====================================================================
   mod_fftstatistik — Jahresstatistik als Kachelraster
   Freiwillige Feuerwehr der Stadt Traun

   Eigenstaendig: die CD-Farben werden aus user.css uebernommen, wenn es
   sie dort gibt, sonst greifen die Ersatzwerte. So bleibt das Modul auch
   dann brauchbar, wenn es einmal in einer anderen Vorlage steckt.

   Farbwahl ist nachgerechnet: #CF4128 liegt auf der Kartenflaeche #f2f2f2
   bei 4,23:1 und faellt damit fuer normale Textgroesse durch WCAG AA.
   Deshalb tragen Leitzahl und Symbole #A5331F (6,06:1), Beschriftungen
   #394348 (9,06:1).
   ===================================================================== */

.fft-stat{
  --fft-stat-rot:      var(--cd-red,    #CF4128);
  --fft-stat-rot-d:    var(--cd-red-d,  #A5331F);
  --fft-stat-karte:    var(--cd-card,   #f2f2f2);
  --fft-stat-ink:      #1c1c1c;
  --fft-stat-ink-2:    #394348;
  --fft-stat-abstand:  .75rem;

  margin: 2.5rem 0 1rem;
}

/* ---------- Kopfzeile ---------- */

.fft-stat__kopf{
  display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
  margin: 0 0 1.1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--fft-stat-rot);
}
.fft-stat__titel{
  margin: 0;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 700; letter-spacing: .01em;
  color: var(--fft-stat-ink);
}
.fft-stat__jahr{
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 700;
  color: var(--fft-stat-rot-d);
}

/* ---------- Raster ---------- */

.fft-stat__gitter{
  display: grid;
  gap: var(--fft-stat-abstand);
  margin: 0; padding: 0; list-style: none;
}
.fft-stat--sp3 .fft-stat__gitter{ grid-template-columns: repeat(3, 1fr); }
.fft-stat--sp4 .fft-stat__gitter{ grid-template-columns: repeat(4, 1fr); }
.fft-stat--sp5 .fft-stat__gitter{ grid-template-columns: repeat(5, 1fr); }

@media (max-width: 1000px){
  .fft-stat--sp4 .fft-stat__gitter,
  .fft-stat--sp5 .fft-stat__gitter{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 780px){
  .fft-stat__gitter{ grid-template-columns: repeat(2, 1fr) !important; }
}
/* Am Handy bewusst zweispaltig bleiben: dreizehn gestapelte Kacheln
   waeren mehrere Bildschirmhoehen Scrollweg fuer dreizehn Zahlen. */
@media (max-width: 520px){
  .fft-stat{ --fft-stat-abstand: .45rem; }
}
@media (max-width: 340px){
  .fft-stat__gitter{ grid-template-columns: 1fr !important; }
}

/* ---------- Kachel ---------- */

.fft-stat__kachel{
  display: flex; align-items: center; gap: .85rem;
  min-height: 6.2rem;
  padding: 1rem 1.1rem;
  background: var(--fft-stat-karte);
  border-radius: 4px;
}

/* Breite Kacheln fuellen zwei Spalten. Damit geht eine Zahl auf, die
   sonst nicht ins Raster passt: dreizehn Kacheln in vier Spalten laesst
   eine Reihe halb leer — drei davon breit ergibt vier volle Reihen.
   Die Leitzahl ist immer breit, sie traegt die Kopfzeile des Rasters. */
.fft-stat__kachel--breit,
.fft-stat__kachel--leit{ grid-column: span 2; }
/* Inhalt in der breiten Kachel mittig, sonst klafft rechts eine leere
   Haelfte und die Kachel sieht aus wie ein Fehler statt wie Absicht. */
.fft-stat__kachel--breit,
.fft-stat__kachel--leit{ justify-content: center; }
@media (max-width: 780px){
  /* Ab zwei Spalten wird die breite Kachel wieder normal breit: sonst
     fuellt sie die ganze Zeile und laesst rechts eine leere Haelfte. */
  .fft-stat__kachel--breit,
  .fft-stat__kachel--leit{ grid-column: span 1; justify-content: flex-start; }
}
@media (max-width: 340px){
  .fft-stat__kachel--breit,
  .fft-stat__kachel--leit{ grid-column: span 1; }
}

.fft-stat__symbolfeld{
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 2.7rem; height: 2.7rem;
  border-radius: 50%;
  background: #fff;
  color: var(--fft-stat-rot-d);
}
.fft-stat__symbol{ display: block; }

.fft-stat__text{ display: flex; flex-direction: column; gap: .2rem; min-width: 0; }

/* ---------- Symbol gross im Hintergrund ----------
   Das Motiv sitzt angeschnitten in der rechten unteren Ecke und bleibt
   deutlich unter der Schrift. Die Deckkraft ist so gewaehlt, dass der
   Kontrast der Beschriftung nicht darunter leidet: #CF4128 mit 10 % auf
   der Kartenflaeche ergibt rund #eee0de, darauf steht #394348 noch bei
   etwa 8:1 — WCAG AA gilt also auch mitten im Symbol. Trotzdem liegt
   der Text zusaetzlich vorne, damit nichts durchscheint. */
.fft-stat--sym-hg .fft-stat__kachel{
  position: relative;
  overflow: hidden;
}
.fft-stat--sym-hg .fft-stat__symbolfeld{
  position: absolute;
  right: -.6rem; bottom: -.9rem;
  width: auto; height: auto;
  background: none;
  border-radius: 0;
  color: var(--fft-stat-rot);
  opacity: .12;
  pointer-events: none;
}
.fft-stat--sym-hg .fft-stat__symbol{
  width: 6.4rem; height: 6.4rem;
}
.fft-stat--sym-hg .fft-stat__text{
  position: relative; z-index: 1;
}
.fft-stat--sym-hg .fft-stat__kachel--leit .fft-stat__symbol,
.fft-stat--sym-hg .fft-stat__kachel--breit .fft-stat__symbol{
  width: 8rem; height: 8rem;
}
.fft-stat--sym-hg .fft-stat__kachel--leit .fft-stat__symbolfeld{
  opacity: .16;
}
/* Bei mittigem Inhalt der breiten Kacheln das Motiv mittig dahinter,
   sonst haengt es weit ab vom Text in der Ecke. */
.fft-stat--sym-hg .fft-stat__kachel--breit,
.fft-stat--sym-hg .fft-stat__kachel--leit{ justify-content: center; }

@media (max-width: 520px){
  .fft-stat--sym-hg .fft-stat__symbol{ width: 4.4rem; height: 4.4rem; }
  .fft-stat--sym-hg .fft-stat__kachel--leit .fft-stat__symbol,
  .fft-stat--sym-hg .fft-stat__kachel--breit .fft-stat__symbol{ width: 5rem; height: 5rem; }
}

.fft-stat__wert{
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  font-weight: 600; line-height: 1;
  color: var(--fft-stat-ink);
}
.fft-stat__label{
  font-size: .92rem; line-height: 1.25;
  color: var(--fft-stat-ink-2);
}

/* ---------- genau eine Leitzahl ---------- */

.fft-stat__kachel--leit{
  background: #fdf1ef;
  box-shadow: inset 3px 0 0 var(--fft-stat-rot);
}
.fft-stat__kachel--leit .fft-stat__wert{
  font-size: clamp(2.1rem, 4.4vw, 2.9rem);
  color: var(--fft-stat-rot-d);
}
.fft-stat:not(.fft-stat--sym-hg) .fft-stat__kachel--leit .fft-stat__symbolfeld{
  width: 3.1rem; height: 3.1rem;
  color: var(--fft-stat-rot);
}

@media (max-width: 520px){
  .fft-stat__kachel{ min-height: 5rem; padding: .75rem .8rem; gap: .6rem; }
  .fft-stat:not(.fft-stat--sym-hg) .fft-stat__symbolfeld,
  .fft-stat:not(.fft-stat--sym-hg) .fft-stat__kachel--leit .fft-stat__symbolfeld{ width: 2.1rem; height: 2.1rem; }
  .fft-stat:not(.fft-stat--sym-hg) .fft-stat__symbol{ width: 20px; height: 20px; }
  .fft-stat__wert{ font-size: 1.5rem; }
  .fft-stat__kachel--leit .fft-stat__wert{ font-size: 1.7rem; }
  .fft-stat__label{ font-size: .78rem; }
}

/* =====================================================================
   Bewegung
   ===================================================================== */

/* Waehrend des Hochzaehlens feste Ziffernbreite, sonst zappelt die Kachel.
   Danach wieder Proportionalziffern — die stehen bei grossen Zahlen ruhiger. */
.fft-stat--laeuft .fft-stat__wert{ font-variant-numeric: tabular-nums; }

/* Die Kacheln ziehen gestaffelt auf. Greift nur, wenn das Script die
   Klasse setzt — ohne JavaScript stehen sie schlicht und lesbar da. */
.fft-stat--sichtbar .fft-stat__kachel{
  animation: fft-stat-auf .55s cubic-bezier(.22,.61,.36,1) backwards;
  animation-delay: calc(var(--fft-i, 0) * .045s);
}
.fft-stat--sichtbar .fft-stat__symbolfeld{
  animation: fft-stat-symbol .5s cubic-bezier(.34,1.56,.64,1) backwards;
  animation-delay: calc(var(--fft-i, 0) * .045s + .12s);
}

@keyframes fft-stat-auf{
  from{ opacity: 0; transform: translateY(12px); }
  to  { opacity: 1; transform: none; }
}
@keyframes fft-stat-symbol{
  from{ opacity: 0; transform: scale(.55); }
  to  { opacity: 1; transform: none; }
}

/* Wer Bewegung abbestellt hat, bekommt alles sofort und unbewegt. */
@media (prefers-reduced-motion: reduce){
  .fft-stat--sichtbar .fft-stat__kachel,
  .fft-stat--sichtbar .fft-stat__symbolfeld{ animation: none; }
  .fft-stat--laeuft .fft-stat__wert{ font-variant-numeric: normal; }
}