/* Entwurf 25: Mobile-Korrekturrunde nach realen Nutzer-Screenshots.
   Designregel auf Mobile: Heroes zentriert, redaktioneller Inhalt linksbündig. */

@media (max-width:760px){
  :root{--mobile-pad25:18px;--header-height:64px}

  /* Der Entwurfsbalken darf den permanenten mobilen Header nicht verschieben. */
  .preview-bar{display:none!important}
  html{overflow-x:clip!important;scroll-padding-top:calc(var(--header-height,64px) + 16px)!important}
  body{overflow-x:clip!important;padding-top:var(--header-height,64px)!important}

  /* Wirklich viewport-fester Header. Das Menü öffnet sich immer an der aktuellen Scrollposition. */
  header.sticky-header{
    position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;
    z-index:1000!important;box-sizing:border-box!important;margin:0!important;
    min-height:64px!important;padding:9px max(16px,env(safe-area-inset-right)) 9px max(16px,env(safe-area-inset-left))!important;
    background:rgba(16,17,19,.985)!important;border-bottom:1px solid #4b402f!important;
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  }
  .sticky-header .brand{min-width:0!important;gap:9px!important}
  .sticky-header .brand img{width:36px!important;height:36px!important;flex:0 0 36px}
  .sticky-header .brand span{font-size:20px!important;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis}
  .enhanced .menu-toggle{margin-left:auto!important;flex:0 0 auto!important;min-width:78px!important;min-height:44px!important}
  .enhanced .header-panel{
    position:fixed!important;left:0!important;right:0!important;top:var(--header-height,64px)!important;bottom:0!important;
    z-index:1001!important;width:100%!important;max-height:none!important;height:auto!important;box-sizing:border-box!important;
    overflow-y:auto!important;overscroll-behavior:contain!important;
    padding:14px max(var(--mobile-pad25),env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) max(var(--mobile-pad25),env(safe-area-inset-left))!important;
    background:#161719!important;border-bottom:0!important;
  }
  body.mobile-menu-open25{overflow:hidden!important}

  /* Auf dem Handy braucht es den zusätzlichen Brotkrumenstreifen nicht. Das feste Menü übernimmt die Orientierung. */
  .breadcrumbs18{display:none!important}

  /* Ein bewusstes Ausrichtungssystem statt wechselnder Zentrierung. */
  .page-index .hero-inner,
  .page-gta-6 .game-title13,
  .page-intro.photo-intro .intro-content{
    text-align:center!important;
  }
  .page-index .hero-inner{align-items:center!important}
  .page-index .hero-inner>p,
  .page-gta-6 .game-title13>p,
  .page-intro.photo-intro .intro-content>p{
    text-align:center!important;margin-left:auto!important;margin-right:auto!important;
  }
  .page-index .hero-actions,.page-index .hero-meta{justify-content:center!important}

  main .heading09,main .heading09 h2,main .heading09 p,
  main .section-heading,main .section-heading h2,main .section-heading p,
  main .selection-heading,main .selection-heading h2,main .selection-heading p,
  main .directory-heading,main .directory-heading h2,
  main .editorial-lead,main .editorial-lead h2,main .editorial-lead p,
  main .detail09 h2,main .detail09 h3,main .detail09 p,
  main .console-story09 h2,main .console-story09 p,
  main .choices09 h2,main .choices09 h3,main .choices09 p,
  main .place09 h3,main .place09 p,
  main .narrow09,main .narrow09 h2,
  main .people09 h3,main .people09 p,
  main .supporting09,main .supporting-head17,main .supporting-head17 p,
  main .media-note20,main .source-note17,
  main .directory-row h3,main .directory-row p,
  main .equipment-index .section-heading,
  main .article-layout>.prose,
  main .guide-invite,main .guide-invite p,
  main .closing09,main .closing09 h2,main .closing09 p{
    text-align:left!important;
  }
  main .heading09,main .section-heading,main .selection-heading,
  main .supporting-head17,main .narrow09,main .closing09{
    margin-left:0!important;margin-right:0!important;
  }
  .people09 p{margin-left:0!important;margin-right:0!important;max-width:none!important}
  .supporting09{margin-left:0!important;margin-right:0!important;max-width:none!important}
  .supporting-head17{max-width:none!important}
  .trailer09 .eyebrow,.pc09 .eyebrow{text-align:left!important}

  /* GTA-Themennavigation: vollständig sichtbar, kein abgeschnittener horizontaler Button-Streifen. */
  .guide-nav{
    position:relative!important;top:auto!important;z-index:1!important;
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    width:100%!important;overflow:visible!important;gap:8px!important;
    padding:12px var(--mobile-pad25)!important;background:#101113!important;
  }
  .guide-nav a{
    width:100%!important;min-width:0!important;min-height:44px!important;box-sizing:border-box!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    padding:8px 6px!important;border:1px solid #514633!important;border-radius:10px!important;
    background:#18191a!important;font-size:11px!important;line-height:1.18!important;text-align:center!important;
    white-space:normal!important;overflow-wrap:anywhere!important;
  }

  /* Auch Setup-Sprunglinks bleiben komplett im Viewport. */
  .page-bundles .setup-jumps22{
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    overflow:visible!important;width:100%!important;gap:8px!important;
  }
  .page-bundles .setup-jumps22 a{
    min-width:0!important;width:100%!important;white-space:normal!important;text-align:center!important;
    justify-content:center!important;padding:8px 5px!important;line-height:1.2!important;
  }

  /* Startseite: beide aufeinanderfolgenden Editorial-Bilder auf exakt derselben Inhaltsbreite. */
  .page-index .image-editorial{padding-left:var(--mobile-pad25)!important;padding-right:var(--mobile-pad25)!important}
  .page-index .image-editorial figure{width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
  .page-index .image-editorial img{display:block!important;width:100%!important;height:230px!important;object-fit:cover!important;border-radius:16px!important}
  .page-index .home-panorama09{
    width:auto!important;max-width:none!important;margin:0 var(--mobile-pad25) 42px!important;padding:0!important;
  }
  .page-index .home-panorama09 img{
    display:block!important;width:100%!important;height:230px!important;object-fit:cover!important;border-radius:16px!important;
  }

  /* Verzeichnis und sonstige große Motive folgen derselben Bildkante. */
  .page-zubehoer .directory-section .directory-photo09{width:100%!important;margin:0 0 18px!important;padding:0!important}
  .page-zubehoer .directory-section .directory-photo09 img{width:100%!important;height:220px!important;object-fit:cover!important}

  /* Hauptfiguren: Bild, Titel und Text haben dieselbe Kante. */
  .page-gta-6 .people09{gap:34px!important}
  .page-gta-6 .people09 article{width:100%!important;min-width:0!important}
  .page-gta-6 .people09 .photo09{width:100%!important;margin:0!important;padding:0!important}
  .page-gta-6 .people09 .photo09 img{width:100%!important;height:310px!important;object-fit:cover!important}
  .page-gta-6 .people09 h3{margin:18px 0 10px!important}
  .page-gta-6 .people09 p{margin:0!important}
  .page-gta-6 .supporting09{margin-top:28px!important}

  /* Buttons bleiben immer innerhalb ihrer Inhaltsbreite. */
  main .button,main .text-link,main .list-link13,main .planner-shop12,
  .hero-actions>a,.console-next-actions19>a,.preset-links22>a{
    max-width:100%!important;box-sizing:border-box!important;
  }
}

@media (max-width:374px){
  :root{--mobile-pad25:16px}
  .guide-nav{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .page-bundles .setup-jumps22{grid-template-columns:1fr!important}
}

@media (max-width:760px){
  /* Override the old body-lock helper: opening the menu must never move the page back toward the top. */
  body.mobile-menu-open23,body.mobile-menu-open25{
    overflow-x:clip!important;overflow-y:auto!important;touch-action:auto!important;
  }
  .enhanced .header-panel{
    height:calc(100dvh - var(--header-height,64px))!important;
    max-height:calc(100dvh - var(--header-height,64px))!important;
    bottom:auto!important;
  }
}

@media (max-width:760px){
  /* Hero ist die einzige bewusst zentrierte Textzone. */
  .page-index .hero h1,.page-index .hero .hero-inner>p,
  .page-gta-6 .game-title13 .eyebrow,.page-gta-6 .game-title13 h1,.page-gta-6 .game-title13 p,
  .page-intro.photo-intro .intro-content .eyebrow,.page-intro.photo-intro .intro-content h1,.page-intro.photo-intro .intro-content>p{
    text-align:center!important;
  }

  /* Wenn eine Abschnittsüberschrift links steht, steht auch ihre goldene Linie links. */
  main .heading09 h2:after,
  main .section-heading h2:after,
  main .editorial-lead h2:after,
  main .detail09 h2:after,
  main .console-story09 h2:after,
  main .choices09 h2:after,
  main .narrow09 h2:after,
  main .equipment-index h2:after,
  main .closing09 h2:after,
  main .directory-section h2:after{
    margin-left:0!important;margin-right:auto!important;
  }
}

@media (max-width:760px){
  /* Mobile darf beim Laden keine seitlich versetzten Hero-Texte zeigen. */
  .photo-intro .intro-content,.hero-inner,.game-title13{
    animation:none!important;transform:none!important;
  }
}

@media (max-width:760px){
  .search-intro11 .intro-content{animation:none!important;transform:none!important}
}
