/* Leerbilder - Layout, Abstaende und das sanfte Auftauchen.

   Farben kommen ausschliesslich aus den Tokens in styles.css: die Zeichnung
   liegt auf einem ruhigen Grauton (--text-muted), der eine Akzent auf der
   Marke (--accent-fg). Dadurch stimmt jedes Bild im hellen wie im dunklen
   Erscheinungsbild ohne zweite Fassung - das Umschalten des Themas regelt
   allein styles.css.

   Diese Datei aendert NICHTS Bestehendes; alle Selektoren beginnen mit
   .leerbild und stehen fuer sich. */

.leerbild {
  /* Zentriert, mit Luft, aber nicht ueber die ganze Breite - ein langer Satz
     ueber den halben Bildschirm liest sich schlechter als ein ruhiger Block. */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .5rem;
  max-width: 30rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 2.75rem) 1rem;
  color: var(--text-secondary);
  /* Kein Federn, kurze ruhige Kurve - dieselbe wie ueberall in der Anwendung.
     Die Fallback-Werte greifen nur, falls dieses CSS einmal ohne styles.css
     geladen wuerde; im Normalfall kommen Dauer und Kurve aus den Tokens. */
  animation: leerbild-auftauchen var(--dur-ruhig, 280ms) var(--easing, ease-out) both;
}

.leerbild-svg {
  /* Zwischen Handy und Schreibtisch mitwachsend, aber gedeckelt: ein Leerbild
     soll fuehren, nicht die Ansicht fuellen. */
  width: clamp(88px, 26vw, 116px);
  height: auto;
  margin-bottom: .25rem;
  /* currentColor der Zeichnung: ein zurueckhaltender Grauton, damit die
     Haarlinien tragen, ohne zu draengen. */
  color: var(--text-muted);
}

/* Der eine Markenakzent je Bild. */
.leerbild-svg .akz {
  stroke: var(--accent-fg);
}

/* Umgebung und Nebensachen treten zurueck - eine Abstufung, mehr nicht. */
.leerbild-svg .sub {
  opacity: .42;
}

/* Die einzige erlaubte Flaeche: eine leise Toenung in der Marke, hoechstens
   an einer Stelle je Bild (etwa die Kopfzeile des Rapportblatts). */
.leerbild-svg .tint {
  fill: var(--accent-soft);
  stroke: none;
}

.leerbild-titel {
  /* 580 = die "semibold"-Stufe der Design-Referenz; nie 700. Ueberschrift in
     Textfarbe, keine Fettschlacht. */
  font-size: var(--fs-lg);
  font-weight: 580;
  color: var(--text-primary);
}

.leerbild-text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-muted);
}

.leerbild-aktion {
  margin-top: .75rem;
}

@keyframes leerbild-auftauchen {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Wer Bewegung abbestellt hat, bekommt keine: Das Bild ist sofort da, ohne
   Weg und ohne Verschiebung. */
@media (prefers-reduced-motion: reduce) {
  .leerbild {
    animation: none;
  }
}