/* VDirekt Energievertrieb — Marke aus den Anzeigenmotiven: Navy + Signalgrün */
:root{
  --navy:#0d1c2b;
  --navy-tief:#081420;
  --navy-weich:#1c3247;
  --gruen:#6cbe2c;
  --gruen-dunkel:#4e9418;
  --grund:#ffffff;
  --grund-ton:#f1f5f8;
  --text:#0d1c2b;
  --text-leise:#4f6478;
  --linie:#dbe3ea;
  --schrift-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --schrift-text:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--grund);color:var(--text);
  font-family:var(--schrift-text);font-size:16px;line-height:1.65;
}
.bahn{max-width:1080px;margin:0 auto;padding:0 24px}
a{color:var(--gruen-dunkel)}
a:focus-visible,button:focus-visible{outline:3px solid var(--gruen);outline-offset:2px}

/* Kopfleiste */
.kopf{border-bottom:1px solid var(--linie);background:var(--grund);position:sticky;top:0;z-index:10}
.kopf .bahn{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:16px;padding-bottom:16px}
.logo{display:flex;align-items:baseline;gap:9px;text-decoration:none;color:var(--navy)}
.logo .haken{
  font-family:var(--schrift-display);font-weight:800;font-size:26px;color:var(--gruen);
  line-height:1;letter-spacing:-.04em;
}
.logo .wort{font-family:var(--schrift-display);font-weight:800;font-size:20px;letter-spacing:-.02em}
.logo .zusatz{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-leise)}
.kopf nav{display:flex;gap:22px;font-size:14.5px}
.kopf nav a{color:var(--text-leise);text-decoration:none}
.kopf nav a:hover{color:var(--navy)}
@media(max-width:620px){.kopf nav{display:none}}

/* Hero */
.hero{background:var(--navy);color:#fff;padding:72px 0 68px}
.hero h1{
  font-family:var(--schrift-display);font-weight:800;
  font-size:clamp(31px,5.2vw,54px);line-height:1.06;letter-spacing:-.025em;
  margin:0 0 18px;max-width:17ch;text-wrap:balance;
}
.hero h1 em{font-style:normal;color:var(--gruen)}
.hero p{font-size:18px;color:#b9c9d7;max-width:56ch;margin:0 0 30px}
.knopf{
  display:inline-block;background:var(--gruen);color:#08150a;
  font-weight:600;font-size:16px;text-decoration:none;
  padding:14px 30px;border-radius:3px;
}
.knopf:hover{background:#7ad136}

/* Leistungen */
.leistungen{padding:64px 0}
.leistungen h2,.kontakt h2{
  font-family:var(--schrift-display);font-weight:700;font-size:28px;
  letter-spacing:-.015em;margin:0 0 10px;
}
.leistungen>.bahn>p{color:var(--text-leise);max-width:62ch;margin:0 0 34px}
.gitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px}
.gitter article h3{
  font-family:var(--schrift-display);font-weight:700;font-size:18px;margin:0 0 8px;
  padding-top:14px;border-top:3px solid var(--gruen);
}
.gitter article p{margin:0;color:var(--text-leise);font-size:15px}

/* Kontakt */
.kontakt{background:var(--grund-ton);padding:56px 0;border-top:1px solid var(--linie)}
.kontakt p{color:var(--text-leise);max-width:60ch}
.kontakt .tel{
  font-family:var(--schrift-display);font-weight:700;font-size:26px;
  color:var(--navy);text-decoration:none;display:inline-block;margin-top:8px;
}

/* Fuß */
.fuss{background:var(--navy-tief);color:#8ea4b6;padding:40px 0 34px;font-size:14px}
.fuss .bahn{display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;justify-content:space-between}
.fuss a{color:#c9d8e4;text-decoration:none}
.fuss a:hover{text-decoration:underline}
.fuss nav{display:flex;gap:22px}

/* Rechtstexte */
.recht{padding:52px 0 70px;max-width:760px}
.recht h1{
  font-family:var(--schrift-display);font-weight:800;font-size:34px;
  letter-spacing:-.02em;margin:0 0 8px;
}
.recht .stand{color:var(--text-leise);font-size:14px;margin:0 0 36px}
.recht h2{
  font-family:var(--schrift-display);font-weight:700;font-size:20px;
  margin:34px 0 10px;padding-top:16px;border-top:1px solid var(--linie);
}
.recht h3{font-family:var(--schrift-display);font-weight:600;font-size:16.5px;margin:22px 0 6px}
.recht p,.recht li{color:#33455a;font-size:15.5px}
.recht ul{padding-left:22px}
.recht li{margin-bottom:6px}
.luecke{
  background:#fdf3d8;border-left:4px solid #c8941a;color:#6b4c06;
  padding:12px 16px;margin:14px 0;font-size:14.5px;
}
.luecke strong{color:#5a3f04}
address{font-style:normal;line-height:1.8}