/* Checkout: Stallszene aus deckungsgleichen Ebenen */
.checkout { display: grid; align-content: start; gap: var(--abstand-5); padding-top: var(--abstand-5); padding-bottom: var(--abstand-6); }
@media (min-width: 64rem) { .checkout { grid-template-columns: 3fr 2fr; align-items: start; } }

.szene {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schatten);
  background: var(--farbe-flaeche-dunkel);
}
.szene img { position: absolute; inset: 0; width: 100%; height: 100%; }
.szene__ebene { opacity: 0; transform: translateY(2%); transition: opacity 0.5s ease, transform 0.5s ease; }
.szene__ebene.an { opacity: 1; transform: none; }
.szene__ebene--boden { transform: none; }

/* Stufenwahl als Slider: Karte mit der Auswahl, darunter Regler und Beträge */
.stufen { --daumen: 36px; margin: var(--abstand-4) 0; }
.regler__karte { position: relative; display: grid; gap: 2px; padding: var(--abstand-3) var(--abstand-4); margin-bottom: var(--abstand-3); background: var(--farbe-flaeche); border: 2px solid var(--farbe-rand); border-radius: var(--radius); transition: border-color 0.3s, background 0.3s; }
.regler__titel { font-weight: 700; }
.regler__preis { font-family: var(--schrift-titel); font-size: 2rem; font-weight: 700; line-height: 1.15; color: var(--abendrot); }
.regler__zusatz { font-size: 0.95rem; font-style: italic; color: var(--farbe-text-leise); }
.regler__abzeichen { position: absolute; top: -11px; right: var(--abstand-3); padding: 1px 10px; border-radius: var(--radius-pill); background: var(--abendrot); color: var(--on-abendrot); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0; transform: scale(0.6); transition: opacity 0.3s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.stufen.ist-ziel .regler__karte { border-color: var(--abendrot); background: linear-gradient(135deg, var(--farbe-flaeche), var(--aprikose)); }
.stufen.ist-ziel .regler__abzeichen { opacity: 1; transform: none; }
.stufen.ist-ziel .regler__zusatz { font-style: normal; font-weight: 600; color: var(--farbe-text); }

.regler__eingabe { --anteil: 0; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: var(--daumen); margin: 0; background: transparent; cursor: pointer; }
.regler__eingabe::-webkit-slider-runnable-track { height: 12px; border-radius: var(--radius-pill); background: linear-gradient(to right, var(--abendrot) calc(var(--daumen) / 2 + (100% - var(--daumen)) * var(--anteil)), var(--farbe-rand) 0); }
.regler__eingabe::-moz-range-track { height: 12px; border-radius: var(--radius-pill); background: linear-gradient(to right, var(--abendrot) calc(var(--daumen) / 2 + (100% - var(--daumen)) * var(--anteil)), var(--farbe-rand) 0); }
.regler__eingabe::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--daumen); height: var(--daumen); margin-top: calc((12px - var(--daumen)) / 2); border-radius: 50%; border: 3px solid var(--abendrot); background: var(--creme) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -36 256 221'%3E%3Cpath fill='%23B5432A' d='M120 177C25 117 0 62 0 27A60 60 0 0 1 120 0A60 60 0 0 1 240 27C240 62 215 117 120 177Z'/%3E%3C/svg%3E") center / 58% no-repeat; box-shadow: 0 2px 6px rgba(107, 61, 38, 0.3); transition: transform 0.2s; }
.regler__eingabe::-moz-range-thumb { width: var(--daumen); height: var(--daumen); box-sizing: border-box; border-radius: 50%; border: 3px solid var(--abendrot); background: var(--creme) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -36 256 221'%3E%3Cpath fill='%23B5432A' d='M120 177C25 117 0 62 0 27A60 60 0 0 1 120 0A60 60 0 0 1 240 27C240 62 215 117 120 177Z'/%3E%3C/svg%3E") center / 58% no-repeat; box-shadow: 0 2px 6px rgba(107, 61, 38, 0.3); }
.regler__eingabe:active::-webkit-slider-thumb { transform: scale(1.12); }
.regler__eingabe:focus-visible { outline: none; }
.regler__eingabe:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--focus); outline-offset: 2px; }
.regler__eingabe:focus-visible::-moz-range-thumb { outline: 2px solid var(--focus); outline-offset: 2px; }

.regler__marken { position: relative; height: 1.6em; margin: var(--space-1) 0 0; padding: 0; list-style: none; }
.regler__marke { position: absolute; left: calc(var(--daumen) / 2 + (100% - var(--daumen)) * var(--pos)); transform: translateX(-50%); font-size: 14px; font-weight: 600; color: var(--farbe-text-leise); white-space: nowrap; cursor: pointer; }
.regler__marke:first-child:not(:only-child) { transform: translateX(calc(var(--daumen) / -2)); }
.regler__marke:last-child:not(:only-child) { transform: translateX(calc(-100% + var(--daumen) / 2)); }
.regler__marke.ist-aktiv { color: var(--farbe-text); }
.regler__marke--ziel { color: var(--abendrot); animation: marke-locken 2.4s ease-in-out infinite; }
@keyframes marke-locken { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.stufen.ist-ziel .regler__marke--ziel { animation: none; }

#paypal-knopf { margin-top: var(--abstand-3); }
.hinweis--fehler { border-left: 4px solid var(--farbe-herz); }


/* Herz in der Szene: wartet sanft, schlägt kräftig, wenn die Kuh voll ist */
.szene [data-herz].an { transform-origin: 50% 15%; animation: herz-warten 2.8s ease-in-out infinite; }
.szene--voll [data-herz="4"].an { animation: herz-schlag 1.1s ease-in-out infinite; }
@keyframes herz-warten { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes herz-schlag { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.12); } 30% { transform: scale(1); } 45% { transform: scale(1.08); } }
.szene__funken { position: absolute; left: 50%; top: 15%; width: 0; height: 0; z-index: 3; pointer-events: none; }
.szene__funken span { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--weizen-400); transform: rotate(var(--winkel)) translateY(0); animation: funke 1.2s ease-out forwards; }
.szene__funken span:nth-child(even) { background: var(--abendrot); width: 8px; height: 8px; }
@keyframes funke { 0% { opacity: 1; transform: rotate(var(--winkel)) translateY(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--winkel)) translateY(-120px) scale(0.4); } }

/* Hinweis zum Aufstocken nach einem Zwischenschritt */
.aufstocken { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin: calc(var(--abstand-2) * -1) 0 var(--abstand-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--weizen-100); border-left: 4px solid var(--weizen-400); }
.aufstocken p { margin: 0; font-weight: 600; }
.aufstocken .knopf { padding: var(--space-2) var(--space-4); }

/* Zurück-Link über beide Spalten */
.checkout__zurueck { grid-column: 1 / -1; justify-self: start; margin-bottom: 0; }