/**
 * Barrierefreiheit & Responsive Typografie — schulunterricht.ch
 *
 * Layer: a11y (höchste Priorität in der Layer-Architektur)
 */

/* Layer-Reihenfolge (niedrigste → höchste Priorität) */
@layer reset, theme, layout, modules, a11y;

@layer a11y {

    /* ═══ 1. FLUID BASIS-SCHRIFTGRÖSSE ═══ */
    html {
        font-size: clamp(1rem, 0.85rem + 0.5vw, 1.1875rem);
    }

    /* ═══ 2. BODY ═══ */
    body {
        line-height: 1.6;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* ═══ 3. MINIMALE SCHRIFTGRÖSSEN ═══ */

    .shared,
    .inhalt-label,
    .item-label {
        font-size: 0.85rem;
    }

    .stat-l,
    .inhalt-meta,
    .inhalt-meta a,
    .item-meta,
    .btn-s,
    .btn-sm,
    .btn-del,
    .add-row input[type=file],
    .ordner-name,
    .fg label,
    .back,
    .leer {
        font-size: 0.9rem;
    }

    .topbar-right a {
        font-size: 0.95rem;
    }

    .card-desc,
    .page-sub,
    .l-sub,
    .sub,
    .link-row,
    .err,
    .ok,
    .msg,
    .inhalt-titel,
    .item-title {
        font-size: 1rem;
    }

    .fg input,
    .fg select,
    .add-row input[type=text],
    .add-row input[type=url],
    .add-row select,
    .btn,
    .link-btn,
    .card-action {
        font-size: 1rem;
    }

    footer {
        font-size: 0.9rem;
    }

    /* ═══ 4. TOUCH-TARGETS (WCAG 2.5.5) ═══ */
    .btn-sm,
    .btn-s,
    .btn-del,
    .filter-btn,
    .cal-view-btn,
    .cal-nav-btn,
    .cal-today-btn,
    .cal-event-card-del,
    .onboarding-close,
    .pf-btn,
    .add-pruefung-btn,
    .btn-archive-sj {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* ═══ 5. PREFERS-REDUCED-MOTION ═══ */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }

        .shape,
        .shape-1,
        .shape-2,
        .shape-3,
        .s1,
        .s2 {
            animation: none !important;
        }
    }

    /* ═══ 6. RESPONSIVE (max 480px) ═══ */
    @media (max-width: 480px) {
        .btn,
        .link-btn {
            padding: 1rem;
            font-size: 1rem;
        }

        .btn-sm,
        .btn-s {
            padding: 0.5rem 1rem;
        }

        /* iOS Auto-Zoom-Fix: Inputs mind. 16px,
           sonst zoomt iOS Safari beim Fokus. */
        input[type=text],
        input[type=email],
        input[type=password],
        input[type=search],
        input[type=url],
        input[type=tel],
        input[type=number],
        input[type=date],
        select,
        textarea,
        .pf-row input,
        .pf-row select {
            font-size: 1rem;
        }
    }

    /* ═══ 7. FOCUS-STYLES ═══ */
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
        outline: 3px solid #2323FF;
        outline-offset: 2px;
        border-radius: 4px;
    }

    /* ═══ 8. SKIP-LINK ═══ */
    .skip-link {
        position: fixed;
        top: -100%;
        left: 1rem;
        z-index: 9999;
        padding: 0.6rem 1.2rem;
        background: var(--blue, #2323FF);
        color: #fff;
        font-family: 'DM Sans', sans-serif;
        font-size: 0.9rem;
        font-weight: 500;
        border-radius: 0 0 10px 10px;
        text-decoration: none;
        transition: top 0.2s ease;

        &:focus {
            top: 0;
            outline: 3px solid #2323FF;
            outline-offset: 2px;
        }
    }

} /* Ende @layer a11y */