/* Parken – Status und Knöpfe in der Parken-Kachel (lazy mit parking.js). Nur Tokens aus styles.css. */
.pk-slot { display: grid; gap: 6px; min-width: 0; }
.pk-slot[hidden] { display: none; }
.pk-line { margin: 0; font-weight: 600; color: var(--text); text-wrap: pretty; }
.pk-line.pk-ok { color: var(--erfolg); }
.pk-line.pk-warn { color: var(--warn); }
.pk-sub { margin: 0; font-size: 14px; line-height: 1.4; color: var(--text-2); text-wrap: pretty; }
.pk-error { margin: 0; font-size: 14px; color: var(--fehler); }
.pk-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--r1); margin-top: 2px; }
.pk-btn { min-height: 44px; padding: 0 12px; font-size: 14px; border-radius: var(--rund-klein); white-space: normal; text-align: center; }
.tile.is-declined { background: var(--flaeche); box-shadow: none; }
.tile.is-declined .tile-head, .tile.is-declined .tile-body > :not(.pk-slot) { opacity: 0.55; }
.tile.is-declined .tile-head .icon { color: var(--muted); }

/* Bezahlen im Portal (parking-pay.js): mobil Sheet über die volle Höhe, ab 640 px mittig. Stripe zeichnet im
   eigenen iframe (hell nach Stripe-Branding); das Sheet rahmt nur, Status/Fehler stehen darüber. */
.pk-pay {
  margin: auto 0 0; width: 100%; max-width: 100%; max-height: 100dvh; padding: 0; border: 0;
  border-radius: var(--rund-gross) var(--rund-gross) 0 0; background: var(--karte); color: var(--text);
  box-shadow: var(--schatten-hoch); overflow: auto; overscroll-behavior: contain;
}
.pk-pay[open] { animation: sheet-up var(--zeit-lang) var(--kurve) both; }
.pk-pay::backdrop { background: var(--sheet-backdrop); }
.pk-pay-panel { display: grid; gap: 12px; padding: 0 var(--r2) calc(var(--r2) + env(safe-area-inset-bottom, 0px)); }
.pk-pay-head {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--r1); padding: 12px 0 8px; background: var(--karte); border-bottom: 1px solid var(--line);
}
.pk-pay-heading { min-width: 0; padding-top: 8px; }
.pk-pay-title { margin: 0; font-size: 18px; line-height: 1.3; text-wrap: balance; }
.pk-pay-summary { margin: 2px 0 0; font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pk-pay-close { flex: none; }
.pk-pay-status { display: grid; gap: var(--r1); }
.pk-pay-status:empty { display: none; }
.pk-pay-msg { margin: 0; font-size: 15px; color: var(--text-2); text-wrap: pretty; }
.pk-pay-status.is-error .pk-pay-msg { color: var(--fehler); }
.pk-pay-retry { justify-self: start; min-height: 44px; }
.pk-pay-frame { min-width: 0; }
.pk-pay-frame.is-loading { min-height: 320px; border-radius: var(--rund); background: var(--sk); }
.pk-pay-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
@media (min-width: 640px) {
  .pk-pay {
    margin: auto; width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px);
    border: 1px solid var(--line); border-radius: var(--rund-gross);
  }
  .pk-pay-panel { padding: 0 var(--r3) var(--r3); }
}
.pk-pay-note a { color: var(--accent); text-underline-offset: 2px; }