/* Franz Lernatelier · Typografie 3.1
   Verbindlicher Lesbarkeitsstandard ab Woche 36/37.
   Lern- und Erklaertexte duerfen nicht mehr als Kleinschrift behandelt werden. */

:root{
  --fr-type-meta:16.5px;
  --fr-type-copy:18px;
  --fr-type-body:19px;
  --fr-type-control:18px;
  --fr-line-tight:1.38;
  --fr-line-copy:1.55;
  --fr-line-comfort:1.62;
}

@media (min-width:1600px){
  :root{
    --fr-type-meta:17px;
    --fr-type-copy:19px;
    --fr-type-body:20px;
    --fr-type-control:18.5px;
  }
}

/* ------------------------------------------------------------------
   1. Allgemeine Lesbarkeit in allen Arbeitsbereichen
   ------------------------------------------------------------------ */
.site-main,
.app-main{
  font-size:var(--fr-type-body);
}

.site-main :is(p,li,label,summary,figcaption),
.app-main :is(p,li,label,summary,figcaption){
  font-size:var(--fr-type-copy)!important;
  line-height:var(--fr-line-copy)!important;
}

.site-main small,
.app-main small{
  font-size:var(--fr-type-meta)!important;
  line-height:var(--fr-line-tight)!important;
}

.site-main :is(button,input,textarea,select),
.app-main :is(button,input,textarea,select),
.site-header :is(button,input,select),
.topbar :is(button,input,select){
  font-size:var(--fr-type-control)!important;
  line-height:1.35!important;
}

.site-main :is(input,select),
.app-main :is(input,select){min-height:48px}
.site-main textarea,.app-main textarea{line-height:1.52!important}

/* Sicherheitsklassen fuer spaeter dynamisch ergaenzte Inhalte. */
.ui-font-floor-meta.ui-font-floor-meta{font-size:var(--fr-type-meta)!important;line-height:var(--fr-line-tight)!important}
.ui-font-floor-copy.ui-font-floor-copy{font-size:var(--fr-type-copy)!important;line-height:var(--fr-line-copy)!important}
.ui-font-floor-control.ui-font-floor-control{font-size:var(--fr-type-control)!important;line-height:1.35!important}

/* ------------------------------------------------------------------
   2. Hauptseite / Shell
   ------------------------------------------------------------------ */
.brand-copy small,
.level-shortcut small,
.save-note small,
.account-chip small,
.account-chip strong,
.eyebrow,
.small-label,
.module-kicker,
.week-badge,
.state-badge,
.fact-chip,
.progress-head,
.route-card-head,
.next-meta span,
.change-note,
.training-card-time,
.week-list-progress,
.week-summary span,
.training-card small,
.quick-card small{
  font-size:var(--fr-type-meta)!important;
  line-height:var(--fr-line-tight)!important;
}

.module-description,
.next-card p,
.teacher-note p,
.section-heading p,
.week-list-copy p,
.training-card p,
.recommended-training p,
.help-steps span,
.help-note p,
.drawer>p{
  font-size:var(--fr-type-body)!important;
  line-height:var(--fr-line-copy)!important;
}

/* ------------------------------------------------------------------
   3. Niveaukarten – explizit korrigiert
   Der bisherige Fehler lag u.a. hier: .level-select-card p = 13px.
   Beschreibungen sind Lerntext und deshalb deutlich groesser.
   ------------------------------------------------------------------ */
.level-select-card,
.level-card{
  padding:19px 18px 18px!important;
  height:auto!important;
  min-height:0!important;
}

.level-select-card strong,
.level-card h3{
  font-size:clamp(20px,1.1vw,22px)!important;
  line-height:1.25!important;
}

.level-select-card p,
.level-card p{
  margin-top:9px!important;
  font-size:var(--fr-type-copy)!important;
  line-height:1.5!important;
}

.level-select-card small,
.level-card small,
.level-card>strong{
  margin-top:12px!important;
  font-size:var(--fr-type-meta)!important;
  line-height:1.35!important;
  font-weight:900!important;
}

.level-select-card .select-dot,
.level-check{
  width:30px!important;
  height:30px!important;
}

/* ------------------------------------------------------------------
   4. Woche 36 – Abschlussweg, Missionen und Hilfen
   ------------------------------------------------------------------ */
.w36-route-step{
  padding:16px 17px!important;
  gap:14px!important;
}
.w36-route-step strong{
  font-size:clamp(18px,1vw,20px)!important;
  line-height:1.3!important;
}
.w36-route-step span{
  margin-top:5px!important;
  font-size:var(--fr-type-copy)!important;
  line-height:1.5!important;
}
.w36-flow-head small{font-size:var(--fr-type-meta)!important;line-height:1.35!important}
.w36-flow-head h3{font-size:clamp(23px,1.3vw,27px)!important}
.w36-flow-body>p{font-size:var(--fr-type-copy)!important;line-height:1.55!important}
.w36-flow-role{padding:15px!important}
.w36-flow-role strong{font-size:clamp(17.5px,1vw,19px)!important;line-height:1.3!important}
.w36-flow-role span{font-size:var(--fr-type-copy)!important;line-height:1.48!important}
.w36-flow-note{font-size:var(--fr-type-copy)!important;line-height:1.5!important;padding:13px 15px!important}
.w36-flow-order{font-size:var(--fr-type-meta)!important;line-height:1.3!important;padding:7px 10px!important}

.task-position,
.task-kicker,
.task-state-badge,
.city-label,
.mission-city-badge,
.level-explanation,
.side-label,
.activity-tag,
.flash-tag,
.question-category,
.personal-badge,
.stage-label,
.trainer-label,
.recording-status,
.expert-kicker,
.expert-count,
.connector-chip,
.training-prompt-card small,
.minute-connectors span,
.passport-cover small,
.passport-number span,
.route-stop strong,
.route-stop span,
.score-number span{
  font-size:var(--fr-type-meta)!important;
  line-height:1.4!important;
}

.side-card p,
.activity-head p,
.expression-chip,
.translation,
.solution-note,
.feedback,
.scale-card b,
.scale-card span,
.flash-de,
.prep-card-head span,
.prep-fields label,
.timer-copy p,
.check-chip,
.help-panel p,
.help-step,
.dashboard-stat,
.badge,
.minute-challenge p,
.expert-head p,
.expert-card p,
.expert-prompt,
.expert-check,
.recording-head p,
.expert-fast-note,
.foundation-details summary,
.training-prompt-card p,
.diagnostic-item span,
.view-option span{
  font-size:var(--fr-type-copy)!important;
  line-height:var(--fr-line-copy)!important;
}

.activity-head h2{font-size:clamp(24px,1.35vw,29px)!important;line-height:1.2!important}
.activity-tag{padding:8px 11px!important}
.side-card{padding:19px!important;height:auto!important}
.side-card h3{font-size:clamp(20px,1.1vw,23px)!important;line-height:1.25!important}

/* ------------------------------------------------------------------
   5. Woche 37 – Missionen, Metadaten, Reserve und Training
   ------------------------------------------------------------------ */
.brand-subtitle,
.save-chip,
.level-chip small,
.hero-tags li,
.passport-head span,
.passport-step,
.passport-step b,
.passport-stamp,
.bridge-status,
.section-kicker,
.status-legend,
.level-check,
.mission-state,
.mission-meta span,
.mission-card .go,
.reserve-card b,
.mission-hero-meta span,
.activity-head small,
.activity-badge,
.step b,
.question-label,
.preview-line b,
.cue-section b,
.quality span,
.round-check,
.write-help-level{
  font-size:var(--fr-type-meta)!important;
  line-height:var(--fr-line-tight)!important;
}

.bridge p,
.section-head p,
.mission-card p,
.reserve-head p,
.reserve-card p,
.activity-body,
.activity-body p,
.activity-body li,
.activity-body .translation,
.step p,
.level-box p,
.field label,
.field small,
.phrase,
.word,
.question-choice strong,
.quality strong,
.role p,
.round p,
.drawer-section p,
.dictation-hint,
.trainer-card p,
.trainer-answer{
  font-size:var(--fr-type-copy)!important;
  line-height:var(--fr-line-copy)!important;
}

.mission-meta span{padding:7px 10px!important}
.mission-card .go{min-height:38px!important;display:inline-flex!important;align-items:center!important}
.reserve-card{padding:17px!important;height:auto!important}

/* Passport darf mit groesserer Schrift mitwachsen. */
.passport{width:min(100%,350px)!important;height:auto!important;aspect-ratio:auto!important;min-height:390px!important}
.passport-step{grid-template-columns:34px 1fr!important;gap:11px!important}
.passport-step b{width:34px!important;height:34px!important}

/* ------------------------------------------------------------------
   6. Schreibhilfen – keine Kleinschrift mehr
   ------------------------------------------------------------------ */
.write-help-status,
.writing-status{
  font-size:var(--fr-type-copy)!important;
  line-height:1.45!important;
}

.write-help-btn,
.writing-help-trigger{
  min-height:46px!important;
  padding:10px 14px!important;
  font-size:var(--fr-type-copy)!important;
}

.write-help-panel,
.writing-help-panel{padding:20px!important;border-radius:17px!important}

.write-help-head h4,
.writing-help-head h4{
  font-size:clamp(20px,1.15vw,23px)!important;
  line-height:1.25!important;
}
.write-help-head p,
.writing-help-head p{
  font-size:var(--fr-type-copy)!important;
  line-height:var(--fr-line-copy)!important;
}

.write-help-level,
.write-help-label,
.writing-help-label{
  font-size:var(--fr-type-meta)!important;
  line-height:1.4!important;
}

.write-help-steps,
.writing-help-steps{
  grid-template-columns:repeat(3,minmax(240px,1fr))!important;
  gap:13px!important;
}
.write-help-step,
.writing-help-step{
  min-height:122px!important;
  padding:16px 15px 15px 49px!important;
  font-size:var(--fr-type-copy)!important;
  line-height:1.52!important;
}
.write-help-step strong,
.writing-help-step strong{
  font-size:clamp(18px,1vw,20px)!important;
  line-height:1.3!important;
}
.write-help-step b,
.writing-help-step b{
  width:30px!important;height:30px!important;font-size:16px!important;
}

.write-help-chip,
.write-help-word,
.write-help-example-toggle,
.writing-insert-chip,
.writing-clue-chip,
.writing-example-toggle,
.writing-guide-btn{
  min-height:43px!important;
  padding:9px 12px!important;
  font-size:var(--fr-type-copy)!important;
  line-height:1.35!important;
}

.write-help-example,
.writing-example{
  padding:14px 15px!important;
  font-size:var(--fr-type-copy)!important;
  line-height:var(--fr-line-copy)!important;
}

.write-help-check li,
.writing-checklist li{
  min-height:44px!important;
  font-size:var(--fr-type-copy)!important;
  line-height:1.45!important;
}

.writing-activity-guide{padding:18px 19px!important;gap:15px!important}
.writing-guide-copy strong{font-size:clamp(18px,1vw,20px)!important}
.writing-guide-copy span{font-size:var(--fr-type-copy)!important;line-height:var(--fr-line-copy)!important}

/* ------------------------------------------------------------------
   7. Hoeren und Training
   ------------------------------------------------------------------ */
.listen-card .quiz-options strong,
.listen-card [id^="listenText-"],
.dictation-stage p,
.reaction-stage p,
.training-prompt-card p,
.trainer-card p{
  font-size:var(--fr-type-copy)!important;
  line-height:var(--fr-line-comfort)!important;
}

/* ------------------------------------------------------------------
   8. Kompakte Metaelemente: mindestens 16 px, aber visuell weiterhin sekundär
   ------------------------------------------------------------------ */
.meta-chip,
.status-pill,
.question-category,
.personal-badge,
.activity-tag,
.flash-tag,
.stage-label,
.trainer-label,
.route-stop span,
.route-stop strong,
.passport-cover small,
.score-number span{
  font-size:var(--fr-type-meta)!important;
  line-height:1.35!important;
}

/* Dekorative Elemente duerfen kompakt bleiben. */
.visual-number,.passport-stamp,.route-dot,.stop-dot,.task-number,.mission-number,.next-number,.level-symbol,.brand-mark{
  line-height:1!important;
}

/* Groessere Schrift darf das Layout wachsen lassen. */
.mission-card,.reserve-card,.activity-card,.side-card,.week-list-card,.level-select-card,.level-card{
  height:auto!important;
}

@media (max-width:1050px){
  .write-help-steps,.writing-help-steps{grid-template-columns:1fr!important}
  .write-help-step,.writing-help-step{min-height:0!important}
}

@media (max-width:760px){
  :root{
    --fr-type-meta:16px;
    --fr-type-copy:17.5px;
    --fr-type-body:18px;
    --fr-type-control:17.5px;
  }
  .level-select-card,.level-card{padding:17px!important}
}

/* =====================================================================
   ANSICHT 4.0 · GROSSE SCHRIFT + VOLLE ARBEITSBREITE
   2026-09-05
   ---------------------------------------------------------------------
   1. «Grössere Schrift» ist ein echter, globaler Darstellungsmodus.
   2. Arbeitsseiten nutzen die verfügbare Fensterbreite konsequent.
   3. Lange Lesetexte bleiben trotzdem auf angenehme Zeilenlängen begrenzt.
   ===================================================================== */

/* ---------- Volle Arbeitsbreite: Hauptseite und alle Wochen ---------- */
.header-inner,
.site-main,
.app-main,
.task-shell{
  width:100%!important;
  max-width:none!important;
}

.header-inner{
  padding-left:clamp(16px,1.5vw,30px)!important;
  padding-right:clamp(16px,1.5vw,30px)!important;
}

.site-main,
.app-main{
  margin-left:0!important;
  margin-right:0!important;
  padding-left:clamp(14px,1.45vw,28px)!important;
  padding-right:clamp(14px,1.45vw,28px)!important;
}

.topbar{
  padding-left:clamp(14px,1.45vw,28px)!important;
  padding-right:clamp(14px,1.45vw,28px)!important;
}

.week-hero,
.start-row,
.level-section,
.quick-section,
.weeks-list,
.training-grid,
.hero,
.bridge,
.level-strip,
.mission-grid,
.reserve-band,
.mission-shell,
.training-hero,
.trainer-layout,
.selection-hero,
.path-hero,
.tour-board,
.route-map-card,
.passport-card,
.training-layout,
.task-card{
  width:100%!important;
  max-width:none!important;
}

/* Wo der Bildschirm breiter wird, soll Inhalt sinnvoll mitwachsen. */
@media (min-width:1450px){
  .week-hero{grid-template-columns:minmax(0,1.12fr) minmax(500px,.88fr)!important}
  .week-hero-copy{padding-left:clamp(44px,3vw,64px)!important;padding-right:clamp(44px,3vw,64px)!important}
  .hero{grid-template-columns:minmax(0,1.45fr) minmax(390px,.55fr)!important}
  .hero-copy{padding-left:clamp(44px,3vw,64px)!important;padding-right:clamp(44px,3vw,64px)!important}
  .task-content{grid-template-columns:minmax(0,1.72fr) minmax(360px,.58fr)!important}
  .trainer-layout{grid-template-columns:minmax(0,1.55fr) minmax(360px,.45fr)!important}
}

/* Volle Breite ja, aber keine endlosen Textzeilen. */
.module-description,
.hero .lead,
.bridge p,
.mission-hero p,
.training-hero p,
.activity-head p,
.goal-box p,
.side-card p,
.teacher-note p,
.next-card p,
.section-heading p,
.drawer>p,
.drawer-section p{
  max-width:82ch;
}

/* ---------- «Grössere Schrift» – sichtbarer Unterschied auf ALLEN Seiten ---------- */
body.view-large{
  --fr-type-meta:18.5px;
  --fr-type-copy:21px;
  --fr-type-body:22px;
  --fr-type-control:20px;
  --ui-type-meta:18.5px;
  --ui-type-small:21px;
  --ui-type-body:22px;
  --ui-type-control:20px;
  --ui-type-help:21px;
  --ui-type-help-title:24px;
  font-size:22px!important;
}

/* Hauptnavigation / Kopfzeilen wachsen mit, ohne klobig zu werden. */
body.view-large .brand-copy strong{font-size:23px!important}
body.view-large .brand-title{font-size:21px!important}
body.view-large .nav-item{font-size:19px!important;min-height:52px!important;padding:11px 15px!important}
body.view-large .round-button{width:50px!important;height:50px!important}
body.view-large .level-shortcut{min-height:50px!important;padding:8px 14px!important}
body.view-large .account-chip{min-height:50px!important}
body.view-large .top-action,
body.view-large .level-chip{min-height:50px!important;padding:10px 15px!important;font-size:19px!important}

/* Hauptseite */
body.view-large .plain-heading h1{font-size:clamp(48px,5.5vw,74px)!important}
body.view-large .plain-heading p{font-size:21px!important;line-height:1.5!important}
body.view-large .week-hero h2{font-size:clamp(58px,7.5vw,92px)!important}
body.view-large .module-subtitle{font-size:27px!important}
body.view-large .next-card h2,
body.view-large .teacher-note h2{font-size:28px!important}
body.view-large .section-heading h2{font-size:clamp(37px,2.4vw,44px)!important}
body.view-large .training-card h2,
body.view-large .recommended-training h2{font-size:28px!important}

/* Woche 37 */
body.view-large .hero h1{font-size:clamp(48px,5.8vw,76px)!important}
body.view-large .hero .lead{font-size:24px!important}
body.view-large .bridge h2{font-size:28px!important}
body.view-large .section-head h2{font-size:clamp(36px,2.3vw,42px)!important}
body.view-large .level-card h3{font-size:24px!important}
body.view-large .mission-card h3{font-size:28px!important}
body.view-large .mission-hero h1{font-size:clamp(39px,4.5vw,56px)!important}
body.view-large .activity-head h2{font-size:clamp(28px,1.7vw,33px)!important}
body.view-large .trainer-card h2{font-size:30px!important}
body.view-large .trainer-prompt{font-size:25px!important}
body.view-large .drawer-head h2{font-size:27px!important}
body.view-large .drawer-section h3{font-size:22px!important}

/* Woche 36 */
body.view-large .selection-hero h1,
body.view-large .path-hero h1{font-size:clamp(48px,5.8vw,76px)!important}
body.view-large .selection-hero .lead,
body.view-large .path-copy p{font-size:23px!important;line-height:1.5!important}
body.view-large .task-banner h1{font-size:clamp(38px,4.5vw,54px)!important}
body.view-large .task-main h2{font-size:32px!important}
body.view-large .side-card h3{font-size:24px!important}
body.view-large .training-copy h1{font-size:clamp(46px,5vw,68px)!important}
body.view-large .training-copy p{font-size:22px!important}
body.view-large .trainer-card h2{font-size:30px!important}

/* Hilfen müssen im Grossschriftmodus wirklich gross werden. */
body.view-large .write-help-step,
body.view-large .writing-help-step,
body.view-large .write-help-head p,
body.view-large .writing-help-head p,
body.view-large .write-help-chip,
body.view-large .writing-insert-chip,
body.view-large .write-help-word,
body.view-large .writing-clue-chip,
body.view-large .write-help-example,
body.view-large .writing-example,
body.view-large .write-help-check li,
body.view-large .writing-checklist li{
  font-size:21px!important;
  line-height:1.55!important;
}
body.view-large .write-help-head h4,
body.view-large .writing-help-head h4{font-size:24px!important}

/* Grosse Schrift darf Karten hoeher machen, nie wieder Text verkleinern. */
body.view-large :is(.level-card,.level-select-card,.mission-card,.reserve-card,.activity-card,.side-card,.week-list-card,.trainer-card){
  height:auto!important;
  min-height:0!important;
}

/* Auf sehr breiten Displays praktisch bis an den Rand, mit ruhigem Randabstand. */
@media (min-width:1900px){
  .site-main,.app-main{padding-left:30px!important;padding-right:30px!important}
  .header-inner,.topbar{padding-left:30px!important;padding-right:30px!important}
}

/* Mobil bleibt die Lesbarkeit hoch, ohne horizontales Scrollen. */
@media (max-width:760px){
  .site-main,.app-main{padding-left:12px!important;padding-right:12px!important}
  body.view-large{
    --fr-type-meta:17px;
    --fr-type-copy:18px;
    --fr-type-body:19px;
    --fr-type-control:18px;
    --ui-type-meta:17px;
    --ui-type-small:18px;
    --ui-type-body:19px;
    --ui-type-control:18px;
    --ui-type-help:18px;
  }
}