/* =====================================================================
   RuhrTrain Logistik GmbH – Stylesheet
   Markenfarben aus dem Logo:  Blau #003073  ·  Anthrazit #333D46
   Schriften selbst gehostet (DSGVO-konform, keine Google-Fonts-Aufrufe)
   ===================================================================== */

/* ---------- Schriften ---------- */
@font-face{
  font-family:'Saira';
  src:url('../assets/fonts/Saira.woff2') format('woff2');
  font-weight:100 900; font-stretch:50% 125%; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../assets/fonts/Inter.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ---------- Design-Tokens ---------- */
:root{
  --blue:#003073;
  --blue-900:#002451;
  --blue-700:#0a3d86;
  --blue-500:#1a5bb0;
  --slate:#333d46;
  --slate-700:#2a333b;
  --ink:#1b232b;
  --muted:#5b6672;
  --mist:#f5f7fa;
  --mist-2:#eef2f7;
  --line:#e2e8f0;
  --white:#ffffff;

  --wrap:1180px;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 18px 44px -22px rgba(15,32,58,.42);
  --shadow-sm:0 6px 18px -10px rgba(15,32,58,.35);

  --display:'Saira',system-ui,'Segoe UI',sans-serif;
  --body:'Inter',system-ui,'Segoe UI',sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; font-family:var(--body); color:var(--ink);
  background:var(--white); line-height:1.65; font-size:17px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:var(--blue); text-decoration:none}
a:hover{color:var(--blue-500)}
h1,h2,h3,h4{font-family:var(--display); color:var(--slate); line-height:1.08; margin:0; font-weight:800}
p{margin:0}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px}
.section{padding:88px 0}
.section--tight{padding:64px 0}

/* Eyebrow with double-chevron motif (aus dem Logo abgeleitet) */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--display); font-weight:700; font-stretch:88%;
  text-transform:uppercase; letter-spacing:.16em; font-size:.78rem;
  color:var(--blue); margin-bottom:16px;
}
.eyebrow::before{
  content:""; width:26px; height:2px; background:var(--blue); display:inline-block;
}
.eyebrow.on-dark{color:#a9c6ea}
.eyebrow.on-dark::before{background:#4f79b8}

.h-xl{font-size:clamp(2.3rem,5vw,3.7rem); font-stretch:90%; letter-spacing:-.01em}
.h-lg{font-size:clamp(1.9rem,3.6vw,2.7rem); font-stretch:90%}
.lead{font-size:1.15rem; color:var(--muted); max-width:60ch}

/* ---------- Buttons ---------- */
.btn{
  --_bg:var(--blue); --_fg:#fff;
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--display); font-weight:700; font-stretch:92%; font-size:1rem;
  letter-spacing:.01em; padding:14px 26px; border-radius:999px; border:2px solid transparent;
  background:var(--_bg); color:var(--_fg); cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  will-change:transform;
}
.btn svg{width:18px; height:18px; flex:none}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-sm)}
.btn .chev{transition:transform .18s ease}
.btn:hover .chev{transform:translateX(3px)}
.btn-primary{--_bg:var(--blue); color:#fff}
.btn-primary:hover{background:var(--blue-700); color:#fff}
.btn-ghost{background:transparent; border-color:rgba(255,255,255,.55); color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.10); color:#fff; border-color:#fff}
.btn-outline{background:transparent; border-color:var(--blue); color:var(--blue)}
.btn-outline:hover{background:var(--blue); color:#fff}
.btn-light{background:#fff; color:var(--blue)}
.btn-light:hover{background:#eaf1fb; color:var(--blue)}

/* Header-CTA: über dem Hero weiß, nach dem Scrollen blau (guter Kontrast) */
.site-header:not(.scrolled) .nav__cta .btn-primary{background:#fff; color:var(--blue)}
.site-header:not(.scrolled) .nav__cta .btn-primary:hover{background:#eaf1fb; color:var(--blue)}

/* =====================================================================
   Header / Navigation
   ===================================================================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  transition:background .25s ease, box-shadow .25s ease, border-color .25s ease;
  background:transparent; border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(255,255,255,.92); backdrop-filter:saturate(140%) blur(8px);
  border-bottom-color:var(--line); box-shadow:0 8px 24px -20px rgba(15,32,58,.5);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:24px; height:84px}
.nav__logo img{height:58px; width:auto}
.nav__logo .logo-dark{display:none}
.site-header.scrolled .nav__logo .logo-light{display:none}
.site-header.scrolled .nav__logo .logo-dark{display:block}
.nav__links{display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0}
.nav__links a{
  font-family:var(--display); font-weight:600; font-stretch:94%; font-size:1.02rem;
  color:#fff; letter-spacing:.01em; padding:6px 0; position:relative;
}
.site-header.scrolled .nav__links a{color:var(--slate)}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--blue-500); transition:right .22s ease;
}
.site-header.scrolled .nav__links a::after{background:var(--blue)}
.nav__links a:hover::after,.nav__links a[aria-current]::after{right:0}
.nav__cta{display:flex; align-items:center; gap:14px}
.nav__phone{
  display:inline-flex; align-items:center; gap:9px; color:#fff; font-family:var(--display);
  font-weight:700; font-stretch:92%; white-space:nowrap;
}
.site-header.scrolled .nav__phone{color:var(--slate)}
.nav__phone svg{width:18px;height:18px}

.nav__toggle{display:none; background:none; border:0; cursor:pointer; padding:8px; color:#fff}
.site-header.scrolled .nav__toggle{color:var(--slate)}
.nav__toggle svg{width:28px;height:28px}
/* Kontakt-Icons in der Kopfleiste (Desktop + mobil) */
.nav__icons,.nav__mobicons{display:flex; gap:8px}
.nav__mobicons{display:none}
.nav__icons a,.nav__mobicons a{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.14);transition:background .18s ease,color .18s ease}
.nav__icons a:hover,.nav__mobicons a:hover{background:var(--blue);color:#fff}
.site-header.scrolled .nav__icons a,.site-header.scrolled .nav__mobicons a{background:var(--mist-2);color:var(--blue)}
.site-header.scrolled .nav__icons a:hover,.site-header.scrolled .nav__mobicons a:hover{background:var(--blue);color:#fff}
.nav__icons svg,.nav__mobicons svg{width:18px;height:18px}

/* =====================================================================
   Hero
   ===================================================================== */
.hero{
  position:relative; color:#fff; overflow:hidden;
  padding:170px 0 96px;
  background:
    radial-gradient(120% 140% at 85% -10%, #0a4593 0%, transparent 55%),
    linear-gradient(160deg,var(--blue) 0%, var(--blue-900) 78%);
}
/* Doppelchevron-Wasserzeichen (Motiv aus dem Logo) */
.hero__mark{
  position:absolute; right:-4%; top:50%; transform:translateY(-50%);
  width:min(52vw,720px); opacity:.06; pointer-events:none;
}
.hero__mark svg{width:100%;height:auto}
.hero::after{ /* dünne "Schienen"-Linie unten */
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:linear-gradient(90deg,transparent, #3f6fb0 20%, #3f6fb0 80%, transparent);
  opacity:.5;
}
.hero__inner{position:relative; z-index:2; max-width:760px}
.hero h1{color:#fff; margin-bottom:20px}
.hero .lead{color:#cdddf1; max-width:56ch; font-size:1.22rem}
.hero__actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}
.hero__facts{
  display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:46px;
  padding-top:26px; border-top:1px solid rgba(255,255,255,.16);
}
.hero__fact{display:flex; align-items:center; gap:10px; font-family:var(--display);
  font-weight:600; font-stretch:92%; color:#dbe7f6; letter-spacing:.02em}
.hero__fact svg{width:16px;height:16px;color:#7fa8dd;flex:none}

/* =====================================================================
   Leistungen
   ===================================================================== */
.services{background:var(--white)}
.services__head{max-width:640px; margin-bottom:48px}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.card{
  position:relative; background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); padding:34px 32px 32px; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card::before{ /* Akzentkante links */
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--blue); transform:scaleY(0); transform-origin:top; transition:transform .25s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent}
.card:hover::before{transform:scaleY(1)}
.card__icon{
  width:54px; height:54px; border-radius:12px; display:grid; place-items:center;
  background:var(--mist-2); color:var(--blue); margin-bottom:20px;
}
.card__icon svg{width:28px;height:28px}
.card h3{font-size:1.35rem; font-stretch:92%; margin-bottom:10px; color:var(--slate)}
.card p{color:var(--muted); font-size:1.02rem}
.card__list{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:9px}
.card__list li{display:flex; align-items:flex-start; gap:9px; color:var(--slate-700); font-size:.98rem}
.card__list svg{width:16px; height:16px; color:var(--blue); flex:none; margin-top:4px}

/* =====================================================================
   Fuhrpark & Vermietmodelle
   ===================================================================== */
.fleet{background:var(--white)}
.fleet__head{max-width:680px; margin-bottom:44px}
.models{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.model{
  position:relative; border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 28px; background:var(--white); display:flex; flex-direction:column; gap:13px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.model:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent}
.model__tag{
  align-self:flex-start; font-family:var(--display); font-weight:700; font-stretch:92%;
  text-transform:uppercase; letter-spacing:.08em; font-size:.75rem; color:#fff;
  background:var(--blue); padding:6px 15px; border-radius:999px;
}
.model h3{font-size:1.28rem; font-stretch:92%; color:var(--slate)}
.model > p{color:var(--muted); font-size:1rem; margin-top:-3px}
.model__list{list-style:none; margin:4px 0 0; padding:0; display:grid; gap:11px}
.model__list li{display:flex; align-items:flex-start; gap:10px; color:var(--slate-700); font-size:1rem}
.model__list svg{width:18px; height:18px; color:var(--blue); flex:none; margin-top:3px}
.fleet__note{margin-top:28px; color:var(--muted); font-size:1.02rem}
.fleet__usp{
  display:flex; gap:16px; align-items:flex-start; max-width:900px;
  background:var(--mist); border:1px solid var(--line); border-left:4px solid var(--blue);
  border-radius:12px; padding:18px 22px; margin-bottom:34px;
}
.fleet__usp svg{width:26px; height:26px; color:var(--blue); flex:none; margin-top:2px}
.fleet__usp p{color:var(--slate-700); font-size:1.02rem}
.fleet__usp strong{color:var(--slate)}

/* =====================================================================
   Über uns
   ===================================================================== */
.about{background:var(--mist); border-block:1px solid var(--line)}
.about__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.about__body p+p{margin-top:16px}
.about__body p{color:var(--slate-700)}
.values{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.value{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:22px 22px; box-shadow:var(--shadow-sm);
}
.value h4{font-size:1.12rem; font-stretch:94%; color:var(--blue); margin-bottom:6px;
  display:flex; align-items:center; gap:9px}
.value h4 svg{width:18px;height:18px}
.value p{color:var(--muted); font-size:.97rem}

/* =====================================================================
   Kennzahlen-Band
   ===================================================================== */
.stats{
  background:linear-gradient(160deg,var(--slate) 0%, #232b33 100%); color:#fff;
}
.stats__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center}
.stat__num{font-family:var(--display); font-weight:800; font-stretch:88%;
  font-size:clamp(1.9rem,3vw,2.5rem); color:#fff; line-height:1}
.stat__num.small{font-size:clamp(1.5rem,2.4vw,2rem)}
.stat__label{color:#c4ccd5; margin-top:10px; font-size:.98rem}
.stats__grid > div{padding:10px; position:relative}
.stats__grid > div:not(:last-child)::after{
  content:""; position:absolute; right:-10px; top:18%; bottom:18%; width:1px;
  background:rgba(255,255,255,.14);
}

/* =====================================================================
   Kontakt
   ===================================================================== */
.contact{background:var(--white)}
.contact__grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:52px; align-items:start}
.contact__info .lead{margin-bottom:28px}
.infolist{list-style:none; margin:0; padding:0; display:grid; gap:18px}
.infolist li{display:flex; gap:15px; align-items:flex-start}
.infoic{
  width:44px;height:44px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:var(--blue); color:#fff;
}
.infoic svg{width:20px;height:20px}
.infolist .k{font-family:var(--display);font-weight:700;font-stretch:94%;color:var(--slate);
  display:block; font-size:.86rem; text-transform:uppercase; letter-spacing:.08em}
.infolist .v{color:var(--slate-700)}
.infolist a.v:hover{color:var(--blue)}

/* Formular */
.form{
  background:var(--mist); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 32px; box-shadow:var(--shadow-sm);
}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:18px}
.field label{font-family:var(--display); font-weight:600; font-stretch:94%; color:var(--slate);
  font-size:.95rem}
.field label .req{color:var(--blue)}
.field input,.field select,.field textarea{
  font-family:var(--body); font-size:1rem; color:var(--ink);
  padding:13px 15px; border:1.5px solid var(--line); border-radius:10px; background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease; width:100%;
}
.field textarea{min-height:140px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,48,115,.14)
}
/* Datei-Upload */
.filefield input[type=file]{padding:11px 13px; background:#fff; cursor:pointer}
.filefield .hint{font-size:.85rem; color:var(--muted)}
/* DSGVO-Zeile */
.consent{display:flex; align-items:flex-start; gap:11px; margin:6px 0 20px; font-size:.95rem;
  color:var(--muted)}
.consent input{margin-top:4px; width:18px; height:18px; accent-color:var(--blue); flex:none}
.form .btn{width:100%; justify-content:center}
.form__note{font-size:.85rem; color:var(--muted); margin-top:14px; text-align:center}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* =====================================================================
   Footer
   ===================================================================== */
.site-footer{background:var(--blue-900); color:#c7d5ea; padding:64px 0 30px}
.footer__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px}
.footer__brand img{height:66px; margin-bottom:18px}
.footer__brand p{color:#9db5d6; max-width:34ch; font-size:.97rem}
.footer__group h5{font-family:var(--display); font-weight:700; font-stretch:92%;
  color:#fff; text-transform:uppercase; letter-spacing:.1em; font-size:.82rem; margin:0 0 16px}
.footer__group ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer__group a,.footer__group span{color:#bcccdf; font-size:.98rem}
.footer__group a:hover{color:#fff}
.footer__social{display:flex; gap:12px; margin-top:18px}
.footer__social a{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.08);
  display:grid;place-items:center; color:#fff; transition:background .18s ease}
.footer__social a:hover{background:var(--blue-500)}
.footer__social svg{width:20px;height:20px}
.footer__bottom{margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:space-between; align-items:center;
  font-size:.88rem; color:#8ea6c8}
.footer__bottom a{color:#8ea6c8}
.footer__bottom a:hover{color:#fff}
.footer__legal{display:flex; gap:20px; flex-wrap:wrap}

/* =====================================================================
   Rechtstexte (Impressum / Datenschutz)
   ===================================================================== */
.legal{padding:150px 0 80px}
.legal .wrap{max-width:820px}
.legal h1{font-size:clamp(2rem,4vw,2.8rem); font-stretch:90%; margin-bottom:8px}
.legal h2{font-size:1.4rem; font-stretch:92%; color:var(--blue); margin:38px 0 12px}
.legal h3{font-size:1.1rem; margin:24px 0 8px; color:var(--slate)}
.legal p,.legal li{color:var(--slate-700)}
.legal p{margin-bottom:12px}
.legal ul{padding-left:20px; margin:0 0 14px}
.legal li{margin-bottom:6px}
.legal .back{display:inline-flex;align-items:center;gap:8px;margin-bottom:26px;font-weight:600;
  font-family:var(--display)}
.legal .muted{color:var(--muted); font-size:.95rem}
.legal .callout{background:var(--mist); border-left:4px solid var(--blue); border-radius:8px;
  padding:16px 18px; margin:18px 0; color:var(--slate-700); font-size:.96rem}

/* =====================================================================
   Bestätigungsseite (kontakt.php)
   ===================================================================== */
.status-page{min-height:100vh; display:grid; place-items:center; padding:40px 20px;
  background:linear-gradient(160deg,var(--blue) 0%, var(--blue-900) 100%)}
.status-card{background:#fff; border-radius:18px; padding:48px 44px; max-width:520px; text-align:center;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.5)}
.status-card .badge{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;
  margin:0 auto 22px}
.status-card.ok .badge{background:#e7f4ec;color:#1a8f4a}
.status-card.err .badge{background:#fdeaea;color:#c23b3b}
.status-card .badge svg{width:40px;height:40px}
.status-card h1{font-size:1.9rem; font-stretch:92%; margin-bottom:12px}
.status-card p{color:var(--muted); margin-bottom:26px}

/* =====================================================================
   Reveal-Animation
   ===================================================================== */
.reveal{opacity:1; transform:none; transition:opacity .7s ease, transform .7s ease}
html.js-reveal .reveal{opacity:0; transform:translateY(22px)}
html.js-reveal .reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .btn,.card,.nav__links a::after{transition:none}
}

/* Sichtbarer Tastatur-Fokus */
:focus-visible{outline:3px solid var(--blue-500); outline-offset:2px; border-radius:4px}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width:920px){
  .about__grid{grid-template-columns:1fr; gap:36px}
  .models{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .contact__grid{grid-template-columns:1fr; gap:36px}
  .footer__grid{grid-template-columns:1fr 1fr}
  .stats__grid{grid-template-columns:1fr 1fr; gap:28px 20px}
  .stats__grid > div:nth-child(2)::after{display:none}
}
@media (max-width:760px){
  body{font-size:16px}
  .section{padding:64px 0}
  .nav__links,.nav__icons{display:none}
  .nav__cta .btn-primary{display:none}
  .nav__toggle{display:inline-flex}
  .nav__mobicons{display:flex}
  .site-header .wrap{padding-inline:16px}
  .nav{gap:10px}
  .nav__cta{gap:8px}
  .nav__logo img{height:46px}
  .nav.open .nav__links{
    display:flex; position:absolute; top:84px; left:0; right:0; flex-direction:column;
    gap:0; background:#fff; border-top:1px solid var(--line); box-shadow:var(--shadow);
    padding:8px 24px 18px;
  }
  .nav.open .nav__links a{color:var(--slate); padding:14px 0; border-bottom:1px solid var(--line)}
  .nav.open .nav__links a::after{display:none}
  .cards{grid-template-columns:1fr}
  .values{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .hero{padding:140px 0 72px}
  .hero__mark{opacity:.05; right:-20%}
}