/* Über uns + Kontakt: die Kasse und der Bon, der aus ihr kommt.
   Desktop zweispaltig — Text links, Kasse rechts; darunter beginnt der
   Bon in derselben rechten Spalte, als käme er aus der Lade. */

/* ---------- Raster ---------- */
.ueber-uns__raster,
.kontakt__raster {
  display: grid;
  gap: var(--raum-5);
  align-items: start;
}
@media (min-width: 840px) {
  .ueber-uns__raster,
  .kontakt__raster {
    grid-template-columns: 1fr 1fr;
    gap: var(--raum-6);
  }
  .ueber-uns .sektion__kopf,
  .kontakt .sektion__kopf {
    margin-bottom: var(--raum-4);
  }
  .ueber-uns {
    padding-bottom: var(--raum-4);
  }
  .kontakt {
    padding-top: 0;
  }
}

/* ---------- Die Kasse ---------- */
.kasse-buehne {
  position: relative;
  margin: 0;
  display: grid;
  justify-items: center;
  gap: var(--raum-2);
}
.kasse-buehne__knopf {
  position: absolute;
  inset: 0 0 40px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 2;
  border-radius: var(--radius-karte);
}
.kasse-buehne__text {
  font-size: var(--t-klein);
  color: var(--hell-leise);
  text-align: center;
}
.kasse {
  width: min(100%, 460px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.45));
}

/* Sichtbare Linien: Steppstich wie die Naht im Hero */
.kasse__linie {
  fill: none;
  stroke: var(--faden-hell);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 7 3.4;
}
.kasse__fein {
  stroke-width: 1.3;
  stroke-dasharray: 6 3;
}
/* Die Maske (Kopie der Linien, kasse.js): deckt Linie für Linie auf */
.kasse__maske .kasse__linie {
  stroke: #fff;
  stroke-width: 6;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.kasse.ist-da .kasse__maske .kasse__linie {
  animation: kasse-zeichnen 1.4s cubic-bezier(0.5, 0, 0.2, 1) var(--verzug, 0s) forwards;
}
@keyframes kasse-zeichnen {
  to { stroke-dashoffset: 0; }
}

/* Flächen kommen zum Schluss, leise wie Beize */
.kasse__flaechen { opacity: 0; }
.kasse.ist-da .kasse__flaechen {
  animation: kasse-beizen 1.1s ease-out 2.9s forwards;
}
@keyframes kasse-beizen { to { opacity: 1; } }

.kasse__holz { fill: rgba(123, 47, 31, 0.22); }
.kasse__holz--tief { fill: rgba(123, 47, 31, 0.36); }
.kasse__dunkel { fill: rgba(0, 0, 0, 0.7); }
.kasse__pane { fill: #fffdf8; }
.kasse__ziffer {
  font-family: var(--schrift-sans);
  font-size: 15px;
  font-weight: 600;
  fill: var(--tinte);
}
.kasse__schrift {
  font-family: var(--schrift-serif);
  font-style: italic;
  font-size: 22px;
  fill: #d9b16a;
}

/* ---- Klingeln: Kurbel dreht, Flaggen springen, Lade geht auf ---- */
.kasse__kurbel,
.kasse__flagge,
.kasse__lade {
  transform-box: view-box;
}
.kasse__kurbel { transform-origin: 384px 296px; }
.kasse__flagge { transform-box: fill-box; transform-origin: 50% 100%; }
.kasse__lade { transform-origin: 210px 450px; }

.kasse.klingelt .kasse__kurbel {
  animation: kurbel-dreht 0.7s ease-in-out both;
}
@keyframes kurbel-dreht {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.kasse.klingelt .kasse__flagge {
  animation: flagge-springt 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
  animation-delay: calc(0.62s + var(--i) * 60ms);
}
@keyframes flagge-springt {
  0%   { transform: scaleY(1); }
  40%  { transform: scaleY(0.05); }
  100% { transform: scaleY(1); }
}
.kasse.klingelt .kasse__lade,
.kasse.hat-geklingelt .kasse__lade {
  animation: lade-auf 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0.95s forwards;
}
@keyframes lade-auf {
  to { transform: translateY(16px) scale(1.02); }
}
.kasse.klingelt .kasse__lade-front,
.kasse.hat-geklingelt .kasse__lade-front {
  fill: rgba(150, 70, 50, 0.45);
  transition: fill 0.4s ease-out 1s;
}

@media (prefers-reduced-motion: reduce) {
  .kasse__maske .kasse__linie { stroke-dashoffset: 0; animation: none !important; }
  .kasse__flaechen { opacity: 1; animation: none !important; }
  .kasse .kasse__lade { transform: translateY(10px); animation: none !important; }
}