*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #e6e2db;
  font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  color: #1c1b19;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page { min-height: 100vh; display: flex; justify-content: center; background: #e6e2db; }
.phone { width: 100%; max-width: 430px; background: #f6f5f1; min-height: 100vh; padding: 0 0 48px; box-shadow: 0 0 60px rgba(0,0,0,.04); }

/* Header */
.header { padding: 26px 22px 6px; }
.header-top { display: flex; justify-content: space-between; align-items: center; }
.wordmark { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #a7a298; font-weight: 600; }
.header-top-right { display: flex; align-items: center; gap: 14px; }
.settings-link { color: #a7a298; text-decoration: none; font-size: 16px; line-height: 1; }
.settings-link:hover { color: #5a5750; }
.clock { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #a7a298; letter-spacing: .02em; }
.greeting { font-size: 28px; font-weight: 600; letter-spacing: -0.025em; margin: 20px 0 4px; }
.subtitle-row { display: flex; align-items: center; gap: 8px; }
.subtitle { font-size: 15px; color: #6b6862; }
.badge-morgen { background: #e7e3db; color: #7a766d; font-size: 11px; padding: 2px 8px; border-radius: 6px; font-weight: 600; letter-spacing: .02em; }
.badge-morgen.hidden { display: none; }
.route-crumb { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: #8b877f; }
.crumb-arrow { color: #cfcabf; }

/* Direction toggle */
.dir-toggle { display: flex; gap: 6px; background: #e7e3db; padding: 4px; border-radius: 13px; margin-top: 20px; }
.dir-btn { flex: 1; padding: 9px 0; border: none; border-radius: 9px; font-family: inherit; font-size: 14px; cursor: pointer; transition: all .15s; }
.dir-btn.active { font-weight: 600; color: #1c1b19; background: #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,.07); }
.dir-btn:not(.active) { font-weight: 500; color: #908b82; background: transparent; }

/* From row */
.from-row { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.from-label { font-size: 13px; color: #8b877f; font-weight: 500; }
.from-controls { display: flex; align-items: center; gap: 8px; }
.time-input-wrap { display: inline-flex; align-items: center; background: #ffffff; border: 1px solid #e3ded5; border-radius: 10px; padding: 6px 11px; cursor: pointer; }
.time-input-wrap input[type="time"] { border: none; background: transparent; font-family: 'IBM Plex Mono', monospace; font-size: 15px; font-weight: 500; color: #1c1b19; outline: none; padding: 0; }
.nu-btn { background: #efece6; border: none; border-radius: 10px; padding: 8px 13px; font-family: inherit; font-size: 13px; font-weight: 600; color: #5a5750; cursor: pointer; }
.from-date-row { text-align: right; margin-top: 5px; }
#from-date { font-size: 12px; color: #8b877f; font-weight: 500; }
.hint { font-size: 12px; color: #a7a298; margin: 14px 0 0; line-height: 1.45; }

/* Cards */
.cards { padding: 8px 16px 0; display: flex; flex-direction: column; gap: 12px; }
.no-journeys { padding: 20px 4px; color: #8b877f; font-size: 14px; }
.card { background: #ffffff; border: 1px solid #e8e4dc; border-radius: 18px; padding: 16px; cursor: pointer; transition: border-color .15s; }
.card:hover { border-color: #d4cfc6; }

/* Card header */
.card-header { display: flex; justify-content: space-between; align-items: flex-start; }
.dep-time-row { display: flex; align-items: baseline; gap: 8px; }
.dep-time { font-family: 'IBM Plex Mono', monospace; font-size: 23px; font-weight: 500; letter-spacing: -0.01em; }
.delay-label { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: #b23b2e; font-weight: 500; }
.card-origin { font-size: 13px; color: #6b6862; margin-top: 3px; }
.card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.total-time { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: #8b877f; }
.status-badge { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; }
.status-badge .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.status-ontime { color: #4f7a52; }
.status-ontime .dot { background: #5b9160; }
.status-delayed { color: #b23b2e; }
.status-delayed .dot { background: #c97a2e; }

/* Countdown pill */
.countdown-pill { display: inline-flex; align-items: center; gap: 7px; margin-top: 13px; background: #f1efe9; border-radius: 999px; padding: 5px 12px; font-size: 12.5px; color: #5a5750; font-weight: 600; }
.countdown-pulse { width: 6px; height: 6px; border-radius: 50%; background: #1c1b19; display: inline-block; animation: sprintjePulse 2s ease-in-out infinite; flex-shrink: 0; }

/* Closed card summary */
.card-summary { display: flex; align-items: center; gap: 9px; margin-top: 13px; padding-top: 13px; border-top: 1px solid #f0ede7; font-size: 13px; color: #6b6862; flex-wrap: wrap; }
.summary-arr { font-family: 'IBM Plex Mono', monospace; color: #3f3d39; }
.sep { color: #cfcabf; }
.badge-sprint { background: #f2e7d4; color: #9c6310; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; letter-spacing: .03em; text-transform: lowercase; }

/* Timeline (open card) */
.timeline { margin-top: 16px; }
.tl-row { display: grid; grid-template-columns: 50px 22px 1fr; column-gap: 12px; }
.tl-transfer-row { display: grid; grid-template-columns: 50px 22px 1fr; column-gap: 12px; background: #f5f1ea; border-radius: 9px; padding: 8px 0; }
.tl-time { font-family: 'IBM Plex Mono', monospace; font-size: 13.5px; color: #3f3d39; text-align: right; align-self: start; padding-top: 2px; }
.tl-track { position: relative; }
.tl-line { position: absolute; left: 11px; transform: translateX(-50%); width: 2px; background: #d9d4ca; }
.tl-line-from-top { top: 14px; bottom: 0; }
.tl-line-full { top: 0; bottom: 0; }
.tl-line-to-mid { top: 0; height: 9px; }
.tl-dot-filled { position: absolute; left: 11px; top: 4px; transform: translateX(-50%); width: 10px; height: 10px; border-radius: 50%; background: #1c1b19; }
.tl-dot-open { position: absolute; left: 11px; top: 4px; transform: translateX(-50%); width: 10px; height: 10px; border-radius: 50%; background: #ffffff; border: 2px solid #1c1b19; }
.tl-dot-dest { position: absolute; left: 11px; top: 3px; transform: translateX(-50%); width: 13px; height: 13px; border-radius: 50%; background: #1c1b19; display: flex; align-items: center; justify-content: center; }
.tl-dot-dest::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #ffffff; display: block; }
.tl-mark-sprint { position: absolute; left: 11px; top: 50%; transform: translate(-50%,-50%) rotate(45deg); width: 9px; height: 9px; background: #c08327; }
.tl-mark-normal { position: absolute; left: 11px; top: 50%; transform: translate(-50%,-50%); width: 7px; height: 7px; border-radius: 50%; background: #b6b1a7; }
.tl-station { font-size: 14.5px; font-weight: 600; }
.tl-station .plat { color: #9a968e; font-weight: 500; font-size: 12.5px; }
.tl-sublabel { font-size: 12.5px; color: #9a968e; margin-top: 4px; }
.tl-pb { padding-bottom: 18px; }
.tl-pt { padding-top: 6px; }

/* Transfer block content */
.transfer-info { display: flex; flex-direction: column; gap: 6px; }
.transfer-gap-row { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #5a5750; }
.transfer-gap-row strong { font-weight: 600; color: #1c1b19; }
.backup-line { display: flex; align-items: baseline; gap: 6px; font-size: 11.5px; color: #94703a; line-height: 1.35; }
.backup-line .arr { font-weight: 700; }
.backup-time { font-family: 'IBM Plex Mono', monospace; font-weight: 600; }

@keyframes sprintjePulse { 0%,100%{opacity:1;}50%{opacity:.4;} }