/* ============================================================
   components.css — geteilte Komponenten (Hero, Feature, Subhero,
   Prozess/Flowsteps, CTA-Band, Foto-Medien, Karten-Icons, Partner).
   Markenneutral, gefärbt über --accent (data-brand). Genutzt von
   HMG Industry UND HMG Construct. Baut auf base.css + effects.css.
   Industry-spezifisch nur: .hero__viz/.hero__readout (Sensor-Grafik).
   ============================================================ */

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; min-height:92svh;
  display:flex; align-items:center; padding-top:120px;
  background:
    radial-gradient(120% 90% at 78% 18%, var(--accent-tint), transparent 55%),
    linear-gradient(180deg,var(--ink-2),var(--ink) 60%);
}
.hero__inner{ display:grid; gap:clamp(32px,4vw,56px); align-items:center; grid-template-columns:1fr; }
@media (min-width:980px){ .hero__inner{ grid-template-columns:1.05fr .95fr; } }
.hero__copy{ max-width:620px; position:relative; z-index:2; }
.hero h1{ margin:1.2rem 0; }
.hero h1 .accent{ color:var(--accent-2); }
.hero__cta{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:2rem; }
.hero__meta{ display:flex; gap:2rem; flex-wrap:wrap; margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid var(--line); }

/* Hero-Visualisierung (Canvas + SVG) */
.hero__viz{ position:relative; z-index:1; aspect-ratio:1/1; width:100%; max-width:540px; margin-inline:auto; }
.hero__viz svg{ width:100%; height:100%; overflow:visible; }
.hero__viz .ring{ fill:none; stroke:var(--line-strong); }
.hero__viz .ring--accent{ stroke:var(--accent); }
.hero__viz .dot{ fill:var(--accent-2); }
.hero__viz .label{ font-family:var(--font-mono); font-size:11px; fill:var(--fg-mute); }
.hero__viz .wave{ fill:none; stroke:var(--accent-2); stroke-width:2; }
.hero__readout{
  position:absolute; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.05em;
  color:var(--fg-soft); background:rgba(12,15,21,.92); border:1px solid var(--line);
  padding:.5em .8em; border-radius:3px;
}
.hero__readout .k{ color:var(--accent-2); }
.hero__readout--1{ top:8%; right:0; }
.hero__readout--2{ bottom:14%; left:-4%; }
/* Mobil steht die Viz ueber die volle Spaltenbreite - der bewusste Ueberstand
   nach links wuerde dann aus der Content-Breite laufen. */
@media (max-width:900px){ .hero__readout--2{ left:0; } }

/* Hintergrund-Grid für Hero */
.hero .grid-bg{ opacity:.6; -webkit-mask-image:radial-gradient(120% 90% at 70% 20%,#000 20%,transparent 75%); mask-image:radial-gradient(120% 90% at 70% 20%,#000 20%,transparent 75%); }

/* Scan-Linie über der Viz */
.hero__viz .scanline{ stroke:var(--accent-2); stroke-width:1; opacity:.5; }

/* ---------- Leistungs-Grid ---------- */
.svc-card .card-icon{ color:var(--accent-2); }
.svc-card .tag{ margin-top:1rem; }

/* ---------- Technologien & Partner ---------- */
.partner-grid{ display:grid; gap:clamp(16px,2vw,24px); grid-template-columns:1fr; }
/* vier Technologien: 2x2 ab 860px, damit die Karten Luft fuer Kennzahlen behalten */
@media (min-width:860px){ .partner-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:860px){ .partner-grid:has(> :nth-child(3):last-child){ grid-template-columns:repeat(3,1fr); } }
/* Ungerade Anzahl (5 Technologien): die letzte Karte stuende sonst allein an der linken
   Kante, daneben eine leere Haelfte. Ueber beide Spalten legen und mittig auf Kartenbreite
   halten - sie sieht dann aus wie die anderen, steht aber zentriert. */
@media (min-width:860px){
  .partner-grid:has(> :nth-child(5):last-child) > :last-child{
    grid-column:1 / -1; justify-self:center;
    width:calc(50% - clamp(16px,2vw,24px) / 2); }
}
.partner{
  position:relative; border:1px solid var(--line); background:var(--ink-2);
  padding:clamp(24px,2.5vw,34px); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column;
}
.partner::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--accent),transparent); }
.partner__name{ font-family:var(--font-display); font-size:1.35rem; font-weight:600; letter-spacing:-.01em; }
.partner__tag{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-2); margin-top:.4rem; line-height:1.5; }
/* zweizeilige Reserve, damit Beschreibung + Kennzahlen aller Karten einer Reihe fluchten */
@media (min-width:860px){ .partner-grid .partner__tag{ min-height:3em; } }
.partner__desc{ font-size:.95rem; margin-top:1rem; flex:1 1 auto; }  /* nimmt die Resthoehe auf -> Kennzahlen aller Karten fluchten */
.partner__specs{ margin-top:1.4rem; display:flex; flex-direction:column; gap:.6rem; }
.partner__specs li{ display:flex; justify-content:space-between; gap:1rem; font-family:var(--font-mono); font-size:.78rem; padding-bottom:.6rem; border-bottom:1px dashed var(--line); }
.partner__specs .v{ color:#fff; text-align:right; }
.partner__powered{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; color:var(--fg-mute); }

/* Fussleiste der Technologiekarte: Herkunftszeile links, Popup-Aufruf rechts */
.partner__foot{ margin-top:auto; padding-top:1.4rem; display:flex; align-items:center;
  justify-content:space-between; column-gap:1rem; row-gap:.85rem; flex-wrap:wrap; }
.partner__more{
  position:static; display:inline-flex; align-items:center; gap:.5em; cursor:pointer;
  padding:.5em .85em; background:none; color:var(--accent-2);
  border:1px solid var(--line-strong); border-radius:999px;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  transition:color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.partner__more svg{ width:1em; height:1em; transition:transform var(--t-fast); }
/* Ganze Karte klickbar - der Button bleibt der zugaengliche Name dafuer */
.partner__more::after{ content:""; position:absolute; inset:0; }
.partner:hover .partner__more,
.partner__more:focus-visible{ color:#fff; border-color:var(--accent); background:var(--accent-strong); }
.partner:hover .partner__more svg{ transform:rotate(90deg); }
.partner__more:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.partner:has(.partner__more){ transition:border-color var(--t-fast), transform var(--t-fast); }
.partner:has(.partner__more):hover{ border-color:var(--line-strong); transform:translateY(-3px); }
@media (prefers-reduced-motion:reduce){
  .partner:has(.partner__more):hover{ transform:none; }
  .partner:hover .partner__more svg{ transform:none; }
}

/* ---------- Prozess / Ablauf (dunkel, animierte Schiene) ---------- */
.process-sec{ position:relative; overflow:clip; } /* clip statt hidden: hidden bricht position:sticky der Schritt-Karten */
.process-sec::before{ /* dezenter radialer Glow statt heller Fläche */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(80% 60% at 50% 12%, var(--accent-tint), transparent 70%);
}
.flowsteps{ position:relative; margin-top:clamp(2.5rem,5vw,4rem); }
.flowsteps__rail{ position:absolute; left:6%; right:6%; top:27px; height:2px;
  background:linear-gradient(90deg,transparent,var(--line-strong) 12%,var(--line-strong) 88%,transparent); }
.flowsteps__rail span{ position:absolute; top:-1px; left:0; width:90px; height:4px;
  background:linear-gradient(90deg,transparent,var(--accent-2),transparent);
  border-radius:4px; animation:rail-run 5.5s linear infinite; will-change:transform; }
/* transform statt left: 'left' hat pro Frame Layout auf dem Main-Thread ausgelöst — endlos. */
@keyframes rail-run{
  0%{ transform:translateX(-100%); opacity:0; }
  8%,92%{ opacity:1; }
  100%{ transform:translateX(calc(100cqw + 100%)); opacity:0; } }
.flowsteps__rail{ container-type:inline-size; }
@media (max-width:759px){ .flowsteps__rail{ display:none; } }

.flowsteps__grid{ display:grid; gap:clamp(2rem,3vw,2.4rem); grid-template-columns:1fr; position:relative; z-index:1; }
@media (min-width:760px){ .flowsteps__grid{ grid-template-columns:repeat(4,1fr); } }
/* Die // sollen auf einer Flucht sitzen. Gleich lange Texte allein reichen nicht
   (die Zeilenzahl haengt von der Spaltenbreite ab), deshalb sitzt die Meta-Zeile
   am unteren Ende der Karte. Mike 10.09. */
.fstep{ position:relative; display:flex; flex-direction:column; height:100%; }
.fstep__node{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:var(--ink); border:1px solid var(--line-strong); position:relative; z-index:2;
  color:var(--accent-2); margin-bottom:1.2rem;
  transition:border-color var(--t), box-shadow var(--t), transform var(--t) var(--ease), color var(--t); }
.fstep__node svg{ width:24px; height:24px; }
.fstep__num{ position:absolute; top:-8px; right:-10px; font-family:var(--font-mono); font-size:.64rem;
  letter-spacing:.05em; background:var(--accent-strong); color:#fff; padding:.15em .45em; border-radius:2px; z-index:3; }
.fstep:hover .fstep__node,
.fstep.is-lit .fstep__node{ border-color:var(--accent); color:#fff; transform:translateY(-3px);
  box-shadow:0 0 0 6px var(--accent-tint), var(--shadow-accent); }
.fstep h3{ font-size:1.12rem; margin-bottom:.5rem; }
.fstep p{ font-size:.93rem; }
.fstep__meta{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; color:var(--fg-mute);
  margin-top:auto; padding-top:.8rem; display:block; }   /* auto: haelt die // auf einer Flucht */

/* ---------- Ablauf mobil: Schritte als Karten mit Container, gestapelt, scroll-aktiv ----------
   Unter 760px faellt die Schiene weg; die vier Schritte bekommen einen eigenen
   Rahmen und haengen sich wie die Leistungskarten unter der Kopfleiste ein.
   shared.js markiert den gerade oben liegenden Schritt mit .is-current. */
@media (max-width:759px){
  .flowsteps{ margin-top:clamp(1.6rem,4vw,2.4rem); }
  .flowsteps__grid{ gap:14px; padding-bottom:30px; }
  .fstep{
    position:sticky; top:calc(var(--stack-top,76px) + var(--i,0) * 10px);
    background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius);
    padding:22px 20px 20px; overflow:hidden;
    box-shadow:0 -14px 34px -14px rgba(0,0,0,.75);
    transition:border-color var(--t), box-shadow var(--t);
  }
  .fstep::after{ /* diagonale Akzent-Ecke wie bei .card */
    content:""; position:absolute; top:0; right:0; width:0; height:0;
    border-style:solid; border-width:0 26px 26px 0;
    border-color:transparent var(--line) transparent transparent; transition:border-color var(--t);
  }
  .fstep:nth-child(1){ --i:0; } .fstep:nth-child(2){ --i:1; } .fstep:nth-child(3){ --i:2; } .fstep:nth-child(4){ --i:3; }
  .fstep__node{ width:52px; height:52px; margin-bottom:1rem; }
  .fstep__num{ top:-6px; right:-8px; }
  .fstep h3{ font-size:1.15rem; }
  .fstep__meta{ margin-top:.6rem; }
  .fstep.is-current{ border-color:var(--accent); }
  .fstep.is-current::after{ border-right-color:var(--accent); }
  .fstep.is-current .fstep__node{ border-color:var(--accent); color:#fff; box-shadow:0 0 0 6px var(--accent-tint), var(--shadow-accent); }
}
@media (prefers-reduced-motion:reduce){ .fstep, .fstep::after{ transition:none; } }

/* ---------- Split Feature (Bild/Text Wechsel) ---------- */
.feature{ display:grid; gap:clamp(28px,4vw,60px); align-items:center; grid-template-columns:1fr; }
@media (min-width:900px){ .feature{ grid-template-columns:1fr 1fr; } .feature--rev .feature__media{ order:2; } }
.feature__media{
  position:relative; aspect-ratio:4/3; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--ink-2); overflow:hidden;
}
.feature__media svg{ width:100%; height:100%; position:relative; z-index:1; }
/* dezentes Hintergrundfoto hinter der SVG-Animation */
.feature__media .fm-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.20; z-index:0; }
.feature__media.has-bg::after{ content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(155deg, rgba(12,15,21,.45), rgba(12,15,21,.84)); }
.feature__media.has-bg::before{ content:""; position:absolute; top:0; left:0; width:60px; height:3px; background:var(--accent); z-index:2; }
.feature__media .media-photo__cap{ z-index:2; }
.feature ul.checks{ margin-top:1.4rem; display:flex; flex-direction:column; gap:.8rem; }
.checks li{ display:flex; gap:.8rem; align-items:flex-start; font-size:.97rem; color:var(--fg-soft); }
/* Checks auch in Karten nutzbar (z. B. Zusatzleistungen/Vorteile auf Sample Management) */
.card ul.checks{ margin-top:1.1rem; display:flex; flex-direction:column; gap:.7rem; }
.checks li svg{ width:20px; height:20px; flex-shrink:0; color:var(--accent-2); margin-top:.2rem; }

/* ---------- CTA-Band ---------- */
.cta-band{ position:relative; overflow:hidden; background:linear-gradient(120deg,var(--ink-3),var(--ink-2)); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(36px,5vw,72px); text-align:center; }
.cta-band::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 120% at 50% 0%, var(--accent-tint), transparent 70%); pointer-events:none; }
.cta-band .btn-row{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; }

/* ---------- Foto-Medien mit Brand-Treatment ---------- */
.media-photo{ position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); aspect-ratio:4/3; }
.media-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .32s var(--ease); }
.media-photo:hover img{ transform:scale(1.05); }
.media-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,17,24,.12), rgba(11,17,24,.66)); pointer-events:none; }
.media-photo::before{ content:""; position:absolute; top:0; left:0; width:64px; height:3px; background:var(--accent); z-index:3; }
.media-photo__grid{ position:absolute; inset:0; z-index:1;
  background-image:linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:42px 42px; opacity:.35; mix-blend-mode:overlay; pointer-events:none; }
.media-photo__cap{ position:absolute; left:14px; bottom:12px; z-index:3; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; color:#fff; background:rgba(11,17,24,.62); padding:.32em .7em; border:1px solid var(--line-strong); }
.media-photo__cap b{ color:var(--accent-2); font-weight:500; }

/* ---------- Detail-Karten-Icons + Index ---------- */
.card .card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem; }
.card .card-ic{ width:44px; height:44px; border:1px solid var(--line); border-radius:var(--radius);
  display:grid; place-items:center; color:var(--accent-2); margin-bottom:0; flex-shrink:0;
  transition:border-color var(--t), color var(--t), background var(--t); }
.card .card-ic svg{ width:22px; height:22px; }
.card:hover .card-ic{ border-color:var(--accent); background:var(--accent-tint); color:#fff; }
.card .card-no{ font-family:var(--font-mono); font-size:1.05rem; font-weight:500; letter-spacing:.04em;
  color:var(--accent-2); opacity:.4; transition:opacity var(--t); }
.card:hover .card-no{ opacity:.85; }
/* Detail-Karte: Hover-Glow + linke Akzentkante */
.grid--3 > .card{ position:relative; }
.grid--3 > .card::before{ content:""; position:absolute; left:0; top:18px; bottom:18px; width:2px;
  background:var(--accent); transform:scaleY(0); transform-origin:top; transition:transform var(--t) var(--ease); }
.grid--3 > .card:hover{ box-shadow:0 22px 60px -28px var(--accent); }
.grid--3 > .card:hover::before{ transform:scaleY(1); }

/* ---------- Kennzahlen-/Specs-Band ---------- */
.specs-panel{ position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-lg);
  background:linear-gradient(120deg,var(--ink-3),var(--ink-2)); padding:clamp(28px,4vw,48px); }
.specs-panel::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 130% at 0% 0%, var(--accent-tint), transparent 60%); }
.specs-head{ position:relative; z-index:1; max-width:46ch; margin-bottom:clamp(1.6rem,3vw,2.4rem); }
.specs-head .eyebrow{ margin-bottom:.7rem; }
.specs-head h3{ font-size:clamp(1.3rem,2.4vw,1.9rem); color:#fff; }
.specs{ position:relative; z-index:1; display:grid; gap:1.6rem 1.2rem; grid-template-columns:repeat(2,1fr); }
@media (min-width:760px){ .specs{ grid-template-columns:repeat(4,1fr); } }
.specnum{ position:relative; padding-top:1.05rem; border-top:1px solid var(--line-strong); }
.specnum::before{ content:""; position:absolute; top:-1px; left:0; width:38px; height:2px; background:var(--accent); }
.specnum b{ display:block; font-family:var(--font-display); font-size:clamp(1.5rem,2.6vw,2.3rem); font-weight:600;
  letter-spacing:-.02em; color:#fff; line-height:1.05; }
.specnum b .u{ color:var(--accent-2); }
.specnum span{ display:block; margin-top:.4rem; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--fg-mute); }

/* ---------- Foto-Reihe „Eindrücke“ (Construct) ---------- */
.photostrip{ display:grid; gap:clamp(12px,1.4vw,18px); grid-template-columns:1fr; }
@media (min-width:680px){ .photostrip{ grid-template-columns:repeat(3,1fr); } }
.photostrip figure{ position:relative; margin:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); aspect-ratio:4/3; }
.photostrip img{ width:100%; height:100%; object-fit:cover; transition:transform .32s var(--ease); }
.photostrip figure:hover img{ transform:scale(1.06); }
.photostrip figure::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(18,13,10,.82)); }
.photostrip figcaption{ position:absolute; left:13px; bottom:11px; z-index:1; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; color:#fff; }
.photostrip figcaption b{ display:block; font-family:var(--font-display); font-size:.98rem; font-weight:600; letter-spacing:0; }
.photostrip figcaption span{ color:var(--accent-2); text-transform:uppercase; }

/* ---------- Subpage Hero (Leistungs-Seiten) ---------- */
.subhero{ position:relative; padding:140px 0 60px; overflow:hidden; background:linear-gradient(180deg,var(--ink-2),var(--ink)); }
.subhero__icon{ width:40px; height:40px; border:1px solid var(--line-strong); border-radius:var(--radius);
  display:grid; place-items:center; color:var(--accent-2); background:var(--ink-2); position:relative; overflow:hidden;
  margin-left:.7em; flex-shrink:0; }
.subhero__icon svg{ width:21px; height:21px; position:relative; z-index:1; }
.subhero__icon::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 120% at 30% 20%, var(--accent-tint), transparent 70%); }
.breadcrumb{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.06em; color:var(--fg-mute); display:flex; gap:.5em; align-items:center; flex-wrap:wrap; }
.breadcrumb a{ color:var(--fg-mute); } .breadcrumb a:hover{ color:var(--accent-2); }
.breadcrumb .sep{ color:var(--line-strong); }
.subhero h1{ margin:1.4rem 0 1rem; max-width:18ch; }
.subhero .lead{ max-width:62ch; }
.subhero__tags{ margin-top:1.8rem; }

/* Leistungsbild dezent im Subhero: liegt HINTER dem Raster (gleicher z-index,
   im DOM davor) und blendet nach unten aus, damit der Uebergang zur naechsten
   Sektion ruhig bleibt. Zweite Maske haelt die Textseite frei. */
.subhero__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 45%;
  z-index:var(--z-grid); pointer-events:none;
  opacity:.30; filter:saturate(.85);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 42%,transparent 94%),
                     linear-gradient(90deg,transparent 0%,#000 58%);
          mask-image:linear-gradient(180deg,#000 0%,#000 42%,transparent 94%),
                     linear-gradient(90deg,transparent 0%,#000 58%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
/* Inhalt muss ueber den absolut positionierten Ebenen liegen */
.subhero > .container{ position:relative; z-index:var(--z-base); }
/* Schmale Viewports: der Text laeuft ueber die volle Breite, die seitliche
   Maske haelt ihn nicht mehr frei -> Bild deutlich zuruecknehmen.
   Gemessen: sonst faellt der Lead auf helleren Motiven unter 4.5:1. */
@media (max-width:900px){
  .subhero__bg{
    opacity:.15;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 30%,transparent 88%);
            mask-image:linear-gradient(180deg,#000 0%,#000 30%,transparent 88%);
  }
}


/* ---------- Reduced Motion (fehlte in dieser Datei) ---------- */
@media (prefers-reduced-motion:reduce){
  .flowsteps__rail span{ animation:none; opacity:.6; }
  .media-photo img, .photostrip img, .fstep__node, .feature__media img{ transition:none !important; }
  .fstep:hover .fstep__node{ transform:none; }
}

/* ---------- Popup / Lightbox (Construct-Kacheln UND Industry-Technologien) ----------
   Markup-neutral: Farben kommen ueber --accent, also brandrichtig auf beiden Seiten. */
.proj__detail{ display:none; }
/* ---------- Lightbox / Projekt-Popup ---------- */
.lightbox{ position:fixed; inset:0; z-index:200; display:flex;
  align-items:center; justify-content:center; padding:clamp(12px,3vw,40px);
  /* display:none -> flex im selben Frame wie .is-open hat den Startzustand nie
     gerendert: die Enter-/Exit-Transition war toter Code. visibility kann
     verzögert werden, dadurch laufen beide Richtungen wirklich. */
  visibility:hidden; pointer-events:none;
  transition:visibility 0s linear .18s; }
.lightbox.is-open{ visibility:visible; pointer-events:auto; transition:visibility 0s; }
.lightbox__scrim{ position:absolute; inset:0; background:rgba(8,5,4,.78);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .3s var(--ease); }
.lightbox.is-open .lightbox__scrim{ opacity:1; }
.lightbox__panel{ position:relative; z-index:1; width:min(1040px,100%);
  max-height:calc(100svh - clamp(24px,6vw,80px)); overflow:hidden;
  display:grid; grid-template-columns:1fr;
  /* minmax(0,1fr) statt auto: eine auto-Zeile waechst ueber die max-height des
     Panels hinaus, dann klemmt overflow:hidden den Rest der Textspalte ab. */
  grid-template-rows:auto minmax(0,1fr); background:var(--ink-2);
  border:1px solid var(--line-strong); border-radius:var(--radius);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);
  transform:translateY(16px) scale(.985); opacity:0;
  transition:transform .18s var(--ease), opacity .18s var(--ease); }
.lightbox.is-open .lightbox__panel{ transform:none; opacity:1;
  transition:transform .28s var(--ease), opacity .28s var(--ease); }
@media (min-width:860px){ .lightbox__panel{ grid-template-columns:1.35fr 1fr;
  grid-template-rows:minmax(0,1fr); } }

.lightbox__close{ position:absolute; top:12px; right:12px; z-index:5;
  width:40px; height:40px; display:grid; place-items:center; cursor:pointer;
  color:#fff; background:rgba(0,0,0,.5); border:1px solid var(--line-strong); border-radius:50%;
  transition:background var(--t-fast), transform var(--t-fast); }
.lightbox__close:hover{ background:var(--accent); transform:rotate(90deg); }
.lightbox__close svg{ width:18px; height:18px; }

/* Medien-Spalte */
.lightbox__media{ position:relative; background:#000; min-height:240px;
  display:flex; flex-direction:column; }
.lightbox__img{ width:100%; flex:1; min-height:0; object-fit:cover; display:block;
  aspect-ratio:4/3; transition:opacity .18s var(--ease); }
/* Wechsel: nur leicht abdunkeln statt ganz ausblenden — bei schnellem Klicken
   sah eine volle Ausblendung wie ein schwarzes Loch aus. */
.lightbox__img.is-swapping{ opacity:.35; }
@media (min-width:860px){ .lightbox__img{ aspect-ratio:auto; height:100%; } }
/* Die Vorschauleiste gehoert mit in die Medienspalte, die Pfeile sollen aber auf der
   BILDMITTE sitzen. Frueher stand hier `calc(50% - 26px)` — eine fest verdrahtete
   Annahme von 52 px Leistenhoehe; real sind es 74 px, die Pfeile sassen also 11 px zu
   tief und wanderten, sobald sich die Leiste aenderte. shared.js misst sie jetzt und
   setzt --lb-thumbs; der Wert hier ist nur die Notversorgung ohne JS. */
.lightbox__nav{ position:absolute; top:calc((100% - var(--lb-thumbs, 74px)) / 2); transform:translateY(-50%);
  width:44px; height:44px; display:grid; place-items:center; cursor:pointer; z-index:3;
  color:#fff; background:rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.18); border-radius:50%;
  transition:background var(--t-fast); }
.lightbox__nav:hover{ background:var(--accent); }
.lightbox__nav svg{ width:22px; height:22px; }
.lightbox__nav--prev{ left:12px; }
.lightbox__nav--next{ right:12px; }
.lightbox--single .lightbox__nav{ display:none; }
/* min-width:0 an Medienspalte UND Leiste: ohne das kann das Grid-Kind nicht unter
   seine Inhaltsbreite schrumpfen -- 10 Vorschaubilder haben sonst die Textspalte gequetscht. */
.lightbox__media{ min-width:0; }
.lightbox__thumbs{ display:flex; gap:8px; padding:10px; background:rgba(0,0,0,.55);
  overflow-x:auto; scrollbar-width:thin; min-width:0; }
.lightbox--single .lightbox__thumbs{ display:none; }
.lightbox__thumbs button{ flex:0 0 auto; width:74px; height:54px; padding:0; cursor:pointer;
  border:2px solid transparent; border-radius:6px; overflow:hidden; background:none;
  opacity:.55; transition:opacity var(--t-fast), border-color var(--t-fast); }
.lightbox__thumbs button:hover{ opacity:.85; }
.lightbox__thumbs button.is-active{ opacity:1; border-color:var(--accent); }
.lightbox__thumbs img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Text-Spalte */
/* min-height:0 wie min-width:0 bei den Vorschaubildern: ohne das kann das Grid-Kind
   nicht unter seine Inhaltshoehe schrumpfen -- overflow-y:auto blieb wirkungslos, das
   Panel schnitt die Textspalte ab und der Knopf am Ende war nicht erreichbar. */
.lightbox__body{ padding:clamp(22px,3vw,34px); overflow-y:auto; min-height:0; }
.lightbox__cat{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-2); }
.lightbox__name{ font-family:var(--font-display); font-size:clamp(1.4rem,2.6vw,1.9rem);
  font-weight:600; letter-spacing:-.01em; color:#fff; margin:.4rem 0 .9rem; }
/* Fliesstext auf etwa Bildhoehe kuerzen, Rest per "weiterlesen" (Mike 10.09.).
   --lb-lead-max setzt shared.js aus der gemessenen Bildhoehe; ohne JS bleibt der
   Text vollstaendig sichtbar. */
.lightbox__lead{ color:var(--fg-soft); line-height:1.6; margin-bottom:1.4rem; }
.lightbox__lead.is-clamped{ position:relative; overflow:hidden;
  max-height:var(--lb-lead-max,none); }
.lightbox__lead.is-clamped::after{ content:""; position:absolute; left:0; right:0; bottom:0;
  height:3.2em; pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--ink-2)); }
.lightbox__more{ display:inline-flex; align-items:center; gap:.45em; margin:-.6rem 0 1.4rem;
  padding:0; background:none; border:0; cursor:pointer;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.05em;
  color:var(--accent-2); transition:color var(--t-fast); }
.lightbox__more:hover{ color:#fff; }
.lightbox__more svg{ width:14px; height:14px; transition:transform var(--t-fast) var(--ease); }
.lightbox__more[aria-expanded="true"] svg{ transform:rotate(180deg); }
.lightbox__facts{ list-style:none; margin:0 0 1.6rem; padding:0;
  border-top:1px solid var(--line); }
.lightbox__facts li{ display:flex; justify-content:space-between; gap:1rem;
  padding:.7rem 0; border-bottom:1px solid var(--line); font-size:.92rem; }
.lightbox__facts li > span{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--fg-mute); flex:0 0 auto; padding-top:.15rem; }
/* aktuelle Leistungsseite wird in "Im Einsatz bei" nicht verlinkt, nur gedaempft */
.lightbox__facts b .is-current{ color:var(--fg-mute); }
.lightbox__facts li b{ color:var(--fg); font-weight:500; text-align:right; }
.lightbox__facts a{ color:var(--accent-2); text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color var(--t-fast); }
.lightbox__facts a:hover{ border-bottom-color:currentColor; }
.lightbox__facts a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
body.lightbox-lock{ overflow:hidden; }
/* Popup ohne Bilder (Technologien haben noch keine Referenzfotos) */
.lightbox--noimg .lightbox__media{ display:none; }
.lightbox--noimg .lightbox__panel{ grid-template-rows:minmax(0,1fr); }
@media (min-width:860px){ .lightbox--noimg .lightbox__panel{ grid-template-columns:1fr; } }
.lightbox--noimg .lightbox__panel{ width:min(660px,100%); }
/* Ohne Medienspalte steht der Schliessen-Knopf ueber der Kopfzeile - Platz freihalten */
.lightbox--noimg .lightbox__cat,
.lightbox--noimg .lightbox__name{ padding-right:52px; }
@media (prefers-reduced-motion:reduce){
  .lightbox, .lightbox__panel, .lightbox__scrim, .lightbox__img{ transition:none !important; }
}

/* Technologie-Popups zeigen Diagramme und Bedienoberflaechen: nie anschneiden, auf Dunkel einpassen */
.lightbox--tech .lightbox__img{ object-fit:contain; background:#0e0e12; }
.lightbox--tech .lightbox__media{ background:#0e0e12; }
/* Die Technologie-Bilder sind KOMPLETTE Folienseiten der Kunden-PDFs (16:9).
   Vorschauleiste deshalb im Folienformat und ebenfalls einpassend - mit
   'cover' in einer 74x54-Kachel schnitt sie beide Seitenraender der Folie ab,
   und dann sind zwei Folien nicht mehr voneinander zu unterscheiden. */
.lightbox--tech .lightbox__thumbs button{ width:96px; height:54px; }
.lightbox--tech .lightbox__thumbs img{ object-fit:contain; background:#0e0e12; }
/* Mobil steht das Hauptbild sonst im 4:3-Rahmen und die Folie wird unnoetig klein */
@media (max-width:859px){ .lightbox--tech .lightbox__img{ aspect-ratio:16/9; } }
/* Am Desktop ist die schmale Medienspalte fuer eine 16:9-Folie das falsche Format:
   die Folie stand mit 596x336 in einer 596x812-Flaeche, also 476 px schwarzem Leerraum,
   und Beschriftungen auf den Bedienoberflaechen waren nicht mehr lesbar. Breiteres
   Panel, breitere Medienspalte, und die Spalte ist nur so hoch wie die Folie.
   Fester 16:9-Rahmen, damit das Panel beim Weiterklicken nicht springt. */
@media (min-width:860px){
  .lightbox--tech .lightbox__panel{ width:min(1240px,100%); grid-template-columns:1.9fr 1fr; }
  /* max-height + min-height:0: in niedrigen Fenstern (auch bei Browser-Zoom) ragte die
     zentrierte Medienspalte oben und unten aus dem Panel und wurde von overflow:hidden
     abgeschnitten — bei 1440x560 fehlten je 25 px des Bildes. */
  .lightbox--tech .lightbox__media{ align-self:center; background:transparent;
    max-height:100%; min-height:0; }
  /* flex:0 1 auto laesst die Folie schrumpfen statt anzuschneiden; object-fit:contain
     haelt sie dabei unverzerrt. */
  .lightbox--tech .lightbox__img{ aspect-ratio:16/9; height:auto; flex:0 1 auto; min-height:0; }
}

/* Niedrige Fenster (Laptop, Browser-Zoom): Kennwerte und Polster enger, damit die
   Textspalte des Technologie-Popups ohne Scrollen in den Rahmen passt. Ohne das
   blieben bei 1280x800 je nach Technologie 24-52 px uebrig und der Anfrage-Knopf
   wurde unten angeschnitten (gemessen). */
@media (min-width:860px) and (max-height:860px){
  .lightbox--tech .lightbox__body{ padding:clamp(18px,2.2vw,24px); }
  .lightbox--tech .lightbox__facts li{ padding:.45rem 0; }
  .lightbox--tech .lightbox__name{ margin:.3rem 0 .6rem; }
  .lightbox--tech .lightbox__lead{ margin-bottom:1rem; }
  .lightbox--tech .lightbox__facts{ margin-bottom:1.1rem; }
}

/* Technologie-Popups mobil: .lightbox__media hat min-height:240px. Bei 16:9-Bildern in schmalen
   Fenstern (390 px -> 364x205) zog das den Rahmen auf 240 px, object-fit:contain setzte oben und
   unten je ~17 px dunkle Balken (gemessen 11.09.2026 am DataCollector). */
@media (max-width:859px){ .lightbox--tech .lightbox__media{ min-height:0; } }