/* ============================================================
   Servus zur Mühle — Stylesheet
   Ruhiger, editorialer Look · warme Serif · erdiges Braun (Mühlrad-Holz)
   ============================================================ */

:root {
  --bg: #faf7f1;          /* helles, luftiges Warmweiß – wie die weißen Wände im Haus */
  --bg-warm: #f0e9dc;     /* sparsam für abgesetzte Flächen */
  --bg-soft: #e7ddcd;
  --ink: #2a1c0c;         /* tiefes Walnussbraun statt reinem Schwarz – wärmer, edler */
  --ink-soft: #4b3a26;    /* Fließtext: dezent bräunlich, weicher als Anthrazit */
  --muted: #8a7660;       /* Labels/Sekundärtext: warmer Braunton */
  --brown: #5c493b;       /* Mühlrad-Holzton aus dem Logo – warm, entsättigt */
  --brown-soft: #a3856e;
  --accent: #745c4a;      /* Akzentbraun direkt aus dem Logo-Holz, edel & ruhig */
  --accent-soft: #a58871; /* helles Logo-Holz – Akzent auf dunklen Flächen */
  --accent-deep: #5a4531; /* tiefer Logo-Holzton – Akzent in Überschriften auf hellem Grund */
  --dark: #2a2017;
  --dark-deep: #1c150e;
  --line: rgba(40, 28, 16, 0.13);
  --line-light: rgba(255, 255, 255, 0.16);

  --display: "Playfair Display", "Times New Roman", Georgia, serif;
  --serif: var(--display);
  --script: "Italianno", cursive;
  --sans: "EB Garamond", Georgia, "Times New Roman", serif;
  --mono: "Cutive Mono", ui-monospace, "Courier New", monospace;

  --container: 1240px;
  --header-h: 84px;
  /* iOS-Statusleiste / Notch: füllt die Headerfläche bis ganz oben,
     damit im Handymodus oben keine freie Fläche entsteht. Auf Geräten
     ohne Safe-Area ist der Wert 0 — Desktop bleibt unverändert. */
  --safe-top: env(safe-area-inset-top, 0px);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  position: relative;
  overflow-x: hidden;
}

/* Feine Papier-/Korn-Textur über der ganzen Seite (sehr subtil) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .25s ease, opacity .25s ease; }
a:hover { color: var(--accent); }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--display);
  /* Playfair Display: edler, kontrastreicher Didone-Charakter wie gewünscht,
     aber mit kräftigeren Strichen als Bodoni — dadurch klar lesbar. */
  font-weight: 500;
  font-variation-settings: "wght" 500;
  line-height: 1.12;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0;
  font-optical-sizing: auto;
  font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "swsh" 1;
}
h1 { font-size: clamp(4rem, 11vw, 9rem); }
h2 { font-size: clamp(2.6rem, 5.2vw, 4.6rem); line-height: 1.06; }
h3 { font-size: clamp(2rem, 3.4vw, 3rem); }
em, .serif-italic { font-style: italic; color: var(--accent); font-weight: 500; }
/* Überschriften auf hellem Grund: tieferes, edleres Walnussbraun für mehr Kontrast.
   Dunkle Abschnitte (.hero, .ueber-uns .dark-title, .feiern-title) behalten ihr helles
   Karamell/Weiß über höhere Spezifität. */
h1 em, h2 em, h3 em, h4 em { color: var(--accent-deep); }

p { margin: 0 0 1em; color: var(--ink-soft); }
/* Mediävalziffern für editorialen Look in Fließtext */
p, .info-item p, .footer-col p { font-feature-settings: "kern" 1, "liga" 1, "onum" 1; }

::selection { background: var(--accent); color: #fff; }

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

/* ---------- Kapitel-Label ---------- */
.kapitel,
.kapitel-gold {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brown);
  font-weight: 400;
  margin-bottom: 24px;
}
/* feine Gold-Linie vor dem Label — erscheint mit der Eltern-Einblendung */
.kapitel::before,
.kapitel-gold::before {
  content: "";
  width: 32px;
  height: 1px;
  background: currentColor;
  opacity: 0.75;
  flex-shrink: 0;
}
.kapitel.light { color: var(--accent-soft); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 28px;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(.2,.7,.3,1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.btn-primary {
  background: var(--brown);
  color: #fff;
  box-shadow: 0 12px 30px -12px rgba(58, 40, 22, 0.5);
}
.btn-primary:hover {
  background: #553a22;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -12px rgba(58, 40, 22, 0.62);
}

.btn-ghost {
  border-color: var(--line);
  color: var(--ink);
  background: transparent;
  padding: 11px 20px;
}
.btn-ghost:hover { border-color: var(--brown); color: var(--brown); }

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

.btn-outline {
  border-color: var(--brown-soft);
  color: var(--brown-soft);
  padding: 15px 30px;
}
.btn-outline:hover {
  background: var(--brown);
  color: #fff;
  border-color: var(--brown);
  transform: translateY(-2px);
}

/* Pfeil, der beim Hover sanft nach rechts gleitet */
.btn-arrow {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(.2,.7,.3,1);
}
.btn:hover .btn-arrow { transform: translateX(5px); }


/* ============ HEADER ============ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: calc(var(--header-h) + var(--safe-top));
  padding-top: var(--safe-top);
  background: rgba(243, 239, 230, 0);
  transition: background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
  color: #fff;
}
.site-header.scrolled {
  background: rgba(243, 239, 230, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
  color: var(--ink);
}
/* Dezenter dunkler Verlauf hinter der Headerleiste im Hero —
   hält Logo, Navigation und Button über hellen Bildbereichen lesbar.
   Auf den Creme-Sections (gescrollt) blendet er aus. */
.site-header::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 150px;
  background: linear-gradient(180deg, rgba(15, 10, 6, 0.62) 0%, rgba(15, 10, 6, 0.28) 46%, rgba(15, 10, 6, 0) 100%);
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.35s ease;
}
.site-header.scrolled::before { opacity: 0; }
.header-inner {
  height: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
}
.brand-logo {
  height: 46px;
  width: auto;
  display: block;
  flex-shrink: 0;
  transition: transform 0.5s cubic-bezier(.2,.7,.3,1);
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.35));
}
.site-header.scrolled .brand-logo { filter: none; }
.brand:hover .brand-logo { transform: rotate(-4deg) scale(1.04); }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.005em;
  font-style: italic;
}
.brand-sub {
  font-size: 9px;
  letter-spacing: 0.32em;
  margin-top: 5px;
  opacity: 0.7;
  font-weight: 500;
}

.primary-nav {
  display: flex;
  gap: 28px;
  justify-content: center;
}
/* Schublade-Meta (Öffnungszeiten) nur im mobilen Menü, nicht in der Desktop-Leiste */
.nav-meta { display: none; }
.primary-nav a {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  position: relative;
  padding: 4px 0;
}
.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.primary-nav a:hover::after { transform: scaleX(1); }
/* Aktiver Zustand beim Scrollen — markiert die aktuelle Section */
.primary-nav a.active { color: var(--accent); }
.primary-nav a.active::after { transform: scaleX(1); }

.reserve-btn {
  justify-self: end;
}
/* Über dem Hero (Header transparent) ist der dunkle Ghost-Button kaum lesbar —
   hell umschalten, passend zu den weißen Navi-Links. Gescrollt (Creme-Header)
   greift wieder die dunkle Standardvariante. */
.site-header:not(.scrolled) .reserve-btn {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}
.site-header:not(.scrolled) .reserve-btn:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.menu-toggle {
  display: none;
  background: transparent;
  border: 0;
  width: 44px; height: 44px;
  padding: 0;
  justify-self: end;
  position: relative;
  z-index: 60;
  /* Über dem Hero (heller Bildbereich) bleibt das Icon durch einen feinen Schatten lesbar */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.site-header.scrolled .menu-toggle { filter: none; }
/* Kein klobiger Default-Fokusrahmen beim Antippen; feiner Ring nur für Tastatur */
.menu-toggle:focus { outline: none; }
.menu-toggle:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.menu-toggle span {
  position: absolute;
  left: 50%;
  width: 19px; height: 1.3px;
  background: currentColor;
  border-radius: 2px;
  transform: translateX(-50%);
  transition: transform 0.38s cubic-bezier(.2,.7,.3,1), opacity 0.2s ease, top 0.38s cubic-bezier(.2,.7,.3,1);
}
.menu-toggle span:nth-child(1) { top: 16px; }
.menu-toggle span:nth-child(2) { top: 21px; }
.menu-toggle span:nth-child(3) { top: 26px; }
/* offener Zustand: die drei Striche werden zum X */
.menu-toggle.open span:nth-child(1) { top: 21px; transform: translateX(-50%) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; transform: translateX(-50%) scaleX(0.4); }
.menu-toggle.open span:nth-child(3) { top: 21px; transform: translateX(-50%) rotate(-45deg); }

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: 140px 0 100px;
  overflow: hidden;
  color: #fff;
}
.hero-image {
  position: absolute; inset: 0;
  background-image: url('hero.webp?v=20260702h');
  background-size: cover;
  /* Zentriert: zeigt auf Laptop/Desktop nahezu das ganze 3:2-Motiv (Dachfirst
     bis Wasser). Ruhezustand bei scale(1.0) ohne Hochskalierung – maximale
     Bildschärfe und minimaler Cover-Beschnitt. */
  background-position: center 50%;
  z-index: 0;
  transform: scale(1);
  animation: kenburns 24s ease-out forwards;
  will-change: transform;
}
/* Handy: kleineres, leichteres Hero-Bild (schnelleres Laden) */
@media (max-width: 767px) {
  .hero-image { background-image: url('hero-mobile.webp?v=20260702h'); }
}
@keyframes kenburns {
  0%   { transform: scale(1.06) translateY(-1%); }
  100% { transform: scale(1) translateY(0); }
}
.hero-overlay {
  position: absolute; inset: 0;
  background:
    /* Vertikal: oben klar fürs Gebäude, unten kräftiger Verlauf für Textkontrast */
    linear-gradient(180deg, rgba(15,10,6,0) 0%, rgba(15,10,6,0) 38%, rgba(15,10,6,0.30) 60%, rgba(15,10,6,0.60) 81%, rgba(15,10,6,0.82) 100%),
    /* Links: dezenter Scrim unter dem linksbündigen Text, läuft zur Bildmitte aus */
    linear-gradient(90deg, rgba(15,10,6,0.5) 0%, rgba(15,10,6,0.16) 42%, rgba(15,10,6,0) 70%);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
}
/* Gestaffelter Auftritt der Hero-Elemente */
.hero-content > * {
  opacity: 0;
  transform: translateY(26px);
  animation: heroRise 1.1s cubic-bezier(.16,.84,.28,1) forwards;
}
.hero-content > .kapitel    { animation-delay: 0.35s; }
.hero-content > h1          { animation-delay: 0.5s; }
.hero-content > .hero-sub   { animation-delay: 0.72s; }
.hero-content > .hero-actions { animation-delay: 0.9s; }
@keyframes heroRise {
  to { opacity: 1; transform: none; }
}
.hero .kapitel {
  color: #fff;
  margin-bottom: 18px;
  /* Mehrlagiger Schatten: eine dunkle Halo-Lage (0 0) hebt die weiße Schrift
     über HELLEN Bildstellen ab (weiße Fassade), zwei enge Lagen geben knackige
     Kanten direkt am Buchstaben, eine weiche Lage trägt den Gesamtkontrast.
     Hebt die Lesbarkeit deutlich, ohne das Foto abzudunkeln oder die Schrift
     fetter wirken zu lassen. */
  text-shadow:
    0 0 4px rgba(10, 6, 3, 0.55),
    0 1px 1px rgba(10, 6, 3, 0.92),
    0 1px 3px rgba(10, 6, 3, 0.78),
    0 2px 16px rgba(10, 6, 3, 0.55);
}
.hero h1 {
  color: #fff;
  /* Kräftiger Schnitt, damit die Schrift auch über dem Foto klar lesbar
     bleibt; Schatten gibt zusätzlichen Kontrast. */
  font-weight: 600;
  font-variation-settings: "wght" 600;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 28px rgba(10, 6, 3, 0.55), 0 1px 3px rgba(10, 6, 3, 0.4);
  margin-bottom: 8px;
  /* Etwas zurückgenommen (vorher bis 10rem): wirkt editorialer und gibt das
     Wasserrad über der untenbündigen Überschrift frei. */
  font-size: clamp(4rem, 9.5vw, 8rem);
  line-height: 0.94;
}
.hero h1 em {
  color: #fff;
  font-style: italic;
}
.hero-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  color: rgba(255,255,255,0.92);
  margin: 8px 0 28px;
  text-shadow: 0 1px 14px rgba(10, 6, 3, 0.5);
}
.hero-actions {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
}
/* Hero-CTA bewusst zurückhaltend: zarter Glas-Button statt massivem Braunblock,
   damit er sich ins Bild einfügt statt im Auge zu stören (Desktop wie Handy) */
.hero .btn-primary {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero .btn-primary:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: none;
}
.hero .btn-link {
  color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.6);
}
.hero .btn-link:hover {
  color: var(--brown-soft);
  border-color: var(--brown-soft);
}
/* ============ SECTION HELPERS ============ */
section { padding: 130px 0; }
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  margin: 0 auto;
  width: 80%;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: flex-start;
}
.section-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 32px;
  margin-bottom: 64px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.section-head .kapitel { margin-bottom: 4px; }
.section-head h2 {
  margin: 0;
  font-size: clamp(2.4rem, 4.6vw, 3.8rem);
}
.section-head .count {
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--accent);
  font-style: italic;
  padding-bottom: 4px;
}
.section-intro {
  max-width: 640px;
  margin: 0 0 90px;
  text-align: left;
}
.section-intro h2 { margin: 10px 0 22px; }
.section-intro p { color: var(--ink-soft); max-width: 460px; }

/* ============ ANKOMMEN ============ */
/* Kompakter + bewusster Weißraum: eine feine vertikale Haarlinie zwischen den
   Spalten gibt dem reinen Text-Intro Struktur — statt zwei frei schwebender
   Blöcke in einem leeren Feld. */
.ankommen { padding: 92px 0; position: relative; overflow: hidden; }
/* Feine Mühlrad-Zeichnung als ruhiges Wasserzeichen in der unteren linken Ecke.
   „multiply" lässt das Weiß der Zeichnung weg — nur die braunen Linien bleiben. */
.ankommen::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -2.5%;
  bottom: -6%;
  width: min(560px, 48%);
  aspect-ratio: 1000 / 750;
  background: url("bilder/skizze-wasserrad.webp") no-repeat left bottom / contain;
  mix-blend-mode: multiply;
  opacity: 0.62;
  pointer-events: none;
}
.ankommen .two-col {
  align-items: start;
  position: relative;
  z-index: 1;
}
.ankommen .two-col::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(101, 63, 28, 0.32) 8%, rgba(101, 63, 28, 0.32) 92%, transparent);
}
.ankommen h2 {
  font-size: clamp(2.6rem, 4.8vw, 4rem);
  line-height: 1.05;
}
/* Rechte Spalte an der ersten Zeile der Überschrift andocken statt am Label:
   um die Label-Höhe (11px Zeile + 24px Abstand) nach unten versetzen, damit der
   Fließtext optisch zur Headline gehört und nicht frei darüber schwebt. */
.ankommen .col-right { padding-top: 35px; }
.ankommen .col-right p {
  font-size: 1.02rem;
  line-height: 1.78;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.ankommen .col-right p + p { margin-top: 1.1rem; }
.ankommen .dropcap::first-letter {
  font-family: var(--display);
  font-size: 3.7rem;
  float: left;
  line-height: 0.78;
  padding: 6px 13px 0 0;
  color: var(--accent);
  font-style: italic;
  font-weight: 500;
}

/* ============ EINBLICKE — BILD/TEXT-REIHEN ============ */
.editorial { padding: 30px 0 88px; }

.ed-row {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
  margin-bottom: clamp(72px, 10vw, 150px);
}
.ed-row:last-child { margin-bottom: 0; }
.ed-row.reverse { grid-template-columns: 0.88fr 1.12fr; }
.ed-row.reverse .ed-media { order: 2; }
.ed-row.reverse .ed-text  { order: 1; }

.ed-media {
  position: relative;
  margin: 0;
  border-radius: 8px;
}
.ed-media img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  box-shadow: 0 30px 70px -32px rgba(28, 24, 18, 0.6);
  transition: transform 1.4s cubic-bezier(.2,.7,.3,1);
}
/* edle Eck-Umrandung: offener Winkel an der unteren Außenkante – kein Rahmen ums ganze Bild */
.ed-media::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: -16px;
  bottom: -16px;
  width: 66%;
  height: 72%;
  border-left: 1px solid rgba(101, 63, 28, 0.5);
  border-bottom: 1px solid rgba(101, 63, 28, 0.5);
  border-bottom-left-radius: 12px;
  pointer-events: none;
}
.ed-row.reverse .ed-media::after {
  left: auto;
  right: -16px;
  border-left: 0;
  border-right: 1px solid rgba(101, 63, 28, 0.5);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 12px;
}
/* dezenter Zoom nur an Geräten mit echtem Hover – auf dem Handy kein „Aufpoppen" */
@media (hover: hover) {
  .ed-row:hover .ed-media img { transform: scale(1.025); }
}

.ed-text h1,
.ed-text h2,
.ed-text h3 {
  font-size: clamp(2rem, 3.8vw, 3.3rem);
  line-height: 1.06;
  margin: 4px 0 22px;
}
/* feiner dunkelbrauner Editorial-Strich über jeder Überschrift */
.ed-text h1::before,
.ed-text h2::before,
.ed-text h3::before {
  content: "";
  display: block;
  width: 44px;
  height: 1px;
  margin-bottom: 22px;
  background: var(--accent-deep);
  opacity: 0.7;
}
/* Über-uns nutzt diese Reihen mit Eyebrow (.kapitel) statt Strich – dann den Strich weglassen */
.ed-text .kapitel + h1::before,
.ed-text .kapitel + h2::before,
.ed-text .kapitel + h3::before { display: none; }
.ed-text p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--ink-soft);
  max-width: 420px;
}
/* Über-uns: dieselben Bild/Text-Reihen, nur etwas mehr Luft nach oben (kein Seitenkopf davor) */
.ueber-editorial { padding-top: clamp(48px, 8vw, 110px); }

/* Homepage-Einblicke etwas kompakter: weniger Weißraum zwischen den Reihen und
   zwischen Bild und Text, Bilder im nativen 3:2 (flacher → weniger Luft um den
   Text), und weniger Abstand von der letzten Reihe hinunter zum Leitsatz.
   STRENG nur auf die Startseiten-Section gescoped: die einzige .editorial, auf
   die direkt der .leitsatz folgt. Wichtig, weil die Über-uns-Seite ebenfalls
   .editorial nutzt (mit Hochformat-Bildern) und unberührt bleiben muss. */
.editorial:has(+ .leitsatz) .ed-row { gap: clamp(30px, 4.2vw, 64px); margin-bottom: clamp(56px, 6.8vw, 100px); }
.editorial:has(+ .leitsatz) .ed-row:last-child { margin-bottom: 0; }
.editorial:has(+ .leitsatz) .ed-media img { aspect-ratio: 3 / 2; }
/* letzte Reihe sitzt schon dicht über dem Leitsatz – kein dickes Section-Polster mehr */
.editorial:has(+ .leitsatz) { padding-bottom: 44px; }

/* ============ ÜBER UNS — HERO: OPEN-Foto als Hauptbild, Mühlrad dezent im Hintergrund ============ */
.ueber-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(60px, 9vw, 128px) 0 clamp(40px, 6vw, 90px);
}
/* Die Federzeichnung liegt nur als leises Wasserzeichen hinter dem Text */
.uh-bg {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: -3%;
  transform: translateY(-50%);
  width: min(400px, 33%);
  aspect-ratio: 900 / 1599;
  background: url("bilder/rad-zeichnung.webp?v=20260702h") no-repeat center / contain;
  mix-blend-mode: multiply;
  opacity: 0.12;
  pointer-events: none;
}
.uh-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.uh-figure { position: relative; margin: 0; }
.uh-photo {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  box-shadow: 0 30px 70px -32px rgba(28, 24, 18, 0.6);
}
/* gleiche edle Eck-Umrandung wie bei den Bild/Text-Reihen */
.uh-figure::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: -16px;
  bottom: -16px;
  width: 66%;
  height: 72%;
  border-left: 1px solid rgba(101, 63, 28, 0.5);
  border-bottom: 1px solid rgba(101, 63, 28, 0.5);
  border-bottom-left-radius: 12px;
  pointer-events: none;
}
.uh-intro h1 {
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  line-height: 1.05;
  margin: 8px 0 26px;
}
.uh-lead {
  font-size: clamp(1.12rem, 1.5vw, 1.32rem);
  line-height: 1.72;
  color: var(--ink-soft);
  max-width: 470px;
  margin-bottom: 18px;
}
.uh-text {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--ink-soft);
  max-width: 440px;
}
.uh-meta {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: 440px;
}
.ueber-craft { padding-top: 0; }

/* Über uns — Mobile: Hero sauber stapeln, Wasserzeichen klein halten */
@media (max-width: 760px) {
  .uh-grid { grid-template-columns: 1fr; gap: 34px; }
  .uh-figure { order: 1; max-width: 460px; }
  .uh-intro  { order: 2; }
  .uh-intro h1 { margin-top: 4px; }
  .uh-bg { width: 72%; right: -16%; opacity: 0.08; }
}

/* ============ LEITSATZ — ruhiger, mittiger Bruch im Seitenrhythmus ============ */
/* Kein dunkler Block — die Seite bleibt durchgehend hell. Der Bruch entsteht
   allein durch die Komposition: zentriert, groß, viel Luft, nur Typografie.
   Eine Atempause nach den Bild/Text-Reihen, bevor die Speisekarte kommt. */
.leitsatz {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  text-align: center;
  display: flex;
  align-items: center;
  min-height: clamp(400px, 50vh, 540px);
  padding: clamp(64px, 8vw, 100px) 0;
}
/* Kallmünz als ganz blasses Wasserzeichen unten rechts — genau wie die
   übrigen Zeichnungen der Seite. Der Grund der Zeichnung ist reinweiß,
   darum nimmt „multiply" ihn restlos heraus: kein Bild-Rechteck, keine
   Kante. Nur die zarten Linien (Burg, Kirche, Häuser, Naab, Mühlrad)
   bleiben stehen. Das Mühlrad läuft nach rechts aus dem Bild. */
.leitsatz::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -5%;
  bottom: 0;
  width: min(760px, 68%);
  aspect-ratio: 1600 / 900;
  background: url("bilder/kallmuenz-szene.webp?v=20260702h") no-repeat right bottom / contain;
  mix-blend-mode: multiply;
  opacity: 0.6;
  pointer-events: none;
}
.leitsatz .container {
  position: relative;
  z-index: 1;
}
.leitsatz-line {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1.32;
  letter-spacing: 0.005em;
  max-width: 940px;
  margin: 0 auto;
  text-wrap: balance;
}
.leitsatz-line em {
  color: var(--accent);
  font-style: italic;
}
/* feine Haarlinie als Auftakt über dem Satz */
.leitsatz-line::before {
  content: "";
  display: block;
  width: 46px;
  height: 1px;
  margin: 0 auto 32px;
  background: var(--accent);
  opacity: 0.5;
}

/* ============ SPEISEKARTE-TEASER ============ */
.menu-teaser {
  background: var(--bg-warm);
  padding: clamp(70px, 9vw, 120px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
/* dezente Terrasse-Zeichnung unten rechts (Motiv kommt nur einmal vor) */
.menu-teaser::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: -2%;
  bottom: -8%;
  width: min(540px, 44%);
  aspect-ratio: 900 / 675;
  background: url("bilder/skizze-terrasse.webp") no-repeat right bottom / contain;
  mix-blend-mode: multiply;
  opacity: 0.5;
  pointer-events: none;
}
.menu-teaser-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  position: relative;
  z-index: 1;
}
.menu-teaser-cover { margin: 0; }
.menu-teaser-cover img {
  width: clamp(190px, 22vw, 272px);
  height: auto;
  border-radius: 6px;
  box-shadow: 0 34px 70px -24px rgba(28, 24, 18, 0.55);
  transform: rotate(-3deg);
  transition: transform 0.55s cubic-bezier(.2,.7,.3,1);
}
.menu-teaser-cover a:hover img { transform: rotate(0deg) translateY(-5px); }
.menu-teaser-text h2 { margin: 12px 0 22px; }
.menu-teaser-text > p { max-width: 460px; font-size: 1.02rem; line-height: 1.75; }
.menu-teaser-tags {
  font-family: var(--display);
  font-style: italic;
  color: var(--accent);
  font-size: 1.2rem;
  margin: 6px 0 30px !important;
  letter-spacing: 0.01em;
}

/* ============ GALERIE-TEASER ============ */
.galerie-teaser { padding: 130px 0; }
.galerie-teaser .section-head { align-items: end; }
.gt-link { font-style: italic; }
.gt-link:hover { color: var(--accent); }

/* Ruhiges Bildraster: hochformatige Kacheln zeigen die Fotos großzügig
   (kein enger Streifen-Ausschnitt), beim Überfahren ein sanfter Zoom. */
.gt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.5vw, 22px);
}
.gt {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 3 / 4;
  box-shadow: 0 20px 44px -30px rgba(28, 24, 18, 0.5);
  cursor: zoom-in;
}
.gt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(.2, .7, .3, 1);
}
.gt:hover img { transform: scale(1.045); }
/* Bildunterschrift: dezent immer sichtbar, beim Aufklappen vollständig */
.gt figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 30px 16px 14px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to top, rgba(20, 16, 11, 0.6), rgba(20, 16, 11, 0));
  white-space: nowrap;
  opacity: 0.85;
  transition: opacity .4s ease;
}
.gt:hover figcaption, .gt:focus-within figcaption { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .gt { transition: none; }
  .gt:hover img { transform: none; }
}

.gt-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
}
.gt-cta:hover { color: var(--brown); }

/* ============ ÜBER UNS ============ */
.ueber-uns {
  background: var(--bg-warm);
  color: var(--ink-soft);
  position: relative;
  overflow: hidden;
  padding: 100px 0;
}
/* linker Teil der Skulptur-Zeichnung (das Relief) — dezent am linken Rand,
   bricht links aus dem Bild. Die Statue selbst ist als Foto rechts zu sehen,
   deshalb nur der Relief-Teil, nicht die ganze Zeichnung. */
.ueber-uns::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -0.5%;
  bottom: -5%;
  height: min(86%, 600px);
  aspect-ratio: 202 / 652;
  background: url("bilder/skizze-relief.webp") no-repeat left bottom / contain;
  mix-blend-mode: multiply;
  opacity: 0.6;
  pointer-events: none;
}
.ueber-uns .two-col {
  align-items: center;
  gap: 100px;
  position: relative;
  z-index: 1;
}
/* heller Grund → Kapitel-Label wieder dunkel statt hell */
.ueber-uns .kapitel.light { color: var(--brown); }
.ueber-uns .dark-title {
  color: var(--ink);
  line-height: 0.96;
  font-size: clamp(3.2rem, 7vw, 5.6rem);
  margin-bottom: 36px;
  letter-spacing: -0.02em;
}
.ueber-uns .dark-title em {
  color: var(--accent);
  font-style: italic;
  display: inline-block;
  padding-left: 12px;
}
/* "Wirtshaus." (.serif-italic) im selben warmen Braun wie "trifft" */
.ueber-uns .dark-title .serif-italic {
  color: var(--accent);
}
.ueber-uns .light-text {
  color: var(--ink-soft);
  max-width: 460px;
  margin-bottom: 0;
  font-size: 1.02rem;
  line-height: 1.75;
}


.collage {
  position: relative;
  min-height: 520px;
}
.collage figure { margin: 0; }
.collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.collage figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 30px 22px 16px;
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(transparent, rgba(15, 10, 6, 0.55));
  pointer-events: none;
}
.collage .c-main {
  position: absolute;
  top: 0;
  left: 0;
  width: 78%;
  height: 380px;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.55);
}

/* Single-image variant (Kunst trifft Wirtshaus) — das Foto sitzt in einem
   hellen Passepartout mit feiner Tuschelinie, ruhiger warmer Schatten statt
   hartem Schwarz. Ohne Bildunterschrift; die Skulptur-Zeichnung daneben
   macht das „Kunst". */
.collage-single { min-height: auto; }
.collage-single .c-main {
  position: relative;
  width: 100%;
  height: auto;
  top: auto;
  left: auto;
  background: #fdfaf4;
  padding: 14px;
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 1px rgba(40, 28, 16, 0.10),
    0 26px 52px -32px rgba(74, 58, 38, 0.42);
}
.collage-single .c-main img {
  height: clamp(380px, 48vh, 500px);
  object-position: center 62%;
  border-radius: 2px;
}
.collage-single figcaption { display: none; }

/* „Bier von Jacob"-Foto — als kleiner Abzug auf die untere linke Ecke des
   Skulptur-Fotos gepinnt, leicht gedreht und überlappend. Das schichtet die
   beiden Bilder zu einer Atelier-Ecke und macht die Section kürzer. */
.detail-photo {
  position: absolute;
  z-index: 2;
  left: -46px;
  bottom: -34px;
  margin: 0;
  width: clamp(140px, 13vw, 176px);
  background: #fdfaf4;
  padding: 10px 10px 8px;
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 1px rgba(40, 28, 16, 0.10),
    0 28px 52px -26px rgba(74, 58, 38, 0.6);
  transform: rotate(-3.5deg);
}
.detail-photo img { display: block; width: 100%; height: auto; border-radius: 2px; }
.detail-photo figcaption {
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

/* ============ RESERVIEREN ============ */
/* ---------- Dezente Theke-Zeichnung unten links (Motiv kommt nur einmal vor) ---------- */
.reservieren {
  position: relative;
  overflow: hidden;
}
.reservieren::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -2%;
  bottom: -6%;
  width: min(520px, 42%);
  aspect-ratio: 900 / 675;
  background: url("bilder/skizze-theke.webp") no-repeat left bottom / contain;
  mix-blend-mode: multiply;
  opacity: 0.5;
  pointer-events: none;
}
.reservieren .two-col {
  position: relative;
  z-index: 1;
}
.reservieren .col-left { padding-right: 30px; }
.reservieren h2 { margin-bottom: 24px; }
.reservieren .col-left > p {
  max-width: 380px;
  line-height: 1.75;
  font-size: 1.02rem;
}
/* ---------- Großer, ruhiger Anruf-Button ---------- */
.call-button {
  /* Karte umschließt ihren Inhalt eng — kein toter Leerraum mehr,
     seit der Pfeil entfernt wurde. Block-Ebene (width: fit-content),
     damit nachfolgende Elemente sauber darunter stehen. */
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 18px;
  margin-top: 44px;
  padding: 18px 26px;
  background: var(--bg-warm);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  max-width: 100%;
  box-shadow: 0 16px 38px -30px rgba(28, 24, 18, 0.4);
  transition: transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease, border-color .45s ease;
}
.call-button:hover {
  transform: translateY(-3px);
  border-color: var(--brown-soft);
  box-shadow: 0 26px 50px -30px rgba(28, 24, 18, 0.5);
}
.call-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(138, 90, 52, 0.1);
  color: var(--brown);
  flex-shrink: 0;
}
.call-body { display: flex; flex-direction: column; line-height: 1.05; }
.call-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brown);
  margin-bottom: 8px;
  font-weight: 400;
}
.call-number {
  font-family: var(--serif);
  /* Eine Zeile, nie umbrechend — auf schmalen Handys ruhig kleiner.
     Proportionale Ziffern (lnum statt tnum) wirken eleganter als die
     mechanisch breite Tabellenschrift; leichteres Gewicht = sauberer. */
  font-size: clamp(1.25rem, 5.2vw, 1.5rem);
  font-weight: 500;
  letter-spacing: 0.015em;
  color: var(--ink);
  font-feature-settings: "lnum" 1;
  white-space: nowrap;
}

/* ---------- Schreib-Hinweis: ein Tropfen Tinte zieht die Linie hinab und
   verläuft beim Aufprall in einem einzigen feinen Ring — ruhig, klein, von Hand.
   Bewusst zurückgenommen: ein Tropfen, ein Ring, ein dezenter Pfeil, viel Ruhe
   zwischen den Durchläufen. Alles auf einer gemeinsamen Schleife (--sc-loop). ---------- */
.schreib-cue {
  --sc-loop: 6s;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
  text-decoration: none;
  align-self: flex-start;
  -webkit-tap-highlight-color: transparent;
}
.schreib-cue-label {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--accent);
  transition: color .5s ease;
}
.schreib-cue:hover .schreib-cue-label,
.schreib-cue:focus-visible .schreib-cue-label { color: var(--ink); }
.schreib-cue:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  border-radius: 4px;
}

.schreib-cue-track {
  position: relative;
  width: 30px;
  height: 70px;
}

/* feine Führungslinie; die Tinten-Füllung (::after) wächst mit dem Tropfen hinab */
.sc-line {
  position: absolute;
  left: 50%; top: 3px;
  width: 1px; height: 46px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(40, 28, 16, 0.13), rgba(40, 28, 16, 0.03));
  transition: background .5s ease;
}
.sc-line::after {
  content: "";
  position: absolute;
  inset: 0;
  transform-origin: top center;
  transform: scaleY(0);
  background: linear-gradient(to bottom, var(--accent), rgba(116, 92, 74, 0.15));
  animation: sc-ink var(--sc-loop) linear infinite;
}
.schreib-cue:hover .sc-line {
  background: linear-gradient(to bottom, rgba(40, 28, 16, 0.24), rgba(40, 28, 16, 0.05));
}

/* der fallende Tintentropfen */
.sc-drop {
  position: absolute;
  left: 50%; top: 1px;
  width: 5px; height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  animation: sc-drop var(--sc-loop) linear infinite;
}
/* ein einziger feiner Ring, der beim Aufprall sanft ausläuft */
.sc-ripple {
  position: absolute;
  left: 50%; top: 49px;
  width: 10px; height: 10px;
  margin-left: -5px; margin-top: -5px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0;
  animation: sc-ripple var(--sc-loop) linear infinite;
}
/* Chevron — ruhiges Ziel; wird beim Aufprall nur sanft heller */
.sc-chev {
  position: absolute;
  left: 50%; top: 45px;
  width: 7px; height: 7px;
  margin-left: -3.5px;
  border-right: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  opacity: .3;
  transform: translateY(0) rotate(45deg);
  animation: sc-chev var(--sc-loop) linear infinite;
}

@keyframes sc-ink {
  0%, 5%       { transform: scaleY(0); opacity: 1; }
  5.01%        { transform: scaleY(0); opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .72, .4); }
  44%          { transform: scaleY(1); opacity: 1; }
  66%          { transform: scaleY(1); opacity: 1; }
  80%          { transform: scaleY(1); opacity: 0; }
  80.01%, 100% { transform: scaleY(0); opacity: 0; }
}
@keyframes sc-drop {
  0%   { transform: translateY(0) scale(.2); opacity: 0; }
  4%   { transform: translateY(0) scale(1); opacity: 1; }
  5%   { transform: translateY(0) scale(1); opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .72, .4); }
  40%  { transform: translateY(42px) scaleX(.88) scaleY(1.22); opacity: 1; animation-timing-function: cubic-bezier(.35, 1.1, .5, 1); }
  44%  { transform: translateY(45px) scaleX(1.4) scaleY(.55); opacity: 1; }
  49%  { transform: translateY(45px) scaleX(1.55) scaleY(.4); opacity: 0; }
  100% { transform: translateY(45px) scale(.2); opacity: 0; }
}
@keyframes sc-ripple {
  0%, 44% { transform: scale(.3); opacity: 0; }
  46%     { transform: scale(.35); opacity: .4; animation-timing-function: cubic-bezier(.2, .6, .35, 1); }
  62%     { transform: scale(1.7); opacity: 0; }
  100%    { transform: scale(1.7); opacity: 0; }
}
@keyframes sc-chev {
  0%, 44% { opacity: .3; transform: translateY(0) rotate(45deg); }
  46%     { opacity: .8; transform: translateY(1.2px) rotate(45deg); animation-timing-function: cubic-bezier(.3, 1.3, .5, 1); }
  56%     { opacity: .7; transform: translateY(0) rotate(45deg); }
  74%     { opacity: .4; transform: translateY(0) rotate(45deg); }
  100%    { opacity: .3; transform: translateY(0) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sc-line::after { animation: none; transform: scaleY(1); opacity: 1; }
  .sc-drop, .sc-ripple { display: none; }
  .sc-chev { animation: none; opacity: .45; }
}

/* ---------- Leise Zweitoption: schriftlich schreiben (Startseite) ---------- */
.write-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  font-family: var(--sans);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--accent);
  text-decoration: none;
  transition: color .45s ease;
}
.write-link-arrow { transition: transform .45s cubic-bezier(.2, .7, .3, 1); }
.write-link:hover { color: var(--ink); }
.write-link:hover .write-link-arrow { transform: translateX(5px); }

.reservieren-aside {
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: sticky;
  top: 110px;
  align-self: start;
}
.contact-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.contact-row + .contact-row {
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.contact-row p {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.7;
}
.contact-label {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--ink);
  margin-bottom: 8px;
}
.contact-row .hours-note {
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.6;
}
.map-wrap {
  position: relative;
  /* Eigener Stacking-Context: hält Leaflets interne z-index-Ebenen (Kacheln,
     Marker, Controls bis z-index 1000) im Kasten, damit die Karte beim Scrollen
     nicht über die fixierte Kopfleiste (z-index 50) gezeichnet wird. */
  isolation: isolate;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--line);
  flex: 1;
  min-height: 420px;
  box-shadow: 0 20px 50px -25px rgba(31, 26, 20, 0.25);
}
.map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Datenschutz-Vorschaltung („Zwei-Klick"): Die Karte lädt erst nach aktivem
   Klick. Vorher werden KEINE Kacheln von OpenStreetMap/CARTO geladen und keine
   IP-Adresse übertragen. Der Platzhalter fügt sich ruhig in die Creme-Palette. */
.map-consent {
  position: absolute;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 40px);
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.55), transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
}
.map-consent-inner { max-width: 340px; }
.map-consent-kicker {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.map-consent-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(19px, 2.4vw, 23px);
  color: var(--ink);
  margin: 0 0 10px;
}
.map-consent-text {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 22px;
}
.map-consent-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  background: var(--brown);
  border: 1px solid var(--brown);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 10px 26px -14px rgba(31, 26, 20, 0.55);
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.map-consent-btn:hover {
  background: var(--accent-deep);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -14px rgba(31, 26, 20, 0.65);
}
.map-consent-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Leaflet-Grundfläche an die Seite anpassen */
.leaflet-container {
  background: var(--bg-soft);
  font-family: var(--sans);
  font-size: 11px;
}
/* Helle CARTO-Kacheln dezent ins Warme ziehen, damit sie zur Creme-Palette passen */
.leaflet-tile { filter: sepia(0.16) saturate(0.9) brightness(1.02) contrast(0.98); }

/* Gold-Pin (divIcon) statt generischem Standard-Marker */
.map-pin { position: relative; }
.map-pin .map-pin-dot {
  position: absolute;
  top: 50%; left: 50%;
  width: 13px; height: 13px;
  margin: -6.5px 0 0 -6.5px;
  background: var(--accent);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(31, 26, 20, 0.4);
  z-index: 2;
}
.map-pin .map-pin-pulse {
  position: absolute;
  top: 50%; left: 50%;
  width: 13px; height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: rgba(138, 90, 52, 0.35);
  z-index: 1;
  animation: mapPulse 2.8s ease-out infinite;
}
@keyframes mapPulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  70%  { transform: scale(3.4); opacity: 0;   }
  100% { transform: scale(3.4); opacity: 0;   }
}

/* Zoom-Steuerung dezent und markenkonform */
.leaflet-control-zoom {
  border: 1px solid var(--line) !important;
  border-radius: 4px !important;
  box-shadow: 0 6px 18px -10px rgba(31, 26, 20, 0.4) !important;
  overflow: hidden;
}
.leaflet-control-zoom a {
  background: rgba(250, 248, 243, 0.94);
  color: var(--ink);
  width: 30px; height: 30px;
  line-height: 30px;
  border: 0;
  transition: color 0.2s ease, background 0.2s ease;
}
.leaflet-control-zoom a:hover { background: #fff; color: var(--brown); }

/* Attribution: rechtlich da, aber zurückhaltend */
.leaflet-control-attribution {
  background: rgba(250, 248, 243, 0.8) !important;
  color: var(--muted) !important;
  font-size: 9.5px !important;
  padding: 2px 8px !important;
}
.leaflet-control-attribution a { color: var(--muted) !important; }
.leaflet-control-attribution a:hover { color: var(--brown) !important; }

/* „Route planen" – kleiner Pill-Button unten links auf der Karte */
.map-cta {
  position: absolute;
  left: 16px; bottom: 16px;
  z-index: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(250, 248, 243, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  box-shadow: 0 10px 26px -14px rgba(31, 26, 20, 0.5);
  transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.map-cta:hover { color: #fff; background: var(--brown); border-color: var(--brown); transform: translateY(-1px); }
.map-cta-arrow { transition: transform 0.3s cubic-bezier(.2,.7,.3,1); }
.map-cta:hover .map-cta-arrow { transform: translate(2px, -2px); }

/* ---------- Kontakt-Unterseite: nutzt das Reservieren-Layout, oben etwas enger ---------- */
.kontakt { padding-top: clamp(16px, 3vw, 40px); }
/* ---------- Adresse + Karte als ruhiger Abschluss (ganz unten) ---------- */
.kontakt-orte { padding: 0 0 clamp(56px, 8vw, 100px); }
.kontakt-orte > .container {
  border-top: 1px solid var(--line);
  padding-top: clamp(38px, 6vw, 70px);
}
.kontakt-orte .two-col { align-items: start; }
/* E-Mail als ruhige, asynchrone Alternative unter dem Anruf-Button */
.call-aside { margin-top: 18px; max-width: 460px; }
.call-aside p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-style: italic;
  line-height: 1.6;
}
.call-aside a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.call-aside a:hover { color: var(--brown); }

/* ---------- Anfrageformular (schriftliche Alternative zum Anruf) ---------- */
.anfrage {
  position: relative;
  padding: clamp(8px, 2vw, 26px) 0 clamp(56px, 8vw, 100px);
}
.anfrage-head {
  max-width: 620px;
  margin: 0 0 clamp(26px, 4vw, 44px);
}
.anfrage-head h2 { margin: 10px 0 14px; }
.anfrage-head p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.75;
}
.anfrage-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.3vw, 26px);
  max-width: 720px;
}
.field { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brown);
  font-weight: 400;
}
.field-hint {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.8rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  margin-left: 8px;
}
.anfrage-form input,
.anfrage-form textarea {
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--ink);
  background: var(--bg-warm);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 15px;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.anfrage-form textarea { resize: vertical; min-height: 132px; line-height: 1.6; }
.anfrage-form input::placeholder,
.anfrage-form textarea::placeholder { color: var(--brown-soft); opacity: .8; }
.anfrage-form input:focus,
.anfrage-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 14px 34px -26px rgba(40, 28, 16, 0.5);
}
.anfrage-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 2px;
}
.anfrage-foot .btn-primary { border: none; }
.anfrage-note {
  flex: 1 1 240px;
  max-width: 360px;
  margin: 0;
  font-size: 0.86rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--muted);
}
@media (max-width: 640px) {
  .anfrage-form { grid-template-columns: 1fr; }
}

/* ============ FEIERN ============ */
.feiern { padding: 30px 0 90px; background: var(--bg); }
.feiern-box {
  background: var(--bg-warm);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 70px 80px 75px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 70px -38px rgba(40, 28, 16, 0.22);
}
/* feine Passepartout-Linie als edles Detail (statt der dunklen Goldkante) */
.feiern-box::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 6px;
  border: 1px solid rgba(101, 63, 28, 0.12);
  pointer-events: none;
  z-index: 2;
}
/* dezente Mühlen-Zeichnung als atmosphärischer Hintergrund, rechts unten auslaufend */
.feiern-box::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -36px;
  bottom: -24px;
  width: min(560px, 58%);
  aspect-ratio: 1672 / 941;
  background: url("bilder/skizze-ensemble.webp?v=20260702h") no-repeat right bottom / contain;
  mix-blend-mode: multiply;
  opacity: 0.16;
  pointer-events: none;
}
.feiern-box > .script-tag {
  position: absolute;
  top: 26px;
  left: 56px;
  margin: 0;
  font-size: 2.6rem;
  font-family: var(--script);
  color: var(--brown);
  line-height: 1;
  z-index: 1;
}
.script-tag {
  font-family: var(--script);
  color: var(--brown-soft);
  font-size: 3rem;
  line-height: 1;
  display: block;
  margin-bottom: 30px;
}
.feiern-content {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 70px;
  align-items: center;
  padding-top: 42px;
}
.feiern-title .kapitel.light { margin-bottom: 18px; color: var(--brown); }
.feiern-title h2 {
  color: var(--ink);
  margin: 0;
  font-size: clamp(2.2rem, 3.4vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.005em;
}
.feiern-title h2 em { color: var(--accent); font-style: italic; }
.feiern-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  border-left: 1px solid var(--line);
  padding-left: 50px;
}
.feiern-meta p {
  color: var(--ink-soft);
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.7;
  max-width: 380px;
}
.feiern-meta .btn-outline { white-space: nowrap; border-color: var(--brown); color: var(--brown); }
/* Hover muss den Text auf Weiß setzen — sonst bliebe er braun auf braunem Grund */
.feiern-meta .btn-outline:hover { background: var(--brown); border-color: var(--brown); color: #fff; }

/* ============ FOOTER ============ */
.site-footer {
  background: var(--bg-warm);
  color: var(--ink-soft);
  padding: 92px 0 34px;
  margin-top: 0;
  position: relative;
  border-top: 1px solid var(--line);
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 84px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.7;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1.1fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 52px;
  border-bottom: 1px solid var(--line);
}
.footer-logo {
  height: 66px;
  width: auto;
  display: block;
  margin-bottom: 20px;
}
.footer-brand .script-tag {
  font-size: 2.2rem;
  margin-bottom: 10px;
  color: var(--brown);
}
.footer-brand h3 {
  color: var(--ink);
  font-size: 2.6rem;
  margin: 0 0 18px;
  line-height: 1;
  font-weight: 500;
}
.footer-brand p {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.7;
  max-width: 280px;
}
.footer-instagram {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  padding: 10px 18px;
  border: 1px solid var(--accent-soft);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  transition: all 0.3s cubic-bezier(.2,.7,.3,1);
}
.footer-instagram svg { flex: none; width: 16px; height: 16px; }
.footer-instagram:hover {
  background: var(--brown);
  border-color: var(--brown);
  color: #fff;
  transform: translateY(-2px);
}

.footer-col h4 {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--brown);
  margin: 14px 0 22px;
  font-weight: 400;
}
.footer-col p {
  color: var(--ink-soft);
  margin: 0 0 12px;
  font-size: 0.92rem;
  line-height: 1.65;
}
.footer-col .muted { color: var(--muted); font-size: 0.82rem; font-style: italic; }
.footer-col a { color: var(--ink-soft); }
.footer-col a:hover { color: var(--accent); }
.footer-link-strong {
  font-family: var(--serif);
  font-size: 1.18rem;
  color: var(--ink) !important;
  letter-spacing: 0.02em;
}
.footer-link-strong:hover { color: var(--accent) !important; }

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-nav a {
  font-size: 0.93rem;
  transition: padding-left 0.25s ease, color 0.25s ease;
}
.footer-nav a:hover { padding-left: 6px; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  font-size: 0.82rem;
  color: var(--muted);
}
.footer-legal { display: inline-flex; gap: 18px; }
.footer-legal a { color: var(--muted); }
.footer-legal a:hover { color: var(--accent); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  .primary-nav { gap: 18px; }
  .primary-nav a { font-size: 13px; }
  .two-col { gap: 50px; }
  .feiern-content { grid-template-columns: 1fr; gap: 26px; padding-top: 50px; }
  .feiern-meta { border-left: 0; padding-left: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .feiern-title h2 { white-space: normal; }
}

@media (max-width: 820px) {
  :root { --header-h: 70px; }
  .header-inner { grid-template-columns: 1fr auto; }
  .reserve-btn { display: none; }
  .menu-toggle { display: block; color: inherit; }

  /* Geöffnetes Menü: dunkles X, damit es auf der hellen Schublade gut lesbar ist */
  .menu-toggle.open { color: var(--ink); filter: none; }

  /* ---------- Mobiles Menü: ruhige Schublade, nur von rechts ---------- */
  .primary-nav {
    display: flex;
    position: fixed;
    top: 0; bottom: 0; right: 0;
    left: auto;
    width: min(72vw, 278px);
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    padding: calc(var(--header-h) + var(--safe-top) + 2px) 0 22px;
    /* Nahezu deckende Schublade: kein Durchscheinen des dunklen Heros mehr,
       damit Text und Zeichnung unabhängig vom Hintergrund gleich wirken. */
    background: rgba(247, 243, 236, 0.975);
    -webkit-backdrop-filter: blur(18px) saturate(1.05);
    backdrop-filter: blur(18px) saturate(1.05);
    border-left: 1px solid rgba(92, 73, 59, 0.32);
    box-shadow: -34px 0 64px -42px rgba(28, 24, 18, 0.62);
    color: var(--ink);
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    transition: transform 0.44s cubic-bezier(.22,.7,.24,1), visibility 0.44s;
  }
  /* zarte Kallmünz-Zeichnung als Hintergrund der Schublade, unten auslaufend */
  .primary-nav::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0; right: 0; bottom: 0; top: 0;
    background: url("bilder/header-final-cut.webp?v=20260702h") no-repeat center bottom / 150%;
    /* Kräftigerer, klar sichtbarer Sketch der Kallmünzer Ortsansicht; nur ganz
       unten sanft ausgeblendet, damit die Spiegelung im Wasser nicht hart abbricht. */
    opacity: 0.9;
    filter: saturate(1.15) contrast(1.12);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 88%, rgba(0,0,0,0.8) 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 88%, rgba(0,0,0,0.8) 100%);
    pointer-events: none;
  }
  .primary-nav.open {
    transform: none;
    visibility: visible;
    pointer-events: auto;
  }
  .primary-nav a {
    font-family: var(--serif);
    font-size: 1.34rem;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.01em;
    padding: 13px 34px;
    color: var(--ink-soft);
  }
  .primary-nav a::after { display: none; }
  .primary-nav a.active { color: var(--accent); }
  /* feine Haarlinien zwischen den Menüpunkten — gibt der Schublade Struktur */
  .primary-nav > a { position: relative; }
  .primary-nav > a::after {
    display: block;
    content: "";
    position: absolute;
    left: 34px; right: 34px; bottom: 0;
    height: 1px;
    background: rgba(92, 73, 59, 0.14);
  }
  .primary-nav > a:last-of-type::after { display: none; }

  /* Öffnungszeiten & Kontakt in der Schublade — füllt den unteren Raum,
     gibt Struktur und hält die Kallmünz-Zeichnung als ruhigen Grund darunter. */
  .nav-meta {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 24px 34px 0;
    padding-top: 20px;
    border-top: 1px solid var(--line);
  }
  .nav-meta-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brown);
  }
  .nav-meta p {
    margin: 0;
    font-family: var(--sans);
    font-style: normal;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--ink);
    /* zarter Creme-Schimmer hebt die Schrift sauber von der Zeichnung ab */
    text-shadow: 0 1px 6px rgba(247, 243, 236, 0.92), 0 0 2px rgba(247, 243, 236, 0.92);
  }
  .nav-meta .nav-tel {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.2rem;
    color: var(--accent-deep);
    letter-spacing: 0;
    padding: 4px 0 0;
    margin: 0;
    text-shadow: 0 1px 6px rgba(247, 243, 236, 0.92), 0 0 2px rgba(247, 243, 236, 0.92);
  }

  section { padding: 80px 0; }
  .container { padding: 0 22px; }

  .two-col { grid-template-columns: 1fr; gap: 40px; }
  /* Im Einspalter ist der rechte Spaltenabstand überflüssig — weg damit,
     damit der Inhalt (u. a. das Anruf-Feld) die volle Breite nutzen kann. */
  .reservieren .col-left { padding-right: 0; }
  .ankommen { padding: 80px 0; }
  .ankommen .two-col::before { display: none; }
  /* Wasserzeichen auf dem Handy kleiner und zurückhaltender */
  .ankommen::before { width: 64%; opacity: 0.34; left: -6%; bottom: -1%; }
  .contact-card { grid-template-columns: 1fr; gap: 22px; }
  .map-wrap { min-height: 300px; }
  .map-cta { left: 12px; bottom: 12px; padding: 9px 15px; }

  .hero { padding: 120px 0 70px; min-height: 92vh; min-height: 92svh; }
  .hero-sub { margin-bottom: 34px; }

  .section-head { grid-template-columns: 1fr; gap: 8px; }
  .section-head .count { display: none; }
  .galerie-teaser .section-head .gt-link { display: inline-block; font-size: 0.95rem; }

  /* Editorial-Reihen: Bild über Text, eine Spalte */
  .ed-row,
  .ed-row.reverse { grid-template-columns: 1fr; gap: 26px; }
  .ed-row.reverse .ed-media { order: 0; }
  .ed-row.reverse .ed-text  { order: 1; }
  .ed-text p { max-width: none; }

  /* Abstand Terrasse-Reihe → Leitsatz auf dem Handy verkleinern:
     der Leitsatz reserviert sonst eine hohe min-height und zentriert den
     kurzen Satz mit viel Leerraum darüber/darunter. */
  .editorial { padding: 30px 0 44px; }
  .leitsatz { min-height: auto; padding: 50px 0; }

  /* "Kunst trifft Wirtshaus" auf dem Handy kompakter */
  .ueber-uns { padding: 58px 0; }
  .ueber-uns .dark-title { margin-bottom: 22px; }
  .ueber-uns .light-text { margin-bottom: 0; }
  .col-right.collage-single { margin-top: 26px; }
  .collage-single .c-main img { height: clamp(300px, 44vh, 360px); }
  /* Abzug bleibt am unteren linken Rand des Fotos, aber im Bild (nicht abgeschnitten) */
  .detail-photo { left: 14px; bottom: -22px; width: clamp(132px, 36vw, 164px); }

  /* Speisekarte-Teaser: Cover über Text */
  .menu-teaser-inner { grid-template-columns: 1fr; gap: 32px; justify-items: start; }

  /* Galerie-Teaser: ruhiges 2-Spalten-Raster */
  .gt-grid { display: grid; height: auto; grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 10px; }
  .gt:hover, .gt:focus-within { flex-grow: 0; }

  .feiern-box { padding: 40px 28px 50px; }
  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
}

@media (max-width: 480px) {
  .brand-sub { display: none; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 14px; }
  .hero-actions .btn { width: 100%; justify-content: center; padding: 13px 20px; letter-spacing: 0.14em; font-size: 10px; }
}

/* ============ MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Fade-up on scroll — weiche, edle Kurve */
.fade-up {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 1s cubic-bezier(.16,.84,.28,1),
    transform 1.1s cubic-bezier(.16,.84,.28,1);
}
.fade-up.in {
  opacity: 1;
  transform: none;
}

/* ============================================================
   SUB-PAGES (Speisekarte, Galerie, Impressum, Datenschutz)
   Kein Hero -> Header von Anfang an massiv, Inhalt unter dem Header.
   ============================================================ */
body.subpage { padding-top: calc(var(--header-h) + var(--safe-top)); background: var(--bg); }
.subpage .site-header {
  background: rgba(246, 243, 237, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
  color: var(--ink);
}
.subpage .site-header::before { opacity: 0; }
.subpage .brand-logo { filter: none; }
.subpage .menu-toggle { filter: none; }

/* Mobil: Header darf KEIN backdrop-filter tragen — sonst bildet er einen
   Containing-Block und die position:fixed-Schublade wird auf Headerhöhe
   geklemmt (statt volle Viewporthöhe), wenn man sie gescrollt/auf Unterseiten
   öffnet. Steht bewusst hinter .site-header.scrolled und .subpage .site-header,
   damit es per Quellreihenfolge gewinnt. Header bleibt mit 0.98 praktisch deckend. */
@media (max-width: 820px) {
  .site-header.scrolled,
  .subpage .site-header {
    background: rgba(244, 240, 233, 0.98);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Einheitlicher Seitenkopf für Unterseiten */
.page-head {
  padding: clamp(56px, 8vw, 100px) 0 clamp(40px, 5vw, 64px);
  text-align: center;
}
.page-head .kapitel { justify-content: center; margin-bottom: 18px; }
.page-head h1 {
  font-size: clamp(2.8rem, 7vw, 5rem);
  line-height: 1.02;
  color: var(--ink);
}
.page-head .lead {
  max-width: 540px;
  margin: 22px auto 0;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.7;
}
.karte-info {
  max-width: 620px;
  margin: 16px auto 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
}
.back-home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
}
.back-home:hover { color: var(--accent); }

/* ============================================================
   RECHTLICHE SEITEN — Impressum / Datenschutz
   Ruhige, gut lesbare Textspalte im hellen Markenton.
   ============================================================ */
.legal { max-width: 760px; margin: 0 auto; padding: 0 32px clamp(56px, 8vw, 96px); }
.legal-note {
  background: var(--bg-warm);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 18px 22px;
  margin-bottom: 46px;
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--ink-soft);
}
.legal-note strong { color: var(--brown); }
.legal h2 {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  color: var(--ink);
  font-weight: 500;
  margin: 42px 0 12px;
}
.legal h3 {
  font-family: var(--serif);
  font-size: 1.12rem;
  color: var(--ink);
  font-weight: 500;
  margin: 26px 0 8px;
}
.legal p { color: var(--ink-soft); line-height: 1.85; margin-bottom: 14px; }
.legal ul { margin: 0 0 16px 1.15em; }
.legal li { color: var(--ink-soft); line-height: 1.8; margin-bottom: 6px; }
.legal a { color: var(--brown); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--ink); }
.legal address { font-style: normal; line-height: 1.85; color: var(--ink-soft); }
/* Auffällige Markierung für vom Kunden zu ergänzende Pflichtangaben */
.legal .todo {
  background: rgba(176,116,38,0.14);
  color: #7a4a12;
  padding: 1px 7px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.95em;
}
.legal .stand { color: var(--muted); font-size: 0.85rem; margin-top: 44px; }

@media (max-width: 820px) {
  .footer-logo { height: 56px; }
}

/* ============================================================
   GALERIE — ruhige Scroll-Galerie (ContainerScroll-Idee, bewusst sanft)
   Beim Eintreten legt sich das Spaltenraster ganz leicht flach,
   die Bilder blenden weich gestaffelt ein und die Spalten driften
   beim Scrollen nur minimal gegeneinander. Kein hektisches Motion.
   ============================================================ */
.ag {
  padding: clamp(6px, 1.6vw, 22px) 0 clamp(60px, 9vw, 120px);
  perspective: 1700px;
  perspective-origin: 50% 0%;
}
/* Die Galerie bringt ihre Bilder selbst gestaffelt ein — die (sehr hohe)
   Sektion darf nie über den generischen fade-up-Reveal ausgeblendet bleiben. */
.ag.fade-up { opacity: 1 !important; transform: none !important; }

/* Ohne JS: natürliche Spalten-Masonry (Fallback) */
.ag-grid {
  columns: 3 300px;
  column-gap: clamp(14px, 1.6vw, 22px);
}
.ag-grid > .ag-item {
  break-inside: avoid;
  margin: 0 0 clamp(14px, 1.6vw, 22px);
}

/* Mit JS: echte Flex-Spalten (für sanftes Flachlegen + Mini-Parallaxe) */
.ag-grid.ag-built {
  columns: auto;
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.6vw, 22px);
  transform-style: preserve-3d;
  transform-origin: 50% 0%;
  will-change: transform;
}
.ag-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 22px);
  will-change: transform;
}
.ag-grid.ag-built .ag-item { margin: 0; }

.ag-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: var(--bg-warm);
  box-shadow: 0 20px 44px -28px rgba(28, 20, 12, 0.52);
}
.ag-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.ag-item:hover img { transform: scale(1.04); }

/* dezente Bildunterschrift — nur auf Hover/Fokus */
.ag-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 30px 15px 13px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to top, rgba(20, 16, 11, 0.62), rgba(20, 16, 11, 0));
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.ag-item:hover .ag-cap { opacity: 1; }

/* Sanftes, gestaffeltes Einblenden — nur wenn JS + Bewegung erlaubt */
.ag-grid.is-armed .ag-item {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(22px);
  transition: opacity 1.1s ease, filter 1.1s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.ag-grid.is-armed .ag-item.in {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

@media (max-width: 560px) {
  .ag-item { border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ag-item img { transition: none; }
  .ag-grid.ag-built { transform: none !important; }
  .ag-col { transform: none !important; }
}

/* ============ LIGHTBOX (Galerie) ============ */
.ag-item { cursor: zoom-in; }

.ag-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(20, 14, 8, 0.93);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.ag-lightbox.open {
  opacity: 1;
  visibility: visible;
}

.ag-lb-stage {
  margin: 0;
  max-width: min(1100px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.ag-lb-img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  transform: scale(0.985);
  transition: transform 0.5s cubic-bezier(.2, .7, .2, 1);
}
.ag-lightbox.open .ag-lb-img { transform: scale(1); }

.ag-lb-cap {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  color: #f0e6d6;
  text-align: center;
  letter-spacing: 0.01em;
}
.ag-lb-count {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--brown-soft);
  text-transform: uppercase;
}

.ag-lb-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(240, 230, 214, 0.28);
  border-radius: 50%;
  background: rgba(240, 230, 214, 0.06);
  color: #f0e6d6;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.ag-lb-btn:hover {
  background: rgba(240, 230, 214, 0.16);
  border-color: rgba(240, 230, 214, 0.55);
}
.ag-lb-btn svg { width: 22px; height: 22px; }
.ag-lb-close { top: clamp(16px, 3vw, 30px); right: clamp(16px, 3vw, 30px); }
.ag-lb-prev { left: clamp(10px, 3vw, 34px); top: 50%; transform: translateY(-50%); }
.ag-lb-next { right: clamp(10px, 3vw, 34px); top: 50%; transform: translateY(-50%); }
.ag-lb-prev:hover, .ag-lb-next:hover { transform: translateY(-50%) scale(1.06); }

@media (max-width: 640px) {
  .ag-lb-btn { width: 44px; height: 44px; }
  .ag-lb-btn svg { width: 18px; height: 18px; }
  /* Auf dem Handy keine Pfeiltasten — sie liegen ohnehin überm Bild; gewischt
     wird per Touch. Schließen-Button bleibt. */
  .ag-lb-prev, .ag-lb-next { display: none; }
  .ag-lb-cap { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ag-lightbox { transition: opacity 0.2s ease; }
  .ag-lb-img,
  .ag-lightbox.open .ag-lb-img { transform: none; transition: none; }
}

/* ============================================================
   ESSEN — BILDER (Vorschau auf der Speisekarte)
   Vorschau – später durch echte Handy-Fotos ersetzen.
   Fehlt eine Datei in /bilder/essen/, zeigt die Kachel einen
   ruhigen, warmen Platzhalter mit dem Kategorienamen.
   ============================================================ */
.essen { padding: clamp(40px, 6vw, 80px) 0 clamp(60px, 9vw, 110px); background: var(--bg); }
.essen-head { max-width: 640px; margin: 0 auto clamp(34px, 5vw, 56px); text-align: center; }
.essen-head .kapitel { justify-content: center; margin-bottom: 14px; }
.essen-head h2 { margin: 0 0 16px; font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
.essen-head p { margin: 0 auto; max-width: 480px; color: var(--ink-soft); line-height: 1.7; }

.essen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 22px);
}
.essen-card {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-warm);
  border: 1px solid var(--line);
}
/* Platzhalter, solange noch kein Foto vorhanden ist */
.essen-card::after {
  content: attr(data-cat);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brown-soft);
}
.essen-card img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(.2, .7, .3, 1);
}
.essen-card:hover img { transform: scale(1.04); }
.essen-cap {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  padding: 34px 16px 14px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to top, rgba(20, 16, 11, 0.62), rgba(20, 16, 11, 0));
}
/* Im Platzhalter-Zustand keine doppelte Beschriftung */
.essen-card.is-missing .essen-cap { display: none; }

@media (max-width: 820px) {
  .essen-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .essen-grid { grid-template-columns: 1fr; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .essen-card img, .essen-card:hover img { transform: none; transition: none; }
}