/* Mobile-Layer — greift NUR im neuen Design und NUR bei schmaler Breite.
   Tab-Leiste/Sheet sind immer im DOM (von shell.js), aber per Default versteckt. */
.m-tabbar, .m-sheet { display: none; }

@media (max-width: 900px) {
  /* --- Kein horizontaler Ueberlauf (Rechts-Streifen): NUR body, sonst bricht das vertikale Scrollen --- */
  [data-skin="new"] body { overflow-x: hidden; }
  [data-skin="new"] .nl-feed-txt, [data-skin="new"] .nl-mcard h3, [data-skin="new"] .nl-recent,
  [data-skin="new"] .nl-mcard-meta, [data-skin="new"] .bn-title, [data-skin="new"] .b-title { overflow-wrap: anywhere; word-break: break-word; }

  /* --- Obere Rail-Navigation + Benutzer-Dropdown ausblenden, Tab-Leiste/Sheet uebernehmen --- */
  [data-skin="new"] .topnav-links,
  [data-skin="new"] .topnav-burger,
  [data-skin="new"] .topnav-cta,
  [data-skin="new"] #navUser { display: none !important; }

  /* --- Inhalt: volle Breite, Platz unten fuer die Tab-Leiste --- */
  [data-skin="new"] .content-area { max-width: none !important; margin: 0 !important; padding: 12px 14px 84px !important; }

  /* --- Touch-Ziele / iOS-Zoom-Fix --- */
  [data-skin="new"] input, [data-skin="new"] select, [data-skin="new"] textarea { font-size: 16px; }
  [data-skin="new"] .btn { min-height: 44px; }

  /* --- Modals als fast vollflaechige Sheets --- */
  [data-skin="new"] .modal { max-width: none !important; width: 96% !important; }

  /* --- Untere Tab-Leiste --- */
  [data-skin="new"] .m-tabbar { position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 1000; display: flex;
    background: var(--surface-1, #0d1625); border-top: 1px solid var(--border-default, rgba(255,255,255,0.1));
    padding-bottom: env(safe-area-inset-bottom, 0); }
  [data-skin="new"] .m-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: 60px; background: none; border: none; color: var(--text-secondary, #8398ad);
    font-size: 10.5px; text-decoration: none; cursor: pointer; }
  [data-skin="new"] .m-tab.active { color: var(--accent, #1fa8ff); }

  /* --- "Mehr"-Sheet --- */
  [data-skin="new"] .m-sheet { position: fixed; inset: 0; z-index: 1001; display: none; }
  [data-skin="new"] .m-sheet.open { display: block; }
  [data-skin="new"] .m-sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
  [data-skin="new"] .m-sheet-panel { position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--surface-1, #0d1625); border-top-left-radius: 16px; border-top-right-radius: 16px;
    padding: 6px 14px calc(16px + env(safe-area-inset-bottom, 0)); display: flex; flex-direction: column; gap: 2px; }
  [data-skin="new"] .m-sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.2); margin: 6px auto 12px; }
  [data-skin="new"] .m-sheet-link { display: flex; align-items: center; gap: 12px; padding: 13px 8px;
    color: var(--text-primary, #e8eef5); text-decoration: none; border: none; background: none;
    font-size: 15px; cursor: pointer; width: 100%; text-align: left; }
  [data-skin="new"] .m-sheet-link:hover { color: var(--accent, #1fa8ff); }

  /* --- Landing: aufs Wesentliche reduziert --- */
  /* Stats (Piloten/Stunden/Events ...) + Tools & Systeme komplett raus */
  [data-skin="new"] #newLanding .nl-stats { display: none; }
  [data-skin="new"] #newLanding .nl-sec:has(.nl-tools) { display: none; }
  /* Hero -> schlankes Banner: nur Kicker + Titel + Discord-Button */
  [data-skin="new"] #newLanding .nl-hero { min-height: 0; }
  [data-skin="new"] #newLanding .nl-hero-inner { padding: 0; }
  [data-skin="new"] #newLanding .nl-hero-content { padding: 30px 0 26px; }
  [data-skin="new"] #newLanding .nl-hero h1 { font-size: 30px; }
  [data-skin="new"] #newLanding .nl-tag,
  [data-skin="new"] #newLanding .nl-pills,
  [data-skin="new"] #newLanding .nl-hero-status { display: none; }
  [data-skin="new"] #newLanding .nl-hero-actions { display: none; }
  /* Seitliche Paddings reduzieren, damit die Inhalte (v. a. 2 Missionskarten) Platz haben */
  [data-skin="new"] #newLanding .nl-wrap { padding-left: 0; padding-right: 0; }
  [data-skin="new"] #newLanding .nl-sec { padding-left: 0; padding-right: 0; }
  /* Aktive Missionen: genau 2, NEBENEINANDER (JS liefert 2 Karten in den flex-Track) */
  [data-skin="new"] #newLanding .nl-track { gap: 10px; transform: none !important; }
  [data-skin="new"] #newLanding .nl-track > .nl-mcard { flex: 1 1 0; min-width: 0; }
  [data-skin="new"] #newLanding .nl-mcard-img { height: 80px; }
  [data-skin="new"] #newLanding .nl-mcard-body { padding: 9px 10px; gap: 4px; }
  [data-skin="new"] #newLanding .nl-mcard-body h3 { font-size: 13.5px; line-height: 1.25; }
  [data-skin="new"] #newLanding .nl-mcard-meta { flex-direction: column; gap: 1px; font-size: 11px; }
  [data-skin="new"] #newLanding .nl-mcard-foot { flex-direction: column; align-items: stretch; gap: 6px; }
  [data-skin="new"] #newLanding .nl-mcard-foot .btn { width: 100%; text-align: center; padding: 7px 6px; }
  [data-skin="new"] #newLanding .nl-mcard-badge { font-size: 9px; padding: 2px 6px; }
  [data-skin="new"] #newLanding .nl-foot-grid { grid-template-columns: 1fr; }
  /* Footer als sauberes Vollbreiten-Band: randlos bis zur Tab-Leiste, keine Rundung/Seitenrahmen,
     nur eine obere Trennlinie; eigenes Bottom-Padding haelt die Inhalte ueber der Tab-Leiste. */
  [data-skin="new"] #newLanding .nl-footer {
    margin: 30px -14px -84px;
    padding: 26px 18px calc(78px + env(safe-area-inset-bottom, 0));
    border: none; border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
    border-radius: 0; background: rgba(255,255,255,0.02);
  }
  /* Server-Status: nur Name + farbiger Punkt (gruen=online / rot=offline); Detailzeilen + Link raus */
  [data-skin="new"] #newLanding .nl-foot-srv .srv-row,
  [data-skin="new"] #newLanding .nl-foot-srv .srv-card .sep,
  [data-skin="new"] #newLanding .nl-foot-srv .srv-all { display: none; }
  [data-skin="new"] #newLanding .nl-foot-srv .srv-card { background: none; border: none; padding: 0; }
  [data-skin="new"] #newLanding .nl-foot-srv .srv-head { margin: 0; }
  [data-skin="new"] #newLanding .nl-foot-srv .srv-badge:not(.on) .dot { background: #f44336; }
  /* Nur das Discord-Widget ("Unsere Community" mit Beitreten/Avataren) raus;
     Discord-Aktivitaet und letzte Missionen bleiben sichtbar. */
  [data-skin="new"] #newLanding .nl-cols .nl-discord { display: none; }
  /* Footer-Spalte "Schnellzugriff" raus (Navigation steckt schon in der Tab-Leiste) */
  [data-skin="new"] #newLanding .nl-foot-grid > *:nth-child(2) { display: none; }
  /* Footer-Brand komplett raus (Logo, Name, Beschreibungstext, Discord-/Mission-Buttons) */
  [data-skin="new"] #newLanding .nl-foot-brand { display: none; }

  /* --- Missionen --- */
  [data-skin="new"] .missions-container { max-width: none; padding-left: 0; padding-right: 0; }
  [data-skin="new"] #editorView { max-width: none; padding: 0; }
  [data-skin="new"] body.editor-open .content-area { padding: 0 12px 84px !important; }

  /* --- Briefing --- */
  [data-skin="new"] body.briefing-page .content-area { max-width: none; }
  [data-skin="new"] .briefing-container { max-width: none; padding: 16px 14px 84px; }
  [data-skin="new"] .bn-grid { grid-template-columns: 1fr; }
  [data-skin="new"] .bn-side { position: static; }
  [data-skin="new"] .threat-cols { grid-template-columns: repeat(2, 1fr); }
}