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

#lv-vr{
	--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-vr *{ box-sizing:border-box; }
#lv-vr .lv-vr-inner{ max-width:1200px; margin:0 auto; }

/* == Kopfzeile == */
#lv-vr .lv-vr-head{ text-align:center; margin-bottom:clamp(26px,3.4vw,40px); }
#lv-vr .lv-vr-kicker{
	display:inline-block; font:600 11px/1 var(--lvt-schrift-titel);
	letter-spacing:.28em; text-transform:uppercase; color:var(--g); margin-bottom:16px;
}
#lv-vr .lv-vr-title{
	font-family:var(--lvt-schrift-titel); font-weight:600;
	font-size:clamp(1.7rem,4.4vw,3.1rem); line-height:1.04; letter-spacing:-.015em;
	color:var(--w); margin:0;
}
#lv-vr .lv-vr-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-vr .lv-vr-lead{
	max-width:760px; margin:20px auto 0; text-align:center;
	font-size:clamp(1rem,1.5vw,1.09rem); line-height:1.65;
}
#lv-vr .lv-vr-lead strong{ color:var(--w); font-weight:500; }

/* == Umschalter: zwei kantige Schalter, Rezept 4.12 == */
#lv-vr .lv-vr-tabs{
	display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
	margin:clamp(28px,3.6vw,44px) 0 clamp(24px,3vw,34px);
}
#lv-vr .lv-vr-tab{
	--cut:9px;
	position:relative; z-index:0; isolation:isolate;
	display:inline-flex; align-items:center; gap:10px;
	padding:14px 26px; border:0; border-radius:0; box-shadow:none;
	font:600 10px/1 var(--lvt-schrift-titel); letter-spacing:.2em;
	text-transform:uppercase; white-space:nowrap; cursor:pointer;
	background:linear-gradient(135deg, rgba(212,175,55,.55), rgba(212,175,55,.14) 55%, rgba(212,175,55,.42));
	color:var(--grey);
	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-vr .lv-vr-tab::before{
	content:''; position:absolute; inset:1px; z-index:-1; background:rgba(8,8,8,.9);
	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-vr .lv-vr-tab::after{
	content:''; position:absolute; top:0; bottom:0; left:0; width:40%; pointer-events:none;
	background:linear-gradient(90deg, transparent, rgba(255,244,214,.28), transparent);
	transform:translateX(-180%) skewX(-18deg);
	transition:transform .8s var(--lvt-weich);
}
#lv-vr .lv-vr-tab .lv-vr-num{
	font-size:9px; letter-spacing:.14em; color:var(--g); opacity:.85; transition:color .35s ease;
}
#lv-vr .lv-vr-tab:hover{ transform:translateY(-2px); color:var(--w); }
#lv-vr .lv-vr-tab:hover::after{ transform:translateX(340%) skewX(-18deg); }
#lv-vr .lv-vr-tab:focus{ outline:none; }
#lv-vr .lv-vr-tab:focus-visible{ outline:1px dashed rgba(212,175,55,.75); outline-offset:5px; }
#lv-vr .lv-vr-tab[aria-selected="true"]{
	background:linear-gradient(135deg, rgba(255,246,214,.9), rgba(212,175,55,.5) 55%, rgba(255,246,214,.75));
	color:var(--lvt-schwarz);
}
#lv-vr .lv-vr-tab[aria-selected="true"]::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-vr .lv-vr-tab[aria-selected="true"] .lv-vr-num{ color:rgba(10,10,10,.65); }

/* == Panel == */
#lv-vr .lv-vr-panel{ display:block; }
#lv-vr .lv-vr-panel[hidden]{ display:none; }
#lv-vr .lv-vr-panel.is-active{ animation:lvVrIn .55s var(--lvt-weich) both; }
@keyframes lvVrIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
#lv-vr .lv-vr-cols{
	display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
	gap:clamp(24px,3vw,40px); align-items:start;
}
#lv-vr .lv-vr-pt{
	font-family:var(--lvt-schrift-titel); font-weight:600;
	font-size:clamp(1.25rem,2.3vw,1.7rem); line-height:1.12; letter-spacing:-.01em;
	color:var(--w); margin:0 0 6px;
}
#lv-vr .lv-vr-pt b{ font-weight:600; color:var(--g); }
#lv-vr .lv-vr-pclaim{
	font:600 10px/1.4 var(--lvt-schrift-titel); letter-spacing:.22em;
	text-transform:uppercase; color:var(--g); margin:0 0 16px;
}
#lv-vr .lv-vr-ptext{ font-size:.99rem; line-height:1.68; margin:0 0 20px; }
#lv-vr .lv-vr-ptext strong{ color:var(--w); font-weight:500; }
#lv-vr .lv-vr-feat{ list-style:none; margin:0; padding:0; }
#lv-vr .lv-vr-feat li{
	position:relative; padding:0 0 0 22px; margin:0 0 10px;
	font-size:.93rem; line-height:1.5; color:var(--grey);
}
#lv-vr .lv-vr-feat li::before{
	content:'\25C6'; position:absolute; left:0; top:.15em;
	font-size:8px; color:var(--g);
}
#lv-vr .lv-vr-feat li strong{ color:var(--w); font-weight:500; }

/* == Medienbuehne: Goldkante, Beschnitt, Reflex, Vignette (Rezept 4.3/4.4) == */
#lv-vr .lv-vr-stage{
	--cut:16px; position:relative; padding:1px; border:0;
	background:linear-gradient(150deg, rgba(212,175,55,.55), rgba(212,175,55,.12) 45%, rgba(212,175,55,.42));
	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 .45s ease;
}
#lv-vr .lv-vr-frame{
	position:relative; overflow:hidden; background:var(--lvt-karte-tief);
	clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
#lv-vr .lv-vr-media{
	display:block; width:100%; aspect-ratio:16 / 9; border:0;
	background:var(--lvt-karte-tief); object-fit:cover;
}
#lv-vr .lv-vr-frame::before{
	content:''; position:absolute; top:-30%; left:0; width:38%; height:160%; z-index:5;
	pointer-events:none;
	background:linear-gradient(90deg, transparent, rgba(255,246,220,.24), transparent);
	transform:translateX(-190%) skewX(-18deg);
}
#lv-vr.is-in .lv-vr-panel.is-active .lv-vr-frame::before{
	animation:lvVrSheen 1.15s var(--lvt-weich) both .25s;
}
@keyframes lvVrSheen{ to{ transform:translateX(330%) skewX(-18deg); } }
#lv-vr .lv-vr-frame::after{
	content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
	background:linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 66%, rgba(6,6,6,.55) 100%);
}
#lv-vr .lv-vr-frame:fullscreen{ clip-path:none; }
#lv-vr .lv-vr-frame:fullscreen .lv-vr-media{ width:100vw; height:100vh; aspect-ratio:auto; }
#lv-vr .lv-vr-frame:fullscreen::after{ background:none; }

/* == Lade-Overlay fuer iframe und Video ==
   Beide brauchen spuerbar lange, bis Inhalt sichtbar wird - ohne Anzeige bleibt
   die Buehne in dieser Zeit einfach schwarz. Das Overlay liegt ueber dem Medium
   und blendet aus, sobald das JS "geladen" meldet (Rezept 4.14 Erweiterung). */
#lv-vr .lv-vr-loader{
	position:absolute; inset:0; z-index:4;
	display:flex; align-items:center; justify-content:center;
	background:var(--lvt-karte-tief);
	opacity:1; transition:opacity .5s ease .05s;
}
#lv-vr .lv-vr-frame.is-loaded .lv-vr-loader{ opacity:0; pointer-events:none; }
#lv-vr .lv-vr-ld{ position:relative; width:34px; height:34px; }
#lv-vr .lv-vr-ld i{
	position:absolute; inset:0; border:2px solid rgba(212,175,55,.16);
	border-top-color:var(--g); border-right-color:rgba(212,175,55,.5);
	transform:rotate(45deg);
	animation:lvVrSpin 1s linear infinite;
}
#lv-vr .lv-vr-ld b{
	position:absolute; inset:0; margin:auto; width:5px; height:5px;
	background:var(--g); transform:rotate(45deg);
	box-shadow:0 0 10px rgba(212,175,55,.65);
}
@keyframes lvVrSpin{ to{ transform:rotate(405deg); } }
#lv-vr .lv-vr-sr{
	position:absolute; width:1px; height:1px; padding:0; margin:-1px;
	overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* == Bedienelemente ueber der Buehne == */
#lv-vr .lv-vr-ctrl{
	position:absolute; top:12px; right:12px; z-index:6; display:flex; gap:8px;
}
#lv-vr .lv-vr-cbtn{
	--cut:7px;
	position:relative; z-index:0; isolation:isolate;
	display:inline-flex; align-items:center; gap:7px;
	padding:8px 13px; border:0; border-radius:0; cursor:pointer;
	font:600 9px/1 var(--lvt-schrift-titel); letter-spacing:.18em;
	text-transform:uppercase; color:var(--w);
	background:linear-gradient(135deg, rgba(212,175,55,.8), rgba(212,175,55,.2) 55%, rgba(212,175,55,.65));
	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 .35s var(--lvt-weich), background .3s ease, color .3s ease;
}
#lv-vr .lv-vr-cbtn::before{
	content:''; position:absolute; inset:1px; z-index:-1; background:rgba(6,6,6,.82);
	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 .3s ease;
}
#lv-vr .lv-vr-cbtn svg{ display:block; width:15px; height:15px; stroke:currentColor; }
#lv-vr .lv-vr-cbtn:hover{ transform:translateY(-1px); color:var(--g); }
#lv-vr .lv-vr-cbtn:hover::before{ background:rgba(14,12,6,.9); }
#lv-vr .lv-vr-cbtn:focus{ outline:none; }
#lv-vr .lv-vr-cbtn:focus-visible{ outline:1px dashed rgba(212,175,55,.8); outline-offset:4px; }
#lv-vr .lv-vr-cap{
	margin:12px 2px 0; font-size:.8rem; line-height:1.5; color:var(--lvt-grau-tief);
}

/* == Direktvergleich == */
#lv-vr .lv-vr-cmp{ margin-top:clamp(40px,5vw,64px); }
#lv-vr .lv-vr-cmp-t{
	font-family:var(--lvt-schrift-titel); font-weight:600;
	font-size:clamp(1.1rem,2vw,1.45rem); letter-spacing:-.01em; color:var(--w);
	text-align:center; margin:0 0 22px;
}
#lv-vr .lv-vr-grid{
	border-top:1px solid rgba(212,175,55,.22);
}
#lv-vr .lv-vr-row{
	display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1fr) minmax(0,1fr);
	gap:18px; padding:15px 4px;
	border-bottom:1px solid rgba(212,175,55,.14);
}
#lv-vr .lv-vr-row.is-head{
	border-bottom:1px solid rgba(212,175,55,.3); padding-top:13px; padding-bottom:13px;
}
#lv-vr .lv-vr-k{
	font:600 10px/1.4 var(--lvt-schrift-titel); letter-spacing:.2em;
	text-transform:uppercase; color:var(--g);
}
#lv-vr .lv-vr-row.is-head .lv-vr-va,
#lv-vr .lv-vr-row.is-head .lv-vr-vb{
	font:600 11px/1.3 var(--lvt-schrift-titel); letter-spacing:.18em;
	text-transform:uppercase; color:var(--w);
}
#lv-vr .lv-vr-va, #lv-vr .lv-vr-vb{
	font-size:.92rem; line-height:1.5; color:#9b918d;
	transition:color .35s ease, opacity .35s ease;
}
#lv-vr .lv-vr-tag{
	display:none; font:600 9px/1 var(--lvt-schrift-titel); letter-spacing:.2em;
	text-transform:uppercase; color:var(--g); font-style:normal; margin-bottom:5px;
}
#lv-vr[data-active="a"] .lv-vr-va,
#lv-vr[data-active="b"] .lv-vr-vb{ color:var(--w); }
#lv-vr[data-active="a"] .lv-vr-vb,
#lv-vr[data-active="b"] .lv-vr-va{ opacity:.6; }
#lv-vr[data-active="a"] .lv-vr-row.is-head .lv-vr-vb,
#lv-vr[data-active="b"] .lv-vr-row.is-head .lv-vr-va{ opacity:.5; }

/* == Abschluss == */
#lv-vr .lv-vr-outro{
	max-width:820px; margin:clamp(38px,4.6vw,58px) auto 0; text-align:center;
	font-size:clamp(1rem,1.5vw,1.06rem); line-height:1.68; color:var(--w);
}
#lv-vr .lv-vr-cta-row{ display:flex; justify-content:center; margin-top:28px; }
#lv-vr .lv-vr-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; color:var(--lvt-schwarz);
	background:linear-gradient(135deg, rgba(255,246,214,.9), rgba(212,175,55,.5) 55%, rgba(255,246,214,.75));
	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;
}
#lv-vr .lv-vr-cta::before{
	content:''; position:absolute; inset:1px; z-index:-1;
	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%);
	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-vr .lv-vr-cta::after{
	content:''; position:absolute; top:0; bottom:0; left:0; width:40%; pointer-events:none;
	background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
	transform:translateX(-180%) skewX(-18deg);
	transition:transform .8s var(--lvt-weich);
}
#lv-vr .lv-vr-cta:hover{ transform:translateY(-2px); background:linear-gradient(135deg,var(--lvt-gold-creme), rgba(240,216,121,.9) 55%, var(--lvt-gold-creme)); }
#lv-vr .lv-vr-cta:hover::after{ transform:translateX(340%) skewX(-18deg); }
#lv-vr .lv-vr-cta:focus{ outline:none; }
#lv-vr .lv-vr-cta:focus-visible{ outline:1px dashed rgba(212,175,55,.75); outline-offset:5px; }

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

@media (max-width:980px){
	#lv-vr .lv-vr-cols{ grid-template-columns:1fr; }
	/* .lv-vr-stage ist selbst kein Grid-Kind von .lv-vr-cols, sondern liegt
	   zusammen mit .lv-vr-cap in einem umschliessenden div - order muss
	   deshalb auf diesem Wrapper sitzen, nicht auf der Buehne selbst. */
	#lv-vr .lv-vr-cols > *:last-child{ order:-1; }
}
@media (max-width:860px){
	#lv-vr{ padding-left:16px; padding-right:16px; }
	#lv-vr .lv-vr-stage{ --cut:12px; }
	#lv-vr .lv-vr-tab{ --cut:7px; padding:12px 16px; letter-spacing:.14em; flex:1 1 auto; justify-content:center; }
	#lv-vr .lv-vr-cbtn span{ display:none; }
	#lv-vr .lv-vr-cbtn{ padding:9px 10px; }
	#lv-vr .lv-vr-row{ grid-template-columns:1fr; gap:10px; padding:16px 4px; }
	#lv-vr .lv-vr-row.is-head{ display:none; }
	#lv-vr .lv-vr-tag{ display:block; }
	#lv-vr .lv-vr-cta{ --cut:7px; padding:13px 22px; letter-spacing:.16em; }
	#lv-vr[data-active="a"] .lv-vr-vb,
	#lv-vr[data-active="b"] .lv-vr-va{ opacity:.75; }
}
@media (hover: none){
	#lv-vr .lv-vr-tab:hover,
	#lv-vr .lv-vr-cbtn:hover,
	#lv-vr .lv-vr-cta:hover{ transform:none; }
}
@media (prefers-reduced-motion: reduce){
	#lv-vr .lv-vr-rv{ transition-duration:.01s !important; transition-delay:0s !important; }
	#lv-vr .lv-vr-panel.is-active{ animation:none !important; }
	#lv-vr.is-in .lv-vr-panel.is-active .lv-vr-frame::before{ animation:none !important; }
	#lv-vr .lv-vr-tab, #lv-vr .lv-vr-cbtn, #lv-vr .lv-vr-cta,
	#lv-vr .lv-vr-tab::after, #lv-vr .lv-vr-cta::after{
		transition-duration:.01s !important;
	}
	#lv-vr .lv-vr-ld i{ animation:none; opacity:.65; }
}