/* ============================================================
   Nietz Kosmetik — "Organic" Theme
   Layout & content: Nietz (Kundendesign) · Grundfarbgebung: Organic-Beauty-Theme
   Soft sage + dusty rose on warm cream
   ============================================================ */

:root{
  --green:#8ca06f;      /* Theme-Salbeigrün (Akzent) */
  --green-d:#728757;
  --green-t:#eef1e8;    /* hellster Salbe-Tint */
  --magenta:#c8949a;    /* Theme-Altrosa (Akzent) */
  --magenta-d:#b3777e;
  --magenta-t:#f5ecec;
  --ink:#2b2a27;        /* nahezu Schwarz (Text) */
  --muted:#8b877f;
  --cream:#f6f5f1;      /* heller, luftiger Grundton */
  --cream-2:#f0efe9;    /* dezenter Wechselton */
  --paper:#ffffff;
  --line:#eae8e1;
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Mulish', system-ui, sans-serif;
  --script:'Sacramento', cursive;
  --shadow:0 26px 50px -40px rgba(70,65,55,.35);
  --shadow-sm:0 12px 26px -22px rgba(70,65,55,.32);
  --r:0px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.container{ width:100%; max-width:1280px; margin:0 auto; padding:0 40px; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:16px; top:12px; background:var(--ink); color:#fff; padding:10px 16px; z-index:200; }

/* ---------- shared type ---------- */
.script{ font-family:var(--script); color:var(--green); font-size:2.6rem; line-height:.9; display:inline-block; transform:rotate(-3deg); }
.script--magenta{ color:var(--magenta); }
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:.72rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase;
  color:var(--green);
}
.eyebrow--magenta{ color:var(--magenta); }
.eyebrow svg{ width:15px; height:15px; }
.display{ font-family:var(--serif); font-weight:600; line-height:1.02; letter-spacing:-.005em; }
h1.display{ font-size:clamp(2.8rem, 5.6vw, 5rem); }
.h-xl{ font-family:var(--serif); font-weight:600; font-size:clamp(2rem,3.6vw,3.2rem); line-height:1.06; letter-spacing:-.005em; }
.h-lg{ font-family:var(--serif); font-weight:600; font-size:clamp(1.7rem,2.6vw,2.4rem); line-height:1.1; }
.lead{ font-size:1.12rem; color:var(--muted); line-height:1.75; }
em{ font-style:italic; color:var(--magenta); }

.sec-head{ max-width:680px; margin-bottom:3rem; }
.sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.sec-head .h-xl{ margin-top:.5rem; }
.sec-head .lead{ margin-top:1rem; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--sans); font-weight:700; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
  padding:1.05em 2.1em; border-radius:0; cursor:pointer; border:1.5px solid transparent;
  transition:transform .25s, background .25s, color .25s, box-shadow .25s;
}
.btn svg{ width:17px; height:17px; }
.btn--primary{ background:var(--ink); color:#fff; }
.btn--primary:hover{ background:var(--green-d); transform:translateY(-2px); }
.btn--magenta{ background:var(--green); color:#fff; }
.btn--magenta:hover{ background:var(--green-d); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:#fff; transform:translateY(-2px); }
.btn--light{ background:var(--ink); color:#fff; }
.btn--light:hover{ transform:translateY(-2px); background:#000; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:700; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--green);
  transition:gap .25s, color .25s;
}
.link-arrow svg{ width:16px; height:16px; }
.link-arrow:hover{ gap:.9em; color:var(--magenta); }

/* ============================================================ TOPBAR */
.topbar{ background:var(--paper); color:var(--muted); font-size:.82rem; border-bottom:1px solid var(--line); }
.topbar .container{ display:flex; align-items:center; justify-content:space-between; height:44px; }
.topbar a{ display:inline-flex; align-items:center; gap:.5em; letter-spacing:.04em; color:var(--ink); }
.topbar a:hover{ color:var(--green); }
.topbar__phone svg{ width:15px; height:15px; color:var(--green); }
.topbar__msg{ color:var(--muted); letter-spacing:.12em; text-transform:uppercase; font-size:.72rem; }
.topbar__social{ display:flex; gap:1.1rem; }
.topbar__social svg{ width:15px; height:15px; }

/* ============================================================ HEADER */
.site-header{ position:sticky; top:0; z-index:100; background:rgba(246,245,241,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.site-header__inner{ display:flex; align-items:center; justify-content:space-between; height:96px; gap:2rem; }
.brand img{ height:62px; width:auto; }
.nav{ display:flex; align-items:center; gap:2.3rem; margin-left:auto; }
.nav a{ font-size:.82rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink); position:relative; padding:.4rem 0; }
.nav a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--magenta); transition:width .3s; }
.nav a:hover::after, .nav a[aria-current="page"]::after{ width:100%; }
.nav a[aria-current="page"]{ color:var(--magenta); }
.header-cta{ padding:.85em 1.6em; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.nav-toggle span{ width:26px; height:2px; background:var(--ink); transition:.3s; }

/* ============================================================ HERO */
.hero{ position:relative; overflow:hidden; background:
  radial-gradient(120% 90% at 80% 10%, var(--green-t) 0%, transparent 60%),
  var(--cream); }
.hero__grid{ display:grid; grid-template-columns:1fr 1.04fr; align-items:center; gap:3rem; padding:5rem 0 5.5rem; }
.hero__copy{ max-width:560px; position:relative; z-index:3; }
.hero__copy .script{ margin-bottom:.4rem; }
.hero__copy h1{ margin:.4rem 0 1.5rem; }
.hero__lead{ max-width:440px; margin-bottom:2.4rem; }
.hero__actions{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.hero__dots{ display:flex; gap:.7rem; margin-top:2.6rem; }
.hero__dots button{ width:9px; height:9px; border:none; background:#cdcabf; cursor:pointer; padding:0; transition:.3s; }
.hero__dots button[aria-current="true"]{ width:30px; background:var(--green); }
.hero__slide{ display:none; }
.hero__slide[data-active]{ display:block; }

.hero__media{ position:relative; z-index:2; }
.hero__media .frame{ position:relative; }
.hero__media image-slot{ display:block; width:100%; height:auto; aspect-ratio:1.04/1; overflow:hidden; box-shadow:var(--shadow); }
.hero__badge{
  position:absolute; left:-26px; bottom:42px; z-index:4;
  display:flex; align-items:center; gap:.8rem; background:#fff; padding:.9rem 1.2rem; box-shadow:var(--shadow-sm); border:1px solid var(--line); }
.hero__badge .ring{ width:42px; height:42px; background:var(--green-t); display:grid; place-items:center; color:var(--green); flex:0 0 auto; }
.hero__badge .ring svg{ width:22px; height:22px; }
.hero__badge b{ display:block; font-size:.92rem; }
.hero__badge span{ font-size:.74rem; color:var(--muted); line-height:1.3; display:block; max-width:160px; }

/* botanical leaves */
.leaf{ position:absolute; color:var(--green); opacity:.5; z-index:1; pointer-events:none; }
.leaf--1{ top:6%; right:34%; width:54px; transform:rotate(20deg); }
.leaf--2{ bottom:12%; right:6%; width:46px; transform:rotate(-30deg); opacity:.4; }
.leaf--3{ top:40%; right:46%; width:34px; transform:rotate(60deg); opacity:.35; }

/* ============================================================ EDITORIAL TILES */
.tiles{ padding:5.5rem 0; }
.tiles__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.tile{ background:var(--paper); overflow:hidden; border:1px solid var(--line); transition:transform .35s, box-shadow .35s; }
.tile:nth-child(2){ transform:translateY(-32px); }
.tile:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.tile:nth-child(2):hover{ transform:translateY(-40px); }
.tile image-slot{ display:block; width:100%; height:auto; aspect-ratio:1.32/1; }
.tile__body{ padding:1.8rem 1.9rem 2.1rem; text-align:center; }
.tile__eyebrow{ font-family:var(--script); color:var(--green); font-size:1.7rem; line-height:1; }
.tile:nth-child(2) .tile__eyebrow{ color:var(--magenta); }
.tile__body h3{ font-family:var(--serif); font-weight:600; font-size:1.6rem; margin:.2rem 0 1.1rem; }
.tile__body .link-arrow{ font-size:.72rem; }

/* ============================================================ SIGNATURE BANNER */
.signature{ position:relative; background:var(--cream-2); color:var(--ink); overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.signature__grid{ display:grid; grid-template-columns:1.05fr 1fr; align-items:stretch; }
.signature__media image-slot{ display:block; width:100%; height:100%; min-height:440px; }
.signature__body{ padding:5rem 4.5rem; display:flex; flex-direction:column; justify-content:center; }
.signature__body .script{ color:var(--green); }
.signature__tm{ font-family:var(--serif); font-weight:600; font-size:clamp(2.1rem,3.4vw,3rem); line-height:1.08; margin:.3rem 0 1.2rem; }
.signature__tm sup{ font-size:.4em; color:var(--green); }
.signature__body p{ color:var(--muted); max-width:440px; margin-bottom:2rem; }

/* ============================================================ PRODUCT CATEGORIES */
.cats{ padding:6rem 0; }
.cats__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; }
.cat{ background:var(--paper); overflow:hidden; border:1px solid var(--line); transition:transform .3s, box-shadow .3s; position:relative; }
.cat:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.cat image-slot{ display:block; width:100%; height:auto; aspect-ratio:1.25/1; }
.cat__tag{ position:absolute; z-index:2; top:1rem; left:1rem; background:var(--ink); color:#fff; font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; padding:.4em .9em; }
.cat__body{ padding:1.5rem 1.7rem 1.9rem; }
.cat__body h3{ font-family:var(--serif); font-weight:600; font-size:1.5rem; }
.cat__body p{ color:var(--muted); font-size:.96rem; margin-top:.3rem; }

/* ============================================================ SERVICES */
.services{ padding:6rem 0; background:var(--cream-2); }
.services__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; }
.svc{ background:var(--paper); border:1px solid var(--line); padding:2.4rem 1.9rem; text-align:center; transition:transform .3s; }
.svc:hover{ transform:translateY(-6px); }
.svc__ic{ width:62px; height:62px; margin:0 auto 1.2rem; background:var(--green-t); display:grid; place-items:center; color:var(--green); }
.svc:nth-child(even) .svc__ic{ background:var(--magenta-t); color:var(--magenta); }
.svc__ic svg{ width:30px; height:30px; }
.svc h3{ font-family:var(--serif); font-weight:600; font-size:1.4rem; margin-bottom:.5rem; }
.svc p{ color:var(--muted); font-size:.94rem; }

/* ============================================================ STATS */
.stats{ padding:4.5rem 0; }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center; }
.stat b{ font-family:var(--serif); font-weight:600; color:var(--green); font-size:clamp(2.4rem,4vw,3.4rem); display:block; line-height:1; }
.stat:nth-child(even) b{ color:var(--magenta); }
.stat span{ color:var(--muted); font-size:.92rem; margin-top:.5rem; display:block; }

/* ============================================================ PHILOSOPHY / QUOTE */
.philos{ padding:6rem 0; background:var(--green-t); }
.philos__grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:3.5rem; align-items:center; }
.philos__media{ position:relative; }
.philos__media image-slot{ display:block; width:100%; height:auto; aspect-ratio:1/1.06; overflow:hidden; box-shadow:var(--shadow); }
.quote-mark{ font-family:var(--serif); color:var(--magenta); font-size:6rem; line-height:.6; }
.philos blockquote{ font-family:var(--serif); font-weight:500; font-size:clamp(1.5rem,2.4vw,2.1rem); line-height:1.32; margin:.5rem 0 1.6rem; }
.philos cite{ font-style:normal; display:flex; align-items:center; gap:.8rem; }
.philos cite b{ font-family:var(--sans); font-weight:700; }
.philos cite span{ color:var(--muted); font-size:.92rem; }
.philos cite .dot{ width:34px; height:2px; background:var(--green); }
.philos blockquote{ color:var(--ink); }

/* ============================================================ FEATURE TILES (bottom) */
.feats{ padding:0 0 6rem; }
.feats__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; }
.feat{ position:relative; overflow:hidden; min-height:300px; display:flex; align-items:flex-end; border:1px solid var(--line); }
.feat image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.feat__scrim{ position:relative; z-index:2; width:100%; padding:2rem; background:linear-gradient(to top, rgba(35,32,30,.85) 10%, rgba(35,32,30,0) 90%); color:#fff; }
.feat__scrim h3{ font-family:var(--serif); font-weight:600; font-size:1.6rem; margin-bottom:.7rem; }
.feat__scrim .link-arrow{ color:#fff; }
.feat__scrim .link-arrow:hover{ color:var(--green-t); }

/* ============================================================ CTA / contact ribbon */
.ribbon{ background:var(--ink); color:#fff; }
.ribbon .container{ display:flex; align-items:center; justify-content:space-between; gap:2.5rem; padding:3.4rem 40px; flex-wrap:wrap; }
.ribbon .h-lg{ color:#fff; }
.ribbon p{ color:rgba(255,255,255,.7); margin-top:.4rem; max-width:480px; }
.ribbon .btn--light{ background:#fff; color:var(--ink); }
.ribbon .btn--light:hover{ background:var(--green); color:#fff; }

/* ============================================================ FOOTER */
.site-footer{ background:var(--paper); color:var(--muted); padding:4.5rem 0 2rem; border-top:1px solid var(--line); }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2.5rem; }
.footer-brand img{ height:64px; margin-bottom:1.2rem; }
.footer-brand p{ font-size:.92rem; line-height:1.7; max-width:320px; }
.footer-col h4{ color:var(--ink); font-family:var(--serif); font-weight:600; font-size:1.25rem; margin-bottom:1rem; }
.footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.footer-col a:hover{ color:var(--green); }
.footer-col address{ font-style:normal; font-size:.92rem; line-height:1.9; }
.footer-col address a{ color:var(--green); }
.footer-bottom{ margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.82rem; color:var(--muted); }
.footer-legal{ display:flex; gap:1.4rem; }
.footer-legal a:hover{ color:var(--green); }

/* ============================================================ reveal anim */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
[data-reveal].in{ opacity:1; transform:none; }
[data-delay="1"]{ transition-delay:.1s; }
[data-delay="2"]{ transition-delay:.2s; }
[data-delay="3"]{ transition-delay:.3s; }
@media (prefers-reduced-motion:reduce){ [data-reveal]{ opacity:1; transform:none; } }

/* ============================================================ RESPONSIVE */
@media (max-width:1080px){
  .services__grid{ grid-template-columns:repeat(2,1fr); }
  .stats__grid{ grid-template-columns:repeat(2,1fr); gap:2.5rem 1.5rem; }
}
@media (max-width:1024px){
  .header-cta{ display:none; }
}
@media (max-width:900px){
  .nav{ display:none; }
  .nav-toggle{ display:flex; }
  .nav.open{ display:flex; position:absolute; top:96px; left:0; right:0; flex-direction:column; gap:0; background:#fff; padding:1rem 40px; box-shadow:var(--shadow-sm); border-bottom:1px solid var(--line); }
  .nav.open a{ padding:.9rem 0; border-bottom:1px solid var(--line); }
  .hero__grid{ grid-template-columns:1fr; gap:2.5rem; padding:3rem 0 4rem; }
  .hero__media{ order:-1; max-width:480px; }
  .tiles__grid, .cats__grid, .feats__grid{ grid-template-columns:1fr; }
  .tile:nth-child(2){ transform:none; }
  .tile:nth-child(2):hover{ transform:translateY(-6px); }
  .signature__grid, .philos__grid{ grid-template-columns:1fr; }
  .signature__media image-slot{ min-height:300px; }
  .signature__body{ padding:3rem 2rem; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .container{ padding:0 22px; }
  .topbar__msg{ display:none; }
  .cats__grid{ grid-template-columns:1fr; }
  .services__grid{ grid-template-columns:1fr; }
  .stats__grid{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .ribbon .container{ padding:2.5rem 22px; }
}