/* klimpr.de Styles
   Farben aus den klimpr-Markenassets (Stand 09.09.2026):
   Akzentgrün #31C48D, Dunkel #101418, Hell #E9EDF2, Grün für Text auf Weiß #17845A */

/* Self-hosted fonts (SIL OFL 1.1), no external requests */
@font-face{font-family:"Bricolage Grotesque";src:url("fonts/bricolage-grotesque-var.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("fonts/figtree-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Figtree";src:url("fonts/figtree-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Figtree";src:url("fonts/figtree-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Figtree";src:url("fonts/figtree-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/jetbrains-mono-500.woff2") format("woff2");font-weight:500;font-display:swap}
:root{
  --ink:#101418; --paper:#F6F8FA; --panel:#E9EDF2; --card:#FFFFFF;
  --green:#31C48D; --green-ink:#17845A; --muted:#55606B; --line:#D6DDE4;
  --band:#101418; --band-ink:#E9EDF2; --band-muted:#A3AEB9;
  --display:"Bricolage Grotesque", "Segoe UI", Arial, sans-serif;
  --body:"Figtree", "Segoe UI", Arial, sans-serif;
  --mono:"JetBrains Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ink:#E9EDF2; --paper:#0D1115; --panel:#161C22; --card:#1A2128;
    --green-ink:#31C48D; --muted:#9AA6B2; --line:#28323C;
    --band:#070A0D;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ink:#E9EDF2; --paper:#0D1115; --panel:#161C22; --card:#1A2128;
  --green-ink:#31C48D; --muted:#9AA6B2; --line:#28323C;
  --band:#070A0D;
}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;margin:0}
.wrap{max-width:1140px;margin:0 auto;padding-inline:24px}
h1,h2,h3{font-family:var(--display);line-height:1.1;text-wrap:balance;margin:0}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-.01em}
h3{font-size:1.2rem;font-weight:600}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green-ink)}
.lead{color:var(--muted);font-size:1.12rem;max-width:62ch}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.4rem;border-radius:10px;font-weight:700;text-decoration:none;border:2px solid transparent;font-size:1rem}
.btn-primary{background:var(--green);color:#101418}
.btn-ghost{border-color:currentColor}

/* Header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:14px}
.logo{display:block;line-height:0}
.logo img{display:block;height:34px;width:auto}
.nav ul{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0;font-weight:500}
.nav ul a{text-decoration:none}
.nav ul a:hover{color:var(--green-ink)}
.nav .btn{padding:.6rem 1rem;font-size:.92rem}
@media (max-width:860px){.nav ul{display:none}}

/* Hero */
.hero{padding-block:72px 64px}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.5rem,5.6vw,4.3rem);font-weight:800;letter-spacing:-.025em;margin:.6rem 0 1.2rem}
.hero h1 span{color:var(--green-ink)}
.pdf-link{margin-top:1.1rem;font-size:.95rem;display:flex;flex-wrap:wrap;gap:.2rem .6rem;align-items:baseline}
.pdf-link a{color:var(--green-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.pdf-link a::before{content:"";display:inline-block;width:.85em;height:1em;margin-right:.4em;vertical-align:-.12em;border:2px solid currentColor;border-radius:2px;box-sizing:border-box}
.pdf-link span{color:var(--muted);font-size:.85rem}
.inline-link{color:var(--green-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.hero .actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.hero-visual{position:relative}
.hero-img{display:block;width:100%;height:auto;aspect-ratio:1515/1038;object-fit:cover;border-radius:14px;box-shadow:0 18px 50px rgba(16,20,24,.18)}
.bon{position:absolute;right:-20px;bottom:-44px;width:230px;background:#FFFFFF;color:#101418;border-radius:6px 6px 0 0;padding:14px 16px 18px;font-family:var(--mono);font-size:.74rem;box-shadow:0 14px 40px rgba(16,20,24,.22);
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat, radial-gradient(circle 5px at 50% 100%,transparent 98%,#000) bottom/12px 8px repeat-x;
          mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat, radial-gradient(circle 5px at 50% 100%,transparent 98%,#000) bottom/12px 8px repeat-x}
.bon .head{text-align:center;font-weight:700;border-bottom:1px dashed #9aa;padding-bottom:6px;margin-bottom:6px}
.bon .row{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums}
.bon .sum{border-top:1px dashed #9aa;margin-top:6px;padding-top:6px;font-weight:700}
.bon .hint{margin-top:8px;background:#E7F8F0;color:#17845A;padding:4px 6px;border-radius:4px;text-align:center;font-weight:700}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr;gap:64px}.bon{right:12px;bottom:-40px;width:210px}}

/* Vorstand questions */
.questions{background:var(--band);color:var(--band-ink);padding-block:72px}
.questions .eyebrow{color:var(--green)}
.questions h2{margin:.5rem 0 2.4rem;max-width:22ch}
.q-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:#2A333C;border-radius:14px;overflow:hidden}
.q{background:var(--band);padding:28px 24px;display:flex;flex-direction:column;gap:.8rem}
.q h3{font-size:1.18rem;color:#FFFFFF}
.q p{color:var(--band-muted);font-size:.98rem}
.q .mark{font-family:var(--display);font-size:2.4rem;line-height:1;color:var(--green);font-weight:800}
@media (max-width:980px){.q-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.q-grid{grid-template-columns:1fr}}

/* Benefits */
section.block{padding-block:88px}
.intro{display:flex;flex-direction:column;gap:.8rem;margin-bottom:56px}
.benefit{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding-block:40px;border-top:1px solid var(--line)}
.benefit-photo img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 14px 40px rgba(16,20,24,.14)}
.benefit:nth-of-type(even) .benefit-photo,.benefit:nth-of-type(even) .shot{order:-1}
.benefit:nth-of-type(even):has(.shot){grid-template-columns:1.2fr .8fr}
@media (max-width:860px){.benefit:nth-of-type(even) .benefit-photo,.benefit:nth-of-type(even) .shot{order:0}}
.shot{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:0 14px 40px rgba(16,20,24,.14);background:#fff}
.shot img{display:block;width:100%;height:auto}
.benefit:has(.shot){grid-template-columns:.8fr 1.2fr;gap:48px}
.shot:hover{box-shadow:0 18px 50px rgba(16,20,24,.2)}
.benefit .text{display:flex;flex-direction:column;gap:1rem}
.benefit h3{font-size:clamp(1.5rem,2.4vw,1.9rem);font-weight:800}
.benefit p{color:var(--muted);max-width:56ch}
.note-box{border-left:3px solid var(--green);background:var(--panel);padding:.8rem 1rem;border-radius:0 8px 8px 0;font-size:.95rem}
ul.ticks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
ul.ticks li{padding-left:1.7rem;position:relative}
ul.ticks li::before{content:"";position:absolute;left:0;top:.45em;width:.95rem;height:.55rem;border-left:3px solid var(--green);border-bottom:3px solid var(--green);transform:rotate(-45deg)}
@media (max-width:860px){.benefit,.benefit:has(.shot),.benefit:nth-of-type(even):has(.shot){grid-template-columns:1fr;gap:28px}}

/* Year */
.year{background:var(--panel)}
.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.phase{background:var(--card);border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:1rem;border-top:5px solid var(--green)}
.phase .when{font-family:var(--mono);font-size:.75rem;color:var(--green-ink);letter-spacing:.08em;text-transform:uppercase}
.phase h3{font-size:1.4rem;font-weight:800}
.phase p{color:var(--muted);font-size:.98rem}
.phase-shot{margin-top:auto;position:relative;display:block;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.phase-shot img{display:block;width:100%;height:auto}
.phase-shot .zoom{position:absolute;right:8px;bottom:8px;background:rgba(16,20,24,.78);color:#fff;font-size:.75rem;font-weight:600;padding:.2rem .55rem;border-radius:999px}
.phase-phone{aspect-ratio:16/10;background:linear-gradient(160deg,var(--panel),color-mix(in srgb,var(--green) 22%,var(--panel)));}
.phase-phone .phone{position:absolute;left:50%;top:9%;width:44%;transform:translateX(-50%);border:6px solid #101418;border-bottom:0;border-radius:22px 22px 0 0;overflow:hidden;background:#101418;box-shadow:0 14px 30px rgba(16,20,24,.25)}
.phase-phone .phone img{border-radius:16px 16px 0 0}
.phase-shot:hover .zoom,.phase-shot:focus-visible .zoom{background:var(--green);color:#101418}
@media (max-width:860px){.phases{grid-template-columns:1fr}}

/* Modules */
.mod-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:24px}
.mod{border-radius:14px;padding:32px;display:flex;flex-direction:column;gap:1.2rem}
.mod.base{background:var(--band);color:var(--band-ink)}
.mod.base .eyebrow{color:var(--green)}
.mod.add{background:var(--card);border:1px solid var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:.45rem .8rem;border-radius:999px;font-weight:600;font-size:.92rem;border:1.5px solid var(--line);background:var(--paper)}
.mod.base .chip{background:transparent;border-color:#39434D;color:var(--band-ink)}
.mod-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
.fact{padding:20px;border-left:3px solid var(--green);background:var(--card)}
.fact b{display:block;font-family:var(--display);font-size:1.1rem;margin-bottom:.3rem}
.fact p{color:var(--muted);font-size:.95rem}
@media (max-width:980px){.mod-facts{grid-template-columns:1fr 1fr}}
@media (max-width:860px){.mod-grid{grid-template-columns:1fr}}
@media (max-width:560px){.mod-facts{grid-template-columns:1fr}}

/* Features */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
details.feat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:0}
details.feat summary{cursor:pointer;list-style:none;padding:20px 22px;display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
details.feat summary::-webkit-details-marker{display:none}
details.feat summary h3{font-size:1.08rem}
details.feat summary small{display:block;color:var(--muted);font-size:.85rem;margin-top:.25rem;font-family:var(--body)}
details.feat summary::after{content:"+";font-family:var(--display);font-size:1.5rem;line-height:1;color:var(--green-ink)}
details.feat[open] summary::after{content:"–"}
details.feat ul{margin:0;padding:0 22px 20px 40px;color:var(--muted);font-size:.94rem;display:flex;flex-direction:column;gap:.35rem}
.tag{display:inline-block;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--green-ink);border:1px solid currentColor;border-radius:4px;padding:.05rem .35rem;margin-top:.45rem}
@media (max-width:980px){.feat-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.feat-grid{grid-template-columns:1fr}}

/* Privacy strip */
.privacy{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px 32px}
.privacy .seal{width:84px;height:84px;border-radius:50%;border:3px solid var(--green);display:grid;place-items:center;font-family:var(--mono);font-size:.62rem;text-align:center;line-height:1.2;color:var(--green-ink);font-weight:500}
@media (max-width:620px){.privacy{grid-template-columns:1fr}}

/* Contact */
.contact{background:var(--band);color:var(--band-ink);padding-block:88px}
.contact .eyebrow{color:var(--green)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.contact p.lead{color:var(--band-muted)}
.contact-person{display:flex;align-items:center;gap:16px;margin:0}
.contact-person img{display:block;width:112px;height:112px;border-radius:50%;object-fit:cover;border:3px solid var(--green)}
.contact-person figcaption{color:var(--band-muted);font-size:.95rem;line-height:1.4}
.contact-person strong{color:var(--band-ink);font-size:1.05rem}
form.c{display:grid;gap:14px;background:#161C22;padding:28px;border-radius:14px}
form.c label{font-size:.85rem;font-weight:600;display:flex;flex-direction:column;gap:6px;color:var(--band-ink)}
form.c input,form.c textarea,form.c select{font:inherit;font-size:.98rem;padding:.7rem .8rem;border-radius:8px;border:1px solid #39434D;background:#0D1115;color:#E9EDF2}
form.c .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sent{color:var(--green);font-weight:600}
@media (max-width:860px){.contact-grid,form.c .two{grid-template-columns:1fr}}

/* Hero stamp */
.hero-stamp{position:absolute;left:-30px;top:-30px;z-index:2;width:118px;height:118px;border-radius:50%;background:var(--green);color:#101418;display:grid;place-items:center;text-align:center;text-decoration:none;font-family:var(--display);font-weight:800;font-size:1.02rem;line-height:1.02;transform:rotate(-10deg);box-shadow:0 10px 30px rgba(16,20,24,.25);outline:3px solid var(--green);outline-offset:4px}
.hero-stamp:hover{text-decoration:none}
@media (max-width:860px){.hero-stamp{left:8px;top:-44px;width:100px;height:100px;font-size:.9rem}}
/* Guarantee */
.guarantee{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;margin-top:24px;padding:28px 32px;border-radius:14px;background:var(--card);border:2px solid var(--green)}
.guarantee .stamp{width:104px;height:104px;flex:none;outline:3px solid var(--green);outline-offset:4px;border-radius:50%;background:var(--green);color:#101418;display:grid;place-items:center;text-align:center;font-family:var(--display);font-weight:800;font-size:.9rem;line-height:1.05;transform:rotate(-8deg)}
.guarantee h3{font-size:1.4rem;font-weight:800;margin-bottom:.4rem}
.guarantee p{color:var(--muted)}
.guarantee .small{font-size:.82rem;margin-top:.5rem}
.terms{grid-column:1/-1;border-top:1px solid var(--line);padding-top:4px}
.terms summary{cursor:pointer;font-weight:700;color:var(--green-ink);padding:12px 0}
.terms ol{margin:0;padding-left:1.3rem;color:var(--muted);display:flex;flex-direction:column;gap:.5rem;max-width:70ch;font-size:.95rem}
.terms p{margin-top:.8rem;font-size:.95rem}
@media (max-width:760px){.guarantee{grid-template-columns:1fr}}
/* FAQ */
.faq{display:flex;flex-direction:column;max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;display:flex;justify-content:space-between;gap:1rem;font-weight:700;font-size:1.08rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:1.5rem;line-height:1;color:var(--green-ink)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 22px;color:var(--muted);max-width:66ch}
.mailline{font-family:var(--mono);font-size:1rem;color:var(--green)}
footer{padding-block:36px;border-top:1px solid var(--line);font-size:.92rem;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem}
footer nav{display:flex;gap:1.4rem}
@media (prefers-reduced-motion:no-preference){.btn{transition:transform .15s}.btn:hover{transform:translateY(-1px)}}

/* Base additions for the production site */
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
[hidden]{display:none!important}
img{max-width:100%;height:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--green);color:#101418;padding:.5rem 1rem;border-radius:8px;z-index:100}
.skip:focus{left:16px}
.nav ul a[aria-current="page"]{color:var(--green-ink);font-weight:700}
footer nav a,footer button,input,textarea,select{font-family:inherit}
button.linkish{color:inherit}
button.linkish{background:none;border:0;padding:0;font:inherit;cursor:pointer;text-decoration:underline}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
form.c .hint{font-size:.82rem;color:var(--band-muted)}
form.c .hint a{color:var(--green)}
.form-status{font-weight:600}
.form-status.ok{color:var(--green)}
.form-status.err{color:#FF8A7A}
.mailline a{color:inherit}

/* Legal pages */
.legal{padding-block:64px 88px}
.legal .wrap{max-width:820px}
.legal h1{font-size:clamp(2.2rem,4.4vw,3.2rem);font-weight:800;margin-bottom:1.6rem}
.legal h2{font-size:1.35rem;margin:2.2rem 0 .6rem}
.legal h3{font-size:1.08rem;margin:1.4rem 0 .4rem}
.legal p{color:var(--muted);margin-bottom:.8rem;max-width:70ch}
.legal a{color:var(--green-ink)}