:root{
	--bg:#0f1220;
	--fg:#e8ebff;
	--muted:#9aa3c8;
	--accent:#7aa2ff;
	--line:#fff;
	--card:#161a2e;
	--shadow: 0 10px 30px rgba(0,0,0,.35);
}

.tri-hero { position: relative; }
.tri-hero .wrap{
	position: relative;
	width: 100%;
	margin-inline: auto;
	min-height: 50vh;
}

@media (max-width: 1px){
  .tri-hero .wrap { min-height: 100vh; }
}

/* neue Parallax-Ebene (hinter allem) */
.tri-hero .parallax{
	position:absolute; 
	inset:0;
	z-index: 0;
	will-change: transform;    
}

.tri-hero svg.tri{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index: 1; shape-rendering: geometricPrecision;}
.tri-hero .term{ position:absolute; z-index: 2; }
.tri line{ stroke:var(--line); stroke-width:2; stroke-linecap:round; vector-effect: non-scaling-stroke;}

.tri-hero .term {
	position: absolute;
	display: inline-block;
	text-decoration: none;
	transform: none !important;
	translate: 0 0 !important;
	will-change: opacity;
	background: transparent;
	border: none;
	color:var(--fg);
	cursor:pointer;
	user-select:none;
	letter-spacing:.2px;
	box-shadow: none;
	font-weight: 400; 
	text-align: center; 
	text-shadow: 1px 1px 2px #003b44, 0px 0px 30px #007689, 0px 0px 30px #007689, 0px 0px 20px #007689, 0px 0px 20px #007689; 
}
.tri-hero .term:hover, 
.tri-hero .term:focus-visible { transform: none !important; }

.tri-hero .term__title { 
	display:block; 
	font-size: 1.75em; 
	text-transform: uppercase; 
}
.tri-hero .term__hover { display:block; font-size:1.25em; max-width:18em; }
.tri-hero .term__hover .l1, 
.tri-hero .term__hover .l2{
	display:block; 
	opacity:0; 
	transition: opacity .18s ease;
}
.tri-hero .term:hover .term__hover .l1,
.tri-hero .term:focus-visible .term__hover .l1,
.tri-hero .term.touched .term__hover .l1{
	opacity:1; 
	transition-delay:.05s;
}
.tri-hero .term:hover .term__hover .l2,
.tri-hero .term:focus-visible .term__hover .l2,
.tri-hero .term.touched .term__hover .l2{
	opacity:1; 
	transition-delay:.2s;
}

/* Kleines Rendering-Tuning für Linien */
.tri-hero svg.tri { shape-rendering: geometricPrecision; }
.tri-hero svg.tri line { vector-effect: non-scaling-stroke; }

/* positions */
.tri-hero .p-top-right { top:2em; right:2em; }
.tri-hero .p-left { top:40%; left:2em; transform:translateY(-50%); }
.tri-hero .p-bottom-mid { bottom:0em; left:50%; transform:translateX(-50%); }

@media (max-width: 1440px){
.tri-hero .p-top-right { top:0em; right:0em; }
.tri-hero .p-left { top:40%; left:0em; }
.tri-hero .p-bottom-mid { bottom:-2em; left:40%;  }
}

@media (max-width: 992px){
.tri-hero .wrap { height: 40vh; }
.tri-hero .p-top-right { top:0em; right:0em; }
.tri-hero .p-left { top:40%; left:0em; }
.tri-hero .p-bottom-mid { bottom:-2em; left:30%;  }
}

@media (max-width: 684px){
.tri-hero .term__hover { width: 10em; }


}