/* AIT Group, Projekte auf der Startseite (Praefix pw-).
   Passt in ein Bild. Kopf wie alle Sektionen, links die Projektliste mit Beschreibung,
   rechts laeuft die echte Website durch, davor die Handy-Version. Grundlagen in home.css. */
.pw{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;overflow:hidden;
  padding-top:clamp(92px,12vh,128px);padding-bottom:clamp(28px,5vh,56px)}
.pw .sx{margin-bottom:clamp(24px,4.6vh,56px)}
.pw-main{flex:1;min-height:0;display:grid;grid-template-columns:var(--cols);column-gap:var(--col-gap)}

/* Linke Spalte: Projektliste oben, Beschreibung unten */
.pw-col{grid-column:1;display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-width:0}
.pw-names li{border-top:1px solid var(--rule)}
.pw-names li:last-child{border-bottom:1px solid var(--rule)}
.pw-names button{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:block;width:100%;
  padding:clamp(11px,1.8vh,17px) 0;font-size:clamp(16px,min(1.35vw,2.6vh),21px);font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--ink-3);transition:color 300ms}
.pw-names button:hover{color:var(--ink)}
.pw-names button[aria-selected="true"]{color:var(--ink)}
.pw-names button:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
/* Fortschritt: violette Linie unter dem aktiven Projekt */
.pw-names button i{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden}
.pw-names button i b{position:absolute;inset:0;background:var(--violet);transform:scaleX(0);transform-origin:left}
.pw-info{max-width:30em;transition:opacity 300ms,transform 400ms}
.pw-info.is-out{opacity:0;transform:translateY(6px)}
.pw-meta{font-size:14px;line-height:1.45;font-weight:500;color:var(--ink)}
.pw-desc{margin-top:8px!important;font-size:15px;line-height:1.6;color:var(--ink-2)}
.pw-more{margin-top:18px}

/* Rechte Spalten: Website im Rahmen, Handy davor */
.pw-stage{grid-column:2/-1;position:relative;min-width:0;min-height:0}
.pw-set{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 700ms ease,visibility 0s 700ms}
.pw-set.is-on{opacity:1;visibility:visible;transition:opacity 700ms ease}
.pw-desk{position:absolute;top:0;right:0;bottom:0;left:clamp(40px,8%,120px);overflow:hidden;background:#0D1015}
.pw-desk img,.pw-phone img{display:block;width:100%;height:auto;max-width:none;will-change:transform}
.pw-phone{position:absolute;left:0;bottom:clamp(18px,5%,48px);width:clamp(110px,16%,200px);aspect-ratio:9/19;overflow:hidden;
  border:clamp(5px,.5vw,8px) solid #0D1015;border-radius:clamp(18px,2vw,30px);background:#0D1015;box-shadow:0 30px 60px -30px rgba(13,16,21,.55)}

/* Niedrige Fenster (Laptops mit Browserleiste) und schmale Desktops: Liste und Text verdichten */
@media (min-width:901px) and (max-height:720px){
  .pw .sx{margin-bottom:clamp(18px,3.4vh,28px)}
  .pw-names button{padding-block:clamp(8px,1.4vh,11px)}
  .pw-meta{display:none}
  .pw-desc{margin-top:0!important}
  .pw-more{margin-top:12px}
}
@media (min-width:901px) and (max-width:1180px){
  .pw-desc{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
}
@media (min-width:901px) and (max-width:1180px) and (max-height:720px){
  .pw-desc{-webkit-line-clamp:3}
}

/* Handy und Tablet hochkant */
@media (max-width:900px){
  .pw{min-height:0;padding-top:clamp(84px,9vh,104px);padding-bottom:clamp(24px,4vh,40px)}
  .pw-main{grid-template-columns:minmax(0,1fr);row-gap:20px}
  .pw-stage{grid-column:1;order:-1;aspect-ratio:16/10}
  .pw-col{grid-column:1;gap:16px}
  .pw-names{display:flex;flex-wrap:wrap;gap:2px 22px}
  .pw-names li,.pw-names li:last-child{border:0}
  .pw-names button{padding:6px 0 8px;font-size:clamp(17px,4.6vw,22px)}
  .pw-desk{left:14%}
  .pw-phone{width:24%;bottom:6%}
}
@media (max-width:640px){
  .pw{padding-top:84px;padding-bottom:24px}
  .pw .sx{margin-bottom:20px}
  .pw .sx-title{font-size:clamp(26px,7.4vw,32px)}
  .pw-stage{aspect-ratio:16/10}
  .pw-names{gap:0 18px}
  .pw-meta{display:none}
  .pw-desc{margin-top:0!important;font-size:14.5px;line-height:1.5}
  .pw-more{margin-top:10px}
}
@media (max-width:640px) and (max-height:700px){
  .pw{padding-top:74px}
  .pw-stage{aspect-ratio:16/9}
  .pw-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
@media (prefers-reduced-motion:reduce){ .pw *{transition:none!important} }