/* ======================================================================
   Therapeutic Concepts — Thomas Willnauer
   Mobile Heilmassage & Personal Training · Wien & Oberösterreich
   Design system: charcoal + warm cream + logo-red / healing-teal
   ====================================================================== */

/* self-hosted fonts (DSGVO: keine Google-Fonts-Verbindung, keine Cookies) */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/inter-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/sora-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#15181c; --ink-2:#2b2f36; --muted:#5f6670; --muted-2:#8a9099;
  --line:#e8e2d7; --line-2:#dcd4c6;
  --cream:#faf7f1; --cream-2:#f2ece0; --white:#ffffff;
  --red:#c0392b; --red-700:#a22b20; --red-100:#f7e6e3;
  --teal:#15808f; --teal-700:#0f6473; --teal-100:#e2f1f3;
  --blue:#43628f; --gold:#d8a53e; --wa:#25d366; --wa-700:#1da851;

  --maxw:1220px; --gut:clamp(1rem,4vw,2.5rem);
  --r-sm:12px; --r:18px; --r-lg:26px;
  --sh-sm:0 2px 10px -4px rgba(20,24,28,.18);
  --sh:0 16px 50px -18px rgba(20,24,28,.30);
  --sh-lg:0 40px 90px -30px rgba(20,24,28,.45);
  --fd:'Sora',system-ui,-apple-system,Segoe UI,sans-serif;
  --fb:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  font-family:var(--fb); color:var(--ink); background:var(--cream);
  line-height:1.65; font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
h1,h2,h3,h4{font-family:var(--fd); font-weight:700; line-height:1.08; letter-spacing:-.02em; color:var(--ink)}
:focus-visible{outline:3px solid var(--teal); outline-offset:3px; border-radius:6px}
::selection{background:var(--red); color:#fff}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}
.eyebrow{
  font-family:var(--fd); font-weight:600; font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--red);
}
.eyebrow::before{content:""; display:inline-block; width:26px; height:2px; background:var(--red); vertical-align:middle; margin-right:.6rem}
.eyebrow.teal{color:var(--teal)} .eyebrow.teal::before{background:var(--teal)}
.eyebrow.light{color:#eab8b1} .eyebrow.light::before{background:#eab8b1}
h2.title{font-size:clamp(1.9rem,1.3rem + 2.6vw,3.1rem); margin:.5rem 0 .4rem}
.lead{font-size:clamp(1.05rem,1rem + .4vw,1.3rem); color:var(--muted); max-width:62ch}
.section{padding-block:clamp(3.75rem,2.5rem + 6vw,7rem)}
.center{text-align:center} .center .lead{margin-inline:auto} .center .eyebrow::before{display:none}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:.6rem; font-family:var(--fd); font-weight:600;
  font-size:.98rem; padding:.95rem 1.6rem; border-radius:999px; transition:.25s var(--ease);
  line-height:1; white-space:nowrap}
.btn svg{width:1.15em; height:1.15em}
.btn-primary{background:var(--red); color:#fff; box-shadow:0 10px 24px -10px rgba(192,57,43,.7)}
.btn-primary:hover{background:var(--red-700); transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(192,57,43,.8)}
.btn-wa{background:var(--wa); color:#fff; box-shadow:0 10px 24px -10px rgba(37,211,102,.7)}
.btn-wa:hover{background:var(--wa-700); transform:translateY(-2px)}
.btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--ink); transform:translateY(-2px)}
.btn-light{background:#fff; color:var(--ink)} .btn-light:hover{transform:translateY(-2px); box-shadow:var(--sh)}
.btn-lg{padding:1.1rem 2rem; font-size:1.05rem}
.btn-block{display:flex; width:100%; justify-content:center}

/* ---------- header ---------- */
.header{position:fixed; inset:0 0 auto 0; z-index:60; transition:.3s var(--ease)}
.header-in{display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding-block:.85rem; transition:.3s var(--ease)}
.brand{display:flex; align-items:center; gap:.7rem; font-family:var(--fd); font-weight:700;
  font-size:1.05rem; letter-spacing:-.02em}
.brand img{height:46px; width:auto; transition:.3s var(--ease)}
.brand b{color:var(--red)} .brand span{color:#fff; transition:color .3s}
.nav{display:flex; align-items:center; gap:2rem}
.nav a{font-family:var(--fd); font-weight:500; font-size:.95rem; color:#fff; opacity:.9; transition:.2s; position:relative}
.nav a:hover{opacity:1}
.nav a::after{content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--red); transition:.25s var(--ease)}
.nav a:hover::after{width:100%}
.header-cta{display:flex; align-items:center; gap:1rem}
.tel{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--fd); font-weight:600; color:#fff; font-size:.95rem}
.tel svg{width:1.05em;height:1.05em;color:var(--red)}
/* scrolled state → solid cream */
.header.scrolled{background:rgba(250,247,241,.92); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line), var(--sh-sm)}
.header.scrolled .header-in{padding-block:.55rem}
.header.scrolled .brand span, .header.scrolled .nav a, .header.scrolled .tel{color:var(--ink)}
.header.scrolled .brand img{height:40px}
.burger{display:none; width:46px; height:46px; border-radius:12px; align-items:center; justify-content:center; color:#fff}
.header.scrolled .burger{color:var(--ink)}
.burger svg{width:26px;height:26px}

/* ---------- hero ---------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; color:#fff; isolation:isolate}
.hero-bg{position:absolute; inset:0; z-index:-2; object-fit:cover; width:100%; height:100%}
.hero::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,rgba(10,13,16,.86) 0%,rgba(10,13,16,.62) 42%,rgba(10,13,16,.15) 100%),
             linear-gradient(0deg,rgba(10,13,16,.75),transparent 55%)}
.hero-in{padding-block:clamp(7rem,14vh,10rem) clamp(2.5rem,6vh,4.5rem); max-width:760px}
.hero h1{font-size:clamp(1.95rem,1.1rem + 4.4vw,4.3rem); color:#fff; margin:.6rem 0 1.1rem}
.hero h1 em{font-style:normal; color:#fff;
  background:linear-gradient(var(--red),var(--red)) no-repeat 0 92%/100% .13em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone; padding-bottom:.04em}
.hero p.sub{font-size:clamp(1.05rem,1rem + .5vw,1.35rem); color:rgba(255,255,255,.9); max-width:56ch; margin-bottom:1.9rem}
.hero-cta{display:flex; flex-wrap:wrap; gap:.9rem}
.hero-badges{display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:2.3rem; align-items:center}
.hbadge{display:inline-flex; align-items:center; gap:.6rem; font-size:.92rem; color:rgba(255,255,255,.92)}
.hbadge svg{width:1.15rem;height:1.15rem;color:var(--gold); flex:none}
.hbadge .stars{display:inline-flex; gap:1px; color:var(--gold)} .hbadge .stars svg{width:1rem;height:1rem}
.hero-tag{position:absolute; right:var(--gut); bottom:clamp(2.5rem,6vh,4.5rem); writing-mode:vertical-rl;
  font-family:var(--fd); font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.5)}

/* ---------- trust strip ---------- */
.trust{background:var(--ink); color:#fff; padding-block:1.4rem}
.trust-in{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem 2rem}
.trust-item{display:flex; align-items:center; gap:.65rem; font-family:var(--fd); font-weight:500; font-size:.92rem; color:rgba(255,255,255,.88)}
.trust-item svg{width:1.3rem;height:1.3rem;color:var(--gold); flex:none}
.trust-item b{color:#fff; font-weight:700}

/* ---------- philosophy ---------- */
.philo{background:var(--cream)}
.philo .quote{font-family:var(--fd); font-weight:600; font-size:clamp(1.5rem,1.1rem + 2vw,2.5rem);
  line-height:1.25; letter-spacing:-.02em; max-width:20ch}
.philo .quote .hl{color:var(--red)}
.philo-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,5rem); align-items:center}
.philo-points{display:grid; gap:1.3rem; margin-top:.5rem}
.pp{display:flex; gap:1rem}
.pp .ic{flex:none; width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--teal-100); color:var(--teal)}
.pp .ic svg{width:1.5rem;height:1.5rem}
.pp h4{font-size:1.12rem; margin-bottom:.15rem}
.pp p{color:var(--muted); font-size:.98rem; margin:0}

/* ---------- services ---------- */
.services{background:var(--white)}
.svc-group + .svc-group{margin-top:clamp(2.5rem,5vw,4rem)}
.svc-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.8rem}
.svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem}
.svc-grid.three{grid-template-columns:repeat(3,1fr)}
.svc-grid.two{grid-template-columns:repeat(2,1fr)}
.card{background:var(--white); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  transition:.3s var(--ease); display:flex; flex-direction:column}
.card:hover{transform:translateY(-6px); box-shadow:var(--sh); border-color:transparent}
.card-img{aspect-ratio:4/3; overflow:hidden; position:relative}
.card-img img{width:100%;height:100%;object-fit:cover; transition:.6s var(--ease)}
.card:hover .card-img img{transform:scale(1.06)}
.card-ic{position:absolute; left:14px; top:14px; width:42px;height:42px; border-radius:11px; background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px); display:grid; place-items:center; color:var(--red); box-shadow:var(--sh-sm)}
.card-ic svg{width:1.4rem;height:1.4rem}
.card-body{padding:1.25rem 1.3rem 1.45rem; display:flex; flex-direction:column; gap:.4rem; flex:1}
.card-body h4{font-size:1.18rem}
.card .tagline{display:block; font-family:var(--fd); font-weight:600; font-size:.76rem; letter-spacing:.04em; text-transform:uppercase; color:var(--teal); margin:.05rem 0 .35rem}
.card-desc{margin:0}
/* Kategorien + „Ideal bei" unten in der Karte, über gleich hohe Karten auf einer Ebene */
.card-foot{margin-top:auto; padding-top:.9rem}
.cats{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-bottom:.6rem}
.cat-ic{width:1.2rem; height:1.2rem; color:var(--teal); flex:none}
.cats span{background:var(--cream-2); color:var(--ink-2); font-family:var(--fd); font-weight:600; font-size:.72rem; padding:.24rem .55rem; border-radius:999px; white-space:nowrap}
.card .good{display:flex; gap:.45rem; align-items:flex-start; font-size:.83rem; color:var(--muted-2); line-height:1.5; min-height:2.6em}
.card .good svg{width:1rem; height:1rem; color:var(--teal); flex:none; margin-top:.15rem}
.sp-ic{display:inline-grid; place-items:center; width:52px; height:52px; border-radius:14px; background:var(--teal-100); color:var(--teal); margin:0 auto .5rem}
.sp-ic svg{width:1.5rem; height:1.5rem}
.card-body p{color:var(--muted); font-size:.95rem; margin:0}
.card-tag{align-self:flex-start; margin-top:.2rem; font-family:var(--fd); font-size:.72rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--teal); background:var(--teal-100); padding:.3rem .6rem; border-radius:6px}

/* ---------- about ---------- */
.about{background:var(--cream); overflow:hidden}
.about-grid{display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.about-media{position:relative}
.about-media img{border-radius:var(--r-lg); box-shadow:var(--sh); aspect-ratio:4/5; object-fit:cover; width:100%; position:relative; z-index:2}
.about-media::before{content:""; position:absolute; inset:auto -18px -18px auto; width:62%; height:62%;
  border-radius:var(--r-lg); background:var(--teal); opacity:.14; z-index:1}
.about-media .chip{position:absolute; z-index:3; left:-18px; bottom:28px; background:#fff; border-radius:16px;
  padding:.9rem 1.15rem; box-shadow:var(--sh); display:flex; align-items:center; gap:.7rem; max-width:230px}
.about-media .chip .n{font-family:var(--fd); font-weight:700; font-size:1.5rem; color:var(--red); line-height:1}
.about-media .chip small{color:var(--muted); font-size:.82rem; line-height:1.3; display:block}
.creds{display:grid; grid-template-columns:1fr 1fr; gap:.7rem 1.4rem; margin:1.6rem 0 1.9rem}
.cred{display:flex; gap:.6rem; align-items:flex-start; font-size:.96rem}
.cred svg{width:1.25rem;height:1.25rem;color:var(--teal); flex:none; margin-top:.15rem}
.cred b{font-family:var(--fd); font-weight:600}
.about p.bio{color:var(--ink-2); margin-bottom:1rem}

/* ---------- plans / order ---------- */
.plans{background:var(--ink); color:#fff; position:relative; overflow:hidden}
.plans .lead{color:rgba(255,255,255,.72)}
.plans h2.title{color:#fff}
.plan-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem; margin-top:2.6rem; align-items:stretch}
.plan{background:#1e232a; border:1px solid rgba(255,255,255,.1); border-radius:var(--r-lg); padding:2rem 1.7rem;
  display:flex; flex-direction:column; transition:.3s var(--ease)}
.plan:hover{transform:translateY(-6px); border-color:rgba(255,255,255,.22)}
.plan.featured{background:linear-gradient(180deg,#2a3039,#20252c); border-color:var(--red); box-shadow:var(--sh-lg); position:relative}
.plan.featured::before{content:"Beliebt"; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--red); color:#fff; font-family:var(--fd); font-weight:600; font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; padding:.35rem .9rem; border-radius:999px}
.plan h3{font-size:1.4rem; color:#fff}
.plan .price{font-family:var(--fd); font-weight:700; font-size:2.4rem; color:#fff; margin:.6rem 0 .1rem; letter-spacing:-.02em}
.plan .price small{font-size:.9rem; font-weight:500; color:rgba(255,255,255,.6)}
.plan .pdesc{color:rgba(255,255,255,.66); font-size:.95rem; margin-bottom:1.2rem}
.plan ul{list-style:none; display:grid; gap:.7rem; margin-bottom:1.6rem; flex:1}
.plan li{display:flex; gap:.6rem; align-items:flex-start; font-size:.95rem; color:rgba(255,255,255,.88)}
.plan li svg{width:1.2rem;height:1.2rem;color:var(--teal); flex:none; margin-top:.1rem}
.plan.featured li svg{color:#5fcbd8}
.plan-cta{display:flex; flex-direction:column; gap:.55rem; margin-top:auto}
.plan .btn-ghost{border-color:rgba(255,255,255,.3); color:#fff}
.plan .btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.07)}
/* schlanke Prozess-Leiste im Finder (ersetzt die separaten "4 Schritte"-Karten) */
.plan-steps{display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem 1.4rem; margin:1.6rem auto 0; max-width:760px}
.plan-steps span{display:inline-flex; align-items:center; gap:.5rem; color:rgba(255,255,255,.82); font-family:var(--fd); font-weight:600; font-size:.92rem}
.plan-steps b{width:26px; height:26px; border-radius:50%; background:var(--red); color:#fff; display:grid; place-items:center; font-size:.78rem; flex:none}
@media (max-width:1180px){.plan-grid{grid-template-columns:repeat(2,1fr); max-width:640px; margin-inline:auto}}

.order{margin-top:2.6rem; background:#fff; color:var(--ink); border-radius:var(--r-lg); padding:clamp(1.6rem,3vw,2.6rem); box-shadow:var(--sh-lg)}
.order-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.4rem}
.order h3{font-size:1.5rem; margin-bottom:.3rem}
.steps{display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; margin:1rem 0 1.6rem}
.step{display:flex; align-items:center; gap:.55rem; font-size:.9rem; color:var(--muted)}
.step b{width:26px;height:26px;border-radius:50%; background:var(--red); color:#fff; display:grid; place-items:center; font-family:var(--fd); font-size:.82rem; font-weight:700; flex:none}
.field{display:flex; flex-direction:column; gap:.4rem}
.field.full{grid-column:1 / -1}
.field label{font-family:var(--fd); font-weight:600; font-size:.85rem}
.field label .req{color:var(--red)}
.field input,.field select,.field textarea{
  font:inherit; font-size:.98rem; padding:.8rem .95rem; border:1.5px solid var(--line-2); border-radius:12px;
  background:var(--cream); transition:.2s; color:var(--ink); width:100%}
.field textarea{resize:vertical; min-height:96px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--teal); background:#fff; box-shadow:0 0 0 4px var(--teal-100)}
.pay-note{display:flex; align-items:center; gap:.6rem; font-size:.85rem; color:var(--muted); margin-top:.9rem}
.pay-note svg{width:1.1rem;height:1.1rem;color:var(--teal)}
.pay-logos{display:inline-flex; gap:.5rem; align-items:center; font-family:var(--fd); font-weight:600; font-size:.8rem; color:var(--muted)}
.pay-logos span{background:var(--cream-2); padding:.25rem .55rem; border-radius:6px}

/* ---------- reviews ---------- */
.reviews{background:var(--white)}
.rev-head{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2rem; justify-content:space-between; margin-bottom:2.2rem}
.g-score{display:flex; align-items:center; gap:1rem}
.g-score .num{font-family:var(--fd); font-weight:700; font-size:3rem; line-height:1; color:var(--ink)}
.g-score .stars{display:flex; gap:2px; color:var(--gold)} .g-score .stars svg{width:1.3rem;height:1.3rem}
.g-score small{color:var(--muted); font-size:.9rem}
.g-logo{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--fd); font-weight:600}
/* gleich große Karten (kein Masonry) – Autor unten fixiert, Text wächst dazwischen */
.rev-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; align-items:stretch}
.rev{display:flex; flex-direction:column; background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  padding:1.5rem 1.5rem 1.35rem}
.rev p{flex:1 0 auto}
.rev .who{margin-top:auto}
.rev .g-badge{display:inline-flex; align-items:center; gap:.4rem; margin-top:.9rem; font-size:.78rem; color:var(--muted-2); font-family:var(--fd)}
.rev .g-badge svg{width:.95rem; height:.95rem}
.rev .stars{display:flex; gap:1px; color:var(--gold); margin-bottom:.7rem} .rev .stars svg{width:1.05rem;height:1.05rem}
.rev p{font-size:.97rem; color:var(--ink-2); margin:0 0 .9rem}
.rev .who{display:flex; align-items:center; gap:.7rem}
.rev .av{width:38px;height:38px;border-radius:50%; background:var(--teal); color:#fff; display:grid; place-items:center;
  font-family:var(--fd); font-weight:700; font-size:1rem; flex:none}
.rev .who b{font-family:var(--fd); font-size:.92rem; display:block; line-height:1.2}
.rev .who small{color:var(--muted-2); font-size:.8rem; display:inline-flex; align-items:center; gap:.35rem}
/* Google-Rezensionen: anklickbare Karten + wischbarer Startseiten-Slider */
a.rev{text-decoration:none; color:inherit; cursor:pointer; transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease}
a.rev:hover{border-color:var(--teal); transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.06)}
.rev-carousel{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(280px,320px); gap:1.3rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:.4rem .2rem 1.1rem; margin:0 -.2rem; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch}
.rev-carousel > .rev{scroll-snap-align:start; height:auto}
.rev-carousel::-webkit-scrollbar{height:8px}
.rev-carousel::-webkit-scrollbar-thumb{background:var(--line); border-radius:99px}
.rev-swipe-hint{display:flex; align-items:center; gap:.4rem; color:var(--muted); font-size:.85rem; margin:0 .1rem .8rem}
@media(min-width:1024px){ .rev-swipe-hint{display:none} }
/* klickbare Google-Bewertungs-Badges (Sterne / „37 Google-Bewertungen") */
.g-link{text-decoration:none; color:inherit; cursor:pointer; transition:opacity .15s ease}
.g-link:hover{opacity:.82}
.g-link:hover .num, .g-link:hover b{color:var(--teal)}
a.g-score{display:flex}
.gg{width:13px; height:13px; flex:none}

/* ---------- gallery ---------- */
.gallery{background:var(--cream)}
.gal-grid{columns:3; column-gap:1rem}
.gal-grid button{break-inside:avoid; margin-bottom:1rem; display:block; width:100%; border-radius:var(--r);
  overflow:hidden; position:relative; box-shadow:var(--sh-sm)}
.gal-grid img{width:100%; transition:.5s var(--ease)}
.gal-grid button::after{content:""; position:absolute; inset:0; background:rgba(21,24,28,0); transition:.3s}
.gal-grid button:hover img{transform:scale(1.05)}
.gal-grid button:hover::after{background:rgba(21,24,28,.18)}

/* lightbox */
.lightbox{position:fixed; inset:0; z-index:120; background:rgba(12,14,17,.94); display:none; place-items:center; padding:1.5rem}
.lightbox.open{display:grid}
.lightbox img{max-width:min(94vw,1200px); max-height:88vh; border-radius:12px; box-shadow:var(--sh-lg)}
.lb-close,.lb-nav{position:absolute; color:#fff; width:52px;height:52px; border-radius:50%; background:rgba(255,255,255,.12);
  display:grid; place-items:center; transition:.2s; backdrop-filter:blur(6px)}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.25)}
.lb-close{top:1.3rem; right:1.3rem} .lb-close svg{width:26px;height:26px}
.lb-nav{top:50%; transform:translateY(-50%)} .lb-nav svg{width:28px;height:28px}
.lb-prev{left:1.3rem} .lb-next{right:1.3rem}

/* ---------- contact ---------- */
.contact{background:var(--ink); color:#fff}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem)}
.contact h2.title{color:#fff}
.contact .lead{color:rgba(255,255,255,.72)}
.c-list{display:grid; gap:1.1rem; margin:2rem 0}
.c-item{display:flex; gap:1rem; align-items:center}
.c-item .ic{flex:none; width:50px;height:50px;border-radius:14px; background:rgba(255,255,255,.08); display:grid; place-items:center; color:var(--red)}
.c-item .ic svg{width:1.5rem;height:1.5rem}
.c-item .lbl{font-size:.82rem; color:rgba(255,255,255,.55); font-family:var(--fd); letter-spacing:.04em; text-transform:uppercase}
.c-item a,.c-item span{font-family:var(--fd); font-weight:600; font-size:1.08rem; color:#fff}
.c-item .ic.wa{color:var(--wa)}
.contact-form{background:#fff; color:var(--ink); border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2.3rem); box-shadow:var(--sh-lg)}
.contact-form h3{font-size:1.35rem; margin-bottom:1.2rem}
.cf-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem}

/* ---------- footer ---------- */
.footer{background:#0f1215; color:rgba(255,255,255,.7); padding-block:clamp(3rem,5vw,4.5rem) 2rem}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:2rem}
.footer .brand span{color:#fff}
.footer p{font-size:.92rem; margin-top:1rem; max-width:34ch}
.footer h5{font-family:var(--fd); color:#fff; font-size:.95rem; margin-bottom:1rem; letter-spacing:.02em}
.footer ul{list-style:none; display:grid; gap:.6rem}
.footer a{font-size:.92rem; transition:.2s} .footer a:hover{color:#fff}
.footer .soc{display:flex; gap:.7rem; margin-top:1.2rem}
.footer .soc a{width:40px;height:40px;border-radius:11px; background:rgba(255,255,255,.08); display:grid; place-items:center; color:#fff; transition:.2s}
.footer .soc a:hover{background:var(--red); transform:translateY(-2px)}
.footer .soc svg{width:1.25rem;height:1.25rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1); margin-top:2.5rem; padding-top:1.5rem;
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between; font-size:.85rem; color:rgba(255,255,255,.5)}

/* ---------- floating: WhatsApp + chat ---------- */
/* WhatsApp-Button sitzt GANZ UNTEN; der Chatbot-Launcher wird per JS darüber gehoben (bottom:90px) */
.fab{position:fixed; right:20px; bottom:20px; z-index:90; display:flex; flex-direction:column; gap:.8rem}
.fab-btn{width:58px;height:58px;border-radius:50%; display:grid; place-items:center; color:#fff; box-shadow:var(--sh);
  transition:.25s var(--ease)}
.fab-btn:hover{transform:scale(1.08)}
.fab-wa{background:var(--wa)} .fab-chat{background:var(--ink)}
.fab-btn svg{width:28px;height:28px}
.fab-btn .pulse{position:absolute; inset:0; border-radius:50%; background:inherit; opacity:0; animation:pulse 2.4s ease-out 3; z-index:-1}
@keyframes pulse{0%{transform:scale(1);opacity:.6}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}

/* chat panel */
.chat{position:fixed; right:clamp(1rem,3vw,1.6rem); bottom:calc(clamp(1rem,3vw,1.6rem) + 70px); width:min(360px,calc(100vw - 2rem));
  z-index:95; background:#fff; border-radius:20px; box-shadow:var(--sh-lg); overflow:hidden; transform:translateY(20px) scale(.96);
  opacity:0; pointer-events:none; transition:.3s var(--ease)}
.chat.open{transform:none; opacity:1; pointer-events:auto}
.chat-head{background:var(--ink); color:#fff; padding:1.1rem 1.2rem; display:flex; align-items:center; gap:.8rem}
.chat-head img{width:40px;height:40px;border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.3)}
.chat-head .t{flex:1} .chat-head b{font-family:var(--fd); font-size:.98rem; display:block}
.chat-head small{font-size:.78rem; color:rgba(255,255,255,.65); display:flex; align-items:center; gap:.35rem}
.chat-head small::before{content:""; width:7px;height:7px;border-radius:50%; background:var(--wa)}
.chat-head .x{color:rgba(255,255,255,.7)} .chat-head .x svg{width:22px;height:22px}
.chat-body{padding:1.2rem; display:flex; flex-direction:column; gap:.7rem; max-height:min(420px,52vh); overflow-y:auto; background:var(--cream)}
.msg{max-width:85%; padding:.7rem .95rem; border-radius:16px; font-size:.92rem; line-height:1.5}
.msg.bot{background:#fff; border:1px solid var(--line); border-bottom-left-radius:5px; align-self:flex-start}
.msg.user{background:var(--teal); color:#fff; border-bottom-right-radius:5px; align-self:flex-end}
.chat-quick{display:flex; flex-wrap:wrap; gap:.5rem; padding:.3rem 1.2rem 1rem; background:var(--cream)}
.chat-quick button{font-family:var(--fd); font-weight:500; font-size:.85rem; padding:.5rem .85rem; border:1.5px solid var(--line-2);
  border-radius:999px; background:#fff; transition:.2s}
.chat-quick button:hover{border-color:var(--teal); color:var(--teal)}
.chat-foot{padding:.8rem 1.2rem; border-top:1px solid var(--line); background:#fff}
.chat-foot a{display:flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--fd); font-weight:600; font-size:.9rem; color:var(--wa-700)}
.chat-foot svg{width:1.1rem;height:1.1rem}

/* ---------- reveal animation ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:.7s var(--ease)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important} .reveal{opacity:1; transform:none}}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .header .tel,.header-cta .btn-primary{display:none}
  .burger{display:grid}
  /* WICHTIG: backdrop-filter auf dem Header erzeugt einen Containing-Block für position:fixed –
     dann klebt die ausgeklappte Nav (Kind des Headers) am ~60px-Header statt am Viewport
     (unsichtbarer Streifen, nicht klickbar). Auf Mobile daher ohne backdrop-filter, dafür deckender BG. */
  .header.scrolled{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(250,247,241,.98)}
  /* Header über das Scrim heben, sonst sitzt die Nav (Kind des Headers, z-index:60-Kontext) unter dem Scrim */
  .header{z-index:150}
  .nav{position:fixed; inset:0 0 0 auto; width:min(320px,82vw); flex-direction:column; align-items:flex-start;
    gap:.4rem; background:var(--cream); padding:6rem 2rem 2rem; box-shadow:var(--sh-lg); transform:translateX(100%);
    transition:.35s var(--ease); z-index:130; display:flex}
  .nav.open{transform:none}
  .nav a{color:var(--ink); font-size:1.15rem; width:100%; padding:.6rem 0; border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  .svc-grid,.svc-grid.three{grid-template-columns:repeat(2,1fr)}
  .plan-grid{grid-template-columns:1fr; max-width:460px; margin-inline:auto}
  .plan.featured{order:-1}
  .gal-grid{columns:2}
  .rev-grid{grid-template-columns:repeat(2,1fr)}
  .philo-grid,.about-grid,.contact-grid{grid-template-columns:1fr}
  .about-media{max-width:440px; margin-inline:auto}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .hero h1{font-size:clamp(1.5rem,5.6vw,2.25rem); overflow-wrap:break-word; hyphens:auto}
  .hero p.sub{font-size:1.02rem}
  .hero-in{max-width:none}
  .hero-badges{gap:.7rem 1.2rem; margin-top:1.6rem}
  .eyebrow{letter-spacing:.1em; font-size:.72rem}
  .order-grid,.cf-grid{grid-template-columns:1fr}
  .creds{grid-template-columns:1fr}
  .gal-grid{columns:1}
  .rev-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-tag{display:none}
}
@media (max-width:560px){
  /* schmale Phones: Karten einspaltig, damit Titel/Text nicht abgeschnitten werden */
  .svc-grid,.svc-grid.two,.svc-grid.three{grid-template-columns:1fr}
}
/* ---------- mobile hardening: kein horizontaler Overflow + größere Touch-Ziele ---------- */
/* .pagehero ist ein Flex-Container → .wrap darf nicht über die Viewport-Breite hinauswachsen */
.pagehero > .wrap{min-width:0; max-width:100%}
.pagehero h1, .pagehero .ph-sub, .breadcrumb{overflow-wrap:break-word; hyphens:auto}
.hero-cta .btn{white-space:normal; text-align:center}
/* Kontakt-Kacheln: lange E-Mail / Instagram-Handle darf umbrechen statt zu überlaufen */
.c-item{min-width:0} .c-item > div{min-width:0; flex:1 1 auto} .c-item span{overflow-wrap:anywhere}
@media (max-width:760px){
  .footer ul a{display:inline-block; padding:.55rem 0}   /* größere Touch-Ziele im Footer (~40px) */
  .footer ul{gap:.15rem}
  .breadcrumb a{display:inline-block; padding:.15rem 0}
  .legal .back{padding:.55rem 0}
}

.nav-scrim{position:fixed; inset:0; background:rgba(12,14,17,.5); z-index:140; opacity:0; pointer-events:none; transition:.3s}
.nav-scrim.open{opacity:1; pointer-events:auto}

/* ---------- cookie consent ---------- */
.cookie{position:fixed;left:20px;bottom:20px;z-index:120;width:min(400px,calc(100vw - 40px));
  background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-lg);padding:1.2rem 1.25rem;animation:ckin .4s var(--ease)}
@keyframes ckin{from{opacity:0;transform:translateY(14px)}}
.cookie p{font-size:.9rem;line-height:1.55;color:var(--ink-2);margin:0 0 .9rem}
.cookie p b{color:var(--ink)}
.cookie a{color:var(--teal);text-decoration:underline;text-underline-offset:2px}
.cookie-btns{display:flex;gap:.6rem;flex-wrap:wrap}
.cookie-btns .btn{flex:1 1 auto;padding:.7rem 1.1rem;min-height:46px;font-size:.92rem;justify-content:center;min-width:120px}
.cookie[hidden]{display:none}
@media (max-width:560px){.cookie{left:12px;bottom:12px;width:calc(100vw - 24px);padding:1rem}}

/* ---------- legal pages (Impressum / Datenschutz) ---------- */
.legalbar{position:fixed;inset:0 0 auto 0;background:rgba(250,247,241,.95);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line),var(--sh-sm);z-index:50}
.legalbar .brand span{color:var(--ink)} .legalbar .brand b{color:var(--red)}
.legal{max-width:820px;margin-inline:auto;padding:clamp(6.5rem,10vh,8rem) var(--gut) 4rem}
.legal .back{display:inline-flex;align-items:center;gap:.45rem;color:var(--muted);font-family:var(--fd);font-weight:600;font-size:.9rem;margin-bottom:1.6rem}
.legal .back:hover{color:var(--red)} .legal .back svg{width:1.05em;height:1.05em}
.legal h1{font-size:clamp(1.9rem,1.2rem+2vw,2.7rem);margin-bottom:.4rem}
.legal .updated{color:var(--muted-2);font-size:.9rem;margin-bottom:2rem}
.legal h2{font-size:1.25rem;margin:2.2rem 0 .6rem}
.legal p,.legal li{color:var(--ink-2);margin-bottom:.7rem}
.legal ul{padding-left:1.2rem;margin-bottom:1rem}
.legal a{color:var(--teal);text-decoration:underline;text-underline-offset:2px}
.legal .todo{background:#fff5d6;border-left:3px solid var(--gold);padding:.15rem .45rem;border-radius:4px;font-style:normal}

/* ---------- subpage components (multi-page) ---------- */
.pagehero{position:relative;color:#fff;isolation:isolate;padding:clamp(7rem,16vh,10rem) 0 clamp(2.5rem,7vh,4.5rem);display:flex;align-items:flex-end;min-height:clamp(340px,52vh,520px)}
.pagehero .bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.pagehero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,13,16,.86),rgba(10,13,16,.45) 70%),linear-gradient(0deg,rgba(10,13,16,.6),transparent 50%)}
.pagehero h1{font-size:clamp(2rem,1.3rem+3vw,3.5rem);color:#fff;margin:.5rem 0 .7rem;max-width:20ch}
.pagehero .ph-sub{color:rgba(255,255,255,.9);max-width:58ch;font-size:clamp(1.02rem,1rem+.3vw,1.22rem)}
.pagehero .hero-cta{margin-top:1.6rem}
.breadcrumb{font-family:var(--fd);font-size:.82rem;color:rgba(255,255,255,.7);margin-bottom:.3rem;display:flex;gap:.45rem;flex-wrap:wrap;align-items:center}
.breadcrumb a:hover{color:#fff;text-decoration:underline} .breadcrumb .sep{opacity:.5}
.prose{max-width:760px} .prose p{margin-bottom:1rem;color:var(--ink-2)} .prose h2{margin:2.2rem 0 .7rem;font-size:1.5rem} .prose h3{margin:1.4rem 0 .4rem;font-size:1.2rem} .prose ul{padding-left:1.2rem;margin-bottom:1rem} .prose li{margin-bottom:.4rem;color:var(--ink-2)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split + .split{margin-top:clamp(2.5rem,6vw,5rem)}
.split-media img{border-radius:var(--r-lg);box-shadow:var(--sh);width:100%;aspect-ratio:4/3;object-fit:cover}
.split.rev .split-media{order:2}
.feature{display:flex;gap:1.1rem;align-items:flex-start;padding:1.4rem 0;border-bottom:1px solid var(--line)}
.feature:last-child{border-bottom:0}
.feature .ic{flex:none;width:54px;height:54px;border-radius:15px;background:var(--teal-100);color:var(--teal);display:grid;place-items:center}
.feature .ic svg{width:1.6rem;height:1.6rem}
.feature h3{font-size:1.25rem;margin-bottom:.2rem} .feature p{color:var(--muted);margin:0}
.cta-band{background:var(--red);color:#fff;text-align:center}
.cta-band h2{color:#fff;margin-bottom:.5rem} .cta-band p{color:rgba(255,255,255,.9);max-width:52ch;margin:0 auto 1.6rem}
.cta-band .btn-light{color:var(--red)} .cta-band .btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.video-card{border-radius:var(--r);overflow:hidden;background:#000;position:relative;aspect-ratio:9/16;box-shadow:var(--sh-sm);display:block}
.video-card img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:.3s}
.video-card:hover img{opacity:1;transform:scale(1.04)}
.video-card .play{position:absolute;inset:0;display:grid;place-items:center}
.video-card .play span{width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;box-shadow:var(--sh)}
.video-card .play svg{width:26px;height:26px;color:var(--red);margin-left:3px}
.video-card .vlabel{position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1rem .9rem;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent);color:#fff;font-family:var(--fd);font-weight:600;font-size:.95rem}
@media(max-width:860px){.split{grid-template-columns:1fr}.split.rev .split-media{order:0}.video-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.video-grid{grid-template-columns:1fr 1fr}}

.nav a.active{opacity:1}
.nav a.active::after{width:100%}
.header.scrolled .nav a.active{color:var(--red)}

/* ---------- Beratungs-Maske (adaptive wizard) ---------- */
.wiz{max-width:720px;margin:2.6rem auto 0;background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-lg);overflow:hidden;color:var(--ink)}
.wiz-bar{height:6px;background:var(--cream-2)}
.wiz-bar i{display:block;height:100%;background:var(--red);width:0;transition:width .4s var(--ease);border-radius:0 3px 3px 0}
.wiz-in{padding:clamp(1.6rem,4vw,2.8rem)}
.wiz-step{animation:wizIn .4s var(--ease)}
@keyframes wizIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.wiz-kicker{font-family:var(--fd);font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:.5rem}
.wiz-q{font-family:var(--fd);font-weight:700;font-size:clamp(1.3rem,1rem+1.4vw,1.8rem);line-height:1.2;letter-spacing:-.02em;margin-bottom:.4rem}
.wiz-help{color:var(--muted);margin-bottom:1.4rem;font-size:.97rem}
.wiz-opts{display:grid;gap:.75rem}
.wiz-opts.cols{grid-template-columns:1fr 1fr}
.wiz-opt{display:flex;align-items:center;gap:.9rem;padding:1rem 1.1rem;border:1.5px solid var(--line-2);border-radius:14px;background:var(--cream);cursor:pointer;transition:.18s var(--ease);font-family:var(--fd);font-weight:600;font-size:1rem;text-align:left;width:100%}
.wiz-opt:hover{border-color:var(--teal);transform:translateY(-2px)}
.wiz-opt.sel{border-color:var(--red);background:var(--red-100)}
.wiz-opt .emo{font-size:1.4rem;flex:none;width:1.6rem;text-align:center}
.wiz-opt small{display:block;font-family:var(--fb);font-weight:400;color:var(--muted);font-size:.85rem;margin-top:.1rem}
.wiz-fields{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.wiz-fields .full{grid-column:1/-1}
.wiz-fields label{font-family:var(--fd);font-weight:600;font-size:.82rem;display:block;margin-bottom:.35rem}
.wiz-fields input,.wiz-fields select,.wiz-fields textarea{width:100%;font:inherit;font-size:.98rem;padding:.75rem .9rem;border:1.5px solid var(--line-2);border-radius:11px;background:var(--cream)}
.wiz-fields input:focus,.wiz-fields select:focus,.wiz-fields textarea:focus{outline:none;border-color:var(--teal);background:#fff;box-shadow:0 0 0 4px var(--teal-100)}
.wiz-nav{display:flex;justify-content:space-between;align-items:center;margin-top:1.6rem;gap:1rem}
.wiz-back{font-family:var(--fd);font-weight:600;color:var(--muted);font-size:.92rem;display:inline-flex;align-items:center;gap:.3rem}
.wiz-back:hover{color:var(--ink)} .wiz-back svg{width:1.1em;height:1.1em}
.wiz-back[hidden]{visibility:hidden}
/* analysis */
.wiz-analysis{text-align:center;padding:1rem 0}
.wiz-analysis .spin{width:54px;height:54px;border-radius:50%;border:4px solid var(--cream-2);border-top-color:var(--red);margin:0 auto 1.4rem;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.wiz-steps{max-width:380px;margin:0 auto;text-align:left;display:grid;gap:.7rem}
.wiz-steps li{display:flex;align-items:center;gap:.7rem;font-family:var(--fd);font-weight:500;color:var(--muted-2);opacity:.45;transition:.3s;list-style:none}
.wiz-steps li.on{opacity:1;color:var(--ink)} .wiz-steps li.done{opacity:1;color:var(--ink)}
.wiz-steps .dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--line-2);flex:none;display:grid;place-items:center}
.wiz-steps li.done .dot{background:var(--teal);border-color:var(--teal)} .wiz-steps li.done .dot svg{width:13px;height:13px;color:#fff}
.wiz-steps li.on .dot{border-color:var(--red)}
/* offer */
/* Plan live-generieren + gerenderter Plan */
.wiz-gen{text-align:center}
.wiz-gen .spin{width:48px;height:48px;border-radius:50%;border:4px solid var(--cream-2);border-top-color:var(--red);margin:.4rem auto 1rem;animation:spin 1s linear infinite}
.plan-out{text-align:left;margin-top:1.4rem;color:var(--ink-2);font-size:.96rem;line-height:1.62}
.plan-out h1{font-size:1.5rem;color:var(--ink);margin:.1rem 0 .5rem}
.plan-out h2{font-size:1.2rem;color:var(--ink);margin:1.5rem 0 .5rem;padding-bottom:.3rem;border-bottom:1px solid var(--line)}
.plan-out h3{font-size:1.05rem;color:var(--ink);margin:1.1rem 0 .3rem;font-family:var(--fd)}
.plan-out p{margin:.5rem 0}
.plan-out ul,.plan-out ol{margin:.5rem 0 .9rem;padding-left:1.25rem;display:grid;gap:.3rem}
.plan-out table{width:100%;border-collapse:collapse;margin:.9rem 0;font-size:.9rem}
.plan-out th,.plan-out td{border:1px solid var(--line);padding:.5rem .6rem;text-align:left;vertical-align:top}
.plan-out th{background:var(--cream);font-family:var(--fd);font-weight:600}
.plan-out hr{border:0;border-top:1px solid var(--line);margin:1.3rem 0}
.plan-out b{color:var(--ink)}
/* Druck/PDF: nur den fertigen Plan drucken */
@media print {
  body{background:#fff}
  body *{visibility:hidden!important}
  #planOut, #planOut *{visibility:visible!important}
  #planOut{position:absolute;left:0;top:0;width:100%;font-size:11pt;color:#111}
  #planOut h1,#planOut h2,#planOut h3,#planOut b{color:#000}
}
.wiz-offer{text-align:center}
.wiz-offer .badge{display:inline-flex;align-items:center;gap:.4rem;background:var(--teal-100);color:var(--teal-700);font-family:var(--fd);font-weight:600;font-size:.8rem;padding:.4rem .8rem;border-radius:999px;margin-bottom:1rem}
.wiz-offer h3{font-size:clamp(1.5rem,1.1rem+1.6vw,2.1rem);margin-bottom:.4rem}
.wiz-summary{text-align:left;background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:1.2rem 1.4rem;margin:1.4rem 0;display:grid;gap:.55rem}
.wiz-summary .row{display:flex;justify-content:space-between;gap:1rem;font-size:.95rem;border-bottom:1px dashed var(--line-2);padding-bottom:.5rem}
.wiz-summary .row:last-child{border-bottom:0;padding-bottom:0}
.wiz-summary .row b{font-family:var(--fd)}
.wiz-price{font-family:var(--fd);font-weight:800;font-size:2.6rem;color:var(--ink);letter-spacing:-.02em;line-height:1}
.wiz-price small{font-size:.9rem;font-weight:500;color:var(--muted)}
.wiz-note{display:flex;align-items:center;justify-content:center;gap:.5rem;color:var(--muted);font-size:.85rem;margin-top:.9rem}
.wiz-note svg{width:1.05rem;height:1.05rem;color:var(--teal)}
.wiz-alt{margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--line);color:var(--muted);font-size:.92rem}
@media(max-width:560px){.wiz-opts.cols,.wiz-fields{grid-template-columns:1fr}}

/* wizard: multi-select chips + skip + einschätzung */
.wiz-chips{display:flex;flex-wrap:wrap;gap:.6rem}
.wiz-chip{font-family:var(--fd);font-weight:600;font-size:.95rem;padding:.7rem 1.05rem;border:1.5px solid var(--line-2);border-radius:999px;background:var(--cream);cursor:pointer;transition:.16s var(--ease);display:inline-flex;align-items:center;gap:.45rem}
.wiz-chip:hover{border-color:var(--teal);transform:translateY(-2px)}
.wiz-chip.sel{border-color:var(--red);background:var(--red);color:#fff}
.wiz-chip .ck{width:1rem;height:1rem;opacity:0;width:0;transition:.16s;overflow:hidden}
.wiz-chip.sel .ck{opacity:1;width:1rem}
.wiz-err{color:var(--red);font-family:var(--fd);font-weight:600;font-size:.88rem;margin-top:.8rem;display:none}
.wiz-err.show{display:block}
.wiz-skip{background:none;border:0;color:var(--muted);font-family:var(--fd);font-weight:600;font-size:.9rem;text-decoration:underline;cursor:pointer}
.wiz-skip:hover{color:var(--ink)}
.wiz-assess{text-align:left;background:var(--teal-100);border-radius:14px;padding:1rem 1.2rem;margin:0 0 1rem;font-size:.97rem;color:var(--teal-700);display:flex;gap:.7rem;align-items:flex-start}
.wiz-assess svg{width:1.3rem;height:1.3rem;flex:none;margin-top:.1rem}
.wiz-assess small{display:block;color:var(--muted);margin-top:.3rem;font-size:.82rem}

/* ---------- plan detail modal ---------- */
.pmodal{position:fixed;inset:0;z-index:130;background:rgba(12,14,17,.62);backdrop-filter:blur(4px);display:none;align-items:flex-start;justify-content:center;padding:clamp(1rem,4vw,3rem);overflow-y:auto}
.pmodal.open{display:flex}
.pmodal-panel{background:#fff;color:var(--ink);border-radius:var(--r-lg);max-width:660px;width:100%;box-shadow:var(--sh-lg);overflow:hidden;animation:wizIn .35s var(--ease);margin:auto}
.pmodal-top{position:relative;padding:clamp(1.5rem,3.5vw,2.3rem);color:#fff;background:linear-gradient(135deg,#242a31,#15181c)}
.pmodal-top .pclose{position:absolute;top:1rem;right:1rem;color:rgba(255,255,255,.75);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;transition:.2s}
.pmodal-top .pclose:hover{background:rgba(255,255,255,.22)} .pmodal-top .pclose svg{width:22px;height:22px}
.pmodal-top .ptag{font-family:var(--fd);font-weight:600;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:#eab8b1;margin-bottom:.5rem}
.pmodal-top h3{color:#fff;font-size:clamp(1.5rem,1.1rem+1.6vw,2.1rem);margin:0}
.pmodal-top .pprice{font-family:var(--fd);font-weight:800;font-size:2.1rem;margin-top:.7rem;letter-spacing:-.02em}
.pmodal-top .pprice small{font-size:.85rem;font-weight:500;color:rgba(255,255,255,.6)}
.pmodal-body{padding:clamp(1.5rem,3.5vw,2.3rem)}
.pmodal-body .intro{color:var(--ink-2);margin-bottom:.4rem;font-size:1.02rem}
.pmodal-body h4{font-family:var(--fd);font-size:1.02rem;margin:1.5rem 0 .7rem;display:flex;align-items:center;gap:.5rem}
.pmodal-body h4 svg{width:1.15rem;height:1.15rem;color:var(--red)}
.pmodal-body ul{list-style:none;display:grid;gap:.6rem;margin:0}
.pmodal-body li{display:flex;gap:.6rem;align-items:flex-start;font-size:.97rem;color:var(--ink-2)}
.pmodal-body li svg{width:1.2rem;height:1.2rem;color:var(--teal);flex:none;margin-top:.12rem}
.pmodal-steps{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin-top:.4rem}
.pmodal-steps span{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--muted)}
.pmodal-steps b{width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-family:var(--fd);font-size:.78rem;flex:none}
.pmodal-note{background:#fff5e6;border-left:3px solid var(--gold);border-radius:8px;padding:.7rem .9rem;font-size:.86rem;color:var(--ink-2);margin-top:1.3rem}
.pmodal-cta{padding:0 clamp(1.5rem,3.5vw,2.3rem) clamp(1.5rem,3.5vw,2.3rem)}
.plan-more{background:none;border:0;color:var(--teal-700);font-family:var(--fd);font-weight:600;font-size:.88rem;cursor:pointer;text-decoration:underline;margin-top:.2rem}
.plan-more:hover{color:var(--teal)}