/* =======================================================
   SchlossFUN — style.css (CLEAN)
   Stack: HTML + CSS only
======================================================= */

/* ========== Local Fonts (FIXED) ========== */
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-v20-latin-regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-v20-latin-700.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Saira Condensed";
  src:url("../fonts/saira-condensed-400.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Saira Condensed";
  src:url("../fonts/saira-condensed-600.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

/* ========== Design Tokens ========== */
:root{
  --bg: #f1e8dc;
  --text: #12333a;
  --muted: #355a61;
  --brand: #2b6b73;
  --brand-2: #1f5860;
  --accent: #c8a24a;
  --card: #ffffff;
  --border: rgba(18, 51, 58, 0.15);

  --radius: 18px;
  --shadow: 0 12px 30px rgba(0,0,0,.10);
  --container: 1440px;

  --header-offset: 150px;

  /* Glass tokens (dezent & edel) */
  --glass-bg: rgba(255,255,255,.62);
  --glass-bg-strong: rgba(255,255,255,.72);
  --glass-border: rgba(255,255,255,.42);
  --glass-outline: rgba(18, 51, 58, 0.10);
  --glass-blur: 14px;
}

section[id],
form[id]{ scroll-margin-top: var(--header-offset); }

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

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

body{
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
}
@media (min-width: 900px){
  body{ font-size: 17px; }
}

/* ========== Accessibility ========== */
.skip-link{
  position: absolute;
  left: -999px;
  top: 12px;
  background: var(--card);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  z-index: 9999;
}
.skip-link:focus{ left: 12px; }

a{
  color: var(--brand-2);
  text-decoration-thickness: .06em;
  text-underline-offset: .18em;
}
a:hover{ text-decoration-color: var(--accent); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline: 3px solid rgba(200, 162, 74, .7);
  outline-offset: 2px;
  border-radius: 10px;
}

/* ========== Layout ========== */
.container{
  width: min(var(--container), 92vw);
  margin: 0 auto;
}
.section{ padding: 64px 0; }

.section-alt{
  background: rgba(43, 107, 115, .07);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.grid-2{ display: grid; gap: 22px; align-items: stretch; }
@media (min-width: 900px){
  .grid-2{ grid-template-columns: 1.1fr .9fr; }
}

/* Editorial Layout */
.editorial-grid{
  display:grid;
  gap:34px;
  align-items:start;
}
@media (min-width: 900px){
  .editorial-grid{ grid-template-columns: 1.1fr .9fr; }
}
@media (min-width: 900px){
  .editorial--media-first .editorial-grid{ grid-template-columns: .9fr 1.1fr; }
  .editorial--media-first .editorial-copy{ order:2; }
  .editorial--media-first .editorial-media{ order:1; }
}

/* Partner: volle Breite (kein 2-Spalten-Editorial) */
#partner .editorial-grid{
  grid-template-columns: 1fr !important;
}

/* ========== Type ========== */
h1,h2,
.nav a,
.nav-group-btn{
  font-family:"Saira Condensed","Inter",system-ui,sans-serif;
  letter-spacing:.04em;
  text-transform:uppercase;
}

h1,h2,h3{
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}

h1{ font-size: clamp(2.2rem, 6vw, 4.2rem); }
h2{ font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3{ font-size: 1.28rem; }

p{ margin: 0 0 12px; }

.small{ font-size: .95rem; }
.muted{ color: var(--muted); }

.brand-em{
  font-weight: 800;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--accent) 85%, #000 15%);
}

.visually-hidden{
  position:absolute !important;
  height:1px; width:1px;
  overflow:hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space:nowrap;
}

/* ========== Buttons ========== */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,.7);
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
  background: rgba(255,255,255,.85);
  color: var(--text);
}
.btn-primary{
  background: var(--brand);
  border-color: rgba(255,255,255,.7);
  color: var(--bg);
}
.btn-primary:hover{ background: var(--brand-2); }

/* ========== Glass Cards (edel) ========== */
/* Fallback: auch ohne backdrop-filter wirkt es wie "soft card" */
.card{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  outline: 1px solid var(--glass-outline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

/* Nur wenn unterstützt: echtes Frosted Glass */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .card{
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.08);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.08);
  }
}

/* Cards grid */
.cards{
  display: grid;
  gap: 14px;
  margin-top: 18px;
}
@media (min-width: 760px){
  .cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px){
  .cards{ grid-template-columns: repeat(4, 1fr); }
}

/* ======================================================
   HEADER + NAV
====================================================== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 5000;
  background: rgba(241,232,220,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
}

/* Burger icon */
.burger{
  display:inline-block;
  width:26px;
  height:2px;
  background:var(--text);
  position:relative;
  border-radius: 999px;
}
.burger::before,
.burger::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  background:var(--text);
  border-radius: 999px;
}
.burger::before{ top:-7px; }
.burger::after{ top:7px; }

/* Button-Reset */
.site-header .nav-group-btn{
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  outline: none;
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  line-height: inherit;
  cursor: pointer;
}
.site-header .nav-group-btn span{
  font-size: .85em;
  line-height: 1;
  transform: translateY(1px);
}
.site-header .nav a{ text-decoration: none !important; }

.site-header .nav-group-btn{
  border-bottom: 2px solid transparent;
  padding-bottom: 6px;
}

.site-header .nav a:hover,
.site-header .nav-group-btn:hover,
.nav-group:hover > .nav-group-btn{
  border-bottom-color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.site-header .nav a:focus-visible,
.site-header .nav-group-btn:focus-visible,
.nav-group:focus-within > .nav-group-btn{
  border-bottom-color: var(--brand);
  box-shadow: inset 0 -2px 0 var(--brand);
}

.header-cta{ white-space: nowrap; }
.header-cta-desktop{
  padding: 12px 18px;
  border-radius: 14px;
  font-size: .98rem;
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}
.header-cta-mobile{ width: 100%; justify-content: center; }

.nav-hidden{ display:none !important; }

/* Desktop */
@media (min-width:769px){
  .nav.nav-desktop{
    display:flex;
    align-items:center;
    gap: 28px;
    font-size: 1.45rem;
    font-weight: 550;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .nav-toggle.nav-mobile{ display:none; }

  .nav.nav-desktop a,
  .nav.nav-desktop .nav-group-btn{
    font-family: "Saira Condensed","Inter",system-ui,sans-serif;
    letter-spacing: inherit;
    text-transform: inherit;
    line-height: 1.1;
    text-decoration: none;

    display:inline-flex;
    align-items:center;
    padding: 8px 2px 10px;
  }

  .nav.nav-desktop a{ transform: translateY(1px); }
  .nav.nav-desktop .nav-group-btn{ transform: translateY(2.2px); }

  .nav-group{ position: relative; display:inline-flex; align-items:center; }

  .nav-group-menu{
    display:none;
    position:absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 260px;
    padding: 12px;
    border-radius: 16px;

    background: rgba(255,255,255,.86);
    border: 1px solid rgba(18,51,58,.10);
    box-shadow: 0 18px 50px rgba(0,0,0,.16);
    backdrop-filter: blur(12px);
    z-index: 99999;
  }

  .nav-group::after{
    content:"";
    position:absolute;
    left:0; right:0;
    top:100%;
    height:12px;
    z-index: 99998;
  }

  .nav-group-menu::before{
    content:"";
    position:absolute;
    top:-7px;
    left: 26px;
    width:16px;
    height:16px;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(18,51,58,.10);
    border-right: 0;
    border-bottom: 0;
    transform: rotate(45deg);
  }

  .nav-group:hover .nav-group-menu,
  .nav-group:focus-within .nav-group-menu{
    display:grid;
    gap:4px;
  }

  .nav-group-menu a{
    display: grid;
    grid-template-columns: 18px 1fr;
    column-gap: 10px;
    align-items: center;

    padding: 12px 16px;
    border-radius: 12px;

    color: rgba(18,51,58,.92);
    text-decoration: none;
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 1rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    font-weight: 600;

    transition: transform .15s ease, color .2s ease;
    background: transparent;
  }

  .nav-group-menu a::before{
    content:"";
    width:0;height:0;
    border-left:5px solid var(--accent);
    border-top:3px solid transparent;
    border-bottom:3px solid transparent;
    opacity:.85;
    justify-self: start;
  }

  .nav-group-menu a:hover{
    transform: translateX(2px);
    color: #3d636b;
  }
}

/* Mobile */
@media (max-width: 768px){
  .nav.nav-desktop{ display:none; }
  .header-cta-desktop{ display:none; }

  .nav-toggle{ position: relative; }
  .nav-toggle summary{ list-style:none; cursor:pointer; user-select:none; }
  .nav-toggle summary::-webkit-details-marker{ display:none; }

  .nav-toggle > summary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 8px;
    border: none;
    background: transparent;
    box-shadow: none;
  }

  .nav-mobile-panel{
    display:none;
    position: fixed;
    right: 43px;
    top: 68px;
    left: auto;

    width: min(86vw, 340px);
    max-width: calc(100vw - 24px);
    box-sizing: border-box;

    max-height: calc(100vh - 120px);
    overflow: auto;

    padding:14px;
    border-radius:16px;

    background: rgba(255,255,255,.90);
    border: 1px solid rgba(18,51,58,.12);
    box-shadow: var(--shadow);
    z-index: 99999;
    gap: 12px;

    backdrop-filter: blur(12px);
  }
  .nav-toggle[open] .nav-mobile-panel{ display:grid; }

  .nav-sub{ position: static; }
  .nav-sub > summary{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding: 10px 0;
    margin: 0;

    border: none;
    background: transparent;
    border-radius: 0;

    font-family: "Saira Condensed","Inter",system-ui,sans-serif;
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;

    color: rgba(18,51,58,.88);
  }

  .nav-sub > summary:hover{ background: transparent; color: var(--brand); }
  .nav-sub > summary::after{ content:"▾"; opacity:.75; font-size:.9em; }
  .nav-sub[open] > summary::after{ content:"▴"; }

  .nav-sub-menu{
    display:none;
    position: static;
    padding: 8px 0 0 12px;
    margin-left: 6px;
    border-left: 2px solid rgba(200,162,74,.55);
  }
  .nav-sub[open] .nav-sub-menu{ display:grid; gap:8px; }

  .nav-sub-menu a{
    display:block;
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(18,51,58,.10);
  }
}

/* ======================================================
   HERO Cover
====================================================== */
.hero.hero-cover{
  position: relative;
  min-height: clamp(600px, 92vh, 980px);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.hero-cover-bg{
  position:absolute;
  inset:0;
  background: url("../assets/ui/Schloss-Seeburg-2400.jpg")
    center 20% / cover no-repeat;
}
.hero-cover-inner{
  position: relative;
  z-index: 2;
  min-height: clamp(520px, 78vh, 820px);
  display: grid;
  place-items: center;
  padding-top: 0 !important;
}
.hero-cover-logo{
  width: min(280px, 46vw);
  height: auto;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.25));
}
.hero-cover-caption{
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(clamp(18px, 5vh, 56px) - 160px);

  display: grid;
  gap: 10px;
  padding: 18px 18px 16px;
  text-align: center;
  color: #fff;

  background: linear-gradient(
    to right,
    rgba(0,0,0,0),
    rgba(0,0,0,.45),
    rgba(0,0,0,0)
  );
}
.hero-cover-kicker{ margin:0; font-weight:700; opacity:.92; }
.hero-cover-title{
  margin:0;
  font-family:"Bebas Neue","Inter",system-ui,sans-serif;
  line-height:1.05;
  font-size: clamp(2.1rem, 5.2vw, 4.4rem);
}
@media (max-width:768px){
  .hero-cover-inner{ min-height: 70vh; }
  .hero-cover-logo{ width: min(200px, 70vw); }
  .hero-cover-caption{
    bottom: calc(clamp(-220px, -18vh, -160px) - 5px);
  }
}

/* ========== Hero Intro ========== */
.hero-intro{ padding: 56px 0; }
.hero-intro .intro-text{
  margin: 0;
  max-width: 100%;
  color: var(--muted);
  line-height: 1.75;
}

/* ======================================================
   Slider Section
====================================================== */
.slider{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: var(--shadow);
  background: color-mix(in srgb, var(--card) 20%, transparent);
  backdrop-filter: blur(8px);
  padding: 10px;
  overflow: hidden;
}
.slider-full{
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  position: relative;
  isolation: isolate;
}
.slider-full::before,
.slider-full::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 56px;
  pointer-events:none;
  z-index: 2;
}
.slider-full::before{
  left:0;
  background: linear-gradient(to right, var(--bg), rgba(241,232,220,0));
}
.slider-full::after{
  right:0;
  background: linear-gradient(to left, var(--bg), rgba(241,232,220,0));
}
.slider-track{
  display: flex;
  padding: 2px;
  --slider-gap: 14px;
  gap: var(--slider-gap);
  width: max-content;
  overflow-x: auto;
  border-radius: calc(var(--radius) - 10px);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.slider-slide{
  margin: 0;
  flex: 0 0 86vw;
  scroll-snap-align: start;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}
.slider-slide img{
  width: 100%;
  height: clamp(260px, 40vw, 420px);
  object-fit: cover;
  display: block;
}
@media (min-width: 760px){ .slider-slide{ flex-basis: 48vw; } }
@media (min-width: 1100px){ .slider-slide{ flex-basis: 32vw; } }
@keyframes sliderAuto{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-50%,0,0); }
}
@media (min-width: 769px){
  .slider-track{
    overflow-x: hidden;
    gap: 0;
    scroll-snap-type: none;
    animation: sliderAuto 55s linear infinite;
    will-change: transform;
  }
  .slider-slide{ margin-right: var(--slider-gap); }
  .slider:hover .slider-track{ animation-play-state: paused; }
}
@media (max-width: 768px){
  .slider-track{ animation: none; }
}
.slider-hint{ margin-top: 10px; }

/* ======================================================
   Services
====================================================== */
.service{ display: flex; flex-direction: column; gap: 10px; }

.service-media{
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  margin: 0;
}
.service-media img{
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  transition: transform .35s ease, filter .35s ease;
}
.card.service h3{ margin-top: 2px; margin-bottom: 6px; }
.card.service p{ margin: 0; color: var(--muted); }

@media (min-width: 769px){
  .card.service{ transition: transform .18s ease, box-shadow .18s ease; }
  .card.service:hover{
    transform: translateY(-3px);
    box-shadow: 0 18px 44px rgba(0,0,0,.14);
  }
  .card.service:hover .service-media img{
    transform: scale(1.04);
    filter: saturate(1.03) contrast(1.03);
  }
}

.zoom{
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
  color: var(--text);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}

.service-media-link{ position: absolute; inset: 0; display: none; }
@media (min-width: 769px){
  .service-media-link{ display: block; }
  .service-media:hover .zoom,
  .service-media:focus-within .zoom{
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 768px){ .zoom{ display:none; } }

/* Teaser + "... mehr" */
.service-excerpt{
  margin-bottom: 8px;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.service-more{
  display: inline-block;
  margin: 2px 0 10px;
  font-weight: 700;
  text-decoration: none;
  color: var(--brand-2);
}
.service-more:hover{
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

/* CTA in Services */
.service-cta{
  width: fit-content;
  border-radius: 12px;
  padding: 10px 14px;
  text-transform: none;
}
@media (max-width: 768px){
  .service-cta{ width: 100%; }
}

/* ======================================================
   Lightbox (CSS-only)
====================================================== */
.lightbox{ position: fixed; inset: 0; display: none; z-index: 200; }
.lightbox:target{ display: block; }
.lightbox-backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.lightbox-content{
  position: relative;
  width: min(1200px, 92vw);
  margin: 10vh auto 0;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0,0,0,.85);
  overflow: hidden;
  backdrop-filter: blur(10px);
}
.lightbox-content img{ width: 100%; height: auto; display: block; }
.lightbox-content figcaption{ padding: 10px 14px 14px; }
.lightbox-close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  text-decoration: none;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 10px;
  color: #000;
}
@media (max-width: 768px){
  .lightbox:target{ display: none; }
}


/* ======================================================
   Galerie Video Lightbox
====================================================== */
.gallery-overview-card--video{
  position: relative;
}

.gallery-card-play{
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.82);
  color: var(--brand);
  font-size: 1.2rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
}

.gallery-video-lightbox{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.78);
  z-index: 9999;
  padding: 24px;
}

.gallery-video-lightbox.is-open{
  display: flex;
}

.gallery-video-lightbox-overlay{
  position: absolute;
  inset: 0;
}

.gallery-video-lightbox-inner{
  position: relative;
  z-index: 2;
  width: min(1200px, 94vw);
  max-height: 94vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-video-lightbox-figure{
  margin: 0;
  background: #000;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  max-width: 100%;
  max-height: 94vh;
}

.gallery-video-lightbox-figure video{
  display: block;
  max-width: min(92vw, 1200px);
  max-height: 82vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  background: #000;
}

.gallery-video-lightbox-figure figcaption{
  padding: 12px 16px;
  font-size: .95rem;
  color: #fff;
  background: #000;
}

.gallery-video-lightbox-close{
  position: absolute;
  top: -18px;
  right: -18px;
  z-index: 3;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(255,255,255,.94);
  color: var(--text);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  font-size: 1.5rem;
  line-height: 1;
}

@media (max-width: 640px){
  .gallery-card-play{
    width: 48px;
    height: 48px;
    font-size: 1rem;
    right: 14px;
    bottom: 14px;
  }

  .gallery-video-lightbox{
    padding: 12px;
  }

  .gallery-video-lightbox-close{
    top: 10px;
    right: 10px;
    width: 42px;
    height: 42px;
    font-size: 1.25rem;
  }

  .gallery-video-lightbox-figure video{
    max-width: 100%;
    max-height: 74vh;
  }

  .gallery-video-lightbox-figure figcaption{
    padding: 10px 12px;
    font-size: .9rem;
  }
}


/* ======================================================
   Editorial Media
====================================================== */

/* ======================================================
   Editorial Media
====================================================== */
.editorial-media{
  margin: 0;
  width: 100%;
  max-width: 100%;
  border-radius: 18px;
  overflow: hidden;
  border: 0;
  box-shadow: none;
  background: none;
}
.editorial-media img{ display:block; width:100%; height:auto; }
.wow-embed{ border-radius: 18px; overflow:hidden; }
.wow-embed #wowslider-container1{ max-width:100%; }

/* ======================================================
   Partner Accordion (3-spaltig, volle Breite, Glas)
====================================================== */
.accordion{
  margin-top: 14px;
  display: grid;
  gap: 12px;
  align-items: start;
}
.partner-sep{
  border: none;
  height: 1px;
  background: rgba(0,0,0,0.12);
  margin: 16px 0;
}
@media (min-width: 900px){
  #partner .accordion{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    align-items: start;
  }
}

/* Accordion cards (Glass) */
.accordion details{
  align-self: start;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  outline: 1px solid var(--glass-outline);
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  overflow: hidden;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .accordion details{
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.08);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.08);
  }
}

.accordion summary{
  cursor: pointer;
  list-style: none;
  padding: 12px 14px;
  font-family: "Saira Condensed", system-ui, sans-serif;
  letter-spacing: .02em;
  font-size: 1.45rem;
  font-weight: 650;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.accordion summary::-webkit-details-marker{ display:none; }
.accordion summary::after{
  content:"▾";
  opacity:.7;
  transition: transform .2s ease;
}
.accordion details[open] summary::after{ transform: rotate(180deg); }
.accordion .accordion-body{ padding: 0 14px 14px; }

/* Open state: 2 columns */
.partner-entry{
  display:grid;
  gap:14px;
}
@media (min-width: 700px){
  .partner-entry{
    grid-template-columns: 1fr 120px;
    align-items:start;
  }
}
.partner-entry .partner-logo{
  width:100%;
  max-width:110px;
  justify-self:end;
  border-radius:10px;
  border:1px solid rgba(18, 51, 58, 0.12);
  background: rgba(255,255,255,.6);
  padding:6px;
}
@media (max-width: 699px){
  .partner-entry .partner-logo{ justify-self:start; }
}

/* ======================================================
   Form / Kontakt
====================================================== */
.form .field{ display: grid; gap: 6px; margin: 12px; }
label{ font-weight: 700; }

input, textarea, select{
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.78);
  font: inherit;
  color: inherit;
}
textarea{ resize: vertical; min-height: 120px; }

.contact-left,
form.card.form{ height: 100%; }

.contact-left{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.55);
  outline: 1px solid rgba(18,51,58,.08);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .contact-left{
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.08);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.08);
  }
}

.contact-left-inner{
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 22px;
  align-items: start;
}
.contact-left-media{ margin:0; align-self:start; }
.contact-left-media img{
  display:block;
  width:100%;
  height:auto;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
@media (max-width:768px){
  .contact-left-inner{ grid-template-columns: 1fr; }
  .contact-left-media{ max-width: 220px; justify-self: center; }
}

form.card.form{ display:flex; flex-direction:column; }
form.card.form textarea{ min-height:180px; resize:vertical; }

.checkbox-field{ margin-top: 6px; }
.checkbox-label{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-weight: 500;
  color: var(--muted);
  padding-bottom: 20px;
}
.checkbox-label input{
  width: 18px;
  height: 18px;
  margin-top: 3px;
}

.contact-list{
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
}
.contact-list dt{ font-weight: 800; }
.contact-list dd{ margin: 0; color: var(--muted); }

/* ======================================================
   Footer
====================================================== */
.site-footer{
  padding: 26px 0;
  border-top: 1px solid var(--border);
}
.footer-inner{
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.footer-links{ display: inline-flex; gap: 12px; }
.footer-links a{ text-decoration: none; padding-left: 0.65rem;}

/* ========== Back to top ========== */
.back-to-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.86);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 10px;
  text-decoration: none;
  font-size: 20px;
  font-weight: 700;
  box-shadow: var(--shadow);
  z-index: 3000;
}
.back-to-top:hover{ transform: translateY(-2px); }

/* ======================================================
   Social bar
====================================================== */
.social-bar{
  position: fixed;
  right: 0;
  top: 45%;
  transform: translateY(-50%);
  display: grid;
  gap: 8px;
  z-index: 4000;
}
.social-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,.86);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 10px 0 0 10px;
  text-decoration: none;
  box-shadow: var(--shadow);
  transform: translateX(70%);
  transition: transform .25s ease;
  backdrop-filter: blur(10px);
}
.social-item:hover{ transform: translateX(0); }
.social-item img{
  width:25px;
  height:25px;
  display:block;
  transform: translateX(-5px);
}
.label{ white-space: nowrap; font-size: .9rem; }

@media (max-width:768px){
  .social-bar{
    display: grid;
    top: auto;
    bottom: calc(env(safe-area-inset-bottom) + 92px);
    transform: none;
    right: max(0px, env(safe-area-inset-right));
    gap: 10px;
  }
  .social-item{
    transform: none !important;
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    border-radius: 12px;
  }
  .social-item .label{ display:none; }
  .social-item img{ transform:none !important; }
}

/* ======================================================
   Cookie Banner
====================================================== */
.cookie-banner{
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: calc(env(safe-area-inset-bottom) + 12px);
  z-index: 4500;

  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  align-items:center;
  justify-content: space-between;

  padding: 12px 14px;
  border-radius: 16px;

  background: rgba(255,255,255,.86);
  border: 1px solid rgba(18,51,58,.12);
  box-shadow: 0 18px 44px rgba(0,0,0,.14);
  backdrop-filter: blur(12px);
}
.cookie-text{
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
}
.cookie-actions{
  display:flex;
  gap: 10px;
  align-items:center;
}
.cookie-decline{ border-color: rgba(18,51,58,.18); }

@media (min-width: 900px){
  .cookie-banner{
    left: auto;
    right: 18px;
    bottom: 18px;
    width: min(520px, 44vw);
  }
}
/* ======================================================
   FINAL MENU (bereinigt, stabil)
   -> ans ENDE der style.css
====================================================== */

/* Desktop */
@media (min-width: 769px){

  /* Hauptmenü: kleiner & weniger globig */
  .nav.nav-desktop{
    font-size: 1.45rem;
    letter-spacing: .04em;
    font-weight: 600;
	color: var(--muted);  /* statt volle 100% */
  }

  .nav.nav-desktop > a,
  .nav.nav-desktop > .nav-group > .nav-group-btn{
    padding: 6px 2px 8px;
    font-family: "Saira Condensed","Inter",system-ui,sans-serif; /* stabil */
	color: rgba(18,51,58,.65);  
  }

  /* Dropdown Panel etwas schlanker */
  .nav-group-menu{
    min-width: 240px;
  }

  /* Dropdown Links: ruhig, nicht buttonartig, nicht uppercase */
  .nav-group-menu a{
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    text-transform: none;
    font-size: 1.45rem;
    font-weight: 500;
    letter-spacing: .004em;

    padding: 12px 14px;      /* etwas mehr Raum */
    line-height: 1.25;

    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  .nav-group-menu a:hover{
    background: transparent !important;
    border-color: transparent !important;
    color: #3d636b !important;
    transform: translateX(3px);
  }

  .nav-group-menu a:focus,
  .nav-group-menu a:focus-visible{
    background: transparent !important;
    border-color: transparent !important;
    outline: 2px solid rgba(200,162,74,.55) !important;
    outline-offset: 2px;
  }
}

/* Mobile etwas ruhiger */
@media (max-width: 768px){
  .nav-sub > summary{
    font-size: 1.02rem;
    letter-spacing: .03em;
  }
  .nav-sub-menu a{
    font-size: .98rem;
  }
}
/* ======================================================
   GOOGLE MAP EMBED
====================================================== */

.map-embed{
  margin-top: 18px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.map-embed iframe{
  width: 100%;
  height: 420px; /* kannst du anpassen */
  border: 0;
  display: block;
}

@media (max-width: 768px){
  .map-embed iframe{
    height: 320px;
  }
}
.page-gallery{
  display:grid;
  gap:12px;
}
.page-gallery figure{ margin:0; }
.page-gallery img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:16px;
  display:block;
}

/* Mobile: 1 Spalte */
.page-gallery{ grid-template-columns: 1fr; }

/* Desktop: 2 Spalten + optional 3. Bild über volle Breite */
@media (min-width: 900px){
  .page-gallery{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .page-gallery figure:nth-child(3){ grid-column: 1 / -1; }
}
/* ==========================================
   UNTERSEITEN HERO – Banner 2400 x 637
   (Index bleibt unverändert!)
========================================== */

/* nur Seiten mit body.page */
.page .hero.hero-cover{
  min-height: 0 !important;     /* überschreibt das große clamp vom Index */
  height: auto;
}

/* modernes, sauberes Seitenverhältnis */
@supports (aspect-ratio: 1 / 1){
  .page .hero.hero-cover{
    aspect-ratio: 2400 / 637;
  }
}

/* Fallback für ältere Browser */
@supports not (aspect-ratio: 1 / 1){
  .page .hero.hero-cover{
    padding-top: 26.54%; /* 637 / 2400 * 100 */
    position: relative;
  }
  .page .hero-cover-bg{
    position: absolute;
    inset: 0;
  }
}

/* Logo sauber zentriert lassen */
.page .hero-cover-inner{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
}

.page-business .hero-cover-bg{
  background: url("../assets/images/Headerpic/01-SchlossFUN-2400.jpg")
    center 20% / cover no-repeat;
}

.page-hochzeiten .hero-cover-bg{
  background: url("../assets/images/Headerpic/02-SchlossFUN-2400.jpg")
    center 20% / cover no-repeat;
}

.page-feiern .hero-cover-bg{
  background: url("../assets/images/Headerpic/03-SchlossFUN-2400.jpg")
    center 20% / cover no-repeat;
}

.page-uebernachten .hero-cover-bg{
  background: url("../assets/images/Headerpic/04-SchlossFUN-2400.jpg")
    center 20% / cover no-repeat;
}

.page-impressum .hero-cover-bg{
  background: url("../assets/images/Headerpic/05-SchlossFUN-2400.jpg")
    center 20% / cover no-repeat;
}

.page-datenschutz .hero-cover-bg{
  background: url("../assets/images/Headerpic/06-SchlossFUN-2400.jpg")
    center 20% / cover no-repeat;
}

.editorial-copy a{
  font-size: .95rem;
  opacity: .8;
}

/* =========================================
   MOBILE HERO FIX – Unterseiten nicht zu flach
   Desktop bleibt unverändert
========================================= */

@media (max-width: 768px) {

  .page .hero.hero-cover {
    aspect-ratio: auto !important;      /* breites Desktop-Ratio deaktivieren */
    height: clamp(280px, 42vh, 420px);  /* schöne stabile Mobile-Höhe */
    min-height: 280px;
  }

  /* Optional: kleinere 1200px Bilder auf Mobile laden */
  .page-business .hero-cover-bg{
    background-image: url("../assets/images/Headerpic/01-SchlossFUN-1200.jpg");
	background-position: 80% center;
  }

  .page-hochzeiten .hero-cover-bg{
    background-image: url("../assets/images/Headerpic/02-SchlossFUN-1200.jpg");
	background-position: 80% center;
  }

  .page-feiern .hero-cover-bg{
    background-image: url("../assets/images/Headerpic/03-SchlossFUN-1200.jpg");
	background-position: 80% center;
  }

  .page-uebernachten .hero-cover-bg{
    background-image: url("../assets/images/Headerpic/04-SchlossFUN-1200.jpg");
	background-position: 80% center;
  }

  .page-impressum .hero-cover-bg{
    background-image: url("../assets/images/Headerpic/05-SchlossFUN-1200.jpg");
	background-position: 80% center;
  }

  .page-datenschutz .hero-cover-bg{
    background-image: url("../assets/images/Headerpic/06-SchlossFUN-1200.jpg");
	background-position: 80% center;
  }

}
/* ================================
   Unterseiten: Bild-Grid rechts + Lupe (CLEAN)
================================ */

.page .page-gallery{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  justify-items: stretch;
}

.page .page-gallery .gallery-item{
  position: relative;
  margin: 0;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 0;
  background: transparent;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

.page .page-gallery img{
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
  transition: transform .35s ease, filter .35s ease;
}

.page .page-gallery .gallery-item--wide{
  grid-column: 1 / -1;
}

.page .page-gallery .gallery-item--wide img{
  height: 300px;
}

.page .page-gallery .gallery-link{
  position: absolute;
  inset: 0;
  display: block;
}

/* Lupe (wie bei Cards) */
.page .page-gallery .zoom{
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
  color: var(--text);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}

@media (min-width: 769px){
  .page .page-gallery .gallery-item:hover img{
    transform: scale(1.04);
    filter: saturate(1.03) contrast(1.03);
  }
  .page .page-gallery .gallery-item:hover .zoom,
  .page .page-gallery .gallery-item:focus-within .zoom{
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px){
  .page .page-gallery{
    grid-template-columns: 1fr;
  }
  .page .page-gallery img{
    height: 220px;
  }
  .page .page-gallery .gallery-item--wide img{
    height: 220px;
  }
  .page .page-gallery .zoom{
    display: none;
  }
}
/* Unterseiten: rechte Spalte (Wrapper) komplett transparent */
.page .editorial-media{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
}
/* Unterseiten: 2-Spalten-Bereich ohne zusätzliche Hintergrundfläche */
.page .editorial.section{
  background: transparent !important;
}
/* ===== Unterseiten: rechte Bildspalte ohne Hintergrund-Box ===== */
.page .editorial-media{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* optional: falls du noch “innen” abgerundet/abgeschnitten siehst */
.page .editorial-media{
  overflow: visible !important;
}
.social-item--hotline{
  border-color: rgba(200,162,74,.35);
}
.social-item--hotline:hover{
  border-color: rgba(200,162,74,.7);
}
/* ==============================
   Kontakt: Map volle Breite
============================== */
.contact-left-inner{
  display: block !important;
}

.contact-left-copy{
  width: 100%;
}
/* =========================
   Google Maps — Premium 2-Klick
========================= */
.map-2click{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  margin-top: 10px;

  background:
    linear-gradient(rgba(0,0,0,.30), rgba(0,0,0,.30)),
    url("../assets/ui/maps-preview.jpg") center / cover no-repeat;
}

.map-2click iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.map-2click-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 24px;
  gap: 14px;
  color: #fff;
}

.map-2click-text{
  max-width: 480px;
  font-size: .95rem;
  line-height: 1.5;
  opacity: .9;
}

.map-2click-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.form-note{
  margin-top: 14px;
  font-size: 1.0rem;
  opacity: .65;
  text-align: center;
}
.form select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.form select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  padding-right: 3rem;

  background-image: url("data:image/svg+xml;utf8,<svg fill='%2312333a' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 24px; /* HIER steuerst du die sichtbare Größe */
}
/* Back-to-top dezent (Mobile angepasst) */
.back-to-top{
  position: fixed;
  right: 0px;
  bottom: 20px;
  z-index: 4000;

  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.8);
  color: rgba(18,51,58,.8);

  text-decoration: none;
  font-size: 18px;

  box-shadow: none;
}
.back-to-top:hover{
  background: rgba(18,51,58,.2);
  color: rgba(18,51,58,.85);
}
/* ================================
   MOBILE MENU – EINHEITLICHE TYPO
================================ */
@media (max-width: 768px){

  /* Hauptpunkte (DAS SCHLOSS / EVENTS) */
  .nav-mobile-panel .nav-sub > summary{
    font-size: 1.45rem !important;
    font-weight: 600 !important;
    padding: 12px 0 !important;
  }

  /* Untermenü-Links */
  .nav-mobile-panel .nav-sub-menu a{
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    padding: 12px 12px !important;
  }

  /* Direkte Links (Kontakt etc.) */
  .nav-mobile-panel > a{
    font-size: 1.45rem !important;
    font-weight: 600 !important;
    padding: 12px 0 !important;
  }

  /* CTA Button bleibt stärker */
  .header-cta-mobile{
    font-size: 1.39rem !important;
    font-weight: 700 !important;
  }
}
//* ================================
   Mobile Menü – luxuriös + 4px Tiefe
================================ */

@media (max-width: 768px){

  .nav-mobile-panel{
    opacity: 0;
    transform: translateY(4px);
    transition:
      opacity .35s cubic-bezier(.4,0,.2,1),
      transform .35s cubic-bezier(.4,0,.2,1);
  }

  .nav-toggle[open] .nav-mobile-panel{
    opacity: 1;
    transform: translateY(0);
  }

}

/* Cookie Banner – Checkbox Layout */
.cookie-banner[hidden]{ display:none !important; }

.cookie-form{
  display:grid;
  gap:10px;
  width:100%;
}

.cookie-check{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:.95rem;
  color: var(--muted);
}

.cookie-check input{
  width:18px;
  height:18px;
  margin-top:2px;
  accent-color: var(--brand);
}

.cookie-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* =========================================
   HERO FIX – stabil für Mobile & Landscape
========================================= */

@media (max-width: 1024px) {

  body.page .hero.hero-cover {
    aspect-ratio: auto !important;
    height: clamp(260px, 38vh, 420px) !important;
    min-height: 260px !important;
  }
}
/* =========================================
   HERO LOGO – Mobile sauber skalieren
========================================= */

@media (max-width: 768px) {

  .hero-cover-logo {
    width: clamp(160px, 48vw, 260px);
    height: auto;
  }
}

/* ================================
   Kontaktformular – edler Look
   (nur Optik, kein Layout-Bruch)
================================ */

/* Karte/Form innen etwas „premium“ */
.form.card{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(18,51,58,.14);
}

/* Field spacing */
.form .field{ margin-bottom: 14px; }
.form .field:last-child{ margin-bottom: 0; }

.form label{
  display:block;
  font-weight: 700;
  margin-bottom: 8px;
  color: rgba(18,51,58,.92);
}

/* Inputs / Textarea / Select */
.form input,
.form textarea,
.form select{
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(18,51,58,.18);
  background: rgba(255,255,255,.78);
  color: var(--text);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  outline: none;
  transition: box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

/* Textarea angenehmer */
.form textarea{
  min-height: 140px;
  resize: vertical;
}

/* Focus */
.form input:focus,
.form textarea:focus,
.form select:focus{
  border-color: rgba(43,107,115,.55);
  box-shadow: 0 0 0 4px rgba(43,107,115,.18), 0 10px 24px rgba(0,0,0,.08);
  background: rgba(255,255,255,.92);
}

/* Placeholder */
.form input::placeholder,
.form textarea::placeholder{
  color: rgba(18,51,58,.45);
}

/* Select: Pfeil optisch sauber */
.form select{
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(18,51,58,.7) 50%),
    linear-gradient(135deg, rgba(18,51,58,.7) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% - 2px),
    calc(100% - 14px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}

/* Checkbox Block edler und besser lesbar */
.checkbox-field{ margin-top: 6px; }

.checkbox-label{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(18,51,58,.10);
  background: rgba(255,255,255,.55);
}

.checkbox-label input[type="checkbox"]{
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--brand);
  box-shadow: none;
}

/* Optional: Button noch „wertiger“ */
.form button.btn-primary{
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  font-weight: 800;
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
}

/* Kleiner Hinweistext unter dem Button, wenn du ihn nutzt */
.form .form-hint{
  text-align:center;
  margin-top: 10px;
  color: rgba(18,51,58,.62);
}

/* ======================================================
   BELEGUNGSKALENDER
====================================================== */
#belegung{
	
  display:none;/* versteckt das Belegungskalender in Content */
	  
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.12)),
    radial-gradient(circle at top left, rgba(200,162,74,.12), transparent 30%);
}

.booking-intro{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:22px;
}

.booking-lead{
  max-width: 72ch;
}

.booking-grid{
  display:grid;
  gap:18px;
}

@media (min-width: 980px){
  .booking-grid{
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .8fr);
    align-items:start;
  }
}

.booking-card,
.booking-detail-card,
.booking-summary-card{
  background: var(--glass-bg-strong);
}

.booking-toolbar{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
}

.booking-month-wrap{
  text-align:center;
}

.booking-kicker{
  margin:0 0 4px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.78rem;
  font-weight:700;
}

.booking-month{
  margin:0;
  font-family:"Saira Condensed","Inter",system-ui,sans-serif;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
}

.booking-nav-btn{
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.78);
  color: var(--text);
  font-size: 1.6rem;
  cursor:pointer;
  transition: transform .18s ease, background .18s ease;
}

.booking-nav-btn:hover{
  background:#fff;
  transform: translateY(-1px);
}

.booking-weekdays,
.booking-calendar{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap:8px;
}

.booking-weekdays{
  margin-bottom:8px;
}

.booking-weekdays span{
  text-align:center;
  font-weight:700;
  color:var(--muted);
  font-size:.95rem;
}

.booking-day{
  min-height:88px;
  border:1px solid rgba(18,51,58,.08);
  border-radius:16px;
  background: rgba(255,255,255,.7);
  padding:10px;
  text-align:left;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position:relative;
}

.booking-day:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
}

.booking-day.is-outside{
  opacity:.45;
}

.booking-day.is-selected{
  border-color: color-mix(in srgb, var(--brand) 55%, #fff 45%);
  box-shadow: inset 0 0 0 2px rgba(43,107,115,.18);
}

.booking-day--frei{
  background: rgba(255,255,255,.72);
}

.booking-day--reserviert{
  background: rgba(230,172,58,.16);
  border-color: rgba(230,172,58,.35);
}

.booking-day--belegt{
  background: rgba(161,23,35,.1);
  border-color: rgba(161,23,35,.28);
}

.booking-day-num{
  display:block;
  font-weight:700;
  font-size:1rem;
}

.booking-day-label{
  display:block;
  margin-top:10px;
  font-size:.78rem;
  line-height:1.2;
  font-weight:700;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

.booking-day-label--reserviert{ color:#8b6512; }
.booking-day-label--belegt{ color:#8a1320; }
.booking-day-label--frei{ color:var(--muted); font-weight:600; }

.booking-legend{
  display:flex;
  flex-wrap:wrap;
  gap:16px 22px;
  margin-top:18px;
  color:var(--text);
}

.booking-legend-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
}

.booking-dot{
  width:14px;
  height:14px;
  border-radius:50%;
  display:inline-block;
}

.booking-dot--frei{ background:#d9ddd8; }
.booking-dot--reserviert{ background:#e6ac3a; }
.booking-dot--belegt{ background:#a11723; }

.booking-side{
  display:grid;
  gap:18px;
}

.booking-detail h3,
.booking-summary-card h3{
  margin-bottom:8px;
}

.booking-status-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:999px;
  padding:6px 12px;
  font-weight:700;
  font-size:.9rem;
  margin:0 0 10px;
}

.booking-status-pill--frei{
  background:#eef1ed;
  color:#51645a;
}
.booking-status-pill--reserviert{
  background:rgba(230,172,58,.18);
  color:#8b6512;
}
.booking-status-pill--belegt{
  background:rgba(161,23,35,.12);
  color:#8a1320;
}

.booking-meta{
  display:grid;
  gap:8px;
  margin-top:12px;
}

.booking-meta-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(18,51,58,.08);
}

.booking-meta-row span:first-child{
  color:var(--muted);
}

.booking-summary-table{
  display:grid;
  gap:8px;
  margin-top:12px;
}

.booking-summary-row{
  display:grid;
  grid-template-columns: minmax(0, 1.4fr) .7fr .7fr;
  gap:10px;
  align-items:center;
  border-radius:12px;
  padding:10px 12px;
  background: rgba(255,255,255,.55);
}

.booking-summary-row--head{
  background: rgba(43,107,115,.08);
  font-weight:700;
}

.booking-source{
  margin-top:12px;
}

.booking-request--mobile{
  display:none;
  margin-top:18px;
}

@media (max-width: 979px){
  .booking-intro{
    align-items:flex-start;
    flex-direction:column;
  }

  .booking-request--desktop{ display:none; }
  .booking-request--mobile{ display:inline-flex; }
}

@media (max-width: 640px){
  .booking-card{ padding:14px; }
  .booking-weekdays,
  .booking-calendar{ gap:6px; }
  .booking-day{
    min-height:74px;
    padding:8px;
    border-radius:14px;
  }
  .booking-day-label{
    margin-top:8px;
    font-size:.68rem;
    line-height:1.15;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }
}
 .gallery-page-intro{
  max-width: 78ch;
  margin-bottom: 28px;
}

.gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:18px;
  align-items:start;
}

.gallery-grid-item{
  position:relative;
  margin:0;
  border-radius:18px;
  overflow:hidden;
  background: rgba(255,255,255,.55);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

.gallery-grid-item img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  aspect-ratio: 4 / 3;
}

.gallery-grid-item .gallery-link{
  position:absolute;
  inset:0;
  z-index:2;
}

.gallery-grid-item .gallery-zoom{
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:5;
  width:40px;
  height:40px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.72);
  color: var(--brand);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events:none;

  opacity:0;
  transform: translateY(6px) scale(.96);
  transition:
    opacity .28s ease,
    transform .32s cubic-bezier(.22,.61,.36,1),
    background-color .28s ease,
    box-shadow .28s ease;
}

.gallery-grid-item .gallery-zoom svg{
  display:block;
  width:18px;
  height:18px;
}

@media (min-width: 769px){
  .gallery-grid-item:hover .gallery-zoom,
  .gallery-grid-item:focus-within .gallery-zoom{
    opacity:1;
    transform: translateY(0) scale(1);
    background: rgba(255,255,255,.82);
    box-shadow: 0 10px 22px rgba(0,0,0,.16);
  }
}

@media (max-width: 768px){
  .gallery-grid-item .gallery-zoom{
    display:none;
  }
}

.gallery-lightbox{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(212, 175, 118, 0.82);
  z-index:9999;
  padding:24px;
}

.gallery-lightbox.is-open{
  display:flex;
}

.gallery-lightbox-overlay{
  position:absolute;
  inset:0;
}

.gallery-lightbox-inner{
  position:relative;
  z-index:2;
  width:min(1200px, 92vw);
  max-height:92vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.gallery-lightbox-figure{
  margin:0;
  background:#000;
  border-radius:18px;
  overflow:hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
  max-width:100%;
  max-height:92vh;
}

.gallery-lightbox-figure img{
  display:block;
  max-width:min(92vw, 1200px);
  max-height:88vh;
  width:auto;
  height:auto;
  margin:0 auto;
}

.gallery-lightbox-figure img.is-portrait{
  max-height:86vh;
  max-width:min(86vw, 900px);
}

.gallery-lightbox-figure figcaption{
  padding:6px 16px;
  font-size:.85rem;
  color:#fff;
  background:#000;
}

.gallery-lightbox-close,
.gallery-lightbox-prev,
.gallery-lightbox-next{
  position:absolute;
  z-index:3;
  border:none;
  cursor:pointer;
  border-radius:999px;
  background: rgba(255,255,255,.94);
  color: var(--text);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

.gallery-lightbox-close{
  top:-18px;
  right:-18px;
  width:48px;
  height:48px;
  font-size:1.5rem;
  line-height:1;
}

.gallery-lightbox-prev,
.gallery-lightbox-next{
  top:50%;
  transform:translateY(-50%);
  width:54px;
  height:54px;
  font-size:2rem;
  line-height:1;
}

.gallery-lightbox-prev{ left:-70px; }
.gallery-lightbox-next{ right:-70px; }

@media (max-width: 1100px){
  .gallery-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .gallery-lightbox-prev{ left:10px; }
  .gallery-lightbox-next{ right:10px; }
}

@media (max-width: 820px){
  .gallery-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .gallery-grid{
    grid-template-columns: 1fr;
    gap:14px;
  }

  .gallery-lightbox{
    padding:12px;
  }

  .gallery-lightbox-inner{
    width:100%;
  }

  .gallery-lightbox-close{
    top:10px;
    right:10px;
    width:42px;
    height:42px;
    font-size:1.25rem;
  }

  .gallery-lightbox-prev,
  .gallery-lightbox-next{
    width:44px;
    height:44px;
    font-size:1.6rem;
  }

  .gallery-lightbox-prev{ left:8px; }
  .gallery-lightbox-next{ right:8px; }

  .gallery-lightbox-figure figcaption{
    padding:10px 12px;
    font-size:.9rem;
  }
}