/*
 * FitStaff Akademie — Globales Mobile-CSS
 * /courses/shared/css/mobile.css
 * ─────────────────────────────────────────────────────────────
 * Gilt für ALLE Kurse und ALLE Module im MFA-Paket (und künftige Pakete).
 * Wird von route.ts automatisch injiziert — kein manuelles Einbinden nötig.
 *
 * Bild-Logik (zentrale Regel):
 *  - Desktop (≥ 901px): Inhaltsbilder max 360px, zentriert
 *  - overview-card img: max 160px, zentriert (Erreger-Karten etc.)
 *  - Mobile (≤ 900px): alle Bilder max 100% des Containers
 *  - Logo (.header-logo): immer 120px, nie skaliert
 *
 * ─────────────────────────────────────────────────────────────
 * EINZIGE Mobile-Quelle für Langversionen.
 * course.css enthält keine Mobile-Breakpoints (bereinigt 2026-04-21).
 * ─────────────────────────────────────────────────────────────
 */


/* ══════════════════════════════════════════════════════════════
   OVERFLOW-PRÄVENTION — gilt immer, alle Breiten
   clip erhält position:sticky; hidden würde es brechen.
   ══════════════════════════════════════════════════════════════ */

html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
  max-width: 100vw !important;
}

/* Alle breiten Container auf 100% begrenzen (.card ausgenommen - hat eigene max-width in course.css) */
.brand-bar,
.brand-bar__inner,
.page-header,
.header-inner,
.page-wrap,
.layout,
.hero-panel,
.content-section,
.cta-section,
.finish-block {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* .card auf Mobile 100% breit, auf Desktop via course.css begrenzt */
@media (max-width: 900px) {
  .card {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   LOGO — immer fixe Größe, nie skaliert
   ══════════════════════════════════════════════════════════════ */

.brand-bar img,
.brand-bar__inner img,
.header-logo {
  max-width: 120px !important;
  width: 120px !important;
  height: auto !important;
  margin: 0 !important;
  display: block !important;
}


/* ══════════════════════════════════════════════════════════════
   BILDER DESKTOP (≥ 901px)
   Inhaltsbilder: max 360px, zentriert.
   overview-card: max 160px (Erreger-Karten, Modul 2).
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 901px) {

  /* Alle Inhaltsbilder: begrenzt und zentriert */
  .card img,
  .hero-panel img,
  .content-section img,
  .why-box img,
  .contrast-section img,
  .intro-image,
  .insurance-img,
  .insurance-image-wrap img,
  .small-image-wrap img,
  .mini-image-wrap img {
    max-width: 360px !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Ausnahme: overview-card (Erreger-Karten) — kleiner */
  .overview-card img {
    max-width: 160px !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 14px !important;
  }

  /* Logo nie überschreiben */
  .brand-bar img,
  .brand-bar__inner img,
  .header-logo {
    max-width: 120px !important;
    width: 120px !important;
    margin: 0 !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   BILDER MOBILE (≤ 900px)
   Alle Bilder: max 100% des Containers, zentriert.
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

  /* Alle Inhaltsbilder: nie breiter als Container */
  .card img,
  .hero-panel img,
  .content-section img,
  .why-box img,
  .contrast-section img,
  .intro-image,
  .insurance-img,
  .insurance-image-wrap img,
  .small-image-wrap img,
  .mini-image-wrap img,
  .impact-card img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* overview-card img: auf 140px begrenzen — nie breiter als die Card */
  .overview-card img {
    max-width: 140px !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 12px !important;
  }

  /* overview-card und overview-grid: nie breiter als Container */
  .overview-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .overview-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Logo nie überschreiben */
  .brand-bar img,
  .brand-bar__inner img,
  .header-logo {
    max-width: 120px !important;
    width: 120px !important;
    margin: 0 !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   BILD-WRAPPER — zentriert, kein Overflow
   ══════════════════════════════════════════════════════════════ */

.insurance-image-wrap,
.small-image-wrap,
.mini-image-wrap {
  text-align: center;
  margin: 16px 0;
  overflow: hidden;
  width: 100%;
}


/* ══════════════════════════════════════════════════════════════
   TYPOGRAFIE-HILFSMITTEL — immer
   ══════════════════════════════════════════════════════════════ */

/* h2 + h3 zentrieren wie global definiert */
.content-section h2,
.card > h2 {
  text-align: center !important;
}

/* h3 zentrieren wie h2 */
.content-section h3,
.card > h3 {
  text-align: center !important;
}


/* ══════════════════════════════════════════════════════════════
   ≤ 900px  Sidebar ausblenden, Layout einspaltig
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .sidebar {
    display: none !important;
  }
  .card {
    padding: 20px 16px !important;
  }
  .page-wrap {
    padding: 0 12px !important;
    margin-top: 16px !important;
    width: 100% !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   ≤ 768px  Mobile-Typografie & Layout
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  .page-header {
    padding: 16px 14px !important;
  }
  .header-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .header-logo  { width: 120px !important; }
  .header-badge { display: none !important; }
  .header-title {
    font-size: clamp(1.25rem, 5vw, 1.75rem) !important;
    word-break: break-word !important;
  }

  .brand-bar__inner {
    padding: 10px 14px !important;
    width: 100% !important;
  }

  .page-wrap {
    padding: 0 10px !important;
    margin-top: 12px !important;
  }

  .card {
    padding: 16px 14px !important;
    border-radius: 16px !important;
  }

  .hero-panel {
    padding: 18px 14px !important;
    border-radius: 16px !important;
  }
  .hero-title {
    font-size: clamp(1.2rem, 5vw, 1.65rem) !important;
  }

  h2, .content-section h2 {
    font-size: clamp(1.1rem, 4.5vw, 1.4rem) !important;
  }
  h3, .content-section h3 {
    font-size: clamp(1rem, 4vw, 1.15rem) !important;
  }
  p, li {
    font-size: clamp(0.88rem, 3.5vw, 0.96rem) !important;
    line-height: 1.65 !important;
  }

  p, .hero-lead, .section-intro, blockquote,
  ul.icon-list, .why-risk-list, .attitude-list {
    max-width: 100% !important;
  }

  .goal-columns,
  .overview-grid,
  .impact-grid,
  .concept-compare,
  .attitude-grid,
  ul.icon-grid,
  .role-chips,
  .agent-grid,
  .chain-grid,
  .process-grid,
  .two-col {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  blockquote {
    padding: 14px 16px !important;
    border-radius: 10px !important;
  }

  .cta-section {
    padding: 20px 14px !important;
    border-radius: 16px !important;
  }
  .cta-title {
    font-size: clamp(1.05rem, 4vw, 1.3rem) !important;
  }

  hr { margin: 20px 0 !important; }
}


/* ══════════════════════════════════════════════════════════════
   ≤ 480px  Klein-Mobile (Pixel 8, iPhone SE)
   Edge-to-edge: keine Card-Ränder, kein Radius, kein Schatten.
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

  .page-wrap {
    padding: 0 6px !important;
    margin-top: 8px !important;
  }

  .card {
    padding: 14px 10px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
  }

  .page-header {
    padding: 14px 10px 12px !important;
  }
  .header-title {
    font-size: clamp(1.1rem, 5.5vw, 1.4rem) !important;
  }
  .header-logo { width: 96px !important; }

  .hero-panel {
    padding: 14px 10px !important;
    border-radius: 12px !important;
  }
  .hero-title { font-size: 1.15rem !important; }

  p, li {
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
  }

  .cta-section {
    padding: 16px 10px !important;
    border-radius: 12px !important;
  }
  .cta-title { font-size: 1rem !important; }

  blockquote { padding: 12px 12px !important; }

  hr { margin: 16px 0 !important; }

  .agent-grid,
  .chain-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   Querformat Mobile (max-height ≤ 500px)
   ══════════════════════════════════════════════════════════════ */

@media (max-height: 500px) and (max-width: 900px) {
  .page-header { padding: 12px 14px !important; }
  .header-title { font-size: 1.1rem !important; }
  .hero-panel   { padding: 12px 14px !important; }
}


/* ════════════════════════════════════════════════════════════
   impact-card auf Mobile kompakter — Wert zentriert statt
   großer Block mit zentriertem Titel und linksbündigem Wert
   ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .impact-grid .impact-card {
    padding: 14px 16px !important;
    gap: 4px !important;
    align-items: center !important;
    text-align: center !important;
  }
  .impact-grid .impact-card h3 {
    text-align: center !important;
    margin: 0 !important;
  }
  .impact-grid .impact-card p {
    text-align: center !important;
    margin: 4px 0 0 !important;
    font-weight: 600 !important;
    color: var(--accent-dark) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   overview-card auf Mobile kompakter — Nummer links, rechts Titel
   und (falls vorhanden) Beschreibungstext darunter. Spart Höhe,
   ohne den Fließtext zu zerquetschen. impact-card bleibt unberührt.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .overview-card {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    column-gap: 14px !important;
    row-gap: 4px !important;
    align-items: center !important;
    padding: 16px 16px !important;
  }
  .overview-card .overview-number {
    grid-column: 1 !important;
    width: 32px !important;
    height: 32px !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
    font-size: 0.95em !important;
  }
  .overview-card h3 {
    grid-column: 2 !important;
    margin: 0 !important;
    font-size: 1rem !important;
    text-align: left !important;
  }
  .overview-card p {
    grid-column: 2 !important;
    margin: 0 !important;
    text-align: left !important;
  }
}