/* ==========================================================================
   Max Pflasterreinigung – Stylesheet
   Farben laut CD: Dunkelblau #1C3D5A, Orange #FF7A00, Weiss #FFFFFF
   Keine externen Ressourcen (keine Google Fonts, keine CDNs).
   ========================================================================== */

:root {
  --blue:        #1C3D5A;
  --blue-dark:   #12293d;
  --blue-deep:   #0d1f2e;
  --blue-mid:    #2b5a80;
  --orange:      #FF7A00;
  --orange-dark: #e56d00;

  --text:   #23323d;
  --muted:  #57697a;
  --bg:     #ffffff;
  --bg-alt: #f3f6f8;
  --border: #dde5ea;

  --wrap:   1120px;
  --radius: 6px;
  --shadow: 0 2px 10px rgba(28, 61, 90, .08);
  --shadow-lg: 0 10px 34px rgba(28, 61, 90, .16);

  --font: "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, sans-serif;
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); }
h1, h2, h3, h4 {
  color: var(--blue); line-height: 1.2; margin: 0 0 .6em; font-weight: 700;
  /* Bewusst OHNE hyphens: auto - eine automatische Silbentrennung zerlegt
     Woerter wie "Oberflaechenreinigung" mit einem Bindestrich mitten im
     Wort, was unsauber aussieht. Stattdessen ist die Schriftgroesse unten
     so gewaehlt, dass das laengste Wort auch bei 320px in eine Zeile passt.
     break-word bleibt nur als Notnagel gegen seitlichen Ueberlauf. */
  overflow-wrap: break-word;
}
h1 { font-size: clamp(1.6rem, 7.5vw, 3rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.15rem); letter-spacing: -.015em; }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1.1em; }
ul { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .35em; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 760px; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--orange); color: var(--blue-dark);
  padding: 12px 18px; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: 15px 26px;
  font: inherit; font-weight: 700; font-size: 1.02rem;
  text-decoration: none; border: 2px solid transparent; border-radius: var(--radius);
  cursor: pointer; transition: background-color .15s, border-color .15s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--orange); color: var(--blue-dark); border-color: var(--orange); }
.btn--primary:hover { background: var(--orange-dark); border-color: var(--orange-dark); }
.btn--blue { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn--blue:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn--outline { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn--outline:hover { background: var(--blue); color: #fff; }
.btn--onblue { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn--onblue:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.tel-kurz { display: none; }
/* Im Hero stehen beide Knoepfe auch auf dem Handy nebeneinander. Damit das
   ohne Umbruch aufgeht, zeigt der Anruf-Knopf dort nur "Anrufen" - die
   Nummer steht ohnehin in der festen Leiste am unteren Rand, und
   Screenreader lesen sie weiterhin aus dem aria-label. */
@media (max-width: 620px) {
  .hero .btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero .btn-row .btn { padding: 13px 8px; font-size: .92rem; white-space: nowrap; }
  .hero .tel-lang { display: none; }
  .hero .tel-kurz { display: inline; }
}

/* --- Header --------------------------------------------------------------- */
.site-header { background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; }
.header-inner { display: flex; align-items: center; gap: 20px; min-height: 78px; }
.site-logo { flex: 0 0 auto; }
.site-logo img { width: 230px; max-width: 46vw; }
.header-spacer { flex: 1 1 auto; }

.nav-toggle {
  display: none; margin-left: auto;
  background: var(--blue); color: #fff; border: 0; border-radius: var(--radius);
  padding: 11px 15px; font: inherit; font-weight: 700; cursor: pointer;
}
.main-nav ul { display: flex; gap: 1px; list-style: none; margin: 0; padding: 0; }
.main-nav a {
  display: block; padding: 9px 10px; text-decoration: none;
  color: var(--blue); font-weight: 700; font-size: .93rem; border-radius: var(--radius);
  white-space: nowrap;
}
.main-nav a:hover { background: var(--bg-alt); }
.main-nav a[aria-current="page"] { color: var(--orange-dark); box-shadow: inset 0 -3px 0 var(--orange); border-radius: 0; }
.header-phone {
  display: inline-flex; align-items: center; gap: .5em;
  background: var(--orange); color: var(--blue-dark);
  padding: 12px 20px; border-radius: var(--radius);
  text-decoration: none; font-weight: 700; white-space: nowrap;
}
.header-phone:hover { background: var(--orange-dark); }

@media (max-width: 1120px) {
  .nav-toggle { display: block; order: 3; }
  .header-inner { flex-wrap: wrap; min-height: 66px; padding-top: 10px; padding-bottom: 10px; }
  .header-spacer { display: none; }
  .header-phone { order: 2; margin-left: auto; padding: 10px 15px; font-size: .95rem; }
  .main-nav { order: 4; flex-basis: 100%; display: none; }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; padding: 8px 0 14px; gap: 0; }
  .main-nav a { padding: 13px 8px; border-bottom: 1px solid var(--border); border-radius: 0; }
  .main-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--orange); }
}
/* Ohne JS bleibt die Navigation dauerhaft sichtbar */
.no-js .main-nav { display: block; }
.no-js .nav-toggle { display: none; }

/* --- Hero ----------------------------------------------------------------- */
.hero { position: relative; background: var(--blue-deep); color: #fff; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(13,31,46,.94) 0%, rgba(13,31,46,.78) 48%, rgba(13,31,46,.42) 100%);
}
.hero__inner { position: relative; z-index: 2; padding: 74px 0 66px; max-width: 720px; }
.hero h1 { color: #fff; margin-bottom: .35em; }
.hero__claim { color: var(--orange); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .95rem; margin-bottom: 1em; }
.hero__lead { font-size: 1.18rem; color: #e3ecf3; margin-bottom: 1.6em; }
.hero__note { margin-top: 1.5em; font-size: .95rem; color: #b9cbd9; }
.hero__note strong { color: #fff; }

.trustbar { background: var(--blue); color: #fff; }
.trustbar ul { display: flex; flex-wrap: wrap; gap: 8px 40px; list-style: none; margin: 0; padding: 16px 0; }
.trustbar li { display: flex; align-items: center; gap: .5em; font-weight: 700; font-size: .97rem; margin: 0; white-space: nowrap; }
/* Die drei Begriffe bleiben auch auf schmalen Displays in einer Reihe -
   untereinander gestapelt wirken sie wie eine Aufzaehlung statt wie ein
   Guetesiegel. */
@media (max-width: 620px) {
  .trustbar ul { flex-wrap: nowrap; justify-content: space-between; gap: 0; padding: 13px 0; }
  .trustbar li { font-size: .86rem; gap: .35em; }
}
@media (max-width: 380px) {
  .trustbar li { font-size: .8rem; }
}
.trustbar .tick { color: var(--orange); font-size: 1.15em; }

/* --- Sections ------------------------------------------------------------- */
.section { padding: 68px 0; }
.section--alt { background: var(--bg-alt); }
.section--tight { padding: 46px 0; }
.section__head { max-width: 720px; margin-bottom: 40px; }
.section__head p { color: var(--muted); font-size: 1.08rem; margin-bottom: 0; }
.eyebrow { color: var(--orange-dark); font-weight: 700; text-transform: uppercase; letter-spacing: .09em; font-size: .82rem; margin-bottom: .7em; }

/* --- Grids und Karten ----------------------------------------------------- */
.grid { display: grid; gap: 26px; }
/* min(..., 100%) ist Pflicht: Eine nackte Mindestbreite in minmax() wird auch
   dann erzwungen, wenn der Bildschirm schmaler ist - die Spalte ragt dann aus
   dem Fenster und die ganze Seite laesst sich seitlich schieben. */
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
/* Zwei breite Spalten: fuer die Regionskarten (Ortslisten bleiben darin
   zweispaltig) und die Verfugungsmethoden. min() verhindert, dass die
   Mindestbreite auf schmalen Displays ueber den Bildschirmrand hinausragt. */
.grid--breit { grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr)); }
.card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow);
}
.card h3 { margin-top: 0; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card--flat { box-shadow: none; }
.card .figure-wide img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

.checks { list-style: none; padding: 0; }
.checks li { position: relative; padding-left: 1.7em; margin-bottom: .5em; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 9px; height: 9px; background: var(--orange); border-radius: 2px;
}

/* --- Ablauf / Stufen ------------------------------------------------------ */
.steps { counter-reset: step; display: grid; gap: 20px; }
.step {
  position: relative; background: #fff; border: 1px solid var(--border);
  border-left: 4px solid var(--orange); border-radius: var(--radius);
  padding: 26px 28px 26px 82px; box-shadow: var(--shadow);
}
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 26px; top: 24px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.15rem;
}
.step h3 { margin-bottom: .45em; }
.step ul:last-child, .step p:last-child { margin-bottom: 0; }
@media (max-width: 560px) {
  .step { padding: 70px 22px 24px; }
  .step::before { left: 22px; top: 20px; }
}

/* --- Vorher/Nachher ------------------------------------------------------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 780px; }
@media (max-width: 620px) { .compare { grid-template-columns: 1fr; } }
.shot { margin: 0; }
.shot__frame { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--bg-alt); }
.shot__frame img { width: 100%; }
/* Gleiche Bildhoehe links und rechts, damit der Vergleich sauber ausgerichtet
   ist. Gilt fuer jeden .shot, auch ausserhalb von .compare - auf der
   Startseite stehen die Vergleichsbilder in derselben Rasterflaeche wie die
   uebrigen Referenzbilder. */
.shot__frame { aspect-ratio: 3 / 4; }
.shot__frame img { height: 100%; object-fit: cover; }
.shot__tag {
  position: absolute; left: 12px; top: 12px;
  padding: 5px 12px; border-radius: 3px;
  font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.shot__tag--before { background: rgba(13,31,46,.9); color: #fff; }
.shot__tag--after  { background: var(--orange); color: var(--blue-dark); }
.shot figcaption { font-size: .92rem; color: var(--muted); padding-top: 8px; }

.figure-wide { margin: 0; }
.figure-wide img { width: 100%; border-radius: var(--radius); }
.figure-wide figcaption { font-size: .92rem; color: var(--muted); padding-top: 10px; }

/* Zweispaltig: Die Referenzgalerien haben 4 bzw. 10 Bilder – das geht in zwei
   Spalten ohne angebrochene Schlussreihe auf, und die Vorher/Nachher-Kanten
   sind in der groesseren Darstellung deutlich besser zu erkennen. */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 22px; }
.gallery .figure-wide img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* --- Split (Text + Bild) -------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.split--narrow-media { grid-template-columns: 1.15fr .85fr; }
@media (max-width: 860px) { .split, .split--narrow-media { grid-template-columns: 1fr; gap: 30px; } }
.split img { border-radius: var(--radius); }

/* --- CTA-Band ------------------------------------------------------------- */
.cta-band { background: var(--blue); color: #fff; padding: 56px 0; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #d5e2ec; font-size: 1.08rem; }
.cta-band .btn-row { margin-top: 26px; }
.cta-band__inner { max-width: 760px; }

/* --- Formular ------------------------------------------------------------- */
.form { max-width: 560px; }
.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 700; color: var(--blue); margin-bottom: 7px; }
.field .hint { display: block; font-weight: 400; color: var(--muted); font-size: .9rem; margin-top: 2px; }
.field input[type="text"], .field input[type="tel"], .field textarea {
  width: 100%; padding: 13px 15px; font: inherit; color: var(--text);
  border: 2px solid var(--border); border-radius: var(--radius); background: #fff;
}
.field input:focus, .field textarea:focus { border-color: var(--blue-mid); outline: 2px solid transparent; }
.field textarea { min-height: 118px; resize: vertical; }
.field--check { display: flex; gap: 12px; align-items: flex-start; }
.field--check input { margin-top: .35em; width: 20px; height: 20px; flex: 0 0 auto; }
.field--check label { font-weight: 400; color: var(--text); font-size: .95rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .9rem; color: var(--muted); }

.msg { border-radius: var(--radius); padding: 18px 22px; margin-bottom: 28px; border-left: 4px solid; }
.msg--ok  { background: #eef7f0; border-color: #2e7d4f; color: #1d5334; }
.msg--err { background: #fdf0ec; border-color: #c0432a; color: #8d2f1c; }
.msg strong { display: block; margin-bottom: .2em; }

/* --- Kontaktdaten --------------------------------------------------------- */
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { display: flex; gap: 12px; margin-bottom: 16px; }
.contact-list .lbl { font-weight: 700; color: var(--blue); min-width: 92px; }
.contact-list a { font-weight: 700; }

/* --- Ortsliste ------------------------------------------------------------ */
.places { columns: 3 190px; column-gap: 30px; list-style: none; padding: 0; }
.places li { break-inside: avoid; padding-left: 1.4em; position: relative; margin-bottom: .45em; }
.places li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; background: var(--orange); border-radius: 2px; }
/* Engere Variante fuer Ortslisten innerhalb einer Karte */
.places--eng { columns: 2 140px; column-gap: 22px; font-size: .96rem; margin-bottom: 0; }
/* Auf schmalen Displays einspaltig: lange Ortsnamen wie "Ransbach-Baumbach"
   passen sonst nicht in eine 140px-Spalte und laufen ueber den Kartenrand. */
@media (max-width: 620px) { .places--eng { columns: 1; } }

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--blue-deep); color: #c3d3df; padding: 54px 0 30px; margin-top: 0; }
.site-footer a { color: #fff; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 34px; }
.site-footer h3 { color: #fff; font-size: 1rem; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 1em; }
.site-footer ul { list-style: none; padding: 0; }
.site-footer img { width: 210px; margin-bottom: 18px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.16); margin-top: 38px; padding-top: 20px;
  display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: .9rem;
}
.footer-bottom p { margin: 0; }

/* --- Mobile Anruf-Leiste -------------------------------------------------- */
.call-bar { display: none; }
@media (max-width: 700px) {
  .call-bar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--orange); box-shadow: 0 -2px 14px rgba(0,0,0,.2);
    padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  }
  /* Der Anruf-Button im Kopf entfaellt, solange die feste Anruf-Leiste sichtbar ist */
  .header-phone { display: none; }
  .call-bar a {
    display: flex; align-items: center; justify-content: center; gap: .5em;
    color: var(--blue-dark); font-weight: 700; font-size: 1.06rem; text-decoration: none;
  }
  body { padding-bottom: 66px; }
}

/* --- Textseiten (Impressum, Datenschutz) ---------------------------------- */
.prose h2 { margin-top: 1.8em; font-size: 1.4rem; }
.prose h3 { margin-top: 1.5em; }
.prose { max-width: 760px; }
.legal-hint {
  background: var(--bg-alt); border-left: 4px solid var(--orange);
  padding: 16px 20px; font-size: .93rem; color: var(--muted); border-radius: 0 var(--radius) var(--radius) 0;
}

/* --- Kompaktvarianten der Startseite ---------------------------------------
   Stehen bewusst am Ende: Sie muessen .compare und .gallery ueberschreiben,
   die weiter oben definiert sind.

   Auf der Startseite bleiben Vorher und Nachher auch auf dem Handy
   nebeneinander - der Vergleich ist die Kernaussage und soll ohne Scrollen
   erfassbar sein. Auf der Referenzseite bleibt es beim Stapeln, dort zaehlt
   die Detailgroesse. */
.gallery--kompakt { grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) {
  .compare--kompakt { grid-template-columns: 1fr 1fr; gap: 10px; }
  .compare--kompakt .shot__tag { font-size: .68rem; padding: 4px 8px; left: 8px; top: 8px; }
}

@media print {
  .site-header, .call-bar, .cta-band, .btn { display: none !important; }
  body { padding-bottom: 0; }
}