/* Shine – Layout-Styles (Design-Tokens kommen aus theme.json) */

:root{
  --accent: var(--wp--preset--color--accent);
  --accent-dark: var(--wp--preset--color--accent-dark);
  --blue: var(--wp--preset--color--blau);
  --ink: var(--wp--preset--color--ink);
  --black: var(--wp--preset--color--black);
  --paper: var(--wp--preset--color--paper);
  --paper2: var(--wp--preset--color--paper-2);
  --muted: var(--wp--preset--color--muted);
  --white: var(--wp--preset--color--white);
  --radius: var(--wp--custom--radius, 18px);
  --maxw: var(--wp--custom--max-width, 1120px);
  --f-head: var(--wp--preset--font-family--space-grotesk);
  --f-body: var(--wp--preset--font-family--raleway);
  --f-hand: var(--wp--preset--font-family--caveat);
}

html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- Header ---------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(247,243,240,.9);backdrop-filter:blur(10px);border-bottom:1px solid #eee}
.site .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;gap:16px}
.logo img{height:34px;width:auto}

.wp-block-button__link{font-family:var(--f-head);font-weight:600;font-size:.98rem;transition:transform .15s ease,background .2s ease;line-height:1.2}
.wp-block-button__link:hover{background:var(--accent-dark);transform:translateY(-2px)}
.wp-block-button__link:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.wp-block-button.is-style-ghost .wp-block-button__link{background:transparent;color:var(--accent);border:2px solid var(--accent)}
.wp-block-button.is-style-ghost .wp-block-button__link:hover{background:var(--accent);color:#fff}
.header-cta .wp-block-button__link{font-size:.86rem;padding:.7em 1.1em}
@media(max-width:640px){.header-cta{display:none}}

/* ---------- Section framing ---------- */
section{padding:clamp(56px,9vw,110px) 0}
.s-white{background:var(--paper)}
.s-light{background:var(--paper2)}
.eyebrow{font-family:var(--f-hand);color:var(--accent);font-size:1.7rem;line-height:1;display:inline-block;margin-bottom:.4rem;transform:rotate(-2deg)}
.lead{font-size:1.12rem;max-width:60ch}
.center{text-align:center}
.center .lead,.center .grid,.center .benefits{margin-left:auto;margin-right:auto}
.mt{margin-top:1.6rem}
.mt-lg{margin-top:2.4rem}

/* ---------- Hero ---------- */
.hero{position:relative;color:#fff;text-align:center;overflow:hidden;isolation:isolate;padding:clamp(90px,16vw,180px) 0}
.hero .bg{position:absolute;inset:0;z-index:-2}
.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:42% 30%}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,14,14,.55),rgba(14,14,14,.35) 40%,rgba(14,14,14,.7))}
.hero .intro-line{font-family:var(--f-head);font-weight:700;font-size:clamp(1.4rem,3.6vw,2.1rem);margin-bottom:.2rem}
.hero h1{max-width:16ch;margin:0 auto}
.hero .sub{font-size:clamp(1.05rem,2.2vw,1.4rem);max-width:52ch;margin:1.2rem auto 2rem;font-weight:500}
mark.highlight{background:none;color:inherit;text-decoration:underline wavy var(--accent);text-decoration-thickness:2px;text-underline-offset:6px}

/* ---------- generic layouts ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.split.rev .media{order:2}
@media(max-width:820px){.split{grid-template-columns:1fr}.split.rev .media{order:0}}
.media img{border-radius:var(--radius);width:100%;aspect-ratio:4/3;object-fit:cover;box-shadow:0 20px 50px -25px rgba(0,0,0,.4)}
.media.portrait img{aspect-ratio:3/4}

.benefits{list-style:none;display:grid;gap:.6rem;max-width:640px}
.benefits li{font-weight:500}

.pain{list-style:none;display:grid;gap:.7rem;margin:1.4rem 0;max-width:560px}
.pain li{padding-left:2rem;position:relative;font-weight:500}
.pain li::before{content:"✕";position:absolute;left:0;color:var(--accent);font-weight:700}
.win li::before{content:"✓";color:#1f9d55}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.card{padding:1.6rem}
.card h4{margin-bottom:.5rem}
.card .by{font-family:var(--f-hand);color:var(--accent);font-size:1.25rem;margin-top:.6rem;display:block}

.band-cta{text-align:center;position:relative;color:#fff;isolation:isolate;overflow:hidden}
.band-cta .bg{position:absolute;inset:0;z-index:-2}
.band-cta .bg img{width:100%;height:100%;object-fit:cover}
.band-cta::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(14,14,14,.66)}

/* ---------- Carousel (So läuft's ab) ---------- */
.carousel{position:relative;max-width:900px;margin:2.4rem auto 0}
.c-viewport{overflow:hidden;border-radius:var(--radius)}
.c-track{display:flex;transition:transform .5s cubic-bezier(.5,.05,.2,1)}
.c-slide{min-width:100%;position:relative;aspect-ratio:16/10}
.c-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.c-slide .c-body{position:absolute;left:5%;right:5%;bottom:20px;padding:1.5rem 1.7rem;background:#fdfbf8;text-align:left;border-radius:12px;box-shadow:0 20px 45px -25px rgba(62,47,63,.5)}
.c-slide .c-body h3,.c-slide .c-body p{color:var(--ink)}
.c-slide h3{margin:0 0 .4rem}
.c-btn{position:absolute;top:38%;transform:translateY(-50%);z-index:3;width:48px;height:48px;border-radius:999px;border:none;background:rgba(255,255,255,.92);
       color:var(--ink);font-size:1.4rem;cursor:pointer;box-shadow:0 6px 18px -6px rgba(0,0,0,.5);display:grid;place-items:center;transition:background .2s,transform .15s}
.c-btn:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.c-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.c-prev{left:12px}.c-next{right:12px}
.c-dots{display:flex;gap:10px;justify-content:center;margin-top:1.3rem}
.c-dots button{width:11px;height:11px;border-radius:999px;border:none;background:#cfcfcf;cursor:pointer;padding:0;transition:background .2s,transform .2s}
.c-dots button[aria-current="true"]{background:var(--accent);transform:scale(1.25)}
@media(max-width:640px){.c-slide .c-body{padding:1.2rem}.c-btn{width:40px;height:40px;font-size:1.2rem}}

/* ---------- Packages + Accordion ---------- */
.pkg{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-top:2rem;align-items:start}
.pkg .card{display:flex;flex-direction:column;background:#fdfbf8;padding:2.4rem 1.8rem 1.8rem;position:relative;overflow:hidden;box-shadow:0 20px 45px -30px rgba(62,47,63,.4);text-align:center}
.pkg .card::before{content:"";position:absolute;top:0;left:0;right:0;height:10px;background:var(--accent)}
.pkg .card.featured{box-shadow:0 30px 70px -25px rgba(216,124,106,.55);transform:translateY(-10px)}
@media(max-width:780px){.pkg .card.featured{transform:none}}
.pkg .tag{font-family:var(--f-head);font-weight:700;font-size:1.5rem;letter-spacing:.02em;color:var(--ink);margin-bottom:1rem}
.pkg .price{font-family:var(--f-head);font-weight:700;font-size:1.5rem;margin-top:auto;padding-top:1rem;color:var(--ink)}
.pkg ul{list-style:none;display:grid;gap:.55rem;margin:1rem 0;text-align:left}
.pkg li{padding-left:1.5rem;position:relative;font-size:.98rem}
.pkg li::before{content:"✦";position:absolute;left:0;color:var(--accent)}

.accordion{max-width:820px;margin:2.6rem auto 0}
.accordion details{border-bottom:1px solid rgba(62,47,63,.15)}
.accordion details:first-of-type{border-top:1px solid rgba(62,47,63,.15)}
.accordion summary{list-style:none;cursor:pointer;padding:1.15rem 0;font-family:var(--f-head);font-weight:600;font-size:1.12rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary .plus{flex:0 0 auto;width:26px;height:26px;position:relative;transition:transform .3s}
.accordion summary .plus::before,.accordion summary .plus::after{content:"";position:absolute;background:var(--accent);border-radius:2px}
.accordion summary .plus::before{top:12px;left:4px;right:4px;height:2px}
.accordion summary .plus::after{left:12px;top:4px;bottom:4px;width:2px;transition:transform .3s}
.accordion details[open] summary .plus::after{transform:scaleY(0)}
.accordion .acc-body{padding:0 0 1.6rem;display:grid;gap:.9rem}
.tier{border-left:3px solid var(--accent);padding-left:.9rem}
.tier strong{font-family:var(--f-head);color:var(--accent);letter-spacing:.03em}
.tier ul{margin:.3rem 0 0;padding-left:1.1rem}
.tier li{font-size:.96rem}

.checklist{list-style:none;display:grid;gap:.7rem;max-width:640px;margin:1.4rem 0}
.checklist li{font-weight:500}
.signature{font-family:var(--f-hand);font-size:1.9rem;color:var(--accent);margin-top:1rem}

/* ---------- Footer ---------- */
footer.site{background:var(--paper-2);color:var(--ink);padding:70px 0 40px;text-align:left}
footer .f-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:40px}
footer .f-brand{max-width:320px}
footer .f-logo img{height:30px;margin-bottom:1rem}
footer .f-tagline{font-size:.95rem;color:var(--muted)}
footer .f-contacts{display:flex;gap:60px;flex-wrap:wrap}
footer .f-contact h3{font-family:var(--f-head);font-size:1.05rem;font-weight:600;margin-bottom:.7rem}
footer .f-contact ul{list-style:none;display:grid;gap:.5rem}
footer .f-contact li a{display:inline-flex;align-items:center;gap:.5rem}
footer a{color:var(--ink);text-decoration:none}
footer a:hover{color:var(--accent)}
footer .legal{font-size:.82rem;color:var(--muted);margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid rgba(62,47,63,.15)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* ---------- Header nav ---------- */
.nav{display:flex;gap:22px;align-items:center}
.nav a{font-family:var(--f-head);font-weight:500;font-size:.95rem;text-decoration:none;color:var(--ink);opacity:.8;transition:opacity .2s,color .2s}
.nav a:hover,.nav a[aria-current="page"]{opacity:1;color:var(--accent)}
@media(max-width:860px){.nav{display:none}}

/* ---------- Subpage: price hero ---------- */
.price-hero{position:relative;color:#fff;text-align:center;isolation:isolate;overflow:hidden;padding:clamp(80px,13vw,150px) 0}
.price-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,var(--black),#2b1512 60%,var(--accent-dark))}
.price-hero .tagline{font-family:var(--f-hand);color:#ffd9d1;font-size:2rem;line-height:1;display:block;margin-bottom:.3rem;transform:rotate(-2deg)}
.price-hero .intro{max-width:60ch;margin:1.4rem auto 0;font-size:1.1rem;font-weight:500}
.price-hero .price{font-family:var(--f-head);font-weight:700;font-size:clamp(1.6rem,4vw,2.3rem);margin-top:1.6rem}

/* ---------- Subpage: feature blocks ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.feature.rev .f-media{order:2}
@media(max-width:820px){.feature{grid-template-columns:1fr}.feature.rev .f-media{order:0}}
.f-num{font-family:var(--f-head);font-weight:700;font-size:3rem;line-height:1;color:var(--accent);opacity:.28}
.feature h3{margin:.2rem 0 .3rem}
.feature .sub{font-weight:600;color:var(--ink);margin-bottom:.9rem}
.feature ul{list-style:none;display:grid;gap:.55rem;margin:0 0 1rem}
.feature li{padding-left:1.5rem;position:relative}
.feature li::before{content:"✦";position:absolute;left:0;color:var(--accent)}
.why{background:#fff;border-left:4px solid var(--accent);border-radius:10px;padding:.9rem 1.1rem;font-style:italic;box-shadow:0 10px 30px -26px rgba(0,0,0,.5)}
.s-light .why{background:#fffdfb}
.f-media img{border-radius:var(--radius);width:100%;aspect-ratio:4/3;object-fit:cover;box-shadow:0 20px 50px -25px rgba(0,0,0,.4)}
.pill{display:inline-block;font-family:var(--f-head);font-weight:600;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:.3em .9em;margin-bottom:.8rem}

/* ---------- price gradient CTA-band text on package pages ---------- */
.band-cta .pill{color:#fff;border-color:#fff}
.band-cta .price-tag{font-family:var(--f-head);font-weight:700;font-size:1.6rem;margin:1rem 0}