/* AL-FI Transport Albstadt – globale Styles (Komponenten-Styles stehen inline im Markup) */
html { color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100%; }
body { margin: 0; font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; font-feature-settings: "kern" 1; text-rendering: optimizeLegibility; color: #E6ECF4; background:#0C1726; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
input, textarea, select { font: inherit; }
a { color:#8FB8F5; text-decoration: none; }
a:hover { color:#B9D3FA; text-decoration: underline; }
::selection { background: #2867C7; color: #fff; }
@keyframes pickerIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
:focus-visible { outline: 3px solid #6FA0EC; outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
@keyframes pageInA { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes pageInB { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes ldSway { from { transform: rotateX(-24deg) rotateY(-38deg); } to { transform: rotateX(-18deg) rotateY(-18deg); } }
@keyframes ldRoad { from { background-position: 0 0; } to { background-position: -48px 0; } }
@keyframes ldBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes ldWheel { to { transform: rotate(360deg); } }
@keyframes ldPallet { from { transform: translateZ(120px) translateY(-18px); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes ldBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ldText { from { opacity: 0; transform: translateY(8px); letter-spacing: 0.4em; } to { opacity: 1; transform: none; } }
@keyframes pageFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes truckIdle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes roadDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes routeDrawV { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes truckRun { 0% { transform: translateX(0); opacity: 0; } 6% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
@keyframes truckRunV { 0% { transform: translateY(0); opacity: 0; } 6% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } }
@keyframes stepPing { 0% { border-color: #2867C7; box-shadow: 0 0 0 0 rgba(111,160,236,0.7); } 30% { border-color: #8FB8F5; } 100% { border-color: #2867C7; box-shadow: 0 0 0 19px rgba(111,160,236,0); } }
@keyframes stepPingV { 0% { border-color: #2867C7; box-shadow: 0 0 0 0 rgba(111,160,236,0.7); } 30% { border-color: #8FB8F5; } 100% { border-color: #2867C7; box-shadow: 0 0 0 17px rgba(111,160,236,0); } }
@media (prefers-reduced-motion: no-preference) {
  [data-reveal][data-rv] { opacity: 0; transform: translateY(26px) scale(.985); filter: blur(6px); transition: opacity 800ms cubic-bezier(.16,1,.3,1), transform 800ms cubic-bezier(.16,1,.3,1), filter 800ms cubic-bezier(.16,1,.3,1); }
  [data-reveal][data-rv="in"] { opacity: 1; transform: none; filter: none; }
  [data-reveal="2"][data-rv] { transition-delay: 70ms; }
  [data-reveal="3"][data-rv] { transition-delay: 140ms; }
  [data-reveal="4"][data-rv] { transition-delay: 210ms; }
  /* Sektionen: weiches Einblenden beim Scrollen */
  [data-fade][data-fd] { opacity: 0; transform: translateY(28px); transition: opacity 900ms cubic-bezier(.16,1,.3,1), transform 900ms cubic-bezier(.16,1,.3,1); }
  [data-fade][data-fd="in"] { opacity: 1; transform: none; }
}
#leistungen, #ueber-uns { scroll-margin-top: 48px; }
/* will-change hält die Kachel dauerhaft auf einer eigenen Ebene – sonst springt sie nach dem Hover um einen Subpixel zurück. */
[data-svc-icon] { will-change: transform; backface-visibility: hidden; transition: background-color 320ms cubic-bezier(.22,.61,.36,1), border-color 320ms cubic-bezier(.22,.61,.36,1), color 320ms cubic-bezier(.22,.61,.36,1), transform 460ms cubic-bezier(.34,1.45,.64,1); }
article:hover [data-svc-icon] { background: #F1F5FB !important; border-color: #F1F5FB !important; color: #0C1726 !important; transform: rotate(-6deg) scale(1.06); }
@keyframes planeFly { 0% { transform: none; opacity: 1; } 42% { transform: translate(22px,-22px) rotate(10deg); opacity: 0; } 43% { transform: translate(-22px,22px); opacity: 0; } 100% { transform: none; opacity: 1; } }
[data-send] { position: relative; overflow: hidden; }
/* „Mehr über AL-FI“: beim Hover rückt der Text nach links und ein Pfeil gleitet herein.
   Die Breite bleibt gleich (Padding wird nur umverteilt), damit nichts umbricht. */
[data-more] { position: relative; }
[data-more] svg { position: absolute; right: 10px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; opacity: 0; transform: translateX(-10px); transition: opacity 260ms ease, transform 380ms cubic-bezier(.34,1.45,.64,1); }
[data-more]:hover, [data-more]:focus-visible { padding-left: 13px !important; padding-right: 31px !important; }
[data-more]:hover svg, [data-more]:focus-visible svg { opacity: 1; transform: none; }
@keyframes vanDrive { 0% { transform: none; opacity: 1; } 12% { transform: translateX(-3px); } 45% { transform: translateX(26px); opacity: 0; } 46% { transform: translateX(-26px); opacity: 0; } 80% { transform: translateX(2px); opacity: 1; } 100% { transform: none; opacity: 1; } }
[data-van] { overflow: hidden; }
@keyframes mnavIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
[data-mnav] { position: relative; display: flex; align-items: center; min-height: 52px; padding: 0 14px; border-radius: 9px; font-size: 17px; font-weight: 600; color: #C6D1E0; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background-color 260ms cubic-bezier(.22,.61,.36,1), color 260ms cubic-bezier(.22,.61,.36,1), padding-left 340ms cubic-bezier(.22,.61,.36,1), transform 120ms ease; animation: mnavIn 420ms cubic-bezier(.16,1,.3,1) both; }
li:nth-child(2) > [data-mnav] { animation-delay: 40ms; }
li:nth-child(3) > [data-mnav] { animation-delay: 80ms; }
li:nth-child(4) > [data-mnav] { animation-delay: 120ms; }
li:nth-child(5) > [data-mnav] { animation-delay: 160ms; }
[data-mnav]::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0; border-radius: 3px; background: #5B94E8; transform: translateY(-50%); transition: height 320ms cubic-bezier(.22,.61,.36,1); }
[data-mnav] svg { margin-left: auto; flex: 0 0 auto; opacity: 0.3; transform: translateX(-6px); transition: opacity 260ms ease, transform 340ms cubic-bezier(.34,1.45,.64,1), color 260ms ease; }
[data-mnav]:hover, [data-mnav]:focus-visible { background: rgba(40,103,199,0.14); color: #F1F5FB; text-decoration: none; padding-left: 20px; }
[data-mnav]:hover::before, [data-mnav]:focus-visible::before, [data-mnav][aria-current="page"]::before { height: 56%; }
[data-mnav]:hover svg, [data-mnav]:focus-visible svg { opacity: 1; transform: none; color: #8FB8F5; }
[data-mnav]:active { transform: scale(.98); background: rgba(40,103,199,0.22); }
[data-mnav][aria-current="page"] { background: rgba(40,103,199,0.1); color: #FFFFFF; padding-left: 20px; }
[data-mnav][aria-current="page"] svg { opacity: 0.8; transform: none; color: #8FB8F5; }
[data-van]:hover svg { animation: vanDrive 800ms cubic-bezier(.45,0,.3,1); }
[data-send]:not(:disabled):hover svg { animation: planeFly 720ms cubic-bezier(.22,.61,.36,1); }