/* Portal styles. Tokens from the Christof Pircher design system: black on white, apron blue for actions, lines instead of shadows. */
:root {
  --papier: #ffffff; --papier-2: #f2f3f6; --linie: #d6d8de; --linie-stark: #0b0b0d;
  --tinte: #0b0b0d; --tinte-2: #4a4d57;
  --schurz: #24408e; --schurz-hell: #e6eaf6; --auf-schurz: #ffffff;
  --indigo: #1a1d4e; --auf-indigo: #ffffff; --fehler: #b3261e; --fehler-hell: #fbeceb;
  --ok: #2f6b3a; --ok-hell: #e7f2e8;
  --fokus: 0 0 0 2px #ffffff, 0 0 0 4px #24408e;
  --font-fraktur: "UnifrakturMaguntia", "Old English Text MT", serif;
  --font-schmal: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-sans: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --radius-sm: 2px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papier: #0d0e12; --papier-2: #181a21; --linie: #2c2f39; --linie-stark: #f4f4f2;
    --tinte: #f4f4f2; --tinte-2: #a9acb6;
    --schurz: #93a9ec; --schurz-hell: #1a2347; --auf-schurz: #0d0e12;
    --indigo: #272c6e; --auf-indigo: #f4f4f2; --fehler: #ff8a80; --fehler-hell: #3a1714;
    --ok: #8fd19a; --ok-hell: #16301b;
    --fokus: 0 0 0 2px #0d0e12, 0 0 0 4px #93a9ec;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--tinte); font-family: var(--font-sans); font-size: 17px; line-height: 26px; -webkit-font-smoothing: antialiased; }
a { color: var(--schurz); text-underline-offset: 4px; }
:focus-visible { outline: 2px solid transparent; box-shadow: var(--fokus); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-schmal); font-weight: 600; text-wrap: balance; }
.h1 { font-size: 34px; line-height: 40px; }
.h2 { font-size: 26px; line-height: 32px; }
.h3 { font-size: 20px; line-height: 26px; font-family: var(--font-schmal); font-weight: 600; }
.eyebrow, .label { font-family: var(--font-schmal); font-weight: 600; font-size: 13px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-2); }
.small { font-size: 14px; line-height: 20px; color: var(--tinte-2); }
.intro { max-width: 40em; margin-bottom: var(--space-6); }
.empty { padding: var(--space-8) 0; color: var(--tinte-2); border-top: 1px solid var(--linie); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: 1040px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
@media (min-width: 768px) { .wrap { padding-left: 32px; padding-right: 32px; } }
.main { padding-top: var(--space-8); padding-bottom: var(--space-12); }

/* Top bar */
.topbar { position: sticky; top: 0; z-index: 5; background: var(--papier); border-bottom: 1px solid var(--linie-stark); padding-top: env(safe-area-inset-top); }
.topbar-inner { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "mark tag end" "nav nav nav"; align-items: center; column-gap: var(--space-3); padding-top: var(--space-3); }
.topbar-inner > .wordmark { grid-area: mark; }
.wordmark { font-family: var(--font-fraktur); font-weight: 400; font-size: 26px; line-height: 32px; color: var(--tinte); text-decoration: none; white-space: nowrap; }
.wordmark-large { font-size: 44px; line-height: 52px; }
.topbar-tag { grid-area: tag; font-family: var(--font-schmal); font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-2); }
.topbar-end { grid-area: end; display: flex; align-items: center; gap: var(--space-4); }
.nav { grid-area: nav; display: flex; gap: var(--space-6); overflow-x: auto; scrollbar-width: none; margin-top: var(--space-2); }
.nav::-webkit-scrollbar { display: none; }
.nav a { font-family: var(--font-schmal); font-weight: 600; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte); text-decoration: none; padding: var(--space-2) 0 var(--space-3); border-bottom: 3px solid transparent; white-space: nowrap; }
.nav a[aria-current="page"] { color: var(--schurz); border-bottom-color: var(--schurz); }
.nav a:hover { color: var(--schurz); }
@media (min-width: 900px) {
  .topbar-inner { grid-template-columns: auto auto 1fr auto; grid-template-areas: "mark tag nav end"; padding-block: 0; }
  .nav { margin: 0 0 0 var(--space-6); }
  .nav a { padding: var(--space-4) 0 calc(var(--space-4) - 3px); }
}
.language { display: flex; align-items: center; gap: var(--space-1); font-family: var(--font-schmal); font-weight: 600; font-size: 14px; letter-spacing: .08em; color: var(--tinte-2); }
.language button, .link-button { font: inherit; background: none; border: 0; padding: var(--space-2) var(--space-1); color: var(--tinte-2); cursor: pointer; min-height: 32px; }
.language button[aria-pressed="true"] { color: var(--tinte); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.link-button { font-family: var(--font-schmal); font-weight: 600; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.link-button:hover, .language button:hover { color: var(--schurz); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-6); border: 2px solid transparent; border-radius: var(--radius-sm); font-family: var(--font-schmal); font-weight: 600; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap; background: none; }
.btn-small { min-height: 36px; padding: 0 var(--space-3); font-size: 14px; }
.btn-primary { background: var(--schurz); border-color: var(--schurz); color: var(--auf-schurz); }
.btn-primary:hover { background: var(--indigo); border-color: var(--indigo); color: var(--auf-indigo); }
.btn-outline { border-color: var(--linie-stark); color: var(--tinte); }
.btn-outline:hover { background: var(--tinte); color: var(--papier); }

/* Page head */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.page-head > div { display: grid; gap: var(--space-1); }
.section-title { margin: var(--space-8) 0 var(--space-4); }

.flash { background: var(--ok-hell); color: var(--ok); border-left: 4px solid var(--ok); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); font-weight: 500; }
.error-box { background: var(--fehler-hell); color: var(--fehler); border-left: 4px solid var(--fehler); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-6); }
.error-box ul { margin: var(--space-1) 0 0; padding-left: 1.2em; }
.missing { color: var(--fehler); font-weight: 600; }

.badge { display: inline-block; font-family: var(--font-schmal); font-weight: 600; font-size: 12px; line-height: 20px; letter-spacing: .08em; text-transform: uppercase; padding: 0 var(--space-2); border-radius: var(--radius-sm); border: 1px solid var(--linie); color: var(--tinte-2); }
.badge-planned { background: var(--schurz-hell); color: var(--schurz); border-color: transparent; }
.badge-done { background: var(--ok-hell); color: var(--ok); border-color: transparent; }
.badge-cancelled { text-decoration: line-through; }

/* Day navigation */
.day-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-4); }
.day-jump input { min-height: 36px; }
.week { display: grid; grid-template-columns: 28px repeat(7, 1fr) 28px; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); margin-bottom: var(--space-6); }
.week-arrow { display: grid; place-items: center; color: var(--tinte-2); text-decoration: none; font-size: 22px; }
.week-day { display: grid; justify-items: center; gap: 2px; padding: var(--space-2) 0; text-decoration: none; color: var(--tinte); border-bottom: 3px solid transparent; }
.week-day[aria-current="date"] { border-bottom-color: var(--schurz); color: var(--schurz); }
.week-day:hover { background: var(--papier-2); }
.week-label { font-size: 12px; line-height: 16px; color: inherit; text-align: center; }
.week-count { font-family: var(--font-schmal); font-weight: 600; font-size: 18px; font-variant-numeric: tabular-nums; }
@media (max-width: 599px) {
  .week-label { font-size: 0; }
  .week-label::first-letter { font-size: 12px; }
}

/* Trip cards */
.trip-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.trip-card { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--linie); border-top: 4px solid var(--linie-stark); color: var(--tinte); text-decoration: none; }
.trip-card:hover { border-color: var(--schurz); border-top-color: var(--schurz); }
.trip-card.is-cancelled { opacity: .6; border-top-color: var(--linie); }
.trip-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.trip-driver { font-family: var(--font-schmal); font-weight: 600; font-size: 20px; }
.trip-price { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.trip-route { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); font-size: 18px; }
.route-sep { color: var(--tinte-2); }
.trip-note { border-left: 3px solid var(--schurz); padding-left: var(--space-3); }
.trip-note-driver { border-left-color: var(--linie-stark); }

/* Forms */
.form { display: grid; gap: var(--space-4); }
.section { border: 0; border-top: 1px solid var(--linie); margin: var(--space-4) 0 0; padding: var(--space-6) 0 0; display: grid; gap: var(--space-4); min-width: 0; }
.section > legend { float: left; width: 100%; padding: 0; margin-bottom: var(--space-4); }
.section > legend + * { clear: both; }
.field { display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.field-narrow { max-width: 260px; }
.field-end { align-content: end; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  font: inherit; font-size: 17px; color: var(--tinte); background: var(--papier); border: 1px solid var(--linie-stark); border-radius: var(--radius-sm);
  min-height: 44px; padding: var(--space-2) var(--space-3); width: 100%; min-width: 0;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid transparent; box-shadow: var(--fokus); }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--schurz); }
.grid-2, .grid-3 { display: grid; gap: var(--space-4); }
@media (min-width: 700px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { display: flex; align-items: center; gap: var(--space-2); border: 1px solid var(--linie); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); cursor: pointer; }
.chip:has(input:checked) { border-color: var(--schurz); background: var(--schurz-hell); }
.chip > span { display: grid; line-height: 20px; }
.chip-sub { font-size: 12px; line-height: 16px; color: var(--tinte-2); }

.segmented { display: flex; border: 1px solid var(--linie-stark); border-radius: var(--radius-sm); }
.segmented label { flex: 1; position: relative; }
.segmented input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.segmented span { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 var(--space-3); font-weight: 500; text-align: center; line-height: 20px; }
.segmented label + label span { border-left: 1px solid var(--linie-stark); }
.segmented input:checked + span { background: var(--tinte); color: var(--papier); }
.segmented input:focus-visible + span { box-shadow: var(--fokus); }

.place-inputs { display: grid; gap: var(--space-2); grid-template-columns: 1fr auto; }
.place-inputs > select, .place-inputs > input { grid-column: 1; }
.place-inputs > .remove-stop { grid-column: 2; grid-row: 1; min-width: 44px; min-height: 44px; }
@media (min-width: 700px) {
  .place-inputs { grid-template-columns: 1fr 1fr auto; }
  .place-inputs > .other-input, .place-inputs > .customer-input { grid-column: 2; grid-row: 1; }
  .place-inputs > .other-input:not([hidden]) + .customer-input { grid-row: 2; }
  .place-inputs > .remove-stop { grid-column: 3; }
}
.other-input[hidden], .customer-input[hidden] { display: none; }
.stops { display: grid; gap: var(--space-3); padding-left: var(--space-4); border-left: 3px solid var(--linie); justify-items: start; }
.stops > .stop-row { width: 100%; }

.suggestion { font-size: 18px; font-weight: 500; min-height: 26px; }
.suggestion .small { display: block; }
.suggestion.is-missing { color: var(--fehler); }
.note-list { margin: 0; padding-left: 1.2em; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-top: var(--space-2); }
.actions-sticky { position: sticky; bottom: 0; background: var(--papier); border-top: 1px solid var(--linie); padding-block: var(--space-3); padding-bottom: max(var(--space-3), env(safe-area-inset-bottom)); }

/* Driver view */
.my-list { display: grid; gap: var(--space-6); }
.my-trip { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--linie); border-top: 4px solid var(--linie-stark); scroll-margin-top: 120px; }
.my-trip.is-cancelled { opacity: .6; }
.my-trip-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.stop-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.stop-note { display: grid; gap: var(--space-2); padding: var(--space-3); background: var(--papier-2); }
.stop-note-place { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.stop-no { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tinte); color: var(--papier); font-size: 13px; font-weight: 600; flex: none; }
.stop-note-fields { display: grid; grid-template-columns: 1fr minmax(150px, 1fr); gap: var(--space-2); }
@media (max-width: 359px) { .stop-note-fields { grid-template-columns: 1fr; } }
.done-list summary { cursor: pointer; }

/* Price lists */
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.tabs a { border: 1px solid var(--linie-stark); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); color: var(--tinte); text-decoration: none; font-weight: 500; }
.tabs a[aria-current="page"] { background: var(--tinte); color: var(--papier); }
.price-group { display: grid; gap: var(--space-2); }
.price-table { width: 100%; border-collapse: collapse; }
.price-table th { text-align: left; font-family: var(--font-schmal); font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-2); border-bottom: 1px solid var(--linie-stark); padding: var(--space-2) 0; }
.price-table td { border-bottom: 1px solid var(--linie); padding: var(--space-1) 0; }
.price-table .num { text-align: right; width: 1%; padding-left: var(--space-4); white-space: nowrap; }
.price-table input:not([type="checkbox"]) { width: 120px; text-align: right; font-variant-numeric: tabular-nums; min-height: 40px; }

/* Vehicles */
.vehicle-list { display: grid; gap: var(--space-3); }
.vehicle-row { display: grid; gap: var(--space-3); align-items: end; padding: var(--space-3) 0; border-bottom: 1px solid var(--linie); }
.vehicle-row.is-inactive { color: var(--tinte-2); }
@media (min-width: 800px) { .vehicle-row { grid-template-columns: 2fr 1.3fr 1.6fr auto auto; } }
.check { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; }

/* Export */
.range-list { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; gap: var(--space-3); }
@media (min-width: 700px) { .range-list { grid-template-columns: repeat(3, 1fr); } }
.range { display: grid; gap: var(--space-1); padding: var(--space-4); border: 1px solid var(--linie); border-top: 4px solid var(--linie-stark); color: var(--tinte); text-decoration: none; }
.range:hover { border-color: var(--schurz); }
.range-action { color: var(--schurz); font-family: var(--font-schmal); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 14px; margin-top: var(--space-2); }

/* Login */
.login { max-width: 420px; margin: var(--space-8) auto 0; display: grid; gap: var(--space-4); }
.login-head { display: grid; justify-items: start; gap: var(--space-1); margin-bottom: var(--space-4); }
.login-users { display: grid; gap: var(--space-2); }
.login-user { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); font: inherit; text-align: left; padding: var(--space-4); background: var(--papier); color: var(--tinte); border: 1px solid var(--linie-stark); border-radius: var(--radius-sm); cursor: pointer; }
.login-user:hover { border-color: var(--schurz); background: var(--schurz-hell); }
.login-name { font-family: var(--font-schmal); font-weight: 600; font-size: 20px; }

/* Phones */
@media (max-width: 599px) {
  .topbar-tag { display: none; }
  .topbar-inner { grid-template-columns: 1fr auto; grid-template-areas: "mark end" "nav nav"; }
  .topbar-end { gap: var(--space-2); }
  .wordmark { font-size: 24px; }
}

/* Staff */
.user-item { border-bottom: 1px solid var(--linie); padding-bottom: var(--space-3); }
.user-item .vehicle-row { border-bottom: 0; padding-bottom: var(--space-1); }
.user-item.is-inactive { color: var(--tinte-2); }
@media (min-width: 800px) { .user-row { grid-template-columns: 1.6fr 1.8fr 1.1fr 1fr auto auto; } }
.user-extra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.link-danger { color: var(--fehler); padding-inline: 0; }
.link-danger:hover { color: var(--fehler); text-decoration: underline; }

/* Login links and account */
.link-accent { color: var(--schurz); padding-inline: 0; }
.link-accent:hover { text-decoration: underline; }
.btn-wide { width: 100%; }
.invite-box { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 700px) { .invite-box { grid-template-columns: auto 1fr; } }
.qr { width: 256px; height: 256px; background: #fff; padding: var(--space-3); image-rendering: pixelated; border: 1px solid var(--linie); }
.invite-actions { display: grid; gap: var(--space-4); min-width: 0; }
.invite-url { font-size: 14px !important; }
.account-form { max-width: 420px; }
.client-form { max-width: 640px; margin-top: var(--space-4); }
details.section > summary { cursor: pointer; }