
:root{--bg:#FAF8F0;--surface:#FFF;--ink:#2A1B11;--muted:#614034;--lila:#820DAB;--gruen:#C8DA2C;--lila-hell:#F3E6FA;--gruen-hell:#EEF5C9;--card-radius:22px;--shadow:0 10px 30px rgba(0,0,0,.12);--shadow-soft:0 6px 18px rgba(0,0,0,.08);--maxw:1200px}
*{box-sizing:border-box}body{margin:0;font:16px/1.6 system-ui,Inter,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}
img{max-width:100%;display:block}a{text-decoration:none;color:inherit}
.container{max-width:var(--maxw);padding:0 24px;margin:0 auto}
/* Header */
.site-header{position:sticky;top:0;z-index:50;background:#FBF9F2;border-bottom:1px solid rgba(0,0,0,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:40px;height:40px;border-radius:12px;background:var(--lila)}
.brand h1{font-size:20px;margin:0;font-weight:900}
.brand-logo img{height:auto;width:auto;max-width:100%}
.menu .menu{display:flex;gap:16px}
.ctaBtn{padding:10px 18px;border-radius:999px;background:var(--gruen);font-weight:900}
.cta-shadow{position:absolute;inset:auto -6px -6px auto;width:100%;height:100%;border-radius:999px;background:#5B007B;transform:translate(6px,6px);z-index:0}
.cta-blob{position:relative;display:inline-block}
/* Hero */
.hero{position:relative;height:100vh;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.05) 70%,rgba(0,0,0,0) 85%)}
.hero-copy{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;height:100%}
.hero-inner{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.hero-box{max-width:760px}
.kicker{font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#fff;opacity:.95}
.hero h2{margin:10px 0 14px;font-size:clamp(34px,6vw,64px);line-height:1.02;color:#fff;font-weight:1000}
.hero p{color:#fff;opacity:.92;max-width:60ch}
.section{padding:70px 0}.section h3{font-size:clamp(26px,4vw,46px);margin:0 0 6px;font-weight:1000;color:var(--ink)}.section .underline{height:3px;background:var(--lila);width:100%;max-width:var(--maxw);margin:18px auto 26px;opacity:.75}
/* Cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:980px){.cards{grid-template-columns:1fr 1fr}}@media (max-width:640px){.cards{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid rgba(0,0,0,.08);border-radius:var(--card-radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.card .media{width:100%;aspect-ratio:16/9;object-fit:cover;flex-shrink:0}
.card .body{padding:18px 18px 22px;flex:1;display:flex;flex-direction:column}
.card .accent{height:6px;background:var(--lila)}
.card h4{margin:8px 0 6px;font-size:22px;font-weight:900}.card p{margin:0 0 12px;color:var(--muted);flex-grow:1}.card a.more{font-weight:800;color:var(--lila)}
/* Posts grid */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:980px){.posts{grid-template-columns:1fr 1fr}}@media (max-width:640px){.posts{grid-template-columns:1fr}}
.post{background:var(--surface);border:1px solid rgba(0,0,0,.08);border-radius:20px;box-shadow:var(--shadow-soft);overflow:hidden;display:flex;flex-direction:column}
.post .thumb{width:100%;aspect-ratio:16/9;object-fit:cover;flex-shrink:0}.post .bar{height:6px;background:var(--lila)}
.post .body{padding:18px;flex:1;display:flex;flex-direction:column}.post .meta{font-size:12px;color:#7a5a4f;margin-bottom:8px}.post h4{margin:0 0 8px;font-size:22px;font-weight:900}.post p{margin:0 0 10px;color:var(--muted);flex-grow:1}
/* Strategy */
.list{max-width:900px;margin:0 auto}.list h4{margin:0 0 12px;font-size:28px;font-weight:900}.steps{margin-top:22px;border-top:1px solid rgba(0,0,0,.08)}.step{display:flex;align-items:center;gap:18px;padding:18px 0;border-bottom:1px solid rgba(0,0,0,.08)}.step .num{width:42px;height:42px;border-radius:999px;background:var(--gruen-hell);display:grid;place-items:center;font-weight:900}
/* CTA */
.cta-photo{position:relative}.cta-photo .bgimg{width:100%;aspect-ratio:16/5;object-fit:cover;filter:saturate(105%)}.cta-panel{position:absolute;left:50%;transform:translateX(-50%);bottom:8%;width:min(980px,92%);background:var(--lila);color:#fff;border-radius:28px;padding:36px 28px;text-align:center;box-shadow:0 18px 40px rgba(0,0,0,.25)}.cta-panel h3{margin:0 0 8px;font-size:clamp(28px,6vw,56px);font-weight:1000}.cta-panel p{margin:4px 0 18px;opacity:.95}.btn{display:inline-block;border-radius:999px;padding:12px 20px;font-weight:900;background:var(--gruen);color:#1b1b1b;position:relative}.btn::after{content:\"\";position:absolute;inset:auto -6px -6px auto;width:100%;height:100%;border-radius:999px;background:#5B007B;transform:translate(6px,6px);z-index:-1}
/* Footer */
.site-footer{padding:40px 0;color:#6b5247;border-top:1px solid rgba(0,0,0,.06)}.foot{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
/* Single */
.gg-post-header { margin-top: 28px; }
.gg-post-title { font-size: clamp(32px, 5vw, 64px); font-weight: 1000; color: var(--ink); margin: 0 0 10px; line-height: 1.02; }
.gg-post-meta { color: #6c5b4c; margin-bottom: 12px; }
.gg-post-hero img { width: 100%; aspect-ratio: 16/6; object-fit: cover; border-radius: 14px; margin: 10px 0 22px; }
.gg-post-content { max-width: 1000px; }
.gg-post-content p { line-height: 1.7; margin: 0 0 1rem; }
.gg-post-tags a { display: inline-block; background: var(--lila-hell); color: var(--lila); padding: 6px 10px; border-radius: 999px; margin: 0 8px 8px 0; font-weight: 700; }
.gg-related { margin: 40px auto 60px; }
.gg-related h2 { font-size: clamp(22px, 3.5vw, 32px); font-weight: 1000; color: var(--ink); margin: 0 0 16px; }
.gg-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width:980px){ .gg-related-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:640px){ .gg-related-grid{ grid-template-columns:1fr } }
.gg-related-item { background: var(--surface); border:1px solid rgba(0,0,0,.08); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-soft); }
.gg-related-link { text-decoration:none; color: inherit; display: block; }
.gg-related-thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.gg-related-info { padding: 14px 16px 18px; }
.gg-related-info h3 { margin: 0 0 6px; font-size: 20px; font-weight: 900; color: var(--ink); }
.gg-related-info p { margin: 0; color: #5f4a40; }


/* Header layout fixes */
.site-header{overflow:visible}
.site-header .nav{display:flex;align-items:center;justify-content:space-between;gap:20px}
.site-header .brand{flex:0 0 auto;display:flex;align-items:center;gap:12px}
.site-header nav.menu{flex:1 1 auto;display:flex;justify-content:center;overflow:visible}
.site-header nav.menu > ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;align-items:center;justify-content:center}
.site-header .cta-blob{flex:0 0 auto;position:relative;z-index:5}
.site-header .ctaBtn{position:relative;z-index:2;display:inline-block}
.site-header .cta-shadow{z-index:1}


/* ===== Responsive updates (2025-10) ===== */

/* Mobile nav */
.nav-toggle{display:none;align-items:center;justify-content:center;gap:4px;width:44px;height:40px;border:0;background:transparent}
.nav-toggle .bar{display:block;width:22px;height:2px;background:#1b0f00;border-radius:2px}
@media (max-width:980px){
  .site-header .container.nav{position:relative}
  .nav-toggle{display:inline-flex}
  .site-header .menu{position:absolute;left:0;right:0;top:100%;background:#FBF9F2;border-top:1px solid rgba(0,0,0,.06);display:none;padding:8px 0}
  .site-header .menu .menu{flex-direction:column;gap:8px;padding:8px 24px}
  body.nav-open .site-header .menu{display:block}
  /* Header CTA fits on small screens */
  .cta-shadow{display:none}
  .ctaBtn{padding:10px 14px;font-size:14px}
}

/* Strategy list spacing on mobile */
@media (max-width:640px){
  .list .item{padding:14px 0}
}

/* CTA photo panel should not overlap on mobile */
@media (max-width:780px){
  .cta-photo .cta-panel{position:static;transform:none;margin:16px auto 0;max-width:680px;width:auto}
  .cta-photo .bgimg{aspect-ratio:16/10;object-fit:cover}
}

/* Tweak cover/hero spacing small screens */
@media (max-width:540px){
  .hero .hero-box{padding:16px}
  .hero .hero-inner{padding:0 16px}
}


/* Stronger mobile nav rules */
@media (max-width: 980px){
  nav.menu{display:none !important;}
  body.nav-open nav.menu{display:block !important;}
  nav.menu .menu{flex-direction:column;gap:10px;padding:8px 24px}
  .nav-toggle{display:inline-flex !important;color:#1b0f00}
}


/* === Guter Grund homepage sections (v1.5) === */
:root{
  --gap: 24px;
  --radius: 16px;
}
.sr-only{position:absolute !important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden}

/* Cards */
.features.three-cards{max-width:1100px;margin:56px auto}
.features .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.features .card{background:#fff;border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,.08);padding:28px;display:flex;flex-direction:column;gap:12px}
.features .card h4{font-size:28px;line-height:1.1;margin:0}
.features .card p{margin:0 0 12px 0;color:#333}
.features .card-link{margin-top:auto;font-weight:800;color:var(--gg-purple);text-decoration:none;border-bottom:2px solid rgba(0,0,0,0.08);padding-bottom:2px}
@media (max-width:980px){.features .cards{grid-template-columns:1fr;gap:16px} .features.three-cards{margin:32px 16px}}

/* Why */
.why-join{max-width:1100px;margin:72px auto;padding:0 16px}
.why-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.why-text .kicker{display:block;font-weight:900;letter-spacing:.02em;margin-bottom:12px}
.why-title{font-size:40px;line-height:1.1;margin:0 0 18px 0}
.why-text .btn{display:inline-block;background:var(--gg-purple);color:#fff;padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:800}
.why-quote{background:var(--gg-lila-light);padding:24px;border-radius:140px}
.why-quote p{margin:0}
@media (max-width:980px){.why-grid{grid-template-columns:1fr;}.why-title{font-size:32px}}

/* Newsletter */
.newsletter{background:var(--gg-green);margin:72px 0 0 0;padding:28px 16px}
.newsletter .nl-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1.2fr auto;gap:16px;align-items:center}
.newsletter .kicker{display:block;font-weight:900;margin-bottom:6px}
.newsletter .via{opacity:.9}
.newsletter .nl-form{display:flex;gap:12px}
.newsletter .nl-form input{padding:12px 14px;border-radius:999px;border:0;min-width:260px}
.newsletter .nl-form button{padding:12px 16px;border-radius:999px;border:0;background:var(--gg-purple);color:#fff;font-weight:800;cursor:pointer}
.newsletter .nl-social a{display:inline-flex;align-items:center;justify-content:center;height:40px;width:40px;border-radius:999px;background:var(--gg-purple);color:#fff;text-decoration:none;margin-left:8px;padding:0 10px}
@media (max-width:980px){.newsletter .nl-inner{grid-template-columns:1fr;gap:12px}.newsletter .nl-form{width:100%}.newsletter .nl-form input{flex:1}}


/* === PIXEL MATCH OVERRIDES v1.6 === */

/* Header bar */
.site-header{background:#820DAB;position:sticky;top:0;z-index:1000}
.site-header .header-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:14px 18px}
.site-header .site-branding{grid-column:1}
.site-header nav.menu, .site-header #primary-menu{grid-column:2}
.site-header #primary-menu ul{display:flex;gap:28px;align-items:center;justify-content:center}
.site-header #primary-menu a{color:#fff;font-weight:600;text-decoration:none}
.site-header .cta-pill{grid-column:3;justify-self:end;background:#fff;color:#000 !important;border-radius:999px;padding:10px 16px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;box-shadow:0 4px 0 rgba(0,0,0,0.08)}
.menu-toggle{display:none}
@media (max-width:980px){
  .site-header .header-grid{grid-template-columns:1fr auto auto}
  .site-header #primary-menu{display:none!important}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center;height:40px;width:44px;background:#fff;border-radius:8px}
  .menu-toggle svg path{stroke:#000}
  body.nav-open #primary-menu{display:block!important;position:fixed;inset:0;background:#820DAB;padding:80px 24px}
  body.nav-open #primary-menu ul{flex-direction:column;gap:22px}
  body.nav-open #primary-menu a{color:#fff;font-size:24px;font-weight:800}
}

/* Hero solid */
.hero.hero-solid{background:#EAEAEA}
.hero.hero-solid .hero-inner{max-width:1200px;margin:0 auto;padding:80px 16px}
.hero.hero-solid .hero-box{max-width:850px}
.hero.hero-solid .kicker{display:block;color:#000;opacity:.8;font-weight:900;letter-spacing:.02em;margin-bottom:12px}
.hero.hero-solid .hero-head{font-size:64px;line-height:1.05;font-weight:900;color:#000;margin:0 0 16px 0}
.hero.hero-solid .hero-sub{font-size:20px;line-height:1.5;color:#000;opacity:.85;margin:0}

/* Cards section */
.features.three-cards{max-width:1200px;margin:48px auto;padding:0 16px}
.features .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.features .card{background:#fff;border-radius:16px;box-shadow:0 6px 22px rgba(0,0,0,.08);padding:28px}
.features .card h4{font-size:26px;line-height:1.15;margin:0 0 8px;font-weight:800}
.features .card p{margin:0 0 12px 0;color:#000;opacity:.85}
.features .card-link{font-weight:800;color:#820DAB;text-decoration:none}
@media (max-width:980px){.features .cards{grid-template-columns:1fr}}

/* Why section */
.why-join{position:relative;max-width:1200px;margin:56px auto;padding:0 16px}
.why-join::before{content:"";position:absolute;left:0;top:50%;transform:translate(-35%, -50%);width:320px;height:320px;background:#EAEAEA;border-radius:50%;z-index:0}
.why-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
.why-title{font-size:40px;line-height:1.1;margin:0 0 18px 0;font-weight:900}
.why-text .btn{display:inline-block;background:#820DAB;color:#fff;padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:800}
.why-quote{background:#fff;padding:0;border-radius:0}
.why-quote p{color:#000;opacity:.85;margin:0}
@media (max-width:980px){.why-grid{grid-template-columns:1fr}.why-join::before{transform:translate(-50%,-10%);width:220px;height:220px}}
