/* RUDEL Flow, Dynamik-Schicht (14.10.2026)
   Bewegung über alle Seiten: Fortschrittsleiste, Auftakt im Hero, Laufband,
   gestaffeltes Einblenden, Lichtkegel auf Karten, Zählwerke.
   Grundsatz: Ohne JavaScript und bei "Bewegung reduzieren" ist alles sofort
   sichtbar. Versteckt wird nur, was dynamik.js mit .dyn ausdrücklich übernimmt. */

/* ---------- Fortschrittsleiste ---------- */
.fortschritt{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;
  background:linear-gradient(90deg,var(--blau),var(--blau-hell) 60%,var(--kupfer-hell));
  transform-origin:left;transform:scaleX(var(--f,0));box-shadow:0 0 12px rgba(91,140,255,.6)}

/* ---------- Kopfleiste verdichtet sich ---------- */
.kopf{transition:background .3s ease,box-shadow .3s ease}
.kopf.ist-gescrollt{box-shadow:0 10px 30px -12px rgba(0,0,0,.55)}
.kopf-innen{transition:height .3s ease}
.kopf.ist-gescrollt .kopf-innen{height:58px}

/* ---------- Hero: Auftakt ---------- */
.dyn .hero .vorzeile,.dyn .hero h1,.dyn .hero-unter,.dyn .hero-knoepfe,.dyn .hero-punkte,
.dyn .seitenkopf .vorzeile,.dyn .seitenkopf h1,.dyn .seitenkopf-text,.dyn .seitenkopf .hero-knoepfe,.dyn .seitenkopf .danke-wege,.dyn .pfadleiste{
  animation:auftakt .9s cubic-bezier(.16,1,.3,1) both}
.dyn .hero h1,.dyn .seitenkopf h1{animation-delay:.08s}
.dyn .hero-unter,.dyn .seitenkopf-text{animation-delay:.2s}
.dyn .hero-knoepfe,.dyn .seitenkopf .hero-knoepfe,.dyn .seitenkopf .danke-wege{animation-delay:.32s}
.dyn .hero-punkte{animation-delay:.44s}
.dyn .hero .netz,.dyn .seitenkopf .auswertung{animation:auftakt-rechts 1.1s cubic-bezier(.16,1,.3,1) .25s both}
@keyframes auftakt{from{opacity:0;transform:translateY(26px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes auftakt-rechts{from{opacity:0;transform:translateX(40px) scale(.97)}to{opacity:1;transform:none}}

/* schimmernde Zeile im H1 */
.h1-blau{background-size:200% 100%;animation:schimmer 6s ease-in-out infinite}
@keyframes schimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* Licht folgt der Maus im dunklen Einstieg */
.hero,.seitenkopf{--lx:70%;--ly:30%}
.hero::after,.seitenkopf::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(520px circle at var(--lx) var(--ly),rgba(91,140,255,.13),transparent 60%);
  transition:background .2s}

/* ---------- Laufband ---------- */
.laufband{background:var(--graphit);border-block:1px solid var(--linie-dunkel);overflow:hidden;position:relative}
.laufband::before,.laufband::after{content:"";position:absolute;top:0;bottom:0;width:12%;z-index:1;pointer-events:none}
.laufband::before{left:0;background:linear-gradient(90deg,var(--graphit),transparent)}
.laufband::after{right:0;background:linear-gradient(-90deg,var(--graphit),transparent)}
.laufband-spur{display:flex;gap:0;width:max-content;animation:laufen 48s linear infinite}
.laufband:hover .laufband-spur{animation-play-state:paused}
.laufband-gruppe{display:flex;align-items:center;gap:44px;padding:18px 22px;white-space:nowrap}
.laufband span{display:inline-flex;align-items:center;gap:12px;font-size:.92rem;font-weight:600;color:var(--auf-dunkel)}
.laufband span b{font-weight:600;color:var(--auf-dunkel-2)}
.laufband span i{font-style:normal;color:var(--kupfer-hell)}
.laufband span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--blau);margin-left:32px;box-shadow:0 0 10px var(--blau-hell)}
@keyframes laufen{to{transform:translateX(-50%)}}

/* ---------- Gestaffeltes Einblenden ---------- */
.dyn [data-zeigen]{opacity:0;transform:translateY(34px);filter:blur(4px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1),filter .8s ease;
  transition-delay:calc(var(--i,0) * 90ms)}
.dyn [data-zeigen].ist-da{opacity:1;transform:none;filter:none}
.dyn [data-zeigen="links"]{transform:translateX(-36px)}
.dyn [data-zeigen="rechts"]{transform:translateX(36px)}
.dyn [data-zeigen="zoom"]{transform:scale(.94)}
.dyn [data-zeigen="links"].ist-da,.dyn [data-zeigen="rechts"].ist-da,.dyn [data-zeigen="zoom"].ist-da{transform:none}

/* Überschriften: Unterstrich wächst ein */
.kopfzeile h2,.drytech h2,.abschluss h2{position:relative}
.dyn .kopfzeile.ist-da h2::after,.dyn .drytech-text.ist-da h2::after{transform:scaleX(1)}
.kopfzeile h2::after,.drytech-text h2::after{content:"";display:block;width:72px;height:3px;margin-top:18px;border-radius:3px;
  background:linear-gradient(90deg,var(--blau),var(--kupfer));transform-origin:left;transform:scaleX(1);transition:transform 1s cubic-bezier(.16,1,.3,1) .35s}
.dyn .kopfzeile:not(.ist-da) h2::after,.dyn .drytech-text:not(.ist-da) h2::after{transform:scaleX(0)}

/* ---------- Lichtkegel und Neigung auf Karten ---------- */
.licht{position:relative;isolation:isolate}
.licht::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;opacity:0;transition:opacity .3s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(37,99,235,.10),transparent 55%)}
.licht:hover::before{opacity:1}
.dunkel .licht::before,.netz.licht::before,.auswertung.licht::before,.preis--mitte.licht::before{
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(91,140,255,.16),transparent 55%)}
.licht::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;transition:opacity .3s;padding:1px;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(91,140,255,.9),rgba(200,122,58,.5) 40%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.licht:hover::after{opacity:1}
.neigen{transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .3s ease;transform-style:preserve-3d;will-change:transform}
.neigen.ist-geneigt{transition:transform .08s linear,box-shadow .3s ease}

/* ---------- Praxis: Status und weitere Betriebe ---------- */
.praxis-status{display:inline-flex;align-items:center;gap:9px;margin-top:16px;padding:7px 14px 7px 11px;border-radius:999px;
  background:rgba(47,143,91,.14);border:1px solid rgba(47,143,91,.4);color:#7BD3A2;font-size:.78rem;font-weight:600;letter-spacing:.04em}
.praxis-status i{width:8px;height:8px;border-radius:50%;background:#3FBF7A;box-shadow:0 0 0 0 rgba(63,191,122,.6);animation:puls-gruen 2s infinite}
@keyframes puls-gruen{70%{box-shadow:0 0 0 8px rgba(63,191,122,0)}100%{box-shadow:0 0 0 0 rgba(63,191,122,0)}}
.praxis-weitere{position:relative;margin-top:clamp(40px,6vw,64px);display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center;
  padding:clamp(22px,3vw,32px);border-radius:var(--radius-gross);background:rgba(255,255,255,.035);border:1px solid var(--linie-dunkel)}
.praxis-weitere h3{font-size:1.15rem;color:#fff;margin-top:10px}
.praxis-liste{display:grid;gap:12px}
.praxis-liste li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;padding:16px 18px;border-radius:var(--radius);background:var(--graphit-2);border:1px solid var(--linie-dunkel)}
.praxis-liste b{display:block;color:#fff;font-weight:600}
.praxis-liste p{color:var(--auf-dunkel-2);font-size:.94rem;margin-top:4px}
.praxis-ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:rgba(200,122,58,.16);color:var(--kupfer-hell)}
.praxis-ico svg{width:20px;height:20px}
.praxis-fuss{font-size:.8rem;color:var(--text-3);margin-top:4px}

@media (max-width:980px){.praxis-weitere{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){
  .laufband-gruppe{gap:28px;padding:14px 16px}
  .laufband span{font-size:.84rem}
  .laufband span::after{margin-left:18px}
  .kopf.ist-gescrollt .kopf-innen{height:var(--kopf-h)}
  .praxis-weitere{padding:18px}
  .praxis-liste li{grid-template-columns:minmax(0,1fr);gap:12px;padding:16px}
}
@media (prefers-reduced-motion:reduce){
  .dyn [data-zeigen]{opacity:1!important;transform:none!important;filter:none!important}
  .laufband-spur{animation:none}
  .h1-blau{animation:none}
  .fortschritt{display:none}
}

/* ---------- Gedämpfte helle Töne (14.10.2026, Wunsch: weniger grell) ----------
   Grund und Kartenflächen leicht ins kühle Grau, gilt auch für die
   übernommenen Komponenten (--weiss, --offwhite). */
:root{
  --grund:#E9EDF2;
  --papier:#F5F7FA;
  --linie:#D7DDE5;
  --weiss:#F5F7FA;
  --offwhite:#E9EDF2;
  --line:#D7DDE5;
}