/* Phase X — Mobile-Master-Stylesheet
 * Wird zuletzt geladen → höchste Cascade-Priorität.
 * Breakpoints:
 *   ≤ 900px : tablet-portrait
 *   ≤ 720px : phone-landscape / small tablet
 *   ≤ 520px : phone-portrait
 *   ≤ 380px : small phone
 */

/* ═══════════════════════════════════════
   ≤ 900px (tablet-portrait + kleinere)
   ═══════════════════════════════════════ */
@media (max-width: 900px) {
  /* Identity Tab: Sidebar oben, Editor unten */
  .id-split { grid-template-columns: 1fr !important; }
  .id-list { max-height: 280px; border-right: none; border-bottom: 1px solid var(--border); }
  .id-search-wrap { max-width: 100%; margin: 0.4rem 0; flex-basis: 100%; order: 99; }

  /* Chats: Sidebar bleibt, aber kompakter */
  #chat-sidebar { width: 200px; min-width: 200px; }

  /* Container-Padding reduzieren */
  .tab-view { padding: 1rem 1.1rem; }
}

/* ═══════════════════════════════════════
   ≤ 720px (phone-landscape)
   ═══════════════════════════════════════ */
@media (max-width: 720px) {
  /* Header: kompakter, Stats raus, Live-Dot raus */
  #header { padding: 0.4rem 0.7rem; gap: 0.4rem; flex-wrap: wrap; }
  .header-brand .logo { font-size: 1rem; }
  .header-right { gap: 0.3rem; flex-wrap: wrap; }
  .header-right .header-stats { display: none; }
  .header-right .clock { display: none; }
  .header-right .live-dot { display: none; }

  /* Cmdk-Hint: nur Icon-Symbol, kein "Ctrl+K"-Text */
  .cmdk-hint { padding: 0.2rem 0.4rem; }
  .cmdk-hint span { display: none; }
  .cmdk-hint::before { content: '⌘'; font-family: var(--font-mono); font-size: 0.8rem; }

  /* Logout: nur Icon */
  .btn-logout { padding: 0.25rem 0.5rem; font-size: 0.75rem; }

  /* Tab-Nav: kleiner */
  #tab-nav { padding: 0 0.5rem; gap: 0.1rem; }
  .nav-tab { padding: 0.5rem 0.6rem; font-size: 0.7rem; }
  .nav-tab .tab-icon { width: 14px; height: 14px; }

  /* Chat-Sidebar bleibt, aber 180px */
  #chat-sidebar { width: 180px; min-width: 180px; }
  .chat-search-wrap input { font-size: 0.72rem; padding: 0.3rem 0.5rem; }
  .chat-item { padding: 0.5rem 0.7rem; }
  .chat-item-id { font-size: 0.78rem; }
  .chat-item-meta { font-size: 0.65rem; }

  /* Stat-Grid 2-Spalten */
  .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Phase-V Cards: 1-Spalte */
  .v-grid { grid-template-columns: 1fr !important; }
  .v-card { padding: 0.7rem 0.85rem; }
  .v-profile-grid { grid-template-columns: 1fr !important; }
  .v-tools-group .v-chips { gap: 0.3rem; }
  .v-chip-tool { font-size: 0.7rem; padding: 0.15rem 0.45rem; }
  .v-row { flex-wrap: wrap; gap: 0.4rem; }
  .v-select { font-size: 0.78rem; max-width: 100%; }
  .v-row-meta { font-size: 0.65rem; }
  .v-health-item { flex-wrap: wrap; padding: 0.5rem 0.7rem; }
  .v-health-name { min-width: 100% !important; font-size: 0.85rem; }
  .v-health-detail { font-size: 0.7rem !important; max-width: 100%; }

  /* Onboarding-Wizard auf Phone: full-width */
  .w1-wizard-modal { width: 95% !important; max-height: 85vh; }
  .w1-wizard-body { padding: 0.9rem 1.1rem; min-height: 140px; }
  .w1-wizard-foot { padding: 0.6rem 0.9rem; }
  .w1-step-name { font-size: 0.9rem; }

  /* Modals (CRUD + Identity): kompakter */
  .crud-modal-box { width: 95% !important; max-width: 480px; max-height: 85vh; padding: 1rem 1.1rem; }
  .crud-modal-title { font-size: 1rem; }
  .crud-modal-form input,
  .crud-modal-form textarea,
  .crud-modal-form select { font-size: 0.85rem; padding: 0.45rem 0.6rem; }

  /* Widget-Modal */
  #widget-modal .modal-box { width: 95% !important; padding: 1rem !important; max-height: 85vh; overflow-y: auto; }

  /* Notif-Popover: schmaler aufm Phone */
  .notif-popover { width: calc(100vw - 1.4rem) !important; max-width: 360px; right: 0.7rem !important; }

  /* Cmd-Palette */
  #cmdk-overlay { padding-top: 8vh; }
  .cmdk-modal { width: 95% !important; max-width: 540px; }
  #cmdk-input { padding: 0.85rem 1rem; font-size: 0.95rem; }
  .cmdk-list { max-height: 60vh; }
  .cmdk-item { padding: 0.5rem 1rem; gap: 0.55rem; }
  .cmdk-title { font-size: 0.85rem; }
  .cmdk-subtitle { font-size: 0.68rem; }
  .cmdk-foot { padding: 0.45rem 1rem; gap: 0.4rem; flex-wrap: wrap; font-size: 0.65rem; }

  /* Events-Ticker: Bottom Sheet auf Phone */
  #events-ticker {
    top: auto !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    width: 100% !important; max-width: 100%; max-height: 50vh;
    border-radius: 12px 12px 0 0 !important;
  }

  /* Logs */
  .logs-pane { font-size: 0.7rem; line-height: 1.4; }
  .logs-filter { font-size: 0.75rem; padding: 0.35rem 0.55rem; }

  /* MCP-Panel */
  #mcp-grid { grid-template-columns: 1fr !important; }

  /* Ops/Finance/Grow CRUD-Tabellen: horizontaler Scroll innerhalb der Card */
  .row-grid, .crud-row, table.crud-table {
    overflow-x: auto; display: block; max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  /* Daily-Note + Notes Editor: full-width */
  .home-notes, #home-notes, .crud-notes { font-size: 0.85rem; min-height: 100px; }

  /* Charts: kleiner */
  .polish-chart svg { max-width: 100%; }

  /* Section-Title kleiner */
  .section-title {
    font-size: 0.95rem;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  /* Buttons in Sections: nicht zu breit */
  .sec-add { font-size: 0.7rem; padding: 0.2rem 0.5rem; }
  .btn { font-size: 0.8rem; padding: 0.35rem 0.7rem; }
  .btn-primary { font-size: 0.8rem; padding: 0.35rem 0.7rem; }
}

/* ═══════════════════════════════════════
   ≤ 520px (phone-portrait)
   ═══════════════════════════════════════ */
@media (max-width: 520px) {
  /* Header noch kompakter */
  .header-brand .logo { font-size: 0.9rem; }
  .header-brand .logo-icon { width: 18px; height: 18px; }

  /* Tabs: Mini-Modus */
  .nav-tab {
    padding: 0.45rem 0.5rem;
    font-size: 0.62rem;
    line-height: 1.1;
  }
  .nav-tab .tab-icon { width: 12px; height: 12px; }

  /* Chat-Sidebar: noch schmaler */
  #chat-sidebar { width: 150px; min-width: 150px; }
  .chat-item-session { display: none; }

  /* Stat-Grid 1-Spalte */
  .stat-grid { grid-template-columns: 1fr !important; }
  .stat-card { padding: 0.7rem 0.9rem; }
  .stat-card-value { font-size: 1.3rem !important; }
  .stat-card-label { font-size: 0.7rem; }

  /* Identity Sub-Nav: scrollable horizontal */
  .id-subnav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .id-subnav::-webkit-scrollbar { display: none; }
  .id-subnav-btn { flex-shrink: 0; font-size: 0.75rem; padding: 0.3rem 0.6rem; }
  .id-avatar { display: none; }

  /* Modal-Padding: minimal */
  .crud-modal-box { padding: 0.85rem 0.95rem; }

  /* Browser-Card-Inputs */
  #w2-screenshot-url { min-width: 0 !important; flex: 1 1 100%; margin-bottom: 0.4rem; }

  /* Live-Charts: kleiner */
  .polish-chart-bar { stroke-width: 8; }

  /* Tab-View Padding */
  .tab-view { padding: 0.85rem 0.95rem; }

  /* Channels/Cards: enger */
  .v-card-head { font-size: 0.85rem; gap: 0.4rem; }
  .v-card-detail { font-size: 0.72rem; }

  /* Toast: full-width */
  #toast-el {
    left: 0.7rem !important;
    right: 0.7rem !important;
    transform: translateY(20px) !important;
    bottom: 0.7rem !important;
    max-width: none;
  }
  #toast-el.show { transform: translateY(0) !important; }
}

/* ═══════════════════════════════════════
   ≤ 380px (small phone)
   ═══════════════════════════════════════ */
@media (max-width: 380px) {
  #header { padding: 0.3rem 0.5rem; gap: 0.25rem; }
  .header-brand .logo { display: none; }
  .header-right { gap: 0.2rem; }
  .theme-toggle { font-size: 0.7rem; padding: 0.2rem 0.4rem; }
  .btn-logout { font-size: 0.7rem; padding: 0.2rem 0.4rem; }
  .notif-bell { padding: 0.2rem 0.35rem; }

  /* Chat-Sidebar versteckt — Toggle via Button */
  /* Kompromiss: schmaler statt verstecken (Hamburger-Toggle wäre eigene Phase) */
  #chat-sidebar { width: 130px; min-width: 130px; }

  .nav-tab {
    padding: 0.4rem 0.4rem;
    font-size: 0.55rem;
  }

  /* Section-Title: serif-headlines kleiner */
  .section-title { font-size: 0.85rem; }

  /* Cmdk-Modal: full-width */
  .cmdk-modal { width: 98% !important; }
}

/* ═══════════════════════════════════════
   Touch-Target-Sizes (mind. 36×36 px)
   ═══════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  .btn, .btn-primary, .btn-secondary, .btn-danger, .sec-add, .nav-tab,
  .id-subnav-btn, .v-select, .crud-modal-close, .notif-bell, .cmdk-hint,
  .theme-toggle, .btn-logout, .notif-action, .notif-x, .w1-wizard-x {
    min-height: 36px;
  }
  .btn, .btn-primary, .btn-secondary, .btn-danger { min-width: 36px; }
  .chat-item { min-height: 48px; }

  /* Input-Felder etwas größer für Tipp-Komfort */
  input[type="text"], input[type="search"], input[type="number"],
  input[type="email"], input[type="password"], textarea, select {
    font-size: 16px; /* iOS verhindert Auto-Zoom bei <16px */
  }
}

/* ═══════════════════════════════════════
   Landscape-Phone (kurz + breit)
   ═══════════════════════════════════════ */
@media (max-height: 480px) and (orientation: landscape) {
  #header { padding: 0.25rem 0.6rem; }
  #tab-nav { padding: 0; }
  .nav-tab { padding: 0.35rem 0.5rem; }
  .tab-view { padding: 0.7rem 1rem; }
  .stat-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .stat-card { padding: 0.55rem 0.75rem; }
  .crud-modal-box { max-height: 80vh; }
  .w1-wizard-modal { max-height: 80vh; }
}


/* ═══════════════════════════════════════
   Phase X.2 — Responsive-Polish (29.04.26)
   ═══════════════════════════════════════ */

/* ── Inline-1fr-1fr-Grids: stacken bei Phone ────────────────── */
@media (max-width: 720px) {
  .ov-mood-quick,
  .sys-uhr-grid,
  .md-play-grid {
    grid-template-columns: 1fr !important;
  }
  .ov-mood-quick > div + div,
  .sys-uhr-grid > div + div {
    margin-top: 0.4rem;
  }
}

/* ── Chat-Input-Row: Mobile Layout ──────────────────────────── */
@media (max-width: 520px) {
  #chat-input-row {
    flex-direction: column !important;
    gap: 0.4rem !important;
    padding: 0.6rem 0.7rem !important;
  }
  #chat-input {
    font-size: 16px !important; /* iOS-Zoom verhindern */
    min-height: 60px;
  }
  #chat-send-btn {
    width: 100%;
    padding: 0.55rem 1rem !important;
    min-height: 40px;
  }
  #chat-tool-indicator {
    margin: 0 0.7rem 0.3rem !important;
    font-size: 0.65rem !important;
  }
}

/* ── Tab-Nav horizontal scrollen bei tight Laptop/Tablet ───── */
@media (max-width: 1180px) {
  #tab-nav {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #tab-nav::-webkit-scrollbar { display: none; }
  .nav-tab { flex-shrink: 0; }
}

/* ── Tablet (901-1180): minimal compact tabs ────────────────── */
@media (min-width: 901px) and (max-width: 1180px) {
  .nav-tab { padding: 0.55rem 0.7rem; font-size: 0.74rem; }
}

/* ── Sehr breite Screens: Container nicht ausufern lassen ──── */
@media (min-width: 1700px) {
  .tab-view {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Web-Chat darf voll bleiben, Chats-Tab ist split */
  #tab-chats {
    max-width: none;
  }
}

/* ── Kleinerer Header-Akh-Avatar bei Phone ─────────────────── */
@media (max-width: 520px) {
  .header-akh-avatar {
    width: 22px !important;
    height: 22px !important;
    margin-right: 0.3rem !important;
  }
}

/* ── Editorial-Hero: noch kompakter unter 380px ────────────── */
@media (max-width: 380px) {
  .editorial-hero { padding: 1rem 0 1rem; margin-bottom: 1rem; }
  .editorial-hero-title { font-size: 1.5rem !important; }
  .editorial-hero-meta { gap: 0.6rem; font-size: 0.6rem; }
  .editorial-hero-eyebrow { font-size: 0.55rem; }
}

/* ── Mood-Card SVG-Wrap: nicht ueberbreiten ───────────────── */
@media (max-width: 520px) {
  #ov-mood-svg, #sys-clock-canvas {
    max-width: 100%;
    height: auto;
  }
}

/* ── Memory-Highlights bei Phone enger ────────────────────── */
@media (max-width: 520px) {
  .memory-highlights { padding: 0.85rem 0.95rem; margin-top: 1rem; }
  .memory-highlights-title { font-size: 0.95rem; }
  .memory-highlights-grid { grid-template-columns: 1fr !important; gap: 0.5rem; }
  .memory-hi-item { padding: 0.55rem 0.7rem; font-size: 0.78rem; }
}

/* ── System-Map: SVG nutzt komplette Hoehe besser ──────────── */
@media (max-width: 720px) {
  .archmap-svg {
    max-height: calc(100vh - 200px) !important;
  }
}

/* ── Identity-Editor: Editor-Textarea grosszuegig auf Phone ── */
@media (max-width: 720px) {
  #id-editor-textarea {
    min-height: 240px;
    font-size: 0.78rem;
  }
  .id-meta-row {
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.7rem;
  }
}

/* ── Onboarding-Wizard: noch kompakter unter 380 ──────────── */
@media (max-width: 380px) {
  .w1-wizard-modal { width: 98% !important; padding: 0; }
  .w1-wizard-head { padding: 0.7rem 0.85rem; }
  .w1-wizard-body { padding: 0.7rem 0.85rem; }
  .w1-step-name { font-size: 0.85rem; }
  .w1-step-detail { font-size: 0.75rem; }
}

/* ── Logs-Pane bei Phone full-width Filter ────────────────── */
@media (max-width: 520px) {
  .logs-controls { flex-wrap: wrap; gap: 0.4rem; }
  .logs-filter { flex-basis: 100%; }
}

/* ── Progress-Bar Cards bei Phone enger ───────────────────── */
@media (max-width: 520px) {
  .health-row { flex-wrap: wrap; gap: 0.3rem; padding: 0.4rem 0.6rem; }
  .health-row-label { min-width: 80px; font-size: 0.78rem; }
  .health-row-bar { flex: 1 1 100%; }
  .health-row-val { font-size: 0.72rem; }
}

/* ── Quick-Actions Buttons stretch volle Breite auf Phone ── */
@media (max-width: 520px) {
  .ov-mood-quick .btn,
  .sys-uhr-grid .btn {
    width: 100%;
  }
}

/* ── Fix: tab-nav padding bei Mini-Phones ─────────────────── */
@media (max-width: 380px) {
  #tab-nav { padding: 0 0.3rem; gap: 0.05rem; }
}

/* ── Tools-Chips (System-Tab) bei Phone enger ─────────────── */
@media (max-width: 520px) {
  .v-chip-tool { font-size: 0.65rem !important; padding: 0.12rem 0.4rem; }
  .v-tools-group .v-chips { gap: 0.25rem; }
}

/* ── Cmd-Palette Hint Bell-Icon-Stil bei Mini-Phone ───────── */
@media (max-width: 380px) {
  .cmdk-hint { display: none; } /* zu eng, User nutzt Notif-Bell */
}

/* ── Activity-Ribbon nicht ueberbreit bei Phone ─────────── */
@media (max-width: 520px) {
  .dashboard-activity-ribbon {
    margin: 0.4rem 0.6rem 0;
    font-size: 0.65rem;
    padding: 0.3rem 0.6rem;
  }
}


/* ═══════════════════════════════════════
   Phase X.3 — Komplett-Responsive (29.04.26)
   Alle Tabs, alle Komponenten, Handy + Desktop
   ═══════════════════════════════════════ */

/* ── Docs-Tab: Sidebar stackt oben auf Phone/Tablet ─────── */
@media (max-width: 720px) {
  .docs-shell {
    flex-direction: column !important;
    height: auto !important;
    min-height: calc(100vh - 100px);
  }
  #docs-sidebar {
    width: 100% !important; min-width: 0 !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
    max-height: 32vh;
    padding: 0.7rem 0 !important;
  }
  #docs-content {
    padding: 1.1rem 1.2rem !important;
    max-width: 100% !important;
    font-size: 0.92rem;
  }
  #docs-nav { padding: 0 0.7rem; }
  #docs-nav a, #docs-nav button {
    padding: 0.55rem 0.7rem; font-size: 0.85rem;
  }
}
@media (max-width: 380px) {
  #docs-sidebar { max-height: 28vh; }
  #docs-content { padding: 0.8rem 0.95rem !important; font-size: 0.88rem; }
}

/* ── Docs-Markdown Inhalte enger auf Phone ──────────────── */
@media (max-width: 520px) {
  #docs-content h1 { font-size: 1.4rem !important; }
  #docs-content h2 { font-size: 1.15rem !important; }
  #docs-content h3 { font-size: 1rem !important; }
  #docs-content pre, #docs-content code {
    font-size: 0.78rem;
    overflow-x: auto;
    word-wrap: break-word;
  }
  #docs-content table { display: block; overflow-x: auto; max-width: 100%; }
  #docs-content img { max-width: 100%; height: auto; }
}

/* ── Widget-Modal X-Button: Hover + Phone ───────────────── */
.widget-close-btn:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
}
@media (max-width: 520px) {
  .widget-close-btn {
    width: 38px !important; height: 38px !important;
    font-size: 1.5rem !important;
    top: 0.5rem !important; right: 0.5rem !important;
  }
  #widget-modal .modal-box {
    width: calc(100vw - 1rem) !important;
    max-width: none !important;
    padding: 1rem 0.8rem !important;
    margin: 0.5rem;
    max-height: 88vh !important;
  }
}

/* ── Chats-Tab: ueber column-stack auf sehr engen Phones ─ */
@media (max-width: 520px) {
  #tab-chats { flex-direction: column !important; }
  #chat-sidebar {
    width: 100% !important; min-width: 0 !important;
    max-height: 30vh; border-right: none !important;
    border-bottom: 1px solid var(--border);
  }
  #chat-area { flex: 1; min-height: 60vh; }
  #messages { padding: 0.7rem 0.85rem; }
  .msg-bubble { max-width: 92%; font-size: 0.85rem; padding: 0.6rem 0.8rem; }
  #msg-header { padding: 0.5rem 0.85rem; min-height: 42px; }
  #msg-header-title { font-size: 0.9rem; }
  #msg-header-meta { font-size: 0.65rem; }
  .chat-header-actions .btn { padding: 0.3rem 0.55rem; font-size: 0.7rem; }
}

/* ── Ops Calc-Result: stack auf Phone ───────────────────── */
@media (max-width: 720px) {
  #ops-calc { gap: 0.5rem; }
  #ops-calc input, #ops-calc select {
    flex: 1 1 calc(50% - 0.5rem); min-width: 0;
  }
  .ops-calc-result {
    margin-left: 0 !important;
    flex-basis: 100%;
    margin-top: 0.5rem;
  }
}
@media (max-width: 520px) {
  #ops-calc input, #ops-calc select { flex-basis: 100%; }
}

/* ── Auto-fill grid zu eng auf Phone: minmax 240 → 100% ── */
@media (max-width: 520px) {
  #ops-inventory, #ops-suppliers, #grow-plants {
    grid-template-columns: 1fr !important;
  }
}

/* ── Modal-Overlay generic: padding fuer Backdrop ───────── */
@media (max-width: 720px) {
  .modal-overlay { padding: 0 !important; }
}

/* ── Cards: Padding kleiner auf Phone ──────────────────── */
@media (max-width: 520px) {
  .card { padding: 0.95rem 1rem; }
  .card-sm { padding: 0.7rem 0.85rem; }
}

/* ── Section-Title: Note neben Text bei Phone weglassen ── */
@media (max-width: 520px) {
  .editorial-section-note { display: none; }
  .section-title.editorial-numbered { gap: 0.4rem !important; }
}

/* ── Editorial-Divider: leiser auf Phone ──────────────── */
@media (max-width: 520px) {
  .editorial-divider { margin: 0.8rem 0; }
  .editorial-divider svg { width: 16px; height: 16px; }
}

/* ── Phase-V Profile-Grid: stack ────────────────────── */
@media (max-width: 720px) {
  .v-profile-grid {
    grid-template-columns: 1fr !important;
    gap: 0.4rem;
  }
}

/* ── Identity Sub-Nav: Persona-Create-Button kompakter ── */
@media (max-width: 520px) {
  .id-meta-row .btn { font-size: 0.72rem; padding: 0.3rem 0.55rem; }
  .id-meta-row strong { font-size: 0.85rem; }
  .id-list-item {
    padding: 0.5rem 0.7rem;
    font-size: 0.78rem;
  }
}

/* ── Crud-Modal: Forms kompakter auf Phone ─────────────── */
@media (max-width: 520px) {
  .crud-modal-box { padding: 0.85rem 0.9rem !important; }
  .crud-modal-form > * { margin-bottom: 0.5rem; }
  .crud-modal-form label {
    font-size: 0.75rem;
    margin-bottom: 0.2rem;
    display: block;
  }
  .crud-modal-actions {
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .crud-modal-actions .btn {
    flex: 1 1 calc(50% - 0.4rem);
    min-width: 0;
    font-size: 0.8rem;
  }
}

/* ── Login-Form & Auth-Screen ──────────────────────────── */
@media (max-width: 520px) {
  #login-screen { padding: 1rem !important; }
  #login-form { width: 100% !important; max-width: 360px; }
  #login-form input { font-size: 16px !important; padding: 0.7rem 0.9rem; }
  #login-form button { padding: 0.7rem 1rem; font-size: 0.95rem; }
}

/* ── Polish-Charts (skeletons + bars): scale gut ───────── */
@media (max-width: 520px) {
  .polish-chart { padding: 0.5rem 0.7rem; }
  .polish-chart-title { font-size: 0.78rem; margin-bottom: 0.3rem; }
  .polish-chart svg {
    width: 100% !important;
    height: auto !important;
    max-height: 100px;
  }
}

/* ── Daily-Note + Notes Editor: full-width Textarea ────── */
@media (max-width: 720px) {
  .daily-note-controls { flex-wrap: wrap; gap: 0.4rem; }
  .daily-note-controls input[type="date"] {
    font-size: 0.85rem;
    flex: 1 1 100%;
  }
  textarea#daily-note-content {
    min-height: 180px;
    font-size: 0.85rem;
  }
}

/* ── Webhooks-Tab + Logs viewer ────────────────────────── */
@media (max-width: 520px) {
  .webhook-list-item {
    flex-wrap: wrap;
    padding: 0.5rem 0.7rem;
    font-size: 0.75rem;
  }
  .webhook-list-meta { flex-basis: 100%; font-size: 0.65rem; margin-top: 0.2rem; }
}

/* ── Header bei kompakten Laptops noch Padding-friendly ─ */
@media (min-width: 901px) and (max-width: 1180px) {
  #header { padding: 0.55rem 0.95rem; }
  .header-akh-avatar { width: 22px; height: 22px; }
}

/* ── Wide-Desktop ≥1900px: groesserer Hero ───────────── */
@media (min-width: 1900px) {
  .editorial-hero-title { font-size: 4.5rem !important; }
  .editorial-hero-meta { font-size: 0.85rem; }
  .archmap-title { font-size: 2.6rem !important; }
}

/* ── XL Desktop ≥2400px (5K/6K): keine Mini-Components ── */
@media (min-width: 2400px) {
  html { font-size: 17px; }
  .tab-view { max-width: 1700px; }
}

/* ── Activity-Ribbon im Header (Phase Z.G) ────────────── */
@media (max-width: 720px) {
  .dashboard-activity-ribbon {
    margin: 0.4rem 0.7rem 0;
    font-size: 0.7rem;
  }
}

/* ── Body-Scroll auf iOS Bounce ────────────────────────── */
@media (max-width: 720px) {
  body { -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
}

/* ── Theme-Toggle bei Mini-Phone: nur Symbol ──────────── */
@media (max-width: 380px) {
  .theme-toggle { padding: 0.25rem 0.45rem !important; font-size: 0.62rem !important; }
}

/* ── Phase-V Channel-Cards bei sehr engen Screens ──── */
@media (max-width: 380px) {
  .v-card { padding: 0.55rem 0.7rem; }
  .v-card-head { font-size: 0.8rem; }
  .v-card-detail { font-size: 0.65rem; }
  .v-chip-tool { font-size: 0.6rem !important; padding: 0.1rem 0.35rem; }
}

/* ── MCP-Panel Cards bei Phone enger ──────────────────── */
@media (max-width: 520px) {
  .mcp-card { padding: 0.7rem 0.85rem; }
  .mcp-card-name { font-size: 0.85rem; }
  .mcp-card-status { font-size: 0.7rem; }
}

/* ── Events-Ticker im Bottom-Sheet: Items lesbar ──── */
@media (max-width: 720px) {
  .events-ticker-item {
    font-size: 0.72rem;
    padding: 0.35rem 0.6rem;
  }
  .events-ticker-time { font-size: 0.6rem; }
}

/* ── Nav-Tab bei landscape Phone (kurz + breit) ──────── */
@media (max-height: 480px) and (orientation: landscape) {
  #tab-nav { padding: 0 0.4rem; }
  .editorial-hero { padding: 0.6rem 0; }
  .editorial-hero-title { font-size: 1.4rem !important; }
  .editorial-hero-marginalia { display: none; }
}

/* ── Print: hide overlays/nav fuer Sauberkeit ────────── */
@media print {
  #header, #tab-nav, .events-ticker, .notif-popover, .cmdk-overlay,
  .archmap-panel, .archmap-legend, .archmap-hint { display: none !important; }
  .tab-view { padding: 0 !important; }
  body { background: white !important; color: black !important; }
}