/* ============================================================
   PITZLLOCH – Hauptstylesheet
   Chiemgau Hochzeits- & Eventlocation
   ============================================================ */

/* Lokale Schriften – nichts von Google/extern */
@font-face { font-family:'Inter'; font-style:normal; font-weight:300; font-display:swap; src:url('/fonts/inter-300.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:300; font-display:swap; src:url('/fonts/cormorant-300.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/cormorant-400.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/cormorant-500.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/cormorant-600.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:300; font-display:swap; src:url('/fonts/cormorant-italic-300.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:400; font-display:swap; src:url('/fonts/cormorant-italic-400.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:500; font-display:swap; src:url('/fonts/cormorant-italic-500.woff2') format('woff2'); }
@font-face { font-family:'Great Vibes'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/greatvibes-400.woff2') format('woff2'); }

/* ====================================================
   PAGE LOADER
   ==================================================== */
#page-loader {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--green-dark, #1A3329);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .8s cubic-bezier(.4,0,.2,1), visibility .8s;
}
#page-loader.fade-out { opacity: 0; visibility: hidden; pointer-events: none; }

.loader-content { text-align: center; }

/* Signet im Ladebildschirm: Berg + P ohne Schriftzug - der Schriftzug
   steht darunter als eigenes Element. */
.loader-mark {
  display: block;
  height: clamp(112px, 18vw, 178px);
  width: auto;
  margin: 0 auto;
  opacity: 0;
  animation: ldrP 1s .1s cubic-bezier(.25,.46,.45,.94) forwards;
}
.loader-ornament {
  color: #C9A96E;
  font-size: .75rem;
  letter-spacing: .5em;
  opacity: 0;
  display: block;
  margin: .6rem 0 .4rem;
  animation: ldrUp .5s .8s ease forwards;
}
.loader-brand {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.5rem, 4vw, 2.6rem);
  font-weight: 300;
  color: #F5F0E8;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: 0;
  display: block;
  animation: ldrUp .6s .95s ease forwards;
}
.loader-sub {
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: rgba(196,163,90,.65);
  opacity: 0;
  display: block;
  margin-top: .4rem;
  animation: ldrUp .6s 1.1s ease forwards;
}
.loader-bar-wrap {
  width: 90px; height: 1px;
  background: rgba(196,163,90,.2);
  margin: 1.6rem auto 0;
  overflow: hidden;
}
.loader-bar {
  display: block; height: 100%;
  background: linear-gradient(90deg, transparent, #C9A96E, transparent);
  width: 0;
  animation: ldrBar 1.4s .3s ease forwards;
}

@keyframes ldrP {
  0%   { opacity: 0; transform: scale(.8) translateY(12px); filter: blur(4px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes ldrUp {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes ldrBar {
  0%   { width: 0; }
  100% { width: 100%; }
}

/* ---- CSS Custom Properties ---- */
:root {
  --cream:         #F5F0E8;
  --cream-dark:    #EDE4D0;
  --cream-darker:  #DDD0B8;
  --green:         #2D4A3E;
  --green-dark:    #1A3329;
  --green-mid:     #3D5A4E;
  --gold:          #C4A35A;
  --gold-light:    #D4B870;
  --gold-pale:     #EAD9A8;
  --charcoal:      #222222;
  --text:          #2A2020;
  --text-light:    #5A5050;
  --white:         #FFFFFF;

  --font-heading:  'Cormorant Garamond', Georgia, serif;
  --font-body:     'Inter', system-ui, sans-serif;

  --sp-xs:   0.5rem;
  --sp-sm:   1rem;
  --sp-md:   2rem;
  --sp-lg:   4rem;
  --sp-xl:   7rem;

  --trans-fast:   0.2s ease;
  --trans-med:    0.4s ease;
  --trans-slow:   0.8s ease;

  --shadow-sm: 0 2px 10px rgba(26,51,41,.07);
  --shadow-md: 0 8px 32px rgba(26,51,41,.12);
  --shadow-lg: 0 20px 60px rgba(26,51,41,.18);

  --r-sm: 3px;
  --r-md: 8px;
  --r-lg: 16px;

  --container: 1160px;
  /* Zusatzversatz fuer das grosse Logo im Hero: strebt 42% der Fensterhoehe
     an - also knapp oberhalb der Mitte - weicht auf niedrigen Fenstern aber
     zurueck, damit der Text darunter nicht in die Hinweisleiste laeuft.
     Logo und Textblock haengen beide daran, der Abstand bleibt konstant. */
  --hero-drop: clamp(0px, min(calc(42vh - 188px), calc((100vh - 700px) * .85)), 300px);
  --header-h:  80px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-body); color: var(--text); background: var(--cream); line-height: 1.7; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select, textarea { font-family: var(--font-body); }

/* ---- Typography ---- */
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); font-weight: 400; color: var(--green-dark); line-height: 1.18; letter-spacing: .01em; }
h1 { font-size: clamp(2.6rem, 6vw, 5.2rem); font-weight: 300; }
h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
h3 { font-size: clamp(1.5rem, 2.5vw, 2.2rem); }
h4 { font-size: 1.35rem; }
p  { font-size: .97rem; line-height: 1.82; }

.lead {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.7;
  color: var(--text);
}

.section-label {
  display: block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .75rem;
}
.section-label::before { content: '— '; }

/* ---- Layout ---- */
.container       { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-md); }
.container-wide  { max-width: 1400px; margin: 0 auto; padding: 0 var(--sp-md); }
.section         { padding: var(--sp-xl) 0; }
.section-sm      { padding: var(--sp-lg) 0; }
main             { padding-top: var(--header-h); }
.hero-page main  { padding-top: 0; }

/* ---- Ornament Divider ---- */
.ornament { display: flex; align-items: center; gap: var(--sp-sm); margin: var(--sp-md) 0; }
.ornament::before, .ornament::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.ornament span { color: var(--gold); font-size: .9rem; letter-spacing: .4em; white-space: nowrap; }

/* Sehr leises Wasserzeichen in den dunkelgrünen Abschnitten.
   Liegt hinter dem Inhalt, deshalb bekommt der Container z-index. */
/* Leises Signet im Abschluss-Band jeder Seite. Seit die Baender hell
   sind, in der dunklen Logofassung. */
section.cta-band { position: relative; overflow: hidden; }
section.cta-band::after {
  content: '';
  position: absolute; right: -3%; bottom: -22%;
  width: clamp(190px, 26vw, 380px); aspect-ratio: 183 / 192;
  background: url(/images/logo/logo-icon-dunkel.svg) no-repeat center / contain;
  opacity: .06; pointer-events: none; z-index: 0;
}
section.cta-band > .container { position: relative; z-index: 1; }

/* ---- Image Placeholders (Coming Soon) ---- */
.img-ph {
  background: linear-gradient(140deg, var(--green-dark) 0%, var(--green-mid) 60%, #4A6A5A 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .6rem;
}
.img-ph::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(196,163,90,.14) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(196,163,90,.09) 0%, transparent 55%);
}
.img-ph::after {
  content: 'Coming Soon';
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.15rem;
  color: rgba(196,163,90,.65);
  letter-spacing: .18em;
  position: relative;
  z-index: 1;
}
.img-ph-icon {
  position: relative;
  z-index: 1;
  color: rgba(196,163,90,.4);
  font-size: 2rem;
}
.img-ph.hero   { height: 100vh; min-height: 600px; }
.img-ph.tall   { height: 520px; }
.img-ph.med    { height: 400px; }
.img-ph.short  { height: 280px; }
.img-ph.ratio  { aspect-ratio: 4/3; height: auto; }
.img-ph.ratio-sq { aspect-ratio: 1; height: auto; }

/* ---- Header ---- */
#site-header {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 1000;
  transition: background var(--trans-med), box-shadow var(--trans-med);
}
#site-header.transparent { background: transparent; }

/* Der dunkle Verlauf liegt im Hero, nicht im Header: So reicht er weit
   genug herunter, um Menue UND das grosse Logo zu tragen - und das
   goldene Info-Banner bleibt unberuehrt, weil es darueber liegt.
   Ueber die Deckkraft laesst er sich weich ein- und ausblenden;
   ein Verlauf selbst waere nicht animierbar. */
.hero::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 0;
  height: clamp(400px, 72vh, 700px);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to bottom,
    rgba(8,12,10,.72) 0%,
    rgba(8,12,10,.64) 26%,
    rgba(8,12,10,.50) 50%,
    rgba(8,12,10,.28) 74%,
    rgba(8,12,10,0)   100%);
  transition: opacity .6s cubic-bezier(.22,1,.36,1);
}
body:has(#site-header.transparent) .hero::after { opacity: 1; }

/* Startseite ganz oben: das Logo sitzt vergroessert unterhalb der Leiste
   und faehrt beim Scrollen schrumpfend an seinen Platz in der Leiste.
   Nur per transform - so bleibt sein Platzbedarf in der Leiste gleich und
   die Menuepunkte behalten ihre Breite. */
body.hero-page #site-header.transparent .site-logo {
  transform: translateY(calc(148px + var(--hero-drop))) scale(2.6);
}
#site-header.scrolled    { background: var(--cream); box-shadow: var(--shadow-sm); }

/* Header: Logo mittig, Navigation links und rechts daneben. Die drei
   Spalten halten das Logo optisch mittig, auch wenn die beiden
   Menügruppen unterschiedlich breit sind. */
.header-inner {
  /* minmax(0,1fr) statt 1fr: die Spalten duerfen schrumpfen. Mit reinem
     1fr wachsen sie mit dem Inhalt und schieben die rechte Gruppe aus dem
     Fenster - dann fehlt die halbe Leiste. Der Abstand gibt zuerst nach. */
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center; gap: clamp(1.5rem, 3vw, 3.25rem);
  height: 100%; padding: 0 var(--sp-md);
  max-width: 1400px; margin: 0 auto;
}
/* Gruppen an die Aussenraender: das gibt den Symbolen den noetigen Platz.
   Die Abstaende zum Logo fallen dadurch unterschiedlich aus, weil die
   rechte Gruppe den Button enthaelt und breiter ist. */
.nav-left  { justify-self: end;   min-width: 0; }
.nav-right { justify-self: start; min-width: 0; }
.site-logo { justify-self: center; transform-origin: 50% 50%; transition: transform .6s cubic-bezier(.22,1,.36,1); }

/* Logo */
.site-logo { display: flex; flex-direction: column; line-height: 1; text-decoration: none; }
/* Logo im Header: zwei Fassungen, je nach Untergrund wird eine gezeigt.
   Hell nur über dem Hero-Video, sonst die dunkle auf Creme. */
.logo-mark { display: block; height: 56px; width: auto; }
.logo-mark-hell { display: none; }
body.hero-page #site-header.transparent .logo-mark-hell   { display: block; }
body.hero-page #site-header.transparent .logo-mark-dunkel { display: none; }
/* Auf Unterseiten (kein .hero-page) bleibt Logo dunkel, auch wenn transparent-Klasse kurz aktiv ist */

/* Nav */
.nav-main { display: flex; align-items: center; gap: .15rem; }
.nav-link {
  white-space: nowrap;
  font-size: .76rem; font-weight: 400; letter-spacing: .12em;
  text-transform: uppercase; color: var(--charcoal);
  padding: .5rem .7rem;
  position: relative; transition: color var(--trans-fast);
}
/* Symbole in der Navigation. Erben die Textfarbe, machen den
   Hell/Dunkel-Wechsel des Kopfes also automatisch mit. */
/* Symbole gibt es nur noch im Mobilmenue - in der Leiste war der Platz
   zu knapp, die rechte Gruppe lief sonst ueber den Rand. */
/* Symbole nur im Mobilmenue - in der Leiste war der Platz zu knapp. */
.nav-ico {
  flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  opacity: .85;
}
#mobile-menu .nav-ico { width: clamp(16px, calc(3.2 * var(--mm-h)), 28px);
  height: clamp(16px, calc(3.2 * var(--mm-h)), 28px); stroke-width: 1.6; opacity: .85; flex: none; }
#mobile-menu .nav-link { display: flex; align-items: center; gap: .85rem; width: 100%; max-width: 250px; }

.nav-link::after { content: ''; position: absolute; bottom: 2px; left: .7rem; right: .7rem; height: 1px; background: var(--gold); transform: scaleX(0); transition: transform var(--trans-fast); }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link:hover { color: var(--green-dark); }
#site-header.transparent .nav-link       { color: rgba(245,240,232,.88); }
#site-header.transparent .nav-link:hover { color: var(--cream); }
/* Auf Unterseiten immer dunkel, damit sie auf hellem Hintergrund sichtbar sind */
body:not(.hero-page) #site-header .nav-link       { color: var(--charcoal) !important; }
body:not(.hero-page) #site-header .nav-link:hover { color: var(--green-dark) !important; }
body:not(.hero-page) #site-header .hamburger span { background: var(--charcoal) !important; }

.nav-cta {
  font-size: .72rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--green-dark) !important;
  background: var(--gold); padding: .65rem 1.6rem;
  border-radius: 100px; margin-left: .75rem;
  transition: background var(--trans-fast), transform var(--trans-fast), box-shadow var(--trans-fast);
}
.nav-cta::after { display: none !important; }
.nav-cta:hover  { background: var(--gold-light); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(196,163,90,.4); }

/* Hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; cursor: pointer; }
.hamburger span { display: block; width: 24px; height: 1.5px; background: var(--charcoal); transition: all var(--trans-fast); transform-origin: center; }
#site-header.transparent .hamburger span { background: var(--cream); }
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile Menu */
#mobile-menu {
  display: none; position: fixed; inset: 0;
  background: var(--green-dark); z-index: 1001;
  flex-direction: column; align-items: center; justify-content: center;
  /* Logo, zehn Punkte und Knopf muessen ohne Scrollen auf den Schirm -
     auf dem kleinen iPhone genauso wie auf einem grossen Android. Die
     Masse haengen deshalb an der Fensterhoehe statt an festen Pixeln.
     svh = die KLEINSTE Hoehe, also mit ausgefahrener Browserleiste;
     wer das nicht kennt, faellt auf vh zurueck. */
  --mm-h: 1vh;
  gap: clamp(.2rem, calc(1.1 * var(--mm-h)), .95rem);
  opacity: 0; transition: opacity var(--trans-med);
  overflow-y: auto;
  padding: clamp(1rem, calc(3 * var(--mm-h)), 2rem) 2rem
           clamp(1rem, calc(2.6 * var(--mm-h)), 1.75rem);
}
@supports (height: 1svh) { #mobile-menu { --mm-h: 1svh; } }

/* Logo als Kopf des Menues. Schmal genug, dass es dem Schliessen-Knopf
   oben rechts auch auf 360px breiten Geraeten nicht in die Quere kommt. */
.menu-logo { display: block; flex: none; margin-bottom: clamp(.4rem, calc(1.9 * var(--mm-h)), 1.15rem); }
.menu-logo img { display: block; height: clamp(26px, calc(7 * var(--mm-h)), 68px);
  width: auto; max-width: 56vw; }
#mobile-menu.open { opacity: 1; }
/* Eigener Schliessen-Knopf: Der Hamburger liegt im Header und damit
   HINTER dem Menue-Overlay - sein X waere nicht anklickbar. */
.menu-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
  color: var(--cream); opacity: .75;
  border-radius: 50%;
  transition: opacity var(--trans-fast), background var(--trans-fast);
}
.menu-close:hover { opacity: 1; background: rgba(245,240,232,.12); }
.menu-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.menu-close svg {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round;
}
#mobile-menu .nav-link {
  font-family: var(--font-heading); font-weight: 300;
  font-size: clamp(1.15rem, calc(3.9 * var(--mm-h)), 2rem);
  letter-spacing: .04em; text-transform: none; color: var(--cream);
  padding: clamp(.1rem, calc(.95 * var(--mm-h)), .6rem) 0;
  line-height: 1.25;
}
#mobile-menu .nav-link::after { background: var(--gold); left: 0; right: 0; }
#mobile-menu .nav-cta {
  font-family: var(--font-heading); font-weight: 300;
  font-size: clamp(1rem, calc(3.1 * var(--mm-h)), 1.55rem);
  letter-spacing: .04em; text-transform: none;
  margin: clamp(.35rem, calc(1.2 * var(--mm-h)), .6rem) 0 0;
  padding: clamp(.5rem, calc(1.6 * var(--mm-h)), .85rem) 2.1rem;
}

/* Querformat und sehr flache Fenster: hier stossen die Untergrenzen an,
   die Punkte koennen ueber die Fensterhoehe nicht weiter schrumpfen.
   Deshalb bekommt dieser Fall eigene, engere Grenzen - sonst muesste
   man scrollen. */
@media (max-height: 470px) {
  #mobile-menu {
    gap: clamp(.12rem, calc(1 * var(--mm-h)), .5rem);
    padding-top: .85rem; padding-bottom: .85rem;
  }
  #mobile-menu .nav-link {
    font-size: clamp(1.02rem, calc(3.9 * var(--mm-h)), 1.3rem);
    padding: clamp(.04rem, calc(.7 * var(--mm-h)), .28rem) 0;
  }
  #mobile-menu .nav-ico { width: 17px; height: 17px; }
  .menu-logo { margin-bottom: .3rem; }
  .menu-logo img { height: clamp(20px, calc(6 * var(--mm-h)), 32px); }
  #mobile-menu .nav-cta {
    font-size: clamp(.9rem, calc(2.8 * var(--mm-h)), 1.1rem);
    margin-top: .2rem; padding: .38rem 1.8rem;
  }
}

/* ---- Hero (Homepage) ---- */
.hero {
  position: relative; height: 100vh; min-height: 620px;
  display: flex; align-items: flex-start; justify-content: center; overflow: hidden;
}
.hero-bg-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
/* Hintergrundvideo liegt über dem Startbild (gleiche z-Ebene, später im DOM)
   und blendet erst auf, wenn wirklich Bild läuft – sonst sieht man ein Flackern. */
.hero-bg-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  opacity: 0; transition: opacity 1.4s ease;
  pointer-events: none;
}
.hero-bg-video.is-ready { opacity: 1; }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right,
    rgba(15,30,24,.72) 0%,
    rgba(15,30,24,.45) 55%,
    rgba(15,30,24,.15) 100%);
  z-index: 1;
}
/* Textblock mittig, bewusst etwas unter der optischen Mitte -
   dadurch bekommt das Video oben mehr Luft. */
.hero-content {
  position: relative; z-index: 2;
  padding: var(--sp-md);
  max-width: 1020px;
  /* Fester Abstand unter dem grossen Logo. Das Logo sitzt im Header und
     faehrt beim Scrollen in die Leiste - deshalb kann der Textblock nicht
     mittig zentriert werden, sonst schwankt der Abstand mit der Fensterhoehe.
     Die Bannerhoehe muss hier genauso einfliessen wie beim Logo, sonst
     laeuft die Luecke auseinander, sobald das Info-Banner erscheint. */
  margin-top: calc(285px + var(--hero-drop));
  text-align: center;
}
/* Die Ueberschrift traegt jetzt die Positionierung statt nur des Namens -
   deshalb deutlich kleiner gesetzt und auf angenehme Zeilenlaenge begrenzt. */
.hero-title {
  color: var(--cream);
  font-size: clamp(2.1rem, 4.6vw, 3.9rem);
  font-weight: 300;
  line-height: 1.12;
  margin: 0 auto .7rem;
  text-wrap: balance;
  text-shadow: 0 2px 40px rgba(0,0,0,.2);
}

/* Ortsangabe direkt unter der Ueberschrift */
.hero-place {
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin: 0 0 var(--sp-md);
}
.hero-sub {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.9vw, 1.55rem);
  color: rgba(245,240,232,.94);
  margin-bottom: 0;
  line-height: 1.65;
  margin-left: auto; margin-right: auto; max-width: 52rem;
}

/* Dekorativer Buchstabe im Hero */
/* Script-Untertitel in Split-Sektionen */
.split-script {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  color: var(--gold);
  line-height: 1.2;
  margin-bottom: .25rem;
}

/* Zitat-Sektion */
.quote-section { background: var(--cream); }
.quote-mark {
  font-family: var(--font-heading);
  font-size: 9rem;
  line-height: .6;
  color: var(--gold-pale);
  margin-bottom: 1rem;
  display: block;
}
.quote-text {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.4rem, 2.8vw, 2.2rem);
  color: var(--green-dark);
  line-height: 1.5;
  margin-bottom: 1rem;
}
.quote-author {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Hero address line */
.hero-address {
  position: absolute; bottom: 2.5rem; left: clamp(2rem, 6vw, 7rem);
  z-index: 2;
  font-size: .65rem; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(245,240,232,.55);
  display: flex; align-items: center; gap: .85rem;
}
.hero-address-line {
  display: block; width: 2.5rem; height: 1px;
  background: rgba(196,163,90,.6);
  flex-shrink: 0;
}

/* Hero Badge (rund) */
.hero-badge {
  position: absolute; bottom: 2rem; right: 3rem;
  z-index: 2; width: 130px; height: 130px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
}
.hero-badge svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  animation: badgeSpin 20s linear infinite;
  overflow: visible;
  background: transparent;
}
.badge-text {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  fill: rgba(196,163,90,.9);
}
.badge-icon {
  position: relative; z-index: 1;
  color: var(--gold); font-size: 1.4rem;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(196,163,90,.45);
  border-radius: 50%;
  background: transparent;
}

/* Scrollender Marquee-Banner */
.marquee-strip {
  background: var(--green-dark);
  padding: .85rem 0;
  overflow: hidden;
}
.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.marquee-set {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding-right: 1.4rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.marquee-set span {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(245,240,232,.75);
  flex-shrink: 0;
}
.marquee-sep {
  color: var(--gold) !important;
  font-size: .6rem !important;
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes badgeSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes scrollPulse { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(7px)} }

/* ---- Page Hero (Inner Pages) ---- */
.page-hero {
  position: relative; min-height: 58vh;
  display: flex; align-items: flex-end; overflow: hidden;
  padding-bottom: var(--sp-lg);
}
.page-hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(140deg, var(--green-dark) 0%, var(--green-mid) 100%);
}
.page-hero-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .45;
}
.page-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26,51,41,.85) 0%, rgba(26,51,41,.15) 100%);
}
.page-hero-content {
  position: relative; z-index: 2;
  max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-md); width: 100%;
}
.page-hero-content h1   { color: var(--cream); margin: .4rem 0 1rem; }
.page-hero-content .lead { color: rgba(245,240,232,.78); max-width: 560px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .76rem; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; padding: .95rem 2.4rem;
  border-radius: 100px; border: none; cursor: pointer;
  transition: all var(--trans-fast); text-decoration: none;
}
.btn-gold {
  background: linear-gradient(110deg, var(--gold) 0%, var(--gold-light) 40%, #E8CB80 55%, var(--gold-light) 70%, var(--gold) 100%);
  background-size: 250% 100%;
  color: var(--green-dark);
  animation: goldShimmer 3s ease-in-out infinite;
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(196,163,90,.4); animation: none; background: var(--gold-light); }
@keyframes goldShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.btn-outline-light { background: transparent; color: var(--cream); border: 1px solid rgba(245,240,232,.45); }
.btn-outline-light:hover { border-color: var(--cream); background: rgba(245,240,232,.1); transform: translateY(-2px); }
.btn-outline-dark  { background: transparent; color: var(--green-dark); border: 1px solid var(--green-dark); }
.btn-outline-dark:hover  { background: var(--green-dark); color: var(--cream); transform: translateY(-2px); }
.btn-dark    { background: var(--green-dark); color: var(--cream); }
.btn-dark:hover   { background: var(--green); transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Signet auf der Kontaktseite: sitzt rechts neben den Kontaktdaten und
   fuellt den Platz, den das entfernte Formular hinterlassen hat. */
/* Signet an den rechten Rand - und darueber hinaus: der negative
   Aussenabstand zieht es aus dem Container Richtung Seitenrand, in den
   Platz, den das entfernte Formular frei gemacht hat. Der Abschnitt
   clippt, damit dabei nichts scrollbar wird. */
.kontakt-signet {
  display: flex; justify-content: flex-end;
  /* Nur so weit nach rechts, wie neben dem Container tatsaechlich Platz
     ist - sonst ragt das Signet auf mittleren Breiten aus dem Fenster. */
  margin-right: calc(-1 * clamp(0px, (100vw - var(--container)) / 2 - 1.75rem, 220px));
}
#kontakt-formular { overflow-x: clip; }
.kontakt-logo { display: block; width: auto; height: clamp(230px, 32vw, 420px); opacity: .92; }
@media (max-width: 900px) {
  .kontakt-signet { margin-top: var(--sp-md); justify-content: center; }
  .kontakt-logo   { height: 190px; }
}

/* Liniensymbole statt Emoji. width:1em bedeutet: die vorhandene
   font-size der Umgebung steuert weiterhin die Groesse, und
   currentColor uebernimmt die Textfarbe - dadurch fuegen sie sich
   ueberall ein, ohne dass Positionen angepasst werden muessen. */
.ico {
  width: 1em; height: 1em;
  display: inline-block;
  vertical-align: -.125em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Cards ---- */
.card {
  background: var(--white); border-radius: var(--r-md); overflow: hidden;
  border: 1.5px solid rgba(196,163,90,.35);
  box-shadow: 0 4px 20px rgba(0,0,0,.10); transition: box-shadow var(--trans-med), transform var(--trans-med);
}
.card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.15); border-color: rgba(196,163,90,.65); transform: translateY(-5px); }
.card-image { display: block; width: 100%; height: 280px; object-fit: cover; }
.card-body  { padding: var(--sp-md); }
.card-label { font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: .6rem; display: block; }
.card-title { font-family: var(--font-heading); font-size: 1.6rem; color: var(--green-dark); margin-bottom: .6rem; }

/* ---- Grids ---- */
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-md); }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-md); }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-md); }

/* ---- Section Intro ---- */
.section-intro { text-align: center; max-width: 680px; margin: 0 auto var(--sp-lg); }
.section-intro h2 { margin-bottom: var(--sp-sm); }

/* Signets rund um die Textblöcke: unterschiedlich groß, geneigt und
   verschieden stark gedeckt, damit es beiläufig wirkt statt gerastert.
   mark-3 und mark-6 liegen bewusst hinter dem Text - deshalb z-index. */
/* Die größeren Signets ragen bewusst über den Container hinaus.
   clip statt hidden: nichts wird scrollbar, und position:sticky
   in anderen Bereichen bleibt unberührt. */
section:has(.section-intro[class*="mark-"]) { overflow-x: clip; }
.section-intro[class*="mark-"] { position: relative; z-index: 0; }
.section-intro[class*="mark-"]::before {
  content: '';
  position: absolute;
  aspect-ratio: 183 / 192;
  background: url(/images/logo/logo-icon-dunkel.svg) no-repeat center / contain;
  pointer-events: none;
  z-index: -1;
}
/* gerade, gross, duerfen ueber die Containerkanten hinauslaufen */
.section-intro.mark-1::before { right: calc(100% - 130px); top: 50%; transform: translateY(-50%); width: 620px; opacity: .07; }
.section-intro.mark-2::before { left:  calc(100% - 150px); top: 50%; transform: translateY(-50%); width: 700px; opacity: .06; }
.section-intro.mark-3::before { left: 50%;                 top: 50%; transform: translate(-50%,-50%); width: 900px; opacity: .045; }
.section-intro.mark-4::before { right: calc(100% - 90px);  top: 42%; transform: translateY(-50%); width: 520px; opacity: .08; }
.section-intro.mark-5::before { left:  calc(100% - 100px); top: 58%; transform: translateY(-50%); width: 780px; opacity: .055; }
.section-intro.mark-6::before { left:  38%;                top: 50%; transform: translateY(-50%); width: 840px; opacity: .05; }
.section-intro.mark-7::before { right: calc(100% - 180px); top: 46%; transform: translateY(-50%); width: 700px; opacity: .06; }
.section-intro.mark-8::before { left:  calc(100% - 60px);  top: 54%; transform: translateY(-50%); width: 600px; opacity: .075; }

/* Schmale Fenster: die seitlich anlaufenden wuerden nur noch als Rand
   erscheinen - dort bleiben die mittig liegenden. */
@media (max-width: 1100px) {
  .section-intro.mark-1::before, .section-intro.mark-2::before,
  .section-intro.mark-4::before, .section-intro.mark-5::before,
  .section-intro.mark-7::before, .section-intro.mark-8::before { display: none; }
  .section-intro.mark-3::before { width: 560px; }
  .section-intro.mark-6::before { left: 50%; transform: translate(-50%,-50%); width: 520px; }
}

/* ---- Split Layout ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; }
.split.rev { direction: rtl; }
.split.rev > * { direction: ltr; }
.split-content { display: flex; flex-direction: column; justify-content: center; padding: var(--sp-xl) var(--sp-lg); }
.split-img { position: relative; overflow: hidden; min-height: 420px; }
.split-img img, .split-img .img-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-img .img-ph { min-height: unset; height: 100%; }

/* ---- Stats ---- */
.stats-row { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-md); text-align: center; }
.stat { padding: var(--sp-md) var(--sp-sm); }
.stat-num { font-family: var(--font-heading); font-size: clamp(2.5rem,4vw,4rem); font-weight: 300; color: var(--gold); line-height: 1; margin-bottom: .4rem; }
.stat-lbl { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-light); }

/* ---- Feature List ---- */
.feature-list { display: flex; flex-direction: column; gap: 1.1rem; }
.feature-item { display: flex; align-items: flex-start; gap: .85rem; }
.feature-dot  { width: 22px; height: 22px; min-width: 22px; border: 1px solid var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: .75rem; margin-top: 3px; }

/* ---- Reviews ---- */
.review-card { background: var(--white); padding: var(--sp-md); border-radius: var(--r-md); box-shadow: var(--shadow-sm); position: relative; }
.review-card::before { content: '\201C'; font-family: var(--font-heading); font-size: 5rem; color: var(--gold-pale); position: absolute; top: -.5rem; left: 1.25rem; line-height: 1; pointer-events: none; }
.review-stars { color: var(--gold); font-size: .95rem; letter-spacing: .08em; margin-bottom: .6rem; }
.review-text  { font-family: var(--font-heading); font-style: italic; font-size: 1.05rem; line-height: 1.72; color: var(--text); margin-bottom: .85rem; position: relative; }
.review-author { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--green-dark); }
.review-date   { font-size: .7rem; color: var(--text-light); margin-top: .2rem; }

/* ---- Aggregate Rating ---- */
/* Heller Kasten mit Goldrahmen statt gruen - gruen bleibt dem Footer
   vorbehalten. Die Betonung traegt jetzt der Rahmen statt der Flaeche. */
.rating-hero {
  text-align: center; background: var(--white);
  color: var(--charcoal); padding: var(--sp-lg) var(--sp-md);
  border: 1.5px solid rgba(196,163,90,.45);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.rating-big { font-family: var(--font-heading); font-size: 6rem; font-weight: 300; color: var(--gold); line-height: 1; }
.rating-stars-big { font-size: 2rem; color: var(--gold); letter-spacing: .2em; margin: .5rem 0; }
.rating-count { font-size: .85rem; color: var(--text-light); letter-spacing: .1em; }

/* ---- FAQ Accordion ---- */
.accordion { border-top: 1px solid var(--cream-dark); }
.accordion-item { border-bottom: 1px solid var(--cream-dark); }
.accordion-trigger {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 1.4rem 0; cursor: pointer; background: none; border: none; text-align: left;
  font-family: var(--font-heading); font-size: 1.18rem; color: var(--green-dark);
  gap: 1rem; transition: color var(--trans-fast);
}
.accordion-trigger:hover { color: var(--gold); }
.accordion-icon { width: 20px; height: 20px; min-width: 20px; border: 1px solid var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: .85rem; transition: transform var(--trans-fast); }
.accordion-item.open .accordion-icon { transform: rotate(45deg); }
.accordion-body { max-height: 0; overflow: hidden; transition: max-height .45s ease; }
.accordion-body-inner { padding: 0 0 1.4rem; color: var(--text); line-height: 1.82; }
.accordion-body-inner a { color: var(--green-dark); text-decoration: underline; }

/* ---- Gallery ---- */
.gallery-filters { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; margin-bottom: var(--sp-lg); }
.gal-btn {
  font-size: .72rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  padding: .55rem 1.4rem; border: 1px solid var(--cream-dark); background: transparent;
  color: var(--text-light); border-radius: var(--r-sm); cursor: pointer;
  transition: all var(--trans-fast);
}
.gal-btn:hover, .gal-btn.active { background: var(--green-dark); border-color: var(--green-dark); color: var(--cream); }

.gallery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .6rem; }
.gal-item { position: relative; cursor: pointer; overflow: hidden; border-radius: var(--r-sm); aspect-ratio: 4/3; }
.gal-item.wide { grid-column: span 2; aspect-ratio: 16/9; }
.gal-item .img-ph, .gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--trans-slow); }
.gal-item:hover .img-ph, .gal-item:hover img { transform: scale(1.06); }
.gal-overlay { position: absolute; inset: 0; background: rgba(26,51,41,0); display: flex; align-items: center; justify-content: center; transition: background var(--trans-med); }
.gal-item:hover .gal-overlay { background: rgba(26,51,41,.38); }
.gal-zoom { color: var(--cream); font-size: 1.4rem; opacity: 0; transform: scale(.8); transition: all var(--trans-fast); }
.gal-item:hover .gal-zoom { opacity: 1; transform: scale(1); }

/* ---- Lightbox ---- */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.94); z-index: 9999; display: none; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox-img { max-width: 90vw; max-height: 88vh; object-fit: contain; border-radius: var(--r-sm); }
.lb-close, .lb-prev, .lb-next {
  position: fixed; color: var(--cream);
  background: rgba(255,255,255,.1); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background var(--trans-fast);
  border: none;
}
.lb-close { top: 1.5rem; right: 1.5rem; width: 46px; height: 46px; font-size: 1.2rem; }
.lb-prev  { left: 1.5rem; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 1.6rem; }
.lb-next  { right: 1.5rem; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 1.6rem; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,.2); }

/* ---- Forms ---- */
.form-grid   { display: grid; gap: 1.1rem; }
.form-grid-2 { grid-template-columns: repeat(2,1fr); }
.form-group  { display: flex; flex-direction: column; gap: .4rem; }
.form-group.span2 { grid-column: 1/-1; }

label { font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-light); }
input, select, textarea {
  font-size: .94rem; color: var(--charcoal); background: var(--white);
  border: 1px solid var(--cream-dark); border-radius: var(--r-sm);
  padding: .85rem 1.15rem; width: 100%; transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
  appearance: none;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(196,163,90,.14); }
textarea { resize: vertical; min-height: 115px; }

.checkbox-row { display: flex; align-items: flex-start; gap: .7rem; cursor: pointer; }
.checkbox-row input[type=checkbox] { width: 17px; height: 17px; min-width: 17px; margin-top: 3px; appearance: auto; cursor: pointer; }
.checkbox-row span { font-size: .84rem; color: var(--text-light); line-height: 1.5; }
.checkbox-row a { color: var(--green-dark); text-decoration: underline; }

.form-success { text-align: center; padding: 2.5rem; background: var(--cream-dark); border-radius: var(--r-md); margin-top: 1rem; }
.form-success .check { font-size: 2.5rem; color: var(--gold); margin-bottom: .5rem; }
.form-success h3 { margin-bottom: .4rem; }
.form-success p { color: var(--text-light); }

/* ---- Map ---- */
.map-wrap { width: 100%; height: 440px; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-md); }
.map-wrap iframe { width: 100%; height: 100%; border: none; }

/* Zwei-Klick-Loesung: Google Maps laedt erst nach Zustimmung.
   Die Einwilligungsflaeche liegt im selben Rahmen wie die spaetere
   Karte, damit sich beim Laden nichts verschiebt. */
.map-wrap { position: relative; }
.map-consent {
  position: absolute; inset: 0;
  background: var(--cream-dark);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; gap: 1rem; padding: 2.5rem 1.5rem;
}
.map-consent-pin  { font-size: 2.4rem; color: var(--gold); }
.map-consent-name { font-family: var(--font-heading); font-size: 1.4rem; color: var(--green-dark); }
.map-consent-adr  { font-size: .94rem; color: var(--text); }
.map-consent-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.map-consent-note {
  font-size: .72rem; color: #8a8175;
  max-width: 440px; line-height: 1.6;
}
.map-consent-note a { color: inherit; text-decoration: underline; }

@media (max-width: 600px) {
  .map-wrap { height: 380px; }
  .map-consent { padding: 1.75rem 1.1rem; gap: .8rem; }
  .map-consent-actions { flex-direction: column; width: 100%; max-width: 260px; }
}

/* ---- Package Cards ---- */
.pkg-card { background: var(--white); border-radius: var(--r-md); padding: var(--sp-md); box-shadow: var(--shadow-sm); position: relative; text-align: center; transition: box-shadow var(--trans-med), transform var(--trans-med); }
.pkg-card:hover { box-shadow: var(--shadow-md); transform: translateY(-5px); }
.pkg-card.featured { border: 2px solid var(--gold); }
.pkg-badge { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); background: var(--gold); color: var(--green-dark); font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; padding: .3rem 1.1rem; border-radius: 0 0 var(--r-sm) var(--r-sm); white-space: nowrap; }
.pkg-name  { font-family: var(--font-heading); font-size: 1.9rem; color: var(--green-dark); margin: .5rem 0 .3rem; }
.pkg-price { font-family: var(--font-heading); font-style: italic; font-size: 1.05rem; color: var(--text-light); margin-bottom: var(--sp-md); }
.pkg-list  { text-align: left; margin-bottom: var(--sp-md); display: flex; flex-direction: column; gap: .7rem; }
.pkg-list li { display: flex; align-items: flex-start; gap: .6rem; font-size: .88rem; }
.pkg-list li::before { content: '✓'; color: var(--gold); font-weight: 700; flex-shrink: 0; margin-top: 1px; }

/* ---- Cookie Banner ---- */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--green-dark); color: var(--cream);
  padding: 1.1rem var(--sp-md); z-index: 9998;
  display: none; align-items: center; justify-content: space-between;
  gap: var(--sp-md); flex-wrap: wrap;
}
.cookie-banner.visible { display: flex; }
.cookie-banner p { font-size: .87rem; color: rgba(245,240,232,.78); line-height: 1.5; max-width: 720px; }
.cookie-banner a { color: var(--gold); text-decoration: underline; }
.cookie-btns { display: flex; gap: .6rem; flex-shrink: 0; }
.cookie-ok  { background: var(--gold); color: var(--green-dark); padding: .58rem 1.4rem; border-radius: var(--r-sm); font-size: .76rem; font-weight: 600; letter-spacing: .1em; cursor: pointer; border: none; }
.cookie-no  { background: transparent; color: rgba(245,240,232,.55); padding: .58rem .9rem; border: 1px solid rgba(245,240,232,.2); border-radius: var(--r-sm); font-size: .76rem; cursor: pointer; }


/* Footer Instagram Link */
.footer-insta {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .82rem; font-weight: 500; letter-spacing: .06em;
  color: rgba(245,240,232,.65);
  transition: color var(--trans-fast);
  text-decoration: none;
}
.footer-insta:hover { color: #e1306c; }
.footer-insta svg { flex-shrink: 0; }

/* ---- Footer ---- */
#site-footer { background: var(--green-dark); padding: var(--sp-xl) 0 var(--sp-md); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-lg); margin-bottom: var(--sp-lg); }
.footer-logo-mark { display: block; width: auto; height: 132px; margin-bottom: var(--sp-md); }
.footer-about { font-size: .88rem; color: rgba(245,240,232,.6); line-height: 1.72; max-width: 260px; }
.footer-col h4 { font-family: var(--font-body); font-size: .7rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--cream); margin-bottom: .9rem; }
.footer-links { display: flex; flex-direction: column; gap: .45rem; }
.footer-links a { font-size: .88rem; color: rgba(245,240,232,.6); transition: color var(--trans-fast); }
.footer-links a:hover { color: var(--gold); }
.footer-contact-list { display: flex; flex-direction: column; gap: .75rem; }
.footer-contact-item { display: flex; align-items: flex-start; gap: .65rem; font-size: .87rem; color: rgba(245,240,232,.6); }
.fci-icon { color: var(--gold); font-size: .85rem; margin-top: 3px; flex-shrink: 0; }
.footer-contact-item a { color: rgba(245,240,232,.6); transition: color var(--trans-fast); }
.footer-contact-item a:hover { color: var(--gold); }
.footer-bottom { border-top: 1px solid rgba(245,240,232,.1); padding-top: var(--sp-md); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; }
.footer-copy  { font-size: .78rem; color: rgba(245,240,232,.38); }
.footer-legal { display: flex; gap: var(--sp-sm); }
.footer-legal a { font-size: .78rem; color: rgba(245,240,232,.45); transition: color var(--trans-fast); }
.footer-legal a:hover { color: var(--gold); }

/* ---- BG Variants ---- */
.bg-cream      { background: var(--cream); }
.bg-cream-dark { background: var(--cream-dark); }
.bg-white      { background: var(--white); }

/* ---- Scroll Fade ---- */
.fade { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.fade.in { opacity: 1; transform: none; }
.fade-d1 { transition-delay: .1s; }
.fade-d2 { transition-delay: .2s; }
.fade-d3 { transition-delay: .3s; }
.fade-d4 { transition-delay: .4s; }

/* ================================================================
   ANKÜNDIGUNGS-BANNER
   ================================================================ */
/* Hinweisleiste sitzt am unteren Fensterrand statt unter dem Kopf.
   Dadurch bleibt der Hero unberuehrt und nichts im Layout haengt an
   ihrer Hoehe. Sie faehrt von unten herein. */
#site-banner {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  z-index: 990;
  font-size: .85rem;
  font-family: var(--font-body);
  color: #fff;
  transform: translateY(100%);
  opacity: 0;
  transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .35s ease;
  box-shadow: 0 -4px 24px rgba(0,0,0,.18);
}
#site-banner.visible { transform: translateY(0); opacity: 1; }
#site-banner.typ-info    { background: var(--gold); color: #fff; }
#site-banner.typ-urlaub  { background: #7A5220; color: #fff; }
#site-banner.typ-event   { background: var(--green-dark); color: var(--gold-light); }
#site-banner.typ-warnung { background: #8B3A2A; color: #fff; }
.banner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .2rem 1rem;
  padding: .3rem 3.75rem .3rem 1.25rem;
  max-width: var(--container);
  margin: 0 auto;
  text-align: center;
  flex-wrap: wrap;
}
.banner-text { font-weight: 500; letter-spacing: .01em; line-height: 1.4; }
.banner-link {
  text-decoration: underline;
  opacity: .9;
  white-space: nowrap;
  font-weight: 600;
  /* Tippziel auf Fingergroesse, ohne die Leiste hoeher zu machen */
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 .35rem;
  transition: opacity var(--trans-fast);
}
.banner-link:hover { opacity: 1; }
.banner-close {
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  color: inherit;
  opacity: .7;
  font-size: 1rem;
  /* Volles Fingermass, auch wenn die Leiste schmal ist */
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: opacity var(--trans-fast), background var(--trans-fast);
}
.banner-close:hover { opacity: 1; background: rgba(255,255,255,.15); }
@media (max-width: 600px) {
  .banner-inner { padding: .55rem 2.5rem .55rem 1rem; text-align: left; }
}

/* ================================================================
   VERFÜGBARKEITS-KALENDER
   ================================================================ */
.kal-wrapper {
  margin-top: var(--sp-md);
}
.kal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 1rem;
}
.kal-nav-btn {
  background: var(--green-dark);
  color: var(--cream);
  border: none;
  padding: .55rem 1.4rem;
  border-radius: 100px;
  cursor: pointer;
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background var(--trans-fast), opacity var(--trans-fast);
  flex-shrink: 0;
}
.kal-nav-btn:disabled { opacity: .3; cursor: default; }
.kal-nav-btn:not(:disabled):hover { background: var(--green); }
.kal-nav-label {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--green-dark);
  letter-spacing: .04em;
  text-align: center;
}
.kal-months {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.25rem;
  align-items: start;
}
.kal-month {
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.kal-month-header {
  background: var(--green-dark);
  color: var(--cream);
  text-align: center;
  padding: .7rem 1rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  letter-spacing: .06em;
}
.kal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: .65rem;
  background: var(--cream-dark);
}
.kal-day-label {
  text-align: center;
  font-size: .63rem;
  font-weight: 600;
  color: var(--text-light);
  letter-spacing: .07em;
  padding: .3rem 0;
  background: var(--cream);
}
.kal-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .74rem;
  border-radius: 3px;
  cursor: default;
  background: var(--cream);
  color: var(--text);
  transition: transform .12s;
}
.kal-cell.empty    { background: transparent; }
.kal-cell.past     { color: #ccc; background: #f8f6f2; }
.kal-cell.frei     { background: #2D6B4F; color: #fff; font-weight: 600; border-radius: 4px; }
.kal-cell.belegt   { background: #8B2E2E; color: #fff; font-weight: 700; border-radius: 4px; }
.kal-cell.event    { background: #B8882A; color: #fff; font-weight: 700; border-radius: 4px; }
.kal-cell.option   { background: rgba(196,163,90,.45); color: #5C3D0A; font-weight: 700; border: 2px dashed #B8882A; border-radius: 4px; }

.kal-legend {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1.5rem;
  font-size: .8rem;
  color: var(--text-light);
}
.kal-legend-item { display: flex; align-items: center; gap: .4rem; }
.kal-legend-dot  { width: 13px; height: 13px; border-radius: 3px; }
.kal-legend-dot.frei   { background: #2D6B4F; }
.kal-legend-dot.belegt { background: #8B2E2E; }
.kal-legend-dot.event  { background: #B8882A; }

@media (max-width: 600px) {
  .kal-months { grid-template-columns: 1fr; }
  .kal-cell { font-size: .68rem; }
  .kal-nav { flex-wrap: wrap; justify-content: center; gap: .75rem; }
  .kal-nav-label { order: -1; width: 100%; }
}

/* ---- Utilities ---- */
.text-center { text-align: center; }
.text-gold   { color: var(--gold); }
.mb-sm { margin-bottom: var(--sp-sm); }
.mb-md { margin-bottom: var(--sp-md); }
.gap-sm { gap: var(--sp-sm); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ---- Availability Chip ---- */
.avail-chip { display: inline-flex; align-items: center; gap: .5rem; background: var(--gold); border: none; border-radius: 100px; padding: .5rem 1.1rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green-dark); text-decoration: none; cursor: pointer; transition: background var(--trans-fast), transform var(--trans-fast), box-shadow var(--trans-fast); box-shadow: 0 2px 12px rgba(196,163,90,.35); }
.avail-chip:hover { background: var(--gold-light); transform: translateY(-1px); box-shadow: 0 4px 18px rgba(196,163,90,.5); }
.avail-dot  { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: blink 2s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.45} }

/* ---- Prose / Legal Pages ---- */
.prose h2 { font-size: 1.6rem; margin: 2rem 0 .75rem; }
.prose h3 { font-size: 1.25rem; margin: 1.6rem 0 .5rem; }
.prose p  { margin-bottom: 1rem; }
.prose ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose ul li { margin-bottom: .4rem; font-size: .95rem; color: var(--text); }
.prose a  { color: var(--green-dark); text-decoration: underline; }

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 1080px) {
  .footer-grid  { grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
  .stats-row    { grid-template-columns: repeat(2,1fr); }
}

/* Die geteilte Navigation mit mittigem Logo braucht rund 1280px:
   zweimal die breitere rechte Gruppe (471px) plus Logo plus Abstaende.
   Darunter lief der Button aus dem Fenster - dort uebernimmt der
   Hamburger, und das Logo rueckt nach links in die Leiste. */
@media (max-width: 1280px) {
  .nav-main  { display: none; }
  .hamburger { display: flex; }
  .header-inner { display: flex; justify-content: space-between; }
  /* Links in der Leiste stehend muss das grosse Logo zusaetzlich in die
     Fenstermitte geschoben werden, sonst laeuft es links hinaus. */
  body.hero-page #site-header.transparent .site-logo {
    transform: translate(calc(50vw - var(--sp-md) - 50%),
                         calc(148px + var(--hero-drop))) scale(2.2);
  }
}

/* Sehr niedrige Fenster (Laptop mit vielen Leisten, Handy quer): Kopf,
   Logo, Text und Hinweisleiste passen zusammen nicht mehr uebereinander.
   Das Logo faellt hier kleiner aus und rueckt hoch. */
@media (max-height: 700px) and (min-width: 901px) {
  body.hero-page #site-header.transparent .site-logo {
    transform: translateY(113px) scale(2.15);
  }
  .hero-content { margin-top: 238px; }
}

@media (max-width: 900px) {
  /* Auf dem Handy soll das Video moeglichst unverdeckt bleiben: der obere
     Verlauf entfaellt ganz, die Abdunklung darunter schrumpft auf einen
     weichen Bereich hinter dem Text. Die Lesbarkeit traegt dafuer der
     kraeftigere Textschatten. */
  .hero::after { display: none; }
  /* Statt einer Scheibe darueber wird mobil das Video selbst abgedunkelt.
     Farben und Kontraste bleiben dabei erhalten - es wirkt wie eine
     Abendaufnahme statt wie ein grauer Schleier. */
  .hero-overlay { display: none; }
  .hero-bg-video, .hero-bg-img { filter: brightness(.48) saturate(1.12); }
  .hero-title, .hero-place, .hero-sub {
    text-shadow: 0 2px 14px rgba(0,0,0,.95), 0 2px 5px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.6);
  }
  body.hero-page #site-header.transparent .site-logo {
    transform: translate(calc(50vw - var(--sp-md) - 50%),
                         calc(152px + var(--hero-drop))) scale(1.45);
  }
  .grid-3    { grid-template-columns: repeat(2,1fr); }
  .grid-4    { grid-template-columns: repeat(2,1fr); }
  .split     { grid-template-columns: 1fr; }
  .split.rev { direction: ltr; }
  .split-content { padding: var(--sp-lg) var(--sp-md); }
  .split-img { min-height: 360px; }
  .gallery-grid { grid-template-columns: repeat(2,1fr); }
  .gal-item.wide { grid-column: span 1; aspect-ratio: 4/3; }
  .form-grid-2  { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  :root { --sp-lg: 3rem; --sp-xl: 4.5rem; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid  { grid-template-columns: 1fr; }
  .stats-row    { grid-template-columns: repeat(2,1fr); }
  .gallery-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .hero-content { padding-left: var(--sp-md); padding-right: var(--sp-md); margin-top: calc(250px + var(--hero-drop)); }
  .hero-address { left: var(--sp-md); }
  .hero-badge   { width: 80px; height: 80px; right: 1rem; }
  .badge-text   { font-size: 9px; }
  .badge-icon   { width: 34px; height: 34px; font-size: 1rem; }
}

/* ============================================================
   PREMIUM MOTION — Parallax · Hero-Auftritt · Micro-Interactions
   ============================================================ */

/* Weiche, einheitliche Kurve */
:root { --ease-lux: cubic-bezier(.22, 1, .36, 1); }

/* Parallax-Bilder: Zoom-Puffer, damit beim Verschieben keine Kante sichtbar wird.
   Den eigentlichen Versatz setzt main.js per transform (inkl. scale). */
.hero-bg-img,
.page-hero-bg img { transform: scale(1.3); will-change: transform; }

/* Hero-Text: gestaffelter Auftritt, sobald der Loader fertig ist.
   Nur bei aktivem JS ausgeblendet -> ohne JS bleibt alles sichtbar. */
.has-js .hero-content > * { opacity: 0; transform: translateY(28px); }
.has-js.loaded .hero-content > * { animation: heroRise 1s var(--ease-lux) forwards; }
.has-js.loaded .hero-content > *:nth-child(1) { animation-delay: .05s; }
.has-js.loaded .hero-content > *:nth-child(2) { animation-delay: .18s; }
.has-js.loaded .hero-content > *:nth-child(3) { animation-delay: .31s; }
.has-js.loaded .hero-content > *:nth-child(4) { animation-delay: .44s; }
.has-js.loaded .hero-content > *:nth-child(5) { animation-delay: .57s; }
@keyframes heroRise { to { opacity: 1; transform: none; } }

/* Feinere Scroll-Reveals (weichere Kurve, etwas länger) */
.fade { transition: opacity 1s var(--ease-lux), transform 1s var(--ease-lux); }

/* Karten: sanfter Lift + langsamer Bild-Zoom beim Hovern */
.card       { transition: transform .55s var(--ease-lux), box-shadow .55s ease, border-color .4s ease; }
.card-image { transition: transform .8s var(--ease-lux); will-change: transform; }
.card:hover .card-image { transform: scale(1.06); }

/* Split-Bilder: dezenter Zoom beim Hovern */
.split-img img { transition: transform 1.1s var(--ease-lux); }
.split-img:hover img { transform: scale(1.05); }

/* ============================================================
   MEHR ANIMATION — Text-Focus-In & Bild-Reveal beim Scrollen
   ============================================================ */

/* Texte: etwas mehr Weg + sanftes „Scharfstellen" beim Einblenden */
.fade { transform: translateY(38px); transition: opacity 1.05s var(--ease-lux), transform 1.05s var(--ease-lux), filter 1.05s var(--ease-lux); filter: blur(4px); }
.fade.in { filter: blur(0); }

/* Bilder gleiten beim Scrollen sanft & scharfgestellt ein.
   (transform bleibt frei für den Hover-Zoom → getrennte Effekte) */
.has-js .card-image,
.has-js .split-img img {
  opacity: 0; filter: blur(10px);
  transition: opacity 1.1s var(--ease-lux), filter 1.2s var(--ease-lux), transform 1.1s var(--ease-lux);
  will-change: opacity, filter, transform;
}
.has-js .card-image.seen,
.has-js .split-img img.seen { opacity: 1; filter: blur(0); }

/* Kleiner Extra-Reveal: Bild-Container schieben ihr Bild leicht hoch */
.split-img { --img-rise: 40px; }
.has-js .split-img img { transform: translateY(var(--img-rise)) scale(1.06); }
.has-js .split-img img.seen { transform: translateY(0) scale(1); }
.split-img:hover img { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  #site-header, .hero::after, .site-logo, #site-banner { transition: none !important; }
  .hero-bg-img, .page-hero-bg img { transform: none !important; }
  .hero-bg-video { display: none; }
  .has-js .hero-content > * { opacity: 1 !important; transform: none !important; animation: none !important; }
  .card:hover .card-image, .split-img:hover img { transform: none !important; }
  .fade { filter: none !important; }
  .has-js .card-image, .has-js .split-img img { opacity: 1 !important; filter: none !important; transform: none !important; }
}

/* ============================================================
   HERO — Lesbarkeit: sanftes Abdunkeln + Textschatten (kein Kasten)
   ============================================================ */
/* Auf mittigen Text abgestimmt: sanfte Abdunklung zur Mitte hin plus
   Baender oben und unten - der Text sass sonst auf der hellsten Bildstelle. */
.hero-overlay {
  background:
    radial-gradient(ellipse 82% 66% at 50% 58%, rgba(11,22,17,.70) 0%, rgba(11,22,17,.44) 48%, rgba(11,22,17,.14) 78%, rgba(11,22,17,0) 100%),
    linear-gradient(to bottom, rgba(11,22,17,.52) 0%, rgba(11,22,17,.10) 32%, rgba(11,22,17,.16) 64%, rgba(11,22,17,.60) 100%);
}
.hero-title,
.hero-place,
.hero-sub {
  text-shadow: 0 2px 22px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.45);
}
/* Dieser Satz sitzt am tiefsten und damit auf dem hellsten Bildbereich -
   er braucht etwas mehr Abhebung als die Zeilen darueber. */
.hero-sub { text-shadow: 0 2px 26px rgba(0,0,0,.75), 0 1px 6px rgba(0,0,0,.6); }