/* =========================================================
   TRAIN MOBIL – Projekt Detail V100 1.0
   ========================================================= */

.tm-pv100-page{background:#050607;color:#f5f5f3}
.tm-pv100-frame{width:min(1534px,100%);margin:0 auto;border-left:1px solid #17191c;border-right:1px solid #17191c;box-sizing:border-box}
.tm-pv100-inner{width:min(1500px,calc(100% - 32px));margin:0 auto;box-sizing:border-box}

.tm-pv100-hero{
  min-height:500px;
  border-bottom:1px solid #202327;
  background:
    linear-gradient(90deg,rgba(3,4,5,.98) 0%,rgba(3,4,5,.94) 25%,rgba(3,4,5,.70) 48%,rgba(3,4,5,.20) 73%,rgba(3,4,5,.04) 100%),
    var(--tm-pv100-hero),
    #0b0e10;
  background-size:100% 100%,cover,100% 100%;
  background-position:center,center,center;
  background-repeat:no-repeat;
}

.tm-pv100-hero__inner{
  min-height:500px;
  padding:64px 34px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}

.tm-pv100-kicker,
.tm-pv100-intro small,
.tm-pv100-section small,
.tm-pv100-video small{
  margin:0 0 15px;
  color:#ffd000;
  font-size:11px;
  font-weight:900;
  letter-spacing:.15em;
}

.tm-pv100-hero h1{
  margin:0;
  max-width:850px;
  font-size:clamp(45px,4.3vw,76px);
  line-height:.94;
  letter-spacing:-.04em;
}

.tm-pv100-hero h1 span{color:#ffd000}

.tm-pv100-lead{
  max-width:690px;
  margin:28px 0 0;
  color:#e1e4e6;
  font-size:17px;
  line-height:1.65;
}

.tm-pv100-meta{
  display:flex;
  gap:24px;
  margin-top:24px;
  color:#a6adb2;
  font-size:11px;
}
.tm-pv100-meta span{color:#ffd000;font-weight:900}

.tm-pv100-content{background:linear-gradient(90deg,#0d1013,#0a0c0e)}
.tm-pv100-content>.tm-pv100-inner{padding:34px 34px 58px}

.tm-pv100-breadcrumb{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:0 0 22px;
  border-bottom:1px solid #282d31;
  color:#7f878d;
  font-size:11px;
}
.tm-pv100-breadcrumb a{color:#ffd000;text-decoration:none;font-weight:900}

.tm-pv100-intro{
  display:grid;
  grid-template-columns:minmax(300px,.75fr) minmax(480px,1.25fr);
  gap:64px;
  padding:52px 0 40px;
  align-items:start;
}
.tm-pv100-intro h2,
.tm-pv100-section h2,
.tm-pv100-video h2{
  margin:0;
  font-size:clamp(29px,2.7vw,44px);
  line-height:1;
  letter-spacing:-.03em;
}
.tm-pv100-intro p,
.tm-pv100-section p,
.tm-pv100-video p{
  margin:0;
  color:#ccd1d4;
  font-size:16px;
  line-height:1.82;
}

.tm-pv100-section{
  padding:54px 0;
  border-top:1px solid #282d31;
}
.tm-pv100-section__copy{
  display:grid;
  grid-template-columns:minmax(300px,.75fr) minmax(480px,1.25fr);
  gap:64px;
  margin-bottom:30px;
}
.tm-pv100-section__copy small{grid-column:1}
.tm-pv100-section__copy h2{grid-column:1}
.tm-pv100-section__copy p{grid-column:2;grid-row:1/4}
.tm-pv100-note{
  grid-column:2;
  margin-top:18px;
  padding:15px 18px;
  border-left:3px solid #ffd000;
  background:#111518;
  color:#f0f1f1;
  font-size:13px;
  line-height:1.6;
}

.tm-pv100-gallery{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.tm-pv100-gallery--two{margin-bottom:54px}
.tm-pv100-gallery--large{grid-template-columns:repeat(4,minmax(0,1fr))}
.tm-pv100-gallery button{
  padding:0;
  border:1px solid #2e3438;
  background:#07090a;
  aspect-ratio:16/10;
  overflow:hidden;
  cursor:zoom-in;
}
.tm-pv100-gallery img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .2s ease;
}
.tm-pv100-gallery button:hover img{transform:scale(1.02)}

.tm-pv100-video{
  margin-top:8px;
  padding:38px 0;
  border-top:1px solid #282d31;
  border-bottom:1px solid #282d31;
  display:flex;
  justify-content:space-between;
  gap:44px;
  align-items:center;
}
.tm-pv100-video>div{max-width:800px}
.tm-pv100-video p{margin-top:14px}
.tm-pv100-video a{
  flex:0 0 auto;
  padding:15px 18px;
  background:#ffd000;
  color:#050607;
  text-decoration:none;
  font-size:11px;
  font-weight:900;
}

.tm-pv100-next{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-top:28px;
}
.tm-pv100-next a{color:#ffd000;text-decoration:none;font-size:11px;font-weight:900}

.tm-pv100-lightbox[hidden]{display:none!important}
.tm-pv100-lightbox{
  position:fixed;
  inset:0;
  z-index:99999;
  padding:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.93);
}
.tm-pv100-lightbox img{max-width:94vw;max-height:88vh;object-fit:contain}
.tm-pv100-lightbox__close{
  position:absolute;right:26px;top:18px;border:0;background:none;color:white;font-size:42px;cursor:pointer
}
body.tm-pv100-lightbox-open{overflow:hidden}

@media(max-width:1000px){
  .tm-pv100-intro,
  .tm-pv100-section__copy{grid-template-columns:1fr;gap:20px}
  .tm-pv100-section__copy small,
  .tm-pv100-section__copy h2,
  .tm-pv100-section__copy p,
  .tm-pv100-note{grid-column:auto;grid-row:auto}
  .tm-pv100-gallery--large{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:760px){
  .tm-pv100-inner{width:100%}
  .tm-pv100-hero__inner,
  .tm-pv100-content>.tm-pv100-inner{padding-left:22px;padding-right:22px}
  .tm-pv100-gallery,
  .tm-pv100-gallery--large{grid-template-columns:repeat(2,1fr)}
  .tm-pv100-video{align-items:flex-start;flex-direction:column}
}

@media(max-width:480px){
  .tm-pv100-gallery,
  .tm-pv100-gallery--large{grid-template-columns:1fr}
}