/* =========================================================
   Hager Haustechnik – Stylesheet
   Nachbau der WordPress-Seite als statisches HTML/CSS
========================================================= */

:root{
  --color-dark: #23262b;
  --color-light: #f8f400;
  --color-primary: #d6311b;   /* Original Theme-Farbe laut meta-theme-color */
  --color-primary-dark: #ad2314;
  --color-primary-light: #fff;
  --color-text: #333333;
  --color-text-light: #6b7078;
  --color-bg-alt: #f5f5f6;
  --color-border: #e6e6e8;
  --font-body: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --container-width: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--color-text);
  line-height: 1.65;
  background:#fff;
}
img{ max-width:100%; display:block; }
a{ color: var(--color-primary); text-decoration:none; }
a:hover{ color: var(--color-primary-dark); }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-weight:700; color: var(--color-dark); line-height:1.25; margin:0 0 .6em; }
p{ margin:0 0 1.1em; }

.container{ width:100%; max-width: var(--container-width); margin:0 auto; padding:0 24px; }
.narrow{ max-width: 820px; }
.center{ text-align:center; }
.section{ padding: 64px 0; }
.section-alt{ background: var(--color-bg-alt); }
.section-title{
  font-size: 2rem; text-align:center; margin-bottom: 1.2em; position:relative;
}
.section-title::after{
  content:""; display:block; width:60px; height:3px;
  background: var(--color-primary); margin: .5em auto 0;
}
.lead{ font-size:1.1rem; color:var(--color-text-light); max-width:760px; margin-left:auto; margin-right:auto; }

.btn{
  display:inline-block; padding: 13px 30px; border-radius: 3px; font-weight:600;
  font-size:.9rem; border:2px solid transparent; cursor:pointer; transition: all .2s ease;
}
.btn-primary{ background: var(--color-primary); color:#fff; }
.btn-primary:hover{ background: var(--color-primary-dark); color:#fff; }
.btn-outline{ background:transparent; border-color: var(--color-dark); color: var(--color-dark); }
.btn-outline:hover{ background: var(--color-dark); color:#fff; }
.btn-small{ padding:9px 16px; font-size:.8rem; }

/* Top bar */
.top-bar{ background: var(--color-dark); color:#c7c9cd; font-size:.82rem; }
.top-bar-inner{ display:flex; justify-content:space-between; align-items:center; padding: 8px 24px; flex-wrap:wrap; gap:8px; }
.top-bar-contact a{ color:#f0f0f0; margin-right:1.2em; }
.top-bar-social a{ color:#c7c9cd; display:inline-flex; }
.top-bar-social a:hover{ color: var(--color-primary); }

/* Main header / nav */
.main-header {
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 50;
    background-repeat: no-repeat;
    background-image: url("/assets/images/Backgound_Verlauf-1.jpg");
    background-size: 100%;
    background-repeat: repeat-y;
    padding: 15px;
}
.main-header-inner{ display:flex; align-items:center; justify-content:space-between; padding: 12px 24px; }
.logo img{ height:56px; width:auto; }
.main-nav ul{ display:flex; gap: 4px; flex-wrap:wrap; }
.main-nav a{ display:block; padding: 10px 14px; color: var(--color-light); font-weight:600; font-size:1.1rem; border-radius:2px; }
.main-nav li.active a, .main-nav a:hover{ color: var(--color-primary-light); }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.nav-toggle span{ width:26px; height:3px; background: var(--color-dark); border-radius:2px; }

/* Hero */
.hero{
  position:relative; min-height: 480px; display:flex; align-items:center; text-align:center;
  background: #f1f1f1;
  color:#fff;
}
.hero-content{ position:relative; z-index:2; max-width:100%; margin:0 auto; padding: 0}
.hero-content h1{ color:#636363; font-size: clamp(1.7rem, 3.6vw, 2.6rem); margin-bottom:.5em; }
.hero-content p{ color:#888; font-size:1.15rem; }

/* CTA section */
.cta-section{ background: var(--color-primary); color:#fff; }
.cta-section h2{ color:#fff; margin-bottom:.5em; }
.cta-section p{ color:#fde9e6; }
.cta-section .btn-primary{ background:#fff; color: var(--color-primary); margin-top:.6em; }
.cta-section .btn-primary:hover{ background: var(--color-dark); color:#fff; }

/* Services */
.services-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 2em; }
.service-card{ background:#fff; border:1px solid var(--color-border); border-radius:6px; padding: 26px; }
.service-card h3{ color: var(--color-primary); font-size:1.15rem; }
.service-card p{ margin:0; color: var(--color-text-light); font-size:.92rem; }

/* Team */
.team-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 2em; }
.team-card{ background:#fff; border:1px solid var(--color-border); border-radius:6px; padding: 22px 16px; text-align:center; }
.team-avatar{
  width:128px; height:64px; border-radius:50%; margin:0 auto 12px; color:#fff;
  display:inline; align-items:center; justify-content:center; font-weight:700; font-size:1.1rem;
}
.team-card h3{ font-size:1rem; margin-bottom:.2em; }
.team-role{ color: var(--color-primary); font-weight:600; font-size:.82rem; margin-bottom:.5em; text-transform:uppercase; letter-spacing:.02em; }
.team-desc{ font-size:.85rem; color:var(--color-text-light); margin:0; }
.team-avatar img{ aspect-ratio: 3 / 4; border-radius: 50px; object-fit: cover; object-position: center; display: block; margin-bottom: 20px; max-height: 300px; }
/* Weitere Anfragen */
.weitere-anfragen{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:1.5em; }

/* Partner / Förderung */
.partner-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top:2em; }
.foerderung-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top:2em; }
.partner-card, .foerderung-card{
  display:block; align-items:center; justify-content:center; text-align:center;
  background:#fff; border:1px solid var(--color-border); border-radius:6px;
  padding: 26px 16px; min-height:90px; font-weight:700; color: var(--color-dark);
  transition: box-shadow .2s ease, transform .2s ease;
}
.partner-card:hover, .foerderung-card:hover{ box-shadow:0 10px 24px rgba(0,0,0,.08); transform: translateY(-3px); color: var(--color-primary); }

/* Gallery */
.gallery-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 2em; }
.gallery-item{ display:block; border-radius:6px; overflow:hidden; aspect-ratio: 4/3; background: var(--color-border); }
.gallery-item img{ width:100%; height:100%; object-fit:cover; }

/* Contact */
.contact-grid{ display:grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items:start; }
.map-embed{ margin-top: 1.2em; border-radius:6px; overflow:hidden; border:1px solid var(--color-border); }
.contact-form .form-row{ margin-bottom: 16px; }
.contact-form label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:6px; color: var(--color-dark); }
.contact-form input[type=text], .contact-form input[type=email], .contact-form textarea{
  width:100%; padding: 11px 14px; border:1px solid var(--color-border); border-radius:3px; font: inherit; background:#fbfbfc;
}
.form-check{ display:flex; align-items:flex-start; gap:8px; }
.form-check input{ margin-top:5px; }
.form-check label{ font-weight:400; font-size:.85rem; }

/* Honeypot-Feld: für echte Besucher unsichtbar, für die meisten simplen
   Spam-Bots aber ausfüllbar (kein display:none, da manche Bots das
   erkennen und das Feld dann korrekt leer lassen). */
.form-honeypot{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-message{
  padding: 14px 18px;
  border-radius: 6px;
  font-size: .9rem;
  margin-bottom: 1.2em;
}
.form-message-success{ background: #e6f6ec; color: #1e7a3d; border: 1px solid #b9e3c6; }
.form-message-error{ background: #fdeceb; color: #a3271b; border: 1px solid #f3c2bd; }

/* Karriere */
.job-card{ background:#fff; border:1px solid var(--color-border); border-radius:6px; padding: 26px; }
.job-card h4{ color: var(--color-primary); font-size:1.05rem; }

/* Formulare / ZVSHK embed */
.service-portal-embed{ border:1px solid var(--color-border); border-radius:6px; overflow:hidden; margin-top:1.5em; }

/* Footer */
.site-footer{ background: var(--color-dark); color:#b6b9bf; padding-top: 56px; }
.footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; padding-bottom: 40px; }
.footer-col h4{ color:#fff; font-size:.95rem; letter-spacing:.02em; margin-bottom:1em; }
.footer-col ul li{ margin-bottom:.6em; }
.footer-col a{ color:#b6b9bf; }
.footer-col a:hover{ color:#fff; }
.footer-logo{ height:44px; margin-bottom:1em; filter: brightness(0) invert(1); }
.footer-brand p{ font-size:.9rem; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); padding: 18px 0; }
.footer-bottom-inner{ display:flex; justify-content:space-between; align-items:center; font-size:.82rem; flex-wrap:wrap; gap:10px; }
.footer-bottom a{ color:#8b8f97; margin-left:1em; }
.footer-bottom a:hover{ color:#fff; }
.footer-bottom-links{ display:flex; gap: 0; }

/* Back to top */
#backToTop{
  position:fixed; right:24px; bottom:24px; width:44px; height:44px; border-radius:50%;
  background: var(--color-primary); color:#fff; border:none; font-size:1.1rem; cursor:pointer;
  display:none; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.25); z-index:60;
}
#backToTop.visible{ display:flex; }

/* Cookie banner */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; background:#fff; border-top:1px solid var(--color-border);
  box-shadow:0 -6px 24px rgba(0,0,0,.12); padding: 18px 24px; z-index:100;
  transform: translateY(110%); transition: transform .35s ease;
}
.cookie-banner.visible{ transform: translateY(0); }
.cookie-banner-inner{ max-width: var(--container-width); margin:0 auto; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.cookie-banner p{ margin:0; flex:1; min-width:220px; font-size:.9rem; }
.cookie-actions{ display:flex; gap:10px; }

/* Responsive */
@media (max-width: 980px){
  .services-grid{ grid-template-columns: repeat(2, 1fr); }
  .team-grid{ grid-template-columns: repeat(3, 1fr); }
  .partner-grid{ grid-template-columns: repeat(3, 1fr); }
  .foerderung-grid{ grid-template-columns: repeat(2, 1fr); }
  .gallery-grid{ grid-template-columns: repeat(3, 1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .main-nav{
    position:absolute; top:100%; left:0; right:0; background:#fff; border-top:1px solid var(--color-border);
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .main-nav.open{ max-height:600px; }
  .main-nav ul{ flex-direction:column; padding: 8px 24px 16px; }
  .nav-toggle{ display:flex; }
  .services-grid, .team-grid, .partner-grid, .foerderung-grid, .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
  .footer-grid{ grid-template-columns: 1fr; text-align:center; }
  .footer-bottom-inner{ flex-direction:column; gap:.6em; }
  .footer-bottom-links{ justify-content:center; }
  .footer-bottom-links a{ margin: 0 .6em; }
}
@media (max-width: 480px){
  .services-grid, .team-grid, .partner-grid, .foerderung-grid, .gallery-grid{ grid-template-columns: 1fr; }
}