/* Font-Face Declarations */
@font-face {
  font-family: 'Google Sans';
  src: url('fonts/GoogleSans_17pt-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Instrument Serif';
  src: url('fonts/InstrumentSerif-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Script';
  src: url('fonts/script13.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Script15';
  src: url('fonts/script15.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Instrument Serif", serif;
  color: #ffffff;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Website Content Container – volle Breite, Content wird in Sektionen mit max-width 1440px begrenzt */
.website-content {
  position: relative;
  width: 100%;
  overflow: visible;
}

@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  .website-content {
    overflow-x: hidden;
    max-width: 100vw;
  }
  .hero-scroll-zone,
  .pin-spacer {
    overflow-x: hidden;
    max-width: 100vw;
  }
}

/* Pin-Spacer: Scroll durchlassen, damit Seite nicht in Hero „hängen bleibt“ */
.pin-spacer {
  pointer-events: none;
  touch-action: pan-y;
}
.pin-spacer > * {
  pointer-events: auto;
}

/* Hero-Scroll-Zone (wird von ScrollTrigger gepinnt) */
.hero-scroll-zone {
  position: relative;
  z-index: 55;
  width: 100%;
  height: 100vh;
  touch-action: pan-y;
}

/* Video-Wrapper: fixed, wird beim Scroll zu 100% breit × 30vh am unteren Rand (über folgenden Sections) */
.hero-video-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 70;
  will-change: height, top;
  overflow: hidden;
}

/* Overlay über dem Video – Schwarz 30 % */
.hero-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
  pointer-events: none;
}

/* Video Background */
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hero-Inhalt: über dem Video, scrollt beim Scroll nach oben raus */
.hero-content-scroll {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 75;
  will-change: transform;
  pointer-events: auto;
}

/* Text Reveal oben – Instrument Serif mit Stauchen (z-index unter Sections, damit Content darüber scrollt) */
.scroll-reveal-text {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  max-width: 900px;
  z-index: 50;
  padding: 0 2rem;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  color: #242424;
  font-family: "Instrument Serif", serif;
  font-size: 49px;
  line-height: 56px;
  font-weight: 400;
  font-style: normal;
  text-align: center;
}
.scroll-reveal-above p {
  pointer-events: none; /* nur Absatz blockiert, Links sind Kinder und werden per JS aktiv */
  transform: scaleY(0.92);
  transform-origin: center center;
}

.scroll-reveal-above {
  top: 0;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.scroll-reveal-above.reveal-links-active {
  pointer-events: auto;
}

/* Eigenes Element für Verlauf – nur sichtbar wenn Reveal-Text erscheint (opacity per GSAP) */
.scroll-reveal-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 60vh;
  z-index: 49;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    ellipse 150% 100% at 85% 5%,
    #ffffff 0%,
    #f8f6f3 35%,
    #F2EFEB 70%,
    #F2EFEB 100%
  );
}

/* Links immer klickbar (Absatz hat pointer-events: none, daher explizit auto) */
.scroll-reveal-above .scroll-reveal-link {
  pointer-events: auto;
  cursor: pointer;
}

.scroll-reveal-above .scroll-reveal-word:not(.scroll-reveal-link) {
  pointer-events: none;
  user-select: none;
}

.scroll-reveal-word {
  display: inline;
}

/* Verlinkte Wörter: Hochzeiten, Tagungen, Feierlichkeiten – Unterstreichung in Orange (#D83731) */
.scroll-reveal-link {
  color: #242424;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: #D83731;
  text-underline-offset: 0.12em;
  position: relative;
  display: inline;
  transition: color 0.25s ease, opacity 0.25s ease;
  cursor: pointer;
}

.scroll-reveal-link:hover {
  color: #242424;
  opacity: 0.85;
}

/* Tooltip mit Pfeil-Icon – Icon in Textfarbe der Reveal-Section (#242424), kleiner */
.scroll-reveal-link-tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  display: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  background: #F4F2EE;
  border-radius: 4px;
  transform: translate(10px, 10px);
  align-items: center;
  justify-content: center;
  padding: 8px;
  width: 28px;
  height: 28px;
}

.scroll-reveal-link-tooltip svg {
  width: 10px;
  height: 10px;
  display: block;
}

.scroll-reveal-link-tooltip svg path {
  stroke: #242424 !important;
}

.scroll-reveal-link-tooltip.visible {
  display: flex !important;
  opacity: 1;
  visibility: visible;
}

.scroll-reveal-below {
  bottom: 15vh;
}

/* ========== Sticky Section: 2 große Bilder von rechts nach links rein/raus ========== */
/* Alle Sections nach der Text-Reveal-Zone über dem Reveal-Text (z-index 50) */
.website-content > section {
  position: relative;
  z-index: 60;
}

/* Über Präsentationsfläche (fixiertes Bild z-index 20) legen */
.website-content > section.marquee-section {
  z-index: 65;
}

.section-slide-images {
  position: relative;
  width: 100%;
  padding-bottom: 28px;
  background: #242424;
  overflow: hidden;
  z-index: 60;
}

.section-slide-images-track {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  padding: 0 2vw;
}

.slide-image {
  flex-shrink: 0;
  width: 72vw;
  max-width: 1100px;
  height: 90vh;
  will-change: transform;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  overflow: hidden;
}

.slide-image-2 {
  margin-left: 28px;
}

.slide-image-inner {
  width: 100%;
  height: 100%;
  background: #2a2a2a;
  color: rgba(255, 255, 255, 0.4);
  font-family: "Instrument Serif", serif;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  object-fit: cover;
}

.slide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ========== Video Fullscreen – 1:1 wie .wrapper_base ========== */
.section-video-fullscreen {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0px 28px;
  height: 100vh;
  overflow: hidden;
  background: #fff;
  box-sizing: border-box;
}

.video-fullscreen-wrapper {
  position: relative;
  width: 100%;
  max-width: 1440px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 28px;
  box-sizing: border-box;
  border-radius: 4px;
  overflow: hidden;
}

.video-fullscreen-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: center center;
}

.video-fullscreen-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.video-fullscreen-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 2rem;
  overflow: visible;
}

.video-fullscreen-text {
  margin: 0;
  color: #fff;
  font-family: "Instrument Serif", serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 400;
  line-height: 1.1;
  text-align: center;
  max-width: 16ch;
}
.video-fullscreen-text.reveal-chars {
  overflow: hidden;
}
.video-fullscreen-text .hero-char {
  display: inline-block;
}
.video-fullscreen-text .no-break {
  white-space: nowrap;
}
.video-fullscreen-text br {
  display: block;
  content: "";
}

/* ========== Marquee Cards (Vitamin/Health-Style nachgebaut für VillaRue) ========== */
.marquee-section {
  position: relative;
  z-index: 25;
  width: 100%;
  overflow: hidden;
  padding: 128px 0px;
  background: #fff;
}

.marquee-intro {
  text-align: center;
  margin: 0 auto 48px;
  padding: 0 28px;
}

.marquee-intro__title {
  font-family: "Instrument Serif", serif;
  font-size: 88px;
  line-height: 1.05;
  font-weight: 400;
  color: #1a1a1a;
  margin: 0 0 28px;
}
.marquee-intro__title.reveal-chars {
  overflow: hidden;
  padding-bottom: 0.18em;
  margin-bottom: 8px;
  box-sizing: content-box;
}
.marquee-intro__title .hero-char {
  display: inline-block;
  vertical-align: bottom;
}

.marquee-intro__text {
  font-family: "Google Sans", sans-serif;
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  line-height: 1.5;
  color: #333;
  max-width: 56em;
  margin: auto;
}

@media (min-width: 992px) {
  .marquee-intro__title,
  .marquee-intro__title.reveal-chars {
    margin-bottom: 8px;
  }
  .marquee-intro__text {
    margin-bottom: 8px;
  }
}

.marquee {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  overflow: hidden;
}
.marquee_track {
  flex: none;
  display: flex;
  gap: 1em;
  width: max-content;
  animation: marquee-cards 58s linear infinite;
  will-change: transform;
}
.marquee_flex {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-shrink: 0;
  gap: 1em;
}
.marquee_item {
  flex: none;
  width: auto;
}
.box_card {
  width: 32em;
  height: 37.8em;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
/* Vielseitige Nutzung: gleiche Höhe wie Optionale Bewirtung (benefits_box) */
.marquee-section .box_card {
  height: 26rem;
  min-height: 26rem;
}
.box_card .txt_above {
  z-index: 15;
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding: 48px 60px;
  background: #00000047;
  overflow: visible;
}
.box_card .title_card {
  font-family: "Instrument Serif", serif;
  font-size: 3.2em;
  font-weight: 500;
  line-height: 1.15;
  color: #f4f2ee;
  margin: 0;
}
.box_card .bottom_description {
  margin-top: auto;
  margin-right: 0;
  color: #f4f2ee;
  font-family: "Google Sans", sans-serif;
  letter-spacing: 0.02em;
  width: 43ch;
  max-width: 100%;
  font-size: 0.95em;
  line-height: 1.2;
  overflow: visible;
}
.box_card .bottom_desc {
  white-space: normal;
}
.box_card .image_background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.box_card .image_background .overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(0, 0, 0, 0.2);
}
.box_card .image_background .image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@keyframes marquee-cards {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-br-mobile {
  display: none;
}
/* Leerzeichen vor "der" nur auf Desktop (auf Smartphone kein Abstand vor "der Villa") */
.marquee-intro__space-desktop {
  display: none;
}
@media (min-width: 769px) {
  .marquee-intro__space-desktop {
    display: inline;
  }
}
@media (prefers-reduced-motion: reduce) {
  .marquee_track { animation: none; }
}

@media (max-width: 1024px) {
  .marquee-intro__title {
    font-size: 62px;
    line-height: 1.05;
  }
}
@media (max-width: 768px) {
  .marquee-br-mobile {
    display: block;
  }
  .marquee-intro__title {
    font-size: 54px;
    line-height: 1.05;
  }
  .marquee-intro {
    text-align: left;
    margin: 0 auto 24px;
    padding: 0 16px;
  }
  .marquee-intro__text {
    margin-left: 0;
    margin-top: 14px;
    margin-right: auto;
  }
  .box_card .bottom_desc {
    font-size: 15px;
  }
  /* Carousel wie Bewirtung: Karten-Größe und Höhe wie .benefits_box (Smartphone) */
  .marquee-section .box_card {
    width: 85vw;
    max-width: 340px;
    height: 24rem;
    min-height: 24rem;
  }
  .marquee-section .box_card .txt_above {
    padding: 32px 24px;
  }
  .marquee-section .box_card .title_card {
    font-size: 1.75rem;
  }
}
@media (max-width: 480px) {
  .marquee-intro__title {
    font-size: 42px;
    line-height: 1.05;
  }
}

@media (max-width: 991px) {
  .marquee-section { padding: 40px 0 52px; }
  .box_card {
    width: 52em;
    height: 55.8em;
  }
  .box_card .number_main { font-size: 6.5em; }
  .box_card .mg_abb { font-size: 1.5em; }
  .box_card .title_card,
  .box_card .desc_card { font-size: 2em; }
}
@media (max-width: 767px) {
  .marquee-section {
    padding: 60px 0 60px;
  }
  .marquee_track {
    animation: marquee-cards 78s linear infinite;
  }
  .marquee {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .marquee::-webkit-scrollbar {
    display: none;
  }
  .box_card {
    width: 62em;
    height: 64.8em;
  }
  .marquee-section .box_card {
    width: 85vw;
    max-width: 340px;
    height: 24rem;
    min-height: 24rem;
  }
  .marquee-section .box_card .txt_above {
    padding: 32px 24px;
  }
  .marquee-section .box_card .title_card {
    font-size: 1.75rem;
  }
  .box_card .number_main { font-size: 7.5em; }
  .box_card .mg_abb { font-size: 2.15em; }
  .box_card .title_card,
  .box_card .desc_card { font-size: 2.55em; }
}
@media (max-width: 479px) {
  .box_card {
    width: 92em;
    height: 100.8em;
  }
  .marquee-section .box_card {
    width: 85vw;
    max-width: 340px;
    height: 24rem;
    min-height: 24rem;
  }
  .marquee-section .box_card .title_card {
    font-size: 1.75rem;
  }
  .box_card .number_main { font-size: 12em; }
  .box_card .mg_abb,
  .box_card .title_card,
  .box_card .desc_card { font-size: 4em; }
}

/* ========== Home Scroll Section (sticky Bild links, scrollende Texte rechts) ========== */
.home-scroll_section {
  position: relative;
  z-index: 20;
  width: 100%;
  background-color: #f2efe9;
  color: #242424;
  overflow: visible;
}

/* 1:1 wie .general_section .wrapper_base + .ptsd_sides (Flex, gleiche Gap) */
.home-scroll_inner {
  display: flex;
  gap: 28px;
  grid-column-gap: 28px;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding: 28px;
  box-sizing: border-box;
  overflow: visible;
}

.home-scroll_section .page-padding {
  width: 100%;
  padding: 0;
}

.home-scroll_visual {
  flex: 0 0 calc((100% - 28px) / 2);
  width: calc((100% - 28px) / 2);
  min-width: 0;
  position: -webkit-sticky;
  position: sticky;
  top: 28px;
  height: calc(100vh - 56px);
  border-radius: 4px;
  overflow: hidden;
  align-self: flex-start;
}

.home-scroll_img-wrap {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
}

.home-scroll_img-list {
  position: relative;
  width: 100%;
  height: 100%;
}

.home-scroll_img-item {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 300ms ease;
}

.home-scroll_img-item.is-active {
  opacity: 1;
}

.home-scroll_img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  object-fit: cover;
  display: block;
}
@media (max-width: 991px) {
  .home-scroll_img--konferenz {
    object-position: center bottom;
  }
}

/* Rechte Spalte 1:1 wie .general_section .right_side + .wrapper_side */
.home-scroll_content.page-padding {
  flex: 0 0 calc((100% - 28px) / 2);
  width: calc((100% - 28px) / 2);
  min-width: 0;
  background-color: #F2EFEA;
  border-radius: 4px;
  overflow: hidden;
  padding: 30vh 28px 75vh;
  box-sizing: border-box;
}

.home-scroll_text-wrap {
  width: 100%;
}

.home-scroll_text-list {
  display: flex;
  flex-direction: column;
  gap: 6em;
}

.home-scroll_text-item {
  display: flex;
  padding-top: 2em;
  padding-bottom: 2em;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1.25em;
  opacity: 0.2;
  transition: opacity 300ms ease;
}

.home-scroll_text-item.is-active {
  opacity: 1;
}

.home-scroll_photo {
  display: none;
}

.home-scroll_h2 {
  font-family: "Instrument Serif", serif;
  font-size: clamp(2rem, 4vw, 4.25em);
  line-height: 0.9;
  font-weight: 400;
  margin: 0 0 0.25em;
}

.home-scroll_text-item p {
  font-family: "Google Sans", sans-serif;
  font-size: 1em;
  line-height: 1.5;
  margin: 0;
  max-width: 30em;
}

@media (min-width: 992px) {
  .home-scroll_text-item {
    gap: 0.6em;
  }
  .home-scroll_h2 {
    margin-bottom: 0;
  }
}

@media (max-width: 991px) {
  .home-scroll_section {
    min-height: 100vh;
    overflow: visible;
  }
  .home-scroll_inner {
    display: flex;
    flex-direction: column;
    padding: 20px;
    min-height: 100vh;
    overflow: visible;
  }
  /* Bild oben – sticky, bleibt beim Scrollen oben */
  .home-scroll_visual {
    order: -1;
    width: 100%;
    flex: none;
    flex-shrink: 0;
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
    height: 50vh;
    min-height: 280px;
    z-index: 1;
    align-self: flex-start;
    background: #f2efe9;
  }
  .home-scroll_section,
  .home-scroll_inner {
    overflow: visible;
  }
  /* Mobile: Sticky per JS (is-stuck) – fixed + Platzhalter */
  .home-scroll_section.is-stuck .home-scroll_inner {
    padding-top: calc(50vh + 20px);
  }
  .home-scroll_section.is-stuck .home-scroll_visual {
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    width: auto;
    height: 50vh;
    min-height: 280px;
    z-index: 5;
  }
  .home-scroll_visual .home-scroll_img-wrap {
    position: relative;
    z-index: 1;
  }
  .home-scroll_content.page-padding {
    order: 0;
    width: 100%;
    flex: 1;
    min-height: 60vh;
    padding: 0;
  }
  .home-scroll_visual.page-padding {
    display: block;
  }
  .home-scroll_text-wrap {
    margin-right: auto;
    margin-left: auto;
  }
  /* Verlauf oben über dem Bild (optional) */
  .home-scroll_visual::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 60px;
    background: linear-gradient(to bottom, #f2efe9 0%, transparent 100%);
    z-index: 0;
    pointer-events: none;
  }
  .home-scroll_text-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0.2;
    transition: opacity 300ms ease;
  }
  .home-scroll_text-item.is-active {
    opacity: 1;
  }
  .home-scroll_photo {
    display: none;
  }
}

@media (max-width: 768px) {
  .home-scroll_visual {
    height: 50vh;
    min-height: 280px;
    top: 16px;
  }
  .home-scroll_section.is-stuck .home-scroll_inner {
    padding-top: calc(50vh + 16px);
  }
  .home-scroll_section.is-stuck .home-scroll_visual {
    top: 16px;
    left: 16px;
    right: 16px;
  }
  .home-scroll_content.page-padding {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 767px) {
  .home-scroll_h2 {
    font-size: 2.8em;
  }
}

@media (max-width: 479px) {
  .home-scroll_inner {
    padding: 16px;
  }
  .home-scroll_visual {
    top: 16px;
  }
  .home-scroll_section.is-stuck .home-scroll_visual {
    left: 16px;
    right: 16px;
  }
  .home-scroll_content.page-padding {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ========== Benefits Section (Intro + Karten wie Marquee-Boxen) ========== */
.benefits_section {
  position: relative;
  z-index: 20;
  width: 100%;
  padding: 128px 0;
  background: #fff;
  color: #000;
}

.benefits_container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 28px;
  box-sizing: border-box;
}

.benefits-intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
  padding: 0 28px;
}

.benefits-intro__title {
  font-family: "Instrument Serif", serif;
  font-size: 88px;
  line-height: 1.05;
  font-weight: 400;
  color: #1a1a1a;
  margin: 0 0 0.5em;
}
.benefits-intro__title.reveal-chars {
  overflow: hidden;
  padding-bottom: 0.2em;
  box-sizing: content-box;
}
.benefits-intro__title .hero-char {
  display: inline-block;
  vertical-align: bottom;
}
.benefits-intro__title--one-line {
  white-space: nowrap;
}

.benefits-intro__text {
  font-family: "Google Sans", sans-serif;
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  line-height: 1.5;
  color: #333;
  margin: 0;
}

.benefits-intro__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem 3rem;
  margin-top: 2rem;
}

.benefits-intro__logo-link {
  display: block;
  transition: opacity 0.2s ease;
}

.benefits-intro__logo-link:hover {
  opacity: 1;
}

.benefits-intro__logo {
  display: block;
  height: 72px;
  width: auto;
  max-width: 280px;
  object-fit: contain;
  filter: grayscale(100%);
  transition: filter 0.35s ease;
}

.benefits-intro__logo-link:hover .benefits-intro__logo {
  filter: grayscale(0%);
}

@media (min-width: 992px) {
  .benefits-intro__title {
    letter-spacing: -0.02em;
    margin-bottom: 16px;
  }
  .benefits-intro__text {
    margin-bottom: 8px;
  }
}

.benefits_wrap {
  container-type: inline-size;
}

.benefits_layout {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.benefits_card_wrap {
  width: 100%;
  position: relative;
  transition: flex 0.3s ease, width 0.3s ease;
}

/* Karten 1:1 wie Marquee .box_card – gleicher Aufbau (Bild, Overlay, Titel oben, Text unten) */
.benefits_section .benefits_box {
  width: 100%;
  min-height: 24rem;
  height: 100%;
  border-radius: 6px;
}

.benefits_section .benefits_box {
  cursor: default;
  pointer-events: none;
}

.benefits_section .benefits_box .txt_above {
  padding: 32px 40px;
  opacity: 1;
}

/* Karten nur Anzeige, kein Klick – Klick-Hinweis entfallen */
.benefits_click-hint {
  display: none;
}

.benefits_click-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  animation: benefits-dot-press 1.6s ease-in-out infinite;
}

.benefits_click-pulse {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  animation: benefits-pulse-ring 1.6s ease-out infinite;
  pointer-events: none;
}

.benefits_card_wrap.is-open .benefits_click-hint {
  opacity: 0;
  pointer-events: none;
}

@keyframes benefits-dot-press {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1); }
  55% { transform: scale(0.75); }
  65% { transform: scale(1); }
}

@keyframes benefits-pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.8;
    border-color: rgba(255, 255, 255, 0.6);
  }
  55% {
    transform: scale(1);
    opacity: 0.8;
    border-color: rgba(255, 255, 255, 0.6);
  }
  55.1% {
    transform: scale(1);
    opacity: 0.9;
    border-color: rgba(255, 255, 255, 0.9);
  }
  100% {
    transform: scale(3.5);
    opacity: 0;
    border-color: rgba(255, 255, 255, 0.3);
  }
}

.benefits_section .benefits_box .title_card {
  font-size: 2.2em;
}

/* Container query: Karten in Reihe + Klick vergrößert aktive Karte */
@container (width > 55em) {
  .benefits_layout {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 28px;
  }
  .benefits_card_wrap {
    flex: 1 1 0;
    min-width: 0;
    min-height: 26rem;
  }
  .benefits_card_wrap.is-open {
    flex: 2 1 0;
  }
  .benefits_section .benefits_box {
    min-height: 26rem;
  }
}

@media (max-width: 1024px) {
  .benefits-intro__title {
    font-size: 62px;
    line-height: 1.05;
  }
}

/* Desktop: Zeilenumbruch nach "Bewirtung"; Smartphone: Umbruch vor "aus der Spitzenküche" */
.benefits-br-desktop {
  display: none;
}
@media (min-width: 769px) {
  .benefits-br-desktop {
    display: block;
  }
}
.benefits-br-mobile {
  display: inline;
}
@media (max-width: 768px) {
  .benefits-br-mobile {
    display: block;
  }
  .benefits-intro__title--one-line {
    white-space: normal;
  }
  .benefits-intro__title {
    font-size: 54px;
    line-height: 1.05;
    margin: 0 0 10px 0;
  }
  .benefits-intro__title.reveal-chars {
    padding-bottom: 0;
    overflow: visible;
    padding-bottom: 0.15em;
  }
  .benefits-intro__title {
    line-height: 1.12;
  }
  .benefits-intro {
    text-align: left;
    margin: 0 auto 16px;
    padding: 0;
  }
  .benefits-intro__text {
    margin-left: 0;
    margin-right: auto;
  }
  .benefits-intro__logos {
    justify-content: flex-start;
  }
  .benefits-intro {
    padding-bottom: 2rem;
  }
  .benefits_layout {
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .benefits-intro__title {
    font-size: 42px;
    line-height: 1.05;
  }
}

@media (max-width: 991px) {
  .benefits_section { padding: 40px 0 52px; }
  .benefits_container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 767px) {
  .benefits_section { padding: 60px 0 18px; }
  .benefits_container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .benefits_section .benefits_box .title_card {
    font-size: 1.75rem;
  }
}

/* Bewirtung Smartphone: schwarzer Overlay nur on click, Inhalt Titel oben / Beschreibung unten */
@media (max-width: 991px) {
  .benefits_section .benefits_box .image_background .overlay {
    background: transparent;
    transition: background 0.3s ease;
  }
  .benefits_card_wrap.is-open .benefits_box .image_background .overlay {
    background: rgba(0, 0, 0, 0.75);
  }
  .benefits_section .benefits_box .txt_above {
    flex-direction: column;
    justify-content: flex-start;
  }
  .benefits_section .benefits_box .title_card {
    order: 0;
    margin-bottom: 0.75em;
  }
  .benefits_section .benefits_box .bottom_description {
    order: 1;
    margin-top: 0;
  }
}

/* ========== General Section 1:1 wie Beispiel (Frequency Breathwork) ========== */
.general_section {
  --background: #f2efe9;
  --gray: #474747;
  --white: #f1f1f1;
  --black: #242424;
  --biege: #dfd7c9;
  z-index: 25;
  background-color: #242424;
  color: var(--gray);
  position: relative;
  font-family: "Instrument Serif", serif;
  font-size: clamp(14px, 1vw, 16px);
  letter-spacing: -0.03em;
  line-height: 1;
}

.general_section .wrapper_base {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding: 28px 28px 16px;
}

.general_section .ptsd_sides {
  display: flex;
  grid-column-gap: 28px;
  gap: 28px;
}

.general_section .right_side {
  background-color: #F2EFEA;
  border-radius: 4px;
  width: 50%;
  overflow: hidden;
}

.general_section .right_side.biege {
  background-color: #F2EFEA;
}

.general_section .left_side {
  border-radius: 4px;
  width: 50%;
  position: relative;
  overflow: hidden;
}

/* 3 Blöcke: Tag | H1+Text+Button | 3 Punkte – space-between */
.general_section .wrapper_side {
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  height: 100%;
  padding: 28px;
  display: flex;
  gap: 100px;
}

/* Block 1: Tag */
.general_section .tag_box {
  letter-spacing: 0;
  background-color: #fff;
  border-radius: 4px;
  padding: 12px;
  font-size: 0.85em;
  font-weight: 300;
  font-family: "Google Sans", sans-serif;
  width: fit-content;
  flex-shrink: 0;
}

.general_section .tag_box.white {
  background-color: #fff;
}

.general_section .h3 {
  color: var(--black);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3.2em;
  font-weight: 300;
  line-height: 1.1;
  font-family: "Instrument Serif", serif;
}

.general_section .h3.reveal-chars {
  overflow: hidden;
}

.general_section .reveal-chars .hero-char {
  display: inline-block;
}

.general_section .base_txt {
  opacity: 0.85;
  color: #242424;
  letter-spacing: 0;
  font-family: "Instrument Serif", serif;
  font-size: 0.9em;
  font-weight: 400;
  line-height: 1.4;
}

/* Block 2: H1 + Text + Button */
.general_section .box_side {
  grid-row-gap: 12px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
  flex-shrink: 0;
}

.general_section .d_ch {
  width: 100%;
}

/* Traumhochzeit-Intro: Google Sans 16px */
.general_section .box_side .d_ch .base_txt {
  font-family: "Google Sans", sans-serif;
  font-size: 16px;
}

.general_section .button.black {
  display: inline-block;
  letter-spacing: 0;
  border-radius: 8px;
  padding: 18px 52px;
  border: 1px solid var(--black);
  background-color: var(--black);
  color: var(--background);
  font-size: 1.05em;
  font-family: "Instrument Serif", serif;
  font-weight: 300;
  text-decoration: none;
  transition: all 0.45s;
}

.general_section .button.black:hover {
  border: 1px solid var(--black);
  color: var(--black);
  background-color: transparent;
}

/* Wie Hero-Button (Text-Slide-Hover), aber BG-Farbe bleibt – gilt für general_section + faq_section */
.general_section .button.black.btn-slide-hover,
.faq_section .button.black.btn-slide-hover {
  overflow: hidden;
  margin-top: 6px;
  padding: 18px 52px;
  border-radius: 8px;
  border: 1px solid var(--black, #242424);
  background-color: var(--black, #242424);
  color: var(--background, #f2efe9);
  font-size: 1.05em;
  font-family: "Instrument Serif", serif;
  font-weight: 300;
  transition: background-color 0.45s, border-color 0.45s;
}

.general_section .button.black.btn-slide-hover:hover,
.faq_section .button.black.btn-slide-hover:hover {
  background-color: #424242;
  border-color: #424242;
  color: var(--background, #f2efe9);
}

.general_section .button.black.btn-slide-hover span,
.faq_section .button.black.btn-slide-hover span {
  display: inline-block;
  position: relative;
}

/* Block 3: die 3 Punkte unten – gleiche Typo wie Tag (Google Sans 0.85em, #474747) */
.general_section .list_ptsd {
  width: 100%;
  flex-shrink: 0;
}

.general_section .list_ptsd .li {
  justify-content: flex-start;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
}

.general_section .list_ptsd .li:last-child {
  padding-bottom: 0;
}

.general_section .list_ptsd .li:not(:last-child) {
  border-bottom: 1px solid rgba(36, 36, 36, 0.25);
}

.general_section .li_txt {
  color: #474747;
  letter-spacing: 0;
  font-family: "Google Sans", sans-serif;
  font-size: 0.85em;
  font-weight: 300;
}

/* Rechte Spalte: Bild + Location-Karte wie im Beispiel */
.general_section .left_side .image_with_overlay {
  width: 100%;
  height: 100%;
  min-height: 0;
  position: relative;
}

.general_section .left_side .image_with_overlay .image {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  display: block;
}

.general_section .left_side .image_with_overlay .image-bg {
  background-image: url("assets/villa.jpg");
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

/* Pulsierende Punkte auf dem Bild – Ring + Kreis wie Beispiel */
.general_section .image-points {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: auto;
}

.general_section .image-points .image-point {
  pointer-events: auto !important;
  position: absolute;
  width: 56px;
  height: 56px;
  cursor: pointer;
  z-index: 2;
  padding: 0;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
}

.general_section .image-points .image-point.active {
  transform: translate(-50%, -50%) scale(1.1);
}

.ring-container {
  position: relative;
  width: 56px;
  height: 56px;
}

.ring-container .circle {
  width: 22px;
  height: 22px;
  background-color: #D83731;
  border: 1px solid #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ring-container .ringring {
  border: 3px solid #D83731;
  border-radius: 50%;
  height: 38px;
  width: 38px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: pulsate 1s ease-out infinite;
  opacity: 0;
}

@keyframes pulsate {
  0% { transform: translate(-50%, -50%) scale(0.1); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
}

.general_section .image-points .image-point:nth-child(1) {
  top: 83%;
  left: 48%;
}
.general_section .image-points .image-point:nth-child(2) {
  top: 55%;
  left: 48%;
}
.general_section .image-points .image-point:nth-child(3) {
  top: 80%;
  left: 29%;
}
@media (max-width: 991px) {
  .general_section .image-points .image-point:nth-child(1) {
    top: 73%;
    left: 48%;
  }
  .general_section .image-points .image-point:nth-child(2) {
    top: 45%;
    left: 48%;
  }
  .general_section .image-points .image-point:nth-child(3) {
    top: 70%;
    left: 29%;
  }
}

/* Image-Point-Tooltip – 1:1 wie .point-info (Beispiel) */
.image-point-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 1000;
  background: #fff;
  border-radius: 4px;
  padding: 16px 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  min-width: 180px;
  opacity: 0;
  visibility: hidden;
  display: none;
  flex-direction: column;
  gap: 0;
  transform: translate(10px, 10px);
  transition: opacity 0.2s, visibility 0.2s;
  max-width: 280px;
}

.image-point-tooltip.visible {
  display: flex !important;
  opacity: 1;
  visibility: visible;
}

.image-point-tooltip-icon {
  display: none;
}

.image-point-tooltip-content {
  font-size: clamp(14px, 1vw, 16px);
}

.image-point-tooltip-content strong {
  display: block;
  font-family: "Instrument Serif", serif;
  font-size: 1.2em;
  color: #242424;
  margin-bottom: 8px;
}

.image-point-tooltip-content p {
  margin: 0;
  font-family: "Google Sans", sans-serif;
  font-size: 0.85em;
  font-weight: 300;
  color: #474747;
  letter-spacing: 0;
  line-height: 1.4;
}

.image-point-tooltip-content p:last-child {
  margin-bottom: 0;
}

/* Ein Infopanel unten am Bild – Text wechselt bei Klick auf Punkt */
.general_section .image-points .image-point-info-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  padding: 24px 28px 28px;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.7) 45%, rgba(0,0,0,0.35) 85%, transparent 100%);
  pointer-events: none;
}

.general_section .image-points .image-point-info-panel-inner {
  max-width: 100%;
}

.general_section .image-points .image-point-info-panel .image-point-info-title {
  display: block;
  font-family: "Instrument Serif", serif;
  font-size: 1.85em;
  color: #fff;
  margin-bottom: 10px;
}

.general_section .image-points .image-point-info-panel .image-point-info-desc {
  margin: 0;
  font-family: "Google Sans", sans-serif;
  font-size: 1.25em;
  font-weight: 300;
  color: rgba(255,255,255,0.98);
  line-height: 1.45;
}

/* Daten-Quellen für JS – versteckt */
.general_section .image-points .image-point-info {
  display: none;
}

.general_section .modal_card.location_overlay {
  z-index: 2;
  flex-flow: column;
  padding: 16px 28px 24px 16px;
  display: flex;
  position: absolute;
  inset: 0;
  justify-content: flex-start;
  align-items: flex-end;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
/* Kein Hover auf ganzem Bild – nur Punkte zeigen Infos */

.general_section .modal_card .white_box {
  pointer-events: auto;
  background-color: var(--white);
  border-radius: 3px;
  width: 50%;
  max-width: 340px;
  overflow: visible;
}

.general_section .title_box {
  grid-column-gap: 8px;
  border-bottom: 1px solid rgba(36, 36, 36, 0.15);
  justify-content: flex-start;
  align-items: center;
  padding: 8px 12px;
  display: flex;
  gap: 8px;
}

.general_section .icon_pin {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23242424' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.general_section .modal_title {
  letter-spacing: 0;
  font-family: "Instrument Serif", serif;
  font-size: 0.85em;
  font-weight: 500;
  color: var(--black);
}

.general_section .wrapper_box {
  padding: 12px;
}

.general_section .b_title {
  letter-spacing: 0;
  margin-bottom: 6px;
  font-family: "Instrument Serif", serif;
  font-size: 0.85em;
  font-weight: 500;
  color: var(--black);
}

.general_section .b_txt {
  letter-spacing: 0;
  font-family: "Instrument Serif", serif;
  font-size: 0.8em;
  font-weight: 400;
  line-height: 1.3;
  color: var(--gray);
}

/* Teil 2: Die Villa entdecken – links sticky, rechts scrollt; bis rechts durch ist, dann unsticken */
.general_section .breathwork_fac {
  margin-top: 132px;
}

.general_section .flex_sides {
  display: flex;
  align-items: stretch;
  gap: 28px;
}

.general_section .flex_sides .teacher_side {
  flex: 0 0 50%;
  min-width: 0;
}

.general_section .flex_sides .teacher_list {
  flex: 1 1 50%;
  min-width: 0;
}

.general_section .teacher_heading {
  grid-row-gap: 16px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: sticky;
  top: 12vh;
}

.general_section .h2.teacher_head {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 4em;
  font-weight: 300;
  line-height: 1;
  font-family: "Instrument Serif", serif;
  color: var(--black);
}

.general_section .ch_base.spec_cert .base_txt {
  width: 41ch;
  max-width: 100%;
}

.general_section .button_wrap {
  margin-top: 0;
}

.general_section .caption_whats {
  margin-bottom: 28px;
}

.general_section .caption_medium {
  color: var(--gray);
  letter-spacing: 0;
  font-family: "Instrument Serif", serif;
  font-size: 0.9em;
  font-weight: 500;
}

.general_section .cms_teacher_list {
  grid-row-gap: 16px;
  flex-flow: column;
  display: flex;
}

.general_section .teacher_card {
  border: 1px solid rgba(36, 36, 36, 0.2);
  border-radius: 4px;
}

.general_section .wrapper_teacher {
  width: 100%;
  height: 100%;
  padding: 24px;
}

.general_section .teacher_card .teacher_title {
  font-size: 1.8em;
  font-weight: 300;
  font-family: "Instrument Serif", serif;
  color: var(--black);
  margin-bottom: 10px;
}

.general_section .desc_teacher {
  opacity: 0.85;
  letter-spacing: 0;
  width: 48ch;
  max-width: 100%;
  margin-top: 10px;
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  line-height: 1.4;
  color: var(--gray);
}

@media (max-width: 991px) {
  .general_section .ptsd_sides {
    height: auto;
  }
  .general_section .modal_card .white_box {
    width: 70%;
  }
}

@media (max-width: 767px) {
  .general_section .ptsd_sides {
    flex-flow: column;
    height: auto;
    gap: 16px;
  }
  .general_section .right_side,
  .general_section .left_side {
    width: 100%;
  }
  .general_section .left_side {
    order: -1;
  }
  .general_section .modal_card {
    justify-content: flex-end;
    align-items: flex-start;
  }
  .general_section .modal_card .white_box {
    width: 100%;
  }
  .general_section .wrapper_side {
    padding: 20px 16px;
    gap: 0;
  }
  .general_section .box_side {
    width: 100%;
    margin-top: 2em;
  }
  .general_section .flex_sides {
    flex-flow: column;
  }
  .general_section .teacher_heading {
    position: static;
  }
  .general_section .h2.teacher_head {
    font-size: 3em;
  }
}

/* Villa-Intro: BR nach "Ihre" nur auf Smartphone */
.title-br-mobile {
  display: none;
}
@media (max-width: 768px) {
  #section-villa-intro .h3.reveal-chars {
    max-width: 20ch;
  }
  #section-villa-intro .title-br-mobile {
    display: block;
  }
  .general_section .wrapper_side {
    gap: 0;
  }
  #section-villa-intro .wrapper_side {
    padding-top: 16px;
    padding-bottom: 12px;
    padding-left: 16px;
    padding-right: 16px;
  }
  #section-villa-intro .box_side {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  #section-villa-intro .left_side .image_with_overlay {
    min-height: 0;
    height: 70vh;
  }
  #section-villa-intro .left_side .image_with_overlay .image,
  #section-villa-intro .left_side .image_with_overlay .image-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  #section-villa-intro .image-points .image-point:nth-child(3) {
    left: 24%;
  }
  .general_section .button.black.btn-slide-hover,
  .faq_section .button.black.btn-slide-hover {
    margin-bottom: 20px;
  }
  .general_section .list_ptsd .li:last-child {
    padding-bottom: 4px;
  }
  .general_section .wrapper_base {
    padding-top: 16px;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Header mit 3 Spalten Layout */
.header {
  display: flex;
  padding: 28px 86px 0;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  position: relative;
  z-index: 100;
  opacity: 0;
  animation: fadeInDown 0.8s ease forwards 1.5s;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  pointer-events: auto;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Linke Navigation */
.nav-left {
  display: flex;
  align-items: center;
  gap: 48px;
  flex: 1 0 0;
}

/* Logo in der Mitte */
.logo {
  display: inline-flex;
  padding: 0;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: transparent;
  opacity: 1;
  animation: fadeIn 1s ease forwards 1.6s;
  transition: opacity 0.3s ease;
  position: relative;
  width: fit-content;
  height: fit-content;
  text-decoration: none;
  cursor: pointer;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.logo-img {
  height: 52px;
  width: auto;
  position: relative;
  transition: opacity 0.3s ease;
}

.logo-default {
  opacity: 1;
  position: relative;
}

.logo-hover {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}

/* Logo Hover Effekt – wie Caterer-Logos: leichte Transparenz */
.logo:hover {
  background: transparent;
  opacity: 0.75;
}

.logo:hover .logo-default {
  opacity: 0;
}

.logo:hover .logo-hover {
  opacity: 1;
}

/* Rechte Navigation */
.nav-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 48px;
  flex: 1 0 0;
}

/* Hamburger: nur auf Smartphone sichtbar (in @media max-width 768px) */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hamburger-line {
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 0;
  transition: transform 0.25s ease, opacity 0.25s ease, background 0.25s ease;
}
/* Hellere Bereiche: Hamburger schwarz */
body.hamburger-on-light .hamburger--sticky .hamburger-line {
  background: #242424;
}
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.nav-drawer {
  display: none;
  position: fixed;
  top: 90px;
  right: 28px;
  width: 280px;
  max-width: calc(100vw - 56px);
  min-height: auto;
  max-height: calc(100vh - 120px);
  background: #fff;
  z-index: 10001;
  padding: 24px 20px 28px;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  transform: translateX(calc(100% + 40px)) scale(0.96);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.25s ease;
  overflow-y: auto;
}
.nav-drawer.is-open {
  transform: translateX(0) scale(1);
  opacity: 1;
}
.nav-overlay.is-open {
  opacity: 1;
}
.nav-drawer-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: #242424;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}
.nav-drawer-close:hover {
  opacity: 1;
}
.nav-drawer-links {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 8px;
  margin-left: -20px;
  margin-right: -20px;
}
.nav-drawer-link {
  color: #242424;
  text-decoration: none;
  font-size: 18px;
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.12);
  transition: background 0.2s ease;
}
.nav-drawer-link:first-child {
  border-top: none;
}
.nav-drawer-link:last-child {
  border-bottom: none;
}
.nav-drawer-link:hover {
  background: rgba(0,0,0,0.06);
}

/* Navigation Links Styling */
.nav-link {
  color: #FFF;
  text-decoration: none;
  font-family: "Google Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  opacity: 1;
  transition: opacity 0.3s ease;
  position: relative;
}

/* Kein Unterstreichungs-Hover mehr für Nav-Links */

/* Hover-Opacity-Logik: aktiver Link 100%, andere 50% */
.nav-left:hover .nav-link,
.nav-right:hover .nav-link {
  opacity: 0.5;
}

.nav-left .nav-link:hover,
.nav-right .nav-link:hover {
  opacity: 1;
}

/* Hero Section beinhaltet Header + Content (ohne Vignette/Blur – die liegen im Video-Wrapper) */
.hero-section {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100vh;
  z-index: 0;
  min-height: 100vh;
}

/* Hero Content Wrapper */
.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  flex: 1 0 0;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto 0;
  opacity: 0;
  animation: fadeInUp 1s ease forwards 1.7s;
}

/* Chevron unter dem Button – animiert, Hinweis zum Scrollen */
.hero-scroll-chevron {
  display: inline-flex;
  margin-top: 12px;
  margin-bottom: -8px;
  color: #fff;
  opacity: 0.9;
  transition: opacity 0.2s ease, transform 0.2s ease;
  cursor: default;
  pointer-events: none;
}
.hero-scroll-chevron:hover {
  opacity: 1;
  color: #fff;
}
.hero-chevron {
  display: block;
  animation: hero-chevron-bounce 2s ease-in-out infinite;
}
@keyframes hero-chevron-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* H1 Styling (gleicher z-index wie Button für einheitliche Ebene) */
.hero-title {
  position: relative;
  z-index: 1;
  color: #FFF;
  text-align: center;
  font-family: "Instrument Serif", serif;
  font-size: 88px;
  font-style: normal;
  font-weight: 400;
  line-height: 0.95; /* Zeilen sehr nah: wechselndes Wort darüber, Subtitle darunter */
}

.hero-word {
  display: inline-block; /* nötig, damit GSAP nur das Wort verschiebt */
  opacity: 0; /* erst bei startHeroWordAnimation() sichtbar, kein Aufblitzen */
  font-family: "Script15", cursive;
  font-size: 2em;
  line-height: 1;
  margin-bottom: -0.2em;
  /* Verlaufsmaske: oben volle Deckkraft, unten nur leicht ausblendend – mehr vom Wort sichtbar */
  mask-image: linear-gradient(to bottom, black 0%, black 75%, transparent 95%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 75%, transparent 95%);
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
}

/* „in Rüdesheim am Rhein“ 1:1 wie Referenz: weiße Serifenschrift + Rand, damit es sich nicht mit den wechselnden Wörtern vermischt */
.hero-subtitle {
  display: inline-block; /* nötig für die Animation */
  opacity: 0; /* erst bei startHeroWordAnimation() sichtbar */
  margin-top: 0.05em;
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  color: #FFF;
}

.hero-char {
  display: inline-block; /* einzelne Buchstaben separat animierbar */
}

/* Hero-Booking-Link im Hero („Anfrage senden“) – gleicher z-index wie H1, transparent */
.hero-booking-link.button.black.w-inline-block {
  position: relative;
  z-index: 1;
  display: inline-block;
  letter-spacing: 0;
  border-radius: 8px;
  padding: 18px 52px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background-color: transparent;
  color: #fff;
  font-size: 1.05em;
  font-family: "Instrument Serif", serif;
  font-weight: 300;
  text-decoration: none;
  transition: background-color 0.45s, color 0.45s, border-color 0.45s;
  overflow: hidden;
}

.hero-booking-link.button.black.w-inline-block span {
  display: inline-block;
  position: relative;
}

.hero-booking-link.button.black.w-inline-block:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: #fff;
}

/* Experience-Highlight „Explore More“: gleicher Text-Slide-Hover wie Hero-Button */
.experience_highlight_wrap .btn-bubble-arrow__content {
  overflow: hidden;
}
.experience_highlight_wrap .btn-bubble-arrow__content-text {
  display: inline-block;
  position: relative;
}

/* Hero-Button Opacity wird per GSAP mit Scrolltiefe gesteuert (loader.js) */

/* Responsive Design */
@media (max-width: 1024px) {
  .header {
    padding: 28px 40px 0;
  }
  
  .nav-left,
  .nav-right {
    gap: 24px;
  }
  
  .hero-title {
    font-size: 62px;
    line-height: 0.95;
  }
  .hero-word {
    font-size: 1.9em;
  }
  .scroll-reveal-text {
    font-size: 36px;
    line-height: 34px;
  }
}

@media (max-width: 768px) {
  .header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0;
    padding-left: 28px;
    padding-right: 28px;
    padding-top: 28px;
    padding-bottom: 0;
  }
  
  .nav-left,
  .nav-right {
    display: none;
  }
  
  .hamburger--sticky {
    display: flex;
    position: fixed;
    top: 28px;
    right: 28px;
    z-index: 9999;
    pointer-events: auto;
  }
  .header .hamburger:not(.hamburger--sticky) {
    display: none;
  }
  
  .logo {
    order: 0;
    margin-right: auto;
    padding: 0;
  }
  .logo .logo-hover {
    top: 0;
    left: 0;
  }
  .logo-img {
    height: 44px;
  }
  
  .hamburger {
    display: flex;
  }
  
  .nav-overlay,
  .nav-drawer {
    display: block;
  }
  .nav-overlay {
    pointer-events: none;
  }
  .nav-overlay.is-open {
    pointer-events: auto;
  }
  
  .nav-link {
    font-size: 14px;
  }
  
  .hero-title {
    font-size: 54px;
    line-height: 0.95;
  }
  .hero-word {
    font-size: 1.75em;
  }
  .scroll-reveal-text {
    font-size: 31px;
    line-height: 1.25;
    width: 100%;
    max-width: 100vw;
    left: 0;
    right: 0;
    transform: none;
    padding-left: 20px;
    padding-right: 20px;
    overflow-x: hidden;
    text-align: center;
    box-sizing: border-box;
  }
  .scroll-reveal-above {
    justify-content: center;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
    max-width: 100vw;
    overflow-x: hidden;
  }
  .scroll-reveal-above p {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  
  /* Footer anfangs ausblenden, bis Text-Reveal genug Opacity hat (JS setzt visibility) */
  #footer {
    visibility: hidden;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 42px;
    line-height: 0.95;
  }
  .hero-word {
    font-size: 1.6em;
  }
  .scroll-reveal-text {
    font-size: 23px;
    line-height: 1.25;
  }
  
  .logo-img {
    height: 40px;
  }
  
  .nav-left,
  .nav-right {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Content Section unter Hero */
.content-section {
  position: relative;
  background-color: #D83731;
  margin: 30%;
  padding: 80px 40px;
  border-radius: 10px;
  z-index: 10;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-text {
  max-width: 1440px;
  width: 100%;
  color: #FFFFFF;
  font-family: "Instrument Serif", serif;
  font-size: 18px;
  line-height: 1.6;
}

.content-char {
  display: inline-block;
  opacity: 0;
}

/* Weiße Fläche zum Scrollen */
.white-spacer {
  position: relative;
  background-color: #FFFFFF;
  height: 100vh;
  width: 100%;
  z-index: 100;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

/* ========== Section: Zwei Bilder 50/50, Reveal von unten ========== */
.section-images {
  position: relative;
  min-height: 100vh;
  display: flex;
  z-index: 2;
  background: #141414;
  overflow: hidden;
}

.images-wrap {
  display: flex;
  width: 100%;
  min-height: 100vh;
}

.image-half {
  flex: 1 1 50%;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  will-change: transform;
}

.image-half .image-placeholder {
  width: 100%;
  min-height: 100vh;
  background: #2a2a2a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.4);
  font-family: "Instrument Serif", serif;
  font-size: 1.25rem;
}

.image-left { transform: translateY(100%); }
.image-right { transform: translateY(100%); }

/* GSAP überschreibt transform – Startzustand für Fallback */

/* ========== Section: Weiß, überlappt Bilder – links H2/Text/Button, rechts Bild + Punkte ========== */
.section-white {
  position: relative;
  background: #fff;
  min-height: 100vh;
  z-index: 10;
  padding: 80px 40px 100px;
}

.section-white-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.section-white-left {
  padding-right: 40px;
}

.section-white-title {
  font-family: "Instrument Serif", serif;
  font-size: 48px;
  line-height: 1.2;
  color: #000;
  margin: 0 0 24px;
}

.section-white-text {
  font-family: "Instrument Serif", serif;
  font-size: 18px;
  line-height: 1.6;
  color: #333;
  margin: 0 0 32px;
}

.section-white-cta {
  font-family: "Instrument Serif", serif;
  font-size: 16px;
  padding: 14px 28px;
  border-radius: 100px;
  border: none;
  background: #D83731;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.section-white-cta:hover {
  background: #b32d27;
  color: #fff;
}

.section-white-right {
  position: relative;
}

.section-white-image {
  position: relative;
  aspect-ratio: 4/3;
  background: #e8e8e8;
  border-radius: 8px;
  overflow: hidden;
}

.section-white-image .image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-family: "Instrument Serif", serif;
}

/* Punkte auf dem Bild */
.point {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #D83731;
  border: 3px solid #fff;
  cursor: pointer;
  z-index: 2;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: transform 0.2s, background 0.2s;
}

.point:hover,
.point.active {
  transform: scale(1.2);
  background: #b32d27;
}

.point span {
  display: block;
  width: 100%;
  height: 100%;
}

.point-1 { top: 25%; left: 30%; }
.point-2 { top: 55%; left: 55%; }
.point-3 { top: 70%; left: 25%; }

/* Infos beim Klick auf Punkt */
.point-info {
  position: absolute;
  background: #fff;
  border-radius: 8px;
  padding: 16px 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  z-index: 5;
  min-width: 180px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

.point-info.visible {
  opacity: 1;
  visibility: visible;
}

.point-info p {
  margin: 0 0 8px;
  font-family: "Instrument Serif", serif;
  font-size: 14px;
  color: #333;
}

.point-info p:last-child { margin-bottom: 0; }
.point-info strong { color: #000; }

.section-white-right {
  position: relative;
}

.point-info-1 { top: 10%; right: 10%; }
.point-info-2 { bottom: 30%; left: 10%; }
.point-info-3 { bottom: 10%; right: 20%; }

/* ========== Shared layout & utilities for new sections ========== */
.wide-content {
  width: 100%;
  max-width: 1728px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
@media (min-width: 768px) {
  .wide-content { padding-left: 32px; padding-right: 32px; }
}
@media (min-width: 1024px) {
  .wide-content { padding-left: 54px; padding-right: 54px; }
}
@media (min-width: 1280px) {
  .wide-content { padding-left: 64px; padding-right: 64px; }
}

.eyebrow {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.2;
  color: #f4f2ee;
  letter-spacing: -0.01em;
}
.prefix-line {
  display: flex;
  align-items: center;
  gap: 10px;
}
.prefix-line::before {
  content: "";
  display: block;
  width: 72px;
  height: 1px;
  background: #f4f2ee;
}

.btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 10px 25px;
  border-radius: 24px;
  font-family: "Instrument Serif", serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}
@media (max-width: 768px) {
  .btn-arrow { min-height: 40px; padding: 9px 16px; font-size: 14px; }
}
.btn-arrow.dark {
  background: #292930;
  color: #fff;
}
.btn-arrow.dark:hover {
  background: #fff;
  color: #292930;
}
.btn-arrow.light {
  background: #f4f2ee;
  color: #15161a;
}
.btn-arrow.light:hover {
  background: #15161a;
  color: #f4f2ee;
}
.btn-arrow:not(.dark):not(.light) {
  background: #f4f2ee;
  color: #15161a;
}
.btn-arrow:not(.dark):not(.light):hover {
  background: #15161a;
  color: #f4f2ee;
}

/* ========== About / Story Section (Amrit Palace–inspiriert) ========== */
.section-about-story {
  position: relative;
  z-index: 20;
  width: 100%;
  background: #f2efe9;
  color: #242424;
  font-family: "Instrument Serif", serif;
}

/* About Philosophy (III. 4 Karten) */
.about-philosophy {
  width: 100%;
  padding: 8rem 28px 6rem;
  background: #f2efe9;
}
.about-philosophy-head {
  text-align: center;
  margin-bottom: 3rem;
}
.about-philosophy-num {
  font-family: "Instrument Serif", serif;
  font-size: clamp(2rem, 4vw, 4.5rem);
  font-weight: 400;
  margin: 0 0 0.5rem;
  color: #242424;
}
.about-philosophy-title {
  font-family: "Instrument Serif", serif;
  font-size: clamp(2rem, 4vw, 4.5rem);
  font-weight: 400;
  margin: 0;
  color: #242424;
}
.about-philosophy-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: 1400px;
  margin: 0 auto;
}
.about-philo-card {
  background: #f2efe9;
  border: 1px solid rgba(36, 36, 36, 0.2);
  border-radius: 4px;
  padding: 1rem 1rem 1.25rem;
  min-height: 22em;
  display: flex;
  flex-direction: column;
}
.about-philo-num {
  border-bottom: 1px solid rgba(36, 36, 36, 0.2);
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  font-family: "Instrument Serif", serif;
  font-size: 1.25rem;
  font-weight: 300;
  color: #242424;
}
.about-philo-title {
  font-family: "Instrument Serif", serif;
  font-size: clamp(1.25rem, 1.5vw, 1.7rem);
  font-weight: 300;
  margin: 0 0 0.75rem;
  color: #242424;
}
.about-philo-card .base_txt.dark {
  color: #242424;
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0;
  flex: 1;
}

/* About Testimonials (Was unsere Gäste sagen) – Amrit Palace Marquee-Style */
.about-testimonials {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding: 128px 28px 56px;
  background: #f2efe9;
  overflow: hidden;
}
.about-testimonials-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.about-guests-title {
  font-family: "Instrument Serif", serif;
  font-size: clamp(2rem, 4vw, 4.5rem);
  font-weight: 400;
  margin: 0;
  color: #242424;
  line-height: 0.92;
}
.about-guests-title.reveal-chars,
.about-guests-title .reveal-chars {
  overflow: hidden;
  padding-bottom: 0.22em;
  box-sizing: content-box;
  display: inline-block;
}
.about-guests-title .hero-char {
  display: inline-block;
  vertical-align: bottom;
}
.about-review-box {
  background: #f2efe9;
  border: 1px solid rgba(36, 36, 36, 0.2);
  border-radius: 4px;
  padding: 0.75rem 1rem 1rem;
  min-width: 12em;
}
.about-review-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 0.5rem;
}
.about-star {
  width: 18px;
  height: 18px;
  background: #242424;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.about-review-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
}
.about-review-rating {
  font-family: "Instrument Serif", serif;
  font-size: 1.75rem;
  font-weight: 400;
  color: #242424;
}
.about-review-label {
  font-size: 0.9rem;
  color: #242424;
  opacity: 0.8;
}
.about-review-tag {
  font-weight: 600;
  font-size: 0.9rem;
  color: #242424;
  margin-left: 0.25rem;
}
.about-review-count {
  width: 100%;
  font-size: 0.8rem;
  color: #242424;
  opacity: 0.7;
}
/* Marquee mit Verlauf links/rechts */
.about-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: 2rem;
}
.about-marquee::before,
.about-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.about-marquee::before {
  left: 0;
  background: linear-gradient(to right, #f2efe9 0%, transparent 100%);
}
.about-marquee::after {
  right: 0;
  background: linear-gradient(to left, #f2efe9 0%, transparent 100%);
}
.about-marquee-track {
  display: flex;
  gap: 1.2rem;
  width: max-content;
  will-change: transform;
  animation: about-marquee 35s linear infinite;
}
.about-marquee-list {
  display: flex;
  gap: 1.2rem;
  padding: 0.75rem 0;
  flex-shrink: 0;
}
.about-testimonial-card {
  flex: 0 0 28em;
  max-width: 28em;
  min-height: 18em;
  border: 1px solid rgba(36, 36, 36, 0.2);
  border-radius: 4px;
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  background: #f2efe9;
}
.about-testimonial-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(36, 36, 36, 0.15);
}
.about-testimonial-stars {
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: #242424;
}
.about-testimonial-platform {
  font-size: 0.8rem;
  font-weight: 500;
  color: #242424;
  opacity: 0.65;
}
.about-testimonial-text {
  font-family: "Instrument Serif", serif;
  font-size: clamp(1.1rem, 1.4vw, 1.5rem);
  font-weight: 300;
  line-height: 1.25;
  color: #242424;
  margin: 0 0 auto;
  flex: 1;
}
.about-testimonial-author {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.about-testimonial-author-label {
  font-size: 0.85rem;
  color: #242424;
  opacity: 0.65;
}
.about-testimonial-author-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: #242424;
}
@keyframes about-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .about-marquee-track { animation: none; }
}

/* About Story Responsive */
@media (max-width: 991px) {
  .about-philosophy-cards { grid-template-columns: repeat(2, 1fr); }
  .about-philo-card { min-height: 20em; }
  .about-testimonials { padding: 46px 20px 32px; }
  .about-testimonials-head { flex-direction: column; align-items: flex-start; }
  .about-testimonial-card { flex: 0 0 22em; max-width: 22em; min-height: 16em; }
}
@media (max-width: 767px) {
  .about-philosophy { padding: 4rem 16px 4rem; }
  .about-philosophy-cards { grid-template-columns: 1fr; }
  .about-philo-card { min-height: auto; }
  .about-testimonials { padding: 36px 16px 24px; }
  .about-testimonial-card { flex: 0 0 85vw; max-width: 85vw; min-height: 14em; }
  .about-marquee-track { animation-duration: 45s; }
}

/* ========== Accordion Section (Zu Ihrem Anlass) ========== */
.section-accordion {
  width: 100%;
  min-height: 100vh;
  padding: 60px 0;
  background: #15161a;
  color: #f4f2ee;
}
.accordion-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.accordion-intro {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
  flex-wrap: wrap;
  gap: 24px;
}
.accordion-intro h2 {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-size: clamp(40px, 6vw, 96px);
  line-height: 1;
  margin: 0;
}
.accordion-intro h2 span { font-style: italic; font-weight: 300; }
.accordion-list {
  width: 100%;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}
@media (min-width: 940px) {
  .accordion-list { flex-wrap: nowrap; }
}
.accordion-item {
  flex: 1 1 100%;
  min-width: 280px;
  max-width: 400px;
  max-height: 520px;
  position: relative;
  border-radius: 40px;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.53, 0.21, 0, 1);
  cursor: pointer;
}
@media (min-width: 940px) {
  .accordion-item { max-width: 20%; }
  .accordion-item.accordion-item--selected { max-width: 60%; }
}
@media (min-width: 940px) {
  .accordion-item.accordion-item--selected {
    max-width: 60%;
  }
  .accordion-item:not(.accordion-item--selected):hover {
    max-width: 22%;
  }
}
@media (max-width: 939px) {
  .accordion-item.accordion-item--selected { max-width: 100%; }
}
.accordion-item-bg {
  position: absolute;
  inset: 0;
}
.accordion-item-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  transition: left 0.5s ease;
}
.accordion-item-inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 24px 24px 32px;
  text-decoration: none;
  color: #fff;
}
.accordion-item-body h4 {
  font-family: "Instrument Serif", serif;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.1;
  margin: 0 0 10px;
  color: #fff;
}
.accordion-item-body h4 span { font-style: italic; font-weight: 300; }
.accordion-details {
  display: none;
}
.accordion-item.accordion-item--selected .accordion-details {
  display: block;
}
.accordion-details p {
  font-size: 16px;
  line-height: 1.4;
  margin: 0 0 16px;
  color: #fff;
}
.accordion-details ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.accordion-details li {
  padding-left: 30px;
  margin-bottom: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='18' viewBox='0 0 20 18' fill='none'%3E%3Cpath d='M20 0.195312L19.931 0.925671C13.5862 5.44062 10.2069 11.0179 7.79331 15.7984C6.34483 16.728 5.31034 17.9895 4.68966 16.5288C3.93103 14.6033 2.27586 10.9515 0 10.2211C0.965517 9.15881 1.86207 8.89322 2.96552 9.02602C4.41379 9.2252 5.72414 11.8811 6.27586 13.0762C9.24138 8.29566 14.6897 2.85116 20 0.195312Z' fill='white'/%3E%3C/svg%3E") no-repeat 0 0;
  font-size: 16px;
  color: #fff;
}
.accordion-cta {
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.9;
}

/* ========== Footer (V&M-style: contacts, nav grid, copyright, gradient circles) ========== */
.footer_component {
  --footer-bg: #101010;
  --footer-text: #fff;
  --footer-muted: rgba(255, 255, 255, 0.6);
  padding-top: 7.29vw;
  padding-bottom: 1.5625vw;
  background-color: var(--footer-bg);
  color: var(--footer-text);
  position: relative;
  z-index: 25;
  overflow: hidden;
}

.footer_padding-global {
  position: relative;
  z-index: 1;
}

.footer_container-default {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 28px;
  padding-right: 28px;
  box-sizing: border-box;
}

/* Contacts block: image, heading, email, button */
.footer_contacts {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.footer_wrap-img {
  width: 6.771vw;
  height: 6.771vw;
  min-width: 80px;
  min-height: 80px;
  max-width: 130px;
  max-height: 130px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 1.042vw;
  background: var(--footer-text);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}

.footer_img-round {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer_heading {
  font-family: "Instrument Serif", serif;
  font-size: clamp(1.75rem, 4.167vw, 3rem);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}

.footer_heading-block {
  display: inline;
}

.footer_email {
  color: var(--footer-text);
  text-decoration: none;
  font-family: "Instrument Serif", serif;
  font-size: clamp(1.5rem, 4.167vw, 2.5rem);
  line-height: 1.1;
  font-style: italic;
  letter-spacing: -0.02em;
  position: relative;
  display: inline-block;
  margin-top: 0.5rem;
}

.footer_email:hover {
  color: var(--footer-text);
}

.footer_email-line {
  display: block;
  overflow: hidden;
  transform: translateY(-100%);
  height: 0.21vw;
  min-height: 2px;
}

.footer_email-line-inner {
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  transform: translateX(-101%);
  transition: transform 0.4s ease;
}

.footer_email:hover .footer_email-line-inner {
  transform: translateX(0);
}

.footer_contacts-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.82vw;
}

.footer_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.81rem 1.5rem;
  font-size: 0.875rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--footer-bg);
  background-color: var(--footer-text);
  border: 1px solid var(--footer-text);
  border-radius: 52vw;
  text-decoration: none;
  transition: color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease;
}

.footer_button:hover {
  color: var(--footer-text);
  background-color: transparent;
  border-color: var(--footer-text);
}

/* Nav grid: 4 columns */
.footer_nav {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1.56vw;
  margin-top: 5.21vw;
}

.footer_nav-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer_nav-caption {
  font-size: 0.875rem;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 1.04vw;
  color: var(--footer-text);
  letter-spacing: 0.02em;
}

.footer_nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.52vw;
  align-items: flex-start;
}

.footer_link {
  color: var(--footer-text);
  text-decoration: none;
  font-size: 0.875rem;
  line-height: 1.4;
  opacity: 0.6;
  transition: opacity 0.4s ease;
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}

.footer_link:hover {
  opacity: 1;
}

.footer_line-root {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  pointer-events: none;
}

.footer_underline-hover {
  display: block;
  width: 100%;
  height: 0;
  border-bottom: 1px solid var(--footer-text);
  transform: translateX(-101%);
  transition: transform 0.4s ease;
}

.footer_link:hover .footer_underline-hover {
  transform: translateX(0);
}

/* Copyright row */
.footer_copyright {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1.56vw;
  margin-top: 4.17vw;
  padding-top: 0;
  font-size: 0.938vw;
  line-height: 1.15;
  color: var(--footer-muted);
}

.footer_copyright > div {
  font-size: clamp(0.75rem, 0.938vw, 0.9rem);
}

.footer_location {
  display: inline;
}

/* Animated gradient background */
.footer_mask-bg {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  filter: blur(150px);
  pointer-events: none;
}

.footer_circle {
  position: absolute;
  left: var(--fleft, 50%);
  top: var(--ftop, 50%);
  width: var(--fsize, 20vw);
  height: var(--fsize, 20vw);
  border-radius: 50%;
  background: rgba(53, 72, 254, 0.35);
  animation: footer_float var(--fdur, 9s) ease-in-out infinite;
  animation-delay: var(--fdelay, 0s);
  transform: translate(-50%, -50%);
}

@keyframes footer_float {
  0%, 100% { transform: translate(-50%, -50%) translate(0, 0) scale(1); opacity: 0.5; }
  33% { transform: translate(-50%, -50%) translate(3%, -2%) scale(1.05); opacity: 0.6; }
  66% { transform: translate(-50%, -50%) translate(-2%, 2%) scale(0.98); opacity: 0.45; }
}

/* Responsive */
@media (max-width: 991px) {
  .footer_component {
    padding-top: 6.25rem;
    padding-bottom: 1.875rem;
  }

  .footer_padding-global {
    padding-left: 1.875rem;
    padding-right: 1.875rem;
  }

  .footer_container-default {
    max-width: 100%;
  }

  .footer_wrap-img {
    width: 90px;
    height: 90px;
    margin-bottom: 1rem;
  }

  .footer_nav {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 4rem;
  }

  .footer_copyright {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 2.5rem;
  }

  .footer_copyright > div {
    font-size: 0.875rem;
  }
}

@media (max-width: 767px) {
  .footer_padding-global {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .footer_heading-block {
    display: block;
  }

  .footer_nav {
    grid-template-columns: 1fr 1fr;
    margin-top: 3rem;
  }

  .footer_copyright {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    margin-top: 2rem;
  }
}

@media (max-width: 479px) {
  .footer_component {
    padding-bottom: 1rem;
  }

  .footer_nav {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2.5rem;
  }

  .footer_copyright {
    gap: 0.5rem;
    margin-top: 2rem;
  }
}

/* ========== Section Aligned (nach OrthoFX-Vorbild) – nach Footer ========== */
.section-aligned {
  width: 100%;
  min-height: 100svh;
  padding-top: 40px;
  padding-bottom: 40px;
  background: #15161a;
}

.accordion-aligned-content,
.section-aligned {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.accordion-aligned-content {
  position: relative;
}

.accordion-aligned-intro {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 70px;
}

.accordion-aligned-heading {
  color: #d9edf7 !important;
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1.1;
  margin: 0;
}

.accordion-aligned-heading span {
  color: #d9edf7 !important;
  font-style: italic;
  font-weight: 300;
}

.accordion-aligned-list {
  width: 100%;
  display: flex;
  gap: 24px;
}

.accordion-aligned-item {
  display: flex;
  width: 20%;
  min-width: 280px;
  min-height: 400px;
  max-height: 734px;
  height: 70vh;
  position: relative;
  border-radius: 40px;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.53, 0.21, 0, 1);
  cursor: pointer;
}

.accordion-aligned-item .accordion-aligned-details {
  display: none;
}

@keyframes accordion-aligned-fade {
  0%, 50% { opacity: 0; }
  100% { opacity: 1; }
}

.accordion-aligned-item.accordion-aligned-item--selected {
  width: 60% !important;
}

@media (min-width: 941px) {
  .accordion-aligned-item:not(.accordion-aligned-item--selected):hover {
    width: 22%;
  }
}

.accordion-aligned-item.accordion-aligned-item--selected .accordion-aligned-details {
  display: block;
}

.accordion-aligned-item.accordion-aligned-item--selected .accordion-aligned-body {
  animation: accordion-aligned-fade 0.6s cubic-bezier(0.53, 0.21, 0, 1);
}

.accordion-aligned-item.accordion-aligned-item--selected .accordion-aligned-image {
  left: 0 !important;
}

.accordion-aligned-image-wrap {
  overflow: hidden;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.accordion-aligned-image {
  width: 100% !important;
  object-fit: cover;
  height: 100% !important;
  min-height: 734px !important;
  max-height: 70svh !important;
  transition: left 1s ease-in-out;
  opacity: 0.6 !important;
  position: absolute;
  left: 0;
  top: 0;
}

.accordion-aligned-inner {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-left: 40px;
  text-decoration: none;
  color: inherit;
}

.accordion-aligned-body {
  display: flex;
  flex-direction: column;
  max-width: 560px;
  padding-bottom: 40px;
}

.accordion-aligned-body p {
  margin-top: 10px;
  margin-bottom: 16px;
  color: #fff;
  font-family: "Instrument Serif", serif;
  font-size: 16px;
  line-height: 1.4;
}

.accordion-aligned-body h4 {
  color: #fff;
  font-family: "Instrument Serif", serif;
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 400;
  margin: 0;
}

.accordion-aligned-body h4 span {
  font-style: italic;
  font-weight: 300;
}

.accordion-aligned-body ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.accordion-aligned-body ul li {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyMCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwIDAuMTk1MzEyTDE5LjkzMSAwLjkyNTY3MUMxMy41ODYyIDUuNDQwNjIgMTAuMjA2OSAxMS4wMTc5IDcuNzkzMSAxNS43OTg0QzYuMzQ0ODMgMTYuNzI4IDUuMzEwMzQgMTcuOTg5NSA0LjY4OTY2IDE2LjUyODhDMy45MzEwMyAxNC42MDMzIDIuMjc1ODYgMTAuOTUxNSAwIDEwLjIyMTFDMC45NjU1MTcgOS4xNTg4MSAxLjg2MjA3IDguODkzMjIgMi45NjU1MiA5LjAyNjAyQzQuNDEzNzkgOS4yMjUyIDUuNzI0MTQgMTEuODgxMSA2LjI3NTg2IDEzLjA3NjJDOS4yNDEzOCA4LjI5NTY2IDE0LjY4OTcgMi44NTExNiAyMCAwLjE5NTMxMloiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=");
  background-repeat: no-repeat;
  background-position: 0;
  padding-left: 30px;
  color: #fff;
  font-size: 16px;
  line-height: 1.4;
}

.accordion-aligned-cta {
  margin-right: 24px;
  margin-bottom: 32px;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: #fff;
}

.accordion-aligned-cta--desktop { display: inline-block; }
.accordion-aligned-cta--mobile { display: none; }

.accordion-aligned-item:not(.accordion-aligned-item--selected) .accordion-aligned-cta--desktop {
  display: none;
}

@media (max-width: 1248px) {
  .accordion-aligned-inner {
    padding-left: 32px;
    padding-right: 32px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 32px;
  }

  .accordion-aligned-body { padding-bottom: 24px; }

  .accordion-aligned-body p {
    font-size: 16px;
    line-height: 22px;
  }

  .accordion-aligned-body ul li {
    font-size: 16px;
    line-height: 22px;
  }

  .accordion-aligned-cta--desktop { display: none !important; }
  .accordion-aligned-cta--mobile {
    display: block !important;
    margin-bottom: 0;
  }
}

@media (max-width: 940px) {
  .accordion-aligned-intro {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  .accordion-aligned-heading {
    font-size: 40px;
    line-height: 40px;
  }

  .accordion-aligned-heading span {
    font-size: 46px;
    line-height: 44px;
  }

  .accordion-aligned-list { flex-direction: column; }

  .accordion-aligned-item { width: 100% !important; }

  .accordion-aligned-item.accordion-aligned-item--selected {
    width: 100% !important;
  }

  .accordion-aligned-item .accordion-aligned-details {
    display: block !important;
  }

  .accordion-aligned-image {
    min-height: 400px !important;
  }
}

/* ========== Section Services (vor Footer) ========== */
.section_services {
  position: relative;
  z-index: 19;
  background-color: var(--color-bg, #fefefd);
  border-radius: 1rem;
  margin-bottom: -0.75rem;
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.grid-wrapper-3 {
  display: flex;
  flex-flow: row;
  justify-content: center;
  width: 100%;
  padding-left: 5%;
  padding-right: 5%;
  position: relative;
}

.half-wrapper {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  grid-template-rows: auto;
  gap: 4rem 16px;
  width: 100%;
  max-width: 90rem;
}

.sticky-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 36px;
  position: sticky;
  top: 5rem;
}

.medium-stacked-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 36px;
  max-width: 475px;
}

.medium-width-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 1rem;
  max-width: 675px;
}

.section_services .stacked-title {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 1rem;
}

.section_services .heading-h2 {
  color: var(--color-text, #0e0c0c);
  text-align: left;
  font-size: 3.25rem;
  font-weight: 300;
  margin: 0;
}

.section_services .heading-h2--short {
  font-weight: 300;
}

.section_services .paragraph-width {
  max-width: 500px;
}

.section_services .paragraph-small {
  color: var(--color-text, #0e0c0c);
  margin: 0;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.5;
}

.verticle-line {
  background-color: rgba(0, 0, 0, 0.12);
  height: 100%;
  min-height: 120px;
  position: relative;
}

.list-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 4rem;
  justify-items: stretch;
}

.horizontal-journal-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 36px 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: transparent;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, background-color 0.2s;
}

.horizontal-journal-card:hover {
  border-color: rgba(0, 0, 0, 0.2);
  background-color: rgba(0, 0, 0, 0.02);
}

.journal-image {
  min-height: 19.5em;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.background-wrapper-2 {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 0.75rem;
}

.section_services .background-1,
.section_services .background-2,
.section_services .background-4 {
  position: absolute;
  inset: 0;
  background-position: 50%;
  background-size: cover;
}

.section_services .services-bg-1 { background-image: url(assets/intro1.jpg); }
.section_services .services-bg-2 { background-image: url(assets/intro2.jpg); }
.section_services .services-bg-3 { background-image: url(assets/villa.jpg); }

.section_services .overlay-2 {
  position: absolute;
  inset: 0;
  background-color: rgba(10, 16, 29, 0.1);
}

.journal-info {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 16px 60px;
  align-content: space-between;
  width: 100%;
  padding-right: 0;
  position: relative;
}

.section_services .post-info {
  display: flex;
  flex-flow: column;
  gap: 16px 12px;
}

.section_services .heading-4 {
  font-family: var(--font-heading, 'Instrument Serif', Georgia, serif);
  color: var(--color-text, #0e0c0c);
  font-size: 2.25rem;
  font-weight: 300;
  line-height: 1.25;
  margin: 0;
}

.section_services .body-display-5--small {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text, #0e0c0c);
  margin: 0;
}

.section_services .text-link-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.875rem;
}

.section_services .text-size-small-3 {
  font-family: var(--font-heading, 'Instrument Serif', Georgia, serif);
  font-size: 0.875rem;
}

.section_services .line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.section_services .line_fill {
  position: absolute;
  inset: 0;
  background-color: var(--color-text, #0e0c0c);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.horizontal-journal-card:hover .line_fill {
  transform: translateX(0);
}

@media (max-width: 991px) {
  .half-wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 40px 16px;
  }

  .sticky-intro {
    position: relative;
    top: 0;
  }

  .verticle-line {
    width: 100%;
    height: 2px;
    min-height: 0;
  }

  .section_services {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .section_services .heading-h2 {
    font-size: 2.75rem;
  }
}

@media (max-width: 767px) {
  .section_services {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .section_services .paragraph-small {
    font-size: 1rem;
  }

  .section_services .heading-h2 {
    font-size: 2.25rem;
  }

  .section_services .heading-h2--short {
    font-size: 2.5rem;
  }

  .section_services .heading-4 {
    font-size: 2rem;
  }

  .horizontal-journal-card {
    grid-template-columns: 1fr;
    gap: 24px 16px;
  }

  .journal-info {
    gap: 24px;
    padding: 0 12px 12px;
  }
}

@media (max-width: 479px) {
  .section_services {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .section_services .heading-h2--short {
    font-size: 2.75rem;
  }

  .section_services .heading-4 {
    font-size: 2rem;
  }

  .journal-image {
    min-height: 20rem;
  }
}

/* ========== FAQ Section: Sie fragen, wir antworten (VillaRue Stil) ========== */
.faq_section {
  background-color: #fff;
  padding: 80px 0 100px;
  width: 100%;
  box-sizing: border-box;
}

.faq_section .wrapper_base {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 28px;
}

.faq_layout {
  display: block;
}

.faq_main {
  width: 100%;
}

.faq_heading {
  font-family: "Instrument Serif", serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  color: #242424;
  margin: 0 0 40px;
  line-height: 1.15;
}
.faq_heading.reveal-chars {
  overflow: hidden;
  padding-bottom: 0.2em;
  box-sizing: content-box;
}
.faq_heading .hero-char {
  display: inline-block;
  vertical-align: bottom;
}

.faq_list {
  display: flex;
  gap: 48px;
}

.faq_list_col {
  flex: 1;
  min-width: 0;
}

.faq_list_col .faq_item {
  border-bottom: 1px solid rgba(36, 36, 36, 0.12);
}

.faq_list_col .faq_item:first-child {
  border-top: none;
}

.faq_list_col .faq_item:last-child {
  border-bottom: none;
}

.faq_toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 0;
  font-family: "Google Sans", sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  color: #242424;
  background: none;
  border: none;
  cursor: pointer;
  list-style: none;
  text-align: left;
  transition: color 0.2s ease;
}

.faq_toggle::-webkit-details-marker {
  display: none;
}

.faq_toggle:hover {
  color: #474747;
}

.faq_question {
  flex: 1;
  padding-right: 24px;
  font-family: "Instrument Serif", serif;
  font-size: 1.3rem;
}

.faq_arrow {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-right: 2px solid #242424;
  border-bottom: 2px solid #242424;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq_item[open] .faq_arrow {
  transform: rotate(-135deg) translateY(2px);
}

.faq_content {
  padding: 0 0 24px;
}

.faq_item[open] .faq_content {
  animation: faq-content-appear 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes faq-content-appear {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.faq_content p {
  margin: 0;
  font-family: "Google Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #242424;
  opacity: 0.9;
  padding-right: 36px;
}

/* FAQ CTA Card */
@media (max-width: 991px) {
  .faq_section {
    padding: 60px 0 80px;
  }

  .faq_section .wrapper_base {
    padding: 0 20px;
  }
}

@media (max-width: 767px) {
  .faq_section {
    padding: 60px 0 60px;
  }

  .faq_section .wrapper_base {
    padding: 0 16px;
  }

  .faq_list {
    flex-direction: column;
    gap: 0;
  }

  .faq_heading {
    margin-bottom: 32px;
  }

  .faq_toggle {
    padding: 16px 0;
  }
  .faq_question {
    font-size: 1.15rem;
  }

  .faq_content p {
    padding-right: 0;
    font-size: 0.95rem;
  }
}

/* ========== Composition Section: Galerie (Grid) ========== */
.section_composition {
  position: relative;
  background-color: #f2efe9;
  padding: 48px 0 120px;
  width: 100%;
  box-sizing: border-box;
}

/* Verlauf nach unten ins Weiße */
.section_composition::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  min-height: 200px;
  background: linear-gradient(to bottom, transparent 0%, #fff 100%);
  pointer-events: none;
}

.section_composition-wrapper {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding: 0 28px;
}

.section_composition-heading {
  text-align: center;
  margin-bottom: 64px;
}

.section_composition-title {
  font-family: "Instrument Serif", serif;
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin: 0;
  color: #D83731;
}

.section_composition-title strong {
  color: #242424;
}

.section_composition-grid {
  display: flex;
  flex-direction: row;
  gap: 12px;
  width: 100%;
  margin: 0;
}

.section_composition-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.section_composition-col--offset {
  padding-top: 60px;
}

.section_composition-col--desktop {
  display: flex;
}

.section_composition-media {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
}

.section_composition-image,
.section_composition-video {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
  aspect-ratio: 1.25;
  border-radius: 8px;
}

.section_composition-video {
  aspect-ratio: 0.75;
  background: #e8e8e8;
}

.section_composition-image img,
.section_composition-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  vertical-align: middle;
}

.section_composition-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.section_composition-label {
  position: absolute;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  font-family: "Instrument Serif", serif;
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-weight: 400;
  color: #F4F2EE;
  text-align: center;
  width: 80%;
  max-width: 200px;
  z-index: 1;
  pointer-events: none;
}

.section_composition-label--large {
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  max-width: 240px;
}

@media (max-width: 1100px) {
  .section_composition {
    padding: 32px 0 100px;
  }
  .section_composition.gallery-marquee-section {
    padding: 32px 0;
  }

  .section_composition-wrapper {
    padding: 0 20px;
  }

  .section_composition-heading {
    margin-bottom: 48px;
  }

  .section_composition-title {
    font-size: clamp(2.5rem, 10vw, 4rem);
  }

  .section_composition-grid {
    gap: 16px;
  }

  .section_composition-col {
    gap: 16px;
  }

  .section_composition-col--offset {
    padding-top: 48px;
  }

  .section_composition-col:nth-child(3),
  .section_composition-col:nth-child(4) {
    display: none;
  }
}

@media (max-width: 767px) {
  .section_composition {
    padding: 16px 0 16px;
  }
  .section_composition.gallery-marquee-section {
    padding: 16px 0;
  }

  .section_composition-wrapper {
    padding: 0 16px;
  }

  .section_composition-heading {
    margin-bottom: 40px;
  }

  .section_composition-title {
    font-size: clamp(2rem, 12vw, 3rem);
  }

  .section_composition-grid {
    gap: 12px;
  }

  .section_composition-col {
    gap: 12px;
  }

  .section_composition-col--offset {
    padding-top: 40px;
  }

  .section_composition-media,
  .section_composition-image,
  .section_composition-video {
    border-radius: 6px;
  }

  .section_composition-label {
    top: 16px;
    font-size: clamp(0.95rem, 4vw, 1.2rem);
  }

  .section_composition-label--large {
    font-size: clamp(1.1rem, 5vw, 1.5rem);
  }
}

/* Galerie Vollbild-Lightbox */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  overflow: hidden;
}
.gallery-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.gallery-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  cursor: pointer;
}
.gallery-lightbox__content {
  position: relative;
  z-index: 1;
  max-width: calc(100vw - 96px);
  max-height: calc(100vh - 96px);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.gallery-lightbox__img,
.gallery-lightbox__video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.gallery-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 48px;
  height: 48px;
  border: none;
  background: none;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.gallery-lightbox__close:hover {
  opacity: 0.8;
}

@media (max-width: 768px) {
  .gallery-lightbox {
    padding: 16px;
  }
  .gallery-lightbox__content {
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
  }
}

.section_composition-image,
.section_composition-video {
  cursor: pointer;
}

/* Impressum & Datenschutz als Popup */
.legal-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.legal-modal.is-open {
  opacity: 1;
  visibility: visible;
}
.legal-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.legal-modal__box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 48px);
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.legal-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: #242424;
  cursor: pointer;
  z-index: 2;
  transition: color 0.2s ease;
}
.legal-modal__close:hover {
  color: #D83731;
}
.legal-modal__title {
  font-family: "Instrument Serif", serif;
  font-size: 1.75rem;
  font-weight: 400;
  color: #242424;
  margin: 0;
  padding: 28px 28px 12px;
  flex-shrink: 0;
}
.legal-modal__body {
  padding: 0 28px 28px;
  overflow-y: auto;
  color: #333;
  font-family: "Google Sans", sans-serif;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.legal-modal__body h3 {
  margin: 1.25em 0 0.5em;
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
}
.legal-modal__body h3:first-child {
  margin-top: 0;
}
.legal-modal__body p {
  margin: 0 0 1em;
}
.legal-modal__body p:last-child {
  margin-bottom: 0;
}
.legal-modal__body a {
  color: #D83731;
  text-decoration: underline;
}
.legal-modal__body a:hover {
  text-decoration: none;
}

/* Galerie als Marquee (wie Vielseitige Nutzung), langsamer, anklickbar für Lightbox */
.section_composition.gallery-marquee-section {
  padding: 48px 0;
}
.section_composition.gallery-marquee-section::after {
  display: none;
}
.gallery-marquee-section .gallery-marquee-section__wrapper {
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  padding: 0;
}

.gallery-marquee-section .marquee.gallery-marquee {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  min-width: min-content;
}

.gallery-marquee-section .marquee_track.gallery-marquee_track {
  flex: none;
  display: flex;
  gap: 1em;
  width: max-content;
  animation: marquee-cards 70s linear infinite;
  will-change: transform;
}

.gallery-marquee-section .marquee_flex.gallery-marquee_flex {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-shrink: 0;
  gap: 1em;
}

.gallery-marquee-section .gallery-marquee_item {
  flex: none;
  width: auto;
}

.gallery-marquee-section .gallery-marquee-media {
  display: block;
  width: 22em;
  height: 26rem;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.gallery-marquee-section .gallery-marquee-media:hover {
  opacity: 0.92;
}

.gallery-marquee-section .gallery-marquee-media .section_composition-image,
.gallery-marquee-section .gallery-marquee-media .section_composition-video {
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
  border-radius: 6px;
}

.gallery-marquee-section .gallery-marquee-media .section_composition-image img,
.gallery-marquee-section .gallery-marquee-media .section_composition-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .gallery-marquee-section .marquee_track.gallery-marquee_track {
    animation-duration: 90s;
  }
  .gallery-marquee-section .gallery-marquee-media {
    width: 85vw;
    max-width: 340px;
    height: 24rem;
    min-height: 24rem;
  }
}

/* ========== Contact Section (Bastion-inspired) ========== */
.section_contact {
  background-color: #242424;
  padding: 80px 0 100px;
  width: 100%;
  position: relative;
}

.section_contact-line {
  position: absolute;
  top: 0;
  left: 28px;
  width: 48px;
  height: 2px;
  background-color: #D83731;
}

.section_contact-wrapper {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding: 48px 28px 0;
}

.section_contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 64px;
  align-items: start;
}

.section_contact-intro {
  grid-column: 1;
}

.section_contact-text {
  font-family: "Google Sans", sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  color: #F4F2EE;
  margin: 0;
  max-width: 360px;
}

.section_contact-info {
  grid-column: 2;
  grid-row: 1;
  font-family: "Google Sans", sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.8;
  color: #F4F2EE;
}

.section_contact-info p {
  margin: 0 0 8px 0;
}

.section_contact-info a {
  color: #F4F2EE;
  text-decoration: none;
  transition: color 0.3s ease;
}

.section_contact-info a:hover {
  color: #D83731;
}

.section_contact-form-col {
  grid-column: 1;
  grid-row: 2;
}

.section_contact-image-col {
  grid-column: 2;
  grid-row: 2;
}

.section_contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 360px;
}

.section_contact-form input,
.section_contact-form textarea {
  width: 100%;
  padding: 14px 0;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(244, 242, 238, 0.3);
  font-family: "Google Sans", sans-serif;
  font-size: 1rem;
  color: #F4F2EE;
  transition: border-color 0.3s ease;
}

.section_contact-form input::placeholder,
.section_contact-form textarea::placeholder {
  color: rgba(244, 242, 238, 0.5);
}

.section_contact-form input:focus,
.section_contact-form textarea:focus {
  outline: none;
  border-bottom-color: #D83731;
}

.section_contact-form textarea {
  resize: vertical;
  min-height: 80px;
}

.section_contact-submit {
  align-self: flex-start;
  padding: 16px 36px;
  background-color: #D83731;
  border: none;
  font-family: "Instrument Serif", serif;
  font-size: 1.05rem;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.section_contact-submit:hover {
  background-color: #b32d27;
}

.section_contact-image {
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 8px;
}

.section_contact-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

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

@media (max-width: 1024px) {
  .section_contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .section_contact-intro,
  .section_contact-info,
  .section_contact-form-col,
  .section_contact-image-col {
    grid-column: 1;
  }

  .section_contact-info {
    grid-row: 2;
  }

  .section_contact-form-col {
    grid-row: 3;
  }

  .section_contact-image-col {
    grid-row: 4;
  }
}

@media (max-width: 767px) {
  .section_contact {
    padding: 60px 0 80px;
  }

  .section_contact-line {
    left: 16px;
    width: 32px;
  }

  .section_contact-wrapper {
    padding: 40px 16px 0;
  }

  .section_contact-grid {
    gap: 32px;
  }
}

/* ========== Footer (Yourwave-inspiriert) ========== */
.footer {
  position: sticky;
  bottom: 0;
  z-index: 0;
  background: #f2efe9;
  width: 100%;
}

.footer__wrapper {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 28px 80px;
}

.footer__container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  padding: 84px 0 48px;
}

.footer__contact {
  max-width: 320px;
}

.footer__heading {
  font-family: "Instrument Serif", serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  line-height: 1.2;
  color: #242424;
  margin: 0 0 0;
}

.footer__heading em {
  font-style: italic;
  font-weight: 300;
}

.footer__button {
  margin-top: 28px;
}

.footer__button-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: #242424;
  font-family: "Instrument Serif", serif;
  font-size: 1.125rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(36, 36, 36, 0.3);
  padding-bottom: 2px;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.footer__button-link:hover {
  border-bottom-color: #242424;
}

.footer__button-arrow {
  font-size: 1em;
}

.footer__links {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 48px;
  max-width: 520px;
}

.footer__column-title {
  font-family: "Google Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(36, 36, 36, 0.6);
  margin-bottom: 14px;
}

.footer__column-menu,
.footer__column-socials,
.footer__column-email {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer__column-menu {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.footer__column-menu a,
.footer__column-socials a,
.footer__column-email a {
  font-family: "Google Sans", sans-serif;
  font-size: 1rem;
  color: #242424;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer__column-menu a:hover,
.footer__column-socials a:hover,
.footer__column-email a:hover {
  color: #474747;
}

.footer__title {
  overflow: hidden;
  pointer-events: none;
}

.footer__title h2 {
  font-family: "Instrument Serif", serif;
  font-size: clamp(3rem, 10vw, 8rem);
  font-weight: 400;
  line-height: 0.95;
  color: #242424;
  margin: 0;
  text-align: center;
  letter-spacing: -0.02em;
}

@media (max-width: 991px) {
  .footer__container {
    flex-direction: column;
    gap: 36px;
    padding: 48px 0 40px;
  }

  .footer__links {
    flex-wrap: wrap;
    gap: 32px;
    max-width: none;
  }
}

@media (max-width: 767px) {
  .footer {
    position: static;
  }

  .footer__wrapper {
    padding: 0 16px 48px;
  }

  .footer__container {
    padding: 40px 0 32px;
    gap: 28px;
  }

  .footer__links {
    flex-direction: column;
    gap: 24px;
  }

  .footer__title h2 {
    text-align: left;
  }
}