/* ============================================================
   G.D.Longevity LLC — Styles
   Palette „Terra Vitalis" (Olive & Honiggold) · Fraunces + Inter (self-hosted)
   Charakter: grounded, warm, inspirierend — für Menschen ab der Lebensmitte.
   ============================================================ */

/* ---------- Fonts (self-hosted, kein CDN) ---------- */
@font-face{ font-family:"Fraunces"; font-style:normal; font-weight:400; font-display:swap; src:url("../assets/fonts/fraunces-400.woff2") format("woff2"); }
@font-face{ font-family:"Fraunces"; font-style:normal; font-weight:600; font-display:swap; src:url("../assets/fonts/fraunces-600.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("../assets/fonts/inter-400.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("../assets/fonts/inter-500.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("../assets/fonts/inter-600.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root{
  --bg:#FAF5EE;
  --surface:#FFFFFF;
  --surface-warm:#F3EAD9;
  --heading:#2B2A24;
  --body:#454036;
  --muted:#736A5A;
  --primary:#4F5D3A;      /* Olive — Vitalität, verwurzelt */
  --primary-deep:#3C4A2C;
  --accent:#C1873B;       /* Honiggold — Wärme, goldene Jahre */
  --accent-deep:#A06E28;
  --line:#E8DFCF;
  --dark:#2A2E22;         /* dunkle Sektionen — tiefes Olivkohle */
  --dark-soft:#353B2A;

  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Aliase für den Legal-Seiten-Generator (nutzt --f-head/--f-sans) */
  --f-head:var(--font-display);
  --f-sans:var(--font-body);

  --ease:cubic-bezier(0.4, 0, 0.2, 1);
  --container:1140px;
  --radius:16px;
  --radius-sm:12px;
}

/* ---------- Reset / Base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:76px; }
body{
  font-family:var(--font-body);
  font-size:clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height:1.65;
  color:var(--body);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3{ font-family:var(--font-display); color:var(--heading); font-weight:600; line-height:1.12; letter-spacing:-0.01em; }
h1{ font-size:clamp(2.4rem, 1.6rem + 3.6vw, 4.2rem); }
h2{ font-size:clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem); margin-bottom:1.1rem; }
h3{ font-size:clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); }
p{ max-width:65ch; }
a{ color:var(--primary); text-decoration:none; }
img,svg{ display:block; max-width:100%; height:auto; }

/* ---------- Layout helpers ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(1.25rem, 5vw, 2.5rem); }
.section{ padding-block:clamp(4rem, 8vw, 7rem); }
.section--warm{ background:var(--surface-warm); }
.section__eyebrow{ display:inline-block; font-size:0.78rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); margin-bottom:1rem; }
.section__head{ max-width:62ch; margin-bottom:clamp(2rem, 4vw, 3rem); }
.section__head p{ margin-top:1rem; color:var(--body); font-size:1.1rem; }

/* ---------- Skip link ---------- */
.skip-link{ position:absolute; left:1rem; top:-3rem; z-index:200; background:var(--primary); color:#fff; padding:.7rem 1.1rem; border-radius:8px; transition:top .2s var(--ease); }
.skip-link:focus{ top:1rem; }

/* ---------- Focus ---------- */
:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--font-body); font-weight:600; font-size:1rem; line-height:1; padding:.95rem 1.7rem; border-radius:999px; border:1.5px solid transparent; cursor:pointer; transition:transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.btn--primary{ background:var(--primary); color:#fff; }
.btn--primary:hover{ background:var(--primary-deep); transform:translateY(-2px); box-shadow:0 12px 26px rgba(42,46,34,.25); }
.btn--accent{ background:var(--accent); color:#fff; }
.btn--accent:hover{ background:var(--accent-deep); transform:translateY(-2px); box-shadow:0 12px 26px rgba(160,110,40,.30); }
.btn--ghost{ background:transparent; color:var(--primary); border-color:var(--primary); }
.btn--ghost:hover{ background:var(--primary); color:#fff; transform:translateY(-2px); }

/* ---------- Header / Nav ---------- */
.site-header{ position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(250,245,238,.82); backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.site-header.is-scrolled{ border-bottom-color:var(--line); box-shadow:0 4px 20px rgba(42,46,34,.05); }

/* Transparenter Header über dem Full-Bleed-Hero */
.site-header.site-header--hero:not(.is-scrolled){ background-color:transparent; backdrop-filter:none; }
.site-header--hero:not(.is-scrolled) .nav__links a{ color:#fff; }
.site-header--hero:not(.is-scrolled) .nav__toggle{ color:#fff; }
.nav__logo-light{ display:none; }
.site-header--hero:not(.is-scrolled) .nav__logo-dark{ display:none; }
.site-header--hero:not(.is-scrolled) .nav__logo-light{ display:block; }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:.85rem; }
.nav__logo{ display:flex; align-items:center; }
.nav__logo img{ height:44px; width:auto; }
.nav__links{ display:flex; align-items:center; gap:2rem; list-style:none; }
.nav__links a{ color:var(--heading); font-weight:500; font-size:.97rem; position:relative; padding-block:.25rem; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--accent); transition:width .3s var(--ease); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ display:inline-flex; }
.nav__toggle{ display:none; background:none; border:none; cursor:pointer; padding:.5rem; color:var(--heading); }
.nav__toggle svg{ width:26px; height:26px; }

@media (max-width:860px){
  .nav__toggle{ display:inline-flex; }
  .nav__links, .nav__cta--desktop{ display:none; }
  .nav__menu{ position:fixed; inset:0 0 0 auto; width:min(82vw,330px); background:var(--surface); box-shadow:-10px 0 40px rgba(42,46,34,.18); transform:translateX(100%); transition:transform .35s var(--ease); display:flex; flex-direction:column; gap:1.5rem; padding:5rem 2rem 2rem; z-index:120; }
  .nav__menu.is-open{ transform:translateX(0); }
  .nav__menu .nav__links{ flex-direction:column; align-items:flex-start; gap:1.4rem; }
  .nav__menu .nav__cta{ display:inline-flex; }
  .nav__backdrop{ position:fixed; inset:0; background:rgba(42,46,34,.4); opacity:0; visibility:hidden; transition:opacity .3s var(--ease); z-index:110; }
  .nav__backdrop.is-open{ opacity:1; visibility:visible; }
  .nav__close{ position:absolute; top:1.2rem; right:1.2rem; background:none; border:none; cursor:pointer; color:var(--heading); padding:.4rem; }
  .nav__close svg{ width:26px; height:26px; }
}

/* ---------- Hero (Full-Bleed) ---------- */
.hero{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; overflow:hidden; }
.hero__media{ position:absolute; inset:0; z-index:0;
  /* Golden-Hour-Fallback bis das Higgsfield-Visual eingesetzt wird */
  background-color:#3C4A2C;
  background-image:
    radial-gradient(130% 95% at 50% 118%, rgba(216,164,90,.62) 0%, rgba(193,135,59,.20) 42%, transparent 66%),
    linear-gradient(158deg, #2A2E22 0%, #3C4A2C 38%, #5B5E35 68%, #9A7A34 108%);
}
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.hero__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(24,26,18,.52) 0%, rgba(24,26,18,.60) 55%, rgba(24,26,18,.52) 100%); }
.hero__inner{ position:relative; z-index:2; width:100%; }
.hero__content{ max-width:700px; margin-inline:auto; text-align:center; color:#fff; padding-block:clamp(7rem, 16vh, 11rem); }
.hero .section__eyebrow{ color:#E9C48F; }
.hero h1{ color:#fff; margin-bottom:1.4rem; }
.hero__lead{ font-size:clamp(1.1rem,1rem+0.5vw,1.3rem); color:rgba(255,255,255,.92); margin:0 auto 2.2rem; max-width:54ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
.hero__note{ margin-top:1.8rem; font-size:.95rem; color:rgba(255,255,255,.82); display:flex; align-items:center; justify-content:center; gap:.6rem; }
.hero__note svg{ width:22px; height:22px; flex-shrink:0; color:#E9C48F; }
.btn--hero-ghost{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.65); }
.btn--hero-ghost:hover{ background:#fff; color:var(--primary-deep); border-color:#fff; transform:translateY(-2px); }
@media (max-width:600px){ .hero__content{ padding-block:clamp(6rem,20vh,9rem); } }

/* ---------- Ansatz ---------- */
.ansatz__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.ansatz__points{ list-style:none; display:grid; gap:1.1rem; margin-top:1.6rem; }
.ansatz__points li{ display:flex; gap:.8rem; align-items:flex-start; }
.ansatz__points svg{ width:24px; height:24px; flex-shrink:0; margin-top:.15rem; color:var(--accent); }
.ansatz__card{ background:var(--primary); color:#fff; border-radius:var(--radius); padding:clamp(1.8rem,4vw,2.6rem); }
.ansatz__card h3{ color:#fff; margin-bottom:.8rem; }
.ansatz__card p{ color:rgba(255,255,255,.85); }
.ansatz__card .quote{ font-family:var(--font-display); font-size:1.3rem; line-height:1.4; }
@media (max-width:760px){ .ansatz__grid{ grid-template-columns:1fr; } }

/* ---------- Angebote (cards) ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.6rem,3vw,2.1rem); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.card:hover{ transform:translateY(-4px); box-shadow:0 22px 44px rgba(42,46,34,.12); border-color:var(--accent); }
.card__icon{ width:54px; height:54px; border-radius:14px; background:var(--surface-warm); display:flex; align-items:center; justify-content:center; margin-bottom:1.2rem; }
.card__icon svg{ width:28px; height:28px; color:var(--primary); }
.card h3{ margin-bottom:.6rem; }
.card p{ color:var(--body); font-size:1rem; }
.card__tag{ display:inline-block; margin-top:1rem; font-size:.82rem; font-weight:600; color:var(--accent); }
@media (max-width:860px){ .cards{ grid-template-columns:1fr; } }

/* ---------- Für wen ---------- */
.audience{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.audience__item{ padding:1.6rem; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); }
.audience__item .num{ font-family:var(--font-display); font-size:2rem; color:var(--accent); display:block; margin-bottom:.4rem; }
.audience__item h3{ font-size:1.15rem; margin-bottom:.5rem; }
.audience__item p{ font-size:.97rem; }
@media (max-width:760px){ .audience{ grid-template-columns:1fr; } }

/* ---------- So arbeite ich (steps) ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,4vw,2.5rem); }
.step{ position:relative; }
.step__num{ font-family:var(--font-display); font-size:2.6rem; color:var(--accent); line-height:1; margin-bottom:.8rem; }
.step h3{ margin-bottom:.5rem; }
.step p{ font-size:1rem; }
@media (max-width:760px){ .steps{ grid-template-columns:1fr; } }

/* ---------- Zitat-Band (Foto + Oliv-Overlay) ---------- */
.band{
  position:relative;
  text-align:center;
  color:#fff;
  padding-block:clamp(5rem, 12vw, 9rem);
  background-color:var(--dark);
  background-image:
    linear-gradient(rgba(42,46,34,.66), rgba(42,46,34,.70)),
    url("../assets/img/band.webp");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.band__quote{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.6rem, 1.2rem + 2.2vw, 2.8rem); line-height:1.25; letter-spacing:-0.01em; max-width:24ch; margin-inline:auto; }
.band__sub{ margin-top:1.1rem; color:rgba(255,255,255,.82); font-size:1.05rem; max-width:50ch; margin-inline:auto; }

/* ---------- Kontakt ---------- */
.contact{ background:var(--dark); color:#fff; }
.contact .section__eyebrow{ color:#E9C48F; }
.contact h2{ color:#fff; }
.contact__grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.contact__lead{ color:rgba(255,255,255,.82); font-size:1.1rem; margin-top:1rem; }
.contact__meta{ list-style:none; margin-top:2rem; display:grid; gap:1rem; }
.contact__meta li{ display:flex; gap:.8rem; align-items:flex-start; color:rgba(255,255,255,.9); }
.contact__meta svg{ width:22px; height:22px; color:#E9C48F; flex-shrink:0; margin-top:.2rem; }
.contact__meta a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.form{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); padding:clamp(1.6rem,4vw,2.4rem); display:grid; gap:1.2rem; }
.field{ display:grid; gap:.45rem; }
.field label{ font-size:.9rem; font-weight:500; color:rgba(255,255,255,.9); }
.field input, .field textarea{ font-family:var(--font-body); font-size:1rem; color:#fff; background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.18); border-radius:10px; padding:.8rem .9rem; transition:border-color .2s var(--ease), background .2s var(--ease); }
.field input::placeholder, .field textarea::placeholder{ color:rgba(255,255,255,.45); }
.field input:focus, .field textarea:focus{ outline:none; border-color:#E9C48F; background:rgba(255,255,255,.1); }
.field textarea{ min-height:120px; resize:vertical; }
.form__submit{ justify-self:start; }
.form__note{ font-size:.82rem; color:rgba(255,255,255,.55); }
.form__status{ font-size:.95rem; font-weight:500; padding:.6rem 0; }
.form__status.is-ok{ color:#B8D6A2; }
.form__status.is-err{ color:#E9C48F; }
@media (max-width:760px){ .contact__grid{ grid-template-columns:1fr; } }

/* ---------- Footer ---------- */
.site-footer{ background:var(--primary-deep); color:rgba(255,255,255,.7); padding-block:clamp(2.5rem,5vw,3.5rem); }
.site-footer__inner{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1.5rem; }
.site-footer__logo img{ height:42px; }
.site-footer__links{ display:flex; flex-wrap:wrap; gap:1.5rem; list-style:none; }
.site-footer__links a{ color:rgba(255,255,255,.78); font-size:.92rem; }
.site-footer__links a:hover{ color:#fff; }
.site-footer__copy{ width:100%; border-top:1px solid rgba(255,255,255,.12); margin-top:1.8rem; padding-top:1.5rem; font-size:.85rem; color:rgba(255,255,255,.5); }
.site-footer__copy small{ display:block; margin-top:.5rem; color:rgba(255,255,255,.38); font-size:.8rem; }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.1s; }
.reveal[data-delay="2"]{ transition-delay:.2s; }
.reveal[data-delay="3"]{ transition-delay:.3s; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ---------- Legal pages ---------- */
.legal{ padding-top:calc(clamp(3rem,7vw,6rem) + 68px); padding-bottom:clamp(3rem,7vw,6rem); }
.legal h1{ margin-bottom:1.5rem; }
.legal h2{ font-size:1.4rem; margin:2rem 0 .8rem; }
.legal p, .legal ul{ margin-bottom:1rem; color:var(--body); }
.legal ul{ padding-left:1.3rem; }
.legal a{ text-decoration:underline; text-underline-offset:3px; }
.legal__back{ display:inline-flex; align-items:center; gap:.5rem; margin-top:2.5rem; font-weight:500; }

/* ---------- 404 ---------- */
.err{ min-height:70vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:1.2rem; padding:3rem 1.5rem; }
.err__code{ font-family:var(--font-display); font-size:clamp(4rem,12vw,7rem); color:var(--accent); line-height:1; }