/* ==========================================================================
   MM Energie / Klima Waldgesellschaft
   Design system. Palette derived from the two company logos.
   ========================================================================== */

@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces-latin.woff2') format('woff2');
  font-weight:300 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Sans';
  src:url('../fonts/instrument-sans-latin.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* ink + paper: warm, slightly green-shifted neutrals */
  --ink:      #1b2019;
  --ink-2:    #3a4237;
  --muted:    #6f776b;
  --paper:    #f3f0e8;
  --paper-2:  #e9e4d8;
  --paper-3:  #dfd9c9;
  --line:     rgba(27,32,25,.13);
  --line-2:   rgba(27,32,25,.26);

  /* brand, sampled from the logos */
  --green:    #6b8b26;   /* MM ENERGIE wordmark */
  --forest:   #4f702b;   /* Klima Waldgesellschaft leaf */
  --brand-gy: #505050;

  /* scene */
  --mist:     #b9c2c4;
  --dark:     #161c17;

  --maxw: 1240px;
  --gut: clamp(1.25rem, 5vw, 4.5rem);

  --t-fast: .22s cubic-bezier(.2,.6,.3,1);
  --t: .5s cubic-bezier(.2,.6,.3,1);

  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-size:clamp(1rem,.94rem + .3vw,1.125rem);
  line-height:1.62; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3,.display{
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
  font-optical-sizing:auto; font-weight:400;
  line-height:1.03; letter-spacing:-.022em; margin:0;
  font-variant-ligatures:common-ligatures;
}

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }

/* eyebrow ---------------------------------------------------------------- */
.eyebrow{
  font-size:.72rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); margin:0 0 1.4rem; display:flex; align-items:center; gap:.7rem;
  white-space:nowrap;
}
.eyebrow::before{
  content:''; width:1.8rem; height:1px; background:var(--green); flex:none;
}

/* ==========================================================================
   Header
   ========================================================================== */
.nav::before{
  content:''; position:absolute; inset:-1px 0 auto 0; height:150%;
  background:linear-gradient(to bottom,rgba(240,238,229,.72),rgba(240,238,229,0));
  opacity:1; transition:opacity var(--t); pointer-events:none;
}
.nav.is-stuck::before{ opacity:0; }
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; gap:2rem;
  padding:1.05rem var(--gut);
  transition:background var(--t), box-shadow var(--t), padding var(--t);
}
.nav.is-stuck{
  background:rgba(243,240,232,.88);
  -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:0 1px 0 var(--line); padding-block:.7rem;
}
.nav__brand{ display:flex; align-items:center; gap:.95rem; text-decoration:none; flex:none; position:relative; }
.nav__brand > img{ height:38px; width:auto; }
.nav__brand .rule{ width:1px; height:32px; background:var(--line-2); }
.nav__brand .klima{ height:30px; width:auto; }

.nav__links{ margin-left:auto; display:flex; gap:.35rem; align-items:center; position:relative; }
.nav__links a{
  text-decoration:none; font-size:.86rem; font-weight:500; color:var(--ink-2);
  padding:.5rem .8rem; border-radius:100px; transition:background var(--t-fast), color var(--t-fast);
  white-space:nowrap;
}
.nav__links a:hover{ background:rgba(27,32,25,.06); color:var(--ink); }
.nav__links a.cta{
  background:var(--ink); color:var(--paper); padding-inline:1.1rem;
}
.nav__links a.cta:hover{ background:var(--forest); color:#fff; }
@media (max-width:860px){
  .nav__links a:not(.cta){ display:none; }
  .nav__brand .klima{ display:none; }
  .nav__brand .rule{ display:none; }
}

/* ==========================================================================
   Hero — scroll-driven canvas scene
   ========================================================================== */
.hero{ position:relative; height:340vh; background:var(--mist); }
.hero__stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; place-items:stretch;
}
#scene{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* film grain — static overlay, costs nothing per frame */
.hero__grain{
  position:absolute; inset:-20%; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

.hero__copy{
  position:absolute; inset:0; display:grid; align-items:center;
  padding-inline:var(--gut); pointer-events:none;
}
.hero__copy::before{
  content:''; position:absolute; inset:0; grid-area:1/1; z-index:-1;
  background:linear-gradient(to right,rgba(238,237,228,.62),rgba(238,237,228,.28) 34%,rgba(238,237,228,0) 62%);
}
@media (max-width:760px){
  .hero__copy::before{
    background:linear-gradient(to top,rgba(240,238,230,.93),rgba(240,238,230,.80) 26%,rgba(240,238,230,.30) 52%,rgba(240,238,230,0) 74%);
  }
}
.cap{
  grid-area:1/1; max-width:min(46rem,54vw);
  will-change:opacity,transform;
}
.cap .eyebrow{ color:#39412f; }
.cap .eyebrow::before{ background:var(--green); }
.cap h1{ font-size:clamp(2.7rem,6.4vw,5.4rem); font-weight:300; white-space:nowrap; }
.cap h1 em{ font-style:normal; display:block; font-size:.54em; letter-spacing:-.018em; color:#2f3727; margin-top:.34em; font-weight:400; }
.cap h2{ font-size:clamp(2rem,4.4vw,3.6rem); font-weight:300; max-width:16ch; }
.cap p{
  margin:1.5rem 0 0; max-width:34ch; color:#232a20; font-weight:450;
  font-size:clamp(1rem,.9rem + .4vw,1.2rem); line-height:1.55;
}
.cap .dot{ color:var(--green); }
@media (max-width:760px){
  .cap{ max-width:none; }
  .cap h1{ font-size:clamp(2.1rem,9.6vw,3.4rem); white-space:normal; }
  .cap h2{ font-size:clamp(1.8rem,7.4vw,2.6rem); max-width:13ch; }
  .hero__copy{ align-items:end; padding-bottom:23svh; }
  .eyebrow{ font-size:.64rem; letter-spacing:.11em; }
  .eyebrow::before{ width:1.4rem; }
}

.hero__cue{
  position:absolute; left:var(--gut); bottom:2.2rem; display:flex; align-items:center; gap:.7rem;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:#2f3727;
  pointer-events:none;
}
.hero__cue i{ display:block; width:1px; height:34px; background:currentColor; opacity:.4; position:relative; overflow:hidden; }
.hero__cue i::after{
  content:''; position:absolute; inset:0; background:var(--green);
  animation:cue 2.4s cubic-bezier(.6,0,.2,1) infinite;
}
@keyframes cue{ 0%{transform:translateY(-100%)} 55%,100%{transform:translateY(100%)} }
/* on a short window there is no room for both the copy and the cue */
@media (max-height:620px){ .hero__cue{ display:none; } }

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
.js .rv{
  opacity:0; transform:translateY(20px);
  transition:opacity .85s cubic-bezier(.2,.6,.3,1), transform .85s cubic-bezier(.2,.6,.3,1);
}
.js .rv.in{ opacity:1; transform:none; }
.js .rv.d1{ transition-delay:.09s } .js .rv.d2{ transition-delay:.18s } .js .rv.d3{ transition-delay:.27s }

/* ==========================================================================
   Sections
   ========================================================================== */
section{ position:relative; }
.pad{ padding-block:clamp(5rem,11vw,9.5rem); }

/* Intro statement --------------------------------------------------------- */
.intro{ background:var(--paper); }
.intro__lead{
  font-family:'Fraunces',Georgia,serif; font-weight:300;
  font-size:clamp(1.6rem,3.4vw,2.85rem); line-height:1.22; letter-spacing:-.02em;
  max-width:22ch; margin:0;
}
.intro__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); }
@media (min-width:900px){
  .intro__grid{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:end; }
}
.intro__note{ color:var(--muted); max-width:42ch; margin:0; }
.intro__note strong{ color:var(--ink); font-weight:600; }

/* Pillars ----------------------------------------------------------------- */
.pillar{ border-top:1px solid var(--line); }
.pillar__grid{ display:grid; gap:clamp(1.8rem,4vw,3.5rem); grid-template-columns:minmax(0,1fr); }
@media (min-width:920px){
  .pillar__grid{ grid-template-columns:minmax(0,.38fr) minmax(0,.62fr); gap:clamp(3rem,7vw,7rem); }
  /* asymmetric: the second pillar sits inset from the left, not mirrored */
  .pillar--alt .pillar__grid{ grid-template-columns:minmax(0,.30fr) minmax(0,.70fr); }
}
.pillar h2{ font-size:clamp(1.9rem,3.6vw,3rem); font-weight:300; }
.pillar__num{
  font-family:'Fraunces',serif; font-size:.8rem; letter-spacing:.1em; color:var(--green);
  font-weight:600; margin-bottom:1rem;
}
.pillar__body p{ margin:0 0 1.15rem; max-width:62ch; color:var(--ink-2); }
.pillar__body p:last-child{ margin-bottom:0; }
.pillar__body .first{ font-size:clamp(1.08rem,1rem + .45vw,1.32rem); color:var(--ink); line-height:1.5; }

.pillar__fig{
  margin:clamp(2rem,4vw,2.8rem) 0 0; width:100%; align-self:start;
  max-width:26rem;              /* keeps it from eating the page on its own */
}
.pillar__fig img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; }
.pillar__fig img{
  width:100%; height:100%; object-fit:cover; display:block;
  border-radius:2px; background:var(--paper-2);
}
/* Forst gets the portrait under its heading, Energie the landscape under its
   text: the two sections are deliberately not mirror images of each other. */

.pillar__fig figcaption{
  margin-top:.85rem; font-size:.82rem; color:var(--muted); line-height:1.4;
}


.stat{ display:flex; align-items:flex-end; gap:.9rem; margin-top:clamp(2rem,4vw,3rem); flex-wrap:wrap; }
.stat__n{
  font-family:'Fraunces',serif; font-weight:300; letter-spacing:-.04em;
  font-size:clamp(3.6rem,9vw,6.6rem); line-height:.85; color:var(--forest);
}
.stat__l{ font-size:.93rem; color:var(--muted); max-width:20ch; line-height:1.4; padding-bottom:.5rem; }

/* Funding ---------------------------------------------------------------- */
.funding{ background:var(--paper-2); border-top:1px solid var(--line); }
.funding h2{ font-size:clamp(1.8rem,3.4vw,2.8rem); font-weight:300; }
.funding__grid{ display:grid; gap:clamp(1.8rem,4vw,3.5rem); grid-template-columns:minmax(0,1fr); margin-top:2.2rem; }
@media (min-width:900px){
  .funding__grid{ grid-template-columns:minmax(0,.44fr) minmax(0,.56fr); gap:clamp(3rem,6vw,5rem); }
}
.funding p{ color:var(--ink-2); max-width:52ch; margin:0 0 1.3rem; }
.funding .claim{
  font-family:'Fraunces',serif; font-size:clamp(1.2rem,2vw,1.6rem); font-weight:300;
  line-height:1.3; color:var(--forest); letter-spacing:-.02em; margin-top:1.4rem;
}
.funding__stat{ display:flex; align-items:flex-end; gap:.85rem; margin:0 0 1.6rem; }
.funding__stat b{
  font-family:'Fraunces',serif; font-weight:300; font-size:clamp(2.8rem,6vw,4.4rem);
  line-height:.85; color:var(--forest); letter-spacing:-.04em;
}
.funding__stat span{
  font-size:.88rem; color:var(--muted); max-width:15ch; line-height:1.35; padding-bottom:.45rem;
}

.marks{
  display:flex; align-items:center; gap:clamp(1.3rem,2.6vw,2rem); flex-wrap:wrap;
  background:#fff; border:1px solid var(--line); border-radius:2px;
  padding:1rem 1.35rem; margin-top:1.9rem; width:fit-content; max-width:100%;
}
.marks img{ height:50px; width:auto; }
.marks img:first-child{ height:62px; }

.links{ list-style:none; padding:0; margin:1.4rem 0 0; display:grid; gap:.5rem; }
.links a{
  color:var(--muted); font-size:.83rem; text-decoration:none; word-break:break-word;
  border-bottom:1px solid var(--line); padding-bottom:2px;
  transition:color var(--t-fast), border-color var(--t-fast);
}
.links a:hover{ color:var(--forest); border-color:var(--forest); }

.funding__second{
  margin-top:clamp(3.5rem,7vw,5.5rem); padding-top:clamp(2.5rem,5vw,3.5rem);
  border-top:1px solid var(--line);
  display:grid; gap:clamp(2rem,4vw,3.5rem); grid-template-columns:1fr; align-items:start;
}
@media (min-width:900px){
  .funding__second{ grid-template-columns:minmax(0,.36fr) minmax(0,.64fr); gap:clamp(2.5rem,5vw,4rem); }
}
.funding__second h3{
  font-family:'Fraunces',serif; font-size:clamp(1.15rem,1.9vw,1.45rem); font-weight:400;
  margin:0 0 .9rem; letter-spacing:-.015em;
}
.funding__second p{ font-size:.95rem; }
.notice{
  background:#fff; border:1px solid var(--line); border-radius:2px;
  padding:clamp(1.4rem,3vw,2rem); align-self:start;
  display:grid; gap:clamp(1.5rem,3vw,2.2rem); grid-template-columns:minmax(0,1fr);
}
@media (min-width:640px){
  .notice{ grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); }
}
.notice__col{ display:flex; flex-direction:column; gap:1.2rem; justify-content:space-between; }
.notice p{
  margin:0; font-size:.83rem; line-height:1.55; color:#2c2c2c; max-width:50ch;
  font-family:'Instrument Sans',sans-serif;
}
.notice__marks{ display:flex; align-items:flex-end; gap:1.6rem; flex-wrap:wrap; }
.notice__marks img{ height:52px; width:auto; }
.notice__marks img.eu{ height:74px; }

/* Contact ---------------------------------------------------------------- */
.contact{ background:var(--paper-2); border-top:1px solid var(--line); }
.contact__grid{
  display:grid; gap:clamp(2rem,4vw,3.5rem); grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media (min-width:900px){
  .contact__grid{ grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); }
}
.contact h2{ font-size:clamp(2rem,4.2vw,3.2rem); font-weight:300; }
.contact__fig{ margin:0; width:100%; align-self:start; }
.contact__fig img{
  width:100%; height:auto; display:block; border-radius:2px; aspect-ratio:11/8;
  object-fit:cover; object-position:30% 58%; background:var(--paper-3);
}

.contact__list{ margin:clamp(1.8rem,3.5vw,2.4rem) 0 0; display:grid; gap:0; max-width:26rem; }
.contact__list dt{
  font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; font-weight:600;
  color:var(--muted); padding-top:1rem;
}
.contact__list dd{
  margin:.35rem 0 0; padding-bottom:1rem; border-bottom:1px solid var(--line);
  font-size:1.02rem; line-height:1.55; color:var(--ink);
}
.contact__list dd:last-child{ border-bottom:0; padding-bottom:0; }
.contact__list a{ text-decoration:none; transition:color var(--t-fast); }
.contact__list a:hover{ color:var(--forest); }

/* Imprint ----------------------------------------------------------------- */
.imprint{ background:var(--paper); border-top:1px solid var(--line); }
.imprint__grid{ display:grid; gap:clamp(2rem,5vw,3.5rem); grid-template-columns:minmax(0,1fr); }
@media (min-width:760px){ .imprint__grid{ grid-template-columns:1fr 1fr; } }
.entity{ }
.entity img{ height:52px; width:auto; margin-bottom:1.4rem; }
.entity img.mm{ height:34px; }
.entity h3{ font-family:'Fraunces',serif; font-size:1.35rem; font-weight:400; margin:0 0 .9rem; }
.entity dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.35rem 1.2rem; font-size:.95rem; }
.entity dt{ color:var(--muted); }
.entity dd{ margin:0; color:var(--ink-2); }
.entity dd a{ text-decoration:none; border-bottom:1px solid var(--line-2); }
.entity dd a:hover{ color:var(--forest); border-color:var(--forest); }

/* Footer ------------------------------------------------------------------ */
footer{ background:var(--dark); color:#8d968a; padding-block:2.6rem; font-size:.82rem; }
.foot{ display:flex; gap:1.4rem; flex-wrap:wrap; align-items:center; }
.foot a{ color:#c2c9be; text-decoration:none; }
.foot a:hover{ color:var(--green); }
.foot .sp{ margin-left:auto; }
@media (max-width:620px){ .foot .sp{ margin-left:0; } }

/* Legal page -------------------------------------------------------------- */
.legal{ padding-top:clamp(7rem,14vw,10rem); }
.legal h1{ font-size:clamp(2.2rem,5vw,3.4rem); font-weight:300; margin-bottom:.6rem; }
.legal__lede{ color:var(--muted); margin:0 0 clamp(3rem,6vw,4.5rem); max-width:50ch; }
.legal__body{ max-width:72ch; }
.legal__body h2{
  font-size:1.28rem; font-weight:400; margin:clamp(2.6rem,5vw,3.4rem) 0 .9rem;
  padding-top:1.4rem; border-top:1px solid var(--line);
}
.legal__body h3{ font-family:'Instrument Sans',sans-serif; font-size:.74rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); font-weight:600; margin:1.8rem 0 .5rem; }
.legal__body p{ color:var(--ink-2); margin:0 0 1rem; }
.legal__body ul{ color:var(--ink-2); padding-left:1.1rem; margin:0 0 1rem; }
.legal__body li{ margin-bottom:.3rem; }
.legal__body address{ font-style:normal; color:var(--ink-2); margin:0 0 1rem; }
.legal__body a{ color:var(--forest); }
.legal__meta{ margin-top:3rem; padding-top:1.4rem; border-top:1px solid var(--line); color:var(--muted); font-size:.85rem; }
.back{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; font-size:.85rem;
  font-weight:500; color:var(--muted); margin-bottom:2rem; transition:color var(--t-fast);
}
.back:hover{ color:var(--forest); }

/* Reduced motion ---------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .js .rv{ opacity:1; transform:none; transition:none; }
  .hero__cue{ display:none; }
  /* No scroll story, so both captions are shown stacked — a reduced-motion
     user must still get the h1 and the finished image, not one of the two. */
  .hero{ height:auto; min-height:100svh; }
  .hero__stage{ position:relative; height:auto; min-height:100svh; }
  .hero__copy{
    position:relative; display:block;
    padding-block:clamp(7rem,14vh,10rem) clamp(4rem,9vh,7rem);
  }
  .cap{ opacity:1 !important; transform:none !important; max-width:min(46rem,66vw); }
  .cap + .cap{
    margin-top:2.4rem; padding-top:2.2rem; border-top:1px solid rgba(27,32,25,.18);
  }
  @media (max-width:760px){ .cap{ max-width:none; } }
}