/* Schichtplan (Schichtplan.swift in der Mac-App): oben der Tag als Band, darunter Abläufe nach Rhythmus auf .schalter-gruppe.
   Groß und leicht für die Zeit, klein und kräftig für Namen. Nur Variablen aus tokens.css. */
.schicht-inhalt { padding: 16px 16px 40px; display: grid; gap: 22px; align-content: start; min-width: 0; }
.schicht-filter { margin-top: -6px; }

/* Band: was als Nächstes kommt und die heutigen Zeiten auf einer Achse */
.schicht-band { display: grid; gap: 12px; min-width: 0; }
.sb-kopf { display: flex; justify-content: space-between; font-size: var(--s-unterzeile-groesse); font-weight: var(--s-unterzeile-gewicht); color: var(--text3); font-variant-numeric: tabular-nums; }
.sb-naechstes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; }
.sb-zeit { flex: none; font-size: var(--s-titel-groesse); font-weight: var(--s-titel-gewicht); letter-spacing: var(--s-titel-laufweite); line-height: 1; font-variant-numeric: tabular-nums; }
.sb-was { flex: 1 1 190px; min-width: 0; display: grid; gap: 2px; }
.sb-was b { font-size: 15px; font-weight: 580; letter-spacing: -.1px; line-height: 1.25; }
.sb-was span { font-size: 12.5px; font-weight: 440; color: var(--text3); line-height: 1.35; overflow-wrap: anywhere; }
.sb-achse { position: relative; height: 40px; margin: 0 2px; }
.sb-linie { position: absolute; left: 0; right: 0; top: 14px; height: 1px; background: var(--linie); }
.sb-stunde { position: absolute; top: 26px; transform: translateX(-50%); font-size: 10.5px; font-weight: 560; color: var(--text3); font-variant-numeric: tabular-nums; }
.sb-stunde:first-of-type { transform: none; }
.sb-stunde:nth-of-type(5) { transform: translateX(-100%); }
.sb-marke { position: absolute; top: 7px; width: 2px; height: 15px; margin-left: -1px; border-radius: 1px; background: var(--text); }
.sb-marke.vorbei { background: var(--text3); opacity: .45; }
.sb-jetzt { position: absolute; top: 0; width: 2px; height: 22px; margin-left: -1px; border-radius: 1px; background: var(--akzent-text); box-shadow: 0 0 0 2px var(--grund); }
.sb-jetzt::before { content: ""; position: absolute; left: -2.5px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--akzent-text); }

/* Gruppe nach Rhythmus */
.schicht-gruppe { display: grid; gap: 10px; min-width: 0; }
.sg-kopf { display: flex; align-items: baseline; gap: 10px; }
.sg-kopf h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.3px; }
.sg-kopf span { font-size: 12.5px; font-weight: 460; color: var(--text3); font-variant-numeric: tabular-nums; }
.sg-kopf .sg-fehler { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-weight: 520; color: var(--signal); }

/* Ein Ablauf */
.ab-zeile { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 15px 16px; min-width: 0; }
.ab-zeile.aus .ab-titel h3, .ab-zeile.aus .ab-zeit b, .ab-zeile.aus .ab-laeufe dd { color: var(--text3); }
.ab-zeit { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.ab-zeit b { font-size: 22px; font-weight: 440; letter-spacing: -.5px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ab-zeit.lang b { font-size: 14px; font-weight: 580; letter-spacing: 0; line-height: 1.3; }
.ab-zeit em { font-size: 12px; font-weight: 440; font-style: normal; color: var(--text3); font-variant-numeric: tabular-nums; }
.ab-haupt { min-width: 0; display: grid; gap: 6px; align-content: start; }
.ab-titel { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ab-titel h3 { margin: 0; font-size: 15px; font-weight: 580; letter-spacing: -.15px; line-height: 1.3; }
.ab-zustand { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--text3); white-space: nowrap; flex: none; }
.ab-zustand.fehler { color: var(--signal); }
.ab-zweck { margin: 0; font-size: 13px; font-weight: 440; color: var(--text2); line-height: 1.45; }
.ab-hinweis { margin: 0; font-size: 12.5px; font-weight: 500; color: var(--signal); line-height: 1.45; }
.ab-wer { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.ab-person { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 480; color: var(--text3); min-width: 0; }
.ab-person.gross { font-size: 12.5px; color: var(--text2); flex: 1 0 100%; }
.ab-marke { flex: none; display: grid; place-items: center; border-radius: var(--r-avatar-anteil); background: var(--flaeche2); color: var(--text2); }
.ab-marke svg { width: 66%; height: 66%; }
.ab-laeufe { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-top: 1px solid var(--linie); padding-top: 12px; }
.ab-laeufe div { min-width: 0; display: grid; gap: 1px; }
.ab-laeufe dt { font-size: 11.5px; font-weight: 440; color: var(--text3); }
.ab-laeufe dd { margin: 0; font-size: 13px; font-weight: 540; color: var(--text); font-variant-numeric: tabular-nums; }

/* Schritte eines Ablaufs: Uhrzeit, Knoten auf einer Linie, Inhalt */
.ab-schritte { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; }
.as { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 8px; padding-bottom: 12px; min-width: 0; }
.as:last-child { padding-bottom: 0; }
.as-uhr { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.as-uhr b { font-size: 12.5px; font-weight: 560; color: var(--text2); font-variant-numeric: tabular-nums; line-height: 1.35; }
.as-uhr em { font-size: 11px; font-weight: 440; font-style: normal; color: var(--text3); }
.as-knoten { position: relative; grid-column: 1; grid-row: 1 / span 3; }
.as-knoten i { position: absolute; top: 5px; left: 3.5px; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--text3); background: var(--flaeche); }
.as:not(:last-child) .as-knoten::after { content: ""; position: absolute; left: 7px; top: 12px; bottom: -12px; width: 1px; background: var(--linie); }
.as.aus .as-knoten i { border-style: dashed; }
.as-text { grid-column: 2; display: grid; gap: 1px; min-width: 0; }
.as-text b { font-size: 13px; font-weight: 560; line-height: 1.3; }
.as-text em { font-size: 12px; font-weight: 440; font-style: normal; color: var(--text3); line-height: 1.4; }
.as.aus .as-text b { color: var(--text3); }
.as-wer { grid-column: 2; font-size: 11.5px; font-weight: 460; color: var(--text3); display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 2px; }

@media (min-width: 900px) {
  .schicht-inhalt { max-width: 980px; margin: 0 auto; padding: 24px 40px 56px; gap: 30px; width: 100%; box-sizing: border-box; }
  .schicht-band { gap: 14px; }
  .sb-naechstes { flex-wrap: nowrap; gap: 16px; }
  .sb-zeit { font-size: 34px; }
  .ab-person.gross { flex: none; }
  .ab-zeile { grid-template-columns: 94px minmax(0, 1fr) 150px; gap: 18px; padding: 18px; }
  .ab-zeit { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 3px; }
  .ab-laeufe { grid-template-columns: 1fr; gap: 9px; border: 0; padding: 0; align-content: start; }
  .as { grid-template-columns: 74px 14px minmax(0, 1fr) minmax(0, 140px); padding-bottom: 10px; }
  .as-uhr { grid-column: 1; grid-row: 1; display: grid; justify-items: end; gap: 0; text-align: right; }
  .as-knoten { grid-column: 2; grid-row: 1; }
  .as:not(:last-child) .as-knoten::after { bottom: -10px; }
  .as-text { grid-column: 3; grid-row: 1; }
  .as-wer { grid-column: 4; grid-row: 1; justify-content: flex-end; text-align: right; margin-top: 1px; }
}