/* ═══════════════════════════════════════════════════════════════════════════
   HDM Partikel-CTA

   Zur Bauweise der Farben: Jeder Stil setzt einen EIGENEN Variablensatz
   (--pc-s-…), und jede Nutzung fragt zuerst die Reglervariable ab:

       color: var( --pc-ink, var( --pc-s-ink, Rückfall ) );

   --pc-ink setzt ausschließlich der Farbregler. Ist er leer, existiert die
   Variable nirgends und die Kette fällt auf den Stilwert zurück. Ist er
   gesetzt, gewinnt er — sofort, auch im Editor.

   Stünden die Stilfarben direkt als --pc-ink auf .hdm-pc, schlügen sie jeden
   Regler: Elementor schreibt Reglerwerte auf den Elternknoten, und Vererbung
   verliert gegen jede Regel am Element selbst.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Die Stile ───────────────────────────────────────────────────────────── */

.hdm-pc--hell {
	--pc-s-schleier:   rgba(255, 255, 255, 0.90);
	--pc-s-akzent:     #0A55F0;
	--pc-s-punkt:      #16A34A;
	--pc-s-grund:      transparent;
	--pc-s-ink:        #06162F;
	--pc-s-ink2:       rgba(6, 22, 47, 0.66);
	--pc-s-p1:         #9CC9FF;
	--pc-s-p2:         #2E7BEF;
	--pc-s-p3:         #0A3FA8;
	--pc-s-linie:      rgba(46, 123, 239, 0.20);
	--pc-s-knopf:      #0A55F0;
	--pc-s-knopf-text: #FFFFFF;
	--pc-s-knopf-rand: #0A55F0;
	--pc-s-fokus:      #0A55F0;
}

.hdm-pc--dunkel {
	--pc-s-schleier:   rgba(7, 12, 19, 0.88);
	--pc-s-akzent:     #7FB2FF;
	--pc-s-punkt:      #34D399;
	--pc-s-grund:      #070C13;
	--pc-s-ink:        #EAF2FF;
	--pc-s-ink2:       rgba(197, 214, 238, 0.78);
	--pc-s-p1:         #DCEBFF;
	--pc-s-p2:         #4B9BFF;
	--pc-s-p3:         #1B4FD8;
	--pc-s-linie:      rgba(120, 180, 255, 0.20);
	--pc-s-knopf:      #2C6BFF;
	--pc-s-knopf-text: #FFFFFF;
	--pc-s-knopf-rand: #2C6BFF;
	--pc-s-fokus:      #8CC0FF;
}

.hdm-pc--signal {
	--pc-s-schleier:   rgba(10, 85, 240, 0.88);
	--pc-s-akzent:     #FFE38A;
	--pc-s-punkt:      #9BF5D6;
	--pc-s-grund:      #0A55F0;
	--pc-s-ink:        #FFFFFF;
	--pc-s-ink2:       rgba(255, 255, 255, 0.88);
	--pc-s-p1:         #FFFFFF;
	--pc-s-p2:         #FFFFFF;
	--pc-s-p3:         #D8E6FF;
	--pc-s-linie:      rgba(255, 255, 255, 0.24);
	--pc-s-knopf:      transparent;
	--pc-s-knopf-text: #FFFFFF;
	--pc-s-knopf-rand: rgba(255, 255, 255, 0.85);
	--pc-s-fokus:      #FFFFFF;
}

/* ── Wurzel ──────────────────────────────────────────────────────────────── */

/* Eigene Kastenrechnung. Elementor setzt das global, aber die Bühne hat
   Innenabstand UND width:100% — fehlt border-box, ist sie genau um den
   Abstand zu breit und die ganze Seite lässt sich seitlich schieben. Darauf
   zu vertrauen, dass ein fremdes Stylesheet das erledigt, wäre leichtsinnig. */
.hdm-pc,
.hdm-pc *,
.hdm-pc *::before,
.hdm-pc *::after {
	box-sizing: border-box;
}

.hdm-pc {
	--pc-ease: cubic-bezier(0.16, 1, 0.3, 1);

	position: relative;
	display: block;
	width: 100%;
	color: var(--pc-ink, var(--pc-s-ink, #06162F));
	font-family: inherit;
}

/* Vollflächiger Grund: --pc-leiste setzt das Skript auf die Breite der
   Bildlaufleiste. Ohne den Abzug wäre 100vw genau um diese Breite zu breit
   und die Seite ließe sich seitlich schieben. */
.hdm-pc--voll {
	width: calc(100vw - var(--pc-leiste, 0px));
	margin-left: calc(50% - (100vw - var(--pc-leiste, 0px)) / 2);
}

.hdm-pc__buehne {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--pc-hoehe, 620px);
	padding: var(--pc-polster, clamp(48px, 7vw, 96px)) clamp(18px, 4vw, 40px);
	background: var(--pc-grund, var(--pc-s-grund, transparent));
	overflow: hidden;
	isolation: isolate;
}

/* Scrollgesteuert: die Sektion ist hoch, die Bühne bleibt stehen. */
.hdm-pc--scroll { min-height: var(--pc-strecke, 220vh); }
.hdm-pc--scroll .hdm-pc__buehne {
	position: sticky;
	top: 0;
	/* svh = Fensterhoehe mit eingeblendeter Adressleiste. Mit 100vh raeche
	   sich am Telefon jedes Ein- und Ausfahren der Leiste als Sprung. */
	min-height: 100vh;
	min-height: 100svh;
}

.hdm-pc__feld {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* Das Logo dient nur als Vorlage zum Abtasten. */
.hdm-pc__quelle {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* ── Inhalt ──────────────────────────────────────────────────────────────── */

.hdm-pc__innen {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--pc-breite, 1180px);
	margin-inline: auto;
}

.hdm-pc .hdm-pc__inhalt {
	display: grid;
	justify-items: center;
	gap: var(--pc-luft, 16px);
	max-width: 56ch;
	margin-inline: auto;
	text-align: center;
}

/* Zwei Klassen, damit Theme- und Elementor-Regeln nicht gewinnen.
   Eine einzelne Klasse (0,1,0) verliert gegen .elementor-kit-N h2 (0,1,1). */
.hdm-pc .hdm-pc__eyebrow {
	margin: 0;
	font-family: var(--pc-eyebrow-schrift, inherit);
	font-style: normal;
	font-size: var(--pc-eyebrow-groesse, clamp(0.66rem, 1vw, 0.76rem));
	font-weight: 600;
	letter-spacing: 0.19em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--pc-ink2, var(--pc-s-ink2, rgba(6, 22, 47, 0.66)));
}

.hdm-pc .hdm-pc__claim {
	margin: 0;
	/* Die Schriftart MUSS hier stehen. Ein Theme-Kit setzt sie über
	   .elementor-kit-N h2 direkt am Element; ein blosses font-family:inherit
	   an der Wurzel wird davon gar nicht erst erreicht. */
	font-family: var(--pc-claim-schrift, inherit);
	font-size: var(--pc-claim-groesse, clamp(1.6rem, 4vw, 3rem));
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.034em;
	text-transform: none;
	font-style: normal;
	font-variant: normal;
	color: var(--pc-ink, var(--pc-s-ink, #06162F));
	text-wrap: balance;
}

/* Eigene Akzentfarbe je Stil. Auf --pc-s-knopf zurückzufallen war falsch:
   bei Signal ist der Knopf transparent — das Wort wäre unsichtbar gewesen.
   Gemessen gegen den jeweiligen Grund: hell 5,9 · dunkel 9,1 · Signal 4,7. */
.hdm-pc .hdm-pc__claim em {
	font-style: normal;
	color: var(--pc-akzent, var(--pc-s-akzent, #0A55F0));
}

.hdm-pc .hdm-pc__sub {
	margin: 0;
	max-width: 46ch;
	font-family: var(--pc-sub-schrift, inherit);
	font-size: var(--pc-sub-groesse, clamp(0.97rem, 1.6vw, 1.08rem));
	font-weight: 400;
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.65;
	color: var(--pc-ink2, var(--pc-s-ink2, rgba(6, 22, 47, 0.66)));
	text-wrap: pretty;
}

.hdm-pc .hdm-pc__aktionen {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 6px;
}

/* ── Knöpfe ──────────────────────────────────────────────────────────────── */

.hdm-pc .hdm-pc__knopf,
.hdm-pc .hdm-pc__knopf2 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: var(--pc-knopf-hoehe, 56px);
	padding: 0 var(--pc-knopf-polster, 32px);
	border: 0;
	border-radius: var(--pc-knopf-radius, 999px);
	font: inherit;
	font-size: var(--pc-knopf-groesse, 1rem);
	font-weight: 700;
	letter-spacing: -0.005em;
	text-decoration: none;
	text-transform: none;
	font-style: normal;
	cursor: pointer;
	transition: transform 0.28s var(--pc-ease), background-color 0.28s var(--pc-ease),
	            box-shadow 0.28s var(--pc-ease);
}

.hdm-pc .hdm-pc__knopf {
	background: var(--pc-knopf, var(--pc-s-knopf, #0A55F0));
	color: var(--pc-knopf-text, var(--pc-s-knopf-text, #fff));
}
.hdm-pc .hdm-pc__knopf:hover { transform: translateY(-3px); }

/* Umriss statt Fläche — auf farbigem Grund wirkt ein gefüllter Knopf wie ein
   Aufkleber. box-shadow statt border, damit der Knopf beim Umschalten nicht
   zwei Pixel größer wird und die Zeile darunter verschiebt. */
.hdm-pc.hdm-pc--umriss .hdm-pc__knopf {
	background: transparent;
	box-shadow: inset 0 0 0 1.5px var(--pc-knopf-rand, var(--pc-s-knopf-rand, #0A55F0));
}
.hdm-pc.hdm-pc--umriss .hdm-pc__knopf:hover {
	background: var(--pc-knopf-rand, var(--pc-s-knopf-rand, #0A55F0));
	color: var(--pc-grund, var(--pc-s-grund, #fff));
}

.hdm-pc .hdm-pc__knopf2 {
	background: transparent;
	color: var(--pc-ink, var(--pc-s-ink, #06162F));
	box-shadow: inset 0 0 0 1px var(--pc-knopf-rand, var(--pc-s-knopf-rand, rgba(6, 22, 47, 0.2)));
}
.hdm-pc .hdm-pc__knopf2:hover { transform: translateY(-3px); }

.hdm-pc .hdm-pc__knopf span,
.hdm-pc .hdm-pc__knopf2 span { transition: transform 0.28s var(--pc-ease); }
.hdm-pc .hdm-pc__knopf:hover span,
.hdm-pc .hdm-pc__knopf2:hover span { transform: translateX(4px); }

.hdm-pc .hdm-pc__knopf:focus-visible,
.hdm-pc .hdm-pc__knopf2:focus-visible {
	outline: 2px solid var(--pc-fokus, var(--pc-s-fokus, #0A55F0));
	outline-offset: 3px;
}

.hdm-pc .hdm-pc__vertrauen {
	margin: 4px 0 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: inherit;
	font-size: var(--pc-vertrauen-groesse, 0.84rem);
	font-weight: 400;
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.5;
	color: var(--pc-ink2, var(--pc-s-ink2, rgba(6, 22, 47, 0.66)));
}
.hdm-pc .hdm-pc__punkt {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pc-punkt, var(--pc-s-punkt, #16A34A));
	flex: 0 0 auto;
}

/* ── Auftritt des Textes ─────────────────────────────────────────────────── */

/* Versteckt wird nur, wenn das Skript das Widget übernommen hat — es setzt
   data-pc-init erst, wenn es die Leinwand wirklich bespielen kann. Stünde das
   opacity:0 unbedingt hier, wäre der Handlungsaufruf ohne JavaScript
   unsichtbar: ein Knopf, den niemand sieht, ist schlimmer als einer ohne
   Auftritt.
   Gleiche Spezifität wie die Zeile darunter — die gewinnt durch ihre Stellung. */
.hdm-pc[data-pc-init="ja"] .hdm-pc__inhalt > * {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.7s ease, transform 0.7s var(--pc-ease);
}
.hdm-pc.is-text .hdm-pc__inhalt > * { opacity: 1; transform: none; }

/* Versetzt, nicht alles auf einmal — das ist der Unterschied zwischen
   „eingeblendet" und „inszeniert". */
.hdm-pc.is-text .hdm-pc__inhalt > *:nth-child(1) { transition-delay: 0s; }
.hdm-pc.is-text .hdm-pc__inhalt > *:nth-child(2) { transition-delay: 0.09s; }
.hdm-pc.is-text .hdm-pc__inhalt > *:nth-child(3) { transition-delay: 0.17s; }
.hdm-pc.is-text .hdm-pc__inhalt > *:nth-child(4) { transition-delay: 0.25s; }
.hdm-pc.is-text .hdm-pc__inhalt > *:nth-child(5) { transition-delay: 0.33s; }

/* ── Anordnungen ─────────────────────────────────────────────────────────── */

/* Gestapelt (Vorgabe): Logo oben, Text darunter. Das Logo bekommt oben Platz,
   indem der Text nach unten rückt. */
.hdm-pc--gestapelt .hdm-pc__innen {
	display: flex;
	align-items: flex-end;
	min-height: var(--pc-innen-hoehe, 60vh);
}
.hdm-pc--gestapelt .hdm-pc__inhalt { width: 100%; }

/* Geteilt: Logo links, Text rechts. Das Skript misst den Textblock und setzt das Logo in die freie Spalte. */
.hdm-pc--geteilt .hdm-pc__innen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(24px, 4vw, 60px);
}
.hdm-pc--geteilt .hdm-pc__inhalt {
	grid-column: 2;
	justify-items: start;
	text-align: left;
	margin-inline: 0;
}
.hdm-pc--geteilt .hdm-pc__aktionen { justify-content: flex-start; }

/* Überlagert: der Text liegt mitten im Partikelfeld. */
.hdm-pc--ueberlagert .hdm-pc__innen {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--pc-innen-hoehe, 60vh);
}

/* Damit er dort auch lesbar bleibt, bekommt er einen weichen Schleier in der
   Grundfarbe. Ohne den kämpfen Partikel und Buchstaben um dieselbe Fläche —
   und die Partikel gewinnen. Der Verlauf hat keine sichtbare Kante, deshalb
   ein radialer und kein Kasten. */
.hdm-pc--ueberlagert .hdm-pc__inhalt {
	position: relative;
	padding: clamp(18px, 3vw, 40px);
}
.hdm-pc--ueberlagert .hdm-pc__inhalt::before {
	content: "";
	position: absolute;
	inset: -6% -8%;
	z-index: -1;
	border-radius: 26px;
	/* Deckender Kern über dem ganzen Textblock, weiche Kante nach aussen über
	   den Schlagschatten. Ein reiner Verlauf war falsch: Er lief schon
	   innerhalb des Textes aus, und ausgerechnet die Kopfzeile am oberen Rand
	   blieb unlesbar. Die Farbe ist die des Grundes — sichtbar ist also nur,
	   dass die Partikel dort zurücktreten. */
	background: var(--pc-schleier, var(--pc-s-schleier, rgba(255, 255, 255, 0.90)));
	box-shadow: 0 0 72px 52px var(--pc-schleier, var(--pc-s-schleier, rgba(255, 255, 255, 0.90)));
	pointer-events: none;
}
.hdm-pc--ueberlagert.hdm-pc--ohne-schleier .hdm-pc__inhalt::before { content: none; }

/* ── Tablet ──────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.hdm-pc--geteilt .hdm-pc__innen {
		grid-template-columns: 1fr;
		gap: clamp(18px, 4vw, 34px);
	}
	.hdm-pc--geteilt .hdm-pc__inhalt {
		grid-column: 1;
		justify-items: center;
		text-align: center;
		margin-inline: auto;
	}
	.hdm-pc--geteilt .hdm-pc__aktionen { justify-content: center; }
	/* Gestapelt braucht das Logo ein eigenes Band über dem Text. Ohne diesen
	   Abstand blieben oben und unten je unter 64 px frei, das Skript nahm
	   dann die ganze Bühne und legte den Schriftzug quer über Text und Knöpfe. */
	.hdm-pc--geteilt .hdm-pc__innen { padding-top: clamp(100px, 27vw, 160px); }
}

/* ── Telefon ─────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
	.hdm-pc__buehne { min-height: var(--pc-hoehe-m, 520px); }
	.hdm-pc--gestapelt .hdm-pc__innen,
	.hdm-pc--ueberlagert .hdm-pc__innen { min-height: var(--pc-innen-hoehe-m, 46vh); }
	.hdm-pc .hdm-pc__aktionen { width: 100%; flex-direction: column; }
	.hdm-pc .hdm-pc__knopf,
	.hdm-pc .hdm-pc__knopf2 { width: 100%; }
	.hdm-pc .hdm-pc__inhalt { max-width: none; }
	/* Das Logo-Band ersetzt den oberen Bühnenabstand; beides zusammen ließ
	   über dem Schriftzug rund 200 px Leere. */
	.hdm-pc--geteilt .hdm-pc__buehne { padding-top: 8px; }
}

/* ── Weniger Bewegung ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.hdm-pc__inhalt > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.hdm-pc .hdm-pc__knopf,
	.hdm-pc .hdm-pc__knopf2 { transition: none !important; }
}


/* ── Stil „Marke“ (4.3.0) ────────────────────────────────────────────────────
   Nachtblau mit Lichtkegel wie die Abschlüsse der Leistungsseiten, leuchtende
   Partikel, der Text steht auf einer Glaskarte. Hervorgehobenes Wort im
   Verlauf. Gemessen: Text 15,8 : 1, Unterzeile 8,9 : 1 auf dem dunkelsten
   Teil der Karte. */
.hdm-pc--marke {
	--pc-s-schleier:   rgba(6, 22, 47, 0.55);
	--pc-s-akzent:     #8FD0FF;
	--pc-s-punkt:      #34D399;
	--pc-s-grund:      radial-gradient(900px 520px at 85% 8%, rgba(46, 167, 255, 0.32), transparent 62%), radial-gradient(760px 480px at 0% 100%, rgba(10, 85, 240, 0.36), transparent 58%), linear-gradient(160deg, #0B2455 0%, #06162F 56%, #030B1B 100%);
	--pc-s-ink:        #FFFFFF;
	--pc-s-ink2:       rgba(226, 238, 255, 0.84);
	--pc-s-p1:         #E6F3FF;
	--pc-s-p2:         #62B6FF;
	--pc-s-p3:         #2E7BEF;
	--pc-s-linie:      rgba(143, 208, 255, 0.22);
	--pc-s-knopf:      #FFFFFF;
	--pc-s-knopf-text: #06162F;
	--pc-s-knopf-rand: rgba(255, 255, 255, 0.55);
	--pc-s-fokus:      #8FD0FF;
}
.hdm-pc--marke .hdm-pc__buehne::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(70% 80% at 50% 45%, #000, transparent 78%);
	mask-image: radial-gradient(70% 80% at 50% 45%, #000, transparent 78%);
	pointer-events: none;
}
.hdm-pc.hdm-pc--marke .hdm-pc__inhalt {
	padding: clamp(24px, 3.2vw, 44px);
	border-radius: 32px;
	background: linear-gradient(180deg, rgba(10, 30, 66, 0.62), rgba(6, 22, 47, 0.72));
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	backdrop-filter: blur(16px) saturate(1.4);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 40px 90px -40px rgba(0, 0, 0, 0.7);
}
.hdm-pc.hdm-pc--marke .hdm-pc__claim em {
	background: linear-gradient(90deg, #9AD6FF, #2EA7FF 60%, #6FB8FF);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.hdm-pc.hdm-pc--marke .hdm-pc__knopf { box-shadow: 0 18px 40px -16px rgba(46, 167, 255, 0.65); }
.hdm-pc.hdm-pc--marke .hdm-pc__knopf2 { color: #FFFFFF; background: rgba(255, 255, 255, 0.08); }