/* =============================================================================
   PHYSIOPARK MG · PP Shop · Frontend-CSS
   Datei:   ppw-shop.css      Version: 0.1.0
   System:  gebrückt auf ppw-base.css (globale --ppw-* Tokens, Hardcode-
            Fallbacks eingebaut, selbe Brücke wie ppw-termine.css).
            Scope: alles unter .ppshop-wrap gekapselt.
   Laden:   auf allen Frontend-Seiten (Elementor-Lektion aus pp-absage).
   WCAG:    Fokus-Ringe sichtbar, Kontraste AA (petrol #0f5c63 auf weiss
            7.0:1, ink #0c2731 auf weiss 14.7:1, muted #3a5258 auf weiss
            7.5:1), reduced-motion berücksichtigt, mobile-first.
   Kein Pop-up-Charakter: ruhige Premium-Optik, keine Animationen, die
   drängen (GF-Vorgabe).

   CHANGELOG (neueste zuerst · historische Einträge NIE umschreiben)
   --------------------------------------------------------------------------
   0.4.0 · 2026-07-26
     - Phase 3: Rehasport-Karten (.ppshop-karte--rehasport,
       Kontingent-Zeile .ppshop-karte-kontingent, Karten-Formular).
   0.3.0 · 2026-07-26
     - Phase 2: Kategorie-Filter-Chips (.ppshop-chip-btn), Supplement-
       Karten (Made-in-Germany-Badge, Verfuegbarkeits-Anzeige, Menge-
       Select), Direktkauf-Formular (Abholung/Versand-Umschaltung).
   0.1.0 · 2026-07-26
     - Initiale Version: Hero, Produktkarten, Konfigurator (Schritte,
       Radio-Karten, Chips, Design-Swatches, Restzeichen), Live-Vorschau
       (Desktop parallel, mobil per Aufklapp), Statusansicht (Erfolg/
       Hinweis/Fehler), Fortschrittsbalken, Rechtstext-Details.
   ========================================================================== */

.ppshop-wrap{
  --ppshop-font: var(--ppw-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
  --ppshop-surface: var(--ppw-surface, #ffffff);
  --ppshop-surface-soft: var(--ppw-bg-alt, #f6fafa);
  --ppshop-brand: var(--ppw-brand, #0f5c63);
  --ppshop-brand-deep: var(--ppw-brand-deep, #0a464c);
  --ppshop-brand-hover: var(--ppw-brand-hover, #0b494f);
  --ppshop-brand-soft: var(--ppw-brand-soft, #e3eff0);
  --ppshop-border: var(--ppw-border, #d4e1e3);
  --ppshop-shadow: var(--ppw-shadow-md, 0 14px 32px rgba(7, 24, 28, 0.10));
  --ppshop-shadow-sm: var(--ppw-shadow-sm, 0 4px 12px rgba(7, 24, 28, 0.06));
  --ppshop-ink: #0c2731;
  --ppshop-muted: #3a5258;
  --ppshop-radius: 16px;

  font-family: var(--ppshop-font);
  color: var(--ppshop-ink);
  max-width: 1080px;
  margin: 0 auto;
  line-height: 1.55;
}
.ppshop-wrap *, .ppshop-wrap *::before, .ppshop-wrap *::after{ box-sizing: border-box; }

/* ---- Hero ---- */
.ppshop-hero{ margin: 0 0 26px; }
.ppshop-title{ font-size: clamp(26px, 4vw, 34px); font-weight: 700; margin: 0 0 8px; color: var(--ppshop-ink); }
.ppshop-lead{ color: var(--ppshop-muted); font-size: 17px; max-width: 60ch; margin: 0; }

/* ---- Meldungen ---- */
.ppshop-fehler, .ppshop-hinweis{ border-radius: 12px; padding: 14px 18px; margin: 0 0 20px; }
.ppshop-fehler{ background: #fdf0ef; border: 1px solid #eec5c0; color: #7a241c; }
.ppshop-hinweis{ background: var(--ppshop-surface-soft); border: 1px solid var(--ppshop-border); color: var(--ppshop-muted); }

/* ---- Produktkarten ---- */
.ppshop-karten{ display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0 0 28px; }
@media (min-width: 640px){ .ppshop-karten{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px){ .ppshop-karten{ grid-template-columns: repeat(4, 1fr); } }
.ppshop-karte{ background: var(--ppshop-surface); border: 1px solid var(--ppshop-border); border-radius: var(--ppshop-radius); padding: 20px; box-shadow: var(--ppshop-shadow-sm); display: flex; flex-direction: column; gap: 8px; }
.ppshop-karte-typ{ font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ppshop-muted); }
.ppshop-karte-name{ font-size: 18px; font-weight: 700; margin: 0; }
.ppshop-karte-kurz{ color: var(--ppshop-muted); font-size: 14px; margin: 0; flex: 1; }
.ppshop-karte-preis{ font-size: 20px; font-weight: 700; color: var(--ppshop-brand); }

/* ---- Buttons ---- */
.ppshop-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; padding: 12px 20px; font-size: 15px; font-weight: 600; cursor: pointer; border: 1px solid transparent; text-decoration: none; transition: background .15s ease, border-color .15s ease; }
.ppshop-btn--primary{ background: var(--ppshop-brand); color: #fff; }
.ppshop-btn--primary:hover{ background: var(--ppshop-brand-hover); }
.ppshop-btn--ghost{ background: transparent; color: var(--ppshop-brand); border-color: var(--ppshop-border); }
.ppshop-btn--ghost:hover{ border-color: var(--ppshop-brand); }
.ppshop-btn:focus-visible, .ppshop-chip input:focus-visible + span, .ppshop-design-swatch input:focus-visible ~ .ppshop-swatch, .ppshop-radio-karte input:focus-visible ~ .ppshop-radio-titel{ outline: 3px solid var(--ppshop-brand-deep); outline-offset: 2px; }

/* ---- Formular / Schritte ---- */
.ppshop-form{ background: var(--ppshop-surface); border: 1px solid var(--ppshop-border); border-radius: var(--ppshop-radius); box-shadow: var(--ppshop-shadow); padding: 22px; margin: 0 0 26px; }
.ppshop-hp{ position: absolute; left: -9999px; top: -9999px; height: 1px; width: 1px; overflow: hidden; }
.ppshop-progress{ height: 8px; border-radius: 99px; background: var(--ppshop-surface-soft); border: 1px solid var(--ppshop-border); overflow: hidden; margin: 0 0 6px; }
.ppshop-progress-fill{ height: 100%; width: 0; background: linear-gradient(90deg, var(--ppshop-brand), var(--ppshop-brand-deep)); border-radius: 99px; transition: width .25s ease; }
.ppshop-meta{ display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ppshop-muted); margin: 0 0 18px; }
.ppshop-layout{ display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 960px){ .ppshop-layout{ grid-template-columns: 1.6fr 1fr; align-items: start; } }
.ppshop-step{ border-top: 1px solid var(--ppshop-border); padding: 20px 0 6px; }
.ppshop-step:first-of-type{ border-top: 0; padding-top: 0; }
.ppshop-step-title{ font-size: 19px; font-weight: 700; margin: 0 0 14px; }
.ppshop-sub-title{ font-size: 15px; font-weight: 700; margin: 18px 0 10px; }
.ppshop-step-hint{ color: var(--ppshop-muted); font-size: 13.5px; margin: 0 0 12px; }
.ppshop-step[hidden]{ display: none; }

/* ---- Radio-Karten (Produktwahl) ---- */
.ppshop-produkt-wahl{ display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px){ .ppshop-produkt-wahl{ grid-template-columns: repeat(2, 1fr); } }
.ppshop-radio-karte{ display: flex; flex-direction: column; gap: 4px; border: 1.5px solid var(--ppshop-border); border-radius: 14px; padding: 14px 16px; cursor: pointer; background: var(--ppshop-surface); transition: border-color .15s ease, background .15s ease; }
.ppshop-radio-karte:hover{ border-color: var(--ppshop-brand); }
.ppshop-radio-karte input{ position: absolute; opacity: 0; pointer-events: none; }
.ppshop-radio-karte:has(input:checked){ border-color: var(--ppshop-brand); background: var(--ppshop-brand-soft); }
.ppshop-radio-titel{ font-weight: 700; font-size: 15px; }
.ppshop-radio-preis{ color: var(--ppshop-brand); font-weight: 700; }

/* ---- Chips (Betrag, Anlass, Standort) ---- */
.ppshop-chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.ppshop-chip input{ position: absolute; opacity: 0; pointer-events: none; }
.ppshop-chip span{ display: inline-block; border: 1.5px solid var(--ppshop-border); border-radius: 99px; padding: 8px 16px; font-weight: 600; font-size: 14px; cursor: pointer; background: var(--ppshop-surface); transition: border-color .15s ease, background .15s ease; }
.ppshop-chip:hover span{ border-color: var(--ppshop-brand); }
.ppshop-chip:has(input:checked) span{ background: var(--ppshop-brand); border-color: var(--ppshop-brand); color: #fff; }

/* ---- Design-Swatches ---- */
.ppshop-designs{ display: flex; flex-wrap: wrap; gap: 12px; }
.ppshop-design-swatch{ display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.ppshop-design-swatch input{ position: absolute; opacity: 0; pointer-events: none; }
.ppshop-swatch{ width: 64px; height: 44px; border-radius: 10px; border: 2px solid var(--ppshop-border); background: var(--ppshop-brand); transition: border-color .15s ease, transform .15s ease; }
.ppshop-design-swatch--klassisch .ppshop-swatch{ background: linear-gradient(135deg, #0f5c63, #0a464c); }
.ppshop-design-swatch--petrol .ppshop-swatch{ background: linear-gradient(135deg, #0b494f, #123a3f); }
.ppshop-design-swatch--bluete .ppshop-swatch{ background: linear-gradient(135deg, #7a4a63, #a86f8d); }
.ppshop-design-swatch--nacht .ppshop-swatch{ background: linear-gradient(135deg, #21364f, #0f1e30); }
.ppshop-design-swatch:has(input:checked) .ppshop-swatch{ border-color: var(--ppshop-brand-deep); transform: scale(1.05); }
.ppshop-design-name{ font-size: 12.5px; color: var(--ppshop-muted); }

/* ---- Felder ---- */
.ppshop-feld{ margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; }
.ppshop-feld label{ font-weight: 600; font-size: 14px; }
.ppshop-feld input, .ppshop-feld textarea{ border: 1.5px solid var(--ppshop-border); border-radius: 10px; padding: 10px 12px; font-size: 15px; font-family: inherit; background: var(--ppshop-surface); color: var(--ppshop-ink); max-width: 460px; }
.ppshop-feld input:focus, .ppshop-feld textarea:focus{ outline: 3px solid var(--ppshop-brand-soft); border-color: var(--ppshop-brand); }
.ppshop-feld input::placeholder, .ppshop-feld textarea::placeholder{ color: #6b848b; }
.ppshop-grid{ display: grid; grid-template-columns: 1fr; gap: 0 18px; }
@media (min-width: 640px){ .ppshop-grid{ grid-template-columns: repeat(2, 1fr); } }
.ppshop-check{ display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; font-size: 14px; color: var(--ppshop-muted); cursor: pointer; }
.ppshop-check input{ margin-top: 3px; }
.ppshop-zeichen{ font-size: 12.5px; color: var(--ppshop-muted); }
.ppshop-absenden{ margin-top: 16px; }

/* ---- Wizard-Navigation ---- */
.ppshop-nav{ display: flex; justify-content: space-between; margin-top: 18px; gap: 12px; }
.ppshop-nav[hidden]{ display: none; }

/* ---- Live-Vorschau ---- */
.ppshop-vorschau-spalte{ min-width: 0; }
.ppshop-vorschau-aufklapp > summary{ cursor: pointer; font-weight: 700; font-size: 15px; color: var(--ppshop-brand-deep); padding: 8px 0; list-style: none; }
.ppshop-vorschau-aufklapp > summary::before{ content: "+"; display: inline-block; margin-right: 8px; font-weight: 700; transition: transform .15s ease; }
.ppshop-vorschau-aufklapp[open] > summary::before{ transform: rotate(45deg); }
.ppshop-vorschau-aufklapp > summary:focus-visible{ outline: 3px solid var(--ppshop-brand-deep); outline-offset: 2px; }
.ppshop-vorschau{ position: sticky; top: 16px; border-radius: 18px; padding: 22px; color: #fff; background: linear-gradient(135deg, #0f5c63, #0a464c); box-shadow: var(--ppshop-shadow); min-height: 200px; display: flex; flex-direction: column; gap: 6px; }
.ppshop-vorschau--petrol{ background: linear-gradient(135deg, #0b494f, #123a3f); }
.ppshop-vorschau--bluete{ background: linear-gradient(135deg, #7a4a63, #a86f8d); }
.ppshop-vorschau--nacht{ background: linear-gradient(135deg, #21364f, #0f1e30); }
.ppshop-vorschau-brand{ font-size: 13px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.ppshop-vorschau-anlass{ font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.ppshop-vorschau-name{ font-size: 19px; font-weight: 700; margin-top: 4px; }
.ppshop-vorschau-wert{ font-size: 26px; font-weight: 700; }
.ppshop-vorschau-empfaenger{ font-size: 14px; opacity: .95; }
.ppshop-vorschau-nachricht{ font-size: 13.5px; font-style: italic; opacity: .9; max-width: 40ch; }
.ppshop-vorschau-fuss{ margin-top: auto; padding-top: 12px; font-size: 11.5px; opacity: .8; border-top: 1px solid rgba(255,255,255,.25); }

/* ---- Statusansicht ---- */
.ppshop-erfolg{ background: var(--ppshop-surface); border: 1px solid var(--ppshop-border); border-radius: var(--ppshop-radius); box-shadow: var(--ppshop-shadow); padding: 28px; text-align: center; }
.ppshop-erfolg-icon{ width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: var(--ppshop-brand); color: #fff; font-size: 30px; line-height: 56px; font-weight: 700; }
.ppshop-erfolg-gutschein{ border: 2px solid var(--ppshop-brand); border-radius: 14px; padding: 16px; margin: 16px auto 0; max-width: 420px; display: flex; flex-direction: column; gap: 8px; }
.ppshop-erfolg-code{ font-size: 22px; font-weight: 700; letter-spacing: .06em; color: var(--ppshop-brand); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ---- Rechtstexte ---- */
.ppshop-recht details{ border: 1px solid var(--ppshop-border); border-radius: 12px; padding: 12px 16px; margin: 0 0 10px; background: var(--ppshop-surface); }
.ppshop-recht summary{ cursor: pointer; font-weight: 600; color: var(--ppshop-brand-deep); }
.ppshop-recht summary:focus-visible{ outline: 3px solid var(--ppshop-brand-deep); outline-offset: 2px; }
.ppshop-recht p{ color: var(--ppshop-muted); font-size: 13.5px; margin: 10px 0 4px; white-space: pre-wrap; }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .ppshop-wrap *, .ppshop-wrap *::before, .ppshop-wrap *::after{ animation: none !important; transition: none !important; }
}

/* =============================================================================
   Phase 2 (0.3.0): Kategorie-Filter, Supplement-Karten, Direktkauf
   ========================================================================== */

/* ---- Filter-Chips (Buttons, tastaturbedienbar) ---- */
.ppshop-filter{ margin: 0 0 22px; }
.ppshop-chip-btn{ border: 1.5px solid var(--ppshop-border); border-radius: 99px; padding: 8px 16px; font-weight: 600; font-size: 14px; cursor: pointer; background: var(--ppshop-surface); color: var(--ppshop-ink); font-family: inherit; transition: border-color .15s ease, background .15s ease; }
.ppshop-chip-btn:hover{ border-color: var(--ppshop-brand); }
.ppshop-chip-btn.is-aktiv{ background: var(--ppshop-brand); border-color: var(--ppshop-brand); color: #fff; }
.ppshop-chip-btn:focus-visible{ outline: 3px solid var(--ppshop-brand-deep); outline-offset: 2px; }
.ppshop-sektion{ font-size: 21px; font-weight: 700; margin: 26px 0 14px; color: var(--ppshop-ink); }
[data-kat].is-ausgeblendet{ display: none; }

/* ---- Supplement-Karte ---- */
.ppshop-karte--supplement{ position: relative; }
.ppshop-badge{ position: absolute; top: 14px; right: 14px; background: var(--ppshop-brand-soft); color: var(--ppshop-brand-deep); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 99px; padding: 4px 10px; }
.ppshop-mwst{ font-size: 12px; font-weight: 400; color: var(--ppshop-muted); }
.ppshop-vorraetig{ font-size: 12.5px; color: var(--ppshop-brand); font-weight: 600; }
.ppshop-nicht-vorraetig{ background: var(--ppshop-surface-soft); border: 1px dashed var(--ppshop-border); border-radius: 10px; padding: 10px 12px; color: var(--ppshop-muted); font-size: 13.5px; text-align: center; }
.ppshop-karte-kauf{ display: flex; gap: 10px; align-items: flex-end; }
.ppshop-menge{ font-size: 12.5px; font-weight: 600; color: var(--ppshop-muted); display: flex; flex-direction: column; gap: 4px; }
.ppshop-menge-select{ border: 1.5px solid var(--ppshop-border); border-radius: 8px; padding: 8px 10px; font-family: inherit; font-size: 14px; background: var(--ppshop-surface); color: var(--ppshop-ink); }
.ppshop-menge-select:focus{ outline: 3px solid var(--ppshop-brand-soft); border-color: var(--ppshop-brand); }
.ppshop-karte-kauf .ppshop-btn{ flex: 1; }

/* ---- Direktkauf-Formular ---- */
.ppshop-supp-form{ margin-top: 22px; }
.ppshop-supp-form .ppshop-chips{ margin: 0 0 14px; }
.ppshop-abholung-wahl{ margin: 0 0 6px; }
.ppshop-abholung-wahl[hidden], .ppshop-versand-adresse[hidden]{ display: none; }

/* ---- Rehasport-Karte (Phase 3) ---- */
.ppshop-karte-kontingent{ font-size: 14px; color: var(--ppshop-brand); margin: 0 0 8px; }
.ppshop-karte-form{ margin-top: 22px; }
.ppshop-karte-form .ppshop-chips{ margin: 0 0 14px; }