/* ==========================================================================
   BFZ Winnenden — Responsive-Layer
   Macht die inline-gestylten Seiten mobiltauglich, ohne jede Seite einzeln
   umzubauen. Media-Queries greifen die immer gleichen Layout-Muster per
   Attribut-Selektor ab (Inline-Styles brauchen daher !important).
   ========================================================================== */

/* Hamburger-Button — auf dem Desktop ausgeblendet */
.bfz-navtoggle{display:none}

/* iOS: automatische Schriftvergrößerung unterbinden, seitliches Scrollen verhindern */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{overflow-x:clip}
img,video{max-width:100%}

/* Pillen-Buttons: beim Zeilenumbruch als EIN Block umbrechen (statt in zwei Pillen zu zerfallen) */
a[style*="border-radius:999px"],
a[style*="border-radius: 999px"]{display:inline-block}

/* ---------- Tablet & Phone: Spalten zusammenlegen ---------- */
@media (max-width: 860px){

  /* Footer 4-spaltig -> 2-spaltig */
  footer [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"],
  footer [style*="grid-template-columns:1.4fr 1fr 1fr 1fr"]{
    grid-template-columns:1fr 1fr !important; gap:30px !important;
  }

  /* Karten-Raster 4-spaltig -> 2 Spalten */
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"]{
    grid-template-columns:1fr 1fr !important;
  }

  /* Karten-Raster 3- und 2-spaltig -> 1 Spalte */
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns:repeat(2,1fr)"]{
    grid-template-columns:1fr !important;
  }

  /* Zweispaltige Inhalt/Bild-Bereiche & sonstige 1fr-1fr-Raster -> stapeln */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important;
  }

  /* Porträt-Hero (Über mich) -> stapeln */
  [style*="grid-template-columns: 0.82fr 1.18fr"],
  [style*="grid-template-columns:.82fr 1.18fr"]{
    grid-template-columns:1fr !important;
  }

  /* Bild/Text-Raster (Hilotherapie, Sub-Hero) -> stapeln */
  [style*="grid-template-columns:.92fr 1.08fr"],
  [style*="grid-template-columns: 0.92fr 1.08fr"],
  [style*="grid-template-columns: 1.1fr .9fr"],
  [style*="grid-template-columns:1.1fr .9fr"]{
    grid-template-columns:1fr !important;
  }

  /* Text/Beispielkarten- und Haltung-Raster -> stapeln */
  [style*="grid-template-columns:1.05fr .95fr"],
  [style*="grid-template-columns: 1.05fr .95fr"],
  [style*="grid-template-columns:1.05fr 0.95fr"],
  [style*="grid-template-columns:1.2fr .8fr"],
  [style*="grid-template-columns: 1.2fr .8fr"],
  [style*="grid-template-columns:1.2fr 0.8fr"]{
    grid-template-columns:1fr !important;
  }
}

/* ---------- Phone: Footer ganz einspaltig ---------- */
@media (max-width: 520px){
  footer [style*="grid-template-columns"]{
    grid-template-columns:1fr !important; gap:24px !important;
  }

  /* 4-spaltige Karten-Raster ganz einspaltig */
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"]{
    grid-template-columns:1fr !important;
  }
}

/* ==========================================================================
   Mobile-Navigation (Hamburger + Dropdown)
   Greift die einheitliche <header><div><a logo><nav>…</nav></div></header>-
   Struktur ab. mobile-nav.js fügt den Button ein und schaltet .bfz-nav-open.
   ========================================================================== */
@media (max-width: 860px){

  .bfz-navtoggle{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:46px; height:46px; flex:none; padding:10px;
    background:none; border:none; cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .bfz-navtoggle span{
    display:block; width:100%; height:2.5px; background:#1c5a36; border-radius:2px;
    transition:transform .25s ease, opacity .2s ease;
  }
  .bfz-navtoggle.is-open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .bfz-navtoggle.is-open span:nth-child(2){opacity:0}
  .bfz-navtoggle.is-open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

  /* Nav wird zum aufklappbaren Panel unter dem Header */
  header nav{
    display:none !important;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column !important; align-items:stretch !important;
    gap:0 !important; padding:8px 24px 18px !important;
    background:#faf8f3; border-bottom:1px solid #e7e3d9;
    box-shadow:0 24px 46px -20px rgba(0,0,0,.25);
    max-height:82vh; overflow:auto;
  }
  header.bfz-nav-open nav{display:flex !important}

  header nav a{
    width:auto !important; padding:14px 6px !important; font-size:16.5px !important;
    border-bottom:1px solid #ece8de;
  }
  /* CTA-Pille im Menü wieder als Button darstellen */
  header nav a[style*="border-radius: 999px"],
  header nav a[style*="border-radius:999px"]{
    border-bottom:none !important; text-align:center; margin-top:12px;
    padding:14px 22px !important;
  }
}

/* ---------- Sehr kleine Phones: etwas Luft sparen ---------- */
@media (max-width: 420px){
  .bfz-pad-sm{padding-left:20px !important; padding-right:20px !important}
}