@import url('https://fonts.googleapis.com/css2?family=Arsenal:ital,wght@0,400;0,700;1,400&display=swap');

/* ===== FONTS ===== */
@font-face {
  font-family: 'GT Alpina';
  src: url('../fonts/GT-Alpina-Standard-Regular.woff2') format('woff2'),
       url('../fonts/GT-Alpina-Standard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Alpina';
  src: url('../fonts/GT-Alpina-Standard-Bold.woff2') format('woff2'),
       url('../fonts/GT-Alpina-Standard-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===== DESIGN TOKENS ===== */
:root {
  --color-cream: #f7efe4;
  --color-brown: #592720;
  --color-orange: #ff603e;
  --color-green: #00a041;
  --page-width: 393px;
  --content-padding: 20px;
}

/* ===== MODULE BASE =====
   Einheitlicher vertikaler Modulabstand: 60px oben + 60px unten
   => zwischen zwei aufeinanderfolgenden Modulen immer 120px.
   Ausnahmen: Hero (full-bleed), Menü (Navigation), Footer (eigene Logik). */
.module { padding-block: 60px; }
.module--hero-slider,
.module--menu,
.module--footer { padding-block: 0; }

/* ===== RESET & BASE ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--color-cream); }
body {
  font-family: Arial, sans-serif;
  background: var(--color-cream);
  color: var(--color-brown);
  width: var(--page-width);
  max-width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* Platz für fixed .site-booking-bar (72px) damit letzte Inhalte nicht verdeckt werden */
  padding-bottom: 72px;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: none; }
ul { list-style: none; }
blockquote { font-style: normal; }
address { font-style: normal; }

/* ===== TYPOGRAPHY ===== */
.font-alpina { font-family: 'GT Alpina', 'Arsenal', Georgia, serif; font-weight: 400; }
.font-alpina-bold { font-family: 'GT Alpina', 'Arsenal', Georgia, serif; font-weight: 700; }

/* ===== SHARED COMPONENTS ===== */

/* Slider bar */
.slider-bar { position: relative; width: 167px; height: 3px; }
.slider-bar__bg {
  position: absolute; inset: 0;
  border-radius: 14px;
  background: rgba(255,255,255,0.3);
}
.slider-bar__fill {
  position: absolute; top: 0; left: 0; height: 3px;
  border-radius: 14px;
  background: rgba(255,255,255,0.6);
  transition: width 0.4s ease;
}
.slider-bar--dark .slider-bar__bg { background: rgba(89,39,32,0.3); }
.slider-bar--dark .slider-bar__fill { background: var(--color-brown); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 5px 20px;
  border-radius: 100px; border: none;
  font: 16px/19.2px Arial, sans-serif;
  cursor: pointer; white-space: nowrap;
  text-decoration: none;
}
.btn--brown { background: var(--color-brown); color: var(--color-cream); }
.btn--orange { background: var(--color-orange); color: var(--color-brown); }

/* Text link */
.text-link {
  font-size: 16px; line-height: 19.2px;
  color: var(--color-brown);
  text-decoration: underline;
  cursor: pointer;
}

/* Social icons */
.social-icons { display: flex; gap: 10px; align-items: center; }

/* Logo */
.logo { position: relative; width: 353px; height: 33px; }
.logo__text {
  position: absolute; left: 0; top: 0;
  width: 192.826px; height: 33px;
}
.logo__icon {
  position: absolute; left: 229.63px; top: 1.11px;
  width: 123.367px; height: 33px;
}

/* ===== MODULE: hero-slider ===== */
.module--hero-slider { position: relative; width: var(--page-width); height: 852px; overflow: hidden; }
.hero-slider { position: relative; width: var(--page-width); height: 845px; overflow: hidden; }
.hero-slider__slide {
  position: absolute; top: 0; left: 0;
  width: var(--page-width); height: 845px;
  overflow: hidden;
  opacity: 0; transition: opacity 1s ease;
}
.hero-slider__slide.is-active { opacity: 1; z-index: 1; }
.hero-slider__image {
  position: absolute; top: -8px; left: -71px;
  width: 526px; height: 736px; object-fit: cover;
}
.hero-slider__gradient {
  position: absolute; top: 399px; left: 0;
  width: var(--page-width); height: 329px;
  background: linear-gradient(to bottom, rgba(66,66,66,0) 0%, rgba(11,11,11,0.3) 56.8%);
}
.hero-slider__shape {
  position: absolute; top: 693px; left: 0;
  width: var(--page-width); height: 261px;
}
.hero-slider__shape img { width: 100%; height: 100%; }
.hero-slider__title {
  position: absolute; top: 489px; left: 20px; width: 353px;
  font-size: 60px; line-height: 50px; color: white;
}
.hero-slider__bar {
  position: absolute; top: 658px; left: 113px; z-index: 2;
}
.btn--small { height: 28px; padding: 4px 16px; font-size: 14px; }

/* Outline button variant (falls noch woanders genutzt) */
.btn--outline {
  background: transparent;
  border: 1.5px solid var(--color-brown);
  color: var(--color-brown);
}

/* ===== SITE BOOKING BAR =====
   Fixed an der Unterkante des Viewports. Zeigt bei scrollY=0 das Stern-Logo,
   crossfadet auf Anfragen/Buchen-Buttons sobald body.is-scrolled gesetzt ist.
   Grid stackt Logo und Actions in derselben Zelle → sauberer Crossfade ohne Layout-Shift. */
.site-booking-bar {
  position: fixed; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: var(--page-width); max-width: 100%;
  height: 72px;
  background: var(--color-cream);
  z-index: 100;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
  display: grid; place-items: center;
  padding: 0 20px;
}
.site-booking-bar__logo,
.site-booking-bar__actions {
  grid-area: 1 / 1;
  display: flex; align-items: center;
}
/* Sequenzielles Fade — das ausgehende Element geht sofort raus (0.2s),
   das eingehende kommt mit delay (0.2s) rein. Kein gleichzeitig-sichtbares
   Overlap zwischen Logo und Buttons. */
.site-booking-bar__logo {
  gap: 12px;
  transition: opacity 0.2s ease 0.2s;
}
.site-booking-bar__actions {
  gap: 10px; opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
/* SVGs haben preserveAspectRatio="none" → explizite Höhe + viewBox-proportionale Breite.
   Natural size 33px (Figma); viewBox Ratios: Text 5.85:1, Icon 3.74:1 */
.site-booking-bar__logo-text { width: 193px; height: 33px; flex-shrink: 0; }
.site-booking-bar__logo-icon { width: 123px; height: 33px; flex-shrink: 0; }

body.is-scrolled .site-booking-bar__logo {
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
body.is-scrolled .site-booking-bar__actions {
  opacity: 1; pointer-events: auto;
  transition: opacity 0.2s ease 0.2s;
}

/* ===== MODULE: intro-text ===== */
.intro-text {
  padding-inline: var(--content-padding);
  display: flex; flex-direction: column; gap: 25px;
}
.intro-text__top {
  display: flex; flex-direction: column; gap: 15px;
  color: var(--color-orange);
}
.intro-text__label { font-size: 12px; line-height: 16.8px; }
.intro-text__heading { font-size: 36px; line-height: 40px; }
.intro-text__body { font-size: 19px; line-height: 28px; color: var(--color-brown); }

/* ===== MODULE: bild-gross ===== */
.bild-gross {
  margin-inline: var(--content-padding);
  width: 353px; height: 441px;
  border-radius: 20px; overflow: hidden;
  position: relative;
}
.bild-gross img {
  position: absolute; top: -22.9%; left: -5%;
  width: 105%; height: 126%; object-fit: cover;
}

/* ===== MODULE: checklist ===== */
.checklist { padding-inline: var(--content-padding); }
.checklist__heading {
  font-size: 24px; line-height: 31px;
  width: 271px; margin-bottom: 25px;
}
.checklist__list { display: flex; flex-direction: column; gap: 20px; }
.checklist__item {
  display: flex; gap: 28px; align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(89,39,32,0.2);
}
.checklist__item:last-child { border-bottom: none; padding-bottom: 0; }
.checklist__icon { width: 23px; height: 23px; flex-shrink: 0; display: block; }
.checklist__icon svg { width: 100%; height: 100%; display: block; }
.checklist__text { font-size: 15px; line-height: 22px; }
.checklist__cta { padding-top: 30px; }

/* ===== MODULE: orientierung ===== */
.orientierung { position: relative; width: var(--page-width); height: 789px; }
.orientierung__map {
  position: absolute; top: 20px; left: 20px; right: 20px;
  height: 309px;
  background: var(--color-cream);
  border-radius: 20px;
  overflow: hidden;
}
.orientierung__map-img {
  position: absolute; top: -10.72%; left: -1.78%;
  width: 119%; height: 114%;
  object-fit: cover; mix-blend-mode: multiply;
}
.map-pin {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 13px;
  font-size: 18px; line-height: 1;
  border: none; padding: 0; cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease,
              background-color 0.3s ease, color 0.3s ease;
}
/* Desktop-Hover: subtiler Vergrößerungs-Anreiz */
@media (hover: hover) {
  .map-pin:hover { transform: scale(1.2); z-index: 2; }
}
/* Aktiver Pin: größer + dunkelbraun mit orange Zahl (Figma-Variants) */
.map-pin.is-active,
.map-pin--active {
  transform: scale(1.45);
  box-shadow: 0 3px 10px rgba(89, 39, 32, 0.35);
  z-index: 3;
  background: var(--color-brown);
  color: var(--color-orange);
}
.map-pin--brown { background: var(--color-brown); color: var(--color-orange); }
.map-pin--orange { background: var(--color-orange); color: var(--color-brown); }
.map-pin--dot { width: 25px; height: 26px; border-radius: 13px; background: none; }
.map-pin--dot svg,
.map-pin--dot img { width: 100%; height: 100%; position: absolute; inset: 0; }
.map-pin--dot span {
  position: absolute; top: 5px; left: 7px;
  font-size: 18px; color: var(--color-brown);
}
/* Bei aktiviertem Dot: eigenes SVG raus, brauner Hintergrund, orange Zahl.
   !important, weil inline-SVG style="display:block" von hotelstern_inline_svg()
   höhere Specificity hätte. */
.map-pin--dot.is-active svg,
.map-pin--dot.is-active img { display: none !important; }
.map-pin--dot.is-active span { top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--color-orange); }
/* Custom Focus-Ring statt Default-Browser-Blue */
.map-pin:focus { outline: none; }
.map-pin:focus-visible { outline: 2px solid var(--color-brown); outline-offset: 2px; }
.orientierung__cards {
  position: absolute; top: 40.56%; left: 5.08%; right: 5.08%; bottom: 0;
}
.orientierung__cards .orientierung__card {
  position: absolute; inset: 0;
  border-radius: 20px; overflow: hidden;
}
.orientierung__card {
  position: absolute; top: 40.56%; left: 5.08%; right: 5.08%; bottom: 0;
  border-radius: 20px; overflow: hidden;
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s;
  pointer-events: none;
}
.orientierung__card.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.orientierung__card-image {
  position: absolute; top: 0; left: 0; right: 0; height: 50%;
  overflow: hidden;
}
.orientierung__card-image img {
  position: absolute; top: -26%; left: -23.5%;
  width: 124%; height: 133%; object-fit: cover;
}
.orientierung__card-shape {
  position: absolute; top: 42.55%; left: 0; right: 0; bottom: 0;
}
.orientierung__card-shape img { width: 100%; height: 100%; }
.orientierung__card-body {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 0 20px;
  display: flex; flex-direction: column; gap: 5px;
}
.orientierung__card-body .text-link { padding: 5px 0 20px; }
.orientierung__card-title { font-size: 24px; line-height: 31px; }
.orientierung__card-text { font-size: 15px; line-height: 22px; }
.orientierung__indicator {
  position: absolute; bottom: 26px; right: 20px;
  width: 26px; height: 26px;
  border: 1px solid var(--color-brown); border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; z-index: 2;
}

/* ===== MODULE: aktionen-slider ===== */
.aktionen-slider { overflow: hidden; }
.aktionen-slider__heading {
  padding-inline: var(--content-padding);
  font-size: 36px; line-height: 45px;
  color: var(--color-orange);
  margin-bottom: 50px;
}
.aktionen-slider__viewport { overflow: hidden; position: relative; }
/* Scroll-Hint: Fade nach rechts deutet an, dass es weitergeht */
.aktionen-slider__viewport::after,
.hohepunkt-slider__viewport::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 50px;
  background: linear-gradient(90deg, rgba(247,239,228,0), var(--color-cream));
  pointer-events: none;
  z-index: 2;
}
.aktionen-slider__track {
  display: flex; gap: 20px;
  padding-left: 22px;
  transition: transform 0.4s ease;
}
.aktionen-slider__track.dragging { transition: none; }
.aktionen-slider__slide { flex-shrink: 0; width: 305px; }
.aktionen-card { position: relative; min-height: 430px; }
.aktionen-card__bg {
  position: absolute; inset: 0;
}
.aktionen-card__bg img { width: 100%; height: 100%; }
.aktionen-card__body {
  position: relative; z-index: 1;
  padding: 60px 20px 30px;
  display: flex; flex-direction: column; gap: 25px;
}
/* Text-Farbe kontrastiert zum Shape-BG pro variant */
.aktionen-card[data-variant="braun"] .aktionen-card__body { color: var(--scheme-accent); }
.aktionen-card[data-variant="akzent"] .aktionen-card__body { color: var(--color-brown); }
.aktionen-card[data-variant="weiss"] .aktionen-card__body { color: var(--scheme-accent); }
.aktionen-card__title { font-size: 24px; line-height: 31px; }
.aktionen-card__text { font-size: 15px; line-height: 22px; }
.aktionen-card__price { font-size: 24px; line-height: 31px; }
.aktionen-slider__bar {
  display: flex; justify-content: center;
  margin-top: 30px;
}

/* ===== MODULE: hohepunkt-slider ===== */
.hohepunkt-slider { overflow: hidden; }
.hohepunkt-slider__header { padding: 0 var(--content-padding) 25px; }
.hohepunkt-slider__title { font-size: 36px; line-height: 45px; color: var(--color-orange); }
.hohepunkt-slider__subtitle { font-size: 15px; line-height: 22px; margin-top: 5px; }
.hohepunkt-slider__viewport { overflow: hidden; position: relative; }
.hohepunkt-slider__track {
  display: flex; gap: 20px;
  padding-left: var(--content-padding);
  transition: transform 0.4s ease;
}
.hohepunkt-slider__track.dragging { transition: none; }
.hohepunkt-slider__slide { flex-shrink: 0; width: 353px; }

/* Bild-Text Card (shared by hohepunkt + standalone) */
.bild-text-card {
  position: relative; width: 353px; height: 470px;
  border-radius: 20px; overflow: hidden;
}
.bild-text-card__image {
  position: absolute; top: 0; left: 0; right: 0; height: 50%;
  overflow: hidden;
}
.bild-text-card__image img {
  width: 100%; height: 100%; object-fit: cover;
}
.bild-text-card__image--placeholder { position: absolute; }
.bild-text-card__shape {
  position: absolute; top: 42.55%; left: 0; right: 0; bottom: 0;
}
.bild-text-card__shape img { width: 100%; height: 100%; }
.bild-text-card__body {
  position: absolute; top: 50%; left: 0; right: 0; bottom: auto;
  padding: 30px 20px 20px;
  display: flex; flex-direction: column; gap: 8px;
}
/* card_type=bild: Bild füllt die ganze Card, kein Shape + kein Body */
.bild-text-card[data-type="bild"] .bild-text-card__image { height: 100%; }
.bild-text-card[data-type="bild"] .bild-text-card__image img { width: 100%; height: 100%; object-fit: cover; }
.bild-text-card[data-type="bild"] .bild-text-card__shape { display: none; }

/* card_type=text: kein Bild, kein Shape, Card-BG matcht Variante, Body oben */
.bild-text-card[data-type="text"] .bild-text-card__image { display: none; }
.bild-text-card[data-type="text"] .bild-text-card__shape { display: none; }
.bild-text-card[data-type="text"][data-variant="braun"]  { background: var(--color-brown); }
.bild-text-card[data-type="text"][data-variant="orange"] { background: var(--color-orange); }
.bild-text-card[data-type="text"][data-variant="weiss"]  { background: #fff; }
.bild-text-card[data-type="text"] .bild-text-card__body {
  top: 40px;
  bottom: auto;
  padding: 0 20px 20px;
}

/* Text-Farbe kontrastiert zum Shape-BG pro Variante */
.bild-text-card[data-variant="braun"] .bild-text-card__body .text-link,
.bild-text-card[data-variant="braun"] .bild-text-card__title,
.bild-text-card[data-variant="braun"] .bild-text-card__text { color: var(--color-orange); }
.bild-text-card[data-variant="orange"] .bild-text-card__body .text-link,
.bild-text-card[data-variant="orange"] .bild-text-card__title,
.bild-text-card[data-variant="orange"] .bild-text-card__text { color: var(--color-brown); }
.bild-text-card[data-variant="weiss"] .bild-text-card__body .text-link,
.bild-text-card[data-variant="weiss"] .bild-text-card__title,
.bild-text-card[data-variant="weiss"] .bild-text-card__text { color: var(--color-brown); }
.bild-text-card__title { font-size: 24px; line-height: 31px; }
.bild-text-card__text { font-size: 15px; line-height: 22px; }
.hohepunkt-slider__bar {
  display: flex; justify-content: center;
  margin-top: 30px;
}

/* ===== MODULE: zitate ===== */
.module--zitate { padding-inline: var(--content-padding); }
.zitate-slider { width: 353px; overflow: hidden; }
.zitate-slider__track {
  display: flex;
  transition: transform 0.4s ease;
}
.zitate-slider__track.dragging { transition: none; }
.zitate-slider__slide { flex-shrink: 0; width: 353px; }
.zitate {
  width: 353px; height: 450px;
  background: var(--color-cream);
  display: flex; flex-direction: column;
  padding-bottom: 40px;
}
.zitate__heading {
  font-size: 36px; line-height: 40px;
  color: var(--color-orange);
  margin-bottom: 60px;
}
.zitate__quote { display: flex; flex-direction: column; gap: 15px; flex: 1; }
.zitate__icon { width: 25px; height: 19px; display: block; flex-shrink: 0; }
.zitate__icon svg { width: 100%; height: 100%; display: block; }
.zitate__text { font-size: 24px; line-height: 31px; }
.zitate__author { font-size: 12px; line-height: 17px; font-style: normal; }
.zitate-slider__bar {
  display: flex; justify-content: center;
  margin-top: 10px;
}

/* ===== MODULE: footer ===== */
.module--footer { background: var(--color-orange); }
.footer {
  padding: 70px var(--content-padding) 60px;
  color: var(--color-brown);
}
.footer__block { margin-bottom: 10px; }
.footer__title { font-size: 24px; line-height: 31px; margin-bottom: 10px; }
.footer__text { font-size: 15px; line-height: 22px; }
.footer .text-link { display: block; padding: 5px 0 20px; }
.footer__row {
  display: flex; align-items: center; gap: 20px;
  margin-bottom: 30px;
}
.footer__row .text-link { padding: 0; }
.footer__badges {
  display: flex; gap: 86px; align-items: center; justify-content: center;
  margin: 30px 0;
}
.footer__badges img { object-fit: cover; }
.footer__badges-group { display: flex; gap: 32px; align-items: center; }
.footer__contact { margin: 20px 0; }
.footer__contact p { font-size: 15px; line-height: 22px; }
.footer__links {
  display: flex; justify-content: space-between;
  margin-top: 40px;
}
.footer__links-col { display: flex; flex-direction: column; gap: 10px; }
.footer__links-col a {
  font-size: 16px; line-height: 19.2px;
  text-decoration: underline;
}
.footer__links-col--small a {
  font-size: 12px; line-height: 17px;
  text-decoration: none;
}

/* ===== MODULE: menu ===== */
.module--menu { position: relative; z-index: 100; }
.site-menu {
  width: var(--page-width);
  height: 120px;
  background: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 38px;
  padding-bottom: 50px;
  position: relative;
}
.site-menu__toggle {
  position: absolute;
  right: var(--content-padding);
  top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 22px;
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding: 0;
}
.site-menu__bar {
  display: block;
  width: 100%; height: 2px;
  background: var(--color-brown);
  border-radius: 1px;
  transition: transform 0.3s, opacity 0.3s;
}

/* Nav overlay */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--color-brown);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1000;
}
.site-nav.is-open {
  visibility: visible; opacity: 1; pointer-events: auto;
}
.site-nav__close {
  position: absolute;
  top: 25px; right: var(--content-padding);
  background: none; border: none;
  font-size: 36px; line-height: 1;
  color: var(--color-cream);
  cursor: pointer;
}
.site-nav__list {
  list-style: none;
  text-align: center;
  display: flex; flex-direction: column; gap: 25px;
}
.site-nav__list li a {
  font-family: 'GT Alpina', 'Arsenal', Georgia, serif;
  font-size: 36px; line-height: 45px;
  color: var(--color-cream);
  text-decoration: none;
  transition: color 0.2s;
}
.site-nav__list li a:hover {
  color: var(--color-orange);
}

/* ===== MODULE: anfragen (Casablanca-Widget) ===== */
.anfragen { padding-inline: var(--content-padding); }
.anfragen__heading {
  font-size: 24px; line-height: 31px;
  color: var(--color-orange);
  margin-bottom: 10px;
}
.anfragen__intro {
  font-size: 15px; line-height: 22px;
  margin-bottom: 30px;
}
.anfragen__widget { min-height: 200px; }
.anfragen__widget-loader {
  min-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 0;
}

/* Casablanca-Widget Overrides — Stern-Look.
   Widget bringt Bootstrap- und Kendo-UI-Styles mit; `#anfragen` erhöht die
   Spezifität, damit wir die nachträglich geladenen Widget-Styles überschreiben. */
/* Bootstrap-Grid komplett neutralisieren — Stern-Theme ist mobile-first,
   alle Felder übereinander und volle Breite, unabhängig vom Viewport.
   `!important` nötig, weil Bootstrap seine col-*-Breiten in Media Queries setzt. */
#anfragen .casa-wdg .row { margin: 0; }
#anfragen .casa-wdg .form-group { margin-left: 0; margin-right: 0; }
#anfragen .casa-wdg [class*="col-"] {
  width: 100% !important;
  float: none !important;
  display: block;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
}
/* Horizontal-Form (Label links, Input rechts) → vertikal (Label oben, Input drunter) */
#anfragen .casa-wdg .form-horizontal .control-label {
  text-align: left;
  padding-top: 0;
  margin-bottom: 6px;
}
#anfragen .casa-wdg label[style*="width"] { display: block; width: 100% !important; }

#anfragen .casa-wdg .form-control {
  height: 44px;
  padding: 0 14px;
  font: 16px/44px Arial, sans-serif;
  color: var(--color-brown);
  background: transparent;
  border: 1px solid var(--color-brown);
  border-radius: 10px;
  box-shadow: none;
  box-sizing: border-box;
}
#anfragen .casa-wdg textarea.form-control { height: auto; min-height: 88px; padding: 10px 14px; line-height: 24px; }
#anfragen .casa-wdg .form-control:focus {
  border-color: var(--color-brown);
  box-shadow: 0 0 0 2px rgba(89, 39, 32, 0.15);
  outline: 0;
}
/* Kendo-Wrappers (DatePicker, Dropdown, NumericTextBox) übernehmen Rand,
   innere Elemente flach */
#anfragen .casa-wdg .k-widget.k-datepicker,
#anfragen .casa-wdg .k-widget.k-dropdown,
#anfragen .casa-wdg .k-widget.k-numerictextbox {
  border: 1px solid var(--color-brown);
  border-radius: 10px;
  background: transparent;
  overflow: hidden;
  height: 44px;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
}
/* Innere Elemente füllen die Wrapper-Höhe aus */
#anfragen .casa-wdg .k-widget .k-picker-wrap,
#anfragen .casa-wdg .k-widget .k-dropdown-wrap,
#anfragen .casa-wdg .k-widget .k-numeric-wrap {
  height: 100% !important;
  line-height: 42px;
  width: 100%;
}
#anfragen .casa-wdg .k-widget input,
#anfragen .casa-wdg .k-widget .k-input {
  height: 42px !important;
  line-height: 42px !important;
  padding: 0 14px !important;
}
#anfragen .casa-wdg .k-widget .k-select {
  min-width: 38px;
  display: flex; align-items: center; justify-content: center;
}
#anfragen .casa-wdg .k-widget .k-picker-wrap,
#anfragen .casa-wdg .k-widget .k-dropdown-wrap,
#anfragen .casa-wdg .k-widget .k-numeric-wrap,
#anfragen .casa-wdg .k-widget .form-control,
#anfragen .casa-wdg .k-widget .k-input,
#anfragen .casa-wdg .k-widget input {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#anfragen .casa-wdg .k-widget .k-select {
  background: transparent;
  border: 0;
  color: var(--color-brown);
}

#anfragen .casa-wdg label,
#anfragen .casa-wdg .control-label {
  font-weight: 400;
  color: var(--color-brown);
}
#anfragen .casa-wdg .text-danger { color: var(--color-orange); }
#anfragen .casa-wdg .has-error .help-block { color: var(--color-orange); font-size: 12px; }

#anfragen .casa-wdg .btn,
#anfragen .casa-wdg .btn-default {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-orange);
  color: var(--color-brown);
  border: 0;
  border-radius: 100px;
  height: 32px;
  min-height: 0;
  padding: 5px 20px;
  font: 16px/19.2px Arial, sans-serif;
  white-space: nowrap;
}
#anfragen .casa-wdg .btn:hover,
#anfragen .casa-wdg .btn-default:hover,
#anfragen .casa-wdg .btn:focus,
#anfragen .casa-wdg .btn-default:focus {
  background: var(--color-orange);
  color: var(--color-brown);
  opacity: 0.9;
}
#anfragen .casa-wdg .btn[disabled] { opacity: 0.5; cursor: not-allowed; }

#anfragen .casa-wdg .checkbox.compliance {
  margin-bottom: 12px;
}
#anfragen .casa-wdg .checkbox.compliance label {
  font-size: 12px;
  line-height: 17px;
  padding-left: 24px;
}
/* Abstand zwischen Consent-Checkboxes und Submit-Button */
#anfragen .casa-wdg .checkbox.compliance + .form-group,
#anfragen .casa-wdg .form-group:last-of-type {
  margin-top: 30px;
}

/* Grün-Schema */
[data-color="green"] #anfragen .casa-wdg .form-control,
[data-color="green"] #anfragen .casa-wdg .k-widget.k-datepicker,
[data-color="green"] #anfragen .casa-wdg .k-widget.k-dropdown {
  border-color: var(--color-green);
  color: var(--color-green);
}
[data-color="green"] #anfragen .casa-wdg label,
[data-color="green"] #anfragen .casa-wdg .control-label,
[data-color="green"] #anfragen .casa-wdg .k-widget .k-select {
  color: var(--color-green);
}
[data-color="green"] #anfragen .casa-wdg .btn,
[data-color="green"] #anfragen .casa-wdg .btn-default {
  background: var(--color-green);
}

/* ===== MODULE: bild-text (standalone) ===== */
.module--bild-text {
  display: flex;
  justify-content: center;
  padding-inline: var(--content-padding);
}

/* ===== CPT: SHARED SINGLE/ARCHIVE STYLES ===== */

/* --- Room Navigation --- */
.room-nav {
  padding: 25px var(--content-padding);
  text-align: center;
}
.room-nav__label {
  font-size: 12px; line-height: 17px;
  margin-bottom: 15px;
}
.room-nav__items {
  display: flex; gap: 10px;
  justify-content: center; flex-wrap: wrap;
}
.room-nav__link {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 14px; font-weight: 700;
  background: var(--color-brown);
  color: var(--color-cream);
  transition: background 0.2s, color 0.2s;
}
.room-nav__link--active,
.room-nav__link:hover {
  background: var(--color-orange);
  color: var(--color-brown);
}

/* --- Room Gallery --- */
.room-gallery {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.room-gallery::-webkit-scrollbar { display: none; }
.room-gallery__track {
  display: flex; gap: 0;
}
.room-gallery__slide {
  flex-shrink: 0;
  width: 100%;
  height: 280px;
  overflow: hidden;
}
.room-gallery__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* --- Room Header --- */
.room-header {
  padding: 30px var(--content-padding);
  text-align: center;
}
.room-header__subtitle {
  font-size: 12px; line-height: 17px;
  color: var(--color-orange);
  margin-bottom: 8px;
}
.room-header__title {
  font-size: 36px; line-height: 40px;
  color: var(--color-brown);
  margin-bottom: 15px;
}
.room-header__description {
  font-size: 15px; line-height: 22px;
  margin-bottom: 20px;
}
.room-header__description p { margin-bottom: 10px; }
.room-header__meta {
  display: flex; gap: 25px;
  justify-content: center; align-items: center;
}
.room-header__meta-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 15px; line-height: 22px;
}
.room-header__meta-item svg {
  width: 18px; height: 18px;
  color: var(--color-orange);
}

/* --- Room Details --- */
.room-details {
  padding: 20px var(--content-padding) 30px;
}
.room-details__section {
  margin-bottom: 30px;
}
.room-details__heading {
  font-size: 24px; line-height: 31px;
  color: var(--color-orange);
  margin-bottom: 15px;
}
.room-details__list {
  display: flex; flex-direction: column; gap: 10px;
}
.room-details__item {
  font-size: 15px; line-height: 22px;
  padding-left: 20px;
  position: relative;
}
.room-details__item::before {
  content: '';
  position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-orange);
}
.room-details__floorplan {
  margin-top: 20px;
}
.room-details__floorplan-img {
  width: 100%; border-radius: 10px;
  display: block;
}
.room-details__floorplan-img--hidden {
  display: none;
}
.room-details__variant-toggle {
  display: flex; gap: 10px;
  justify-content: center;
  margin-top: 15px;
}
.room-details__variant-btn {
  opacity: 0.5;
  transition: opacity 0.2s;
}
.room-details__variant-btn--active {
  opacity: 1;
}

/* --- Room Price --- */
.room-price {
  padding: 20px var(--content-padding) 30px;
  text-align: center;
}
.room-price__label {
  font-size: 15px; line-height: 22px;
  margin-bottom: 5px;
}
.room-price__amount {
  font-size: 36px; line-height: 40px;
  color: var(--color-brown);
}

/* --- Room Back --- */
.room-back {
  padding: 10px var(--content-padding) 50px;
  text-align: center;
}

/* ===== CPT: SINGLE STORY (geschichten) ===== */

.story-hero {
  padding: 0 0 10px;
}
.story-hero__image {
  width: 100%;
  height: 400px;
  overflow: hidden;
}
.story-hero__image img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.story-hero__content {
  padding: 25px var(--content-padding) 10px;
  text-align: center;
}
.story-hero__category {
  font-size: 12px; line-height: 17px;
  color: var(--color-orange);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.story-hero__title {
  font-size: 36px; line-height: 40px;
  color: var(--color-brown);
  margin-bottom: 10px;
}
.story-hero__subtitle {
  font-size: 19px; line-height: 28px;
  color: var(--color-brown);
  margin-bottom: 10px;
}
.story-hero__teaser {
  font-size: 15px; line-height: 22px;
  margin-bottom: 15px;
}
.story-hero__author {
  font-size: 12px; line-height: 17px;
  color: var(--color-orange);
}

/* Story Text Module */
.story-text {
  padding: 25px var(--content-padding);
}
.story-text__block {
  font-size: 15px; line-height: 22px;
  margin-bottom: 20px;
}
.story-text__block p { margin-bottom: 12px; }
.story-text__block p:first-child::first-letter {
  font-size: 36px; line-height: 1;
  float: left;
  margin-right: 5px;
  color: var(--color-orange);
  font-family: 'GT Alpina', 'Arsenal', Georgia, serif;
}
.story-text__quote {
  font-size: 24px; line-height: 31px;
  color: var(--color-orange);
  padding: 20px 0;
  border-top: 1px solid rgba(89,39,32,0.15);
  border-bottom: 1px solid rgba(89,39,32,0.15);
  margin-bottom: 20px;
}

/* Story Image Module */
.story-image {
  width: 100%;
  overflow: hidden;
  margin-bottom: 10px;
}
.story-image img {
  width: 100%; height: auto;
  display: block;
}

/* Story Titled Text Module */
.story-titled-text {
  padding: 20px var(--content-padding);
}
.story-titled-text__heading {
  font-size: 24px; line-height: 31px;
  color: var(--color-orange);
  margin-bottom: 10px;
}
.story-titled-text__body {
  font-size: 15px; line-height: 22px;
}
.story-titled-text__body p { margin-bottom: 10px; }

/* Story Offer Module */
.story-offer {
  padding: 20px var(--content-padding);
}
.story-offer__text {
  font-size: 15px; line-height: 22px;
  margin-bottom: 20px;
}
.story-offer__text p { margin-bottom: 10px; }
.story-offer__card {
  background: var(--color-brown);
  color: var(--color-cream);
  border-radius: 20px;
  padding: 25px 20px;
}
.story-offer__card-title {
  font-size: 24px; line-height: 31px;
  margin-bottom: 8px;
}
.story-offer__card-title a {
  color: var(--color-cream);
}
.story-offer__card-price {
  font-size: 19px; line-height: 28px;
  color: var(--color-orange);
  margin-bottom: 10px;
}
.story-offer__card .text-link {
  color: var(--color-orange);
}

/* Story Back */
.story-back {
  padding: 20px var(--content-padding) 50px;
  text-align: center;
}

/* ===== CPT: SINGLE OFFER ===== */

.offer-hero {
  padding: 0 0 10px;
}
.offer-hero__image {
  width: 100%;
  height: 350px;
  overflow: hidden;
}
.offer-hero__image img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.offer-hero__content {
  padding: 25px var(--content-padding) 10px;
  text-align: center;
}
.offer-hero__title {
  font-size: 36px; line-height: 40px;
  color: var(--color-brown);
  margin-bottom: 10px;
}
.offer-hero__price {
  font-size: 24px; line-height: 31px;
  color: var(--color-orange);
  margin-bottom: 15px;
}
.offer-hero__description {
  font-size: 15px; line-height: 22px;
}
.offer-hero__description p { margin-bottom: 10px; }

/* Offer Details */
.offer-details {
  padding: 20px var(--content-padding) 30px;
}
.offer-details__section {
  margin-bottom: 25px;
  padding-bottom: 25px;
  border-bottom: 1px solid rgba(89,39,32,0.15);
}
.offer-details__section:last-child {
  border-bottom: none;
}
.offer-details__heading {
  font-size: 24px; line-height: 31px;
  color: var(--color-orange);
  margin-bottom: 10px;
}
.offer-details__text {
  font-size: 15px; line-height: 22px;
}
.offer-details__text p { margin-bottom: 8px; }
.offer-details__text ul {
  padding-left: 20px;
  list-style: disc;
}
.offer-details__text li {
  font-size: 15px; line-height: 22px;
  margin-bottom: 5px;
}
.offer-details__download,
.offer-details__cta {
  text-align: center;
  padding-top: 10px;
}

/* Offer Back */
.offer-back {
  padding: 10px var(--content-padding) 50px;
  text-align: center;
}

/* ===== CPT: SINGLE STERN (team member) ===== */

.stern-profile {
  padding: 30px var(--content-padding) 20px;
  text-align: center;
}
.stern-profile__image {
  width: 200px; height: 200px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 25px;
}
.stern-profile__image img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.stern-profile__role {
  font-size: 12px; line-height: 17px;
  color: var(--color-orange);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.stern-profile__name {
  font-size: 36px; line-height: 40px;
  color: var(--color-brown);
  margin-bottom: 20px;
}
.stern-profile__quote {
  font-size: 19px; line-height: 28px;
  color: var(--color-brown);
  max-width: 353px;
  margin: 0 auto;
}
.stern-profile__quote p { margin-bottom: 10px; }

/* Stern Back */
.stern-back {
  padding: 20px var(--content-padding) 50px;
  text-align: center;
}

/* ===== CPT: ARCHIVE GESCHICHTEN ===== */

.archive-header {
  padding: 30px var(--content-padding) 20px;
  text-align: center;
}
.archive-header__title {
  font-size: 36px; line-height: 40px;
  color: var(--color-orange);
  margin-bottom: 8px;
}
.archive-header__subtitle {
  font-size: 15px; line-height: 22px;
}

/* Stories Grid */
.stories-grid {
  padding: 10px var(--content-padding) 30px;
  display: flex; flex-direction: column;
  gap: 25px;
}
.stories-grid__empty {
  font-size: 15px; line-height: 22px;
  text-align: center;
  padding: 40px 0;
}

/* Story Card */
.story-card {
  display: block;
  border-radius: 20px;
  overflow: hidden;
  background: white;
}
.story-card__image {
  width: 100%;
  height: 240px;
  overflow: hidden;
}
.story-card__image img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.story-card__body {
  padding: 18px 20px 22px;
}
.story-card__category {
  display: inline-block;
  font-size: 12px; line-height: 17px;
  color: var(--color-orange);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.story-card__title {
  font-size: 24px; line-height: 31px;
  color: var(--color-brown);
  margin-bottom: 5px;
}
.story-card__subtitle {
  font-size: 15px; line-height: 22px;
  color: var(--color-brown);
  margin-bottom: 5px;
}
.story-card__author {
  font-size: 12px; line-height: 17px;
  color: var(--color-orange);
}

/* Pagination */
.stories-pagination {
  padding: 20px var(--content-padding) 40px;
  display: flex; justify-content: center;
}
.stories-pagination ul {
  display: flex; gap: 5px;
  align-items: center;
}
.stories-pagination li {
  list-style: none;
}
.stories-pagination a,
.stories-pagination span {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 14px;
  color: var(--color-brown);
  transition: background 0.2s, color 0.2s;
}
.stories-pagination a:hover {
  background: var(--color-brown);
  color: var(--color-cream);
}
.stories-pagination .current {
  background: var(--color-orange);
  color: var(--color-brown);
  font-weight: 700;
}

/* ===== MODULE: faq ===== */
.faq { padding-inline: var(--content-padding); }
.faq__heading {
  font-size: 36px; line-height: 45px;
  color: var(--color-orange);
  margin-bottom: 30px;
}
.faq__list { display: flex; flex-direction: column; }
.faq__item {
  border-bottom: 1px solid var(--color-brown);
}
.faq__question {
  display: flex; align-items: flex-start; justify-content: space-between;
  width: 100%; padding: 25px 0;
  background: none; border: none; cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 19px; line-height: 28px; font-weight: 400;
  color: var(--color-brown);
  text-align: left;
}
.faq__question-text { flex: 1; padding-right: 20px; }
.faq__toggle {
  font-family: Arial, sans-serif;
  font-size: 28px; line-height: 28px;
  color: var(--color-brown);
  flex-shrink: 0;
  width: 28px; text-align: center;
  user-select: none;
}
.faq__answer {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  padding: 0 0;
}
.faq__item.is-open .faq__answer {
  max-height: 500px;
  padding: 0 0 25px;
}
.faq__answer p {
  font-size: 15px; line-height: 22px;
  color: var(--color-brown);
}

/* ===== COLOR SCHEMES =====
   Farbkombinationen pro Schema (statt nur Primärfarbe tauschen):
   - Orange: Text BRAUN auf orangener Surface; Pins gefüllt orange+weiß
   - Grün:   Text WEISS auf grüner Surface;   Pins outlined grün auf weiß
*/
:root {
  --scheme-accent: var(--color-orange);       /* Primärakzent (Headings, Links) */
  --scheme-surface: var(--color-orange);      /* Füllfarbe farbiger Surfaces */
  --scheme-on-surface: var(--color-brown);    /* Textfarbe auf farbiger Surface */
}
[data-color="green"] {
  --scheme-accent: var(--color-green);
  --scheme-surface: var(--color-green);
  --scheme-on-surface: #ffffff;
}

/* Grün-Schema: SVG-Surfaces, die im Orange-Schema orange sind, werden grün.
   --fill-0 wird von den inline-Subtract-SVGs als Füllung genutzt.
   Gezielt gescoped, damit braun-/weiss-Varianten ihre eigenen SVG-Farben behalten. */
[data-color="green"] .orientierung__card-shape,
[data-color="green"] .bild-text-card[data-variant="orange"] .bild-text-card__shape,
[data-color="green"] .aktionen-card[data-variant="orange"] .aktionen-card__bg,
[data-color="green"] .map-pin--dot {
  --fill-0: var(--color-green);
}

/* Headings / Akzente folgen dem Schema */
[data-color="green"] .intro-text__top,
[data-color="green"] .aktionen-slider__heading,
[data-color="green"] .hohepunkt-slider__title,
[data-color="green"] .zitate__heading,
[data-color="green"] .anfragen__heading,
[data-color="green"] .faq__heading {
  color: var(--color-green);
}
[data-color="green"] .module--footer {
  background: var(--color-green);
}
[data-color="green"] .btn--orange {
  background: var(--color-green);
}

/* --- Grün-Schema: Text auf farbiger Surface wird weiß statt braun --- */
[data-color="green"] .module--footer .footer,
[data-color="green"] .module--footer .footer__title,
[data-color="green"] .module--footer .footer__text,
[data-color="green"] .module--footer .text-link,
[data-color="green"] .module--footer .footer__contact p,
[data-color="green"] .module--footer .footer__links-col a,
[data-color="green"] .orientierung__card-body,
[data-color="green"] .orientierung__card-title,
[data-color="green"] .orientierung__card-text,
[data-color="green"] .aktionen-card[data-variant="orange"] .aktionen-card__body,
[data-color="green"] .bild-text-card[data-variant="orange"] .bild-text-card__body,
[data-color="green"] .bild-text-card[data-variant="orange"] .bild-text-card__title,
[data-color="green"] .bild-text-card[data-variant="orange"] .bild-text-card__text,
[data-color="green"] .bild-text-card[data-variant="orange"] .bild-text-card__body .text-link {
  color: #ffffff;
}

/* --- Grün-Schema: Map-Pins outlined statt gefüllt --- */
[data-color="green"] .map-pin--orange,
[data-color="green"] .map-pin--brown {
  background: #ffffff;
  color: var(--color-green);
  box-shadow: inset 0 0 0 1.5px var(--color-green);
}
[data-color="green"] .map-pin--dot span { color: var(--color-green); }

/* ===== RESPONSIVE: Mobile (alle Handys inkl. iPhone Pro Max 430px) =====
   Das Theme ist für 393px Mobile gebaut, moderne Handys sind aber breiter
   (iPhone 16 Pro 402px, Pro Max 430px). Bis 500px volle Viewport-Breite,
   damit keine weißen/cremefarbenen Ränder auftreten. */
@media (max-width: 500px) {
  :root { --page-width: 100%; }
  .hero-slider__image { left: 0; width: 100%; }
  .bild-gross { width: calc(100% - 2 * var(--content-padding)); }
  .zitate-slider, .zitate-slider__slide, .zitate { width: calc(100vw - 2 * var(--content-padding)); }
  .bild-text-card { width: calc(100vw - 2 * var(--content-padding)); }
}

/* ===== EDITOR COMPATIBILITY =====
   Das Theme ist auf 393px Mobile designed. Im Gutenberg-Editor ist der
   Canvas breiter, deshalb strecken sich Flex-Container und absolut
   positionierte Children. Constraint direkt auf .module und Module-Container
   wirkt in beiden Kontexten — im Frontend ist das body schon 393px,
   margin-inline:auto hat dort keinen Effekt. */
.module {
  width: 393px;
  max-width: 100%;
  margin-inline: auto;
}
.orientierung,
.hero-slider,
.zitate {
  max-width: 100%;
  margin-inline: auto;
}