/* ═══════════════════════════════════════════════════════════════════════════
   Kultur-Match Quiz – Hansemut GmbH
   Baut auf style.css (Farben, Fonts, LED-Rahmen) auf.
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes matchPop {
  0%   { transform: scale(.4);  opacity: 0; }
  55%  { transform: scale(1.08); }
  100% { transform: scale(1);   opacity: 1; }
}

@keyframes matchCountGlow {
  0%   { text-shadow: 0 0 0 rgba(255,159,44,0); }
  50%  { text-shadow: 0 0 26px rgba(255,159,44,.55); }
  100% { text-shadow: 0 0 0 rgba(255,159,44,0); }
}

@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 8px 24px -8px rgba(255,159,44,.9); }
  50%      { box-shadow: 0 10px 40px -6px rgba(255,159,44,1), 0 0 0 6px rgba(255,159,44,.12); }
}

.match-shell { max-width: 620px; }

/* ── Quiz-Fortschritt (getrennt vom Formular-Stepper) ───────────────────── */
.match-progress-wrap {
  margin-bottom: 34px;
}

.match-segments-row {
  display: flex;
  gap: 5px;
  margin-bottom: 11px;
}

.match-seg {
  flex: 1;
  height: 10px;
  border-radius: 6px;
  border: 1px solid var(--sep-lt);
  background: var(--seg-off-bg);
  transition: background .5s cubic-bezier(.4,0,.2,1), box-shadow .5s;
}

.match-seg.lit {
  border-color: transparent;
  background: linear-gradient(180deg, var(--gold-lt), var(--gold));
  box-shadow: 0 2px 9px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.6);
}

.match-progress-meta {
  display: flex;
  justify-content: flex-end;
}

/* ── Screens ─────────────────────────────────────────────────────────────── */
.match-screen {
  animation: scBlend .45s ease both;
}
.match-screen.hidden { display: none !important; }

.match-start-btn { margin-top: 6px; }

/* ── Answer Cards ────────────────────────────────────────────────────────── */
.match-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.match-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 17px 18px;
  border-radius: 15px;
  border: 1px solid var(--sep);
  background: var(--white);
  color: var(--t1);
  cursor: pointer;
  box-shadow: 0 4px 14px -10px rgba(40,30,10,.3);
  transition: border-color .2s, background .2s, box-shadow .2s, transform .15s;
}

.match-option:hover:not(.selected):not(.dimmed) {
  border-color: rgba(255,159,44,.5);
  transform: translateY(-1px);
}

.match-option-letter {
  display: flex;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,.05);
  color: var(--t2);
  font: 700 13px/1 var(--ff-mono);
  transition: background .25s, color .25s, box-shadow .25s;
}

.match-option-text {
  flex: 1;
  font: 500 14.5px/1.5 var(--ff-body);
  color: var(--t1);
}

/* Selected: glow like the LED design */
.match-option.selected {
  border-color: rgba(255,159,44,.6);
  background: var(--gold-bg);
  box-shadow: 0 10px 30px -12px rgba(255,159,44,.7), 0 0 0 1.5px rgba(255,159,44,.35);
  animation: matchPop .28s ease both;
}

.match-option.selected .match-option-letter {
  background: linear-gradient(150deg, var(--gold-lt), var(--gold));
  color: #1a1208;
  box-shadow: 0 4px 14px rgba(255,159,44,.5);
}

/* Non-selected cards dim slightly once a choice is made */
.match-option.dimmed {
  opacity: .45;
  cursor: default;
  pointer-events: none;
}

.match-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  background: none;
  border: none;
  padding: 4px 2px;
  color: var(--t3);
  font: 600 12.5px/1 var(--ff-body);
  cursor: pointer;
  transition: color .2s;
}

.match-back-link:hover { color: var(--gold-dk); }
.match-back-link.hidden { display: none !important; }

/* ── Result Screen ───────────────────────────────────────────────────────── */
.match-result-inner {
  position: relative;
  text-align: center;
  padding: 12px 0 4px;
}

.match-result-glow {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,179,71,.35), transparent 70%);
  animation: scBloom 1.1s ease-out .1s both;
  pointer-events: none;
}

.match-percent-wrap {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 14px;
}

.match-percent {
  font: 800 84px/1 var(--ff-head);
  letter-spacing: -.02em;
  color: var(--t1);
  animation: matchCountGlow 1.5s ease both;
}

.match-percent-sign {
  font: 700 30px/1 var(--ff-head);
  color: var(--gold-dk);
  margin-top: 12px;
}

.match-result-h {
  font: 700 26px/1.2 var(--ff-head);
  letter-spacing: -.01em;
  margin: 0 0 12px;
  color: var(--t1);
}

.match-result-p {
  font: 400 15px/1.6 var(--ff-body);
  color: var(--t2);
  max-width: 460px;
  margin: 0 auto 30px;
}

/* CTA – three tiers */
.match-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  border-radius: 13px;
  font: 700 15px/1 var(--ff-head);
  cursor: pointer;
  transition: box-shadow .25s, transform .25s, background .25s, color .25s;
}

/* Tier 1 – strong match: big, glowing, pulsing */
#match-result.tier-high .match-cta {
  padding: 16px 32px;
  background: linear-gradient(150deg, var(--gold-lt), var(--gold));
  color: #1a1208;
  box-shadow: 0 8px 24px -8px rgba(255,159,44,.9);
  animation: ctaPulse 2.2s ease-in-out infinite;
}
#match-result.tier-high .match-cta:hover { transform: translateY(-2px); }

/* Tier 2 – solid basis: normal button, no pulse */
#match-result.tier-mid .match-cta {
  padding: 14px 26px;
  background: linear-gradient(150deg, var(--gold-lt), var(--gold));
  color: #1a1208;
  box-shadow: 0 8px 22px -10px rgba(255,159,44,.75);
}
#match-result.tier-mid .match-cta:hover {
  box-shadow: 0 14px 30px -8px rgba(255,159,44,.9);
  transform: translateY(-1px);
}

/* Tier 3 – weak match: small, understated */
#match-result.tier-low .match-cta {
  padding: 9px 16px;
  background: none;
  border: 1px solid rgba(0,0,0,.16);
  color: var(--t3);
  font-size: 12.5px;
  box-shadow: none;
}
#match-result.tier-low .match-cta:hover {
  border-color: var(--gold);
  color: var(--gold-dk);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 740px) {
  .match-percent { font-size: 62px; }
  .match-percent-sign { font-size: 22px; margin-top: 8px; }
  .match-result-h { font-size: 22px; }
  .match-option { padding: 14px 15px; gap: 11px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Dunkles Panel (.hdr) – dieselben Flaechen wie die Job-Karten in index.html.
   match.css arbeitet sonst mit --white / --t1, das waere auf dem Verlauf
   heller Block bzw. dunkler Text auf dunklem Grund.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fortschritt */
.hdr .match-seg { background: #211e3a; border-color: rgba(255,255,255,.10); }

/* Muss mit: .hdr .match-seg hat dieselbe Spezifitaet (0,2,0) wie .match-seg.lit
   weiter oben, steht aber spaeter in der Datei – und haette den Indikator damit
   platt gemacht. Der Schein aus .match-seg.lit bleibt, den fasst niemand an. */
.hdr .match-seg.lit {
  background: linear-gradient(180deg, var(--gold-lt), var(--gold));
  border-color: transparent;
}

/* Antwortkarten */
.hdr .match-option {
  background: #211e3a;
  border-color: rgba(255,255,255,.10);
  color: #ffffff;
  box-shadow: none;
}

.hdr .match-option:hover:not(.selected):not(.dimmed) {
  background: #2b2540;
  border-color: rgba(255,204,0,.5);
}

.hdr .match-option-text   { color: #ffffff; }
.hdr .match-option-letter { background: rgba(255,204,0,.14); color: #ffcc00; }

/* ausgewaehlt: voller gelber Rand + Schein statt Farbschleier – wie .job-card.selected */
.hdr .match-option.selected {
  background: #2b2540;
  border-color: #ffcc00;
  box-shadow: 0 0 16px rgba(255,204,0,.45);
}

/* Zurueck-Link */
.hdr .match-back-link       { color: rgba(255,255,255,.55); }
.hdr .match-back-link:hover { color: #ffcc00; }

/* Ergebnis */
.hdr .match-percent      { color: #ffffff; }
.hdr .match-percent-sign { color: #ffcc00; }
.hdr .match-result-h     { color: #ffffff; }
.hdr .match-result-p     { color: rgba(255,255,255,.6); }

/* schwacher CTA (tier-low): heller Rand statt schwarzem */
.hdr #match-result.tier-low .match-cta {
  border-color: rgba(255,255,255,.25);
  color: rgba(255,255,255,.6);
}
.hdr #match-result.tier-low .match-cta:hover { border-color: #ffcc00; color: #ffcc00; }