:root {
  --navy: #073b4c;
  --blue: #087ea4;
  --cyan: #52b9d4;
  --sand: #f4efe6;
  --ink: #17323c;
  --muted: #647981;
  --white: #fff;
  --green: #239867;
  --shadow: 0 18px 50px rgba(7, 59, 76, .12);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 90% 5%, rgba(82,185,212,.22), transparent 30%),
    linear-gradient(180deg, #f7fbfc, #edf5f6);
  color: var(--ink);
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.topbar {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(12px, env(safe-area-inset-top)) 18px 10px;
  color: var(--navy);
  font-weight: 800;
  letter-spacing: .02em;
}
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-right: 8px;
  border-radius: 50% 50% 50% 12px;
  background: var(--navy);
  color: white;
}
main { width: min(100%, 620px); margin: auto; padding: 12px 18px calc(30px + env(safe-area-inset-bottom)); }
.screen { display: none; animation: rise .25s ease-out; }
.screen.active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
h1 { margin: 6px 0 12px; font-size: clamp(30px, 8vw, 44px); line-height: 1.03; letter-spacing: -.04em; }
h2 { margin: 4px 0; }
.eyebrow { margin: 0; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 900; color: var(--blue); }
.hero { padding: 42px 4px 30px; }
.hero p:last-child, .permission-card > p { color: var(--muted); font-size: 18px; line-height: 1.5; }
.language-grid { display: grid; gap: 12px; }
.language-choice, .route-card {
  width: 100%; border: 1px solid rgba(7,59,76,.09); background: white; color: var(--ink);
  border-radius: 18px; padding: 18px; text-align: left; box-shadow: var(--shadow); font-weight: 800;
}
.language-choice { display: flex; gap: 16px; align-items: center; font-size: 18px; }
.language-choice span { font-size: 30px; }
.primary, .secondary, .support-button, .text-button {
  width: 100%; min-height: 52px; border: 0; border-radius: 15px; padding: 13px 16px; font-weight: 850; cursor: pointer;
}
.primary { background: var(--blue); color: white; box-shadow: 0 10px 24px rgba(8,126,164,.25); }
.primary:disabled { opacity: .4; box-shadow: none; }
.secondary { background: #e5f0f3; color: var(--navy); }
.icon-button, .text-button { width: auto; min-height: 40px; background: white; color: var(--navy); border: 1px solid #dce8ea; border-radius: 12px; padding: 8px 12px; }
.instruction-list { display: grid; gap: 11px; margin: 28px 0; }
.instruction-list label, .instruction-list p {
  margin: 0; padding: 16px; border-radius: 14px; background: white; box-shadow: 0 8px 25px rgba(7,59,76,.07);
  font-weight: 700; line-height: 1.35;
}
.instruction-list input { width: 22px; height: 22px; margin: 0 10px 0 0; vertical-align: middle; accent-color: var(--green); }
.compact { gap: 8px; margin: 22px 0; }
.section-heading, .nav-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 18px 0 24px; }
.route-list { display: grid; gap: 12px; }
.osm-map { width: 100%; background: #dcebed; border: 1px solid #cbdde1; overflow: hidden; }
.routes-map { height: 260px; margin: -8px 0 18px; border-radius: 18px; box-shadow: var(--shadow); }
.navigation-map { height: 210px; margin: 14px 0 4px; border-radius: 18px; box-shadow: var(--shadow); }
.leaflet-control-attribution { font-size: 10px; }
.leaflet-container { font-family: inherit; color: var(--ink); }
.boat-marker { display: grid; place-items: center; width: 28px; height: 28px; border: 3px solid white; border-radius: 50%; background: #9bad29; color: white; box-shadow: 0 3px 10px #0005; font-size: 16px; line-height:1; transform-origin:50% 50%; transition:transform .35s ease; }
.route-card { display: grid; grid-template-columns: 16px 1fr; align-items: center; gap: 14px; }
.route-color { width: 12px; height: 58px; border-radius: 10px; background: var(--route-color); }
.route-card strong { display: block; font-size: 18px; }
.route-card small { color: var(--muted); font-weight: 650; }
.route-time { text-align: right; color: var(--blue); font-size: 18px; }
.permission-card { text-align: center; padding: 56px 8px 20px; }
.permission-card button { margin-top: 12px; }
.permission-icon, .arrival-icon {
  display: grid; place-items: center; width: 96px; height: 96px; margin: 0 auto 22px; border-radius: 50%;
  background: var(--navy); color: white; font-size: 52px;
}
.navigation-screen { padding-bottom: 20px; }
.gps-status { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.next-card {
  background: var(--navy); color: white; border-radius: 18px; padding: 16px 18px; display: grid;
  grid-template-columns: 1fr auto; box-shadow: var(--shadow);
}
.next-card p { margin: 0; color: #b9dbe3; font-size: 12px; text-transform: uppercase; font-weight: 800; letter-spacing: .1em; }
.next-card h2 { grid-column: 1; }
.next-card strong { grid-row: 1 / 3; grid-column: 2; align-self: center; font-size: 24px; }
.compass-wrap { text-align: center; padding: 22px 0 14px; }
.compass-ring {
  position: relative; display: grid; place-items: center; width: min(62vw, 300px); aspect-ratio: 1; margin: auto;
  border-radius: 50%; background: radial-gradient(circle, #fff 0 48%, #e7f2f4 49% 52%, #fff 53%);
  box-shadow: inset 0 0 0 1px #dbe9ec, var(--shadow);
}
.north { position:absolute; inset:0; display:flex; justify-content:center; align-items:flex-start; padding-top:11px; pointer-events:none; transition:transform .28s ease-out; font-size:17px; font-weight:900; color:var(--navy); letter-spacing:.04em; }
.north b { display:block; transition:transform .28s ease-out; }
.direction-arrow {
  width: min(40vw, 176px); height: min(40vw, 176px); transform-origin: 50% 50%;
  transition: transform .7s cubic-bezier(.22,.61,.36,1); will-change: transform;
}
.direction-arrow svg { display:block; width:100%; height:100%; overflow:visible; }
.direction-arrow .arrow-shadow { fill:rgba(1,37,56,.25); transform:translateY(4px); filter:blur(2px); }
.direction-arrow .arrow-face { fill:#012538; stroke:#9bad29; stroke-width:2; stroke-linejoin:round; }
.direction-arrow .arrow-highlight { fill:rgba(255,255,255,.16); }
.boat-dot { position: absolute; bottom: 42px; color: var(--navy); }
.direction-copy { font-weight: 800; }
.stats { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.stats div { background: white; padding: 13px 8px; text-align: center; border-radius: 14px; box-shadow: 0 7px 20px rgba(7,59,76,.06); }
.stats strong { display: block; font-size: 19px; }
.stats span { color: var(--muted); font-size: 11px; }
.progress-track { height: 7px; margin: 18px 0 6px; background: #d8e6e9; border-radius: 10px; overflow: hidden; }
.progress-track span { display: block; height: 100%; width: 0; background: var(--green); transition: width .3s; }
.point-progress { text-align: center; margin: 0 0 14px; color: var(--muted); font-size: 12px; }
.nav-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.support-button { margin-top: 10px; background: transparent; border: 1px solid #bed2d7; color: var(--navy); }
.arrival { text-align: center; padding-top: 44px; }
.arrival-icon { background: var(--green); }
dialog { width: min(calc(100% - 32px), 500px); border: 0; border-radius: 22px; padding: 24px; color: var(--ink); box-shadow: 0 30px 80px #0005; }
dialog::backdrop { background: rgba(1,20,28,.62); backdrop-filter: blur(4px); }
.dialog-close { float: right; border: 0; background: transparent; font-size: 30px; }
.support-intro { color: var(--muted); line-height: 1.45; }
.breakdown-list { display: grid; gap: 9px; margin: 18px 0; }
.breakdown-list details { border: 1px solid #dce8ea; border-radius: 14px; background: #f8fbfc; overflow: hidden; }
.breakdown-list summary { display: flex; align-items: center; gap: 11px; padding: 14px; cursor: pointer; list-style: none; }
.breakdown-list summary::-webkit-details-marker { display: none; }
.breakdown-list summary::after { content: "+"; margin-left: auto; color: var(--blue); font-size: 22px; font-weight: 800; }
.breakdown-list details[open] summary::after { content: "−"; }
.breakdown-list summary strong, .breakdown-list summary small { display: block; }
.breakdown-list summary small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.breakdown-icon { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 11px; background: #e5f0f3; }
.breakdown-list ol { margin: 0; padding: 0 18px 16px 48px; color: var(--ink); line-height: 1.45; }
.breakdown-list li + li { margin-top: 8px; }
.link-button { display: block; text-align: center; text-decoration: none; margin: 18px 0 10px; }
.small { color: var(--muted); font-size: 12px; }
[dir="rtl"] .instruction-list input { margin: 0 0 0 10px; }
@media (min-width: 700px) {
  body { padding-top: 20px; }
  main { background: rgba(255,255,255,.32); border-radius: 28px 28px 0 0; min-height: calc(100vh - 88px); }
}

/* Arendshorst landing page */
.landing-screen { margin: -80px -18px 0; padding-bottom: 28px; }
.landing-hero { position: relative; min-height: 430px; display: flex; flex-direction: column; justify-content: space-between; padding: max(30px, env(safe-area-inset-top)) 24px 34px; background: url("assets/arendshorst-background.jpg") center 42% / cover no-repeat; overflow: hidden; }
.landing-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1,37,56,.08) 20%, rgba(1,37,56,.88) 100%); }
.landing-logo { position: relative; width: min(68%, 270px); height: auto; margin: 46px auto 0; filter: drop-shadow(0 3px 12px rgba(255,255,255,.4)); }
.landing-copy { position: relative; color: white; max-width: 470px; }
.landing-copy h1 { margin: 7px 0 10px; color: white; }
.landing-copy p:last-child { margin: 0; font-size: 17px; line-height: 1.45; color: rgba(255,255,255,.92); }
.landing-kicker { margin: 0; color: #dce68c; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .13em; }
.language-panel { position: relative; margin: -1px 0 0; padding: 24px 18px 0; background: #f7fbfc; }
.language-grid.expanded { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 14px; max-height:min(540px,55vh); overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding-right:3px; }
.language-grid.expanded .language-choice { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 9px; min-width: 0; padding: 12px; border-radius: 14px; box-shadow: 0 7px 20px rgba(1,37,56,.07); }
.language-grid.expanded .language-choice .flag { font-size: 25px; }
.language-grid.expanded .language-choice b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.language-grid.expanded .language-choice small { color: #78898e; font-size: 10px; }
.language-grid.expanded .language-choice:hover { border-color: #9bad29; }
@media (max-width:330px){.language-grid.expanded{grid-template-columns:1fr}.landing-hero{min-height:390px}}
@media (min-width:700px){.landing-screen{margin-top:-98px}.landing-hero{border-radius:28px 28px 0 0}}
/* Unified Arendshorst palette */
:root { --navy:#012538; --blue:#9bad29; --cyan:#c3c213; --sand:#f3f5dd; --ink:#012538; --muted:#5c7078; --green:#9bad29; --shadow:0 14px 38px rgba(1,37,56,.14); }
body { background:linear-gradient(180deg,#eaf3f4,#dce9eb); }
.topbar { background:#012538; color:white; }
.topbar > div { color:white; }
.brand-mark { background:#9bad29; color:#012538; }
.topbar .icon-button { background:#9bad29; color:#012538; border-color:#9bad29; }
.primary { background:#9bad29; color:#012538; box-shadow:0 10px 24px rgba(155,173,41,.25); }
.secondary { background:#012538; color:white; }
.eyebrow { color:#70820e; }
.route-card:focus-visible,.route-card:hover { border-color:#9bad29; }
.next-card { background:#012538; }

.progress-track span { background:#9bad29; }
.support-button { border-color:#9bad29; color:#012538; }
.permission-icon { background:#012538; color:#9bad29; }
.arrival-icon { background:#9bad29; color:#012538; }
.breakdown-icon { background:#edf0d2; }
.landing-hero { min-height:330px; padding-bottom:24px; }
.landing-logo { width:min(58%,230px); margin-top:54px; }
.landing-copy h1 { font-size:clamp(28px,8vw,40px); }
.language-panel { background:#012538; padding-bottom:28px; }
.language-panel > .eyebrow { color:#c3c213; }
.language-grid.expanded .language-choice { background:white; border-color:rgba(195,194,19,.5); color:#012538; }
.language-grid.expanded .language-choice:hover { background:#f3f5dd; border-color:#c3c213; }
#screen-routes,#screen-permission,#screen-navigation,#screen-arrival,#screen-instructions { border-top:5px solid #9bad29; }
@media(max-width:390px){.landing-hero{min-height:300px}.landing-logo{width:min(54%,205px);margin-top:50px}}
/* Landing footer and real flags */
.landing-screen { min-height:calc(100vh + 80px); background:#012538; }
.language-panel { min-height:calc(100vh - 250px); }
.language-grid.expanded .language-choice .flag { display:grid; place-items:center; width:38px; height:28px; overflow:hidden; border-radius:4px; background:#edf2f3; box-shadow:0 0 0 1px rgba(1,37,56,.12); }
.language-grid.expanded .language-choice .flag img { display:block; width:100%; height:100%; object-fit:cover; }
.landing-contact { margin:28px -18px 0; padding:26px 20px max(34px,env(safe-area-inset-bottom)); border-top:1px solid rgba(195,194,19,.45); color:white; text-align:center; }
.landing-contact > img { width:170px; max-width:55%; margin-bottom:16px; filter:brightness(0) invert(1); }
.landing-contact address { margin:0; color:white; font-style:normal; line-height:1.55; }
.contact-links { display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:15px; }
.contact-links a { color:#dce68c; font-weight:700; text-decoration:none; }
.contact-links a:hover { text-decoration:underline; }
@media(min-width:560px){.contact-links{flex-direction:row;justify-content:center;flex-wrap:wrap}.contact-links a+a::before{content:"·";color:rgba(255,255,255,.45);margin-right:8px}}.route-time-note { margin:16px 4px 0; color:var(--muted); font-size:13px; line-height:1.45; text-align:center; }.footer-brand { display:flex; flex-direction:column; align-items:center; margin-bottom:16px; line-height:1; }
.footer-brand strong { color:white; font-size:23px; font-weight:500; letter-spacing:.04em; }
.footer-brand span { margin-top:5px; color:#c3c213; font-size:12px; font-weight:800; letter-spacing:.08em; }.navigation-map-shell { position:relative; margin:12px 0 4px; }
.navigation-map-shell .navigation-map { margin:0; }
.map-orientation-toggle { position:absolute; z-index:500; top:10px; right:10px; display:grid; place-items:center; width:54px; height:54px; padding:0; border:1px solid rgba(1,37,56,.16); border-radius:50%; background:#fff; color:#1687d9; box-shadow:0 5px 16px rgba(1,37,56,.28); }
.map-orientation-toggle:active { transform:scale(.96); }
.orientation-icon { width:34px; height:34px; }
.orientation-icon circle { fill:#1687d9; }
.orientation-icon path { fill:#fff; stroke:#1687d9; stroke-width:1.5; stroke-linejoin:round; }
.orientation-icon circle+path { fill:#fff; stroke:none; }
.orientation-icon circle:last-child { fill:#1687d9; stroke:#fff; stroke-width:1.5; }
.orientation-icon { transform-origin:50% 50%; transition:transform .35s ease; }
.orientation-compass { display:none; }
.orientation-course { display:block; }
.orientation-course path { fill:#1687d9; stroke:none; }
.map-orientation-toggle.is-course .orientation-compass { display:block; }
.map-orientation-toggle.is-course .orientation-course { display:none; }
@media(max-width:600px){
  .navigation-screen { padding-bottom:10px; }
  .navigation-screen .nav-heading { margin:8px 0 10px; }
  .navigation-screen .next-card { padding:11px 14px; border-radius:15px; }
  .navigation-screen .next-card h2 { margin:2px 0 0; font-size:20px; line-height:1.15; }
  .navigation-screen .next-card strong { font-size:21px; }
  .navigation-map-shell { margin:9px 0 3px; }
  .navigation-map { height:clamp(175px,25vh,205px); border-radius:15px; }
  .map-orientation-toggle { width:48px; height:48px; top:8px; right:8px; }
  .orientation-icon { width:30px; height:30px; }
  .compass-wrap { padding:10px 0 5px; }
  .compass-ring { width:min(43vw,180px); }
  .direction-arrow { width:min(29vw,118px); height:min(29vw,118px); }
  .north { padding-top:7px; font-size:15px; }
  .boat-dot { bottom:24px; }
  .direction-copy { margin:7px 0 9px; font-size:14px; }
  .stats { grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
  .stats div { min-width:0; padding:8px 2px; border-radius:11px; }
  .stats strong { font-size:16px; white-space:nowrap; }
  .stats span { display:block; font-size:9px; line-height:1.15; }
  .progress-track { margin:10px 0 4px; }
  .point-progress { margin-bottom:7px; }
  .support-button { margin-top:5px; padding:10px 12px; }
}
/* Pre-flight checklist */
.preflight-noise-warning { display:grid; grid-template-columns:46px 1fr; align-items:center; gap:12px; margin:0 0 20px; padding:13px 14px; border:2px solid #d83b3b; border-radius:16px; background:#fff4f2; color:#012538; box-shadow:0 8px 22px rgba(1,37,56,.09); } .noise-warning-icon { position:relative; display:grid; place-items:center; width:42px; height:42px; border:4px solid #d62828; border-radius:50%; color:#012538; font-size:23px; font-weight:900; } .noise-warning-icon::after { content:""; position:absolute; width:48px; height:4px; border-radius:3px; background:#d62828; transform:rotate(-38deg); } .preflight-noise-warning strong,.preflight-noise-warning small { display:block; } .preflight-noise-warning strong { margin-bottom:3px; color:#b51f27; font-size:16px; } .preflight-noise-warning small { font-size:13px; line-height:1.35; }
.preflight-screen { padding-bottom:24px; }
.preflight-intro { margin:0 0 22px; color:var(--muted); font-size:17px; line-height:1.45; }
.preflight-list { display:grid; gap:11px; margin:0 0 20px; padding:0; list-style:none; counter-reset:preflight; }
.preflight-list li { counter-increment:preflight; position:relative; display:grid; grid-template-columns:minmax(0,1fr) 82px; align-items:stretch; border:1px solid rgba(1,37,56,.1); border-radius:16px; background:white; box-shadow:0 8px 24px rgba(1,37,56,.07); overflow:hidden; }
.preflight-list li::before { content:counter(preflight); position:absolute; top:16px; left:14px; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#012538; color:white; font-weight:900; z-index:1; }
.preflight-list label { display:flex; align-items:flex-start; gap:12px; min-width:0; min-height:67px; padding:15px 10px 15px 54px; cursor:pointer; }
.preflight-list li.no-step-media { grid-template-columns:minmax(0,1fr); }
.preflight-list input { flex:0 0 auto; width:23px; height:23px; margin:2px 0 0; accent-color:#9bad29; }
.informational-mark { display:grid; place-items:center; flex:0 0 auto; width:23px; height:23px; margin-top:2px; border-radius:50%; background:var(--lime); color:var(--navy); font-weight:900; }
.preflight-list label>span { min-width:0; flex:1; }
.preflight-list strong,.preflight-list small { display:block; }
.preflight-list strong { color:#012538; line-height:1.3; }
.preflight-list small { margin-top:4px; color:var(--muted); font-size:12px; line-height:1.4; }
.preflight-media:empty { display:none; }
.preflight-media:not(:empty) { position:fixed; inset:0; z-index:5000; display:grid; place-items:center; padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); background:rgba(1,25,38,.88); backdrop-filter:blur(5px); }
.preflight-media .instruction-video { width:min(920px,100%); max-height:calc(100dvh - 36px); margin:0; display:flex; flex-direction:column; }
.preflight-media .instruction-video video { min-height:0; max-height:calc(100dvh - 112px); cursor:pointer; }
.preflight-media .instruction-video figcaption { flex:0 0 auto; }
.instruction-video-sound { margin-left:auto; padding:9px 13px; border:1px solid rgba(255,255,255,.38); border-radius:999px; background:rgba(255,255,255,.12); color:white; font:800 13px/1 inherit; }
body.instruction-lightbox-open { overflow:hidden; }
.instruction-video { position:relative; overflow:hidden; margin:0; border:3px solid var(--lime); border-radius:18px; background:#012538; box-shadow:0 12px 28px rgba(1,37,56,.18); }
.instruction-video video { display:block; width:100%; max-height:58vh; object-fit:contain; background:#012538; }
.instruction-video img { display:block; width:100%; max-height:calc(100dvh - 112px); object-fit:contain; background:#012538; }
.instruction-video figcaption { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; color:white; font-weight:800; }
.instruction-video-close { flex:0 0 auto; width:36px; height:36px; border:1px solid rgba(255,255,255,.35); border-radius:50%; background:rgba(255,255,255,.12); color:white; font-size:22px; line-height:1; }
.step-media:not(:disabled) { background:#012538; color:white; }
.step-media video { position:absolute; inset:0; display:block; width:100%; height:100%; border:0; object-fit:cover; pointer-events:none; }
.step-media .expand-cue { position:absolute; right:5px; bottom:5px; display:grid; place-items:center; width:23px; height:23px; border:1px solid rgba(255,255,255,.7); border-radius:7px; background:rgba(1,37,56,.78); color:white; font:900 15px/1 sans-serif; box-shadow:0 2px 8px rgba(0,0,0,.3); pointer-events:none; }
@media(max-width:390px){.preflight-list .start-check>label{align-items:center}.preflight-media:not(:empty),.breakdown-media:not(:empty){padding:8px}.preflight-media .instruction-video,.breakdown-media .instruction-video{width:100%;max-height:calc(100dvh - 16px);border-radius:14px}.preflight-media .instruction-video video,.breakdown-media .instruction-video video{max-height:calc(100dvh - 88px)}.preflight-media .instruction-video figcaption,.breakdown-media .instruction-video figcaption{padding:9px 10px}.instruction-video-sound{padding:8px 10px}}
[dir="rtl"] .preflight-list li::before { left:auto; right:14px; }
[dir="rtl"] .preflight-list label { padding-left:14px; padding-right:54px; }.step-media { position:relative; align-self:stretch; width:82px; padding:0; border:0; border-left:1px solid #e0eaec; background:#012538; color:white; font-size:22px; font-weight:900; overflow:hidden; }
.step-media:not(:disabled):hover { background:#edf0d2; color:#70820e; }
.step-media:disabled { opacity:.42; cursor:not-allowed; }
[dir="rtl"] .step-media { border-left:0; border-right:1px solid #e0eaec; }.checkout-arrival { padding-top:32px; }
.checkout-intro { margin:0 0 18px; color:var(--muted); font-size:16px; }
.checkout-list { counter-reset:checkout; display:grid; gap:10px; margin:0 0 22px; padding:0; list-style:none; text-align:left; }
.checkout-list li { counter-increment:checkout; position:relative; min-height:58px; padding:15px 15px 15px 58px; border:1px solid rgba(1,37,56,.09); border-radius:15px; background:white; box-shadow:0 7px 20px rgba(1,37,56,.06); color:#012538; font-weight:700; line-height:1.42; }
.checkout-list li::before { content:counter(checkout); position:absolute; top:14px; left:14px; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#012538; color:white; font-weight:900; }
[dir="rtl"] .checkout-list { text-align:right; }
[dir="rtl"] .checkout-list li { padding-left:15px; padding-right:58px; }
[dir="rtl"] .checkout-list li::before { left:auto; right:14px; }.checkout-notice { display:grid; grid-template-columns:30px minmax(0,1fr); gap:11px; align-items:start; margin:0 0 22px; padding:15px; border:1px solid rgba(155,173,41,.55); border-radius:15px; background:#f3f5dd; color:#012538; text-align:left; }
.checkout-notice-icon { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#9bad29; color:#012538; font-weight:900; }
.checkout-notice[hidden]{display:none}
.checkout-notice p { margin:0; font-size:14px; font-weight:650; line-height:1.5; }
.checkout-list li>span{display:block}.checkout-list li>span small{display:block;margin-top:5px;color:var(--muted);font-weight:500}.checkout-list .arrival-check{position:absolute;top:21px;left:22px;width:18px;height:18px;z-index:1}.checkout-list li:has(.arrival-check)::before{display:none}.checkout-list .breakdown-video-button{display:block;margin-top:10px;width:min(190px,100%)}[dir="rtl"] .checkout-list .arrival-check{left:auto;right:22px}
[dir="rtl"] .checkout-notice { text-align:right; }
.booking-button { display:flex; align-items:center; justify-content:center; gap:10px; width:min(100%,390px); min-height:54px; margin:24px auto 0; padding:13px 18px; border-radius:15px; background:#9bad29; color:#012538; box-shadow:0 10px 24px rgba(155,173,41,.24); font-weight:900; text-decoration:none; }
.booking-button:hover { background:#c3c213; } .booking-button b { font-size:20px; } .footer-brand span { color:#c3c213 !important; }.venue-logo-pin { position:relative; display:grid; place-items:center; width:72px; height:72px; border:4px solid #9bad29; border-radius:50% 50% 50% 10px; background:#012538; box-shadow:0 7px 19px rgba(1,37,56,.42); transform:rotate(-45deg); }
.venue-logo-pin::after { display:none; content:""; } .leaflet-control-rotate, .leaflet-control-rotate-toggle { display:none !important; }
.venue-logo-pin i { position:relative; z-index:1; display:block; width:25px; height:50px; overflow:hidden; background:url("assets/arendshorst-logo.png") left center/auto 48px no-repeat; transform:rotate(45deg); }
.breakdown-video-button { position:relative; display:block; width:120px; height:78px; margin:0 18px 16px; padding:0; overflow:hidden; border:2px solid var(--lime); border-radius:12px; background:var(--navy); }
.breakdown-video-button video,.breakdown-video-button img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.breakdown-video-button .expand-cue { position:absolute; right:5px; bottom:5px; display:grid; place-items:center; width:23px; height:23px; border:1px solid rgba(255,255,255,.7); border-radius:7px; background:rgba(1,37,56,.78); color:white; font:900 15px/1 sans-serif; box-shadow:0 2px 8px rgba(0,0,0,.3); pointer-events:none; }
.breakdown-media:not(:empty) { position:fixed; inset:0; z-index:6000; display:grid; width:auto; height:auto; max-width:none; max-height:none; margin:0; border:0; place-items:center; padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); background:rgba(1,25,38,.88); backdrop-filter:blur(5px); }
.runtime-media-overlay::backdrop { background:transparent; }
.breakdown-media:empty { display:none; }
.breakdown-media .instruction-video { width:min(920px,100%); max-height:calc(100dvh - 36px); margin:0; display:flex; flex-direction:column; }
.breakdown-media .instruction-video video { min-height:0; max-height:calc(100dvh - 112px); cursor:pointer; }
.breakdown-media .instruction-video figcaption { flex:0 0 auto; }

.navigation-warning { display:grid; grid-template-columns:42px 1fr 34px; align-items:center; gap:10px; margin:0 0 14px; padding:13px; border:2px solid #e7b928; border-radius:16px; background:#fff8dc; color:#012538; box-shadow:0 8px 22px rgba(1,37,56,.14); }
.navigation-warning[hidden] { display:none; }
.navigation-warning.is-danger { border-color:#d55454; background:#fff0f0; }
.navigation-warning .warning-symbol { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#e7b928; color:#012538; font-size:24px; font-weight:900; }
.wrongway-sign { display:none; width:74px; height:60px; padding:4px; border:3px solid #012538; border-radius:8px; background:#fff; box-shadow:0 3px 8px rgba(1,37,56,.22); }
.wrongway-sign i { display:block; width:100%; height:100%; border-radius:3px; background:linear-gradient(to bottom,#df2f34 0 33%,#fff 33% 67%,#df2f34 67% 100%); }
.navigation-warning.is-wrongway { grid-template-columns:74px 1fr 34px; border-color:#df2f34; background:#fff5f5; }
.navigation-warning.is-wrongway .warning-symbol { display:none; } .navigation-warning.is-wrongway .wrongway-sign { display:block; }
.navigation-warning.is-danger .warning-symbol { background:#d55454; color:white; }
.navigation-warning strong { display:block; font-size:16px; } .navigation-warning p { margin:3px 0 0; font-size:13px; line-height:1.35; }
.navigation-warning button { border:0; background:transparent; color:#012538; font-size:25px; }

.location-service-button { display:inline-flex; align-items:center; gap:7px; margin-top:7px; padding:8px 11px; border:1px solid #9bad29; border-radius:999px; background:#edf0d2; color:#012538; font-weight:800; }
.location-service-button[hidden] { display:none; } .device-help { display:grid; gap:4px; margin:14px 0; } .device-help h3 { margin:8px 0 0; font-size:15px; } .device-help p { margin:0; color:var(--muted); line-height:1.45; }
.gps-recovery{margin-top:10px;padding:12px;border:1px solid #e7b928;border-radius:12px;background:#fff8dd}.gps-recovery[hidden]{display:none}.gps-recovery p{margin:0 0 9px;font-size:13px;line-height:1.4;color:#5f4a00}.gps-recovery>div{display:flex;gap:8px;flex-wrap:wrap}.gps-recovery button{width:auto;min-height:42px;margin:0;padding:9px 13px}.device-help section[hidden]{display:none}.device-help ol{display:grid;gap:9px;margin:12px 0 16px;padding-left:25px}.device-help li{padding-left:4px;line-height:1.45}.device-help li::marker{color:var(--lime);font-weight:900}.location-return-hint{padding:10px;border-radius:10px;background:#f3f7f8}.location-help-actions{display:grid;gap:9px}.location-help-actions button{margin:0}

.allrentle-brand { display:flex; align-items:center; justify-content:center; gap:9px; margin:15px auto 2px; color:rgba(255,255,255,.62); font-size:10px; letter-spacing:.08em; text-transform:uppercase; } .allrentle-brand img { width:88px; height:34px; object-fit:cover; border-radius:7px; opacity:.82; }

.route-loader { position:fixed; inset:0; z-index:5000; display:grid; place-items:center; padding:24px; background:rgba(1,37,56,.94); color:white; }
.route-loader[hidden] { display:none; }
.route-loader-card { width:min(360px,100%); padding:28px 24px; border:1px solid rgba(155,173,41,.65); border-radius:22px; background:#073b4c; text-align:center; box-shadow:0 24px 70px rgba(0,0,0,.32); }
.route-loader-card .brand-mark { display:grid; margin:0 auto 16px; width:52px; height:52px; font-size:25px; background:#9bad29; color:#012538; }
.route-loader-card strong { display:block; font-size:20px; }
.route-loader-card p { margin:7px 0 18px; color:#dce9ec; }
.route-loader-track { overflow:hidden; height:10px; border-radius:99px; background:#dce9ec; }
.route-loader-track i { display:block; width:0; height:100%; border-radius:inherit; background:#9bad29; transition:width .24s ease; }
.route-loader-card small { display:block; margin-top:8px; font-weight:800; color:#dce9ec; }
.language-code-icon{display:grid!important;place-items:center;border-radius:50%;background:#e6eef0;color:#073b4c;font-size:11px;font-weight:900}.language-emoji-flag{display:grid!important;place-items:center;background:#fff;font-size:26px;line-height:1}.text-direction-rtl [data-i18n],.text-direction-rtl .preflight-list label>span,.text-direction-rtl .breakdown-list summary>span,.text-direction-rtl .navigation-warning>div{text-align:right}.text-direction-rtl .preflight-list label,.text-direction-rtl .breakdown-list summary{direction:rtl}.text-direction-rtl .language-choice{direction:inherit}.language-choice b{overflow-wrap:anywhere}