/* =============================================================================
   Telefon-Ansicht — html.phone-layout (single CSS gate)

   Class set early in boot-prefs.js; kept in sync by isPhoneLayout /
   syncPhoneLayoutClass (app.js). True when data-layout=phone OR (auto and ≤640px);
   false when data-layout=desktop.

   Contract (sync with app.js near getAppScrollRoot):
   1) Scroll: .phone-preview-active → #app-shell (getAppScrollRoot / scrollAppTo)
   2) Sticky top: JS only (pinModuleTableHeader → getModuleStickyBase = HUD+gap)
      CSS may set position:sticky + chrome; never top:!important on pins
   3) Pin filter menus: max-height via --phone-pin-menu-max-h + overflow-y auto
   4) One rule path: html.phone-layout (prefer; ≤640 media only where still needed)

   Checklist before changing phone chrome:
   [ ] Scroll uses scrollAppTo / getAppScrollY (not window.scrollTo) in app chrome
   [ ] Pin top set only via pinModuleTableHeader (never clear sticky with top:!important)
   [ ] New sticky chip menus use .verb-table-pin-head > .st-chips (height-capped)

   Still media-gated (viewport-true): landing document-scroll / iOS scrollport (≤640),
   min-width 641px desktop overrides, prefers-reduced-motion.

   Tokens: --phone-pad*, --phone-alpha-chip-h (32px), --phone-pin-menu-max-h
   ============================================================================= */

/* --- html.phone-layout (hoisted from ≤640 media; applies to forced-wide phone too) --- */
html.phone-layout .hud-account-menu:not([hidden]) {
    display: block !important;
  }
html.phone-layout .hud-search,
  html.phone-layout .kbd-trigger-btn,
  html.phone-layout .terminal-hud .lang-pref-menu,
  html.phone-layout .terminal-hud #hud-access-expires {
    display: none !important;
  }
html.phone-layout .hud-phone-search-btn {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 6px !important;
    border: 1px solid var(--color-border, #334155) !important;
    background: var(--bg-card, #1e293b) !important;
    color: var(--color-text-strong, #fff) !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }
html.phone-layout .hud-phone-search-btn.is-active {
    border-color: var(--cyber-cyan, #06b6d4) !important;
    color: var(--cyber-cyan, #06b6d4) !important;
  }
html.phone-layout .appearance-pref-menu {
    display: flex !important;
    flex: 0 0 auto !important;
  }
html.phone-layout .appearance-pref-menu .accent-swatches {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 !important;
  }
html.phone-layout #hud-signout-btn {
    display: none !important;
  }
html.phone-layout .hud-pref-btn,
  html.phone-layout .theme-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 6px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation !important;
  }
html.phone-layout,
  html.phone-layout body {
    overflow-x: clip;
    max-width: 100%;
  }
html.phone-layout .module-section {
    max-width: 100%;
    overflow-x: clip;
  }
html.phone-layout .module-section > .chapter-nav.chap-subnav-card .chapter-nav-row {
    grid-template-columns: 1fr;
    gap: 6px;
    width: 100%;
    min-width: 0;
  }
html.phone-layout .module-section > .chapter-nav.chap-subnav-card .chapter-nav-pills {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity;
    gap: 8px !important;
    width: 100% !important;
    padding: 2px 6px 8px 2px !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
  }
html.phone-layout .module-section > .chapter-nav.chap-subnav-card .chapter-nav-pills::-webkit-scrollbar {
    display: none !important;
  }
html.phone-layout .module-section > .chapter-nav.chap-subnav-card .chapter-nav-pills::after {
    display: none !important;
    content: none !important;
  }
html.phone-layout .module-section > .chapter-nav.chap-subnav-card .chapter-nav-pill {
    flex: 0 0 auto !important;
    width: auto !important;
    height: 44px !important;
    min-height: 44px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    padding: 0 16px !important;
    text-align: center !important;
    scroll-snap-align: start;
    touch-action: pan-x;
  }
html.phone-layout .verb-table-pin-head {
    flex-wrap: wrap;
    align-items: stretch;
    align-content: flex-start;
    gap: 6px;
    padding: 8px 8px 8px 0;
    max-width: 100%;
    box-sizing: border-box;
  }
html.phone-layout .verb-table-pin-head > .st-chips {
    flex: 1 1 100%;
    width: 100%;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0 0 0 4px;
    max-height: var(--phone-pin-menu-max-h);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
html.phone-layout .verb-table-pin-head > .st-chips .menu-chip {
    min-height: 34px;
    padding: 4px 8px;
    touch-action: manipulation;
  }
/* Sticky-Pin Filter: Falsche Freunde / Kollokationen / Wortbildung — kompakt + höhenbegrenzt */
html.phone-layout #falsche-freunde-pin-head > .st-chips,
html.phone-layout #kollokationen-pin-head > .st-chips,
html.phone-layout #wortbildung-pin-head > .st-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex-wrap: unset;
    flex: 1 1 100%;
    width: 100%;
    gap: 6px;
    margin: 0;
    padding: 0 0 0 4px;
    max-height: var(--phone-pin-menu-max-h);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
html.phone-layout #falsche-freunde-pin-head > .st-chips .menu-chip,
html.phone-layout #kollokationen-pin-head > .st-chips .menu-chip,
html.phone-layout #wortbildung-pin-head > .st-chips .menu-chip {
    width: 100%;
    justify-content: center;
    text-align: center;
    min-width: 0;
    min-height: 34px;
    padding: 3px 6px;
    touch-action: manipulation;
  }
html.phone-layout #adj-praep-pin-head > .st-chips {
    flex: 1 1 100%;
    width: 100%;
    max-height: var(--phone-pin-menu-max-h);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
html.phone-layout #fremdwoerter-menu-card {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
  }
html.phone-layout #fremdwoerter-menu-card .fw-chip-block {
    flex: 1 1 auto;
    width: 100%;
  }
html.phone-layout #fremdwoerter-menu-card .st-chips {
    display: grid;
    flex-wrap: unset;
    max-height: var(--phone-pin-menu-max-h);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
html.phone-layout #fremdwoerter-menu-card .fw-herkunft-chips {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: none;
    overflow: visible;
  }
html.phone-layout #fremdwoerter-menu-card .fw-cat-chips,
  html.phone-layout #fremdwoerter-menu-card #fremdwoerter-cat-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
html.phone-layout #fremdwoerter-menu-card .st-chips .menu-chip {
    width: 100%;
    justify-content: center;
    text-align: center;
    min-width: 0;
    min-height: 34px;
    padding: 3px 4px;
    touch-action: manipulation;
  }
html.phone-layout #fremdwoerter-pin-head .verb-table-pin-head-row {
    flex: 1 1 100%;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }
html.phone-layout #fremdwoerter-pin-head .verb-table-pin-head-row .alpha-jump {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    flex-wrap: unset;
    padding: 4px 0;
    scroll-snap-type: none;
  }
html.phone-layout #fremdwoerter-pin-head .verb-table-pin-head-row .alpha-jump-btn {
    min-width: 0 !important;
    width: 100%;
    min-height: var(--phone-alpha-chip-h) !important;
    height: var(--phone-alpha-chip-h) !important;
    max-height: var(--phone-alpha-chip-h) !important;
    font-size: 10pt;
    font-weight: 700;
    border-radius: 6px;
    touch-action: manipulation;
    scroll-snap-align: none;
  }
html.phone-layout #fremdwoerter-pin-head .verb-table-pin-head-row .alpha-count {
    margin-left: auto;
    margin-right: 0;
    order: 0;
  }
html.phone-layout #fremdwoerter-pin-head .verb-table-pin-head-row .alpha-scroll-top-btn {
    order: 0;
  }
html.phone-layout #fremdwoerter-table th:nth-child(2),
  html.phone-layout #fremdwoerter-table td.fw-kennzeichnung {
    min-width: 8.25em !important;
    max-width: 10em !important;
    width: 9em !important;
  }
html.phone-layout #fremdwoerter-table th:nth-child(2) {
    white-space: nowrap !important;
  }
html.phone-layout #fremdwoerter-table tbody td,
  html.phone-layout #fremdwoerter-table tbody td strong,
  html.phone-layout #fremdwoerter-table tbody td span {
    font-size: var(--phone-table-font-size) !important;
    line-height: var(--phone-table-line-height) !important;
  }
html.phone-layout #fremdwoerter-table .fw-kenn-stack {
    gap: 0.2rem;
    width: 100%;
  }
html.phone-layout #fremdwoerter-table .fw-badge {
    font-size: 0.66em !important;
    padding: 2px 4px;
  }
html.phone-layout .verb-table-pin-head .alpha-jump {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: 6px 4px;
    margin: 0;
    scrollbar-width: thin;
  }
html.phone-layout .verb-table-pin-head > .alpha-count,
  html.phone-layout .verb-table-pin-head > .alpha-scroll-top-btn,
  html.phone-layout .verb-table-pin-head > .cyber-btn,
  html.phone-layout .verb-table-pin-head > .lang-pref-menu--pin-head {
    flex: 0 0 auto;
  }
html.phone-layout .verb-table-pin-head > .lang-pref-menu--pin-head {
    order: 2;
  }
html.phone-layout .verb-table-pin-head > .alpha-count {
    margin-right: auto;
  }
html.phone-layout .table-container {
    max-width: 100%;
    box-sizing: border-box;
  }
html.phone-layout .table-container.table-container--with-alpha {
    max-width: 100%;
    /* visible: Alphabet-/Pin-Head darf sticky am Viewport kleben */
    overflow: visible !important;
  }
html.phone-layout .table-container.table-container--with-alpha > .table-h-scroll {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    position: relative;
    touch-action: pan-x pan-y pinch-zoom;
  }
html.phone-layout .table-h-scroll.has-h-scroll-hint::after {
    content: "↔ wischen";
    position: absolute;
    right: 6px;
    bottom: 6px;
    z-index: 5;
    pointer-events: none;
    padding: 3px 8px;
    font-family: var(--font-mono);
    font-size: 7pt;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cyber-cyan);
    background: color-mix(in srgb, var(--bg-card) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--cyber-cyan) 35%, transparent);
    border-radius: 4px;
    opacity: 0.92;
  }
html.phone-layout #adj-praep-table {
    table-layout: auto;
    width: max-content;
    min-width: 100%;
  }
html.phone-layout #adj-praep-table th.adj-praep-th-adj,
  html.phone-layout #adj-praep-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 12;
    min-width: 7.5em;
    width: auto;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
  }
html.phone-layout #adj-praep-table thead th.adj-praep-th-adj {
    z-index: 25;
  }
html.phone-layout #adj-praep-pin-head {
    flex-wrap: wrap;
  }
html.phone-layout #adj-praep-prep-pin-head {
    flex-wrap: wrap;
  }
html.phone-layout #adj-praep-prep-pin-head > .st-chips {
    flex: 1 1 100%;
    flex-wrap: wrap;
    max-height: var(--phone-pin-menu-max-h);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
html.phone-layout #adj-praep-prep-table {
    --wortschatz-3col-c1: min(14em, 42vw);
    min-width: 100%;
  }
html.phone-layout #adjektive-suffix-table,
  html.phone-layout #adjektive-praefix-matrix-table {
    table-layout: auto;
    width: max-content;
    min-width: 100%;
  }
html.phone-layout #adjektive-suffix-table th:first-child,
  html.phone-layout #adjektive-suffix-table td:first-child,
  html.phone-layout #adjektive-praefix-matrix-table th:first-child,
  html.phone-layout #adjektive-praefix-matrix-table td:first-child,
  html.phone-layout #adjektive-praefix-gruppen-table th.adj-praefix-th-stamm,
  html.phone-layout #adjektive-praefix-gruppen-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 12;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
  }
html.phone-layout .phone-matrix-tip {
    margin: 0 0 10px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.45;
  }
html.phone-layout .phone-matrix-tip .phone-tip-link {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cyber-cyan);
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
    touch-action: manipulation;
  }
html.phone-layout .cards-grid {
    grid-template-columns: 1fr;
  }
html.phone-layout .nav-console {
    padding-left: var(--phone-pad);
    padding-right: var(--phone-pad-r);
    margin-bottom: 12px;
  }
html.phone-layout .module-section > .chapter-nav.chap-subnav-card {
    margin-bottom: 10px;
    padding: 8px 10px;
  }
html.phone-layout .module-section > #redemittel-sit-subnav.chapter-nav.chap-subnav-card {
    position: relative;
    top: auto;
    z-index: auto;
    box-shadow: none;
  }
html.phone-layout {
    --sticky-stack-gap: 4px;
  }
html.phone-layout .terminal-hud {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    height: auto !important;
    min-height: 52px !important;
    max-height: none !important;
    padding: max(6px, env(safe-area-inset-top, 0px)) var(--phone-pad-r) 8px var(--phone-pad) !important;
    margin: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    position: fixed !important;
    z-index: 1000 !important;
    background: var(--bg-card, #1e293b) !important;
    border: none !important;
    border-bottom: 1px solid var(--cyber-cyan, #06b6d4) !important;
    border-radius: 0 !important;
    box-shadow:
      0 1px 0 0 color-mix(in srgb, var(--cyber-cyan, #06b6d4) 35%, transparent),
      0 8px 20px rgba(2, 8, 18, 0.28) !important;
  }
html.phone-layout .home-toc {
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
    margin-bottom: 4px;
  }
html.phone-layout .home-hub {
    gap: 10px;
  }
html.phone-layout .home-hub:has(#home-hub-placeholder.is-visible) .home-hub-main {
    height: auto !important;
    min-height: 0;
    overflow: visible !important;
  }
html.phone-layout .home-hub-placeholder.is-visible {
    margin-bottom: 4px;
  }
html.phone-layout .home-toc-btn {
    min-height: 48px;
    font-size: var(--ui-btn-font-size);
    padding: 10px 12px;
  }
html.phone-layout .sub-chap-item {
    min-height: 48px;
    padding: 14px 14px;
    font-size: 9.5pt;
  }
html.phone-layout .haupt-header {
    min-height: 44px;
    padding: 12px 14px;
  }
html.phone-layout .breadcrumbs {
    font-size: var(--ui-font-size-sm);
    line-height: 1.4;
    gap: 0 2px;
  }
html.phone-layout .breadcrumbs > .sep,
  html.phone-layout .breadcrumbs > a:not(:first-of-type) {
    display: none;
  }
html.phone-layout .breadcrumbs > .bc-overview,
  html.phone-layout .breadcrumbs > .bc-overview-sep {
    display: none !important;
  }
html.phone-layout .breadcrumbs > a:first-of-type::after {
    content: " › ";
    color: var(--color-text-muted);
    font-weight: 400;
  }
html.phone-layout .breadcrumbs > .module-label {
    display: inline;
    font-weight: 700;
  }
html.phone-layout .nav-console {
    padding: 8px 10px;
    margin-bottom: 10px;
    gap: 6px;
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
  }
html.phone-layout .module-section .page-section-nav,
html.phone-layout .module-section > .chapter-nav.chap-subnav-card ~ .view-screen .page-section-nav,
html.phone-layout .module-section > .chapter-nav.chap-subnav-card ~ .page-section-nav {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
    margin-top: 10px;
    margin-bottom: 12px;
  }
html.phone-layout .module-section > .chapter-nav.chap-subnav-card:not([data-sticky-chrome="0"]),
html.phone-layout .module-section > .chapter-nav[data-chapter-chrome="top"] {
    /* Phone: Menükarten nicht sticky — sonst liegen sie dauerhaft auf den Erklärkarten. */
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
  }
html.phone-layout .module-section .cyber-card[data-deck-card],
html.phone-layout .module-section .cyber-card {
    /* Sprung zur Karte: unter dem HUD halten, nicht darunter schieben */
    scroll-margin-top: calc(var(--hud-height, 56px) + var(--sticky-stack-gap, 4px) + 8px);
  }
html.phone-layout .cyber-card-body:has(.table-h-scroll) {
    /* Scrollport = .table-h-scroll (Wischen); Body darf den nicht clippen */
    overflow-x: visible !important;
  }
html.phone-layout .module-section.portal-enter {
    animation: phone-portal-enter 0.32s ease-out;
  }
html.phone-layout.phone-nav-flash::after {
    content: "";
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    left: 12%;
    right: 12%;
    height: 3px;
    z-index: 10050;
    pointer-events: none;
    border-radius: 2px;
    background: var(--cyber-cyan);
    box-shadow: 0 0 10px color-mix(in srgb, var(--cyber-cyan) 55%, transparent);
    animation: phone-nav-flash-bar 0.42s ease-out forwards;
  }
html.phone-layout .cyber-btn,
  html.phone-layout .menu-chip,
  html.phone-layout .chapter-nav-pill {
    min-height: 44px;
    touch-action: manipulation;
  }
html.phone-layout #wortfelder-fields-bar.chap-subnav-card {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
    margin-bottom: 12px;
    padding: 10px 10px 12px;
  }
html.phone-layout #wortfelder-fields-bar .page-section-nav-mark {
    display: none;
  }
html.phone-layout #wortfelder-fields-bar .chapter-nav-row {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 10px;
  }
html.phone-layout #wortfelder-fields-bar .chapter-nav-row-label {
    display: block;
    font-size: var(--ui-font-size-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 2px;
  }
html.phone-layout #wortfelder-fields-bar .chapter-nav-pills {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    overflow: visible !important;
    flex-wrap: unset !important;
    max-height: none !important;
  }
html.phone-layout #wortfelder-fields-bar .chapter-nav-pills::after {
    display: none !important;
    content: none !important;
  }
html.phone-layout #wortfelder-fields-bar .wortfelder-menu-sort-row .chapter-nav-pills {
    grid-template-columns: 1fr;
  }
html.phone-layout #wortfelder-fields-bar .wortfelder-theme-group-row .chapter-nav-pills {
    grid-template-columns: 1fr 1fr;
  }
html.phone-layout #wortfelder-fields-bar .chapter-nav-pill {
    width: 100%;
    min-height: 48px;
    height: auto;
    padding: 12px 14px;
    white-space: normal;
    line-height: 1.25;
    text-align: left;
    font-size: 9.5pt;
    border-radius: 8px;
    touch-action: manipulation;
  }
html.phone-layout #wortfelder-pin-head {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 8px 0;
    margin-bottom: 4px;
    /* opaque chrome when stuck — list must not show through */
    background-color: var(--bg-card);
    background-image: linear-gradient(var(--cyber-cyan-dim), var(--cyber-cyan-dim));
  }
html.phone-layout #wortfelder-pin-head .alpha-jump {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    flex-wrap: unset;
    padding: 0;
    scroll-snap-type: none;
  }
html.phone-layout #wortfelder-pin-head .alpha-jump-btn {
    min-width: 0 !important;
    width: 100%;
    min-height: var(--phone-alpha-chip-h) !important;
    height: var(--phone-alpha-chip-h) !important;
    max-height: var(--phone-alpha-chip-h) !important;
    font-size: 10pt;
    font-weight: 700;
    border-radius: 6px;
    touch-action: manipulation;
  }
html.phone-layout #wortfelder-pin-head > .alpha-count {
    order: 0;
    margin-right: auto;
    min-height: var(--phone-alpha-chip-h) !important;
    height: var(--phone-alpha-chip-h) !important;
    max-height: var(--phone-alpha-chip-h) !important;
    font-size: var(--ui-btn-font-size);
  }
html.phone-layout #wortfelder-pin-head > .alpha-scroll-top-btn {
    order: 0;
    min-height: var(--phone-alpha-chip-h) !important;
    height: var(--phone-alpha-chip-h) !important;
    min-width: var(--phone-alpha-chip-h);
  }
/* Wortfelder-Liste = normale Tabelle (wie Verstärker/Kuriositäten), kein Karten-Stack.
   Horizontal-Scroll über generische Phone-Table-Regeln; ABC bleibt sticky unter HUD. */
html.phone-layout #wortfelder-container > .table-h-scroll {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
html.phone-layout #wortfelder-table .wortfelder-status {
    min-height: 5rem;
    padding: 1.25rem 1rem;
    font-size: 1rem;
  }
html.phone-layout #wortfelder-table .wortfelder-load-more-btn {
    min-height: 44px;
    touch-action: manipulation;
  }
html.phone-layout #mod-wortschatz-wortfelder > .info-box {
    font-size: var(--ui-font-size-sm);
    line-height: 1.45;
    padding: 10px 12px;
    margin-bottom: 10px;
  }
html.phone-layout #mod-wortschatz-herkunft .herkunft-table td:first-child {
    white-space: normal;
  }
html.phone-layout #mod-wortschatz-herkunft .herkunft-wf-line {
    display: block;
    margin-top: 3px;
    font-size: 7pt;
    opacity: 0.58;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
html.phone-layout #mod-wortschatz-herkunft .herkunft-wf-link {
    max-width: none;
    padding: 2px 0;
    min-height: 22px;
    touch-action: manipulation;
  }
html.phone-layout #herkunft-pin-head {
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 12px;
  }
html.phone-layout #herkunft-pin-head .herkunft-menu-card {
    max-height: var(--phone-pin-menu-max-h);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 8px 10px;
  }
html.phone-layout #herkunft-alpha.is-lang-jump {
    gap: 4px;
  }
html.phone-layout #herkunft-alpha.is-lang-jump .herkunft-chip-row {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 4px 0 !important;
  }
html.phone-layout #herkunft-alpha.is-lang-jump .herkunft-row-chips {
    gap: 4px;
  }
html.phone-layout #herkunft-alpha.is-lang-jump .herkunft-row-chips .alpha-jump-btn {
    min-height: var(--phone-alpha-chip-h) !important;
    height: auto !important;
    max-height: none !important;
    min-width: 0 !important;
    padding: 4px 8px !important;
    font-size: 9pt;
    line-height: 1.2;
  }
html.phone-layout #mod-wortschatz-herkunft .herkunft-sort-btns .cyber-btn {
    height: auto !important;
    min-height: 36px !important;
    max-height: none !important;
    padding: 6px 10px !important;
  }
html.phone-layout #nuancen-paare-cat-nav {
  /* Menü nicht sticky — Tabellenkopf braucht den Platz unter dem HUD */
  position: relative !important;
  top: auto !important;
  z-index: auto !important;
  max-height: none;
  overflow: visible;
  box-shadow: none !important;
  margin-bottom: 12px;
  padding: 10px 10px 12px;
}
html.phone-layout #nuancen-paare-cat-nav .chapter-nav-row {
  grid-template-columns: 1fr !important;
  gap: 8px;
  margin-bottom: 10px;
}
html.phone-layout #nuancen-paare-cat-nav .chapter-nav-row-label {
  display: block;
  margin: 0 0 2px;
}
/* Kategorie-Chips: lesbare Mehrzeilen-Titel (nicht nowrap-Pills in 3 Spalten) */
html.phone-layout #nuancen-paare-cat-chips,
html.phone-layout #nuancen-paare-cat-nav .chapter-nav-pills {
  display: grid !important;
  grid-template-columns: 1fr !important;
  flex-direction: unset !important;
  flex-wrap: unset !important;
  overflow: visible !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 0 !important;
  scroll-snap-type: none !important;
}
html.phone-layout #nuancen-paare-cat-nav .chapter-nav-pill,
html.phone-layout #nuancen-paare-cat-chips .chapter-nav-pill {
  flex: none !important;
  width: 100% !important;
  height: auto !important;
  min-height: 44px !important;
  max-height: none !important;
  padding: 10px 12px !important;
  white-space: normal !important;
  line-height: 1.3 !important;
  text-align: left !important;
  font-size: 9.5pt !important;
  border-radius: 8px !important;
  touch-action: manipulation;
}
/* Nuancen-Paare: Desktop-Fit (table-layout:fixed + max-width:100%) auf Phone lösen —
   sonst Quetschung und Buchstaben untereinander; Horizontal-Scroll im .table-h-scroll. */
html.phone-layout #nuancen-paare-table {
  table-layout: auto !important;
  width: max-content !important;
  min-width: 720px !important;
  max-width: none !important;
}
html.phone-layout #nuancen-paare-table thead th {
  /* Titelzeile: JS-Pin (translateY) braucht opake Fläche */
  background-color: var(--bg-card);
  background-image: linear-gradient(var(--cyber-pink-dim), var(--cyber-pink-dim));
}
html.phone-layout #nuancen-paare-table th,
html.phone-layout #nuancen-paare-table td {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: manual !important;
}
html.phone-layout #nuancen-paare-table th:nth-child(1),
html.phone-layout #nuancen-paare-table td:nth-child(1) {
  width: auto !important;
  min-width: 10em !important;
}
html.phone-layout #nuancen-paare-table th:nth-child(2),
html.phone-layout #nuancen-paare-table td:nth-child(2) {
  width: auto !important;
  min-width: 8em !important;
}
html.phone-layout #nuancen-paare-table .nuancen-term-text,
html.phone-layout #nuancen-paare-table .badge-cat {
  word-break: normal !important;
  overflow-wrap: break-word !important;
}
html.phone-layout #nuancen-paare-container > .table-h-scroll {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
/* Synonymie-Liste (3 Spalten): gleiches Phone-Muster wie Nuancen — app.css sperrt
   overflow-x:hidden + fixed/100%. Nur html.phone-layout; Desktop/Tablet unverändert. */
html.phone-layout #mod-synonymie .table-h-scroll {
  overflow-x: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  touch-action: pan-x pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}
html.phone-layout #mod-synonymie .table-h-scroll.has-h-scroll-hint::after {
  display: block !important;
}
html.phone-layout #synonymie-table {
  table-layout: auto !important;
  width: max-content !important;
  min-width: 560px !important;
  max-width: none !important;
}
html.phone-layout #synonymie-table th,
html.phone-layout #synonymie-table td {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: manual !important;
}
html.phone-layout #synonymie-table th:nth-child(1),
html.phone-layout #synonymie-table td:nth-child(1) {
  width: auto !important;
  min-width: 9em !important;
}
html.phone-layout #synonymie-table th:nth-child(2),
html.phone-layout #synonymie-table td:nth-child(2),
html.phone-layout #synonymie-table th:nth-child(3),
html.phone-layout #synonymie-table td:nth-child(3) {
  width: auto !important;
  min-width: 12em !important;
}
/* Beispielsätze (Verbpaare & alle .example-list): Flex zerlegt Satz in Items → holprig.
   Block-Fluss auf Phone inkl. Forced-Preview (nicht nur ≤640 Media). */
html.phone-layout .main-sentence {
  display: block !important;
  border-right: none !important;
  line-height: 1.45;
}
html.phone-layout .main-sentence::before {
  display: inline-flex !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-right: 8px;
  margin-bottom: 2px;
  vertical-align: middle;
}
html.phone-layout .sub-expl {
  align-items: baseline;
}
html.phone-layout .sub-expl > span:first-child:not([class]) {
  display: inline-flex !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* Präpositionen [02.05.02]: Nr | Satz+Erklärung (nicht 1fr-Stack).
   Überschreibt .example-row { 1fr !important } und Desktop-3-Spalten bei forced phone. */
html.phone-layout #mod-praepositionen .example-row {
  grid-template-columns: auto minmax(0, 1fr) !important;
}
html.phone-layout #mod-praepositionen .example-nr {
  grid-row: 1 / span 2;
  grid-column: 1;
  align-self: stretch;
  border-right: 1px solid var(--color-border);
  border-bottom: none;
}
html.phone-layout #mod-praepositionen .main-sentence {
  grid-column: 2;
  border-right: none !important;
  border-bottom: 1px solid var(--color-border);
}
html.phone-layout #mod-praepositionen .main-sentence::before {
  display: none !important;
  content: none !important;
}
html.phone-layout #mod-praepositionen .sub-expl {
  grid-column: 2;
}
html.phone-layout #mod-praepositionen .sub-expl > span:first-child:not([class]) {
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}
html.phone-preview-active .mobile-bottom-nav,
  html.phone-layout.phone-preview-active .mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    background: color-mix(in srgb, #0b1220 90%, transparent) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-top: 1px solid rgba(6, 182, 212, 0.28) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5) !important;
    z-index: 99998 !important;
    align-items: stretch !important;
    justify-content: space-around !important;
    box-sizing: border-box !important;
  }
html.phone-preview-active body,
  html.phone-layout.phone-preview-active body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }
html.phone-preview-active #app-shell,
  html.phone-layout.phone-preview-active #app-shell {
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }
html.phone-preview-active #auf-ein-wort-view-uebersichten,
  html.phone-preview-active #auf-ein-wort-view-uebersichten.active,
  html.phone-layout.phone-preview-active #auf-ein-wort-view-uebersichten,
  html.phone-layout.phone-preview-active #auf-ein-wort-view-uebersichten.active {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }
html.phone-preview-active .overview-menu-btn,
  html.phone-preview-active .sub-chap-item,
  html.phone-preview-active .chapter-nav-pill,
  html.phone-preview-active .home-toc-link,
  html.phone-preview-active .siehe-auch a,
  html.phone-preview-active .related-links a,
  html.phone-layout.phone-preview-active .overview-menu-btn,
  html.phone-layout.phone-preview-active .sub-chap-item,
  html.phone-layout.phone-preview-active .chapter-nav-pill,
  html.phone-layout.phone-preview-active .home-toc-link,
  html.phone-layout.phone-preview-active .siehe-auch a,
  html.phone-layout.phone-preview-active .related-links a {
    scroll-margin-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }
html.phone-preview-active #scroll-top-btn,
  html.phone-layout.phone-preview-active #scroll-top-btn {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 12px) !important;
    z-index: 99999 !important;
  }
html.phone-layout #mod-home .home-hub-main,
  html.phone-layout #mod-home .home-hub-placeholder,
  html.phone-layout #mod-home .home-hub-fundstueck,
  html.phone-layout #mod-home .home-hub-main > .hub-card,
  html.phone-layout #mod-home .hub-card {
    display: none !important;
  }
html.phone-layout #mod-auf-ein-wort > .nav-console,
  html.phone-layout #mod-auf-ein-wort > #auf-ein-wort-subnav,
  html.phone-layout #home-toc-wegweiser {
    display: none !important;
  }
html.phone-layout #mod-auf-ein-wort [id^="auf-ein-wort-view-"]:not(#auf-ein-wort-view-uebersichten) {
    display: none !important;
  }
html.phone-layout #mod-auf-ein-wort #auf-ein-wort-view-uebersichten {
    display: block !important;
  }
html.phone-layout #mod-auf-ein-wort .aw-intro,
  html.phone-layout #auf-ein-wort-view-uebersichten .aw-intro {
    display: none !important;
  }
html.phone-layout #auf-ein-wort-view-uebersichten .overview-menu-sub,
  html.phone-layout #auf-ein-wort-view-uebersichten.active .overview-menu-sub {
    display: none !important;
  }
html.phone-layout #mod-home .home-hub-main,
  html.phone-layout #mod-home .home-hub-placeholder,
  html.phone-layout #mod-home .home-hub-fundstueck,
  html.phone-layout #mod-home .home-hub-main > .hub-card,
  html.phone-layout #mod-home .hub-card,
  html.is-phone-lernprozess-open .home-hub-main,
  html.is-phone-lernprozess-open .home-hub-placeholder,
  html.is-phone-lernprozess-open .home-hub-fundstueck,
  html.is-phone-lernprozess-open .home-hub-main > .hub-card,
  html.is-phone-lernprozess-open .hub-card {
    display: none !important;
  }
html.phone-layout .daf-landing-bar #landing-contact-btn {
    display: none !important;
  }
html.phone-layout .daf-landing-bar #landing-footer-contact-btn,
  html.phone-layout .daf-landing-bar .daf-landing-footer-contact-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid color-mix(in srgb, var(--cyber-cyan, #06b6d4) 55%, transparent) !important;
    border-radius: 8px !important;
    background: color-mix(in srgb, var(--cyber-cyan, #06b6d4) 12%, transparent) !important;
    color: var(--cyber-cyan, #06b6d4) !important;
    box-shadow: none !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
html.phone-layout .daf-landing-bar #landing-footer-contact-btn svg,
  html.phone-layout .daf-landing-bar .daf-landing-footer-contact-icon svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    flex-shrink: 0 !important;
  }
html.phone-layout .daf-landing-bar #landing-footer-contact-btn:active,
  html.phone-layout .daf-landing-bar .daf-landing-footer-contact-icon:active {
    background: color-mix(in srgb, var(--cyber-cyan, #06b6d4) 22%, transparent) !important;
    border-color: var(--cyber-cyan, #06b6d4) !important;
  }
html.phone-layout .daf-landing-bar .appearance-pref-menu {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    min-width: 44px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
html.phone-layout .daf-landing-bar .appearance-toggle-btn {
    display: flex !important;
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
html.phone-preview-active #app-footer,
  html.phone-preview-active footer.app-footer,
  html.phone-layout.phone-preview-active #app-footer,
  html.phone-layout.phone-preview-active footer.app-footer {
    display: none !important;
  }
html.phone-preview-active footer.app-footer.is-collapsed,
  html.phone-layout.phone-preview-active footer.app-footer.is-collapsed {
    margin-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }
html.phone-preview-active #hud-signout-btn,
  html.phone-layout #hud-signout-btn {
    display: none !important;
  }

/* Freies, natürliches vertikales Scrollen auf der Startseite / Anmeldeseite (#landing)
   Wichtig: overflow-x:hidden auf #landing erzwingt overflow-y:auto → Fake-Scrollport,
   der Touch-Scroll auf iOS/Phone „frisst“. overflow-x:clip (html/body) clippt ohne
   Scrollport; #landing bleibt overflow:visible. Geschlossene Modal-Backdrops dürfen
   nicht display:flex über dem Viewport liegen (siehe .kbd-modal-backdrop:not(.is-open)).

   iOS: Nur EIN Document-Scrollport. html = Viewport-Höhe + overflow-y:auto;
   body wächst mit Inhalt (height:auto, overflow-y:visible). Beide auf height:auto
   + overflow-y:auto bricht Touch-Scroll auf Safari. */
@media (max-width: 640px) {
  html, body {
    overflow-x: clip !important;
    min-height: 100% !important;
  }
  /* Ohne App-Chrome: Document-Scroll über html, body nicht als 2. Scrollport. */
  html:not(.phone-preview-active) {
    height: 100% !important;
    max-height: 100dvh !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: auto;
  }
  html:not(.phone-preview-active) body {
    height: auto !important;
    max-height: none !important;
    min-height: 100% !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: auto !important;
  }
  #landing,
  .daf-landing {
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: 100svh !important;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    /* kein -webkit-overflow-scrolling hier: #landing ist kein Scrollport */
  }
  /* Hero-Medienfläche darf Touches nicht abfangen (sonst kein Document-Scroll). */
  #landing .daf-landing-hero-media {
    pointer-events: none !important;
  }
  #landing .daf-landing-hero-inner {
    pointer-events: auto !important;
  }
  /* phone.css lädt nach app.css und setzt .daf-landing { display:flex !important }.
     Ohne diese [hidden]-Overrides blieben #access-blocked / #app-shell sichtbar und
     überdeckten nach der Anmeldung die App mit einer hellen Leerfläche. */
  #landing[hidden],
  #access-blocked[hidden],
  #app-shell[hidden],
  .daf-landing[hidden] {
    display: none !important;
  }
}

html.phone-layout:not(.phone-preview-active) {
  height: 100% !important;
  max-height: 100dvh !important;
  overflow-x: clip !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: auto;
}
html.phone-layout:not(.phone-preview-active) body {
  height: auto !important;
  max-height: none !important;
  min-height: 100% !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: auto !important;
}
html.phone-layout #landing,
html.phone-layout .daf-landing {
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  height: auto !important;
  max-height: none !important;
  min-height: 100svh !important;
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
}
html.phone-layout #landing .daf-landing-hero-media {
  pointer-events: none !important;
}
html.phone-layout #landing .daf-landing-hero-inner {
  pointer-events: auto !important;
}
html.phone-layout #landing[hidden],
html.phone-layout #access-blocked[hidden],
html.phone-layout #app-shell[hidden],
html.phone-layout .daf-landing[hidden] {
  display: none !important;
}

/* Modal offen: Document-Scroll wieder sperren (überschreibt Landing-Scrollport oben). */
html:has(.kbd-modal-backdrop.is-open),
html.daf-modal-open,
body:has(.kbd-modal-backdrop.is-open),
body.daf-modal-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

/* Freies Scrollen auf Innenseiten.
   #app-shell ist auch .container — Scrollport nur am Shell, Module overflow visible
   (sonst bricht sticky ODER das Dokument scrollt nicht). */
@media (max-width: 640px) {
  html.phone-preview-active,
  html.phone-preview-active body {
    height: 100% !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none;
  }
  html.phone-preview-active #app-shell.container,
  html.phone-preview-active #app-shell {
    height: 100% !important;
    max-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain;
    min-height: 0 !important;
  }
  html.phone-preview-active #app-shell .module-section {
    overflow-x: clip !important;
    overflow-y: visible !important;
    height: auto !important;
    min-height: 0 !important;
  }
}

html.phone-layout.phone-preview-active,
html.phone-layout.phone-preview-active body {
  height: 100% !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  overscroll-behavior: none;
}
html.phone-layout.phone-preview-active #app-shell.container,
html.phone-layout.phone-preview-active #app-shell {
  height: 100% !important;
  max-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain;
  min-height: 0 !important;
}
html.phone-layout.phone-preview-active #app-shell .module-section {
  overflow-x: clip !important;
  overflow-y: visible !important;
  height: auto !important;
  min-height: 0 !important;
}

:root {
  --phone-pad: 12px;
  --phone-pad-r: 12px;
  --phone-pad-b: 12px;
  /* Maß: [03.01.01.2] Hauptsatz-Feldstreifen — einheitliche Zellengröße auf Phone */
  --phone-table-font-size: 0.88rem;
  --phone-table-line-height: 1.4;
  /* ABC-Buchstabenkästchen — ein Maß für alle Module (keine 40/44-Sonderfälle) */
  --phone-alpha-chip-h: 32px;
  /* Sticky-Pin Filtermenüs: Höhe deckeln, Liste bleibt sichtbar */
  --phone-pin-menu-max-h: min(28vh, 200px);
}

@media (max-width: 640px) {
  :root {
    --phone-pad: max(12px, env(safe-area-inset-left, 0px));
    --phone-pad-r: max(12px, env(safe-area-inset-right, 0px));
    --phone-pad-b: max(12px, env(safe-area-inset-bottom, 0px));
  }
}

html.phone-layout {
  --phone-pad: max(12px, env(safe-area-inset-left, 0px));
  --phone-pad-r: max(12px, env(safe-area-inset-right, 0px));
  --phone-pad-b: max(12px, env(safe-area-inset-bottom, 0px));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Umschalter Desktop ↔ Telefon — für normale Nutzer versteckt.
   Nur sichtbar ab 641px bei erzwungener Telefon-Vorschau (?layout=phone),
   damit man zurück zu Desktop kann. Auf echtem Phone immer weg. */
.layout-mode-btn {
  display: none;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-height: 32px;
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 7.5pt;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cyber-cyan);
  background: var(--cyber-cyan-dim);
  border: 1px solid rgba(6, 182, 212, 0.28);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
}
.layout-mode-btn:hover {
  border-color: var(--cyber-cyan);
}
@media (min-width: 641px) {
  html.phone-layout .layout-mode-btn {
    display: inline-flex !important;
  }
}
@media (max-width: 640px) {
  .layout-mode-btn { display: none !important; }
}

html.phone-layout .layout-mode-btn {
  /* Forced phone on wide screens: keep exit hatch back to Desktop */
  height: 32px;
  min-height: 32px;
  min-width: 72px;
  padding: 0 12px;
}

/* Phone-only HUD search icon — hidden on desktop (≥641px / no phone layout) */
.hud-phone-search-btn {
  display: none !important;
}

/* Phone-only HUD Konto (Männchen). Desktop always uses text #hud-signout-btn. */
.hud-account-menu {
  display: none !important;
  position: relative;
  flex: 0 0 auto;
}
.hud-account-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 6px !important;
  border: 1px solid var(--color-border, #334155) !important;
  background: var(--bg-card, #1e293b) !important;
  color: var(--color-text-strong, #fff) !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}
.hud-account-btn:hover,
.hud-account-menu.is-open > .hud-account-btn {
  border-color: var(--cyber-cyan) !important;
  color: var(--cyber-cyan) !important;
}
.hud-account-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}
.hud-account-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1300;
  min-width: 200px;
  max-width: min(280px, calc(100vw - 24px));
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--bg-card);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}
.hud-account-menu.is-open > .hud-account-panel {
  display: flex !important;
}
.hud-account-expires {
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--color-text-muted, #94a3b8);
}
.hud-account-expires:empty,
.hud-account-expires[hidden] {
  display: none !important;
}
.hud-account-open-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(6, 182, 212, 0.35) !important;
  background: var(--cyber-cyan-dim, rgba(6, 182, 212, 0.12)) !important;
  color: var(--cyber-cyan, #06b6d4) !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}
.hud-account-signout-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  border-radius: 6px !important;
  border: 1px solid var(--color-border, #334155) !important;
  background: transparent !important;
  color: var(--color-text-strong, #e2e8f0) !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

html.phone-layout .hud-account-menu:not([hidden]),
html.phone-preview-active .hud-account-menu:not([hidden]) {
  display: block !important;
}
html[data-layout="desktop"] .hud-account-menu {
  display: none !important;
}

/* ---------- Automatisch schmal (Handy) ---------- */
@media (max-width: 640px) {
  .container {
    padding: 10px var(--phone-pad-r) calc(20px + var(--phone-pad-b)) var(--phone-pad);
    max-width: 100%;
  }

  /* Phone/desktop search chrome (HUD visual rules live once below / forced-phone)
     Do NOT hide .accent-swatches globally — Farbpunkte sitzen im Appearance-Panel. */
  
  
  html[data-layout="desktop"] .hud-search {
    display: flex !important;
  }
  html[data-layout="desktop"] .hud-phone-search-btn {
    display: none !important;
  }
  html[data-layout="desktop"] .kbd-trigger-btn {
    display: inline-flex !important;
  }
  
  
  
  
  

  .home-hub {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .home-toc {
    position: static;
    top: auto;
    max-height: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px;
  }
  .home-toc-btn {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    min-height: 44px;
    font-size: var(--ui-btn-font-size);
  }
  .home-toc-section { flex: 1 1 100%; }
  .sub-chap-item {
    min-height: 44px;
    padding: 12px 14px;
    font-size: 9pt;
  }

  .nav-console { padding: 8px 10px; }
  .breadcrumbs {
    font-size: 7.5pt;
    line-height: 1.35;
    flex-wrap: wrap;
    gap: 2px 4px;
  }

  .page-section-nav,
  .page-section-nav.page-section-nav--one-row,
  .page-section-nav.page-section-nav--equal-pills {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px 8px 12px;
    margin-top: 12px;
    margin-bottom: 12px;
  }
  .page-section-nav .page-section-nav-actions,
  .page-section-nav.page-section-nav--one-row .page-section-nav-actions {
    order: -1;
    width: 100%;
    margin-left: 0;
    display: flex;
    gap: 6px;
  }
  .page-section-nav .page-section-nav-toggle,
  .page-section-nav.page-section-nav--one-row .page-section-nav-toggle {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px;
    font-size: 7.5pt !important;
  }
  .page-section-nav .page-section-nav-top {
    width: 40px;
    min-width: 40px;
    height: 40px;
  }
  .page-section-nav .page-section-nav-filters,
  .page-section-nav.page-section-nav--one-row .page-section-nav-filters,
  .page-section-nav.page-section-nav--equal-pills .page-section-nav-filters,
  .page-section-nav.page-section-nav--equal-pills.page-section-nav--one-row .page-section-nav-filters {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    flex: 1 1 100%;
  }
  .page-section-nav .page-section-nav-filters > button,
  .page-section-nav.page-section-nav--one-row .page-section-nav-filters > button,
  .page-section-nav.page-section-nav--equal-pills .page-section-nav-filters > button {
    flex: unset;
    width: 100%;
    min-height: 44px;
    height: auto;
    padding: 6px 8px;
    font-size: 7.5pt !important;
    white-space: normal;
    line-height: 1.2;
    text-align: center;
  }
  .page-section-nav.page-section-nav--equal-pills .page-section-nav-filters::after {
    content: none !important;
    display: none !important;
  }
  .page-section-nav .page-section-nav-filters:has(> button:nth-child(5):last-of-type) > button:nth-child(5),
  .page-section-nav .page-section-nav-filters:has(> button:nth-child(3):last-of-type) > button:nth-child(3),
  .page-section-nav .page-section-nav-filters:has(> button:nth-child(7):last-of-type) > button:nth-child(7) {
    grid-column: 1 / -1;
  }

  .chapter-nav-pill,
  .menu-chip,
  .cyber-btn {
    min-height: 44px;
    touch-action: manipulation;
  }
  .chapter-nav.is-grouped { --chapter-nav-label-width: 100%; }
  .chapter-nav.is-grouped .chapter-nav-groups {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .chapter-nav.is-grouped .chapter-nav-row {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-column: auto !important;
    gap: 6px;
    width: 100%;
  }
  .chapter-nav.is-grouped .chapter-nav-row-label {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 44px !important;
    justify-content: flex-start !important;
    text-align: left !important;
    white-space: normal !important;
    color: var(--cyber-pink) !important;
    background: var(--cyber-pink-dim) !important;
    border: 1px solid color-mix(in srgb, var(--cyber-pink) 28%, transparent) !important;
    box-sizing: border-box !important;
    padding: 8px 12px !important;
  }
  .chapter-nav.is-grouped .chapter-nav-pills {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .chapter-nav.is-grouped .chapter-nav-pill {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    justify-content: flex-start;
    text-align: left;
    padding: 10px 12px;
  }

  /* =============================================================================
     Kapitel-Menükarten is-row-aligned (≤640px)
     Desktop: Label-Spalte | Pill-Grid in fester 26px-Zeile.
     Ohne Override stapeln sich Labels über/in den Pills und nav-seq-Nummern
     liegen absolut über dem Label-Text.
     ============================================================================= */
  .chapter-nav.is-row-aligned .chapter-nav-groups-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .chapter-nav.is-row-aligned .chapter-nav-groups {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .chapter-nav.is-row-aligned .chapter-nav-row,
  .chapter-nav.is-grouped.is-row-aligned .chapter-nav-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .chapter-nav.is-row-aligned .chapter-nav-row:not(.is-active) .chapter-nav-pills {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  .chapter-nav.is-row-aligned .chapter-nav-row-label.chapter-nav-cat-btn,
  .chapter-nav.is-grouped.is-row-aligned .chapter-nav-row-label.chapter-nav-cat-btn {
    flex: 0 0 auto !important;
    align-self: stretch !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 44px !important;
    justify-content: flex-start !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    padding: 10px 12px !important;
    color: var(--cyber-pink) !important;
    background: var(--cyber-pink-dim) !important;
    border: 1px solid color-mix(in srgb, var(--cyber-pink) 28%, transparent) !important;
    box-sizing: border-box !important;
  }
  .chapter-nav.is-row-aligned .chapter-nav-row-label.chapter-nav-cat-btn.is-active,
  .chapter-nav.is-grouped.is-row-aligned .chapter-nav-row-label.chapter-nav-cat-btn.is-active {
    color: #fff !important;
    background: var(--cyber-pink) !important;
    border-color: var(--cyber-pink) !important;
  }
  .chapter-nav.is-row-aligned .chapter-nav-row.is-active .chapter-nav-pills,
  .chapter-nav.is-row-aligned.show-all .chapter-nav-row .chapter-nav-pills {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    height: auto !important;
  }
  .chapter-nav.is-row-aligned .chapter-nav-pills::after {
    display: none !important;
    content: none !important;
  }
  .chapter-nav.is-row-aligned .chapter-nav-pill,
  .chapter-nav.is-grouped.is-row-aligned .chapter-nav-pill {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 48px !important;
    padding: 10px 14px !important;
    justify-content: flex-start !important;
    text-align: left !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
  }
  .chapter-nav.is-row-aligned .chapter-nav-toggle-sidebar-btn {
    display: none !important;
  }

  /* Sequenznummern: im Fluss neben dem Label — kein absolut über dem Text */
  .chapter-nav-pill.nav-seq,
  .chapter-nav.is-row-aligned .chapter-nav-pill.nav-seq,
  .chapter-nav.is-grouped.is-row-aligned .chapter-nav-pill.nav-seq,
  .page-section-nav-filters > .nav-seq,
  .page-section-nav--series .page-section-nav-filters > .nav-seq {
    justify-content: flex-start !important;
    gap: 0.45em !important;
    padding-left: var(--phone-pad) !important;
    padding-right: var(--phone-pad-r) !important;
  }
  .chapter-nav-pill.nav-seq .nav-seq-nr,
  .chapter-nav.is-row-aligned .chapter-nav-pill.nav-seq .nav-seq-nr,
  .page-section-nav-filters > .nav-seq .nav-seq-nr,
  .page-section-nav--series .nav-seq-nr {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    flex-shrink: 0 !important;
  }
  .chapter-nav-pill.nav-seq .nav-seq-label,
  .chapter-nav.is-row-aligned .chapter-nav-pill.nav-seq .nav-seq-label,
  .page-section-nav-filters > .nav-seq .nav-seq-label,
  .page-section-nav--series .nav-seq-label {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    text-align: left !important;
    max-width: none !important;
  }

  .cyber-card-body {
    padding: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cyber-card-body:has(.table-container--with-alpha),
  .cyber-card-body:has(.verb-table-pin-head) {
    overflow-x: visible;
  }
  .cyber-card-header {
    flex-wrap: wrap;
    gap: 6px;
    font-size: 9pt;
  }
  .cyber-card-header .card-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    margin-left: auto;
    flex: 0 0 auto;
  }
  .table-h-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    margin: 0 -4px;
    padding: 0 4px;
    scroll-padding-left: 4px;
    scroll-padding-right: 4px;
    touch-action: pan-x pan-y pinch-zoom;
  }
  /* Mobile Sticky First Column für dichte Grammatik- und Konjugationstabellen */
  .table-h-scroll table:not(.no-sticky-col) th:first-child,
  .table-h-scroll table:not(.no-sticky-col) td:first-child {
    position: sticky;
    left: 0;
    z-index: 10;
    background: color-mix(in srgb, var(--bg-card, #1e293b) 96%, #0b1220);
    /* Cast der Sticky-1.-Spalte beim Horizontal-Scroll */
    box-shadow: var(--table-col1-shadow, 2px 0 5px rgba(0, 0, 0, 0.18));
  }
  .table-h-scroll table:not(.no-sticky-col) thead th:first-child {
    z-index: 12;
  }
  .cheat-table,
  .cyber-table,
  .comp-table,
  .pronomen-table { font-size: var(--phone-table-font-size); }
  .cheat-table th, .cyber-table th, .comp-table th, .pronomen-table th,
  .cheat-table td, .cyber-table td, .comp-table td, .pronomen-table td {
    padding: 8px 10px;
    font-size: var(--phone-table-font-size);
    line-height: var(--phone-table-line-height);
  }

  .example-row { grid-template-columns: 1fr !important; }
  /* Präpositionen behalten Nr-Spalte (siehe html.phone-layout Regeln oben) */
  #mod-praepositionen .example-row {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }
  /* Beispielsätze: display:flex zerlegt Text+highlights in Flex-Items → holprig auf schmalem Screen.
     Block-Fluss: Badge inline, Satz umbricht natürlich (Verbpaare & alle .example-list). */
  .main-sentence {
    display: block !important;
    border-right: none !important;
    font-size: 13.5px;
    line-height: 1.45;
  }
  .main-sentence::before,
  .sub-expl > span:first-child:not([class]) {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-right: 8px;
    margin-bottom: 2px;
    vertical-align: middle;
  }
  .sub-expl {
    align-items: baseline;
  }

  #scroll-top-btn {
    width: 44px;
    height: 44px;
    right: var(--phone-pad-r);
    /* Above fixed bottom nav (~64–72px) + safe area — was covered by menubar */
    bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 12px);
    font-size: 16px;
    z-index: 99999;
  }
  .home-search-results { max-height: min(50vh, 280px); }
  .verb-table-pin-head {
    row-gap: 8px;
  }
  .verb-table-pin-head .alpha-jump {
    width: 100%;
    scroll-snap-type: x proximity;
  }
  .alpha-jump-btn,
  .alpha-scroll-top-btn,
  .alpha-count {
    min-height: var(--phone-alpha-chip-h) !important;
    height: var(--phone-alpha-chip-h) !important;
    max-height: var(--phone-alpha-chip-h) !important;
  }
  .alpha-jump-btn {
    min-width: var(--phone-alpha-chip-h);
    scroll-snap-align: start;
  }
  .verb-table-pin-head > .alpha-count {
    order: 2;
    margin-right: auto;
  }
  .verb-table-pin-head > .lang-pref-menu--pin-head {
    order: 2;
    flex-shrink: 0;
  }
  .verb-table-pin-head > .alpha-scroll-top-btn,
  .verb-table-pin-head > .cyber-btn {
    order: 3;
  }
  .glossar-grid,
  .glossar-grid[data-glossar-layout="stichworte"] {
    grid-template-columns: 1fr;
  }
  .glossar-card {
    padding: 14px 14px 16px;
  }
  .glossar-card.is-stichwort {
    padding: 0;
  }
  .glossar-helper-note {
    font-size: 12px;
  }
}

/* ---------- Erzwungen (telefon.html) — gleiche UX, max. 480px Lesespalte ---------- */
html.phone-layout .container {
  padding: 10px var(--phone-pad-r) calc(20px + var(--phone-pad-b)) var(--phone-pad);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
html.phone-layout .terminal-hud::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 3px !important;
  height: 100% !important;
  background-color: var(--cyber-cyan, #06b6d4) !important;
}
html.phone-layout .hud-logo {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 2px !important;
  flex: 1 1 auto !important;
  width: auto !important;
  /* Suche + Farbe + Konto (3×44 + gaps) — Abmelden steckt im Konto-Menü */
  max-width: calc(100% - 148px) !important;
  line-height: 1.1 !important;
  overflow: hidden !important;
  padding-left: 4px !important;
}
html.phone-layout .hud-logo-name {
  font-size: 0.68rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: var(--color-text-muted, #94a3b8) !important;
  font-weight: 600 !important;
  max-width: 100% !important;
}
html.phone-layout .hud-logo-mark {
  display: block !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  color: var(--cyber-cyan, #06b6d4) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}
html.phone-layout .hud-logo a {
  display: block !important;
  text-decoration: none !important;
  max-width: 100% !important;
}
html.phone-layout #app-shell.container,
html.phone-layout #app-shell {
  padding-top: calc(var(--hud-height, 56px) + 6px) !important;
}
html.phone-layout .hud-tools {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  flex: 0 0 auto !important;
  width: auto !important;
}
html.phone-layout .home-hub { grid-template-columns: 1fr; }
html.phone-layout .home-toc {
  max-height: min(42vh, 320px);
  flex-direction: row;
  flex-wrap: wrap;
}
html.phone-layout .home-toc-btn {
  flex: 1 1 calc(50% - 6px);
  min-height: 44px;
}
html.phone-layout .page-section-nav,
html.phone-layout .page-section-nav.page-section-nav--one-row {
  flex-wrap: wrap;
}
html.phone-layout .page-section-nav .page-section-nav-actions {
  order: -1;
  width: 100%;
  margin-left: 0;
  display: flex;
  gap: 6px;
}
html.phone-layout .page-section-nav .page-section-nav-toggle {
  flex: 1 1 auto;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 40px;
  font-size: 7.5pt !important;
}
html.phone-layout .page-section-nav .page-section-nav-filters,
html.phone-layout .page-section-nav.page-section-nav--one-row .page-section-nav-filters,
html.phone-layout .page-section-nav.page-section-nav--equal-pills .page-section-nav-filters {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}
html.phone-layout .page-section-nav .page-section-nav-filters > button {
  width: 100%;
  min-height: 44px;
  height: auto;
  white-space: normal;
  font-size: 7.5pt !important;
  line-height: 1.2;
}
html.phone-layout .chapter-nav.is-grouped .chapter-nav-groups {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 8px !important;
  width: 100% !important;
}
html.phone-layout .chapter-nav.is-grouped .chapter-nav-row {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  grid-column: auto !important;
  gap: 6px;
  width: 100%;
}
html.phone-layout .chapter-nav.is-grouped .chapter-nav-row-label {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 44px !important;
  justify-content: flex-start !important;
  text-align: left !important;
  white-space: normal !important;
  color: var(--cyber-pink) !important;
  background: var(--cyber-pink-dim) !important;
  border: 1px solid color-mix(in srgb, var(--cyber-pink) 28%, transparent) !important;
  box-sizing: border-box !important;
  padding: 8px 12px !important;
}
html.phone-layout .chapter-nav.is-grouped .chapter-nav-pills {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
}
html.phone-layout .chapter-nav.is-grouped .chapter-nav-pill {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  justify-content: flex-start;
  text-align: left;
  padding: 10px 12px;
}
html.phone-layout .chapter-nav.is-row-aligned .chapter-nav-groups-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
}
html.phone-layout .chapter-nav.is-row-aligned .chapter-nav-groups {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
}
html.phone-layout .chapter-nav.is-row-aligned .chapter-nav-row,
html.phone-layout .chapter-nav.is-grouped.is-row-aligned .chapter-nav-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  height: auto !important;
  min-height: 0 !important;
  gap: 6px !important;
  width: 100% !important;
}
html.phone-layout .chapter-nav.is-row-aligned .chapter-nav-row:not(.is-active) .chapter-nav-pills {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
}
html.phone-layout .chapter-nav.is-row-aligned .chapter-nav-row-label.chapter-nav-cat-btn,
html.phone-layout .chapter-nav.is-grouped.is-row-aligned .chapter-nav-row-label.chapter-nav-cat-btn {
  flex: 0 0 auto !important;
  align-self: stretch !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 44px !important;
  justify-content: flex-start !important;
  white-space: normal !important;
  line-height: 1.3 !important;
  padding: 10px 12px !important;
  color: var(--cyber-pink) !important;
  background: var(--cyber-pink-dim) !important;
  border: 1px solid color-mix(in srgb, var(--cyber-pink) 28%, transparent) !important;
  box-sizing: border-box !important;
}
html.phone-layout .chapter-nav.is-row-aligned .chapter-nav-row-label.chapter-nav-cat-btn.is-active,
html.phone-layout .chapter-nav.is-grouped.is-row-aligned .chapter-nav-row-label.chapter-nav-cat-btn.is-active {
  color: #fff !important;
  background: var(--cyber-pink) !important;
  border-color: var(--cyber-pink) !important;
}
html.phone-layout .chapter-nav.is-row-aligned .chapter-nav-row.is-active .chapter-nav-pills,
html.phone-layout .chapter-nav.is-row-aligned.show-all .chapter-nav-row .chapter-nav-pills {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  height: auto !important;
}
html.phone-layout .chapter-nav.is-row-aligned .chapter-nav-pills::after {
  display: none !important;
  content: none !important;
}
html.phone-layout .chapter-nav.is-row-aligned .chapter-nav-pill,
html.phone-layout .chapter-nav.is-grouped.is-row-aligned .chapter-nav-pill {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 48px !important;
  padding: 10px 14px !important;
  justify-content: flex-start !important;
  text-align: left !important;
  white-space: normal !important;
  line-height: 1.3 !important;
  box-sizing: border-box !important;
}
html.phone-layout .chapter-nav.is-row-aligned .chapter-nav-toggle-sidebar-btn {
  display: none !important;
}
html.phone-layout .chapter-nav-pill.nav-seq,
html.phone-layout .chapter-nav.is-row-aligned .chapter-nav-pill.nav-seq,
html.phone-layout .chapter-nav.is-grouped.is-row-aligned .chapter-nav-pill.nav-seq,
html.phone-layout .page-section-nav-filters > .nav-seq,
html.phone-layout .page-section-nav--series .page-section-nav-filters > .nav-seq {
  justify-content: flex-start !important;
  gap: 0.45em !important;
  padding-left: var(--phone-pad) !important;
  padding-right: var(--phone-pad-r) !important;
}
html.phone-layout .chapter-nav-pill.nav-seq .nav-seq-nr,
html.phone-layout .chapter-nav.is-row-aligned .chapter-nav-pill.nav-seq .nav-seq-nr,
html.phone-layout .page-section-nav-filters > .nav-seq .nav-seq-nr,
html.phone-layout .page-section-nav--series .nav-seq-nr {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  flex-shrink: 0 !important;
}
html.phone-layout .chapter-nav-pill.nav-seq .nav-seq-label,
html.phone-layout .chapter-nav.is-row-aligned .chapter-nav-pill.nav-seq .nav-seq-label,
html.phone-layout .page-section-nav-filters > .nav-seq .nav-seq-label,
html.phone-layout .page-section-nav--series .nav-seq-label {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  text-align: left !important;
  max-width: none !important;
}
html.phone-layout .page-section-nav.page-section-nav--equal-pills .page-section-nav-filters::after {
  content: none !important;
  display: none !important;
}
html.phone-layout .page-section-nav .page-section-nav-filters:has(> button:nth-child(5):last-of-type) > button:nth-child(5),
html.phone-layout .page-section-nav .page-section-nav-filters:has(> button:nth-child(3):last-of-type) > button:nth-child(3),
html.phone-layout .page-section-nav .page-section-nav-filters:has(> button:nth-child(7):last-of-type) > button:nth-child(7) {
  grid-column: 1 / -1;
}
html.phone-layout .table-h-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-padding-left: 4px;
  scroll-padding-right: 4px;
}
html.phone-layout .chapter-nav-pill,
html.phone-layout .cyber-btn,
html.phone-layout .menu-chip {
  min-height: 44px;
}
html.phone-layout #scroll-top-btn {
  width: 44px;
  height: 44px;
  right: var(--phone-pad-r);
  bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 99999;
}

html.phone-layout .glossar-grid,
html.phone-layout .glossar-grid[data-glossar-layout="stichworte"] {
  grid-template-columns: 1fr;
}
html.phone-layout .glossar-card {
  padding: 14px 14px 16px;
}
html.phone-layout .glossar-card.is-stichwort {
  padding: 0;
}

/* =============================================================================
   Phase 1: Phone Shell / Navigation
   - größere Tap-Targets, weniger Sticky-Stack, klarere Startseite
   - Modulwechsel-Feedback (portal-enter + flash)
   Desktop/Tablet ohne data-layout="phone" und >640px bleiben unberührt.
   ============================================================================= */

@keyframes phone-nav-flash-bar {
  0% { opacity: 0; transform: scaleX(0.35); }
  35% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}
@keyframes phone-portal-enter {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

html.phone-layout .hud-search .search-input {
  height: 42px;
  min-height: 42px;
  font-size: 16px;
  border-radius: 6px;
}
html.phone-layout .layout-mode-btn {
  height: 44px;
  min-height: 44px;
  min-width: 72px;
  padding: 0 12px;
  font-size: var(--ui-btn-font-size);
  border-radius: 6px;
}
html.phone-layout .theme-btn {
  width: 44px;
  height: 44px;
  border-radius: 6px;
}
html.phone-layout .theme-btn svg { width: 18px; height: 18px; }
html.phone-layout .accent-swatches { gap: 8px; margin-left: auto; }
html.phone-layout .accent-swatch {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  touch-action: manipulation;
}
html.phone-layout .breadcrumbs {
  font-size: var(--ui-font-size-sm);
  line-height: 1.4;
}
html.phone-layout .module-section > .chapter-nav.chap-subnav-card:not([data-sticky-chrome="0"]),
html.phone-layout .module-section > .chapter-nav[data-chapter-chrome="top"] {
  position: relative !important;
  top: auto !important;
  z-index: auto !important;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html.phone-layout .module-section.portal-enter,
  html.phone-layout .module-section.portal-enter {
    animation: none !important;
  }
  html.phone-layout.phone-nav-flash::after,
  html.phone-layout.phone-nav-flash::after {
    animation: none !important;
    display: none !important;
  }
}

/* Entlehnungen / Synonymie Nuancen: Phone-Regeln liegen unter html.phone-layout (s. oben). */

/* =============================================================================
   Mobile Modals: Bottom-Sheet Look & Keyboard-Safe Display (≤640px)
   ============================================================================= */
@media (max-width: 640px) {
  /* Closed sheets: display:none — visibility:hidden+flex full-screen blocks phone scroll */
  .kbd-modal-backdrop:not(.is-open) {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }
  .kbd-modal-backdrop.is-open {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
    pointer-events: auto !important;
    /* Backdrop scrollt mit, falls Sheet-Inhalt + Tastatur den Viewport sprengen */
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
  .kbd-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 88dvh !important;
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
    border-bottom: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 20px 16px max(20px, env(safe-area-inset-bottom, 16px)) !important;
    box-sizing: border-box !important;
    /* Kein bleibendes transform: app.css scale(1) + overflow bricht iOS-Touch-Scroll. */
    transform: none !important;
    animation: phoneModalSheetFade 0.2s ease !important;
  }
  .kbd-modal-backdrop.is-open .kbd-modal {
    transform: none !important;
  }
  .kbd-modal-close {
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    touch-action: manipulation !important;
  }
  .daf-auth-submit,
  .daf-appointment-submit,
  .st-start-btn {
    min-height: 48px !important;
    touch-action: manipulation !important;
  }
}

@keyframes phoneModalSheetFade {
  from { opacity: 0.55; }
  to { opacity: 1; }
}
@keyframes phoneModalSheetUp {
  from { transform: translateY(100%); opacity: 0.7; }
  to { transform: translateY(0); opacity: 1; }
}

/* Forced phone layout: closed modals never steal taps/scroll + same scrollable sheet */
html.phone-layout .kbd-modal-backdrop:not(.is-open) {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
html.phone-layout .kbd-modal-backdrop.is-open {
  pointer-events: auto !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}
html.phone-layout .kbd-modal {
  width: 100% !important;
  max-width: 100% !important;
  max-height: 88dvh !important;
  border-radius: 20px 20px 0 0 !important;
  margin: 0 !important;
  border-bottom: none !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding: 20px 16px max(20px, env(safe-area-inset-bottom, 16px)) !important;
  box-sizing: border-box !important;
  transform: none !important;
}
html.phone-layout .kbd-modal-backdrop.is-open .kbd-modal {
  transform: none !important;
}

/* =============================================================================
   Mobile Bottom Navigation Bar (≤640px)
   ============================================================================= */
.mobile-bottom-nav {
  display: none;
}

@media (max-width: 640px) {
  /*
   * Bottom-nav clearance: only on #app-shell (the scrollport). Nested
   * .module-section / .container must not add another 120px — that stacked.
   */
  

  

  /* scrollIntoView / focus scroll must clear the fixed bottom nav */
  

  /* ↑ Nach-oben: über der Bottom-Nav, nicht darunter */
  

  .mobile-nav-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    min-height: 48px !important;
    padding: 6px 1px !important;
    border: none !important;
    background: transparent !important;
    color: var(--color-text-muted, #94a3b8) !important;
    font-family: var(--font-mono, monospace) !important;
    font-size: 0.58rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    line-height: 1.15 !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    transition: color 0.12s ease, transform 0.08s ease !important;
  }

  .mobile-nav-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-nav-item svg {
    flex-shrink: 0;
    opacity: 0.85;
    transition: transform 0.12s ease, opacity 0.12s ease;
  }

  .mobile-nav-item:active {
    transform: scale(0.92) !important;
  }

  .mobile-nav-item.is-active {
    color: var(--cyber-cyan, #06b6d4) !important;
    font-weight: 700 !important;
  }

  .mobile-nav-item.is-active svg {
    opacity: 1 !important;
    filter: drop-shadow(0 0 6px rgba(6, 182, 212, 0.6));
    transform: translateY(-1px);
  }

  /* =============================================================================
     Mobile Startseite (Home Hub) Reorganisation
     ============================================================================= */
  .home-hub {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
  }

  /* Desktop-TOC auf Mobilgeräten ausblenden, da Mobil-Navigation über Bottom-Nav / Themen-Menü läuft */
  .home-toc {
    display: none !important;
  }

  /*
   * Lernprozess lives inside .home-toc. Without this override, goToLernprozess()
   * only shows the home hub cards („alte Modulübersicht“) while the panel stays invisible.
   */
  html.is-phone-lernprozess-open .home-toc {
    display: flex !important;
    flex-direction: column !important;
    position: static !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    gap: 0 !important;
    min-height: calc(100dvh - 120px - env(safe-area-inset-bottom, 0px)) !important;
  }

  html.is-phone-lernprozess-open #mod-home {
    display: block !important;
    min-height: calc(100dvh - 72px - env(safe-area-inset-bottom, 0px)) !important;
  }

  html.is-phone-lernprozess-open .home-toc > .home-toc-head {
    display: block !important;
    width: 100% !important;
    flex: 1 1 auto !important;
  }

  html.is-phone-lernprozess-open .home-toc-meta {
    display: block !important;
    width: 100% !important;
  }

  html.is-phone-lernprozess-open .home-toc-meta > :not(#home-progress) {
    display: none !important;
  }

  html.is-phone-lernprozess-open .home-toc-group,
  html.is-phone-lernprozess-open .home-toc-section,
  html.is-phone-lernprozess-open .home-toc-footer {
    display: none !important;
  }

  html.is-phone-lernprozess-open #home-progress {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    margin: 0 !important;
    min-height: calc(100dvh - 132px - env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Bottom-nav already marks Lernprozess — drop compact accordion chrome */
  html.is-phone-lernprozess-open #home-progress-toggle {
    display: none !important;
  }

  html.is-phone-lernprozess-open #home-progress.is-open #home-progress-panel,
  html.is-phone-lernprozess-open #home-progress-panel:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100dvh - 132px - env(safe-area-inset-bottom, 0px)) !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 22px 18px 28px !important;
    gap: 18px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html.is-phone-lernprozess-open #home-progress-panel .cyber-widget-header {
    padding: 14px 14px !important;
    border-radius: 10px !important;
  }

  html.is-phone-lernprozess-open #home-progress-panel .cyber-widget-title {
    font-size: 1.05rem !important;
    line-height: 1.35 !important;
  }

  html.is-phone-lernprozess-open #home-progress-panel .home-progress-meta {
    margin-top: 6px !important;
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
  }

  html.is-phone-lernprozess-open #home-progress-panel .home-progress-cta.cyber-cta-glow {
    min-height: 52px !important;
    padding: 14px 16px !important;
    font-size: 0.95rem !important;
    border-radius: 10px !important;
    gap: 10px !important;
  }

  html.is-phone-lernprozess-open #home-progress-panel .home-progress-chips {
    gap: 10px !important;
    margin: 2px 0 !important;
  }

  html.is-phone-lernprozess-open #home-progress-panel .home-progress-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 4px !important;
  }

  html.is-phone-lernprozess-open #home-progress-panel .home-progress-secondary {
    min-height: 48px !important;
    padding: 12px 14px !important;
    font-size: 0.92rem !important;
    border-radius: 10px !important;
    gap: 10px !important;
  }

  /* Merkstern / Gelernt — nur Telefon-Lernprozess (Desktop: [hidden] + nie sichtbar) */
  html.phone-layout #home-progress-panel .home-progress-icon-hint {
    display: block !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    border: 1px solid color-mix(in srgb, var(--accent, #3d7ea6) 28%, transparent) !important;
    background: color-mix(in srgb, var(--accent, #3d7ea6) 8%, transparent) !important;
    color: var(--muted, #6b7280) !important;
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
  }

  html.phone-layout #home-progress-panel .home-progress-icon-hint strong {
    color: var(--text, #1a1a1a) !important;
    font-weight: 650 !important;
  }

  html.is-phone-lernprozess-open #home-progress-panel .home-progress-learned-section,
  html.is-phone-lernprozess-open #home-progress-panel .home-progress-learned-section.cyber-progress-widget {
    min-height: 76px !important;
    padding: 16px 14px !important;
    margin-top: 2px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  html.is-phone-lernprozess-open #home-progress-panel .home-learned-info {
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  html.is-phone-lernprozess-open #home-progress-panel .home-learned-title {
    font-size: 0.95rem !important;
  }

  html.is-phone-lernprozess-open #home-progress-panel .home-learned-stats {
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
  }

  html.is-phone-lernprozess-open #home-progress-panel .home-learned-bar {
    height: 10px !important;
  }

  html.is-phone-lernprozess-open #home-progress-panel .st-learn-path {
    padding: 14px !important;
    margin-bottom: 2px !important;
    gap: 10px !important;
  }

  /* App footer must not cover Lernprozess (~2/3 screen when fully expanded) */
  html.is-phone-lernprozess-open #app-footer,
  html.is-phone-lernprozess-open footer.app-footer {
    display: none !important;
  }

  /* Hide hub cards while Lernprozess is the focus (avoids „alte Modulübersicht“ confusion) */
  html.is-phone-lernprozess-open .home-hub-main,
  html.is-phone-lernprozess-open .home-hub-placeholder,
  html.is-phone-lernprozess-open .home-hub-fundstueck,
  html.is-phone-lernprozess-open .home-hub-main > .hub-card,
  html.is-phone-lernprozess-open .hub-card {
    display: none !important;
  }

  /* Phone: old home hub / Überblick cards are never a destination — Module list replaces Start.
     Respect data-layout="desktop" (Telefon→Desktop toggle) so the hub is not blanked. */
  

  .home-hub-main {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Begrüßungsfoto kompaktieren, damit die Module sofort sichtbar sind */
  .home-hub-placeholder {
    display: block !important;
    position: static !important;
    margin-bottom: 14px !important;
  }

  .home-hub-placeholder-photo {
    max-height: 85px !important;
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    opacity: 0.75 !important;
  }

  .home-hub-photo-btn {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .home-hub-fundstueck {
    position: relative !important;
    margin-top: -36px !important;
    z-index: 5 !important;
    min-height: 48px !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    touch-action: manipulation !important;
  }

  /* WICHTIG: Alle 12 Modulkarten [01] bis [12] und ihre Unterkapitel auf Handys voll sichtbar schalten */
  .home-hub-main > .hub-card {
    display: block !important;
    position: static !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
    margin-bottom: 16px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(6, 182, 212, 0.28) !important;
    background: color-mix(in srgb, var(--bg-card, #1e293b) 95%, #0b1220) !important;
    overflow: visible !important;
  }

  .home-hub .hub-card .haupt-item {
    display: block !important;
    position: static !important;
    height: auto !important;
    min-height: auto !important;
    margin: 0 !important;
    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
  }

  .home-hub .hub-card .haupt-body {
    display: block !important;
    position: static !important;
    height: auto !important;
    min-height: auto !important;
    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
  }

  .home-hub .hub-card .haupt-header {
    display: flex !important;
    min-height: 44px !important;
    align-items: center !important;
    padding: 10px 14px !important;
    font-size: 0.95rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  /* =============================================================================
     Mobile Menükarten & Buttons (≤640px): Voll lesbar, keine Überlappungen
     ============================================================================= */
  /* 1. Modul-Übersichten Grid (z. B. in Wegweiser oder Übersichtsseiten) mobil einspaltig */
  .overview-menu-card {
    margin: 12px 0 20px !important;
    padding: 14px 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    border-radius: 10px !important;
  }

  .overview-menu-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .overview-menu-title {
    font-size: 0.98rem !important;
    line-height: 1.35 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .overview-menu-sub {
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
    color: var(--color-text-muted, #94a3b8) !important;
  }

  /* Phone Start: Wegweiser komplett unterdrücken — nur Module-Liste.
     Skip when user forced Desktop layout on a narrow viewport. */
  

  

  

  

  

  #auf-ein-wort-view-uebersichten .overview-menu-title > span,
  #auf-ein-wort-view-uebersichten.active .overview-menu-title > span {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
  }

  #auf-ein-wort-view-uebersichten .overview-menu-title > span::after,
  #auf-ein-wort-view-uebersichten.active .overview-menu-title > span::after {
    content: "Module";
    display: inline !important;
    font-size: 1.05rem !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    color: var(--color-text-strong, #ffffff) !important;
  }

  #auf-ein-wort-view-uebersichten #aw-card-uebersichten,
  #auf-ein-wort-view-uebersichten.active #aw-card-uebersichten {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #auf-ein-wort-view-uebersichten #aw-card-uebersichten .cyber-card-body,
  #auf-ein-wort-view-uebersichten.active #aw-card-uebersichten .cyber-card-body {
    padding: 0 !important;
  }

  /* Remove nested overview-menu-card frame (keep page card + col boxes) */
  [id$="-ueberblick"] .overview-menu-card,
  #mod-rechtschreibung-system .overview-menu-card,
  #auf-ein-wort-view-uebersichten.active .overview-menu-card,
  #auf-ein-wort-view-uebersichten .overview-menu-card {
    margin-top: 4px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .overview-menu-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .overview-menu-col {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px !important;
    background: var(--surface-subtle, rgba(255, 255, 255, 0.03)) !important;
    border: 1px solid var(--color-border, #334155) !important;
    border-radius: 8px !important;
  }

  .overview-menu-col-title {
    font-size: 0.84rem !important;
    padding: 0 4px 6px !important;
    color: var(--cyber-cyan, #06b6d4) !important;
  }

  .overview-menu-col-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .overview-menu-btn {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 10px 14px !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    touch-action: manipulation !important;
    border-radius: 6px !important;
    background: var(--bg-card, #1e293b) !important;
    border: 1px solid var(--color-border, #334155) !important;
  }

  /* Module list: Unterkapitel under modules that have them */
  .phone-overview-mod {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
  }

  .phone-overview-mod > .overview-menu-btn.has-phone-subs {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  .phone-overview-mod:not(.is-open) > .overview-menu-btn.has-phone-subs {
    border-radius: 6px !important;
  }

  .overview-menu-btn.has-phone-subs .phone-overview-chevron {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 14px !important;
    width: 14px !important;
    height: 14px !important;
    margin-left: auto !important;
    color: var(--color-text-muted, #94a3b8) !important;
    transform: rotate(0deg) !important;
    transform-origin: center center !important;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s !important;
  }

  .overview-menu-btn.has-phone-subs .phone-overview-chevron svg {
    width: 13px !important;
    height: 13px !important;
    display: block !important;
  }

  .phone-overview-mod.is-open > .overview-menu-btn.has-phone-subs .phone-overview-chevron {
    color: var(--cyber-pink, #ec4899) !important;
    transform: rotate(90deg) !important;
  }

  .phone-overview-subs {
    display: none !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 0 4px !important;
    padding: 4px 0 6px !important;
    border: 1px solid var(--color-border, #334155) !important;
    border-top: none !important;
    border-radius: 0 0 6px 6px !important;
    background: color-mix(in srgb, var(--bg-card, #1e293b) 88%, #0b1220) !important;
    box-sizing: border-box !important;
  }

  .phone-overview-mod.is-open > .phone-overview-subs {
    display: flex !important;
  }

  .phone-overview-sub-btn {
    display: block !important;
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 8px 14px 8px 28px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--color-text, #e2e8f0) !important;
    font: inherit !important;
    font-size: 0.86rem !important;
    line-height: 1.35 !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }

  .phone-overview-sub-btn + .phone-overview-sub-btn {
    border-top: 1px solid rgba(148, 163, 184, 0.14) !important;
  }

  .phone-overview-sub-btn:active {
    background: rgba(6, 182, 212, 0.12) !important;
  }

  .overview-menu-badge {
    flex: 0 0 auto !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    color: var(--cyber-cyan, #06b6d4) !important;
  }

  .overview-menu-label {
    flex: 1 1 auto !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    font-size: 0.92rem !important;
    line-height: 1.35 !important;
    text-align: left !important;
    color: var(--color-text-strong, #ffffff) !important;
  }

  .overview-menu-btn:disabled,
  .overview-menu-btn.is-disabled {
    opacity: 0.52 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    background: var(--surface-subtle, rgba(255,255,255,0.03)) !important;
    border-color: var(--color-border, #334155) !important;
    color: var(--color-text-muted, #94a3b8) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .overview-menu-hint {
    display: inline-block;
    font-size: 0.72rem !important;
    font-style: italic;
    opacity: 0.7;
    margin-left: 4px;
    font-weight: 400;
  }

  /* 2. Homepage Modulkarten [01] bis [12] */
  .home-hub-main > .hub-card {
    display: block !important;
    position: static !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
    margin-bottom: 16px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(6, 182, 212, 0.28) !important;
    background: color-mix(in srgb, var(--bg-card, #1e293b) 95%, #0b1220) !important;
    overflow: visible !important;
  }

  /* Re-assert: phone never shows old Überblick hub cards (wins over display:block above).
     Keep Desktop toggle (data-layout=desktop) usable on narrow viewports. */
  

  .home-hub .hub-motif {
    padding: 14px !important;
    min-height: 52px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    background: color-mix(in srgb, var(--cyber-cyan-dim, rgba(6, 182, 212, 0.12)) 80%, transparent) !important;
    border-radius: 11px 11px 0 0 !important;
    border-bottom: 1px solid rgba(6, 182, 212, 0.22) !important;
  }

  .home-hub .hub-title {
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    word-break: break-word !important;
  }

  .home-hub .hub-idx {
    font-size: 1rem !important;
    font-weight: 800 !important;
    flex: 0 0 auto !important;
    width: auto !important;
  }

  .home-hub .hub-overview-link {
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 48px !important;
    padding: 12px 14px !important;
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    word-break: break-word !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin: 4px 0 10px !important;
  }

  .home-hub .hub-card .haupt-header,
  .hub-card .haupt-header,
  .haupt-header {
    display: flex !important;
    min-height: 48px !important;
    align-items: center !important;
    padding: 12px 14px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.35 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    touch-action: manipulation !important;
  }

  .home-hub .sub-chap-item,
  .hub-card .sub-chap-item,
  .sub-chap-item {
    min-height: 48px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    padding: 12px 14px !important;
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    gap: 8px !important;
  }

  .home-hub .sub-chap-item:active,
  .hub-card .sub-chap-item:active,
  .sub-chap-item:active {
    background: rgba(6, 182, 212, 0.15) !important;
  }

  .home-hub .sub-chap-nr,
  .hub-card .sub-chap-nr,
  .sub-chap-item .sub-chap-nr {
    font-family: var(--font-mono, monospace) !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    color: var(--cyber-cyan, #06b6d4) !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-right: 4px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* 3. Übersichtskarten / Map-Links in den Überblicksmodulen (z.B. Phonetik Vokale/Konsonanten)
     Desktop stapelt Titel + Detail vertikal; die frühere Phone-Row + nowrap hat lange
     Detailtexte (Öffnungsgrad · Lippenstellung …) zerquetscht / falsch formatiert. */
  .semantik-map-list a,
  .semantik-map-list button.semantik-map-link,
  .wortschatz-map-list a,
  .wortschatz-map-list button.wortschatz-map-link,
  .phon-map-list button.phon-map-link,
  .phon-map-list .phon-map-plain,
  .syntax-map-list button.syntax-map-link,
  .rechtschreibung-map-list button.rechtschreibung-map-link,
  .morphologie-map-list button.morphologie-map-link,
  .sprachgeschichte-map-list button.sprachgeschichte-map-link,
  .schriftverkehr-map-list button.schriftverkehr-map-link,
  .brd-hub-map-list button.brd-hub-map-link,
  .niveau-map-list button.niveau-map-link,
  .phon-map-foot-body button.phon-map-link,
  .syntax-map-foot-body button.syntax-map-link,
  .rechtschreibung-map-foot-body button.rechtschreibung-map-link,
  .wortschatz-map-foot-body button.wortschatz-map-link,
  .morphologie-map-foot-body button.morphologie-map-link,
  .sprachgeschichte-map-foot-body button.sprachgeschichte-map-link,
  .schriftverkehr-map-foot-body button.schriftverkehr-map-link,
  .brd-hub-map-foot-body button.brd-hub-map-link,
  .niveau-map-foot-body button.niveau-map-link {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-height: 48px !important;
    padding: 10px 14px !important;
    gap: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.35 !important;
  }

  .semantik-map-detail,
  .wortschatz-map-detail,
  .phon-map-detail,
  .syntax-map-detail,
  .rechtschreibung-map-detail,
  .morphologie-map-detail,
  .sprachgeschichte-map-detail,
  .schriftverkehr-map-detail,
  .brd-map-detail,
  .brd-hub-map-detail,
  .niveau-map-detail {
    display: block !important;
    flex: 0 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
  }

  /* 4. Subnav-Karten: Keine Überlappungen von Pills und Mark */
  .chapter-nav.chap-subnav-card .page-section-nav-mark,
  .page-section-nav .page-section-nav-mark {
    display: none !important;
  }

  .chapter-nav.chap-subnav-card .chapter-nav-groups,
  .page-section-nav .page-section-nav-groups {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
  }

  .chapter-nav.chap-subnav-card .chapter-nav-pills {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    width: 100% !important;
    padding-bottom: 6px !important;
    scrollbar-width: thin !important;
  }

  .chapter-nav-pill {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 14px !important;
  }

  #herkunft-alpha.is-lang-jump .herkunft-chip-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    width: 100% !important;
    padding: 4px 0 !important;
  }

  /* =============================================================================
     Mobile Tabellen & Listen (≤640px)
     - Rechtsscroll: Vollständiges horizontales Scrollen ohne Abschneiden
     - Wort- und Ausdrucksspalte links: Vollständige Wortumbrüche, kein Überfließen
     ============================================================================= */
  .table-h-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    margin: 0 -4px 16px !important;
    padding: 0 4px 8px !important;
    width: calc(100% + 8px) !important;
    box-sizing: border-box !important;
    touch-action: pan-x pan-y pinch-zoom !important;
    scrollbar-width: thin !important;
  }

  /* Auch Tabellen direkt in Karten (ohne .table-h-scroll) sauber scrollbar machen */
  .cyber-card-body,
  .table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    scrollbar-width: thin !important;
  }

  /* Alphabet-Pin: Container darf overflow nicht clippen (sonst klebt die Zeile nicht) */
  .table-container.table-container--with-alpha {
    overflow: visible !important;
  }
  .cyber-card-body:has(.table-container--with-alpha),
  .cyber-card-body:has(.verb-table-pin-head) {
    overflow-x: visible !important;
  }
  .table-container.table-container--with-alpha > .table-h-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y pinch-zoom !important;
  }

  /* Tabellen-Grundregeln mobil: Rechtsscroll.
     max-width:none: sonst gewinnen Modul-IDs (z. B. #nuancen-paare-table max-width:100%)
     und quetschen Spalten → Buchstaben untereinander (overflow-wrap:anywhere). */
  .table-container > .table-h-scroll table,
  .table-container > table,
  .cyber-card-body > table {
    table-layout: auto !important;
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  /* Links bei allen Wort- und Ausdrucks-Eintragungen:
     Verhindert, dass der Text in die nächste Spalte fließt! */
  .table-container .table-h-scroll table th:first-child,
  .table-container .table-h-scroll table td:first-child,
  .table-container table th:first-child,
  .table-container table td:first-child,
  .cyber-card-body > table th:first-child,
  .cyber-card-body > table td:first-child {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: manual !important;
    -webkit-hyphens: manual !important;
    box-sizing: border-box !important;
    min-width: 140px !important;
    max-width: none !important;
    vertical-align: top !important;
  }

  /* Alle Tabellenzellen sauber umbrechen, kein horizontaler Textüberlauf.
     Schriftmaß = Hauptsatz-Feldstreifen [03.01.01.2]: eine Größe für th/td inkl. 1. Spalte. */
  .table-h-scroll table,
  .cyber-table,
  .cheat-table,
  .comp-table,
  .pronomen-table,
  .lex-table,
  .table-container table {
    font-size: var(--phone-table-font-size) !important;
  }
  .table-h-scroll table th,
  .table-h-scroll table td,
  .cyber-table th,
  .cyber-table td,
  .cheat-table th,
  .cheat-table td,
  .comp-table th,
  .comp-table td,
  .pronomen-table th,
  .pronomen-table td,
  .lex-table th,
  .lex-table td,
  .table-container table th,
  .table-container table td,
  .table-h-scroll table th:first-child,
  .table-h-scroll table td:first-child,
  .cyber-table th:first-child,
  .cyber-table td:first-child,
  .cheat-table th:first-child,
  .cheat-table td:first-child,
  .comp-table th:first-child,
  .comp-table td:first-child,
  .pronomen-table th:first-child,
  .pronomen-table td:first-child {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
    padding: 10px 12px !important;
    font-size: var(--phone-table-font-size) !important;
    line-height: var(--phone-table-line-height) !important;
    vertical-align: top !important;
  }
  /* strong/em/a erben die Zellengröße — kein em-Aufblasen in einzelnen Spalten */
  .table-h-scroll table th strong,
  .table-h-scroll table td strong,
  .table-h-scroll table th em,
  .table-h-scroll table td em,
  .table-h-scroll table th a,
  .table-h-scroll table td a,
  .cyber-table th strong,
  .cyber-table td strong,
  .cyber-table th em,
  .cyber-table td em,
  .cyber-table th a,
  .cyber-table td a,
  .cheat-table th strong,
  .cheat-table td strong,
  .cheat-table th em,
  .cheat-table td em,
  .cheat-table th a,
  .cheat-table td a,
  .comp-table th strong,
  .comp-table td strong,
  .comp-table th em,
  .comp-table td em,
  .comp-table th a,
  .comp-table td a,
  .pronomen-table th strong,
  .pronomen-table td strong,
  .pronomen-table th em,
  .pronomen-table td em,
  .pronomen-table th a,
  .pronomen-table td a {
    font-size: inherit !important;
  }

  /* Didaktische Tabellen (Feldstreifen, Erklärkarten) + Vokabelisten:
     KEINE Sticky-Erstspalte — die wirkte auf Phone wie eine kleinere Label-Leiste.
     Sticky nur für echte Grammatikmatrizen (siehe Block darunter). */
  .table-h-scroll table.cheat-table:not(.conj-table) th:first-child,
  .table-h-scroll table.cheat-table:not(.conj-table) td:first-child,
  .table-h-scroll table.cyber-table:not(.conj-table) th:first-child,
  .table-h-scroll table.cyber-table:not(.conj-table) td:first-child,
  .table-h-scroll table.wortschatz-2col th:first-child,
  .table-h-scroll table.wortschatz-2col td:first-child,
  .table-h-scroll table.wortschatz-3col th:first-child,
  .table-h-scroll table.wortschatz-3col td:first-child,
  .table-h-scroll table.wortschatz-4col th:first-child,
  .table-h-scroll table.wortschatz-4col td:first-child,
  .table-h-scroll table.lex-table th:first-child,
  .table-h-scroll table.lex-table td:first-child,
  .table-h-scroll table.wortfelder-table th:first-child,
  .table-h-scroll table.wortfelder-table td:first-child,
  .table-h-scroll table.herkunft-table th:first-child,
  .table-h-scroll table.herkunft-table td:first-child,
  .table-h-scroll table[id*="abkuerzung"] th:first-child,
  .table-h-scroll table[id*="abkuerzung"] td:first-child,
  .table-h-scroll table[id*="sprichwoert"] th:first-child,
  .table-h-scroll table[id*="sprichwoert"] td:first-child,
  .table-h-scroll table[id*="redewendung"] th:first-child,
  .table-h-scroll table[id*="redewendung"] td:first-child,
  .table-h-scroll table[id*="praefix"] th:first-child,
  .table-h-scroll table[id*="praefix"] td:first-child,
  .table-h-scroll table[id*="nomen-verb"] th:first-child,
  .table-h-scroll table[id*="nomen-verb"] td:first-child {
    position: static !important;
    left: auto !important;
    box-shadow: none !important;
    max-width: none !important;
  }

  /* 2-Spalten-Listen (z. B. Wort | Bedeutung / Beispiel):
     Ausgewogene Verteilung und Mindestbreiten für sauberes Lesen */
  .wortschatz-2col th:first-child,
  .wortschatz-2col td:first-child {
    width: 46% !important;
    min-width: 140px !important;
    max-width: none !important;
  }

  .wortschatz-2col th:last-child,
  .wortschatz-2col td:last-child {
    width: 54% !important;
    min-width: 200px !important;
    max-width: none !important;
  }

  .table-h-scroll table.wortschatz-2col {
    min-width: 480px !important;
  }

  .table-h-scroll table.wortschatz-3col,
  .table-h-scroll table.comp-table,
  .table-h-scroll table.lex-table,
  .table-h-scroll table.cyber-table,
  .table-h-scroll table.cheat-table {
    min-width: 560px !important;
  }

  .table-h-scroll table.wortschatz-4col,
  .table-h-scroll table.wortfelder-table,
  .table-h-scroll table.herkunft-table {
    min-width: 720px !important;
  }

  /* Sticky Column NUR für echte mehrspaltige Grammatikmatrizen (z. B. Konjugationstabellen, Pronomen) */
  .table-h-scroll table.conj-table th:first-child,
  .table-h-scroll table.conj-table td:first-child,
  .table-h-scroll table.pronomen-table th:first-child,
  .table-h-scroll table.pronomen-table td:first-child,
  .table-h-scroll table#adjektive-suffix-table th:first-child,
  .table-h-scroll table#adjektive-suffix-table td:first-child,
  .table-h-scroll table#adjektive-praefix-matrix-table th:first-child,
  .table-h-scroll table#adjektive-praefix-matrix-table td:first-child,
  .table-h-scroll table#adj-praep-table th.adj-praep-th-adj,
  .table-h-scroll table#adj-praep-table td:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 3 !important;
    background: color-mix(in srgb, var(--bg-card, #1e293b) 96%, #0b1220) !important;
    box-shadow: 3px 0 8px rgba(0, 0, 0, 0.38) !important;
    font-weight: 700 !important;
    min-width: 76px !important;
    max-width: 100px !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  .table-h-scroll table.conj-table,
  .table-h-scroll table.pronomen-table,
  .table-h-scroll table#adjektive-suffix-table,
  .table-h-scroll table#adjektive-praefix-matrix-table,
  .table-h-scroll table#adj-praep-table {
    min-width: 660px !important;
  }

  .table-h-scroll table.conj-table thead th:first-child,
  .table-h-scroll table.pronomen-table thead th:first-child,
  .table-h-scroll table#adjektive-suffix-table thead th:first-child,
  .table-h-scroll table#adjektive-praefix-matrix-table thead th:first-child,
  .table-h-scroll table#adj-praep-table thead th:first-child {
    z-index: 5 !important;
  }

  /* Redemittel-Tabellen: Umwandlung in bequeme Kärtchen */
  .rede-table tbody tr {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 12px 14px !important;
    margin-bottom: 10px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(6, 182, 212, 0.25) !important;
    background: color-mix(in srgb, var(--bg-card, #1e293b) 95%, #0b1220) !important;
  }

  .rede-table thead {
    display: none !important;
  }

  .rede-table tbody td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
    min-width: 0 !important;
    box-shadow: none !important;
  }

  /* Interaktive Quiz- und Selbsttest-Elemente: min. 48px Touch-Fläche */
  .eb-quiz-opt,
  .st-option,
  .eb-quiz-nav button,
  .st-nav-btn {
    min-height: 48px !important;
    padding: 12px 16px !important;
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
    touch-action: manipulation !important;
    box-sizing: border-box !important;
  }

  /* Formular-Eingabefelder: Anti-Zoom für mobile Browser (iOS Safari) */
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  select,
  textarea,
  .kbd-modal input,
  .kbd-modal select,
  .kbd-modal textarea,
  #auth-modal-backdrop input,
  #auth-modal-backdrop select,
  #auth-modal-backdrop textarea {
    font-size: 16px !important;
    touch-action: manipulation !important;
  }

  /* Breadcrumb & Zurück-Button auf Handys klar und kompakt */
  .breadcrumbs {
    font-size: 0.8rem !important;
    gap: 4px !important;
  }

  /* =============================================================================
     Mobile Kopfzeile / Header Bar: Schlank, einzeilig, aufgeräumt (≤640px)
     ============================================================================= */
  .daf-landing-bar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: auto !important;
    min-height: 56px !important;
    max-height: none !important;
    padding: 6px var(--phone-pad-r) 6px var(--phone-pad) !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    background: color-mix(in srgb, var(--bg-app, #0f172a) 90%, transparent) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--cyber-cyan, #06b6d4) 28%, transparent) !important;
    overflow: visible !important;
  }

  .daf-landing-brand-row {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    /* Room for Sprache + Farbe (44px each) + Anmelden (~88–120) + gaps */
    max-width: calc(100% - 210px) !important;
    gap: 0 !important;
  }

  .daf-landing-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 2px !important;
    font-family: var(--font-mono, monospace) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    line-height: 1.15 !important;
  }

  .daf-landing-brand-author {
    display: block !important;
    font-size: 0.62rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--color-text-muted, #94a3b8) !important;
    line-height: 1.1 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Auf Smartphones: langen Untertitel ("Lernplattform |") ausblenden für sauberen Platz */
  .daf-landing-brand [data-i18n="brand.platform"],
  .daf-landing-brand-sep {
    display: none !important;
  }

  /* Desktop-Produktinfo in der Bar ausblenden — Phone nutzt #landing-productinfo-phone */
  .daf-landing-footer-bar #landing-productinfo-btn {
    display: none !important;
  }

  .daf-landing-nav {
    display: none !important;
  }

  .daf-landing-bar-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    max-width: none !important;
    overflow: visible !important;
  }

  /* Text-„Kontakt“ nur Desktop; Phone nutzt Briefumschlag in der Titelzeile */
  

  /* Briefumschlag-Kontakt in der Titelzeile, links vor Anmelden */
  
  
  

  /* Theme/Farbe in der Landing-Kopfzeile */
  
  

  .daf-landing-bar .hud-pref-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    border-radius: 8px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation !important;
  }

  /* Login must stay visible + tappable (44px target; short i18n keeps it on-screen) */
  .daf-landing-bar #landing-auth-btn,
  .daf-landing-bar .daf-auth-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 44px !important;
    height: 44px !important;
    min-width: 88px !important;
    max-width: 120px !important;
    padding: 0 12px !important;
    font-size: 0.78rem !important;
    line-height: 1 !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex-shrink: 0 !important;
    touch-action: manipulation !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* =============================================================================
     Mobile Footer: Kompakt, aufgeräumt, platzsparend (≤640px)
     Landing + app footer: collapsed by default; expand on toggle tap
     ============================================================================= */
  footer,
  .daf-landing-footer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px 12px !important;
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    margin-top: 16px !important;
    margin-bottom: 12px !important;
    border-radius: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(6, 182, 212, 0.2) !important;
    background: color-mix(in srgb, var(--bg-card, #1e293b) 92%, #0b1220) !important;
    overflow: visible !important;
  }

  /* App shell footer: on phone completely hidden (Konto/Termin live elsewhere) */
  

  /* Phone landing + app shell: accordion chrome */
  .daf-landing-footer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 25 !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  .daf-landing-footer,
  footer.app-footer {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    gap: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .daf-landing-footer-toggle,
  .app-footer-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--color-text-strong, var(--color-text, #e2e8f0)) !important;
    font-family: var(--font-mono, monospace) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  :is([data-theme="light"], [data-theme="sepia"]) .daf-landing-footer-toggle,
  :is([data-theme="light"], [data-theme="sepia"]) .app-footer-toggle {
    color: var(--color-text-strong, var(--color-text, #0f172a)) !important;
  }

  .app-footer-toggle-chevron {
    flex-shrink: 0 !important;
    opacity: 0.75 !important;
    transition: transform 0.2s ease !important;
  }

  footer.app-footer:not(.is-collapsed) .app-footer-toggle-chevron {
    transform: rotate(180deg) !important;
  }

  .daf-landing-footer.is-collapsed .daf-landing-footer-panel,
  footer.app-footer.is-collapsed .app-footer-panel {
    display: none !important;
  }

  .daf-landing-footer:not(.is-collapsed) .daf-landing-footer-panel,
  footer.app-footer:not(.is-collapsed) .app-footer-panel {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px 12px !important;
    width: 100% !important;
    padding: 0 14px 12px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  /* Collapsed = toggle only — never a contentless white strip */
  .daf-landing-footer.is-collapsed,
  footer.app-footer.is-collapsed {
    padding: 0 !important;
    margin-bottom: 8px !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* App shell only: keep collapsed footer toggle clear of fixed bottom nav */
  

  /* HUD Konto (Männchen) chrome lives outside this media query — show gated there.
     Text-Abmelden nur Desktop — auf Phone steckt es im Männchen-Menü */
  

  .daf-landing-footer.is-collapsed:not(:has(.daf-landing-footer-toggle)),
  footer.app-footer.is-collapsed:not(:has(.app-footer-toggle)) {
    display: none !important;
  }

  .daf-landing-footer-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    min-height: 44px !important;
    gap: 8px !important;
    padding: 6px 10px !important;
    box-sizing: border-box !important;
  }

  /* Ghost-Pills: klar tippbar, sekundär zum Anmelden-Button */
  .daf-landing-footer-bar .daf-landing-footer-phone-link,
  .daf-landing-footer-bar .daf-landing-footer-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    min-height: 40px !important;
    height: auto !important;
    padding: 8px 10px !important;
    margin: 0 !important;
    border: 1px solid color-mix(in srgb, var(--cyber-cyan, #06b6d4) 55%, transparent) !important;
    border-radius: 8px !important;
    background: color-mix(in srgb, var(--cyber-cyan, #06b6d4) 12%, transparent) !important;
    box-shadow: none !important;
    color: var(--cyber-cyan, #06b6d4) !important;
    font-family: var(--font-mono, monospace) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-align: center !important;
    text-transform: none !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Produktinfo + Rechtliche Hinweise: gleiche Breite */
  .daf-landing-footer-bar #landing-productinfo-phone,
  .daf-landing-footer-bar .daf-landing-footer-toggle {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 8px 10px !important;
  }
  .daf-landing-footer-bar .daf-landing-footer-toggle-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .daf-landing-footer-bar .daf-landing-footer-phone-link:active,
  .daf-landing-footer-bar .daf-landing-footer-toggle:active {
    background: color-mix(in srgb, var(--cyber-cyan, #06b6d4) 22%, transparent) !important;
    border-color: var(--cyber-cyan, #06b6d4) !important;
  }

  :is([data-theme="light"], [data-theme="sepia"]) .daf-landing-footer-bar .daf-landing-footer-phone-link,
  :is([data-theme="light"], [data-theme="sepia"]) .daf-landing-footer-bar .daf-landing-footer-toggle {
    color: var(--cyber-cyan, #0891b2) !important;
    border-color: color-mix(in srgb, var(--cyber-cyan, #0891b2) 50%, transparent) !important;
    background: color-mix(in srgb, var(--cyber-cyan, #0891b2) 10%, transparent) !important;
  }

  .daf-landing-footer-phone-sep {
    display: none !important;
  }

  .footer-actions{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    flex: 1 1 100% !important;
    gap: 6px !important;
    margin: 0 !important;
    justify-content: center !important;
  }

  

  /* Buttons im Footer: Kompakt, sauber, touch-freundlich */
  .footer-buy-btn,
  .footer-account-btn,
  .daf-landing-footer-book-btn {
    width: 100% !important;
    min-height: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    padding: 0 12px !important;
    touch-action: manipulation !important;
  }

  

  /* Kontakt-Icon als kompakter runder Button */
  footer .footer-link.footer-contact{
    align-self: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    border: 1px solid rgba(6, 182, 212, 0.4) !important;
    background: color-mix(in srgb, var(--cyber-cyan-dim) 40%, transparent) !important;
    margin: 2px 0 !important;
  }
  footer .footer-link.footer-contact svg{
    width: 18px !important;
    height: 18px !important;
  }

  /* Rechtliche Links + Copyright: eine gemeinsame Zeile */
  .footer-legal-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px 8px !important;
    width: 100% !important;
    flex: 1 1 100% !important;
    padding: 8px 0 2px !important;
    margin: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-sizing: border-box !important;
  }

  .footer-links,
  .daf-landing-footer-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2px 8px !important;
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 100% !important;
    padding: 8px 0 2px !important;
    margin: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-sizing: border-box !important;
  }

  .footer-links .footer-link,
  .daf-landing-footer-link {
    font-size: 0.7rem !important;
    min-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 3px !important;
    color: var(--color-text-muted, #94a3b8) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    touch-action: manipulation !important;
    white-space: nowrap !important;
  }

  

  .footer-social,
  .daf-landing-footer-copy {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 0.4em !important;
    width: auto !important;
    flex: 0 0 auto !important;
    text-align: center !important;
    font-size: 0.68rem !important;
    color: var(--color-text-muted, #94a3b8) !important;
    margin: 0 !important;
    padding: 0 2px !important;
    line-height: 1.3 !important;
    border: none !important;
    white-space: nowrap !important;
  }

  .daf-landing-footer-year {
    flex: 0 0 auto !important;
  }

  .footer-social::before {
    display: none !important;
    content: none !important;
  }

  .footer-copy {
    white-space: nowrap !important;
  }

  .footer-copy a,
  .daf-landing-footer-copy a {
    color: var(--cyber-cyan, #06b6d4) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }
}

/* Erzwungene Telefon-Ansicht (beliebige Viewport-Breite): gleiches Tabellen-Schriftmaß
   wie @media ≤640px — Referenz [03.01.01.2] Hauptsatz-Feldstreifen. */
html.phone-layout .table-h-scroll table,
html.phone-layout .cyber-table,
html.phone-layout .cheat-table,
html.phone-layout .comp-table,
html.phone-layout .pronomen-table,
html.phone-layout .lex-table,
html.phone-layout .table-container table {
  font-size: var(--phone-table-font-size) !important;
}
html.phone-layout .table-h-scroll table th,
html.phone-layout .table-h-scroll table td,
html.phone-layout .cyber-table th,
html.phone-layout .cyber-table td,
html.phone-layout .cheat-table th,
html.phone-layout .cheat-table td,
html.phone-layout .comp-table th,
html.phone-layout .comp-table td,
html.phone-layout .pronomen-table th,
html.phone-layout .pronomen-table td,
html.phone-layout .lex-table th,
html.phone-layout .lex-table td,
html.phone-layout .table-container table th,
html.phone-layout .table-container table td,
html.phone-layout .table-h-scroll table th:first-child,
html.phone-layout .table-h-scroll table td:first-child,
html.phone-layout .cyber-table th:first-child,
html.phone-layout .cyber-table td:first-child,
html.phone-layout .cheat-table th:first-child,
html.phone-layout .cheat-table td:first-child,
html.phone-layout .comp-table th:first-child,
html.phone-layout .comp-table td:first-child,
html.phone-layout .pronomen-table th:first-child,
html.phone-layout .pronomen-table td:first-child {
  font-size: var(--phone-table-font-size) !important;
  line-height: var(--phone-table-line-height) !important;
}
html.phone-layout .cheat-table th strong,
html.phone-layout .cheat-table td strong,
html.phone-layout .cheat-table th em,
html.phone-layout .cheat-table td em,
html.phone-layout .cheat-table th a,
html.phone-layout .cheat-table td a,
html.phone-layout .cyber-table th strong,
html.phone-layout .cyber-table td strong,
html.phone-layout .cyber-table th em,
html.phone-layout .cyber-table td em,
html.phone-layout .cyber-table th a,
html.phone-layout .cyber-table td a,
html.phone-layout .comp-table th strong,
html.phone-layout .comp-table td strong,
html.phone-layout .pronomen-table th strong,
html.phone-layout .pronomen-table td strong {
  font-size: inherit !important;
}
html.phone-layout .table-h-scroll table.cheat-table:not(.conj-table) th:first-child,
html.phone-layout .table-h-scroll table.cheat-table:not(.conj-table) td:first-child,
html.phone-layout .table-h-scroll table.cyber-table:not(.conj-table) th:first-child,
html.phone-layout .table-h-scroll table.cyber-table:not(.conj-table) td:first-child {
  position: static !important;
  left: auto !important;
  box-shadow: none !important;
  max-width: none !important;
}

html.phone-layout .daf-landing-brand {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 2px !important;
  line-height: 1.15 !important;
}
html.phone-layout .daf-landing-brand-author {
  display: block !important;
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--color-text-muted, #94a3b8) !important;
  line-height: 1.1 !important;
}
html.phone-layout .daf-landing-brand [data-i18n="brand.platform"],
html.phone-layout .daf-landing-brand-sep {
  display: none !important;
}
html.phone-layout .daf-landing-bar #landing-footer-contact-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid color-mix(in srgb, var(--cyber-cyan, #06b6d4) 55%, transparent) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--cyber-cyan, #06b6d4) 12%, transparent) !important;
  color: var(--cyber-cyan, #06b6d4) !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html.phone-layout .daf-landing-bar #landing-footer-contact-btn svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
}
html.phone-layout .daf-landing-footer-bar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  min-height: 44px !important;
  gap: 8px !important;
}
html.phone-layout .daf-landing-footer-bar #landing-productinfo-phone,
html.phone-layout .daf-landing-footer-bar .daf-landing-footer-toggle {
  flex: 1 1 0 !important;
  width: 0 !important;
  min-width: 0 !important;
}

/* =============================================================================
   Mobile Search Overlay (HUD „Suche“ / #hud-phone-search-btn)
   Desktop HUD-Suche bleibt sichtbar; Phone blendet .hud-search aus und öffnet Overlay.
   ============================================================================= */
.mobile-search-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;
  margin: 0;
  padding: 0;
  border: none;
  background: rgba(2, 8, 18, 0.55);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-search-backdrop[hidden] {
  display: none !important;
}

/*
 * Mobile search: openMobileSearch() portals .hud-search to body (.is-phone-search-portal).
 * Stack: #app-loading ≤99990 < backdrop 100000 < search portal 100003 < results 100004
 *        bottom-nav 99998 under the veil.
 */
html.is-mobile-search-open #app-loading:not([hidden]) {
  z-index: 99990 !important;
  pointer-events: none !important;
}

html.is-mobile-search-open .mobile-search-backdrop:not([hidden]),
html.phone-layout.is-mobile-search-open .mobile-search-backdrop:not([hidden]) {
  display: block !important;
  z-index: 100000 !important;
}

html.is-mobile-search-open .hud-search.is-phone-search-portal,
html.phone-layout.is-mobile-search-open .hud-search.is-phone-search-portal {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: fixed !important;
  top: max(10px, env(safe-area-inset-top, 0px)) !important;
  left: 10px !important;
  right: 10px !important;
  z-index: 100003 !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: none !important;
  max-width: none !important;
  width: auto !important;
  flex: none !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.45) !important;
  background: var(--bg-card, #0f172a) !important;
}

html.is-mobile-search-open .hud-search.is-phone-search-portal .search-input,
html.phone-layout.is-mobile-search-open .hud-search.is-phone-search-portal .search-input {
  font-size: 16px !important;
  height: 46px !important;
  min-height: 46px !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

html.is-mobile-search-open .hud-search.is-phone-search-portal .hud-search-kbd,
html.phone-layout.is-mobile-search-open .hud-search.is-phone-search-portal .hud-search-kbd {
  display: none !important;
}

html.is-mobile-search-open .hud-search.is-phone-search-portal .home-search-results,
html.phone-layout.is-mobile-search-open .hud-search.is-phone-search-portal .home-search-results {
  max-height: min(58vh, 420px) !important;
  z-index: 100004 !important;
}

html.phone-layout #mod-auf-ein-wort .aw-intro,
html.phone-layout #auf-ein-wort-view-uebersichten .aw-intro,
html.phone-layout #auf-ein-wort-view-uebersichten .overview-menu-sub {
  display: none !important;
}

html.phone-layout #auf-ein-wort-view-uebersichten .overview-menu-title > span {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}

html.phone-layout #auf-ein-wort-view-uebersichten .overview-menu-title > span::after {
  content: "Module";
  display: inline !important;
  font-size: 1.05rem !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: var(--color-text-strong, #ffffff) !important;
}

html.phone-layout #auf-ein-wort-view-uebersichten #aw-card-uebersichten {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.phone-layout #auf-ein-wort-view-uebersichten #aw-card-uebersichten .cyber-card-body {
  padding: 0 !important;
}

html.phone-layout #auf-ein-wort-view-uebersichten .overview-menu-card {
  margin-top: 4px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Forced phone layout: Module-list Unterkapitel (same as ≤640 block) */
html.phone-layout .phone-overview-mod {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
}
html.phone-layout .phone-overview-mod > .overview-menu-btn.has-phone-subs {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
html.phone-layout .phone-overview-mod:not(.is-open) > .overview-menu-btn.has-phone-subs {
  border-radius: 6px !important;
}
html.phone-layout .overview-menu-btn.has-phone-subs .phone-overview-chevron {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 14px !important;
  width: 14px !important;
  height: 14px !important;
  margin-left: auto !important;
  color: var(--color-text-muted, #94a3b8) !important;
  transform: rotate(0deg) !important;
  transform-origin: center center !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s !important;
}
html.phone-layout .overview-menu-btn.has-phone-subs .phone-overview-chevron svg {
  width: 13px !important;
  height: 13px !important;
  display: block !important;
}
html.phone-layout .phone-overview-mod.is-open > .overview-menu-btn.has-phone-subs .phone-overview-chevron {
  color: var(--cyber-pink, #ec4899) !important;
  transform: rotate(90deg) !important;
}
html.phone-layout .phone-overview-subs {
  display: none !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
  margin: 0 0 4px !important;
  padding: 4px 0 6px !important;
  border: 1px solid var(--color-border, #334155) !important;
  border-top: none !important;
  border-radius: 0 0 6px 6px !important;
  background: color-mix(in srgb, var(--bg-card, #1e293b) 88%, #0b1220) !important;
  box-sizing: border-box !important;
}
html.phone-layout .phone-overview-mod.is-open > .phone-overview-subs {
  display: flex !important;
}
html.phone-layout .phone-overview-sub-btn {
  display: block !important;
  width: 100% !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 8px 14px 8px 28px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--color-text, #e2e8f0) !important;
  font: inherit !important;
  font-size: 0.86rem !important;
  line-height: 1.35 !important;
  text-align: left !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}
html.phone-layout .phone-overview-sub-btn + .phone-overview-sub-btn {
  border-top: 1px solid rgba(148, 163, 184, 0.14) !important;
}

html.phone-layout.is-phone-lernprozess-open .home-toc {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  max-height: none !important;
  min-height: calc(100dvh - 120px - env(safe-area-inset-bottom, 0px)) !important;
}

html.phone-layout.is-phone-lernprozess-open .home-toc-meta > :not(#home-progress),
html.phone-layout.is-phone-lernprozess-open .home-toc-group,
html.phone-layout.is-phone-lernprozess-open .home-toc-section,
html.phone-layout.is-phone-lernprozess-open .home-toc-footer {
  display: none !important;
}

html.phone-layout.is-phone-lernprozess-open #home-progress {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  margin: 0 !important;
  min-height: calc(100dvh - 132px - env(safe-area-inset-bottom, 0px)) !important;
}

html.phone-layout.is-phone-lernprozess-open #home-progress-toggle {
  display: none !important;
}

html.phone-layout.is-phone-lernprozess-open #home-progress.is-open #home-progress-panel,
html.phone-layout.is-phone-lernprozess-open #home-progress-panel:not([hidden]) {
  display: flex !important;
  flex-direction: column !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-height: calc(100dvh - 132px - env(safe-area-inset-bottom, 0px)) !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 22px 18px 28px !important;
  gap: 18px !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

html.phone-layout.is-phone-lernprozess-open #home-progress-panel .home-progress-cta.cyber-cta-glow {
  min-height: 52px !important;
  padding: 14px 16px !important;
  font-size: 0.95rem !important;
}

html.phone-layout.is-phone-lernprozess-open #home-progress-panel .home-progress-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

html.phone-layout.is-phone-lernprozess-open #home-progress-panel .home-progress-secondary {
  min-height: 48px !important;
  padding: 12px 14px !important;
  font-size: 0.92rem !important;
}

html.phone-layout.is-phone-lernprozess-open #home-progress-panel .home-progress-learned-section,
html.phone-layout.is-phone-lernprozess-open #home-progress-panel .home-progress-learned-section.cyber-progress-widget {
  min-height: 76px !important;
  padding: 16px 14px !important;
}

html.phone-layout.is-phone-lernprozess-open #app-footer,
html.phone-layout.is-phone-lernprozess-open footer.app-footer {
  display: none !important;
}

/*
 * Forced phone layout (data-layout=phone) in landscape / >640px width:
 * the ≤640px media block no longer applies, so keep bottom-nav + clearance.
 */
@media (min-width: 641px) {
  html.phone-layout.phone-preview-active .mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    background: color-mix(in srgb, #0b1220 90%, transparent) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-top: 1px solid rgba(6, 182, 212, 0.28) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5) !important;
    z-index: 99998 !important;
    align-items: stretch !important;
    justify-content: space-around !important;
    box-sizing: border-box !important;
  }

  html.phone-layout.phone-preview-active body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html.phone-layout.phone-preview-active #app-shell {
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }
}


/* --- Adjektivdeklination: Ansicht / Kasus / Farblegende (nur Telefon) --- */
html.phone-layout #mod-adjektiv-deklination .kasus-order-bar {
  padding: 10px;
  overflow: hidden;
  box-sizing: border-box;
  max-width: 100%;
}
html.phone-layout #mod-adjektiv-deklination .kasus-order-bar--with-adjdek > .kasus-order-bar-row:first-child {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
html.phone-layout #mod-adjektiv-deklination .kasus-order-bar-sep {
  display: none;
}
html.phone-layout #mod-adjektiv-deklination .kasus-order-bar-label {
  margin: 0;
  min-width: 0;
}
html.phone-layout #mod-adjektiv-deklination .kasus-order-bar-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
}
html.phone-layout #mod-adjektiv-deklination .kasus-order-option {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 8px 6px;
  font-size: 10px;
  line-height: 1.25;
  white-space: normal;
}

html.phone-layout #adjdek-view-endungen .kasus-order-bar--with-adjdek {
  gap: 10px;
}
html.phone-layout #adjdek-view-endungen .kasus-order-bar-row--legend {
  flex-direction: column;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
}
html.phone-layout #adjdek-view-endungen .kasus-order-bar-legend {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
html.phone-layout #adjdek-view-endungen .adjdek-end-legend-lead {
  font-size: 11px;
  line-height: 1.35;
  margin-right: 0;
  white-space: normal;
}
html.phone-layout #adjdek-view-endungen .adjdek-end-legend-swatches,
html.phone-layout #adjdek-view-endungen .adjdek-end-legend-strong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-left: 0;
  padding-left: 0;
  border-left: none;
  white-space: normal;
  width: 100%;
  max-width: 100%;
  flex-shrink: 1;
}
html.phone-layout #adjdek-view-endungen .adjdek-end-legend-hint {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  font-size: 10.5px;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}
html.phone-layout #adjdek-view-endungen .adjdek-end-swatch {
  flex: 0 0 auto;
}