/* turbolader24.ch Startseiten-Hero "Revidiert. Nicht nachgebaut." (Stand 02.10.2026)
   Alles unter .t24h gekapselt: nichts laeuft ins Theme, das Theme ueberschreibt nichts.
   Fahrzeugwaehler = echter Plugin-Shortcode [redparts_sputnik_vehicle_select], hier nur gestaltet. */

@font-face{
  font-family:"T24H Oswald";
  font-style:normal; font-weight:500 700; font-display:swap;
  src:url("t24h-oswald.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

.t24h{
  --s1:8px; --s2:13px; --s3:21px; --s4:34px; --s5:55px; --s6:89px;
  --schwarz:#0E0F10; --anthrazit:#17191B; --anthrazit-2:#212427; --anthrazit-3:#2E3236;
  --rot:#f54949; --rot-tief:#C9302F; --weiss:#ffffff;
  --ink:#F4F4F4; --ink-2:#AFB3B7; --ink-3:#8B9197; --haar:rgba(255,255,255,.12);
  --fokus:#ff8a8a;
  --zeile:"T24H Oswald",Oswald,"Roboto Condensed","Arial Narrow",sans-serif;
  --text:Roboto,"Segoe UI",system-ui,sans-serif;
  position:relative; display:block;
  font-family:var(--text); font-size:16px; line-height:1.6; color:var(--ink);
  -webkit-font-smoothing:antialiased; text-align:left;
}
.t24h,.t24h *,.t24h *::before,.t24h *::after{box-sizing:border-box}
.t24h img{display:block; max-width:100%; height:auto; border:0}
.t24h p{margin:0}
.t24h a{text-decoration:none}

/* ================= BUEHNE ================= */
.t24h .halle{
  position:relative; isolation:isolate; overflow:hidden;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 110% 78% at 64% 24%, var(--anthrazit-2) 0%, rgba(23,25,27,.6) 44%, transparent 72%),
    linear-gradient(176deg, #131416 0%, var(--anthrazit) 44%, var(--schwarz) 100%);
  padding-inline:var(--s3);
  padding-block:var(--s4) 0;
  border-bottom:3px solid var(--rot);
}
@media(min-width:900px){ .t24h .halle{padding-inline:var(--s5); padding-top:var(--s6)} }
.t24h .buehne{position:relative}
.t24h .blech{
  position:absolute; inset:auto 0 0 0; height:44%; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    repeating-linear-gradient(56deg, rgba(255,255,255,.045) 0 2px, transparent 2px 13px),
    repeating-linear-gradient(-56deg, rgba(255,255,255,.045) 0 2px, transparent 2px 13px);
  -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 100%); mask-image:linear-gradient(to top,#000 0%,transparent 100%);
}
.t24h .schein{
  position:absolute; inset:auto -12% -26% -12%; height:62%; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 50% 100% at 68% 100%, rgba(245,73,73,.16) 0%, rgba(201,48,47,.07) 40%, transparent 70%);
}
.t24h .funken{position:absolute; inset:0; z-index:1; pointer-events:none; width:100%; height:100%}
.t24h .geist{
  position:absolute; z-index:0; pointer-events:none;
  inset:4% -8% auto auto; width:min(720px,58vw); aspect-ratio:4/3; opacity:.14;
  -webkit-mask-image:radial-gradient(ellipse 54% 58% at 46% 48%,#000 28%,transparent 72%);
  mask-image:radial-gradient(ellipse 54% 58% at 46% 48%,#000 28%,transparent 72%);
}
.t24h .geist img{width:100%; height:100%; object-fit:cover; object-position:42% 44%; filter:brightness(.5) contrast(1.15)}

/* ================= WERKSTUECK ================= */
#t24h .stueck{position:relative; z-index:2; margin:0 calc(var(--s3) * -1) var(--s3); aspect-ratio:16/10}
@media(min-width:1000px){
  /* Lader fuellen die rechte Haelfte und beginnen auf Hoehe der Schlagzeile (Masse in Bildpixeln des Originals 1400 x 929):
     Kern der Lader x 400 bis 1060 (28,6 % bis 75,7 %), Oberkante y 96 (6,86 %), Anker des rechten Etiketts x 888.
     Breite: 1,7 mal der bisherigen 58 %, hoechstens so gross, dass Kern links neben der Textspalte (--sp + 20 px)
     beginnt und das rechte Etikett (rund 100 px) noch in die Buehne passt, und nie ueber die Originalgroesse. */
  #t24h .stueck{
    --sp:560px;
    --fw:min(98.6%, calc((100% - var(--sp) - 120px) * 2.869), 1400px);
    position:absolute; inset:0 auto auto 0; transform:none; height:auto; aspect-ratio:1400/929;
    width:var(--fw);
    left:calc(var(--sp) + 20px + (100% - var(--sp) - 120px) / 2 - 0.46 * var(--fw));
    margin:calc(42px - 0.0686 * var(--fw)) 0 0 0;
  }
  #t24h .stueck__bu{left:51.3%; right:auto; bottom:auto; top:calc(51.5% + 96px); translate:-50% 0; white-space:normal; width:max-content; max-width:34ch}
}
@media(min-width:1000px) and (max-width:1279px){ .t24h .austausch span{display:none} }
@media(min-width:1280px){
  #t24h .stueck{--sp:620px}
  #t24h .stueck__bu{white-space:nowrap; max-width:none}
}
.t24h .stueck__rahmen{
  position:absolute; inset:0; overflow:hidden; isolation:isolate;
  -webkit-mask-image:radial-gradient(ellipse 58% 64% at 48% 48%,#000 26%,rgba(0,0,0,.62) 52%,rgba(0,0,0,.22) 74%,transparent 92%);
  mask-image:radial-gradient(ellipse 58% 64% at 48% 48%,#000 26%,rgba(0,0,0,.62) 52%,rgba(0,0,0,.22) 74%,transparent 92%);
}
.t24h .stueck__rahmen picture{display:block; width:100%; height:100%}
/* Helligkeit angehoben, Saettigung leicht gesenkt: Metall glaenzt, kein Blaustich. Die Sprites im Skript lesen diesen Filter. */
.t24h .stueck img{width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 46%; filter:contrast(1.24) brightness(1.02) saturate(.9)}
.t24h .stueck__tiefe{position:absolute; inset:0; mix-blend-mode:multiply; pointer-events:none; background:radial-gradient(ellipse 62% 70% at 50% 48%,#fff 26%,#55595e 62%,#1b1d20 86%)}
.t24h .stueck__licht{
  position:absolute; inset:0; mix-blend-mode:screen; pointer-events:none;
  background:
    radial-gradient(ellipse 34% 26% at 50% 24%, rgba(255,170,90,.26) 0%, rgba(230,150,70,.1) 46%, transparent 74%),
    radial-gradient(ellipse 52% 42% at 50% 62%, rgba(255,255,255,.06) 0%, transparent 70%);
}
.t24h .stueck__kante{position:absolute; inset:0; mix-blend-mode:soft-light; pointer-events:none; background:linear-gradient(128deg,rgba(255,255,255,.5) 0%,transparent 44%)}
.t24h .stueck__vig{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to right, var(--anthrazit) 0%, rgba(23,25,27,.5) 12%, transparent 24%),
    linear-gradient(to top, var(--schwarz) 0%, rgba(14,15,16,.5) 14%, transparent 40%),
    linear-gradient(to bottom, rgba(19,20,22,.6) 0%, transparent 18%);
}
@media(max-width:999px){ .t24h .stueck__vig{background:linear-gradient(to bottom,rgba(19,20,22,.55) 0%,transparent 30%,rgba(23,25,27,.9) 100%)} }
.t24h .stueck__bu{
  position:absolute; z-index:3; left:var(--s3); right:var(--s3); bottom:var(--s3);
  margin:0; padding-left:var(--s3); max-width:46ch; border-left:2px solid var(--rot);
  font-size:13px; line-height:1.55; color:var(--ink-3);
}
.t24h .stueck__bu b{color:var(--ink); font-weight:500}
@media(max-width:439px){ .t24h .stueck__bu-vor{display:none} }

/* ================= INHALT ================= */
.t24h .innen{position:relative; z-index:3; max-width:1340px; margin:0 auto}
.t24h .spalte{max-width:600px}
@media(min-width:1000px){ .t24h .spalte{max-width:560px; min-height:560px; padding-bottom:var(--s5)} }
@media(min-width:1280px){ .t24h .spalte{max-width:620px} }
.t24h .braue{
  display:flex; align-items:center; gap:var(--s2); margin:0 0 var(--s3);
  font-size:12.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2);
}
.t24h .braue::before{content:""; width:var(--s4); height:3px; background:var(--rot); flex:none}
@media(max-width:439px){ .t24h .braue{font-size:11px; letter-spacing:.1em; align-items:flex-start} .t24h .braue::before{width:var(--s3); margin-top:.6em} }
.t24h h1.t24h-titel{
  /* premium-design-v4.css setzt h1 { font-family: ... !important }: hier ebenfalls !important, sonst Inter */
  font-family:var(--zeile)!important; font-weight:700; font-style:normal;
  font-size:clamp(2.9rem,8.4vw,5.1rem); line-height:.92; letter-spacing:.005em;
  text-transform:uppercase; text-wrap:balance; margin:0 0 var(--s3); padding:0;
  color:var(--weiss); text-shadow:0 2px 36px rgba(0,0,0,.7); border:0; background:none;
}
.t24h h1.t24h-titel .z1{display:block}
.t24h h1.t24h-titel .rot{display:block; color:var(--rot)}
.t24h h1.t24h-titel .rot::after{content:""; display:block; width:2.2em; height:4px; margin-top:.12em; background:var(--rot); transform-origin:left center}
.t24h .lede{margin:0 0 var(--s4); max-width:48ch; font-size:1.06rem; color:var(--ink-2)}
.t24h .lede b{color:var(--ink); font-weight:500}

/* ================= STAHLKONSOLE ================= */
.t24h .konsole-halter{position:relative}
.t24h .konsole-halter::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:6%; right:6%; bottom:-14px; height:30px;
  background:radial-gradient(ellipse 50% 100% at 50% 0%,rgba(0,0,0,.75) 0%,transparent 72%); filter:blur(6px);
}
.t24h .konsole{
  position:relative; z-index:1; padding:var(--s3);
  border:1px solid rgba(255,255,255,.13); border-radius:2px;
  background:
    linear-gradient(104deg,rgba(255,255,255,.06) 0%,transparent 34%,transparent 66%,rgba(255,255,255,.035) 100%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,#2A2D31 0%,#1A1C1F 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.6), 0 var(--s3) var(--s5) rgba(0,0,0,.6);
}
@media(min-width:600px){ .t24h .konsole{padding:var(--s4)} }
.t24h .konsole__kopf{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:var(--s1) var(--s2); margin:0 0 var(--s3);
  font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
.t24h .konsole__kopf b{color:var(--ink); font-weight:700}
.t24h .konsole__status{color:var(--ink-2); letter-spacing:.1em}
.t24h .konsole__status.ok{color:#ffffff}
.t24h .konsole__status.ok::before{content:""; display:inline-block; width:7px; height:7px; margin-right:7px; vertical-align:1px; border-radius:50%; background:var(--rot); box-shadow:0 0 0 3px rgba(245,73,73,.25)}

/* Rahmenlinie oben: zeigt den Fortschritt der Fahrzeugwahl (0 bis 4 Felder) */
.t24h .k-linie{
  position:absolute; z-index:2; top:0; left:0; right:0; height:3px; pointer-events:none;
  background:var(--rot); transform-origin:left center; transform:scaleX(var(--fortschritt,.12));
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.t24h .schraube{
  position:absolute; z-index:2; width:9px; height:9px; border-radius:50%; pointer-events:none;
  background:linear-gradient(90deg,transparent 38%,#0d0e10 38% 62%,transparent 62%), radial-gradient(circle,#5a5f66 0 46%,#33373c 58%,#111214 64%);
  box-shadow:0 1px 0 rgba(255,255,255,.08), inset 0 -1px 1px rgba(0,0,0,.6);
  transform:rotate(var(--dreh,0deg)); transition:transform .5s cubic-bezier(.3,1.4,.5,1);
}
.t24h .schraube.s1{top:9px; left:9px; --dreh:14deg}
.t24h .schraube.s2{top:9px; right:9px; --dreh:-32deg}
.t24h .schraube.s3{bottom:9px; left:9px; --dreh:58deg}
.t24h .schraube.s4{bottom:9px; right:9px; --dreh:6deg}
.t24h .druck{
  position:absolute; right:0; top:-21px; z-index:2; display:flex; align-items:center; gap:8px;
  font-size:10px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
.t24h .druck__skala{display:block; position:relative; width:89px; height:3px; background:rgba(255,255,255,.12); overflow:hidden}
.t24h .druck__fuell{position:absolute; inset:0; background:var(--rot); transform-origin:left center; transform:scaleX(.2); will-change:transform}

/* ---------- Fahrzeugwaehler: echtes Plugin-Markup ----------
   .th-vehicle-select > __body > __item[data-label] > select.__item-control + .__item-loader
   Plugin-Zustaende: __item--disabled, __item--loading. Eigene: t24h-gewaehlt, t24h-fehler. */
.t24h .t24h-finder{display:block; margin:0; padding:0; background:none; border:0; width:auto; max-width:none}
.t24h .t24h-ws{--th-vehicle-select--gutter:0px; --th-vehicle-select--columns:1; flex-grow:0; display:block; width:100%}
.t24h .t24h-ws .th-vehicle-select__body{display:grid; grid-template-columns:1fr; gap:var(--s2); margin:0}
@media(min-width:520px){ .t24h .t24h-ws .th-vehicle-select__body{grid-template-columns:1fr 1fr} }
.t24h .t24h-ws .th-vehicle-select__item{
  position:relative; display:flex; flex-direction:column; gap:6px; min-width:0;
  margin:0; flex:none; border:0; padding:0; background:none;
}
.t24h .t24h-ws .th-vehicle-select__item::before{
  content:attr(data-label); position:static; display:block;
  font-size:11.5px; font-weight:500; line-height:1.3; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
  transition:color .2s ease;
}
.t24h .t24h-ws .th-vehicle-select__item:focus-within::before{color:var(--ink)}
.t24h .t24h-ws .th-vehicle-select__item--loading::before{content:attr(data-label) "  ·  lädt"; color:var(--rot)}
.t24h .t24h-ws .th-vehicle-select__item.t24h-fehler::before{content:attr(data-label) "  ·  nicht geladen"; color:var(--rot)}
.t24h .t24h-ws .th-vehicle-select__item--disabled::before{color:rgba(139,145,151,.55)}

.t24h .t24h-ws select.th-vehicle-select__item-control,
.t24h .t24h-nummer input.t24h-eingabe{
  display:block; width:100%; height:auto; min-height:50px; margin:0;
  font-family:var(--text)!important; font-size:.97rem; font-weight:500; line-height:1.3; color:var(--ink);
  background-color:#111214; border:1px solid #3A3E43; border-radius:2px;
  padding:12px var(--s2); box-shadow:inset 0 2px 5px rgba(0,0,0,.55);
  -webkit-appearance:none; -moz-appearance:none; appearance:none; outline:none;
  transition:border-color .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.t24h .t24h-ws select.th-vehicle-select__item-control{
  cursor:pointer; padding-right:var(--s4);
  background-image:linear-gradient(45deg,transparent 50%,var(--rot) 50%), linear-gradient(135deg,var(--rot) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
  text-overflow:ellipsis; white-space:nowrap;
}
.t24h .t24h-ws select.th-vehicle-select__item-control:hover:not(:disabled){border-color:#5A5F66; background-color:#15171A}
.t24h .t24h-ws select.th-vehicle-select__item-control option{background:#16181A; color:#F4F4F4; font-weight:400}
/* gesperrt: noch nicht waehlbar */
.t24h .t24h-ws select.th-vehicle-select__item-control:disabled{
  cursor:not-allowed; color:rgba(139,145,151,.7); border-style:dashed; border-color:#34383D;
  background-color:rgba(17,18,20,.55); box-shadow:none; opacity:1;
  background-image:linear-gradient(45deg,transparent 50%,#4A4F55 50%), linear-gradient(135deg,#4A4F55 50%,transparent 50%);
}
/* gewaehlt: Wert hell, rote Kante links */
.t24h .t24h-ws .t24h-gewaehlt select.th-vehicle-select__item-control{color:#ffffff; border-color:#4B5056; box-shadow:inset 3px 0 0 var(--rot), inset 0 2px 5px rgba(0,0,0,.55)}
/* laedt: Wert gedaempft, Ladeband unten */
.t24h .t24h-ws .th-vehicle-select__item--loading select.th-vehicle-select__item-control{color:var(--ink-3); border-color:rgba(245,73,73,.45)}
/* Fehler: Liste kam nicht */
.t24h .t24h-ws .t24h-fehler select.th-vehicle-select__item-control{border-color:var(--rot); border-style:solid}
/* Fokus */
.t24h .t24h-ws select.th-vehicle-select__item-control:focus-visible,
.t24h .t24h-nummer input.t24h-eingabe:focus-visible{border-color:var(--rot); outline:2px solid var(--fokus); outline-offset:2px}
.t24h .t24h-ws select.th-vehicle-select__item-control:focus{border-color:var(--rot)}

/* Ladeanzeige des Plugins, als duenner Lauf in Markenrot unter dem Feld */
.t24h .t24h-ws .th-vehicle-select__item-loader{
  position:absolute; left:1px; right:1px; bottom:1px; top:auto; width:auto; height:3px;
  overflow:hidden; opacity:0; pointer-events:none; background:rgba(245,73,73,.16); transition:opacity .2s ease;
}
.t24h .t24h-ws .th-vehicle-select__item-loader::before{
  content:""; position:absolute; top:0; bottom:0; left:-40%; width:40%; height:auto;
  background:linear-gradient(90deg,transparent,var(--rot) 40%,#ff9a8a 50%,var(--rot) 60%,transparent);
  opacity:1; border-radius:0; animation:t24h-laden .95s cubic-bezier(.4,0,.2,1) infinite;
}
.t24h .t24h-ws .th-vehicle-select__item-loader::after{display:none; content:none}
.t24h .t24h-ws .th-vehicle-select__item--loading .th-vehicle-select__item-loader{opacity:1}
@keyframes t24h-laden{from{transform:translateX(0)} to{transform:translateX(350%)}}

/* Falls Select2 doch einmal greift: unauffaellig, bis das Skript es abloest */
.t24h .t24h-ws .select2-container{width:100% !important}

/* ---------- Suchknopf und Hinweise ---------- */
.t24h .t24h-aktion{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); margin-top:var(--s3)}
.t24h .t24h-finder .th-block-finder__button.t24h-knopf,
.t24h .t24h-nummer .t24h-knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--zeile); font-weight:700; font-size:1.17rem; line-height:1;
  letter-spacing:.1em; text-transform:uppercase;
  margin:0; width:auto; min-width:0; min-height:50px; padding:0 var(--s5);
  border-radius:2px; cursor:pointer; flex:1 1 170px;
  transition:background-color .2s ease, color .2s ease, box-shadow .25s ease, transform .18s ease, border-color .2s ease, filter .18s ease;
}
/* Fahrzeug noch nicht vollstaendig: Knopf da, aber zurueckhaltend */
.t24h .t24h-finder .th-block-finder__button.t24h-knopf{
  color:#E4E4E4; background:#24272B; border:1px solid rgba(245,73,73,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.t24h .t24h-finder .th-block-finder__button.t24h-knopf:hover{border-color:var(--rot); color:#ffffff; background:#2A2D31}
/* Fahrzeug vollstaendig: Knopf wird zum Hauptelement */
.t24h .t24h-finder.bereit .th-block-finder__button.t24h-knopf{
  color:#ffffff; background:var(--rot); border-color:var(--rot);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 var(--rot-tief), 0 var(--s1) var(--s3) rgba(245,73,73,.34);
  animation:t24h-bereit .9s cubic-bezier(.2,.7,.2,1) 1;
}
.t24h .t24h-finder.bereit .th-block-finder__button.t24h-knopf:hover{filter:brightness(1.07); transform:translateY(-1px)}
.t24h .t24h-finder .th-block-finder__button.t24h-knopf:active{transform:translateY(0)}
@keyframes t24h-bereit{0%{box-shadow:0 0 0 0 rgba(245,73,73,.6)} 100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 var(--rot-tief), 0 0 0 14px rgba(245,73,73,0)}}
.t24h .t24h-knopf:focus-visible{outline:2px solid #ffffff; outline-offset:3px}
.t24h .t24h-knopf svg{display:block; flex:none}
.t24h .t24h-hinweis{flex:1 1 220px; min-height:1.5em; margin:0; font-size:.88rem; line-height:1.45; color:var(--ink-3)}
.t24h .t24h-hinweis.warn{color:#ffb3b3}
.t24h .t24h-hinweis a{color:#ffffff; border-bottom:1px solid var(--rot)}

/* ---------- Zweiter Weg: Teilenummer ---------- */
.t24h .t24h-trenner{
  display:flex; align-items:center; gap:var(--s2); margin:var(--s3) 0 var(--s2);
  font-size:11.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
.t24h .t24h-trenner::before,.t24h .t24h-trenner::after{content:""; height:1px; flex:1; background:rgba(255,255,255,.09)}
.t24h .t24h-nummer{display:flex; flex-wrap:wrap; gap:var(--s2); align-items:flex-end; margin:0}
.t24h .t24h-nummer .f{display:flex; flex-direction:column; gap:6px; flex:1 1 240px; min-width:0}
.t24h .t24h-nummer label{font-size:11.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin:0}
.t24h .t24h-nummer input.t24h-eingabe{font-family:var(--text); letter-spacing:.02em}
/* premium-design-v4.css setzt die Schrift der Auswahllisten mit !important und hoeherer Spezifitaet: Kennung noetig */
#t24h .t24h-ws select.th-vehicle-select__item-control{font-family:var(--text)!important}
/* premium-design-v4.css setzt fuer input[type=text|search] border und border-radius mit !important */
.t24h .t24h-nummer input.t24h-eingabe{border:1px solid #3A3E43!important; border-radius:2px!important}
.t24h .t24h-nummer input.t24h-eingabe:focus-visible{border-color:var(--rot)!important}
.t24h .t24h-nummer input.t24h-eingabe::placeholder{color:#6E747A; opacity:1}
.t24h .t24h-nummer .t24h-knopf{
  flex:0 1 auto; padding:0 var(--s4); font-size:1rem;
  color:#ffffff; background:transparent; border:1px solid rgba(255,255,255,.28);
}
.t24h .t24h-nummer .t24h-knopf:hover{border-color:var(--rot); background:rgba(245,73,73,.1)}

/* ================= AUSTAUSCHPRINZIP ================= */
.t24h .tausch{display:grid; gap:var(--s2); grid-template-columns:1fr; margin:var(--s5) 0 0; padding:0; list-style:none}
@media(min-width:620px){ .t24h .tausch{grid-template-columns:repeat(3,1fr); gap:var(--s3)} }
.t24h .tausch li{display:grid; grid-template-columns:auto 1fr; gap:var(--s2); align-items:start; margin:0; padding:var(--s2) 0 0; border-top:1px solid rgba(255,255,255,.14); list-style:none}
.t24h .tausch li::before,.t24h .tausch li::marker{content:none}
.t24h .tausch .nr{font-family:var(--zeile); font-weight:600; font-size:15px; color:var(--rot); line-height:1.3}
.t24h .tausch p{margin:0; font-size:.92rem; color:var(--ink-2); line-height:1.45}
.t24h .tausch b{display:block; color:var(--ink); font-weight:500; font-size:.97rem}

/* ================= KENNZAHLEN: unterer Rand der Buehne ================= */
.t24h .sockel{position:relative; z-index:3; max-width:1340px; margin:var(--s5) auto 0}
@media(min-width:1000px){ .t24h .sockel{margin-top:var(--s4)} }
.t24h .kennzahlen{
  position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; padding:0;
  border-top:1px solid var(--haar);
}
.t24h .kennzahlen::before{content:""; position:absolute; left:0; top:-1px; width:var(--s6); height:3px; background:var(--rot)}
.t24h .kennzahlen > div{display:flex; flex-direction:column; justify-content:flex-start; padding:var(--s3) var(--s3) var(--s3); border-left:1px solid var(--haar); margin:0}
.t24h .kennzahlen > div:first-child{border-left:0; padding-left:0}
.t24h .kennzahlen dd{
  order:1; margin:0; font-family:var(--zeile); font-weight:700;
  font-size:clamp(2rem,3.6vw,3rem); line-height:1; letter-spacing:.01em; color:#ffffff;
  font-variant-numeric:tabular-nums lining-nums; white-space:nowrap;
}
.t24h .kennzahlen .plus{color:var(--rot); margin-left:.04em}
.t24h .kennzahlen .einheit{font-size:.5em; font-weight:600; letter-spacing:.06em; margin-left:.18em; color:var(--ink-2); text-transform:uppercase}
.t24h .kennzahlen dt{order:2; margin:var(--s1) 0 0; font-size:12px; font-weight:500; line-height:1.4; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
@media(max-width:619px){
  .t24h .kennzahlen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t24h .kennzahlen > div{padding:var(--s3) 0 var(--s3) var(--s3)}
  .t24h .kennzahlen > div:nth-child(odd){border-left:0; padding-left:0}
  .t24h .kennzahlen > div:nth-child(n+3){border-top:1px solid var(--haar)}
}

/* ================= BAND: Hersteller links, Kontakt rechts, eine Mittellinie ================= */
.t24h .band{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--s2) var(--s4); padding:var(--s2) 0; border-top:1px solid var(--haar);
}
.t24h .hersteller{display:flex; align-items:baseline; gap:var(--s2) var(--s3); margin:0; min-width:0; flex-wrap:nowrap}
.t24h .hersteller__vor{font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:#6E747A; white-space:nowrap}
.t24h .hersteller__namen{display:flex; align-items:baseline; gap:0; margin:0; padding:0; list-style:none; white-space:nowrap}
.t24h .hersteller__namen > span{
  margin:0; padding:0; list-style:none;
  font-family:var(--zeile); font-weight:500; font-size:1rem; line-height:1; letter-spacing:.18em; text-transform:uppercase; color:#9AA0A6;
}
.t24h .hersteller__namen > span + span::before{content:""; display:inline-block; width:4px; height:4px; margin:0 var(--s3); vertical-align:middle; border-radius:50%; background:rgba(245,73,73,.7); position:relative; top:-1px}
.t24h .anruf{
  display:inline-flex; align-items:center; gap:var(--s2); min-height:44px; padding:6px 0;
  color:#ffffff; text-decoration:none; border:0; background:none;
}
.t24h .anruf__icon{
  flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(245,73,73,.6); color:var(--rot); transition:background-color .2s ease, color .2s ease;
}
.t24h .anruf__text{display:flex; flex-direction:column; gap:2px; line-height:1.2}
.t24h .anruf__frage{font-size:12.5px; font-weight:400; color:var(--ink-2)}
.t24h .anruf__nr{font-family:var(--zeile); font-weight:600; font-size:1.42rem; letter-spacing:.05em; color:#ffffff; font-variant-numeric:tabular-nums}
.t24h .anruf:hover .anruf__icon{background:var(--rot); color:#ffffff}
.t24h .anruf:hover .anruf__nr{color:#ffd0d0}
.t24h .anruf:focus-visible{outline:2px solid var(--fokus); outline-offset:4px}
@media(max-width:899px){
  .t24h .band{flex-direction:column; align-items:stretch; gap:var(--s3); padding-block:var(--s3)}
  .t24h .anruf{order:1; width:100%; padding:var(--s2); border:1px solid var(--haar); border-radius:2px; background:rgba(255,255,255,.03)}
  .t24h .hersteller{order:2; flex-direction:column; align-items:flex-start; gap:var(--s2)}
}
@media(max-width:519px){
  .t24h .hersteller__namen{display:grid; grid-template-columns:auto auto; gap:var(--s2) var(--s4); justify-content:start}
  .t24h .hersteller__namen > span + span::before{display:none}
}

/* ================= BETRIEB: zwei Lader ================= */
.t24h .stueck__lauf{position:absolute; inset:0; pointer-events:none}
/* Schluessellicht auf die Verdichtergehaeuse (Bildpixel L 575/380, R 870/370). Liegt ueber Foto UND Raedern/Sprites,
   damit beim Ruetteln keine Naht entsteht. */
.t24h .stueck__glanz{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  background:
    radial-gradient(ellipse 12% 16% at 41% 41%, rgba(255,246,236,.26) 0%, rgba(255,240,225,.1) 48%, transparent 76%),
    radial-gradient(ellipse 12% 16% at 62% 40%, rgba(255,246,236,.32) 0%, rgba(255,240,225,.12) 48%, transparent 76%);
}
.t24h .stueck__para{position:absolute; inset:0; will-change:transform}
.t24h .betrieb,.t24h .stroemung{position:absolute; display:block; pointer-events:none}
.t24h .hitze{
  position:absolute; pointer-events:none; display:block; filter:contrast(1.24) brightness(.96) saturate(.9);
  -webkit-mask-image:radial-gradient(ellipse 44% 50% at 50% 62%,#000 30%,transparent 78%);
  mask-image:radial-gradient(ellipse 44% 50% at 50% 62%,#000 30%,transparent 78%);
  will-change:transform;
}
.t24h .stueck__puls{
  position:absolute; inset:0; pointer-events:none; will-change:opacity;
  background:radial-gradient(ellipse 30% 22% at 50% 24%,rgba(255,150,80,.20) 0%,rgba(245,73,73,.07) 50%,transparent 76%);
  animation:t24h-leerlauf 1.6s ease-in-out infinite;
}
.t24h .stueck__boost{
  position:absolute; inset:0; pointer-events:none; opacity:0; will-change:opacity;
  background:radial-gradient(ellipse 36% 28% at 50% 24%,rgba(255,190,120,.36) 0%,rgba(245,73,73,.16) 46%,transparent 78%);
  transition:opacity .9s ease-out;
}
.t24h .halle.dreht .stueck__boost{opacity:1; transition-duration:.18s}
.t24h .halle.dreht .schein{animation-duration:.7s}
.t24h .stueck__schwenk{position:absolute; inset:-10% -40%; pointer-events:none; mix-blend-mode:screen; opacity:0; background:linear-gradient(104deg,transparent 38%,rgba(255,214,160,.42) 50%,transparent 62%)}
.t24h .etikett{position:absolute; z-index:3; --lang:40px; font-family:var(--text)}
.t24h .etikett--defekt{left:39.1%; top:51.5%; color:#8B9197}
.t24h .etikett--revidiert{left:63.4%; top:50.6%; color:var(--rot)}
.t24h .etikett::before{content:""; position:absolute; left:-3.5px; top:-3.5px; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px rgba(0,0,0,.45)}
.t24h .etikett__linie{position:absolute; left:0; top:0; width:1px; height:var(--lang); background:currentColor; opacity:.75}
.t24h .etikett__schild{position:absolute; top:var(--lang); padding:7px 11px 8px; white-space:nowrap; background:rgba(13,14,15,.84); border:1px solid rgba(255,255,255,.12); border-top:2px solid currentColor; box-shadow:0 8px 21px rgba(0,0,0,.45)}
.t24h .etikett--defekt .etikett__schild{right:-14px; text-align:right}
.t24h .etikett--revidiert .etikett__schild{left:-14px}
.t24h .etikett__titel{display:flex; align-items:center; gap:7px; font-family:var(--zeile); font-weight:600; font-size:15px; line-height:1.1; letter-spacing:.16em; text-transform:uppercase}
.t24h .etikett--defekt .etikett__titel{color:#B9BEC3; justify-content:flex-end}
.t24h .etikett--revidiert .etikett__titel{color:#ffffff}
.t24h .etikett__warn{display:block; width:7px; height:7px; background:#B8954A; transform:rotate(45deg)}
.t24h .etikett__zusatz{display:block; margin-top:3px; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#8B9197}
.t24h .austausch{position:absolute; z-index:3; left:51%; top:60%; translate:-50% 0; display:flex; align-items:center; gap:7px; white-space:nowrap; font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:#8B9197}
.t24h .austausch svg{display:block}
@media(max-width:699px){
  .t24h .etikett__schild{padding:4px 7px 5px}
  .t24h .etikett__titel{font-size:11px; letter-spacing:.12em; gap:5px}
  .t24h .etikett__warn{width:5px; height:5px}
  .t24h .etikett__zusatz{font-size:8.5px; margin-top:2px}
  .t24h .austausch span{display:none}
}
@media(max-width:999px){
  #t24h .stueck{margin-bottom:calc(var(--s3) + 72px)}
  .t24h .stueck__bu{top:calc(100% + 10px); bottom:auto}
}

/* ================= BEWEGUNG =================
   Ruhezustand = Endzustand. Auftakt nur mit .intro (setzt das kleine Skript am Anfang). */
@keyframes t24h-leerlauf{0%{opacity:.58} 9%{opacity:1} 19%{opacity:.72} 28%{opacity:.93} 52%{opacity:.62} 100%{opacity:.58}}
.t24h .schein{animation:t24h-leerlauf 1.6s ease-in-out infinite; will-change:opacity}
.t24h .halle.ruht .schein,.t24h .halle.ruht .stueck__puls{animation-play-state:paused}
.t24h .vorhang{display:none}
@keyframes t24h-vorhang{from{opacity:1} to{opacity:0}}
@keyframes t24h-auftauchen{from{opacity:0; transform:scale(1.08)} to{opacity:1; transform:none}}
@keyframes t24h-schwenk{0%{opacity:0; transform:translateX(-46%)} 35%{opacity:1} 100%{opacity:0; transform:translateX(46%)}}
@keyframes t24h-heben{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
@keyframes t24h-ziehen{from{transform:scaleX(0)} to{transform:scaleX(1)}}
@keyframes t24h-aufsetzen{0%{opacity:0; transform:translateY(-26px)} 68%{opacity:1; transform:translateY(3px)} 84%{transform:translateY(-1px)} 100%{opacity:1; transform:none}}
@keyframes t24h-schatten{from{opacity:0; transform:scaleX(.5)} 68%{opacity:1; transform:scaleX(1.04)} to{opacity:1; transform:none}}
.t24h.intro .vorhang{display:block; position:absolute; inset:0; z-index:6; pointer-events:none; background:var(--schwarz); animation:t24h-vorhang .75s ease-out both}
.t24h.intro .stueck__rahmen,.t24h.intro .stueck__lauf{animation:t24h-auftauchen 1.05s .12s cubic-bezier(.2,.7,.2,1) both}
.t24h.intro .stueck__schwenk{animation:t24h-schwenk .95s .55s ease-in-out both}
.t24h.intro .stueck__bu{animation:t24h-heben .5s 1.1s ease-out both}
.t24h.intro .braue{animation:t24h-heben .45s .18s ease-out both}
.t24h.intro h1.t24h-titel .z1{animation:t24h-heben .5s .3s cubic-bezier(.2,.7,.2,1) both}
.t24h.intro h1.t24h-titel .rot{animation:t24h-heben .5s .5s cubic-bezier(.2,.7,.2,1) both}
.t24h.intro h1.t24h-titel .rot::after{animation:t24h-ziehen .45s .9s cubic-bezier(.2,.7,.2,1) both}
.t24h.intro .lede{animation:t24h-heben .5s .66s ease-out both}
.t24h.intro .konsole-halter{animation:t24h-aufsetzen .55s .82s cubic-bezier(.3,.7,.3,1) both}
.t24h.intro .konsole-halter::after{animation:t24h-schatten .55s .82s ease-out both}
.t24h.intro .tausch li:nth-child(1){animation:t24h-heben .4s 1.15s ease-out both}
.t24h.intro .tausch li:nth-child(2){animation:t24h-heben .4s 1.27s ease-out both}
.t24h.intro .tausch li:nth-child(3){animation:t24h-heben .4s 1.39s ease-out both}
.t24h.intro .etikett--defekt{animation:t24h-heben .45s 1.3s ease-out both}
.t24h.intro .etikett--revidiert{animation:t24h-heben .45s 1.45s ease-out both}
.t24h.intro .austausch{animation:t24h-heben .4s 1.6s ease-out both}

@media (prefers-reduced-motion: reduce){
  .t24h *,.t24h *::before,.t24h *::after{animation:none !important; transition:none !important}
  .t24h .funken,.t24h .hitze,.t24h .vorhang,.t24h .stueck__schwenk{display:none !important}
  .t24h .t24h-ws .th-vehicle-select__item--loading .th-vehicle-select__item-loader::before{left:0; width:100%}
}

/* ================= WHATSAPP-KNOPF DER SEITE (Plugin ht-ctc, unberuehrt) =================
   Auf dem Handy liegt er fest unten rechts. Solange ein Bedienelement der Konsole darunter liegt,
   tritt er zurueck (Klasse setzt t24h-hero.js), danach ist er sofort wieder da. */
html.t24h-wa-weicht #ht-ctc-chat{opacity:0 !important; visibility:hidden !important; transition:opacity .2s ease, visibility 0s linear .2s !important}
#ht-ctc-chat{transition:opacity .2s ease}