// Mobile FamilienKalender screens. Designed for ~390px iPhone-class width.
// Three primary screens are previewed side-by-side in a row of phone frames:
// 1) Home (Heute / Nächste Übergabe / Diese Woche / Offene Bestätigungen / Monatsstatistik)
// 2) Kalender Monat → Tagesdetail Bottom Sheet
// 3) Bestätigungen / Änderung vorschlagen

function MobilePreview() {
  return (
    <div className="mobile-stage">
      <div className="mobile-intro">
        <div>
          <div className="page-title" style={{fontSize: 26}}>Mobile · FamilienKalender</div>
          <div style={{fontSize: 13.5, color: 'var(--ink-500)', marginTop: 6, maxWidth: 540, lineHeight: 1.5}}>
            Unterwegs zählt nur: <b>Wo ist mein Kind heute? Wer hat es morgen? Wann ist Übergabe?</b> Die Startseite beantwortet das in 5 Sekunden — alles andere folgt darunter.
          </div>
        </div>
        <div className="mobile-legend">
          <span className="ml-chip"><span className="ml-sw m"/>Mutter</span>
          <span className="ml-chip"><span className="ml-sw v"/>Vater</span>
          <span className="ml-chip"><span className="ml-sw u"/>Übergabe</span>
          <span className="ml-chip"><span className="ml-sw f"/>Ferien</span>
        </div>
      </div>

      {/* Hero: featured Home screen + caption */}
      <div className="mobile-hero-row">
        <MobilePhone label="Startseite — der wichtigste Screen" hero>
          <MobileHome />
        </MobilePhone>
        <div className="mobile-hero-side">
          <div className="mhs-eyebrow">Mobile Home</div>
          <div className="mhs-title">In 5 Sekunden orientiert</div>
          <ul className="mhs-list">
            <li>
              <span className="mhsl-ic"><IcHome size={13}/></span>
              <div>
                <b>Heute · wo ist Liam?</b>
                <p>Klare Antwort als erstes Element. Strip zeigt die ganze Woche.</p>
              </div>
            </li>
            <li>
              <span className="mhsl-ic"><IcSwap size={13}/></span>
              <div>
                <b>Nächste Übergabe</b>
                <p>Wann · wer holt · wo. Mit Bestätigungs-Status.</p>
              </div>
            </li>
            <li>
              <span className="mhsl-ic alert"><IcAlertCircle size={13} stroke={2}/></span>
              <div>
                <b>Offene Bestätigungen</b>
                <p>Was wartet auf Sie. Direkt aus der Liste bestätigen.</p>
              </div>
            </li>
            <li>
              <span className="mhsl-ic"><IcCalendar size={13}/></span>
              <div>
                <b>Diese Woche</b>
                <p>Kompakter 7-Tage-Streifen mit Mutter/Vater-Verteilung.</p>
              </div>
            </li>
            <li>
              <span className="mhsl-ic"><IcSun size={13}/></span>
              <div>
                <b>Monatsstatistik</b>
                <p>Tage M/V, Übergaben, Ferien — sofort sichtbar.</p>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <div className="mobile-row-title">Weitere Screens</div>
      <div className="mobile-row">
        <MobilePhone label="Kalender · Tagesdetail-Sheet">
          <MobileCalendar withSheet />
        </MobilePhone>
        <MobilePhone label="Diese Woche · Agenda">
          <MobileWeek />
        </MobilePhone>
        <MobilePhone label="Bestätigungen">
          <MobileConfirm />
        </MobilePhone>
        <MobilePhone label="Änderung vorschlagen · Schritt 2/3">
          <MobileConfirm withChangeSheet />
        </MobilePhone>
      </div>

      <div className="mobile-row" style={{marginTop: 20}}>
        <MobilePhone label="Übergabe-Sheet · Wer · Wann · Wo">
          <MobileCalendar withHandoverSheet />
        </MobilePhone>
        <MobilePhone label="Ferien & Feiertage">
          <MobileFerien />
        </MobilePhone>
      </div>
    </div>
  );
}

function MobilePhone({ children, label, hero }) {
  return (
    <div className={`mp-wrap ${hero ? 'hero' : ''}`}>
      <div className="mp-frame">
        <div className="mp-notch"></div>
        <div className="mp-status">
          <span>9:41</span>
          <span style={{display:'inline-flex', gap: 4, alignItems:'center'}}>
            <svg width="14" height="9" viewBox="0 0 14 9" fill="none"><path d="M1 5l1.5 1.5L1 8M5 3l1.5 1.5L5 6M9 1l1.5 1.5L9 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
            <svg width="14" height="9" viewBox="0 0 14 9" fill="none"><rect x="0.5" y="0.5" width="13" height="8" rx="2" stroke="currentColor"/><rect x="2" y="2" width="9" height="5" rx="1" fill="currentColor"/></svg>
          </span>
        </div>
        <div className="mp-screen">{children}</div>
        <div className="mp-home"/>
      </div>
      <div className="mp-label">{label}</div>
    </div>
  );
}

// ---------------- HOME ----------------
function MobileHome() {
  return (
    <div className="mob-page" style={{background: 'var(--cream)'}}>
      <div className="mob-header">
        <div>
          <div className="mob-h-eyebrow">Mo. 4. Mai 2026</div>
          <div className="mob-h-title">FamilienKalender</div>
        </div>
        <div className="mob-h-actions">
          <button className="mob-icon-btn"><IcBell size={15}/><span className="mob-dot"/></button>
        </div>
      </div>

      <div className="mob-scroll">
        {/* Today hero */}
        <div className="mob-hero">
          <div className="mh-eyebrow">Heute · Liam</div>
          <div className="mh-line">ist bei <em>Mutter</em></div>
          <div className="mh-meta">
            <IcClock size={11}/> seit 08:00 · bis Fr. 17:00 Uhr
          </div>
          <div className="mh-strip">
            <div className="mhs-fill" style={{width: '20%'}}/>
            <div className="mhs-dot" style={{left: '20%'}}/>
          </div>
          <div className="mh-strip-labels">
            <span>Mo</span><span>Di</span><span>Mi</span><span>Do</span><span>Fr</span><span>Sa</span><span>So</span>
          </div>
        </div>

        {/* Next handover */}
        <div className="mob-card next-handover">
          <div className="mob-card-head">
            <div className="mch-ico" style={{background: 'var(--forest-800)', color: 'var(--paper)'}}><IcSwap size={13}/></div>
            <div className="mch-title">Nächste Übergabe</div>
            <span className="mob-pill ok"><IcCheckCircle size={10}/> Bestätigt</span>
          </div>
          <div className="nh-line">
            <div className="nh-when">
              <div className="nhw-day">Fr. 8. Mai</div>
              <div className="nhw-time">17:00 Uhr</div>
            </div>
            <div className="nh-arrow">
              <span className="nh-m">M</span>
              <span className="nh-dash"><IcSwap size={11}/></span>
              <span className="nh-v">V</span>
            </div>
          </div>
          <div className="nh-meta"><IcMapPin size={11}/> Parkplatz Bürgerpark · Vater holt ab</div>
        </div>

        {/* Open confirmations */}
        <div className="mob-card attention">
          <div className="mob-card-head">
            <div className="mch-ico" style={{background: 'var(--amber-bg)', color: 'oklch(0.5 0.13 70)'}}>
              <IcAlertCircle size={13} stroke={2}/>
            </div>
            <div className="mch-title">Offene Bestätigungen</div>
            <span className="mob-pill warn">2</span>
          </div>
          <div className="conf-item">
            <div className="ci-title">Übergabe 16.05. · Ort ändern</div>
            <div className="ci-sub">von Vater · vor 2 Tagen</div>
            <div className="ci-actions">
              <button className="mob-btn-out">Ansehen</button>
              <button className="mob-btn-in">Bestätigen</button>
            </div>
          </div>
          <div className="conf-item">
            <div className="ci-title">Tausch 20.05. · von Ihnen</div>
            <div className="ci-sub">wartet auf Vater</div>
          </div>
        </div>

        {/* This week */}
        <div className="mob-card">
          <div className="mob-card-head">
            <div className="mch-ico"><IcCalendar size={13}/></div>
            <div className="mch-title">Diese Woche</div>
            <button className="mch-link">Kalender →</button>
          </div>
          <div className="week-strip">
            {[
              { dow: 'Mo', d: 4, p: 'm', today: true },
              { dow: 'Di', d: 5, p: 'm' },
              { dow: 'Mi', d: 6, p: 'm' },
              { dow: 'Do', d: 7, p: 'm' },
              { dow: 'Fr', d: 8, p: 'u' },
              { dow: 'Sa', d: 9, p: 'v' },
              { dow: 'So', d: 10, p: 'v' },
            ].map((w, i) => (
              <div key={i} className={`ws-day p-${w.p} ${w.today ? 'today' : ''}`}>
                <div className="wsd-dow">{w.dow}</div>
                <div className="wsd-num">{w.d}</div>
              </div>
            ))}
          </div>
          <div className="week-legend">
            <span><span className="ml-sw m"/>4 × Mutter</span>
            <span><span className="ml-sw v"/>2 × Vater</span>
            <span><span className="ml-sw u"/>1 × Übergabe</span>
          </div>
        </div>

        {/* Month overview */}
        <div className="mob-card">
          <div className="mob-card-head">
            <div className="mch-ico"><IcHome size={13}/></div>
            <div className="mch-title">Mai · Verteilung</div>
            <button className="mch-link">Details</button>
          </div>
          <div className="mob-balance">
            <div className="mb-m" style={{flex: 14}}>Mutter · 14 T.</div>
            <div className="mb-v" style={{flex: 17}}>Vater · 17 T.</div>
          </div>
          <div className="mob-stats">
            <div><b>4</b><span>Übergaben</span></div>
            <div><b>6</b><span>Ferien-/Feiertage</span></div>
            <div><b>3</b><span>Aktivitäten</span></div>
          </div>
        </div>
      </div>

      <MobileBottomNav active="heute" />
    </div>
  );
}

// ---------------- CALENDAR + BOTTOM SHEET ----------------
function MobileCalendar({ withSheet, withHandoverSheet }) {
  return (
    <div className="mob-page" style={{background: 'var(--paper)'}}>
      <div className="mob-header">
        <div>
          <div className="mob-h-eyebrow">FamilienKalender</div>
          <div className="mob-h-title" style={{fontFamily: 'Instrument Serif, serif', fontSize: 21}}>Mai 2026</div>
        </div>
        <div className="mob-h-actions">
          <button className="mob-icon-btn"><IcChevronLeft size={14}/></button>
          <button className="mob-icon-btn"><IcChevronRight size={14}/></button>
        </div>
      </div>

      <div className="mob-seg">
        <button className="on">Monat</button>
        <button>Woche</button>
        <button>Liste</button>
      </div>

      <div className="mob-cal">
        <div className="mob-cal-dow">
          {['Mo','Di','Mi','Do','Fr','Sa','So'].map(d => <span key={d}>{d}</span>)}
        </div>
        <div className="mob-cal-grid">
          {/* Apr trailing */}
          {[27,28,29,30].map(d => <div key={'a'+d} className="mcd muted">{d}</div>)}
          {Array.from({length:31}, (_,i) => i+1).map(d => {
            const parent = ({1:'v',2:'v',3:'v',4:'m',5:'m',6:'m',7:'m',8:'u',9:'v',10:'v',11:'m',12:'m',13:'m',14:'m',15:'u',16:'v',17:'v',18:'m',19:'m',20:'m',21:'m',22:'u',23:'v',24:'v',25:'m',26:'m',27:'m',28:'m',29:'u',30:'v',31:'v'})[d];
            const today = d === 4;
            const sel = d === 16;
            const holiday = d >= 18 && d <= 22;
            return (
              <div key={d} className={`mcd p-${parent} ${today ? 'today' : ''} ${sel ? 'sel' : ''} ${holiday ? 'hol' : ''}`}>
                {d}
              </div>
            );
          })}
        </div>
        <div className="mob-cal-legend">
          <span><span className="ml-sw m"/>Mutter</span>
          <span><span className="ml-sw v"/>Vater</span>
          <span><span className="ml-sw u"/>Übergabe</span>
          <span><span className="ml-sw f"/>Ferien</span>
        </div>
      </div>

      {withSheet && (
        <div className="bottom-sheet open">
          <div className="bs-handle"/>
          <div className="bs-header">
            <div>
              <div className="bs-eyebrow">Tagesdetail</div>
              <div className="bs-title">Sa. 16. Mai 2026</div>
            </div>
            <button className="mob-icon-btn"><IcX size={13}/></button>
          </div>
          <div className="bs-body">
            <div className="bs-care">
              <div className="bs-care-av" style={{background: 'var(--forest-800)'}}>V</div>
              <div>
                <div className="bsc-lbl">Liam ist bei</div>
                <div className="bsc-big">Vater</div>
                <div className="bsc-sub">Ganztägig · Übernachtung beim Vater</div>
              </div>
              <span className="mob-pill ok" style={{marginLeft: 'auto'}}>Bestätigt</span>
            </div>

            <div className="bs-row">
              <div className="bsr-ic"><IcSwap size={13}/></div>
              <div className="bsr-body">
                <div className="bsr-title">Übergabe Mutter → Vater · 17:00</div>
                <div className="bsr-sub"><IcMapPin size={10}/> Parkplatz Bürgerpark · Vater holt ab</div>
              </div>
            </div>
            <div className="bs-row">
              <div className="bsr-ic terra"><IcActivity size={13}/></div>
              <div className="bsr-body">
                <div className="bsr-title">Fußballtraining · 17:00–18:30</div>
                <div className="bsr-sub">Sporthalle Offenbach · Vater bringt</div>
              </div>
            </div>

            <div className="bs-actions">
              <button className="mob-btn-out"><IcSwap size={11}/> Änderung</button>
              <button className="mob-btn-out"><IcHistory size={11}/> Verlauf</button>
              <button className="mob-btn-in"><IcCheck size={11} stroke={2.2}/> Bestätigen</button>
            </div>
          </div>
        </div>
      )}

      {withHandoverSheet && (
        <div className="bottom-sheet open">
          <div className="bs-handle"/>
          <div className="bs-header">
            <div>
              <div className="bs-eyebrow">Nächste Übergabe</div>
              <div className="bs-title">Fr. 8. Mai · 17:00 Uhr</div>
            </div>
            <button className="mob-icon-btn"><IcX size={13}/></button>
          </div>
          <div className="bs-body">
            <div className="bs-handover">
              <div className="bsh-side m">
                <div className="bsh-av">M</div>
                <div className="bsh-lbl">Mutter</div>
                <div className="bsh-sub">bringt</div>
              </div>
              <div className="bsh-arrow"><IcSwap size={16}/></div>
              <div className="bsh-side v">
                <div className="bsh-av">V</div>
                <div className="bsh-lbl">Vater</div>
                <div className="bsh-sub">holt ab</div>
              </div>
            </div>
            <div className="bs-row">
              <div className="bsr-ic"><IcMapPin size={13}/></div>
              <div className="bsr-body">
                <div className="bsr-title">Parkplatz am Bürgerpark</div>
                <div className="bsr-sub">Offenbach · Eingang Ost</div>
              </div>
              <button className="mob-icon-btn"><IcChevronRight size={13}/></button>
            </div>
            <div className="bs-row">
              <div className="bsr-ic"><IcClock size={13}/></div>
              <div className="bsr-body">
                <div className="bsr-title">17:00 Uhr</div>
                <div className="bsr-sub">Erinnerung 30 Min. vorher aktiv</div>
              </div>
            </div>
            <div className="bs-actions">
              <button className="mob-btn-out"><IcSwap size={11}/> Verschieben</button>
              <button className="mob-btn-in"><IcMapPin size={11}/> Route</button>
            </div>
          </div>
        </div>
      )}

      <MobileBottomNav active="kalender" />
    </div>
  );
}

// ---------------- BESTÄTIGUNG / CHANGE FLOW ----------------
function MobileConfirm({ withChangeSheet }) {
  return (
    <div className="mob-page" style={{background: 'var(--cream)'}}>
      <div className="mob-header">
        <div>
          <div className="mob-h-eyebrow">Wartet auf Sie · 2</div>
          <div className="mob-h-title">Bestätigungen</div>
        </div>
        <div className="mob-h-actions">
          <button className="mob-icon-btn"><IcFilter size={14}/></button>
        </div>
      </div>

      <div className="mob-tabs">
        <button className="on">Alle <span>3</span></button>
        <button>Auf Sie <span>2</span></button>
        <button>Gesendet <span>1</span></button>
      </div>

      <div className="mob-scroll">
        <div className="mob-confirm-card">
          <div className="mcc-head">
            <span className="mcc-ic" style={{background: 'var(--paper)', color: 'var(--forest-700)'}}><IcSwap size={13}/></span>
            <div style={{flex: 1, minWidth: 0}}>
              <div className="mcc-title">Übergabe 16.05.</div>
              <div className="mcc-who">von Vater · vor 2 Tagen</div>
            </div>
            <span className="mob-pill warn">Auf Sie</span>
          </div>
          <div className="mcc-diff">
            <div className="mccd-col old">
              <div className="mccd-lbl">Bisher</div>
              <div className="mccd-val">Parkplatz Bürgerpark · 17:00</div>
            </div>
            <div className="mccd-arrow">↓</div>
            <div className="mccd-col neu">
              <div className="mccd-lbl">Vorgeschlagen</div>
              <div className="mccd-val">Sporthalle Offenbach · 17:00</div>
            </div>
          </div>
          <div className="mcc-note">„Liam hat direkt Fußballtraining."</div>
          <div className="mcc-actions">
            <button className="mob-btn-out terra">Ablehnen</button>
            <button className="mob-btn-out">Gegenvorschlag</button>
            <button className="mob-btn-in"><IcCheck size={11} stroke={2.2}/> Bestätigen</button>
          </div>
        </div>

        <div className="mob-confirm-card sent">
          <div className="mcc-head">
            <span className="mcc-ic" style={{background: 'var(--paper)', color: 'var(--ink-500)'}}><IcClock size={13}/></span>
            <div style={{flex: 1, minWidth: 0}}>
              <div className="mcc-title">Tausch Wochenende 20.05.</div>
              <div className="mcc-who">von Ihnen · gestern</div>
            </div>
            <span className="mob-pill">Wartet</span>
          </div>
          <div className="mcc-line">Tausch mit 13.06. — Familienfeier.</div>
          <div className="mcc-actions">
            <button className="mob-btn-out">Erinnern</button>
            <button className="mob-btn-out terra">Zurückziehen</button>
          </div>
        </div>

        <div className="mob-confirm-card">
          <div className="mcc-head">
            <span className="mcc-ic" style={{background: 'var(--beige-100)', color: 'oklch(0.5 0.13 70)'}}><IcSun size={13}/></span>
            <div style={{flex: 1, minWidth: 0}}>
              <div className="mcc-title">Sommerferien · 2. Hälfte</div>
              <div className="mcc-who">von Vater · vor 5 Tagen</div>
            </div>
            <span className="mob-pill warn">Auf Sie</span>
          </div>
          <div className="mcc-line">26 Nächte bei Vater (27.07. – 22.08.) · Italien.</div>
        </div>
      </div>

      {withChangeSheet && (
        <div className="bottom-sheet open tall">
          <div className="bs-handle"/>
          <div className="bs-header">
            <div style={{minWidth: 0, overflow: 'hidden', flex: 1}}>
              <div className="bs-eyebrow">Änderung vorschlagen · 2/3</div>
              <div className="bs-title">Wann & wie?</div>
            </div>
            <button className="mob-icon-btn"><IcX size={13}/></button>
          </div>

          {/* Mobile stepper */}
          <div className="mob-stepper">
            <div className="ms-step done">
              <span className="ms-num"><IcCheck size={9} stroke={2.5}/></span>
              <span className="ms-lbl">Was?</span>
            </div>
            <div className="ms-line done"/>
            <div className="ms-step on">
              <span className="ms-num">2</span>
              <span className="ms-lbl">Wann?</span>
            </div>
            <div className="ms-line"/>
            <div className="ms-step">
              <span className="ms-num">3</span>
              <span className="ms-lbl">Nachricht</span>
            </div>
          </div>

          <div className="bs-body">
            <div className="mob-mini-summary">
              <span className="mms-lbl">Sie ändern</span>
              <span className="mms-val"><IcSwap size={11}/> Übergabe · Sa. 16. Mai</span>
            </div>

            <div className="mob-arrange">
              <div className="ma-card old">
                <div className="ma-lbl">Bisher · gemeinsam bestätigt</div>
                <div className="ma-val">Liam bei Vater</div>
                <div className="ma-sub">Sa. 16.05. ganztägig · 17:00 Bürgerpark</div>
              </div>
              <div className="ma-arrow">↓</div>
              <div className="ma-card neu">
                <div className="ma-lbl">Ihr Vorschlag</div>
                <div className="ma-val">Liam bei Mutter</div>
                <div className="ma-sub">Sa. 16.05. ab 12:00 · Tausch mit 23.05.</div>
              </div>
            </div>

            <div className="mob-field">
              <label>Neue Uhrzeit · Übergabe-Ort</label>
              <div className="mob-input-row">
                <div className="mob-input-pill">12:00</div>
                <div className="mob-input-pill">Bürgerpark</div>
                <div className="mob-input-pill"><IcEdit size={10}/></div>
              </div>
            </div>

            <div className="mob-field">
              <label>Tausch mit (optional)</label>
              <div className="mob-input-pill auto"><IcCheck size={10} stroke={2.2}/> Sa. 23.05. · Auto-Vorschlag</div>
            </div>

            <div className="bs-actions">
              <button className="mob-btn-out">← Zurück</button>
              <button className="mob-btn-in" style={{flex: 1.2}}>
                Weiter →
              </button>
            </div>
          </div>
        </div>
      )}

      <MobileBottomNav active="bestaetigungen" />
    </div>
  );
}

// ---------------- WEEK AGENDA ----------------
function MobileWeek() {
  const days = [
    { dow: 'Mo', dt: '4. Mai', parent: 'Mutter', today: true, items: [
      { ic: <IcClock size={11}/>, t: 'Schultag', s: '8:00 – 14:00' },
      { ic: <IcActivity size={11}/>, t: 'Klavier', s: '15:30 · zu Hause' },
    ]},
    { dow: 'Di', dt: '5. Mai', parent: 'Mutter', items: [
      { ic: <IcClock size={11}/>, t: 'Schultag', s: '8:00 – 14:00' },
    ]},
    { dow: 'Mi', dt: '6. Mai', parent: 'Mutter', items: [
      { ic: <IcClock size={11}/>, t: 'Schultag', s: '8:00 – 14:00' },
      { ic: <IcActivity size={11}/>, t: 'Schwimmen', s: '16:00 · Halle Nord' },
    ]},
    { dow: 'Do', dt: '7. Mai', parent: 'Mutter', items: [] },
    { dow: 'Fr', dt: '8. Mai', parent: 'Übergabe', handover: '17:00', items: [
      { ic: <IcSwap size={11}/>, t: 'Übergabe an Vater', s: '17:00 · Bürgerpark', accent: true },
    ]},
    { dow: 'Sa', dt: '9. Mai', parent: 'Vater', items: [] },
    { dow: 'So', dt: '10. Mai', parent: 'Vater', items: [
      { ic: <IcSparkle size={11}/>, t: 'Frühlingsfest', s: 'ganztägig' },
    ]},
  ];
  return (
    <div className="mob-page" style={{background: 'var(--cream)'}}>
      <div className="mob-header">
        <div>
          <div className="mob-h-eyebrow">Diese Woche</div>
          <div className="mob-h-title">04. – 10. Mai</div>
        </div>
        <div className="mob-h-actions">
          <button className="mob-icon-btn"><IcDownload size={14}/></button>
        </div>
      </div>

      <div className="mob-seg">
        <button>Monat</button>
        <button className="on">Woche</button>
        <button>Liste</button>
      </div>

      <div className="mob-scroll" style={{paddingTop: 8}}>
        {days.map((d, i) => (
          <div key={i} className={`mob-agenda-day p-${d.parent === 'Mutter' ? 'm' : d.parent === 'Vater' ? 'v' : 'u'} ${d.today ? 'today' : ''}`}>
            <div className="mad-rail">
              <div className="madr-dow">{d.dow}</div>
              <div className="madr-d">{d.dt.split(' ')[0]}</div>
              <span className="madr-pill">{d.parent}</span>
            </div>
            <div className="mad-body">
              {d.items.length === 0 ? (
                <div className="mad-empty">Bei {d.parent} · keine Termine</div>
              ) : d.items.map((it, j) => (
                <div key={j} className={`mad-item ${it.accent ? 'accent' : ''}`}>
                  <span className="madi-ic">{it.ic}</span>
                  <span className="madi-t">{it.t}</span>
                  <span className="madi-s">{it.s}</span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>

      <MobileBottomNav active="kalender"/>
    </div>
  );
}

// ---------------- FERIEN MOBILE ----------------
function MobileFerien() {
  return (
    <div className="mob-page" style={{background: 'var(--cream)'}}>
      <div className="mob-header">
        <div>
          <div className="mob-h-eyebrow">2026</div>
          <div className="mob-h-title">Ferien & Feiertage</div>
        </div>
        <div className="mob-h-actions">
          <button className="mob-icon-btn"><IcPlus size={15} stroke={2}/></button>
        </div>
      </div>

      <div className="mob-scroll">
        <div className="mob-card">
          <div className="mob-card-head">
            <div className="mch-title" style={{fontSize: 13}}>Balance 2026</div>
            <span style={{fontSize: 11, color: 'var(--ink-500)'}}>52 Nächte</span>
          </div>
          <div className="mob-balance">
            <div className="mb-m" style={{flex: 13}}>M · 13</div>
            <div className="mb-v" style={{flex: 39}}>V · 39</div>
            <div className="mb-o" style={{flex: 14}}>offen 14</div>
          </div>
        </div>

        {[
          { ic: <IcLeaf size={14}/>, nm: 'Pfingstferien Hessen', when: '26.05. – 5.06.', n: 11, who: 'Vater', s: 'bestaetigt' },
          { ic: <IcSun size={14}/>, nm: 'Sommerferien · 1. Hälfte', when: '13. – 26. Juli', n: 13, who: 'Mutter', s: 'offen' },
          { ic: <IcSun size={14}/>, nm: 'Sommerferien · 2. Hälfte', when: '27.07. – 22.08.', n: 26, who: 'Vater', s: 'vorschlag' },
          { ic: <IcLeaf size={14}/>, nm: 'Herbstferien', when: '12. – 23. Oktober', n: 11, who: 'Mutter', s: 'geplant' },
          { ic: <IcSparkle size={14}/>, nm: 'Weihnachtsferien', when: '23.12. – 6.1.', n: 14, who: 'geteilt', s: 'offen' },
        ].map((f, i) => (
          <div key={i} className="mob-ferien-row">
            <div className={`mfr-ic ${f.s}`}>{f.ic}</div>
            <div className="mfr-body">
              <div className="mfr-nm">{f.nm}</div>
              <div className="mfr-sub">{f.when} · {f.n} Nächte · bei <b>{f.who}</b></div>
            </div>
            <div className={`mfr-status s-${f.s}`}>
              {f.s === 'bestaetigt' ? <IcCheckCircle size={13}/> :
               f.s === 'offen' ? <IcClock size={13}/> :
               f.s === 'vorschlag' ? <IcAlertCircle size={13}/> :
               <IcCalendar size={13}/>}
            </div>
          </div>
        ))}

        <button className="mob-btn-out" style={{width: '100%', justifyContent: 'center', marginTop: 12}}>
          <IcDownload size={11}/> Übersicht als PDF
        </button>
      </div>

      <MobileBottomNav active="ferien"/>
    </div>
  );
}

// ---------------- BOTTOM NAV ----------------
function MobileBottomNav({ active }) {
  const items = [
    { id: 'heute', lbl: 'Heute', ic: <IcHome size={17}/> },
    { id: 'kalender', lbl: 'Kalender', ic: <IcCalendar size={17}/> },
    { id: 'bestaetigungen', lbl: 'Bestätigen', ic: <IcAlertCircle size={17}/>, badge: 2 },
    { id: 'ferien', lbl: 'Ferien', ic: <IcSun size={17}/> },
    { id: 'mehr', lbl: 'Mehr', ic: <IcDots size={17}/> },
  ];
  return (
    <div className="mob-bnav">
      {items.map(it => (
        <button key={it.id} className={`mbn ${active === it.id ? 'on' : ''}`}>
          <span className="mbn-ic">
            {it.ic}
            {it.badge && <span className="mbn-badge">{it.badge}</span>}
          </span>
          <span className="mbn-lbl">{it.lbl}</span>
        </button>
      ))}
    </div>
  );
}

Object.assign(window, { MobilePreview });