/* Deutsch für Au-Pairs learning platform: own styles on top of Bootstrap 5.3 (loaded unchanged).
   Brand (logo colours, Poppins, highlight, five-colour dash) from deutschfuraupairs.com.
   Values come from docs/design-system.md. Every component works without JavaScript;
   the flashcard study page adds public/js/flashcards.js on top. */

/* Poppins, stored on this site (no request to Google); licence in public/fonts/OFL.txt */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/poppins-400-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/poppins-400-latin.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: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/poppins-600-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/poppins-600-latin.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: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/poppins-700-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/poppins-700-latin.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; }

/* ------------------------------------------------------------------
   1. Colours and sizes as variables: light theme
   ------------------------------------------------------------------ */
:root,
[data-bs-theme="light"] {
    /* own variables */
    --app-surface: #ffffff;
    --app-border-strong: #8a82a6;
    --app-focus-ring: #2a2346;
    --app-primary: #433888;
    --app-primary-hover: #352b70;
    --app-on-solid: #ffffff;
    --app-accent-bg: #fff4d4;
    --app-accent-text: #5c3d00;
    --app-accent-line: #f4961e;
    --app-hero-bg: #f7f4fd;
    --app-heading: #433888;
    --app-highlight: #ebe3fa;
    --app-nav-marker: #e8452d; /* brand red: only as a bar, never as text (3.9:1) */
    --app-picture-bg: #f8e6e1; /* the background of the drawn flashcard pictures, in both themes */
    /* logo colours (decoration only: the five-colour dash) */
    --app-brand-blue: #0f63aa;
    --app-brand-purple: #433888;
    --app-brand-red: #e8452d;
    --app-brand-orange: #f4961e;
    --app-brand-yellow: #f9be16;
    --app-level-a1: #0f766e;
    --app-level-a2: #1d5fbf;
    --app-level-b1: #a8235f;
    --app-success-solid: #1b7a43;
    --app-danger-solid: #b42318;
    --app-progress-track: #e6e0f4;
    --app-progress-bar: #433888;
    /* German articles (flashcards): text and border colour, tint background */
    --app-der: #1d4ed8;
    --app-der-bg: #e8eefd;
    --app-die: #be123c;
    --app-die-bg: #fde8ec;
    --app-das: #12723a;
    --app-das-bg: #e5f5ea;

    /* Bootstrap variables */
    --bs-body-bg: #ffffff;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-body-color: #2a2346;
    --bs-body-color-rgb: 42, 35, 70;
    --bs-emphasis-color: #2a2346;
    --bs-heading-color: var(--app-heading);
    --bs-secondary-color: #615a7c;
    --bs-secondary-bg: #f6f3fc;
    --bs-tertiary-bg: #f6f3fc;
    --bs-primary: #433888;
    --bs-primary-rgb: 67, 56, 136;
    --bs-primary-bg-subtle: #eee9fa;
    --bs-primary-text-emphasis: #352b70;
    --bs-link-color: #433888;
    --bs-link-color-rgb: 67, 56, 136;
    --bs-link-hover-color: #352b70;
    --bs-link-hover-color-rgb: 53, 43, 112;
    --bs-border-color: #e6e0f4;
    --bs-body-font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bs-border-radius: 0.5rem;

    --bs-success-bg-subtle: #e6f4ec;
    --bs-success-text-emphasis: #14592f;
    --bs-success-border-subtle: #14592f;
    --bs-info-bg-subtle: #eef1f5;
    --bs-info-text-emphasis: #334155;
    --bs-info-border-subtle: #334155;
    --bs-warning-bg-subtle: #fff1cc;
    --bs-warning-text-emphasis: #7a4b00;
    --bs-warning-border-subtle: #7a4b00;
    --bs-danger-bg-subtle: #fdecea;
    --bs-danger-text-emphasis: #a11c12;
    --bs-danger-border-subtle: #a11c12;
}

/* ------------------------------------------------------------------
   2. Dark theme (US-07): the same variables with dark values
   ------------------------------------------------------------------ */
[data-bs-theme="dark"] {
    --app-surface: #1f1b36;
    --app-border-strong: #7e76a3;
    --app-focus-ring: #eeebf8;
    --app-primary: #6e5cd3;
    --app-primary-hover: #5f4dc4;
    --app-accent-bg: #3a2c0e;
    --app-accent-text: #f9cf6a;
    --app-accent-line: #f9be16;
    --app-hero-bg: #1f1b36;
    --app-heading: #cfc6f5;
    --app-highlight: #2d2758;
    --app-nav-marker: #ff7a63;
    --app-level-a2: #2a6fd6;
    --app-level-b1: #c2327a;
    --app-progress-track: #39335c;
    --app-progress-bar: #9c8cf0;
    --app-der: #9db8ff;
    --app-der-bg: #1e2a4a;
    --app-die: #ffa3b5;
    --app-die-bg: #3d1822;
    --app-das: #7ddb9c;
    --app-das-bg: #16301f;

    --bs-body-bg: #15122a;
    --bs-body-bg-rgb: 21, 18, 42;
    --bs-body-color: #eeebf8;
    --bs-body-color-rgb: 238, 235, 248;
    --bs-emphasis-color: #eeebf8;
    --bs-secondary-color: #b4add0;
    --bs-secondary-bg: #29244a;
    --bs-tertiary-bg: #29244a;
    --bs-primary: #6e5cd3;
    --bs-primary-rgb: 110, 92, 211;
    --bs-primary-bg-subtle: #2d2758;
    --bs-primary-text-emphasis: #d3cafa;
    --bs-link-color: #c2b6f7;
    --bs-link-color-rgb: 194, 182, 247;
    --bs-link-hover-color: #d6cdfa;
    --bs-link-hover-color-rgb: 214, 205, 250;
    --bs-border-color: #39335c;

    --bs-success-bg-subtle: #15301f;
    --bs-success-text-emphasis: #7fdca4;
    --bs-success-border-subtle: #7fdca4;
    --bs-info-bg-subtle: #232a36;
    --bs-info-text-emphasis: #c5cedb;
    --bs-info-border-subtle: #c5cedb;
    --bs-warning-bg-subtle: #3a2c0c;
    --bs-warning-text-emphasis: #ffd479;
    --bs-warning-border-subtle: #ffd479;
    --bs-danger-bg-subtle: #3d1512;
    --bs-danger-text-emphasis: #ffb4a8;
    --bs-danger-border-subtle: #ffb4a8;
}

/* ------------------------------------------------------------------
   3. Headings and text
   ------------------------------------------------------------------ */
h1, .h1 { font-size: 1.75rem; line-height: 2.125rem; font-weight: 700; }
h2, .h2 { font-size: 1.375rem; line-height: 1.75rem; font-weight: 700; }
h3, .h3 { font-size: 1.125rem; line-height: 1.5rem; font-weight: 600; }

@media (min-width: 768px) {
    h1, .h1 { font-size: 2.25rem; line-height: 2.75rem; }
    h2, .h2 { font-size: 1.625rem; line-height: 2rem; }
    h3, .h3 { font-size: 1.25rem; line-height: 1.75rem; }
}

/* ------------------------------------------------------------------
   4. Links: always underlined, so they never depend on colour
   ------------------------------------------------------------------ */
a {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

/* a link that stands alone gets a 44px tap height */
.link-block {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}

/* ------------------------------------------------------------------
   5. Focus: one dark outline with a gap on every interactive element
   ------------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.nav-link:focus-visible, /* Bootstrap gives .nav-link its own blue glow; this replaces it */
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    outline: 2px solid var(--app-focus-ring);
    outline-offset: 2px;
    box-shadow: none;
}

/* ------------------------------------------------------------------
   6. Buttons: 44px high; colours per Bootstrap class
   ------------------------------------------------------------------ */
.btn {
    --bs-btn-padding-y: 0.5625rem;
    --bs-btn-border-radius: 0.5rem;
    --bs-btn-font-weight: 600;
    text-decoration: none;
}

.btn-primary {
    --bs-btn-color: var(--app-on-solid);
    --bs-btn-bg: var(--app-primary);
    --bs-btn-border-color: var(--app-primary);
    --bs-btn-hover-color: var(--app-on-solid);
    --bs-btn-hover-bg: var(--app-primary-hover);
    --bs-btn-hover-border-color: var(--app-primary-hover);
    --bs-btn-active-color: var(--app-on-solid);
    --bs-btn-active-bg: var(--app-primary-hover);
    --bs-btn-active-border-color: var(--app-primary-hover);
    --bs-btn-disabled-color: var(--app-on-solid);
    --bs-btn-disabled-bg: var(--app-primary);
    --bs-btn-disabled-border-color: var(--app-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary-text-emphasis);
    --bs-btn-bg: var(--app-surface);
    --bs-btn-border-color: var(--bs-link-color);
    --bs-btn-hover-color: var(--bs-primary-text-emphasis);
    --bs-btn-hover-bg: var(--bs-primary-bg-subtle);
    --bs-btn-hover-border-color: var(--bs-link-color);
    --bs-btn-active-color: var(--bs-primary-text-emphasis);
    --bs-btn-active-bg: var(--bs-primary-bg-subtle);
    --bs-btn-active-border-color: var(--bs-link-color);
    --bs-btn-disabled-color: var(--bs-primary-text-emphasis);
    --bs-btn-disabled-border-color: var(--bs-link-color);
}

.btn-outline-danger {
    --bs-btn-color: var(--bs-danger-text-emphasis);
    --bs-btn-bg: var(--app-surface);
    --bs-btn-border-color: var(--bs-danger-text-emphasis);
    --bs-btn-hover-color: var(--bs-danger-text-emphasis);
    --bs-btn-hover-bg: var(--bs-danger-bg-subtle);
    --bs-btn-hover-border-color: var(--bs-danger-text-emphasis);
    --bs-btn-active-color: var(--bs-danger-text-emphasis);
    --bs-btn-active-bg: var(--bs-danger-bg-subtle);
    --bs-btn-active-border-color: var(--bs-danger-text-emphasis);
    --bs-btn-disabled-color: var(--bs-danger-text-emphasis);
    --bs-btn-disabled-border-color: var(--bs-danger-text-emphasis);
}

/* ------------------------------------------------------------------
   7. Form controls: 44px high, white surface, visible border
   ------------------------------------------------------------------ */
.form-control,
.form-select {
    min-height: 2.75rem;
    background-color: var(--app-surface);
    border-color: var(--app-border-strong);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--app-border-strong);
}

.form-label {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.375rem;
}

.form-text {
    color: var(--bs-secondary-color);
}

/* forms do not stretch across wide screens */
.form-narrow {
    max-width: 35rem;
    margin-bottom: 1.5rem;
}

/* the submit button is full width on phones */
.form-submit {
    width: 100%;
}

@media (min-width: 768px) {
    .form-submit {
        width: auto;
    }
}

/* A field with an error: red border (no icon, no layout shift) and a red message */
.form-control.is-invalid,
.form-control.is-invalid:focus {
    background-image: none;
    padding-right: 0.75rem;
    border-color: var(--bs-danger-text-emphasis);
    box-shadow: inset 0 0 0 1px var(--bs-danger-text-emphasis);
}

.invalid-feedback {
    color: var(--bs-danger-text-emphasis);
}

/* Checkbox with its label: the whole row is the 44px tap target */
.check-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.75rem;
}

.form-check-input {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0;
    background-color: var(--app-surface);
    border-color: var(--app-border-strong);
}

.form-check-input:checked {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
}

.form-check-input.is-invalid {
    border-color: var(--bs-danger-text-emphasis);
}

/* ------------------------------------------------------------------
   8. Cards and alerts
   ------------------------------------------------------------------ */
.card {
    --bs-card-bg: var(--app-surface);
    --bs-card-border-color: var(--bs-border-color);
    --bs-card-border-radius: 0.75rem;
    --bs-card-inner-border-radius: calc(0.75rem - 1px);
}

.alert {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    --bs-alert-border-radius: 0.5rem;
}

.alerts {
    padding-top: 1rem;
}

.alert a {
    color: inherit; /* links in a message keep the message colour; the underline marks them */
}

.alert-list {
    margin: 0.25rem 0 0;
    padding-left: 1.25rem;
}

.icon {
    flex: none;
}

/* ------------------------------------------------------------------
   9. Site header and navigation
   ------------------------------------------------------------------ */
.skip-link {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 20;
    padding: 0.625rem 1rem;
    background: var(--app-surface);
    border-radius: 0.5rem;
    font-weight: 600;
}

.site-header {
    position: relative; /* the open phone menu is placed below it */
    background: var(--app-surface);
    border-bottom: 1px solid var(--bs-border-color);
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    gap: 0.625rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--app-heading);
    text-decoration: none; /* a long name wraps instead of pushing the menu button out */
}

.site-brand:hover,
.site-brand:focus {
    color: var(--app-heading);
}

.site-brand-logo {
    flex: none;
    width: auto;
    height: 2.5rem;
}

/* dark theme: the logo sits on a light tile, so its purple stays visible (like a stamp) */
[data-bs-theme="dark"] .site-brand-logo {
    padding: 0.25rem 0.375rem;
    background: #f7f4fd;
    border-radius: 0.5rem;
}

.nav-list {
    list-style: none;
    margin-top: 0;
    margin-bottom: 0;
}

.nav-link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2.75rem;
    padding: 0 0.75rem;
    border: 0;
    border-radius: 0.5rem;
    background: none;
    color: var(--bs-body-color);
    text-decoration: none;
    text-align: left;
}

.nav-link:hover,
.nav-link:focus {
    color: var(--bs-body-color);
    background: var(--bs-tertiary-bg);
}

.nav-link[aria-current="page"] {
    color: var(--bs-primary-text-emphasis);
    background: var(--bs-primary-bg-subtle);
    font-weight: 600;
}

/* Desktop bar, shown from 1200px (admins: from 1400px, their menu has more entries) */
.nav-bar {
    flex: 1;
}

.nav-bar .nav-list {
    display: flex;
    align-items: center;
    padding: 0;
}

.nav-bar .nav-link {
    width: auto;
    padding: 0 0.5rem; /* Poppins is wide: the German admin bar must fit in 1320 px */
    font-size: 0.9375rem;
    white-space: nowrap;
}

/* the admin bar has many entries: between 1200 and 1400 px the logo stands alone, without the name */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .nav-many .site-brand > span {
        position: absolute; /* still read by screen readers */
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* next to the desktop bar the name stays on one line (on phones it may wrap) */
@media (min-width: 1200px) {
    .site-header-inner > .site-brand {
        flex: none;
    }
}

.nav-bar .nav-link[aria-current="page"] {
    box-shadow: inset 0 -3px 0 var(--app-nav-marker); /* bar at the bottom, in the brand red */
}

.nav-bar .nav-register {
    padding-left: 0.5rem;
}

.nav-bar .nav-push {
    margin-left: auto; /* this entry and the ones after it move to the right */
}

/* ------------------------------------------------------------------
   10. Page layout, hero band, empty state, footer
   ------------------------------------------------------------------ */
/* 16px side padding on phones (Bootstrap's default is 12px) */
.container {
    --bs-gutter-x: 2rem;
}

/* the footer stays at the bottom of the window on short pages */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

.page {
    padding-top: 1.5rem;
    padding-bottom: 3rem;
}

.page h1 {
    margin-bottom: 1.5rem;
}

.page-section {
    margin-bottom: 3rem;
    max-width: 40rem;
}

.hero {
    background: var(--app-hero-bg);
    padding: 1.5rem 0;
}

/* a key word on a lavender block, as on deutschfuraupairs.com */
.text-highlight {
    padding: 0 0.25em;
    background: var(--app-highlight);
    border-radius: 0.375rem;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* the five logo colours as short dashes (decoration, hidden from screen readers) */
.brand-dash {
    display: flex;
    gap: 0.375rem;
    margin: 0 0 1rem;
}

.brand-dash span {
    width: 1.75rem;
    height: 0.3125rem;
    border-radius: 1rem;
}

.brand-dash span:nth-child(1) { background: var(--app-brand-blue); }
.brand-dash span:nth-child(2) { background: var(--app-brand-purple); }
.brand-dash span:nth-child(3) { background: var(--app-brand-red); }
.brand-dash span:nth-child(4) { background: var(--app-brand-orange); }
.brand-dash span:nth-child(5) { background: var(--app-brand-yellow); }

/* the purple dash would vanish on the dark page */
[data-bs-theme="dark"] .brand-dash span:nth-child(2) { background: var(--app-heading); }

.hero-text {
    max-width: 35rem;
}

.hero .btn {
    width: 100%; /* full width on phones */
}

@media (min-width: 768px) {
    .hero {
        padding: 3rem 0;
    }

    .hero .btn {
        width: auto;
    }
}

.empty-state {
    max-width: 30rem;
    margin: 0 auto;
    text-align: center;
}

.empty-state .card-body {
    padding: 2rem 1rem;
}

/* decorative round icon in the accent colour */
.empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 0.75rem;
    border-radius: 50%;
    background: var(--app-accent-bg);
    color: var(--app-accent-text);
    font-weight: 600;
}

.site-footer {
    background: var(--bs-tertiary-bg);
    padding: 1rem 0;
}

.site-footer-links {
    margin: 0;
}

.site-footer-note {
    margin: 0;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

@media (min-width: 768px) {
    .site-footer-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .site-footer-links {
        display: flex;
        gap: 1.5rem;
    }
}

/* ------------------------------------------------------------------
   11. Text helpers on pages
   ------------------------------------------------------------------ */
.page-intro {
    color: var(--bs-secondary-color);
    max-width: 40rem;
}

.page h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.page-section h2 {
    margin-top: 0;
}

.page-section-wide {
    max-width: none;
}

.result-count {
    margin: 1.5rem 0 1rem;
    font-weight: 600;
}

.filter-bar {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------
   12. Badges: course level (solid) and status (tinted)
   ------------------------------------------------------------------ */
.badge {
    --bs-badge-font-size: 0.75rem;
    --bs-badge-font-weight: 600;
    --bs-badge-padding-x: 0.625rem;
    --bs-badge-padding-y: 0.25rem;
    line-height: 1rem;
}

.level-badge {
    background: var(--bs-secondary-color); /* a level without its own colour */
    color: var(--app-on-solid);
}

.level-badge.level-a1 { background: var(--app-level-a1); }
.level-badge.level-a2 { background: var(--app-level-a2); }
.level-badge.level-b1 { background: var(--app-level-b1); }

/* ------------------------------------------------------------------
   13. Course card: level stripe at the top, whole card is the link
   ------------------------------------------------------------------ */
.course-card {
    --card-level: var(--bs-secondary-color);
    box-shadow: inset 0 4px 0 var(--card-level); /* a border-top would curve with the corners */
}

.course-card.level-a1 { --card-level: var(--app-level-a1); }
.course-card.level-a2 { --card-level: var(--app-level-a2); }
.course-card.level-b1 { --card-level: var(--app-level-b1); }

.course-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem 1rem 1rem; /* 4px more at the top for the stripe */
}

.course-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.course-card-lessons {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.course-card-title,
.page .course-card-title { /* .page h2 would add 2rem above a card title written as h2 */
    margin: 0;
}

.course-card-title a {
    color: inherit;
    text-decoration: none;
}

.course-card-text {
    margin: 0;
    color: var(--bs-secondary-color);
}

/* the visible cue and the button sit at the bottom, so cards in a row line up */
.course-card-cue {
    margin-top: auto;
    color: var(--bs-link-color);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.course-card-button {
    margin-top: auto;
}

/* keyboard focus on the title link is shown around the whole card */
.course-card:has(.stretched-link:focus-visible) {
    outline: 2px solid var(--app-focus-ring);
    outline-offset: 2px;
}

/* only where :has() works; older browsers keep the normal ring around the title */
@supports selector(:has(a)) {
    .course-card .stretched-link:focus-visible {
        outline: none;
    }
}

.course-card:has(.stretched-link:hover) {
    background: var(--bs-tertiary-bg);
}

/* ------------------------------------------------------------------
   14. Course page header and progress
   ------------------------------------------------------------------ */
.course-header {
    display: flex;
    gap: 0.5rem;
    margin: 0.5rem 0 0.75rem;
}

.course-action {
    margin: 1.5rem 0 0.5rem;
    max-width: 35rem;
}

.course-progress {
    max-width: 35rem;
}

.course-progress-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.progress {
    --bs-progress-height: 0.625rem;
    --bs-progress-bg: var(--app-progress-track);
    --bs-progress-bar-bg: var(--app-progress-bar);
    --bs-progress-border-radius: 50rem;
}

/* ------------------------------------------------------------------
   15. Lesson rows
   ------------------------------------------------------------------ */
.lesson-list {
    display: grid;
    gap: 0.5rem;
    max-width: 40rem;
    margin-bottom: 1.5rem;
}

.lesson-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.5rem;
    padding: 0.625rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--app-surface);
    color: inherit;
    text-decoration: none;
}

a.lesson-row:hover {
    background: var(--bs-tertiary-bg);
    color: inherit;
}

.lesson-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
    font-weight: 500;
}

.lesson-marker .icon {
    width: 1rem;
    height: 1rem;
}

.lesson-row-text {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.lesson-row-title {
    font-weight: 600;
}

.lesson-row-meta {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.lesson-row-arrow {
    color: var(--bs-secondary-color);
    font-size: 1.25rem;
}

/* the lesson to continue with */
.lesson-row-current {
    border-color: var(--bs-link-color);
    box-shadow: inset 0 0 0 1px var(--bs-link-color);
}

.lesson-row-current .lesson-marker {
    background: var(--app-primary);
    color: var(--app-on-solid);
}

.lesson-row-current .lesson-row-meta {
    color: var(--bs-primary-text-emphasis);
}

.lesson-row-completed .lesson-marker {
    background: var(--app-success-solid);
    color: var(--app-on-solid);
}

.lesson-row-completed .lesson-row-meta {
    color: var(--bs-success-text-emphasis);
}

/* titles only, not a link (public course page) */
.lesson-row-locked .lesson-row-title {
    font-weight: 400;
}

/* ------------------------------------------------------------------
   16. Confirm panel (instead of a JavaScript dialog)
   ------------------------------------------------------------------ */
.confirm-panel {
    max-width: 30rem;
}

.confirm-actions {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* ------------------------------------------------------------------
   17. Pagination: compact on phones, page numbers from 768px
   ------------------------------------------------------------------ */
.pagination-nav {
    margin-top: 1.5rem;
}

.pagination {
    --bs-pagination-color: var(--bs-primary-text-emphasis);
    --bs-pagination-bg: var(--app-surface);
    --bs-pagination-border-color: var(--bs-link-color);
    --bs-pagination-border-radius: 0.5rem;
    --bs-pagination-hover-color: var(--bs-primary-text-emphasis);
    --bs-pagination-hover-bg: var(--bs-primary-bg-subtle);
    --bs-pagination-hover-border-color: var(--bs-link-color);
    --bs-pagination-focus-color: var(--bs-primary-text-emphasis);
    --bs-pagination-focus-bg: var(--bs-primary-bg-subtle);
    --bs-pagination-active-color: var(--app-on-solid);
    --bs-pagination-active-bg: var(--app-primary);
    --bs-pagination-active-border-color: var(--app-primary);
    --bs-pagination-disabled-color: var(--bs-secondary-color);
    --bs-pagination-disabled-bg: var(--bs-tertiary-bg);
    --bs-pagination-disabled-border-color: var(--bs-tertiary-bg);
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0;
}

.pagination .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

.pagination .page-item:not(:first-child) .page-link {
    margin-left: 0;
}

.pagination .page-link:focus-visible {
    outline: 2px solid var(--app-focus-ring);
    outline-offset: 2px;
    box-shadow: none;
}

.pagination-compact {
    justify-content: space-between;
    align-items: center;
}

.pagination-status {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

/* ------------------------------------------------------------------
   18. Lesson page: text, vocabulary, panels, files, finish, pager
   ------------------------------------------------------------------ */
.lesson-content {
    max-width: 65ch; /* comfortable line length */
    margin-bottom: 1.5rem;
}

/* Vocabulary list: German phrase in bold, translation below; side by side from 768px */
.vocab {
    max-width: 40rem;
    margin-bottom: 1.5rem;
    overflow: hidden; /* keeps the header inside the rounded corners */
}

.vocab-title {
    margin: 0;
    padding: 0.625rem 1rem;
    background: var(--app-accent-bg);
    color: var(--app-accent-text);
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
}

.page .vocab-title {
    margin: 0;
}

.vocab-list {
    margin: 0;
}

.vocab-entry {
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--bs-border-color);
}

.vocab-entry dt {
    font-weight: 600;
}

.vocab-entry dd {
    margin: 0;
    color: var(--bs-secondary-color);
}

@media (min-width: 768px) {
    .vocab-entry {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
}

/* A card that holds one topic of the lesson (quiz, audio, homework) */
.panel {
    max-width: 40rem;
    margin-bottom: 1rem;
}

.panel-head {
    display: flex;
    flex-wrap: wrap; /* a long status badge ("Nicht abgegeben") moves under the title on narrow phones */
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.page .panel h2 {
    margin: 0;
}

.page .panel .card-body > h2 {
    margin-bottom: 0.75rem;
}

.panel-note {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.lesson-side-section {
    margin-bottom: 1rem;
}

.page .lesson-side-section h2 {
    margin-top: 0.5rem;
}

/* Download rows: the whole row is the link */
.file-list {
    display: grid;
    gap: 0.5rem;
    max-width: 40rem;
}

.file-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--app-surface);
    text-decoration: none;
}

.file-row:hover {
    background: var(--bs-tertiary-bg);
}

.file-row-filled {
    border-color: transparent;
    background: var(--bs-tertiary-bg);
}

.file-row-filled:hover {
    border-color: var(--app-border-strong);
}

.file-row-type {
    flex: none;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    font-weight: 600;
}

.file-row-filled .file-row-type {
    background: var(--app-surface);
}

.file-row-name {
    flex: 1;
    overflow-wrap: anywhere; /* long file names wrap instead of overflowing */
}

.file-row-size {
    flex: none;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.lesson-finish {
    max-width: 40rem;
    margin-top: 1.5rem;
}

.lesson-finish-done {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--bs-success-text-emphasis);
    font-weight: 600;
}

.lesson-pager {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    max-width: 40rem;
    margin-top: 1rem;
}

/* ------------------------------------------------------------------
   19. Quiz: answer options and result rows
   ------------------------------------------------------------------ */
.quiz-form,
.quiz-summary {
    max-width: 40rem;
}

.quiz-question {
    max-width: 40rem;
    margin-bottom: 1.5rem;
}

.quiz-question legend {
    float: none; /* Bootstrap floats legends; here it is a normal heading */
    margin-bottom: 0.5rem;
    font-size: inherit;
}

.quiz-question-number {
    display: block;
    margin-bottom: 0.125rem;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.page .quiz-question h2 {
    margin: 0 0 0.5rem;
}

.quiz-options {
    display: grid;
    gap: 0.5rem;
    margin: 0;
}

/* one answer: the whole row can be tapped */
.quiz-option,
.quiz-result {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.25rem;
    padding: 0.625rem 1rem;
    border: 1px solid var(--app-border-strong);
    border-radius: 0.5rem;
    background: var(--app-surface);
}

.quiz-option {
    cursor: pointer;
}

.quiz-option:hover {
    background: var(--bs-tertiary-bg);
}

/* chosen answer and keyboard focus, without JavaScript (needs :has();
   older browsers still show the radio button itself as selected) */
.quiz-option:has(:checked) {
    background: var(--bs-primary-bg-subtle);
    border-color: var(--bs-link-color);
    box-shadow: inset 0 0 0 1px var(--bs-link-color);
}

@supports selector(:has(a)) {
    .quiz-option:has(:focus-visible) {
        outline: 2px solid var(--app-focus-ring);
        outline-offset: 2px;
    }

    .quiz-option .form-check-input:focus-visible {
        outline: none;
    }
}

/* result page: no radio buttons, a symbol and a written note instead */
.quiz-result {
    border-color: var(--bs-border-color);
}

.quiz-result-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
}

.quiz-result-marker .icon {
    width: 1rem;
    height: 1rem;
}

.quiz-result-text {
    display: flex;
    flex-direction: column;
}

.quiz-result-note {
    font-size: 0.875rem;
}

.quiz-result-plain {
    color: var(--bs-secondary-color);
}

.quiz-result-right {
    background: var(--bs-success-bg-subtle);
    border-color: var(--bs-success-text-emphasis);
    box-shadow: inset 0 0 0 1px var(--bs-success-text-emphasis);
}

.quiz-result-right .quiz-result-marker {
    background: var(--app-success-solid);
    color: var(--app-on-solid);
}

.quiz-result-right .quiz-result-note,
.quiz-result-missed .quiz-result-note {
    color: var(--bs-success-text-emphasis);
}

.quiz-result-missed {
    border-color: var(--bs-success-text-emphasis);
    box-shadow: inset 0 0 0 1px var(--bs-success-text-emphasis);
}

.quiz-result-missed .quiz-result-marker {
    border: 2px solid var(--bs-success-text-emphasis);
    color: var(--bs-success-text-emphasis);
}

.quiz-result-wrong {
    background: var(--bs-danger-bg-subtle);
    border-color: var(--bs-danger-text-emphasis);
    box-shadow: inset 0 0 0 1px var(--bs-danger-text-emphasis);
}

.quiz-result-wrong .quiz-result-marker {
    background: var(--app-danger-solid);
    color: var(--app-on-solid);
}

.quiz-result-wrong .quiz-result-note {
    color: var(--bs-danger-text-emphasis);
}

/* ------------------------------------------------------------------
   20. Homework, list cards, tables, small result lists
   ------------------------------------------------------------------ */
.homework-grade {
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.homework-feedback {
    margin-bottom: 0.75rem;
}

.panel .file-row {
    margin-bottom: 0.75rem;
}

/* One list entry as a card (phones and tablets) */
.list-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.list-card-title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
}

.list-card p {
    margin: 0;
}

.list-card-meta {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

/* Tables (from 992px): rounded frame, white surface, tinted header */
.table-wrap {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    overflow: hidden;
}

.table {
    --bs-table-bg: var(--app-surface);
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--bs-border-color);
}

.table > :not(caption) > * > * {
    padding: 0.5rem 1rem;
}

.table thead {
    --bs-table-bg: var(--bs-tertiary-bg);
    --bs-table-color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

.table thead th {
    font-weight: 500;
}

.table tbody tr:last-child > * {
    border-bottom: 0;
}

/* latest quiz results on the dashboard */
.result-list {
    display: grid;
    gap: 0.5rem;
    max-width: 40rem;
}

.result-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--app-surface);
}

/* buttons at the end of a row stay side by side and keep their size */
.result-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.result-row-actions .btn {
    flex: none;
}

.result-row a {
    flex: 1 1 12rem;
}

.result-row-score {
    font-weight: 600;
}

.result-row-date {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

/* the browser's own "Choose file" button inside the file field */
.form-control::file-selector-button {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

/* ------------------------------------------------------------------
   21. Profile: avatar (picture or initials) and forms that follow each other
   ------------------------------------------------------------------ */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border-radius: 50%;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-weight: 600;
    object-fit: cover; /* a picture that is not square is cropped, not squeezed */
}

.avatar-small  { width: 2rem; height: 2rem; font-size: 0.75rem; }
.avatar-medium { width: 3rem; height: 3rem; font-size: 1rem; }
.avatar-large  { width: 6rem; height: 6rem; font-size: 1.75rem; }

.profile-avatar {
    margin-bottom: 1rem;
}

.form-follow {
    margin-top: 0.5rem;
}

/* ------------------------------------------------------------------
   22. Admin lists and forms
   ------------------------------------------------------------------ */
/* badges and a short text in one line */
.badge-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* the buttons of one list entry: side by side, wrapping on narrow screens */
.action-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* long texts (lesson text, vocabulary) get a wider form than .form-narrow */
.form-wide {
    max-width: 45rem;
    margin-bottom: 1.5rem;
}

/* one answer of a quiz question in the admin form: text box with its "correct" tick below */
.answer-field {
    margin-top: 0.75rem;
}

/* the answers of a question in the admin list */
.answer-list {
    margin: 0;
    padding-left: 1.25rem;
}

/* the heading rules of .page would push a card title away from its badges */
.page .list-card-title {
    margin: 0;
}

/* a badge row that stands directly on the page (not in a card) keeps a distance to what follows */
.page > .badge-row {
    margin-bottom: 1rem;
}

/* the import card inside the lesson form: as wide as the form, with a distance to the save button */
.form-wide .panel {
    max-width: none;
    margin-top: 1.5rem;
}

/* facts about one entry (homework, user): label above value on phones, side by side from 768px */
.detail-list {
    display: grid;
    gap: 0 1rem;
    max-width: 35rem;
}

.detail-list dt {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.detail-list dd {
    margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
    .detail-list {
        grid-template-columns: 8rem 1fr;
    }
}

/* ------------------------------------------------------------------
   23. Admin dashboard and messages
   ------------------------------------------------------------------ */
/* Stat tile: a number with its label; the whole bordered tile is the link */
.stat-tile {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    height: 100%;
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    background: var(--app-surface);
    color: var(--bs-body-color);
    text-decoration: none;
}

.stat-tile:hover {
    border-color: var(--bs-primary);
}

.stat-tile-number {
    font-size: 2rem;
    line-height: 2.5rem;
    font-weight: 700;
}

.stat-tile-label {
    color: var(--bs-secondary-color);
}

/* long words or addresses in a message must not widen the page */
.message-text {
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------
   24. Flashcards: articles in colour, study card, deck overview, teacher tiles
   ------------------------------------------------------------------ */
/* The article is always written out; the colour only helps memory (der blue, die red, das green) */
.article {
    font-weight: 700;
}

.article-der { color: var(--app-der); }
.article-die { color: var(--app-die); }
.article-das { color: var(--app-das); }

/* A picture of a card: never cropped, on a subtle background */
.flashcard-picture {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: var(--app-picture-bg);
}

.flashcard-picture-missing {
    background: var(--bs-tertiary-bg);
}

.flashcard-picture-missing {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    text-align: center;
    color: var(--bs-secondary-color);
}

/* Study page: one card in a narrow column, centred */
.study {
    max-width: 32rem;
    margin: 0 auto;
}

.study-head {
    margin-bottom: 1rem;
}

.page .study-head h1 {
    margin-bottom: 0.25rem;
}

.study-course,
.study-count {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    color: var(--bs-secondary-color);
}

.study-course-title {
    color: var(--bs-body-color);
}

.study-figure {
    margin: 0;
}

.study-figure .flashcard-picture {
    border-radius: calc(0.75rem - 1px) calc(0.75rem - 1px) 0 0;
}

.study-credit {
    padding: 0.25rem 1rem 0;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.study-question {
    margin-bottom: 0.75rem;
    font-weight: 600;
    text-align: center;
}

.study-keys {
    display: none;
}

@media (min-width: 992px) {
    .study-keys:not([hidden]) {
        display: block;
        margin: 0.75rem 0 0;
        font-size: 0.875rem;
        text-align: center;
        color: var(--bs-secondary-color);
    }
}

/* der / die / das: three equal buttons in the article's colours */
.article-choice {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* equal columns even if a label is wide */
    gap: 0.5rem;
}

.article-button {
    --bs-btn-padding-y: 0.625rem;
    --bs-btn-font-size: 1.25rem;
    --bs-btn-font-weight: 700;
    --bs-btn-color: var(--article-color);
    --bs-btn-bg: var(--article-bg);
    --bs-btn-border-color: var(--article-color);
    --bs-btn-hover-color: var(--article-color);
    --bs-btn-hover-bg: var(--article-bg);
    --bs-btn-hover-border-color: var(--article-color);
    --bs-btn-active-color: var(--article-color);
    --bs-btn-active-bg: var(--article-bg);
    --bs-btn-active-border-color: var(--article-color);
    --bs-btn-disabled-color: var(--article-color);
    --bs-btn-disabled-bg: var(--article-bg);
    --bs-btn-disabled-border-color: var(--article-color);
    --bs-btn-disabled-opacity: 1;
    min-height: 3.25rem;
}

.article-button:hover {
    box-shadow: inset 0 0 0 1px var(--article-color);
}

.article-button-der { --article-color: var(--app-der); --article-bg: var(--app-der-bg); }
.article-button-die { --article-color: var(--app-die); --article-bg: var(--app-die-bg); }
.article-button-das { --article-color: var(--app-das); --article-bg: var(--app-das-bg); }

/* after answering: the right article gets a thick border, a wrong choice is crossed out */
.article-button.is-answer {
    box-shadow: inset 0 0 0 2px var(--article-color);
}

.article-button.is-chosen {
    --bs-btn-disabled-bg: var(--app-surface);
    --bs-btn-disabled-color: var(--bs-secondary-color);
    --bs-btn-disabled-border-color: var(--app-border-strong);
    border-style: dashed;
    text-decoration: line-through;
}

.article-button:disabled:not(.is-answer):not(.is-chosen) {
    --bs-btn-disabled-bg: var(--app-surface);
}

/* the back of the card */
.study-back {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
    text-align: center;
}

.study-feedback {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.study-feedback-right .icon {
    color: var(--bs-success-text-emphasis);
}

.study-feedback-wrong .icon {
    color: var(--bs-info-text-emphasis);
}

.page .study-answer {
    margin: 0.25rem 0;
    font-size: 2rem;
    line-height: 2.5rem;
    overflow-wrap: anywhere;
}

.study-plural {
    margin-bottom: 0.25rem;
}

.study-translation {
    margin-bottom: 0;
    color: var(--bs-secondary-color);
}

.study-rate {
    margin-top: 1rem;
}

.study-rate-label {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

/* Again / Hard / Good / Easy: two per row on phones, four from 768px */
.rating-choice {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .rating-choice {
        grid-template-columns: repeat(4, 1fr);
    }
}

.rating-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    --bs-btn-padding-y: 0.375rem;
    line-height: 1.25rem;
}

.rating-interval {
    font-size: 0.875rem;
    font-weight: 400;
}

/* Deck numbers on the overview and the course page */
.deck-today {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    margin-bottom: 0.25rem;
}

.deck-today .icon {
    color: var(--bs-success-text-emphasis);
}

.deck-detail {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.deck-panel {
    max-width: 40rem;
    margin-bottom: 2rem;
}

/* Teacher: groups with their cards as small tiles */
.flashcard-group {
    margin-bottom: 2.5rem;
}

.flashcard-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.page .flashcard-group-head h2 {
    margin: 0 0 0.5rem;
}

.flashcard-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.75rem;
    margin: 0;
}

.flashcard-tile {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    background: var(--app-surface);
}

.flashcard-tile-picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    border-radius: calc(0.75rem - 1px) calc(0.75rem - 1px) 0 0;
    background: var(--app-picture-bg);
}

.flashcard-tile-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem;
}

.flashcard-tile-body .action-list {
    margin-top: auto;
    padding-top: 0.25rem;
}

.flashcard-tile-noun {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.flashcard-tile .list-card-meta {
    margin: 0;
    overflow-wrap: anywhere;
}

.flashcard-edit-picture {
    max-width: 20rem;
    margin-bottom: 1rem;
}

.flashcard-edit-picture .flashcard-picture {
    border-radius: 0.75rem;
}

/* Teacher: the article as three radio rows in its colour */
.article-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem; /* fits three in a row at 320 px */
    border: 1px solid var(--app-border-strong);
    border-radius: 0.5rem;
    background: var(--app-surface);
    font-weight: 700;
    cursor: pointer;
}

.article-option-der span { color: var(--app-der); }
.article-option-die span { color: var(--app-die); }
.article-option-das span { color: var(--app-das); }

.article-option:has(:checked) {
    background: var(--bs-primary-bg-subtle);
    border-color: var(--bs-link-color);
    box-shadow: inset 0 0 0 1px var(--bs-link-color);
}

.flashcard-number {
    max-width: 8rem;
}

.flashcard-date {
    max-width: 12rem;
}

/* ------------------------------------------------------------------
   25. Word library and picture search (teacher)
   ------------------------------------------------------------------ */
.library-panel {
    max-width: none;
    margin-bottom: 1.5rem;
}

/* words to pick: a checkbox, a small picture and the noun; the whole row can be tapped */
.library-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.5rem;
    margin: 0.5rem 0 0;
}

.library-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.5rem;
    height: 100%;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--app-border-strong);
    border-radius: 0.5rem;
    background: var(--app-surface);
    cursor: pointer;
}

.library-option:hover {
    background: var(--bs-tertiary-bg);
}

.library-option img {
    flex: none;
    width: 3.5rem;
    height: 2.625rem;
    object-fit: contain;
    border-radius: 0.25rem;
    background: var(--bs-tertiary-bg);
}

.library-option-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: anywhere;
}

.library-group {
    max-width: 20rem;
}

/* Pixabay results: pictures to choose with a radio button */
.picture-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 0.5rem;
}

.picture-option {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.5rem;
    height: 100%;
    padding: 0.5rem;
    border: 1px solid var(--app-border-strong);
    border-radius: 0.5rem;
    background: var(--app-surface);
    cursor: pointer;
}

.picture-option img {
    grid-column: 1 / -1;
    order: -1;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    border-radius: 0.25rem;
    background: #ffffff; /* transparent drawings are stored on white, so they are shown on white here too */
}

.picture-option-credit {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    overflow-wrap: anywhere;
}

/* chosen word or picture, and keyboard focus (needs :has(); older browsers still show the box itself) */
.library-option:has(:checked),
.picture-option:has(:checked) {
    background: var(--bs-primary-bg-subtle);
    border-color: var(--bs-link-color);
    box-shadow: inset 0 0 0 1px var(--bs-link-color);
}

@supports selector(:has(a)) {
    .library-option:has(:focus-visible),
    .picture-option:has(:focus-visible),
    .article-option:has(:focus-visible) {
        outline: 2px solid var(--app-focus-ring);
        outline-offset: 2px;
    }

    .library-option .form-check-input:focus-visible,
    .picture-option .form-check-input:focus-visible,
    .article-option .form-check-input:focus-visible {
        outline: none;
    }
}

.picture-source {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.picture-upload {
    margin-top: 2rem;
}

.word-usage {
    max-width: 45rem;
}

/* ------------------------------------------------------------------
   26. Flashcard decks (teacher): deck list, courses of a deck, numbered groups
   ------------------------------------------------------------------ */
.deck-start {
    margin-bottom: 2rem;
}

.deck-card .badge-row {
    margin: 0.25rem 0 0.5rem;
}

.deck-card-course {
    font-size: 0.875rem;
}

/* the courses a deck is assigned to, with start date and rhythm */
.deck-courses {
    max-width: none;
    margin-bottom: 2rem;
}

.assignment-list {
    margin: 0 0 1.5rem;
}

.assignment-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.assignment-row p {
    margin: 0.25rem 0 0;
}

.assign-form {
    padding-top: 0.5rem;
}

.page .assign-form h3 {
    margin-bottom: 0.75rem;
}

.page .deck-section-title {
    margin-bottom: 1rem;
}

/* "1." in front of a group name: the place in the deck decides when it opens */
.group-number {
    color: var(--bs-secondary-color);
}

/* ------------------------------------------------------------------
   27. Pronunciation: player on the study card and on the word page
   ------------------------------------------------------------------ */
.study-audio {
    display: flex;
    justify-content: center;
    margin: 0.5rem 0 0.75rem;
}

.study-audio audio {
    width: 100%;
    max-width: 20rem;
}

.study-listen .icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.25rem;
    vertical-align: -0.2rem;
}

.word-audio {
    margin-bottom: 1.5rem;
}

.word-audio audio {
    display: block;
    width: 100%;
    max-width: 20rem;
    margin-bottom: 0.75rem;
}

/* ------------------------------------------------------------------
   28. Phrases (study card, word page) and the CSV import of a deck
   ------------------------------------------------------------------ */
.study-phrases {
    max-width: 24rem;
    margin: 0.75rem auto 0;
    padding: 0;
    text-align: left;
}

.study-phrase {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.75rem;
    padding: 0.25rem 0;
    border-top: 1px solid var(--bs-border-color);
}

.study-phrase-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* the phrase in the student's language, below the German one */
.study-phrase-translation {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.study-phrase audio {
    width: 9rem;
    height: 2rem;
    flex: none;
}

.study-phrase-listen {
    flex: none;
    width: 2.75rem;
    padding-left: 0;
    padding-right: 0;
}

.study-phrase-listen .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.word-phrases {
    margin: 0 0 1rem;
    padding: 0;
}

.word-phrases li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    margin-bottom: 0.5rem;
}

.word-phrases audio {
    width: 12rem;
    height: 2rem;
}

.import-summary,
.import-actions {
    margin-bottom: 1.5rem;
}

.import-group {
    margin-bottom: 2rem;
}

.import-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.75rem;
    margin: 0;
}

.import-row {
    padding: 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    background: var(--app-surface);
}

.import-row-skip {
    border-style: dashed;
    color: var(--bs-secondary-color);
}

.import-row-word {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
}

.import-line {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.import-phrases {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
    font-size: 0.875rem;
}

.import-status {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.import-note {
    display: flex;
    gap: 0.375rem;
    margin: 0.375rem 0 0;
    font-size: 0.875rem;
    color: var(--bs-warning-text-emphasis);
}

.import-note .icon {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
}

.import-progress {
    max-width: 40rem;
}

.import-progress .progress {
    margin: 1rem 0;
}

/* the phrase rows on the word page: German on top, English and Spanish below (side by side from 768px) */
.phrase-row {
    margin-bottom: 1rem;
    padding: 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--app-surface);
}

.phrase-translations {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

@media (min-width: 768px) {
    .phrase-translations {
        grid-template-columns: 1fr 1fr;
    }
}

.phrase-fields legend {
    float: none;
}

/* ------------------------------------------------------------------
   29. Language switch in the navigation: ES · DE · EN
   ------------------------------------------------------------------ */
.language-switch {
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.language-option {
    min-width: 2.75rem;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.language-option[aria-current="true"] {
    color: var(--bs-primary-text-emphasis);
    background: var(--bs-primary-bg-subtle);
    border-radius: 0.5rem;
    opacity: 1;
}

/* ------------------------------------------------------------------
   30. Phones and tablets as an app: tab bar at the bottom, study card on one screen
   ------------------------------------------------------------------ */
/* Tab bar (templates/tab_bar.php): shown below 1200px (admins: below 1400px), like the desktop bar above it */
.tab-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    padding-bottom: env(safe-area-inset-bottom); /* phones with a home bar */
    background: var(--app-surface);
    border-top: 1px solid var(--bs-border-color);
}

.tab-list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    max-width: 34rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.tab-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    width: 100%;
    height: 3.5rem;
    padding: 0 0.125rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.tab-link .tab-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tab-link:hover,
.tab-link:focus {
    color: var(--bs-link-color);
}

/* the current tab: brand purple with the red marker on top */
.tab-link[aria-current="page"],
.tab-link.is-current,
.tab-more[open] > .tab-link {
    color: var(--bs-link-color);
    box-shadow: inset 0 3px 0 var(--app-nav-marker);
}

/* while "More" is open it is the only marked tab */
.tab-list:has(.tab-more[open]) .tab-link[aria-current="page"] {
    color: var(--bs-secondary-color);
    box-shadow: none;
}

.tab-more > summary {
    list-style: none; /* hide the triangle */
}

.tab-more > summary::-webkit-details-marker {
    display: none;
}

.tab-more .when-open,
.tab-more .when-closed {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
}

.tab-more[open] .when-closed,
.tab-more:not([open]) .when-open {
    display: none;
}

/* the page behind the open sheet is dimmed; a tap on it closes the sheet (public/js/tab-bar.js) */
.tab-more[open]::before {
    content: "";
    position: fixed;
    inset: 0 0 calc(3.5rem + 1px + env(safe-area-inset-bottom));
    background: rgba(21, 18, 42, 0.4);
}

/* "More": a sheet that opens above the bar with the remaining entries */
.tab-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(3.5rem + 1px + env(safe-area-inset-bottom));
    max-height: calc(100vh - 8rem);
    max-height: calc(100dvh - 8rem);
    overflow-y: auto;
    background: var(--app-surface);
    border-top: 1px solid var(--bs-border-color);
    border-radius: 1rem 1rem 0 0;
    box-shadow: 0 -0.5rem 1.5rem rgba(var(--bs-body-color-rgb), 0.12);
}

.tab-sheet .nav-list {
    display: grid;
    gap: 0.125rem;
    max-width: 34rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.tab-sheet .nav-separated {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--bs-border-color);
}

.tab-sheet .nav-register {
    padding-top: 0.5rem;
}

.tab-sheet .nav-register .btn {
    width: 100%;
}

/* room for the bar below the page (the body class says from which width the desktop bar takes over) */
@media (max-width: 1199.98px) {
    .has-tab-bar-xl {
        padding-bottom: calc(3.5rem + 1px + env(safe-area-inset-bottom));
    }
}


/* Study page on phones: header, card and tab bar fill exactly one screen. The picture takes the room
   that is left, the article and rating buttons always sit at the bottom of the card, and only the
   answer details scroll if a card has many phrases. */
@media (max-width: 767.98px) {
    .screen-study {
        height: 100vh;
        height: 100dvh; /* follows the browser's address bar */
        min-height: 0;
        overflow: hidden;
    }

    .screen-study .site-footer {
        display: none; /* its links are in the "More" sheet */
    }

    .screen-study main {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .screen-study .page {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        overflow-y: auto; /* safety net: e.g. a message above the card */
    }

    .screen-study .study {
        flex: 1;
        width: 100%;
        min-height: 0;
    }

    /* one line above the card: back link on the left (never cut), the status on the right */
    .screen-study .study {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        column-gap: 0.75rem;
    }

    .screen-study .study > .link-block {
        margin-bottom: 0.375rem;
        font-size: 0.875rem;
        white-space: nowrap;
    }

    .screen-study .study-head {
        display: contents; /* its parts take their places in the grid of .study */
    }

    .screen-study .study-head h1,
    .screen-study .study-course,
    .screen-study .study-count-note {
        position: absolute; /* still read by screen readers */
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .screen-study .study-count {
        display: block;
        margin: 0;
        overflow: hidden;
        font-size: 0.875rem;
        text-align: right;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .screen-study .study-card,
    .screen-study .study-done {
        grid-column: 1 / -1;
    }

    .screen-study .study-card,
    .screen-study .study-done {
        flex: 1;
        min-height: 0;
    }

    .screen-study .study-card {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .screen-study .study-figure {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        min-height: 6rem;
    }

    .screen-study .study-figure .flashcard-picture {
        flex: 1;
        min-height: 0;
        aspect-ratio: auto;
    }

    .screen-study .study-credit {
        padding: 0.125rem 0.75rem 0;
    }

    .screen-study .study-card > .card-body {
        flex: 0 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: 0.5rem 0.75rem 0.75rem;
    }

    .screen-study .study-question {
        margin-bottom: 0.5rem;
    }

    /* after the answer the article buttons leave: the answer itself shows the article in its colour */
    .screen-study .study-card:has(.study-back:not([hidden])) .study-front {
        display: none;
    }

    .screen-study .study-back:not([hidden]) {
        display: flex;
        flex-direction: column;
        min-height: 0;
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

    /* the answer details: every part on its own line, only the noun and its Listen button share one */
    .screen-study .study-info {
        flex: 0 1 auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        column-gap: 0.625rem;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .screen-study .study-info > * {
        flex: 0 0 100%;
    }

    .screen-study .study-info > .study-answer,
    .screen-study .study-info > .study-audio {
        flex: 0 1 auto;
    }

    /* without JavaScript the browser's own player is shown: it needs the full line */
    .screen-study .study-info > .study-audio:has(audio:not([hidden])) {
        flex-basis: 100%;
    }

    .screen-study .study-feedback {
        margin-bottom: 0.125rem;
        font-size: 0.9375rem;
    }

    .page .screen-study .study-answer,
    .screen-study .page .study-answer {
        margin: 0;
        font-size: 1.625rem;
        line-height: 2rem;
    }

    .screen-study .study-audio {
        margin: 0.125rem 0;
    }

    /* Listen as a round icon button next to the noun (its text stays for screen readers) */
    .screen-study .study-listen {
        --bs-btn-padding-x: 0;
        --bs-btn-padding-y: 0;
        width: 2.75rem;
        min-height: 2.75rem;
        border-radius: 50%;
        font-size: 0;
    }

    .screen-study .study-plural,
    .screen-study .study-translation {
        margin-bottom: 0;
        font-size: 0.9375rem;
    }

    .screen-study .study-phrases {
        margin-top: 0.375rem;
        margin-bottom: 0;
    }

    .screen-study .study-phrase {
        min-height: 2.25rem;
        padding: 0.125rem 0;
        font-size: 0.9375rem;
    }

    .screen-study .study-info .panel-note {
        display: none;
    }

    /* rating: always visible at the bottom of the card, four in a row */
    .screen-study .study-rate,
    .screen-study .study-action {
        flex: none;
        margin-top: 0.625rem;
    }

    .screen-study .study-rate-right .study-rate-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .screen-study .rating-choice {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.375rem;
    }

    .screen-study .rating-button {
        --bs-btn-padding-x: 0.125rem;
        --bs-btn-font-size: 0.8125rem;
        min-height: 3rem;
    }

    .screen-study .rating-interval {
        font-size: 0.75rem;
    }

    .screen-study .study-rate-wrong .study-rate-label {
        margin-bottom: 0.375rem;
    }
}

/* ------------------------------------------------------------------
   31. Finish: the parts the browser draws, numbers, line breaks, motion
   ------------------------------------------------------------------ */
/* selection, text cursor, native controls and scrollbars in the brand colours of the theme */
::selection {
    background: var(--app-highlight);
    color: var(--bs-emphasis-color);
}

:root {
    caret-color: var(--bs-link-color);
    accent-color: var(--app-primary);
    scrollbar-color: var(--app-border-strong) transparent;
}

.tab-sheet,
.study-info {
    scrollbar-width: thin;
}

/* headings break into even lines, paragraphs avoid a lonely last word */
h1, h2, h3, .site-brand {
    text-wrap: balance;
}

p, li, dd, .form-text {
    text-wrap: pretty;
}

/* numbers that are compared or change in place keep their width */
table,
.result-row-score,
.result-row-date,
.rating-interval,
.study-count,
.stat-tile,
.progress-label,
.course-card-lessons {
    font-variant-numeric: tabular-nums;
}

/* the icon of an empty state sits in the accent circle */
.empty-state-icon .icon {
    width: 1.5rem;
    height: 1.5rem;
}

/* colour changes are eased, not switched */
.nav-link,
.tab-link,
.link-block,
.course-card {
    transition: color 0.15s ease-out, background-color 0.15s ease-out, border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}

/* one movement, used twice: the answer of a flashcard and the "More" sheet rise into place */
@keyframes rise-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .study-back:not([hidden]) .study-info,
    .tab-more[open] > .tab-sheet {
        animation: rise-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-link,
    .tab-link,
    .link-block,
    .course-card {
        transition: none;
    }
}

/* ---------------------------------------------------------------------
   32. Today, streak and progress (student home, Cards tab, teacher view)
   --------------------------------------------------------------------- */

/* the first card on the student home: one next step, the streak and today's cards */
.today-card {
    margin-bottom: 2rem;
    border-color: var(--app-border-strong);
}

.today-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1rem 1rem;
}

.today-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.today-title,
.page .today-title {
    margin: 0;
    font-size: 1.375rem;
}

/* days in a row: a warm chip; the flame fills in once today counts */
.today-streak {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    padding: 0.25rem 0.75rem 0.25rem 0.5rem;
    border-radius: 999px;
    background: var(--app-accent-bg);
    color: var(--app-accent-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.today-streak-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.today-streak.is-today .today-streak-icon svg {
    fill: var(--app-accent-line);
    stroke: var(--app-accent-line);
}

.today-goal-label {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin-bottom: 0.375rem;
    font-variant-numeric: tabular-nums;
}

.today-goal-done {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--bs-success-text-emphasis);
    font-weight: 600;
}

.today-goal-done svg {
    width: 1.125rem;
    height: 1.125rem;
}

.today-goal-bar {
    height: 0.625rem;
}

.today-card-done .today-goal-bar .progress-bar {
    background-color: var(--app-success-solid);
}

/* the one big button: icon, action and where it leads */
.today-action {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.5rem;
    padding: 0.625rem 1rem;
    text-align: left;
}

.today-action-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.today-action-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.today-action-text small {
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.today-next,
.today-message,
.today-note {
    margin: 0;
}

.today-note {
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

.today-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-variant-numeric: tabular-nums;
}

.today-stats li {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.today-stats svg {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--app-heading);
}

/* Cards tab: streak and words known above the decks */
.cards-stats {
    margin-bottom: 1.5rem;
}

.deck-today-done {
    color: var(--bs-success-text-emphasis);
}

/* phones under 360 px (iPhone SE): the five tab labels and the study count must fit without cutting */
@media (max-width: 359.98px) {
    .tab-link {
        font-size: 0.6875rem;
        letter-spacing: -0.01em;
    }

    .screen-study .study-count {
        white-space: normal;
    }
}

/* teacher view: who studied when */
.activity-quiet {
    color: var(--bs-danger-text-emphasis);
    font-weight: 600;
}

/* ---------------------------------------------------------------------
   33. Study page: feedback, busy state, done-for-today card
   --------------------------------------------------------------------- */

/* done for today: a progress card worth a screenshot (streak, words known, today, tomorrow) */
.study-done-day {
    border-color: var(--app-border-strong);
    text-align: center;
}

.study-done-day .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
    padding: 1.5rem 1rem 1rem;
}

.study-done-day .card-body > * {
    margin: 0;
}

.page .study-done-title {
    font-size: 1.375rem;
    line-height: 1.3;
}

.study-streak {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.study-streak-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--app-accent-bg);
    color: var(--app-accent-text);
}

.study-streak-icon svg {
    width: 2rem;
    height: 2rem;
    fill: var(--app-accent-line);
    stroke: var(--app-accent-line);
}

.study-streak-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
}

.study-streak-number {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--app-heading);
    font-variant-numeric: tabular-nums;
}

.study-streak-note,
.study-done-note {
    max-width: 24rem;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

/* three numbers side by side: icon, number, what it counts */
.study-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    width: 100%;
    padding: 0;
    list-style: none;
}

.study-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.625rem 0.25rem;
    border-radius: 0.5rem;
    background: var(--app-hero-bg);
    border: 1px solid var(--bs-border-color);
    font-size: 0.875rem;
    line-height: 1.25;
    overflow-wrap: break-word;
    hyphens: auto; /* long German words break at a syllable ("beantwor-tet"), not anywhere */
}

.study-stat svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--app-heading);
}

.study-stat-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--app-heading);
    font-variant-numeric: tabular-nums;
}

.study-done-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 22rem;
}

.study-done-actions .btn-primary {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.25;
}

.study-done-lesson {
    max-width: 100%;
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* phones: the card fits the screen; tighter spacing, and the card body scrolls only as a safety net */
@media (max-width: 767.98px) {
    .screen-study .study-done-day {
        display: flex;
        flex-direction: column;
        align-self: start; /* as high as its content on tall phones, at most the room there is */
        max-height: 100%;
        overflow: hidden;
    }

    .screen-study .study-done-day .card-body {
        flex: 1 1 auto;
        gap: 0.625rem;
        min-height: 0;
        padding: 1rem 0.75rem 0.75rem;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .page .screen-study .study-done-title,
    .screen-study .page .study-done-title {
        font-size: 1.25rem;
    }

    .screen-study .study-stat {
        padding: 0.5rem 0.25rem;
        font-size: 0.8125rem; /* three columns at 320 px; still at least 13 px */
    }

    /* short phones (e.g. 320 × 568): a smaller streak and no note about the next group */
    @media (max-height: 600px) {
        .screen-study .study-done-day .study-done-note {
            display: none;
        }

        .screen-study .study-done-day .card-body {
            gap: 0.5rem;
            padding-top: 0.75rem;
        }

        .page .screen-study .study-done-title,
        .screen-study .page .study-done-title {
            font-size: 1.125rem;
        }

        .screen-study .study-streak-icon {
            width: 2.75rem;
            height: 2.75rem;
        }

        .screen-study .study-streak-icon svg {
            width: 1.5rem;
            height: 1.5rem;
        }

        .screen-study .study-streak-number {
            font-size: 2.25rem;
        }
    }

    /* larger small texts on phones (the picture shrinks a little instead) */
    .screen-study .study-credit {
        font-size: 0.875rem;
    }

    .screen-study .rating-interval {
        font-size: 0.875rem;
    }

    .screen-study .rating-button {
        line-height: 1.125rem;
    }
}

.study-credit {
    font-size: 0.875rem;
    text-align: center; /* under the centred picture */
}

/* while a rating is being sent: a small spinner in place of the pressed button's text, nothing moves */
.study-rate [aria-busy="true"] {
    position: relative;
}

.study-rate [aria-busy="true"] > * {
    visibility: hidden;
}

.study-rate .form-submit[aria-busy="true"] {
    color: transparent;
}

.study-rate [aria-busy="true"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.25rem;
    height: 1.25rem;
    margin: -0.625rem 0 0 -0.625rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
}

.study-rate .btn-primary[aria-busy="true"]::after,
.study-rate .form-submit[aria-busy="true"]::after {
    border-color: var(--app-on-solid);
    border-right-color: transparent;
}

/* The picture: the box hugs it, so there are no bars beside a square picture (the drawn pictures'
   blush varies a little from picture to picture, so a box in one blush colour always showed). */
.study-picture {
    padding: 0.75rem 0.75rem 0;
}

.study-picture .flashcard-picture {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 22rem;
    aspect-ratio: auto;
    margin: 0 auto;
    border-radius: 0.5rem;
}

.study-picture .flashcard-picture-missing {
    width: 100%;
    aspect-ratio: 4 / 3;
}

@media (max-width: 767.98px) {
    /* the picture takes the room that is left and is as large as fits, centred */
    .screen-study .study-figure {
        justify-content: center; /* on tall phones picture and credit stay together in the middle */
    }

    .screen-study .study-picture {
        position: relative;
        flex: 0 1 auto;
        aspect-ratio: 1 / 1; /* as high as wide at most; shrinks when the screen is short */
        min-height: 0;
        padding: 0;
        margin: 0.5rem 0.5rem 0;
    }

    .screen-study .study-picture .flashcard-picture {
        position: absolute;
        inset: 0;
        max-height: 100%;
        margin: auto;
    }

    .screen-study .study-picture .flashcard-picture-missing {
        height: 100%;
    }
}

/* a correct article pops, a wrong one shakes a little (only transforms: nothing else moves) */
@keyframes study-pop {
    50% { transform: scale(1.08); }
}

@keyframes study-shake {
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

@keyframes study-spin {
    to { transform: rotate(360deg); }
}

@keyframes study-done-in {
    from {
        opacity: 0;
        transform: translateY(0.75rem) scale(0.98);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .study-card.just-right .article-button.is-answer,
    .study-card.just-right .study-feedback-right .icon {
        animation: study-pop 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .study-card.just-wrong .article-button.is-chosen,
    .study-card.just-wrong .study-feedback-wrong > * {
        animation: study-shake 0.36s ease-in-out;
    }

    .study-rate [aria-busy="true"]::after {
        animation: study-spin 0.7s linear infinite;
    }

    .study-done-day .card-body > * {
        animation: study-done-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    }

    .study-done-day .card-body > :nth-child(2) { animation-delay: 0.06s; }
    .study-done-day .card-body > :nth-child(3) { animation-delay: 0.12s; }
    .study-done-day .card-body > :nth-child(4) { animation-delay: 0.18s; }
    .study-done-day .card-body > :nth-child(5) { animation-delay: 0.24s; }
    .study-done-day .card-body > :nth-child(6) { animation-delay: 0.3s; }

    .study-streak-icon svg {
        animation: study-pop 0.5s 0.3s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    }
}

/* ---------------------------------------------------------------------
   34. Lessons, quiz and homework
   --------------------------------------------------------------------- */
/* Lesson page: place in the course, comfortable reading, the finish card */
.lesson-position {
    margin: 0 0 0.25rem;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.lesson-content {
    font-size: 1rem;
    line-height: 1.625rem;
}

/* reached by #homework and #finish after a form: not glued to the top edge */
#homework,
#finish {
    scroll-margin-top: 1rem;
}

.lesson-finish {
    max-width: 40rem;
    margin-top: 2rem;
}

.page .lesson-finish h2 {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    line-height: 1.5rem;
}

.page .lesson-finish .lesson-finish-done {
    color: var(--bs-success-text-emphasis);
}

.lesson-finish-text {
    margin-bottom: 1rem;
    color: var(--bs-secondary-color);
}

.lesson-finish .btn {
    white-space: normal; /* a long lesson title wraps inside the button */
}

/* Course page: progress and the lesson to continue with */
.course-next {
    max-width: 35rem;
    margin: 1rem 0 1.5rem;
}

.course-next .course-progress {
    max-width: none;
}

.course-next-button {
    margin-top: 1rem;
    white-space: normal;
}

.course-next-done {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0 0;
    color: var(--bs-success-text-emphasis);
    font-weight: 600;
}

/* Quiz: one card per question with its number */
.quiz-card {
    max-width: 40rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    background: var(--app-surface);
}

.quiz-card .quiz-question {
    max-width: none;
    margin: 0;
}

.quiz-card-invalid {
    border-color: var(--bs-danger-text-emphasis);
    box-shadow: inset 0 0 0 1px var(--bs-danger-text-emphasis);
}

.quiz-card-head,
.quiz-question legend.quiz-card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    margin-bottom: 0.75rem;
    padding: 0;
}

.quiz-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-size: 0.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* answered: the number is filled (the bar below says it in words) */
.quiz-card:has(:checked) .quiz-number {
    background: var(--app-primary);
    color: var(--app-on-solid);
}

.quiz-question-text,
.page .quiz-question-text {
    display: block;
    margin: 0;
    color: var(--bs-body-color);
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 600;
}

.quiz-card .quiz-question-number {
    margin: 0 0 0.125rem;
}

.quiz-card .invalid-feedback {
    margin: 0 0 0.75rem;
}

.quiz-option {
    min-height: 3.25rem;
}

/* result: right or not, with an icon and a word */
.quiz-verdict {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
    font-weight: 600;
}

.quiz-verdict .icon {
    width: 1rem;
    height: 1rem;
}

.quiz-verdict-right {
    color: var(--bs-success-text-emphasis);
}

.quiz-verdict-wrong {
    color: var(--bs-danger-text-emphasis);
}

/* the bar with "2 of 5 answered" and the button stays at the bottom of the screen, above the tab bar */
.quiz-bar {
    position: sticky;
    bottom: 0.5rem;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    max-width: 40rem;
    margin: 1.5rem 0 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--app-border-strong);
    border-radius: 0.75rem;
    background: var(--app-surface);
}

@media (max-width: 1199.98px) {
    .has-tab-bar-xl .quiz-bar {
        bottom: calc(3.5rem + 1px + env(safe-area-inset-bottom) + 0.5rem);
    }
}

@media (max-width: 1399.98px) {
    .has-tab-bar-xxl .quiz-bar {
        bottom: calc(3.5rem + 1px + env(safe-area-inset-bottom) + 0.5rem);
    }
}

/* status and button share the line; when the button wraps it takes the full width */
.quiz-bar-status {
    flex: 999 1 8rem;
    min-width: 0;
}

.quiz-bar .btn {
    flex: 1 0 auto;
}

.quiz-bar-text {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.quiz-bar-progress {
    margin-top: 0.375rem;
}

.quiz-bar-progress .progress-bar {
    width: 0;
}

/* result page: the score in a circle, a heading that depends on it, the next step */
.quiz-summary {
    margin-bottom: 1.5rem;
}

.quiz-summary-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.quiz-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.quiz-summary-all .quiz-score {
    background: var(--app-success-solid);
    color: var(--app-on-solid);
}

.quiz-score .icon {
    width: 2rem;
    height: 2rem;
}

.quiz-score-line {
    margin: 0.125rem 0 0;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.quiz-summary .btn {
    white-space: normal;
}

.quiz-result-actions {
    max-width: 40rem;
    margin: 1.5rem 0;
}

/* Homework: status badge with icon, feedback block, message in the panel */
.badge-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.badge-with-icon .icon {
    width: 0.875rem;
    height: 0.875rem;
}

.homework-feedback {
    margin-bottom: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: var(--bs-tertiary-bg);
}

.homework-feedback p {
    margin: 0;
}

.homework-feedback .homework-feedback-label {
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.homework-table-feedback-text {
    max-width: 40ch;
    margin: 0.25rem 0 0;
}

.homework-panel .alert {
    margin-bottom: 1rem;
}

/* File field: a button in the site's language and the chosen name (public/js/file-picker.js).
   The native field stays in the page, invisible, so keyboard and screen readers still use it. */
.file-picker.is-enhanced {
    position: relative;
}

.file-picker.is-enhanced .file-picker-input {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    border: 0;
    opacity: 0;
}

.file-picker-ui {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.file-picker-button {
    cursor: pointer;
}

.file-picker:has(.file-picker-input:focus-visible) .file-picker-button {
    outline: 2px solid var(--app-focus-ring);
    outline-offset: 2px;
}

.file-picker-name {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.file-picker.has-file .file-picker-name {
    color: var(--bs-body-color);
    font-weight: 600;
}

/* busy buttons (public/js/form-busy.js) */
.btn[aria-busy="true"] {
    cursor: progress;
}

/* homework cards and empty state: the lesson link is a 44px target, long titles wrap */
.homework-card .list-card-title a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}

.homework-empty-next {
    white-space: normal;
}

/* ---------------------------------------------------------------------
   35. Shell, forms, profile (tab bar sheet, login, register, profile)
   --------------------------------------------------------------------- */

/* Cards still to study today: a small count on the Cards tab and the desktop "Flashcards" link.
   The number is hidden from screen readers; they read the sentence next to it. 12px as a badge. */
.nav-badge {
    display: inline-block;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3125rem;
    border-radius: 1rem;
    background: var(--app-primary);
    color: var(--app-on-solid);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.nav-link .nav-badge {
    margin-left: 0.375rem;
}

.tab-link {
    position: relative;
}

/* on the tab: at the top right of the icon, with a ring in the bar colour */
.tab-link .nav-badge {
    position: absolute;
    top: 0.25rem;
    left: calc(50% + 0.25rem);
    box-shadow: 0 0 0 2px var(--app-surface);
}

/* the open sheet gets focus for screen readers; it is not a control, so no ring */
.tab-sheet:focus {
    outline: none;
}

/* Password with a "Show" button inside the field (public/js/password-toggle.js; without JavaScript
   the button stays hidden). The button is 44px high and keeps the field's border visible. */
.password-field {
    position: relative;
}

.password-field.has-toggle .form-control,
.password-field.has-toggle .form-control.is-invalid {
    padding-right: 5.5rem;
}

.password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    min-width: 2.75rem;
    padding: 0 0.625rem;
    border: 2px solid transparent; /* the tint below stays inside the field's border */
    border-radius: 0 0.5rem 0.5rem 0;
    background: transparent;
    background-clip: padding-box;
    color: var(--bs-link-color);
    font-size: 0.875rem;
    font-weight: 600;
}

.password-toggle:hover {
    background: var(--bs-tertiary-bg);
}

.password-toggle[aria-pressed="true"] {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

/* the whole "Remember my e-mail address" row is the tap target */
.check-row {
    cursor: pointer;
}

/* Login as an app welcome screen: logo, friendly title, the form and one primary button, centred */
.welcome > * {
    max-width: 35rem;
    margin-left: auto;
    margin-right: auto;
}

.welcome-head {
    text-align: center;
    margin-bottom: 1.5rem;
}

.welcome-logo {
    display: block;
    width: auto;
    height: 4rem;
    margin: 0.5rem auto 1rem;
}

[data-bs-theme="dark"] .welcome-logo {
    padding: 0.375rem 0.5rem;
    background: #f7f4fd; /* the light tile of the header logo */
    border-radius: 0.75rem;
    height: 4.75rem;
}

.page .welcome-head h1 {
    margin-bottom: 0.25rem;
}

.welcome-intro {
    margin: 0;
    color: var(--bs-secondary-color);
}

.welcome .form-submit {
    width: 100%;
}

.welcome-alt {
    text-align: center;
}

/* Home page for guests: hero with the way in, then what you get in three points */
.home-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.home-note {
    max-width: 35rem;
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.home-points {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-points li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    background: var(--app-surface);
}

.home-point-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

.page .home-points h3 {
    margin: 0 0 0.25rem;
    font-size: 1.125rem;
    line-height: 1.5rem;
}

.home-points p {
    margin: 0;
    color: var(--bs-secondary-color);
}

@media (min-width: 768px) {
    .home-hero {
        padding: 3.5rem 0;
    }

    .home-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .home-points {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }

    .home-points li {
        flex-direction: column;
    }
}

/* Profile: a short list of the sections at the top (the page is long on phones) */
.profile-jump ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.profile-jump a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 0.875rem;
    border: 1px solid var(--app-border-strong);
    border-radius: 2rem;
    background: var(--app-surface);
    color: var(--bs-body-color);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

/* on phones one row that scrolls sideways by itself (the page does not), like the filter chips of an app */
@media (max-width: 767.98px) {
    .profile-jump ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-left: -1rem;
        margin-right: -1rem;
        padding: 0.25rem 1rem; /* room for the focus ring */
        scrollbar-width: none;
    }

    .profile-jump li {
        flex: none;
    }
}

.profile-jump a:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.profile-section {
    scroll-margin-top: 1rem;
}

/* My progress: three numbers side by side */
.profile-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
}

.profile-stats li {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 0.375rem;
    border-radius: 0.5rem;
    background: var(--bs-tertiary-bg);
    text-align: center;
}

.profile-stat-icon {
    color: var(--bs-link-color);
    line-height: 0;
}

.profile-stat-number {
    margin-top: 0.25rem;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 2.25rem;
    color: var(--app-heading);
    font-variant-numeric: tabular-nums;
}

.profile-stat-label {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--bs-secondary-color);
    hyphens: auto;
    overflow-wrap: break-word;
}

.profile-stats-note {
    margin: 0;
}



/* ------------------------------------------------------------------
   36. Exercises: list (student and teacher) and the Artikel-Sprint game
   The game page (body.screen-game) is a full screen on phones and tablets: no header,
   tab bar or footer while playing; the game has its own close and back buttons.
   ------------------------------------------------------------------ */
.exercise-kind {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0 0 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.exercise-kind .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.exercise-facts {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

.exercise-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.exercise-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.exercise-choices legend {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.exercise-choices .form-check {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0;
}

.exercise-choices .form-check-input {
    margin: 0;
    flex: none;
}

/* the article colours of the game: a box, a chip and the article on the card */
.sprint .article-der { --sprint-colour: var(--app-der); --sprint-tint: var(--app-der-bg); }
.sprint .article-die { --sprint-colour: var(--app-die); --sprint-tint: var(--app-die-bg); }
.sprint .article-das { --sprint-colour: var(--app-das); --sprint-tint: var(--app-das-bg); }

.sprint {
    max-width: 27.5rem;
    margin: 0 auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.sprint-screen {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
}

.sprint-icon-button {
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--bs-secondary-color);
}

.sprint-icon-button:hover {
    background: var(--bs-tertiary-bg);
}

/* start screen */
.sprint-back {
    align-self: flex-start;
}

.sprint-start-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
    padding-bottom: 1rem;
}

.sprint-kind {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.sprint-title {
    margin: 0;
    text-wrap: balance;
}

.sprint-intro {
    margin: 0;
    max-width: 30ch;
    color: var(--bs-secondary-color);
}

.sprint-preview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.625rem;
    width: 100%;
}

.sprint-preview span {
    padding: 0.75rem 0;
    border: 2px solid var(--sprint-colour);
    border-radius: 0.75rem;
    background: var(--sprint-tint);
    color: var(--sprint-colour);
    font-size: 1.25rem;
    font-weight: 700;
}

.sprint-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.sprint-facts li,
.sprint-facts-line {
    margin: 0;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: var(--bs-tertiary-bg);
    font-size: 0.875rem;
    font-weight: 600;
}

.sprint-preview-note {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--bs-info-bg-subtle);
    font-size: 0.875rem;
}

.sprint-go {
    width: 100%;
    max-width: 20rem;
    min-height: 3.5rem;
    font-size: 1.125rem;
}

.sprint-how {
    margin: 0;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

/* the round */
.sprint-topbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sprint-timer {
    flex: 1;
    height: 0.625rem;
    border-radius: 999px;
    background: var(--app-progress-track);
    overflow: hidden;
}

.sprint-timer-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--app-progress-bar);
    transform-origin: left center;
}

.sprint-timer.is-late .sprint-timer-fill {
    background: var(--bs-warning-text-emphasis);
}

.sprint-seconds {
    min-width: 2.2ch;
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--app-heading);
}

.sprint-scorebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2.5rem;
}

.sprint-score {
    position: relative;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--app-heading);
}

.sprint-score small {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.sprint-gain {
    position: absolute;
    left: 100%;
    top: -0.375rem;
    margin-left: 0.5rem;
    font-size: 1rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
}

.sprint-combo {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 999px;
    background: var(--app-accent-bg);
    color: var(--app-accent-text);
    font-size: 0.875rem;
    font-weight: 700;
    white-space: nowrap;
}

.sprint-combo[data-level="0"] {
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}

.sprint-combo .icon {
    width: 1rem;
    height: 1rem;
}

.sprint-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sprint-card {
    position: relative;
    width: 100%;
    max-width: 20rem;
    padding: 0.875rem;
    border: 2px solid var(--bs-border-color);
    border-radius: 1rem;
    background: var(--app-surface);
    box-shadow: 0 0.625rem 1.875rem rgba(42, 35, 70, 0.12);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease, border-color 0.2s;
}

[data-bs-theme="dark"] .sprint-card {
    box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.35);
}

.sprint-card.is-dragging {
    transition: none;
    cursor: grabbing;
}

.sprint-card[data-lean="der"] { border-color: var(--app-der); }
.sprint-card[data-lean="die"] { border-color: var(--app-die); }
.sprint-card[data-lean="das"] { border-color: var(--app-das); }

.sprint-picture {
    width: min(100%, 30dvh);
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 0.625rem;
    background: var(--app-picture-bg);
    overflow: hidden;
}

.sprint-picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.sprint-word {
    padding: 0.75rem 0.25rem 0;
    text-align: center;
}

.sprint-noun {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.sprint-art {
    display: inline-block;
    padding: 0 0.5rem;
    border-radius: 0.5rem;
    background: var(--sprint-tint);
    color: var(--sprint-colour);
}

.sprint-gloss {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.sprint-credit {
    margin-top: 0.25rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.sprint-tip {
    margin-top: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--app-accent-bg);
    color: var(--app-accent-text);
    font-size: 0.875rem;
    text-align: center;
}

.sprint-verdict {
    position: absolute;
    top: 0.75rem;
    left: 50%;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    max-width: calc(100% - 1rem);
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: var(--app-surface);
    box-shadow: 0 0.25rem 0.75rem rgba(42, 35, 70, 0.12);
    font-weight: 700;
    transform: translateX(-50%);
    white-space: nowrap;
}

.sprint-verdict .icon {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
}

.sprint-mode-artikel .sprint-answers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.625rem;
}

.sprint-bin {
    position: relative;
    min-height: 4.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--sprint-colour);
    border-radius: 0.875rem;
    background: var(--sprint-tint);
    color: var(--sprint-colour);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.15s;
}

.sprint-bin:active,
.sprint-bin.is-leaning {
    transform: translateY(-3px) scale(1.04);
}

.sprint-bin.is-answer {
    box-shadow: 0 0 0 4px var(--sprint-colour);
}

.sprint-key {
    font-size: 0.75rem;
    font-weight: 600;
}

.sprint-count {
    position: absolute;
    top: 0.25rem;
    right: 0.5rem;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.sprint-swipe-hint {
    margin: -0.5rem 0 0;
    text-align: center;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

/* result */
.sprint-result-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding-top: 0.75rem;
    text-align: center;
}

.sprint-big-score {
    margin: 0;
    font-size: 4rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.sprint-big-score span {
    display: block;
    margin-top: 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.sprint-best-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    background: var(--app-accent-bg);
    color: var(--app-accent-text);
    font-weight: 700;
}

.sprint-best-badge .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.sprint-save {
    margin: 0;
    color: var(--bs-danger-text-emphasis);
    font-size: 0.875rem;
}

.sprint-save:empty {
    display: none;
}

.sprint-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.sprint-stats li {
    padding: 0.625rem 0.375rem;
    border-radius: 0.75rem;
    background: var(--bs-tertiary-bg);
    text-align: center;
}

.sprint-stats b {
    display: block;
    font-size: 1.375rem;
    line-height: 1.2;
    color: var(--app-heading);
    font-variant-numeric: tabular-nums;
}

.sprint-stats span {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.sprint-panel {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    background: var(--app-surface);
}

.sprint-panel h2 {
    margin: 0;
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid var(--bs-border-color);
    font-size: 1.0625rem;
}

.sprint-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    list-style: none;
    margin: 0;
    padding: 0.75rem 0.875rem;
}

.sprint-rules li {
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: var(--sprint-tint);
    color: var(--sprint-colour);
    font-size: 0.875rem;
    font-weight: 700;
}

.sprint-missed {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sprint-missed li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.sprint-missed li:last-child {
    border-bottom: 0;
}

.sprint-missed img {
    width: 3rem;
    height: 3rem;
    flex: none;
    border-radius: 0.5rem;
    background: var(--app-picture-bg);
    object-fit: cover;
}

.sprint-missed-word {
    flex: 1;
    min-width: 0;
}

.sprint-missed-word small {
    display: block;
    color: var(--bs-secondary-color);
    font-size: 0.8125rem;
}

.sprint-perfect {
    margin: 0;
    padding: 0.875rem;
    color: var(--bs-secondary-color);
}

.sprint-actions {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-top: auto;
    padding-bottom: 0.5rem;
}

.sprint-confetti {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1100;
    pointer-events: none;
}

/* motion only without "reduce motion" */
@media (prefers-reduced-motion: no-preference) {
    .sprint-preview span { animation: sprint-float 3s ease-in-out infinite; }
    .sprint-preview span:nth-child(2) { animation-delay: 0.25s; }
    .sprint-preview span:nth-child(3) { animation-delay: 0.5s; }
    .sprint-card.is-entering { animation: sprint-enter 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
    .sprint-card.is-wrong { animation: sprint-shake 0.4s ease; }
    .sprint-art { animation: sprint-pop 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
    .sprint-gain { animation: sprint-gain 0.8s ease-out; }
    .sprint-combo.is-bumped { animation: sprint-bump 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
    .sprint-bin.is-hit { animation: sprint-hit 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
    .sprint-best-badge { animation: sprint-pop 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
}

@media (prefers-reduced-motion: reduce) {
    .sprint-card,
    .sprint-bin {
        transition: none;
    }
}

@keyframes sprint-float { 50% { transform: translateY(-4px); } }
@keyframes sprint-enter { from { opacity: 0; transform: translateY(18px) scale(0.96); } }
@keyframes sprint-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@keyframes sprint-pop { from { opacity: 0; transform: scale(0.6); } }
@keyframes sprint-gain { from { opacity: 1; transform: translateY(4px); } to { opacity: 0; transform: translateY(-18px); } }
@keyframes sprint-bump { 40% { transform: scale(1.18); } }
@keyframes sprint-hit { 35% { transform: scale(1.1); box-shadow: 0 0 0 6px var(--sprint-tint); } }

/* the game page as a full screen below 1200 px (where the tab bar would be) */
@media (max-width: 1199.98px) {
    .screen-game {
        height: 100vh;
        height: 100dvh;
        padding-bottom: 0;
    }

    .screen-game .site-header,
    .screen-game .tab-bar,
    .screen-game .site-footer {
        display: none;
    }

    .screen-game main {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .screen-game .page {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding-top: max(0.75rem, env(safe-area-inset-top));
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
        overflow-y: auto;
    }

    .screen-game .sprint {
        flex: 1;
        width: 100%;
    }
}

@media (max-height: 620px) {
    .sprint-swipe-hint,
    .sprint-credit {
        display: none;
    }

    .sprint-screen {
        gap: 0.625rem;
    }

    .sprint-bin {
        min-height: 4rem;
    }
}


/* ------------------------------------------------------------------
   37. More exercises: Hör-Sprint, Plural-Duell, roleplay; daily quests and the sticker album
   ------------------------------------------------------------------ */
.sprint-mode-icon {
    width: 4.5rem;
    height: 4.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--bs-primary-bg-subtle);
    color: var(--app-heading);
}

.sprint-mode-icon .icon {
    width: 2.25rem;
    height: 2.25rem;
}

.sprint-answers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.625rem;
}

/* Plural-Duell: three answers stacked; the plural keeps the normal text colour (every plural is "die") */
.sprint-mode-plural .sprint-answers {
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

.sprint-option {
    position: relative;
    min-height: 3.25rem;
    padding: 0.5rem 1rem 0.5rem 2.75rem;
    border: 2px solid var(--app-border-strong);
    border-radius: 0.75rem;
    background: var(--app-surface);
    color: var(--bs-body-color);
    font-size: 1.25rem;
    font-weight: 700;
    text-align: left;
    transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.15s;
}

.sprint-option .sprint-key {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
}

.sprint-option:hover {
    border-color: var(--app-primary);
}

.sprint-plural {
    display: block;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

/* Hör-Sprint: a big listen button instead of the picture, four pictures as answers */
.sprint-mode-hoer .sprint-answers {
    grid-template-columns: repeat(2, 1fr);
}

.sprint-listen-card {
    margin-top: 2.5rem; /* room for the verdict pill above it */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    max-width: 16rem;
    padding: 1.25rem;
}

.sprint-listen-button {
    width: 6.5rem;
    height: 6.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    border: 0;
    border-radius: 50%;
    background: var(--app-primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
}

.sprint-listen-button .icon {
    width: 2.5rem;
    height: 2.5rem;
}

.sprint-listen-button:hover {
    background: var(--app-primary-hover);
}

.sprint-tile {
    position: relative;
    aspect-ratio: 1;
    max-height: 22dvh;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    border: 3px solid var(--bs-border-color);
    border-radius: 0.875rem;
    background: var(--app-picture-bg);
    transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.15s;
}

.sprint-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.sprint-tile .sprint-key {
    position: absolute;
    top: 0.25rem;
    left: 0.375rem;
    min-width: 1.25rem;
    padding: 0 0.25rem;
    border-radius: 0.375rem;
    background: var(--app-surface);
    color: var(--bs-body-color);
}

.sprint-tile:hover,
.sprint-option:active,
.sprint-tile:active {
    transform: scale(1.03);
}

/* right and wrong on the answer buttons: a ring and an icon-free colour change; the verdict pill has the text */
.sprint-option.is-right,
.sprint-tile.is-right,
.sprint-option.is-answer,
.sprint-tile.is-answer {
    border-color: var(--bs-success-text-emphasis);
    box-shadow: 0 0 0 3px var(--bs-success-bg-subtle);
}

.sprint-option.is-chosen,
.sprint-tile.is-chosen {
    border-color: var(--bs-danger-text-emphasis);
    opacity: 0.7;
}

.sprint-stars-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    margin: 0;
    color: var(--app-accent-text);
    font-weight: 600;
    text-align: center;
}

.sprint-stars-note:empty {
    display: none;
}

.sprint-stars-note .icon {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    fill: var(--app-brand-yellow);
    stroke: var(--app-accent-text);
}

/* ---------- roleplay ---------- */
.role-place-picture {
    width: min(100%, 14rem);
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 1rem;
    background: var(--app-picture-bg);
}

.role-place-picture img,
.role-backdrop img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.role-place {
    margin: 0;
    font-weight: 600;
}

.role-cast {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.role-cast-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.role-portrait {
    width: 3rem;
    height: 3rem;
    flex: none;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 2px solid var(--app-surface);
    border-radius: 50%;
    background: var(--app-picture-bg);
    box-shadow: 0 0 0 1px var(--bs-border-color);
    color: #333;
}

.role-cast .role-portrait {
    width: 4.5rem;
    height: 4.5rem;
}

.role-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.role-topbar-place {
    flex: 1;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.role-mood {
    display: flex;
    gap: 0.25rem;
    padding-right: 0.25rem;
}

.role-mood span {
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    background: var(--app-progress-track);
    transition: background-color 0.3s, transform 0.3s;
}

.role-mood span.is-on {
    background: var(--app-brand-orange);
}

.role-mood[data-mood="4"] span.is-on {
    background: var(--bs-success-text-emphasis);
}

.role-backdrop {
    height: 18dvh;
    min-height: 5rem;
    overflow: hidden;
    border-radius: 0.875rem;
    background: var(--app-picture-bg);
}

.role-game {
    gap: 0.75rem;
}

.role-log {
    flex: 1;
    min-height: 8rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    overflow-y: auto;
    padding: 0.25rem 0.125rem;
}

.role-row {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    max-width: 92%;
}

.role-row.is-player {
    align-self: flex-end;
}

.role-row.is-narrator,
.role-row.is-reaction {
    align-self: center;
    max-width: 100%;
    text-align: center;
}

.role-bubble {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem 1rem 1rem 0.25rem;
    background: var(--app-surface);
    overflow-wrap: anywhere;
}

.role-row.is-player .role-bubble {
    border-color: transparent;
    border-radius: 1rem 1rem 0.25rem 1rem;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

.role-row.is-narrator .role-bubble {
    border: 0;
    background: transparent;
    color: var(--bs-secondary-color);
    font-style: italic;
}

.role-name {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bs-secondary-color);
}

.role-translate {
    align-self: flex-start;
    margin-top: 0.125rem;
    padding: 0.25rem 0;
    min-height: 2rem;
    border: 0;
    background: none;
    color: var(--bs-link-color);
    font-size: 0.8125rem;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.role-hint {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.role-typing {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.375rem 0;
}

.role-typing i {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--bs-secondary-color);
}

.role-row.is-reaction {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
}

.role-row.is-reaction .icon {
    flex: none;
    width: 1rem;
    height: 1rem;
}

.role-row.is-reaction.is-good {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
}

.role-row.is-reaction.is-okay {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.role-row.is-reaction.is-bad {
    background: var(--app-accent-bg);
    color: var(--app-accent-text);
}

.role-choices {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 3.25rem;
}

.role-choice {
    position: relative;
    min-height: 3rem;
    padding: 0.625rem 0.875rem 0.625rem 2.5rem;
    border: 2px solid var(--app-border-strong);
    border-radius: 0.75rem;
    background: var(--app-surface);
    color: var(--bs-body-color);
    font-weight: 600;
    text-align: left;
}

.role-choice:hover {
    border-color: var(--app-primary);
}

.role-choice .sprint-key {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
}

.role-continue {
    width: 100%;
}

.role-ending-title {
    margin: 0.5rem 0 0;
}

.role-ending-text {
    max-width: 32ch;
    margin: 0;
}

.role-result .sprint-big-score {
    font-size: 2.5rem;
}

/* ---------- daily quests and the album teaser (Exercises page) ---------- */
.rewards-row {
    margin-bottom: 1.5rem;
}

.quest-card {
    border-width: 2px;
}

.quest-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.quest-head h2 {
    margin: 0;
}

.quest-count {
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: var(--bs-tertiary-bg);
    font-size: 0.875rem;
    font-weight: 600;
}

.quest-count.is-complete {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
}

.quest-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.quest-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.quest-check {
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    display: grid;
    place-items: center;
    border: 2px solid var(--app-border-strong);
    border-radius: 50%;
}

.quest-list li.is-complete .quest-check {
    border-color: var(--bs-success-text-emphasis);
    background: var(--bs-success-text-emphasis);
    color: var(--app-surface);
}

.quest-check .icon {
    width: 1rem;
    height: 1rem;
}

.quest-text {
    flex: 1;
    min-width: 0;
}

.quest-list li.is-complete .quest-text {
    color: var(--bs-secondary-color);
}

.quest-progress {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--app-heading);
}

.quest-all-done {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0 0;
    color: var(--bs-success-text-emphasis);
    font-weight: 600;
}

.album-teaser {
    color: inherit;
    text-decoration: none;
}

.album-teaser .card-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.album-teaser:hover {
    border-color: var(--app-primary);
}

.album-teaser:focus-visible {
    outline: 2px solid var(--app-focus-ring);
    outline-offset: 2px;
}

.album-teaser-icon {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--app-accent-bg);
    color: var(--app-accent-text);
}

.album-teaser-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--app-heading);
}

.album-teaser-count {
    font-weight: 600;
}

/* ---------- sticker album ---------- */
.album-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.album-head h2 {
    margin: 0;
}

.album-count {
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.album-progress {
    margin: 0.5rem 0 1rem;
}

.album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.album-sticker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.5rem;
    border: 1px dashed var(--app-border-strong);
    border-radius: 0.75rem;
    text-align: center;
}

.album-picture {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 0.5rem;
    background: var(--app-picture-bg);
}

.album-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    opacity: 0.35;
}

.album-sticker.stars-1 .album-picture img,
.album-sticker.stars-2 .album-picture img {
    filter: grayscale(0.6);
    opacity: 0.7;
}

.album-sticker.is-collected {
    border: 1px solid var(--bs-border-color);
    background: var(--app-surface);
    box-shadow: 0 0.25rem 0.75rem rgba(42, 35, 70, 0.1);
}

.album-sticker.is-collected .album-picture {
    border: 4px solid #fff;
    box-shadow: 0 1px 4px rgba(42, 35, 70, 0.25);
}

.album-sticker.is-collected .album-picture img {
    filter: none;
    opacity: 1;
}

.album-word {
    font-size: 0.875rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.album-stars {
    display: flex;
    gap: 0.125rem;
}

.album-star .icon {
    width: 1rem;
    height: 1rem;
    color: var(--app-border-strong);
}

.album-star.is-on .icon {
    fill: var(--app-brand-yellow);
    color: var(--app-accent-text);
}

/* ---------- scene editor (teacher) ---------- */
.scene-pictures,
.scene-characters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 1rem;
}

.scene-picture-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
}

.scene-picture-card h3 {
    margin: 0;
}

.scene-picture {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 0.5rem;
    background: var(--app-picture-bg);
}

.scene-picture.is-portrait {
    width: 8rem;
    border-radius: 50%;
}

.scene-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scene-picture-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.scene-box {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    background: var(--app-surface);
}

.scene-box legend {
    float: none;
    width: auto;
    margin-bottom: 0.5rem;
    padding: 0;
}

.scene-choice {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
}

.scene-choice-title {
    margin: 0 0 0.5rem;
    font-weight: 700;
}

.scene-step .exercise-actions {
    margin: 1rem 0 0;
}

.scene-save-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: 0.75rem 0;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
}

@media (max-width: 1199.98px) {
    .scene-save-bar {
        bottom: calc(3.5rem + 1px + env(safe-area-inset-bottom));
    }
}

/* motion only without "reduce motion" */
@media (prefers-reduced-motion: no-preference) {
    .role-typing i { animation: role-dot 1s ease-in-out infinite; }
    .role-typing i:nth-child(2) { animation-delay: 0.15s; }
    .role-typing i:nth-child(3) { animation-delay: 0.3s; }
    .role-row { animation: sprint-enter 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
    .role-portrait.is-good { animation: role-hop 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
    .role-portrait.is-okay { animation: role-tilt 0.6s ease; }
    .role-portrait.is-bad { animation: sprint-shake 0.45s ease; }
    .role-choice { animation: sprint-enter 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }
    .role-choice:nth-child(2) { animation-delay: 0.06s; }
    .role-choice:nth-child(3) { animation-delay: 0.12s; }
    .sprint-option.is-right,
    .sprint-tile.is-right { animation: sprint-hit 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
    .album-sticker.is-collected { transform: rotate(-1.5deg); }
    .album-sticker.is-collected:nth-child(2n) { transform: rotate(1.5deg); }
}

@keyframes role-dot { 50% { transform: translateY(-3px); opacity: 0.5; } }
@keyframes role-hop { 40% { transform: translateY(-8px) scale(1.06); } }
@keyframes role-tilt { 30% { transform: rotate(-8deg); } 70% { transform: rotate(6deg); } }

@media (max-height: 620px) {
    .role-backdrop {
        display: none;
    }
}


/* ------------------------------------------------------------------
   38. Schreib-Training: type article and noun (word-game.js, mode "type")
   ------------------------------------------------------------------ */
.sprint-mode-type .sprint-answers {
    display: block;
}

.sprint-mode-type .sprint-picture {
    width: min(100%, 24dvh);
}

.type-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.type-input {
    min-height: 3.25rem;
    font-size: 1.375rem; /* at least 16 px, so phones do not zoom in */
    font-weight: 600;
    text-align: center;
}

.type-input[readonly] {
    background: var(--bs-tertiary-bg);
}

.type-message {
    min-height: 1.25rem;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
}

.type-message.is-hint {
    color: var(--app-accent-text);
}

.type-message.is-wrong {
    color: var(--bs-danger-text-emphasis);
}

.type-letters {
    display: flex;
    gap: 0.375rem;
}

.type-letter,
.type-hint {
    min-width: 2.75rem;
    min-height: 2.75rem;
    border: 1px solid var(--app-border-strong);
    border-radius: 0.5rem;
    background: var(--app-surface);
    color: var(--bs-body-color);
    font-size: 1.125rem;
    font-weight: 600;
}

.type-hint {
    margin-left: auto;
    padding: 0 0.875rem;
    color: var(--app-accent-text);
    background: var(--app-accent-bg);
    border-color: transparent;
    font-size: 0.9375rem;
}

.type-check {
    min-height: 3rem;
}


/* ------------------------------------------------------------------
   39. Mute button of the study page (flashcards.js; the same setting as the games' sound button)
   44 px to tap, but the negative margins keep the line above the card as low as before.
   ------------------------------------------------------------------ */
.study-mute {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: -0.75rem -0.5rem -0.75rem 0;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--bs-secondary-color);
    vertical-align: middle;
}

.study-mute:hover {
    background: var(--bs-tertiary-bg);
}

.study-mute .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.study-mute[aria-pressed="false"] .icon:last-child,
.study-mute[aria-pressed="true"] .icon:first-child {
    display: none;
}

.study-mute[aria-pressed="true"] {
    color: var(--app-accent-text);
}