/**
 * Touch / schmale Viewports: ≤1023px (Tablet + Smartphone).
 * Smartphone-spezifische Feintuning-Regeln: style_mobile.css (≤720px).
 * Desktop-Basis-Styles bleiben unverändert; nur Ergänzungen in diesem Bereich.
 */
@media (max-width: 1023px) {
    :root {
        --tablet-touch-min: 2.75rem;
        --tablet-page-pad: clamp(0.75rem, 2vw, 1.35rem);
        --footer-safe-space: 4rem;
    }

    html {
        overflow-x: clip;
    }

    body {
        overflow-x: clip;
        max-width: 100%;
    }

    /* ── Global: Header, Nav, Touch ───────────────────────────────────── */
    header,
    .header {
        padding: 0.65rem var(--tablet-page-pad);
        max-width: 100%;
        overflow-x: clip;
        box-sizing: border-box;
        gap: 0.45rem;
    }

    header.logged-in,
    .header.logged-in {
        overflow: visible;
    }

    .header-left {
        flex: 0 1 auto;
        padding: 0 0.5rem 0 0;
        min-width: 0;
    }

    .header-left h1 {
        font-size: clamp(1.35rem, 3.5vw, 2rem);
    }

    .header-right {
        flex: 1 1 auto;
        gap: 0.5rem;
        flex-wrap: wrap;
        justify-content: flex-end;
        max-width: 100%;
        min-width: 0;
        overflow: visible;
    }

    .logged-out .header-right {
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
    }

    .logged-out .header-nav,
    .logged-out nav {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        flex-wrap: nowrap;
    }

    .logged-out .header-buttons {
        flex: 0 0 auto;
        width: auto;
        margin-left: auto;
    }

    .logged-in .header-right {
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.35rem;
        overflow: visible;
    }

    .logged-in .header-right > .header-nav {
        flex: 0 1 auto;
        width: auto;
        min-width: 0;
        max-width: none;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: visible;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-top: 0.35rem;
        margin-top: -0.35rem;
    }

    .logged-in .notif-btn {
        overflow: visible;
    }

    .logged-in .notif-badge {
        top: -0.15rem;
        right: -0.35rem;
        z-index: 2;
    }

    .logged-in .header-right > .header-nav::-webkit-scrollbar {
        display: none;
    }

    .logged-in .header-actions {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        justify-content: flex-end;
        gap: 0.25rem;
        flex-shrink: 0;
        min-width: 0;
        overflow: visible;
    }

    .logged-in .header-actions .focus-topbar-group {
        flex-shrink: 0;
        margin: 0;
        padding: 0.12rem 0.2rem;
    }

    .logged-in .header-actions .focus-topbar-status,
    .logged-in .header-actions .focus-info-btn,
    .logged-in .header-actions .focus-visibility-btn {
        min-width: auto;
        flex-shrink: 0;
        overflow: visible;
    }

    .logged-in .header-right > .header-buttons {
        flex: 0 0 auto;
        width: auto;
        flex-wrap: nowrap;
    }

    .logged-in .header-nav > a[href*="main.php"],
    .logged-in .header-nav > a[href*="entdecken.php"] {
        font-size: 0.84em;
        padding: 0.3rem 0.45rem;
        min-width: auto;
        white-space: nowrap;
    }

    .logged-in .notif-btn,
    .logged-in .profile-btn {
        min-width: var(--tablet-touch-min);
        min-height: var(--tablet-touch-min);
        padding: 0.3rem;
        flex-shrink: 0;
        overflow: visible;
    }

    .logged-in .focus-visibility-btn #focus-visibility-label,
    .logged-in .focus-visibility-btn span {
        display: none;
    }

    nav,
    .header-nav {
        flex-wrap: wrap;
        gap: 0.35rem 0.65rem;
        font-size: 0.88em;
        min-width: 0;
    }

    nav a,
    .header-nav a {
        padding: 0.45rem 0.55rem;
        min-height: var(--tablet-touch-min);
        display: inline-flex;
        align-items: center;
    }

    .header-actions .focus-topbar-status,
    .header-actions .focus-visibility-btn,
    .header-actions .focus-info-btn {
        min-height: var(--tablet-touch-min);
    }

    .login-btn,
    .logout-btn {
        min-height: var(--tablet-touch-min);
        padding: 0.5rem 1rem;
    }

    .notif-btn,
    .profile-btn {
        min-width: var(--tablet-touch-min);
        min-height: var(--tablet-touch-min);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .header-actions .focus-topbar-status,
    .header-actions .focus-visibility-btn,
    .header-actions .focus-info-btn {
        min-width: auto;
    }

    .focus-topbar-status,
    .focus-visibility-btn,
    .focus-info-btn {
        min-height: var(--tablet-touch-min);
    }

    .btn,
    button.btn,
    button.btn-small {
        min-height: 2.5rem;
        padding: 0.45rem 0.85rem;
    }

    .container:not(:has(.sidebar)),
    .container--info,
    .container--home-nordic,
    .container_personal {
        padding-left: var(--tablet-page-pad);
        padding-right: var(--tablet-page-pad);
        box-sizing: border-box;
    }

    footer {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }

    /* ── Vollflächiger Hintergrund + Footer-Platz (wie Mobile) ─────────── */
    body.page-app,
    body.page-brand-home {
        min-height: 100dvh;
        background-attachment: fixed;
        background-position: center top;
    }

    body.page-brand-home .container--home-nordic {
        min-height: calc(100dvh - 5.5rem);
        padding-bottom: calc(var(--footer-safe-space, 4rem) + 1rem);
        box-sizing: border-box;
    }

    .content {
        padding-bottom: calc(var(--footer-safe-space, 4rem) + 2rem);
        max-width: 100%;
        overflow-x: clip;
        box-sizing: border-box;
    }

    body.page-mathe-learning {
        min-height: 100dvh;
        background-attachment: fixed;
        background-position: center top;
    }

    body.page-mathe-learning #content-dynamic:empty {
        min-height: calc(100dvh - var(--mg-mathe-header-h, 5.5rem) - 5rem);
    }

    /* ── Bubble-Menü: Raster statt Kreis (721–1023px) ─────────────────── */
    .menu__toggle:checked ~ .menu__content .menu__item {
        --card-w: min(11rem, 34vw) !important;
        --card-h: min(6rem, 20vw) !important;
    }

    .menu__cardFace .menu__title {
        font-size: clamp(0.72rem, 2.2vw, 1rem);
        line-height: 1.25;
    }

    .menu__cardFace .menu__subtitle {
        font-size: clamp(0.62rem, 1.8vw, 0.82rem);
    }

    /* ── Startseite / Bigcards (Nordic: untereinander, volle Breite) ─ */
    .container--home-nordic {
        min-height: auto;
        padding: var(--tablet-page-pad);
    }

    .home-nordic-stage {
        --nordic-tile-gap: clamp(1.25rem, 4vw, 2rem);
    }

    .bigsection--nordic {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        gap: var(--nordic-tile-gap);
    }

    .bigsection--nordic .bigcard--nordic {
        flex: 0 0 auto;
        width: min(100%, 420px);
        max-width: min(100%, 420px);
        min-width: 0;
    }

    .bigcard-nordic__head h2 {
        max-width: none;
    }

    .bigsection {
        flex-wrap: wrap;
    }

    .bigcard {
        flex: 1 1 calc(50% - 1rem);
        min-width: 200px;
    }

    /* ── Mathe-Lernseite: Sidebar-Drawer ─────────────────────────────── */
    body.page-mathe-learning {
        --mg-mathe-header-h: 5.5rem;
    }

    body.page-mathe-learning .header {
        position: sticky;
        top: 0;
        z-index: 130;
    }

    body.page-mathe-learning .container:has(.sidebar) {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
        overflow-x: clip;
    }

    body.page-mathe-learning .container:has(.sidebar.collapsed) {
        padding-left: 0;
    }

    body.page-mathe-learning .container:has(.sidebar) > .sidebar {
        position: fixed;
        left: 0;
        top: var(--mg-mathe-header-h);
        width: min(18.5rem, 88vw);
        min-width: unset;
        max-width: 88vw;
        height: calc(100dvh - var(--mg-mathe-header-h));
        max-height: calc(100dvh - var(--mg-mathe-header-h));
        padding: 1rem 0.85rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
        transition: transform 0.22s ease;
        z-index: 125;
        box-shadow: 8px 0 28px rgba(0, 0, 0, 0.18);
        cursor: default;
        background-color: #ccc;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }

    body.page-mathe-learning .container:has(.sidebar) > .sidebar:not(.sidebar-tablet-open) {
        transform: translateX(-105%);
    }

    body.page-mathe-learning .container:has(.sidebar) > .sidebar.sidebar-tablet-open {
        transform: translateX(0);
    }

    body.page-mathe-learning .sidebar.collapsed {
        width: min(18.5rem, 88vw);
        min-width: unset;
        padding: 1rem 0.85rem;
        background-color: #ccc;
    }

    body.page-mathe-learning .sidebar.collapsed::before {
        display: none;
    }

    body.page-mathe-learning .sidebar.collapsed > ul,
    body.page-mathe-learning .sidebar.collapsed > p,
    body.page-mathe-learning .sidebar.collapsed .mathe-lp-hint {
        display: revert;
    }

    /* Tablet: gleiches Auf-/Zuklappen wie Desktop (nicht dauerhaft offen) */
    body.page-mathe-learning .sidebar > ul > li > a.sidebar-branch-toggle::before {
        content: "►";
    }

    body.page-mathe-learning .sidebar > ul > li > a.sidebar-branch-toggle[aria-expanded="true"]::before {
        content: "▾";
    }

    body.page-mathe-learning .sidebar ul li a.sidebar-branch-toggle,
    body.page-mathe-learning .sidebar ul li a.sidebar-topic-link {
        display: flex;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        pointer-events: auto;
        touch-action: manipulation;
    }

    .sidebar-tablet-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        margin: 0.5rem var(--tablet-page-pad) 0.75rem;
        padding: 0.55rem 1rem;
        min-height: var(--tablet-touch-min);
        font-size: 0.95rem;
        font-weight: 700;
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-radius: 8px;
        background: #fff;
        color: #333;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        width: calc(100% - 2 * var(--tablet-page-pad));
        max-width: none;
        box-sizing: border-box;
        position: relative;
        z-index: 100;
    }

    .sidebar-tablet-backdrop {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: var(--mg-mathe-header-h, 5.5rem);
        z-index: 124;
        background: rgba(15, 23, 42, 0.45);
    }

    body.page-mathe-learning .container > .content,
    body.page-mathe-learning #content {
        max-width: 100%;
        overflow-x: clip;
        box-sizing: border-box;
        padding-left: var(--tablet-page-pad);
        padding-right: var(--tablet-page-pad);
    }

    body.page-mathe-learning #content-dynamic,
    body.page-mathe-learning #timeline-svg-stack,
    body.page-mathe-learning #timeline-svg {
        max-width: 100%;
    }

    body.page-mathe-learning .tile[data-pos="left"],
    body.page-mathe-learning .tile[data-pos="right"],
    body.page-mathe-learning .tile[data-pos="center"],
    body.page-mathe-learning .tile-horizontal {
        align-self: stretch;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    body.page-mathe-learning .tile-title {
        overflow-wrap: anywhere;
        word-break: break-word;
        hyphens: auto;
    }

    body.page-mathe-learning .exercises,
    body.page-mathe-learning .exercise,
    body.page-mathe-learning .exercise-description {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow-x: clip;
    }

    body.page-mathe-learning .exercise-description {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    body.page-mathe-learning .input-section {
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: clip;
        padding-left: clamp(0.65rem, 3vw, 1.25rem);
        padding-right: clamp(0.65rem, 3vw, 1.25rem);
    }

    body.page-mathe-learning .sidebar ul li a {
        min-height: var(--tablet-touch-min);
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0.35rem 0;
        box-sizing: border-box;
    }

    body.page-mathe-learning .input-section .text-and-image img.image-right,
    body.page-mathe-learning .input-section .text-and-image img:not(.image-right) {
        float: none;
        margin: 0 auto 1rem;
        max-width: 100%;
        height: auto;
    }

    body.page-mathe-learning .exercise-input {
        width: 100%;
        max-width: min(100%, 18rem);
        min-height: 2.75rem;
        font-size: 1rem;
    }

    body.page-mathe-learning .exercise-mc .multiple-choice-form {
        grid-template-columns: 1fr 1fr;
        gap: 0.65rem;
    }

    body.page-mathe-learning .exercise-mc .answer-option {
        min-height: var(--tablet-touch-min);
        align-items: center;
        overflow: visible;
    }

    body.page-mathe-learning .exercise-mc .answer-option label {
        overflow: visible;
    }

    body.page-mathe-learning .exercise-mc .answer-option input[type="radio"] {
        transform: scale(1.35);
    }

    body.page-mathe-learning .exercise-mc .multiple-choice-form {
        grid-template-columns: 1fr;
    }

    body.page-mathe-learning .mjx-container {
        max-width: 100%;
        overflow: visible;
    }

    .assignment-panel-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* ── Klassenmanagement (Lehrer) ─────────────────────────────────── */
    .classes-wrapper {
        padding: var(--tablet-page-pad);
        gap: 1.25rem;
    }

    .classes-page-hero__inner {
        width: 100%;
        padding: 1.1rem 1rem;
    }

    .classes-wrapper .class-band-inner,
    .class-band-inner,
    .class-table-responsive {
        width: 100%;
        max-width: none;
    }

    .class-band-inner {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .class-admin-actions {
        flex-wrap: wrap;
    }

    .class-table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .class-table {
        min-width: 36rem;
    }

    .class-table thead th,
    .class-table tbody td {
        padding: 0.55rem 0.65rem;
        font-size: 0.92rem;
    }

    .focus-session-panel__inner {
        padding: 1rem;
    }

    .focus-session-class-picks {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
    }

    .focus-class-pick-label {
        min-height: var(--tablet-touch-min);
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
    }

    /* ── Fortschritt / Aufgaben ─────────────────────────────────────── */
    .container_personal {
        padding: 1rem var(--tablet-page-pad) 9rem;
    }

    .stats-result {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.85rem;
    }

    .page-teacher-progress .progress-teacher-shell {
        max-width: 100%;
        padding-left: var(--tablet-page-pad);
        padding-right: var(--tablet-page-pad);
    }

    .page-teacher-progress .teacher-assignment-archive-section .assignment-archive-list,
    .page-student-progress .assignment-archive-list,
    .page-teacher-progress .assignment-archive-list {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Lernpfad ───────────────────────────────────────────────────── */
    .lp-shell {
        padding-left: var(--tablet-page-pad);
        padding-right: var(--tablet-page-pad);
    }

    .lp-grid {
        grid-template-columns: 1fr;
    }

    .lp-card {
        min-height: var(--tablet-touch-min);
    }

    .lp-preset-btn {
        min-height: var(--tablet-touch-min);
    }

    /* ── Konto / Billing ────────────────────────────────────────────── */
    .account-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .account-page,
    .billing-page {
        padding-left: var(--tablet-page-pad);
        padding-right: var(--tablet-page-pad);
        box-sizing: border-box;
    }

    .billing-grid {
        grid-template-columns: 1fr;
    }

    .billing-license-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .account-form input,
    .account-form select,
    .account-form textarea {
        min-height: 2.75rem;
        font-size: 1rem;
    }

    /* ── Info-Seiten ────────────────────────────────────────────────── */
    .container--info {
        padding: 0 var(--tablet-page-pad) 6rem;
    }

    .info-stage {
        padding: 0.5rem 0 2rem;
    }

    .info-card {
        padding: 1.15rem 1.2rem;
    }

    /* ── Entdecken / Demo ───────────────────────────────────────────── */
    .mg-demo-page {
        padding-left: var(--tablet-page-pad);
        padding-right: var(--tablet-page-pad);
        overflow-x: hidden;
    }

    .mg-demo-showcase__frame,
    .mg-demo-showcase__panel,
    .mg-demo-stats-split,
    .mg-demo-stats-split__chart,
    .mg-demo-stats-split__metrics {
        min-width: 0;
        max-width: 100%;
    }

    .mg-demo-hero__stage {
        grid-template-columns: 1fr;
    }

    .mg-demo-jump-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* ── Login / Register Modal ─────────────────────────────────────── */
    .modal-content {
        width: min(92vw, 28rem);
        max-height: 90dvh;
        overflow-y: auto;
    }

    .modal-content input,
    .modal-content select,
    .modal-content button {
        min-height: 2.75rem;
        font-size: 1rem;
    }

    body.page-register .register-page {
        padding: 1rem var(--tablet-page-pad) 6rem;
    }

    .register-facts__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .sidebar-tablet-menu-btn,
    .sidebar-tablet-backdrop {
        display: none !important;
    }
}