/*
Theme Name: Beweg dich gesund
Theme URI: https://beweg-dich-gesund.de
Author: Jasmin Ningel
Description: Klassisches, handgebautes WordPress/WooCommerce-Theme fuer "Beweg dich gesund" - Yoga, Tanz und Koerperarbeit mit Jasmin Ningel in Moers. Kein Page-Builder, kein CSS-Framework, keine JS-Bibliothek.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: bdg
Tags: custom-colors, custom-menu, translation-ready, e-commerce
*/

/* ============================================================
   DESIGN SYSTEM
   ============================================================ */
:root{
  --color-cream:        #F6F2ED;
  --color-cream-alt:     #ECE7E1;
  --color-dark:          #2B2A2E;
  --color-dark-deep:     #1A1A1A;
  --color-gold:          #C9A227;
  --color-gold-light:    #E6C979;
  --color-mauve:         #8B6C85;
  --color-lilac:         #C5C3D5;

  --color-white: #FFFFFF;
  --color-dark-rgb: 43,42,46;
  --color-gold-rgb: 201,162,39;
  --color-cream-rgb: 246,242,237;

  --font-deco: "Cormorant Garamond", "Lora", serif;
  --font-head: "Lora", serif;
  --font-body: "Figtree", sans-serif;

  --container-max: 1280px;
  --gutter: clamp(1.5rem, 5vw, 4rem);

  --radius-s: 8px;
  --radius-m: 18px;
  --radius-l: 32px;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(.16,.8,.24,1);
  --dur-m: .6s;

  --shadow-soft: 0 20px 60px -25px rgba(43,42,46,.35);
  --shadow-soft-s: 0 10px 30px -15px rgba(43,42,46,.3);

  --header-h: 84px;
  --admin-bar-h: 0px;
}

*, *::before, *::after{ box-sizing: border-box; }
/* WooCommerce's get_price_html() always wraps sale-price markup in <ins>/
   <del> — browsers default <ins> to underline, which looks broken/messy
   wherever that raw price HTML is used outside an actual product page (the
   product-page-scoped reset lives in woocommerce.css). Reset it once, site-
   wide, since anywhere WC's own .price wrapper shows up should behave the
   same way. */
.price ins{ text-decoration:none; }
html{
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  font-size: 112.5%;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
body{
  margin: 0;
  background: var(--color-cream);
  color: var(--color-dark);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.admin-bar{ --admin-bar-h: 32px; }
@media (max-width: 782px){
  body.admin-bar{ --admin-bar-h: 46px; }
}
img{ max-width: 100%; display: block; height: auto; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }
ul{ list-style: none; margin: 0; padding: 0; }
h1,h2,h3,h4{ font-family: var(--font-head); font-weight: 500; margin: 0; color: var(--color-dark); }
p{ margin: 0; }
svg{ display:block; }

.container{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:1rem; top:-60px;
  background:var(--color-dark); color:var(--color-cream);
  padding:.75rem 1.25rem; border-radius:var(--radius-s);
  z-index:999; transition:top .25s var(--ease-out);
}
.skip-link:focus{ top:1rem; }

:focus-visible{
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

.kicker{
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-mauve);
}
.kicker::before{
  content:"";
  width: 28px; height: 1px;
  background: var(--color-gold);
  display:inline-block;
}

.deco-word{
  font-family: var(--font-deco);
  font-style: italic;
  font-weight: 500;
  color: var(--color-gold);
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  padding: 1rem 2rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), background .35s ease, color .35s ease, border-color .35s ease;
  white-space: nowrap;
}
.btn-primary{
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
  color: var(--color-dark);
  box-shadow: 0 12px 30px -12px rgba(201,162,39,.55);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 18px 40px -14px rgba(201,162,39,.65); }
.btn-outline{
  background: transparent;
  color: var(--color-dark);
  border-color: rgba(43,42,46,.25);
}
.btn-outline:hover{ border-color: var(--color-dark); transform: translateY(-2px); }
.btn-outline-light{
  background: transparent;
  color: var(--color-cream);
  border-color: rgba(246,242,237,.4);
}
.btn-outline-light:hover{ border-color: var(--color-cream); transform: translateY(-2px); }
.btn-sm{ padding: .7rem 1.4rem; font-size: .85rem; }
.btn:disabled{ opacity:.6; cursor:not-allowed; transform:none !important; }

.section{
  position: relative;
  padding: clamp(4.5rem, 9vw, 8.5rem) 0;
}
.section-alt{ background: var(--color-cream-alt); }
.section-dark{ background: var(--color-dark-deep); color: var(--color-cream); }
.section-dark h2, .section-dark h3{ color: var(--color-cream); }

.section-head{
  max-width: 700px;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
.section-head h2{
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.15;
  margin-top: .9rem;
}
.section-head p{
  margin-top: 1.1rem;
  font-size: 1.08rem;
  color: rgba(43,42,46,.75);
  max-width: 56ch;
}
.section-dark .section-head p{ color: rgba(246,242,237,.75); }
/* Let the heading run full-width on one line while the intro paragraph
   keeps its normal, narrower reading measure (own max-width, untouched). */
.section-head--full{ max-width: none; }

/* Scroll-reveal: plain CSS + IntersectionObserver, no GSAP */
.reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal.is-visible{ opacity: 1; transform: none; }
.no-js .reveal{ opacity: 1 !important; transform: none !important; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position: fixed; top: var(--admin-bar-h); left:0; right:0; z-index: 500;
  height: var(--header-h);
  display:flex; align-items:center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .4s ease, box-shadow .4s ease, transform .4s var(--ease-out), border-color .4s ease;
}
.site-header.is-scrolled{
  box-shadow: 0 10px 30px -20px rgba(43,42,46,.4);
}
.site-header.is-hidden{ transform: translateY(-100%); }

.site-header .brand-text strong{ color: var(--color-cream); transition: color .4s ease; }
.site-header .brand-text span{ color: rgba(246,242,237,.75); transition: color .4s ease; }
.site-header .main-nav a:not(.btn){ color: var(--color-cream); transition: color .4s ease; }
.site-header .nav-toggle{ border-color: rgba(246,242,237,.4); }
.site-header .nav-toggle span, .site-header .nav-toggle span::before, .site-header .nav-toggle span::after{ background: var(--color-cream); }
.site-header .account-link{ color: var(--color-cream); border-color: rgba(246,242,237,.4); }
.site-header .wc-block-mini-cart__button{ color: var(--color-cream); border-color: rgba(246,242,237,.4); }
.site-header .cart-link{ color: var(--color-cream); border-color: rgba(246,242,237,.4); }

.site-header.is-solid{
  background: rgba(246,242,237,.7);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgba(43,42,46,.08);
}
.site-header.is-solid .brand-text strong{ color: var(--color-dark); }
.site-header.is-solid .brand-text span{ color: var(--color-mauve); }
.site-header.is-solid .main-nav a:not(.btn){ color: var(--color-dark); }
.site-header.is-solid .nav-toggle{ border-color: rgba(43,42,46,.2); }
.site-header.is-solid .nav-toggle span, .site-header.is-solid .nav-toggle span::before, .site-header.is-solid .nav-toggle span::after{ background: var(--color-dark); }
.site-header.is-solid .account-link{ color: var(--color-dark); border-color: rgba(43,42,46,.2); }
.site-header.is-solid .wc-block-mini-cart__button{ color: var(--color-dark); border-color: rgba(43,42,46,.2); }
.site-header.is-solid .cart-link{ color: var(--color-dark); border-color: rgba(43,42,46,.2); }

/* Non-front-page: header is always solid (no dark hero underneath) */
.site-header.is-static-solid{
  background: rgba(246,242,237,.92);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgba(43,42,46,.08);
}
.site-header.is-static-solid .brand-text strong{ color: var(--color-dark); }
.site-header.is-static-solid .brand-text span{ color: var(--color-mauve); }
.site-header.is-static-solid .main-nav a:not(.btn){ color: var(--color-dark); }
.site-header.is-static-solid .nav-toggle{ border-color: rgba(43,42,46,.2); }
.site-header.is-static-solid .nav-toggle span, .site-header.is-static-solid .nav-toggle span::before, .site-header.is-static-solid .nav-toggle span::after{ background: var(--color-dark); }
.site-header.is-static-solid .account-link{ color: var(--color-dark); border-color: rgba(43,42,46,.2); }
.site-header.is-static-solid .wc-block-mini-cart__button{ color: var(--color-dark); border-color: rgba(43,42,46,.2); }
.site-header.is-static-solid .cart-link{ color: var(--color-dark); border-color: rgba(43,42,46,.2); }

/* While the mobile nav is open, drop backdrop-filter/transform from the
   header: both properties establish a new containing block for
   position:fixed descendants, which was trapping the full-viewport
   slide-in #main-nav panel inside the header's own ~84px height instead
   of the viewport (showing as a tiny scrollable bar instead of a real
   menu). Toggled via JS alongside .main-nav.is-open — see main.js. */
.site-header.nav-open{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; transform:none !important; }

.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; gap:.75rem;
}
/* min-width:0 + the ellipsis rules below let the brand name yield/truncate
   under pressure instead of forcing header-actions (incl. the menu button)
   past the edge of narrow viewports — see .header-actions flex-shrink:0. */
.brand{
  display:flex; align-items:center; gap:.75rem;
  min-width:0;
}
.brand img{ height: 44px; width: 44px; object-fit:contain; flex-shrink:0; }
.brand-text{ display:flex; flex-direction:column; line-height:1.05; min-width:0; }
.brand-text strong{
  font-family: var(--font-head); font-size: 1.15rem; font-weight:600; letter-spacing:.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.brand-text span{
  display:block;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size: .68rem; letter-spacing:.14em; text-transform:uppercase; color: var(--color-mauve);
}

.main-nav{ display:flex; align-items:center; gap:2.4rem; }
.main-nav ul{ display:flex; align-items:center; gap:2.2rem; }
.main-nav a:not(.btn){
  font-size: .93rem; font-weight: 500; position:relative; padding: .3rem 0;
}
.main-nav a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background: var(--color-gold); transition: width .35s var(--ease-out);
}
.main-nav a:not(.btn):hover::after,
.main-nav a:not(.btn):focus-visible::after,
.main-nav li.current-menu-item a:not(.btn)::after{ width:100%; }

/* Desktop dropdown: "Angebote" reveals each individual offer on hover/focus. */
.main-nav-panel > ul > li{ position:relative; }
.main-nav .sub-menu{
  display:none;
  list-style:none; margin:0; padding:.6rem;
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  min-width:220px;
  background: var(--color-cream);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-soft);
  z-index:50;
}
.main-nav-panel > ul > li:hover > .sub-menu,
.main-nav-panel > ul > li:focus-within > .sub-menu{ display:block; }
.main-nav .sub-menu li{ width:100%; }
.main-nav .sub-menu a{
  display:block; padding:.65rem .9rem; border-radius: var(--radius-s);
  font-size:.9rem; font-weight:500; white-space:nowrap;
}
/* !important: the dropdown always sits on a light cream card regardless of
   header theme state, but .site-header .main-nav a:not(.btn) (and its
   .is-solid/.is-static-solid variants) target every nav link generically
   and outrank this selector on specificity — without it these links
   inherited the transparent-header's cream/white text and vanished
   against the dropdown's light background. */
.site-header .main-nav .sub-menu a{ color: var(--color-dark) !important; }
.main-nav .sub-menu a::after{ display:none; }
.main-nav .sub-menu a:hover, .main-nav .sub-menu a:focus-visible{ background: var(--color-cream-alt); }

.header-actions{ display:flex; align-items:center; gap:.7rem; flex-shrink:0; }

.account-link{
  display:flex; align-items:center; justify-content:center;
  width: 44px; height:44px; border-radius:50%;
  border:1px solid rgba(43,42,46,.2);
  transition: color .4s ease, border-color .4s ease, background-color .3s ease;
}
.account-link:hover{ background: rgba(var(--color-gold-rgb),.12); }
.account-link svg{ width:20px; height:20px; }

/* Plain fallback cart icon, shown only on Cart/Checkout in place of
   WooCommerce's own Mini Cart button (which disables itself there — see
   header.php) so the header stays visually/functionally consistent. */
.cart-link{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width: 44px; height:44px; border-radius:50%;
  border:1px solid rgba(43,42,46,.2);
  transition: color .4s ease, border-color .4s ease, background-color .3s ease;
}
.cart-link:hover{ background: rgba(var(--color-gold-rgb),.12); }
.cart-link svg{ width:20px; height:20px; }
.cart-link-count{
  position:absolute; top:-4px; right:-4px;
  min-width:18px; height:18px; padding:0 4px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background: var(--color-gold);
  color: var(--color-dark);
  font-size:.68rem; font-weight:700; line-height:1;
}

/* WooCommerce's native Mini Cart block — icon+badge trigger button in the
   header, and the off-canvas drawer it opens. WooCommerce ships the drawer
   toggle behaviour itself (no JS from us); this just reskins it to match
   the header's other icon-buttons and the site's design tokens. */
.wc-block-mini-cart{ display:flex; align-items:center; }
.wc-block-mini-cart__button{
  display:flex; align-items:center; justify-content:center;
  width: 44px; height:44px; border-radius:50%;
  border:1px solid rgba(43,42,46,.2);
  background:none; cursor:pointer;
  transition: color .4s ease, border-color .4s ease, background-color .3s ease;
}
.wc-block-mini-cart__button:hover{ background: rgba(var(--color-gold-rgb),.12); }
.wc-block-mini-cart__quantity-badge{ position:relative; display:flex; }
.wc-block-mini-cart__quantity-badge svg{ width:20px; height:20px; color:inherit; }
.wc-block-mini-cart__badge{
  position:absolute; top:-6px; right:-8px;
  min-width:18px; height:18px; padding:0 4px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background: var(--color-gold);
  color: var(--color-dark);
  font-size:.68rem; font-weight:700; line-height:1;
  border:none;
}
/* Icon-only trigger, like the account button next to it. */
.wc-block-mini-cart__amount, .wc-block-mini-cart__tax-label{ display:none; }

.nav-toggle{
  display:none;
  width: 44px; height:44px; border-radius:50%;
  border:1px solid rgba(43,42,46,.2);
  background: transparent;
  align-items:center; justify-content:center;
  position:relative;
}
.nav-toggle span{
  position:absolute; top:50%; left:50%;
  width:18px; height:2px; border-radius:1px;
  background: var(--color-dark);
  transform: translate(-50%,-50%);
  transition: background-color .3s ease;
}
.nav-toggle span::before, .nav-toggle span::after{
  content:"";
  position:absolute; left:0;
  width:18px; height:2px; border-radius:1px;
  background: var(--color-dark);
  transition: transform .3s var(--ease-out), top .3s var(--ease-out);
}
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top:6px; }
/* !important: this must always win over the header color-theme rules above
   (.site-header.is-solid/.is-static-solid ... span{ background: ... }),
   which are more specific and were otherwise leaving the middle bar visible
   as a leftover stroke through the X on every non-front-page header. */
.nav-toggle.is-open span{ background: transparent !important; }
.nav-toggle.is-open span::before{ top:0; transform: rotate(45deg); }
.nav-toggle.is-open span::after{ top:0; transform: rotate(-45deg); }

/* Desktop: the mobile-only wrapper elements stay out of the box tree
   entirely, so .main-nav's direct flex children are exactly what they
   were before (menu <ul> + CTA button) — no layout change on desktop. */
.main-nav-panel{ display:contents; }
.main-nav-watermark{ display:none; }
.main-nav-footer{ display:none; }

/* Narrow phones (iPhone SE/16 and similar, ~430px and below): the row of
   header-actions icons is fixed-size by design (44px is the accessible
   touch-target minimum) and never shrinks, so on the tightest widths the
   brand name was the only thing left to give — reclaim a bit of width here
   too so it rarely has to actually truncate. */
@media (max-width: 430px){
  .header-actions{ gap:.5rem; }
  .account-link, .cart-link, .wc-block-mini-cart__button, .nav-toggle{
    width:40px; height:40px;
  }
  .brand{ gap:.6rem; }
  .brand img{ height:38px; width:38px; }
  .brand-text strong{ font-size:1.05rem; }
}

@media (max-width: 1023px){
  .main-nav{
    position: fixed; inset: calc(var(--header-h) + var(--admin-bar-h)) 0 0 0;
    background: var(--color-cream);
    display:flex; flex-direction:column; justify-content:space-between;
    gap: 2rem;
    transform: translateX(100%);
    transition: transform .5s var(--ease-out);
    overflow-y:auto; overflow-x:hidden;
    isolation:isolate;
  }
  .main-nav.is-open{ transform: translateX(0); }
  .nav-toggle{ display:flex; }
  .site-header .main-nav a:not(.btn){ color: var(--color-dark); }

  /* Large, very faint brand mark anchored bottom-right — the same quiet
     watermark device used in the entry banners, so the menu still reads
     as "this site" rather than a generic off-the-shelf drawer. */
  .main-nav-watermark{
    display:block;
    position:absolute; z-index:0;
    right:-12%; bottom:-8%;
    width:min(70vw,380px); height:auto;
    opacity:.05;
    filter:brightness(0);
    pointer-events:none;
  }

  .main-nav-panel{
    display:block;
    position:relative; z-index:1;
    padding: 2.5rem var(--gutter) 0;
  }

  .main-nav-panel > ul{
    flex-direction:column; align-items:flex-start; gap:0; width:100%;
    counter-reset: navindex;
  }
  .main-nav-panel > ul > li{
    width:100%;
    counter-increment: navindex;
    border-bottom: 1px dashed rgba(var(--color-dark-rgb),.15);
    opacity:0; transform:translateY(18px);
    transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  }
  .main-nav.is-open .main-nav-panel > ul > li{ opacity:1; transform:none; }
  .main-nav.is-open .main-nav-panel > ul > li:nth-child(1){ transition-delay:.08s; }
  .main-nav.is-open .main-nav-panel > ul > li:nth-child(2){ transition-delay:.14s; }
  .main-nav.is-open .main-nav-panel > ul > li:nth-child(3){ transition-delay:.2s; }
  .main-nav.is-open .main-nav-panel > ul > li:nth-child(4){ transition-delay:.26s; }
  .main-nav.is-open .main-nav-panel > ul > li:nth-child(5){ transition-delay:.32s; }

  .main-nav-panel > ul > li > a{
    display:flex; align-items:baseline; gap:.9rem;
    padding: 1.15rem 0;
    font-family: var(--font-head);
    font-size: clamp(1.9rem, 7vw, 2.4rem);
    font-weight:500;
    letter-spacing:-.01em;
  }
  .main-nav-panel > ul > li > a::before{
    content: counter(navindex, decimal-leading-zero);
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight:700;
    letter-spacing:.06em;
    color: var(--color-mauve);
    transform: translateY(-.2em);
  }
  .main-nav ul a:hover, .main-nav ul a:focus-visible{ color: var(--color-mauve); }
  .main-nav ul a::after{ display:none; } /* the desktop underline-on-hover doesn't suit this layout */
  .main-nav li.current-menu-item > a{ color: var(--color-mauve); }
  .main-nav li.current-menu-item > a::before{ color: var(--color-gold); }

  /* Sub-menu (individual offers under "Angebote"): always expanded inline,
     smaller and indented, no numbering — this is a mobile drawer, not
     enough room for a separate hover-reveal dropdown like on desktop. */
  .main-nav .sub-menu{
    display:flex; flex-direction:column; gap:.2rem;
    list-style:none; margin:0 0 1.1rem; padding:0 0 0 2.6rem;
    position:static; background:none; box-shadow:none; transform:none;
  }
  .main-nav .sub-menu a{
    font-family: var(--font-body);
    font-size: 1rem; font-weight:500;
    padding: .5rem 0;
    display:block;
  }
  .main-nav .sub-menu a::before{ content:none; }

  .main-nav-cta.btn{ width:100%; margin-top:2rem; }

  .main-nav-footer{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
    gap:1rem;
    position:relative; z-index:1;
    padding: 1.6rem var(--gutter);
    border-top: 1px solid rgba(var(--color-dark-rgb),.1);
  }
  .main-nav-social{ display:flex; gap:.7rem; }
  .main-nav-social a{
    width:40px; height:40px; border-radius:50%;
    border:1px solid rgba(var(--color-gold-rgb),.4);
    display:flex; align-items:center; justify-content:center;
    color: var(--color-dark);
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
  }
  .main-nav-social a svg{ width:17px; height:17px; }
  .main-nav-social a:hover{ background: var(--color-gold); border-color: var(--color-gold); color: var(--color-dark); }
  .main-nav-email{ font-size:.88rem; font-weight:600; color: var(--color-dark); }
  .main-nav-email:hover{ color: var(--color-mauve); }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce){
  .main-nav ul li{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--color-dark-deep);
  isolation: isolate;
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
}
.hero-lead-break, .quote-break, .newsletter-break{ display:none; }
@media (min-width: 1024px){
  .hero-bg{ left: 22%; }
  .hero-bg::before{
    content:"";
    position:absolute; top:0; bottom:0; left:0; width:22vw;
    background: linear-gradient(90deg, var(--color-dark-deep) 0%, rgba(26,25,24,.6) 45%, transparent 100%);
    z-index:1;
  }
  .hero-lead-break, .quote-break, .newsletter-break{ display:inline; }
}
.hero-bg img{
  width:100%; height:100%; object-fit:cover; object-position: 62% 22%;
}
.hero-bg-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(195deg, rgba(26,26,26,.55) 0%, rgba(26,26,26,0) 18%, rgba(26,26,26,0) 66%, rgba(26,26,26,.7) 100%),
    linear-gradient(102deg, rgba(20,19,18,.94) 0%, rgba(20,19,18,.84) 30%, rgba(20,19,18,.4) 52%, rgba(20,19,18,0) 74%);
}
.hero .container{
  position:relative; z-index:3;
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height: 100svh;
  min-height: 100vh;
  padding-top: calc(var(--header-h) + var(--admin-bar-h) + clamp(2rem,6vw,3.5rem));
  padding-bottom: clamp(2rem,5vw,3rem);
}
.hero-copy{ max-width: 640px; }
.hero-copy .kicker{ margin-bottom: 1.5rem; color: var(--color-gold-light); }
.hero-copy .kicker::before{ background: var(--color-gold-light); }
.hero-copy h1{
  font-size: clamp(2.8rem, 6vw, 5rem);
  line-height: 1.06;
  letter-spacing: -.01em;
  color: var(--color-cream);
}
.hero-copy h1 em{
  font-style: italic;
  color: var(--color-gold-light);
}
.hero-copy .lead{
  margin-top: 1.7rem;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: rgba(246,242,237,.78);
  max-width: 44ch;
}
.hero-actions{
  display:flex; flex-wrap:wrap; gap: 1rem;
  margin-top: 2.5rem;
}
.hero-tag{
  position:absolute; z-index:3;
  right: clamp(1.5rem, 5vw, 4.5rem);
  bottom: clamp(7.5rem, 16vw, 10rem);
  background: rgba(20,19,18,.55);
  border: 1px solid rgba(246,242,237,.18);
  backdrop-filter: blur(8px);
  color: var(--color-cream);
  padding: 1.3rem 1.7rem;
  border-radius: var(--radius-m);
  max-width: 250px;
  text-align:right;
}
.hero-tag .deco-word{ font-size: 1.7rem; display:block; }
.hero-tag small{ font-size:.92rem; line-height:1.4; color: rgba(246,242,237,.75); letter-spacing:.01em; }

.hero-usps{
  position:relative; z-index:3;
  margin-top: clamp(2.8rem, 7vw, 4.5rem);
  display:flex; flex-wrap:wrap; align-items:center; gap: 1rem 2.6rem;
  background: rgba(20,19,18,.42);
  border: 1px solid rgba(246,242,237,.2);
  border-top-color: rgba(246,242,237,.32);
  padding: 1.6rem 2.4rem;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 45px -25px rgba(0,0,0,.6);
  width: fit-content;
  max-width: 100%;
}
.hero-usps li{
  display:flex; align-items:center; gap:.75em;
  font-size: 1.05rem; font-weight:600; letter-spacing:.005em;
  white-space: nowrap;
}
.hero-usps li::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background: var(--color-gold-light); flex-shrink:0;
  box-shadow: 0 0 10px 1px rgba(230,201,121,.65);
}
.hero-usps li a{
  color: var(--color-cream);
  position:relative;
  padding-bottom: .15em;
  transition: color .25s ease;
}
.hero-usps li a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: var(--color-gold-light);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease-out);
}
.hero-usps li a:hover, .hero-usps li a:focus-visible{ color: var(--color-gold-light); }
.hero-usps li a:hover::after, .hero-usps li a:focus-visible::after{ transform: scaleX(1); }

@media (max-width: 1023px){
  .hero-tag{ display:none; }
  .hero-bg img{ object-position: 68% 18%; }
}
@media (max-width: 640px){
  .hero .container{ padding-top: calc(var(--header-h) + var(--admin-bar-h) + 1.5rem); }
  .hero-usps{
    display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
    width:100%;
    padding: 1.2rem 1.5rem; gap: .9rem 1.2rem; border-radius: var(--radius-l);
  }
  .hero-usps li{ font-size: .92rem; white-space:normal; }
  .hero-bg{ margin-right: -360px; }
  .hero-bg-overlay{
    background:
      linear-gradient(195deg, rgba(26,26,26,.6) 0%, rgba(26,26,26,.1) 22%, rgba(26,26,26,.15) 60%, rgba(26,26,26,.78) 100%),
      linear-gradient(180deg, rgba(20,19,18,.88) 0%, rgba(20,19,18,.6) 46%, rgba(20,19,18,.72) 100%);
  }
}

/* ============================================================
   PAGE HEADER (non-front pages, no full hero)
   ============================================================ */
.entry-banner{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background: linear-gradient(165deg, var(--color-dark-deep) 0%, #221f1b 100%);
  color: var(--color-cream);
  padding: calc(var(--header-h) + var(--admin-bar-h) + clamp(3rem,7vw,5rem)) 0 clamp(3rem,6vw,4.5rem);
}
.entry-banner-canvas{ position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block; }
.entry-banner-watermark{
  position:absolute; z-index:1;
  top:50%; right:-6%; transform:translateY(-50%);
  width:clamp(300px,34vw,520px);
  opacity:.06;
  filter: brightness(0) invert(1);
  pointer-events:none; user-select:none;
}
.entry-banner-icon{
  position:absolute; z-index:1;
  top:50%; left:-3%; transform:translateY(-50%);
  width:clamp(180px,22vw,320px);
  color: var(--color-gold-light);
  opacity:.09;
  pointer-events:none;
}
.entry-banner-icon.is-flipped{ transform:translateY(-50%) scaleX(-1); }
.entry-banner-icon svg{ width:100%; height:auto; display:block; }
.entry-banner-line{ position:absolute; z-index:1; left:0; right:0; bottom:0; width:100%; height:clamp(40px,6vw,64px); }
.entry-banner-line path{
  fill:none; stroke: var(--color-gold); stroke-width:1.5;
  stroke-dasharray: 900; stroke-dashoffset:900;
  transition: stroke-dashoffset 1.6s var(--ease-out);
}
.entry-banner.is-line-drawn .entry-banner-line path{ stroke-dashoffset:0; }
.entry-banner .container{ position:relative; z-index:2; }
.entry-banner h1{ color:var(--color-cream); font-size: clamp(2.2rem, 4.5vw, 3.4rem); margin-top:.7rem; }
.entry-banner p{ color: rgba(246,242,237,.78); margin-top:1rem; max-width:56ch; font-size:1.05rem; }

@media (max-width: 900px){
  .entry-banner-watermark{ width:clamp(220px,44vw,340px); right:-10%; }
  .entry-banner-icon{ width:clamp(130px,28vw,200px); left:-6%; }
}
@media (max-width: 640px){
  .entry-banner-watermark{ opacity:.05; }
  .entry-banner-icon{ opacity:.06; }
}
@media (prefers-reduced-motion: reduce){
  .entry-banner-line path{ transition:none; stroke-dashoffset:0; }
}

/* ============================================================
   USP ICON STRIP
   ============================================================ */
.usp-strip{ padding: clamp(3.5rem,7vw,5.5rem) 0; }
.usp-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(2.5rem,4vw,3.5rem) 1rem;
}
.usp-item{
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap: 1.35rem;
  padding: .5rem 1.25rem 0;
  border-right: 1px solid rgba(var(--color-dark-rgb),.12);
  transition: padding-top .3s ease;
}
.usp-item:last-child{ border-right:none; }
.usp-icon{
  width: 92px; height:92px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background: var(--color-cream-alt);
  border: 1px solid rgba(var(--color-gold-rgb),.25);
  transition: background-color .35s ease, border-color .35s ease, transform .35s ease;
}
.usp-icon img{ width: 52px; height:52px; object-fit:contain; mix-blend-mode:multiply; }
/* The Shiva source photo has more built-in whitespace around the glyph than
   the other (tightly-cropped) icon PNGs, so at the shared 52px it reads
   visibly smaller than its neighbors — sized up here alone to match. */
.usp-icon img[src*="shiva"]{ width: 78px; height:78px; }
.usp-item h3{ font-size: 1.05rem; }
.usp-item p{ font-size: .9rem; color: rgba(43,42,46,.65); max-width: 24ch; }

.usp-item:hover .usp-icon{
  background: var(--color-cream);
  border-color: var(--color-gold);
  transform: scale(1.04);
}

@media (max-width: 1023px){
  .usp-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .usp-item:nth-child(2n){ border-right:none; }
  .usp-item:nth-child(n+3){ border-top: 1px solid rgba(var(--color-dark-rgb),.12); padding-top: 2.25rem; }
}

.usp-nav{ display:none; }
@media (max-width: 640px){
  /* Swipeable tiles, one at a time, next one peeking in at the edge so it
     reads as slidable at a glance, plus explicit prev/next arrows below
     since the peeking edge alone wasn't a clear enough hint that this
     scrolls (users didn't discover the swipe on their own). */
  .usp-strip .container{ padding-left:0; padding-right:0; overflow:hidden; }
  .usp-grid{
    display:flex; flex-wrap:nowrap; gap:1rem;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* Padding (not margin) on the scroll container itself for the
       leading/trailing inset: margin-left on :first-child looked correct
       in markup but several mobile WebKit/Chrome builds don't include a
       flex item's own margin in the container's initial scroll offset, so
       the first tile still rendered flush against the edge. Padding on the
       container is honored reliably in both directions, and scroll-padding
       keeps snap-scrolling landing past it instead of under it. */
    padding-left: var(--gutter); padding-right: var(--gutter);
    scroll-padding-left: var(--gutter); scroll-padding-right: var(--gutter);
  }
  .usp-grid::-webkit-scrollbar{ display:none; }
  .usp-item{
    flex: 0 0 84%;
    scroll-snap-align:start;
    border-right:none;
    background: var(--color-cream-alt);
    border-radius: var(--radius-l);
    padding: 2rem 1.5rem;
  }
  .usp-item:nth-child(n+2){ border-top:none; padding-top:2rem; margin-top:0; }
  .usp-nav{ display:flex; justify-content:center; gap:.9rem; margin-top:1.75rem; }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about .container{
  display:grid;
  grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items:center;
}
.about-media{ position:relative; }
.about-media-frame{
  border-radius: var(--radius-l);
  overflow:hidden;
  aspect-ratio: 3/4;
  box-shadow: var(--shadow-soft);
}
.about-media-frame img{ width:100%; height:100%; object-fit:cover; }
.about-media-ring{
  position:absolute; width:130px; height:130px; border-radius:50%;
  border: 1px solid var(--color-gold);
  top: -2rem; right: -2rem;
  z-index:-1;
}
.about-quote{
  margin: 1.8rem 0 1.6rem;
  font-family: var(--font-deco);
  font-style:italic;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  color: var(--color-mauve);
  line-height: 1.4;
}
.about-body p + p{ margin-top: 1.1rem; }
.about-body{ color: rgba(43,42,46,.82); }

.about-facts{
  margin-top: 2rem;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .6rem 1.5rem;
}
.about-facts li{
  font-size: .88rem;
  padding-left: 1.1rem;
  position:relative;
  color: rgba(43,42,46,.75);
}
.about-facts li::before{
  content:"";
  position:absolute; left:0; top:.55em;
  width:6px; height:1px; background: var(--color-gold);
}
.about-cta{ margin-top: 2.4rem; display:flex; gap:1rem; flex-wrap:wrap; }

@media (max-width: 1023px){
  .about .container{ grid-template-columns: minmax(0,1fr); }
  .about-media{ max-width: 380px; margin: 0 auto; }
  .about-media-ring{ display:none; }
}

/* ============================================================
   MILESTONES STRIP (Über mich)
   ============================================================ */
.milestones-strip{ padding: clamp(2.5rem,5vw,4rem) 0; }
.milestones-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1.5rem;
  text-align:center;
}
.milestone-item strong{
  display:block;
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  color: var(--color-gold);
  line-height:1.1;
}
.milestone-item span{
  display:block;
  margin-top:.5rem;
  font-size:.82rem;
  letter-spacing:.03em;
  color: rgba(43,42,46,.65);
}
@media (max-width: 767px){
  .milestones-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2rem 1.5rem; }
}

/* ============================================================
   "WARUM ICH UNTERRICHTE" TEXT BLOCK (Über mich)
   ============================================================ */
.teach-why{ max-width: 760px; margin: 0 auto; text-align:center; }
.teach-why-block + .teach-why-block{ margin-top: 2.8rem; }
.teach-why-block h3{
  font-family: var(--font-deco);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  color: var(--color-mauve);
  margin-bottom: 1rem;
}
.teach-why-block p{ color: rgba(43,42,46,.8); font-size:1.03rem; line-height:1.75; }
.teach-why-block p + p{ margin-top:1rem; }
.teach-why-cta{ margin-top: 2.8rem; }

/* ============================================================
   OFFER PILLS TEASER (Über mich)
   ============================================================ */
.offer-pills-teaser{ text-align:center; }
.offer-pills{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem;
  margin-top: 1.6rem;
}
.offer-pill{
  display:inline-flex; align-items:center;
  padding: .7rem 1.4rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(43,42,46,.18);
  font-size:.9rem; font-weight:600;
  background: var(--color-cream);
  transition: background .3s ease, border-color .3s ease, transform .3s ease, color .3s ease;
}
.offer-pill:hover{ background: var(--color-gold); border-color: var(--color-gold); color: var(--color-dark); transform: translateY(-2px); }

/* ============================================================
   STATEMENT TILE — reusable emotional-closing block (see
   bdg_statement_tile()). Deliberately mirrors the .about section's
   asymmetric media+copy split (same frame radius, same ring accent)
   instead of a big full-bleed image — that stacked-card version ran
   an oversized, disproportionate image with a heavy dark panel that
   didn't sit well with the rest of the page. This keeps the photo
   properly sized and ties the section into the established design
   language, just mirrored (media right instead of left) for rhythm.
   ============================================================ */
.statement-tile-grid{
  display:grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items:center;
}
.statement-tile-copy h2{
  font-size: clamp(2rem, 3.6vw, 2.7rem);
  line-height: 1.2;
  margin-bottom: 1.2rem;
}
.statement-tile-copy p{ color: rgba(43,42,46,.78); font-size: 1.03rem; line-height: 1.75; }
.statement-tile-copy p + p{ margin-top: 1rem; }
.statement-tile-cta{ margin-top: 2rem; }

.statement-tile-media{ position:relative; }
.statement-tile-media-ring{
  position:absolute; width:130px; height:130px; border-radius:50%;
  border: 1px solid var(--color-gold);
  bottom: -2rem; left: -2rem;
  z-index:-1;
}
.statement-tile-frame{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-l);
  aspect-ratio: 3 / 4;
  box-shadow: var(--shadow-soft);
}
.statement-tile-bg{
  position: absolute;
  inset: -6% 0;
  width: 100%;
  height: 112%;
  object-fit: cover;
  transform: translateY(0);
  will-change: transform;
}

@media (max-width: 1023px){
  .statement-tile-grid{ grid-template-columns: minmax(0,1fr); }
  .statement-tile-media{ order: -1; max-width: 380px; margin: 0 auto; }
  .statement-tile-media-ring{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .statement-tile-bg{ transform: none !important; }
}

/* ============================================================
   NEWSLETTER SECTION (shared: Home, Kontakt, Über mich)
   ============================================================ */
.newsletter-section{ text-align:center; }
.newsletter-section .section-head{ margin-left:auto; margin-right:auto; }
.newsletter-form-row{
  display:flex; justify-content:center; gap:.8rem; flex-wrap:wrap;
  max-width: 480px; margin: .9rem auto 0;
}
.newsletter-form-row .form-field{ flex:1; min-width:220px; }
.newsletter-section .form-status{ max-width:480px; margin:1.2rem auto 0; justify-content:center; }

/* ============================================================
   ANGEBOTE / OFFER CARDS (used for homepage grid + WC archive)
   ============================================================ */
.offer-intro{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; }
.offer-intro .section-head{ margin-bottom: 1.5rem; max-width: 900px; }
.offer-intro .section-head p{ max-width: 72ch; }

.offers-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.75rem;
}
@media (max-width: 1023px){ .offers-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px){ .offers-grid{ grid-template-columns: minmax(0,1fr); } }

.offer-card{
  background: var(--color-cream);
  border-radius: var(--radius-l);
  overflow:hidden;
  box-shadow: var(--shadow-soft-s);
  display:flex; flex-direction:column;
  transition: box-shadow .4s var(--ease-out), transform .4s var(--ease-out);
}
.offer-card:hover{ box-shadow: var(--shadow-soft); transform: translateY(-4px); }
.offer-card-media{
  position:relative; aspect-ratio: 5/4; overflow:hidden;
  display:block; width:100%;
}
.offer-card-media img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease-out); }
.offer-card:hover .offer-card-media img{ transform: scale(1.06); }
.offer-card-body h3 a{
  display:block; width:100%; text-align:left;
  transition: color .25s ease;
}
.offer-card-body h3 a:hover,
.offer-card-body h3 a:focus-visible{ color: var(--color-mauve); }
.offer-card-icon{
  position:absolute; top:1rem; left:1rem;
  width:42px; height:42px; border-radius:50%;
  background: rgba(246,242,237,.9); backdrop-filter: blur(4px);
  display:flex; align-items:center; justify-content:center;
  color: var(--color-gold);
}
.offer-card-icon svg{ width:22px; height:22px; }
.offer-card-body{ padding: 1.5rem 1.5rem 1.75rem; display:flex; flex-direction:column; gap:.75rem; flex:1; }
.offer-card-body h3{ font-size: 1.25rem; }
.offer-card-body p{ font-size: .92rem; color: rgba(43,42,46,.72); }
.offer-card-price{ font-weight:700; color: var(--color-dark); font-size: .95rem; }
/* Keep "Auf Anfrage" visually identical to a normal price inside a card —
   the bigger mauve/serif treatment in woocommerce.css is meant for the
   single-product page only, not the shop-archive/homepage card grid
   (which loads woocommerce.css too, unlike the homepage). */
.offer-card-price .price-on-request{ font-family:inherit; font-size:inherit; color:inherit; font-weight:inherit; }
.offer-toggle{
  margin-top: auto;
  display:inline-flex; align-items:center; gap:.5em;
  padding: .4rem 0;
  font-weight:600; font-size:.88rem; color: var(--color-dark);
  align-self:flex-start;
  transition: color .25s ease;
}
.offer-toggle:hover{ color: var(--color-mauve); }
.offer-toggle svg{ width:16px; height:16px; transition: transform .3s var(--ease-out); }
.offer-toggle:hover svg{ transform: translateX(3px); }

.offer-capacity-badge{
  display:inline-flex; align-items:center; gap:.4em;
  font-size:.78rem; font-weight:600; color: rgba(43,42,46,.62);
}
.offer-capacity-badge svg{ width:15px; height:15px; flex-shrink:0; color: var(--color-gold); }

.offer-schedule-table{ width:100%; border-collapse:collapse; margin-bottom: 1rem; }
.offer-schedule-table th{ text-align:left; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color: var(--color-mauve); padding-bottom:.4rem; font-weight:600; }
.offer-schedule-table td{ padding: .5rem 0; border-top: 1px dashed rgba(43,42,46,.12); vertical-align:top; }
.status-pill{
  display:inline-flex; align-items:center; gap:.35em;
  font-size:.78rem; font-weight:600; padding:.25rem .7rem; border-radius:var(--radius-pill);
}
.status-frei{ background: rgba(139,108,133,.14); color: var(--color-mauve); }
.status-ausgebucht{ background: rgba(43,42,46,.1); color: rgba(43,42,46,.55); }
.offer-meta-line{ display:flex; gap:.5em; margin-bottom:.5rem; color: rgba(43,42,46,.75); }
.offer-meta-line strong{ min-width: 4.6rem; flex-shrink:0; color: var(--color-dark); }
.offer-meta-line span{ min-width:0; overflow-wrap:break-word; }
.offer-long-text{ margin: 1rem 0; color: rgba(43,42,46,.78); line-height:1.7; }
.offer-panel-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top: 1rem; }

/* ============================================================
   OFFER COMPARISON / ORIENTIERUNGSHILFE (Angebote-Übersicht)
   ============================================================ */
.offer-compare-wrap{ overflow-x:auto; border-radius: var(--radius-l); box-shadow: var(--shadow-soft-s); }
.offer-compare-table{ width:100%; border-collapse:collapse; background: var(--color-cream); min-width:640px; }
.offer-compare-table th, .offer-compare-table td{ padding: 1rem 1.3rem; text-align:left; }
.offer-compare-table thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; color: var(--color-mauve);
  font-weight:700; border-bottom: 1px solid rgba(43,42,46,.12);
}
.offer-compare-table tbody tr + tr td{ border-top: 1px dashed rgba(43,42,46,.12); }
.offer-compare-table tbody tr{ transition: background .25s ease; }
.offer-compare-table tbody tr:hover{ background: var(--color-cream-alt); }
.offer-compare-name{ display:flex; align-items:center; gap:.7em; font-weight:600; color: var(--color-dark); }
.offer-compare-name svg{ width:20px; height:20px; color: var(--color-gold); flex-shrink:0; }
.offer-compare-table td{ font-size:.9rem; color: rgba(43,42,46,.75); }

/* ============================================================
   PROZESS-ERKLÄRER "So läuft deine Anmeldung ab"
   ============================================================ */
.process-steps{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 2rem;
  counter-reset: step;
}
.process-step{ text-align:center; position:relative; }
.process-step-number{
  width:52px; height:52px; margin:0 auto 1.2rem;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
  color: var(--color-dark); font-family: var(--font-head); font-weight:600; font-size:1.2rem;
}
.process-step h3{ font-size:1.1rem; margin-bottom:.6rem; }
.process-step p{ font-size:.92rem; color: rgba(43,42,46,.72); line-height:1.65; }
@media (max-width: 767px){
  .process-steps{ grid-template-columns: minmax(0,1fr); gap: 2.2rem; }
}

/* ============================================================
   FAQ ACCORDION (native <details>/<summary>, no JS needed)
   ============================================================ */
.faq-accordion{ max-width: 760px; margin: 0 auto; display:flex; flex-direction:column; gap:1rem; }
.faq-item{
  background: var(--color-cream);
  border: 1px solid rgba(43,42,46,.08);
  border-radius: var(--radius-m);
  overflow:hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.faq-item:hover{ border-color: rgba(var(--color-gold-rgb),.35); }
.faq-item[open]{ box-shadow: var(--shadow-soft-s); border-color: rgba(var(--color-gold-rgb),.4); }
.faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding: 1.3rem 1.7rem;
  font-family: var(--font-head); font-weight:500; font-size:1.05rem; color: var(--color-dark);
  transition: color .25s ease;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color: var(--color-mauve); }
.faq-chevron{
  flex-shrink:0;
  width:34px; height:34px;
  border-radius:50%;
  border: 1px solid rgba(43,42,46,.15);
  display:flex; align-items:center; justify-content:center;
  color: var(--color-gold);
  transition: transform .35s var(--ease-out), background-color .3s ease, border-color .3s ease;
}
.faq-chevron svg{ width:14px; height:14px; }
.faq-item[open] .faq-chevron{
  transform: rotate(180deg);
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-dark);
}
.faq-item-answer{ padding: 0 1.7rem 1.5rem; font-size:.94rem; color: rgba(43,42,46,.75); line-height:1.75; max-width:60ch; }

/* ============================================================
   FINAL CTA ("Nicht sicher, was passt?")
   ============================================================ */
.final-cta{ text-align:center; max-width:640px; margin:0 auto; }
.final-cta h2{ font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom:1rem; }
.final-cta p{ color: rgba(43,42,46,.75); font-size:1.02rem; margin-bottom:1.8rem; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-summary{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap: .5rem 1rem;
  /* Pulls up further than the -1rem default to cut the gap below the
     section-head (headline) by ~40%, without touching .section-head's
     shared margin-bottom used across the rest of the site. */
  margin: clamp(-2.2rem, -3.6vw, -1.6rem) 0 .5rem;
  text-align:center;
}
.testimonials-summary-stars{ color: var(--color-gold); font-size:1.15rem; letter-spacing:.1em; }
.testimonials-summary-text{ font-size:.92rem; font-weight:600; color: var(--color-dark); }
.testimonials-summary-link{
  font-size:.86rem; font-weight:600; color: var(--color-mauve);
  text-decoration: underline; text-underline-offset: .2em;
}
.testimonials-summary-link:hover{ color: var(--color-gold); }

.testimonials-slider{
  position: relative;
  width: 100vw; left: 50%; margin-left: -50vw;
  overflow: hidden;
  padding: .5rem 0 2.5rem;
}
.testimonials-track{
  display:flex; align-items:stretch; gap: .3rem;
  width: fit-content;
  will-change: transform;
  transition: transform .55s var(--ease-out);
}
.testimonial-card{
  position: relative;
  flex: 0 0 auto;
  width: min(480px, 82vw);
  overflow: hidden;
  background: var(--color-cream-alt);
  border-radius: var(--radius-l);
  padding: 2rem 2.1rem 1.8rem;
  display:flex; flex-direction:column; gap:1rem;
  opacity: .55;
  transform: scale(.94);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), background .5s ease, box-shadow .5s ease;
  cursor: pointer;
}
.testimonial-card.is-active{
  background: var(--color-white);
  opacity: 1;
  transform: scale(1);
  box-shadow: var(--shadow-soft);
  cursor: default;
}
.tcorner{ position:absolute; width:22px; height:22px; opacity:0; transition: opacity .4s ease; }
.testimonial-card.is-active .tcorner{ opacity:1; }
.tcorner.tl{ top:-1px; left:-1px; border-top:2px solid var(--color-gold); border-left:2px solid var(--color-gold); border-radius: var(--radius-l) 0 0 0; }
.tcorner.tr{ top:-1px; right:-1px; border-top:2px solid var(--color-gold); border-right:2px solid var(--color-gold); border-radius: 0 var(--radius-l) 0 0; }
.tcorner.bl{ bottom:-1px; left:-1px; border-bottom:2px solid var(--color-gold); border-left:2px solid var(--color-gold); border-radius: 0 0 0 var(--radius-l); }
.tcorner.br{ bottom:-1px; right:-1px; border-bottom:2px solid var(--color-gold); border-right:2px solid var(--color-gold); border-radius: 0 0 var(--radius-l) 0; }
/* max-height is line-height(1.6em) × the -webkit-line-clamp count below, in
   the same em unit — so the box and the clamp always agree on exactly how
   many lines fit, instead of relying on a hand-picked card height staying
   in sync with the clamp count (that drifted out of sync before and let a
   partial extra line bleed past the clamped ellipsis). */
.testimonial-card .quote{
  font-size: 1.08rem; color: rgba(43,42,46,.85); line-height:1.6;
  flex:1; overflow:hidden;
  max-height: 9.6em;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6;
}
.testimonial-foot{ display:flex; align-items:center; gap:.9rem; margin-top:auto; }
.testimonial-avatar{
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
  color: var(--color-dark); font-family: var(--font-head); font-weight:600; font-size:1.1rem;
}
.testimonial-foot-text{ display:flex; flex-direction:column; gap:.25rem; }
.testimonial-name{ font-weight:700; font-size:.95rem; color: var(--color-dark); }
.testimonial-meta{ font-size:.8rem; color: var(--color-mauve); letter-spacing:.02em; }

.testimonials-nav{ display:flex; justify-content:center; gap: .9rem; }
.slider-arrow{
  width:48px; height:48px; border-radius:50%;
  border:1px solid rgba(43,42,46,.18); background: transparent;
  color: var(--color-gold);
  display:flex; align-items:center; justify-content:center;
  transition: background .3s ease, border-color .3s ease, transform .3s ease, color .3s ease;
}
.slider-arrow svg{ width:18px; height:18px; }
.slider-arrow:hover{ background: var(--color-dark-deep); border-color: var(--color-dark-deep); color: var(--color-cream); transform: translateY(-2px); }

@media (max-width: 640px){
  .testimonial-card{ padding: 1.7rem 1.6rem 1.5rem; }
  .testimonial-card .quote{ -webkit-line-clamp:8; max-height: 12.8em; }
}

/* ============================================================
   EVENT BANNER
   ============================================================ */
.event-banner{
  position:relative; overflow:hidden;
  border-radius: var(--radius-l);
  min-height: clamp(360px, 32vw, 460px);
  display:flex; align-items:stretch;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 5vw, 4.5rem);
  color: var(--color-cream);
  isolation: isolate;
  box-shadow: var(--shadow-soft);
}
.event-banner-bg{
  position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position: center 32%;
}
.event-banner-bg::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(20,19,18,.55) 0%, rgba(20,19,18,0) 30%),
    linear-gradient(100deg, rgba(20,19,18,.95) 0%, rgba(20,19,18,.86) 34%, rgba(20,19,18,.45) 58%, rgba(20,19,18,.08) 78%);
}
.event-banner-inner{ position:relative; display:flex; justify-content:space-between; align-items:center; gap:2.5rem; flex-wrap:wrap; width:100%; }
.event-banner-copy{ max-width: 640px; }
.event-banner .kicker{ color: var(--color-gold-light); }
.event-banner .kicker::before{ background: var(--color-gold-light); }
.event-banner h3{ color: var(--color-cream); font-size: clamp(1.9rem,3.2vw,2.6rem); margin-top:.7rem; }
.event-banner p{ color: rgba(246,242,237,.85); margin-top:.8rem; max-width:36ch; font-size: 1.05rem; }
.event-banner-meta{ display:flex; gap:2.2rem; margin-top:1.6rem; flex-wrap:wrap; }
.event-banner-meta div strong{ display:block; font-size:1.2rem; color:var(--color-gold-light); }
.event-banner-meta div span{ font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color: rgba(246,242,237,.62); }
.event-banner-meta del{ opacity:.5; font-size:.8em; font-weight:400; margin-right:.4em; text-decoration:line-through; }
.event-banner-meta ins{ text-decoration:none; }

@media (max-width: 640px){
  .event-banner{ min-height:0; padding: 2.2rem 1.6rem; }
  .event-banner-bg::after{
    background:
      linear-gradient(0deg, rgba(20,19,18,.6) 0%, rgba(20,19,18,0) 30%),
      linear-gradient(180deg, rgba(20,19,18,.55) 0%, rgba(20,19,18,.9) 55%, rgba(20,19,18,.96) 100%);
  }
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{
  display:grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  gap: clamp(2.5rem,6vw,5rem);
}
.contact-info-card{
  position: relative;
  background:
    linear-gradient(160deg, rgba(20,19,18,.93) 0%, rgba(20,19,18,.82) 45%, rgba(20,19,18,.95) 100%),
    var(--contact-card-image, none) center 25% / cover no-repeat;
  color: var(--color-cream);
  border-radius: var(--radius-l);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.contact-info-card h3{ color:var(--color-cream); font-size:1.4rem; margin-bottom:1.4rem; }

/* Unified, clickable contact rows: email, address and both social links all
   share the same gold-ring icon + hover treatment so every interactive
   element in the card reads consistently. */
.contact-link-row{
  display:flex; align-items:center; gap:1rem;
  margin-bottom:1.1rem;
  color: rgba(246,242,237,.9);
  transition: color .25s ease;
}
.contact-link-row:last-child{ margin-bottom:0; }
.contact-link-row:hover{ color: var(--color-gold-light); }
.contact-link-row .contact-link-text{ font-style:normal; font-size:.94rem; line-height:1.5; }
.contact-link-icon{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color: var(--color-gold-light);
  transition: color .3s ease, transform .3s ease;
}
.contact-link-icon svg{ width:30px; height:30px; }
.contact-link-row:hover .contact-link-icon{
  color: var(--color-gold);
  transform: translateY(-2px) scale(1.05);
}

.contact-map-full{ margin-top: clamp(2.5rem,5vw,3.5rem); }
.map-card{ border-radius: var(--radius-l); overflow:hidden; background: var(--color-white); border:1px solid rgba(var(--color-gold-rgb),.3); }
.map-placeholder{ padding: 2.5rem 1.6rem; text-align:center; }
.map-placeholder p{ font-size:.9rem; color: rgba(43,42,46,.7); margin-bottom:1.2rem; }
.map-embed{ width:100%; height:360px; border:0; display:block; }

/* Form elements */
.form-grid{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:1rem 1.3rem; }
.form-field{ display:flex; flex-direction:column; gap:.5rem; }
.form-hint{ font-size:.82rem; color: rgba(43,42,46,.6); margin-top:.3rem; }
.form-field.full{ grid-column: 1 / -1; }
.form-field label{ font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--color-mauve); }
.form-field input, .form-field select, .form-field textarea{
  font-family: inherit; font-size: .95rem;
  padding: .85rem 1.05rem;
  border-radius: var(--radius-s);
  border: 1px solid rgba(43,42,46,.18);
  background: var(--color-cream);
  color: var(--color-dark);
  transition: border-color .3s ease, box-shadow .3s ease;
  width:100%;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none; border-color: var(--color-gold); box-shadow: 0 0 0 4px rgba(201,162,39,.15);
}
.form-field textarea{ resize:vertical; min-height:130px; }
.form-error{ font-size:.78rem; color:#b3413a; }
.form-error:empty{ display:none; }
.form-field.has-error input, .form-field.has-error select, .form-field.has-error textarea{ border-color:#b3413a; }
.form-check{ display:flex; align-items:flex-start; gap:.7rem; grid-column:1/-1; }
.form-check input{ margin-top:.25rem; width:auto; }
.form-check label{ font-size:.82rem; font-weight:400; color: rgba(43,42,46,.75); }
.honeypot-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-status{
  margin-top:1.2rem; padding: 1rem 1.2rem; border-radius: var(--radius-s);
  font-size:.9rem; display:flex; align-items:center; gap:.6em;
}
.form-status.success{ background: rgba(139,108,133,.12); color: var(--color-mauve); }
.form-status.error{ background: rgba(179,65,58,.1); color:#b3413a; }

.contact-form-card{
  position: relative;
  overflow: hidden;
  background: var(--color-white);
  border-radius: var(--radius-l);
  padding: clamp(1.8rem, 4vw, 2.75rem);
  box-shadow: var(--shadow-soft-s);
}
.contact-form-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:5px;
  background: linear-gradient(90deg, var(--color-gold-light), var(--color-gold));
}
.contact-form-card h3{ font-size:1.5rem; margin-bottom:1.6rem; }
.form-submit-row{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin-top:1.6rem; }
.form-submit-note{ font-size:.85rem; color: rgba(43,42,46,.6); }

@media (max-width:860px){
  .contact{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px){
  .form-grid{ grid-template-columns:minmax(0,1fr); }
}

/* ============================================================
   LEGAL / GENERIC CONTENT PAGES
   ============================================================ */
.legal-content{
  max-width: 760px;
  color: rgba(43,42,46,.82);
}
.legal-content h2{ font-size:1.4rem; margin: 2.2rem 0 .8rem; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content p{ font-size:.98rem; line-height:1.75; margin-bottom: 1rem; }
.legal-content ul{ list-style:disc; padding-left:1.3rem; margin-bottom:1rem; }
.legal-content ul li{ margin-bottom:.4rem; font-size:.98rem; }
.legal-content a{ color: var(--color-mauve); text-decoration:underline; text-underline-offset:.2em; }
.legal-note{
  background: var(--color-cream-alt);
  border-left: 3px solid var(--color-gold);
  border-radius: var(--radius-s);
  padding: 1rem 1.3rem;
  font-size: .88rem;
  color: rgba(43,42,46,.75);
  margin-bottom: 2rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background: var(--color-dark-deep); color: rgba(246,242,237,.7); padding: 4.5rem 0 2rem; }
.footer-top{
  display:grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap: 2.5rem;
  padding-bottom: 3rem; border-bottom: 1px solid rgba(246,242,237,.12);
}
.footer-brand .brand-text strong{ color: var(--color-cream); }
.footer-brand p{ margin-top:1rem; font-size:.88rem; max-width:32ch; }
.footer-col h4{ color: var(--color-cream); font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:1.1rem; }
.footer-col ul{ display:flex; flex-direction:column; gap:.7rem; }
.footer-col a{ font-size:.9rem; transition: color .25s ease; }
.footer-col a:hover{ color: var(--color-gold-light); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  padding-top: 1.6rem; font-size:.8rem;
}
.footer-credit{ display:inline-flex; align-items:center; gap:.6rem; flex-wrap:wrap; line-height:1; }
/* The Brickweb SVG's own wordmark sits higher than the true center of its
   viewBox, so centering the image's box (via .footer-credit's
   align-items:center) still leaves the visible logo looking shifted up
   next to the label text — nudge it down to compensate. */
.footer-credit img{ height:26px; width:auto; display:block; vertical-align:middle; transform: translateY(2px); }
.footer-credit a{
  display:inline-flex; align-items:center; line-height:0;
  opacity:.9;
  transition: opacity .25s ease, transform .25s ease;
}
.footer-credit a:hover, .footer-credit a:focus-visible{ opacity:1; transform: translateY(-1px); }

/* Social/contact row under the footer brand blurb — icon + label links,
   left-aligned, no card/background (footer bg is already dark). */
.footer-social{ display:flex; flex-direction:column; gap:.85rem; margin-top:1.5rem; }
.footer-social a{
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:.88rem; font-weight:500; color: rgba(246,242,237,.85);
  transition: color .25s ease;
  width: fit-content;
}
.footer-social a:hover{ color: var(--color-gold-light); }
.footer-social-icon{
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  color: inherit;
}
.footer-social-icon svg{ width:26px; height:26px; }

@media (max-width: 900px){
  .footer-top{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}
@media (max-width: 560px){
  /* Enough room for two narrow columns of short link labels: Angebote
     sits beside Navigation, Rechtliches drops in underneath Navigation. */
  .footer-top{
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:
      "brand brand"
      "nav ang"
      "legal ang";
    gap: 2rem 1.5rem;
  }
  .footer-brand{ grid-area: brand; }
  .footer-col--nav{ grid-area: nav; }
  .footer-col--angebote{ grid-area: ang; }
  .footer-col--legal{ grid-area: legal; }
}
@media (max-width: 360px){
  /* Too narrow even for two short columns — fall back to a plain stack. */
  .footer-top{
    grid-template-columns: minmax(0,1fr);
    grid-template-areas: "brand" "nav" "ang" "legal";
  }
}

/* ============================================================
   COOKIE CONSENT
   ============================================================ */
.cookie-banner{
  position: fixed; left:1.2rem; right:1.2rem; bottom:1.2rem; z-index:900;
  max-width: 560px;
  margin: 0 auto;
  background: var(--color-dark-deep);
  color: var(--color-cream);
  border-radius: var(--radius-m);
  padding: 1.6rem 1.8rem;
  box-shadow: var(--shadow-soft);
  transform: translateY(140%);
  transition: transform .6s var(--ease-out);
}
.cookie-banner.is-visible{ transform: translateY(0); }
.cookie-banner p{ font-size:.86rem; color: rgba(246,242,237,.8); line-height:1.55; }
.cookie-banner-actions{ display:flex; gap:.8rem; margin-top:1.2rem; flex-wrap:wrap; }

/* ============================================================
   EARLY-BIRD PROMO POPUP (WE Retreat — homepage + product page)
   ============================================================ */
.retreat-promo-overlay{
  position: fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding: 1.5rem;
  background: rgba(26,26,26,.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity:0; visibility:hidden;
  transition: opacity .45s ease, visibility .45s ease;
}
.retreat-promo-overlay.is-visible{ opacity:1; visibility:visible; }
.retreat-promo-modal{
  position:relative;
  width:100%; max-width: 440px;
  background: var(--color-dark-deep);
  color: var(--color-cream);
  border-radius: var(--radius-l);
  padding: 3rem 2.6rem 2.6rem;
  text-align:center;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  border: 1px solid rgba(var(--color-gold-rgb),.3);
  transform: scale(.92) translateY(12px);
  opacity:0;
  transition: transform .45s var(--ease-out), opacity .4s ease;
}
.retreat-promo-overlay.is-visible .retreat-promo-modal{ transform: scale(1) translateY(0); opacity:1; }
.retreat-promo-modal::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(circle at 50% 0%, rgba(var(--color-gold-rgb),.16), transparent 60%);
}
.retreat-promo-icon{
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; margin: 0 auto 1.1rem;
  border-radius:50%; background: rgba(var(--color-gold-rgb),.12);
  color: var(--color-gold-light);
}
.retreat-promo-icon svg{ width:28px; height:28px; }
.retreat-promo-modal .kicker{ justify-content:center; margin-bottom:.7rem; }
.retreat-promo-modal .kicker::before{ display:none; }
.retreat-promo-date{
  display:block; font-size:.85rem; color: rgba(246,242,237,.6);
  letter-spacing:.03em; margin-bottom:.9rem;
}
.retreat-promo-modal h3{
  font-family: var(--font-deco); font-style:italic; font-weight:500;
  font-size:1.9rem; margin:0 0 1.1rem; color: var(--color-cream);
}
.retreat-promo-modal .retreat-promo-price{
  display:flex; align-items:baseline; justify-content:center; gap:.8rem;
  margin: 0 0 1.2rem;
}
.retreat-promo-price-old{
  font-size:1.2rem; color: rgba(246,242,237,.45); text-decoration: line-through;
}
.retreat-promo-price-new{
  font-family: var(--font-head); font-size:2.4rem; font-weight:600; color: var(--color-gold-light);
}
.retreat-promo-modal p{ font-size:.92rem; color: rgba(246,242,237,.72); line-height:1.65; margin:0 0 .5rem; }
.retreat-promo-modal p strong{ color: var(--color-cream); }
/* Forced line breaks for the discount line, mobile only — desktop keeps its
   natural wrap since the fixed-width modal already has room there. */
.promo-break{ display:none; }
.retreat-promo-modal .retreat-promo-note{ font-size:.78rem; color: rgba(246,242,237,.5); margin-bottom:1.6rem; }
.retreat-promo-modal .btn{ width:100%; }
.retreat-promo-close{
  position:absolute; top:1.1rem; right:1.1rem;
  width:36px; height:36px; border:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(246,242,237,.08); color: var(--color-cream);
  cursor:pointer; transition: background .2s ease;
}
.retreat-promo-close:hover{ background: rgba(246,242,237,.18); }
.retreat-promo-close svg{ width:17px; height:17px; }
@media (max-width: 480px){
  .retreat-promo-modal{ padding: 2.6rem 1.6rem 2rem; }
  .retreat-promo-modal h3{ font-size:1.6rem; }
  .retreat-promo-price-new{ font-size:2rem; }
  .promo-break{ display:block; }
}

/* ============================================================
   MINI CART DRAWER (WooCommerce "Mini Cart" block, header trigger)
   Sitewide — the header (and its cart button) renders on every page, so
   this lives in style.css rather than woocommerce.css (which only loads
   on shop/cart/checkout/account pages). WooCommerce supplies the open/
   close behaviour itself; this only reskins colours, type and spacing.
   ============================================================ */
.wc-block-components-drawer__screen-overlay{
  background: rgba(26,26,26,.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.wc-block-mini-cart__drawer{
  max-width: 420px;
  background: var(--color-cream);
  color: var(--color-dark);
  box-shadow: -30px 0 60px -30px rgba(0,0,0,.35);
  /* Same trick as the checkout block: WC Blocks reads its type sizes from
     these custom properties everywhere (item names, meta, totals, footer
     buttons), so bumping them here raises everything at once — easier to
     read for customers who wear glasses. */
  --wp--preset--font-size--small: 16px;
  --wp--preset--font-size--medium: 22px;
}
.wc-block-components-drawer__content{ padding: 1.7rem 1.8rem 1.4rem; }

/* Title + close button — !important throughout: both elements carry
   WooCommerce's own shared block-button/typography classes
   (.wc-block-components-button, heading defaults) whose own CSS was
   winning the specificity/source-order fight against plain overrides. */
h2.wc-block-mini-cart__title{
  display:block !important;
  font-family: var(--font-head) !important;
  font-size:1.5rem !important; font-weight:600 !important;
  line-height:1.25 !important;
  color: var(--color-dark) !important;
  margin: 0 0 1.4rem !important;
  padding-right: 3.4rem !important;
}
.wc-block-mini-cart__title [class*="items-counter-block"]{
  display:block !important;
  margin-top:.3rem !important;
  font-family: var(--font-body) !important; font-size:.82rem !important; font-weight:500 !important;
  color: rgba(43,42,46,.55) !important;
}
/* Don't fight WooCommerce's own positioning/click-target math (absolute
   position, negative margin + padding trick) — only override colour.
   WC's own rule is `.wc-block-components-button.wc-block-components-drawer__close`
   (2 classes) with `color:inherit!important`, loaded after our stylesheet;
   matching that exact selector plus one ancestor class guarantees higher
   specificity so our colour wins regardless of load order. */
.wc-block-mini-cart__drawer .wc-block-components-button.wc-block-components-drawer__close{
  position:absolute !important;
  top:1.4rem !important; right:1.5rem !important;
  box-sizing:border-box !important;
  width:32px !important; height:32px !important;
  min-width:32px !important; min-height:32px !important;
  max-width:32px !important; max-height:32px !important;
  margin:0 !important; padding:0 !important;
  line-height:32px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  color: var(--color-dark) !important;
  border-radius:50%;
  box-shadow:none !important;
  outline:none !important;
  opacity:1 !important;
}
.wc-block-mini-cart__drawer .wc-block-components-button.wc-block-components-drawer__close svg{
  fill: var(--color-dark) !important;
  width:16px !important; height:16px !important;
}
.wc-block-mini-cart__drawer .wc-block-components-button.wc-block-components-drawer__close:hover,
.wc-block-mini-cart__drawer .wc-block-components-button.wc-block-components-drawer__close:focus,
.wc-block-mini-cart__drawer .wc-block-components-button.wc-block-components-drawer__close:focus-visible{
  background: rgba(43,42,46,.08) !important;
  box-shadow: 0 0 0 2px var(--color-gold) !important;
  outline:none !important;
}

/* Cart item rows */
.wc-block-cart-items{ width:100%; border-collapse:collapse; }
.wc-block-cart-items__header{ display:none; }
.wc-block-cart-items__row{ border-bottom: 1px dashed rgba(43,42,46,.14); }
.wc-block-cart-items__row:last-child{ border-bottom:none; }
.wc-block-cart-item__image{ width:64px; padding: 1.1rem .9rem 1.1rem 0; vertical-align:top; }
.wc-block-cart-item__image img{
  width:64px; height:64px; object-fit:cover; border-radius: var(--radius-s);
}
/* The block renders two <img> tags and toggles which is visible via the
   [hidden] attribute (WordPress Interactivity API bindings) — our own
   sizing rule above has higher specificity than the browser's native
   [hidden]{display:none}, which was showing both stacked. Restore it. */
.wc-block-cart-item__image img[hidden]{ display:none !important; }
.wc-block-cart-item__product{ padding: 1.1rem 0; vertical-align:top; }
.wc-block-components-product-name{
  display:block;
  font-family: var(--font-head); font-size:1.2rem; font-weight:600;
  color: var(--color-dark); line-height:1.35;
}
.wc-block-cart-item__prices .wc-block-components-product-price{
  display:block; margin-top:.3rem;
  font-size:.95rem; color: rgba(43,42,46,.6);
}
.wc-block-components-product-price .wc-block-components-product-price__regular{
  text-decoration: line-through; opacity:.6; margin-right:.4em;
}
.wc-block-components-product-details{ margin-top:.4rem; font-size:.92rem; color: var(--color-mauve); }
.wc-block-components-product-details__name{ font-weight:600; }

.wc-block-cart-item__quantity{ display:flex; align-items:center; gap:.6rem; margin-top:.7rem; }
.wc-block-components-quantity-selector{
  display:flex; align-items:center;
  border:1px solid rgba(43,42,46,.18);
  border-radius: var(--radius-pill);
  width: fit-content;
  overflow:hidden;
}
.wc-block-components-quantity-selector__button{
  width:26px; height:26px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; color: var(--color-dark);
  font-size:.85rem; line-height:1;
}
.wc-block-components-quantity-selector__button:hover{ background: rgba(43,42,46,.06); }
.wc-block-components-quantity-selector__input{
  width:28px; text-align:center; border:none; background:none;
  font-family: var(--font-body); font-size:.95rem; font-weight:600; color: var(--color-dark);
}
.wc-block-components-quantity-selector__input::-webkit-inner-spin-button,
.wc-block-components-quantity-selector__input::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
.wc-block-cart-item__remove-link{
  width:28px; height:28px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:none; background:none; color: rgba(43,42,46,.4);
  border-radius:50%; transition: color .2s ease, background-color .2s ease;
}
.wc-block-cart-item__remove-link svg{ width:16px; height:16px; fill:currentColor; }
.wc-block-cart-item__remove-link:hover{ color:#b3413a; background: rgba(179,65,58,.08); }

.wc-block-cart-item__total{ padding: 1.1rem 0 1.1rem 1rem; vertical-align:top; text-align:right; }
.wc-block-cart-item__total .wc-block-components-product-price{
  font-family: var(--font-head); font-size:1.05rem; font-weight:700; color: var(--color-dark); white-space:nowrap;
}
.wc-block-components-product-badge.wc-block-components-sale-badge{
  margin-top:.3rem; font-size:.72rem; color: var(--color-mauve);
}

/* Footer: subtotal + actions */
.wc-block-mini-cart__footer{
  margin-top: 1rem; padding-top: 1.2rem;
  border-top: 1px solid rgba(43,42,46,.12);
}
.wc-block-mini-cart__footer-subtotal{
  display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap;
  margin-bottom: .3rem;
}
.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__label{
  font-size:1.1rem; font-weight:600; color: var(--color-dark);
}
.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__value{
  font-family: var(--font-head); font-size:1.35rem; font-weight:700; color: var(--color-dark);
}
.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__description{
  width:100%; font-size:1.05rem; color: rgba(43,42,46,.6); margin-top:.3rem;
}
.wc-block-mini-cart__footer-actions{
  display:flex; gap:.7rem; margin-top:1.1rem;
}
.wc-block-mini-cart__footer-actions .wc-block-components-button{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  padding:.8rem 1rem;
  font-family: var(--font-body); font-size:.95rem; font-weight:600;
  border-radius: var(--radius-pill);
  transition: background-color .3s ease, border-color .3s ease, transform .3s ease;
}
.wc-block-mini-cart__footer-actions .wc-block-components-button .wc-block-components-button__text{
  font-size: inherit; font-weight: inherit;
}
.wc-block-mini-cart__footer-cart{
  background:none; border:1px solid rgba(43,42,46,.2); color: rgba(43,42,46,.75);
}
.wc-block-mini-cart__footer-cart:hover{ border-color: var(--color-dark); color: var(--color-dark); }
.wc-block-mini-cart__footer-checkout{
  background:none; border:1px solid rgba(var(--color-gold-rgb),.55); color: var(--color-dark);
}
.wc-block-mini-cart__footer-checkout:hover{ background: rgba(var(--color-gold-rgb),.1); border-color: var(--color-gold); }

/* Empty state */
.wc-block-mini-cart__empty-cart-wrapper{ padding: 2rem 0 1rem; text-align:center; }
.wc-block-mini-cart__empty-cart-wrapper p{
  font-family: var(--font-head); font-size:1.05rem; color: var(--color-dark); margin-bottom:1.4rem;
}
.wc-block-mini-cart__shopping-button{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.75rem 1.7rem;
  font-family: var(--font-body); font-size:.88rem; font-weight:600;
  border-radius: var(--radius-pill);
  background: var(--color-gold); color: var(--color-dark);
  transition: background-color .3s ease;
}
.wc-block-mini-cart__shopping-button:hover{ background: var(--color-gold-light); }

/* ============================================================
   BACK TO TOP
   ============================================================ */
.back-to-top{
  position: fixed; right:1.4rem; bottom:1.4rem; z-index:400;
  width:48px; height:48px; border-radius:50%;
  background: var(--color-dark-deep); color: var(--color-cream);
  display:flex; align-items:center; justify-content:center;
  border:none;
  opacity:0; visibility:hidden; transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top svg{ width:18px; height:18px; }

.ornament{
  display:none;
  align-items:center; justify-content:center; gap: .8rem;
  padding: .5rem 0 0;
  color: var(--color-gold);
}
.ornament svg{ width:26px; height:26px; }
@media (max-width: 767px){
  .ornament{ display:flex; }
}

/* ============================================================
   WORDPRESS CORE COMPAT (alignments, captions, screen-reader text)
   ============================================================ */
.alignleft{ float:left; margin-right:1.5rem; }
.alignright{ float:right; margin-left:1.5rem; }
.aligncenter{ display:block; margin-left:auto; margin-right:auto; }
.screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); }
.wp-caption{ max-width:100%; }
.wp-caption-text{ font-size:.85rem; color: rgba(43,42,46,.6); margin-top:.5rem; }