/* Shared learning experience: all routes, all three languages. */
/* Unit-first navigation: lesson ownership stays visible on every screen. */
.unit-index { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 32px; }
.unit-index a { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--ink); font-size: 13px; text-decoration: none; }
.unit-index a span { color: var(--accent); font-weight: 700; }
.unit-index a:hover, .unit-index a[aria-current] { background: var(--soft-accent); border-color: var(--accent); }
.course-units { display: grid; gap: 20px; }
.course-unit { border: 1px solid var(--line); border-radius: 22px; background: white; overflow: hidden; }
.course-unit summary { display: flex; align-items: center; gap: 20px; padding: 24px; cursor: pointer; list-style: none; }
.course-unit summary::-webkit-details-marker { display: none; }
.course-unit summary:hover { background: var(--paper); }
.course-unit summary:focus-visible, .unit-index a:focus-visible, .unit-lesson-link:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.course-unit[open] summary { background: var(--soft-accent); border-bottom: 1px solid var(--line); }
.unit-number { display: grid; place-items: center; flex: 0 0 58px; height: 58px; border-radius: 16px; background: var(--ink); color: var(--brand-mint); font-size: 24px; font-weight: 700; }
.unit-heading { flex: 1; min-width: 0; }
.unit-heading h2 { font-size: 23px; margin: 3px 0; line-height: 1.5; }
.unit-goal { color: var(--muted); font-size: 14px; line-height: 1.7; }
.unit-count { color: var(--progress); font-size: 13px; white-space: nowrap; }
.unit-chevron { font-size: 24px; transition: transform .15s; }
.course-unit[open] .unit-chevron { transform: rotate(180deg); }
.unit-interior { display: grid; grid-template-columns: 270px minmax(0,1fr); gap: 28px; padding: 26px; align-items: start; }
.unit-film { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--paper); }
.unit-film img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.unit-film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--ink); }
.unit-film > div { padding: 18px; }
.unit-film h3 { font-size: 18px; line-height: 1.6; margin: 7px 0; }
.unit-film p { font-size: 13px; line-height: 1.8; color: var(--muted); margin: 0; }
.lesson-film { margin-top: 20px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; }
.lesson-film > div { padding: 18px 20px 10px; }
.lesson-film h3 { font-size: 18px; line-height: 1.6; margin: 7px 0; }
.lesson-film p { font-size: 13px; line-height: 1.8; color: var(--muted); margin: 0; }
.lesson-film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--ink); }
.unit-lessons { min-width: 0; }
.unit-lessons-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.unit-lessons-heading h3 { font-size: 17px; margin: 0; }
.unit-lessons-heading a { font-size: 12px; }
.unit-lesson-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.unit-lesson-link { display: flex; align-items: center; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-decoration: none; transition: border-color .15s, background .15s; }
.unit-lesson-link:hover { border-color: var(--accent); background: var(--soft-accent); }
.lesson-order { display: grid; place-items: center; background: var(--soft-accent); color: var(--accent); border-radius: 12px; width: 42px; height: 42px; flex: 0 0 42px; font-weight: 700; font-size: 18px; }
.unit-lesson-copy { flex: 1; min-width: 0; }
.unit-lesson-copy h3 { font-size: 19px; line-height: 1.5; margin: 0 0 5px; }
.unit-lesson-copy p { font-size: 13px; color: var(--muted); line-height: 1.7; margin: 0 0 10px; }
.lesson-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11px; color: var(--muted); }
.lesson-meta .audio-available { color: var(--progress); font-weight: 700; }
.lesson-open svg { width: 20px; height: 20px; }
.unit-preparing { padding: 30px; border: 1px dashed var(--line); border-radius: 14px; text-align: center; color: var(--muted); }
.unit-preparing > svg { width: 32px; height: 32px; }
.unit-preparing h3 { font-size: 18px; }
.unit-preparing p { font-size: 14px; }
@media (max-width: 900px) { .unit-interior { grid-template-columns: 1fr; } .unit-film { display: grid; grid-template-columns: 200px 1fr; align-items: center; } }
@media (max-width: 600px) {
  .course-unit summary { flex-wrap: wrap; gap: 12px; padding: 18px; }
  .unit-number { flex-basis: 44px; height: 44px; font-size: 20px; }
  .unit-heading h2 { font-size: 19px; }
  .unit-goal { font-size: 12px; }
  .unit-count { margin-inline-start: 56px; flex: 1; }
  .unit-interior { padding: 14px; gap: 20px; }
  .unit-film { grid-template-columns: 1fr; }
  .unit-film img { max-height: 185px; }
  .unit-film > div { padding: 14px; }
  .unit-lesson-link { padding: 14px 10px; gap: 10px; align-items: start; }
  .lesson-order { width: 32px; height: 32px; flex-basis: 32px; font-size: 15px; }
  .unit-lesson-copy h3 { font-size: 17px; }
  .lesson-open { display: none; }
  .unit-index a { font-size: 12px; }
}
/* Color tokens live in one place only: styles.css :root. No overrides here. */
body { background: var(--paper); }
.main { max-width: 1320px; padding: 40px 36px 64px; width: 100%; }
.main:focus { outline: none; }
.lesson-ready-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 24px 0 34px; }
.lesson-ready-grid .unit-card { margin: 0; min-width: 0; }
.grammar textarea, .micro-activity textarea, .task-wrap textarea { width: 100%; min-height: 120px; margin: 12px 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; font: inherit; resize: vertical; display: block; }
.micro-activity .phrase-bank { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.micro-activity .phrase-bank li { padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; }
@media (max-width: 720px) { .lesson-ready-grid { grid-template-columns: 1fr; } }
.site-header-inner { max-width: 1248px; }
.site-header .brand img { width: 280px; }
.brand-caption { font-size: 14px; }
.site-nav { background: white; gap: 12px; padding-block: 9px; }
.site-nav a { min-width: 112px; border-radius: 12px; }
.site-nav a.active { box-shadow: inset 0 -3px 0 var(--accent); }
.page-intro { margin-bottom: 30px; align-items: center; }
.page-intro h1 { font-size: clamp(28px, 3.1vw, 42px); line-height: 1.4; letter-spacing: -.025em; }
.page-intro p { font-size: 16px; max-width: 65ch; }
.eyebrow { color: var(--accent); font-size: 13px; }
.learning-pulse { display: flex; align-items: center; gap: 28px; padding: 18px 24px; margin-bottom: 34px; background: white; border: 1px solid var(--line); border-radius: 18px; }
.pulse-intro { display: flex; align-items: center; gap: 12px; margin-inline-end: auto; font-weight: 700; font-size: 15px; }
.pulse-intro svg { width: 28px; height: 28px; color: var(--accent); }
.learning-pulse > a { display: flex; flex-direction: column; gap: 0; padding-inline-start: 28px; border-inline-start: 1px solid var(--line); }
.learning-pulse strong { font-family: Manrope, sans-serif; font-size: 23px; line-height: 1.4; }
.learning-pulse a span { color: var(--muted); font-size: 12px; }
/* Light, respectful hero: a nursing photo in a warm ivory frame, navy text, one copper action —
   not a dark block dominating the page. */
.hero { background: var(--paper); border: 1px solid var(--line); border-radius: 28px; grid-template-columns: 1fr 1fr; min-height: 440px; box-shadow: 0 20px 48px -32px #12233518; }
.hero-copy { padding: 42px; color: var(--ink); }
.hero-copy > .tag { background: var(--soft-accent); color: var(--accent); border-color: var(--soft-accent); }
.hero h2 { color: var(--ink); font-size: clamp(32px, 3.4vw, 48px); line-height: 1.5; letter-spacing: -.025em; }
.hero-copy > p { color: var(--muted); font-size: 17px; line-height: 1.9; }
.hero-actions small { color: var(--muted); }
.hero .primary:hover { background: var(--accent-dark); }
.hero-media > img { height: 100%; object-fit: cover; }
.hero-media { border-inline-start: 1px solid var(--line); }
.hero .photo-label { background: #ffffffed; color: var(--ink); font-size: 12px; }
.dialogue-peek { border: 1px solid var(--line); box-shadow: 0 8px 30px #12233518; }
.dialogue-peek .line small { font-size: 13px; }
.section-title { margin-block: 36px 20px; }
.section-title h2 { font-size: 24px; }
.method-grid { gap: 20px; }
.method-card { padding: 27px; border-radius: 20px; background: white; box-shadow: none; }
.method-card h3 { font-size: 19px; }
.method-card p { line-height: 1.8; font-size: 15px; }
.method-icon { width: 50px; height: 50px; border-radius: 16px; }
.unit-card { border-radius: 20px; padding: 24px; transition: border-color .18s, box-shadow .18s; }
.unit-card:hover { border-color: var(--accent); box-shadow: 0 8px 24px #12233510; }
.daily-card { background: var(--mint); border: 1px solid var(--brand-mint); border-radius: 20px; }
.roadmap-head { background: var(--ink); color: white; border-radius: 24px; }
.roadmap-head p { color: #d0e2e5; }
.roadmap-head .big-letter { color: var(--brand-mint); }
.module-grid { gap: 22px; }
.module { border-radius: 20px; padding: 28px; background: white; border: 1px solid var(--line); }
.module:first-child { background: var(--progress-soft); border: 2px solid var(--brand-turquoise); }
.module-number { font-size: 26px; color: var(--accent); }
.module h3 { font-size: 22px; margin-top: 20px; }
.module p { font-size: 15px; line-height: 1.9; }
.session-overview { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; font-size: 14px; color: var(--muted); }
.session-overview strong { font-family: Manrope, sans-serif; direction: ltr; unicode-bidi: isolate; white-space: nowrap; color: var(--progress); }
.session-overview progress { flex: 1; height: 8px; max-width: 280px; border: 0; border-radius: 20px; overflow: hidden; background: var(--progress-soft); accent-color: var(--progress); }
.session-overview progress::-webkit-progress-bar { background: var(--progress-soft); }
.session-overview progress::-webkit-progress-value { background: var(--progress); border-radius: 20px; }
.learning-header h1 { font-size: 30px; }
.lesson-steps { padding: 7px; border: 1px solid var(--line); background: var(--mint); border-radius: 18px; gap: 6px; margin-bottom: 26px; }
.lesson-steps button { min-height: 58px; border-radius: 12px; font-size: 15px; gap: 10px; }
.lesson-steps button.active { color: var(--progress); box-shadow: 0 3px 10px #143b3110; }
.lesson-steps .step-n { width: 28px; height: 28px; font-size: 12px; }
.lesson-steps .active .step-n { background: var(--progress); border-color: var(--progress); }
.lesson-sections { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -12px 0 24px; }
.lesson-sections > span { margin-inline-end: 4px; color: var(--muted); font-size: 14px; }
.lesson-sections button { min-height: 44px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; }
.lesson-sections button:hover { border-color: var(--accent); background: var(--soft-accent); }
.lesson-sections button.active { border-color: var(--ink); background: var(--ink); color: #fff; }
.lesson-content { border-radius: 24px; padding: 36px; min-height: 360px; box-shadow: 0 8px 35px -24px #12233522; }
.lesson-content:has(.listening-studio) { padding: 0; overflow: hidden; }
.lesson-content-compact { min-height: 0; }
.listening-studio { display: grid; grid-template-columns: .92fr 1.08fr; }
.scene-context { background: var(--paper); min-width: 0; }
.context-photo { position: relative; }
.context-photo img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.context-badge { position: absolute; bottom: 16px; inset-inline-start: 16px; background: #ffffffed; padding: 6px 14px; border-radius: 999px; font-size: 12px; color: var(--ink); }
.context-photo video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ink); }
.context-copy { padding: 24px 28px; }
.context-copy h3 { font-size: 22px; margin: 8px 0 12px; }
.context-copy p { font-size: 15px; color: var(--muted); }
.context-photo-pending { display: flex; align-items: center; justify-content: center; min-height: 220px; padding: 24px; text-align: center; background: var(--mint); }
.context-photo-pending p { color: var(--muted); font-size: 14px; margin: 0; }
.compare-card { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft-accent); }
.compare-row { display: flex; align-items: center; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.compare-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.compare-label { font-size: 12px; color: var(--muted); }
.compare-value { font-size: 16px; font-weight: 700; color: var(--accent); }
.compare-arrow { color: var(--muted); font-style: normal; }
@media (max-width: 600px) { .compare-row { gap: 10px 18px; } }
.context-people { display: flex; gap: 14px; align-items: center; margin-top: 20px; }
.context-people span { font-size: 13px; font-weight: 700; background: white; padding: 4px 14px; border: 1px solid var(--line); border-radius: 100px; }
.context-people i { color: var(--accent); font-style: normal; }
.closing-scene { margin-top: 22px; border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.closing-scene summary { padding: 13px 16px; color: var(--ink); font-weight: 700; cursor: pointer; }
.closing-scene video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--ink); }
.listening-activity { padding: 36px; min-width: 0; }
.listening-activity h2 { font-size: 26px; line-height: 1.6; margin-bottom: 24px; }
.listening-activity > .primary { width: 100%; min-height: 64px; margin-bottom: 18px; }
.listening-activity > p { font-size: 15px; }
.listening-activity .task-actions { display: grid; grid-template-columns: 1fr; justify-content: stretch; align-items: stretch; gap: 12px; margin-block: 22px; }
.listening-activity .task-actions button { width: 100%; text-align: start; justify-content: flex-start; padding: 16px 20px; border-radius: 14px; }
.listening-activity [role="status"] { background: var(--mint); padding: 16px; border-radius: 12px; }
.listening-activity .inline-note, .listening-activity .notice { font-size: 12px; line-height: 1.8; margin-top: 16px; }
.listening-activity .notice { padding: 12px 16px; }
.repeat-control { margin-block: 16px; }
.repeat-control .task-actions { flex-wrap: wrap; gap: 8px; margin-block: 0 10px; }
.repeat-control .task-actions button { min-height: 44px; min-width: 44px; }
.micro-activity { max-width: 650px; align-items: flex-start; min-height: 280px; padding: 24px; background: var(--paper); border-radius: 20px; }
.micro-activity h2 { font-size: 32px; }
.micro-activity .sound { width: 58px; height: 58px; border-radius: 18px; }

/* Teacher-audio and translation aids stay in the secondary/progress (teal) family — they mark
   audio availability and translation help, not primary actions. */
.teacher-audio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 2.35rem;
  margin: .2rem .35rem .2rem 0;
  padding: .35rem .7rem;
  border: 1px solid var(--brand-turquoise);
  border-radius: 999px;
  background: var(--progress-soft);
  color: var(--progress);
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
}
.teacher-audio svg { width: 1.1rem; height: 1.1rem; }
.teacher-audio:hover, .teacher-audio:focus-visible { background: var(--mint); outline: 2px solid var(--progress); outline-offset: 2px; }
.choice-with-audio { display: flex; align-items: center; gap: .5rem; }
.choice-with-audio .choice { flex: 1; }

.translation-picker-label { padding-inline: .55rem; color: var(--ink); font-size: .8rem; font-weight: 700; white-space: nowrap; }
.course-language-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem; margin: 0 0 1.25rem; padding: .65rem .9rem; border: 1px solid var(--brand-mint); border-radius: 14px; background: var(--progress-soft); color: var(--ink); font-size: .88rem; }
.course-language-note [lang="ar"] { text-align: right; }
.translation-help { display: block; margin: .35rem 0 .8rem; padding: .55rem .75rem; border-inline-start: 3px solid var(--brand-turquoise); border-radius: 5px; background: var(--progress-soft); color: var(--ink); font-size: .9em; line-height: 1.7; }
.translation-help[lang="ar"] { font-family: inherit; text-align: right; }
@media (max-width: 640px) { .translation-picker-label { display: none; } }
.micro-activity p { font-size: 19px; }
.lesson-bottom { margin-top: 22px; padding: 16px 0; }
.choice { border-radius: 14px; padding: 18px 22px; min-height: 62px; }
.stat { padding: 30px; border-radius: 20px; background: white; border-top: 4px solid var(--brand-mint); }
.stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat, .module, .unit-info { min-width: 0; overflow-wrap: anywhere; }
.stat strong { font-size: 44px; color: var(--progress); }
.review-item { border-radius: 18px; padding: 24px; }
.site-footer { max-width: 1248px; background: white; margin-top: 24px; box-shadow: none; }
.site-footer p { line-height: 1.9; }
button:disabled { cursor: not-allowed; opacity: .55; }
@media (max-width: 1000px) {
  .hero-copy { padding: 30px; }
  .learning-pulse { gap: 16px; }
  .learning-pulse > a { padding-inline-start: 16px; }
  .listening-activity { padding: 26px; }
  .context-copy { padding: 24px; }
}
@media (max-width: 760px) {
  html { scroll-padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  .main { padding: 26px 20px 44px; }
  .stat-grid { grid-template-columns: 1fr; }
  .stat { display: flex; align-items: center; gap: 22px; padding: 20px 24px; }
  .learning-pulse { flex-wrap: wrap; gap: 14px; padding: 18px; margin-bottom: 24px; }
  .pulse-intro { width: 100%; margin-bottom: 4px; }
  .learning-pulse > a { flex: 1; padding-inline-start: 12px; }
  .learning-pulse strong { font-size: 21px; }
  .learning-pulse a span { font-size: 11px; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding: 28px; }
  .hero h2 { font-size: 36px; }
  .hero-media { height: 290px; }
  .hero-media > img { width: 100%; }
  .listening-studio { grid-template-columns: 1fr; }
  .context-photo img { max-height: 260px; aspect-ratio: 16 / 9; }
  .context-copy { padding: 20px 24px; }
  .context-copy h3 { font-size: 20px; }
  .context-copy > p { display: none; }
  .context-people { display: none; }
  .listening-activity { padding: 26px 24px; }
  .lesson-content { padding: 24px; }
  .lesson-steps button { flex-direction: column; font-size: 12px; padding: 8px 4px; gap: 5px; }
  .lesson-steps { gap: 2px; padding: 5px; }
  .lesson-sections { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .lesson-sections > span { display: none; }
  .lesson-sections button { min-width: 0; padding: 8px 4px; border-radius: 12px; font-size: 12px; white-space: normal; scroll-margin-block-end: calc(104px + env(safe-area-inset-bottom)); }
  .method-card { padding: 24px; }
  .learning-header h1 { font-size: 25px; }
  .session-overview { font-size: 12px; gap: 10px; }
  .micro-activity { padding: 20px; }
  .site-header .brand img { width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .unit-card, .primary { transition: none; }
}

/* Readability pass: German and Arabic learning text must remain comfortable at a glance. */
body { font-size: 16px; }
[lang="ar"], [dir="rtl"] { font-family: "IBM Plex Sans Arabic", Manrope, Arial, sans-serif; line-height: 1.9; }
.unit-goal { font-size: 15px; }
.unit-count { font-size: 14px; }
.unit-lesson-copy p { font-size: 15px; line-height: 1.85; }
.lesson-meta { font-size: 13px; }
.unit-film p, .lesson-film p { font-size: 15px; line-height: 1.9; }
.unit-lessons-heading a { font-size: 14px; }
.listening-activity > p { font-size: 17px; line-height: 1.9; }
.question-prompt { margin: 18px 0 10px; padding: 12px 14px; border-inline-start: 4px solid var(--accent); border-radius: 10px; background: var(--soft-accent); color: var(--ink); font-size: 17px !important; line-height: 1.8 !important; }
.listening-activity .inline-note, .listening-activity .notice { font-size: 14px; line-height: 1.9; }
.translation-help { font-size: 1rem; line-height: 1.9; }
.context-badge, .context-people span { font-size: 14px; }
.site-footer p, .site-footer a { font-size: 15px; }
@media (max-width: 600px) {
  .unit-goal { font-size: 14px; }
  .unit-lesson-copy p { font-size: 14px; }
  .lesson-meta { font-size: 12px; }
  .listening-activity > p { font-size: 16px; }
}

/* One honest route through the language levels and the separate exam course. */
.pathway { margin: 40px 0 36px; }
.pathway-heading { max-width: 750px; margin-bottom: 22px; }
.pathway-heading h2 { margin: 4px 0 8px; font-size: clamp(24px, 2.5vw, 32px); line-height: 1.35; }
.pathway-heading p { margin: 0; color: var(--muted); line-height: 1.8; }
.pathway-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; padding: 0; margin: 0; }
.pathway-stage { min-width: 0; }
.pathway-stage a { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto 1fr auto; gap: 7px 12px; min-height: 260px; padding: 23px; color: var(--ink); text-decoration: none; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; transition: border-color .16s, box-shadow .16s; }
.pathway-stage a:hover { border-color: var(--accent); box-shadow: 0 9px 25px #12233512; }
.pathway-stage a:focus-visible, .pathway-destination a:focus-visible, .level-preparing a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.pathway-stage.is-available a { background: var(--progress-soft); border-color: var(--brand-turquoise); }
.pathway-index { align-self: center; color: var(--muted); font-size: 12px; font-weight: 700; }
.pathway-level { grid-column: 2; justify-self: end; align-self: center; font-size: 28px; font-weight: 800; letter-spacing: -.04em; color: var(--accent); }
.pathway-status { grid-column: 1 / -1; color: var(--muted); font-size: 12px; line-height: 1.5; }
.pathway-stage strong { grid-column: 1 / -1; font-size: 19px; line-height: 1.45; }
.pathway-stage > a > .translation-help { grid-column: 1 / -1; margin-top: -4px; }
.pathway-summary { grid-column: 1 / -1; color: var(--muted); font-size: 14px; line-height: 1.8; }
.pathway-summary .translation-help { display: block; margin-top: 5px; }
.pathway-action { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--accent); font-size: 13px; font-weight: 750; }
.pathway-action svg { width: 17px; height: 17px; }
.pathway-destination { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; margin-top: 18px; padding: 22px 24px; background: #fff; border: 1px solid var(--line); border-inline-start: 4px solid var(--accent); border-radius: 18px; }
.pathway-destination-mark { display: grid; place-items: center; width: 48px; height: 48px; background: var(--soft-accent); border-radius: 14px; color: var(--accent); }
.pathway-destination-mark svg { width: 26px; height: 26px; }
.pathway-destination h3 { margin: 3px 0; font-size: 19px; line-height: 1.5; }
.pathway-destination p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.pathway-destination .translation-help { display: block; margin-top: 5px; }
.pathway-destination .secondary { white-space: nowrap; }
.pathway-caveat { margin: 13px 4px 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.level-preparing { max-width: 850px; margin: 28px 0 46px; padding: 32px; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; }
.level-preparing h2 { margin: 14px 0 8px; font-size: 23px; }
.level-preparing p { max-width: 70ch; color: var(--muted); line-height: 1.9; }
.unit-interior.no-film { grid-template-columns: 1fr; }
@media (max-width: 960px) {
  .pathway-stages { gap: 10px; }
  .pathway-stage a { min-height: 285px; padding: 18px; }
  .pathway-destination { grid-template-columns: auto minmax(0, 1fr); }
  .pathway-destination .secondary { grid-column: 2; justify-self: start; }
}
@media (max-width: 700px) {
  .pathway-stages { grid-template-columns: 1fr; }
  .pathway-stage a { min-height: 0; }
  .pathway-destination { grid-template-columns: 1fr; padding: 20px; }
  .pathway-destination .secondary { grid-column: 1; white-space: normal; }
  .level-preparing { padding: 22px; }
}

/* ===========================================================================
   Fixed app shell (projekt shell spec §1-§5, §7; critique ux-0/ux-1/ux-2/ux-5b,
   eng-7/eng-12/eng-13/eng-18). Header row, content row, footer row — the page itself
   never scrolls up or down; only [data-shell-panel] inside main#main scrolls.
   Every rule is scoped to html.app-shell so a page without that class (and the
   released state below) keeps normal document flow.
   =========================================================================== */
:root { --shell-footer-h: 52px; --shell-gutter: clamp(14px, 2.2vw, 30px); }
html.app-shell, html.app-shell body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.app-shell #app {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
/* Content row: back/title bar, page bar (page tabs or lesson chrome), the single scroll
   panel, then an optional non-scrolling foot row. main#main stays the container and is
   never the scroller, so #main-scoped media/teacher-button selectors keep working. */
html.app-shell #main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--shell-gutter);
  overflow: hidden;
}
html.app-shell #main > *:not([data-shell-panel]) { flex: 0 0 auto; min-height: 0; }
html.app-shell [data-shell-panel] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* A learner must always see that there is more below: keep the scrollbar track
     reserved, never scrollbar-width:none. */
  scrollbar-gutter: stable;
  --panel-pad-b: 14px;
  padding: 12px 0 var(--panel-pad-b);
  scroll-padding-bottom: 84px;
  outline: none;
}
html.app-shell [data-shell-panel]:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
/* Bottom fade cue while more content is below. A sticky ::after is a child box of the
   scroll panel, so it hugs the bottom of the scrollport at every scroll offset, and the
   negative margin keeps it out of the scroll height. */
html.app-shell [data-shell-panel][data-shell-more]::after {
  content: "";
  display: block;
  position: sticky;
  bottom: 0;
  /* A short, light cue: it hints at more content without washing out a control under it. */
  height: 18px;
  margin-bottom: -18px;
  background: linear-gradient(#fbfaf700, #fbfaf7d9);
  box-shadow: inset 0 -2px 0 #1223351f;
  pointer-events: none;
  z-index: 3;
}
/* The current item's forward-control row stays reachable at the panel bottom. */
/* Sticky offsets are measured from the scroller's padding edge, so bottom:0 would leave the
   panel's bottom padding as a strip of content showing under the row; the negative offset
   puts the row flush on the panel's bottom edge. */
html.app-shell [data-shell-panel] .lesson-content > .task-actions,
html.app-shell [data-shell-panel] .task-wrap > .task-actions {
  position: sticky;
  bottom: calc(-1 * var(--panel-pad-b));
  z-index: 2;
  margin-bottom: 0;
  padding: 10px 0;
  background: #fff;
}
html.app-shell [data-shell-panel] .task-actions.is-stuck {
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 18px -14px #12233540;
}

/* ---- Header row (§3) ---------------------------------------------------- */
html.app-shell .site-header { display: block; background: #fff; border-bottom: 1px solid var(--line); }
html.app-shell .site-header-inner {
  width: 100%;
  max-width: 1320px;
  min-height: 0;
  margin: 0 auto;
  padding: 2px var(--shell-gutter);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
}
html.app-shell .site-header .brand { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 10px; min-height: 44px; }
html.app-shell .site-header .brand img { width: 174px; height: 44px; }
html.app-shell .brand-caption { font-size: 13px; white-space: nowrap; }
html.app-shell .site-header .course-language-note {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.5;
  gap: .4rem;
  overflow: hidden;
}
/* The note is UI chrome, so it may wrap, but it is never truncated (spec §0). */
html.app-shell .site-header .course-language-note > * { min-width: 0; }
/* Overlay scrollbars are invisible on phones, which is exactly where a fixed-looking
   shell must still show that there is more to read: give the panel a classic track. */
html.app-shell [data-shell-panel]::-webkit-scrollbar { width: 10px; height: 10px; }
html.app-shell [data-shell-panel]::-webkit-scrollbar-track { background: transparent; }
html.app-shell [data-shell-panel]::-webkit-scrollbar-thumb { background: #c3d3d6; border: 2px solid var(--paper); border-radius: 10px; }
html.app-shell [data-shell-panel]::-webkit-scrollbar-thumb:hover { background: #9fb6ba; }
html.app-shell .header-tools { margin-inline-start: 0; gap: 10px; flex: 0 0 auto; flex-wrap: nowrap; }
html.app-shell .header-languages { padding: 2px; gap: 2px; }
html.app-shell .header-languages button { min-width: 44px; min-height: 44px; padding: 4px 8px; }
html.app-shell .header-account button { min-height: 44px; padding: 6px 14px; font-size: 13px; }
html.app-shell .site-nav {
  min-height: 0;
  padding: 1px var(--shell-gutter);
  gap: 4px;
  border-top: 2px solid var(--accent);
  border-bottom: 0;
}
html.app-shell .site-nav a { min-height: 44px; padding: 4px 14px; }

/* ---- Footer row (§4) --------------------------------------------------- */
html.app-shell .site-footer {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  overflow: visible;
}
html.app-shell .site-footer::before { content: none; }
html.app-shell .footer-line {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 18px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 5px var(--shell-gutter);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
/* WCAG 2.5.8: inline footer text links keep a ≥24px target with ≥8px spacing. */
html.app-shell .footer-item { display: inline-flex; align-items: center; min-height: 26px; }
html.app-shell .footer-item a { display: inline-flex; align-items: center; min-height: 26px; padding: 1px 4px; color: var(--ink); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
html.app-shell .footer-item a:hover { color: var(--accent); }
html.app-shell .footer-local { margin: 0 !important; color: var(--muted); }
html.app-shell .side-nav { display: none; }

/* "Übersetzung zeigen" icon (two speech bubbles with A / Ä), used by the phone dialogue lines. */
html.app-shell { --icon-translate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h8M8 3v2M10 5c-1 4-3 7-6 8M6 9c1 2 3 3.5 5 4'/%3E%3Cpath d='M13 21l4-9 4 9M14.5 18h5'/%3E%3C/svg%3E"); }

/* ---- Back/title row (§5) ---------------------------------------------- */
/* A little air under the header border before the page's back/title row. */
html.app-shell .shell-backbar { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 0 3px; }
html.app-shell .shell-title { font-size: clamp(17px, 1.6vw, 22px); line-height: 1.35; margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* Forward navigation focuses the new view's title (tabindex=-1, §5); it is not a control. */
html.app-shell .shell-title:focus, html.app-shell .learning-header h1:focus { outline: none; }
html.app-shell .shell-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 44px;
  max-width: 46%;
  padding: 6px 10px 6px 4px;
  /* A quiet text control (arrow + destination), so it cannot be mistaken for the sand
     "Einheit N · Lektion N" tag or for a step chip next to it. */
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}
html[dir="rtl"] .shell-back, [dir="rtl"] .shell-back { padding: 6px 4px 6px 10px; }
html.app-shell .shell-back:hover { background: var(--soft-accent); color: var(--accent); }
html.app-shell .shell-back:hover .shell-back-label { text-decoration: underline; text-underline-offset: 3px; }
/* The destination name is never cut (§5): it wraps to a second line inside the row. */
html.app-shell .shell-back > span { min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.15; text-align: start; }
html.app-shell .shell-back-arrow { width: 18px; height: 18px; flex: none; }
[dir="rtl"] .shell-back-arrow, html[dir="rtl"] .shell-back-arrow { transform: scaleX(-1); }

/* ---- Lesson chrome compaction (§6 "V2 lesson chrome", ux-1) ------------- */
html.app-shell .learning-header {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 5px 0 4px;
}
html.app-shell .learning-title { min-width: 0; flex: 1 1 auto; }
html.app-shell .learning-header h1 { font-size: clamp(16px, 1.5vw, 21px); line-height: 1.3; margin: 0; overflow-wrap: anywhere; }
/* The lesson title's translation (§0: translations stay visible): one compact muted line
   under the h1, without the boxed help style, so it does not read as a second control. */
html.app-shell .learning-header .translation-help { margin: 1px 0 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--muted); font-size: 13px; line-height: 1.35; }
html.app-shell .learning-header .lesson-tag { flex: none; white-space: nowrap; }
html.app-shell .lab-entry {
  flex: none;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}
html.app-shell .lab-entry-text { white-space: nowrap; }
html.app-shell .lesson-steps { margin: 0; padding: 2px; gap: 4px; border-radius: 12px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
/* flex: 1 0 auto — the five steps fill the row when they fit and keep their full labels
   (never truncated, never stacked) when they do not; the row then scrolls sideways and
   render() scrolls the active step back into view. */
html.app-shell .lesson-steps button { flex: 1 0 auto; min-width: 0; min-height: 44px; padding: 4px 8px; font-size: 13px; gap: 7px; flex-direction: row; white-space: nowrap; border-radius: 9px; }
html.app-shell .lesson-steps .step-n { width: 22px; height: 22px; font-size: 11px; }
html.app-shell .lesson-sections { margin: 4px 0 0; gap: 6px; }
html.app-shell .lesson-sections > span { font-size: 13px; }
html.app-shell .lesson-sections button { min-height: 44px; padding: 5px 13px; font-size: 13px; }
html.app-shell .lesson-bottom { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; padding: 2px 0 4px; }
html.app-shell .lesson-bottom .primary, html.app-shell .lesson-bottom .secondary { min-height: 44px; padding: 7px 16px; white-space: nowrap; }
html.app-shell .lesson-bottom > .text-button { display: inline-flex; align-items: center; min-height: 44px; margin-inline-start: auto; color: var(--muted); font-size: 14px; font-weight: 600; }
/* Panel-side compaction only (never a markup or gate change): the lesson panel may still
   scroll (§2c), but it should not be forced to by decorative minimums. */
html.app-shell [data-shell-panel] .lesson-content { min-height: 0; margin: 0; }
html.app-shell [data-shell-panel] .micro-activity { min-height: 0; margin: 0 auto; }
html.app-shell [data-shell-panel] .lesson-content video,
html.app-shell [data-shell-panel] .context-photo img,
html.app-shell [data-shell-panel] .context-photo video { max-height: min(42vh, 330px); object-fit: cover; }
html.app-shell [data-shell-panel] .unit-film img, html.app-shell [data-shell-panel] .unit-film video { max-height: min(34vh, 260px); object-fit: cover; }
/* The lesson's Video section: the film always fits its card (never wider than the panel)
   and is letterboxed, not cropped, when its height is capped. */
html.app-shell [data-shell-panel] .lesson-content > video { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; background: var(--ink); border-radius: 12px; }
/* Step-3 evidence/variant toggles: one compact segmented row at the top of the panel. */
html.app-shell [data-shell-panel] > .lab-tabs { display: flex; flex-wrap: nowrap; gap: 6px; margin: 0 0 8px; overflow-x: auto; scrollbar-width: thin; }
html.app-shell [data-shell-panel] > .lab-tabs > button { flex: 1 0 auto; min-height: 44px; min-width: 44px; padding: 6px 14px; border-radius: 12px; font-size: 14px; white-space: nowrap; }
/* The sticky forward row is only as tall as its buttons; while it is stuck the panel's
   bottom fade gives way to the row's own top border and shadow (no fade over the button). */
html.app-shell [data-shell-panel] .lesson-content > .task-actions,
html.app-shell [data-shell-panel] .task-wrap > .task-actions { padding: 6px 0; }
/* While stuck, the row is a clear band (top border + shadow) that content slides under. */
html.app-shell [data-shell-panel] .task-actions.is-stuck { border-top: 1px solid var(--line); box-shadow: 0 -8px 14px -8px #12233559; }
html.app-shell [data-shell-panel][data-shell-more]:has(.is-stuck)::after { display: none; }
/* Section chips: one active style; the hover tint only on devices that really hover, so a
   tapped chip whose section is still gated does not look half-selected. */
html.app-shell .lesson-sections button:hover { border-color: var(--line); background: #fff; }
@media (hover: hover) {
  html.app-shell .lesson-sections button:not(.active):hover { border-color: var(--accent); background: var(--soft-accent); }
}
html.app-shell .lesson-sections button.active, html.app-shell .lesson-sections button.active:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
html.app-shell [data-shell-panel] .hero { min-height: 0; }
html.app-shell [data-shell-panel] .hero-media { max-height: 34vh; }
html.app-shell [data-shell-panel] .lab-tabs { margin: 0 0 12px; }
html.app-shell [data-shell-panel] > .page-intro:first-child { margin-top: 4px; }
html.app-shell .kontakt-page { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 32px; align-items: start; }
html.app-shell .kontakt-page .footer-logo { width: 210px; }
html.app-shell .kontakt-page h2 { margin: 0 0 10px; }
html.app-shell .kontakt-page p { margin: 0 0 10px; line-height: 1.7; }
html.app-shell .kontakt-page .footer-story p { margin-top: 12px; font-size: 16px; max-width: 46ch; color: var(--ink); }
/* The old footer was dark; on the Kontakt page the moved text uses the page text tokens. */
html.app-shell .kontakt-page p { color: var(--muted); }
html.app-shell .kontakt-page h2 { color: var(--accent); }
html.app-shell .kontakt-page a { color: var(--ink); }
html.app-shell .kontakt-page .footer-contact a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
/* The learning links read as links: accent colour, underline and a chevron, one ≥44px row each. */
html.app-shell .kontakt-page .footer-nav { align-items: stretch; gap: 0; }
html.app-shell .kontakt-page .footer-nav a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; max-width: 32rem; padding: 0 4px; border-bottom: 1px solid var(--line); color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
html.app-shell .kontakt-page .footer-nav a::after { content: ""; flex: none; width: 8px; height: 8px; margin-inline-end: 4px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
html[dir="rtl"] .kontakt-page .footer-nav a::after { transform: rotate(-135deg); }
html.app-shell .kontakt-page .footer-nav { margin: 0; padding-top: 0; border-top: 0; }
html.app-shell .kontakt-page .footer-nav a:hover { background: var(--soft-accent); }
html.app-shell .kontakt-page .footer-nav .footer-local { margin-top: 10px !important; }
html.app-shell .kontakt-page .footer-contact { border-inline-start: 0; padding-inline-start: 0; }
html.app-shell .kontakt-language-note { display: none; margin: 8px 0 0; padding: 6px 10px; font-size: 14px; line-height: 1.5; }
html.app-shell .kontakt-account { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
html.app-shell .kontakt-account button { min-height: 48px; padding: 9px 18px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--brand-navy); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
html.app-shell .kontakt-account .header-register { border-color: var(--accent); background: var(--accent); color: #fff; }

/* 681-900px: brand + three language buttons + both account buttons already fill the row,
   so the course-language note takes its own line instead of pushing the account buttons
   out of the viewport. Nothing is hidden and nothing is truncated. */
@media (max-width: 900px) {
  html.app-shell .site-header-inner { flex-wrap: wrap; row-gap: 2px; }
  html.app-shell .site-header .course-language-note { order: 3; flex: 1 0 100%; }
  html.app-shell .header-account button { padding-inline: 12px; font-size: 13px; }
}

/* ---- Phones (≤680px): one header row, nav in the footer (§3/§4) --------- */
@media (max-width: 680px) {
  :root { --shell-footer-h: calc(104px + env(safe-area-inset-bottom)); }
  html.app-shell .site-header-inner { flex-wrap: wrap; padding: 1px 14px 2px; gap: 0 10px; }
  /* The full wordmark at a readable size (the header row has the room for it). */
  html.app-shell .site-header .brand img { width: 136px; height: 34px; }
  html.app-shell .brand-caption,
  html.app-shell .header-account { display: none; }
  /* §6: the course-language note stays on every page — one compact header line on phones
     ("Die Kurssprache ist Deutsch.", 12px, never truncated). Its second sentence only
     restates the pressed translation button; the full note is on the Kontakt page. */
  html.app-shell .site-header .course-language-note { display: block; order: 3; flex: 1 0 100%; margin: 0; padding: 0 0 2px; border: 0; border-radius: 0; background: none; color: var(--ink); font-size: 12px; line-height: 15px; padding-bottom: 1px; }
  html.app-shell .site-header .course-language-note * { line-height: 15px; }
  html.app-shell .site-header .course-language-detail { display: none; }
  html.app-shell .site-header .course-language-note > strong { margin-inline-end: .25rem; color: var(--ink); font-weight: 700; }
  html.app-shell .site-header .course-language-note [lang="ar"] { text-align: start; }
  html.app-shell .header-languages { padding: 0; border: 0; }
  /* The group keeps its aria-label, so hiding the visible label loses no information. */
  html.app-shell .translation-picker-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html.app-shell .header-tools { width: auto; margin-inline-start: auto; justify-content: flex-end; }
  html.app-shell .header-languages button { min-width: 44px; min-height: 44px; }
  html.app-shell .site-nav { display: none; }
  html.app-shell .side-nav {
    position: static;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    padding: 2px 6px 0;
    border: 0;
    background: none;
    backdrop-filter: none;
    z-index: auto;
  }
  html.app-shell .side-nav a { min-height: 46px; flex-direction: column; gap: 2px; padding: 3px; font-size: 10px; text-align: center; }
  html.app-shell .side-nav a span { white-space: normal; line-height: 1.25; }
  html.app-shell .side-nav svg { display: block; width: 19px; height: 19px; }
  html.app-shell .footer-line { justify-content: center; gap: 2px 14px; padding: 2px 10px max(2px, env(safe-area-inset-bottom)); font-size: 13px; }
  html.app-shell .footer-wide { display: none; }
  html.app-shell #main { padding-inline: 14px; }
  html.app-shell [data-shell-panel] { --panel-pad-b: 12px; padding: 10px 0 var(--panel-pad-b); }
  html.app-shell .shell-backbar { gap: 8px; min-height: 44px; padding: 5px 0 1px; }
  html.app-shell .shell-back { max-width: 54%; font-size: 13px; padding-block: 3px; }
  /* Titles wrap (up to two lines in the 44px row) instead of being cut with an ellipsis. */
  html.app-shell .shell-title { font-size: 15px; line-height: 1.3; }
  html.app-shell .shell-back { max-width: 46%; }
  html.app-shell .shell-back-more { display: none; }
  /* A little air above the title and under its translation, so neither touches the header
     border or the step row. */
  html.app-shell .learning-header { gap: 8px; min-height: 44px; padding: 3px 0 2px; }
  html.app-shell .learning-header .lesson-tag { display: none; }
  html.app-shell .learning-title-unit { display: none; }
  html.app-shell .learning-header h1 { font-size: 14px; line-height: 1.2; }
  /* The lesson back label is one short line ("← Lektion 1"; the full name stays in the
     accessible name), so the title row keeps one height in every section. */
  html.app-shell .learning-header .shell-back { max-width: 40%; }
  html.app-shell .learning-header .shell-back-label { white-space: nowrap; overflow-wrap: normal; }
  html.app-shell .lab-entry { min-width: 44px; padding: 6px 10px; justify-content: center; }
  /* Icon-only on phones, but the link keeps its full accessible name. */
  html.app-shell .lab-entry-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; text-overflow: clip; }
  html.app-shell .lesson-steps { gap: 2px; padding: 0 2px; }
  html.app-shell .lesson-steps button { flex: 1 0 auto; min-height: 44px; flex-direction: row; gap: 4px; padding: 3px 6px; font-size: 11px; }
  html.app-shell .lesson-steps .step-n { width: 19px; height: 19px; font-size: 10px; }
  /* One horizontal scroller instead of the 4-column grid, so the row stays 44px. */
  html.app-shell .lesson-sections {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 2px 0 0;
    overflow-x: auto;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
  }
  html.app-shell .lesson-sections > span { display: none; }
  html.app-shell .lesson-sections button { flex: 0 0 auto; min-height: 44px; padding: 5px 12px; font-size: 12px; white-space: nowrap; scroll-snap-align: start; scroll-margin-block-end: 0; }
  /* One ≤48px row: both step buttons stay on one line (never wrapped, never cut). */
  html.app-shell .lesson-bottom { flex-wrap: nowrap; gap: 8px; min-height: 44px; padding: 1px 0 0; }
  html.app-shell .lesson-bottom > .muted { display: none; }
  html.app-shell .lesson-bottom .primary, html.app-shell .lesson-bottom .secondary { flex: 0 1 auto; min-width: 0; min-height: 44px; padding: 6px 12px; font-size: 13px; line-height: 1.2; white-space: nowrap; }
  html.app-shell .lesson-bottom .primary svg { width: 16px; height: 16px; }
  html.app-shell .lesson-bottom > .text-button { font-size: 13px; }
  /* Steps 2–4 move forward inside the panel (sticky Zurück/Weiter, Antwort prüfen); the
     step-level row would be a second band right under it and the step tabs above carry
     "Voriger Schritt". One policy per step, not per section (so the panel keeps its height while the learner
     moves between sections): steps 2–4 hide the row on phones, steps 1 and 5 keep it. */
  html.app-shell #main > .lesson-bottom-mid { display: none; }
  /* Lesson title translation: one compact line under the h1. */
  html.app-shell .learning-header .translation-help { font-size: 12px; line-height: 1.25; }
  /* Scene step on phones: a small scene strip and a smaller goal heading, so the goal and
     the listening task start inside the first screen (CSS compaction only, §2c). */
  html.app-shell [data-shell-panel] .scene-context .context-photo img,
  html.app-shell [data-shell-panel] .scene-context .context-photo video { max-height: 120px; aspect-ratio: auto; object-fit: cover; }
  html.app-shell [data-shell-panel] .context-copy { padding: 10px 14px; }
  html.app-shell [data-shell-panel] .context-copy h3 { font-size: 17px; line-height: 1.35; margin: 4px 0 6px; }
  html.app-shell .kontakt-language-note { display: block; margin-top: 4px; padding: 4px 8px; font-size: 13px; line-height: 1.45; }
  /* "Dein Lernen" repeats the selected tab's label right above it (kept for screen readers). */
  html.app-shell .kontakt-page .footer-nav > h2 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* Question cards on phones: tighter card and prompt, so the answer options start in the
     first screen above the sticky "Antwort prüfen" row (CSS compaction only, §2c). */
  html.app-shell [data-shell-panel] .lesson-content:has(> .task-wrap) { padding: 12px 14px; }
  html.app-shell [data-shell-panel] .task-wrap .task-progress { margin-bottom: 6px; }
  html.app-shell [data-shell-panel] .task-wrap .progress-track { margin-bottom: 10px; }
  html.app-shell [data-shell-panel] .task-wrap .prompt { font-size: 17px !important; line-height: 1.45; margin: 6px 0 !important; }
  html.app-shell [data-shell-panel] .lesson-content video,
  html.app-shell [data-shell-panel] .context-photo img,
  html.app-shell [data-shell-panel] .context-photo video { max-height: min(28vh, 190px); }
  /* No approved scene photo yet: a one-line notice, not a 220px empty frame. */
  html.app-shell [data-shell-panel] .context-photo-pending { min-height: 0; flex-wrap: wrap; justify-content: flex-start; gap: 4px 10px; padding: 8px 12px; text-align: start; }
  html.app-shell [data-shell-panel] .context-photo-pending p { font-size: 13px; line-height: 1.4; }
  html.app-shell [data-shell-panel] .context-photo-pending .context-badge { position: static; transform: none; margin: 0; }
  /* Dialogue lines on phones (CSS compaction only, §2c): one tight card per line, the
     speaker row and the German line in one column and the "Übersetzung zeigen" control as
     a 44×44 icon button at the line's end. The button keeps its text as its accessible
     name (font-size 0 hides it visually, not from assistive technology). */
  html.app-shell [data-shell-panel] .dialogue-lines { gap: 6px; }
  html.app-shell [data-shell-panel] .dialogue-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 6px; padding: 6px 6px 6px 12px; border-radius: 10px; }
  html.app-shell [data-shell-panel] .dialogue-line > .line-head { grid-column: 1; margin: 0; font-size: 12px; min-height: 0; }
  html.app-shell [data-shell-panel] .dialogue-line > .german { grid-column: 1; font-size: 16px; line-height: 1.4; }
  html.app-shell [data-shell-panel] .dialogue-line > .text-button[data-reveal] { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; min-height: 44px; padding: 0; border-radius: 10px; font-size: 0 !important; color: var(--accent); }
  html.app-shell [data-shell-panel] .dialogue-line > .text-button[data-reveal]::before { content: ""; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--icon-translate) center / contain no-repeat; mask: var(--icon-translate) center / contain no-repeat; }
  html.app-shell [data-shell-panel] .dialogue-line > .translation { grid-column: 1 / -1; margin: 2px 0 2px; font-size: 14px; }
  /* Kontakt on phones: compact type and a smaller decorative logo; no text is removed. */
  html.app-shell .kontakt-page { gap: 10px; }
  html.app-shell .kontakt-page .footer-logo { width: 150px; }
  html.app-shell .kontakt-page p { font-size: 14px; line-height: 1.6; margin: 0 0 7px; }
  html.app-shell .kontakt-page .footer-story p { margin-top: 8px; font-size: 14px; }
  html.app-shell .kontakt-page h2 { font-size: 17px; margin: 0 0 6px; }
  html.app-shell .kontakt-page .footer-nav a { font-size: 14px; }
  html.app-shell .kontakt-account { margin-top: 8px; gap: 8px; }
  html.app-shell .kontakt-account button { min-height: 44px; font-size: 14px; padding: 7px 14px; }
}
@media (max-width: 400px) {
  html.app-shell .footer-line { font-size: 12px; }
  /* Bottom nav labels stay ≥11px: short labels (Lernraum, Labor) and columns sized to
     their labels instead of a smaller font; no label is broken inside a word. */
  html.app-shell .side-nav { grid-template-columns: repeat(5, auto); justify-content: space-between; padding-inline: 4px; }
  html.app-shell .side-nav a { min-width: 44px; font-size: 11px; padding-inline: 4px; }
  html.app-shell .side-nav a span { white-space: nowrap; }
  html.app-shell .side-nav .nav-label-full { display: none; }
  html.app-shell .side-nav .nav-label-short { display: inline; }
  /* Lesson steps: the five numbers plus the current step's name, so the row fits without
     sideways scrolling. The other steps keep their name as accessible name (font-size 0). */
  html.app-shell .lesson-steps button:not(.active) { flex: 1 1 44px; justify-content: center; min-width: 44px; padding-inline: 2px; font-size: 0; gap: 0; }
  html.app-shell .lesson-steps button.active { flex: 0 0 auto; }
}

html.app-shell .page-tab .tab-label-short, html.app-shell .nav-label-short { display: none; }
/* ---- Page tabs, unit chips and pagers (§6, §2a/§2b) ---------------------
   One tab row above the panel; every tabpanel lives inside the panel and the inactive
   ones are `hidden`. On narrow screens the row scrolls sideways (the selected tab is
   kept in view by app.js) with edge shadows as the "more tabs" cue. */
[role="tabpanel"][hidden], [data-pager-item][hidden], [data-pager-controls][hidden], [data-pager-companion][hidden] { display: none !important; }
html.app-shell .page-tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 2px;
  margin: 0;
  padding: 4px 0 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(to right, var(--paper) 30%, transparent) left center / 28px 100% no-repeat local,
    linear-gradient(to left, var(--paper) 30%, transparent) right center / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, #12233530, transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, #12233530, transparent) right center / 12px 100% no-repeat scroll;
}
html.app-shell .page-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  min-width: 44px;
  margin: 0;
  padding: 6px 14px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 10px 10px 0 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}
html.app-shell .page-tab:hover { color: var(--accent); background: #ffffffa8; }
html.app-shell .page-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); background: #fff; }
html.app-shell .page-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
/* Unit chips: a nested tablist inside the Einheiten panel. They wrap (never a hidden
   sideways strip) and stay compact: number + title on wide screens, the number alone on
   phones (the title stays in the accessible name). */
html.app-shell .unit-chips {
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
  overflow: visible;
  border: 0;
  background: none;
}
html.app-shell .unit-chips .page-tab {
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
html.app-shell .unit-chips .page-tab[aria-selected="true"] { background: var(--soft-accent); border-color: var(--accent); }
html.app-shell .unit-chips .chip-num { color: var(--accent); font-weight: 800; }
html.app-shell .tab-panel { outline: none; }
html.app-shell .tab-panel:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 8px; }
/* List pager (Vorige · n / N · Weiter) and the pathway's stage picker. */
html.app-shell .list-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
html.app-shell .list-pager button { min-height: 44px; padding: 6px 14px; gap: 8px; }
html.app-shell .list-pager [data-pager-prev] svg { transform: scaleX(-1); }
html.app-shell .pager-status { color: var(--muted); font-size: 14px; font-weight: 700; direction: ltr; unicode-bidi: isolate; }
html.app-shell .pathway-pager { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
html.app-shell .pathway-pager button { min-height: 44px; padding: 6px 14px; }
html.app-shell .pathway-pager button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
html.app-shell .pathway[data-paged] .pathway-stages { grid-template-columns: minmax(0, 1fr); }
html.app-shell .pathway[data-paged] .pathway-stage a { min-height: 0; grid-template-columns: minmax(0, 1fr) auto; }
/* One card per view: the pager row already gives the order, so the "01" index yields its
   row to the status line next to the level. */
html.app-shell .pathway[data-paged] .pathway-index { display: none; }
html.app-shell .pathway[data-paged] .pathway-status { grid-column: 1; grid-row: 1; align-self: center; }
html.app-shell .pathway[data-paged] .pathway-level { grid-column: 2; grid-row: 1; line-height: 1.2; }
/* Header note: one flowing paragraph (wraps, never truncated), not a flex row whose second
   part drops onto extra lines. */
@media (min-width: 681px) {
  html.app-shell .site-header .course-language-note { display: block; line-height: 1.45; }
  html.app-shell .site-header .course-language-note > strong { margin-inline-end: .3rem; }
}
html.app-shell .pathway[data-paged] .pathway-destination { margin-top: 0; }

/* Panel content compaction (§2a): the same content, tighter spacing, smaller decorative
   media, so each tab fits its panel. Nothing is removed. */
html.app-shell [data-shell-panel] .page-intro { margin-bottom: 14px; }
html.app-shell [data-shell-panel] .page-intro h1 { font-size: clamp(22px, 2.3vw, 32px); line-height: 1.35; margin: 2px 0 4px; }
html.app-shell [data-shell-panel] .pathway { margin: 0; }
html.app-shell [data-shell-panel] .pathway-heading { margin-bottom: 12px; }
html.app-shell [data-shell-panel] .pathway-heading h2 { font-size: clamp(20px, 2vw, 26px); margin: 2px 0 4px; }
html.app-shell [data-shell-panel] .pathway-stage a { min-height: 0; padding: 16px 18px; gap: 4px 12px; }
html.app-shell [data-shell-panel] .pathway-destination { margin-top: 12px; padding: 14px 18px; }
html.app-shell [data-shell-panel] .pathway-caveat { margin-top: 8px; }
html.app-shell [data-shell-panel] .tab-panel > .section-title:first-child,
html.app-shell [data-shell-panel] .below-grid .section-title { margin-top: 0; }
html.app-shell [data-shell-panel] .roadmap-head { margin-bottom: 14px; padding: 18px 22px; }
html.app-shell [data-shell-panel] .roadmap-head .big-letter { font-size: 54px; }
html.app-shell [data-shell-panel] .level-preparing { margin: 0; padding: 22px 26px; }
html.app-shell [data-shell-panel] .level-preparing h2 { margin: 8px 0 6px; }
html.app-shell [data-shell-panel] .learning-pulse { margin-bottom: 0; }
html.app-shell [data-shell-panel] .course-units { gap: 0; }
html.app-shell [data-shell-panel] .course-unit summary { padding: 14px 18px; gap: 14px; }
html.app-shell [data-shell-panel] .unit-number { flex-basis: 46px; height: 46px; font-size: 20px; border-radius: 13px; }
html.app-shell [data-shell-panel] .unit-heading h2 { font-size: 19px; margin: 0; }
html.app-shell [data-shell-panel] .unit-interior { padding: 16px 18px; gap: 20px; }
html.app-shell [data-shell-panel] .unit-lessons-heading { margin-bottom: 8px; }
/* ≥44px targets (§0): the unit disclosure and the stand-alone "Einheitsseite" link. */
html.app-shell [data-shell-panel] .course-unit summary { min-height: 44px; }
html.app-shell [data-shell-panel] .unit-lessons-heading a.text-button { display: inline-flex; align-items: center; min-height: 44px; }
html.app-shell [data-shell-panel] .unit-lesson-list { gap: 8px; }
html.app-shell [data-shell-panel] .unit-lesson-link { padding: 12px 14px; gap: 12px; }
html.app-shell [data-shell-panel] .unit-lesson-copy h3 { font-size: 17px; margin: 0 0 2px; }
html.app-shell [data-shell-panel] .unit-lesson-copy p { margin: 0 0 4px; line-height: 1.6; }
html.app-shell [data-shell-panel] .unit-summary-line { margin: -6px 0 10px; }
html.app-shell [data-shell-panel] .unit-page .unit-film { max-width: 720px; }
html.app-shell [data-shell-panel] .unit-page .unit-index { margin: 0; }
html.app-shell [data-shell-panel] .review-list { display: grid; gap: 10px; }
html.app-shell [data-shell-panel] .review-entry > .review-item { margin: 0; }
html.app-shell [data-shell-panel] .stat-grid { margin: 0 0 14px; }
html.app-shell [data-shell-panel] .lesson-content-compact { margin: 0; }
html.app-shell [data-shell-panel] .lab-intro { margin-bottom: 10px; }
html.app-shell [data-shell-panel] .lab-grid { margin: 12px 0 0; }
html.app-shell [data-shell-panel] .lab-panel > .notice:first-of-type { margin-top: 0; }
/* Translation help (AR/EN) doubles most text: keep it, but tighter. */
html.app-shell [data-shell-panel] .tab-panel .translation-help { margin: 2px 0 6px; padding: 3px 9px; line-height: 1.6; font-size: .94em; }
html.app-shell [data-shell-panel] .notice { padding: 10px 14px; line-height: 1.6; }
/* Unit overview (one unit per chip on #path/#level-a2): title, count and the lessons; the
   goal and each lesson's can-do line are on the unit page. */
html.app-shell [data-shell-panel] .course-unit.is-overview .unit-heading .eyebrow,
html.app-shell [data-shell-panel] .course-unit.is-overview .unit-goal,
html.app-shell [data-shell-panel] .course-unit.is-overview .unit-goal + .translation-help,
html.app-shell [data-shell-panel] .course-unit.is-overview .unit-lesson-copy > p,
html.app-shell [data-shell-panel] .course-unit.is-overview .unit-lesson-copy > p + .translation-help { display: none; }
html.app-shell [data-shell-panel] .course-unit.is-overview .unit-interior { padding: 12px 16px 14px; }
/* Inside a unit the lesson titles do not repeat the unit title shown right above them. */
html.app-shell [data-shell-panel] .course-unit.is-overview .lesson-title-unit { display: none; }
.unit-count-inline { display: none; }
html.app-shell [data-shell-panel] .course-unit.is-overview .unit-lesson-copy h3 { margin-bottom: 0; }
html.app-shell [data-shell-panel] .course-unit.is-overview .lesson-meta { margin-top: 2px; }
/* Home: hero without its decorative minimum heights. */
html.app-shell [data-shell-panel] .hero { min-height: 0; }
html.app-shell [data-shell-panel] .hero-media { min-height: 0; height: auto; max-height: none; }
html.app-shell [data-shell-panel] .hero-copy { padding: 28px 32px; }
html.app-shell [data-shell-panel] .hero h2 { font-size: clamp(26px, 2.6vw, 38px); margin: 10px 0; }
html.app-shell [data-shell-panel] .hero-copy > p { margin-bottom: 14px; }
html.app-shell [data-shell-panel] .method-card { padding: 18px; }
html.app-shell [data-shell-panel] .daily-card { min-height: 0; }
html.app-shell [data-shell-panel] .empty-state { padding: 20px 12px; }
html.app-shell [data-shell-panel] .review-item { padding: 16px 20px; }
html.app-shell [data-shell-panel] .stat { padding: 18px 20px; }
html.app-shell [data-shell-panel] .stat strong { font-size: 34px; }
html.app-shell [data-shell-panel] .unit-index .chip-title { color: var(--ink); font-weight: 600; }
html.app-shell [data-shell-panel] .tab-lead { margin: 0 0 10px; color: var(--muted); font-size: 14px; line-height: 1.6; max-width: 80ch; }
/* Inside its own tab the pathway's h2 repeats the tab label: it stays the section's
   accessible name but is not shown twice; the brand eyebrow is left out. */
html.app-shell [data-shell-panel] .tab-panel .pathway-heading .eyebrow { display: none; }
html.app-shell [data-shell-panel] .tab-panel .pathway-heading h2 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.app-shell [data-shell-panel] .unit-lead .page-intro { margin-bottom: 4px; }
html.app-shell [data-shell-panel] .unit-lead .unit-summary-line { margin: 0 0 8px; }
html.app-shell [data-shell-panel] .kontakt-account-box { margin-top: 4px; }
html.app-shell [data-shell-panel] .kontakt-account-box .kontakt-account { margin-top: 0; }
/* Small content pagers (home hero, status cards): items stack as before. */
html.app-shell [data-shell-panel] .shell-pager > [data-pager-item] + [data-pager-item] { margin-top: 12px; }

/* Lab (five tabs): the activity picker becomes a chip row above the card, and on wide
   screens the card flows into two balanced columns, so one card fits the panel. */
html.app-shell [data-shell-panel] .lab-lead { margin-bottom: 8px; }
html.app-shell [data-shell-panel] .lab-lead-eyebrow { color: var(--accent); font-weight: 700; }
html.app-shell [data-shell-panel] .lab-panel > .notice { margin: 0 0 10px; font-size: 14px; }
html.app-shell [data-shell-panel] .lab-layout { grid-template-columns: minmax(0, 1fr); gap: 10px; }
html.app-shell [data-shell-panel] .lab-index { display: flex; flex-wrap: wrap; gap: 6px; }
html.app-shell [data-shell-panel] .lab-index button { min-width: 44px; min-height: 44px; padding: 4px 12px; }
html.app-shell [data-shell-panel] .lab-card { padding: 18px 22px; }
html.app-shell [data-shell-panel] .lab-card h2 { margin: 4px 0 0; font-size: 24px; line-height: 1.3; }
html.app-shell [data-shell-panel] .lab-card p { line-height: 1.6; }
html.app-shell [data-shell-panel] .lab-card .lab-ipa { margin: 0; font-size: 24px; line-height: 1.4; }
html.app-shell [data-shell-panel] .lab-card .lab-example { margin: 6px 0; padding: 8px 12px; font-size: 19px; }
html.app-shell [data-shell-panel] .lab-card .notice { margin-top: 8px; }
html.app-shell [data-shell-panel] .lab-card .inline-note { margin: 4px 0; font-size: 13px; line-height: 1.5; }
html.app-shell [data-shell-panel] .lab-card .lab-actions { margin: 10px 0 0; gap: 8px; }
/* §2c: a lab card taller than the panel (phones) keeps its Zurück/Weiter/Wissen testen row
   reachable at the panel bottom, like the lesson forward rows. */
html.app-shell [data-shell-panel] .lab-card > .lab-actions { position: sticky; bottom: calc(-1 * var(--panel-pad-b)); z-index: 2; padding: 6px 0 0; background: #fff; }
html.app-shell [data-shell-panel] .lab-card > .lab-actions.is-stuck { border-top: 1px solid var(--line); box-shadow: 0 -10px 18px -14px #12233540; }
html.app-shell [data-shell-panel] .lab-panel .lab-actions { margin: 8px 0; gap: 8px; }
html.app-shell [data-shell-panel] .lab-panel .lab-actions > button { min-height: 44px; padding: 6px 14px; }
html.app-shell [data-shell-panel] .lab-grid { gap: 12px; }
html.app-shell [data-shell-panel] .lab-grid .lesson-content { padding: 14px 16px; }
html.app-shell [data-shell-panel] .lab-grid .lesson-content h2 { margin: 2px 0; font-size: 20px; }
html.app-shell [data-shell-panel] .lab-grid .lesson-content p { margin: 0 0 8px; }
html.app-shell [data-shell-panel] .lab-panel > .lesson-content { padding: 18px 22px; }
html.app-shell [data-shell-panel] .lab-panel > .lesson-content h2 { margin: 0 0 6px; font-size: 22px; }
html.app-shell [data-shell-panel] .lab-panel > .lesson-content p { margin: 0 0 8px; line-height: 1.6; }
html.app-shell [data-shell-panel] .lab-panel #lab-writing { min-height: 0; height: 104px; margin: 4px 0 8px; padding: 10px 12px; }
/* Lab exam question: each answer option shares its row with its teacher-audio button. */
html.app-shell [data-shell-panel] .lab-options { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 12px 0; }
html.app-shell [data-shell-panel] .lab-options > [data-lab-answer] { grid-column: 1; min-height: 48px; padding: 8px 16px; }
html.app-shell [data-shell-panel] .lab-options > .teacher-audio { grid-column: 2; margin: 0; min-height: 44px; }
html.app-shell [data-shell-panel] .lab-panel > .lesson-content > .lab-actions:first-child { margin-top: 0; }
html.app-shell [data-shell-panel] .lab-panel > .lesson-content > .notice { margin: 8px 0; }
html.app-shell [data-shell-panel] .lab-result-head > .lab-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 8px 0; }
/* The exam's Weiter stays reachable when one question is taller than a phone panel. */
html.app-shell [data-shell-panel] .lab-panel > .lesson-content > [data-lab-next] { position: sticky; bottom: 6px; z-index: 2; box-shadow: 0 6px 18px -8px #12233560; }
html.app-shell [data-shell-panel] .lab-result-head > .lab-grid > .notice { margin: 0; padding: 8px 12px; }
html.app-shell [data-shell-panel] .lab-results > .notice { margin: 0 0 8px; }
html.app-shell [data-shell-panel] .lab-result-head h2 { margin: 2px 0; }
html.app-shell [data-shell-panel] .lab-result-head p { margin: 0 0 6px; }
/* The lab notes (eyebrow, description, caveat) in one collapsed <details>. */
html.app-shell [data-shell-panel] .lab-about { margin: 0 0 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
html.app-shell [data-shell-panel] .lab-about > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 4px 14px; cursor: pointer; font-size: 14px; line-height: 1.4; list-style: none; }
html.app-shell [data-shell-panel] .lab-about > summary::-webkit-details-marker { display: none; }
html.app-shell [data-shell-panel] .lab-about > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 12px; }
html.app-shell [data-shell-panel] .lab-about-hint { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--muted); font-size: 13px; font-weight: 700; }
html.app-shell [data-shell-panel] .lab-about-hint::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
html.app-shell [data-shell-panel] .lab-about[open] .lab-about-hint::after { transform: translateY(2px) rotate(225deg); }
html.app-shell [data-shell-panel] .lab-about > .tab-lead { margin: 0 14px 8px; }
html.app-shell [data-shell-panel] .lab-about > .notice { margin: 0 10px 10px; font-size: 14px; }
/* The test caveat (not an A1 exam, no certificate) is always visible above the test forms. */
html.app-shell [data-shell-panel] .lab-exam-notice { margin: 0 0 8px; padding: 6px 10px; font-size: 13px; line-height: 1.45; }
/* One card: a head row (card n / N + the part control), its parts, its Zurück/Weiter row.
   Each part puts a line and its teacher-audio button side by side. */
html.app-shell [data-shell-panel] .lab-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
html.app-shell [data-shell-panel] .lab-card-head .tag { margin: 0; }
html.app-shell [data-shell-panel] .lab-part-pager { display: flex; align-items: center; gap: 6px; margin: 0; }
html.app-shell [data-shell-panel] .lab-part-pager button { min-width: 44px; min-height: 44px; padding: 0 10px; justify-content: center; font-size: 22px; line-height: 1; }
html.app-shell [data-shell-panel] .lab-part-label, html.app-shell [data-shell-panel] .lab-part-pager .pager-status { color: var(--muted); font-size: 13px; font-weight: 700; }
html.app-shell [data-shell-panel] .lab-part { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; align-content: start; min-width: 0; }
html.app-shell [data-shell-panel] .lab-part > * { grid-column: 1; min-width: 0; }
html.app-shell [data-shell-panel] .lab-part > .teacher-audio { grid-column: 2; margin: 0; }
html.app-shell [data-shell-panel] .lab-part > .notice { margin: 8px 0 0; }
html.app-shell [data-shell-panel] .lab-part-record > button { justify-self: start; min-height: 44px; }
html.app-shell [data-shell-panel] .lab-production > [data-pager-item] { margin: 0 0 8px; }
html.app-shell [data-shell-panel] .lab-draft label { display: block; margin: 0 0 4px; }
@media (min-width: 700px) {
  /* Wide panels: the parts sit in two columns (2 × 2), head and actions span both. */
  html.app-shell [data-shell-panel] .lab-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; align-content: start; }
  html.app-shell [data-shell-panel] .lab-card > .lab-card-head, html.app-shell [data-shell-panel] .lab-card > .lab-actions { grid-column: 1 / -1; }
}

/* Phones: the same content in a tighter type scale. */
@media (max-width: 680px) {
  html.app-shell [data-shell-panel] .lab-index { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
  html.app-shell [data-shell-panel] .lab-index button { flex: 0 0 auto; white-space: nowrap; }
  html.app-shell [data-shell-panel] .lab-panel > .notice { font-size: 13px; line-height: 1.5; }
  html.app-shell [data-shell-panel] .lab-card { padding: 12px 14px; }
  html.app-shell [data-shell-panel] .lab-card h2 { font-size: 20px; }
  html.app-shell [data-shell-panel] .lab-card .lab-ipa { font-size: 20px; }
  html.app-shell [data-shell-panel] .lab-card .lab-example { font-size: 16px; padding: 6px 10px; }
  html.app-shell [data-shell-panel] .lab-card p, html.app-shell [data-shell-panel] .lab-card .notice { font-size: 13.5px; line-height: 1.55; }
  html.app-shell [data-shell-panel] .lab-grid .lesson-content { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 10px; padding: 10px 12px; }
  html.app-shell [data-shell-panel] .lab-grid .lesson-content > .tag { grid-column: 1; justify-self: start; }
  html.app-shell [data-shell-panel] .lab-grid .lesson-content > h2 { grid-column: 1; font-size: 17px; }
  html.app-shell [data-shell-panel] .lab-grid .lesson-content > p { grid-column: 1; margin: 0; font-size: 13px; line-height: 1.45; }
  html.app-shell [data-shell-panel] .lab-grid .lesson-content > button { grid-column: 2; grid-row: 1 / span 3; min-height: 44px; padding: 6px 14px; }
  html.app-shell [data-shell-panel] .lab-panel > .lesson-content { padding: 12px 14px; }
  html.app-shell [data-shell-panel] .lab-panel > .lesson-content h2 { font-size: 18px; }
  html.app-shell [data-shell-panel] .lab-panel > .lesson-content p { font-size: 13.5px; line-height: 1.55; }
  html.app-shell [data-shell-panel] .lab-panel #lab-writing { height: 88px; }
  html.app-shell [data-shell-panel] .lab-panel .lab-actions > button { flex: 1 1 auto; min-width: 0; font-size: 13px; }
  /* Test mode toggles (Üben | Test): one row of two, each label wrapping inside its button. */
  html.app-shell [data-shell-panel] .lab-panel > .lab-actions { flex-wrap: nowrap; }
  html.app-shell [data-shell-panel] .lab-panel > .lab-actions > button { flex: 1 1 0; white-space: normal; padding: 5px 10px; line-height: 1.25; }
  html.app-shell .page-tab { padding: 6px 11px; font-size: 13px; }
  html.app-shell .page-tabs { padding-top: 0; }
  /* Short tab labels on phones, so every tab of a page is visible in one row. */
  html.app-shell .page-tab .tab-label-full { display: none; }
  html.app-shell .page-tab .tab-label-short { display: inline; }
  /* Phones: the unit chips are one row that scrolls sideways (edge shadows as the cue,
     the selected chip kept in view by app.js), so they cost one 44px row, not two. */
  html.app-shell .unit-chips {
    flex-wrap: nowrap;
    gap: 5px;
    margin-bottom: 8px;
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: thin;
    background:
      linear-gradient(to right, var(--paper) 30%, transparent) left center / 28px 100% no-repeat local,
      linear-gradient(to left, var(--paper) 30%, transparent) right center / 28px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, #12233530, transparent) left center / 12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, #12233530, transparent) right center / 12px 100% no-repeat scroll;
  }
  html.app-shell .unit-chips .page-tab { flex: 0 0 auto; position: relative; }
  html.app-shell .unit-chips .page-tab { justify-content: center; padding: 4px 6px; }
  /* Number only on phones; the unit title stays in the chip's accessible name. */
  html.app-shell .unit-chips .chip-title,
  html.app-shell [data-shell-panel] .unit-page .unit-index .chip-title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html.app-shell [data-shell-panel] .unit-page .unit-index { gap: 5px; }
  html.app-shell [data-shell-panel] .unit-page .unit-index a { min-width: 44px; min-height: 44px; justify-content: center; padding: 4px 6px; }
  html.app-shell [data-shell-panel] p { line-height: 1.6; }
  html.app-shell [data-shell-panel] .eyebrow { font-size: 10px; }
  html.app-shell [data-shell-panel] .page-intro { margin-bottom: 10px; }
  html.app-shell [data-shell-panel] .page-intro h1 { font-size: 20px; line-height: 1.35; }
  html.app-shell [data-shell-panel] .page-intro p { font-size: 14px; max-width: none; }
  html.app-shell [data-shell-panel] .page-intro > .tag { margin-top: 2px; }
  html.app-shell [data-shell-panel] .tab-panel .translation-help { font-size: 14px; line-height: 1.55; padding: 2px 8px; margin: 2px 0 4px; }
  html.app-shell [data-shell-panel] .notice { font-size: 13px; padding: 8px 12px; }
  /* Pathway */
  html.app-shell [data-shell-panel] .pathway-heading { margin-bottom: 8px; }
  html.app-shell [data-shell-panel] .pathway-heading h2 { font-size: 19px; }
  html.app-shell [data-shell-panel] .pathway-heading p { font-size: 13px; line-height: 1.55; }
  html.app-shell [data-shell-panel] .pathway-pager { gap: 5px; margin-bottom: 8px; flex-wrap: nowrap; }
  html.app-shell [data-shell-panel] .pathway-pager button { padding: 4px 10px; min-width: 44px; font-size: 14px; }
  html.app-shell [data-shell-panel] .pathway-stage a { padding: 12px 14px; gap: 2px 10px; }
  html.app-shell [data-shell-panel] .pathway-level { font-size: 22px; }
  html.app-shell [data-shell-panel] .pathway-stage strong { font-size: 16px; }
  html.app-shell [data-shell-panel] .pathway-summary { font-size: 13px; line-height: 1.55; }
  html.app-shell [data-shell-panel] .pathway-destination { gap: 8px; padding: 12px 14px; }
  html.app-shell [data-shell-panel] .pathway-destination-mark { display: none; }
  html.app-shell [data-shell-panel] .pathway-destination h3 { font-size: 16px; }
  html.app-shell [data-shell-panel] .pathway-destination p { font-size: 13px; line-height: 1.55; }
  html.app-shell [data-shell-panel] .pathway-caveat { font-size: 12px; line-height: 1.5; margin: 6px 2px 0; }
  /* Level/exam status */
  html.app-shell [data-shell-panel] .level-preparing { padding: 14px 16px; border-radius: 16px; }
  html.app-shell [data-shell-panel] .level-preparing h2 { font-size: 18px; margin: 6px 0 4px; }
  html.app-shell [data-shell-panel] .level-preparing p { font-size: 14px; line-height: 1.6; margin-bottom: 8px; }
  html.app-shell [data-shell-panel] .roadmap-head { padding: 12px 16px; border-radius: 16px; gap: 10px; margin-bottom: 10px; }
  html.app-shell [data-shell-panel] .roadmap-head h2 { font-size: 17px; }
  html.app-shell [data-shell-panel] .roadmap-head p { margin-top: 4px; line-height: 1.5; }
  html.app-shell [data-shell-panel] .roadmap-head .big-letter { font-size: 30px; }
  /* Units and lessons */
  html.app-shell [data-shell-panel] .course-unit { border-radius: 16px; }
  html.app-shell [data-shell-panel] .course-unit summary { padding: 10px 12px; gap: 2px 10px; flex-wrap: wrap; align-items: center; }
  html.app-shell [data-shell-panel] .unit-number { flex: 0 0 38px; height: 38px; font-size: 16px; border-radius: 11px; }
  html.app-shell [data-shell-panel] .course-unit summary .unit-heading { flex: 1 1 0; }
  html.app-shell [data-shell-panel] .unit-heading h2 { font-size: 16px; line-height: 1.4; }
  html.app-shell [data-shell-panel] .course-unit summary .unit-count { flex: 1 0 100%; margin: 0; padding-inline-start: 48px; font-size: 12px; line-height: 1.4; white-space: normal; }
  html.app-shell [data-shell-panel] .course-unit.is-overview .lesson-meta { display: none; }
  html.app-shell [data-shell-panel] .course-unit.is-overview .unit-lessons-heading { justify-content: flex-end; margin-bottom: 4px; }
  html.app-shell [data-shell-panel] .course-unit.is-overview .unit-lessons-heading h3 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html.app-shell [data-shell-panel] .course-unit.is-overview .unit-lessons-heading a { padding: 2px 0; min-height: 44px; display: inline-flex; align-items: center; }
  html.app-shell [data-shell-panel] .tab-lead { font-size: 13px; line-height: 1.5; margin-bottom: 8px; }
  /* Round 2: the pathway card's decorative "01" index gives its row to the status line. */
  html.app-shell [data-shell-panel] .pathway-heading p, html.app-shell [data-shell-panel] .pathway-caveat { font-size: 12.5px; line-height: 1.5; }
  html.app-shell [data-shell-panel] .pathway-stage a { grid-template-columns: minmax(0, 1fr) auto; }
  html.app-shell [data-shell-panel] .pathway-index { display: none; }
  html.app-shell [data-shell-panel] .pathway-status { grid-column: 1; grid-row: 1; align-self: center; font-size: 12px; line-height: 1.4; }
  html.app-shell [data-shell-panel] .pathway-level { grid-column: 2; grid-row: 1; line-height: 1.2; }
  html.app-shell [data-shell-panel] .pathway-action { margin-top: 2px; }
  html.app-shell [data-shell-panel] .pathway-destination .eyebrow { letter-spacing: .02em; font-size: 10px; line-height: 1.4; }
  html.app-shell [data-shell-panel] .pathway-destination .secondary { min-height: 44px; padding: 6px 14px; }
  html.app-shell [data-shell-panel] .roadmap-head > div:first-child p:last-of-type { font-size: 12px; }
  /* The unit page's "Lektionen dieser Einheit" repeats the selected tab's label. */
  html.app-shell [data-shell-panel] .unit-page .unit-lessons-heading { margin: 0; }
  html.app-shell [data-shell-panel] .unit-page .unit-lessons-heading h3 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html.app-shell [data-shell-panel] .unit-lead { margin-bottom: 8px; }
  html.app-shell [data-shell-panel] .unit-lead .page-intro .eyebrow { display: none; }
  html.app-shell [data-shell-panel] { --panel-pad-b: 8px; padding: 8px 0 var(--panel-pad-b); }
  /* Pathway tab on the path, level and exam-prep pages (phones): the intro sentence is the
     same as on the home pathway tab, and the roadmap's one-line motto gives way to the
     counts. */
  html.app-shell [data-shell-panel] .tab-panel:not(#tabpanel-home-pathway) .pathway-heading { display: none; }
  html.app-shell [data-shell-panel] .roadmap-head > div:first-child p + p { display: none; }
  /* Repeats the page h1 (A2 stage title) and the destination card's own summary. */
  html.app-shell [data-shell-panel] .roadmap-head .roadmap-stage-title { display: none; }
  html.app-shell [data-shell-panel] .pathway-destination > div > .eyebrow { display: none; }
  html.app-shell [data-shell-panel] .unit-page .lesson-title-unit { display: none; }
  html.app-shell [data-shell-panel] .level-preparing p { font-size: 13.5px; line-height: 1.55; }
  html.app-shell .kontakt-page .footer-logo { width: 104px; }
  html.app-shell .kontakt-page .footer-story p { font-size: 13px; line-height: 1.5; }
  /* Unit overview on phones: the selected chip already shows the unit number. */
  html.app-shell [data-shell-panel] .course-unit.is-overview .unit-number { display: none; }
  html.app-shell [data-shell-panel] .course-unit.is-overview summary .unit-count { padding-inline-start: 0; }
  html.app-shell [data-shell-panel] .course-unit.is-overview .unit-interior { padding: 6px 12px 10px; }
  html.app-shell [data-shell-panel] .course-unit.is-overview .unit-lessons-heading a { min-height: 44px; display: inline-flex; align-items: center; font-size: 13px; }
  html.app-shell [data-shell-panel] .course-unit.is-overview summary .unit-count { display: none; }
  html.app-shell [data-shell-panel] .course-unit.is-overview .unit-lessons-heading { justify-content: space-between; }
  html.app-shell [data-shell-panel] .course-unit.is-overview .unit-count-inline { display: inline; font-size: 12px; line-height: 1.4; }
  html.app-shell [data-shell-panel] .tab-lead { font-size: 12.5px; }
  html.app-shell [data-shell-panel] .list-pager { margin-top: 6px; }
  /* Home hero: the photo is decorative here (about a fifth of the panel). */
  /* The dialogue card sits under the photo (not over it), so the scene stays visible. */
  html.app-shell [data-shell-panel] .hero-media { height: auto; min-height: 0; }
  html.app-shell [data-shell-panel] .hero-media > img { display: block; width: 100%; height: clamp(120px, 21vh, 170px); object-fit: cover; }
  html.app-shell [data-shell-panel] .hero-media .dialogue-peek { position: static; inset: auto; width: auto; margin: 6px 0 0; transform: none; }
  html.app-shell [data-shell-panel] .hero h2 { font-size: 20px; margin: 6px 0; }
  html.app-shell [data-shell-panel] .hero-copy { padding: 12px 16px; }
  html.app-shell [data-shell-panel] .hero-copy > .tag { padding: 2px 8px; }
  html.app-shell [data-shell-panel] .hero-copy > p { font-size: 13px; line-height: 1.5; margin-bottom: 8px; }
  html.app-shell [data-shell-panel] .hero-actions { gap: 4px 12px; }
  html.app-shell [data-shell-panel] .hero-actions .primary { min-height: 44px; padding: 8px 16px; }
  html.app-shell [data-shell-panel] .dialogue-peek { padding: 6px 10px; gap: 8px; }
  html.app-shell [data-shell-panel] .dialogue-peek .speaker-circle { width: 30px; height: 30px; }
  html.app-shell [data-shell-panel] .dialogue-peek strong { font-size: 13px; line-height: 1.35; }
  html.app-shell [data-shell-panel] .dialogue-peek small { line-height: 1.35; }
  /* Review empty state and Kontakt. */
  html.app-shell [data-shell-panel] .tab-panel > .lesson-content, html.app-shell [data-shell-panel] .page-intro + .lesson-content { padding: 12px 14px; }
  html.app-shell [data-shell-panel] .page-intro + .lesson-content .empty-icon { display: none; }
  html.app-shell [data-shell-panel] .empty-state .primary { min-height: 44px; padding: 8px 16px; }
  html.app-shell .kontakt-page .footer-logo { width: 120px; }
  html.app-shell .kontakt-page p { font-size: 13.5px; line-height: 1.55; margin: 0 0 6px; }
  html.app-shell .kontakt-page .footer-story p { margin-top: 6px; font-size: 13.5px; }
  html.app-shell [data-shell-panel] .unit-chevron { display: none; }
  html.app-shell [data-shell-panel] .unit-interior { padding: 10px 12px 12px; gap: 12px; }
  html.app-shell [data-shell-panel] .unit-lessons-heading h3 { font-size: 15px; }
  html.app-shell [data-shell-panel] .unit-lesson-link { padding: 10px; gap: 10px; }
  html.app-shell [data-shell-panel] .lesson-order { width: 30px; height: 30px; flex-basis: 30px; font-size: 14px; }
  html.app-shell [data-shell-panel] .unit-lesson-copy h3 { font-size: 15px; line-height: 1.45; }
  html.app-shell [data-shell-panel] .unit-lesson-copy p { font-size: 13px; line-height: 1.55; }
  html.app-shell [data-shell-panel] .lesson-meta { font-size: 12px; gap: 2px 10px; }
  html.app-shell [data-shell-panel] .unit-summary-line { margin: -4px 0 6px; font-size: 13px; }
  html.app-shell [data-shell-panel] .unit-page .unit-film img, html.app-shell [data-shell-panel] .unit-page .unit-film video { max-height: 200px; }
  html.app-shell [data-shell-panel] .list-pager { margin-top: 8px; }
  html.app-shell [data-shell-panel] .list-pager button { padding: 5px 12px; font-size: 14px; }
  /* Home */
  html.app-shell [data-shell-panel] .learning-pulse { gap: 10px; padding: 12px 14px; }
  html.app-shell [data-shell-panel] .hero h2 { line-height: 1.35; }
  html.app-shell [data-shell-panel] .dialogue-peek { bottom: 8px; }
  html.app-shell [data-shell-panel] .photo-label { top: 8px; }
  html.app-shell [data-shell-panel] .section-title { margin: 0 0 8px; }
  html.app-shell [data-shell-panel] .section-title h2 { font-size: 17px; }
  html.app-shell [data-shell-panel] .method-grid { gap: 8px; }
  html.app-shell [data-shell-panel] .method-card { padding: 12px 14px; gap: 12px; border-radius: 14px; }
  html.app-shell [data-shell-panel] .method-icon { width: 38px; height: 38px; border-radius: 11px; }
  html.app-shell [data-shell-panel] .method-num { margin-bottom: 2px; }
  html.app-shell [data-shell-panel] .method-card h3 { font-size: 15px; margin-bottom: 2px; }
  html.app-shell [data-shell-panel] .method-card p { font-size: 13px; line-height: 1.55; }
  html.app-shell [data-shell-panel] .below-grid { gap: 12px; }
  html.app-shell [data-shell-panel] .unit-card { padding: 12px 14px; gap: 12px; }
  html.app-shell [data-shell-panel] .unit-card .unit-icon { width: 44px; height: 44px; }
  html.app-shell [data-shell-panel] .daily-card { padding: 14px 16px; }
  html.app-shell [data-shell-panel] .daily-card h3 { margin: 4px 0; font-size: 17px; }
  html.app-shell [data-shell-panel] .daily-card p { font-size: 13px; }
  /* Review / progress */
  html.app-shell [data-shell-panel] .empty-state { padding: 12px 6px; }
  html.app-shell [data-shell-panel] .empty-state .empty-icon { width: 48px; height: 48px; margin-bottom: 8px; }
  html.app-shell [data-shell-panel] .empty-state h2 { font-size: 19px; }
  html.app-shell [data-shell-panel] .empty-state p { font-size: 14px; margin-bottom: 12px; }
  html.app-shell [data-shell-panel] .review-item { padding: 12px 14px; gap: 8px; }
  html.app-shell [data-shell-panel] .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  html.app-shell [data-shell-panel] .stat { display: block; padding: 12px 10px; }
  html.app-shell [data-shell-panel] .stat strong { font-size: 26px; }
  html.app-shell [data-shell-panel] .stat p { font-size: 12px; line-height: 1.4; }
  html.app-shell [data-shell-panel] .lesson-content-compact { padding: 16px; }
  html.app-shell [data-shell-panel] .lesson-content-compact h2 { font-size: 19px; }
  html.app-shell [data-shell-panel] .lesson-content-compact li { line-height: 1.55; margin-bottom: 4px; }
  /* Round 3 (§2a at 360x640 with the course-language line in the header): tighter
     pathway/roadmap cards. The decorative big level letter repeats the selected stage. */
  html.app-shell [data-shell-panel] .tab-panel .roadmap-head { padding: 8px 12px; margin-bottom: 8px; }
  html.app-shell [data-shell-panel] .tab-panel .roadmap-head .big-letter { display: none; }
  html.app-shell [data-shell-panel] .tab-panel .roadmap-head h2 { font-size: 15px; line-height: 1.35; }
  html.app-shell [data-shell-panel] .tab-panel .roadmap-head p { margin-top: 2px; font-size: 12px; line-height: 1.4; }
  html.app-shell [data-shell-panel] .pathway-pager { margin-bottom: 6px; }
  html.app-shell [data-shell-panel] .pathway-stage a { padding: 10px 12px; }
  html.app-shell [data-shell-panel] .pathway-stage strong { font-size: 15px; line-height: 1.4; }
  html.app-shell [data-shell-panel] .pathway-summary { font-size: 12.5px; line-height: 1.5; }
  html.app-shell [data-shell-panel] .tab-panel .pathway .translation-help { margin: 1px 0 3px; font-size: 13px; line-height: 1.45; }
  html.app-shell [data-shell-panel] .pathway-destination { padding: 10px 12px; gap: 6px; }
  html.app-shell [data-shell-panel] .pathway-destination h3 { font-size: 15px; line-height: 1.4; margin: 0; }
  html.app-shell [data-shell-panel] .pathway-destination p { font-size: 12.5px; line-height: 1.5; }
  html.app-shell [data-shell-panel] .pathway-caveat { margin-top: 4px; font-size: 12px; line-height: 1.45; }
  /* Kontakt: inline contact links keep a ≥24px target (WCAG 2.5.8), not a 44px row each. */
  html.app-shell .kontakt-page .footer-contact a { min-height: 28px; }
  html.app-shell .kontakt-page .footer-contact h2 { margin-bottom: 2px; }
  html.app-shell .kontakt-page .footer-story p { margin-top: 4px; }
  /* The title row's teacher button is icon-only on phones (its aria-label names the text). */
  html.app-shell .shell-backbar .teacher-audio { flex: none; min-width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  html.app-shell .shell-backbar .teacher-audio > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---- Release rule (ux-2, eng-12): short viewports, zoom, open keyboard ----
   Landscape phones, 400% zoom and the on-screen keyboard leave no usable room for a
   fixed shell, so the whole shell returns to normal document flow. Tabs, pagers and the
   back button keep working. The media query covers zoom/landscape; the .shell-released
   class (set from visualViewport in app.js) covers the keyboard, which does not change
   the media query. */
@media (max-height: 560px) {
  html.app-shell, html.app-shell body { height: auto; overflow: visible; }
  html.app-shell #app { display: block; height: auto; overflow: visible; }
  html.app-shell .site-header, html.app-shell .site-footer { position: static; }
  html.app-shell #main { display: block; overflow: visible; }
  html.app-shell [data-shell-panel] { overflow: visible; padding-bottom: 20px; }
  html.app-shell [data-shell-panel][data-shell-more]::after { display: none; }
  html.app-shell [data-shell-panel] .lesson-content > .task-actions,
  html.app-shell [data-shell-panel] .task-wrap > .task-actions,
  html.app-shell [data-shell-panel] .lab-card > .lab-actions,
  html.app-shell [data-shell-panel] .lab-panel > .lesson-content > [data-lab-next] { position: static; }
}
html.app-shell:has(#app.shell-released), html.app-shell:has(#app.shell-released) body { height: auto; overflow: visible; }
html.app-shell #app.shell-released { display: block; height: auto; overflow: visible; }
html.app-shell #app.shell-released .site-header, html.app-shell #app.shell-released .site-footer { position: static; }
html.app-shell #app.shell-released #main { display: block; overflow: visible; }
html.app-shell #app.shell-released [data-shell-panel] { overflow: visible; padding-bottom: 20px; }
html.app-shell #app.shell-released [data-shell-panel][data-shell-more]::after { display: none; }
html.app-shell #app.shell-released [data-shell-panel] .lesson-content > .task-actions,
html.app-shell #app.shell-released [data-shell-panel] .task-wrap > .task-actions,
html.app-shell #app.shell-released [data-shell-panel] .lab-card > .lab-actions,
html.app-shell #app.shell-released [data-shell-panel] .lab-panel > .lesson-content > [data-lab-next] { position: static; }

/* Mixed Arabic/number chrome lines (translation mode): each line takes its direction from
   its own first strong character, so Arabic punctuation and counts sit on the right side. */
html.app-shell .roadmap-head p, html.app-shell .pulse-intro > span, html.app-shell .pathway-status,
html.app-shell .learning-pulse a > span, html.app-shell .unit-count, html.app-shell .lesson-meta > span { unicode-bidi: plaintext; }
/* Unit overview heading row (count · "Einheitsseite →"): wraps instead of pushing the link
   past the card edge on narrow phones. */
html.app-shell [data-shell-panel] .course-unit.is-overview .unit-lessons-heading { flex-wrap: wrap; gap: 0 10px; min-width: 0; }
html.app-shell [data-shell-panel] .course-unit.is-overview .unit-lessons-heading a { min-width: 0; white-space: normal; }

/* Narrow phones (≤400px): every page tab of a page fits one row (short labels, tighter
   padding; the targets stay ≥44px). After the ≤680px rules so it wins. */
@media (max-width: 400px) {
  html.app-shell .page-tabs { gap: 1px; }
  html.app-shell .page-tab { padding-inline: 5px; font-size: 12px; }
}
/* The review counter sits on the eyebrow line at the intro's top end (not floating at
   mid-height), so the heading below keeps the full width. */
html.app-shell .page-intro:has(> .review-count) { position: relative; }
html.app-shell .page-intro > .review-count { position: absolute; top: 0; inset-inline-end: 0; margin: 0; white-space: nowrap; }