/* ===== GRUNDLAGEN ===== */

/* Schriftart "Inter" – lokal eingebunden (kein Kontakt zu Google-Servern, DSGVO-freundlich).
   Es ist eine variable Schrift: eine einzige Datei deckt alle Schnitte
   (normal, halbfett, fett) ab. Datei liegt im Ordner "fonts". */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-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;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --gruen:       #16a34a;
  --gruen-hell:  #22c55e;
  --gruen-dunkel:#15803d;
  --weiss:       #ffffff;
  --hellgrau:    #f5f5f5;
  --grau:        #757575;
  --dunkel:      #212121;
  --abstand:     1.5rem;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--dunkel);
  background: var(--weiss);
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

/* ===== NAVIGATION ===== */
header {
  background: var(--weiss);
  border-bottom: 2px solid var(--gruen);
  position: sticky;
  top: 0;
  z-index: 100;
}

nav {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.35rem var(--abstand);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gruen);
  letter-spacing: 0.5px;
}

.logo span {
  color: var(--dunkel);
}

/* Logo-Größe – hier kannst du die Höhe leicht anpassen */
.logo-img {
  height: 84px;
  width: auto;
}

.nav-links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
}

.nav-links a {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--dunkel);
  transition: color 0.2s;
}

.nav-links a:hover,
.nav-links a.aktiv {
  color: var(--gruen);
}

/* Hamburger-Button (nur auf Handy sichtbar) */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}

.hamburger span {
  display: block;
  width: 25px;
  height: 3px;
  background: var(--dunkel);
  border-radius: 2px;
  transition: 0.3s;
}

/* ===== HERO-BEREICH ===== */
.hero {
  /* Weißer Halbtransparenz-Schleier über dem Foto, damit der dunkle Text lesbar bleibt.
     Schleier-Stärke: 0.70 = 70 % Weiß. Höher = besser lesbar, Foto blasser; niedriger = Foto kräftiger. */
  background: linear-gradient(rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.70)),
              url('images/hero.jpg') center / cover no-repeat;
  color: var(--dunkel);
  padding: 6rem var(--abstand);
  text-align: center;
  border-bottom: 1px solid #eef2ef;
}

.hero h1 {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.2;
}

/* Grünes Akzentwort in der Überschrift */
.hero h1 .akzent {
  color: var(--gruen);
}

.hero p {
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto 1.5rem;
  color: var(--grau);
}

.badge {
  display: inline-block;
  background: #e8f5e9;
  border: 1px solid #c8e6c9;
  color: var(--gruen-dunkel);
  padding: 0.4rem 1rem;
  border-radius: 50px;
  font-size: 0.9rem;
  margin-bottom: 2rem;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-block;
  padding: 0.8rem 2rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  border: none;
}

.btn-weiss {
  background: var(--weiss);
  color: var(--gruen-dunkel);
}

.btn-weiss:hover {
  background: #e8f5e9;
  transform: translateY(-1px);
}

.btn-gruen {
  background: var(--gruen);
  color: var(--weiss);
}

.btn-gruen:hover {
  background: var(--gruen-dunkel);
  transform: translateY(-1px);
}

/* ===== ABSCHNITTE (allgemein) ===== */
section {
  padding: 4rem var(--abstand);
}

.container {
  max-width: 1100px;
  margin: 0 auto;
}

.abschnitt-titel {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--dunkel);
}

.abschnitt-untertitel {
  text-align: center;
  color: var(--grau);
  margin-bottom: 3rem;
}

/* ===== KARTEN (Leistungen & Vorteile) ===== */
.karten-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.karte {
  background: var(--weiss);
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: box-shadow 0.2s, transform 0.2s;
}

.karte:hover {
  box-shadow: 0 4px 20px rgba(46,125,50,0.15);
  transform: translateY(-3px);
}

.karte-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.karte h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--gruen-dunkel);
}

.karte p {
  color: var(--grau);
  font-size: 0.95rem;
}

/* ===== HIGHLIGHT-STREIFEN ===== */
.highlight-streifen {
  background: var(--gruen);
  color: var(--weiss);
  text-align: center;
  padding: 2rem var(--abstand);
}

.highlight-streifen h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.highlight-streifen p {
  opacity: 0.9;
  margin-bottom: 1.5rem;
}

/* ===== ÜBER UNS SEITE ===== */
.ueber-uns-inhalt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.ueber-uns-text h2 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--gruen-dunkel);
  margin-bottom: 1rem;
}

.ueber-uns-text p {
  color: var(--grau);
  margin-bottom: 1rem;
}

.vorteile-liste {
  list-style: none;
  margin-top: 1rem;
}

.vorteile-liste li {
  padding: 0.4rem 0;
  color: var(--dunkel);
}

.vorteile-liste li::before {
  content: "✓ ";
  color: var(--gruen);
  font-weight: 700;
}

.ueber-uns-bild {
  background: url('images/ueber-uns.jpg') center / cover no-repeat;
  border-radius: 12px;
  height: 320px;
}

/* ===== KONTAKTSEITE ===== */
.kontakt-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.kontakt-info h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gruen-dunkel);
  margin-bottom: 1.5rem;
}

.kontakt-zeile {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.kontakt-zeile-icon {
  font-size: 1.4rem;
  min-width: 30px;
}

.kontakt-zeile-text strong {
  display: block;
  font-weight: 600;
  color: var(--dunkel);
}

.kontakt-zeile-text span {
  color: var(--grau);
}

/* Formular */
.formular {
  background: var(--hellgrau);
  padding: 2rem;
  border-radius: 10px;
}

.formular h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gruen-dunkel);
  margin-bottom: 1.5rem;
}

.formular-gruppe {
  margin-bottom: 1.2rem;
}

.formular-gruppe label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
}

.formular-gruppe input,
.formular-gruppe textarea,
.formular-gruppe select {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-family: inherit;
  font-size: 1rem;
  background: var(--weiss);
  transition: border-color 0.2s;
}

.formular-gruppe input:focus,
.formular-gruppe textarea:focus,
.formular-gruppe select:focus {
  outline: none;
  border-color: var(--gruen);
}

.formular-gruppe textarea {
  resize: vertical;
  min-height: 120px;
}

.formular-erfolg {
  display: none;
  background: #e8f5e9;
  color: var(--gruen-dunkel);
  padding: 1rem;
  border-radius: 6px;
  margin-top: 1rem;
  text-align: center;
  font-weight: 600;
}

/* ===== (NEU) ANFRAGE-ASSISTENT (WIZARD) ===== */

/* Fortschrittsanzeige */
.wizard-fortschritt {
  display: flex;
  justify-content: space-between;
  gap: 0.3rem;
  margin-bottom: 1.5rem;
}

.fortschritt-schritt {
  flex: 1;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--grau);
}

.fortschritt-schritt span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 auto 0.4rem;
  border-radius: 50%;
  background: #d0d0d0;
  color: var(--weiss);
  font-size: 0.95rem;
}

.fortschritt-schritt.aktiv {
  color: var(--gruen-dunkel);
}

.fortschritt-schritt.aktiv span,
.fortschritt-schritt.erledigt span {
  background: var(--gruen);
}

/* Ein Schritt ist nur sichtbar, wenn er "aktiv" ist */
.wizard-step {
  display: none;
}

.wizard-step.aktiv {
  display: block;
}

.wizard-frage {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: var(--dunkel);
}

/* Auswahlkarten (Reinigungsart) */
.auswahl-karten {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.auswahl-karte {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.auswahl-karte:hover {
  border-color: var(--gruen-hell);
}

.auswahl-karte.aktiv {
  border-color: var(--gruen);
  background: #e8f5e9;
}

.auswahl-karte input {
  width: 18px;
  height: 18px;
  accent-color: var(--gruen);
}

.auswahl-karte span {
  font-weight: 600;
}

/* Detailgruppen in Schritt 2: nur die passende ist sichtbar */
.detail-gruppe {
  display: none;
}

.detail-gruppe.aktiv {
  display: block;
}

/* Button-Reihe unten (Zurück / Weiter) */
.wizard-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* Hinweis-/Fehlertext innerhalb eines Schrittes */
.wizard-hinweis {
  display: none;
  color: #c0392b;
  font-size: 0.9rem;
  margin-top: 0.8rem;
}

.wizard-hinweis.sichtbar {
  display: block;
}

.datenschutz-hinweis {
  font-size: 0.8rem;
  color: var(--grau);
  margin-top: 1rem;
}

/* Fehlermeldung nach dem Absenden (Rückfallebene) */
.formular-fehler {
  display: none;
  background: #fdecea;
  color: #c0392b;
  padding: 1rem;
  border-radius: 6px;
  margin-top: 1rem;
  text-align: center;
  font-weight: 600;
}

.formular-fehler a {
  color: #c0392b;
  text-decoration: underline;
}

/* ===== GRAUER HINTERGRUND ===== */
.grauer-hintergrund {
  background: var(--hellgrau);
}

/* ===== FOOTER ===== */
footer {
  background: var(--dunkel);
  color: #bdbdbd;
  padding: 2.5rem var(--abstand);
  text-align: center;
}

footer .footer-logo {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--weiss);
  margin-bottom: 0.5rem;
}

footer p {
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
}

footer a {
  color: var(--gruen-hell);
}

footer a:hover {
  text-decoration: underline;
}

/* ===== SEITENHEADER (Unterseiten) ===== */
.seiten-header {
  background: #f7faf8;
  color: var(--dunkel);
  padding: 3rem var(--abstand);
  text-align: center;
  border-bottom: 1px solid #eef2ef;
}

.seiten-header h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.seiten-header p {
  color: var(--grau);
  font-size: 1.05rem;
}

/* ===== RECHTSTEXTE (Impressum & Datenschutz) ===== */
.rechtstext {
  max-width: 760px;
  margin: 0 auto;
  color: var(--grau);
}

.rechtstext h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--gruen-dunkel);
  margin: 2rem 0 0.75rem;
}

.rechtstext h2:first-child {
  margin-top: 0;
}

.rechtstext p {
  margin-bottom: 1rem;
}

.rechtstext ul {
  margin: 0 0 1rem 1.2rem;
}

.rechtstext li {
  margin-bottom: 0.4rem;
}

.rechtstext strong {
  color: var(--dunkel);
}

.rechtstext a {
  color: var(--gruen);
}

.rechtstext a:hover {
  text-decoration: underline;
}

/* ===== RESPONSIVE (Handy) ===== */
@media (max-width: 768px) {
  .hamburger {
    display: flex;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--weiss);
    border-bottom: 2px solid var(--gruen);
    padding: 1rem 0;
  }

  .nav-links.offen {
    display: flex;
  }

  .nav-links li {
    padding: 0.7rem 1.5rem;
    border-bottom: 1px solid #f0f0f0;
  }

  .hero h1 {
    font-size: 1.7rem;
  }

  .hero {
    padding: 3.5rem var(--abstand);
  }

  .ueber-uns-inhalt {
    grid-template-columns: 1fr;
  }

  .ueber-uns-bild {
    height: 200px;
  }

  .kontakt-raster {
    grid-template-columns: 1fr;
  }

  .abschnitt-titel {
    font-size: 1.5rem;
  }
}

/* ===== (NEU) ANRUF-BUTTON IM HEADER ===== */
.nav-aktionen {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.btn-telefon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--gruen);
  color: var(--weiss);
  padding: 0.7rem 1.4rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
  transition: background 0.2s;
}

.btn-telefon:hover {
  background: var(--gruen-dunkel);
}

/* ===== (NEU) HERO: ZWEI BUTTONS + VERTRAUENS-ZEILE ===== */
.hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-umriss {
  background: transparent;
  color: var(--gruen-dunkel);
  border: 2px solid var(--gruen);
}

.btn-umriss:hover {
  background: #e8f5e9;
}

.hero-trust {
  margin-top: 1.5rem;
  font-size: 0.95rem;
  color: var(--grau);
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-trust .check {
  color: var(--gruen);
  font-weight: 700;
}

/* ===== (NEU) 3-SCHRITTE-ABLAUF ===== */
.ablauf-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.ablauf-schritt {
  text-align: center;
  padding: 1rem;
}

.ablauf-nummer {
  width: 60px;
  height: 60px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--gruen);
  color: var(--weiss);
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ablauf-schritt h3 {
  font-size: 1.15rem;
  color: var(--gruen-dunkel);
  margin-bottom: 0.5rem;
}

.ablauf-schritt p {
  color: var(--grau);
  font-size: 0.95rem;
}

/* ===== (NEU) INHABER-ZITAT ===== */
.inhaber-zitat {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.inhaber-zitat blockquote {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--dunkel);
  font-style: italic;
  margin-bottom: 1rem;
}

.inhaber-zitat .inhaber-name {
  font-weight: 700;
  color: var(--gruen-dunkel);
}

.inhaber-zitat .inhaber-rolle {
  color: var(--grau);
  font-size: 0.95rem;
}

/* ===== (NEU) UMWELT-BOX ===== */
.umwelt-banner {
  background: #e8f5e9;
  border: 1px solid #c8e6c9;
  border-radius: 10px;
  padding: 1.5rem 2rem;
  text-align: center;
  margin-top: 2.5rem;
}

.umwelt-banner h3 {
  color: var(--gruen-dunkel);
  font-size: 1.2rem;
  margin-bottom: 0.4rem;
}

.umwelt-banner p {
  color: #388e3c;
  font-size: 0.97rem;
  max-width: 640px;
  margin: 0 auto;
}

/* ===== (NEU) REFERENZ-KARTEN (Kundenstimmen) ===== */
.referenz-karte {
  background: var(--weiss);
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 2rem;
  text-align: left;
}

.referenz-karte .zitat {
  font-style: italic;
  color: var(--dunkel);
  line-height: 1.6;
  margin-bottom: 1.2rem;
}

.referenz-karte .autor {
  font-weight: 700;
  color: var(--gruen-dunkel);
}

.referenz-karte .autor-firma {
  color: var(--grau);
  font-size: 0.9rem;
}

/* ===== (NEU) PARTNER-LOGOS ===== */
.partner-logo {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hellgrau);
  border-radius: 8px;
  color: var(--grau);
  font-weight: 700;
  margin-bottom: 1rem;
}

.partner-logo img {
  max-height: 70px;
  width: auto;
}

/* ===== (NEU) RESPONSIVE FÜR NEUE ELEMENTE ===== */
@media (max-width: 768px) {
  .logo-img {
    height: 58px;
  }

  .btn-telefon {
    padding: 0.5rem 0.9rem;
    font-size: 0.9rem;
  }

  .nav-aktionen {
    gap: 0.6rem;
  }
}

/* ===== (NEU) "WARUM LUMINEX?" – 5 KARTEN (3 oben, 2 mittig darunter) ===== */
/* Sechs-Spalten-Raster: jede Karte belegt 2 Spalten → 3 Karten pro Reihe.
   Karte 4 und 5 werden in der zweiten Reihe mittig positioniert. */
.raster-fuenf {
  grid-template-columns: repeat(6, 1fr);
}

.raster-fuenf .karte {
  grid-column: span 2;
}

.raster-fuenf .karte:nth-child(4) {
  grid-column: 2 / span 2;
}

.raster-fuenf .karte:nth-child(5) {
  grid-column: 4 / span 2;
}

/* Auf dem Handy alle Karten untereinander */
@media (max-width: 768px) {
  .raster-fuenf {
    grid-template-columns: 1fr;
  }

  .raster-fuenf .karte,
  .raster-fuenf .karte:nth-child(4),
  .raster-fuenf .karte:nth-child(5) {
    grid-column: auto;
  }
}

/* ===== (NEU) UMSCHALT-LINK ZWISCHEN KURZFORMULAR & WIZARD ===== */
.formular-umschalten {
  text-align: center;
  font-size: 0.9rem;
  margin-top: 1.2rem;
  color: var(--grau);
}

.formular-umschalten a {
  color: var(--gruen-dunkel);
  font-weight: 600;
  text-decoration: underline;
}

.formular-umschalten a:hover {
  color: var(--gruen);
}