/*--------------------------------------------------------------
# MAMA-ENERGIETYP LEADSTRECKE
#
# Alle Komponenten-Regeln liegen in einem Spezifitaets-Wrapper
# :is(#et-boc, html):is(#et-boc, html) { ... } (via CSS-Nesting).
# Grund: Der Divi Builder bringt ein CSS-Reset mit ID-Selektoren
# (#et-boc .et-l div { margin:0; padding:0; ... }) mit, das
# normale Klassen-Selektoren ueberstimmt. Der Wrapper hebt jede
# Regel auf 2 IDs Spezifitaet, ohne ihr Verhalten zu aendern --
# auf Nicht-Divi-Seiten matcht schlicht das html-Element.
--------------------------------------------------------------*/

/* Top-Level: @font-face + @keyframes (duerfen nicht genestet werden) */
/*--------------------------------------------------------------
# MAMA-ENERGIETYP LEADSTRECKE
#
# Komplett unter .met-funnel gescoped, keine globalen
# Seiteneffekte. Nutzt die Theme-Variablen aus style.css
# (--beige, --rosa, --grau) sowie Montserrat + Brittany.
--------------------------------------------------------------*/

/* Akzentschrift des Themes (auf den Funnel-Seiten laedt kein
   Divi, das sie sonst bereitstellt) */

@font-face {
	font-family: 'Brittany';
	src: url('../fonts/Brittany.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@keyframes met-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes met-player-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(230, 173, 190, 0.6);
	}
	70% {
		box-shadow: 0 0 0 26px rgba(230, 173, 190, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(230, 173, 190, 0);
	}
}

@keyframes met-step-in {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

:is(#et-boc, html):is(#et-boc, html) {

	.met-funnel {
		--met-rosa-soft: #f7e8ec;
		--met-rosa-deep: #d18ba3;
		--met-error: #b3324c;
		--met-radius: 18px;
		--met-shadow: 0 10px 40px rgba(230, 173, 190, 0.35);

		font-family: "Montserrat", Helvetica, Arial, sans-serif;

		/* Kein eigener Hintergrund: der Funnel liegt direkt auf dem
		   dunklen Seiten-Hintergrund, Text ausserhalb der Karten
		   ist daher weiss. */
		color: #fff;

		/* Funnel fuellt den Viewport unterhalb des Headers
		   (120px Header-Abstand + 20px Luft nach unten). */
		min-height: calc(100vh - 140px);
	}

	/* Auf den Funnel-Seiten rueckt der komplette Contentbereich unter
	   den absolut positionierten Theme-Header (statt eines inneren
	   Abstands im Funnel selbst). body.met-funnel-page setzt das Theme
	   auf allen Seiten mit Funnel-Shortcodes, auch in Divi. */

	body[class*="page-template-page-mama-energietyp"] #content,
	body.met-funnel-page #content {
		padding-top: 120px;
	}

	/* Kein eigenes Padding: den vertikalen Abstand steuern die
	   Divi-Sektionen der Seiten. */
	.met-section {
		padding: 0;
	}

	.met-inner {
		width: var(--width, 86%);
		max-width: 920px;
		margin: 0 auto;
	}

	.met-inner--narrow {
		max-width: 680px;
	}

	.met-card {
		background: #fff;
		border-radius: var(--met-radius);
		box-shadow: var(--met-shadow);
		padding: 28px 22px;
		color: var(--grau, #343640);
	}

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

	.met-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		padding: 15px 34px;
		border: 0;
		border-radius: 100px;
		font-family: "Montserrat", sans-serif;
		font-size: 16px;
		font-weight: 600;
		line-height: 1.3em;
		cursor: pointer;
		text-decoration: none !important;
		transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
	}

	.met-btn--primary {
		background: var(--rosa, #e6adbe);
		color: #fff;
		box-shadow: 0 2px 18px 0 #e6adbe;
	}

	.met-btn--primary:hover {
		background: var(--grau, #343640);
		color: #fff;
		box-shadow: 0 0 0 0 #e6adbe;
	}

	.met-btn--primary:active {
		transform: translateY(2px);
	}

	.met-btn--ghost {
		background: transparent;
		color: var(--grau, #343640);
		border: 2px solid var(--rosa, #e6adbe);
	}

	.met-btn--ghost:hover {
		background: var(--met-rosa-soft);
	}

	.met-btn--ghost:active {
		transform: translateY(2px);
	}

	.met-btn:focus-visible,
	.met-link:focus-visible {
		outline: 3px solid var(--grau, #343640);
		outline-offset: 3px;
	}

	.met-btn:disabled {
		opacity: 0.7;
		cursor: wait;
		transform: none;
	}

	/* Loading-Spinner am Submit-Button */

	.met-btn.is-loading::after {
		content: "";
		width: 16px;
		height: 16px;
		border: 2px solid rgba(255, 255, 255, 0.4);
		border-top-color: #fff;
		border-radius: 50%;
		animation: met-spin 0.7s linear infinite;
	}

	.met-link {
		display: inline-block;
		background: none;
		border: 0;
		padding: 4px 2px;
		font-family: "Montserrat", sans-serif;
		font-size: 16px;
		font-weight: 600;
		color: var(--met-rosa-deep);
		text-decoration: underline;
		text-underline-offset: 4px;
		cursor: pointer;
		transition: color 0.2s ease;
	}

	.met-link:hover {
		color: var(--grau, #343640);
	}

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

	.met-hero {
		text-align: center;
	}

	.met-hero__accent {
		font-family: "Brittany", Helvetica, Arial, Lucida, sans-serif;
		font-size: clamp(28px, 5vw, 40px);
		line-height: 1.3em;
		color: var(--met-rosa-deep);
		margin: 0 0 8px;
	}

	.met-hero__title {
		font-size: clamp(30px, 6vw, 46px);
		font-weight: 700;
		line-height: 1.15em;
		color: #fff;
		margin: 0 0 18px;
	}

	.met-hero__text {
		font-size: clamp(16px, 2.5vw, 19px);
		line-height: 1.7em;
		margin: 0 auto 28px;
		max-width: 620px;
		color: #fff;
	}

	.met-hero__cta {
		margin-top: 28px;
		font-size: 18px;
		padding: 18px 44px;
	}

	.met-hero__note {
		font-size: 14px;
		opacity: 0.7;
		margin: 20px 0 0;
		color: #fff;
	}

	/* Divi-Kompatibilitaet: In Divi-Modulen (et_pb_text/et_pb_code)
	   ueberschreiben Divis eigene Selektoren (.et_pb_text h1, ...)
	   sonst unsere Hero-Typografie – hier mit hoeherer Prioritaet
	   auf identisches Aussehen wie die PHP-Seiten festgenagelt. */

	.et_pb_module .met-hero__accent {
		font-family: "Brittany", Helvetica, Arial, Lucida, sans-serif !important;
		font-size: clamp(28px, 5vw, 40px) !important;
		line-height: 1.3em !important;
		color: var(--met-rosa-deep) !important;
		margin: 0 0 8px !important;
	}

	.et_pb_module .met-hero__title,
	.et_pb_module h1.met-hero__title {
		font-size: clamp(30px, 6vw, 46px) !important;
		font-weight: 700 !important;
		line-height: 1.15em !important;
		color: #fff !important;
		margin: 0 0 18px !important;
		padding: 0 !important;
	}

	.et_pb_module .met-hero__text {
		font-size: clamp(16px, 2.5vw, 19px) !important;
		line-height: 1.7em !important;
		color: #fff !important;
		max-width: 620px;
		margin: 0 auto 28px !important;
	}

	.et_pb_module .met-hero__note {
		font-size: 14px !important;
		color: #fff !important;
	}

	/* Divi-Code-Module duerfen die Player-Ecken nicht beschneiden */

	.et_pb_module .met-video {
		border-radius: var(--met-radius) !important;
		overflow: hidden !important;
	}

	/*--------------------------------------------------------------
	# Divi-Reset-Gegenmassnahmen
	#
	# Der Divi Builder injiziert ein Reset mit ID-Selektoren
	# (#et-boc .et-l a {...}, #et-boc .et-l p { color: inherit
	# !important } usw.), das unsere Klassen ueber Spezifitaet
	# schlaegt. Diese Regeln greifen nur auf Divi-Seiten und
	# stellen dort exakt das Aussehen der PHP-Seiten her.
	--------------------------------------------------------------*/

	/* Buttons als <a> (Hero-CTA, Mama-Check-In) */

	#et-boc .et-l a.met-btn {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 10px !important;
		padding: 15px 34px !important;
		border: 0 !important;
		border-radius: 100px !important;
		font-family: "Montserrat", sans-serif !important;
		font-size: 16px !important;
		font-weight: 600 !important;
		line-height: 1.3em !important;
		text-decoration: none !important;
		cursor: pointer;
		transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease !important;
	}

	#et-boc .et-l a.met-btn--primary {
		background: var(--rosa, #e6adbe) !important;
		color: #fff !important;
		box-shadow: 0 2px 18px 0 #e6adbe !important;
	}

	#et-boc .et-l a.met-btn--primary:hover {
		background: var(--grau, #343640) !important;
		color: #fff !important;
		box-shadow: 0 0 0 0 #e6adbe !important;
	}

	#et-boc .et-l a.met-btn--primary:active {
		transform: translateY(2px);
	}

	#et-boc .et-l a.met-hero__cta {
		margin-top: 28px !important;
		font-size: 18px !important;
		padding: 18px 44px !important;
	}

	/* Divi-Button-Modul mit unseren Klassen: Divis Pfeil-Icon und
	   Hover-Padding-Verschiebung unterdruecken */

	#et-boc .et-l a.met-btn:after,
	#et-boc .et-l a.met-btn:before {
		display: none !important;
		content: none !important;
	}

	#et-boc .et-l p.met-hero__note {
		margin: 20px 0 0 !important;
		font-size: 14px !important;
		opacity: 0.7;
	}

	#et-boc .et-l a.met-thanks__checkin {
		font-size: 18px !important;
		padding: 18px 44px !important;
	}

	/* Antwort-Chips (label-Reset nimmt Border + Padding) */

	#et-boc .et-l label.met-option {
		display: flex !important;
		align-items: center !important;
		gap: 14px !important;
		background: #fff !important;
		border: 2px solid var(--met-rosa-soft) !important;
		border-radius: 14px !important;
		padding: 15px 18px !important;
		font-size: 16px !important;
		line-height: 1.5em !important;
		cursor: pointer;
	}

	#et-boc .et-l label.met-option:hover {
		border-color: var(--rosa, #e6adbe) !important;
	}

	#et-boc .et-l .met-option:has(input:checked) {
		border-color: var(--met-rosa-deep) !important;
		background: var(--met-rosa-soft) !important;
	}

	/* p-Reset (color: inherit !important) bricht eigene Textfarben,
	   der Element-Reset zusaetzlich font-size + margin von p/h1-h6 */

	#et-boc .et-l p.met-error {
		color: var(--met-error) !important;
		font-size: 15px !important;
		font-weight: 600 !important;
		margin: 14px 0 0 !important;
	}

	#et-boc .et-l .met-hero__accent {
		color: var(--met-rosa-deep) !important;
	}

	/* Hero-Texte: Divi-Textmodule richten links aus und faerben p per
	   !important – hier zentriert + weiss festnageln. */

	#et-boc .et-l .met-hero__accent,
	#et-boc .et-l .met-hero__title,
	#et-boc .et-l p.met-hero__text,
	#et-boc .et-l p.met-hero__note {
		text-align: center !important;
	}

	#et-boc .et-l p.met-hero__text,
	#et-boc .et-l p.met-hero__note {
		color: #fff !important;
	}

	/* Code-Modul mit dem Hero-CTA zentrieren */

	#et-boc .et-l .et_pb_code_inner:has(.met-hero__cta) {
		text-align: center;
	}

	#et-boc .et-l p.met-step__hint {
		font-size: 15px !important;
		line-height: 1.6em !important;
		margin: 0 0 22px !important;
	}

	#et-boc .et-l p.met-unknown--inline {
		margin: 4px 0 18px !important;
	}

	#et-boc .et-l p.met-progress__label {
		font-size: 13px !important;
		font-weight: 600 !important;
		margin: 10px 0 0 !important;
	}

	#et-boc .et-l .met-step__title {
		font-size: clamp(22px, 4.5vw, 30px) !important;
		font-weight: 700 !important;
		line-height: 1.25em !important;
		margin: 0 0 6px !important;
	}

	#et-boc .et-l h2.met-calc__title {
		font-size: clamp(24px, 5vw, 32px) !important;
		font-weight: 700 !important;
		line-height: 1.2em !important;
		margin: 0 0 10px !important;
	}

	#et-boc .et-l p.met-calc__sub {
		margin: 0 auto 26px !important;
		line-height: 1.7em !important;
	}

	#et-boc .et-l p.met-calc__sub--success {
		font-family: "Brittany", Helvetica, Arial, Lucida, sans-serif !important;
		font-size: clamp(24px, 4vw, 32px) !important;
		line-height: 1.4em !important;
		color: var(--met-rosa-deep) !important;
		margin-bottom: 18px !important;
	}

	#et-boc .et-l p.met-thanks__accent {
		color: var(--met-rosa-deep) !important;
	}

	#et-boc .et-l h3.met-calc__chart-title {
		font-size: clamp(20px, 3.5vw, 26px) !important;
		font-weight: 700 !important;
		margin: 40px 0 18px !important;
		padding-top: 36px !important;
	}

	#et-boc .et-l h1.met-thanks__title {
		font-size: clamp(26px, 5vw, 36px) !important;
		font-weight: 700 !important;
		line-height: 1.25em !important;
		max-width: 620px !important;
		margin: 0 auto 14px !important;
		color: #fff !important;
	}

	#et-boc .et-l p.met-thanks__text {
		max-width: 620px !important;
		margin: 0 auto 26px !important;
		line-height: 1.7em !important;
	}

	#et-boc .et-l p.met-thanks__cta-title {
		font-size: clamp(19px, 3vw, 23px) !important;
		font-weight: 700 !important;
		margin: 0 0 10px !important;
	}

	#et-boc .et-l p.met-thanks__cta-text {
		max-width: 620px !important;
		margin: 0 auto 20px !important;
		font-size: 15px !important;
		line-height: 1.7em !important;
	}

	#et-boc .et-l .met-thanks__description p {
		margin: 0 0 14px !important;
		font-size: 15px !important;
		line-height: 1.7em !important;
	}

	#et-boc .et-l .met-popup__success-title strong,
	#et-boc .et-l .met-calc__title strong {
		color: var(--met-rosa-deep) !important;
	}

	/*--------------------------------------------------------------
	# Video (Hero + Danke-Sektion)
	--------------------------------------------------------------*/

	.met-video {
		position: relative;
		aspect-ratio: 16 / 9;
		max-width: 820px;
		margin: 0 auto;
		border-radius: var(--met-radius);
		overflow: hidden;
		box-shadow: var(--met-shadow);
		background: var(--met-rosa-soft);
	}

	.met-video iframe,
	.met-video video {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		border: 0;
		display: block;
		object-fit: cover;
		background: #000;
	}

	/*--------------------------------------------------------------
	# Eigener Videoplayer (Teaser-Loop + eigene Steuerleiste)
	--------------------------------------------------------------*/

	.met-player {
		cursor: pointer;
	}

	/* Grosser Play-Button im Overlay */

	.met-player__big-play {
		position: absolute;
		inset: 0;
		margin: auto;
		width: 86px;
		height: 86px;
		display: grid;
		place-items: center;
		border: 0;
		border-radius: 50%;
		background: var(--rosa, #e6adbe);
		color: #fff;
		cursor: pointer;
		z-index: 2;
		transition: transform 0.2s ease, background-color 0.2s ease;
		animation: met-player-pulse 2.2s ease-out infinite;
	}

	.met-player__big-play svg {
		width: 34px;
		height: 34px;
		fill: currentColor;
		margin-left: 4px;
	}

	.met-player__big-play:hover {
		background: var(--met-rosa-deep);
		transform: scale(1.07);
	}

	.met-player__big-play:focus-visible {
		outline: 3px solid #fff;
		outline-offset: 3px;
	}

	/* hidden-Attribut gewinnt gegen display:grid (nach Play-Klick) */

	.met-player__big-play[hidden] {
		display: none;
	}

	/* Steuerleiste */

	.met-player__controls {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 14px;
		background: linear-gradient(180deg, rgba(7, 10, 43, 0) 0%, rgba(7, 10, 43, 0.75) 100%);
		z-index: 2;
	}

	/* hidden-Attribut gewinnt gegen display:flex (Teaser-Modus) */

	.met-player__controls[hidden] {
		display: none;
	}

	/* Auto-Hide wie bei YouTube: Bei Inaktivitaet waehrend der
	   Wiedergabe blendet die Leiste aus (Klasse setzt das JS). */

	.met-player__controls {
		opacity: 1;
		transform: translateY(0);
		transition: opacity 0.25s ease, transform 0.25s ease;
	}

	.met-player--idle .met-player__controls {
		opacity: 0;
		transform: translateY(8px);
		pointer-events: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.met-player__controls {
			transition: none;
		}
	}

	.met-player__btn {
		flex: 0 0 auto;
		width: 38px;
		height: 38px;
		display: grid;
		place-items: center;
		border: 0;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.18);
		color: #fff;
		cursor: pointer;
		transition: background-color 0.2s ease;
	}

	.met-player__btn svg {
		width: 20px;
		height: 20px;
		fill: currentColor;
	}

	.met-player__btn:hover {
		background: var(--rosa, #e6adbe);
	}

	.met-player__btn:focus-visible {
		outline: 2px solid #fff;
		outline-offset: 2px;
	}

	.met-player__time {
		flex: 0 0 auto;
		color: #fff;
		font-size: 13px;
		font-weight: 500;
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
	}

	/* Fortschrittsbalken */

	.met-player__range {
		-webkit-appearance: none;
		appearance: none;
		flex: 1 1 auto;
		min-width: 60px;
		height: 6px;
		margin: 0;
		background: transparent;
		cursor: pointer;
	}

	.met-player__range::-webkit-slider-runnable-track {
		height: 6px;
		border-radius: 100px;
		background: rgba(255, 255, 255, 0.35);
	}

	.met-player__range::-webkit-slider-thumb {
		-webkit-appearance: none;
		width: 16px;
		height: 16px;
		margin-top: -5px;
		border: 0;
		border-radius: 50%;
		background: var(--rosa, #e6adbe);
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
	}

	.met-player__range::-moz-range-track {
		height: 6px;
		border-radius: 100px;
		background: rgba(255, 255, 255, 0.35);
	}

	.met-player__range::-moz-range-progress {
		height: 6px;
		border-radius: 100px;
		background: var(--rosa, #e6adbe);
	}

	.met-player__range::-moz-range-thumb {
		width: 16px;
		height: 16px;
		border: 0;
		border-radius: 50%;
		background: var(--rosa, #e6adbe);
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
	}

	.met-player__range:focus-visible {
		outline: 2px solid #fff;
		outline-offset: 4px;
	}

	/* Vollbild */

	.met-player:fullscreen {
		aspect-ratio: auto;
		border-radius: 0;
		max-width: none;
	}

	.met-player:fullscreen video {
		object-fit: contain;
	}

	@media (prefers-reduced-motion: reduce) {
		.met-player__big-play {
			animation: none;
		}
	}

	/*--------------------------------------------------------------
	# Fortschrittsanzeige
	--------------------------------------------------------------*/

	.met-progress {
		margin-bottom: 26px;
	}

	.met-progress__track {
		height: 8px;
		border-radius: 100px;
		background: var(--met-rosa-soft);
		overflow: hidden;
	}

	.met-progress__fill {
		display: block;
		height: 100%;
		width: 20%;
		border-radius: 100px;
		background: linear-gradient(90deg, var(--rosa, #e6adbe), var(--met-rosa-deep));
		transition: width 0.4s ease;
	}

	.met-progress__label {
		font-size: 13px;
		font-weight: 600;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		opacity: 0.65;
		margin: 10px 0 0;
	}

	/*--------------------------------------------------------------
	# Schritte
	--------------------------------------------------------------*/

	.met-step {
		border: 0;
		padding: 0;
		margin: 0 0 36px;
		min-width: 0;
	}

	/* Mit aktivem JS (met-enhanced) ist nur der aktuelle Schritt sichtbar. */

	.met-enhanced .met-step {
		display: none;
		margin-bottom: 0;
	}

	.met-enhanced .met-step--active {
		display: block;
		animation: met-step-in 0.35s ease both;
	}

	.met-step__title {
		display: block;
		width: 100%;
		padding: 0;
		font-size: clamp(22px, 4.5vw, 30px);
		font-weight: 700;
		line-height: 1.25em;
		color: var(--grau, #343640);
		margin: 0 0 6px;
	}

	.met-step__hint {
		font-size: 15px;
		line-height: 1.6em;
		opacity: 0.75;
		margin: 0 0 22px;
	}

	.met-step__nav {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
		margin-top: 26px;
	}

	/* Ohne JS gibt es keine Schrittnavigation – nur den Submit-Button. */

	.met-funnel:not(.met-enhanced) [data-met-next],
	.met-funnel:not(.met-enhanced) [data-met-prev] {
		display: none;
	}

	/*--------------------------------------------------------------
	# Antwort-Optionen (Checkbox-/Radio-Chips)
	--------------------------------------------------------------*/

	.met-options {
		display: grid;
		gap: 12px;
		margin-top: 18px;
	}

	.met-option {
		position: relative;
		display: flex;
		align-items: center;
		gap: 14px;
		background: #fff;
		border: 2px solid var(--met-rosa-soft);
		border-radius: 14px;
		padding: 15px 18px;
		font-size: 16px;
		line-height: 1.5em;
		cursor: pointer;
		transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
	}

	.met-option:hover {
		border-color: var(--rosa, #e6adbe);
		box-shadow: 0 4px 16px rgba(230, 173, 190, 0.3);
	}

	/* Echte Inputs bleiben fuer Tastatur + Screenreader im DOM. */

	.met-option input {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: 0;
		opacity: 0;
		pointer-events: none;
	}

	.met-option__indicator {
		flex: 0 0 auto;
		width: 24px;
		height: 24px;
		border: 2px solid var(--rosa, #e6adbe);
		border-radius: 7px;
		background: #fff;
		transition: background-color 0.2s ease, border-color 0.2s ease;
	}

	.met-option--radio .met-option__indicator {
		border-radius: 50%;
	}

	.met-option:has(input:checked) {
		border-color: var(--met-rosa-deep);
		background: var(--met-rosa-soft);
	}

	.met-option input:checked + .met-option__indicator {
		background: var(--met-rosa-deep);
		border-color: var(--met-rosa-deep);
		box-shadow: inset 0 0 0 4px #fff;
	}

	.met-option:has(input:focus-visible) {
		outline: 3px solid var(--grau, #343640);
		outline-offset: 2px;
	}

	.met-option__label {
		font-weight: 500;
	}

	/*--------------------------------------------------------------
	# Text-Inputs
	--------------------------------------------------------------*/

	.met-input {
		display: block;
		width: 100%;
		height: 54px;
		padding: 0 18px;
		font-family: "Montserrat", sans-serif;
		font-size: 17px;
		color: var(--grau, #343640);
		background: #fff;
		border: 2px solid var(--met-rosa-soft);
		border-radius: 14px;
		transition: border-color 0.2s ease, box-shadow 0.2s ease;
	}

	.met-input::placeholder {
		color: #b8a8ad;
	}

	.met-input:hover {
		border-color: var(--rosa, #e6adbe);
	}

	.met-input:focus,
	.met-input:focus-visible {
		outline: none;
		border-color: var(--met-rosa-deep);
		box-shadow: 0 0 0 4px rgba(209, 139, 163, 0.25);
	}

	/*--------------------------------------------------------------
	# Hinweis "Energietyp unbekannt" + Consent
	--------------------------------------------------------------*/

	/* Hinweis direkt unter der Frage in Schritt 4 */

	.met-unknown--inline {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 4px 8px;
		margin: 4px 0 18px;
	}

	.met-unknown__text {
		font-size: 15px;
		margin: 0;
		opacity: 0.8;
	}

	/*--------------------------------------------------------------
	# Fehlermeldungen
	--------------------------------------------------------------*/

	.met-error {
		color: var(--met-error);
		font-size: 15px;
		font-weight: 600;
		line-height: 1.5em;
		margin: 14px 0 0;
	}

	/*--------------------------------------------------------------
	# Chartrechner-Popup
	#
	# Nutzt die Klassen des Theme-Popups (.popup / .popup-inner /
	# ._close), bringt aber alle noetigen Styles selbst mit, damit
	# das Popup nicht von style.css abhaengt. .met-popup gewinnt
	# per Spezifitaet gegen die Theme-Basisregeln.
	--------------------------------------------------------------*/

	body.met-no-scroll {
		overflow: hidden;
	}

	.popup.met-popup {
		position: fixed;
		inset: 0;
		z-index: 9999;
		display: flex;
		background: rgba(7, 10, 43, 0.55);
		overflow-x: hidden;
		overflow-y: auto;
		padding: 24px 14px;
		opacity: 0;
		visibility: hidden;
		transition: all 0.2s ease 0.15s;
	}

	.popup.met-popup.active {
		opacity: 1;
		visibility: visible;
		backdrop-filter: blur(2px);
		transition: all 0.3s ease;
	}

	.met-popup .popup-inner {
		position: relative;
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: 860px;
		margin: auto;
		background: var(--beige, #faf2f0);
		border-radius: 24px;
		padding: 56px 20px 32px;
		box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
		transform: translateY(80px);
		transition: transform 0.5s ease;
		color: var(--grau, #343640);
	}

	.popup.met-popup.active .popup-inner {
		transform: translateY(0);
	}

	.met-popup__close {
		position: absolute;
		top: 18px;
		right: 18px;
		width: 32px;
		height: 32px;
		background: none;
		border: 0;
		cursor: pointer;
		z-index: 2;
	}

	.met-popup__close::before,
	.met-popup__close::after {
		content: '';
		position: absolute;
		top: 1px;
		left: 15px;
		height: 30px;
		width: 2px;
		border-radius: 5px;
		background-color: var(--grau, #343640);
	}

	.met-popup__close::before {
		transform: rotate(45deg);
	}

	.met-popup__close::after {
		transform: rotate(-45deg);
	}

	.met-popup__close:focus-visible {
		outline: 3px solid var(--grau, #343640);
		outline-offset: 3px;
	}

	/* Erfolgs-Buttons nach der Chart-Berechnung – bewusst ohne Box,
	   die Headline/Subline darueber stellt das JS um. */

	.met-popup__success {
		margin: 10px 0 36px;
		text-align: center;
		animation: met-step-in 0.35s ease both;
	}

	.met-popup__success-nav {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 14px;
	}

	.met-popup__chart-link {
		font-size: 15px;
	}

	/* Grosser Haupt-CTA im Erfolgszustand */

	.met-popup__cta {
		font-size: 20px;
		padding: 21px 56px;
	}

	/* Headline ueber dem berechneten Chart – mit Trennlinie und
	   deutlichem Abstand zu den Buttons darueber */

	.met-calc__chart-title {
		margin: 40px 0 18px;
		padding-top: 36px;
		border-top: 1px solid var(--rosa, #e6adbe);
		font-size: clamp(20px, 3.5vw, 26px);
		font-weight: 700;
		line-height: 1.3em;
		text-align: center;
	}

	.met-calc__chart-title[hidden] {
		display: none;
	}

	/* Erfolgs-Headline: "Hey, du bist <Typ>" */

	.met-calc__title strong {
		color: var(--met-rosa-deep);
		font-weight: 700;
	}

	/* Erfolgs-Subline in der Akzentschrift, luftig abgesetzt */

	.met-calc__sub--success {
		font-family: "Brittany", Helvetica, Arial, Lucida, sans-serif;
		font-size: clamp(24px, 4vw, 32px);
		line-height: 1.4em;
		color: var(--met-rosa-deep);
		margin-bottom: 18px;
	}

	/* Inhalt des Chartrechner-Popups */

	.met-calc__title {
		font-size: clamp(24px, 5vw, 32px);
		font-weight: 700;
		line-height: 1.2em;
		margin: 0 0 10px;
		text-align: center;
	}

	.met-calc__title:focus {
		outline: none;
	}

	.met-calc__sub {
		max-width: 620px;
		margin: 0 auto 26px;
		line-height: 1.7em;
		text-align: center;
	}

	/* Kein weisser Kasten: der Embed liegt direkt auf dem beigen
	   Popup-Hintergrund. Die Eingabefelder (weiss) heben sich
	   durch ihre Fuellung + Border davon ab. */
	.met-calc__embed {
		position: relative;
		background: transparent;
		padding: 0;
		margin-bottom: 24px;
	}

	/* Lade-Spinner waehrend der Chart-Berechnung */

	.met-calc__embed.met-calc--loading::before {
		content: '';
		position: absolute;
		inset: 0;
		background: rgba(250, 242, 240, 0.75);
		border-radius: var(--met-radius);
		z-index: 3;
	}

	.met-calc__embed.met-calc--loading::after {
		content: '';
		position: absolute;
		top: calc(50% - 26px);
		left: calc(50% - 26px);
		width: 52px;
		height: 52px;
		border: 5px solid var(--met-rosa-soft);
		border-top-color: var(--met-rosa-deep);
		border-radius: 50%;
		animation: met-spin 0.8s linear infinite;
		z-index: 4;
	}

	/* Ergebnisansicht: keine weisse Karte mehr, kompakter auf dem
	   Popup-Hintergrund (Klasse setzt das JS bei Erfolg). */

	.met-calc__embed.met-calc--done {
		background: transparent;
		box-shadow: none;
		padding: 0;
		margin-bottom: 8px;
	}

	.met-calc__embed.met-calc--done .hdapi-hd-properties {
		font-size: 14px !important;
		line-height: 1.5em !important;
	}

	/* Eigenschaften-Liste im Desktop zweispaltig, damit sie nicht so
	   lang wird (CSS-Spalten statt Grid, da die Liste auch leere
	   Hilfselemente enthaelt). */

	@media all and (min-width: 700px) {
		.met-calc__embed.met-calc--done .hdapi-hd-properties {
			columns: 2;
			column-gap: 36px;
		}

		.met-calc__embed.met-calc--done .hdapi-item {
			break-inside: avoid;
		}
	}

	.met-calc__embed.met-calc--done .hdapi-item {
		background: transparent !important;
		padding: 4px 0 !important;
		margin: 0 !important;
		border: 0 !important;
	}

	/* Abschluss-Bereich unter dem Chart */

	.met-calc__finish {
		text-align: center;
		padding: 8px 0 4px;
	}

	.met-calc__finish[hidden] {
		display: none;
	}

	/*
	 * Bodygraphchart-Embed an den Funnel-Stil anpassen.
	 * Das Embed rendert in .hdapi-container (normales DOM) und bringt
	 * eigene Styles mit (#hdapi-style) – daher hier gezielt mit
	 * hoeherer Spezifitaet / !important uebersteuern.
	 */

	/* Vom JS gesetzt: Name-Feld ausblenden (kommt aus dem Formular) */

	.met-calc__embed .met-hdapi-hidden {
		display: none !important;
	}

	.met-calc__embed .hdapi-container {
		font-family: "Montserrat", Helvetica, Arial, sans-serif !important;
		color: var(--grau, #343640);
	}

	.met-calc__embed .hdapi-form-field label {
		display: block;
		font-family: "Montserrat", sans-serif !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		color: var(--grau, #343640) !important;
		margin: 0 0 6px !important;
	}

	.met-calc__embed .hdapi-form-field input[type="text"],
	.met-calc__embed .hdapi-form-field select {
		width: 100%;
		height: 50px !important;
		padding: 0 14px !important;
		font-family: "Montserrat", sans-serif !important;
		font-size: 16px !important;
		color: var(--grau, #343640) !important;
		background-color: #fff !important;
		border: 2px solid var(--rosa, #e6adbe) !important;
		border-radius: 12px !important;
		box-shadow: none !important;
		transition: border-color 0.2s ease, box-shadow 0.2s ease;
	}

	.met-calc__embed .hdapi-form-field input[type="text"]:hover,
	.met-calc__embed .hdapi-form-field select:hover {
		border-color: var(--rosa, #e6adbe) !important;
	}

	.met-calc__embed .hdapi-form-field input[type="text"]:focus,
	.met-calc__embed .hdapi-form-field select:focus {
		outline: none !important;
		border-color: var(--met-rosa-deep) !important;
		box-shadow: 0 0 0 4px rgba(209, 139, 163, 0.25) !important;
	}

	.met-calc__embed .hdapi-form-field {
		margin-bottom: 14px !important;
	}

	/* Absende-Button des Embeds wie unsere Primaer-Buttons */

	.met-calc__embed #hdapi-submit,
	.met-calc__embed #hdapi-submit:visited {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 15px 34px !important;
		border: 0 !important;
		border-radius: 100px !important;
		background: var(--rosa, #e6adbe) !important;
		color: #fff !important;
		font-family: "Montserrat", sans-serif !important;
		font-size: 16px !important;
		font-weight: 600 !important;
		line-height: 1.3em !important;
		text-decoration: none !important;
		cursor: pointer;
		box-shadow: 0 2px 18px 0 #e6adbe !important;
		transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
	}

	.met-calc__embed #hdapi-submit:hover {
		background: var(--grau, #343640) !important;
		box-shadow: none !important;
	}

	.met-calc__embed #hdapi-submit:active {
		transform: translateY(2px);
	}

	.met-calc__embed #hdapi-submit:focus-visible {
		outline: 3px solid var(--grau, #343640) !important;
		outline-offset: 3px;
	}

	/* Fehlermeldung des Embeds in unserer Fehlerfarbe */

	.met-calc__embed #error-label {
		color: var(--met-error) !important;
		font-family: "Montserrat", sans-serif !important;
		font-size: 15px !important;
		font-weight: 600 !important;
	}

	/* Ergebnisansicht: "Neuen Chart anlegen"/PDF-Buttons und die
	   Auswahl gespeicherter Charts ausblenden – der Funnel geht
	   stattdessen ueber das Erfolgs-Panel weiter. */

	.met-calc__embed .hdapi-cta,
	.met-calc__embed #hdapi-charts-selector-form {
		display: none !important;
	}

	/* Chart-Ergebnis einspaltig (die Embed-Styles arbeiten mit
	   ID-Selektoren, daher !important). flow-root schliesst die
	   gefloateten Planeten-Spalten ein, damit die Eigenschaften-
	   Liste sauber unter dem Chart beginnt. Nur der Chart selbst
	   ist auf 540px begrenzt – die Eigenschaften laufen volle
	   Breite (zweispaltig im Desktop). */

	.met-calc__embed .hdapi-hd-chart {
		width: 100% !important;
		max-width: 540px !important;
		float: none !important;
		display: flow-root !important;
		margin: 0 auto 24px !important;
	}

	.met-calc__embed .hdapi-hd-properties {
		width: 100% !important;
		float: unset !important;
	}

	/* Native Selects bleiben versteckt – die Slim-Select-UI
	   (.ss-main) uebernimmt und bekommt denselben Look wie die
	   Text-Inputs (identischer Border). */

	.met-calc__embed .hdapi-form-field select {
		display: none !important;
	}

	.met-calc__embed .ss-main {
		font-family: "Montserrat", sans-serif !important;
		color: var(--grau, #343640) !important;
		width: 100%;
	}

	.met-calc__embed .ss-main .ss-single-selected {
		height: 50px !important;
		padding: 0 14px !important;
		background-color: #fff !important;
		border: 2px solid var(--rosa, #e6adbe) !important;
		border-radius: 12px !important;
		font-size: 16px !important;
		color: var(--grau, #343640) !important;
		transition: border-color 0.2s ease, box-shadow 0.2s ease;
	}

	.met-calc__embed .ss-main .ss-single-selected:hover {
		border-color: var(--rosa, #e6adbe) !important;
	}

	.met-calc__embed .ss-main.ss-open-below .ss-single-selected,
	.met-calc__embed .ss-main.ss-open-above .ss-single-selected {
		border-color: var(--met-rosa-deep) !important;
		box-shadow: 0 0 0 4px rgba(209, 139, 163, 0.25) !important;
	}

	.met-calc__embed .ss-main .ss-content {
		border: 2px solid var(--met-rosa-soft) !important;
		border-radius: 12px !important;
		box-shadow: 0 10px 30px rgba(230, 173, 190, 0.35) !important;
		font-family: "Montserrat", sans-serif !important;
		overflow: hidden;
	}

	.met-calc__embed .ss-content .ss-list .ss-option:hover,
	.met-calc__embed .ss-content .ss-list .ss-option.ss-highlighted {
		background: var(--met-rosa-soft) !important;
		color: var(--grau, #343640) !important;
	}

	.met-calc__embed .ss-content .ss-search input {
		font-family: "Montserrat", sans-serif !important;
		border: 2px solid var(--met-rosa-soft) !important;
		border-radius: 10px !important;
	}

	/* Vorschlagsliste des Geburtsort-Felds an den Funnel-Stil anpassen */

	.met-calc__embed .auto-wrapper {
		border: 2px solid var(--met-rosa-soft) !important;
		border-radius: 12px !important;
		box-shadow: 0 10px 30px rgba(230, 173, 190, 0.35) !important;
		font-family: "Montserrat", sans-serif !important;
		overflow: hidden;
		margin-top: 6px;
	}

	.met-calc__embed .auto-wrapper li:hover,
	.met-calc__embed .auto-wrapper li[aria-selected="true"] {
		background: var(--met-rosa-soft) !important;
		color: var(--grau, #343640) !important;
	}

	/*--------------------------------------------------------------
	# Danke-Sektion
	--------------------------------------------------------------*/

	/* Danke-Seite ohne Karte: liegt direkt auf dem dunklen
	   Seiten-Hintergrund, Schrift weiss (wie die Startseite). */

	.met-thanks__card {
		text-align: center;
		padding: 12px 0;
		color: #fff;
	}

	/* "Danke" in der Akzentschrift ueber der Headline
	   (wie der Hero-Accent auf der Startseite) */

	.met-thanks__accent {
		font-family: "Brittany", Helvetica, Arial, Lucida, sans-serif;
		font-size: clamp(28px, 5vw, 40px);
		line-height: 1.3em;
		color: var(--met-rosa-deep);
		margin: 0 0 8px;
	}

	.met-thanks__title {
		max-width: 620px;
		margin: 0 auto 14px;
		font-size: clamp(26px, 5vw, 36px);
		font-weight: 700;
		line-height: 1.25em;
	}

	.met-thanks__title:focus {
		outline: none;
	}

	.met-thanks__text {
		max-width: 620px;
		margin: 0 auto 26px;
		line-height: 1.7em;
	}

	.met-thanks__video {
		margin-bottom: 22px;
	}

	/* Typspezifische Videobeschreibung – wie eine YouTube-
	   Videobeschreibung: dezente Box unter dem Video, eingeklappt
	   mit "Mehr anzeigen". */

	.met-thanks__description {
		max-width: 820px;
		margin: 0 auto 26px;
		padding: 18px 22px;
		background: rgba(255, 255, 255, 0.08);
		border-radius: 16px;
		text-align: left;
		font-size: 15px;
		line-height: 1.7em;
	}

	.met-thanks__description-inner {
		position: relative;
	}

	.met-thanks__description.is-collapsed .met-thanks__description-inner {
		max-height: 130px;
		overflow: hidden;
		-webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
		mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
	}

	.met-thanks__more {
		display: inline-block;
		margin-top: 10px;
		padding: 4px 2px;
		background: none;
		border: 0;
		font-family: "Montserrat", sans-serif;
		font-size: 14px;
		font-weight: 700;
		color: #fff;
		cursor: pointer;
		text-decoration: underline;
		text-underline-offset: 4px;
		opacity: 0.85;
	}

	.met-thanks__more:hover {
		opacity: 1;
	}

	.met-thanks__more:focus-visible {
		outline: 3px solid #fff;
		outline-offset: 3px;
	}

	.met-thanks__more[hidden] {
		display: none;
	}

	.met-thanks__description p {
		margin: 0 0 14px;
	}

	.met-thanks__description .met-thanks__list-intro {
		margin-bottom: 6px;
		font-weight: 600;
	}

	.met-thanks__list {
		margin: 0 0 16px;
		padding: 0;
	}

	.met-thanks__list li {
		list-style: none;
		padding-left: 22px;
		position: relative;
		margin-bottom: 4px;
	}

	.met-thanks__list li::before {
		content: '–';
		position: absolute;
		left: 0;
		color: var(--rosa, #e6adbe);
	}

	/* Mama-Check-In als hervorgehobener CTA-Block */

	.met-thanks__cta {
		max-width: 820px;
		margin: 0 auto;
		padding: 28px 24px;
		background: linear-gradient(135deg, rgba(230, 173, 190, 0.22) 0%, rgba(209, 139, 163, 0.14) 100%);
		border: 1px solid rgba(230, 173, 190, 0.45);
		border-radius: var(--met-radius);
		text-align: center;
	}

	.met-thanks__cta-title {
		font-size: clamp(19px, 3vw, 23px);
		font-weight: 700;
		margin: 0 0 10px;
	}

	.met-thanks__cta-text {
		max-width: 620px;
		margin: 0 auto 20px;
		line-height: 1.7em;
		font-size: 15px;
	}

	.met-thanks__checkin {
		font-size: 18px;
		padding: 18px 44px;
	}

	/*--------------------------------------------------------------
	# Responsive
	--------------------------------------------------------------*/

	@media all and (min-width: 600px) {
		.met-card {
			padding: 40px 44px;
		}

		.met-step__nav {
			justify-content: flex-end;
		}

		.met-step__nav .met-btn--ghost {
			margin-right: auto;
		}

		.met-popup .popup-inner {
			padding: 56px 44px 40px;
		}

		.popup.met-popup {
			padding: 50px;
		}
	}

	/*--------------------------------------------------------------
	# Reduced Motion
	--------------------------------------------------------------*/

	@media (prefers-reduced-motion: reduce) {
		.met-enhanced .met-step--active {
			animation: none;
		}

		.met-progress__fill,
		.met-btn,
		.met-option,
		.met-input {
			transition: none;
		}
	}

}