/* =======================================================================
   projektbericht.css - seitenlokale Regeln fuer /projekte/bildungseinrichtung-mittelhessen/
   -----------------------------------------------------------------------
   Herkunft: Viereck_Projektbericht_Bildungseinrichtung_10.4B_VARIANTE_B
   _WORKING.html (Fassung 5), <style>-Block.
   Von 394 Regeln stehen 295 bereits zeichengleich in
   site.css und sind hier NICHT wiederholt. Zusaetzlich entfallen:
     img  - site.css fuehrt die korrigierte Fassung
     4 Data-URI-Hintergrundregeln - ersetzt durch echte Bilddateien.
   Die M4-Grafik (.svc*) steht ausschliesslich hier, nicht in site.css.
   HINWEIS: Der Prototyp-Styleblock traegt 39 Regeln mit .einhero/.einzone/
   .einflow/.einbar/.zonehead/.geo2 - Klassen der Seite /einsatzgebiete/,
   die auf dieser Seite nicht vorkommen. Sie sind unveraendert uebernommen,
   um Rendergleichheit zu garantieren, und im QA-Dossier ausgewiesen.
   Inhaltlich wurde nichts geaendert.
   ======================================================================= */

.einhero{padding:var(--s9) 0 calc(var(--s8) + 30px)}
.einhero .in{max-width:var(--wrap)}
.einhero .heroin{max-width:880px}
.einhero .lbl{color:var(--gold);margin-bottom:var(--s4)}
.einhero h1{margin:0 0 var(--s5);font-size:clamp(27px,4.4vw,48px);
  font-weight:600;letter-spacing:-.024em;line-height:1.1}
.einhero .lead{color:var(--n300);max-width:60ch}
.einhero .diag{background:#fff}
.einhero .herogrid{display:block}
.einzone{border-top:1px solid var(--n200);margin-top:var(--s6)}
.einzone .z{display:grid;grid-template-columns:1fr;gap:10px;
  padding:var(--s6) 0 var(--s6) var(--s5);border-bottom:1px solid var(--n200);
  position:relative}
.einzone .z::before{content:"";position:absolute;left:0;top:var(--s5);bottom:var(--s5);
  width:3px;border-radius:2px}
@media (min-width:1024px){
  .einzone .z{grid-template-columns:minmax(0,190px) minmax(0,270px) minmax(0,1fr);
    gap:var(--s6);align-items:start;padding:var(--s7) 0 var(--s7) var(--s6)}
  .einzone .z::before{top:var(--s6);bottom:var(--s6)}
}
.einzone .k{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  line-height:1.4;padding-top:3px}
.einzone .g{font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.012em}
.einzone .e{font-size:15px;line-height:1.6;color:var(--n700);max-width:52ch}
.einzone .z1 .k{color:var(--red)}
.einzone .z1::before{background:var(--red)}
.einzone .z2 .k{color:var(--gold)}
.einzone .z2::before{background:var(--gold)}
.einzone .z3 .k{color:var(--n600)}
.einzone .z3::before{background:var(--n300)}
.einzone .z3 .g{font-weight:500;color:var(--n700)}
.einflow{max-width:64ch}
.einflow p + p{margin-top:var(--s5)}
.einflow p .tlink{display:inline;font-size:inherit;line-height:inherit;padding:0;
  border-bottom-width:1px}
.einbar a{flex:1 1 0;justify-content:center;text-align:center}
.zonehead{display:grid;grid-template-columns:1fr;gap:var(--s7)}
@media (min-width:1024px){
  .zonehead{grid-template-columns:minmax(0,1fr) minmax(0,400px);
    align-items:center;gap:var(--s8)}
}
.geo2{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4)}
@media (min-width:360px){
  .geo2{flex-direction:row;align-items:center;gap:var(--s4)}
}
@media (min-width:640px){
  .geo2{gap:var(--s5)}
}
.geo2 .map{position:relative;flex:0 0 auto;width:175px}
@media (min-width:640px){
  .geo2 .map{width:205px}
}
.geo2 .map svg{width:100%;height:auto;display:block;overflow:visible}
.geo2 .de{fill:none;stroke:var(--n500);stroke-width:1;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
.geo2 .he{fill:none;stroke:var(--gold);stroke-width:2;stroke-linejoin:round;
  stroke-dasharray:6 4;vector-effect:non-scaling-stroke}
.geo2 .mkm{fill:var(--red);stroke:var(--n50);stroke-width:1.6;paint-order:stroke}
.geo2 .lblhe{position:absolute;left:39.3%;top:38.0%;transform:translateX(-50%);
  font-size:11px;font-weight:600;letter-spacing:.04em;color:#7A4F00;
  white-space:nowrap;line-height:1}
.geo2 .lblink{fill:none;stroke:#7A4F00;stroke-width:1;vector-effect:non-scaling-stroke}
.geo2 .leg{min-width:0}
.geo2 .cap{display:flex;align-items:flex-start;gap:9px;margin-top:var(--s3)}
.geo2 .cap .g{width:9px;height:9px;flex:0 0 auto;background:var(--red);
  position:relative;top:6px}
.geo2 .ort{display:block;font-size:17px;font-weight:600;line-height:1.3}
.geo2 .zus{display:block;font-size:12.5px;line-height:1.45;color:var(--n600);margin-top:2px}
.prjhero{padding:var(--s9) 0 calc(var(--s8) + 30px)}
.prjhero .in{max-width:var(--wrap)}
.prjhero .heroin{max-width:880px}
.prjhero .lbl{color:var(--gold);margin-bottom:var(--s4)}
.prjhero h1{margin:0 0 var(--s5);font-size:clamp(26px,4.2vw,44px);
  font-weight:600;letter-spacing:-.024em;line-height:1.12}
.prjhero .lead{color:var(--n300);max-width:62ch}
.prjhero .diag{background:#fff}
.prjhero .herogrid{display:block}
.prjhero .facts{margin-top:var(--s6)}
.prjhero .facts li{color:var(--n300)}
.prjhero .facts li::before{background:var(--gold)}
.prjfig{margin:0}
.prjfig .ph{aspect-ratio:3/4;overflow:hidden;position:relative;border:1px solid var(--n200)}
.prjfig figcaption{padding-top:10px;font-size:13px;line-height:1.5;color:var(--n700)}
.prjfig .src{display:block;margin-top:6px}
.prjgrid{display:grid;gap:var(--s5);grid-template-columns:1fr}
@media (min-width:700px){
  .prjgrid{grid-template-columns:1fr 1fr;gap:var(--s6) var(--s6)}
}
.prjnote{grid-column:1/-1;margin-top:var(--s3);padding-top:var(--s4);
  border-top:1px solid var(--n200);max-width:80ch}
.prjnote p{margin:0;font-size:13px;line-height:1.6;color:var(--n600)}
.prjnote p + p{margin-top:var(--s2)}
.prjnote .src{display:block;margin-top:var(--s3)}
.lnkrows{border-top:1px solid var(--n200);margin-top:var(--s6)}
.lnkrow{display:grid;grid-template-columns:1fr;gap:2px;
  padding:var(--s4) 0;border-bottom:1px solid var(--n200)}
@media (min-width:640px){
  .lnkrow{grid-template-columns:230px 1fr;gap:var(--s5);align-items:baseline}
}
.lnkrow .cat{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--n600)}
.lnkrow .tgt{font-size:17px;font-weight:500}
.svcmap{display:grid;gap:var(--s4);grid-template-columns:1fr;margin-top:var(--s7)}
.svcnode{position:relative;border:1px solid var(--n200);background:#fff;padding:var(--s5)}
.svcsat{border-left:3px solid var(--gold)}
.svccore{background:var(--ink);border-color:var(--ink);color:#fff;padding:var(--s6) var(--s5)}
.svccore .cl{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--s3)}
.svccore h3{color:#fff;font-size:19px}
.svccore p{color:var(--n300);font-size:14.5px;line-height:1.55;margin:var(--s3) 0 0}
.svcnode h3{margin:0 0 var(--s3);font-size:16px;font-weight:600;line-height:1.3;letter-spacing:-.012em}
.svcnode .gl{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--n600);margin-bottom:var(--s2)}
.svcnode ul{list-style:none;margin:0;padding:0}
.svcnode li{position:relative;padding-left:14px;margin-bottom:6px;
  font-size:14.5px;line-height:1.5;color:var(--n700)}
.svcnode li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;background:var(--red)}
@media (min-width:900px){
  .svcmap{grid-template-columns:1fr minmax(230px,290px) 1fr;
    grid-template-areas:"a c b" "d c e";gap:var(--s7);align-items:stretch}
  .svc-a{grid-area:a}
  .svc-b{grid-area:b}
  .svc-c{grid-area:c}
  .svc-d{grid-area:d}
  .svc-e{grid-area:e}
  .svcsat{border-left:1px solid var(--n200)}
  .svccore{display:flex;flex-direction:column;justify-content:center;text-align:center}
  .svcsat::after{content:"";position:absolute;top:50%;height:1px;width:var(--s7);background:var(--gold)}
  .svc-a::after,.svc-d::after{right:calc(-1 * var(--s7))}
  .svc-b::after,.svc-e::after{left:calc(-1 * var(--s7))}
}

/* V1-Review PB-PB7: Fotos in den Unterabschnitten von #h-weit. Seitenverhältnis wie die Bilddatei (kein Beschnitt durch object-fit) */
.prjsub{max-width:760px;margin-top:var(--s5)}
.prjfig .ph.ph-fit{aspect-ratio:1080/1494}
.prjfig .ph.ph-quer{aspect-ratio:1440/916}

/* =======================================================================
   V1-Review E3 · Block 2 · PB1 (Review-Wahl): Text und Bilder nebeneinander
   Markup: Die Figuren wurden als Ganzes verschoben (Bild, Alternativtext und
   Bildunterschrift unveraendert) und mit ihren Absaetzen in .prj2 gefasst.
   #h-glas: Text links (hoechstens 700 px), rechts Bildspalte (400 px); das
   Rollgeruest-Foto neben dem Absatz zu den Zugangsarten, das Hochdrucklanzen-Foto
   neben dem Absatz zum Spuelen. Doppelwalzenmaschine: Text links, rechts das
   Fitness-Bildpaar uebereinander. Teppich: Text links, Bild rechts.
   Galerie #h-dok: nur noch das Vorher-/Nachher-Paar der Glasfront.
   Unter 1.024 px einspaltig, das Bild steht direkt nach dem zugehoerigen Absatz.
   ======================================================================= */
.prj2 > figure.prjfig,.prj2 > .prjgrid{max-width:400px;margin-top:var(--s5)}
.prj2 > .prjgrid{grid-template-columns:1fr}
@media (min-width:1024px){
  .prj2{display:grid;grid-template-columns:minmax(0,700px) minmax(260px,400px);
    column-gap:var(--s7);align-items:start;justify-content:start}
  .prj2 > *{grid-column:1}
  .prj2 > figure.prjfig,.prj2 > .prjgrid{grid-column:2;max-width:none;margin-top:var(--s5)}
}
/* Zeilenaufteilung: Ein Bild beginnt neben seinem Absatz; ist es hoeher als der
   Text daneben, waechst die letzte Zeile seines Bereichs (1fr) - nicht die Abstaende
   zwischen den Absaetzen. */
@media (min-width:1024px){
  .prj2-glas{grid-template-rows:auto auto 1fr auto 1fr}
  .prj2-glas > figure.prjfig:nth-of-type(1){grid-row:2 / 4}
  .prj2-glas > figure.prjfig:nth-of-type(2){grid-row:4 / 6}
  .prj2-walze,.prj2-teppich{grid-template-rows:auto 1fr}
  .prj2-walze > .prjgrid,.prj2-teppich > figure.prjfig{grid-row:1 / 3}
}