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

/* Fonts lokal statt Google-CDN (DSGVO, 21.08.2026): Playfair Display + Inter
   als Variable Fonts unter fonts/, Deklarationen in fonts.css. */
@import url('fonts.css');

/* --- 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 — die Hero-
   Anordnung „Panel von rechts" weiter unten setzt beides zurück
   und gibt dem Panel ihre eigenen Maße (520 × 390).
   ------------------------------------------------------------ */
@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 --- */
/* --- Anfahrtskarte (Leaflet, kontakt.html) ---
   Ersetzt die frühere Google-iframe-Einbettung (.map-embed) — Muster vom
   Sepplwirt-Prototyp. Kacheln von CARTO (cookie-frei), Marker als divIcon:
   Logo-Schild über grüner Nadel, siehe js/karte.js. */
.map-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.map-actions-hinweis {
  font-size: var(--fs-sm);
  color: var(--color-gray-600);
}

.map-container {
  display: block;
  position: relative;
}

/* Kartenfläche für Leaflet. Braucht eine gesetzte Höhe — ohne sie bleibt die
   Karte 0 px hoch und man sieht nichts. */
.map-container-frame {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  width: 100%;
  border: 1px solid var(--color-gray-300, #DADCE0);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--color-primary-pale, #E8F5E9);   /* solange die Kacheln laden */
  z-index: 0;                                        /* bleibt unter Kopfleiste und Popups */
}

/* Auf dem Handy ist 16:9 ein flacher Streifen — hochformatiger stellen, dann
   trägt die Karte genug Umgebung um das Haus. */
@media (max-width: 600px) {
  .map-container-frame { aspect-ratio: 4 / 3; }
}

.map-container-caption {
  margin: 0.75rem 0 0;
  font-size: var(--fs-sm);
  color: var(--color-gray-600);
}

.map-container-caption a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Eigener Kartenmarker ---
   Leaflets Standardrahmen abschalten; das Aussehen steckt vollständig hier. */
.karte-marker-wrap { background: none; border: 0; }

.karte-marker {
  position: relative;
  width: 160px;
  height: 96px;   /* Logo-Schild (~54px) + Nadel (26px) + Luft */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

/* Logo-Schild über der Nadel */
.karte-marker-logo,
.karte-marker__logo {
  flex-shrink: 0;   /* sonst staucht die Flexbox das Schild */
  background: #fff;
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radius-md, 8px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  padding: 0.35rem 0.5rem;
  line-height: 0;
}

/* Zwei Klassen im Selektor sind Pflicht: Leaflet setzt
   `.leaflet-container .leaflet-marker-pane img { width: auto }` — mit nur
   einer Klasse verliert die Breitenangabe und das Logo erscheint in voller
   Dateigröße (356 px), was den Marker sprengt. */
.karte-marker .karte-marker__logo img {
  display: block;
  width: 132px;
  height: auto;
  max-width: none;
}

/* Grüne Nadel: gedrehtes Quadrat mit runder Kappe, rein in CSS — so bleibt
   sie auf jedem Display scharf und die Farbe ist an einer Stelle steuerbar. */
.karte-marker__pin {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-top: -2px;
  background: var(--color-primary);
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

/* Innerer Punkt, damit die Nadel nicht als reine Fläche wirkt */
.karte-marker__pin::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 9px;
  height: 9px;
  background: #fff;
  border-radius: 50%;
}

@media (max-width: 600px) {
  .karte-marker { width: 130px; height: 84px; }
  .karte-marker .karte-marker__logo img { width: 104px; }
}

/* --- 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); }

  /* Grid-Spalten dürfen unter ihre min-content-Breite schrumpfen — sonst
     drückt z. B. der Buchungs-Badge (breites Padding + langes Wort) die
     ganze Spalte über den Bildschirmrand und der Text läuft rechts hinaus. */
  .two-col > *,
  .two-col-wide > * { min-width: 0; max-width: 100%; }

  .cta-badge { padding: var(--space-lg) var(--space-md); }
  .cta-badge .phone { font-size: var(--fs-2xl); overflow-wrap: break-word; }
  .cta-badge .hours { overflow-wrap: break-word; }

  .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); }

/* Ganze Bildfläche als Galerie-Auslöser (Klasse setzt js/main.js, initGalleries):
   Zeiger auf dem Bild + Badge färbt sich schon beim Überfahren des Bildes */
.card-img.has-gallery { cursor: pointer; }
.card-img.has-gallery:hover .gallery-btn {
  background: var(--color-primary);
  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; }
}


/* ============================================================
   Hero-Anordnung: Panel am rechten Rand
   ============================================================
   Vom Kunden entschieden am 06.08.2026 („Von rechts") — aus den
   drei Varianten, die zur Auswahl gebaut waren. Bis dahin lagen
   diese Regeln in den zuschaltbaren Dateien css/hero-unten.css
   und css/hero-rechts.css samt Umschalter; beides ist mit der
   Entscheidung entfallen. Der Inhalt steht hier unverändert und
   an derselben Stelle der Kaskade, an der er vorher per <link>
   geladen wurde — die Darstellung ist damit exakt dieselbe.

   Zwei Schichten, die Reihenfolge ist Absicht:

     1. Grundlage und schmale Ansicht — Bildband oben, darunter
        der Bogen, darunter ein grünes Band mit dem Titel. Auf dem
        Handy hat ein von rechts hereinragendes Panel keinen Platz,
        dort bleibt es bei dieser Anordnung.
     2. Ab 769 px — nimmt Schicht 1 wieder zurück und hängt das
        Panel an den rechten Rand, links bleibt das Foto frei.
        Ab 1500 px löst es sich vom Fensterrand und rückt auf die
        Kante der 1200er Inhaltsspalte.

   Die Regeln „Kasten mittig im Bild" weiter oben in dieser Datei
   sind NICHT überflüssig: Schicht 2 stellt einen Teil davon wieder
   her (Hero-Höhe, Bogen unten, Slides über die volle Fläche). Sie
   sind die Grundlage, auf der beide Schichten sitzen.
   ============================================================ */

/* ---------- Schicht 1: Grundlage / schmale Ansicht ---------- */

/* Höhe des Bildbands. Am Desktop höher, weil das Band dort über
   die volle Breite läuft und sonst zum schmalen Streifen wird. */
:root { --hero-band: 55vh; }

@media (max-width: 768px) {
  :root { --hero-band: 44vh; }
}

/* ---------- Startseite: Slider-Hero ---------- */

.hero-slider {
  display: block;
  min-height: 0;
  padding-top: var(--hero-band);
  padding-bottom: var(--space-2xl);
  background-color: #1B5E20;
}

.hero-slider .hero-slide {
  inset: 0 0 auto 0;
  height: var(--hero-band);
}

/* Bogen sitzt am unteren Rand des Bildbands, nicht am Seitenende —
   und ist dort grün statt weiß, weil darunter das grüne Band folgt. */
.hero-slider::before,
.hero-sm::before {
  top: calc(var(--hero-band) - 80px);
  bottom: auto;
  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='%231B5E20'/%3E%3C/svg%3E");
}

.hero-slider .hero-dots {
  top: calc(var(--hero-band) - 104px);
  bottom: auto;
}

/* Der Kasten braucht keinen eigenen Hintergrund mehr — er steht
   ohnehin auf dem grünen Band. */
.hero-slider .hero-content {
  background: transparent;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  margin: 0 auto;
  padding-top: var(--space-lg);
  padding-bottom: 0;
}

.hero-slider .hero-buttons {
  position: static;
  margin-top: var(--space-lg);
}

/* ---------- Unterseiten: Bild-Hero ----------
   Hier gibt es keine Slide-Divs, das Bild steckt als Inline-
   background-image am <section> und liefe über die volle
   Hero-Höhe. Deshalb trägt ::after das Bild — es erbt es per
   background-image: inherit und begrenzt es aufs Band.
   ::after war frei (weiter oben nur auf display:none gesetzt).
   Der Inline-Hintergrund der Section bleibt unangetastet: er ist
   die Quelle fürs inherit und wird ohnehin komplett verdeckt —
   oben vom Band, unten vom deckend grünen Kasten. */

.hero-sm {
  display: block;
  min-height: 0;
  padding-top: var(--hero-band);
  background-color: #1B5E20;
}

.hero-sm::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--hero-band);
  background-image: inherit;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Deckend grün und über die volle Breite — der Kasten verdeckt
   damit den Teil des Section-Hintergrunds, der unter dem Band liegt. */
.hero-sm .hero-content {
  background: #1B5E20;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  max-width: none;
  margin: 0;
  padding: var(--space-xl) var(--space-xl) var(--space-2xl);
  /* Die festen Maße aus style.css gelten nur, solange der Kasten IM
     Bild liegt. Hier läuft er über die volle Breite und wächst mit
     dem Inhalt — sonst stünde er als 620-px-Block im grünen Band. */
  width: auto;
  min-height: 0;
  display: block;
}

/* Der Hero braucht hier keine Mindesthöhe fürs Bild drumherum —
   das Bildband hat seine eigene. */
.hero-sm { min-height: 0; }

/* Auf flachem Grün braucht der Titel keinen Schatten mehr. */
.hero-slider h1,
.hero-sm h1 { text-shadow: none; }

/* Ab Tablet aufwärts: der Titel war auf die Wirkung im Bild
   ausgelegt. Im Band darunter bricht er im 620-px-Kasten
   zweizeilig um und macht den Hero über eine Bildschirmhöhe
   lang. Deshalb breiterer Kasten und eine Stufe kleiner —
   „Gasthof Turmwirt" steht damit einzeilig. */
@media (min-width: 769px) {
  .hero-slider .hero-content { max-width: 900px; }
  .hero-slider h1 { font-size: 4rem; }
  .hero-sm h1 { font-size: 3.5rem; }
}

/* Das Zusammenklappen des Kastens nach oben rechts hatte nur den
   Zweck, das Foto freizuräumen — das erledigt jetzt die Anordnung
   selbst. Sonst würde der Kasten aus dem grünen Band heraus wieder
   aufs Bild springen.

   Die Mechanik im JavaScript (initHeroCollapse in js/main.js) ist
   damit funktionslos — sie läuft noch, wird aber vollständig
   überstimmt.

   BEWUSST AUFGEHOBEN, NICHT GELÖSCHT (Marcus, 06.08.2026): ob sie
   zurückkommt, ist offen. Logik, Styling und das Attribut
   data-hero-collapse in index.html sind unangetastet — diese vier
   Regeln hier sind der einzige Hebel. Wer sie entfernt, hat die
   Mechanik zurück, muss aber neu messen: Sie war auf „Kasten im
   Bild" ausgelegt, nicht auf das Panel am rechten Rand.
   Einzelheiten in notiz-merkliste-website.md. */
.hero-content.is-mini,
.hero-content.is-mini:hover,
.hero-content.is-mini:focus-visible {
  transform: none;
  background: transparent;
  box-shadow: none;
}

.hero-content[data-hero-collapse] { cursor: auto; }
.hero-content[data-hero-collapse]::after { content: none; }
.hero-min-btn { display: none; }

/* ---------- Nur schmale Ansicht: Typo eine Stufe kleiner ----------
   Auf dem Foto durfte der Titel bildfüllend sein, im Band darunter
   schöbe er sonst die Buttons aus dem ersten Bildschirm. */
@media (max-width: 768px) {
  .hero-slider h1,
  .hero-sm h1 {
    font-size: 2.4rem;
    margin-bottom: var(--space-sm);
  }

  .hero-slider .subtitle,
  .hero-sm .subtitle {
    font-size: 1.3rem;
    margin-bottom: var(--space-sm);
  }

  .hero-sm .subtitle { margin-bottom: 0; }

  .hero-slider .hero-content p:not(.subtitle) { font-size: 1.05rem; }

  .hero-sm .hero-content {
    padding: var(--space-lg) var(--space-xl) var(--space-xl);
  }
}


/* ---------- Schicht 2: ab 769 px das Panel von rechts ---------- */

@media (min-width: 769px) {

  /* ---------- Desktop-Anordnung aus Schicht 1 zurücknehmen ---------- */

  .hero-slider,
  .hero-sm {
    display: flex;
    padding-top: 0;
    padding-bottom: 0;
    background-color: var(--color-gray-300);
  }

  .hero-slider { min-height: 85vh; }
  .hero-sm { min-height: 560px; }

  /* Slides wieder über den ganzen Hero */
  .hero-slider .hero-slide {
    inset: 0;
    height: auto;
  }

  /* Das Bildband der Unterseiten wieder aus — dort malt der
     Inline-Hintergrund der Section wieder selbst. */
  .hero-sm::after { display: none; }

  /* Bogen zurück an den unteren Rand, wieder weiß */
  .hero-slider::before,
  .hero-sm::before {
    top: auto;
    bottom: -1px;
    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");
  }

  .hero-slider .hero-dots {
    top: auto;
    bottom: 68px;
  }

  /* ---------- Das Panel ---------- */

  .hero-slider,
  .hero-sm {
    justify-content: flex-end;   /* statt mittig */
  }

  .hero-slider .hero-content,
  .hero-sm .hero-content {
    width: 520px;
    max-width: 55%;
    margin: 0;
    /* bündig am rechten Rand, deshalb nur links abgerundet */
    border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
    background: rgba(27, 94, 32, 0.88);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    padding: var(--space-2xl) var(--space-xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Einheitliche Höhe wie bei der Anordnung im Bild — sonst
     springt das Layout beim Seitenwechsel wieder. */
  .hero-sm .hero-content { min-height: 390px; }

  /* Der Titel hat im 520er Panel weniger Platz als in der
     Bildmitte. Eine Stufe kleiner, damit „Zimmer & Übernachtung"
     nicht dreizeilig wird. */
  .hero-slider h1 { font-size: 3.25rem; }
  .hero-sm h1 { font-size: 2.75rem; }
  .hero-slider h1,
  .hero-sm h1 { text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }

  /* ---------- Startseite: Buttons in die freie Fläche links ---------- */

  .hero-slider .hero-buttons {
    position: absolute;
    top: auto;
    bottom: 100px;
    left: 0;
    right: 520px;
    width: auto;
    margin-top: 0;
    justify-content: center;
    /* Links neben dem Panel bleiben nur noch rund 860 px. Mit den
       Standardmaßen brauchen die drei Buttons 913 px und brechen in
       zwei Reihen um — deshalb hier etwas kompakter. */
    gap: var(--space-sm);
    padding: 0 var(--space-md);
  }

  .hero-slider .hero-buttons .btn {
    padding: 13px 22px;
  }

  /* Punkte-Navigation mittig unter die Buttons, nicht unter das Panel */
  .hero-slider .hero-dots {
    left: 0;
    right: 520px;
    width: auto;
  }
}

/* ============================================================
   Sehr breite Schirme: Panel löst sich vom Rand
   ============================================================
   Der übrige Seiteninhalt sitzt in einer 1200 px breiten Spalte.
   Am Fensterrand klebend steht das Panel auf einem 1900-px-Schirm
   weit außerhalb dieser Spalte und wirkt losgelöst vom Text
   darunter. Ab 1400 px rückt es deshalb auf die rechte Kante der
   Inhaltsspalte — es liegt dann etwa im rechten Drittel und
   fluchtet mit dem Inhalt.

   padding-right am Hero verschiebt nur den Kasten: Die Slides und
   der Bogen sind absolut mit inset:0 gesetzt und beziehen sich auf
   die Polsterungs-Box, bleiben also randlos. Buttons und Punkte
   haben eigene Werte und müssen mitwandern.

   Grenze bei 1500 px, nicht früher: Das Einrücken verkleinert die
   Fläche links neben dem Panel, wo auf der Startseite die drei
   Buttons stehen. Bei 1400 px blieben davon nur 773 px übrig und
   sie brachen wieder zweireihig um; ab 1500 px sind es 822 px und
   sie bleiben einreihig.
   ============================================================ */
@media (min-width: 1500px) {
  .hero-slider,
  .hero-sm {
    padding-right: calc((100% - 1200px) / 2);
  }

  /* Nicht mehr bündig, also rundum abgerundet statt nur links */
  .hero-slider .hero-content,
  .hero-sm .hero-content {
    border-radius: var(--border-radius-lg);
  }

  .hero-slider .hero-buttons,
  .hero-slider .hero-dots {
    right: calc(520px + (100% - 1200px) / 2);
  }
}



/* ============================================================
   Sehr schmale Bildschirme (kleine Smartphones)
   Nachtrag 19.08.2026: Der Anruf-Button im Reservierungs-Hinweis
   (white-space: nowrap) drückte den Block bei 360 px über den
   rechten Bildschirmrand — Innenabstände dort verkleinern.
   ============================================================ */
@media (max-width: 480px) {
  .reservierungs-hinweis { padding: var(--space-md); }
  .reservierungs-hinweis .btn-call {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}

@media (max-width: 360px) {
  /* Ganz alte/kleine Geräte: Anruf-Button darf umbrechen statt hinauszuragen */
  .reservierungs-hinweis .btn-call { white-space: normal; text-align: center; }
}

/* ============================================================
   Feratel-Buchungsmaske (online-buchen.html)
   Das Deskline-Widget richtet sein Layout an der FENSTERbreite aus,
   sitzt aber in der 1200er-Inhaltsspalte. Bei breiten Fenstern schneidet
   es deshalb Felder ab (z. B. An-/Abreisedatum). Ab 200 px Fenster-
   Überbreite (Container 1200 → ab 1400 px) bricht der Widget-Kasten
   aus der Spalte aus und nutzt die Fensterbreite, zentriert.
   ============================================================ */
@media (min-width: 1400px) {
  .booking-widget {
    width: calc(100vw - 2 * var(--space-xl));
    margin-left: calc((100% - (100vw - 2 * var(--space-xl))) / 2);
  }
}