/* Handy-Feinschliff. Wird als letztes Stylesheet geladen, damit diese Regeln
   die Basiswerte aus layout.css und components.css sicher überschreiben. */

@media (max-width: 700px) {
  :root { --pad: 1.25rem; }

  /* Alles, was wie eine Karte aussieht, läuft bis zum Rand — dadurch sitzt
     jeder Text auf derselben Linie wie die Überschriften darüber. */
  .grid, .steps, .assurance, .story__stats, .bundle__media, .bundle__list {
    margin-inline: calc(var(--pad) * -1);
  }
  .grid { gap: 0; }

  .card, .assurance, .story__stats, .bundle__media, .bundle-row {
    border-radius: 0; border-left: 0; border-right: 0;
  }
  .card { border-top: 0; }
  .card:first-child { border-top: 1px solid var(--line); }
  .card__media { padding-inline: 0; }
  .card__media img { padding-inline: var(--pad); }
  .card__tags { left: var(--pad); }
  .card__heat { right: var(--pad); }
  .card__body { padding-inline: var(--pad); }
  .steps li, .assurance > div, .story__stats > div, .bundle-row {
    padding-inline: var(--pad);
  }
  .bundle-row + .bundle-row { border-top: 0; }

  /* Neue Seiten auf dieselbe Kante bringen */
  .recipes, .usp, .shipcards, .band__list, .tablewrap, .bundlegrid,
  .pricecards, .cartpage__lines, .summary, .checkout, .pdp__media, .pdp__ship {
    margin-inline: calc(var(--pad) * -1);
    border-radius: 0; border-left: 0; border-right: 0;
  }
  .recipe, .band__list li, .bcard, .pricecard,
  .cartpage__lines, .summary, .checkout, .pdp__ship { padding-inline: var(--pad); }
  .usp > div, .shipcards > div { padding-inline: var(--pad); }
  .bundlegrid, .pricecards { gap: 1px; background: var(--line); }
  .bcard, .pricecard { border-radius: 0; border-left: 0; border-right: 0; }
  .pdp { padding-inline: var(--pad); }
  .statusbar { margin-inline: var(--pad); }
  .pdp__media { aspect-ratio: 1/.92; }
  .summary--sticky { position: static; }
  .stickybuy { display: flex; }
  .form__grid { grid-template-columns: 1fr; }
  .form__grid--tight { grid-template-columns: .5fr 1fr; }
  .buy__mode { grid-template-columns: 1fr; }
  .recipe { gap: 1rem; }
  .hero__tabs { width: calc(100% - var(--pad) * 2); }

  /* Teure Effekte, die beim Scrollen jeden Frame neu berechnet werden */
  .hero__glow { animation: none; }
  .hero__cup[data-state="active"] img { animation: none; }
  .card:hover { transform: none; }
  .card:hover .card__media img { transform: none; }
  .bundle-row:hover { transform: none; }
}

/* Ab-18-Box über dem Hero nur am Computer (Handy: steht im Laufband und an der Kasse) */
@media (max-width: 760px) {
  .statusbar { display: none; }
}