:root{
  --lp-bg:#071827;--lp-panel:#0b2234;--lp-panel2:#0e2b40;
  --lp-cyan:#78ddf5;--lp-gold:#f2cf7d;--lp-text:#f5fbff;
  --lp-muted:#b9ccd8;--lp-line:rgba(120,221,245,.19);
}
html,body{max-width:100%;overflow-x:hidden}
body{min-width:0}
.page-hero{padding-block:24px 16px!important}
.page-hero .container,.section>.container{max-width:1160px!important;width:min(100% - 24px,1160px)!important;margin-inline:auto!important}
.page-hero h1{font-size:clamp(27px,3vw,42px)!important;line-height:1.25!important}
.section{padding-top:8px!important}

.lp-shell{
  position:sticky;top:8px;z-index:1200;
  max-width:1160px;width:min(100% - 24px,1160px);margin:14px auto 8px;padding:14px;
  border:1px solid var(--lp-line);border-radius:20px;
  background:linear-gradient(180deg,rgba(13,39,58,.98),rgba(7,24,37,.98));
  box-shadow:0 16px 46px rgba(0,0,0,.24);backdrop-filter:blur(12px)
}
.lp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;direction:rtl}
.lp-copy{text-align:right;min-width:0}
.lp-kicker{
  display:inline-flex;align-items:center;gap:7px;padding:5px 9px;
  border:1px solid rgba(242,207,125,.28);border-radius:999px;
  background:rgba(242,207,125,.09);color:var(--lp-gold);font-size:12px;font-weight:800
}
.lp-title{margin:7px 0 2px;font-size:clamp(20px,2vw,28px);color:#fff}
.lp-sub{margin:0;color:var(--lp-muted);font-size:12px;line-height:1.6}
.lp-view-toggle{
  flex:0 0 auto;border:1px solid rgba(242,207,125,.46);border-radius:12px;padding:10px 13px;
  background:linear-gradient(135deg,#f2cf7d,#d5a64d);color:#071827;
  font:900 13px Tahoma,Arial,sans-serif;cursor:pointer;white-space:nowrap
}
.lp-view-toggle.full{background:#123b54;color:#fff;border-color:rgba(120,221,245,.35)}

.lp-stepper{
  direction:rtl;display:flex;gap:7px;margin-top:12px;overflow-x:auto;
  padding-bottom:4px;overscroll-behavior-x:contain;scrollbar-width:thin
}
.lp-step{
  flex:0 0 auto;min-width:104px;border:1px solid var(--lp-line);border-radius:12px;
  padding:8px 8px;background:#0b263a;color:#d9e8ef;cursor:pointer;text-align:center;
  font:800 11px Tahoma,Arial,sans-serif;line-height:1.3
}
.lp-step .ico{display:block;font-size:16px;margin-bottom:2px}
.lp-step.active{border-color:rgba(242,207,125,.72);background:#173746;color:#fff}
.lp-step.done{border-color:rgba(120,221,245,.34)}
.lp-progress{height:4px;background:#0a2a3d;border-radius:999px;overflow:hidden;margin-top:9px}
.lp-progress>span{display:block;height:100%;background:linear-gradient(90deg,#78ddf5,#f2cf7d);transition:width .2s}

.lp-stagebar{
  max-width:1160px;width:min(100% - 24px,1160px);margin:7px auto 0;padding:9px 11px;
  display:flex;direction:rtl;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid var(--lp-line);border-radius:15px;background:#0a2133
}
.lp-stage-label{min-width:0;text-align:right}
.lp-stage-label strong{display:block;color:#fff;font-size:15px}
.lp-stage-label span{display:block;color:#a9c4d1;font-size:11px;margin-top:2px}
.lp-nav{display:flex;gap:7px;flex:0 0 auto}
.lp-nav button,.lp-subnav button{
  border:1px solid rgba(120,221,245,.26);background:#102f45;color:#fff;border-radius:10px;
  padding:8px 11px;font:800 12px Tahoma,Arial,sans-serif;cursor:pointer
}
.lp-nav button.primary{background:#d5a64d;color:#071827;border-color:#f2cf7d}
.lp-nav button:disabled{opacity:.35;cursor:not-allowed}

.lp-subnav{
  max-width:1160px;width:min(100% - 24px,1160px);margin:6px auto 0;padding:8px 10px;
  display:none;gap:7px;align-items:center;border:1px dashed rgba(120,221,245,.20);
  border-radius:12px;background:#081d2d;direction:rtl;overflow-x:auto
}
.lp-subnav.show{display:flex}
.lp-subnav .label{font-size:11px;color:#a9c4d1;white-space:nowrap}
.lp-subnav button{white-space:nowrap}
.lp-subnav button.active{background:#1b4a63;border-color:#78ddf5}

body.lp-focus .slide.glass{display:none!important}
body.lp-focus .slide.glass.lp-visible{display:block!important;animation:lpIn .18s ease-out}
@keyframes lpIn{from{opacity:.25;transform:translateY(7px)}to{opacity:1;transform:none}}

body.lp-full .slide.glass{display:block!important}
body.lp-full .lp-stagebar,body.lp-full .lp-subnav{display:none!important}
body.lp-full .lp-shell{position:relative;top:auto}
body.lp-full .lp-step.active{border-color:rgba(120,221,245,.45);background:#123247}

.slide.glass{
  max-width:1160px!important;margin:10px auto!important;border-radius:20px!important;
}
.slide.glass .lesson-block{max-width:100%!important;overflow:auto}
.slide.glass .table-scroll,.slide.glass .work-table-wrap{max-width:100%;overflow-x:auto}
.slide.glass table{max-width:100%}
.slide.glass img{max-width:100%;height:auto}

@media(max-width:760px){
  .page-hero{padding-block:17px 9px!important}
  .page-hero h1{font-size:26px!important}
  .page-hero .container,.section>.container{width:min(100% - 18px,1160px)!important}
  .lp-shell{top:5px;width:calc(100% - 18px);margin:8px 9px 5px;padding:10px;border-radius:16px}
  .lp-head{display:block}
  .lp-title{font-size:19px;margin-top:6px}
  .lp-sub{font-size:11px;line-height:1.5}
  .lp-view-toggle{width:100%;margin-top:8px;padding:9px 11px;font-size:12px}
  .lp-stepper{margin-top:9px;scroll-snap-type:x proximity}
  .lp-step{flex:0 0 104px;scroll-snap-align:start;padding:7px 6px;font-size:10px}
  .lp-step .ico{font-size:15px}
  .lp-stagebar{width:calc(100% - 18px);margin:5px 9px 0;padding:8px 9px;display:block}
  .lp-stage-label{text-align:center}
  .lp-stage-label strong{font-size:13px}
  .lp-nav{justify-content:center;margin-top:7px}
  .lp-nav button{font-size:11px;padding:7px 9px}
  .lp-subnav{width:calc(100% - 18px);margin:5px 9px 0;padding:7px 8px}
  .lp-subnav button{font-size:10px;padding:7px 8px}
  .slide.glass{width:calc(100% - 18px)!important;margin:8px 9px!important;border-radius:15px!important;padding:12px!important}
  .slide.glass h2{font-size:22px!important}
  .slide.glass h3{font-size:17px!important}
  .slide.glass p,.slide.glass li,.slide.glass td,.slide.glass th{font-size:14px!important;line-height:1.65!important}
}


/* Reisen DE responsive correction — desktop / tablet / phone */
body[data-session^="session-"] .session-layout{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
}
body[data-session^="session-"] .session-layout>.slides{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}
body[data-session^="session-"] .toc{
  display:none!important;
}

/* Prevent any lesson component from forcing page width */
body[data-session^="session-"] .slides,
body[data-session^="session-"] .slide,
body[data-session^="session-"] .lesson-block,
body[data-session^="session-"] .card,
body[data-session^="session-"] .worksheet-dialogue,
body[data-session^="session-"] .dialogue-line,
body[data-session^="session-"] .test-section,
body[data-session^="session-"] .test-item{
  min-width:0!important;
  max-width:100%!important;
}
body[data-session^="session-"] .german,
body[data-session^="session-"] .de,
body[data-session^="session-"] .task-instruction,
body[data-session^="session-"] .worksheet-items,
body[data-session^="session-"] .reading-text,
body[data-session^="session-"] .test-prompt{
  overflow-wrap:anywhere;
  word-break:normal;
}
body[data-session^="session-"] .worksheet-source{
  max-width:100%;
}
body[data-session^="session-"] .worksheet-source .track-pill{
  max-width:100%;
  white-space:normal!important;
  text-align:center;
  overflow-wrap:anywhere;
}
body[data-session^="session-"] .work-table-wrap{
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
  -webkit-overflow-scrolling:touch;
}

/* DESKTOP: 1180px reading canvas */
@media (min-width:1181px){
  body[data-session^="session-"] .page-hero .container,
  body[data-session^="session-"] .section>.container,
  body[data-session^="session-"] .lp-shell,
  body[data-session^="session-"] .lp-stagebar,
  body[data-session^="session-"] .lp-subnav,
  body[data-session^="session-"] .slide.glass{
    width:min(1180px,calc(100% - 48px))!important;
    max-width:1180px!important;
    margin-inline:auto!important;
  }
  body[data-session^="session-"] .page-title{
    grid-template-columns:minmax(0,1fr) 360px!important;
    gap:28px!important;
  }
  body[data-session^="session-"] .page-title img{
    width:360px!important;
    max-width:100%!important;
    justify-self:end;
  }
}

/* TABLET / SMALL LAPTOP */
@media (min-width:768px) and (max-width:1180px){
  body[data-session^="session-"] .page-hero .container,
  body[data-session^="session-"] .section>.container,
  body[data-session^="session-"] .lp-shell,
  body[data-session^="session-"] .lp-stagebar,
  body[data-session^="session-"] .lp-subnav,
  body[data-session^="session-"] .slide.glass{
    width:min(94vw,960px)!important;
    max-width:960px!important;
    margin-inline:auto!important;
  }
  body[data-session^="session-"] .page-title{
    grid-template-columns:minmax(0,1fr) 300px!important;
    gap:20px!important;
    align-items:center!important;
  }
  body[data-session^="session-"] .page-title img{
    width:300px!important;
    max-width:100%!important;
    justify-self:end;
  }
  body[data-session^="session-"] .lp-shell{
    position:relative!important;
    top:auto!important;
  }
  body[data-session^="session-"] .lp-step{
    min-width:100px!important;
  }
  body[data-session^="session-"] .slide.glass{
    padding:22px!important;
  }
}

/* PHONE */
@media (max-width:767px){
  html,body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }
  body[data-session^="session-"] .container,
  body[data-session^="session-"] .page-hero .container,
  body[data-session^="session-"] .section>.container{
    width:calc(100% - 16px)!important;
    max-width:none!important;
    margin-inline:8px!important;
  }

  /* compact hero instead of a huge desktop composition squeezed into phone */
  body[data-session^="session-"] .page-hero{
    padding:12px 0 6px!important;
  }
  body[data-session^="session-"] .crumbs{
    margin-bottom:8px!important;
    font-size:10px!important;
    gap:5px!important;
  }
  body[data-session^="session-"] .page-title{
    display:block!important;
  }
  body[data-session^="session-"] .page-title h1{
    font-size:clamp(25px,8vw,31px)!important;
    line-height:1.3!important;
    margin:8px 0!important;
  }
  body[data-session^="session-"] .page-title .de-title{
    font-size:18px!important;
    line-height:1.35!important;
    margin-bottom:6px!important;
  }
  body[data-session^="session-"] .page-title .lead{
    font-size:12px!important;
    line-height:1.7!important;
    margin-bottom:9px!important;
  }
  body[data-session^="session-"] .page-title img{
    width:100%!important;
    max-height:190px!important;
    aspect-ratio:16/8!important;
    object-fit:cover!important;
    margin-top:10px!important;
    border-radius:14px!important;
  }

  /* focus controller: compact and non-sticky so it doesn't eat half the phone screen */
  body[data-session^="session-"] .lp-shell{
    position:relative!important;
    top:auto!important;
    width:calc(100% - 16px)!important;
    max-width:none!important;
    margin:7px 8px 4px!important;
    padding:9px!important;
    border-radius:14px!important;
  }
  body[data-session^="session-"] .lp-kicker{
    font-size:10px!important;
    padding:4px 7px!important;
  }
  body[data-session^="session-"] .lp-title{
    font-size:17px!important;
    line-height:1.4!important;
    margin:5px 0 0!important;
  }
  body[data-session^="session-"] .lp-sub{
    display:none!important;
  }
  body[data-session^="session-"] .lp-view-toggle{
    margin-top:7px!important;
    min-height:40px!important;
    padding:8px 10px!important;
    font-size:11px!important;
    border-radius:10px!important;
  }

  /* small scrollable learning path — page itself never scrolls horizontally */
  body[data-session^="session-"] .lp-stepper{
    width:100%!important;
    max-width:100%!important;
    gap:5px!important;
    margin-top:8px!important;
    padding:0 0 5px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch;
  }
  body[data-session^="session-"] .lp-step{
    flex:0 0 82px!important;
    min-width:82px!important;
    max-width:82px!important;
    padding:6px 4px!important;
    font-size:9px!important;
    border-radius:9px!important;
  }
  body[data-session^="session-"] .lp-step .ico{
    font-size:14px!important;
    margin-bottom:1px!important;
  }
  body[data-session^="session-"] .lp-progress{
    margin-top:6px!important;
  }

  body[data-session^="session-"] .lp-stagebar{
    width:calc(100% - 16px)!important;
    max-width:none!important;
    margin:4px 8px 0!important;
    padding:7px 8px!important;
    border-radius:12px!important;
  }
  body[data-session^="session-"] .lp-stage-label strong{
    font-size:12px!important;
    line-height:1.45!important;
  }
  body[data-session^="session-"] .lp-stage-label span{
    font-size:9px!important;
  }
  body[data-session^="session-"] .lp-nav{
    margin-top:5px!important;
  }
  body[data-session^="session-"] .lp-nav button{
    min-width:84px!important;
    padding:7px 8px!important;
    font-size:10px!important;
  }
  body[data-session^="session-"] .lp-subnav{
    width:calc(100% - 16px)!important;
    max-width:none!important;
    margin:4px 8px 0!important;
    padding:6px!important;
    gap:5px!important;
  }
  body[data-session^="session-"] .lp-subnav button{
    font-size:9px!important;
    padding:6px 7px!important;
  }

  /* lesson card */
  body[data-session^="session-"] .section{
    padding:7px 0 24px!important;
  }
  body[data-session^="session-"] .slide.glass{
    width:100%!important;
    max-width:100%!important;
    margin:6px 0!important;
    padding:11px!important;
    border-radius:13px!important;
  }
  body[data-session^="session-"] .slide-kicker{
    font-size:9px!important;
  }
  body[data-session^="session-"] .slide-head{
    margin:5px 0 11px!important;
  }
  body[data-session^="session-"] .slide-head h2{
    font-size:20px!important;
    line-height:1.45!important;
    margin-bottom:4px!important;
  }
  body[data-session^="session-"] .slide-head .de-title{
    font-size:13px!important;
    line-height:1.45!important;
  }
  body[data-session^="session-"] .notice{
    padding:9px!important;
    font-size:12px!important;
    line-height:1.65!important;
    border-radius:10px!important;
  }
  body[data-session^="session-"] .lesson-block{
    padding:10px!important;
    margin-top:9px!important;
    border-radius:12px!important;
  }
  body[data-session^="session-"] .lesson-block>h3{
    font-size:16px!important;
    line-height:1.45!important;
  }
  body[data-session^="session-"] .worksheet-source{
    display:block!important;
    padding:8px!important;
    font-size:10px!important;
    line-height:1.55!important;
  }
  body[data-session^="session-"] .worksheet-source .track-pill{
    display:flex!important;
    width:100%!important;
    justify-content:center!important;
    margin-top:6px!important;
    padding:7px 8px!important;
    font-size:10px!important;
  }
  body[data-session^="session-"] .card{
    padding:10px!important;
    border-radius:11px!important;
  }
  body[data-session^="session-"] .card h3{
    font-size:14px!important;
  }
  body[data-session^="session-"] .card p,
  body[data-session^="session-"] .card li,
  body[data-session^="session-"] .worksheet-items,
  body[data-session^="session-"] .reading-text p,
  body[data-session^="session-"] .test-prompt{
    font-size:12px!important;
    line-height:1.7!important;
  }
  body[data-session^="session-"] .dialogue-line{
    grid-template-columns:1fr!important;
    padding:9px!important;
  }
  body[data-session^="session-"] .speaker{
    font-size:12px!important;
  }
  body[data-session^="session-"] .work-table{
    min-width:520px!important;
  }
  body[data-session^="session-"] .work-table th,
  body[data-session^="session-"] .work-table td{
    padding:8px 9px!important;
    font-size:11px!important;
  }
  body[data-session^="session-"] .session-nav{
    margin:16px 0!important;
    gap:7px!important;
  }
  body[data-session^="session-"] .session-nav .btn{
    width:100%!important;
    min-height:42px!important;
  }
}

/* very small phones */
@media (max-width:390px){
  body[data-session^="session-"] .page-title img{max-height:155px!important}
  body[data-session^="session-"] .lp-step{flex-basis:76px!important;min-width:76px!important;max-width:76px!important}
  body[data-session^="session-"] .slide.glass{padding:9px!important}
  body[data-session^="session-"] .work-table{min-width:480px!important}
}


/* ============================================================
   MOBILE FIX V3 — cache-busted asset
   Goal: zero page-wide horizontal overflow on phone/tablet.
   ============================================================ */
body[data-session^="session-"] .toc{display:none!important}
body[data-session^="session-"] .session-layout{
  display:block!important;
  grid-template-columns:none!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:visible!important;
}
body[data-session^="session-"] .slides{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}
body[data-session^="session-"] .slide,
body[data-session^="session-"] .lesson-block,
body[data-session^="session-"] .content-grid,
body[data-session^="session-"] .card,
body[data-session^="session-"] .rule-grid,
body[data-session^="session-"] .mistake-list,
body[data-session^="session-"] .worksheet-dialogue,
body[data-session^="session-"] .test-section,
body[data-session^="session-"] .test-item{
  min-width:0!important;
  max-width:100%!important;
}

@media (min-width:1181px){
  body[data-session^="session-"] .page-hero .container,
  body[data-session^="session-"] .section>.container,
  body[data-session^="session-"] .lp-shell,
  body[data-session^="session-"] .lp-stagebar,
  body[data-session^="session-"] .lp-subnav,
  body[data-session^="session-"] .slide.glass{
    width:min(1180px,calc(100% - 48px))!important;
    max-width:1180px!important;
    margin-inline:auto!important;
  }
}

@media (min-width:768px) and (max-width:1180px){
  body[data-session^="session-"] .page-hero .container,
  body[data-session^="session-"] .section>.container,
  body[data-session^="session-"] .lp-shell,
  body[data-session^="session-"] .lp-stagebar,
  body[data-session^="session-"] .lp-subnav,
  body[data-session^="session-"] .slide.glass{
    width:min(94vw,960px)!important;
    max-width:960px!important;
    margin-inline:auto!important;
  }
  body[data-session^="session-"] .content-grid.four{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body[data-session^="session-"] .lp-shell{position:relative!important;top:auto!important}
}

@media (max-width:767px){
  html,body{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }
  body[data-session^="session-"]{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  /* The actual reading viewport */
  body[data-session^="session-"] .container,
  body[data-session^="session-"] .page-hero .container,
  body[data-session^="session-"] .section>.container{
    width:calc(100% - 16px)!important;
    min-width:0!important;
    max-width:calc(100% - 16px)!important;
    margin-left:8px!important;
    margin-right:8px!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  body[data-session^="session-"] .session-layout,
  body[data-session^="session-"] .slides{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
  }

  /* Hero */
  body[data-session^="session-"] .page-hero{padding:10px 0 5px!important}
  body[data-session^="session-"] .crumbs{
    gap:4px!important;margin-bottom:6px!important;font-size:9px!important;line-height:1.4!important
  }
  body[data-session^="session-"] .page-title{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  body[data-session^="session-"] .page-title h1{
    font-size:clamp(23px,7.4vw,29px)!important;line-height:1.28!important;margin:6px 0!important
  }
  body[data-session^="session-"] .page-title .de-title{
    font-size:16px!important;line-height:1.35!important;margin-bottom:4px!important;
    overflow-wrap:anywhere!important;white-space:normal!important
  }
  body[data-session^="session-"] .page-title .lead{
    font-size:11px!important;line-height:1.65!important;margin-bottom:7px!important
  }
  body[data-session^="session-"] .page-title img{
    width:100%!important;height:auto!important;max-height:170px!important;
    aspect-ratio:16/8!important;object-fit:cover!important;margin-top:8px!important;border-radius:12px!important
  }

  /* Focus controller — compact */
  body[data-session^="session-"] .lp-shell{
    position:relative!important;top:auto!important;
    width:calc(100% - 16px)!important;max-width:calc(100% - 16px)!important;
    margin:6px 8px 3px!important;padding:8px!important;border-radius:13px!important
  }
  body[data-session^="session-"] .lp-head{display:block!important}
  body[data-session^="session-"] .lp-kicker{font-size:9px!important;padding:3px 6px!important}
  body[data-session^="session-"] .lp-title{font-size:16px!important;line-height:1.35!important;margin:4px 0 0!important}
  body[data-session^="session-"] .lp-sub{display:none!important}
  body[data-session^="session-"] .lp-view-toggle{
    width:100%!important;min-height:38px!important;margin-top:6px!important;
    padding:7px 9px!important;font-size:10px!important;border-radius:9px!important
  }
  body[data-session^="session-"] .lp-stepper{
    width:100%!important;max-width:100%!important;min-width:0!important;
    display:flex!important;gap:4px!important;margin-top:7px!important;padding:0 0 4px!important;
    overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain!important;scroll-snap-type:x proximity!important
  }
  body[data-session^="session-"] .lp-step{
    flex:0 0 78px!important;min-width:78px!important;max-width:78px!important;
    padding:5px 3px!important;font-size:8.5px!important;border-radius:8px!important;scroll-snap-align:start!important
  }
  body[data-session^="session-"] .lp-step .ico{font-size:13px!important;margin-bottom:0!important}
  body[data-session^="session-"] .lp-progress{margin-top:5px!important;height:3px!important}

  body[data-session^="session-"] .lp-stagebar{
    width:calc(100% - 16px)!important;max-width:calc(100% - 16px)!important;
    margin:3px 8px 0!important;padding:6px 7px!important;border-radius:10px!important;display:block!important
  }
  body[data-session^="session-"] .lp-stage-label{text-align:center!important}
  body[data-session^="session-"] .lp-stage-label strong{font-size:11px!important;line-height:1.4!important}
  body[data-session^="session-"] .lp-stage-label span{font-size:8px!important}
  body[data-session^="session-"] .lp-nav{justify-content:center!important;margin-top:4px!important}
  body[data-session^="session-"] .lp-nav button{
    min-width:78px!important;padding:6px 7px!important;font-size:9px!important;border-radius:8px!important
  }
  body[data-session^="session-"] .lp-subnav{
    width:calc(100% - 16px)!important;max-width:calc(100% - 16px)!important;
    margin:3px 8px 0!important;padding:5px!important;gap:4px!important;
    overflow-x:auto!important;overflow-y:hidden!important
  }
  body[data-session^="session-"] .lp-subnav button{
    flex:0 0 auto!important;font-size:8px!important;padding:5px 6px!important;white-space:nowrap!important
  }

  /* The slide itself */
  body[data-session^="session-"] .section{padding:5px 0 20px!important}
  body[data-session^="session-"] .slide.glass{
    box-sizing:border-box!important;
    width:100%!important;min-width:0!important;max-width:100%!important;
    margin:5px 0!important;padding:9px!important;border-radius:12px!important;
    overflow:hidden!important
  }
  body[data-session^="session-"] .slide-head{display:block!important;margin:4px 0 8px!important}
  body[data-session^="session-"] .slide-kicker{font-size:8px!important}
  body[data-session^="session-"] .slide-head h2{
    font-size:19px!important;line-height:1.4!important;margin-bottom:3px!important;overflow-wrap:anywhere!important
  }
  body[data-session^="session-"] .slide-head .de-title{
    font-size:12px!important;line-height:1.4!important;white-space:normal!important;overflow-wrap:anywhere!important
  }
  body[data-session^="session-"] .notice{
    width:100%!important;max-width:100%!important;padding:8px!important;
    font-size:11px!important;line-height:1.6!important;border-radius:9px!important;overflow-wrap:anywhere!important
  }
  body[data-session^="session-"] .lesson-block{
    box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:100%!important;
    margin-top:7px!important;padding:8px!important;border-radius:10px!important;overflow:hidden!important
  }
  body[data-session^="session-"] .lesson-block>h3{
    font-size:15px!important;line-height:1.4!important;margin-bottom:4px!important;overflow-wrap:anywhere!important
  }

  /* IMPORTANT: every card grid becomes exactly one column */
  body[data-session^="session-"] .content-grid,
  body[data-session^="session-"] .content-grid.three,
  body[data-session^="session-"] .content-grid.four,
  body[data-session^="session-"] .rule-grid,
  body[data-session^="session-"] .mistake-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;min-width:0!important;max-width:100%!important;
    gap:7px!important
  }
  body[data-session^="session-"] .card,
  body[data-session^="session-"] .rule-card{
    box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:100%!important;
    padding:9px!important;border-radius:10px!important;overflow:hidden!important
  }
  body[data-session^="session-"] .card h3{
    font-size:15px!important;line-height:1.35!important;margin-bottom:4px!important
  }
  body[data-session^="session-"] .card p,
  body[data-session^="session-"] .card li{
    font-size:11px!important;line-height:1.65!important
  }

  /* German/LTR text must wrap INSIDE the card, not enlarge the page */
  body[data-session^="session-"] .german,
  body[data-session^="session-"] .de,
  body[data-session^="session-"] .card .de,
  body[data-session^="session-"] .vocab-card .de,
  body[data-session^="session-"] .task-instruction,
  body[data-session^="session-"] .reading-text,
  body[data-session^="session-"] .reading-text p,
  body[data-session^="session-"] .test-prompt,
  body[data-session^="session-"] .dialogue-line .de{
    min-width:0!important;max-width:100%!important;
    white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;
    hyphens:auto!important
  }
  body[data-session^="session-"] .german,
  body[data-session^="session-"] .card .de,
  body[data-session^="session-"] .vocab-card .de{
    font-size:12px!important;line-height:1.55!important
  }

  /* Dialogue / compare / flex children */
  body[data-session^="session-"] .dialogue-line,
  body[data-session^="session-"] .compare{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;min-width:0!important;max-width:100%!important;
    gap:5px!important;padding:8px!important
  }
  body[data-session^="session-"] .dialogue-line>*,
  body[data-session^="session-"] .compare>*,
  body[data-session^="session-"] .clean-list li>*{
    min-width:0!important;max-width:100%!important
  }

  /* Source bar */
  body[data-session^="session-"] .worksheet-source{
    box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:100%!important;
    display:block!important;padding:7px!important;font-size:9px!important;line-height:1.55!important;
    overflow:hidden!important
  }
  body[data-session^="session-"] .worksheet-source>span{
    display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;
    white-space:normal!important;overflow-wrap:anywhere!important
  }
  body[data-session^="session-"] .worksheet-source .ltr-run{
    white-space:normal!important;overflow-wrap:anywhere!important
  }
  body[data-session^="session-"] .worksheet-source .track-pill{
    display:flex!important;width:100%!important;min-width:0!important;max-width:100%!important;
    justify-content:center!important;margin-top:5px!important;padding:6px 7px!important;
    font-size:9px!important;white-space:normal!important;overflow-wrap:anywhere!important;text-align:center!important
  }

  /* Tables: scroll ONLY inside their wrapper, never the whole document */
  body[data-session^="session-"] .work-table-wrap{
    box-sizing:border-box!important;
    display:block!important;
    width:100%!important;min-width:0!important;max-width:100%!important;
    overflow-x:auto!important;overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain!important;
    direction:ltr!important;
    border-radius:9px!important;
    contain:inline-size!important;
  }
  body[data-session^="session-"] .work-table{
    width:560px!important;min-width:560px!important;max-width:none!important;
    table-layout:auto!important
  }
  body[data-session^="session-"] .work-table th,
  body[data-session^="session-"] .work-table td{
    padding:6px 7px!important;font-size:9.5px!important;line-height:1.45!important;white-space:normal!important
  }

  body[data-session^="session-"] .worksheet-items{
    max-width:100%!important;padding-left:18px!important;margin-right:0!important;
    font-size:11px!important;line-height:1.65!important
  }
  body[data-session^="session-"] .reading-text{
    box-sizing:border-box!important;width:100%!important;max-width:100%!important;
    padding:8px!important;font-size:11px!important;line-height:1.65!important
  }
  body[data-session^="session-"] .test-section,
  body[data-session^="session-"] .test-item{
    box-sizing:border-box!important;width:100%!important;max-width:100%!important;padding:8px!important
  }
  body[data-session^="session-"] .test-input{
    min-width:0!important;max-width:100%!important;width:100%!important
  }

  body[data-session^="session-"] .session-nav{
    width:100%!important;max-width:100%!important;display:grid!important;
    grid-template-columns:1fr!important;gap:6px!important;margin:12px 0!important
  }
  body[data-session^="session-"] .session-nav .btn{
    width:100%!important;max-width:100%!important;min-height:38px!important
  }
}

@media (max-width:390px){
  body[data-session^="session-"] .page-title img{max-height:145px!important}
  body[data-session^="session-"] .lp-step{flex-basis:72px!important;min-width:72px!important;max-width:72px!important}
  body[data-session^="session-"] .slide.glass{padding:8px!important}
  body[data-session^="session-"] .lesson-block{padding:7px!important}
}
/* A1 bilingual table fix — desktop, tablet and phone. */
body[data-session^="session-"] .work-table.bilingual-table{
  table-layout:fixed!important;
  width:100%!important;
  min-width:720px!important;
}
body[data-session^="session-"] .work-table th .table-translation,
body[data-session^="session-"] .work-table td .table-translation{
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  align-items:start!important;
  gap:4px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  white-space:normal!important;
}
body[data-session^="session-"] .work-table .table-separator{
  display:none!important;
}
body[data-session^="session-"] .work-table .table-de,
body[data-session^="session-"] .work-table .table-ar{
  box-sizing:border-box!important;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
}
body[data-session^="session-"] .work-table .table-de{
  direction:ltr!important;
  text-align:left!important;
}
body[data-session^="session-"] .work-table .table-ar{
  direction:rtl!important;
  text-align:right!important;
  color:#8de7f5!important;
}
@media(max-width:767px){
  body[data-session^="session-"] .work-table.bilingual-table{
    width:720px!important;
    min-width:720px!important;
    max-width:none!important;
  }
  body[data-session^="session-"] .work-table .table-de,
  body[data-session^="session-"] .work-table .table-ar{
    font-size:10px!important;
    line-height:1.55!important;
  }
}