/* Entwurf 24: Mobile-Abnahme für 360–430 px. Desktop bleibt bewusst unverändert. */

.mobile-budget-bar24{display:none}

@media (max-width:760px){
  :root{--mobile-pad24:18px}

  /* Sticky navigation must remain a sticky child, not a child of a scrolling body. */
  body{overflow-x:clip!important}
  header.sticky-header{
    position:sticky!important;top:0!important;z-index:200!important;
    background:rgba(16,17,19,.97)!important;
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid #4b402f;
  }
  .enhanced .menu-toggle{flex:0 0 auto;min-width:78px;justify-content:center}
  .enhanced .header-panel{z-index:210}

  /* Mobile typography follows one rule: editorial copy is left aligned. */
  main h1,main h2,main h3,
  main .heading09,main .section-heading,main .selection-heading,
  main .directory-heading,main .basics-head22,main .overview-head21,
  main .intro-content,main .editorial-lead,main .guide-invite,
  main .closing09,main .console-next19,main .preset-preview21,
  main .planner12>.heading09,main .article-layout>.prose{
    text-align:left!important;
  }
  main .heading09>p,main .section-heading>p,main .selection-heading>p,
  main .intro-content>p,main .guide-invite>p,main .closing09>p{
    margin-left:0!important;margin-right:0!important;text-align:left!important;
  }
  .page-index .hero-inner{text-align:left!important}
  .page-index .hero-actions,.page-index .hero-meta{justify-content:flex-start!important}

  /* Never allow a call-to-action to exceed the viewport. */
  main .button,main .text-link,main .list-link13,main .planner-shop12{
    max-width:100%;box-sizing:border-box;
  }
  .photo-intro .button,.intro-content .button,.hero-actions .button,
  .console-story09 .button,.console-next-actions19 .button,.budget-banner .button,
  .guide-invite .button,.closing09 .button{
    width:100%!important;white-space:normal!important;text-align:center;justify-content:center;
  }
  .button .button-label{min-width:0;white-space:normal!important}
  .button-arrow{flex:0 0 auto}

  /* The three links below article heroes should be fully visible, not clipped like a carousel. */
  .quicklinks13{
    display:grid!important;grid-template-columns:1fr!important;overflow:visible!important;
    padding:14px var(--mobile-pad24)!important;gap:8px!important;
  }
  .quicklinks13 a{
    width:100%;white-space:normal!important;justify-content:space-between;border-radius:11px!important;
    padding:10px 13px!important;min-height:44px!important;
  }

  /* Home entry cards: keep the arrow visually separate from the label. */
  .overview-grid11 h3 a{gap:20px!important;width:100%;align-items:flex-start!important}
  .overview-grid11 h3 a>span{margin-left:auto!important;padding-left:18px!important;line-height:1;transform:none!important}
  .overview-grid11 h3{padding-right:2px}

  /* Console comparison: stable heights despite longer Xbox model names. */
  .compare-scroll09{scroll-padding-left:118px}
  .compare09 table{table-layout:fixed!important;min-width:798px!important}
  .compare09 th:first-child{width:118px!important;min-width:118px!important;padding-left:13px!important;padding-right:11px!important}
  .compare09 thead th:not(:first-child){width:170px!important;padding:18px 12px 16px!important}
  .compare09 thead .model-family09{display:block;min-height:17px}
  .compare09 thead strong{
    display:flex!important;align-items:flex-start;min-height:50px!important;
    font-size:21px!important;line-height:1.08!important;margin:6px 0 7px!important;
  }
  .compare09 thead small{min-height:38px!important;line-height:1.35!important;margin-bottom:10px}
  .compare09 thead .button{
    width:100%!important;height:50px!important;min-height:50px!important;padding:7px 8px!important;
    font-size:10.5px!important;line-height:1.18!important;white-space:normal!important;
    display:flex!important;align-items:center;justify-content:center;
  }
  .compare09 th,.compare09 td{vertical-align:top!important}
  .compare-status09,.compare-foot09,.mobile-swipe-hint23{text-align:left!important;margin-left:0!important;margin-right:0!important}

  /* Preset products: both actions use one identical button box; Amazon remains highlighted. */
  .page-bundles .preset-links22{
    display:grid!important;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)!important;
    gap:8px!important;width:100%!important;align-items:stretch!important;
  }
  .page-bundles .preset-links22 a{
    width:100%!important;height:50px!important;min-height:50px!important;
    padding:7px 8px!important;display:flex!important;align-items:center;justify-content:center;
    text-align:center!important;line-height:1.2!important;font-size:11.5px!important;
    border-radius:9px!important;white-space:normal!important;box-sizing:border-box;
  }
  .page-bundles .preset-links22 .preset-detail22{
    border:1px solid #5a4c37!important;background:#1c1d1e!important;color:#d6c8ae!important;
  }
  .page-bundles .preset-links22 .preset-amazon22{
    border:1px solid #d2ad6b!important;background:#d8b67a!important;color:#171717!important;font-weight:700!important;
  }

  /* Budget calculator: summary first, products second. */
  .page-bundles .planner-layout12{
    display:flex!important;flex-direction:column!important;gap:14px!important;
  }
  .page-bundles .planner-summary12{
    order:-1!important;position:static!important;margin:0 0 8px!important;padding:18px!important;
    border-radius:16px!important;background:#211f1b!important;
  }
  .page-bundles .planner-summary12 h3{font-size:28px!important;margin-bottom:10px;text-align:left!important}
  .page-bundles .planner-summary12>p{text-align:left!important}
  .page-bundles .planner-summary12>label{margin:16px 0 7px!important;text-align:left!important}
  .page-bundles .planner-summary12 #budget12{width:100%;min-height:46px;font-size:16px}
  .page-bundles .planner-summary12 .total-label12{margin:18px 0 4px!important}
  .page-bundles .planner-summary12 #planner-total12{font-size:38px!important;line-height:1.05}
  .page-bundles .planner-summary12 #planner-buylist12{padding-left:18px;margin:12px 0 4px}
  .page-bundles .planner-summary12 #download-list12{margin-top:13px;width:100%}
  .page-bundles .planner-summary12 .remember13{margin-top:17px}
  .page-bundles .planner-summary12 .planner-storage12{margin-top:10px!important}

  /* Compact running total while the long list is being edited. */
  .mobile-budget-bar24{
    position:sticky;top:calc(var(--header-height,62px) + 7px);z-index:35;
    margin:0 0 12px;padding:9px 10px 9px 12px;border:1px solid #6b583a;border-radius:12px;
    background:rgba(28,27,24,.97);box-shadow:0 10px 24px #0008;
    align-items:center;gap:10px;justify-content:space-between;
  }
  .mobile-budget-bar24.is-active24{display:flex}
  .mobile-budget-copy24{min-width:0}
  .mobile-budget-copy24 small{display:block;color:#b7ad9e;font-size:10px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobile-budget-copy24 strong{display:block;color:#f0d59e;font:600 23px/1.05 'Barlow Condensed',sans-serif;margin-top:2px}
  .mobile-budget-bar24 button{
    flex:0 0 auto;min-height:38px;padding:7px 11px;border-radius:9px;border:1px solid #665337;
    background:#26231e;color:#e9ddc8;font-size:11px;
  }

  /* Planner rows read as compact forms rather than loose desktop fragments. */
  .page-bundles .planner-group19 .planner-row12{padding:18px 15px!important}
  .planner-label12{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px!important}
  .planner-label12 h3{margin:0!important;font-size:24px!important}
  .planner-label12 a{flex:0 0 auto;min-height:34px!important;font-size:11px!important;text-align:right}
  .planner-model12 fieldset{margin-top:10px!important}
  .planner-price12{margin-top:13px!important}

  /* Mobile page pager and footer stay left aligned as well. */
  .page-pager>a{text-align:left!important;align-items:flex-start!important}
  .page-pager .pager-next{text-align:right!important;align-items:flex-end!important}
  footer{text-align:left!important}
}

@media (max-width:390px){
  :root{--mobile-pad24:16px}
  .sticky-header .brand span{font-size:18px!important}
  .enhanced .menu-toggle{min-width:74px;padding-inline:10px!important}
  .page-bundles .preset-links22{grid-template-columns:1fr!important}
  .page-bundles .preset-links22 a{height:46px!important;min-height:46px!important}
  .planner-label12{display:block}
  .planner-label12 a{margin-top:6px;text-align:left}
}

@media (prefers-reduced-motion:reduce){
  .mobile-budget-bar24{scroll-behavior:auto}
}

@media (max-width:760px){
  .page-index .hero-actions .text-link{display:inline-flex;align-items:center;justify-content:center;gap:9px!important}
  .page-index .hero-actions .text-link span{margin-left:0!important;flex:0 0 auto}
}

@media (max-width:760px){
  /* Mobile entrance motion stays vertical so cards never appear cut off at an edge. */
  .motion11.pending11,
  .motion11.pending11[data-motion11="left"],
  .motion11.pending11[data-motion11="right"]{
    transform:translateY(18px)!important;
  }
  .draft11 .photo-intro .intro-image,.page-index .hero-bg img{
    animation:none!important;transform:none!important;
  }

  /* Console filters fit without a clipped third button. */
  .compare-controls09{
    display:grid!important;grid-template-columns:1fr!important;gap:8px!important;
    justify-content:stretch!important;
  }
  .compare-controls09 button{width:100%!important;min-height:44px!important}
}