/* ==========================================================================
   Weinstube zur Trotte "IHLI" · Achern · V3 (17.10.2026)
   Dunkle Weinstuben-Optik, ruhig: ein Foto im Hero, Karte als Liste, keine
   Pins und Türen. Schriften lokal (Cormorant Garamond, Jost), keine externen
   Requests (DSGVO). Scroll-Reveals in reinem CSS.
   ========================================================================== */

@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-garamond-v21-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-garamond-v21-latin-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-garamond-v21-latin-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-garamond-v21-latin-600italic.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-garamond-v21-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('../fonts/jost-v20-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --bg: #0f0d0c;
  --bg-2: #141110;
  --bg-3: #1a1614;
  --ink: #f4ece0;
  --ink-soft: #c6b8a8;
  --ink-dim: #97897a;
  --ember: #dfa25a;
  --ember-hot: #f1c184;
  --wine: #9e3b41;
  --wine-deep: #692a30;
  --hairline: rgba(244, 236, 224, 0.09);
  --hairline-gold: rgba(223, 162, 90, 0.28);
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --radius: 8px;
  --shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  --ease-lux: cubic-bezier(0.32, 0.72, 0, 1);
  /* Cormorant hat eine kleine x-Hoehe: Ueberschriften brauchen mehr Groesse
     als eine gewoehnliche Serif, sonst wirken sie duenn. */
  --h1: clamp(3.6rem, 2rem + 6.5vw, 8rem);
  --h2: clamp(2.6rem, 1.6rem + 3.2vw, 4.8rem);
  --h3: clamp(2rem, 1.5rem + 1.5vw, 2.6rem);
  --fliess: clamp(1.02rem, 0.97rem + 0.22vw, 1.15rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
}

body {
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fliess);
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--wine); color: var(--ink); }

img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--ember); }
b, strong { font-weight: 400; }   /* Jost liegt nur im Regular-Schnitt vor: kein Faux Bold */

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--ember); color: #14100e; padding: 0.6rem 1rem; border-radius: var(--radius);
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* Tastatur-Fokus: deutlich sichtbar auf dunklem Grund, per Maus unsichtbar */
:focus-visible {
  outline: 3px solid var(--ember-hot);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* ---------- Typografie ---------- */

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.02; color: var(--ink); text-wrap: balance; letter-spacing: -0.005em; }
.display { font-size: var(--h1); }
.h-section { font-size: var(--h2); }
.h-chapter { font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.8rem); font-weight: 600; color: var(--ink); }
p { text-wrap: pretty; }
.small { font-size: 0.92rem; color: var(--ink-dim); }
.hinweis { font-size: 0.95rem; color: var(--ink-dim); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  font-family: var(--sans); font-size: 0.98rem; font-weight: 400;
  letter-spacing: 0.06em; text-decoration: none;
  padding: 0.8rem 1.7rem; border-radius: var(--radius);
  border: 1px solid var(--ember);
  color: var(--ember-hot); background: transparent;
  transition: background 0.4s var(--ease-lux), color 0.4s var(--ease-lux), transform 0.4s var(--ease-lux);
}
.btn:hover { background: var(--ember); color: #180f08; }
.btn:active { transform: scale(0.98); }
.btn-solid { background: var(--wine-deep); border-color: transparent; color: var(--ink); }
.btn-solid:hover { background: var(--wine); color: var(--ink); }

/* ---------- Navigation ---------- */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.15rem var(--pad);
  transition: padding 0.6s var(--ease-lux), border-color 0.6s var(--ease-lux);
  border-bottom: 1px solid transparent;
}
/* Weichzeichner auf dem Pseudo-Element, nicht auf der Kopfzeile selbst:
   backdrop-filter macht sein Element zum Bezugsrahmen fuer position: fixed.
   Lag er auf .nav, war das mobile Menue (fixed, inset: 0) nach dem Scrollen
   nur noch so hoch wie die Kopfzeile und damit unsichtbar. */
.nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(15, 13, 12, 0);
  transition: background 0.6s var(--ease-lux);
}
body.scrolled .nav {
  border-bottom-color: var(--hairline);
  padding-top: 0.7rem; padding-bottom: 0.7rem;
}
body.scrolled .nav::before {
  background: rgba(15, 13, 12, 0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.nav-brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.nav-brand .marke { flex: 0 0 auto; }
.brand-main { font-family: var(--serif); font-weight: 600; font-size: 1.6rem; line-height: 1; color: var(--ink); }
.nav-links { display: flex; gap: 2.1rem; align-items: center; list-style: none; }
.nav-links a { color: var(--ink-soft); text-decoration: none; font-size: 0.98rem; letter-spacing: 0.02em; transition: color 0.3s; }
.nav-links a:hover { color: var(--ember-hot); }

.nav-toggle { display: none; background: none; border: 1px solid var(--hairline-gold); border-radius: var(--radius); width: 44px; height: 40px; cursor: pointer; position: relative; z-index: 52; }
.nav-toggle span {
  position: absolute; left: 11px; right: 11px; height: 2px; background: var(--ember);
  transition: transform 0.5s var(--ease-lux), opacity 0.3s;
}
.nav-toggle span:nth-child(1) { top: 13px; }
.nav-toggle span:nth-child(2) { top: 23px; }
body.menu-open .nav-toggle span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 860px) {
  .to-top { width: 46px; height: 46px; right: 0.9rem; bottom: 0.9rem; }
  /* margin-left: auto schiebt den Knopf an den rechten Rand. Ohne stand er
     mittig: das <nav> mit dem festen Menue bleibt als leeres drittes
     Flex-Element in der Zeile, und space-between verteilt auf drei. */
  .nav-toggle { display: block; margin-left: auto; }
  .nav-links {
    position: fixed; inset: 0; z-index: 51;
    flex-direction: column; justify-content: center; gap: 1.7rem;
    background: rgba(13, 11, 10, 0.97);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    opacity: 0; pointer-events: none;
    transition: opacity 0.5s var(--ease-lux);
  }
  .nav-links a { font-family: var(--serif); font-weight: 600; font-size: 2rem; color: var(--ink); opacity: 0; transform: translateY(24px); transition: opacity 0.55s var(--ease-lux), transform 0.55s var(--ease-lux); }
  body.menu-open .nav-links { opacity: 1; pointer-events: auto; }
  body.menu-open .nav-links a { opacity: 1; transform: none; }
  body.menu-open .nav-links li:nth-child(1) a { transition-delay: 0.08s; }
  body.menu-open .nav-links li:nth-child(2) a { transition-delay: 0.14s; }
  body.menu-open .nav-links li:nth-child(3) a { transition-delay: 0.2s; }
  body.menu-open .nav-links li:nth-child(4) a { transition-delay: 0.26s; }
  body.menu-open .nav-links li:nth-child(5) a { transition-delay: 0.32s; }
}

/* ---------- Hero: ein Foto, Text mittig ---------- */

.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; align-items: center;
  padding: 7rem var(--pad) 5rem;
  overflow: hidden;
  background: var(--bg);
}
.hero-bild { position: absolute; inset: 0; overflow: hidden; }
.hero-bild img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 60%;
  filter: saturate(0.92) brightness(0.72);
}
/* Drei kurze Clips laufen im Kreis ueber dem Foto. Das Foto steht sofort,
   der Clip blendet erst ein, wenn er wirklich laeuft (Klasse .on aus main.js);
   ohne Autoplay oder bei reduzierter Bewegung bleibt das Foto. */
/* max-width: none ist Pflicht: die globale Regel video { max-width: 100% }
   deckelte die Breite, das Video endete rechts vor dem Rand und das Foto
   darunter schaute als Streifen durch (gemeldet von Chris am 27.10.2026). */
.hero-bild .hv {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; opacity: 0;
  filter: saturate(0.95) brightness(0.7);
  transition: opacity 2.4s ease;
}
.hero-bild .hv.on { opacity: 1; }
/* Kraeftig abdunkeln: das Foto ist in der Mitte hell, der Text muss darauf
   4,5:1 halten (Regel 7). Unten in den Seitengrund auslaufen. */
.hero-bild .hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(15, 13, 12, 0.6), rgba(15, 13, 12, 0.6)),
    radial-gradient(70% 60% at 50% 55%, rgba(15, 13, 12, 0.35), transparent 70%),
    linear-gradient(to top, var(--bg) 0%, rgba(15, 13, 12, 0) 32%),
    linear-gradient(to bottom, rgba(15, 13, 12, 0.7) 0%, rgba(15, 13, 12, 0) 26%);
}

.hero-inner { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; width: 100%; }
.hero-copy { max-width: 56rem; margin: 0 auto; text-align: center; }
.hero-marke { display: block; margin: 0 auto 1.7rem; opacity: 0.92; filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.65)); }
/* Die Headline traegt jetzt eine ganze Aussage (Flammkuchen, Achern, 1986):
   eine Stufe kleiner als die Display-Groesse, damit sie in drei Zeilen steht. */
.hero .display { font-size: clamp(2.7rem, 1.5rem + 4.6vw, 5.6rem); line-height: 1.04; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55); }
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 2.6rem; }

@media (max-width: 960px) {
  .hero { padding-top: 6.5rem; }
}
/* Handy quer (z. B. 844 x 390): Headline kleiner, Traube weg, damit
   Ueberschrift und beide Knoepfe ohne Scrollen ins Bild passen. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { padding-top: 4.6rem; padding-bottom: 2rem; }
  .hero-marke { display: none; }
  .hero .display { font-size: clamp(2rem, 1rem + 3.4vw, 2.8rem); }
  .hero-ctas { margin-top: 1.4rem; }
}

/* ---------- Sektionen ---------- */

section { position: relative; z-index: 2; }
.wrap { max-width: 1280px; margin: 0 auto; padding: clamp(5rem, 10vw, 9rem) var(--pad); }

.media { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.media img { width: 100%; display: block; filter: saturate(0.98) contrast(1.03) brightness(0.94); }

/* Reveals ohne JavaScript: beim Hereinscrollen weich auftauchen.
   Ohne Unterstuetzung (aeltere Browser) bleibt der Inhalt einfach sichtbar. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    [data-reveal] {
      animation: auftauchen linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 30%;
    }
  }
}
@keyframes auftauchen {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}
.no-js [data-reveal] { opacity: 1 !important; transform: none !important; animation: none !important; }

/* ---------- Die Trotte (Geschichte) ---------- */

.story { background: var(--bg); }
.story-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.story-imgs { position: relative; padding-bottom: 12%; }
.story-imgs .presse { width: 76%; }
.story-imgs .presse img { aspect-ratio: 3 / 4; object-fit: cover; }
.story-imgs .berg { position: absolute; width: 50%; right: 0; bottom: 0; }
.story-imgs .berg img { aspect-ratio: 3 / 4; object-fit: cover; }
.story-copy h2 { margin-bottom: 1.6rem; }
.story-copy p { color: var(--ink-soft); margin-bottom: 1.2rem; max-width: 36em; font-size: 1.08rem; }
.story-copy p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-imgs { margin-bottom: 2rem; }
}
/* Auf dem Handy wirkt der versetzte Bildstapel wie ein Fehler: die Bilder
   ueberlappen sich stark. Dort deshalb ruhig nebeneinander, gleich gross. */
@media (max-width: 720px) {
  .story-imgs { padding-bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
  .story-imgs .presse { width: 100%; }
  .story-imgs .berg { position: static; width: 100%; }
}

/* ---------- Der Ofen: Text neben dem echten Foto ---------- */

.ofen { background: var(--bg-2); }
/* Farbband-Regel (website-builder R6): Ofen und Galerie haben einen anderen
   Grundton als ihre Nachbarn. Sind sie kuerzer als das Fenster, schaut auf
   hohen Bildschirmen der Nachbarton herein. Deshalb mindestens Fensterhoehe
   minus Kopfzeile, Inhalt senkrecht mittig. Die Galerie ist meist ohnehin
   hoeher, die Regel greift dort erst ab etwa 1400 px Fensterhoehe. */
.ofen, .galerie {
  min-height: 100vh;
  min-height: calc(100svh - 4rem);
  display: flex; flex-direction: column; justify-content: center;
}
.ofen > .wrap, .galerie > .wrap { width: 100%; }
.ofen-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.ofen-copy h2 { margin-bottom: 1.4rem; }
.ofen-bild img { aspect-ratio: 1; object-fit: cover; }
@media (max-width: 900px) {
  .ofen-grid { grid-template-columns: 1fr; }
  .ofen-bild { max-width: 560px; }
}

/* ---------- Karte: Blaetter zum Wischen (Muster 1842 Bar) ----------
   Oben die Reiter Speisen/Getraenke, darunter die Untergruppen, dann je
   Untergruppe ein Blatt in einem Scroll-Container mit Einrasten. Pfeile,
   Zaehler und Tastatur regelt main.js; ohne JavaScript bleibt alles wischbar. */

.karte { background: var(--bg); overflow: hidden; }
.karte-head { text-align: center; max-width: 720px; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.karte-head .hinweis { margin-top: 1rem; }

.register { display: flex; gap: .25rem; justify-content: center; flex-wrap: wrap; }
.register-gruppen { margin-bottom: .5rem; }
.register-unter { margin-bottom: 1.2rem; }
.register button {
  background: none; border: 0; cursor: pointer;
  padding: .55rem .95rem; min-height: 44px; border-radius: var(--radius);
  font-family: var(--sans); font-size: .95rem; letter-spacing: .02em; color: var(--ink-dim);
  transition: color .3s, background .3s;
}
.register-gruppen button { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; padding: .35rem 1.1rem; }
.register button:hover { color: var(--ink); }
.register button[aria-selected="true"] { color: var(--ink); background: var(--bg-3); }
.register button[hidden] { display: none; }

.buch { position: relative; }
/* align-items: stretch: alle Blaetter so hoch wie das hoechste. Weil build.py
   die Positionen auf gleich volle Seiten verteilt, bleibt dabei kaum Luft, und
   beim Wischen springt nichts mehr. Eine Seite ist schmal wie eine Kartenseite,
   links und rechts schauen die Nachbarblaetter herein. */
.blaetter {
  display: flex; gap: 2rem; align-items: stretch;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 1.5rem max(.5rem, calc((100% - 640px) / 2)) 3rem;
  margin-bottom: -1.5rem;
}
.blaetter::-webkit-scrollbar { display: none; }
.blaetter:focus-visible { outline-offset: -3px; }
.blatt {
  flex: 0 0 min(100%, 640px); scroll-snap-align: center; scroll-snap-stop: always;
  background: var(--bg-3); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.2rem) clamp(1.2rem, 1rem + 2vw, 2.4rem);
  display: flex; flex-direction: column; gap: 1.1rem;
}
.blatt .drinks { flex: 1 0 auto; }
.blatt-fuss { margin-top: auto; }
.blatt-kopf { display: grid; gap: .4rem; }
.blatt-kopf h3 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); line-height: .95; }
.herkunft { color: var(--ink-soft); font-size: 1.02rem; }

/* Eine Spalte wie auf der gedruckten Karte: so ist die Seitenhoehe auf Handy
   und Desktop gleich vorhersehbar und build.py kann gleich volle Seiten bilden. */
.drinks { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; align-content: start; }
.drink {
  display: grid; grid-template-columns: 1fr auto; gap: .1rem 1.5rem; align-items: baseline;
  padding-bottom: .55rem; border-bottom: 1px solid var(--hairline);
}
.drink:last-child { border-bottom: 0; padding-bottom: 0; }
.drink b { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; line-height: 1.15; color: var(--ink); }
.drink .tag { font-family: var(--sans); font-size: .82rem; color: #9fb98a; margin-left: .4rem; white-space: nowrap; }
.drink .preis { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; color: var(--ink); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.drink .preis small { display: inline-block; font-family: var(--sans); font-weight: 400; font-size: .8rem; color: var(--ink-dim); margin: 0 .35rem 0 .9rem; }
.drink .preis small:first-child { margin-left: 0; }
.drink .zutaten { grid-column: 1 / -1; color: var(--ink-dim); font-size: .92rem; }
/* Drei und mehr Preisgroessen: Preise unter dem Namen statt daneben */
.drink--breit b, .drink--breit .preis { grid-column: 1 / -1; }
.drink--breit .preis { text-align: left; margin-top: .15rem; }
/* Zwischenueberschrift innerhalb eines Blatts (Klassisch, Herzhaft, Fassweine ...) */
.drink-gruppe { grid-column: 1 / -1; padding-top: .8rem; }
.drink-gruppe:first-child { padding-top: 0; }
.drink-gruppe h4 { font-size: 1.6rem; }
.drink-gruppe p { color: var(--ink-dim); font-size: .92rem; margin-top: .15rem; }
.blatt-note { color: var(--ink-dim); font-size: .92rem; max-width: 46em; }
.blatt-fuss {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: .6rem; border-top: 1px solid var(--hairline);
  font-size: .88rem; color: var(--ink-dim);
}

.blaettern { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin-top: .5rem; }
.blaettern button {
  background: var(--ember); color: #180f08; border: 0; cursor: pointer;
  width: 3rem; height: 3rem; border-radius: 50%;
  font-family: var(--serif); font-size: 1.7rem; line-height: 1; display: grid; place-items: center;
  transition: transform .35s var(--ease-lux), opacity .3s;
}
.blaettern button:hover { transform: translateY(-2px); }
.blaettern button:disabled { opacity: .3; cursor: default; transform: none; }
.zaehler { font-variant-numeric: tabular-nums; font-size: .95rem; color: var(--ink-soft); min-width: 6ch; text-align: center; }
.blatt-hinweis { text-align: center; margin-top: 1.2rem; }
.karte-fuss { text-align: center; margin-top: .4rem; }

/* Blaetter neben dem mittleren leicht zuruecknehmen, gekoppelt an die
   waagerechte Scroll-Position; ohne Unterstuetzung stehen alle gleich. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .blatt { animation: blatt linear both; animation-timeline: view(inline); animation-range: cover 0% cover 100%; }
  }
}
@keyframes blatt {
  0% { transform: scale(.96); opacity: .55; }
  50% { transform: none; opacity: 1; }
  100% { transform: scale(.96); opacity: .55; }
}

/* ---------- Wein ---------- */

.wein { background: linear-gradient(var(--bg-2), var(--bg) 22%); }
.wein-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.wein-text h3 { margin-bottom: 1rem; font-size: var(--h3); }
.wein-text p { color: var(--ink-soft); margin-bottom: 1rem; max-width: 34em; font-size: 1.08rem; }
.wein-text p:last-child { color: var(--ink-dim); font-size: 0.98rem; margin-bottom: 0; }
.wein-side .media img { aspect-ratio: 3 / 4.2; object-fit: cover; }
@media (max-width: 900px) {
  .wein-grid { grid-template-columns: 1fr; }
  .wein-side { max-width: 400px; }
}

/* ---------- Galerie ---------- */

.galerie { background: var(--bg-2); }
.g-raster {
  display: grid; gap: clamp(.5rem, 1.2vw, .9rem);
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(2rem, 4vw, 3rem);
}
/* Das erste Bild bekommt doppelte Flaeche, sonst wirkt das Raster wie ein Katalog */
.g-raster .g-bild:first-child { grid-column: span 2; grid-row: span 2; }
.g-bild {
  position: relative; padding: 0; border: 0; cursor: zoom-in; overflow: hidden;
  border-radius: var(--radius); background: var(--bg-3); aspect-ratio: 1;
}
.g-bild img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.98) brightness(.9);
  transition: transform .8s var(--ease-lux), filter .5s ease;
}
@media (hover: hover) {
  .g-bild:hover img { transform: scale(1.05); filter: saturate(1.04) brightness(1); }
}

@media (max-width: 860px) {
  .g-raster { grid-template-columns: repeat(2, 1fr); }
  .g-raster .g-bild:first-child { grid-column: span 2; grid-row: span 1; aspect-ratio: 16 / 10; }
}

/* Grossansicht */
.g-gross {
  position: fixed; inset: 0; z-index: 90; display: none;
  place-items: center; padding: clamp(1rem, 4vw, 3rem);
  background: rgba(8, 6, 5, .93);
}
.g-gross.auf { display: grid; }
.g-gross img { max-width: min(100%, 1000px); max-height: 76vh; border-radius: var(--radius); box-shadow: var(--shadow); }
.g-gross figcaption { margin-top: 1rem; text-align: center; color: var(--ink-soft); font-size: .98rem; }
.g-zu {
  position: absolute; top: clamp(.8rem, 2vw, 1.6rem); right: clamp(.8rem, 2vw, 1.6rem);
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: transparent; border: 1px solid var(--hairline-gold); color: var(--ember-hot);
  display: grid; place-items: center; transition: background .3s, color .3s;
}
.g-zu:hover { background: var(--ember); color: #191206; }

/* ---------- Stimmen ---------- */

/* Der Bereich steht auf einem Foto des Hauses, kraeftig abgedunkelt.
   Der Text bleibt dadurch lesbar, der Abschnitt bekommt aber Tiefe. */
.stimmen { position: relative; overflow: hidden; background: var(--bg-2); isolation: isolate; }
.stimmen-grund { position: absolute; inset: 0; z-index: -1; }
.stimmen-grund img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; opacity: .5; }
.stimmen-grund::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(11,9,8,.62), rgba(11,9,8,.94) 78%);
}
.stimmen-inner { max-width: 44rem; margin: 0 auto; text-align: center; }
/* Sterne liegen doppelt: graue Grundreihe, darueber die goldene Reihe auf
   den echten Bewertungsanteil beschnitten. So zeigt 4,6 auch wirklich 4,6. */
.sterne-reihe { position: relative; display: inline-block; margin-bottom: .55rem; line-height: 0; }
.sterne-lage { display: flex; gap: .35rem; white-space: nowrap; }
.sterne-voll { position: absolute; top: 0; left: 0; overflow: hidden; }
.sterne-leer .stern { fill: rgba(255,255,255,.16); }
.stern { width: 22px; height: 22px; fill: var(--ember); flex: 0 0 auto; }
.note-wert { margin: 0 0 1.1rem; font-size: .95rem; color: var(--ink-soft); }
.stimmen .h-section { margin-bottom: 2rem; }

/* ---------- Besuch ---------- */

.besuch { background: linear-gradient(var(--bg-2), var(--bg) 30%); }
.besuch-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.besuch h2 { margin-bottom: 1.4rem; }
.besuch .zeiten { margin: 2.2rem 0 0; border-top: 1px solid var(--hairline-gold); }
.besuch .zeiten div { display: flex; justify-content: space-between; padding: 0.9rem 0.2rem; border-bottom: 1px solid var(--hairline); }
.besuch .zeiten .tag-n { color: var(--ink-soft); }
.besuch .zeiten .tag-z { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; color: var(--ink); }
.besuch .zeiten .ruhetag .tag-z { color: var(--ink-dim); font-weight: 400; font-style: italic; }
.besuch-card {
  background: var(--bg-3);
  border-radius: var(--radius);
  padding: clamp(1.9rem, 4vw, 3rem);
  box-shadow: var(--shadow);
}
.besuch-card h3 { font-size: var(--h3); margin-bottom: 0.4rem; }
.besuch-card .tel-gross { font-family: var(--serif); font-weight: 600; font-size: clamp(2.2rem, 4.5vw, 3rem); color: var(--ember-hot); text-decoration: none; display: inline-block; margin: 1rem 0 0.6rem; }
.besuch-card .tel-gross:hover { color: var(--ember); }
.besuch-card p { color: var(--ink-soft); }
.besuch-card .adresse { margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid var(--hairline); color: var(--ink-soft); font-style: normal; }
@media (max-width: 900px) { .besuch-grid { grid-template-columns: 1fr; } }

/* Karte (statisch, lokal, kein Tracking) */
.karte-block { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.karte-map {
  position: relative; display: block; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow 0.6s var(--ease-lux);
}
.karte-map img { width: 100%; aspect-ratio: 1024 / 460; object-fit: cover; display: block; transition: transform 1.2s var(--ease-lux); }
.karte-map::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 30%, transparent 40%, rgba(10, 8, 7, 0.5) 100%);
}
@media (hover: hover) {
  .karte-map:hover img { transform: scale(1.03); }
}
/* Zwei Wege zur Route: Google Maps fuer alle, Apple Karten fuers iPhone.
   Die Links laden nichts vor, erst der Klick oeffnet den Kartendienst. */
.route-reihe { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.1rem; }
.route-reihe .btn { flex: 0 1 auto; }
@media (max-width: 560px) { .route-reihe .btn { flex: 1 1 100%; } }
.karte-attr { margin-top: 0.9rem; font-size: 0.9rem; color: var(--ink-dim); }

/* ---------- Nach-oben-Knopf (Flammkuchen) ---------- */
.to-top {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 45;
  width: clamp(52px, 7vw, 66px); height: clamp(52px, 7vw, 66px); border-radius: 50%;
  display: grid; place-items: center; overflow: hidden; text-decoration: none;
  /* Traube aus dem Logo auf dunkler Muenze, feiner Goldrand wie die Knoepfe */
  background: var(--bg-3); border: 1px solid var(--hairline-gold);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42);
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(0.9);
  transition: opacity 0.5s var(--ease-lux), transform 0.5s var(--ease-lux), visibility 0.5s, border-color 0.3s;
}
.to-top-traube { display: block; transition: transform 0.5s var(--ease-lux); }
.to-top:hover { border-color: var(--ember); }
.to-top:hover .to-top-traube { transform: translateY(-3px); }
body.show-top .to-top { opacity: 1; visibility: visible; transform: none; }
/* Am Seitenende ausblenden: dort deckt er sonst Adresse und Zeiten zu */
body.am-ende .to-top { opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.9); }
.to-top:active { transform: scale(0.94); }

/* ---------- Footer ---------- */

footer { background: #0b0908; border-top: 1px solid var(--hairline); }
.foot { max-width: 1280px; margin: 0 auto; padding: clamp(3rem, 6vw, 4.5rem) var(--pad) 2rem; color: var(--ink-dim); font-size: 0.98rem; }
.foot a { color: var(--ink-soft); text-decoration: none; }
.foot a:hover { color: var(--ember-hot); }

.foot-grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem 3rem; align-items: start;
  padding-bottom: 2.4rem; margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--hairline);
}
.foot-brand .marke { margin-bottom: 0.9rem; }
.foot-name { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; color: var(--ink); margin-bottom: 0.45rem; }
.foot-claim { max-width: 26em; line-height: 1.6; }
.foot-label { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; color: var(--ink); margin-bottom: 0.8rem; }
.foot-col address { font-style: normal; line-height: 1.6; }
.foot-col p { line-height: 1.6; }
.foot-tel { display: inline-block; margin-top: 0.55rem; font-family: var(--serif); font-weight: 600; font-size: 1.4rem; color: var(--ember-hot) !important; }
.foot-ruhe { margin-top: 0.45rem; }

.foot-base { display: flex; flex-wrap: wrap; gap: 0.9rem 2.5rem; align-items: center; justify-content: space-between; font-size: 0.92rem; }
.foot-base .legal { display: flex; gap: 1.6rem; }
/* Fingerfreundliche Trefferflaeche, ohne die Optik zu veraendern */
.foot-base .legal a, .foot-credit a { display: inline-block; padding: 0.55rem 0; }
.foot-credit a { color: var(--ink-dim); border-bottom: 1px solid transparent; }
.foot-credit a:hover { color: var(--ink-soft); border-bottom-color: var(--hairline-gold); }

@media (max-width: 820px) {
  .foot-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---------- Rechtsseiten ---------- */

.legal-page { max-width: 800px; margin: 0 auto; padding: 9rem var(--pad) 5rem; }
.legal-page h1 { font-size: var(--h2); margin-bottom: 2.2rem; }
.legal-page h2 { font-size: 1.9rem; margin: 2.6rem 0 0.9rem; color: var(--ink); }
.legal-page h3 { font-size: 1.4rem; margin: 1.8rem 0 0.6rem; }
.legal-page p, .legal-page li { color: var(--ink-soft); margin-bottom: 0.9rem; }
.legal-page ul { padding-left: 1.3rem; }

/* ---------- FAQ ----------
   Native details/summary: klappt ohne JavaScript auf, ist mit Tastatur
   bedienbar und wird von Screenreadern als Gruppe angesagt. */
.faq { background: var(--bg); padding-bottom: 6rem; }
.faq .h-section { text-align: center; margin-bottom: 2.6rem; }
.faq-liste { max-width: 46rem; margin: 0 auto; }

.faq-punkt { border-top: 1px solid var(--hairline); }
.faq-punkt:last-child { border-bottom: 1px solid var(--hairline); }

.faq-punkt summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  padding: 1.25rem .25rem; min-height: 48px;
  font-family: var(--serif); font-weight: 600; font-size: 1.35rem; line-height: 1.25;
  color: var(--ink);
  transition: color .18s ease;
}
.faq-punkt summary::-webkit-details-marker { display: none; }
.faq-punkt summary:hover { color: var(--ember-hot); }

/* Pluszeichen, das sich beim Aufklappen zum Minus dreht */
.faq-punkt summary::after {
  content: ""; flex: 0 0 auto; width: 13px; height: 13px;
  background:
    linear-gradient(var(--ember), var(--ember)) center/13px 1.5px no-repeat,
    linear-gradient(var(--ember), var(--ember)) center/1.5px 13px no-repeat;
  transition: transform .25s ease;
}
.faq-punkt[open] summary::after { transform: rotate(135deg); }

.faq-text { padding: 0 .25rem 1.35rem; }
.faq-text p { margin: 0; max-width: 40rem; color: var(--ink-soft); line-height: 1.7; }

@media (max-width: 640px) {
  .faq { padding-bottom: 4rem; }
  .faq-punkt summary { font-size: 1.2rem; padding: 1.1rem .15rem; }
}

/* Kein Hintergrundmuster (website-builder R4): auf dem dunklen Grund bringt es
   nichts, die Tiefe kommt aus den abgesetzten Flaechen. Von Chris am 27.10.2026
   gestrichen. */

/* ---------- Touch-Ziele ----------
   Auf Beruehrungsbildschirmen mindestens 44px hoch (Menue, Kapitel, Footer-
   Links). Mit Maus bleiben sie schlank. */
@media (hover: none) {
  .nav-toggle { height: 44px; }
  .nav-brand { min-height: 44px; }
  .nav-links a { padding: .4rem .8rem; }
  .foot-tel { padding: .45rem 0; }
  .foot-base .legal a, .foot-credit a { padding-top: .75rem; padding-bottom: .75rem; }
}

/* Unsichtbarer Traeger fuer das Trauben-Symbol der Kartenblaetter */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }