/* ══════════════════════════════════════════════════════════════════
   AAT FORWARDING — V2 DESIGN SYSTEM
   Authoritative brand colours (do not alter):
     #2A4A81 primary blue · #FEEC4D yellow
     #16174B deep navy surface · #101138 dark base
   Breakpoints are deliberate compositions, not scaled versions:
     mobile  <  700   single column, thumb-first, sticky call bar
     tablet  700-1023 two-up cards, rail below content
     laptop  1024-1399 12-col grid, rail beside content
     desktop >= 1400  wider measure, larger display scale
   ══════════════════════════════════════════════════════════════════ */
/* While the web fonts load, Arial stands in at Archivo's and Source Sans 3's width (24.10.2026): a heading never shows narrow
   ("Arial Narrow" drew it tall and thin) and nothing moves when the fonts arrive. Measured on the site's own words. */
@font-face{font-family:"Archivo Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica"),local("Liberation Sans");font-weight:100 599;size-adjust:100.3%;ascent-override:87.5%;descent-override:20.9%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Helvetica-Bold"),local("Liberation Sans Bold");font-weight:600 900;size-adjust:98.5%;ascent-override:89.1%;descent-override:21.3%;line-gap-override:0%}
@font-face{font-family:"Source Sans 3 Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica"),local("Liberation Sans");font-weight:100 599;size-adjust:94.4%;ascent-override:108.4%;descent-override:42.4%;line-gap-override:0%}
@font-face{font-family:"Source Sans 3 Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Helvetica-Bold"),local("Liberation Sans Bold");font-weight:600 900;size-adjust:93%;ascent-override:110.2%;descent-override:43%;line-gap-override:0%}
:root{
  --blue:#2A4A81; --blue-d:#1F3862; --blue-l:#3D63A2;
  --gold:#FEEC4D; --navy:#16174B; --dark:#101138;
  --on-dark:#FFFFFF; --on-dark-soft:#BCC4D9;
  --paper:#FFFFFF; --paper-2:#F4F6F9; --paper-3:#EAEEF4;
  --text:#14171F; --muted:#59626F; --rule:#D8DCE4;
  --disp:"Archivo","Archivo Fallback",Helvetica,Arial,sans-serif;
  --body:"Source Sans 3","Source Sans 3 Fallback","Segoe UI",system-ui,sans-serif;
  /* One curve for what moves: out fast, settled softly (Emil Kowalski's strong ease-out). */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --serif:"Playfair Display",Georgia,serif;
  --gut:clamp(20px,calc(-4.47px + 6.275vw),116px);
  --maxw:2040px;
  --sect:clamp(56px,calc(42.75px + 3.399vw),108px);
  --hdr-h:64px;

  /* ── spacing scale: every vertical gap on the site is one of these ── */
  --s1:8px; --s2:clamp(12px,calc(10.47px + 0.392vw),18px);
  --s3:clamp(16px,calc(13.45px + 0.654vw),26px);
  --s4:clamp(24px,calc(19.92px + 1.046vw),40px);
  --s5:clamp(32px,calc(25.37px + 1.699vw),58px);
  --s6:clamp(44px,calc(33.29px + 2.745vw),92px);
  /* ── divider system: three components, three fixed treatments ── */
  --accent-w:44px; --accent-h:4px;      /* yellow accent above a section title */
  --link-underline:2px;                  /* yellow underline on an inline link  */
  --card-border:3px;                     /* structural card top border, blue    */
  /* ── sticky element heights (content must never hide behind these) ── */
  --callbar-h:62px;
}
@media(min-width:1024px){:root{--hdr-h:84px}}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--text);font-family:var(--body);
     font-size:clamp(18px,calc(17.36px + 0.163vw),20.5px);line-height:1.66;-webkit-font-smoothing:antialiased;
     overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--disp);font-weight:700;line-height:1.04;letter-spacing:-.018em}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
ul{list-style:none}
/* QA: sticky header must never cover a target heading */
[id]{scroll-margin-top:calc(var(--hdr-h) + 24px)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.measure{max-width:none}
.g12{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,calc(12.39px + 1.438vw),40px)}
/* every grid child spans the full row unless a later rule narrows it.
   Without this, a class-name mismatch collapses an item to 1/12 width. */
.g12>*{min-width:0;grid-column:1/-1}
.eyebrow{font-family:var(--mono);font-size:clamp(13px,calc(12.49px + 0.131vw),15px);font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.tagline{font-family:var(--serif);font-style:italic;color:var(--gold)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--gold);color:var(--dark);padding:10px 16px;font-family:var(--mono);font-size:12px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.on-dark :focus-visible{outline-color:var(--gold)}

/* ══════════════════════════════════════════════════════════════
   TYPOGRAPHIC HIERARCHY — four explicit, distinct levels.
   L1 .stitle    MAJOR SECTION TITLE   dominant, uppercase
   L2 .stmt      section statement     large, clearly subordinate
   L3 .lead      lead / body
   L4 .sublabel  subsection label      smaller, still comfortable
   Nothing readable is set below 12px anywhere on the site.
   ══════════════════════════════════════════════════════════════ */
.stitle{font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(23px,calc(19.69px + 0.850vw),36px);line-height:1.16;letter-spacing:.04em;
  color:var(--blue);max-width:none;position:relative;
  padding-top:16px;margin-bottom:var(--s2)}
.stitle::before{content:"";position:absolute;left:0;top:0;width:var(--accent-w);height:var(--accent-h);background:var(--gold)}
.on-dark .stitle{color:#fff}
.stmt{font-family:var(--disp);font-weight:600;
  font-size:clamp(21px,calc(19.22px + 0.458vw),28px);line-height:1.3;letter-spacing:-.008em;
  color:var(--text);max-width:none;text-wrap:nowrap}
.on-dark .stmt{color:#fff}
.sublabel{font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(18px,calc(16.98px + 0.261vw),22px);letter-spacing:.08em;color:var(--blue);line-height:1.3}
.on-dark .sublabel{color:var(--gold)}
.railtitle{font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(23px,calc(19.69px + 0.850vw),36px);letter-spacing:.04em;color:var(--blue);
  margin-bottom:var(--s3);line-height:1.25;padding-top:15px;position:relative}
.railtitle::before{content:"";position:absolute;left:0;top:0;width:var(--accent-w);height:var(--accent-h);background:var(--gold)}
.on-dark .railtitle{color:var(--gold)}
.kicker{font-family:var(--mono);font-weight:500;font-size:clamp(13px,calc(12.24px + 0.196vw),16px);letter-spacing:.16em;
  text-transform:uppercase;display:block}

/* ══════════════════════════════════════════════════════════════
   MOBILE FLOW — text fills the available width and wraps naturally.
   Nothing here is a scaled-down desktop rule.
   ══════════════════════════════════════════════════════════════ */
@media(max-width:820px){
  /* balance breaks headings into short even lines — that is the opposite
     of flowing. Let every line run to the edge of the column. */
  h1,h2,h3,h4,.stmt,.lead,p{text-wrap:normal}
  .hero h1,
  .stitle,.railtitle{letter-spacing:.04em;max-width:none}
  .sublabel{letter-spacing:.08em}

  /* the group label + its note stack instead of fighting over one line */
  .gl{display:block;border-bottom:2px solid var(--blue);padding-bottom:var(--s2);margin-bottom:var(--s2)}
  .gl small{display:block;margin-top:4px;font-family:var(--body);font-size:clamp(18px,calc(17.49px + 0.131vw),20px);color:var(--muted);line-height:1.4}

  /* rail: label above value, full width — not a squeezed two-column table */
  .rail dl{display:block}
  .rail dt{margin-top:var(--s3)}
  .rail dd{margin-top:2px}

  /* the section divider label is absolutely positioned on desktop; on a
     narrow screen it wraps and overlaps whatever follows. Make it flow. */
  .brk{height:auto;background:none;margin:34px 0}
  .brk span{position:static;display:block;background:none;padding:14px 0 0;
    border-top:2px solid var(--blue);letter-spacing:.06em}

  /* long unbroken strings (numbers, emails, uppercase labels) never overflow */
  body{overflow-wrap:break-word}
  .hero .kicker::after{display:none}
  .hero .kicker{gap:0 10px}
}
@media(max-width:420px){
  .lock .wm{font-size:14px}
  .lock .wm i{letter-spacing:.22em}
  .cta-sm{padding:10px 12px;font-size:11.5px}
  body .callbar{padding-left:14px;padding-right:14px;gap:8px}
  body .callbar b{font-size:17px}
}

/* ══════════════════════════════════════════════════════════════
   NO TEXT MAY EVER LEAVE ITS CONTAINER.
   Nothing that renders words is allowed to use white-space:nowrap.
   Long words, phone numbers and emails break rather than overflow.
   ══════════════════════════════════════════════════════════════ */
h1,h2,h3,h4,p,li,dd,dt,summary,span,a,b,em,small,.stmt,.lead,.stitle,.railtitle,
.sublabel,.gnote,.kicker,.eyebrow,.crumb{
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
  max-width:100%;
}
/* the only exceptions are single-word chrome elements that must not break */
.brand .wm,.nav a,.cta-sm,.callbar span,.callbar b,.top-call{white-space:nowrap}
.wrap,.g12,section,main,footer{max-width:100%;min-width:0}
.g12>*{min-width:0}

/* ── utility strip (laptop+) ───────────────────────────── */
.util{background:var(--dark);color:var(--on-dark-soft);display:none}
.util .wrap{display:flex;justify-content:space-between;align-items:center;height:42px;gap:20px}
.util span,.util a{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.util a{color:var(--gold)}
@media(hover:hover) and (pointer:fine){.util a:hover{text-decoration:underline}}
@media(min-width:1024px){.util{display:block}}

/* ── header ────────────────────────────────────────────── */
.hdr{background:var(--navy);position:sticky;top:0;z-index:60;box-shadow:0 1px 0 rgba(255,255,255,.14)}
.hdr .wrap{display:flex;align-items:center;gap:clamp(14px,calc(7.37px + 1.699vw),40px);height:var(--hdr-h)}
.lock{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.lock img{width:44px}
.lock .wm{font-family:var(--disp);font-weight:700;color:#fff;font-size:15.5px;line-height:1;white-space:nowrap}
.lock .wm i{display:block;font-style:normal;font-size:10px;font-weight:600;letter-spacing:.28em;color:var(--gold);margin-top:3px}
.nav{display:none;gap:clamp(12px,calc(7.92px + 1.046vw),28px);margin-left:auto;align-items:center}
.nav a{font-size:clamp(14.5px,calc(13.61px + 0.229vw),18px);color:#fff;text-decoration:none;opacity:.86;padding:7px 0;border-bottom:2px solid transparent;transition:opacity .18s,border-color .18s;white-space:nowrap}
.nav a[aria-current]{opacity:1;border-bottom-color:var(--gold)}
@media(hover:hover) and (pointer:fine){.nav a:hover{opacity:1;border-bottom-color:var(--gold)}}
/* The header's call in the shape of the hero's (24.10.2026, the pills). */
.cta-sm{display:inline-flex;align-items:center;gap:.45em;margin-left:auto;background:var(--gold);color:var(--dark);font-family:var(--disp);font-size:15px;font-weight:700;letter-spacing:.005em;text-transform:none;padding:11px 20px;border-radius:999px;text-decoration:none;white-space:nowrap;transition:filter .18s,transform .16s var(--ease-out)}
@media(hover:hover) and (pointer:fine){.cta-sm:hover{filter:brightness(1.08)}}
@media(min-width:1024px){.lock img{width:54px}.lock .wm{font-size:16.5px}}
@media(min-width:1120px){.nav{display:flex}.cta-sm{margin-left:clamp(12px,calc(7.92px + 1.046vw),28px)}}

/* ── mobile sticky call bar ────────────────────────────── */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--gold);min-height:calc(var(--callbar-h) + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px));text-decoration:none;color:var(--dark);
  box-shadow:0 -8px 24px -12px rgba(16,17,56,.55);transition:transform .16s var(--ease-out)}
.callbar b{font-family:var(--disp);font-weight:700;font-size:18.5px}
.callbar span{font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase}
body{padding-bottom:calc(var(--callbar-h) + env(safe-area-inset-bottom,0px))}
/* The page ends dark where it ends (AAT Forwarding LLC, 24.10.2026, his screenshot of a page's end on his phone: "Seite geht höher als es
   sein muss"): the space kept for the call bar is the footer's, not the light page's, and a phone bouncing past either end shows the dark
   of the header and the footer, never white. The bar is as high as that space, the phone's own bottom edge included. */
html{background:var(--dark)}
body:has(footer){padding-bottom:0}
body:has(footer) footer{padding-bottom:calc(34px + var(--callbar-h) + env(safe-area-inset-bottom,0px))}
@media(min-width:1024px){.callbar{display:none}body{padding-bottom:0}body:has(footer) footer{padding-bottom:34px}}

/* ══════════════════════════════════════════════════════════════
   A350 HERO — the shared hero component. Used by the homepage and
   by every service page. Content differs; the treatment does not.
   ══════════════════════════════════════════════════════════════ */
.hero{position:relative;background:var(--dark);color:#fff;overflow:hidden;isolation:isolate}
.hero-img{position:absolute;inset:0;z-index:-2}
/* The picture shown from near its top (24.10.2026): with the ways in beside the headline, the cockpit windows — "die zorro maske vom
   A350" — stay below them on the shorter heroes of the inner pages too. */
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:58% 8%}
.hero-scrim{position:absolute;inset:0;z-index:-1;background:
 linear-gradient(96deg,rgba(16,17,56,.97) 0%,rgba(16,17,56,.93) 34%,rgba(22,23,75,.74) 63%,rgba(22,23,75,.52) 100%),
 linear-gradient(to top,rgba(16,17,56,.96) 0%,rgba(16,17,56,0) 48%)}
.hero .wrap{position:relative;padding:clamp(40px,calc(26.75px + 3.399vw),92px) var(--gut) 0}
.hero .kicker{color:var(--gold);display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;line-height:1.4;margin-bottom:clamp(18px,calc(13.92px + 1.046vw),34px)}
.hero .kicker::after{content:"";flex:1 0 40px;max-width:130px;height:1px;background:rgba(254,236,77,.45)}
.hero h1{font-size:clamp(30px,calc(21.33px + 2.222vw),64px);max-width:20ch;text-wrap:pretty;line-height:1.06;letter-spacing:-.022em}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero .lede{margin-top:clamp(16px,calc(12.43px + 0.915vw),30px);max-width:44ch;font-size:clamp(19px,calc(17.73px + 0.327vw),24px);color:#DDE2EE;line-height:1.5}
.hero .tagline{margin-top:clamp(14px,calc(10.94px + 0.784vw),26px);font-size:clamp(20px,calc(16.94px + 0.784vw),32px);display:block}
.hero-act{margin-top:clamp(26px,calc(21.41px + 1.176vw),44px);grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px 28px}
/* Beneath the ways in, the company as anyone can check it (24.10.2026, the website led to the request: trust only from what is so,
   the site's own structured data, a Florida LLC with its D-U-N-S number). */
.hero-proof{flex-basis:100%;margin:0;font-size:clamp(14px,calc(13.49px + 0.131vw),16px);line-height:1.45;color:var(--on-dark-soft)}
/* The company's facts as one small block (24.10.2026: "eine etwas feinere typografische Gruppierung … ohne deine gewünschte
   Zweizeiligkeit aufzugeben"): a gold hairline beside both lines; the sentence in the text face, the registry number in the face of the
   line above the headline. */
.hero-proof{border-left:2px solid var(--gold);padding-left:12px}
.hero-proof span{display:block}
.hero-proof .duns{margin-top:2px;font-family:var(--mono);font-size:.84em;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.hero-proof .duns b{font-weight:500;color:#fff}
.hero-head{grid-column:1/-1}
.hstrip{margin-top:clamp(32px,calc(24.86px + 1.830vw),60px);border-top:1px solid rgba(255,255,255,.22);display:grid;grid-template-columns:1fr 1fr}
.hstrip div{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.hstrip .l{font-family:var(--mono);font-size:clamp(12px,calc(11.24px + 0.196vw),15px);letter-spacing:.13em;text-transform:uppercase;color:var(--on-dark-soft);display:block}
.hstrip .v{font-family:var(--disp);font-weight:600;font-size:clamp(17px,calc(16.24px + 0.196vw),20px);margin-top:6px;display:block}
@media(min-width:700px){.hstrip{grid-template-columns:repeat(4,1fr);gap:0 clamp(18px,calc(12.39px + 1.438vw),40px)}
 .hstrip div{border-bottom:none;padding:18px 0 24px}}
@media(min-width:1024px){.hero .wrap{padding-bottom:0}.hero-head{grid-column:1/8}}
/* The ways in beside the headline, on the aircraft's nose above its cockpit windows (AAT Forwarding LLC, 24.10.2026: "startseite zu
   gross! die CTA's nach rechts Höhe When bla bla bla also über die Maske vom A350", "ich mein die zorro maske vom A350"): from 1,280 px
   on the two buttons stand side by side where the headline starts (under the breadcrumb where a page has one), the company's line above
   them where the line above the headline ends, so what is beneath the buttons ends above the windows; the hero is no taller than its
   text. Narrower, two stacked buttons would sit on the windows: there they stay under the text. The small lines are lighter, with a
   shadow, for reading on the light nose. */
@media(min-width:1280px){
  .hero{--hero-h1-top:calc(1.4 * clamp(13px,calc(12.24px + 0.196vw),16px) + clamp(18px,calc(13.92px + 1.046vw),34px))}
  .hero .g12:has(.crumb){--hero-h1-top:calc(1.4 * clamp(13px,calc(12.24px + 0.196vw),16px) + clamp(18px,calc(13.92px + 1.046vw),34px) + 1.35 * clamp(15px,calc(14.49px + 0.131vw),17px) + var(--s3))}
  .hero-act{grid-column:8/13;grid-row:1;align-self:start;margin-top:var(--hero-h1-top);position:relative;flex-wrap:nowrap}
  .hero-act .callbtn,.hero-act .altbtn,.hero-act .actline a{white-space:nowrap}
  .hero-proof{position:absolute;left:0;right:0;bottom:calc(100% + clamp(18px,calc(13.92px + 1.046vw),34px));font-size:clamp(13px,calc(12.24px + 0.196vw),16px);line-height:1.4}
  .hero-act .actline,.hero-proof{color:#DDE2EE;text-shadow:0 1px 3px rgba(16,17,56,.9)}
  /* Behind them a soft shade without edges (24.10.2026: "den Kontrast etwas verbessern, damit die Lesbarkeit unabhängig vom Hintergrund
     garantiert ist"): half the navy, blurred, so even a white of the picture stays dark enough under the small lines. */
  .hero-act::before,.hero-proof::before{content:"";position:absolute;z-index:-1;inset:-24px -32px;border-radius:40px;background:rgba(16,17,56,.5);filter:blur(20px);pointer-events:none}
}

/* hero on an interior page: breadcrumb sits above the kicker */
.hero .crumb{position:relative;margin-bottom:var(--s3)}
@media(hover:hover) and (pointer:fine){.hero-head .crumb a:hover{color:var(--gold)}}

/* ── page hero (interior pages without the A350) ───────────── */

.crumb{font-family:var(--mono);font-size:clamp(13px,calc(12.49px + 0.131vw),15px);letter-spacing:.11em;text-transform:uppercase;color:var(--on-dark-soft);margin-bottom:clamp(20px,calc(16.43px + 0.915vw),34px)}
.crumb a{text-decoration:none;color:var(--on-dark-soft)}
@media(hover:hover) and (pointer:fine){.crumb a:hover{color:var(--gold)}}
.crumb span{color:#fff}

@media(min-width:700px){}

/* ── sections ──────────────────────────────────────────── */
.sect{padding:var(--sect) 0}
.sect+.sect{border-top:1px solid var(--rule)}
.sect.tint{background:var(--paper-2)}
.shead{display:none}
.shead .eyebrow{color:var(--blue);flex-shrink:0}
.shead::after{content:"";flex:1;height:1px;background:var(--rule)}
.on-dark .shead::after{background:rgba(255,255,255,.24)}
.on-dark .shead .eyebrow{color:var(--gold)}
h2.big{font-size:clamp(21px,calc(19.22px + 0.458vw),28px);max-width:none;color:var(--text);text-wrap:nowrap}
.on-dark h2.big{color:#fff}
h3.mid{font-size:clamp(19px,calc(18.24px + 0.196vw),22px);color:var(--blue);margin-bottom:12px}
.lead{font-size:clamp(19px,calc(18.49px + 0.131vw),21px);color:var(--muted);max-width:none;margin-top:var(--s2);line-height:1.5}
.on-dark .lead{color:#DDE2EE}
.prose{max-width:none}
.gnote,.prose p,.step p,.why p,.faq p,.pcard p{max-width:74ch}
/* leads are single-sentence intros: wide enough to stay on one line on
   desktop, still wrapping naturally on narrow screens (no nowrap). */
.lead{max-width:112ch}
.prose p{margin-top:clamp(14px,calc(12.47px + 0.392vw),20px);color:var(--muted);font-size:clamp(18px,calc(17.49px + 0.131vw),20px);line-height:1.55;max-width:none}
.prose h2{font-size:clamp(21px,calc(18.71px + 0.588vw),30px);color:var(--blue);margin-top:clamp(28px,calc(23.41px + 1.176vw),46px);max-width:none;letter-spacing:-.012em}
.prose h3{font-size:clamp(19px,calc(18.24px + 0.196vw),22px);color:var(--blue);margin-top:clamp(28px,calc(23.92px + 1.046vw),44px)}
.prose h4{font-size:clamp(18px,calc(17.49px + 0.131vw),20px);font-family:var(--body);font-weight:700;margin-top:22px}
.prose ul{margin-top:14px}
.prose li{position:relative;padding-left:18px;margin-top:9px;color:var(--muted)}
.prose li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;background:var(--blue)}
.prose a{color:var(--blue);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px}
/* A numbered list numbered once, in the blue of the request form's numbered parts (25.10.2026): the square stays the bullet's. */
.prose ol{margin-top:14px;padding-left:0;list-style:none;counter-reset:prose-ol}
.prose ol>li{padding-left:30px;counter-increment:prose-ol}
.prose ol>li::before{content:counter(prose-ol) ".";top:0;width:auto;height:auto;background:none;font-family:var(--disp);font-weight:700;color:var(--blue);font-variant-numeric:tabular-nums}
/* An article's pictures (AAT Forwarding LLC, 25.10.2026: "echte App-Screenshots"): the app's screens as phones, two side by side,
   each with its caption; on a phone one under the other. The picture's width and height give its shape before it loads. */
.prose figure{display:inline-block;vertical-align:top;width:calc(50% - 12px);max-width:280px;margin:var(--s4) 0 var(--s3)}
.prose figure+figure{margin-left:24px}
.prose figure img{display:block;width:100%;height:auto;box-sizing:border-box;border:8px solid var(--dark);border-radius:32px;background:var(--dark);
  box-shadow:0 22px 44px -22px rgba(16,17,56,.55)}
.prose figcaption{margin-top:12px;font-size:14px;line-height:1.45;color:var(--muted);text-align:center}
@media(max-width:560px){.prose figure{display:block;width:76%;max-width:300px;margin:var(--s4) auto var(--s2)}.prose figure+figure{margin-left:auto}}
/* The day an article went live beside "Insights"; a hyphenated word of its heading on one line ("On-Board", 25.10.2026). */
.hero .kicker time{font-weight:400;opacity:.8}
.hero h1 .nw{white-space:nowrap}

/* ── custody line ──────────────────────────────────────── */
.chain{position:relative;padding-left:40px;margin-top:clamp(28px,calc(22.39px + 1.438vw),50px)}
.chain::before{content:"";position:absolute;left:6px;top:10px;bottom:12px;width:2px;
  background:linear-gradient(to bottom,var(--blue) 0%,var(--blue) 82%,rgba(42,74,129,.2) 100%)}
.step{position:relative;padding-bottom:var(--s4)}
.step:last-child{padding-bottom:0}
.step::before{content:"";position:absolute;left:-38px;top:8px;width:14px;height:14px;border-radius:50%;
  background:var(--gold);border:2px solid var(--blue);box-shadow:0 0 0 4px var(--paper)}
.tint .step::before{box-shadow:0 0 0 4px var(--paper-2)}
.step.last::before{background:var(--blue)}
.step .k{font-family:var(--mono);font-weight:500;font-size:clamp(13px,calc(12.36px + 0.163vw),16px);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px}
.step h3{font-size:clamp(19px,calc(18.24px + 0.196vw),22px);color:var(--text)}
.step p{color:var(--muted);max-width:none;margin-top:8px;font-size:clamp(18px,calc(17.49px + 0.131vw),20px);line-height:1.55}

/* ── content + rail ────────────────────────────────────── */
.main8{grid-column:1/-1}
.rail{grid-column:1/-1;margin-top:var(--s4);border-top:2px solid var(--blue);padding-top:var(--s3)}

.rail dt{font-family:var(--disp);color:var(--muted);text-transform:uppercase;font-size:clamp(13px,calc(12.49px + 0.131vw),15px);letter-spacing:.14em;margin-top:var(--s3);font-weight:700}
.rail dd{font-family:var(--body);color:var(--blue);font-weight:600;font-size:clamp(18px,calc(17.49px + 0.131vw),20px);line-height:1.4;margin-top:4px}
.on-dark .rail dd{color:var(--gold)}
@media(min-width:1024px){
  .main8{grid-column:1/9}
  .rail{grid-column:9/13;margin-top:0;border-top:none;border-left:2px solid var(--blue);padding:2px 0 0 clamp(24px,calc(18.90px + 1.307vw),44px)}
}

/* ── product cards / control groups ────────────────────── */
.gl{display:block;border-bottom:2px solid var(--blue);padding-bottom:var(--s2);margin-bottom:var(--s2)}
.gl .eyebrow{color:var(--blue)}
.gl small{display:block;margin-top:4px;font-family:var(--body);font-size:clamp(18px,calc(17.49px + 0.131vw),20px);color:var(--muted);line-height:1.4}
.gnote{color:var(--muted);max-width:none;overflow-wrap:break-word;overflow-wrap:break-word;margin-bottom:var(--s3);font-size:clamp(18px,calc(17.49px + 0.131vw),20px);margin-top:var(--s1);line-height:1.55}
.pcard{grid-column:1/-1;background:var(--paper);border:1px solid var(--rule);border-top:var(--card-border) solid var(--blue);
  padding:clamp(22px,calc(14.35px + 1.961vw),52px);text-decoration:none;display:block;
  transition:border-color .2s,box-shadow .2s,transform .2s var(--ease-out)}
@media(hover:hover) and (pointer:fine){.pcard:hover{box-shadow:0 16px 44px -24px rgba(20,23,31,.5);transform:translateY(-2px);border-color:var(--blue)}}
.pcard .st{font-family:var(--disp);font-weight:700;font-size:clamp(14px,calc(13.36px + 0.163vw),17px);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px}
.pcard h3{font-size:clamp(20px,calc(18.98px + 0.261vw),24px);letter-spacing:-.012em;color:var(--blue)}
.pcard p{color:var(--muted);margin-top:clamp(10px,calc(8.47px + 0.392vw),16px);font-size:clamp(18px,calc(17.49px + 0.131vw),20px);max-width:none;line-height:1.62}
.pcard .go{font-family:var(--mono);font-size:clamp(12px,calc(11.24px + 0.196vw),15px);letter-spacing:.12em;text-transform:uppercase;color:var(--blue);
  margin-top:var(--s3);display:inline-block;border-bottom:var(--link-underline) solid var(--gold);padding-bottom:3px}
.pcard.car.solo{grid-column:1/-1}
.pcard.car{border-top-color:var(--blue);background:linear-gradient(180deg,rgba(42,74,129,.05),rgba(42,74,129,0))}
.brk{margin:var(--s5) 0;position:relative;height:2px;background:var(--rule)}
.brk span{position:absolute;left:0;top:50%;transform:translateY(-50%);background:var(--paper);padding-right:22px;
  font-family:var(--disp);font-weight:700;font-size:clamp(15px,calc(13.72px + 0.327vw),20px);
  letter-spacing:.06em;text-transform:uppercase;color:var(--blue);line-height:1.2}
.tint .brk span{background:var(--paper-2)}
.brk{overflow:visible}
.note{grid-column:1/-1;border-left:3px solid var(--blue);padding:6px 0 6px 20px}
.note h3{font-family:var(--body);font-size:16px;font-weight:700;color:var(--text);letter-spacing:0}
.note p{color:var(--muted);font-size:clamp(17px,calc(16.49px + 0.131vw),19px);margin-top:8px;max-width:none;line-height:1.62}
@media(min-width:700px){.pcard{grid-column:span 6}}
@media(min-width:900px){.pcard.car{grid-column:span 8}.note{grid-column:span 5;align-self:center}}

/* ── capability band ───────────────────────────────────── */
.band{background:var(--paper-2);border-bottom:1px solid var(--rule)}
.band .wrap{padding:clamp(26px,calc(19.88px + 1.569vw),50px) var(--gut)}
.band .banditems{margin-top:var(--s3)}
.band .stitle{margin-bottom:var(--s2)}
.band .i{grid-column:1/-1;border-top:1px solid var(--rule);padding-top:var(--s2)}
.band h3{font-size:clamp(18px,calc(17.49px + 0.131vw),20px);font-family:var(--body);font-weight:700;margin-top:11px;letter-spacing:0}
.band p{font-size:clamp(17px,calc(16.62px + 0.098vw),18.5px);color:var(--muted);margin-top:7px;line-height:1.55}
@media(min-width:700px){.band .i{grid-column:span 6}}
@media(min-width:1024px){.band .i{grid-column:span 3}}

/* ── situations grid ───────────────────────────────────── */
.sits{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:var(--s4)}
.sit{background:var(--paper);padding:clamp(24px,calc(19.92px + 1.046vw),40px);text-decoration:none;transition:background .18s,box-shadow .18s,transform .2s var(--ease-out)}
@media(hover:hover) and (pointer:fine){.sit:hover{background:var(--paper-2);box-shadow:inset 3px 0 0 var(--gold)}}
.sit h3{font-family:var(--body);font-weight:700;font-size:clamp(18px,calc(17.49px + 0.131vw),20px);letter-spacing:0;line-height:1.3}
.sit .m{font-family:var(--mono);font-weight:500;font-size:clamp(13px,calc(12.36px + 0.163vw),16px);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:6px;display:block}
.sit .rt{font-family:var(--mono);font-weight:500;font-size:clamp(13px,calc(12.36px + 0.163vw),16px);letter-spacing:.06em;text-transform:uppercase;color:var(--blue);margin-top:12px;display:block}
@media(min-width:700px){.sits{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.sits{grid-template-columns:repeat(3,1fr)}}

/* ── tagline band ──────────────────────────────────────── */
.tband{background:var(--blue);color:#fff;text-align:center}
.tband .wrap{padding:clamp(44px,calc(32.78px + 2.876vw),88px) var(--gut)}
.tband .tagline{font-size:clamp(22px,calc(17.41px + 1.176vw),40px);display:block;line-height:1.1}
.tband p{color:#E3E8F3;margin-top:clamp(14px,calc(11.96px + 0.523vw),22px);font-size:clamp(16px,calc(14.73px + 0.327vw),21px);max-width:34ch;margin-inline:auto;line-height:1.4}

/* ── why columns ───────────────────────────────────────── */
.why{grid-column:1/-1;border-top:2px solid var(--blue);padding-top:16px}
.why h3{font-size:clamp(19px,calc(18.24px + 0.196vw),22px);color:var(--blue)}
.why p{color:var(--muted);margin-top:11px;font-size:clamp(18px,calc(17.49px + 0.131vw),20px);line-height:1.55}
@media(min-width:700px){.why{grid-column:span 6}}
@media(min-width:1024px){.why{grid-column:span 4}}

/* ── facts ─────────────────────────────────────────────── */
.facts{margin-top:var(--s4);border-top:1px solid var(--rule);padding-top:20px;max-width:64ch}

.facts li{font-family:var(--body);font-size:clamp(18px,calc(17.49px + 0.131vw),20px);line-height:1.7;padding-left:16px;position:relative}
.facts li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;background:var(--blue)}

/* ── faq (semantic, AI-search friendly) ────────────────── */
.faq{margin-top:clamp(24px,calc(20.43px + 0.915vw),38px);border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;padding:clamp(21px,calc(19.22px + 0.458vw),28px) 0;font-family:var(--disp);font-weight:600;font-size:clamp(19px,calc(18.49px + 0.131vw),21px);
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--blue);font-size:clamp(22px,calc(19.96px + 0.523vw),30px);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{color:var(--blue)}
.faq p{color:var(--muted);padding:0 0 24px;max-width:none;font-size:clamp(18px,calc(17.49px + 0.131vw),20px);line-height:1.55}

/* ── intake entry card (shared component) ──────────────── */
.entry{grid-column:1/-1;border:1px solid var(--rule);border-left:5px solid var(--blue);
 background:var(--paper);padding:clamp(20px,calc(13.88px + 1.569vw),44px);text-decoration:none;display:block;
 transition:border-color .18s,box-shadow .18s,transform .2s var(--ease-out)}
@media(hover:hover) and (pointer:fine){.entry:hover{box-shadow:0 14px 40px -24px rgba(20,23,31,.45);transform:translateY(-2px);border-left-color:var(--gold)}}
.entry .st{font-family:var(--mono);font-size:clamp(12.5px,calc(11.86px + 0.163vw),15px);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px}
.entry h3{font-size:clamp(19px,calc(18.24px + 0.196vw),22px);color:var(--blue);line-height:1.2}
.entry p{color:var(--muted);font-size:clamp(17px,calc(16.49px + 0.131vw),19px);margin-top:10px;max-width:none;line-height:1.6}
@media(min-width:900px){.entry{grid-column:span 6}}

/* ── intake ────────────────────────────────────────────── */
.intake{background:var(--navy);color:#fff}
.opt{grid-column:1/-1;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.05);
  padding:clamp(20px,calc(16.43px + 0.915vw),34px) clamp(22px,calc(18.43px + 0.915vw),36px);text-decoration:none;display:block;transition:border-color .18s,background .18s,transform .2s var(--ease-out)}
@media(hover:hover) and (pointer:fine){.opt:hover{border-color:var(--gold);background:rgba(255,255,255,.1);transform:translateY(-2px)}}
.opt b{display:block;font-weight:700;font-size:clamp(19px,calc(18.49px + 0.131vw),21px);line-height:1.25}
.opt span{color:var(--on-dark-soft);font-size:clamp(17px,calc(16.49px + 0.131vw),19px);display:block;margin-top:6px}
.ogrid{margin-top:var(--s4)}
@media(min-width:900px){.opt{grid-column:span 6}}

/* ── cta block ─────────────────────────────────────────── */
/* The ways in as pills (AAT Forwarding LLC, 24.10.2026: "die großen Rechtecke durch moderne, abgerundete Buttons ersetzen",
   "Höhe: ungefähr 48–54 px", "Telefonnummer: weiterhin gut sichtbar … direkt unter dem Call-Button", "Mobil: ausreichend große
   Touch-Flächen beibehalten", so that "der A350 im Hero mehr Aufmerksamkeit" gets): calling in the yellow, writing in an outline,
   each with its line beneath it, the number under the call. */
.act{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.act[hidden]{display:none}
.callbtn,.altbtn{display:inline-flex;align-items:center;gap:.5em;min-height:52px;padding:12px 26px;border-radius:999px;text-align:left;
  font-family:var(--disp);font-weight:700;font-size:17px;line-height:1.2;letter-spacing:.005em;text-decoration:none;
  transition:background-color .18s,border-color .18s,transform .16s var(--ease-out)}
.callbtn{background:var(--gold);color:var(--dark);border:0}
.altbtn{border:1px solid rgba(255,255,255,.55);color:#fff;background:rgba(16,17,56,.5)}
.altbtn b{font-weight:inherit}
/* The finish (AAT Forwarding LLC, 24.10.2026: "ein dezentes Pfeil- oder Telefonsymbol mit hochwertiger Hover-Animation"; the size
   stays): a call carries a handset that rings once under the pointer (the handset after Tabler Icons, MIT); the written way's arrow is
   drawn, not typed, and draws itself a little longer. */
:root{--icon-phone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E")}
a.callbtn[href^="tel:"]::before,a.cta-sm[href^="tel:"]::before{content:"";flex:none;width:1.05em;height:1.05em;background:currentColor;
  -webkit-mask:var(--icon-phone) center/contain no-repeat;mask:var(--icon-phone) center/contain no-repeat;transform-origin:50% 60%}
.altbtn i{position:relative;flex:none;display:inline-block;width:20px;height:12px;font-size:0;font-style:normal}
.altbtn i::before{content:"";position:absolute;left:0;top:5.25px;width:17px;height:1.5px;border-radius:1px;background:currentColor;transform-origin:0 50%;transition:transform .35s var(--ease-out)}
.altbtn i::after{content:"";position:absolute;left:9px;top:2.5px;width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);transition:transform .35s var(--ease-out)}
@keyframes ring{0%,100%{transform:rotate(0)}18%{transform:rotate(-12deg)}36%{transform:rotate(9deg)}54%{transform:rotate(-5deg)}72%{transform:rotate(2deg)}}
@media(hover:hover) and (pointer:fine){.callbtn:hover{background:#FFF27E}.altbtn:hover{border-color:var(--gold);background:rgba(16,17,56,.75)}.altbtn:hover i::before{transform:scaleX(1.3)}.altbtn:hover i::after{transform:translateX(5px) rotate(45deg)}a.callbtn[href^="tel:"]:hover::before,a.cta-sm[href^="tel:"]:hover::before{animation:ring .55s var(--ease-out)}}
.actline{margin:0;max-width:36ch;font-size:clamp(15px,calc(14.49px + 0.131vw),17px);line-height:1.4;color:var(--on-dark-soft)}
.actline a{font-family:var(--disp);font-weight:600;font-size:clamp(18px,calc(17.49px + 0.131vw),20px);color:#fff;text-decoration:none}
@media(hover:hover) and (pointer:fine){.actline a:hover{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}}
/* A page still in the earlier markup: the label and the number in the one pill, the line beneath left out. */
.callbtn .k,.callbtn .v{display:inline}.callbtn .v{margin-left:.45em}.altbtn>span{display:none}
.closer{background:var(--dark);color:#fff}
.closer .wrap{padding:clamp(44px,calc(31.76px + 3.137vw),92px) var(--gut)}

.closer .cgrid{align-items:start}
.closer .ctext,.closer .ccopy{grid-column:1/-1}
.closer .cwrap{grid-column:1/-1;margin-top:clamp(24px,calc(18.90px + 1.307vw),44px);max-width:clamp(520px,calc(458.82px + 15.686vw),760px);display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px 28px}
@media(min-width:1024px){
  .closer .ctext,.closer .ccopy{grid-column:1/7;align-self:start}
  .closer .cwrap{grid-column:7/13;margin-top:0;max-width:none;width:100%;justify-self:end;align-self:start}
}

/* ── footer ────────────────────────────────────────────── */
footer{background:var(--dark);color:var(--on-dark-soft);padding:clamp(44px,calc(33.80px + 2.614vw),84px) 0 34px;font-size:clamp(16.5px,calc(15.99px + 0.131vw),18.5px)}
footer .fb{grid-column:1/-1;margin-bottom:34px}
footer .fb .tagline{font-size:19px;display:block;margin-top:12px}
footer .fb p{margin-top:16px;max-width:38ch;font-size:clamp(15px,calc(14.24px + 0.196vw),18px);line-height:1.65}
footer .fc{grid-column:1/-1;margin-bottom:26px}
footer .fh{font-family:var(--disp);font-size:clamp(13px,calc(12.24px + 0.196vw),16px);letter-spacing:.15em;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.16);text-transform:uppercase;color:#fff;margin-bottom:14px;font-weight:700;line-height:1.3}
footer a{color:var(--on-dark-soft);text-decoration:none;display:block;padding:6px 0;line-height:1.4;transition:color .16s}
@media(hover:hover) and (pointer:fine){footer a:hover{color:var(--gold)}}
footer .legal{margin-top:clamp(30px,calc(23.37px + 1.699vw),56px);padding-top:24px;border-top:1px solid rgba(255,255,255,.18);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 30px;font-family:var(--mono);font-size:clamp(12px,calc(11.36px + 0.163vw),14.5px);letter-spacing:.09em;text-transform:uppercase}
@media(min-width:700px){footer .fb{grid-column:span 6;margin-bottom:34px}footer .fc{grid-column:span 3;margin-bottom:0;align-content:start}}
@media(min-width:1024px){footer .fb{grid-column:span 4;margin-bottom:0}footer .fc{grid-column:span 2;margin-bottom:0}footer .g12{row-gap:clamp(28px,2.4vw,44px)}}

/* ── portals: customer and courier portal (ABGA M02) ─────────
   In the utility strip on laptop and desktop, in the footer on every
   screen. Outline on dark like .altbtn; the yellow only on hover and
   for the current portal. The tagline gives way before the buttons do. */
.util .ur{display:flex;align-items:center;gap:16px}
.util a.pbtn{color:#fff;border:1px solid rgba(255,255,255,.42);border-radius:999px;padding:5px 12px;line-height:1.25;white-space:nowrap;transition:border-color .18s,transform .16s var(--ease-out)}
.util a.pbtn[aria-current]{border-color:var(--gold);text-decoration:none}
@media(hover:hover) and (pointer:fine){.util a.pbtn:hover{border-color:var(--gold);text-decoration:none}}
@media(max-width:1599px){.util .ut{display:none}.util .wrap{justify-content:flex-end}}
footer .fh.fh2{margin-top:26px}
.gnote a{color:var(--blue);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:var(--link-underline);text-underline-offset:3px}

/* ── 24.10.2026, after Emil Kowalski's design engineering: a press is felt, answers open softly, lines break evenly ── */
/* What is pressed gives way a little and comes back at once — the phone's grey tap box gives way to it. */
.cta-sm,.callbtn,.altbtn,.callbar,.util a.pbtn,.pcard,.entry,.opt,.sit,.menu-btn{-webkit-tap-highlight-color:transparent}
.cta-sm:active,.callbtn:active,.altbtn:active,.callbar:active,.util a.pbtn:active,.menu-btn:active{transform:scale(.97)}
.pcard:active,.entry:active,.opt:active,.sit:active{transform:scale(.985)}
/* An answer opens and closes in a quarter of a second where the browser can; elsewhere at once, as before. */
:root{interpolate-size:allow-keywords}
@supports selector(::details-content){
  .faq details::details-content{block-size:0;overflow-y:clip;opacity:0;transition:block-size .25s var(--ease-out),opacity .2s ease,content-visibility .25s allow-discrete}
  .faq details[open]::details-content{block-size:auto;opacity:1}
}
/* No last word alone under a paragraph. */
.lede,.gnote,.prose p,.faq p,.pcard p,.entry p,.step p{text-wrap:pretty}

/* ── the menu on phones and tablets (24.10.2026): /assets/js/menu.js builds it from the header's own links; without it the footer carries them ── */
.menu-btn{display:none}
.js-menu .menu-btn{display:inline-flex;align-items:center;margin-left:auto;background:none;border:1px solid rgba(255,255,255,.42);border-radius:999px;color:#fff;cursor:pointer;
  font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;padding:10px 14px;line-height:1.2;
  transition:border-color .18s,transform .16s var(--ease-out)}
.js-menu .menu-btn[aria-expanded="true"]{border-color:var(--gold)}
.menu{position:absolute;left:0;right:0;top:100%;background:var(--navy);border-top:1px solid rgba(255,255,255,.14);box-shadow:0 28px 48px -28px rgba(0,0,0,.7);
  padding:4px var(--gut) 18px;max-height:calc(100dvh - var(--hdr-h) - var(--callbar-h));overflow:auto;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .15s ease,transform .15s var(--ease-out),visibility 0s .15s}
.menu[data-open]{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .25s var(--ease-out),visibility 0s}
/* The page behind steps back while the menu is open; a tap on it closes the menu. The call bar stays in front. */
.menu-shade{position:fixed;inset:0;z-index:55;background:rgba(10,11,40,.78);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .15s ease,visibility 0s .15s}
.menu-shade[data-open]{opacity:1;visibility:visible;transition:opacity .2s ease,visibility 0s}
.menu a{display:flex;align-items:center;min-height:56px;border-bottom:1px solid rgba(255,255,255,.12);color:#fff;text-decoration:none;
  font-family:var(--disp);font-weight:600;font-size:20px;-webkit-tap-highlight-color:transparent}
.menu a[aria-current]{color:var(--gold)}
.menu a:active{color:var(--gold)}
/* The open menu on a phone in the shapes of the page (AAT Forwarding LLC, 24.10.2026, his screenshot of it): the portals two pills of one
   width, one under the other where a phone is too narrow for both; the page behind it dark and soft, not showing through grey. */
.menu .menu-sub{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;padding-top:18px}
.menu .menu-sub a{justify-content:center;min-height:48px;border:1px solid rgba(255,255,255,.42);border-radius:999px;padding:0 12px;font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
@media(max-width:1023px){.js-menu .hdr .cta-sm{display:none}}
@media(min-width:1024px){.js-menu .menu-btn{margin-left:12px}}
@media(min-width:1120px){.js-menu .menu-btn,.menu,.menu-shade{display:none}}

/* ══════════════════════════════════════════════════════════════
   v4 · art direction (24.10.2026, the owner: "es geht doch noch besser"; after the frontend-design and ui-ux-pro-max skills)
   One loud thing per screen: the call. Headlines in sentence case; where a statement follows, the section's name steps back to
   a quiet label and the statement leads. The mono face only where the site speaks like an operations desk — the kicker, the
   status strip, the call, the utility strip — and nowhere else. The A350 at the gate is seen in the hero, not hidden behind it.
   The CI stays: navy, steel blue, signal gold, Archivo, Source Sans 3, IBM Plex Mono, Playfair Display.
   ══════════════════════════════════════════════════════════════ */
:root{--label:600 clamp(15px,calc(14.49px + 0.131vw),17px)/1.35 var(--body)}

/* Headlines: sentence case, tight, navy. */
.stitle,.railtitle{text-transform:none;letter-spacing:-.022em;color:var(--navy);line-height:1.08;text-wrap:balance}
.stitle{font-size:clamp(27px,calc(21.39px + 1.438vw),48px)}
.railtitle{font-size:clamp(23px,calc(19.69px + 0.850vw),34px)}
.on-dark .stitle,.on-dark .railtitle{color:#fff}
/* With a statement under it, the section's name is its label and the statement its headline. */
.stitle:has(+ .stmt){font:var(--label);letter-spacing:.01em;color:var(--blue);padding-top:16px;margin-bottom:12px}
.on-dark .stitle:has(+ .stmt){color:var(--gold)}
.stitle + .stmt{font-family:var(--disp);font-weight:700;font-size:clamp(28px,calc(20.86px + 1.830vw),56px);line-height:1.06;
  letter-spacing:-.025em;color:var(--navy);max-width:24ch;text-wrap:balance}
.on-dark .stitle + .stmt{color:#fff}
.stitle + .stmt + .lead{margin-top:var(--s3);max-width:68ch}
.sublabel{text-transform:none;letter-spacing:-.012em;font-size:clamp(20px,calc(18.47px + 0.392vw),26px);color:var(--navy)}
.brk span{font-weight:600;letter-spacing:-.005em;text-transform:none;font-size:clamp(17px,calc(15.98px + 0.261vw),21px)}
.hero h1{font-size:clamp(32px,calc(22.82px + 2.353vw),72px);letter-spacing:-.028em;line-height:1.02;text-wrap:balance}

/* Labels: the body face, sentence case, one size — no shouting. */
.eyebrow,.step .k,.rail dt,.pcard .st,.entry .st{font:var(--label);letter-spacing:.01em;text-transform:none}
.step .k{color:var(--blue)}
.pcard .st,.entry .st{color:var(--muted)}
.crumb{font:var(--label);font-weight:400;letter-spacing:.01em;text-transform:none}
.pcard .go{font:600 clamp(16px,calc(15.49px + 0.131vw),18px)/1.3 var(--body);letter-spacing:0;text-transform:none}
footer .fh{text-transform:none;letter-spacing:0;font-weight:600;font-size:clamp(15px,calc(14.49px + 0.131vw),17px)}
footer .legal{font-family:var(--body);letter-spacing:.01em;text-transform:none;font-size:clamp(14px,calc(13.49px + 0.131vw),15.5px)}

/* Situations: what happened, who it happens to, what we usually do — three voices, not three lines of capitals. */
.sit h3{font-family:var(--disp);font-weight:600;letter-spacing:-.012em;font-size:clamp(19px,calc(17.98px + 0.261vw),23px)}
.sit .m{font:400 clamp(16px,calc(15.49px + 0.131vw),18px)/1.45 var(--body);letter-spacing:0;text-transform:none;color:var(--muted)}
.sit .rt{font:var(--label);letter-spacing:.01em;text-transform:none;color:var(--blue);display:flex;align-items:center;gap:10px}
.sit .rt::before{content:"";flex:none;width:16px;height:2px;background:currentColor}

/* The hero: the aircraft at the gate shows on the right; the text side stays deep for reading. */
@media(min-width:900px){
  .hero-scrim{background:
    linear-gradient(96deg,rgba(16,17,56,.96) 0%,rgba(16,17,56,.9) 36%,rgba(22,23,75,.58) 62%,rgba(22,23,75,.28) 100%),
    linear-gradient(to top,rgba(16,17,56,.96) 0%,rgba(16,17,56,0) 46%)}
}

/* Less motion, not none (24.10.2026): colours and fades stay, they help reading; nothing lifts, presses or slides. */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  .cta-sm,.callbtn,.altbtn,.altbtn i,.callbar,.util a.pbtn,.pcard,.entry,.opt,.sit,.menu-btn,.menu{transform:none!important}
  a.callbtn[href^="tel:"]::before,a.cta-sm[href^="tel:"]::before{animation:none!important}
  .altbtn i::before,.altbtn i::after{transition:none}
  .faq details::details-content{transition-property:opacity,content-visibility}}
@media print{.hdr,.util,.callbar,.closer{display:none}body{padding:0}}