/* schulspanisch.de · Wiederverwendbarer Feature-Teaser für interaktive Lernmodule
   Stand 2026-10-14 (v2): exakt an der Karte „Teste deinen Wortschatz“ (.vocabtest-feature*,
   startseite_neu_apple.css) ausgerichtet – gleiche Breite, Abstände, Radien, Schatten,
   Typografie, Tags, Button und Hover. Gespiegelt: Bild links, Text rechts (nur per CSS).
   Keine globalen Element-Selektoren: bestehende Seitenstyles bleiben unverändert. */

.ss-rutina-feature {
  --ss-text: #1d1d1f;
  --ss-text-soft: #6e6e73;
  --ss-card-bg: rgba(255, 255, 255, .92);
  --ss-card-border: rgba(82, 127, 168, .12);
  --ss-card-glow: rgba(82, 127, 168, .11);
  --ss-card-shadow: 0 28px 70px rgba(20, 30, 45, .08), 0 4px 14px rgba(20, 30, 45, .04);
  --ss-card-shadow-hover: 0 34px 82px rgba(20, 30, 45, .10), 0 5px 16px rgba(20, 30, 45, .05);
  --ss-visual-border: rgba(0, 0, 0, .06);
  --ss-visual-shadow: 0 24px 54px rgba(25, 35, 50, .10), 0 2px 10px rgba(25, 35, 50, .04);
  --ss-chip-border: rgba(82, 127, 168, .10);
  --ss-chip-bg: rgba(82, 127, 168, .07);
  --ss-chip-text: #466f96;          /* Vokabeltest: #527fa8 (3,8:1) – minimal dunkler für WCAG AA */
  --ss-button: #0071e3;
  --ss-button-hover: #0068d6;       /* Vokabeltest: #0077ed (4,3:1) – AA-konform */
  --ss-button-shadow: 0 10px 28px rgba(0, 0, 0, .06);
  --ss-label-bg: rgba(255, 255, 255, .9);
  --ss-label-text: #1d1d1f;

  position: relative;
  padding: clamp(54px, 8vw, 96px) 0 clamp(27px, 4vw, 48px);
  background: linear-gradient(180deg, #f4f7fb 0%, #f7f7f9 100%);
}
.ss-rutina-feature,
.ss-rutina-feature * { box-sizing: border-box; }

/* ---------- Karte (wie .vocabtest-feature-card, gespiegelt) ---------- */
.ss-rutina-feature__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(310px, .95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(36px, 6vw, 76px);
  padding: clamp(34px, 6vw, 64px);
  color: var(--ss-text);
  border: 1px solid var(--ss-card-border);
  border-radius: 32px;
  background:
    radial-gradient(circle at 8% 10%, var(--ss-card-glow), transparent 32%),
    var(--ss-card-bg);
  box-shadow: var(--ss-card-shadow);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  text-decoration: none;
}
.ss-rutina-feature__card:link,
.ss-rutina-feature__card:visited { color: var(--ss-text); text-decoration: none; }
.ss-rutina-feature__card:focus-visible {
  outline: 3px solid var(--ss-button);
  outline-offset: 5px;
}

/* ---------- Bild (wie .vocabtest-preview, gespiegelt: links) ---------- */
.ss-rutina-feature__visual {
  order: -1;
  position: relative;
  width: 100%;
  max-width: 430px;
  margin-right: auto;
  aspect-ratio: 1.24;
  overflow: hidden;
  border: 1px solid var(--ss-visual-border);
  border-radius: 26px;
  background: #e9edf2;
  box-shadow: var(--ss-visual-shadow);
  transform: rotate(-1deg);
}
.ss-rutina-feature__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
.ss-rutina-feature__image-label {
  position: absolute;
  z-index: 1;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 28px);
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ss-label-bg);
  color: var(--ss-label-text);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.2;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ---------- Text (wie .eyebrow / .section-title / .mini-info) ---------- */
.ss-rutina-feature__copy { min-width: 0; }
.ss-rutina-feature__eyebrow {
  display: block;
  margin: 0 0 18px;
  color: var(--ss-text-soft);
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-transform: lowercase;          /* „INTERAKTIV LERNEN“ → „Interaktiv lernen“ */
}
.ss-rutina-feature__eyebrow::first-letter { text-transform: uppercase; }
.ss-rutina-feature__title {
  margin: 7px 0 0;
  color: var(--ss-text);
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.ss-rutina-feature__description {
  margin: 18px 0 0;
  max-width: 570px;
  color: var(--ss-text-soft);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.45;
}

/* Dekorative Punkte und Pfeil entfallen (Markup bleibt unverändert) */
.ss-rutina-feature__accent-dot,
.ss-rutina-feature__title-dot,
.ss-rutina-feature__image-label-dot,
.ss-rutina-feature__action svg { display: none; }

/* ---------- Tags (wie .vocabtest-benefits span) ---------- */
.ss-rutina-feature__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.ss-rutina-feature__tags > span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--ss-chip-border);
  border-radius: 999px;
  background: var(--ss-chip-bg);
  color: var(--ss-chip-text);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.2;
}

/* ---------- Button (wie .btn.btn-primary.vocabtest-main-btn) ---------- */
.ss-rutina-feature__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 210px;
  min-height: 52px;
  margin-top: 26px;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--ss-button);
  color: #fff;
  box-shadow: var(--ss-button-shadow);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.ss-rutina-feature__action:hover {
  transform: translateY(-2px);
  background: var(--ss-button-hover);
}

/* ---------- Hover der Karte (wie .vocabtest-feature-card) ---------- */
@media (hover: hover) {
  .ss-rutina-feature__card {
    transition: transform .32s cubic-bezier(.2, .7, .2, 1), box-shadow .32s ease;
  }
  .ss-rutina-feature__card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ss-card-shadow-hover);
  }
}

/* ---------- Tablet / Mobile (Breakpoints wie Vokabeltest) ---------- */
@media (max-width: 820px) {
  .ss-rutina-feature__card {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .ss-rutina-feature__visual {
    max-width: 100%;
    margin: 0;
    aspect-ratio: 1.6;
    transform: none;
  }
}
@media (max-width: 520px) {
  .ss-rutina-feature { padding: 40px 0 20px; }
  .ss-rutina-feature__card {
    padding: 24px 20px;
    gap: 26px;
    border-radius: 25px;
  }
  .ss-rutina-feature__visual { border-radius: 21px; }
  .ss-rutina-feature__tags { gap: 6px; }
  .ss-rutina-feature__tags > span {
    min-height: 32px;
    padding: 6px 10px;
    font-size: .74rem;
  }
  .ss-rutina-feature__action { width: 100%; }
}

/* ---------- Dark Mode (Werte des Vokabeltests) ---------- */
@media (prefers-color-scheme: dark) {
  .ss-rutina-feature {
    --ss-text: #f5f5f7;
    --ss-text-soft: #9aa4b2;
    --ss-card-bg: rgba(28, 29, 32, .94);
    --ss-card-border: rgba(129, 169, 208, .13);
    --ss-card-glow: rgba(129, 169, 208, .10);
    --ss-card-shadow: 0 28px 70px rgba(0, 0, 0, .26), 0 4px 14px rgba(0, 0, 0, .16);
    --ss-card-shadow-hover: 0 34px 82px rgba(0, 0, 0, .32), 0 5px 16px rgba(0, 0, 0, .2);
    --ss-visual-border: rgba(255, 255, 255, .075);
    --ss-visual-shadow: 0 26px 58px rgba(0, 0, 0, .28);
    --ss-chip-border: rgba(129, 169, 208, .12);
    --ss-chip-bg: rgba(129, 169, 208, .09);
    --ss-chip-text: #81a9d0;
    --ss-button-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    --ss-label-bg: rgba(28, 29, 32, .86);
    --ss-label-text: #f5f5f7;
    background: linear-gradient(180deg, #121416, #101113);
  }
  .ss-rutina-feature__visual { background: #1c1d20; }
}

@media (prefers-reduced-motion: reduce) {
  .ss-rutina-feature__card,
  .ss-rutina-feature__action { transition: none !important; }
  .ss-rutina-feature__card:hover,
  .ss-rutina-feature__action:hover { transform: none; }
}