/* ============================================================
   H&A Nails — geteiltes Design-System (Tokens, Komponenten, Motion-Prep)
   Single Source of Truth · deckungsgleich mit tailwind.config (inline je Seite)
   ============================================================ */
:root{
  --bg:#FAF5F2; --surface:#FFFFFF; --fg:#2A141F; --muted:#8B7480;
  --primary:#6D2A48; --secondary:#CD8E89; --accent:#B8893B; --border:#ECE0DA; --ring:#6D2A48;
  --shadow:0 18px 50px -20px rgb(58 20 38 / .35); --shadow-sm:0 2px 10px -4px rgb(58 20 38 / .25);
  --radius:1rem; --radius-lg:1.5rem; --ease-out:cubic-bezier(.16,1,.3,1);
  --aurora1:rgba(205,142,137,.45); --aurora2:rgba(109,42,72,.30); --aurora3:rgba(184,137,59,.22);
}
html.dark{
  --bg:#190E15; --surface:#241620; --fg:#EFE5EA; --muted:#AE94A2;
  --primary:#D17FA1; --secondary:#DAA39E; --accent:#D4B05E; --border:#392532; --ring:#D17FA1;
  --shadow:0 22px 60px -22px rgb(0 0 0 / .65); --shadow-sm:0 2px 12px -4px rgb(0 0 0 / .55);
  --aurora1:rgba(209,127,161,.30); --aurora2:rgba(120,50,82,.40); --aurora3:rgba(212,176,94,.18);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; background:var(--bg); color:var(--fg); font-family:'Jost',sans-serif; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:clip; transition:background .5s ease,color .5s ease; }
h1,h2,h3,h4{ font-family:'Fraunces',serif; font-weight:500; line-height:1.15; text-wrap:balance; }
[data-split]{ line-height:1.18; padding-bottom:.06em; }
p{ text-wrap:pretty; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--primary); color:#fff; }
:focus-visible{ outline:2px solid var(--ring); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:1200px; margin-inline:auto; padding-inline:1.25rem; }
@media (min-width:768px){ .wrap{ padding-inline:2rem; } }
.eyebrow{ display:inline-flex; align-items:center; gap:.6rem; font-size:.78rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--primary); font-weight:500; }
.eyebrow::before{ content:""; width:34px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--secondary)); }
.h-display{ font-size:clamp(2.3rem,7vw,4.6rem); }
.h-sec{ font-size:clamp(1.8rem,4.5vw,3rem); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font-weight:500;
  padding:.85rem 1.6rem; border-radius:9999px; font-size:1rem; cursor:pointer; border:1px solid transparent;
  transition:transform .35s var(--ease-out),box-shadow .35s,background .3s,color .3s; will-change:transform; }
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-primary{ background:var(--primary); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ box-shadow:var(--shadow); }
.btn-ghost{ border-color:var(--border); color:var(--fg); background:transparent; }
.btn-ghost:hover{ border-color:var(--primary); color:var(--primary); }
.btn-gold{ background:linear-gradient(120deg,var(--accent),#d8b25f); color:#2A141F; }

.aurora{ position:fixed; inset:-20% -10% auto -10%; height:120vh; z-index:-2; pointer-events:none; filter:blur(70px); opacity:.9; }
.aurora b{ position:absolute; border-radius:50%; display:block; }
.aurora .a1{ width:46vw; height:46vw; left:-8vw; top:2vh; background:radial-gradient(circle at 30% 30%,var(--aurora1),transparent 65%); animation:drift1 22s ease-in-out infinite; }
.aurora .a2{ width:50vw; height:50vw; right:-10vw; top:10vh; background:radial-gradient(circle at 60% 40%,var(--aurora2),transparent 65%); animation:drift2 26s ease-in-out infinite; }
.aurora .a3{ width:38vw; height:38vw; left:30vw; top:40vh; background:radial-gradient(circle at 50% 50%,var(--aurora3),transparent 65%); animation:drift3 30s ease-in-out infinite; }
canvas.fx{ position:fixed; inset:0; z-index:-1; pointer-events:none; }
@keyframes drift1{ 0%,100%{ transform:translate3d(0,0,0) scale(1);} 50%{ transform:translate3d(3%,4%,0) scale(1.08);} }
@keyframes drift2{ 0%,100%{ transform:translate3d(0,0,0) scale(1);} 50%{ transform:translate3d(-4%,3%,0) scale(1.1);} }
@keyframes drift3{ 0%,100%{ transform:translate3d(0,0,0) scale(1);} 50%{ transform:translate3d(2%,-5%,0) scale(1.05);} }
@media (prefers-reduced-motion: reduce){ .aurora b{ animation:none !important; } }

.site-header{ position:fixed; inset:0 0 auto 0; z-index:60; transition:background .4s,box-shadow .4s,color .4s,backdrop-filter .4s;
  color:var(--fg); background:transparent; }
.site-header.scrolled{ background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 var(--border); }
.nav-link{ position:relative; font-size:.98rem; padding:.4rem .2rem; opacity:.9; transition:opacity .25s; }
.nav-link:hover{ opacity:1; }
.nav-link::after{ content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:linear-gradient(90deg,var(--accent),var(--secondary)); transition:width .3s var(--ease-out); }
.nav-link:hover::after,.nav-link[aria-current="page"]::after{ width:100%; }
.logo-mark{ font-family:'Fraunces',serif; font-weight:600; font-size:1.35rem; letter-spacing:.02em; display:inline-flex; align-items:center; gap:.5rem; }
.logo-amp{ color:var(--accent); }

.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); overflow:hidden; position:relative; transition:box-shadow .4s,transform .4s,border-color .4s; }
.card:hover{ box-shadow:var(--shadow); }
[data-tilt]{ transform-style:preserve-3d; }
.gloss{ position:absolute; inset:0; overflow:hidden; pointer-events:none; border-radius:inherit; }
.gloss::before{ content:""; position:absolute; top:-60%; left:-30%; width:40%; height:220%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.55),transparent); transform:translateX(-180%) rotate(8deg);
  transition:transform .9s var(--ease-out); }
.card:hover .gloss::before, .glossbox:hover .gloss::before{ transform:translateX(420%) rotate(8deg); }
html.dark .gloss::before{ background:linear-gradient(115deg,transparent,rgba(255,255,255,.18),transparent); }

.ph{ position:relative; overflow:hidden; background:
    radial-gradient(120% 90% at 20% 10%, var(--secondary), transparent 60%),
    linear-gradient(135deg, var(--primary), #3a1730 70%); }
.ph img{ position:relative; z-index:2; width:100%; height:100%; object-fit:cover; display:block;
  transition:opacity .6s, transform 1.2s var(--ease-out); }
.ph .ph-mark{ position:absolute; z-index:1; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.7); }
.ph img.img-failed{ opacity:0; }
.ph:hover img:not(.img-failed){ transform:scale(1.05); }

html.no-js [data-reveal] > *, html.no-js [data-reveal-item], .no-anim [data-reveal] > *, .no-anim [data-reveal-item], .no-anim [data-split], .no-anim [data-depth]{ opacity:1 !important; transform:none !important; }

#preloader{ position:fixed; inset:0; z-index:200; background:var(--bg); display:flex; align-items:center; justify-content:center; }
#preloader .pl-inner{ text-align:center; }
#preloader .pl-word{ font-family:'Fraunces',serif; font-size:clamp(2rem,8vw,3.4rem); color:var(--fg); letter-spacing:.04em; }
#preloader .pl-word .logo-amp{ color:var(--accent); }
#preloader .pl-sub{ margin-top:.4rem; font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color:var(--muted); }

.divider-stroke{ height:2px; width:100%; background:linear-gradient(90deg,transparent,var(--secondary),var(--accent),transparent); opacity:.5; }
.price-row{ display:flex; align-items:baseline; gap:.75rem; }
.price-row .dots{ flex:1; border-bottom:1px dotted var(--border); transform:translateY(-4px); }
.price-row .amt{ font-family:'Fraunces',serif; color:var(--primary); font-weight:500; white-space:nowrap; }

.swatch{ border-radius:9999px; box-shadow:inset 0 -6px 12px rgba(0,0,0,.18), var(--shadow-sm); }
.shade-fill{ background:var(--c); transform-origin:bottom; }

[data-spin],[data-grow]{ transform-box:fill-box; transform-origin:50% 50%; }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; } }
@view-transition{ navigation:auto; }
@media (prefers-reduced-motion: reduce){ @view-transition{ navigation:none; } }

.mobile-menu{ position:fixed; inset:0; z-index:80; background:var(--bg); transform:translateY(-100%);
  transition:transform .5s var(--ease-out); display:flex; flex-direction:column; }
.mobile-menu.open{ transform:translateY(0); }

/* Akkordeon (FAQ) */
.acc-item{ border-bottom:1px solid var(--border); }
.acc-btn{ width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.25rem 0; font-family:'Fraunces',serif; font-size:1.15rem; cursor:pointer; background:none; border:0; color:inherit; }
.acc-panel{ overflow:hidden; max-height:0; transition:max-height .45s var(--ease-out); }
.acc-item.open .acc-panel{ max-height:320px; }
.acc-item.open .acc-icon{ transform:rotate(45deg); }
.acc-icon{ transition:transform .35s var(--ease-out); color:var(--primary); flex-shrink:0; }