/* =======================================================================
   technik-verfahren.css - seitenlokale Regeln fuer /technik-verfahren/
   -----------------------------------------------------------------------
   Herkunft: Viereck_Technik_Prototype_CURRENT.html, <style>-Block.
   Von 368 Regeln stehen 291 bereits zeichengleich
   in site.css und sind hier NICHT wiederholt. Zusaetzlich entfallen:
     img                 - site.css fuehrt die korrigierte Fassung
     8 Data-URI-Hintergrundregeln - ersetzt durch echte Bilddateien
                           in <picture>/<img>.
   Inhaltlich wurde nichts geaendert.
   ======================================================================= */

.shero{padding:var(--s8) 0 calc(var(--s8) + 40px)}
.shero .in{max-width:var(--wrap)}
.shero .heroin{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s8);align-items:center}
.shero h1{margin:0 0 var(--s5)}
.shero .display{font-size:clamp(34px,4.4vw,54px);font-weight:600;letter-spacing:-.026em;
  line-height:1.08;display:block}
.shero .lbl{color:var(--gold);margin-bottom:var(--s4)}
.shero .sub{max-width:38ch;margin-bottom:var(--s4)}
.shero .after{font-size:16px;color:var(--n400);line-height:1.6;max-width:40ch;margin:0}
.shero .ph{aspect-ratio:4/5;overflow:hidden;border:1px solid var(--n800);position:relative}
.shero figcaption{padding-top:12px;font-size:13px;color:var(--n400)}
.shero .water{right:auto;bottom:auto;left:var(--gut);top:var(--s7);
  width:440px;height:440px;color:#fff;opacity:.045}
@media (max-width:960px){
  .shero .water{left:var(--gut);top:var(--s6);
    width:min(78%,360px);height:min(78vw,360px)}
}
.svcs.static .svc{cursor:default}
.svcs.static .svc:hover,.svcs.static .svc:focus-within{background:#fff;box-shadow:none}
.svcs.static .svc h4{font-size:16.5px;line-height:1.35}
.svcs.static .svc p{font-size:13.5px}
.vf{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s8);align-items:center}
.vf.rev > .vfbd{order:2}
.vf .ph{overflow:hidden;border:1px solid var(--n200);position:relative}
.vf .ph.r43{aspect-ratio:4/3}
.vf .ph.r34{aspect-ratio:3/4}
.vf figcaption{padding-top:12px;font-size:13px;color:var(--n600)}
.vf .lbl{color:var(--red);margin-bottom:var(--s4)}
.vf h2{margin-bottom:var(--s5)}
.vf p{color:var(--n700);line-height:1.7;margin-bottom:var(--s4)}
.vf p:last-of-type{margin-bottom:0}
.vf p b{color:var(--ink)}
.vf .foot{margin-top:var(--s6)}
.vf .limit{border-left:2px solid var(--n300);padding:2px 0 2px var(--s4);
  font-size:15px;color:var(--n600);margin-bottom:0}
.vf .links{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6)}
.rv.dark .s6mark{left:auto;right:-14%}
.prep .limit{border-left-color:var(--n700);color:var(--n400)}
.prep p{color:var(--n300)}
.prep p b{color:#fff}
.prep .lbl{color:var(--gold)}
.prep .ph{border-color:var(--n800)}
.prep figcaption{color:var(--n400)}
.proof p{color:var(--n700);line-height:1.7;margin-bottom:var(--s4)}
.proof p:last-child{margin-bottom:0}
.proof .facts{margin-bottom:var(--s4)}
@media (max-width:960px){
  .shero{padding:var(--s7) 0 calc(var(--s7) + 30px)}
  .shero .heroin{grid-template-columns:1fr;gap:var(--s6)}
  .shero .ph{aspect-ratio:4/3}
  .vf{grid-template-columns:1fr;gap:var(--s6)}
  .vf.rev > .vfbd{order:0}
  .vf .ph.r34{aspect-ratio:4/3}
  .svcs.static{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .svcs.static{grid-template-columns:1fr}
}
.pv .narrow .lbl{color:var(--red);margin-bottom:var(--s4)}
.pv .narrow h2{margin-bottom:var(--s5)}
.pv .narrow p{color:var(--n700);line-height:1.7;margin-bottom:var(--s4)}
.pv .narrow p:last-of-type{margin-bottom:0}
.pv .narrow p b{color:var(--ink)}
.pv .narrow .foot{margin-top:var(--s6)}
.pv .narrow .links{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6)}
.pvcmp{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);
  margin:var(--s7) 0 var(--s7)}
.pvcmp > article > figure{margin:0 0 var(--s5)}
.pvcmp .ph{overflow:hidden;border:1px solid var(--n200);aspect-ratio:4/3}
.pvcmp figcaption{padding-top:12px;font-size:13px;color:var(--n600)}
.pvcmp h3{margin-bottom:var(--s3)}
.pvcmp .pvfacts{font-size:14px;color:var(--n600);margin-bottom:var(--s4);
  padding-bottom:var(--s4);border-bottom:1px solid var(--n200)}
.pvcmp p{color:var(--n700);line-height:1.7;margin-bottom:var(--s4)}
.pvcmp p:last-child{margin-bottom:0}
@media (max-width:960px){
  .pvcmp{grid-template-columns:1fr;gap:var(--s7);margin:var(--s6) 0}
}
@media (max-width:380px){
  .vf h2,.prep h2{font-size:22px}
}
@media (max-width:360px){
  .vf h2,.prep h2{font-size:21px}
}
.svcs.static .svc h3{font-size:16.5px;line-height:1.35;font-weight:600;margin:0}
.svcs.static .svc:hover h3,.svcs.static .svc:focus-within h3{color:inherit}

/* =======================================================================
   E2-A (03.11.2026) - lokale Arbeitsfassung, NICHT FREIGEGEBEN.
   Nur diese Seite; komponenten.css wird im Body nach dieser Datei geladen.
   ======================================================================= */
/* Hero: Raster ueber die volle Containerbreite statt 820 px - keine Leerflaeche
   rechts; Text 7/12, Bild 5/12 (Hochformat 4:5 unveraendert, ohne Zuschnitt). */
.shero .heroin{max-width:none;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s8)}
.shero .sub{max-width:44ch}
.shero .after{max-width:52ch}
.shero figure{max-width:470px;justify-self:end;width:100%}
/* Reinwasser: zwei Karten unter Text und Bild (Spuellanze 5/12, Reinigungsmittel 7/12) */
.tvkarten{grid-template-columns:minmax(0,5fr) minmax(0,7fr);margin-top:var(--s8)}
.tvkarten .vk-k3 p{font-size:15px;line-height:1.65}
/* Lamellen: Vorher/Nachher-Kennzeichnung ueber dem geteilten Bild (vk-teil) */
.vf .vk-teil .vk-tag{color:var(--n700)}
/* Boeden: vorhandenes Foto der Orbitalmaschine in der Textspalte, Querformat ohne Zuschnitt */
.tvorbital{margin:var(--s6) 0 0}
.tvorbital .ph{border:1px solid var(--n200);overflow:hidden;aspect-ratio:960/611}
.tvorbital figcaption{padding-top:12px;font-size:13px;color:var(--n600)}
/* Barrierefreiheit: Nummern der vier Fragen mit ausreichendem Kontrast (axe, vorher n400) */
.svcs.static .svc .n{color:var(--n600)}
@media (max-width:960px){
  .shero .heroin{grid-template-columns:1fr}
  .shero figure{max-width:none;justify-self:stretch}
}
@media (max-width:639px){
  .tvkarten{grid-template-columns:1fr;margin-top:var(--s7)}
}