/* ============================================================
   DEMANTOIDE-24.DE  –  Global Stylesheet
   Design: Emerald Fire Editorial | Dark Luxury
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Jost:wght@300;400;500;600&display=swap');

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --deep:         #060f08;
  --mid:          #091a0c;
  --bright:       #0d3318;
  --glass:        rgba(13,51,24,.55);
  --gem:          #3dbe6a;
  --gem-light:    #82dfa0;
  --gem-pale:     #b8f0cc;
  --gem-glow:     rgba(61,190,106,.14);
  --gold:         #c8a44e;
  --gold-pale:    rgba(200,164,78,.12);
  --cream:        #f5f0e8;
  --ink:          #061009;
  --text-light:   rgba(255,255,255,.88);
  --text-muted:   rgba(255,255,255,.52);
  --border:       rgba(61,190,106,.18);
  --border-gold:  rgba(200,164,78,.3);

  --ff-display: 'Cormorant Garamond', Georgia, serif;
  --ff-body:    'Jost', system-ui, sans-serif;

  --nav-h:   72px;
  --max-w:   1100px;
  --r-card:  10px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ff-body);
  background: var(--deep);
  color: var(--text-light);
  line-height: 1.7;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: var(--gem); text-decoration: none; }
a:hover { color: var(--gem-light); }

/* ── Nav ─────────────────────────────────────────────────── */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  padding: 0 clamp(1.5rem, 5vw, 3rem);
  background: rgba(6,15,8,.85);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
  transition: background .3s;
}
.nav-logo {
  font-family: var(--ff-display);
  font-size: 1.55rem; font-weight: 600;
  letter-spacing: .04em;
  color: var(--gem-light);
  white-space: nowrap; flex-shrink: 0;
}
.nav-logo span { color: var(--gold); }
.nav-links {
  display: flex; gap: .25rem; list-style: none;
  margin-left: auto; flex-wrap: wrap; justify-content: flex-end;
}
.nav-links a {
  font-size: .8rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
  padding: .4rem .7rem; border-radius: 4px;
  transition: color .2s, background .2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--gem); background: var(--gem-glow); }

/* ── Animated background ─────────────────────────────────── */
.forest-canvas {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.fire-layer {
  position: absolute; bottom: 0; left: -10%;
  width: 120%; height: 55%;
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  opacity: .06;
  animation: fireFloat 14s ease-in-out infinite;
}
.fire-layer:nth-child(1){ background: var(--gem); animation-duration:14s; }
.fire-layer:nth-child(2){ background: var(--gem-light); animation-duration:18s; animation-delay:-6s; top:-8%; opacity:.04; }
.fire-layer:nth-child(3){ background: var(--gold); animation-duration:22s; animation-delay:-10s; opacity:.04; height:35%; }
@keyframes fireFloat {
  0%,100% { transform: translateY(0) scaleX(1); }
  50%      { transform: translateY(-18px) scaleX(1.04); }
}
.particle {
  position: absolute; border-radius: 50%;
  background: var(--gem);
  animation: particleDrift linear infinite; opacity: 0;
}
@keyframes particleDrift {
  0%   { transform: translateY(0) translateX(0); opacity:0; }
  10%  { opacity: .4; }
  90%  { opacity: .15; }
  100% { transform: translateY(-120vh) translateX(20px); opacity:0; }
}

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: calc(var(--nav-h) + 4rem) 1.5rem 5rem;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, var(--bright) 0%, var(--mid) 50%, var(--deep) 100%);
  overflow: hidden;
}
.hero-eyebrow {
  display: inline-block;
  font-family: var(--ff-body); font-size: .72rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--border-gold);
  padding: .35rem 1.1rem; border-radius: 50px; margin-bottom: 1.8rem;
  animation: fadeSlideUp .8s ease both;
}
.hero h1 {
  font-family: var(--ff-display);
  font-size: clamp(3rem, 8vw, 7rem); font-weight: 300;
  line-height: 1.05; letter-spacing: -.01em; color: #fff;
  margin-bottom: 1.5rem;
  animation: fadeSlideUp .8s .15s ease both;
}
.hero h1 em { font-style: italic; color: var(--gem-light); }
.hero-sub {
  font-size: clamp(1rem, 2.5vw, 1.2rem); font-weight: 300;
  color: var(--text-muted); max-width: 620px; margin: 0 auto 2.8rem;
  animation: fadeSlideUp .8s .3s ease both;
}
.hero-cta {
  display: inline-flex; gap: 1rem; flex-wrap: wrap; justify-content: center;
  animation: fadeSlideUp .8s .45s ease both;
}
.btn-primary {
  background: var(--gem); color: var(--ink);
  padding: .8rem 2.2rem; border-radius: 50px;
  font-weight: 600; font-size: .9rem; letter-spacing: .05em;
  transition: transform .2s, box-shadow .2s;
}
.btn-primary:hover { color: var(--ink); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(61,190,106,.4); }
.btn-ghost {
  border: 1px solid var(--border); color: var(--text-light);
  padding: .8rem 2.2rem; border-radius: 50px;
  font-weight: 400; font-size: .9rem; letter-spacing: .05em;
  transition: border-color .2s, color .2s;
}
.btn-ghost:hover { border-color: var(--gem); color: var(--gem); }

.scroll-hint {
  position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  color: var(--text-muted); font-size: .72rem; letter-spacing: .15em; text-transform: uppercase;
  animation: fadeIn 1.2s 1s ease both;
}
.scroll-hint::after {
  content: ''; display: block; width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--gem), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,100% { opacity:.3; transform:scaleY(.5);transform-origin:top; }
  50%      { opacity:1; transform:scaleY(1); }
}

/* ── Section commons ─────────────────────────────────────── */
section { padding: 5rem clamp(1.5rem, 5vw, 3rem); }
.section-inner { max-width: var(--max-w); margin: 0 auto; }
.section-label {
  font-size: .72rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .8rem;
}
.section-title {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; line-height: 1.15;
  color: #fff; margin-bottom: 1.2rem;
}
.section-title em { font-style: italic; color: var(--gem-light); }
.section-lead { font-size: 1.05rem; font-weight: 300; color: var(--text-muted); max-width: 640px; margin-bottom: 3rem; }

.bg-mid   { background: var(--mid); }
.bg-glass { background: linear-gradient(135deg, rgba(9,26,12,.9), rgba(13,51,24,.5)); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.bg-dark  { background: var(--deep); }

/* ── Stat strip ──────────────────────────────────────────── */
.stat-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap: 1px; background: var(--border); border: 1px solid var(--border);
  border-radius: var(--r-card); overflow: hidden; margin: 3rem 0;
}
.stat-item { background: rgba(9,26,12,.8); padding: 2rem 1.5rem; text-align: center; }
.stat-num { font-family:var(--ff-display); font-size:2.6rem; font-weight:300; color:var(--gem-light); line-height:1; margin-bottom:.4rem; }
.stat-label { font-size:.78rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }

/* ── Cards ───────────────────────────────────────────────── */
.card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.25rem; }
.card {
  background: rgba(9,26,12,.6); border:1px solid var(--border); border-radius:var(--r-card);
  padding:1.8rem; transition:border-color .25s, transform .25s; position:relative; overflow:hidden;
}
.card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--gem),var(--gold)); opacity:0; transition:opacity .25s; }
.card:hover { border-color:var(--gem); transform:translateY(-3px); }
.card:hover::before { opacity:1; }
.card-icon { width:44px; height:44px; background:var(--gem-glow); border:1px solid var(--border); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:1.2rem; }
.card h3 { font-family:var(--ff-display); font-size:1.3rem; font-weight:400; color:#fff; margin-bottom:.6rem; }
.card p { font-size:.9rem; color:var(--text-muted); line-height:1.65; }
.card-link { display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--gem); margin-top:1.1rem; transition:gap .2s; }
.card-link:hover { gap:.6rem; }

/* ── Info box ────────────────────────────────────────────── */
.info-box { background:var(--gold-pale); border-left:3px solid var(--gold); border-radius:0 8px 8px 0; padding:1rem 1.4rem; margin:1.5rem 0; font-size:.9rem; color:rgba(255,255,255,.8); }
.info-box strong { color:var(--gold); }

/* ── Table ───────────────────────────────────────────────── */
.data-table { width:100%; border-collapse:collapse; font-size:.88rem; margin:2rem 0; }
.data-table th { background:rgba(61,190,106,.1); color:var(--gem-light); font-weight:500; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; padding:.85rem 1.1rem; text-align:left; border-bottom:1px solid var(--border); }
.data-table td { padding:.8rem 1.1rem; border-bottom:1px solid rgba(61,190,106,.07); color:var(--text-light); vertical-align:top; }
.data-table tr:hover td { background:rgba(61,190,106,.04); }
.data-table td strong { color:var(--gem-light); }

/* ── Prose ───────────────────────────────────────────────── */
.prose { font-size:1rem; line-height:1.85; color:rgba(255,255,255,.82); max-width:760px; }
.prose h2 { font-family:var(--ff-display); font-size:clamp(1.5rem,3vw,2.1rem); font-weight:400; color:#fff; margin:2.5rem 0 .8rem; padding-bottom:.5rem; border-bottom:1px solid var(--border); }
.prose h3 { font-family:var(--ff-display); font-size:1.3rem; font-weight:400; color:var(--gem-light); margin:2rem 0 .6rem; }
.prose p { margin-bottom:1.2rem; }
.prose ul, .prose ol { margin:.8rem 0 1.2rem 1.4rem; }
.prose li { margin-bottom:.5rem; }
.prose strong { color:var(--gem-light); font-weight:500; }
.prose em { font-style:italic; color:rgba(255,255,255,.7); }
.prose blockquote { border-left:3px solid var(--gem); padding:.8rem 1.4rem; margin:1.5rem 0; background:var(--gem-glow); border-radius:0 8px 8px 0; font-family:var(--ff-display); font-size:1.2rem; font-style:italic; color:var(--gem-pale); }

/* ── Two-col / Sidebar ───────────────────────────────────── */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
@media(max-width:768px){.two-col{grid-template-columns:1fr;}}
.sidebar-layout { display:grid; grid-template-columns:1fr 300px; gap:2.5rem; align-items:start; }
@media(max-width:900px){.sidebar-layout{grid-template-columns:1fr;}}
.sidebar { display:flex; flex-direction:column; gap:1.25rem; }
.sidebar-box { background:rgba(9,26,12,.8); border:1px solid var(--border); border-radius:var(--r-card); padding:1.4rem; }
.sidebar-box h4 { font-family:var(--ff-display); font-size:1.1rem; font-weight:400; color:var(--gem-light); margin-bottom:1rem; padding-bottom:.6rem; border-bottom:1px solid var(--border); }
.sidebar-box ul { list-style:none; }
.sidebar-box ul li { padding:.4rem 0; border-bottom:1px solid rgba(61,190,106,.06); font-size:.88rem; }
.sidebar-box ul li:last-child { border-bottom:none; }
.sidebar-box ul li a { color:rgba(255,255,255,.7); }
.sidebar-box ul li a:hover { color:var(--gem); }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-list { list-style:none; display:flex; flex-direction:column; gap:.75rem; }
.faq-item { background:rgba(9,26,12,.5); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.faq-q { width:100%; background:none; border:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.4rem; text-align:left; font-family:var(--ff-body); font-size:.95rem; font-weight:500; color:var(--text-light); transition:color .2s; }
.faq-q:hover { color:var(--gem); }
.faq-q svg { flex-shrink:0; width:18px; height:18px; stroke:var(--gem); transition:transform .3s; }
.faq-q[aria-expanded="true"] svg { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .4s ease, padding .3s; font-size:.9rem; color:var(--text-muted); padding:0 1.4rem; }
.faq-a.open { max-height:400px; padding:0 1.4rem 1.1rem; }

/* ── Quality bar ─────────────────────────────────────────── */
.quality-bar { display:flex; flex-direction:column; gap:.7rem; margin:1.5rem 0; }
.quality-row { display:flex; flex-direction:column; gap:.3rem; }
.quality-header { display:flex; justify-content:space-between; font-size:.8rem; }
.quality-label { color:rgba(255,255,255,.7); font-weight:500; }
.quality-val { color:var(--gem-light); }
.quality-track { height:5px; background:rgba(61,190,106,.1); border-radius:3px; overflow:hidden; }
.quality-fill { height:100%; background:linear-gradient(90deg,var(--gem),var(--gem-light)); border-radius:3px; width:0; transition:width 1.2s ease; }

/* ── Page hero ───────────────────────────────────────────── */
.page-hero {
  position:relative; padding:calc(var(--nav-h) + 4rem) clamp(1.5rem,5vw,3rem) 4rem;
  background:radial-gradient(ellipse 100% 80% at 50% 0%, var(--bright) 0%, var(--mid) 60%, var(--deep) 100%);
  text-align:center; overflow:hidden;
}
.page-hero h1 { font-family:var(--ff-display); font-size:clamp(2.2rem,5vw,4.5rem); font-weight:300; line-height:1.1; color:#fff; margin-bottom:1rem; }
.page-hero h1 em { font-style:italic; color:var(--gem-light); }
.page-hero p { font-size:1.05rem; font-weight:300; color:var(--text-muted); max-width:580px; margin:0 auto; }
.breadcrumb { display:flex; align-items:center; gap:.5rem; justify-content:center; font-size:.78rem; color:var(--text-muted); margin-bottom:1.5rem; }
.breadcrumb a { color:var(--gem); }
.breadcrumb span { opacity:.4; }

/* ── Origin cards ────────────────────────────────────────── */
.origin-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; margin:2rem 0; }
.origin-card { background:rgba(9,26,12,.6); border:1px solid var(--border); border-radius:8px; padding:1.4rem; }
.origin-flag { font-size:2rem; margin-bottom:.7rem; }
.origin-card h4 { font-family:var(--ff-display); font-size:1.1rem; font-weight:400; color:#fff; margin-bottom:.4rem; }
.origin-card p { font-size:.83rem; color:var(--text-muted); }
.origin-badge { display:inline-block; background:var(--gem-glow); border:1px solid var(--border); color:var(--gem-light); font-size:.7rem; font-weight:500; letter-spacing:.08em; padding:.2rem .6rem; border-radius:50px; margin-top:.6rem; }

/* ── Swatch ──────────────────────────────────────────────── */
.swatch-row { display:flex; gap:.75rem; flex-wrap:wrap; margin:1.5rem 0; }
.swatch { display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.swatch-dot { width:52px; height:52px; border-radius:50%; border:2px solid rgba(255,255,255,.1); }
.swatch-name { font-size:.72rem; color:var(--text-muted); text-align:center; }

/* ── Variety pill ────────────────────────────────────────── */
.variety-pill { display:inline-block; padding:.2rem .7rem; border-radius:50px; font-size:.75rem; font-weight:500; background:var(--gem-glow); color:var(--gem-light); border:1px solid var(--border); }

/* ── Schachtelhalm-Visualisierung ────────────────────────── */
.horsetail-box {
  background: rgba(9,26,12,.7);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  margin: 2rem 0;
}
.horsetail-svg { margin: 0 auto 1rem; display: block; }

/* ── Crystal deco ────────────────────────────────────────── */
.crystal-deco { position:absolute; width:1px; height:60px; background:linear-gradient(to bottom, transparent, var(--gem), transparent); opacity:.2; animation:shimmer 4s ease-in-out infinite; }
@keyframes shimmer { 0%,100%{opacity:.1;transform:scaleY(.6);}50%{opacity:.35;transform:scaleY(1);} }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer { background:#030a04; border-top:1px solid var(--border); padding:4rem clamp(1.5rem,5vw,3rem) 2rem; }
.footer-inner { max-width:var(--max-w); margin:0 auto; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2.5rem; margin-bottom:3rem; }
@media(max-width:768px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr;}}
.footer-brand p { font-size:.88rem; color:var(--text-muted); max-width:280px; margin-top:.8rem; line-height:1.65; }
.footer-col h5 { font-size:.72rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.footer-col ul a { font-size:.88rem; color:var(--text-muted); transition:color .2s; }
.footer-col ul a:hover { color:var(--gem); }
.footer-bottom { padding-top:2rem; border-top:1px solid var(--border); display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.78rem; color:var(--text-muted); }
.footer-bottom a { color:var(--text-muted); }
.footer-bottom a:hover { color:var(--gem); }

/* ── Animations ──────────────────────────────────────────── */
@keyframes fadeSlideUp { from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);} }
@keyframes fadeIn { from{opacity:0;}to{opacity:1;} }
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1{transition-delay:.1s;}.reveal-delay-2{transition-delay:.2s;}.reveal-delay-3{transition-delay:.3s;}

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:768px){:root{--nav-h:60px;}.nav-links{gap:0;}.nav-links a{font-size:.72rem;padding:.35rem .5rem;}}
@media(max-width:600px){.nav-links{display:none;}}