/* Hummel Exklusiv — Energieberatung
   Farbwelt: Tannengrün / Salbei / warmes Grau
   Schrift: Fraunces (Headlines) + IBM Plex Sans (Text) */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --green-deep:   #1E3B2C;
  --green-mid:    #4F7A5E;
  --green-soft:   #E4ECE4;
  --green-line:   #C7D6C9;
  --grey-ink:     #2E332F;
  --grey-mid:     #656F67;
  --grey-line:    #DEDFDA;
  --paper:        #FAFAF7;
  --white:        #FFFFFF;
  --max: 1080px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'IBM Plex Sans', sans-serif;
  color:var(--grey-ink);
  background:var(--paper);
  line-height:1.6;
  font-size:17px;
}
h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:600;
  color:var(--green-deep);
  line-height:1.15;
  margin:0 0 .5em;
}
h1{ font-size: clamp(2rem, 4vw, 3.1rem); font-weight:500; }
h2{ font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
h3{ font-size:1.2rem; }
p{ margin:0 0 1em; max-width:62ch; color:var(--grey-mid); }
a{ color:var(--green-mid); }
img{ max-width:100%; display:block; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }

:focus-visible{ outline:3px solid var(--green-mid); outline-offset:2px; }

/* ---------- Header / Nav ---------- */
.site-header{
  border-bottom:1px solid var(--grey-line);
  background:var(--white);
  position:sticky; top:0; z-index:20;
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:16px; padding-bottom:16px; gap:24px; flex-wrap:wrap;
}
.brand{
  display:flex; align-items:baseline; gap:10px;
  text-decoration:none; color:var(--green-deep);
}
.brand-mark{ font-family:'Fraunces', serif; font-weight:600; font-size:1.4rem; letter-spacing:.01em; }
.brand-sub{ font-size:.78rem; color:var(--grey-mid); font-family:'IBM Plex Sans'; }

.main-nav{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.main-nav a{
  text-decoration:none; color:var(--grey-ink); font-size:.97rem;
  padding-bottom:4px; border-bottom:2px solid transparent;
}
.main-nav a:hover, .main-nav a.active{ border-bottom-color:var(--green-mid); color:var(--green-deep); }

.nav-extra{ display:flex; align-items:center; gap:16px; }
.phone-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--green-deep); color:var(--white);
  padding:9px 16px; border-radius:2px; text-decoration:none;
  font-size:.92rem; white-space:nowrap;
}
.phone-pill:hover{ background:var(--green-mid); }

.lang-switch{ display:flex; gap:8px; font-size:.85rem; }
.lang-switch a{
  text-decoration:none; color:var(--grey-mid); padding:2px 6px;
  border:1px solid var(--grey-line);
}
.lang-switch a.active, .lang-switch a:hover{ color:var(--green-deep); border-color:var(--green-mid); }

/* ---------- Hero ---------- */
.hero{
  padding:64px 0 56px;
  border-bottom:1px solid var(--grey-line);
}
.hero .wrap{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:56px; align-items:center;
}
.hero-eyebrow{ color:var(--green-mid); font-size:.95rem; margin-bottom:10px; }
.hero p.lead{ font-size:1.1rem; max-width:46ch; }
.hero-actions{ display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; }
.hero-photo{ border:1px solid var(--grey-line); }
.hero-photo img{ width:100%; height:auto; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; text-decoration:none; padding:13px 26px;
  font-size:.98rem; border-radius:2px; border:1px solid transparent;
  cursor:pointer; font-family:'IBM Plex Sans'; font-weight:500;
}
.btn-primary{ background:var(--green-deep); color:var(--white); }
.btn-primary:hover{ background:var(--green-mid); }
.btn-secondary{ background:transparent; color:var(--green-deep); border-color:var(--green-deep); }
.btn-secondary:hover{ background:var(--green-soft); }

/* ---------- Sections ---------- */
section{ padding:60px 0; }
.section-alt{ background:var(--green-soft); }
.section-head{ max-width:56ch; margin-bottom:36px; }

/* ---------- Services grid ---------- */
.services{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:0;
  border-top:1px solid var(--grey-line);
}
.service{
  padding:28px 26px; border-bottom:1px solid var(--grey-line);
  border-left:3px solid transparent;
}
.service:nth-child(odd){ border-right:1px solid var(--grey-line); }
.service:hover{ border-left-color:var(--green-mid); background:var(--white); }
.service .icon{ width:34px; height:34px; margin-bottom:14px; color:var(--green-mid); }
.service h3{ margin-bottom:.35em; }
.service p{ margin:0; font-size:.96rem; }

/* ---------- Trust strip ---------- */
.trust-strip{
  display:flex; flex-wrap:wrap; gap:36px; padding:30px 0;
  border-top:1px solid var(--grey-line); border-bottom:1px solid var(--grey-line);
}
.trust-item{ display:flex; align-items:center; gap:12px; max-width:280px; }
.trust-item .icon{ width:26px; height:26px; color:var(--green-mid); flex-shrink:0; }
.trust-item span{ font-size:.92rem; color:var(--grey-ink); }

/* ---------- About / photo split ---------- */
.split{
  display:grid; grid-template-columns: .85fr 1.15fr; gap:52px; align-items:center;
}
.split img{ border:1px solid var(--grey-line); }
.split.reverse{ grid-template-columns: 1.15fr .85fr; }
.split.reverse .split-media{ order:2; }

/* ---------- Contact / Landing form ---------- */
.form-card{
  background:var(--white); border:1px solid var(--grey-line);
  padding:36px; max-width:640px;
}
.form-row{ margin-bottom:20px; }
.form-row label{ display:block; font-size:.9rem; color:var(--grey-ink); margin-bottom:6px; }
.form-row .hint{ color:var(--grey-mid); font-weight:400; font-size:.85rem; }
.form-row input[type=text], .form-row input[type=tel], .form-row input[type=email], .form-row input[type=number]{
  width:100%; padding:11px 12px; border:1px solid var(--grey-line);
  font-family:'IBM Plex Sans'; font-size:1rem; background:var(--paper);
}
.form-row input:focus{ background:var(--white); }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }

.services-picker{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; margin-bottom:8px;
}
.service-check{
  border:1px solid var(--grey-line); padding:14px 16px;
  display:flex; align-items:center; gap:10px; cursor:pointer;
  background:var(--paper);
}
.service-check input{ width:17px; height:17px; accent-color:var(--green-deep); }
.service-check.checked{ border-color:var(--green-mid); background:var(--green-soft); }
.service-check label{ cursor:pointer; font-size:.97rem; margin:0; }

.consumption-field{ display:none; margin-top:10px; }
.consumption-field.show{ display:block; }

.required-note{ font-size:.83rem; color:var(--grey-mid); margin:18px 0; }
.form-msg{ padding:14px 16px; margin-bottom:20px; font-size:.92rem; display:none; }
.form-msg.show{ display:block; }
.form-msg.ok{ background:var(--green-soft); color:var(--green-deep); border:1px solid var(--green-line); }
.form-msg.err{ background:#F6E7E4; color:#7A3324; border:1px solid #E3C4BC; }

/* ---------- Footer ---------- */
.site-footer{
  background:var(--green-deep); color:#D7E1D9; padding:44px 0 30px; margin-top:40px;
}
.site-footer .wrap{ display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap:32px; }
.site-footer h4{ color:var(--white); font-family:'IBM Plex Sans'; font-size:.92rem; margin:0 0 12px; font-weight:600;}
.site-footer p, .site-footer a{ color:#B9CABF; font-size:.92rem; text-decoration:none; margin:0 0 6px; }
.site-footer a:hover{ color:var(--white); }
.footer-bottom{
  max-width:var(--max); margin:30px auto 0; padding:18px 24px 0; border-top:1px solid #345043;
  font-size:.82rem; color:#8FA695; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-photo{ order:-1; }
  .split, .split.reverse{ grid-template-columns:1fr; }
  .split.reverse .split-media{ order:0; }
  .services{ grid-template-columns:1fr; }
  .service:nth-child(odd){ border-right:none; }
  .two-col, .services-picker{ grid-template-columns:1fr; }
  .site-footer .wrap{ grid-template-columns:1fr; }
  .main-nav{ order:3; width:100%; justify-content:flex-start; gap:18px; }
}