/* =========================================================
   DYNA werbung+design – Logo mit 3D-Wuerfel im Header
   Gehoert zu js/dyna-cube.js. Keine Abhaengigkeiten.
   Strichstaerke: --dc-stroke (px, unabhaengig von der Logogroesse)
   ========================================================= */
#header .dc-logo-wrap {
	width: clamp(200px, 30vw, 420px);
	margin: 0 auto 2.2em;
	--dc-stroke: 3px;
}
.dyna-logo {
	position: relative;
	width: 100%;
	aspect-ratio: 212.98 / 59.69;
	container-type: inline-size;
}
.dyna-logo svg {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	display: block;
	overflow: visible;
}
/* Buchstaben als weisse Kontur */
.dyna-logo svg path {
	fill: none;
	stroke: #fff;
	stroke-width: var(--dc-stroke, 3px);
	stroke-linejoin: miter;
	vector-effect: non-scaling-stroke;
}
.dyna-logo .dl-wrap {
	position: absolute;
	left: 92.5251%; top: 73.3456%;
	width: 7.4373%; height: 26.6544%;
	--s: calc(100cqw * 15.84 / 212.98);
	perspective: calc(var(--s) * 7);
	cursor: pointer;
}
.dyna-logo .dl-pos  { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(calc(var(--s) / -2)); }
.dyna-logo .dl-cube { position: absolute; inset: 0; transform-style: preserve-3d; }
.dyna-logo .dl-f    { position: absolute; inset: 0; background: #E4E6E2; backface-visibility: hidden; }
.dyna-logo .dl-f0 { transform: translateZ(calc(var(--s) / 2)); }
.dyna-logo .dl-f1 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.dyna-logo .dl-f2 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.dyna-logo .dl-f3 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.dyna-logo .dl-f4 { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.dyna-logo .dl-f5 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
/* Wuerfel als Kontur (data-cube-style="outline" oder "wire") */
.dyna-logo[data-cube-style] .dl-f {
	background: none;
	box-sizing: border-box;
	inset: calc(var(--dc-stroke, 3px) / -2);
	border: var(--dc-stroke, 3px) solid #fff;
}
.dyna-logo[data-cube-style="wire"] .dl-f { backface-visibility: visible; }

@media screen and (max-width: 736px) {
	#header .dc-logo-wrap { width: min(70vw, 280px); margin-bottom: 1.6em; --dc-stroke: 2.5px; }
}