/* ==========================================================================
  Universeller Font: Montserrat (variabel)
  ========================================================================== */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/Montserrat-VariableFont_wght.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+y02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/Montserrat-Italic-VariableFont_wght.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Font Rendering on Macos */
body {
	/*text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;*/
	-moz-osx-font-smoothing: grayscale;
  font-size: 16px;
}

/* ==========================================================================
  Typography: Variables
  ========================================================================== */
:root {
  --font-main: 'Montserrat', sans-serif;
}
  /* Clamps (375px bis 1440px) */
:root {
  /* Überschriften */
  /* H0: 38px -> 52px */
  --h0: clamp(2.375rem, 2.025rem + 1.75vw, 3.25rem);
  /* H1: 32px -> 42px */
  --h1: clamp(1.75rem, 1.475rem + 1.375vw, 2.625rem);
  /* H2: 26px -> 36px */
  --h2: clamp(2rem, 1.688rem + 1.25vw, 2.625rem); 
  /* H3: 22px -> 30px  */
  --h3: clamp(1.375rem, 1.125rem + 1vw, 1.875rem);
  /* H4: 20px -> 24px  */
  --h4: clamp(1.25rem, 1.125rem + 0.5vw, 1.5rem);
  /* H5: 18px -> 21px */
  --h5: clamp(1.125rem, 1.031rem + 0.375vw, 1.3125rem);
  /* H6: 16px -> 19px */
  --h6: clamp(1rem, 0.906rem + 0.375vw, 1.1875rem);

  /* Textgrößen */
  --text-large:  clamp(1.25rem, 1.188rem + 0.25vw, 1.375rem); /* 20px -> 22px */
  --text-normal: clamp(1.125rem, 1.063rem + 0.25vw, 1.25rem); /* 18px -> 20px */
  --text-small:  clamp(0.875rem, 0.813rem + 0.25vw, 1rem);    /* 14px -> 16px */

}
/* ==========================================================================
 Typography: Grund-Setup
  ========================================================================== */
html {
  font-size: 16px;
}

body {
  font-family: var(--font-main);
  font-size: var(--text-large);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-style: normal; /* Erzwingt Standardmäßig "nicht-kursiv" */
}

h1, .h1 { font-family: var(--font-main); font-size: var(--h1); line-height: 1.1; font-weight: 800;}
h2, .h2 { font-family: var(--font-main); font-size: var(--h2); line-height: 1.2; font-weight: 700;}
h3, .h3 { font-family: var(--font-main); font-size: var(--h3); line-height: 1.2; font-weight: 700;}
h4, .h4 { font-family: var(--font-main); font-size: var(--h4); line-height: 1.2; font-weight: 600;}
h5, .h5 { font-family: var(--font-main); font-size: var(--h5); line-height: 1.3; font-weight: 600;}
h6, .h6 { font-family: var(--font-main); font-size: var(--h6); line-height: 1.3; font-weight: 600;}


p { 
  font-size: var(--text-large); 
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.text-align-left {
  text-align: left;
}
.text-align-center {
  text-align: center;
}
.text-align-right {
  text-align: right;
}

.fl-rich-text ul li {
  margin-bottom: 0.5rem
}

.text-large, 
.text-large p,
.text-large ul  { font-size: var(--text-large); }
.text-normal,
.text-normal p,
.text-normal ul { font-size: var(--text-normal); }
.text-small,
.text-small p,
.text-small ul  { font-size: var(--text-small); }

.highlight {
    background: url(//s2.svgbox.net/pen-brushes.svg?ic=brush-1&color=ffff43);
    margin: -12px -6px;
    padding: 2px 18px;
}

.text-2-col {
  column-count: 2;
  column-gap: 1rem;
}
@media (max-width: 768px) { 
  .text-2-col {
    column-count: 1;
    column-gap: 0;
  }
}
/* ==========================================================================
Margins
  ========================================================================== */
h1.fl-module, .h1.fl-module {
  margin-bottom: 2.5rem;
}
h2.fl-module, .h2.fl-module {
  margin-bottom: 2rem;
}
h3.fl-module, .h3.fl-module {
  margin-bottom: 1.75rem;
}
h4.fl-module, .h4.fl-module {
  margin-bottom: 1.5rem;
}
h5.fl-module, .h5.fl-module {
  margin-bottom: 1rem;
}
h6.fl-module, .h6.fl-module {
  margin-bottom: 1rem;
}
.fl-module.fl-module-custom-button, 
.fl-module.fl-module-custom-rich-text,
.fl-module.fl-module-custom-accordion,
.fl-module.fl-module-custom-photo {
  margin-bottom: 1.75rem;
}
/* Target letztes Child-Element im col-content*/
.fl-col-content > *:last-child {
    margin-bottom: 10px;
}
/* ==========================================================================
  General: Classes
  ========================================================================== */
.overflow-hidden {
  overflow: hidden;
}

/* ==========================================================================
 Buttons: Main Button
  ========================================================================== */
.cm-button {
  font-size: var(--h5); 
  line-height: 1.2; 
  font-weight: 600;
  display: inline-block; 
  transition: all 0.3s ease;
  text-decoration: none;
  flex-direction: row;
  border-radius: 50px;
  padding:15px 18px;
  border-width: 2px;
  border-style: solid;
}
.cm-button:hover{
  text-decoration: none;
  transition: all 0.3s ease;
}
.cm-button {
  background: var(--cm-brown);
}
/*Color Logic*/
.fl-row.row-color-brown-light .fl-row-content-wrap .cm-button
.fl-row.row-color-beige .fl-row-content-wrap .cm-button,
.fl-row.row-color-beige-light .fl-row-content-wrap .cm-button,
.fl-row.row-color-white .fl-row-content-wrap .cm-button{
  background: var(--cm-brown);
  border-color: var(--cm-brown);
}
.fl-row.row-color-brown-light .fl-row-content-wrap .cm-button,
.fl-row.row-color-brown-light .fl-row-content-wrap .cm-button *,
.fl-row.row-color-beige .fl-row-content-wrap .cm-button,
.fl-row.row-color-beige .fl-row-content-wrap .cm-button *,
.fl-row.row-color-beige-light .fl-row-content-wrap .cm-button,
.fl-row.row-color-beige-light .fl-row-content-wrap .cm-button *,
.fl-row.row-color-white .fl-row-content-wrap .cm-button, 
.fl-row.row-color-white .fl-row-content-wrap .cm-button * {
  color: var(--cm-beige-light);
}
.fl-row.row-color-brown .fl-row-content-wrap .cm-button {
  background: var(--cm-beige-light);
  border-color: var(--cm-beige-light);
}
.fl-row.row-color-brown .fl-row-content-wrap .cm-button,
.fl-row.row-color-brown .fl-row-content-wrap .cm-button * {
  color: var(--cm-brown);
}
.fl-row.row-color-brown-light .fl-row-content-wrap .cm-button:hover,
.fl-row.row-color-beige .fl-row-content-wrap .cm-button:hover,
.fl-row.row-color-beige-light .fl-row-content-wrap .cm-button:hover,
.fl-row.row-color-white .fl-row-content-wrap .cm-button:hover {
  background: var(--cm-beige-light);
  border-color: var(--cm-brown);
}
.fl-row.row-color-brown-light .fl-row-content-wrap .cm-button:hover,
.fl-row.row-color-brown-light .fl-row-content-wrap .cm-button:hover *,
.fl-row.row-color-beige .fl-row-content-wrap .cm-button:hover,
.fl-row.row-color-beige .fl-row-content-wrap .cm-button:hover *,
.fl-row.row-color-beige-light .fl-row-content-wrap .cm-button:hover,
.fl-row.row-color-beige-light .fl-row-content-wrap .cm-button:hover *,
.fl-row.row-color-white .fl-row-content-wrap .cm-button:hover, 
.fl-row.row-color-white .fl-row-content-wrap .cm-button:hover * {
  color: var(--cm-brown);
}
.fl-row.row-color-brown .fl-row-content-wrap .cm-button:hover {
  background: var(--cm-brown);
  border-color: var(--cm-beige-light);
}
.fl-row.row-color-brown .fl-row-content-wrap .cm-button:hover,
.fl-row.row-color-brown .fl-row-content-wrap .cm-button:hover * {
  color: var(--cm-beige-light);
}

/*
.cm-button-icon {
    display: flex;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    margin-right: -30px;
    justify-self: flex-end;
}

.cm-button-icon svg {
    transform: rotate(0deg);
    transition: all 0.3s ease;
}

@media (max-width: 768px) { 
 .cm-button-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
  }
  .cm-button-icon svg {
    width: 26px;
  }
}
*/
/* Color Logic  */
/*
.cm-button-icon {
  border: 2px solid var(--cm-white);
}
.cm-button:hover .cm-button-icon,
.cm-personen-card-link:hover .cm-button-icon {
  background-color: var(--cm-white);
}
.cm-button:hover .cm-button-icon svg,
.cm-personen-card-link:hover .cm-button-icon svg {
  transform: rotate(-45deg);
  transition: all 0.3s ease;
}
.cm-button-icon svg path{
  fill: var(--cm-white);
}
.cm-button:hover .cm-button-icon svg path,
.cm-personen-card-link:hover .cm-button-icon svg path {
  fill: var(--cm-orange);
}

.fl-row.row-color-white .cm-button-icon {
  border: 2px solid var(--cm-black);
}
.fl-row.row-color-white .cm-button:hover .cm-button-icon,
.fl-row.row-color-white .cm-personen-card-link:hover .cm-button-icon {
  background-color: var(--cm-black);
}
.fl-row.row-color-white .cm-button .cm-button-icon svg path {
  fill: var(--cm-black);
}
.fl-row.row-color-white .cm-button:hover .cm-button-icon svg path,
.fl-row.row-color-white .cm-personen-card-link:hover .cm-button-icon svg path {
  fill: var(--cm-white);
}

.fl-row.row-color-purple .cm-button:hover .cm-button-icon svg path,
.fl-row.row-color-gradient-top-down  .cm-button:hover .cm-button-icon svg path,
.fl-row.row-color-gradient-left-right .cm-button:hover .cm-button-icon svg path,
.fl-row.row-color-purple .cm-personen-card-link:hover .cm-button-icon svg path,
.fl-row.row-color-gradient-top-down  .cm-personen-card-link:hover .cm-button-icon svg path,
.fl-row.row-color-gradient-left-right .cm-personen-card-link:hover .cm-button-icon svg path {
  fill: var(--cm-purple);
}
.row-color-black .cm-button:hover .cm-button-icon svg path,
.row-color-black .cm-personen-card-link:hover .cm-button-icon svg path {
  fill: var(--cm-black);
}
*/

/* ==========================================================================
 Colors: Variables
  ========================================================================== */
:root {
    --cm-brown: #4A2916;
    --cm-brown-light: #EAD9BB;
    --cm-beige: #F4EDD3;
    --cm-beige-light: #F7F4E5;
    --cm-white: #ffffff;
}

/* ==========================================================================
 Colors: Row Colors
  ========================================================================== */
.fl-row.row-color-brown .fl-row-content-wrap {
  background-color: var(--cm-brown);
}
.fl-row.row-color-brown-light .fl-row-content-wrap {
  background-color: var(--cm-brown-light);
}
.fl-row.row-color-beige .fl-row-content-wrap {
  background-color: var(--cm-beige);
}
.fl-row.row-color-beige-light .fl-row-content-wrap {
  background-color: var(--cm-beige-light);
}
.fl-row.row-color-white .fl-row-content-wrap {
  background-color: var(--cm-white);
}

.fl-row.row-color-brown-light .fl-row-content-wrap *,
.fl-row.row-color-beige .fl-row-content-wrap *,
.fl-row.row-color-beige-light .fl-row-content-wrap *,
.fl-row.row-color-white .fl-row-content-wrap * {
  color: var(--cm-brown);
}

.fl-row.row-color-brown .fl-row-content-wrap * {
  color: var(--cm-beige-light);
}

/* ==========================================================================
Menu Styling
  ========================================================================== 

body .fl-menu .fl-menu-mobile-toggle.hamburger .svg-container, 
body .fl-menu .fl-menu-mobile-toggle.hamburger-label .svg-container {
  width:auto;
  height:auto;
}
body .fl-module-menu .fl-menu-mobile-flyout {
    background-color: var(--cm-brown);
    right: -367px;
    height: 0px;
    overflow-y: auto;
    padding: 0 5px;
    position: fixed;
    top: 0;
    transition-property: left, right;
    transition-duration: .2s;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    z-index: 999999;
    width: 350px;
}
body .fl-module-menu .fl-menu .menu {
   margin-top: 8rem;
}
body .fl-module-menu .fl-menu .menu > li {
    font-size: var(--text-large);
    margin-bottom: 2rem;
}
body .fl-module-menu  .fl-flyout-right .fl-menu-mobile-close {
    float: right;
}
body .fl-module-menu  .fl-flyout-right .fl-menu-mobile-close i {
    color: var(--cm-orange);
    font-size: 2rem;
}

*/
/* ==========================================================================
Language Switcher
  ========================================================================== */
.fl-module-custom-photo img {
  border-radius: 25px;
} 
/* ==========================================================================
Language Switcher
  ========================================================================== *
.wpml-ls-legacy-list-horizontal, 
.wpml-ls-legacy-list-horizontal:hover,
.wpml-ls-legacy-list-horizontal a:hover {
  font-size: var(--text-small);
  text-decoration: none;
}
.wpml-ls-legacy-list-horizontal .wpml-ls-item.wpml-ls-current-language {
  background: var(--cm-white);
  color: var(--cm-black);
}
.wpml-ls-legacy-list-horizontal .wpml-ls-item.wpml-ls-current-language a span {
  color: var(--cm-black);
}
.wpml-ls-legacy-list-horizontal .wpml-ls-item:not(.wpml-ls-current-language):hover a span {
  color: var(--cm-orange);
  text-decoration:none;
}
.wpml-ls-legacy-list-horizontal .wpml-ls-item {
  background: transparent;
  color: var(--cm-white);
}
.wpml-ls-legacy-list-horizontal .wpml-ls-item:not(.wpml-ls-current-language):hover {
  color: var(--cm-orange);
}
  */

/* ==========================================================================
Hero-Image
  ========================================================================== */

  .cm-hero-box {
  display: grid;
  align-items: center;
  justify-items: left;
  position: relative;
  padding: 0rem; /* Puffer, damit Text nicht am Rand klebt */
  margin-left: -6.5rem;
  margin-top: -16rem;
}
.box-bg, .box-content {
  grid-column: 1;
  grid-row: 1;
}

.box-bg {
  width: 100%;
  max-width: 740px; /* Oder je nach Design */
  z-index: 1;
  position: relative;
}
.box-bg-icon {
  position:absolute;
  right: -4rem;
  bottom: 5rem;
  max-width: 250px; 
  z-index: 1;
}

.box-bg img {
  width: 100%;
  height: auto;
  /* Verhindert Verzerrung, falls die Box-Ratio nicht stimmt */
  object-fit: contain; 
}

.box-content {
  z-index: 2;
  text-align: left;
  max-width: 640px; 
  padding: 2rem 0rem 2rem 6.5rem;
}
.box-content h1 .h-oversize {
  display: inline-block;
  margin-bottom: 0.75rem;
  font-size: var(--h0);
}
@media (max-width: 768px) {  
  .cm-hero-box {
    padding: 0rem; /* Puffer, damit Text nicht am Rand klebt */
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    margin-bottom: 0rem;
    margin-top: -11rem;
    overflow:hidden;
  }
  .box-bg {
    max-width: 1000px; /* Oder je nach Design */
    width: calc(100% + 6rem);
    margin-left:-3rem;
    margin-right:-3rem;
  }
  .box-content {
    z-index: 2;
    text-align: left;
    max-width: 100%; 
    padding: 0rem 0.6rem 0rem 0.6rem;
  }
  .box-content p {
    margin-bottom:0.5rem;
  }
  .box-bg-icon {
    right: 3rem;
    bottom: 0rem;
  }
}

@media (min-width: 769px) {
    .sticky-column {
        position: sticky;
        top: 100px;
    }
}

/* ==========================================================================
Gravity Forms - Thankyou Popup
  ========================================================================== */
/* ── Overlay ── */
#gfpopup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(30, 30, 30, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: gfpopup-fadein 0.25s ease;
}

#gfpopup-overlay.is-visible {
    display: flex;
}

@keyframes gfpopup-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Popup-Box ── */
#gfpopup-box {
    position: relative;
    background: var(--cm-beige);
    border-radius: 25px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
    max-width: 480px;
    width: 100%;
    padding: 2.5rem 2rem 2rem;
    text-align: center;
    animation: gfpopup-slidein 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: var(--cm-brown);
}
#gfpopup-box h3 {
    color: var(--cm-brown);
}

@keyframes gfpopup-slidein {
    from { opacity: 0; transform: translateY(24px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* ── Schliessen-X ── */
#gfpopup-close {
    position: absolute;
    top: 0.75rem;
    right: 0.9rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 2rem;
    line-height: 1;
    color: var(--cm-brown);
    padding: 0.25rem 0.4rem;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

/* ── Buttons ── */
.gfpopup-actions {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
#gfpopup-cta {
  color: var(--cm-beige-light);
}
#gfpopup-cta.cm-button:hover,
#gfpopup-cta .cm-button:hover {
  background: var(--cm-beige-light);
  border-color: var(--cm-brown);
  color: var(--cm-brown);
}
#gfpopup-decline {
    background: none;
    border: 2px solid var(--cm-brown);
    border-radius: 50px;
    color: var(--cm-brown);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

#gfpopup-decline:hover {
    border-color: var(--cm-brown);
    color: var(--cm-brown);
    background-color: var(--cm-brown-light);
}

@media (max-width: 400px) {
    #gfpopup-box {
        padding: 2rem 1.25rem 1.5rem;
    }
}

/* ==========================================================================
Social Share Buttons
  ========================================================================== */
    /* ─── Wrapper ─────────────────────────────────────────────── */
    .ssb-wrap {
        position: relative;
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        margin: 1.5rem 0;
        font-family: inherit;
    }

    /* ─── Label ───────────────────────────────────────────────── */
    .ssb-label {
        font-size: 0.8rem;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #888;
        white-space: nowrap;
    }

    /* ─── Liste ───────────────────────────────────────────────── */
    .ssb-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* ─── Button / Link ───────────────────────────────────────── */
    .ssb-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 13px 7px 10px;
        border-radius: 99px;
        border: 1.5px solid currentColor;
        background: transparent;
        cursor: pointer;
        font-size: 0.82rem;
        font-weight: 500;
        line-height: 1;
        text-decoration: none;
        transition: background .18s, color .18s, transform .12s;
        white-space: nowrap;
    }
    .ssb-btn:hover  { opacity: .85; transform: translateY(-1px); }
    .ssb-btn:active { transform: translateY(0); }
    .ssb-btn svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
        flex-shrink: 0;
    }

    /* ─── Netzwerk-Farben ─────────────────────────────────────── */
    .ssb-whatsapp .ssb-btn  { color: #25D366; }
    .ssb-email    .ssb-btn  { color: #555;    }
    .ssb-facebook .ssb-btn  { color: #1877F2; }
    .ssb-linkedin .ssb-btn  { color: #0A66C2; }
    .ssb-bluesky  .ssb-btn  { color: #0085FF; }
    .ssb-x        .ssb-btn  { color: #000;    }
    .ssb-copy     .ssb-btn  { color: #666;    }

    /* Dark-mode */
    @media (prefers-color-scheme: dark) {
        .ssb-label            { color: #aaa; }
        .ssb-email    .ssb-btn { color: #ccc; }
        .ssb-x        .ssb-btn { color: #fff; }
        .ssb-copy     .ssb-btn { color: #aaa; }
    }

    /* ─── Toast ───────────────────────────────────────────────── */
    .ssb-toast {
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%) translateY(4px);
        background: var(--cm-white);
        color: var(--cm-brown);
        font-size: 0.78rem;
        padding: 5px 12px;
        border-radius: 6px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s, transform .2s;
    }
    .ssb-toast.visible {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    /* ─── Nur Icons (optional, Klasse am Wrapper setzen) ──────── */
    .ssb-icons-only .ssb-btn-label { display: none; }
    .ssb-icons-only .ssb-btn       { padding: 8px; }