/* ============================================================
   Aktionsseiten (/aktionen, /aktion/{keyword}) — Ergänzungen zu
   ph-brand.css. Nur, was die phb-Bausteine nicht schon haben:
   Rabatt-/Ausverkauft-Flag, Bestand + Enddatum, Leerzustand und das
   Bestellformular für Webhosting-Aktionen im order-modal.
   Alle Farben aus den --ph-*/--phb-*-Tokens → hell und dunkel.
   ============================================================ */

/* Flag-Varianten: Rabatt (grün) und ausverkauft (neutral). */
.phb-flag--deal { background: var(--ph-success-tint); color: var(--ph-success-ink); }
.phb-flag--muted { background: var(--phb-surface-2); color: var(--phb-muted); }

/* Name neben dem Flag nicht darunter laufen lassen. */
.phb-deal .phb-card__title:has(.phb-flag) { padding-right: 6rem; }

/* Durchgestrichener Normalpreis + Zusatzzeilen unter dem Preis. */
.phb-deal__was { margin: 0.25rem 0 0; color: var(--phb-muted); font-size: 0.86rem; font-feature-settings: "tnum"; }
.phb-deal__was s { color: var(--phb-muted); }
.phb-deal__sub { margin: 0.3rem 0 0; color: var(--phb-muted); font-size: 0.86rem; }

/* Bestand + Enddatum: zwei ruhige Zeilen, Bestand mit Punkt. */
.phb-deal__meta { display: grid; gap: 0.3rem; margin: 0.95rem 0 0; padding: 0; list-style: none; font-size: 0.86rem; color: var(--phb-muted); font-feature-settings: "tnum"; }
.phb-deal__meta li { display: flex; align-items: center; gap: 0.5rem; }
.phb-deal__meta i { width: 0.9rem; text-align: center; color: var(--phb-primary); font-size: 0.8rem; }

.phb-deal__ends--soon { color: var(--phb-navy); font-weight: 600; }

/* Ausverkauft: Inhalt zurücknehmen, Karte bleibt lesbar. */
.phb-deal--soldout .phb-price__num { color: var(--phb-muted); }
.phb-deal .phb-btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* Leerzustand — eine zentrierte Karte, keine Illustration. */
.phb-empty { max-width: 640px; margin: 0 auto; text-align: center; background: var(--phb-surface); border: 1px dashed var(--phb-border); border-radius: var(--phb-radius); padding: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 4vw, 2.5rem); }
.phb-empty__ic { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 999px; background: var(--phb-primary-lt); color: var(--phb-primary-d); font-size: 1.25rem; margin-bottom: 1rem; }
.phb-empty__title { color: var(--phb-navy); font-weight: 600; font-size: 1.3rem; margin: 0 0 0.5rem; }
.phb-empty p { color: var(--phb-muted); line-height: 1.6; margin: 0 auto; max-width: 52ch; }
.phb-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 1.5rem; }

/* Hinweise oberhalb des Rasters (Aktion beendet, Admin-Vorschau). */
.phb-deal-alert { margin-bottom: 1.6rem; }
.phb-subhead .phb-deal-alert { margin: 0 0 1rem; }

/* Webhosting-Bestellformular im order-modal. */
.phb-form { display: grid; gap: 1rem; }
.phb-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
.phb-form__row--domain { grid-template-columns: minmax(0, 1fr) 6.5rem; }
.phb-form__field { display: grid; gap: 0.35rem; min-width: 0; }
.phb-form__field label, .phb-form__legend { color: var(--phb-navy); font-weight: 600; font-size: 0.86rem; margin: 0; }
.phb-form__legend { display: block; font-size: 0.92rem; padding: 0; }
.phb-form__hint { margin: 0; color: var(--phb-muted); font-size: 0.82rem; line-height: 1.5; }
.phb-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 0.85rem; }
.phb-form input, .phb-form select {
    width: 100%; min-height: 44px; padding: 0.6rem 0.75rem; font: inherit; font-size: 0.95rem;
    color: var(--phb-text); background: var(--phb-surface); border: 1px solid var(--phb-border); border-radius: var(--phb-radius-sm);
}
.phb-form input:focus, .phb-form select:focus { outline: none; border-color: var(--phb-primary); box-shadow: 0 0 0 3px var(--phb-primary-lt); }
.phb-form input[aria-invalid="true"], .phb-form select[aria-invalid="true"] { border-color: var(--ph-danger, #dc2626); }
.phb-form__legal { margin: 0; color: var(--phb-muted); font-size: 0.8rem; line-height: 1.55; }
.phb-form__legal a { color: var(--phb-primary-d); }
.order-modal-content--wide { max-width: 640px; }
@media (max-width: 480px) {
    .phb-form__row { grid-template-columns: 1fr; }
    .phb-form__row--domain { grid-template-columns: minmax(0, 1fr) 5.5rem; }
}