/* ════════════════════════════════════════════════════════════════
 * NexCoach · Mobile Foundation
 * ════════════════════════════════════════════════════════════════
 * Zentrale CSS für alle responsive Anpassungen unter <= 768px.
 *
 * ARCHITEKTUR:
 * - Bottom Tab Bar fix unten (5 Tabs, 4. ist Playbook, 5. ist „Mehr")
 * - Header oben: Logo links, Avatar rechts (Klassische Nav verschwindet)
 * - „Mehr"-Tab öffnet Bottom-Sheet mit Scouting / Verwaltung / Settings / Logout
 * - Modale werden zu Bottom-Sheets
 * - Standard-Padding 16px
 * - Touch-Targets ≥ 44px
 *
 * EINBINDUNG (in jeder HTML-Datei):
 *   <link rel="stylesheet" href="mobile.css">
 *
 * Achtung: Diese Datei MUSS NACH allen anderen Stylesheets geladen werden
 * damit die @media-Regeln Vorrang haben.
 * ════════════════════════════════════════════════════════════════ */

/* ── Mobile Breakpoint ─────────────────────────────────────────── */
@media (max-width: 768px) {

  /* === GLOBAL ROOT TWEAKS ============================================ */
  body {
    padding-bottom: 64px !important; /* Platz für Bottom Tab Bar */
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Generelles Box-Sizing für alle Direkt-Kinder */
  body * {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Bilder und Videos bleiben in der Spur */
  img, video, svg, canvas {
    max-width: 100%;
    height: auto;
  }

  /* === DASHBOARD-SPEZIFISCH ========================================== */

  /* Nächstes Spiel: Team-Namen kleiner, VS-Padding kleiner */
  .match-team-name {
    font-size: 16px !important;
    line-height: 1.2 !important;
    word-break: break-word;
  }
  .match-vs {
    padding: 0 10px !important;
    font-size: 13px !important;
  }
  .match-team-sub {
    font-size: 9px !important;
  }
  .match-section,
  #match-card,
  .match-card {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* Training diese Woche: Cards kompakter */
  .training-grid {
    min-width: 0 !important;
  }
  .session-card {
    padding: 12px 14px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .session-title {
    font-size: 14px !important;
    word-break: break-word;
  }

  /* Two-Col-Grid auf Mobile: garantiert einspaltig + minimum 0 */
  .two-col-grid,
  .three-col-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .two-col-grid > *,
  .three-col-grid > * {
    min-width: 0 !important;
  }

  /* Hero-Wide auf Mobile: kein Overflow */
  .hero-wide {
    padding: 16px !important;
    min-width: 0 !important;
  }

  /* === KADER-SPEZIFISCH ============================================== */

  /* Main-Container: weniger Padding auf Mobile */
  #main {
    padding: 16px 14px 32px !important;
  }

  /* View-Hdr (Titel + Buttons): vertikal gestapelt */
  .view-hdr {
    gap: 12px !important;
    margin-bottom: 18px !important;
  }
  .view-title {
    font-size: 22px !important;
  }
  .view-eyebrow {
    font-size: 10px !important;
  }

  /* Team-Radar-Block: weniger Padding, fitsicher */
  .team-radar-block {
    padding: 14px 14px 16px !important;
    margin-bottom: 18px !important;
    gap: 14px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* Scope-Toggle: nicht mehr 2-spaltig — kompakt */
  .radar-scope-toggle {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding-bottom: 12px !important;
  }
  .scope-options {
    flex: 1;
    min-width: 0;
  }
  .scope-opt {
    flex: 1;
    min-width: 0;
    font-size: 11px !important;
  }

  /* Radar-SVG: respekt vor Mobile-Breite */
  .team-radar-svg-wrap {
    max-width: 280px;
    margin: 0 auto !important;
  }
  .team-radar-svg-wrap svg {
    width: 100% !important;
    height: auto !important;
  }

  /* Team-Attrs-Grid: kompakter */
  .team-attrs-grid {
    gap: 10px 16px !important;
  }
  .ta-lbl {
    width: auto !important;
    font-size: 10px !important;
  }
  .ta-val {
    font-size: 13px !important;
  }

  /* Overall-Card: kleiner */
  .overall-card {
    padding: 14px 12px !important;
  }
  .overall-card-num {
    font-size: 42px !important;
  }
  .overall-card-stats {
    font-size: 10px !important;
  }
  .overall-stat-val {
    font-size: 11px !important;
  }

  /* === TABS-BAR PATTERN (Verwaltung, Training, Taktik) ============== */
  /* Tabs nehmen volle Breite, Action-Button wird zum FAB */

  #tabs-bar {
    padding: 0 !important;
    height: auto !important;
  }

  /* Container: kein space-between mehr — Tabs füllen alles */
  #tabs-bar > .tabs {
    width: 100% !important;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 1fr !important;
    gap: 0 !important;
  }

  /* Tab-Buttons: gleichmäßig verteilt, kompakt */
  #tabs-bar .tab-btn {
    padding: 11px 4px 9px !important;
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
    justify-content: center !important;
    width: 100% !important;
  }

  /* Action-Buttons werden zu FAB (Floating Action Button) */
  /* Wichtig: Inline display:none NICHT überschreiben — sonst stapeln sich
     alle versteckten tabs-actions-Container an der gleichen Position. */
  .tabs-actions:not([style*="display: none"]):not([style*="display:none"]) {
    position: fixed !important;
    bottom: calc(72px + env(safe-area-inset-bottom, 0)) !important;
    right: 16px !important;
    z-index: 7500 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .tabs-actions .btn-primary,
  .tabs-actions button.btn-primary {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    font-size: 0 !important;
    background: linear-gradient(135deg, #7D39EB, #FF6FB5) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(125, 57, 235, 0.4) !important;
    color: #fff !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* Plus-Icon mit CSS-Pseudo-Element */
  .tabs-actions .btn-primary::before {
    content: '+';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    color: #fff;
  }

  .tabs-actions .btn-primary:active {
    transform: scale(0.95) !important;
  }

  /* === TRAINING · App-Container respektiert Bottom-Tab-Bar ========== */
  /* training_v3.html nutzt fixe Höhe für #app und #app-inner — auf Mobile
     müssen wir Platz für die Bottom-Tab-Bar lassen. */
  #app {
    height: calc(100vh - var(--header-h, 60px) - var(--tabs-h, 48px) - 64px) !important;
  }
  #app-inner {
    height: calc(100vh - var(--header-h, 60px) - var(--tabs-h, 48px) - 64px) !important;
    /* 64px = Bottom-Tab-Bar inkl. Safe-Area */
  }

  /* === TRAINING · EDITOR auf Mobile blockieren ======================= */
  /* Editor in Sub-Navigation verstecken */
  #tab-editor {
    display: none !important;
  }
  /* "+ Neue Übung"-FAB verstecken (öffnet sonst den Editor) */
  #tabs-actions-lib {
    display: none !important;
  }
  /* Editor-View komplett verstecken — falls jemand direkt da landet */
  #editor-view {
    display: none !important;
  }
  /* Falls Editor-View trotzdem als aktiv gesetzt wird: Hinweis einblenden */
  #editor-view::before {
    content: '';
  }
  /* Hinweis-Block: erscheint per JS-Detection wenn Editor versucht wird */
  body.tr-editor-blocked #editor-view {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px;
    min-height: 60vh;
  }
  body.tr-editor-blocked #editor-view > * {
    display: none !important;
  }
  body.tr-editor-blocked #editor-view::before {
    content: '🖥  Editor nur am Desktop';
    display: block !important;
    font-family: 'Manrope', sans-serif;
    font-weight: 900;
    font-size: 18px;
    color: #fff;
    margin-bottom: 12px;
    line-height: 1.3;
  }
  body.tr-editor-blocked #editor-view::after {
    content: 'Der Trainings-Editor benötigt mehr Platz für präzises Zeichnen. Öffne NexCoach am PC oder Tablet, um eigene Übungen zu erstellen.';
    display: block !important;
    font-size: 14px;
    color: rgba(255,255,255,0.7);
    line-height: 1.5;
    max-width: 320px;
  }

  /* === TRAINING · FILTER-BAR mobile ================================== */
  /* Original-Filter-Bar verstecken — wir injizieren stattdessen Mobile-Bar */
  .filter-bar {
    display: none !important;
  }

  /* Mobile-Filter-Bar (per JS injiziert) */
  .nc-mobile-filter-bar {
    display: flex !important;
    gap: 8px;
    padding: 10px 14px 12px;
    align-items: center;
    margin: 0;
  }
  .nc-mobile-filter-bar .nc-mfb-search {
    flex: 1;
    min-width: 0;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 10px 12px 10px 36px;
    font-size: 14px !important;
    color: #fff;
    outline: none;
    position: relative;
    height: 40px !important;
    -webkit-appearance: none;
  }
  .nc-mobile-filter-bar .nc-mfb-search-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
  }
  .nc-mobile-filter-bar .nc-mfb-search-wrap svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.5;
    pointer-events: none;
  }
  .nc-mobile-filter-bar .nc-mfb-fbtn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(125,57,235,0.18);
    border: 1px solid rgba(125,57,235,0.4);
    color: #C9AEFB;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: transparent;
  }
  .nc-mobile-filter-bar .nc-mfb-fbtn:active {
    background: rgba(125,57,235,0.28);
  }
  .nc-mobile-filter-bar .nc-mfb-fbtn.has-filters {
    background: rgba(4,245,255,0.15);
    border-color: rgba(4,245,255,0.45);
    color: #04F5FF;
  }
  .nc-mobile-filter-bar .nc-mfb-fbtn-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #04F5FF;
    color: #0B0118;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Active-Filter-Chips (zeigen unter der Filter-Bar) */
  .nc-mobile-filter-active {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 14px 10px;
  }
  .nc-mobile-filter-active:empty {
    display: none;
  }
  .nc-mfa-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(4,245,255,0.12);
    border: 0.5px solid rgba(4,245,255,0.3);
    border-radius: 12px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: #04F5FF;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nc-mfa-chip-x {
    opacity: 0.6;
    font-size: 12px;
    line-height: 1;
  }

  /* Filter-Bottom-Sheet */
  .nc-filter-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11,1,24,0.7);
    backdrop-filter: blur(8px);
    z-index: 8500;
    display: none;
    align-items: flex-end;
    justify-content: center;
  }
  .nc-filter-sheet-overlay.open {
    display: flex;
  }
  .nc-filter-sheet {
    background: rgba(20,8,38,0.98);
    border-top: 1px solid rgba(125,57,235,0.4);
    border-radius: 16px 16px 0 0;
    width: 100%;
    max-width: 600px;
    max-height: 88vh;
    overflow-y: auto;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0));
    animation: nc-fs-slide 0.25s ease-out;
  }
  @keyframes nc-fs-slide {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  .nc-fs-grip {
    width: 36px;
    height: 4px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    margin: 0 auto 14px;
  }
  .nc-fs-title {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 14px;
  }
  .nc-fs-section {
    margin-bottom: 18px;
  }
  .nc-fs-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .nc-fs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .nc-fs-chip {
    padding: 8px 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: rgba(255,255,255,0.75);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nc-fs-chip:active {
    background: rgba(255,255,255,0.08);
  }
  .nc-fs-chip.on {
    background: rgba(4,245,255,0.15);
    border-color: rgba(4,245,255,0.4);
    color: #04F5FF;
  }
  .nc-fs-select {
    width: 100%;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 11px 12px;
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff80' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 36px;
  }
  .nc-fs-actions {
    display: flex;
    gap: 8px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .nc-fs-btn {
    flex: 1;
    padding: 13px;
    border-radius: 8px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    border: 1px solid;
    -webkit-tap-highlight-color: transparent;
  }
  .nc-fs-btn.reset {
    background: transparent;
    border-color: rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.7);
  }
  .nc-fs-btn.apply {
    background: linear-gradient(135deg, rgba(125,57,235,0.4), rgba(4,245,255,0.25));
    border-color: rgba(125,57,235,0.5);
    color: #fff;
  }

  /* === EDITOR · READ-ONLY-MODE auf Mobile ============================ */
  /* Editor wird zum Anschau-Modus: Pitch + Replay sichtbar, Bearbeiten weg */

  /* Toolbar-Gruppen verstecken (Pfeile, Ball, Gegner, KI-Predict) */
  body.is-editor .pitch-topbar .tool-group,
  body.is-editor #scene-mode-actions {
    display: none !important;
  }

  /* Sidebar (Kader/Details/Analyse) komplett weg */
  body.is-editor .sidebar,
  body.is-editor #sub-tabs,
  body.is-editor .sidebar-content {
    display: none !important;
  }

  /* Action-Buttons (Speichern, KI-Analyse, Zu Playbook) weg */
  body.is-editor .title-row .actions {
    display: none !important;
  }

  /* Onboarding-Hinweis weg */
  body.is-editor .onboard-hint,
  body.is-editor #onboard-hint {
    display: none !important;
  }

  /* Storyboard weg (kann später als horizontaler Strip rein) */
  body.is-editor #storyboard-bar {
    display: none !important;
  }

  /* Title nicht bearbeitbar */
  body.is-editor .editable-title {
    pointer-events: none !important;
    color: #fff !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
  }
  body.is-editor .editable-title-icon {
    display: none !important;
  }

  /* Editor-Layout: einspaltig, ohne Sidebar */
  body.is-editor .editor-layout {
    grid-template-columns: 1fr !important;
    display: block !important;
  }

  /* Pitch-Panel volle Breite */
  body.is-editor .pitch-panel {
    width: 100% !important;
  }

  /* Pitch-Topbar kompakter (nur System-Chip + Phase-Chip + OVR) */
  body.is-editor .pitch-topbar {
    padding: 8px 0 !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  body.is-editor .pitch-topbar .pb-chip {
    font-size: 10px !important;
    padding: 4px 8px !important;
  }

  /* Phase-Tabs scrollbar machen falls viele Phasen */
  body.is-editor #phase-tabs-bar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Pitch-Bottombar: nur Replay + Overlay-Tabs sichtbar */
  body.is-editor .pitch-bottombar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  body.is-editor .pitch-bottombar .tool-group {
    display: flex !important; /* Overlay-Tabs (Feld/Heatmap/Zonen) bleiben */
  }
  body.is-editor .override-notice {
    display: none !important;
  }

  /* Read-Only-Banner oben am Pitch */
  body.is-editor #pitch-wrap::before {
    content: '👁  Read-Only — Bearbeiten am PC';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 8, 38, 0.92);
    border: 1px solid rgba(125, 57, 235, 0.4);
    border-radius: 8px;
    padding: 6px 12px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #C9AEFB;
    z-index: 50;
    pointer-events: none;
    backdrop-filter: blur(6px);
    white-space: nowrap;
  }

  /* Pitch-Pfeil-/Spieler-Pointer-Events deaktivieren auf Mobile */
  body.is-editor #pitch-svg .player-node,
  body.is-editor #pitch-svg .opponent-node,
  body.is-editor #pitch-svg .arrow-group {
    pointer-events: none !important;
  }

  /* Title-Row: kompakter */
  body.is-editor .title-row {
    margin-bottom: 14px !important;
  }
  body.is-editor .title-eyebrow {
    font-size: 10px !important;
  }
  body.is-editor .editable-title {
    font-size: 22px !important;
  }

  /* Breadcrumb kompakter */
  body.is-editor .breadcrumb {
    font-size: 11px !important;
    margin-bottom: 10px !important;
  }

  /* === HEADER: kompakter, klassische Nav weg ========================== */

  /* Editor-Header (id=hdr) */
  #hdr {
    padding: 8px 14px !important;
  }
  #hdr .prod-nav,
  #hdr .hnav {
    display: none !important;
  }
  #hdr .brand img {
    height: 24px !important;
  }

  /* Dashboard / Settings / etc. (header.site-header) */
  header.site-header {
    padding: 8px 14px !important;
  }
  header.site-header .top-nav,
  header.site-header .hdr-nav,
  header.site-header nav {
    display: none !important;
  }

  /* Avatar oben rechts vergrößern damit gut tappable */
  .prof-avatar,
  .avatar-circle,
  #avatar-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    aspect-ratio: 1 / 1 !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Header rechte Seite (Avatar + ggf. Team-Chip) immer ganz rechts pushen */
  /* Notwendig weil .top-nav (das margin-right:auto trägt) auf Mobile versteckt ist */
  .hdr-right,
  .topbar-right,
  header.site-header > .hdr-inner > *:last-child {
    margin-left: auto !important;
  }

  /* Team-Chip auf Mobile überall verstecken (Platz ist knapp, Team-Info redundant) */
  #team-chip,
  #team-chip-hdr {
    display: none !important;
  }

  /* === BOTTOM TAB BAR ================================================= */
  .nc-mobile-tabs {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(11, 1, 24, 0.96);
    backdrop-filter: blur(12px);
    border-top: 0.5px solid rgba(125, 57, 235, 0.2);
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    z-index: 8000 !important;
    padding-bottom: env(safe-area-inset-bottom, 0);
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .nc-mtab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 9px 4px 8px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }

  .nc-mtab:active {
    background: rgba(255, 255, 255, 0.04);
  }

  .nc-mtab svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
  }

  .nc-mtab-lbl {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
  }

  .nc-mtab.active {
    color: #04F5FF;
  }

  /* Auf Desktop: Bottom Tabs ausblenden */
}

/* Default (Desktop): Bottom Tabs unsichtbar */
.nc-mobile-tabs {
  display: none;
}
@media (max-width: 768px) {
  .nc-mobile-tabs {
    display: grid;
  }
}

/* Default (Desktop): Mobile-Filter-Bar unsichtbar */
.nc-mobile-filter-bar,
.nc-mobile-filter-active,
.nc-filter-sheet-overlay {
  display: none;
}

/* ── „Mehr"-Bottom-Sheet ─────────────────────────────────────── */
.nc-more-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 1, 24, 0.7);
  backdrop-filter: blur(8px);
  z-index: 8500;
  display: none;
  align-items: flex-end;
  justify-content: center;
}
.nc-more-overlay.open {
  display: flex;
  animation: nc-more-fade 0.2s ease-out;
}
@keyframes nc-more-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.nc-more-sheet {
  background: rgba(20, 8, 38, 0.98);
  border-top: 1px solid rgba(125, 57, 235, 0.4);
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 600px;
  padding: 18px 14px calc(18px + env(safe-area-inset-bottom, 0));
  animation: nc-more-slide 0.25s ease-out;
}
@keyframes nc-more-slide {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.nc-more-grip {
  width: 36px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  margin: 0 auto 14px;
}

.nc-more-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding: 0 8px;
}

.nc-more-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nc-more-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 12px;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
.nc-more-item:active {
  background: rgba(255, 255, 255, 0.06);
}
.nc-more-item.danger {
  color: #FF7A8C;
  margin-top: 8px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.06);
  padding-top: 16px;
}

.nc-more-item svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  flex-shrink: 0;
  opacity: 0.8;
}

/* ── Modals → Bottom-Sheets auf Mobile ───────────────────────── */
@media (max-width: 768px) {
  .modal-overlay,
  .aip-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .modal-box,
  .aip-modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0)) !important;
  }

  /* Touch-Targets in Modals und Forms */
  button, .btn, .btn-primary, .btn-secondary,
  .modal-footer button, .aip-btn,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="date"], input[type="time"],
  select, textarea {
    min-height: 44px !important;
    font-size: 16px !important; /* verhindert iOS-Zoom beim Fokus */
  }

  /* === LAYOUT-PADDING auf Mobile ====================================== */
  main, .main-wrap, .content-wrap {
    padding: 16px !important;
  }

  /* Container, die als CSS-Grids vom Desktop kommen */
  .grid, .container-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* === TYPOGRAFIE ===================================================== */
  h1, .h1 { font-size: 22px !important; }
  h2, .h2 { font-size: 18px !important; }
  h3, .h3 { font-size: 16px !important; }
}

/* ════════════════════════════════════════════════════════════════
 * Hilfsklasse: nc-only-mobile / nc-only-desktop
 * ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .nc-only-desktop { display: none !important; }
}
@media (min-width: 769px) {
  .nc-only-mobile { display: none !important; }
}