/* ============================================================
   Carl-Huter-Akademie – Mobile-Optimierung
   Wird von ds-base.js auf allen Seiten nach dem Design-System
   geladen. Überschreibt die Inline-Styles des Exports per
   Media Queries (deshalb durchgehend !important).
   Breakpoints: ≤1000px Tablet, ≤760px Smartphone.
   ============================================================ */

/* Burger-Button & Panel: oberhalb von 760px unsichtbar */
.cha-mnav-toggle{display:none;background:none;border:0;cursor:pointer;padding:10px;margin:-10px -6px -10px 0}
.cha-mnav-toggle span{display:block;width:22px;height:2px;background:var(--ink,#1A2530);border-radius:2px;margin:5px 0;transition:transform .25s,opacity .2s}
.cha-mnav-panel{display:none}

/* ---------- Tablet (761–1000px) ---------- */
@media (max-width:1000px) and (min-width:761px){
  [style*="repeat(3"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  [style*="grid-template-columns:1.4fr"],
  [style*="grid-template-columns: 1.4fr"]{grid-template-columns:1fr 1fr!important}
  [style*="gap:56px"],[style*="gap: 56px"]{gap:36px!important}
  header nav ul{gap:18px!important;font-size:14px!important}
  header nav{gap:16px!important}
}

/* ---------- Smartphone (≤760px) ---------- */
@media (max-width:760px){
  html,body{overflow-x:clip}

  /* Alle mehrspaltigen Grids einspaltig */
  [style*="grid-template-columns"]{grid-template-columns:1fr!important}

  /* Abstände reduzieren */
  [style*="padding:88px"],[style*="padding: 88px"]{padding-top:52px!important;padding-bottom:52px!important}
  [style*="padding:84px"],[style*="padding: 84px"]{padding-top:44px!important;padding-bottom:48px!important}
  [style*="padding:0 0 88px"],[style*="padding: 0 0 88px"]{padding-bottom:52px!important}
  [style*="gap:56px"],[style*="gap: 56px"]{gap:32px!important}
  [style*="gap:40px"],[style*="gap: 40px"]{gap:26px!important}
  [style*="padding:30px"],[style*="padding: 30px"]{padding:20px!important}
  [style*="padding:64px"],[style*="padding: 64px"]{padding-top:44px!important;padding-bottom:32px!important}

  /* Header: kompakter, Navigation hinter Burger */
  header [style*="height:72px"],header [style*="height: 72px"]{height:62px!important}
  header img[style*="height:42px"],header img[style*="height: 42px"]{height:34px!important}
  header a[style*="font-size:17px"],header a[style*="font-size: 17px"]{font-size:15.5px!important}
  header nav:not(.cha-mnav-panel)>*:not(.cha-mnav-toggle){display:none!important}
  header nav .cha-mnav-toggle{display:block}

  /* Ausklapp-Panel des mobilen Menüs */
  html.cha-mnav-open .cha-mnav-panel{
    display:flex;flex-direction:column;
    position:absolute;left:0;right:0;top:100%;
    background:var(--bg,#FAF8F4);
    border-bottom:1px solid var(--line,#E5DFD3);
    box-shadow:0 18px 40px rgba(5,19,31,.14);
    padding:10px 24px 22px;gap:2px;z-index:60}
  .cha-mnav-panel a{
    display:block;padding:13px 2px;font-size:16.5px;font-weight:600;
    color:var(--ink,#1A2530);border-bottom:1px solid var(--line,#E5DFD3)}
  .cha-mnav-panel a:last-of-type{border-bottom:0}
  .cha-mnav-panel a.cha-mnav-cta{
    margin-top:12px;text-align:center;background:var(--primary,#00559E);
    color:#fff;border-radius:999px;padding:13px 20px;border-bottom:0}
  html.cha-mnav-open .cha-mnav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  html.cha-mnav-open .cha-mnav-toggle span:nth-child(2){opacity:0}
  html.cha-mnav-open .cha-mnav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  html.cha-mnav-open{overflow:hidden}

  /* Hero: schwebende Karten innerhalb des Rahmens halten */
  [style*="left:-28px"],[style*="left: -28px"]{left:10px!important;bottom:12px!important}
  [style*="right:-14px"],[style*="right: -14px"]{right:10px!important;top:12px!important}

  /* Grosse Schrift moderat verkleinern (clamp greift bereits, hier Feinschliff) */
  h1[style*="font-size:clamp(34px"],h1[style*="font-size: clamp(34px"]{font-size:clamp(30px,8.4vw,38px)!important}
  h2[style*="font-size:clamp(26px"],h2[style*="font-size: clamp(26px"]{font-size:clamp(23px,6.4vw,30px)!important}

  /* Footer: einspaltig, zentrierte Unterzeile */
  footer [style*="justify-content:space-between"],
  footer [style*="justify-content: space-between"]{flex-direction:column;gap:8px!important}
}