/* MAI Energietechnik – generiert von build/generate.mjs, nicht von Hand ändern. */
/* Plus Jakarta Sans – lokal ausgeliefert, keine Verbindung zu Google.
   Erzeugt von build/fonts.mjs, Lizenz: SIL Open Font License 1.1 */
@font-face {
 
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
@font-face {
 
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:#304860;font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:#D87330}
a:hover{color:#B85F22}
:focus-visible{outline:3px solid #E49C30;outline-offset:3px;border-radius:4px}

@keyframes mai-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mai-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes mai-float{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 9px))}}
@keyframes mai-pulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.025)}}

/* Navigation: Umschaltpunkt 1080px, wie im Entwurf.
   Die Elemente tragen ihre Anzeigeart als Inline-Stil aus dem Entwurf mit.
   Ein Inline-Stil schlaegt jede normale Regel, deshalb steht hier ueberall
   !important – ohne das erscheint der Menue-Button auch am Desktop. */
.site-header-wrap{position:sticky;top:0;z-index:100}
.nav-toggle{display:none !important}
.nav-mobile[hidden]{display:none !important}
@media (max-width:1079px){
  .nav-desktop{display:none !important}
  .nav-toggle{display:flex !important}
}
@media (min-width:1080px){
  .nav-mobile{display:none !important}
}

/* Kopfleiste: der Zusatz entfaellt auf schmalen Geraeten. */
@media (max-width:700px){
  .topbar-claim{display:none !important}
}

/* Tippflaechen am Handy: reine Textlinks sind nur so hoch wie ihre Zeile.
   Telefonnummer und E-Mail in der Kopfleiste sowie die Linkspalten in der
   Fusszeile bekommen deshalb zusaetzliche Hoehe. */
@media (max-width:900px){
  .topbar-kontakt a{display:inline-flex;align-items:center;min-height:36px;padding:2px 0}
  .footer-links a{display:inline-flex;align-items:center;min-height:32px}
}

/* Der Entwurf setzt auf den E-Mail-Links word-break:break-all als Inline-Stil.
   Das bricht mitten im Wort ("...technik.d" / "e"). Aufgehoben; die Adresse
   traegt ein <wbr> hinter dem @, dort darf sie umbrechen. */
a[href^="mailto:"]{word-break:normal !important;overflow-wrap:break-word}

/* Aufklappbare Fragen ohne JavaScript. */
details.faq{background:#fff;border:1px solid #E3E8ED;border-radius:14px;overflow:hidden}
details.faq>summary{list-style:none;display:flex;gap:18px;align-items:center;justify-content:space-between;padding:22px 24px;cursor:pointer;font-size:17px;font-weight:700;color:#304860;line-height:1.45}
details.faq>summary::-webkit-details-marker{display:none}
details.faq>summary .faq-sign{flex:0 0 auto;width:30px;height:30px;border-radius:8px;background:#F4F6F8;color:#D87330;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700}
details.faq>summary .faq-sign::after{content:'+'}
details.faq[open]>summary .faq-sign::after{content:'\2212'}
details.faq>p{margin:0;padding:0 24px 24px;font-size:16px;line-height:1.75;color:#606C78;max-width:70ch}

/* Auf schmalen Geräten nie horizontal scrollen. */
html,body{overflow-x:hidden}
@media (max-width:560px){
  .site-header-wrap{position:static}
}

/* Wer im Betriebssystem "Animationseffekte" abgeschaltet hat, bekommt die
   grossen Bewegungen nicht - so wie im Entwurf vorgesehen. Kurze Uebergaenge
   bei Maus und Tastatur bleiben, sonst wirkt die Seite leblos. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [style*="mai-marquee"],[style*="mai-spin"],[style*="mai-float"],[style*="mai-pulse"]{animation:none !important}
}


/* -------------------------------------------------- Einwilligungsbanner */
#cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:200;padding:16px;
  display:flex;justify-content:center;pointer-events:none}
#cookie-banner[hidden]{display:none}
.cookie-karte{pointer-events:auto;width:100%;max-width:620px;background:#304860;color:#fff;
  border-radius:16px;padding:24px 26px;box-shadow:0 24px 70px rgba(15,28,44,.45);
  border:1px solid rgba(255,255,255,.14)}
.cookie-karte h2{margin:0;font-size:19px;font-weight:800;letter-spacing:-.02em;color:#fff}
.cookie-karte p{margin:10px 0 0;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.82)}
.cookie-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}

/* Beide Knoepfe gleich gross und gleich auffaellig: Ablehnen muss genauso
   leicht sein wie Zustimmen, sonst ist die Einwilligung nicht wirksam. */
.cookie-knoepfe button{flex:1 1 180px;min-height:48px;padding:14px 22px;border:0;border-radius:10px;
  font-family:inherit;font-size:15.5px;font-weight:700;cursor:pointer;
  transition:transform .3s cubic-bezier(.16,1,.3,1),filter .3s cubic-bezier(.16,1,.3,1)}
.cookie-knoepfe button:hover{transform:translateY(-2px);filter:brightness(1.06)}
.cookie-ja{background:linear-gradient(135deg,#D87330,#E49C30);color:#fff}
.cookie-nein{background:#F4F6F8;color:#304860}
.cookie-fuss{font-size:13px !important;color:rgba(255,255,255,.6) !important;margin-top:14px !important}
.cookie-fuss a{color:#E49C30}
@media (max-width:480px){
  .cookie-karte{padding:20px}
  .cookie-knoepfe button{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .cookie-knoepfe button{transition:none}
  .cookie-knoepfe button:hover{transform:none}
}

/* Aus style-hover / style-focus des Entwurfs erzeugt. */
.x1:hover, .x1:focus-visible{color:#E49C30;}
.x2:hover, .x2:focus-visible{color:#D87330;border-bottom-color:#D87330;}
.x3:hover, .x3:focus-visible{transform:translateY(-2px);box-shadow:0 12px 28px rgba(216,115,48,.38);}
.x4:hover, .x4:focus-visible{color:#D87330;}
.x5:hover, .x5:focus-visible{color:#fff;}
.x6:focus{left:0;}
.x7:hover, .x7:focus-visible{transform:translateY(-2px);box-shadow:0 16px 40px rgba(216,115,48,.45);}
.x8:hover, .x8:focus-visible{transform:translateY(-2px);background:rgba(255,255,255,.12);}
.x9:hover, .x9:focus-visible{transform:translateY(-4px);border-color:#D8C030;box-shadow:0 20px 60px rgba(48,72,96,.08);}
.xa:hover, .xa:focus-visible{transform:scale(1.04);}
.xb:hover, .xb:focus-visible{transform:translateY(-4px);border-color:#D87330;box-shadow:0 20px 60px rgba(48,72,96,.08);}
.xc:hover, .xc:focus-visible{transform:translateY(-4px);border-color:#304860;box-shadow:0 20px 60px rgba(48,72,96,.08);}
.xd:hover, .xd:focus-visible{transform:translateY(-4px);border-color:#78BCD8;box-shadow:0 20px 60px rgba(48,72,96,.08);}
.xe:hover, .xe:focus-visible{transform:translateY(-4px);box-shadow:0 24px 70px rgba(48,72,96,.28);}
.xf:hover, .xf:focus-visible{color:#B85F22;}
.xg:hover, .xg:focus-visible{transform:translateY(-2px);box-shadow:0 16px 36px rgba(216,115,48,.4);}
.xh:hover, .xh:focus-visible{transform:translateY(-2px);box-shadow:0 14px 34px rgba(216,115,48,.38);}
.xi:hover, .xi:focus-visible{transform:translateY(-2px);border-color:#304860;}
.xj:focus{border-color:#D87330;}
.xk:hover, .xk:focus-visible{transform:translateY(-2px);border-color:#D87330;color:#D87330;}