@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;600;700&family=Inter:wght@400;500;600&display=swap');

#lv-fde{
	--g:#d4af37; --gl:#f0d879; --w:#f5f0e8; --grey:#ab9c98;
	position:relative; box-sizing:border-box;
	width:auto; max-width:100vw;
	margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
	padding:clamp(56px,7vw,104px) 20px clamp(56px,7vw,96px);
	font-family:var(--lvt-schrift-text); color:var(--grey);
	overflow:hidden;
}
#lv-fde *{ box-sizing:border-box; }
#lv-fde .lv-fde-inner{ max-width:1200px; margin:0 auto; }

/* == Kopfzeile == */
#lv-fde .lv-fde-head{ text-align:center; }
#lv-fde .lv-fde-kicker{
	display:inline-flex; align-items:center; gap:9px;
	font:600 11px/1 var(--lvt-schrift-titel);
	letter-spacing:.28em; text-transform:uppercase; color:var(--g); margin-bottom:18px;
}
#lv-fde .lv-fde-kicker::before,
#lv-fde .lv-fde-kicker::after{
	content:''; width:26px; height:1px;
	background:linear-gradient(90deg, transparent, rgba(212,175,55,.8));
}
#lv-fde .lv-fde-kicker::after{ background:linear-gradient(90deg, rgba(212,175,55,.8), transparent); }
#lv-fde .lv-fde-title{
	font-family:var(--lvt-schrift-titel); font-weight:600;
	font-size:clamp(1.8rem,4.8vw,3.3rem); line-height:1.02; letter-spacing:-.02em;
	color:var(--w); margin:0;
}
#lv-fde .lv-fde-title span{
	background-image:linear-gradient(120deg,var(--lvt-gold-tief) 0%,var(--lvt-gold-licht) 22%,var(--lvt-gold-mittel) 48%,var(--lvt-gold-weiss) 72%,var(--lvt-gold-tief) 100%);
	-webkit-background-clip:text; background-clip:text; color:transparent;
}
#lv-fde .lv-fde-claim{
	margin:16px auto 0; font:600 11px/1.5 var(--lvt-schrift-titel);
	letter-spacing:.2em; text-transform:uppercase; color:var(--g);
}
#lv-fde .lv-fde-lead{
	max-width:780px; margin:24px auto 0;
	font-size:clamp(1rem,1.5vw,1.1rem); line-height:1.68;
}
#lv-fde .lv-fde-lead strong{ color:var(--w); font-weight:500; }

/* == Abgrenzung: drei Klarstellungen == */
#lv-fde .lv-fde-vs{
	display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
	gap:clamp(14px,1.8vw,22px);
	margin:clamp(38px,4.4vw,58px) 0 0;
}
#lv-fde .lv-fde-vsi{ padding-top:16px; border-top:1px solid rgba(212,175,55,.32); }
#lv-fde .lv-fde-vsn{
	display:block; font:600 9px/1 var(--lvt-schrift-titel);
	letter-spacing:.24em; text-transform:uppercase; color:#7f746f; margin-bottom:9px;
}
#lv-fde .lv-fde-vst{
	font-family:var(--lvt-schrift-titel); font-weight:600; font-size:1rem;
	line-height:1.3; color:var(--w); margin:0 0 7px;
}
#lv-fde .lv-fde-vsx{ font-size:.9rem; line-height:1.55; margin:0; }

/* == Abschnittskopf == */
#lv-fde .lv-fde-sec{ text-align:center; margin:clamp(56px,6.6vw,94px) 0 clamp(26px,3.2vw,40px); }
#lv-fde .lv-fde-h2{
	font-family:var(--lvt-schrift-titel); font-weight:600;
	font-size:clamp(1.45rem,3.4vw,2.4rem); line-height:1.06; letter-spacing:-.015em;
	color:var(--w); margin:0;
}
#lv-fde .lv-fde-h2 span{
	background-image:linear-gradient(120deg,var(--lvt-gold-tief) 0%,var(--lvt-gold-licht) 22%,var(--lvt-gold-mittel) 48%,var(--lvt-gold-weiss) 72%,var(--lvt-gold-tief) 100%);
	-webkit-background-clip:text; background-clip:text; color:transparent;
}
#lv-fde .lv-fde-sub{
	max-width:700px; margin:14px auto 0;
	font-size:clamp(.97rem,1.4vw,1.04rem); line-height:1.62;
}

/* == Ablauf: Zeitstrahl mit sich aufziehender Goldlinie ==
   Die Linie ist eine eigene Ebene mit transform-origin oben und wird per
   scaleY aufgezogen - nur transform, also billig. Die Rauten sitzen darauf. */
#lv-fde .lv-fde-flow{ position:relative; max-width:860px; margin:0 auto; }
#lv-fde .lv-fde-rail{
	position:absolute; left:20px; top:14px; bottom:22px; width:1px; z-index:0;
	background:linear-gradient(180deg, rgba(212,175,55,.85), rgba(212,175,55,.5) 55%, rgba(212,175,55,.12));
	transform:scaleY(0); transform-origin:top center;
	transition:transform 1.5s var(--lvt-weich) .25s;
}
#lv-fde.is-in .lv-fde-rail{ transform:scaleY(1); }
#lv-fde .lv-fde-step{
	position:relative; z-index:1; padding:0 0 clamp(24px,3vw,34px) 62px;
}
#lv-fde .lv-fde-step:last-child{ padding-bottom:0; }
#lv-fde .lv-fde-badge{
	position:absolute; left:0; top:0; width:41px; height:41px;
	display:grid; place-items:center; isolation:isolate;
	font:600 11px/1 var(--lvt-schrift-titel); letter-spacing:.06em; color:var(--g);
	background:linear-gradient(135deg, rgba(255,246,214,.95), rgba(212,175,55,.55) 55%, rgba(255,246,214,.8));
	clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	transition:color .4s ease, background .4s ease;
}
#lv-fde .lv-fde-badge::before{
	content:''; position:absolute; inset:1.5px; z-index:-1; background:var(--lvt-karte);
	clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	transition:background .4s ease;
}
#lv-fde .lv-fde-st{
	font-family:var(--lvt-schrift-titel); font-weight:600;
	font-size:clamp(1.08rem,1.9vw,1.32rem); line-height:1.2; letter-spacing:-.01em;
	color:var(--w); margin:0 0 9px; padding-top:9px;
}
#lv-fde .lv-fde-sx{ font-size:.97rem; line-height:1.66; margin:0; }
#lv-fde .lv-fde-sx strong{ color:var(--w); font-weight:500; }

@media (hover: hover){
	#lv-fde .lv-fde-step:hover .lv-fde-badge{
		color:var(--lvt-schwarz);
		background:linear-gradient(135deg,var(--lvt-gold-creme), rgba(240,216,121,.95) 55%, var(--lvt-gold-creme));
	}
	#lv-fde .lv-fde-step:hover .lv-fde-badge::before{
		background:linear-gradient(120deg,var(--lvt-gold) 0%,var(--lvt-gold-weiss) 24%,var(--lvt-gold-hell) 50%,var(--lvt-gold-creme) 74%,var(--lvt-gold) 100%);
	}
}

/* == Ergebnis-Karten == */
#lv-fde .lv-fde-grid{
	display:grid; grid-template-columns:repeat(auto-fit, minmax(272px,1fr));
	gap:clamp(14px,1.7vw,20px);
}
#lv-fde .lv-fde-card{
	--cut:14px; position:relative; padding:1px; border:0;
	background:linear-gradient(150deg, rgba(212,175,55,.34), rgba(212,175,55,.08) 45%, rgba(212,175,55,.26));
	clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
	transition:background .4s ease, opacity .4s ease, transform .5s var(--lvt-weich);
}
#lv-fde .lv-fde-cbody{
	position:relative; overflow:hidden; height:100%; padding:26px 24px 28px;
	background:
		repeating-linear-gradient(45deg, rgba(212,175,55,.06) 0px, rgba(212,175,55,.06) 1px, transparent 1px, transparent 14px),
		linear-gradient(180deg, var(--lvt-karte-hell) 0%, var(--lvt-karte) 60%, var(--lvt-karte-tief) 100%);
	clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
#lv-fde .lv-fde-cbody::before{
	content:''; position:absolute; top:-30%; left:0; width:38%; height:160%; pointer-events:none;
	background:linear-gradient(90deg, transparent, rgba(255,246,220,.20), transparent);
	transform:translateX(-190%) skewX(-18deg);
	transition:transform .95s var(--lvt-weich);
}
#lv-fde .lv-fde-cnum{
	display:block; font:600 10px/1 var(--lvt-schrift-titel);
	letter-spacing:.24em; color:var(--g); margin-bottom:14px;
}
#lv-fde .lv-fde-ct{
	font-family:var(--lvt-schrift-titel); font-weight:600;
	font-size:1.03rem; line-height:1.22; color:var(--w); margin:0 0 10px;
}
#lv-fde .lv-fde-cx{ font-size:.93rem; line-height:1.6; margin:0; }
#lv-fde .lv-fde-cx strong{ color:var(--w); font-weight:500; }

@media (hover: hover){
	#lv-fde .lv-fde-grid:hover .lv-fde-card{ opacity:.42; }
	#lv-fde .lv-fde-grid:hover .lv-fde-card:hover{ opacity:1; }
	#lv-fde .lv-fde-card:hover{
		transform:translateY(-4px);
		background:linear-gradient(150deg, rgba(212,175,55,1), rgba(240,216,121,.5) 45%, rgba(212,175,55,.9));
	}
	#lv-fde .lv-fde-card:hover .lv-fde-cbody::before{ transform:translateX(330%) skewX(-18deg); }
}

/* == Eignung == */
#lv-fde .lv-fde-fit{
	max-width:900px; margin:0 auto;
	display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr));
	gap:clamp(14px,1.8vw,20px);
}
#lv-fde .lv-fde-fiti{
	position:relative; padding:16px 18px 18px;
	background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
	border-top:1px solid rgba(212,175,55,.3);
}
#lv-fde .lv-fde-fitt{
	font:600 10px/1.4 var(--lvt-schrift-titel); letter-spacing:.2em;
	text-transform:uppercase; color:var(--g); margin:0 0 9px;
}
#lv-fde .lv-fde-fitl{ list-style:none; margin:0; padding:0; }
#lv-fde .lv-fde-fitl li{
	position:relative; padding-left:19px; margin:0 0 8px;
	font-size:.91rem; line-height:1.5;
}
#lv-fde .lv-fde-fitl li:last-child{ margin-bottom:0; }
#lv-fde .lv-fde-fitl li::before{
	content:'\25C6'; position:absolute; left:0; top:.2em; font-size:7px; color:var(--g);
}

/* == Abschluss == */
#lv-fde .lv-fde-outro{
	max-width:820px; margin:clamp(46px,5.4vw,70px) auto 0; text-align:center;
	font-size:clamp(1rem,1.5vw,1.08rem); line-height:1.68; color:var(--w);
}
#lv-fde .lv-fde-cta-row{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:28px; }
#lv-fde .lv-fde-cta{
	--cut:9px;
	position:relative; z-index:0; isolation:isolate;
	display:inline-flex; align-items:center; justify-content:center; gap:10px;
	padding:14px 30px; border:0; border-radius:0;
	font:600 10px/1 var(--lvt-schrift-titel); letter-spacing:.2em;
	text-transform:uppercase; text-decoration:none; white-space:nowrap;
	clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
	transition:transform .4s var(--lvt-weich), background .35s ease, color .35s ease;
}
#lv-fde .lv-fde-cta::before{
	content:''; position:absolute; inset:1px; z-index:-1;
	clip-path:polygon(calc(var(--cut) - 1px) 0, 100% 0, 100% calc(100% - var(--cut) + 1px), calc(100% - var(--cut) + 1px) 100%, 0 100%, 0 calc(var(--cut) - 1px));
	transition:background .35s ease;
}
#lv-fde .lv-fde-cta::after{
	content:''; position:absolute; top:0; bottom:0; left:0; width:40%; pointer-events:none;
	transform:translateX(-180%) skewX(-18deg);
	transition:transform .8s var(--lvt-weich);
}
#lv-fde .lv-fde-cta:hover{ transform:translateY(-2px); }
#lv-fde .lv-fde-cta:hover::after{ transform:translateX(340%) skewX(-18deg); }
#lv-fde .lv-fde-cta:focus{ outline:none; }
#lv-fde .lv-fde-cta:focus-visible{ outline:1px dashed rgba(212,175,55,.75); outline-offset:5px; }
#lv-fde .lv-fde-cta.is-primary{
	color:var(--lvt-schwarz);
	background:linear-gradient(135deg, rgba(255,246,214,.9), rgba(212,175,55,.5) 55%, rgba(255,246,214,.75));
}
#lv-fde .lv-fde-cta.is-primary::before{
	background:linear-gradient(120deg,var(--lvt-gold-mittel) 0%,var(--lvt-gold-licht) 24%,var(--lvt-gold) 50%,var(--lvt-gold-weiss) 74%,var(--lvt-gold-mittel) 100%);
}
#lv-fde .lv-fde-cta.is-primary::after{
	background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
}
#lv-fde .lv-fde-cta.is-primary:hover{ background:linear-gradient(135deg,var(--lvt-gold-creme), rgba(240,216,121,.9) 55%, var(--lvt-gold-creme)); }
#lv-fde .lv-fde-cta.is-ghost{
	color:var(--w);
	background:linear-gradient(135deg, rgba(212,175,55,.85), rgba(212,175,55,.22) 55%, rgba(212,175,55,.7));
}
#lv-fde .lv-fde-cta.is-ghost::before{ background:rgba(8,8,8,.9); }
#lv-fde .lv-fde-cta.is-ghost::after{
	background:linear-gradient(90deg, transparent, rgba(255,244,214,.28), transparent);
}
#lv-fde .lv-fde-cta.is-ghost:hover{
	color:var(--g);
	background:linear-gradient(135deg, rgba(212,175,55,1), rgba(240,216,121,.5) 55%, rgba(212,175,55,.9));
}
#lv-fde .lv-fde-cta.is-ghost:hover::before{ background:rgba(14,12,6,.92); }

/* == Gestaffeltes Einblenden == */
#lv-fde .lv-fde-rv{
	opacity:0; transform:translateY(26px);
	transition:opacity .7s ease, transform .8s var(--lvt-weich);
}
#lv-fde.is-in .lv-fde-rv{ opacity:1; transform:none; }
#lv-fde.is-in .lv-fde-rv[data-d="2"]{ transition-delay:.08s; }
#lv-fde.is-in .lv-fde-rv[data-d="3"]{ transition-delay:.16s; }
#lv-fde.is-in .lv-fde-rv[data-d="4"]{ transition-delay:.24s; }
#lv-fde.is-in .lv-fde-rv[data-d="5"]{ transition-delay:.32s; }
#lv-fde.is-in .lv-fde-rv[data-d="6"]{ transition-delay:.40s; }

/* Die Schritte blenden nacheinander ein, im Takt der aufziehenden Linie */
#lv-fde .lv-fde-step{
	opacity:0; transform:translateY(18px);
	transition:opacity .6s ease, transform .7s var(--lvt-weich);
}
#lv-fde.is-in .lv-fde-step{ opacity:1; transform:none; }
#lv-fde.is-in .lv-fde-step[data-s="1"]{ transition-delay:.30s; }
#lv-fde.is-in .lv-fde-step[data-s="2"]{ transition-delay:.52s; }
#lv-fde.is-in .lv-fde-step[data-s="3"]{ transition-delay:.74s; }
#lv-fde.is-in .lv-fde-step[data-s="4"]{ transition-delay:.96s; }

@media (max-width:860px){
	#lv-fde{ padding-left:16px; padding-right:16px; }
	#lv-fde .lv-fde-card{ --cut:11px; }
	#lv-fde .lv-fde-rail{ left:16px; }
	#lv-fde .lv-fde-step{ padding-left:50px; }
	#lv-fde .lv-fde-badge{ width:33px; height:33px; font-size:10px; }
	#lv-fde .lv-fde-st{ padding-top:5px; }
	#lv-fde .lv-fde-cta{ --cut:7px; padding:13px 22px; letter-spacing:.16em; }
}
@media (hover: none){
	#lv-fde .lv-fde-cta:hover{ transform:none; }
}
@media (prefers-reduced-motion: reduce){
	#lv-fde .lv-fde-rv, #lv-fde .lv-fde-step{
		transition-duration:.01s !important; transition-delay:0s !important;
	}
	#lv-fde .lv-fde-rail{ transition:none !important; transform:scaleY(1); }
	#lv-fde .lv-fde-card, #lv-fde .lv-fde-cta, #lv-fde .lv-fde-badge,
	#lv-fde .lv-fde-cbody::before, #lv-fde .lv-fde-cta::after{
		transition-duration:.01s !important;
	}
}