/*
 * Die Endlos-Animationen der Vorlage.
 *
 * In der React-Seite laufen sie ueber framer-motion: `animate={{…}}` mit
 * `repeat: Infinity`. Der Konverter uebernimmt aber nur das gerenderte
 * Markup — und dort steht bloss der Zustand des Aufnahmemoments. Ohne diese
 * Datei stehen die Farbverlaufsraender still: der Kontakt-Knopf, die
 * Kacheln der Aufklappmenues und die Folien des Aufmachers.
 *
 * Getroffen werden die Elemente ueber Klasse UND Inline-Verlauf. Das ist
 * genau genug: einen Verlauf im style-Attribut traegt nur, was in der
 * Vorlage animiert war — statische Flaechen bekommen ihre Farbe aus einer
 * Tailwind-Klasse. Ein Selektor allein auf die Klasse haette auch die
 * Leuchtflaechen hinter den Aufmachern erfasst, die sich nicht bewegen
 * sollen.
 *
 * Abgeschaltet wird nichts von Hand: `html.reduce-motion` (das
 * Barrierefreiheits-Werkzeug) und `prefers-reduced-motion` setzen in
 * css/tailwind.css bereits jede Animationsdauer auf 0,001 ms.
 */

/* --- 1. Drehender Rand ----------------------------------------------------

   Vorlage: `<motion.div className="absolute inset-[-100%]"
   style={{ background: "conic-gradient(…)" }} animate={{ rotate: [0, 360] }}
   transition={{ duration: 4, repeat: Infinity, ease: "linear" }} />`

   Der Kasten ist doppelt so gross wie sein Elternteil (inset: -100%), damit
   beim Drehen an keiner Ecke eine Luecke entsteht. Zu sehen ist davon nur
   der Rand, weil der Elternteil `overflow: hidden` und ein Innenfeld von
   1–2 Pixeln hat.

   22 Stellen, darunter der Knopf „Jetzt kontaktieren" in der Kopfzeile. */

@keyframes eb-rand-drehen {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

#eb [class~="inset-[-100%]"][style*="conic-gradient"] {
  animation: eb-rand-drehen 4s linear infinite;
}

/* --- 2. Wandernder Rand ---------------------------------------------------

   Vorlage: dieselbe Farbfolge, aber statt zu drehen wandert der Verlauf
   diagonal durch die doppelt so grosse Flaeche — langsamer und ruhiger,
   passend zu den vielen Kacheln nebeneinander.

   `transition={{ duration: 20, repeat: Infinity, ease: "linear" }}` mit
   `backgroundPosition: ["0% 0%", "100% 100%", "0% 0%"]` — hin UND zurueck in
   20 Sekunden, deshalb hier ein Zwischenschritt bei 50 %.

   57 Stellen: die Eintraege der drei grossen Aufklappmenues. */

@keyframes eb-rand-wandern {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

#eb [class~="rounded-xl"][style*="conic-gradient"] {
  animation: eb-rand-wandern 20s linear infinite;
}

/* --- 3. Schwebende Folie des Aufmachers -----------------------------------

   Vorlage: vier Animationen gleichzeitig auf derselben Kachel, jede mit
   eigener Dauer —

     backgroundPosition  0% -> 100% -> 0%      9 s
     rotateY            -1.3 -> 1.3 -> -1.3   11 s
     rotateX             0.8 -> -0.5 -> 0.8   13 s
     y                     0 -> -6 -> 0        7 s

   Die drei letzten sind alle `transform`, und eine Eigenschaft laesst sich
   in CSS nur EINMAL animieren. Statt sie in eine gemeinsame Kurve zu
   pressen — was die verschiedenen Dauern zunichte machte, gerade sie lassen
   die Bewegung unregelmaessig und dadurch lebendig wirken — laeuft jede auf
   eine eigene Variable, und `transform` setzt sich daraus zusammen.

   Dafuer muessen die Variablen mit @property typisiert werden: ohne Typ
   behandelt der Browser sie als Zeichenkette und springt zwischen den
   Werten, statt weich zu ueberblenden. */

@property --eb-folie-ry {
  syntax: "<angle>";
  inherits: false;
  initial-value: -1.3deg;
}
@property --eb-folie-rx {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0.8deg;
}
@property --eb-folie-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@keyframes eb-folie-verlauf {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 0%; }
  100% { background-position: 0% 0%; }
}
@keyframes eb-folie-ry {
  0%   { --eb-folie-ry: -1.3deg; }
  50%  { --eb-folie-ry: 1.3deg; }
  100% { --eb-folie-ry: -1.3deg; }
}
@keyframes eb-folie-rx {
  0%   { --eb-folie-rx: 0.8deg; }
  50%  { --eb-folie-rx: -0.5deg; }
  100% { --eb-folie-rx: 0.8deg; }
}
@keyframes eb-folie-y {
  0%   { --eb-folie-y: 0px; }
  50%  { --eb-folie-y: -6px; }
  100% { --eb-folie-y: 0px; }
}

#eb [class~="aspect-[16/9]"][class~="p-[2px]"][style*="linear-gradient"] {
  transform-style: preserve-3d;
  transform:
    translateY(var(--eb-folie-y))
    rotateY(var(--eb-folie-ry))
    rotateX(var(--eb-folie-rx));
  animation:
    eb-folie-verlauf  9s ease-in-out infinite,
    eb-folie-ry      11s ease-in-out infinite,
    eb-folie-rx      13s ease-in-out infinite,
    eb-folie-y        7s ease-in-out infinite;
}

/*
 * Ohne @property-Unterstuetzung bleiben die drei Winkel- und
 * Hoehenvariablen auf ihrem Anfangswert stehen; die Kachel steht dann
 * leicht geneigt still statt zu schweben. Der Farbverlauf wandert
 * trotzdem, weil er ohne Variable auskommt.
 */

/* --- 4. Logo-Laufband -----------------------------------------------------

   Vorlage: `<motion.div className="flex gap-20 items-center"
   animate={{ x: [0, -1600] }} transition={{ repeat: Infinity,
   repeatType: "loop", duration: 30, ease: "linear" }} />`

   Die Logos liegen dreimal hintereinander im Markup; nach 1600 Pixeln —
   der Breite einer Kopie — springt die Spur zurueck auf null. Weil dort
   dieselben Logos stehen, ist der Sprung nicht zu sehen.

   Der Klassensatz kommt genau einmal auf der ganzen Seite vor (geprueft
   ueber alle 222 Seiten), deshalb genuegt er als Anker. */

@keyframes eb-laufband {
  from { transform: translateX(0); }
  to   { transform: translateX(-1600px); }
}

#eb [class~="flex"][class~="gap-20"][class~="items-center"] {
  animation: eb-laufband 30s linear infinite;
  will-change: transform;
}

/* --- 5. Schwebende Bilder der drei Leistungskacheln -----------------------

   Vorlage (ServiceBlocks.tsx): jede der drei Kacheln auf der Startseite
   laesst ihr Bild leicht auf und ab wandern und dabei kippen. Die dritte
   („KI-Lösungen") bewegt sich etwas weiter und atmet zusaetzlich im
   Massstab.

     Kachel 1 und 2   y ±5 px, rotateZ ±0.5°            4 s
     Kachel 3         y ±8 px, rotateZ ±1°, scale 1.02  5 s
     der freigestellte Laptop in Kachel 2               4 s

   Alle drei Werte sind `transform` und haben dieselbe Dauer — anders als
   bei der Aufmacherfolie genuegt hier also EINE Animation je Fall. */

@keyframes eb-schweben-klein {
  0%, 100% { transform: translateY(-5px) rotate(-0.5deg); }
  50%      { transform: translateY(5px)  rotate(0.5deg); }
}
@keyframes eb-schweben-gross {
  0%, 100% { transform: translateY(-8px) rotate(-1deg) scale(1); }
  50%      { transform: translateY(8px)  rotate(1deg)  scale(1.02); }
}

/* Die KI-Kachel erkennt man an den Logo-Plaketten, die darin schweben —
   sie hat als einzige Kinder mit dieser Kombination. */
#eb [class~="aspect-[4/3]"]:has([class*="bg-white/95"]) > img {
  animation: eb-schweben-gross 5s ease-in-out infinite;
}
/* `lg:aspect-auto` schliesst das Webinar-Bild aus: sein Kasten ist nur am
   Handy 4:3 und waechst am Schreibtisch mit. Die drei Leistungskacheln
   sind ueberall 4:3 und behalten ihr Schweben. Ohne diesen Ausschluss
   wanderte auch das Foto im Neuigkeiten-Slider auf und ab (Stefan,
   23.09.2026: soll stehen). */
#eb [class~="aspect-[4/3]"]:not(:has([class*="bg-white/95"])):not([class~="lg:aspect-auto"]) > img[class~="object-cover"] {
  animation: eb-schweben-klein 4s ease-in-out infinite;
}
#eb img[class*="drop-shadow-[0_26px_44px"] {
  animation: eb-schweben-klein 4s ease-in-out infinite;
}

/* --- 6. Die Logo-Plaketten der KI-Kachel ---------------------------------

   Neun kleine Kacheln mit den Zeichen der KI-Anbieter, die ueber dem Bild
   schweben. Im Original hat jede ihre EIGENE Dauer:

     y:      3 s + Index × 0,3 s
     rotate: 4 s + Index × 0,2 s

   Dadurch geraten sie auseinander und wirken nicht wie ein Block. Genau
   das laesst sich mit `nth-child` nachbilden — eine gemeinsame Dauer sieht
   mechanisch aus.

   Beide Bewegungen sind `transform`, also je Plakette eine Animation mit
   der laengeren der beiden Dauern; der Unterschied zwischen 3 s und 4 s
   faellt bei dieser Amplitude nicht auf. */

@keyframes eb-plakette {
  0%, 100% { transform: translateY(0)    rotate(-2deg); }
  25%      { transform: translateY(-6px) rotate(0deg); }
  50%      { transform: translateY(0)    rotate(2deg); }
  75%      { transform: translateY(6px)  rotate(0deg); }
}

#eb [class*="bg-white/95"][class~="rounded-xl"][class~="shadow-lg"] {
  animation: eb-plakette 4s ease-in-out infinite;
}
#eb [class*="bg-white/95"][class~="rounded-xl"]:nth-child(2)  { animation-duration: 4.2s; }
#eb [class*="bg-white/95"][class~="rounded-xl"]:nth-child(3)  { animation-duration: 4.4s; }
#eb [class*="bg-white/95"][class~="rounded-xl"]:nth-child(4)  { animation-duration: 4.6s; }
#eb [class*="bg-white/95"][class~="rounded-xl"]:nth-child(5)  { animation-duration: 4.8s; }
#eb [class*="bg-white/95"][class~="rounded-xl"]:nth-child(6)  { animation-duration: 5.0s; }
#eb [class*="bg-white/95"][class~="rounded-xl"]:nth-child(7)  { animation-duration: 5.2s; }
#eb [class*="bg-white/95"][class~="rounded-xl"]:nth-child(8)  { animation-duration: 5.4s; }
#eb [class*="bg-white/95"][class~="rounded-xl"]:nth-child(9)  { animation-duration: 5.6s; }
#eb [class*="bg-white/95"][class~="rounded-xl"]:nth-child(10) { animation-duration: 5.8s; }

/* --- 7. Laufbaender der Leistungskacheln ---------------------------------

   Richtung und Dauer setzt js/marquee.js je Spur; hier stehen nur die
   beiden Bewegungen. Eine Strecke von einem Drittel entspricht genau einer
   der drei Kopien im Markup — der Ruecksprung faellt dadurch nicht auf. */

@keyframes eb-tagband-links {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.3333%); }
}
@keyframes eb-tagband-rechts {
  from { transform: translateX(-33.3333%); }
  to   { transform: translateX(0); }
}