/* KVP Energie Service — style.css
   Palette abgeleitet aus dem Logo (Marken-Navy + Grün-Türkis-Blau-Verlauf) */

:root{
  --bg:#F5F6F1;
  --bg-alt:#EAEEE8;
  --ink:#182028;
  --ink-soft:#525E5A;
  --navy:#153531;
  --navy-deep:#0F2622;
  --accent:#AD6631;
  --accent-soft:#C98950;
  --sky:#1F4C46;
  --line:#D7DACD;
  --white:#FFFFFF;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'IBM Plex Sans',sans-serif;
  font-size:16px;
  line-height:1.55;
}
h1,h2,h3{
  font-family:'Fraunces',serif;
  font-weight:500;
  color:var(--navy);
  margin:0;
}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px;}
@media (max-width:640px){.wrap{padding:0 20px;}}

/* NAV */
header{
  position:sticky;top:0;z-index:20;
  background:rgba(245,246,241,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:20px;}
.logo{display:flex;align-items:center;}
.logo img{height:46px;width:auto;}
.navlinks{display:flex;gap:32px;font-size:15px;align-items:center;}
.navlinks a{text-decoration:none;color:var(--ink-soft);border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .15s,color .15s;}
.navlinks a:hover,.navlinks a.active{border-color:var(--accent);color:var(--ink);}
.navcta{background:var(--navy);color:var(--white)!important;padding:10px 18px;border-radius:3px;font-size:14px;text-decoration:none;border-bottom:none!important;}
.navcta:hover{background:var(--navy-deep);}
.navtoggle{display:none;background:none;border:none;cursor:pointer;padding:6px;}
.navtoggle span,.navtoggle span::before,.navtoggle span::after{content:"";display:block;width:22px;height:2px;background:var(--navy);position:relative;transition:.2s;}
.navtoggle span::before{position:absolute;top:-7px;}
.navtoggle span::after{position:absolute;top:7px;}
@media (max-width:760px){
  .navlinks{
    position:fixed;top:73px;left:0;right:0;
    background:var(--bg);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:flex-start;gap:0;
    padding:8px 20px 18px;
    display:none;
  }
  .navlinks.open{display:flex;}
  .navlinks a{width:100%;padding:12px 0;border-bottom:1px solid var(--line);}
  .navlinks a:last-child{border-bottom:none;}
  .navcta{width:100%;text-align:center;margin-top:6px;}
  .navtoggle{display:block;}
}

/* HERO (Startseite) */
.hero{
  position:relative;
  background:
    linear-gradient(rgba(245,246,241,0.86),rgba(245,246,241,0.97)),
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(11,58,102,0.06) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(11,58,102,0.06) 40px);
  padding:88px 0 72px;
  overflow:hidden;
}
.hero-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:center;}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr;}}
.hero h1{font-size:44px;line-height:1.12;letter-spacing:-0.01em;max-width:16ch;}
@media (max-width:640px){.hero h1{font-size:32px;}}
.hero p.lede{font-size:18px;color:var(--ink-soft);margin:20px 0 28px;max-width:42ch;}
.btn-primary{
  display:inline-block;background:var(--accent);color:var(--white);
  padding:14px 26px;border-radius:3px;text-decoration:none;font-size:15px;font-weight:500;
  border:1px solid var(--accent);
}
.btn-primary:hover{background:var(--accent-soft);border-color:var(--accent-soft);}
.hero-photo{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;
  border:1px solid var(--line);
}

/* SIMPLE PAGE HERO (Unterseiten) */
.page-hero{
  background:
    linear-gradient(rgba(245,246,241,0.9),rgba(245,246,241,0.97)),
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(11,58,102,0.06) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(11,58,102,0.06) 40px);
  padding:56px 0 48px;border-bottom:1px solid var(--line);
}
.page-hero h1{font-size:34px;max-width:24ch;}
.page-hero p.lede{font-size:16.5px;color:var(--ink-soft);margin:14px 0 0;max-width:56ch;}

/* PROBLEM */
.problem{padding:72px 0;border-bottom:1px solid var(--line);}
.problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
@media (max-width:860px){.problem-grid{grid-template-columns:1fr;}}
.problem h2{font-size:28px;margin-bottom:20px;max-width:16ch;}
.qlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.qlist li{padding-left:20px;position:relative;color:var(--ink-soft);font-size:16px;}
.qlist li::before{content:"–";position:absolute;left:0;color:var(--accent);}
.approach{background:var(--white);border:1px solid var(--line);border-radius:4px;padding:28px 30px;}
.approach p{color:var(--ink-soft);margin:0 0 16px;}
.approach ul{margin:0;padding-left:18px;color:var(--ink);}
.approach li{margin-bottom:6px;}

/* PAKETE */
.pakete{padding:80px 0;}
.section-head{max-width:52ch;margin-bottom:44px;}
.section-head h2{font-size:30px;margin-bottom:12px;}
.section-head p{color:var(--ink-soft);font-size:16px;}
.paket-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;}
@media (max-width:860px){.paket-grid{grid-template-columns:1fr;}}
.paket{
  background:var(--white);border:1px solid var(--line);
  padding:30px 26px;display:flex;flex-direction:column;position:relative;
}
.badge{
  position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:7px;
  background:var(--accent);color:var(--white);
  font-size:15px;font-weight:600;padding:8px 18px 8px 14px;
  border-radius:3px;box-shadow:0 4px 10px rgba(173,102,49,0.35);
  white-space:nowrap;z-index:2;
}
.badge svg{width:16px;height:16px;flex-shrink:0;}
.paket h3{font-size:20px;margin-bottom:6px;}
.paket .sub{color:var(--ink-soft);font-size:14.5px;margin-bottom:18px;}
.paket .price{font-family:'Fraunces',serif;font-size:26px;color:var(--navy);margin:6px 0 18px;}
.paket .price span{font-size:14px;font-family:'IBM Plex Sans',sans-serif;color:var(--ink-soft);}
.paket ul{list-style:none;margin:0 0 20px;padding:0;flex-grow:1;}
.paket ul li{padding-left:22px;position:relative;font-size:14.5px;margin-bottom:9px;color:var(--ink);}
.paket ul li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:600;}
.paket .ergebnis{
  background:var(--bg-alt);border-radius:3px;padding:12px 14px;font-size:13.5px;
  color:var(--ink-soft);margin-bottom:18px;
}
.paket .ergebnis strong{color:var(--ink);}
.paket-cta{
  text-align:center;padding:11px;border-radius:3px;text-decoration:none;font-size:14.5px;font-weight:500;
  border:1px solid var(--navy);color:var(--navy);
}
.paket-cta:hover{background:var(--navy);color:var(--white);}
.price-note{font-size:13.5px;color:var(--ink-soft);margin-top:20px;}

/* ZUSATZ */
.zusatz{background:var(--bg-alt);padding:72px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.zusatz-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
@media (max-width:860px){.zusatz-grid{grid-template-columns:1fr;}}
.zcard{background:var(--white);border:1px solid var(--line);border-radius:4px;padding:28px;}
.zcard .tag{font-size:13px;color:var(--accent);margin-bottom:8px;font-weight:600;}
.zcard h3{font-size:19px;margin-bottom:10px;}
.zcard p{color:var(--ink-soft);font-size:14.5px;margin-bottom:14px;}
.zcard ul{margin:0 0 14px;padding-left:18px;font-size:14px;color:var(--ink);}
.zcard li{margin-bottom:5px;}
.zcard .price{font-family:'Fraunces',serif;color:var(--navy);font-size:19px;margin-bottom:10px;}
.zcard .hint{font-size:13px;color:var(--ink-soft);margin-bottom:14px;}
.link-cta{color:var(--navy);text-decoration:underline;font-size:14.5px;}

/* VERTRAUEN */
.vertrauen{padding:76px 0;}
.vertrauen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:36px;}
@media (max-width:860px){.vertrauen-grid{grid-template-columns:1fr;}}
.vcard h3{font-size:18px;margin-bottom:8px;}
.vcard p{color:var(--ink-soft);font-size:14.5px;}

/* PROZESS */
.prozess{background:var(--navy);color:var(--white);padding:76px 0;}
.prozess h2{color:var(--white);font-size:28px;margin-bottom:36px;}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;counter-reset:step;}
@media (max-width:860px){.steps{grid-template-columns:1fr;}}
.step{border-top:1px solid rgba(255,255,255,0.25);padding-top:16px;}
.step .num{font-family:'Fraunces',serif;font-size:15px;color:var(--accent-soft);margin-bottom:10px;}
.step h3{color:var(--white);font-size:18px;margin-bottom:8px;}
.step p{color:rgba(255,255,255,0.75);font-size:14.5px;margin:0;}

/* FAQ */
.faq{padding:76px 0;max-width:760px;margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);padding:18px 0;}
.faq-item summary{
  cursor:pointer;font-family:'Fraunces',serif;font-size:17px;color:var(--navy);
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";color:var(--accent);font-size:20px;font-family:'IBM Plex Sans',sans-serif;flex-shrink:0;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{color:var(--ink-soft);font-size:14.5px;margin:12px 0 0;max-width:60ch;}

/* KONTAKT */
.kontakt{background:var(--bg-alt);padding:76px 0;border-top:1px solid var(--line);}
.kontakt-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;}
@media (max-width:860px){.kontakt-grid{grid-template-columns:1fr;}}
.kontakt h2{font-size:28px;margin-bottom:14px;}
.kontakt p.lede{color:var(--ink-soft);margin-bottom:0;max-width:38ch;}
.kontakt-info{margin-top:24px;display:flex;flex-direction:column;gap:8px;font-size:14.5px;color:var(--ink-soft);}
.kontakt-info a{color:var(--navy);text-decoration:underline;}
form{display:flex;flex-direction:column;gap:14px;}
label{font-size:13.5px;color:var(--ink-soft);}
input,textarea{
  font-family:'IBM Plex Sans',sans-serif;padding:11px 13px;border:1px solid var(--line);
  border-radius:3px;background:var(--white);font-size:14.5px;color:var(--ink);width:100%;
}
textarea{min-height:110px;resize:vertical;}
.website-field{position:absolute;left:-9999px;top:-9999px;} /* Honeypot, unsichtbar für Menschen */
.submit{align-self:flex-start;margin-top:4px;background:var(--accent);color:var(--white);border:none;padding:13px 24px;border-radius:3px;font-size:14.5px;cursor:pointer;}
.submit:hover{background:var(--accent-soft);}
.form-note{font-size:12.5px;color:var(--ink-soft);margin-top:2px;}

/* AKTUELLES */
.aktuelles-list{padding:72px 0;display:flex;flex-direction:column;gap:28px;}
.a-card{background:var(--white);border:1px solid var(--line);border-radius:4px;padding:32px;}
.a-card .meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--accent);font-weight:600;margin-bottom:10px;}
.a-card .meta .datum{color:var(--ink-soft);font-weight:400;}
.a-card h2{font-size:23px;margin-bottom:14px;}
.a-card p{color:var(--ink-soft);font-size:15px;margin:0 0 12px;}
.a-card strong{color:var(--ink);}
.a-card ul{color:var(--ink-soft);font-size:14.5px;padding-left:20px;margin:0 0 12px;}
.a-card li{margin-bottom:6px;}
.a-card .quelle{font-size:13.5px;}
.a-card .quelle a{color:var(--navy);text-decoration:underline;}
.a-hinweis{background:var(--bg-alt);border:1px solid var(--line);border-radius:4px;padding:20px 24px;font-size:14px;color:var(--ink-soft);margin-top:8px;}

/* RECHTSTEXTE (Impressum / Datenschutz) */
.legal{padding:64px 0 96px;max-width:760px;margin:0 auto;}
.legal h2{font-size:20px;margin:40px 0 12px;}
.legal h2:first-child{margin-top:0;}
.legal p{color:var(--ink-soft);font-size:15px;margin:0 0 14px;}
.legal p strong,.legal strong{color:var(--ink);}
.legal ul{color:var(--ink-soft);font-size:15px;padding-left:20px;margin:0 0 14px;}
.legal li{margin-bottom:6px;}
.legal a{color:var(--navy);text-decoration:underline;}

footer{padding:36px 0;font-size:13.5px;color:var(--ink-soft);border-top:1px solid var(--line);}
.footer-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;align-items:center;}
.footer-links a{text-decoration:underline;margin-left:16px;}
.footer-links a:first-child{margin-left:0;}
@media (max-width:640px){.footer-grid{flex-direction:column;align-items:flex-start;}.footer-links a:first-child{margin-left:0;}}