/* =============================================================
   MIBO Hausmeisterservice – Mobile-First Responsive Layer
   -------------------------------------------------------------
   Lädt nach styles.css und überschreibt dessen Desktop-Werte
   mobile-first (Bootstrap-5-Breakpoints).

   PRINZIP
     • Basis-Regeln (ohne @media) gelten für Mobile (< 576 px).
     • Größere Breiten werden ausschließlich über
       @media (min-width: …) zugeschaltet.
     • Keine @media (max-width: …) verwenden.

   BREAKPOINTS
     sm  ≥ 576 px   (große Phones quer)
     md  ≥ 768 px   (Tablets hoch)
     lg  ≥ 992 px   (Tablets quer, kleine Laptops) ← Nav-Switch
     xl  ≥ 1200 px  (Desktop)
     xxl ≥ 1400 px  (Wide Desktop)
   ============================================================= */

/* ============================================================
   1) CONTAINER  ·  Mobile-first
   ============================================================ */
.container {
  max-width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 576px)  { .container { max-width: 540px;  padding-left: 24px; padding-right: 24px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1240px; } }

/* Section-Padding: enger auf Mobile, großzügig ab md */
.section    { padding: 56px 0; }
.section--sm{ padding: 40px 0; }
@media (min-width: 768px)  { .section { padding: 80px 0; }  .section--sm { padding: 48px 0; } }
@media (min-width: 992px)  { .section { padding: 96px 0; }  .section--sm { padding: 56px 0; } }

/* Editor-Seiten (Impressum, Datenschutz, AGB): Fließtext schließt direkt an den Page-Hero an,
   Abstand kommt nur noch aus dem Hero-Padding (32–56px) + h1-Margin */
.section--page { padding-top: 0; }
.section--page .container > :first-child { margin-top: 0; }
/* Folgt direkt auf eine Sektion mit gleichem Hintergrund (Startseite: Region → Kundenstimme) */
.section--flush { padding-top: 0; }
/* Kontaktseite: Formular schließt knapp an den Page-Hero an */
.section--tight { padding-top: 16px; }

/* ============================================================
   2) TOPBAR  ·  auf Mobile reduziert auf Telefon + Mail
   ============================================================ */
.topbar { font-size: 12.5px; }
.topbar__inner { padding: 8px 0; gap: 12px; flex-wrap: nowrap; }
.topbar__meta  { display: none; }                   /* Adresse/Öffnungszeiten ausblenden */
.topbar__right { gap: 14px; flex-wrap: wrap; }
.topbar__right > span:nth-child(2) { display: none; } /* Mail ausblenden — nur Telefon */

@media (min-width: 768px) {
  .topbar { font-size: 13px; }
  .topbar__meta  { display: flex; gap: 14px; }
  .topbar__right > span:nth-child(2) { display: inline-flex; }
}
@media (min-width: 992px) {
  .topbar__meta { gap: 22px; }
  .topbar__inner { padding: 9px 0; }
}

/* ============================================================
   3) NAV  ·  Hamburger bis lg, ab lg horizontale Nav
   ============================================================ */
.nav__inner { padding: 12px 0; gap: 16px; }
.brand__logo { height: 40px; }

/* Hamburger-Button (nur < lg sichtbar) */
.nav__burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;          /* Hit-Target ≥ 44 px */
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--fg);
  cursor: pointer;
  padding: 0;
}
.nav__burger:hover  { background: var(--mibo-cream-100); }
.nav__burger:active { transform: scale(0.96); }

/* Inline-Links + Dropdown standardmäßig ausgeblendet, ebenso der Primary-CTA */
.nav__links,
.nav__inner > .btn--primary { display: none; }

@media (min-width: 992px) {
  .nav__inner { padding: 10px 0; gap: 24px; }
  .brand__logo { height: 56px; }
  .nav__burger { display: none; }
  .nav__links,
  .nav__inner > .btn--primary { display: inline-flex; }
}

/* ============================================================
   3a) MOBILE NAV OVERLAY  ·  Fullscreen, großzügige Typo
   ============================================================ */
.mnav {
  position: fixed; inset: 0;
  z-index: 100;
  background: var(--mibo-cream-50);
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transition: opacity 240ms var(--ease-out);
  overflow-y: auto;
}
.mnav.is-open { opacity: 1; pointer-events: auto; }
.mnav[hidden] { display: none; }   /* geschlossenes Overlay nicht per Tab erreichbar */

.mnav__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(251, 249, 245, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 2;
}
.mnav__close {
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--fg);
}
.mnav__close:active { transform: scale(0.96); }

.mnav__body { padding: 24px 20px 32px; flex: 1; }

.mnav__link {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 18px 4px;
  border: 0; border-bottom: 1px solid var(--border-subtle);
  background: none; appearance: none;
  font-family: var(--font-display);
  font-size: 26px; font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.mnav__body > .mnav__link:last-child { border-bottom: 0; }
.mnav__link.is-active { color: var(--mibo-green-700); }
.mnav__link svg { color: var(--mibo-stone-500); transition: transform 220ms var(--ease-out); }
.mnav__link[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--mibo-green-700); }

/* Eingerückte Service-Liste — Accordion unterhalb "Leistungen".
   visibility nimmt die Links im zugeklappten Zustand aus der Tab-Reihenfolge. */
.mnav__sub {
  max-height: 0; overflow: hidden; visibility: hidden;
  transition: max-height 320ms var(--ease-out), visibility 0s linear 320ms;
}
.mnav__sub.is-open { max-height: 600px; visibility: visible; transition-delay: 0s; }
.mnav__sub-inner { padding: 12px 0 18px 4px; display: flex; flex-direction: column; gap: 4px; }
.mnav__sublink {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px; border-radius: 10px;
  font-size: 16px; color: var(--fg);
  text-decoration: none;
  cursor: pointer;
}
.mnav__sublink:active { background: var(--mibo-cream-100); }
.mnav__sublink .ico {
  flex: 0 0 36px; width: 36px; height: 36px;
  background: var(--mibo-green-50); color: var(--mibo-green-700);
  border-radius: 9px;
  display: grid; place-items: center;
}

.mnav__foot {
  padding: 24px 20px 32px;
  border-top: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 12px;
  background: var(--mibo-cream-100);
}
.mnav__contact {
  display: flex; align-items: center; gap: 12px;
  font-size: 15px; color: var(--fg);
  text-decoration: none;
  padding: 10px 0;
}
.mnav__contact .ico {
  width: 36px; height: 36px;
  background: #fff; color: var(--mibo-green-700);
  border-radius: 9px;
  display: grid; place-items: center;
  border: 1px solid var(--border-subtle);
}
.mnav__cta { margin-top: 8px; justify-content: center; width: 100%; }

/* Verhindert Body-Scroll, wenn Overlay offen */
body.has-mnav { overflow: hidden; }

/* ============================================================
   4) HERO  ·  Text zuerst, dann Bild — Stacked
   ============================================================ */
.hero { padding: 40px 0 56px; }
.hero__grid { grid-template-columns: 1fr; gap: 32px; }
.hero h1 { font-size: clamp(2rem, 8vw, 2.75rem); margin: 14px 0 16px; }
.hero p.lead { font-size: 17px; margin: 0 0 24px; max-width: none; }
.hero__actions { gap: 10px; }
.hero__actions .btn { flex: 1 1 auto; justify-content: center; }
.hero__actions .btn--secondary { flex-basis: 100%; }   /* CTA-Stack auf 375 */
.hero__trust { gap: 14px 18px; margin-top: 24px; font-size: 13px; }
.hero__stat { display: none; }                         /* floating Stats raus */
.hero__media { aspect-ratio: 4 / 3; border-radius: 16px; }

@media (min-width: 576px) {
  .hero__actions .btn--secondary { flex-basis: auto; }
}
@media (min-width: 768px) {
  .hero { padding: 56px 0 80px; }
  .hero h1 { font-size: clamp(2.5rem, 6vw, 3.5rem); }
  .hero__media { border-radius: 20px; }
}
@media (min-width: 992px) {
  .hero { padding: 72px 0 112px; }
  .hero__grid { grid-template-columns: 7fr 5fr; gap: 64px; }
  .hero__media { aspect-ratio: 5 / 6; border-radius: 24px; }   /* hochkant erst neben dem Text */
  .hero__stat { display: flex; }                       /* Floating Stats wieder an */
}

/* ============================================================
   5) SECTION HEADS
   ============================================================ */
.section-head { margin: 0 0 32px; }
.section-head h2 { font-size: clamp(1.75rem, 6vw, 2.25rem); margin: 12px 0 12px; }
.section-head p  { font-size: 16px; }
@media (min-width: 768px) {
  .section-head { margin-bottom: 48px; }
  .section-head h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
  .section-head p { font-size: 18px; }
}
@media (min-width: 992px) { .section-head { margin-bottom: 56px; } }

/* ============================================================
   6) FEATURES  ·  1-col → 2-col (md) → 4-col (lg)
   ============================================================ */
.features { grid-template-columns: 1fr; gap: 14px; }
.feature  { padding: 22px 20px; }
@media (min-width: 576px) { .features { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (min-width: 992px) { .features { grid-template-columns: repeat(4, 1fr); gap: 24px; } .feature { padding: 28px 24px; } }

/* ============================================================
   7) SERVICES GRID  ·  Stacked, dann 2-col, dann 4-col
   ============================================================ */
.services-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 576px) { .services-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 992px) { .services-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }

.service-card__media { height: 200px; }
@media (min-width: 768px) { .service-card__media { height: 220px; } }

/* ============================================================
   8) STEPS  ·  Vertikal mit linker Linie, ab lg horizontal
   ============================================================ */
.steps { grid-template-columns: 1fr; gap: 16px; position: relative; }
.steps::before { display: none; }
.step  { padding: 22px 20px; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (min-width: 992px) { .steps::before { display: block; } .step { padding: 28px 26px; } }

/* ============================================================
   9) REGION  ·  Karte oben, Text unten
   ============================================================ */
.region-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.region-text .btn { white-space: normal; text-align: left; }   /* langer Button-Text darf umbrechen (360 px) */
@media (min-width: 992px) { .region-grid { grid-template-columns: 5fr 6fr; gap: 56px; } }

/* ============================================================
   10) TESTIMONIAL  ·  Anführungszeichen über Text auf Mobile
   ============================================================ */
.testimonial-card {
  display: grid; grid-template-columns: 1fr;
  padding: 28px 24px;
  gap: 14px;
}
.testimonial-card .quote-mark { font-size: 72px; line-height: 0.6; margin-top: 0; }
.testimonial-card blockquote   { font-size: 19px; }
@media (min-width: 768px) {
  .testimonial-card { padding: 36px 36px; grid-template-columns: auto 1fr; gap: 22px; }
  .testimonial-card .quote-mark { font-size: 96px; }
  .testimonial-card blockquote  { font-size: 22px; }
}
@media (min-width: 992px) {
  .testimonial-card { padding: 44px 52px; gap: 26px; }
  .testimonial-card .quote-mark { font-size: 110px; }
  .testimonial-card blockquote  { font-size: 26px; }
}

/* ============================================================
   11) STATS  ·  1-col → 2-col → 4-col
   ============================================================ */
.stats-row { grid-template-columns: 1fr; gap: 14px; }
.stat      { padding: 22px 20px; }
.stat__num { font-size: 36px; }
@media (min-width: 576px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .stats-row > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* einzelne Restkarte volle Breite */
}
@media (min-width: 768px) {
  .stats-row { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .stats-row > .stat:last-child:nth-child(odd) { grid-column: auto; }
}
/* ab Desktop: so viele gleich breite Spalten wie Karten (3 oder 4) */
@media (min-width: 992px) { .stats-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 24px; } .stat { padding: 28px 24px; } .stat__num { font-size: 42px; } }

/* ============================================================
   12) CTA BLOCK  ·  Stack, voller Button-Block
   ============================================================ */
.cta-grid { grid-template-columns: 1fr; gap: 24px; }
.cta-grid .cta-actions { justify-content: flex-start; }
.cta-grid .cta-actions .btn { flex: 1 1 auto; justify-content: center; }
@media (min-width: 768px)  { .cta-grid .cta-actions { justify-content: flex-end; } .cta-grid .cta-actions .btn { flex: 0 0 auto; } }
@media (min-width: 992px)  { .cta-grid { grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: center; } }

/* ============================================================
   13) FOOTER  ·  Accordion auf Mobile, 4-col ab lg
   ============================================================ */
.footer { padding: 48px 0 24px; }
.footer__row { grid-template-columns: 1fr; gap: 0; }

.footer__brandcol { padding-bottom: 28px; border-bottom: 1px solid var(--mibo-green-800); margin-bottom: 8px; }

.footer__group { border-bottom: 1px solid var(--mibo-green-800); }
/* Gruppen-Kopf: <h2 class="footer__title"><button class="footer__head">…</button></h2> */
.footer__group .footer__title {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mibo-cream-100);
  font-family: var(--font-display);
  font-weight: 600;
}
.footer__group .footer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;
  cursor: pointer;
  background: transparent; border: 0;
  width: 100%;
  color: inherit;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  text-align: left;
}
.footer__group .footer__head svg { color: var(--mibo-green-300); transition: transform 220ms var(--ease-out); }
.footer__group.is-open .footer__head svg { transform: rotate(180deg); }
/* visibility nimmt die Links im zugeklappten Zustand aus der Tab-Reihenfolge */
.footer__group ul {
  max-height: 0; overflow: hidden; visibility: hidden; margin: 0;
  transition: max-height 320ms var(--ease-out), visibility 0s linear 320ms;
}
.footer__group.is-open ul { max-height: 400px; padding-bottom: 18px; visibility: visible; transition-delay: 0s; }

.footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 28px; }

@media (min-width: 768px) {
  .footer__row { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .footer__brandcol { grid-column: 1 / -1; border-bottom: 0; padding-bottom: 0; }
}
@media (min-width: 992px) {
  .footer { padding: 64px 0 24px; }
  .footer__row { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
  .footer__brandcol { grid-column: auto; }
  .footer__group { border-bottom: 0; }
  .footer__group .footer__title {
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mibo-green-300);
    font-family: var(--font-sans);
    margin: 0 0 14px;
  }
  .footer__group .footer__head { padding: 0; cursor: default; pointer-events: none; }
  .footer__group .footer__head svg { display: none; }
  .footer__group ul, .footer__group.is-open ul {
    max-height: none; padding-bottom: 0; visibility: visible; transition: none;
    display: flex; flex-direction: column; gap: 8px;
  }
  .footer__bottom { flex-direction: row; align-items: center; }
}

/* ============================================================
   14) PAGE-HERO (Subpages)
   ============================================================ */
.page-hero { padding: 48px 0 32px; }
.page-hero h1 { font-size: clamp(1.85rem, 7vw, 2.5rem); }
@media (min-width: 768px) { .page-hero { padding: 64px 0 48px; } }
@media (min-width: 992px) { .page-hero { padding: 80px 0 56px; } .page-hero h1 { font-size: clamp(2.25rem, 4.4vw, 3.75rem); } }

/* ============================================================
   15) BUTTONS  ·  Hit-Target & Touch-Skalierung
   ============================================================ */
.btn { min-height: 44px; }                /* iOS-konformes Hit-Target */
.btn--lg { padding: 14px 22px; }
@media (min-width: 768px) { .btn--lg { padding: 16px 28px; } }

/* ============================================================
   16) TYPO  ·  Lesbarere Body-Größe auf Mobile
   ============================================================ */
body { font-size: 16px; line-height: 1.55; }