/* ============================================================
   EnergyEng V2 — pages.css · Unterseiten
   epcm, trackway, academy, referenzen, unternehmen, karriere,
   kontakt, impressum, datenschutz
   Lädt nach style.css und motion.css. Dauern und Easings nur aus
   den Tokens in motion.css (--t-*, --ease-*), keine eigenen Werte
   außer den begründeten Ausnahmen (Akkordeon 350 ms, siehe unten).
   Animiert werden nur transform/translate/scale, opacity, clip-path,
   filter. Jede Klasse mit Ausgangszustand ist unten im Statik- und
   im Reduced-Motion-Block neutralisiert.

   KLASSEN
   .vh               visuell versteckt, für Screenreader lesbar
   .nb               kein Zeilenumbruch (220-kV, 380 kV)
   .foot-grid.top    Footer ohne Kopfband: Abstand + Haarlinie
   .foot-bottom.solo Fußzeile ohne Linie (Rechtstexte)
   .case.ruled / .case.bare / .case-media.flow / .wrap.flush
                     Fallreihen-Varianten statt Inline-Styles
   .wp-list.dark     Liste auf hellem Grund
   .job-list         Stellenliste (Stagger-Container)
   .btn-row          Button-Gruppe
   .mt-8 .mt-10 .mt-14  Ergänzung zu den Core-Abständen
   Zustände (pages.js): .det.opening / .job.opening (350 ms),
   .btn.sending (600 ms)
   ============================================================ */

/* ---------- Gerüst ---------- */
.vh{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
/* Sprungziel des Skip-Links bekommt keinen Rahmen um die ganze Seite */
#inhalt:focus{outline:none;}
.nb{white-space:nowrap;}

/* Anker der Unterseiten: Oberkante unter der festen Nav (Core deckt leistung-, referenz-, wp- ab) */
[id^="schulung-"],[id^="stelle-"]{scroll-margin-top:110px;}

/* Abstände, die der Core nicht führt */
.mt-8{margin-top:8px;}
.mt-10{margin-top:10px;}
.mt-14{margin-top:14px;}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;}

/* Gedankenstriche vor Listenpunkten sind Schmuck: Alternativtext leer */
.det .det-body li::before,.job .job-body li::before,.wp-list li::before{content:"—";content:"—" / "";}

/* ---------- Footer ---------- */
/* Ohne Kopfband startet das Raster mit dem Grundabstand; folgt es auf ein
   dunkles CTA-Band, trennt eine Haarlinie wie auf der Startseite */
.foot-grid.top{padding-top:var(--sp-1);}
main:has(> .cta-band:last-child) + footer .foot-grid.top{border-top:1px solid var(--line-d);}
.foot-bottom.solo{border-top:none;}

/* ---------- Unterseiten-Hero ---------- */
/* Abstände aus Tokens, Statik und live identisch (kein svh):
   170/80 px am Desktop, 146/64 px unter 640 px */
.page-hero,html.static .page-hero{padding:calc(var(--nav-h) + var(--sp-2)) 0 calc(var(--sp-1) + 16px);}
/* Staffel unter dem abfahrenden Vorhang (Core setzt dieselben Werte als --rd) */
.page-hero .crumb{--d:0s;align-items:flex-start;}
.page-hero h1{--d:.1s;}
.page-hero .sub{--d:.22s;}
.page-hero .hero-cta{--d:.34s;}
@media(max-width:640px){
  /* Zahl und Slash stehen in eigener Zeile über dem Text */
  .page-hero .crumb span:last-child{display:block;flex-basis:100%;line-height:1.5;}
}

/* ---------- Kaskaden in Köpfen und Bändern ---------- */
/* Eyebrow → Überschrift → Text → Aktion, jeweils nur ein kurzer Versatz */
.sec-head .h2,.case h2{--rd:.08s;}
.sec-head .sub,.case .sub{--rd:.16s;}
.case .facts{--rd:.12s;}
.case .chips{--rd:.18s;}
.cta-band .sub{--rd:.12s;}
.cta-band .btn{--rd:.2s;}
.cta-band .btn + .btn{--rd:.26s;}
/* Bildunterschrift stempelt sich auf, nachdem das Bild offen ist */
.case-media .meta{--rd:.5s;}

/* ---------- Kachelraster ---------- */
/* Die Linien zeichnet jede Kachel selbst (opake Linienfarbe = --line-l auf
   Weiß). So scheint beim gestaffelten Einblenden keine graue Rasterfläche
   durch, jede Kachel kommt mit ihrem eigenen Rahmen. */
.svc-grid,.steps,.con-grid{--grid-line:#D5D8DD;background:none;border:1px solid var(--grid-line);padding:0;border-radius:var(--r-md);overflow:hidden;}
.svc-grid > *,.steps > *,.con-grid > *{outline:1px solid var(--grid-line);}
@media(max-width:640px){
  /* Core-Regel für .cols-3 (2 Spalten ab 900 px) würde auf dem Handy gewinnen */
  .svc-grid.cols-2,.svc-grid.cols-3{grid-template-columns:1fr!important;}
}

/* ---------- Prozessleiste (EPCM) ---------- */
.steps{position:relative;}
.step h3{font-variation-settings:"wdth" 108;font-weight:700;font-size:16.5px;line-height:1.25;margin-bottom:8px;}
.step .sn{color:var(--mut-l);}
.step::after{content:"→";content:"→" / "";}
.step:last-child::after{content:"■";content:"■" / "";}
@media(max-width:560px){
  .step::after{content:"↓";content:"↓" / "";}
  .step:last-child::after{content:"■";content:"■" / "";}
}
/* Die Kette zieht sich als rote Leitung über die Schritte, während sie einfliegen
   (Band-Ausrollen, --t-4) */
.steps::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;
  background:var(--red);transform-origin:left center;pointer-events:none;
}
html.js .steps.rev-row::before{scale:0 1;}
html.js .steps.rev-row.on::before{
  scale:1 1;
  transition:scale calc(var(--t-4) * var(--mk)) var(--ease-out);
  transition-delay:calc(var(--rd, 0s) * var(--dk));
}

/* ---------- Akkordeons (Leistungen, Katalog, Stellen) ---------- */
/* Öffnen per Klick: Inhalt setzt sich um 6 px (pages.js schaltet .opening
   für 350 ms). Die Höhe springt nativ, animiert wird sie nie.
   350 ms: Vorgabe Arbeitspaket P3, kürzer als --t-2, weil der Inhalt sofort
   lesbar sein soll. */
@keyframes bodyIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.det.opening[open] .det-body,.job.opening[open] .job-body{animation:bodyIn .35s var(--ease-out) both;}
.det summary .num,.job .jt h3{transition:color var(--t-1) var(--ease-out);}
.det summary .pm,.job .pm{transition:transform var(--t-2) var(--ease-inout),border-color var(--t-1) var(--ease-out);}
.det summary:focus-visible .num{color:var(--red-deep);}
.det summary:focus-visible .pm,.job summary:focus-visible .pm{border-color:var(--ink);}
@media(hover:hover){
  .det summary:hover .num{color:var(--red-deep);}
  .det summary:hover .pm,.job summary:hover .pm{border-color:var(--ink);}
  .det[open] summary:hover .pm,.job[open] summary:hover .pm{border-color:var(--red);}
  .job summary:hover .jt h3{color:var(--red-deep);}
}
@media(hover:none){
  .det summary,.job summary{transition:transform var(--t-1) var(--ease-out);}
  .det summary:active,.job summary:active{transform:scale(.985);}
}
.job .job-body > .full{grid-column:1/-1;}
.job .job-body > .full p{font-size:15px;color:var(--mut-l);margin-bottom:16px;}

/* ---------- Fallreihen (Referenzen, Trackway, Unternehmen) ---------- */
.case.ruled{border-top:1px solid var(--line-l);}
.case.bare{padding:0;border:none;}
.wrap.flush{padding-left:0;padding-right:0;}
.case-media.flow{position:relative;top:0;}
/* Referenzen: Umbruch der Fall-Überschriften ist festgelegt, nicht dem Browser
   überlassen. Die Textspalte ist so breit, dass jedes Wort bis 19 Zeichen samt
   Punkt ungetrennt passt (UW-GENERALSANIERUNG 671 px, STAHLBAUKONTROLLE. 615 px
   bei 48 px Schrift; Spalte 676 px bei 1440). Einzige Trennstelle ist der weiche
   Trennstrich in Höchst|spannungsleitung, das Wort passt bei keiner Breite in
   eine Zeile. Unter 420 px begrenzt die Schriftgröße sich so, dass das
   längste untrennbare Wort (UW-GENERALSANIERUNG, 14 em) in die Zeile passt;
   darüber gilt unverändert --fs-h2-col.
   Diese H2 laufen als ganze Zeilenmaske ohne Split. */
article.case .h2{-webkit-hyphens:manual;hyphens:manual;font-size:min(var(--fs-h2-col),calc((100vw - 40px) / 14));}
@media(min-width:901px){
  article.case .wrap{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:clamp(30px,4vw,56px);}
  article.case.flip .wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);}
}
.wp-list.dark li{color:var(--ink);border-bottom-color:var(--line-l);}

/* ---------- Kontakt ---------- */
.con-grid{margin-bottom:var(--sp-1);}
.con .small{color:var(--mut-l);}
/* Tap-Ziel mindestens 44 px; der Wert ohne Link (Standort) bekommt dieselbe
   Zeilenbox, damit die drei Karten auf einer Linie stehen */
.con .cv,.con a.cv{display:inline-flex;align-items:center;min-height:44px;padding:0;}
/* Fehlerzustand erst nach Nutzereingabe */
.field input:user-invalid,.field textarea:user-invalid{border-color:var(--red);}
.field:has(:user-invalid) label{color:var(--red-deep);}
.field:has(:user-invalid)::after{transform:scaleX(1);}
/* Absenden: der Pfeil schießt kurz nach rechts (pages.js, 600 ms) */
#contactForm .btn.sending .arr{transform:translateX(8px);}
/* Externe Ziele: der Pfeil zeigt nach draußen, nicht nach rechts */
@media(hover:hover){ .btn[target="_blank"]:hover .arr{transform:translate(3px,-3px);} }

/* ---------- Statik-Modus: alles sofort sichtbar ---------- */
html.static .steps::before{scale:none!important;transition:none!important;}
html.static .det-body,html.static .job-body{animation:none!important;}
html.static #contactForm .btn.sending .arr{transform:none;}

/* ---------- Reduced Motion: jede Bewegung aus ---------- */
@media(prefers-reduced-motion:reduce){
  .steps::before{scale:none!important;transition:none!important;}
  .det .det-body,.job .job-body{animation:none!important;}
  .det summary:active,.job summary:active{transform:none;}
  #contactForm .btn.sending .arr{transform:none;}
}

/* Honigtopf im Kontaktformular: für Menschen unsichtbar, für Programme sichtbar.
   Nicht display:none — das überspringen manche Programme absichtlich. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-fehler{
  margin:0 0 16px;padding:12px 14px;border-radius:var(--r-sm);
  border:1px solid var(--red);background:rgba(232,51,31,.08);
  color:var(--ink);font-size:14px;line-height:1.5;
}