:root{
  --paper:#F6F0E6;
  --paper-2:#EFE6D4;
  --ink:#201A14;
  --ink-soft:#5C5348;
  --amber:#B9822E;
  --green:#333D2C;
  --brick:#9C4433;
  --line:#DBCFB8;
  --whatsapp:#075E54;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  font-size:16px;
}
img{max-width:100%;display:block;border-radius: 8px;}
a{color:inherit;text-decoration:none;}
.container{max-width:1120px;margin:0 auto;padding:0 24px;}
section{padding:96px 0;}
.eyebrow{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);font-weight:600;margin-top:50px;display:block;
}
h1,h2,h3{font-family:"Fraunces",serif;font-weight:500;color:var(--ink);}
.serif-italic{font-style:italic;font-weight:400;}

/* Header */
.site-header{display:flex;justify-content:space-between;align-items:center;padding:26px 24px;background-color:var(--paper-2);}
.logo-block{display:flex;align-items:center;gap:12px;}
.logo-block .logo{font-family:"Fraunces",serif;font-style:italic;font-size:26px;color:var(--ink);}
.logo-block .subheadline{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:0;display:none;}
.header-cta{
  font-size:13px;font-weight:600;letter-spacing:.04em;
  border-bottom:1px solid var(--ink);padding-bottom:2px;
}

/* Hero */
.hero{padding:60px 24px 100px;}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center;}
.hero h1{font-size:clamp(40px,6vw,68px);line-height:1.04;letter-spacing:-.01em;margin-bottom:26px;}
.hero p.lead{font-size:18px;color:var(--ink-soft);max-width:460px;margin-bottom:34px;}
.hero-ctas{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:16px 30px;font-weight:600;font-size:14.5px;
  border:1px solid transparent;border-radius:4px;
}
.btn-primary{background:var(--brick);color:var(--paper);}
.btn-secondary{background:var(--whatsapp);color:var(--paper);padding:10px 18px;}
.btn-text{border-bottom:1px solid var(--ink);padding:0;font-weight:600;font-size:14.5px;}
.hero-visual{display:flex;align-items:center;justify-content:center;}
.hero-visual img{
  width:100%;
  max-width:340px;
  margin:0 auto;
  border-radius:8px;
  display:block;
}

/* Hero-Bild */
.hero-visual img{width:100%;max-width:340px;margin:0 auto;border-radius:8px;display:block;}
.hero-visual-link{display:block;cursor:zoom-in;}

/* Lightbox (reines CSS, kein JS) */
.lightbox{
  display:none;position:fixed;inset:0;z-index:200;
  background:rgba(32,26,20,.92);
  align-items:center;justify-content:center;padding:40px;
}
.lightbox:target{display:flex;}
.lightbox img{max-width:90vw;max-height:90vh;border-radius:8px;}
.lightbox-close{
  position:absolute;top:24px;right:32px;
  color:#F6F0E6;font-size:38px;line-height:1;font-weight:300;
}

/* Intro + TOC inline */
.intro{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:44px 24px;}
.intro-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start;}
.intro-text p + p{margin-top:16px;}
.intro p{font-size:17px;color:var(--ink-soft);}
.toc-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px;}
.toc-list{display:flex;flex-direction:column;gap:10px;}
.toc-list a{
  font-size:15px;font-weight:500;color:var(--ink);
  border-bottom:1px solid var(--line);padding-bottom:9px;
  display:flex;justify-content:space-between;
}
.toc-list a:hover{border-bottom-color:var(--ink);}

/* Editorial features */
.feat-header{max-width:560px;margin-bottom:70px;}
.feat-header h2{font-size:clamp(28px,4vw,40px);line-height:1.1;}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);}
.feat-item{background:var(--paper);padding:40px 34px;}
.feat-item .num{font-family:"Fraunces",serif;font-size:15px;color:var(--amber);margin-bottom:22px;}
.feat-item h3{font-size:21px;margin-bottom:12px;}
.feat-item p{font-size:14.5px;color:var(--ink-soft);}

/* Signature: fragrance pyramid */
.pyramid-section{background:var(--paper-2);}
#ueber-mich,#faq{background:var(--paper-2);margin-top: 60px;padding-bottom: 45px;}
#faq{background:var(--paper-2);margin-top: 60px;padding-bottom: 0px;padding-top:20px;}
.pyramid-header{text-align:center;max-width:640px;margin:0 auto 70px;}
.pyramid-header h2{font-size:clamp(28px,4vw,40px);}
.pyramid-header p{color:var(--ink-soft);font-size:16px;margin-top:14px;}
.pyramid{max-width:760px;margin:0 auto;}
.pyr-level{
  display:grid;grid-template-columns:200px 1fr;gap:30px;align-items:center;
  padding:34px 0;border-bottom:1px solid var(--line);
}
.pyr-level:last-child{border-bottom:none;}
.pyr-tag{text-align:right;}
.pyr-tag .note{font-family:"Fraunces",serif;font-style:italic;font-size:22px;color:var(--amber);}
.pyr-tag .phase{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:4px;}
.pyr-body h3{font-size:19px;margin-bottom:6px;}
.pyr-body p{font-size:14.5px;color:var(--ink-soft);}

/* Steps */
.steps-header{max-width:560px;margin-bottom:60px;}
.steps-header h2{font-size:clamp(28px,4vw,40px);}
.steps-list{border-top:1px solid var(--line);}
.step-row{
  display:grid;grid-template-columns:80px 1fr;gap:30px;
  padding:32px 0;border-bottom:1px solid var(--line);align-items:baseline;
}
.step-row .step-n{font-family:"Fraunces",serif;font-size:34px;color:var(--line);}
.step-row h3{font-size:19px;margin-bottom:6px;}
.step-row p{font-size:14.5px;color:var(--ink-soft);max-width:520px;}
.steps-cta{margin-top:50px;}

/* Products */
.products-header{max-width:560px;margin-bottom:50px;}
.products-header h2{font-size:clamp(28px,4vw,40px);}
.product-row{
  display:grid;grid-template-columns:120px 1fr 1fr;gap:30px;
  padding:34px 0;border-top:1px solid var(--line);align-items:center;
}
.product-row:last-child{border-bottom:1px solid var(--line);}
.product-row .p-num{font-family:"Fraunces",serif;font-style:italic;font-size:16px;color:var(--amber);}
.product-row h3{font-size:22px;}
.product-row p{font-size:14.5px;color:var(--ink-soft);}

/* Produkt-Banner */
.product-banner{width:100%;overflow:hidden;margin-top: 60px;}
.product-banner img{width:100%;height:100%;object-fit:cover;object-position:center;}

/* About Stephan */
.about-grid{display:grid;grid-template-columns:.4fr 1fr;gap:36px;align-items:center;}
.about-photo{
  aspect-ratio:1/1;width:100%;max-width:220px;margin:0 auto;
  border-radius:50%;overflow:hidden;background:var(--ink);filter:grayscale(.25) contrast(1.05);
}
.about-photo img{width:100%;height:100%;object-fit:cover;}
.about-text .eyebrow{margin-bottom:14px;}
.about-text blockquote{
  font-family:"Fraunces",serif;font-style:italic;font-weight:400;
  font-size:clamp(22px,2.6vw,28px);line-height:1.4;color:var(--ink);margin-bottom:22px;
}
.about-text .name-role{margin-bottom:22px;}
.about-text .name-role .name{font-weight:600;font-size:15px;}
.about-text .name-role .role{font-size:13px;color:var(--ink-soft);letter-spacing:.04em;}
.about-ctas{display:flex;gap:26px;align-items:center;flex-wrap:wrap;}

/* Blog cards */
.blog-header{max-width:560px;margin-bottom:56px;}
.blog-header h2{font-size:clamp(28px,4vw,40px);}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;}
.blog-card{display:flex;flex-direction:column;}
.blog-art{width:100%;aspect-ratio:4/3;background:var(--paper-2);margin-bottom:22px;}
.blog-art svg{width:100%;height:100%;}
.blog-card .tag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);font-weight:600;margin-bottom:10px;}
.blog-card h3{font-size:20px;line-height:1.25;margin-bottom:10px;}
.blog-card p{font-size:14px;color:var(--ink-soft);margin-bottom:16px;flex:1;}
.blog-card .read-more{font-size:13px;font-weight:600;border-bottom:1px solid var(--ink);padding-bottom:2px;align-self:flex-start;}

/* FAQ */
.faq-header{max-width:560px;margin-bottom:50px;}
.faq-header h2{font-size:clamp(28px,4vw,40px);}
.faq-list{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);padding:26px 0;}
.faq-item summary{
  cursor:pointer;font-weight:500;font-size:17px;color:var(--ink);
  list-style:none;display:flex;justify-content:space-between;align-items:center;
  font-family:"Fraunces",serif;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";font-size:20px;color:var(--amber);font-family:"Inter",sans-serif;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{font-size:15px;color:var(--ink-soft);margin-top:16px;max-width:640px;}

/* Final CTA - full bleed dark */
.final-cta{background:var(--ink);color:var(--paper);text-align:center;padding:120px 0;}
.final-cta .eyebrow{color:var(--amber);}
.final-cta h2{color:var(--paper);font-size:clamp(30px,5vw,52px);margin-bottom:20px;line-height:1.08;}
.final-cta p{color:#C9BFAF;font-size:16px;margin-bottom:40px;}
.final-cta .btn-primary{background:var(--amber);color:var(--ink);}

/* Footer */
footer{padding:0 0 40px 0;font-size:13px;color:var(--ink-soft);}
footer .footer-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;align-items:center;border-top:1px solid var(--line);padding-top:26px;}
footer a{text-decoration:underline;}
footer .foot-note{color:#8A8071;font-size:12px;margin-top:16px;}

/* Article page */
.article{max-width:700px;margin:0 auto;}
.article h1{font-size:clamp(30px,4.5vw,44px);margin-bottom:16px;line-height:1.1;}
.article .meta{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);font-weight:600;margin-bottom:30px;}
.article h2{font-size:22px;margin:36px 0 14px;}
.article p{margin-bottom:16px;font-size:16px;color:var(--ink-soft);}
.article table{width:100%;border-collapse:collapse;margin:24px 0;font-size:14px;}
.article th,.article td{border-bottom:1px solid var(--line);padding:12px 6px;text-align:left;}
.article th{font-family:"Fraunces",serif;font-weight:500;}
.back-link{display:inline-block;margin-bottom:30px;font-size:13px;font-weight:600;border-bottom:1px solid var(--ink);padding-bottom:2px;}

@media(max-width:860px){
  .logo-block .subheadline{display:none;}
  .hero{padding: 44px 24px;padding-top: 0;}
  .hero-grid{grid-template-columns:1fr;gap: 0px;}
  .hero-visual{max-width:320px;margin:0 auto 20px;}
  .intro-grid{grid-template-columns:1fr;gap:30px;}
  .feat-grid{grid-template-columns:1fr;}
  .feat-header {margin-bottom: 20px;}
  .about-photo{max-width:280px;margin:0 auto; margin-top: 50px;}
  .about-text .eyebrow{margin-top: 0px;}
  .blog-grid{grid-template-columns:1fr;}
  .product-row{grid-template-columns:1fr;gap:10px;}
  .pyr-level{grid-template-columns:1fr;gap:10px;}
  .pyr-tag{text-align:left;}
  .pyramid-section{padding:15px 0 24px 0;}
  .pyramid-header{margin: 0 auto 30px;}
  .step-row {gap:10px;}

  #ueber-mich{padding-top: 45px;}
  section{padding:64px 0;}

  .hero-visual{max-width:none;margin: 60px 0 0 0;}
  .hero-visual img{max-width:none;padding: 0 0;}
  .hero-visual-link{pointer-events:none;cursor:default;}

  .product-banner{aspect-ratio:5.3/4;}
  .product-banner img{transform:scale(1.0);}

  .feat-header{max-width:560px;margin-bottom:70px;outline:1px solid var(--line); border-radius:4px;margin-bottom: 20px;padding: 20px;margin-top: 50px;background-color:#fdf9f1;}
  .feat-header .eyebrow{margin-top: 0px;}
}