/*
 * VPH MOOC Feed – Design „Onlinecampus (Edutor)“ für den VPH MOOC Showcase.
 *
 * Gilt in WordPress (Body-Klasse) und im Moodle-Onlinecampus (Klasse am
 * Wrapper des Filters filter_vphmoocs). Greift fast nur über die Variablen
 * des Showcase-CSS ein; das Showcase-Plugin selbst bleibt unverändert.
 *
 *   .vph-mooc-skin-edutor          Design aktiv
 *   .vph-mooc-skin-edutor--action  Hauptbuttons in einer einheitlichen Farbe
 *   --vph-skin-action              diese Farbe (Standard #d9322a: Edutor-Rot,
 *                                  leicht abgedunkelt für 4,7:1 Kontrast zu Weiß)
 *
 * Schriften: DM Sans und Roboto (SIL Open Font License 1.1) liegen im Plugin.
 * Im Onlinecampus liefert Edutor beide Schriften selbst; die mitgelieferten
 * Dateien sind nur Ersatz für WordPress.
 */

@font-face { font-family: "VPH DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/dm-sans-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "VPH DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/dm-sans-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "VPH DM Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/dm-sans-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "VPH DM Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/dm-sans-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "VPH Roboto"; font-style: normal; font-weight: 900; font-display: swap; src: url(../fonts/roboto-latin-ext-900-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "VPH Roboto"; font-style: normal; font-weight: 900; font-display: swap; src: url(../fonts/roboto-latin-900-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.vph-mooc-skin-edutor .vph-mooc {
    --vph-radius: 4px;
    --vph-radius-sm: 4px;
    --vph-shadow: none;
    --vph-shadow-lg: 0 10px 24px -14px rgba(0, 0, 0, .35);
    --vph-ink: #1e1f21;
    --vph-text: #36383c;
    --vph-muted: #5f6368;
    --vph-muted-strong: #5f6368;
    --vph-line: #e1e3e6;
    --vph-line-strong: #c9cdd2;
    --vph-bg-soft: #f4f4f4;
    --edu-red: var(--vph-skin-action, #d9322a);
    --edu-red-dark: color-mix(in srgb, var(--edu-red) 80%, #000);
    --edu-heading: Roboto, "VPH Roboto", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-family: "DM Sans", "VPH DM Sans", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
/* Im Onlinecampus die volle Breite des Moodle-Inhaltsbereichs nutzen. */
.vph-moocs-embed.vph-mooc-skin-edutor .vph-mooc {
    max-width: none;
    padding-inline: 0;
}
.vph-mooc-skin-edutor .vph-mooc h2,
.vph-mooc-skin-edutor .vph-mooc h3 {
    font-family: var(--edu-heading);
    font-weight: 900;
    letter-spacing: .1px;
}

/* Anleitung „In 3 Schritten zum MOOC“ */
.vph-mooc-skin-edutor .vph-mooc-guide {
    border: 0;
    border-radius: 4px;
    background: var(--vph-bg-soft);
}
.vph-mooc-skin-edutor .vph-mooc-guide__title {
    font-size: 1.5rem;
}
/* Einleitungssatz mittig: „.vph-mooc p { margin: 0 }“ des Showcase hebt sonst
 * die Zentrierung (margin-inline: auto) auf. */
.vph-mooc-skin-edutor .vph-mooc .vph-mooc-guide__lead {
    margin-left: auto;
    margin-right: auto;
}
.vph-mooc-skin-edutor .vph-mooc-eyebrow {
    color: var(--edu-red-dark);
}
.vph-mooc-skin-edutor .vph-mooc .vph-mooc-cl-trigger {
    background: var(--edu-red) !important;
    border-radius: 4px !important;
    min-height: 44px !important;
    padding: .6rem 1.5rem !important;
    font-size: 1rem;
    box-shadow: none;
}
.vph-mooc-skin-edutor .vph-mooc .vph-mooc-cl-trigger:hover {
    background: var(--edu-red) !important;
    transform: none;
    filter: brightness(.85);
    box-shadow: none;
}
.vph-mooc-skin-edutor .vph-mooc-accordion {
    box-shadow: none;
}
.vph-mooc-skin-edutor .vph-mooc-accordion__icon {
    color: var(--edu-red);
}

/* Kacheln */
.vph-mooc-skin-edutor .vph-mooc-card,
.vph-mooc-skin-edutor .vph-mooc-card.is-featured {
    border-color: var(--vph-line);
    box-shadow: none;
}
.vph-mooc-skin-edutor .vph-mooc-card:hover,
.vph-mooc-skin-edutor .vph-mooc-card:focus-within {
    transform: none;
    box-shadow: var(--vph-shadow-lg);
    border-color: var(--vph-line-strong);
}
.vph-mooc-skin-edutor .vph-mooc-card__head {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 9.5rem;
    padding: 4.25rem 1.25rem 1rem; /* oben Platz für Kursbild und Mosaik */
}
.vph-mooc-skin-edutor .vph-mooc-card__logo {
    top: 1rem;
    left: 1.25rem;
    border-radius: 4px;
}
.vph-mooc-skin-edutor .vph-mooc-card__banner {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    max-width: none;
    padding: 0;
    background: transparent;
    transform: none;
    box-shadow: none;
}
.vph-mooc-skin-edutor .vph-mooc-card__banner .vph-mooc-card__title {
    transform: none;
    text-transform: none;
    font-size: 1.125rem !important; /* gegen globale h3-Größen des WordPress-Themes */
    line-height: 1.25;
    letter-spacing: .1px;
    text-shadow: none;
}
.vph-mooc-skin-edutor .vph-mooc-badge,
.vph-mooc-skin-edutor .vph-mooc-cert {
    border-radius: 4px;
}
.vph-mooc-skin-edutor .vph-mooc-tag {
    border-radius: 3px;
}
.vph-mooc-skin-edutor .vph-mooc-card__desc {
    font-weight: 400;
    color: var(--vph-text);
}
.vph-mooc-skin-edutor .vph-mooc .vph-mooc-btn {
    border-radius: 4px !important;
}
.vph-mooc-skin-edutor .vph-mooc .vph-mooc-btn--primary {
    /* Einfache Farbe statt color-mix(): bleibt bei Kontrastprüfungen (z. B. vphA11y) auslesbar. */
    background: var(--card-accent-dark) !important;
    box-shadow: none;
    text-shadow: none;
}
.vph-mooc-skin-edutor .vph-mooc .vph-mooc-btn--primary:hover {
    background: var(--card-accent-dark) !important;
    filter: brightness(.88);
}
.vph-mooc-skin-edutor .vph-mooc .vph-mooc-btn:hover {
    transform: none;
}

/* Hauptbuttons in einheitlicher Farbe, Nebenbuttons neutral. */
.vph-mooc-skin-edutor--action .vph-mooc .vph-mooc-btn--primary {
    background: var(--edu-red) !important;
}
.vph-mooc-skin-edutor--action .vph-mooc .vph-mooc-btn--primary:hover {
    background: var(--edu-red) !important;
    filter: brightness(.85);
}
.vph-mooc-skin-edutor--action .vph-mooc .vph-mooc-btn--ghost {
    border-color: var(--vph-line-strong) !important;
    color: var(--vph-ink) !important;
}
.vph-mooc-skin-edutor--action .vph-mooc .vph-mooc-btn--ghost:hover {
    border-color: var(--vph-ink) !important;
    background: var(--vph-bg-soft) !important;
}

/* Gesperrte Buttons (z. B. „Weiter“ in der Checkliste, bevor der Schritt
 * abgehakt ist) behalten die neutrale, lesbare Darstellung des Showcase. */
.vph-mooc-skin-edutor .vph-mooc .vph-mooc-btn--primary:disabled,
.vph-mooc-skin-edutor--action .vph-mooc .vph-mooc-btn--primary:disabled {
    background: var(--vph-line) !important;
    color: var(--vph-muted-strong) !important;
    filter: none;
}