/* ===========================================================================
   Resttickets-Widget, Dankeseite, Admin-Zwischenstand und die Medienabfragen.
   Gehört zu public/styles.css.
   =========================================================================== */

/* --- Resttickets --------------------------------------------------------- */

/* Der Kasten ist im Entwurf 40 Pixel schmaler als die Buchungskarte darüber
   (Figma 48:6439: 20 Pixel Innenabstand links und rechts). */
.capacity {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  /* Die 20 Pixel sind als BREITE gerechnet, nicht als Rand: der Kasten muss
     gleichzeitig 20 Pixel schmaler sein als die Karte darüber UND bei 540
     stehen bleiben, wenn das Band breiter wird. Zwei feste Ränder könnten nur
     das eine von beidem. */
  width: calc(100% - 2.5rem);
  max-width: calc(var(--breite-karte) - 2.5rem);
  margin: 1.875rem auto 0;
  padding: 1.25rem;
  border: 1px solid var(--pink);
  border-radius: var(--radius-block);
  background: var(--pink-flaeche);
}

.capacity__head {
  display: flex;
  gap: 0.3125rem;
  align-items: center;
  margin: 0;
  color: var(--pink-schrift);
  font-size: 1rem;
  font-weight: 700;
}

.capacity__label {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.3125rem;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--pink-schrift);
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
}

.capacity__number {
  color: var(--pink);
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.capacity__bar {
  height: 10px;
  border-radius: var(--radius-pille);
  background: rgb(205 191 198);
  overflow: hidden;
}

.capacity__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pille);
  background: var(--pink);
}

/* Der Ruhezustand des Balkens ist sein ENDWERT (die Staffel unten) — ohne
   JavaScript gibt es keinen anderen. Für die Bewegung setzt public/capacity.js
   den Balken auf null zurück und nimmt die Klasse wieder weg, sobald das Widget
   ins Bild kommt. Zwei Klassen schlagen dabei jede Einzelstufe der Staffel.

   Der Übergang steht bewusst NICHT hier, sondern in `--laeuft`: stünde er am
   Balken selbst, liefe er schon beim Zurücksetzen — der Balken schrumpfte
   sichtbar auf null, bevor er wächst. */
.capacity--startwert .capacity__fill {
  width: 0;
}

/* easeOutCubic — dieselbe Kurve, mit der public/capacity.js die Zahlen
   hochzählt. Balken und Ziffern kämen sonst nebeneinander her, aber nicht
   miteinander. */
.capacity--laeuft .capacity__fill {
  transition: width 1.4s cubic-bezier(0.33, 1, 0.68, 1);
}

.capacity__legend {
  display: flex;
  justify-content: space-between;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.capacity__taken {
  color: var(--pink-schrift);
}

.capacity__free {
  color: rgb(13 43 28 / 25%);
}

/* Balkenbreite in 5-Prozent-Schritten als Klasse.
   Kein style-Attribut (CLAUDE.md), und die Breite muss ohne JavaScript
   stimmen — deshalb diese Staffel statt einer CSS-Variablen. */
.capacity__fill--0 { width: 0; }
.capacity__fill--5 { width: 5%; }
.capacity__fill--10 { width: 10%; }
.capacity__fill--15 { width: 15%; }
.capacity__fill--20 { width: 20%; }
.capacity__fill--25 { width: 25%; }
.capacity__fill--30 { width: 30%; }
.capacity__fill--35 { width: 35%; }
.capacity__fill--40 { width: 40%; }
.capacity__fill--45 { width: 45%; }
.capacity__fill--50 { width: 50%; }
.capacity__fill--55 { width: 55%; }
.capacity__fill--60 { width: 60%; }
.capacity__fill--65 { width: 65%; }
.capacity__fill--70 { width: 70%; }
.capacity__fill--75 { width: 75%; }
.capacity__fill--80 { width: 80%; }
.capacity__fill--85 { width: 85%; }
.capacity__fill--90 { width: 90%; }
.capacity__fill--95 { width: 95%; }
.capacity__fill--100 { width: 100%; }

/* --- Abbruchseite --------------------------------------------------------- */

/* Die Regeln der Dankeseite stehen in public/danke.css. Was hier stand
   (`.thanks`, `.error-page`), hatte im Markup seit der Umstellung auf `.page`
   und `.notice` keinen Träger mehr — und `.thanks` hätte sich mit den neuen
   `.thanks__*`-Klassen der Dankeseite geschnitten. */

.thanks__reference strong {
  font-variant-numeric: tabular-nums;
}

/* --- Ab Tablet ----------------------------------------------------------- */

@media (min-width: 48rem) {
  /* Der Innenabstand der Karte steht schon in booking.css und stimmt auf JEDER
     Breite: 20 Pixel bis zum Inhalt, den 2-Pixel-Rahmen des Körpers
     eingerechnet. Eine Wiederholung hier hatte den Rahmen NICHT eingerechnet
     und machte den Inhalt ab Tablet 536 statt 540 Pixel breit. */

  .site-footer__logo {
    flex: 1 1 auto;
  }
}

/* --- Bewegung reduzieren -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ── Mailansicht der Attrappe (/dev/mails) ──────────────────────────────────
   Nur lokal sichtbar: die Route wird im Produktivbuild nicht registriert. Die
   Regeln stehen trotzdem hier und nicht inline — CLAUDE.md kennt für Styles
   keine Ausnahme „ist ja nur die Entwicklungsansicht". */

.mailview {
  width: 100%;
  min-height: 20rem;
  border: 1px solid var(--grau-rahmen);
  border-radius: var(--radius-feld);
  background: var(--weiss);
}

.mailsource {
  overflow-x: auto;
  padding: 1rem;
  border-radius: var(--radius-feld);
  background: var(--gruen-hell);
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}