:root{
  --bg:#06070a;
  --bg2:#0b0e14;
  --card:rgba(255,255,255,.04);
  --card2:rgba(255,255,255,.06);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.68);
  --muted2:rgba(255,255,255,.55);
  --gold:rgba(255,215,120,.88);
  --gold2:rgba(255,215,120,.55);
  --line:rgba(255,255,255,.09);
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --r: 18px;
  --max: 1160px;
  --font-ui: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-ui);
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 30% -10%, rgba(255,215,120,.10), transparent 55%),
    radial-gradient(900px 520px at 85% 10%, rgba(255,215,120,.06), transparent 60%),
    radial-gradient(900px 520px at 25% 110%, rgba(120,180,255,.06), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
a:hover{opacity:.92}
img{max-width:100%; display:block}
button{font-family:inherit}

.container{width:min(var(--max), calc(100% - 40px)); margin:0 auto}
.section{padding:84px 0}
.section.tight{padding:56px 0}
.hr{height:1px; background:var(--line); border:0; margin:0}

.badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(0,0,0,.22);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size:13px;
  color:var(--muted);
}
.badge i{
  width:8px;height:8px;border-radius:99px;
  background:var(--gold);
  box-shadow:0 0 18px rgba(255,215,120,.55);
}

.h1{
  margin:14px 0 10px;
  font-size: clamp(34px, 5vw, 56px);
  line-height:1.02;
  letter-spacing:-.02em;
}
.lead{
  margin:0;
  color:var(--muted);
  font-size: clamp(16px, 1.7vw, 19px);
  line-height:1.55;
  max-width: 68ch;
}

.kicker{
  margin:0 0 10px;
  color:var(--gold);
  letter-spacing:.12em;
  font-size:12px;
  text-transform:uppercase;
}

.grid{
  display:grid;
  gap:18px;
}
.grid.cols-2{grid-template-columns: repeat(2, minmax(0,1fr))}
.grid.cols-3{grid-template-columns: repeat(3, minmax(0,1fr))}
@media (max-width: 980px){
  .grid.cols-3{grid-template-columns: repeat(2, minmax(0,1fr))}
}
@media (max-width: 640px){
  .container{width: calc(100% - 28px)}
  .grid.cols-2,.grid.cols-3{grid-template-columns: 1fr}
  .section{padding:66px 0}
}

.card{
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border-radius: var(--r);
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(600px 220px at 20% 0%, rgba(255,215,120,.14), transparent 55%);
  pointer-events:none;
  opacity:.9;
}
.card > *{position:relative}

.pad{padding:20px}
.pad.lg{padding:26px}
.muted{color:var(--muted)}
.small{font-size:13px; color:var(--muted2); line-height:1.55}

.btnrow{display:flex; gap:12px; flex-wrap:wrap; margin-top:20px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius: 999px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.22);
  color:var(--text);
  cursor:pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, opacity .15s ease;
  user-select:none;
}
.btn:hover{transform: translateY(-1px); border-color: rgba(255,215,120,.35)}
.btn.primary{
  background: linear-gradient(180deg, rgba(255,215,120,.22), rgba(255,215,120,.10));
  border-color: rgba(255,215,120,.30);
}
.btn.primary:hover{border-color: rgba(255,215,120,.55)}
.btn.ghost{background: rgba(255,255,255,.02)}

.nav{
  position: sticky; top:0; z-index:50;
  background: rgba(6,7,10,.68);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-inner{
  height:72px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  display:flex; align-items:center; gap:12px;
  font-weight:650;
  letter-spacing:.02em;
}
.brand img{width:34px; height:34px; object-fit:contain; filter: drop-shadow(0 10px 24px rgba(255,215,120,.18))}
.brand span{display:block; line-height:1.05}
.brand small{display:block; font-weight:500; color:var(--muted2); letter-spacing:0; font-size:12px}

.nav-links{
  display:flex; align-items:center; gap:18px;
}
.nav-links a{
  font-size:14px;
  color:var(--muted);
  padding:10px 10px;
  border-radius: 12px;
  transition: background .15s ease, color .15s ease;
}
.nav-links a:hover{background: rgba(255,255,255,.04); color: var(--text)}
.lang{
  display:inline-flex; gap:8px; align-items:center;
  border:1px solid var(--line);
  padding:6px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
}
.lang button{
  border:0; background:transparent; color: var(--muted);
  padding:7px 10px; border-radius: 999px;
  cursor:pointer; font-size:12px; letter-spacing:.06em;
}
.lang button.active{
  background: rgba(255,215,120,.16);
  color: var(--text);
  border:1px solid rgba(255,215,120,.18);
}

.burger{
  display:none;
  width:44px; height:44px;
  border-radius: 12px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.18);
  cursor:pointer;
}
.burger span{display:block; width:18px; height:2px; background: rgba(255,255,255,.75); margin:4px auto; border-radius:99px}
@media (max-width: 900px){
  .nav-links{display:none}
  .burger{display:block}
}

.mobile{
  display:none;
  border-top:1px solid rgba(255,255,255,.06);
  padding:12px 0 18px;
}
.mobile.open{display:block}
.mobile a{
  display:block;
  padding:12px 10px;
  border-radius: 12px;
  color: var(--muted);
}
.mobile a:hover{background: rgba(255,255,255,.04); color: var(--text)}
.mobile .row{display:flex; gap:12px; align-items:center; justify-content:space-between; padding:8px 10px}

.hero{
  position:relative;
  padding: 54px 0 0;
}
.hero-wrap{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:22px;
  align-items:stretch;
}
@media (max-width: 980px){
  .hero-wrap{grid-template-columns: 1fr; gap:16px}
}
.hero-card{
  min-height: 460px;
}
.hero-right{
  display:grid; gap:18px;
}
.hero-visual{
  position:relative;
  height:100%;
  min-height: 240px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-visual .drop{
  width: 120px;
  opacity:.95;
  animation: float 4.6s ease-in-out infinite;
  filter: drop-shadow(0 26px 60px rgba(255,215,120,.22));
}
@keyframes float{
  0%,100%{transform: translateY(0)}
  50%{transform: translateY(-10px)}
}
.glow{
  position:absolute; inset:-20%;
  background:
    radial-gradient(320px 220px at 50% 40%, rgba(255,215,120,.20), transparent 60%),
    radial-gradient(520px 360px at 55% 60%, rgba(120,180,255,.08), transparent 70%);
  pointer-events:none;
}

.train{
  position:absolute; left:-10%; right:-10%; bottom:18px; height:26px;
  opacity:.55; pointer-events:none;
}
.train .dot{
  position:absolute; top:50%;
  width:10px; height:10px; border-radius:99px;
  background: rgba(255,215,120,.55);
  transform: translateY(-50%);
  filter: blur(.2px);
  box-shadow: 0 0 18px rgba(255,215,120,.28);
  animation: ride 8s linear infinite;
}
.train .dot:nth-child(2){animation-delay: -1.4s; opacity:.42; transform: translateY(-50%) scale(.9)}
.train .dot:nth-child(3){animation-delay: -2.8s; opacity:.28; transform: translateY(-50%) scale(.8)}
.train .dot:nth-child(4){animation-delay: -4.2s; opacity:.18; transform: translateY(-50%) scale(.7)}
@keyframes ride{
  0%{left:-5%}
  100%{left:105%}
}

.canvas-wrap{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.75;
}
#heroCanvas{width:100%; height:100%; display:block}

.app{
  display:grid;
  grid-template-columns: 1fr;
  gap:0;
}
.app .thumb{
  height:170px;
  background:
    radial-gradient(500px 220px at 20% 20%, rgba(255,215,120,.18), transparent 60%),
    radial-gradient(500px 260px at 80% 80%, rgba(120,180,255,.08), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border-bottom:1px solid rgba(255,255,255,.07);
  position:relative;
}
.app .thumb img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:.72;
  mix-blend-mode: screen;
}
.app h3{margin:0 0 6px; font-size:16px}
.app p{margin:0; color:var(--muted); line-height:1.55}
.list{
  margin:0; padding:0; list-style:none;
  display:grid; gap:10px;
}
.list li{
  padding-left:22px; position:relative;
  color: var(--muted);
  line-height:1.55;
}
.list li::before{
  content:"";
  width:10px;height:10px;border-radius:99px;
  background: rgba(255,215,120,.60);
  position:absolute; left:0; top:.42em;
  box-shadow: 0 0 18px rgba(255,215,120,.25);
}

.footer{
  padding:34px 0 44px;
  color: var(--muted2);
}
.footer a{color: var(--muted)}
.footer a:hover{color: var(--text)}
.footer-grid{
  display:flex; gap:14px; flex-wrap:wrap;
  align-items:center; justify-content:space-between;
}
.footer small{display:block; margin-top:6px; color: var(--muted2)}

.notice{
  border:1px solid rgba(255,215,120,.18);
  background: rgba(255,215,120,.06);
  border-radius: var(--r);
  padding:14px 16px;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important}
  .train .dot, .hero-visual .drop{animation:none !important}
}




/* ===========================
   HERO TRAIN – FIX (sauber)
   =========================== */

/* Hero-Card darf nicht abschneiden */
.hero-card{ overflow: visible; }

/* Card-Overlay hinter Inhalt zwingen */
.hero-card::before{ z-index: 1; }

/* Alle direkten Inhalte über Overlay */
.hero-card > *{
  position: relative;
  z-index: 2;
}

/* Canvas sicher ganz nach hinten */
.hero-card .canvas-wrap{ z-index: 0; }
.hero-card #heroCanvas{ position: relative; z-index: 0; }

/* Zug sicher ganz nach vorne */
.hero-card .train{
  z-index: 9;
  opacity: .85;
}
.hero-card .train .dot{ z-index: 10; }
/* ===========================
   LUXURY HERO RAIL (CSS only)
   Apple/Rolex Stil, kein Canvas
   =========================== */

.hero-card{ position:relative; } /* wichtig für absolute Elemente */

.hero-card .lux-rail{
  position:absolute;
  left:18px;
  right:18px;
  bottom:16px;
  height:34px;
  pointer-events:none;
  opacity:.95;
  z-index:5;
}

/* “Gold Beam” der langsam durchfährt */
.hero-card .lux-beam{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:
    linear-gradient(90deg,
      rgba(255,215,120,0) 0%,
      rgba(255,215,120,.10) 20%,
      rgba(255,215,120,.28) 50%,
      rgba(255,215,120,.10) 80%,
      rgba(255,215,120,0) 100%);
  filter: blur(.2px);
  animation: luxSweep 6.5s ease-in-out infinite;
  box-shadow: 0 0 40px rgba(255,215,120,.08);
}

@keyframes luxSweep{
  0%{ transform: translateX(-18%); opacity:.35; }
  35%{ opacity:.85; }
  50%{ opacity:1; }
  65%{ opacity:.85; }
  100%{ transform: translateX(18%); opacity:.35; }
}

/* “Rolex-like Orbs” (fein, elegant) */
.hero-card .lux-orb{
  position:absolute;
  top:50%;
  width:8px;
  height:8px;
  border-radius:999px;
  transform: translateY(-50%);
  background: rgba(255,215,120,.78);
  box-shadow:
    0 0 14px rgba(255,215,120,.25),
    0 0 30px rgba(255,215,120,.10);
  filter: blur(.05px);
  animation: luxRide 7.8s linear infinite;
  opacity:.6;
}

.hero-card .lux-orb.o1{ animation-delay: 0s;   opacity:.65; }
.hero-card .lux-orb.o2{ animation-delay: -1.6s; opacity:.45; transform: translateY(-50%) scale(.9); }
.hero-card .lux-orb.o3{ animation-delay: -3.2s; opacity:.30; transform: translateY(-50%) scale(.8); }
.hero-card .lux-orb.o4{ animation-delay: -4.8s; opacity:.20; transform: translateY(-50%) scale(.7); }

@keyframes luxRide{
  0%{ left:-6%; }
  100%{ left:106%; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-card .lux-beam,
  .hero-card .lux-orb{ animation:none !important; }
}
/* ===========================
   SAMA TRAIN – fährt rein, lädt, fährt raus (CSS only)
   =========================== */

.hero-card{ position:relative; }

/* Rail Container */
.sg-rail{
  position:absolute;
  left:18px;
  right:18px;
  bottom:16px;
  height:46px;
  pointer-events:none;
  z-index:6;
  opacity:.98;
}

/* Gleis (luxury line) */
.sg-rail::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:50%;
  height:2px;
  transform:translateY(-50%);
  background: linear-gradient(90deg,
    rgba(255,215,120,0) 0%,
    rgba(255,215,120,.20) 18%,
    rgba(255,215,120,.45) 50%,
    rgba(255,215,120,.20) 82%,
    rgba(255,215,120,0) 100%);
  box-shadow: 0 0 30px rgba(255,215,120,.10);
  opacity:.85;
}

/* Station links */
.sg-station{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:22px;
  border-radius:999px;
  border:1px solid rgba(255,215,120,.22);
  background: rgba(0,0,0,.25);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.sg-signal{
  position:absolute;
  left:9px;
  top:50%;
  width:8px; height:8px;
  border-radius:99px;
  transform:translateY(-50%);
  background: rgba(255,215,120,.85);
  box-shadow: 0 0 18px rgba(255,215,120,.35);
  animation: sgBlink 2.2s ease-in-out infinite;
}
@keyframes sgBlink{
  0%,100%{ opacity:.35; transform:translateY(-50%) scale(.95); }
  50%{ opacity:1; transform:translateY(-50%) scale(1.05); }
}

/* Train group */
.sg-train{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  gap:8px;

  /* Start ausserhalb links */
  left:-240px;

  /* “Reinfahren → Halt → Rausfahren” */
  animation: sgTrainMove 9.5s ease-in-out infinite;
  will-change: transform, left;
}

/* Bewegungs-Storyboard */
@keyframes sgTrainMove{
  /* reinfahren */
  0%   { left:-260px; }
  22%  { left:72px; }      /* kommt bei Station an */

  /* halt + laden */
  22%  { left:72px; }
  60%  { left:72px; }      /* steht still */

  /* weiterfahren */
  100% { left: calc(100% + 260px); }
}

/* Lok */
.sg-loco{
  width:58px;
  height:22px;
  border-radius: 999px 14px 14px 999px;
  border:1px solid rgba(255,215,120,.28);
  background:
    radial-gradient(14px 14px at 18px 50%, rgba(255,215,120,.18), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  position:relative;
}
.sg-loco::after{
  content:"";
  position:absolute;
  right:-10px;
  top:50%;
  width:10px; height:10px;
  transform:translateY(-50%);
  border-radius:99px;
  background: rgba(255,215,120,.35);
  box-shadow: 0 0 18px rgba(255,215,120,.18);
}
.sg-window{
  position:absolute;
  left:16px;
  top:50%;
  width:14px; height:10px;
  transform:translateY(-50%);
  border-radius:6px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,215,120,.12);
}

/* Wagon */
.sg-wagon{
  width:76px;
  height:22px;
  border-radius:14px;
  border:1px solid rgba(255,215,120,.18);
  background: rgba(0,0,0,.22);
  box-shadow: 0 12px 34px rgba(0,0,0,.35);
  position:relative;
  overflow:hidden;
}

/* Cargo Label */
.sg-cargo{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: rgba(255,255,255,.78);
  opacity:.30;                 /* “noch nicht geladen” */
  transform:translateY(1px);
}

/* Laden-Effekt: nur während Standzeit (22%–60%) */
.sg-wagon::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(80px 40px at 50% 50%, rgba(255,215,120,.22), transparent 60%);
  opacity:0;
  transform:scale(.95);
}

/* Cargo wird beim Halt “geladen” (nacheinander) */
.sg-train .c1{ animation: sgLoad1 9.5s ease-in-out infinite; }
.sg-train .c2{ animation: sgLoad2 9.5s ease-in-out infinite; }
.sg-train .c3{ animation: sgLoad3 9.5s ease-in-out infinite; }

@keyframes sgLoad1{
  0%,21%{opacity:.30;}
  26%,60%{opacity:1;}
  100%{opacity:1;}
}
@keyframes sgLoad2{
  0%,33%{opacity:.30;}
  38%,60%{opacity:1;}
  100%{opacity:1;}
}
@keyframes sgLoad3{
  0%,45%{opacity:.30;}
  50%,60%{opacity:1;}
  100%{opacity:1;}
}

/* Glow beim Halt */
.sg-train .sg-wagon::before{
  animation: sgGlow 9.5s ease-in-out infinite;
}
@keyframes sgGlow{
  0%,21%{opacity:0;}
  26%,60%{opacity:.9; transform:scale(1);}
  100%{opacity:0;}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .sg-train,
  .sg-cargo,
  .sg-train .sg-wagon::before,
  .sg-signal{ animation:none !important; }
}
/* ===========================
   SAMA TRAIN – FINAL (clean)
   fährt rein → lädt → fährt raus
   bleibt im HERO-Kasten
   =========================== */

/* Hero-Card muss clippen, sonst läuft Zug in andere Cards */
.hero-card{
  position: relative;
  overflow: hidden;   /* WICHTIG: verhindert "durch was wir nicht tun" */
}

/* Optional: etwas Platz unten, damit Rail nie Text berührt */
.hero-card .pad.lg{ padding-bottom: 72px; }

/* Rail Container (NUR im Hero) */
.hero-card .sg-rail{
  position:absolute;
  left:18px;
  right:18px;
  bottom:16px;
  height:46px;
  pointer-events:none;
  z-index:2;          /* unter Text, aber sichtbar */
  opacity:.98;
}

/* Gleis */
.hero-card .sg-rail::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:50%;
  height:2px;
  transform:translateY(-50%);
  background: linear-gradient(90deg,
    rgba(255,215,120,0) 0%,
    rgba(255,215,120,.20) 18%,
    rgba(255,215,120,.45) 50%,
    rgba(255,215,120,.20) 82%,
    rgba(255,215,120,0) 100%);
  box-shadow: 0 0 30px rgba(255,215,120,.10);
  opacity:.85;
}

/* Station links */
.hero-card .sg-station{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:22px;
  border-radius:999px;
  border:1px solid rgba(255,215,120,.22);
  background: rgba(0,0,0,.25);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.hero-card .sg-signal{
  position:absolute;
  left:9px;
  top:50%;
  width:8px; height:8px;
  border-radius:99px;
  transform:translateY(-50%);
  background: rgba(255,215,120,.85);
  box-shadow: 0 0 18px rgba(255,215,120,.35);
  animation: sgBlink 2.2s ease-in-out infinite;
}
@keyframes sgBlink{
  0%,100%{ opacity:.35; transform:translateY(-50%) scale(.95); }
  50%{ opacity:1; transform:translateY(-50%) scale(1.05); }
}

/* Train Group */
.hero-card .sg-train{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  gap:8px;

  left:-260px; /* Start ausserhalb */
  animation: sgTrainMove 12s ease-in-out infinite; /* langsamer */
}

/* rein → halt → raus */
@keyframes sgTrainMove{
  0%   { left:-260px; }
  22%  { left:72px; }      /* kommt an */
  58%  { left:72px; }      /* steht & lädt */
  100% { left: calc(100% + 260px); }
}

/* Lok */
.hero-card .sg-loco{
  width:58px;
  height:22px;
  border-radius: 999px 14px 14px 999px;
  border:1px solid rgba(255,215,120,.28);
  background:
    radial-gradient(14px 14px at 18px 50%, rgba(255,215,120,.18), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  position:relative;
}
.hero-card .sg-loco::after{
  content:"";
  position:absolute;
  right:-10px;
  top:50%;
  width:10px; height:10px;
  transform:translateY(-50%);
  border-radius:99px;
  background: rgba(255,215,120,.35);
  box-shadow: 0 0 18px rgba(255,215,120,.18);
}
.hero-card .sg-window{
  position:absolute;
  left:16px;
  top:50%;
  width:14px; height:10px;
  transform:translateY(-50%);
  border-radius:6px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,215,120,.12);
}

/* Wagon */
.hero-card .sg-wagon{
  width:82px;
  height:22px;
  border-radius:14px;
  border:1px solid rgba(255,215,120,.18);
  background: rgba(0,0,0,.22);
  box-shadow: 0 12px 34px rgba(0,0,0,.35);
  position:relative;
  overflow:hidden;
}
.hero-card .sg-cargo{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: rgba(255,255,255,.78);
  opacity:.30; /* noch nicht geladen */
  transform:translateY(1px);
}

/* Glow beim Laden */
.hero-card .sg-wagon::before{
  content:"";
  position:absolute;
  inset:-30%;
  background: radial-gradient(90px 46px at 50% 50%, rgba(255,215,120,.22), transparent 60%);
  opacity:0;
  transform:scale(.95);
  animation: sgGlow 12s ease-in-out infinite;
}
@keyframes sgGlow{
  0%,21%{opacity:0;}
  28%,58%{opacity:.9; transform:scale(1);}
  100%{opacity:0;}
}

/* Cargo lädt nacheinander */
.hero-card .sg-train .c1{ animation: sgLoad1 12s ease-in-out infinite; }
.hero-card .sg-train .c2{ animation: sgLoad2 12s ease-in-out infinite; }
.hero-card .sg-train .c3{ animation: sgLoad3 12s ease-in-out infinite; }

@keyframes sgLoad1{
  0%,21%{opacity:.30;}
  28%,58%{opacity:1;}
  100%{opacity:1;}
}
@keyframes sgLoad2{
  0%,34%{opacity:.30;}
  41%,58%{opacity:1;}
  100%{opacity:1;}
}
@keyframes sgLoad3{
  0%,46%{opacity:.30;}
  53%,58%{opacity:1;}
  100%{opacity:1;}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-card .sg-train,
  .hero-card .sg-cargo,
  .hero-card .sg-wagon::before,
  .hero-card .sg-signal{ animation:none !important; }
}