/* Lamatics Demo: Der Vormittag Ihres Teams
   Baut auf styles.css auf. Grau = Routine, Zinnober-zart = Pruefen,
   Papier mit Linie = bleibt, gestrichelt = frei gewordene Zeit. */

.vm {
  --ppm: 1.75px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

/* ---------- Kopf ---------- */
.vm__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.vm__title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-right: auto;
}
.vm__badge {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 3px 10px;
}
.vm__seg {
  display: inline-flex;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--card);
  padding: 3px;
}
.vm__segbtn {
  font: inherit;
  font-size: 13.5px;
  color: var(--ink-soft);
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 6px 16px;
  min-height: 44px;
  cursor: pointer;
}
.vm__segbtn.is-on { background: var(--ink); color: var(--paper); }

.vm__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 22px 20px 6px;
}
.vm__big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; min-height: 64px; }
.vm__num {
  font-family: var(--font-display);
  font-size: clamp(46px, 6vw, 64px);
  line-height: 1;
  color: var(--muted);
  font-variant-numeric: lining-nums tabular-nums;
}
.vm.is-an .vm__num { color: var(--accent); }
.vm__unit { font-size: 15px; color: var(--ink-soft); }

/* ---------- Tagesplan ---------- */
.vm__plan {
  display: grid;
  grid-template-columns: 44px repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 16px 20px 22px;
}
.vm__axishead { border-bottom-color: transparent; }
.vm__skala {
  position: relative;
  height: calc(240 * var(--ppm));
}
.vm__skala span {
  position: absolute;
  left: 0;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}

.vm-p { min-width: 0; }
.vm-p__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  height: 48px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.vm-p__name { font-weight: 600; font-size: 16px; color: var(--ink); }
.vm-p__rolle {
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.vm-p__gain {
  display: none;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--accent);
  white-space: nowrap;
  font-variant-numeric: lining-nums;
}

.vm-p__day {
  display: flex;
  flex-direction: column;
  height: calc(240 * var(--ppm));
  background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(60 * var(--ppm) - 1px), var(--rule) calc(60 * var(--ppm) - 1px), var(--rule) calc(60 * var(--ppm)));
}

.vm-b {
  position: relative;
  flex: none;
  height: calc(var(--m) * var(--ppm));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 0 9px;
  border-radius: 6px;
  background: var(--paper-2);
  border: 1px solid var(--rule-strong);
  box-sizing: border-box;
  margin-bottom: 2px;
  transition: height 0.7s cubic-bezier(.6, 0, .3, 1), margin 0.7s ease, opacity 0.5s ease, background 0.4s ease, border-color 0.4s ease;
  transition-delay: calc(var(--i) * 70ms);
}
.vm-b__t { font-size: 13px; line-height: 1.25; color: var(--ink-soft); }
.vm-b__m { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.vm-b--bleibt { background: var(--card); border-color: var(--rule); }
.vm-b--bleibt .vm-b__t { color: var(--ink); }

.vm.is-an .vm-b.is-weg { opacity: 0; margin-bottom: 0; border-width: 0; }
.vm.is-an .vm-b.is-kurz { height: max(calc(var(--m) * var(--ppm)), 24px); background: var(--accent-soft); border-color: var(--accent); flex-direction: row; align-items: center; justify-content: space-between; gap: 6px; }
.vm.is-an .vm-b.is-kurz .vm-b__t { color: var(--accent-ink); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vm.is-an .vm-b.is-kurz .vm-b__m { color: var(--accent-ink); white-space: nowrap; }

/* kurze Bloecke vor dem Umschalten: Dauer ausblenden, wenn kein Platz */
.vm-b.is-klein:not(.is-kurz) .vm-b__m { display: none; }

.vm-p__frei {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1.5px dashed var(--accent);
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.5s ease 0.6s;
  overflow: hidden;
}
.vm-p__frei span { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); }
.vm-p__frei b { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--accent); font-variant-numeric: lining-nums; }
.vm.is-an .vm-p__frei { opacity: 1; }

/* ---------- Handy und Fazit ---------- */
.vm__phone {
  display: none;
  margin: 0 20px 18px;
  padding: 14px 16px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--card);
}
.vm.is-an .vm__phone { display: block; }
.vm.is-wechsel.is-an .vm__phone { animation: vm-in 0.4s ease 0.9s both; }
@keyframes vm-in { from { opacity: 0; transform: translateY(6px); } }
.vm__phonehead {
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 4px;
}
.vm__msgs { list-style: none; margin: 0; padding: 0; }
.vm-msg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 9px 0;
  border-top: 1px solid var(--rule);
}
.vm-msg:first-child { border-top: 0; }
.vm-msg div { display: grid; gap: 1px; }
.vm-msg b { font-size: 15px; font-weight: 600; color: var(--ink); }
.vm-msg span { font-size: 13.5px; color: var(--ink-soft); }
.vm-msg__act {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 7px 16px;
  min-height: 44px;
  cursor: pointer;
  white-space: nowrap;
}
.vm-msg__act:hover:not(:disabled) { background: var(--accent-ink); }
.vm-msg.is-ok .vm-msg__act { background: none; color: var(--ink-soft); border-color: var(--rule-strong); cursor: default; }
.vm-msg.is-ok .vm-msg__act::before { content: "✓ "; color: var(--accent); }
.vm-msg.is-ok b { color: var(--muted); }

.vm__sum:not(:empty) {
  display: grid;
  gap: 8px;
  padding: 18px 20px 20px;
  border-top: 1px solid var(--rule);
}
.vm__line { margin: 0; font-size: 16px; color: var(--ink-soft); }
.vm__line b { color: var(--ink); }
.vm__done {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.2;
  color: var(--accent-ink);
}

/* ---------- Schmal: Liste pro Person statt Minuten-Skala ----------
   Nach Minuten skaliert braucht der Plan am Handy ueber 700px Hoehe,
   ohne mehr zu zeigen. Hier steht jeder Block als eine Zeile. */
@media (max-width: 820px) {
  .vm__plan { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  .vm__axis { display: none; }
  .vm-p__head { height: auto; padding-bottom: 6px; margin-bottom: 8px; }
  .vm-p__day { height: auto; background: none; gap: 4px; }
  .vm-b,
  .vm.is-an .vm-b.is-kurz { height: auto; margin-bottom: 0; padding: 6px 9px; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 8px; transition: background 0.4s ease, border-color 0.4s ease; }
  .vm.is-an .vm-b.is-kurz .vm-b__t { white-space: normal; }
  .vm.is-an .vm-b.is-weg { display: none; }
  .vm-b.is-klein:not(.is-kurz) .vm-b__m { display: inline; }
  .vm-b__m { flex: none; }
  .vm-p__frei { flex: none; flex-direction: row; gap: 8px; padding: 6px 9px; display: none; }
  .vm.is-an .vm-p__frei { display: flex; }
  .vm-p__frei b { font-size: 18px; }
}
@media (max-width: 560px) {
  .vm__plan { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 480px) {
  .vm__bar, .vm__head, .vm__plan, .vm__sum:not(:empty) { padding-left: 14px; padding-right: 14px; }
  .vm__phone { margin-left: 14px; margin-right: 14px; }
  .vm__seg { width: 100%; }
  .vm__segbtn { flex: 1; }
  .vm-b, .vm.is-an .vm-b.is-kurz { padding: 6px 8px; }
  .vm-b__t { font-size: 12px; }
  .vm-p__gain { font-size: 17px; }
  .vm-msg { grid-template-columns: 1fr; }
  .vm-msg__act { justify-self: start; }
}

/* Startansicht steht sofort da, eingeblendet wird erst beim Umschalten
   (is-wechsel setzt vormittag.js beim ersten Klick). */
.vm.is-sofort .vm-b, .vm.is-sofort .vm-p__frei { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .vm-b, .vm-p__frei { transition: none; }
  .vm.is-wechsel.is-an .vm__phone { animation: none; }
}

/* Hinweis direkt am Schalter (nur wenn die Seite data-hinweis setzt) */
.vm__hint { font-size: 13.5px; color: var(--ink-soft); }
@media (max-width: 480px) {
  .vm__hint { flex-basis: 100%; }
}

/* ---------- Handy: Schalter bleibt oben stehen (Kundenblick Runde 5) ----------
   vormittag.js setzt den Schalter am Handy in diese Leiste. overflow: clip
   statt hidden, sonst klebt nichts. */
.vm__schalter { display: none; }
@media (max-width: 560px) {
  .vm { overflow: clip; }
  .vm__schalter {
    position: sticky;
    top: var(--vm-top, 69px);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    background: var(--paper-2);
    border-bottom: 1px solid var(--rule);
  }
  .vm__schalter .vm__seg { width: auto; flex: 1 1 auto; }
  .vm__schalter .vm__segbtn { padding: 6px 10px; white-space: nowrap; }
  .vm__live {
    flex: none;
    min-width: 5.2em;
    text-align: right;
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1;
    color: var(--muted);
    font-variant-numeric: lining-nums tabular-nums;
    white-space: nowrap;
  }
  .vm.is-an .vm__live { color: var(--accent); }
}