/* ============================================================
   PROZESS-SECTION /filmproduktion/   (Praefix t27-)
   Basiszustand = Breakdance-Editor, Mobil, reduced motion:
   alles untereinander, kein Pin. Der Zustand .is-enhanced
   setzt ausschliesslich proc-filmproduktion.js, nur im
   Desktop-Frontend.
   Grundlinie und Fuellung liegen im SELBEN absolut
   positionierten Wrapper auf top:50%. Ein zweiter, versetzter
   Balken ist damit konstruktiv ausgeschlossen. Diese
   Konstruktion nicht aufloesen.
   ============================================================ */

.t27-proc{
  --t27-bg-deep:#050505; --t27-card:#161618; --t27-white:#FFFFFF;
  --t27-off:#F3F3F3; --t27-muted:#91979E; --t27-accent:#FFA847;
  --t27-accent-hover:#BE831E; --t27-line:rgba(255,255,255,.08);
  --t27-dot:38px;
  position:relative; background:var(--t27-bg-deep);
}

/* Breakdance-Textelemente bringen eigene Wrapper mit, deshalb Vererbung erzwingen */
.t27-proc :where(p,h2,h3,div,span,ul,li){margin:0;}
.t27-proc .t27-chip *,.t27-proc .t27-step__idx *,.t27-proc .t27-node__dot *,
.t27-proc .t27-node__label *,.t27-proc .t27-out__key *,.t27-proc .t27-out__val *,
.t27-proc .t27-kicker *,.t27-proc .t27-rail__caption *{
  font:inherit;color:inherit;letter-spacing:inherit;line-height:inherit;margin:0;text-transform:inherit;}

.t27-proc__pin{padding:clamp(48px,8vh,96px) 6vw clamp(40px,6vh,80px);}
.t27-proc__inner{width:100%;max-width:1440px;margin:0 auto;}

.t27-proc__head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(24px,3.4vh,46px);}
.t27-kicker{font-family:'Urbanist',sans-serif;font-weight:700;font-size:12px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--t27-accent);display:flex;align-items:center;gap:14px;}
.t27-kicker::before{content:"";display:block;width:34px;height:1px;background:var(--t27-accent);}
.t27-proc__title{font-family:'Anton',sans-serif;text-transform:uppercase;font-weight:400;
  letter-spacing:0;font-size:clamp(30px,3.5vw,54px);line-height:1.02;color:var(--t27-white);max-width:20em;}
.t27-proc__sub{color:var(--t27-muted);font-size:15.5px;line-height:1.55;max-width:620px;}

.t27-stage{position:relative;}
.t27-step{display:block;padding:30px 0 36px;border-top:1px solid var(--t27-line);}
.t27-step__media{position:relative;overflow:hidden;border-radius:3px;background:var(--t27-card);
  aspect-ratio:16/10;margin-bottom:20px;}
.t27-step__media img,.t27-step__media video{width:100%;height:100%;object-fit:cover;display:block;}
/* EssentialElements\Image bringt eigene Huellen mit */
.t27-step__media .breakdance-image-container,
.t27-step__media .breakdance-image-clip{width:100%;height:100%;}
.t27-step__media .breakdance-image-object{width:100%;height:100%;object-fit:cover;display:block;}
.t27-step__frame{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);}
.t27-step__frame::before,.t27-step__frame::after{content:"";position:absolute;width:26px;height:26px;border:1px solid var(--t27-accent);opacity:.85;}
.t27-step__frame::before{top:14px;left:14px;border-right:0;border-bottom:0;}
.t27-step__frame::after{bottom:14px;right:14px;border-left:0;border-top:0;}
.t27-step__grain{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.20;
  background-image:radial-gradient(rgba(255,255,255,.5) .5px,transparent .5px);background-size:3px 3px;}

.t27-step__body{display:flex;flex-direction:column;gap:15px;}
.t27-step__meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.t27-step__idx{font-family:'Anton',sans-serif;font-size:15px;color:var(--t27-accent);letter-spacing:.08em;}
.t27-chip{font-family:'Urbanist',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--t27-muted);border:1px solid var(--t27-line);border-radius:2px;padding:5px 10px;}
.t27-step__title{font-family:'Anton',sans-serif;text-transform:uppercase;font-weight:400;letter-spacing:0;
  font-size:clamp(26px,2.8vw,44px);line-height:1.02;color:var(--t27-white);}
.t27-step__text{color:var(--t27-muted);font-size:16.5px;line-height:1.62;max-width:540px;}
.t27-out{display:flex;flex-direction:column;max-width:540px;margin-top:4px;}
.t27-out__row{display:flex;gap:12px;align-items:baseline;padding:10px 0;border-top:1px solid var(--t27-line);font-size:14.5px;color:var(--t27-off);}
.t27-out__row::before{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:var(--t27-accent);transform:translateY(-2px);}
.t27-out__key{font-family:'Urbanist',sans-serif;font-weight:700;color:var(--t27-white);font-size:14.5px;flex:0 0 auto;}
.t27-out__val{color:var(--t27-off);font-size:14.5px;}

.t27-rail{display:none;position:relative;margin-top:clamp(24px,4vh,52px);padding-top:18px;}
.t27-rail__track{position:relative;height:20px;}
.t27-rail__line{position:absolute;top:50%;left:calc(var(--t27-dot)/2);right:calc(var(--t27-dot)/2);height:1px;transform:translateY(-50%);background:rgba(255,255,255,.13);}
.t27-rail__fill{position:absolute;top:50%;left:calc(var(--t27-dot)/2);right:calc(var(--t27-dot)/2);height:1px;transform:translateY(-50%) scaleX(0);transform-origin:left center;background:var(--t27-accent);}
.t27-rail__nodes{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;}
.t27-node{position:relative;}
.t27-node__dot{position:relative;width:var(--t27-dot);height:var(--t27-dot);border-radius:50%;background:var(--t27-bg-deep);
  border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;
  font-family:'Anton',sans-serif;font-size:13px;color:var(--t27-muted);}
.t27-node__num{font:inherit;color:inherit;line-height:1;}
.t27-node__glow{position:absolute;inset:-8px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,168,71,.30);opacity:0;}
.t27-node__label{position:absolute;top:52px;left:0;white-space:nowrap;font-family:'Urbanist',sans-serif;
  font-weight:700;font-size:12.5px;color:var(--t27-muted);}
.t27-node:last-child .t27-node__label{left:auto;right:0;text-align:right;}
.t27-rail__caption{margin-top:56px;display:flex;justify-content:space-between;gap:20px;
  font-family:'Urbanist',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(145,151,158,.7);}

.t27-proc__cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:clamp(26px,4vh,46px);
  padding-top:26px;border-top:1px solid var(--t27-line);}
.t27-btn{display:inline-block;background:var(--t27-accent);color:#0A0A0B;font-family:'Urbanist',sans-serif;
  font-weight:700;font-size:15px;padding:16px 28px;border-radius:2px;text-decoration:none;transition:background .25s ease;}
.t27-btn:hover,.t27-btn:focus-visible{background:var(--t27-accent-hover);color:#0A0A0B;}
.t27-btn:focus-visible{outline:2px solid var(--t27-white);outline-offset:3px;}
.t27-proc__ctatext{color:var(--t27-muted);font-size:14px;max-width:420px;line-height:1.55;}

/* ---------- Enhanced: gepinnte Fassung, nur Desktop-Frontend ---------- */
@media (min-width:861px){
  .t27-proc.is-enhanced .t27-proc__pin{min-height:100vh;display:flex;align-items:center;
    padding:clamp(40px,7vh,90px) 6vw clamp(34px,6vh,80px);}
  .t27-proc.is-enhanced .t27-stage{min-height:clamp(240px,42vh,470px);}
  .t27-proc.is-enhanced .t27-step{position:absolute;inset:0;padding:0;border-top:0;
    display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:clamp(34px,4vw,72px);align-items:center;}
  .t27-proc.is-enhanced .t27-step__media{aspect-ratio:auto;height:clamp(230px,40vh,460px);margin-bottom:0;}
  .t27-proc.is-enhanced .t27-rail{display:block;}
  .t27-proc.is-enhanced .t27-proc__cta{border-top:0;padding-top:0;margin-top:clamp(20px,3vh,34px);}
}
/* Niedrige Fenster (1280x720 und flacher): Bildhoehe zurueck, nicht die Schrift.
   Ohne das steht der Abschluss-Knopf unter der Kante. */
@media (min-width:861px) and (max-height:820px){
  .t27-proc.is-enhanced .t27-step__media{height:clamp(190px,32vh,340px);}
  .t27-proc.is-enhanced .t27-stage{min-height:clamp(200px,34vh,360px);}
  .t27-proc__head{gap:10px;margin-bottom:clamp(16px,2.2vh,28px);}
  .t27-proc.is-enhanced .t27-rail{margin-top:clamp(18px,2.6vh,34px);}
  .t27-rail__caption{margin-top:48px;}
}
@media (max-width:520px){
  .t27-out__row{flex-wrap:wrap;}
  .t27-out__key{flex:1 0 100%;margin-bottom:2px;}
}
@media (prefers-reduced-motion: reduce){
  .t27-proc .t27-step{opacity:1 !important;visibility:visible !important;transform:none !important;}
}