/* Neukunden-Registrierung — Twister Kuriere.
   Fünf kurze Schritte statt einer langen Seite. Eine Schrift (Source Sans, wie
   twisterkuriere.de), ein Akzent (Twister-Rot), eine Spalte. Farbe markiert nur
   Zustand: erledigt, aktuell, fehlerhaft. */
:root {
  --paper: #ffffff; --ground: #f4f5f6; --ink: #1c1e21; --muted: #626c76;
  --line: #d9dde1; --line-strong: #b3b9c0; --placeholder: #98a0a8;
  --red: #e0001a; --red-deep: #990000; --red-tint: #fff2f3; --ok: #1f7a45;
  --focus: rgba(224, 0, 26, .18);
}
* { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); background: var(--ground); font: 17px/1.5 "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Arial, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
a { color: var(--red-deep); text-underline-offset: 2px; }
button { font: inherit; }
::placeholder { color: var(--placeholder); opacity: 1; }
.wrap { max-width: 640px; margin: 0 auto; padding: 26px 20px 80px; }

/* ---------- head ---------- */
.head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
.logo img { display: block; width: 150px; height: auto; }
.phone { color: var(--ink); text-decoration: none; text-align: right; line-height: 1.2; font-weight: 700; font-size: 17px; white-space: nowrap; }
.phone small { display: block; color: var(--muted); font-weight: 400; font-size: 13px; }
@media (max-width: 420px) { .logo img { width: 120px; } }

/* ---------- intro ---------- */
h1 { font-size: clamp(32px, 7vw, 44px); line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 12px; font-weight: 700; }
.lede { margin: 0 0 30px; max-width: 56ch; color: var(--muted); font-size: 18px; }

/* ---------- resume note ---------- */
.resume { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin: 0 0 22px; padding: 10px 14px; background: var(--paper); border-left: 3px solid var(--red); font-size: 15px; }
.resume button { background: none; border: 0; padding: 0; color: var(--red-deep); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* ---------- step rail: a real sequence, so the numbered/linked treatment earns its place ---------- */
.rail { margin: 0 0 30px; }
.rail ol { list-style: none; margin: 0; padding: 0; display: flex; }
.rail li { flex: 1; position: relative; }
.rail li::before { content: ""; position: absolute; top: 8px; left: -50%; right: 50%; height: 2px; background: var(--line); }
.rail li:first-child::before { display: none; }
.rail li.done::before, .rail li.cur::before { background: var(--red); }
.rail li button { all: unset; display: block; width: 100%; padding-top: 26px; position: relative; text-align: center; font-size: 13px; color: var(--muted); cursor: default; }
.rail li button:not([disabled]) { cursor: pointer; }
.rail li button:not([disabled]):hover .lbl { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.rail li button:focus-visible .dot { box-shadow: 0 0 0 3px var(--focus); }
.rail .dot { position: absolute; top: 0; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line-strong); z-index: 1; }
.rail li.done .dot { background: var(--red); border-color: var(--red); }
.rail li.done .dot::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.rail li.cur .dot { border-color: var(--red); }
.rail li.cur .dot::after { content: ""; position: absolute; left: 3px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.rail li.cur button { color: var(--ink); font-weight: 700; }
@media (max-width: 479px) { .rail .lbl { display: none; } .rail li button { padding-top: 18px; } }

/* ---------- steps ---------- */
.stepno { margin: 0 0 4px; font-size: 14px; color: var(--muted); }
.step h2 { font-size: 27px; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 6px; font-weight: 700; outline: none; }
.hint { margin: 0 0 22px; color: var(--muted); max-width: 56ch; }
h3.sub { font-size: 19px; margin: 30px 0 4px; font-weight: 700; }
.row { display: grid; gap: 14px; grid-template-columns: 1fr; margin-bottom: 16px; }
.row.two { grid-template-columns: 1fr 1fr; }
.row.nr { grid-template-columns: 1fr 104px; }
.row.plz { grid-template-columns: 116px 1fr; }
@media (max-width: 520px) { .row.two { grid-template-columns: 1fr; } }

/* ---------- fields ---------- */
.f { min-width: 0; }
.f > label { display: block; font-size: 15px; font-weight: 700; margin-bottom: 5px; }
.opt { color: var(--muted); font-weight: 400; margin-left: 6px; }
.help { margin: 5px 0 0; font-size: 14px; color: var(--muted); }
.help.ok { color: var(--ok); }
input[type=text], input[type=email], input[type=tel], input[type=url], input[type=password], input[type=date], select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 4px; padding: 11px 13px; min-height: 48px; outline: none; margin: 0;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
input[type=text], input[type=email], input[type=tel], input[type=url], input[type=password], textarea { -webkit-appearance: none; appearance: none; }
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--focus); }
.f.err input, .f.err select, .f.err textarea { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); background: var(--red-tint); }
.f.err input:focus, .f.err select:focus, .f.err textarea:focus { box-shadow: 0 0 0 1px var(--red), 0 0 0 4px var(--focus); }
.msg { display: block; margin: 6px 0 0; font-size: 14px; font-weight: 700; color: var(--red-deep); }
.msg:empty { display: none; }
.rowmsg { margin: -8px 0 16px; }

/* password with show/hide instead of a repeat field */
.pw { position: relative; }
.pw input { padding-right: 104px; }
.pw button { position: absolute; right: 6px; top: 6px; height: 36px; padding: 0 12px; border: 0; border-radius: 3px; background: var(--ground); color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer; }
.pw button:hover { background: var(--line); }
.pw button:focus-visible { outline: 3px solid var(--focus); }

/* ---------- segmented choice ---------- */
.seg { display: flex; max-width: 440px; margin-bottom: 20px; border: 1px solid var(--line-strong); border-radius: 4px; overflow: hidden; background: var(--paper); }
.seg label { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 14px; text-align: center; font-weight: 700; cursor: pointer; border-right: 1px solid var(--line-strong); }
.seg label:last-child { border-right: 0; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg input:checked + label { background: var(--ink); color: #fff; }
.seg input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: -3px; }

/* ---------- plain checkbox line ---------- */
.check { display: flex; gap: 12px; align-items: flex-start; margin: 2px 0 18px; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--red); flex: none; }

/* ---------- consent boxes (AGB, SEPA-Mandat): framed, so their state cannot be missed ---------- */
.consent { display: grid; grid-template-columns: 22px 1fr; gap: 2px 14px; align-items: start; padding: 14px 16px; margin: 0 0 16px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 4px; cursor: pointer; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.consent input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--red); }
.consent .t { display: block; font-weight: 700; }
.consent .sub { display: block; grid-column: 2; font-size: 14px; color: var(--muted); }
.consent .msg { grid-column: 2; }
.consent:focus-within { border-color: var(--red); box-shadow: 0 0 0 3px var(--focus); }
.consent.err { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); background: var(--red-tint); }
.consent.err:focus-within { box-shadow: 0 0 0 1px var(--red), 0 0 0 4px var(--focus); }

/* ---------- "more" disclosure ---------- */
details.more { margin: -2px 0 18px; }
details.more summary { display: inline-block; list-style: none; cursor: pointer; color: var(--red-deep); font-size: 15px; text-decoration: underline; text-underline-offset: 2px; }
details.more summary::-webkit-details-marker { display: none; }
details.more[open] summary { margin-bottom: 14px; }

/* ---------- address autocomplete ---------- */
.acw { position: relative; }
.acw ul { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px 0; list-style: none; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 4px; box-shadow: 0 10px 28px rgba(0, 0, 0, .14); max-height: 260px; overflow: auto; }
.acw li { padding: 9px 13px; cursor: pointer; font-size: 16px; }
.acw li small { color: var(--muted); margin-left: 6px; font-size: 14px; }
.acw li:hover, .acw li.sel { background: var(--ground); }

/* ---------- summary sheet ---------- */
.sheet { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 16px 20px 4px; margin: 26px 0 20px; }
.sheet h3 { margin: 0 0 6px; font-size: 19px; }
.sheet dl { margin: 0; display: grid; grid-template-columns: 126px 1fr auto; gap: 0 14px; }
.sheet dt, .sheet dd, .sheet .edit { padding: 9px 0; border-top: 1px solid var(--line); }
.sheet dt { color: var(--muted); font-size: 15px; }
.sheet dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.sheet .edit { font-size: 14px; }
@media (max-width: 479px) {
  .sheet dl { grid-template-columns: 1fr auto; }
  .sheet dt { grid-column: 1 / -1; padding-bottom: 0; }
  .sheet dd, .sheet .edit { border-top: 0; padding-top: 2px; }
}

/* ---------- buttons ---------- */
.nav { display: flex; align-items: center; gap: 22px; margin-top: 30px; }
button.primary { font-weight: 700; font-size: 17px; color: #fff; background: var(--red); border: 0; border-radius: 4px; padding: 0 28px; min-height: 52px; cursor: pointer; }
button.primary:hover { background: var(--red-deep); }
button.primary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
button.primary[disabled] { opacity: .6; cursor: progress; }
button.back { background: none; border: 0; padding: 0; color: var(--ink); font-size: 16px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
button.back:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.steperr, .formerr { margin: 12px 0 0; color: var(--red-deep); font-weight: 700; }
button.link { background: none; border: 0; padding: 0; color: var(--red-deep); font-weight: 400; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
button.link:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.steperr:empty, .formerr:empty { display: none; }
@media (max-width: 520px) { button.primary { flex: 1; } }

/* ---------- done ---------- */
.done h2 { font-size: clamp(26px, 6vw, 32px); line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 18px; outline: none; }
.next { list-style: none; margin: 0 0 26px; padding: 0; counter-reset: n; }
.next li { position: relative; padding: 0 0 14px 44px; counter-increment: n; max-width: 56ch; }
.next li::before { content: counter(n); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.next b { font-weight: 700; overflow-wrap: anywhere; }
.done .ref { color: var(--muted); font-size: 14px; }

/* ---------- footer ---------- */
footer { margin-top: 64px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 18px; }
footer a { color: inherit; }

/* ---------- honeypot ---------- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- motion: only as an answer to an action ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.step.enter { animation: rise .2s ease-out; }
.shake { animation: shake .32s ease-in-out; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ====================================================================== Kundenportal (app/)
   Below: ../design/design.css (redesign D1, round 2) — the design folder stays a prototype. It replaces
   the former portal additions (.nav-main, .wrap.wide, old .chip, table.list, .empty, .toolbar, .att*).
   Since D2d the rules that skin A „Graphit“ (../design/explore/a-graphit/skin.css) replaces outright are
   changed IN PLACE here (shell, chips, done-times, disabled button) and marked „skin A“; so this
   block is no longer a byte copy of design.css. Then the skin block (tokens, the dark summary/price
   panel, logo negative, welcome + feedback), then app-only rules at the very end. */
/* Kundenportal – Redesign Runde 1 (D1). Wird HINTER style.css geladen (hier: base.css = Kopie).
   Erweitert die Neukunden-Tokens, ersetzt sie nicht. Eine Schrift, ein Akzent.
   Das eine auffällige Element ist die Route (.route, .flow .stop): eine senkrechte Linie mit
   Markern – Ring = Abholung, Punkt = Zwischenstopp, voller Kreis = Zustellung; rot = hier wird
   gerade gearbeitet; gestrichelt = noch offen. Alles andere bleibt ruhig. */

/* ============================================================ tokens */
:root {
  --ok-tint: #edf6f0; --warn: #8a5300; --warn-tint: #fdf4e3; --ink-2: #3b4047;
  --t-display: 40px; --t-h2: 24px; --t-h3: 19px; --t-small: 15px; --t-micro: 13px;
  --r-field: 4px; --r-sheet: 6px;
  --page: 1200px; --gut: 32px; --col: 680px; --side: 360px;
  --lift: 0 12px 32px rgba(28, 30, 33, .16);
}
@media (max-width: 720px) { :root { --t-display: 30px; --t-h2: 21px; --gut: 16px; } }
.num, .tab { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.i { width: 18px; height: 18px; flex: none; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
a:focus-visible { outline: 3px solid rgba(224, 0, 26, .35); border-radius: 2px; }

/* ============================================================ shell */
.page { max-width: calc(var(--page) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.appbar { background: var(--gr); }   /* skin A: graphite, no rule below */
.appbar .page { display: flex; align-items: center; gap: 32px; min-height: 72px; }
.appbar .logo img { width: 132px; }
.appbar nav { display: flex; gap: 4px; align-self: stretch; }
.appbar nav a { display: flex; align-items: center; padding: 0 14px; color: var(--on-gr-2); text-decoration: none; font-size: 16px; border-bottom: 2px solid transparent; }
.appbar nav a:hover { color: var(--on-gr); }
.appbar nav a.cur { color: var(--on-gr); border-bottom-color: var(--on-gr); font-weight: 700; }   /* skin A: white underline, red stays on the button */
.appbar .side { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.appbar .who { text-align: right; font-size: 14px; line-height: 1.3; color: var(--on-gr-2); }
.appbar .who b { display: block; color: var(--on-gr); font-weight: 600; font-size: 15px; }
.appbar .who a { color: var(--on-gr-2); }
/* the helpline only sits on graphite (subbar, short app bar of the login pages) */
.helpline { font-size: 14px; color: var(--on-gr-2); }
.helpline a { color: var(--on-gr); font-weight: 700; text-decoration: none; white-space: nowrap; }
.btn-new { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--r-field); background: var(--red); color: #fff; font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap; }
.btn-new:hover { background: var(--red-deep); }
.btn-new.cur { background: transparent; color: var(--on-gr); box-shadow: inset 0 0 0 2px var(--on-gr-2); }
.subbar { border-bottom: 1px solid var(--gr-line); background: var(--gr); }
.subbar .page { display: flex; justify-content: space-between; gap: 16px; min-height: 32px; align-items: center; }

/* mobile menu (details, no JS) */
.menu { display: none; position: relative; }
.menu summary { list-style: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-field); cursor: pointer; color: var(--on-gr); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover, .menu[open] summary { background: var(--gr-2); }
.menu .drop { position: absolute; right: 0; top: 52px; z-index: 30; width: min(300px, calc(100vw - 32px)); background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r-sheet); box-shadow: var(--lift); padding: 8px 0; }
.menu .drop a { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; color: var(--ink); text-decoration: none; }
.menu .drop a.cur { font-weight: 700; box-shadow: inset 3px 0 0 var(--red); }
.menu .drop hr { border: 0; border-top: 1px solid var(--line); margin: 8px 0; }
.menu .drop p { margin: 0; padding: 8px 18px; font-size: 14px; color: var(--muted); }
@media (max-width: 899px) {
  .appbar .page { gap: 12px; min-height: 64px; }
  .appbar nav, .appbar .who, .subbar { display: none; }
  .appbar .logo img { width: 112px; }
  .menu { display: block; }
  .btn-new { padding: 0 14px; font-size: 15px; }
}

main { padding: 40px 0 96px; }
@media (max-width: 720px) { main { padding: 24px 0 64px; } }
.ph { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin: 0 0 28px; }
.ph h1 { font-size: var(--t-display); margin: 0; letter-spacing: -0.015em; }
.ph .meta { margin: 6px 0 0; color: var(--muted); }
.ph .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }

.foot { border-top: 1px solid var(--line); }
.foot .page { display: flex; flex-wrap: wrap; gap: 6px 22px; padding-top: 18px; padding-bottom: 40px; color: var(--muted); font-size: 14px; }
.foot a { color: inherit; }
.foot .tel { margin-left: auto; }
@media (max-width: 720px) { .foot .tel { margin-left: 0; width: 100%; } }

/* notes (flash, info) */
.note { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; margin: 0 0 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sheet); font-size: var(--t-small); }
.note svg.i { margin-top: 2px; color: var(--muted); }
.note p { margin: 0; }
.note b { font-weight: 700; }
.note.ok { border-color: var(--ok); } .note.ok svg.i { color: var(--ok); }
.note.warn { background: var(--warn-tint); border-color: #e8cf9f; } .note.warn svg.i { color: var(--warn); }
.note.err { background: var(--red-tint); border-color: #f2b8bf; } .note.err svg.i { color: var(--red-deep); }

/* buttons (base: button.primary, .btn) */
.btn2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--r-field); background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); font: inherit; font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn2:hover { border-color: var(--ink); }
.btn2.sm { min-height: 36px; padding: 0 12px; font-size: 15px; }
a.primary, button.primary { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
a.primary { font-weight: 700; font-size: 17px; color: #fff; background: var(--red); border-radius: var(--r-field); padding: 0 28px; min-height: 52px; }
a.primary:hover { background: var(--red-deep); }
button.primary[aria-disabled=true] { background: var(--muted); color: #fff; cursor: not-allowed; }   /* skin A: #5b6168, 6,3:1 for the white label */
.linkbtn { background: none; border: 0; padding: 0; min-height: 44px; font: inherit; color: var(--red-deep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ============================================================ chips (state) */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; min-height: 24px; border-radius: 999px; font-size: var(--t-micro); font-weight: 600; line-height: 1.3; background: var(--paper); color: var(--muted); border: 1px solid var(--line-strong); white-space: nowrap; }
.chip svg.i { width: 13px; height: 13px; stroke-width: 2.6; vertical-align: 0; }
.chip.s-vermittelt, .chip.s-abgeholt { color: var(--ink); border-color: var(--ink); }
.chip.s-abgeholt::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
/* skin A: status in one colour — „ausgeliefert“ graphite filled with a tick, „Preis bestätigt“ grey with a tick */
.chip.s-ausgeliefert { background: var(--gr); color: var(--on-gr); border-color: var(--gr); }
.chip.s-bestaetigt { background: #e1e4e6; color: var(--ink); border-color: #e1e4e6; }
.chip.s-bestaetigt::before { content: ""; width: 8px; height: 4px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg) translateY(-2px); }
.chip.s-storniert { color: var(--red-deep); background: var(--red-tint); border-color: var(--red-tint); text-decoration: line-through; text-decoration-thickness: 1px; }
.chip.s-bearbeitung { color: var(--warn); background: var(--warn-tint); border-color: var(--warn-tint); }

/* ============================================================ route (the memorable element) */
.route { list-style: none; margin: 0; padding: 0; }
.route > li { position: relative; padding: 0 0 18px 30px; min-height: 22px; }
.route > li:last-child { padding-bottom: 0; }
.route > li::before { content: ""; position: absolute; left: 1px; top: 5px; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; background: var(--paper); border: 3px solid var(--ink); z-index: 1; }
.route > li.mid::before { left: 4px; top: 8px; width: 8px; height: 8px; border: 0; background: var(--ink); }
.route > li.drop::before { background: var(--ink); }
.route > li.cur::before { border-color: var(--red); }
.route > li.cur.mid::before, .route > li.cur.drop::before { background: var(--red); }
.route > li.unset::before { border-style: dashed; border-width: 2px; border-color: var(--line-strong); background: var(--paper); }
.route > li::after { content: ""; position: absolute; left: 7px; top: 19px; bottom: -5px; width: 2px; background: var(--ink-2); }
.route > li.mid::after { top: 16px; }
.route > li:last-child::after { display: none; }
.route > li.dash::after { background: repeating-linear-gradient(to bottom, var(--line-strong) 0 4px, transparent 4px 8px); }
.route .nm { font-weight: 600; display: block; line-height: 1.35; }
.route .ad { display: block; color: var(--muted); font-size: var(--t-small); line-height: 1.35; }
.route .tm { display: block; font-size: var(--t-micro); color: var(--muted); margin-top: 2px; }
.route .tm.done { color: var(--ink); font-weight: 600; }   /* skin A: tick instead of green */
.route .tm.done::before { content: "✓ "; }
.route .more { display: block; font-size: var(--t-micro); color: var(--muted); }
/* compact two-stop route in list rows */
.route.mini > li { padding-bottom: 6px; padding-left: 24px; }
.route.mini > li:last-child { padding-bottom: 0; }
.route.mini > li::before { left: 1px; top: 6px; width: 11px; height: 11px; border-width: 2.5px; }
.route.mini > li::after { left: 5.5px; top: 17px; bottom: -6px; }
.route.mini .nm { display: inline; font-weight: 600; }
.route.mini .ad { display: inline; margin-left: 6px; font-size: 14px; }
.route.mini .more { display: block; margin-top: 1px; }
/* large route on the detail page */
.route.big > li { padding: 0 0 28px 40px; }
.route.big > li::before { left: 0; top: 3px; width: 20px; height: 20px; border-width: 4px; }
.route.big > li.mid::before { left: 4px; top: 7px; width: 12px; height: 12px; }
.route.big > li::after { left: 9px; top: 23px; bottom: -3px; width: 2px; }
.route.big .nm { font-size: var(--t-h3); }
.route.big .ad { font-size: 16px; color: var(--ink); }
.route.big .ct { display: block; color: var(--muted); font-size: var(--t-small); margin-top: 2px; }
.route.big .tm { font-size: 14px; margin-top: 6px; }

/* ============================================================ new-order layout */
.order { display: grid; grid-template-columns: minmax(0, var(--col)) var(--side); gap: 56px; justify-content: space-between; align-items: start; }
.order > .sum { position: sticky; top: 24px; }
@media (max-width: 1023px) { .order { grid-template-columns: minmax(0, 1fr); gap: 0; } .order-main { padding-bottom: 120px; } }

/* focus cards. Stop sections hang on the route spine in a 40 px gutter. */
.flow { --g: 40px; }
.fc { position: relative; padding-left: var(--g); --my: 28px; }
.fc-row { display: grid; grid-template-columns: 168px minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; min-height: 56px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.fc-row h2 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; }
.fc-row .s { min-width: 0; display: flex; gap: 8px; align-items: baseline; font-size: var(--t-small); color: var(--ink); }
.fc-row .s span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-row .s svg.i { color: var(--ok); stroke-width: 2.6; width: 16px; height: 16px; align-self: center; }
.fc-row a.edit { font-size: var(--t-small); color: var(--red-deep); min-height: 44px; display: inline-flex; align-items: center; padding: 0 2px; }
.fc.is-future .fc-row h2 { color: var(--muted); font-weight: 600; }
.fc.is-future .fc-row { border-bottom-style: dashed; }
@media (max-width: 600px) {
  .fc-row { grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 10px 0; }
  .fc-row h2 { grid-column: 1; }
  .fc-row .s { grid-column: 1; grid-row: 2; }
  .fc-row a.edit { grid-column: 2; grid-row: 1 / 3; }
}

.fc.is-open { --my: 46px; padding-top: 8px; padding-bottom: 8px; }
.fc-box { background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r-sheet); padding: 24px 28px 28px; }
.fc-box > h2 { font-size: var(--t-h2); line-height: 1.25; margin: 0 0 4px; }
.fc-box > .hint { margin: 0 0 18px; font-size: var(--t-small); }
.fc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.fc-foot .help { margin: 0; }
/* the server renders every section open (works without JS); with JS the flow stays invisible until
   auftrag_neu.js has opened the right one (html.kp-ready), so it never paints all-open and then collapses.
   The inline head script sets .kp-ready after 3 s anyway, in case the page script fails. */
.js:not(.kp-ready) [data-flow] { visibility: hidden; }
.fc.is-open.enter .fc-box { animation: open .18s ease-out; }
@keyframes open { from { opacity: .4; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  .flow { --g: 30px; }
  .fc-box { padding: 18px 16px 20px; margin-right: 0; }
  .fc.is-open { --my: 38px; }
}
@media (max-width: 1023px) { .fc-foot.mobile-moves { display: none; } }

/* spine: marker = .mk, line above = ::before, line below = ::after */
.fc.stop .mk { position: absolute; left: calc(var(--g) / 2 - 8px); top: calc(var(--my) - 8px); width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box; background: var(--paper); border: 3px solid var(--ink); z-index: 2; }
.fc.stop.drop .mk { background: var(--ink); }
.fc.stop.mid .mk { width: 10px; height: 10px; left: calc(var(--g) / 2 - 5px); top: calc(var(--my) - 5px); border: 0; background: var(--ink); }
.fc.stop.is-open .mk { border-color: var(--red); }
.fc.stop.is-open.drop .mk, .fc.stop.is-open.mid .mk { background: var(--red); }
.fc.stop.is-future .mk { border: 2px dashed var(--line-strong); background: var(--paper); }
.fc.stop::before, .fc.stop::after, .fc-ins::before { content: ""; position: absolute; left: calc(var(--g) / 2 - 1px); width: 2px; background: var(--ink-2); }
.fc.stop::before { top: 0; height: var(--my); }
.fc.stop::after { top: var(--my); bottom: 0; }
.fc.stop.first::before, .fc.stop.last::after { display: none; }
.fc.stop.dash-up::before, .fc.stop.dash-down::after, .fc-ins.dash::before { background: repeating-linear-gradient(to bottom, var(--line-strong) 0 4px, transparent 4px 8px); }
.fc-ins { position: relative; padding-left: var(--flow-g, 40px); }
.flow .fc-ins { padding-left: var(--g); }
.fc-ins::before { top: 0; bottom: 0; }
.fc-ins a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--t-small); color: var(--muted); text-decoration: none; }
.fc-ins a:hover { color: var(--red-deep); text-decoration: underline; }
.fc-ins svg.i { width: 15px; height: 15px; }
.fc.stop .rm { font-size: 14px; color: var(--muted); }

/* ============================================================ stop picker */
.picker .f > label { font-size: 16px; }
.picker .q { position: relative; }
.picker .q svg.i { position: absolute; left: 14px; top: 15px; color: var(--muted); pointer-events: none; }
.picker .q input { padding-left: 42px; font-size: 18px; min-height: 52px; }
.picks { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.picks button { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 48px; padding: 5px 14px 6px; border-radius: var(--r-sheet); background: var(--paper); border: 1px solid var(--line-strong); font: inherit; text-align: left; cursor: pointer; color: var(--ink); max-width: 100%; }
.picks button:hover { border-color: var(--ink); }
.picks b { font-size: var(--t-small); font-weight: 600; line-height: 1.25; }
.picks small { font-size: var(--t-micro); color: var(--muted); line-height: 1.25; }
.picks .own { border-color: var(--ink); }
.picks-label { margin: 10px 0 0; font-size: var(--t-micro); color: var(--muted); }

/* suggestion list: one list, three sources, marker on the right */
.sugw { margin: 4px 0 0; background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r-sheet); box-shadow: var(--lift); overflow: hidden; }
.sug { margin: 0; padding: 6px 0; list-style: none; }
.sug li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 2px 12px; align-items: start; padding: 10px 14px; cursor: pointer; }
.sug li[aria-selected=true] { background: var(--ground); box-shadow: inset 3px 0 0 var(--red); }
.sug li + li.grp { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 14px; }
.sug li svg.i { color: var(--muted); margin-top: 2px; }
.sug .t { font-weight: 600; line-height: 1.3; }
.sug mark { background: none; color: inherit; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sug .a { grid-column: 2; font-size: var(--t-small); color: var(--muted); line-height: 1.35; }
.sug .src { grid-column: 3; grid-row: 1 / 3; font-size: var(--t-micro); color: var(--muted); text-align: right; line-height: 1.3; white-space: nowrap; padding-top: 2px; }
.sug .src b { display: block; color: var(--ink-2); font-weight: 600; }
.sug-foot { margin: 0; padding: 8px 14px 4px; border-top: 1px solid var(--line); font-size: var(--t-micro); color: var(--muted); }
.sug-foot kbd { font: inherit; font-weight: 600; padding: 0 5px; border: 1px solid var(--line-strong); border-radius: 3px; color: var(--ink-2); }
@media (max-width: 600px) {
  .sug li { grid-template-columns: 20px minmax(0, 1fr); }
  .sug .src { grid-column: 2; grid-row: auto; text-align: left; padding: 2px 0 0; }
  .sug .src b { display: inline; margin-right: 6px; }
  .sug-foot { display: none; }
}

/* progressive address fields */
.addr .row { margin-bottom: 14px; }
.addr .reveal { padding-top: 6px; }
.addr .reveal.enter { animation: open .18s ease-out; }
.addr .pending { margin: 0 0 14px; padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: var(--r-field); color: var(--muted); font-size: var(--t-small); }
.check.save { margin: 6px 0 0; padding: 12px 14px; border-radius: var(--r-field); background: var(--ground); }
.check.save small { display: block; color: var(--muted); font-size: 14px; }
.f .ok-msg { display: flex; gap: 6px; align-items: center; margin: 6px 0 0; font-size: 14px; color: var(--ok); }
.f .ok-msg svg.i { width: 15px; height: 15px; }
.f > label .opt { font-weight: 400; }
.rowmsg-wide { display: flex; gap: 8px; align-items: flex-start; margin: -4px 0 16px; padding: 10px 12px; background: var(--red-tint); border-radius: var(--r-field); color: var(--red-deep); font-weight: 700; font-size: var(--t-small); }
.rowmsg-wide svg.i { margin-top: 1px; }

/* ============================================================ wann */
.seg.wide { max-width: 560px; }
@media (max-width: 600px) { .seg.wide { flex-direction: column; } .seg.wide label { border-right: 0; border-bottom: 1px solid var(--line-strong); } .seg.wide label:last-of-type { border-bottom: 0; } }
.win { display: none; padding: 16px 18px 4px; margin: -8px 0 20px; background: var(--ground); border-radius: var(--r-field); }
.wann:has(#w-later:checked) .win, .wann:has(#w-day:checked) .win { display: block; }
.wann:has(#w-later:checked) .win .date { display: none; }
.win .row { grid-template-columns: repeat(auto-fit, minmax(120px, 160px)); }
.win .help { margin: -6px 0 12px; }
.zf { display: none; padding: 14px 18px 4px; margin: -6px 0 6px; background: var(--ground); border-radius: var(--r-field); }
.wann:has(#zf:checked) .zf { display: block; }
.flag { display: inline-block; font-size: var(--t-micro); font-weight: 600; color: var(--warn); background: var(--warn-tint); padding: 1px 6px; border-radius: 3px; }

/* ============================================================ vehicle cards */
.veh { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 10px; margin: 0 0 20px; }
.veh input { position: absolute; opacity: 0; pointer-events: none; }
.veh label { position: relative; display: block; min-height: 92px; padding: 12px 14px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r-sheet); cursor: pointer; }
.veh label:hover { border-color: var(--ink); }
.veh .n { display: block; font-weight: 700; font-size: 17px; }
.veh .l { display: block; font-size: 14px; color: var(--muted); line-height: 1.35; }
.veh input:checked + label { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.veh input:checked + label::after { content: ""; position: absolute; right: 12px; top: 14px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.5 2.5L13 6.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.veh input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.veh input:disabled + label { cursor: not-allowed; background: var(--ground); border-style: dashed; color: var(--muted); }
.veh input:disabled + label .n { color: var(--muted); }
.veh .why { display: block; margin-top: 6px; font-size: var(--t-micro); font-weight: 600; color: var(--ink-2); }
.veh .pre { display: block; margin-top: 6px; font-size: var(--t-micro); color: var(--muted); }
@media (max-width: 600px) { .veh { grid-template-columns: 1fr 1fr; } .veh label { min-height: 84px; } }

details.opts { margin: 4px 0 0; border-top: 1px solid var(--line); }
details.opts > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 52px; cursor: pointer; font-weight: 700; }
details.opts > summary::-webkit-details-marker { display: none; }
details.opts > summary::after { content: ""; width: 8px; height: 8px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); margin: -4px 0 0 2px; }
details.opts[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
details.opts > summary .c { font-weight: 400; font-size: var(--t-small); color: var(--muted); }
details.opts[open] > .in { animation: open .18s ease-out; }
.opt-grp { padding: 4px 0 8px; }
.opt-grp + .opt-grp { border-top: 1px solid var(--line); padding-top: 18px; }
.opt-grp h3 { margin: 0 0 10px; font-size: 16px; }
.check small { display: block; color: var(--muted); font-size: 14px; }
.check.dim { color: var(--muted); cursor: not-allowed; }
.opts:has(#bar:checked) .check.dim { color: var(--ink); cursor: pointer; }

/* ============================================================ summary panel */
/* skin A: the dark instrument — Übersicht (.sum) and Preis (.pay) on graphite, white price, red only
   as --sig (#ff5a69, 4,9:1; #e0001a would be 2,95:1 there). The .price block only lives inside them. */
.sum { background: var(--gr); color: var(--on-gr); border: 1px solid var(--gr); border-radius: var(--r-sheet); }
.sum-in { padding: 20px 22px 22px; }
.sum h2 { font-size: var(--t-h3); margin: 0 0 16px; color: var(--on-gr); }
.sum .route { margin-bottom: 4px; }
.sum dl { margin: 16px 0 0; display: grid; grid-template-columns: 84px minmax(0, 1fr); border-top: 1px solid var(--gr-line); }
.sum dt, .sum dd { padding: 9px 0; border-bottom: 1px solid var(--gr-line); font-size: var(--t-small); }
.sum dt { color: var(--on-gr-2); }
.sum dd { margin: 0; }
.sum dd.unset { color: var(--on-gr-2); }
.price { margin-top: 18px; }
.price .lbl { font-size: 14px; color: var(--on-gr-2); margin: 0 0 2px; }
.price .val { display: flex; align-items: baseline; gap: 8px; }
.price .amt { font-size: 36px; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--on-gr); }
.price .amt.none { color: #7a828a; }
.price .net { font-size: var(--t-small); color: var(--on-gr-2); }
.price .why { margin: 6px 0 0; font-size: 14px; color: var(--on-gr-2); }
.price.busy .amt { color: #8d949b; }   /* 4,8:1, large text */
.price .busy-t { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--on-gr-2); }
.price .busy-t::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--gr-line); border-top-color: var(--on-gr); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.price.fresh .amt { animation: fresh .5s ease-out; }
@keyframes fresh { from { color: var(--sig); } to { color: var(--on-gr); } }
.price.na .msg-na { margin: 8px 0 0; padding: 10px 12px; background: var(--gr-2); border-left: 3px solid #f0b357; border-radius: var(--r-field); font-size: 14px; color: var(--on-gr); }
.price.na .msg-na a { color: var(--on-gr); font-weight: 700; }
details.lines { margin-top: 10px; }
details.lines > summary { display: inline-flex; align-items: center; min-height: 36px; font-size: var(--t-small); color: var(--on-gr); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; list-style: none; }
details.lines > summary::-webkit-details-marker { display: none; }
table.pl { width: 100%; border-collapse: collapse; font-size: var(--t-small); font-variant-numeric: tabular-nums; }
table.pl td { padding: 8px 0; border-top: 1px solid var(--line); vertical-align: top; }
table.pl td:last-child { text-align: right; white-space: nowrap; padding-left: 12px; }
table.pl small { display: block; color: var(--muted); font-size: var(--t-micro); }
table.pl tr.tot td { border-top: 2px solid var(--ink); font-weight: 700; font-size: 17px; padding-top: 10px; }
.vat { margin: 10px 0 0; font-size: 14px; color: var(--muted); }

/* mobile: the same aside becomes a sticky bottom bar; .open shows everything */
.sum-bar { display: none; }
@media (max-width: 1023px) {
  .order > .sum { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 20; border-radius: 0; border: 0; border-top: 1px solid var(--gr); box-shadow: 0 -8px 24px rgba(28, 30, 33, .10); max-height: 86vh; overflow: auto; }
  .order > .sum .sum-in { display: none; padding: 4px 16px 8px; }
  .order > .sum.open .sum-in { display: block; }
  .order > .sum.open .sum-in > h2 { display: none; }
  .sum-bar { display: block; padding: 10px 16px 12px; position: sticky; bottom: 0; background: var(--gr); }
  .sum.open .sum-bar { border-top: 1px solid var(--gr-line); }
  .sum-bar .tog { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0; background: none; border: 0; font: inherit; color: var(--on-gr); cursor: pointer; text-align: left; }
  .sum-bar .tog .what { font-size: var(--t-small); color: var(--on-gr-2); }
  .sum-bar .tog .p { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 19px; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .sum-bar .tog .p.none { color: var(--on-gr-2); font-weight: 400; font-size: var(--t-small); }
  .sum-bar .tog .p::after { content: ""; width: 8px; height: 8px; border: solid var(--on-gr); border-width: 2px 0 0 2px; transform: rotate(45deg); margin-top: 4px; }
  .sum.open .sum-bar .tog .p::after { transform: rotate(-135deg); margin-top: -4px; }
  .sum-bar .primary { width: 100%; margin-top: 6px; }
}

/* ============================================================ review (Prüfen) */
.review { display: grid; grid-template-columns: minmax(0, var(--col)) var(--side); gap: 56px; justify-content: space-between; align-items: start; }
.review > .pay { position: sticky; top: 24px; }
@media (max-width: 1023px) { .review { grid-template-columns: minmax(0, 1fr); gap: 24px; } .review > .pay { position: static; } }
.sheet2 { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sheet); padding: 6px 28px 10px; }
@media (max-width: 600px) { .sheet2 { padding: 4px 16px 8px; } }
.blk { display: grid; grid-template-columns: 168px minmax(0, 1fr) auto; gap: 4px 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.blk:last-child { border-bottom: 0; }
.blk > h3 { margin: 0; font-size: var(--t-small); font-weight: 600; color: var(--muted); line-height: 1.5; }
.blk > .v { min-width: 0; }
.blk > .v p { margin: 0; }
.blk > a.edit { font-size: var(--t-small); color: var(--red-deep); align-self: start; }
.blk .route .ct { display: block; font-size: var(--t-small); color: var(--muted); }
@media (max-width: 600px) { .blk { grid-template-columns: minmax(0, 1fr) auto; } .blk > .v { grid-column: 1 / -1; grid-row: 2; } .blk > a.edit { grid-column: 2; grid-row: 1; } }
.pay { background: var(--gr); color: var(--on-gr); border: 1px solid var(--gr); border-radius: var(--r-sheet); padding: 22px; }   /* skin A: dark like .sum */
.pay h2 { font-size: var(--t-h3); margin: 0 0 10px; color: var(--on-gr); }
.pay .primary { width: 100%; margin-top: 18px; }
.pay .linkbtn { display: block; margin: 6px auto 0; color: var(--on-gr); }
.pay .was { text-decoration: line-through; color: var(--on-gr-2); font-weight: 400; margin-right: 8px; }
.pay .btn2 { background: transparent; color: var(--on-gr); border-color: var(--on-gr-2); }
.pay .btn2:hover { border-color: var(--on-gr); }
@media (max-width: 1023px) { .pay .acts-d { display: none; } }

/* success */
.done2 { max-width: var(--col); }
.done2 h1 { font-size: var(--t-display); line-height: 1.1; margin: 0 0 12px; }
.done2 .lede { margin-bottom: 28px; }
.done2 .sheet2 { padding: 22px 28px; margin-bottom: 28px; }
.done2 .acts { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.tick { display: inline-flex; width: 44px; height: 44px; border-radius: 50%; align-items: center; justify-content: center; background: var(--ok); color: #fff; margin-bottom: 18px; }
.tick svg.i { width: 24px; height: 24px; stroke-width: 2.6; }
@media (prefers-reduced-motion: no-preference) { .tick { animation: pop .3s ease-out; } }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* ============================================================ list (Aufträge) */
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin: 0 0 20px; }
.filters .seg { margin: 0; max-width: none; }
.filters .seg label { min-height: 44px; padding: 6px 18px; }
.filters .f { width: 150px; }
.filters .f.k { width: 200px; }
.filters .f.d { width: 170px; }                                   /* date fields (2026-11-11): room for the calendar button */
.filters input[type=date] { width: 100%; font-family: inherit; font-variant-numeric: tabular-nums; }
.filters .f > label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.filters input, .filters select { min-height: 44px; padding: 8px 12px; font-size: 16px; }
.filters .btn2 { min-height: 44px; }
.filters .count { margin-left: auto; font-size: var(--t-small); color: var(--muted); line-height: 44px; }
.olist { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sheet); font-size: var(--t-small); }
.olist th { text-align: left; font-size: 14px; font-weight: 600; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.olist td { padding: 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.olist tr:last-child td { border-bottom: 0; }
.olist tbody tr:hover { background: #fafbfb; }
.olist .no a { font-weight: 700; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.olist .no a:hover { text-decoration: underline; color: var(--red-deep); }
.olist .no .tm { display: block; color: var(--muted); font-variant-numeric: tabular-nums; }
.olist .r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.olist .att-m { display: inline-flex; align-items: center; gap: 3px; color: var(--ink-2); font-size: 14px; }
.olist .att-m svg.i { width: 16px; height: 16px; }
.olist .act { text-align: right; white-space: nowrap; }
.olist .st { padding-top: 15px; }
.olist .kst { color: var(--ink-2); }
.olist .dim { color: var(--muted); }
.ocards { display: none; list-style: none; margin: 0; padding: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sheet); }
.ocards > li { padding: 14px 16px 12px; border-bottom: 1px solid var(--line); }
.ocards > li:last-child { border-bottom: 0; }
.ocards .top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ocards .top a { font-weight: 700; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.ocards .top .tm { color: var(--muted); font-variant-numeric: tabular-nums; }
.ocards .top .chip { margin-left: auto; }
.ocards .bot { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 14px; color: var(--muted); }
.ocards .bot .pr { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.ocards .bot .btn2 { margin-left: auto; }
/* Kostenstelle: its own line under the order number on the cards, bold in the head of the order page (2026-11-11) */
.ocards .kst { margin: -4px 0 10px; font-size: 14px; font-weight: 600; color: var(--ink-2); overflow-wrap: anywhere; }
.ph .meta .kst { color: var(--ink); font-weight: 600; }
@media (max-width: 899px) { .olist { display: none; } .ocards { display: block; } .filters .count { margin-left: 0; width: 100%; } }
@media (max-width: 600px) { .filters .f, .filters .f.k { width: calc(50% - 8px); } .filters .seg { width: 100%; } .filters .seg label { flex: 1; } .filters .btn2 { width: 100%; } }
.empty2 { padding: 56px 24px; text-align: center; background: var(--paper); border: 1px dashed var(--line-strong); border-radius: var(--r-sheet); }
.empty2 h2 { font-size: var(--t-h3); margin: 0 0 6px; }
.empty2 p { margin: 0 0 20px; color: var(--muted); }

/* ============================================================ detail */
.det { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 48px; align-items: start; }
@media (max-width: 899px) { .det { grid-template-columns: minmax(0, 1fr); } }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sheet); padding: 22px 26px 24px; }
.panel + .panel { margin-top: 24px; }
.panel > h2 { font-size: var(--t-h3); margin: 0 0 16px; }
@media (max-width: 600px) { .panel { padding: 18px 16px 20px; } }
.facts { margin: 0; display: grid; grid-template-columns: 150px minmax(0, 1fr); }
.facts dt, .facts dd { padding: 9px 0; border-top: 1px solid var(--line); font-size: var(--t-small); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.facts dt:first-of-type, .facts dt:first-of-type + dd { border-top: 0; }
@media (max-width: 420px) { .facts { grid-template-columns: 1fr; } .facts dd { border-top: 0; padding-top: 0; } }
.atts { display: flex; flex-wrap: wrap; gap: 12px; }
.att2 { display: flex; flex-direction: column; gap: 6px; width: 124px; text-decoration: none; color: var(--ink); font-size: var(--t-micro); }
.att2 .th { height: 100px; border-radius: var(--r-field); border: 1px solid var(--line); background: var(--ground); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.att2 .th svg.i { width: 28px; height: 28px; stroke-width: 1.6; }
.att2 .th.pdf { background: var(--paper); flex-direction: column; gap: 4px; font-weight: 700; font-size: 14px; color: var(--red-deep); }
.att2:hover .th { border-color: var(--ink); }
.att2 .nm { line-height: 1.3; overflow-wrap: anywhere; }
.att2 .nm small { display: block; color: var(--muted); }
.back { display: inline-flex; align-items: center; min-height: 44px; color: var(--red-deep); font-size: var(--t-small); }

/* ============================================================ invoices, account */
.ilist td.no { font-weight: 700; font-variant-numeric: tabular-nums; }
.ilist a.dl { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--red-deep); font-weight: 600; }
.ilist td { vertical-align: middle; }
@media (max-width: 600px) {
  .ilist thead { display: none; }
  .ilist, .ilist tbody, .ilist tr, .ilist td { display: block; }
  .ilist tr { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .ilist tr:last-child { border-bottom: 0; }
  .ilist td { padding: 0; border: 0; }
  .ilist td.d { grid-column: 1; color: var(--muted); }
  .ilist td.r { grid-column: 2; grid-row: 1; text-align: right; font-weight: 600; }
  .ilist td.pdf { grid-column: 2; grid-row: 2 / 4; text-align: right; }
}
.acct { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 899px) { .acct { grid-template-columns: minmax(0, 1fr); } }
.acct .wide { grid-column: 1 / -1; }
.yn { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: 40px; }
.yn li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-top: 1px solid var(--line); font-size: var(--t-small); }
.yn li span { min-width: 0; }
.yn li b { font-weight: 600; white-space: nowrap; }
.yn li b.no { color: var(--muted); font-weight: 400; }
details.pwc > summary { list-style: none; cursor: pointer; }
details.pwc > summary::-webkit-details-marker { display: none; }
details.pwc[open] > summary { margin-bottom: 18px; }
.phone-note { color: var(--muted); font-size: var(--t-small); margin: 0; }
.phone-note a { color: var(--ink); font-weight: 700; text-decoration: none; white-space: nowrap; }

/* ============================================================ login */
.auth { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 72px; align-items: start; padding-top: 24px; }
@media (max-width: 899px) { .auth { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 0; } }
.auth h1 { font-size: var(--t-display); margin: 0 0 8px; line-height: 1.1; }
.auth .lede { font-size: 17px; margin-bottom: 26px; }
.auth form .primary { width: 100%; }
.auth .below { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; font-size: var(--t-small); }
.auth .below a { min-height: 44px; display: inline-flex; align-items: center; }
.auth .aside { padding: 4px 0 0 32px; border-left: 1px solid var(--line); max-width: 460px; }
@media (max-width: 899px) { .auth .aside { border-left: 0; border-top: 1px solid var(--line); padding: 24px 0 0; } }
.auth .aside h2 { font-size: var(--t-h3); margin: 0 0 14px; }
.auth .aside p { color: var(--muted); font-size: var(--t-small); }
.auth .aside .route { margin: 0 0 24px; }
.appbar.min .page { justify-content: space-between; }

/* ============================================================ shell demo bits */
.demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.sw { display: grid; grid-template-columns: 40px 1fr; gap: 4px 12px; align-items: center; font-size: 14px; }
.sw i { width: 40px; height: 28px; border-radius: 4px; border: 1px solid var(--line); }
.chips-demo { display: flex; flex-wrap: wrap; gap: 8px; }
.idx { list-style: none; padding: 0; margin: 0; columns: 2 320px; column-gap: 40px; }
.idx li { break-inside: avoid; padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--t-small); }
.idx a { font-weight: 700; }
.idx span { display: block; color: var(--muted); }
@media (min-width: 1024px) { .review-wrap > .sum { display: none; } }
@media (max-width: 1023px) { .review-wrap { padding-bottom: 130px; } }

/* Konto: one sheet, sections divided by rules (not a grid of cards) */
.acct { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sheet); padding: 4px 28px; gap: 0 56px; }
.acct > .panel { background: none; border: 0; border-radius: 0; padding: 22px 0 24px; margin: 0; border-top: 1px solid var(--line); }
.acct > .panel:nth-child(-n+2) { border-top: 0; }
.acct > .panel > h2 { font-size: 17px; margin-bottom: 10px; }
@media (max-width: 899px) { .acct > .panel:nth-child(2) { border-top: 1px solid var(--line); } }
@media (max-width: 600px) { .acct { padding: 0 16px; } }
/* detail: the route is the spine, so it sits on the ground, not in a box */
.panel.bare { background: none; border: 0; padding: 4px 0 8px; }
/* unset stops: a plain grey ring (a dashed 14 px ring reads as broken) */
.route > li.unset::before, .route > li.cur.unset::before { border: 2px solid var(--line-strong); background: var(--paper); }
.route > li.cur.unset::before { border-color: var(--red); }
.fc.stop.is-future .mk { border: 2px solid var(--line-strong); }
.order > .sum { margin-top: 8px; }
.sum-bar .tog.static { cursor: default; }
.sum-bar .tog.static .p::after { display: none; }
.route.big > li:last-child, .route.mini > li:last-child { padding-bottom: 0; }
.fc-row { grid-template-columns: 196px minmax(0, 1fr) auto; }
@media (max-width: 600px) { .fc-row { grid-template-columns: minmax(0, 1fr) auto; } }
.fc-box > h2 { margin-bottom: 14px; }
.fc-box > h2 + .hint { margin-top: -10px; }

/* ============================================================ round 2 */
/* A. Focus is a halo, never the error border. Error = solid red border + tint + message (base .f.err). */
input:focus, select:focus, textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--focus); }
.f.err input:focus, .f.err select:focus, .f.err textarea:focus { border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 0 0 4px var(--focus); }
:focus-visible, a:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--focus); border-radius: 3px; }
.picks button:focus-visible, .btn2:focus-visible, .linkbtn:focus-visible, .rowact:focus-visible { border-color: var(--ink); box-shadow: 0 0 0 3px var(--focus); }
.veh input:focus-visible + label { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px var(--focus); }
.veh input:checked:focus-visible + label { box-shadow: inset 0 0 0 1px var(--ink), 0 0 0 3px var(--focus); }
.seg input:focus-visible + label { outline: 0; box-shadow: inset 0 0 0 3px var(--focus); }
button.primary:focus-visible, a.primary:focus-visible, .btn-new:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--focus); }

/* B. quiet row action in the order table */
.rowact { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; font-size: var(--t-small); color: var(--red-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(153, 0, 0, .35); white-space: nowrap; }
.rowact:hover { text-decoration-color: currentColor; }

/* C. one composition at 1440: 760 + 48 + 392 = 1200 */
:root { --col: 760px; --side: 392px; }
.order, .review { gap: 48px; justify-content: start; }
@media (max-width: 1239px) { .order, .review { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; } }
@media (max-width: 1023px) { .order, .review { grid-template-columns: minmax(0, 1fr); gap: 0; } .review { gap: 24px; } }
.done2 { max-width: 760px; }

/* ====================================================================== skin A „Graphit“ (D2d)
   Source: ../design/explore/a-graphit/skin.css + the welcome/feedback parts of ../design/explore/features.css
   (palette and contrast ratios: ../design/explore/README.md §A). A tool in graphite: dark subbar +
   app bar as one block, dark summary/price panel, everything else paper; red only as signal (the
   primary button, open stop, focus). Rules the skin replaces outright are changed in place in the
   block above; here only the tokens and what has no counterpart there. */
:root {
  /* the Neukunden tokens (top of this file) stay as they are; the portal overrides them here */
  --ink: #24282d; --ink-2: #3a4047; --muted: #5b6168; --paper: #ffffff; --ground: #eceeef;
  --line: #d6d9dc; --line-strong: #aeb4ba;
  --gr: #24282d;          /* Graphit: subbar, app bar, summary/price panel — 14,8:1 on paper */
  --gr-2: #31363c;        /* lighter graphite: surfaces inside the panel, open menu button */
  --gr-line: #41474e;     /* rules on graphite */
  --on-gr: #f2f3f4;       /* text on graphite, 13,3:1 */
  --on-gr-2: #b4bac0;     /* secondary text on graphite, 7,6:1 */
  --sig: #ff5a69;         /* red on graphite (markers, eyelet), 4,9:1 — #e0001a would be 2,95:1 */
  /* Feedback (Jakob 2026-11-11: „theme the feedback panel, and everything related to feedback, with a light yellow“).
     One colour family for every way into the feedback form and the form itself; ink on all three is ≥ 12:1. */
  --fb: #fff0a3;          /* the yellow: entry in the subbar, buttons, menu row */
  --fb-2: #ffe566;        /* hover / pressed */
  --fb-tint: #fff9d6;     /* the sheet of the form and of the thank-you */
  --fb-line: #e2cb5f;     /* its border */
  /* minimap colours of direction A (dark map, light route) — used by D2f, kept here with the palette */
  --mm-land: #2c3136; --mm-block: #383e45; --mm-major: #4a525a; --mm-water: #1b1f23; --mm-park: #323a37;
  --mm-route: #f2f3f4; --mm-casing: #1b1f23; --mm-marker: #f2f3f4; --mm-halo: #24282d; --mm-frame: var(--gr-line);
}

/* logo on graphite. NEGATIVE-LOGO TRICK until an official negative file exists (open question to
   Jakob): the original logo as background keeps the red swirl; the <img> on top is turned white and
   clipped left, so only its wordmark shows. To swap for a real file: drop this rule pair and point the
   <img> in lib/html.js (appbar, appbarMin) at the negative. */
.appbar .logo { display: block; line-height: 0; background: url(/twister-logo.png) 0 0 / auto 100% no-repeat; }
.appbar .logo img { display: block; filter: brightness(0) invert(1); clip-path: inset(0 0 0 23%); }

/* focus on graphite: a light halo instead of the red one */
.appbar :focus-visible, .subbar :focus-visible, .sum :focus-visible, .pay :focus-visible,
.appbar .btn-new:focus-visible, .pay button.primary:focus-visible { box-shadow: 0 0 0 3px rgba(242, 243, 244, .55); }
.menu .drop :focus-visible { box-shadow: 0 0 0 3px var(--focus); }

/* the summary/price panel: the route, price lines and fine print on dark */
.sum .route > li::before { background: var(--gr); border-color: var(--on-gr); }
.sum .route > li.drop::before, .sum .route > li.mid::before { background: var(--on-gr); }
.sum .route > li.cur::before { border-color: var(--sig); }
.sum .route > li.cur.drop::before, .sum .route > li.cur.mid::before { background: var(--sig); }
.sum .route > li.unset::before { background: var(--gr); border-color: #7a828a; }
.sum .route > li::after { background: #7a828a; }
.sum .route .ad, .sum .route .ct, .sum .route .more, .sum .vat, .pay .vat, .sum table.pl small, .pay table.pl small, .pay .route .ad, .pay .route .ct { color: var(--on-gr-2); }
.sum table.pl td, .pay table.pl td { border-color: var(--gr-line); }
.sum table.pl tr.tot td, .pay table.pl tr.tot td { border-top-color: var(--on-gr); }
.sum a:not(.primary), .pay a:not(.primary) { color: var(--on-gr); }

/* feedback entry: subbar left (desktop), mobile menu */
.fb-entry { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; margin: 4px 0; padding: 0 12px 0 10px; border-radius: 999px; background: var(--fb); font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; }
.fb-entry:hover { background: var(--fb-2); }
.fb-entry:focus-visible { outline: 2px solid var(--on-gr); outline-offset: 2px; }
.fb-entry svg.i { width: 16px; height: 16px; }
/* the same way in from the mobile menu and from the welcome notice */
.menu .drop a[href^="/feedback"] { background: var(--fb); font-weight: 600; }
.menu .drop a[href^="/feedback"]:hover { background: var(--fb-2); }
.wact a.btn2 { background: var(--fb); border-color: var(--fb-line); }
.wact a.btn2:hover { background: var(--fb-2); border-color: var(--ink); }

/* welcome notice above the order list; the sticker is a parcel tag hung 3° askew */
.welcome { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 28px; align-items: center; margin: 0 0 28px; padding: 22px 28px 22px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sheet); }
.welcome h2 { font-size: var(--t-h3); margin: 0 0 4px; }
.welcome p { margin: 0; max-width: 68ch; font-size: var(--t-small); }
.wact { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin: 14px 0 0; }
.wact .linkbtn { color: var(--ink-2); }
.stk-tag { position: relative; width: 132px; height: 150px; padding: 46px 16px 14px; background: var(--gr); color: var(--on-gr);
  clip-path: polygon(26px 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%, 0 26px); transform: rotate(-3deg); transform-origin: 50% 0; }
.stk-tag .eye { position: absolute; left: 50%; top: 14px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 4px var(--sig); }
.stk-tag b { display: block; font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; }
.stk-tag .sub { display: block; margin-top: 8px; font-size: 13px; line-height: 1.3; color: var(--on-gr-2); }
.stk-tag::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 14px; height: 2px; background: var(--sig); }
@media (max-width: 600px) {
  .welcome { grid-template-columns: minmax(0, 1fr); padding: 18px 16px; }
  .stk-tag { width: 100%; height: auto; display: flex; align-items: baseline; gap: 12px; padding: 14px 16px 14px 48px; transform: none; clip-path: polygon(22px 0, 100% 0, 100% 100%, 22px 100%, 0 50%); }
  .stk-tag .eye { left: 22px; top: 50%; margin-top: -8px; width: 14px; height: 14px; box-shadow: 0 0 0 3px var(--sig); }
  .stk-tag b { font-size: 24px; } .stk-tag .sub { margin: 0; } .stk-tag .sub br { display: none; } .stk-tag::after { display: none; }
}

/* feedback page (.fb-*) and „Kundendaten ändern“ (.kd-*, 2026-11-11) share the layout; only feedback is yellow.
   The Kundendaten form is a normal paper sheet with the normal (red) primary button. */
.fb, .kd { max-width: 696px; }
.fb-form, .fb-done, .kd-form, .kd-done { padding: 28px; border-radius: var(--r-sheet); }
@media (max-width: 640px) { .fb-form, .kd-form, .kd-done { padding: 18px 16px; } }
.fb-form .row, .kd-form .row { margin-bottom: 18px; }
.fb-form textarea, .kd-form textarea { min-height: 168px; }
.fb-ctx, .kd-ctx { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 24px; font-size: 14px; color: var(--muted); }
.fb-ctx svg.i, .kd-ctx svg.i { margin-top: 1px; flex: none; }
.fb-acts, .kd-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.fb-acts a, .kd-acts a { min-height: 44px; display: inline-flex; align-items: center; }
.fb .note, .kd .note { margin-bottom: 20px; }
.fb-done:focus, .kd-done:focus { outline: 0; }
.fb-done h2, .kd-done h2 { font-size: var(--t-h2); margin: 0 0 6px; }
.fb-done p, .kd-done p { margin: 0 0 20px; color: var(--ink-2); }
/* feedback: a yellow sheet; inside it the action is graphite, not the red of the rest of the portal
   (red on yellow reads as another carrier's colours) */
.fb-form, .fb-done { background: var(--fb-tint); border: 1px solid var(--fb-line); }
.fb-form button.primary { background: var(--gr); }
.fb-form button.primary:hover { background: #000; }
.fb-form .fb-acts a { color: var(--ink); }
.fb-form .opt, .fb-form .hint, .fb-form .fb-ctx { color: var(--ink-2); }
.fb-done .tick { background: var(--gr); }
/* Kundendaten: paper, the account it is for on top, the topic as a plain radio list */
.kd-form, .kd-done { background: var(--paper); border: 1px solid var(--line); }
.kd-who { margin: -9px 0 16px; }   /* the first fact's padding, so the sheet starts like the Konto sheet */
.kd-topics { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.kd-topics legend { padding: 0; margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.kd-topics .check { margin: 0 0 8px; align-items: center; }
.kd-topics .check:last-child { margin-bottom: 0; }
.kd-topics .nw { white-space: nowrap; }

/* ============================================================ app additions (not in design.css) */
/* flash from res.flash() inside pages that still use the old class (new-order flow until D2b) */
.flash { padding: 10px 14px; margin: 0 0 22px; background: var(--paper); border-left: 3px solid var(--red); font-size: 15px; }
.flash.ok { border-left-color: var(--ok); }
/* old buttons, still used by the new-order flow until D2b */
.btn, a.btn { display: inline-block; font-weight: 700; font-size: 16px; color: #fff; background: var(--red); border: 0; border-radius: 4px; padding: 0 22px; min-height: 46px; line-height: 46px; text-decoration: none; cursor: pointer; }
.btn:hover, a.btn:hover { background: var(--red-deep); }
.btn.secondary, a.btn.secondary { background: var(--paper); color: var(--red-deep); border: 2px solid var(--red); line-height: 42px; }
/* real thumbnails in the design's attachment tile (.att2 .th = 100 px high) */
.att2 .th img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-field); display: block; }
/* preliminary price marker in the order list and detail */
.pv { display: block; font-size: var(--t-micro); color: var(--muted); font-weight: 400; }
.ocards .bot .pv { display: inline; margin-left: 4px; }
.ph h1.with-chip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* new-order flow (D2b) */
.fc-ins button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; background: none; border: 0; font: inherit; font-size: var(--t-small); color: var(--muted); cursor: pointer; }
.fc-ins button:hover { color: var(--red-deep); text-decoration: underline; }
.fc-row .s.bad { color: var(--red-deep); font-weight: 600; }
.addr > .ok-msg { display: flex; gap: 6px; align-items: center; margin: -6px 0 16px; color: var(--ok); font-size: 14px; }
.blk > .edit { align-self: start; min-height: 0; font-size: var(--t-small); }
@supports not selector(:has(*)) { .win, .zf { display: block; } }

/* ====================================================================== Overnight (D3b)
   From ../design/overnight/overnight.css (D1c, skin A): the tag „Overnight“ (.tag) on everything the
   Twister Overnight GmbH executes, the double line (.route.ov, .flow.ov), the company block with the
   switch (.co), „Produkt und Sendung“ (.prod, .sdg), price on request (.price.ask), the new status chips.
   No new colour. Plus the app's own bits at the end (fieldset reset, country link, tracking placeholder). */
/* ============================================================ the tag */
.tag { --tg-bg: var(--gr); --tg-fg: var(--on-gr); --tg-hole: var(--paper);
  position: relative; display: inline-flex; align-items: center; flex: none; height: 22px; padding: 0 9px 0 18px;
  font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: .01em; white-space: nowrap; color: var(--tg-fg); background: var(--tg-bg);
  clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%); }
.tag::before { content: ""; position: absolute; left: 7px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--tg-hole); }
.sum .tag, .pay .tag, .sum-bar .tag { --tg-bg: var(--on-gr); --tg-fg: var(--gr); --tg-hole: var(--gr); }

/* ============================================================ company block */
.co { margin: 0 0 18px; padding: 0 0 16px; border-bottom: 1px solid var(--line); }
.co-l { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.co-new { padding: 0 7px; border: 1px solid currentColor; border-radius: 999px; font-size: 12px; line-height: 18px; color: var(--red-deep); }
.co-n { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0; font-size: var(--t-h3); font-weight: 700; line-height: 1.25; }
.co-why { margin: 6px 0 0; font-size: 14px; line-height: 1.4; color: var(--muted); }
.co-sw { display: inline-flex; align-items: flex-start; gap: 8px; min-height: 44px; margin: 8px 0 -10px; padding: 8px 0; background: none; border: 0; font: inherit; font-size: var(--t-small); line-height: 1.3; text-align: left; color: var(--red-deep); cursor: pointer; }
.co-sw > span { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.co-sw:hover > span { text-decoration-color: currentColor; }
.co-sw small { display: block; margin-top: 1px; font-size: 13px; color: var(--muted); text-decoration: none; }
.co-sw svg.i { width: 16px; height: 16px; margin-top: 1px; }
.co-ask { margin: 12px 0 0; padding: 14px 16px 12px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r-field); }
.co-ask .h { margin: 0 0 4px; font-weight: 700; font-size: var(--t-small); }
.co-ask p { margin: 0; font-size: 14px; line-height: 1.45; }
.co-ask .b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 12px; }
.co-yes { min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--r-field); background: var(--ink); color: var(--paper); font: inherit; font-weight: 700; font-size: var(--t-small); cursor: pointer; }
.co-ask .linkbtn { min-height: 44px; }

/* on graphite (summary panel) */
.sum .co { margin: 0 0 18px; padding-bottom: 18px; border-bottom-color: var(--gr-line); }
.sum .co-l, .sum .co-why, .sum .co-sw small { color: var(--on-gr-2); }
.sum .co-n { color: var(--on-gr); }
.sum .co-new { color: var(--sig); }
.sum .co-sw { color: var(--on-gr); }
.sum .co-ask { background: var(--gr-2); border-color: var(--gr-line); color: var(--on-gr); }
.sum .co-ask p:not(.h) { color: var(--on-gr-2); }
.sum .co-yes { background: var(--on-gr); color: var(--gr); }
.sum .co-ask .linkbtn { color: var(--on-gr); }
/* answer to the change: the block lights up once, then rests (not with reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .sum .co.flip { animation: coflip 1.4s ease-out; }
  @keyframes coflip { from { box-shadow: -12px 0 0 -6px var(--sig); } to { box-shadow: -12px 0 0 -6px transparent; } }
}

/* mobile copy at the top of the open section; the bar is too small for the switch */
.co-m { padding: 14px 16px; background: var(--ground); border: 0; border-radius: var(--r-field); margin: 0 0 22px; }
.co-m .co-n { font-size: 17px; }
.co-m .co-ask { background: var(--paper); }
@media (min-width: 1024px) { .co-m { display: none; } }

/* ============================================================ double line = Overnight */
.route.ov > li::after { box-sizing: border-box; width: 6px; left: 5px; background: none; border-left: 2px solid var(--ink-2); border-right: 2px solid var(--ink-2); }
.route.mini.ov > li::after { width: 6px; left: 3.5px; }
.route.big.ov > li::after { width: 8px; left: 6px; }
.route.ov > li.dash::after { background: none; border-style: dashed; border-color: var(--line-strong); }
.sum .route.ov > li::after, .pay .route.ov > li::after { background: none; border-color: #8d949b; }
.flow.ov .fc.stop::before, .flow.ov .fc.stop::after, .flow.ov .fc-ins::before { box-sizing: border-box; width: 6px; left: calc(var(--g) / 2 - 3px); background: none; border-left: 2px solid var(--ink-2); border-right: 2px solid var(--ink-2); }
.flow.ov .fc.stop.dash-up::before, .flow.ov .fc.stop.dash-down::after, .flow.ov .fc-ins.dash::before { background: none; border-style: dashed; border-color: var(--line-strong); }

/* route on the dark price panel ("So geht es weiter") */
.pay .route > li::before { background: var(--gr); border-color: var(--on-gr); }
.pay .route > li.mid::before, .pay .route > li.drop::before { background: var(--on-gr); }
.pay .route > li::after { background: #7a828a; }
.pay .route .nm { font-size: var(--t-small); }
.pay .route .ad { color: var(--on-gr-2); font-size: 14px; }
.pay h3.nx { margin: 18px 0 12px; padding-top: 16px; border-top: 1px solid var(--gr-line); font-size: var(--t-small); color: var(--on-gr); }
.co-pay { display: flex; align-items: center; gap: 10px; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--gr-line); font-size: 14px; color: var(--on-gr); }
.pay .co-pay + .acts-d .primary { margin-top: 12px; }

/* ============================================================ products */
.prodf { border: 0; padding: 0; margin: 0; min-width: 0; }
.prod { display: grid; gap: 8px; margin: 0 0 28px; }
.prod input { position: absolute; opacity: 0; pointer-events: none; }
.prod label { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n p" "l p" "w w"; gap: 1px 24px; align-items: start; min-height: 64px; padding: 11px 16px 11px 48px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r-sheet); cursor: pointer; }
.prod label:hover { border-color: var(--ink); }
.prod label::before { content: ""; position: absolute; left: 16px; top: 14px; width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--paper); }
.prod input:checked + label { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.prod input:checked + label::before { border: 6px solid var(--ink); }
.prod input:focus-visible + label { border-color: var(--ink); box-shadow: 0 0 0 3px var(--focus); }
.prod input:checked:focus-visible + label { box-shadow: inset 0 0 0 1px var(--ink), 0 0 0 3px var(--focus); }
.prod .n { grid-area: n; font-weight: 700; font-size: 17px; line-height: 1.3; }
.prod .l { grid-area: l; font-size: 14px; line-height: 1.35; color: var(--muted); }
.prod .p { grid-area: p; align-self: center; text-align: right; font-variant-numeric: tabular-nums; }
.prod .p b { display: block; font-size: var(--t-small); font-weight: 700; white-space: nowrap; }
.prod .p small { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; }
.prod .why { grid-area: w; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.prod input:disabled + label { cursor: not-allowed; background: var(--ground); border-style: dashed; }
.prod input:disabled + label .n, .prod input:disabled + label .p b { color: var(--muted); }
.prod input:disabled + label::before { background: var(--ground); }
@media (max-width: 600px) {
  .prod label { grid-template-columns: minmax(0, 1fr); grid-template-areas: "n" "l" "p" "w"; padding: 11px 14px 12px 44px; }
  .prod label::before { left: 14px; }
  .prod .p { text-align: left; margin-top: 6px; display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; }
  .prod .p b, .prod .p small { display: inline; }
}

/* shipment */
.sdg { border-top: 1px solid var(--line); padding-top: 20px; margin: 0 0 6px; }
.sdg > h3 { margin: 0 0 14px; font-size: 17px; }
.lbl-s { display: block; font-size: 15px; font-weight: 700; }
.sdg .row.sdg-r { grid-template-columns: 140px 220px; }
.dims { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.dims legend { padding: 0; margin-bottom: 5px; font-size: 15px; font-weight: 700; }
.dm { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px; }
.dm-f { display: flex; flex-direction: column; gap: 2px; }
.dm-f label { font-size: 13px; color: var(--muted); }
.dm-f input { width: 92px; }
.dm .x { padding: 0 2px 13px; color: var(--muted); }
.vw { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 6px; padding: 10px 12px; background: var(--ground); border-radius: var(--r-field); font-size: 14px; line-height: 1.45; }
.vw svg.i { margin-top: 1px; color: var(--muted); }
.vw.none { color: var(--muted); }
.addpk { margin: 0 0 10px; }
.addpk a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--t-small); color: var(--ink-2); }
.addpk svg.i { width: 15px; height: 15px; }
.f.land select { max-width: 320px; }
@media (max-width: 600px) { .sdg .row.sdg-r { grid-template-columns: 1fr 1fr; } .dm-f input { width: 72px; } }

/* ============================================================ price on request */
.price.ask .amt { font-size: 28px; }
.sum dd small { display: block; font-size: 13px; color: var(--on-gr-2); }
.panel .price { margin-top: 0; }
.panel .price .amt { color: var(--ink); font-size: 28px; }
.panel .price .why { color: var(--muted); }

/* ============================================================ list, detail, footer */
.chip.s-versand { color: var(--ink); border-color: var(--ink); }
.chip.s-versand::before { content: ""; width: 10px; height: 6px; box-sizing: border-box; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.chip.s-preisfolgt { color: var(--ink-2); border: 1px dashed var(--ink-2); background: var(--paper); }
.co-mini { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.ask-s { color: var(--muted); }
.legend { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.co-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: -12px 0 28px; font-size: var(--t-small); color: var(--ink-2); }
.co-line b { color: var(--ink); }
.panel.track .mm-live { margin: 0; border-color: var(--line-strong); color: var(--muted); }
.panel.track .mm-live b { color: var(--ink); }
.det > div > .panel.bare + .panel.track { margin-top: 20px; }
.co-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; width: 100%; margin: 0 0 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.co-legal b { color: var(--ink); }
.sum-bar .tog .what { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.co-ask .linkbtn { font-size: var(--t-small); }
.prod + .prod-off, .prod-off { display: flex; gap: 10px; align-items: flex-start; margin: -16px 0 24px; font-size: 14px; color: var(--muted); }
.prod-off svg.i { margin-top: 1px; }

/* app additions for Overnight */
.co-fs { border: 0; padding: 0; margin: 0; min-width: 0; }
.land-sw { margin: -8px 0 14px; font-size: var(--t-small); }
.land-sw a { color: var(--ink-2); }
.f.land select { width: 100%; }
.mm-live { display: flex; gap: 12px; align-items: flex-start; margin: 10px 20px 18px; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: var(--r-field); font-size: 14px; color: var(--muted); }
.mm-live b { color: var(--ink); font-weight: 600; }
.mm-live .ghost { flex: none; width: 10px; height: 10px; margin: 6px 3px 0; border-radius: 50%; background: var(--ghost, var(--red)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ghost, var(--red)) 30%, transparent); }
.ilist .no .tag { margin-left: 8px; vertical-align: 1px; }
.dm-f .msg { font-size: 13px; }
.dm-f.err input { border-color: var(--red-deep); }

/* ============================================================ D4d: editing a stop (search on top, one address line) */
.q-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0 16px; margin-bottom: 5px; }
.q-head label { font-size: 16px; font-weight: 700; }
.linkbtn.clr { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; font-size: var(--t-small); color: var(--muted); text-decoration: none; }
.linkbtn.clr:hover { color: var(--red-deep); text-decoration: underline; }
.linkbtn.clr svg.i { width: 14px; height: 14px; }
.picker + .addr { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
/* Land in the PLZ/Ort row; mobile: PLZ + Ort, then Land on its own line */
.addr .row.plz { grid-template-columns: 116px minmax(0, 1fr) minmax(0, 200px); }
@media (max-width: 600px) { .addr .row.plz { grid-template-columns: 104px minmax(0, 1fr); } .addr .row.plz .f.land { grid-column: 1 / -1; } }
.addr .f.land select { max-width: none; }
/* street suggestions under the Straße field */
.f.ac { position: relative; }
.f.ac .sugw { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; }
.f.ac .sug li { grid-template-columns: 22px minmax(0, 1fr); }
.f.ac .sug .a { grid-column: 2; }
.addr .rowmsg-wide { margin: -2px 0 14px; }
/* „+ Stopp anhängen“: after the last stop, no spine below it */
.fc-app::before { display: none; }

/* ============================================================ D4f: one state per stop (data-state on the section)
   leer = the quick entry only, eingabe / bearbeiten = the fields only, fertig = the summary line. The rules below keep
   the quick entry and the fields apart with or without the script (tasks/D4f-stopp-zustaende.md rule 5). */
.fc.stop[data-state="leer"] [data-addr], .fc.stop[data-state="leer"] [data-foot] { display: none !important; }
.fc.stop:not([data-state="leer"]) [data-picker], .fc.stop:not([data-state="leer"]) [data-nojs] { display: none !important; }
/* the title line: marker, title, (summary,) controls right-aligned on the same line */
.st-h { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0 16px; margin: -10px 0 8px; }
.st-h h2 { font-size: var(--t-h2); line-height: 1.25; margin: 0; }
.ctl { display: inline-flex; align-items: center; gap: 0 6px; white-space: nowrap; }
.ctl:empty { display: none; }
.ctl .linkbtn { min-height: 44px; font-size: var(--t-small); color: var(--red-deep); }
.ctl .linkbtn:hover { text-decoration-thickness: 2px; }
.ctl .linkbtn[data-remove], .ctl .linkbtn[data-clear] { color: var(--ink-2); }
.ctl .linkbtn[data-remove]:hover, .ctl .linkbtn[data-clear]:hover { color: var(--red-deep); }
.ctl .sep { color: var(--muted); }
.fc-row .ctl { grid-column: 3; justify-self: end; }
@media (max-width: 600px) { .fc-row .ctl { grid-column: 2; grid-row: 1 / 3; } }
/* no script: the pick select + its two buttons */
.pick-nojs .pick-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 4px 0 0; }
/* the fields are the only block of an open eingabe / bearbeiten stop: no divider above them (D4d had the search above) */
.fc.stop .picker + .addr, .fc.stop .pick-nojs + .addr { margin-top: 0; padding-top: 0; border-top: 0; }
.ctl .linkbtn { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================ D5b: „Wann“ = the Zeitleiste (tasks/D5b-zeitleiste.md)
   Port of ../design/zeitfenster/zf.css (prototype A) on the app's tokens; script: public/auftrag_neu_wann.js.
   Graphit = the window, ground = the pane, paper = the day, hatching = what cannot be chosen, warn only for the
   Terminzuschlag line. Mobile (≤ 1024 px / coarse pointer, class .touch set by the script): 15 min = 36 px, no native
   scrolling — the edge arrows and the hour row move the strip; 44-px grips; −15 / +15 beside the result line. */
.wn[hidden], .wn [hidden] { display: none !important; }
.wn-seg { margin-bottom: 16px; }
.wn-seg input[hidden] + label, .wn-seg label[hidden] { display: none; }
.wn-moved { margin: -6px 0 14px; font-size: 15px; color: var(--muted); }
.wn-pane { margin: 0 0 18px; padding: 16px 18px 18px; background: var(--ground); border-radius: var(--r-field); }
.wn-del { margin-top: -4px; }
.wn-days { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.wn-day { min-height: 40px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper);
  font: 600 15px/1 inherit; font-family: inherit; color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.wn-day:hover { border-color: var(--ink); }
.wn-day[aria-checked=true] { background: var(--ink); border-color: var(--ink); color: #fff; }
.wn-day.wn-other { border-style: dashed; color: var(--muted); }
.wn-day.wn-other[aria-expanded=true] { border-style: solid; border-color: var(--ink); color: var(--ink); }
/* the result line: what you get, large; the length after it; the chips at the right */
.wn-head { margin: 0 0 14px; }
.wn-read { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.wn-l { flex-basis: 100%; font-size: 15px; color: var(--muted); }
.wn-t { font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; border-radius: 3px; }
.wn-d { font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wn-read.nudged .wn-t { animation: wn-nudge 1.2s ease-out; }
@keyframes wn-nudge { from { background: var(--warn-tint); box-shadow: 0 0 0 4px var(--warn-tint); } to { background: transparent; box-shadow: 0 0 0 4px transparent; } }
.wn-day:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.wn-w { position: relative; }
.wn-help { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
/* Zustellfenster: a switch on a real checkbox */
.wn-switch { display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 16px; cursor: pointer; }
.wn-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wn-sw { flex: none; position: relative; width: 44px; height: 26px; margin-top: 1px; border-radius: 13px; background: var(--line-strong); transition: background .15s; }
.wn-sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.wn-switch input:checked + .wn-sw { background: var(--ink); }
.wn-switch input:checked + .wn-sw::after { transform: translateX(18px); }
.wn-switch input:focus-visible + .wn-sw { outline: 3px solid var(--focus); outline-offset: 2px; }
.wn-sw-t { font-size: 17px; line-height: 1.4; }
.wn-sw-t small { display: block; font-size: 14px; color: var(--muted); }
.wn-ov { margin: 4px 0 16px; font-size: 15px; color: var(--ink-2); }
.wn-note { margin: -6px 0 14px; padding-left: 12px; border-left: 3px solid var(--warn); font-size: 15px; color: var(--warn); }
/* the small calendar behind „Anderer Tag“ */
.wn-cal { width: 100%; max-width: 336px; margin: -4px 0 14px; padding: 10px 12px 12px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 6px; }
.wn-cal-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 16px; }
.wn-cal-nav { width: 40px; height: 40px; border: 0; background: none; font: 700 22px/1 inherit; font-family: inherit; color: var(--ink); cursor: pointer; border-radius: 4px; }
.wn-cal-nav:disabled { color: var(--line-strong); cursor: default; }
.wn-cal-r { display: grid; grid-template-columns: repeat(7, 1fr); }
.wn-cal-h { padding: 4px 0; text-align: center; font-size: 13px; font-weight: 600; color: var(--muted); }
.wn-cal-d { height: 40px; border: 0; background: none; border-radius: 50%; font: 400 16px/1 inherit; font-family: inherit; color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.wn-cal-d.today { font-weight: 700; }
.wn-cal-d[aria-disabled=true] { color: var(--line-strong); cursor: default; }
.wn-cal-d:not([aria-disabled=true]):hover { background: var(--ground); }
.wn-cal-d[aria-selected=true] { background: var(--ink); color: #fff; }
.wn-cal-d:focus-visible { outline: 3px solid var(--focus); outline-offset: -1px; }
/* the strip */
.st-wrap { position: relative; }
.st-nav { position: absolute; top: 24px; width: 36px; height: 58px; border: 0; background: linear-gradient(to right, var(--ground) 55%, transparent); font: 700 26px/1 inherit; font-family: inherit; color: var(--ink); cursor: pointer; z-index: 3; }
.st-prev { left: -18px; } .st-next { right: -18px; background: linear-gradient(to left, var(--ground) 55%, transparent); }
.st-scroll { overflow-x: auto; overflow-y: hidden; margin: 0 -18px 0 -18px; scrollbar-width: thin; overscroll-behavior-x: contain; }
.st { position: relative; height: 112px; min-width: 100%; user-select: none; -webkit-user-select: none; }
.st.dragging, .st.dragging * { cursor: grabbing !important; }
.st-ruler { position: absolute; left: 0; right: 0; top: 0; height: 22px; cursor: ew-resize; touch-action: pan-y; }
.st-hr-l { position: absolute; top: 2px; transform: translateX(-50%); font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.st-track { position: absolute; top: 24px; height: 58px; background-color: var(--paper); border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line-strong); cursor: copy; touch-action: pan-y;
  background-image: linear-gradient(to right, var(--line-strong) 1px, transparent 1px), linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size: var(--hr) 100%, var(--q) 30%; background-position: 0 0, 0 100%; background-repeat: repeat-x; }
/* what cannot be chosen: hatched (before now + lead / before the pickup; the quarter after 22:45) */
.st-x { position: absolute; top: 24px; height: 58px; border-radius: 4px 0 0 4px; touch-action: pan-y;
  background: repeating-linear-gradient(135deg, rgba(36, 40, 45, .13) 0 2px, rgba(236, 238, 239, .92) 2px 8px); box-shadow: inset 0 0 0 1px var(--line-strong); }
.st-tail { border-radius: 0 4px 4px 0; }
.st-blk { position: absolute; top: 29px; height: 48px; display: flex; align-items: center; justify-content: center; overflow: hidden; z-index: 1;
  background: var(--ink); color: #fff; border-radius: 4px; cursor: grab; touch-action: none; box-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
.st-bt { font-size: 15px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-blk:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* a Punkt: a pin at the start time (the 28-px element is the grab target) */
.st-blk.pin { background: none; box-shadow: none; overflow: visible; }
.st-blk.pin::before { content: ""; position: absolute; left: 12px; top: 0; bottom: 0; width: 4px; border-radius: 2px; background: var(--ink); }
.st-blk.pin::after { content: ""; position: absolute; left: 5px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--paper); }
.st-hd { position: absolute; top: 24px; width: 30px; height: 58px; cursor: ew-resize; touch-action: none; z-index: 2; }
.st-hd i { position: absolute; top: 13px; width: 8px; height: 32px; border-radius: 4px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); }
.st-hl i { right: 2px; } .st-hr i { left: 2px; }
.st-ghost { position: absolute; top: 88px; height: 18px; border: 2px solid var(--ink-2); border-top: 0; border-radius: 0 0 4px 4px; }
.st-ghost span { position: absolute; left: 6px; top: 1px; font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--ink-2); white-space: nowrap; }
.st-ghost.tight span { left: calc(100% + 6px); }
/* mobile / touch: the strip moves only by the arrows and the hour row */
.st-wrap.touch .st-scroll { overflow-x: hidden; margin: 0 -12px; }
.st-wrap.touch .st { height: 126px; }
.st-wrap.touch .st-ruler { height: 30px; background: linear-gradient(var(--ground), var(--ground)); border-radius: 4px; }
.st-wrap.touch .st-hr-l { top: 6px; font-size: 14px; }
.st-wrap.touch .st-track, .st-wrap.touch .st-x, .st-wrap.touch .st-hd { top: 34px; height: 64px; }
.st-wrap.touch .st-blk { top: 40px; height: 52px; }
.st-wrap.touch .st-hd i { top: 16px; left: 18px; right: auto; }
.st-wrap.touch .st-ghost { top: 102px; }
.st-wrap.touch .st-nav { top: 34px; width: 44px; height: 64px; }
.st-wrap.touch .st-prev { left: -12px; } .st-wrap.touch .st-next { right: -12px; }
@media (max-width: 600px) {
  /* the spine belongs to the stops: an open non-stop section (Zeiten, Fahrzeug, Produkt) takes the full width
     (Jakob 2026-11-08: the Zeiten box was indented by the spine with room left over) */
  .flow > .fc.is-open:not(.stop) { padding-left: 0; }
  .wn-pane { margin-left: -8px; margin-right: -8px; padding: 14px 12px 14px; }
  .wn-day { min-height: 44px; padding: 0 14px; }
  .wn-t { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .wn-read.nudged .wn-t { animation: none; background: var(--warn-tint); } .wn-sw, .wn-sw::after { transition: none; } }
/* without the script: start radios (an hour per row) + Dauer; „Später heute“ hides the starts before now + lead */
.wn-starts, .wn-dauer { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.wn-starts legend, .wn-dauer legend { padding: 0; margin-bottom: 6px; font-weight: 600; }
.wn-hrow { display: grid; grid-template-columns: repeat(4, minmax(0, 88px)); gap: 4px; margin-bottom: 4px; }
.wn-q input, .wn-dauer input { position: absolute; opacity: 0; }
.wn-q label { display: flex; align-items: center; justify-content: center; min-height: 40px; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; font-variant-numeric: tabular-nums; }
.wn-q input:checked + label { background: var(--ink); color: #fff; border-color: var(--ink); }
.wn-q input:focus-visible + label { box-shadow: 0 0 0 3px var(--focus); }
.wann:has(#w-later:checked) .wn-q.early { display: none; }
.wn-dauer.seg { display: flex; max-width: 440px; }
.wn-dauer.seg legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ============================================================ motion (Jakob 2026-11-08, auftrag_neu.js „motion“)
   A section in motion clips to its gliding height; the frozen copy of its old view lies on top and fades out.
   A stop that just became fertig tints its summary for a moment. The second summary line: contact · phone · hint. */
.fc.kp-moving, .kp-hole { overflow: hidden; overflow: clip; box-sizing: border-box; }
.kp-hole { position: relative; }
.kp-ghost { position: absolute !important; margin: 0 !important; box-sizing: border-box; pointer-events: none; z-index: 1; background: var(--ground); }
.kp-ghost.fc-box { background: var(--paper); }
.kp-anchorless { overflow-anchor: none; }
@keyframes kp-taken { from { background: var(--ok-tint); box-shadow: -8px 0 0 var(--ok-tint), 8px 0 0 var(--ok-tint); } to { background: transparent; box-shadow: -8px 0 0 transparent, 8px 0 0 transparent; } }
.fc-row.kp-taken { animation: kp-taken 1.4s ease-out; }
.fc-row .s2 { grid-column: 2; grid-row: 2; margin: -2px 0 0; padding-left: 24px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-micro); color: var(--muted); }
.fc-row .s2[hidden] { display: none; }
@media (max-width: 600px) {
  .fc-row .s2 { grid-column: 1; grid-row: 3; }
  .fc-row .ctl { grid-row: 1 / 4; }
}
@media (min-width: 601px) { .fc-row:has(> .s2:not([hidden])) > h2, .fc-row:has(> .s2:not([hidden])) > .ctl { grid-row: 1 / 3; } }

/* ============================================================ Zeiten (Jakob 2026-11-08): Abholung / Zustellung as two equal
   headings, no segment; Sofort = a block at the now line without grips; Zustellung pills; Direktfahrt below */
.wann .wn-h { font-size: var(--t-h3); line-height: 1.3; font-weight: 700; margin: 0 0 12px; }
.wann .wn-h.wn-h2 { margin-top: 26px; }
.wann .wn-seg[hidden] { display: none; }
.st.sofort .st-hd { display: none; }
.st.sofort .st-blk { background: var(--ink); justify-content: flex-start; padding-left: 14px; box-sizing: border-box; }
/* Sofort can be dragged (Jakob 2026-11-08): a grip at its right end, the same pill as a window's grips; one peek
   to the right when it first shows (prefers-reduced-motion: none, by the global rule) */
.st-grip { display: none; }
.st.sofort .st-grip { display: block; position: absolute; right: 12px; top: 50%; width: 8px; height: 28px; margin-top: -14px; border-radius: 4px; background: var(--paper); }
.st-blk.peek { animation: st-peek 1.1s ease-in-out .3s; }
@keyframes st-peek { 0%, 100% { transform: none; } 30% { transform: translateX(22px); } 55% { transform: none; } 75% { transform: translateX(10px); } }
.wn-dchoice { margin-bottom: 14px; }
.wn-dchoice[hidden] { display: none; }

/* review step („Auftrag abschließen“, 2026-11-08): the route map sits in the dark Übersicht panel on the right, as
   while building the order (Jakob: „keep the map in the Übersicht“) — kp_map.css .panel-map, then „Preis“ */
.rv-main { min-width: 0; }
.pay .pay-lbl { font-size: 14px; color: var(--on-gr-2); margin: 0 0 2px; }

/* order status band (detail page) + storno confirm page — 2026-11-08 */
.sband { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 32px; align-items: center; margin: -8px 0 28px; padding: 22px 26px; border-radius: var(--r-sheet); background: var(--paper); border: 1px solid var(--line); border-left: 6px solid var(--ink); }
.sband.is-live { border-left-color: var(--red); }
.sband.is-done { border-left-color: var(--ok); }
.sband.is-storno { border-left-color: var(--red-deep); background: var(--red-tint); border-color: #f2b8bf; }
.sb-head { min-width: 0; }
.sb-t { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
.sb-t svg.i { width: 26px; height: 26px; stroke-width: 2.8; color: var(--ok); }
.sband.is-storno .sb-t { color: var(--red-deep); }
.sb-l { margin: 6px 0 0; color: var(--ink-2); }
.sb-track { grid-column: 1 / -1; list-style: none; margin: 4px 0 0; padding: 0; display: flex; }
.sb-track li { flex: 1; position: relative; padding-top: 22px; font-size: var(--t-small); color: var(--muted); }
.sb-track li::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 2px; background: var(--line); }
.sb-track li:last-child::before { right: auto; width: 16px; }
.sb-track li.done::before { background: var(--ink); }
.sb-track .dot { position: absolute; top: 0; left: 0; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; background: var(--paper); border: 2px solid var(--line-strong); }
.sb-track li.done .dot { background: var(--ink); border-color: var(--ink); }
.sb-track li.cur .dot { border: 4px solid var(--red); }
.sband.is-done .sb-track li.cur .dot { background: var(--ok); border-color: var(--ok); }
.sb-track b { display: block; font-weight: 600; color: var(--ink); }
.sb-track li:not(.done):not(.cur) b { color: var(--muted); font-weight: 400; }
.sb-track span:not(.dot) { display: block; font-variant-numeric: tabular-nums; }
.sb-cancel { grid-column: 2; grid-row: 1; align-self: start; font-size: var(--t-small); color: var(--red-deep); min-height: 44px; display: inline-flex; align-items: center; }
.sb-call { grid-column: 2; grid-row: 1; align-self: start; margin: 0; font-size: var(--t-small); color: var(--muted); }
@media (max-width: 600px) {
  .sband { grid-template-columns: minmax(0, 1fr); padding: 18px 16px; gap: 14px; }
  .sb-t { font-size: 24px; }
  .sb-cancel, .sb-call { grid-column: 1; grid-row: auto; }
  .sb-track li { font-size: 13px; }
}
.scx { max-width: 640px; }
.scx > p { margin: 0 0 16px; }
.scx .note { margin: 0 0 20px; }
.scx form .f { margin: 0 0 20px; }
.scx .opt { color: var(--muted); font-weight: 400; }
.scx-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
button.danger { font: inherit; font-weight: 700; font-size: 17px; color: #fff; background: var(--red-deep); border: 0; border-radius: var(--r-field); padding: 0 24px; min-height: 52px; cursor: pointer; }
button.danger:hover { background: #7a0000; }

/* async loading (data-defer) — lib/defer.js + public/defer.js, 2026-11-08 */
.df-wait { display: flex; align-items: center; gap: 12px; min-height: 120px; padding: 24px 0; color: var(--muted); font-size: var(--t-small); visibility: hidden; }
.df.df-show .df-wait { visibility: visible; }
.df-spin { width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--red); animation: df-spin .8s linear infinite; flex: none; }
@keyframes df-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .df-spin { animation: none; border-top-color: var(--line-strong); } }

/* ====================================================================== Address entry (2026-11-09)
   Street list: a heading per zone (Berlin · Brandenburg · Weitere Orte), one compact row per street + PLZ with the
   place on the right (on phones below), a repeated name dimmed so the PLZ + Ortsteil reads as the difference; the list
   scrolls inside itself. Status line under the address rows: wait · ok (green, with the place) · warn (amber, the
   reason + buttons for the fix) · info (abroad / no answer). */
.sugw .sug { max-height: min(56vh, 440px); overflow-y: auto; overscroll-behavior: contain; }
.sug li.zh { display: block; cursor: default; padding: 10px 14px 4px; font-size: var(--t-micro); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.sug li.zh:not(:first-child) { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 12px; }
.sug li.strow { grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; padding-top: 8px; padding-bottom: 8px; }
.sug li.strow svg.i { grid-column: 1; grid-row: 1; align-self: center; margin-top: 0; }
.sug li.strow .t { grid-column: 2; grid-row: 1; }
.sug li.strow .a { grid-column: 3; grid-row: 1; text-align: right; white-space: nowrap; color: var(--ink-2); }
.sug li.strow .a b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.sug li.strow.rep .t { color: var(--muted); font-weight: 500; }
.sug li.more { display: block; cursor: default; padding: 8px 14px 10px; font-size: var(--t-micro); color: var(--muted); }
.f.ac .sug li.strow { grid-template-columns: 22px minmax(0, 1fr) auto; }
.f.ac .sug li.strow .a { grid-column: 3; }
@media (max-width: 520px) {
  .sug li.strow, .f.ac .sug li.strow { grid-template-columns: 20px minmax(0, 1fr); }
  .sug li.strow .a, .f.ac .sug li.strow .a { grid-column: 2; grid-row: auto; text-align: left; white-space: normal; }
  .sug li.strow svg.i { grid-row: 1 / 3; align-self: start; margin-top: 2px; }
}
.addr-st { margin: -6px 0 16px; font-size: 15px; }
.addr-st p { display: flex; gap: 8px; align-items: flex-start; margin: 0; line-height: 1.4; }
.addr-st p svg.i { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.addr-st.ok { color: var(--ok); }
.addr-st.wait, .addr-st.info { color: var(--muted); }
.addr-st.warn p { color: var(--warn); font-weight: 600; }
.addr-st .spin { width: 14px; height: 14px; box-sizing: border-box; margin-top: 3px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--red); animation: df-spin .8s linear infinite; flex: none; }
.addr-st .fixes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.addr-st button.fix { min-height: 40px; padding: 6px 14px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line-strong); font: inherit; font-size: var(--t-small); font-weight: 600; color: var(--ink); cursor: pointer; }
.addr-st button.fix:hover { border-color: var(--ink); }
.addr-st button.fix:focus-visible { border-color: var(--ink); box-shadow: 0 0 0 3px var(--focus); outline: none; }
.rowmsg-wide:not([hidden]) + .addr-st { margin-top: -8px; }
@media (prefers-reduced-motion: reduce) { .addr-st .spin { animation: none; border-top-color: var(--line-strong); } }

/* ---- Adressbuch + Vorlage bearbeiten (2026-11-10): plain edit forms outside the order flow (lib/form.js) ---- */
.edit-form { max-width: 720px; }
.form-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 24px; }
.olist td .tm { display: block; color: var(--muted); font-size: var(--t-small); }
.olist .act .rowact + .rowact { margin-left: 18px; }
details.del { max-width: 720px; margin-top: 24px; }
details.del > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--red-deep); text-decoration: underline; text-underline-offset: 3px; list-style: none; }
details.del > summary::-webkit-details-marker { display: none; }
details.del > summary:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--focus); border-radius: 4px; }
details.del form { margin-top: 8px; padding: 16px 20px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sheet); }
details.del p { margin: 0 0 16px; }
/* five tabs: a little tighter between the mobile menu's breakpoint and the wide layout */
@media (min-width: 900px) and (max-width: 1139px) { .appbar nav a { padding: 0 9px; font-size: 15px; } .appbar .side { gap: 12px; } }
.tpl-form > .panel { margin-top: 20px; }
.tpl-form > .panel:first-of-type { margin-top: 0; }
.tpl-form .panel > h2 { font-size: var(--t-h2); margin: -4px 0 14px; }
.tpl-form .st-h { margin: -4px 0 14px; }
.tpl-pick { display: flex; align-items: flex-end; gap: 12px; margin: 0 0 18px; padding: 12px 14px 14px; background: var(--ground); border-radius: var(--r-field); }
.tpl-pick .f { flex: 1; }
.tpl-pick select { width: 100%; }
.tpl-add { margin: 8px 0 -8px; }
.tpl-add .linkbtn { display: inline-flex; align-items: center; gap: 6px; }
.blk .tpl-name { max-width: 360px; }
.blk .tpl-name label { font-size: var(--t-small); font-weight: 600; }
@media (max-width: 600px) { .tpl-pick { flex-direction: column; align-items: stretch; } }
/* Kontaktpersonen on the Konto page (routes/persons.js section) */
.plist { list-style: none; margin: 0; padding: 0; }
.plist > li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.plist > li:first-child { border-top: 0; padding-top: 0; }
.plist .who { flex: 1 1 260px; min-width: 0; }
.plist .who b { display: block; }
.plist .who span { display: block; font-size: var(--t-small); color: var(--muted); overflow-wrap: anywhere; }
.plist .mark { font-size: var(--t-small); font-weight: 600; color: var(--ok); }
.plist .rowact { margin: 0; }
/* a form in flight (public/shell.js): the buttons are disabled, the pressed one names the step */
form[aria-busy=true] button[disabled] { cursor: progress; }
form[aria-busy=true] button.primary[disabled], form[aria-busy=true] button.danger[disabled] { opacity: .75; }
.pending-note { margin: 12px 0 0; }

/* the order in progress (2026-11-10): the draft is offered, not applied; „Abbrechen“ on the form and the Abschluss page */
.draft-offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin: 0 0 20px 40px; padding: 12px 16px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r-sheet); font-size: var(--t-small); }
.draft-offer p { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0; }
.draft-offer p span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-offer .acts { display: flex; gap: 8px; }
details.cancel { margin-top: 28px; }
.order-main > details.cancel { margin-left: 40px; }
@media (max-width: 600px) { .draft-offer, .order-main > details.cancel { margin-left: 30px; } }
details.cancel > summary { list-style: none; }
details.cancel > summary::-webkit-details-marker { display: none; }
details.cancel > summary:focus-visible { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px var(--focus); }
.cancel-q { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 10px; padding: 12px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sheet); }
.cancel-q p { margin: 0; }
.rv-main details.cancel { margin-top: 20px; }

/* places by name in the quick entry (Apple, 2026-11-10): name, its address under it */
.sug li.plrow { grid-template-columns: 22px minmax(0, 1fr); align-items: start; padding-top: 8px; padding-bottom: 8px; }
.sug li.plrow svg.i { grid-column: 1; grid-row: 1; }
.sug li.plrow .t { grid-column: 2; grid-row: 1; }
.sug li.plrow .a { grid-column: 2; grid-row: 2; color: var(--ink-2); font-size: var(--t-small); }

/* Abschluss page: what „Auftrag erteilen“ accepts (2026-11-10) */
.agb-line { margin: 16px 0 0; font-size: var(--t-small); color: var(--ink-2); }
/* in the dark Übersicht panel: the second line of the price note, right above „Auftrag erteilen“ */
.pay .agb-line { margin: 4px 0 0; font-size: 14px; color: var(--on-gr-2); }
.pay .price + .agb-line { margin-top: 10px; }

/* Aufträge: the search has a name (2026-11-10) */
.filters .flt-h { flex-basis: 100%; width: 100%; margin: 0 0 2px; font-size: var(--t-h3); font-weight: 700; }

/* Abschluss: „Für das nächste Mal“ — the boxes one under the other */
.sheet2 label.check.fu { margin: 0; }
.sheet2 label.check.fu + label.check.fu { margin-top: 10px; }

/* Abschluss: „Knapp“ under the Zeiten (the Zustellfenster closes before the ride can be done) */
.late-hint { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; font-size: var(--t-small); color: var(--warn); }
.late-hint svg.i { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; }

/* Bezahlung fixed for cash customers (2026-11-10) */
.pay-fixed { margin: 0; font-weight: 600; }
.pay-fixed small { display: block; margin-top: 2px; font-weight: 400; font-size: var(--t-small); color: var(--ink-2); }