/*
 * Traum Cafe: Pizza Match, eigene Pizza und Warenkorb.
 * Nutzt die Tokens aus hero.css (Farben, Schriften, --gutter, --header-h).
 */

/* ---------- Gemeinsam ---------- */

.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  font-weight: 800;
  font-stretch: 75%;
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
}

.pill-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0 1.3rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.25s,
    border-color 0.25s,
    color 0.25s;
}

.pill-button:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

.pill-button__count,
.cart-badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--tomato);
  color: var(--on-tomato);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pill-button__count[hidden],
.cart-badge[hidden] {
  display: none;
}

/* Eigene Zustände statt des blauen System-Blitzes beim Antippen */
.pill-button,
.swipe-button,
.topping,
.cta {
  -webkit-tap-highlight-color: transparent;
}

/* Warenkorb-Knopf oben in der Kopfzeile */
.cart-button {
  position: relative;
}

.cart-badge {
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
}

/* Hauptknopf (wie "Jetzt bestellen" im Hero) */
.match .cta,
.creator .cta,
.menu .cta,
.hours .cta,
.about .cta,
.site-footer .cta,
.cart .cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 1rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.3s,
    color 0.3s,
    opacity 0.3s;
}

.match .cta:hover,
.creator .cta:hover:not(:disabled),
.menu .cta:hover,
.hours .cta:hover,
.about .cta:hover,
.site-footer .cta:hover,
.cart .cta:hover {
  background: var(--tomato);
  color: var(--on-tomato);
}

.creator .cta:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ---------- Find your Pizza Match ---------- */

/* ---------- Ein durchgehender Tisch unter allen Abschnitten nach dem Hero ---------- */

/* Die Fläche und ihr seitenverkehrtes Gegenstück sind weich überblendet aneinandergesetzt:
   sie wiederholt sich ohne Kante und ohne Spiegelachse; aufgehellt ist sie schon im Bild. Oben kommt sie weich aus dem Hero, unten läuft
   sie weich in den Seitenfuß aus. */
.tables {
  --table: var(--page-table);

  position: relative;
  isolation: isolate;
  background: var(--table) url("../img/tisch-durchgehend-2400.webp") center top / 100% auto repeat-y;
}

.tables::before,
.tables::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  z-index: -1;
  height: 18svh;
  pointer-events: none;
}

.tables::before {
  top: 0;
  background: linear-gradient(var(--table), transparent);
}

.tables::after {
  bottom: 0;
  background: linear-gradient(transparent, var(--table));
}

@media (max-width: 900px) {
  .tables {
    background-image: url("../img/tisch-durchgehend-1400.webp");
  }
}

/* Hochkant: Fläche größer ziehen, sonst werden die Steinchen winzig */
@media (max-width: 900px) and (orientation: portrait) {
  .tables {
    background-size: max(100%, 1000px) auto;
  }
}

/* Abschnitte liegen durchsichtig auf dem Tisch; Zutaten dürfen beim Fallen kurz über
   die Abschnittsgrenze ragen (seitlich wird abgeschnitten, sonst gäbe es Querscrollen) */
.match,
.creator,
.menu,
.hours,
.gallery,
.about,
.anfahrt {
  position: relative;
  isolation: isolate; /* Zutaten (z-index -1) bleiben hinter dem Inhalt, aber im Abschnitt */
  overflow-x: clip;
  padding: calc(var(--header-h) + 2.5rem) var(--gutter) 4.5rem;
  scroll-margin-top: 0;
}

/* Sprungziele der Links (hero.js) bekommen den Fokus, aber keinen Rahmen */
[tabindex="-1"]:focus {
  outline: none;
}

/* ---------- Zutaten auf dem Tisch (section-tables.js) ---------- */

.table-scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow-x: clip;
  pointer-events: none;
}

.table-scene__items {
  position: absolute;
  inset: 0;
}

.table-scene__items.is-waiting .ingredient {
  visibility: hidden;
}

/* Kästen auf dem Tisch: Milchglas statt Grau */
.info-box,
.match__done,
.creator__panel,
.menu__card,
.hours__card,
.about__card,
.anfahrt__card {
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 14px 34px -20px rgb(48 22 8 / 0.4);
}

.match__inner,
.creator__inner {
  width: min(100%, 72rem);
  margin-inline: auto;
}

.match__head {
  position: relative;
  display: grid;
  justify-items: center;
}

.match__actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

/* Breit: Titel mittig, Knöpfe rechts daneben (Raster, damit sie sich nie überlappen) */
@media (min-width: 1200px), (min-width: 961px) and (orientation: landscape) {
  .match__head {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 1.5rem;
  }

  .match__head .section-title {
    grid-column: 2;
  }

  .match__actions {
    grid-column: 3;
    justify-self: end;
    margin-top: 0;
  }
}

.match__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 2.5rem;
  margin-top: 2.5rem;
}

/* Name und Beschreibung links neben der Karte (wie im Entwurf) */
.match__info {
  display: grid;
  gap: 1rem;
  justify-self: end;
  width: min(100%, 19rem);
  margin-bottom: 5.5rem;
}

.info-box {
  padding: 1.1rem 1.25rem;
  border-radius: 1rem;
}

.info-box__label {
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.info-box__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  font-stretch: 75%;
  line-height: 1;
  text-transform: uppercase;
}

.info-box__price {
  margin: 0.4rem 0 0;
  color: var(--tomato-text);
  font-weight: 700;
}

.info-box__desc {
  margin: 0;
  line-height: 1.5;
}

.match__play {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
}

.match__deck {
  position: relative;
  width: clamp(15rem, min(26vw, (100svh - var(--header-h) - 16.5rem) * 0.75), 21rem);
  aspect-ratio: 3 / 4;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  border-radius: 1.25rem;
  outline: none;
}

.match__deck:focus-visible {
  outline: 3px solid var(--tomato-text);
  outline-offset: 6px;
}

.swipe-card {
  --depth: 0;
  --x: 0px;
  --y: 0px;
  --r: 0deg;
  --swipe: 0;

  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 1.25rem;
  background: color-mix(in oklab, var(--ink) 5%, var(--bg));
  box-shadow:
    inset 0 0 0 1px rgb(0 0 0 / 0.08),
    0 16px 36px -14px rgb(48 22 8 / 0.45);
  transform:
    translate(var(--x), calc(var(--y) + var(--depth) * -1.1rem))
    rotate(var(--r))
    scale(calc(1 - var(--depth) * 0.05));
  transition:
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.3s;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.swipe-card[data-top] {
  cursor: grab;
}

.swipe-card.is-dragging {
  cursor: grabbing;
  transition: none;
}

.swipe-card.is-leaving {
  transition: none;
}

.match.is-enhanced .swipe-card:not([data-top]) {
  pointer-events: none;
}

/* ab der vierten Karte unsichtbar, damit der Stapel ruhig wirkt */
.swipe-card[style*="--depth: 3"] {
  opacity: 0;
}

.swipe-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Ohne JavaScript steht der Text auf der Karte; mit JavaScript links daneben */
.swipe-card__text {
  position: absolute;
  inset: auto 0 0;
  padding: 3rem 1.25rem 1.25rem;
  background: linear-gradient(transparent, rgb(20 14 10 / 0.85));
  color: #fffdfb;
}

.match.is-enhanced .swipe-card__text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.swipe-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  font-stretch: 75%;
  text-transform: uppercase;
}

.swipe-card__desc,
.swipe-card__price {
  margin: 0.25rem 0 0;
}

/* Grün (mag ich) bzw. Rot (nächste) steigt von unten auf, je weiter gezogen wird */
.swipe-card__tint {
  position: absolute;
  inset: 0;
  opacity: var(--swipe);
  pointer-events: none;
  transition: opacity 0.2s;
}

.swipe-card[data-dir="right"] .swipe-card__tint {
  box-shadow: inset 0 -90px 70px rgb(45 150 45 / 0.75);
}

.swipe-card[data-dir="left"] .swipe-card__tint {
  box-shadow: inset 0 -90px 70px rgb(224 83 83 / 0.75);
}

.swipe-card__badge {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 5.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(255 253 251 / 0.92);
  opacity: 0;
  transform: translate(-50%, -50%) scale(calc(0.6 + var(--swipe) * 0.4));
  pointer-events: none;
}

.swipe-card__badge .icon {
  width: 2.75rem;
  height: 2.75rem;
}

.swipe-card__badge--like {
  color: rgb(45 150 45);
}

.swipe-card__badge--nope {
  color: rgb(214 64 64);
}

.swipe-card[data-dir="right"] .swipe-card__badge--like,
.swipe-card[data-dir="left"] .swipe-card__badge--nope {
  opacity: var(--swipe);
}

.match__buttons {
  display: flex;
  gap: 1.25rem;
}

.match__buttons[hidden] {
  display: none;
}

/* Knopf mit Beschriftung darunter */
.swipe-option {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
}

.swipe-option__label {
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
}

.swipe-button {
  display: grid;
  place-items: center;
  width: 4rem;
  aspect-ratio: 1;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: var(--bg);
  cursor: pointer;
  transition:
    transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 0.25s,
    color 0.25s,
    border-color 0.25s;
}

.swipe-button .icon {
  width: 1.6rem;
  height: 1.6rem;
}

.swipe-button--nope {
  color: rgb(196 52 52);
}

.swipe-button--like {
  color: rgb(37 128 37);
}

.swipe-button:hover {
  transform: scale(1.06);
}

.swipe-button--nope:hover {
  border-color: rgb(196 52 52);
  background: rgb(196 52 52);
  color: #fff;
}

.swipe-button--like:hover {
  border-color: rgb(37 128 37);
  background: rgb(37 128 37);
  color: #fff;
}

.swipe-button:active {
  transform: scale(0.94);
}

/* Stapel leer: Weg zur eigenen Kreation */
.match__done {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.9rem;
  width: clamp(15rem, min(26vw, (100svh - var(--header-h) - 16.5rem) * 0.75), 21rem);
  aspect-ratio: 3 / 4;
  margin-top: 1.5rem;
  padding: 2.5rem 1.5rem;
  border-radius: 1.25rem;
  text-align: center;
}

.match__done[hidden],
.match__deck[hidden] {
  display: none;
}

.match__done-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  font-stretch: 75%;
  line-height: 1;
  text-transform: uppercase;
}

.match__done-title:focus {
  outline: none;
}

.match__done-text {
  margin: 0 0 0.5rem;
  color: var(--muted);
}

.match__info[hidden] {
  visibility: hidden;
  display: grid;
}

/* Ohne JavaScript: Karten nebeneinander statt gestapelt */
.match:not(.is-enhanced) .match__info,
.match:not(.is-enhanced) .match__buttons,
.match:not(.is-enhanced) .match__done,
.match:not(.is-enhanced) [data-cart-open] {
  display: none;
}

.match:not(.is-enhanced) .match__body {
  display: block;
}

.match:not(.is-enhanced) .match__deck {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1.5rem;
  width: 100%;
  aspect-ratio: auto;
}

.match:not(.is-enhanced) .swipe-card {
  position: relative;
  aspect-ratio: 3 / 4;
  transform: none;
}

/* ---------- Create your own Pizza ---------- */

.creator__body {
  display: grid;
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: 2.5rem;
}

.creator__panel {
  padding: 1.5rem;
  border-radius: 1.25rem;
}

.creator__fallback {
  margin: 0;
  line-height: 1.5;
}

.creator__fallback a {
  color: var(--tomato-text);
  font-weight: 650;
}

.creator.is-enhanced .creator__fallback,
.creator:not(.is-enhanced) .creator__base,
.creator:not(.is-enhanced) .creator__list,
.creator:not(.is-enhanced) .creator__summary {
  display: none;
}

html:not(.has-cart) .cart-button {
  display: none;
}

.creator__base {
  margin: 0 0 1.1rem;
  color: var(--muted);
  line-height: 1.5;
}

.creator__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.topping {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.9rem;
  padding: 0 0.5rem 0 1rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s;
}

.topping:hover {
  border-color: var(--ink);
}

.topping[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

.topping__sign {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: color-mix(in oklab, var(--ink) 8%, transparent);
}

.topping[aria-pressed="true"] .topping__sign {
  background: var(--tomato);
  color: var(--on-tomato);
}

.topping__sign .icon {
  width: 0.95rem;
  height: 0.95rem;
}

.topping .icon--minus,
.topping[aria-pressed="true"] .icon--plus {
  display: none;
}

.topping[aria-pressed="true"] .icon--minus {
  display: block;
}

.creator__summary {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}

.creator__picked {
  margin: 0;
  font-weight: 600;
}

.creator__price {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.creator__summary .cta {
  justify-self: start;
  margin-top: 0.3rem;
}

.creator__stage {
  display: grid;
  justify-items: center;
}

.creator__pizza {
  position: relative;
  width: min(100%, 34rem);
  aspect-ratio: 1;
}

.creator__pizza::before {
  content: "";
  position: absolute;
  inset: 4% 1% -3%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--shadow), transparent);
}

.creator__base-img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.creator__layer {
  position: absolute;
  inset: 0;
  container-type: inline-size;
  pointer-events: none;
}

/* Belag-Stück: Schatten und Foto übereinander; Ruhezustand hier im CSS */
.piece {
  position: absolute;
}

.piece img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

.piece__body {
  transform: rotate(var(--rot, 0deg));
}

.piece__shadow {
  opacity: 0.32;
  filter: brightness(0) blur(1.5px);
  transform: translate(var(--sx, 0px), var(--sy, 0px)) rotate(var(--rot, 0deg));
}

/* ---------- Warenkorb ---------- */

.cart {
  width: min(100vw, 26rem);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0 0 0 auto;
  padding: 1.5rem;
  border: 0;
  background: var(--bg);
  color: var(--ink);
  box-shadow: -20px 0 50px -20px rgb(48 22 8 / 0.35);
}

.cart[open] {
  display: flex;
  flex-direction: column;
}

.cart::backdrop {
  background: rgb(20 14 10 / 0.35);
}

@media (prefers-reduced-motion: no-preference) {
  .cart[open] {
    animation: cart-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

@keyframes cart-in {
  from {
    transform: translateX(100%);
  }
}

.cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1.5px solid var(--ink);
}

.cart__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  font-stretch: 75%;
  line-height: 1;
  text-transform: uppercase;
}

.cart__count {
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  font-stretch: 100%;
  text-transform: none;
}

.cart__count[hidden] {
  display: none;
}

.cart__list {
  flex: 1;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

/* Vorschaubild · Name und Zusatz · Preis · Entfernen */
.cart__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "thumb name price remove"
    "thumb detail detail detail";
  align-items: center;
  gap: 0.1rem 0.75rem;
  padding: 0.85rem 0;
  border-bottom: 1px dashed var(--line);
}

.cart__item > div {
  display: contents;
}

.cart__thumb {
  grid-area: thumb;
  width: 3.25rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in oklab, var(--ink) 6%, var(--bg));
  overflow: hidden;
}

.cart__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart__name {
  grid-area: name;
  align-self: end;
  margin: 0;
  font-weight: 700;
  line-height: 1.25;
}

.cart__detail {
  grid-area: detail;
  align-self: start;
  margin: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.35;
}

.cart__price {
  grid-area: price;
  align-self: end;
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cart__price--open {
  max-width: 7rem;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: right;
  white-space: normal;
}

.cart__remove {
  grid-area: remove;
  align-self: center;
  color: var(--muted);
  border-color: transparent;
}

.cart__remove:hover {
  color: var(--tomato-text);
}

/* Leer: Pizzaboden ohne Belag, mittig */
.cart__empty {
  flex: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.6rem;
  padding-block: 2rem;
  text-align: center;
}

.cart__empty-img {
  width: min(11rem, 50%);
  height: auto;
  margin-bottom: 0.75rem; /* ohne drop-shadow: Safari zeichnet sonst einen Kasten ums Bild */
}

.cart__empty-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  font-stretch: 75%;
  line-height: 1;
  text-transform: uppercase;
}

.cart__empty-text {
  max-width: 24ch;
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.cart__empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.cart__empty[hidden],
.cart__foot[hidden],
.cart__total[hidden] {
  display: none;
}

.cart__foot {
  display: grid;
  gap: 0.9rem;
  padding-top: 1.25rem;
}

/* Summe auf einem kleinen Kassenbon mit gezacktem Rand oben (wie in „Über uns“) */
.cart__bon {
  --tooth: 0.45rem;

  display: grid;
  gap: 0.4rem;
  padding: calc(var(--tooth) + 0.9rem) 1.1rem 1rem;
  background: #fffefa;
  color: #2b2a26;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  filter: drop-shadow(0 8px 14px rgb(48 22 8 / 0.14));
  -webkit-mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(var(--tooth) * 2) var(--tooth) repeat-x,
    linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--tooth) + 1px) no-repeat;
  mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(var(--tooth) * 2) var(--tooth) repeat-x,
    linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--tooth) + 1px) no-repeat;
}

.cart__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  font-size: 0.95rem;
  text-transform: uppercase;
}

.cart__total strong {
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}

.cart__note {
  margin: 0;
  padding-top: 0.4rem;
  border-top: 1.5px dashed #b8b5ad;
  color: #5a5852;
  font-size: 0.75rem;
  line-height: 1.45;
}

.cart__total[hidden] + .cart__note {
  padding-top: 0;
  border-top: 0;
}

.cart__hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.cart__note:empty {
  display: none;
}

/* fliegendes Abbild auf dem Weg in den Warenkorb */
.cart-ghost {
  position: fixed;
  z-index: 50;
  border-radius: 1rem;
  object-fit: cover;
  pointer-events: none;
  box-shadow: 0 12px 30px -10px rgb(48 22 8 / 0.5);
}

/* ---------- Weniger Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
  .swipe-card,
  .swipe-button,
  .pill-button,
  .topping {
    transition: none;
  }
}

/* ---------- Niedrige Laptop-Bildschirme ---------- */

@media (min-width: 961px) and (max-height: 820px) {
  .creator {
    padding-top: calc(var(--header-h) + 1.5rem);
  }

  .creator__body {
    grid-template-columns: minmax(0, 32rem) minmax(0, 1fr);
    margin-top: 1.5rem;
  }

  .creator__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .topping {
    gap: 0.35rem;
    padding-left: 0.8rem;
    font-size: 0.875rem;
  }

  .topping__sign {
    width: 1.6rem;
    height: 1.6rem;
  }

  .creator__pizza {
    width: min(100%, 34rem, 100svh - var(--header-h) - 9rem);
  }
}

/* ---------- Tablet und Handy ---------- */

@media (max-width: 960px), (max-width: 1199px) and (orientation: portrait) {
  .match__body {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 1.5rem;
  }

  .match__play {
    order: -1;
  }

  .match__info {
    justify-self: stretch;
    width: min(100%, 26rem);
    margin: 0 auto;
  }

  .match__deck,
  .match__done {
    width: clamp(11rem, min(78vw, 20rem, (100svh - var(--header-h) - 8rem) * 0.75), 20rem);
  }

  /* Name und Preis stehen auf der Karte, damit sie mit den Knöpfen im Blick sind */
  .match.is-enhanced .swipe-card__text {
    inset: auto 0 0;
    width: auto;
    height: auto;
    padding: 3rem 1.25rem 1.25rem;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }

  .match.is-enhanced .swipe-card__desc {
    display: none;
  }

  .match__info .info-box:first-child {
    display: none;
  }

  .creator__body {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Die Pizza bleibt beim Durchblättern der Zutaten oben stehen,
     damit man jede Zutat im selben Moment fallen sieht */
  .creator__stage {
    order: -1;
    position: sticky;
    top: var(--header-h);
    z-index: 2;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0.75rem var(--gutter) 1.5rem;
    /* nur unten weich auslaufen: oben schließt die Kopfzeile (Milchglas) direkt an */
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 1.5rem), transparent);
    mask-image: linear-gradient(180deg, #000 calc(100% - 1.5rem), transparent);
    transition:
      background-color 0.25s,
      -webkit-backdrop-filter 0.25s,
      backdrop-filter 0.25s;
  }

  /* Milchglas mit weichen Kanten, nur solange die Liste darunter durchläuft (creator.js) */
  .creator__stage.is-stuck {
    background: color-mix(in oklab, var(--table) 45%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .creator__pizza {
    width: min(60vw, 22rem, 40svh);
  }

  .creator__body {
    gap: 1rem;
  }

  .creator__panel {
    width: min(100%, 34rem);
    margin-inline: auto;
  }
}

/* Handy quer: Pizza neben der Liste statt darüber, sonst bleiben nur gut zwei Reihen Zutaten
   sichtbar. Sie bleibt dabei sticky (Werte aus dem Block darüber). */
@media (max-width: 960px) and (max-height: 560px) and (orientation: landscape) {
  /* Karte samt Knöpfen und Beschriftung (7,5rem) muss unter die Kopfzeile passen, sonst wischt man halb blind */
  .match__deck,
  .match__done {
    width: clamp(8rem, (100svh - var(--header-h) - 7.5rem) * 0.75, 20rem);
  }

  .creator__body {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .creator__stage {
    order: 0;
    margin-inline: 0;
    padding: 0.75rem 0;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .creator__stage.is-stuck {
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .creator__pizza {
    width: min(38vw, 100svh - var(--header-h) - 2rem);
  }
}

@media (max-width: 420px) {
  .creator__panel {
    padding: 1rem;
  }

  .topping {
    gap: 0.35rem;
    padding-left: 0.85rem;
    font-size: 0.875rem;
  }

  .topping__sign {
    width: 1.6rem;
    height: 1.6rem;
  }
}

/* ---------- Merkliste: Hinweis über die Bestellseite ---------- */

.cart__notice {
  margin: 0;
  padding: 0.6rem 0.75rem;
  border-radius: 0.6rem;
  background: color-mix(in oklab, var(--ink) 5%, var(--bg));
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* ---------- Bestellleiste am Handy (bestellleiste.js) ---------- */

.order-bar {
  display: none;
}

@media (max-width: 960px), (max-width: 1199px) and (orientation: portrait) {
  html {
    scroll-padding-bottom: 5rem; /* Sprünge und Fokus landen nicht unter der Leiste */
  }

  .order-bar {
    position: fixed;
    inset: auto 0 0;
    z-index: 9; /* unter der Kopfzeile und dem Merklisten-Fenster */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: color-mix(in oklab, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    translate: 0 110%;
    visibility: hidden;
    transition:
      translate 0.35s var(--ease-out),
      visibility 0s 0.35s;
  }

  .order-bar.is-on {
    translate: 0 0;
    visibility: visible;
    transition: translate 0.35s var(--ease-out);
  }

  .order-bar .cta {
    min-height: 2.9rem;
    padding: 0 1rem 0 1.25rem;
    font-size: 0.9375rem;
  }

  .order-bar__status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
  }

  .order-bar__status::before {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #8a8780;
  }

  .order-bar__status.is-open::before {
    background: #2f7d3f;
  }
}

@media (prefers-reduced-motion: reduce) {
  .order-bar,
  .order-bar.is-on {
    transition: none;
  }
}