/* ============================================================
   Der Hausmeister Haake · Gelsenkirchen
   Heller, freundlicher Auftritt: Salbei- und Laubgrün,
   weiße Karten, feine Linien-Icons, viel Luft.
   Mobile-first · keine externen Abhängigkeiten
   ============================================================ */

:root {
  --gruen:        #4B9F2E;
  --gruen-dunkel: #3A7C23;
  --gruen-tief:   #1E3D2A;
  --gruen-blass:  #E9F4DC;
  --gruen-linie:  #CFE3B8;

  --bg:           #F2F8EA;
  --flaeche:        #FFFFFF;
  --text:         #2F4034;
  --text-hell:    #62755F;
  --linie:        #DEEACF;
  --titel:        #1E3D2A;

  --schatten:      0 2px 10px rgba(37, 68, 34, .06);
  --schatten-hoch: 0 10px 30px rgba(37, 68, 34, .12);

  --radius: 14px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --breite: 1400px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;
  /* Hintergrundbild: Rasenstruktur mit Laub und Gras */
  background-image: url("/images/hintergrund-hell.jpg?v=202607300417");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Staketenzaun – Trennband zwischen Abschnitten */
.zaunband { display: none; }

/* Mauerwerk – Bordüre im Ziegelverband */
.ziegelband { display: none; }

/* Abschnitt mit dezentem Mauerwerk im Hintergrund */
.abschnitt-ziegel { background-image: url("/images/hintergrund-hell-mauer.jpg?v=202607300417"); background-size: cover; background-position: center top; background-repeat: no-repeat; background-attachment: fixed; }

/* Grasbordüre – schließt Abschnitte nach unten ab */
.grasband { display: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--gruen); color: #fff; }

.wrap { max-width: var(--breite); margin: 0 auto; padding: 0 20px; }
@media (min-width: 1100px) { .wrap { padding: 0 40px; } }

h1, h2, h3, h4 { color: var(--titel); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }

.ueberzeile {
  font-size: .78rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gruen);
}
.pfeil { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Infoleiste ---------- */
.infoleiste {
  background: var(--gruen-blass);
  border-bottom: 1px solid var(--gruen-linie);
  font-size: .85rem; color: var(--text-hell);
}
.infoleiste .wrap { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-top: 9px; padding-bottom: 9px; }
.infoleiste span, .infoleiste a { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.infoleiste a { color: var(--titel); font-weight: 700; text-decoration: none; }
.infoleiste a:hover { color: var(--gruen); }
.infoleiste svg { width: 15px; height: 15px; flex: none; stroke: var(--gruen); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 620px) { .infoleiste .ort span { display: none; } }

/* ---------- Kopfzeile ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}
.site-header .wrap { display: flex; align-items: center; gap: 18px; min-height: 80px; }

.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.marke .signet { width: 46px; height: 46px; flex: none; }
.marke strong {
  font-size: clamp(.98rem, 2.6vw, 1.24rem); font-weight: 800; letter-spacing: .04em;
  color: var(--titel); white-space: nowrap; text-transform: uppercase;
}

.kopf-aktionen { display: flex; align-items: center; gap: 12px; margin-left: auto; }

.menue-schalter {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 0 11px; flex: none;
  background: none; border: 1px solid var(--gruen-linie); border-radius: 10px; cursor: pointer;
}
.menue-schalter span { height: 2px; background: var(--titel); border-radius: 2px; }
.menue-schalter[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menue-schalter[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menue-schalter[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.haupt-nav { display: none; }
.haupt-nav.offen {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--flaeche); border-bottom: 1px solid var(--linie); box-shadow: var(--schatten);
}
.haupt-nav ul { list-style: none; padding: 8px 20px 20px; }
.haupt-nav a {
  display: block; padding: 13px 4px; text-decoration: none;
  font-weight: 600; color: var(--text); border-bottom: 1px solid var(--linie);
}
.haupt-nav a:hover, .haupt-nav a[aria-current="page"] { color: var(--gruen); }

@media (min-width: 1120px) {
  .menue-schalter { display: none; }
  .haupt-nav { display: block !important; position: static; background: none; border: 0; box-shadow: none; margin: 0 auto; }
  .haupt-nav ul { display: flex; align-items: center; gap: 6px; padding: 0; }
  .haupt-nav a { padding: 10px 14px; font-size: .97rem; border: 0; position: relative; white-space: nowrap; }
  .haupt-nav a[aria-current="page"] { color: var(--gruen); }
  .haupt-nav a[aria-current="page"]::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px;
    height: 2px; background: var(--gruen); border-radius: 2px;
  }
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border-radius: 10px;
  font-size: 1rem; font-weight: 700; text-decoration: none;
  border: 2px solid transparent; cursor: pointer; transition: background .16s, border-color .16s, color .16s;
}
.knopf svg { width: 19px; height: 19px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.knopf-gruen { background: var(--gruen); color: #fff; box-shadow: var(--schatten); }
.knopf-gruen:hover { background: var(--gruen-dunkel); }
.knopf-weiss { background: var(--flaeche); color: var(--titel); border-color: var(--gruen-linie); }
.knopf-weiss:hover { border-color: var(--gruen); color: var(--gruen); }
.knopf-text {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 2px;
  font-weight: 700; color: var(--titel); text-decoration: none;
  border-bottom: 2px solid var(--gruen);
}
.knopf-text:hover { color: var(--gruen); }
.kopf-cta { display: none; }
@media (min-width: 900px) { .kopf-cta { display: inline-flex; padding: 13px 24px; white-space: nowrap; } }

/* ---------- Auftakt ---------- */
.auftakt { padding: 34px 0 10px; position: relative; overflow: hidden; }
/* große Blattsilhouetten als Randdekor */
.auftakt::before { content: none; }
@media (max-width: 999px) { .auftakt::before { width: 220px; height: 340px; left: -80px; opacity: .7; } }
.auftakt > .wrap { position: relative; z-index: 1; }
.auftakt-raster { display: grid; gap: 30px; align-items: center; }
@media (min-width: 1000px) { .auftakt-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; } }

.auftakt-text h1 { font-size: clamp(2rem, 5.4vw, 3.3rem); margin-top: 14px; }
.auftakt-text > p { margin-top: 18px; color: var(--text-hell); font-size: 1.08rem; max-width: 34rem; }
.auftakt-knoepfe { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; }

.merkmale { margin-top: 34px; display: grid; gap: 14px; }
@media (min-width: 560px) { .merkmale { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } }
.merkmal { display: flex; align-items: center; gap: 12px; }
@media (min-width: 560px) {
  .merkmal { padding: 0 16px; border-left: 1px solid var(--gruen-linie); }
  .merkmal:first-child { padding-left: 0; border-left: 0; }
}
.merkmal .kreis {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--gruen-linie); display: flex; align-items: center; justify-content: center;
}
.merkmal .kreis svg { width: 21px; height: 21px; stroke: var(--gruen); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.merkmal span { font-size: .92rem; font-weight: 600; color: var(--text); }

/* Auftaktbild */
.auftakt-bild { position: relative; }
.auftakt-bild img {
  width: 100%; height: 100%; min-height: 280px; max-height: 560px; object-fit: cover;
  border-radius: var(--radius);
  clip-path: polygon(56px 0, 100% 0, 100% 100%, 0 100%, 0 56px);
}
@media (min-width: 1000px) { .auftakt-bild img { min-height: 520px; } }
.bild-plakette {
  position: absolute; left: 16px; bottom: 16px;
  background: var(--flaeche); border-radius: 12px; box-shadow: var(--schatten-hoch);
  padding: 13px 20px 13px 15px; display: flex; align-items: center; gap: 12px;
  max-width: calc(100% - 32px);
}
.bild-plakette .kreis {
  width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--gruen-blass);
  display: flex; align-items: center; justify-content: center;
}
.bild-plakette .kreis svg { width: 21px; height: 21px; stroke: var(--gruen); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bild-plakette strong { display: block; color: var(--titel); font-size: .98rem; line-height: 1.3; }
.bild-plakette span { display: block; color: var(--gruen); font-size: .94rem; font-weight: 600; }

/* ---------- Leistungskarten ---------- */
.leistungen {
  padding: 48px 0 34px;
  background: linear-gradient(180deg, rgba(75, 159, 46, 0) 0%, rgba(75, 159, 46, .07) 100%);
}
.karten { display: grid; gap: 18px; margin-top: 22px; }
@media (min-width: 620px) { .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .karten { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.karte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 24px 22px 26px; text-decoration: none; display: flex; flex-direction: column;
  box-shadow: var(--schatten); transition: border-color .16s, box-shadow .16s;
}
.karte:hover { border-color: var(--gruen); box-shadow: var(--schatten-hoch); }
.karte-kopf { display: flex; align-items: center; gap: 12px; }
.karte-kopf svg { width: 30px; height: 30px; flex: none; stroke: var(--gruen); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.karte h3 { font-size: 1.1rem; }
.karte .strich { width: 34px; height: 3px; background: var(--gruen); border-radius: 2px; margin: 12px 0 14px; }
.karte p { font-size: .93rem; color: var(--text-hell); flex: 1; }
.karte .mehr { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; color: var(--gruen); font-weight: 700; font-size: .9rem; }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: 56px 0; }
.abschnitt-weiss { background: var(--flaeche); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.abschnitt-kopf { max-width: 46rem; margin-bottom: 34px; }
.abschnitt-kopf h2 { font-size: clamp(1.7rem, 4.4vw, 2.5rem); margin-top: 12px; }
.abschnitt-kopf p { margin-top: 14px; color: var(--text-hell); font-size: 1.04rem; }
.abschnitt-kopf .strich { width: 54px; height: 3px; background: var(--gruen); border-radius: 2px; margin-bottom: 16px; }

/* ---------- Zweispalter ---------- */
.duo { display: grid; gap: 32px; align-items: center; }
@media (min-width: 940px) { .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } .duo.bild-links .duo-bild { order: -1; } }
.duo-bild img { width: 100%; border-radius: var(--radius); box-shadow: var(--schatten); object-fit: cover; }
.duo-bild figcaption { margin-top: 10px; font-size: .86rem; color: var(--text-hell); }
.duo h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); margin-bottom: 16px; }
.duo p { color: var(--text-hell); }
.duo p + p { margin-top: 13px; }
.duo strong { color: var(--text); }

.punkte { list-style: none; display: grid; gap: 12px; margin-top: 22px; }
.punkte li { position: relative; padding-left: 32px; color: var(--text); }
.punkte li::before {
  content: ""; position: absolute; left: 0; top: .3em; width: 20px; height: 20px;
  border-radius: 50%; background: var(--gruen-blass);
}
.punkte li::after {
  content: ""; position: absolute; left: 6px; top: .68em; width: 8px; height: 4px;
  border-left: 2px solid var(--gruen); border-bottom: 2px solid var(--gruen);
  transform: rotate(-45deg);
}

/* ---------- Zahlen ---------- */
.zahlen { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 560px) { .zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zahl { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 20px; box-shadow: var(--schatten); }
.zahl strong { display: block; font-size: 1.7rem; color: var(--gruen); line-height: 1.1; }
.zahl span { font-size: .88rem; color: var(--text-hell); }

/* ---------- Referenzen ---------- */
.referenz { display: grid; gap: 26px; padding: 32px 0; border-top: 1px solid var(--linie); }
.referenz:first-of-type { border-top: 0; padding-top: 0; }
@media (min-width: 940px) { .referenz { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; } }
.referenz h3 { font-size: 1.35rem; margin-bottom: 12px; }
.referenz p { color: var(--text-hell); }
.referenz-bilder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.referenz-bilder img { width: 100%; height: 165px; object-fit: cover; border-radius: 10px; box-shadow: var(--schatten); }
.referenz-bilder img.breit { grid-column: 1 / -1; height: 230px; }

/* ---------- Notdienst ---------- */
.notdienst {
  background: var(--gruen-tief); color: #fff; border-radius: var(--radius);
  padding: 32px 26px; display: grid; gap: 20px; box-shadow: var(--schatten-hoch);
}
@media (min-width: 860px) { .notdienst { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 40px 46px; } }
.notdienst h2 { color: #fff; font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin: 10px 0 8px; }
.notdienst p { color: #C8DDBE; max-width: 46rem; }
.notdienst .ueberzeile { color: #8FD16A; }
.notdienst .knopf-gruen { background: var(--gruen); color: #fff; font-size: 1.1rem; }
.notdienst .knopf-gruen:hover { background: #57B336; }

/* ---------- Kontakt ---------- */
.kontakt-raster { display: grid; gap: 18px; }
@media (min-width: 620px) { .kontakt-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .kontakt-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kontakt-feld { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 24px 22px; box-shadow: var(--schatten); }
.kontakt-feld .kreis {
  width: 42px; height: 42px; border-radius: 50%; background: var(--gruen-blass);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.kontakt-feld .kreis svg { width: 20px; height: 20px; stroke: var(--gruen); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.kontakt-feld h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-hell); font-weight: 700; }
.kontakt-feld a, .kontakt-feld .wert { display: block; margin-top: 8px; font-size: 1.12rem; font-weight: 700; color: var(--titel); text-decoration: none; word-break: break-word; }
.kontakt-feld a:hover { color: var(--gruen); }
.kontakt-feld small { display: block; margin-top: 6px; color: var(--text-hell); font-size: .86rem; }

/* ---------- Unterseiten ---------- */
.seiten-kopf { padding: 26px 0 40px; }
.seiten-kopf h1 { font-size: clamp(1.9rem, 5vw, 2.9rem); margin-top: 14px; }
.seiten-kopf .einleitung { margin-top: 16px; color: var(--text-hell); max-width: 46rem; font-size: 1.06rem; }
.brotkrumen { font-size: .86rem; color: var(--text-hell); }
.brotkrumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.brotkrumen li + li::before { content: "/"; margin-right: 8px; color: var(--gruen-linie); }
.brotkrumen a { text-decoration: none; color: var(--text-hell); }
.brotkrumen a:hover { color: var(--gruen); }

.liste { list-style: none; display: grid; gap: 12px; margin-top: 22px; }
@media (min-width: 760px) { .liste.zweispaltig { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.liste li {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px;
  padding: 15px 18px 15px 44px; position: relative; font-size: .96rem; box-shadow: var(--schatten);
}
.liste li::before {
  content: ""; position: absolute; left: 16px; top: 1.15em; width: 18px; height: 18px;
  border-radius: 50%; background: var(--gruen-blass);
}
.liste li::after {
  content: ""; position: absolute; left: 21px; top: 1.5em; width: 7px; height: 3.5px;
  border-left: 2px solid var(--gruen); border-bottom: 2px solid var(--gruen); transform: rotate(-45deg);
}

/* ---------- Rechtstexte ---------- */
.rechtstext { max-width: 62ch; }
.rechtstext h2 { font-size: 1.2rem; margin: 30px 0 10px; }
.rechtstext p { color: var(--text-hell); }
.rechtstext p + p { margin-top: 10px; }
.rechtstext a { color: var(--gruen); }
.rechtstext address { font-style: normal; }

/* ---------- Fußzeile ---------- */
.site-footer { background: var(--gruen-tief); color: #C3D6BA; padding: 50px 0 0; margin-top: 10px; }
.footer-raster { display: grid; gap: 32px; padding-bottom: 32px; }
@media (min-width: 860px) { .footer-raster { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); } }
.footer-marke { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-marke .signet { width: 44px; height: 44px; }
.footer-marke strong { color: #fff; font-size: 1.08rem; letter-spacing: .04em; text-transform: uppercase; }
.site-footer p { color: #A9C29F; font-size: .94rem; max-width: 30rem; }
.site-footer h4 { color: #fff; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 15px; }
.site-footer ul { list-style: none; display: grid; gap: 10px; }
.site-footer ul a { color: #C3D6BA; text-decoration: none; font-size: .95rem; }
.site-footer ul a:hover { color: #fff; }
.footer-unten {
  border-top: 1px solid rgba(255, 255, 255, .14); padding: 18px 0; font-size: .85rem;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; color: #9CB693;
}
.footer-unten a { color: #9CB693; text-decoration: none; }
.footer-unten a:hover { color: #fff; }

/* ---------- Mobiler Anrufbalken ---------- */
.anrufbalken { display: none; }
@media (max-width: 899px) {
  .anrufbalken {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--flaeche); border-top: 1px solid var(--linie);
  }
  .anrufbalken a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 8px; border-radius: 10px; font-weight: 700; font-size: .95rem; text-decoration: none;
  }
  .anrufbalken svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .anrufbalken .a-tel { background: var(--gruen); color: #fff; }
  .anrufbalken .a-mail { background: var(--gruen-blass); color: var(--titel); }
  body { padding-bottom: 66px; }
}

/* ---------- Zubehör ---------- */
.sprungmarke { position: absolute; left: -9999px; top: 0; background: var(--gruen); color: #fff; padding: 12px 18px; z-index: 100; font-weight: 700; }
.sprungmarke:focus { left: 0; }
:where(a, button):focus-visible { outline: 3px solid var(--gruen); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Merkkasten (statt Personenfoto) ---------- */
.merkkasten {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 30px 28px; box-shadow: var(--schatten);
}
.merkkasten .gross {
  margin-top: 12px; font-size: 1.24rem; line-height: 1.45; color: var(--titel); font-weight: 700;
}
.merkkasten p + p { margin-top: 14px; }
.merkkasten p:last-child { margin-bottom: 0; }

/* Auf Mobilgeraeten kein fixierter Hintergrund (ruckelt auf iOS) */
@media (max-width: 900px) {
  body, .abschnitt-ziegel { background-attachment: scroll; }
}