/* ============================================================
   MOCKS — Visuals der 5 Feature-Zigzag-Rows
   Varianten: planning · ai · map · form · chat
   ============================================================ */

/* ─── Shared Label ────────────────────────────────────────── */
.mock__label {
  font-size: 10px; font-weight: 600; color: var(--text3);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 10px;
}

/* ─── Planning Mock — Fahrzeug-Sidebar + Karten-Stub ──────── */
.mock--planning { display: grid; grid-template-columns: 1fr; min-height: 320px; }
.mock--planning .mock__panel { background: var(--surface2); border-right: 1px solid var(--border); padding: 12px; }
.mock--planning .mock__map { background: #f3f5f8; min-height: 220px; height: 100%; position: relative; }
/* Leaflet inside planning mock — füllt die Karten-Spalte */
.mock--planning #mockPlanningMap { width: 100%; height: 100%; min-height: 220px; }
.mock--planning ul li {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  margin-bottom: 4px;
}
.mock--planning ul li.open { background: #fff; border: 1px solid var(--border); }
.mock--planning ul li.open__sub {
  display: flex; padding: 6px 10px; margin-left: 14px;
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  font-size: 11px; color: var(--text2);
}
.mock--planning ul li > span:first-child { width: 4px; height: 22px; border-radius: 2px; flex-shrink: 0; }
.mock--planning ul li > div { flex: 1; min-width: 0; }
.mock--planning ul li b { display: block; font-size: 12px; font-weight: 600; color: var(--text); }
.mock--planning ul li em { font-size: 10px; color: var(--text3); font-style: normal; }

/* Drag-&-Drop-Animation: 10:00 wird hochgehoben & nach unten gezogen,
   11:00 rutscht parallel hoch. Loop ~6s. */
.mock--planning ul li.pl-drag,
.mock--planning ul li.pl-shift {
  position: relative;
  will-change: transform;
}
.mock--planning ul li.pl-drag {
  z-index: 2;
  animation: plDrag 6s cubic-bezier(.4, 0, .2, 1) infinite;
}
.mock--planning ul li.pl-shift {
  animation: plShift 6s cubic-bezier(.4, 0, .2, 1) infinite;
}
.mock--planning ul li.pl-drag .pl-grip {
  margin-left: auto; color: var(--text3);
  font-size: 10px; letter-spacing: -2px;
  cursor: grab;
}

@keyframes plDrag {
  0%, 14%   { transform: translate(0, 0); box-shadow: none; border-color: var(--border); }
  22%       { transform: translate(6px, -3px) scale(1.04); box-shadow: 0 10px 18px rgba(15,23,42,.18); border-color: var(--accent); }
  46%, 60%  { transform: translate(6px, 32px) scale(1.04); box-shadow: 0 10px 18px rgba(15,23,42,.18); border-color: var(--accent); }
  74%, 86%  { transform: translate(0, 32px); box-shadow: none; border-color: var(--border); }
  100%      { transform: translate(0, 0); box-shadow: none; border-color: var(--border); }
}
@keyframes plShift {
  0%, 28%   { transform: translateY(0); }
  46%, 74%  { transform: translateY(-32px); }
  100%      { transform: translateY(0); }
}

/* ─── AI Mock — Empfehlungs-Karte ─────────────────────────── */
.mock--ai { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.mock--ai .mock__title { font-size: 16px; font-weight: 600; color: var(--text); }
.ai-card {
  padding: 14px; border-radius: 10px;
  background: var(--accent-tint-2);
  border: 1px solid rgba(79,114,227,.2);
}
.ai-card__head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--accent); margin-bottom: 6px; }
.ai-card__row { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.ai-card__sub { font-size: 12px; color: var(--text2); }
.mock__btnrow { display: flex; gap: 8px; flex-wrap: wrap; }
.mock__btnrow .btn { min-height: 40px; }

/* ─── Live-Map Mock — echte OSM-Karte ─────────────────────── */
.mock--map {
  position: relative; aspect-ratio: 6/4;
  background: #eef3f7;
  isolation: isolate;          /* Stacking-Context: Popups (z-index 800) bleiben in der Karte */
}
.mock--map .mock__leaflet {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.mock--map .mock__leaflet { background: #eef3f7; }
.mock__chip {
  position: absolute; top: 12px; left: 12px; z-index: 4;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
  font-size: 11px; font-weight: 600;
}
.mock__chip--ok { color: var(--accent); }
.mock__popup {
  position: absolute; z-index: 800;
  padding: 10px 12px; border-radius: 10px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--sh-md);
  max-width: 220px;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
.mock__popup-h { font-size: 10px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; }
.mock__popup-t { font-size: 13px; font-weight: 700; color: var(--text); margin-top: 2px; }
.mock__popup-s { font-size: 11px; color: var(--text2); }

/* Drei Popups rotieren über 12s — jedes hat seinen eigenen Keyframe-Slot,
   damit kein animation-delay-Trick nötig ist (zuverlässiger als delay-basiert).
   Vermittelt: Klick auf Marker → Detail-Panel slidet ein. */
.mock--map .mock__popup--p1 { bottom: 14px; left: 14px;
  animation: mapPopup1 12s ease-in-out infinite; }
.mock--map .mock__popup--p2 { top: 56px; right: 14px;
  animation: mapPopup2 12s ease-in-out infinite; }
.mock--map .mock__popup--p3 { bottom: 14px; right: 14px;
  animation: mapPopup3 12s ease-in-out infinite; }

/* p1: sichtbar 0-30% des Cycles (≈ 0–3,6 s) */
@keyframes mapPopup1 {
  0%        { opacity: 0; transform: translateY(8px) scale(.96); }
  3%, 28%   { opacity: 1; transform: translateY(0)   scale(1); }
  33%, 100% { opacity: 0; transform: translateY(8px) scale(.96); }
}
/* p2: sichtbar 33-63% (≈ 4–7,5 s) */
@keyframes mapPopup2 {
  0%, 33%   { opacity: 0; transform: translateY(8px) scale(.96); }
  36%, 61%  { opacity: 1; transform: translateY(0)   scale(1); }
  66%, 100% { opacity: 0; transform: translateY(8px) scale(.96); }
}
/* p3: sichtbar 66-96% (≈ 8–11,5 s) */
@keyframes mapPopup3 {
  0%, 66%   { opacity: 0; transform: translateY(8px) scale(.96); }
  69%, 94%  { opacity: 1; transform: translateY(0)   scale(1); }
  99%, 100% { opacity: 0; transform: translateY(8px) scale(.96); }
}

/* (Form-Builder + AI-Chat → mock-form-chat.css) */

/* ─── Responsive ──────────────────────────────────────────── */
@media (min-width: 1024px) {
  .mock--planning { grid-template-columns: 200px 1fr; }
}