/* =========================================================
   TRAIN MOBIL / MODELLBAHN / WERKSTATT 1.1
   Nur Contentbereich. Header/Footer bleiben GLOBAL.
   Baseline:
   outer 1534px
   inner 1500px
   border #17191c
   page #050607
   content linear-gradient(90deg,#0d1013,#0a0c0e)
   ========================================================= */

.tm-werkstatt-page{
  background:#050607;
  color:#f5f5f3;
}

.tm-werkstatt-frame{
  width:min(1534px,100%);
  margin:0 auto;
  border-left:1px solid #17191c;
  border-right:1px solid #17191c;
  box-sizing:border-box;
}

.tm-werkstatt-inner{
  width:min(1500px,calc(100% - 32px));
  margin:0 auto;
  box-sizing:border-box;
}

.tm-werkstatt-hero{
  min-height:455px;
  position:relative;
  display:flex;
  align-items:stretch;
  overflow:hidden;
  border-bottom:1px solid #202327;
  background:
    linear-gradient(90deg,rgba(4,5,6,.98) 0%,rgba(4,5,6,.94) 26%,rgba(4,5,6,.72) 48%,rgba(4,5,6,.25) 72%,rgba(4,5,6,.05) 100%),
    var(--tmw-hero),
    linear-gradient(90deg,#0d1013,#0a0c0e);
  background-size:100% 100%,cover,100% 100%;
  background-position:center,center,center;
  background-repeat:no-repeat;
}

.tm-werkstatt-hero__inner{
  min-height:455px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:58px 34px;
}

.tm-werkstatt-kicker,
.tm-werkstatt-intro small,
.tm-werkstatt-next small{
  margin:0 0 18px;
  color:#ffd000;
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
}

.tm-werkstatt-hero h1{
  margin:0;
  max-width:760px;
  font-size:clamp(42px,4.1vw,72px);
  line-height:.94;
  letter-spacing:-.035em;
  font-weight:900;
}

.tm-werkstatt-hero h1 span,
.tm-werkstatt-intro h2 span{
  color:#ffd000;
}

.tm-werkstatt-lead{
  max-width:680px;
  margin:28px 0 0;
  color:#e4e5e6;
  font-size:17px;
  line-height:1.65;
}

.tm-werkstatt-hero__button{
  margin-top:28px;
  padding:14px 18px;
  background:#ffd000;
  color:#050607;
  font-size:12px;
  font-weight:900;
  text-decoration:none;
  letter-spacing:.035em;
}

.tm-werkstatt-content{
  background:linear-gradient(90deg,#0d1013,#0a0c0e);
}

.tm-werkstatt-content > .tm-werkstatt-inner{
  padding:54px 34px 58px;
}

.tm-werkstatt-intro{
  display:grid;
  grid-template-columns:minmax(300px,.78fr) minmax(420px,1.22fr);
  gap:58px;
  align-items:end;
  padding-bottom:34px;
  border-bottom:1px solid #25292d;
}

.tm-werkstatt-intro small{
  display:block;
  margin-bottom:10px;
  color:#8e959c;
}

.tm-werkstatt-intro h2{
  margin:0;
  font-size:clamp(28px,2.6vw,42px);
  line-height:1;
  letter-spacing:-.025em;
}

.tm-werkstatt-intro__copy{
  color:#cdd1d4;
  line-height:1.65;
  font-size:15px;
}

.tm-werkstatt-intro__copy p{
  margin:0 0 12px;
}

.tm-werkstatt-facts{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin:30px 0 42px;
}

.tm-werkstatt-facts article{
  min-height:82px;
  padding:18px 20px;
  border:1px solid #2b3034;
  background:#121619;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.tm-werkstatt-facts strong{
  color:#ffd000;
  font-size:15px;
  margin-bottom:5px;
}

.tm-werkstatt-facts span{
  color:#979ea4;
  font-size:12px;
}

.tm-werkstatt-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.tm-werkstatt-card{
  min-width:0;
  border:1px solid #2a2f33;
  background:#0a0d0f;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr;
}

.tm-werkstatt-card--lead{
  grid-column:1/-1;
  grid-template-columns:minmax(0,1.28fr) minmax(380px,.72fr);
  min-height:370px;
}

.tm-werkstatt-card__image{
  border:0;
  padding:0;
  margin:0;
  width:100%;
  min-height:260px;
  background:#07090a;
  overflow:hidden;
  cursor:zoom-in;
}

.tm-werkstatt-card--lead .tm-werkstatt-card__image{
  min-height:370px;
}

.tm-werkstatt-card__image img{
  display:block;
  width:100%;
  height:100%;
  min-height:260px;
  object-fit:cover;
  transition:transform .25s ease;
}

.tm-werkstatt-card__image:hover img{
  transform:scale(1.02);
}

.tm-werkstatt-card__body{
  padding:26px 28px 30px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.tm-werkstatt-card--lead .tm-werkstatt-card__body{
  justify-content:center;
  padding:38px 40px;
}

.tm-werkstatt-card__meta{
  width:100%;
  display:flex;
  justify-content:space-between;
  gap:18px;
  color:#777f86;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.tm-werkstatt-card__meta span{
  color:#ffd000;
  font-weight:800;
}

.tm-werkstatt-card h2{
  margin:12px 0 13px;
  font-size:24px;
  line-height:1.08;
  letter-spacing:-.02em;
}

.tm-werkstatt-card--lead h2{
  font-size:34px;
}

.tm-werkstatt-card__excerpt{
  margin:0;
  color:#bbc0c4;
  font-size:13px;
  line-height:1.6;
}

.tm-werkstatt-more{
  margin-top:22px;
  padding:0;
  border:0;
  background:none;
  color:#ffd000;
  font-size:11px;
  font-weight:900;
  letter-spacing:.03em;
  cursor:pointer;
}

.tm-werkstatt-detail{
  display:none;
  grid-column:1/-1;
  padding:38px 40px 42px;
  border-top:1px solid #292e32;
  background:#080a0c;
}

.tm-werkstatt-detail.is-open{
  display:block;
}

.tm-werkstatt-detail__text{
  max-width:1060px;
  color:#d0d3d5;
  font-size:15px;
  line-height:1.78;
}

.tm-werkstatt-gallery{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:34px;
}

.tm-werkstatt-gallery button{
  border:1px solid #2b3034;
  padding:0;
  background:#07090a;
  aspect-ratio:4/3;
  overflow:hidden;
  cursor:zoom-in;
}

.tm-werkstatt-gallery img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.tm-werkstatt-next{
  margin-top:38px;
  padding:28px 0 4px;
  border-top:1px solid #2a2f33;
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:end;
}

.tm-werkstatt-next small{
  display:block;
  margin:0 0 7px;
  color:#777f86;
}

.tm-werkstatt-next h2{
  margin:0;
  font-size:24px;
}

.tm-werkstatt-next__links{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
}

.tm-werkstatt-next__links a{
  color:#ffd000;
  text-decoration:none;
  font-size:11px;
  font-weight:900;
}

.tm-werkstatt-lightbox[hidden]{
  display:none !important;
}

.tm-werkstatt-lightbox{
  position:fixed;
  inset:0;
  z-index:99999;
  padding:50px;
  background:rgba(0,0,0,.92);
  display:flex;
  align-items:center;
  justify-content:center;
}

.tm-werkstatt-lightbox img{
  max-width:min(1500px,94vw);
  max-height:88vh;
  object-fit:contain;
}

.tm-werkstatt-lightbox__close{
  position:absolute;
  top:20px;
  right:26px;
  border:0;
  background:none;
  color:white;
  font-size:42px;
  cursor:pointer;
}

body.tmw-lightbox-open{
  overflow:hidden;
}

@media(max-width:1000px){
  .tm-werkstatt-intro{
    grid-template-columns:1fr;
    gap:20px;
  }

  .tm-werkstatt-facts{
    grid-template-columns:repeat(2,1fr);
  }

  .tm-werkstatt-card--lead{
    grid-template-columns:1fr;
  }

  .tm-werkstatt-gallery{
    grid-template-columns:repeat(3,1fr);
  }
}

@media(max-width:760px){
  .tm-werkstatt-inner{
    width:100%;
  }

  .tm-werkstatt-hero__inner,
  .tm-werkstatt-content > .tm-werkstatt-inner{
    padding-left:22px;
    padding-right:22px;
  }

  .tm-werkstatt-hero{
    min-height:410px;
  }

  .tm-werkstatt-hero__inner{
    min-height:410px;
  }

  .tm-werkstatt-grid{
    grid-template-columns:1fr;
  }

  .tm-werkstatt-card--lead{
    grid-column:auto;
  }

  .tm-werkstatt-facts,
  .tm-werkstatt-gallery{
    grid-template-columns:repeat(2,1fr);
  }

  .tm-werkstatt-next{
    align-items:flex-start;
    flex-direction:column;
  }
}

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

  .tm-werkstatt-card__body,
  .tm-werkstatt-card--lead .tm-werkstatt-card__body,
  .tm-werkstatt-detail{
    padding-left:20px;
    padding-right:20px;
  }
}