/* ============================================================
   JBC Elektro – Mobile-Optimierung
   Wird als LETZTES Stylesheet geladen und überschreibt gezielt.
   Breakpoint: <= 900px
   ============================================================ */

/* Hamburger-Button: auf Desktop unsichtbar, per JS in header .wrap injiziert */
.navtoggle{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;background:none;border:none;cursor:pointer;padding:0;margin-left:16px;flex:none}
.navtoggle span{display:block;width:26px;height:2px;background:#fff;border-radius:2px;transition:.25s;margin-left:auto}
body.nav-open .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .navtoggle span:nth-child(2){opacity:0}
body.nav-open .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:900px){

  /* ---------- Überlauf-Schutz ---------- */
  html,body{overflow-x:clip;max-width:100%}
  img{max-width:100%;height:auto}
  .wrap{padding-left:20px !important;padding-right:20px !important}

  /* ---------- Topbar weg (entschlackt) ---------- */
  .topbar{display:none !important}

  /* ---------- Header: feste kompakte Navy-Leiste ---------- */
  header{position:sticky !important;top:0 !important;left:auto;right:auto;
    background:var(--navy) !important;z-index:200;box-shadow:0 2px 14px rgba(0,0,0,.28)}
  header .wrap{height:60px !important}
  header .logo{height:30px !important}
  .navtoggle{display:flex}

  /* Desktop-CTA-Button im Header ausblenden (Kontakt steckt im Menü) */
  header .wrap > a.btn{display:none !important}

  /* Nav als Dropdown */
  header nav{position:absolute;top:60px;left:0;right:0;background:var(--navy);
    display:none;padding:4px 0 12px;box-shadow:0 20px 34px -16px rgba(0,0,0,.6)}
  header nav ul{flex-direction:column;gap:0;width:100%}
  header nav ul li{width:100%}
  header nav a{display:block;padding:14px 22px;font-size:16px;color:#E7ECF1;
    border-top:1px solid rgba(255,255,255,.09)}
  header nav a::after{display:none !important}
  body.nav-open header nav{display:block}

  /* ---------- Hero (Startseite) ---------- */
  .hero{min-height:auto !important}
  .hero .wrap{padding-top:46px !important;padding-bottom:54px !important}
  .hero h1{font-size:33px !important;line-height:1.13 !important;max-width:none !important;margin-bottom:18px !important}
  .hero p.lead{font-size:16.5px !important;max-width:none !important;margin-bottom:26px !important}
  .hero-cta{gap:10px !important}
  .hero-cta .btn{width:100%;justify-content:center}
  .phone-inline{margin-top:24px !important}

  /* ---------- Subhero (Unterseiten) ---------- */
  .subhero{min-height:auto !important}
  .subhero .wrap{padding-top:40px !important;padding-bottom:46px !important}
  .subhero h1{font-size:31px !important;line-height:1.14 !important;max-width:none !important}
  .subhero p{font-size:16.5px !important;max-width:none !important}
  .subhero .cta .btn{flex:1 1 auto;justify-content:center}

  /* ---------- Angebotsgenerator-Hero ---------- */
  .genhero{padding:44px 0 38px !important}
  .genhero h1{font-size:30px !important;line-height:1.15}
  .genhero p{font-size:16px !important}
  .wiz{margin-top:-70px !important}
  .wizcard{padding:26px 18px !important;min-height:auto !important}
  .opts,.opts.c2{grid-template-columns:1fr 1fr !important}
  .wform{grid-template-columns:1fr !important}

  /* ---------- Überschriften generell ---------- */
  .sec-head h2,.intro h2,.betrieb h2{font-size:26px !important;line-height:1.15}
  h1{overflow-wrap:break-word;word-break:break-word}

  /* ---------- Grids → einspaltig / zweispaltig ---------- */
  .grid-3{grid-template-columns:1fr !important}
  .gallery{grid-template-columns:1fr 1fr !important;grid-auto-rows:150px !important}
  .strip .wrap{grid-template-columns:1fr 1fr !important;gap:16px !important;padding:20px !important}
  .strip .st + .st{border-left:none !important;padding-left:0 !important}
  .oneband .wrap,.betrieb .wrap,.contact .wrap{grid-template-columns:1fr !important;gap:32px !important}
  .intro{grid-template-columns:1fr !important;gap:28px !important}
  .intro .imgbox{height:230px !important}
  .ugrid{grid-template-columns:1fr 1fr !important;gap:12px !important}
  .ugrid.cols3{grid-template-columns:1fr 1fr !important}
  .vorteile .wrap{grid-template-columns:1fr !important}
  .gal{grid-template-columns:1fr 1fr !important;grid-auto-rows:150px !important}
  .gitem.big,.gitem.wide{grid-column:auto !important;grid-row:auto !important}
  .brandgrid,.brandgrid.cols4{grid-template-columns:1fr 1fr !important}
  .partner-grid{grid-template-columns:1fr !important;gap:30px !important}
  .partner .pgroup + .pgroup{border-left:none !important;padding-left:0 !important}
  .partner .plogos-2{grid-template-columns:1fr 1fr !important;width:100% !important}
  .kontakt-grid{grid-template-columns:1fr !important;gap:30px !important}
  .cform .two,.wform,.two{grid-template-columns:1fr !important}
  footer .cols{grid-template-columns:1fr 1fr !important;gap:22px 20px !important}
  /* Ablauf-Schritte (feste Spalten) einspaltig */
  .steps{grid-template-columns:1fr !important;gap:14px !important}
  .ablauf-steps,.process,.steps-grid{grid-template-columns:1fr !important}
  /* Grid-/Flex-Items dürfen schrumpfen → verhindert min-content-Überlauf (z. B. .betrieb .wrap) */
  .wrap > *{min-width:0}
  .intro > *,.oneband .wrap > *,.betrieb .wrap > *,.contact .wrap > *,.step,.card,.ucard,.modcard{min-width:0 !important;max-width:100%}
  /* lange Wörter/Strings umbrechen (nur wenn nötig – kein mid-word-Break) */
  h1,h2,h3,h4,p,li,a,span,strong,b,td{overflow-wrap:break-word}
  /* Kennzahlen-Reihe (.mini) stapeln statt 3 enge Spalten */
  .mini{flex-direction:column !important;gap:16px !important;align-items:flex-start !important}
  .mini > *{width:100% !important}

  /* ---------- Große Section-Paddings entschärfen ---------- */
  .ctaband .wrap,.gewerbe .wrap,.partner .wrap,.ablauf .wrap,.contact .wrap{padding-top:56px !important;padding-bottom:56px !important}
  .ctaband h2{font-size:27px !important}

  /* Karte (Kontakt) */
  #map{height:240px !important}
}

/* ============ TABLET (600–900px): mehrspaltig, größere Typo ============ */
@media (min-width:600px) and (max-width:900px){
  .hero .wrap{padding-top:56px !important;padding-bottom:64px !important}
  .hero h1{font-size:46px !important}
  .subhero h1{font-size:42px !important}
  .genhero h1{font-size:38px !important}
  .hero p.lead,.subhero p,.genhero p{font-size:18.5px !important}
  .sec-head h2,.intro h2,.betrieb h2{font-size:32px !important}
  /* Buttons wieder inline statt full-width */
  .hero-cta .btn,.subhero .cta .btn{width:auto !important;flex:0 0 auto !important}

  /* Grids mehrspaltig */
  .grid-3{grid-template-columns:1fr 1fr !important}
  .gallery{grid-template-columns:repeat(3,1fr) !important;grid-auto-rows:190px !important}
  .gal{grid-template-columns:repeat(3,1fr) !important;grid-auto-rows:190px !important}
  .ugrid,.ugrid.cols3{grid-template-columns:repeat(3,1fr) !important}
  .brandgrid,.brandgrid.cols4{grid-template-columns:repeat(3,1fr) !important}
  .opts,.opts.c2{grid-template-columns:repeat(3,1fr) !important}
  .steps{grid-template-columns:1fr 1fr !important}
  .wform,.cform .two,.two{grid-template-columns:1fr 1fr !important}
  /* Bild + Text nebeneinander auf dem Tablet */
  .intro,.oneband .wrap,.betrieb .wrap,.kontakt-grid,.vorteile .wrap{grid-template-columns:1fr 1fr !important;gap:40px !important}
  .partner-grid{grid-template-columns:1fr 1fr !important}
  .strip .wrap{grid-template-columns:repeat(4,1fr) !important}
  .strip .st + .st{border-left:1px solid rgba(255,255,255,.1) !important;padding-left:20px !important}
  footer .cols{grid-template-columns:1.5fr 1fr 1fr 1fr !important}
  .intro .imgbox{height:300px !important}
}

@media (max-width:520px){
  .gallery,.gal,.ugrid,.ugrid.cols3,.brandgrid,.brandgrid.cols4,.opts,.opts.c2,footer .cols{grid-template-columns:1fr !important}
  .gallery,.gal{grid-auto-rows:200px !important}
  .gitem.big,.gitem.wide{grid-column:auto !important;grid-row:auto !important}
  .hero h1{font-size:29px !important}
  .subhero h1{font-size:27px !important}
  .strip .wrap{grid-template-columns:1fr !important}
}