:root {
  --brand-primary: #102A5A;
  --brand-secondary: #125EA0;
  --brand-accent: #1199B5;
  --text-primary: #101D32;
  --text-secondary: #5E6B7C;
  --background: #F6F8FB;
  --surface: #FFFFFF;
  --border: #DFE6EE;
  --brand-gradient: linear-gradient(110deg, #102A5A 0%, #125EA0 55%, #1199B5 100%);

  --surface-default: var(--surface);
  --surface-subtle: var(--background);
  --surface-dark: var(--brand-primary);
  --border-default: var(--border);
  --border-strong: var(--brand-primary);
  --action-primary: var(--brand-gradient);
  --action-primary-hover: var(--brand-secondary);
  --action-secondary: var(--surface);
  --status-success: var(--brand-secondary);
  --status-warning: var(--text-secondary);
  --status-error: var(--text-primary);

  --font-functional: "Segoe UI", sans-serif;
  --font-editorial: Georgia, serif;
  --shell: min(100% - 24px, 1400px);
  --radius-small: 8px;
  --radius-medium: 16px;
  --radius-large: 28px;
  --shadow-small: 0 8px 24px color-mix(in srgb, var(--brand-primary) 8%, transparent);
  --shadow-large: 0 28px 70px color-mix(in srgb, var(--brand-primary) 14%, transparent);
  --section-space: clamp(76px, 9vw, 132px);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  min-width: 0;
  color: var(--text-primary);
  background: var(--surface-default);
  font-family: var(--font-functional);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--text-primary); line-height: 1.08; letter-spacing: -0.035em; }
h1 { max-width: 15ch; margin-bottom: 26px; font-size: clamp(2.75rem, 6vw, 5.4rem); }
h2 { max-width: 18ch; margin-bottom: 20px; font-size: clamp(2rem, 4vw, 3.65rem); }
h3 { margin-bottom: 10px; font-size: clamp(1.15rem, 2vw, 1.4rem); }
p { max-width: 64ch; }

.shell { width: var(--shell); margin-inline: auto; }
.section { padding-block: var(--section-space); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; top: 12px; left: 12px; padding: 10px 16px; border-radius: var(--radius-small); color: var(--surface); background: var(--brand-primary); transform: translateY(-160%); transition: transform 160ms ease; }
.skip-link:focus { transform: translateY(0); }

.button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 20px;
  border: 0;
  border-radius: 12px;
  color: var(--surface);
  background: var(--action-primary);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--brand-primary) 22%, transparent);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.button:hover { transform: translateY(-2px); box-shadow: 0 14px 30px color-mix(in srgb, var(--brand-primary) 28%, transparent); }
.button-small { min-height: 44px; padding: 9px 15px; font-size: 0.95rem; }

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border-default) 82%, transparent);
  background: var(--surface);
}

.header-inner { display: flex; min-height: 90px; align-items: center; gap: clamp(18px, 2vw, 34px); }
.brand-lockup { display: flex; min-height: 44px; flex: 0 1 285px; min-width: 210px; align-items: center; }
.brand-lockup img { width: 100%; height: auto; }
.primary-nav { display: flex; min-width: 0; flex: 1; align-items: center; justify-content: flex-end; gap: clamp(13px, 1.5vw, 24px); }
.primary-nav a { position: relative; padding-block: 12px; color: var(--text-primary); font-size: 0.96rem; font-weight: 680; text-decoration: none; white-space: nowrap; }
.primary-nav a::after { position: absolute; right: 0; bottom: 5px; left: 0; height: 2px; background: var(--brand-secondary); content: ""; transform: scaleX(0); transform-origin: right; transition: transform 180ms ease; }
.primary-nav a:hover, .primary-nav a[aria-current="page"] { color: var(--brand-secondary); }
.primary-nav a:hover::after, .primary-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav-toggle { display: none; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border: 1px solid var(--border-default); border-radius: 10px; color: var(--brand-primary); background: var(--surface); }

.hero { position: relative; isolation: isolate; overflow: clip; background: var(--surface-default); }
.hero::before { position: absolute; z-index: -1; top: 0; right: max(0px, calc((100vw - 1400px) / 2)); width: min(46vw, 700px); height: 1px; background: var(--brand-gradient); content: ""; }

/* Direktfahrt: one vehicle, one uninterrupted A-to-B line */

/* Same Day: an image-led corridor inside one calendar day */

/* Sonderfahrt: image-led individual planning dossier */

/* Expresskurier: open time-corridor composition */

@keyframes express-pulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--brand-accent), 0 0 0 4px color-mix(in srgb, var(--brand-accent) 8%, transparent); }
  50% { box-shadow: 0 0 0 1px var(--brand-accent), 0 0 0 10px color-mix(in srgb, var(--brand-accent) 13%, transparent); }
}

/* Kleintransport: route-specific premium composition */

.site-footer { color: var(--surface); background: var(--surface-dark); }

@keyframes reveal-up {
  from { transform: translateY(10px); }
  to { transform: translateY(0); }
}

@keyframes route-pulse {
  0%, 12% { left: 0; }
  72%, 100% { left: calc(100% - 14px); }
}

@media (max-width: 1080px) {
  .header-cta { display: none; }
}

@media (max-width: 860px) {
  :root { --shell: min(100% - 32px, 720px); --section-space: 82px; }
  h1 { max-width: 17ch; font-size: clamp(2.6rem, 10vw, 4.5rem); }
  .header-inner { min-height: 74px; justify-content: space-between; }
  .brand-lockup { flex-basis: 220px; min-width: 170px; }
  .js .nav-toggle { display: flex; }
  .primary-nav { flex-wrap: wrap; justify-content: flex-start; }
  .js .primary-nav { position: absolute; top: calc(100% + 1px); right: 0; left: 0; display: none; padding: 18px max(16px, calc((100vw - 720px) / 2)); border-bottom: 1px solid var(--border-default); background: var(--surface); box-shadow: var(--shadow-small); }
  .js .primary-nav[data-open="true"] { display: grid; }
  .primary-nav a { min-height: 44px; padding: 10px 4px; }
  .primary-nav a::after { display: none; }
}

@media (max-width: 620px) {
  :root { --shell: min(100% - 32px, 540px); --section-space: 68px; }
  body { line-height: 1.6; }
  h1 { font-size: clamp(2.35rem, 12vw, 3.6rem); line-height: 1.02; }
  h2 { font-size: clamp(1.9rem, 9vw, 2.8rem); }
  .header-inner { min-height: 68px; }
  .brand-lockup { flex-basis: 190px; }
}


@media (max-width: 360px) {
  :root { --shell: min(100% - 32px, 320px); }
  .brand-lockup { flex-basis: 170px; min-width: 150px; }
  .nav-toggle { min-width: 44px; }
}

/* Kleintransport Frankfurt: twelve-block service/city composition */
.case-carousel { min-width: 0; --case-progress: 20%; }
.case-carousel-controls { display: flex; gap: 10px; }
.case-carousel-controls[hidden] { display: none; }
.case-carousel-track { display: grid; min-width: 0; gap: 22px; margin: 0; padding: 0; list-style: none; }
.case-carousel.is-enhanced .case-carousel-track { grid-auto-flow: column; grid-auto-columns: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Transporter-Kurier Frankfurt: premium twelve-block vehicle-class intent */

/* Transporter-Kurier Frankfurt: reference-led operations interface */

/* Transporter-Kurier Frankfurt: controlled reference reconstruction */

/* Transporter-Kurier Frankfurt: visual-approval revision */

/* Transporter-Kurier Frankfurt: clarity revision */

/* Transporter-Kurier Frankfurt: editorial expertise refinement */
/* Shared three-step request flow */

/* Content remains in normal document flow. Only the global header is sticky. */