/*
Stylesheet for osterwitzer-schuhplattler.at

Mobile-first: the base rules are for phones; the media queries at the end
widen the layout for tablets (700px) and desktops (900px).
Colours come from Tracht and the hat in the logo. No web fonts: headings
use a serif and text a sans-serif font that is already on the device.

Contents:
  1. Settings (colours, fonts)
  2. Base elements
  3. Buttons
  4. Header and menu
  5. Hero (homepage) and page heads (other pages)
  6. Sections and text
  7. Cards, facts, people
  8. Picture grid and pop-up
  9. Footer and call bar
 10. Wider screens
 11. Reduced motion
*/


/* ==========================================================================
   1. Settings
   ========================================================================== */

:root {
	--green-900: #1d3326;   /* footer, dark bands */
	--green-700: #2c4c38;   /* buttons, links: Loden green */
	--green-600: #3a6149;   /* button hover */
	--brown-700: #6b4a2e;   /* accents: Lederhosen brown */
	--linen: #f6f1e6;       /* tinted sections */
	--paper: #fffdf8;       /* page background */
	--ink: #23292a;         /* text */
	--muted: #5d6460;       /* secondary text */
	--line: #e3dccd;        /* borders */

	--serif: "Palatino Linotype", Palatino, "Book Antiqua", "Iowan Old Style", Georgia, serif;
	--sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--radius: 10px;
	--header-height: 64px;
}


/* ==========================================================================
   2. Base elements
   ========================================================================== */

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-height) + 8px);   /* anchors land below the sticky header */
}

body {
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 1.0625rem;   /* 17px */
	line-height: 1.6;
	margin: 0;
	padding-bottom: 60px;   /* room for the call bar on phones */
}

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

h1, h2, h3 {
	font-family: var(--serif);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 0.5em;
}

h2 {
	font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
}

h3 {
	font-size: 1.3rem;
}

p {
	margin: 0 0 1em;
}

a {
	color: var(--green-700);
}

a:hover {
	color: var(--brown-700);
}

:focus-visible {
	outline: 3px solid var(--brown-700);
	outline-offset: 3px;
}

.container {
	margin: 0 auto;
	max-width: 1120px;
	padding: 0 20px;
}

.center {
	margin-top: 2rem;
	text-align: center;
}

.small {
	color: var(--muted);
	font-size: 0.9rem;
}

/* Text only for screen readers. */
.visually-hidden {
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* "Zum Inhalt springen": hidden until reached with the Tab key. */
.skip-link {
	background: #fff;
	border-radius: 0 0 var(--radius) 0;
	left: 0;
	padding: 12px 18px;
	position: absolute;
	top: 0;
	transform: translateY(-120%);
	z-index: 100;
}

.skip-link:focus {
	transform: none;
}

/* Spam protection (see js/contact.js): the HTML holds e-mail addresses and
   phone numbers written backwards; this shows them the right way round
   when JavaScript is off. No line breaks, they would mix up the order. */
.reversed {
	direction: rtl;
	unicode-bidi: bidi-override;
	white-space: nowrap;
}

/* Missing data (Impressum): clearly visible until it is filled in. */
.todo {
	background-color: #fff3a8;
	color: #6b5200;
	font-weight: 700;
}


/* ==========================================================================
   3. Buttons
   ========================================================================== */

.btn {
	border: 2px solid transparent;
	border-radius: 999px;
	display: inline-block;
	font-weight: 600;
	line-height: 1.2;
	padding: 0.8em 1.5em;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s;
}

.btn-primary {
	background: var(--green-700);
	color: #fff;
}

.btn-primary:hover {
	background: var(--green-600);
	color: #fff;
}

.btn-outline {
	border-color: var(--green-700);
	color: var(--green-700);
}

.btn-outline:hover {
	background: var(--green-700);
	color: #fff;
}

/* On dark green backgrounds: white button and white-outlined button */
.btn-light {
	background: #fff;
	color: var(--green-900);
}

.btn-light:hover {
	background: var(--linen);
	color: var(--green-900);
}

.btn-ghost {
	border-color: rgb(255 255 255 / 0.8);
	color: #fff;
}

.btn-ghost:hover {
	background: rgb(255 255 255 / 0.12);
	color: #fff;
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}


/* ==========================================================================
   4. Header and menu
   ========================================================================== */

.topbar {
	background: rgb(255 253 248 / 0.96);
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 10;
}

.topbar-inner {
	align-items: center;
	display: flex;
	justify-content: space-between;
	min-height: var(--header-height);
}

.brand {
	align-items: center;
	color: var(--ink);
	display: flex;
	font-family: var(--serif);
	font-size: 1.05rem;
	font-weight: 700;
	gap: 10px;
	line-height: 1.1;
	text-decoration: none;
}

.brand:hover {
	color: var(--green-700);
}

.brand img {
	height: 46px;
	width: 46px;
}

/* Menu bar: only on wide screens (see section 10) */
.nav-desktop {
	display: none;
}

.nav-desktop a:not(.btn) {
	color: var(--ink);
	font-weight: 500;
	text-decoration: none;
}

.nav-desktop a:not(.btn):hover,
.nav-desktop a[aria-current="page"] {
	color: var(--green-700);
}

.nav-desktop a[aria-current="page"] {
	box-shadow: inset 0 -2px 0 var(--brown-700);
}

/* Phones: a <details> element. <summary> is the button, the <nav> inside
   drops down below the header. Works without JavaScript. */
.menu summary {
	cursor: pointer;
	list-style: none;   /* hide the default triangle */
	padding: 10px;
}

.menu summary::-webkit-details-marker {
	display: none;
}

.menu summary svg {
	fill: none;
	height: 26px;
	stroke: var(--ink);
	stroke-width: 2.2;
	width: 26px;
}

.menu .icon-close,
.menu[open] .icon-open {
	display: none;
}

.menu[open] .icon-close {
	display: block;
}

.menu nav {
	background: var(--paper);
	border-bottom: 1px solid var(--line);
	box-shadow: 0 12px 24px rgb(0 0 0 / 0.08);
	display: flex;
	flex-direction: column;
	gap: 4px;
	left: 0;
	padding: 8px 20px 20px;
	position: absolute;
	right: 0;
	top: 100%;
}

.menu nav a:not(.btn) {
	border-bottom: 1px solid var(--line);
	color: var(--ink);
	font-size: 1.1rem;
	padding: 12px 0;
	text-decoration: none;
}

.menu nav a[aria-current="page"] {
	color: var(--green-700);
	font-weight: 700;
}

.menu nav .btn {
	margin-top: 12px;
}


/* ==========================================================================
   5. Hero (homepage) and page heads (other pages)
   ========================================================================== */

/* Phones: picture on top, text on a green panel below it.
   Wide screens: text panel left, picture right (section 10).
   The text never lies on top of the people in the photo. */
.hero {
	background: var(--green-900);
	color: #fff;
	display: grid;
}

.hero > img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 45% 55%;
	width: 100%;
}

.hero-text {
	padding: 28px 20px 40px;
}

.hero h1 {
	font-size: clamp(2.4rem, 1.8rem + 2.5vw, 3.8rem);
	margin-bottom: 0.3em;
}

.kicker {
	color: #f3d9a4;
	font-family: var(--serif);
	font-size: 1.3rem;
	font-style: italic;
	margin: 0;
}

.lead {
	font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
	max-width: 36em;
}

/* Title band at the top of the other pages */
.page-head {
	background: var(--green-900);
	color: #fff;
	padding: 36px 0 32px;
}

.page-head h1 {
	font-size: clamp(2.2rem, 1.8rem + 2vw, 3.2rem);
	margin: 0;
}


/* ==========================================================================
   6. Sections and text
   ========================================================================== */

.section {
	padding: 56px 0;
}

.section-tint {
	background: var(--linen);
}

.section-green {
	background: var(--green-900);
	color: #eef2ec;
}

.section-green h2 {
	color: #fff;
}

.section-green a:not(.btn) {
	color: #fff;
}

/* Running text: a comfortable line length, left-aligned with the headings */
.prose > * {
	max-width: 720px;
}

.prose h2 {
	font-size: clamp(1.35rem, 1.2rem + 0.8vw, 1.75rem);
	margin-top: 1.6em;
}

.prose h2:first-child {
	margin-top: 0;
}

.signature {
	font-family: var(--serif);
	font-size: 1.2rem;
	font-style: italic;
}

.intro {
	display: grid;
	gap: 32px;
}


/* ==========================================================================
   7. Cards, facts, people
   ========================================================================== */

/* Three facts with a big number, brown line on the left */
.facts {
	display: grid;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.facts li {
	border-left: 4px solid var(--brown-700);
	color: var(--muted);
	padding: 4px 0 4px 16px;
}

.facts strong {
	color: var(--ink);
	display: block;
	font-family: var(--serif);
	font-size: 2rem;
	line-height: 1.1;
}

/* "Wo wir auftreten" */
.cards {
	display: grid;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.card {
	background: #fff;
	border-radius: var(--radius);
	border-top: 4px solid var(--green-700);
	box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
	padding: 22px;
}

.card p {
	margin: 0;
}

/* Vorstand with photo and call/e-mail buttons */
.people {
	display: grid;
	gap: 20px;
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
}

.person {
	align-items: start;
	background: var(--linen);
	border-radius: var(--radius);
	display: grid;
	gap: 18px;
	grid-template-columns: 76px 1fr;
	padding: 18px;
}

.person img {
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
	width: 76px;
}

.person h2 {
	font-size: 1.3rem;
	margin: 0;
}

.role {
	color: var(--brown-700);
	font-weight: 600;
	margin-bottom: 0.8em;
}

.person .btn {
	padding: 0.6em 1em;   /* "Anrufen" and "E-Mail" fit side by side on phones */
}

.person .small {
	margin: 0.8em 0 0;
	overflow-wrap: anywhere;
}

/* Booking section at the end of the homepage */
.cta {
	text-align: center;
}

.cta .actions {
	justify-content: center;
}

/* Small icon in front of a link text (Instagram in the footer) */
.icon-inline {
	fill: none;
	height: 1.15em;
	margin-right: 6px;
	stroke: currentColor;
	stroke-width: 2;
	vertical-align: -0.2em;
	width: 1.15em;
}

/* Instagram link with logo */
.instagram {
	margin-top: 2rem;
}

.instagram a {
	align-items: center;
	display: inline-flex;
	font-weight: 600;
	gap: 10px;
}

.instagram svg {
	fill: none;
	height: 28px;
	stroke: currentColor;
	stroke-width: 2;
	width: 28px;
}


/* ==========================================================================
   8. Picture grid and pop-up
   Each thumbnail is a <button popovertarget="..."> that opens a <div popover>
   with the big picture. Esc or a click outside closes it; no JavaScript.
   ========================================================================== */

.gallery {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(2, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

.thumb {
	aspect-ratio: 4 / 3;
	background: var(--linen);
	border: 0;
	border-radius: var(--radius);
	cursor: zoom-in;
	display: block;
	overflow: hidden;
	padding: 0;
	width: 100%;
}

.thumb img {
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
	width: 100%;
}

.thumb:hover img {
	transform: scale(1.04);
}

.lightbox {
	background: transparent;
	border: 0;
	max-height: 92vh;
	max-width: 94vw;
	overflow: visible;
	padding: 0;
}

.lightbox::backdrop {
	background: rgb(10 16 12 / 0.9);
}

.lightbox img {
	border-radius: 6px;
	max-height: 84vh;
	width: auto;
}

.lightbox button {
	background: #fff;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	display: block;
	font: inherit;
	font-weight: 600;
	margin: 12px auto 0;
	padding: 0.5em 1.4em;
}


/* ==========================================================================
   9. Footer and call bar
   ========================================================================== */

.footer {
	background: var(--green-900);
	color: #cfd8d1;
	padding: 40px 0;
}

.footer strong {
	color: #fff;
	font-family: var(--serif);
	font-size: 1.2rem;
}

.footer a {
	color: #fff;
}

.footer-inner {
	display: grid;
	gap: 8px;
}

.footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.footer .small {
	color: #9fb0a4;
}

/* Phones: two big buttons fixed at the bottom of the screen */
.callbar {
	bottom: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	left: 0;
	position: fixed;
	right: 0;
	z-index: 20;
}

.callbar a {
	background: var(--green-700);
	color: #fff;
	font-weight: 700;
	padding: 17px 0;
	text-align: center;
	text-decoration: none;
}

.callbar a + a {
	background: var(--brown-700);
}


/* ==========================================================================
   10. Wider screens
   ========================================================================== */

@media (min-width: 700px) {
	.gallery {
		grid-template-columns: repeat(3, 1fr);
	}

	.cards,
	.people {
		grid-template-columns: repeat(2, 1fr);
	}

	.footer-inner {
		align-items: center;
		grid-template-columns: 1fr auto;
	}

	.footer .small {
		grid-column: 1 / -1;
	}
}

@media (min-width: 900px) {
	body {
		padding-bottom: 0;
	}

	.callbar,
	.menu {
		display: none;
	}

	.nav-desktop {
		align-items: center;
		display: flex;
		gap: 28px;
	}

	.section {
		padding: 88px 0;
	}

	.page-head {
		padding: 56px 0 48px;
	}

	.hero {
		grid-template-columns: minmax(400px, 5fr) 7fr;
		min-height: min(80vh, 760px);
	}

	.hero > img {
		aspect-ratio: auto;
		grid-column: 2;
		grid-row: 1;
		height: 100%;
	}

	/* Left edge lines up with the content column below */
	.hero-text {
		align-self: center;
		grid-column: 1;
		grid-row: 1;
		padding: 48px 48px 48px max(20px, calc((100vw - 1120px) / 2 + 20px));
	}

	.intro {
		align-items: center;
		gap: 64px;
		grid-template-columns: 3fr 2fr;
	}

	.cards {
		grid-template-columns: repeat(4, 1fr);
	}
}


/* ==========================================================================
   11. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.btn,
	.thumb img {
		transition: none;
	}
}