/* ============================================================
   Andrea Schwab Ernährungsberatung — geteilte Design-Basis
   Design-DNA: Japandi/Ruhig-Warm · Kalkweiß + Eichenholz · Noto Serif/Murecho
   Motion-Konzept: „Wachstumsringe" (siehe BAUAUFTRAG.md)
   ============================================================ */

:root{
  color-scheme: light;
  --color-bg:        #F7F3EA;
  --color-bg-alt:     #EFE8D9;
  --color-surface:    #FFFFFF;
  --color-fg:         #2C241C;
  --color-muted:      #7C7264;
  --color-oak:        #8B6A45;
  --color-oak-deep:   #5A4128;
  --color-accent:     #5F7A4F;
  --color-accent-2:   #B08249;
  --color-border:     #E2D9C6;
  --focus: var(--color-accent);

  --space-xs:.5rem; --space-sm:1rem; --space-md:1.5rem; --space-lg:2.5rem; --space-xl:4rem; --space-2xl:6rem;
  --radius-sm:.5rem; --radius:1rem; --radius-lg:1.5rem;
  --shadow-sm:0 4px 14px -8px rgb(44 36 28 / .18);
  --shadow:0 20px 45px -25px rgb(44 36 28 / .35);

  --text-eyebrow:.78rem; --text-body:1.0625rem; --text-lead:clamp(1.15rem,1.4vw,1.35rem);
  --text-h4:clamp(1.15rem,1.4vw,1.35rem); --text-h3:clamp(1.25rem,2.2vw,1.6rem);
  --text-h2:clamp(1.5rem,3.5vw,2.25rem); --text-h1:clamp(2rem,5vw,3.5rem); --text-h1-hero:clamp(2.3rem,6vw,4.5rem);
  --lh-tight:1.08; --lh-snug:1.25; --lh-body:1.65;
  --tracking-tight:-.02em; --tracking-label:.14em;
  --dur:.4s; --ease-out:cubic-bezier(.16,1,.3,1);

  --bgHue: 96; --bgShift: 18%; --bgShift2: 82%;
}

:root.dark{
  color-scheme: dark;
  --color-bg:        #211A14;
  --color-bg-alt:     #271F17;
  --color-surface:    #2B2219;
  --color-fg:         #EDE6D8;
  --color-muted:      #A79A87;
  --color-oak:        #A9835A;
  --color-oak-deep:   #7C5C3B;
  --color-accent:     #7FA06B;
  --color-accent-2:   #C79760;
  --color-border:     #3B3025;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--color-bg); color:var(--color-fg);
  font-family:"Murecho",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--text-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; overflow-x:clip;
  transition:background .4s ease,color .4s ease;
}
h1,h2,h3,h4{ font-family:"Noto Serif",serif; line-height:var(--lh-tight); letter-spacing:var(--tracking-tight); margin:0; text-wrap:balance; }
h1{ font-size:var(--text-h1); font-weight:700; }
h2{ font-size:var(--text-h2); font-weight:700; }
h3{ font-size:var(--text-h3); font-weight:600; }
h4{ font-size:var(--text-h4); font-weight:600; }
p{ margin:0; }
a{ color:inherit; }
img{ max-width:100%; height:auto; display:block; }
button{ font:inherit; }

.wrap{ max-width:1200px; margin-inline:auto; padding-inline:1.5rem; }
main{ position:relative; }
section{ padding-block: clamp(3.5rem, 8vw, 7rem); position:relative; }
.section-alt{ background:var(--color-bg-alt); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem; font-size:var(--text-eyebrow);
  font-weight:600; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--color-accent);
}
.eyebrow::before{ content:""; width:1.5rem; height:1px; background:currentColor; display:inline-block; }
.lead{ font-size:var(--text-lead); font-weight:500; color:var(--color-muted); max-width:60ch; }
.prose p{ max-width:65ch; margin-block:1rem; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; padding:.85rem 1.6rem; border-radius:999px;
  font-weight:600; text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:transform .4s var(--ease-out), background .3s, color .3s, border-color .3s; will-change:transform;
}
.btn-primary{ background:var(--color-oak-deep); color:#F7F3EA; }
.btn-primary:hover{ background:var(--color-accent); }
.btn-ghost{ background:transparent; color:var(--color-fg); border-color:var(--color-border); }
.btn-ghost:hover{ border-color:var(--color-accent); color:var(--color-accent); }
.btn:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }

/* ---------- Header ---------- */
.site-header{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:100;
  color:#F7F3EA; background:transparent; transition:background .4s ease,color .4s ease,box-shadow .4s ease;
  padding-block: 1.1rem;
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; max-width:1200px; }
.site-header.scrolled{
  background:color-mix(in oklch, var(--color-bg) 92%, transparent); color:var(--color-fg);
  box-shadow:var(--shadow-sm); backdrop-filter:blur(10px); padding-block:.7rem;
}
.brand{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit; font-family:"Noto Serif",serif; font-weight:700; font-size:1.05rem; }
.brand svg{ flex:none; width:2.1rem; height:2.1rem; }
.nav{ display:none; align-items:center; gap:2rem; list-style:none; margin:0; padding:0; }
.nav a{ text-decoration:none; font-size:.95rem; font-weight:500; position:relative; }
.nav a::after{ content:""; position:absolute; left:0; bottom:-4px; width:0; height:1px; background:currentColor; transition:width .3s var(--ease-out); }
.nav a:hover::after, .nav a[aria-current]::after{ width:100%; }
@media (min-width:900px){ .nav{ display:flex; } }
.header-actions{ display:flex; align-items:center; gap:.75rem; }
.theme-toggle{
  width:2.6rem; height:2.6rem; border-radius:999px; border:1px solid currentColor; background:transparent; color:inherit;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex:none;
}
.theme-toggle svg{ width:1.15rem; height:1.15rem; }
.burger{ width:2.6rem; height:2.6rem; border-radius:999px; border:1px solid currentColor; background:transparent; color:inherit; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex:none; }
@media (min-width:900px){ .burger{ display:none; } }
.burger svg{ width:1.2rem; height:1.2rem; }

.mobile-menu{
  position:fixed; inset:0; z-index:99; background:var(--color-bg); color:var(--color-fg);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:1.6rem;
  padding:2rem 2rem; transform:translateY(-100%); transition:transform .5s var(--ease-out);
}
.mobile-menu.is-open{ transform:translateY(0); }
.mobile-menu a{ font-family:"Noto Serif",serif; font-size:clamp(1.6rem,7vw,2.4rem); text-decoration:none; }
.mobile-menu .btn{ margin-top:1rem; }

/* ---------- Cards ---------- */
.card{
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius);
  padding:1.75rem; display:flex; flex-direction:column; gap:.85rem; box-shadow:var(--shadow-sm);
}
.card-grid{ display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); align-items:stretch; }
.card-img{ border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; }
.card-img img{ width:100%; height:100%; object-fit:cover; }
[data-tilt]{ transform-style:preserve-3d; }

/* ---------- Reveal / Split infra ---------- */
[data-split]{ overflow:hidden; display:block; }
[data-reveal] > *{ display:block; }
.js .no-anim [data-reveal] > *, .no-anim [data-split], .no-anim [data-depth]{ opacity:1 !important; transform:none !important; }

/* ---------- Background scene (permanent + scroll-coupled) ---------- */
.bg-scene{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 60% at var(--bgShift,18%) 22%, hsl(var(--bgHue,96) 42% 62% / .28), transparent 70%),
    radial-gradient(55% 55% at var(--bgShift2,82%) 78%, hsl(calc(var(--bgHue,96) + 30) 55% 55% / .22), transparent 68%);
  transition:background .6s ease;
}
.bg-grain{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5; mix-blend-mode:multiply; }
:root.dark .bg-grain{ opacity:.3; mix-blend-mode:soft-light; }
@keyframes drift{ 0%{ transform:translate3d(0,0,0) } 50%{ transform:translate3d(1.6%,-2.2%,0) } 100%{ transform:translate3d(0,0,0) } }
.bg-loop{ animation:drift 18s ease-in-out infinite; will-change:transform; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--color-oak-deep); color:#F3ECDD; padding-block:var(--space-2xl) var(--space-lg); }
.site-footer a{ text-decoration:none; }
.footer-grid{ display:grid; gap:2.5rem; grid-template-columns:1fr; margin-bottom:2.5rem; }
@media (min-width:800px){ .footer-grid{ grid-template-columns:1.3fr 1fr 1fr; } }
.footer-grid h4{ color:#F3ECDD; margin-bottom:1rem; font-size:1rem; }
.footer-nav{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.footer-nav a{ opacity:.85; }
.footer-nav a:hover{ opacity:1; text-decoration:underline; }
.footer-bottom{ border-top:1px solid rgb(243 236 221 / .18); padding-top:1.5rem; display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; padding-bottom:15px; }
.footer-links{ display:flex; gap:1.2rem; flex-wrap:wrap; font-size:.88rem; opacity:.85; }
.demo-hint{ font-size:.78rem; opacity:.65; max-width:60ch; margin-top:1rem; }
.ns-badge{ color:#F3ECDD; }

/* ---------- FAQ / Accordion ---------- */
.faq-item{ border-bottom:1px solid var(--color-border); }
.faq-q{ width:100%; text-align:left; background:none; border:0; padding:1.25rem 0; display:flex; justify-content:space-between; align-items:center; gap:1rem; cursor:pointer; color:inherit; font-family:"Noto Serif",serif; font-size:1.05rem; font-weight:600; }
.faq-q svg{ flex:none; width:1.1rem; height:1.1rem; transition:transform .4s var(--ease-out); }
.faq-item[data-open="true"] .faq-q svg{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease-out); }
.faq-a-inner{ padding-bottom:1.25rem; color:var(--color-muted); max-width:65ch; }

/* ---------- Timeline (Über mich) ---------- */
.timeline{ position:relative; margin-inline:auto; max-width:46rem; }
.timeline::before{ content:""; position:absolute; left:.5rem; top:0; bottom:0; width:2px; background:var(--color-border); }
.timeline-item{ position:relative; padding-left:2.5rem; padding-bottom:2.75rem; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-dot{ position:absolute; left:0; top:.3rem; width:1.05rem; height:1.05rem; border-radius:50%; background:var(--color-accent); border:3px solid var(--color-bg); }
.timeline-year{ font-family:"Noto Serif",serif; font-weight:700; color:var(--color-accent); }

/* ---------- Preloader ---------- */
#preloader{ position:fixed; inset:0; z-index:9999; background:var(--color-bg); display:flex; align-items:center; justify-content:center; }
#preloader svg{ width:4.5rem; height:4.5rem; }

/* ---------- Ratgeber Filter ---------- */
.filter-bar{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.5rem; }
.filter-chip{ padding:.5rem 1.1rem; border-radius:999px; border:1px solid var(--color-border); background:transparent; color:inherit; cursor:pointer; font-size:.88rem; font-weight:600; transition:background .3s,color .3s,border-color .3s; }
.filter-chip.is-active, .filter-chip:hover{ background:var(--color-oak-deep); color:#F7F3EA; border-color:var(--color-oak-deep); }
.article-card[hidden]{ display:none; }
.article-more{ background:none; border:0; color:var(--color-accent); font-weight:600; cursor:pointer; padding:0; text-align:left; display:inline-flex; align-items:center; gap:.4rem; }
.article-body{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease-out); }

/* ---------- Utility ---------- */
.sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.split-media{ display:grid; gap:2.5rem; grid-template-columns:1fr; align-items:center; }
@media (min-width:900px){ .split-media{ grid-template-columns:1.05fr .95fr; gap:3.5rem; } }
.split-media.reverse > *:first-child{ order:2; }
@media (min-width:900px){ .split-media.reverse > *:first-child{ order:0; } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto!important; }
  [data-parallax],[data-depth]{ animation:none!important; }
  .bg-loop{ animation-duration:90s!important; }
}

/* ---------- Über mich: Intro-Offset (kein Hero-Set-Piece, Header ist sofort "scrolled") ---------- */
.page-intro{ padding-top:clamp(7.5rem,14vw,9.5rem); }

/* ---------- Über mich: Wachstumspfad-Rail neben der Timeline (Signatur-Element) ---------- */
.timeline-row{ display:flex; gap:1.5rem; justify-content:center; max-width:50rem; margin-inline:auto; align-items:stretch; }
.timeline-rail{ width:6px; flex:none; }
.timeline-rail svg{ display:block; width:100%; height:100%; overflow:visible; }
.timeline-row .timeline{ flex:1 1 auto; margin-inline:0; }
@media (max-width:560px){ .timeline-rail{ width:4px; } }