/* =====================================================================
   MeinBenefit · Mobile Feinschliff (09.10.2026)
   Ziel: Auf dem Handy dieselbe Ordnung wie am Desktop. Tarifkarten stehen
   nebeneinander, Kacheln im Raster statt endloser Liste, ruhiger Hero.
   Wird nach allen anderen Stilen geladen und gilt nur bis 760 px Breite.
   ===================================================================== */
#mbx-tarife .mbx-kurz{display:none}

@media (max-width:760px){
  html,body{overflow-x:hidden}
  video{max-width:100%}
  /* ---------- Hero: kompakter, damit der erste Blick sitzt ---------- */
  .mbx-hero .mbx-wort h1{font-size:clamp(31px,9vw,38px);line-height:1.08;letter-spacing:-.035em}
  .mbx-hero .mbx-wort .sub{font-size:15px;line-height:1.6;margin-top:14px}
  .mbx-hero .mbx-haken{margin:16px 0 0;gap:6px}
  .mbx-hero .mbx-haken li{font-size:14px;line-height:1.45}
  .mbx-hero .mbx-aktionen{margin-top:20px;gap:12px}
  .mbx-hero .mbx-karte{margin-top:6px}
  .mbx-hero .mbx-kopf h2{font-size:21px;line-height:1.2}
  .mbx-hero .mbx-kopf p{font-size:14px;line-height:1.55}

  /* ---------- Datenschutzhinweis als Leiste unten statt Vollbild ---------- */
  dialog#v8-privacy.mbp-privacy[open]{position:fixed!important;inset:auto 0 0 0!important;top:auto!important;bottom:0!important;left:0!important;right:0!important;margin:0!important;transform:none!important;width:100%!important;max-width:none!important;max-height:80vh!important;overflow:auto;border-radius:20px 20px 0 0!important;padding:18px 20px calc(16px + env(safe-area-inset-bottom))!important;animation:none}
  dialog#v8-privacy::backdrop{background:rgba(5,25,20,.28)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  dialog.mbp-privacy h2{font-size:22px;line-height:1.15;margin:0 0 8px}
  dialog.mbp-privacy #mbp-privacy-description{font-size:14px;line-height:1.5;margin:0 0 10px}
  dialog.mbp-privacy .mbp-privacy-facts{gap:8px}
  dialog.mbp-privacy .mbp-privacy-facts div{padding:10px 0}
  dialog.mbp-privacy .mbp-privacy-facts b{font-size:14px}
  dialog.mbp-privacy .mbp-privacy-facts span{font-size:12px;line-height:1.45}
  dialog.mbp-privacy .mbp-privacy-facts>div{padding:8px 0!important}
  dialog.mbp-privacy .mbp-legal-links{margin:10px 0}
  dialog.mbp-privacy .mbp-primary{min-height:48px}
  dialog.mbp-privacy .mbp-small{font-size:11.5px;margin-top:8px}
  dialog.mbp-privacy .mbp-dialog-head{position:absolute;top:10px;right:10px;margin:0}
  dialog.mbp-privacy .mbp-close{width:36px;height:36px;font-size:18px}
  dialog.mbp-privacy h2{padding-right:44px}

  /* ---------- 3 Schritte: luftiger, gleich hoch ---------- */
  #ablauf .reihe3{gap:8px}
  #ablauf .mbk-inner{padding:14px 8px 14px}
  #ablauf .mbk-hl{font-size:14px;line-height:1.25}
  #ablauf .mbk-sub{font-size:11.5px;line-height:1.45}
  #ablauf .mbk-kicker{font-size:9px;padding:3px 7px}

  /* ---------- Tarifkarten: drei nebeneinander ---------- */
  #mbx-tarife{padding:28px 0 8px}
  #mbx-tarife .mbx-t-kopf{display:block;margin-bottom:14px}
  #mbx-tarife .mbx-t-kopf h2{font-size:clamp(25px,7.2vw,30px);line-height:1.15}
  #mbx-tarife .mbx-t-kopf>p{font-size:14px;line-height:1.55;margin-top:10px}
  .mbx-t-vertrauen{gap:6px 14px;margin:0 0 18px;font-size:12.5px;padding:10px 12px;border-radius:12px}
  #mbx-tarife .mbx-t-pakete{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding-top:22px;max-width:none;margin-inline:-6px}
  #mbx-tarife .mbx-t-paket{padding:16px 9px 12px;border-radius:14px;min-width:0}
  #mbx-tarife .mbx-t-paket--plus{transform:translateY(-10px)}
  #mbx-tarife .mbx-t-cardhead{min-height:0}
  #mbx-tarife .mbx-t-paket h3{font-size:clamp(16px,4.6vw,19px);letter-spacing:-.03em;margin:0}
  #mbx-tarife .mbx-t-satz{display:none}
  #mbx-tarife .mbx-t-preis{margin:10px 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
  #mbx-tarife .mbx-t-preis b{font-size:clamp(25px,7.6vw,31px);line-height:1}
  #mbx-tarife .mbx-t-preis .mbx-t-euro{font-size:.55em}
  #mbx-tarife .mbx-t-preis .mbx-t-einheit{font-size:10.5px;line-height:1.3}
  #mbx-tarife .mbx-t-preis.mbx-t-preis--individuell b{font-size:clamp(15px,4.4vw,18px)!important;line-height:1.25;letter-spacing:-.02em;padding:6px 0 4px}
  #mbx-tarife .mbx-t-jahr{display:none}
  #mbx-tarife .mbx-t-preis{min-height:68px;justify-content:flex-start}
  #mbx-tarife .mbx-t-preis.mbx-t-preis--individuell::after{content:"Preis nach Angebot";font-size:10.5px;line-height:1.3;color:#5b4a1f}
  #mbx-tarife .mbx-t-liste{display:grid!important;flex:0 0 auto!important;align-content:start!important;gap:7px!important}
  #mbx-tarife .mbx-t-liste li{margin:0!important}
  #mbx-tarife .mbx-t-knopf{min-height:38px;padding:8px 4px;font-size:12px;line-height:1.25;border-radius:9px;margin-top:12px;width:100%}
  #mbx-tarife .mbx-t-knopf .mbx-lang{display:none}
  #mbx-tarife .mbx-t-knopf .mbx-kurz{display:inline}
  #mbx-tarife .mbx-t-listentitel{display:none}
  #mbx-tarife .mbx-t-liste{gap:7px;margin:12px 0 0;padding-top:11px;border-top:1px solid #e1e7e0}
  #mbx-tarife .mbx-t-paket--plus .mbx-t-liste{border-color:#ffffff24}
  #mbx-tarife .mbx-t-paket--gold .mbx-t-liste{border-color:#d8cda8}
  #mbx-tarife .mbx-t-liste li{display:grid;grid-template-columns:13px minmax(0,1fr)!important;align-items:start;gap:5px!important;font-size:11px;line-height:1.3}
  #mbx-tarife .mbx-t-liste b{font-size:11px;font-weight:600}
  #mbx-tarife .mbx-t-liste small{display:none}
  #mbx-tarife .mbx-t-liste svg{width:13px;height:13px;margin:1px 0 0;flex:none}
  #mbx-tarife .mbx-t-liste li>span{min-width:0;padding:0;margin:0}
  #mbx-tarife .mbx-t-fein{display:none}
  #mbx-tarife .mbx-t-band{top:-11px;font-size:9.5px;padding:3px 9px;border-width:3px;letter-spacing:.05em;white-space:nowrap}
  #mbx-tarife .mbx-t-band .mbx-lang{display:none}
  #mbx-tarife .mbx-t-band .mbx-kurz{display:inline}
  .mbx-t-steuer{margin:14px 0 18px;font-size:11.5px;line-height:1.5}

  /* Classic und Pro ebenfalls nebeneinander */
  .mbx-t-portal{display:block;padding:16px}
  .mbx-t-portal>div{gap:10px;align-items:flex-start}
  .mbx-t-portal svg{width:24px;height:24px}
  .mbx-t-portal b{font-size:15px}
  .mbx-t-portal>p{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px!important}
  .mbx-t-portal>p>span{background:#fff;border:1px solid #dce3dc;border-radius:10px;padding:10px 12px;font-size:12px}
  .mbx-t-portal strong{font-size:20px;line-height:1.3}
  .mbx-t-portal strong small{display:block;white-space:normal;font-size:11px}
  .mbx-t-portalnote{text-align:left;font-size:11.5px;line-height:1.5}

  /* ---------- Lösungen: 2 × 2 wie am Desktop ---------- */
  #loesungen .reihe2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  #loesungen .mbk--zwei{min-height:0}
  #loesungen .mbk-ph.mbk-art,#loesungen .mbk-ph{height:96px!important;min-height:0!important;aspect-ratio:auto!important;flex:0 0 96px!important}
  #loesungen .mbk-inner{padding:12px 12px 12px}
  #loesungen .mbk-hl{font-size:15px;line-height:1.2}
  #loesungen .mbk-body .mbk-sub{font-size:12px!important;line-height:1.45!important;max-height:5.2em;overflow:hidden!important;-webkit-mask-image:linear-gradient(#000 70%,transparent)}
  #loesungen .mbk-mehr{font-size:12px}
  #loesungen .title{font-size:clamp(23px,6.6vw,28px)}
}

/* Sehr schmale Geräte (bis 360 px) */
@media (max-width:360px){
  #mbx-tarife .mbx-t-pakete{gap:5px;margin-inline:-10px}
  #mbx-tarife .mbx-t-paket{padding:15px 7px 11px}
  #mbx-tarife .mbx-t-liste li,#mbx-tarife .mbx-t-liste b{font-size:10.5px}
  #mbx-tarife .mbx-t-knopf{font-size:11.5px}
}