/* Klingel Prozessanimation
   Buehne: 1969 x 1099. Alle Groessen in cqw, damit die Szene stufenlos skaliert. */

.kp-root{
	--kp-red:#e30514;
	--kp-line-in:520ms;
	--kp-text-in:620ms;
	--kp-max:1500px;
	position:relative;
}

.kp-heading{margin:0 0 1.2em}

/* Aus dem Theme-Container ausbrechen, damit die Buehne die volle
   Fensterbreite nutzen kann. overflow-x:clip verhindert, dass dabei
   eine waagerechte Bildlaufleiste entsteht. */
.kp-root.kp-full{
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	overflow-x:clip;
}

/* Platzhalter fuer die scrollgesteuerte Variante. Ohne .kp-pin ist er
   ein gewoehnlicher Block ohne Eigenhoehe. */
.kp-wrap{position:relative}

@media (min-width:1001px){
	/* Hoehe des Platzhalters = eine Fensterhoehe (die der festgehaltene
	   Abschnitt einnimmt) + Aufbaustrecke + Haltestrecke. Dadurch decken
	   sich Start und Ende der Animation exakt mit den eingestellten
	   Pixelwerten. */
	.kp-pin .kp-wrap{
		height:calc(100vh + var(--kp-anim,1600px) + var(--kp-hold,500px));
	}
	/* Drei Zustaende, alle per JavaScript gesetzt:
	     ohne Klasse  vor dem Ablauf, steht oben im Platzhalter
	     .is-held     waehrend des Ablaufs, am Fenster festgehalten
	     .is-past     danach, steht unten im Platzhalter
	   Bewusst kein position:sticky: das faellt in manchen Seiten-
	   aufbauten lautlos aus, hier ist das Verhalten ueberall gleich. */
	.kp-pin .kp-sticky{
		position:absolute;top:0;left:0;width:100%;height:100vh;
		display:flex;align-items:center;justify-content:center;
	}
	.kp-pin .kp-sticky.is-held{position:fixed;top:0}
	.kp-pin .kp-sticky.is-past{position:absolute;top:auto;bottom:0}
	/* Im festgehaltenen Zustand richtet sich die Groesse nach der
	   Fensterhoehe, damit die Buehne den Bildschirm ausfuellt. Die
	   maximale Breite gilt hier bewusst nicht, sonst bleibt auf grossen
	   Monitoren rundherum viel leere Flaeche stehen. */
	.kp-pin .kp-scene{
		width:min(100%, calc(94vh * 1969 / 1099));
		max-width:none;
	}
}

/* Diagnoseanzeige, nur mit debug="1" im Shortcode */
.kp-debug{
	position:fixed;left:12px;bottom:12px;z-index:99999;
	background:#111;color:#fff;font:12px/1.5 monospace;
	padding:10px 14px;border-radius:4px;max-width:340px;white-space:pre-wrap;
}
.kp-debug b{color:#ff6b6b;font-weight:400}

/* ---------------- Desktop ---------------- */
.kp-scene{
	position:relative;
	width:100%;
	max-width:var(--kp-max,1500px);
	margin:0 auto;
	aspect-ratio:1969/1099;
	container-type:inline-size;
	overflow:hidden;
}
.kp-scene > svg{position:absolute;inset:0;width:100%;height:100%}

.kp-img{
	position:absolute;
	height:auto;
	max-width:none;
	opacity:0;
	transform:translate3d(0,2.2cqw,0) scale(.985);
	transition:opacity 900ms ease, transform 1100ms cubic-bezier(.16,.72,.24,1);
	transition-delay:var(--kp-d,0ms);
}
.kp-img.is-on{opacity:1;transform:none}

.kp-st{position:absolute}
.kp-rule{
	position:absolute;
	left:-1.854cqw;
	top:calc(-1 * var(--kp-up,0cqw));
	width:.115cqw;
	min-width:1.5px;
	height:calc(100% + var(--kp-up,0cqw) + var(--kp-down,0cqw));
	background:var(--kp-red);
	transform:scaleY(0);
	transform-origin:top center;
	transition:transform var(--kp-line-in) cubic-bezier(.32,.78,.24,1);
	transition-delay:var(--kp-d,0ms);
}
.kp-st > .kp-el{
	opacity:0;
	transform:translate3d(-1.1cqw,0,0);
	transition:opacity var(--kp-text-in) ease,
	           transform var(--kp-text-in) cubic-bezier(.2,.72,.26,1),
	           background-color 220ms ease, color 220ms ease;
	transition-delay:calc(var(--kp-d,0ms) + var(--kp-i,0ms));
}
.kp-st.is-on .kp-rule{transform:scaleY(1)}
.kp-st.is-on > .kp-el{opacity:1;transform:none}

.kp-st .kp-title{
	margin:0;font-size:1.219cqw;line-height:1.4;font-weight:600;
	letter-spacing:-.005em;--kp-i:90ms;
}
.kp-st .kp-body{margin:.55cqw 0 0;font-size:.863cqw;line-height:1.45;--kp-i:170ms}
.kp-st .kp-body.kp-accent{
	color:var(--kp-red);font-size:1.067cqw;font-weight:600;margin-top:.35cqw;
}
.kp-st .kp-cta{
	display:inline-block;margin-top:1.12cqw;padding:.36cqw 1.17cqw;--kp-i:250ms;
	border:1px solid var(--kp-red);border-radius:3px;color:var(--kp-red);
	font-size:.762cqw;line-height:1.5;text-decoration:none;white-space:nowrap;
}

/* ---------------- Mobil ---------------- */
.kp-mobile{
	position:relative;
	max-width:520px;
	margin:0 auto;
	padding:34px 22px 70px;
	display:none;
}
.kp-mobile > svg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

.kp-mst{position:relative;z-index:1;margin-bottom:54px}
.kp-mst:last-child{margin-bottom:0}
.kp-mst > img{
	display:block;width:74%;max-width:300px;height:auto;margin:0 0 20px;
	opacity:0;transform:translateY(18px);
	transition:opacity .8s ease,transform .8s cubic-bezier(.16,.72,.24,1);
	transition-delay:calc(var(--kp-d,0ms) + 120ms);
}
.kp-mblock{position:relative;padding-left:26px}
.kp-mrule{
	position:absolute;left:0;top:calc(-1 * var(--kp-up,0px));
	width:2px;height:calc(100% + var(--kp-up,0px) + var(--kp-down,0px));
	background:var(--kp-red);transform:scaleY(0);transform-origin:top center;
	transition:transform var(--kp-line-in) cubic-bezier(.32,.78,.24,1);
	transition-delay:var(--kp-d,0ms);
}
.kp-mblock > .kp-el{
	opacity:0;transform:translateX(-12px);
	transition:opacity var(--kp-text-in) ease,
	           transform var(--kp-text-in) cubic-bezier(.2,.72,.26,1),
	           background-color 220ms ease, color 220ms ease;
	transition-delay:calc(var(--kp-d,0ms) + var(--kp-i,0ms));
}
.kp-mst.is-on > img,
.kp-mst.is-on .kp-mblock > .kp-el{opacity:1;transform:none}
.kp-mst.is-on .kp-mrule{transform:scaleY(1)}

.kp-mst .kp-title{margin:0;font-size:22px;font-weight:600;--kp-i:90ms}
.kp-mst .kp-body{margin:8px 0 0;font-size:16px;line-height:1.5;--kp-i:170ms}
.kp-mst .kp-body.kp-accent{color:var(--kp-red);font-size:20px;font-weight:600}
.kp-mst .kp-cta{
	display:inline-block;margin-top:18px;padding:8px 20px;--kp-i:250ms;
	border:1px solid var(--kp-red);border-radius:3px;color:var(--kp-red);
	text-decoration:none;font-size:15px;
}

.kp-root .kp-cta:hover,
.kp-root .kp-cta:focus-visible{background-color:var(--kp-red);color:#fff}
.kp-root .kp-cta:focus-visible{outline:2px solid var(--kp-red);outline-offset:3px}

/* Uebergaenge kurz abschalten, damit ein Neustart aus dem Ausgangszustand beginnt */
.kp-root.kp-freeze .kp-img,
.kp-root.kp-freeze .kp-rule,
.kp-root.kp-freeze .kp-st > .kp-el,
.kp-root.kp-freeze .kp-mst > img,
.kp-root.kp-freeze .kp-mrule,
.kp-root.kp-freeze .kp-mblock > .kp-el{transition:none !important}

@media (max-width:1000px){
	.kp-scene{display:none}
	.kp-mobile{display:block}
}

@media (prefers-reduced-motion:reduce){
	.kp-img,.kp-rule,.kp-st > .kp-el,
	.kp-mst > img,.kp-mrule,.kp-mblock > .kp-el{transition-duration:1ms !important}
}