/* EIGENKERN Testversion — Zusatzstile NUR fuer index.html (Startseite, 23.10.2026).
   Tokens, Bausteine und der Bewegungs-Baukasten kommen aus eigenkern.css; hier nur,
   was die Startseite zusaetzlich braucht. Eigene Bewegung greift nur unter html.bewegt:not(.ruhig). */

/* ---- Sprungziele unter dem festen Kopf ---- */
main [id]{scroll-margin-top:96px}

/* ---- Buehne: Video mit Parallaxe (Reserve oben/unten, damit beim Verschieben kein Rand entsteht) ---- */
.bewegt:not(.ruhig) .buehne-film video{position:absolute;left:0;top:-9%;height:118%}
.bewegt:not(.ruhig) .kacheln.da>[data-neigen]{transition:transform .25s ease,box-shadow .25s ease,opacity .6s ease,background .25s ease,border-color .25s ease}

/* ---- Mikro-Details ---- */
.knopf:active{transform:scale(.98)}
.karte .ikone{transition:stroke .25s ease,transform .25s ease}
.karte.link:hover .ikone{stroke:var(--orange-hell);transform:translateY(-2px)}
.vkarte .vrahmen svg{transition:transform .25s ease,background .25s ease}
.vkarte:hover .vrahmen svg{transform:scale(1.08);background:var(--orange-hell)}
.bewegt:not(.ruhig) .raster.da>[data-neigen],.bewegt:not(.ruhig) .staffel.da>.karte[data-neigen]{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,opacity .6s ease}

/* ---- Schritte 01–04: Verbindungslinie, die sich beim Scrollen zeichnet ----
   Desktop: waagerecht durch die Mitte der Nummern (hinter den Nummern).
   Handy (eine Spalte): senkrecht links neben den Nummern. Kein SVG, nur Pseudoelemente. */
.schritt{position:relative}
.schritt::before{position:relative;z-index:1;display:table;background:var(--platte);padding-right:10px}
.schritt::after{content:"";position:absolute;left:0;right:0;top:41px;height:2px;background:var(--orange);
  transform:scaleX(0);transform-origin:left center;pointer-events:none}
.schritt:first-child::after{left:22px}
.schritt:last-child::after{right:auto;width:22px}
.bewegt:not(.ruhig) .schritt::after{transition:transform .5s linear}
.bewegt:not(.ruhig) .schritte.da .schritt::after{transform:scaleX(1)}
.schritte.da .schritt:nth-child(2)::after{transition-delay:.5s}
.schritte.da .schritt:nth-child(3)::after{transition-delay:1s}
.schritte.da .schritt:nth-child(4)::after{transition-delay:1.5s}
.ruhig .schritt::after,html:not(.bewegt) .schritt::after{transform:scaleX(1)}
@media (max-width:640px){
  .schritt{padding-left:56px}
  .schritt::before{padding-right:0;background:none}
  .schritt::after{left:30px;right:auto;top:0;bottom:0;width:2px;height:auto;transform:scaleY(0);transform-origin:center top}
  .schritt:first-child::after{left:30px;top:41px}
  .schritt:last-child::after{width:2px;bottom:auto;height:41px}
  .bewegt:not(.ruhig) .schritte.da .schritt::after{transform:scaleY(1)}
  .ruhig .schritt::after,html:not(.bewegt) .schritt::after{transform:scaleY(1)}
}

/* ---- Vergleich Cloud-KI / lokale KI: je Zeile (Klasse vgl-zeile; .v-zeile ist in eigenkern.css ein anderer Baustein) Frage, dann Cloud-Antwort, dann die lokale Antwort von rechts ----
   Auf dem Handy (unter 600 px) sind die Zeilen Bloecke untereinander — gleicher Ablauf. */
.bewegt:not(.ruhig) .vgl-zeile th,.bewegt:not(.ruhig) .vgl-zeile td{opacity:0;transform:translateY(14px);
  transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.bewegt:not(.ruhig) .vgl-zeile td{transition-delay:.15s}
.bewegt:not(.ruhig) .vgl-zeile td.auf-rechts{transform:translateX(44px);transition-delay:.5s}
.bewegt:not(.ruhig) .vgl-zeile.da th,.bewegt:not(.ruhig) .vgl-zeile.da td,.bewegt:not(.ruhig) .vgl-zeile.da td.auf-rechts{opacity:1;transform:none}
.vgl td.lokal{box-shadow:inset 0 0 0 0 var(--orange);transition:box-shadow .5s ease .9s}
.bewegt:not(.ruhig) .vgl-zeile.da td.lokal{box-shadow:inset 3px 0 0 0 var(--orange)}

/* ---- Abschluss: ein ruhiger Glanz laeuft einmal ueber den orangen Knopf, sobald die Knopfzeile sichtbar wird ---- */
.cta .knopf-orange{position:relative;overflow:hidden}
.cta .knopf-orange::after{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:34%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 100%);
  transform:translateX(-160%) skewX(-18deg)}
.bewegt:not(.ruhig) .cta .knopfzeile.da .knopf-orange::after{animation:start-glanz 1.4s cubic-bezier(.4,0,.2,1) .8s 1 forwards}
@keyframes start-glanz{to{transform:translateX(420%) skewX(-18deg)}}

/* ---- Ruhe-Modus: eigene Bewegung aus ---- */
.ruhig .knopf:active,.ruhig .karte .ikone,.ruhig .vkarte .vrahmen svg,.ruhig .vgl td.lokal{transition:none;transform:none}
.ruhig .cta .knopf-orange::after{animation:none;display:none}