/* ============================================
   TURMWIRT — Design System v2
   Elegant-Modern mit geschwungenen Bögen
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

/* --- Custom Properties --- */
:root {
  --color-primary: #2E7D32;
  --color-primary-dark: #1B5E20;
  --color-primary-light: #4CAF50;
  --color-primary-pale: #E8F5E9;
  --color-primary-muted: #A5D6A7;
  --color-accent: #F9A825;
  --color-white: #FFFFFF;
  --color-offwhite: #FAFAFA;
  --color-black: #1A1A1A;
  --color-gray-900: #212121;
  --color-gray-700: #424242;
  --color-gray-500: #757575;
  --color-gray-300: #E0E0E0;
  --color-gray-100: #F5F5F5;
  --color-cream: #FFFDE7;
  --color-overlay: rgba(30, 30, 30, 0.55);
  --color-overlay-green: rgba(27, 94, 32, 0.85);

  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-xs: 0.975rem;
  --fs-sm: 1.14rem;
  --fs-base: 1.3rem;
  --fs-lg: 1.46rem;
  --fs-xl: 1.625rem;
  --fs-2xl: 1.95rem;
  --fs-3xl: 2.6rem;
  --fs-4xl: 3.575rem;
  --fs-5xl: 4.55rem;
  --fs-6xl: 5.85rem;

  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  --max-width: 1200px;
  --max-width-narrow: 800px;
  --border-radius: 6px;
  --border-radius-lg: 12px;
  --border-radius-xl: 20px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.1);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.12);

  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  line-height: 1.7;
  color: var(--color-gray-700);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary-dark); }
ul, ol { list-style: none; }

/* --- Utility --- */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-xl); }
.container-narrow { max-width: var(--max-width-narrow); margin: 0 auto; padding: 0 var(--space-xl); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.text-center { text-align: center; }

/* --- Typografie --- */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-gray-900);
  line-height: 1.2;
  font-weight: var(--fw-bold);
  /* Lange deutsche Komposita ragen in der schmalen Ansicht sonst aus dem
     Layout und ziehen die ganze Seite in die Breite — „Datenschutzerklärung"
     brauchte bei 52 px 515 px auf 351 px Platz und erzeugte 132 px
     Seitwärts-Scroll (gefunden im Browser 06.08.2026). */
  overflow-wrap: break-word;
  hyphens: auto;
}

h1 { font-size: var(--fs-5xl); margin-bottom: var(--space-lg); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-3xl); margin-bottom: var(--space-md); }
h3 { font-size: var(--fs-2xl); margin-bottom: var(--space-md); }
h4 { font-size: var(--fs-xl); margin-bottom: var(--space-sm); }

.subtitle {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--fw-normal);
  color: var(--color-primary);
  font-size: var(--fs-xl);
}

.lead {
  font-size: var(--fs-lg);
  line-height: 1.8;
  color: var(--color-gray-500);
  font-weight: var(--fw-light);
}

p { margin-bottom: var(--space-md); }

/* --- Geschwungener Bogen (SVG-Divider) --- */
.curve-divider {
  position: relative;
  width: 100%;
  line-height: 0;
  overflow: hidden;
}

.curve-divider svg {
  display: block;
  width: 100%;
  height: auto;
}

.curve-top {
  margin-bottom: -1px;
}

.curve-bottom {
  margin-top: -1px;
}

/* --- Header --- */
.site-header {
  background: var(--color-white);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow var(--transition);
}

.site-header.scrolled {
  box-shadow: var(--shadow-md);
}

.header-top {
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-xs) 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  letter-spacing: 0.3px;
}

.header-top .container {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-xl);
  align-items: center;
}

.header-top a {
  color: rgba(255,255,255,0.85);
  transition: color var(--transition);
}

.header-top a:hover { color: var(--color-white); }

.header-main {
  padding: 0;
}

.header-main .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  text-decoration: none;
}

.logo-icon {
  height: 70px;
  width: auto;
  object-fit: contain;
  padding: var(--space-xs) 0;
}

.logo-text {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: 3px;
  color: var(--color-gray-900);
}

.logo-text em {
  color: var(--color-primary);
  font-style: normal;
}

/* Navigation */
.main-nav > ul {
  display: flex;
  gap: 0;
  align-items: center;
}

.main-nav > ul > li {
  position: relative;
}

.main-nav a,
.main-nav .nav-parent-label {
  display: block;
  padding: var(--space-sm) var(--space-md);
  color: var(--color-gray-700);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.5px;
  position: relative;
  transition: color var(--transition);
  cursor: pointer;
  white-space: nowrap;
}

/* .nav-parent-label ist ein <button>, damit das Dropdown per Tastatur
   aufgeht. Hier nur die Browser-Vorgaben des Buttons zurücknehmen —
   es soll aussehen wie die Links daneben. */
.main-nav .nav-parent-label {
  background: none;
  border: 0;
  font-family: inherit;
  text-align: inherit;
}

/* Sichtbarer Fokusring — die Navigation wird jetzt durchtabbt */
.main-nav a:focus-visible,
.main-nav .nav-parent-label:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

.main-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: all var(--transition);
  transform: translateX(-50%);
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--color-primary);
}

.main-nav a:hover::after,
.main-nav a.active::after {
  width: 60%;
}

/* Dropdown-Pfeil */
.nav-parent-label::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-left: 6px;
  margin-bottom: 2px;
  transition: transform var(--transition);
}

/* Dropdown-Menü (Desktop) */
.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color-white);
  min-width: 200px;
  box-shadow: var(--shadow-lg);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  border-top: 2px solid var(--color-primary);
  padding: var(--space-xs) 0;
  z-index: 120;
}

.nav-dropdown li { display: block; }

.nav-dropdown a {
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--fs-sm);
  display: block;
}

.nav-dropdown a::after { display: none; }

.nav-dropdown a:hover {
  background: var(--color-primary-pale);
  color: var(--color-primary);
}

/* Dropdown bei Hover öffnen (Desktop) */
@media (min-width: 769px) {
  /* Maus öffnet per :hover, Tastatur per .open (gesetzt in initNavigation).
     Bewusst kein :focus-within — das würde per CSS öffnen, während
     aria-expanded per JS läuft, und beide liefen auseinander. */
  .has-dropdown:hover > .nav-dropdown,
  .has-dropdown.open > .nav-dropdown {
    display: block;
  }
  .has-dropdown:hover > .nav-parent-label {
    color: var(--color-primary);
  }
  .has-dropdown:hover > .nav-parent-label::after {
    transform: rotate(-135deg);
    margin-bottom: -1px;
  }
}

/* Hamburger */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
  z-index: 110;
}

.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--color-gray-900);
  margin: 6px 0;
  transition: all var(--transition);
  border-radius: 2px;
}

.nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

/* --- Hero --- */
.hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-gray-300);
  background-size: cover;
  background-position: center;
  color: var(--color-white);
  text-align: center;
  overflow: hidden;
}

.hero::after {
  display: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 620px;
  padding: var(--space-2xl) var(--space-xl);
  background: rgba(27, 94, 32, 0.75);
  border-radius: var(--border-radius-lg);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.hero h1 {
  color: var(--color-white);
  font-size: var(--fs-6xl);
  margin-bottom: var(--space-md);
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.hero .subtitle {
  color: rgba(255,255,255,0.95);
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-xl);
}

.hero p { color: rgba(255,255,255,0.85); font-size: var(--fs-lg); }

/* Hero-Bogen: Kurve am unteren Rand (links flach, rechts hochgezogen — wie Bogen.svg) */
.hero::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 80px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 80' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,80 L0,55 C580,55 1100,55 1440,0 L1440,80 Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  z-index: 3;
}

/* Hero-Buttons: Outline-Buttons bekommen dunkel-grünen Hintergrund */
.hero-buttons .btn-outline,
.hero-content .btn-outline {
  background: rgba(27, 94, 32, 0.7);
}

.hero-buttons .btn-outline:hover,
.hero-content .btn-outline:hover {
  background: var(--color-primary);
}

.hero-buttons .btn-white:hover {
  background: rgba(27, 94, 32, 0.7);
}

/* Hero-Buttons: unterhalb des Content-Kastens, volle Breite, zentriert */
.hero-buttons {
  position: absolute;
  bottom: 100px;
  left: 0;
  width: 100%;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding: 0 var(--space-xl);
}

/* Der Textkasten ist im Hero mittig zentriert, die Buttons sitzen absolut
   über dem Bogen — beide wussten nichts voneinander. Ohne diese Reserve
   wächst der Kasten in die Buttons hinein: 12 px bei 1100–1440 px, 91 px
   ab 1024 px abwärts, wo die Buttons in zwei Reihen umbrechen. Sichtbar in
   den ersten zwei Sekunden, bevor der Kasten zusammenklappt — ohne
   JavaScript dauerhaft. (Gemessen im Browser 06.08.2026.)
   Unterhalb 769 px greift die eigene Bildband-Anordnung weiter unten. */
@media (min-width: 769px) {
  /* Bis 1024 px brechen die Buttons in zwei Reihen um und brauchen mehr.
     padding-top hält den Kasten bei kurzen Fenstern vom Header weg. */
  .hero-slider { padding-top: var(--space-lg); padding-bottom: 260px; }
}

@media (min-width: 1025px) {
  .hero-slider { padding-bottom: 180px; }
}

/* Kleinerer Hero für Unterseiten */
.hero-sm {
  min-height: 45vh;
}

.hero-sm h1 {
  font-size: var(--fs-4xl);
}

/* ------------------------------------------------------------
   Einheitlicher Titelkasten auf den Unterseiten
   ------------------------------------------------------------
   Vorher zog der Kasten seine Größe aus dem Inhalt und sprang
   beim Seitenwechsel: Breite 416–620 px, Höhe 181–387 px
   (gemessen 06.08.2026). Ursachen: zweizeilige Titel („Zimmer &
   Übernachtung", „Feiern beim Turmwirt"), zweizeilige Untertitel
   und kontakt.html ganz ohne Untertitel.

   Jetzt feste Breite und feste Mindesthöhe, Inhalt darin
   senkrecht zentriert — auf allen Unterseiten identisch.
   Die Höhe richtet sich nach dem größten Fall (zweizeiliger
   Titel + zweizeiliger Untertitel = zimmer.html).

   Nur ab Tablet aufwärts: schmal soll der Kasten mitwachsen.
   Greift nur, solange der Kasten IM Bild liegt — bei
   zugeschaltetem css/hero-unten.css wird beides zurückgesetzt.
   ------------------------------------------------------------ */
@media (min-width: 769px) {
  .hero-sm .hero-content {
    width: 620px;
    max-width: 100%;
    min-height: 390px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Der Kasten braucht Bild um sich herum, sonst füllt er den
     ganzen Hero aus und das Foto verschwindet dahinter. */
  .hero-sm {
    min-height: 560px;
  }
}

/* --- Buttons --- */
.btn {
  display: inline-block;
  padding: 14px 36px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border-radius: 50px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(46,125,50,0.3);
}

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-outline:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-2px);
}

.btn-white {
  background: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-white);
}

.btn-white:hover {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
  transform: translateY(-2px);
}

.btn-group {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: center;
}

/* --- Sections --- */
.section {
  padding: var(--space-5xl) 0;
}

.section-sm {
  padding: var(--space-3xl) 0;
}

.section-green {
  background: var(--color-primary);
  color: var(--color-white);
}

.section-green h2,
.section-green h3,
.section-green h4 {
  color: var(--color-white);
}

.section-green p,
.section-green .lead {
  color: rgba(255,255,255,0.85);
}

.section-green .subtitle {
  color: rgba(255,255,255,0.9);
}

/* Day-Card innerhalb von section-green: dunkle Textfarben beibehalten */
.section-green .day-card {
  color: var(--color-gray-900);
}
.section-green .day-card strong,
.section-green .day-card .menu-item {
  color: var(--color-gray-900);
}
.section-green .day-card small,
.section-green .day-card .menu-vorspeise {
  color: var(--color-gray-600);
}

.section-pale {
  background: var(--color-primary-pale);
}

.section-cream {
  background: var(--color-cream);
}

.section-header {
  text-align: center;
  max-width: 650px;
  margin: 0 auto var(--space-3xl);
}

.section-header .subtitle {
  margin-bottom: var(--space-sm);
}

/* Dekorative Linie unter Section-Header */
.section-header::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--color-primary);
  margin: var(--space-lg) auto 0;
  border-radius: 2px;
}

.section-green .section-header::after {
  background: var(--color-primary-muted);
}

/* --- CTA Badge --- */
.cta-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-white);
  color: var(--color-gray-900);
  padding: var(--space-xl) var(--space-2xl);
  border-radius: var(--border-radius-xl);
  text-align: center;
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition), box-shadow var(--transition);
  border: 1px solid var(--color-gray-300);
  width: 100%;
  max-width: 420px;
}

.cta-badge:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  color: var(--color-gray-900);
}

.cta-badge .label {
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--color-primary);
  font-size: var(--fs-lg);
  margin-bottom: var(--space-xs);
}

.cta-badge .phone {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  letter-spacing: 1px;
  line-height: 1.15;
}

.cta-badge .hours {
  font-size: var(--fs-sm);
  color: var(--color-gray-500);
  margin-top: var(--space-xs);
}

/* --- Cards --- */
.card {
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: all var(--transition);
  border: 1px solid rgba(0,0,0,0.04);
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.card-img {
  width: 100%;
  height: 240px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary-pale) 0%, var(--color-primary-muted) 100%);
}

.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.card:hover .card-img img {
  transform: scale(1.05);
}

.card-body {
  padding: var(--space-xl);
}

.card-body h3 {
  font-size: var(--fs-xl);
  margin-bottom: var(--space-sm);
}

.card-body p {
  font-size: var(--fs-sm);
  margin-bottom: var(--space-md);
}

.card-body a {
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  letter-spacing: 0.5px;
}

.card-body a::after {
  content: ' →';
  transition: margin-left var(--transition);
}

.card-body a:hover::after {
  margin-left: 4px;
}

/* Grid */
.card-grid {
  display: grid;
  gap: var(--space-xl);
}

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

/* --- Two Column --- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.two-col-wide {
  grid-template-columns: 3fr 2fr;
}

/* --- Wochenmenü --- */
.day-card {
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl) var(--space-2xl);
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0,0,0,0.04);
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--transition);
}

.day-card:hover {
  box-shadow: var(--shadow-md);
}

.day-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--color-primary);
  border-radius: 4px 0 0 4px;
}

.day-card h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.day-card .date {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--color-gray-500);
  font-weight: var(--fw-normal);
}

/* Vorspeise/Suppe innerhalb jedes Menüs */
.menu-vorspeise {
  font-style: italic;
  color: var(--color-gray-600);
  font-size: var(--fs-sm);
}

/* Menü I + II nebeneinander */
.day-card-menus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}

.menu-item { margin-bottom: var(--space-sm); }

.menu-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-white);
  background: var(--color-primary);
  padding: 3px 10px;
  border-radius: 50px;
  margin-bottom: 4px;
}

.menu-label-alt { background: var(--color-primary-light); }

.menu-prices {
  display: flex;
  gap: var(--space-xl);
  justify-content: center;
  margin-bottom: var(--space-2xl);
  padding: var(--space-md);
  background: var(--color-primary-pale);
  border-radius: var(--border-radius-lg);
}

.menu-prices span {
  font-weight: var(--fw-semibold);
}

/* Heute-Badge */
.heute-badge {
  display: inline-block;
  background: #E65100;
  color: white;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: var(--fw-bold);
  padding: 3px 10px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.day-card-heute {
  border: 2px solid #E65100;
  background: #FFF8F0;
}

.day-card-heute::before {
  background: #E65100;
}

/* --- Speisekarte --- */
.menu-category {
  margin-bottom: var(--space-3xl);
}

.menu-category h3 {
  font-family: var(--font-heading);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-lg);
  position: relative;
}

.menu-category h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--color-primary);
}

.menu-table {
  width: 100%;
  border-collapse: collapse;
}

.menu-table tr {
  border-bottom: 1px solid var(--color-gray-100);
  transition: background var(--transition);
}

.menu-table tr:hover {
  background: var(--color-primary-pale);
}

.menu-table td {
  padding: var(--space-md) var(--space-sm);
  vertical-align: top;
}

.menu-table .dish-name {
  font-weight: var(--fw-semibold);
  color: var(--color-gray-900);
}

.menu-table .dish-desc {
  font-size: var(--fs-sm);
  color: var(--color-gray-500);
  display: block;
  margin-top: 2px;
}

.menu-table .tageskarte-highlight {
  background: var(--color-cream);
  border-left: 3px solid var(--color-accent);
}

.menu-table .tageskarte-highlight .dish-name strong {
  color: var(--color-accent);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.menu-table .price {
  text-align: right;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  color: var(--color-primary);
  font-size: var(--fs-lg);
}

/* --- Info Box --- */
.info-box {
  background: var(--color-primary-pale);
  padding: var(--space-xl);
  border-radius: var(--border-radius-lg);
  margin-bottom: var(--space-xl);
  border: 1px solid var(--color-primary-muted);
}

.info-box h4 { color: var(--color-primary-dark); }
.info-box p:last-child { margin-bottom: 0; }

/* --- Blog / Beitrags-Karten --- */
.post-card {
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  padding: var(--space-2xl);
  margin-bottom: var(--space-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0,0,0,0.04);
  border-left: 4px solid var(--color-primary);
  transition: box-shadow var(--transition);
}

.post-card:hover { box-shadow: var(--shadow-md); }

.post-card h2 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-sm);
}

.post-meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  font-size: var(--fs-sm);
  color: var(--color-gray-500);
}

.post-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-white);
  background: var(--color-primary);
  padding: 3px 10px;
  border-radius: 50px;
}

.post-tag-event { background: #E65100; }
.post-tag-archiv { background: var(--color-gray-500); }

/* --- Feature List --- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
}

.feature-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background: var(--color-primary-pale);
  color: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xl);
}

.feature-text h4 {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-gray-900);
  margin-bottom: var(--space-xs);
}

.feature-text p {
  font-size: var(--fs-sm);
  margin-bottom: 0;
}

/* Section-Green Features */
.section-green .feature-icon {
  background: rgba(255,255,255,0.15);
  color: var(--color-white);
}

/* --- Highlight Strip (z.B. Frühstück) --- */
.highlight-strip {
  padding: var(--space-3xl) 0;
  text-align: center;
}

.highlight-strip .price-tag {
  font-family: var(--font-heading);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  margin: var(--space-md) 0;
}

.section-green .price-tag {
  color: var(--color-white);
}

/* --- Google Maps --- */
.map-embed {
  width: 100%;
  height: 450px;
  border: 0;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
}

/* --- Opening Hours Table --- */
.hours-table {
  width: 100%;
  border-collapse: collapse;
}

.hours-table th,
.hours-table td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--color-gray-100);
  font-size: var(--fs-sm);
}

.hours-table th {
  font-weight: var(--fw-semibold);
  color: var(--color-gray-900);
}

/* --- Footer Curve (direkt vor Footer) --- */
.footer-curve {
  line-height: 0;
  margin-bottom: -1px;
}

.footer-curve svg {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Footer --- */
.site-footer {
  position: relative;
  color: var(--color-white);
  overflow: visible;
  background: var(--color-primary);
  border-top: none;
  margin-top: 0;
}

.footer-diagonal { display: none; }

/* Turm: rechts, am oberen Rand bündig */
.footer-turm {
  position: absolute;
  right: 5%;
  top: 0;
  height: 100%;
  width: auto;
  opacity: 1;
  z-index: 1;
  pointer-events: none;
}

.footer-main {
  position: relative;
  z-index: 2;
  padding: var(--space-3xl) 0 var(--space-2xl);
}

/* 3-Spalten-Grid wie in der Vorlage */
.footer-grid-new {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-3xl);
  max-width: 900px;
}

.footer-col h4 {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  margin-bottom: var(--space-sm);
}

.footer-col p,
.footer-col a {
  color: rgba(255,255,255,0.85);
  font-size: var(--fs-sm);
  line-height: 1.8;
}

.footer-col a:hover {
  color: var(--color-white);
}

/* Mittlere Spalte: Partner-Logos + Check-in */
.footer-col-center {
  text-align: left;
}

.footer-partner-logos {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.partner-logo {
  height: 50px;
  width: auto;
  object-fit: contain;
}

/* Rechte Spalte: Kontakt + Social */
.footer-col-right {
  text-align: left;
}

.footer-social {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,0.15);
  border-radius: var(--border-radius-md);
  transition: background var(--transition);
}

.footer-social a:hover {
  background: rgba(255,255,255,0.3);
}

.footer-social svg {
  display: block;
}

/* Footer Bottom */
.footer-bottom {
  position: relative;
  z-index: 2;
  background: var(--color-primary-dark);
  padding: var(--space-md) 0;
}

.footer-bottom .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.6);
}

.footer-bottom a {
  color: rgba(255,255,255,0.6);
}

.footer-bottom a:hover {
  color: var(--color-white);
}

/* --- Scroll Animations --- */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-delay-1 { transition-delay: 0.1s; }
.fade-in-delay-2 { transition-delay: 0.2s; }
.fade-in-delay-3 { transition-delay: 0.3s; }

/* --- Print --- */
@media print {
  /* Alles ausblenden was nicht zum Menü gehört */
  .site-header, .site-footer, .cta-badge, .nav-toggle,
  .hero::after, .hero::before, .hero-curve, .footer-curve, .curve-divider,
  .no-print { display: none !important; }

  @page { margin: 1cm 1cm 0.8cm; }
  body { font-size: 9pt; color: #000; margin: 0; padding: 0; line-height: 1.3; }
  .container { max-width: 100%; padding: 0; }

  /* Hero: nur eine kompakte Titelzeile */
  .hero {
    min-height: auto !important;
    background: none !important;
    color: #000;
    padding: 0 0 4pt;
    display: flex;
    align-items: baseline;
    gap: 8pt;
  }
  .hero-content { padding: 0; text-align: left; }
  .hero h1 {
    color: #000;
    text-shadow: none;
    font-size: 16pt;
    margin: 0;
    display: inline;
  }
  .hero .subtitle {
    color: #555;
    font-size: 9pt;
    margin: 0;
    display: inline;
  }
  .hero .btn-group { display: none; }

  /* Sections kompakt */
  .section { padding: 0; }

  /* Preisleiste: eine Zeile */
  .menu-prices {
    padding: 4pt 8pt;
    margin-bottom: 6pt;
    background: #eee !important;
    border-radius: 0;
    flex-direction: row !important;
    gap: 16pt;
    justify-content: flex-start;
    font-size: 9pt;
  }

  /* Labels kleiner */
  .menu-label {
    font-size: 6pt;
    padding: 1px 5px;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .heute-badge {
    font-size: 6pt;
    padding: 1px 5px;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* Tageskarten: sehr kompakt */
  .day-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #bbb;
    padding: 4pt 8pt;
    margin-bottom: 4pt;
    border-radius: 0;
  }
  .day-card::before { display: none; }
  .day-card h3 {
    font-size: 9pt;
    margin-bottom: 2pt;
    padding-bottom: 2pt;
    border-bottom: 1px solid #ddd;
  }
  .day-card .date { font-size: 7pt; }

  /* Menü I + II NEBENEINANDER auch im Druck */
  .day-card-menus {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8pt;
  }

  .menu-vorspeise { font-size: 8pt; }
  .menu-item { margin-bottom: 0; }
  .menu-item strong { font-size: 9pt; }
  .menu-item small { font-size: 7.5pt; }

  /* Heute-Hervorhebung */
  .day-card-heute {
    border: 2px solid #333;
    background: #f5f5f5 !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  h1, h2, h3, h4 { color: #000; }
  a { color: #000; text-decoration: none; }

  /* Tageskarte: Spezialitätentag-Box */
  .info-box {
    border: 1px solid #999 !important;
    background: #f5f5f5 !important;
    padding: 6pt 8pt;
    margin-top: 8pt !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .info-box .subtitle { color: #333 !important; font-size: 8pt; }
  .info-box p { color: #000 !important; font-size: 9pt; }
  .info-box strong { color: #000 !important; }

  /* Tageskarte: Gerichte-Tabelle */
  .menu-table {
    font-size: 9pt;
    margin-top: 6pt;
  }
  .menu-table td { padding: 3pt 6pt; }
  .menu-table .dish-name { font-size: 9pt; }
  .menu-table .dish-desc { font-size: 8pt; }
  .menu-table .price { font-size: 9pt; white-space: nowrap; }
  .menu-table .tageskarte-highlight {
    background: #f0f0f0 !important;
    border-left: 2px solid #333;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* Drucken-Button ausblenden */
  .btn-print, .no-print { display: none !important; }

  /* Fade-in Animationen im Druck sofort sichtbar */
  .fade-in { opacity: 1 !important; transform: none !important; }
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .footer-turm { height: 100%; right: 2%; }
  .footer-grid-new { grid-template-columns: 1fr 1fr; }
  .card-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root {
    --fs-5xl: 3.25rem;
    --fs-6xl: 3.9rem;
    --fs-4xl: 2.6rem;
    --fs-3xl: 2.275rem;
  }

  .nav-toggle { display: block; }

  .main-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(10px);
    z-index: 105;
    padding: 80px var(--space-xl) var(--space-xl);
  }

  .main-nav.active { display: flex; align-items: center; justify-content: center; }

  .main-nav > ul {
    flex-direction: column;
    gap: 0;
    text-align: center;
  }

  .main-nav a,
  .main-nav .nav-parent-label {
    padding: var(--space-sm) var(--space-xl);
    font-size: var(--fs-xl);
    font-weight: var(--fw-medium);
  }

  .main-nav a::after { display: none; }

  /* Mobile Dropdowns: aufklappbar */
  .nav-dropdown {
    display: none;
    position: static;
    box-shadow: none;
    border: none;
    border-top: none;
    background: transparent;
    min-width: auto;
    padding: 0;
  }

  .has-dropdown.open > .nav-dropdown {
    display: block;
  }

  .has-dropdown.open > .nav-parent-label::after {
    transform: rotate(-135deg);
    margin-bottom: -1px;
  }

  .nav-dropdown a {
    font-size: var(--fs-lg);
    padding: var(--space-xs) var(--space-xl);
    color: var(--color-gray-500);
  }

  .nav-dropdown a:hover {
    background: transparent;
    color: var(--color-primary);
  }

  .hero { min-height: 70vh; }
  .hero-sm { min-height: 40vh; }


  .two-col,
  .two-col-wide { grid-template-columns: 1fr; gap: var(--space-xl); }

  .card-grid-2,
  .card-grid-3 { grid-template-columns: 1fr; }

  .footer-grid-new { grid-template-columns: 1fr; text-align: center; }
  .footer-turm { display: none; }
  .footer-diagonal { background: linear-gradient(165deg, var(--color-gray-100) 0%, var(--color-gray-100) 12%, transparent 12.1%); }

  .footer-bottom .container {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }

  .header-top { display: none; }

  .section { padding: var(--space-3xl) 0; }

  .btn-group { flex-direction: column; align-items: center; }

  .menu-prices { flex-direction: column; gap: var(--space-sm); }
  .day-card-menus { grid-template-columns: 1fr; gap: var(--space-md); }
}


/* ============================================================
   Hero-Slider — Überblendung (Startseite)
   Bilder werden per data-hero-slides am .hero gesetzt.
   Ebenen: Slides 0 · hero-content 2 · Bogen 3 · Buttons 4
   ============================================================ */

.hero-slider .hero-slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1200ms ease-in-out;
  pointer-events: none;
}

.hero-slider .hero-slide.is-active {
  opacity: 1;
}

/* Sobald die Slides laufen, wird das Inline-Hintergrundbild verdeckt */
.hero-slider.is-ready {
  background-image: none !important;
}

/* Punkte-Navigation */
.hero-dots {
  position: absolute;
  bottom: 68px;
  left: 0;
  width: 100%;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.hero-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color 200ms ease, transform 200ms ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.hero-dots button:hover {
  background: rgba(255, 255, 255, 0.6);
}

.hero-dots button[aria-current="true"] {
  background: var(--color-white);
  transform: scale(1.25);
}

.hero-dots button:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .hero-dots { bottom: 56px; }
}

/* Barrierefreiheit: keine Bewegung bei entsprechender Systemeinstellung */
@media (prefers-reduced-motion: reduce) {
  .hero-slider .hero-slide { transition: none; }
}

/* ============================================================
   Hero-Kasten: schrumpft nach kurzer Zeit nach oben rechts
   Wiedervergrößern per Klick oder Tastatur (Enter/Leertaste).
   Verschiebung/Skalierung berechnet das JS und setzt sie als
   Custom Properties --hero-mini-x / --hero-mini-y.
   ============================================================ */

.hero-content[data-hero-collapse] {
  --hero-mini-x: 0px;
  --hero-mini-y: 0px;
  --hero-mini-scale: 0.32;
  transform-origin: top right;
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 400ms ease,
              box-shadow 400ms ease;
  cursor: pointer;
}

.hero-content[data-hero-collapse]:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 4px;
}

.hero-content.is-mini {
  transform: translate(var(--hero-mini-x), var(--hero-mini-y)) scale(var(--hero-mini-scale));
  background: rgba(27, 94, 32, 0.9);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.hero-content.is-mini:hover,
.hero-content.is-mini:focus-visible {
  transform: translate(var(--hero-mini-x), var(--hero-mini-y))
             scale(calc(var(--hero-mini-scale) * 1.12));
}

/* Hinweis „wieder aufklappen" nur im geschrumpften Zustand */
.hero-content[data-hero-collapse]::after {
  content: 'Antippen zum Aufklappen';
  position: absolute;
  left: 0;
  right: 0;
  /* top statt bottom: der Hinweis wächst nach UNTEN aus dem Kasten heraus.
     Mit bottom wuchs er nach oben in den Kasten hinein und legte sich über
     den Text (geprüft im Browser 06.08.2026). nowrap, weil zwei Zeilen den
     Kasten sonst wieder überdecken. */
  top: 100%;
  margin-top: var(--space-md);
  white-space: nowrap;
  /* Vorskaliert: wird zusammen mit dem Kasten auf ~0.32 verkleinert,
     landet also bei rund 15 px auf dem Schirm. 3.5rem wäre einzeilig
     breiter als der Kasten und ragte rechts aus dem Bild. */
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.85);
  opacity: 0;
  transition: opacity 300ms ease 300ms;
  pointer-events: none;
}

.hero-content.is-mini::after { opacity: 1; }

/* Auf kleinen Displays bleibt der Kasten stehen — dort ist zu wenig
   Platz, als dass ein Mini-Kasten oben rechts noch lesbar wäre. */
@media (max-width: 768px) {
  .hero-content.is-mini {
    transform: none;
    box-shadow: none;
  }
  .hero-content.is-mini::after { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-content[data-hero-collapse] { transition: none; }
}

/* Hinweiszeile (z. B. Vorreservierung Frühstück) */
.note {
  font-size: var(--fs-sm);
  color: var(--color-gray-900);
  opacity: 0.85;
}

.note a {
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

/* --- Verkleinern-Symbol im aufgeklappten Hero-Kasten --- */
.hero-min-btn {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 34px;
  height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  color: var(--color-white);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, background-color 200ms ease, transform 200ms ease;
  z-index: 3;
}

/* Erst sichtbar, sobald der Kasten einmal zurückgeholt wurde */
.hero-content.has-min-btn:not(.is-mini) .hero-min-btn {
  opacity: 1;
  visibility: visible;
}

.hero-min-btn:hover {
  background: rgba(0, 0, 0, 0.4);
  transform: scale(1.1);
}

.hero-min-btn:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

.hero-min-btn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Der Aufklapp-Hinweis darf nicht gleichzeitig mit dem Symbol erscheinen */
.hero-content.has-min-btn:not(.is-mini)::after { opacity: 0; }

@media (max-width: 768px) {
  .hero-min-btn { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-min-btn { transition: none; }
}

/* ============================================================
   Bildergalerie — Symbol auf der Kachel + Modal
   ============================================================ */

.card-img { position: relative; }

.gallery-btn {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px 6px 8px;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: var(--fw-semibold);
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: background-color 200ms ease, transform 200ms ease;
}

.gallery-btn:hover,
.card:hover .gallery-btn {
  background: var(--color-primary);
}

.gallery-btn:hover { transform: scale(1.06); }

.gallery-btn:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

.gallery-btn svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Modal --- */
.gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-xl);
  background: rgba(12, 20, 12, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 300ms;
}

.gallery-modal.is-open { opacity: 1; visibility: visible; }

.gallery-title {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  margin: 0;
  text-align: center;
}

.gallery-stage {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  max-width: 1100px;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--border-radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  opacity: 1;
  transition: opacity 350ms ease;
}

.gallery-stage img.is-fading { opacity: 0; }

/* Pfeile + Schließen */
.gallery-nav,
.gallery-close {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: var(--color-white);
  cursor: pointer;
  transition: background-color 200ms ease, transform 200ms ease;
}

.gallery-nav:hover,
.gallery-close:hover {
  background: var(--color-primary);
  transform: scale(1.08);
}

.gallery-nav:focus-visible,
.gallery-close:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

.gallery-nav svg,
.gallery-close svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gallery-prev { left: var(--space-md); }
.gallery-next { right: var(--space-md); }

.gallery-close {
  position: fixed;
  top: var(--space-lg);
  right: var(--space-lg);
}

/* Miniatur-Streifen */
.gallery-thumbs {
  flex: 0 0 auto;
  display: flex;
  gap: var(--space-sm);
  max-width: 100%;
  padding: var(--space-xs);
  overflow-x: auto;
  scrollbar-width: thin;
}

.gallery-thumbs button {
  flex: 0 0 auto;
  width: 96px;
  height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--border-radius);
  overflow: hidden;
  background: none;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 200ms ease, border-color 200ms ease;
}

.gallery-thumbs button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-thumbs button:hover { opacity: 0.85; }

.gallery-thumbs button[aria-current="true"] {
  opacity: 1;
  border-color: var(--color-white);
}

.gallery-thumbs button:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

.gallery-counter {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-sm);
}

body.gallery-open { overflow: hidden; }

@media (max-width: 768px) {
  .gallery-modal { padding: var(--space-md); }
  .gallery-title { font-size: var(--fs-xl); }
  .gallery-nav { width: 40px; height: 40px; }
  .gallery-prev { left: 4px; }
  .gallery-next { right: 4px; }
  .gallery-thumbs button { width: 72px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-modal,
  .gallery-stage img,
  .gallery-nav,
  .gallery-close { transition: none; }
}

/* ============================================================
   Hinweis mit Anruf-Button (z. B. Frühstück-Vorreservierung)
   ============================================================ */
.reservierungs-hinweis {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  max-width: 720px;
  margin: var(--space-lg) auto 0;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-cream);
  border: 1px solid var(--color-accent);
  border-left-width: 4px;
  border-radius: var(--border-radius);
  text-align: left;
}

.reservierungs-hinweis p {
  flex: 1 1 260px;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-gray-900);
  line-height: 1.5;
}

.reservierungs-hinweis .btn-call {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.reservierungs-hinweis .ico-phone {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 560px) {
  .reservierungs-hinweis {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .reservierungs-hinweis .btn-call { justify-content: center; }
}

/* ============================================================
   Schwebender Button unten rechts → Abend-Special
   Wird von js/main.js auf jeder Seite eingehängt (außer auf der
   Zielseite selbst). Später soll die Zielseite ihre Inhalte aus
   Wirtino ziehen (Tageskarte / Wochenmenü).
   ============================================================ */
.fab-special {
  position: fixed;
  right: max(var(--space-lg), env(safe-area-inset-right));
  bottom: max(var(--space-lg), env(safe-area-inset-bottom));
  z-index: 400;

  display: flex;
  align-items: center;
  gap: 0;
  height: 60px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-white);
  text-decoration: none;
  box-shadow: 0 8px 26px rgba(27, 94, 32, 0.42), 0 2px 6px rgba(0, 0, 0, 0.18);
  transition: background-color 200ms ease, box-shadow 200ms ease,
              transform 200ms cubic-bezier(0.2, 0.7, 0.3, 1), gap 260ms ease;
  overflow: hidden;
}

.fab-special:hover,
.fab-special:focus-visible {
  background: var(--color-primary-dark);
  color: var(--color-white);
  box-shadow: 0 12px 34px rgba(27, 94, 32, 0.5), 0 2px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
  gap: 10px;
}

.fab-special:active { transform: translateY(0) scale(0.97); }

.fab-special:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

.fab-special svg {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Beschriftung klappt beim Überfahren auf — am Handy bleibt der Kreis */
.fab-special .fab-text {
  max-width: 0;
  opacity: 0;
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  transition: max-width 260ms ease, opacity 200ms ease;
}

.fab-special:hover .fab-text,
.fab-special:focus-visible .fab-text {
  max-width: 220px;
  opacity: 1;
}

/* Goldener Punkt als dezenter Hinweis */
.fab-special::after {
  content: '';
  position: absolute;
  top: 13px;
  right: 15px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-primary);
  animation: fabPuls 2.6s ease-in-out infinite;
}

.fab-special:hover::after,
.fab-special:focus-visible::after { animation: none; opacity: 0; }

@keyframes fabPuls {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.25); opacity: 0.75; }
}

/* Sanft einschweben, damit er nicht ins Bild springt */
.fab-special {
  opacity: 0;
  transform: translateY(14px);
  animation: fabRein 500ms cubic-bezier(0.2, 0.7, 0.3, 1) 700ms forwards;
}

@keyframes fabRein {
  to { opacity: 1; transform: none; }
}

@media (max-width: 560px) {
  .fab-special {
    height: 56px;
    width: 56px;
    padding: 0;
    justify-content: center;
  }
  .fab-special .fab-text { display: none; }
  .fab-special::after { top: 11px; right: 12px; }
}

@media print {
  .fab-special { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fab-special {
    animation: none;
    opacity: 1;
    transform: none;
    transition: background-color 200ms ease;
  }
  .fab-special::after { animation: none; }
  .fab-special:hover { transform: none; }
}

/* Die Anordnung „Hero-Kasten unterhalb des Bildes" liegt seit
   06.08.2026 in einer eigenen, zuschaltbaren Datei: css/hero-unten.css */

/* ============================================================
   Umschalter Hero-Anordnung — NUR VORSCHAU
   ============================================================
   Schwebt unten links, Gegenstück zum Abend-Special-Knopf unten
   rechts. Drei Varianten zum direkten Anspringen. Vor dem Go-Live
   entfernen: dieser Block, der Abschnitt "Umschalter" in
   js/main.js, css/hero-unten.css, css/hero-rechts.css sowie die
   beiden <link> samt Kopf-Skript auf den Seiten.
   ============================================================ */

.layout-switch {
  position: fixed;
  left: var(--space-lg);
  bottom: var(--space-lg);
  z-index: 200;
  display: flex;
  align-items: stretch;
  gap: 3px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(27, 94, 32, 0.92);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  font-family: var(--font-body);
}

.layout-switch button {
  border: 0;
  border-radius: 999px;
  padding: 7px 13px;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-family: inherit;
  font-size: 0.78rem;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}

.layout-switch button:hover { color: var(--color-white); background: rgba(255, 255, 255, 0.14); }
.layout-switch button:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; }

.layout-switch button[aria-pressed="true"] {
  background: var(--color-white);
  color: #1B5E20;
  font-weight: var(--fw-bold);
}

@media (max-width: 768px) {
  /* Auf schmalen Schirmen kurze Beschriftungen, sonst zu breit */
  .layout-switch { left: var(--space-sm); bottom: var(--space-sm); }
  .layout-switch button { padding: 7px 10px; font-size: 0.72rem; }
}

@media print { .layout-switch { display: none !important; } }