/**
 * Smartphone-Stufe: ≤720px — Ergänzung zu style_tablet.css (≤1023px).
 * Fokus: Header/Nav, volle Breite, Touch, Mathe-Kacheln, Bubble-Menü.
 */
@media (max-width: 720px) {
    :root {
        --mobile-page-pad: clamp(0.65rem, 3vw, 1rem);
        --mobile-touch-min: 2.75rem;
        --footer-safe-space: 3.5rem;
    }

    html {
        overflow-x: clip;
    }

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

    /* ── Header / Nav ───────────────────────────────────────────────── */
    header,
    .header {
        padding: 0.55rem var(--mobile-page-pad);
        gap: 0.35rem;
        max-width: 100%;
        overflow-x: clip;
    }

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

    .header-left {
        flex: 1 1 100%;
        padding: 0;
        max-width: 100%;
    }

    .header-left h1 {
        font-size: clamp(1.25rem, 6vw, 1.85rem);
    }

    .header-right {
        flex: 1 1 100%;
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0.35rem;
        max-width: 100%;
        min-width: 0;
    }

    .logged-in .header-right {
        flex-wrap: nowrap;
    }

    /* Ausgeloggt: Nav + Login-Icon in einer Zeile */
    .logged-out .header-right {
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
    }

    .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;
    }

    /* Eingeloggt: eine kompakte Toolbar-Zeile (Links + Icons + Logout) */
    .logged-in .header-right {
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.25rem;
        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 .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.12rem;
        flex-shrink: 0;
        min-width: 0;
        overflow: visible;
    }

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

    .logged-in .header-actions .focus-topbar-status {
        padding: 0.15rem 0.2rem 0.15rem 0.1rem;
        min-width: auto;
    }

    .logged-in .header-actions .focus-info-btn {
        padding: 0.15rem 0.25rem;
        min-width: auto;
    }

    .logged-in .header-actions .focus-visibility-btn {
        padding: 0.2rem 0.3rem;
        min-width: auto;
        min-height: 2.25rem;
    }

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

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

    .logged-in .focus-topbar-group {
        flex-shrink: 0;
    }

    .logged-in .focus-visibility-btn {
        padding: 0.25rem 0.35rem;
        min-width: auto;
        min-height: 2.25rem;
    }

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

    .logged-in .notif-btn,
    .logged-in .profile-btn {
        min-width: 2.25rem;
        min-height: 2.25rem;
        padding: 0.25rem;
        flex-shrink: 0;
        overflow: visible;
    }

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

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

    .logged-in .logout-btn {
        min-height: 2.25rem;
        padding: 0.35rem 0.6rem;
        font-size: 0.78rem;
        margin: 0;
        white-space: nowrap;
    }

    nav {
        flex-wrap: wrap;
        gap: 0.25rem 0.5rem;
        font-size: 0.82em;
        width: 100%;
        min-width: 0;
    }

    nav a,
    .notif-btn,
    .profile-btn {
        min-height: var(--mobile-touch-min);
        min-width: var(--mobile-touch-min);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.35rem 0.45rem;
    }

    .header-actions .focus-topbar-status,
    .header-actions .focus-info-btn,
    .header-actions .focus-visibility-btn {
        min-width: auto;
        min-height: 2.25rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .header-buttons {
        display: flex;
        gap: 0.35rem;
        flex-wrap: wrap;
        width: 100%;
    }

    .logout-btn,
    .login-btn {
        min-height: var(--mobile-touch-min);
        padding: 0.45rem 0.85rem;
        font-size: 0.9rem;
    }

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

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

    .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(--mobile-page-pad);
        padding-right: var(--mobile-page-pad);
        box-sizing: border-box;
    }

    /* ── Mathe: Kacheln & Welt-Schlange ─────────────────────────────── */
    .content {
        padding-left: var(--mobile-page-pad);
        padding-right: var(--mobile-page-pad);
        padding-bottom: calc(var(--footer-safe-space, 0.75rem) + 3.5rem);
        max-width: 100%;
        overflow-x: clip;
        box-sizing: border-box;
    }

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

    body.page-mathe-learning #content {
        padding-left: var(--mobile-page-pad);
        padding-right: var(--mobile-page-pad);
    }

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

    .tile-horizontal {
        padding: 0.55rem 0.6rem;
        box-sizing: border-box;
        overflow-x: clip;
    }

    .input-section,
    .loaded-content,
    .exercise-description {
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: clip;
    }

    body.content-path--world-snake #content-dynamic > .tile-horizontal:last-child {
        margin-top: calc(1rem + var(--snake-head-clearance, 3rem));
    }

    body.content-path--world-snake #timeline-svg path.timeline-connection-path {
        stroke-width: 14;
    }

    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);
    }

    .sidebar-tablet-menu-btn {
        width: calc(100% - 2 * var(--mobile-page-pad));
        max-width: none;
        margin-left: var(--mobile-page-pad);
        margin-right: var(--mobile-page-pad);
    }

    /* ── Übungen ────────────────────────────────────────────────────── */
    .exercise-task-row.exercise-type-s {
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .exercise-type-s .exercise-prompt {
        flex-wrap: wrap;
    }

    .drop-zone {
        width: min(150px, 30vw);
        height: min(150px, 30vw);
    }

    .drop-zone .draggable img {
        width: min(200px, 42vw);
        max-width: 100%;
        height: auto;
    }

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

    /* ── Bubble-Menü ────────────────────────────────────────────────── */
    .menu__toggle:checked ~ .menu__content .menu__item {
        --card-w: min(9rem, 40vw) !important;
        --card-h: min(5.25rem, 24vw) !important;
    }

    .menu__cardFace {
        font-size: 0.82rem;
        padding: 0.45rem 0.5rem 0.55rem;
        gap: 0.25rem;
    }

    .menu__cardFace .menu__title {
        font-size: clamp(0.62rem, 3.2vw, 0.85rem);
        line-height: 1.25;
    }

    .menu__cardFace .menu__subtitle {
        font-size: clamp(0.55rem, 2.8vw, 0.72rem);
    }

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

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

    /* ── Billing / Konto ────────────────────────────────────────────── */
    .account-page,
    .billing-page {
        padding-left: var(--mobile-page-pad);
        padding-right: var(--mobile-page-pad);
    }

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

    /* ── MathJax: kurze Formeln normal; lange nur via .mjx-scroll-wrap ─ */
    mjx-container {
        overflow: visible !important;
    }

    #content mjx-container,
    .loaded-content mjx-container,
    .exercise-description mjx-container,
    .exercise-mc mjx-container,
    .input-section mjx-container {
        font-size: 88%;
    }

    #content .input-section .text-and-image p mjx-container:not([display="true"]):not([display="block"]) {
        display: inline;
        max-width: none;
        overflow: visible !important;
        vertical-align: baseline;
    }

    .exercise-mc .answer-option {
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .exercise-mc .answer-option label,
    .exercise-mc .mc-answer-body {
        overflow-wrap: anywhere;
        word-break: break-word;
        hyphens: auto;
        max-width: 100%;
        min-width: 0;
    }

    .exercise-mc .answer-option mjx-container {
        display: inline-block !important;
        max-width: none;
        margin: 0;
        font-size: 88%;
        overflow: visible !important;
    }

    .input-section .text-and-image p,
    .exercise-description,
    .loaded-content {
        min-width: 0;
        overflow-wrap: break-word;
    }

    /* ── Footer: kompakt, Links umbrechen ───────────────────────────── */
    footer {
        padding: 0.45rem var(--mobile-page-pad);
        padding-bottom: calc(0.45rem + env(safe-area-inset-bottom, 0px));
        font-size: 0.75rem;
        line-height: 1.35;
    }

    footer .footer-content > p {
        font-size: 0.7rem;
        line-height: 1.35;
        padding: 0 0.15rem;
    }

    footer .footer-nav ul {
        gap: 0.2rem 0.45rem;
        margin-top: 0.3rem;
    }

    footer .footer-nav a {
        font-size: 0.7rem;
    }
}