@charset "UTF-8";
/* =====================================================================
   Werkstattbereich.

   Andere Aufgabe als die Kundenseite, deshalb andere Dichte: viel
   Information auf wenig Fläche, Status über Farbmarken an der Zeilenkante
   statt über bunte Flächen. Farbwelt und Schriften bleiben dieselben –
   es soll erkennbar dieselbe Anwendung sein. Bewegung ist hier bewusst
   sparsamer als außen: Wer den Tag plant, will nicht warten, bis etwas
   fertig eingeblendet ist.
   ===================================================================== */

body.admin { background: var(--sunk); font-size: 1rem; }

/* ---------------------------------------------------------------------
   Gerüst
   --------------------------------------------------------------------- */
/*
   Zwei Gerüste, ein Markup.

   Ab 64rem die Leiste links – dort ist Platz, und wer den Tag plant, will
   alle Bereiche gleichzeitig sehen. Darunter wandert die Navigation an den
   unteren Rand: Auf einem Telefon ist das der einzige Bereich, den der Daumen
   einhändig sicher erreicht. Alles darüber erfordert Umgreifen, und wer mit
   öligen Händen zwischen zwei Handgriffen kurz nachsieht, greift nicht um.
*/
.adm {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh; /* iOS: ohne dvh rechnet die Adressleiste mit */
}
@media (max-width: 64rem) { .adm { grid-template-columns: 1fr; } }

.adm__side {
  background: #060607;
  border-right: 1px solid var(--line);
  padding: var(--sp-5) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-5);
}
@media (min-width: 64.001rem) {
  .adm__side { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}

.adm__brand {
  display: flex; align-items: center; gap: .65rem;
  text-decoration: none; color: inherit;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.adm__brand .piston-mark { width: 2.1rem; height: 2.1rem; color: var(--enamel); }
.adm__brand:hover .piston-mark { color: var(--chrome-lit); }
.adm__brand b {
  font-size: .95rem; letter-spacing: .08em; text-transform: uppercase;
}
.adm__brand span {
  display: block; font-size: .6rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--chrome); margin-top: .2rem;
}

.adm__nav { display: grid; gap: .15rem; }
.adm__nav a {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
  padding: .55rem .7rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-size: .92rem; font-weight: 600;
  color: var(--steel);
  transition: background-color .15s var(--ease), color .15s var(--ease),
              padding-left .15s var(--ease);
}
.adm__nav a:hover {
  background: rgba(230, 233, 237, .05); color: var(--enamel);
  padding-left: .95rem;
}
.adm__nav a[aria-current='page'] { background: var(--chrome); color: var(--on-chrome); }
.adm__nav a[aria-current='page']:hover { padding-left: .7rem; }

.adm__nav-count {
  min-width: 1.4rem; padding: 0 .35rem;
  border-radius: 999px;
  background: var(--rust); color: #fff;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  text-align: center; line-height: 1.4rem;
}
.adm__nav a[aria-current='page'] .adm__nav-count { background: var(--on-chrome); color: var(--enamel); }

.adm__nav-group {
  margin-top: var(--sp-4); padding: 0 .7rem .4rem;
  font-size: .62rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--steel-dim);
}

.adm__user {
  margin-top: auto; padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: .82rem; color: var(--steel-dim);
}
.adm__user a { color: var(--chrome); }
.adm__user a:hover { color: var(--chrome-lit); }

.adm__main { padding: var(--sp-5) clamp(1rem, 3vw, 2.25rem) var(--sp-8); min-width: 0; }

.adm__head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.adm__head h1 { font-size: 1.6rem; margin: 0; }
.adm__head p { margin: .3rem 0 0; color: var(--steel); font-size: .92rem; }
.adm__head-right {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
}

/* ---------------------------------------------------------------------
   Seitennavigation für lange Einstellungsseiten
   --------------------------------------------------------------------- */
.admin-page-sections {
  display: grid;
  grid-template-columns: minmax(10.5rem, 12rem) minmax(0, 1fr);
  gap: clamp(var(--sp-4), 2vw, var(--sp-6));
  align-items: start;
}
.admin-page-sections__content { min-width: 0; }

.admin-page-nav {
  position: sticky;
  top: var(--sp-5);
  display: grid;
  gap: .15rem;
  padding: .45rem;
  max-height: calc(100vh - (2 * var(--sp-5)));
  max-height: calc(100dvh - (2 * var(--sp-5)));
  overflow-y: auto;
  background: var(--raise);
  background: color-mix(in srgb, var(--raise) 92%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 32px -28px rgba(0, 0, 0, .85);
}
.admin-page-nav__label {
  padding: .45rem .65rem .55rem;
  color: var(--steel-dim);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.admin-page-nav a {
  position: relative;
  display: block;
  padding: .55rem .65rem .55rem .85rem;
  border-radius: var(--radius);
  color: var(--steel);
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.admin-page-nav a::before {
  content: '';
  position: absolute;
  top: .5rem;
  bottom: .5rem;
  left: .35rem;
  width: 2px;
  border-radius: 999px;
  background: transparent;
}
.admin-page-nav a:hover {
  background: rgba(230, 233, 237, .05);
  color: var(--enamel);
}
.admin-page-nav a[aria-current='location'] {
  background: var(--chrome-wash);
  color: var(--chrome-lit);
}
.admin-page-nav a[aria-current='location']::before { background: var(--chrome); }
.admin-page-nav a:focus-visible {
  outline: 2px solid var(--chrome-lit);
  outline-offset: 2px;
}
[data-scrollspy-section] { scroll-margin-top: var(--sp-5); }

/* Die vier Stellschrauben auf „Zeiten & Ressourcen“ werden wie ein kleiner
   Assistent aufgebaut: erst die Wirkung, dann die konkreten Eingaben. */
.capacity-settings-form { min-width: 0; }

.card.capacity-card { padding: clamp(var(--sp-4), 2.3vw, var(--sp-6)); }
.capacity-card__head {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  margin-bottom: var(--sp-5);
}
.capacity-card__step {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--chrome-edge);
  border-radius: 50%;
  background: var(--chrome-wash);
  color: var(--chrome-lit);
  font: 700 .9rem/1 var(--font-mono);
}
.capacity-card__eyebrow {
  margin: 0 0 .25rem;
  color: var(--chrome);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.capacity-card__head h2 {
  margin: 0;
  color: var(--enamel);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  letter-spacing: -.01em;
  text-transform: none;
}
.capacity-card__head p:last-child {
  max-width: 48rem;
  margin: .4rem 0 0;
  color: var(--steel);
  font-size: .92rem;
  line-height: 1.55;
}

.capacity-explainer {
  display: grid;
  grid-template-columns: minmax(7.5rem, .28fr) minmax(0, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--chrome);
  border-radius: var(--radius);
  background: var(--chrome-wash);
  color: var(--steel);
  font-size: .88rem;
  line-height: 1.55;
}
.capacity-explainer strong { color: var(--enamel); }
.capacity-explainer--warning {
  border-left-color: var(--rust);
  background: var(--rust-wash);
}

.capacity-combined-days {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
}
.capacity-day-card {
  min-width: 0;
  margin: 0;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sunk);
}
.capacity-day-card--combined {
  grid-column: span 2;
  padding: 0;
  overflow: hidden;
}
.capacity-day-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 3.25rem;
  padding: .75rem var(--sp-4);
  border-bottom: 1px solid var(--line);
  background: rgba(230, 233, 237, .025);
}
.capacity-day-card__top h3 {
  margin: 0;
  color: var(--enamel);
  font-size: 1rem;
  line-height: 1.25;
}
.capacity-day-card__top span {
  color: var(--steel-dim);
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: right;
}
.capacity-day-card__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.capacity-day-panel { min-width: 0; padding: var(--sp-4); }
.capacity-day-panel + .capacity-day-panel { border-left: 1px solid var(--line); }
.capacity-day-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .25rem var(--sp-3);
  margin-bottom: var(--sp-4);
}
.capacity-day-panel__head h4 {
  margin: 0;
  color: var(--enamel);
  font-size: .88rem;
}
.capacity-day-panel__head span {
  color: var(--steel-dim);
  font-size: .68rem;
}
.capacity-time-window + .capacity-time-window {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.capacity-time-window__label {
  display: block;
  margin-bottom: .45rem;
  color: var(--steel-dim);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.capacity-time-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
.capacity-time-fields label > span {
  display: block;
  margin-bottom: .3rem;
  color: var(--steel);
  font-size: .78rem;
  font-weight: 600;
}
.capacity-time-fields .input { width: 100%; padding: .55rem .6rem; }

.capacity-rule-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
.capacity-rule-fields .field { min-width: 0; margin: 0; }
.capacity-rule-fields .input { width: 100%; }
.capacity-rule-fields .field:nth-child(3),
.capacity-rule-check { grid-column: 1 / -1; }
.capacity-rule-fields--combined { grid-template-columns: 1fr; gap: var(--sp-3); }
.capacity-rule-check {
  margin-top: 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

.capacity-card__save {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--chrome-edge);
}
.capacity-card__save div { min-width: 0; }
.capacity-card__save strong { display: block; color: var(--enamel); }
.capacity-card__save span {
  display: block;
  max-width: 42rem;
  margin-top: .25rem;
  color: var(--steel);
  font-size: .82rem;
  line-height: 1.5;
}
.capacity-card__save .btn { flex: 0 0 auto; }

.capacity-card__action { margin: 0 0 var(--sp-5); }
.capacity-list-card {
  margin-bottom: var(--sp-5);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sunk);
}
.capacity-list-card:last-child { margin-bottom: 0; }
.capacity-list-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.capacity-list-card__head h3 {
  margin: 0;
  color: var(--enamel);
  font-size: .95rem;
}
.capacity-list-card__head span {
  color: var(--steel-dim);
  font-size: .75rem;
}

@media (max-width: 88rem) {
  .capacity-combined-days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------
   Karten und Kennzahlen
   --------------------------------------------------------------------- */
.card {
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}
/* Auch die Überschrift in einer Kopfzeile mit Schaltfläche trägt dieselbe
   Auszeichnung – sonst stünden auf einer Seite zwei Sorten Kartentitel. */
.card > h2,
.card > .card-head > h2 {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--steel-dim);
}
.card > h2 { margin-bottom: var(--sp-4); }
.card > .card-head > h2 { margin: 0; }
.card--flush { padding: 0; overflow: hidden; }
.card--flush > h2 { padding: var(--sp-5) var(--sp-5) 0; margin-bottom: var(--sp-3); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.stat {
  background: var(--raise);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  text-decoration: none; color: inherit; display: block;
  transition: border-color .15s var(--ease), background-color .15s var(--ease),
              transform .15s var(--ease);
}
a.stat:hover {
  border-color: var(--chrome-edge); border-left-color: var(--chrome);
  background: var(--raise-2);
  transform: translateY(-2px);
}
.stat__value {
  font-family: var(--font-mono); font-size: 1.9rem; font-weight: 600;
  letter-spacing: -.01em; line-height: 1.1;
  color: var(--enamel);
}
.stat__label { font-size: .82rem; color: var(--steel); margin-top: .2rem; }
.stat--alert { border-left-color: var(--rust); }
.stat--alert .stat__value { color: var(--rust); }
.stat--ok { border-left-color: var(--ok); }

/* ---------------------------------------------------------------------
   Tabellen
   --------------------------------------------------------------------- */
.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tbl th {
  position: sticky; top: 0; z-index: 1;
  padding: .6rem var(--sp-4);
  background: var(--sunk);
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--steel);
  white-space: nowrap;
}
.tbl td {
  padding: .7rem var(--sp-4);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.tbl tbody tr { transition: background-color .12s var(--ease); }
.tbl tbody tr:hover { background: rgba(223, 228, 234, .06); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl a { color: var(--enamel); font-weight: 600; text-decoration-color: var(--chrome); }
.tbl a:hover { color: var(--chrome-lit); }
.tbl .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl__empty { padding: var(--sp-7); text-align: center; color: var(--steel); }

.tbl-scroll { overflow-x: auto; }

/* Statusstreifen links an der Zeile */
tr[data-status] td:first-child { box-shadow: inset 3px 0 0 var(--line); }
tr[data-status='requested']   td:first-child { box-shadow: inset 3px 0 0 var(--chrome); }
tr[data-status='confirmed']   td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
tr[data-status='rescheduled'] td:first-child { box-shadow: inset 3px 0 0 var(--chrome); }
tr[data-status='no_show']     td:first-child { box-shadow: inset 3px 0 0 var(--rust); }
tr[data-status^='cancelled'] td, tr[data-status='declined'] td { opacity: .45; }

/* ---------------------------------------------------------------------
   Wochenkalender
   --------------------------------------------------------------------- */
.week {
  display: grid;
  grid-template-columns: 3.5rem repeat(var(--days, 6), minmax(7rem, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--raise);
  overflow: hidden;
}
.week__corner { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.week__day {
  padding: .6rem .5rem;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-align: center;
  font-size: .78rem; font-weight: 700;
  background: var(--sunk);
}
.week__day:last-child { border-right: 0; }
.week__day a { color: inherit; text-decoration: none; display: block; }
.week__day a:hover { color: var(--chrome-lit); }
.week__day span {
  display: block; font-family: var(--font-mono); font-weight: 400;
  color: var(--steel); font-size: .72rem;
}
.week__day--today { background: var(--chrome-wash); color: var(--chrome-lit); }
.week__day--today span { color: var(--chrome); }

.week__hour {
  padding: .3rem .5rem 0 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: right;
  font-family: var(--font-mono); font-size: .7rem; color: var(--steel-dim);
  min-height: 3rem;
}
.week__cell {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 2px;
  min-height: 3rem;
}
.week__cell:last-child { border-right: 0; }
.week__cell--closed {
  background: repeating-linear-gradient(
    45deg, transparent 0 5px, rgba(230, 233, 237, .035) 5px 10px);
}

.appt {
  display: block;
  padding: .3rem .45rem;
  margin-bottom: 2px;
  border-radius: 3px;
  border-left: 3px solid var(--chrome);
  background: var(--chrome-wash);
  font-size: .74rem; line-height: 1.35;
  text-decoration: none; color: var(--enamel);
  transition: background-color .13s var(--ease), transform .13s var(--ease);
}
.appt.workflow--waiting_parts,
.appt.workflow--waiting_approval { border-left-color: var(--rust); }
.appt.workflow--ready,
.appt.workflow--picked_up { border-left-color: var(--ok); }
.appt:hover { background: rgba(223, 228, 234, .20); transform: translateX(2px); }
.appt b { display: block; font-family: var(--font-mono); font-size: .72rem; }
.appt .muted { color: var(--steel); }
.appt--confirmed { border-left-color: var(--ok); background: var(--ok-wash); }
.appt--confirmed:hover { background: rgba(127, 166, 148, .22); }
.appt--cancelled {
  border-left-color: var(--steel-dim); background: rgba(230, 233, 237, .05);
  opacity: .5; text-decoration: line-through;
}
.appt--waitlist {
  border: 1px dashed var(--chrome-edge);
  border-left: 3px solid var(--chrome);
  background: var(--chrome-wash);
}

/* ---------------------------------------------------------------------
   Filterleiste
   --------------------------------------------------------------------- */
.filters {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end;
  padding: var(--sp-4);
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-5);
}
.filters .field { margin: 0; }
.filters .input, .filters .select { min-width: 9rem; padding: .5rem .7rem; font-size: .9rem; }

/* ---------------------------------------------------------------------
   Detailansicht
   --------------------------------------------------------------------- */
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
}
@media (max-width: 60rem) { .detail-grid { grid-template-columns: 1fr; } }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.timeline li {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--sp-4);
  font-size: .85rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--line);
}
.timeline li:last-child { border-bottom: 0; padding-bottom: 0; }
.timeline time { font-family: var(--font-mono); font-size: .78rem; color: var(--steel-dim); }
.timeline strong { display: block; color: var(--enamel); }
.timeline span { color: var(--steel); }

details > summary { color: var(--enamel); }
details > summary::marker { color: var(--chrome); }

/* ---------------------------------------------------------------------
   Anmeldung
   --------------------------------------------------------------------- */
.login {
  position: relative;
  min-height: 100vh;
  display: grid; place-items: center;
  padding: var(--sp-5);
  background: var(--sunk);
  overflow: hidden;
}
.login::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 55% at 50% 12%, rgba(255, 255, 255, .085) 0%, transparent 62%),
    radial-gradient(70% 60% at 50% 8%, rgba(255, 255, 255, .05) 0%, transparent 58%),
    repeating-linear-gradient(115deg, rgba(230, 233, 237, .022) 0 2px, transparent 2px 10px);
}
.login__box {
  position: relative;
  width: 100%; max-width: 24rem;
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  animation: login-in .5s var(--ease) both;
}
@keyframes login-in {
  from { opacity: 0; translate: 0 14px; }
  to   { opacity: 1; translate: 0 0; }
}
.login__brand { text-align: center; margin-bottom: var(--sp-5); }
.login__brand .piston-mark {
  width: 3.4rem; height: 3.4rem;
  margin: 0 auto .8rem;
  color: var(--enamel);
}
.login__brand b {
  display: block; font-size: 1rem; letter-spacing: .085em; text-transform: uppercase;
}
.login__brand span {
  display: block; font-size: .62rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--chrome); margin-top: .25rem;
}

/* ---------------------------------------------------------------------
   Kleinteile
   --------------------------------------------------------------------- */
.inline-form { display: inline; }
.row-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.hint-box {
  padding: var(--sp-4) var(--sp-5);
  background: var(--chrome-wash);
  border: 1px solid var(--chrome-edge);
  border-radius: var(--radius);
  font-size: .88rem; line-height: 1.6;
  margin-bottom: var(--sp-5);
  color: var(--enamel);
}
.hint-box a { color: var(--chrome-lit); }
.hint-box code {
  font-family: var(--font-mono); font-size: .85em;
  background: rgba(0, 0, 0, .3); padding: .1rem .3rem; border-radius: 2px;
}

.admin [data-manual-panel][hidden],
.admin [data-picker-panel][hidden] { display: none !important; }

.pager { display: flex; gap: var(--sp-3); align-items: center; margin-top: var(--sp-5); }
.pager span { font-size: .85rem; color: var(--steel); }

.result-count { margin: 0 0 var(--sp-3); }

.field--grow { flex: 1 1 12rem; }
.field__row { display: flex; gap: .5rem; }

.kv--tight { grid-template-columns: auto 1fr; gap: .4rem 1.25rem; font-size: .9rem; }

.plain-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .6rem; font-size: .88rem;
}

.quote {
  margin: 0;
  padding: 1rem 1.25rem;
  background: rgba(230, 233, 237, .04);
  border-left: 3px solid var(--chrome);
  border-radius: var(--radius);
  line-height: 1.65;
}

.detail-sub { font-size: 1rem; margin: 1.5rem 0 .5rem; }
.detail-name { font-size: 1.1rem; font-weight: 700; margin: 0 0 .75rem; }

/* Kundenkartei: kompakte Fahrzeugblöcke in der schmalen Seitenspalte. */
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-4);
}
.card-head h2 { margin: 0; }
.vehicle-list { display: grid; gap: .75rem; }
.vehicle-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding-top: .75rem; border-top: 1px solid var(--line);
}
.vehicle-item:first-child { padding-top: 0; border-top: 0; }
.vehicle-item strong,
.vehicle-item span { display: block; }

/* =====================================================================
   Formulardialoge
   ===================================================================== */
.admin-modal {
  width: min(48rem, calc(100vw - 2rem));
  max-width: none;
  max-height: min(90dvh, 56rem);
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: visible;
}
.admin-modal[open] { animation: modal-in .18s var(--ease) both; }
.admin-modal::backdrop {
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(3px);
}
.admin-modal__panel {
  max-height: min(90dvh, 56rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--raise);
  border: 1px solid var(--chrome-edge);
  border-radius: var(--radius-lg);
  box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, .65);
}
.admin-modal__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
  background: var(--sunk);
}
.admin-modal__head h2 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--enamel);
}
.admin-modal__close {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--steel);
  font: 1.5rem/1 var(--font-sans);
  cursor: pointer;
}
.admin-modal__close:hover { border-color: var(--chrome); color: var(--enamel); }
.admin-modal__body { overflow-y: auto; padding: var(--sp-5); overscroll-behavior: contain; }
.admin-modal__body > .alert:first-child { margin-top: 0; }
.admin-modal__loading { margin: 0; padding: var(--sp-6); text-align: center; color: var(--steel); }
.admin-modal__fragment > form > .btn-row:last-child { margin-bottom: 0; }

@keyframes modal-in {
  from { opacity: 0; transform: translateY(.5rem) scale(.985); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 42rem) {
  .admin-modal {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    margin: 0;
  }
  .admin-modal__panel { height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  .admin-modal__head { padding: max(1rem, env(safe-area-inset-top)) var(--sp-4) var(--sp-3); }
  .admin-modal__body { padding: var(--sp-4); padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom)); }
}

/* ---------------------------------------------------------------------
   Terminansicht: Kopf, nächster Schritt, Werkstattkette
   --------------------------------------------------------------------- */

/*
   Der Kopf beantwortet die drei Fragen, mit denen man die Seite aufruft:
   wann, wer, welches Auto. Alles darunter ist Nachschlagewerk. Die Statusmarken
   stehen rechts oben – auf dem Telefon rutschen sie über das Datum, weil dort
   die Farbe schneller gelesen wird als die Zeile.
*/
.appt-hero {
  display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-5);
  align-items: flex-start; justify-content: space-between;
}
.appt-hero > div:first-child { min-width: 0; flex: 1 1 20rem; }

.appt-hero__when {
  display: inline-block;
  margin-bottom: .4rem;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--steel-dim);
}
.appt-hero__when--now { color: var(--chrome-lit); }

.appt-hero__date { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.appt-hero__time { font-size: 1.15rem; color: var(--chrome); margin-top: .15rem; }

.appt-hero__status {
  display: flex; flex-direction: column; align-items: flex-end; gap: .4rem;
  order: -1; margin-left: auto;
}
@media (min-width: 48rem) { .appt-hero__status { order: 0; } }

/* Die Eckdaten als Paare aus Bezeichnung und Wert – kein Fließtext, damit das
   Auge beim Suchen an einer festen Spalte entlanglaufen kann. */
.appt-chips {
  list-style: none; margin: 1.25rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem .5rem;
}
.appt-chips li {
  padding: .4rem .7rem;
  background: var(--sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  line-height: 1.35;
}
.appt-chips span {
  display: block;
  font-size: .62rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--steel-dim);
}
.appt-chips b { font-size: .9rem; color: var(--enamel); }

/*
   Nächster Schritt.

   Steht bewusst als eigene, hell umrandete Karte über der Spaltenaufteilung:
   In der Werkstatt wird diese Seite oft nur für einen einzigen Handgriff
   geöffnet, und der soll nicht erst gesucht werden müssen.
*/
.next-step { border-color: var(--chrome-edge); background: var(--chrome-wash); }
.next-step__head { margin-bottom: var(--sp-4); }
.next-step__head h2 {
  margin: 0;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--chrome);
}
.next-step__head p { margin: .35rem 0 0; font-size: .92rem; color: var(--steel); }
.next-step__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.next-step__actions form { margin: 0; }
@media (max-width: 42rem) {
  .next-step__actions { display: grid; gap: .5rem; }
  .next-step__actions .btn { width: 100%; }
}

/*
   Werkstattkette.

   Drei betriebliche Stationen: Termin, abholbereit, abgeschlossen. Historische
   Zwischenstände bleiben im Verlauf, verlangen im Alltag aber keine Klicks.
   Wartet der Auftrag auf Teile oder Freigabe, färbt sich die laufende Stufe.
*/
.wf-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem;
}
.wf-steps li {
  position: relative;
  padding-top: .9rem;
  font-size: .78rem;
  color: var(--steel-dim);
}
.wf-steps li::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; border-radius: 999px;
  background: var(--line);
}
.wf-steps li[data-state='done']::before { background: var(--ok); }
.wf-steps li[data-state='current']::before { background: var(--chrome); }
.wf-steps li[data-state='blocked']::before { background: var(--rust); }
.wf-steps li[data-state='done'] { color: var(--steel); }
.wf-steps li[data-state='current'] .wf-steps__label { color: var(--enamel); font-weight: 700; }
.wf-steps li[data-state='blocked'] .wf-steps__label { color: var(--rust); font-weight: 700; }
.wf-steps__label { display: block; }
.wf-steps__at { display: block; font-size: .7rem; color: var(--steel-dim); margin-top: .15rem; }
@media (max-width: 34rem) {
  .wf-steps { grid-template-columns: 1fr; gap: 0; }
  .wf-steps li { padding: .5rem 0 .5rem .9rem; }
  .wf-steps li::before { top: 0; bottom: 0; left: 0; right: auto; width: 3px; height: auto; }
}

/* Randaktionen einer Detailseite: gestapelt, gleich breit, in Ruhe gelassen. */
.stack-actions { display: grid; gap: .5rem; }

/*
   Eingeklappte Karte – die Zusammenfassung ist selbst schon die Antwort.

   Das Dreieck ist selbst gezeichnet: `display: flex` nimmt der Zeile in
   Chrome den eingebauten Marker, und ohne ihn ist der Karte nicht anzusehen,
   dass sich hier überhaupt etwas aufklappen lässt.
*/
.card--fold > summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  list-style: none;
  cursor: pointer;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--steel-dim);
  min-height: 2.75rem;
}
.card--fold > summary::-webkit-details-marker { display: none; }
.card--fold > summary::before {
  content: '▸';
  font-size: .9rem; line-height: 1;
  color: var(--chrome);
  transition: rotate .15s var(--ease);
}
.card--fold[open] > summary::before { rotate: 90deg; }
.card--fold > summary:hover { color: var(--enamel); }
.card--fold > summary .muted { letter-spacing: 0; text-transform: none; font-weight: 400; }

/* Aufklappbare Aktionen – einheitlich statt fünfmal inline gesetzt. */
.action-fold > summary {
  cursor: pointer;
  font-size: .9rem; font-weight: 600;
  padding: .6rem 0;
  min-height: 44px;
  display: flex; align-items: center;
}
.action-fold--danger > summary { color: var(--rust); }

/* ---------------------------------------------------------------------
   Kontrollkästchen mit Erläuterung
   --------------------------------------------------------------------- */
.check {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .6rem 0;
  cursor: pointer;
  font-size: .9rem; line-height: 1.5;
}
.check input {
  flex: 0 0 auto;
  width: 1.15rem; height: 1.15rem;
  margin-top: .12rem;
  accent-color: var(--chrome);
}
.check small {
  display: block;
  color: var(--steel-dim); font-size: .8rem; margin-top: .15rem;
}

/* =====================================================================
   Live-Betrieb
   ===================================================================== */

/*
   Verbindungsanzeige.

   Ein Punkt mit knapper Beschriftung und Titel für die Sprachausgabe. Wichtig
   ist die Unterscheidung „verbunden“ von „hängt“: Ohne sie wäre am Handy im
   Funkloch nicht zu erkennen, ob gerade nichts passiert oder nichts mehr
   ankommt.
*/
.live-dot {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--steel-dim);
  white-space: nowrap;
}
.live-dot__pip {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 0 rgba(127, 166, 148, .55);
  animation: live-pulse 2.6s var(--ease) infinite;
}
.live-dot[data-live-state='ok'].live-dot--activity .live-dot__pip {
  animation: live-activity .8s var(--ease) both;
}
.live-dot[data-live-state='stale'] { color: var(--rust); }
.live-dot[data-live-state='stale'] .live-dot__pip {
  background: var(--rust); animation: none;
}
.live-dot[data-live-state='paused'] .live-dot__pip {
  background: var(--steel-dim); animation: none;
}

@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(127, 166, 148, .5); }
  70%  { box-shadow: 0 0 0 .4rem rgba(127, 166, 148, 0); }
  100% { box-shadow: 0 0 0 0 rgba(127, 166, 148, 0); }
}

@keyframes live-activity {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(127, 166, 148, .65); }
  35%  { transform: scale(1.35); box-shadow: 0 0 0 .5rem rgba(127, 166, 148, .18); }
  100% { transform: scale(1); box-shadow: 0 0 0 .7rem rgba(127, 166, 148, 0); }
}

/* Nur der fachlich geänderte Eintrag blitzt auf, nie der ganze Live-Bereich. */
.live { display: contents; }
.live-item--changed { animation: live-item-flash 1.4s var(--ease); }
tr.live-item--changed { animation-name: live-row-flash; }

@keyframes live-item-flash {
  from { box-shadow: 0 0 0 2px var(--chrome); }
  to   { box-shadow: 0 0 0 2px transparent; }
}
@keyframes live-row-flash {
  from { background-color: var(--chrome-wash); }
  to   { background-color: transparent; }
}

/* Stapelbare Rückmeldungen und Live-Ereignisse rechts oben. */
.toast-stack {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 1rem);
  right: 1rem;
  z-index: 90;
  width: min(24rem, calc(100vw - 2rem));
  display: grid;
  gap: .65rem;
  pointer-events: none;
}

.toast {
  --toast-accent: var(--chrome);
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr) 1.6rem;
  gap: .7rem;
  align-items: start;
  padding: .85rem .8rem .85rem .9rem;
  background: linear-gradient(135deg, var(--raise-2, #1b1e22), var(--raise));
  border: 1px solid var(--chrome-edge);
  border-left: 3px solid var(--toast-accent);
  border-radius: var(--radius-lg);
  box-shadow: 0 .75rem 2.25rem rgba(0, 0, 0, .55);
  font-size: .88rem; line-height: 1.5;
  color: var(--enamel);
  pointer-events: auto;
  animation: toast-in .28s var(--ease) both;
}
.toast--success { --toast-accent: var(--ok); }
.toast--error,
.toast--warning { --toast-accent: var(--rust); }

.toast__mark {
  display: grid; place-items: center;
  width: 1.7rem; height: 1.7rem;
  border: 1px solid color-mix(in srgb, var(--toast-accent) 65%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--toast-accent) 13%, transparent);
  color: var(--toast-accent);
  font: 700 .82rem/1 var(--font-mono);
}
.toast__content { min-width: 0; }
.toast__title { display: block; color: var(--enamel); line-height: 1.35; }
.toast__text {
  margin: .18rem 0 0;
  color: var(--steel);
  overflow-wrap: anywhere;
}
.toast__link {
  display: inline-block;
  margin-top: .42rem;
  color: var(--chrome-lit);
  font-weight: 700;
  text-decoration: none;
}
.toast__link:hover { text-decoration: underline; }
.toast__close {
  display: grid; place-items: center;
  width: 1.6rem; height: 1.6rem;
  margin: -.25rem -.2rem 0 0;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--steel-dim);
  font: 1.2rem/1 system-ui, sans-serif;
  cursor: pointer;
}
.toast__close:hover,
.toast__close:focus-visible { background: var(--chrome-wash); color: var(--enamel); }
.toast--leaving { animation: toast-out .18s ease-in both; }

@keyframes toast-in {
  from { opacity: 0; translate: 1rem 0; scale: .98; }
  to   { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes toast-out {
  from { opacity: 1; translate: 0 0; }
  to   { opacity: 0; translate: .75rem 0; }
}

@media (max-width: 36rem) {
  .toast-stack {
    top: calc(env(safe-area-inset-top, 0px) + .65rem);
    right: .65rem;
    width: calc(100vw - 1.3rem);
  }
}

/* =====================================================================
   Handyleiste
   ===================================================================== */
.adm__tabs { display: none; }

@media (max-width: 64rem) {
  /* Die Leiste links weicht der Leiste unten. Diese Regel steht bewusst
     hier und nicht oben beim Gerüst: Sie muss nach der Grunddefinition von
     .adm__side kommen, sonst gewinnt bei gleicher Gewichtung die spätere. */
  .adm__side { display: none; }

  .adm__tabs {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: rgba(6, 6, 7, .94);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    /* Der Zusatz unten hält die Schaltflächen über dem Bedienstrich des
       iPhones – ohne ihn liegt der letzte Menüpunkt darunter. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .adm__tabs > a,
  .adm__tabs > .adm__more > summary {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: .18rem;
    min-height: 3.5rem;
    padding: .5rem .25rem;
    text-decoration: none;
    color: var(--steel-dim);
    font-size: .62rem; letter-spacing: .03em;
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s var(--ease);
  }
  .adm__tabs > .adm__more > summary::-webkit-details-marker { display: none; }
  .adm__tabs > .adm__more > summary::marker { content: ''; }

  .adm__tabs a[aria-current='page'] { color: var(--chrome-lit); }
  .adm__tabs a:active,
  .adm__tabs > .adm__more > summary:active { color: var(--enamel); }

  .adm__tabs-ico { position: relative; display: block; }
  .adm__tabs-ico .ico { width: 1.4rem; height: 1.4rem; display: block; }

  .adm__tabs-count {
    position: absolute;
    top: -.35rem; right: -.55rem;
    min-width: 1.05rem; height: 1.05rem;
    padding: 0 .2rem;
    border-radius: 999px;
    background: var(--rust); color: #fff;
    font-family: var(--font-mono); font-size: .62rem; font-weight: 700;
    line-height: 1.05rem; text-align: center;
  }

  .adm__tabs-label {
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Ausklappmenü für die übrigen Bereiche */
  .adm__more { position: relative; }
  .adm__more[open] > summary { color: var(--chrome-lit); }

  .adm__more-panel {
    position: absolute;
    right: .5rem; bottom: calc(100% + .5rem);
    width: max-content; min-width: 14rem;
    max-height: 70vh; overflow-y: auto;
    display: grid; gap: .1rem;
    padding: .5rem;
    background: var(--raise-2, #1b1e22);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 .8rem 2.5rem rgba(0, 0, 0, .6);
    animation: more-in .18s var(--ease) both;
  }
  @keyframes more-in {
    from { opacity: 0; translate: 0 .5rem; }
    to   { opacity: 1; translate: 0 0; }
  }

  .adm__more-panel a {
    display: flex; align-items: center; gap: .6rem;
    min-height: 44px;
    padding: .5rem .7rem;
    border-radius: var(--radius);
    text-decoration: none;
    font-size: .92rem; font-weight: 600;
    color: var(--steel);
  }
  .adm__more-panel a:active { background: rgba(230, 233, 237, .07); }
  .adm__more-panel a[aria-current='page'] { background: var(--chrome); color: var(--on-chrome); }
  .adm__more-panel .ico { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }
  .adm__more-panel .adm__nav-count { margin-left: auto; }

  .adm__more-group {
    padding: .6rem .7rem .3rem;
    font-size: .6rem; font-weight: 700;
    letter-spacing: .15em; text-transform: uppercase;
    color: var(--steel-dim);
  }

  /* Platz schaffen, damit die Leiste nichts verdeckt. */
  .adm__main {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5.5rem);
  }
  .adm__head { margin-bottom: var(--sp-4); }
  .adm__head h1 { font-size: 1.3rem; }
}

@media (max-width: 48rem) {
  .admin-page-sections { display: block; }
  .admin-page-nav {
    z-index: 20;
    top: 0;
    display: flex;
    gap: .25rem;
    max-height: none;
    margin: 0 clamp(-2.25rem, -3vw, -1rem) var(--sp-4);
    padding: .55rem clamp(1rem, 3vw, 2.25rem);
    overflow-x: auto;
    overflow-y: hidden;
    border-width: 1px 0;
    border-radius: 0;
    background: rgba(12, 13, 15, .94);
    backdrop-filter: blur(12px);
    scrollbar-width: none;
  }
  .admin-page-nav::-webkit-scrollbar { display: none; }
  .admin-page-nav__label { display: none; }
  .admin-page-nav a {
    flex: 0 0 auto;
    padding: .5rem .7rem;
    white-space: nowrap;
  }
  .admin-page-nav a::before { display: none; }
  .admin-page-nav a[aria-current='location'] {
    background: var(--chrome);
    color: var(--on-chrome);
  }
  [data-scrollspy-section] { scroll-margin-top: 4.5rem; }

  .capacity-card__head {
    grid-template-columns: 2.15rem minmax(0, 1fr);
    gap: var(--sp-3);
  }
  .capacity-card__step { width: 2.15rem; height: 2.15rem; }
  .capacity-explainer { grid-template-columns: 1fr; gap: .35rem; }
  .capacity-day-card__columns { grid-template-columns: 1fr; }
  .capacity-day-panel + .capacity-day-panel {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  .capacity-card__save { align-items: stretch; flex-direction: column; }
  .capacity-card__save .btn { width: 100%; }
  .capacity-list-card__head { align-items: flex-start; flex-direction: column; gap: .2rem; }

  .capacity-list-card .tbl,
  .capacity-list-card .tbl tbody,
  .capacity-list-card .tbl tr { display: block; width: 100%; }
  .capacity-list-card .tbl thead { display: none; }
  .capacity-list-card .tbl tr {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--line);
  }
  .capacity-list-card .tbl tr:last-child { border-bottom: 0; }
  .capacity-list-card .tbl td {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: var(--sp-3);
    padding: .35rem 0;
    border: 0;
    overflow-wrap: anywhere;
  }
  .capacity-list-card .tbl td[data-capacity-label]::before {
    content: attr(data-capacity-label);
    color: var(--steel-dim);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .capacity-list-card .tbl td[data-capacity-action] {
    display: block;
    margin-top: .35rem;
  }
  .capacity-list-card .tbl td[data-capacity-action] form,
  .capacity-list-card .tbl td[data-capacity-action] .btn { width: 100%; }
  .capacity-list-card .tbl td[data-capacity-empty] {
    display: block;
    padding: var(--sp-5) 0;
  }
}

/* =====================================================================
   Am Handy: Tabellen werden zu Karten
   =====================================================================

   Eine Tabelle mit sieben Spalten lässt sich auf einem Telefon nicht
   sinnvoll darstellen. Seitliches Schieben ist keine Lösung – man verliert
   die erste Spalte aus dem Blick und weiß nicht mehr, zu wem eine Zeile
   gehört.

   Aus jeder Zeile wird deshalb eine Karte, aufgebaut wie eine gedruckte
   Terminliste:

       08:00  bis 08:45                        [BESTÄTIGT]
       Maria Hofbauer
       VW Golf VII · SL-123AB · §57a Begutachtung
       [ Öffnen ]

   Welche Zelle wohin gehört, sagt `data-card`. Absichtlich nicht über die
   Spaltenüberschrift: Die heißt in der einen Tabelle „Zeit“ und in der
   anderen „Termin“, meint aber dasselbe. Eine Rolle beschreibt, wofür eine
   Angabe da ist, und bleibt gleich, wenn sich die Überschrift ändert.

   Auf Beschriftungen wird verzichtet. Bei „08:00“, einem Namen und einem
   Kennzeichen sagt niemandem ein vorangestelltes „ZEIT“, „KUNDE“,
   „FAHRZEUG“ etwas, was nicht ohnehin zu sehen ist – es verdoppelt nur die
   Höhe der Karte, und Höhe ist auf einem Telefon das knappste Gut.
   ===================================================================== */
@media (max-width: 48rem) {
  .tbl-scroll { overflow-x: visible; }

  .tbl--cards,
  .tbl--cards thead,
  .tbl--cards tbody,
  .tbl--cards tr,
  .tbl--cards td { display: block; width: auto; }

  .tbl--cards thead { display: none; }

  .tbl--cards tr {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .1rem .55rem;
    padding: .85rem 1rem .85rem 1.15rem;
    border-bottom: 1px solid var(--line);
  }
  .tbl--cards tr:last-child { border-bottom: 0; }
  .tbl--cards tbody tr:hover { background: none; }

  .tbl--cards td { padding: 0; border: 0; }

  /* Kopfzeile: Zeitpunkt links, Zustand rechts. */
  .tbl--cards td[data-card='head'] {
    order: 1; flex: 1 1 auto;
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  }
  .tbl--cards td[data-card='head'] strong { font-size: 1.2rem; color: var(--enamel); }
  .tbl--cards td[data-card='head'] .muted { font-size: .78rem; margin-left: .3rem; }

  .tbl--cards td[data-card='status'] { order: 2; flex: 0 0 auto; }

  /* Name – die Zeile, nach der man sucht. */
  .tbl--cards td[data-card='title'] {
    order: 3; flex: 1 1 100%;
    margin-top: .15rem;
  }
  .tbl--cards td[data-card='title'] a { font-size: 1rem; }
  .tbl--cards td[data-card='title'] > * { display: block; }
  .tbl--cards td[data-card='title'] .badge { display: inline-block; margin-top: .25rem; }

  /* Nebenangaben laufen in eine Zeile, durch Abstand getrennt. */
  .tbl--cards td[data-card='meta'] {
    order: 4; flex: 0 1 auto;
    font-size: .8rem; color: var(--steel-dim);
    line-height: 1.5;
  }
  .tbl--cards td[data-card='meta'] > * { display: inline; }
  .tbl--cards td[data-card='meta']:empty { display: none; }
  .tbl--cards td[data-card='meta'] a { position: relative; z-index: 2; }

  /*
     Das Anliegen des Kunden.

     Steht in einer eigenen Zeile und wird nach zwei Zeilen abgeschnitten:
     Bei den offenen Anfragen ist es die Angabe, an der sich entscheidet, ob
     man bestätigt – wegzulassen wäre falsch. Der vollständige Text steht
     eine Berührung entfernt auf der Detailseite.
  */
  .tbl--cards td[data-card='note'] {
    order: 5; flex: 1 1 100%;
    margin-top: .25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.45;
  }

  /* Aktionen ans Ende, über die volle Breite und mit voller Trefferfläche. */
  .tbl--cards td[data-card='actions'] {
    order: 6; flex: 1 1 100%;
    margin-top: .6rem;
    position: relative; z-index: 2;
  }
  .tbl--cards td[data-card='actions'] .btn { min-height: 44px; }

  /*
     Ein Knopf, der nur „Öffnen“ heißt, ist auf der Karte überflüssig – der
     Name darüber führt zum selben Ziel. Statt ihn anzuzeigen, wird die
     ganze Karte zur Trefferfläche: Der Namenslink legt eine unsichtbare
     Ebene über die Karte.

     Die Telefonnummer liegt darüber und bleibt eigenständig anwählbar.
     Damit hat die Karte genau zwei Bedeutungen, beide großflächig:
     irgendwo tippen öffnet den Termin, auf die Nummer tippen ruft an.
  */
  .tbl--cards td[data-card='open'] { display: none; }

  .tbl--cards td[data-card='title'] > a:first-child::after {
    content: '';
    position: absolute; inset: 0;
    z-index: 1;
  }
  .tbl--cards td[data-card='title'] a[href^='tel:'] {
    position: relative; z-index: 2;
    display: inline-flex; align-items: center;
    min-height: 44px;
    padding-right: .5rem;
  }
  .tbl--cards tr:active { background: rgba(230, 233, 237, .05); }
  .tbl--cards td[data-card='actions'] .row-actions > * { flex: 1 1 auto; }
  .tbl--cards td[data-card='actions'] .btn--block,
  .tbl--cards td[data-card='actions'] form { width: 100%; }

  /* Der Zustandsstreifen sitzt jetzt an der Karte, nicht an der Zelle. */
  .tbl--cards tr[data-status] { box-shadow: inset 3px 0 0 var(--line); }
  .tbl--cards tr[data-status] td:first-child { box-shadow: none; }
  .tbl--cards tr[data-status='requested'],
  .tbl--cards tr[data-status='rescheduled'] { box-shadow: inset 3px 0 0 var(--chrome); }
  .tbl--cards tr[data-status='confirmed'] { box-shadow: inset 3px 0 0 var(--ok); }
  .tbl--cards tr[data-status='no_show'] { box-shadow: inset 3px 0 0 var(--rust); }

  .tbl--cards .tbl__empty {
    flex: 1 1 100%;
    padding: var(--sp-6) var(--sp-4);
    text-align: center;
  }

  .card--flush > h2 { padding: var(--sp-4) var(--sp-4) 0; }
}

/* Nur für die Sprachausgabe. */
.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* =====================================================================
   Kalender am Handy: Tagesliste statt Raster
   ===================================================================== */
.agenda { display: none; }

@media (max-width: 60rem) {
  .week-wrap { display: none; }
  .agenda { display: grid; gap: var(--sp-4); }
}

.agenda__day {
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.agenda__day--today { border-color: var(--chrome-edge); }

.agenda__head {
  display: flex; align-items: baseline; gap: .5rem;
  margin: 0;
  padding: .7rem var(--sp-4);
  background: var(--sunk);
  border-bottom: 1px solid var(--line);
  font-size: .85rem; font-weight: 700;
}
.agenda__day--today .agenda__head { background: var(--chrome-wash); color: var(--chrome-lit); }
.agenda__head span {
  font-family: var(--font-mono); font-weight: 400;
  font-size: .78rem; color: var(--steel);
}
.agenda__head em {
  margin-left: auto;
  font-family: var(--font-mono); font-style: normal; font-size: .78rem;
  color: var(--steel-dim);
}

.agenda__item {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  min-height: 56px;
  padding: .7rem var(--sp-4);
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
.agenda__item:last-child { border-bottom: 0; }
.agenda__item:active { background: rgba(230, 233, 237, .06); }
.agenda__item--cancelled { opacity: .45; }
.agenda__item--hold {
  border-left: 3px dashed var(--chrome);
  background: var(--chrome-wash);
}
.agenda__row { border-bottom: 1px solid var(--line); }
.agenda__row:last-child { border-bottom: 0; }
.agenda__row .agenda__item { border-bottom: 0; }
.agenda__quick { margin: 0; padding: 0 var(--sp-4) var(--sp-4) 4.35rem; }
@media (max-width: 28rem) { .agenda__quick { padding-left: var(--sp-4); } }

.agenda__time {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  line-height: 1.25;
}
.agenda__time b { display: block; font-size: .95rem; color: var(--enamel); }
.agenda__time span { font-size: .72rem; color: var(--steel-dim); }

.agenda__body { min-width: 0; }
.agenda__body strong { display: block; font-size: .95rem; }
.agenda__body span { display: block; }

.agenda__empty {
  margin: 0; padding: var(--sp-4);
  font-size: .85rem; color: var(--steel-dim);
}

/* =====================================================================
   Tages-Plantafel
   ===================================================================== */
.day-board-wrap {
  overflow: auto;
  max-height: calc(100vh - 12rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--raise);
}
.day-board {
  display: grid;
  grid-template-columns: 4rem repeat(var(--plan-columns), minmax(11rem, 1fr));
  grid-template-rows: 3rem repeat(var(--plan-rows), 1.35rem);
  min-width: calc(4rem + var(--plan-columns) * 11rem);
  position: relative;
}
.day-board__corner,
.day-board__head {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .4rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--sunk);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.day-board__corner { grid-column: 1; grid-row: 1; left: 0; z-index: 10; }
.day-board__time {
  position: sticky;
  left: 0;
  z-index: 5;
  grid-column: 1;
  padding: .2rem .45rem 0 0;
  border-right: 1px solid var(--line);
  background: var(--raise);
  color: var(--steel-dim);
  font: .68rem/1 var(--font-mono);
  text-align: right;
}
.day-board__time--hour { color: var(--steel); }
.day-board__slot {
  z-index: 1;
  border-right: 1px solid var(--line);
  border-bottom: 1px dotted rgba(230, 233, 237, .08);
  background: transparent;
}
.day-board__slot--hour { border-top: 1px solid rgba(230, 233, 237, .14); }
.day-board__slot:hover,
.day-board__slot:focus-visible { background: var(--chrome-wash); outline: 1px solid var(--chrome-edge); }
.day-board__appointment {
  position: relative;
  z-index: 4;
  align-self: stretch;
  margin: 2px 3px;
  padding: .45rem .55rem;
  overflow: hidden;
  border: 1px solid var(--chrome-edge);
  border-left: 4px solid var(--chrome);
  border-radius: 4px;
  background: #23272d;
  color: var(--enamel);
  text-decoration: none;
  line-height: 1.25;
}
.day-board__appointment:hover { background: #2b3037; color: #fff; }
.day-board__appointment > * { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-board__appointment-time {
  padding-right: 5.75rem;
  color: var(--chrome);
  font: .72rem/1.2 var(--font-mono);
}
.day-board__appointment strong { margin-top: .25rem; font-size: .84rem; }
.day-board__appointment span:not(.day-board__appointment-time) { color: var(--steel); font-size: .72rem; }
.day-board__appointment em { margin-top: .15rem; color: var(--steel-dim); font-size: .68rem; font-style: normal; line-height: 1.1; }
.day-board__appointment.workflow--arrived,
.day-board__appointment.workflow--in_progress { border-left-color: var(--chrome-lit); }
.day-board__appointment.workflow--waiting_parts,
.day-board__appointment.workflow--waiting_approval { border-left-color: var(--rust); }
.day-board__appointment.workflow--ready,
.day-board__appointment.workflow--picked_up { border-left-color: var(--ok); }
.day-board__hold {
  z-index: 3;
  border: 1px dashed var(--chrome-edge);
  border-left: 4px solid var(--chrome);
  background: #242a30;
}
.day-board__hold:hover { background: #303840; }
.day-agenda { display: none; }

@media (max-width: 60rem) {
  .day-board-wrap { display: none; }
  .day-agenda {
    display: grid;
    gap: 0;
    background: var(--raise);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .day-agenda .agenda__item {
    grid-template-columns: 3.7rem minmax(0, 1fr);
    gap: .85rem;
    align-items: start;
    min-height: 72px;
    padding: .9rem var(--sp-4);
  }
  .day-agenda .agenda__time { padding-top: .1rem; }
  .day-agenda .agenda__quick {
    display: flex;
    padding: 0 var(--sp-4) .9rem calc(var(--sp-4) + 4.55rem);
  }
  .day-agenda .agenda__quick .btn { width: auto; }
}

/* Statusmarke und Informationshierarchie der Tagesplanung. */
.day-plan-status {
  display: inline-flex !important;
  align-items: center;
  width: max-content;
  max-width: 9.5rem;
  padding: .18rem .45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(230, 233, 237, .06);
  color: var(--steel) !important;
  font-size: .62rem !important;
  font-weight: 700;
  letter-spacing: .055em;
  line-height: 1.15;
  text-align: right;
  text-transform: uppercase;
  white-space: normal !important;
}
.day-plan-status--request,
.day-plan-status--active {
  border-color: transparent;
  background: var(--chrome-wash);
  color: var(--chrome-lit) !important;
}
.day-plan-status--blocked {
  border-color: transparent;
  background: var(--rust-wash);
  color: var(--rust) !important;
}
.day-plan-status--done {
  border-color: transparent;
  background: var(--ok-wash);
  color: var(--ok) !important;
}
.day-board__appointment > .day-plan-status {
  position: absolute;
  top: .35rem;
  right: .4rem;
  max-width: 5.25rem;
  padding: .12rem .35rem;
  font-size: .55rem !important;
}

.day-agenda__row {
  border-left: 3px solid var(--line);
  transition: background-color .13s var(--ease);
}
.day-agenda__row:hover { background: rgba(230, 233, 237, .035); }
.day-agenda__row--request,
.day-agenda__row--active { border-left-color: var(--chrome); }
.day-agenda__row--blocked { border-left-color: var(--rust); }
.day-agenda__row--done { border-left-color: var(--ok); }
.day-agenda__topline {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  gap: .65rem;
}
.day-agenda__topline strong {
  min-width: 0;
  line-height: 1.25;
}
.day-agenda__topline .day-plan-status { flex: 0 0 auto; }
.day-agenda__service {
  margin-top: .35rem;
  color: var(--steel);
  font-size: .84rem;
  line-height: 1.35;
}
.day-agenda__meta {
  display: flex !important;
  flex-wrap: wrap;
  gap: .1rem .35rem;
  margin-top: .2rem;
  color: var(--steel-dim);
  font-size: .76rem;
  line-height: 1.35;
}
@media (max-width: 28rem) {
  .day-agenda .agenda__quick { padding-left: calc(var(--sp-4) + 4.55rem); }
  .day-plan-status { max-width: 7.5rem; font-size: .58rem !important; }
}

/* =====================================================================
   Nachrichten und Warteliste
   ===================================================================== */
.msg--read { opacity: .62; }
.msg__head {
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between; align-items: baseline;
}
.msg__name { font-size: 1.05rem; }
.msg__contact { margin-top: .2rem; display: flex; flex-wrap: wrap; gap: .2rem 1rem; }
.msg__subject { margin: 1rem 0 .25rem; font-weight: 700; }
.msg__text {
  margin: .75rem 0 1rem;
  padding: 1rem 1.25rem;
  background: rgba(230, 233, 237, .04);
  border-left: 3px solid var(--chrome);
  border-radius: var(--radius);
  line-height: 1.65;
}

.wl__grid {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  justify-content: space-between; align-items: start;
}
.wl__main { flex: 1 1 20rem; min-width: 0; }
.wl__side { flex: 0 0 17rem; }
.wl__title {
  display: flex; flex-wrap: wrap; gap: .6rem;
  align-items: center; margin-bottom: .6rem;
}
.wl__title strong { font-size: 1.05rem; }
.wl__priority { display: flex; gap: .4rem; align-items: center; }
.wl__priority .select { font-size: .85rem; padding: .4rem .6rem; }

@media (max-width: 48rem) {
  .wl__side { flex: 1 1 100%; }
  .kv--tight { grid-template-columns: 1fr; gap: .1rem .5rem; }
  .kv--tight dt { margin-top: .5rem; }
}

/* =====================================================================
   Benachrichtigungen einrichten
   ===================================================================== */
.push__status {
  margin: 0 0 1rem;
  padding: .8rem 1rem;
  border-radius: var(--radius);
  border-left: 3px solid var(--line);
  background: rgba(230, 233, 237, .04);
  font-size: .9rem; line-height: 1.55;
}
.push__status--granted { border-left-color: var(--ok); }
.push__status--denied,
.push__status--server,
.push__status--unsupported { border-left-color: var(--rust); }
.push__status--needs-install { border-left-color: var(--chrome); }
.due--overdue { color: var(--rust); font-weight: 700; }

.attention-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.attention-strip > * {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  padding: .8rem 1rem;
  background: var(--raise);
  color: inherit;
  text-decoration: none;
}
.attention-strip strong { color: var(--chrome); font: 600 1.3rem/1 var(--font-mono); }
.attention-strip span { color: var(--steel); font-size: .78rem; }
.attention-strip__alert strong { color: var(--rust); }
.attention-strip__ok strong { color: var(--ok); }

.report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.report-grid .card { margin-bottom: 0; }
.report-bars { display: grid; gap: 1rem; }
.report-bar > div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.report-bar strong { font-size: .88rem; }
.report-bar div span { color: var(--steel-dim); font: .72rem/1.3 var(--font-mono); text-align: right; }
.report-bar__track { display: block; height: .35rem; margin-top: .35rem; overflow: hidden; border-radius: 999px; background: rgba(230, 233, 237, .08); }
.report-bar__track i { display: block; height: 100%; border-radius: inherit; background: var(--chrome); }
@media (max-width: 52rem) { .report-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   Trefferflächen am Handy
   =====================================================================

   Unter 64rem bekommt alles Bedienbare mindestens 44 Pixel Höhe. Das ist
   nicht Geschmackssache: Darunter steigt die Fehlerquote beim Tippen
   spürbar, und ein versehentlich getroffenes „Absagen“ schickt dem Kunden
   sofort eine E-Mail.
   ===================================================================== */
@media (max-width: 64rem) {
  .btn,
  .input,
  .select,
  .textarea { min-height: 44px; }

  .btn--sm { min-height: 44px; padding-inline: 1rem; }

  .filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
    padding: var(--sp-3);
  }
  .filters .field--grow,
  .filters .btn { grid-column: 1 / -1; }
  .filters .input,
  .filters .select { min-width: 0; width: 100%; }

  .row-actions { gap: .5rem; }
  .row-actions .btn { flex: 1 1 auto; }

  .stat-row { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .stat { padding: var(--sp-3) var(--sp-4); }
  .stat__value { font-size: 1.5rem; }

  .card { padding: var(--sp-4); margin-bottom: var(--sp-4); }

  .timeline li { grid-template-columns: 5rem 1fr; gap: var(--sp-3); }
}

/* Anrufen und E-Mail als vollwertige Schaltflächen – am Handy ist das der
   häufigste nächste Schritt nach dem Öffnen eines Termins. */
.contact-actions { display: grid; gap: .5rem; }
.contact-actions .btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  min-height: 44px;
  text-align: left;
}
.contact-actions .btn span { font-weight: 400; opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  .login__box,
  .toast,
  .adm__more-panel { animation: none; }
  .live-dot__pip,
  .live-dot[data-live-state='ok'].live-dot--activity .live-dot__pip { animation: none; }
  .live-item--changed { animation: none; }
}