/* =========================================================================
   Eckhard Brock — brockart.css (2026 technical overhaul)
   Look und Layout 1:1 zur Vorversion, aber:
   - keine -webkit/-moz/-o/-ms-Altpräfixe, kein prefixfree nötig
   - Bild-Einpassung über object-fit: contain (kein JS-Sizing mehr)
   - Pane-Sichtbarkeit über .pane / .is-visible (Fade) statt -9999px-Tricks
   - Mobile-Anpassungen über @media (pointer:coarse) statt UA-Sniffing
   - Google-Font via https (kein http-@import)
   ========================================================================= */

:root {
	--fg:    #a0a0a0;
	--gold:  gold;
	--bg:    #000;
	--fade:  0.35s;   /* Pane-Überblendung */
	--font:  Verdana, Geneva, sans-serif;
}

* { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; }

html, body {
	width: 100%;
	height: 100%;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font);
	font-variant: small-caps;
	overflow: hidden;            /* die Seite passt immer ins Fenster, nie Scrollen */
}

/* ---- Bühne -------------------------------------------------------------- */

#bgArea, .bgImage {
	position: fixed;
	inset: 0;
	background-color: var(--bg);
	overflow: hidden;
}

/* ---- Pane-Sichtbarkeit (Menü/Galerie/Info/Footer/Flags) ---------------- */

.pane {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--fade) linear, visibility 0s linear var(--fade);
}

.pane.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity var(--fade) linear;
}

/* ---- Kopf (Künstlername, immer sichtbar) ------------------------------- */

.header-area {
	position: absolute;
	left: 2vw;
	top: 2vh;
	width: auto;
	height: 8vh;
	display: flex;
	align-items: flex-start;
	font-family: var(--font);
	font-variant: small-caps;
	color: var(--fg);
	z-index: 100;
}

#owner          { display: flex; align-items: flex-start; }
#owner-content  { font-family: var(--font); font-variant: small-caps; }

#owner-content h1 {
	margin: 2vh 0;
	font-size: 2.5vw;
	font-weight: 200;
	color: var(--fg);
}

/* ---- Menü --------------------------------------------------------------- */

#menu-area {
	position: absolute;
	left: 2vw;
	top: 10vh;
	width: 20vw;
	height: 80vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

#menu-content { font-family: var(--font); font-variant: small-caps; color: var(--fg); }

#menu-content p {
	padding: 3.5vh 0;
	line-height: 2vh;
	font-size: 2.5vmin;
	font-weight: 100;
	color: var(--fg);
}

#menu-content p span {
	cursor: pointer;
	transition: font-size .15s ease;
	outline: none;
}

#menu-content p:hover span,
#menu-content p span:focus-visible {
	font-size: 3vmin;
}

/* ---- Hero-Bild ---------------------------------------------------------- */

.image-area {
	position: absolute;
	left: 25vw;
	top: 15vh;
	width: 60vw;
	height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.image-area.is-hidden { visibility: hidden; }

.image-area img {
	width: 100%;
	height: 100%;
	object-fit: contain;         /* ersetzt das alte AdjustImgSize() */
	opacity: 1;
	transition: opacity .2s linear;
}

/* ---- Galerie-Panes (Thumbnails) ---------------------------------------- */

.ui-area {
	position: absolute;
	left: 2vw;
	top: 5vh;
	width: 30vw;
	height: 90vh;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

.ui-control {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	overflow: hidden;
}

.thumbs-data {
	position: relative;
	width: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* Der eigentliche Scroll-Viewport für die ballistische Thumbnail-Leiste */
.thumbs-content {
	margin: 1vh;
	height: 78.25vh;
	overflow: hidden;            /* nur programmatisch/per Geste gescrollt */
	touch-action: none;          /* Trägheits-Scroll komplett selbst gesteuert */
	cursor: grab;
	font-family: var(--font);
	font-variant: small-caps;
	color: var(--fg);
}

.thumbs-content.is-dragging { cursor: grabbing; }

.thumb-size {
	margin: 1vh;
	width: 20vh;
	height: 12vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.thumb {
	margin: 1vh;
	width: auto;
	height: 12vh;
	border: 0 solid var(--fg);
	-webkit-user-drag: none;
	user-select: none;
}

/* ---- Info-Panes (Bio / Termine / Kontakt / Artikel) -------------------- */

.info-area {
	position: absolute;
	top: 5vh;
	height: 90vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.bio-area     { left: 15vw; width: 70vw; }
.content-area { left: 20vw; width: 60vw; }
.article-area { left: 22vw; width: 56vw; }

.bio-data {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.bio-text { display: flex; align-items: center; justify-content: center; }

.bio-text p {
	margin: 2vmin;
	line-height: 2.5vmin;
	font-family: var(--font);
	font-variant: small-caps;
	font-size: 2.25vmin;
	font-weight: 100;
	color: var(--fg);
}

.content-data {
	position: relative;
	width: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.content-columns {
	position: relative;
	width: auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.content-data p {
	margin: 2vmin;
	line-height: 2.25vmin;
	font-family: var(--font);
	font-variant: small-caps;
	font-size: 2.25vmin;
	font-weight: 100;
	color: var(--fg);
}

.content-data h2 {
	margin: 2vmin;
	line-height: 3.5vmin;
	font-family: var(--font);
	font-variant: small-caps;
	font-size: 3.5vmin;
	font-weight: 100;
	color: var(--fg);
}

.content-data h1 {
	margin: 2vmin;
	line-height: 4.5vmin;
	font-family: var(--font);
	font-variant: small-caps;
	font-size: 4.5vmin;
	font-weight: 200;
	color: var(--gold);
}

.event-img {
	margin: 1vh;
	width: 40vh;
	height: 30vh;
	object-fit: contain;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* ---- Artikel (eigener Scroll-Viewport, frei, ohne Snap) ---------------- */

.article-data {
	position: relative;
	width: auto;
	height: 90vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	font-family: var(--font);
	font-variant: normal;
	color: var(--fg);
}

.article-content {
	margin: 1vh;
	height: 90vh;
	overflow: hidden;
	touch-action: none;
	cursor: grab;
	font-family: var(--font);
	font-variant: normal;
	color: var(--fg);
}

.article-content.is-dragging { cursor: grabbing; }

/* ---- Fußzeile + Sprach-Flaggen + Schließen-Button --------------------- */

.footer-area {
	position: absolute;
	left: 25vw;
	top: 95vh;
	width: 60vw;
	height: 5vh;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font);
	font-variant: small-caps;
	font-size: 2.25vmin;
	color: var(--gold);
	z-index: 100;
}

.flag-btn-area {
	position: absolute;
	left: 2vw;
	top: 95vh;
	width: 10vw;
	height: 5vh;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	cursor: pointer;
	user-select: none;
	z-index: 100;
}

.flag-btn        { width: 4.5vh; height: 3vh; border: 0; transition: width .15s ease, height .15s ease; }
.flag-btn:hover  { width: 5.1vh; height: 3.4vh; }

.close-btn-area {
	margin: 1vmin;
	width: 4vh;
	height: 4vh;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	cursor: pointer;
	user-select: none;
}

.close-btn { width: 4vh; height: 4vh; border: 0; }

a { text-decoration: none; color: inherit; transition: color .5s ease; }

h1 { margin: 32px 0; font-size: 4vmin; font-weight: 200; }

/* ---- Touch-/Mobil-Anpassungen (ersetzt das alte isMobile/AdjustPanes) -- */

@media (pointer: coarse) {
	.ui-area, .info-area { top: 2.25vh; height: 80vh; }
	#menu-area           { height: 80vh; }
	.thumbs-content      { height: 71vh; }
	#owner-content h1,
	#menu-content p,
	.content-data p      { font-weight: 250; }
	.content-data p      { font-size: 2.5vw; }
}