/* =========================================================
   TRAIN MOBIL / MODELLBAHN / WERKSTATT
   Detail Readability Polish 1.2.1
   Nur geöffnete Detailansicht.
   ========================================================= */

.tm-werkstatt-detail.is-open{
  display:block;
  margin-top:0;
  border-top:1px solid #3b4146;
  background:
    linear-gradient(180deg,rgba(255,208,0,.025),rgba(255,208,0,0) 110px),
    #080a0c;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.015);
}

.tm-werkstatt-detail__head{
  padding:44px 48px 32px;
  border-bottom:1px solid #2d3236;
  background:
    linear-gradient(90deg,#101417 0%,#0b0e10 68%,#090b0d 100%);
}

.tm-werkstatt-detail__eyebrow{
  margin:0 0 11px;
  font-size:11px;
  line-height:1.3;
  letter-spacing:.14em;
}

.tm-werkstatt-detail__head h3{
  max-width:980px;
  font-size:clamp(28px,2.45vw,40px);
  line-height:1.04;
}

.tm-werkstatt-detail__date{
  padding-bottom:4px;
  color:#8e969c;
  font-size:11px;
  letter-spacing:.04em;
}

.tm-werkstatt-detail__layout{
  grid-template-columns:minmax(0,1.16fr) minmax(390px,.84fr);
  gap:54px;
  padding:46px 48px 48px;
  align-items:start;
}

.tm-werkstatt-detail__text{
  max-width:840px;
  color:#d6d9db;
  font-size:16px;
  line-height:1.9;
  letter-spacing:.002em;
}

.tm-werkstatt-detail__text br + br{
  display:block;
  content:"";
  margin-top:13px;
}

.tm-werkstatt-gallery{
  position:sticky;
  top:28px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:0;
}

.tm-werkstatt-gallery button{
  border:1px solid #343a3f;
  background:#060809;
  aspect-ratio:4/3;
}

.tm-werkstatt-gallery button:first-child{
  grid-column:1/-1;
  aspect-ratio:16/10;
}

.tm-werkstatt-gallery img{
  object-fit:cover;
}

.tm-werkstatt-detail__foot{
  padding:0 48px 40px;
  border-top:0;
}

.tm-werkstatt-detail__close{
  min-height:32px;
  padding-top:8px;
}

/* Geöffnete Karte stärker als Artikelblock markieren */
.tm-werkstatt-card:has(.tm-werkstatt-detail.is-open){
  border-color:#454b50;
  box-shadow:0 0 0 1px rgba(255,208,0,.025);
}

/* Desktop: Lead-Card bei geöffnetem Detail nicht optisch zerreißen */
.tm-werkstatt-card--lead:has(.tm-werkstatt-detail.is-open){
  grid-template-columns:minmax(0,1.28fr) minmax(380px,.72fr);
}

/* Tablet */
@media(max-width:1100px){
  .tm-werkstatt-detail__layout{
    grid-template-columns:minmax(0,1fr) minmax(320px,.72fr);
    gap:36px;
  }

  .tm-werkstatt-detail__text{
    font-size:15.5px;
    line-height:1.82;
  }
}

@media(max-width:900px){
  .tm-werkstatt-detail__head{
    padding:34px 30px 27px;
  }

  .tm-werkstatt-detail__layout{
    grid-template-columns:1fr;
    gap:34px;
    padding:34px 30px 38px;
  }

  .tm-werkstatt-detail__text{
    max-width:760px;
  }

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

  .tm-werkstatt-gallery button:first-child{
    grid-column:span 2;
    aspect-ratio:16/10;
  }

  .tm-werkstatt-detail__foot{
    padding:0 30px 32px;
  }
}

@media(max-width:640px){
  .tm-werkstatt-detail__head{
    padding:28px 22px 23px;
  }

  .tm-werkstatt-detail__layout{
    padding:28px 22px 32px;
  }

  .tm-werkstatt-detail__text{
    font-size:15px;
    line-height:1.78;
  }

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

  .tm-werkstatt-gallery button:first-child{
    grid-column:1/-1;
  }

  .tm-werkstatt-detail__foot{
    padding:0 22px 28px;
  }
}

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

  .tm-werkstatt-gallery button:first-child{
    grid-column:auto;
  }
}