/* =========================================================
   ATLAS Transport Intelligence — Design-Tokens
   Direkt aus der bestehenden Website übernommen (index.html /
   impressum.html / datenschutz.html), NICHT neu erfunden.
   Schrift: reine Systemschriften, keine externe Einbindung
   (siehe Datenschutzerklärung, Abschnitt 4).
   ========================================================= */

:root{
  --ink:      #08090b;
  --ink-2:    #101216;
  --ink-3:    #171a1f;
  --paper:    #fbfaf8;
  --paper-2:  #f2f0ec;

  --t-hi:     #f7f6f4;
  --t-mid:    #a5a8ad;
  --t-low:    #6c7076;

  --p-hi:     #0d0f12;
  --p-mid:    #585d64;
  --p-low:    #8b9098;

  --amber:       #e08033;   /* ATLAS — Hauptmarkenfarbe */
  --amber-2:     #f09a4f;
  --amber-deep:  #b25f1e;
  --amber-btn:   #b5601c;
  --amber-btn-h: #c96e24;

  --blue:     #5b8db8;      /* HELIX — Sekundärakzent (aus den Rechtstexten übernommen) */
  --blue-2:   #7aa9cf;

  --green:    #4e8e6e;      /* TOURGUIDE — dritter Ökosystem-Akzent */
  --green-2:  #7cb99a;

  --line-d:   rgba(247,246,244,0.10);
  --line-l:   rgba(13,15,18,0.10);

  --radius: 8px;
  --radius-lg: 18px;
  --maxw: 1180px;

  --font: -apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--ink);
  color:var(--t-hi);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.5;
}
::selection{ background:var(--amber); color:#0b0705; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }
img{ max-width:100%; display:block; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.wrap-narrow{ max-width:880px; margin:0 auto; padding:0 28px; }

h1,h2,h3{ font-weight:700; letter-spacing:-0.03em; line-height:1.05; overflow-wrap:break-word; }
h4{ font-family:var(--font-mono); font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--t-low); font-weight:600; }
p{ color:var(--t-mid); margin:0 0 1em; }
p.lead{ font-size:clamp(15px,1.9vw,18.5px); line-height:1.6; max-width:600px; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--amber);
  display:flex; align-items:center; gap:9px;
  margin-bottom:14px;
}
.b-paper .eyebrow{ color:var(--amber-deep); }
.eyebrow.helix{ color:var(--blue); }
.b-paper .eyebrow.helix{ color:#3f6f92; }

.claim{ font-family:var(--font-mono); font-size:14px; color:var(--t-mid); }
.claim .a{ color:var(--amber); }
.claim .h{ color:var(--blue); }
.claim .t{ color:var(--t-hi); }
.b-paper .claim{ color:var(--p-mid); }
.b-paper .claim .t{ color:var(--p-hi); }

/* ---------- Logo mark ---------- */
.mark{ display:inline-flex; }

/* ---------- Header ---------- */
header.site{
  position:sticky; top:0; z-index:100;
  padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(8,9,11,0.86);
  backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line-d);
}
.brand{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:16.5px; letter-spacing:-0.01em; }

nav.primary{ display:flex; align-items:center; gap:28px; }
.nav-group{ position:relative; }
.nav-group > span{ font-size:13px; color:var(--t-mid); font-weight:500; cursor:default; display:flex; align-items:center; gap:4px; }
.nav-drop{
  position:absolute; top:100%; left:0; margin-top:16px;
  background:var(--ink-3); border:1px solid var(--line-d); border-radius:var(--radius);
  min-width:230px; padding:8px;
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
}
.nav-group:hover .nav-drop, .nav-group:focus-within .nav-drop{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-drop a{ display:block; padding:9px 12px; font-size:13.5px; color:var(--t-mid); border-radius:6px; }
.nav-drop a:hover{ background:var(--ink-2); color:var(--t-hi); }

.btn{
  display:inline-block; font-size:14px; font-weight:600;
  padding:11px 22px; border-radius:980px;
  transition:background .25s,border-color .25s,color .25s,transform .2s;
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--amber-btn); color:#fff; }
.btn-primary:hover{ background:var(--amber-btn-h); color:#fff; }
.btn-ghost{ border:1px solid rgba(247,246,244,0.28); color:var(--t-hi); }
.btn-ghost:hover{ border-color:var(--t-hi); }
header .btn{ padding:9px 18px; font-size:13px; }

.mobile-toggle{
  display:none; background:none; border:1px solid var(--line-d); border-radius:8px;
  color:var(--t-hi); font-family:var(--font-mono); font-size:12.5px; padding:8px 12px;
}
@media (max-width:1040px){
  nav.primary{
    display:none; position:absolute; top:64px; left:0; right:0;
    background:var(--ink-3); border-bottom:1px solid var(--line-d);
    flex-direction:column; align-items:flex-start; padding:18px 28px 24px; gap:16px;
  }
  nav.primary.open{ display:flex; }
  .nav-drop{ position:static; opacity:1; visibility:visible; transform:none; display:none; margin-top:8px; border:none; padding:0 0 0 10px; }
  .nav-group:hover .nav-drop, .nav-group:focus-within .nav-drop{ display:block; }
  .mobile-toggle{ display:block; }
  header .nav-cta .btn-ghost{ display:none; }
}
@media (min-width:1041px){ .mobile-toggle{ display:none; } }
.nav-cta{ display:flex; align-items:center; gap:10px; }

/* ---------- Hero ---------- */
.hero{
  position:relative; padding:110px 0 96px; text-align:left; overflow:hidden;
  border-bottom:1px solid var(--line-d);
  min-height:640px; display:flex; align-items:center;
}
.hero-photo{
  position:absolute; top:0; right:0; bottom:0; left:0; z-index:0;
  background-image:url('/assets/hero-transport.jpg');
  background-size:cover; background-position:64% center;
}
.hero-photo::after{
  content:'';
  position:absolute; top:0; right:0; bottom:0; left:0;
  background:
    linear-gradient(90deg, rgba(8,9,11,0.94) 0%, rgba(8,9,11,0.72) 30%, rgba(8,9,11,0.28) 56%, rgba(8,9,11,0.05) 78%, transparent 100%),
    linear-gradient(0deg, rgba(8,9,11,0.55) 0%, transparent 30%);
}
.hero-glow{
  position:absolute; top:-30%; right:-10%; width:900px; height:700px;
  background:radial-gradient(ellipse at center, rgba(224,128,51,0.10) 0%, rgba(224,128,51,0.03) 40%, transparent 70%);
  pointer-events:none; z-index:1;
}
.hero-inner{ position:relative; z-index:2; max-width:760px; }
.hero-eyebrow-line{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.hero h1{
  font-size:clamp(38px,6vw,64px); letter-spacing:-0.03em; line-height:1.04;
  background:linear-gradient(180deg,#ffffff 20%, #b9bcc1 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:20px;
}
.hero p.lead{ color:var(--t-mid); margin-bottom:30px; max-width:640px; }
.hero-ctas{ display:flex; gap:12px; margin-bottom:40px; flex-wrap:wrap; }
.hero-meta{
  display:flex; gap:28px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:12.5px; color:var(--t-low);
  border-top:1px solid var(--line-d); padding-top:22px;
}
.hero-meta b{ color:var(--t-mid); font-weight:500; }

/* ---------- Ecosystem (ATLAS / HELIX / TOURGUIDE) ---------- */
.eco-section{ position:relative; padding:100px 0; overflow:hidden; }
.eco-photo{
  position:absolute; top:0; right:0; bottom:0; left:0; z-index:0;
  background-size:cover; background-position:center;
  opacity:0.22;
}
.eco-photo::after{
  content:''; position:absolute; top:0; right:0; bottom:0; left:0;
  background:linear-gradient(180deg, var(--ink) 0%, rgba(8,9,11,0.75) 40%, var(--ink) 100%);
}
.eco-section .wrap{ position:relative; z-index:1; }
.eco{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px; }
.ec{
  background:var(--ink-3); border:1px solid var(--line-d); border-radius:var(--radius-lg);
  padding:36px 30px; position:relative; overflow:hidden;
}
.ec::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--amber); opacity:.6; }
.ec.helix::before{ background:var(--blue); }
.ec.tourguide::before{ background:var(--green); }
.ec .num{ font-family:var(--font-mono); font-size:12px; color:var(--t-low); }
.ec .nm{ font-size:24px; font-weight:700; letter-spacing:-0.03em; color:#fff; margin-top:8px; }
.ec .rl{ margin-top:5px; font-size:14px; color:var(--amber); font-weight:600; }
.ec.helix .rl{ color:var(--blue-2); }
.ec.tourguide .rl{ color:var(--green-2); }
.ec .vb{ margin-top:18px; font-size:14px; color:var(--t-mid); line-height:1.7; }
@media (max-width:880px){ .eco{ grid-template-columns:1fr; } }

.flowline{
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  margin-top:52px; font-size:13.5px; color:var(--t-mid); font-weight:500; text-align:center;
}
.flowline b{ color:#fff; font-weight:600; }
.flowline .ar{ color:var(--amber); }

/* ---------- Sections ---------- */
section.block{ padding:96px 0; position:relative; border-bottom:1px solid var(--line-d); }
section.block.tight{ padding:60px 0; }
section.block.paper{ background:var(--paper); color:var(--p-hi); border-bottom:none; }
section.block.paper p{ color:var(--p-mid); }
section.block.paper h2, section.block.paper h3, section.block.paper h4{ color:var(--p-hi); }
@media (max-width:760px){ section.block{ padding:64px 0; } }

.sec-head{ max-width:720px; margin-bottom:48px; }
.sec-head h2{ font-size:clamp(28px,4.2vw,46px); letter-spacing:-0.03em; }
.sec-head p{ margin-top:16px; }

.cols-2{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
@media (max-width:800px){ .cols-2{ grid-template-columns:1fr; } }

/* feature list */
ul.feat{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:0 28px; }
ul.feat.single{ grid-template-columns:1fr; }
ul.feat li{
  font-size:14.5px; color:var(--t-mid); padding:13px 0 13px 20px;
  border-bottom:1px solid var(--line-d); position:relative;
}
section.block.paper ul.feat li{ border-bottom-color:var(--line-l); color:var(--p-mid); }
ul.feat li::before{ content:''; position:absolute; left:0; top:21px; width:7px; height:1px; background:var(--amber); }
@media (max-width:640px){ ul.feat{ grid-template-columns:1fr; } }

/* feature grid (cards) */
.fg{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-d); border-top:1px solid var(--line-d); border-left:1px solid var(--line-d); margin-top:16px; }
.fc{ background:var(--ink); padding:30px 26px; }
.fc h3{ font-size:17px; font-weight:600; letter-spacing:-0.02em; }
.fc p{ margin-top:8px; font-size:14px; }
@media (max-width:900px){ .fg{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .fg{ grid-template-columns:1fr; } }

/* note / callout */
.note{
  border:1px solid var(--line-d); border-left:3px solid var(--amber);
  background:var(--ink-3); padding:18px 22px; border-radius:6px;
  font-size:14px; color:var(--t-mid); margin-top:24px;
}
.note b{ color:var(--t-hi); }
.note.helix{ border-left-color:var(--blue); }
section.block.paper .note{ background:var(--paper-2); border-color:var(--line-l); color:var(--p-mid); }
section.block.paper .note b{ color:var(--p-hi); }

/* process flow (vertical, mono) */
.flow{ display:flex; flex-direction:column; max-width:420px; font-family:var(--font-mono); }
.flow-step{ padding:13px 17px; border:1px solid var(--line-d); border-radius:6px; background:var(--ink-3); font-size:13px; }
.flow-arrow{ align-self:center; color:var(--amber); padding:5px 0; font-size:13px; }

/* journey / numbered steps */
.jr{ max-width:760px; position:relative; }
.jr::before{ content:''; position:absolute; left:26px; top:14px; bottom:14px; width:1px; background:var(--line-d); }
.jn{ display:flex; gap:24px; padding:18px 0; align-items:baseline; position:relative; }
.jn .n{ width:50px; flex:none; font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--amber-deep); position:relative; z-index:1; }
.jn .n span{ background:var(--ink); padding-right:10px; }
section.block.paper .jn .n span{ background:var(--paper); }
.jn h3{ font-size:19px; font-weight:600; letter-spacing:-0.02em; }
.jn p{ margin-top:4px; font-size:14px; margin-bottom:0; }

.steplist{ counter-reset:step; list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; }
.steplist li{ counter-increment:step; border:1px solid var(--line-d); border-radius:8px; padding:16px 16px 16px 42px; font-size:13.5px; color:var(--t-mid); position:relative; }
.steplist li::before{ content:counter(step, decimal-leading-zero); position:absolute; left:14px; top:15px; font-family:var(--font-mono); font-size:11.5px; color:var(--amber); }

/* role table */
table.roles{ width:100%; border-collapse:collapse; font-size:14px; margin-top:8px; }
table.roles th, table.roles td{ text-align:left; padding:14px 16px; border-bottom:1px solid var(--line-d); }
table.roles th{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--t-low); font-weight:600; }
table.roles td:first-child{ color:var(--t-hi); font-weight:600; }
table.roles td{ color:var(--t-mid); }

/* screenshot frame */
.frame{ border:1px solid var(--line-d); border-radius:var(--radius-lg); overflow:hidden; background:var(--ink-3); box-shadow:0 40px 90px -40px rgba(0,0,0,0.7); }
.frame-cap{ font-family:var(--font-mono); font-size:11.5px; color:var(--t-low); padding:12px 16px; border-top:1px solid var(--line-d); }
.frame .placeholder{
  aspect-ratio:16/9; display:flex; align-items:center; justify-content:center;
  color:var(--t-low); font-family:var(--font-mono); font-size:12.5px; text-align:center;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 14px);
}

/* CTA band */
.cta-band{ text-align:center; }
.cta-band h2{ font-size:clamp(30px,4.6vw,50px); letter-spacing:-0.035em; max-width:780px; margin:0 auto 18px; line-height:1.1; }
.cta-band p.lead{ margin:0 auto 30px; max-width:600px; }
.cta-band .hero-ctas{ justify-content:center; }

/* FAQ */
.faq-item{ border-bottom:1px solid var(--line-d); padding:22px 0; }
.faq-item h3{ font-size:16px; font-weight:600; margin-bottom:8px; }
.faq-item p{ font-size:14.5px; margin-bottom:0; }

/* breadcrumb */
.breadcrumb{ font-family:var(--font-mono); font-size:11.5px; color:var(--t-low); padding:20px 0 0; }
.breadcrumb a{ color:var(--t-low); }
.breadcrumb a:hover{ color:var(--t-mid); }

/* related links */
.related{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin-top:16px; }
.related a{ display:block; border:1px solid var(--line-d); border-radius:8px; padding:16px 18px; font-size:13.5px; color:var(--t-mid); }
.related a:hover{ border-color:var(--amber); color:var(--t-hi); }
.related a span{ display:block; font-family:var(--font-mono); font-size:11px; color:var(--t-low); margin-top:6px; }

/* ---------- Footer ---------- */
footer.site{ background:var(--ink-2); border-top:1px solid var(--line-d); padding:60px 0 34px; }
.ft{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; }
@media (max-width:820px){ .ft{ grid-template-columns:1fr 1fr; gap:32px; } }
@media (max-width:520px){ .ft{ grid-template-columns:1fr; } }
.ft-brand .nm{ font-weight:700; font-size:17px; letter-spacing:-0.02em; display:flex; align-items:center; gap:8px; }
.ft-brand p{ margin-top:10px; font-size:12.5px; line-height:1.6; color:var(--t-low); }
.ft h4{ margin-bottom:14px; }
.ft ul{ list-style:none; display:flex; flex-direction:column; gap:9px; margin:0; padding:0; }
.ft ul a{ font-size:13.5px; color:var(--t-mid); transition:color .2s; }
.ft ul a:hover{ color:var(--t-hi); }
.ft-bot{ margin-top:48px; padding-top:22px; border-top:1px solid var(--line-d); font-size:12px; color:var(--t-low); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }