/* ============================================================
   u flow – Mobil (Phones). Aktiv über body.mobil (per mobile.js/matchMedia).
   Zwei Vollbild-Ansichten (Fokus / Karten) + Tab-Leiste unten.
   ============================================================ */

/* Tab-Leiste: nur mobil sichtbar */
.mobil-tabs { display: none; }

body.mobil {
  padding-left: 0 !important;
  padding-bottom: calc(74px + env(safe-area-inset-bottom));
  touch-action: manipulation; /* Scrollen + bewusstes Pinch-Zoom, aber kein Doppeltipp-Zoom */
}

/* iOS zoomt Formularfelder automatisch, sobald deren Schrift kleiner als 16px ist.
   Die Mindestgröße verhindert diesen Sprung, ohne die barrierefreie Pinch-Geste abzuschalten. */
body.mobil input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body.mobil textarea,
body.mobil select,
body.mobil [contenteditable="true"] { font-size: 16px !important; }
body.mobil button,
body.mobil a,
body.mobil input,
body.mobil select,
body.mobil textarea { touch-action: manipulation; }

/* ---------- Fokus wird zur oberen Leiste + Vollbild-Inhalt ---------- */
body.mobil .fokus {
  position: static; width: 100% !important; height: auto; max-height: none;
  overflow: visible; border: none; box-shadow: none; background: transparent;
}
body.mobil .fokus-rail,
body.mobil .fokus-resize,
body.mobil .fokus-fuss,
body.mobil .fokus-toggle { display: none !important; }
body.mobil .fokus-kopf { padding: calc(10px + env(safe-area-inset-top)) 16px 10px; position: relative; }
/* Aktionen (Theme + Avatar) oben rechts, Logo bleibt mittig */
body.mobil .fokus-aktionen {
  position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 12px; /* = .baender-Einzug → bündig */
  z-index: 9700; /* über der darunterliegenden Board-Kopfleiste: Avatar/Suche bleiben anklickbar */
  display: flex; align-items: center; gap: 10px; margin: 0;
}
/* Logo mobil VOLLSTÄNDIG zeigen: mobil ist nie .fokus-auf → sonst blendet die eingeklappt-Regel
   Punkte + Wort aus und es bleibt nur das „U“. Kopf einzeilig + zentriert. */
body.mobil .fokus-kopf { flex-direction: row; justify-content: flex-start; }
body.mobil .logo .dots { display: inline-flex !important; }
body.mobil .logo .word-slot { display: grid !important; }
/* Menü-Kreis (Avatar) rechts genauso groß wie der u-Kreis (Logo-Mark = 36px) */
body.mobil .avatar-btn, body.mobil .avatar-bild { width: 36px; height: 36px; }

/* Inhalt (Zeitachse) im Fokus-Modus zeigen – untereinander, volle Breite */
body.mobil .fokus-inhalt { display: flex !important; flex-direction: column; overflow: visible; padding: 0 14px 8px; }
body.mobil .fokus-inhalt > * { width: 100%; }
/* Aufgabenliste voll ausbreiten (kein interner Scroll – die Seite scrollt) */
body.mobil .fokus-aufgaben { flex: none !important; min-height: 0 !important; }
body.mobil #fokus-aufgaben .fokus-body { flex: none !important; overflow: visible !important; min-height: 0 !important; max-height: none !important; }
body.mobil.ansicht-karten .fokus-inhalt { display: none !important; }

/* Ansichts-Umschaltung: Kopf bleibt IMMER (U-Menü/Konto erreichbar) */
body.mobil.ansicht-fokus #desktop { display: none; }
body.mobil.ansicht-karten #desktop { display: block; }

/* Ansichten-Leiste mobil: eine Zeile, horizontal scrollbar (kein Umbruch) */
body.mobil .ansichten-leiste {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 8px 12px 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
body.mobil .ansichten-leiste::-webkit-scrollbar { display: none; }
body.mobil .ansicht-tab, body.mobil .ansicht-add, body.mobil .ansicht-del { flex: 0 0 auto; }

/* ---------- Landkarten mobil: alle Landkarten der Ansicht als Liste ---------- */
body.mobil #desktop { padding: 6px 0 0; }
body.mobil .neu-band {
  width: auto;
  min-width: 0;
  height: 38px;
  min-height: 38px;
  justify-content: flex-start;
  margin: 14px 0 0 12px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 13px;
}
body.mobil .neu-band .neu-plus { font-size: 16px; }
body.mobil .baender { padding: 6px 12px 0; gap: 14px; }
body.mobil .band { width: 100% !important; min-width: 0 !important; }
body.mobil .band-flaeche {
  height: auto !important; min-height: 0 !important;
  display: flex; flex-direction: column; gap: 8px; padding: 10px;
}
body.mobil .band-resize,
body.mobil .band-resize-x { display: none !important; }
body.mobil .band-griff { display: none !important; }

/* Karte = kompakte Zeile (Kürzel · Titel · Fuß); freie Position/Details aus */
body.mobil .karte {
  position: static !important; left: auto !important; top: auto !important;
  width: 100% !important; height: auto !important; transform: none !important;
  min-height: 0;
  cursor: pointer;
  touch-action: auto !important; /* Desktop hat touch-action:none (Drag) → mobil wieder scrollbar */
}
body.mobil .band-flaeche { touch-action: auto !important; }
body.mobil .karte > *:not(.karte-kuerzel):not(.karte-titel):not(.karte-fuss) { display: none !important; }
body.mobil .karte-titel { margin-bottom: 8px; }
body.mobil .karte[data-prio="niedrig"] { opacity: 1; } /* auf Mobil nicht ausgrauen */

body.mobil .band-kopf { min-height: 46px; padding: 9px 9px 8px 13px; }
body.mobil .band-add { margin-left: auto; opacity: 1; }
body.mobil .band-mehr-menu {
  top: calc(100% - 1px);
  right: 6px;
  width: min(244px, calc(100vw - 44px));
}

/* Archiv etwas kompakter */
body.mobil .archiv { margin: 24px 12px; max-width: none; }
body.mobil .app-footer { padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); }

/* ---------- Panel als Bottom-Sheet ---------- */
body.mobil .panel-overlay { align-items: flex-end; }
body.mobil .panel {
  width: 100%; max-width: none; height: auto; max-height: 92vh;
  border-radius: 22px 22px 0 0; border-bottom: none;
  padding: 14px 20px calc(26px + env(safe-area-inset-bottom));
  animation: sheet-hoch 0.26s cubic-bezier(0.2, 0.7, 0.3, 1);
}
body.mobil .panel::before {
  content: ""; display: block; width: 40px; height: 4px; border-radius: 2px;
  background: var(--karte-rand); margin: 0 auto 14px;
}

/* Planung bleibt direkt editierbar, liegt mobil aber stabil als Bottom-Sheet statt
   an einem kleinen Chip außerhalb des sichtbaren Bereichs. */
body.mobil .plan-pop {
  left: 12px !important; right: 12px !important; top: auto !important;
  bottom: calc(72px + env(safe-area-inset-bottom)); width: auto; max-height: calc(100vh - 96px - env(safe-area-inset-bottom));
  border-radius: 18px;
}
@keyframes sheet-hoch { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { body.mobil .panel { animation: none; } }

/* ---------- Tab-Leiste unten ---------- */
body.mobil .mobil-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 12000;
  min-height: 66px;
  padding: 7px 8px calc(6px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--karte-rand);
  box-shadow: 0 -8px 24px rgba(43, 42, 40, 0.06);
}
.mtab {
  position: relative;
  min-width: 0; min-height: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px;
  border: none; background: none; cursor: pointer; padding: 5px 2px 3px;
  font-family: inherit; color: var(--text-leise); border-radius: 12px;
  transition: color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.mtab-icon {
  width: 23px; height: 23px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 19px; line-height: 1;
}
.mtab-icon svg {
  width: 23px; height: 23px;
  fill: none; stroke: currentColor; stroke-width: 1.65;
  stroke-linecap: round; stroke-linejoin: round;
}
.mtab-finance-icon {
  border: 1.5px solid currentColor; border-radius: 50%;
  box-sizing: border-box; font-size: 14px; font-weight: 650;
}
.mtab-label {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 10.5px; font-weight: 650; line-height: 1.15;
}
.mtab[aria-pressed="true"] {
  color: var(--akzent);
  background: color-mix(in srgb, var(--akzent) 8%, transparent);
}
.mtab:active { background: rgba(40, 39, 37, 0.08); }

/* „+ Aufgabe": symmetrische zentrale Hauptaktion */
.mtab-add {
  color: var(--akzent);
  justify-content: flex-end;
  padding-top: 0;
}
.mtab-add-plus {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-top: -20px; border-radius: 50%;
  box-sizing: border-box; padding: 0 0 3px;
  border: 4px solid rgba(255, 255, 255, 0.96);
  background: var(--akzent); color: #fff; font-size: 28px; line-height: 1; font-weight: 350;
  box-shadow: 0 5px 16px rgba(43, 42, 40, 0.28);
}
.mtab-add:active .mtab-add-plus { transform: scale(0.95); }

/* Header-„+ Aufgabe" auf Mobil aus (Auslöser ist der Tab) */
body.mobil .ft-add-btn { display: none !important; }

/* Modale (Neue Aufgabe, Login) mobil als Bottom-Sheet */
body.mobil .sync-overlay { align-items: flex-end; padding: 0; }
body.mobil .sync-card {
  width: 100%; max-width: none; border-radius: 22px 22px 0 0;
  padding: 20px 20px calc(24px + env(safe-area-inset-bottom));
  animation: sheet-hoch 0.26s cubic-bezier(0.2, 0.7, 0.3, 1);
}
body.mobil .na-overlay .sync-card { max-height: min(90dvh, 780px); padding-top: 18px; }
body.mobil .na-kopf { margin-bottom: 13px; }
body.mobil .na-text { min-height: 56px; font-size: 16px; } /* verhindert iOS-Eingabezoom */
body.mobil .na-project-trigger { min-height: 70px; padding: 12px 13px; }
body.mobil .na-project-results { max-height: min(36dvh, 290px); }
body.mobil .na-project-option { min-height: 58px; padding: 11px; }
body.mobil .na-selected-tasks { grid-template-columns: 72px minmax(0, 1fr); padding-inline: 9px; }
body.mobil .na-date-chip { min-height: 40px; padding: 8px 13px; }
body.mobil .na-fuss { margin-top: 13px; padding-top: 13px; }
body.mobil .na-fuss .sync-link,
body.mobil .na-fuss .sync-btn { min-height: 44px; }

/* ---------- Cockpit-Theme auf Mobil ----------
   Am Desktop dunkelt Cockpit nur die Fokus-Spalte; mobil ist Fokus eine
   Vollbild-Ansicht -> der ganze Hintergrund muss dunkel werden, sonst
   scheint der warme Body durch die transparente .fokus (heller Text = unlesbar).
   Die Karten-Ansicht bleibt warm (wie das Board am Desktop). */
body.mobil.theme-cockpit.ansicht-fokus { background: #1d1915; }
body.mobil.theme-cockpit.ansicht-fokus::before {
  background:
    radial-gradient(1200px 800px at 20% 10%, #24201b, transparent 60%),
    linear-gradient(160deg, #201c17, #17130f);
}
/* Tab-Leiste in der dunklen Fokus-Ansicht mitdunkeln */
body.mobil.theme-cockpit.ansicht-fokus .mobil-tabs {
  background: rgba(23, 20, 16, 0.92);
  border-top-color: rgba(255, 255, 255, 0.09);
}
body.mobil.theme-cockpit.ansicht-fokus .mtab { color: #948a7b; }
body.mobil.theme-cockpit.ansicht-fokus .mtab[aria-pressed="true"] { color: #e3ad74; }
body.mobil.theme-cockpit.ansicht-fokus .mtab-add { color: #e3ad74; }
body.mobil.theme-cockpit.ansicht-fokus .mtab:active { background: rgba(255, 255, 255, 0.06); }
body.mobil.theme-cockpit.ansicht-fokus .mtab[aria-pressed="true"] { background: rgba(227, 173, 116, 0.08); }
body.mobil.theme-cockpit.ansicht-fokus .mtab-add-plus { border-color: rgba(23, 20, 16, 0.98); }

/* Touch: Aufgaben-Aktionen ohne Hover erreichbar (immer sichtbar, dezent) */
body.mobil .task-del,
body.mobil .task-aufwand:not(.gesetzt) { opacity: 0.9; pointer-events: auto; }
body.mobil .task-grip { opacity: 0.5; }
body.mobil .ft-info { opacity: 0.55; }
body.mobil .ft-grip { width: 28px; height: 38px; margin-left: -3px; opacity: 0.66; }
body.mobil .ft-row { grid-template-columns: 25px 18px minmax(0, 1fr) auto 19px; gap: 6px; }