/**
 * Aether — Components: wiederverwendbare UI-Bausteine.
 */

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.9rem 1.6rem;
	font-size: var(--fs-200);
	font-weight: 600;
	letter-spacing: var(--tracking-mid);
	border-radius: var(--radius-pill);
	border: 1px solid transparent;
	line-height: 1;
	white-space: nowrap;
	transition: transform var(--dur-fast) var(--ease-out),
	            background var(--dur-fast) var(--ease-out),
	            color var(--dur-fast) var(--ease-out),
	            border-color var(--dur-fast) var(--ease-out),
	            box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .icon { width: 1.1em; height: 1.1em; transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .icon { transform: translateX(3px); }

.btn--accent { background: var(--color-accent); color: var(--color-on-accent); box-shadow: var(--shadow-soft); }
.btn--accent:hover { color: var(--color-on-accent); box-shadow: var(--shadow-lift); }

.btn--dark { background: var(--color-ink); color: var(--color-on-dark); }
.btn--dark:hover { color: var(--color-on-dark); }

.btn--ghost { background: transparent; border-color: var(--color-line); color: var(--color-ink); }
.btn--ghost:hover { border-color: var(--color-ink); color: var(--color-ink); }

.btn--sm { padding: 0.65rem 1.15rem; font-size: var(--fs-100); }
.btn--lg { padding: 1.05rem 2rem; font-size: var(--fs-300); }

/* =====================================================================
   HERO
   ===================================================================== */
.hero { position: relative; display: flex; align-items: center; overflow: hidden; color: var(--color-on-dark); }
.hero--full { min-height: 100svh; }
.hero--tall { min-height: 78svh; }
.hero--center { text-align: center; }
.hero--left { text-align: left; }

.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__img { width: 100%; height: 120%; object-fit: cover; }
.hero__scrim {
	position: absolute; inset: 0;
	background:
		/* weicher dunkler Pool in der Mitte, wo der Titel sitzt */
		radial-gradient(95% 62% at 50% 50%, rgba(20, 24, 22, 0.38), transparent 72%),
		/* gleichmäßiger Verlauf: oben (hinter Header) & unten dunkler */
		linear-gradient(to top, rgba(20, 24, 22, 0.6) 0%, rgba(20, 24, 22, 0.28) 34%, rgba(20, 24, 22, 0.28) 62%, rgba(20, 24, 22, 0.5) 100%);
}

.hero__inner { position: relative; padding-block: clamp(7rem, 16vh, 12rem); width: 100%; }
.hero--center .hero__inner { max-width: 40ch; margin-inline: auto; }
.hero--left .hero__inner { max-width: 22ch; }

/* Öffnungs-Status-Pill (Glas-Look über dem Hero, CI-Akzent). */
.hero__status {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin-bottom: var(--space-md);
	padding: 0.5rem 1.1rem 0.5rem 0.95rem;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.14);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.28);
	font-size: var(--fs-100);
	font-weight: 600;
	letter-spacing: var(--tracking-mid);
	text-transform: uppercase;
	color: var(--color-on-dark);
}
.hero__status-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: currentColor; flex: none; }
.hero__status--open .hero__status-dot {
	background: var(--color-accent);
	animation: status-pulse 2.4s var(--ease-inout) infinite;
}
.hero__status--closed { color: rgba(246, 241, 232, 0.82); }
.hero__status--closed .hero__status-dot { background: rgba(246, 241, 232, 0.6); }
@keyframes status-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(126, 185, 176, 0.55); }
	70%  { box-shadow: 0 0 0 0.55rem rgba(126, 185, 176, 0); }
	100% { box-shadow: 0 0 0 0 rgba(126, 185, 176, 0); }
}
@media (prefers-reduced-motion: reduce) { .hero__status--open .hero__status-dot { animation: none; } }

.hero__eyebrow { color: var(--color-on-dark); opacity: 0.9; }
.hero__title {
	font-size: var(--fs-800);
	color: var(--color-on-dark);
	margin-top: var(--space-sm);
	text-shadow: 0 2px 30px rgba(0,0,0,0.25);
}
.hero__subtitle {
	margin-top: var(--space-md);
	font-size: var(--fs-400);
	color: rgba(246, 241, 232, 0.92);
	max-width: 44ch;
}
.hero--center .hero__subtitle { margin-inline: auto; }
.hero__actions { margin-top: var(--space-lg); }

/* Scroll-Indikator */
.hero__scroll { position: absolute; left: 50%; bottom: 1.75rem; transform: translateX(-50%); display: grid; place-items: center; height: 3.5rem; }
.hero__scroll-line { width: 1px; height: 3rem; background: var(--color-on-dark); opacity: 0.7; transform-origin: top; animation: hero-scroll 2.4s var(--ease-inout) infinite; }
@keyframes hero-scroll { 0% { transform: scaleY(0); transform-origin: top; } 40% { transform: scaleY(1); transform-origin: top; } 60% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (prefers-reduced-motion: reduce) { .hero__scroll-line { animation: none; } }

/* =====================================================================
   SECTION-INTRO
   ===================================================================== */
.section-intro--center { text-align: center; }
.section-intro--center .container { display: flex; flex-direction: column; align-items: center; }
.section-intro__title { margin-top: var(--space-sm); font-size: var(--fs-700); }
.section-intro__text { margin-top: var(--space-md); font-size: var(--fs-400); color: var(--color-muted); max-width: 54ch; }
.section-intro__actions { margin-top: var(--space-lg); }

/* =====================================================================
   SPLIT (Bild | Text)
   ===================================================================== */
.split__grid { display: grid; gap: var(--space-lg); align-items: center; }
.split__media { overflow: hidden; border-radius: var(--radius-large); box-shadow: var(--shadow-soft); }
.split__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.split:hover .split__media img { transform: scale(1.03); }
.split__title { margin-top: var(--space-sm); font-size: var(--fs-600); }
.split__text { margin-top: var(--space-md); color: var(--color-muted); font-size: var(--fs-300); }
.split__text > * + * { margin-top: var(--space-sm); }
.split__actions { margin-top: var(--space-lg); }

@media (min-width: 820px) {
	.split__grid { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
	.split--reverse .split__media { order: 2; }
}

/* =====================================================================
   GALLERY / IMAGE GRID (editorial masonry)
   ===================================================================== */
.gallery__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
.gallery__item { overflow: hidden; border-radius: var(--radius-md); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.gallery__item:hover img { transform: scale(1.05); }

@media (min-width: 720px) {
	.gallery--masonry .gallery__grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; }
	.gallery--masonry .gallery__item { aspect-ratio: 1; }
	/* Bewusst asymmetrische, editoriale Anordnung */
	.gallery--masonry .gallery__item:nth-child(1) { grid-column: span 3; grid-row: span 2; }
	.gallery--masonry .gallery__item:nth-child(2) { grid-column: span 3; }
	.gallery--masonry .gallery__item:nth-child(3) { grid-column: span 3; grid-row: span 2; }
	.gallery--masonry .gallery__item:nth-child(4) { grid-column: span 2; }
	.gallery--masonry .gallery__item:nth-child(5) { grid-column: span 2; }
	.gallery--masonry .gallery__item:nth-child(6) { grid-column: span 2; }
	.gallery--masonry .gallery__item { aspect-ratio: auto; }
}

/* =====================================================================
   CTA-BAND
   ===================================================================== */
.cta { position: relative; padding-block: var(--space-2xl); text-align: center; overflow: hidden; background: var(--color-surface); }
.cta--image { color: var(--color-on-dark); }
.cta__media { position: absolute; inset: 0; z-index: 0; }
.cta__media img { width: 100%; height: 120%; object-fit: cover; }
.cta__scrim { position: absolute; inset: 0; background: rgba(20, 24, 22, 0.5); }
.cta__inner { position: relative; z-index: 1; }
.cta__title { font-size: var(--fs-700); }
.cta--image .cta__title { color: var(--color-on-dark); }
.cta__text { margin-top: var(--space-sm); font-size: var(--fs-400); color: inherit; opacity: 0.9; }
.cta__actions { margin-top: var(--space-lg); }

/* =====================================================================
   EVENTS
   ===================================================================== */
.events__head { text-align: center; margin-bottom: var(--space-lg); }
.events__title { margin-top: var(--space-xs); }
.events__grid { display: grid; gap: var(--space-md); grid-template-columns: 1fr; }
@media (min-width: 720px) { .events__grid { grid-template-columns: repeat(3, 1fr); } }

/* --- Flip-Card: Promo-Bild vorne, CI-Text hinten (Flip nur per Klick) --- */
.events__grid { align-items: start; }
.event-card { background: transparent; box-shadow: none; perspective: 1600px; }
.event-card__inner {
	position: relative;
	transform-style: preserve-3d;
	transition: transform 0.7s var(--ease-inout);
}
.event-card.is-flipped .event-card__inner { transform: rotateY(180deg); }

.event-card__front, .event-card__back {
	border-radius: var(--radius-large);
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	box-shadow: var(--shadow-soft);
}

/* Vorderseite: Promo-Bild in voller Höhe (Instagram-Format 4:5). */
.event-card__front {
	position: relative;
	aspect-ratio: 4 / 5;
	background: var(--color-surface);
}
.event-card__media { position: absolute; inset: 0; margin: 0; }
.event-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Dezenter Verlauf + „Mehr"-Pill unten — verdeckt das Motiv nicht. */
.event-card__scrim {
	position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
	background: linear-gradient(to top, rgba(20, 24, 22, 0.42), transparent);
	pointer-events: none;
}
.event-card__more {
	position: absolute; bottom: var(--space-sm); left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: inline-flex; align-items: center; gap: 0.4rem;
	padding: 0.55rem 1.3rem;
	border-radius: var(--radius-pill);
	background: var(--glass-bg);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	color: var(--color-ink);
	font-weight: 600; font-size: var(--fs-200);
	box-shadow: var(--shadow-soft);
	transition: transform var(--dur-fast) var(--ease-out);
}
.event-card__more:hover { transform: translateX(-50%) translateY(-2px); }
.event-card__more .icon { width: 1em; height: 1em; }

/* Rückseite: Text auf warmem CI-Hintergrund. */
.event-card__back {
	position: absolute;
	inset: 0;
	transform: rotateY(180deg);
	background: linear-gradient(160deg, var(--color-surface), var(--color-sand));
	color: var(--color-ink);
	display: flex;
}
.event-card__back-inner { margin: auto; padding: var(--space-lg) var(--space-md); width: 100%; }
.event-card__back-eyebrow { color: var(--color-accent-ink); }
.event-card__back .event-card__title { color: var(--color-ink); margin-top: 0.35rem; font-size: var(--fs-500); }
.event-card__back-text { margin-top: var(--space-sm); color: var(--color-muted); font-size: var(--fs-200); line-height: 1.7; }
.event-card__back-text > * + * { margin-top: 0.5rem; }
.event-card__back-btn {
	margin-top: var(--space-md);
	display: inline-flex; align-items: center; gap: 0.4rem;
	font-weight: 600; font-size: var(--fs-200); color: var(--color-accent-ink);
}
.event-card__back-icon { width: 1em; height: 1em; transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) { .event-card__inner { transition: none; } }

/* =====================================================================
   FAQ / ACCORDION (native <details>)
   ===================================================================== */
.faq__title { text-align: center; margin-top: var(--space-xs); margin-bottom: var(--space-lg); }
.faq__list { border-top: 1px solid var(--color-line); }
.faq__item { border-bottom: 1px solid var(--color-line); }
.faq__question {
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
	padding: var(--space-md) 0;
	font-family: var(--font-serif); font-size: var(--fs-500); font-weight: 500;
	cursor: pointer; list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__icon { flex: none; transition: transform var(--dur-mid) var(--ease-out); color: var(--color-accent-ink); }
.faq__item[open] .faq__icon { transform: rotate(135deg); }
.faq__answer { padding-bottom: var(--space-md); color: var(--color-muted); max-width: 62ch; }
.faq__answer > * + * { margin-top: var(--space-xs); }

/* =====================================================================
   RESERVIERUNG + FORMULARE
   ===================================================================== */
.reservation__grid { display: grid; gap: var(--space-lg); align-items: center; }
.reservation__grid--media { }
.reservation__media { overflow: hidden; border-radius: var(--radius-large); box-shadow: var(--shadow-soft); }
.reservation__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.reservation__title { margin-top: var(--space-sm); font-size: var(--fs-600); }
.reservation__text { margin-top: var(--space-sm); color: var(--color-muted); max-width: 46ch; }

@media (min-width: 900px) {
	.reservation__grid--media { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-2xl); }
}

.reservation-form { position: relative; margin-top: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); }
.reservation-form__row { display: grid; gap: var(--space-sm); grid-template-columns: 1fr; }
@media (min-width: 560px) { .reservation-form__row { grid-template-columns: 1fr 1fr; } }
/* Honeypot unsichtbar OHNE das Layout seitlich aufzuschieben (kein left:-9999px → kein Mobile-Overflow). */
.reservation-form__hp { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field__label { font-size: var(--fs-100); font-weight: 600; letter-spacing: var(--tracking-mid); color: var(--color-muted); text-transform: uppercase; }
.field input, .field textarea, .field select {
	width: 100%;
	padding: 0.85rem 1rem;
	background: var(--color-white);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sm);
	transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field input:focus, .field textarea:focus, .field select:focus {
	outline: none; border-color: var(--color-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 25%, transparent);
}
/* Selects: eigener Pfeil in CI statt Browser-Default. */
.field select {
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c2a25' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 1.1rem;
	padding-right: 2.75rem;
	cursor: pointer;
}

/* Datum & Uhrzeit: modern, voll antippbar. Am Handy öffnet der Tap das native
   Rad („Mühle", Uhrzeit) bzw. den nativen Kalender (Datum). */
.field input[type="date"],
.field input[type="time"] { cursor: pointer; min-height: 3.15rem; }
.field input[type="date"]::-webkit-calendar-picker-indicator,
.field input[type="time"]::-webkit-calendar-picker-indicator {
	width: 1.15rem;
	height: 1.15rem;
	cursor: pointer;
	opacity: 0.7;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: opacity var(--dur-fast) var(--ease-out);
}
.field input[type="date"]:hover::-webkit-calendar-picker-indicator,
.field input[type="time"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
/* Eigene Icons in CI (dunkles Türkis). */
.field input[type="date"]::-webkit-calendar-picker-indicator {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23244f49' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
}
.field input[type="time"]::-webkit-calendar-picker-indicator {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23244f49' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

.reservation-form__hint { margin-top: 0.75rem; font-size: var(--fs-100); color: var(--color-muted); }

/* Kleine graue Klausel unten in der Sektion (z. B. 24-Std.-Vorlauf). */
.reservation__clause { margin: var(--space-lg) auto 0; max-width: 62ch; text-align: center; font-size: var(--fs-100); line-height: var(--lh-snug); color: var(--color-muted); }

.field--check { flex-direction: row; align-items: flex-start; gap: 0.6rem; }
.field--check input { width: auto; margin-top: 0.25rem; accent-color: var(--color-accent); }
.field--check span { font-size: var(--fs-200); color: var(--color-muted); }

.form-note { padding: 0.85rem 1.1rem; border-radius: var(--radius-sm); font-size: var(--fs-200); margin-top: var(--space-sm); }
.form-note--ok { background: color-mix(in srgb, var(--color-accent) 18%, var(--color-white)); color: var(--color-accent-ink); }
.form-note--error { background: color-mix(in srgb, #c0574f 15%, var(--color-white)); color: #8a352e; }

/* =====================================================================
   INSTAGRAM
   ===================================================================== */
.instagram__head { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: flex-end; justify-content: space-between; margin-bottom: var(--space-lg); }
.instagram__title { margin-top: var(--space-xs); }
.instagram__handle { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--color-accent-ink); }
.instagram__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
@media (min-width: 640px) { .instagram__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .instagram__grid { grid-template-columns: repeat(6, 1fr); } }
.instagram__tile { position: relative; aspect-ratio: 1; overflow: hidden; }
.instagram__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.instagram__tile-overlay { position: absolute; inset: 0; display: grid; place-items: center; color: var(--color-on-dark); background: rgba(20, 24, 22, 0.35); opacity: 0; transition: opacity var(--dur-mid) var(--ease-out); }
.instagram__tile:hover img { transform: scale(1.08); }
.instagram__tile:hover .instagram__tile-overlay { opacity: 1; }
.instagram__empty { color: var(--color-muted); }
.instagram__empty a { color: var(--color-accent-ink); text-decoration: underline; text-underline-offset: 0.2em; }

/* =====================================================================
   MAP / ANFAHRT
   ===================================================================== */
.map__grid { display: grid; gap: var(--space-lg); align-items: center; }
.map__title { margin-top: var(--space-xs); }
.map__address { margin-top: var(--space-sm); color: var(--color-ink); font-size: var(--fs-400); font-family: var(--font-serif); }
.map__hours { margin-top: 0.35rem; color: var(--color-muted); }
.map__body .btn { margin-top: var(--space-md); }

/* Interaktive Karte */
.map__figure {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-large);
	box-shadow: var(--shadow-soft);
	background: var(--color-surface);
	min-height: 380px;
}
.map__canvas { position: absolute; inset: 0; height: 100%; width: 100%; z-index: 1; background: var(--color-surface); }
/* Google-Maps-iframe (nach Klick eingefügt) */
.map__iframe { display: block; width: 100%; height: 100%; border: 0; }
/* OSM-Kacheln dezent auf die CI getönt (Legacy, falls Leaflet genutzt wird) */
.map__canvas img.leaflet-tile { filter: grayscale(0.28) sepia(0.12) saturate(0.9) brightness(1.03) contrast(0.98); }
.map__canvas .leaflet-control-attribution { background: rgba(250, 247, 241, 0.8); font-size: 10px; color: var(--color-muted); }
.map__canvas .leaflet-control-attribution a { color: var(--color-accent-ink); }
.map__canvas .leaflet-bar a { color: var(--color-ink); border-color: var(--color-line); }

/* Klick-zum-Laden-Overlay */
.map__load {
	position: absolute; inset: 0; z-index: 2;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 0.6rem; padding: var(--space-md); text-align: center;
	cursor: pointer;
	color: var(--color-ink);
	background:
		radial-gradient(120% 90% at 50% 20%, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 60%),
		linear-gradient(160deg, var(--color-surface), var(--color-sand));
	transition: opacity var(--dur-mid) var(--ease-out);
}
.map__figure.is-loaded .map__load { opacity: 0; visibility: hidden; }
.map__load-pin { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--color-white); color: var(--color-accent-ink); box-shadow: var(--shadow-soft); }
.map__load-pin .icon { width: 1.6rem; height: 1.6rem; }
.map__load-text { font-family: var(--font-serif); font-size: var(--fs-500); }
.map__load-note { font-size: var(--fs-100); color: var(--color-muted); max-width: 30ch; }

/* Marker in CI (Tropfenform) */
.map-marker__pin {
	display: block; width: 22px; height: 22px;
	background: var(--color-accent);
	border: 3px solid #fff;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	box-shadow: 0 3px 8px rgba(20, 24, 22, 0.35);
}

@media (min-width: 820px) { .map__grid { grid-template-columns: 1fr 1.25fr; gap: var(--space-2xl); } }

/* =====================================================================
   POST-CARD / ARTICLE / SEARCH
   ===================================================================== */
.post-card__media { overflow: hidden; border-radius: var(--radius-md); margin-bottom: var(--space-sm); }
.post-card__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__title { margin-top: 0.35rem; font-size: var(--fs-500); }
.post-card__excerpt { margin-top: 0.5rem; color: var(--color-muted); font-size: var(--fs-200); }
.post-card__more { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: var(--space-sm); font-weight: 600; font-size: var(--fs-200); color: var(--color-accent-ink); }
.post-card__more .icon { width: 1em; height: 1em; }

.page-hero__title { font-family: var(--font-serif); }
.page-article__media, .single-article__media { max-width: var(--container-wide); margin: var(--space-lg) auto 0; border-radius: 0; }
.page-article__media img, .single-article__media img { width: 100%; max-height: 70vh; object-fit: cover; }

.single-article__head { padding-top: clamp(6rem, 12vw, 9rem); text-align: center; }
.single-article__meta { display: flex; align-items: center; justify-content: center; gap: 0.6rem; color: var(--color-muted); font-size: var(--fs-100); text-transform: uppercase; letter-spacing: var(--tracking-mid); }
.single-article__title { margin-top: var(--space-sm); font-size: var(--fs-700); }
.single-article__tags { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: 0.5rem; }
.single-article__tags a { padding: 0.35rem 0.85rem; border: 1px solid var(--color-line); border-radius: var(--radius-pill); font-size: var(--fs-100); }

.post-navigation { display: flex; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-line); }
.post-navigation .nav-previous, .post-navigation .nav-next { max-width: 45%; }
.post-navigation .nav-next { text-align: right; margin-left: auto; }
.post-nav__title { display: block; font-family: var(--font-serif); font-size: var(--fs-400); margin-top: 0.25rem; }

.search-form { display: flex; gap: 0.5rem; }
.search-form__field { flex: 1; padding: 0.85rem 1rem; border: 1px solid var(--color-line); border-radius: var(--radius-pill); background: var(--color-white); }
.search-form__field:focus { outline: none; border-color: var(--color-accent); }

.no-results { text-align: center; padding-block: var(--space-xl); }
.no-results__title { font-size: var(--fs-600); }
.no-results p { margin-top: var(--space-sm); color: var(--color-muted); }
.no-results .search-form { max-width: 420px; margin: var(--space-md) auto 0; }

/* =====================================================================
   COMMENTS
   ===================================================================== */
.comments { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-line); }
.comments__title { font-size: var(--fs-500); margin-bottom: var(--space-md); }
.comment-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-md); }
.comment-list .children { list-style: none; padding-left: var(--space-md); margin-top: var(--space-md); }
.comment-form { margin-top: var(--space-lg); display: grid; gap: var(--space-sm); }
.comment-form input:not([type="submit"]), .comment-form textarea { width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-white); }
.comment-form .submit { justify-self: start; padding: 0.9rem 1.6rem; background: var(--color-ink); color: var(--color-on-dark); border-radius: var(--radius-pill); font-weight: 600; }

/* =====================================================================
   KARTEN-HIGHLIGHTS (Line-Art, zweispaltig Speisen ↔ Getränke)
   ===================================================================== */
.menu-taste__head { text-align: center; margin-bottom: var(--space-lg); }
.menu-taste__title { margin-top: var(--space-xs); }

.menu-taste__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
	max-width: 880px;
	margin-inline: auto;
}
.menu-taste__label {
	font-family: var(--font-sans);
	font-size: var(--fs-100);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-accent-ink);
	text-align: center;
	margin-bottom: var(--space-sm);
}
.taste-list { list-style: none; padding: 0; }
.taste__item {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--color-line);
}
.taste__item:last-child { border-bottom: 0; }
.taste__icon { width: 2.5rem; height: 2.5rem; flex: none; color: var(--color-accent); }
.taste__name { flex: 1; font-family: var(--font-serif); font-size: var(--fs-400); }
.taste__price { color: var(--color-muted); font-size: var(--fs-200); font-variant-numeric: tabular-nums; }

.menu-taste__cta { text-align: center; margin-top: var(--space-xl); }

@media (min-width: 760px) {
	.menu-taste__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-2xl);
		position: relative;
	}
	/* feine Mittellinie (CI-Detail) */
	.menu-taste__grid::before {
		content: "";
		position: absolute;
		top: 0.5rem; bottom: 0.5rem; left: 50%;
		width: 1px;
		background: var(--color-line);
	}
}

/* =====================================================================
   SPEISEKARTEN-MODAL (fancy PDF-Overlay)
   ===================================================================== */
.menu-modal {
	position: fixed;
	inset: 0;
	z-index: var(--z-overlay);
	display: grid;
	place-items: center;
	padding: clamp(1rem, 4vw, 3rem);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s var(--ease-out), visibility 0.4s;
}
.menu-modal[hidden] { display: grid; } /* Animation über .is-open, nicht display */
.menu-modal.is-open { opacity: 1; visibility: visible; }

.menu-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 24, 22, 0.55);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.menu-modal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(1100px, 100%);
	height: min(92vh, 100%);
	background: var(--color-surface);
	border-radius: var(--radius-large);
	overflow: hidden;
	box-shadow: var(--shadow-lift);
	transform: translateY(28px) scale(0.965);
	opacity: 0;
	transition: transform 0.5s var(--ease-out), opacity 0.5s var(--ease-out);
}
.menu-modal.is-open .menu-modal__panel { transform: none; opacity: 1; }

/* Kopfleiste: Tabs (2 PDFs) oder Titel (1 PDF) + Schließen. */
.menu-modal__bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.75rem;
	padding: 0.65rem 3.5rem;
	background: var(--color-background);
	border-bottom: 1px solid var(--color-line);
}
.menu-modal__title {
	font-family: var(--font-serif);
	font-size: var(--fs-500);
}
.menu-modal__tabs { display: flex; gap: 0.4rem; }
.menu-modal__tab {
	padding: 0.5rem 1.15rem;
	border-radius: var(--radius-pill);
	font-size: var(--fs-200);
	font-weight: 600;
	letter-spacing: var(--tracking-mid);
	color: var(--color-muted);
	transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.menu-modal__tab:hover { color: var(--color-ink); }
.menu-modal__tab.is-active { background: var(--color-ink); color: var(--color-on-dark); }

.menu-modal__frame { flex: 1 1 auto; min-height: 0; width: 100%; border: 0; background: var(--color-surface); }

.menu-modal__close {
	position: absolute;
	top: 50%;
	right: 0.7rem;
	transform: translateY(-50%);
	width: 2.5rem;
	height: 2.5rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: var(--color-ink);
	transition: background var(--dur-fast) var(--ease-out);
}
.menu-modal__close:hover { background: var(--color-sand); }
.menu-modal__close .icon { width: 1.2rem; height: 1.2rem; }

.menu-modal__fallback {
	position: absolute;
	bottom: 0.7rem;
	right: 1rem;
	font-size: var(--fs-100);
	color: var(--color-muted);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Mobil-Ansicht: statt iframe (rendert am Handy nur Seite 1) native „öffnen"-Buttons. */
.menu-modal__mobile { display: none; }

@media (max-width: 700px) {
	.menu-modal__panel { height: auto; max-height: 88vh; }
	.menu-modal__frame,
	.menu-modal__fallback,
	.menu-modal__tabs { display: none; }
	.menu-modal__mobile {
		display: flex;
		flex-direction: column;
		gap: 0.9rem;
		padding: clamp(1.75rem, 7vw, 2.75rem);
		text-align: center;
	}
	.menu-modal__mobile .btn { width: 100%; }
	.menu-modal__hint {
		font-size: var(--fs-100);
		color: var(--color-muted);
		margin-top: 0.15rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.menu-modal, .menu-modal__panel { transition: none; }
}

/* Error-404 */
.error-404 { text-align: center; padding-block: clamp(8rem, 18vw, 12rem); }
.error-404__title { font-size: var(--fs-800); margin-top: var(--space-sm); }
.error-404__text { margin-top: var(--space-md); color: var(--color-muted); }
.error-404 .btn { margin-top: var(--space-lg); }