/* ADA Universal Profi Bau — the subpages (AVINII, October 2026): the project index (filter chips and the
   grid-wide switch) and the project page (title deck, the big compare, the spec sheet, one chapter per
   room, the five-frame timeline, the close). Same tokens and primitives as site.css. */

/* ---------- the title deck ---------- */
.page,.p-hero{padding:clamp(3.5rem,6.5vw,6.5rem) var(--pad-x) 0}
.page-title{font-size:var(--fs-title); line-height:.98; letter-spacing:-.04em; font-weight:700; text-wrap:balance}
.page-title .soft{color:var(--grey); font-weight:300}
.page-head{max-width:56rem}
.page-head .lead{max-width:50ch; color:var(--ivory-64)}

/* ---------- projekte.html: chips, switch, count ---------- */
.page-tools{display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-top:clamp(2.5rem,4.5vw,4rem); padding-bottom:1.25rem; border-bottom:1px solid var(--ivory-14)}
.chips{display:flex; flex-wrap:wrap; gap:.5rem}
.chip{
  display:inline-flex; align-items:center; gap:.55rem; min-height:38px; padding:0 1rem;
  border:1px solid var(--ivory-14); border-radius:999px; font-size:.62rem; letter-spacing:.16em; color:var(--ivory-64);
  transition:color .24s ease,border-color .24s ease,background-color .24s ease;
}
.chip .mono{font-size:.7rem; letter-spacing:0; color:var(--ivory-38); transition:color .24s ease}
.chip[aria-pressed="true"]{background:var(--ivory); border-color:var(--ivory); color:var(--ink-900)}
.chip[aria-pressed="true"] .mono{color:rgb(15 16 17 / .55)}
@media (hover:hover) and (pointer:fine){.chip:not([aria-pressed="true"]):hover{border-color:var(--ivory-38); color:var(--ivory)}}
.pgrid--index{margin-top:clamp(1.75rem,3vw,2.5rem)}
.pgrid--index.is-filtered > *{grid-column:span 6}
.pgrid--index.is-filtered .pcard-media{aspect-ratio:3/2}
.pgrid .pcard[hidden]{display:none}
.count{margin-top:clamp(1.75rem,3vw,2.5rem); font-size:.74rem; color:var(--ivory-38)}
.doku{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,4rem); align-items:start; padding-top:clamp(2rem,4vw,3.5rem); border-top:1px solid var(--ivory-14)}

/* ---------- projekt/*.html ---------- */
.crumbs{display:flex; align-items:center; gap:.7rem; margin-bottom:clamp(1.5rem,2.6vw,2.25rem); font-family:var(--mono); font-size:.72rem; color:var(--ivory-38)}
.crumbs a{color:var(--ivory-64); transition:color .24s ease}
.crumbs a:hover{color:var(--ivory)}
.crumbs [aria-current]{color:var(--ivory-64)}
.p-head{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,4rem); align-items:end}
.p-head .lead{margin-top:0; color:var(--ivory-64); padding-bottom:.4rem}
.p-cover{margin-top:clamp(2.25rem,4vw,3.5rem)}
.p-cover .ba{border-radius:4px}
.p-hint{display:flex; justify-content:space-between; gap:2rem; margin-top:.8rem; font-size:.7rem; color:var(--ivory-38)}
.spec{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,2fr); margin-top:clamp(2rem,3.5vw,3rem); border-top:1px solid var(--ivory-14); border-bottom:1px solid var(--ivory-14)}
.spec > div{padding:1.1rem 1.25rem 1.2rem 0}
.spec > div + div{padding-left:1.25rem; border-left:1px solid var(--ivory-14)}
.spec dt{font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; font-stretch:118%; color:var(--grey)}
.spec dd{margin-top:.4rem; font-size:.92rem; color:var(--ivory); line-height:1.45}

/* chapters: one room per row, text beside the pair, alternating sides */
.chapters{padding-top:clamp(4.5rem,8vw,7.5rem)}
.chapter{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:clamp(1.75rem,4.5vw,4.5rem); align-items:center}
.chapter + .chapter{margin-top:clamp(4.5rem,8vw,7.5rem)}
.chapter--flip{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.chapter--flip .chapter-text{order:2}
.chapter-text .step-n{color:var(--sig-500)}
.chapter-text .copy{margin-top:.9rem}
.chapter-facts{margin-top:1.25rem; padding-top:.9rem; border-top:1px solid var(--ivory-14); font-size:.74rem; color:var(--ivory-64)}

/* the close: an ask on the left, the next project on the right */
.p-close-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,5rem); align-items:end; padding-top:clamp(2.5rem,4.5vw,4rem); border-top:1px solid var(--ivory-14)}
.p-next .micro{color:var(--ivory-38); margin-bottom:1rem}
.p-next .micro::before{content:none}
.p-next .pcard{opacity:1}