/* CAD Yaman – Wartungsseite · pixelwerk.media */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/poppins-300.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/poppins-600.woff2") format("woff2"); }

:root {
	--rot: #b0141f;
	--tinte: #0c0f14;
	--text: #ffffff;
	--text-2: rgba(255, 255, 255, .82);
	--text-3: rgba(255, 255, 255, .6);
	--linie: rgba(255, 255, 255, .22);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0; min-height: 100vh; min-height: 100svh;
	display: flex; flex-direction: column;
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	color: var(--text); background: var(--tinte);
	position: relative; overflow-x: hidden;
}
a { color: inherit; }

/* Hintergrund: Foto, Abdunklung, feines Bauplan-Raster */
.hg, .hg-schatten, .hg-raster { position: fixed; inset: 0; pointer-events: none; }
.hg { background: var(--tinte) center 40% / cover no-repeat; filter: grayscale(.35) contrast(1.05); }
.hg-schatten {
	background:
		radial-gradient(ellipse at 50% 45%, rgba(12,15,20,.55) 0%, rgba(12,15,20,.78) 55%, rgba(12,15,20,.92) 100%),
		linear-gradient(180deg, rgba(12,15,20,.25), rgba(12,15,20,.55));
}
.hg-raster {
	opacity: .07;
	background-image:
		linear-gradient(rgba(255,255,255,.9) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.9) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: radial-gradient(ellipse at 50% 50%, transparent 25%, #000 75%);
	mask-image: radial-gradient(ellipse at 50% 50%, transparent 25%, #000 75%);
}

/* Inhalt */
.inhalt {
	position: relative; z-index: 1; flex: 1;
	display: flex; align-items: center; justify-content: center;
	padding: clamp(40px, 8vh, 96px) 20px clamp(24px, 4vh, 48px);
}
.box { width: 100%; max-width: 1100px; text-align: center; }
.logo { display: block; width: clamp(220px, 30vw, 480px); height: auto; margin: 0 auto; filter: drop-shadow(0 6px 24px rgba(0,0,0,.45)); }

.dachzeile {
	display: inline-flex; align-items: center; gap: 12px;
	margin-top: clamp(32px, 6vh, 60px);
	font-size: clamp(11px, 1vw, 15px); font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
}
.dachzeile::before, .dachzeile::after { content: ""; width: clamp(24px, 3vw, 44px); height: 2px; background: var(--rot); }

h1 {
	margin: clamp(14px, 2vh, 22px) 0 0;
	font-size: clamp(32px, 4.4vw, 64px); font-weight: 600; line-height: 1.12; letter-spacing: -.01em;
	text-wrap: balance;
}
h1 span { box-shadow: inset 0 -.18em 0 var(--rot); }

.einleitung {
	max-width: 760px; margin: clamp(16px, 2.5vh, 26px) auto 0;
	font-size: clamp(16px, 1.45vw, 21px); font-weight: 300; line-height: 1.6; color: var(--text-2);
	text-wrap: balance;
}

.kontakt { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; margin-top: clamp(28px, 4vh, 40px); padding: 0; list-style: none; }
.kontakt a, .kontakt span {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 12px 22px; border: 1px solid var(--linie); border-radius: 999px;
	background: rgba(255,255,255,.06); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
	font-size: clamp(15px, 1.15vw, 18px); font-weight: 500; text-decoration: none; white-space: nowrap;
	transition: background .2s, border-color .2s;
}
.kontakt a:hover, .kontakt a:focus-visible { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.45); }
.kontakt svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--rot); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Fuß */
.fuss {
	position: relative; z-index: 1;
	display: flex; flex-direction: column; align-items: center; gap: 18px;
	padding: 0 20px 28px; border-bottom: 6px solid var(--rot);
}
.credit { display: flex; align-items: center; gap: 14px; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); text-decoration: none; }
.credit img { height: 22px; width: auto; opacity: .92; }
.rechtliches { display: flex; gap: 22px; font-size: 13px; }
.rechtliches a { color: var(--text-3); text-decoration: none; }
.rechtliches a:hover, .rechtliches a:focus-visible { color: #fff; text-decoration: underline; }

/* Impressum & Datenschutz als Overlay (ohne JavaScript, über #anker) */
.overlay { display: none; position: fixed; inset: 0; z-index: 10; overflow-y: auto; background: rgba(8,10,14,.86); padding: 24px 16px; }
.overlay:target { display: block; }
.panel {
	position: relative; max-width: 760px; margin: 4vh auto; padding: clamp(24px, 4vw, 48px);
	background: #fff; color: #1b1f26; border-radius: 14px; border-top: 6px solid var(--rot);
	font-size: 15px; line-height: 1.65;
}
.panel h2 { margin: 0 0 18px; font-size: 26px; font-weight: 600; }
.panel h3 { margin: 26px 0 6px; font-size: 16px; font-weight: 600; }
.panel p, .panel ul { margin: 0 0 10px; }
.panel ul { padding-left: 20px; }
.panel a { color: var(--rot); }
.schliessen {
	position: absolute; top: 14px; right: 14px; width: 40px; height: 40px;
	display: grid; place-items: center; border-radius: 50%;
	font-size: 26px; line-height: 1; text-decoration: none; color: #1b1f26; background: #f1f2f4;
}
.schliessen:hover, .schliessen:focus-visible { background: #e3e5e9; }

@media (max-width: 640px) {
	.kontakt { flex-direction: column; align-items: center; }
	.credit { flex-direction: column; gap: 10px; }
	.fuss { padding-bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }