/* site.css — vanilla fixes replacing the dead Webflow runtime (Phase-A relaunch) */

/* Kill the stuck Webflow preloader (its dismiss-JS is gone) */
.preloader { display: none !important; }

/* Mobile hamburger menu: reveal the existing styled panel when JS opens it */
@media screen and (max-width: 991px) {
  .navbar.w-nav.nav-open .w-nav-menu { display: block !important; }
  body.nav-locked { overflow: hidden; }
}

/* === Hero rebuild (desktop/tablet ≥768px) ===
   Original used a fragile multi-layer background (waves PNG anchored 100% 100% + bottom-anchored
   cover photo) that cropped Robert & Conny's heads and displaced the wave into the middle on some
   viewport heights. Rebuilt as 3 explicit, controlled layers:
   1) wave: full-width, anchored center-bottom (always a clean bottom divider)
   2) gradient: legibility for the white title
   3) photo: face-focused (center 24%) so both faces stay framed at every size.
   Gold decorations (moon/rings/spheres) are separate overlay elements and are untouched. */
@media screen and (min-width: 768px) {
  .home-header.goldmine {
    background-image:
      url("/cdn.prod.website-files.com/65b128504439223c7e558ab1/65b1763e6949c3c616b0a41c_Wellen%20Hintergrund%20unten23.webp"),
      linear-gradient(180deg, rgba(12,12,12,.38) 0%, rgba(12,12,12,.10) 30%, rgba(12,12,12,.48) 62%, rgba(12,12,12,.70) 100%),
      url("/cdn.prod.website-files.com/65b128504439223c7e558ab1/65cb44caa8efdea409396f5a_2023_KW22_Robert_und_Connie-0797-hd.webp") !important;
    background-size: 100% auto, cover, cover !important;
    background-position: center bottom, center, 50% 24% !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
  }
}

/* === Self-hosted Open Sans (replaces Google webfont.js — DSGVO + perf) === */
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/opensans/opensans-400-latin.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/opensans/opensans-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/opensans/opensans-600-latin.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/opensans/opensans-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/opensans/opensans-700-latin.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/opensans/opensans-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}


/* === 2026 polish pass === */

/* Sticky nav -> more of a frosted glass panel (was flat: white .65, no border/shadow).
   Same pill, just more glass: more see-through, a fine glass edge, real depth + top sheen. */
.nav-background {
  background: rgba(255, 255, 255, 0.5) !important;
  -webkit-backdrop-filter: blur(20px) saturate(165%) !important;
  backdrop-filter: blur(20px) saturate(165%) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 10px 34px rgba(17, 17, 26, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}

/* Fix: the AUSBILDUNG hero title ("Consciousness Business Coaching ®") was set ~51px and ran
   to ~1360px wide -> it kissed both viewport edges and looked broken. Scope ONLY to that hero
   (angebote-home-header + padding-bottom = ausbildung; plain angebote stays untouched). */
.angebote-home-header.padding-bottom .heading-style-h2,
.angebote-home-header.padding-bottom .heading-style-h2 * {
  font-size: clamp(1.6rem, 3.8vw, 2.8rem) !important;
  line-height: 1.1 !important;
}

/* Fix: BLOG header was only ~310px tall with the title pinned to its bottom edge, so the first
   article cards crowded the headline. Give the image-less headers room to breathe. */
.section-blog-header { padding-bottom: 56px !important; }

/* The image-less pages (blog / checkout / kontakt) had the glass nav floating on bare white.
   A whisper-soft cream band seats the nav and reads as an intentional header. */
.section-blog-header,
.section-checkout-header,
.section-contact-form {
  background: linear-gradient(180deg, #faf7f0 0%, #ffffff 72%) !important;
}


/* === blog card image heights === */
/* Blog card image wrappers collapsed to ~0 height (Webflow runtime was gone), so the
   lazy <img class=cover-image> never gained area and never loaded. Give them a real,
   responsive box. Scoped to the blog so the erfolgsgeschichten .cover-image is untouched. */
.section-blog-content .image-wrapper { aspect-ratio: 16 / 10; min-height: 190px; overflow: hidden; display: block; }
.section-blog-content .image-wrapper.main-post { aspect-ratio: 16 / 9; }
.section-blog-content .image-wrapper .cover-image,
.section-blog-content a.blog-content-link .cover-image {
  width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important;
}


/* === erfolgsgeschichten hero wave pin === */
/* Only the erfolgsgeschichten hero had its wave layer as background-size:auto + repeat, so on wide
   / retina viewports the white wave PNG tiled vertically and cut a white band across the photo.
   Pin it like the rebuilt index hero: wave full-width at the bottom (no-repeat), photo covers. */
@media screen and (min-width: 768px) {
  .home-header:not(.goldmine):not(.angebote-home-header) {
    background-size: 100% auto, cover, cover !important;
    background-position: center bottom, center, 50% 35% !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
  }
}


/* === angebote hero center === */
/* The angebote hero content grid (.main-grid) computes to display:block (grid placement was lost
   in the relaunch CSS strip), so the content block (eyebrow + title + YouTube video) sat in the
   left column instead of centered. Center it. Scoped to angebote only (ausbildung = .padding-bottom). */
@media screen and (min-width: 768px) {
  .angebote-home-header:not(.padding-bottom) .header-content-block {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* === FAQ accordion === */
/* JS-gated (html.faq-js added by site.js) so answers stay open if JS is disabled. */
html.faq-js .faq-content { max-height: 0 !important; overflow: hidden !important; transition: max-height .4s ease; }
html.faq-js .faq-question-wrap.faq-open .faq-content { max-height: 2200px !important; }
html.faq-js .faq-question-bar { cursor: pointer; }
html.faq-js .faq-arrow { transition: transform .3s ease; }
html.faq-js .faq-question-wrap.faq-open .faq-arrow { transform: rotate(180deg); }