/* =====================================================================
   AGRONOMIAS TRUCKSTOP  ·  Zusätzliches CSS  (v4 - Abgerockter Highway)
   Design > Customizer > Zusätzliches CSS
   Alles mit .truckstop- geprefixt -> keine Theme-Konflikte.
   Leitfarben: Rot, dreckiges Weiss, Hellblau (Vereinsfarben)
   + warmes altes Tankstellen-Amber als Lichtquelle.
   Fonts (im HTML-Block verlinkt): Anton (Highway-Display),
   Alfa Slab One (Vintage-Slab). Fliesstext bleibt System-Font.
   ===================================================================== */

/* Verhindert horizontalen Verschub / weisse Streifen beim Laden. */
html, body{ overflow-x:hidden; max-width:100%; }

/* Theme-Container NUR auf dieser Seite neutralisieren (Fullbleed). */
body:has(.truckstop-root),
body:has(.truckstop-root) *:has(.truckstop-root){
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  overflow-x:clip;
}

.truckstop-root{
  --ts-red:#e0382e;          /* Vereinsrot, warm + dreckig */
  --ts-red-deep:#8f1b16;
  --ts-white:#ece3cc;        /* dreckiges Weiss */
  --ts-white-hot:#fff8e6;
  --ts-blue:#6cc7e6;         /* Vereins-Hellblau / Neonblau */
  --ts-blue-deep:#1e6f8d;
  --ts-amber:#f0a63c;        /* altes Tankstellen-Amber */
  --ts-amber-deep:#a05f14;
  --ts-rust:#7a3a1c;
  --ts-rust-dark:#4a2410;
  --ts-cream:#d5c6a2;

  --ts-bg:#080a10;           /* tiefes Nachtblau-Schwarz */
  --ts-bg-2:#0b0d13;
  --ts-line:rgba(213,198,162,.16);
  --ts-ink:#e7ddc7;
  --ts-muted:#95886b;

  --ts-display:"Anton","Franklin Gothic Heavy","Arial Narrow Bold",Impact,Haettenschweiler,sans-serif;
  --ts-slab:"Alfa Slab One","Ultra",Rockwell,Georgia,serif;
  --ts-cond:"Arial Narrow","Franklin Gothic Medium","Helvetica Neue",Arial,sans-serif;
  --ts-mono:"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --ts-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --ts-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");

  --ts-max:1160px;

  position:relative; display:block; width:100%;
  color:var(--ts-ink); font-family:var(--ts-sans); line-height:1.5;
  background:var(--ts-bg); -webkit-font-smoothing:antialiased; overflow:hidden;
}

/* Fullwidth erzwingen (Standard-Full-Bleed, kein horizontaler Overflow) */
.truckstop-root{
  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  overflow-x:hidden;
}

.truckstop-root *,.truckstop-root *::before,.truckstop-root *::after{ box-sizing:border-box; }
.truckstop-root img{ max-width:100%; height:auto; display:block; }

/* Korn + Scanlines ueber den Hintergruenden (unter dem Inhalt) */
.truckstop-root::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    var(--ts-noise),
    repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
  background-size:140px 140px, auto;
  opacity:.5; mix-blend-mode:overlay;
}
.truckstop-root::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 30%, transparent 55%, rgba(0,0,0,.6) 100%);
}

.truckstop-section{ position:relative; width:100%; max-width:var(--ts-max); margin:0 auto; padding:60px 20px; z-index:2; }

.truckstop-h2{
  font-family:var(--ts-display); font-size:clamp(1.8rem,7.4vw,3rem);
  line-height:.98; font-weight:400; letter-spacing:2px; text-transform:uppercase;
  margin:0 0 22px; color:var(--ts-white); text-shadow:3px 3px 0 rgba(0,0,0,.65);
}
.truckstop-h2-center{ text-align:center; }
.truckstop-h2-center::after{
  content:""; display:block; width:66px; height:6px; margin:14px auto 0;
  background:repeating-linear-gradient(45deg, var(--ts-amber) 0 8px, #171006 8px 16px);
  border-radius:2px; opacity:.85; box-shadow:0 1px 0 rgba(0,0,0,.6);
}
.truckstop-h2-mark{ color:var(--ts-red); }

/* ---------- KAPUTTES NEON (Text) ---------- */
.truckstop-neon-red{
  color:var(--ts-white-hot);
  text-shadow:
    0 0 3px #fff, 0 0 7px var(--ts-red), 0 0 18px var(--ts-red),
    0 0 34px var(--ts-red-deep), 0 0 60px var(--ts-red-deep);
}
.truckstop-neon-blue{
  color:var(--ts-white-hot);
  text-shadow:
    0 0 3px #fff, 0 0 7px var(--ts-blue), 0 0 18px var(--ts-blue),
    0 0 34px var(--ts-blue-deep), 0 0 60px var(--ts-blue-deep);
}
/* Einschalten wie eine alte Roehre + seltener, unregelmaessiger Brumm-Dip */
.truckstop-flicker{ animation:truckstop-ignite 1.6s both, truckstop-neonidle 11s 1.6s infinite; }
@keyframes truckstop-ignite{
  0%{opacity:0} 7%{opacity:.9} 10%{opacity:.15} 16%{opacity:1}
  21%{opacity:.3} 28%{opacity:1} 34%{opacity:.75} 42%{opacity:1} 100%{opacity:1}
}
@keyframes truckstop-neonidle{
  0%,41%,44.5%,78%,79.6%,100%{opacity:1}
  42%,44%{opacity:.62}
  78.8%{opacity:.85}
}
/* Einzelne "defekte" Buchstaben: Roehre faellt kurz komplett aus */
.truckstop-nl{ display:inline-block; }
.truckstop-nl-dud{ animation:truckstop-dud1 9s 2.2s infinite; }
.truckstop-nl-dud2{ animation:truckstop-dud2 13s 3.4s infinite; }
@keyframes truckstop-dud1{
  0%,62%,64.7%,66%,66.9%,100%{opacity:1; text-shadow:inherit;}
  63%,64.4%{opacity:.25; text-shadow:0 0 2px rgba(255,255,255,.25);}
  66.4%{opacity:.5;}
}
@keyframes truckstop-dud2{
  0%,29%,31.2%,84%,85.8%,100%{opacity:1;}
  29.8%,30.8%{opacity:.2; text-shadow:0 0 2px rgba(255,255,255,.2);}
  84.9%{opacity:.45;}
}

/* ---------- METALL-UTILITIES: Nieten + Verwitterung ---------- */
.truckstop-rivets{ position:relative; }
.truckstop-rivets::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background-image:
    radial-gradient(circle 3.4px at 9px 9px, #d9ceb4 0 1px, #57493a 1.7px, rgba(0,0,0,.55) 2.5px, transparent 3.4px),
    radial-gradient(circle 3.4px at calc(100% - 9px) 9px, #d9ceb4 0 1px, #57493a 1.7px, rgba(0,0,0,.55) 2.5px, transparent 3.4px),
    radial-gradient(circle 3.4px at 9px calc(100% - 9px), #d9ceb4 0 1px, #57493a 1.7px, rgba(0,0,0,.55) 2.5px, transparent 3.4px),
    radial-gradient(circle 3.4px at calc(100% - 9px) calc(100% - 9px), #d9ceb4 0 1px, #57493a 1.7px, rgba(0,0,0,.55) 2.5px, transparent 3.4px);
}
.truckstop-weather{ position:relative; }
.truckstop-weather::before{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; z-index:0;
  background:
    var(--ts-noise),
    radial-gradient(130px 80px at 0% 100%, rgba(122,58,28,.4), transparent 65%),
    radial-gradient(110px 60px at 100% 0%, rgba(122,58,28,.32), transparent 62%),
    radial-gradient(80px 46px at 82% 100%, rgba(74,36,16,.34), transparent 70%),
    linear-gradient(115deg, transparent 40%, rgba(255,244,214,.08) 46%, transparent 53%);
  background-size:140px 140px, auto, auto, auto, auto;
  mix-blend-mode:overlay; opacity:.9;
}
.truckstop-weather > *{ position:relative; z-index:1; }

/* =====================================================================
   HERO
   ===================================================================== */
.truckstop-hero{
  position:relative; width:100%; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; padding:84px 20px 118px; overflow:hidden; isolation:isolate;
}
.truckstop-hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.truckstop-asphalt{
  position:absolute; inset:0;
  background:
    radial-gradient(130% 82% at 50% 6%, #1c1a20 0%, #101017 40%, #050507 100%),
    radial-gradient(90% 40% at 50% 100%, rgba(240,166,60,.10), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,236,200,.02) 0 2px, transparent 2px 5px);
}
.truckstop-highway{
  position:absolute; left:50%; bottom:-8%; width:64%; height:72%;
  transform:translateX(-50%) perspective(520px) rotateX(60deg); transform-origin:bottom center;
  background:linear-gradient(90deg, transparent 0 46%, rgba(236,227,204,.7) 46% 54%, transparent 54% 100%);
  -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 80%); mask-image:linear-gradient(to top,#000 0%,transparent 80%);
  background-size:100% 92px; animation:truckstop-road 2.4s linear infinite; opacity:.26;
}
@keyframes truckstop-road{ to{ background-position:0 92px; } }

/* Scheinwerferkegel, die durchs Bild wischen */
.truckstop-beam{ position:absolute; top:-30%; width:56vw; height:160%; filter:blur(8px); mix-blend-mode:screen; opacity:0; transform:rotate(13deg); animation:truckstop-sweep 13s ease-in-out infinite; }
.truckstop-beam-1{ left:-46%; background:linear-gradient(90deg,transparent,rgba(240,166,60,.20),rgba(108,199,230,.10),transparent); animation-delay:0s; }
.truckstop-beam-2{ left:-46%; background:linear-gradient(90deg,transparent,rgba(224,56,46,.16),rgba(240,166,60,.10),transparent); animation-delay:6.5s; animation-duration:16s; }
@keyframes truckstop-sweep{ 0%{transform:translateX(0) rotate(13deg);opacity:0} 12%{opacity:.75} 88%{opacity:.75} 100%{transform:translateX(200vw) rotate(13deg);opacity:0} }

.truckstop-vignette{ position:absolute; inset:0; background:radial-gradient(90% 70% at 50% 42%, transparent 48%, rgba(0,0,0,.74) 100%); }
.truckstop-halftone{ position:absolute; inset:0; pointer-events:none; opacity:.12; mix-blend-mode:overlay; background-image:radial-gradient(rgba(255,236,200,.8) 1px, transparent 1.4px); background-size:6px 6px; }
.truckstop-grain{ position:absolute; inset:-50%; z-index:3; pointer-events:none; opacity:.09; background-image:radial-gradient(rgba(255,236,200,.9) .5px,transparent .5px),radial-gradient(rgba(255,236,200,.6) .5px,transparent .5px); background-size:3px 3px,4px 4px; background-position:0 0,1px 2px; animation:truckstop-grain 1.1s steps(3) infinite; }
@keyframes truckstop-grain{ 0%{transform:translate(0,0)} 33%{transform:translate(-2%,1%)} 66%{transform:translate(1%,-2%)} 100%{transform:translate(0,0)} }

/* Staub & Funken im Licht */
.truckstop-particles{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.truckstop-dot{ position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%; background:var(--ts-amber); box-shadow:0 0 6px var(--ts-amber); opacity:0; animation:truckstop-rise linear infinite; }
@keyframes truckstop-rise{ 0%{transform:translateY(0) scale(.6);opacity:0} 10%{opacity:.65} 100%{transform:translateY(-92vh) scale(1);opacity:0} }

/* Zirkel: konstantes Leuchten am Bild, Atmen ueber Opacity + Glow-Layer
   (nur opacity wird animiert -> fluessig auch auf alten Handys) */
.truckstop-zirkel-hero{
  position:absolute; top:50%; left:50%; width:min(74vw,460px);
  transform:translate(-50%,-52%); z-index:1; opacity:.2;
  filter:brightness(0) invert(1) drop-shadow(0 0 22px rgba(108,199,230,.55));
  pointer-events:none; animation:truckstop-zirkelbreath 12s ease-in-out infinite;
}
@keyframes truckstop-zirkelbreath{
  0%{opacity:.10} 9%{opacity:.22} 13%{opacity:.13} 22%{opacity:.26}
  38%{opacity:.32} 50%{opacity:.24} 63%{opacity:.34} 78%{opacity:.2}
  86%{opacity:.28} 100%{opacity:.10}
}
.truckstop-zirkel-glow{
  position:absolute; top:50%; left:50%; width:min(92vw,600px); aspect-ratio:1;
  transform:translate(-50%,-52%); z-index:1; pointer-events:none;
  background:radial-gradient(circle, rgba(108,199,230,.14), rgba(240,166,60,.05) 45%, transparent 70%);
  animation:truckstop-glowbreath 12s ease-in-out infinite;
}
@keyframes truckstop-glowbreath{
  0%{opacity:.25} 22%{opacity:.7} 38%{opacity:1} 50%{opacity:.6}
  63%{opacity:1} 78%{opacity:.5} 100%{opacity:.25}
}

.truckstop-hero-inner{ position:relative; z-index:4; max-width:900px; }

.truckstop-badge{
  display:inline-block; font-family:var(--ts-mono); font-size:.68rem; letter-spacing:2px; text-transform:uppercase;
  color:var(--ts-cream); border:1px solid rgba(213,198,162,.35); border-radius:3px; padding:8px 14px; margin-bottom:24px;
  background:linear-gradient(180deg, rgba(58,48,36,.55), rgba(26,20,14,.65));
  box-shadow:0 3px 8px rgba(0,0,0,.5), 0 1px 0 rgba(255,240,205,.08) inset;
  transform:rotate(-.6deg);
}

.truckstop-title{ margin:0 0 16px; font-family:var(--ts-display); font-weight:400; text-transform:uppercase; line-height:.88; }
.truckstop-title-line{ display:block; }
.truckstop-title-small{
  font-family:var(--ts-slab); font-size:clamp(1.5rem,7.4vw,3rem); font-weight:400;
  color:var(--ts-amber); letter-spacing:2px; text-transform:none;
  text-shadow:2px 3px 0 rgba(0,0,0,.7), 0 0 22px rgba(240,166,60,.35);
  transform:rotate(-1.4deg); margin-bottom:6px;
}
.truckstop-title-big{ font-size:clamp(2.6rem,15vw,8.4rem); letter-spacing:2px; white-space:nowrap; }

.truckstop-subline{ font-family:var(--ts-cond); font-size:clamp(1.05rem,4.6vw,1.4rem); letter-spacing:.5px; color:var(--ts-cream); max-width:24ch; margin:0 auto 26px; }

.truckstop-hero-meta{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:22px; }
.truckstop-meta-item{
  display:flex; flex-direction:column; align-items:center; min-width:98px; padding:10px 14px;
  border:1px solid rgba(213,198,162,.28); border-radius:4px;
  background:linear-gradient(180deg,#20232c,#12141b);
  box-shadow:0 5px 14px rgba(0,0,0,.5), 0 1px 0 rgba(255,240,205,.07) inset;
}
.truckstop-meta-item:nth-child(1){ transform:rotate(-1.3deg); }
.truckstop-meta-item:nth-child(2){ transform:rotate(.9deg); }
.truckstop-meta-item:nth-child(3){ transform:rotate(-.7deg); }
.truckstop-meta-k{ font-family:var(--ts-mono); font-size:.6rem; letter-spacing:2px; text-transform:uppercase; color:var(--ts-muted); }
.truckstop-meta-v{ font-family:var(--ts-display); font-size:1.2rem; letter-spacing:1.5px; color:var(--ts-white); }

.truckstop-hero-price{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:28px; }
.truckstop-pill{ font-family:var(--ts-cond); font-weight:700; font-size:1rem; letter-spacing:.5px; text-transform:uppercase; padding:9px 15px; border-radius:3px; border:1px solid var(--ts-line); background:rgba(213,198,162,.05); color:var(--ts-white); }
.truckstop-pill:first-child{ border-color:rgba(224,56,46,.55); box-shadow:0 0 10px rgba(224,56,46,.15); }
.truckstop-pill-blue{ border-color:rgba(108,199,230,.4); }
.truckstop-pill-glow{ border-color:rgba(108,199,230,.6); color:var(--ts-blue); box-shadow:0 0 12px rgba(108,199,230,.25); }

.truckstop-btn{
  display:inline-block; font-family:var(--ts-display); font-weight:400; font-size:1.1rem; text-transform:uppercase; letter-spacing:3px; text-decoration:none;
  color:#fff; background:linear-gradient(180deg,var(--ts-red),var(--ts-red-deep));
  padding:16px 36px; border-radius:4px; border:1px solid rgba(255,255,255,.22);
  box-shadow:0 6px 0 rgba(80,10,10,.65), 0 12px 26px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.25) inset;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease; min-height:48px;
  text-shadow:1px 1px 0 rgba(0,0,0,.4);
}
.truckstop-btn:hover,.truckstop-btn:focus-visible{ transform:translateY(-2px); box-shadow:0 8px 0 rgba(80,10,10,.65),0 16px 32px rgba(0,0,0,.6); filter:brightness(1.08); color:#fff; }
.truckstop-btn:active{ transform:translateY(3px); box-shadow:0 3px 0 rgba(80,10,10,.65),0 6px 14px rgba(0,0,0,.5); }
.truckstop-btn-ghost{ background:transparent; color:var(--ts-blue); border:1px solid rgba(108,199,230,.5); box-shadow:none; text-shadow:none; }
.truckstop-btn-ghost:hover{ box-shadow:0 0 18px rgba(108,199,230,.25) inset; color:var(--ts-blue); }

/* OPEN-Schild: pendelt leicht, letzter Buchstabe faellt manchmal aus */
.truckstop-neon-sign{
  position:absolute; z-index:5; bottom:24px; right:14px;
  font-family:var(--ts-mono); font-size:.7rem; letter-spacing:1px; text-transform:uppercase;
  color:var(--ts-red); border:1px solid rgba(224,56,46,.55); border-radius:4px; padding:8px 12px;
  background:rgba(20,8,8,.6); text-shadow:0 0 8px rgba(224,56,46,.8);
  display:flex; align-items:center; gap:7px;
  transform-origin:50% -14px; animation:truckstop-swing 5.6s ease-in-out infinite;
  box-shadow:0 4px 12px rgba(0,0,0,.5), 0 0 14px rgba(224,56,46,.14);
}
.truckstop-neon-sign::before{
  content:""; position:absolute; top:-14px; left:50%; width:1px; height:14px;
  background:linear-gradient(180deg, transparent, rgba(213,198,162,.5));
}
@keyframes truckstop-swing{ 0%,100%{transform:rotate(-1.8deg)} 50%{transform:rotate(1.8deg)} }
.truckstop-open-word{ display:inline-flex; font-weight:700; letter-spacing:2px; }
.truckstop-open-word span{ display:inline-block; }
.truckstop-open-dud{ animation:truckstop-opendud 8s 1.4s infinite; }
@keyframes truckstop-opendud{
  0%,54%,57.4%,59%,90%,91.6%,100%{opacity:1; text-shadow:0 0 8px rgba(224,56,46,.8);}
  55%,57%{opacity:.15; text-shadow:none;}
  58.2%{opacity:.6;}
  90.8%{opacity:.2; text-shadow:none;}
}
.truckstop-open-rest{ color:rgba(236,227,204,.75); text-shadow:none; }
.truckstop-open-dot{ width:8px; height:8px; border-radius:50%; background:var(--ts-red); box-shadow:0 0 9px var(--ts-red); animation:truckstop-blink 1.5s steps(2) infinite; }
@keyframes truckstop-blink{ 50%{opacity:.2} }

.truckstop-scroll-hint{ position:absolute; z-index:5; bottom:16px; left:50%; transform:translateX(-50%); width:22px; height:36px; border:2px solid rgba(213,198,162,.3); border-radius:12px; }
.truckstop-scroll-hint span{ position:absolute; left:50%; top:6px; width:4px; height:8px; margin-left:-2px; border-radius:2px; background:var(--ts-amber); box-shadow:0 0 6px var(--ts-amber); animation:truckstop-scroll 1.7s ease-in-out infinite; }
@keyframes truckstop-scroll{ 0%{transform:translateY(0);opacity:1} 70%{transform:translateY(13px);opacity:0} 100%{opacity:0} }

/* =====================================================================
   NEXT EXIT  (verwittertes Autobahnschild)
   ===================================================================== */
.truckstop-exit-wrap{ display:flex; justify-content:center; padding:40px 20px 0; position:relative; z-index:2; }
.truckstop-exit-sign{
  position:relative; width:100%; max-width:520px;
  background:linear-gradient(180deg,#11623b,#0a4429);
  border:3px solid #e4dcc4; border-radius:8px; padding:18px 56px 18px 22px;
  color:#eee6d0; text-align:left; transform:rotate(-1.2deg);
  box-shadow:0 14px 36px rgba(0,0,0,.6), 0 0 0 5px #08281a, 0 2px 0 rgba(255,255,255,.12) inset;
}
.truckstop-exit-small{ display:block; font-family:var(--ts-mono); font-size:.68rem; letter-spacing:3px; text-transform:uppercase; opacity:.85; }
.truckstop-exit-big{ display:block; font-family:var(--ts-display); font-weight:400; font-size:clamp(1.45rem,6.6vw,2.2rem); letter-spacing:1.5px; text-transform:uppercase; line-height:1.04; }
.truckstop-exit-arrow{ position:absolute; right:18px; top:50%; width:28px; height:28px; margin-top:-14px; border-top:5px solid #e4dcc4; border-right:5px solid #e4dcc4; transform:rotate(45deg); filter:drop-shadow(1px 1px 0 rgba(0,0,0,.4)); }

/* =====================================================================
   COUNTDOWN  (Motel-Rollzahlen)
   ===================================================================== */
.truckstop-countdown-section{ text-align:center; }
.truckstop-countdown{ display:flex; justify-content:center; align-items:stretch; flex-wrap:nowrap; gap:6px; max-width:560px; margin:0 auto; }
.truckstop-cd-unit{
  position:relative; flex:1 1 0; min-width:0; overflow:hidden;
  background:linear-gradient(180deg,#161310,#0b0a08); border:1px solid rgba(224,56,46,.24); border-radius:6px; padding:16px 4px 12px;
  box-shadow:0 10px 24px rgba(0,0,0,.55), 0 1px 0 rgba(255,220,160,.07) inset;
}
.truckstop-cd-unit::after{
  content:""; position:absolute; left:0; right:0; top:calc(50% - 10px); height:1px;
  background:rgba(0,0,0,.55); box-shadow:0 1px 0 rgba(255,240,205,.05); pointer-events:none;
}
.truckstop-cd-num{ display:block; font-family:var(--ts-mono); font-size:clamp(1.7rem,9vw,3.3rem); font-weight:700; line-height:1; color:var(--ts-white-hot); text-shadow:0 0 4px #fff,0 0 12px var(--ts-red),0 0 26px var(--ts-red-deep); font-variant-numeric:tabular-nums; }
.truckstop-cd-label{ display:block; margin-top:8px; font-family:var(--ts-mono); font-size:.58rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--ts-muted); }
.truckstop-cd-sep{ display:none; align-self:center; font-size:2rem; color:var(--ts-red); font-weight:800; text-shadow:0 0 10px rgba(224,56,46,.6); }
.truckstop-cd-open{ margin-top:22px; font-family:var(--ts-display); font-size:clamp(1.4rem,6vw,2.1rem); text-transform:uppercase; letter-spacing:1px; color:var(--ts-white-hot); text-shadow:0 0 4px #fff,0 0 14px var(--ts-blue),0 0 30px var(--ts-blue-deep); }

/* =====================================================================
   PREISTAFEL - TOTEM  (verwitterte Emaille + Zapfsaeulen-Walzen)
   ===================================================================== */
.truckstop-totem{
  max-width:560px; margin:0 auto; position:relative; z-index:2;
  background:linear-gradient(180deg,#e2d8be,#c3b697 70%,#ab9c7c);
  border:4px solid #0c0906; border-radius:12px; padding:0 0 16px; overflow:hidden;
  box-shadow:0 26px 54px rgba(0,0,0,.65), 0 0 0 2px rgba(255,255,255,.12) inset;
}
/* Rot-Weiss Diner-Streifen oben, leicht ausgeblichen */
.truckstop-totem::before{ content:""; display:block; height:10px; background:repeating-linear-gradient(45deg, #c8362c 0 14px, #e6ddc4 14px 28px); opacity:.92; }
/* Verwitterungs-Overlay (eigenes Element, damit Streifen + Nieten frei bleiben) */
.truckstop-metal-wear{
  position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit;
  background:
    var(--ts-noise),
    radial-gradient(150px 90px at 0% 100%, rgba(122,58,28,.5), transparent 65%),
    radial-gradient(120px 66px at 100% 4%, rgba(122,58,28,.4), transparent 62%),
    radial-gradient(90px 46px at 92% 100%, rgba(74,36,16,.42), transparent 70%),
    radial-gradient(60px 30px at 12% 2%, rgba(74,36,16,.3), transparent 70%),
    linear-gradient(115deg, transparent 38%, rgba(255,246,220,.10) 45%, transparent 54%);
  background-size:140px 140px, auto, auto, auto, auto, auto;
  mix-blend-mode:overlay; opacity:.95;
}
.truckstop-totem-cap{ background:linear-gradient(180deg,#cf3a2c,#8f1b16); color:#fff; text-align:center; padding:16px 12px 13px; border-bottom:4px solid #0c0906; }
.truckstop-totem-brand{ display:block; font-family:var(--ts-slab); font-weight:400; font-size:clamp(1.5rem,7.4vw,2.3rem); letter-spacing:2px; text-transform:uppercase; text-shadow:2px 3px 0 rgba(0,0,0,.4); }
.truckstop-totem-sub{ display:block; font-family:var(--ts-mono); font-size:.66rem; letter-spacing:3px; text-transform:uppercase; opacity:.9; margin-top:3px; }

.truckstop-totem-body{ background:#0d0b08; margin:12px; border-radius:6px; padding:10px; box-shadow:0 2px 0 rgba(255,255,255,.04) inset, 0 0 0 1px rgba(0,0,0,.5); }
.truckstop-fuel-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 10px; padding:12px 8px; border-bottom:1px solid rgba(236,227,204,.1); }
.truckstop-fuel-row:last-child{ border-bottom:0; }
.truckstop-fuel-grade{ font-family:var(--ts-display); font-weight:400; font-size:clamp(.85rem,3.8vw,1.3rem); letter-spacing:1.5px; text-transform:uppercase; padding:6px 10px; border-radius:3px; color:#0d0b08; white-space:nowrap; box-shadow:0 2px 0 rgba(0,0,0,.4); }
.truckstop-grade-red{ background:linear-gradient(180deg,#e0382e,#a72a1d); color:#fff; }
.truckstop-grade-blue{ background:linear-gradient(180deg,#7fd0ea,#4fa7c6); }
.truckstop-grade-white{ background:linear-gradient(180deg,#ece3cc,#c9bda0); }

.truckstop-fuel-price{ display:inline-flex; align-items:flex-start; gap:3px; color:var(--ts-red); margin-left:auto; }
.truckstop-price-blue{ color:var(--ts-blue); }

/* Mechanische Ziffern-Walze (Zapfsaeulen-Zaehler).
   Ohne JS steht die Endziffer statisch drin -> immer lesbar. */
.truckstop-digit{
  position:relative; display:inline-block; overflow:hidden;
  font-family:var(--ts-mono); font-weight:700;
  width:.78em; height:1.16em;
  background:linear-gradient(180deg,#191307,#0e0a05 45%,#191307);
  border-radius:3px;
  box-shadow:0 2px 0 rgba(0,0,0,.6) inset, 0 0 10px rgba(224,56,46,.14);
}
.truckstop-fuel-price .truckstop-digit{ font-size:clamp(1.7rem,8.4vw,3.4rem); }
.truckstop-digit .truckstop-reel{ display:block; will-change:transform; }
.truckstop-digit .truckstop-reel span{
  display:block; height:1.16em; line-height:1.16em; text-align:center;
  color:currentColor; text-shadow:0 0 3px currentColor, 0 0 10px currentColor;
  font-variant-numeric:tabular-nums;
}
/* Walzen-Schattierung + Mittellinie wie bei echten Rollen */
.truckstop-digit::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:3px;
  background:linear-gradient(180deg, rgba(0,0,0,.55), transparent 32%, transparent 68%, rgba(0,0,0,.6));
  box-shadow:0 0 0 1px rgba(0,0,0,.45) inset;
}
.truckstop-comma{ font-family:var(--ts-mono); font-weight:700; font-size:clamp(1.7rem,8.4vw,3.4rem); line-height:.9; color:currentColor; align-self:flex-end; padding:0 1px; text-shadow:0 0 8px currentColor; }
.truckstop-euro{ font-family:var(--ts-mono); font-size:1rem; color:currentColor; margin-left:3px; align-self:flex-start; margin-top:4px; }

/* FREI stempelt sich Buchstabe fuer Buchstabe ein (nach den Walzen) */
.truckstop-price-word{ color:var(--ts-white); }
.truckstop-fuel-row-full .truckstop-word span{
  display:inline-block; font-family:var(--ts-display); font-weight:400;
  font-size:clamp(1.9rem,9vw,3rem); letter-spacing:3px; color:var(--ts-white-hot);
  text-shadow:0 0 4px #fff, 0 0 14px var(--ts-blue), 0 0 30px var(--ts-blue-deep);
}
.truckstop-js .truckstop-fuel-row-full .truckstop-word span{ opacity:0; transform:scale(1.6) rotate(-7deg); }
.truckstop-js #truckstop-preistafel.truckstop-in .truckstop-word span{ animation:truckstop-stamp .42s cubic-bezier(.2,1.4,.4,1) forwards; }
.truckstop-js #truckstop-preistafel.truckstop-in .truckstop-word span:nth-child(1){ animation-delay:1.75s; }
.truckstop-js #truckstop-preistafel.truckstop-in .truckstop-word span:nth-child(2){ animation-delay:1.87s; }
.truckstop-js #truckstop-preistafel.truckstop-in .truckstop-word span:nth-child(3){ animation-delay:1.99s; }
.truckstop-js #truckstop-preistafel.truckstop-in .truckstop-word span:nth-child(4){ animation-delay:2.11s; }
@keyframes truckstop-stamp{
  0%{opacity:0; transform:scale(1.6) rotate(-7deg);}
  70%{opacity:1; transform:scale(.94) rotate(1.5deg);}
  100%{opacity:1; transform:scale(1) rotate(0);}
}

.truckstop-totem-strip{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; padding:4px 12px 2px; position:relative; z-index:1; }
.truckstop-totem-strip span{ font-family:var(--ts-mono); font-size:.72rem; letter-spacing:.5px; text-transform:uppercase; color:#2a2114; background:rgba(12,10,7,.08); border:1px solid rgba(12,10,7,.3); padding:5px 10px; border-radius:3px; }
.truckstop-totem-foot{ text-align:center; font-family:var(--ts-cond); font-size:.95rem; letter-spacing:.5px; color:#2a2114; padding:8px 14px 0; position:relative; z-index:1; }

.truckstop-totem-posts{ position:relative; z-index:1; display:flex; justify-content:center; gap:120px; margin-top:-8px; }
.truckstop-totem-posts span{ width:14px; height:48px; background:linear-gradient(90deg,#241c12,#4a3a24 40%,#241c12); border-radius:0 0 3px 3px; box-shadow:0 8px 14px rgba(0,0,0,.5); }

/* =====================================================================
   TRUCK-DURCHFAHRT  (scroll-gekoppelt, eigener Streifen, kein Layout-Shift)
   ===================================================================== */
.truckstop-truck-strip{
  position:relative; z-index:2; width:100%; height:clamp(120px,30vw,230px);
  overflow:hidden; pointer-events:none; margin-top:6px;
}
.truckstop-truck-road{
  position:absolute; left:0; right:0; bottom:0; height:34%;
  background:
    linear-gradient(180deg, transparent 0, rgba(240,166,60,.05) 20%, rgba(10,10,14,.9) 55%, #07070b 100%);
}
.truckstop-truck-road::after{
  content:""; position:absolute; left:0; right:0; bottom:26%; height:3px;
  background:repeating-linear-gradient(90deg, rgba(236,227,204,.5) 0 34px, transparent 34px 70px);
  opacity:.5;
}
.truckstop-rig{ position:absolute; bottom:2px; left:0; width:clamp(300px,72vw,620px); will-change:transform; }
.truckstop-rig svg{ width:100%; height:auto; display:block; overflow:visible; }
/* Ohne JS: Truck parkt sichtbar in der Mitte. Mit JS: startet links draussen. */
.truckstop-root:not(.truckstop-js) .truckstop-rig{ left:50%; transform:translateX(-50%); }
.truckstop-js .truckstop-rig{ transform:translateX(calc(-100% - 80px)); }
/* Fallback ohne GSAP: Truck faehrt einmal durch, sobald der Streifen sichtbar wird */
.truckstop-truck-go .truckstop-rig{ animation:truckstop-drive 8.5s linear .15s forwards; }
@keyframes truckstop-drive{ from{ transform:translateX(calc(-100% - 80px)); } to{ transform:translateX(calc(100vw + 80px)); } }
/* Raeder werden per JS ueber das SVG-transform-Attribut rotiert
   (rotate() um den lokalen Radmittelpunkt) - browserunabhaengig sauber.
   Deshalb hier bewusst KEINE CSS-Rotation auf .truckstop-wheel. */
/* Minimales Wippen der Karosserie */
.truckstop-body{ animation:truckstop-bob 0.46s ease-in-out infinite alternate; }
@keyframes truckstop-bob{ from{ transform:translateY(0); } to{ transform:translateY(-2.4px); } }
/* Staub hinter dem Auflieger */
.truckstop-dust circle{ opacity:0; }
.truckstop-dust-1{ animation:truckstop-puff 1.1s ease-out infinite; }
.truckstop-dust-2{ animation:truckstop-puff 1.4s .3s ease-out infinite; }
.truckstop-dust-3{ animation:truckstop-puff .9s .55s ease-out infinite; }
@keyframes truckstop-puff{
  0%{opacity:0; transform:translate(0,0) scale(.5);}
  25%{opacity:.7;}
  100%{opacity:0; transform:translate(-34px,-14px) scale(1.7);}
}
/* Positionsleuchten gluehen, Fernlicht flackert minimal */
.truckstop-marker{ animation:truckstop-markerpulse 3s ease-in-out infinite; }
@keyframes truckstop-markerpulse{ 0%,100%{opacity:.65} 50%{opacity:1} }
.truckstop-headbeam{ animation:truckstop-beamflicker 4.2s infinite; }
@keyframes truckstop-beamflicker{ 0%,44%,46%,100%{opacity:.8} 45%{opacity:.5} 82%{opacity:.95} }
/* SVG-Schrift auf dem Auflieger */
.truckstop-svg-brand{ font-family:var(--ts-display); font-size:64px; fill:#9c2418; letter-spacing:6px; opacity:.92; }
.truckstop-svg-sub{ font-family:var(--ts-mono); font-size:17px; fill:#5a4c36; letter-spacing:4px; }

/* =====================================================================
   TEXT
   ===================================================================== */
.truckstop-invite{ text-align:center; overflow:hidden; }
.truckstop-invite::before{
  content:""; position:absolute; top:0; bottom:0; left:-45%; width:42%;
  background:linear-gradient(100deg, transparent, rgba(240,166,60,.09), transparent);
  transform:skewX(-12deg); pointer-events:none;
  animation:truckstop-invitesweep 14s ease-in-out infinite;
}
@keyframes truckstop-invitesweep{
  0%,52%{transform:translateX(0) skewX(-12deg); opacity:0;}
  58%{opacity:1;}
  86%,100%{transform:translateX(320%) skewX(-12deg); opacity:0;}
}
.truckstop-invite-text{ max-width:54ch; margin:0 auto; font-family:var(--ts-cond); font-size:clamp(1.15rem,4.8vw,1.4rem); letter-spacing:.3px; color:var(--ts-cream); line-height:1.7; }

/* =====================================================================
   BON
   ===================================================================== */
.truckstop-receipt-sec{ text-align:center; }
.truckstop-receipt-stage{ position:relative; display:flex; justify-content:center; padding:26px 10px 10px; }
.truckstop-receipt-image{ width:min(72%,300px); background:#fdfaf2; padding:6px; border-radius:2px; transform:rotate(-2.5deg); box-shadow:0 26px 50px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.25); transition:transform .3s ease; }
.truckstop-receipt-stage:hover .truckstop-receipt-image{ transform:rotate(-1deg) scale(1.02); }
.truckstop-tape{ position:absolute; z-index:2; top:12px; width:78px; height:26px; background:rgba(224,216,186,.5); border:1px solid rgba(255,255,255,.3); box-shadow:0 2px 6px rgba(0,0,0,.3); transform:rotate(-16deg); }
.truckstop-tape-l{ left:calc(50% - 130px); }
.truckstop-tape-r{ right:calc(50% - 130px); transform:rotate(14deg); }
.truckstop-receipt-cap{ margin:14px auto 0; max-width:40ch; font-family:var(--ts-cond); font-size:1.05rem; letter-spacing:.3px; color:var(--ts-muted); }

/* =====================================================================
   DJ  (Marquee-Rahmen mit warmen Gluehbirnen)
   ===================================================================== */
.truckstop-dj{ text-align:center; }
.truckstop-dj-frame{
  max-width:680px; margin:0 auto; border:1px solid rgba(108,199,230,.28); border-radius:10px; padding:40px 22px 28px;
  background:radial-gradient(120% 120% at 50% 0%,rgba(108,199,230,.1),transparent 60%),linear-gradient(180deg,#0e1216,#080a0c);
  box-shadow:0 22px 50px rgba(0,0,0,.6),0 0 40px rgba(108,199,230,.06) inset; position:relative; overflow:hidden;
}
.truckstop-dj-frame::before{
  content:""; position:absolute; top:10px; left:14px; right:14px; height:10px; pointer-events:none;
  background:radial-gradient(circle 3px at 5px 5px, #ffd98c 0 2px, rgba(255,180,60,.28) 3px, transparent 4.2px);
  background-size:28px 10px; background-repeat:repeat-x;
  animation:truckstop-bulbs 2.8s steps(2) infinite; opacity:.85;
}
@keyframes truckstop-bulbs{ 50%{opacity:.5} }
.truckstop-dj-tag{ display:inline-block; font-family:var(--ts-mono); font-size:.66rem; letter-spacing:3px; text-transform:uppercase; color:var(--ts-blue); border:1px solid rgba(108,199,230,.4); border-radius:4px; padding:6px 13px; margin-bottom:16px; }
.truckstop-dj-title{ margin-bottom:22px; }
.truckstop-dj-title::after{ display:none; }
.truckstop-dj-logo-wrap{ display:flex; justify-content:center; padding:14px; border-radius:10px; background:radial-gradient(60% 80% at 50% 50%,rgba(108,199,230,.1),transparent 70%); margin-bottom:20px; }
.truckstop-dj-logo{ width:min(84%,420px); filter:drop-shadow(0 0 22px rgba(108,199,230,.3)); animation:truckstop-djfloat 6s ease-in-out infinite; }
@keyframes truckstop-djfloat{ 50%{transform:translateY(-6px)} }
.truckstop-dj-text{ max-width:46ch; margin:0 auto; font-family:var(--ts-cond); font-size:1.2rem; letter-spacing:.3px; color:var(--ts-cream); }

/* =====================================================================
   BORDCOMPUTER / TACHO
   ===================================================================== */
.truckstop-dash{ max-width:760px; margin:0 auto; padding:24px 16px 18px; border-radius:14px; background:linear-gradient(180deg,#1a1712,#0e0b08); border:1px solid var(--ts-line); box-shadow:0 22px 50px rgba(0,0,0,.6),0 1px 0 rgba(255,220,160,.05) inset; }
.truckstop-dash-gauges{ display:flex; justify-content:center; gap:26px; flex-wrap:wrap; }
.truckstop-gauge{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.truckstop-gauge-face{ position:relative; width:150px; height:150px; border-radius:50%; background:radial-gradient(circle at 50% 42%,#221a12,#0a0705 72%); border:6px solid #060409; box-shadow:0 0 0 3px #2a2015,0 12px 26px rgba(0,0,0,.6),0 0 24px rgba(224,56,46,.08) inset; }
.truckstop-gauge-ticks{ position:absolute; inset:12px; border-radius:50%; background:repeating-conic-gradient(from 216deg, rgba(236,227,204,.7) 0 1.4deg, transparent 1.4deg 15deg); -webkit-mask:radial-gradient(circle,transparent 54%,#000 56%,#000 64%,transparent 66%); mask:radial-gradient(circle,transparent 54%,#000 56%,#000 64%,transparent 66%); opacity:.85; }
.truckstop-gauge-fuel .truckstop-gauge-ticks{ background:repeating-conic-gradient(from 315deg, rgba(236,227,204,.7) 0 2deg, transparent 2deg 22.5deg); -webkit-mask:radial-gradient(circle,transparent 54%,#000 56%,#000 64%,transparent 66%); mask:radial-gradient(circle,transparent 54%,#000 56%,#000 64%,transparent 66%); }
.truckstop-gauge-cap{ position:absolute; top:26px; left:0; right:0; text-align:center; font-family:var(--ts-mono); font-size:.56rem; letter-spacing:2px; text-transform:uppercase; color:var(--ts-muted); }
/* Nadel: ohne JS direkt auf Zielwert; mit JS Sweep + Nachzittern */
.truckstop-gauge-needle{ position:absolute; left:50%; bottom:50%; width:4px; height:52px; margin-left:-2px; background:linear-gradient(180deg,var(--ts-red),var(--ts-red-deep)); border-radius:2px; transform-origin:50% 100%; box-shadow:0 0 8px rgba(224,56,46,.6); transform:rotate(var(--ts-angle)); }
.truckstop-needle-red{ background:linear-gradient(180deg,var(--ts-blue),var(--ts-blue-deep)); box-shadow:0 0 8px rgba(108,199,230,.6); }
.truckstop-js .truckstop-gauge-needle{ transform:rotate(-38deg); }
.truckstop-js .truckstop-in .truckstop-gauge-needle{
  animation:
    truckstop-needle 1.9s cubic-bezier(.16,.84,.3,1) forwards,
    truckstop-needle-tremor 5s 2.1s ease-in-out infinite;
}
@keyframes truckstop-needle{ 0%{transform:rotate(-38deg)} 55%{transform:rotate(calc(var(--ts-angle) + 16deg))} 74%{transform:rotate(calc(var(--ts-angle) - 7deg))} 88%{transform:rotate(calc(var(--ts-angle) + 2.5deg))} 100%{transform:rotate(var(--ts-angle))} }
@keyframes truckstop-needle-tremor{
  0%,100%{transform:rotate(var(--ts-angle));}
  12%{transform:rotate(calc(var(--ts-angle) + .9deg));}
  24%{transform:rotate(calc(var(--ts-angle) - .6deg));}
  36%{transform:rotate(var(--ts-angle));}
  61%{transform:rotate(calc(var(--ts-angle) + .7deg));}
  74%{transform:rotate(var(--ts-angle));}
}
.truckstop-gauge-hub{ position:absolute; left:50%; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; background:radial-gradient(circle,#e9d6a6,#5a4526); box-shadow:0 0 0 2px #0a0705,0 0 8px rgba(0,0,0,.6); }
.truckstop-gauge-read{ position:absolute; left:0; right:0; bottom:30px; text-align:center; font-family:var(--ts-mono); font-weight:700; font-size:1.05rem; letter-spacing:1px; color:var(--ts-white); text-shadow:0 0 8px rgba(236,227,204,.4); }
.truckstop-read-sm{ font-size:.9rem; }
.truckstop-fuel-e,.truckstop-fuel-f{ position:absolute; bottom:34px; font-family:var(--ts-mono); font-size:.8rem; color:var(--ts-muted); }
.truckstop-fuel-e{ left:30px; } .truckstop-fuel-f{ right:30px; color:var(--ts-blue); }
.truckstop-gauge-label{ font-family:var(--ts-mono); font-size:.62rem; letter-spacing:2px; text-transform:uppercase; color:var(--ts-cream); }

.truckstop-dash-info{ margin-top:22px; }
.truckstop-odometer{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:18px; }
.truckstop-odo-label{ font-family:var(--ts-mono); font-size:.62rem; letter-spacing:2px; text-transform:uppercase; color:var(--ts-muted); }
.truckstop-odo-digits{ display:inline-flex; align-items:flex-end; gap:3px; }
.truckstop-odo-digits .truckstop-digit{
  font-size:clamp(1.3rem,6vw,1.9rem); width:.92em; height:1.28em;
  background:linear-gradient(180deg,#1a140c,#0a0705); border-radius:3px;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 3px 6px rgba(0,0,0,.5);
  color:var(--ts-white);
}
.truckstop-odo-digits .truckstop-digit .truckstop-reel span{ height:1.28em; line-height:1.28em; text-shadow:0 0 6px rgba(236,227,204,.35); }
.truckstop-odo-dot{ font-family:var(--ts-mono); font-weight:700; font-size:clamp(1.3rem,6vw,1.9rem); line-height:1.28; color:var(--ts-red); padding:0 1px; text-shadow:0 0 8px rgba(224,56,46,.5); }

.truckstop-lamps{ display:grid; grid-template-columns:1fr; gap:8px; max-width:520px; margin:0 auto; }
.truckstop-lamp{ display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:6px; background:rgba(213,198,162,.03); border:1px solid var(--ts-line); }
.truckstop-lamp-led{ width:12px; height:12px; border-radius:50%; flex:0 0 auto; }
.truckstop-led-red{ background:var(--ts-red); box-shadow:0 0 9px var(--ts-red); animation:truckstop-blink 2.4s steps(2) infinite; }
.truckstop-led-blue{ background:var(--ts-blue); box-shadow:0 0 9px var(--ts-blue); }
.truckstop-led-white{ background:var(--ts-white-hot); box-shadow:0 0 9px var(--ts-white-hot); }
.truckstop-lamp-k{ font-family:var(--ts-mono); font-size:.62rem; letter-spacing:2px; text-transform:uppercase; color:var(--ts-muted); min-width:64px; }
.truckstop-lamp-v{ font-family:var(--ts-cond); font-size:1.05rem; letter-spacing:.3px; color:var(--ts-white); }

/* =====================================================================
   RASTHOF-SERVICES  (verwitterte Autobahn-Schilder, fallen schraeg rein)
   ===================================================================== */
.truckstop-services-sub{ text-align:center; max-width:46ch; margin:0 auto 26px; font-family:var(--ts-cond); font-size:1.15rem; letter-spacing:.3px; color:var(--ts-cream); }
.truckstop-services-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:720px; margin:0 auto; }
.truckstop-service-sign{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
  padding:22px 14px 18px; border-radius:8px; color:#fff;
  background:linear-gradient(180deg,#10517f,#0b3a5c);
  border:3px solid #e4dcc4; box-shadow:0 12px 26px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.4);
  transition:transform .18s ease, box-shadow .18s ease;
}
.truckstop-service-sign:nth-child(1){ transform:rotate(-.9deg); }
.truckstop-service-sign:nth-child(2){ transform:rotate(.7deg); }
.truckstop-service-sign:nth-child(3){ transform:rotate(.5deg); }
.truckstop-service-sign:nth-child(4){ transform:rotate(-.6deg); }
.truckstop-service-sign:hover,.truckstop-service-sign:active{ transform:translateY(-4px); box-shadow:0 18px 36px rgba(0,0,0,.6); }
.truckstop-service-icon{ width:48px; height:48px; background-repeat:no-repeat; background-position:center; background-size:contain; }
.truckstop-icon-fuel{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='10' height='18' rx='1'/><line x1='3' y1='9' x2='13' y2='9'/><path d='M13 7h3l2 2v7a2 2 0 0 0 3 0V9l-3-3'/></svg>"); }
.truckstop-icon-bar{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16l-8 8z'/><line x1='12' y1='12' x2='12' y2='20'/><line x1='8' y1='20' x2='16' y2='20'/></svg>"); }
.truckstop-icon-music{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='18' r='2.5'/><circle cx='16' cy='16' r='2.5'/><line x1='8.5' y1='18' x2='8.5' y2='6'/><line x1='18.5' y1='16' x2='18.5' y2='4'/><path d='M8.5 6l10-2'/></svg>"); }
.truckstop-icon-rest{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3v6a2 2 0 0 0 4 0V3'/><line x1='8' y1='9' x2='8' y2='21'/><path d='M16 3c-1.4 0-2 2-2 5s.6 4 2 4v9'/></svg>"); }
.truckstop-service-h{ font-family:var(--ts-display); font-weight:400; font-size:1.3rem; letter-spacing:1.5px; text-transform:uppercase; text-shadow:1px 1px 0 rgba(0,0,0,.4); }
.truckstop-service-p{ font-family:var(--ts-cond); font-size:1rem; letter-spacing:.3px; color:#d9e9f2; }
/* Gestaffeltes, leicht schraeges Reinfallen der vier Schilder */
.truckstop-js #truckstop-services .truckstop-service-sign{ opacity:0; transform:translateY(30px) rotate(-3deg); transition:opacity .6s ease, transform .6s cubic-bezier(.18,1.25,.4,1); }
.truckstop-js #truckstop-services .truckstop-service-sign:nth-child(even){ transform:translateY(30px) rotate(3deg); }
.truckstop-js #truckstop-services.truckstop-in .truckstop-service-sign{ opacity:1; }
.truckstop-js #truckstop-services.truckstop-in .truckstop-service-sign:nth-child(1){ transform:rotate(-.9deg); transition-delay:.05s; }
.truckstop-js #truckstop-services.truckstop-in .truckstop-service-sign:nth-child(2){ transform:rotate(.7deg); transition-delay:.16s; }
.truckstop-js #truckstop-services.truckstop-in .truckstop-service-sign:nth-child(3){ transform:rotate(.5deg); transition-delay:.27s; }
.truckstop-js #truckstop-services.truckstop-in .truckstop-service-sign:nth-child(4){ transform:rotate(-.6deg); transition-delay:.38s; }

/* =====================================================================
   VERANSTALTER
   ===================================================================== */
.truckstop-host{ text-align:center; padding-top:30px; padding-bottom:30px; }
.truckstop-host-inner{ position:relative; display:inline-flex; flex-direction:column; align-items:center; gap:12px; }
.truckstop-emblem-glow{
  position:absolute; top:-40px; left:50%; width:240px; height:240px; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(108,199,230,.16), rgba(224,56,46,.05) 50%, transparent 70%);
  pointer-events:none; animation:truckstop-glowbreath 10s ease-in-out infinite;
}
.truckstop-zirkel-emblem{ position:relative; width:130px; filter:brightness(0) invert(1) drop-shadow(0 0 16px rgba(108,199,230,.5)); animation:truckstop-emblembreath 10s ease-in-out infinite; }
@keyframes truckstop-emblembreath{ 0%,100%{opacity:.75} 18%{opacity:1} 30%{opacity:.85} 55%{opacity:1} 80%{opacity:.8} }
.truckstop-host-line{ font-family:var(--ts-mono); font-size:.72rem; letter-spacing:3px; text-transform:uppercase; color:var(--ts-muted); }

/* =====================================================================
   ABSCHLUSS
   ===================================================================== */
.truckstop-outro{ text-align:center; padding-bottom:80px; }
.truckstop-outro-mono{ font-family:var(--ts-mono); font-size:.82rem; letter-spacing:1px; color:var(--ts-muted); }
.truckstop-outro-big{ font-family:var(--ts-display); font-weight:400; font-size:clamp(2.2rem,11vw,4.8rem); text-transform:uppercase; letter-spacing:2px; line-height:.94; margin:10px 0 14px; }
.truckstop-outro-small{ font-family:var(--ts-cond); font-size:1.15rem; letter-spacing:.3px; color:var(--ts-cream); margin:0 0 26px; }

/* =====================================================================
   SCROLL-REVEAL  (Schilder fallen leicht schraeg rein und rasten ein)
   Ohne JS ist alles sichtbar; erst .truckstop-js versteckt fuer die Animation.
   ===================================================================== */
.truckstop-reveal{ transition:opacity .75s ease, transform .75s cubic-bezier(.18,1.22,.35,1); }
.truckstop-js .truckstop-reveal{ opacity:0; transform:translateY(30px); }
.truckstop-js .truckstop-reveal.truckstop-tilt-l{ transform:translateY(34px) rotate(-2.4deg); }
.truckstop-js .truckstop-reveal.truckstop-tilt-r{ transform:translateY(34px) rotate(2.2deg); }
.truckstop-js .truckstop-reveal.truckstop-in{ opacity:1; transform:none; }

/* =====================================================================
   DESKTOP / TABLET
   ===================================================================== */
@media (min-width:680px){
  .truckstop-cd-sep{ display:block; }
  .truckstop-countdown{ gap:14px; }
  .truckstop-cd-unit{ padding:22px 10px 16px; }
  .truckstop-lamps{ grid-template-columns:1fr 1fr; }
  .truckstop-section{ padding:84px 28px; }
  .truckstop-gauge-face{ width:172px; height:172px; }
  .truckstop-gauge-needle{ height:60px; }
  .truckstop-truck-strip{ height:clamp(170px,20vw,240px); }
  .truckstop-rig{ width:clamp(460px,52vw,640px); }
}
@media (min-width:960px){
  .truckstop-services-grid{ grid-template-columns:repeat(4,1fr); }
  .truckstop-neon-sign{ bottom:32px; right:30px; font-size:.78rem; }
  .truckstop-dash-gauges{ gap:48px; }
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .truckstop-root *,.truckstop-root *::before,.truckstop-root *::after{ animation:none !important; transition:none !important; }
  .truckstop-root .truckstop-reveal{ opacity:1 !important; transform:none !important; }
  .truckstop-root .truckstop-gauge-needle{ transform:rotate(var(--ts-angle)) !important; }
  .truckstop-root .truckstop-service-sign,
  .truckstop-root .truckstop-fuel-row-full .truckstop-word span{ opacity:1 !important; transform:none !important; }
  .truckstop-root .truckstop-rig{ left:50% !important; transform:translateX(-50%) !important; }
  .truckstop-beam,.truckstop-highway,.truckstop-grain,.truckstop-particles,.truckstop-invite::before{ display:none; }
}