/**
 * Coco Effects — gemeinsame Buehne fuer "Coco Reveal" und "Coco Geraet".
 *
 * Gleiches Prinzip wie beim Coco Hero: ein aeusserer Container gibt nur die
 * Scroll-Laenge her, eine innere Buehne haelt per position:sticky am
 * Bildschirmrand fest. Kein Pinning, kein GSAP, kein Scroll-Hijacking.
 *
 * WICHTIG bei Aenderungen:
 * - Der aeussere Container darf KEIN overflow:hidden bekommen, sonst ist
 *   position:sticky wirkungslos. Das overflow gehoert auf die Buehne.
 * - Kein !important auf Eigenschaften, die das JS ueber Custom Properties
 *   steuert.
 *
 * Das JS schreibt einen Fortschritt --coco-p (0..1) auf den aeusseren
 * Container. Alles Weitere leitet sich hier per calc() daraus ab.
 */

.coco-fx {
	--coco-p: 0;
	--coco-scroll: 400;
	position: relative;
	overflow: visible;
	min-height: calc( var( --coco-stage-h, 85vh ) + var( --coco-scroll ) * 1vh );
}

.coco-fx__stage {
	position: sticky;
	top: 0;
	height: var( --coco-stage-h, 85vh );
	overflow: hidden;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Textebenen liegen ueber allem, blenden aber nur ein und aus —
   sie scrollen nicht mit, anders als beim Coco Hero. */
.coco-fx__text {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: min(92%, 1100px);
	z-index: 5;
	pointer-events: none;
	text-align: center;
}

.coco-fx__text a,
.coco-fx__text button {
	pointer-events: auto;
}

.coco-fx__title {
	margin: 0;
	line-height: 1.08;
}

.coco-fx__body {
	margin: 1rem 0 0;
	line-height: 1.6;
}

.coco-fx__button {
	display: inline-block;
	margin-top: 1.5rem;
	padding: 0.8em 2em;
	border: 1px solid currentColor;
	border-radius: 999px;
	color: inherit;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* ==================================================================
   Coco Reveal — die Maske zieht auf einem Foto auf.
   ================================================================== */

.coco-reveal__photo {
	position: absolute;
	inset: 0;
	z-index: 2;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	--coco-size: 340px;
	-webkit-mask-image: var(--coco-mask);
	mask-image: var(--coco-mask);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: var(--coco-fx-x, 50%) var(--coco-fx-y, 20%);
	mask-position: var(--coco-fx-x, 50%) var(--coco-fx-y, 20%);
	-webkit-mask-size: var(--coco-size) auto;
	mask-size: var(--coco-size) auto;
	will-change: -webkit-mask-size, mask-size;
}

/* Ebene 1 liegt unter der Maske sichtbar auf dem Skizzen-Hintergrund,
   Ebene 2 darueber auf dem freigelegten Foto. */
.coco-reveal__text--1 { top: 46%; z-index: 3; opacity: 1; }
.coco-reveal__text--2 { top: 50%; transform: translate(-50%, -50%); z-index: 6; opacity: 0; }
/* Statisch (reduced motion, kein JS-Antrieb): Endzustand zeigt Layer 2. */
.coco-fx--static .coco-reveal__text--2 { opacity: 1; }

/* ==================================================================
   Coco Geraet — Vollbild schrumpft in einen Rahmen.
   ================================================================== */

.coco-device__screen {
	position: absolute;
	left: 50%;
	top: var(--coco-screen-top, 50%);
	transform: translate(-50%, -50%);
	z-index: 2;
	overflow: hidden;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	border-style: solid;
	border-color: var(--coco-frame, #1a1d24);
	/* Von Vollbild auf Zielgroesse, gesteuert ueber --coco-q (0..1). */
	--coco-q: 0;
	width: calc(100% - (100% - var(--coco-w, 72vmin)) * var(--coco-q));
	height: calc(100% - (100% - var(--coco-h, 45vmin)) * var(--coco-q));
	border-width: calc(var(--coco-border, 1.2vmin) * var(--coco-q));
	border-radius: calc(var(--coco-radius, 1.6vmin) * var(--coco-q));
}

.coco-device__shot {
	position: absolute;
	inset: 0;
	z-index: 3;
	opacity: 0;
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
}

.coco-device__base {
	position: absolute;
	left: 50%;
	top: calc(var(--coco-screen-top, 50%) + var(--coco-h, 45vmin) / 2);
	transform: translate(-50%, 0);
	z-index: 2;
	width: calc(var(--coco-w, 72vmin) * 1.06);
	height: 2.6vmin;
	border-radius: 0 0 2vmin 2vmin;
	background: linear-gradient(var(--coco-frame-light, #3a3f4a), var(--coco-frame, #23262e));
	opacity: 0;
	pointer-events: none;
}

.coco-device__text { top: 4%; z-index: 6; }

/* ==================================================================
   Mobil und Barrierefreiheit: Buehne loesen, Endzustand zeigen.
   ================================================================== */

.coco-fx--static .coco-fx__stage { position: relative; height: 85vh; }
.coco-fx--static { min-height: 0; }
.coco-fx--static .coco-reveal__photo {
	-webkit-mask-image: none;
	mask-image: none;
}
.coco-fx--static .coco-reveal__text--1 { display: none; }
.coco-fx--static .coco-device__screen { --coco-q: 1; }
.coco-fx--static .coco-device__shot,
.coco-fx--static .coco-device__base { opacity: 1; }

@media (max-width: 767px) {
	.coco-fx--mobile-off .coco-fx__stage { position: relative; height: 85vh; }
	.coco-fx--mobile-off { min-height: 0; }
	.coco-fx--mobile-off .coco-reveal__photo {
		-webkit-mask-image: none;
		mask-image: none;
	}
	.coco-fx--mobile-off .coco-reveal__text--1 { display: none; }
	.coco-fx--mobile-off .coco-reveal__text--2 { opacity: 1; }
	.coco-fx--mobile-off .coco-device__screen { --coco-q: 1; }
	.coco-fx--mobile-off .coco-device__shot,
	.coco-fx--mobile-off .coco-device__base { opacity: 1; }
}

/* ---------- Bildschirm-Inhalt: Screenshot & Video ---------- */

/* Screenshot: langes Webseiten-Bild, im Screen geclippt und vertikal gescrollt. */
.coco-device__scroll {
	position: absolute;
	inset: 0;
	z-index: 3;
	overflow: hidden;
	border-radius: inherit;
}
.coco-device__shotlong {
	display: block;
	width: 100%;
	height: auto;
	transform: translateY( 0 );
	will-change: transform;
}

/* Video im Screen. */
.coco-device__video {
	position: absolute;
	inset: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	background: #000;
}

/* Statisch/Mobile-off: Screenshot oben zeigen. */
.coco-fx--static .coco-device__shotlong,
.coco-fx--mobile-off .coco-device__shotlong { transform: translateY( 0 ); }

/* ==================================================================
   Bündig-Modus: naechste Section direkt unter dem kompakten Effekt,
   kein Weissraum. Die Elementor-Section, die das Reveal-Widget
   enthaelt, bekommt die Klasse "coco-flush-parent". Die Section wird
   transparent + nach vorn gestellt, ihre Rest-Scroll-Strecke (Runway)
   per negativem Margin "eingezogen", sodass die naechste Section
   direkt darunter sitzt und beim Scrollen HINTER dem gepinnten Effekt
   hochlaeuft. pointer-events sorgt dafuer, dass Klicks im transparenten
   Bereich auf die dahinterliegende Section durchgehen.
   ================================================================== */
.coco-flush-parent {
	position: relative;
	z-index: 2;
	background: transparent !important;
	pointer-events: none;
	/* Runway "einziehen": naechste Section rueckt genau um die
	   Scroll-Strecke nach oben. Fallback 100 = Standard scroll_length;
	   das JS setzt --coco-scroll auf der Section auf den echten Wert. */
	margin-bottom: calc( -1 * var( --coco-scroll, 100 ) * 1vh );
}
.coco-flush-parent .coco-fx__stage {
	pointer-events: auto;
}
/* Elementor setzt die Section-Hintergrundfarbe recht spezifisch — hier
   mit zwei Klassen ueberstimmen, damit im Buendig-Modus die dahinter
   hochlaufende Section durchscheint statt eines Farbblocks. */
.coco-flush-parent.elementor-element {
	background-color: transparent !important;
	background-image: none !important;
}