/* seiten/ablauf.css – G5 Verwaltung-Ablaeufe – admin_start.html, zeitraum.html, rechnung.html, testmodus.html, portal_fehler.html
   Wird von base.html auf JEDER Seite nach app.css geladen (?v=STATIC_VERSION).
   Nur Selektoren dieser Gruppe. Tokens (var(--…)) nur aus app.css, keine neuen Farbwerte hier. */

.zeitraeume .status-pill.laeuft::before { display: none; }
.ablauf { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 0; margin: var(--s4) 0 var(--s5); counter-reset: s; }
.ablauf li { position: relative; padding-top: 32px; text-align: center; font-size: var(--fs-xs); font-weight: 500; line-height: 1.3; color: var(--ink-2); counter-increment: s; text-wrap: balance; }
.ablauf li::before { content: counter(s); position: absolute; top: 0; left: 50%; z-index: 1; transform: translateX(-50%); width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--card); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 700; }
.ablauf li:not(:last-child)::after { content: ""; position: absolute; top: 11px; left: calc(50% + 16px); right: calc(-50% + 16px); height: 1.5px; background: var(--line); }
.ablauf li.fertig { color: var(--brand-text); }
.ablauf li.fertig::before { content: ""; border-color: var(--brand); background: var(--brand) var(--chk-weiss) center / 14px no-repeat; }
.ablauf li.fertig::after { background: var(--brand); }
.ablauf li.jetzt { color: var(--ink); font-weight: 700; }
.ablauf li.jetzt::before { border-color: var(--brand-text); color: var(--brand-text); box-shadow: 0 0 0 4px oklch(0.746 0.18 129.9 / 0.35); }
pre.json { background: var(--sunken); padding: 14px; border-radius: var(--r-m); overflow-x: auto; font-size: var(--fs-sm); line-height: 1.45; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.h2-ic { width: 32px; height: 32px; border-radius: var(--r-s); display: grid; place-items: center; flex: none; background: var(--brand-tint); color: var(--brand-text); }
.h2-ic .ic { width: 18px; height: 18px; }
.zeitraeume { display: grid; gap: 8px; margin: 0 0 var(--s3); }
.zeitraeume a { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 50px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r-m);
  text-decoration: none; color: var(--ink); background: var(--card); transition: background-color .15s var(--ease); }
.zeitraeume a .links { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--fs-md); }
.zeitraeume a .links .ic { width: 18px; height: 18px; color: var(--ink-3); }
.wer { display: inline-flex; align-items: center; gap: 8px; }
.schicht-zeile { display: block; margin-top: 2px; padding-left: 16px; font-size: var(--fs-sm); }
.tag-link { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; font-weight: 600; text-decoration: none; color: var(--ink); }
.tag-link .ic { width: 16px; height: 16px; color: inherit; }
.tag-link.ok { color: var(--ok-ink); }
.tag-link.geaendert { color: var(--warn-ink); }
.tag-link.offen-link { color: var(--brand-text); }
td > .tag-link:only-child { margin-block: -4px; }
.betrag-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; padding: 14px 16px; margin: 0 0 var(--s4);
  border-radius: var(--r-m); background: var(--sunken); }
.betrag-zeile b { font-family: var(--f-titel); font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.01em; }
.betrag-zeile span { color: var(--ink-2); font-size: var(--fs-md); }
/* Naechster Schritt direkt unter dem Stepper: ein Satz, Farbe = Zustand */
.naechster { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin: 0 0 var(--s4); border-radius: var(--r-m); background: var(--sunken); color: var(--ink); font-weight: 500; }
.naechster .ic { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--brand-text); }
.naechster.wartet { background: var(--warn-bg); color: var(--warn-ink); }
.naechster.rueckfrage { background: var(--err-bg); color: var(--err-ink); }
.naechster.bestaetigt { background: var(--ok-bg); color: var(--ok-ink); }
.naechster:is(.wartet, .rueckfrage, .bestaetigt) .ic { color: inherit; }
/* Rechnung: Vorlage-Daten eingeklappt */
.vorlage-daten { margin-top: var(--s4); }
.vorlage-daten > dl.daten { margin-top: var(--s2); }
@container (min-width: 760px) {
  .hotel-neben .knopf.breit { width: 100%; }
}
@media (min-width: 1100px) {
  .hotel-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)); gap: 0 var(--s4); align-items: start; }
}
.hotelkarte { container-type: inline-size; }
@container (min-width: 720px) {
  .hotel-innen { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: var(--s6); align-items: start; }
  .hotel-innen .tabelle { margin-bottom: 0; }
}
.hotel-neben .klein-titel { margin-top: var(--s5); }
.hotel-innen > .hotel-neben:first-child .klein-titel { margin-top: 0; }
@container (min-width: 720px) { .hotel-neben .klein-titel { margin-top: 0; } }