/* Fahrtenbuch – public pages. Colours from design/design-system.md, type from design/ui-redesign/typography.txt.
   Fonts: IBM Plex Sans 400/500/600 and Plex Mono 500, self-hosted from /fonts (SIL OFL 1.1, /fonts/OFL.txt).
   No external requests: web fonts from a third-party CDN would send every visitor's IP address there (GDPR). */

/* Latin subsets only (the site is German and English); other scripts fall back to the system font */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/IBMPlexSans-Regular-Latin1.woff2') format('woff2'); unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/IBMPlexSans-Regular-Latin2.woff2') format('woff2'); unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/IBMPlexSans-Regular-Latin3.woff2') format('woff2'); unicode-range: U+0102-0103, U+01CD-01DC, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/IBMPlexSans-Medium-Latin1.woff2') format('woff2'); unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/IBMPlexSans-Medium-Latin2.woff2') format('woff2'); unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/IBMPlexSans-Medium-Latin3.woff2') format('woff2'); unicode-range: U+0102-0103, U+01CD-01DC, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/IBMPlexSans-SemiBold-Latin1.woff2') format('woff2'); unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/IBMPlexSans-SemiBold-Latin2.woff2') format('woff2'); unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/IBMPlexSans-SemiBold-Latin3.woff2') format('woff2'); unicode-range: U+0102-0103, U+01CD-01DC, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/IBMPlexMono-Medium-Latin1.woff2') format('woff2'); unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; }

:root {
  color-scheme: light dark;
  --page: #F4F7F9;
  --surface: #FFFFFF;
  --raised: #E9F0F4;
  --border: #D9E3EA;
  --ink: #132C3C;
  --secondary: #51636F;
  --brand: #174559;
  --on-brand: #FFFFFF;
  --business: #1D5B9D;
  --business-bg: #E5F0FC;
  --private: #78479A;
  --private-bg: #F1E8F8;
  --commute: #086E64;
  --commute-bg: #DFF4EC;
  --warning: #9B6518;
  --warning-bg: #FFF1D8;
  --locked: #617383;
  --locked-bg: #EDF1F4;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #0C171E;
    --surface: #15242D;
    --raised: #1F3440;
    --border: #35505B;
    --ink: #F5F9FA;
    --secondary: #B6C9D1;
    --brand: #9BCAD4;
    --on-brand: #0C171E;
    --business: #95C7FF;
    --business-bg: #173653;
    --private: #DBAFF1;
    --private-bg: #392343;
    --commute: #83DFCC;
    --commute-bg: #163C3A;
    --warning: #FFD28C;
    --warning-bg: #473521;
    --locked: #B4C3CD;
    --locked-bg: #303F48;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  /* Only the bundled weights: never a synthesised bold */
  font-synthesis-weight: none;
  overflow-wrap: break-word;
}

.wrap { max-width: 46rem; margin: 0 auto; padding: 0 16px; }

a { color: var(--brand); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 10; }

/* Header */
.site-header { border-bottom: 1px solid var(--border); background: var(--surface); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.125rem; color: var(--ink); text-decoration: none; min-height: 44px; }
.brand img { border-radius: 8px; }
.lang { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-weight: 600; font-size: 0.875rem; }

/* Content */
main { padding: 32px 0 48px; }
h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 12px; letter-spacing: -0.5px; font-weight: 600; }
h2 { font-size: 1.375rem; line-height: 1.3; margin: 40px 0 8px; font-weight: 600; }
h3 { font-size: 1.125rem; line-height: 1.35; margin: 28px 0 6px; font-weight: 600; }
p, ul, ol, dl, table { margin: 0 0 16px; }
ul, ol { padding-left: 1.4em; }
li { margin-bottom: 6px; }
.lead { font-size: 1.125rem; color: var(--secondary); }
.meta { color: var(--secondary); font-size: 0.875rem; }
.muted { color: var(--secondary); }
strong { font-weight: 600; }
code, kbd, samp { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 500; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 20px; margin: 0 0 16px; }
.card > :last-child { margin-bottom: 0; }
.note { background: var(--warning-bg); color: var(--ink); border-left: 4px solid var(--warning); border-radius: 12px; padding: 14px 16px; margin: 0 0 16px; }
.note > :last-child { margin-bottom: 0; }

.table-wrap { overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; margin: 0; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--border); }
tr:last-child td { border-bottom: 0; }
th { background: var(--raised); font-weight: 600; }

dl.facts { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: 6px 16px; }
dl.facts dt { font-weight: 600; color: var(--secondary); }
dl.facts dd { margin: 0; }
@media (max-width: 480px) {
  dl.facts { grid-template-columns: 1fr; gap: 2px; }
  dl.facts dd { margin-bottom: 10px; }
  h1 { font-size: 1.75rem; }
}

ol.steps { list-style: none; padding: 0; counter-reset: step; }
ol.steps > li { counter-increment: step; position: relative; padding: 0 0 0 48px; margin-bottom: 16px; min-height: 36px; }
ol.steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-weight: 600; display: flex; align-items: center; justify-content: center; }

.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.chip.business { color: var(--business); background: var(--business-bg); }
.chip.private { color: var(--private); background: var(--private-bg); }
.chip.commute { color: var(--commute); background: var(--commute-bg); }
.chip.locked { color: var(--locked); background: var(--locked-bg); }

/* Home */
.hero { padding: 8px 0 8px; }
.hero h1 { font-size: 2.25rem; }
.cta { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 24px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-weight: 600; text-decoration: none; }
.cta:hover { text-decoration: underline; }
.micro { font-size: 0.875rem; color: var(--secondary); margin-top: 8px; }

/* Footer */
.site-footer { border-top: 1px solid var(--border); background: var(--surface); padding: 24px 0 32px; font-size: 0.9375rem; }
.site-footer ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0 0 12px; }
.site-footer li { margin: 0; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer p { color: var(--secondary); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* Landing: result screen in the hero, store buttons per device, QR on a computer. */
.hero-grid { display: grid; gap: 20px; }
.shot { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto; border-radius: 22px; }
.stores { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.store { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 22px; border-radius: 14px; background: var(--brand); color: var(--on-brand); font-weight: 600; text-decoration: none; }
.store:hover { text-decoration: underline; }
.store-status { background: var(--raised); border-radius: 12px; padding: 12px 14px; margin: 12px 0; }
.qr { display: none; align-items: center; gap: 12px; margin-top: 12px; }
.qr img { border-radius: 8px; background: #fff; }
.qr p { margin: 0; font-size: 0.875rem; color: var(--secondary); max-width: 14rem; }
/* Only iOS has this property, so a phone sees the store it can install from, without a script (script-src is 'none'). */
@supports (-webkit-touch-callout: none) { .only-android { display: none; } }
@supports not (-webkit-touch-callout: none) {
  @media (pointer: coarse) and (max-width: 1024px) { .only-ios { display: none; } }
}
@media (min-width: 720px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 240px; align-items: center; gap: 32px; }
  .shot { margin: 0; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 720px) { .qr { display: flex; } }