/* ═══════════════════════════════════════════════════════════════════════
   13.09.2026 — LEBENDIG ÜBERALL
   Nazannil: „Die Bilder sind nicht mehr lebendig, sondern tot auf den Seiten.
   Die sollten immer lebendig sein. Alle Kästen, alle Buttons … glasig, schwebend."

   GEMESSEN (Playwright, 412 px): zeynah-grundlage.css belebt nur eine feste
   Klassenliste (.zy-kachel, .price-card, .feat-card, .perspektiven …). Alles
   daneben blieb tot: .card und ihre .card-bild-Bilder, .demo-card, .faq-item,
   .live-client, .founder-card, die Paketkarten auf /preise, Sprachknöpfe,
   .btn- und Zweitknöpfe. Deshalb war es nie „überall".

   NUR HINZUGEFÜGT — keine neue Gestaltung:
   · Bewegungen: vorhandene Keyframes der Grundlage (zy-leben-*, zy-kachel-schweb-*, zy-schweben-*)
   · Glas: die Werte aus Grundlage §4 (Schattenstaffel + Lichtkante) und blur(16px)
   · KEINE Hintergrundfarbe wird angefasst — Kontrast und Schachbrett bleiben.
   · Vorhandene Knopf-Schatten bleiben; nur flache Sprachknöpfe bekommen einen.
   Eingebunden nur auf den Website-Seiten, NIE in den Branchen-Apps (tabu).
   Bewegung ist immer an — Nazannils Gesetz vom 14.08. (sanft und langsam).
   ═══════════════════════════════════════════════════════════════════════ */

/* 1 · BILDER IN KÄSTEN: Kamerafahrt, drei Wege, nie im Gleichtakt */
.card-bild, .live-bild { overflow: hidden; }
.card-bild img, .card-bild video, .live-bild img {
	animation: zy-leben-a 44s ease-in-out infinite;
	will-change: transform;
	transform-origin: 52% 48%;
}
.card:nth-child(3n+2) .card-bild img, .card:nth-child(3n+2) .card-bild video {
	animation-name: zy-leben-b; animation-duration: 52s; animation-delay: -8s;
}
.card:nth-child(3n+3) .card-bild img, .card:nth-child(3n+3) .card-bild video {
	animation-name: zy-leben-c; animation-duration: 48s; animation-delay: -19s;
}

/* 2 · KÄSTEN: Glas + Schweben */
html body :is(.card, .demo-card, .faq-item, .live-client, .founder-card, .pk > .p,
              .a3-karte, .motor-kachel, .bruecke, .anb-karte, .hero-saeulen > a, .ver-karte, .ber-karte, .vgl-karte) {
	position: relative;
	box-shadow:
		0 22px 48px rgba(48, 49, 52, .30),
		0 2px 6px rgba(48, 49, 52, .14),
		inset 0 1px 0 rgba(250, 247, 242, .34) !important;
	-webkit-backdrop-filter: blur(16px) saturate(1.2);
	backdrop-filter: blur(16px) saturate(1.2);
	animation: zy-kachel-schweb-a 7s ease-in-out infinite;
}
html body :is(.card, .demo-card, .faq-item, .live-client, .founder-card, .pk > .p,
              .a3-karte, .motor-kachel, .bruecke, .anb-karte, .hero-saeulen > a, .ver-karte, .ber-karte, .vgl-karte):nth-child(3n+2) {
	animation: zy-kachel-schweb-b 8.5s ease-in-out -2s infinite;
}
html body :is(.card, .demo-card, .faq-item, .live-client, .founder-card, .pk > .p,
              .a3-karte, .motor-kachel, .bruecke, .anb-karte, .hero-saeulen > a, .ver-karte, .ber-karte, .vgl-karte):nth-child(3n+3) {
	animation: zy-kachel-schweb-c 9.5s ease-in-out -4s infinite;
}
html body :is(.faq-item, .live-client) { border-radius: 14px; }
html body :is(.card, .demo-card, .faq-item, .live-client, .founder-card, .pk > .p,
              .a3-karte, .motor-kachel, .bruecke, .anb-karte, .hero-saeulen > a, .ver-karte, .ber-karte, .vgl-karte):hover {
	animation-play-state: paused;
}

/* 3 · KNÖPFE: schweben im Grundzustand (auf dem Handy gibt es kein Hover) */
html body :is(.zy-knopf, .btn, .btn-primary, .btn-secondary, .cta-button, .card-lang) {
	animation: zy-schweben-b 6s ease-in-out infinite;
}
html body :is(.zy-knopf, .btn, .btn-primary, .btn-secondary, .cta-button, .card-lang):nth-child(2n) {
	animation: zy-schweben-c 7s ease-in-out -1.5s infinite;
}
html body :is(.zy-knopf, .btn, .btn-primary, .btn-secondary, .cta-button, .card-lang):is(:hover, :active) {
	animation-play-state: paused;
}
/* Nur die flachen Sprachknöpfe auf /demos bekommen Glas — alle anderen haben es schon. */
html body .card-lang {
	box-shadow: 0 10px 24px rgba(48, 49, 52, .22), inset 0 1px 0 rgba(250, 247, 242, .28);
	-webkit-backdrop-filter: blur(12px) saturate(1.2);
	backdrop-filter: blur(12px) saturate(1.2);
}

/* 4 · FILMKÄSTEN: glasig, schwebend — und die Kamerafahrt läuft auch dann,
   wenn das Handy (Samsung-Energiesparen) das Video blockiert und nur das Standbild zeigt. */
.reel-kasten { overflow: hidden; }
.reel-kasten video, .reel-kasten img {
	animation: zy-leben-b 50s ease-in-out infinite;
	will-change: transform;
	transform-origin: 50% 50%;
}
html body .reel-kasten {
	position: relative;
	box-shadow:
		0 22px 48px rgba(48, 49, 52, .30),
		0 2px 6px rgba(48, 49, 52, .14),
		inset 0 1px 0 rgba(250, 247, 242, .34) !important;
	animation: zy-kachel-schweb-b 8.5s ease-in-out -2s infinite;
}

/* 5 · FILMKASTEN GLAS — gemessen live 13.09.: schwebte, aber ohne Glasfilter. */
html body .reel-kasten {
	-webkit-backdrop-filter: blur(16px) saturate(1.2);
	backdrop-filter: blur(16px) saturate(1.2);
}