/*
Theme Name:     Farnsburg
Theme URI:      n/a
Template:       kadence
Author:         Masterhomepage GmbH
Author URI:     n/a
Description:    Child theme for Farnsburg
Version:        34
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
*/

/* ================================================================
   FARNSBURG — style.css
   Tokens: Terra/Dunkel/Sand/Papier. Schrift: Headings = Prata,
   Basis = Mulish, Eyebrow/Label = Mulish (= h6).
   ================================================================ */

:root {

  /* --- Marke (4 aktive Farben) --- */
  --brand-primary:        #C2724E;   /* Terrakotta – Buttons, Links, Akzent */
  --brand-primary-hover:  #A85E3C;   /* Terrakotta dunkel – Hover           */
  --brand-accent:         var(--brand-primary); /* Emphasis (Border, Hover-Heading) */
  --brand-sand:           #C9B08A;   /* Sand – die EINE Akzent-Sektion      */
  --brand-light-bg:       #FCF7F1;   /* Elementor "Lighter Background" · Kadence palette7 */
  --brand-paper-warm:     #F3ECE1;   /* Papier warm – nur via .section-light (kein Palette-Slot) */
  --brand-dark-bg:        #242120;   /* Dunkel – Header/Footer/CTA          */
  --surface-card:         #FFFFFF;   /* Karten (Kontrast zu Papier)         */

  /* --- Text (= Elementor Global Colors) --- */
  --text-dark:       #242120;        /* "Strongest text"                    */
  --text-body:       #242120;        /* "Strong Text"                       */
  --text-muted:      #4D4D4C;        /* "Medium text" · palette4            */
  --text-subtle:     #B4A892;        /* "Subtle Text" · palette5 (Placeholder) */

  /* --- Layout --- */
  --content-max:    1300px;
  --content-width:  1300px;

  --radius:          8px;            /* Karten / Bildflächen                */
  --radius-sm:       4px;            /* Buttons                             */

  /* --- Shadow (warm getönt, dezent) --- */
  --shadow:        0 1px 3px rgba(36,33,32,.06), 0 1px 2px rgba(36,33,32,.04);
  --shadow-hover:  0 4px 12px rgba(36,33,32,.06), 0 1px 2px rgba(36,33,32,.04);

  /* --- Border (= Elementor Global "Border", kein Kadence-Slot) --- */
  --border-color:   #C1BFB9;
  --border-light:   #C1BFB9;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



/* ===== Responsive Padding (horizontal) ===== */
.responsive-padding {
  padding-left: clamp(30px, 5.5vw, 150px) !important;
  padding-right: clamp(30px, 5.5vw, 150px) !important;
  box-sizing: border-box;
}
.padding-left-only {
  padding-left: clamp(30px, 5.5vw, 150px) !important;
  padding-right: 0;
  box-sizing: border-box;
}
.padding-right-only {
  padding-left: 0;
  padding-right: clamp(30px, 5.5vw, 150px) !important;
  box-sizing: border-box;
}

/* ===== Vertikal-Padding + Gap auf Tablet/Mobile =====
   Hängt an .responsive-padding (sitzt ohnehin auf JEDER Sektion). Desktop unberührt
   (Vertikal-Padding/Gap pro Container in Elementor). Übersteuert ab Tablet:
     Tablet ≤1024px: top/bottom 50px, Gap 30px
     Mobile ≤767px:  top/bottom 30px, Gap 30px

   WICHTIG — richtige Ebene:
   Boxed-Container (.e-con-boxed): Elementor legt Vertikal-Padding UND Grid/Gap auf das
   innere .e-con-inner. Darum DORT überschreiben — NICHT am äusseren .responsive-padding,
   sonst addiert sich aussen + innen zu doppeltem Padding.
   Full-Width-Container (.e-con-full): kein .e-con-inner → direkt auf den Container.
   Horizontal-Padding (clamp) bleibt unverändert am äusseren .responsive-padding.
   Shorthand "gap !important" schlägt Elementors longhand column-gap/row-gap. */
@media (max-width: 1024px) {
  .responsive-padding > .e-con-inner {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
    gap: 30px !important;
  }
  .responsive-padding.e-con-full {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
    gap: 30px !important;
  }
}
@media (max-width: 767px) {
  .responsive-padding > .e-con-inner {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
    gap: 30px !important;
  }
  .responsive-padding.e-con-full {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
    gap: 30px !important;
  }
}




/* ===== Eyebrow = h6 (siehe Heading-Block weiter unten) ===== */

/* ===== generisches kleines Label (Bestand) ===== */
.label-small {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}

.text-muted {
  color: var(--text-muted) !important;
}



/* ===== Karten ===== */
/* card-hover ändert im Ruhezustand NICHTS am Design (kein Radius, kein
   Default-Shadow) — nur das Hover-Verhalten: Anheben + weicher Schatten. */
.card-hover {
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
/* Hover-Regel zusätzlich Container-qualifiziert — sonst greift sie auf
   Elementor-Containern nicht (deren Styles haben höhere Specificity). */
.card-hover:hover,
.elementor-element[data-element_type="container"].card-hover:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}
.card-hover:hover .elementor-heading-title,
.elementor-element[data-element_type="container"].card-hover:hover .elementor-heading-title {
  color: var(--brand-accent);
}

.accent-border-left {
  border-left: 3px solid var(--brand-accent);
  padding-left: 16px;
}

/* ===== Raum-Spezifikations-Tabelle (JetEngine Dynamic Repeater, Flex-Zeilen) =====
   Repeater-Subfelder linke_spalte / rechte_spalte. Item HTML Tag = div,
   Item Format = <span class="room-spec-key">%linke_spalte%</span><span class="room-spec-val">%rechte_spalte%</span>.
   Border sitzt auf der ZEILE (durchgehende Linie) — kein Cell-Split mehr.
   __items zwingt die Zeilen in eine Spalte (JetEngine-Default ist horizontal). */
.room-specs {
  margin-top: 19px;
}
.room-specs .jet-listing-dynamic-repeater__items {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.room-specs .jet-listing-dynamic-repeater__delimiter {
  display: none;
}
.room-specs .jet-listing-dynamic-repeater__item {
  display: flex;
  align-items: baseline;
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid #C1BFB9;
}
.room-specs .jet-listing-dynamic-repeater__item:first-child {
  border-top: 1px solid #C1BFB9;
}
.room-spec-key {
  flex: 0 0 144px;
  font-family: "Mulish", sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dark);
  white-space: nowrap;
}
.room-spec-val {
  flex: 1 1 auto;
  font-size: 16px;
  color: var(--text-body);
}
@media (max-width: 767px) {
  .room-spec-key { flex-basis: 112px; }
}



/* ===== Sektions-Hintergründe ===== */
/* Default-Seitenhintergrund = Papier (Kadence Base) → keine Klasse nötig */
.section-light {                       /* warmer Papier-Block, hebt sich vom Seiten-Papier ab (z.B. Event-Planung) */
  background-color: var(--brand-paper-warm) !important;
}

.section-sand {
  background-color: var(--brand-sand) !important;
  color: var(--text-dark);
}

.section-dark {
  background-color: var(--brand-dark-bg) !important;
  color: #fff;
}
/* Headings auf dunklem Grund weiss — h6 (Eyebrow) AUSGENOMMEN, damit dessen Farbe in Elementor umschaltbar bleibt */
.section-dark h1.elementor-heading-title,
.section-dark h2.elementor-heading-title,
.section-dark h3.elementor-heading-title,
.section-dark h4.elementor-heading-title,
.section-dark h5.elementor-heading-title {
  color: #fff !important;
}
.section-dark .elementor-widget-text-editor {
  color: rgba(255,255,255,0.82) !important;
}



/* ===== Button-Shadows global entfernen + Focus ===== */
.elementor-button,
.elementor-button:hover,
.elementor-button:focus,
.elementor-button:active,
.wp-block-button__link,
.wp-block-button__link:hover,
.kb-button,
.kb-button:hover,
button,
button:hover,
input[type="submit"],
input[type="submit"]:hover,
.header-cta,
.header-cta:hover {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  filter: none !important;
}

.elementor-button:focus-visible,
.header-cta:focus-visible,
button:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  box-shadow: none !important;
}


/* ===== Heading-Family zentral = Prata (h1–h5; h6 = Eyebrow/Mulish, separat unten) =====
   Family hier gesetzt (nicht nur Kadence), damit Prata fix ist.
   Hinweis: Prata hat nur einen Schnitt (400) → font-weight unten ohne sichtbare Wirkung. */
h1, h2, h3, h4, h5,
h1.elementor-heading-title, h2.elementor-heading-title, h3.elementor-heading-title,
h4.elementor-heading-title, h5.elementor-heading-title {
  font-family: "Prata", Georgia, serif !important;
}


/* farnsburg-headings-responsive · in style.css integriert
   Heading-System H1–H5: font-size + font-weight + line-height, alle Breakpoints.
   Überschreibt Kadence-Customizer UND Elementor (Tag-Selektor + !important) → px = px, keine Skalierungsfrage.
   Breakpoints = Kadence/Elementor Default: Tablet ≤1024px, Mobile ≤767px (desktop-first).
   h6 ist KEINE Skalen-Grösse mehr, sondern die Eyebrow (Mulish) → siehe eigener Block unten.

            Desktop  Tablet  Mobile   Weight  LineHeight
   h1        70       54      40       500     1.1   (Hero)
   h2        42       34      28       500     1.1   (Sektion)
   h3        30       26      24       500     1.15  (grosse Karte / Raumname)
   h4        22       20      18       500     1.2   (kleine Karte / Presse)
   h5        18       17      16       600     1.4
   base      16 auf allen Medias. */

/* ===== BASE / DESKTOP ===== */
h1, h1.elementor-heading-title { font-size: 70px !important; font-weight: 500 !important; line-height: 1.1 !important; }
h2, h2.elementor-heading-title { font-size: 42px !important; font-weight: 500 !important; line-height: 1.2 !important; }
h3, h3.elementor-heading-title { font-size: 30px !important; font-weight: 500 !important; line-height: 1.3 !important; }
h4, h4.elementor-heading-title { font-size: 20px !important; font-weight: 500 !important; line-height: 1.4 !important; }
h5, h5.elementor-heading-title { font-size: 18px !important; font-weight: 600 !important; line-height: 1.4 !important; }
p.elementor-heading-title { line-height: 1.6 !important; }

/* ===== TABLET (≤1024px) — nur font-size ===== */
@media (max-width: 1024px) {
  h1, h1.elementor-heading-title { font-size: 54px !important; }
  h2, h2.elementor-heading-title { font-size: 34px !important; }
  h3, h3.elementor-heading-title { font-size: 26px !important; }
  h4, h4.elementor-heading-title { font-size: 20px !important; }
  h5, h5.elementor-heading-title { font-size: 17px !important; }
}

/* ===== MOBILE (≤767px) — nur font-size ===== */
@media (max-width: 767px) {
  h1, h1.elementor-heading-title { font-size: 40px !important; }
  h2, h2.elementor-heading-title { font-size: 28px !important; }
  h3, h3.elementor-heading-title { font-size: 24px !important; }
  h4, h4.elementor-heading-title { font-size: 18px !important; }
  h5, h5.elementor-heading-title { font-size: 16px !important; }
}


/* ===== EYEBROW = h6 =====
   Mulish, uppercase, gesperrt. Optik (Family/Grösse/Weight/Transform/Spacing) per !important fix.
   FARBE bewusst OHNE !important → in Elementor pro Heading-Widget umschaltbar (Default Terra, auf Dunkel z.B. Sand). */
h6,
h6.elementor-heading-title {
  font-family: "Mulish", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  line-height: 1.4 !important;
}
h6 { color: var(--brand-primary); }


/* ===== Subpage-Hero-Titel =====
   Opt-in-Klasse für die H1 im Unterseiten-Hero. ÄNDERT DIE SKALA NICHT –
   nur dort kleiner, wo die Klasse gesetzt ist (h2–h6 bleiben unberührt).
   In Elementor: dem H1-Heading-Widget die CSS-Klasse "hero-title" geben.
   Vier feste Stufen — kein Fluid. Der Desktop-Wert (44) deckt den MacBook-Bereich
   1025–1599px ab; ab 1600px (Full HD / externe Monitore) hoch auf 52, sonst wirkt
   die H1 in der breiteren Spalte zu klein. Bleibt auf jedem Breakpoint ÜBER h2 → Hierarchie h1 > h2 erhalten.
            ≥1600  Desktop  Tablet  Mobile   (h2 zum Vergleich: 42 / 42 / 34 / 28)
   hero-title  52      44      38      30   */
/* Klasse "hero-title" kommt aus Elementor "CSS-Klassen" → sitzt am Widget-Wrapper.
   Darum die H1 als Nachfahre ansprechen (.hero-title .elementor-heading-title),
   zusätzlich der Fall, falls die Klasse mal direkt an der H1 hängt. */
.hero-title.elementor-heading-title,
.hero-title .elementor-heading-title,
h1.hero-title { font-size: 44px !important; line-height: 1.12 !important; }
@media (min-width: 1600px) {
  .hero-title.elementor-heading-title,
  .hero-title .elementor-heading-title,
  h1.hero-title { font-size: 52px !important; }
}
@media (max-width: 1024px) {
  .hero-title.elementor-heading-title,
  .hero-title .elementor-heading-title,
  h1.hero-title { font-size: 38px !important; }
}
@media (max-width: 767px) {
  .hero-title.elementor-heading-title,
  .hero-title .elementor-heading-title,
  h1.hero-title { font-size: 30px !important; }
}


p {
  display: block;
  margin-block-start: 0em;
  margin-block-end: 0.5em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  unicode-bidi: isolate;
}

/* Leeres room-specs nimmt keinen Platz ein */
.room-specs:not(:has(.jet-listing-dynamic-repeater__item)) {
  display: none;
}


/* ===== Seiten-Animation — automatisches Reveal beim Scrollen =====
   Whitelist-Prinzip: Versteckt wird NUR, was das JS-Snippet aktiv als
   echte Inhalts-Sektion auswählt und mit .reveal-init markiert.
   Das JS (WPCode → JS → Site Wide Footer) überspringt Header, Footer,
   Popup, Off-Canvas und alle fixed/sticky-Elemente (Scroll-Top, WhatsApp
   …) — die bekommen nie .reveal-init und bleiben unberührt sichtbar.
   Ohne JS (oder bei "reduzierter Bewegung") wird .reveal-init nie
   gesetzt → nichts wird versteckt. Fail-safe, kein Flackern.

   WICHTIG — richtige Ebene:
   Animiert wird der INHALT der Sektion (> *), nicht die Sektion selbst.
   Läge opacity/transform auf .reveal-init, würde der Sektions-Hintergrund
   mit ausgeblendet und der Seitenhintergrund kurz durchblitzen.
   "> *" trifft bei Boxed-Containern .e-con-inner, bei Full-Width die
   Widgets — der Background sitzt in beiden Fällen auf .e-con und bleibt stehen. */
@media (prefers-reduced-motion: no-preference) {
  body.reveal-ready .reveal-init > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
    will-change: opacity, transform;
  }
  body.reveal-ready .reveal-init.is-visible > * {
    opacity: 1;
    transform: none;
  }
}

/* Farnsburg – Gutschein-Formular (Fluent Forms) */
/* Version: v3 */

/* Scope: Elementor-Container um den Formular-Shortcode = CSS-Klasse "gut-form".
   Kacheln laufen unabhängig über die Feld-Container-Klasse "gut-wert".
   Hinweis: border/border-radius/Button-Farbe mit !important, weil der FF-Form-Styler
   diese Werte ID-gescopt setzt (#fluentform_X …) und eine ID jeden Klassen-Selektor schlägt. */

/* ============================================================
   1) WERT-AUSWAHL ALS KACHEL-RADIOS
   ============================================================ */
.gut-wert .ff-el-input--content{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
@media (max-width:560px){
  .gut-wert .ff-el-input--content{grid-template-columns:1fr;}
}
.gut-wert .ff-el-form-check{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1.5px solid #C1BFB9;
  border-radius:4px;
  transition:border-color .15s, background .15s;
}
.gut-wert .ff-el-form-check:hover{border-color:#C2724E;}
.gut-wert .ff-el-form-check:has(input:checked){
  border-color:#C2724E;
  background:#FBF1EA;
}
.gut-wert .ff-el-form-check-input{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
  margin:0;
}
.gut-wert .ff-el-form-check-label{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  width:100%;
  margin:0;
  padding:16px 8px;
  cursor:pointer;
  font-family:"Prata",Georgia,serif;
  font-weight:500;
  font-size:24px;
  line-height:1;
  color:#242120;
}
.gut-wert .ff-el-form-check-label::after{
  content:"CHF";
  font-family:"Mulish",sans-serif;
  font-weight:700;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#6E655B;
}
.gut-wert .ff-el-form-check:focus-within{
  outline:2px solid #C2724E;
  outline-offset:2px;
}

/* ============================================================
   2) LABELS
   ============================================================ */
.gut-form .ff-el-input--label label{
  font-family:"Mulish",sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#242120;
  margin-bottom:7px;
  line-height:1.4;
}
.gut-form .ff-el-is-required label::after{
  color:#C2724E;
}

/* ============================================================
   3) INPUTS / TEXTAREA
   ============================================================ */
.gut-form .ff-el-form-control{
  width:100%;
  font-family:"Mulish",sans-serif;
  font-size:15px;
  padding:12px 14px;
  border:1px solid #C1BFB9 !important;
  border-radius:4px !important;
  background:#FFFFFF;
  color:#242120;
  box-shadow:none;
}
.gut-form textarea.ff-el-form-control{
  min-height:110px;
  resize:vertical;
}
.gut-form .ff-el-form-control::placeholder{
  color:#B4A892;
}
.gut-form .ff-el-form-control:focus{
  outline:2px solid #C2724E;
  outline-offset:1px;
  border-color:#C2724E !important;
}

/* ============================================================
   4) SUBMIT-BUTTON
   ============================================================ */
.gut-form .ff-el-group.ff_submit_btn_wrapper button.ff-btn-submit{
  font-family:"Mulish",sans-serif;
  font-weight:700;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#FFFFFF;
  background:#C2724E !important;
  border:1.5px solid transparent;
  border-radius:4px !important;
  padding:15px 26px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:none;
  transition:background .2s;
}
.gut-form .ff-el-group.ff_submit_btn_wrapper button.ff-btn-submit:hover{
  background:#A85E3C !important;
}
.gut-form .ff-el-group.ff_submit_btn_wrapper button.ff-btn-submit:focus-visible{
  outline:2px solid #C2724E;
  outline-offset:2px;
}

.ff-working { display: none !important; }

.ff-message-success p {
	font-size: 85% !important;
}

.fluent_form_3 .ff-el-form-control,
.fluent_form_3 .ff-btn-submit, .ff-el-form-check, button.ff-btn.ff-btn-submit.ff-btn-md.ff_btn_style    {
    border-radius: 0 !important;
}

.gutschein-row {
    display: none !important;
}
.grecaptcha-badge {
  visibility: hidden;
}
.recaptcha-hinweis {
  font-family: 'Mulish', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(36, 33, 32, 0.55);
  margin: 8px 0 0;
}

.recaptcha-hinweis a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.recaptcha-hinweis a:hover {
  color: #242120;
}

/* Business Club — dunkle Formularflächen */
.recaptcha-hinweis-hell {
  color: rgba(251, 247, 241, 0.55);
}

.recaptcha-hinweis-hell a:hover {
  color: #FBF7F1;
}