:root{
  --paper:#f7f7f0;
  --white:#fffef9;
  --ink:#253e34;
  --green:#305b46;
  --muted:#7b8276;
  --line:#e2e5da;
  --accent:#db714b;
  --wash:#eef0e6;
  font-family:'DM Sans',sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none;
  font-optical-sizing:auto}
*{
  box-sizing:border-box}
body{
  margin:0}
button,input,a{
  -webkit-tap-highlight-color:transparent}
button,input{
  font:inherit}
button,a{
  touch-action:manipulation}
button{
  color:inherit;
  cursor:pointer}
button:disabled{
  cursor:default}
button:focus-visible,a:focus-visible,input:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px}
button{
  background:none;
  border:0}
a{
  color:inherit}
button svg,svg{
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round}
button:hover{
  color:var(--accent)}
[hidden]{
  display:none!important}
.skip-link{
  position:fixed;
  top:-100px;
  left:20px;
  background:var(--ink);
  color:white;
  padding:15px;
  z-index:50}
.skip-link:focus{
  top:12px}
.header{
  height:68px;
  margin:0 40px;
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--line);
  gap:28px}
.brand{
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:31px;
  font-weight:800;
  letter-spacing:-1.8px;
  line-height:1}
.brand svg{
  width:31px;
  height:31px;
  stroke-width:2.1}
.brand-dot{
  color:var(--accent)}
.brand-caption{
  font-size:12px;
  letter-spacing:.1px;
  color:var(--muted);
  border-left:1px solid var(--line);
  padding-left:25px}
.header nav{
  display:flex;
  gap:27px;
  align-items:center;
  margin-left:auto;
  font-size:12px;
  font-weight:500;
  height:100%}
.header nav>a{
  text-decoration:none;
  height:100%;
  display:flex;
  align-items:center;
  position:relative}
.nav-active:after{
  content:'';
  position:absolute;
  bottom:-1px;
  left:0;
  right:0;
  height:2px;
  background:var(--green)}
.header nav button{
  padding:0;
  display:flex;
  gap:8px}
.year{
  display:flex;
  gap:8px;
  align-items:center;
  font-size:11px;
  color:var(--green);
  border:1px solid #d8dfd0;
  border-radius:30px;
  padding:9px 13px;
  margin-left:17px}
.year>span,.live-dot{
  height:5px;
  width:5px;
  background:#789568;
  border-radius:50%;
  flex:none}
.intro{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding:20px 40px;
  max-width:1900px;
  margin:auto}
.eyebrow{
  display:flex;
  gap:9px;
  align-items:center;
  font-size:9px;
  font-weight:600;
  letter-spacing:1.8px;
  margin:0 0 14px}
.tiny-line{
  width:23px;
  height:1px;
  background:var(--green)}
h1{
  font-size:clamp(28px,2.65vw,44px);
  line-height:1.13;
  letter-spacing:-1.4px;
  margin:0;
  font-weight:500}
.heading-dot{
  color:var(--accent)}
.intro-copy{
  padding:0 25px 0 0}
.intro-copy>p{
  font-size:13px;
  line-height:1.8;
  color:#626d60;
  margin:0 0 8px}
.intro .eyebrow{margin-bottom:10px}
.intro-note{
  font-size:10px;
  color:#848c7d;
  display:flex;
  align-items:center;
  gap:7px}
.intro-note svg{
  width:20px;
  height:20px;
  stroke-width:1.2}
.explorer{
  margin:0 24px;
  display:grid;
  grid-template-columns:350px minmax(0,1fr);
  height:calc(100svh - 235px);
  min-height:550px;
  border:1px solid #dce0d3;
  border-radius:10px;
  overflow:hidden;
  background:var(--white);
  box-shadow:0 8px 30px #223c2d04}
.sidebar{
  display:flex;
  flex-direction:column;
  min-height:0;
  position:relative;
  z-index:3;
  border-right:1px solid #dce0d3;
  background:var(--white)}
.search-area{
  padding:14px 23px 12px;
  border-bottom:1px solid var(--line)}
.panel-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
  gap:4px}
.panel-heading h2{
  font-size:18px;
  font-weight:500;
  letter-spacing:-.5px;
  margin:0}
.text-button{
  font-size:10px;
  text-decoration:underline;
  text-underline-offset:3px;
  padding:3px 0;
  color:var(--muted)}
.station-fields{
  position:relative;
  border:1px solid #dce1d3;
  border-radius:6px;
  background:#fcfcf6}
.station-field{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 13px 12px;
  position:relative}
.station-field:first-child{
  border-bottom:1px solid #e7e9df}
.field-dot{
  border:1.5px solid var(--green);
  height:9px;
  width:9px;
  border-radius:50%;
  flex:none;
  margin-top:12px;
  background:#fcfcf6;
  z-index:1}
.destination-dot{
  background:var(--green);
  border-radius:2px;
  width:8px;
  height:8px;
  margin-left:1px}
.field-connector{
  position:absolute;
  border-left:1px dashed #a2ac96;
  height:49px;
  left:17px;
  top:38px}
.input-wrap{
  min-width:0;
  flex:1}
label{
  font-size:8px;
  font-weight:600;
  letter-spacing:1.25px;
  display:block;
  margin-bottom:5px}
label span:not([data-i18n]){
  font-size:7px;
  color:#92998b;
  letter-spacing:.7px;
  margin-left:7px}
.station-field input{
  width:100%;
  font-size:13px;
  border:0;
  background:none;
  padding:0;
  line-height:1.6;
  color:var(--ink);
  text-overflow:ellipsis;
  border-radius:1px}
.station-field input::placeholder{
  color:#919787}
.station-field input:focus{
  outline:none}
.station-field:focus-within{
  box-shadow:inset 0 0 0 1px #5c7c59}
.clear-field{
  font-size:20px;
  padding:0 2px;
  position:relative;
  z-index:1}
.swap{
  position:absolute;
  right:13px;
  top:50%;
  transform:translateY(-50%);
  width:27px;
  height:27px;
  border:1px solid #dfe4d5;
  background:var(--white);
  border-radius:50%;
  display:grid;
  place-items:center;
  z-index:2}
.swap svg{
  width:17px;
  height:17px}
.travel-period{
  margin-top:10px}
.period-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:18px;
  margin-bottom:4px;
  font-size:10px;
  font-weight:500}
.period-heading button{
  font-size:18px;
  padding:0 3px;
  line-height:1}
.period-fields{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:9px;
  padding:6px 11px;
  border:1px solid #dce1d3;
  border-radius:6px;
  background:#fcfcf6}
.period-fields>div{
  min-width:0}
.period-fields>span{
  color:var(--muted);
  font-size:12px}
.period-fields label{
  font-size:7px;
  margin-bottom:4px}
.period-fields input{
  display:block;
  min-width:0;
  width:100%;
  min-height:22px;
  padding:0;
  border:0;
  border-radius:2px;
  background:transparent;
  color:var(--ink);
  font-size:11px;
  color-scheme:light}
.date-input{position:relative}
.date-placeholder{display:none;position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:11px;color:var(--muted);pointer-events:none}
.date-input.is-empty:not(:focus-within) .date-placeholder{display:block}
.date-input.is-empty input:not(:focus){color:transparent}
.date-input.is-empty input:not(:focus)::-webkit-datetime-edit{color:transparent}
.period-fields input::-webkit-calendar-picker-indicator{
  padding:0;
  width:12px;
  opacity:.6;
  cursor:pointer}
.travel-period p{
  color:var(--muted);
  font-size:9px;
  line-height:1.5;
  margin:6px 0 0}
.type-filter{
  border:0;
  padding:0;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin:10px 0 0}
.type-filter legend{
  position:absolute;
  clip-path:inset(50%);
  height:1px;
  width:1px;
  overflow:hidden}
.type-filter button{
  padding:6px 6px;
  font-size:10px;
  font-weight:500;
  border:1px solid #e1e5d9;
  border-radius:4px;
  display:flex;
  align-items:center;
  gap:4px;
  transition:background .15s,border-color .15s}
.type-filter button[aria-pressed=true]{
  color:var(--white);
  background:var(--ink);
  border-color:var(--ink)}
.type-filter button:hover{
  border-color:var(--green);
  color:var(--green)}
.type-filter button[aria-pressed=true]:hover{
  color:white}
.type-filter svg{
  width:12px;
  height:12px}
.results-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 23px 8px;
  gap:10px}
.results-heading>div{
  display:flex;
  align-items:center;
  gap:8px}
.results-heading h3{
  font-size:11px;
  font-weight:500;
  line-height:1.4;
  margin:0}
.results-heading>span{
  font-size:9px;
  color:#7c8676;
  flex:none}
.results{
  flex:1;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:0 12px 12px;
  scrollbar-width:thin;
  scrollbar-color:#d9decf transparent;
  min-height:0}
.route-row{
  display:block;
  text-align:left;
  width:100%;
  padding:15px 12px 13px;
  border-bottom:1px solid #ebeee3;
  border-radius:4px;
  transition:background .16s,color .16s;
  position:relative}
.route-row:hover{
  background:#f1f3e9;
  color:var(--green)}
.route-row[aria-pressed=true]{
  background:#e9eedf;
  color:var(--green)}
.route-row[aria-pressed=true]:before{
  content:'';
  position:absolute;
  left:0;
  top:12px;
  bottom:12px;
  width:2px;
  background:var(--green);
  border-radius:2px}
.route-names{
  display:grid;
  grid-template-columns:minmax(0,1fr) 19px minmax(0,1fr);
  gap:7px;
  align-items:center;
  font-size:12px;
  font-weight:500;
  line-height:1.4}
.route-names>span:not(.route-arrow){
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap}
.route-arrow{
  color:#8e9c83;
  font-size:16px;
  font-weight:400}
.route-meta{
  display:flex;
  align-items:center;
  gap:5px;
  margin-top:9px}
.train-badge{
  font-size:8px;
  font-weight:600;
  border-radius:3px;
  background:#e9ece2;
  color:#627256;
  padding:3px 5px;
  line-height:1;
  letter-spacing:.2px}
.train-badge.ice{
  background:#f6eae1;
  color:#9d634b}
.train-badge.night{
  background:#e9e9ef;
  color:#646782}
.route-trains{
  margin-left:auto;
  font-size:9px;
  color:#8a9381}
.route-row .row-chevron{
  margin-left:3px;
  font-size:14px;
  color:#7c8a6d}
.sidebar-foot{
  padding:14px 20px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:7px;
  font-size:9px;
  color:#7d8774;
  background:#fafbf4}
.sidebar-foot svg{
  width:14px;
  height:14px;
  stroke-width:1.1}
.sidebar-foot button{
  border:1px solid #a5ae9b;
  width:13px;
  height:13px;
  border-radius:50%;
  font:9px Georgia,serif;
  padding:0;
  margin-left:auto}
.map-panel{
  position:relative;
  min-width:0;
  background:#e9eddf;
  isolation:isolate}
#map{
  position:absolute;
  inset:0}
.map-heading{
  position:absolute;
  top:26px;
  left:28px;
  pointer-events:none;
  z-index:1;
  text-shadow:0 1px 10px #f8f8f0,0 1px 10px #f8f8f0,0 1px 5px #f8f8f0}
.map-heading .eyebrow{
  font-size:8px;
  letter-spacing:1.6px;
  margin-bottom:8px;
  color:#637b58}
.map-heading h2{
  font-size:21px;
  letter-spacing:-.7px;
  font-weight:500;
  margin:0 0 6px}
.map-heading p{
  font-size:10px;
  color:#6d7f61;
  margin:0}
.maplibregl-ctrl-top-right{
  top:64px;
  right:13px}
.maplibregl-ctrl-group{
  border:1px solid #d6decd;
  box-shadow:0 2px 6px #2b48290b!important;
  border-radius:5px!important;
  overflow:hidden}
.maplibregl-ctrl-group button{
  width:34px;
  height:35px;
  background:var(--white)}
.maplibregl-ctrl-group button+button{
  border-top:1px solid #e1e5d9}
.maplibregl-ctrl-attrib{
  font-size:8px!important;
  background:#f7f7efcf!important;
  color:#7a826e!important}
.maplibregl-ctrl-attrib a{
  color:inherit!important}
.maplibregl-ctrl-scale{
  font-size:8px!important;
  color:#7a826e;
  border-color:#a6ae9a!important;
  background:transparent!important;
  margin-left:23px!important;
  margin-bottom:8px!important}
.fit-map{
  position:absolute;
  right:23px;
  top:22px;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  background:var(--white);
  border:1px solid #d6decd;
  border-radius:5px;
  box-shadow:0 2px 6px #2b48290b;
  z-index:2}
.fit-map svg{
  width:18px;
  height:18px;
  stroke-width:1.25}
.map-legend{
  position:absolute;
  bottom:35px;
  left:24px;
  display:flex;
  align-items:center;
  gap:8px;
  background:#fffef8ed;
  border:1px solid #dce2d1;
  padding:11px 13px;
  font-size:9px;
  border-radius:5px;
  pointer-events:none}
.legend-line{
  height:2px;
  width:22px;
  position:relative;
  background:#65815a}
.legend-line:before,.legend-line:after{
  content:'';
  position:absolute;
  top:-2px;
  height:6px;
  width:6px;
  border:1.5px solid #65815a;
  border-radius:50%;
  background:#fffef8}
.legend-line:before{
  left:0}
.legend-line:after{
  right:0}
.legend-separator{
  height:11px;
  width:1px;
  background:#d8dfce;
  margin:0 1px}
.legend-muted{
  color:#8a9381}
.map-status{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  padding:15px 20px;
  background:var(--white);
  box-shadow:0 8px 30px #234b3e14;
  border:1px solid var(--line);
  border-radius:6px;
  max-width:80%;
  font-size:12px;
  line-height:1.7;
  text-align:center;
  z-index:5}
.map-status button{
  display:block;
  margin:7px auto 0;
  text-decoration:underline}
.route-detail{
  position:absolute;
  bottom:34px;
  left:24px;
  width:min(390px,calc(100% - 92px));
  padding:23px;
  background:var(--white);
  border:1px solid #d8dfcd;
  box-shadow:0 8px 35px #223e3420;
  border-radius:7px;
  z-index:4;
  max-height:calc(100% - 58px);
  overflow:auto}
.detail-tools{
  position:absolute;
  right:8px;
  top:6px;
  display:flex;
  align-items:center;
  gap:2px}
.detail-tools button{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  padding:0;
  border-radius:4px;
  color:#8b9582}
.detail-tools button:hover{background:var(--wash);color:var(--ink)}
.detail-tools [role="status"]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.detail-close{
  font-size:24px;
  color:#8b9582}
.route-detail .eyebrow{
  padding-right:54px;
  font-size:8px;
  letter-spacing:1.5px;
  color:#829273;
  margin-bottom:16px}
.detail-stations{
  position:relative;
  display:grid;
  gap:15px;
  padding-left:21px;
  margin:0 0 18px}
.detail-stations:before{
  content:'';
  position:absolute;
  left:3px;
  top:8px;
  bottom:8px;
  border-left:1px solid #96a389}
.detail-stations>div{
  position:relative;
  font-size:17px;
  line-height:1.3;
  letter-spacing:-.4px}
.detail-stations>div:before{
  content:'';
  height:7px;
  width:7px;
  border:1.5px solid var(--green);
  position:absolute;
  left:-21px;
  top:6px;
  background:var(--white);
  border-radius:50%}
.detail-stations>div:last-child:before{
  background:var(--green)}
.detail-stations small{
  font-size:9px;
  color:#8a9381;
  display:block;
  margin-top:3px;
  letter-spacing:0}
.station-intermediates{min-width:0;color:var(--muted);font-size:11px;line-height:1.5}
.station-intermediates summary{cursor:pointer;padding:3px 0;width:fit-content}
.station-intermediates summary:hover{color:var(--green)}
.station-intermediates ol{list-style:none;padding:0;margin:8px 0}
.station-intermediates li{position:relative;padding:5px 0;color:var(--ink)}
.station-intermediates li:before{content:'';position:absolute;left:-19px;top:11px;width:5px;height:5px;border:1px solid #96a389;border-radius:50%;background:var(--white)}
.station-intermediates .detail-calendar-caption{margin:6px 0 0;font-size:10px}
.detail-trains{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  max-height:105px;
  overflow:auto;
  padding:0 0 2px}
.detail-trains span{
  font-size:10px;
  background:var(--wash);
  padding:6px 8px;
  border-radius:3px}
.detail-availability{font-size:11px;line-height:1.5;color:var(--muted);margin:7px 0 12px}
.detail-note{
  font-size:10px;
  line-height:1.6;
  color:#8a9381;
  margin:15px 0 0;
  border-top:1px solid var(--line);
  padding-top:12px}
.detail-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:18px;
  margin-top:16px;
  font-size:10px}
.detail-actions button{
  padding:0;
  display:flex;
  gap:6px;
  align-items:center}
.detail-actions a{
  text-underline-offset:3px}
.detail-booking{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:16px;
  font-size:10px}
.detail-booking-note{
  font-size:10px;
  line-height:1.6;
  color:var(--ink);
  margin:0}
.detail-book{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 13px;
  border-radius:4px;
  background:var(--ink);
  color:var(--white);
  text-decoration:none;
  font-weight:600}
.detail-book:hover{
  background:#3c594a}
.maplibregl-popup-content{
  padding:9px 12px;
  font:11px 'DM Sans',sans-serif;
  background:var(--white);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:4px;
  box-shadow:0 3px 10px #234b3e12}
.maplibregl-popup-tip{
  border-top-color:var(--white)!important}
.footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:17px 40px 18px;
  font-size:9px;
  color:#89917e}
.footer>span{
  font-size:10px}
.footer>div{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:24px}
.footer button{
  font-size:9px;
  padding:0;
  display:flex;
  gap:6px}
.footer>div>a{
  font-size:11px;
  text-underline-offset:3px}
.suggestions{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% - 2px);
  padding:5px;
  background:var(--white);
  border:1px solid #cfd8c4;
  box-shadow:0 12px 25px #243d3120;
  border-radius:5px;
  z-index:20;
  max-height:245px;
  overflow:auto}
.suggestions button{
  display:flex;
  justify-content:space-between;
  align-items:center;
  text-align:left;
  gap:8px;
  width:100%;
  padding:11px 10px;
  border-radius:3px;
  font-size:12px}
.suggestions button[aria-selected=true],.suggestions button:hover{
  background:#edf1e5;
  color:var(--green)}
.suggestions small{
  font-size:9px;
  color:#87927b}
.suggestions p{
  font-size:11px;
  color:#87927b;
  margin:12px}
.loading-text,.empty-state{
  padding:20px 12px;
  font-size:12px;
  line-height:1.8;
  color:#7c8870}
.empty-state h4{
  font-size:15px;
  color:var(--green);
  margin:0 0 7px;
  font-weight:500}
.empty-state button{
  border:1px solid #d6dfcc;
  border-radius:4px;
  padding:8px 12px;
  margin-top:14px;
  font-size:11px}
.mobile-list-toggle{
  display:none}
dialog{
  border:1px solid #d5ddca;
  background:var(--white);
  color:var(--ink);
  border-radius:10px;
  padding:40px;
  width:min(560px,calc(100% - 32px));
  max-height:85svh;
  box-shadow:0 20px 100px #183a3430}
dialog::backdrop{
  background:#1d392961;
  backdrop-filter:blur(3px)}
.dialog-close{
  position:absolute;
  right:15px;
  top:10px;
  font-size:28px;
  color:#85927b}
dialog h2{
  font-size:34px;
  font-weight:500;
  letter-spacing:-1.2px;
  line-height:1.16;
  margin:20px 0}
dialog p{
  font-size:12px;
  line-height:1.9;
  color:#78846f}
dialog h3{
  font-size:14px;
  margin:23px 0 8px;
  font-weight:500}
dialog a{
  text-underline-offset:3px}
.data-downloads{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin-top:25px;
  font-size:11px}
.noscript{
  position:fixed;
  bottom:15px;
  left:20px;
  right:20px;
  background:var(--white);
  padding:20px;
  border:1px solid var(--line);
  z-index:50;
  font-size:13px}
@media(min-width:1650px){
  .header{
  margin:0 48px}
.intro{
  padding:24px 48px}
.explorer{
  grid-template-columns:375px 1fr;
  margin:0 32px;
  height:calc(100svh - 245px)}
.search-area{
  padding:18px 27px 14px}
.results-heading{
  padding:12px 27px 8px}
.route-row{
  padding:18px 16px}
.route-names{
  font-size:13px}
.route-trains{
  font-size:10px}
.map-heading{
  top:32px;
  left:32px}
}
@media(max-width:1100px){
  .header{
  margin:0 25px;
  gap:20px}
.brand-caption{
  display:none}
.year{
  margin-left:0}
.intro{
  padding:20px 25px}
.intro-copy{
  padding-right:0}
.intro-copy>p{
  font-size:12px}
.intro-note{
  font-size:9px}
.explorer{
  margin:0 16px;
  grid-template-columns:320px 1fr}
.search-area{
  padding:14px 18px 12px}
.map-heading{
  left:20px}
.map-heading h2{
  font-size:18px}
.map-legend{
  left:18px;
  gap:6px;
  padding:10px}
.legend-muted{
  max-width:125px}
.footer{
  padding:17px 25px}
}
@media(max-width:800px){
  .header{
  height:62px;
  margin:0 20px;
  gap:16px}
.brand{
  font-size:31px}
.brand svg{
  width:30px;
  height:30px}
.header nav{
  gap:18px;
  font-size:11px}
.year{
  font-size:9px;
  padding:7px 9px}
.intro{
  padding:20px}
.intro-copy{
  max-width:255px}
.intro-copy>p{
  font-size:11px}
.intro-note{
  display:none}
h1{
  font-size:29px;
  letter-spacing:-1.3px;
  max-width:320px}
.eyebrow{
  font-size:8px;
  letter-spacing:1.3px}
.explorer{
  grid-template-columns:290px 1fr;
  height:calc(100svh - 218px);
  min-height:540px;
  margin:0 12px}
.search-area{
  padding:12px 14px 10px}
.panel-heading h2{
  font-size:17px}
.panel-heading{
  margin-bottom:10px}
.type-filter{
  gap:5px}
.type-filter button{
  padding:6px 4px;
  font-size:9px}
.results-heading{
  padding:10px 18px 8px}
.results-heading h3{
  font-size:10px}
.route-names{
  font-size:11px;
  gap:5px}
.results{
  padding:0 7px 10px}
.route-row{
  padding:14px 10px}
.map-heading{
  top:22px;
  left:18px;
  right:55px}
.map-heading h2{
  font-size:17px;
  line-height:1.3}
.map-heading p{
  font-size:9px;
  line-height:1.5}
.map-legend{
  font-size:8px;
  left:12px;
  bottom:30px}
.legend-separator,.legend-muted{
  display:none}
.route-detail{
  left:12px;
  width:calc(100% - 60px);
  padding:20px 17px}
.detail-stations>div{
  font-size:15px}
.detail-actions{
  gap:12px;
  flex-wrap:wrap}
}
@media(max-width:740px){
  .header{
  height:58px;
  margin:0 18px}
.brand{
  font-size:27px}
.brand svg{
  width:27px;
  height:27px}
.header nav>a{
  display:none}
.header nav{
  gap:0;
  font-size:10px}
.header nav button{
  gap:5px}
.year{
  font-size:8px;
  padding:7px 8px;
  margin-left:0;
  gap:5px}
.intro{
  display:block;
  padding:16px 19px 18px}
.intro .eyebrow{
  font-size:7px;
  letter-spacing:1.3px;
  margin-bottom:8px}
h1{
  font-size:clamp(27px,4.6vw,32px);
  letter-spacing:-1.2px;
  max-width:520px}
.intro-copy{
  max-width:none;
  margin-top:8px}
.intro-copy>p{
  font-size:11px;
  line-height:1.6;
  margin:0}
.intro-copy br{
  display:none}
.explorer{
  display:flex;
  flex-direction:column;
  position:relative;
  min-height:540px;
  height:calc(100svh - 225px);
  margin:0 10px;
  border-radius:8px}
.sidebar{
  border-right:0;
  flex:none;
  position:static;
  z-index:auto}
.search-area{
  padding:12px 16px 10px}
.panel-heading{
  margin-bottom:10px}
.panel-heading h2{
  font-size:16px}
.station-fields{
  display:grid;
  grid-template-columns:1fr 1fr}
.station-field{
  padding:10px 10px;
  gap:8px}
.station-field:first-child{
  border-bottom:0;
  border-right:1px solid var(--line)}
.station-field input{
  font-size:11px}
.station-field label{
  font-size:7px;
  letter-spacing:.8px}
.station-field label span:not([data-i18n]){
  display:none}
.field-dot{
  width:7px;
  height:7px}
.destination-dot{
  width:6px;
  height:6px}
.field-connector{
  display:none}
.swap{
  right:auto;
  left:50%;
  transform:translate(-50%,-50%);
  width:23px;
  height:23px}
.swap svg{
  transform:rotate(90deg);
  width:15px;
  height:15px}
.type-filter{
  flex-wrap:nowrap;
  gap:5px;
  margin-top:12px}
.type-filter button{
  font-size:9px;
  padding:7px 8px;
  white-space:nowrap}
.results-heading,.results,.sidebar-foot{
  display:none}
.map-panel{
  flex:1;
  min-height:370px;
  isolation:auto}
.map-heading{
  top:20px;
  left:18px;
  right:65px}
.map-heading h2{
  font-size:18px}
.map-heading p{
  font-size:9px}
.map-heading .eyebrow{
  font-size:7px;
  margin-bottom:7px}
.maplibregl-ctrl-top-right{
  right:3px;
  top:55px}
.fit-map{
  right:13px;
  top:13px}
.map-legend{
  bottom:79px;
  left:14px}
.mobile-list-toggle{
  display:flex;
  position:absolute;
  bottom:30px;
  left:14px;
  right:14px;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:13px 16px;
  background:var(--ink);
  color:var(--white);
  border-radius:5px;
  font-size:11px;
  box-shadow:0 4px 16px #243c3420;
  z-index:5}
.mobile-list-toggle:hover{
  color:white;
  background:#37614b}
.mobile-list-toggle>span:last-child{
  margin-left:auto}
#mobile-count{
  margin-right:auto;
  opacity:.6;
  font-size:9px}
.footer{
  padding:15px 19px 20px;
  flex-wrap:wrap;
  gap:10px;
  font-size:8px}
.footer>span{
  display:block;
  font-size:11px}
.footer>div{
  width:100%;
  justify-content:space-between}
.footer button{
  font-size:8px}
.route-detail{
  bottom:83px;
  left:14px;
  width:calc(100% - 72px);
  max-height:calc(100% - 110px)}
.explorer.list-open .results-heading{
  display:flex}
.explorer.list-open .results{
  display:block;
  position:absolute;
  top:calc(var(--search-height,164px) + 40px);
  bottom:0;
  left:0;
  right:0;
  background:var(--white);
  z-index:7;
  padding:0 14px 70px}
.explorer.list-open .results-heading{
  position:absolute;
  top:var(--search-height,164px);
  left:0;
  right:0;
  height:40px;
  background:var(--white);
  z-index:8;
  border-top:1px solid var(--line)}
.explorer.list-open .mobile-list-toggle{
  position:absolute;
  bottom:14px;
  z-index:9}
.explorer.list-open .route-row{
  padding:16px 10px}
.explorer.list-open .route-names{
  font-size:13px}
.suggestions{
  max-height:240px;
  min-width:calc(100% + 1px);
  font-size:11px}
.suggestions button{
  font-size:11px;
  padding:10px 7px}
.suggestions small{
  font-size:8px}
.maplibregl-ctrl-scale{
  margin-bottom:9px!important}
.clear-field{
  font-size:18px;
  padding:0}
.route-trains{
  font-size:10px}
.route-meta .train-badge{
  font-size:9px}
dialog{
  padding:30px 25px}
dialog h2{
  font-size:30px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
  scroll-behavior:auto!important;
  transition:none!important;
  animation:none!important}
}


/* Compact connection details: source dates and stops remain one disclosure away. */
.detail-condition{display:flex;flex-wrap:wrap;gap:5px 12px;margin:10px 0 14px;color:#536d4a;font-size:11px;line-height:1.5}
.detail-fold{border-top:1px solid var(--line);font-size:12px}
.detail-fold summary{cursor:pointer;padding:12px 0;color:var(--ink);font-weight:500}
.detail-fold summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.detail-calendar-caption{font-size:11px;line-height:1.5;color:var(--muted);margin:0 0 9px}
.detail-dates{display:flex;flex-wrap:wrap;gap:5px;max-height:150px;overflow:auto;margin-bottom:12px}
.detail-dates time{font-size:10px;padding:5px 7px;border-radius:3px;background:var(--wash);font-variant-numeric:tabular-nums}
.detail-stops{padding:0 0 0 20px;max-height:160px;overflow:auto;margin:0 0 12px;line-height:1.8;color:var(--muted)}
.detail-path-list{max-height:340px;overflow:auto;overscroll-behavior:contain}
.detail-path{padding:0 0 12px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.detail-path h4{font-size:12px;margin:0 0 8px}
.detail-train-days summary{font-size:11px;line-height:1.6;padding:7px 0}
.detail-book[aria-disabled="true"]{opacity:.55;cursor:wait}
.route-detail .detail-note{border-top:0;padding-top:0;margin-top:11px}
.route-detail .detail-actions{margin-top:12px}
.detail-booking{flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px;margin-top:0}

/* Keep the language control compact at the far right of the header. */
.header>.language-picker{margin-left:16px}
@media(max-width:600px){.header>.language-picker{margin-left:8px}.header nav{gap:12px}}
@media(max-width:440px){
  .header .brand{font-size:23px;letter-spacing:-1.2px;gap:8px;white-space:nowrap;flex:none}
  .header .brand svg{width:24px;height:24px}
  .header nav button{white-space:nowrap;gap:4px}
}
@media(max-width:360px){
  .header .brand{font-size:19px;gap:5px}
  .header .brand svg{width:20px;height:20px}
  .header nav{font-size:9px}
  .header>.language-picker{margin-left:4px}
}
@media(max-width:360px){
  .header>.language-picker{margin-left:2px}
  .header>.language-picker summary{padding:4px;gap:3px;min-height:36px}
  .header>.language-picker summary>svg:last-child{display:none}
  .header .language-code{gap:3px;font-size:9px}
  .type-filter{flex-wrap:wrap}
}


/* Radreise discovery layout */
.header{padding-top:18px;padding-bottom:18px}
.intro{display:grid;position:relative;padding-top:27px;padding-bottom:27px;row-gap:12px;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
.intro h1{font-size:clamp(28px,3vw,44px);max-width:580px;line-height:1.1}
.intro-copy{max-width:600px}.intro-copy p{font-size:16px;line-height:1.65}
.travel-assurance{display:flex;align-items:center;gap:9px;font-size:12px;color:#61765a;grid-column:2;grid-row:2;margin:0}
.intro>div:first-child{grid-row:1 / 3}.intro-copy{align-self:end}
.bike-icon{width:25px;height:20px;flex:none;vertical-align:middle}
.map-heading h2{display:flex;gap:10px;align-items:flex-start;max-width:490px;font-size:clamp(17px,1.65vw,24px);line-height:1.25}
.map-heading h2 .bike-icon{width:30px;height:25px;margin-top:1px}
.map-heading{background:linear-gradient(110deg,rgba(245,246,236,.94),rgba(245,246,236,.7) 70%,transparent);padding:14px 22px 14px 14px;border-radius:8px;max-width:calc(100% - 95px)}
.route-row{padding-top:18px;padding-bottom:18px}.route-names{font-size:13px}
.from-chosen .destination-only{display:block}.from-chosen .destination-only>span:first-child,.from-chosen .destination-only>.route-arrow{display:none}
.to-chosen .destination-only{display:block}.to-chosen .destination-only>span:last-child,.to-chosen .destination-only>.route-arrow{display:none}
.destination-only{font-size:16px;font-weight:600}
.route-meta{gap:7px;flex-wrap:wrap}.route-meta .bike-label{display:flex;gap:6px;align-items:center;font-size:11px;color:#5d7751;margin-right:auto}
.bike-label .bike-icon{width:21px;height:17px}.route-meta .row-chevron{margin-left:auto}
.detail-bike-status{display:flex;gap:9px;align-items:center;font-size:14px;color:#466a43;font-weight:500;margin:0 0 20px}
.route-bike-marker{background:#fffdf4;color:#bd6241;width:40px;height:40px;display:grid;place-items:center;border:1.5px solid #d5714d;border-radius:50%;box-shadow:0 2px 8px #223c3020;pointer-events:none}
.route-bike-marker .bike-icon{width:27px;height:23px}
@media(max-width:1000px){.travel-assurance{grid-column:1 / -1;grid-row:auto}.intro>div:first-child{grid-row:auto}.intro{row-gap:10px;grid-template-columns:1fr}.intro-copy p{font-size:14px}.map-heading{padding:10px}.map-heading h2{font-size:19px}}
@media(max-width:600px){.intro{padding-top:22px;padding-bottom:22px}.intro h1{font-size:32px}.travel-assurance{font-size:11px;align-items:flex-start}.map-heading h2{font-size:16px}.map-heading h2 .bike-icon{width:23px;height:21px}.map-heading p{font-size:11px}}

/* Optional search controls stay visible on desktop and fold away on phones. */
.search-options>summary{display:none}

@media(max-width:740px){
  .header{display:grid;grid-template-columns:minmax(0,1fr) auto auto;height:auto;min-height:64px;margin:0 16px;padding:8px 0;gap:6px}
  .brand{font-size:25px;gap:7px;letter-spacing:-1.2px}
  .brand svg{width:25px;height:25px}
  .header nav{margin-left:0;font-size:10px}
  .header nav button{min-height:44px;padding:5px}
  .language-picker summary{min-height:44px;min-width:44px;padding:6px}
  .language-options button{min-height:44px;font-size:14px}
  .intro{padding:18px 18px 20px;row-gap:10px}
  .intro .eyebrow{display:none}
  .intro h1{font-size:28px;line-height:1.12;letter-spacing:-1px;max-width:500px}
  .intro-copy{margin:0;padding:0;max-width:none}
  .intro-copy>p{font-size:14px;line-height:1.5}
  .travel-assurance{font-size:12px;line-height:1.45;gap:8px}
  .travel-assurance .bike-icon{width:24px;height:22px}
  .explorer{height:auto;min-height:0;overflow:hidden;margin:0 10px}
  .search-area{padding:16px}
  .panel-heading h2{font-size:19px;line-height:1.3}
  .panel-heading{margin-bottom:12px}
  .text-button{min-height:44px;font-size:12px}
  .station-fields{grid-template-columns:minmax(0,1fr)}
  .station-field{padding:11px 14px;min-height:65px;gap:10px;min-width:0}
  .station-field:first-child{border-right:0;border-bottom:1px solid var(--line)}
  .station-field label{font-size:10px;line-height:1.3;letter-spacing:1px}
  .station-field input{font-size:16px;line-height:1.5;min-height:28px}
  .station-field .input-wrap{min-width:0;padding-right:26px}
  .station-field .clear-field{width:36px;min-height:44px;font-size:23px}
  .field-dot{width:9px;height:9px;flex:none}
  .destination-dot{width:8px;height:8px}
  .swap{left:auto;right:10px;width:40px;height:40px;transform:translateY(-50%);z-index:2}
  .swap svg{transform:none;width:20px;height:20px}
  .search-options{margin-top:10px}
  .search-options>summary{display:flex;align-items:center;gap:8px;min-height:44px;font-size:14px;cursor:pointer;list-style:none;padding:6px 0;color:var(--ink)}
  .search-options>summary::-webkit-details-marker{display:none}
  .search-options>summary:after{content:'+';font-size:22px;margin-left:auto;color:var(--green)}
  .search-options[open]>summary:after{content:'−'}
  #active-filter-count{background:var(--wash);border-radius:12px;padding:3px 7px;font-size:11px;white-space:nowrap}
  .search-options>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .period-heading{font-size:13px;min-height:30px}
  .period-heading button{min-width:44px;min-height:44px}
  .period-fields{padding:8px 10px;gap:6px;overflow:hidden}
  .period-fields label{font-size:10px}
  .period-fields input{font-size:16px;min-height:36px;max-width:100%}
  .period-fields input::-webkit-calendar-picker-indicator{width:20px;height:20px;padding:4px}
  .date-placeholder{font-size:14px}
  .travel-period p{font-size:12px;line-height:1.5}
  .type-filter{flex-wrap:wrap;gap:7px;margin-top:12px}
  .type-filter button{font-size:13px;min-height:44px;padding:10px 12px}
  .suggestions{font-size:16px;max-height:min(40dvh,300px)}
  .suggestions button{font-size:15px;min-height:48px;padding:12px 10px;line-height:1.35}
  .suggestions button>span{overflow-wrap:anywhere}
  .suggestions small{font-size:11px;flex:none}
  .map-panel{flex:none;height:68svh;min-height:440px;max-height:700px}
  .map-heading{top:12px;left:12px;right:68px;max-width:none;padding:10px;border-radius:6px}
  .map-heading h2{font-size:16px;line-height:1.3;gap:7px}
  .map-heading p{font-size:12px;line-height:1.4;margin-top:5px}
  .fit-map{width:44px;height:44px;top:12px;right:12px}
  .maplibregl-ctrl-top-right{top:64px;right:2px}
  .maplibregl-ctrl-group button{width:44px;height:44px}
  .mobile-list-toggle{bottom:30px;left:12px;right:12px;min-height:48px;padding:12px 16px;font-size:14px;border-radius:7px}
  #mobile-count{font-size:12px}
  .explorer.list-open .results-heading{height:48px;padding:10px 16px}
  .results-heading h3{font-size:13px}
  .results-heading>span{font-size:12px}
  .explorer.list-open .results{top:calc(var(--search-height,230px) + 48px);padding:0 12px 80px;overscroll-behavior:contain}
  .explorer.list-open .route-row{min-height:86px;padding:16px 12px}
  .explorer.list-open .route-names{font-size:14px;gap:7px}
  .explorer.list-open .destination-only{font-size:17px}
  .route-meta .bike-label{font-size:12px}
  .route-meta .train-badge{font-size:10px}
  .route-detail{position:fixed;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));width:auto;max-height:82vh;max-height:82dvh;padding:20px 18px;border-radius:16px;z-index:30;overscroll-behavior:contain;scroll-padding-top:75px;box-shadow:0 0 0 100vmax #203b331c,0 8px 35px #223e3430}
  .detail-topbar{position:sticky;top:-20px;margin:-20px -18px 16px;padding:16px 18px;background:var(--white);z-index:2;border-bottom:1px solid var(--line)}
  .detail-topbar .eyebrow{margin:0;min-height:32px;display:flex;align-items:center;padding-right:92px;font-size:10px;line-height:1.5;letter-spacing:1px}
  .detail-topbar .detail-tools{top:9px;right:8px;gap:4px}
  .detail-tools button{width:44px;height:44px}
  .detail-close{font-size:28px}
  .detail-bike-status{font-size:14px;margin-bottom:18px}
  .detail-stations>div{font-size:21px;overflow-wrap:anywhere}
  .detail-stations small{font-size:12px}
  .station-intermediates summary{font-size:14px;min-height:44px;padding-top:10px;padding-bottom:10px}
  .station-intermediates li{font-size:14px;line-height:1.6}
  .detail-trains>span{font-size:12px}
  .detail-condition{font-size:13px;line-height:1.5}
  .detail-fold summary{min-height:48px;padding:15px 0;font-size:15px}
  .detail-calendar-caption{font-size:12px}
  .detail-dates time{font-size:12px;padding:7px 9px}
  .detail-booking{gap:12px;padding-top:16px}
  .detail-book{min-height:48px;font-size:15px;padding:13px 19px}
  .detail-booking-note{font-size:13px;line-height:1.6}
  .route-detail .detail-note{font-size:12px;line-height:1.6}
  .footer{font-size:12px;line-height:1.5;padding:18px 18px max(20px,env(safe-area-inset-bottom));gap:12px}
  .footer>span{font-size:13px}
  .footer>div{flex-wrap:wrap;justify-content:flex-start;gap:6px 18px;align-items:center}
  .footer>div>span{width:100%}
  .footer button,.footer a{font-size:12px;min-height:36px;display:inline-flex;align-items:center}
  dialog{width:calc(100% - 20px);max-width:600px;max-height:90vh;max-height:90dvh;margin:auto;padding:24px 20px;border-radius:14px;font-size:14px}
  dialog h2{font-size:28px;line-height:1.2}
  dialog h3{font-size:17px}
  dialog p{font-size:14px;line-height:1.7}
  .dialog-close{width:44px;height:44px;top:8px;right:8px}
}
@media(max-width:359px){
  .header{grid-template-columns:minmax(0,1fr) auto;gap:4px;margin:0 12px}.brand{font-size:23px;gap:5px}.brand svg{width:23px;height:23px}
  .header nav{display:none}.language-picker summary{padding:4px;gap:3px}
  .intro h1{font-size:26px}.intro{padding-left:16px;padding-right:16px}
  .period-fields{grid-template-columns:minmax(0,1fr);gap:8px}.period-fields>span{display:none}
}

/* First visit: actionable guidance on the map; normal compact title after a
   station or journey is selected. The full-network fit control stays available. */
.map-heading.has-guidance{width:410px;max-width:calc(100% - 105px);padding:20px;background:#fffef8f5;border:1px solid #d9e1d1;box-shadow:0 5px 22px #203b3312;pointer-events:auto;text-shadow:none;border-radius:10px}
.has-guidance #map-title{font-size:22px;line-height:1.25;margin-bottom:10px}
#map-guide>p{font-size:15px;line-height:1.6;color:var(--ink);margin:0 0 14px}
.has-guidance #map-subtitle{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:12px}
@media(max-width:740px){
  .map-heading.has-guidance{width:auto;max-width:none;padding:14px;right:68px}
  .has-guidance #map-title{font-size:17px;margin-bottom:8px}
  #map-guide>p{font-size:13px;line-height:1.5;margin-bottom:10px}
  .has-guidance #map-subtitle{font-size:11px;margin-top:10px;padding-top:8px}
}

.map-heading #map-next-step{font-size:14px;font-weight:500;color:var(--ink);line-height:1.5;margin:6px 0 8px}
@media(max-width:740px){.map-heading #map-next-step{font-size:13px;margin:5px 0 7px}}

/* Start directly with search and map; keep the page title accessible. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.explorer{margin-top:18px;height:calc(100svh - 143px)}
@media(min-width:1500px){.explorer{height:calc(100svh - 155px)}}
@media(max-width:740px){.explorer{margin-top:12px;height:auto}}