/* Mobiles Entertainment Berlin – Mobile Relaunch 2026
   Ausschließlich Smartphone-Optimierung; Desktop/iPad bleiben unverändert. */
@media (max-width:600px){
  :root{--mobile-pad:18px;--mobile-radius:20px}
  html{font-size:16px;overflow-x:hidden}
  body{overflow-x:hidden;background:#fff;line-height:1.55;-webkit-text-size-adjust:100%}
  img,video,iframe{max-width:100%;height:auto}
  main{overflow:hidden}

  /* Einheitliche Abstände und Typografie */
  .section,.seo-extra,.seo-faq,.news-preview,.availability-section,.quick-explain{padding:48px var(--mobile-pad)!important}
  .wrap,.seo-extra .wrap,.seo-faq .wrap{width:100%!important;padding:0!important;margin-inline:auto!important}
  h1{font-size:clamp(32px,10vw,42px)!important;line-height:1.04!important;letter-spacing:-.035em!important}
  h2{font-size:clamp(28px,8.5vw,36px)!important;line-height:1.1!important;letter-spacing:-.025em!important;margin-bottom:14px!important}
  h3{font-size:22px!important;line-height:1.2!important}
  p,.lead{font-size:16px!important;line-height:1.6!important}
  .lead{margin-bottom:28px!important}
  .center{text-align:left!important}

  /* Header: kompakt, klar, fingerfreundlich */
  .me-site-header{position:sticky!important;top:0!important;background:rgba(5,10,17,.98)!important}
  .me-header-inner{min-height:68px!important;padding:9px 14px!important;gap:10px!important}
  .me-brand-textlogo{min-width:0!important;max-width:245px!important}
  .me-logo-line1,.me-logo-line2{font-size:11px!important}
  .me-logo-line2{padding-inline:27px!important}
  .me-logo-line2::before,.me-logo-line2::after{width:21px!important}
  .me-logo-line3{font-size:15px!important;margin-top:3px!important}
  .me-logo-line4{font-size:7px!important;letter-spacing:.12em!important}
  .me-menu-toggle{display:inline-flex!important;flex:0 0 44px!important;width:44px!important;height:44px!important;border-radius:12px!important;font-size:23px!important}
  #me-main-nav.me-nav{top:68px!important;max-height:calc(100dvh - 68px)!important;padding:12px 14px 22px!important;background:#080d15!important;overflow-y:auto!important;box-shadow:0 22px 45px rgba(0,0,0,.35)!important}
  #me-main-nav.me-nav a,#me-main-nav.me-nav button{min-height:48px!important;padding:13px 14px!important;border-radius:12px!important;font-size:15px!important;line-height:1.25!important}
  .me-nav-dropdown-menu{position:static!important;width:100%!important;min-width:0!important;margin-top:6px!important;padding:8px!important;border-radius:14px!important;box-shadow:none!important}
  .me-nav-dropdown-menu small{display:none!important}
  .me-nav-phone,.me-nav-cta{justify-content:center!important;text-align:center!important}

  /* Startseiten-Hero: Bild wirkt, Text bleibt kurz und lesbar */
  .me-hero{min-height:auto!important;padding:0!important;background:#050505!important;display:block!important}
  .me-hero-picture{position:relative!important;display:block!important;height:42vh!important;min-height:300px!important;max-height:390px!important;inset:auto!important}
  .me-hero-picture img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:58% center!important}
  .me-hero-shade{position:absolute!important;inset:0!important;height:42vh!important;min-height:300px!important;max-height:390px!important;background:linear-gradient(180deg,rgba(0,0,0,.05) 38%,rgba(0,0,0,.85) 100%)!important}
  .me-hero-inner{position:relative!important;min-height:0!important;width:auto!important;margin:-66px 12px 0!important;padding:24px 18px 20px!important;border-radius:24px!important;background:linear-gradient(145deg,#111821,#06090e)!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:0 20px 45px rgba(0,0,0,.38)!important;text-align:left!important}
  .me-hero h1{margin:0 0 13px!important;max-width:none!important;text-shadow:none!important}
  .me-hero-services{display:flex!important;flex-wrap:wrap!important;gap:7px!important;margin-bottom:10px!important;font-size:15px!important}
  .me-hero-service{padding:6px 10px!important;border-radius:999px!important;background:rgba(255,255,255,.09)!important}
  .me-hero-subline{font-size:18px!important;margin:0 0 10px!important}
  .me-hero-lead{font-size:15.5px!important;line-height:1.55!important;margin:0 0 18px!important;display:-webkit-box!important;-webkit-line-clamp:4!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
  .me-hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .me-hero-actions .btn{width:100%!important;min-height:50px!important;padding:13px 16px!important;font-size:15px!important;box-shadow:none!important}
  .me-stage-only-teaser{margin-top:14px!important;padding:13px!important;display:grid!important;grid-template-columns:auto 1fr!important;gap:8px 10px!important;border-radius:16px!important}
  .me-stage-only-teaser a{grid-column:1/-1!important;width:100%!important;text-align:center!important;padding:11px 12px!important;border-radius:12px!important}

  /* Vertrauensleiste: zwei ruhige Spalten statt langer Reihe */
  .me-trustbar{display:grid!important;grid-template-columns:1fr 1fr!important;gap:1px!important;margin-top:22px!important;padding:0!important;background:#e5e7eb!important}
  .me-trust-item{min-width:0!important;padding:16px 12px!important;background:#fff!important;align-items:flex-start!important}
  .me-trust-item strong{font-size:13px!important;line-height:1.25!important}
  .me-trust-item small{font-size:11.5px!important;line-height:1.3!important}
  .me-trust-icon{font-size:18px!important}

  /* Karten und Grids überall einspaltig */
  .cards,.packages,.seo-grid,.quick-grid,.legal-grid,.me-service-focus-grid,.me-event-types-grid,
  .me-services-grid,.me-process-grid,.me-reference-grid,.me-contact-grid,.me-about-grid,
  .availability-card,.news-preview-card,.contact,.split,.sales-card,.refs{display:grid!important;grid-template-columns:1fr!important;gap:16px!important}
  .card,.package,.seo-card,.quick-item,.legal-box,.me-service-focus-card,.me-event-type-card,
  .me-service-card,.me-process-card,.me-reference-card{border-radius:var(--mobile-radius)!important;box-shadow:0 10px 28px rgba(0,0,0,.09)!important}
  .card-content,.package,.seo-card,.quick-item,.legal-box,.me-service-focus-card,.me-event-type-card{padding:20px!important}
  .card img,.photo img{height:220px!important;object-fit:cover!important}
  .package.featured{transform:none!important}
  .checks{grid-template-columns:1fr!important}

  /* Dunkle Aktionsflächen */
  .cta-band,.quick-card,.availability-card,.news-preview-card,.contact-box{padding:24px 18px!important;border-radius:22px!important}
  .cta-band{display:grid!important;grid-template-columns:1fr!important;align-items:start!important}
  .cta-band .btn,.quick-actions .btn,.news-preview-actions .btn{width:100%!important;margin:0!important;white-space:normal!important;text-align:center!important}
  .quick-actions,.news-preview-actions,.download-links{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .availability-form{padding:18px!important;border-radius:18px!important}

  /* Referenzen, FAQ, Rechtliches */
  .refs img,.refs img:first-child,.refs video,.refs video:first-child{height:230px!important;grid-row:auto!important}
  details{padding:17px 16px!important;border-radius:15px!important;margin:10px 0!important}
  summary{line-height:1.35!important}
  .legal h2{font-size:28px!important}

  /* Buttons konsistent */
  .btn,.hero-new-btn,.me-nav-cta{min-height:48px!important;padding:13px 18px!important;border-radius:14px!important;font-size:15px!important;line-height:1.25!important;box-shadow:none!important}
  .badges,.chips{gap:8px!important}
  .badges span,.chips span{font-size:12.5px!important;padding:8px 10px!important}

  /* Footer ruhig und gut lesbar */
  .footer{padding:28px 18px!important}
  .footer-inner{display:grid!important;grid-template-columns:1fr!important;gap:16px!important;font-size:13px!important}
  .footer-inner>div:last-child{display:flex!important;flex-wrap:wrap!important;gap:10px 14px!important}
  .footer a{margin:0!important}
  .me-back-to-top{right:14px!important;bottom:14px!important}
}

@media (max-width:380px){
  .me-trustbar{grid-template-columns:1fr!important}
  .me-hero-inner{margin-inline:8px!important;padding-inline:15px!important}
  .me-brand-textlogo{max-width:215px!important}
}

/* Mobile Feinschliff 17.07.2026 */
.me-mobile-reference-shortcut{display:none}
@media (max-width:600px){
  /* Hero ruhiger und kompakter: nur eine Hauptaktion */
  .me-hero-picture{height:39vh!important;min-height:285px!important;max-height:355px!important}
  .me-hero-shade{height:39vh!important;min-height:285px!important;max-height:355px!important}
  .me-hero-inner{margin:-92px 12px 0!important;padding:22px 18px 18px!important}
  .me-hero-lead{-webkit-line-clamp:3!important;margin-bottom:15px!important}
  .me-hero-actions{margin-top:0!important}
  .me-hero-actions .btn{min-height:48px!important}
  .me-stage-only-teaser{margin-top:12px!important}

  /* Vertrauensfelder: sichtbarer Text statt weiß auf weiß */
  .me-trustbar{margin:20px auto 18px!important;border:1px solid #e1e5ea!important;border-radius:20px!important;overflow:hidden!important;box-shadow:0 16px 35px rgba(0,0,0,.10)!important}
  .me-trust-item{color:#111!important;background:#fff!important;border-color:#e1e5ea!important}
  .me-trust-item strong{color:#111!important;display:block!important}
  .me-trust-item small{color:#626b76!important;display:block!important}
  .me-trust-icon{color:#d71920!important}

  /* Referenzen direkt nach dem Hero auffindbar */
  .me-mobile-reference-shortcut{display:grid;gap:14px;margin:0 18px 34px;padding:20px;border:1px solid #e1e5ea;border-radius:20px;background:#fff;box-shadow:0 12px 30px rgba(0,0,0,.08)}
  .me-mobile-reference-shortcut strong{display:block;font-size:20px;line-height:1.2;color:#111}
  .me-mobile-reference-shortcut span{display:block;margin-top:6px;font-size:14px;line-height:1.45;color:#626b76}
  .me-mobile-reference-shortcut a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:12px 16px;border-radius:14px;background:#111;color:#fff!important;font-weight:900;text-align:center}

  /* Der nächste Inhaltsbereich beginnt etwas ruhiger */
  .me-service-focus.section{padding-top:40px!important}
}
