:root{--orange:#f87518;--ink:#141b20;--muted:#647078;--paper:#f5f5f1}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);line-height:1.65}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}img{display:block;max-width:100%}header{height:100px;padding:12px 5%;display:flex;align-items:center;gap:28px;background:#fff;position:sticky;top:0;z-index:20;border-bottom:1px solid #e9e9e9}.brand img{width:142px;height:78px;object-fit:contain}nav{display:flex;gap:28px;margin-left:auto;font-size:14px;font-weight:600}nav a:hover,.text-link:hover{color:var(--orange)}select{border:1px solid #ddd;background:white;padding:9px;border-radius:0}.menu{display:none}.wrap{width:min(1240px,90%);margin:auto}.hero{min-height:690px;background:#090d12;color:white;position:relative;overflow:hidden}.hero-photo{position:absolute;inset:0;background:linear-gradient(90deg,#090d12 0%,#090d12ed 28%,#090d1230 65%),url('assets/heller-transporte-3.jpg') right center/auto 110% no-repeat}.hero-inner{position:relative;padding:75px 0 85px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:2.1px;text-transform:uppercase;color:var(--orange);margin:0 0 22px}h1{font-size:clamp(58px,6.5vw,94px);line-height:1.01;letter-spacing:-4px;margin:0 0 26px}h1 span{color:var(--orange)}.hero-lead{font-size:20px;line-height:1.45;max-width:480px;margin-bottom:14px}.hero-copy{font-size:15px;color:#c5cbd0;max-width:420px;margin-bottom:32px}.button{display:inline-flex;gap:25px;align-items:center;justify-content:center;background:var(--orange);border:0;padding:15px 23px;color:#161b20;font-weight:700;font-size:14px}.button:hover{background:#ff9347}.hero-link{margin-left:28px;font-size:13px}.hero-bottom{position:relative;border-top:1px solid #ffffff28;display:flex;justify-content:space-between;padding:20px 0;font-size:11px;letter-spacing:1px;color:#c5cbd0}.facts{display:grid;grid-template-columns:repeat(4,1fr);padding:35px 0;border-bottom:1px solid #ddd}.facts>div{padding:0 30px;border-right:1px solid #ddd;display:flex;flex-direction:column}.facts>div:first-child{padding-left:0}.facts>div:last-child{border:0}.facts strong{font-size:27px;letter-spacing:-1px}.facts span{font-size:12px;color:var(--muted)}.section{padding:95px 0}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:36px;gap:30px}.section-head p:not(.eyebrow),.section-head>span{max-width:330px;color:var(--muted);font-size:14px}h2{font-size:clamp(34px,4vw,52px);line-height:1.12;letter-spacing:-1.6px;margin:0}h3{font-size:24px;line-height:1.3;margin:0 0 14px}.transport{display:grid;grid-template-columns:1.05fr 1fr;background:var(--paper)}.transport>img{width:100%;height:100%;object-fit:cover;min-height:410px}.transport-body{padding:42px}.transport-body p{font-size:14px}.sizes{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}.sizes span{border:1px solid #d3d5d5;background:#fff;padding:7px 12px;font-weight:bold}.text-link{display:inline-block;font-size:14px;font-weight:700;border-bottom:1px solid var(--orange);padding-bottom:5px}.photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}.photo-pair img{width:100%;height:270px;object-fit:cover}.about-section{background:#182129;color:#fff;padding:85px 0}.about-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:80px}.about-grid p:not(.eyebrow){color:#c9d0d5;font-size:15px;margin:28px 0}.about-grid img{height:480px;width:100%;object-fit:cover}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.gallery button{padding:0;border:0;background:#eee;overflow:hidden}.gallery img{width:100%;height:260px;object-fit:cover;transition:transform .4s}.gallery button:hover img{transform:scale(1.04)}.gallery button[hidden]{display:none}.outline{border:1px solid #a9afb2;background:white;padding:12px 25px;margin:30px auto 0;display:block;font-size:14px}.sponsor-section{background:var(--paper);padding:85px 0}.sponsor-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:center}.sponsor-grid>img{width:100%;height:530px;object-fit:contain;background:#e9e9e2}.sponsor-grid p:not(.eyebrow){font-size:15px;margin:25px 0;color:#566169}.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.person{margin-bottom:30px}.person h3{font-size:22px;margin-bottom:3px}.person p{font-size:12px;color:var(--muted);margin:0 0 8px}.person a{display:block;font-size:16px}.person a:hover{color:var(--orange)}address{font-style:normal;font-size:14px;color:var(--muted);margin-bottom:15px}form{background:var(--paper);padding:36px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}label{display:block;font-size:12px;font-weight:600;margin-bottom:16px}input,textarea{display:block;width:100%;padding:11px;border:1px solid #d8dddf;background:#fff;border-radius:0;margin-top:6px}input:focus,textarea:focus,select:focus{outline:2px solid var(--orange);outline-offset:2px}.form-note,#formStatus{font-size:12px;color:#59636a}.form-note{margin-bottom:20px}footer{background:#111920;color:#bfc7cd;padding:42px 0 0;font-size:12px}.footer-top{display:flex;align-items:center;justify-content:space-between;gap:40px;padding-bottom:38px}.footer-top img{width:140px}.footer-top a{display:block;margin:8px 0}.footer-bottom{border-top:1px solid #ffffff22;display:flex;justify-content:space-between;padding:20px 0}dialog{padding:0;border:0;background:#10161d;max-width:92vw;max-height:90vh}dialog::backdrop{background:#000c}dialog img{max-height:85vh;object-fit:contain}.close{position:absolute;right:10px;top:10px;background:white;color:#111;border:0;border-radius:50%;width:40px;height:40px;font-size:25px}a:focus-visible,button:focus-visible{outline:3px solid var(--orange);outline-offset:5px}@media(min-width:1600px){.hero-photo{background-size:auto 125%;background-position:85% center}}@media(max-width:1000px){header{gap:15px}nav{gap:15px;font-size:12px}.about-grid,.sponsor-grid,.contact-grid{gap:35px}.hero-photo{opacity:.7;background-position:65% center}.hero-inner{padding-top:65px}.transport-body{padding:28px}}@media(max-width:720px){header{height:80px}.brand img{width:110px;height:62px}header select{margin-left:auto}.menu{display:block;background:none;border:0;font-size:23px}nav{display:none;position:absolute;top:80px;left:0;right:0;background:white;padding:24px 5%;box-shadow:0 10px 20px #0002}nav.open{display:flex;flex-direction:column;font-size:16px}.hero{min-height:650px}.hero-photo{background-position:58% center;opacity:.48}.hero-inner{padding:60px 0}.hero-lead{max-width:360px}.hero-copy{max-width:340px}.hero-bottom{flex-direction:column;gap:6px}h1{letter-spacing:-2px}.hero-link{display:inline-block;margin:20px 0 0 18px}.facts{grid-template-columns:1fr 1fr;gap:22px;padding:28px 0}.facts>div{padding:0!important;border:0}.facts strong{font-size:23px}.section{padding:60px 0}.section-head{display:block}.transport,.about-grid,.sponsor-grid,.contact-grid{grid-template-columns:1fr}.transport>img{min-height:0;height:300px}.photo-pair{gap:12px}.photo-pair img{height:170px}.about-section,.sponsor-section{padding:60px 0}.about-grid img{height:350px}.gallery{grid-template-columns:1fr 1fr;gap:10px}.gallery img{height:170px}.sponsor-grid>img{height:420px}.sponsor-grid>div{grid-row:1}.fields{gap:12px}form{padding:24px}.footer-top{flex-direction:column;align-items:start;gap:15px}.footer-bottom{flex-direction:column;gap:10px}.eyebrow{margin-bottom:16px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Header shares the page content boundaries at every viewport width. */
header{padding:0;background:#141b20;color:#f4f6f7;border-bottom:1px solid #ffffff18}
.header-inner{height:100%;display:flex;align-items:center;gap:28px}
header select{background:#202b34;color:#fff;border-color:#46515b}
header .menu{color:#fff}
#transport-optionen .transport{background:#dfe2e4}
@media(max-width:1000px){.header-inner{gap:15px}}
@media(max-width:720px){header nav{background:#141b20;color:#f4f6f7}}

#unternehmen,.gallery-section{background:#000;color:#f4f6f7}
.gallery-section .section-head>span{color:#bac1c7}
.gallery-section .outline{background:#000;color:#f4f6f7;border-color:#66717a}
.gallery-section .outline:hover{background:#20262b}
.gallery-section .gallery button{background:#171b20}

.header-inner{gap:18px}header nav{gap:18px;font-size:13px}.header-social{display:flex;align-items:center;gap:14px}.review-button{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid #f87518;color:#fff;white-space:nowrap;font-size:12px}.review-button>span:first-child{color:#f87518}.review-button:hover{background:#402716}.facebook-icon{display:flex;align-items:center;color:#fff}.facebook-icon:hover{color:#f87518}footer .language-links{display:flex;position:static;background:none;box-shadow:none;gap:24px;padding:0 0 20px;font-weight:400;color:#bbc4cb}
@media(min-width:721px) and (max-width:1150px){header{height:126px}.header-inner{flex-wrap:wrap;justify-content:flex-end;gap:6px 18px}.brand{margin-right:auto;grid-row:span 2}header nav{order:5;width:100%;justify-content:flex-end;padding-bottom:12px}html{scroll-padding-top:140px}}
@media(max-width:720px){.header-inner{gap:12px}header .header-social{gap:10px}.review-button{padding:7px;font-size:10px}.brand img{width:88px}.facebook-icon svg{width:20px}header select{margin-left:auto;padding:7px}footer .language-links{flex-direction:row;flex-wrap:wrap}header nav{font-size:16px}}
@media(max-width:390px){.header-inner{gap:8px}.brand img{width:70px}.review-button{font-size:9px;padding:6px}.header-social{gap:7px!important}}
img{height:auto}.brand img{height:78px}.transport>img{height:100%}.photo-pair img{height:270px}.about-grid img{height:480px}.gallery img{height:260px}.sponsor-grid>img{height:530px}.gallery>a{overflow:hidden;display:block}.gallery>a[hidden]{display:none}
@media(max-width:720px){.brand img{height:62px}.transport>img{height:300px}.photo-pair img{height:170px}.about-grid img{height:350px}.gallery img{height:170px}.sponsor-grid>img{height:420px}}
@media(max-width:390px){.review-button>span[data-t]{display:none}.review-button{font-size:17px;padding:3px 9px}}
/* Subtle motion and keyboard-accessible navigation feedback. */
#nav>a{position:relative;padding:9px 0;transition:color .25s ease,transform .25s ease}
#nav>a::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
#nav>a:hover,#nav>a:focus-visible{color:var(--orange);transform:translateY(-2px)}
#nav>a:hover::after,#nav>a:focus-visible::after{transform:scaleX(1)}
.button,.outline,.review-button,.facebook-icon{transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease}
@media(hover:hover) and (pointer:fine){
 .button:hover,.review-button:hover{transform:translateY(-2px);box-shadow:0 7px 22px #f875181f}
 .facebook-icon:hover{transform:translateY(-2px) scale(1.08)}
 .gallery button img{transition:transform .65s cubic-bezier(.2,.65,.25,1),filter .65s ease}
 .gallery button:hover img{transform:scale(1.045);filter:brightness(1.07)}
}
.gallery button:focus-visible img{transform:scale(1.025)}
@media(prefers-reduced-motion:reduce){
 #nav>a:hover,#nav>a:focus-visible,.button:hover,.review-button:hover,.facebook-icon:hover,.gallery button:hover img,.gallery button:focus-visible img{transform:none}
 *,*::before,*::after{animation:none!important;transition:none!important}
}
/* 85% black over white = #262626: former white page sections. */
body{background:#262626;color:#f4f6f7}
.facts{border-bottom-color:#ffffff2e}
.facts>div{border-right-color:#ffffff2e}
.facts span,.section-head p:not(.eyebrow),.section-head>span{color:#c3c8cd}
.person p,address{color:#c3c8cd}
.transport,.sponsor-section,form{color:var(--ink)}
.sponsor-section .eyebrow,.transport .eyebrow{color:#b64d00}
form .form-note,form #formStatus{color:#59636a}
/* Unified black surfaces; orange remains the brand/action accent. */
:root{--paper:#000}
html,body,header,main,footer,.hero,.facts,.section,#unternehmen,.about-section,.gallery-section,.sponsor-section,.transport,#transport-optionen .transport,.transport-body,form,dialog{background-color:#000;color:#f4f6f7}
header nav,header select,header .menu,input,textarea,.sizes span,.outline,.gallery-section .outline,.gallery button,.gallery-section .gallery button,.gallery>a,.sponsor-grid>img,.close{background:#000;color:#f4f6f7}
.hero-photo{background-image:linear-gradient(90deg,#000 0%,#000ed 28%,#0003 65%),url('assets/heller-transporte-3.jpg')}
.sponsor-section .eyebrow,.transport .eyebrow{color:var(--orange)}
.sponsor-grid p:not(.eyebrow),form .form-note,form #formStatus,.person p,address{color:#c3c8cd}
input,textarea,.sizes span,header select,.outline,.close{border:1px solid #505050}
input::placeholder,textarea::placeholder{color:#aeb5bb}
.gallery-section .outline:hover,.outline:hover,.review-button:hover{background:#000;border-color:var(--orange);color:var(--orange)}
.close{border-radius:50%}
@media(max-width:720px){header nav{background:#000}}
/* Show the original DAF photograph without a dark overlay at all sizes. */
.hero-photo{background-image:url('assets/heller-transporte-3.jpg');opacity:1;filter:none}
.hero-photo{background-size:auto 110%;background-position:right center;background-repeat:no-repeat}
@media(min-width:1600px){.hero-photo{background-size:auto 125%;background-position:85% center}}
@media(max-width:1000px){.hero-photo{background-position:65% center}}
@media(max-width:720px){.hero-photo{background-position:58% center}}
/* DAF composition: leave a dedicated text area and anchor the truck to the right. */
.hero-photo{left:auto;right:0;width:70%;background-position:left center;background-size:auto 110%;animation:daf-arrive 1.3s cubic-bezier(.2,.65,.25,1) both}
@keyframes daf-arrive{from{transform:translateX(36px);opacity:0}to{transform:translateX(0);opacity:1}}
@media(min-width:1600px){.hero-photo{width:66%;background-position:left center;background-size:auto 120%}}
@media(max-width:1000px){.hero-photo{width:80%;background-position:left center}}
@media(max-width:720px){.hero-photo{width:100%;background-position:58% center;animation-duration:1s}}
@media(prefers-reduced-motion:reduce){.hero-photo{animation:none;transform:none;opacity:1}}
/* Section 02: right-aligned city convoy backdrop with a readable left text column. */
#unternehmen{position:relative;isolation:isolate;overflow:hidden;min-height:760px;display:flex;align-items:center}
.about-city-background{position:absolute;inset:0 0 0 auto;width:76%;z-index:-1;background:url('assets/heller-city-convoy.png') right center/auto 100% no-repeat;mask-image:linear-gradient(to right,transparent 0%,#000 37%);-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 37%)}
#unternehmen .about-grid{display:block;position:relative}
#unternehmen .about-grid>div{width:40%;max-width:490px}
#unternehmen .about-grid p:not(.eyebrow){color:#e0e3e6;text-shadow:0 1px 5px #000}
@media(min-width:1700px){.about-city-background{width:72%;background-size:cover}}
@media(max-width:1000px){#unternehmen .about-grid>div{width:48%}.about-city-background{width:82%;mask-image:linear-gradient(to right,transparent,#000 48%);-webkit-mask-image:linear-gradient(to right,transparent,#000 48%)}}
@media(max-width:720px){#unternehmen{display:block;min-height:0;padding:60px 0 340px}#unternehmen .about-grid>div{width:100%;max-width:none}.about-city-background{top:auto;bottom:0;width:100%;height:330px;background-position:right center;background-size:auto 100%;mask-image:linear-gradient(to bottom,transparent,#000 20%);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 20%)}}
/* Contact: depot scene on the right, readable contact details on the left. */
#kontakt{position:relative;isolation:isolate;overflow:hidden;background:#000}
.contact-background{position:absolute;inset:0 0 0 auto;width:78%;z-index:-1;background:url('assets/heller-contact-depot.png') right center/auto 100% no-repeat;mask-image:linear-gradient(to right,transparent 0%,#000 48%);-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 48%)}
#kontakt>.wrap{position:relative}
#kontakt .contact-grid{display:flex;flex-direction:column;gap:30px;width:49%;max-width:610px}
#kontakt .contact-grid>div{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
#kontakt address,#kontakt .contact-grid>div>.text-link{grid-column:1/-1;justify-self:start}
#kontakt .person a{font-size:14px}
#kontakt form{padding:26px;background:rgba(0,0,0,.88);border:1px solid #333}
#kontakt .section-head{max-width:610px}
@media(min-width:1700px){.contact-background{background-size:auto 100%;width:75%}}
@media(max-width:1000px){#kontakt .contact-grid{width:58%}.contact-background{width:84%;background-position:right center}}
@media(max-width:720px){#kontakt>.wrap{padding-bottom:350px}#kontakt .contact-grid{width:100%;max-width:none}.contact-background{top:auto;bottom:0;width:100%;height:330px;background-position:right center;background-size:auto 100%;mask-image:linear-gradient(to bottom,transparent,#000 22%);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%)}#kontakt form{padding:22px}}
@media(max-width:380px){#kontakt .contact-grid>div{grid-template-columns:1fr}#kontakt .fields{grid-template-columns:1fr}}
#kontakt>.wrap.section{background:transparent}

/* Transport options: white full-width section, original layout retained. */
#transport-optionen,#transport-optionen>.section,#transport-optionen .transport,#transport-optionen .transport-body{background:#fff;color:#141b20}
#transport-optionen .section-head p:not(.eyebrow),#transport-optionen .section-head>span{color:#566169}
#transport-optionen .sizes span{background:#fff;color:#141b20;border-color:#c8cdd0}
#transport-optionen .eyebrow{color:#b64d00}
#transport-optionen .text-link:hover{color:#b64d00}

/* Sponsorship: white background with readable dark typography. */
#wir-sponsoren{background:#fff;color:#141b20}
#wir-sponsoren .sponsor-grid>img{background:#fff}
#wir-sponsoren .sponsor-grid p:not(.eyebrow){color:#566169}
#wir-sponsoren .eyebrow,#wir-sponsoren .text-link:hover{color:#b64d00}

/* Match the Transport anfragen CTA. */
header .review-button{display:inline-flex;gap:12px;align-items:center;justify-content:center;background:var(--orange);border:0;border-radius:0;padding:15px 23px;color:#161b20;font-weight:700;font-size:14px;line-height:1.65;box-shadow:none}
header .review-button>span:first-child{color:inherit;background:none;border-radius:0}
header .review-button:hover,header .review-button:focus-visible{background:#ff9347;color:#161b20;box-shadow:0 7px 22px #f875181f}
@media(max-width:1000px){header .review-button{padding:12px;font-size:12px;gap:7px}}
@media(max-width:720px){header .review-button{padding:9px 7px;font-size:10px}}
@media(max-width:390px){header .review-button{padding:7px 10px;font-size:17px}}

/* Stationary photographs, clipped to their own scrolling sections. */
.hero,#unternehmen{clip-path:inset(0)}
.hero-photo{position:fixed;top:100px;bottom:0;height:calc(100svh - 100px);animation:none;transform:none}
.about-city-background{position:fixed;top:0;bottom:0;height:100svh}
@media(max-width:720px){
  .hero-photo{top:80px;height:calc(100svh - 80px)}
  .about-city-background{top:0;bottom:0;height:100svh;background-position:right bottom;background-size:auto 60svh}
}
@media(min-width:721px){
  .hero-photo{bottom:auto;height:min(690px,calc(100svh - 100px))}
  .about-city-background{top:100px;bottom:auto;height:min(760px,calc(100svh - 100px))}
}

/* Gentle interaction accents alongside the scroll reveals. */
@media(prefers-reduced-motion:no-preference){
  main .button,main .outline{transition:transform .3s ease,background-color .3s ease,box-shadow .3s ease}
  main .button:hover,main .outline:hover{transform:translateY(-3px);box-shadow:0 8px 24px #f8751826}
  .sizes>span{transition:transform .3s ease,border-color .3s ease}
  .sizes>span:hover{transform:translateY(-4px);border-color:var(--orange)}
  .gallery img{transition:transform .7s cubic-bezier(.2,.65,.25,1)}
}