/* Java Logistik: gold, brown, charcoal and navy. No red or green accents. */
:root {
  --navy:#10263D; --navy-light:#1E4265; --gold:#C68A1F; --gold-light:#E8B84B;
  --gold-pale:#F6E3B8; --brown:#6B4423; --brown-dark:#452B15; --brown-light:#F1E3CC;
  --charcoal:#30343B; --ink:var(--charcoal); --muted:#535861;
  --bg:#FAF8F3; --bg-alt:#F0EAE0; --white:#FFF; --border:#DED8CD;
  --radius:18px; --radius-sm:10px; --container:1240px;
  --shadow:0 20px 60px rgb(16 38 61 / 8%); --shadow-sm:0 4px 18px rgb(16 38 61 / 5%);
  --font-head:ui-sans-serif,system-ui,-apple-system,"Segoe UI","PingFang TC","Microsoft JhengHei",sans-serif;
  --font-body:ui-sans-serif,system-ui,-apple-system,"Segoe UI","PingFang TC","Microsoft JhengHei",sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:110px; accent-color:var(--navy); }
body { margin:0; font-family:var(--font-body); color:var(--ink); background:var(--bg); line-height:1.65; -webkit-font-smoothing:antialiased; }
::selection { background:var(--gold-pale); color:var(--navy); }
:focus-visible { outline:3px solid var(--gold); outline-offset:5px; }
img,svg { max-width:100%; }
img { display:block; height:auto; }
a { color:inherit; text-underline-offset:4px; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:rgb(198 138 31 / 20%); }
button { cursor:pointer; }
h1,h2,h3,h4 { font-family:var(--font-head); color:var(--navy); line-height:1.14; margin:0 0 .65em; letter-spacing:-.04em; text-wrap:balance; }
h1 { font-size:clamp(2.2rem,5.2vw,4.6rem); font-weight:800; }
h2 { font-size:clamp(1.9rem,3.4vw,3.15rem); font-weight:700; }
h3 { font-size:1.3rem; letter-spacing:-.025em; }
p { margin:0 0 1.2em; color:var(--muted); }
p,a,label,small,td,th { overflow-wrap:anywhere; }
.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(20px,4vw,56px); }
section { padding-block:clamp(56px,7vw,100px); }
main { display:block; }
.skip-link { position:fixed; top:10px; left:16px; z-index:600; padding:12px 20px; background:var(--white); color:var(--navy); transform:translateY(-180%); border-radius:8px; }
.skip-link:focus { transform:none; }
.brand-icon { width:1em; height:1em; display:inline-block; flex-shrink:0; vertical-align:-.125em; }
.section-alt { background:var(--bg-alt); }
.section-navy { background:var(--navy); color:var(--gold-pale); }
.section-navy h2,.section-navy h3 { color:var(--white); }
.eyebrow { display:inline-block; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.16em; color:var(--brown); margin-bottom:20px; }
.section-navy .eyebrow { color:var(--gold-light); }
.lead { font-size:clamp(1rem,1.6vw,1.15rem); max-width:620px; line-height:1.8; }
.center { text-align:center; margin-inline:auto; }
.btn { display:inline-flex; justify-content:center; align-items:center; gap:12px; min-height:48px; padding:13px 22px; border:1px solid transparent; border-radius:8px; font-weight:650; font-size:.88rem; line-height:1.4; text-align:center; text-decoration:none; transition:background .18s,transform .18s,border-color .18s; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { background:var(--navy); color:var(--white); }
.btn-primary:hover { background:var(--navy-light); }
.btn-gold { background:var(--gold-light); color:var(--navy); }
.btn-gold:hover { background:var(--gold-pale); }
.btn-outline { border-color:var(--border); color:var(--navy); background:transparent; }
.btn-outline:hover { background:var(--bg-alt); border-color:var(--navy); }
.btn-outline-light { border-color:rgb(255 255 255 / 30%); color:var(--white); background:transparent; }
.btn-outline-light:hover { background:rgb(255 255 255 / 8%); border-color:var(--gold-light); }
.btn-whatsapp { background:var(--gold-pale); color:var(--navy); border-color:var(--gold); }
.btn-whatsapp:hover { background:var(--gold-light); }
.btn-block { width:100%; }
.btn-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
header.site-header { position:sticky; top:0; z-index:100; background:rgb(250 248 243 / 97%); border-bottom:1px solid var(--border); backdrop-filter:blur(16px); }
.nav-wrap { max-width:1440px; min-height:88px; margin:auto; padding:16px clamp(20px,3vw,48px); display:flex; align-items:center; gap:28px; }
.logo-link { display:block; flex-shrink:0; width:188px; }
.logo-link img { width:100%; height:auto; }
.main-nav { display:flex; align-items:center; gap:22px; margin-left:auto; }
.main-nav>a { font-size:.82rem; font-weight:600; text-decoration:none; color:var(--navy); min-height:44px; display:flex; align-items:center; white-space:nowrap; }
.main-nav>a:hover,.main-nav>a.active { color:var(--brown); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:8px; }
.nav-actions { display:flex; align-items:center; gap:12px; }
.lang-toggle { display:flex; align-items:center; gap:2px; border-left:1px solid var(--border); padding-left:12px; }
.lang-toggle button { border:0; background:transparent; color:var(--muted); min-width:44px; min-height:44px; font-size:.75rem; font-weight:700; white-space:nowrap; border-radius:6px; }
.lang-toggle button.active { color:var(--navy); background:var(--bg-alt); }
.menu-toggle { display:none; flex-shrink:0; width:46px; height:46px; padding:10px; background:transparent; color:var(--navy); border:1px solid var(--border); border-radius:8px; }
.menu-toggle span { display:block; width:22px; height:2px; margin:5px auto; background:currentColor; transition:transform .2s; }
.menu-toggle[aria-expanded=true] span:first-child { transform:translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded=true] span:nth-child(2) { opacity:0; }
.menu-toggle[aria-expanded=true] span:last-child { transform:translateY(-7px) rotate(-45deg); }
.main-nav .nav-quote { display:none; }
.hero { background:var(--navy); color:var(--white); position:relative; overflow:clip; padding-block:clamp(52px,6vw,88px); }
.hero::before { content:''; position:absolute; width:650px; height:650px; border:1px solid rgb(232 184 75 / 10%); border-radius:50%; right:-380px; top:-200px; pointer-events:none; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:center; gap:clamp(30px,5vw,72px); }
.hero-grid>* { min-width:0; }
.hero .eyebrow { color:var(--gold-light); }
.hero h1 { color:var(--white); font-size:clamp(2.6rem,5.8vw,5.25rem); line-height:1.08; letter-spacing:-.06em; }
.hero h1 .hero-accent { display:block; color:var(--gold-light); }
.hero .lead { color:#CBD3DD; font-size:1rem; max-width:500px; }
.hero .btn-row { margin-top:30px; }
.hero-footnote { margin:22px 0 0; color:#B7C4D2; font-size:.75rem; }
.route-board { position:relative; background:var(--bg); color:var(--navy); border-radius:20px; padding:clamp(24px,3vw,38px); box-shadow:0 30px 80px rgb(0 0 0 / 12%); transform:rotate(2deg); }
.board-top { display:flex; justify-content:space-between; gap:12px; align-items:center; padding-bottom:25px; border-bottom:1px solid var(--border); }
.board-top span { font-size:.62rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.board-top .board-label { padding:6px 10px; border-radius:5px; background:var(--gold-pale); color:var(--brown-dark); letter-spacing:.05em; }
.route-journey { display:grid; grid-template-columns:30px minmax(0,1fr); column-gap:20px; padding-block:28px; }
.route-rail { grid-column:1; grid-row:1 / 4; position:relative; width:1px; background:var(--border); justify-self:center; margin-block:12px; }
.route-rail::before,.route-rail::after { content:''; position:absolute; width:11px; height:11px; border-radius:50%; border:3px solid var(--gold); background:var(--bg); left:-5px; }
.route-rail::before { top:0; } .route-rail::after { bottom:0; background:var(--navy); border-color:var(--navy); }
.route-stop { grid-column:2; }
.route-stop small { font-size:.65rem; text-transform:uppercase; letter-spacing:.16em; color:var(--muted); }
.route-stop strong { display:block; font-family:var(--font-head); font-size:clamp(1.4rem,2.3vw,2rem); letter-spacing:-.045em; line-height:1.3; margin-top:6px; }
.route-stop p { font-size:.78rem; margin:4px 0 0; }
.route-via { grid-column:2; margin-block:23px; padding:12px 14px; border:1px dashed #C8BBA6; border-radius:8px; font-size:.74rem; color:var(--brown); }
.board-bottom { border-top:1px solid var(--border); padding-top:20px; display:flex; gap:10px; align-items:center; color:var(--muted); font-size:.73rem; }
.board-bottom .brand-icon { color:var(--brown); font-size:1.5rem; }
.lane-strip { background:var(--bg-alt); border-bottom:1px solid var(--border); }
.lane-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.lane { padding:24px 22px; display:flex; align-items:center; gap:14px; border-right:1px solid var(--border); }
.lane:first-child { padding-left:0; } .lane:last-child { border:0; }
.lane-number { font-family:monospace; font-size:.7rem; color:var(--brown); }
.lane strong { display:block; font-size:.8rem; color:var(--navy); } .lane small { display:block; font-size:.7rem; color:var(--muted); margin-top:2px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:36px; }
.section-heading h2 { margin:0; max-width:610px; }
.section-heading p { font-size:.9rem; max-width:330px; margin:0; }
.text-link { display:inline-flex; align-items:center; gap:14px; min-height:44px; font-weight:600; font-size:.85rem; color:var(--navy); text-decoration:none; }
.text-link:hover { text-decoration:underline; }
.grid { display:grid; gap:24px; } .grid>* { min-width:0; }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:clamp(24px,3vw,36px); }
.card .icon-badge { width:48px; height:48px; display:flex; align-items:center; justify-content:center; color:var(--brown); background:var(--bg-alt); border-radius:12px; font-size:1.5rem; margin-bottom:28px; }
.card p { font-size:.92rem; }
.card ul { padding-left:18px; color:var(--muted); } .card li { margin-bottom:8px; }
.service-card { display:flex; flex-direction:column; transition:transform .2s,box-shadow .2s; }
.service-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.service-card .text-link { margin-top:auto; border-top:1px solid var(--border); padding-top:18px; }
.service-card.featured { background:var(--brown-dark); border-color:var(--brown-dark); }
.service-card.featured h3,.service-card.featured .text-link { color:var(--white); }
.service-card.featured p { color:#E4D8C5; }
.service-card.featured .icon-badge { background:rgb(255 255 255 / 8%); color:var(--gold-light); }
.service-card.featured .text-link { border-color:rgb(255 255 255 / 20%); }
.process-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px; margin-top:45px; }
.process-item { border-top:1px solid #CFC5B4; padding-top:24px; }
.process-item .process-number { color:var(--brown); font-family:monospace; font-size:.8rem; display:block; margin-bottom:25px; }
.process-item p { font-size:.9rem; margin:0; }
.hk-panel { background:var(--navy); color:var(--white); border-radius:24px; padding:clamp(28px,5vw,64px); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:36px; align-items:center; }
.hk-panel h2 { color:var(--white); max-width:650px; }
.hk-panel p { color:#C5D0DC; max-width:600px; margin-bottom:0; }
.hk-panel .eyebrow { color:var(--gold-light); }
.steps { display:grid; gap:20px; }
.step { display:flex; gap:20px; align-items:flex-start; background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:24px; }
.step>div { min-width:0; }
.step-num { flex-shrink:0; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:var(--navy); color:var(--gold-light); font-weight:700; }
.step h3 { margin-bottom:8px; }.step p { margin:0; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-q { display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; padding:24px 0; color:var(--navy); border:0; background:none; text-align:left; font-weight:650; font-size:1rem; }
.faq-q .plus { font-size:1.5rem; color:var(--brown); flex-shrink:0; }
.faq-item.open .plus { transform:rotate(45deg); }
.faq-a { display:none; } .faq-item.open .faq-a { display:block; }
.faq-a p { padding:0 0 24px; margin:0; }
.form-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:clamp(20px,4vw,40px); box-shadow:var(--shadow); }
.form-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.field { margin-bottom:22px; min-width:0; }
.field label { display:block; color:var(--navy); font-weight:600; font-size:.85rem; margin-bottom:8px; }
.field input,.field select,.field textarea { width:100%; min-width:0; max-width:100%; min-height:48px; border:1px solid #B8B3AA; border-radius:8px; padding:12px; background:var(--bg); color:var(--ink); font-size:16px; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--navy); }
.field textarea { resize:vertical; min-height:140px; }
.field-check { display:flex; align-items:flex-start; gap:12px; }
.field-check input { width:22px; height:22px; min-height:22px; flex-shrink:0; margin:4px 0; }
.field-check label { font-weight:400; padding-block:3px; }
.info-list { list-style:none; padding:0; margin:0; }
.info-list li { display:flex; gap:14px; border-bottom:1px solid var(--border); padding:16px 0; }
.info-list li>div { min-width:0; } .info-list li:last-child { border:0; }
.info-list .ico { color:var(--brown); flex-shrink:0; width:24px; }
.info-list strong { display:block; color:var(--navy); }
.cta-banner { padding:clamp(28px,5vw,64px); background:var(--navy); border-radius:24px; text-align:center; color:var(--white); }
.cta-banner h2 { color:var(--white); } .cta-banner p { color:var(--gold-pale); }
.page-header { padding-block:clamp(40px,6vw,80px); border-bottom:1px solid var(--border); background:var(--bg-alt); }
.page-header h1 { max-width:1000px; } .page-header p:last-child { margin:0; }
.breadcrumb { font-size:.75rem; color:var(--muted); margin-bottom:28px; } .breadcrumb a { text-decoration:none; }
.site-footer { background:var(--navy); color:#C5D0DC; padding:64px 0 28px; }
.footer-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:32px; }
.footer-grid>* { min-width:0; }
.footer-grid h4 { font-size:.8rem; color:var(--gold-pale); letter-spacing:0; }
.footer-grid ul { list-style:none; padding:0; margin:0; }
.footer-grid li { font-size:.8rem; margin-bottom:6px; }
.footer-grid a { display:inline-flex; min-height:36px; align-items:center; text-decoration:none; }
.footer-grid a:hover { color:var(--gold-light); }
.footer-desc { color:#B7C4D2; font-size:.8rem; max-width:300px; }
.footer-bottom { margin-top:44px; padding-top:22px; border-top:1px solid rgb(255 255 255 / 15%); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:.72rem; }
.footer-bottom a { min-height:36px; display:inline-flex; align-items:center; }
.whatsapp-float,.back-to-top { position:fixed; bottom:calc(20px + env(safe-area-inset-bottom)); z-index:80; width:50px; height:50px; border:1px solid var(--gold); border-radius:14px; align-items:center; justify-content:center; text-decoration:none; box-shadow:var(--shadow); }
.whatsapp-float { display:flex; right:20px; background:var(--gold-light); color:var(--navy); font-size:1.4rem; }
.whatsapp-float:hover { background:var(--gold-pale); }
.back-to-top { display:flex; right:20px; z-index:79; background:var(--navy); color:var(--white); font-size:1.1rem; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(0) scale(.65); transition:transform .25s ease,opacity .2s ease,visibility 0s .25s; }
.back-to-top.show { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(-62px) scale(1); transition-delay:0s; }
.cookie-banner { position:fixed; left:20px; right:20px; bottom:calc(16px + env(safe-area-inset-bottom)); max-width:760px; margin:auto; z-index:300; display:none; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; padding:20px; border:1px solid var(--border); border-radius:14px; background:var(--bg); color:var(--ink); box-shadow:0 12px 50px rgb(0 0 0 / 20%); font-size:.8rem; }
.cookie-banner.show { display:flex; }.cookie-banner a { color:var(--brown); }
.cookie-actions { display:flex; gap:10px; }.cookie-actions button { min-height:44px; padding:10px 20px; border:1px solid var(--border); border-radius:7px; font-weight:600; }
.cookie-accept { background:var(--navy); color:var(--white); }.cookie-decline { background:transparent; color:var(--navy); }
.pattern-divider { height:3px; background:var(--gold); }
.java-map-wrap { max-width:700px; margin:auto; }.java-map-wrap svg { width:100%; height:auto; }
.rate-table { width:100%; table-layout:fixed; border-collapse:collapse; background:var(--white); }
.table-hint { display:none; }
.rate-table th,.rate-table td { padding:18px; border-bottom:1px solid var(--border); text-align:left; font-size:.85rem; }
.rate-table th { background:var(--navy); color:var(--white); }
@media (max-width:1100px) {
  .nav-wrap { min-height:76px; gap:16px; flex-wrap:wrap; }
  .nav-actions { margin-left:auto; }
  .main-nav { order:3; width:100%; margin:0; flex-wrap:wrap; }
  .js .main-nav { display:none; position:absolute; top:100%; left:0; width:100%; padding:20px clamp(20px,4vw,56px) 30px; background:var(--bg); border-bottom:1px solid var(--border); box-shadow:var(--shadow); max-height:calc(100dvh - 90px); overflow-y:auto; }
  .js .main-nav.open { display:flex; flex-direction:column; align-items:stretch; gap:4px; }
  .main-nav>a { padding:10px 0; white-space:normal; }
  .main-nav .lang-toggle { border:0; padding:12px 0; }
  .main-nav .nav-quote { display:flex; color:var(--white); justify-content:center; padding:14px; }
  .js .menu-toggle { display:block; }
  .hero-grid { gap:36px; }
}
@media (max-width:800px) {
  .hero-grid { grid-template-columns:minmax(0,1fr); }
  .hero h1 { max-width:650px; font-size:clamp(2.6rem,8vw,4.8rem); }
  .hero .lead { max-width:580px; }
  .route-board { transform:none; max-width:580px; width:100%; margin-top:12px; }
  .section-heading { align-items:flex-start; flex-direction:column; gap:18px; }
  .section-heading p { max-width:580px; }
  .grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hk-panel { grid-template-columns:minmax(0,1fr); }
  .hk-panel .btn { justify-self:start; }
  .lane { padding:20px 12px; gap:8px; }
}
@media (max-width:560px) {
  /* Keep floating shortcuts clear of the form and the phone keyboard. */
  body:has(form) .whatsapp-float,body:has(form) .back-to-top { display:none; }
  .nav-wrap { padding:14px 20px; min-height:72px; }
  .logo-link { width:155px; }
  .nav-actions>.btn { display:none; }
  .hero { padding-block:44px; }
  .hero h1 { font-size:clamp(2.4rem,10vw,3.5rem); }
  .eyebrow { font-size:.65rem; letter-spacing:.12em; }
  .hero .btn-row { display:grid; grid-template-columns:1fr; }
  .hero .btn { width:100%; }
  .hero-footnote { font-size:.7rem; }
  .route-board { border-radius:14px; padding:22px; }
  .lane-grid { grid-template-columns:minmax(0,1fr); }
  .lane,.lane:first-child { padding:16px 0; border-right:0; border-bottom:1px solid var(--border); gap:18px; }
  .lane strong { font-size:.85rem; }
  .lane small { font-size:.75rem; }
  .grid-3,.grid-2,.form-row,.process-grid { grid-template-columns:minmax(0,1fr); }
  .process-grid { gap:24px; margin-top:28px; }
  .process-item .process-number { margin-bottom:16px; }
  .footer-grid { gap:30px 20px; }
  .footer-grid>div:first-child,.footer-grid>div:last-child { grid-column:1 / -1; }
  .site-footer { padding-bottom:90px; }
  .step { gap:14px; padding:20px; }
  .step-num { width:36px; height:36px; }
  .rate-table th,.rate-table td { padding:12px 10px; font-size:.875rem; }
  .rate-table { min-width:540px; }
  .table-hint { display:block; font-size:.8rem; margin-top:24px; }
  .btn-row>.btn { flex:1 1 180px; }
  .board-top { flex-wrap:wrap; }
  .cookie-banner { left:12px; right:12px; gap:10px; padding:16px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none!important; animation:none!important; }
  .btn:hover,.service-card:hover { transform:none; }
}