:root{
  --hn-gold:        #d4b266;  /* Hauptgold: Überschriften, Buttons, Navigation */
  --hn-gold-border: #cfb26c;  /* Gold für Rahmen, Schatten, Tabellenköpfe      */
  --hn-dark:        #131312;  /* dunkler Hintergrund (Boxen, Navigation)        */
  --hn-dark-eco:    #020705;  /* Hintergrund Ökologie-Seite                     */
  --hn-green:       #03a93d;  /* „Direkt online buchen"                         */
  --hn-light:       #fdfdfe;
}

/* ---------- Schriften ---------- */
.handwriting{
  font-family:'Dancing Script', cursive;
  font-size:22px;
}
.handwriting_big h2{
  font-family:'Dancing Script', cursive;
  font-size:2rem;
  font-weight:300;
  line-height:2.5rem;
  text-align:left;
}
.dawning-of-a-new-day-regular {
  font-family: "Dawning of a New Day", cursive;
  font-weight: 400;
  font-style: normal;
}

/* ---------- Hero-Slider ---------- */
.o-hero-slider__slide--active .a-headline .u-line{
  font-family:'EB Garamond', serif;
  font-style:normal;
  font-weight:600;
  color:#fff;
}
.o-hero-slider__headline .a-headline{
  text-transform:none;
  font-size:clamp(2.5rem, 11vw, 15rem);
  letter-spacing:0.3rem;
}
.o-hero-slider__container .o-container__inner{
  max-width:1800px;
}
.heromini .o-hero-slider__slide .a-headline .u-line{
  opacity:1;
  color:#fff;
}

/* ---------- Big-Hero-Slider ---------- */
.o-big-hero-slider__headline{
  font-family:'EB Garamond', serif;
  font-style:normal;
  font-weight:600;
}

/* ---------- Überschriften ---------- */
h2{ color:var(--hn-gold); }
.g-no-padding-bottom h2{ margin-bottom:0; }

/* ---------- Boxen / Hintergründe ---------- */
.opaque-bg{
  background-color:var(--hn-dark); 
  border-radius:20px;
  padding:2rem;
  max-width: 100%;
}
.gold_bg{
  background-color:var(--hn-gold);
  padding-top:3em;
}
.gold_border_shadow{
  height:100%;
  padding:3rem;
  border:1px solid var(--hn-gold-border);
  border-radius:5px;
  box-shadow:1px -1px 20px 14px #0000003d;
  background:var(--hn-dark);
}
.darkerbgPadding{
  background:#00000040;
  padding:2rem;
  border-radius:20px;
}
body.oekologie_bg{ background:var(--hn-dark-eco); }

.o-footer.mod_footer {
    background-color: #131312; /* Ändert den Hintergrund (z. B. Dunkelgrau) */
}


/* ---------- Listen / Texte ---------- */
.a-edit-text li{ margin-bottom:1em; }

/* ---------- Tabellen ---------- */
.o-container__inner th{
  background:var(--hn-gold-border);
  font-size:12px;
  line-height:normal;
}
.o-text__content tr{ background:var(--hn-dark); }

/* ---------- Buttons / CTAs ---------- */
.a-cta{ padding:1em 1.3em; }
.button_fullwidth .a-cta{ width:100%; }
.button-full-width{ width:100%; }
.direktonlinebuchen{ background:var(--hn-green); }
.o-teaser-arrangement__button{
  background:none;
  color:var(--hn-light);
  border:2px solid var(--hn-gold);
}

/* ---------- Arrangement-Teaser ---------- */
.o-teaser-arrangement{
  background:var(--hn-dark);
  padding:1rem;
  word-break:break-word;
  border-radius:20px;
}

/* ---------- Slider: Bilder & Pfeile ---------- */
.swiper-slide img{ border-radius:20px; }
.o-slider__next{ left:101%; }
.o-slider__prev{ right:101%; }

/* ---------- Zimmer & Suiten (d21) ---------- */
#d21-widgets-rooms{ z-index:1; }
.zimmersuiten .d21-rate-description{ color:#000; }
.zimmersuiten .o-teaser-image .a-headline--h3{
  font-weight:bold;
  color:#fff;
}

#d21-roomList {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.d21-RoomList[d21-widget-uuid="5a9f2fa8-7da2-4247-a464-e5ecea1afec1"] {
  width: 100% !important;
  max-width: 100% !important;
}

/* Falls DIRS21 als iframe einbettet: iframe vollbreit + randlos */
#d21-roomList iframe {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  border: 0;
}

/* ---------- Bilder mit Rahmen + Schatten ---------- */
.imgbordershadow img{
  border:5px solid var(--hn-gold-border);
  box-shadow:0 1px 13px 3px #000;
  /* MOBIL: nie breiter als der Bildschirm */
  max-width:100%;
  height:auto;
}

/* ---------- Navigation ---------- */
.o-navigation__wrap{ background:var(--hn-dark) !important; }
.ce_accordion .accordion{ background:var(--hn-dark) !important; }

/* ---------- Footer ---------- */
.o-footer__nav .o-footer__level--1{ text-align:center }


/* ---------- Schnellnavigation / Abstände ---------- */
#schnellnavigation .o-row > .o-col{ margin-bottom:0; }
._nomarginbottom .o-col{ margin-bottom:0; }

/* =========================================================
   Mobil  (max-width: 52.8025em ≈ 845px)
   ========================================================= */
@media (max-width:52.8025em){

  /* Sicherheitsnetz gegen horizontales Scrollen (bricht kein sticky) */
  html{ overflow-x:clip; }

  /* Hero-Überschrift: enger laufende Buchstaben, damit nichts überläuft */
  .o-hero-slider__headline .a-headline{ letter-spacing:0.12rem; }
  .o-hero-slider__slide--active .a-headline .u-line{ font-size:1.75rem; }

  .button_fullwidth{ padding:0 1rem; }

  /* Boxen: kleinere Innenabstände, damit auf dem Handy mehr Platz bleibt */
  .opaque-bg{ padding:1.25rem; }
  .gold_border_shadow{ padding:1.5rem; }
  .darkerbgPadding{ padding:1.25rem; }
  .gold_bg{ padding-top:2em; }

  
  .o-slider__next{ left:auto; right:6px; }
  .o-slider__prev{ right:auto; left:6px; }

 
  .o-text__content table{
    display:block;
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .o-history__item{ flex-direction:column; }
  .o-history img{ max-width:100%; }

  .o-navigation__level--1 > li > a{
    display:block;
    width:100%;
    padding:0.5rem;
    font-family:'EB Garamond', serif;
    font-size:1.5rem;
    line-height:1.2em;
    color:var(--hn-gold);
    background:#00000017;
    border-left:3px solid var(--hn-gold);
  }
  .o-navigation__level--2 > li > a{
    display:block;
    padding:0.6rem 1rem;
    font-size:1rem;
    line-height:1em;
    border-bottom:1px solid #1f1f20;
  }
}

/* ===============================
   FULLSCREEN HERO (HARTE VARIANTE)
   =============================== */

/* Slider + Slides auf volle Bildschirmhöhe zwingen */
.o-big-hero-slider,
.o-big-hero-slider__slide {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
}

.hn-teaser-grid {
    display: grid;
    gap: 80px;
}

.hn-zg{
  overflow: visible !important;
}
/* ===============================
   Home)
   =============================== */
.hn-zg__grid{
  display:grid;
  grid-template-columns: 1fr clamp(240px,26vw,360px) 1fr;
  align-items:start;
}

.hn-zg__center{
  display:flex;
  justify-content:center;
}

.hn-zg__center-inner{
  position: sticky;
  top: 120px;
  text-align:center;
}
/* Styles.css */