e.stopPropagation()} onSubmit={submit}>

Auftrag einreichen

{sent ? (

Danke! Der Auftrag ist eingegangen und wird von {leader?.name || "der Leitung"} gesichtet und zugewiesen.

) : ( <>

Für externe Anfragen ohne eigenen Zugang – geht direkt an {leader?.name || "die Leitung"} und wird von dort verteilt.

Titel setTitle(e.target.value)} /> {touched && !title.trim() &&

Bitte einen Titel angeben.

} Beschreibung

setDesc(e.target.value)} rows={3} placeholder="Was genau zu tun ist" />
              {touched && !desc.trim() && <p className="field-error">Bitte eine Beschreibung angeben.</p>}
            </label>

<label className="field">
              <span>Art</span>
              <select value={taskType} onChange={(e) => setTaskType(e.target.value)}>
                {TASK_TYPES.map((t) => (
                  <option key={t} value={t}>{t}</option>
                ))}
              </select>
            </label>

<UrgencyPicker value={priority} onChange={setPriority} dueDate={due} onDueDateChange={setDue} />
            {touched && priority === "anderer_tag" && !due && <p className="field-error">Bitte ein Datum wählen.</p>}

<label className="field">
              <span>Kontakt – Name</span>
              <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Auftraggeber" />
              {touched && !name.trim() && <p className="field-error">Name ist erforderlich.</p>}
            </label>

<label className="field">
              <span>Kontakt – Handynummer</span>
              <input
                type="tel"
                inputMode="numeric"
                value={phone}
                onChange={(e) => setPhone(e.target.value.replace(/\D/g, ""))}
                placeholder="Für Rückfragen"
              />
              {touched && !phone.trim() && <p className="field-error">Handynummer ist erforderlich.</p>}
            </label>

<button className="submit-btn" type="submit">Auftrag einreichen</button>
          </>
        )}
      </form>
    </div>
  );
}

function LoginScreen({ team, onLogin, onCreateMember, stops, onExternalTask }) {
  const [selected, setSelected] = useState(null); // member being logged in / set up
  const [mode, setMode] = useState(null); // 'login' | 'setup'
  const [pin, setPin] = useState("");
  const [pin2, setPin2] = useState("");
  const [error, setError] = useState("");
  const [externalOpen, setExternalOpen] = useState(false);
  const [externalSent, setExternalSent] = useState(false);

const openMember = (m) => {
    setSelected(m);
    setMode(m.pin ? "login" : "setup");
    setPin("");
    setPin2("");
    setError("");
  };

const closeOverlay = () => {
    setSelected(null);
    setMode(null);
    setPin("");
    setPin2("");
    setError("");
  };

const submitLogin = () => {
    if (pin === selected.pin) {
      onLogin(selected);
    } else {
      setError("PIN stimmt nicht.");
      setPin("");
    }
  };

const tourCounters = useMemo(() => computeTourCounters(stops), [stops]);

return (
    <div className="login-screen">
      <img src={HEADER_IMG} alt="Breakin' Circus – Urban Dance & Artistic Show · Tournee 2026" className="hero-banner" />

{tourCounters && !tourCounters.started && (
        <div className="tour-counter-bar">
          <div className="counter-pill is-static counter-pill-wide">
            <span className="counter-num">Tour startet in {tourCounters.daysUntilStart} Tag{tourCounters.daysUntilStart === 1 ? "" : "en"}</span>
            <span className="counter-label">
              {tourCounters.firstShow.city} · {new Date(tourCounters.firstShow.date + "T00:00:00").toLocaleDateString("de-DE", { day: "2-digit", month: "short", year: "numeric" })}
            </span>
          </div>
        </div>
      )}

{tourCounters && tourCounters.started && (
        <div className="tour-counter-bar">
          <div className="counter-pill is-static">
            <span className="counter-num">Show {tourCounters.showLabel}<span className="counter-total">/{tourCounters.showTotal}</span></span>
            <span className="counter-label">
              {tourCounters.isToday ? "heute" : `nächste · ${new Date(tourCounters.showStop.date + "T00:00:00").toLocaleDateString("de-DE", { day: "2-digit", month: "short" })}`}
            </span>
          </div>
          <div className="counter-pill is-static">
            <span className="counter-num">Stadt {tourCounters.cityIndex}<span className="counter-total">/{tourCounters.cityTotal}</span></span>
            <span className="counter-label">{tourCounters.showStop.city}</span>
          </div>
        </div>
      )}

<button className="external-cta" onClick={() => { setExternalOpen(true); setExternalSent(false); }}>
        <span className="external-cta-icon"><ClipboardList size={20} /></span>
        <span className="external-cta-text">
          <span className="external-cta-title">Auftrag einreichen</span>
        </span>
      </button>

<a href="tel:+491705532534" className="contact-info-strip">
        <Phone size={13} />
        <span>Ansprechpartner: <strong>Daniel</strong> +49 170 5532534</span>
      </a>

<div className="login-body">
        {!selected && (
          <>
            <p className="login-hint">Anmeldung für Fahrteam</p>
            <div className="member-grid">
              {team.map((m) => (
                <button key={m.id} className="member-tile" onClick={() => openMember(m)}>
                  <span className="member-initial">{m.name.charAt(0)}</span>
                  <span className="member-name">{m.name}</span>
                  <span className="member-role">{m.role}</span>
                  {!m.pin && <span className="member-flag">Konto einrichten</span>}
                </button>
              ))}
            </div>
          </>
        )}

{selected && (
          <div className="pin-panel">
            <button className="back-link" onClick={closeOverlay}>← Andere Person</button>
            <div className="pin-who">
              <span className="member-initial">{selected.name.charAt(0)}</span>
              <div>
                <div className="pin-who-name">{selected.name}</div>
                <div className="pin-who-role">{selected.role}</div>
              </div>
            </div>

{mode === "login" && (
              <>
                <p className="pin-label"><Lock size={12} /> PIN eingeben</p>
                <PinPad value={pin} onChange={(v) => { setPin(v); setError(""); }} />
                {error && <p className="pin-error">{error}</p>}
                <button className="submit-btn" disabled={pin.length !== 4} onClick={submitLogin}>Anmelden</button>
              </>
            )}

{mode === "setup" && (
              <>
                <p className="pin-label"><Lock size={12} /> Neue PIN festlegen (4 Ziffern)</p>
                <PinPad value={pin} onChange={(v) => { setPin(v); setError(""); }} />
                {pin.length === 4 && (
                  <>
                    <p className="pin-label" style={{ marginTop: 10 }}>PIN bestätigen</p>
                    <PinPad value={pin2} onChange={(v) => { setPin2(v); setError(""); }} />
                  </>
                )}
                {error && <p className="pin-error">{error}</p>}
                <button className="submit-btn" disabled={pin.length !== 4 || pin2.length !== 4} onClick={submitSetup}>
                  Konto anlegen & anmelden
                </button>
              </>
            )}
          </div>
        )}
      </div>

{externalOpen && (
        <ExternalTaskModal
          stops={stops}
          team={team}
          onClose={() => setExternalOpen(false)}
          onSubmit={(task) => { onExternalTask(task); setExternalSent(true); }}
          sent={externalSent}
        />
      )}
    </div>
  );
}

// ---------- Main app pieces ----------

function AddStopModal({ open, onClose, onCreate }) {
  const [isOff, setIsOff] = useState(false);
  const [city, setCity] = useState("");
  const [arena, setArena] = useState("");
  const [date, setDate] = useState("");
  const [times, setTimes] = useState("");

if (!open) return null;

const submit = (e) => {
    e.preventDefault();
    if (!date) return;
    if (!isOff && !city.trim()) return;
    onCreate({
      id: uid(),
      type: isOff ? "off" : "show",
      city: isOff ? "OffDay" : city.trim(),
      arena: isOff ? "" : arena.trim(),
      date,
      times: isOff ? [] : times.split(",").map((t) => t.trim()).filter(Boolean),
    });
    setCity("");
    setArena("");
    setDate("");
    setTimes("");
    setIsOff(false);
    onClose();
  };

return (
    <div className="modal-backdrop" onClick={onClose}>
      <form className="modal" onClick={(e) => e.stopPropagation()} onSubmit={submit}>
        <div className="modal-head">
          <span className="modal-title">Station hinzufügen</span>
          <button type="button" className="icon-btn" onClick={onClose}><X size={16} /></button>
        </div>

<label className="offday-toggle">
          <input type="checkbox" checked={isOff} onChange={(e) => setIsOff(e.target.checked)} />
          <span>OffDay (kein Auftritt)</span>
        </label>

{!isOff && (
          <>
            <label className="field">
              <span>Stadt</span>
              <input autoFocus value={city} onChange={(e) => setCity(e.target.value)} placeholder="z. B. Suhl" />
            </label>
            <label className="field">
              <span>Arena (optional)</span>
              <input value={arena} onChange={(e) => setArena(e.target.value)} placeholder="z. B. Stadthalle" />
            </label>
            <label className="field">
              <span>Uhrzeiten, mit Komma getrennt (optional)</span>
              <input value={times} onChange={(e) => setTimes(e.target.value)} placeholder="z. B. 14:00, 19:00" />
            </label>
          </>
        )}

<label className="field">
          <span>Datum</span>
          <input type="date" value={date} onChange={(e) => setDate(e.target.value)} />
        </label>

<button className="submit-btn" type="submit">Station speichern</button>
      </form>
    </div>
  );
}

function NewTaskModal({ open, onClose, onCreate, team, stops, defaultStopId, currentUser }) {
  const [title, setTitle] = useState("");
  const [desc, setDesc] = useState("");
  const [assignee, setAssignee] = useState(team[0]?.id || "");
  const [stopId, setStopId] = useState(defaultStopId || stops[0]?.id || "");
  const [priority, setPriority] = useState("mittel");
  const [due, setDue] = useState("");
  const [attachments, setAttachments] = useState([]);

useEffect(() => {
    if (open) {
      setStopId(defaultStopId || stops[0]?.id || "");
      setAssignee(currentUser?.id || team[0]?.id || "");
      setAttachments([]);
    }
  }, [open, defaultStopId, stops, team, currentUser]);

if (!open) return null;

const submit = (e) => {
    e.preventDefault();
    if (!title.trim() || !assignee || !stopId) return;
    onCreate({
      id: uid(),
      title: title.trim(),
      desc: desc.trim(),
      assignee,
      stopId,
      priority,
      due,
      status: "offen",
      createdBy: currentUser?.id || null,
      attachments,
      createdAt: Date.now(),
    });
    setTitle("");
    setDesc("");
    setDue("");
    setAttachments([]);
    onClose();
  };

return (
    <div className="modal-backdrop" onClick={onClose}>
      <form className="modal" onClick={(e) => e.stopPropagation()} onSubmit={submit}>
        <div className="modal-head">
          <span className="modal-title">Neuer Auftrag</span>
          <button type="button" className="icon-btn" onClick={onClose}><X size={16} /></button>
        </div>

<label className="field">
          <span>Titel</span>
          <input autoFocus value={title} onChange={(e) => setTitle(e.target.value)} placeholder="z. B. Artists vom Hotel abholen" />
        </label>

<label className="field">
          <span>Details (optional)</span>
          <textarea value={desc} onChange={(e) => setDesc(e.target.value)} rows={2} placeholder="Kontext für die zuständige Person" />
        </label>

<div className="field-row">
          <label className="field">
            <span>Station</span>
            <select value={stopId} onChange={(e) => setStopId(e.target.value)}>
              {stops.map((s) => (
                <option key={s.id} value={s.id}>
                  {s.city} · {new Date(s.date + "T00:00:00").toLocaleDateString("de-DE", { day: "2-digit", month: "short" })}{s.arena ? ` · ${s.arena}` : ""}
                </option>
              ))}
            </select>
          </label>
          <label className="field">
            <span>Zuweisen an</span>
            <select value={assignee} onChange={(e) => setAssignee(e.target.value)}>
              {team.map((m) => (
                <option key={m.id} value={m.id}>{m.name} · {m.role}</option>
              ))}
            </select>
          </label>
        </div>

<div className="field-row">
          <label className="field">
            <span>Priorität</span>
            <div className="priority-picker">
              {Object.entries(PRIORITIES).map(([key, p]) => (
                <button
                  type="button"
                  key={key}
                  className={`prio-chip ${priority === key ? "is-on" : ""}`}
                  style={{ "--chip-color": p.color }}
                  onClick={() => setPriority(key)}
                >
                  {p.label}
                </button>
              ))}
            </div>
          </label>
          <label className="field">
            <span>Fällig (optional)</span>
            <input type="date" value={due} onChange={(e) => setDue(e.target.value)} />
          </label>
        </div>

<button className="submit-btn" type="submit">Auftrag erstellen</button>
      </form>
    </div>
  );
}

function TaskCard({ task, member, stop, team, canReassign, canDelete, onToggle, onDelete, onAssign, onBroadcast }) {
  const prio = PRIORITIES[task.priority] || PRIORITIES.normal;
  const st = STATUSES[task.status] || STATUSES.offen;
  const deadlineInfo = computeDeadline(task);
  const overdue = deadlineInfo?.overdue || false;
  const unassigned = !task.assignee;
  const showReassign = unassigned || canReassign;
  const showBroadcast = canReassign && !task.broadcastId && onBroadcast;
  const [confirmDelete, setConfirmDelete] = useState(false);
  const confirmTimer = useRef(null);

useEffect(() => () => clearTimeout(confirmTimer.current), []);

return (
    <div className={`task-card status-${task.status} ${overdue ? "is-overdue" : ""} ${unassigned ? "is-unassigned" : ""}`}>
      <button
        className="status-pill"
        style={{ "--status-color": st.color }}
        onClick={() => onToggle(task.id)}
        aria-label="Status umschalten"
        title="Tippen, um zum nächsten Status zu wechseln"
      >
        {task.status === "erledigt" ? <Check size={13} /> : <span className="status-pill-dot" />}
      </button>
      <div className="task-body">
        <div className="badge-row">
          <button className="status-badge" style={{ "--status-color": st.color }} onClick={() => onToggle(task.id)}>
            {task.status === "erledigt" && <Check size={12} />}
            {st.short}
          </button>
          {deadlineInfo && (
            <div className={`urgency-badge ${overdue ? "is-overdue" : ""}`} style={{ "--urgency-color": prio.color }}>
              {overdue && <AlertCircle size={11} />}
              <span>{overdue ? "Überfällig" : prio.label} · {deadlineInfo.label}</span>
            </div>
          )}
        </div>
        <div className="task-top">
          <span className="task-title">{task.title}</span>
        </div>
        {task.taskType && <span className="type-badge">{task.taskType}</span>}
        {task.desc && <p className="task-desc">{task.desc}</p>}
        {task.attachments?.length > 0 && (
          <div className="card-attach-row">
            {task.attachments.map((a) => (
              <a key={a.id} href={a.dataUrl} download={a.name} className="card-attach-item" title={a.name}>
                {a.type === "image" ? (
                  <img src={a.dataUrl} alt={a.name} />
                ) : (
                  <span className="card-attach-pdf"><FileText size={16} /></span>
                )}
              </a>
            ))}
          </div>
        )}
        <div className="task-meta">
          {showReassign ? (
            <select className="assign-select" value={task.assignee || ""} onChange={(e) => onAssign(task.id, e.target.value)}>
              <option value="" disabled>Zuweisen an…</option>
              {team.map((m) => (
                <option key={m.id} value={m.id}>{m.name}</option>
              ))}
            </select>
          ) : (
            <span className="meta-item"><User size={11} /> {member?.name || "—"}</span>
          )}
          <span className="meta-item"><MapPin size={11} /> {stop?.city}</span>
          {task.due && (
            <span className={`meta-item ${overdue ? "meta-overdue" : ""}`}>
              <Clock size={11} /> {new Date(task.due + "T00:00:00").toLocaleDateString("de-DE", { day: "2-digit", month: "short" })}
            </span>
          )}
          {(task.contactName || task.contactPhone) && (
            task.contactPhone ? (
              <a
                href={`tel:${task.contactPhone.replace(/[^\d+]/g, "")}`}
                className="meta-item meta-contact"
                onClick={(e) => e.stopPropagation()}
              >
                <Phone size={11} /> {task.contactName || task.contactPhone}
              </a>
            ) : (
              <span className="meta-item"><Phone size={11} /> {task.contactName}</span>
            )
          )}
        </div>
        {task.broadcastId && <span className="broadcast-badge"><Users size={11} /> {team.length === 2 ? "An beide verteilt" : "An alle verteilt"}</span>}
        {showBroadcast && (
          <button
            type="button"
            className="broadcast-btn"
            onClick={() => onBroadcast(task)}
          >
            <Users size={13} /> {team.length === 2 ? "Auch an Kollegen geben" : "An alle verteilen"}
          </button>
        )}
      </div>
      {canDelete && (
        <button
          className={`del-btn ${confirmDelete ? "is-confirming" : ""}`}
          onClick={handleDeleteClick}
          aria-label={confirmDelete ? "Wirklich löschen? Nochmal tippen zum Bestätigen" : "Löschen"}
          title={confirmDelete ? "Nochmal tippen, um wirklich zu löschen" : "Löschen"}
        >
          {confirmDelete ? <span className="del-confirm-text">Wirklich?</span> : <X size={13} />}
        </button>
      )}
    </div>
  );
}

function RouteMapModal({ stop, imageUrl, onClose, onSave }) {
  const [uploading, setUploading] = useState(false);

return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal routemap-modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <span className="modal-title">Anfahrt · {stop.city}</span>
          <button type="button" className="icon-btn" onClick={onClose}><X size={16} /></button>
        </div>

{imageUrl ? (
          <img src={imageUrl} alt={`Anfahrtsplan ${stop.city}`} className="routemap-image" />
        ) : (
          <p className="modal-hint">Für diese Station liegt noch kein Anfahrtsplan vor.</p>
        )}

<label className="attach-btn" style={{ justifyContent: "center", width: "100%" }}>
          <Navigation size={14} /> {uploading ? "Wird hochgeladen…" : imageUrl ? "Bild ersetzen" : "Foto hochladen"}
          <input type="file" accept="image/*" onChange={handleFile} hidden disabled={uploading} />
        </label>
      </div>
    </div>
  );
}

function TourTimeline({ stops, tasks, routeMaps, onSaveRouteMap, onSelectStop }) {
  const todayStr = new Date().toISOString().slice(0, 10);
  const [mapStop, setMapStop] = useState(null);

return (
    <div className="page">
      <h1 className="page-title">Tourplan</h1>
      <p className="page-sub">Breakin' Circus · Tournee 2026 · {stops.reduce((sum, s) => sum + (s.type === "show" ? Math.max(s.times.length, 1) : 0), 0)} Shows</p>
      <p className="tl-placeholder-note">Venue-Adressen vor Tourstart bitte prüfen · Hotels folgen.</p>
      <div className="timeline">
        {stops.map((s) => {
          const isOff = s.type !== "show";
          const du = daysUntil(s.date);
          const isPast = du !== null && du < 0;
          const isToday = s.date === todayStr;
          const openTasks = tasks.filter((t) => t.stopId === s.id && t.status !== "erledigt").length;
          const dateObj = new Date(s.date + "T00:00:00");
          const hasRouteMap = !!routeMaps[s.id];
          return (
            <div
              key={s.id}
              className={`tl-row ${isOff ? "is-off" : ""} ${isPast ? "is-past" : ""} ${isToday ? "is-today" : ""}`}
              onClick={() => onSelectStop(s.id)}
              onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") onSelectStop(s.id); }}
              role="button"
              tabIndex={0}
            >
              <div className="tl-date">
                <span className="tl-day">{dateObj.toLocaleDateString("de-DE", { day: "2-digit" })}</span>
                <span className="tl-month">{dateObj.toLocaleDateString("de-DE", { month: "short" })}</span>
                <span className="tl-weekday">{dateObj.toLocaleDateString("de-DE", { weekday: "short" })}</span>
              </div>
              <div className="tl-line">
                <span className="tl-dot" />
              </div>
              <div className="tl-content">
                <div className="tl-top">
                  <span className="tl-city">{s.city}</span>
                  {isToday && <span className="tl-today-badge">Heute</span>}
                  {openTasks > 0 && <span className="tl-task-badge">{openTasks} offen</span>}
                </div>
                {isOff ? (
                  <span className="tl-meta">Keine Show</span>
                ) : (
                  <span className="tl-meta">
                    {[s.arena, formatTimes(s.times)].filter(Boolean).join(" · ")}
                  </span>
                )}
                {s.venueAddress && (
                  <div className="tl-address">
                    <MapPin size={10} />
                    <span>{formatAddress(s.venueAddress)}</span>
                  </div>
                )}
                {s.hotelAddress && (
                  <div className="tl-address">
                    <Moon size={10} />
                    <span>{formatAddress(s.hotelAddress)}</span>
                  </div>
                )}
                {s.specialEvent && (
                  <div className="tl-event-badge">
                    <Sparkles size={10} /> {s.specialEvent}
                  </div>
                )}
                {!isOff && (
                  <button
                    type="button"
                    className={`tl-route-btn ${hasRouteMap ? "has-map" : ""}`}
                    onClick={(e) => { e.stopPropagation(); setMapStop(s); }}
                  >
                    <Navigation size={11} /> {hasRouteMap ? "Anfahrtsplan" : "Anfahrt hinzufügen"}
                  </button>
                )}
              </div>
            </div>
          );
        })}
      </div>

{mapStop && (
        <RouteMapModal
          stop={mapStop}
          imageUrl={routeMaps[mapStop.id]}
          onClose={() => setMapStop(null)}
          onSave={(stopId, dataUrl) => { onSaveRouteMap(stopId, dataUrl); setMapStop((s) => (s ? { ...s } : s)); }}
        />
      )}
    </div>
  );
}

function NewTaskPage({ onCreate, team, stops, currentUser, onDone }) {
  const [title, setTitle] = useState("");
  const [desc, setDesc] = useState("");
  const [taskType, setTaskType] = useState(TASK_TYPES[0]);
  const [priority, setPriority] = useState("normal");
  const [due, setDue] = useState("");
  const [contactName, setContactName] = useState("");
  const [contactPhone, setContactPhone] = useState("");
  const [attachments, setAttachments] = useState([]);
  const [saved, setSaved] = useState(false);
  const [touched, setTouched] = useState(false);

const leader = team.find((m) => m.isLeader) || team[0];
  const missingContact = !contactName.trim() || !contactPhone.trim();
  const missingRequired = !title.trim() || !desc.trim() || missingContact || (priority === "anderer_tag" && !due);

const submit = (e) => {
    e.preventDefault();
    setTouched(true);
    if (missingRequired) return;

const effectiveDue = priority === "anderer_tag" ? due : todayStr();
    const stop = findStopForDate(effectiveDue, stops);

onCreate({
      id: uid(),
      title: title.trim(),
      desc: desc.trim(),
      assignee: leader?.id || "",
      stopId: stop?.id || stops[0]?.id,
      priority,
      due: effectiveDue,
      status: "offen",
      taskType,
      contactName: contactName.trim(),
      contactPhone: contactPhone.trim(),
      createdBy: currentUser?.id || null,
      attachments,
      createdAt: Date.now(),
    });

setSaved(true);
    setTimeout(() => {
      setTitle(""); setDesc(""); setDue(""); setContactName(""); setContactPhone("");
      setAttachments([]); setTaskType(TASK_TYPES[0]); setPriority("normal"); setSaved(false); setTouched(false);
      if (onDone) onDone();
    }, 900);
  };

return (
    <div className="page">
      <h1 className="page-title">Neuer Auftrag</h1>
      <p className="page-sub">Geht zunächst an {leader?.name || "die Leitung"} – wird von dort weiterverteilt</p>

<form className="page-form" onSubmit={submit}>
        <label className="field">
          <span>Titel</span>
          <input autoFocus value={title} onChange={(e) => setTitle(e.target.value)} />
          {touched && !title.trim() && <p className="field-error">Bitte einen Titel angeben.</p>}
        </label>

<label className="field">
          <span>Beschreibung</span>
          <textarea value={desc} onChange={(e) => setDesc(e.target.value)} rows={3} placeholder="Was genau zu tun ist" />
          {touched && !desc.trim() && <p className="field-error">Bitte eine Beschreibung angeben.</p>}
        </label>

<label className="field">
          <span>Art</span>
          <select value={taskType} onChange={(e) => setTaskType(e.target.value)}>
            {TASK_TYPES.map((t) => (
              <option key={t} value={t}>{t}</option>
            ))}
          </select>
        </label>

<UrgencyPicker value={priority} onChange={setPriority} dueDate={due} onDueDateChange={setDue} />
        {touched && priority === "anderer_tag" && !due && <p className="field-error">Bitte ein Datum wählen.</p>}

<label className="field">
          <span>Kontakt – Name</span>
          <input value={contactName} onChange={(e) => setContactName(e.target.value)} placeholder="Auftraggeber" />
          {touched && !contactName.trim() && <p className="field-error">Kontaktname ist erforderlich.</p>}
        </label>

<label className="field">
          <span>Kontakt – Handynummer</span>
          <input
            type="tel"
            inputMode="numeric"
            value={contactPhone}
            onChange={(e) => setContactPhone(e.target.value.replace(/\D/g, ""))}
            placeholder="Für Rückfragen"
          />
          {touched && !contactPhone.trim() && <p className="field-error">Handynummer ist erforderlich.</p>}
        </label>

<button className="submit-btn" type="submit" disabled={saved}>
          {saved ? "✓ Gespeichert" : "Auftrag erstellen"}
        </button>
      </form>
    </div>
  );
}

function SettingsPage({ currentUser, notifState, onEnableNotif, onTestNotif, themePref, onSetTheme }) {
  const isStandalone = typeof window !== "undefined" && (window.navigator.standalone || window.matchMedia?.("(display-mode: standalone)").matches);
  return (
    <div className="page">
      <h1 className="page-title">Einstellungen</h1>
      <p className="page-sub">Für {currentUser.name}</p>

<div className="settings-card">
        <div className="settings-label" style={{ marginBottom: 10 }}>Farbschema</div>
        <div className="theme-picker">
          <button className={`theme-chip ${themePref === "system" ? "is-on" : ""}`} onClick={() => onSetTheme("system")}>
            <Smartphone size={16} /> Gerätestandard
          </button>
          <button className={`theme-chip ${themePref === "light" ? "is-on" : ""}`} onClick={() => onSetTheme("light")}>
            <Sun size={16} /> Hell
          </button>
          <button className={`theme-chip ${themePref === "dark" ? "is-on" : ""}`} onClick={() => onSetTheme("dark")}>
            <Moon size={16} /> Dunkel
          </button>
        </div>
      </div>

<div className="settings-card">
        <div className="settings-row">
          <div>
            <div className="settings-label">Benachrichtigungen</div>
            <div className="settings-hint">
              {notifState === "granted" ? "Aktiviert – du erhältst Hinweise zu neuen Aufträgen." :
               notifState === "denied" ? "In den iPhone-Einstellungen blockiert. Dort für diese Web-App wieder erlauben." :
               "Noch nicht aktiviert."}
            </div>
          </div>
          <button className="settings-btn" onClick={onEnableNotif} disabled={notifState === "granted"}>
            {notifState === "granted" ? <BellRing size={15} /> : <Bell size={15} />}
            {notifState === "granted" ? "An" : "Aktivieren"}
          </button>
        </div>
        {notifState === "granted" && (
          <button className="settings-test" onClick={onTestNotif}>Test-Mitteilung senden</button>
        )}
      </div>

<div className="settings-info">
        <div className="settings-info-head"><Share size={15} /> Auf dem iPhone-Homebildschirm ablegen</div>
        <ol className="settings-steps">
          <li>Diese Seite in <strong>Safari</strong> öffnen.</li>
          <li>Unten auf das <strong>Teilen-Symbol</strong> tippen.</li>
          <li><strong>„Zum Home-Bildschirm"</strong> wählen.</li>
          <li>App vom Homebildschirm starten und hier Mitteilungen aktivieren.</li>
        </ol>
        {!isStandalone && (
          <p className="settings-warn">Hinweis: Mitteilungen funktionieren auf dem iPhone nur, wenn die Seite als Web-App über den Homebildschirm geöffnet wird.</p>
        )}
      </div>

<div className="settings-info">
        <div className="settings-info-head">Geplante Mitteilungen</div>
        <p className="settings-plan">Neuer Auftrag für dich · sofort</p>
        <p className="settings-plan">Tages-Zusammenfassung · 08:00, 13:00, 18:00 Uhr</p>
        <p className="settings-warn">Automatische Zeitpläne und Push bei geschlossener App benötigen die Server-Anbindung (siehe Hinweis unten in der Fußzeile).</p>
      </div>
    </div>
  );
}

const totalOffen = tasks.filter((t) => t.status === "offen").length;
  const totalInArbeit = tasks.filter((t) => t.status === "in_arbeit").length;
  const totalDone = tasks.filter((t) => t.status === "erledigt").length;
  const unassignedOpen = tasks.filter((t) => t.status !== "erledigt" && !t.assignee).length;

const openTasksSorted = useMemo(() => {
    return tasks
      .filter((t) => t.status !== "erledigt")
      .sort((a, b) =>
        STATUS_ORDER.indexOf(a.status) - STATUS_ORDER.indexOf(b.status) ||
        PRIORITY_ORDER.indexOf(a.priority) - PRIORITY_ORDER.indexOf(b.priority) ||
        a.createdAt - b.createdAt
      );
  }, [tasks]);

const memberById = useMemo(() => Object.fromEntries(team.map((m) => [m.id, m])), [team]);

return (
    <div className="page">
      <h1 className="page-title">Team-Übersicht</h1>
      <p className="page-sub">Alle Aufträge auf einen Blick</p>

<div className="stat-row">
        <div className="stat-card">
          <span className="stat-num" style={{ color: STATUSES.offen.color }}>{totalOffen}</span>
          <span className="stat-label">Offen</span>
        </div>
        <div className="stat-card">
          <span className="stat-num" style={{ color: STATUSES.in_arbeit.color }}>{totalInArbeit}</span>
          <span className="stat-label">In Arbeit</span>
        </div>
        <div className="stat-card">
          <span className="stat-num" style={{ color: STATUSES.erledigt.color }}>{totalDone}</span>
          <span className="stat-label">Erledigt</span>
        </div>
        <div className="stat-card">
          <span className="stat-num" style={{ color: "#E0287D" }}>{unassignedOpen}</span>
          <span className="stat-label">Nicht zugewiesen</span>
        </div>
      </div>

<div className="section-head">Pro Person</div>
      <div className="member-stat-list">
        {stats.map(({ member, offen, inArbeit, done, donePct, workPct }) => (
          <div key={member.id} className="member-stat-card">
            <span className="member-initial">{member.name.charAt(0)}</span>
            <div className="member-stat-info">
              <div className="member-stat-top">
                <span className="member-stat-name">{member.name}</span>
                <span className="member-stat-role">{member.role}</span>
              </div>
              <div className="member-stat-bar">
                <div className="member-stat-fill is-work" style={{ width: `${workPct}%` }} />
                <div className="member-stat-fill is-done" style={{ width: `${donePct}%` }} />
              </div>
            </div>
            <div className="member-stat-nums">
              <span className="member-stat-open">{offen} offen</span>
              <span className="member-stat-work">{inArbeit} in Arbeit</span>
              <span className="member-stat-done">{done} erledigt</span>
            </div>
          </div>
        ))}
      </div>

<div className="section-head">Alle offenen & laufenden Aufträge</div>
      {openTasksSorted.length === 0 ? (
        <p className="settings-hint" style={{ padding: "0 2px" }}>Aktuell liegt nichts an.</p>
      ) : (
        <div className="task-list">
          {openTasksSorted.map((t) => (
            <button key={t.id} className="lead-task-row" onClick={() => onSelectTask(t)}>
              <span className="status-dot" style={{ background: STATUSES[t.status]?.color || "#7C6E9C" }} />
              <div className="lead-task-info">
                <span className="lead-task-title">{t.title}</span>
                <span className="lead-task-meta">
                  {STATUSES[t.status]?.short} · {t.assignee ? memberById[t.assignee]?.name : "Nicht zugewiesen"} · {stopById[t.stopId]?.city}
                </span>
              </div>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function LocationPage({ currentUser, team }) {
  const [locations, setLocations] = useState({});
  const [sharing, setSharing] = useState(false);
  const [geoError, setGeoError] = useState("");
  const [myPos, setMyPos] = useState(null);
  const watchIdRef = useRef(null);
  const lastWriteRef = useRef(0);

// Eigene Freigabe-Präferenz laden (persönlich, nicht geteilt)
  useEffect(() => {
    (async () => {
      try {
        const r = await window.storage.get("el-share-location", false);
        if (r?.value === "true") setSharing(true);
      } catch (e) {}
    })();
  }, []);

// Fremde Standorte periodisch nachladen, solange die Seite offen ist
  useEffect(() => {
    let cancelled = false;
    const load = async () => {
      try {
        const r = await window.storage.get("el-locations", true);
        if (!cancelled && r?.value) setLocations(JSON.parse(r.value));
      } catch (e) {}
    };
    load();
    const iv = setInterval(load, 15000);
    return () => { cancelled = true; clearInterval(iv); };
  }, []);

const stopSharing = useCallback(() => {
    if (watchIdRef.current !== null && navigator.geolocation) {
      navigator.geolocation.clearWatch(watchIdRef.current);
      watchIdRef.current = null;
    }
  }, []);

const toggleSharing = () => {
    const next = !sharing;
    setSharing(next);
    window.storage.set("el-share-location", String(next), false).catch(() => {});
    if (next) startSharing(); else stopSharing();
  };

useEffect(() => {
    if (sharing) startSharing();
    return () => stopSharing();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

const rows = team
    .filter((m) => m.id !== currentUser.id)
    .map((m) => {
      const loc = locations[m.id];
      const dist = loc && myPos ? distanceKm(myPos.latitude, myPos.longitude, loc.lat, loc.lng) : null;
      return { member: m, loc, dist };
    });

return (
    <div className="page">
      <h1 className="page-title">Standort</h1>
      <p className="page-sub">Live-Übersicht während der Tournee</p>

<div className="settings-card">
        <div className="settings-row">
          <div>
            <div className="settings-label">Meinen Standort teilen</div>
            <div className="settings-hint">
              {sharing ? "Aktiv – das Team sieht deinen Standort, solange die App offen ist." : "Aus – dein Standort wird nicht geteilt."}
            </div>
          </div>
          <button className={`settings-btn ${sharing ? "" : ""}`} onClick={toggleSharing} style={sharing ? { background: "#6FA88C" } : {}}>
            <Radar size={15} /> {sharing ? "An" : "Aus"}
          </button>
        </div>
        {geoError && <p className="field-error" style={{ marginTop: 10 }}>{geoError}</p>}
      </div>

<div className="section-head">Team</div>
      <div className="member-stat-list">
        {rows.map(({ member, loc, dist }) => (
          <div key={member.id} className="location-row">
            <span className="member-initial">{member.name.charAt(0)}</span>
            <div className="location-info">
              <div className="member-stat-top">
                <span className="member-stat-name">{member.name}</span>
                <span className="member-stat-role">{member.role}</span>
              </div>
              <span className="location-meta">
                {loc ? `${relativeTime(loc.ts)}${dist !== null ? ` · ${dist.toFixed(1)} km entfernt` : ""}` : "Kein Standort geteilt"}
              </span>
            </div>
            {loc && (
              <a
                className="location-open-btn"
                href={`https://maps.apple.com/?ll=${loc.lat},${loc.lng}&q=${encodeURIComponent(member.name)}`}
                target="_blank"
                rel="noreferrer"
              >
                <Navigation size={14} />
              </a>
            )}
          </div>
        ))}
      </div>

<p className="settings-warn" style={{ marginTop: 6 }}>
        Standort-Freigabe funktioniert nur, solange die App bei der jeweiligen Person geöffnet ist – iOS erlaubt Web-Apps kein dauerhaftes Hintergrund-Tracking. Für eine Karte mit mehreren Positions-Pins wäre zusätzlich ein Kartendienst-API-Key (z. B. Google Maps) nötig.
      </p>
    </div>
  );
}

function App() {
  const { tasks, saveTasks, team, saveTeam, stops, saveStops, routeMaps, saveRouteMap, loaded } = useStorage();
  const [currentUser, setCurrentUser] = useState(null); // session-only, resets on reload
  const [page, setPage] = useState("tasks"); // tasks | new | tour | settings
  const [menuOpen, setMenuOpen] = useState(false);
  const [stopModalOpen, setStopModalOpen] = useState(false);
  const [activeStopId, setActiveStopId] = useState(stops[0].id);
  const [personFilter, setPersonFilter] = useState("alle");
  const [bellOpen, setBellOpen] = useState(false);
  const [onlyMine, setOnlyMine] = useState(false);
  const [notifState, setNotifState] = useState(typeof Notification !== "undefined" ? Notification.permission : "unsupported");
  const [themePref, setThemePref] = useState("system"); // system | light | dark
  const [systemDark, setSystemDark] = useState(true);
  const seenTaskIds = useRef(null);

useEffect(() => {
    if (typeof window === "undefined" || !window.matchMedia) return;
    const mq = window.matchMedia("(prefers-color-scheme: dark)");
    setSystemDark(mq.matches);
    const handler = (e) => setSystemDark(e.matches);
    mq.addEventListener ? mq.addEventListener("change", handler) : mq.addListener(handler);
    return () => (mq.removeEventListener ? mq.removeEventListener("change", handler) : mq.removeListener(handler));
  }, []);

useEffect(() => {
    (async () => {
      try {
        const r = await window.storage.get("el-theme", false);
        if (r?.value) setThemePref(r.value);
      } catch (e) {}
    })();
  }, []);

const setTheme = useCallback((t) => {
    setThemePref(t);
    window.storage.set("el-theme", t, false).catch(() => {});
  }, []);

const resolvedTheme = themePref === "system" ? (systemDark ? "dark" : "light") : themePref;

const stopById = useMemo(() => Object.fromEntries(stops.map((s) => [s.id, s])), [stops]);
  const tourCounters = useMemo(() => computeTourCounters(stops), [stops]);
  const todayInfo = useMemo(() => findStopForDate(todayStr(), stops), [stops]);
  const memberById = useMemo(() => Object.fromEntries(team.map((m) => [m.id, m])), [team]);

const createStop = (stop) => saveStops([...stops, stop]);

const handleCreateMember = (member, andLogin) => {
    const exists = team.some((m) => m.id === member.id);
    const next = exists ? team.map((m) => (m.id === member.id ? member : m)) : [...team, member];
    saveTeam(next);
    if (andLogin) setCurrentUser(member);
  };

const filtered = useMemo(() => {
    return tasks
      .filter((t) => t.stopId === activeStopId)
      .filter((t) => personFilter === "alle" || (personFilter === "offen_zuweisung" ? !t.assignee : t.assignee === personFilter))
      .filter((t) => !onlyMine || t.assignee === currentUser?.id)
      .sort((a, b) => {
        const order = STATUS_ORDER.indexOf(a.status) - STATUS_ORDER.indexOf(b.status);
        if (order !== 0) return order;
        return b.createdAt - a.createdAt;
      });
  }, [tasks, activeStopId, personFilter, onlyMine, currentUser]);

const notifications = useMemo(() => {
    return tasks
      .filter((t) => t.status !== "erledigt")
      .map((t) => ({ ...t, du: daysUntil(t.due) }))
      .filter((t) => t.du !== null && t.du <= 2)
      .sort((a, b) => a.du - b.du);
  }, [tasks]);

const myNotifications = notifications.filter((n) => n.assignee === currentUser?.id);

// Verteilt einen bereits existierenden Auftrag an alle übrigen Teammitglieder –
  // jede Person bekommt eine eigene Kopie, die Original-Zuweisung bleibt bestehen.
  const broadcastTask = (task) => {
    const broadcastId = task.broadcastId || uid();
    const others = team.filter((m) => m.id !== task.assignee);
    const copies = others.map((m) => ({
      ...task,
      id: uid(),
      assignee: m.id,
      status: "offen",
      broadcastId,
      createdAt: Date.now(),
    }));
    const updatedTasks = tasks.map((t) => (t.id === task.id ? { ...t, broadcastId } : t));
    saveTasks([...copies, ...updatedTasks]);
  };

const openCount = tasks.filter((t) => t.stopId === activeStopId && t.status !== "erledigt").length;

const showNotification = useCallback((title, body) => {
    try {
      if (typeof Notification !== "undefined" && Notification.permission === "granted") {
        new Notification(title, { body, icon: APP_ICON, badge: APP_ICON });
      }
    } catch (e) {}
  }, []);

const testNotif = useCallback(() => {
    showNotification("Testmitteilung", "So sieht eine Mitteilung vom Breakin' Circus Fahrteam aus.");
  }, [showNotification]);

// Neue, mir zugewiesene Aufträge erkennen -> lokale Mitteilung (funktioniert, solange die Web-App aktiv/im Hintergrund ist)
  useEffect(() => {
    if (!currentUser) return;
    const mine = tasks.filter((t) => t.assignee === currentUser.id).map((t) => t.id);
    if (seenTaskIds.current === null) {
      seenTaskIds.current = new Set(mine);
      return;
    }
    const fresh = mine.filter((id) => !seenTaskIds.current.has(id));
    if (fresh.length > 0 && notifState === "granted") {
      const t = tasks.find((x) => x.id === fresh[0]);
      showNotification(
        fresh.length === 1 ? "Neuer Auftrag für dich" : `${fresh.length} neue Aufträge für dich`,
        t ? t.title : "Öffne die App, um Details zu sehen."
      );
    }
    seenTaskIds.current = new Set(mine);
  }, [tasks, currentUser, notifState, showNotification]);

// Session zurücksetzen bei Abmeldung
  useEffect(() => {
    if (!currentUser) seenTaskIds.current = null;
  }, [currentUser]);

const goto = (p) => { setPage(p); setMenuOpen(false); };
  const myOpenToday = tasks.filter((t) => t.assignee === currentUser?.id && t.status !== "erledigt").length;

const myTasksList = useMemo(() => {
    if (!currentUser) return [];
    return tasks
      .filter((t) => t.assignee === currentUser.id && t.status !== "erledigt")
      .sort((a, b) =>
        STATUS_ORDER.indexOf(a.status) - STATUS_ORDER.indexOf(b.status) ||
        PRIORITY_ORDER.indexOf(a.priority) - PRIORITY_ORDER.indexOf(b.priority) ||
        a.createdAt - b.createdAt
      );
  }, [tasks, currentUser]);

if (!loaded) {
    return (
      <div className="app" data-theme={resolvedTheme}>
        <div className="empty-state" style={{ margin: 40 }}>Lädt…</div>
      </div>
    );
  }

if (!currentUser) {
    return (
      <div className="app" data-theme={resolvedTheme}>
        <LoginScreen team={team} onLogin={setCurrentUser} onCreateMember={handleCreateMember} stops={stops} onExternalTask={createTask} />
      </div>
    );
  }

return (
    <div className="app" data-theme={resolvedTheme}>

<header className="topbar">
        <button className="icon-btn menu-btn" onClick={() => setMenuOpen(true)} aria-label="Menü">
          <Menu size={20} />
        </button>
        <span className="brand-name sm"><span className="brand-bold">BREAKIN’</span> <span className="brand-thin">CIRCUS</span> <span className="brand-name-sub">Tour 2026</span></span>
        <div className="topbar-actions">
          <div className="bell-wrap">
            <button className="icon-btn bell-btn" onClick={() => setBellOpen((v) => !v)}>
              <Bell size={17} />
              {myNotifications.length > 0 && <span className="bell-badge">{myNotifications.length}</span>}
            </button>
            {bellOpen && (
              <div className="bell-panel">
                <div className="bell-panel-head">Für dich bald fällig</div>
                {myNotifications.length === 0 && <div className="bell-empty">Nichts Dringendes für dich.</div>}
                {myNotifications.map((n) => (
                  <div key={n.id} className="bell-row" onClick={() => { setActiveStopId(n.stopId); setBellOpen(false); setPage("tasks"); }}>
                    <span className="prio-dot" style={{ background: (PRIORITIES[n.priority] || PRIORITIES.normal).color }} />
                    <div className="bell-row-text">
                      <span>{n.title}</span>
                      <span className="bell-row-sub">{stopById[n.stopId]?.city} · {n.du === 0 ? "heute" : n.du < 0 ? `${Math.abs(n.du)} Tag(e) überfällig` : `in ${n.du} Tag(en)`}</span>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      </header>

{menuOpen && (
        <div className="menu-backdrop" onClick={() => setMenuOpen(false)}>
          <nav className="menu-drawer" onClick={(e) => e.stopPropagation()}>
            <div className="menu-user">
              <span className="member-initial">{currentUser.name.charAt(0)}</span>
              <div>
                <div className="menu-user-name">{currentUser.name}</div>
                <div className="menu-user-role">{currentUser.role}</div>
              </div>
              <button className="icon-btn" onClick={() => setMenuOpen(false)}><X size={16} /></button>
            </div>

<button className={`menu-item ${page === "tasks" ? "is-active" : ""}`} onClick={() => goto("tasks")}>
              <ClipboardList size={18} /> Startseite
              {myOpenToday > 0 && <span className="menu-count">{myOpenToday}</span>}
            </button>
            <button className={`menu-item ${page === "new" ? "is-active" : ""}`} onClick={() => goto("new")}>
              <Plus size={18} /> Neuer Auftrag
            </button>
            <button className={`menu-item ${page === "tour" ? "is-active" : ""}`} onClick={() => goto("tour")}>
              <CalendarDays size={18} /> Tourplan
            </button>
            {currentUser.isLeader && (
              <button className={`menu-item ${page === "leader" ? "is-active" : ""}`} onClick={() => goto("leader")}>
                <Users size={18} /> Team-Übersicht
              </button>
            )}
            <button className={`menu-item ${page === "settings" ? "is-active" : ""}`} onClick={() => goto("settings")}>
              <Settings size={18} /> Einstellungen
              {notifState !== "granted" && <span className="menu-dot" />}
            </button>

<div className="menu-spacer" />
            <button className="menu-item is-logout" onClick={() => { setMenuOpen(false); setCurrentUser(null); }}>
              <LogOut size={18} /> Abmelden
            </button>
          </nav>
        </div>
      )}

{page === "tasks" && (
        <>
          <img src={HEADER_IMG} alt="Breakin' Circus – Urban Dance & Artistic Show · Tournee 2026" className="hero-banner" />

{tourCounters && !tourCounters.started && (
            <div className="tour-counter-bar">
              <button className="counter-pill counter-pill-wide" onClick={() => setActiveStopId(tourCounters.firstShow.id)}>
                <span className="counter-num">Tour startet in {tourCounters.daysUntilStart} Tag{tourCounters.daysUntilStart === 1 ? "" : "en"}</span>
                <span className="counter-label">
                  {tourCounters.firstShow.city} · {new Date(tourCounters.firstShow.date + "T00:00:00").toLocaleDateString("de-DE", { day: "2-digit", month: "short", year: "numeric" })}
                </span>
              </button>
            </div>
          )}

{tourCounters && tourCounters.started && (
            <div className="tour-counter-bar">
              <button className="counter-pill" onClick={() => setActiveStopId(tourCounters.showStop.id)}>
                <span className="counter-num">Show {tourCounters.showLabel}<span className="counter-total">/{tourCounters.showTotal}</span></span>
                <span className="counter-label">
                  {tourCounters.isToday ? "heute" : `nächste · ${new Date(tourCounters.showStop.date + "T00:00:00").toLocaleDateString("de-DE", { day: "2-digit", month: "short" })}`}
                </span>
              </button>
              <button className="counter-pill" onClick={() => setActiveStopId(tourCounters.showStop.id)}>
                <span className="counter-num">Stadt {tourCounters.cityIndex}<span className="counter-total">/{tourCounters.cityTotal}</span></span>
                <span className="counter-label">{tourCounters.showStop.city}</span>
              </button>
            </div>
          )}

{todayInfo && (todayInfo.venueAddress || todayInfo.hotelAddress) && (
            <button className="today-info-card" onClick={() => setActiveStopId(todayInfo.id)}>
              <div className="today-info-head">
                <CalendarDays size={13} />
                <span>{todayInfo.date === todayStr() ? "Heute" : "Nächste Station"} · {todayInfo.city}</span>
              </div>
              {todayInfo.venueAddress && (
                <div className="today-info-row">
                  <MapPin size={13} />
                  <div className="today-info-text">
                    <span className="today-info-label">Venue</span>
                    <span className="today-info-value">
                      {formatAddress(todayInfo.venueAddress)}
                    </span>
                  </div>
                </div>
              )}
              {todayInfo.hotelAddress && (
                <div className="today-info-row">
                  <Moon size={13} />
                  <div className="today-info-text">
                    <span className="today-info-label">Hotel</span>
                    <span className="today-info-value">
                      {formatAddress(todayInfo.hotelAddress)}
                    </span>
                  </div>
                </div>
              )}
            </button>
          )}

<section className="my-tasks-section">
            <div className="section-head-row">
              <span className="section-head" style={{ margin: 0 }}>Meine Aufgaben</span>
              {myTasksList.length > 0 && <span className="my-tasks-count">{myTasksList.length}</span>}
            </div>
            {myTasksList.length === 0 ? (
              <p className="my-tasks-empty">Aktuell liegt nichts bei dir an.</p>
            ) : (
              <div className="task-list">
                {myTasksList.slice(0, 6).map((t) => (
                  <button key={t.id} className="lead-task-row" onClick={() => setActiveStopId(t.stopId)}>
                    <span className="status-dot" style={{ background: STATUSES[t.status]?.color || "#7C6E9C" }} />
                    <div className="lead-task-info">
                      <span className="lead-task-title">{t.title}</span>
                      <span className="lead-task-meta">
                        {STATUSES[t.status]?.short} · {stopById[t.stopId]?.city}
                      </span>
                    </div>
                    <span className="prio-dot" style={{ background: PRIORITIES[t.priority]?.color || "#7C6E9C" }} />
                  </button>
                ))}
                {myTasksList.length > 6 && (
                  <button className="my-tasks-more" onClick={() => setOnlyMine(true)}>
                    +{myTasksList.length - 6} weitere – alle unten anzeigen
                  </button>
                )}
              </div>
            )}
          </section>

<div className="section-head-row" style={{ padding: "0 16px" }}>
            <span className="section-head" style={{ margin: 0 }}>Alle Aufträge</span>
          </div>
          <RouteStrip stops={stops} activeStopId={activeStopId} onSelect={setActiveStopId} onAdd={() => setStopModalOpen(true)} />

<main className="board">
            <div className="board-head">
              <div className="board-title-wrap">
                <h1 className="board-title">{stopById[activeStopId]?.city}</h1>
                <span className="board-sub">
                  {stopById[activeStopId]?.type !== "show"
                    ? "Kein Auftritt geplant"
                    : [stopById[activeStopId]?.arena, formatTimes(stopById[activeStopId]?.times)].filter(Boolean).join(" · ")}
                  {" · "}{openCount} offen
                </span>
              </div>
              <div className="filter-wrap">
                <button className={`mine-toggle ${onlyMine ? "is-on" : ""}`} onClick={() => setOnlyMine((v) => !v)}>
                  Nur meine
                </button>
                <Filter size={13} />
                <select value={personFilter} onChange={(e) => setPersonFilter(e.target.value)}>
                  <option value="alle">Alle Personen</option>
                  <option value="offen_zuweisung">Nicht zugewiesen</option>
                  {team.map((m) => (
                    <option key={m.id} value={m.id}>{m.name}</option>
                  ))}
                </select>
              </div>
            </div>

{filtered.length === 0 ? (
              <div className="empty-state">
                <AlertCircle size={20} />
                <p>Für {stopById[activeStopId]?.city} liegt noch nichts vor.</p>
                <button className="new-btn ghost" onClick={() => setPage("new")}>Ersten Auftrag anlegen</button>
              </div>
            ) : (
              <div className="task-list">
                {filtered.map((t) => (
                  <TaskCard
                    key={t.id}
                    task={t}
                    member={memberById[t.assignee]}
                    stop={stopById[t.stopId]}
                    team={team}
                    canReassign={currentUser.isLeader}
                    canDelete={currentUser.isLeader}
                    onToggle={toggleTask}
                    onDelete={deleteTask}
                    onAssign={assignTask}
                    onBroadcast={broadcastTask}
                  />
                ))}
              </div>
            )}
          </main>
        </>
      )}

{page === "new" && (
        <NewTaskPage
          onCreate={createTask}
          team={team}
          stops={stops}
          currentUser={currentUser}
          onDone={() => setPage("tasks")}
        />
      )}

{page === "tour" && (
        <TourTimeline
          stops={stops}
          tasks={tasks}
          routeMaps={routeMaps}
          onSaveRouteMap={saveRouteMap}
          onSelectStop={(id) => { setActiveStopId(id); setPage("tasks"); }}
        />
      )}

{page === "leader" && currentUser.isLeader && (
        <LeaderDashboard
          team={team}
          tasks={tasks}
          stopById={stopById}
          onSelectTask={(t) => { setActiveStopId(t.stopId); setPage("tasks"); }}
        />
      )}

{page === "settings" && (
        <SettingsPage
          currentUser={currentUser}
          notifState={notifState}
          onEnableNotif={enableNotif}
          onTestNotif={testNotif}
          themePref={themePref}
          onSetTheme={setTheme}
        />
      )}

<AddStopModal open={stopModalOpen} onClose={() => setStopModalOpen(false)} onCreate={createStop} />

<p className="footnote">Geteilte Daten für alle mit diesem Link · Echte Push bei geschlossener App (neuer Auftrag + 3× tägliche Zusammenfassung) benötigt eine Server-Anbindung, die separat eingerichtet werden muss.</p>
    </div>
  );
}

const __root = createRoot(document.getElementById("root"));
__root.render(<App />);