/* =======================================================================
   projekte.css - seitenlokale Regeln fuer /projekte/
   PHASE 2D · WORKING-PROTOTYP (FINAL MICROFIX) · NICHT FINAL (Stand 13.10.2026)
   Geladen ueber $pageCss nach site.css. Nutzt ausschliesslich dessen
   Variablen (Farben, Abstaende, Radien), Typo-Skala, .btn, .tlink, .lbl,
   .ph, .water, .diag und .noimg. Keine globale Regel wird geaendert;
   alle Selektoren tragen das Praefix pr.
   Die Belegset-Logik (.bset) folgt /spezialreinigung/ (dort seitenlokal),
   hier unter .prcase gekapselt nachgebaut - keine Abhaengigkeit von
   spezialreinigung.css.
   ======================================================================= */

/* ---------- S1 · kompakter Hero ---------- */
.prhero{padding:var(--s8) 0 calc(var(--s7) + 34px)}
.prhero .lbl{color:var(--gold);margin-bottom:var(--s4)}
.prhero h1{margin:0 0 var(--s4);font-size:clamp(32px,4.4vw,52px);font-weight:600;
  letter-spacing:-.026em;line-height:1.08}
.prhero .lead{color:var(--n300);max-width:54ch}
.prhero .diag{background:#fff}

/* ---------- S2 · Leitprojekt ---------- */
.prlead{background:#fff;padding:var(--s7) 0 var(--s9)}
.prlead-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--s8);align-items:stretch}
.prlead-fig{margin:0;display:flex;flex-direction:column}
.prlead-fig .ph{flex:1 1 auto;min-height:380px;overflow:hidden;border:1px solid var(--n200);background:var(--n150)}
.prlead-fig figcaption{padding-top:10px;font-size:13px;line-height:1.5;color:var(--n600)}
.prlead-bd .lbl{color:var(--red);margin-bottom:var(--s4)}
.prlead-bd h2{margin-bottom:var(--s5);max-width:24ch}
.prlead-bd .lead{margin-bottom:var(--s4)}
.prlead-bd p:not(.lead){color:var(--n700);line-height:1.7;max-width:56ch}
.prfacts{display:grid;grid-template-columns:1fr 1fr;margin:var(--s6) 0 var(--s6);
  border-top:1px solid var(--n200)}
.prfacts div{padding:var(--s3) var(--s4) var(--s3) 0;border-bottom:1px solid var(--n200)}
.prfacts dt{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--n600);margin-bottom:2px}
.prfacts dd{margin:0;font-size:16px;font-weight:600;color:var(--ink)}
.prlead-go{font-size:16px}

/* ---------- S3 · Praxisfaelle ---------- */
.prcases{padding:var(--s9) 0}
.prhd .lbl{color:var(--red);margin-bottom:var(--s4)}
.prhd h2{max-width:24ch}
.pranon{margin-top:var(--s4);font-size:15px;line-height:1.6;color:var(--n600);max-width:64ch}

.prcase{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  grid-template-areas:"hd md" "tx md";grid-template-rows:auto 1fr;
  column-gap:var(--s8);row-gap:var(--s5);
  padding:var(--s8) 0;border-top:1px solid var(--n300);margin-top:var(--s7)}
.prcase + .prcase{margin-top:0}
.prcase:last-child{padding-bottom:0}
.prcase.flip{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"md hd" "md tx"}
.prcase-hd{grid-area:hd}
.prcase-tx{grid-area:tx}
.prcase-media{grid-area:md;margin:0;align-self:start}
.prcase-kick{display:flex;align-items:baseline;gap:var(--s4);margin-bottom:var(--s4)}
.prcase-kick .n{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:500;font-size:28px;
  line-height:1;color:var(--red);letter-spacing:-.01em}
.prcase-kick .cat{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--n600)}
.prcase h3{font-size:clamp(21px,2.1vw,26px);line-height:1.2;max-width:26ch}

.prsteps{margin:0;border-top:1px solid var(--n200)}
.prsteps div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:var(--s4);
  padding:var(--s4) 0;border-bottom:1px solid var(--n200)}
.prsteps dt{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red);padding-top:4px}
.prsteps dd{margin:0;color:var(--n800);line-height:1.65;max-width:52ch}

.prmeta{list-style:none;margin:var(--s5) 0 var(--s5);padding:0;display:flex;flex-wrap:wrap;
  gap:var(--s3) var(--s6)}
.prmeta li{font-size:14.5px;color:var(--ink);display:flex;flex-direction:column}
.prmeta li span{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--n500);margin-bottom:2px}
.prmeta li b{font-weight:500}

.prcase-media .ph{overflow:hidden;border:1px solid var(--n200);background:var(--n150)}
.prcase-media .r34{aspect-ratio:3/4}
.prcase-media .r43{aspect-ratio:4/3}
.prcase-media.one{max-width:440px}
.prcase.flip .prcase-media.one{justify-self:start}
.prcase:not(.flip) .prcase-media.one{justify-self:end}
.prcase-media.one.wide{max-width:none;width:100%}
.prcase-media figcaption,.prcase .bset>figcaption{padding-top:10px;font-size:13px;line-height:1.5;
  color:var(--n600);max-width:60ch}
.prcase .bset .row{display:flex;gap:var(--s3);align-items:flex-end}
.prcase .bset .it{flex:1 1 0;min-width:0}
.prcase .bset .tag{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
  letter-spacing:.02em;color:var(--n700);margin-bottom:8px}
.prcase .bset .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}

/* WORKING-Platzhalter: nur bis das Freiflaechenbild vorliegt */
.prwork .ph{border:1.5px dashed var(--gold)}
.prwork .noimg span{max-width:34ch;line-height:1.5}
.prwork .noimg b{color:var(--n700);letter-spacing:.06em}

/* ---------- S4 · Bruecke Technik & Arbeitsweise ---------- */
.prtech{padding:var(--s9) 0;overflow:hidden}
.prtech .water{right:var(--gut);top:50%;transform:translateY(-50%);width:360px;height:360px;
  color:#fff;opacity:.05}
.prtech-in{position:relative;z-index:2;max-width:760px}
.prtech .lbl{color:var(--gold);margin-bottom:var(--s4)}
.prtech h2{margin-bottom:var(--s5);max-width:24ch}
.prtech .lead{margin-bottom:var(--s6);max-width:58ch}

/* ---------- S5 · Anfrage ---------- */
.prcta{background:#fff;border-top:1px solid var(--n200);padding:var(--s9) 0}
.prcta-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s8);align-items:start}
.prcta .lbl{color:var(--red);margin-bottom:var(--s4)}
.prcta h2{max-width:18ch}
.prcta .txt{font-size:18px;line-height:1.6;color:var(--n700);max-width:52ch;margin-bottom:var(--s6)}
.prcta .acts{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);align-items:center}
.prcta .tel3{color:var(--ink);font-size:15px;text-decoration:none;border-bottom:1px solid var(--n400);
  padding-bottom:2px}
.prcta .tel3:hover{border-bottom-color:var(--ink)}
.prcta .micro{margin-top:var(--s4);font-size:13px;color:var(--n600)}

/* ---------- Zeilenfall ---------- */
.prhero h1,.prlead-bd h2,.prhd h2,.prcase h3,.prtech h2,.prcta h2{text-wrap:balance}
.prcases p,.prsteps dd,.prlead-bd p,.prtech .lead{text-wrap:pretty}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .prlead-grid{gap:var(--s7)}
  .prcase,.prcase.flip{column-gap:var(--s7)}
}
@media (max-width:960px){
  .prhero{padding:var(--s7) 0 calc(var(--s6) + 30px)}
  .prlead{padding:var(--s6) 0 var(--s8)}
  .prlead-grid{grid-template-columns:1fr;gap:var(--s6)}
  .prlead-fig .ph{flex:none;min-height:0;aspect-ratio:4/3}
  .prcases,.prtech,.prcta{padding:var(--s8) 0}
  .prcase,.prcase.flip{grid-template-columns:1fr;grid-template-areas:"hd" "md" "tx";
    grid-template-rows:auto;row-gap:var(--s5);padding:var(--s7) 0}
  .prcase-media.one,.prcase:not(.flip) .prcase-media.one,.prcase.flip .prcase-media.one{
    justify-self:stretch;max-width:none}
  .prcase-media.one .r34{aspect-ratio:4/3}
  .prtech .water{width:240px;height:240px;right:-40px;top:auto;bottom:-40px;transform:none}
  .prcta-grid{grid-template-columns:1fr;gap:var(--s5)}
}
@media (max-width:520px){
  .prsteps div{grid-template-columns:1fr;gap:var(--s1)}
  .prsteps dt{padding-top:0}
  .prfacts dd{font-size:15px}
  .prmeta{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s5)}
  .prcta .acts .btn{width:100%;justify-content:center}
}

/* ---------- Phase 2B ---------- */
/* WORKING-Hinweis zum Header (nur Vorschau, entfaellt bei der Migration) */
.prwip{background:#2a2622;color:var(--n300);font-size:12.5px;line-height:1.5;padding:8px 0;
  border-bottom:1px solid #3a3530}
.prwip b{color:var(--gold);font-weight:600;letter-spacing:.04em}
/* Leitbild Hochformat: Arbeitsgeraet, Wasserstrahl und Glasflaeche im Ausschnitt halten */
.prlead-fig .ph img{object-position:58% 45%}
/* Fall 04: Medienspalte breiter, Hauptbild 4:3 + Sekundaerbild 3:4 auf gleicher Hoehe */
.prcase.flip.prff{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.prcase .ffset .it.w43{flex:16 1 0}
.prcase .ffset .it.w34{flex:9 1 0}
@media (max-width:960px){
  .prlead-fig .ph{aspect-ratio:4/5}
  .prcase.flip.prff{grid-template-columns:1fr}
}
@media (max-width:520px){
  .prcase .ffset .row{flex-direction:column;align-items:stretch;gap:var(--s4)}
  .prcase .ffset .it.w34 .ph{aspect-ratio:4/3}
  .prcase .ffset .it.w34 .ph img{object-position:50% 70%}
}

/* ---------- Phase 2C ---------- */
/* Desktop: Medien bei laengeren Texten vertikal mittig zur Textspalte (keine Leerflaeche unter dem Bild) */
@media (min-width:961px){
  .prcase-media{align-self:center}
  .prlead-bd h2{max-width:28ch}
}

/* ---------- Phase 2D ---------- */
/* Leitprojekt: Glasreinigung als nachgeordneter Textlink neben dem Projektbericht */
.prlead-links{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s3) var(--s6)}
.prlead-sub{color:var(--n700);font-weight:500}
.prlead-sub:hover{border-bottom-color:var(--n700)}
/* Freiflaeche mobil: Danach-Bild 4:3 mit Schwerpunkt auf den Modulreihen (weniger Himmel) */
@media (max-width:520px){
  .prcase .ffset .it.w34 .ph img{object-position:50% 85%}
}

/* =======================================================================
   E2-A (03.11.2026) - lokale Arbeitsfassung, NICHT FREIGEGEBEN
   ======================================================================= */
/* S2b · Karte zum Projektbericht Nordrhein-Westfalen: ganze Karte verlinkt (vk-k1 aus
   komponenten.css), innen Bild 5/12 und Text 7/12; mobil untereinander.
   Doppelte Klasse, weil komponenten.css erst im Body nach projekte.css laedt. */
.vk-k1.prbericht{margin-top:var(--s8);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:var(--s7);align-items:center;padding:var(--s5)}
.prbericht-fig .ph{aspect-ratio:4/3;overflow:hidden;border:1px solid var(--n200);background:var(--n150)}
.prbericht-bd{display:flex;flex-direction:column;gap:var(--s3);min-width:0;padding-right:var(--s5)}
.vk-k1.prbericht .vk-kick{color:var(--red)}
.vk-k1.prbericht h3{font-size:clamp(21px,2.1vw,26px);line-height:1.2;max-width:26ch;text-wrap:balance}
.vk-k1.prbericht p{font-size:16px;line-height:1.65;max-width:56ch}
.vk-k1.prbericht .prmeta{margin:var(--s2) 0 0}
.vk-k1.prbericht .prmeta > span{font-size:14.5px;color:var(--ink);display:flex;flex-direction:column}
.vk-k1.prbericht .prmeta > span > span{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--n600);margin-bottom:2px}
.vk-k1.prbericht .vk-go{margin-top:var(--s3);padding-top:0}
/* Barrierefreiheit: Kennzeichnungen der Falldaten mit ausreichendem Kontrast (axe, vorher n500) */
.prmeta li span{color:var(--n600)}
/* Fall 04: neutrale Bildkennzeichnung ohne Punkt ("Im Einsatz"/"Danach" ist kein Vorher/Nachher) */
.prcase .ffset .tag{color:var(--n600)}
@media (max-width:960px){
  .vk-k1.prbericht{grid-template-columns:1fr;gap:var(--s5);margin-top:var(--s7)}
  .prbericht-bd{padding-right:0}
}
@media (max-width:639px){
  .vk-k1.prbericht{padding:var(--s4)}
}