/*
Theme Name: VitalFlowJourney
Theme URI: https://vitalflowjourney.de
Author: VitalFlowJourney
Description: Individuelles Theme für VitalFlowJourney – ganzheitliche Gesundheit (Ernährung, Mental, Fitness) mit Digistore24-Affiliate-Unterstützung und Pinterest-optimierten Blog-Karten.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: vitalflow
*/

/* =========================================================
   VitalFlowJourney — Design-System
   Ink:    #1E2E24  (tiefes Tannengrün, Text/Dunkelflächen)
   Paper:  #F1EEE2  (warmes, salbeigetöntes Parchment)
   PaperAlt: #E7E2D2 (Karten/Sektionen)
   Sage:   #6E8F72  (Naturgrün – Ernährung)
   SageDeep: #34492F (dunkles Waldgrün – Sektionsflächen)
   Clay:   #C1793F  (warmer Amber-Ton – CTA/Fitness)
   Berry:  #7C4550  (gedämpftes Beerenrot – Mental/Achtsamkeit)
   Muted:  #5C6B5B  (gedämpfter Fließtext)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,450;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  --ink:#1E2E24;
  --paper:#F1EEE2;
  --paper-alt:#E7E2D2;
  --sage:#6E8F72;
  --sage-deep:#34492F;
  --clay:#C1793F;
  --clay-dark:#a5622e;
  --berry:#7C4550;
  --muted:#5C6B5B;
  --line: rgba(30,46,36,0.14);
  --radius: 10px;
  --font-display: 'Fraunces', serif;
  --font-body: 'Work Sans', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --maxw: 1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.08;
  margin:0 0 .4em;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.6rem,5.5vw,4.6rem); font-weight:450;}
h2{font-size:clamp(1.9rem,3.4vw,2.7rem);}
h3{font-size:1.35rem;}
p{margin:0 0 1em;color:var(--muted);}
.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--sage-deep);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--clay);display:inline-block;}

/* focus visibility */
a:focus-visible, button:focus-visible{outline:2px solid var(--clay); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important; scroll-behavior:auto !important;} }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(241,238,226,0.92);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:16px; padding-bottom:16px;
}
.logo{
  font-family:var(--font-display); font-weight:600; font-size:1.3rem;
  display:flex; align-items:center; gap:9px;
}
.logo svg{width:24px;height:24px;flex:none;}
.logo .flow{color:var(--clay);}
nav.main-nav{display:flex; gap:30px; font-size:.95rem; font-weight:500;}
nav.main-nav a{position:relative; padding:4px 0;}
nav.main-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--clay);transform:scaleX(0);transform-origin:left;transition:transform .25s ease;}
nav.main-nav a:hover::after, nav.main-nav a[aria-current="page"]::after{transform:scaleX(1);}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;}

@media(max-width:820px){
  nav.main-nav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper); flex-direction:column; gap:0;
    border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  nav.main-nav.open{max-height:400px;}
  nav.main-nav a{padding:16px 28px; border-top:1px solid var(--line);}
  .nav-toggle{display:block;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:.95rem;
  padding:14px 26px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease;
}
.btn-clay{background:var(--clay); color:#fff;}
.btn-clay:hover{background:var(--clay-dark); transform:translateY(-2px); box-shadow:0 10px 22px rgba(193,121,63,.35);}
.btn-outline{border-color:var(--ink); color:var(--ink);}
.btn-outline:hover{background:var(--ink); color:var(--paper);}
.btn-ghost{color:var(--sage-deep); font-weight:600; font-size:.9rem;}
.btn-ghost:hover{text-decoration:underline;}

/* ---------- Werbekennzeichnung ---------- */
.ad-label{
  display:inline-block; font-family:var(--font-mono); font-size:.68rem;
  letter-spacing:.08em; text-transform:uppercase;
  background:var(--berry); color:#fff; padding:4px 10px; border-radius:4px;
}
.disclosure{
  font-size:.85rem; color:var(--muted); border-left:3px solid var(--clay);
  padding:10px 16px; background:var(--paper-alt); border-radius:6px; margin:20px 0;
}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; padding:70px 0 40px;}
.hero .wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:50px; align-items:center;}
.hero p.lead{font-size:1.15rem; max-width:46ch;}
.hero-actions{display:flex; gap:16px; margin-top:28px; flex-wrap:wrap;}
.hero-stats{display:flex; gap:34px; margin-top:44px; flex-wrap:wrap;}
.hero-stats div strong{display:block; font-family:var(--font-display); font-size:1.6rem; color:var(--sage-deep);}
.hero-stats div span{font-size:.8rem; color:var(--muted);}

/* flow-signature svg spine */
.flow-spine{position:absolute; left:50%; top:0; transform:translateX(-50%); width:2px; z-index:0; opacity:.5;}
.flow-visual{width:100%; aspect-ratio:4/5; position:relative;}
.flow-visual svg{width:100%; height:100%;}

/* ---------- Pillars ---------- */
.pillars{padding:70px 0; position:relative;}
.pillar-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:40px;}
.pillar-card{
  background:var(--paper-alt); border-radius:var(--radius); padding:32px 28px;
  border:1px solid var(--line); transition:transform .25s ease, box-shadow .25s ease;
  position:relative; overflow:hidden;
}
.pillar-card:hover{transform:translateY(-6px); box-shadow:0 16px 30px rgba(30,46,36,.1);}
.pillar-card .num{font-family:var(--font-mono); font-size:.75rem; color:var(--muted); opacity:.7;}
.pillar-card .icon{width:42px;height:42px;margin:14px 0 18px;}
.pillar-card.ernaehrung .icon{color:var(--sage);}
.pillar-card.mental .icon{color:var(--berry);}
.pillar-card.fitness .icon{color:var(--clay);}
.pillar-card h3{margin-bottom:8px;}
.pillar-card p{margin-bottom:0; font-size:.95rem;}
@media(max-width:820px){.pillar-grid{grid-template-columns:1fr;}}

/* ---------- Section shells ---------- */
.section{padding:70px 0;}
.section-dark{background:var(--sage-deep); color:#fff;}
.section-dark p{color:rgba(255,255,255,.78);}
.section-dark .eyebrow{color:#e6c9a8;}
.section-dark .eyebrow::before{background:#e6c9a8;}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:36px; flex-wrap:wrap;}

/* ---------- Blog cards (Pinterest-optimiert, Hochformat) ---------- */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
@media(max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr;}}
.post-card{
  border-radius:var(--radius); overflow:hidden; background:#fff;
  border:1px solid var(--line); display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease;
}
.post-card:hover{transform:translateY(-5px); box-shadow:0 18px 34px rgba(30,46,36,.12);}
.post-thumb{
  aspect-ratio:2/3; position:relative; overflow:hidden;
  display:flex; align-items:flex-end;
}
.post-thumb svg{position:absolute; inset:0; width:100%; height:100%;}
.post-thumb .pin-overlay{
  position:relative; z-index:2; width:100%; padding:16px;
  display:flex; justify-content:flex-end;
  opacity:0; transition:opacity .2s ease;
}
.post-thumb:hover .pin-overlay{opacity:1;}
.pin-save{
  background:#E60023; color:#fff; font-weight:700; font-size:.82rem;
  padding:9px 16px; border-radius:999px; border:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
}
.post-thumb .cat-tag{
  position:absolute; top:16px; left:16px; z-index:2;
  font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.06em; background:rgba(241,238,226,.92); color:var(--ink);
  padding:5px 10px; border-radius:4px;
}
.post-body{padding:22px 20px 26px;}
.post-body h3{font-size:1.15rem; margin-bottom:8px;}
.post-body p{font-size:.92rem; margin-bottom:14px;}
.post-meta{font-size:.78rem; color:var(--muted); font-family:var(--font-mono);}

/* ---------- Newsletter / Pinterest CTA ---------- */
.cta-band{
  background:var(--ink); color:var(--paper); border-radius:20px;
  padding:56px 48px; display:grid; grid-template-columns:1.3fr .9fr; gap:40px; align-items:center;
}
.cta-band h2{color:#fff;}
.cta-band p{color:rgba(241,238,226,.75);}
.follow-row{display:flex; gap:14px; flex-wrap:wrap;}
@media(max-width:820px){.cta-band{grid-template-columns:1fr; padding:40px 26px;}}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line); padding:44px 0 30px; font-size:.85rem; color:var(--muted);}
.footer-grid{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:26px;}
.footer-links{display:flex; gap:22px; flex-wrap:wrap;}

/* ---------- Article page ---------- */
.article-hero{padding:56px 0 20px;}
.article-hero .meta{font-family:var(--font-mono); font-size:.78rem; color:var(--muted); margin-bottom:16px;}
.article-cover{aspect-ratio:16/9; border-radius:14px; overflow:hidden; margin:26px 0 10px;}
.article-body{max-width:72ch; margin:0 auto; padding:20px 0 70px;}
.article-body h2{margin-top:1.6em;}
.article-body p, .article-body li{color:var(--ink); font-size:1.05rem;}
.article-body ul{padding-left:1.2em;}
.pin-toolbar{
  display:flex; align-items:center; gap:12px; margin:26px 0;
  padding:14px 18px; background:var(--paper-alt); border-radius:10px;
}
.product-box{
  border:1px solid var(--line); border-radius:14px; padding:26px; margin:34px 0;
  background:var(--paper-alt); display:flex; gap:22px; align-items:center;
}
.product-box .thumb{width:96px;height:96px;border-radius:10px; flex:none; background:var(--sage); display:flex; align-items:center; justify-content:center; color:#fff;}
.product-box .info{flex:1;}
.product-box h4{margin-bottom:6px;}

/* ---------- Landing page ---------- */
.lp-hero{padding:64px 0 30px; text-align:center;}
.lp-hero .wrap{max-width:820px;}
.lp-hero h1{font-size:clamp(2.2rem,5vw,3.6rem);}
.benefit-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:34px;}
@media(max-width:820px){.benefit-grid{grid-template-columns:1fr;}}
.benefit-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px;}
.benefit-card .icon{width:34px;height:34px; color:var(--clay); margin-bottom:14px;}
.faq-item{border-bottom:1px solid var(--line); padding:20px 0;}
.faq-item summary{cursor:pointer; font-weight:600; font-family:var(--font-display); font-size:1.1rem; list-style:none; display:flex; justify-content:space-between; align-items:center;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-family:var(--font-mono); font-size:1.3rem; color:var(--clay);}
.faq-item[open] summary::after{content:"–";}
.faq-item p{margin-top:12px;}
.testimonial{background:var(--paper-alt); border-radius:14px; padding:26px; font-family:var(--font-display); font-size:1.15rem; font-style:italic;}
.testimonial cite{display:block; font-family:var(--font-mono); font-style:normal; font-size:.78rem; margin-top:14px; color:var(--muted);}
.sticky-cta{
  position:sticky; bottom:0; z-index:40; background:var(--paper);
  border-top:1px solid var(--line); padding:14px 0;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}

/* ---------- WordPress-Extras ---------- */
.post-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.article-cover img{width:100%; height:100%; object-fit:cover;}
.wp-pagination{display:flex; gap:10px; justify-content:center; margin-top:50px; font-family:var(--font-mono); font-size:.85rem;}
.wp-pagination a, .wp-pagination span{padding:8px 14px; border:1px solid var(--line); border-radius:8px;}
.wp-pagination .current{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.entry-content > *{max-width:72ch;}
.entry-content .benefit-grid, .entry-content .pillar-grid{max-width:none;}
.page-content-wrap{max-width:70ch;}
.screen-reader-text{position:absolute !important; clip:rect(1px,1px,1px,1px); overflow:hidden; height:1px; width:1px;}