/* ===== Flächenpilot One-Pager — CMI style ===== */
:root{
  --ink:#242424; --ink-soft:#3a3a3a;
  --green:#9BBE3C; --green-d:#6E8A2A; --green-deep:#4F6B1F;
  --grey:#B2B2B2; --muted:#7c7c7c;
  --tint:#EFF3E0; --paper:#F4F5F0; --white:#ffffff;
  --line:#E5E7DF; --line-d:#3a3a3a;
  --bars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='18' viewBox='0 0 26 18'%3E%3Crect x='0' y='10' width='5' height='8' rx='1.5' fill='%239BBE3C'/%3E%3Crect x='7' y='6' width='5' height='12' rx='1.5' fill='%239BBE3C'/%3E%3Crect x='14' y='2' width='5' height='16' rx='1.5' fill='%239BBE3C'/%3E%3Cpath d='M2 11 L22 3' stroke='%23ffffff' stroke-width='0' /%3E%3C/svg%3E");
  --shadow:0 10px 30px rgba(36,36,36,.08);
  --shadow-h:0 18px 44px rgba(36,36,36,.14);
  --maxw:1200px; --radius:14px;
  --display:"Archivo Var", "Archivo Expanded", system-ui, sans-serif;
  --body:"Inter Var", "Inter", system-ui, -apple-system, sans-serif;
}
/* Displayschrift in der breiten Schnittweite (entspricht Archivo Expanded) */
h1,h2,h3,h4,.kpi-num,.step-no,.impact-num,.value-formula,.vc-result-num,.pm-body strong{font-stretch:125%}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{margin:0; font-family:var(--body); color:var(--ink); background:var(--white); line-height:1.6; -webkit-font-smoothing:antialiased;}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; font-family:var(--display); font-weight:800; line-height:1.05; letter-spacing:-.01em}
p{margin:0}
.container{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5em; font-family:var(--body); font-weight:600; font-size:.95rem; padding:.85em 1.5em; border-radius:999px; border:2px solid transparent; cursor:pointer; transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease; white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--green); color:#1c1c1c; border-color:var(--green)}
.btn-primary:hover{background:var(--green-d); border-color:var(--green-d); color:#fff}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn-ghost:hover{border-color:var(--green-d); background:rgba(0,0,0,.04)}
.btn-block{width:100%}

/* ---- eyebrow + signature bars ---- */
.eyebrow{display:flex; align-items:center; gap:.6em; font-family:var(--body); font-weight:600; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--green-deep); margin:0 0 1rem}
.eyebrow--light{color:var(--green-deep)}
.eyebrow .bars{width:26px; height:18px; background:var(--bars) no-repeat center/contain; flex:0 0 auto; transform-origin:bottom left; transition:transform .5s cubic-bezier(.2,.7,.3,1), opacity .5s}
.reveal .bars{transform:scaleY(.2); opacity:.4}
.reveal.in-view .bars{transform:scaleY(1); opacity:1}

/* ---- header ---- */
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--line); transition:padding .2s ease, box-shadow .2s ease}
.header-inner{display:flex; align-items:center; gap:24px; height:74px; transition:height .2s ease}
.site-header.scrolled{box-shadow:0 6px 24px rgba(36,36,36,.07)}
.site-header.scrolled .header-inner{height:62px}
.brand{display:flex; align-items:center; gap:11px; flex:0 0 auto}
.brand-mark{height:34px; width:34px; border-radius:8px}
.brand-word{height:20px; width:auto}
.main-nav{display:flex; gap:26px; margin-left:14px; flex:1 1 auto}
.main-nav a{font-weight:500; font-size:.95rem; color:var(--ink-soft); position:relative; padding:4px 0}
.main-nav a::after{content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--green); transition:width .2s ease}
.main-nav a:hover{color:var(--ink)} .main-nav a:hover::after{width:100%}
.header-actions{display:flex; align-items:center; gap:16px; flex:0 0 auto}
.lang-toggle{display:flex; align-items:center; gap:6px; font-size:.82rem; font-weight:600; color:var(--muted)}
.lang-toggle button{border:none; background:none; cursor:pointer; font:inherit; color:var(--muted); padding:2px 2px}
.lang-toggle a{cursor:pointer; color:var(--muted); text-decoration:none; padding:2px}
.lang-toggle a.is-active{color:var(--ink)}
.lang-toggle button.is-active{color:var(--ink)}
.lang-toggle button:hover{color:var(--green-d)}
.header-cta{padding:.6em 1.1em; font-size:.88rem}
.nav-toggle{display:none; flex-direction:column; gap:5px; width:42px; height:42px; border:none; background:none; cursor:pointer; padding:9px}
.nav-toggle span{display:block; height:2px; background:var(--ink); border-radius:2px; transition:.25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- hero ---- */
.hero{position:relative; min-height:88vh; display:flex; align-items:center; color:var(--ink); overflow:hidden}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero-scrim{position:absolute; inset:0; background:linear-gradient(100deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.82) 32%, rgba(244,245,240,.42) 60%, rgba(255,255,255,0) 100%)}
.hero-inner{position:relative; padding-top:70px; padding-bottom:70px; max-width:760px}
.hero-title{font-size:clamp(2.6rem,6.4vw,5rem); margin:.4rem 0 1.2rem; letter-spacing:-.02em}
.hero-sub{font-size:clamp(1.05rem,1.7vw,1.3rem); max-width:560px; color:var(--ink-soft); line-height:1.55}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:2.2rem}

/* ---- trust ---- */
.trust{background:var(--tint); color:var(--ink); padding:34px 0}
.trust-line{text-align:center; font-weight:600; font-size:.86rem; letter-spacing:.04em; color:var(--green-deep); margin-bottom:22px}
.trust-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:center}
.kpi{display:flex; flex-direction:column; gap:6px}
.kpi-num{font-family:var(--display); font-weight:800; font-size:clamp(1.7rem,3.4vw,2.5rem); color:var(--ink)}
.kpi-label{font-size:.85rem; color:var(--muted)}
.trust-note{text-align:center; font-size:.74rem; color:var(--muted); margin-top:18px}

/* ---- sections ---- */
.section{padding:96px 0}
.section--paper{background:var(--paper)}
.section--ink{background:var(--tint); color:var(--ink)}
.section-title{font-size:clamp(1.8rem,3.6vw,2.7rem)}
.section--ink .section-title{color:var(--ink)}
.section-body{font-size:1.08rem; color:var(--ink-soft); max-width:620px; margin-top:1rem}
.section--ink .section-body{color:var(--ink-soft)}
.section-lede{font-size:1.05rem; color:var(--muted); max-width:460px}
.section--ink .section-lede{color:var(--muted)}
.section-head-row{display:flex; justify-content:space-between; align-items:end; gap:30px; flex-wrap:wrap; margin-bottom:40px}
.lead{max-width:720px; margin-bottom:54px}

/* ---- levers ---- */
.levers{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.lever{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px 28px; position:relative; box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease}
.lever:hover{transform:translateY(-4px); box-shadow:var(--shadow-h)}
.lever-mark{display:block; width:46px; height:5px; border-radius:3px; background:var(--green); margin-bottom:20px}
.lever h3{font-size:1.3rem; margin-bottom:10px}
.lever p{color:var(--ink-soft); font-size:.98rem}

/* ---- format grid ---- */
.format-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.format-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease}
.format-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-h)}
.fc-img{aspect-ratio:16/10; overflow:hidden}
.fc-img img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease}
.format-card:hover .fc-img img{transform:scale(1.05)}
.format-card h3{font-size:1.12rem; margin:18px 20px 6px}
.format-card p{color:var(--ink-soft); font-size:.92rem; margin:0 20px 20px}

/* ---- steps ---- */
.steps{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; counter-reset:none}
.step{position:relative; padding:26px 24px; border:1px solid var(--line); border-radius:var(--radius); background:#fff}
.step-no{font-family:var(--display); font-weight:800; font-size:1.5rem; color:var(--green); display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%; border:2px solid var(--green); margin-bottom:16px}
.step h3{font-size:1.12rem; color:var(--ink); margin-bottom:8px}
.step p{color:var(--ink-soft); font-size:.92rem}
.process-claim{margin-top:34px; text-align:center; font-style:italic; color:var(--green-deep); font-size:1.05rem}

/* ---- impact ---- */
.impact-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:36px}
.impact{display:flex; flex-direction:column; gap:10px; padding:6px 4px; border-left:3px solid var(--green); padding-left:18px}
.impact-num{font-family:var(--display); font-weight:800; font-size:clamp(1.8rem,3vw,2.5rem); color:var(--green-deep)}
.impact-label{font-size:.92rem; color:var(--ink-soft)}

/* ---- cases ---- */
.case-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.case-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease}
.case-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-h)}
.case-img{aspect-ratio:4/3; overflow:hidden}
.case-img img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease}
.case-card:hover .case-img img{transform:scale(1.05)}
.case-card h3{font-size:1.02rem; margin:16px 18px 6px}
.case-card p{color:var(--ink-soft); font-size:.86rem; margin:0 18px 18px; line-height:1.5}

/* ---- value (investors) ---- */
.value-wrap{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center}
.value-formula{margin-top:22px; font-family:var(--display); font-weight:700; font-size:1.15rem; color:var(--ink); background:var(--tint); display:inline-block; padding:12px 18px; border-radius:10px}
.value-card{background:var(--tint); color:var(--ink); border-radius:18px; padding:34px 34px 28px; box-shadow:var(--shadow); border:1px solid var(--line)}
.vc-title{color:var(--green-deep); font-weight:600; letter-spacing:.04em; font-size:.92rem; margin-bottom:20px}
.vc-rows{margin:0; display:flex; flex-direction:column; gap:0}
.vc-rows>div{display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid rgba(0,0,0,.1)}
.vc-rows dt{color:var(--ink-soft); font-size:.95rem; margin:0}
.vc-rows dd{margin:0; font-weight:700; white-space:nowrap}
.vc-result{display:flex; flex-direction:column; gap:4px; background:var(--green); color:#1c1c1c; border-radius:12px; padding:18px 22px; margin-top:22px}
.vc-result-label{font-size:.88rem; font-weight:600}
.vc-result-num{font-family:var(--display); font-weight:800; font-size:clamp(1.9rem,3.2vw,2.5rem)}
.vc-note{font-size:.74rem; color:var(--muted); margin-top:16px}

/* ---- platform ---- */
.platform-wrap{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center}
.platform-text .btn{margin-top:22px}
.platform-mock{background:var(--white); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-h); overflow:hidden; max-width:460px; width:100%; justify-self:center}
.pm-bar{display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line)}
.pm-bar img{width:22px; height:22px; border-radius:5px}
.pm-bar span{font-size:.85rem; color:var(--muted); font-weight:500}
.pm-img{aspect-ratio:16/9; overflow:hidden}
.pm-img img{width:100%; height:100%; object-fit:cover}
.pm-body{padding:18px 20px 22px}
.pm-body strong{display:block; font-size:1.05rem; font-family:var(--display); font-weight:700}
.pm-meta{display:block; color:var(--muted); font-size:.88rem; margin:4px 0 14px}
.pm-tags{display:flex; flex-wrap:wrap; gap:8px}
.pm-tags span{background:var(--tint); color:var(--green-deep); font-size:.78rem; font-weight:600; padding:6px 12px; border-radius:999px}

/* ---- who ---- */
.who-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:36px}
.who-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:26px 22px; border-top:4px solid var(--green); transition:transform .2s ease}
.who-card:hover{transform:translateY(-4px)}
.who-card h3{font-size:1.08rem; margin-bottom:10px}
.who-card p{color:var(--ink-soft); font-size:.9rem}

/* ---- contact ---- */
.contact-wrap{display:grid; grid-template-columns:1fr 1.05fr; gap:54px; align-items:start}
.contact-direct{margin-top:20px; font-size:1.05rem}
.contact-direct a{color:var(--green); font-weight:600; border-bottom:1px solid transparent}
.contact-direct a:hover{border-color:var(--green)}
.contact-form{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field{display:flex; flex-direction:column; gap:7px}
.field--full{grid-column:1 / -1}
.field label{font-size:.82rem; font-weight:600; color:var(--ink-soft); letter-spacing:.02em}
.field input, .field textarea{font:inherit; font-size:.95rem; background:#fff; border:1px solid var(--line); border-radius:10px; padding:13px 15px; color:var(--ink); transition:border-color .15s ease, background .15s ease}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--green); background:#fff}
.field textarea{resize:vertical}
.contact-form .btn{grid-column:1 / -1; margin-top:4px}
.form-status{grid-column:1/-1; font-size:.9rem; color:var(--green); min-height:1.2em}

/* ---- footer ---- */
.site-footer{background:#2b3616; color:#fff; padding:60px 0 30px}
.footer-inner{display:grid; grid-template-columns:1.3fr 2fr; gap:40px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.1)}
.footer-logo{height:104px; width:auto; margin-bottom:18px}
.footer-addr{color:rgba(255,255,255,.6); font-size:.9rem; line-height:1.7}
.footer-addr a{color:rgba(255,255,255,.85)}
.footer-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.footer-cols h4{font-family:var(--body); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--green); margin-bottom:14px}
.footer-cols a{display:block; color:rgba(255,255,255,.7); font-size:.92rem; padding:5px 0}
.footer-cols a:hover{color:#fff}
.footer-base{display:flex; justify-content:space-between; align-items:center; gap:16px; padding-top:24px; font-size:.8rem; color:rgba(255,255,255,.45); flex-wrap:wrap}
.footer-claim{color:var(--green); font-weight:600}

/* ---- reveal ---- */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal.in-view{opacity:1; transform:none}

/* ---- responsive ---- */
@media (max-width:900px){
  .main-nav, .header-cta{display:none}
  .nav-toggle{display:flex}
  .site-header.nav-open .main-nav{display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; background:#fff; padding:14px 28px 22px; gap:4px; border-bottom:1px solid var(--line); box-shadow:var(--shadow)}
  .site-header.nav-open .main-nav a{padding:12px 0; font-size:1.05rem; border-bottom:1px solid var(--line)}
  .levers, .format-grid, .steps{grid-template-columns:repeat(2,1fr)}
  .impact-grid, .who-grid{grid-template-columns:repeat(2,1fr)}
  .case-grid{grid-template-columns:repeat(2,1fr)}
  .value-wrap, .platform-wrap, .contact-wrap{grid-template-columns:1fr; gap:34px}
  .footer-inner{grid-template-columns:1fr}
  .section{padding:72px 0}
}
@media (max-width:560px){
  .container{padding:0 20px}
  .trust-kpis{grid-template-columns:1fr; gap:18px}
  .levers, .format-grid, .steps, .impact-grid, .who-grid, .case-grid, .contact-form{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:1fr 1fr}
  .hero{min-height:auto; padding-top:30px}
  .hero-inner{padding-top:48px; padding-bottom:64px}
  .brand-word{display:none}
}

/* ---- a11y ---- */
:focus-visible{outline:3px solid var(--green); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none; transition:none}
  .btn:hover,.lever:hover,.format-card:hover,.case-card:hover,.who-card:hover{transform:none}
  .reveal .bars{transform:none; opacity:1}
}

/* --- Kontaktformular: Sicherheitsfrage und Datenschutzhinweis --- */
.form-captcha .captcha-question{font-weight:600; color:var(--green-deep); margin-left:.4em}
.form-privacy{grid-column:1/-1; margin:.2rem 0 0; font-size:.82rem; line-height:1.5; color:var(--muted,#6b6b6b)}
.form-privacy a{color:inherit; text-decoration:underline}

/* --- Kennzeichnung von Beispielrechnungen --- */
.example-badge{display:inline-flex; align-items:center; gap:.5em; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--green-deep); border:1px solid var(--green); border-radius:999px; padding:.35em 1em; margin:0 0 14px}
.trust .example-badge{display:flex; width:max-content; margin-left:auto; margin-right:auto}
.section .example-badge{margin-top:22px}