/* ============================================================
   THECUBER Modelle – Design
   Alles ist unter .tcm-seite gekapselt und beeinflusst nur
   die Modell-Ausgabe, niemals Header, Footer oder andere Seiten.
   Farben zentral in :root anpassbar.
   ============================================================ */

.tcm-seite{
  --accent:#e8621e; --accent-hell:#ff7a3d;
  --ink:#1d1d1f; --dim:#86868b; --grau:#f5f5f7; --weiss:#fff;
  --linie:rgba(0,0,0,.12); --ok:#2fa84f; --radius:22px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;
  font-family:var(--font);color:var(--ink);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.tcm-seite *{margin:0;padding:0;box-sizing:border-box}
.tcm-seite a{color:inherit;text-decoration:none}
.tcm-seite img{max-width:100%;display:block;height:auto}
.tcm-wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.tcm-narrow{max-width:820px}
.tcm-seite h1,.tcm-seite h2,.tcm-seite h3,.tcm-seite h4{font-weight:600;letter-spacing:-.03em;line-height:1.08}
.tcm-eyebrow{font-size:.95rem;font-weight:600;color:var(--accent);display:block}
.tcm-code{font-size:.9rem;color:var(--dim);letter-spacing:.05em;text-transform:uppercase}
.tcm-sub{color:var(--dim)}

.tcm-btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;border:0;border-radius:980px;
  padding:.8em 1.9em;font-family:inherit;font-size:1.1rem;font-weight:500;
  cursor:pointer;transition:background .2s ease;
}
.tcm-btn:hover{background:var(--accent-hell);color:#fff}

/* ---- Zurück ---- */
.tcm-back{padding:26px 0 0}
.tcm-back a{display:inline-flex;align-items:center;gap:.4em;font-size:.98rem;font-weight:500;color:var(--dim)}
.tcm-back a::before{content:"\2039";font-size:1.4em;line-height:0;color:var(--accent)}
.tcm-back a:hover{color:var(--accent)}

/* ---- Hero ---- */
.tcm-hero{padding:38px 0 clamp(60px,8vw,90px)}
.tcm-hero-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center}
.tcm-hero h1{font-size:clamp(2.4rem,5.5vw,4rem);margin:.15em 0 .35em}
.tcm-lead{font-size:1.2rem;color:var(--dim);margin:1em 0 1.4em}
.tcm-facts{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin-bottom:1.8em}
.tcm-facts li{display:flex;flex-direction:column;gap:2px}
.tcm-facts li b{font-size:1.3rem;font-weight:600;letter-spacing:-.02em;color:var(--accent)}
.tcm-facts li span{font-size:.9rem;color:var(--dim)}

/* ---- Karussell ---- */
.tcm-car{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--grau);aspect-ratio:4/3;touch-action:pan-y}
.tcm-car.tcm-leer{display:grid;place-items:center;color:var(--dim);font-size:.95rem}
.tcm-car-track{display:flex;height:100%;transition:transform .5s cubic-bezier(.16,.72,.24,1)}
.tcm-slide{min-width:100%;height:100%}
.tcm-slide img{width:100%;height:100%;object-fit:cover}
.tcm-car-btn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  border:0;background:rgba(255,255,255,.9);color:#1d1d1f;font-size:1.4rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;box-shadow:0 2px 10px rgba(0,0,0,.15);z-index:2}
.tcm-car-btn:hover{background:#fff}
.tcm-car-btn.p{left:14px} .tcm-car-btn.n{right:14px}
.tcm-car-count{position:absolute;top:14px;right:14px;background:rgba(0,0,0,.55);color:#fff;font-size:.82rem;padding:.25em .7em;border-radius:980px;z-index:2}
.tcm-car-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;gap:8px;justify-content:center;z-index:2}
.tcm-car-dots button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.6);cursor:pointer;padding:0;transition:all .2s ease}
.tcm-car-dots button.on{background:#fff;width:26px;border-radius:6px}
.tcm-thumbs{display:flex;gap:8px;margin-top:12px;overflow-x:auto;padding-bottom:2px}
.tcm-thumbs button{flex:0 0 auto;width:80px;height:60px;border-radius:10px;overflow:hidden;border:2px solid transparent;cursor:pointer;padding:0;background:none}
.tcm-thumbs button.on{border-color:var(--accent)}
.tcm-thumbs img{width:100%;height:100%;object-fit:cover}

/* ---- Konfigurator ---- */
.tcm-cfgsec{background:var(--grau);padding:clamp(70px,9vw,110px) 0}
.tcm-cfg-head{text-align:center;margin-bottom:40px;max-width:640px;margin-left:auto;margin-right:auto}
.tcm-cfg-head h2{font-size:clamp(1.9rem,4vw,2.8rem);margin:.2em 0 .3em}
.tcm-cfg-head p{color:var(--dim);font-size:1.1rem}
.tcm-cfg-grid{display:grid;grid-template-columns:320px 1fr;gap:28px;align-items:start}
.tcm-aside{position:sticky;top:20px;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden}
.tcm-aside-img{aspect-ratio:4/3;background:var(--grau);overflow:hidden}
.tcm-aside-img img{width:100%;height:100%;object-fit:cover;display:block}
/* Technische Zeichnungen vollstaendig zeigen statt beschneiden */
.tcm-aside-img.tcm-plan{background:#fff}
.tcm-aside-img.tcm-plan img{object-fit:contain;padding:16px}
.tcm-sum{padding:24px}
.tcm-lbl{font-size:.8rem;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.04em}
.tcm-sum h3{font-size:1.3rem;margin:.15em 0 .1em}
.tcm-sum .tcm-code{margin-bottom:1.2em}
.tcm-sel{list-style:none;display:grid;gap:7px;margin-bottom:1.4em;max-height:220px;overflow:auto}
.tcm-sel li{font-size:.9rem;display:flex;gap:.5em;align-items:flex-start}
.tcm-sel li::before{content:"\2713";color:var(--accent);font-weight:800;flex:0 0 auto}
.tcm-sel li.opt::before{color:var(--accent-hell)}
.tcm-cta{display:block;width:100%;text-align:center;font-family:inherit;font-size:1.05rem;font-weight:500;
  background:var(--accent);color:#fff;border:0;border-radius:980px;padding:.8em 1em;cursor:pointer;transition:background .2s ease}
.tcm-cta:hover{background:var(--accent-hell)}
.tcm-hint{font-size:.8rem;color:var(--dim);text-align:center;margin-top:.9em}
.tcm-done{display:none;margin-top:14px;background:#e7f7ec;border:1px solid #b6e2c4;border-radius:14px;padding:14px 16px;font-size:.92rem;color:#237045}
.tcm-done.show{display:block}

.tcm-groups{display:grid;gap:34px}
.tcm-group h4{font-size:1.15rem;margin-bottom:.2em}
.tcm-desc{font-size:.9rem;color:var(--dim);margin-bottom:16px}
.tcm-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tcm-card{position:relative;background:var(--weiss);border:1.5px solid var(--linie);border-radius:14px;
  padding:18px 18px 16px;cursor:pointer;transition:border-color .18s ease;user-select:none}
.tcm-card:hover{border-color:var(--accent)}
.tcm-card.serie{cursor:default;background:#fbfbfd}
.tcm-tick{position:absolute;top:14px;right:14px;width:22px;height:22px;border-radius:50%;
  border:1.5px solid var(--linie);background:var(--weiss);display:grid;place-items:center;transition:all .18s ease}
.tcm-tick::after{content:"\2713";font-size:.8rem;font-weight:800;color:#fff;opacity:0;transition:opacity .18s ease}
.tcm-card.on{border-color:var(--accent)}
.tcm-card.on .tcm-tick{background:var(--ok);border-color:var(--ok)}
.tcm-card.on .tcm-tick::after{opacity:1}
.tcm-name{font-size:1.02rem;font-weight:600;padding-right:30px;letter-spacing:-.01em}
.tcm-meta{font-size:.82rem;color:var(--dim);margin-top:.4em}
.tcm-card.serie .tcm-meta{color:var(--accent)}

/* Abwählbare Serienteile: sehen aus wie Serie, sind aber klickbar */
.tcm-card.weg{cursor:pointer}
.tcm-card.weg .tcm-meta{color:var(--dim)}
.tcm-card.weg:not(.on){opacity:.55}
.tcm-card.weg:not(.on) .tcm-name{text-decoration:line-through;text-decoration-color:var(--dim)}

/* Einfachauswahl: runder Punkt statt Häkchen */
/* --- Zubehör, das zur aktuellen Auswahl nicht passt --- */
.tcm-sperr{display:none;font-size:.78rem;font-weight:600;color:var(--accent);margin-top:.5em}
.tcm-card.opt.gesperrt{opacity:.45;border-style:dashed}
.tcm-card.opt.gesperrt:hover{border-color:var(--accent)}
.tcm-card.opt.gesperrt .tcm-name{text-decoration:line-through;text-decoration-color:var(--dim)}
.tcm-card.opt.gesperrt .tcm-meta{display:none}
.tcm-card.opt.gesperrt .tcm-sperr{display:block}

/* --- Hinweisfenster bei Ausschluss --- */
.tcm-konflikt{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:20px}
.tcm-konflikt[hidden]{display:none}
.tcm-konflikt-bg{position:absolute;inset:0;background:rgba(0,0,0,.5);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:tcmFade .2s ease}
.tcm-konflikt-box{
  position:relative;background:var(--weiss);border-radius:22px;padding:34px 30px 26px;
  max-width:440px;width:100%;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.3);
  animation:tcmFade .25s ease;
}
.tcm-konflikt-zeichen{
  width:46px;height:46px;margin:0 auto 16px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:1.5rem;font-weight:700;
  display:grid;place-items:center;line-height:1;
}
.tcm-konflikt-box h3{font-size:1.35rem;margin-bottom:.5em}
.tcm-konflikt-text{color:var(--dim);font-size:1rem;line-height:1.5}
.tcm-konflikt-knoepfe{display:grid;gap:10px;margin-top:24px}
.tcm-konflikt-tausch,.tcm-konflikt-ab{
  font-family:inherit;font-size:1rem;font-weight:500;border-radius:980px;
  padding:.75em 1.4em;cursor:pointer;line-height:1.3;letter-spacing:0;text-transform:none;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
  /* Gegen Theme-Knoepfe, die sich sonst durchsetzen (Pink statt Orange) */
  background-image:none!important;box-shadow:none!important;text-shadow:none!important;
}
.tcm-konflikt .tcm-konflikt-tausch{background:var(--accent)!important;color:#fff!important;border:0!important}
.tcm-konflikt .tcm-konflikt-tausch:hover{background:var(--accent-hell)!important}
.tcm-konflikt .tcm-konflikt-ab{
  background:transparent!important;color:var(--accent)!important;
  border:1.5px solid var(--accent)!important;
}
.tcm-konflikt .tcm-konflikt-ab:hover{background:rgba(232,98,30,.08)!important}
@media (max-width:520px){
  .tcm-konflikt{place-items:end center;padding:0}
  .tcm-konflikt-box{max-width:100%;border-radius:22px 22px 0 0;padding-bottom:34px}
}
@media (prefers-reduced-motion:reduce){
  .tcm-konflikt-bg,.tcm-konflikt-box{animation:none}
}

/* --- Bilder in Großansicht --- */
.tcm-lupe{cursor:zoom-in}
.tcm-lupe:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
body.tcm-gross-offen{overflow:hidden}
.tcm-gross{position:fixed;inset:0;z-index:100001;display:grid;place-items:center;padding:clamp(16px,4vw,56px)}
.tcm-gross[hidden]{display:none}
.tcm-gross-bg{position:absolute;inset:0;background:rgba(0,0,0,.92);animation:tcmFade .2s ease}
.tcm-gross-buehne{position:relative;z-index:1;margin:0;max-width:100%;max-height:100%;
  display:flex;flex-direction:column;align-items:center;gap:14px;animation:tcmFade .25s ease}
.tcm-gross-buehne img{max-width:100%;max-height:82vh;width:auto;height:auto;
  border-radius:10px;background:#fff;object-fit:contain}
.tcm-gross-buehne figcaption{color:rgba(255,255,255,.72);font-size:.92rem;text-align:center;max-width:60ch}
.tcm-gross-buehne figcaption[hidden]{display:none}
.tcm-gross-x{
  position:absolute;top:18px;right:18px;z-index:3;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.14)!important;color:#fff!important;border:0!important;
  font-size:1.6rem;line-height:1;cursor:pointer;display:grid;place-items:center;
  background-image:none!important;box-shadow:none!important;
}
.tcm-gross-x:hover{background:rgba(255,255,255,.26)!important}
.tcm-gross-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.14)!important;color:#fff!important;border:0!important;
  font-size:1.9rem;line-height:1;cursor:pointer;display:grid;place-items:center;
  background-image:none!important;box-shadow:none!important;
}
.tcm-gross-nav[hidden]{display:none}
.tcm-gross-nav:hover{background:rgba(255,255,255,.26)!important}
.tcm-gross-nav.p{left:clamp(10px,2vw,28px)}
.tcm-gross-nav.n{right:clamp(10px,2vw,28px)}
.tcm-gross-zaehler{
  position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:3;
  color:rgba(255,255,255,.7);font-size:.9rem;letter-spacing:.04em;
}
.tcm-gross-zaehler[hidden]{display:none}
@media (max-width:640px){
  .tcm-gross-nav{width:44px;height:44px;font-size:1.5rem}
  .tcm-gross-buehne img{max-height:72vh}
}
@media (prefers-reduced-motion:reduce){
  .tcm-gross-bg,.tcm-gross-buehne{animation:none}
}

/* --- Optionales WPForms-Feld für die Zusammenstellung: nie sichtbar --- */
.tcm-konfig-feld,
.wpforms-field.tcm-konfig-feld,
div.wpforms-container .tcm-konfig-feld{
  position:absolute!important;width:1px!important;height:1px!important;
  overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;
  padding:0!important;margin:-1px!important;border:0!important;
}

.tcm-tick.rund{border-radius:50%}
.tcm-card.einfach.on .tcm-tick.rund{background:var(--accent);border-color:var(--accent)}
.tcm-card.einfach.on .tcm-tick.rund::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff;opacity:1}

/* Zusammenfassung: Einfachauswahl und Zubehör farblich unterscheiden */
.tcm-sel li.wahl::before{color:var(--accent-hell)}
.tcm-sel li.opt::before{color:var(--accent-hell)}

/* ---- Grundriss ---- */
.tcm-plansec{padding:clamp(70px,9vw,110px) 0}
.tcm-sec-head{max-width:680px;margin:0 auto 48px;text-align:center}
.tcm-sec-head h2{font-size:clamp(2rem,4.5vw,3rem);margin-top:.2em}
.tcm-plan-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:44px;align-items:center}
.tcm-plan-img{background:#fff;border:1px solid var(--linie);border-radius:var(--radius);padding:30px;display:grid;place-items:center}
.tcm-plan-img img{width:100%;max-height:520px;object-fit:contain}
.tcm-specs{list-style:none;display:grid}
.tcm-specs li{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--linie)}
.tcm-specs li:first-child{border-top:1px solid var(--linie)}
.tcm-specs .k{color:var(--dim)}
.tcm-specs .v{font-weight:600;text-align:right}
.tcm-plan-dl{margin-top:32px;text-align:center}
.tcm-plan-dl a{display:inline-flex;align-items:center;gap:.4em;color:var(--accent);font-weight:500}
.tcm-plan-dl a::before{content:"\2193";font-weight:700}

/* ---- Ausstattungskarten ---- */
.tcm-featsec{background:var(--grau);padding:clamp(70px,9vw,110px) 0}
.tcm-featsec h2{font-size:clamp(2rem,4.5vw,3rem);text-align:center;margin-bottom:.4em}
.tcm-featsec .tcm-sub{text-align:center;font-size:1.1rem;max-width:600px;margin:0 auto 48px}
.tcm-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tcm-feat{background:#fff;border:1px solid var(--linie);border-radius:16px;padding:26px 28px}
.tcm-feat h3{font-size:1.15rem;margin-bottom:.3em}
.tcm-feat p{font-size:.98rem;color:var(--dim)}

/* ---- Fahrzeug-Check ---- */
.tcm-checksec{padding:clamp(70px,9vw,110px) 0}
.tcm-checkbox{background:#000;color:#fff;border-radius:var(--radius);padding:clamp(36px,5vw,64px);text-align:center;max-width:780px;margin:0 auto}
.tcm-checkbox .tcm-eyebrow{color:var(--accent-hell)}
.tcm-checkbox h2{color:#fff;font-size:clamp(1.8rem,4vw,2.6rem);margin:.2em 0 .5em}
.tcm-checkbox p{color:#c7c7cc;font-size:1.1rem;max-width:52ch;margin:0 auto 1.8em}

/* ---- FAQ ---- */
.tcm-faqsec{background:var(--grau);padding:clamp(70px,9vw,110px) 0}
.tcm-faqsec h2{font-size:clamp(2rem,4.5vw,3rem);margin-bottom:.6em}
.tcm-seite details{border-top:1px solid var(--linie);padding:24px 4px}
.tcm-seite details:last-of-type{border-bottom:1px solid var(--linie)}
.tcm-seite summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:22px;font-size:1.15rem;font-weight:600}
.tcm-seite summary::-webkit-details-marker{display:none}
.tcm-seite summary::after{content:"+";color:var(--accent);font-size:1.6rem;font-weight:400;transition:transform .25s}
.tcm-seite details[open] summary::after{transform:rotate(45deg)}
.tcm-seite details p{color:var(--dim);margin:14px 0 0;max-width:70ch}

/* ---- Modellvergleich ---- */
.tcm-compsec{padding:clamp(70px,9vw,110px) 0}
.tcm-compsec h2{font-size:clamp(2rem,4.5vw,3rem);text-align:center;margin-bottom:.4em}
.tcm-compsec .tcm-sub{text-align:center;margin-bottom:44px}
.tcm-mcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.tcm-mcard{background:#fff;border:1px solid var(--linie);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s ease,transform .2s ease}
.tcm-mcard:hover{box-shadow:0 8px 30px rgba(0,0,0,.1);transform:translateY(-3px)}
.tcm-mcard.here{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.tcm-mc-car{position:relative;aspect-ratio:4/3;background:var(--grau);overflow:hidden}
.tcm-mc-track{display:flex;height:100%;transition:transform .45s cubic-bezier(.16,.72,.24,1)}
.tcm-mc-track img{min-width:100%;height:100%;object-fit:cover}
.tcm-mc-nav{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;border-radius:50%;
  background:rgba(255,255,255,.88);color:#1d1d1f;font-size:1rem;cursor:pointer;display:none;place-items:center;z-index:2}
.tcm-mc-car:hover .tcm-mc-nav{display:grid}
.tcm-mc-nav.p{left:8px} .tcm-mc-nav.n{right:8px}
.tcm-mc-dots{position:absolute;bottom:9px;left:0;right:0;display:flex;gap:5px;justify-content:center;z-index:2}
.tcm-mc-dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55)}
.tcm-mc-dots span.on{background:#fff}
.tcm-mc-badge{position:absolute;top:10px;left:10px;background:var(--accent);color:#fff;font-size:.72rem;font-weight:600;padding:.25em .7em;border-radius:980px;z-index:2}
.tcm-mc-body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.tcm-mc-body h3{font-size:1.1rem;margin-bottom:.15em}
.tcm-ch{font-size:.9rem;color:var(--dim);margin-bottom:.9em;min-height:2.5em}
.tcm-mc-specs{list-style:none;display:grid;gap:5px;margin-bottom:1.1em}
.tcm-mc-specs li{font-size:.85rem;display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid var(--linie);padding-bottom:4px}
.tcm-mc-specs li span{color:var(--dim)}
.tcm-mc-link{margin-top:auto;font-size:.92rem;font-weight:600;color:var(--accent)}
.tcm-mc-link.cur{color:var(--dim);font-weight:500}

/* ---- Responsive ---- */
@media (max-width:900px){
  .tcm-hero-grid{grid-template-columns:1fr;gap:30px}
  .tcm-cfg-grid{grid-template-columns:1fr}
  .tcm-aside{position:static}
  .tcm-aside-img{aspect-ratio:16/9}
  .tcm-cards{grid-template-columns:1fr 1fr}
  .tcm-plan-grid{grid-template-columns:1fr;gap:28px}
  .tcm-feats{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .tcm-cards{grid-template-columns:1fr}
  .tcm-feats{grid-template-columns:1fr}
  .tcm-car-btn{width:38px;height:38px;font-size:1.2rem}
}
@media (prefers-reduced-motion:reduce){
  .tcm-car-track,.tcm-mc-track{transition:none}
}

/* ---- Anfrageformular auf der Modellseite ---- */
.tcm-formsec{padding:clamp(70px,9vw,110px) 0;background:var(--weiss)}
.tcm-form-head{text-align:center;margin-bottom:44px}
.tcm-form-head h2{font-size:clamp(2rem,4.5vw,3rem);margin:.2em 0 .4em}
.tcm-form-head p{color:var(--dim);font-size:1.1rem;max-width:52ch;margin:0 auto}

/* WPForms an das Design angleichen */
.tcm-form .wpforms-container{margin:0}
.tcm-form .wpforms-field{padding:0 0 22px}
.tcm-form .wpforms-field-label{
  font-size:1rem!important;font-weight:600!important;letter-spacing:-.01em;
  color:var(--ink)!important;margin-bottom:8px!important;
}
.tcm-form .wpforms-field-sublabel,
.tcm-form .wpforms-field-description{font-size:.86rem!important;color:var(--dim)!important;font-weight:400!important}
.tcm-form .wpforms-required-label{color:var(--accent)!important}
.tcm-form input[type=text],
.tcm-form input[type=email],
.tcm-form input[type=tel],
.tcm-form select,
.tcm-form textarea{
  font-family:inherit!important;font-size:1.02rem!important;color:var(--ink)!important;
  background:#fff!important;border:1px solid var(--linie)!important;border-radius:12px!important;
  padding:.78em .95em!important;box-shadow:none!important;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.tcm-form textarea{min-height:130px!important}
.tcm-form input:focus,.tcm-form select:focus,.tcm-form textarea:focus{
  border-color:var(--accent)!important;
  box-shadow:0 0 0 3px rgba(232,98,30,.18)!important;outline:none!important;
}
.tcm-form ::placeholder{color:#b0b0b5!important}
.tcm-form .wpforms-field-gdpr-checkbox label{font-size:.94rem!important;color:var(--dim)!important;line-height:1.45!important}
.tcm-form .wpforms-field-gdpr-checkbox a{color:var(--accent)!important;text-decoration:underline}
.tcm-form input[type=checkbox]{accent-color:var(--accent);width:18px;height:18px;margin-right:.5em}
.tcm-form .wpforms-submit{
  font-family:inherit!important;font-size:1.12rem!important;font-weight:500!important;
  background:var(--accent)!important;color:#fff!important;border:0!important;
  border-radius:980px!important;padding:.82em 2em!important;cursor:pointer;box-shadow:none!important;
  transition:background .25s ease;
}
.tcm-form .wpforms-submit:hover{background:var(--accent-hell)!important}
.tcm-form .wpforms-error{color:#d63637!important;font-size:.86rem!important}
.tcm-form .wpforms-confirmation-container-full{
  background:#fff!important;border:1px solid var(--linie)!important;
  border-left:4px solid var(--accent)!important;border-radius:16px!important;
  padding:26px 28px!important;color:var(--ink)!important;
}

/* ============================================================
   ANFRAGE-FENSTER
   ============================================================ */
.tcm-modal{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;padding:20px}
.tcm-modal[hidden]{display:none}
.tcm-modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:tcmFade .25s ease}
@keyframes tcmFade{from{opacity:0}to{opacity:1}}

.tcm-modal-box{
  position:relative;background:#fff;border-radius:22px;width:100%;max-width:560px;
  max-height:90vh;overflow-y:auto;padding:clamp(26px,4vw,38px);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.45);
  animation:tcmRein .32s cubic-bezier(.16,.72,.24,1);
  font-family:var(--font);color:var(--ink);
}
@keyframes tcmRein{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}

.tcm-modal-x{
  position:absolute;top:14px;right:16px;width:36px;height:36px;border:0;border-radius:50%;
  background:rgba(0,0,0,.06);color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background .2s ease;z-index:2;
}
.tcm-modal-x:hover{background:rgba(0,0,0,.12)}

.tcm-modal-kopf{margin-bottom:22px;padding-right:40px}
.tcm-modal-kopf h2{font-size:clamp(1.4rem,3vw,1.9rem);margin-top:.15em;letter-spacing:-.025em}

/* Zusammenfassung der Konfiguration */
.tcm-modal-zusammenfassung{
  background:var(--grau);border-radius:14px;padding:16px 18px;margin-bottom:24px;
}
.tcm-mz-kopf{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.tcm-mz-kopf strong{font-size:1rem;letter-spacing:-.01em}
.tcm-mz-schalter{
  background:none;border:0;padding:0;cursor:pointer;font-family:inherit;
  font-size:.88rem;font-weight:600;color:var(--accent);text-decoration:underline;
}
.tcm-mz-liste{list-style:none;margin:14px 0 0;display:grid;gap:5px;max-height:180px;overflow-y:auto}
.tcm-mz-liste[hidden]{display:none}
.tcm-mz-liste li{font-size:.88rem;color:var(--ink);display:flex;gap:.5em;align-items:flex-start}
.tcm-mz-liste li::before{content:"\2713";color:var(--accent);font-weight:700;flex:0 0 auto}
.tcm-mz-hinweis{font-size:.8rem;color:var(--dim);margin:12px 0 0}

/* Das Formular im Fenster kompakter */
.tcm-modal-form .wpforms-field{padding:0 0 16px}
.tcm-modal-form textarea{min-height:90px!important}
.tcm-modal-form .wpforms-submit{width:100%}

@media (max-width:560px){
  .tcm-modal{padding:0;place-items:end center}
  .tcm-modal-box{max-width:100%;max-height:92vh;border-radius:22px 22px 0 0}
}
@media (prefers-reduced-motion:reduce){
  .tcm-modal-bg,.tcm-modal-box{animation:none}
}

/* Fußzeile der Zusammenfassung im Fenster */
.tcm-mz-fuss{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:12px}
.tcm-mz-hinweis{font-size:.8rem;color:var(--dim);margin:0}

/* ============================================================
   KONFIGURATOR ÜBER DIE VOLLE BREITE
   Wird über Modelle -> Einstellungen aktiviert.
   Bild links groß und stehend, Ausstattung rechts durchlaufend.
   ============================================================ */
.tcm-cfgsec.tcm-voll{padding:0}

.tcm-cfgsec.tcm-voll > .tcm-wrap{max-width:none;padding:0}

.tcm-cfgsec.tcm-voll .tcm-cfg-head{
  padding:clamp(60px,8vw,100px) 22px clamp(36px,4vw,52px);
  max-width:720px;margin:0 auto;
}

.tcm-cfgsec.tcm-voll .tcm-cfg-grid{
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:0;align-items:stretch;
}

/* Linke Spalte: Bild füllt die Fläche, bleibt beim Scrollen stehen */
.tcm-cfgsec.tcm-voll .tcm-aside{
  position:sticky;top:0;align-self:start;
  border:0;border-radius:0;background:#0d0d0f;
  min-height:100vh;display:flex;flex-direction:column;
  overflow:hidden;
}
.tcm-cfgsec.tcm-voll .tcm-aside-img{
  flex:1 1 auto;aspect-ratio:auto;min-height:52vh;
}
.tcm-cfgsec.tcm-voll .tcm-sum{
  background:#0d0d0f;color:#f5f5f7;padding:clamp(24px,3vw,34px);
  border-top:1px solid rgba(255,255,255,.12);
}
.tcm-cfgsec.tcm-voll .tcm-sum h3{color:#fff}
.tcm-cfgsec.tcm-voll .tcm-lbl,
.tcm-cfgsec.tcm-voll .tcm-sum .tcm-code,
.tcm-cfgsec.tcm-voll .tcm-hint{color:#9a9aa0}
.tcm-cfgsec.tcm-voll .tcm-sel li{color:#e9e9ec}
.tcm-cfgsec.tcm-voll .tcm-sel{max-height:170px}

/* Rechte Spalte: Ausstattung mit Luft am Rand */
.tcm-cfgsec.tcm-voll .tcm-groups{
  padding:clamp(40px,5vw,72px) clamp(24px,4vw,64px) clamp(60px,7vw,96px);
  gap:44px;
}
.tcm-cfgsec.tcm-voll .tcm-cards{grid-template-columns:repeat(2,1fr)}

@media (min-width:1500px){
  .tcm-cfgsec.tcm-voll .tcm-cards{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:900px){
  .tcm-cfgsec.tcm-voll .tcm-cfg-grid{grid-template-columns:1fr}
  .tcm-cfgsec.tcm-voll .tcm-aside{position:static;min-height:0}
  .tcm-cfgsec.tcm-voll .tcm-aside-img{min-height:0;aspect-ratio:16/9}
  .tcm-cfgsec.tcm-voll .tcm-groups{padding:36px 22px 60px}
  .tcm-cfgsec.tcm-voll .tcm-cards{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .tcm-cfgsec.tcm-voll .tcm-cards{grid-template-columns:1fr}
}

/* ============================================================
   ELEMENTOR-BAUSTEINE
   Eigenständige Abschnitte, die überall einsetzbar sind.
   ============================================================ */
.tcm-seite .tcm-abschnitt{padding:clamp(70px,10vw,140px) 0}
.tcm-seite .tcm-bg-weiss{background:var(--weiss);color:var(--ink)}
.tcm-seite .tcm-bg-grau{background:var(--grau);color:var(--ink)}
.tcm-seite .tcm-bg-schwarz{background:#000;color:#f5f5f7}
.tcm-seite .tcm-bg-schwarz h2,
.tcm-seite .tcm-bg-schwarz h3{color:#f5f5f7}
.tcm-seite .tcm-bg-schwarz p{color:#a1a1a6}

.tcm-seite .tcm-wide{max-width:1180px;margin:0 auto;padding:0 22px}

/* Vollbild-Moment */
.tcm-seite .tcm-fb{
  position:relative;min-height:var(--tcm-bhoehe,88vh);
  display:grid;place-items:center;text-align:center;
  color:#fff;overflow:hidden;padding:100px 22px;
}
.tcm-seite .tcm-fb-mittel{min-height:56vh}
/* Echtes Bild statt CSS-Hintergrund: nur so greifen Groessenvarianten,
   WebP-Konvertierung und verzoegertes Laden. */
.tcm-seite .tcm-fb-bg{position:absolute;inset:0;display:block}
.tcm-seite .tcm-fb-bg img{
  width:100%;height:100%;display:block;object-fit:cover;
  object-position:var(--tcm-bpx,50%) var(--tcm-bpy,55%);
}
.tcm-seite .tcm-fb::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 45%,rgba(0,0,0,.7))}
.tcm-seite .tcm-fb-txt{position:relative;z-index:2;max-width:760px}
.tcm-seite .tcm-fb-txt h2{color:#fff;font-size:clamp(2.1rem,5.5vw,4.4rem);margin-bottom:.35em;letter-spacing:-.03em;line-height:1.08}
.tcm-seite .tcm-fb-txt p{color:#eaeaee;font-size:clamp(1.05rem,2vw,1.3rem);max-width:42ch;margin:0 auto}

/* Große Aussage */
.tcm-seite .tcm-statement{text-align:center}
.tcm-seite .tcm-big{
  font-weight:600;letter-spacing:-.045em;line-height:1.03;
  font-size:clamp(2.4rem,8vw,6.4rem);max-width:16ch;margin:0 auto;
}
.tcm-seite .tcm-big em{font-style:normal;color:var(--accent)}
.tcm-seite .tcm-bg-schwarz .tcm-big em{color:var(--accent-hell)}
.tcm-seite .tcm-statement-text{
  font-size:clamp(1.1rem,2vw,1.4rem);max-width:46ch;margin:1.2em auto 0;color:var(--dim);
}
.tcm-seite .tcm-bg-schwarz .tcm-statement-text{color:#a1a1a6}

/* Text mit Bild */
.tcm-seite .tcm-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,56px);align-items:center}
.tcm-seite .tcm-duo.tcm-rev .tcm-duo-txt{order:2}
.tcm-seite .tcm-duo h2{font-size:clamp(1.8rem,4vw,3rem);margin-bottom:.5em;letter-spacing:-.03em;line-height:1.1}
.tcm-seite .tcm-duo p{font-size:1.08rem;margin-bottom:1.1em;line-height:1.6}
.tcm-seite .tcm-duo-bild{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--grau)}
.tcm-seite .tcm-duo-bild img{width:100%;aspect-ratio:4/3;object-fit:cover}
.tcm-seite .tcm-chk{list-style:none;display:grid;gap:12px;margin:1.3em 0}
.tcm-seite .tcm-chk li{display:flex;gap:.6em;font-size:1.05rem;line-height:1.5}
.tcm-seite .tcm-chk li::before{content:"\2713";color:var(--accent);font-weight:800;flex:0 0 auto}

/* Zahlenreihe */
.tcm-seite .tcm-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:24px;text-align:center}
.tcm-seite .tcm-nums b{display:block;font-size:clamp(2.1rem,5vw,3.8rem);font-weight:600;
  letter-spacing:-.04em;line-height:1;color:var(--accent)}
.tcm-seite .tcm-bg-schwarz .tcm-nums b{color:var(--accent-hell)}
.tcm-seite .tcm-nums span{display:block;margin-top:.5em;font-size:1rem;color:var(--dim)}
.tcm-seite .tcm-bg-schwarz .tcm-nums span{color:#a1a1a6}

/* Karten */
.tcm-seite .tcm-karten-kopf{text-align:center;max-width:680px;margin:0 auto 48px}
.tcm-seite .tcm-karten-kopf h2{font-size:clamp(1.9rem,4.2vw,3rem);margin-bottom:.4em;letter-spacing:-.03em}
.tcm-seite .tcm-karten-kopf p{color:var(--dim);font-size:1.1rem}
.tcm-seite .tcm-karten{display:grid;gap:20px}
.tcm-seite .tcm-karten.tcm-sp-2{grid-template-columns:repeat(2,1fr)}
.tcm-seite .tcm-karten.tcm-sp-3{grid-template-columns:repeat(3,1fr)}
.tcm-seite .tcm-karten.tcm-sp-4{grid-template-columns:repeat(4,1fr)}
.tcm-seite .tcm-karte{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);padding:30px 32px}
.tcm-seite .tcm-karte h3{color:var(--accent);font-size:1.2rem;margin-bottom:.35em;letter-spacing:-.01em}
.tcm-seite .tcm-karte p{font-size:1.02rem;color:var(--dim);margin:0;line-height:1.55}
.tcm-seite .tcm-bg-schwarz .tcm-karte{background:#1d1d1f;border-color:rgba(255,255,255,.14)}
.tcm-seite .tcm-bg-schwarz .tcm-karte h3{color:var(--accent-hell)}

/* Galerie */
.tcm-seite .tcm-galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tcm-seite .tcm-galerie figure{margin:0;border-radius:18px;overflow:hidden;background:var(--grau)}
.tcm-seite .tcm-galerie figure.tcm-breit{grid-column:span 2}
.tcm-seite .tcm-galerie img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .7s cubic-bezier(.16,.7,.3,1)}
.tcm-seite .tcm-galerie figure.tcm-breit img{aspect-ratio:8/3}
.tcm-seite .tcm-galerie figure:hover img{transform:scale(1.05)}

@media (max-width:860px){
  .tcm-seite .tcm-duo{grid-template-columns:1fr}
  .tcm-seite .tcm-duo.tcm-rev .tcm-duo-txt{order:0}
  .tcm-seite .tcm-karten.tcm-sp-3,
  .tcm-seite .tcm-karten.tcm-sp-4{grid-template-columns:repeat(2,1fr)}
  .tcm-seite .tcm-galerie{grid-template-columns:repeat(2,1fr);gap:10px}
  .tcm-seite .tcm-galerie figure.tcm-breit img{aspect-ratio:16/9}
  .tcm-seite .tcm-fb{min-height:66vh}
}
@media (max-width:560px){
  .tcm-seite .tcm-karten.tcm-sp-2,
  .tcm-seite .tcm-karten.tcm-sp-3,
  .tcm-seite .tcm-karten.tcm-sp-4{grid-template-columns:1fr}
  .tcm-seite .tcm-galerie{grid-template-columns:1fr}
  .tcm-seite .tcm-galerie figure.tcm-breit{grid-column:span 1}
  .tcm-seite .tcm-galerie figure.tcm-breit img{aspect-ratio:4/3}
}

/* ---- Seitenanfang ---- */
.tcm-seite .tcm-hero{
  position:relative;background:#000;color:#fff;overflow:hidden;
  min-height:var(--tcm-bhoehe,88vh);
  display:grid;place-items:center;text-align:center;padding:120px 22px 90px;
}
.tcm-seite .tcm-hero-bg{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;
  object-position:var(--tcm-bpx,50%) var(--tcm-bpy,55%);
  opacity:.9;pointer-events:none;
}
.tcm-seite .tcm-hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.1) 38%,rgba(0,0,0,.85) 100%)}
.tcm-seite .tcm-hero-inner{position:relative;z-index:2;max-width:900px;margin:0 auto}
.tcm-seite .tcm-hero-inner .tcm-eyebrow{color:var(--accent-hell);letter-spacing:.02em}
.tcm-seite .tcm-hero h1{
  color:#fff;font-size:clamp(2.4rem,7vw,5.4rem);letter-spacing:-.04em;
  line-height:1.03;margin:.22em 0 .3em;font-weight:600;
}
.tcm-seite .tcm-hero p{color:#e8e8ec;font-size:clamp(1.1rem,2vw,1.45rem);
  max-width:32ch;margin:0 auto 2em;line-height:1.35}
.tcm-seite .tcm-hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.tcm-seite .tcm-btn-hell{
  background:transparent !important;border:1px solid rgba(255,255,255,.55) !important;color:#fff !important;
}
.tcm-seite .tcm-btn-hell:hover{background:rgba(255,255,255,.14) !important;color:#fff !important}
.tcm-seite .tcm-eyebrow-hell{color:var(--accent-hell)}

/* ---- Varianten ---- */
.tcm-seite .tcm-varianten{display:grid;gap:26px}
.tcm-seite .tcm-variante{
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);
  overflow:hidden;display:grid;grid-template-columns:1fr 1.15fr;
}
.tcm-seite .tcm-variante img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
.tcm-seite .tcm-v-body{padding:clamp(28px,3.2vw,44px)}
.tcm-seite .tcm-v-tag{
  display:inline-block;background:var(--grau);border-radius:980px;padding:.25em .9em;
  font-size:.85rem;font-weight:500;color:var(--dim);margin-bottom:.9em;
}
.tcm-seite .tcm-v-body h3{font-size:clamp(1.3rem,2.3vw,1.8rem);margin-bottom:.35em;letter-spacing:-.02em}
.tcm-seite .tcm-v-body p{font-size:1.05rem;color:var(--dim);margin-bottom:1em}
.tcm-seite .tcm-v-body ul{list-style:none;display:grid;gap:8px;margin:.8em 0 1.2em}
.tcm-seite .tcm-v-body li{font-size:1.02rem;color:var(--dim);display:flex;gap:.5em}
.tcm-seite .tcm-v-body li::before{content:"\2022";color:var(--accent)}
.tcm-seite .tcm-v-code{font-size:.85rem;color:var(--dim);letter-spacing:.04em;margin:0}
.tcm-seite .tcm-v-code a{color:var(--accent);font-weight:500}
.tcm-seite .tcm-bg-schwarz .tcm-variante{background:#1d1d1f;border-color:rgba(255,255,255,.14)}

/* ---- Technische Daten ---- */
.tcm-seite .tcm-tab-titel{font-size:clamp(1.9rem,4.2vw,3rem);margin-bottom:.5em;letter-spacing:-.03em}
.tcm-seite .tcm-tabelle{width:100%;border-collapse:collapse;font-size:1.05rem}
.tcm-seite .tcm-tabelle th,
.tcm-seite .tcm-tabelle td{text-align:left;padding:16px 4px;border-bottom:1px solid var(--linie);vertical-align:top}
.tcm-seite .tcm-tabelle th{font-weight:600;width:52%}
.tcm-seite .tcm-tabelle td{color:var(--dim)}
.tcm-seite .tcm-bg-schwarz .tcm-tabelle th,
.tcm-seite .tcm-bg-schwarz .tcm-tabelle td{border-color:rgba(255,255,255,.14)}
.tcm-seite .tcm-bg-schwarz .tcm-tabelle td{color:#a1a1a6}
.tcm-seite .tcm-tab-fuss{font-size:.96rem;color:var(--dim);margin-top:1.4em}

/* ---- Häufige Fragen ---- */
.tcm-seite .tcm-faq-titel{font-size:clamp(1.9rem,4.2vw,3rem);margin-bottom:.6em;letter-spacing:-.03em}

@media (max-width:860px){
  .tcm-seite .tcm-variante{grid-template-columns:1fr}
  .tcm-seite .tcm-hero{min-height:70vh}
}

/* ---- Modell-Kopf (Karussell + Text) ---- */
.tcm-seite .tcm-mk{padding:38px 0 clamp(50px,7vw,80px)}
.tcm-seite .tcm-mk-grid{
  display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(32px,4vw,48px);align-items:center;
  max-width:1180px;
}
.tcm-seite .tcm-mk-text h1{
  font-size:clamp(2.1rem,5vw,3.6rem);letter-spacing:-.035em;line-height:1.05;
  margin:.15em 0 .3em;font-weight:600;
}
.tcm-seite .tcm-mk-text .tcm-code{margin-bottom:.2em}
.tcm-seite .tcm-mk-text .tcm-lead{font-size:1.15rem;color:var(--dim);margin:1em 0 1.4em;line-height:1.5}
.tcm-seite .tcm-facts{
  list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin:0 0 1.8em;
}
.tcm-seite .tcm-facts li{display:flex;flex-direction:column;gap:2px}
.tcm-seite .tcm-facts li b{font-size:1.25rem;font-weight:600;letter-spacing:-.02em;color:var(--accent)}
.tcm-seite .tcm-facts li span{font-size:.9rem;color:var(--dim)}
.tcm-seite .tcm-mk-bilder .tcm-car{aspect-ratio:4/3}

@media (max-width:900px){
  .tcm-seite .tcm-mk-grid{grid-template-columns:1fr;gap:28px}
}
@media (max-width:560px){
  .tcm-seite .tcm-facts{grid-template-columns:1fr 1fr}
}

/* ---- Preise im Konfigurator ---- */
.tcm-seite .tcm-preis{display:block;margin-top:.3em;font-weight:600;color:var(--accent)}
.tcm-seite .tcm-preisblock{
  border-top:1px solid var(--linie);margin:0 0 1.2em;padding-top:1.1em;
}
.tcm-seite .tcm-preis-zeile{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
}
.tcm-seite .tcm-preis-zeile span{font-size:.92rem;color:var(--dim)}
.tcm-seite .tcm-preis-summe{
  font-size:1.5rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);
}
.tcm-seite .tcm-preis-steuer{font-size:.82rem;color:var(--dim);margin-top:.25em}
.tcm-seite .tcm-preis-mwst{font-weight:600}
.tcm-seite .tcm-preis-hinweis{
  font-size:.78rem;color:var(--dim);margin-top:.8em;line-height:1.45;
}

/* In der dunklen Vollbreite-Ansicht */
.tcm-cfgsec.tcm-voll .tcm-preisblock{border-color:rgba(255,255,255,.16)}
.tcm-cfgsec.tcm-voll .tcm-preis-summe{color:#fff}
.tcm-cfgsec.tcm-voll .tcm-preis-zeile span,
.tcm-cfgsec.tcm-voll .tcm-preis-steuer,
.tcm-cfgsec.tcm-voll .tcm-preis-hinweis{color:#9a9aa0}

/* ============================================================
   LANDINGPAGE-BAUSTEINE
   ============================================================ */

/* ---- LP-Anfang ---- */
.tcm-seite .tcm-lphero{
  position:relative;background:#000;color:#f5f5f7;text-align:center;overflow:hidden;
  min-height:var(--tcm-bhoehe,88vh);
  display:grid;align-content:center;
  padding:clamp(64px,9vw,100px) 0 clamp(180px,26vw,340px);
}
.tcm-seite .tcm-lphero picture,
.tcm-seite .tcm-hero picture{position:absolute;inset:0;z-index:0;display:block}
.tcm-seite .tcm-lphero-bg{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;
  object-position:var(--tcm-bpx,50%) var(--tcm-bpy,55%);
  -webkit-mask-image:linear-gradient(#000 40%,transparent 96%);
  mask-image:linear-gradient(#000 40%,transparent 96%);opacity:.9;pointer-events:none;
}
.tcm-seite .tcm-lphero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.15) 30%,rgba(0,0,0,.75) 100%)}
.tcm-seite .tcm-lphero-inner{position:relative;z-index:2;max-width:820px;margin:0 auto;padding:0 22px}
.tcm-seite .tcm-lphero-inner .tcm-eyebrow{color:var(--accent-hell)}
.tcm-seite .tcm-lphero h1{
  color:#fff;font-size:clamp(2.5rem,7vw,5.2rem);letter-spacing:-.035em;
  line-height:1.04;margin:.18em 0 .32em;font-weight:600;
}
.tcm-seite .tcm-lphero-sub{
  color:#e6e6ea;font-size:clamp(1.15rem,2.1vw,1.5rem);max-width:34ch;margin:0 auto 1.7em;line-height:1.35;
}
.tcm-seite .tcm-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:.2em 0 1.9em}
.tcm-seite .tcm-chips span{
  border:1px solid rgba(255,255,255,.38);border-radius:980px;padding:.34em 1em;
  font-size:.9rem;font-weight:500;color:#f5f5f7;
}
.tcm-seite .tcm-lphero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.tcm-seite .tcm-btn-gross{font-size:1.2rem;padding:.82em 1.9em}

/* ---- Kennzahlen-Streifen ---- */
.tcm-seite .tcm-specstreifen{background:#000;color:#f5f5f7}
.tcm-seite .tcm-specstreifen .tcm-wide{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  border-top:1px solid rgba(255,255,255,.14);
}
.tcm-seite .tcm-spec{padding:34px 20px;text-align:center;border-left:1px solid rgba(255,255,255,.14)}
.tcm-seite .tcm-spec:first-child{border-left:0}
.tcm-seite .tcm-spec b{
  display:block;font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:600;
  letter-spacing:-.03em;color:#f5f5f7;
}
.tcm-seite .tcm-spec b em{font-style:normal;color:var(--accent-hell)}
.tcm-seite .tcm-spec span{font-size:.92rem;color:#a1a1a6}

/* ---- Problem & Lösung ---- */
.tcm-seite .tcm-split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.tcm-seite .tcm-pains{list-style:none;display:grid;gap:18px;margin:0}
.tcm-seite .tcm-pains li{display:flex;gap:.65em;font-size:1.18rem;color:var(--ink);line-height:1.45}
.tcm-seite .tcm-pains li::before{content:"\2715";color:var(--accent);font-weight:700;flex:0 0 auto}
.tcm-seite .tcm-panel{
  background:#1d1d1f;color:#f5f5f7;border-radius:var(--radius);padding:clamp(30px,4vw,50px);
}
.tcm-seite .tcm-panel h3{color:#fff;font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:.5em;letter-spacing:-.02em}
.tcm-seite .tcm-panel p{color:#a1a1a6;font-size:1.08rem;margin-bottom:0}
.tcm-seite .tcm-panel-chk{list-style:none;margin:1.5em 0 0;display:grid;gap:14px}
.tcm-seite .tcm-panel-chk li{display:flex;gap:.55em;font-size:1.04rem;color:#e9e9ec;line-height:1.45}
.tcm-seite .tcm-panel-chk li::before{content:"\2713";color:var(--accent-hell);font-weight:800;flex:0 0 auto}

/* ---- Vorteile ---- */
.tcm-seite .tcm-vorteile{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px;text-align:center;
}
.tcm-seite .tcm-vorteil b{display:block;font-size:1.45rem;font-weight:600;margin-bottom:.35em;letter-spacing:-.02em}
.tcm-seite .tcm-vorteil p{color:var(--dim);font-size:1.04rem;margin:0;line-height:1.55}
.tcm-seite .tcm-bg-schwarz .tcm-vorteil p{color:#a1a1a6}

/* ---- Bild-Kacheln ---- */
.tcm-seite .tcm-bento{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.tcm-seite .tcm-tile{
  background:var(--weiss);border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 0 var(--linie);
}
.tcm-seite .tcm-tile-img{aspect-ratio:16/10;background:var(--grau);overflow:hidden}
.tcm-seite .tcm-tile-img img{width:100%;height:100%;object-fit:cover}
.tcm-seite .tcm-tile-img.tcm-plan{background:#fff}
.tcm-seite .tcm-tile-img.tcm-plan img{object-fit:contain;padding:22px}
.tcm-seite .tcm-tile-t{padding:clamp(26px,3vw,38px)}
.tcm-seite .tcm-tile-k{font-size:.85rem;font-weight:600;color:var(--accent);margin-bottom:.25em}
.tcm-seite .tcm-tile-t h3{font-size:clamp(1.4rem,2.3vw,1.9rem);margin-bottom:.35em;letter-spacing:-.02em}
.tcm-seite .tcm-tile-t p{color:var(--dim);font-size:1.05rem;margin:0;line-height:1.55}
.tcm-seite .tcm-bg-schwarz .tcm-tile{background:#1d1d1f}

/* ---- Vertrauen ---- */
.tcm-seite .tcm-trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px}
.tcm-seite .tcm-tr{
  background:var(--weiss);border-radius:var(--radius);padding:clamp(24px,3vw,32px);text-align:center;
}
.tcm-seite .tcm-tr b{
  display:block;font-size:clamp(1.3rem,2.1vw,1.7rem);font-weight:600;
  letter-spacing:-.025em;line-height:1.15;margin-bottom:.45em;
}
.tcm-seite .tcm-tr span{display:block;font-size:.96rem;color:var(--dim);line-height:1.4}
.tcm-seite .tcm-bg-schwarz .tcm-tr{background:#1d1d1f}
.tcm-seite .tcm-bg-schwarz .tcm-tr span{color:#a1a1a6}

/* ---- Video ---- */
.tcm-seite .tcm-videoblock{max-width:1000px;margin:0 auto}
.tcm-seite .tcm-videoframe{
  position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;background:#000;
}
.tcm-seite .tcm-videoframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

@media (max-width:860px){
  .tcm-seite .tcm-split,.tcm-seite .tcm-bento{grid-template-columns:1fr}
}

/* ---- Varianten mit mehreren Bildern ---- */
.tcm-seite .tcm-v-bilder{
  position:relative;overflow:hidden;background:var(--grau);aspect-ratio:4/3;
}
.tcm-seite .tcm-v-bilder .tcm-mc-track{display:flex;height:100%;
  transition:transform .45s cubic-bezier(.16,.72,.24,1)}
.tcm-seite .tcm-v-bilder img{min-width:100%;height:100%;object-fit:cover}
.tcm-seite .tcm-v-bilder.tcm-plan{background:#fff}
.tcm-seite .tcm-v-bilder.tcm-plan img{object-fit:contain;padding:18px}
.tcm-seite .tcm-v-bilder:hover .tcm-mc-nav{display:grid}


/* ---- Eigenes Bild für Handys ---- */
/* Ist ein Handybild hinterlegt, ist es bereits passend zugeschnitten.
   Der Ausschnitt-Regler wird dort deshalb auf Mitte gesetzt. */
@media (max-width:767px){
  .tcm-seite .tcm-hat-handybild .tcm-lphero-bg,
  .tcm-seite .tcm-hat-handybild .tcm-hero-bg{
    object-position:50% 50%;
  }
}

/* ============================================================
   HANDY: BILD ÜBER DEM TEXT
   Ein Querformat-Foto hinter dem Text verliert auf schmalen
   Bildschirmen links und rechts zu viel. Steht das Bild darüber,
   bleibt das ganze Motiv sichtbar – ohne zweites Bild.
   ============================================================ */
@media (max-width:767px){

  /* --- LP-Anfang und Seitenanfang --- */
  .tcm-seite .tcm-lphero.tcm-handy-oben,
  .tcm-seite .tcm-hero.tcm-handy-oben{
    min-height:0;padding:0 0 clamp(36px,9vw,56px);
    display:block;background:#000;
  }
  .tcm-seite .tcm-lphero.tcm-handy-oben::after,
  .tcm-seite .tcm-hero.tcm-handy-oben::after{display:none}

  .tcm-seite .tcm-lphero.tcm-handy-oben picture,
  .tcm-seite .tcm-hero.tcm-handy-oben picture{position:static}

  .tcm-seite .tcm-lphero.tcm-handy-oben .tcm-lphero-bg,
  .tcm-seite .tcm-hero.tcm-handy-oben .tcm-hero-bg{
    position:static;width:100%;height:auto;
    aspect-ratio:4/3;object-fit:cover;object-position:50% 50%;
    opacity:1;
    -webkit-mask-image:none;mask-image:none;
  }

  .tcm-seite .tcm-lphero.tcm-handy-oben .tcm-lphero-inner,
  .tcm-seite .tcm-hero.tcm-handy-oben .tcm-hero-inner{
    padding-top:clamp(26px,7vw,38px);
  }

  /* --- Vollbild-Moment --- */
  .tcm-seite .tcm-fb.tcm-handy-oben{
    min-height:0;display:block;padding:0 0 clamp(32px,8vw,48px);background:#000;
  }
  .tcm-seite .tcm-fb.tcm-handy-oben::after{display:none}
  .tcm-seite .tcm-fb.tcm-handy-oben .tcm-fb-bg{
    position:static;width:100%;aspect-ratio:4/3;
  }
  .tcm-seite .tcm-fb.tcm-handy-oben .tcm-fb-bg img{object-position:50% 50%}
  .tcm-seite .tcm-fb.tcm-handy-oben .tcm-fb-txt{
    padding:clamp(26px,7vw,38px) 22px 0;
  }

  /* Ist ein eigenes Handybild hinterlegt, darf es sein natürliches
     Verhältnis behalten statt auf 4:3 beschnitten zu werden. */
  .tcm-seite .tcm-hat-handybild.tcm-handy-oben .tcm-lphero-bg,
  .tcm-seite .tcm-hat-handybild.tcm-handy-oben .tcm-hero-bg{
    aspect-ratio:auto;object-fit:contain;background:#000;
  }
  .tcm-seite .tcm-hat-handybild.tcm-handy-oben .tcm-fb-bg{aspect-ratio:auto;background:#000}
  .tcm-seite .tcm-hat-handybild.tcm-handy-oben .tcm-fb-bg img{height:auto;object-fit:contain}
}

/* ---- Schaltflächen bei den Varianten ---- */
.tcm-seite .tcm-v-aktionen{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:1.2em;
}
.tcm-seite .tcm-btn-klein{font-size:1rem;padding:.68em 1.5em}
.tcm-seite .tcm-btn-pdf{
  display:inline-flex;align-items:center;gap:.45em;
  border:1px solid var(--linie);border-radius:980px;
  padding:.62em 1.3em;font-size:.98rem;font-weight:500;color:var(--ink);
  transition:border-color .2s ease,color .2s ease;
}
.tcm-seite .tcm-btn-pdf::before{content:"\2193";font-weight:700;color:var(--accent)}
.tcm-seite .tcm-btn-pdf:hover{border-color:var(--accent);color:var(--accent)}
.tcm-seite .tcm-bg-schwarz .tcm-btn-pdf{border-color:rgba(255,255,255,.28);color:#f5f5f7}
.tcm-seite .tcm-bg-schwarz .tcm-btn-pdf:hover{border-color:var(--accent-hell);color:var(--accent-hell)}
.tcm-seite .tcm-v-code{margin-bottom:0}

/* ============================================================
   LANGE WÖRTER UMBRECHEN
   Deutsche Komposita wie "Ausstattungsversionen" oder
   "Twistlock-Verriegelung" passen auf schmalen Bildschirmen nicht
   in eine Zeile. Ohne Trennregel laufen sie aus dem Bild heraus.
   ============================================================ */
.tcm-seite h1,
.tcm-seite h2,
.tcm-seite h3,
.tcm-seite h4,
.tcm-seite p,
.tcm-seite li,
.tcm-seite summary,
.tcm-seite .tcm-name,
.tcm-seite .tcm-big{
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:auto;
  -webkit-hyphens:auto;
}

/* Nichts darf waagerecht über den Rand hinausragen */
.tcm-seite{overflow-x:clip}
.tcm-seite .tcm-wrap,
.tcm-seite .tcm-wide,
.tcm-seite .tcm-karten-kopf,
.tcm-seite .tcm-sec-head{max-width:100%;box-sizing:border-box}

/* Auf schmalen Bildschirmen dürfen Überschriften kleiner werden,
   damit lange Wörter gar nicht erst umbrechen müssen. */
@media (max-width:520px){
  .tcm-seite .tcm-karten-kopf h2,
  .tcm-seite .tcm-sec-head h2,
  .tcm-seite .tcm-faq-titel,
  .tcm-seite .tcm-tab-titel{font-size:clamp(1.5rem,7vw,2rem)}
  .tcm-seite .tcm-big{font-size:clamp(2rem,11vw,3rem)}
  .tcm-seite .tcm-lphero h1,
  .tcm-seite .tcm-hero h1{font-size:clamp(2rem,10vw,3rem)}
}

/* ---- Modell-Kopf: technische Zeichnungen vollständig zeigen ---- */
.tcm-seite .tcm-mk-bilder.tcm-plan .tcm-car{background:#fff}
.tcm-seite .tcm-mk-bilder.tcm-plan .tcm-slide img{
  object-fit:contain;padding:14px;background:#fff;
}
.tcm-seite .tcm-mk-bilder.tcm-plan .tcm-thumbs img{object-fit:contain;background:#fff;padding:3px}

/* ---- Waagerechten Überlauf sicher verhindern ---- */
.tcm-seite .tcm-car,
.tcm-seite .tcm-car-track,
.tcm-seite .tcm-mc-car,
.tcm-seite .tcm-mc-track,
.tcm-seite .tcm-v-bilder{max-width:100%}
.tcm-seite .tcm-thumbs{
  max-width:100%;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.tcm-seite .tcm-mk-grid,
.tcm-seite .tcm-mk-bilder,
.tcm-seite .tcm-mk-text{min-width:0}
.tcm-seite .tcm-cfg-grid,
.tcm-seite .tcm-groups,
.tcm-seite .tcm-cards,
.tcm-seite .tcm-card{min-width:0}

/* ============================================================
   BESTANDSFAHRZEUGE
   ------------------------------------------------------------
   Eigener Namensraum .tcb-seite, damit sich nichts mit den
   Modellseiten (.tcm-seite) oder Landingpages beisst.
   Weiss als Grundton, dazwischen dunkle Bloecke als Zaesur.
   ============================================================ */
.tcb-seite{
  --weiss:#fff; --grau:#f5f4f2; --sand:#eceae6;
  --ink:#1c1917; --dim:#6f6862; --dim-hell:#9a938c;
  --nacht:#16130f;
  --orange:#e8621e; --orange-hell:#ff7a3d;
  --linie:rgba(28,25,23,.12);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --display:'Oswald',var(--font);
  font-family:var(--font);line-height:1.6;color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.tcb-seite *{margin:0;padding:0;box-sizing:border-box}
.tcb-seite a{color:inherit;text-decoration:none}
.tcb-seite img{max-width:100%;display:block}
.tcb-breit{max-width:1240px;margin:0 auto;padding:0 24px}
.tcb-seite h1,.tcb-seite h2,.tcb-seite h3,.tcb-seite .tcb-num{
  font-family:var(--display);font-weight:600;
  text-transform:uppercase;letter-spacing:.01em;line-height:.98;
}

/* --- 1 Seitenanfang --- */
.tcb-kopf{position:relative;min-height:80vh;display:grid;align-items:end;overflow:hidden;background:var(--nacht)}
.tcb-kopf-mittel{min-height:56vh}
.tcb-kopf-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%}
.tcb-kopf::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(22,19,15,.5) 0%,rgba(22,19,15,.2) 35%,rgba(22,19,15,.9) 100%)}
.tcb-kopf-inner{position:relative;z-index:2;padding-bottom:clamp(48px,8vw,92px)}
.tcb-kopf h1{font-size:clamp(2.8rem,8vw,6.6rem);color:#fff;max-width:16ch}
.tcb-kopf h1 em{font-style:normal;color:var(--orange-hell)}
.tcb-kopf p{margin-top:1.1em;font-size:clamp(1.08rem,1.9vw,1.35rem);color:#e4ded6;max-width:46ch}
.tcb-marke{
  display:inline-flex;align-items:center;gap:.6em;margin-bottom:1.3em;
  font-family:var(--display);font-size:.88rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--orange-hell);
}
.tcb-marke::before{content:"";width:34px;height:2px;background:var(--orange)}

/* --- 2 Anzeigetafel --- */
.tcb-tafel{padding:clamp(48px,7vw,84px) 0;background:var(--grau)}
.tcb-tafel-satz{
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.5rem,4vw,2.9rem);color:var(--ink);
  line-height:1.06;max-width:20ch;margin-bottom:clamp(28px,4vw,44px);
}
.tcb-tafel-satz em{font-style:normal;color:var(--orange)}
.tcb-stand{display:grid;grid-template-columns:repeat(var(--tcb-spalten,2),1fr);
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.tcb-stand div{padding:clamp(22px,3vw,32px) 0;border-left:1px solid var(--linie);padding-left:clamp(20px,3vw,34px)}
.tcb-stand div:first-child{border-left:0;padding-left:0}
.tcb-stand b{display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(2.2rem,5.5vw,3.6rem);color:var(--orange);line-height:1}
.tcb-stand b.klein{font-size:clamp(1.15rem,2.4vw,1.7rem);color:var(--ink)}
.tcb-stand span{display:block;margin-top:.7em;font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim)}

/* --- 3 Baureihe --- */
.tcb-reihe{padding:clamp(56px,8vw,92px) 0 0;background:var(--weiss);border-top:1px solid var(--linie)}
.tcb-reihe-kopf{display:flex;align-items:baseline;gap:clamp(16px,3vw,28px);flex-wrap:wrap}
.tcb-reihe-kopf h2{font-size:clamp(2rem,5.5vw,4rem);color:var(--ink);line-height:.95}
.tcb-reihe-kopf span{
  font-family:var(--font);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--orange);border:1px solid rgba(232,98,30,.45);border-radius:2px;padding:.4em .9em;
}
.tcb-reihe-kopf span.leer{color:var(--dim);border-color:var(--linie)}
.tcb-reihe-satz{margin-top:1em;color:var(--dim);font-size:1.05rem;max-width:52ch;line-height:1.7}
.tcb-leer{margin-top:clamp(26px,4vw,38px);padding:clamp(28px,4vw,44px);
  border:1px dashed var(--linie);border-radius:3px;background:var(--grau)}
.tcb-leer p{color:var(--dim);font-size:1.05rem;line-height:1.7;max-width:52ch;margin-bottom:1.4em}

/* --- 4 Fahrzeug --- */
.tcb-band{position:relative;padding:clamp(42px,6vw,76px) 0;background:var(--weiss)}

/* Darstellung "Bis zum Rand": Das Bild laeuft bis zur aeusseren
   Bildschirmkante durch, der Text bleibt in der Seitenflucht.
   Bewusst ohne 100vw an der Breite – nur der Innenabstand des
   Textes rechnet mit vw, dort ist eine Abweichung durch die
   Bildlaufleiste folgenlos. */
.tcb-rand .tcb-band-inner{max-width:none;padding:0;gap:clamp(26px,4vw,56px)}
.tcb-rand .tcb-foto{aspect-ratio:3/2;border-radius:0 4px 4px 0}
.tcb-rand .tcb-angaben{
  padding-right:clamp(24px, calc((100vw - 1192px) / 2 + 24px), 30vw);
  padding-left:0;
}
.tcb-rand.tcb-gedreht .tcb-foto{border-radius:4px 0 0 4px}
.tcb-rand.tcb-gedreht .tcb-angaben{
  padding-left:clamp(24px, calc((100vw - 1192px) / 2 + 24px), 30vw);
  padding-right:0;
}

/* Darstellung "Ganze Breite": Bild oben ueber alles, Text darunter */
.tcb-voll .tcb-band-inner{display:block;padding:0;max-width:none}
.tcb-voll .tcb-foto{aspect-ratio:21/9;border-radius:0;margin-bottom:clamp(26px,4vw,44px)}
.tcb-voll .tcb-angaben{max-width:1240px;margin:0 auto;padding:0 24px}
.tcb-voll .tcb-satz{max-width:58ch}

/* Weicher Verlauf am unteren Bildrand – gibt Tiefe, ohne dass
   das Motiv leidet. */
.tcb-foto::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(180deg,rgba(22,19,15,0) 0%,rgba(22,19,15,.28) 100%);
  pointer-events:none;
}
.tcb-raster .tcb-foto::after{height:26%;opacity:.7}
.tcb-band-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,68px);align-items:center}
.tcb-gedreht .tcb-band-inner{grid-template-columns:.85fr 1.15fr}
.tcb-gedreht .tcb-foto{order:2}
.tcb-gedreht .tcb-angaben{order:1}
.tcb-foto{position:relative;border-radius:4px;overflow:hidden;background:var(--sand);aspect-ratio:4/3}
.tcb-foto img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,.7,.3,1)}
.tcb-band:hover .tcb-foto img{transform:scale(1.03)}
.tcb-num{
  font-size:clamp(2.4rem,6vw,4.4rem);letter-spacing:-.01em;
  color:transparent;-webkit-text-stroke:1.5px rgba(28,25,23,.22);margin-bottom:.14em;
}
.tcb-modell{font-family:var(--display);font-size:clamp(1.7rem,3.4vw,2.6rem);
  text-transform:uppercase;color:var(--ink);line-height:1.02;margin-bottom:.5em}
.tcb-satz{font-size:clamp(1.02rem,1.7vw,1.18rem);color:var(--dim);line-height:1.7;max-width:46ch}
.tcb-fakten{display:flex;flex-wrap:wrap;margin:clamp(24px,3vw,32px) 0 0;border-top:1px solid var(--linie)}
.tcb-fakten div{padding:18px 26px 18px 0;margin-right:26px;border-right:1px solid var(--linie)}
.tcb-fakten div:last-child{border-right:0;margin-right:0}
.tcb-fakten dt{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim-hell);margin-bottom:.45em}
.tcb-fakten dd{font-family:var(--display);font-size:clamp(1.15rem,2vw,1.5rem);color:var(--ink)}
.tcb-fakten dd.preis{color:var(--orange)}
.tcb-rate{display:block;font-family:var(--font);font-size:.85rem;color:var(--dim);margin-top:.35em;text-transform:none}
.tcb-schild{
  position:absolute;top:16px;left:16px;z-index:2;
  font-family:var(--display);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  background:var(--orange);color:#fff;padding:.5em 1em;border-radius:2px;
}
.tcb-schild.wartet{background:rgba(28,25,23,.85)}

/* --- Schaltflaechen --- */
.tcb-aktion{margin-top:clamp(24px,3.5vw,34px);display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
.tcb-cta{
  display:inline-flex;align-items:center;gap:.5em;
  background:var(--orange)!important;color:#fff!important;border:0!important;border-radius:2px;
  padding:.92em 1.9em;font-family:var(--display);font-size:1rem;
  text-transform:uppercase;letter-spacing:.06em;cursor:pointer;
  background-image:none!important;box-shadow:none!important;
  transition:background .2s ease,transform .2s ease;
}
.tcb-cta:hover{background:var(--orange-hell)!important;transform:translateY(-1px)}
.tcb-cta:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.tcb-zweit{color:var(--dim);font-size:.95rem;border-bottom:1px solid var(--linie);padding-bottom:2px}
.tcb-zweit:hover{color:var(--ink);border-color:var(--orange)}

/* --- 5 Textabschnitt (dunkel) --- */
.tcb-text{padding:clamp(64px,9vw,110px) 0;background:var(--nacht);color:#e8e3dc}
.tcb-text-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px)}
.tcb-text h2{font-size:clamp(1.7rem,3.6vw,2.7rem);color:#fff;margin-bottom:.6em;line-height:1.05}
.tcb-text h3{font-family:var(--display);font-size:clamp(1.05rem,1.9vw,1.3rem);
  text-transform:uppercase;color:var(--orange-hell);margin:1.8em 0 .7em;letter-spacing:.03em}
.tcb-text > .tcb-breit > .tcb-text-grid > div > h3:first-child{margin-top:0}
.tcb-text p{color:#c8c1b8;font-size:1.05rem;line-height:1.8;margin-bottom:1.1em}
.tcb-text p:last-child{margin-bottom:0}
.tcb-text a{color:var(--orange-hell);border-bottom:1px solid rgba(255,122,61,.4)}
.tcb-text a:hover{border-color:var(--orange-hell)}

/* --- Bewegung --- */
.tcb-bereit .tcb-auf{opacity:0;transform:translateY(32px);
  transition:opacity .9s cubic-bezier(.16,.7,.3,1),transform .9s cubic-bezier(.16,.7,.3,1)}
.tcb-bereit .tcb-auf.da{opacity:1;transform:none}

/* Aus welcher Richtung ein Teil hereinkommt. Beim Fahrzeugband
   kommen Bild und Text aus entgegengesetzten Richtungen – das
   betont den Wechsel von Seite zu Seite. */
.tcb-bereit .tcb-auf.tcb-links{transform:translate3d(-46px,18px,0)}
.tcb-bereit .tcb-auf.tcb-rechts{transform:translate3d(46px,18px,0)}
.tcb-bereit .tcb-auf.tcb-links.da,
.tcb-bereit .tcb-auf.tcb-rechts.da{transform:none}

/* Etwas spaeter als das Nachbarelement */
.tcb-bereit .tcb-auf.tcb-spaet{transition-delay:.14s}

/* Versetztes Erscheinen der Kinder, etwa bei den Feldern der
   Anzeigetafel. Reine CSS-Loesung, das Script setzt nur .da. */
.tcb-bereit .tcb-staffel > *{
  opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.16,.7,.3,1),transform .7s cubic-bezier(.16,.7,.3,1);
}
.tcb-bereit .tcb-staffel.da > *{opacity:1;transform:none}
.tcb-bereit .tcb-staffel.da > *:nth-child(1){transition-delay:.06s}
.tcb-bereit .tcb-staffel.da > *:nth-child(2){transition-delay:.16s}
.tcb-bereit .tcb-staffel.da > *:nth-child(3){transition-delay:.26s}
.tcb-bereit .tcb-staffel.da > *:nth-child(4){transition-delay:.36s}

/* Die Kommissionsnummer setzt sich wie ein Stempel auf. */
.tcb-bereit .tcb-num.tcb-stempel{
  opacity:0;transform:scale(1.06);
  transition:opacity .8s ease .22s,transform .8s cubic-bezier(.16,.7,.3,1) .22s;
}
.tcb-bereit .tcb-angaben.da .tcb-num.tcb-stempel{opacity:1;transform:none}

/* Das Bild im Seitenanfang wandert beim Scrollen langsamer als
   die Seite. Der Wert kommt aus dem Script. */
.tcb-kopf-bild{will-change:transform}

/* Bild im Fahrzeugband zieht beim Erscheinen leicht auf */
.tcb-bereit .tcb-foto.tcb-auf img{transform:scale(1.06);
  transition:transform 1.2s cubic-bezier(.16,.7,.3,1)}
.tcb-bereit .tcb-foto.tcb-auf.da img{transform:none}

/* --- Klein --- */
@media (max-width:900px){
  .tcb-band-inner,.tcb-gedreht .tcb-band-inner{grid-template-columns:1fr;gap:26px}
  .tcb-gedreht .tcb-foto,.tcb-gedreht .tcb-angaben{order:initial}
  /* Auf dem Handy laeuft das Bild immer bis zum Rand, der Text
     bekommt wieder seinen normalen Abstand. */
  .tcb-rand .tcb-foto,.tcb-voll .tcb-foto{aspect-ratio:4/3;border-radius:0}
  .tcb-rand .tcb-angaben,.tcb-rand.tcb-gedreht .tcb-angaben{padding:0 24px}
  .tcb-voll .tcb-angaben{padding:0 24px}
  .tcb-text-grid{grid-template-columns:1fr}
  .tcb-kopf{min-height:72vh}
}
@media (max-width:700px){
  .tcb-stand{grid-template-columns:1fr}
  .tcb-stand div{border-left:0;padding-left:0;border-top:1px solid var(--linie)}
  .tcb-stand div:first-child{border-top:0}
}
@media (max-width:600px){
  .tcb-fakten div{padding-right:18px;margin-right:18px}
  .tcb-num{-webkit-text-stroke-width:1px}
}
@media (prefers-reduced-motion:reduce){
  .tcb-bereit .tcb-auf,
  .tcb-bereit .tcb-auf.tcb-links,
  .tcb-bereit .tcb-auf.tcb-rechts,
  .tcb-bereit .tcb-num.tcb-stempel,
  .tcb-bereit .tcb-staffel > *{opacity:1;transform:none;transition:none}
  .tcb-foto img,.tcb-bereit .tcb-foto.tcb-auf img{transform:none;transition:none}
  .tcb-kopf-bild{transform:none!important}
}

/* ============================================================
   MODELLÜBERSICHT
   ------------------------------------------------------------
   Eigener Namensraum .tcu-seite. Fürs Einblenden werden
   bewusst dieselben Klassen wie bei den Bestandsfahrzeugen
   verwendet (tcb-auf), damit es nur eine Stelle im Script gibt.
   ============================================================ */
.tcu-seite{
  --weiss:#fff; --grau:#f5f4f2; --sand:#eceae6;
  --ink:#1c1917; --dim:#6f6862; --dim-hell:#9a938c;
  --nacht:#16130f;
  --orange:#e8621e; --orange-hell:#ff7a3d;
  --linie:rgba(28,25,23,.13);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --display:'Oswald',var(--font);
  font-family:var(--font);line-height:1.6;color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.tcu-seite *{margin:0;padding:0;box-sizing:border-box}
.tcu-seite a{color:inherit;text-decoration:none}
.tcu-seite img{max-width:100%;display:block}
.tcu-breit{max-width:1240px;margin:0 auto;padding:0 24px}
.tcu-seite h1,.tcu-seite h2,.tcu-seite h3{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.01em;line-height:1.02;
}

/* --- 1 Seitenanfang --- */
.tcu-kopf{position:relative;min-height:64vh;display:grid;align-items:end;overflow:hidden;background:var(--nacht)}
.tcu-kopf-mittel{min-height:52vh}
.tcu-kopf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%}
.tcu-kopf::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(22,19,15,.45) 0%,rgba(22,19,15,.2) 40%,rgba(22,19,15,.9) 100%)}
.tcu-kopf-inner{position:relative;z-index:2;padding-bottom:clamp(40px,7vw,80px)}
.tcu-marke{display:inline-flex;align-items:center;gap:.6em;margin-bottom:1.2em;
  font-family:var(--display);font-size:.86rem;letter-spacing:.18em;text-transform:uppercase;color:var(--orange-hell)}
.tcu-marke::before{content:"";width:32px;height:2px;background:var(--orange)}
.tcu-kopf h1{font-size:clamp(2.4rem,6.4vw,5rem);color:#fff;max-width:18ch}
.tcu-kopf h1 em{font-style:normal;color:var(--orange-hell)}
.tcu-kopf p{margin-top:1.1em;font-size:clamp(1.05rem,1.8vw,1.3rem);color:#e4ded6;max-width:52ch}

/* --- 2 Einstieg nach Zweck --- */
.tcu-zweck{padding:clamp(38px,6vw,64px) 0;background:var(--grau);border-bottom:1px solid var(--linie)}
.tcu-zweck h2{font-size:clamp(1.2rem,2.2vw,1.5rem);color:var(--ink);margin-bottom:1em}
.tcu-chips{display:flex;flex-wrap:wrap;gap:10px}
.tcu-chip{border:1px solid var(--linie);background:var(--weiss);border-radius:2px;
  padding:.7em 1.2em;font-size:.95rem;color:var(--ink);
  transition:border-color .18s ease,color .18s ease}
.tcu-chip:hover{border-color:var(--orange);color:var(--orange)}
.tcu-chip:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* --- 3 Gruppenkopf --- */
.tcu-gruppe{padding:clamp(52px,7vw,88px) 0 0;background:var(--weiss);border-top:1px solid var(--linie)}
.tcu-gruppe-kopf{max-width:60ch}
.tcu-gruppe-kopf h2{font-size:clamp(1.7rem,4vw,2.8rem);color:var(--ink);margin-bottom:.45em}
.tcu-gruppe-kopf p{color:var(--dim);font-size:1.05rem;line-height:1.7}

/* --- 4 Modellkarten --- */
.tcu-karten-abschnitt{padding:clamp(26px,4vw,44px) 0 clamp(46px,7vw,80px);background:var(--weiss)}
.tcu-raster{display:grid;grid-template-columns:repeat(var(--tcu-spalten,2),1fr);gap:clamp(20px,3vw,32px)}
.tcu-karte{display:flex;flex-direction:column;background:var(--weiss);
  border:1px solid var(--linie);border-radius:4px;overflow:hidden;
  transition:border-color .2s ease,transform .2s ease}
.tcu-karte:hover{border-color:var(--orange);transform:translateY(-2px)}
.tcu-bild{aspect-ratio:3/2;overflow:hidden;background:var(--sand)}
.tcu-bild img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,.7,.3,1)}
.tcu-karte:hover .tcu-bild img{transform:scale(1.04)}
.tcu-inhalt{padding:clamp(20px,3vw,30px);display:flex;flex-direction:column;flex:1}
.tcu-inhalt h3{font-size:clamp(1.35rem,2.6vw,1.9rem);color:var(--ink);margin-bottom:.3em}
.tcu-claim{color:var(--orange);font-size:.95rem;font-weight:600;margin-bottom:.9em}
.tcu-inhalt p.tcu-text{color:var(--dim);font-size:1rem;line-height:1.7;margin-bottom:1.2em}
.tcu-daten{display:flex;flex-wrap:wrap;margin:auto 0 1.4em;border-top:1px solid var(--linie)}
.tcu-daten div{padding:14px 20px 14px 0;margin-right:20px;border-right:1px solid var(--linie)}
.tcu-daten div:last-child{border-right:0;margin-right:0}
.tcu-daten dt{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim-hell);margin-bottom:.35em}
.tcu-daten dd{font-family:var(--display);font-size:1.15rem;color:var(--ink)}
.tcu-daten dd.preis{color:var(--orange)}
.tcu-aktion{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.tcu-cta{display:inline-flex;align-items:center;
  background:var(--orange)!important;color:#fff!important;border:0!important;border-radius:2px;
  padding:.82em 1.6em;font-family:var(--display);font-size:.95rem;
  text-transform:uppercase;letter-spacing:.06em;cursor:pointer;
  background-image:none!important;box-shadow:none!important;
  transition:background .2s ease}
.tcu-cta:hover{background:var(--orange-hell)!important}
.tcu-cta:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.tcu-zweit{color:var(--dim);font-size:.93rem;border-bottom:1px solid var(--linie);padding-bottom:2px}
.tcu-zweit:hover{color:var(--ink);border-color:var(--orange)}

/* --- 5 Vergleichstabelle --- */
.tcu-vergleich{padding:clamp(52px,8vw,96px) 0;background:var(--grau);border-top:1px solid var(--linie)}
.tcu-vergleich h2{font-size:clamp(1.7rem,3.6vw,2.6rem);color:var(--ink);margin-bottom:.5em}
.tcu-vergleich-text{color:var(--dim);max-width:58ch;margin-bottom:clamp(22px,3vw,34px);line-height:1.7}
.tcu-tab-rahmen{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--linie);border-radius:4px;background:var(--weiss)}
.tcu-tab{width:100%;border-collapse:collapse;min-width:680px;font-size:.96rem}
.tcu-tab th,.tcu-tab td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--linie)}
.tcu-tab thead th{font-family:var(--display);text-transform:uppercase;font-size:.8rem;
  letter-spacing:.08em;color:var(--dim);background:var(--sand)}
.tcu-tab tbody th{font-weight:600;color:var(--ink)}
.tcu-tab tbody th a{border-bottom:1px solid var(--linie)}
.tcu-tab tbody th a:hover{color:var(--orange);border-color:var(--orange)}
.tcu-tab tbody tr:last-child th,.tcu-tab tbody tr:last-child td{border-bottom:0}
.tcu-tab tbody tr:hover{background:var(--grau)}
.tcu-hinweis{margin-top:1.2em;font-size:.88rem;color:var(--dim-hell);max-width:70ch}

/* --- 6 Bildkacheln --- */
.tcu-kacheln-abschnitt{padding:clamp(20px,3vw,34px) 0 clamp(52px,8vw,92px);background:var(--weiss)}
.tcu-kacheln{display:grid;grid-template-columns:repeat(var(--tcu-spalten,3),1fr);gap:clamp(16px,2.4vw,26px)}
.tcu-kachel{position:relative;border-radius:4px;overflow:hidden;aspect-ratio:4/3;background:var(--nacht);display:block}
.tcu-kachel img{width:100%;height:100%;object-fit:cover;opacity:.72;
  transition:opacity .4s ease,transform .8s cubic-bezier(.16,.7,.3,1)}
.tcu-kachel:hover img{opacity:.92;transform:scale(1.04)}
.tcu-kachel:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.tcu-kachel-txt{position:absolute;inset:auto 0 0 0;padding:clamp(16px,2.4vw,24px);
  background:linear-gradient(180deg,rgba(22,19,15,0) 0%,rgba(22,19,15,.85) 100%)}
.tcu-kachel-txt h3{color:#fff;font-size:clamp(1.02rem,2vw,1.3rem);margin-bottom:.2em}
.tcu-kachel-txt span{color:var(--orange-hell);font-size:.88rem}

/* --- Klein --- */
@media (max-width:900px){
  .tcu-raster{grid-template-columns:1fr}
  .tcu-kacheln{grid-template-columns:repeat(2,1fr)}
  .tcu-kopf{min-height:54vh}
}
@media (max-width:600px){
  .tcu-kacheln{grid-template-columns:1fr}
  .tcu-daten div{padding-right:14px;margin-right:14px}
}
@media (prefers-reduced-motion:reduce){
  .tcu-bild img,.tcu-kachel img,.tcu-karte{transition:none}
}