/* ==========================================================================
   HS78 – Your Business Base
   Onepager Styling (responsive)
   ========================================================================== */

:root {
	--hs-black: #121212;
	--hs-ink: #1a1a1a;
	--hs-grey: #6b6b6b;
	--hs-muted: #8c8c87;
	--hs-line: #e0e0dc;
	--hs-box: #f8f8f5;
	--hs-white: #ffffff;
	--hs-bg-grey: #e5e6e1;

	--hs-container: 1200px;
	--hs-gutter: 120px;

	--hs-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Reset / Base ---------- */
* { box-sizing: border-box; }

.hs78,
.hs78 * {
	margin: 0;
	padding: 0;
}

.hs78 {
	font-family: var(--hs-font);
	color: var(--hs-ink);
	background: var(--hs-white);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	line-height: 1.5;
}

.hs78 img { display: block; max-width: 100%; height: auto; }
.hs78 a { color: inherit; text-decoration: none; }

.hs78-container {
	width: 100%;
	max-width: var(--hs-container);
	margin: 0 auto;
}

.hs78-section {
	padding-left: var(--hs-gutter);
	padding-right: var(--hs-gutter);
}

.hs78-eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.24em;
	color: var(--hs-muted);
	text-transform: uppercase;
}

/* ---------- Claim (unter Hero) ---------- */
.hs78-claim {
	padding-top: 90px;
	padding-bottom: 32px;
	text-align: center;
}
.hs78-claim__inner { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hs78-claim__title {
	font-size: 72px;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--hs-black);
}
.hs78-claim__sub {
	font-size: 26px;
	font-weight: 300;
	letter-spacing: -0.01em;
	color: #404040;
}

/* ---------- Hero Slider ---------- */
/* Der Hero startet kompakt (--hero-start), damit der Claim beim Laden
   sichtbar ist. Sobald gescrollt wird, setzt JS die Klasse .is-grown
   und der Hero fährt per CSS-Transition auf volle Bildschirmhöhe aus.

   Der Bild-Container hat immer die volle Zielhöhe und ist oben
   verankert – dadurch bleibt der Ausschnitt oben ruhig und unten
   kommt mehr zum Vorschein.

   Kein sticky, kein z-index: Hero und Claim überlappen nie. */
.hs78-hero-scope {
	/* Starthöhe = Viewport minus Platz für den Claim. So ist beim Laden
	   genau der Claim sichtbar (und nicht schon der Intro-Text), egal
	   wie hoch das Fenster ist. --hero-reserve wird per JS auf die
	   tatsächliche Claim-Höhe gesetzt. */
	--hero-reserve: 300px;
	--hero-start: calc(100vh - var(--hero-reserve));
	--hero-end: 100vh;    /* Höhe nach dem ersten Scrollen */
	--hero-min: 380px;    /* Mindesthöhe für flache Fenster */
}
.hs78-hero {
	position: relative;
	width: 100%;
	height: max(var(--hero-start), var(--hero-min));
	overflow: hidden;
	background: var(--hs-bg-grey);
	transition: height 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hs78-hero.is-grown {
	height: max(var(--hero-end), var(--hero-min));
}
/* Bild-Container: immer volle Zielhöhe, oben verankert. */
.hs78-hero__viewport {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: max(var(--hero-end), var(--hero-min));
}
@media (prefers-reduced-motion: reduce) {
	.hs78-hero { transition: none; }
}
.hs78-hero__track { position: absolute; inset: 0; }

/* Sehr flache Fenster (z. B. 1440x600): Hero und Claim kompakter,
   damit der Claim im ersten Viewport bleibt. */
@media (max-height: 700px) and (min-width: 769px) {
	.hs78-hero-scope { --hero-min: 300px; --hero-start: 50vh; }
	.hs78-claim { padding-top: 48px; padding-bottom: 24px; }
	.hs78-claim__title { font-size: 52px; }
	.hs78-claim__sub { font-size: 21px; }
}

.hs78-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.7s ease;
}
.hs78-hero__slide.is-active { opacity: 1; }
.hs78-hero__slide img { width: 100%; height: 100%; object-fit: cover; }

.hs78-hero__placeholder {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	color: var(--hs-muted);
	font-size: 14px; font-weight: 500; letter-spacing: 0.06em;
	text-align: center; padding: 0 24px;
}

.hs78-hero__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 52px; height: 52px;
	border: none; border-radius: 50%;
	background: rgba(255,255,255,0.9);
	color: var(--hs-black);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: background 0.2s ease;
}
.hs78-hero__arrow:hover { background: #fff; }
.hs78-hero__arrow--prev { left: 32px; }
.hs78-hero__arrow--next { right: 32px; }

.hs78-hero__dots {
	position: absolute;
	left: 50%; bottom: 32px;
	transform: translateX(-50%);
	display: flex; gap: 10px;
}
.hs78-hero__dot {
	width: 8px; height: 8px;
	border: none; border-radius: 50%;
	background: rgba(255,255,255,0.5);
	cursor: pointer; padding: 0;
	transition: background 0.2s ease;
}
.hs78-hero__dot.is-active { background: #fff; }

/* ---------- Intro (Fließtext unter Claim) ---------- */
.hs78-intro {
	padding-top: 0;
	padding-bottom: 120px;
}
.hs78-intro__inner {
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
	display: flex; flex-direction: column; align-items: center; gap: 28px;
}
.hs78-intro__title {
	font-size: 34px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--hs-black);
}
.hs78-intro__text {
	font-size: 18px;
	font-weight: 300;
	line-height: 1.72;
	color: #525252;
}
.hs78-intro__text p + p { margin-top: 1.2em; }

/* ---------- Keyfacts ---------- */
.hs78-keyfacts {
	padding-top: 20px;
	padding-bottom: 140px;
}
.hs78-keyfacts__title {
	font-size: 40px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.08;
	color: var(--hs-black);
	margin-bottom: 64px;
}
.hs78-cat { padding-top: 28px; border-top: 1px solid var(--hs-line); }
.hs78-cat + .hs78-cat { margin-top: 36px; }
.hs78-cat__label {
	display: flex; align-items: center; gap: 14px;
	margin-bottom: 28px;
}
.hs78-cat__num {
	font-size: 14px; font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--hs-muted);
}
.hs78-cat__name {
	font-size: 15px; font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--hs-black);
	text-transform: uppercase;
}
.hs78-cat__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
}
.hs78-fact {
	background: var(--hs-box);
	border-radius: 6px;
	padding: 24px 22px;
	display: flex; flex-direction: column; gap: 8px;
	transition: background 0.35s ease, transform 0.35s ease;
}
.hs78-fact:hover {
	background: #f2f2ee;
	transform: translateY(-2px);
}
.hs78-fact__title {
	font-size: 15px; font-weight: 600;
	letter-spacing: -0.005em;
	line-height: 1.24;
	color: var(--hs-black);
}
.hs78-fact__detail {
	font-size: 13px; font-weight: 400;
	line-height: 1.38;
	color: var(--hs-grey);
}

/* ---------- Lightbox ---------- */
/* Bilder öffnen im Overlay statt auf einer eigenen Seite –
   der Nutzer bleibt auf dem Onepager. */
body.hs78-lb-open { overflow: hidden; }

.hs78-lb {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(10, 10, 10, 0.96);
	opacity: 0;
	transition: opacity 0.25s ease;
}
.hs78-lb.is-open { display: flex; opacity: 1; }

.hs78-lb__stage {
	margin: 0;
	max-width: 92vw;
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.hs78-lb__img {
	max-width: 92vw;
	max-height: 80vh;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	transition: opacity 0.2s ease;
}
.hs78-lb.is-loading .hs78-lb__img { opacity: 0.35; }

.hs78-lb__cap {
	color: rgba(255, 255, 255, 0.62);
	font-size: 13px;
	letter-spacing: 0.02em;
	text-align: center;
}

.hs78-lb__close,
.hs78-lb__nav {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	cursor: pointer;
	color: #fff;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(6px);
	border-radius: 50%;
	transition: background 0.2s ease;
}
.hs78-lb__close:hover,
.hs78-lb__nav:hover { background: rgba(255, 255, 255, 0.22); }

.hs78-lb__close {
	top: 24px; right: 24px;
	width: 46px; height: 46px;
}
.hs78-lb__nav {
	top: 50%;
	transform: translateY(-50%);
	width: 54px; height: 54px;
}
.hs78-lb__nav--prev { left: 24px; }
.hs78-lb__nav--next { right: 24px; }
.hs78-lb__nav[hidden] { display: none; }

.hs78-lb__count {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.55);
	font-size: 13px;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
	.hs78-lb__close { top: 14px; right: 14px; width: 40px; height: 40px; }
	.hs78-lb__nav { width: 44px; height: 44px; }
	.hs78-lb__nav--prev { left: 8px; }
	.hs78-lb__nav--next { right: 8px; }
	.hs78-lb__img { max-height: 74vh; }
	.hs78-lb__count { bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.hs78-lb, .hs78-lb__img { transition: none; }
}

/* ---------- Video ---------- */
.hs78-video {
	position: relative;
	width: 100%;
	height: 760px;
	max-height: 86vh;
	background: #191919;
	overflow: hidden;
}
.hs78-video__media { width: 100%; height: 100%; object-fit: cover; background: #191919; }
.hs78-video__embed { position: absolute; inset: 0; }
.hs78-video__embed iframe { width: 100%; height: 100%; border: 0; }

/* Facade für YouTube/Vimeo – iframe lädt erst nach Klick */
.hs78-video__facade {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	background-size: cover; background-position: center;
	cursor: pointer;
}
.hs78-video__facade::after {
	content: '';
	position: absolute; inset: 0;
	background: rgba(0,0,0,0.25);
	transition: background 0.3s ease;
}
.hs78-video__facade:hover::after { background: rgba(0,0,0,0.15); }
.hs78-video__facade .hs78-video__play { position: relative; z-index: 1; }

.hs78-video__placeholder {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 22px;
	background-size: cover; background-position: center;
}
.hs78-video__play {
	width: 96px; height: 96px; border-radius: 50%;
	border: none;
	background: rgba(255,255,255,0.95);
	color: var(--hs-black);
	display: flex; align-items: center; justify-content: center;
	padding-left: 6px;
	cursor: pointer;
	transition: transform 0.25s ease, background 0.25s ease, opacity 0.25s ease;
}
.hs78-video__facade:hover .hs78-video__play,
.hs78-video__play--overlay:hover { transform: scale(1.06); background: #fff; }

/* Play-Overlay über dem MP4-Video */
.hs78-video__play--overlay {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}
.hs78-video__play--overlay:hover { transform: translate(-50%, -50%) scale(1.06); }
.hs78-video__play--overlay.is-hidden { opacity: 0; pointer-events: none; }

.hs78-video__label {
	color: rgba(255,255,255,0.6);
	font-size: 13px; font-weight: 500; letter-spacing: 0.08em;
	text-align: center; padding: 0 24px;
}

/* ---------- Galerie ---------- */
.hs78-gallery-section {
	padding-top: 130px;
	padding-bottom: 130px;
}
.hs78-gallery__head { text-align: center; margin-bottom: 48px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hs78-gallery__title {
	font-size: 34px; font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--hs-black);
}
.hs78-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.hs78-gallery__item {
	display: block;
	aspect-ratio: 3 / 2;
	background: var(--hs-bg-grey);
	border-radius: 3px;
	overflow: hidden;
}
.hs78-gallery__item img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 0.5s ease;
}
.hs78-gallery__item:hover img { transform: scale(1.04); }

.hs78-gallery__more { margin-top: 48px; text-align: center; }
.hs78-gallery__more[hidden] { display: none; }
.hs78-gallery__count {
	margin-top: 16px;
	font-size: 13px; letter-spacing: 0.02em;
	color: var(--hs-muted);
}
.hs78-gallery__empty { text-align: center; color: var(--hs-muted); }

/* ==========================================================================
   Reveal-Effekte (Fade-In beim Scrollen)
   ========================================================================== */

/* Basis: Elemente starten leicht versetzt und transparent.
   .is-visible wird per IntersectionObserver gesetzt. */
[data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: opacity, transform;
}
[data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

/* Staffelung – Verzögerung je Position */
[data-reveal][style*="--i"] {
	transition-delay: calc(var(--i) * 90ms);
}

/* Sanfter für große Flächen */
[data-reveal="soft"] {
	transform: translateY(14px);
	transition-duration: 0.9s;
}

/* Galerie-Items: dezenter Scale-In */
.hs78-gallery__item[data-reveal] {
	transform: translateY(18px) scale(0.985);
}
.hs78-gallery__item[data-reveal].is-visible {
	transform: none;
}

/* Kein Effekt, wenn der Nutzer reduzierte Bewegung wünscht */
@media (prefers-reduced-motion: reduce) {
	[data-reveal],
	[data-reveal][style*="--i"] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ---------- Buttons ---------- */
.hs78-btn {
	display: inline-flex; align-items: center; gap: 12px;
	font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
	padding: 16px 34px;
	border-radius: 2px;
	cursor: pointer;
	background: none;
	transition: background 0.2s ease, color 0.2s ease;
}
.hs78-btn--outline {
	border: 1.3px solid var(--hs-black);
	color: var(--hs-black);
}
.hs78-btn--outline:hover { background: var(--hs-black); color: #fff; }
.hs78-btn--solid {
	border: 1.3px solid #fff;
	background: #fff;
	color: var(--hs-black);
}
.hs78-btn--solid:hover { background: transparent; color: #fff; }
.hs78-btn[disabled] { opacity: 0.5; cursor: default; }
.hs78-btn.is-loading { opacity: 0.6; pointer-events: none; }

/* ---------- Kontaktformular ---------- */
.hs78-form {
	width: 100%;
	max-width: 720px;
	margin: 24px auto 0;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.hs78-form__title {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: #8f8f8f;
	text-align: center;
	margin-bottom: 6px;
}
.hs78-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}
.hs78-form__field { display: flex; flex-direction: column; gap: 8px; }
.hs78-form__field label {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #9a9a9a;
}
.hs78-form__field input,
.hs78-form__field textarea {
	font-family: var(--hs-font);
	font-size: 15px;
	color: #fff;
	background: transparent;
	border: 1px solid #3a3a3a;
	border-radius: 2px;
	padding: 13px 14px;
	transition: border-color 0.2s ease;
	width: 100%;
}
.hs78-form__field textarea { resize: vertical; min-height: 120px; }
.hs78-form__field input:focus,
.hs78-form__field textarea:focus {
	outline: none;
	border-color: #fff;
}
.hs78-form__field input::placeholder,
.hs78-form__field textarea::placeholder { color: #6a6a6a; }
.hs78-form__field.has-error input,
.hs78-form__field.has-error textarea { border-color: #d4674f; }
.hs78-form__error {
	font-size: 12px;
	color: #d4674f;
	min-height: 0;
}
.hs78-form__error:empty { display: none; }

/* Honeypot verstecken */
.hs78-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}

.hs78-form__actions { display: flex; justify-content: center; margin-top: 6px; }
.hs78-form__note {
	text-align: center;
	font-size: 14px;
	margin-top: 4px;
}
.hs78-form__note:empty { display: none; }
.hs78-form__note.is-success { color: #7fc99a; }
.hs78-form__note.is-error { color: #d4674f; }

/* ---------- Kontakt / Footer ---------- */
.hs78-contact {
	background: var(--hs-black);
	color: #fff;
	padding: 110px var(--hs-gutter);
}
.hs78-contact__inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.hs78-contact__title {
	font-size: 40px; font-weight: 600;
	letter-spacing: 0.01em;
}
.hs78-contact__text {
	font-size: 18px; font-weight: 300; line-height: 1.6;
	color: #bfbfbf;
	max-width: 640px;
}
.hs78-contact__card { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-top: 48px; margin-top: 24px; border-top: 1px solid #2b2b2b; width: 100%; max-width: 720px; }
.hs78-contact__rule { width: 40px; height: 1px; background: #4d4d4d; }
.hs78-contact__company { font-size: 22px; font-weight: 600; letter-spacing: 0.01em; }
.hs78-contact__address {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.55);
}
.hs78-contact__lines { font-size: 15px; letter-spacing: 0.01em; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; }
.hs78-contact__lines a {
	position: relative;
	transition: color 0.2s ease;
}
.hs78-contact__lines a::after {
	content: '';
	position: absolute;
	left: 0; bottom: -3px;
	width: 100%; height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hs78-contact__lines a:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}
.hs78-contact__sep { color: #4d4d4d; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1240px) {
	:root { --hs-gutter: 64px; }
}

@media (max-width: 1024px) {
	.hs78-cat__grid { grid-template-columns: repeat(3, 1fr); }
	.hs78-claim__title { font-size: 60px; }
	.hs78-hero-scope { --hero-start: 60vh; }
	.hs78-video { height: 600px; }
}

@media (max-width: 768px) {
	:root { --hs-gutter: 28px; }

	.hs78-claim { padding-top: 80px; padding-bottom: 64px; }
	.hs78-claim__title { font-size: 44px; }
	.hs78-claim__sub { font-size: 20px; }

	/* Grow-Effekt auf Mobil deaktiviert.
	   Hero folgt dem Bildformat 4:3 statt einer festen Höhe – so bleibt
	   das Gebäude als Ganzes erkennbar (Querformat-Bilder in einem
	   hochkant-Viewport würden sonst zu stark seitlich beschnitten). */
	.hs78-hero-scope { --hero-min: 0px; }
	.hs78-hero {
		position: relative;
		height: auto;
		aspect-ratio: 4 / 3;
	}
	.hs78-hero__viewport { position: absolute; inset: 0; height: 100%; }
	/* Ausschnitt leicht nach oben: Gebäude statt Vorplatz. */
	.hs78-hero__slide img { object-position: center 45%; }
	.hs78-hero__arrow { width: 44px; height: 44px; }
	.hs78-hero__arrow--prev { left: 16px; }
	.hs78-hero__arrow--next { right: 16px; }

	.hs78-intro { padding-top: 0; padding-bottom: 72px; }
	.hs78-intro__title { font-size: 26px; }
	.hs78-intro__text { font-size: 16px; }

	.hs78-keyfacts { padding-bottom: 88px; }
	.hs78-keyfacts__title { font-size: 30px; margin-bottom: 44px; }
	.hs78-cat__grid { grid-template-columns: repeat(2, 1fr); }

	.hs78-video { height: 440px; }
	.hs78-video__play { width: 72px; height: 72px; }

	.hs78-gallery-section { padding-top: 80px; padding-bottom: 80px; }
	.hs78-gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.hs78-gallery__title { font-size: 26px; }

	.hs78-contact { padding-top: 72px; padding-bottom: 72px; }
	.hs78-contact__title { font-size: 30px; }
	.hs78-contact__text { font-size: 16px; }
	.hs78-form__row { grid-template-columns: 1fr; gap: 18px; }
	.hs78-form { gap: 16px; }
}

@media (max-width: 480px) {
	.hs78-claim__title { font-size: 36px; }
	.hs78-cat__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
	.hs78-fact { padding: 18px 16px; }
	.hs78-gallery { grid-template-columns: 1fr 1fr; }
}