/* ========== Lively Theme (global) ========== */
:root{
  --brand-green:#1f614a; --ink:#20302b; --ink-strong:#152521; --muted:#5b6a63;
  --card:#ffffff; --accent-soft:#e6f3ef; --chip:#f3f8f6; --cta:#f48b5a;
  --shadow-soft:0 14px 34px rgba(20,40,35,.10);
  --shadow-card:0 10px 22px rgba(0,0,0,.06);
  --radius:22px;
  --hl-peach: rgba(244,139,90,.20);
  --hl-peach-strong: rgba(244,139,90,.32);
  --hl-mint: rgba(31,97,74,.15);
  --hl-mint-strong: rgba(31,97,74,.26);
}

/* container & page layering */
.page{position:relative; isolation:isolate;}
.section{position:relative; z-index:1; max-width:1100px; margin-inline:auto; padding:0 1rem;}

/* Background – subtle floral suns */
.bg-floral{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-color:#fff6ea;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='rgb(255,204,142)' stroke-width='6' stroke-linecap='round' opacity='.6'%3E%3Ccircle cx='120' cy='120' r='42' fill='rgb(255,233,205)' stroke='none'/%3E%3Cg transform='translate(120 120)'%3E%3Cpath d='M0-88V-58'/%3E%3Cpath d='M0 88V58'/%3E%3Cpath d='M-88 0H-58'/%3E%3Cpath d='M88 0H58'/%3E%3Cpath d='M62-62L44-44'/%3E%3Cpath d='M-62 62L-44 44'/%3E%3Cpath d='M62 62L44 44'/%3E%3Cpath d='M-62-62L-44-44'/%3E%3Cpath d='M25-90L17-60'/%3E%3Cpath d='M-25 90L-17 60'/%3E%3Cpath d='M90 25L60 17'/%3E%3Cpath d='M-90 -25L-60 -17'/%3E%3Cg transform='rotate(22.5)'%3E%3Cpath d='M0-88V-58'/%3E%3Cpath d='M0 88V58'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='rgb(255,194,120)' stroke-width='7' stroke-linecap='round' opacity='.35'%3E%3Ccircle cx='120' cy='120' r='46' fill='rgb(255,236,214)' stroke='none'/%3E%3Cg transform='translate(120 120)'%3E%3Cpath d='M0-96V-64'/%3E%3Cpath d='M0 96V64'/%3E%3Cpath d='M-96 0H-64'/%3E%3Cpath d='M96 0H64'/%3E%3Cpath d='M68-68L46-46'/%3E%3Cpath d='M-68 68L-46 46'/%3E%3Cpath d='M68 68L46 46'/%3E%3Cpath d='M-68-68L-46-46'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(135deg, rgba(234,246,241,.18), rgba(255,232,220,.14) 40%, rgba(255,255,255,0) 70%);
  background-repeat: repeat, repeat, no-repeat;
  background-size: 320px 320px, 520px 520px, 100% 100%;
  background-position: 0 0, 60% 20%, 0 0;
  filter: saturate(104%);
}

/* Local underlay for any section that wants soft bloom */
.section--underlay{margin-top:0; padding-top:14px; z-index:0;}
.section--underlay::before{
  content:""; position:absolute; left:-18px; right:-18px; top:0; bottom:-12px;
  z-index:-1; border-radius:56px;
  background:
    radial-gradient(520px 250px at 50% -20px, rgba(234,246,241,.35) 0%, transparent 70%),
    radial-gradient(480px 230px at 10% 10px,  rgba(255,232,220,.30) 0%, transparent 68%);
  pointer-events:none;
}

/* Hero */
.hero{display:grid; grid-template-columns:1.15fr .85fr; gap:1.5rem; align-items:center; position:relative; z-index:3;}
@media (max-width:980px){ .hero{grid-template-columns:1fr;} }
.hero-text h1{line-height:1.02; margin:.2rem 0 .7rem; color:#0f2e26;}
.meta{color:var(--muted);}
.btn.btn-cta{background:var(--cta); color:#fff; border-radius:999px; padding:.9rem 1.25rem; display:inline-inline; box-shadow:0 10px 22px rgba(244,139,90,.25); position:relative; z-index:4;}
.btn.btn-cta:hover{transform:translateY(-1px); transition:.2s ease;}
.hero-media{display:flex; justify-content:flex-end;}
.photo-card{
  overflow:hidden; margin:0; width:clamp(260px,34vw,420px); background:#fff; box-shadow:var(--shadow-soft);
  border-radius:34px 24px 42px 18px / 28px 36px 22px 44px;
}
.photo-card img{width:100%; height:auto; display:block;}

/* Feature cards */
.cards{display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.2rem; align-items:start;}
@media (max-width:980px){ .cards{grid-template-columns:1fr;} }

.card{
  position:relative; border:none; background:transparent; box-shadow:var(--shadow-card);
  padding:1.25rem 1.25rem 1.35rem; z-index:1; color:var(--ink-strong);
  transition: transform .22s ease, filter .22s ease;
}
.card::before{
  content:""; position:absolute; inset:-6px -8px -10px; z-index:-1;
  background: linear-gradient(180deg,#ffffff,#fffdf9 70%);
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 30px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.8);
  --c1: radial-gradient(56px 44px at 24% 38%, #000 98%, transparent 99%);
  --c2: radial-gradient(66px 52px at 50% 28%, #000 98%, transparent 99%);
  --c3: radial-gradient(48px 44px at 72% 42%, #000 98%, transparent 99%);
  --c4: radial-gradient(90px 64px at 50% 66%, #000 98%, transparent 99%);
  -webkit-mask: var(--c1),var(--c2),var(--c3),var(--c4);
          mask: var(--c1),var(--c2),var(--c3),var(--c4);
  border-radius:36px;
  transition: box-shadow .25s ease, border-color .25s ease, background .25s ease, transform .25s ease;
}
.card.peach::before{ background: linear-gradient(180deg,#fff6f1,#fff 70%); border-color:#e7d2c8; }
.card.mint::before { background: linear-gradient(180deg,#eef7f3,#fff 70%); border-color:#d1e3dc; }

.card h3{ margin:.15rem 0 .25rem; font-size:1.28rem; line-height:1.2; font-weight:760; letter-spacing:.01em; color:var(--ink-strong); }
.card h3::after{
  content:""; display:block; height:10px; width:clamp(120px,42%,200px);
  margin:.35rem 0 .15rem; border-radius:6px;
  background: linear-gradient(90deg, var(--hl-peach), var(--hl-mint));
  transform-origin:left center; transform:scaleX(.65); opacity:.9;
  transition: transform .25s ease, opacity .25s ease, filter .25s ease;
}
.card.peach h3::after{ background:linear-gradient(90deg, var(--hl-peach-strong), var(--hl-peach)); }
.card.mint  h3::after{ background:linear-gradient(90deg, var(--hl-mint-strong), var(--hl-mint)); }

.card p, .card li{ font-size:1.06rem; line-height:1.65; letter-spacing:.005em; color:var(--ink-strong); }
.list{ padding-left:1.1rem; margin:.2rem 0 0; }
.list li + li{ margin-top:.35rem; }
.list.check li::marker{ content:"✔ "; color:#166348; font-weight:700; font-size:1.05em; }
.list.dot   li::marker{ content:"• "; color:#915e3f; font-weight:700; font-size:1.1em; }

/* gentle tilt per column */
.cards .card:nth-child(1){ transform: rotate(-0.5deg) translateY(2px); }
.cards .card:nth-child(2){ transform: rotate(0.6deg)  translateY(10px); }
.cards .card:nth-child(3){ transform: rotate(-0.8deg) translateY(4px); }

/* Hover / focus */
.card:is(:hover, :focus-within){ transform: translateY(-4px) scale(1.01) rotate(0deg); }
.card:is(:hover, :focus-within)::before{
  box-shadow: 0 18px 36px rgba(0,0,0,.12), 0 0 0 3px rgba(31,97,74,.06) inset, inset 0 1px 0 rgba(255,255,255,.9);
  border-color: rgba(31,97,74,.14);
}
.card:is(:hover, :focus-within) h3::after{ transform:scaleX(1); filter:saturate(1.1); opacity:1; }
.card.peach:is(:hover, :focus-within)::before{ border-color: rgba(244,139,90,.18); }
.card.mint:is(:hover, :focus-within)::before { border-color: rgba(31,97,74,.18); }
.card :is(a,button,input,select,textarea):focus-visible{ outline:2px solid #134; outline-offset:2px; border-radius:6px; }

/* Reviews (safe to keep globally) */
.reviews-wrap{background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:28px; box-shadow:var(--shadow-soft); overflow:hidden; position:relative;}
.reviews-head{display:flex; align-items:center; gap:.8rem; padding:14px 16px 12px; background:linear-gradient(180deg,var(--accent-soft),#fff 80%); border-bottom:1px solid rgba(0,0,0,.05);}
.reviews-head h3{margin:0; color:var(--brand-green); font-size:1.2rem;}
.badge{margin-left:auto; display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .7rem; background:#f7faf9; border:1px solid rgba(0,0,0,.06); border-radius:999px; font-size:.85rem; color:#5b6a63; white-space:nowrap;}
.reviews-scroller{position:relative;}
.track{display:grid; grid-auto-flow:column; grid-auto-columns:min(85%,380px); gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:18px 68px;}
.track::-webkit-scrollbar{height:8px;} .track::-webkit-scrollbar-thumb{background:#e5eeea; border-radius:99px;}
@media (min-width:900px){ .track{grid-auto-columns:min(32%,380px);} }
.rev{scroll-snap-align:start; background:linear-gradient(180deg,#fff,#fffdf8 70%); border:1px solid rgba(0,0,0,.08);
     border-radius:28px 36px 24px 42px / 36px 24px 42px 28px; padding:14px 14px 12px; position:relative; box-shadow:0 8px 22px rgba(0,0,0,.06);}
.rev::before{content:"“"; position:absolute; left:12px; top:-6px; font-size:2.4rem; line-height:1; color:rgba(31,97,74,.16); font-weight:700;}
.rev p{margin:0 0 .7rem; color:var(--ink-strong); font-size:1.05rem; line-height:1.6; font-weight:620;}
.rev .meta{display:flex; align-items:center; gap:.6rem; color:var(--muted); font-size:.9rem; flex-wrap:wrap;}
.chip{padding:.22rem .65rem; background:linear-gradient(180deg,#f4faf7,#eef6f2); border:1px solid rgba(0,0,0,.06); border-radius:999px; display:inline-flex; align-items:center; gap:.42rem; font-variant-numeric:tabular-nums;}
.chip svg{width:14px; height:14px; opacity:.6;}
.rev[data-collapsed="true"] .clip{-webkit-line-clamp:3; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;}
.toggle{border:none; background:transparent; color:#267a5d; font-size:.9rem; cursor:pointer; text-underline-offset:2px; padding:0;}
.nav{position:absolute; inset:0; pointer-events:none;}
.btn-nav{pointer-events:auto; position:absolute; top:50%; transform:translateY(-50%); border:none; background:rgba(255,255,255,.95);
  box-shadow:0 10px 24px rgba(0,0,0,.12); border-radius:999px; width:40px; height:40px; display:grid; place-items:center; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;}
.btn-nav:hover{transform:translateY(-50%) scale(1.04); box-shadow:0 12px 26px rgba(0,0,0,.14);}
.btn-prev{left:20px;} .btn-next{right:20px;}
.btn-nav svg{width:18px; height:18px;}

/* Header mobile toggle state */
.site-nav{transition:max-height .25s ease, opacity .2s ease;}
@media (max-width: 900px){
  .site-nav{max-height:0; overflow:hidden; opacity:0;}
  .site-nav[data-open="true"]{max-height:480px; opacity:1;}
}
/* Layer-Reihenfolge festziehen */
.bg-floral { position: fixed; inset: 0; z-index: 0; }

.site-header { position: relative; z-index: 10; }
.page        { position: relative; z-index: 1;  }

/* Footer immer über dem Hintergrund und unter Modals */
.site-footer  { position: relative; z-index: 2; margin-top: 1.5rem; }

/* Modal darf nur sichtbar sein, wenn explizit geöffnet */
.modal-backdrop { display: none; z-index: 60; }
.modal-backdrop[aria-hidden="true"] { display: none; }
.modal-backdrop[data-open="true"]   { display: flex; }