/* ==========================================================================
   revoluzzer.info – Neuaufbau (statisch, responsiv)
   Desktop: ein zentrierter Block, der proportional auf den Bildschirm
   skaliert (wie das Original). Mobil: lesbar gestapelt.
   ========================================================================== */

/* ---- Webfont (lokal eingebunden, DSGVO-konform – Impact-Alternative) ---- */
@font-face {
	font-family: 'Anton';
	src: url('../assets/anton.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--bg: #000;
	--text: #fff;
	--stroke: #000;
	--accent: #cccccc;          /* dezentes Hellgrau für Hover */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--bg); }

body {
	background: var(--bg);
	color: var(--text);
	font-family: 'Anton', Impact, 'Arial Narrow', 'Arial Black', sans-serif;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;            /* Block vertikal zentriert */
	align-items: center;                /* Block horizontal zentriert */
	padding: clamp(8px, 3vh, 46px) clamp(8px, 2vw, 28px);
	overflow-x: hidden;
}

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

/* ---- Impact-Schrift: weiße Füllung, schwarze Kontur ---- */
.impact {
	font-family: 'Anton', Impact, 'Arial Narrow', 'Arial Black', sans-serif;
	color: var(--text);
	-webkit-text-stroke: 1.6px var(--stroke);
	paint-order: stroke fill;
	text-transform: lowercase;
	letter-spacing: .01em;
	line-height: 1.04;
}

/* ==========================================================================
   DER ZENTRIERTE BLOCK
   Breite wird durch Bildschirmhöhe begrenzt -> alles passt auf den Schirm.
   Container-Query: alle Kindgrößen (cqw) skalieren mit der Blockbreite.
   ========================================================================== */
.frame {
	container-type: inline-size;
	/* Original-Skalierung: durch Bildschirmhöhe begrenzt, sonst Breite */
	width: min(2400px, 90vw, 137vh);
	margin: 0 auto;
}

/* ==========================  KOPF  ============================ */
.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2cqw;
	padding-bottom: 1.2cqw;
}
.logo img { width: 32cqw; height: auto; }

/* Bild-Umschalter oben rechts:  < 02 / 25 > */
.switcher { display: flex; align-items: center; gap: .8cqw; white-space: nowrap; }
.switcher .counter {
	font-family: 'Anton', Impact, sans-serif;
	color: #fff; paint-order: stroke fill;
	line-height: 1;
	-webkit-text-stroke: .24cqw #000;
	font-size: 5.9cqw;
	letter-spacing: 0;
	word-spacing: -.06em;         /* Zahl und "/" etwas enger (aber sichtbar) */
}
/* Pfeile als dicke, blockige < > (vorne stumpf/flach) – wie Original */
.arrow {
	font-family: 'Arial Black', 'Arial Bold', Arial, sans-serif;
	font-weight: 900;
	color: #fff; -webkit-text-stroke: .22cqw #000; paint-order: stroke fill;
	font-size: 6.8cqw;
	line-height: 1;
	background: none; border: none; cursor: pointer; padding: 0;
}
.arrow:hover { color: var(--accent); }   /* hellgrau */

/* ==========================  INHALT  ========================== */
.content { position: relative; }

/* Bühne (Slideshow oder Galerie) */
.stage {
	position: relative;
	width: 100%;
	aspect-ratio: 1400 / 600;      /* exaktes Bild-Seitenverhältnis */
	background: #000;
	overflow: hidden;
}

/* Slideshow-Bilder (überblenden) */
.stage .slide {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 2.5s ease-in-out;   /* weicher Crossfade wie Original */
	pointer-events: none;
}
.stage .slide.is-active { opacity: 1; }

/* Galerie-Viewer */
.viewer { position: absolute; inset: 0; }
.viewer img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0; transition: opacity .5s ease;
}
.viewer img.is-active { opacity: 1; }

/* YouTube-Video (Bereich animation): füllt die Bühne wie die Bilder.
   Das 16:9-Video wird darin mittig gezeigt (schmale Ränder = schwarz,
   gehen im schwarzen Hintergrund auf). */
.stage .video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	border: 0; display: block;
}

/* ---- Navigation: oben links über dem Bild ---- */
.mainnav { position: absolute; top: 0; left: 0; z-index: 5; }
.mainnav ul { list-style: none; padding: 1.6cqw; }
.mainnav li { margin: .2cqw 0; }
.mainnav a {
	display: inline-block;
	font-size: 2.55cqw;
	color: #fff;
	transition: opacity .15s ease;
}
/* Aktiver Punkt = weiß (voll sichtbar); auf Kategorieseiten treten die
   übrigen Punkte transparent in den Hintergrund (wie im Original). */
.mainnav.has-current a:not(.is-current) { opacity: .4; }
.mainnav.has-current a:not(.is-current):hover { opacity: 1; }
.mainnav a.is-current { opacity: 1; }

.nav-toggle { display: none; }

/* ==========================  FUSZ  ============================ */
.site-footer {
	margin-top: 1cqw;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 2cqw;
}
.contact, .service { display: flex; flex-direction: column; gap: .2cqw; }
.service { text-align: right; align-items: flex-end; }
.site-footer a, .site-footer button {
	font-family: inherit;
	font-size: 2.45cqw;
	color: #fff; -webkit-text-stroke: .14cqw #000; paint-order: stroke fill;
	text-transform: lowercase;
	background: none; border: none; cursor: pointer; padding: 0;
	line-height: 1.15;
}
.site-footer a:hover, .site-footer button:hover { color: var(--accent); }

/* ---- Overlays (Impressum / Datenschutz) ---- */
.overlay {
	position: fixed; inset: 0; z-index: 50;
	display: none;
	align-items: center; justify-content: center;
	background: rgba(0,0,0,.6);
	padding: clamp(12px, 3vw, 30px);
}
.overlay.is-open { display: flex; }
.overlay__box {
	background: rgba(255,255,255,.85);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: #000;
	max-width: 720px; width: 100%;
	max-height: 86vh; overflow: auto;
	padding: clamp(18px, 4vw, 40px);
	border-radius: 8px;
	font-family: Arial, Helvetica, sans-serif;
	-webkit-text-stroke: 0;
	font-size: clamp(13px, 1.5vw, 15px);
	line-height: 1.6;
	text-transform: none;
}
.overlay__box h2 {
	font-family: 'Anton', Impact, sans-serif;
	text-transform: lowercase; font-weight: 400;
	margin-bottom: .5em; font-size: 1.8em;
}
.overlay__box h3 { font-size: 1.05em; margin: 1.3em 0 .3em; }
.overlay__box p { margin: 0 0 .6em; }
.overlay__box a { color: #b00; text-decoration: underline; word-break: break-word; }
.overlay__box .copyright { margin-top: 1.4em; font-size: .92em; color: #444; }
.overlay__close {
	position: absolute; top: 18px; right: 22px;
	font-family: 'Anton', Impact, sans-serif; font-size: 32px; line-height: 1;
	color: #fff; -webkit-text-stroke: 1.4px #000; paint-order: stroke fill;
	background: none; border: none; cursor: pointer; z-index: 1;
}

/* ---- Video: "Klick zum Laden" (DSGVO) ---- */
/* Vorschaubild füllt die Bühne; der laufende Player rückt nach rechts,
   damit er nicht unter der Navigationsschrift hängt. */
.stage .video iframe {
	position: absolute; top: 0; bottom: 0; right: 1.5cqw; left: auto;
	height: 100%; width: auto; aspect-ratio: 16 / 9;
	max-width: 100%; border: 0; display: block;
}
.video-consent {
	position: absolute; inset: 0; width: 100%; height: 100%;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 14px; padding: 18px; text-align: center;
	color: #fff; border: 0; cursor: pointer;
	font-family: 'Anton', Impact, sans-serif;
	background-color: #101010;
	background-size: cover; background-position: center;
	overflow: hidden;
}
/* Vorschaubild leicht abdunkeln, damit Play-Button + Text lesbar sind */
.video-consent::before {
	content: ''; position: absolute; inset: 0;
	background: rgba(0,0,0,.45); transition: background .15s ease;
}
.video-consent:hover::before { background: rgba(0,0,0,.3); }
.video-consent__play, .video-consent__text { position: relative; z-index: 1; }
.video-consent__play {
	width: clamp(52px, 13%, 92px); aspect-ratio: 1; border-radius: 50%;
	background: #cc0000; color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: clamp(24px, 6vw, 44px); line-height: 1; padding-left: .12em;
	flex: 0 0 auto;
}
.video-consent__text { font-size: clamp(17px, 2.6vw, 30px); text-transform: lowercase; }
.video-consent__text small {
	display: block; margin: 8px auto 0; max-width: 46ch;
	font-family: Arial, Helvetica, sans-serif; font-weight: normal;
	font-size: clamp(11px, 1.5vw, 14px); line-height: 1.4;
	text-transform: none; opacity: .85;
}

/* ==========================================================================
   MOBILE (< 760px): lesbar gestapelt, alle Bereiche dauerhaft sichtbar,
   nicht mehr auf eine Bildschirmhöhe gequetscht.
   ========================================================================== */
@media (max-width: 760px) {
	body {
		justify-content: flex-start;
		align-items: stretch;
		padding: clamp(8px, 2vh, 16px) 0;
	}
	.frame { width: 100%; padding: 0 clamp(14px, 4vw, 22px); container-type: normal; }

	.site-header { gap: 10px; margin-bottom: 6px; padding-bottom: 0; }
	.logo img { width: clamp(130px, 40vw, 220px); }

	.switcher { gap: 6px; }
	.switcher .counter {
		font-size: clamp(18px, 5.5vw, 30px);
		-webkit-text-stroke: 1.4px #000;
		word-spacing: -.06em;
	}
	.arrow {
		font-size: clamp(26px, 7.5vw, 40px);
		-webkit-text-stroke: 1.5px #000;
	}

	/* Navigation im Fluss -> Bild rutscht darunter (übersichtlicher) */
	.mainnav { position: static; display: block; }
	.mainnav ul { padding: 0 0 6px; }

	/* mehr Luft ober- und unterhalb des Bildes (nicht so gedrungen) */
	.content .stage { margin: 20px 0; }

	/* Player mobil in voller Breite (Navigation steht hier darüber, nicht daneben) */
	.stage .video iframe { left: 0; right: 0; width: 100%; height: 100%; aspect-ratio: auto; }

	.mainnav li { margin: .05em 0; }
	.mainnav a { font-size: clamp(18px, 5.4vw, 26px); }

	.site-footer { margin-top: 8px; gap: 10px; }
	.site-footer a, .site-footer button {
		font-size: clamp(15px, 4vw, 22px);
		-webkit-text-stroke: 1.2px #000;
	}
}

@media (max-width: 380px) {
	.mainnav a { font-size: 17px; }
	.site-footer a, .site-footer button { font-size: 14px; }
	.switcher .counter, .arrow { font-size: 20px; }
}

/* Hinweis: Die weiche Bild-Überblendung läuft bewusst auch bei
   "Animationen reduzieren" (wie beim Original), da ein sanfter Crossfade
   unkritisch ist. */