/* ==========================================================================
   Fine Blends — Stylesheet (handgeschrieben, kein Build-Schritt)
   Palette aus dem Logo "Tannengold": Tannengrün, Gold, Salbei, Sand.
   ========================================================================== */

/* --- Schriften: selbst gehostet, keine externen Aufrufe ------------------ */
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/playfair-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Pacifico';
  src: url('fonts/pacifico-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* --- Design-Tokens ------------------------------------------------------ */
:root {
  --petrol: #1e2e24;        /* Tannengrün */
  --petrol-800: #152019;
  --petrol-600: #33503e;
  --sage: #858d78;
  --gold: #d5b578;
  --gold-600: #b18f4c;
  --nougat: #c7a07a;
  --nougat-700: #a97f57;
  --sand: #e8dfc9;
  --sand-100: #f4eede;
  --sand-50: #faf6ec;
  --espresso: #241710;      /* interner Bereich */
  --espresso-700: #3d2a1e;
  --cream: #f1e6d6;
  --cream-200: #f7efe3;

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-script: 'Pacifico', cursive;

  --radius: 1.5rem;
  --shadow: 0 10px 30px rgba(21, 32, 25, .12);
  --shadow-lg: 0 20px 45px rgba(21, 32, 25, .25);
  --wrap: 72rem;
}

/* --- Reset & Grundlagen ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--petrol-800);
  background: var(--sand-50);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; margin: 0; }
p { margin: 0; }
button { font: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.section { padding: 5rem 0; position: relative; }
@media (min-width: 768px) { .section { padding: 7rem 0; } }
.section-label {
  font-size: .8rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--nougat-700);
}
.section h2 { font-size: 1.9rem; color: var(--petrol); margin-top: .75rem; }
@media (min-width: 640px) { .section h2 { font-size: 2.4rem; } }
.section .intro { margin-top: 1rem; max-width: 42rem; color: rgba(30, 46, 36, .72); }
.bg-sand { background: var(--sand); }
.bg-sand-50 { background: var(--sand-50); }
.bg-petrol { background: var(--petrol); color: var(--sand-100); }

/* Dezente Hintergrundtextur, an den Rändern weich ausgeblendet */
.texture {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.section > .wrap { position: relative; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-block; border: 0; cursor: pointer; text-decoration: none;
  border-radius: 999px; padding: .8rem 1.5rem; font-weight: 600;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn-gold { background: var(--gold); color: var(--petrol-800); }
.btn-gold:hover { background: var(--gold-600); color: #fff; }
.btn-outline { background: transparent; border: 1px solid rgba(244, 238, 222, .4); color: var(--sand-100); }
.btn-outline:hover { border-color: var(--sand-100); background: rgba(255, 255, 255, .06); }
.btn-dark { background: var(--espresso); color: var(--cream); }
.btn-dark:hover { background: var(--espresso-700); }
.btn-sm { padding: .5rem 1rem; font-size: .875rem; }
.btn[disabled] { opacity: .5; cursor: default; }

/* --- Navigation --------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background-color .3s, box-shadow .3s;
}
.nav.scrolled { background: rgba(30, 46, 36, .95); box-shadow: var(--shadow-lg); backdrop-filter: blur(8px); }
.nav-inner { max-width: var(--wrap); margin: 0 auto; padding: .75rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
/* Logo erscheint erst beim Scrollen (auf der Startseite steht es groß im Hero) */
.nav-logo { display: flex; align-items: center; opacity: 0; transform: translateY(-4px) scale(.75);
  transform-origin: left center; transition: opacity .5s, transform .5s; pointer-events: none; }
.nav.scrolled .nav-logo, .nav.always-logo .nav-logo { opacity: 1; transform: none; pointer-events: auto; }
.nav-logo img { height: 38px; width: auto; }
.nav-links { display: none; align-items: center; gap: .25rem; }
@media (min-width: 860px) { .nav-links { display: flex; } }
.nav-links a {
  padding: .4rem .9rem; border-radius: 999px; font-size: .95rem;
  color: rgba(244, 238, 222, .9); text-decoration: none; transition: background-color .2s, color .2s;
}
.nav-links a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.nav-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border: 0; border-radius: 999px;
  background: transparent; color: var(--sand-100); font-size: 1.4rem; cursor: pointer;
}
@media (min-width: 860px) { .nav-toggle { display: none; } }
.nav-mobile { display: none; background: rgba(30, 46, 36, .98); padding: .5rem 1.25rem 1rem; }
.nav-mobile.open { display: block; }
@media (min-width: 860px) { .nav-mobile.open { display: none; } }
.nav-mobile a {
  display: block; padding: .6rem .75rem; border-radius: .6rem;
  color: rgba(244, 238, 222, .9); text-decoration: none;
}
.nav-mobile a:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* --- Hinweisbanner ("in der Entstehung") --------------------------------
   Liegt als erstes Element im fixierten Kopfbereich und ist deshalb an
   jeder Scroll-Position sichtbar. Ein- und ausgeschaltet wird es über
   SITE_NOTICE in app/config.php; ist der Text leer, fehlt am <html> die
   Klasse has-notice und die Abstände unten greifen gar nicht erst. */
.site-notice {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .5rem 1.25rem;
  background: linear-gradient(90deg, var(--gold-600), var(--gold) 45%, var(--gold-600));
  color: var(--petrol-800);
  font-size: .85rem; font-weight: 600; line-height: 1.35; text-align: center;
  text-wrap: balance;
  box-shadow: 0 2px 14px rgba(21, 32, 25, .3);
}
.site-notice-dot {
  flex: none; width: .5rem; height: .5rem; border-radius: 999px;
  background: var(--petrol); animation: notice-pulse 2.4s ease-in-out infinite;
}
@keyframes notice-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
/* Wer im Betriebssystem weniger Bewegung eingestellt hat, sieht den Punkt ruhig. */
@media (prefers-reduced-motion: reduce) { .site-notice-dot { animation: none; } }

/* Platz für das Banner: Hero-Inhalt tiefer setzen und die Sprungmarken der
   Navigation um die gleiche Höhe nachjustieren. */
html.has-notice { scroll-padding-top: 7.5rem; }
.has-notice .hero { padding-top: 8.75rem; }
/* Auf schmalen Displays braucht der Text zwei Zeilen: etwas kleiner setzen,
   den Punkt weglassen und dem Hero entsprechend mehr Luft geben. */
@media (max-width: 560px) {
  .site-notice { padding: .5rem 1rem; font-size: .78rem; }
  .site-notice-dot { display: none; }
  .has-notice .hero { padding-top: 10rem; }
}

/* --- Hero --------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: var(--petrol); color: var(--sand-100); padding-top: 6rem; }
.hero-silk {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: .25; mix-blend-mode: soft-light; pointer-events: none;
}
.hero-fade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(30, 46, 36, .55) 100%); }
.hero-glow { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(60% 60% at 80% 10%, rgba(213, 181, 120, .18) 0%, transparent 60%); }
.hero-inner {
  position: relative; max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem 5rem;
  display: grid; gap: 2.5rem; align-items: center;
}
@media (min-width: 768px) { .hero-inner { grid-template-columns: 1fr 1fr; padding-bottom: 7rem; } }
.hero-logo { height: 130px; width: auto; }
.hero h1 { font-size: 2.25rem; color: #fff; margin-top: 2rem; }
@media (min-width: 640px) { .hero h1 { font-size: 3rem; } }
.hero .lead { margin-top: 1.25rem; max-width: 28rem; font-size: 1.125rem; color: rgba(244, 238, 222, .82); }
.hero-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }
/* Bildfeld: warmes Creme statt Grün, damit sich der weiße Trailer absetzt.
   Das Bild behält seine natürliche Höhe (kein object-fit: cover mehr), sonst
   wurde der Trailer beschnitten; der drop-shadow-Filter folgt dabei der
   Silhouette des freigestellten PNGs statt einer starren Ellipse. */
/* Bild ohne Rahmen: es sitzt direkt auf dem Hero-Hintergrund — kein Kasten,
   kein Rand, nur der weiche Schlagschatten des Bildes selbst.
   Die abgerundeten Ecken entsprechen dem „Über uns“-Bild darunter (2rem).
   Bei einem freigestellten PNG (dem Trailer) fallen sie nicht auf, weil die
   Ecken ohnehin durchsichtig sind; bei einem Foto greifen sie. drop-shadow
   folgt dabei der gerundeten Form, nicht einem starren Rechteck. */
.hero-figure {
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.hero-figure img {
  position: relative; width: 100%; height: auto; object-fit: contain;
  border-radius: 2rem;
  filter: drop-shadow(0 16px 20px rgba(36, 23, 16, .26));
}
/* margin-bottom: -1px schließt eine mögliche 1px-Subpixel-Naht zwischen der
   Welle und dem folgenden Abschnitt (erscheint je nach Browser-Zoom/Breite). */
.hero-wave { position: relative; display: block; width: 100%; margin-bottom: -1px; }

/* --- Über uns ----------------------------------------------------------- */
.about-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 768px) { .about-grid { grid-template-columns: 1fr 1fr; } }
.about-figure { border-radius: 2rem; overflow: hidden; box-shadow: var(--shadow);
  outline: 1px solid rgba(30, 46, 36, .1); }
.about-text p + p { margin-top: 1rem; }
/* minmax(0, 1fr) statt 1fr: sonst darf eine Spalte nicht unter die Breite
   ihres längsten Wortes schrumpfen. Auf einem 375 px breiten iPhone wurde die
   Kachelreihe dadurch 410 px breit und hat die GANZE Seite mitgezogen — jeder
   Abschnitt ließ sich nach rechts wischen, die Hintergründe endeten mitten im
   Bild. Die Werte sind im internen Bereich frei änderbar, deshalb zusätzlich
   overflow-wrap: ein langes Wort bricht um, statt die Seite zu sprengen. */
.about-stats { margin-top: 2rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; text-align: center; }
.about-stats div { background: rgba(255, 255, 255, .6); border-radius: 1rem; padding: 1rem .75rem;
  min-width: 0; outline: 1px solid rgba(30, 46, 36, .05); }
.about-stats .k { font-family: var(--font-display); font-size: 1.25rem; color: var(--gold-600);
  overflow-wrap: anywhere; }
.about-stats .v { margin-top: .25rem; font-size: .75rem; color: rgba(30, 46, 36, .7);
  overflow-wrap: anywhere; }
/* Auf schmalen Geräten etwas kleiner und enger, damit drei Kacheln nebeneinander
   lesbar bleiben statt Buchstabe für Buchstabe umzubrechen. */
@media (max-width: 430px) {
  .about-stats { gap: .5rem; }
  .about-stats div { padding: .85rem .4rem; }
  .about-stats .k { font-size: 1.05rem; }
  .about-stats .v { font-size: .7rem; }
}

/* --- Karten-Raster (Angebote) ------------------------------------------- */
.cards { margin-top: 3rem; display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: #fff; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 2px 8px rgba(21, 32, 25, .06); outline: 1px solid rgba(30, 46, 36, .05);
  transition: box-shadow .3s;
}
.card:hover { box-shadow: var(--shadow); }
.card-media { position: relative; height: 12rem; overflow: hidden; }
.card-media img { height: 100%; width: 100%; object-fit: cover; transition: transform .5s; }
.card:hover .card-media img { transform: scale(1.05); }
.card-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(21, 32, 25, .7), transparent 60%);
}
.card-media h3 { position: absolute; left: 1rem; bottom: .75rem; z-index: 1;
  font-size: 1.25rem; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.card-body { padding: 1.5rem; }
.card-body p { font-size: .9rem; color: rgba(30, 46, 36, .75); }

/* --- Events & Buchungen ------------------------------------------------- */
.events-grid { margin-top: 3rem; display: grid; gap: 2.5rem; }
/* Reihenfolge auf dem Smartphone (eine Spalte, per DOM): Events → Fotoleiste →
   Formular. Auf dem Desktop bekommt die Fotoleiste per Grid die volle Breite in
   Reihe 2, unter beiden Spalten. */
@media (min-width: 1024px) {
  .events-grid { grid-template-columns: 3fr 2fr; }
  .events-grid > .event-tiles        { grid-column: 1; grid-row: 1; }
  .events-grid > .booking-col        { grid-column: 2; grid-row: 1; }
  .events-grid > .gallery-strip-wrap { grid-column: 1 / -1; grid-row: 2; }
}
.event-tiles { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .event-tiles { grid-template-columns: repeat(2, 1fr); } }
.event-tile {
  display: block; text-align: left; padding: 0; cursor: pointer;
  background: rgba(21, 32, 25, .4); border: 0; border-radius: var(--radius); overflow: hidden;
  outline: 1px solid rgba(255, 255, 255, .1); transition: outline-color .3s, outline-width .3s;
  color: inherit; font: inherit; width: 100%;
}
.event-tile:hover { outline-color: rgba(213, 181, 120, .5); }
.event-tile.active { outline: 2px solid var(--gold); }
.event-tile-media { position: relative; height: 11rem; overflow: hidden; }
.event-tile-media img { height: 100%; width: 100%; object-fit: cover; transition: transform .5s; }
.event-tile:hover .event-tile-media img { transform: scale(1.05); }
.event-tile-badge {
  position: absolute; right: .75rem; bottom: .75rem; border-radius: 999px;
  background: rgba(21, 32, 25, .8); padding: .25rem .75rem; font-size: .75rem;
  color: rgba(244, 238, 222, .9);
}
.event-tile-body { padding: 1.25rem; }
.event-tile-body h3 { font-size: 1.1rem; color: #fff; }
.event-tile-body p { margin-top: .25rem; font-size: .875rem; color: rgba(244, 238, 222, .7); }

.booking-box { background: var(--sand-50); color: var(--petrol-800); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: var(--shadow-lg); }
.booking-box h3 { font-size: 1.25rem; color: var(--petrol); }
.booking-box .hint { margin-top: .25rem; font-size: .875rem; color: rgba(30, 46, 36, .7); }

/* Fotoleiste: volle Breite, Bilder "fliegend" ohne Rahmen */
/* Abstand kommt jetzt vom Grid-gap (die Leiste sitzt im .events-grid). */
.gallery-strip-wrap { margin-top: 0; }
.gallery-strip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.gallery-strip-head h4 { font-family: var(--font-script); font-weight: 400; font-size: 1.5rem; color: var(--gold); }
@media (min-width: 640px) { .gallery-strip-head h4 { font-size: 1.875rem; } }
.gallery-rel { position: relative; margin-top: 1.5rem; }
.gallery-strip {
  display: flex; gap: 1.25rem; overflow-x: auto; scroll-behavior: smooth;
  padding-bottom: .5rem; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.gallery-strip::-webkit-scrollbar { display: none; }
.gallery-strip button {
  flex: 0 0 auto; padding: 0; border: 0; background: none; cursor: pointer;
  scroll-snap-align: center; transition: transform .3s;
}
.gallery-strip button:hover { transform: translateY(-4px); }
.gallery-strip img { height: 13rem; width: auto; border-radius: 1rem; object-fit: cover; box-shadow: var(--shadow-lg); }
@media (min-width: 640px) { .gallery-strip img { height: 16rem; } }
@media (min-width: 1024px) { .gallery-strip img { height: 18rem; } }
.strip-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  width: 2.75rem; height: 2.75rem; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--gold); color: var(--petrol-800); font-size: 1.5rem; line-height: 1;
  box-shadow: var(--shadow-lg); transition: background-color .2s, color .2s;
}
.strip-arrow:hover { background: var(--gold-600); color: #fff; }
.strip-prev { left: -.75rem; }
.strip-next { right: -.75rem; }
.icon-close { background: none; border: 0; cursor: pointer; color: rgba(244, 238, 222, .5); font-size: 1.1rem; }
.icon-close:hover { color: #fff; }

/* --- Partner ------------------------------------------------------------ */
.partner-tiles { margin-top: 3rem; display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .partner-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .partner-tiles { grid-template-columns: repeat(4, 1fr); } }
.partner-tile {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: #fff; border: 0; cursor: pointer; border-radius: var(--radius); padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(21, 32, 25, .06); outline: 1px solid rgba(30, 46, 36, .05);
  transition: box-shadow .3s, outline-color .3s; font: inherit; color: inherit; width: 100%;
}
.partner-tile:hover { box-shadow: var(--shadow); outline-color: rgba(213, 181, 120, .4); }
.partner-tile.active { outline: 2px solid var(--gold); box-shadow: var(--shadow); }
.partner-logo { height: 9rem; width: 100%; object-fit: contain; }
.partner-initials {
  height: 9rem; width: 100%; display: flex; align-items: center; justify-content: center;
}
.partner-initials span {
  width: 6rem; height: 6rem; border-radius: 999px; display: flex; align-items: center;
  justify-content: center; background: rgba(30, 46, 36, .05); font-family: var(--font-display);
  font-size: 1.75rem; color: var(--petrol); outline: 1px solid rgba(30, 46, 36, .1);
}
.partner-tile h3 { margin-top: 1rem; font-family: var(--font-sans); font-weight: 500; font-size: 1rem; color: var(--petrol); }
.partner-tile p { margin-top: .25rem; font-size: .875rem; color: rgba(30, 46, 36, .6); }
.partner-detail { margin-top: 3rem; }
.partner-detail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.partner-detail-head h4 { font-family: var(--font-script); font-weight: 400; font-size: 1.5rem; color: var(--nougat-700); }
@media (min-width: 640px) { .partner-detail-head h4 { font-size: 1.875rem; } }
.partner-detail-body { margin-top: 1.5rem; display: grid; gap: 2rem; align-items: center; }
.partner-detail-body.has-photo { grid-template-columns: 1fr; }
@media (min-width: 768px) { .partner-detail-body.has-photo { grid-template-columns: 1fr 1fr; } }
.partner-detail-body img { max-height: 18rem; width: 100%; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.partner-detail-body .txt { max-width: 36rem; color: rgba(30, 46, 36, .8); }
.icon-close-dark { background: none; border: 0; cursor: pointer; color: rgba(30, 46, 36, .4); font-size: 1.1rem; }
.icon-close-dark:hover { color: var(--petrol-800); }

/* --- Formulare ---------------------------------------------------------- */
.field { margin-bottom: .75rem; }
.field label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em;
  color: rgba(30, 46, 36, .55); margin-bottom: .25rem; }
input[type=text], input[type=email], input[type=tel], input[type=date],
input[type=datetime-local], input[type=number], input[type=password], textarea, select {
  width: 100%; border-radius: .75rem; border: 1px solid rgba(30, 46, 36, .15);
  background: #fff; padding: .65rem 1rem; font-size: 1rem; color: var(--petrol-800);
  font-family: inherit; outline: none; transition: border-color .2s;
}
@media (min-width: 640px) {
  input[type=text], input[type=email], input[type=tel], input[type=date],
  input[type=datetime-local], input[type=number], input[type=password], textarea, select { font-size: .9rem; }
}
input:focus, textarea:focus, select:focus { border-color: var(--gold); }
textarea { resize: vertical; }
.form-row { display: grid; gap: .75rem; }
@media (min-width: 640px) { .form-row.cols-2 { grid-template-columns: 1fr 1fr; } }
.form-msg { margin-top: .5rem; font-size: .9rem; }
.form-msg.error { color: #b91c1c; }
.form-ok { background: rgba(30, 46, 36, .05); border-radius: 1rem; padding: 1.5rem; text-align: center;
  outline: 1px solid rgba(30, 46, 36, .1); }

/* --- Lightbox ----------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 70; display: none;
  align-items: center; justify-content: center; padding: 1rem;
  background: rgba(21, 32, 25, .95);
}
.lightbox.open { display: flex; }
.lightbox img { max-height: 82vh; max-width: 100%; border-radius: 1rem; object-fit: contain; box-shadow: var(--shadow-lg); }
.lightbox figcaption { margin-top: .75rem; text-align: center; font-size: .875rem; color: rgba(244, 238, 222, .7); }
.lightbox .lb-close { position: absolute; top: 1.25rem; right: 1.25rem; background: none; border: 0;
  color: rgba(244, 238, 222, .7); font-size: 1.5rem; cursor: pointer; }
.lightbox .lb-close:hover { color: #fff; }
.lightbox .lb-prev, .lightbox .lb-next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  width: 2.75rem; height: 2.75rem; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--gold); color: var(--petrol-800); font-size: 1.5rem; box-shadow: var(--shadow-lg);
}
.lightbox .lb-prev { left: .75rem; } .lightbox .lb-next { right: .75rem; }
@media (min-width: 640px) { .lightbox .lb-prev { left: 1.5rem; } .lightbox .lb-next { right: 1.5rem; } }

/* --- Kalender (öffentlich) ---------------------------------------------- */
.calendar-box { margin-top: 2.5rem; background: #fff; border-radius: var(--radius);
  padding: .5rem; box-shadow: 0 2px 8px rgba(21, 32, 25, .06); outline: 1px solid rgba(30, 46, 36, .05); }
@media (min-width: 640px) { .calendar-box { padding: 1rem; } }
@media (min-width: 1024px) { .calendar-box { padding: 1.5rem; } }

/* FullCalendar in Markenfarben (öffentliche Seite) */
.calendar-box .fc { --fc-border-color: #e4d8c6; --fc-today-bg-color: #f3e7d3; font-family: var(--font-sans); }
.calendar-box .fc .fc-button-primary { background: var(--petrol); border-color: var(--petrol); color: var(--sand-100); }
.calendar-box .fc .fc-button-primary:hover { background: var(--petrol-600); border-color: var(--petrol-600); }
.calendar-box .fc .fc-button-primary:not(:disabled).fc-button-active,
.calendar-box .fc .fc-button-primary:not(:disabled):active { background: var(--gold); border-color: var(--gold); color: var(--petrol-800); }
.calendar-box .fc .fc-toolbar-title { font-family: var(--font-display); color: var(--petrol); }
.calendar-box .fc-event { cursor: pointer; border: 0; font-size: .78rem; }
@media (max-width: 640px) {
  .calendar-box .fc .fc-toolbar.fc-header-toolbar { flex-direction: column; gap: .6rem; align-items: stretch; }
  .calendar-box .fc .fc-toolbar-chunk { display: flex; justify-content: center; }
  .calendar-box .fc .fc-toolbar-title { font-size: 1.05rem; }
  .calendar-box .fc .fc-button { padding: .32em .55em; font-size: .8rem; }
}

/* --- Modal (Buchungsanfrage aus dem Kalender) --------------------------- */
.modal { position: fixed; inset: 0; z-index: 60; display: none; align-items: center;
  justify-content: center; padding: 1rem; background: rgba(21, 32, 25, .6); }
.modal.open { display: flex; }
.modal-box { width: 100%; max-width: 32rem; max-height: 90vh; overflow-y: auto;
  background: var(--sand-50); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-lg); }

/* --- Footer ------------------------------------------------------------- */
.footer { background: var(--petrol-800); color: var(--sand-100); }
.footer-grid { display: grid; gap: 2rem; padding: 3.5rem 0; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
.footer img { height: 54px; width: auto; }
.footer h3 { font-size: 1.125rem; color: #fff; }
.footer ul { list-style: none; margin: .75rem 0 0; padding: 0; }
.footer li { margin-bottom: .375rem; font-size: .9rem; color: rgba(244, 238, 222, .8); }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--gold); }
.footer .tagline { margin-top: 1rem; max-width: 20rem; font-size: .9rem; color: rgba(244, 238, 222, .7); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding: 1.25rem 0; text-align: center;
  font-size: .75rem; color: rgba(244, 238, 222, .5); }

/* --- Rechtstexte -------------------------------------------------------- */
.legal { max-width: 48rem; margin: 0 auto; padding: 7rem 1.25rem 6rem; }
/* „Datenschutzerklärung“ ist ein einzelnes langes Wort und passte auf schmalen
   Geräten (iPhone bis 390 px) nicht in eine Zeile — es ragte über den Rand und
   machte die ganze Seite breiter als das Display. hyphens greift dank
   lang="de" mit deutscher Silbentrennung; overflow-wrap ist der Notnagel für
   Browser ohne Trennmuster. Dasselbe gilt für lange Wörter im Fließtext. */
.legal h1 { font-size: 2.25rem; color: var(--petrol); margin-top: 1rem;
  -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 400px) { .legal h1 { font-size: 1.85rem; } }
.legal p, .legal h2 { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.legal section { margin-top: 2rem; }
.legal h2 { font-size: 1.25rem; color: var(--petrol); font-family: var(--font-display); }
.legal p { margin-top: .5rem; color: rgba(30, 46, 36, .8); }
.legal .back { font-size: .9rem; color: var(--gold-600); text-decoration: none; }
.legal .back:hover { text-decoration: underline; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* Honeypot-Feld (Anti-Bot): für Menschen unsichtbar, Bots füllen es aus. */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none; }

/* Toast-Hinweis (z.B. "Tag bereits belegt") */
.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%) translateY(1rem);
  z-index: 80; background: var(--petrol-800); color: var(--sand-100);
  padding: .7rem 1.25rem; border-radius: 999px; font-size: .9rem;
  box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s; max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }