/* ======================================================================
   Demo-Website Energieberater (Rebuild www.demo-1grain.de)
   Ein Stylesheet, gegliedert in Sektions-Reihenfolge (siehe AGENTS.md)

   Einheitensystem: rem (1rem = 16px beim 100%-Browser-Default).
   Original-px-Werte stehen als Kommentar hinter jedem Wert.
   px nur noch für: Border-Dicken, Icon-/Bildmaße, Motion-Details —
   damit respektiert die Seite die Schriftgrößen-Einstellung des Nutzers.
   ====================================================================== */

/* ===== 1. DESIGN TOKENS ===== */
:root {
  --container-max: 73.125rem;    /* 1170px — Layout-Breite: .container + .nav-container */
  --container-pad: 0.9375rem;    /* 15px — seitlicher Abstand beider Container */
  --navy: #253449;               /* BG Service, Kontakt, Footer */
  /* OneGrain-Navbar-Farben (Tailwind-Referenzen aus OneGrain_Website) */
  --nav-page: #030712;           /* bg-page  = hsl(224 71.4% 4.1%) */
  --nav-glass: rgba(3, 7, 18, 0.22);    /* bg-page/22 + backdrop-blur-md */
  --nav-panel: rgba(13, 17, 23, 0.95);  /* Mobile-Panel bg-[#0d1117]/95 */
  --nav-outline: rgba(255, 255, 255, 0.1); /* border-white/10 */
  --primary: #00E69D;            /* bg-primary = hsl(161 100% 45%) */
  --primary-foreground: #030711; /* text-primary-foreground = hsl(222 71% 4%) */
  --teal: #4aa0a0;               /* Akzent: Hero-CTA-BG, Labels */
  --gold: #EAB85E;               /* Sterne, Social-Icons */
  --gold-2: #F2CB07;             /* Karten-Rand-Referenz im Service */
  --ink: #0F1317;                /* Fast-Schwarz ("Das sagen unsere Kunden") */
  --light: #f6f6f6;              /* helle Sektionen (Ausweis-Formular, Karte) */
  --green: #37ca37;              /* Bullet-Marker */
  --btn-dark: #14100C;           /* dunkle Outline-Buttons (Über Uns) */
  --white: #ffffff;
  --black: #000000;
  --font-head: 'Outfit', sans-serif;
  --font-content: 'Nunito Sans', sans-serif;
/* ===== 3. BUTTONS ===== */
.btn {
  display: inline-block;
  font-family: var(--font-content);
  font-size: 1rem;             /* 16px */
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.btn-outline {
  background: transparent;
  color: var(--white);
  border: 2px solid var(--white);
  border-radius: 0.625rem;     /* 10px */
  padding: 0.75rem 1.5rem;     /* 12px 24px */
}
.btn-outline:hover { background: rgba(255, 255, 255, 0.1); }
.btn-outline-dark {
  background: transparent;
  color: var(--btn-dark);
  border: 2px solid var(--btn-dark);
  border-radius: 0.625rem;     /* 10px */
  padding: 0.75rem 1.875rem;   /* 12px 30px */
}
.btn-outline-dark:hover { background: rgba(20, 16, 12, 0.06); }
.btn-solid {
  background: var(--teal);
  color: var(--white);
  border: none;
  border-radius: 1.875rem;     /* 30px */
  padding: 0.625rem 1.25rem;   /* 10px 20px */
}
.btn-solid:hover { filter: brightness(1.08); }

/* ===== 2. BASE / RESET ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; } /* 80px — skaliert mit, da Navbar-Höhe ebenfalls in rem */
body {
  margin: 0;
  font-family: var(--font-content);
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-head); margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Typografie-Hygiene: lange deutsche Komposita ("Gebäudeenergieeffizienz")
   dürfen auf schmalen Viewports echte Trennungen erhalten (html lang="de"),
   mit overflow-wrap als Fallback — verhindert horizontales Scrollen. */
.hero-title,
.about-title, .service-card-title, .contact-title, .ausweis-title, .reviews-title,
.bullets li, .about-text, .service-card-text, .review-quote {
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Bullet-Badges: gefüllter Kreis mit Symbol (Unicode-Glyph im ::before).
   Badge-Maße bewusst in em — skalieren proportional zur li-Schriftgröße. */
.bullets li { position: relative; padding-left: 2.2em; line-height: 2; }
.bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.6167em;               /* (2em − 1.26em)/2 der li-Schriftgröße, in ::before-em (0.6×) → exakt zentriert in der ersten Zeile */
  width: 2.1em;                /* 2.1em × 0.6em = 1.26em Kreis-Durchmesser */
  height: 2.1em;
  line-height: 2.1;            /* Glyph vertikal im Kreis zentrieren (unitless) */
  font-size: 0.6em;
  text-align: center;
  background: var(--green);
  color: var(--white);
  border-radius: 50%;
  font-weight: 700;
}

/* Entrance-Animation (Original: animate.css fadeInUp, ≤1024px deaktiviert) */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
@media (min-width: 64.0625em) { /* 1025px */
  .hero-inner, .about-grid, .reviews-grid, .location-grid, .service-card {
    animation: fade-in-up 0.7s ease both;
  }
}

/* ===== 5. HERO (Original: section-i9qNhU4y1r, padding 150px 0, BG #000 + Bild .8) ===== */
.hero {
  position: relative;
  background: var(--black);
  padding: 9.375rem 0;         /* 150px 0 */
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/hero_example.webp") center / cover no-repeat;
  opacity: 0.8;
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 76.5fr) minmax(0, 23.5fr);
  column-gap: 0.9375rem;       /* 15px */
}
.hero-eyebrow {
  font-family: var(--font-content);
  font-size: 1.25rem;          /* 20px */
  font-weight: 400;
  color: var(--white);
}
.hero-title {
  font-size: clamp(1.75rem, 5.5vw + 0.5rem, 2.8125rem); /* 45px Desktop-Max, fluid nach unten — deutsche Komposita wie "Energieberater" bleiben schmaler als die Spalte */
  font-weight: 600;
  line-height: 1.3;
  color: var(--white);
  margin-top: 0.625rem;        /* 10px */
}
.hero-bullets { padding: 0.625rem 0 0; } /* 10px 0 0 */
.hero-bullets li { font-size: 1.5625rem; color: var(--white); } /* 25px */
.hero-sub {
  font-size: 1.3125rem;        /* 21px */
  line-height: 1.6;
  color: var(--white);
  margin-top: 0.625rem;        /* 10px */
}
.hero-cta { margin-top: 1.875rem; } /* 30px */
.hero-cta .btn-outline { border-radius: 0; padding: 0.625rem; } /* 10px */
.hero-col-ctas {
  padding: 0.625rem 0;         /* 10px 0 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-solid-btn { margin-top: 1.875rem; padding: 0.625rem; } /* 30px / 10px */

/* ===== 6. ÜBER UNS (Original: section-Le8SrP_byj, padding 48px 0) ===== */
.about { padding: 3rem 0; }   /* 48px 0 */
.about-grid { display: grid; grid-template-columns: minmax(0, 42.8fr) minmax(0, 57.2fr); gap: 1.75rem 3rem; } /* 28px 48px — minmax(0,…) verhindert Grid-Blowout durch Bild-Min-Content */
.about-img { width: 100%; height: auto; }
.about-content { padding: 0.625rem 0; } /* 10px 0 */
.about-label {
  font-size: 1.75rem;          /* 28px */
  font-weight: 400;
  color: var(--teal);
}
.about-title { font-size: 1.75rem; font-weight: 400; color: var(--black); margin-top: 0.625rem; } /* 28px / 10px */
.about-text { font-size: 1.3125rem; line-height: 1.6; margin-top: 0.625rem; } /* 21px / 10px */
.about-lead { font-size: 1.3125rem; font-weight: 700; margin-top: 0.625rem; } /* 21px / 10px */
.about-bullets { padding: 0.625rem 0; } /* 10px 0 */
.about-bullets li { font-size: 1.25rem; } /* 20px */
.about-cta { margin-top: 1.875rem; } /* 30px */

/* ===== 7. SERVICE (Original: section-uYaOfIhiGY, padding 43px 0, BG Navy) ===== */
.service { background: var(--navy); padding: 2.6875rem 0; color: var(--white); } /* 43px 0 */
.service-head { text-align: center; padding: 0.625rem 0; } /* 10px 0 */
.service-heading { font-size: 1.75rem; font-weight: 400; } /* 28px */
.service-card {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50% : 50% */
  align-items: stretch;
  gap: 3rem;                   /* 48px */
  margin-top: 3.5rem;          /* 56px */
}
.service-media { min-width: 0; }
.service-body { display: flex; flex-direction: column; justify-content: center; padding: 0.625rem 0; } /* 10px 0 */
.service-img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; }
.service-card-title { font-size: 1.5rem; font-weight: 600; } /* 24px */
.service-card-text { font-size: 1.3125rem; line-height: 1.6; margin-top: 0.625rem; } /* 21px / 10px */
.service-bullets { padding: 0.625rem 0; } /* 10px 0 */
.service-bullets li { font-size: 1.3125rem; } /* 21px */
.service-bullets li::before {
  content: "➔";
  background: var(--white);
  color: var(--navy);
}
.service-cta { margin-top: 1.875rem; } /* 30px */
.service .btn-outline { border-radius: 0; padding: 0.625rem 1.25rem; } /* 10px 20px */

/* ===== 8. AUSWEIS-FORMULAR (Original: section-6mpJ07tFfi, padding 20px 0, BG Hell) ===== */
.ausweis { background: var(--light); padding: 1.25rem 0; } /* 20px 0 */
.ausweis-title { font-size: 3rem; font-weight: 400; color: var(--black); text-align: center; } /* 48px */
.form-placeholder {
  margin: 1.25rem auto 0;      /* 20px auto 0 */
  min-height: 18.75rem;        /* 300px */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #b9c1cb;
  border-radius: 0.75rem;      /* 12px */
  background: var(--white);
  text-align: center;
}
.form-placeholder p { font-size: 1.125rem; font-weight: 700; color: var(--navy); } /* 18px */
.form-placeholder p span { display: block; margin-top: 0.375rem; font-size: 0.9375rem; font-weight: 400; color: #5a6572; } /* 6px / 15px */
.form-placeholder-dark { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.35); }
.form-placeholder-dark p { color: var(--white); }
.form-placeholder-dark p span { color: rgba(255, 255, 255, 0.75); }

/* ===== 9. BEWERTUNGEN (Original: section-2FnLgtEMI5, padding 10px 0 38px) ===== */
.reviews { background: var(--white); padding: 0.625rem 0 2.375rem; } /* 10px 0 38px */
.reviews-label { font-size: 1.75rem; font-weight: 400; color: var(--teal); text-align: center; } /* 28px */
.reviews-title { font-size: 2rem; font-weight: 400; color: var(--ink); text-align: center; margin-top: 0.625rem; } /* 32px / 10px */
.reviews-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.875rem; margin-top: 1.875rem; } /* 30px / 30px */
.review-card {
  margin: 0;
  padding: 1.5rem;            /* 24px */
  border: 1px solid #e5e5e5;
  border-radius: 0.625rem;    /* 10px */
  background: var(--white);
}
.review-stars { display: flex; gap: 0.25rem; } /* 4px */
.star { width: 22px; height: 22px; color: var(--gold); } /* Icon-Maß in px */
.review-quote { margin: 0.75rem 0 0.625rem; font-size: 1.125rem; line-height: 1.6; color: var(--ink); } /* 12px 0 10px / 18px */
.review-name { font-family: var(--font-head); font-size: 1.25rem; font-weight: 600; color: var(--ink); } /* 20px */

/* ===== 10. KONTAKT (Original: section-GI-46EPCzR, padding 75px 0, BG Navy) ===== */
.contact { background: var(--navy); padding: 4.6875rem 0; color: var(--white); } /* 75px 0 */
.contact-head { text-align: center; padding: 0.625rem 0; } /* 10px 0 */
.contact-lead { font-size: 1.875rem; font-weight: 600; } /* 30px */
.contact-title { font-size: 2.5rem; margin-top: 0.625rem; } /* 40px / 10px */

/* ===== 11. FAQ (Original: section-zW49JcYzBp, padding 23px 0 30px, Poppins) ===== */
.faq { background: var(--white); padding: 1.4375rem 0 1.875rem; font-family: var(--font-faq); } /* 23px 0 30px */
.faq-title { font-size: 1.75rem; font-weight: 400; color: var(--ink); text-align: center; } /* 28px */
.faq-list { max-width: 60rem; margin: 1.25rem auto 0; } /* 960px / 20px auto 0 */
.faq-item { border-bottom: 1px solid #e5e5e5; }
.faq-h { margin: 0; }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;                   /* 16px */
  padding: 1rem 0.25rem;       /* 16px 4px */
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-faq);
  font-size: 1.125rem;         /* 18px */
  font-weight: 600;
  color: var(--ink);
  text-align: left;
}
.faq-chevron {
  width: 12px;                 /* Icon-Maß in px */
  height: 12px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.faq-item.open .faq-chevron { transform: rotate(225deg); }
.faq-panel { display: none; padding: 0 0.25rem 1rem; } /* 0 4px 16px */
.faq-item.open .faq-panel { display: block; animation: faq-fade 0.25s ease; }
@keyframes faq-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.faq-panel p { font-size: 1rem; line-height: 1.7; color: #333333; } /* 16px */

/* ===== 12. SO ERREICHEN SIE UNS (Original: section-IDhh1OIk9N, padding 33px 0) ===== */
.location { background: var(--light); padding: 2.0625rem 0; } /* 33px 0 */
.location-grid { display: grid; grid-template-columns: minmax(0, 57.2fr) minmax(0, 42.8fr); column-gap: 0.9375rem; align-items: center; } /* 15px */
.location-content { padding: 0.625rem 0; } /* 10px 0 */
.location-title { font-size: 1.25rem; font-weight: 700; color: var(--ink); } /* 20px */
.location-info { font-size: 1rem; line-height: 1.6; padding: 0.625rem 0; } /* 16px / 10px 0 */
.location-info a { color: var(--ink); }
.location-img { width: 100%; height: auto; }

/* ===== 13. FOOTER (Original: section-gqRFhiKqC-, padding 13px 0 23px) ===== */
.footer { background: var(--navy); padding: 0.8125rem 0 1.4375rem; } /* 13px 0 23px */
.footer-grid { display: grid; grid-template-columns: minmax(0, 25.3fr) minmax(0, 51.9fr) minmax(0, 22.8fr); column-gap: 0.9375rem; align-items: center; } /* 15px */
.footer-social { display: flex; flex-wrap: wrap; gap: 0.625rem; padding: 1.25rem 0; } /* 10px / 20px 0 */
.social-link { color: var(--gold); }
.social-icon { width: 25px; height: 25px; display: block; } /* Icon-Maß in px */
.footer-info { padding: 0.3125rem; } /* 5px */
.footer-line { color: var(--white); font-size: 1rem; font-weight: 700; padding: 0.3125rem 0; } /* 16px / 5px 0 */
.footer-logo-img { width: 200px; } /* Bild-Maß in px */
/* ===== 14. RESPONSIVE ===== */
/* Tablet ≤64em (1024px): keine Entrance-Animationen, Layouts stapeln sich */
@media (max-width: 64em) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-col-ctas { align-items: flex-start; padding: 0.625rem 0 1.875rem; } /* 10px 0 30px */
  .about-grid,
  .location-grid { grid-template-columns: minmax(0, 1fr); }
  .service-card { display: flex; flex-direction: column; align-items: stretch; gap: 1.75rem; } /* 28px */
  .service-media { width: 100%; }
  .reviews-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Mobile ≤47.9375em (767px): kleinere Schriftgrößen (wie im Original) */
@media (max-width: 47.9375em) {
  .hero { padding: 5.625rem 0; } /* 90px 0 */
  .about-img {
    max-height: 20rem;         /* 320px — Bild dominiert auf dem Phone nicht mehr (Tablet behält das volle Hochformat) */
    object-fit: cover;
    object-position: center;   /* ggf. "center 30%", falls Motiv oben sitzt */
  }
  .hero-bullets li { font-size: 1.25rem; } /* 20px */
  .hero-sub { font-size: 1.125rem; } /* 18px */
  .hero-solid-btn { margin-top: 0.9375rem; } /* 15px */
  .service-card { margin-top: 2rem; } /* 32px */
  .about-text,
  .about-lead,
  .service-card-text,
  .service-bullets li { font-size: 1.125rem; } /* 18px */
  .service-card-title { font-size: 1.25rem; } /* 20px */
  .contact-lead { font-size: 1.375rem; } /* 22px */
  .contact-title { font-size: 2rem; } /* 32px */
  .ausweis-title { font-size: 2rem; } /* 32px */
  .footer-logo-img { width: 160px; } /* Bild-Maß in px */
}