/*
 * Der Hof - ported from the Drupal 7 "glas" theme (Omega 3 + LESS).
 *
 * The Omega grid framework is gone; the two-column layout is CSS Grid at the
 * same measurements. Widths, type sizes and breakpoints below are the values
 * the old site actually computed, not approximations.
 *
 * Deliberately NOT carried over: the opacity:0 declarations on the gallery,
 * right column and image group. In Drupal those elements were invisible in CSS
 * and revealed only by GSAP tweens, so any JS failure produced a blank page.
 * The entrance fade is a CSS animation instead.
 */

/* ---------- fonts ---------- */

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('../fonts/open-sans-v34-latin-300.woff2') format('woff2');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/open-sans-v34-latin-700.woff2') format('woff2');
}

/* ---------- tokens ---------- */

:root {
	--text: #000;
	--muted: #777;
	--bg: #fff;
	--font: 'Open Sans', Helvetica, Arial, sans-serif;

	/* Omega's container-12 / grid-12, minus the framework. */
	--container: 100%;
	--gutter: 10px;

	--gallery-ratio: 680 / 537;  /* RoyalSlider autoScaleSlider 680x537 */
}

/* ---------- reset ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

body {
	margin: 0;
	min-width: 320px;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	/* The old site computes 13px on body; the main menu's 1.2em depends on it. */
	font-size: 13px;
	/* ...and inherits line-height 1.5, which sets the height of the title,
	   the menu and every box that does not override it. */
	line-height: 1.5;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

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

ul { margin: 0; padding: 0; list-style: none; }

button { font: inherit; }

.skip-link {
	position: absolute;
	left: -9999px;
}
.skip-link:focus {
	left: 8px;
	top: 8px;
	z-index: 1000;
	padding: 8px 12px;
	background: #000;
	color: #fff;
}

/* Cross-document fade, replacing the old JS that cancelled every menu click
   and delayed navigation by 1.5s. Browsers without support just navigate. */
@view-transition { navigation: auto; }

/* ---------- page frame ---------- */

#page {
	position: relative;
	min-height: 100%;
}

.site-header,
.sid-wrapper {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

.site-header {
	position: relative;
	/* 80px here clears the fixed 60px mobile bar without any body padding -
	   the original relies on exactly this. Drops to 10px from 740px up. */
	padding-top: 80px;
	padding-bottom: 20px;
}

#main-content { padding-bottom: 100px; }

/* ---------- section banner ---------- */

#top-logo {
	position: absolute;
	left: 0;
	right: 0;
	width: 400px;
	max-width: calc(100% - (var(--gutter) * 2));
	height: 70px;
	margin: 0 auto;
	overflow: hidden;
}

.top-logo__img {
	display: block;
	width: 400px;
	max-width: 100%;
	height: auto;
}

/* ---------- main menu ---------- */

.navigation {
	/* The 110px offset that makes room for the banner only applies from 740px
	   up; below that the banner sits directly in the header's 80px padding. */
	margin-top: 0;
	/* Zero height on purpose, as in the original: the menu overflows rather
	   than adding its own 23px to the header, which is what keeps the content
	   starting at exactly 140 + margin. */
	height: 0;
}

.main-menu { text-align: center; }

.main-menu li {
	display: inline;
	padding: 2px;
}

.main-menu a {
	padding: 4px 10px;
	color: var(--muted);
	font-size: 1.2em;
	font-weight: 300;
	text-transform: uppercase;
}

.main-menu a:hover,
.main-menu a:focus-visible,
.main-menu .is-active a,
.main-menu .is-active-trail a { color: #000; }

/* Mobile bar. Same look as the old black 60px strip, but a real button and a
   real list instead of a native <select> dressed up as a menu. */
.nav-toggle {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 60px;
	padding: 0;
	border: 0;
	background: #000 url('../img/responsive-nav.png') right center no-repeat;
	color: #fff;
	font-weight: 700;
	line-height: 60px;
	text-align: left;
	text-indent: 40px;
	cursor: pointer;
	z-index: 999;
}

.main-menu {
	display: none;
	position: fixed;
	top: 60px;
	left: 0;
	width: 100%;
	background: #383838;
	z-index: 998;
}

.main-menu.is-open { display: block; }

.main-menu li { display: block; padding: 0; }

.main-menu a {
	display: block;
	padding: 10px 40px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	color: #fff;
	font-size: 13px;
}

.main-menu a:hover,
.main-menu a:focus-visible,
.main-menu .is-active a,
.main-menu .is-active-trail a { color: #fff; background: #000; }


/* ---------- content ---------- */

.sid-wrapper { margin-top: 60px; }

.content { display: block; }

.sid-left { max-width: 100%; }

.sid-right { margin-top: 10px; }

.right-title {
	color: #000;
	font-size: 15px;
	text-transform: uppercase;
}

.pagetext p {
	margin: 0 0 10px;
	font-size: 16px;
	line-height: 26px;
}

.pagetext a { text-decoration: underline; }
.pagetext a:hover,
.pagetext a:focus-visible { color: #4a4a4a; }

/* ---------- section submenu ---------- */

.right-submenu {
	margin-top: 5px;
	margin-bottom: 20px;
}

.right-submenu li {
	display: inline;
	margin-right: 4px;
}

.right-submenu li::before { content: '/'; }
.right-submenu li:first-child::before { content: ''; }

.right-submenu a {
	padding-left: 4px;
	color: var(--muted);
	font-size: 13px;
	text-decoration: underline;
	text-transform: capitalize;
}

.right-submenu li:first-child a { padding-left: 0; }

.right-submenu a:hover,
.right-submenu a:focus-visible,
.right-submenu .is-active a {
	color: #000;
	text-decoration: none;
}

/* ---------- gallery ---------- */

.gallery {
	position: relative;
	width: 100%;
	aspect-ratio: var(--gallery-ratio);
}

.gallery__track {
	display: flex;
	height: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.gallery__track::-webkit-scrollbar { display: none; }

.gallery__slide {
	flex: 0 0 100%;
	height: 100%;
	scroll-snap-align: center;
}

.gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Arrows are injected by gallery.js: without JS the track is still a
   swipeable, keyboard-scrollable list rather than dead buttons. */
.gallery__arrow {
	position: absolute;
	top: 0;
	height: 100%;
	width: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	z-index: 21;
}

.gallery__arrow::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 36px;
	height: 67px;
	background-repeat: no-repeat;
}

.gallery__arrow--prev { left: 0; }
.gallery__arrow--next { right: 0; }

.gallery__arrow--prev::before {
	margin-top: -16px;
	margin-left: -16px;
	background-image: url('../img/v_pil.png');
	background-position: 1px -4px;
}

.gallery__arrow--next::before {
	margin-top: -20px;
	margin-left: -18px;
	background-image: url('../img/h_pil.png');
	background-position: -1px 1px;
}

.gallery__arrow[disabled] {
	opacity: 0.2;
	cursor: default;
}

/* ---------- image group ---------- */

.imagegroup {
	display: none;          /* hidden below 740px, as in the original */
	margin-top: 2px;
	/* The original gives every item a 1px bottom margin, including the last
	   row, so there is a 1px trailing gap under the grid. */
	margin-bottom: 1px;
}

.imagegroup__item {
	overflow: hidden;
	margin-bottom: 1px;
}

.imagegroup__item img {
	display: block;
	/* Rendered 200px wide and cropped by the narrower item, exactly as the
	   original did - not scaled to fit, which would change the framing. */
	width: auto;
	max-width: 200px;
	height: auto;
}

/* ---------- kontakt image ---------- */

.kontaktimg img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ---------- entrance animation ---------- */

@keyframes derhof-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
	.gallery,
	.sid-right,
	.kontaktimg img { animation: derhof-fade 1s ease 0.7s both; }

	.imagegroup__item { animation: derhof-fade 2s ease both; }
	.imagegroup__item:nth-child(1) { animation-delay: 0.70s; }
	.imagegroup__item:nth-child(2) { animation-delay: 0.95s; }
	.imagegroup__item:nth-child(3) { animation-delay: 1.20s; }
	.imagegroup__item:nth-child(4) { animation-delay: 1.45s; }
}

/* =========================================================================
   >= 740px  (Omega "narrow": container 720, content 700)
   ========================================================================= */

@media (min-width: 740px) {
	:root { --container: 720px; }


	.nav-toggle { display: none; }

	.main-menu {
		display: block;
		position: static;
		width: auto;
		background: none;
	}

	.main-menu li { display: inline; padding: 2px; }

	.main-menu a {
		display: inline;
		padding: 4px 10px;
		border: 0;
		background: none;
		color: var(--muted);
		font-size: 1.2em;
	}

	.main-menu a:hover,
	.main-menu a:focus-visible,
	.main-menu .is-active a,
	.main-menu .is-active-trail a { color: #000; background: none; }

	.site-header { padding-top: 10px; }

	.navigation { margin-top: 110px; }

	#top-logo { margin-top: 40px; }

	.sid-wrapper { margin-top: 50px; }

	.content {
		display: grid;
		grid-template-columns: 340px 340px;
		column-gap: 20px;
		justify-content: space-between;
		/* Floats in the original, so each column keeps its natural height
		   rather than being stretched to match its neighbour. */
		align-items: start;
	}

	.content--single { display: block; }

	.sid-right { margin-top: 0; }

	.pagetext p { font-size: 14px; line-height: 22px; }

	.imagegroup {
		display: grid;
		/* Equal columns with a 2px gutter: 169 + 2 + 169 = 340, matching the
		   gallery width above. The gutter is the same 2px as the gap between
		   the gallery and this grid, so every white seam here reads alike.
		   (The original used 169 + 1 + 170 - unequal columns, 1px gutter.) */
		grid-template-columns: 169px 169px;
		/* One 2px gutter in both directions, matching the gap above the grid,
		   so every white seam in the left column is identical. */
		gap: 2px;
	}

	.imagegroup__item { margin-bottom: 0; }
}

/* =========================================================================
   >= 980px  (Omega "normal": container 960, content 940)
   70 + 400 + 27 + 373 + 70 = 940
   ========================================================================= */

@media (min-width: 980px) {
	:root { --container: 960px; }

	.sid-wrapper { margin-top: 60px; }

	.content {
		grid-template-columns: 400px 373px;
		column-gap: 27px;
		justify-content: center;
	}

	.pagetext p { font-size: 13px; line-height: 20px; }

	.imagegroup {
		/* 199 + 2 + 199 = 400, lining the group's right edge up with the
		   gallery. The original used a 1px gutter here, leaving the group 1px
		   narrower than the gallery - a bug we are not carrying over. */
		grid-template-columns: 199px 199px;
	}
}