/* Klosterpforte e.V. — single stylesheet.
   Kept in one file and small enough to stay non-blocking; there is no build
   step for CSS, so what is written here is what ships. */

:root {
	--brand: #16688a;
	--brand-deep: #0e4a63;
	--brand-tint: #e7f1f6;
	--accent: #a94e1d;

	--sand: #f7f4ef;
	--paper: #fff;
	--ink: #1b2227;
	--ink-soft: #4d5a63;
	--line: #ded8cf;

	--wrap: 72rem;
	--gap: clamp(1rem, 3vw, 2rem);
	--radius: 0.75rem;
	--shadow: 0 1px 2px rgb(27 34 39 / 6%), 0 8px 24px rgb(27 34 39 / 8%);

	--font:
		system-ui, -apple-system, "Segoe UI", roboto, "Helvetica Neue", arial,
		sans-serif;
}

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font);
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	line-height: 1.65;
	text-underline-offset: 0.18em;
}

h1,
h2,
h3 {
	margin: 0 0 0.5em;
	font-weight: 650;
	line-height: 1.2;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem);
}

h2 {
	font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2rem);
}

h3 {
	font-size: 1.15rem;
}

/* Headings that open a section already sit on the section's own padding. These
   are the ones that interrupt running text — mostly the legal pages — and need
   their own breathing room above. */
:is(p, ul, ol, dl, address, blockquote, figure) + :is(h2, h3) {
	margin-top: 2em;
}

p,
ul,
ol,
dl {
	margin: 0 0 1rem;
}

p {
	text-wrap: pretty;
	max-width: 62ch;
}

a {
	color: var(--brand-deep);
	text-decoration-thickness: 1px;
}

a:hover {
	text-decoration-thickness: 2px;
}

:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
	border-radius: 2px;
}

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

address {
	font-style: normal;
}

.muted {
	color: var(--ink-soft);
}

/* Content the association still has to supply, deliberately conspicuous so it
   cannot go live unnoticed. */
mark {
	background: #fdf3d0;
	color: var(--ink);
	padding: 0.1em 0.35em;
	border-left: 3px solid var(--accent);
}

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gap);
}

.plain {
	list-style: none;
	padding: 0;
}

.skip {
	position: absolute;
	left: -9999px;
	z-index: 10;
	padding: 0.75rem 1.25rem;
	background: var(--brand-deep);
	color: #fff;
}

.skip:focus {
	left: 0.5rem;
	top: 0.5rem;
}

/* --- header ---------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 5;
	background: rgb(255 255 255 / 92%);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--line);
}

.header-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	padding-block: 0.75rem;
}

.brand {
	display: inline-flex;
	color: var(--brand);
	line-height: 0;
}

.brand img {
	width: clamp(11rem, 20vw, 13.75rem);
	height: auto;
}

.nav-disclosure {
	margin-inline-start: auto;
}

/* Wide viewports: no disclosure at all — hide the control and force the list
   open. Two rules are needed because engines hide a closed <details>
   differently: older ones put display:none on the children, newer ones put
   content-visibility on the ::details-content pseudo-element. Each engine
   applies the rule it understands and ignores the other, so the navigation is
   visible either way. */
@media (width > 56rem) {
	.nav-disclosure > summary {
		display: none;
	}

	.nav-disclosure > nav {
		display: block;
	}

	.nav-disclosure::details-content {
		content-visibility: visible;
		block-size: auto;
	}
}

.site-header nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header nav a {
	display: block;
	padding: 0.35rem 0;
	color: var(--ink);
	font-weight: 550;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.site-header nav a:hover {
	border-bottom-color: var(--line);
}

.site-header nav a[aria-current="page"] {
	color: var(--brand-deep);
	border-bottom-color: var(--brand);
}

/* --- hero ------------------------------------------------------------------ */

.hero {
	position: relative;
	background: var(--brand-deep);
}

.hero-media {
	position: absolute;
	inset: 0;
}

.hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The photograph is a dark winter doorway; dimming it keeps the overlaid
     text above 4.5:1 regardless of how the image is cropped. */
	opacity: 0.42;
}

.hero-body {
	position: relative;
	padding-block: clamp(3.5rem, 9vw, 7rem);
	color: #fff;
}

.hero-body p {
	font-size: 1.15em;
	color: #eef4f7;
}

.hero h1 {
	max-width: 18ch;
}

.eyebrow {
	display: inline-block;
	margin-bottom: 0.75rem;
	font-size: 0.85rem;
	font-weight: 650;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #bcdcea;
}

/* --- sections and blocks --------------------------------------------------- */

section {
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

section.tinted {
	background: var(--sand);
}

.lede {
	font-size: 1.15em;
	max-width: 58ch;
}

.stack > * + * {
	margin-top: 1rem;
}

.grid {
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

.card {
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.card h3 {
	margin-top: 0;
	color: var(--brand-deep);
}

/* Blocks own their bottom padding; the last child must not add to it. Kept as
   two rules in ascending specificity order so the cascade reads top to bottom. */
blockquote > :last-child {
	margin-bottom: 0;
}

.card > :last-child {
	margin-bottom: 0;
}

.split {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

.figure {
	margin: 0;
}

.figure img {
	width: 100%;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.figure figcaption {
	margin-top: 0.6rem;
	font-size: 0.9rem;
	color: var(--ink-soft);
}

blockquote {
	margin: 0;
	padding-left: clamp(1rem, 3vw, 1.75rem);
	border-left: 4px solid var(--brand);
	font-size: 1.1em;
}

/* --- opening hours and other key/value lists ------------------------------- */

.hours {
	display: grid;
	gap: 0 1.5rem;
	grid-template-columns: auto 1fr;
	margin: 0;
}

.hours dt {
	font-weight: 600;
}

.hours dd {
	margin: 0;
	color: var(--ink-soft);
}

.hours dt:not(:first-of-type),
.hours dt:not(:first-of-type) + dd {
	margin-top: 0.5rem;
}

/* --- buttons --------------------------------------------------------------- */

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.btn {
	display: inline-block;
	padding: 0.7rem 1.4rem;
	border: 2px solid var(--brand);
	border-radius: 999px;
	background: var(--brand);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.btn:hover {
	background: var(--brand-deep);
	border-color: var(--brand-deep);
}

.btn-ghost {
	background: transparent;
	color: var(--brand-deep);
}

.btn-ghost:hover {
	background: var(--brand-tint);
	border-color: var(--brand-deep);
}

.hero .btn-ghost {
	color: #fff;
	border-color: #fff;
}

.hero .btn-ghost:hover {
	background: rgb(255 255 255 / 15%);
	border-color: #fff;
}

/* --- bank details ---------------------------------------------------------- */

.bank {
	display: grid;
	gap: 0.25rem 1.25rem;
	grid-template-columns: auto 1fr;
	padding: 1.25rem 1.5rem;
	background: var(--brand-tint);
	border-radius: var(--radius);
	margin: 0 0 1rem;
}

.bank dt {
	color: var(--ink-soft);
}

.bank dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* --- partner list ---------------------------------------------------------- */

.partner {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.partner-logo {
	width: auto;
	max-width: 10rem;
	height: auto;
	max-height: 4rem;
	object-fit: contain;
	margin-bottom: 0.25rem;
}

.partner h3 {
	margin: 0;
}

.partner .role {
	font-size: 0.9rem;
	color: var(--ink-soft);
}

/* --- footer ---------------------------------------------------------------- */

.site-footer {
	margin-top: clamp(3rem, 7vw, 5rem);
	padding-top: clamp(2.5rem, 5vw, 3.5rem);
	background: var(--sand);
	border-top: 1px solid var(--line);
	font-size: 0.95rem;
}

.footer-grid {
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}

.footer-grid h2 {
	font-size: 1rem;
	letter-spacing: 0.02em;
}

.footer-logo {
	color: var(--brand);
	width: 3.5rem;
	height: auto;
}

.footer-name {
	margin: 0.5rem 0 0;
	font-weight: 650;
}

.footer-base {
	margin-top: 2.5rem;
	padding-block: 1.25rem;
	border-top: 1px solid var(--line);
}

.footer-base p {
	margin: 0;
	font-size: 0.875rem;
}

/* --- small screens --------------------------------------------------------- */

@media (width <= 56rem) {
	/* The disclosure does its normal job here: the summary is the control and the
	   browser shows or hides the list from the open state.

	   The list drops out of the flex row and hangs below the whole header
	   instead. Left in flow it would become a narrow column beside the logo,
	   because the flex item is the <details> element, not the <nav> inside it.
	   The header is position: sticky, which makes it the containing block. */
	.nav-disclosure > nav {
		position: absolute;
		inset-inline: 0;
		top: 100%;
		padding: 0.25rem var(--gap) 0.75rem;
		background: var(--paper);
		border-bottom: 1px solid var(--line);
		box-shadow: var(--shadow);
	}

	.nav-disclosure > summary {
		display: inline-flex;
		align-items: center;
		gap: 0.55rem;
		margin-inline-start: auto;
		padding: 0.5rem 0.9rem;
		background: transparent;
		border: 1px solid var(--line);
		border-radius: 999px;
		color: inherit;
		font: inherit;
		font-weight: 600;
		cursor: pointer;

		/* Suppress the default disclosure triangle in every engine. */
		list-style: none;
	}

	.nav-disclosure > summary::-webkit-details-marker {
		display: none;
	}

	.nav-toggle-bars,
	.nav-toggle-bars::before,
	.nav-toggle-bars::after {
		display: block;
		width: 1.1rem;
		height: 2px;
		background: currentcolor;
	}

	.nav-toggle-bars {
		position: relative;
	}

	.nav-toggle-bars::before,
	.nav-toggle-bars::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.nav-toggle-bars::before {
		top: -6px;
	}

	.nav-toggle-bars::after {
		top: 6px;
	}

	.site-header nav ul {
		flex-direction: column;
		gap: 0;
		padding-block: 0.5rem;
	}

	.site-header nav a {
		padding: 0.6rem 0;
		border-bottom: 1px solid var(--line);
	}

	.site-header nav a[aria-current="page"] {
		border-bottom-color: var(--brand);
	}
}

/* Nothing on the site animates today. This is a standing guard so that anything
   added later is opted out for readers who ask for reduced motion. It carries no
   !important because every rule here is authored in this one file — if a future
   rule ever outranks it, raise that rule's specificity rather than reaching for
   !important. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
		transition-duration: 0.01ms;
		scroll-behavior: auto;
	}
}

@media print {
	.site-header,
	.skip,
	.actions {
		display: none;
	}

	body {
		font-size: 11pt;
	}
}