/* LSBcard – Gestaltung. Werte hier zentral ändern. */
:root {
  --navy: #263443;
  --schrift: #333;
  --kartenbreite: 650px;
  --kartenabstand: 65px;
  --stapelversatz: 55px;
  --startabstand: 20px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--schrift);
  font-family: Exo, sans-serif;
  font-size: 16px;
  line-height: 1.3;
  background: var(--navy) url("hintergrund.jpg") center / cover fixed no-repeat;
}
.kartenstapel { padding: var(--startabstand) 20px 100px; }
.stapelkarte {
  position: sticky;
  top: calc(var(--startabstand) + var(--i) * var(--stapelversatz));
  width: 100%; max-width: var(--kartenbreite);
  margin: 0 auto var(--kartenabstand);
  transform: scale(var(--verkleinerung, 1));
  transform-origin: center top;
  will-change: transform;
}
.kartenflaeche {
  position: relative; overflow: hidden; min-height: 300px;
  padding: 30px; border-radius: 10px; background: #fff;
  box-shadow: 0 22px 48px rgba(5,13,24,.40), 0 6px 16px rgba(5,13,24,.22);
}
/* Typografie nach Original: Exo; Original-Kartenkennung 56px, hier wegen der langen Wörter 40px. Inhaltsüberschrift 24px / 30px. */
.kartenrubrik {
  margin: 0 0 12px;
  font-size: 56px; font-weight: 700; line-height: 1.05;
}
h1, h2 {
  margin: 0;
  font-size: 24px; font-weight: 700; line-height: 30px;
}
.trennlinie { margin: 20px 0 30px; border-bottom: 1px dashed #bbb; }
.kartentext { font-size: 16px; line-height: 1.3; }
p { margin: 0 0 20px; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; }
/* Die hinteren Karten treten beim Überlagern zurück. */
.kartenflaeche::after {
  content: ""; position: absolute; inset: 0;
  background: var(--navy); opacity: var(--abdunklung, 0);
  pointer-events: none;
}
.kartenflaeche > * { filter: blur(var(--unschaerfe, 0px)); }
/* Logo steht NACH dem Kartenstapel und bleibt beim Scrollen nicht haften. */
.seitenfuss {
  position: relative;
  text-align: center;
  padding: 20px 20px 65px;
}
.seitenfuss img {
  display: block;
  width: 115px;
  height: auto;
  margin: 0 auto;
  opacity: .52;
  filter: grayscale(1) brightness(0) invert(.85);
}
@media (max-width: 479px) {
  .kartenflaeche { padding: 20px; }
  .kartenrubrik { font-size: 30px; }
  h1, h2 { font-size: 20.8px; line-height: 1.15; }
  .kartentext { font-size: 14.4px; line-height: 1.2; }
  .trennlinie { margin: 20px 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stapelkarte { transform: none !important; will-change: auto; }
  .kartenflaeche::after { opacity: 0; }
  .kartenflaeche > * { filter: none; }
}