/* Hummel Exklusiv — Energieberatung, Einseiter
   Bewusst OHNE externe Font-Ladung (Google Fonts etc.) — vermeidet
   Drittanbieter-Datenübertragung beim Seitenaufruf und damit die Pflicht
   zu einem Cookie-/Consent-Banner allein wegen Schriftarten. */

: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;
  --whatsapp:     #25D366;
  --max: 1080px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color:var(--grey-ink);
  background:var(--paper);
  line-height:1.6;
  font-size:17px;
}
h1,h2,h3{
  font-family: Georgia, "Times New Roman", serif;
  font-weight:600;
  color:var(--green-deep);
  line-height:1.15;
  margin:0 0 .5em;
}
h1{ font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight:500; letter-spacing:-.01em; }
h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); }
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 ---------- */
.site-header{
  border-bottom:1px solid var(--grey-line);
  background:var(--white);
  position:sticky; top:0; z-index:30;
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:16px; padding-bottom:16px; gap:20px; flex-wrap:wrap;
}
.brand{ display:flex; align-items:baseline; gap:10px; text-decoration:none; color:var(--green-deep); }
.brand-mark{ font-family:Georgia, serif; font-weight:600; font-size:1.4rem; }
.brand-sub{ font-size:.78rem; color:var(--grey-mid); }

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

.nav-extra{ display:flex; align-items:center; gap:14px; }
.phone-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--green-deep); color:var(--white);
  padding:9px 18px; border-radius:100px; text-decoration:none;
  font-size:.9rem; 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:3px 8px;
  border:1px solid var(--grey-line); border-radius:6px;
}
.lang-switch a:hover{ color:var(--green-deep); border-color:var(--green-mid); }

/* ---------- Hero ---------- */
.hero{ padding:60px 0 50px; position:relative; overflow:hidden; }
.hero::before{
  content:""; position:absolute; top:-120px; right:-160px;
  width:560px; height:560px;
  background:radial-gradient(circle, rgba(79,122,94,0.16) 0%, rgba(79,122,94,0) 70%);
  border-radius:50%; pointer-events:none;
}
.hero .wrap{ display:grid; grid-template-columns: 1.1fr .9fr; gap:50px; align-items:center; }
.hero-eyebrow{ color:var(--green-mid); font-size:.95rem; margin-bottom:10px; }
.hero p.lead{ font-size:1.08rem; max-width:46ch; }
.hero-actions{ display:flex; gap:14px; margin-top:24px; flex-wrap:wrap; }
.hero-photo{ border-radius:22px; overflow:hidden; box-shadow:0 24px 48px -20px rgba(30,59,44,.35); }
.hero-photo img{ width:100%; height:auto; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; padding:14px 26px;
  font-size:.97rem; border-radius:100px; border:1px solid transparent;
  cursor:pointer; font-weight:500; transition:transform .15s ease;
}
.btn-primary{ background:var(--green-deep); color:var(--white); box-shadow:0 10px 24px -10px rgba(30,59,44,.55); }
.btn-primary:hover{ background:var(--green-mid); transform:translateY(-1px); }
.btn-secondary{ background:transparent; color:var(--green-deep); border-color:var(--green-deep); }
.btn-secondary:hover{ background:var(--green-soft); }
.btn-whatsapp{ background:var(--whatsapp); color:var(--white); }
.btn-whatsapp:hover{ background:#1EBE59; transform:translateY(-1px); }

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

/* ---------- Services (bento) ---------- */
.services{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.service{
  padding:28px 26px; border-radius:20px; background:var(--white);
  border:1px solid var(--grey-line);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.service:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -22px rgba(30,59,44,.35); border-color:var(--green-line); }
.service .icon{ width:32px; height:32px; margin-bottom:12px; color:var(--green-mid); }
.service p{ margin:0; font-size:.96rem; }

/* ---------- Trust strip ---------- */
.trust-strip{ display:flex; flex-wrap:wrap; gap:12px; padding:26px 0; }
.trust-item{ display:flex; align-items:center; gap:10px; max-width:300px; background:var(--green-soft); border-radius:100px; padding:11px 20px 11px 15px; }
.trust-item .icon{ width:22px; height:22px; color:var(--green-mid); flex-shrink:0; }
.trust-item span{ font-size:.88rem; color:var(--green-deep); }

/* ---------- About split ---------- */
.split{ display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:center; }
.split img{ border-radius:20px; box-shadow:0 24px 48px -24px rgba(30,59,44,.32); }

/* ---------- Contact form ---------- */
.form-card{
  background:var(--white); border:1px solid var(--grey-line); border-radius:20px;
  box-shadow:0 24px 48px -28px rgba(30,59,44,.3); padding:34px; max-width:640px;
}
.form-row{ margin-bottom:18px; }
.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:.84rem; }
.form-row input[type=text], .form-row input[type=tel], .form-row input[type=email], .form-row input[type=number]{
  width:100%; padding:12px 14px; border:1px solid var(--grey-line); border-radius:10px;
  font-size:1rem; background:var(--paper);
}
.form-row input:focus{ background:var(--white); border-color:var(--green-mid); outline:none; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.services-picker{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:8px; }
.service-check{
  border:1px solid var(--grey-line); border-radius:14px; padding:13px 15px;
  display:flex; align-items:center; gap:10px; cursor:pointer; background:var(--paper);
  transition:border-color .15s ease, background .15s ease;
}
.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:.96rem; margin:0; }

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

/* DSGVO-Einwilligung */
.consent-row{
  display:flex; align-items:flex-start; gap:10px; margin:20px 0;
  background:var(--paper); border:1px solid var(--grey-line); border-radius:12px; padding:14px 16px;
}
.consent-row input{ margin-top:3px; width:17px; height:17px; accent-color:var(--green-deep); flex-shrink:0; }
.consent-row label{ font-size:.87rem; color:var(--grey-mid); line-height:1.5; }
.consent-row a{ color:var(--green-deep); }

.required-note{ font-size:.82rem; color:var(--grey-mid); margin:14px 0; }
.form-msg{ padding:14px 16px; margin-bottom:18px; font-size:.92rem; border-radius:10px; 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 26px; margin-top:20px; }
.site-footer .wrap{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:32px; }
.site-footer h4{ color:var(--white); 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:26px auto 0; padding:16px 24px 0; border-top:1px solid #345043;
  font-size:.82rem; color:#8FA695; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}

/* ---------- WhatsApp floating button ---------- */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:40;
  width:58px; height:58px; border-radius:50%;
  background:var(--whatsapp); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px -8px rgba(0,0,0,.45);
  text-decoration:none;
  transition:transform .15s ease;
}
.wa-float:hover{ transform:scale(1.06); }
.wa-float svg{ width:28px; height:28px; }

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-photo{ order:-1; }
  .split{ grid-template-columns:1fr; }
  .services{ grid-template-columns:1fr; }
  .two-col, .services-picker{ grid-template-columns:1fr; }
  .site-footer .wrap{ grid-template-columns:1fr; }
  .main-nav{ order:3; width:100%; gap:16px; }
}