/* LUXVIS Webdesign - Leistungsseite.
   Grundlage: die erprobte Galerie-/Lightbox-Fassung der
   3D-Visualisierungen, damit Buehne, Buttons und Lightbox
   sich exakt wie auf den anderen Seiten verhalten.
   Darunter die Zusatzregeln dieser Seite. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;600;700&family=Inter:wght@400;500;600&display=swap');

#lv-web{
	--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(52px,6.5vw,96px) 20px clamp(56px,7vw,96px);
	font-family:var(--lvt-schrift-text); color:var(--grey);
	overflow:hidden;
}
#lv-web *{ box-sizing:border-box; }
#lv-web .lv-web-inner{ max-width:1200px; margin:0 auto; }

/* == Gemeinsame Buehne == */
#lv-web .lv-web-stage{
	--cut:18px; 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-web .lv-web-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-web .lv-web-frame::before{
	content:''; position:absolute; top:-30%; left:0; width:36%; height:160%; z-index:5;
	pointer-events:none;
	background:linear-gradient(90deg, transparent, rgba(255,246,220,.22), transparent);
	transform:translateX(-190%) skewX(-18deg);
}
#lv-web.is-in .lv-web-frame::before{ animation:lvWebSheen 1.25s var(--lvt-weich) both .3s; }
@keyframes lvWebSheen{ to{ transform:translateX(330%) skewX(-18deg); } }

/* == Titelbuehne == */
#lv-web .lv-web-hero{ --cut:22px; }
#lv-web .lv-web-hero .lv-web-frame{
	display:flex; align-items:flex-end; justify-content:center;
	min-height:clamp(400px,60vh,660px);
	padding:clamp(34px,5vw,64px) clamp(20px,5vw,60px);
	text-align:center;
}
#lv-web .lv-web-hero img{
	position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
	filter:brightness(.62) contrast(1.05) saturate(.95); z-index:0;
}
#lv-web .lv-web-veil{
	position:absolute; inset:0; z-index:1; pointer-events:none;
	background:
		linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.05) 32%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.9) 100%),
		repeating-linear-gradient(45deg, rgba(212,175,55,.05) 0px, rgba(212,175,55,.05) 1px, transparent 1px, transparent 15px);
}
#lv-web .lv-web-hbox{ position:relative; z-index:2; max-width:860px; }
#lv-web .lv-web-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:16px;
}
#lv-web .lv-web-kicker::before, #lv-web .lv-web-kicker::after{
	content:''; width:24px; height:1px;
	background:linear-gradient(90deg, transparent, rgba(212,175,55,.8));
}
#lv-web .lv-web-kicker::after{ background:linear-gradient(90deg, rgba(212,175,55,.8), transparent); }
#lv-web .lv-web-title{
	font-family:var(--lvt-schrift-titel); font-weight:600;
	font-size:clamp(1.85rem,5vw,3.4rem); line-height:1.02; letter-spacing:-.02em;
	color:var(--w); margin:0;
}
#lv-web .lv-web-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-web .lv-web-hlead{
	margin:20px auto 0; max-width:660px;
	font-size:clamp(1rem,1.6vw,1.1rem); line-height:1.66; color:#cfc7c2;
}
#lv-web .lv-web-hlead strong{ color:var(--w); font-weight:500; }

/* == Abschnittskopf == */
#lv-web .lv-web-head{ text-align:center; margin:clamp(52px,6.2vw,88px) 0 clamp(24px,3vw,36px); }
#lv-web .lv-web-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-web .lv-web-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-web .lv-web-sub{
	max-width:720px; margin:14px auto 0;
	font-size:clamp(.97rem,1.4vw,1.04rem); line-height:1.64;
}

/* == Nutzen-Karten == */
#lv-web .lv-web-grid{
	display:grid; grid-template-columns:repeat(auto-fit, minmax(272px,1fr));
	gap:clamp(14px,1.7vw,20px);
}
#lv-web .lv-web-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-web .lv-web-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-web .lv-web-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-web .lv-web-cnum{
	display:block; font:600 10px/1 var(--lvt-schrift-titel);
	letter-spacing:.24em; color:var(--g); margin-bottom:14px;
}
#lv-web .lv-web-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-web .lv-web-cx{ font-size:.93rem; line-height:1.6; margin:0; }
#lv-web .lv-web-cx strong{ color:var(--w); font-weight:500; }

@media (hover: hover){
	#lv-web .lv-web-grid:hover .lv-web-card{ opacity:.42; }
	#lv-web .lv-web-grid:hover .lv-web-card:hover{ opacity:1; }
	#lv-web .lv-web-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-web .lv-web-card:hover .lv-web-cbody::before{ transform:translateX(330%) skewX(-18deg); }
	#lv-web .lv-web-stage:hover{
		background:linear-gradient(150deg, rgba(212,175,55,.9), rgba(240,216,121,.45) 45%, rgba(212,175,55,.8));
	}
}

/* == Referenzgalerie == */
#lv-web .lv-web-gal{
	display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
	gap:clamp(12px,1.5vw,18px);
}
#lv-web .lv-web-shot{
	--cut:13px; position:relative; padding:1px; border:0; margin:0; cursor:pointer;
	background:linear-gradient(150deg, rgba(212,175,55,.42), rgba(212,175,55,.1) 45%, rgba(212,175,55,.32));
	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);
	display:block; width:100%; text-align:left;
}
/* display:block ist Pflicht: .lv-web-sf ist ein span und damit von Haus aus
   inline - auf inline-Elementen greifen weder aspect-ratio noch height:100%
   beim Bild darin, der Rahmen bliebe leer. */
#lv-web .lv-web-sf{
	display:block;
	position:relative; overflow:hidden; background:var(--lvt-karte-tief); aspect-ratio:16 / 9;
	clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
#lv-web .lv-web-sf img{
	display:block; width:100%; height:100%; object-fit:cover;
	filter:grayscale(.3) brightness(.8) contrast(1.05); transform:scale(1.01);
	transition:filter .6s ease, transform .9s var(--lvt-weich);
}
#lv-web .lv-web-zoom{
	position:absolute; right:10px; bottom:10px; z-index:3;
	width:30px; height:30px; display:grid; place-items:center;
	background:rgba(6,6,6,.72); box-shadow:inset 0 0 0 1px rgba(212,175,55,.45);
	clip-path:polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
	opacity:0; transition:opacity .35s ease;
	pointer-events:none;
}
#lv-web .lv-web-zoom svg{ width:14px; height:14px; stroke:var(--g); }
#lv-web .lv-web-shot:focus{ outline:none; }
#lv-web .lv-web-shot:focus-visible{ outline:1px dashed rgba(212,175,55,.8); outline-offset:5px; }
#lv-web .lv-web-shot:focus-visible .lv-web-zoom{ opacity:1; }

@media (hover: hover){
	#lv-web .lv-web-gal:hover .lv-web-shot{ opacity:.45; }
	#lv-web .lv-web-gal:hover .lv-web-shot:hover{ opacity:1; }
	#lv-web .lv-web-shot:hover{
		transform:translateY(-3px);
		background:linear-gradient(150deg, rgba(212,175,55,1), rgba(240,216,121,.5) 45%, rgba(212,175,55,.9));
	}
	#lv-web .lv-web-shot:hover img{ filter:grayscale(0) brightness(1) contrast(1); transform:scale(1.06); }
	#lv-web .lv-web-shot:hover .lv-web-zoom{ opacity:1; }
}
@media (hover: none){
	#lv-web .lv-web-sf img{ filter:grayscale(0) brightness(.94) contrast(1.02); }
	#lv-web .lv-web-zoom{ opacity:.8; }
}

/* == Lightbox == */
#lv-web .lv-web-box{
	position:fixed; inset:0; z-index:99990;
	display:flex; align-items:center; justify-content:center;
	padding:clamp(14px,3vw,46px);
	background:rgba(4,4,4,.94);
	opacity:0; transition:opacity .3s ease;
}
#lv-web .lv-web-box[hidden]{ display:none; }
#lv-web .lv-web-box.is-open{ opacity:1; }
#lv-web .lv-web-boxin{
	position:relative; max-width:1500px; width:100%;
	display:flex; flex-direction:column; align-items:center; gap:14px;
}
#lv-web .lv-web-boxim{
	display:block; max-width:100%; max-height:78vh; width:auto; height:auto;
	box-shadow:0 0 0 1px rgba(212,175,55,.4), 0 30px 70px rgba(0,0,0,.7);
	transition:opacity .25s ease;
}
/* Beim Blaettern wird das neue Bild im Hintergrund vorgeladen. Solange das
   laeuft, tritt das alte zurueck und der Spinner laeuft - sonst steht das
   vorherige Bild scheinbar unveraendert da und man haelt es fuer einen Fehler. */
#lv-web .lv-web-box.is-busy .lv-web-boxim{ opacity:.16; }
#lv-web .lv-web-bspin{
	position:absolute; inset:0; z-index:2; display:none;
	align-items:center; justify-content:center; pointer-events:none;
}
#lv-web .lv-web-box.is-busy .lv-web-bspin{ display:flex; }
#lv-web .lv-web-boxcap{
	font-size:.86rem; line-height:1.5; color:#9b918d; text-align:center; margin:0;
}
#lv-web .lv-web-boxcap b{ color:var(--g); font-weight:600; letter-spacing:.14em; font-size:.76rem; }
#lv-web .lv-web-nav{
	position:absolute; top:50%; transform:translateY(-50%); z-index:2;
	width:44px; height:44px; display:grid; place-items:center; cursor:pointer;
	border:0; background:rgba(6,6,6,.78);
	box-shadow:inset 0 0 0 1px rgba(212,175,55,.45);
	clip-path:polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
	transition:box-shadow .3s ease, background .3s ease;
}
#lv-web .lv-web-nav:hover{ background:rgba(14,12,6,.9); box-shadow:inset 0 0 0 1px var(--g); }
#lv-web .lv-web-nav:focus{ outline:none; }
#lv-web .lv-web-nav:focus-visible{ outline:1px dashed rgba(212,175,55,.85); outline-offset:4px; }
#lv-web .lv-web-nav svg{ width:15px; height:15px; stroke:var(--g); }
#lv-web .lv-web-prev{ left:-2px; }
#lv-web .lv-web-next{ right:-2px; }
#lv-web .lv-web-close{
	position:absolute; top:-4px; right:-2px; z-index:3;
	width:40px; height:40px; display:grid; place-items:center; cursor:pointer;
	border:0; background:rgba(6,6,6,.8);
	box-shadow:inset 0 0 0 1px rgba(212,175,55,.5);
	clip-path:polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
	transition:box-shadow .3s ease, background .3s ease;
}
#lv-web .lv-web-close:hover{ background:rgba(14,12,6,.92); box-shadow:inset 0 0 0 1px var(--g); }
#lv-web .lv-web-close:focus{ outline:none; }
#lv-web .lv-web-close:focus-visible{ outline:1px dashed rgba(212,175,55,.85); outline-offset:4px; }
#lv-web .lv-web-close svg{ width:15px; height:15px; stroke:var(--g); }

@media (max-width:700px){
	#lv-web .lv-web-nav{ top:auto; bottom:-2px; transform:none; }
	#lv-web .lv-web-prev{ left:calc(50% - 52px); }
	#lv-web .lv-web-next{ right:calc(50% - 52px); }
	#lv-web .lv-web-boxin{ padding-bottom:56px; }
	#lv-web .lv-web-boxim{ max-height:64vh; }
}

/* == Video == */
#lv-web .lv-web-reel{ --cut:16px; }
#lv-web .lv-web-reel .lv-web-frame{ aspect-ratio:16 / 9; }
#lv-web .lv-web-reel iframe{
	position:absolute; inset:0; width:100%; height:100%; border:0; z-index:2;
}
#lv-web .lv-web-reel video{
	position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2;
}
/* Trennlinie zwischen Galerie, Videos und Abschluss.
   Der Abstand sitzt als INNENabstand am Wrapper, nicht als margin an der
   Linie - senkrechte Aussenabstaende fallen mit denen der Nachbarn zusammen
   und der kleinere verschwindet dann ersatzlos. */
#lv-web .lv-web-sep{ padding:clamp(66px,9vw,112px) 0; }
#lv-web .lv-web-hr{
	border:0; border-top:1px solid rgba(212,175,55,.28);
	margin:0;
}
/* Abschluss-Buttons nach Galerie/Video: Abstand ohne Linie darueber. */
#lv-web .lv-web-cta-top{ padding-top:clamp(66px,9vw,112px); }
#lv-web .lv-web-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-web .lv-web-frame.is-loaded .lv-web-loader{ opacity:0; pointer-events:none; }
#lv-web .lv-web-ld{ position:relative; width:34px; height:34px; }
#lv-web .lv-web-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:lvWebSpin 1s linear infinite;
}
#lv-web .lv-web-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 lvWebSpin{ to{ transform:rotate(405deg); } }
#lv-web .lv-web-sr{
	position:absolute; width:1px; height:1px; padding:0; margin:-1px;
	overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
#lv-web .lv-web-cap{
	margin:14px 2px 0; text-align:center;
	font-size:.82rem; line-height:1.55; color:var(--lvt-grau-tief);
}

/* == Abschluss == */
#lv-web .lv-web-outro{
	max-width:820px; margin:clamp(44px,5.2vw,68px) auto 0; text-align:center;
	font-size:clamp(1rem,1.5vw,1.08rem); line-height:1.68; color:var(--w);
}
#lv-web .lv-web-cta-row{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:28px; }
#lv-web .lv-web-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-web .lv-web-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-web .lv-web-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-web .lv-web-cta:hover{ transform:translateY(-2px); }
#lv-web .lv-web-cta:hover::after{ transform:translateX(340%) skewX(-18deg); }
#lv-web .lv-web-cta:focus{ outline:none; }
#lv-web .lv-web-cta:focus-visible{ outline:1px dashed rgba(212,175,55,.75); outline-offset:5px; }
#lv-web .lv-web-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-web .lv-web-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-web .lv-web-cta.is-primary::after{
	background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
}
#lv-web .lv-web-cta.is-primary:hover{ background:linear-gradient(135deg,var(--lvt-gold-creme), rgba(240,216,121,.9) 55%, var(--lvt-gold-creme)); }
#lv-web .lv-web-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-web .lv-web-cta.is-ghost::before{ background:rgba(8,8,8,.9); }
#lv-web .lv-web-cta.is-ghost::after{
	background:linear-gradient(90deg, transparent, rgba(255,244,214,.28), transparent);
}
#lv-web .lv-web-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-web .lv-web-cta.is-ghost:hover::before{ background:rgba(14,12,6,.92); }

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

@media (max-width:860px){
	#lv-web{ padding-left:16px; padding-right:16px; }
	#lv-web .lv-web-hero{ --cut:14px; }
	#lv-web .lv-web-reel{ --cut:12px; }
	#lv-web .lv-web-card, #lv-web .lv-web-shot{ --cut:11px; }
	#lv-web .lv-web-hero .lv-web-frame{ min-height:clamp(330px,56vh,500px); }
	#lv-web .lv-web-cta{ --cut:7px; padding:13px 22px; letter-spacing:.16em; }
}
@media (hover: none){
	#lv-web .lv-web-cta:hover{ transform:none; }
}
@media (prefers-reduced-motion: reduce){
	#lv-web .lv-web-rv{ transition-duration:.01s !important; transition-delay:0s !important; }
	#lv-web.is-in .lv-web-frame::before{ animation:none !important; }
	#lv-web .lv-web-ld i{ animation:none; opacity:.65; }
	#lv-web .lv-web-card, #lv-web .lv-web-shot, #lv-web .lv-web-cta,
	#lv-web .lv-web-sf img, #lv-web .lv-web-cbody::before, #lv-web .lv-web-cta::after{
		transition-duration:.01s !important;
	}
}


/* == Zusatzregeln der Webdesign-Seite == */

/* Fliesstext-Spalte unter der Kopfzeile */
#lv-web .lv-web-text{ max-width:820px; margin:clamp(26px,3.6vw,40px) auto 0; }
#lv-web .lv-web-text p{
	margin:0 0 1.15em; color:var(--grey);
	font-size:clamp(.97rem,1.4vw,1.06rem); line-height:1.72;
}
#lv-web .lv-web-text p:last-child{ margin-bottom:0; }
#lv-web .lv-web-text strong{ color:var(--w); font-weight:600; }

/* Ein Beispiel: Text neben Bildern, im Wechsel */
#lv-web .lv-web-cases{ display:grid; gap:clamp(52px,7.5vw,92px); margin-top:clamp(30px,4vw,46px); }
#lv-web .lv-web-case{ display:grid; gap:clamp(22px,3.2vw,38px); align-items:center; }
@media (min-width:980px){
	#lv-web .lv-web-case{ grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr); }
	#lv-web .lv-web-case.is-flip .lv-web-case-txt{ order:2; }
}
#lv-web .lv-web-num{
	display:block; font:600 11px/1 var(--lvt-schrift-titel);
	letter-spacing:.28em; color:rgba(212,175,55,.8); margin-bottom:13px;
}
#lv-web .lv-web-cname{
	font-family:var(--lvt-schrift-titel); font-weight:600; text-transform:uppercase;
	font-size:clamp(1.2rem,2.5vw,1.68rem); line-height:1.1; letter-spacing:.01em;
	color:var(--w); margin:0 0 7px;
}
#lv-web .lv-web-crole{
	display:block; font:600 10px/1.5 var(--lvt-schrift-titel);
	letter-spacing:.2em; text-transform:uppercase; color:#8d8480; margin-bottom:16px;
}
#lv-web .lv-web-case-txt p{
	margin:0 0 1em; color:var(--grey);
	font-size:clamp(.94rem,1.32vw,1.01rem); line-height:1.7;
}
#lv-web .lv-web-case-txt p:last-child{ margin-bottom:0; }
#lv-web .lv-web-case-txt strong{ color:var(--w); font-weight:600; }

/* Bildspalte: eine grosse Aufnahme, darunter zwei kleine */
#lv-web .lv-web-shots{ display:grid; gap:12px; min-width:0; }
#lv-web .lv-web-thumbs{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

#lv-web .lv-web-shot{
	--cut:14px;
	display:block; width:100%; padding:1px; margin:0; 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));
	cursor:pointer; transition:transform .5s var(--lvt-weich), background .45s ease;
}
#lv-web .lv-web-thumbs .lv-web-shot{ --cut:10px; }
#lv-web .lv-web-sf{
	display:block; position:relative; overflow:hidden;
	aspect-ratio:16/10; 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-web .lv-web-sf img{
	position:absolute; inset:0; width:100%; height:100%;
	object-fit:cover; object-position:50% 0;
	filter:grayscale(.42) brightness(.74) contrast(1.05); transform:scale(1.01);
	transition:filter .6s ease, transform .9s var(--lvt-weich);
}
#lv-web .lv-web-sf::after{
	content:''; position:absolute; top:-30%; left:0; width:38%; height:160%; z-index:3;
	pointer-events:none;
	background:linear-gradient(90deg, transparent, rgba(255,246,220,.26), transparent);
	transform:translateX(-190%) skewX(-18deg);
	transition:transform .95s var(--lvt-weich);
}
@media (hover:hover){
	#lv-web .lv-web-shot:hover{ transform:translateY(-3px); }
	#lv-web .lv-web-shot:hover img{ filter:none; transform:scale(1.05); }
	#lv-web .lv-web-shot:hover .lv-web-sf::after{ transform:translateX(330%) skewX(-18deg); }
}
#lv-web .lv-web-shot:focus{ outline:none; }
#lv-web .lv-web-shot:focus-visible{ outline:1px dashed rgba(212,175,55,.75); outline-offset:5px; }

/* Lupe in der Ecke jeder Aufnahme */
#lv-web .lv-web-zoom{
	position:absolute; right:10px; bottom:10px; z-index:4; width:30px; height:30px;
	display:grid; place-items:center; pointer-events:none;
	background:rgba(8,8,8,.72); color:var(--g);
	clip-path:polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
	opacity:0; transform:translateY(6px);
	transition:opacity .35s ease, transform .35s var(--lvt-weich);
}
#lv-web .lv-web-zoom svg{ width:15px; height:15px; stroke:currentColor; fill:none; }
@media (hover:hover){ #lv-web .lv-web-shot:hover .lv-web-zoom{ opacity:1; transform:none; } }

/* Handwerks-Abschnitt: was heute dazugehoert */
#lv-web .lv-web-craft{ display:grid; gap:clamp(24px,3.4vw,44px); align-items:start; margin-top:clamp(26px,3.6vw,40px); }
@media (min-width:900px){ #lv-web .lv-web-craft{ grid-template-columns:1fr 1fr; } }
#lv-web .lv-web-craft p{
	margin:0 0 1em; color:var(--grey);
	font-size:clamp(.95rem,1.35vw,1.02rem); line-height:1.7;
}
#lv-web .lv-web-craft p:last-child{ margin-bottom:0; }
#lv-web .lv-web-craft strong{ color:var(--w); font-weight:600; }
#lv-web .lv-web-list{ list-style:none; margin:0; padding:0; display:grid; gap:15px; }
#lv-web .lv-web-list li{
	position:relative; padding-left:25px; color:var(--grey);
	font-size:clamp(.93rem,1.3vw,1rem); line-height:1.62;
}
#lv-web .lv-web-list li::before{
	content:'\25C6'; position:absolute; left:0; top:.36em;
	font-size:9px; line-height:1; color:var(--g);
}
#lv-web .lv-web-list b{ color:var(--w); font-weight:600; }

/* Schmalere Geraete */
@media (max-width:600px){
	#lv-web .lv-web-shot{ --cut:10px; }
	#lv-web .lv-web-thumbs{ gap:9px; }
	#lv-web .lv-web-shots{ gap:9px; }
}

/* Diese Seite hat mehr Abschnitte als die Galerie - Staffelung fortsetzen. */
#lv-web.is-in .lv-web-rv[data-d="7"]{ transition-delay:.42s; }
#lv-web.is-in .lv-web-rv[data-d="8"]{ transition-delay:.48s; }
#lv-web.is-in .lv-web-rv[data-d="9"]{ transition-delay:.54s; }
#lv-web.is-in .lv-web-rv[data-d="10"]{ transition-delay:.60s; }
#lv-web.is-in .lv-web-rv[data-d="11"]{ transition-delay:.66s; }
#lv-web.is-in .lv-web-rv[data-d="12"]{ transition-delay:.72s; }
@media (prefers-reduced-motion: reduce){
	#lv-web .lv-web-rv{ opacity:1; transform:none; transition:none; }
}

/* == Nachtrag: Einleitung == */

/* Erste Zeile traegt die Aussage der Seite - fett und eine Spur groesser. */
#lv-web .lv-web-lead{
	font-weight:600; color:var(--w);
	font-size:clamp(1.02rem,1.6vw,1.16rem);
}

/* Die drei Absaetze darunter mittig, wie die Zeile darueber. */
#lv-web .lv-web-text{ text-align:center; }

/* Unter der Trennlinie weniger Luft als darueber: der Abstand oben bleibt,
   der nach unten faellt auf gut die Haelfte. Weiter als Innenabstand -
   senkrechte Aussenabstaende fallen mit den Nachbarn zusammen. */
#lv-web .lv-web-sep{
	padding-top:clamp(66px,9vw,112px);
	padding-bottom:clamp(66px,9vw,112px);
}
/* Die Kopfzeile bringt aus dem geerbten Regelwerk 87 px Aussenabstand
   nach oben mit. Der kam zum Innenabstand der Trennlinie hinzu -
   deshalb sah die Kuerzung fast unveraendert aus. Abgeraeumt, dann
   zaehlt nur noch der Innenabstand (Regel 2.10). */
#lv-web .lv-web-sep + .lv-web-head{ margin-top:0; }

/* Vorteile: keine Textspalte mehr daneben, die Liste steht allein und
   laeuft ab Tabletbreite zweispaltig. */
#lv-web .lv-web-craft{ grid-template-columns:1fr; }
#lv-web .lv-web-vorteile{ text-align:left; }
@media (min-width:820px){
	#lv-web .lv-web-vorteile{
		grid-template-columns:1fr 1fr;
		column-gap:clamp(26px,3.6vw,52px);
	}
}