/*
 * FitStaff Akademie — Globales Kurzversions-CSS (Reveal.js)
 * /courses/shared/css/kurz-mobile.css
 * ─────────────────────────────────────────────────────────────
 * Gilt für ALLE Kurzversions-Module aller Kurse.
 * Wird von route.ts automatisch injiziert — kein manuelles Einbinden nötig.
 *
 * Löst:
 *  - Video-Kreis fixed oben rechts nimmt auf Mobile bis 62% der Breite →
 *    Content stirbt → Video wird unten rechts als Mini-Kreis positioniert
 *  - Mod 2 & 4: video-shell { display:none } auf ≤480px → wird erzwungen
 *  - Mod 3: video-container position:relative → wird auf fixed zurückgesetzt
 *  - Typografie, Grids, Cards responsiv
 */


/* ══════════════════════════════════════════════════════════
   ≤ 900px  Tablet / kleines Desktop
   ══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  :root {
    --stage-right: clamp(16px, 4vw, 32px)   !important;
    --stage-left:  clamp(16px, 4vw, 28px)   !important;
    --stage-top:   clamp(64px, 10vh, 96px)  !important;
    --video-size:  clamp(110px, 15vw, 150px) !important;
  }

  .reveal .slides {
    padding-top:    var(--stage-top)   !important;
    padding-right:  var(--stage-right) !important;
    padding-left:   var(--stage-left)  !important;
    padding-bottom: 20px               !important;
  }

  /* Video-Shell: fixed unten rechts (überschreibt Mod 2 position:relative+margin:auto
     und Mod 4 display:none) */
  .video-shell {
    position:       fixed   !important;
    top:            auto    !important;
    bottom:         18px    !important;
    right:          14px    !important;
    left:           auto    !important;
    margin:         0       !important;
    width:          auto    !important;
    max-width:      none    !important;
    z-index:        1000    !important;
    display:        flex    !important;
    flex-direction: column  !important;
    align-items:    center  !important;
    gap:            6px     !important;
    -webkit-tap-highlight-color: rgba(116,150,172,0.12);
  }

  /* Video-Container: Kreis (überschreibt Mod 3 eigenes position:relative) */
  .video-container {
    position:      fixed   !important;
    top:           auto    !important;
    bottom:        18px    !important;
    right:         14px    !important;
    left:          auto    !important;
    margin:        0       !important;
    width:         var(--video-size) !important;
    height:        var(--video-size) !important;
    border-radius: 50%     !important;
    overflow:      hidden  !important;
    aspect-ratio:  unset   !important;
  }
  .video-container video {
    width:         100%    !important;
    height:        100%    !important;
    object-fit:    cover   !important;
    border-radius: 0       !important;
  }

  .logo-container     { display: block !important; }
  .logo-container img { width: clamp(90px, 14vw, 160px) !important; }
  .video-label        { font-size: 0.58em !important; padding: 5px 10px !important; }

  /* Typografie */
  .reveal h1 { font-size: clamp(1.8rem, 5vw,   3.3rem)  !important; }
  .reveal h2 { font-size: clamp(1.3rem, 3.8vw, 2.2rem)  !important; }
  .reveal h3 { font-size: clamp(1.05rem, 3vw,  1.45rem) !important; }
  .reveal p, .reveal li, .reveal blockquote {
    font-size: clamp(0.88rem, 2.2vw, 1.08rem) !important;
  }

  /* Grids einspaltig */
  .intro-grid, .two-col-grid, .chain-flow {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .chain-step:not(:last-child)::after {
    content: "↓" !important;
    right: 50% !important; top: auto !important;
    bottom: -14px !important; transform: translateX(50%) !important;
  }
  .pillar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .moment-grid, .moment-grid.moment-grid--two,
  .warning-grid, .process-list {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }
  .moment-connector { display: none !important; }
}


/* ══════════════════════════════════════════════════════════
   ≤ 600px  Mobile
   ══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  :root {
    --stage-right:  14px !important;
    --stage-left:   14px !important;
    --stage-top:    56px !important;
    --stage-bottom: 80px !important;
    --video-size:   84px !important;
  }

  .video-shell {
    bottom: 12px !important;
    right:  12px !important;
    gap:    0    !important;
    display: flex !important;
  }
  .video-container {
    width:        84px  !important;
    height:       84px  !important;
    border-width: 4px   !important;
    aspect-ratio: unset !important;
    animation: fsVideoRing 4.5s ease-in-out infinite;
  }
  @keyframes fsVideoRing {
    0%, 100% { box-shadow: 0 6px 20px rgba(28,36,75,.24); }
    50%      { box-shadow: 0 6px 20px rgba(28,36,75,.24), 0 0 0 5px rgba(116,150,172,.20); }
  }

  .video-label { display: none !important; }

  .logo-container {
    display: block !important;
    top: 8px !important; left: 10px !important;
  }
  .logo-container img { width: clamp(70px, 20vw, 110px) !important; }

  /* Typografie */
  .reveal h1 { font-size: clamp(1.5rem, 6.5vw, 2.4rem)  !important; }
  .reveal h2 { font-size: clamp(1.15rem, 5vw, 1.75rem)  !important; }
  .reveal h3 { font-size: clamp(1rem, 4vw, 1.3rem)      !important; }
  .reveal p, .reveal li, .reveal blockquote {
    font-size: clamp(0.86rem, 3.4vw, 1rem) !important;
    line-height: 1.52 !important;
  }
  .hero-slide-center h1 { font-size: clamp(1.75rem, 7vw, 2.8rem) !important; }
  .hero-slide-center .hero-subtitle { font-size: clamp(1rem, 3.5vw, 1.25rem) !important; }

  /* Cards */
  .content-card, .quote-card, .statement-card,
  .case-card, .image-card, .hero-title {
    padding: 16px 14px !important;
    border-radius: 18px !important;
  }

  /* Komponenten */
  .eyebrow { font-size: 0.52em !important; padding: 5px 10px !important; margin-bottom: 10px !important; }
  .simple-list li { margin-bottom: 9px !important; gap: 9px !important; }
  .simple-list li::before { flex: 0 0 22px !important; width: 22px !important; height: 22px !important; }
  .quiz-button { width: 100% !important; padding: 13px 18px !important; font-size: 0.88em !important; }
  .impact-number { font-size: clamp(2.2rem, 11vw, 3.8rem) !important; }
  .impact-subline { font-size: clamp(0.92rem, 3.5vw, 1.25rem) !important; }
  .stat-number { font-size: clamp(2rem, 10vw, 3.4rem) !important; }
  .quote-stage-image { width: 160px !important; max-width: 160px !important; }
  .quote-stage-text { font-size: clamp(1.05rem, 4vw, 1.5rem) !important; }
  .editorial-quote-text { font-size: clamp(1rem, 4vw, 1.4rem) !important; }
  .hygeia-image { max-width: 180px !important; }
  .shield-stage img { max-width: 240px !important; }
  .aha-image { max-width: 240px !important; }
  .aha-statement { font-size: clamp(1rem, 3.8vw, 1.35rem) !important; }
  .big-statement { font-size: clamp(1rem, 3.8vw, 1.4rem) !important; line-height: 1.3 !important; }
  .case-image { width: min(260px, 80vw) !important; max-width: min(260px, 80vw) !important; }
  .module-end-subtitle { white-space: normal !important; font-size: 0.95em !important; }
  .chain-step { padding: 14px 12px !important; min-height: unset !important; }
  .chain-step:not(:last-child)::after {
    content: "↓" !important; right: 50% !important;
    bottom: -12px !important; top: auto !important;
    transform: translateX(50%) !important;
  }
  .moment-card { min-height: unset !important; padding: 14px 12px !important; }
  .moment-card h3 { font-size: 0.9rem !important; }
  .moment-card p { font-size: 0.76rem !important; }
  .warning-item strong { font-size: 0.8rem !important; }
  .warning-item span { font-size: 0.72rem !important; }
  .process-step { padding: 10px 12px !important; min-height: unset !important; }
  .process-step p { font-size: 0.68rem !important; }
  .case-analysis p { font-size: 0.78rem !important; }
  .framework-intro p { font-size: 0.9rem !important; }
  .pill-lines { flex-direction: column !important; gap: 7px !important; }
  .pill-line { padding: 9px 13px !important; }
  .blockquote { padding: 12px 14px !important; border-left-width: 4px !important; }
  .auto-animate-wrapper { height: 150px !important; margin-top: 16px !important; }
  .auto-animate-box { width: 68px !important; height: 68px !important; margin: 5px !important; }
  .modul-divider { width: 160px !important; }
  /* Performance: Animationen pausieren */
  .confetti-piece { display: none !important; }
  .floating-figure, .hygeia-image, .shield-image {
    animation-play-state: paused !important;
  }
}


/* ══════════════════════════════════════════════════════════
   ≤ 380px  Sehr klein (iPhone SE, ältere Android)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  :root {
    --stage-right: 12px !important;
    --stage-left:  12px !important;
    --stage-top:   52px !important;
    --video-size:  72px !important;
  }
  .video-container    { width: 72px !important; height: 72px !important; border-width: 3px !important; }
  .logo-container img { width: 68px !important; }
  .reveal h1 { font-size: clamp(1.3rem, 7vw,   1.9rem)  !important; }
  .reveal h2 { font-size: clamp(1.05rem, 5.5vw, 1.5rem) !important; }
}


/* ══════════════════════════════════════════════════════════
   Querformat Mobile (max-height ≤ 500px & max-width ≤ 900px)
   ══════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (max-width: 900px) {
  :root {
    --stage-top:    48px !important;
    --stage-bottom: 12px !important;
    --video-size:   70px !important;
  }
  .video-shell     { bottom: 8px  !important; right: 10px !important; }
  .video-container { width: 70px  !important; height: 70px !important; border-width: 3px !important; }
  .video-label     { display: none !important; }
  .reveal h1 { font-size: clamp(1.35rem, 4vh,   1.9rem)  !important; }
  .reveal h2 { font-size: clamp(1.1rem,  3.2vh, 1.55rem) !important; }
  .reveal p, .reveal li { font-size: clamp(0.8rem, 2.2vh, 0.98rem) !important; }
  .content-card, .quote-card, .statement-card, .hero-title {
    padding: 12px 14px !important;
  }
  .auto-animate-wrapper { height: 110px !important; margin-top: 8px !important; }
  .auto-animate-box     { width: 52px   !important; height: 52px !important; }
  .floating-figure, .hygeia-image, .shield-image {
    animation-play-state: paused !important;
  }
}