/* ==========================================================================
   Beauty Concept by Derya — bc-byderya.de
   Design: "Editorial Luxe" — warmes Off-White, Tiefschwarz, Marken-Pink
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Farben */
  --ink:#14100F;
  --ink-2:#3A3230;
  --ink-3:#6B5F5B;
  --bone:#FBF8F5;
  --bone-2:#F4EDE7;
  --bone-3:#EBE1D9;
  --rose:#FBEEF4;
  --rose-2:#F6DFEA;
  --pink:#E24E96;
  --pink-deep:#BF3878;
  /* Für kleinen pinken Text auf HELLEM Grund: #E24E96 kommt dort nur auf
     3,4:1 und ist damit zu schwach. Auf dunklem Grund bleibt --pink richtig. */
  --pink-text:#B23470;
  --white:#fff;
  --line:rgba(20,16,15,.12);
  --line-soft:rgba(20,16,15,.07);
  --line-dark:rgba(255,255,255,.16);

  /* Typografie */
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Raum */
  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem;
  --sp-5:3rem; --sp-6:4rem; --sp-7:6rem; --sp-8:8rem;
  /* Seitenabstand berücksichtigt die Notch/Kamera im Querformat */
  --gutter:max(clamp(1.25rem,5vw,4.5rem), env(safe-area-inset-left), env(safe-area-inset-right));
  --maxw:1280px;
  --radius:2px;
  /* sichere Ränder für App-Modus (viewport-fit=cover) */
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.55s;

  /* Layer */
  --z-header:100; --z-float:120; --z-nav:130;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  /* App-Verhalten: nur senkrecht scrollen – kein Pinch-Zoom, kein Seitwärts-Wischen,
     kein Gummiband-/Pull-to-Refresh-Effekt an den Rändern.
     WICHTIG: KEIN overflow-x hier! html + body gleichzeitig auf overflow-x:hidden
     erzeugt zwei verschachtelte Scroll-Container -> Mausrad scrollt nicht mehr.
     Die Seitwärts-Sperre macht body (unten) via overflow-x:clip. */
  overscroll-behavior:none;
  touch-action:pan-y;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:var(--sans);
  font-size:1.0625rem;
  font-weight:400;
  line-height:1.7;
  color:var(--ink-2);
  background:var(--bone);
  -webkit-font-smoothing:antialiased;
  /* clip statt hidden: verhindert Seitwärts-Scroll OHNE einen eigenen
     Scroll-Container zu erzeugen (sonst hängt das Mausrad-Scrollen). */
  overflow-x:clip;
  -webkit-tap-highlight-color:transparent;
}
/* Bedien-Elemente ohne 300ms-Verzögerung; Text darin nicht markierbar (App-Gefühl) */
a,button,.btn,.tab,summary,.burger,.to-top,.nav a,.mobilenav a{touch-action:manipulation}
button,.btn,.burger,.to-top,.nav a,.mobilenav a,.tab{-webkit-user-select:none;user-select:none}
img,picture,svg,video{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4{margin:0;font-weight:400;color:var(--ink);line-height:1.08;letter-spacing:-.01em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:2px}
::selection{background:var(--pink);color:#fff}
/* Nur für Screenreader/SEO sichtbar – visuell versteckt, aber im DOM/Vorlesefluss */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- 3. Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:920px}
.section{padding-block:clamp(4.5rem,10vw,9rem)}
.section--tight{padding-block:clamp(3.5rem,7vw,6rem)}
.section--bone{background:var(--bone-2)}
.section--rose{background:var(--rose)}
.section--ink{background:var(--ink);color:rgba(255,255,255,.78)}
.section--ink h2,.section--ink h3{color:#fff}

/* ---------- 4. Typografie ---------- */
.eyebrow{
  display:block;
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--pink-text);
  margin:0 0 1.25rem;
}
.eyebrow--muted{color:var(--ink-3)}
/* auf dunklem Grund ist das helle Pink das kontraststärkere */
.section--ink .eyebrow{color:var(--pink)}

.h-display{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(2.6rem,6.4vw,5.1rem);
  line-height:1.02;
  letter-spacing:-.02em;
}
.h1{font-family:var(--display);font-weight:300;font-size:clamp(2.9rem,7vw,5.6rem);line-height:1;letter-spacing:-.025em}
.h2{font-family:var(--display);font-weight:300;font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.06}
.h3{font-family:var(--display);font-weight:400;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.15}
.h4{font-family:var(--sans);font-weight:500;font-size:1.0625rem;letter-spacing:.01em;line-height:1.4}
.italic{font-style:italic;font-weight:300;color:var(--pink)}
.lead{font-size:clamp(1.0625rem,1.55vw,1.1875rem);line-height:1.75;color:var(--ink-3);max-width:60ch}
.section--ink .lead{color:rgba(255,255,255,.7)}
.muted{color:var(--ink-3)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- 5. Buttons ---------- */
.btn{
  --bg:var(--pink); --fg:#fff; --bd:var(--pink);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:.9rem 1.9rem;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  border-radius:999px;
  font-size:.875rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.btn:hover{--bg:var(--pink-deep);--bd:var(--pink-deep);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{width:18px;height:18px;flex:none}
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line)}
.btn--ghost:hover{--bg:var(--ink);--fg:#fff;--bd:var(--ink)}
.btn--ink{--bg:var(--ink);--fg:#fff;--bd:var(--ink)}
.btn--ink:hover{--bg:var(--pink);--bd:var(--pink)}
.btn--onink{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.35)}
.btn--onink:hover{--bg:#fff;--fg:var(--ink);--bd:#fff}
.btn--wa{--bg:#25D366;--bd:#25D366;--fg:#0B2E17}
.btn--wa:hover{--bg:#1EB855;--bd:#1EB855;--fg:#fff}
.btn--sm{min-height:46px;padding:.7rem 1.4rem;font-size:.8125rem}
/* Im Hero liegt der helle Button auf dem Foto – deshalb leicht gefuellt,
   damit er sich auch ueber hellen Bildstellen sauber abhebt. */
.hero .btn--ghost{--bg:rgba(255,255,255,.92);--bd:rgba(20,16,15,.18)}
.hero .btn--ghost:hover{--bg:var(--ink);--fg:#fff;--bd:var(--ink)}

.link-arrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.8125rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pink);text-decoration:none;
  min-height:44px;padding-block:.7rem;
}
.link-arrow span{display:block;width:26px;height:1px;background:currentColor;transition:width .35s var(--ease)}
.link-arrow:hover span{width:42px}

/* ---------- 6. Header ---------- */
.header{
  position:fixed;inset:0 0 auto;z-index:var(--z-header);
  display:flex;align-items:center;
  height:calc(96px + var(--safe-top));
  padding-top:var(--safe-top);   /* Inhalt bleibt unter der Notch */
  /* Milchglas schon ganz oben: Ohne Schleier liegt die Telefonnummer direkt
     auf dem Hero-Foto und kommt dort nur auf 1:1 Kontrast – also unlesbar.
     58 % ergeben rund 5,7:1 und lassen das Bild trotzdem durchscheinen. */
  background:rgba(251,248,245,.58);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  transition:height .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.header.is-stuck{
  height:calc(74px + var(--safe-top));background:rgba(251,248,245,.93);
  backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);
  border-bottom-color:var(--line-soft);
}
/* Kann der Browser kein backdrop-filter, deckt ein staerkerer Schleier ab */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .header{background:rgba(251,248,245,.9)}
  .header.is-stuck{background:rgba(251,248,245,.97)}
}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.header__logo{display:inline-flex;align-items:center;flex:none;min-height:44px}
.header__logo img{width:auto;height:46px;transition:height .4s var(--ease)}
.header.is-stuck .header__logo img{height:38px}

.nav{display:flex;align-items:center;gap:2.1rem}
.nav a{
  position:relative;text-decoration:none;
  font-size:.875rem;font-weight:400;letter-spacing:.03em;color:var(--ink-2);
  padding-block:.4rem;
}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--pink);transition:width .35s var(--ease)}
.nav a:hover::after,.nav a[aria-current="true"]::after{width:100%}
.nav a[aria-current="true"]{color:var(--ink)}

.header__actions{display:flex;align-items:center;gap:1rem}
.header__tel{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-size:.9375rem;letter-spacing:.02em;color:var(--ink);white-space:nowrap;
  min-height:44px;padding-inline:.25rem;
}
.header__tel svg{width:17px;height:17px;color:var(--pink)}
.header__tel:hover{color:var(--pink)}

.burger{
  display:none;align-items:center;justify-content:center;
  width:48px;height:48px;margin-right:-10px;
  background:none;border:0;cursor:pointer;
}
.burger span{display:block;width:24px;height:1.5px;background:var(--ink);position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:24px;height:1.5px;background:var(--ink);transition:transform .35s var(--ease),top .35s var(--ease)}
.burger span::before{top:-7px}
.burger span::after{top:7px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* Mobile-Menü – schlicht & elegant */
.mobilenav{
  position:fixed;inset:0;z-index:var(--z-nav);
  display:flex;flex-direction:column;
  padding:calc(var(--safe-top)) var(--gutter) calc(1.5rem + var(--safe-bottom));
  background:var(--bone);
  transform:translateY(-100%);
  transition:transform .5s var(--ease);
  overflow-y:auto;
  visibility:hidden;
}
.mobilenav.is-open{transform:translateY(0);visibility:visible}

/* Kopfzeile im Menü: Marke links, klarer Schließen-Knopf rechts */
.mobilenav__top{
  display:flex;align-items:center;justify-content:space-between;
  height:74px;flex:none;margin-bottom:.5rem;
}
.mobilenav__top img{height:34px;width:auto}
.mobilenav__close{
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;margin-right:-8px;
  background:none;border:0;cursor:pointer;color:var(--ink);
}
.mobilenav__close svg{width:22px;height:22px}
.mobilenav__close:hover{color:var(--pink)}

/* Navigations-Links: feiner, ruhiger, mit Haarlinien */
.mobilenav__links{display:flex;flex-direction:column;margin-top:.5rem}
.mobilenav__links a{
  display:flex;align-items:center;justify-content:space-between;
  text-decoration:none;
  font-family:var(--display);font-size:1.5rem;font-weight:300;letter-spacing:.01em;
  color:var(--ink);
  padding:1rem 0;border-bottom:1px solid var(--line-soft);
  opacity:0;transform:translateY(8px);
}
.mobilenav.is-open .mobilenav__links a{opacity:1;transform:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.mobilenav.is-open .mobilenav__links a:nth-child(1){transition-delay:.06s}
.mobilenav.is-open .mobilenav__links a:nth-child(2){transition-delay:.10s}
.mobilenav.is-open .mobilenav__links a:nth-child(3){transition-delay:.14s}
.mobilenav.is-open .mobilenav__links a:nth-child(4){transition-delay:.18s}
.mobilenav.is-open .mobilenav__links a:nth-child(5){transition-delay:.22s}
.mobilenav.is-open .mobilenav__links a:nth-child(6){transition-delay:.26s}
.mobilenav__links a::after{
  content:"";width:16px;height:16px;flex:none;opacity:.5;
  background:linear-gradient(currentColor,currentColor) right center/8px 1.5px no-repeat;
  -webkit-mask:linear-gradient(currentColor,currentColor) right center/8px 1.5px no-repeat,
        linear-gradient(currentColor,currentColor) right center/1.5px 8px no-repeat;
}
.mobilenav__links a:hover{color:var(--pink)}

/* Fußbereich: ein klarer Haupt-CTA + dezente Kontaktzeile */
.mobilenav__cta{display:flex;flex-direction:column;gap:.9rem;margin-top:auto;padding-top:2rem}
.mobilenav__cta .btn{width:100%}
.mobilenav__call{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;
  text-decoration:none;font-size:.9375rem;letter-spacing:.02em;color:var(--ink-2);
}
.mobilenav__call svg{width:16px;height:16px;color:var(--pink)}
.mobilenav__call:hover{color:var(--pink)}

/* ---------- 7. Hero (Bild vollflaechig, Text darueber) ---------- */
.hero{
  position:relative;display:flex;align-items:center;
  min-height:min(92vh,860px);
  padding-top:calc(96px + var(--safe-top));overflow:hidden;background:#fff;
}
.hero__media{position:absolute;inset:0;z-index:0;background:#fff}
.hero__media img{
  width:100%;height:100%;object-fit:cover;
  /* Motiv sitzt rechts – so bleibt es beim Beschnitt im Bild */
  object-position:74% center;
}
/* Weisser Verlauf von links: sichert die Lesbarkeit des Textes,
   egal wie das Bild im jeweiligen Seitenverhaeltnis beschnitten wird. */
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    #fff 0%, rgba(255,255,255,.97) 24%, rgba(255,255,255,.86) 38%,
    rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 62%);
}
.hero__inner{position:relative;z-index:1;width:100%}
.hero__text{max-width:34rem;padding-block:clamp(2.5rem,6vw,4.5rem)}
.hero h1{margin-bottom:1.5rem}
.hero .lead{margin-bottom:2.2rem;color:var(--ink-2)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem}
.hero__note{
  display:flex;align-items:flex-start;gap:.7rem;
  margin:2rem 0 0;max-width:30rem;
  font-size:.875rem;line-height:1.55;color:var(--ink-2);
}
.hero__note svg{width:18px;height:18px;flex:none;margin-top:.15rem;color:var(--pink-text)}
.hero__note strong{font-weight:500;color:var(--ink)}

/* Vertrauensleiste */
.trust{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.trust__item{
  display:flex;flex-direction:column;gap:.7rem;
  padding:2.4rem clamp(1rem,2.4vw,2rem);
  border-left:1px solid var(--line-soft);
}
.trust__item:first-child{border-left:0}
.trust__item svg{width:26px;height:26px;color:var(--pink);stroke-width:1.2}
.trust__item h3{font-family:var(--sans);font-size:.9375rem;font-weight:500;letter-spacing:.01em;line-height:1.35}
.trust__item p{font-size:.875rem;line-height:1.6;color:var(--ink-3);margin:0}

/* ---------- 8. Section-Kopf ---------- */
.shead{max-width:760px;margin-bottom:clamp(2.75rem,5vw,4.25rem)}
.shead--center{margin-inline:auto;text-align:center}
.shead h2{margin-bottom:1.25rem}

/* ---------- 9. Leistungs-Karten ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,2.5vw,2.25rem)}
.card{
  position:relative;display:flex;flex-direction:column;
  background:var(--bone);border:1px solid var(--line-soft);
  text-decoration:none;color:inherit;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:0 26px 60px -32px rgba(20,16,15,.42);border-color:transparent}
/* Unscharfe Vorschau liegt als Hintergrund im Container (siehe style="" im HTML).
   Dadurch steht dort nie eine leere Flaeche, waehrend das Bild laedt. */
.card__media,.ed__media,.why__media{background-size:cover;background-position:center;background-repeat:no-repeat}
.card__media{position:relative;overflow:hidden;aspect-ratio:4/3.15;background-color:var(--bone-3)}
.card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.card:hover .card__media img{transform:scale(1.06)}
.card__num{
  position:absolute;top:1.1rem;left:1.35rem;z-index:2;
  font-family:var(--display);font-size:1.05rem;font-style:italic;font-weight:300;color:#fff;
  text-shadow:0 1px 14px rgba(0,0,0,.5);
}
.card__body{display:flex;flex-direction:column;flex:1;gap:.9rem;padding:clamp(1.6rem,2.6vw,2.1rem)}
.card__body p{font-size:.9375rem;line-height:1.68;color:var(--ink-3);margin:0}
.card__price{
  margin-top:auto;padding-top:1.2rem;border-top:1px solid var(--line-soft);
  font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.card__price b{font-weight:500;color:var(--pink)}

/* ---------- 10. Editorial-Zeilen ---------- */
.ed{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(2rem,6vw,5.5rem)}
.ed+.ed{margin-top:clamp(4rem,9vw,8rem)}
.ed__media{position:relative;overflow:hidden;background-color:var(--bone-3);aspect-ratio:4/4.3}
/* absolut positioniert, damit das Bild den aspect-ratio-Container exakt
   ausfuellt – height:100% loest sich dort sonst auf 'auto' auf */
.ed__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ed__tag{
  position:absolute;right:0;bottom:0;
  padding:.85rem 1.35rem;background:var(--bone);
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pink);
}
.ed--flip .ed__media{order:2}
.ed--flip .ed__tag{right:auto;left:0}
.ed__num{
  display:block;font-family:var(--display);font-style:italic;font-weight:300;
  font-size:3.2rem;line-height:1;color:var(--bone-3);margin-bottom:.6rem;
}
.section--ink .ed__num{color:rgba(255,255,255,.16)}
.section--ink .ed__tag{background:var(--ink)}
.ed h3{margin-bottom:1.1rem}
.checks{display:grid;gap:.75rem;margin:1.75rem 0 2rem}
.checks li{display:flex;gap:.85rem;align-items:flex-start;font-size:.9375rem;line-height:1.6}
.checks svg{width:19px;height:19px;flex:none;margin-top:.2rem;color:var(--pink)}

/* ---------- 11. Weitere Behandlungen ---------- */
.mini{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.mini__item{display:flex;flex-direction:column;gap:.55rem;padding:2rem clamp(1.1rem,2vw,1.7rem);background:var(--bone)}
.section--bone .mini__item{background:var(--bone-2)}
.mini__item svg{width:24px;height:24px;color:var(--pink);stroke-width:1.2;margin-bottom:.3rem}
.mini__item h3{font-family:var(--sans);font-size:1rem;font-weight:500}
.mini__item p{font-size:.875rem;line-height:1.6;color:var(--ink-3);margin:0}
.mini__price{margin-top:.4rem;font-size:.8125rem;letter-spacing:.08em;color:var(--pink)}

/* ---------- 12. Ablauf ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3.5rem);counter-reset:s}
.step{position:relative;padding-top:2.2rem;border-top:1px solid var(--line-dark)}
.section--ink .step{border-top-color:var(--line-dark)}
.step__n{
  position:absolute;top:-.9rem;left:0;
  font-family:var(--display);font-size:1.6rem;font-style:italic;font-weight:300;color:var(--pink);
  background:var(--ink);padding-right:.9rem;
}
.step h3{margin-bottom:.7rem}
.step p{font-size:.9375rem;line-height:1.7;margin:0}

/* ---------- 13. Preisliste ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.5rem}
.tab{
  min-height:46px;padding:.65rem 1.35rem;
  background:transparent;border:1px solid var(--line);border-radius:999px;
  font-size:.8125rem;letter-spacing:.04em;color:var(--ink-3);cursor:pointer;
  transition:all .3s var(--ease);
}
.tab:hover{border-color:var(--ink);color:var(--ink)}
.tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

.panel[hidden]{display:none}
.panel{animation:fade .45s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.panel__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.75rem,4vw,3.25rem)}
.panel__grid--single{grid-template-columns:1fr;max-width:760px}

.ptable{width:100%;border-collapse:collapse;font-size:.9375rem;font-variant-numeric:tabular-nums}
.ptable caption{
  text-align:left;padding:0 0 1rem;
  font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);font-weight:500;
}
.ptable th,.ptable td{padding:.85rem .9rem;text-align:left;border-bottom:1px solid var(--line-soft)}
.ptable thead th{
  font-size:.6875rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);border-bottom:1px solid var(--line);padding-bottom:.7rem;
}
.ptable td.num,.ptable th.num{text-align:right;white-space:nowrap;width:6.5rem}
.ptable tbody tr:hover{background:rgba(226,78,150,.045)}
.ptable td.num{color:var(--ink);font-weight:400}
.ptable td.num em{font-style:normal;color:var(--bone-3)}
.ptable .zone{color:var(--ink-2)}
.ptable--pkg td:first-child{padding-right:1.5rem;line-height:1.5}

.pnote{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem;
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:2rem;border-top:1px solid var(--line);
  font-size:.875rem;color:var(--ink-3);
}
.pnote p{margin:0;flex:1 1 320px}

/* ---------- 14. Warum / Feature-Liste ---------- */
.why{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.why__media{position:relative;background:#fff;border:1px solid var(--line-soft)}
.why__media img{width:100%;height:auto}
.whylist{display:grid;gap:0;margin-top:2rem;border-top:1px solid var(--line)}
.whylist li{display:grid;grid-template-columns:auto 1fr;gap:1.25rem;padding:1.35rem 0;border-bottom:1px solid var(--line-soft)}
.whylist .n{font-family:var(--display);font-style:italic;font-weight:300;font-size:1.1rem;color:var(--pink);line-height:1.5}
.whylist h3{font-family:var(--sans);font-size:1rem;font-weight:500;margin-bottom:.3rem}
.whylist p{font-size:.9375rem;line-height:1.65;color:var(--ink-3);margin:0}

/* ---------- 15. FAQ ---------- */
.faq{max-width:880px;margin-inline:auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;
  padding:1.5rem 0;cursor:pointer;list-style:none;
  font-family:var(--display);font-size:clamp(1.15rem,2vw,1.4rem);color:var(--ink);line-height:1.3;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:14px;height:14px;margin-top:.45rem;
  background:linear-gradient(var(--pink),var(--pink)) center/100% 1.5px no-repeat,
             linear-gradient(var(--pink),var(--pink)) center/1.5px 100% no-repeat;
  transition:transform .35s var(--ease);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 3rem 1.6rem 0;font-size:.9375rem;line-height:1.75;color:var(--ink-3);max-width:70ch}

/* ---------- 16. CTA-Band ---------- */
.ctaband{position:relative;overflow:hidden;background:var(--ink);color:#fff}
.ctaband__inner{
  display:grid;grid-template-columns:1.2fr auto;align-items:center;gap:clamp(2rem,5vw,4rem);
  padding-block:clamp(3.5rem,7vw,5.5rem);
}
.ctaband h2{margin-bottom:.9rem}
.ctaband p{color:rgba(255,255,255,.68);margin:0;max-width:48ch}
.ctaband__btns{display:flex;flex-wrap:wrap;gap:.85rem}

/* ---------- 17. Kontakt ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem)}
.form{display:grid;gap:1.35rem}
.field{display:grid;gap:.5rem}
.field label{font-size:.8125rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.field label .req{color:var(--pink)}
.field input,.field select,.field textarea{
  width:100%;min-height:52px;padding:.9rem 1.1rem;
  font:inherit;font-size:1rem;color:var(--ink);
  background:var(--bone);border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.section--bone .field input,.section--bone .field select,.section--bone .field textarea{background:#fff}
.field textarea{min-height:140px;resize:vertical;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 3px rgba(226,78,150,.12)}
.field .hint{font-size:.8125rem;color:var(--ink-3)}
.field .err{font-size:.8125rem;color:#C0264B;display:none}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:#C0264B}
.field.is-invalid .err{display:block}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:1.35rem}
.check{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:start;font-size:.875rem;line-height:1.6;color:var(--ink-3)}
.check input{width:20px;height:20px;min-height:0;margin-top:.15rem;accent-color:var(--pink);flex:none}
.check a{color:var(--pink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formmsg{padding:1.1rem 1.35rem;border:1px solid var(--line);font-size:.9375rem;border-radius:var(--radius)}
.formmsg--ok{background:#EEF8F1;border-color:#BFE3CB;color:#1D6B38}
.formmsg--err{background:#FDF0F3;border-color:#F0C7D1;color:#A31F44}
.formmsg[hidden]{display:none}

.info__block{padding:1.5rem 0;border-bottom:1px solid var(--line-soft)}
.info__block:first-of-type{border-top:1px solid var(--line);}
.info__block dt{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.5rem}
.info__block dd{margin:0;font-size:1.0625rem;color:var(--ink);line-height:1.6}
.info__block dd a{text-decoration:none}
.info__block dd a:hover{color:var(--pink)}
.hours{display:grid;gap:.4rem;font-size:.9375rem}
.hours div{display:flex;justify-content:space-between;gap:1rem;color:var(--ink-2)}
.hours dt{margin:0;font-size:.9375rem;letter-spacing:normal;text-transform:none;color:var(--ink-2)}

/* ---------- 18. Footer ---------- */
.footer{background:var(--ink);color:rgba(255,255,255,.62);padding-block:clamp(3.5rem,7vw,5rem) 0}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(2rem,4vw,3rem)}
.footer__logo img{height:52px;width:auto;margin-bottom:1.4rem}
.footer p{font-size:.9375rem;line-height:1.7;margin:0}
.footer h3{font-size:.6875rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-bottom:.9rem}
.footer li{font-size:.9375rem}
.footer li a{display:inline-flex;align-items:center;min-height:40px;padding:.25rem 0}
.footer a{text-decoration:none;transition:color .25s}
.footer a:hover{color:var(--pink)}
.footer__social{display:flex;gap:.6rem;margin-top:1.6rem}
.footer__social a{
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--line-dark);border-radius:999px;
}
.footer__social a:hover{background:var(--pink);border-color:var(--pink);color:#fff}
.footer__social svg{width:18px;height:18px}
.footer__bar{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1.5rem;
  margin-top:clamp(3rem,6vw,4.5rem);padding-block:1rem;
  border-top:1px solid var(--line-dark);font-size:.8125rem;
}
.footer__bar nav{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
/* Fußzeilen-Leiste: bequeme Tapp-Fläche auf dem Handy */
.footer__bar nav a,.footer__bar .js-consent-settings{display:inline-flex;align-items:center;min-height:44px}
.footer__credit a{display:inline-flex;align-items:center;min-height:44px}
/* erbt die Fusszeilen-Farbe (.62) – gleiche Helligkeit wie die Copyright-Zeile
   daneben und sicher ueber dem Kontrastminimum */
.footer__credit a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);transition:color .25s,border-color .25s}
.footer__credit a:hover{color:var(--pink);border-bottom-color:var(--pink)}

/* ---------- 19. Floats ---------- */
.wa-float{
  position:fixed;right:22px;bottom:calc(22px + var(--safe-bottom));z-index:var(--z-float);
  display:flex;align-items:center;justify-content:center;width:58px;height:58px;
  background:#25D366;color:#fff;border-radius:999px;text-decoration:none;
  box-shadow:0 12px 34px -10px rgba(37,211,102,.6);
  transition:transform .3s var(--ease);
}
.wa-float:hover{transform:scale(1.07)}
.wa-float svg{width:29px;height:29px}

/* ---------- Einwilligung (Consent) ---------- */
.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  display:flex;justify-content:center;padding:clamp(.75rem,2vw,1.5rem);
  pointer-events:none;
}
.consent__box{
  pointer-events:auto;width:100%;max-width:640px;
  background:var(--bone);border:1px solid var(--line);
  border-radius:6px;padding:clamp(1.4rem,3vw,2rem);
  box-shadow:0 24px 60px -20px rgba(20,16,15,.5);
  opacity:0;transform:translateY(18px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.consent.is-visible .consent__box{opacity:1;transform:none}
.consent__h{
  font-family:var(--display);font-weight:400;font-size:1.5rem;
  color:var(--ink);margin:0 0 .6rem;line-height:1.2;
}
.consent__p{font-size:.9rem;line-height:1.65;color:var(--ink-2);margin:0 0 1.1rem}
.consent__p a{color:var(--pink-text);text-decoration:underline}
.consent__row{display:none}
.consent.is-open .consent__row{display:grid;gap:.75rem;margin:0 0 1.25rem}
.consent__cat{
  display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;
  font-size:.85rem;line-height:1.55;color:var(--ink-2);
  padding:.85rem 1rem;background:#fff;border:1px solid var(--line-soft);border-radius:4px;
}
.consent__cat b{color:var(--ink);font-weight:500}
.consent__cat input{width:20px;height:20px;margin-top:.1rem;accent-color:var(--pink);flex:none}
.consent__cat--fixed{opacity:.75}
.consent__btns{display:flex;flex-wrap:wrap;gap:.6rem}
.consent__btns .btn{flex:1 1 auto}
.consent__toggle{
  display:block;margin:1rem auto 0;padding:.4rem;
  background:none;border:0;cursor:pointer;
  font-size:.8rem;letter-spacing:.04em;color:var(--ink-3);text-decoration:underline;
}
.consent__toggle:hover{color:var(--ink)}

/* Platzhalter für ein noch nicht geladenes externes Element */
.consent-embed{position:relative;min-height:220px;background:var(--bone-2);border-radius:4px;overflow:hidden}
.consent-embed.is-loaded{background:none}
/* geladene Karten/Embeds dürfen eigene Gesten (Zoom/Pan) nutzen */
.consent-embed.is-loaded,.consent-embed.is-loaded iframe{touch-action:auto}
.consent-embed__ph{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  gap:.6rem;padding:1.75rem;color:var(--ink-2);
}
.consent-embed__ph svg{width:30px;height:30px;color:var(--pink);stroke-width:1.3}
.consent-embed__t{font-family:var(--display);font-size:1.2rem;color:var(--ink);margin:0}
.consent-embed__d{font-size:.82rem;line-height:1.55;color:var(--ink-3);max-width:34ch;margin:0 0 .4rem}
.consent-embed__link{
  background:none;border:0;cursor:pointer;
  font-size:.78rem;letter-spacing:.04em;color:var(--ink-3);text-decoration:underline;padding:.3rem;
}
.consent-embed__link:hover{color:var(--pink-text)}

/* Fußzeilen-Link „Cookie-Einstellungen" */
.footer__bar .js-consent-settings{background:none;border:0;cursor:pointer;font:inherit;padding:0;color:inherit;text-decoration:none}
.footer__bar .js-consent-settings:hover{color:var(--pink)}

@media (prefers-reduced-motion:reduce){
  .consent__box{transition:none}
}

/* Zurueck-nach-oben-Pfeil – sitzt ueber dem WhatsApp-Knopf */
.to-top{
  position:fixed;right:22px;bottom:calc(94px + var(--safe-bottom));z-index:var(--z-float);
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;padding:0;
  background:var(--bone);color:var(--ink);
  border:1px solid var(--line);border-radius:999px;cursor:pointer;
  box-shadow:0 12px 30px -16px rgba(20,16,15,.5);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),
             visibility .35s var(--ease),background .3s var(--ease),
             color .3s var(--ease),border-color .3s var(--ease);
}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.to-top:active{transform:translateY(1px)}
.to-top svg{width:18px;height:18px}

.actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-float);
  display:none;grid-template-columns:1fr 1fr;
  background:var(--bone);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.actionbar a{
  display:flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:58px;text-decoration:none;
  font-size:.8125rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
}
.actionbar a:first-child{color:var(--ink);border-right:1px solid var(--line)}
.actionbar a:last-child{background:#25D366;color:#0B2E17}
.actionbar svg{width:18px;height:18px}

/* ---------- 20. Rechtstexte ---------- */
.legal{padding-top:clamp(8rem,14vw,11rem)}
.legal h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:2.5rem}
.legal h2{font-family:var(--display);font-size:clamp(1.4rem,2.6vw,1.9rem);margin:2.75rem 0 1rem}
.legal h3{font-family:var(--sans);font-size:1.0625rem;font-weight:500;margin:1.75rem 0 .6rem}
.legal p,.legal li{font-size:.9688rem;line-height:1.8;color:var(--ink-2)}
.legal ul{list-style:disc;padding-left:1.25rem;margin:0 0 1.1em}
.legal li{margin-bottom:.4rem}
.legal a{color:var(--pink)}

/* ---------- 21. Scroll-Reveal ---------- */
/* GRUNDSATZ: Der Ausgangszustand ist SICHTBAR. Der versteckte Zustand wird nur
   gesetzt, wenn die Klasse .js-reveal am <html> haengt – die setzt das Skript
   selbst und nimmt sie zurueck, falls es nicht startet. Faellt JavaScript aus,
   ist der Cache veraltet oder verhaelt sich der Observer unerwartet, sind die
   Inhalte einfach ohne Animation da statt unsichtbar. */
.reveal{transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js-reveal .reveal{opacity:0;transform:translateY(26px)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}

/* Der Clip liegt auf dem INNEREN Bild, nicht auf dem beobachteten Container.
   Ein vollstaendig geklipptes Element hat eine leere Schnittflaeche und wird
   vom IntersectionObserver nie als sichtbar gemeldet – der Clip wuerde sich
   dann nie loesen (Henne-Ei-Problem). */
.reveal-img img{transition:clip-path 1.15s var(--ease)}
.js-reveal .reveal-img img{clip-path:inset(0 0 100% 0)}
.reveal-img.is-in img{clip-path:inset(0 0 0 0)}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-img,.reveal-img img{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- 22. Responsive ---------- */
@media (max-width:1080px){
  .nav,.header__tel{display:none}
  .burger{display:flex}
  .trust__grid{grid-template-columns:repeat(2,1fr)}
  .trust__item:nth-child(3){border-left:0}
  .trust__item:nth-child(n+3){border-top:1px solid var(--line-soft)}
  .cards{grid-template-columns:1fr 1fr}
  .cards .card:last-child{grid-column:1/-1}
  .cards .card:last-child .card__media{aspect-ratio:16/7}
  .mini{grid-template-columns:1fr 1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  /* Hochformat: eigener Bildausschnitt (siehe <picture>), Text darueber */
  .hero{min-height:min(94vh,760px);align-items:flex-start;padding-top:calc(74px + 1.75rem + var(--safe-top))}
  .hero__media img{object-position:50% center}
  /* Nur so viel Schleier wie noetig: gemessen reichen ~66 % fuer 4,5:1.
     Vorher waren es 95–98 % – dabei verschwand das Motiv vollstaendig. */
  .hero__media::after{
    background:linear-gradient(180deg,
      rgba(255,255,255,.72) 0%, rgba(255,255,255,.68) 16%,
      rgba(255,255,255,.66) 62%, rgba(255,255,255,.40) 74%,
      rgba(255,255,255,.10) 86%, rgba(255,255,255,0) 94%);
  }
  /* Die Rubrik-Zeile liegt auf dem dunklen Haar. Pink braeuchte dort 90 %
     Schleier, ein dunkler Ton nur 62 % – so bleibt das Bild sichtbar. */
  .hero .eyebrow{color:var(--ink-2)}
  .hero__text{max-width:none;padding-block:0}
  /* Auf dem Handy laege die Hinweiszeile ueber dem Motiv und waere dort
     unlesbar. Der Inhalt steht ohnehin direkt darunter in der Vertrauensleiste. */
  .hero__note{display:none}
  .ed{grid-template-columns:1fr;gap:2rem}
  .ed--flip .ed__media{order:0}
  .ed__media{aspect-ratio:4/3.2}
  .why{grid-template-columns:1fr}
  .why__media{max-width:420px}
  .contact{grid-template-columns:1fr}
  .panel__grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:2.25rem}
  .ctaband__inner{grid-template-columns:1fr}
}
@media (max-width:720px){
  body{font-size:1rem}
  .cards{grid-template-columns:1fr}
  .cards .card:last-child .card__media{aspect-ratio:4/3.15}
  .mini{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr;gap:2.25rem}
  .field--row{grid-template-columns:1fr}
  .wa-float{display:none}
  .actionbar{display:grid}
  /* auf dem Handy ueber der festen Aktionsleiste */
  .to-top{right:16px;bottom:calc(58px + 14px + env(safe-area-inset-bottom));width:48px;height:48px}
  body{padding-bottom:58px}
  .header{height:calc(74px + var(--safe-top))}
  .header__logo img{height:34px}
  .header.is-stuck .header__logo img{height:32px}
  /* Kopfzeile auf dem Handy ruhig halten: Logo + Menue reichen.
     "Termin anfragen" steht direkt darunter im Hero, im Menue und
     als feste Aktionsleiste am unteren Rand. */
  .header__actions .btn{display:none}
  .burger{margin-right:-14px}
  .hero{padding-top:74px}
  .ptable th,.ptable td{padding:.75rem .55rem;font-size:.875rem}
  .ptable td.num,.ptable th.num{width:5rem}
  .faq summary{gap:1.25rem}
  .faq details p{padding-right:0}
}

/* ---------- 23. Print ---------- */
@media print{
  .header,.mobilenav,.wa-float,.actionbar,.to-top,.ctaband,.hero__cta,.footer__social{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .section{padding-block:1.5rem}
  .reveal,.reveal-img,.reveal-img img{opacity:1!important;transform:none!important;clip-path:none!important}
  a{text-decoration:none;color:#000}
}