/* =========================================================================
   Eckhard Brock — brockart.css  (Variante B: CINEMATIC)

   Ein Werk im Vollbild, schwarze Bühne, minimale Chrome.
   - Hero füllt fast das ganze Fenster (object-fit: contain)
   - Reduzierte Navigation: Pfeile an den Rändern + Zähler unten
   - Sektionen über Menü-Overlay (≡), alle Werke über Übersicht-Overlay (▦)
   - Info (Bio/Termine/Kontakt/Artikel) als zentrierte Overlays
   - Schrift: Verdana (Kapitälchen), fluid via vmin/vh/vw
   ========================================================================= */

:root {
	--fg:   #a0a0a0;
	--gold: gold;
	--hi:   #e8e4da;   /* dezenter, warm-weißer Hover-Akzent statt Gold */
	--bg:   #0f0e0d;   /* warmes Fast-Schwarz */
	--fade: 0.35s;
	--font: Verdana, Geneva, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -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;
}

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

.ic {
	width: 1em; height: 1em; display: block;
	fill: none; stroke: currentColor; stroke-width: 1.5;
	stroke-linecap: round; stroke-linejoin: round;
}

/* ---- Kopfzeile (Name + Werkzeuge) ------------------------------------- */

#topbar { position: static; }   /* nur Wrapper, erzeugt KEINEN Stacking-Context */
#owner-name {
	position: absolute; top: 0; left: 4vw; height: 8vh;
	display: flex; align-items: center;
	letter-spacing: .06em; color: var(--fg); font-size: 2.6vmin;
	z-index: 60;                 /* immer oben links, auch über Overlays (z 50) */
	pointer-events: auto; cursor: pointer; transition: color .2s ease;   /* klickbar: öffnet die Biographie */
}
#owner-name:hover, #owner-name:focus-visible { color: var(--hi); }
#tools {
	position: absolute; top: 0; right: 4vw; height: 8vh;
	display: flex; align-items: center; gap: 2.4vmin; z-index: 30;
}
.tool-btn {
	cursor: pointer; color: var(--fg); font-size: 3.2vmin; display: flex;
	transition: color .2s ease; outline: none; -webkit-user-select: none; user-select: none;
}
.tool-btn:hover, .tool-btn:focus-visible { color: var(--hi); }

/* ---- Hero (Vollbild-Werk) --------------------------------------------- */

.image-area {
	position: absolute; top: 8vh; bottom: 8vh; left: 4vw; right: 4vw;
	display: flex; align-items: center; justify-content: center;
	z-index: 1;                       /* über dem Ambient-Schein, unter der Vignette */
}
/* Wrapper exakt in Bildgröße (zentriert/skaliert via .image-area), Glow sitzt hierauf */
.hero-frame {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	max-width: 100%; max-height: 100%; min-width: 0; min-height: 0;
}
/* Screenshot-SICHERER Glow: reiner radialer Farbverlauf hinter dem Bild — KEIN filter/box-shadow,
   also keine eigene GPU-Compositing-Ebene, die Screenshots schwärzt. Farbe je Werk per --glow (JS). */
/* Rechteckiger Glow: box-shadow direkt am Bild (folgt der rechteckigen Bildform), per JS in Werkfarbe gesetzt. */
.image-area img {
	display: block;
	max-width: 92vw; max-height: 84vh; width: auto; height: auto;   /* an Stage-Maße gebunden, umgeht Flex-%-Zirkularität */
	min-width: 0; min-height: 0;
	opacity: 1; transition: opacity .25s linear;
}

/* weiche Vignette über der Bühne, lenkt den Blick zentriert aufs Werk */
#bgArea::after {
	content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background: radial-gradient(ellipse 82% 82% at 50% 46%, transparent 55%, rgba(0,0,0,.5) 100%);
}

/* ---- Blättern (Randzonen) --------------------------------------------- */

.nav-edge {
	position: absolute; top: 8vh; bottom: 8vh; width: 11vw;
	display: flex; align-items: center; color: var(--fg); opacity: .28;
	font-size: 5vmin; cursor: pointer; z-index: 20;
	transition: opacity .2s ease, color .2s ease; outline: none;
	-webkit-user-select: none; user-select: none;
}
.nav-edge:hover, .nav-edge:focus-visible { opacity: 1; color: var(--hi); }
#nav-prev { left: 0;  justify-content: flex-start; padding-left: 1.5vw; }
#nav-next { right: 0; justify-content: flex-end;   padding-right: 1.5vw; }

/* ---- Fußzeile (Kategorie + Zähler) ------------------------------------ */

#botbar {
	position: absolute; bottom: 0; left: 4vw; right: 4vw; height: 8vh;
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; z-index: 30;
}
#caption { letter-spacing: .05em; color: var(--fg); font-size: 2.1vmin; }
#counter { display: none; }   /* Zähler (z. B. „1 / 34") ausgeblendet */

/* ---- Overlays (Menü / Übersicht / Info) ------------------------------- */

.overlay {
	position: absolute; inset: 0; background: rgba(0,0,0,.94); z-index: 50;
	display: flex; align-items: center; justify-content: center;
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity var(--fade) linear, visibility 0s linear var(--fade);
}
.overlay.is-open {
	opacity: 1; visibility: visible; pointer-events: auto;
	transition: opacity var(--fade) linear;
}
.overlay-close {
	position: absolute; top: 2.2vh; right: 4vw; cursor: pointer; color: var(--fg);
	font-size: 3.4vmin; display: flex; transition: color .2s ease; outline: none; z-index: 2;
}
.overlay-close:hover, .overlay-close:focus-visible { color: var(--hi); }
.overlay-inner {
	max-width: 82vw; max-height: 84vh;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
}

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

#menu-content { display: flex; flex-direction: column; align-items: center; }
#menu-content p { padding: 1.4vh 0; line-height: 1; }
#menu-content span {
	cursor: pointer; font-size: 3.6vmin; color: var(--fg);
	transition: color .2s ease, font-size .15s ease; outline: none;
}
#menu-content span:hover, #menu-content span:focus-visible { color: var(--hi); font-size: 4vmin; }
#flag-btn-area {
	position: absolute; right: 4vw; bottom: 2.6vh; z-index: 60;
	display: flex; gap: 1.8vmin; cursor: pointer;
}
.flag-btn { width: 4.5vh; height: 3vh; border: 0; transition: transform .15s ease; }
.flag-btn:hover { transform: scale(1.12); }

/* Menü als Dropdown rechts unter dem Hamburger-Icon */
#menu-overlay { background: rgba(0,0,0,.4); align-items: flex-start; justify-content: flex-end; }
#menu-overlay .overlay-close { display: none; }
#menu-overlay .overlay-inner {
	margin: 8.5vh 4vw 0 0; max-width: 60vw; max-height: 80vh;
	align-items: flex-end; background: rgba(0,0,0,.9);
	padding: 2.2vh 2.6vw; border: 1px solid rgba(255,255,255,.08);
}
#menu-overlay #menu-content { align-items: flex-end; }
#menu-overlay #menu-content p { padding: 1vh 0; }
#menu-overlay #menu-content span { font-size: 2.8vmin; }
#menu-overlay #menu-content span:hover,
#menu-overlay #menu-content span:focus-visible { font-size: 3.1vmin; }

/* ---- Übersicht (Contact Sheet) ---------------------------------------- */

.sheet-scroll {
	position: absolute; inset: 10vh 4vw; overflow: hidden;
	touch-action: none; cursor: grab;
}
.sheet-scroll.is-dragging { cursor: grabbing; }
.sheet-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(20vh, 1fr));
	gap: 1.6vh; align-content: start;
}
.sheet-thumb {
	width: 100%; aspect-ratio: 4 / 3; object-fit: cover; cursor: pointer;
	opacity: .82; display: block; border: 2px solid transparent;
	transition: opacity .2s ease, border-color .2s ease;
	-webkit-user-drag: none; user-select: none;
}
.sheet-thumb:hover { opacity: 1; }
.sheet-thumb.is-current { opacity: 1; border-color: var(--gold); }

/* ---- Info-Inhalte ----------------------------------------------------- */

.content-data { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.content-data p  { margin: 2vmin; line-height: 2.6vmin; font-variant: small-caps; font-size: 2.3vmin; color: var(--fg); }
.content-data h2 { margin: 2vmin; line-height: 3.8vmin; font-variant: small-caps; font-size: 3.4vmin; font-weight: 400; color: var(--fg); }
.content-data h1 { margin: 2vmin; line-height: 4.8vmin; font-variant: small-caps; font-size: 4.4vmin; font-weight: 400; color: var(--gold); }
.content-columns { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 2.5vw; flex-wrap: wrap; }

.bio-data { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 2.5vw; flex-wrap: wrap; }
.bio-text p { margin: 1.6vmin; line-height: 2.8vmin; font-variant: small-caps; font-size: 2.3vmin; color: var(--fg); }
.bio-portrait { max-width: 28vw; max-height: 58vh; }

.event-img { width: 38vh; height: 28vh; object-fit: contain; }

/* Termine-Flyer: einzelnes Bild, füllt das Overlay */
.flyer-img { max-width: 60vw; max-height: 70vh; object-fit: contain; }

/* Kontakt-Karte: gromers-Foto als Hintergrund, Kontaktdaten auf der Wandfläche rechts */
.contact-card { position: relative; }

.contact-bg { display: block; max-width: 55vw; max-height: 58vh; }

.contact-info {
	position: absolute;
	left: 40%;
	right: 4%;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
}

.contact-info h2 { margin: 1.1vmin; font-variant: small-caps; font-size: 1.7vmin; font-weight: 400; color: #3c3c3c; }
.contact-info h1 { margin: 1.1vmin; font-variant: small-caps; font-size: 2.5vmin; font-weight: 400; color: #2b2b2b; }
.contact-info p  { margin: 1.1vmin; line-height: 2.1vmin; font-variant: small-caps; font-size: 1.6vmin; color: #3c3c3c; }
.contact-info a:hover { text-decoration: underline; }

.article-inner { width: min(72vw, 900px); max-width: 72vw; }
.article-content {
	height: 78vh; overflow: hidden; touch-action: none; cursor: grab;
	font-variant: normal; color: var(--fg); line-height: 1.5; text-align: left;
}
.article-content.is-dragging { cursor: grabbing; }
.article-content img { max-width: 40%; height: auto; }

a { text-decoration: none; color: inherit; }

@media (pointer: coarse) {
	.nav-edge { opacity: .5; }
	#menu-content span { font-size: 4.4vmin; }
	.content-data p, .bio-text p { font-size: 2.8vmin; }
}