/* optimo-energie.de - Stufe 1 (19.10.2026). Corporate Design aus dem Second Brain (02_Unternehmen/04_Brand-Guide.md):
   Orange #ED7D31, Petrolblau #3C88A3, Beige #F5E9DD, Schwarz im Logo, Schrift Poppins (Flyer 2025).
   Keine externen Schriften, keine Skripte, keine Cookies - Poppins liegt selbst in schrift/ (Google Fonts, SIL OFL 1.1,
   einmalig geladen 19.10.2026 mit Vitjas OK; kein Abruf bei Google je Besucher). */
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(schrift/poppins-400.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(schrift/poppins-700.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:italic;font-weight:700;font-display:swap;src:url(schrift/poppins-700-kursiv.woff2) format("woff2")}
:root{--orange:#ED7D31;--petrol:#3C88A3;--beige:#F5E9DD;--schwarz:#111;--text:#1E1E1E;--leise:#5B5B5B;--linie:#E6D8C8;--flaeche:#fff}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--flaeche);color:var(--text);font:17px/1.6 Poppins,"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif}
a{color:var(--petrol)}
header{background:#fff;border-bottom:6px solid var(--orange);padding:18px 16px}
header .innen,footer .innen,.band .innen{max-width:820px;margin:0 auto}
.marke{display:inline-block;line-height:0}
.marke img{width:260px;max-width:70vw;height:auto}
main{max-width:852px;margin:0 auto;padding:26px 16px 40px}
h1{font-size:30px;line-height:1.25;margin:0 0 14px;color:var(--schwarz);font-weight:700}
h1 em{font-style:italic;color:var(--orange)}
h2{font-size:21px;margin:30px 0 8px;color:var(--petrol);font-weight:700}
.band{background:var(--beige);padding:22px 16px}
.band p{margin:0}
.punkte{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:18px 0;padding:0;list-style:none}
.punkte li{background:var(--beige);border-left:5px solid var(--orange);border-radius:10px;padding:14px 16px}
.punkte b{display:block;color:var(--schwarz)}
.karte{background:#fff;border:2px solid var(--petrol);border-radius:14px;padding:18px 20px;margin:20px 0}
.ruf{font-size:22px;font-weight:700;color:var(--orange);margin:6px 0}
footer{background:var(--schwarz);color:#ddd;padding:18px 16px}
footer a{margin-right:16px;color:#fff}
.firma{margin:10px 0 0;font-size:14px;color:#ccc}
small,.leise{color:var(--leise)}
@media (max-width:480px){h1{font-size:25px}}