/* Zentrale Farben – CI hier anpassen */
:root {
  --stats-bg:      #3E7D3A;    /* Hauptgrün */
  --stats-offset:  #6E9F4C;    /* helleres Grün (Versatz) */
  --stats-accent:  #FFD166;    /* Suffix-Farbe */
  --stats-title:   #BFE3A7;    /* Titel */
  --stats-text:    #E7F4DF;    /* Text */
  --stats-divider: #444C4F;

  /* Geometrie */
  --stat-radius:   18px;
  /* Versatz dynamisch skalieren: min 8px, typ 12px, max 16px, abhängig von Viewport */
  --stat-offset:   clamp(8px, 1.2vw, 16px);
}

/* Wrapper (Bootstrap kümmert sich um Grid) */
.isa-stats-kacheln { }

/* Divider (eigene Spalte; via d-none d-md-flex im Markup gesteuert) */
.isa-stats-kacheln .stats-divider {
  display: inline-block;
  width: 6px;
  height: 90px;
  background: var(--stats-divider);
  border-radius: 1px;
}

/* === Karte === */
.isa-stats-kacheln .stat-card {
  position: relative;       /* Bezug für den Schatten-Layer */
  width: 100%;
  max-width: 560px;         /* optional: begrenzen, damit sie nicht zu breit wird */
  margin-inline: auto;
  /* KEIN aspect-ratio mehr – Höhe folgt dem Inhalt */
}

/* WICHTIG: Nur der Schatten-Layer ist absolut */
.isa-stats-kacheln .stat-card__layer--shadow {
  position: absolute;
  inset: 0;
  border-radius: var(--stat-radius);
  background: var(--stats-offset);
  transform: translate(var(--stat-offset), var(--stat-offset));
  z-index: 0;
}

/* Body-Layer bestimmt die Höhe (im normalen Flow) */
.isa-stats-kacheln .stat-card__layer--body {
  position: relative;        /* bleibt im Flow, legt die Höhe fest */
  background: var(--stats-bg);
  color: #fff;
  padding: clamp(16px, 2vw, 24px);
  border-radius: var(--stat-radius);
  z-index: 1;                /* über dem Schatten */
  display: grid;
  align-content: start;
  gap: 8px;
}

/* Typo */
.isa-stats-kacheln .stat-card__value {
  font-weight: 800;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
  margin-bottom: .5rem;
}

.isa-stats-kacheln .stat-card__suffix { 
  color: var(--stats-accent); 
}

.isa-stats-kacheln .stat-card__title  {
  font-size: clamp(14px, 1.3vw, 16px);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--stats-title);
  margin-bottom: .5rem;
}
.isa-stats-kacheln .stat-card__text   { font-size: clamp(12px, 1.1vw, 14px); color: var(--stats-text); margin: 0; }

/* Mobile Tweaks (optional dezenter Versatz) */
@media (max-width: 575.98px) {
  :root { --stat-offset: clamp(6px, 2.5vw, 12px); } /* etwas kleiner auf xs */
}

/* Größere Screens – optional die max Breite reduzieren */
@media (min-width: 1200px) {
  .isa-stats-kacheln .stat-card { max-width: 420px; }
}

.isa-stats-kacheln .stat-card__value {
  font-family: 'Finlandica Bold', sans-serif;
  font-weight: bold;
}