/* =========================================================
   Base document
   ========================================================= */

html,
body{
	height:100%;
	margin:0;
	padding:0;
	border:0;
	overflow:hidden;
}

body{
	height:100%;
	margin:0;
	padding:0;
	border:0;
	overflow:hidden;

	background-color:#646159;

	color:#fff;
	text-align:left;
	font-family:Montserrat, sans-serif;
	font-weight:400;

	font-size:12px;
	line-height:1.5em;
}

body::before{
	content:"";
	position:fixed;
	inset:0;
	background:url("/img/bg-moss.webp") center bottom / cover no-repeat;
	z-index:-1;
}

@media (min-width:400px){
	body{ font-size:14px; }
}
@media (min-width:600px){
	body{ font-size:16px; }
}

/* =========================================================
   Generic layout / panels
   ========================================================= */

.panelBg{
	position:fixed;
	inset:0;
}

/* kept as in your file (unusual selector chain, but unchanged) */
.panelContent
.panelMenuLanguage,
.panelMenuBook,
.panelMenuContext,
.panelMenuMobile,
.panelMenuVision{
	width:100%;
}

.overlay{
	position:fixed;
	inset:0;
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transition:opacity .1s ease, visibility .1s ease;
}

.panelScroll{
	height:100dvh;
	min-height:100dvh;
	display:flex;
	flex-direction:column;
	overflow-y:scroll;

	scrollbar-color:#444 #eee;
	scrollbar-width:thin;
	overscroll-behavior:contain;
	scrollbar-gutter:stable;
}

/* =========================================================
   Header
   ========================================================= */

.panelTop{
	position:sticky;
	top:0;
	z-index:2;
	width:100%;
}

.panelTopInner{
	max-width:1200px;
	margin:0 auto;
	display:flex;
}

.panelTopLeft{
	width:4em;
	flex:0 0 4em;
	text-align:center;
}

.panelTopCenter{
	flex:1 1 auto;
	text-align:right;
	font-size:0.9em;
}

.panelTopRight{
	width:4em;
	flex:0 0 4em;
	text-align:center;
}

.panelTop a{
	background-color:transparent;
	display:inline-block;
	padding:0.45em 1em 0 1em;
	color:#fff;
}

/* =========================================================
   Vision
   ========================================================= */

.panelVision{
	width:100%;
}

.panelVisionFrame{
}

/* Outer grid default: stacked */
.panelVisionFrameGrid{
	max-width:1200px;
	margin:auto;
	overflow:hidden;

	display:grid;
	grid-template-rows:auto auto auto;
	gap:0;
	
	overflow:hidden;
	border-top:1px solid rgba(255,255,255,0.10);
	border-bottom:1px solid rgba(255,255,255,0.10);
	background:rgba(0,0,0,0.5);
}

/* Left column */
.panelVisionCustom{
	display:none;
}

/* Image column */
.panelVisionImage{
	display:block;
	width:fit-content;
	text-align:center;
	justify-self:center;
}

.panelVisionImage img,
.panelVision img{
	display:block;
	width:auto;
	height:auto;
	max-width:100%;
	max-height:400px;
	margin:auto;
}

/* Action column default (NARROW):
   - under image
   - one line: share left, credits right
   - quote hidden */
.panelVisionAction{
	display:grid;
	grid-template-columns:auto 1fr;
	align-items:center;
	gap:10px;
	margin:2px 0 2px 0;
	padding: 0 16px;
}

/* Hide quote on narrow */
.panelVisionAction > .panelVisionBlock:nth-child(1){
	display:none;
}

/* Share: hide ONLY the label line, keep the icon line */
.panelVisionAction > .panelVisionBlock:nth-child(2) .panelVisionAtom:not(.buttonIcons){
	display:none;
}

/* Share icons compact */
.buttonIcons{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	align-items:center;
}

.buttonIcons a{
	display:inline-block;
	cursor:pointer;
}

.buttonIcons img{
	width:28px;
	height:28px;
	display:block;
	opacity:0.7;
	transition:opacity 0.2s;
}

.buttonIcons a:hover img{
	opacity:1;
}

/* Credits: small, right, one line if possible */
.panelVisionAction > .panelVisionBlock:nth-child(3){
	justify-self:end;
	text-align:right;
	font-size:0.8em;
	line-height:1.2;

	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	max-width:100%;
}

/* Credits lines become inline with separators */
.panelVisionAction > .panelVisionBlock:nth-child(3) .panelVisionAtomLine{
	display:inline;
}
.panelVisionAction > .panelVisionBlock:nth-child(3) .panelVisionAtomLine + .panelVisionAtomLine::before{
	content:" · ";
	opacity:0.7;
}

/* WIDE:
   - outer grid side-by-side and top-aligned
   - action: quote at top, share+credits pushed to bottom */
@media (min-width:761px){

	.panelVisionFrameGrid{
		grid-template-rows:none;
		grid-template-columns:auto fit-content(100%) minmax(219px, auto);
		align-items:start;
		column-gap:0px;
	}

	.panelVisionCustom{
		display:grid;
		gap:12px;
	}


	.panelVisionAction{
		display:flex;
		flex-direction:column;
		align-items:stretch;
		gap:12px;
		height:100%;
		margin-top:0;
	}

	.panelVisionAction > .panelVisionBlock{
		width:100%; 
	}

	/* Quote visible on wide */
	.panelVisionAction > .panelVisionBlock:nth-child(1){
		display:block;
	}

	/* Share goes near bottom; credits stay bottom-most */
	.panelVisionAction > .panelVisionBlock:nth-child(2){
		margin-top:auto;
	}

	/* Share label line visible again on wide */
	.panelVisionAction > .panelVisionBlock:nth-child(2) .panelVisionAtom{
		display:block;
	}

	/* Credits: normal block layout on wide */
	.panelVisionAction > .panelVisionBlock:nth-child(3){
		justify-self:auto;
		text-align:left;
		white-space:normal;
		overflow:visible;
		text-overflow:clip;
		font-size:0.85em;
		margin-bottom:12px;
	}

	.panelVisionAction > .panelVisionBlock:nth-child(3) .panelVisionAtomLine{
		display:block;
	}
	.panelVisionAction > .panelVisionBlock:nth-child(3) .panelVisionAtomLine + .panelVisionAtomLine::before{
		content:"";
	}
}

/* SHOWCASE VARIANT */
@media (min-width:761px){

	.panelVisionFrameGrid.showcase{
		/* custom | image (flex) | action (flex) */
		grid-template-columns: auto minmax(240px, 540px) auto;
		column-gap:32px;
	}

	/* Showcase darf höher als 400px */
	.panelVisionFrameGrid.showcase .panelVisionImage img,
	.panelVisionFrameGrid.showcase .panelVision img{
		max-height:600px;   /* überschreibt 400 */
		width:100%;         /* füllt die Image-Spalte */
		height:auto;
	}
}

/* =========================================================
   Body
   ========================================================= */

.panelContent .panelBody{
	flex: 1 0 auto;
}

.panelBody{
	width:100%;
}

.panelBodyInner{
	max-width:1200px;
	margin:auto;
	margin-top:1em;
	background-color:#000000A0;
}

.panelText{
	padding:16px;
}

/* =========================================================
   Footer
   ========================================================= */

.panelBottom{
	width:100%;
	margin-top: auto;
}

.panelBottomInner{
	margin-top:auto;
	margin-left:auto;
	margin-right:auto;
	max-width:1200px;
	display:flex;
	text-align:center;
}

.panelBottomLeft{
	width:33%;
	padding:1em;
	font-size:0.9em;
	border-right:1px solid #bbb;
	display:none;
}

.panelBottomCenter{
	width:33%;
	padding:0 1em;
	font-size:0.9em;
}

.panelBottomRight{
	width:33%;
	padding:1em;
	font-size:0.9em;
	border-left:1px solid #bbb;
	display:none;
}

.panelBottom a{
	background-color:transparent;
	display:block;
	color:#fff;
}

/* =========================================================
   Links
   ========================================================= */

a{
	text-decoration:none;
	color:#ddd;
}
a:hover{
	text-decoration:underline;
}

/* =========================================================
   Quote
   ========================================================= */

blockquote{
	font-style:italic;
	margin:0.0em 0;
	padding:0.0em 1em;
	text-align:left;
	line-height:1.45;
	position:relative;
	display:inline-block;
	background-color:rgba(250, 200, 130, 0.0);
	font-size:1.0em;
}

blockquote p{
	margin:1em 0 0 0;
}

blockquote p + p{
	margin:0.3em 0 0 0;
}

blockquote:before{
	display:block;
	content:"\201C";
	position:absolute;
	font-size:3em;
	left:-0.20em;
	top:-0.1em;
	color:#7a7a7a;
}

blockquote cite{
	color:#fff;
	font-style:normal;
	font-size:0.8em;
	font-weight:300;
	display:block;
	margin-top:0.25em;
	padding-right:1em;
	text-align:left;
}

/* =========================================================
   Headings
   ========================================================= */

h1{
	font-size:1.8em;
	font-weight:600;
}
h2{
	font-size:1.2em;
	font-weight:500;
}
h3{
	font-size:1.1em;
	font-weight:400;
	font-style:italic;
}

h1 span,
h2 span,
h3 span,
p span{
	background-color:#fff0;
	padding:0.2em 0.5em;
	margin:0 -0.5em;
	line-height:1.3;
	-webkit-box-decoration-break:clone;
	box-decoration-break:clone;
}

/* =========================================================
   Menus
   ========================================================= */

.panelMenuLanguage,
.panelMenuBook,
.panelMenuContext,
.panelMenuMobile,
.panelMenuVision{
	white-space:nowrap;
	visibility:hidden;
	pointer-events:none;
	transition:opacity 0.3s ease, visibility 0.3s ease;
	text-align:left;
}

.panelMenuMobile{
	text-align:right;
}

.panelMenuLanguage a,
.panelMenuBook a,
.panelMenuContext a,
.panelMenuMobile a,
.panelMenuVision a{
	font-size:1.2em;
	padding:0.4em;
	line-height:1;
	cursor:pointer;
	display:block;
	background:transparent;
	border:none;
	text-decoration:none;
}

.panelMenuLanguage a:hover,
.panelMenuBook a:hover,
.panelMenuContext a:hover,
.panelMenuMobile a:hover,
.panelMenuVision a:hover{
	background-color:#80808080;
}

.panelMenuLanguage hr,
.panelMenuBook hr,
.panelMenuContext hr,
.panelMenuMobile hr,
.panelMenuVision hr{
	border:1px solid #eee;
}

#menuMobile{
	display:block;
}
#menuDesktop{
	display:none;
}

/* active */
#menu-none:checked     ~ .panelContent,
#menu-language:checked ~ .panelMenuLanguage,
#menu-book:checked     ~ .panelMenuBook,
#menu-context:checked  ~ .panelMenuContext,
#menu-mobile:checked   ~ .panelMenuMobile,
#menu-vision:checked   ~ .panelMenuVision{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
}

/* hide body when any menu active */
input[name="menu"]:not(#menu-none):checked ~ .panelContent{
	opacity:0;
}

@media (min-width:640px){
	#menuMobile{ display:none; }
	#menuDesktop{ display:block; }
	.panelBottomLeft{ display:block; }
	.panelBottomRight{ display:block; }
}

/* =========================================================
   visionMenu
   ========================================================= */

#menuVision .visionList{
	padding:14px;
	display:grid;
	gap:14px;
}

#menuVision .visionItem{
	display:grid;
	grid-template-columns: 60% 40%;
	gap:14px;
	align-items:start;

	border:1px solid rgba(255,255,255,0.10);
	border-radius:12px;
	overflow:hidden;
	background:rgba(255,255,255,0.03);
}

#menuVision .visionPreview{
	display:block;
	width:100%;
	height:auto;
	object-fit:contain;
	border-radius:10px;
	background:rgba(0,0,0,0.18);
	text-align:center;
	box-sizing:border-box;
	padding:12px;
}

#menuVision .visionImage{
  position:relative;
  width:fit-content;
  height:fit-content;
  max-width:100%;
  max-height:100%;
  margin:auto;
}

#menuVision .visionImage .safeZone{
  position:absolute;
  left:50%;
  top:50%;
  width:var(--safe-w, 80%);
  height:var(--safe-h, 80%);
  transform:translate(-50%,-50%);
  border:1px dashed rgba(255,255,255,0.45);
  border-radius:10px;              
  pointer-events:none;
}

#menuVision .visionImage img{
	display:block;
	width:auto;
	height:auto;
	margin:auto;
	max-width:100%;
	max-height:360px;
	border:1px solid rgba(255,255,255,0.5);
}

#menuVision .visionMeta{
	padding:12px 12px 14px 0;
	display:grid;
	gap:8px;
}

#menuVision .visionMetaTop{
	display:flex;
	justify-content:space-between;
	gap:10px;
	align-items:baseline;
}

#menuVision .visionName{
	font-size:16px;
	font-weight:600;
}

#menuVision .visionDims{
	font-size:13px;
	opacity:0.85;
	white-space:nowrap;
}

#menuVision .visionUse{
	font-size:13px;
	opacity:0.85;
	line-height:1.35;
}

#menuVision .visionActions{
	display:flex;
	gap:12px;
	margin-top:4px;
}

@media (max-width:720px){
	#menuVision .visionItem{
		grid-template-columns:1fr;
	}
	#menuVision .visionMeta{
		padding:0 12px 14px 12px;
	}
}