/* ── Pick & Grow Selbsttest – Stylesheet ──────────────────────────────────────────
   Eingebunden via WordPress wp_enqueue_style().
   Alle Klassen tragen das Präfix "pgq-" um Konflikte mit dem Theme zu vermeiden.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --pgq-bg:          #F0EBE5;
  --pgq-white:       #FFFFFF;
  --pgq-accent:      #1F2127;
  --pgq-accent-h:    #15161A;
  --pgq-text:        #1E1610;
  --pgq-text-mid:    #5A4A3A;
  --pgq-text-soft:   #9A8A7A;
  --pgq-border:      #E0D5CC;
  --pgq-teal:        #049480;
  --pgq-shadow:      0 2px 20px rgba(0,0,0,0.07);
  --pgq-radius:      12px;
}

/* ── Wrap ─────────────────────────────────────────────────────────────────── */
.pg-selbsttest-wrap {
  /* Theme-Anbindung (riverbank / FSE): nutzt die Theme-Palette,
     fällt sonst auf die Defaults im :root-Block oben zurück.
     Slugs ggf. anpassen – prüfen mit:
     document.getElementById('global-styles-inline-css').textContent */
  --pgq-bg:        var(--wp--preset--color--ti-bg, #F0EBE5);
  --pgq-white:     var(--wp--preset--color--ti-fg-alt, #fff);  /* Box-Flaeche: Weiss */
  --pgq-text:      var(--wp--preset--color--ti-fg, #1E1610);
  --pgq-text-mid:  color-mix(in srgb, var(--pgq-text) 72%, transparent);
  --pgq-text-soft: color-mix(in srgb, var(--pgq-text) 45%, transparent);
  --pgq-accent:    var(--wp--preset--color--ti-fg, #1F2127); /* eigenen Akzent-Slug eintragen, falls vorhanden */
  --pgq-accent-h:  color-mix(in srgb, var(--pgq-accent) 82%, #000);
  --pgq-border:    color-mix(in srgb, var(--pgq-text) 20%, transparent);
  --pgq-radius:    0px;   /* riverbank ist eckig */
  --pgq-shadow:    none;  /* riverbank: 2px-Rahmen statt Schatten */

  /* Full-Bleed: Box auf volle Viewport-Breite aufziehen (bricht aus jeder
     Theme-Spalte aus), im Viewport zentrieren, Inhalt per Padding auf max. 880px
     zurückholen.
       - width/left/transform mit !important bzw. vw-Einheiten, damit weder eine
         Block-Breite noch WordPress' "eingeschränktes" Layout (max-width +
         margin:auto !important auf die Kinder) dazwischenfunkt. margin bleibt
         unberührt – left/transform braucht es nicht.
       - left:50% trifft immer die Viewport-Mitte, SOLANGE der Theme-Inhaltsbereich
         selbst mittig zentriert ist (riverbank-Standard). translateX(-50vw) zieht
         die linke Kante exakt an den Viewport-Rand.
     Falls die Box trotzdem beschnitten/verschoben wirkt: ein Vorfahr-Element hat
     overflow:hidden/clip auf der 740er-Spalte -> dann den Shortcode-Block im
     Editor auf Ausrichtung "Vollbild" (alignfull) stellen. */
  box-sizing: border-box;
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative;
  left: 50%;
  transform: translateX(-50vw);
  padding: 32px max(16px, calc(50vw - 440px)) 48px;
  font-family: inherit;
  color: var(--pgq-text);
  line-height: 1.6;
}

/* ── Karte ────────────────────────────────────────────────────────────────── */
.pgq-card {
  max-width: 720px;   /* Fragen-/Intro-Box schmaler als der 880er-Wrap – bessere Lesbarkeit der Antworttexte */
  margin: 0 auto;
  background: var(--pgq-white);
  border: 2px solid var(--pgq-border);
  border-radius: var(--pgq-radius);
  box-shadow: var(--pgq-shadow);
  overflow: hidden;
}

/* ── Intro ────────────────────────────────────────────────────────────────── */
.pgq-intro { padding: 40px 32px; text-align: center; }
.pgq-intro-tip {
  font-size: 18px;
  color: var(--pgq-text-mid);
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto 28px;
}
.pgq-btn-start.wp-element-button {
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: var(--pgq-radius);
  border: none;
  background: var(--pgq-teal);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}
.pgq-btn-start.wp-element-button:hover { background: color-mix(in srgb, var(--pgq-teal) 85%, #000); }
.pgq-intro.hidden,
.pgq-progress-bar.hidden,
.pgq-nav.hidden { display: none; }

/* ── Fortschrittsbalken ───────────────────────────────────────────────────── */
.pgq-progress-bar { height: 6px; background: var(--pgq-bg); }
.pgq-progress-fill {
  height: 100%;
  background: var(--pgq-teal);
  transition: width 0.35s ease;
}

/* ── Frage-Screen ─────────────────────────────────────────────────────────── */
.pgq-screen { display: none; padding: 32px 32px 20px; }
.pgq-screen.active { display: block; }

.pgq-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font-size: 16px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pgq-teal);
  margin-bottom: 14px;
}
.pgq-meta .pgq-topic::before {
  content: "·";
  margin: 0 0.5em;
  opacity: 0.55;
}
.pgq-question {
  font-size: 20px;
  font-weight: 600;
  color: var(--pgq-text);
  margin-bottom: 20px;
  line-height: 1.4;
}

/* ── Antwort-Optionen ─────────────────────────────────────────────────────── */
.pgq-options { display: flex; flex-direction: column; gap: 8px; }

.pgq-opt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 16px;
  background: #F4F0E7;  /* eingelassen: Ton unter der weissen Karte */
  border: 2px solid var(--pgq-border);
  border-radius: var(--pgq-radius);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.pgq-opt:hover {
  border-color: var(--pgq-teal);
  background: color-mix(in srgb, var(--pgq-teal) 6%, #fff);
}
.pgq-opt.selected {
  border-color: var(--pgq-teal);
  background: color-mix(in srgb, var(--pgq-teal) 12%, #fff);
}

.pgq-opt-dot {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--pgq-border);
  margin-top: 2px;
  transition: border-color 0.15s, background 0.15s;
}
.pgq-opt.selected .pgq-opt-dot {
  border-color: var(--pgq-teal);
  background: var(--pgq-teal);
}

.pgq-opt-text { font-size: 18px; color: var(--pgq-text-mid); line-height: 1.5; }
.pgq-opt.selected .pgq-opt-text { color: var(--pgq-text); }

/* ── Navigation ───────────────────────────────────────────────────────────── */
.pgq-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 32px 20px;
  border-top: 1px solid var(--pgq-border);
  gap: 10px;
}
.pgq-btn-back.wp-element-button,
.pgq-btn-next.wp-element-button {
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: var(--pgq-radius);
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  border: none;
}
.pgq-btn-back.wp-element-button {
  background: transparent;
  border: 2px solid var(--pgq-border);
  color: var(--pgq-text-soft);
}
.pgq-btn-back.wp-element-button:hover:not(:disabled) { background: #F5EEE8; }
.pgq-btn-next.wp-element-button {
  background: var(--pgq-teal);
  color: #fff;
  margin-left: auto;
}
.pgq-btn-next.wp-element-button:hover:not(:disabled) { background: color-mix(in srgb, var(--pgq-teal) 85%, #000); }
.pgq-btn-back.wp-element-button:disabled,
.pgq-btn-next.wp-element-button:disabled { opacity: 0.4; cursor: default; }

/* ── Ladeanzeige ──────────────────────────────────────────────────────────── */
.pgq-loading {
  padding: 32px;
  text-align: center;
  color: var(--pgq-text-soft);
  font-size: 17px;
}
.pgq-loading.hidden,
.pgq-result.hidden { display: none; }

/* ── Ergebnis ─────────────────────────────────────────────────────────────── */
.pgq-result {
  margin-top: 24px;
  background: var(--pgq-white);
  border: 2px solid var(--pgq-border);
  border-radius: var(--pgq-radius);
  box-shadow: var(--pgq-shadow);
  overflow: hidden;
}

.pgq-result-header {
  background: var(--pgq-teal);
  color: #fff;
  padding: 32px 32px 20px;
}
.pgq-result-eyebrow {
  font-size: 16px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.75;
  margin-bottom: 6px;
}
.pgq-result-score {
  font-size: 15px;
  font-weight: 600;
  opacity: 0.85;
  margin-bottom: 8px;
}
.pgq-result-name {
  font-family: inherit;
  font-size: 34px;
  font-weight: 400;
  margin-bottom: 10px;
  line-height: 1.2;
}
.pgq-result-tagline {
  font-size: 20px;
  opacity: 0.85;
  line-height: 1.55;
}
.pgq-alt-detaillink {
  display: inline-block;
  margin-top: 8px;
  font-size: 17px;
  color: var(--pgq-teal);
  text-decoration: underline;
}

.pgq-result-body { padding: 20px 32px 24px; }

.pgq-result-note {
  font-size: 16px;
  font-style: italic;
  color: var(--pgq-text-soft);
  line-height: 1.55;
  margin-bottom: 20px;
}

.pgq-result-profile {
  font-size: 19px;
  color: var(--pgq-text-mid);
  line-height: 1.75;
  margin-bottom: 16px;
}
.pgq-result-variant {
  font-size: 16px;
  color: var(--pgq-text-soft);
  margin-bottom: 24px;
}
.pgq-result-variant strong { color: var(--pgq-text-mid); }

/* ── Karten-Vorschau ──────────────────────────────────────────────────────── */
.pgq-sep {
  border: 0;
  border-top: 1px solid var(--pgq-border);
  margin: 26px 0 20px;
}
.pgq-cards-intro {
  font-size: 19px;
  color: var(--pgq-text-mid);
  line-height: 1.75;
  margin-bottom: 18px;
}
.pgq-cards-heading {
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pgq-teal);
  margin-bottom: 12px;
}

/* ── Kartenbilder (dynamisch je Karte) ────────────────────────────────────── */
.pgq-cards-imgrow {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  justify-content: center;
}
.pgq-cards-imgrow[hidden] { display: none; }
.pgq-card-img {
  flex: 0 0 auto;
  width: 340px;
  max-width: 100%;
  height: auto;
  display: block;
}
.pgq-cards-missing {
  font-size: 16px;
  color: var(--pgq-text-mid);
  line-height: 1.6;
  padding: 14px 16px;
  margin-bottom: 24px;
  border: 1px solid var(--pgq-border);
  border-radius: var(--pgq-radius);
  background: color-mix(in srgb, var(--pgq-teal) 6%, transparent);
}
.pgq-cards-missing[hidden] { display: none; }

/* ── CTA-Box (zentraler Shop-CTA) ─────────────────────────────────────────── */
.pgq-cta-lead {
  font-size: 19px;
  color: var(--pgq-text-mid);
  line-height: 1.75;
  margin-bottom: 14px;
}
.pgq-cta-box {
  background: color-mix(in srgb, var(--pgq-teal) 6%, #fff);
  border: 2px solid var(--pgq-teal);
  border-radius: var(--pgq-radius);
  padding: 24px;
  margin-bottom: 12px;
}
.pgq-cta-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--pgq-text);
  margin-bottom: 12px;
}
.pgq-cta-type {
  color: var(--pgq-teal);
}
.pgq-cta-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  font-size: 17px;
  color: var(--pgq-text-mid);
  line-height: 1.55;
}
.pgq-cta-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 6px;
}
.pgq-cta-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--pgq-teal);
  font-weight: 700;
}
.pgq-btn-download.wp-element-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--pgq-accent);
  color: #fff;
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  padding: 16px 24px;
  border-radius: var(--pgq-radius);
  text-decoration: none;
  transition: background 0.15s;
  margin-bottom: 10px;
}
.pgq-btn-download.wp-element-button:hover { background: var(--pgq-accent-h); }
.pgq-cta-note {
  font-size: 15px;
  color: var(--pgq-text-soft);
  text-align: center;
  line-height: 1.6;
}
.pgq-cta-browse {
  font-size: 14px;
  color: var(--pgq-text-soft);
  line-height: 1.55;
  margin: 0 0 20px;
}
.pgq-cta-browse a {
  color: var(--pgq-teal);
  text-decoration: underline;
}

/* ── Alternativen (Platz 2 + 3) ───────────────────────────────────────────── */
.pgq-alts {
  margin-bottom: 20px;
  border-top: 1px solid var(--pgq-border);
  padding-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pgq-alts-label {
  flex-basis: 100%;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pgq-teal);
  margin-bottom: 0;
}
.pgq-alt-item {
  flex: 1 1 220px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--pgq-border);
  border-radius: var(--pgq-radius);
  margin-bottom: 0;
}
.pgq-alt-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.pgq-alt-name   { font-size: 18px; font-weight: 600; color: var(--pgq-text-mid); }
.pgq-alt-score  { font-size: 14px; color: var(--pgq-text-soft); }
.pgq-alt-teaser { font-size: 16px; color: var(--pgq-text-soft); line-height: 1.5; }

/* ── Antworten-Rückblick (ausklappbar) ────────────────────────────────────── */
.pgq-review {
  margin-bottom: 20px;
  border-top: 1px solid var(--pgq-border);
  padding-top: 18px;
}
.pgq-review-label {
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pgq-teal);
  margin-bottom: 8px;
}
.pgq-review-intro {
  font-size: 16px;
  color: var(--pgq-text-mid);
  line-height: 1.6;
  margin-bottom: 14px;
}
.pgq-review-toggle {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  color: var(--pgq-teal);
  text-decoration: underline;
}
.pgq-review-toggle::-webkit-details-marker { display: none; }
.pgq-review-toggle::after {
  content: "+";
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
  color: var(--pgq-teal);
}
.pgq-review-box[open] .pgq-review-toggle::after { content: "–"; }
.pgq-review-sheet {
  margin-top: 14px;
  padding: 20px;
  border: 1px solid var(--pgq-border);
  border-radius: var(--pgq-radius);
}
.pgq-review-doc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 4px;
}
.pgq-review-doc-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--pgq-text);
}
.pgq-review-doc-sub {
  font-size: 14px;
  color: var(--pgq-text-soft);
  margin-top: 2px;
}
.pgq-review-doc-sub a { color: inherit; text-decoration: underline; }
.pgq-review-pdf {
  flex: 0 0 auto;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  padding: 8px 16px;
  border: 2px solid var(--pgq-teal);
  border-radius: var(--pgq-radius);
  background: transparent;
  color: var(--pgq-teal);
}
.pgq-review-pdf:hover { background: color-mix(in srgb, var(--pgq-teal) 10%, #fff); }
.pgq-review-type {
  margin: 18px 0 0;
  font-size: 18px;
  color: var(--pgq-text-mid);
}
.pgq-review-type strong { color: var(--pgq-text); font-weight: 700; }
.pgq-review-list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: pgq-rev;
}
.pgq-review-item {
  counter-increment: pgq-rev;
  padding: 12px 0;
  border-bottom: 1px solid var(--pgq-border);
}
.pgq-review-item:last-child { border-bottom: none; padding-bottom: 0; }
.pgq-review-q {
  display: block;
  font-size: 16px;
  color: var(--pgq-text-soft);
  line-height: 1.5;
  margin-bottom: 4px;
}
.pgq-review-q::before { content: counter(pgq-rev) ". "; }
.pgq-review-a {
  display: block;
  font-size: 16px;
  color: var(--pgq-text);
  line-height: 1.5;
}

/* ── Reset-Button ─────────────────────────────────────────────────────────── */
.pgq-btn-reset.wp-element-button {
  background: transparent;
  border: 2px solid var(--pgq-teal);
  color: var(--pgq-teal);
  font-family: inherit;
  font-size: 15px !important;
  padding: 8px 16px;
  border-radius: var(--pgq-radius);
  cursor: pointer;
  transition: background 0.15s;
  display: block;
  margin: 0 auto;
}
.pgq-btn-reset.wp-element-button:hover { background: color-mix(in srgb, var(--pgq-teal) 10%, #fff); }

/* ── Fehler ───────────────────────────────────────────────────────────────── */
.pgq-error {
  padding: 20px;
  color: #8B2A2A;
  text-align: center;
  font-size: 17px;
}

/* ── "Shop noch nicht live"-Popup ─────────────────────────────────────────── */
.pgq-popup {
  border: none;
  border-radius: var(--pgq-radius);
  padding: 28px 32px;
  max-width: 360px;
  width: calc(100% - 32px);
  text-align: center;
  box-shadow: var(--pgq-shadow);
  font-family: inherit;
  color: var(--pgq-text);
  background: var(--pgq-white);
}
.pgq-popup::backdrop { background: rgba(0,0,0,0.45); }
.pgq-popup-msg {
  font-size: 18px;
  line-height: 1.5;
  margin: 0 0 20px;
}
.pgq-popup-close {
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: var(--pgq-radius);
  border: none;
  background: var(--pgq-accent);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}
.pgq-popup-close:hover { background: var(--pgq-accent-h); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .pgq-intro       { padding: 28px 20px; }
  .pgq-screen      { padding: 22px 18px 14px; }
  .pgq-nav         { padding: 12px 18px 16px; }
  .pgq-result-header { padding: 24px 18px 20px; }
  .pgq-result-name { font-size: 27px; }
  .pgq-result-body { padding: 20px 18px; }
  .pgq-cards-imgrow { flex-direction: column; }
}

/* ── Druck / "Als PDF downloaden" – nur die Frage-/Antwort-Liste ──────────── */
@media print {
  @page { size: A4; margin: 12mm; }
  body * { visibility: hidden !important; }
  .pgq-review, .pgq-review * { visibility: visible !important; }
  .pgq-review {
    position: absolute !important;
    left: 0; top: 0; width: 100%;
    margin: 0; padding: 0; border: 0;
  }
  .pgq-review-label,
  .pgq-review-intro,
  .pgq-review .pgq-cta-lead,
  .pgq-review-toggle,
  .pgq-review-pdf { display: none !important; }
  .pgq-review-box,
  .pgq-review-list { display: block !important; }
  .pgq-review-doc { margin-top: 0; }
  .pgq-review-item { break-inside: avoid; }
}

/* ── PDF-Export per Button: nur das Blatt, kompakt, auf 1 A4-Seite skaliert ──
   Das JS hängt .pgq-review in einen body-Level-Wrapper .pgq-print-page und
   setzt dessen Höhe = Inhaltshöhe * Skalierung. So bleibt es bei genau 1 Seite
   (transform: scale allein reduziert die Layout-Höhe nicht). */
html.pgq-print body > *:not(.pgq-print-page) { display: none !important; }
html.pgq-print .pgq-print-page { overflow: hidden; background: #fff; }
html.pgq-print .pgq-review {
  width: 703px;              /* A4-Breite minus 12mm Rand @96dpi */
  margin: 0; padding: 0; border: 0;
  transform: scale(var(--pgq-print-scale, 1));
  transform-origin: top left;
}
html.pgq-print .pgq-review-label,
html.pgq-print .pgq-review-intro,
html.pgq-print .pgq-review .pgq-cta-lead,
html.pgq-print .pgq-review-toggle,
html.pgq-print .pgq-review-pdf { display: none !important; }
html.pgq-print .pgq-review-box,
html.pgq-print .pgq-review-list { display: block !important; }
html.pgq-print .pgq-review-sheet { padding: 12px; }
html.pgq-print .pgq-review-doc { margin: 0 0 8px; }
html.pgq-print .pgq-review-doc-title { font-size: 15px; }
html.pgq-print .pgq-review-doc-sub { font-size: 10px; }
html.pgq-print .pgq-review-type { font-size: 14px; margin: 8px 0 0; }
html.pgq-print .pgq-review-list { margin-top: 10px; }
html.pgq-print .pgq-review-item { padding: 5px 0; break-inside: avoid; }
html.pgq-print .pgq-review-q { font-size: 11px; line-height: 1.3; margin-bottom: 2px; }
html.pgq-print .pgq-review-a { font-size: 12px; line-height: 1.3; }