/* ---------- Tokens ---------- */
:root{
	--bg: #0c0e11;
	--bg-alt: #14171c;
	--surface: #1a1e24;
	--surface-2: #20252c;
	--border: rgba(255,255,255,.08);
	--text: #eef1f4;
	--muted: #9aa4b2;
	--accent: #01538A;
	--accent-dark: #013D66;
	--accent-contrast: #ffffff;
	/* #01538A is too dark for text on the dark ground - lighter tint of the same hue */
	--accent-text: #4FA6DE;
	--radius: 14px;
	--container: 1180px;
	--shadow: 0 20px 40px -20px rgba(0,0,0,.5);
	--ff-head: "Oswald", "Arial Narrow", sans-serif;
	--ff-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 86px; }
@media (prefers-reduced-motion: reduce){
	html{ scroll-behavior: auto; }
	*, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body{
	margin:0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--ff-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3{ font-family: var(--ff-head); text-transform: uppercase; letter-spacing:.02em; line-height:1.15; margin:0 0 .5em; }
p{ margin:0 0 1em; color: var(--muted); }
.container{ max-width: var(--container); margin-inline:auto; padding-inline: 24px; }

.skip-link{
	position:absolute; left:-999px; top:0; background:var(--accent); color:#fff; padding:.75em 1.25em; z-index:2000; border-radius: 0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* ---------- Buttons ---------- */
.btn{
	display:inline-flex; align-items:center; justify-content:center; gap:.5em;
	padding: .75em 1.5em; border-radius: 999px; font-weight:600; font-size:.95rem;
	border: 1px solid transparent; cursor:pointer; white-space:nowrap;
	transition: transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-accent{ background: var(--accent); color: var(--accent-contrast); }
.btn-accent:hover{ background: var(--accent-dark); }
.btn-ghost{ background: transparent; color: var(--text); border-color: rgba(255,255,255,.25); }
.btn-ghost:hover{ border-color: var(--text); }
.btn-lg{ padding: .9em 1.9em; font-size:1rem; }

/* ---------- Header ---------- */
.site-header{
	--header-h: 78px;
	position: sticky; top:0; z-index:1000;
	background: rgba(12,14,17,.7);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease, background-color .2s ease;
}
.site-header.is-scrolled{ background: rgba(12,14,17,.92); border-color: var(--border); }
.header-inner{ display:flex; align-items:center; gap: 24px; height: var(--header-h); }

.brand{ display:flex; align-items:center; margin-right:auto; }
/* The SVG lockup is white artwork, so it needs no recolouring on the dark ground. */
.brand-logo{ width: 200px; height:auto; transition: opacity .15s ease; }
.brand:hover .brand-logo{ opacity:.82; }
.brand-logo-sm{ width: 168px; }
@media (max-width: 560px){
	.brand-logo{ width: 150px; }
	.brand-logo-sm{ width: 140px; }
}

.main-nav ul{ display:flex; gap: 28px; }
.main-nav a{
	font-size:.92rem; font-weight:600; color: var(--muted);
	padding: .3em 0; border-bottom: 2px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}
.main-nav a:hover, .main-nav a.is-active{ color: var(--text); border-color: var(--accent-text); }

.header-actions{ display:flex; align-items:center; gap: 18px; }
.phone-link{ display:flex; align-items:center; gap:.5em; font-weight:600; font-size:.9rem; color: var(--text); }
.phone-link svg{ width:18px; height:18px; fill: var(--accent-text); }

.nav-toggle{
	display:none; flex-direction:column; justify-content:center; gap:5px;
	width:42px; height:42px; border-radius:8px; border:1px solid var(--border);
	background: transparent; cursor:pointer;
}
.nav-toggle span{ display:block; height:2px; width:20px; margin-inline:auto; background: var(--text); transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1100px){
	.phone-link span{ display:none; }
	/* Anchored to the header, not the viewport: the header's backdrop-filter makes
	   it the containing block, so viewport-relative insets would collapse to 0. */
	.main-nav{
		position:absolute; top:100%; left:0; right:0;
		height: calc(100dvh - var(--header-h));
		background: var(--bg);
		transform: translateX(100%); transition: transform .25s ease;
		overflow-y:auto; border-top:1px solid var(--border);
	}
	.main-nav.is-open{ transform: translateX(0); }
	.main-nav ul{ flex-direction:column; gap:0; padding: 12px 24px 32px; }
	.main-nav a{ display:block; padding: 16px 0; border-bottom:1px solid var(--border); }
	.nav-toggle{ display:flex; }
	.header-actions .btn-accent{ display:none; }
	body.has-nav-open{ overflow:hidden; }
}
@media (max-width: 560px){
	.site-header{ --header-h: 68px; }
	html{ scroll-padding-top: 68px; }
}

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view{ opacity:1; transform:none; }

/* ---------- Hero (scroll-driven) ---------- */
/* JS writes --e-*, --c-* and --h-o as the page scrolls; the values below are the
   at-rest state, so the hero looks right before (and without) JS. */
.hero{
	/* Starts at 300% and blows up to 800% while fading, as the hero scrolls. */
	--e-scale: 3; --e-y: 0vh; --e-o: 1;
	--c-y: 0px; --c-o: 1;
	--h-o: 1;
	/* Black ground: the emblem is screen-blended, and screen over pure black is a
	   no-op, so the artwork's own near-black wall matches the page exactly. */
	position:relative; background: #000;
}
.hero-track{ height: 200vh; }
.hero-stage{
	position: sticky; top:0; height:100svh; overflow:hidden;
	display:flex; flex-direction:column; align-items:center; justify-content:center;
	padding: 96px 0 92px;
}

.hero-emblem{
	position:relative; z-index:1;
	/* Base box is a third of the intended on-screen size: the 300% start scale
	   triples it. Bounded by vw/svh so nothing crops at rest. The positive margin
	   keeps the scaled-up artwork off the eyebrow line, since a transform
	   overflows its layout box. */
	width: min(340px, 40vw, 36svh); aspect-ratio: 1; margin-bottom: 12%;
	transform: translateY(var(--e-y)) scale(var(--e-scale));
	opacity: var(--e-o);
	will-change: transform, opacity;
}
/* The artwork is a glow on a near-black wall: screen blending keeps the glow,
   and the radial mask feathers the frame away so no square edge shows. */
.hero-emblem img{
	width:100%; height:100%; object-fit: contain;
	mix-blend-mode: screen;
	-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 38%, rgba(0,0,0,.55) 55%, transparent 70%);
	mask-image: radial-gradient(circle at 50% 50%, #000 38%, rgba(0,0,0,.55) 55%, transparent 70%);
	animation: emblem-in 1.8s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes emblem-in{ from{ opacity:0; transform: scale(1.12); } to{ opacity:1; transform:none; } }

/* Blends the black hero ground into the section that follows. */
.hero-glow{
	position:absolute; inset:0; pointer-events:none; z-index:0;
	background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 62%, var(--bg-alt) 99%);
}

.hero-content{
	position:relative; z-index:2; text-align:center; max-width: 760px;
	transform: translateY(var(--c-y)); opacity: var(--c-o);
	will-change: transform, opacity;
}
.hero-content > *{ animation: hero-in .9s cubic-bezier(.2,.7,.3,1) both; }
.hero-content > :nth-child(1){ animation-delay:.5s; }
.hero-content > :nth-child(2){ animation-delay:.62s; }
.hero-content > :nth-child(3){ animation-delay:.74s; }
.hero-content > :nth-child(4){ animation-delay:.86s; }
@keyframes hero-in{ from{ opacity:0; transform: translateY(18px); } to{ opacity:1; transform:none; } }

.eyebrow{ color: var(--accent-text); font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:.8rem; margin-bottom: .9em; }
.hero h1{ font-size: clamp(2rem, 5vw, 3.4rem); margin-bottom:.4em; text-shadow: 0 4px 30px rgba(0,0,0,.6); }
.hero h1 span{ color: var(--accent-text); }
.hero-text{ font-size:1.05rem; max-width: 54ch; margin-inline:auto; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top: 1.6em; }

.hero-hint{
	position:absolute; bottom: 28px; left:50%; transform: translateX(-50%);
	display:flex; flex-direction:column; align-items:center; gap:10px;
	color: var(--muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.2em;
	opacity: var(--h-o);
}
.hero-hint-line{ width:1px; height:46px; background: linear-gradient(180deg, var(--accent-text), transparent); }

@media (max-width: 700px){
	.hero-track{ height: 170vh; }
}
@media (max-height: 720px){
	.hero-hint{ display:none; }
}

@media (prefers-reduced-motion: reduce){
	.hero-track{ height: 100svh; }
	.hero-emblem img, .hero-content > *{ animation: none; }
}

/* ---------- Intro / A-Z ---------- */
.intro{ padding-block: 90px; background: var(--bg-alt); border-bottom:1px solid var(--border); }
.intro-inner{ max-width: 820px; text-align:center; margin-inline:auto; }
.az-heading{ font-size: clamp(1.6rem, 4vw, 2.4rem); }
.az-heading strong{ color: var(--accent-text); font-size: 1.3em; }

/* ---------- Values ---------- */
.values{ padding-block: 100px; }
.values-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.value-card{
	background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
	padding: 32px; box-shadow: var(--shadow);
}
.value-icon{ display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:12px; background: rgba(1,83,138,.22); margin-bottom: 20px; }
.value-icon svg{ width:26px; height:26px; fill: var(--accent-text); }
.value-card h3{ font-size:1.25rem; }
.value-card-stat{ background: linear-gradient(160deg, var(--accent), var(--accent-dark)); border-color: transparent; color: var(--accent-contrast); }
.value-card-stat p{ color: rgba(255,255,255,.86); }
.stat-number{ display:block; font-family: var(--ff-head); font-size: 3rem; line-height:1; margin-bottom:.3em; }
.signoff{ margin-top: 1.4em; color: rgba(255,255,255,.94); }

@media (max-width: 900px){
	.values-grid{ grid-template-columns: 1fr; }
}

/* ---------- Section head ---------- */
.section-head{ text-align:center; max-width: 640px; margin: 0 auto 56px; }
.section-head h2{ font-size: clamp(1.8rem, 4vw, 2.6rem); }

/* ---------- Services / Accordion ---------- */
.services{ padding-block: 100px; background: var(--bg-alt); border-block:1px solid var(--border); }
.accordion{ max-width: 880px; margin-inline:auto; border-top:1px solid var(--border); }
.acc-item{ border-bottom:1px solid var(--border); }
.acc-header{ margin:0; }
.acc-trigger{
	width:100%; display:flex; align-items:center; justify-content:space-between; gap: 20px;
	background:none; border:none; color: var(--text); text-align:left; cursor:pointer;
	font-family: var(--ff-head); text-transform:uppercase; letter-spacing:.02em;
	font-size: 1.05rem; padding: 22px 4px;
}
.acc-trigger:hover{ color: var(--accent-text); }
.acc-icon{ flex:none; width:20px; height:20px; fill: var(--accent-text); transition: transform .25s ease; }
.acc-trigger[aria-expanded="true"] .acc-icon{ transform: rotate(135deg); }

.acc-panel{ display:grid; grid-template-rows: minmax(0, 0fr); transition: grid-template-rows .3s ease; }
.acc-item.is-open .acc-panel{ grid-template-rows: minmax(0, 1fr); }
.acc-panel-inner{ overflow:hidden; min-height:0; }
.acc-panel p{ padding-inline: 4px; max-width: 70ch; }
.acc-panel p:last-child{ margin-bottom: 26px; }
.note{ font-style: italic; color:#7c8695; font-size:.92rem; }

/* ---------- Workshop showcase band ---------- */
.showcase{ position:relative; padding-block: 120px; overflow:hidden; }
.showcase-media{ position:absolute; inset:0; }
.showcase-media::after{
	content:""; position:absolute; inset:0;
	background: linear-gradient(90deg, rgba(12,14,17,.94) 0%, rgba(12,14,17,.82) 45%, rgba(12,14,17,.55) 100%),
	            linear-gradient(180deg, var(--bg-alt) 0%, rgba(12,14,17,0) 18%, rgba(12,14,17,0) 82%, var(--bg) 100%);
}
.showcase-media img{ width:100%; height:100%; object-fit:cover; }
.showcase-inner{ position:relative; max-width: 640px; }
.showcase-inner h2{ font-size: clamp(1.7rem, 4vw, 2.5rem); }
.showcase-stats{ display:flex; flex-wrap:wrap; gap: 36px; margin-top: 34px; }
.showcase-stats li{ display:flex; flex-direction:column; }
.showcase-stats strong{ font-family: var(--ff-head); font-size: 1.9rem; color: var(--text); line-height:1; }
.showcase-stats span{ font-size:.8rem; color: var(--muted); text-transform:uppercase; letter-spacing:.12em; margin-top:.5em; }

/* ---------- Equipment strip ---------- */
.equipment{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 64px; }
.equipment-card{
	margin:0; background: var(--surface); border:1px solid var(--border);
	border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow);
}
.equipment-card img{ width:100%; aspect-ratio: 3/2; object-fit:cover; }
.equipment-card figcaption{ padding: 20px 22px 24px; display:flex; flex-direction:column; gap:.4em; }
.equipment-card strong{ font-family: var(--ff-head); text-transform:uppercase; letter-spacing:.03em; font-size:1.05rem; }
.equipment-card span{ color: var(--muted); font-size:.9rem; }
@media (max-width: 860px){ .equipment{ grid-template-columns: 1fr; } }

/* ---------- Gallery ---------- */
.gallery{ padding-block: 100px; }
.gallery-grid{ columns: 3; column-gap: 20px; }
.gallery-item{
	display:block; width:100%; padding:0; margin: 0 0 20px; cursor: zoom-in;
	background:none; border:1px solid var(--border); border-radius: var(--radius);
	overflow:hidden; break-inside: avoid; box-shadow: var(--shadow);
}
.gallery-item img{ width:100%; height:auto; transition: transform .4s ease, opacity .3s ease; }
.gallery-item:hover img, .gallery-item:focus-visible img{ transform: scale(1.04); opacity:.88; }
.gallery-item:focus-visible{ outline: 2px solid var(--accent-text); outline-offset: 3px; }
@media (max-width: 900px){ .gallery-grid{ columns: 2; } }
@media (max-width: 560px){ .gallery-grid{ columns: 1; } }

/* ---------- Lightbox ---------- */
.lightbox{
	width:100vw; max-width:100vw; height:100dvh; max-height:100dvh;
	border:none; padding:0; background: rgba(6,8,11,.96); color: var(--text);
	align-items:center; justify-content:center;
}
.lightbox[open]{ display:flex; }
.lightbox::backdrop{ background: rgba(6,8,11,.9); }
.lightbox-figure{ margin:0; max-width: min(1200px, 92vw); display:flex; flex-direction:column; gap: 16px; align-items:center; }
.lightbox-figure img{ max-width:100%; max-height: 78dvh; width:auto; height:auto; border-radius: 10px; }
.lightbox-figure figcaption{ color: var(--muted); font-size:.9rem; text-align:center; }
.lightbox-close, .lightbox-nav{
	position:absolute; z-index:2; cursor:pointer; color: var(--text);
	background: rgba(255,255,255,.07); border:1px solid var(--border);
	border-radius:50%; width:52px; height:52px; font-size:1.6rem; line-height:1;
	display:flex; align-items:center; justify-content:center;
	transition: background-color .15s ease, color .15s ease;
}
.lightbox-close:hover, .lightbox-nav:hover{ background: var(--accent); color: var(--accent-contrast); border-color: transparent; }
.lightbox-close{ top: 20px; right: 20px; font-size:1.9rem; }
.lightbox-prev{ left: 20px; }
.lightbox-next{ right: 20px; }
@media (max-width: 620px){
	.lightbox-nav{ width:44px; height:44px; bottom: 22px; top:auto; }
	.lightbox-prev{ left: 22%; }
	.lightbox-next{ right: 22%; }
}

/* ---------- Contact photo ---------- */
.contact-photo{ margin: 34px 0 0; border-radius: var(--radius); overflow:hidden; border:1px solid var(--border); box-shadow: var(--shadow); }
.contact-photo img{ width:100%; aspect-ratio: 16/10; object-fit:cover; }
.contact-photo figcaption{ padding: 14px 18px; font-size:.85rem; color: var(--muted); background: var(--surface); }

/* ---------- Contact ---------- */
.contact{ padding-block: 100px; background: var(--bg-alt); border-top:1px solid var(--border); }
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:start; }
.contact-lead{ font-size:1.05rem; }
.contact-list{ display:flex; flex-direction:column; gap: 18px; margin-top: 24px; }
.contact-list li{ display:flex; align-items:flex-start; gap: 14px; }
.contact-list svg{ flex:none; width:22px; height:22px; fill: var(--accent-text); margin-top:2px; }
.placeholder{ color: var(--muted); font-style: italic; }
.contact-note{ margin-top: 24px; font-size:.85rem; color:#6f7885; }

.contact-form{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); }
.contact-form h3{ font-size:1.2rem; }
.form-row{ margin-bottom: 18px; display:flex; flex-direction:column; gap:.4em; }
.form-row label{ font-size:.85rem; font-weight:600; color: var(--muted); }
.form-row input, .form-row textarea{
	background: var(--surface-2); border:1px solid var(--border); color: var(--text);
	border-radius:8px; padding: .75em .9em; font: inherit; resize: vertical;
}
.form-row input:focus, .form-row textarea:focus{ outline: 2px solid var(--accent-text); outline-offset:1px; }
.form-hint{ margin: 14px 0 0; font-size:.85rem; color: var(--accent-text); }

@media (max-width: 900px){ .contact-grid{ grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer{ padding-block: 40px; border-top:1px solid var(--border); }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap: 24px; flex-wrap:wrap; }
.footer-links{ display:flex; gap: 22px; flex-wrap:wrap; }
.footer-links a{ color: var(--muted); font-size:.9rem; }
.footer-links a:hover{ color: var(--text); }
.footer-copy{ color:#6f7885; font-size:.82rem; margin:0; width:100%; text-align:center; }
@media (min-width: 700px){ .footer-copy{ width:auto; text-align:right; } }

/* ---------- Back to top ---------- */
.to-top{
	position:fixed; right: 22px; bottom: 22px; width:46px; height:46px; border-radius:50%;
	background: var(--accent); border:none; color: var(--accent-contrast); cursor:pointer;
	display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow);
	opacity:0; pointer-events:none; transform: translateY(10px);
	transition: opacity .2s ease, transform .2s ease;
	z-index: 900;
}
.to-top.is-visible{ opacity:1; pointer-events:auto; transform:none; }
.to-top svg{ width:20px; height:20px; fill: currentColor; }

/* ---------- Legal pages (Impressum / AGB) ---------- */
.legal-page{ padding-block: 64px 100px; background: var(--bg-alt); min-height: 70vh; }
.legal-back{ display:inline-block; margin-bottom: 32px; color: var(--muted); font-size:.9rem; font-weight:600; }
.legal-back:hover{ color: var(--accent-text); }

.legal-content{ max-width: 78ch; }
.legal-content h1{ font-size: clamp(1.8rem, 4vw, 2.6rem); }
.legal-content h2{ font-size: 1.25rem; color: var(--text); margin-top: 2.2em; }
.legal-content h3{ font-size: 1rem; color: var(--text); margin-top: 1.8em; }
.legal-content p{ font-size:.95rem; }
.legal-content a{ color: var(--accent-text); }
.legal-content a:hover{ text-decoration: underline; }
.legal-content strong{ color: var(--text); }
.legal-meta{ font-size:.85rem; color:#6f7885; }

/* ---------- Legal modal ---------- */
.legal-modal{
	width: min(820px, calc(100vw - 32px));
	max-height: min(86vh, 900px);
	padding: 0; border: 1px solid var(--border); border-radius: var(--radius);
	background: var(--surface); color: var(--text); box-shadow: var(--shadow);
	overflow: hidden;
}
.legal-modal::backdrop{ background: rgba(4,6,9,.75); backdrop-filter: blur(3px); }
.legal-modal-inner{ position:relative; max-height: inherit; }
.legal-modal-body{
	max-height: min(86vh, 900px); overflow-y:auto;
	padding: 40px clamp(20px, 4vw, 48px);
	overscroll-behavior: contain;
}
.legal-modal-body .legal-content,
.legal-modal-body > *{ max-width: none; }
.legal-modal-body h1{ font-size: clamp(1.5rem, 3.5vw, 2rem); padding-right: 40px; }
.legal-modal-close{
	position:absolute; top: 12px; right: 14px; z-index:2;
	width: 38px; height: 38px; border-radius:50%; cursor:pointer;
	background: var(--surface-2); border:1px solid var(--border); color: var(--text);
	font-size: 1.4rem; line-height:1; display:flex; align-items:center; justify-content:center;
	transition: background-color .15s ease, color .15s ease;
}
.legal-modal-close:hover{ background: var(--accent); color: var(--accent-contrast); border-color: transparent; }
.legal-modal-loading{ color: var(--muted); font-size:.95rem; }
body.has-modal-open{ overflow: hidden; }