/* ==========================================================================
   Responsive Template – Lernwelt 2
   Mobile-first layout with CSS clamp(), minimal media queries.
   Reuses design tokens from theme.css and base.css.

   Breakpoints (only the essential ones):
     - < 768px   → Mobile  (single column, burger menu, sticky header)
     - 768–991px → Tablet  (two-column, sidebar forced to icon-only)
     - >= 992px  → Desktop (two-column: sidebar expandable + main content)

   Accessibility:
     - WCAG 2.2 AA compliant contrast ratios
     - Focus-visible indicators on all interactive elements
     - Reduced-motion media query for animations
     - Semantic HTML structure complemented by ARIA where needed
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Custom properties – local overrides for this template
   -------------------------------------------------------------------------- */
:root {
    --rsp-sidebar-width: 280px;
    --rsp-header-height: 56px;
    --rsp-transition-speed: 0.3s;
    --rsp-color-bg: var(--surface-ground, #f5f6fa);
    --rsp-color-surface: var(--surface-a, #ffffff);
    --rsp-color-text: var(--text-color, #495057);
    --rsp-color-text-secondary: var(--text-color-secondary, #5f666d);
    /* Active/highlight color – hardcoded to guarantee ≥ 4.5:1 with white text.
       Does NOT inherit from theme --primary-color which may fail AA contrast. */
    --rsp-color-active: #1565c0;
    --rsp-color-active-text: #ffffff;
    --rsp-color-border: var(--surface-d, #dee2e6);
    --rsp-font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI",
        "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --rsp-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --rsp-focus-ring: 0 0 0 3px rgba(21, 101, 192, 0.35);
}

/* Short landscape viewports (mobile landscape): compact header */
@media (max-height: 500px) and (orientation: landscape) {
    :root {
        --rsp-header-height: 44px;
    }
}

/* --------------------------------------------------------------------------
   2. Base reset for the template page
   --------------------------------------------------------------------------
   Overrides base.css body { display:grid; height:100% } which prevents
   normal document scrolling required for the IKEA header effect.
   -------------------------------------------------------------------------- */
.rsp-page {
    /* Reset the body grid from base.css */
    display: block;
    height: auto;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--rsp-font-family);
    color: var(--rsp-color-text);
    background: var(--rsp-color-bg);
    line-height: 1.5;
    /* Fluid base font-size: 15px at 320px → 16px at 768px → 18px at 1400px. */
    font-size: clamp(0.9375rem, 0.75rem + 0.56vw, 1.125rem);
    -webkit-font-smoothing: antialiased;
}

/* Ensure a solid minimum on tablets and above */
@media (min-width: 768px) {
    .rsp-page {
        font-size: clamp(1rem, 0.9rem + 0.28vw, 1.125rem);
    }
}

/* --------------------------------------------------------------------------
   3. Typography – fluid sizes via clamp()
   -------------------------------------------------------------------------- */
.rsp-page h1 {
    font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 var(--spacing-md, 0.5rem);
}

.rsp-page h2 {
    font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 var(--spacing-sm, 0.25rem);
}

.rsp-page h3 {
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 var(--spacing-sm, 0.25rem);
}

.rsp-page p {
    margin: 0 0 var(--spacing-md, 0.5rem);
}

/* --------------------------------------------------------------------------
   3b. Interactive gradient – shared gradient-border effect (matches .ui-button.btn)
   --------------------------------------------------------------------------
   Apply .rsp-interactive to any element that should show a conic-gradient
   border on hover/focus. The element keeps its own border-radius.
   -------------------------------------------------------------------------- */
.rsp-interactive,
.rsp-sidebar__link,
.rsp-sidebar__button,
.rsp-mobile-nav a,
.rsp-mobile-nav button,
.rsp-mobile-nav .ui-button {
    border-width: 2px;
    border-style: solid;
    border-color: transparent;
    --mcb-groundcolor: var(--panelBackgroundColor);
    --mcb-background: var(--mcb-groundcolor);
    --mcb-gradient-col1: var(--mcb-groundcolor);
    --mcb-gradient-col2: var(--mcb-groundcolor);
    --mcb-gradient-col3: var(--mcb-groundcolor);
    --mcb-gradient-col4: var(--mcb-groundcolor);
    --mcb-gradient-col5: var(--mcb-groundcolor);
    --mcb-gradient-col6: var(--mcb-groundcolor);
    background: conic-gradient(var(--mcb-background), var(--mcb-background)) padding-box,
                conic-gradient(from var(--gradient-conic-angle), var(--mcb-gradient-col1), var(--mcb-gradient-col2), var(--mcb-gradient-col3), var(--mcb-gradient-col4), var(--mcb-gradient-col5), var(--mcb-gradient-col6)) border-box;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.rsp-interactive:hover,
.rsp-interactive:focus-visible,
.rsp-sidebar__link:hover,
.rsp-sidebar__link:focus-visible,
.rsp-sidebar__button:hover,
.rsp-sidebar__button:focus-visible,
.rsp-mobile-nav a:hover,
.rsp-mobile-nav a:focus-visible,
.rsp-mobile-nav button:hover,
.rsp-mobile-nav button:focus-visible,
.rsp-mobile-nav .ui-button:hover,
.rsp-mobile-nav .ui-button:focus-visible {
    --mcb-gradient-col1: var(--accentColor1);
    --mcb-gradient-col2: var(--accentColor2);
    --mcb-gradient-col3: var(--accentColor3);
    --mcb-gradient-col4: var(--accentColor4);
    --mcb-gradient-col5: var(--accentColor5);
    --mcb-gradient-col6: var(--accentColor1);
}

.rsp-interactive.active,
.rsp-interactive[aria-current="page"],
.rsp-sidebar__link.active,
.rsp-sidebar__link[aria-current="page"],
.rsp-sidebar__button.active,
.rsp-sidebar__button[aria-current="page"],
.rsp-mobile-nav a.active,
.rsp-mobile-nav a[aria-current="page"] {
    --mcb-gradient-col1: var(--accentColor1);
    --mcb-gradient-col2: var(--accentColor2);
    --mcb-gradient-col3: var(--accentColor3);
    --mcb-gradient-col4: var(--accentColor4);
    --mcb-gradient-col5: var(--accentColor5);
    --mcb-gradient-col6: var(--accentColor1);
}

/* --------------------------------------------------------------------------
   4. Focus indicator – global for all interactive elements (WCAG 2.4.7)
   -------------------------------------------------------------------------- */
.rsp-page :focus-visible {
    outline: 2px solid var(--rsp-color-active);
    outline-offset: 2px;
    box-shadow: var(--rsp-focus-ring);
    border-radius: var(--border-radius-xs, 2px);
}

/* High contrast mode: outline becomes visible, box-shadow is ignored */
@media (forced-colors: active) {
    .rsp-page :focus-visible {
        outline: 2px solid Highlight;
        box-shadow: none;
    }
}

/* --------------------------------------------------------------------------
   5. Layout shell – mobile first (single column)
   --------------------------------------------------------------------------
   The header is position:fixed on all viewports for the IKEA scroll effect.
   The grid only manages sidebar + main; the header floats above.
   -------------------------------------------------------------------------- */
.rsp-layout {
    display: grid;
    grid-template-areas: "main";
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    min-height: 100dvh;
}

/* Desktop: two-column layout with sidebar */
@media (min-width: 768px) {
    .rsp-layout {
        grid-template-areas: "sidebar main";
        grid-template-columns: var(--rsp-sidebar-width) 1fr;
        grid-template-rows: 1fr;
        transition: grid-template-columns var(--rsp-transition-speed) ease;
    }

    /* Icons-only state: sidebar shows only icons (narrow column) */
    .rsp-page[data-sidebar="icons"] .rsp-layout {
        grid-template-columns: 80px 1fr;
    }

    /* Collapsed state: sidebar completely hidden */
    .rsp-page[data-sidebar="collapsed"] .rsp-layout {
        grid-template-columns: 0 1fr;
    }

    .rsp-page[data-sidebar="collapsed"] .rsp-sidebar {
        display: none;
    }

    .rsp-page[data-sidebar="collapsed"] .rsp-header {
        left: 0;
    }
}

/* --------------------------------------------------------------------------
   6. Header
   --------------------------------------------------------------------------
   - position:fixed on all viewports for the IKEA-style scroll-hide/show
   - Slides up (translateY(-100%)) on scroll-down, reappears on scroll-up
   - JS toggles the .header--hidden class
   -------------------------------------------------------------------------- */
.rsp-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 0.5rem);
    padding: 0 var(--spacing-lg, 1rem);
    background: var(--rsp-color-surface);
    box-shadow: var(--rsp-shadow);
    z-index: 100;
    height: var(--rsp-header-height);
    overflow: hidden;
    transition: transform var(--rsp-transition-speed) ease;
}

/* JS adds this class on scroll-down → slides header out of view */
.rsp-header.header--hidden {
    transform: translateY(-100%);
}

/* On desktop: offset header to the right of the sidebar */
@media (min-width: 768px) {
    .rsp-header {
        left: var(--rsp-sidebar-width);
        gap: var(--spacing-lg, 1rem);
        /* Extra left padding to clear the sidebar toggle arrow */
        padding-left: 2.5rem;
        transition: left var(--rsp-transition-speed) ease,
                    transform var(--rsp-transition-speed) ease;
    }

    /* Icons-only state: header offset to narrow sidebar */
    .rsp-page[data-sidebar="icons"] .rsp-header {
        left: 80px;
    }
}


/* -- Header: Search button (circle, same style as help) ------------------ */
.rsp-header__search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border-color: var(--rsp-color-border);
    color: var(--rsp-color-text-secondary);
    text-decoration: none;
    font-size: 1rem;
    flex-shrink: 0;
    position: relative;
    /* Mobile: pushes itself and subsequent items to the right */
    order: 4;
    margin-left: auto;
    cursor: pointer;
}

.rsp-header__search-btn:hover,
.rsp-header__search-btn:focus-visible {
    border-width: 2px;
    border-color: transparent;
}

@media (min-width: 768px) {
    .rsp-header__search-btn {
        /* Desktop: hidden – replaced by inline search field */
        display: none;
        margin-left: 0;
    }
}

/* Invisible touch-target expander – ensures 44×44px hit area (WCAG 2.5.8) */
.rsp-header__search-btn::after {
    content: "";
    position: absolute;
    inset: -6px;
}

/* -- Header: Desktop search field (inline, replaces search button on desktop) --
   Mobile:  hidden (search button is shown instead).
   Desktop: centered between burger and help/user area, fills available space. */
.rsp-header__search-field {
    display: none;
}

@media (min-width: 768px) {
    .rsp-header__search-field {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1 1 0;
        order: 0;
    }

    .rsp-header__search-wrapper {
        position: relative;
        width: 100%;
        max-width: 480px;
        border-radius: var(--border-radius-xl, 15px);
        border-color: var(--rsp-color-border);
    }

    .rsp-header__search-wrapper:hover,
    .rsp-header__search-wrapper:focus-within {
        border-color: transparent;
        --mcb-gradient-col1: var(--accentColor1);
        --mcb-gradient-col2: var(--accentColor2);
        --mcb-gradient-col3: var(--accentColor3);
        --mcb-gradient-col4: var(--accentColor4);
        --mcb-gradient-col5: var(--accentColor5);
        --mcb-gradient-col6: var(--accentColor1);
    }

    .rsp-header__search-field-icon {
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.875rem;
        color: var(--rsp-color-text-secondary);
        pointer-events: none;
        z-index: 1;
    }

    .rsp-page .rsp-header__search-input {
        width: 100%;
        padding: 0.5rem 0.75rem 0.5rem 2.25rem;
        border: none;
        border-radius: var(--border-radius-xl, 15px);
        font-size: var(--font-size-smaller, 0.875rem);
        font-family: inherit;
        color: var(--rsp-color-text);
        background: transparent;
        min-height: 44px;
    }

    .rsp-page .rsp-header__search-input:focus {
        outline: none;
    }

    .rsp-page .rsp-header__search-input::placeholder {
        color: var(--rsp-color-text-secondary);
    }
}


/* -- Header: User area --------------------------------------------------- */
.rsp-header__user {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.25rem);
    flex-shrink: 0;
    order: 6;
}

@media (min-width: 768px) {
    .rsp-header__user {
        order: 0;
    }
}

/* User name: hidden on mobile to save space */
.rsp-header__user-name {
    display: none;
    color: var(--rsp-color-text);
    white-space: nowrap;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font: inherit;
    font-size: var(--font-size-smaller, 0.875rem);
    border-radius: 15px;
    min-height: 44px;
    position: relative;
    /* Vertically center text within the 44px hit area */
    line-height: calc(44px - 1rem);
}

.rsp-header__user-name:hover,
.rsp-header__user-name:focus-visible {
    text-decoration: underline;
}

@media (min-width: 768px) {
    .rsp-header__user-name {
        display: block;
    }
}

/* Profile picture button */
.rsp-header__avatar-btn {
    position: relative;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    border-color: var(--rsp-color-border);
    line-height: 0;
    width: 2rem;
    height: 2rem;
}

.rsp-header__avatar-btn:hover,
.rsp-header__avatar-btn:focus-visible {
    border-width: 2px;
    border-color: transparent;
    border-radius: 50%;
}

/* Invisible touch-target expander – ensures 44×44px hit area (WCAG 2.5.8) */
.rsp-header__avatar-btn::after {
    content: "";
    position: absolute;
    inset: -6px;
    /* (32px + 2×6px = 44px) */
}

/* -- Header: Avatar image --------------------------------------------------- */
.rsp-header__avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* -- Overlay base styles (mobile menu, profile, chapters) ----------------
   Shared positioning, transition and open-state for all slide-in overlays.
   -------------------------------------------------------------------------- */
.rsp-overlay {
    position: fixed;
    top: var(--rsp-header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--rsp-color-surface);
    z-index: 95;
    overflow-y: auto;
    padding: var(--spacing-lg, 1rem);
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--rsp-transition-speed) ease,
                opacity var(--rsp-transition-speed) ease,
                visibility 0s linear var(--rsp-transition-speed);
}

.rsp-overlay[aria-hidden="false"] {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition: transform var(--rsp-transition-speed) ease,
                opacity var(--rsp-transition-speed) ease,
                visibility 0s linear 0s;
}

/* -- Profile overlay: desktop side-panel --------------------------------- */
@media (min-width: 768px) {
    .rsp-profile-overlay {
        left: auto;
        width: 320px;
        border-left: 1px solid var(--rsp-color-border);
        box-shadow: -4px 0 12px rgba(0, 0, 0, 0.08);
    }
}

/* -- Header: Help link --------------------------------------------------- */
.rsp-header__help {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border-width: 2px;
    border-color: var(--rsp-color-border);
    color: var(--rsp-color-text-secondary);
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
    /* Touch target ≥ 44px via transparent hit area around the visible circle (WCAG 2.5.8) */
    position: relative;
    /* Always right of the avatar (order 7 > user order 6) */
    order: 7;
}

.rsp-header__help:hover,
.rsp-header__help:focus-visible {
    border-width: 2px;
    border-color: transparent;
}

/* Invisible touch-target expander – ensures 44×44px hit area */
.rsp-header__help::after {
    content: "";
    position: absolute;
    inset: -6px;
    /* (32px + 2×6px = 44px) */
}

/* -- Header: Burger button
   Mobile  (< 768px): replaces logo, leftmost position (order: 1) → opens off-canvas menu.
   Desktop (≥ 768px): hidden – replaced by sidebar toggle arrow on the border.
   Animated ☰ → ✕ transition via CSS transforms on child lines. */
.rsp-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    flex-shrink: 0;
    gap: 5px;
    -webkit-tap-highlight-color: transparent;
    /* Mobile: first position (replaces logo) */
    order: 1;
}

/* Desktop: hidden – sidebar toggle arrow is used instead */
@media (min-width: 768px) {
    .rsp-burger {
        display: none;
    }
}

/* Three horizontal lines */
.rsp-burger__line {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--rsp-color-text);
    border-radius: 1px;
    transition: transform var(--rsp-transition-speed) ease,
                opacity var(--rsp-transition-speed) ease;
    transform-origin: center;
}

/* Animated transition to X when mobile menu is open */
.rsp-burger[aria-expanded="true"] .rsp-burger__line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.rsp-burger[aria-expanded="true"] .rsp-burger__line:nth-child(2) {
    opacity: 0;
}

.rsp-burger[aria-expanded="true"] .rsp-burger__line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   6b. Sidebar toggle arrow (desktop only)
   --------------------------------------------------------------------------
   Circular button centered on the sidebar's vertical border line.
   Uses position:fixed so it stays visible even when sidebar is collapsed.
   -------------------------------------------------------------------------- */
.rsp-sidebar-toggle {
    display: none;
}

@media (min-width: 768px) {
    .rsp-sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        left: calc(var(--rsp-sidebar-width) - 16px);
        top: calc(var(--rsp-header-height) / 2);
        transform: translateY(-50%);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border-color: var(--rsp-color-border);
        color: var(--rsp-color-text-secondary);
        cursor: pointer;
        z-index: 201;
        padding: 0;
        box-shadow: var(--rsp-shadow);
        transition: left var(--rsp-transition-speed) ease,
                    background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
    }

    /* Preserve circular focus ring */
    .rsp-sidebar-toggle:focus-visible {
        border-radius: 50%;
        box-shadow: var(--rsp-focus-ring);
    }

    .rsp-sidebar-toggle:hover,
    .rsp-sidebar-toggle:focus-visible {
        border-color: transparent;
    }

    /* Invisible touch-target expander – 44×44px (WCAG 2.5.8) */
    .rsp-sidebar-toggle::after {
        content: "";
        position: absolute;
        inset: -6px;
    }

    .rsp-sidebar-toggle i {
        font-size: 0.75rem;
        line-height: 1;
        transition: transform var(--rsp-transition-speed) ease;
    }

    /* Arrow direction based on aria-expanded:
       expanded=true  → chevron points left (collapse direction)
       expanded=false → chevron rotates 180° to point right (expand direction) */
    .rsp-sidebar-toggle[aria-expanded="false"] i {
        transform: rotate(180deg);
    }

    /* Icons-only state: move to narrow sidebar edge */
    .rsp-page[data-sidebar="icons"] .rsp-sidebar-toggle {
        left: calc(80px - 16px);
    }

    /* Collapsed state: button at left screen edge */
    .rsp-page[data-sidebar="collapsed"] .rsp-sidebar-toggle {
        left: 4px;
    }
}

/* --------------------------------------------------------------------------
   7. Mobile off-canvas menu
   -------------------------------------------------------------------------- */
.rsp-mobile-menu {
    z-index: 90;
    /* Slide from left instead of default right (.rsp-overlay base) */
    transform: translateX(-100%);
}


@media (min-width: 768px) {
    .rsp-mobile-menu {
        display: none !important;
    }
}

/* -- Mobile menu: header (search + close button side by side) ------------ */
.rsp-mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg, 1rem);
    margin-bottom: var(--spacing-lg, 1rem);
}

.rsp-mobile-menu__title {
    margin: 0;
}

.rsp-mobile-menu__header .rsp-mobile-menu__search {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

/* Override .rsp-overlay__close absolute positioning inside header row */
.rsp-mobile-menu__header .rsp-overlay__close {
    position: static;
    flex-shrink: 0;
}

/* -- Mobile menu: search ------------------------------------------------- */
.rsp-mobile-menu__search {
    position: relative;
    margin-bottom: var(--spacing-lg, 1rem);
    border-radius: var(--border-radius-xl, 15px);
    border-width: 2px;
    border-style: solid;
    border-color: var(--rsp-color-border);
    --mcb-groundcolor: var(--panelBackgroundColor);
    --mcb-background: var(--mcb-groundcolor);
    --mcb-gradient-col1: var(--mcb-groundcolor);
    --mcb-gradient-col2: var(--mcb-groundcolor);
    --mcb-gradient-col3: var(--mcb-groundcolor);
    --mcb-gradient-col4: var(--mcb-groundcolor);
    --mcb-gradient-col5: var(--mcb-groundcolor);
    --mcb-gradient-col6: var(--mcb-groundcolor);
    background: conic-gradient(var(--mcb-background), var(--mcb-background)) padding-box,
                conic-gradient(from var(--gradient-conic-angle), var(--mcb-gradient-col1), var(--mcb-gradient-col2), var(--mcb-gradient-col3), var(--mcb-gradient-col4), var(--mcb-gradient-col5), var(--mcb-gradient-col6)) border-box;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.rsp-mobile-menu__search:hover,
.rsp-mobile-menu__search:focus-within {
    border-color: transparent;
    --mcb-gradient-col1: var(--accentColor1);
    --mcb-gradient-col2: var(--accentColor2);
    --mcb-gradient-col3: var(--accentColor3);
    --mcb-gradient-col4: var(--accentColor4);
    --mcb-gradient-col5: var(--accentColor5);
    --mcb-gradient-col6: var(--accentColor1);
}

/* Specificity raised to override theme.css "body input" rules. */
.rsp-page .rsp-mobile-menu__search-input {
    width: 100%;
    padding: 0.75rem 0.75rem 0.75rem 2.5rem;
    border: none;
    border-radius: var(--border-radius-xl, 15px);
    font-size: 1rem;
    font-family: inherit;
    color: var(--rsp-color-text);
    background: transparent;
    position: relative;
    z-index: 1;
    min-height: 44px;
}

.rsp-page .rsp-mobile-menu__search-input:focus {
    background: transparent;
    box-shadow: none;
    outline: none;
}

/* Mobile search uses the same icon positioning as the header search */
.rsp-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: var(--rsp-color-text-secondary);
    pointer-events: none;
    z-index: 2;
}

/* -- Mobile menu: navigation sections ------------------------------------ */
.rsp-mobile-nav {
    list-style: none;
    margin: 0 0 var(--spacing-lg, 1rem);
    padding: var(--spacing-sm, 0.25rem);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.25rem);
    border-radius: var(--border-radius-xl);
    background-color: var(--surface-ground);
}

/* Hide empty mobile nav lists (e.g. a page provides no site-specific content) */
.rsp-mobile-nav:not(:has(li)) {
    display: none;
}

.rsp-mobile-nav__heading {
    font-size: var(--font-size-smaller, 0.875rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rsp-color-text-secondary);
    padding: var(--spacing-md, 0.5rem) var(--spacing-sm, 0.25rem);
    margin: 0;
}

.rsp-mobile-nav a,
.rsp-mobile-nav button {
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 0.5rem);
    padding: var(--spacing-md, 0.5rem);
    color: var(--rsp-color-text);
    text-decoration: none;
    border-radius: 15px;
    min-height: 2.5em;
    width: 100%;
    font: inherit;
    font-size: 1rem;
    cursor: pointer;
}

/* Reset button-specific defaults */
.rsp-mobile-nav button {
    text-align: left;
}

/* PrimeFaces buttons in mobile nav – override framework styles */
.rsp-mobile-nav .ui-button {
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 0.5rem);
    padding: var(--spacing-md, 0.5rem);
    color: var(--rsp-color-text);
    border-radius: 15px;
    min-height: 2.5em;
    width: 100%;
    font: inherit;
    font-size: 1rem;
    cursor: pointer;
    text-align: left;
    box-shadow: none;
}

.rsp-sidebar__button .ui-button-text {
    margin-left: var(--spacing-md, 0.5rem);
}

/* Override PrimeFaces absolute positioning – bring icon back to normal flow */
.rsp-mobile-nav .ui-button.ui-button-text-icon-left .ui-icon,
.rsp-mobile-nav .ui-button .ui-button-icon-left {
    position: static;
    margin: 0;
    top: auto;
    left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Override PrimeFaces text padding – reset to match links */
.rsp-mobile-nav .ui-button.ui-button-text-icon-left .ui-button-text,
.rsp-mobile-nav .ui-button .ui-button-text {
    padding: 0;
    display: inline;
    line-height: inherit;
}

.rsp-mobile-nav a[aria-current="page"],
.rsp-mobile-nav a.active {
    color: var(--rsp-color-text);
}

/* Hide curriculum tree panel in mobile nav – too complex for off-canvas */
.rsp-mobile-nav .curr-nav-wrapper {
    display: none;
}

/* Compact expand button replacing curriculum tree in icons-only sidebar; hidden everywhere else */
.rsp-sidebar .curr-nav-expand-btn {
    display: none;
}

.rsp-mobile-nav__separator {
    height: 1px;
    background: var(--rsp-color-border);
    margin: var(--spacing-md, 0.5rem) 0;
    border: none;
}

/* --------------------------------------------------------------------------
   8. Sidebar (desktop only)
   -------------------------------------------------------------------------- */
.rsp-sidebar {
    grid-area: sidebar;
    display: none;
    flex-direction: column;
    background: var(--rsp-color-surface);
    border-right: 1px solid var(--rsp-color-border);
    overflow: hidden auto;
    /* scrollbar-gutter: stable; */
    height: 100dvh;
    position: sticky;
    top: 0;
    transition: visibility var(--rsp-transition-speed) ease;
}

.rsp-sidebar h3 {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--spacing-md, 0.5rem) var(--spacing-sm, 0.25rem);
    margin: 0 0 0 var(--spacing-lg, 0.5rem) !important;
}

@media (min-width: 768px) {
    .rsp-sidebar {
        display: flex;
    }

    /* Icons-only state: hide all text, center icons, narrow width */
    .rsp-page[data-sidebar="icons"] .rsp-sidebar {
        align-items: center;
        overflow: visible;
        z-index: 200;
    }

    /* Icons-only: logo area – centered, zero horizontal padding for exact centering */
    .rsp-page[data-sidebar="icons"] .rsp-sidebar__logo {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--spacing-md, 0.5rem) 0;
        width: 100%;
        box-sizing: border-box;
    }

    /* Icons-only: switch to small icon logo, same size as mobile (40×40) */
    .rsp-page[data-sidebar="icons"] .rsp-sidebar__logo-full {
        display: none;
    }

    .rsp-page[data-sidebar="icons"] .rsp-sidebar__logo-icon {
        display: block;
        width: 44px;
        height: 44px;
    }

    /* Hide nav headings, tree structures, submenus, separators, curriculum tree */
    .rsp-page[data-sidebar="icons"] .rsp-sidebar__nav-heading,
    .rsp-page[data-sidebar="icons"] .rsp-tree__heading,
    .rsp-page[data-sidebar="icons"] .rsp-tree__folder,
    .rsp-page[data-sidebar="icons"] .rsp-tree__link--leaf,
    .rsp-page[data-sidebar="icons"] .rsp-submenu-section,
    .rsp-page[data-sidebar="icons"] .rsp-sidebar__separator,
    .rsp-page[data-sidebar="icons"] .curr-nav-wrapper,
    .rsp-page[data-sidebar="icons"] .navlist-section-heading {
        display: none;
    }

    /* Curriculum expand button: icon-only pill that reopens the sidebar */
    .rsp-page[data-sidebar="icons"] .rsp-sidebar .curr-nav-expand-btn {
        display: flex;
    }

    .rsp-page[data-sidebar="icons"] .rsp-sidebar__nav {
        padding: 1rem var(--spacing-sm, 0.25rem) var(--spacing-sm, 0.25rem);
        gap: 0;
        overflow: visible;
    }

    .rsp-page[data-sidebar="icons"] .rsp-sidebar__nav ul,
    .rsp-page[data-sidebar="icons"] .rsp-sidebar__nav li {
        overflow: visible;
    }

    /* Links: icon-only, fixed size; text appears as connected tooltip on hover */
    .rsp-page[data-sidebar="icons"] .rsp-sidebar__link,
    .rsp-page[data-sidebar="icons"] .rsp-sidebar__button {
        justify-content: center;
        padding: var(--spacing-sm, 0.25rem);
        width: 44px;
        height: 44px;
        gap: 0;
        position: relative;
        z-index: 1;
        border-width: 2px;
        border-style: solid;
        border-color: transparent;
        border-radius: 15px;
        transition: border-color var(--duration-xs, 0.2s),
                    background var(--duration-xs, 0.2s),
                    box-shadow var(--duration-xs, 0.2s);
    }

    /* Icon stays above the text-span gradient pill */
    .rsp-page[data-sidebar="icons"] .rsp-sidebar__link i {
        font-size: 1.125rem;
        line-height: 1;
        margin: 0;
        flex-shrink: 0;
        position: relative;
        z-index: 2;
    }

    /* Icon stays above the text-span gradient pill */
    .rsp-page[data-sidebar="icons"] .rsp-sidebar__button .pi {
        font-size: 1.125rem;
        line-height: 1;
        flex-shrink: 0;
        z-index: 2;
    }

    /* On hover: suppress link's own gradient – text-span provides the unified pill */
    .rsp-page[data-sidebar="icons"] .rsp-sidebar__link:hover,
    .rsp-page[data-sidebar="icons"] .rsp-sidebar__link:focus-visible,
    .rsp-page[data-sidebar="icons"] .rsp-sidebar__button:hover,
    .rsp-page[data-sidebar="icons"] .rsp-sidebar__button:focus-visible {
        background: none;
        border-color: transparent;
        z-index: 200;
    }

    /* Also suppress for active page links */
    .rsp-page[data-sidebar="icons"] .rsp-sidebar__link[aria-current="page"]:hover,
    .rsp-page[data-sidebar="icons"] .rsp-sidebar__link[aria-current="page"]:focus-visible,
    .rsp-page[data-sidebar="icons"] .rsp-sidebar__button.active,
    .rsp-page[data-sidebar="icons"] .rsp-sidebar__button[aria-current="page"] {
        background: none;
    }

    /* Text label: single unified gradient pill covering icon + text.
       Extends left to cover the link's border-box. On hover the gradient
       border wraps the entire pill shape seamlessly.
       Uses clip-path instead of visibility:hidden so screen readers can
       still access the text content (WCAG 4.1.2 / 1.3.1). */
    .rsp-page[data-sidebar="icons"] .rsp-sidebar__link-text,
    .rsp-page[data-sidebar="icons"] .rsp-sidebar__button .ui-button-text {
        position: absolute;
        left: -2px;
        top: -2px;
        bottom: -2px;
        display: flex;
        align-items: center;
        white-space: nowrap;
        padding-left: 42px;
        padding-right: 0.75rem;
        color: var(--rsp-color-text);
        font-size: 1rem;
        line-height: 1;
        border-width: 2px;
        border-style: solid;
        border-color: transparent;
        border-radius: 15px;
        --mcb-groundcolor: var(--panelBackgroundColor);
        --mcb-background: var(--mcb-groundcolor);
        --mcb-gradient-col1: var(--mcb-groundcolor);
        --mcb-gradient-col2: var(--mcb-groundcolor);
        --mcb-gradient-col3: var(--mcb-groundcolor);
        --mcb-gradient-col4: var(--mcb-groundcolor);
        --mcb-gradient-col5: var(--mcb-groundcolor);
        --mcb-gradient-col6: var(--mcb-groundcolor);
        background: conic-gradient(var(--mcb-background), var(--mcb-background)) padding-box,
                    conic-gradient(from var(--gradient-conic-angle), var(--mcb-gradient-col1), var(--mcb-gradient-col2), var(--mcb-gradient-col3), var(--mcb-gradient-col4), var(--mcb-gradient-col5), var(--mcb-gradient-col6)) border-box;
        /* Hidden state */
        opacity: 0;
        clip-path: inset(0 100% 0 0);
        transition: opacity 0.15s ease, clip-path 0.15s ease;
        z-index: 1;
        pointer-events: none;
    }

    /* Show unified gradient pill on hover/focus */
    .rsp-page[data-sidebar="icons"] .rsp-sidebar__link:hover .rsp-sidebar__link-text,
    .rsp-page[data-sidebar="icons"] .rsp-sidebar__link:focus-visible .rsp-sidebar__link-text,
    .rsp-page[data-sidebar="icons"] .rsp-sidebar__button:hover .ui-button-text,
    .rsp-page[data-sidebar="icons"] .rsp-sidebar__button:focus-visible .ui-button-text {
        opacity: 1;
        clip-path: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        pointer-events: auto;
        --mcb-gradient-col1: var(--accentColor1);
        --mcb-gradient-col2: var(--accentColor2);
        --mcb-gradient-col3: var(--accentColor3);
        --mcb-gradient-col4: var(--accentColor4);
        --mcb-gradient-col5: var(--accentColor5);
        --mcb-gradient-col6: var(--accentColor1);
        transition: opacity 0.15s ease, clip-path 0.15s ease;
    }
}

/* -- Sidebar: Logo ------------------------------------------------------- */
.rsp-sidebar__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    padding: var(--spacing-md, 0.5rem) 0;
    box-sizing: border-box;
    flex-shrink: 0;
    line-height: 0;
}

/* Full-width logo: visible by default */
.rsp-sidebar__logo-full {
    max-width: 180px;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Small icon logo: hidden by default, shown in icons-only state */
.rsp-sidebar__logo-icon {
    display: none;
    width: 44px;
    height: 44px;
    object-fit: contain;
}

/* -- Sidebar: Navigation ------------------------------------------------- */
.rsp-sidebar__nav {
    flex: 1;
    padding: 1rem var(--spacing-md, 0.5rem) var(--spacing-md, 0.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.25rem);
}

.rsp-sidebar__nav .menuForm {
    border-radius: var(--border-radius-xl);
    background-color: var(--surface-ground);
}

.rsp-sidebar__nav .submenuForm {
    margin-top: calc(var(--spacing-lg) * 2);
}

/* Reset list styles for primary/submenu lists (replaces inline styles) */
.rsp-sidebar__nav [role="list"] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rsp-sidebar__nav-heading {
    font-size: var(--font-size-smaller, 0.875rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rsp-color-text-secondary);
    padding: var(--spacing-md, 0.5rem) var(--spacing-md, 0.5rem) var(--spacing-sm, 0.25rem);
    margin: 0;
}

.rsp-sidebar__link,
.rsp-sidebar__button {
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 0.5rem);
    padding: var(--spacing-md, 0.5rem);
    color: var(--rsp-color-text);
    text-decoration: none;
    font-size: 1rem;
    margin: var(--spacing-sm);
    min-height: 2.5em;
    border-radius: 15px;
    &.ui-button {
        margin-top: 0;
        margin-right: var(--spacing-sm);
        width: -webkit-fill-available;
    }
}

.rsp-sidebar__link i ,
.rsp-sidebar__button .pi {
    font-size: 1.125rem;
    width: 1.5rem;
    text-align: center;
}

/* Separator between menu and sub-menu */
.rsp-sidebar__separator {
    height: 1px;
    background: var(--rsp-color-border);
    margin: var(--spacing-sm, 0.25rem) var(--spacing-md, 0.5rem);
    border: none;
}

/* --------------------------------------------------------------------------
   9. Tree structure (sidebar)
   --------------------------------------------------------------------------
   Simple nested list structure – no <details>/<summary> to avoid
   browser compatibility issues with PrimeFaces theme CSS.
   -------------------------------------------------------------------------- */

/* Tree heading (e.g. "Kapitel") – non-interactive label */
.rsp-tree__heading {
    font-weight: 600;
    cursor: default;
}

/* Folder level (e.g. "1 Einführung") – non-interactive label */
.rsp-tree__folder {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.25rem);
    padding: var(--spacing-sm, 0.25rem);
    color: var(--rsp-color-text);
    font-size: 1rem;
    font-weight: 600;
    min-height: 2rem;
}

.rsp-tree__folder i {
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}

/* Nested lists: indentation */
.rsp-tree__list {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.25rem;
}

/* Leaf items – clickable links */
.rsp-tree__link--leaf {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm, 0.25rem) var(--spacing-sm, 0.25rem) var(--spacing-sm, 0.25rem) 0.5rem;
    font-size: 1rem;
    color: var(--rsp-color-text);
    text-decoration: none;
    border-radius: var(--border-radius-md, 8px);
    min-height: 44px;
    transition: background var(--duration-xs, 0.2s);
}

.rsp-tree__link--leaf:hover,
.rsp-tree__link--leaf:focus-visible {
    background: var(--surface-c, #e9ecef);
}

/* --------------------------------------------------------------------------
   10. Main content area
   --------------------------------------------------------------------------
   Top padding accounts for the fixed header on all viewports.
   Left/right padding provides spacing from the edges.
   -------------------------------------------------------------------------- */
.rsp-page .rsp-main {
    grid-area: main;
    padding: calc(var(--rsp-header-height) + var(--spacing-lg, 1rem)) var(--spacing-xl, 1.5rem) var(--spacing-lg, 1rem);
    overflow-y: auto;
    /* Ensure skip-link anchor lands below the fixed header */
    scroll-margin-top: var(--rsp-header-height);
}

/* Content area form inputs: inherit font to match fluid typography */
.rsp-main__input {
    font-family: inherit;
    font-size: inherit;
}

/* --------------------------------------------------------------------------
   11. Utility: sr-only (screen reader only)
   -------------------------------------------------------------------------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link: visible on focus, positioned at top of page */
.sr-only--focusable:focus-visible {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0.75rem 1.5rem;
    overflow: visible;
    clip: auto;
    background: var(--rsp-color-active);
    color: var(--rsp-color-active-text);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* --------------------------------------------------------------------------
   12. Reduced motion – respect user preference (WCAG 2.3.3)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .rsp-header,
    .rsp-overlay,
    .rsp-burger__line,
    .rsp-header__avatar,
    .rsp-header__help,
    .rsp-header__search-btn,
    .rsp-sidebar,
    .rsp-sidebar-toggle,
    .rsp-sidebar-toggle i,
    .rsp-layout,
    .rsp-sidebar__link,
    .rsp-sidebar__link-text,
    .rsp-sidebar__button
    .rsp-sidebar__button .ui-button-text,
    .rsp-mobile-nav a {
        transition: none !important;
        animation: none !important;
    }
}

/* Utility: suppress transitions during programmatic state changes (e.g. resize) */
.no-transition {
    transition: none !important;
}

/* --------------------------------------------------------------------------
   13. Body scroll lock when mobile menu is open
   -------------------------------------------------------------------------- */
.rsp-page.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    /* JS must save/restore scrollY via style.top to prevent scroll-jump */
}


/* --------------------------------------------------------------------------
   14. Overlay close button
   --------------------------------------------------------------------------
   Visible close button in all dialog overlays for
   keyboard and screen reader users (WCAG 2.1.1).
   -------------------------------------------------------------------------- */
.rsp-overlay__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--rsp-color-border);
    border-radius: 50%;
    color: var(--rsp-color-text-secondary);
    cursor: pointer;
    font-size: 1.125rem;
    position: absolute;
    top: var(--spacing-md, 0.5rem);
    right: var(--spacing-md, 0.5rem);
    z-index: 10;
    --mcb-groundcolor: var(--panelBackgroundColor);
    --mcb-background: var(--mcb-groundcolor);
    --mcb-gradient-col1: var(--mcb-groundcolor);
    --mcb-gradient-col2: var(--mcb-groundcolor);
    --mcb-gradient-col3: var(--mcb-groundcolor);
    --mcb-gradient-col4: var(--mcb-groundcolor);
    --mcb-gradient-col5: var(--mcb-groundcolor);
    --mcb-gradient-col6: var(--mcb-groundcolor);
    background: conic-gradient(var(--mcb-background), var(--mcb-background)) padding-box,
                conic-gradient(from var(--gradient-conic-angle), var(--mcb-gradient-col1), var(--mcb-gradient-col2), var(--mcb-gradient-col3), var(--mcb-gradient-col4), var(--mcb-gradient-col5), var(--mcb-gradient-col6)) border-box;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.rsp-overlay__close:hover,
.rsp-overlay__close:focus-visible {
    border-width: 2px;
    border-color: transparent;
    --mcb-gradient-col1: var(--accentColor1);
    --mcb-gradient-col2: var(--accentColor2);
    --mcb-gradient-col3: var(--accentColor3);
    --mcb-gradient-col4: var(--accentColor4);
    --mcb-gradient-col5: var(--accentColor5);
    --mcb-gradient-col6: var(--accentColor1);
}

/* Preserve circular shape and ensure visible focus ring (global :focus-visible
   sets border-radius: 2px which would break the circle) */
.rsp-overlay__close:focus-visible {
    border-radius: 50%;
    box-shadow: var(--rsp-focus-ring);
}

/* -- Overlay footer (imprint, version) ----------------------------------- */
.rsp-overlay__footer {
    margin-top: auto;
    padding-top: var(--spacing-lg, 1rem);
    font-size: 0.75rem;
    color: var(--rsp-color-text-secondary);
    text-align: right;
    line-height: 1.6;
}

.rsp-overlay__footer a {
    color: var(--rsp-color-text-secondary);
    text-decoration: underline;
    transition: color var(--duration-xs, 0.2s);
}

.rsp-overlay__footer a:hover,
.rsp-overlay__footer a:focus-visible {
    color: var(--rsp-color-active);
}

/* --------------------------------------------------------------------------
   15. Forced colors / Windows High Contrast Mode (WCAG 1.4.11)
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
    .rsp-sidebar__link[aria-current="page"],
    .rsp-sidebar__button[aria-current="page"],
    .rsp-mobile-nav a[aria-current="page"] {
        border: 2px solid Highlight;
    }

    .rsp-burger__line {
        background: ButtonText;
    }

    .rsp-header__avatar {
        border-color: ButtonText;
    }

    .rsp-overlay__close {
        border-color: ButtonText;
        color: ButtonText;
    }

    .rsp-overlay__close:hover,
    .rsp-overlay__close:focus-visible {
        border-color: Highlight;
        color: Highlight;
        background: none;
    }

    .rsp-sidebar__separator,
    .rsp-mobile-nav__separator {
        background: CanvasText;
    }
}

/* --------------------------------------------------------------------------
   16. Increased contrast – prefers-contrast: more (WCAG 1.4.11)
   --------------------------------------------------------------------------
   Strengthens borders and shadows for users who requested increased contrast
   but are NOT in Windows High Contrast Mode (forced-colors).
   -------------------------------------------------------------------------- */
@media (prefers-contrast: more) {
    :root {
        --rsp-color-border: #495057;
        --rsp-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        --rsp-focus-ring: 0 0 0 3px rgba(21, 101, 192, 0.6);
    }

    .rsp-overlay__close {
        border-width: 2px;
    }

    .rsp-sidebar__separator,
    .rsp-mobile-nav__separator {
        height: 2px;
    }
}

/* --------------------------------------------------------------------------
   17. Print stylesheet
   --------------------------------------------------------------------------
   Hides chrome (header, sidebar, overlays), full-width content,
   no backgrounds to save ink.
   -------------------------------------------------------------------------- */
@media print {
    .rsp-header,
    .rsp-sidebar,
    .rsp-sidebar-toggle,
    .rsp-overlay,
    .rsp-burger,
    .sr-only--focusable,
    #rsp-live-region {
        display: none !important;
    }

    .rsp-layout {
        display: block !important;
    }

    .rsp-page .rsp-main {
        padding: 0 !important;
    }

    .rsp-page {
        background: white;
        color: black;
        font-size: 12pt;
    }

    .rsp-page h1 { font-size: 18pt; }
    .rsp-page h2 { font-size: 15pt; }
    .rsp-page h3 { font-size: 13pt; }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #555;
        word-break: break-all;
    }

    /* Don't print URL for fragment, javascript, or internal links */
    a[href^="#"]::after,
    a[href^="javascript"]::after {
        content: none;
    }
}