/* ═══════════════════════════════════════════════
   Rosalia Laser & Beauty — Design System
   ═══════════════════════════════════════════════ */

:root{
  /* Flächen */
  --cream:      #FAF7F5;
  --cream-2:    #F4EDE9;
  --white:      #FFFFFF;
  --blush:      #F7EDEA;
  --blush-2:    #F2E1DD;

  /* Akzente */
  --rose:       #C0879A;
  --rose-600:   #A2647A;
  --rose-100:   #EFDCE0;
  --gold:       #B08D5B;

  /* Text */
  --ink:        #1F1B1C;
  --ink-2:      #4E4548;
  --ink-3:      #857A7D;
  --line:       #E9DFDA;

  /* Typo */
  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --sans:  'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Maße */
  --wrap: 1220px;
  --r-s: 10px;
  --r-m: 18px;
  --r-l: 28px;

  --sh-s: 0 2px 10px rgba(60,40,45,.05);
  --sh-m: 0 14px 40px -18px rgba(60,40,45,.22);
  --sh-l: 0 40px 80px -40px rgba(60,40,45,.35);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ── Reset ─────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:104px}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(15.5px,.35vw + 15px,17px);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
[hidden]{display:none !important}   /* schlägt display:grid der Preis-Gruppen */
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; font-family:var(--serif); font-weight:400; line-height:1.1; letter-spacing:-.005em}
p{margin:0 0 1em}
ul,ol{margin:0; padding:0; list-style:none}
:focus-visible{outline:2px solid var(--rose-600); outline-offset:3px; border-radius:4px}

.skip-link{
  position:absolute; left:50%; top:-100px; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:.7em 1.4em; border-radius:0 0 8px 8px; z-index:200;
  transition:top .2s;
}
.skip-link:focus{top:0}

.wrap{width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto}
.wrap--narrow{width:min(100% - 2.5rem, 840px)}

/* ── Bausteine ─────────────────────────────── */
.eyebrow{
  font-size:.7rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--rose-600); margin:0 0 1.1em;
}
.eyebrow--light{color:rgba(255,255,255,.72)}

.btn{
  --bg:var(--ink); --fg:#fff; --bd:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  background:var(--bg); color:var(--fg); border:1px solid var(--bd);
  padding:.95em 1.9em; border-radius:100px;
  font-size:.83rem; font-weight:400; letter-spacing:.09em; text-transform:uppercase;
  line-height:1; white-space:nowrap;
  transition:transform .35s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .35s;
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--sh-m)}
.btn:active{transform:translateY(0)}
.btn svg{transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--primary{--bg:var(--rose-600); --bd:var(--rose-600)}
.btn--primary:hover{--bg:#8E5468; --bd:#8E5468}
.btn--ghost{--bg:transparent; --fg:var(--ink); --bd:var(--line)}
.btn--ghost:hover{--bd:var(--rose); --fg:var(--rose-600)}
.btn--light{--bg:#fff; --fg:var(--ink); --bd:#fff}
.btn--outline-light{--bg:transparent; --fg:#fff; --bd:rgba(255,255,255,.4)}
.btn--outline-light:hover{--bd:#fff}
.btn--sm{padding:.75em 1.35em; font-size:.72rem}
.btn--full{width:100%}

.link{
  display:inline-flex; align-items:center; gap:.45em;
  font-size:.86rem; letter-spacing:.05em; color:var(--rose-600);
  border-bottom:1px solid var(--rose-100); padding-bottom:2px;
  transition:border-color .3s, gap .3s var(--ease);
}
.link:hover{border-color:var(--rose); gap:.75em}

.sec{padding:clamp(4.5rem,9vw,8.5rem) 0}
.sec--blush{background:var(--blush); }
.sec__head{max-width:640px; margin:0 0 clamp(2.5rem,5vw,4rem)}
.sec__head h2{font-size:clamp(2.1rem,4.4vw,3.5rem)}
.sec__lead{margin-top:1.1em; color:var(--ink-2); font-size:1.02rem}

/* Scroll-Reveal */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal[data-delay="1"]{transition-delay:.09s}
.reveal[data-delay="2"]{transition-delay:.18s}
.reveal[data-delay="3"]{transition-delay:.27s}
.reveal[data-delay="4"]{transition-delay:.36s}
.reveal[data-delay="5"]{transition-delay:.45s}

/* ── Topbar ────────────────────────────────── */
.topbar{background:var(--ink); color:rgba(255,255,255,.8); font-size:.76rem; letter-spacing:.04em}
.topbar__in{display:flex; align-items:center; justify-content:space-between; gap:2rem; min-height:40px}
.topbar__note{margin:0; display:flex; align-items:center; gap:.6em}
.topbar .dot{width:6px; height:6px; border-radius:50%; background:var(--rose); flex:none}
.topbar__links{display:flex; align-items:center; gap:1rem}
.topbar__links a{transition:color .25s}
.topbar__links a:hover{color:#fff}
.topbar .sep{width:1px; height:12px; background:rgba(255,255,255,.22)}

/* ── Header ────────────────────────────────── */
.hdr{
  position:sticky; top:0; z-index:100;
  border-bottom:1px solid transparent;
  transition:border-color .35s, box-shadow .35s;
}
/* Weichzeichner liegt bewusst auf einem Pseudo-Element statt auf .hdr selbst:
   backdrop-filter würde den Header zum Bezugsrahmen für position:fixed machen —
   das mobile Menü (ein Kind des Headers) hätte sich dann am Header statt am
   Bildschirm ausgerichtet und wäre nur 78 px hoch gewesen. */
.hdr::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:rgba(250,247,245,.72);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  transition:background .35s;
}
.hdr.is-stuck::before{background:rgba(255,255,255,.88)}
.hdr.is-stuck{border-bottom-color:var(--line); box-shadow:0 1px 24px -12px rgba(60,40,45,.3)}
.hdr__in{display:flex; align-items:center; justify-content:space-between; gap:2rem; min-height:78px}
/* Wie beim Burger: über dem geöffneten Menü-Overlay (99), damit der Header
   auch bei offenem Menü vollständig bleibt. */
.hdr__logo{position:relative; z-index:101}
.hdr__logo img{width:clamp(132px,14vw,168px); height:auto}

.nav{display:flex; align-items:center; gap:clamp(1rem,2.2vw,2rem)}
.nav > a:not(.btn){
  position:relative; font-size:.85rem; letter-spacing:.045em; color:var(--ink-2);
  padding:.35em 0; transition:color .25s;
}
.nav > a:not(.btn)::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--rose); transition:width .35s var(--ease);
}
.nav > a:not(.btn):hover{color:var(--ink)}
.nav > a:not(.btn):hover::after{width:100%}
.nav__cta{margin-left:.4rem}

/* z-index über dem geöffneten Menü (99), sonst verdeckt das Overlay
   den Schließen-Button. */
.burger{display:none; width:44px; height:44px; position:relative; z-index:101; margin-right:-10px}
.burger span{
  position:absolute; left:11px; width:22px; height:1.5px; background:var(--ink); border-radius:2px;
  transition:transform .35s var(--ease), opacity .2s;
}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:21.5px}
.burger span:nth-child(3){top:27px}
.burger.is-open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ── Hero ──────────────────────────────────── */
.hero{position:relative; padding-top:clamp(3.5rem,7vw,6rem); overflow:hidden;
  background:linear-gradient(180deg,var(--cream) 0%,var(--cream) 45%,#fff 78%)}
.hero__glow{
  position:absolute; inset:-30% -20% auto; height:640px; pointer-events:none;
  background:
    radial-gradient(46% 55% at 24% 42%, rgba(192,135,154,.20), transparent 68%),
    radial-gradient(40% 50% at 78% 30%, rgba(176,141,91,.14), transparent 70%);
  filter:blur(12px);
  animation:drift 22s ease-in-out infinite alternate;
}
@keyframes drift{to{transform:translate3d(-3%,3%,0) scale(1.08)}}
.hero__in{position:relative; text-align:center; max-width:880px}
.hero__title{font-size:clamp(2.6rem,6.6vw,5.1rem); line-height:1.04; margin-bottom:.4em}
.hero__title em{font-style:italic; color:var(--rose-600); font-weight:300}
.hero__lead{max-width:600px; margin-inline:auto; color:var(--ink-2); font-size:clamp(1rem,1.4vw,1.12rem)}
.hero__cta{display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:2.2rem}
.hero__trust{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1rem;
  margin-top:2.6rem; font-size:.83rem; color:var(--ink-3);
}
.hero__trust p{margin:0}
.hero__trust .sep{width:1px; height:16px; background:var(--line)}
.rating{display:flex; align-items:center; gap:.55em}
.rating strong{font-family:var(--serif); font-size:1.35rem; color:var(--ink); line-height:1}
.rating__meta{color:var(--ink-3)}
.stars{display:inline-flex; gap:2px}
.stars svg{width:15px; height:15px; fill:var(--gold)}

.hero__img{margin:clamp(2.5rem,5vw,4rem) 0 0; background:#fff}
.hero__img img{width:100%; max-width:1500px; margin-inline:auto}

/* ── USP ───────────────────────────────────── */
.usp{background:#fff; padding:clamp(3rem,5vw,4.5rem) 0; border-bottom:1px solid var(--line)}
.usp__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.5rem,3vw,3rem)}
.usp__item h3{font-size:1.18rem; margin-bottom:.5em}
.usp__item p{margin:0; font-size:.9rem; color:var(--ink-3); line-height:1.65}
.usp__ico{
  display:grid; place-items:center; width:52px; height:52px; margin-bottom:1.1rem;
  border-radius:50%; background:var(--blush); color:var(--rose-600);
}
.usp__ico svg{width:26px; height:26px}

/* ── Karten ────────────────────────────────── */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.2vw,2rem)}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s;
}
.card:hover{transform:translateY(-6px); box-shadow:var(--sh-l); border-color:transparent}
.card__media{aspect-ratio:16/10; overflow:hidden; background:var(--cream-2)}
.card__media img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.card:hover .card__media img{transform:scale(1.06)}
.card__body{padding:clamp(1.5rem,2.4vw,2.1rem); display:flex; flex-direction:column; flex:1}
.card__kicker{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
  margin:0 0 .7em; font-weight:500;
}
.card__body h3{font-size:1.6rem; margin-bottom:.55em}
.card__body > p{color:var(--ink-2); font-size:.93rem; margin-bottom:1.3em}
.card__list{margin-bottom:1.6em; font-size:.87rem; color:var(--ink-3)}
.card__list li{position:relative; padding-left:1.4em; margin-bottom:.5em}
.card__list li::before{
  content:''; position:absolute; left:0; top:.62em; width:6px; height:6px;
  border-radius:50%; background:var(--rose-100); box-shadow:0 0 0 3px rgba(192,135,154,.12);
}
.card__body .link{margin-top:auto; align-self:flex-start}

/* ── Hauttyp-Finder ────────────────────────── */
.finder{
  position:relative; background:#fff; border-radius:var(--r-l); padding:clamp(1.6rem,3.4vw,3.2rem);
  box-shadow:var(--sh-m); max-width:940px; margin-inline:auto; overflow:hidden;
}
.finder__bar{position:absolute; inset:0 0 auto; height:3px; background:var(--blush-2)}
.finder__bar span{display:block; height:100%; width:50%; background:var(--rose); transition:width .6s var(--ease)}
.finder__step{display:none}
.finder__step.is-active{display:block; animation:fade .5s var(--ease) both}
@keyframes fade{from{opacity:0; transform:translateY(14px)}}
.finder__count{font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin:0 0 .8em}
.finder__q{font-size:clamp(1.5rem,2.8vw,2.1rem); margin-bottom:1.6em}

.opts{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.opts--skin{grid-template-columns:repeat(4,1fr)}
.opt{
  display:flex; flex-direction:column; align-items:flex-start; gap:.25rem;
  padding:1.4rem 1.3rem; text-align:left;
  border:1px solid var(--line); border-radius:var(--r-m); background:var(--cream);
  transition:border-color .3s, background .3s, transform .35s var(--ease), box-shadow .35s;
}
.opt:hover{border-color:var(--rose); background:#fff; transform:translateY(-3px); box-shadow:var(--sh-m)}
.opt.is-sel{border-color:var(--rose-600); background:#fff; box-shadow:0 0 0 1px var(--rose-600)}
.opt__txt{display:flex; flex-direction:column; gap:.25rem}
.opt strong{font-weight:400; font-size:1.02rem}
.opt small{color:var(--ink-3); font-size:.8rem; line-height:1.45}
.opt__ico{display:block; width:44px; height:44px; margin-bottom:.7rem; color:var(--rose-600)}
.opt__ico svg{width:100%; height:100%}
.opt--skin{align-items:center; text-align:center}
.swatch{
  width:46px; height:46px; border-radius:50%; background:var(--sw); margin-bottom:.7rem;
  box-shadow:inset 0 -6px 12px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.05);
}
.finder__back{
  margin-top:1.8rem; font-size:.82rem; color:var(--ink-3); letter-spacing:.04em;
  transition:color .25s;
}
.finder__back:hover{color:var(--rose-600)}

.finder__result .finder__q{color:var(--rose-600); margin-bottom:.5em}
.finder__res-text{color:var(--ink-2); max-width:56ch}
.finder__facts{display:flex; flex-wrap:wrap; gap:.6rem; margin:1.6rem 0 2rem}
.finder__facts li{
  background:var(--blush); color:var(--rose-600); border-radius:100px;
  padding:.5em 1.1em; font-size:.79rem; letter-spacing:.05em;
}
.finder__actions{display:flex; flex-wrap:wrap; gap:.8rem}
.finder__note{margin:1.8rem 0 0; font-size:.78rem; color:var(--ink-3); line-height:1.6; max-width:60ch}

/* ── Technologie ───────────────────────────── */
.tech{background:#fff; border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden}
.tech__tabs{display:flex; border-bottom:1px solid var(--line)}
.tech__tab{
  flex:1; padding:1.4rem 1rem; text-align:center; position:relative;
  font-size:.95rem; letter-spacing:.03em; color:var(--ink-3);
  transition:color .3s, background .3s;
}
.tech__tab span{display:block; font-size:.72rem; letter-spacing:.14em; color:var(--ink-3); opacity:.7; margin-top:.3em}
.tech__tab:hover{background:var(--cream); color:var(--ink)}
.tech__tab.is-active{color:var(--ink)}
.tech__tab.is-active span{color:var(--rose-600); opacity:1}
.tech__tab.is-active::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--rose);
  animation:grow .45s var(--ease) both;
}
@keyframes grow{from{transform:scaleX(0)}}
.tech__tab + .tech__tab{border-left:1px solid var(--line)}

.tech__body{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.5rem,3vw,3rem);
  padding:clamp(1.6rem,3vw,2.8rem)}
.tech__viz{background:var(--cream); border-radius:var(--r-m); padding:1.2rem}
.skin{width:100%; height:auto; display:block}
.skin__lbl text{font-family:var(--sans); font-size:11px; letter-spacing:.12em; text-transform:uppercase; fill:#B08D5B; opacity:.85}
.skin__depth{font-family:var(--sans); font-size:11.5px; fill:var(--rose-600); letter-spacing:.04em}
#depthLine,#depthLabel{transition:transform .7s var(--ease)}
#beam{transition:height .7s var(--ease)}
.beam{animation:beamPulse 2.6s ease-in-out infinite}
@keyframes beamPulse{0%,100%{opacity:.55}50%{opacity:1}}
#bulb{transition:fill .7s var(--ease)}
#pulse{animation:pulseRing 2.6s ease-out infinite}
@keyframes pulseRing{
  0%{r:12; opacity:0}
  35%{opacity:.7}
  70%{r:26; opacity:0}
  100%{opacity:0}
}
.tech__scale{display:flex; align-items:center; gap:.7rem; margin-top:1rem; font-size:.68rem; letter-spacing:.1em; color:var(--ink-3)}
.tech__ruler{
  position:relative; flex:1; height:4px; border-radius:4px;
  background:linear-gradient(90deg,#8E6BAE,#C0879A,#D9A05B,#C46A5A);
}
.tech__ruler i{
  position:absolute; top:50%; width:14px; height:14px; margin-left:-7px; border-radius:50%;
  background:#fff; border:2px solid var(--ink); transform:translateY(-50%);
  transition:left .7s var(--ease);
  left:20%;
}

.tech__info h3{font-size:clamp(1.6rem,2.6vw,2.1rem); margin-bottom:.5em}
.tech__info > p{color:var(--ink-2); font-size:.95rem}
.specs{margin:1.8rem 0; display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.5rem}
.specs div{border-top:1px solid var(--line); padding-top:.7rem}
.specs dt{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.25em}
.specs dd{margin:0; font-size:.95rem}
.tech__meter p{display:flex; justify-content:space-between; align-items:baseline; margin:0 0 .4em; font-size:.82rem; color:var(--ink-2)}
.tech__meter em{font-style:normal; font-family:var(--serif); font-size:1.05rem}
.tech__meter p + .meter{margin-bottom:1.1rem}
.meter{height:5px; border-radius:5px; background:var(--blush-2); overflow:hidden}
.meter i{display:block; height:100%; border-radius:5px; background:linear-gradient(90deg,var(--rose),var(--rose-600));
  transition:width .8s var(--ease)}

/* ── Stats ─────────────────────────────────── */
.stats{background:var(--ink); color:#fff; padding:clamp(3rem,5vw,4.5rem) 0}
.stats__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:2rem; text-align:center}
.stat strong{display:block; font-family:var(--serif); font-weight:300; font-size:clamp(2.4rem,4.5vw,3.6rem); line-height:1; color:#fff}
.stat span{display:block; margin-top:.7em; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55)}

/* ── Vorher/Nachher ────────────────────────── */
.ba{display:grid; grid-template-columns:1fr 340px; gap:clamp(1.5rem,3vw,3rem); align-items:start}
.ba__stage{background:var(--cream-2); border-radius:var(--r-l); padding:clamp(.8rem,1.6vw,1.4rem)}
.ba__frame{
  position:relative; aspect-ratio:4/5; max-width:520px; margin-inline:auto;
  border-radius:var(--r-m); overflow:hidden; user-select:none; touch-action:pan-y;
  box-shadow:var(--sh-m); background:#EDE4E0;
}
.ba__frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* Der Vorher-Layer liegt deckungsgleich über dem Nachher-Bild und wird nur maskiert —
   so bleiben beide Aufnahmen exakt in Deckung, unabhängig von der Containergröße. */
.ba__before{position:absolute; inset:0; clip-path:inset(0 50% 0 0)}
.ba__tag{
  position:absolute; top:1rem; z-index:3;
  background:rgba(31,27,28,.62); color:#fff; backdrop-filter:blur(6px);
  padding:.4em 1em; border-radius:100px; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
}
.ba__tag--l{left:1rem}
.ba__tag--r{right:1rem}
.ba__handle{
  position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px; z-index:4;
  background:rgba(255,255,255,.9); box-shadow:0 0 14px rgba(0,0,0,.28); pointer-events:none;
}
.ba__knob{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%; background:#fff; color:var(--ink);
  display:grid; place-items:center; box-shadow:0 6px 20px rgba(0,0,0,.24);
  transition:transform .3s var(--ease);
}
.ba__frame:hover .ba__knob{transform:translate(-50%,-50%) scale(1.08)}
.ba__range{
  position:absolute; inset:0; width:100%; height:100%; z-index:5; margin:0;
  opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none; background:transparent;
}
.ba__range::-webkit-slider-thumb{-webkit-appearance:none; width:52px; height:100%; cursor:ew-resize}
.ba__range::-moz-range-thumb{width:52px; height:100%; border:0; background:transparent; cursor:ew-resize}
.ba__range:focus-visible + .ba__handle,
.ba__frame:focus-within .ba__handle{box-shadow:0 0 0 2px var(--rose-600), 0 0 14px rgba(0,0,0,.28)}

.ba__side{padding-top:.5rem}
.ba__kicker{font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin-bottom:1.2em}
.ba__list{display:flex; flex-direction:column; gap:.7rem}
.ba__pick{
  display:flex; align-items:center; gap:1rem; padding:.6rem; text-align:left;
  border:1px solid var(--line); border-radius:var(--r-m); background:#fff;
  transition:border-color .3s, transform .35s var(--ease), box-shadow .35s;
}
.ba__pick:hover{transform:translateX(4px); box-shadow:var(--sh-m)}
.ba__pick.is-active{border-color:var(--rose-600); box-shadow:0 0 0 1px var(--rose-600)}
.ba__pick img{width:56px; height:64px; object-fit:cover; border-radius:8px; flex:none}
.ba__pick span{display:flex; flex-direction:column}
.ba__pick strong{font-weight:400; font-size:1rem}
.ba__pick small{color:var(--ink-3); font-size:.78rem}
.ba__note{margin:1.6rem 0 0; font-size:.78rem; color:var(--ink-3); line-height:1.6}

/* ── Ablauf ────────────────────────────────── */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.5rem,3vw,2.5rem); counter-reset:s}
.step{position:relative; padding-top:2.6rem}
.step::before{
  content:''; position:absolute; top:.55rem; left:0; right:-1.5rem; height:1px; background:var(--blush-2);
}
.step:last-child::before{right:0}
.step::after{
  content:''; position:absolute; top:0; left:0; width:11px; height:11px; border-radius:50%;
  background:var(--rose); box-shadow:0 0 0 5px rgba(192,135,154,.16);
}
.step__n{
  display:block; font-family:var(--serif); font-size:.95rem; letter-spacing:.2em;
  color:var(--rose-600); margin-bottom:.8em;
}
.step h3{font-size:1.28rem; margin-bottom:.55em}
.step p{margin:0; font-size:.89rem; color:var(--ink-2); line-height:1.65}

/* ── Preise ────────────────────────────────── */
.tabs{
  position:relative; display:inline-flex; padding:5px; margin-bottom:clamp(2rem,3.5vw,3rem);
  background:var(--cream-2); border-radius:100px;
}
.tabs__btn{
  position:relative; z-index:2; padding:.7em 2.2em; border-radius:100px;
  font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  transition:color .35s;
}
.tabs__btn.is-active{color:#fff}
.tabs__ink{
  position:absolute; z-index:1; top:5px; bottom:5px; left:5px; border-radius:100px;
  background:var(--rose-600); transition:transform .45s var(--ease), width .45s var(--ease);
}

.prices{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.2vw,2rem); align-items:start}
.price{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-l);
  padding:clamp(1.8rem,3vw,2.6rem); position:relative;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.price:hover{transform:translateY(-5px); box-shadow:var(--sh-l)}
.price--hl{border-color:transparent; box-shadow:var(--sh-m); background:linear-gradient(180deg,#fff,var(--blush))}
.price__badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:.45em 1.2em; border-radius:100px;
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; margin:0; white-space:nowrap;
}
.price__name{font-family:var(--serif); font-size:1.5rem; margin:0 0 .3em}
.price__val{font-family:var(--serif); font-size:clamp(2.8rem,5vw,3.6rem); line-height:1; margin:0; color:var(--ink)}
.price__val span{font-size:.42em; vertical-align:.75em; margin-right:.12em; color:var(--rose-600)}
.price__per{font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:.7em 0 1.6em}
.price ul{margin-bottom:2rem; font-size:.92rem}
.price ul li{position:relative; padding-left:1.7em; margin-bottom:.6em; color:var(--ink-2)}
.price ul li::before{
  content:''; position:absolute; left:0; top:.45em; width:9px; height:5px;
  border-left:1.5px solid var(--rose-600); border-bottom:1.5px solid var(--rose-600);
  transform:rotate(-45deg);
}
.prices--4{grid-template-columns:repeat(4,1fr)}
.prices--2{grid-template-columns:repeat(2,1fr); max-width:760px}
.prices--4 .price{padding:clamp(1.4rem,2.2vw,1.9rem)}
.prices--4 .price__val{font-size:clamp(2.3rem,3.6vw,2.9rem)}
.prices__foot{margin:2.5rem 0 0; font-size:.9rem; color:var(--ink-3)}

/* Einzelpreis-Liste */
.pricelist{
  margin-top:clamp(2rem,3.5vw,3rem); background:#fff; border:1px solid var(--line);
  border-radius:var(--r-l); padding:clamp(1.6rem,3vw,2.4rem);
}
.pricelist__h{font-size:1.35rem; margin-bottom:1.2rem}
.pricelist__ul{columns:2; column-gap:clamp(2rem,5vw,4rem)}
.pricelist__ul li{
  display:flex; align-items:baseline; gap:.8rem; break-inside:avoid;
  padding:.75em 0; border-bottom:1px dotted var(--line); font-size:.95rem;
}
.pricelist__ul li span{color:var(--ink-2)}
.pricelist__ul li b{
  margin-left:auto; font-family:var(--serif); font-size:1.15rem; font-weight:500; white-space:nowrap;
}
.pricelist--note p{margin:0; color:var(--ink-2); font-size:.95rem; max-width:60ch}

.pricelist__cta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:1.6rem; padding-top:1.6rem; border-top:1px solid var(--line);
}
.pricelist__cta p{margin:0; font-size:.88rem; color:var(--ink-3); max-width:38ch}
.pricelist__cta-btns{display:flex; flex-wrap:wrap; gap:.6rem}
@media (max-width:560px){
  .pricelist__cta{flex-direction:column; align-items:stretch}
  .pricelist__cta-btns{flex-direction:column}
  .pricelist__cta-btns .btn{width:100%}
}

/* Google-Bewertungen */
.greviews{min-height:60px}
.revs-fallback{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.2rem,2.2vw,2rem)}
.gcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-l);
  padding:clamp(1.6rem,2.8vw,2.4rem); display:flex; flex-direction:column; align-items:flex-start;
}
.gcard__head{display:flex; align-items:center; gap:.9rem; margin-bottom:1.4rem}
.gcard__logo{display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--cream); flex:none}
.gcard__name{margin:0; font-family:var(--serif); font-size:1.35rem; line-height:1.2}
.gcard__sub{margin:0; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.gcard__score{display:flex; align-items:center; gap:.7rem; margin:.6rem 0 1.1rem}
.gcard__score strong{font-family:var(--serif); font-weight:400; font-size:2.4rem; line-height:1}
.gcard--tw .gcard__name{margin-bottom:.2em}
.gcard__note{font-size:.88rem; color:var(--ink-3); margin-bottom:1.8rem; max-width:44ch}
.gcard .btn{margin-top:auto}

/* ── Split / Studio ────────────────────────── */
.sec--split{background:#fff}
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center}
.split__media{position:relative; border-radius:var(--r-l); overflow:hidden}
.split__media img{width:100%; aspect-ratio:4/3; object-fit:cover}
.split__media--tall img{aspect-ratio:4/5}
.split__badge{
  position:absolute; right:1.4rem; bottom:1.4rem;
  background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  border-radius:var(--r-m); padding:1rem 1.4rem; text-align:center; box-shadow:var(--sh-m);
}
.split__badge strong{display:block; font-family:var(--serif); font-size:1.7rem; line-height:1}
.split__badge span{font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.split__body h2{font-size:clamp(1.9rem,3.6vw,2.9rem); margin-bottom:.6em}
.split__body p{color:var(--ink-2); font-size:.96rem}
.ticks{margin:1.8rem 0 2.2rem}
.ticks li{position:relative; padding-left:2rem; margin-bottom:.8em; font-size:.92rem; color:var(--ink-2)}
.ticks li::before{
  content:''; position:absolute; left:0; top:.15em; width:20px; height:20px; border-radius:50%;
  background:var(--blush);
}
.ticks li::after{
  content:''; position:absolute; left:6px; top:.53em; width:8px; height:4.5px;
  border-left:1.5px solid var(--rose-600); border-bottom:1.5px solid var(--rose-600);
  transform:rotate(-45deg);
}

/* ── Bewertungen ───────────────────────────── */
.revs{position:relative}
.revs__track{display:flex; gap:1.5rem; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding-bottom:.5rem; scrollbar-width:none}
.revs__track::-webkit-scrollbar{display:none}
.rev{
  flex:0 0 min(100%,380px); scroll-snap-align:start; margin:0;
  background:#fff; border-radius:var(--r-l); padding:clamp(1.6rem,2.6vw,2.2rem);
  border:1px solid var(--line);
}
.rev__stars{color:var(--gold); letter-spacing:.15em; font-size:.9rem}
.rev blockquote{margin:1.1rem 0 1.6rem; font-family:var(--serif); font-size:1.22rem; line-height:1.5; color:var(--ink)}
.rev figcaption{display:flex; flex-direction:column; gap:.15em; font-size:.82rem}
.rev figcaption strong{font-weight:400}
.rev figcaption span{color:var(--ink-3); font-size:.76rem}
.revs__nav{display:flex; gap:.6rem; margin-top:1.6rem}
.revs__nav button{
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:#fff;
  display:grid; place-items:center; color:var(--ink-2);
  transition:border-color .3s, color .3s, transform .3s var(--ease);
}
.revs__nav button:hover{border-color:var(--rose); color:var(--rose-600); transform:translateY(-2px)}

/* ── FAQ ───────────────────────────────────── */
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{
  position:relative; list-style:none; cursor:pointer; padding:1.5rem 3rem 1.5rem 0;
  font-family:var(--serif); font-size:clamp(1.15rem,2vw,1.45rem); line-height:1.35;
  transition:color .25s;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--rose-600)}
.faq__ico{position:absolute; right:0; top:50%; width:20px; height:20px; margin-top:-10px}
.faq__ico::before,.faq__ico::after{
  content:''; position:absolute; left:50%; top:50%; background:var(--rose-600);
  transition:transform .35s var(--ease), opacity .3s;
}
.faq__ico::before{width:16px; height:1.5px; margin:-.75px 0 0 -8px}
.faq__ico::after{width:1.5px; height:16px; margin:-8px 0 0 -.75px}
.faq__item[open] .faq__ico::after{transform:rotate(90deg); opacity:0}
.faq__body{padding-bottom:1.6rem; max-width:70ch}
.faq__body p{margin:0; color:var(--ink-2); font-size:.94rem}
.faq__item[open] .faq__body{animation:fade .45s var(--ease) both}

/* ── CTA ───────────────────────────────────── */
.cta{
  background:linear-gradient(135deg,#2A2325 0%,#3A2C31 55%,#4A353D 100%);
  color:#fff; padding:clamp(4rem,8vw,7rem) 0; position:relative; overflow:hidden;
}
.cta::after{
  content:''; position:absolute; inset:auto -10% -55% 40%; height:420px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(192,135,154,.42), transparent);
  pointer-events:none;
}
.cta__in{position:relative; text-align:center; max-width:620px; margin-inline:auto}
.cta h2{font-size:clamp(2rem,4.4vw,3.2rem); margin-bottom:.45em}
.cta__lead{color:rgba(255,255,255,.72); margin-bottom:2.2rem}
.cta__btns{display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center}

/* ── Footer ────────────────────────────────── */
.ftr{background:var(--cream); padding:clamp(3.5rem,6vw,5.5rem) 0 0; border-top:1px solid var(--line)}
.ftr__grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(2rem,4vw,3.5rem)}
.ftr__brand img{width:150px; margin-bottom:1.4rem}
.ftr__brand p{font-size:.88rem; color:var(--ink-3); max-width:34ch}
.ftr__social{display:flex; gap:.6rem; margin-top:1.5rem}
.ftr__social a{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--ink-2);
  transition:border-color .3s, color .3s, transform .3s var(--ease);
}
.ftr__social a:hover{border-color:var(--rose); color:var(--rose-600); transform:translateY(-2px)}
.ftr__col h4{font-family:var(--sans); font-size:.72rem; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink); margin-bottom:1.4rem}
.ftr__col p{font-size:.88rem; color:var(--ink-3); line-height:1.8}
.ftr__col a:hover{color:var(--rose-600)}
.hours{width:100%; font-size:.88rem; color:var(--ink-3); border-collapse:collapse}
.hours th{font-weight:300; text-align:left; padding:.2em 0; color:var(--ink-2)}
.hours td{text-align:right; padding:.2em 0}
.ftr__hint{margin-top:1em; font-size:.78rem !important; font-style:italic}
.ftr__links li{margin-bottom:.6em}
.ftr__links a{font-size:.88rem; color:var(--ink-3); transition:color .25s}
.ftr__bar{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  margin-top:clamp(2.5rem,5vw,4rem); padding:1.6rem 0; border-top:1px solid var(--line);
  font-size:.8rem; color:var(--ink-3);
}
.ftr__bar p{margin:0}
.ftr__legal{display:flex; gap:1.5rem}
.ftr__legal a{transition:color .25s}
.ftr__legal a:hover{color:var(--rose-600)}

/* ── Floating ──────────────────────────────── */
.wa{
  position:fixed; left:22px; bottom:22px; z-index:90;
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:#25D366; color:#fff; box-shadow:0 8px 26px -6px rgba(37,211,102,.6);
  transition:transform .35s var(--ease);
}
.wa:hover{transform:scale(1.07)}
.totop{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:46px; height:46px; border-radius:50%; background:#fff; color:var(--ink);
  border:1px solid var(--line); display:grid; place-items:center; box-shadow:var(--sh-m);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .35s, transform .35s var(--ease), visibility .35s, border-color .3s, color .3s;
}
.totop.show{opacity:1; visibility:visible; transform:none}
.totop:hover{border-color:var(--rose); color:var(--rose-600)}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1080px){
  .usp__grid{grid-template-columns:repeat(2,1fr); gap:2.2rem}
  .cards{grid-template-columns:1fr; }
  .card{flex-direction:row}
  .card__media{flex:0 0 40%; aspect-ratio:auto}
  .tech__body{grid-template-columns:1fr}
  .ba{grid-template-columns:1fr}
  .ba__list{flex-direction:row}
  .ba__pick{flex:1}
  .steps{grid-template-columns:repeat(2,1fr); gap:2.5rem 2rem}
  .prices--4{grid-template-columns:repeat(2,1fr)}
  .step:nth-child(2)::before{right:0}
  .ftr__grid{grid-template-columns:1fr 1fr; }
}

@media (max-width:860px){
  html{scroll-padding-top:78px}
  .topbar__note{display:none}
  .topbar__in{justify-content:center}

  .hdr__in{min-height:66px}
  .burger{display:block}
  .nav{
    position:fixed; inset:0; z-index:-1;
    flex-direction:column; justify-content:center; gap:1.4rem;
    /* Platz für den Header, damit Logo und Schließen-Button frei bleiben */
    padding:calc(66px + 1.5rem) 1.5rem 2rem;
    background:var(--cream);
    overflow-y:auto;              /* bei kleinen Displays scrollbar statt abgeschnitten */
    overscroll-behavior:contain;
    opacity:0; visibility:hidden; transform:translateY(-12px);
    transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
  }
  .nav.is-open{opacity:1; visibility:visible; transform:none; z-index:99}
  .nav > a:not(.btn){
    font-family:var(--serif); font-size:clamp(1.4rem,6vw,1.8rem); color:var(--ink);
    flex:none;
  }
  .nav__cta{margin:1rem 0 0; flex:none}
  body.nav-open{overflow:hidden}

  .prices{grid-template-columns:1fr; max-width:420px; margin-inline:auto}
  .prices--4,.prices--2{grid-template-columns:1fr; max-width:420px}
  .prices--4 .price--hl,.prices--2 .price--hl{order:-1}
  .price--hl{order:-1}
  .pricelist__ul{columns:1}
  .revs-fallback{grid-template-columns:1fr}
  .split__media--tall img{aspect-ratio:4/3}
  .split{grid-template-columns:1fr}
  .stats__grid{grid-template-columns:repeat(2,1fr); gap:2.5rem 1rem}
  .specs{grid-template-columns:1fr 1fr}
  .opts{grid-template-columns:1fr}
  .opts--skin{grid-template-columns:repeat(2,1fr)}
  .opt{flex-direction:row; align-items:center; gap:1rem; padding:1.1rem}
  .opt__ico{margin:0; flex:none; width:38px; height:38px}
  .opt--skin{flex-direction:column; text-align:center}
  .opt--skin .swatch{margin-bottom:.5rem}
  .tech__tab{padding:1rem .6rem; font-size:.85rem}
  .tech__tab span{font-size:.66rem}
}

@media (max-width:640px){
  .card{flex-direction:column}
  .card__media{flex:none; aspect-ratio:16/10}
  .steps{grid-template-columns:1fr; gap:2rem}
  .step::before{right:0}
  .ftr__grid{grid-template-columns:1fr; gap:2.5rem}
  .ba__list{flex-direction:column}
  .ba__frame{max-height:none}
  .hero__trust .sep{display:none}
  .hero__trust{gap:.6rem; flex-direction:column}
  .btn{width:100%}
  .hero__cta,.cta__btns,.finder__actions{flex-direction:column; align-items:stretch}
  .nav__cta{width:auto; align-self:center}
  .btn--sm{width:auto}
  .wa{width:48px; height:48px; left:16px; bottom:16px}
  .totop{right:16px; bottom:16px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .reveal{opacity:1; transform:none}
}

/* ═══════════ COOKIE-BANNER ═══════════ */
.cc{
  position:fixed; left:0; right:0; bottom:0; z-index:180;
  padding:clamp(.8rem,2vw,1.5rem);
  opacity:0; transform:translateY(14px);
  transition:opacity .4s var(--ease), transform .45s var(--ease);
}
.cc.is-in{opacity:1; transform:none}
.cc__box{
  width:min(100%,720px); margin-inline:auto;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-l);
  box-shadow:var(--sh-l); padding:clamp(1.4rem,3vw,2.2rem);
}
.cc__title{font-size:1.45rem; margin-bottom:.5em}
.cc__text{font-size:.9rem; color:var(--ink-2); margin-bottom:1.4rem}
.cc__text a{color:var(--rose-600); border-bottom:1px solid var(--rose-100)}
.cc__opts{display:grid; gap:.7rem; margin-bottom:1.5rem}
.cc__opt{
  display:flex; align-items:flex-start; gap:.9rem; cursor:pointer;
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r-m);
  padding:.9rem 1.1rem; transition:border-color .25s;
}
.cc__opt:hover{border-color:var(--rose)}
.cc__opt input{margin-top:.35em; accent-color:var(--rose-600); width:17px; height:17px; flex:none}
.cc__opt span{display:flex; flex-direction:column; gap:.15rem}
.cc__opt strong{font-weight:400; font-size:.95rem}
.cc__opt small{color:var(--ink-3); font-size:.8rem; line-height:1.5}
.cc__btns{display:flex; flex-wrap:wrap; align-items:center; gap:.7rem}
.cc__btns .btn{flex:0 0 auto}
.cc__link{
  font-size:.83rem; color:var(--ink-3); letter-spacing:.04em;
  border-bottom:1px solid var(--line); padding-bottom:2px; transition:color .25s, border-color .25s;
}
.cc__link:hover{color:var(--rose-600); border-color:var(--rose)}
.ftr__legal-btn{
  font-size:inherit; color:inherit; letter-spacing:inherit; transition:color .25s;
}
.ftr__legal-btn:hover{color:var(--rose-600)}

/* Platzhalter für Dienste, die auf Einwilligung warten */
.consent-ph{
  background:#fff; border:1px dashed var(--line); border-radius:var(--r-l);
  padding:clamp(1.6rem,3vw,2.4rem); text-align:center;
}
.consent-ph p{color:var(--ink-2); max-width:52ch; margin-inline:auto; font-size:.92rem}

@media (max-width:640px){
  .cc__btns{flex-direction:column; align-items:stretch}
  .cc__btns .btn{width:100%}
  .cc__link{margin-top:.4rem}
}

/* ═══════════ FORMULARE & UNTERSEITEN ═══════════ */
.sec--first{padding-top:clamp(3rem,6vw,5rem)}

.contact{display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(1.5rem,3.5vw,3.5rem); align-items:start}
.contact__form{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-l);
  padding:clamp(1.6rem,3vw,2.8rem);
}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
.field{margin:0 0 1.3rem; display:flex; flex-direction:column; gap:.45rem}
.field label{font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.field input,.field select,.field textarea{
  font:inherit; font-size:.98rem; color:var(--ink); width:100%;
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r-m);
  padding:.85em 1em; transition:border-color .25s, background .25s, box-shadow .25s;
}
.field textarea{resize:vertical; min-height:130px; line-height:1.6}
.field select{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23857A7D' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1.1em center; background-size:11px;
  padding-right:2.6em;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; background:#fff; border-color:var(--rose);
  box-shadow:0 0 0 3px rgba(192,135,154,.16);
}
.field [aria-invalid="true"]{border-color:#C0524F; background:#FDF5F4}
.field--check label{
  display:flex; align-items:flex-start; gap:.8rem; cursor:pointer;
  font-size:.88rem; letter-spacing:normal; text-transform:none; color:var(--ink-2); line-height:1.6;
}
.field--check input{width:18px; height:18px; margin-top:.25em; flex:none; accent-color:var(--rose-600)}
.field--check a{color:var(--rose-600); border-bottom:1px solid var(--rose-100)}
.field__note{font-size:.78rem; color:var(--ink-3); margin-bottom:1.6rem}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.note{border-radius:var(--r-m); padding:1.3rem 1.5rem; margin-bottom:1.8rem}
.note h3{font-size:1.4rem; margin-bottom:.4em}
.note p:last-child,.note ul:last-child{margin-bottom:0}
.note--ok{background:var(--blush); border:1px solid var(--rose-100)}
.note--err{background:#FDF5F4; border:1px solid #EFD6D3; color:#8E3F3C; font-size:.9rem}
.note--err ul{margin-top:.5em}
.note--err li{position:relative; padding-left:1.1em; margin-bottom:.3em}
.note--err li::before{content:'·'; position:absolute; left:.2em}

.contact__side{display:grid; gap:1.2rem}
.infobox{background:#fff; border:1px solid var(--line); border-radius:var(--r-l); padding:clamp(1.4rem,2.4vw,1.9rem)}
.infobox h3{font-size:1.3rem; margin-bottom:1rem}
.infobox p{font-size:.9rem; color:var(--ink-2)}
.infobox__note{margin:1rem 0 0; font-size:.8rem !important; color:var(--ink-3) !important; font-style:italic}
.infobox--dark{background:var(--ink); color:#fff; border-color:var(--ink)}
.infobox--dark h3{color:#fff}
.infobox--dark p{color:rgba(255,255,255,.7)}
.infolist{display:grid; gap:1rem}
.infolist li{display:flex; align-items:center; gap:.9rem; font-size:.92rem}
.infolist__ico{
  display:grid; place-items:center; width:36px; height:36px; flex:none;
  border-radius:50%; background:var(--blush); color:var(--rose-600);
}
.infolist a{transition:color .25s}
.infolist a:hover{color:var(--rose-600)}
.hours--lg{font-size:.92rem}

/* Rechtstexte */
.legal{max-width:78ch}
.legal h2{font-size:clamp(1.5rem,2.6vw,2rem); margin:2.4em 0 .7em}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:1.2rem; margin:1.8em 0 .5em}
.legal p,.legal li{color:var(--ink-2); font-size:.95rem}
.legal ul{margin:0 0 1.2em}
.legal ul li{position:relative; padding-left:1.3em; margin-bottom:.45em}
.legal ul li::before{content:''; position:absolute; left:0; top:.65em; width:5px; height:5px; border-radius:50%; background:var(--rose-100)}
.legal a{color:var(--rose-600); border-bottom:1px solid var(--rose-100)}
.legal__todo{
  background:#FFFBEB; border:1px solid #F0E3C0; border-radius:var(--r-m);
  padding:1.1rem 1.4rem; font-size:.88rem; color:#7A6432; margin:0 0 2rem;
}
.legal__todo strong{color:#5C4B22}

@media (max-width:900px){
  .contact{grid-template-columns:1fr}
}
@media (max-width:640px){
  .field-row{grid-template-columns:1fr; gap:0}
}

/* ═══════════ AUSBILDUNGSSEITE ═══════════ */
.hero--sub{padding-bottom:clamp(3rem,6vw,5rem); background:linear-gradient(180deg,var(--cream) 0%,var(--cream) 55%,#fff 100%)}
.hero--sub .hero__title{font-size:clamp(2.3rem,5.4vw,4.3rem)}

.credentials{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem;
  margin-top:clamp(2.5rem,5vw,4rem); text-align:center;
}
.credentials li{background:#fff; border:1px solid var(--line); border-radius:var(--r-l); padding:1.6rem 1.2rem}
.credentials strong{display:block; font-family:var(--serif); font-weight:400; font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1}
.credentials span{display:block; margin-top:.5em; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3)}

.usp__grid--cards{grid-template-columns:repeat(3,1fr)}
.usp__item--card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-l);
  padding:clamp(1.5rem,2.6vw,2.1rem);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.usp__item--card:hover{transform:translateY(-5px); box-shadow:var(--sh-l)}
.usp__num{
  display:block; font-family:var(--serif); font-size:.95rem; letter-spacing:.2em;
  color:var(--rose-600); margin-bottom:1rem;
}

.prices--wide{max-width:880px; margin-inline:auto}
.prices--wide .price ul{font-size:.88rem}

.quote{
  margin:1.8rem 0; padding:1.4rem 0 1.4rem 1.6rem; border-left:2px solid var(--rose-100);
  font-family:var(--serif); font-size:1.35rem; line-height:1.5; color:var(--ink);
}
.quote cite{display:block; margin-top:.6em; font-family:var(--sans); font-size:.78rem;
  font-style:normal; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}

.quotes{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.2rem,2.4vw,2rem)}
.quotecard{
  margin:0; background:#fff; border:1px solid var(--line); border-radius:var(--r-l);
  padding:clamp(1.6rem,2.8vw,2.3rem);
}
.quotecard blockquote{
  margin:0 0 1.4rem; font-family:var(--serif); font-size:1.15rem; line-height:1.55; color:var(--ink);
}
.quotecard blockquote::before{content:'„'; color:var(--rose); font-size:1.6em; line-height:0; vertical-align:-.35em; margin-right:.06em}
.quotecard figcaption{display:flex; flex-direction:column; gap:.15em; font-size:.9rem}
.quotecard figcaption span{font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}

@media (max-width:1080px){
  .usp__grid--cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .credentials{grid-template-columns:1fr; gap:.8rem}
  .quotes{grid-template-columns:1fr}
}
@media (max-width:640px){
  .usp__grid--cards{grid-template-columns:1fr}
}

/* ═══════════ PREIS-VARIANTEN ═══════════ */
/* Streichpreis bei Aktionsangeboten */
.price__old{
  margin:.15em 0 0; font-size:.9rem; color:var(--ink-3); text-decoration:line-through;
  text-decoration-thickness:1px; text-decoration-color:var(--rose);
}
/* Staffelpreis („3 Behandlungen 399 €“) direkt unter dem Einzelpreis */
.price__staffel{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5em;
  margin:0 0 1.6rem; padding:.7em 1em;
  background:var(--blush); border-radius:var(--r-m); font-size:.85rem;
}
.price--hl .price__staffel{background:rgba(255,255,255,.72)}
.price__staffel span{color:var(--ink-2)}
.price__staffel strong{font-family:var(--serif); font-size:1.25rem; font-weight:500; line-height:1}
.price__staffel em{
  font-style:normal; margin-left:auto; font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--rose-600); white-space:nowrap;
}
/* Zwei Leistungskarten statt drei */
.cards--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1080px){
  .cards--2{grid-template-columns:1fr}
}

/* Hinweis unter Karten ohne Online-Buchung */
.price__hint{
  margin:.7rem 0 0; text-align:center; font-size:.8rem; color:var(--ink-3);
}
.price__hint a{color:var(--rose-600); border-bottom:1px solid var(--rose-100)}
.price__hint a:hover{border-color:var(--rose)}

/* ═══════════ BEWERTUNGEN (eigene Lösung) ═══════════ */
.rv{display:grid; grid-template-columns:270px 1fr; gap:clamp(1.5rem,3vw,2.5rem); align-items:start}

.rv__summary{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-l);
  padding:clamp(1.6rem,2.6vw,2.1rem); text-align:center;
}
.rv__gicon{display:block; margin:0 auto .9rem}
.rv__score{
  font-family:var(--serif); font-size:3rem; line-height:1; margin:0 0 .35rem; color:var(--ink);
}
.rv__count{font-size:.83rem; color:var(--ink-3); margin:.7rem 0 1.4rem}
.rv__summary .rv__stars{justify-content:center}

.rv__stars{display:inline-flex; gap:2px}
.rv__stars svg{width:16px; height:16px; fill:var(--line)}
.rv__stars svg.is-on{fill:var(--gold)}

.rv__wrap{position:relative; min-width:0}
.rv__track{
  display:flex; gap:1.25rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:.5rem; scrollbar-width:none;
}
.rv__track::-webkit-scrollbar{display:none}
.rv__card{
  flex:0 0 min(100%,320px); scroll-snap-align:start; margin:0;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-l);
  padding:clamp(1.4rem,2.4vw,1.9rem); display:flex; flex-direction:column;
}
.rv__card blockquote{
  margin:1rem 0 1.4rem; font-family:var(--serif); font-size:1.12rem; line-height:1.5; color:var(--ink);
}
.rv__card figcaption{display:flex; flex-direction:column; gap:.15em; margin-top:auto}
.rv__card figcaption strong{font-weight:400; font-size:.92rem}
.rv__card figcaption span{font-size:.76rem; color:var(--ink-3)}

.rv__nav{display:flex; gap:.6rem; margin-top:1.4rem}
.rv__nav button{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:#fff;
  display:grid; place-items:center; color:var(--ink-2);
  transition:border-color .3s, color .3s, transform .3s var(--ease);
}
.rv__nav button:hover{border-color:var(--rose); color:var(--rose-600); transform:translateY(-2px)}

@media (max-width:860px){
  .rv{grid-template-columns:1fr}
  .rv__summary{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.6rem 1rem; text-align:left}
  .rv__gicon{margin:0}
  .rv__score{font-size:2.2rem; margin:0}
  .rv__count{margin:0; flex:1 1 100%; text-align:center}
  .rv__summary .btn{flex:1 1 100%}
}

/* ═══════════ TABS AUF SCHMALEN DISPLAYS ═══════════
   Mit mehreren Kategorien passt die Pillenleiste nicht mehr in eine Zeile.
   Statt horizontal zu scrollen brechen die Tabs um; der gleitende Hintergrund
   (.tabs__ink) kann Zeilenumbrüche nicht abbilden und weicht deshalb einer
   direkten Einfärbung des aktiven Tabs. */
@media (max-width:720px){
  .tabs{
    display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem;
    width:100%; border-radius:var(--r-m); padding:.4rem;
  }
  .tabs__ink{display:none}
  .tabs__btn{
    flex:1 1 auto; padding:.75em 1.1em; font-size:.75rem; letter-spacing:.06em;
    border-radius:100px; transition:color .3s, background .3s;
  }
  .tabs__btn.is-active{background:var(--rose-600); color:#fff}
}

/* Etwas größere Klickflächen in der Topbar */
@media (max-width:860px){
  .topbar__links a{display:inline-block; padding:.45em 0}
}