:root
{
	--frame:40px;
	--cross:32px;
	--corner:40px;
	--glass-gap:8px;
}
/* H-Code/WPBakery:
   .wpb_column verwendet float:left.
   Der Textblock erzeugt hier kein Clearfix,
   daher kollabiert die Section auf ihr Padding. */
.entry-content > section::after
{
	content:"";
	display:table;
	clear:both;
}
.stucco
{
	position:relative;
	padding:56px;
	background:#f5f3ef url(/wp-content/themes/h-code-child/images/stucco.png) repeat;
	background-size:600px auto;
	box-shadow:inset 6px 6px 10px rgba(0,0,0,.40);
	margin-top:20px;
}
.window
{
	position:relative;
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-template-rows:minmax(0,1fr) minmax(0,1fr);
	padding:var(--frame);
	aspect-ratio:16/10;
	overflow:hidden;
	z-index:60;
	box-shadow:0 0 5px rgba(0,0,0,.45),1px 1px 3px rgba(0,0,0,.25);
}
.tile
{
	position:relative;
	display:block;
	min-width:0;
	min-height:0;
	overflow:hidden;
	padding:var(--glass-gap);
	background:#171310;
	text-decoration:none;
	z-index:10;
}
a.tile
{
	font-family:"Cormorant Garamond",serif;
}
.tile1,
.tile2
{
	margin-bottom:calc(var(--cross) / 2);
}
.tile3,
.tile4
{
	margin-top:calc(var(--cross) / 2);
}
.tile1,
.tile3
{
	margin-right:calc(var(--cross) / 2);
}
.tile2,
.tile4
{
	margin-left:calc(var(--cross) / 2);
}
.tile img
{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	transition:filter .25s ease;
}
.tile:hover img
{
	filter:brightness(.88);
}
.tile::before
{
	content:"";
	position:absolute;
	inset:var(--glass-gap);
	pointer-events:none;
	z-index:15;
	background:radial-gradient(
		ellipse at right bottom,
		rgba(255,255,255,0) 0%,
		rgba(255,255,255,.06) 50%,
		rgba(255,255,255,.18) 75%,
		rgba(255,255,255,.32) 100%
	);
	mix-blend-mode:screen;
}
.caption
{
	position:absolute;
	left:18px;
	right:18px;
	bottom:18px;
	padding:0;
	color:#fff;
	font-size:clamp(22px,2vw,38px);
	font-weight:700;
	line-height:1.15;
	text-shadow:0 2px 8px rgba(0,0,0,.85);
	z-index:20;
	pointer-events:none;
}
.tile1
{
	grid-area:1/1;
}
.tile2
{
	grid-area:1/2;
}
.tile3
{
	grid-area:2/1;
}
.tile4
{
	grid-area:2/2;
}
.frame
{
	position:absolute;
	z-index:100;
}
.top,
.bottom
{
	left:var(--corner);
	right:var(--corner);
	height:var(--frame);
	background:url(/wp-content/themes/h-code-child/images/wood-tile-horizontal.png) repeat-x;
	background-size:auto 100%;
}
.top
{
	top:0;
}
.bottom
{
	bottom:0;
}
.left,
.right
{
	top:var(--corner);
	bottom:var(--corner);
	width:var(--frame);
	background:url(/wp-content/themes/h-code-child/images/wood-tile-vertical.png) repeat-y;
	background-size:100% auto;
}
.left
{
	left:0;
}
.right
{
	right:0;
}
.corner
{
	position:absolute;
	width:var(--corner);
	height:var(--corner);
	background:url(/wp-content/themes/h-code-child/images/wood-corner-top-left.png) no-repeat;
	background-size:100% 100%;
	z-index:120;
}
.tl
{
	left:0;
	top:0;
}
.tr
{
	right:0;
	top:0;
	transform:scaleX(-1);
}
.bl
{
	left:0;
	bottom:0;
	transform:scaleY(-1);
}
.br
{
	right:0;
	bottom:0;
	transform:scale(-1);
}
.cross
{
	position:absolute;
	z-index:110;
}
.vertical
{
	left:calc(50% - (var(--cross) / 2));
	top:var(--frame);
	bottom:var(--frame);
	width:var(--cross);
	background:url(/wp-content/themes/h-code-child/images/wood-tile-vertical.png) repeat-y;
	background-size:100% auto;
}
.horizontal
{
	left:var(--frame);
	right:var(--frame);
	top:calc(50% - (var(--cross) / 2));
	height:var(--cross);
	background:url(/wp-content/themes/h-code-child/images/wood-tile-horizontal.png) repeat-x;
	background-size:auto 100%;
}
@media (max-width:768px)
{
	:root
	{
		--frame:32px;
		--cross:28px;
		--corner:32px;
		--glass-gap:6px;
	}
	.entry-content {
		background: transparent !important;
	}
	.stucco
	{
	padding: 18px;
	margin-top: 12px;
	background: transparent;
	box-shadow: none;
	}
	.window
	{
		display:block;
		aspect-ratio:auto;
		padding:var(--frame);
	}
	.tile
	{
		display:block;
		width:100%;
		margin:0;
		overflow:visible;
	}
	.tile1,
	.tile2,
	.tile3,
	.tile4
	{
		grid-column:auto;
		grid-row:auto;
		margin:0;
	}
	.vertical,
	.horizontal
	{
		display:none;
	}
	.tile2,
	.tile3,
	.tile4
	{
		margin-top:var(--cross);
	}
	.tile2::before,
	.tile3::before,
	.tile4::before
	{
		content:"";
		position:absolute;
		left:calc(var(--frame) * -1);
		right:calc(var(--frame) * -1);
		top:calc(var(--cross) * -1);
		height:var(--cross);
		background:url(/wp-content/themes/h-code-child/images/wood-tile-horizontal.png) repeat-x;
		background-size:auto 100%;
		z-index:100;
	}
	.caption
	{
		left:14px;
		right:14px;
		bottom:14px;
		font-size:clamp(22px,7vw,34px);
	}
}