/* Excel.Flo Light – Ergänzungen zu assets/geteilt/engine.css (gesperrte Übungen) */

/* ---------- Freie Karten: deutlich hervorgehoben ---------- */

.exercise-card.is-free {
  border: 2px solid var(--excel-green);
  box-shadow: 0 6px 22px rgba(16, 124, 65, 0.18);
}

.exercise-card.is-free:hover {
  border-color: var(--excel-green-dark);
  box-shadow: 0 10px 28px rgba(16, 124, 65, 0.26);
}

.badge--free {
  background: var(--excel-green);
  color: #fff;
}

.exercise-card__cta--button {
  align-self: flex-start;
  background: var(--excel-green);
  color: #fff;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
}

.exercise-card.is-free:hover .exercise-card__cta--button {
  background: var(--excel-green-dark);
}

/* ---------- Gesperrte Karten: deutlich zurückgenommen ---------- */

.exercise-card.is-locked {
  background: rgba(255, 255, 255, 0.35);
  border: 1.5px dashed #B9C2BD;
  box-shadow: none;
  cursor: default;
}

.exercise-card.is-locked:hover {
  transform: none;
  border-color: #B9C2BD;
  box-shadow: none;
}

/* Inhalt stark ausgegraut, Upgrade-Link bleibt farbig und klickbar */
.exercise-card.is-locked h3,
.exercise-card.is-locked p,
.exercise-card.is-locked .badge--category {
  opacity: 0.4;
  filter: grayscale(1);
}

/* ---------- Zwischenüberschriften ---------- */

.light-trenner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.4rem 0 -0.2rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
}

.light-trenner--frei {
  color: var(--excel-green-dark);
}

.light-trenner--gesperrt {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(31, 42, 36, 0.12);
  color: var(--text-muted);
}

.light-trenner svg {
  width: 16px;
  height: 16px;
  display: block;
}

.badge--locked {
  gap: 0.3rem;
  background: #E6E8E6;
  color: var(--text-muted);
}

.upgrade-link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--excel-green);
  text-decoration: none;
  align-self: flex-start;
}

.upgrade-link:hover,
.upgrade-link:focus-visible {
  text-decoration: underline;
}

.stage-banner .upgrade-link {
  font-size: inherit;
  white-space: nowrap;
}

/* Pivot-Aufgabe (pivot-uebung.html): Pivot-Nachbau im iframe, Höhe setzt pivot-seite.js */
.light-pivot {
  display: block;
  width: 100%;
  height: 820px;
  border: 0;
}

/* ---------- Fußzeile mit Impressum und Datenschutz ---------- */

.site-footer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}

.site-footer a {
  color: inherit;
}

/* ---------- Hinweis auf die Vollversion unter den gesperrten Karten ---------- */

.light-vollversion {
  grid-column: 1 / -1;
  margin-top: 1.4rem;
  background: linear-gradient(135deg, var(--excel-green) 0%, var(--excel-green-dark) 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 1.5rem 2rem;
  box-shadow: var(--shadow-card);
}

.light-vollversion h2 {
  color: #fff;
  font-size: 1.3rem;
  margin: 0 0 0.5rem;
}

.light-vollversion p {
  margin: 0;
  max-width: 680px;
}

.light-vollversion__aktion {
  margin-top: 1.1rem !important;
}

.light-vollversion__btn {
  display: inline-block;
  text-decoration: none;
  background: #fff;
  color: var(--excel-green-dark);
  padding: 0.75rem 1.4rem;
  font-size: 1rem;
}

.light-vollversion__btn:hover {
  background: var(--excel-green-tint);
  text-decoration: none;
}

@media (max-width: 640px) {
  .light-vollversion {
    padding: 1.25rem;
  }

  .light-vollversion__btn {
    display: block;
    text-align: center;
  }
}