/* Punktraster gibt der grossen dunklen Flaeche Tiefe (statt Farbblock) */
body .wrapper .themes { background-color: var(--osa-ink); background-image: var(--osa-dots); background-size: 22px 22px; position: relative; }
body .wrapper .themes .section-inner { position: relative; }

/* ---- Wissen-Kacheln: text-first, keine Deko-Bilder ---- */
body .wrapper .themes .theme-grid { list-style: none; margin: 0; padding: 0; counter-reset: themecard; display: grid; grid-template-columns: 1fr; gap: 2px; }
body .wrapper .themes .theme-card { counter-increment: themecard; position: relative; background-color: var(--osa-ink-3); border: 1px solid #3a2a72; display: flex; flex-direction: column; padding: 26px 24px 24px; transition: background-color 0.25s ease, border-color 0.25s ease; }
body .wrapper .themes .theme-card::before { content: counter(themecard, decimal-leading-zero); position: absolute; top: 16px; right: 20px; font-size: 46px; font-weight: 700; line-height: 1; letter-spacing: -2px; color: var(--osa-lime); opacity: 0.22; transition: opacity 0.25s ease; }
body .wrapper .themes .theme-card::after { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background-color: var(--osa-lime); transform: scaleY(0); transform-origin: top; transition: transform 0.25s ease; }
body .wrapper .themes .theme-card:hover { background-color: var(--osa-ink-2); border-color: #4a3a8a; }
body .wrapper .themes .theme-card:hover::before { opacity: 0.6; }
body .wrapper .themes .theme-card:hover::after { transform: scaleY(1); }

/* Deko-Medien der Wissen-Kacheln abgeschaltet (Deko ohne Informationswert) */
body .wrapper .themes .theme-media { display: none; }

body .wrapper .themes .theme-body { padding: 0; padding-right: 62px; }
body .wrapper .themes .theme-tag { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--osa-lime); }
body .wrapper .themes .theme-title { margin: 10px 0 0; font-size: 21px; font-weight: 700; line-height: 1.2; letter-spacing: -0.4px; color: #FFFFFF; }
body .wrapper .themes .theme-text { margin: 10px 0 0; font-size: 14px; line-height: 1.7; color: #C7C1E0; }

/* Outline-Button war dunkel auf dunklem Grund und damit unsichtbar */
body .wrapper .themes .section-cta .btn-outline { color: #FFFFFF; border-color: rgba(164, 156, 255, 0.55); }
body .wrapper .themes .section-cta .btn-outline:hover { color: var(--osa-lime); border-color: var(--osa-lime); }

@media (min-width: 600px) {
  body .wrapper .themes .theme-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  body .wrapper .themes .theme-grid { grid-template-columns: repeat(3, 1fr); }
  body .wrapper .themes .theme-card { padding: 30px 28px 28px; }
  body .wrapper .themes .theme-title { font-size: 23px; }
  body .wrapper .themes .theme-card::before { font-size: 56px; letter-spacing: -3px; }
}