/*
 * PlayersHUB Coach-Ausbildung – Landingpage
 * Alles unter .ph-clp gescoped, damit nichts ins Theme ausbricht.
 * Keine externen Schriften: die Seite erbt die Theme-Schrift (Inter) mit System-Fallback.
 */

.ph-clp {
	--clp-bg: #0c0c0f;
	--clp-surface: #16161b;
	--clp-surface-2: #1c1c22;
	--clp-border: #2a2a33;
	--clp-border-soft: #23232b;
	--clp-text: #f4f4f5;
	--clp-muted: #a8a8b3;
	--clp-dim: #85858f;
	--clp-accent: #ef4444;
	--clp-accent-dark: #dc2626;
	--clp-accent-soft: rgba(239, 68, 68, 0.12);
	--clp-good: #34d399;
	--clp-good-soft: rgba(52, 211, 153, 0.1);
	--clp-radius: 18px;
	--clp-radius-sm: 12px;
	--clp-gap: clamp(16px, 2.2vw, 28px);
	--clp-section: clamp(52px, 7vw, 92px);
	--clp-max: 1180px;

	/* Wird per JavaScript gesetzt: Unterkante des klebenden Theme-Headers und Höhe der
	   Sprungnavigation. Die Werte hier greifen nur, solange das Skript nicht gelaufen ist. */
	--clp-top: 0px;
	--clp-jump-h: 60px;

	color-scheme: dark;
	background: transparent;
	margin-left: var(--clp-bleed-l, 0px);
	margin-right: var(--clp-bleed-r, 0px);
	color: var(--clp-text);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

.ph-clp.is-bleeding {
	background: var(--clp-bg);
}

.ph-clp *,
.ph-clp *::before,
.ph-clp *::after {
	box-sizing: border-box;
}

.ph-clp p {
	margin: 0 0 1em;
	color: var(--clp-muted);
}

.ph-clp p:last-child {
	margin-bottom: 0;
}

.ph-clp ul,
.ph-clp ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ph-clp a {
	color: inherit;
}

.ph-clp img {
	max-width: 100%;
	height: auto;
	display: block;
}

.ph-clp :focus-visible {
	outline: 2px solid var(--clp-accent);
	outline-offset: 3px;
	border-radius: 6px;
}

/* ------------------------------------------------------------------ Typografie */

.ph-clp-h1,
.ph-clp-h2,
.ph-clp-h3,
.ph-clp-h4 {
	margin: 0 0 0.4em;
	color: var(--clp-text);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.ph-clp-h1 {
	font-size: clamp(2rem, 4.6vw, 3.25rem);
}

.ph-clp-h2 {
	font-size: clamp(1.6rem, 3vw, 2.35rem);
}

.ph-clp-h3 {
	font-size: clamp(1.15rem, 1.6vw, 1.35rem);
}

.ph-clp-h4 {
	font-size: 1.05rem;
	line-height: 1.3;
}

.ph-clp-eyebrow {
	margin: 0 0 0.6em;
	color: var(--clp-accent);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ph-clp-lead {
	font-size: clamp(1rem, 1.2vw, 1.08rem);
	color: var(--clp-muted);
	max-width: 68ch;
}

.ph-clp-icon {
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
}

/* --------------------------------------------------------------- Sektionen */

.ph-clp-section {
	max-width: var(--clp-max);
	margin: 0 auto;
	padding: var(--clp-section) clamp(16px, 4vw, 32px);
	scroll-margin-top: calc(var(--clp-top) + var(--clp-jump-h) + 16px);
}

.ph-clp-head {
	max-width: 74ch;
	margin: 0 0 clamp(28px, 3.5vw, 44px);
}

.ph-clp-head .ph-clp-lead {
	margin-top: 0.6em;
}

.ph-clp-grid {
	display: grid;
	gap: var(--clp-gap);
}

.ph-clp-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ph-clp-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ph-clp-card {
	background: var(--clp-surface);
	border: 1px solid var(--clp-border);
	border-radius: var(--clp-radius);
	padding: clamp(20px, 2.4vw, 28px);
}

.ph-clp-closing {
	margin: clamp(24px, 3vw, 36px) 0 0;
	padding: 18px 22px;
	border-left: 3px solid var(--clp-accent);
	background: var(--clp-accent-soft);
	border-radius: 0 var(--clp-radius-sm) var(--clp-radius-sm) 0;
	color: var(--clp-text);
	font-size: 1.05rem;
	font-weight: 600;
}

/* ----------------------------------------------------------------- Buttons */

.ph-clp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 14px 24px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.ph-clp-btn--primary {
	background: var(--clp-accent);
	border-color: var(--clp-accent);
	color: #fff;
	box-shadow: 0 8px 24px rgba(239, 68, 68, 0.22);
}

.ph-clp-btn--primary:hover,
.ph-clp-btn--primary:focus {
	background: var(--clp-accent-dark);
	border-color: var(--clp-accent-dark);
	color: #fff;
	transform: translateY(-1px);
}

.ph-clp-btn--ghost {
	background: transparent;
	border-color: var(--clp-border);
	color: var(--clp-text);
}

.ph-clp-btn--ghost:hover,
.ph-clp-btn--ghost:focus {
	border-color: var(--clp-accent);
	color: #fff;
}

.ph-clp-btn--sm {
	padding: 10px 18px;
	font-size: 0.9rem;
}

.ph-clp-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: clamp(20px, 2.4vw, 28px) 0 0;
}

.ph-clp-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	margin-top: 0.8em;
	color: var(--clp-accent);
	font-weight: 600;
	text-decoration: none;
}

.ph-clp-link:hover {
	color: #fff;
}

.ph-clp-link .ph-clp-icon {
	transition: transform 0.15s ease;
}

.ph-clp-link:hover .ph-clp-icon {
	transform: translateX(3px);
}

/* ------------------------------------------------------------- Checklisten */

.ph-clp-checks {
	display: grid;
	gap: 10px;
	margin: 1.2em 0 0;
}

.ph-clp-checks li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--clp-text);
	font-size: 0.98rem;
	line-height: 1.5;
}

.ph-clp-checks--sm li {
	font-size: 0.92rem;
	color: var(--clp-muted);
}

.ph-clp-checks .ph-clp-icon {
	margin-top: 0.2em;
	color: var(--clp-accent);
}

/* ------------------------------------------------------------ Sprungnavigation */

.ph-clp-jump {
	position: sticky;
	top: var(--clp-top);
	z-index: 30;
	background: rgba(12, 12, 15, 0.92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--clp-border-soft);
}

.ph-clp-jump__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: var(--clp-max);
	margin: 0 auto;
	padding: 10px clamp(16px, 4vw, 32px);
}

.ph-clp-jump__list {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	scrollbar-width: none;
}

.ph-clp-jump__list::-webkit-scrollbar {
	display: none;
}

.ph-clp-jump__list a {
	display: block;
	padding: 8px 14px;
	border-radius: 999px;
	color: var(--clp-muted);
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.ph-clp-jump__list a:hover,
.ph-clp-jump__list a.is-active {
	background: var(--clp-surface-2);
	color: var(--clp-text);
}

.ph-clp-jump__cta {
	flex: 0 0 auto;
}

/* -------------------------------------------------------------------- Hero */

.ph-clp-hero {
	display: grid;
	/* Linke Spalte bewusst breit: dort steht das Video und soll möglichst groß sein. */
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
	max-width: var(--clp-max);
	margin: 0 auto;
	padding: clamp(44px, 6vw, 84px) clamp(16px, 4vw, 32px) clamp(28px, 3vw, 40px);
}

.ph-clp-hero__sub {
	margin: 0 0 0.8em;
	color: var(--clp-text);
	font-size: clamp(1.1rem, 1.7vw, 1.35rem);
	font-weight: 600;
	line-height: 1.35;
}

.ph-clp-hero__note {
	margin-top: 14px;
	font-size: 0.88rem;
	color: var(--clp-dim);
}

/* Video im Hero: füllt die Textspalte, auf dem Telefon die volle Breite. Das Seitenverhältnis
   liegt am Rahmen, damit vor dem Laden nichts springt. Der iframe steht 2px über den Rahmen hinaus
   und wird von ihm beschnitten: Bei krummen Pixelmaßen (z. B. 543,08px breit) zeichnet der Browser
   an den Kanten des Players eine helle Linie – das ist der Bildrand des Players selbst, kein
   Rahmen von uns. Die Überdeckung liegt außerhalb des sichtbaren Bereichs. */
.ph-clp-hero__video {
	position: relative;
	margin: clamp(18px, 2.4vw, 26px) 0 0;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--clp-border);
	border-radius: var(--clp-radius);
	background: #000;
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.ph-clp-hero__frame {
	position: absolute;
	top: -2px;
	left: -2px;
	display: block;
	width: calc(100% + 4px);
	/* Das Theme setzt iframe { max-width: 100% } – das würde die Überdeckung links/rechts kappen. */
	max-width: none;
	height: calc(100% + 4px);
	border: 0;
	background: #000;
}

.ph-clp-hero__card {
	position: sticky;
	top: calc(var(--clp-top) + var(--clp-jump-h) + 16px);
	background: linear-gradient(180deg, var(--clp-surface-2), var(--clp-surface));
	border: 1px solid var(--clp-border);
	border-radius: var(--clp-radius);
	padding: clamp(20px, 2.4vw, 28px);
}

.ph-clp-hero__card-title {
	margin: 0 0 16px;
	color: var(--clp-dim);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ph-clp-hero__dl {
	margin: 0;
	display: grid;
	gap: 12px;
}

.ph-clp-hero__dl > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--clp-border-soft);
}

.ph-clp-hero__dl dt {
	color: var(--clp-dim);
	font-size: 0.85rem;
}

.ph-clp-hero__dl dd {
	margin: 0;
	color: var(--clp-text);
	font-size: 0.92rem;
	font-weight: 600;
	text-align: right;
}

.ph-clp-hero__start {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 18px 0 0;
	padding: 14px 16px;
	background: var(--clp-accent-soft);
	border-radius: var(--clp-radius-sm);
	color: var(--clp-text);
	font-size: 0.92rem;
	font-weight: 600;
}

.ph-clp-hero__start .ph-clp-icon {
	margin-top: 0.15em;
	color: var(--clp-accent);
}

.ph-clp-hero__start small {
	display: block;
	margin-top: 2px;
	color: var(--clp-muted);
	font-size: 0.82rem;
	font-weight: 400;
}

/* ------------------------------------------------------------------ Trust */

.ph-clp-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--clp-border-soft);
}

.ph-clp-trust__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--clp-muted);
	font-size: 0.86rem;
	text-decoration: none;
}

a.ph-clp-trust__item:hover {
	color: var(--clp-text);
}

.ph-clp-stars {
	display: inline-flex;
	color: #fbbf24;
}

.ph-clp-stars .ph-clp-icon {
	width: 0.95em;
	height: 0.95em;
}

/* ----------------------------------------------------------------- Fakten */

.ph-clp-facts {
	max-width: var(--clp-max);
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 32px);
}

/* Ein Kasten, zwei Reihen: oben sechs kurze Fakten, darunter zwei breite Felder mit mehr Text.
   Die 1px-Lücken auf dem Rahmenhintergrund ergeben die Trennlinien – ohne eigene Rahmen je Feld. */
.ph-clp-facts__box {
	display: grid;
	gap: 1px;
	background: var(--clp-border-soft);
	border: 1px solid var(--clp-border-soft);
	border-radius: var(--clp-radius);
	overflow: hidden;
}

.ph-clp-facts__list,
.ph-clp-facts__more {
	display: grid;
	gap: 1px;
	background: var(--clp-border-soft);
}

.ph-clp-facts__list {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.ph-clp-facts__more {
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
}

.ph-clp-facts__more .ph-clp-fact {
	padding: 22px 24px 24px;
}

.ph-clp-facts__more .ph-clp-fact__note {
	margin-top: 6px;
	color: var(--clp-muted);
	font-size: 0.9rem;
	line-height: 1.55;
	max-width: 72ch;
}

.ph-clp-fact--highlight {
	background: linear-gradient(160deg, rgba(239, 68, 68, 0.14), var(--clp-surface) 65%);
}

.ph-clp-fact--highlight .ph-clp-fact__label {
	color: var(--clp-accent);
}

.ph-clp-fact {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 18px 20px;
	background: var(--clp-surface);
}

.ph-clp-fact__label {
	color: var(--clp-dim);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ph-clp-fact__value {
	color: var(--clp-text);
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.25;
}

.ph-clp-fact__note {
	color: var(--clp-dim);
	font-size: 0.82rem;
	line-height: 1.4;
}

/* --------------------------------------------------------- Realitätscheck */

.ph-clp-card--split .ph-clp-card__claim {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 0.7em;
	color: var(--clp-text);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
}

.ph-clp-card--split .ph-clp-card__claim .ph-clp-icon {
	margin-top: 0.1em;
	color: var(--clp-accent);
	width: 1.3em;
	height: 1.3em;
}

.ph-clp-card__why {
	font-size: 0.95rem;
}

.ph-clp-card__better {
	margin: 0;
	padding-top: 14px;
	border-top: 1px solid var(--clp-border-soft);
	color: var(--clp-text);
	font-size: 0.95rem;
}

.ph-clp-tag {
	display: inline-block;
	margin-right: 8px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--clp-good-soft);
	color: var(--clp-good);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	vertical-align: 2px;
}

/* ---------------------------------------------------------------- Module */

.ph-clp-module {
	position: relative;
	padding-top: 26px;
}

.ph-clp-module__num {
	position: absolute;
	top: 18px;
	right: 22px;
	color: var(--clp-border);
	font-size: 2.4rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
}

.ph-clp-module__kicker {
	margin: 0 0 0.35em;
	padding-right: 52px;
	color: var(--clp-accent);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ph-clp-card__text {
	font-size: 0.95rem;
}

.ph-clp-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: var(--clp-gap);
	padding: clamp(20px, 2.4vw, 28px);
	background: var(--clp-surface-2);
	border: 1px solid var(--clp-border);
	border-radius: var(--clp-radius);
}

.ph-clp-banner p {
	margin: 0;
	font-size: 0.95rem;
}

.ph-clp-banner .ph-clp-btn {
	flex: 0 0 auto;
}

/* -------------------------------------------------------------- Ausbilder */

.ph-clp-coach {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.ph-clp-coach__img {
	flex: 0 0 auto;
	width: 112px;
	height: 112px;
	border-radius: 16px;
	object-fit: cover;
	border: 1px solid var(--clp-border);
}

.ph-clp-coach__role {
	margin: 0;
	color: var(--clp-accent);
	font-size: 0.88rem;
	font-weight: 600;
}

/* ---------------------------------------------------------------- Stories */

.ph-clp-story {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
}

.ph-clp-story__img,
.ph-clp-story .ph-clp-video img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	/* Am oberen Rand ausrichten: der Zuschnitt nimmt unten weg, nie vom Kopf. */
	object-position: 50% 0;
}

.ph-clp-story__body {
	padding: 20px 22px 24px;
}

.ph-clp-story__body p {
	font-size: 0.92rem;
}

.ph-clp-video {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: var(--clp-surface-2);
	cursor: pointer;
}

.ph-clp-video__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #fff;
}

.ph-clp-video__play .ph-clp-icon {
	width: 58px;
	height: 58px;
	padding: 16px;
	border-radius: 50%;
	background: rgba(239, 68, 68, 0.92);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
	transition: transform 0.15s ease;
}

.ph-clp-video:hover .ph-clp-icon {
	transform: scale(1.06);
}

.ph-clp-video__hint {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 6px 10px;
	background: rgba(0, 0, 0, 0.62);
	color: #d4d4d8;
	font-size: 0.72rem;
	text-align: center;
}

.ph-clp-video__frame {
	aspect-ratio: 16 / 10;
	width: 100%;
	border: 0;
	display: block;
}

/* -------------------------------------------------------------------- Fit */

.ph-clp-fit ul {
	display: grid;
	gap: 12px;
	margin-top: 1.1em;
}

.ph-clp-fit li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.95rem;
	color: var(--clp-muted);
}

.ph-clp-fit--yes {
	border-color: rgba(52, 211, 153, 0.35);
}

.ph-clp-fit--yes .ph-clp-icon {
	margin-top: 0.2em;
	color: var(--clp-good);
}

.ph-clp-fit--no .ph-clp-icon {
	margin-top: 0.2em;
	color: var(--clp-dim);
}

/* ------------------------------------------------------------- Zertifikat */

.ph-clp-cert {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
}

.ph-clp-cert__img img {
	width: 100%;
	max-width: 360px;
	margin-inline: auto;
	border-radius: var(--clp-radius-sm);
	border: 1px solid var(--clp-border);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
	transition: transform 0.15s ease;
}

/* Das Bild ist eine Klickfläche: öffnet die Großansicht, damit der QR-Code scannbar ist. */
.ph-clp-cert__zoom {
	position: relative;
	display: block;
	width: 100%;
	max-width: 360px;
	margin-inline: auto;
	cursor: zoom-in;
	text-decoration: none;
}

.ph-clp-cert__zoom:hover img,
.ph-clp-cert__zoom:focus-visible img {
	transform: scale(1.015);
}

.ph-clp-cert__zoom-hint {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 12px;
	color: var(--clp-dim);
	font-size: 0.82rem;
}

.ph-clp-cert__zoom:hover .ph-clp-cert__zoom-hint {
	color: var(--clp-text);
}

/* ------------------------------------------------------------- Großansicht */

.ph-clp-lightbox {
	width: auto;
	max-width: min(96vw, 960px);
	max-height: 96vh;
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: var(--clp-radius-sm);
	background: transparent;
	color: var(--clp-text);
	overflow: visible;
}

.ph-clp-lightbox::backdrop {
	background: rgba(0, 0, 0, 0.86);
	backdrop-filter: blur(4px);
}

.ph-clp-lightbox__img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 88vh;
	margin-inline: auto;
	border-radius: var(--clp-radius-sm);
	background: #fff;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.ph-clp-lightbox__hint {
	margin: 12px 0 0;
	color: #d4d4d8;
	font-size: 0.85rem;
	text-align: center;
}

.ph-clp-lightbox__close {
	position: absolute;
	top: -14px;
	right: -14px;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--clp-border);
	border-radius: 50%;
	background: var(--clp-surface);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.ph-clp-lightbox__close:hover {
	background: var(--clp-accent);
	border-color: var(--clp-accent);
}

.ph-clp-lightbox__close .ph-clp-icon {
	width: 18px;
	height: 18px;
}

.ph-clp-cert .ph-clp-btn {
	margin-top: 22px;
}

/* ------------------------------------------------------------------ Preis */

.ph-clp-price {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: var(--clp-gap);
	align-items: start;
}

.ph-clp-price__main {
	padding: clamp(24px, 3vw, 34px);
	background: linear-gradient(160deg, rgba(239, 68, 68, 0.12), var(--clp-surface) 55%);
	border: 1px solid rgba(239, 68, 68, 0.3);
	border-radius: var(--clp-radius);
}

.ph-clp-price__options {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 18px;
}

.ph-clp-price__option {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ph-clp-price__label {
	color: var(--clp-dim);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ph-clp-price__value {
	color: #fff;
	font-size: clamp(1.5rem, 2.4vw, 1.9rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.ph-clp-price__note {
	color: var(--clp-dim);
	font-size: 0.8rem;
}

.ph-clp-price__or {
	padding-bottom: 6px;
	color: var(--clp-dim);
	font-size: 0.85rem;
	font-weight: 600;
}

.ph-clp-price__honesty {
	margin: 22px 0 0;
	padding: 14px 16px;
	background: rgba(255, 255, 255, 0.03);
	border-radius: var(--clp-radius-sm);
	color: var(--clp-muted);
	font-size: 0.9rem;
}

/* -------------------------------------------------------------------- FAQ */

.ph-clp-faq {
	display: grid;
	gap: 10px;
	max-width: 900px;
}

.ph-clp-faq__item {
	background: var(--clp-surface);
	border: 1px solid var(--clp-border);
	border-radius: var(--clp-radius-sm);
	overflow: hidden;
}

.ph-clp-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	cursor: pointer;
	list-style: none;
}

.ph-clp-faq__item summary::-webkit-details-marker {
	display: none;
}

.ph-clp-faq__q {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
}

.ph-clp-faq__item summary .ph-clp-icon {
	color: var(--clp-accent);
	transition: transform 0.2s ease;
}

.ph-clp-faq__item[open] summary .ph-clp-icon {
	transform: rotate(45deg);
}

.ph-clp-faq__a {
	padding: 0 20px 18px;
}

.ph-clp-faq__a p {
	font-size: 0.95rem;
	max-width: 78ch;
}

/* ---------------------------------------------------------------- Kontakt */

.ph-clp-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: var(--clp-gap);
	align-items: stretch;
}

/* Der Kalender wird hell dargestellt: Calendly zeichnet den Schritt „Bestätigungscode eingeben“
   mit dunklen Rahmen um die sechs Zeichenfelder, die auf dunklem Grund unsichtbar sind. Die Karte
   übernimmt deshalb den hellen Hintergrund des Widgets, damit keine Kante entsteht. */
.ph-clp-calendly {
	padding: 0;
	overflow: hidden;
	min-height: 320px;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-color: #e4e4e7;
}

/* Die Mindesthöhe steht schon vor dem Laden fest, damit nichts springt (Layout Shift). Sobald das
   Widget da ist, bestimmt es die Höhe selbst – sonst werden längere Schritte abgeschnitten. */
.ph-clp-calendly__mount {
	flex: 1 1 auto;
	display: grid;
	align-content: center;
	width: 100%;
	min-height: 700px;
	padding: 0;
	background: #fff;
}

.ph-clp-calendly__mount.is-loaded {
	display: block;
	min-height: 0;
}

.ph-clp-calendly__text {
	margin: 0;
	padding: 0 clamp(24px, 3vw, 36px);
	color: #52525b;
	font-size: 0.88rem;
	text-align: center;
}

.ph-clp-calendly__alt {
	margin: 0;
	padding: 12px clamp(16px, 2vw, 24px) 16px;
	background: #f4f4f5;
	font-size: 0.85rem;
	text-align: center;
	border-top: 1px solid #e4e4e7;
}

.ph-clp-calendly__alt a {
	color: #52525b;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ph-clp-calendly__alt a:hover {
	color: #18181b;
}

/* Eine echte height, nicht nur min-height: Der Calendly-Rahmen ist mit height="100%" ausgezeichnet,
   und eine Prozenthöhe greift nur, wenn das Elternelement eine feste Höhe hat. Mit min-height allein
   bleibt der Rahmen auf der iframe-Standardhöhe von 150px stehen – der Kalender wirkt abgehackt.
   Meldet Calendly die benötigte Höhe, überschreibt das den Wert nach oben; min-height ist der Boden
   dagegen, dass das Widget den Bereich auf ein paar Pixel zusammenfallen lässt. */
.ph-clp-calendly__embed {
	width: 100%;
	min-width: 0;
	height: 700px;
	min-height: 700px;
}

/* Nicht auf das Stylesheet von Calendly verlassen: Der Rahmen füllt seinen Container selbst.
   min-height: inherit greift, wenn Calendly eine unbrauchbar kleine Höhe gemeldet hat – dann ist
   die Prozenthöhe zwar winzig, der Rahmen behält aber die Mindesthöhe des Containers. */
.ph-clp-calendly__embed iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: inherit;
	border: 0;
}

.ph-clp-contact__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

.ph-clp-contact__hint {
	margin: 10px 0 0;
	font-size: 0.875rem;
	color: var(--clp-muted);
}

.ph-clp-contact__hint:empty {
	display: none;
}

.ph-clp-contact__alt .ph-clp-checks {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--clp-border-soft);
}

/* -------------------------------------------------------- Mobile CTA-Leiste */

.ph-clp-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	/* --clp-sticky-gap hält die rechte Ecke frei, wenn dort ein fremdes Widget klebt
	   (Chat-Button). Wird per JavaScript gemessen, ohne Fund bleibt es 0. */
	padding: 10px calc(16px + var(--clp-sticky-gap, 0px)) calc(10px + env(safe-area-inset-bottom)) 16px;
	background: rgba(12, 12, 15, 0.96);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--clp-border);
}

/* Die Leiste selbst bleibt fensterbreit, nur der Inhalt wird mittig begrenzt – sonst
   landen Preis und Knopf auf breiten Bildschirmen in den Ecken unter fremden Widgets
   (Google-Bewertungs-Badge links, Chat-Knopf rechts). */
.ph-clp-sticky__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	max-width: 960px;
	margin: 0 auto;
}

/* Der Knopf behält seine Breite, der Preistext daneben wird gekürzt – sonst bricht die
   Beschriftung auf zwei Zeilen und die Leiste wird doppelt so hoch. */
.ph-clp-sticky .ph-clp-btn {
	flex: 0 0 auto;
	white-space: nowrap;
}

.ph-clp-sticky[hidden] {
	display: none;
}

.ph-clp-sticky__text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	min-width: 0;
}

.ph-clp-sticky__text strong {
	color: #fff;
	font-size: 1rem;
}

.ph-clp-sticky__text span {
	color: var(--clp-dim);
	font-size: 0.76rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ------------------------------------------------------------ Breakpoints */

@media (max-width: 1100px) {
	.ph-clp-facts__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.ph-clp-facts__more {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 620px) {
	.ph-clp-facts__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ph-clp-facts__more .ph-clp-fact {
		padding: 18px 20px 20px;
	}
}

@media (max-width: 900px) {
	.ph-clp-grid--2,
	.ph-clp-grid--3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 901px) and (max-width: 1120px) {
	.ph-clp-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 980px) {
	.ph-clp-hero,
	.ph-clp-cert,
	.ph-clp-price,
	.ph-clp-contact__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ph-clp-hero__card {
		position: static;
	}

	.ph-clp-cert__img {
		order: -1;
	}

	.ph-clp-jump__cta {
		display: none;
	}
}

@media (max-width: 640px) {
	.ph-clp-coach {
		flex-direction: column;
	}

	.ph-clp-coach__img {
		width: 88px;
		height: 88px;
	}

	.ph-clp-actions .ph-clp-btn,
	.ph-clp-banner .ph-clp-btn,
	.ph-clp-cert .ph-clp-btn {
		width: 100%;
	}

	.ph-clp-module__num {
		font-size: 1.8rem;
	}
}

/* ------------------------------------------------------------------ Telefon

   Auf dem Telefon zählt jeder Pixel Breite. Innenabstände von Abschnitten, Karten und Knöpfen
   werden hier durchgehend kleiner – sonst steht der Text in einer schmalen Spalte mit breiten
   Rändern. Läuft der Block nicht über die volle Fensterbreite (Schalter aus oder vom Theme
   verhindert), liefert der Inhaltscontainer des Themes bereits einen Rand: dann fällt unserer
   zusätzlich kleiner aus, statt sich zu verdoppeln.                                          */

@media (max-width: 600px) {
	.ph-clp {
		--clp-section: 44px;
		--clp-gap: 14px;
	}

	.ph-clp-section,
	.ph-clp-hero,
	.ph-clp-facts {
		padding-left: 14px;
		padding-right: 14px;
	}

	.ph-clp:not(.is-bleeding) .ph-clp-section,
	.ph-clp:not(.is-bleeding) .ph-clp-hero,
	.ph-clp:not(.is-bleeding) .ph-clp-facts,
	.ph-clp:not(.is-bleeding) .ph-clp-jump__inner {
		padding-left: 4px;
		padding-right: 4px;
	}

	.ph-clp-hero {
		padding-top: 32px;
		padding-bottom: 24px;
	}

	.ph-clp-card,
	.ph-clp-banner {
		padding: 16px;
	}

	.ph-clp-story__body {
		padding: 16px 16px 20px;
	}

	.ph-clp-closing {
		padding: 14px 16px;
		font-size: 1rem;
	}

	.ph-clp-btn {
		padding: 13px 18px;
		font-size: 0.94rem;
	}

	.ph-clp-btn--sm {
		padding: 10px 14px;
		font-size: 0.86rem;
	}

	.ph-clp-jump__inner {
		padding-left: 10px;
		padding-right: 10px;
	}

	.ph-clp-jump__list a {
		padding: 7px 12px;
		font-size: 0.85rem;
	}

	.ph-clp-sticky {
		padding-left: 12px;
		padding-right: calc(12px + var(--clp-sticky-gap, 0px));
	}

	.ph-clp-sticky__inner {
		gap: 10px;
	}

	.ph-clp-sticky__text strong {
		font-size: 0.94rem;
	}

	.ph-clp-sticky__text span {
		font-size: 0.72rem;
	}

	.ph-clp-hero__video {
		border-radius: var(--clp-radius-sm);
	}

	.ph-clp-lightbox {
		max-width: 100vw;
	}

	.ph-clp-lightbox__close {
		top: 8px;
		right: 8px;
	}

	/* Auf dem Telefon braucht Calendly mehr Höhe als am Rechner: Monatsansicht, Formular und
	   Bestätigungscode stehen dort untereinander. Nach dem Laden gibt das Widget die Höhe vor. */
	.ph-clp-calendly__mount {
		min-height: 820px;
	}

	.ph-clp-calendly__embed {
		height: 820px;
		min-height: 820px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ph-clp *,
	.ph-clp *::before,
	.ph-clp *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}