/* Hausmeisterservice Junker — Stylesheet
   Farbwelt und Formensprache uebernommen von der bisherigen Website.
   Bewusst keine Google Fonts: die wuerden IP-Adressen der Besucher an Google
   uebertragen (LG Muenchen I, Az. 3 O 17493/20). Diese Seite laedt nichts
   von fremden Servern — deshalb ist auch kein Cookie-Banner noetig. */

:root{
  --gruen-dunkel:#386641;
  --gruen:#6a994e;
  --gruen-hell:#a1c48c;
  --limette:#a7c957;
  --creme:#f2e8cf;
  --creme-tief:#e7d9b6;
  --braun:#69462e;
  --braun-tief:#573723;
  --blau:#2e6491;
  --rot:#bc4749;
  --tinte:#26170e;
  --radius:34px;
  --radius-s:20px;
  --breite:1120px;
  --display:"Bookman Old Style","Bookman","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --text:"Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--text);font-size:17.5px;line-height:1.65;
  color:var(--tinte);background:var(--creme);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gruen-dunkel);text-underline-offset:3px}
p{margin:0 0 1em}
ul{margin:0 0 1em;padding-left:1.2em}

.wrap{max-width:var(--breite);margin:0 auto;padding:0 22px}
/* Sprunglink unsichtbar parken, ohne die Seite seitlich zu verbreitern */
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{position:fixed;left:0;top:0;width:auto;height:auto;clip-path:none;
  background:var(--gruen-dunkel);color:#fff;padding:12px 18px;z-index:100}
:focus-visible{outline:3px solid var(--rot);outline-offset:3px;border-radius:6px}

/* ---------- Schauschrift ---------- */
h1,h2,.display{
  font-family:var(--display);font-weight:700;
  letter-spacing:-.008em;line-height:1.08;margin:0 0 .35em;
  text-transform:none;
}
h1{font-size:clamp(2.1rem,7.4vw,4.1rem)}
h2{font-size:clamp(1.5rem,4.4vw,2.55rem)}
/* Lange Komposita wie "Hausmeisterservice" muessen umbrechen duerfen,
   sonst laufen sie auf schmalen Displays aus der Seite. lang="de" liefert die Trennstellen. */
h1,h2,.display,.zitat p{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
h3{font-family:var(--text);font-weight:700;font-size:1.1rem;line-height:1.3;margin:0 0 .35em}
/* Cremeschrift auf dunklem Grund, mit Tiefenschatten wie bisher */
.auf-dunkel h1,.auf-dunkel h2,.auf-dunkel .display{
  color:var(--creme);text-shadow:2px 3px 0 rgba(20,12,6,.34);
}
/* Dunkelgruene Schrift auf hellem Grund, mit Cremekontur */
.auf-hell h1,.auf-hell h2,.auf-hell .display{
  color:var(--gruen-dunkel);
  text-shadow:2px 2px 0 rgba(242,232,207,.9);
}

/* ---------- Kopfzeile ---------- */
.kopf{position:sticky;top:0;z-index:50;background:var(--creme);border-bottom:3px solid var(--gruen-dunkel)}
.kopf .wrap{display:flex;align-items:center;gap:16px;min-height:74px}
.marke{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--braun)}
.marke svg{width:46px;height:46px;flex:0 0 auto}
.marke b{font-family:var(--display);font-weight:700;font-size:1.14rem;letter-spacing:-.005em;line-height:1.15;display:block;color:var(--gruen-dunkel)}
.marke small{display:block;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--braun);font-weight:600}
.nav{margin-left:auto;display:flex;align-items:center;gap:24px}
.nav a{color:var(--braun);text-decoration:none;font-size:.95rem;font-weight:700}
.nav a:hover{color:var(--gruen-dunkel)}
.nav a.btn-p,.nav a.btn-p:hover{color:var(--creme)}
.nav a.btn-s{color:var(--gruen-dunkel)}
@media(max-width:780px){
  .nav a:not(.btn){display:none}
  /* Der Anrufen-Button waere neben dem Markennamen zu breit;
     unten laeuft ohnehin die feste Anrufleiste mit. */
  .nav a.btn{display:none}
  .marke b{font-size:1rem}
  .marke img{width:42px;height:42px}
}

/* ---------- Schaltflaechen ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:999px;font-weight:800;font-size:1.02rem;
  text-decoration:none;border:3px solid transparent;
  transition:transform .12s ease,box-shadow .12s ease;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:20px;height:20px;flex:0 0 auto}
.btn-p{background:var(--gruen-dunkel);color:var(--creme);box-shadow:0 4px 0 var(--braun-tief)}
.btn-p:hover{background:#2f5537;color:var(--creme);box-shadow:0 6px 0 var(--braun-tief)}
.btn-s{background:var(--creme);color:var(--gruen-dunkel);border-color:var(--gruen-dunkel);box-shadow:0 4px 0 rgba(56,102,65,.35)}
.btn-s:hover{background:#fff;color:var(--gruen-dunkel)}

/* ---------- Farbbloecke ---------- */
section{padding:clamp(52px,8vw,92px) 0}
.blk-hell{background:var(--gruen-hell)}
.blk-gruen{background:var(--gruen)}
.blk-braun{background:var(--braun)}
.blk-creme{background:var(--creme)}
.auf-dunkel{color:var(--creme)}
.auf-dunkel a{color:var(--creme)}

.sec-kopf{max-width:54ch;margin-bottom:2.1em}
.sec-kopf p{margin-bottom:0;font-size:1.06rem;opacity:.92}
.eyebrow{
  display:inline-block;font-family:var(--text);font-size:.78rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:.9em;opacity:.85;
}

/* ---------- Hero ---------- */
.hero{padding:clamp(44px,7vw,76px) 0 clamp(44px,7vw,72px)}
.hero-grid{display:grid;gap:34px;grid-template-columns:minmax(0,1fr);align-items:center}
@media(min-width:900px){.hero-grid{grid-template-columns:280px minmax(0,1fr);gap:48px}}
.hero-logo{width:min(260px,62vw);margin:0 auto}
.hero .lead{
  font-size:clamp(1.1rem,2.4vw,1.34rem);font-weight:600;
  color:var(--braun-tief);max-width:34ch;margin-bottom:1.5em;
}
.hero-akt{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:1.7em}
.hero-fakten{display:flex;flex-wrap:wrap;gap:9px 24px;font-size:.96rem;font-weight:700;color:var(--braun-tief)}
.hero-fakten span{display:flex;align-items:center;gap:8px}
.hero-fakten svg{width:18px;height:18px;color:var(--gruen-dunkel);flex:0 0 auto}

/* Zitatband */
.zitat{background:var(--gruen-dunkel);padding:clamp(38px,6vw,60px) 0}
.zitat p{
  font-family:var(--display);font-weight:700;text-transform:none;
  font-size:clamp(1.5rem,3.6vw,2.35rem);line-height:1.22;
  color:var(--creme);text-shadow:3px 3px 0 rgba(20,12,6,.38);
  max-width:22ch;margin:0 auto;text-align:center;
}

/* ---------- Leistungen ---------- */
.leistungen{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.karte{background:var(--creme);border-radius:var(--radius);padding:26px 24px;color:var(--tinte)}
.karte-ico{
  width:48px;height:48px;border-radius:14px;background:var(--gruen-hell);
  display:flex;align-items:center;justify-content:center;margin-bottom:15px;
}
.karte-ico svg{width:25px;height:25px;color:var(--gruen-dunkel)}
.karte h3{color:var(--braun);font-size:1.14rem}
.karte p{font-size:.95rem;margin:0;color:#4a3626}
.karte.stark{background:var(--gruen-dunkel)}
.karte.stark h3{color:var(--limette)}
.karte.stark p{color:rgba(242,232,207,.9)}
.karte.stark .karte-ico{background:rgba(242,232,207,.18)}
.karte.stark .karte-ico svg{color:var(--limette)}

/* ---------- Ablauf ---------- */
.ablauf{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr));counter-reset:s}
.schritt{counter-increment:s;padding-top:60px;position:relative}
.schritt::before{
  content:counter(s);position:absolute;top:0;left:0;width:46px;height:46px;
  border-radius:50%;background:var(--gruen-dunkel);color:var(--creme);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:1.25rem;
}
.schritt h3{color:var(--braun)}
.schritt p{font-size:.96rem;margin:0;color:#4a3626}

/* ---------- Orte ---------- */
.gebiete{display:grid;gap:26px 28px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));margin-bottom:1.6em}
.gebiet h3{font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.8em;opacity:.9}
.orte{display:flex;flex-wrap:wrap;gap:9px;list-style:none;padding:0;margin:0}
.orte li{
  background:var(--creme);border-radius:999px;padding:9px 20px;
  font-size:.95rem;font-weight:800;color:var(--gruen-dunkel);
}

/* ---------- Kontakt ---------- */
.kontakt-grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));align-items:start}
.kontakt-box{background:var(--gruen-dunkel);color:var(--creme);border-radius:var(--radius);padding:30px}
.kontakt-box a{color:var(--creme)}
.kontakt-liste{list-style:none;padding:0;margin:0 0 1.3em}
.kontakt-liste li{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid rgba(242,232,207,.22)}
.kontakt-liste li:last-child{border-bottom:0}
.kontakt-liste svg{width:21px;height:21px;color:var(--creme);opacity:.85;flex:0 0 auto;margin-top:3px}
.kontakt-liste .lbl{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;opacity:.75;font-weight:700}
.kontakt-liste a,.kontakt-liste .wert{font-weight:800;text-decoration:none;word-break:break-word;font-size:1.02rem}
.zeiten{margin:0;font-size:.96rem;opacity:.9}

/* ---------- Fusszeile ---------- */
.fuss{background:var(--braun-tief);color:rgba(242,232,207,.82);padding:38px 0 104px;font-size:.94rem}
.fuss-grid{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center}
.fuss a{color:var(--creme);text-decoration:none;font-weight:700}
.fuss a:hover{text-decoration:underline}
.fuss-recht{margin-left:auto;display:flex;gap:24px}
@media(max-width:620px){.fuss-recht{margin-left:0;width:100%}}

/* ---------- Anrufleiste mobil ---------- */
.rufleiste{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:var(--creme);border-top:3px solid var(--gruen-dunkel);
}
.rufleiste .btn{flex:1;padding:14px 8px;font-size:.98rem}
@media(max-width:780px){.rufleiste{display:flex}}

/* ---------- Rechtstexte ---------- */
.recht{max-width:74ch;padding:clamp(38px,6vw,60px) 0 clamp(56px,7vw,80px)}
.recht h1{margin-bottom:.5em;color:var(--gruen-dunkel);text-shadow:3px 3px 0 var(--creme-tief)}
.recht h2{
  font-size:clamp(1.25rem,2.6vw,1.6rem);color:var(--braun);
  margin-top:1.9em;padding-top:1em;border-top:3px solid var(--creme-tief);
}
.recht h2:first-of-type{margin-top:1.3em}
.recht h3{margin-top:1.6em;color:var(--gruen-dunkel);font-size:1.05rem}
.recht address{font-style:normal;line-height:1.85}
.recht .zurueck{display:inline-flex;align-items:center;gap:8px;font-weight:800;text-decoration:none;margin-bottom:1.5em}
.hinweis{
  background:var(--creme-tief);border-left:7px solid var(--rot);
  padding:18px 22px;border-radius:0 var(--radius-s) var(--radius-s) 0;margin:1.6em 0;font-size:.96rem;
}
.hinweis strong{color:var(--rot)}
.recht code{background:rgba(38,23,14,.09);padding:1px 6px;border-radius:5px;font-size:.92em}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Logo-Bilddatei */
.marke img{width:48px;height:48px;object-fit:contain;flex:0 0 auto}
.hero-logo img{width:100%;height:auto;filter:drop-shadow(0 6px 18px rgba(30,20,10,.18))}

/* ---------- Galerie Vorher/Nachher ---------- */
.paar{margin:0 0 34px}
.paar:last-of-type{margin-bottom:40px}
.paar-bilder{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.paar-bild{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--creme-tief);
  box-shadow:0 3px 0 rgba(87,55,35,.18)}
.paar-bild img,.ergebnis img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.marker{
  position:absolute;top:14px;left:14px;z-index:2;
  background:var(--braun-tief);color:var(--creme);
  padding:6px 15px;border-radius:999px;
  font-size:.76rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
}
.marker.nachher{background:var(--gruen-dunkel)}
.paar figcaption{margin-top:14px;font-size:.98rem;max-width:70ch}
.paar figcaption strong{display:block;font-size:1.08rem;margin-bottom:.2em}
.ergebnisse{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.ergebnis{margin:0}
.ergebnis img{border-radius:var(--radius);box-shadow:0 3px 0 rgba(87,55,35,.18)}
.ergebnis figcaption{margin-top:11px;font-size:.94rem;opacity:.9}


/* ---------- Hinweis auf die Arbeiten (Startseite) ---------- */
.teaser{display:grid;gap:30px;grid-template-columns:minmax(0,1fr);align-items:center}
@media(min-width:900px){.teaser{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:44px}}
.teaser-text .sec-kopf{margin-bottom:0}
.teaser-text p{max-width:42ch}
.teaser-bilder{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.teaser-bilder img{
  width:100%;aspect-ratio:1/1;object-fit:cover;
  border-radius:var(--radius-s);box-shadow:0 3px 0 rgba(87,55,35,.18);
}

/* ---------- Galerie: Bilder nicht ueber die Lesebreite hinaus ---------- */
#galerie .paar,#galerie .ergebnisse{max-width:880px}

/* Zurueck-Link innerhalb des Abschnitts: knapp ueber der Ueberschrift */
#galerie .zurueck{margin-bottom:1.1em}