/* ==========================================================
   S'Dörfl – Direktbuchung V2
   Ziel: ruhiger, hochwertiger, alpiner Look
   Basis: reale Klassen der ZimmerSoftware-Seite
   Keine Änderung an Buchungslogik oder JS
   ========================================================== */

:root {
  --sd-green: #394832;
  --sd-green-dark: #2d3929;
  --sd-green-soft: #596650;
  --sd-brown: #775b40;
  --sd-cream: #f4efe5;
  --sd-cream-light: #faf8f3;
  --sd-white: #ffffff;
  --sd-text: #292722;
  --sd-muted: #706b63;
  --sd-border: #ded7cb;
  --sd-radius: 8px;
  --sd-shadow: 0 10px 30px rgba(42, 37, 29, .10);
}

/* ---------- Grunddesign ---------- */

html {
  scroll-behavior: smooth;
}

body {
  background: var(--sd-cream-light) !important;
  color: var(--sd-text) !important;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif !important;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--sd-text);
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 500 !important;
  line-height: 1.2;
  letter-spacing: -.015em;
}

a {
  color: var(--sd-green);
}

a:hover,
a:focus {
  color: var(--sd-green-dark);
}


/* ---------- Oberer Header ---------- */

header {
  background: var(--sd-white) !important;
  border-bottom: 1px solid rgba(57, 72, 50, .12);
}

/* Der auffällige Standard-Farbbalken unter dem Header */
header + .clx,
body > .clx {
  border-color: var(--sd-green) !important;
}


/* ---------- Hero / Titelbild ---------- */

.homeBanner.bannerBg {
  position: relative;
  background-position: center center !important;
  background-size: cover !important;
}

/* dunkler Verlauf für bessere Lesbarkeit */
.homeBanner.bannerBg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(18, 20, 16, .50) 0%,
      rgba(18, 20, 16, .31) 48%,
      rgba(18, 20, 16, .13) 100%
    );
  pointer-events: none;
  z-index: 0;
}

.homeBanner .bookRoom {
  position: relative;
  z-index: 1;
}

/* Textbox im Hero */
.bookRoom.overH.overFuns {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

.bookRoom h2,
.homeBanner h2 {
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .34);
  font-size: clamp(27px, 3.2vw, 46px) !important;
  line-height: 1.16 !important;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}


/* ---------- Suchmaske ---------- */

.bookRoom .s_10_container {
  max-width: 1050px;
  margin-left: auto;
  margin-right: auto;
}

.bookRoom label,
.bookRoom .relative.dpArea,
.bookRoom .rightAreaDD {
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}

/* Eingabefelder nur im Buchungsbereich */
.bookRoom input:not([type="submit"]):not([type="hidden"]),
.bookRoom select {
  min-height: 46px !important;
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  border-radius: 5px !important;
  color: var(--sd-text) !important;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .10);
}

.bookRoom input:not([type="submit"]):not([type="hidden"]):focus,
.bookRoom select:focus {
  outline: none !important;
  border-color: var(--sd-green) !important;
  box-shadow: 0 0 0 3px rgba(57, 72, 50, .18) !important;
}


/* ---------- Direktbuchungsbutton ---------- */

input.submitBtn {
  min-height: 46px !important;
  padding: 11px 22px !important;
  border: 1px solid var(--sd-green) !important;
  border-radius: 5px !important;
  background: var(--sd-green) !important;
  color: #fff !important;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .015em;
  cursor: pointer;
  box-shadow: 0 5px 16px rgba(28, 40, 25, .24) !important;
  transition:
    background-color .2s ease,
    border-color .2s ease,
    transform .15s ease,
    box-shadow .2s ease;
}

input.submitBtn:hover,
input.submitBtn:focus {
  background: var(--sd-green-dark) !important;
  border-color: var(--sd-green-dark) !important;
  box-shadow: 0 7px 20px rgba(28, 40, 25, .28) !important;
}

input.submitBtn:active {
  transform: translateY(1px);
}


/* ---------- Bereich unter dem Hero ---------- */

/* ZimmerSoftware nutzt lightBg/full für den Unterkunftsbereich */
section.p-v-30.lightBg.full {
  background: var(--sd-cream) !important;
  padding-top: 34px !important;
  padding-bottom: 42px !important;
}

section.p-v-30.lightBg.full .container.whiteBg {
  background: transparent !important;
}


/* ---------- Unterkunftskarten ---------- */

section.p-v-30.lightBg.full .clx_fieldset {
  background: var(--sd-white) !important;
  border: 1px solid var(--sd-border) !important;
  border-radius: var(--sd-radius) !important;
  box-shadow: var(--sd-shadow) !important;
  margin-bottom: 28px !important;
  padding: 18px !important;
  overflow: hidden;
}

/* Innerer Wrapper */
.clx_fieldset .dFlex.tableWrap {
  gap: 22px;
}

/* Unterkunftsbilder */
.clx_fieldset img {
  border-radius: 6px !important;
  max-width: 100%;
  height: auto;
}

/* Unterkunftstitel */
.clx_fieldset h2,
.clx_fieldset h3,
.clx_fieldset h4,
.clx_fieldset a {
  color: var(--sd-green) !important;
}

.clx_fieldset h2,
.clx_fieldset h3,
.clx_fieldset h4 {
  margin-top: 0;
  margin-bottom: 12px;
}

/* Beschreibung */
.clx_fieldset p {
  color: var(--sd-text) !important;
  line-height: 1.72 !important;
}

/* Listen in Detailtexten */
.clx_fieldset ul {
  padding-left: 1.2rem;
}

.clx_fieldset li {
  margin-bottom: .3rem;
}


/* ---------- Allgemeine Buttons innerhalb der Unterkunftsbereiche ---------- */

.clx_fieldset button,
.clx_fieldset input[type="button"],
.clx_fieldset input[type="submit"],
.clx_fieldset .btn,
.clx_fieldset .button {
  border: 1px solid var(--sd-green) !important;
  border-radius: 5px !important;
  background: var(--sd-green) !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.clx_fieldset button:hover,
.clx_fieldset input[type="button"]:hover,
.clx_fieldset input[type="submit"]:hover,
.clx_fieldset .btn:hover,
.clx_fieldset .button:hover {
  background: var(--sd-green-dark) !important;
  border-color: var(--sd-green-dark) !important;
}


/* ---------- Tabellen ---------- */

table {
  border-color: var(--sd-border) !important;
}

td,
th {
  border-color: var(--sd-border) !important;
}

th {
  color: var(--sd-text) !important;
  font-weight: 600;
}


/* ---------- Allgemeine Formulare außerhalb des Hero ---------- */

input,
select,
textarea {
  box-sizing: border-box;
}

textarea {
  border: 1px solid var(--sd-border);
  border-radius: 5px;
}


/* ---------- Tastatur-Fokus ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(57, 72, 50, .28);
  outline-offset: 2px;
}


/* ---------- Mobil ---------- */

@media (max-width: 767px) {

  body {
    font-size: 15px;
  }

  .homeBanner.bannerBg {
    background-position: center center !important;
  }

  .homeBanner.bannerBg::before {
    background: rgba(18, 20, 16, .43);
  }

  .bookRoom h2,
  .homeBanner h2 {
    font-size: 27px !important;
    line-height: 1.18 !important;
    padding-left: 14px;
    padding-right: 14px;
  }

  .bookRoom .s_10_container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .bookRoom input:not([type="hidden"]),
  .bookRoom select,
  input.submitBtn {
    min-height: 48px !important;
  }

  input.submitBtn {
    width: 100% !important;
    margin-top: 8px;
  }

  section.p-v-30.lightBg.full {
    padding: 20px 10px 30px !important;
  }

  section.p-v-30.lightBg.full .clx_fieldset {
    padding: 12px !important;
    margin-bottom: 18px !important;
    border-radius: 7px !important;
    box-shadow: 0 6px 20px rgba(42, 37, 29, .08) !important;
  }

  .clx_fieldset .dFlex.tableWrap {
    gap: 14px;
  }
}


/* ---------- Druck / Bestätigung ---------- */

@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }

  .homeBanner.bannerBg::before {
    display: none;
  }

  section.p-v-30.lightBg.full .clx_fieldset {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }
}


/* ==========================================================
   S'Dörfl V2.1 – gezielte Feinabstimmung
   ========================================================== */

/* Standard-Titelbalken der Booking Engine:
   Türkis entfernen und einen ruhigen Übergang schaffen. */
.titlebarcontainer,
.titlebarcontainer .container,
.titlebarcontainer .row,
.titlebarcontainer .titlebar,
.titlebarcontainer .full.relative {
  background: #f4efe5 !important;
}

.titlebarcontainer {
  border: 0 !important;
  min-height: 20px !important;
}

.titlebarcontainer .titlebar {
  min-height: 20px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Hero-Headline kompakter als in V2 */
.bookRoom h2,
.homeBanner h2 {
  font-size: clamp(25px, 2.45vw, 36px) !important;
  line-height: 1.18 !important;
  max-width: 850px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 18px !important;
}

/* Suchbereich als zusammengehörige Buchungsbox */
.bookRoom .s_10_container {
  max-width: 1040px !important;
  padding: 14px 18px 16px !important;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  background: rgba(22, 27, 20, .42);
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
}

/* Beschriftungen über den Feldern */
.bookRoom .s_10_container label {
  color: #fff !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
}

/* Suchfelder etwas ruhiger */
.bookRoom input:not([type="submit"]):not([type="hidden"]),
.bookRoom select {
  background: rgba(255,255,255,.97) !important;
  border-color: rgba(255,255,255,.7) !important;
}

/* CTA klarer hervorheben */
input.submitBtn {
  background: #394832 !important;
  border-color: #394832 !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

input.submitBtn:hover,
input.submitBtn:focus {
  background: #2d3929 !important;
  border-color: #2d3929 !important;
}

/* Unterkunftsbereich etwas näher an den Hero ziehen */
section.p-v-30.lightBg.full {
  padding-top: 28px !important;
}

/* Karten: feiner und weniger 'Software-Box' */
section.p-v-30.lightBg.full .clx_fieldset {
  border: 1px solid #e1dbd0 !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(42,37,29,.07) !important;
}

/* Mobile Feinabstimmung */
@media (max-width: 767px) {
  .titlebarcontainer,
  .titlebarcontainer .container,
  .titlebarcontainer .row,
  .titlebarcontainer .titlebar,
  .titlebarcontainer .full.relative {
    min-height: 10px !important;
  }

  .bookRoom h2,
  .homeBanner h2 {
    font-size: 25px !important;
    max-width: 92% !important;
    margin-bottom: 14px !important;
  }

  .bookRoom .s_10_container {
    width: calc(100% - 20px) !important;
    padding: 13px !important;
    border-radius: 7px !important;
    background: rgba(22,27,20,.50);
  }
}


/* ==========================================================
   S'Dörfl V2.2 – mobile Unterkunfts-/Ergebnisseiten
   ========================================================== */

@media (max-width: 767px) {

  /* Unterkunftstitel: gut lesbar statt sehr hellem Creme */
  .clx_fieldset h1,
  .clx_fieldset h2,
  .clx_fieldset h3,
  .clx_fieldset h4,
  .clx_fieldset h5,
  .clx_fieldset a,
  fieldset h1,
  fieldset h2,
  fieldset h3,
  fieldset h4 {
    color: #394832 !important;
    text-shadow: none !important;
  }

  /* Große Zimmer-/Appartement-Titel kompakter */
  .clx_fieldset h2,
  .clx_fieldset h3,
  fieldset h2,
  fieldset h3 {
    font-size: 24px !important;
    line-height: 1.25 !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
  }

  /* Beschreibung auf dem Smartphone deutlich ruhiger */
  .clx_fieldset p,
  .clx_fieldset li,
  .clx_fieldset div,
  fieldset p,
  fieldset li {
    font-size: 17px !important;
    line-height: 1.55 !important;
  }

  /* Lange Ausstattungspunkte kompakter darstellen */
  .clx_fieldset ul,
  fieldset ul {
    padding-left: 1.35rem !important;
    margin-top: 8px !important;
    margin-bottom: 18px !important;
  }

  .clx_fieldset li,
  fieldset li {
    margin-bottom: 7px !important;
  }

  /* Bilder mobil randloser und großzügig */
  .clx_fieldset img,
  fieldset img {
    border-radius: 4px !important;
  }

  /* Karten auf Detail-/Ergebnisseiten weniger wuchtig */
  section.p-v-30.lightBg.full .clx_fieldset {
    padding: 10px !important;
    border-color: #ded7cb !important;
  }

  /* Buttons */
  .clx_fieldset button,
  .clx_fieldset input[type="button"],
  .clx_fieldset input[type="submit"],
  .clx_fieldset .btn,
  .clx_fieldset .button {
    min-height: 46px !important;
    font-size: 16px !important;
  }
}


/* ==========================================================
   S'Dörfl V2.3 – Buchungsformular Feinschliff
   ========================================================== */

/* Beschriftungen im Such-/Buchungsformular */
.bookRoom label,
.bookRoom .label,
.bookRoom .dpArea,
.bookRoom .rightAreaDD {
  color: #292722 !important;
  text-shadow: none !important;
}

/* Eingabefelder: warm, neutral und passend zum S'Dörfl-Auftritt */
.bookRoom input:not([type="submit"]):not([type="hidden"]),
.bookRoom select,
.bookRoom textarea {
  background: #ffffff !important;
  color: #292722 !important;
  border: 1px solid #ded7cb !important;
  box-shadow: none !important;
}

/* Fokuszustand */
.bookRoom input:not([type="submit"]):not([type="hidden"]):focus,
.bookRoom select:focus,
.bookRoom textarea:focus {
  border-color: #394832 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(57,72,50,.12) !important;
}

/* Suchbox selbst nicht mehr dunkel hinterlegen */
.bookRoom .s_10_container {
  background: rgba(250,248,243,.94) !important;
  border: 1px solid #ded7cb !important;
  box-shadow: 0 8px 24px rgba(42,39,34,.08) !important;
}

/* Hauptbutton */
.bookRoom input.submitBtn,
.bookRoom .submitBtn {
  background: #394832 !important;
  color: #ffffff !important;
  border-color: #394832 !important;
}

.bookRoom input.submitBtn:hover,
.bookRoom input.submitBtn:focus,
.bookRoom .submitBtn:hover {
  background: #596650 !important;
  border-color: #596650 !important;
}

/* Mobile: kompaktere Abstände */
@media (max-width: 767px) {
  .bookRoom .s_10_container {
    padding: 12px 14px 14px !important;
  }

  .bookRoom label,
  .bookRoom .label {
    font-size: 16px !important;
    line-height: 1.25 !important;
  }

  .bookRoom input:not([type="submit"]):not([type="hidden"]),
  .bookRoom select {
    min-height: 44px !important;
  }
}


/* ==========================================================
   V2.4 – basiert ausschließlich auf V2.3
   Einzige Änderung: Hero-Text auf Smartphones kleiner.
   Keine Änderung an Balken, Hintergrund oder Farben.
   ========================================================== */

@media (max-width: 767px) {
  .homeBanner .bookRoom > h2,
  .bookRoom h2,
  .homeBanner h2 {
    font-size: 21px !important;
    line-height: 1.22 !important;
  }
}

/* ==========================================================
   V2.5 – Feinschliff auf Basis V2.4
   Nur: Hero-Text etwas kleiner + Formularbeschriftungen grün.
   Balken, Hintergrund und übriges Layout bleiben unverändert.
   ========================================================== */

/* Formularbeschriftungen im hellen Buchungsfeld */
.bookRoom .s_10_container label,
.bookRoom .s_10_container .label,
.bookRoom .s_10_container .dpArea > label,
.bookRoom .s_10_container .rightAreaDD > label {
  color: #394832 !important;
  text-shadow: none !important;
}

@media (max-width: 767px) {
  /* Hero-Überschrift nur minimal kleiner */
  .homeBanner .bookRoom > h2,
  .bookRoom h2,
  .homeBanner h2 {
    font-size: 19px !important;
    line-height: 1.24 !important;
  }

  /* Mobile Formularbeschriftungen */
  .bookRoom .s_10_container label,
  .bookRoom .s_10_container .label {
    color: #394832 !important;
  }
}

/* ==========================================================
   V2.6 – Mobile Feinschliff Unterkunftskarten
   Basis: V2.5. Header, Balken, Hero und Buchungsformular
   werden nicht verändert.
   ========================================================== */

@media (max-width: 767px) {
  /* Beschreibung/Ausstattung kompakter und besser lesbar */
  section.p-v-30.lightBg.full .clx_fieldset p,
  section.p-v-30.lightBg.full .clx_fieldset li {
    line-height: 1.42 !important;
  }

  section.p-v-30.lightBg.full .clx_fieldset ul {
    margin-top: 4px !important;
    margin-bottom: 8px !important;
    padding-left: 20px !important;
  }

  section.p-v-30.lightBg.full .clx_fieldset li {
    margin-bottom: 1px !important;
  }

  /* Zwischenüberschriften wie Ausstattung / Küchenausstattung / TV & Internet */
  section.p-v-30.lightBg.full .clx_fieldset p strong,
  section.p-v-30.lightBg.full .clx_fieldset b {
    color: #394832 !important;
    font-weight: 700 !important;
  }

  /* Preiszeilen optisch etwas klarer trennen */
  section.p-v-30.lightBg.full .tableWrap {
    margin-top: 10px !important;
    padding-top: 8px !important;
  }

  section.p-v-30.lightBg.full .tableWrap > * {
    border-bottom-color: #ded7cb !important;
  }
}

/* V2.7 – Suchformular nach der Suche: Beschriftungen dunkelgrün */
.searchListWrap .s_20_container span,
.searchListWrap .rightDd > span,
.searchListWrap .rightAreaDd span {
    color: #394832 !important;
}