/* ═══════════════════════════════════════════════════════════════════════
   ZEYNAH — SCHAUFENSTER (24.08.2026, zweite Fassung nach Farbbug)

   Gefundener Fehler: Der Hero hatte einen HELLEN Schleier über dem
   dunklen Grundfilm. Der Lesbarkeits-Wächter in zeynah-grundlage.js
   misst den Film als dunklen Koerper und färbt die Schrift auf Creme —
   Creme auf Creme: „helle Schrift auf hellem Grund, alles sieht anders
   aus". Das Original war umgekehrt: Hero DUNKEL, Film sichtbar,
   Schrift Creme. Diese Fassung stellt genau das wieder her und erzwingt
   das Schachbrett mit höherer Spezifität (`body > section`), damit die
   alten Inline-Regeln der Seite es nicht mehr aushebeln.

   Ordnung der Baender (body > section, gemessen am 24.08.):
     1 Hero          dunkel (Film + dunkler Schleier)   [Ausnahme]
     2 Vertrauen     dunkel (gerade, Film schimmert)
     3 Workforce     hell
     4 Abgrenzung    dunkel
     5 Schaufenster  hell — dunkle Glaskacheln
     6 Branchen      dunkel — helle Glaskacheln
     7 Dashboards    hell — dunkle Glaskacheln
     8 Live-Streifen dunkel (Film schimmert)
     9 Preise        hell — dunkle Preiskacheln
    10 Markenfilm    hell
    11 FAQ           hell
    12 Kontakt       dunkel (Film schimmert)
    13 Schluss-CTA   hell

   Palette (fest):
     Anthrazit  #303134 / #404144   Creme #faf7f2 / #f0e9dd
     Blau       #005bb8 (Knopf)     Akzent #0071e3 (nie Schriftgrund)
     Hellblau   #9ccafe (auf Dunkel) Teal #00c4aa  Gold #c9a25e
     KEIN Lila. Nirgends.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hintergrundfilm der ganzen Seite ─────────────────────────────────── */
#zy-grund {
	position: fixed; inset: 0; width: 100vw; height: 100vh;
	object-fit: cover; z-index: 0; pointer-events: none;
}
body > *:not(#zy-grund):not(#z-splash) { position: relative; z-index: 1; }

/* Die Filme IN den Baendern duerfen nicht von der Inline-Regel
   `section > * { max-width:1280px; padding:2rem }` eingezaeunt werden —
   sonst schwimmt das Bandvideo als schmaler Streifen in der Mitte. */
body > section > .hg-film, body > section > .sch {
	max-width: none !important; width: 100% !important;
	margin: 0 !important; padding: 0 !important;
}

/* ── SCHACHBRETT, erzwungen ───────────────────────────────────────────── */
/* Ungerade Baender: HELL (Creme), dunkle Schrift. */
body > section:nth-of-type(odd):not(.hg-traeger) {
	background: linear-gradient(180deg, rgba(250,247,242,.97) 0%, rgba(240,233,221,.97) 100%) !important;
	color: #303134 !important;
}
body > section:nth-of-type(odd):not(.hg-traeger) h1,
body > section:nth-of-type(odd):not(.hg-traeger) h2,
body > section:nth-of-type(odd):not(.hg-traeger) h3 { color: #303134 !important; }
body > section:nth-of-type(odd):not(.hg-traeger) p,
body > section:nth-of-type(odd):not(.hg-traeger) li,
body > section:nth-of-type(odd):not(.hg-traeger) .lead,
body > section:nth-of-type(odd):not(.hg-traeger) .block-lead { color: #4a4a5a !important; }
body > section:nth-of-type(odd):not(.hg-traeger) .eyebrow { color: #005bb8 !important; }
body > section:nth-of-type(odd):not(.hg-traeger) .faq-item summary { color: #303134 !important; }
body > section:nth-of-type(odd):not(.hg-traeger) .faq-item { border-bottom-color: rgba(48,49,52,.12) !important; }

/* Gerade Baender: DUNKEL (Anthrazit), Creme-Schrift. Halbdeckend, damit
   der Grundfilm hindurchschimmert — das Hintergrundvideo bleibt spuerbar. */
body > section:nth-of-type(even) {
	background: linear-gradient(180deg, rgba(48,49,52,.88) 0%, rgba(64,65,68,.93) 100%) !important;
	color: #faf7f2 !important;
}
body > section:nth-of-type(even) h1,
body > section:nth-of-type(even) h2,
body > section:nth-of-type(even) h3 { color: #faf7f2 !important; }
body > section:nth-of-type(even) p,
body > section:nth-of-type(even) li,
body > section:nth-of-type(even) .lead,
body > section:nth-of-type(even) .block-lead { color: rgba(250,247,242,.9) !important; }
body > section:nth-of-type(even) .eyebrow,
body > section:nth-of-type(even) h1 em,
body > section:nth-of-type(even) h2 em { color: #9ccafe !important; }
body > section:nth-of-type(even) .btn-secondary {
	color: #faf7f2 !important; border-color: rgba(250,247,242,.45) !important;
}
body > section:nth-of-type(even) .btn-secondary:hover {
	border-color: #9ccafe !important; color: #9ccafe !important;
}

/* ── KACHELN: Glas, schwebend, Gegenstueck zum Band ───────────────────── */
/* Auf HELLEN Baendern: dunkle Glaskacheln. */
body > section:nth-of-type(odd):not(.hg-traeger) .card,
body > section:nth-of-type(odd):not(.hg-traeger) .price-card {
	background: rgba(64, 65, 68, .88) !important;
	border: 1.5px solid rgba(0, 113, 227, .32) !important;
	backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1);
	box-shadow: 0 22px 50px rgba(48, 49, 52, .24), inset 0 1px 0 rgba(250, 247, 242, .16);
	color: #faf7f2;
}
body > section:nth-of-type(odd):not(.hg-traeger) .card h3,
body > section:nth-of-type(odd):not(.hg-traeger) .price-card h3,
body > section:nth-of-type(odd):not(.hg-traeger) .price-card .price { color: #faf7f2 !important; }
body > section:nth-of-type(odd):not(.hg-traeger) .card p,
body > section:nth-of-type(odd):not(.hg-traeger) .card .sol-cta,
body > section:nth-of-type(odd):not(.hg-traeger) .price-card p,
body > section:nth-of-type(odd):not(.hg-traeger) .price-card li,
body > section:nth-of-type(odd):not(.hg-traeger) .price-card .desc,
body > section:nth-of-type(odd):not(.hg-traeger) .price-card .price-unit { color: rgba(250, 247, 242, .88) !important; }

/* Auf DUNKLEN Baendern: helle Glaskacheln — glasig, farbig umrandet. */
body > section:nth-of-type(even) .card {
	background: rgba(250, 247, 242, .08) !important;
	border: 1.5px solid rgba(156, 202, 254, .38) !important;
	backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15);
	box-shadow: 0 24px 55px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(250, 247, 242, .20);
	color: #faf7f2;
}
body > section:nth-of-type(even) .card h3 { color: #faf7f2 !important; }
body > section:nth-of-type(even) .card p,
body > section:nth-of-type(even) .card .sol-cta { color: rgba(250, 247, 242, .88) !important; }
body > section:nth-of-type(even) .card:hover {
	box-shadow: 0 34px 80px rgba(0, 0, 0, .38), 0 0 0 1px rgba(156, 202, 254, .28),
		inset 0 1px 0 rgba(250, 247, 242, .28) !important;
}

/* Schweben: alle Kacheln atmen leicht. */
.card, .price-card {
	animation: sfSchweben 9s ease-in-out infinite;
	will-change: translate;
}
.card:nth-child(2n), .price-card:nth-child(2n) { animation-delay: -3s; }
.card:nth-child(3n), .price-card:nth-child(3n) { animation-delay: -6s; }

/* ── HERO: dunkel, Film sichtbar, Creme-Schrift ───────────────────────── */
.hg-traeger { position: relative; overflow: hidden; background: transparent !important; }
.hg-film { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hg-film video { width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.hg-film__schleier {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(38,43,51,.72) 0%, rgba(38,43,51,.55) 45%, rgba(38,43,51,.85) 100%);
}
.hg-traeger .hero-grid { position: relative; z-index: 1; }
body > section.hg-traeger.hero h1 { color: #faf7f2 !important; }
body > section.hg-traeger.hero h1 em { color: #9ccafe !important; }
body > section.hg-traeger.hero .lead { color: rgba(250, 247, 242, .92) !important; }
body > section.hg-traeger.hero .eyebrow { color: #9ccafe !important; }
body > section.hg-traeger.hero .hero-micro,
body > section.hg-traeger.hero .micro { color: rgba(250, 247, 242, .8) !important; }
body > section.hg-traeger.hero .btn-secondary {
	color: #faf7f2 !important; border-color: rgba(250, 247, 242, .45) !important;
	background: rgba(48, 49, 52, .35);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
body > section.hg-traeger.hero .btn-secondary:hover {
	border-color: #9ccafe !important; color: #9ccafe !important;
}

/* Hero-Filmkachel: Glas, schwebend, farbig umrandet */
.hero-film {
	position: relative; border-radius: 20px; overflow: hidden;
	background: rgba(64, 65, 68, .55);
	border: 1.5px solid rgba(0, 113, 227, .45);
	box-shadow: 0 30px 70px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(250, 247, 242, .25);
	backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
	animation: sfSchweben 7s ease-in-out infinite;
	transform-style: preserve-3d; will-change: transform;
}
.hero-film-medium { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.hero-film-marke {
	position: absolute; top: 14px; left: 14px;
	background: rgba(48, 49, 52, .72); color: #9ccafe;
	border: 1px solid rgba(156, 202, 254, .4); border-radius: 999px;
	padding: .3rem .85rem; font-size: .72rem; font-weight: 600; letter-spacing: .12em;
	text-transform: uppercase; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* ── Film-Streifen in dunklen Baendern (sch = Schein) ─────────────────── */
.sch-traeger { position: relative; overflow: hidden; }
.sch { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.sch video {
	width: 100%; height: 100%; object-fit: cover; opacity: .5;
	filter: saturate(1.05);
}
.sch::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(48,49,52,.55), rgba(48,49,52,.4) 50%, rgba(48,49,52,.6));
}
.sch-traeger > *:not(.sch) { position: relative; z-index: 1; }

/* ── SCHAUFENSTER (Band 5, hell) ──────────────────────────────────────── */
section.schaufenster { position: relative; padding-top: 6rem; padding-bottom: 6rem; }
.sf-innen { max-width: 1200px; margin: 0 auto; }
.sf-gitter {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem;
	margin-top: 3rem; perspective: 1400px;
}
@media (max-width: 980px) { .sf-gitter { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sf-gitter { grid-template-columns: 1fr; } }

.sf-kachel {
	position: relative; border-radius: 20px; overflow: hidden;
	background: rgba(64, 65, 68, .62);
	backdrop-filter: blur(16px) saturate(1.12); -webkit-backdrop-filter: blur(16px) saturate(1.12);
	box-shadow: 0 24px 55px rgba(48, 49, 52, .26), inset 0 1px 0 rgba(250, 247, 242, .22);
	transition: box-shadow .35s ease;
	transform-style: preserve-3d; will-change: transform;
	animation: sfSchweben 8s ease-in-out infinite;
}
/* Randfarben wandern durch die Palette — nie eintönig, nie lila */
.sf-r1 { border: 1.5px solid rgba(0, 113, 227, .55); }
.sf-r2 { border: 1.5px solid rgba(0, 196, 170, .50); }
.sf-r3 { border: 1.5px solid rgba(201, 162, 94, .60); }
.sf-r4 { border: 1.5px solid rgba(156, 202, 254, .55); }
.sf-kachel:hover {
	box-shadow: 0 42px 90px rgba(48, 49, 52, .38), 0 0 0 1px rgba(0, 113, 227, .25),
		inset 0 1px 0 rgba(250, 247, 242, .3);
}
.sf-gross { grid-column: span 2; }
@media (max-width: 640px) { .sf-gross { grid-column: span 1; } }
.sf-kachel:nth-child(2n) { animation-delay: -2.6s; }
.sf-kachel:nth-child(3n) { animation-delay: -5.1s; }

.sf-medium {
	width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block;
	background: #404144;
}
.sf-gross .sf-medium { aspect-ratio: 16/8.2; }
.sf-bild .sf-medium { aspect-ratio: 4/4.4; }
.sf-text { padding: 1.3rem 1.5rem 1.5rem; color: #ebe3d6; }
.sf-text h3 {
	font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
	font-size: 1.45rem; color: #ebe3d6; margin: .35rem 0 .4rem;
}
.sf-text p { color: rgba(250, 247, 242, .88) !important; font-size: .93rem; line-height: 1.55; }
/* Schaufenster liegt auf einem hellen Band — die Schachbrett-Regel wuerde
   die Kacheltexte dunkel faerben. Dunkle Glaskachel = Creme-Schrift. */
body > section:nth-of-type(odd):not(.hg-traeger) .sf-text h3 { color: #ebe3d6 !important; }
body > section:nth-of-type(odd):not(.hg-traeger) .sf-text p { color: rgba(250, 247, 242, .88) !important; }
.sf-marke {
	display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .16em;
	text-transform: uppercase; color: #9ccafe;
	border: 1px solid rgba(156, 202, 254, .35); border-radius: 999px; padding: .22rem .7rem;
	background: rgba(0, 91, 184, .18);
}
.sf-link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.sf-link:focus-visible { outline: 2px solid #9ccafe; outline-offset: 3px; }
.sf-fuss { display: flex; gap: 1rem; justify-content: center; margin-top: 2.8rem; flex-wrap: wrap; }

@keyframes sfSchweben {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -9px; }
}

/* ── AB-KOPF: Abschnittsköpfe mit Bild neben dem Text ─────────────────── */
.ab-kopf {
	display: grid; grid-template-columns: 1.25fr .9fr; gap: 2.6rem;
	align-items: center; max-width: 1200px; margin: 0 auto 2.5rem;
}
.ab-kopf.ab-links .ab-kopf-text { order: 2; }
.ab-kopf.ab-links .ab-bild { order: 1; }
.ab-kopf .eyebrow, .ab-kopf h2 { text-align: left !important; }
.ab-bild {
	border-radius: 18px; overflow: hidden; position: relative;
	background: rgba(64, 65, 68, .6);
	backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	box-shadow: 0 22px 50px rgba(48, 49, 52, .30), inset 0 1px 0 rgba(250, 247, 242, .2);
	animation: sfSchweben 9s ease-in-out infinite;
}
.ab-hoch .ab-medium { aspect-ratio: 4/4.6; }
.ab-quer .ab-medium { aspect-ratio: 16/9.5; }
.ab-medium { width: 100%; object-fit: cover; display: block; background: #404144; }
.ab-bild.ab-r1 { border: 1.5px solid rgba(0, 113, 227, .5); }
.ab-bild.ab-r2 { border: 1.5px solid rgba(0, 196, 170, .45); }
.ab-bild.ab-r3 { border: 1.5px solid rgba(201, 162, 94, .55); }
.ab-bild.ab-r4 { border: 1.5px solid rgba(156, 202, 254, .5); }
@media (max-width: 860px) {
	.ab-kopf { grid-template-columns: 1fr; gap: 1.6rem; }
	.ab-kopf.ab-links .ab-kopf-text { order: 1; }
	.ab-kopf.ab-links .ab-bild { order: 2; }
}

/* ── Kartenbilder in den Branchen-/App-Karten ─────────────────────────── */
.card-bild {
	margin: -0.6rem -0.6rem 1.2rem; border-radius: 12px; overflow: hidden;
	border: 1px solid rgba(156, 202, 254, .22);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
}
.card-bild video, .card-bild img {
	width: 100%; aspect-ratio: 16/9.5; object-fit: cover; display: block;
	background: #303134;
}

/* ── Live-Bild im Einsatz-Streifen ────────────────────────────────────── */
.live-bild {
	max-width: 640px; margin: 0 auto 2rem; border-radius: 16px; overflow: hidden;
	border: 1.5px solid rgba(156, 202, 254, .35);
	box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}
.live-bild img { width: 100%; display: block; aspect-ratio: 16/7.5; object-fit: cover; }

/* ── Kontakt-Telefonzeile ─────────────────────────────────────────────── */
.kontakt-tel { text-align: center; font-size: 1.05rem; margin-bottom: .6rem; }
.kontakt-tel a { color: inherit; font-weight: 700; text-decoration: none; }
body > section:nth-of-type(even) .kontakt-tel a { color: #9ccafe !important; }
.kontakt-tel a:hover { text-decoration: underline; }

/* ── Newsletter-Kasten (glasig auf dunklem Band) ──────────────────────── */
.nl-kasten {
	max-width: 560px; margin: 3rem auto 0; padding: 2rem 2.2rem;
	border-radius: 18px; background: rgba(250, 247, 242, .07);
	border: 1.5px solid rgba(156, 202, 254, .30);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	box-shadow: 0 18px 44px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(250, 247, 242, .12);
}
.nl-kasten h3 {
	font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 1.5rem;
	color: #ebe3d6 !important; margin-bottom: .5rem;
}
.nl-kasten p { color: rgba(250, 247, 242, .88) !important; font-size: .92rem; line-height: 1.6; margin-bottom: 1.2rem; }
.nl-zeile { display: flex; gap: .6rem; }
.nl-zeile input {
	flex: 1; padding: .85rem 1.1rem; border-radius: 8px;
	border: 1px solid rgba(250, 247, 242, .25); background: rgba(250, 247, 242, .08);
	color: #ebe3d6; font-family: inherit; font-size: .95rem; outline: none;
}
.nl-zeile input:focus { border-color: #9ccafe; }
.nl-zeile input::placeholder { color: rgba(250, 247, 242, .7); }
.nl-zeile .cta-button { white-space: nowrap; }
.nl-ok {
	display: flex; gap: .6rem; align-items: flex-start; margin-top: 1rem;
	font-size: .82rem; color: rgba(250, 247, 242, .85) !important; cursor: pointer; line-height: 1.5;
}
.nl-ok input { margin-top: .2rem; accent-color: #005bb8; }
.nl-recht {
	display: inline-block; margin-top: .8rem; font-size: .8rem; color: #9ccafe !important;
	text-decoration: none;
}
.nl-recht:hover { text-decoration: underline; }
@media (max-width: 560px) { .nl-zeile { flex-direction: column; } }

/* ── WhatsApp-Schwebeknopf (glasig, grün umrandet) ────────────────────── */
#zw-whatsapp {
	position: fixed; right: 18px; bottom: 82px; z-index: 9997;
	display: inline-flex; align-items: center; gap: .55rem;
	padding: 12px 18px; border-radius: 999px; text-decoration: none;
	background: rgba(48, 49, 52, .78);
	backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15);
	border: 1.5px solid rgba(37, 211, 102, .55);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(250, 247, 242, .14);
	color: #faf7f2; font: 600 .92rem 'Inter', system-ui, sans-serif;
	transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease;
}
#zw-whatsapp svg { width: 22px; height: 22px; flex: none; }
#zw-whatsapp:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0, 0, 0, .36); }
#zw-whatsapp:active { transform: translateY(-1px) scale(.96); }
@media (max-width: 640px) {
	#zw-whatsapp .zw-text { display: none; }
	#zw-whatsapp { padding: 12px; }
}

/* ── 3D-Kippen (vom Skript gesetzt) ───────────────────────────────────── */
[data-3d] { transform-style: preserve-3d; }

/* ── Ruhig, wenn gewünscht ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.sf-kachel, .hero-film, .ab-bild, .card, .price-card { animation: none !important; }
	.sch video, .hg-film video, #zy-grund { display: none; }
	.hg-traeger { background: #404144 !important; }
}