/*
 * Richard Wolf Academy "Prima Vista" — design layer for v14rw.
 *
 * Loaded after Custom.css and MediaQueries.css. Source of truth: the
 * Figma exports in ticket "CD/CI" (Farben, Schriften - Buttons, Elemente 02,
 * Elemente mobil). Desktop frame 1540px with a 1140px content column,
 * mobile frame 375-393px with a 20px gutter.
 */

/*=== Tokens ===*/
:root {
    --rw-red: #880A26;
    --rw-red-dark: #5B0421;
    --rw-red-gradient: linear-gradient(90deg, var(--rw-red-dark) 0%, var(--rw-red) 100%);
    --rw-grey-dark: #888888;
    --rw-grey-light: #D0D0D0;
    --rw-white: #F9FCFE;
    --rw-text: #333333;

    /* Figma draws every rule as a 0.5px #888 line */
    --rw-hairline: 0.5px solid var(--rw-grey-dark);
    --rw-shadow-popup: 0 0 10px rgba(0, 0, 0, .66);

    --rw-gutter-mobile: 20px;
    /* 1140px content column plus Bootstrap's 2 × 12px container padding */
    --rw-container: 1164px;
}

/*=== Layout ===*/
/* The design keeps one 1140px content column on every desktop width. */
@media (min-width: 1200px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: var(--rw-container);
    }
}
@media (max-width: 767.98px) {
    .container,
    .container-sm {
        max-width: none;
        padding-left: var(--rw-gutter-mobile);
        padding-right: var(--rw-gutter-mobile);
    }
}

/*=== Typography ("Schriften - Buttons") ===*/
h1, .h1 {
    font-size: 2.375rem;   /* HD1 Roboto 400 38/40 */
    line-height: 2.5rem;
    font-weight: 400;
}
h2, .h2 {
    font-size: 2rem;       /* HD2 Roboto 400 32/34 */
    line-height: 2.125rem;
    font-weight: 400;
}
h3, .h3 {
    font-size: 1.375rem;   /* HD3 Roboto 500 22/22, dark or red */
    line-height: 1.375rem;
    font-weight: 500;
}
h3.red,
.h3.red {
    color: var(--rw-red);
}
.rw-teaser-title {
    font-size: 1.125rem;   /* Figma "H4 teaser weiss": Roboto 400 18/21, upper case */
    line-height: 1.3125rem;
    font-weight: 400;
    text-transform: uppercase;
}
strong, b {
    font-weight: 700;
}

/*=== Buttons ===*/
/* Square, 50px high (1px border + 13px + 22px line + 13px + 1px), red or dark.
   Figma's hover variant turns the red button dark (#333); the dark one turns red. */
.button {
    padding: 13px 19px;
    border: 1px solid transparent;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 300;  /* label width in "Elemente 02" = Roboto Light */
    line-height: 1.375rem;
    text-decoration: none !important;
}
.button.button-default,
.button.button-primary,
.btn-primary {
    border-color: var(--rw-red);
    background: var(--rw-red);
    color: #fff;
}
.button.button-default:hover,
.button.button-default:focus-visible,
.button.button-primary:hover,
.button.button-primary:focus-visible,
.btn-primary:hover,
.btn-primary:focus-visible {
    border-color: var(--rw-text);
    background: var(--rw-text);
    color: #fff;
}
.button.button-secondary {
    border-color: var(--rw-text);
    background: var(--rw-text);
    color: #fff;
}
.button.button-secondary:hover,
.button.button-secondary:focus-visible {
    border-color: var(--rw-red);
    background: var(--rw-red);
    color: #fff;
}
.button.button-default::before,
.button.button-primary::before,
.button.button-secondary::before,
.btn-primary::before {
    content: none;
}

/* Download: thin arrow in front of the label (RTE style "button-download") */
.button.button-download::before {
    content: "\f063";
    position: static;
    display: inline-block;
    width: 23px;
    height: auto;
    margin-right: 3px;
    opacity: 1;
    background: none;
    font-family: "fa";
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
    text-align: left;
    vertical-align: -3px;
    transition: none;
}

/*=== Header ===*/
#page-header.rw-header {
    border-bottom: var(--rw-hairline);
    background: #fff;
}
#page-header .rw-header__grid {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas:
        "user language . logo"
        "nav  nav      nav nav";
    align-items: start;
    row-gap: 30px;
    padding-top: 50px;
    padding-bottom: 16px;
}
#page-header .rw-header__user     { grid-area: user; }
#page-header .rw-header__language { grid-area: language; }
#page-header .rw-header__logo     { grid-area: logo; }
#page-header .rw-header__nav      { grid-area: nav; }

#page-header .rw-header__user,
#page-header .rw-header__language {
    display: flex;
    align-items: center;
    height: 46px;
}

/* User: avatar + name (lms3profile popup trigger) or the login link */
#page-header .rw-header__user .profile-popup {
    min-width: 280px;
}
#page-header .rw-header__user .rounded-circle {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    margin-right: 14px !important;
    background: var(--rw-grey-light) !important;
}
#page-header .rw-header__user > a .strong,
#page-header .rw-header__user > a span.d-block {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.375rem;
    color: var(--rw-text);
}
#page-header .rw-header__user .hi-icon {
    margin-right: 0;
}
/* Legacy circular hover ring of .hi-icon; unpositioned it spans the page. */
#page-header .hi-icon:after {
    content: none;
}

/* Login link: Figma uses the user icon, red like the globe */
#page-header .rw-header__user .hi-icon-lock:before {
    content: "\f007";
    font-size: 20px;
    line-height: 1;
    margin-right: 9px;
    color: var(--rw-red);
}

/* Profile popup, Figma "Loginfeld": 400px card, hairline border, soft shadow */
#page-header .profile-popup.dropdown-menu {
    width: 400px;
    max-width: calc(100vw - 2 * var(--rw-gutter-mobile));
    padding: 20px !important;
    border: var(--rw-hairline);
    border-radius: 0;
    background: #fff;
    box-shadow: var(--rw-shadow-popup) !important;
}
#page-header .profile-popup li:first-child .ms-2 * {
    color: var(--rw-text) !important;
}
#page-header .profile-popup li {
    margin: 0;
}
#page-header .profile-popup li:first-child {
    margin: 0 0 20px !important;
    align-items: center;
}
#page-header .profile-popup li:first-child .ms-2 {
    margin-left: 14px !important;
    text-transform: none !important;
    font-size: 1rem;
    line-height: 1.375rem;
    font-weight: 300;
}
#page-header .profile-popup li:first-child .fw-semibold {
    font-weight: 700 !important;
    color: var(--rw-text);
}
#page-header .profile-popup .button {
    width: 100%;
    margin: 0 !important;
}
#page-header .profile-popup .dropdown-divider {
    margin: 20px 0 12px;
    border-top: var(--rw-hairline);
    opacity: 1;
}
#page-header .profile-popup .dropdown-item {
    padding: 0;
    margin: 0 !important;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.375rem;
    color: var(--rw-text);
    background: transparent;
}
#page-header .profile-popup .dropdown-item + .dropdown-item {
    margin-top: 8px !important;
}
#page-header .profile-popup .dropdown-item[href*="logintype=logout"] {
    font-weight: 700;
    text-decoration: underline;
}
#page-header .profile-popup .dropdown-item:hover,
#page-header .profile-popup .dropdown-item:focus-visible {
    color: var(--rw-red);
}

/* Language selector */
#page-header .rw-header__language {
    margin: 0 0 0 53px;
    padding: 0;
}
#page-header .rw-header__language .hi-icon {
    margin-right: 0;
}
#page-header .rw-header__language .hi-icon-language:before {
    content: "\f57c"; /* globe-africa, Figma "Icons Header 20" */
    font-size: 20px;
    line-height: 1;
    margin-right: 9px;
    color: var(--rw-red);
}
#page-header .rw-header__language .hi-icon span {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.375rem;
}
#page-header .rw-header__language .language-menu {
    top: 100%;
    left: 0;
}
/* The menu opened on hover only: also open it while it has focus, so a tap
   (Android/Chromium) and the keyboard open it too */
:is(#page-header, .rw-login) .language-toggle:focus-within > .language-menu {
    display: flex;
}
/* Its check/circle icon relied on the global "ul li::before" positioning,
   which Custom.css no longer has. */
#page-header .language-menu li {
    position: relative;
    height: auto;
    margin: 0;
    padding-left: 25px;
}
#page-header .language-menu li:before {
    position: absolute;
    top: 0;
    left: 0;
}

/* Logo */
#page-header .rw-header__logo .navbar-brand {
    display: block;
    margin: 0;
    padding: 0;
}
#page-header .navbar-brand-logo-normal {
    display: block;
    width: 172px;   /* the logo file's own width: larger would blur it */
    height: auto;
}

/* Main navigation */
#page-header .rw-header__nav .navbar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 18px;
    margin: 0;
    padding: 0;
}
#page-header .rw-header__nav .nav-item {
    margin: 0;
    padding: 0;
}
#page-header .rw-header__nav .nav-item > a {
    padding: 0;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.375rem;
    color: var(--rw-text);
}
#page-header .rw-header__nav .nav-item > a:hover,
#page-header .rw-header__nav .nav-item > a:focus-visible,
#page-header .rw-header__nav .nav-item.active > a {
    color: var(--rw-red);
}
#page-header .rw-header__nav .nav-item.active > a {
    font-weight: 700;
}
#page-header .rw-header__nav .nav-item > a:after {
    display: none;
}

/* MediaQueries.css switches the menu to its mobile form below 992px; the
   header only does that below 768px, so restore the desktop dropdown. */
@media (min-width: 768px) and (max-width: 991.98px) {
    #page-header #mainnavigation .dropdown-toggle-mobile {
        display: none;
    }
    #page-header #mainnavigation .dropdown-menu {
        position: absolute;
        width: 250px;
        top: 100%;
    }
}

/* Phones: a tap counts as hover, so sub-menus open only with the arrow
   toggle (checkbox), not on hover */
@media (max-width: 767.98px) {
    #page-header .rw-header__nav .nav-item:hover > .dropdown-menu {
        display: none;
    }
    #page-header .rw-header__nav .submenu-toggler:checked ~ .dropdown-menu {
        display: block;
    }
    /* The arrow: one menu row high and finger-wide, above the opened
       sub-menu (it spanned the whole item and ended up underneath it) */
    #page-header #mainnavigation .dropdown-toggle-mobile {
        z-index: 2;
        width: 44px;
        height: 30px;
    }
    #page-header #mainnavigation .dropdown-toggle-mobile:after {
        top: 50%;
        transform: translate(-50%, -50%);
        line-height: 1;
    }
}

@media (max-width: 767.98px) {
    #page-header .rw-header__grid {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "language logo"
            "user     user"
            "nav      nav";
        align-items: center;
        row-gap: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    #page-header .rw-header__language,
    #page-header .rw-header__logo {
        height: 97px;
        display: flex;
        align-items: center;
    }
    #page-header .rw-header__logo {
        justify-content: flex-end;
    }
    #page-header .rw-header__language {
        margin: 0;
    }
    #page-header .rw-header__language .hi-icon-language:before {
        margin-right: 8px;
    }
    /* Full-bleed band between two rules */
    #page-header .rw-header__user {
        height: 65px;   /* 64px between the rules, Figma "Startseite mobil" */
        margin: 0 calc(-1 * var(--rw-gutter-mobile));
        padding: 0 var(--rw-gutter-mobile);
        border-top: var(--rw-hairline);
        border-bottom: var(--rw-hairline);
    }
    /* Name first, avatar on the right (Figma "Startseite mobil") */
    #page-header .rw-header__user {
        justify-content: flex-end;
    }
    #page-header .rw-header__user > a > .d-flex {
        flex-direction: row-reverse;
    }
    #page-header .rw-header__user .rounded-circle {
        margin-right: 0 !important;
        margin-left: 15px !important;
    }
    #page-header .rw-header__nav {
        padding: 10px 0 14px;
    }
    #page-header .rw-header__nav .navbar-nav {
        flex-direction: column;
    }
    #page-header .rw-header__nav .nav-item > a {
        display: block;
        line-height: 30px;
    }
}

/*=== Footer ===*/
.rw-footer {
    background: var(--rw-red);
    color: #fff;
}
.rw-footer__menu {
    display: flex;
    flex-wrap: wrap;
    column-gap: 21px;   /* 8px + dot + 8px, as in Figma */
    margin: 0;
    padding: 24px 0;
    list-style: none;
}
.rw-footer__menu li {
    position: relative;
    margin: 0;
    font-size: 1rem;
    line-height: 1.375rem;
}
/* The dot is drawn in the gap and takes no space, so hiding it at a line
   start cannot change where the links wrap. */
.rw-footer__menu li + li::before {
    content: "\2022";
    position: absolute;
    left: -14px;
    top: 0;
    color: #fff;
}
/* The first link of every wrapped line drops its separator (set by Custom.js) */
.rw-footer__menu li.is-line-start::before {
    content: none;
}
/* Phones: two links per line as in the Figma mobile frames */
.rw-footer__menu li.rw-footer__break {
    display: none;
}
@media (max-width: 767.98px) {
    .rw-footer__menu li.rw-footer__break {
        display: block;
        flex-basis: 100%;
        height: 0;
    }
    .rw-footer__menu li.rw-footer__break::before,
    .rw-footer__menu li.rw-footer__break + li::before {
        content: none;
    }
}
.rw-footer__menu a,
.rw-footer__menu a:hover {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.375rem;
    color: #fff;
    white-space: nowrap;
}
.rw-footer__menu a:hover {
    text-decoration: underline;
}

@media (max-width: 767.98px) {
    .rw-footer__menu {
        justify-content: center;
        padding: 15px 0;
        text-align: center;
    }
}

/*=== Watermark (Figma "Logo element") ===*/
/* The pale "m" behind the content, right under the header, aligned to the
   content column (Figma "uebersicht Fachbereiche", desktop and mobile); on
   the start page against the right window edge, 28px lower on phones
   (Figma "Startseite", "Startseite mobil").
   Drawn as a background so #maincontent needs no stacking context: one
   (isolation/z-index) trapped Bootstrap modals under their backdrop. */
#maincontent {
    --rw-watermark-right: calc((100% - var(--rw-container)) / 2 + 12px);
    position: relative;
    background-image: url("../Images/RichardWolf/watermark.webp");
    background-repeat: no-repeat;
    background-size: 353px auto;
    background-position: right var(--rw-watermark-right) top 0;
}
@media (max-width: 1199.98px) {
    #maincontent { --rw-watermark-right: calc((100% - 960px) / 2 + 12px); }
}
@media (max-width: 991.98px) {
    #maincontent { --rw-watermark-right: calc((100% - 720px) / 2 + 12px); }
}
@media (max-width: 767.98px) {
    #maincontent {
        --rw-watermark-right: var(--rw-gutter-mobile);
        background-size: min(353px, calc(100% - 2 * var(--rw-gutter-mobile))) auto;
    }
}
#maincontent.rw-page--start {
    --rw-watermark-right: 0px;
}
/* The login page's <main> is #maincontent as well, but has no watermark */
#maincontent.rw-login__content {
    background-image: none;
}
/* Course player page (layout CourseMinimal): the course is the whole page */
#maincontent.rw-page--course {
    background-image: none;
}
@media (max-width: 767.98px) {
    #maincontent.rw-page--start {
        background-size: 353px auto;
        background-position: right 0 top 28px;
    }
}

/*=== Lists (Figma "aufzählung" / "Liste") ===*/
#maincontent .frame ul:not([class]) {
    padding-left: 16px;
    list-style: none;
}
#maincontent .frame ul:not([class]) > li {
    position: relative;
    margin: 0;
}
#maincontent .frame ul:not([class]) > li::before {
    content: "\2022";
    position: absolute;
    left: -14px;
    top: 0;
    color: var(--rw-text);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.375rem;
}
#maincontent .frame ol:not([class]) {
    padding-left: 20px;
}
#maincontent .frame ol:not([class]) > li {
    margin: 0;
    padding-left: 0;
}

/*=== Teaser cards (Figma "Teaser bereiche 3-spaltig", lms3catalog_categories) ===*/
.lms3catalog-teasers {
    --bs-gutter-x: 30px;
    row-gap: 30px;
}
.lms3catalog-teaser.card {
    margin: 0 !important;
    background: transparent;
}
.lms3catalog-teaser .card-header {
    height: 30px;
    background: transparent;
}
.lms3catalog-teaser .card-header .title {
    flex: 0 0 121px;
    padding: 0;
    background: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 30px;
    color: var(--rw-text);
}
.lms3catalog-teaser .card-header__bar {
    background-color: var(--rw-red);
}
.lms3catalog-teaser .card-img-top {
    display: block;
    width: 100%;
    aspect-ratio: 360 / 199;
    object-fit: cover;
    border: var(--rw-hairline);
    border-bottom: 0;
}
.lms3catalog-teaser .card-body {
    flex: 1 1 auto;
    padding: 20px 20px 23px;
    border: var(--rw-hairline);
    border-top: 0;
    background: #fff;
}
.lms3catalog-teaser .card-title {
    margin: 0 0 18px;
    font-size: 1.375rem;
    font-weight: 500;
    line-height: 1.375rem;
    color: var(--rw-text);
}
.lms3catalog-teaser .card-text,
.lms3catalog-teaser .card-text p {
    margin: 0 0 20px;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.375rem;
}
.lms3catalog-teaser .card-body .button {
    display: block;
    width: 100%;
    margin: 0;
    padding-top: 8px;
    padding-bottom: 8px;   /* 40px high, Figma card button */
}
.lms3catalog-teaser .card-footer {
    display: flex;
    align-items: center;
    min-height: 35px;
    padding: 6px 20px;
    border: 0.5px solid var(--rw-grey-light);
    border-top: 0;
    background: var(--rw-white);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.375rem;
    color: var(--rw-text) !important;
}
@media (min-width: 992px) {
    /* Figma "Teaser bereiche 4-spaltig": 22px label row, label column 88px */
    .lms3catalog-teasers--four .lms3catalog-teaser .card-header { height: 22px; }
    .lms3catalog-teasers--four .lms3catalog-teaser .card-header .title { flex-basis: 88px; line-height: 22px; }
}

/*=== Login page (Figma "Login") ===*/
.rw-login {
    position: relative;
    min-height: 100vh;
    /* Red left half: from the viewport edge to the end of the first column.
       A background, not a z-index layer, so overlays (modals) stay on top. */
    background: linear-gradient(to right, var(--rw-red) calc(50% - 15px), transparent 0);
}
.rw-login__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        ".       brand"
        "content content"
        "footer  links";
    column-gap: 30px;
    min-height: 100vh;
    padding-top: 50px;
}
.rw-login__brand {
    grid-area: brand;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.rw-login__logo img {
    display: block;
    width: 172px;   /* same logo and size as the page header */
    height: auto;
}
.rw-login__content {
    grid-area: content;
    align-self: center;   /* both halves centred between logo and bottom row */
    padding: 40px 0;
}
.rw-login__footer {
    grid-area: footer;
    align-self: end;
}
/* "Passwort vergessen?" / "Zur Registrierung": bottom of the white half,
   the last link on the line of the footer links */
.rw-login__links {
    grid-area: links;
    align-self: end;
    padding-bottom: 24px !important;
}
.rw-login__footer .rw-footer__menu {
    padding: 24px 0;
}

/* The content holds one two-column container (possibly wrapped in a page
   container): let its columns follow the grid */
.rw-login__content .container {
    max-width: none;
    padding: 0;
}
.rw-login__content .row:has(> [class*="col-md-"] + [class*="col-md-"]) {
    --bs-gutter-x: 30px;
    margin-left: -15px;
    margin-right: -15px;
}
/* The columns' own containers (container elements render container-fluid >
   container > row) add 3rem above/below and side padding: the halves are
   laid out by the grid instead, at any nesting depth */
.rw-login__content :is(.container, .container-fluid) {
    max-width: none;
    padding: 0 !important;
}
.rw-login__content .row {
    --bs-gutter-x: 0;
    margin-left: 0;
    margin-right: 0;
}
.rw-login__content .row:has(> [class*="col-md-"] + [class*="col-md-"]) > :first-child,
.rw-login__content .row:has(> [class*="col-md-"] + [class*="col-md-"]) > :first-child :is(h1, h2, h3, h4, p, a, span, li) {
    color: #fff !important;
}
.rw-login__content .bg-color-primary,
.rw-login__content .bg-color-primary::before {
    background: transparent;
}
.rw-login__content .row:has(> [class*="col-md-"] + [class*="col-md-"]) > :first-child h2 {
    font-size: 2.375rem;   /* "Willkommen bei Richard Wolf": HD1 38/40 */
    line-height: 2.5rem;
}

/* Language selector on the login page (same look as in the header) */
.rw-login .rw-header__language {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}
.rw-login .rw-header__language .hi-icon {
    margin-right: 0;
}
.rw-login .rw-header__language .hi-icon:after {
    content: none;
}
.rw-login .rw-header__language .hi-icon-language:before {
    content: "\f57c";
    font-size: 20px;
    line-height: 1;
    margin-right: 9px;
    color: var(--rw-red);
}
.rw-login .language-menu {
    top: 100%;
    left: 0;
}
.rw-login .language-menu li {
    position: relative;
    margin: 0;
    padding-left: 25px;
}
.rw-login .language-menu li:before {
    position: absolute;
    top: 0;
    left: 0;
}

/* Login form */
/* failed login; Custom.css sets the text colour of the box with !important */
.rw-login .rw-login__error {
    margin: 0 0 21px;
    font-weight: 700;
    color: var(--rw-red) !important;
}
#login_form .form-group {
    margin-bottom: 21px;
}
#login_form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 300;
    line-height: 1.375rem;
}
#login_form #login-button {
    margin-top: 0;
}
.login-links {
    margin: 0;
    padding: 0;
    list-style: none;
}
.login-links li {
    margin: 0 0 11px;
}
.login-links li:last-child {
    margin-bottom: 0;
}
.login-links li::before {
    content: none !important;
}
.login-links a {
    color: var(--rw-red);
    text-decoration: none;
}
.login-links a:hover {
    text-decoration: underline;
}
.login-links__register::before {
    content: none;
}
/* The description breaks like the Figma text box (424px; +8px because
   Firefox renders Roboto Light slightly wider, "Ihr" would only fit at 441px) */
.rw-login__content .row:has(> [class*="col-md-"] + [class*="col-md-"]) > :first-child p {
    max-width: 432px;
}

@media (max-width: 767.98px) {
    /* Mobile: dark links, the register link with the red arrow (Figma "Component 2") */
    .login-links a {
        color: var(--rw-text);
    }
    .login-links li {
        margin-bottom: 14px;
    }
    .login-links__register::before {
        content: "\f0a9";
        display: inline-block;
        margin-right: 10px;
        font-family: "fa";
        font-weight: 900;
        font-size: 20px;
        line-height: 1;
        vertical-align: -3px;
        color: var(--rw-red);
    }
}

@media (max-width: 767.98px) {
    .rw-login__content .row:has(> [class*="col-md-"] + [class*="col-md-"]) {
        --bs-gutter-x: 0;
        margin-left: 0;
        margin-right: 0;
    }
    .rw-login {
        background: none;
    }
    .rw-login__grid {
        grid-template-columns: 1fr;
        grid-template-areas: "brand" "content" "links" "footer";
        /* spare height goes above the footer, not into the content: the
           links stay right below the button */
        grid-template-rows: auto auto auto 1fr;
        padding-top: 30px;
    }
    .rw-login__brand {
        align-items: flex-start;
        margin-bottom: 30px;
    }
    .rw-login__content {
        align-self: start;
        padding: 0;
    }
    /* Red welcome band, full bleed */
    .rw-login__content .row:has(> [class*="col-md-"] + [class*="col-md-"]) > :first-child {
        flex: 0 0 auto;
        width: calc(100% + 2 * var(--rw-gutter-mobile));
        max-width: none;
        margin: 0 calc(-1 * var(--rw-gutter-mobile));
        padding: 50px var(--rw-gutter-mobile) 40px;   /* 283px band as in Figma */
        background: var(--rw-red);
    }
    .rw-login__content .row:has(> [class*="col-md-"] + [class*="col-md-"]) > :nth-child(2) {
        padding-top: 44px;
    }
    .rw-login__footer {
        margin: 97px calc(-1 * var(--rw-gutter-mobile)) 0;   /* footer 119px below "Zur Registrierung" as in Figma */
        padding: 0 var(--rw-gutter-mobile);
        background: var(--rw-red);
    }
    .rw-login__footer .rw-footer__menu {
        justify-content: center;
        padding: 15px 0;
    }
    /* 20px below the button as in Figma; the form already ends 13px lower */
    .rw-login__links {
        margin-top: 7px;
        padding-bottom: 0 !important;
    }
}

/*=== Forms (Figma "Formular") ===*/
/* Forms.css sets every field to 3.2em with a 1px border, all !important;
   the design wants 40px fields with a 0.5px #888 border. */
:is(input[type="text"], input[type="email"], input[type="password"], input[type="number"],
    input[type="tel"], input[type="url"], input[type="search"], input[type="date"],
    input[type="datetime-local"], input[type="time"]),
select,
.form-select {
    height: 40px !important;
    padding: 0 18px !important;
    border: var(--rw-hairline) !important;
    border-radius: 0 !important;
    background-color: #fff;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.375rem;
    color: var(--rw-text);
    box-shadow: none !important;
}
textarea {
    padding: 9px 18px !important;
    border: var(--rw-hairline) !important;
    border-radius: 0 !important;
    background-color: #fff;
    font-weight: 300;
    color: var(--rw-text);
}
/* SurveyJS dropdowns and tag boxes lay a search input over the selected value: the field rules above must not
   apply to it (a white background hides the value), and the dropdown itself shows the focus. */
:is(.sd-dropdown__filter-string-input, .sd-tagbox__filter-string-input)[type="text"] {
    height: auto !important;
    padding: 0 !important;
    border: none !important;
    background-color: transparent !important;
    outline: none !important;
}
:is(input, select, textarea):focus-visible {
    outline: 2px solid var(--rw-red) !important;
    outline-offset: -1px;
}
/* Saved logins: browsers paint autofilled fields (Firefox with an !important rule that a page can't override);
   an inset shadow paints over that background, so the field stays white. The second selector keeps it on focus,
   where Forms.css sets its own shadow. */
:is(input, select, textarea):autofill,
:is(input, select, textarea):autofill:focus:not([readonly]) {
    box-shadow: inset 0 0 0 1000px #fff !important;
    -webkit-text-fill-color: var(--rw-text);
}
/* Select: chevron in its own 60px box on the right */
select:not([multiple]):not([size]),
.form-select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 78px !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M1 1l11 11L23 1' fill='none' stroke='%23880A26' stroke-width='1.6'/%3E%3C/svg%3E"),
        linear-gradient(var(--rw-grey-dark), var(--rw-grey-dark));
    background-repeat: no-repeat, no-repeat;
    background-position: right 19px center, right 60px top;
    background-size: 22px 13px, 0.5px 100%;
}
/* Checkbox: 20px square, red tick */
input[type="checkbox"].form-check-input,
.frame input[type="checkbox"]:not(.submenu-toggler):not(.star-rating-input) {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border: var(--rw-hairline);
    border-radius: 0;
    accent-color: var(--rw-red);
}
.form-check-input:checked {
    background-color: var(--rw-red);
    border-color: var(--rw-red);
}
form label,
.form-label {
    font-weight: 300;
    color: var(--rw-text);
}
.invalid-feedback,
.help-block.text-danger,
.error {
    color: var(--rw-red);
    font-weight: 300;
}

/* Form framework forms (registration, contact, profile): the label sits above
   the field like in Figma (Roboto 300 16/22 #333, 5px gap, 21px between fields
   as on the login form) instead of Forms.css' small floating red label; no card
   frame around the form; the button is as wide as its text. */
.card > .card-body:has(> form) {
    padding: 0;
    border: 0;
}
.form-group:has(> .md-form),
.form-group.md-form {
    margin: 0 0 21px;
}
.md-form {
    display: flex;
    flex-direction: column;
    margin: 0;
}
.md-form > label.control-label {
    order: -1;
    position: static;
    margin: 0 0 5px;
    transform: none;
    font-size: 1rem;
    line-height: 1.375rem;
    color: var(--rw-text) !important;
    cursor: default;
}
/* Form framework form in a red section (contact form): on the red itself instead of the white card,
   white heading, labels and texts, white fields. The dropdown and the textarea need the white
   explicitly: Forms.css makes every .form-control transparent. */
.bg-color-primary .card:has(> .card-body > form) {
    border: 0;
    background: transparent;
}
.bg-color-primary .card > .card-body > form :is(h1, h2, h3, legend, label, .help-block, .error, .invalid-feedback) {
    color: #fff !important;
}
.bg-color-primary .card > .card-body > form :is(select, textarea, .form-control) {
    background-color: #fff !important;
}
.custom-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-left: 0;
}
.custom-checkbox .form-check-input {
    flex: none;
    float: none;
    margin: 1px 0 0;
}
.custom-checkbox .form-check-label {
    color: var(--rw-text);
}
.custom-checkbox .form-check-label a {
    color: var(--rw-red);
}
form .actions .button.w-100,
.card .card-body form .button {
    width: auto !important;
}
/* No rule between the registration intro text (ends with an <hr>) and the form */
.frame:has(+ .frame #lms3coupon) > hr:last-child {
    display: none;
}
.frame:has(+ .frame #lms3coupon):has(> hr:last-child) {
    margin-bottom: 40px;
}
/* Editor texts of the registration plugin (step 1: above the key field, step 2: above the form);
   40px to the form like the content dividers */
#lms3coupon .lms3coupon-text {
    margin-bottom: 40px;
}
#lms3coupon .lms3coupon-text > :last-child {
    margin-bottom: 0;
}
/* Course detail page: course facts left, learning goals/contents right (no page tree);
   stacked on phones with some space before the learning goals */
@media (max-width: 767.98px) {
    .course-detail-meta__learning {
        margin-top: 24px;
    }
}
/* Catalog: "Kennzeichnen als" of a course (Pflicht/Freiwillig) on the course image, as in the mockup */
.course-image-cover {
    position: relative;
}
.course-marking {
    position: absolute;
    top: 0;
    left: 0;
    padding: 4px 8px;
    background: rgba(51, 51, 51, 0.85);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.375;
}
/* Error text in the Figma red (Lms3coupon.css, loaded later, uses indianred) */
#lms3coupon form .error {
    color: var(--rw-red);
}

/*=== Content rhythm (Figma "Startseite") ===*/
/* Divider (CType "div"): 0.5px #888, 40px after the intro, 50px before the
   cards; on phones 35px / 60px, and 111px before the start page tiles */
#maincontent hr {
    margin: 40px 0 50px;
    border: 0;
    border-top: var(--rw-hairline);
    opacity: 1;
}
@media (max-width: 767.98px) {
    #maincontent hr {
        margin-top: 35px;
        margin-bottom: 60px;   /* "uebersicht Fachbereiche mobil" */
    }
    #maincontent.rw-page--start hr {
        margin-bottom: 111px;  /* "Startseite mobil" */
    }
}
/* 100px between the last content and the footer; the page container
   (Container.html, "py-5") already brings 48px of it */
#maincontent {
    padding-bottom: 52px;
}
@media (max-width: 767.98px) {
    #maincontent {
        padding-bottom: 12px;
    }
    /* Page title 43px below the header on phones (both Figma mobile frames;
       48px on desktop comes from the container's py-5) */
    #maincontent > .container.py-5 {
        padding-top: 43px !important;
    }
}

/*=== Course rows (Figma "Teaser Katalog", lms3catalog Course partial) ===*/
.course-entry > [class*="col-"] {
    border-width: 0.5px !important;
    border-color: var(--rw-grey-dark) !important;
}
.course-entry h3,
.course-entry h3 strong {
    margin-bottom: 10px;
    font-size: 1.375rem;
    font-weight: 500;
    line-height: 1.375rem;
}
.course-entry .progress-info {
    display: flex;
    justify-content: space-between;
    padding: 8px 0 11px;
    font-weight: 700;
}
.course-entry .progress {
    height: 10px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: #D9D9D9;
}
.course-entry .progress-bar {
    background: var(--rw-red);
}
/* Bottom row 5px under the bar: buttons left, "Ihre Bewertung" + stars right;
   on narrow rows the rating moves under the buttons */
.course-entry .course-actions {
    flex-wrap: wrap;
    row-gap: 12px;
    margin-top: 5px;
}
.course-entry .course-actions > div:first-child {
    display: flex;
    flex-wrap: wrap;
    row-gap: 10px;
}
.course-entry .button {
    white-space: nowrap;
}
/* Figma image column: 206px high (the row was 222px from a 220px minimum) */
.course-entry .course-image-cover {
    min-height: 206px;
}
.course-entry .course-rating__label {
    margin-right: 10px;
    font-weight: 300;
}
/* Small 30px buttons, 20px apart; "Info" in light grey */
.course-entry .button {
    margin: 0 20px 0 0 !important;
    padding: 3px 20px;
    line-height: 1.375rem;
}
.course-entry .button[data-bs-target^="#course-info"] {
    border-color: var(--rw-grey-light);
    background: var(--rw-grey-light);
    color: #1E1E1E;
}
.course-entry .button[data-bs-target^="#course-info"]:hover,
.course-entry .button[data-bs-target^="#course-info"]:focus-visible {
    border-color: var(--rw-text);
    background: var(--rw-text);
    color: #fff;
}
.course-entry .course-rating {
    flex-shrink: 0;
}
.course-entry .star-rating-label {
    font-size: 15px;
    color: #D9D9D9;
}
/* Rating (EXT:lms3course_rating): keyboard focus, locked until the course
   is finished, short status after saving */
.course-entry .star-rating-input:focus-visible + .star-rating-label {
    outline: 2px solid var(--rw-red);
    outline-offset: 1px;
}
.course-entry .course-rating--locked .star-rating-label {
    cursor: default;
}
.course-entry .course-rating--locked .star-rating-label:hover,
.course-entry .course-rating--locked .star-rating-label:hover ~ .star-rating-label {
    color: #D9D9D9;
}
.course-entry .course-rating.is-saving .star-rating {
    opacity: .6;
}
.course-entry .course-rating__status {
    margin-left: 10px;
    font-size: .875rem;
    font-weight: 300;
}
.course-entry .course-rating__status:empty {
    display: none;
}
.course-entry .course-rating.has-error .course-rating__status {
    color: var(--rw-red);
}
/* phones: the confirmation goes under the stars instead of past the row */
@media (max-width: 575.98px) {
    .course-entry .course-rating {
        flex-wrap: wrap;
        max-width: 100%;
    }
    .course-entry .course-rating__status {
        flex-basis: 100%;
        margin: 4px 0 0;
    }
}

/*=== Info box (container_infobox, "jumbotron") as Figma "Feld grau" ===*/
#maincontent .jumbotron {
    border-radius: 0;
    background: #D9D9D9;
}

/*=== Page column for loose content elements ===*/
/* Container elements bring their own .container; a plain element placed
   directly on the page would otherwise run from edge to edge. */
#maincontent > .frame {
    width: 100%;
    max-width: var(--rw-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
}
@media (max-width: 767.98px) {
    #maincontent > .frame {
        padding-left: var(--rw-gutter-mobile);
        padding-right: var(--rw-gutter-mobile);
    }
}

/*=== Course player page (layout CourseMinimal) ===*/
/* The SCORM player is placed without a container and uses the full width */
#maincontent.rw-page--course > .frame {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}
/* Bar with "Zur Übersicht" and the bookmark pencil: Richard Wolf red, white
   text. Only the bar's own links: the bookmark modal is rendered inside it. */
.rw-course-bar {
    z-index: 1060;
    background: var(--rw-red);
    color: #fff;
}
.rw-course-bar .border-bottom {
    border-bottom: 0 !important;
}
.rw-course-bar .lms3-mybookmark > a {
    color: #fff !important;
}
.rw-course-bar .lms3-mybookmark > a svg {
    fill: currentColor;
}
.rw-course-bar .lms3-mybookmark > a:hover,
.rw-course-bar .lms3-mybookmark > a:focus-visible {
    text-decoration: underline !important;
    text-underline-offset: 4px;
}
.rw-course-bar .lms3-mybookmark > a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}
.rw-course-bar .modal {
    color: var(--rw-text);
}

/*=== Coloured sections (Container.html, "Feld grau") ===*/
/* Full-bleed on both sides without widening the page; replaces the
   left-only ::before extension. Sections inside a column stay boxed. */
#maincontent .container.bg-color-primary::before {
    content: none;
}
#maincontent .container.bg-color-primary {
    background: var(--rw-red);
}
#maincontent .container.bg-color-secondary {
    background: #D9D9D9;
}
#maincontent .container:is(.bg-color-primary, .bg-color-secondary):not(.row *) {
    box-shadow: 0 0 0 100vmax var(--rw-section-bg);
    clip-path: inset(0 -100vmax);
}
#maincontent .container.bg-color-primary:not(.row *) { --rw-section-bg: var(--rw-red); }
#maincontent .container.bg-color-secondary:not(.row *) { --rw-section-bg: #D9D9D9; }

/*=== Profile form: public/private toggles (lms3profile, Bootstrap btn-check:
     "Öffentlich" = outline-success, "Privat" = outline-danger) ===*/
#maincontent .input-group > :is(.btn-outline-success, .btn-outline-danger) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    height: 40px;
    margin: 0 !important;
    white-space: nowrap;
    padding: 0 16px;
    border: var(--rw-hairline);
    border-radius: 0 !important;
    background: #fff;
    font-size: 1rem;
    font-weight: 300;
    color: var(--rw-text);
}
#maincontent .input-group > .btn-check:checked + :is(.btn-outline-success, .btn-outline-danger),
#maincontent .input-group > :is(.btn-outline-success, .btn-outline-danger):hover {
    border-color: var(--rw-text);
    background: var(--rw-text);
    color: #fff;
}
#maincontent .input-group > .btn-check:focus-visible + :is(.btn-outline-success, .btn-outline-danger) {
    outline: 2px solid var(--rw-red);
    outline-offset: -2px;
    box-shadow: none;
}
#maincontent .input-group:has(> .btn-check) {
    flex-wrap: nowrap;
    align-items: stretch;
}
#maincontent .input-group:has(> .btn-check) > .form-control {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    margin: 0 !important;
}
/* Narrow screens: the field on its own line, the two toggles below it */
@media (max-width: 575.98px) {
    #maincontent .input-group:has(> .btn-check) {
        flex-wrap: wrap;
    }
    #maincontent .input-group:has(> .btn-check) > .form-control {
        flex: 0 0 100%;
        width: 100%;
    }
    #maincontent .input-group:has(> .btn-check) > :is(.btn-outline-success, .btn-outline-danger) {
        flex: 1 1 0;
        justify-content: center;
        margin-top: -0.5px;
    }
}
#maincontent input[type="file"].form-control {
    border: var(--rw-hairline);
    border-radius: 0;
}

/*=== Overflow guards ===*/
/* Long URLs and words in running text (privacy policy) break instead of
   widening the page */
#maincontent .frame {
    overflow-wrap: break-word;
}
#maincontent .frame a {
    overflow-wrap: anywhere;
}
#maincontent :is(h1, h2, h3) {
    overflow-wrap: break-word;
}
/* News detail: the floated image keeps to its column on tablets */
.news .news-img-wrap {
    max-width: 100%;
}
.news .news-img-wrap img {
    max-width: 100%;
    height: auto;
}

/*=== Keyboard focus ===*/
/* Custom.css no longer has a focus style; keyboard users need to see where they are. */
:focus-visible {
    outline: 2px solid var(--rw-red) !important;
    outline-offset: 2px;
}
.rw-footer :focus-visible,
.rw-login__footer :focus-visible,
#maincontent .bg-color-primary :focus-visible,
.rw-login__content .row:has(> [class*="col-md-"] + [class*="col-md-"]) > :first-child :focus-visible {
    outline-color: #fff !important;
}
/* ...but not in a white box on such a section (login form), where a white ring hides the field */
#maincontent .bg-color-primary .bg-color-tertiary :focus-visible {
    outline-color: var(--rw-red) !important;
}
.course-entry.border {
    border-width: 0.5px !important;
    border-color: var(--rw-grey-dark) !important;
}

/*=== Page headings ===*/
/* Every Figma page frame titles the page in HD2 (32/34); HD1 (38/40) is
   kept for the login welcome. */
#maincontent h1 {
    font-size: 2rem;
    line-height: 2.125rem;
}
#maincontent.rw-login__content .row:has(> [class*="col-md-"] + [class*="col-md-"]) > :first-child :is(h1, h2) {
    max-width: 330px;   /* "Willkommen bei / Richard Wolf" on two lines, as in Figma */
    font-size: 2.375rem;
    line-height: 2.5rem;
    margin-bottom: 17px;
}
/* "Benutzeranmeldung" to the hint: 100px from heading top as in Figma (60px on mobile) */
#maincontent.rw-login__content .row:has(> [class*="col-md-"] + [class*="col-md-"]) > :nth-child(2) h2 {
    margin-bottom: 66px;
}
@media (max-width: 767.98px) {
    #maincontent.rw-login__content .row:has(> [class*="col-md-"] + [class*="col-md-"]) > :nth-child(2) h2 {
        margin-bottom: 26px;
    }
    /* Figma mobile: 40px between the welcome heading and its text (17px on desktop) */
    #maincontent.rw-login__content .row:has(> [class*="col-md-"] + [class*="col-md-"]) > :first-child :is(h1, h2) {
        margin-bottom: 40px;
    }
    /* The hint is 2px wider than a 393px screen's column; Figma keeps it on one line */
    .rw-login__content .row:has(> [class*="col-md-"] + [class*="col-md-"]) > :nth-child(2) h2 + p {
        margin-right: -8px;
    }
}

/*=== Greeting (lms3usercastmessages) ===*/
/* Phones: "Willkommen in der / Prima Vista eAcademy" on its own lines as in
   Figma "Startseite mobil": the suffix starts a new line, and its box takes
   "Prima Vista eAcademy" (323px) but not "Willkommen in der Prima" (356px). */
@media (max-width: 1199.98px) {
    /* Below the full desktop column the greeting no longer fits one line:
       start the welcome text on its own line instead of orphaning a word */
    .rw-greeting__suffix {
        display: block;
    }
}
@media (max-width: 767.98px) {
    .rw-greeting__suffix {
        max-width: 340px;
    }
}

/*=== Heading / text spacing (Figma "H2 + Text") ===*/
/* 20px under a page heading; a paragraph opening an element adds nothing
   (heading and text in one element otherwise collapsed to 8px) */
#maincontent :is(h1, h2) {
    margin-bottom: 20px;
}
#maincontent .frame > p:first-child {
    margin-top: 0;
}

/*=== Modals (course info and others) ===*/
/* Square card with the hairline, like the profile popup ("Loginfeld") */
.modal-content {
    border: var(--rw-hairline);
    border-radius: 0;
    box-shadow: var(--rw-shadow-popup);
}
.modal-header,
.modal-footer {
    border: 0;
}
.modal-header {
    padding: 30px 30px 10px;
}
.modal-body {
    padding: 10px 30px;
}
.modal-footer {
    padding: 20px 30px 30px;
}
/* Course info: no icon column, so every field label lines up */
.modal .target-icon {
    display: none;
}
.modal .target-text {
    margin: 0;
}
.modal .target-text ul {
    margin: 0.25rem 0 0;
}
/* "Schließen" as the dark button */
.modal-footer .button.btn-secondary {
    margin: 0;
    border-color: var(--rw-text);
    background: var(--rw-text);
    color: #fff;
}
.modal-footer .button.btn-secondary:hover,
.modal-footer .button.btn-secondary:focus-visible {
    border-color: var(--rw-red);
    background: var(--rw-red);
}
@media (max-width: 767.98px) {
    .modal-dialog {
        max-width: none;
        margin: 20px;
    }
    .modal-header { padding: 20px 20px 10px; }
    .modal-body { padding: 10px 20px; }
    .modal-footer { padding: 20px; }
}

/*=== Accordion (content block "accordeon", Figma "akkordion") ===*/
/* A 0.5px rule under every closed item, none under the open one; titles
   HD3 red when closed, dark when open; light 32px "+" (red) / "−" (dark) */
.rw-accordion .accordion-item {
    border: 0;
    border-bottom: var(--rw-hairline);
    border-radius: 0;
    background: transparent;
}
.rw-accordion .accordion-item:has(> .accordion-collapse.show) {
    border-bottom-color: transparent;
}
.rw-accordion .accordion-header {
    padding: 0;
    border: 0;
}
.rw-accordion .accordion-title-link {
    display: block;
    padding: 20px 52px 20px 0;
}
.rw-accordion .accordion-title {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 500;
    line-height: 1.375rem;
    color: inherit;
}
.rw-accordion .accordion-title-link::before,
.rw-accordion .accordion-title-link::after {
    top: 50%;
    right: 0;
    margin-top: -16px;
    font-size: 32px;
    font-weight: 300;
    line-height: 32px;
}
.rw-accordion .accordion-title-link::before {
    color: var(--rw-text);
    font-size: 35px;            /* "−" 26px wide as in Figma */
}
.rw-accordion .accordion-title-link::after {
    color: var(--rw-red);
    font-size: 52px;            /* FA5's "+" is drawn smaller: 26x26px as in Figma */
    line-height: 52px;
    margin-top: -26px;
}
.rw-accordion .accordion-body {
    padding: 8px 0 41px;
}
@media (max-width: 767.98px) {
    .rw-accordion .accordion-title-link {
        padding: 16px 44px 16px 0;
    }
    .rw-accordion .accordion-title-link::before {
        font-size: 30px;
    }
    .rw-accordion .accordion-title-link::after {
        font-size: 44px;
        line-height: 44px;
        margin-top: -22px;
    }
}

/* Tests (EXT:lms3qna): the scoring header is a wrapping flex row, so a long
   question title dropped below its number. The title takes the row minus the
   number, so both share a line and the report badges wrap below; the gap
   replaces SurveyJS' &nbsp; between number and title. */
.sd-question .sd-title.lms3qna-scoring-header {
    align-items: baseline;          /* beats Main.css, which loads later */
}
.lms3qna-scoring-header > .sv-string-viewer {
    flex: 1 1 calc(100% - 4rem);
    min-width: 0;
}
.lms3qna-scoring-header > [data-key="num-sp"] {
    display: none;
}
/* Customer request: no "Bewertungsdetails" box in tests and reports */
.lms3qna-scoring-details {
    display: none !important;
}