/* ============================================================================
   Siegmund Renate Kosmetik — app.css
   Design-System „Seidenlicht": Tokens · Themes · Komponenten · Motion-Prep
   Single Source of Truth (deckt sich mit tailwind.config in jeder Seite).
   ========================================================================== */

/* ---------- Tokens (Light = Standard) ---------------------------------- */
:root{
  --bg:#F6F1E9;
  --surface:#FCF9F4;
  --surface-2:#F1E9DC;
  --fg:#2A2520;
  --primary:#4C5B4C;
  --primary-soft:#7A8B79;
  --secondary:#C7B49B;
  --accent:#B08A4F;
  --accent-deep:#946E36;
  --rose:#C9A6A0;
  --muted:#7C7468;
  --border:#E5DACA;

  --radius-sm:.5rem;
  --radius:1rem;
  --radius-lg:1.75rem;

  --shadow-sm:0 2px 10px rgb(60 50 35 / .08);
  --shadow:0 18px 50px -20px rgb(60 50 35 / .28);
  --shadow-lg:0 40px 80px -30px rgb(45 38 28 / .35);

  --dur:.6s;
  --ease-out:cubic-bezier(.16,1,.3,1);

  --maxw:78rem;
  --header-h:4.75rem;

  --font-head:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  color-scheme: light;
}

html[data-theme="dark"]{
  --bg:#1A1714;
  --surface:#232019;
  --surface-2:#2C2820;
  --fg:#ECE5D9;
  --primary:#93A78D;
  --primary-soft:#A9BBA2;
  --secondary:#C7B49B;
  --accent:#CBA468;
  --accent-deep:#B98E4E;
  --rose:#C9A6A0;
  --muted:#A89C8B;
  --border:#342E26;

  --shadow-sm:0 2px 10px rgb(0 0 0 / .35);
  --shadow:0 22px 55px -20px rgb(0 0 0 / .6);
  --shadow-lg:0 45px 90px -30px rgb(0 0 0 / .7);
  color-scheme: dark;
}

/* ---------- Base ------------------------------------------------------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--bg); overflow-x:clip; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:transparent;   /* Grundfarbe liegt auf html, damit das fixe Licht-Canvas sichtbar bleibt */
  color:var(--fg);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.7;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  transition:background .5s var(--ease-out), color .5s var(--ease-out);
}

h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:500;
  line-height:1.08;
  letter-spacing:.01em;
  margin:0;
  text-wrap:balance;
  color:var(--fg);
}
p{ margin:0 0 1rem; text-wrap:pretty; }
a{ color:inherit; text-decoration:none; }
img,svg,video{ max-width:100%; display:block; }
img{ height:auto; }
::selection{ background:color-mix(in srgb, var(--accent) 35%, transparent); }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }

/* fluid type */
.t-eyebrow{
  font-family:var(--font-body);
  font-weight:500;
  font-size:.78rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--accent-deep);
}
html[data-theme="dark"] .t-eyebrow{ color:var(--accent); }
@media (max-width:480px){ .t-eyebrow{ letter-spacing:.2em; font-size:.7rem; } }
.t-h1{ font-size:clamp(2.4rem, 7vw, 5.1rem); }
.t-h2{ font-size:clamp(1.9rem, 4.6vw, 3.2rem); }
.t-h3{ font-size:clamp(1.35rem, 2.6vw, 1.9rem); }
.t-lead{ font-size:clamp(1.08rem,1.6vw,1.3rem); color:var(--muted); font-weight:300; }
.italic-accent{ font-style:italic; color:var(--primary); }

/* ---------- Layout helpers -------------------------------------------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:1.5rem; }
@media (min-width:768px){ .container{ padding-inline:2.5rem; } }
.section{ padding-block:clamp(3.5rem, 8vw, 7rem); position:relative; }
.divider{ height:1px; background:linear-gradient(90deg, transparent, var(--border), transparent); border:0; margin:0; }

/* hairline ornament */
.hairline{ display:inline-block; width:3.25rem; height:1px; background:var(--accent); vertical-align:middle; }

/* ---------- Buttons ---------------------------------------------------- */
.btn{
  --b-bg:var(--primary); --b-fg:#FCF9F4;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.92rem 1.7rem; border-radius:999px;
  font-family:var(--font-body); font-weight:500; font-size:.92rem; letter-spacing:.02em;
  background:var(--b-bg); color:var(--b-fg);
  border:1px solid transparent; cursor:pointer;
  transition:transform .5s var(--ease-out), box-shadow .4s var(--ease-out), background .35s, color .35s;
  box-shadow:var(--shadow-sm); will-change:transform; text-align:center;
}
.btn:hover{ box-shadow:var(--shadow); }
.btn--accent{ --b-bg:var(--accent); --b-fg:#241a0c; }
html[data-theme="dark"] .btn--accent{ --b-fg:#1A1714; }
.btn--ghost{
  --b-bg:transparent; --b-fg:var(--fg);
  border-color:var(--border); box-shadow:none;
}
.btn--ghost:hover{ border-color:var(--primary); color:var(--primary); box-shadow:none; }
.btn svg{ width:1.05em; height:1.05em; }

.link-underline{ position:relative; font-weight:500; color:var(--primary); }
.link-underline::after{ content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px;
  background:currentColor; transform:scaleX(.0); transform-origin:left; transition:transform .45s var(--ease-out); }
.link-underline:hover::after{ transform:scaleX(1); }

/* ---------- Header ----------------------------------------------------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60; height:var(--header-h);
  display:flex; align-items:center;
  color:var(--fg); background:transparent;
  transition:background .4s var(--ease-out), box-shadow .4s, backdrop-filter .4s, height .3s;
}
.site-header.scrolled{
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--border);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand{ display:inline-flex; align-items:center; gap:.7rem; font-family:var(--font-head); font-size:1.35rem; font-weight:600; letter-spacing:.02em; }
.brand svg{ width:2.3rem; height:2.3rem; flex:0 0 auto; }
.brand small{ display:block; font-family:var(--font-body); font-weight:400; font-size:.6rem; letter-spacing:.34em; text-transform:uppercase; color:var(--muted); margin-top:-2px; }
.nav{ display:none; align-items:center; gap:2rem; }
@media (min-width:1024px){ .nav{ display:flex; } }
.nav a{ font-size:.9rem; font-weight:400; letter-spacing:.02em; position:relative; padding-block:.4rem; color:inherit; opacity:.86; }
.nav a:hover,.nav a[aria-current="page"]{ opacity:1; color:var(--primary); }
.nav a[aria-current="page"]::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--accent); }
.header-actions{ display:flex; align-items:center; gap:.6rem; }

.theme-toggle{
  width:2.75rem; height:2.75rem; border-radius:999px; border:1px solid var(--border);
  background:color-mix(in srgb, var(--surface) 60%, transparent); color:inherit; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; transition:.3s; flex:0 0 auto;
}
.theme-toggle:hover{ border-color:var(--primary); color:var(--primary); }
.theme-toggle svg{ width:1.15rem; height:1.15rem; }
html[data-theme="dark"] .theme-toggle .ico-sun{ display:block; }
html[data-theme="dark"] .theme-toggle .ico-moon{ display:none; }
.theme-toggle .ico-sun{ display:none; }
.theme-toggle .ico-moon{ display:block; }

.burger{ display:inline-flex; width:2.75rem; height:2.75rem; border:1px solid var(--border); border-radius:999px;
  background:color-mix(in srgb, var(--surface) 60%, transparent); align-items:center; justify-content:center; cursor:pointer; color:inherit; }
@media (min-width:1024px){ .burger{ display:none; } }
.burger svg{ width:1.3rem; height:1.3rem; }

/* Mobile menu (opaque) */
.mobile-menu{
  position:fixed; inset:0; z-index:70; background:var(--bg);
  display:flex; flex-direction:column; padding:1.5rem;
  transform:translateY(-100%); transition:transform .55s var(--ease-out);
  visibility:hidden;
}
.mobile-menu.open{ transform:translateY(0); visibility:visible; }
.mobile-menu .mm-top{ display:flex; align-items:center; justify-content:space-between; height:var(--header-h); }
.mobile-menu nav{ display:flex; flex-direction:column; gap:.4rem; margin-top:1.5rem; }
.mobile-menu nav a{ font-family:var(--font-head); font-size:1.85rem; font-weight:500; padding:.55rem 0; border-bottom:1px solid var(--border); }
.mobile-menu nav a:hover{ color:var(--primary); }
.mobile-menu .mm-foot{ margin-top:auto; color:var(--muted); font-size:.9rem; }
.mobile-menu .mm-foot a{ color:var(--primary); }

/* ---------- Cards ------------------------------------------------------ */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:1.9rem; box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s;
  display:flex; flex-direction:column; height:100%; min-width:0;
}
/* Grid-/Flex-Items dürfen nicht über ihren Track hinauswachsen (min-content-Falle) */
.grid-cards > *, .split > *, .hero-grid > *, .footer-grid > *{ min-width:0; }
.card:hover{ box-shadow:var(--shadow); border-color:color-mix(in srgb, var(--primary) 35%, var(--border)); }
.card .icon-badge{
  width:3.4rem; height:3.4rem; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--primary) 12%, transparent); color:var(--primary); margin-bottom:1.15rem;
}
.card .icon-badge svg{ width:1.7rem; height:1.7rem; }
.card h3{ margin-bottom:.5rem; }
.card .card-cta{ margin-top:auto; padding-top:1.1rem; }

/* service card with index number */
.svc-card{ position:relative; overflow:hidden; }
.svc-card .num{ position:absolute; top:1.2rem; right:1.5rem; font-family:var(--font-head); font-size:2.6rem; color:color-mix(in srgb, var(--accent) 30%, transparent); line-height:1; }

/* ---------- Image frame + fallback ------------------------------------ */
.img-frame{ position:relative; overflow:hidden; border-radius:var(--radius); background:var(--surface-2); }
.img-frame img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.2s var(--ease-out), filter .6s; }
.img-frame.duotone img{ filter:saturate(.78) contrast(1.02); }
.img-frame.duotone::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, color-mix(in srgb,var(--primary) 8%, transparent), color-mix(in srgb,var(--primary) 26%, transparent));
  mix-blend-mode:multiply; }
html[data-theme="dark"] .img-frame.duotone::after{ background:linear-gradient(180deg, color-mix(in srgb,var(--primary) 14%, transparent), color-mix(in srgb,#000 35%, transparent)); }
.img-frame.hover-zoom:hover img{ transform:scale(1.06); }
/* generated on-brand fallback when a photo fails to load */
.img-fallback{
  display:grid; place-items:center; text-align:center;
  background:
    radial-gradient(120% 90% at 70% 20%, color-mix(in srgb,var(--rose) 40%, transparent), transparent 60%),
    radial-gradient(120% 120% at 20% 90%, color-mix(in srgb,var(--primary) 45%, transparent), transparent 55%),
    linear-gradient(135deg, var(--surface-2), var(--secondary));
  color:color-mix(in srgb, var(--fg) 65%, var(--bg));
}
.img-fallback .fb-mark{ font-family:var(--font-head); font-size:2.4rem; letter-spacing:.04em; opacity:.7; }
.img-fallback small{ display:block; font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; opacity:.6; margin-top:.2rem; }

/* ---------- Pills / tags ---------------------------------------------- */
.pill{ display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .85rem; border-radius:999px;
  border:1px solid var(--border); background:var(--surface); font-size:.8rem; color:var(--muted); }
.pill svg{ width:.95rem; height:.95rem; color:var(--primary); }

/* ---------- Accordion -------------------------------------------------- */
.acc{ border-top:1px solid var(--border); }
.acc__item{ border-bottom:1px solid var(--border); }
.acc__head{ width:100%; text-align:left; background:none; border:0; cursor:pointer; color:inherit;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.35rem 0;
  font-family:var(--font-head); font-size:1.25rem; font-weight:500; }
.acc__head:hover{ color:var(--primary); }
.acc__icon{ flex:0 0 auto; width:1.6rem; height:1.6rem; border-radius:999px; border:1px solid var(--border);
  display:inline-flex; align-items:center; justify-content:center; transition:.4s; }
.acc__icon::before,.acc__icon::after{ content:""; position:absolute; width:.7rem; height:1.5px; background:currentColor; border-radius:2px; transition:.4s; }
.acc__icon{ position:relative; color:var(--primary); }
.acc__icon::after{ transform:rotate(90deg); }
.acc__item[aria-expanded="true"] .acc__icon::after{ transform:rotate(0); opacity:0; }
.acc__item[aria-expanded="true"] .acc__icon{ background:var(--primary); color:#FCF9F4; border-color:var(--primary); }
.acc__panel{ overflow:hidden; height:0; }
.acc__panel-inner{ padding:0 0 1.4rem; color:var(--muted); max-width:60ch; }

/* ---------- Forms ------------------------------------------------------ */
.field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.15rem; }
.field label{ font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:500; }
.field input,.field select,.field textarea{
  font-family:var(--font-body); font-size:1rem; color:var(--fg);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:.85rem 1rem; transition:border-color .3s, box-shadow .3s; width:100%;
}
.field textarea{ min-height:8rem; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.form-note{ font-size:.82rem; color:var(--muted); }
.form-success{ display:none; padding:1.5rem; border-radius:var(--radius);
  background:color-mix(in srgb, var(--primary) 12%, var(--surface)); border:1px solid var(--border); }
.form-success.show{ display:block; }

/* ---------- Footer ----------------------------------------------------- */
.site-footer{ background:var(--surface); border-top:1px solid var(--border); padding-block:4rem 2.5rem; position:relative; overflow:hidden; }
.footer-grid{ display:grid; gap:2.5rem; grid-template-columns:1fr; }
@media (min-width:768px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; } }
.site-footer h4{ font-family:var(--font-body); font-size:.78rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); margin-bottom:1.1rem; font-weight:500; }
.site-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.site-footer a{ color:var(--muted); transition:color .3s; }
.site-footer a:hover{ color:var(--primary); }
.footer-bottom{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--border); color:var(--muted); font-size:.85rem; }

/* ---------- Hero ------------------------------------------------------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding-top:var(--header-h); overflow:hidden; }
.hero-aura{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-grid{ position:relative; z-index:2; display:grid; gap:2.5rem; grid-template-columns:1fr; align-items:center; width:100%; }
@media (min-width:960px){ .hero-grid{ grid-template-columns:1.05fr .95fr; gap:3rem; } }

/* aurora blobs (permanent background life) */
.aurora{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; will-change:transform; }
@media (prefers-reduced-motion:reduce){ .aurora{ animation:none !important; } }
@keyframes drift1{ 0%,100%{ transform:translate3d(0,0,0) scale(1);} 50%{ transform:translate3d(4%,-5%,0) scale(1.08);} }
@keyframes drift2{ 0%,100%{ transform:translate3d(0,0,0) scale(1.05);} 50%{ transform:translate3d(-5%,4%,0) scale(.95);} }
@keyframes breathe{ 0%,100%{ transform:scale(1); opacity:.5;} 50%{ transform:scale(1.12); opacity:.8;} }

/* ---------- Process / Ritual ------------------------------------------ */
.ritual{ display:grid; gap:1.25rem; grid-template-columns:1fr; }
@media (min-width:680px){ .ritual{ grid-template-columns:repeat(5,1fr); } }
.ritual-step{ text-align:center; position:relative; }
.ritual-step .dot{ width:3.6rem; height:3.6rem; margin:0 auto .9rem; border-radius:999px; border:1px solid var(--border);
  background:var(--surface); display:grid; place-items:center; color:var(--primary); position:relative; z-index:2; }
.ritual-step .dot svg{ width:1.7rem; height:1.7rem; }
.ritual-step .stepnum{ font-family:var(--font-head); font-size:.95rem; color:var(--accent-deep); }
html[data-theme="dark"] .ritual-step .stepnum{ color:var(--accent); }
.ritual-step h4{ font-family:var(--font-head); font-size:1.15rem; margin:.25rem 0 .35rem; }
.ritual-step p{ font-size:.92rem; color:var(--muted); margin:0; }

/* ---------- Stat / measure -------------------------------------------- */
.measure{ font-family:var(--font-head); font-size:clamp(2.4rem,6vw,3.6rem); color:var(--primary); line-height:1; }

/* ---------- Reveal / motion prep -------------------------------------- */
[data-split]{ overflow:hidden; }
[data-tilt]{ transform-style:preserve-3d; }
[data-spin],[data-grow]{ transform-box:fill-box; transform-origin:50% 50%; }
[data-petal]{ transform-box:fill-box; transform-origin:50% 100%; }
/* Hintergrund-Canvas IMMER vollflächig — nie als 300×150-Default-Kästchen */
canvas.bg{ position:fixed; inset:0; width:100%; height:100%; display:block; z-index:-1; pointer-events:none; opacity:1; }

/* CDN-/JS-fail-safe: ohne GSAP alles sichtbar */
.no-anim [data-reveal] > *,
.no-anim [data-split],
.no-anim [data-depth],
.no-anim [data-fade]{ opacity:1 !important; transform:none !important; }
.no-anim #preloader{ display:none !important; }

/* preloader */
#preloader{ position:fixed; inset:0; z-index:200; background:var(--bg); display:grid; place-items:center; }
#preloader .mark{ width:min(46vw,150px); height:auto; }
#preloader .pl-sub{ margin-top:1.1rem; font-size:.7rem; letter-spacing:.34em; text-transform:uppercase; color:var(--muted); text-align:center; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* utility */
.eyebrow-row{ display:inline-flex; align-items:center; gap:.9rem; margin-bottom:1.4rem; }
.section-head{ max-width:46rem; }
.text-center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.grid-cards{ display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media (min-width:640px){ .grid-cards.cols-2{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:880px){ .grid-cards.cols-3{ grid-template-columns:repeat(3,1fr); } .grid-cards.cols-4{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .grid-cards.cols-4{ grid-template-columns:repeat(4,1fr); } }

.split{ display:grid; gap:2.5rem; grid-template-columns:1fr; align-items:center; }
@media (min-width:900px){ .split{ grid-template-columns:1fr 1fr; gap:3.5rem; } .split.wide-left{ grid-template-columns:1.15fr .85fr; } .split.wide-right{ grid-template-columns:.85fr 1.15fr; } }

.skip-link{ position:absolute; left:1rem; top:-3rem; z-index:300; background:var(--primary); color:#FCF9F4;
  padding:.7rem 1.1rem; border-radius:999px; transition:top .3s; }
.skip-link:focus{ top:1rem; }

.badge-soft{ display:inline-block; padding:.3rem .8rem; border-radius:999px; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; background:color-mix(in srgb,var(--accent) 16%, transparent); color:var(--accent-deep); }
html[data-theme="dark"] .badge-soft{ color:var(--accent); }