/* ==========================================================================
   Huforthopaedie Marco Jost — v2 stylesheet
   One file, organized top to bottom: tokens, reset, type, layout,
   header/nav, content components, footer, lightbox, responsive.
   Font Awesome (assets/css/font-awesome.min.css) is the only other
   stylesheet this site loads.
   ========================================================================== */

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/roboto-normal-latin-400.woff2') format('woff2');
	font-display: swap;
}

:root {
	--color-primary: #1e73be;
	--color-primary-hover: #0a5faa;
	--color-text: #1e1e1e;
	--color-white: #fff;
	--color-footer-bg: #0e0905;
	--color-border: rgba(30, 30, 30, 0.15);
	--color-tint: rgba(30, 30, 30, 0.1);

	--font-base: 'Roboto', Arial, sans-serif;

	--container-max: 117rem;
	--container-pad: 2rem;
	--gap: 2rem;
	--radius: 0.6rem;
}

/* ---- Reset / base ---- */
* { box-sizing: border-box; }
html { font-size: 62.5%; } /* 1rem = 10px */
body {
	margin: 0;
	font-family: var(--font-base);
	font-size: 1.6rem;
	line-height: 1.5;
	color: var(--color-text);
	background-color: var(--color-primary);
	background-image: url("../img/bg-11.jpg");
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }
hr { border: none; border-top: 1px solid var(--color-border); margin: 6rem 0; }

.wrap {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-pad);
}

/* ---- Typography ---- */
/* Vertical rhythm: a heading stays close to the content it introduces
   (smaller bottom margin) but separates generously from whatever came
   before it (larger top margin, scaled by level). :not(:first-child)
   keeps a block-opening heading flush with its container instead of
   doubling up on #content's own top padding. */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-base); margin: 0 0 1.6rem; line-height: 1.2; }
h1 { font-size: 3.6rem; font-weight: 700; }
h2 { font-size: 3.6rem; font-weight: 300; margin-bottom: 2rem; }
h3 { font-size: 2.4rem; font-weight: 700; margin-bottom: 1.6rem; }
h4 { font-size: 1.8rem; font-weight: 400; text-transform: uppercase; margin-bottom: 1.2rem; }
h5 { font-size: 1.6rem; font-weight: 700; margin-bottom: 1rem; }
h6 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.8rem; }
h1:not(:first-child), h2:not(:first-child) { margin-top: 4.8rem; }
h3:not(:first-child) { margin-top: 4rem; }
h4:not(:first-child), h5:not(:first-child), h6:not(:first-child) { margin-top: 3.2rem; }
p { margin: 0 0 1.6rem; }

blockquote {
	margin: 1.6rem 0;
	padding: 1rem 0 1rem 2rem;
	border-left: 3px solid var(--color-primary);
	font-style: italic;
	font-size: 1.4rem;
}
blockquote:first-child { margin-top: 0; }
blockquote p { margin: 0 0 0.5rem; }
blockquote p:last-child { margin-bottom: 0; }

.btn {
	display: inline-block;
	padding: 1rem 3rem;
	background: var(--color-primary);
	color: var(--color-white);
	border-radius: 3px;
	font-weight: 400;
}
.btn:hover { background: var(--color-primary-hover); color: var(--color-white); }

/* ---- Image alignment (content images) ---- */
/* max-width guards figures carrying an explicit inline pixel width
   (e.g. style="width: 641px") from overflowing narrow viewports. */
.alignleft { float: left; margin: 0 2.8rem 1.4rem 0; max-width: 100%; }
.alignright { float: right; margin: 0 0 1.4rem 2.8rem; max-width: 100%; }
.alignnone { clear: both; }
figure { margin: 0; }

/* Slightly rounded photo corners; overflow:hidden on the figure (not just
   the img) keeps a flush figcaption rounding with it as one unit instead
   of leaving a sharp-cornered caption notched against a rounded image. */
img.alignleft, img.alignright, .lightbox-image {
	border-radius: var(--radius);
}
figure.alignleft, figure.alignright {
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
figure.alignleft:hover, figure.alignright:hover {
	transform: translateY(-0.4rem);
	box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.15);
}

/* Below tablet width a floated figure this large leaves no readable text
   column beside it; stack it full-width above the copy instead. */
@media (max-width: 680px) {
	.alignleft, .alignright { float: none; margin: 0 0 1.4rem; }
}
figcaption, .caption {
	background: var(--color-tint);
	padding: 1rem 1.2rem;
	font-size: 1.4rem;
	text-align: center;
}

/* ---- Header ---- */
.shade {
	background: url("../img/bg-header.png") repeat;
	padding: 3rem 0 0;
}
.brand-line {
	font-size: 1.3rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-text);
	margin-bottom: 1.5rem;
}
#logo {
	display: block;
	font-size: 3.6rem;
	font-weight: 700;
	color: var(--color-primary);
	margin-bottom: 6rem;
	margin-top: 6rem;
}

/* ---- Navigation ---- */
#navigation {
	position: relative;
	z-index: 5;
	background: var(--color-primary);
}
#navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#navigation .menu {
	display: none;
}
#navigation input[type="checkbox"] { display: none; }
#nav-toggle {
	display: block;
	padding: 1.5rem var(--container-pad);
	color: var(--color-white);
	cursor: pointer;
}
#navigation .menu li {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}
#navigation .menu a {
	display: block;
	padding: 1.2rem var(--container-pad);
	font-size: 1.6rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-white);
}
#navigation .menu li.current-menu-item > a { color: rgba(255, 255, 255, 0.6); }

/* Mobile dropdown: overlays the page instead of pushing it down, and only
   exists below the desktop breakpoint so it can never fight the flex layout
   when the window is resized while open. */
@media (max-width: 959px) {
	#navigation input[type="checkbox"]:checked ~ .menu {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		background: var(--color-primary);
		z-index: 999;
	}
	#navigation .menu li.current-menu-item {
		border-left: 3px solid var(--color-white);
	}
}

/* ---- Content ---- */
#content { padding: 8rem 0; }

.social-box { margin-top: 4rem; }
.social-box .fa-boxed {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 100%;
	color: var(--color-white);
	margin-right: 0.5rem;
}
.social-box .fa-facebook { background: #2f5c95; }
.social-box .fa-twitter { background: #398feb; }
.social-box .fa-linkedin { background: #1e7db5; }
.social-box .fa-envelope { background: var(--color-primary); }

/* Fallbeispiele-style photo grid (replaces the old float/clearfix column hack) */
.gallery-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
	margin-bottom: 3.5rem;
	align-items: flex-start;
}
.gallery-row > * { flex: 1 1 20rem; margin: 0; }
/* Source photos are ~300px wide; flex-grow:0 plus the cap keeps them sharp
   instead of upscaling to fill a wide row, while shrink still lets them
   fit narrow phone widths. */
.gallery-row > a,
.gallery-row > figure { flex: 0 1 30rem; max-width: 30rem; }
.gallery-row > a { display: block; }
.gallery-row > a img { width: 100%; }
.gallery-row .gallery-caption { flex: 2 1 30rem; }
.gallery-row figure img { width: 100%; }

/* Same rounded-corner + hover-lift treatment as the portrait figures,
   scoped to the gallery grid: figures round as one unit with their
   caption, bare image links round and lift on their own. */
.gallery-row figure,
.gallery-row > a {
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
.gallery-row figure:hover,
.gallery-row > a:hover {
	transform: translateY(-0.4rem);
	box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.15);
}

/* ---- Footer ---- */
#footer {
	margin-top: 4rem;
	background-color: var(--color-footer-bg);
	background-image: url("../img/bg-footer-2.jpg");
	background-repeat: repeat-x;
	background-position: center top;
	color: var(--color-white);
	padding: 4rem 0 6rem;
	position: relative;
}
#footer::before {
	content: '';
	position: absolute;
	top: -18px;
	left: 0;
	width: 100%;
	height: 36px;
	background-image: url("../img/stones.png");
	background-repeat: repeat-x;
	background-position: center bottom;
	background-size: 700px;
}
.footer-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}
.footer-flex a { color: var(--color-white); }
.footer-nav a { margin-left: 1.5rem; }
.footer-nav a:first-child { margin-left: 0; }

/* ---- Back to top ---- */
#back-top {
	position: fixed;
	bottom: 0;
	right: 2rem;
	width: 5rem;
	height: 4rem;
	line-height: 4rem;
	text-align: center;
	background: var(--color-primary);
	color: var(--color-white);
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	opacity: 0.85;
	transition: opacity 200ms ease-in;
}
#back-top:hover { opacity: 1; }
#back-top a { color: inherit; display: block; }

/* ---- Fade-in on scroll (footer) ---- */
.curly_animated { opacity: 0; }

/* ---- Lightbox ---- */
.lightbox-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.85);
	z-index: 9999;
	align-items: center;
	justify-content: center;
}
.lightbox-overlay.is-open { display: flex; }
.lightbox-image {
	max-width: 90vw;
	max-height: 85vh;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
	position: absolute;
	background: transparent;
	border: none;
	color: #fff;
	font-size: 2.4rem;
	line-height: 1;
	cursor: pointer;
	padding: 1rem;
}
.lightbox-close { top: 1rem; right: 1.5rem; }
.lightbox-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 1rem; top: 50%; transform: translateY(-50%); }
body.lightbox-locked { overflow: hidden; }

/* ==========================================================================
   Desktop (>= 960px)
   ========================================================================== */
@media (min-width: 960px) {
	#navigation {
		position: sticky;
		top: 0;
		z-index: 999;
	}

	#nav-toggle { display: none; }
	#navigation .menu {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 4rem;
		max-width: var(--container-max);
		margin: 0 auto;
		padding: 0 var(--container-pad);
	}
	#navigation .menu li { border-top: none; position: relative; }
	#navigation .menu a { padding: 1.8rem 0; }
	#navigation .menu li.current-menu-item > a::after {
		content: '';
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 5px solid var(--color-primary);
	}
}