/* ERABUS identity: the road between home and the next meeting. */
:root { --blue: #173c60; --blue-strong: #102d49; --yellow: #f8ce46; --ink: #142f4b; --muted: #5e7184; --soft: #f5f6f3; }
body { background: #fafbf9; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
:where(a, button, input, textarea):focus-visible { outline: 3px solid #246ac0; outline-offset: 4px; }
.site-header { background: #fff; }
.site-header__inner { min-height: 80px; }
.main-nav .current-menu-item > a { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 9px; }
.header-ticket { border-radius: 6px 14px 6px 14px; background: var(--blue-strong); box-shadow: inset 0 -3px 0 rgba(248,206,70,.8); }
.header-ticket:hover { background: #235278; }
.reference-hero { padding: 54px 24px 32px; background-position: center 62%; }
.reference-hero::before { background: linear-gradient(90deg, rgba(9,29,47,.9), rgba(9,29,47,.72) 50%, rgba(9,29,47,.4)), linear-gradient(0deg, rgba(9,29,47,.8), transparent 75%); }
.reference-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .09; pointer-events: none; background-image: repeating-linear-gradient(120deg, transparent, transparent 78px, #c9d9e2 79px, transparent 80px); }
.reference-hero__intro { margin-bottom: 28px; }
.reference-hero .reference-pill { border-radius: 4px; background: transparent; padding: 0; color: #f8d86f; font-size: 10px; letter-spacing: .22em; }
.reference-hero .reference-pill::before { content: ''; width: 30px; height: 2px; background: var(--yellow); }
.reference-hero h1 { margin-top: 16px; max-width: 1100px; font-size: clamp(34px, 3.4vw, 57px); letter-spacing: -.05em; line-height: 1.08; }
.reference-hero h1 span { margin-top: 5px; color: #f9d65d; }
.journey-subtitle { margin: 18px auto 0; color: #e2e9ed; font-size: 14px; }
.journey-line { display: flex; align-items: center; justify-content: center; gap: 14px; width: min(490px, 100%); margin: 25px auto 0; font-size: 11px; font-weight: 650; color: #eef2f4; }
.journey-line__track { position: relative; width: 88px; height: 1px; border-top: 1px dashed #bdcdd7; }
.journey-line__track::before, .journey-line__track::after { content: ''; position: absolute; top: -4px; width: 7px; height: 7px; border: 2px solid var(--yellow); border-radius: 50%; background: #19364e; }
.journey-line__track::before { left: -3px; }
.journey-line__track::after { right: -3px; }
.reference-booking { position: relative; max-width: 1360px; padding: 20px 34px 16px; border: 0; border-top: 4px solid var(--yellow); border-radius: 14px; box-shadow: 0 24px 60px #04152545; }
.booking-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 5px 15px; border-bottom: 1px solid #e9eef1; color: var(--ink); }
.booking-heading strong { font-size: 18px; letter-spacing: -.035em; }
.booking-heading span { color: #586b7a; font-size: 11px; }
.booking-footnote { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 10px 5px 0; border-top: 1px solid #e9eef1; color: #526779; font-size: 11px; }
.booking-clocks { display: flex; gap: 8px; flex-wrap: wrap; }
.booking-clocks b { color: var(--ink); font-variant-numeric: tabular-nums; }
.reference-hero__actions { margin-top: 22px; }
.hero-link { min-height: 40px; border: 0; border-radius: 5px; font-size: 11px; color: #f0f5f8; background: #ffffff0b; }
.hero-link:hover { background: #ffffff1c; }
.section { width: min(1160px, calc(100% - 48px)); }
.reference-routes { padding-top: 66px; padding-bottom: 60px; }
.reference-heading { max-width: 720px; }
.reference-heading .reference-pill { padding: 0; border-radius: 0; box-shadow: none; background: transparent; color: #527084; font-size: 10px; letter-spacing: .18em; }
.reference-heading .reference-pill::before { content: ''; width: 18px; height: 2px; background: #d7a625; }
.reference-heading h2 { margin-top: 14px; font-size: clamp(29px, 3vw, 42px); letter-spacing: -.05em; }
.reference-heading p { color: #5c7082; }
.route-filters { gap: 8px; margin-bottom: 22px; }
.chip { min-height: 40px; border-color: #d9e1e5; border-radius: 7px; color: #486175; background: transparent; font-size: 11px; }
.chip:hover { border-color: #183d60; }
.chip.is-active { border-color: var(--blue-strong); background: var(--blue-strong); }
[data-route-filter="saved"] { margin-left: auto; color: #664f13; border-color: #d8cba0; }
[data-route-filter="saved"].is-active { color: #fff; }
.routes-grid { gap: 18px; }
.route-card { position: relative; padding: 0; overflow: hidden; border: 1px solid #d6e0e5; border-left: 4px solid #234c71; border-radius: 12px; box-shadow: 0 5px 16px #0c2a4405; background: #fff; transition: border-color .2s, box-shadow .2s; }
.route-card:hover { border-color: #96adbc; box-shadow: 0 12px 30px #0c2a440b; }
.route-card__heading { padding: 14px 24px; border-bottom: 1px solid #edf0f2; background: #f5f8f8; }
.route-card__direction { color: #486b80; font-size: 9px; letter-spacing: .17em; }
.route-card__days { padding: 3px 9px; border: 0; border-radius: 4px; color: #426852; background: #e9f1e9; font-size: 9px; }
.route-card__body { grid-template-columns: minmax(0, 1fr) 320px 186px; gap: 24px; padding: 22px 24px; }
.route-card__cities { font-size: 22px; }
.route-card__arrow { color: #b18b28; }
.route-card__stops { color: #617588; font-size: 11px; }
.time-block span { color: #647b8e; font-size: 8px; }
.time-block strong { color: #173c60; font-size: 25px; font-variant-numeric: tabular-nums; }
.duration-pill { border: 0; border-radius: 0; padding: 4px 10px; color: #516a7b; background: transparent; font-weight: 500; font-size: 9px; border-bottom: 1px dashed #b5c4cd; }
.route-card__side { position: relative; min-height: 88px; padding-left: 24px; border-left: 1px dashed #bfccd4; }
.price-block strong { font-size: 28px; }
.price-block span { color: #5e7281; font-size: 9px; }
.route-card__action { min-height: 40px; width: 100%; border-radius: 6px; background: var(--yellow); color: #233646; font-size: 11px; }
.route-card__action:hover { background: #f4c439; }
.route-card__tools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; padding: 10px 24px; border-top: 1px dashed #dce4e8; }
.route-card__hint { margin-right: auto; color: #718391; font-size: 10px; }
.route-tool { display: inline-flex; align-items: center; gap: 9px; min-height: 34px; padding: 3px 0; border: 0; color: #224d72; background: transparent; font-size: 11px; font-weight: 650; }
.route-tool:hover { text-decoration: underline; text-underline-offset: 4px; }
.route-save { color: #627586; }
.route-save span { color: #a27a0a; font-size: 19px; line-height: 1; }
.route-save[aria-pressed="true"] { color: #6d5409; }
.route-note { max-width: 740px; margin: 26px auto 0; font-size: 11px; }
.reference-benefits { position: relative; padding-top: 48px; padding-bottom: 52px; border-block: 1px solid #e4e8e1; background: #edf2ed; }
.reference-benefits::before { content: ''; position: absolute; top: 0; left: 50%; width: 64px; height: 3px; background: var(--yellow); transform: translateX(-50%); }
.benefits-grid { width: min(1100px, 100%); gap: 18px; }
.benefit-card { padding: 26px 22px; border: 1px solid #dae2d9; border-radius: 10px; box-shadow: none; }
.benefit-card__number { color: #a8b8b1; }
.benefit-card__icon { width: 44px; height: 44px; margin-bottom: 20px; border-radius: 50%; color: #214d6d; background: #f5edce; }
.benefit-card h3 { font-size: 15px; }
.benefit-card p { color: #576d78; }
.benefit-link { display: inline-block; margin-top: 16px; font-size: 11px; font-weight: 700; color: #204d6e; }
.benefit-link:hover { text-decoration: underline; }
.reference-contacts { padding-block: 60px; }
.reference-contact-details { padding-top: 18px; }
.contact-office-label { display: block; margin-bottom: 16px; color: #8a6d23; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.reference-map-link { border-style: dashed; color: #41627b !important; background: #f2f5f2; }
.reference-callback { border: 1px solid #dce5e8; border-top: 3px solid #d5b455; background: #fff; border-radius: 12px; }
.reference-callback input, .reference-callback textarea { min-height: 45px; background: #fafbf9; border-color: #d6e0e4; }
.reference-callback .btn { border-radius: 6px; background: #173c60; }
.site-footer { position: relative; padding-top: 50px; background: #0e2539; }
.site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: repeating-linear-gradient(120deg, #e6bb3e 0 28px, #0e2539 28px 33px); }
.footer-socials, .footer-bottom { border-color: #294154; }
.footer-title { color: #a3b6c4; }
.footer-links a, .footer-brand p { color: #bac7d0; }
.footer-bottom p { color: #a4b6c3; }
.social-link { width: 38px; height: 38px; border-radius: 8px; }
.back-to-top { background: #173c60; }
.page-intro { border-bottom: 1px solid #d9e1e3; }
.page-intro h1, .section h1 { letter-spacing: -.05em; }
.request-form, .contact-card { border-radius: 12px; box-shadow: none; border-color: #d8e3e6; }
@media (max-width: 1100px) {
  .route-card__body { grid-template-columns: minmax(0, 1fr) 280px 155px; gap: 18px; }
  .route-card__cities { font-size: 20px; }
  .route-card__side { padding-left: 18px; }
}
@media (max-width: 980px) {
  .route-card__body { grid-template-columns: 1fr 1fr; }
  .route-card__side { min-height: auto; padding: 14px 0 0; border-left: 0; border-top: 1px dashed #bfccd4; }
  .route-card__action { width: auto; min-width: 150px; }
  .booking-footnote { justify-content: center; text-align: center; }
}
@media (max-width: 640px) {
  .site-header__inner { min-height: 68px; }
  .reference-hero { padding: 34px 16px 24px; background-position: 64% center; }
  .reference-hero h1 { font-size: clamp(29px, 7.5vw, 39px); }
  .reference-hero .reference-pill { font-size: 8px; letter-spacing: .14em; }
  .journey-subtitle { margin-top: 16px; font-size: 11px; }
  .journey-line { gap: 10px; margin-top: 20px; font-size: 8px; }
  .journey-line__track { width: 38px; flex-shrink: 0; }
  .reference-booking { padding: 16px 10px 14px; }
  .booking-heading { padding-inline: 6px; }
  .booking-heading strong { font-size: 15px; }
  .booking-heading span { font-size: 8px; }
  .booking-footnote { font-size: 9px; gap: 8px; padding-top: 13px; }
  .booking-clocks { justify-content: center; gap: 5px; font-size: 9px; }
  .hero-link { padding-inline: 9px; font-size: 10px; }
  .section { width: calc(100% - 32px); }
  .reference-heading h2 { font-size: 30px; }
  .reference-routes { padding-block: 44px; }
  .route-filters { gap: 7px; }
  .chip { min-height: 36px; padding: 7px 12px; font-size: 10px; }
  [data-route-filter="saved"] { margin-left: 0; }
  .route-card__heading { padding: 12px 16px; }
  .route-card__direction { font-size: 8px; letter-spacing: .1em; }
  .route-card__body { grid-template-columns: 1fr; padding: 20px 16px 16px; gap: 20px; }
  .route-card__cities { font-size: 21px; }
  .route-card__times { text-align: left; }
  .route-card__tools { padding: 8px 16px; gap: 8px 20px; }
  .route-card__hint { display: none; }
  .route-tool { min-height: 40px; font-size: 10px; }
  .route-save { margin-left: auto; }
  .benefits-grid { gap: 12px; }
  .benefit-card { padding: 22px 15px; }
  .benefit-card h3 { font-size: 13px; }
  .benefit-card p { font-size: 11px; }
  .benefit-link { font-size: 10px; }
  .reference-contacts { padding-block: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}