/* ==========================================================================
   EuroTrans Logistik GmbH — Design System
   Premium B2B Logistics Visual Identity
   1. Tokens          6. Hero            11. Regionen / Karte
   2. Reset & Base    7. Kennzahlen      12. Werte
   3. Layout          8. Leistungen      13. Recruiting
   4. Typografie      9. Prozesskette    14. Formulare
   5. Header / Nav   10. Referenz        15. Footer / Legal / Motion
   ========================================================================== */

/* 1. TOKENS ============================================================== */
:root{
  /* Marke */
  --navy-950:#050F1D;
  --navy-900:#08172B;
  --navy-800:#0C2340;
  --navy-700:#12325A;
  --navy-600:#1B4278;

  --blue-700:#0B4FBF;
  --blue-600:#0F62E6;
  --blue-500:#2C7BF2;
  --blue-400:#5D9CF8;
  --blue-050:#EAF2FE;

  --ink-900:#0F1518;
  --ink-800:#1B2226;
  --ink-600:#4A555E;
  --ink-500:#6B767F;
  --ink-400:#8D97A0;

  --silver-050:#FAFBFC;
  --silver-100:#F4F6F8;
  --silver-200:#EDF0F3;
  --silver-300:#E1E6EB;
  --silver-400:#CDD5DD;

  --white:#FFFFFF;

  /* Semantik */
  --bg:var(--white);
  --bg-alt:var(--silver-100);
  --text:var(--ink-900);
  --text-muted:var(--ink-600);
  --line:var(--silver-300);
  --line-soft:var(--silver-200);
  --accent:var(--blue-600);

  /* Masse */
  --container:1320px;
  --container-narrow:960px;
  --gutter:clamp(20px, 5vw, 56px);
  --radius:4px;
  --radius-sm:2px;
  --header-h:84px;

  /* Rhythmus */
  --section-y:clamp(72px, 9vw, 148px);
  --section-y-sm:clamp(56px, 6vw, 96px);

  /* Tiefe */
  --shadow-xs:0 1px 2px rgba(8,23,43,.05);
  --shadow-sm:0 2px 6px rgba(8,23,43,.06);
  --shadow-md:0 18px 40px -18px rgba(8,23,43,.24);
  --shadow-lg:0 36px 80px -32px rgba(8,23,43,.36);

  /* Bewegung */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.18s;
  --t:.32s;
  --t-slow:.6s;

  /* Schrift */
  --font-display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* 2. RESET & BASE ======================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:1.0625rem;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
hr{border:0;border-top:1px solid var(--line);margin:0}
::selection{background:var(--blue-600);color:#fff}

:focus-visible{
  outline:2px solid var(--blue-500);
  outline-offset:3px;
  border-radius:var(--radius-sm);
}
.section--dark :focus-visible,.footer :focus-visible,.hero :focus-visible{outline-color:var(--blue-400)}

.skip-link{
  position:absolute;left:16px;top:-100px;z-index:2000;
  background:var(--blue-600);color:#fff;padding:12px 20px;
  font-weight:600;font-size:.875rem;border-radius:var(--radius-sm);
  transition:top var(--t-fast) var(--ease);
}
.skip-link:focus{top:16px}
.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;
}

/* 3. LAYOUT ============================================================== */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:var(--container-narrow)}
.section{padding-block:var(--section-y);position:relative}
.section--sm{padding-block:var(--section-y-sm)}
.section--tight{padding-block:clamp(48px,5vw,72px)}
.section--alt{background:var(--bg-alt)}
.section--dark{background:var(--navy-900);color:#fff}
.section--dark p{color:rgba(255,255,255,.72)}

.grid{display:grid;gap:clamp(20px,2.4vw,32px)}
.grid-12{grid-template-columns:repeat(12,1fr)}

.stack-sm > * + *{margin-top:12px}
.stack > * + *{margin-top:20px}
.stack-lg > * + *{margin-top:32px}

/* Technisches Linienwerk */
.hairline{height:1px;background:var(--line);border:0}
.tech-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(to right,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:calc(100% / 6) 100%;
}
.tech-grid--light{background-image:linear-gradient(to right,rgba(8,23,43,.05) 1px,transparent 1px)}
.tech-dots{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:22px 22px;
}

/* 4. TYPOGRAFIE ========================================================== */
.display{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:.005em;
  margin:0;
}
.display--xl{font-size:clamp(2.75rem,7.4vw,6.25rem)}
.display--l{font-size:clamp(2.35rem,5.4vw,4.5rem)}
.display--m{font-size:clamp(1.95rem,4vw,3.25rem)}
.display--s{font-size:clamp(1.6rem,2.8vw,2.35rem)}

.title{
  font-family:var(--font-sans);
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.12;
}
.title--xl{font-size:clamp(2.25rem,4.6vw,3.75rem)}
.title--l{font-size:clamp(1.9rem,3.4vw,2.9rem)}
.title--m{font-size:clamp(1.4rem,2.2vw,1.9rem)}
.title--s{font-size:clamp(1.15rem,1.6vw,1.375rem);letter-spacing:-.015em}

.lead{font-size:clamp(1.0625rem,1.35vw,1.25rem);line-height:1.65;color:var(--text-muted)}
.section--dark .lead{color:rgba(255,255,255,.74)}
.body-muted{color:var(--text-muted)}
.measure{max-width:62ch}
.measure-sm{max-width:48ch}

.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:.75rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin:0 0 22px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor;flex:none}
.eyebrow--light{color:var(--blue-400)}

.index-num{
  font-family:var(--font-display);font-weight:600;
  font-size:.9375rem;letter-spacing:.14em;color:var(--ink-400);
  font-variant-numeric:tabular-nums;
}

/* Textlink mit Pfeil */
.link-arrow{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:600;font-size:.9375rem;letter-spacing:.01em;
  color:var(--navy-800);
  padding-bottom:6px;position:relative;
}
.link-arrow::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--line);transition:background var(--t) var(--ease);
}
.link-arrow svg{width:16px;height:16px;transition:transform var(--t) var(--ease-out);flex:none}
.link-arrow:hover{color:var(--blue-600)}
.link-arrow:hover::after{background:var(--blue-600)}
.link-arrow:hover svg{transform:translateX(5px)}
.link-arrow--light{color:#fff}
.link-arrow--light::after{background:rgba(255,255,255,.28)}
.link-arrow--light:hover{color:var(--blue-400)}
.link-arrow--light:hover::after{background:var(--blue-400)}

/* Buttons */
.btn{
  --btn-bg:var(--blue-600);
  --btn-fg:#fff;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:56px;padding:0 30px;
  background:var(--btn-bg);color:var(--btn-fg);
  font-size:.9375rem;font-weight:600;letter-spacing:.015em;
  border:1px solid transparent;border-radius:var(--radius-sm);
  cursor:pointer;overflow:hidden;isolation:isolate;
  transition:color var(--t) var(--ease),border-color var(--t) var(--ease),
             background-color var(--t) var(--ease),transform var(--t-fast) var(--ease),
             box-shadow var(--t) var(--ease);
  text-align:center;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--navy-800);
  transform:translateY(101%);
  transition:transform var(--t) var(--ease-out);
}
.btn:hover::before{transform:translateY(0)}
.btn:hover{box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(1px)}
.btn svg{width:16px;height:16px;flex:none;transition:transform var(--t) var(--ease-out)}
.btn:hover svg{transform:translateX(4px)}

.btn--ghost{--btn-bg:transparent;--btn-fg:var(--navy-900);border-color:var(--silver-400)}
.btn--ghost::before{background:var(--navy-900)}
.btn--ghost:hover{--btn-fg:#fff;border-color:var(--navy-900)}

.btn--outline-light{--btn-bg:transparent;--btn-fg:#fff;border-color:rgba(255,255,255,.34)}
.btn--outline-light::before{background:#fff}
.btn--outline-light:hover{--btn-fg:var(--navy-900);border-color:#fff}

.btn--light{--btn-bg:#fff;--btn-fg:var(--navy-900)}
.btn--light::before{background:var(--blue-600)}
.btn--light:hover{--btn-fg:#fff}

.btn--lg{min-height:62px;padding:0 38px;font-size:1rem}
.btn--block{width:100%}

.btn-row{display:flex;flex-wrap:wrap;gap:14px}

/* Bild-Fallback (falls externe Motive nicht laden) */
.media{
  position:relative;overflow:hidden;background:var(--navy-800);
  background-image:linear-gradient(135deg,var(--navy-800) 0%,var(--navy-700) 46%,var(--navy-900) 100%);
}
.media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 1px,transparent 1px 26px);
  opacity:.9;
}
.media img{
  width:100%;height:100%;object-fit:cover;position:relative;z-index:1;
  transition:transform 1.2s var(--ease-out),opacity .6s var(--ease);
}
/* Fällt ein Motiv aus, bleibt die gestaltete Fläche darunter stehen,
   statt ein zerbrochenes Bildsymbol zu zeigen. */
img[data-failed]{opacity:0}