/* =============================================================================
   "Was wir machen" — three working systems on a dark stage (inc/bmx-areas.php).

   A deep navy stage inside the white page. Each scene: the area's name set
   very large, one statement, the services as a line of links, one button,
   and a picture: the real client site and platform for Digital, one
   photograph each for IT & Netzwerk and Sicherheit. Hovering or focusing a
   service lights up its part of the picture (bmx-areas.js adds .has-hl /
   .is-hl). Scenes build once when they come into view (.is-in); continuous
   motion — the browser scrolling, events arriving — runs only while a
   scene is on screen (.is-live).

   Colours come from the Bemuar logo: indigo #1800A8 and blue #5070F8, on
   the brand's navy. No cream, no beige, no glow, no gradients.
   ============================================================================= */

@font-face{
  font-family:'Geist Mono';
  src:url(../fonts/geist-mono.woff2) format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}

.bwm{
  --bw-bg:#0A1016;
  --bw-panel:#111922;
  --bw-panel-2:#18222E;
  --bw-line:rgba(255,255,255,.09);
  --bw-line-2:rgba(255,255,255,.16);
  --bw-text:#EEF2F6;
  --bw-soft:#BFC9D4;
  --bw-muted:#8591A0;
  --bw-accent:#5070F8;
  --bw-accent-2:#93A6FF;
  --bw-indigo:#1800A8;
  --bw-rec:#E5484D;
  --bw-mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --bw-e:cubic-bezier(.2,.65,.2,1);
  --bw-pad:clamp(16px,3.2vw,48px);
  --bw-max:1400px;
  --bw-bleed:max(var(--bw-pad), calc((100vw - var(--bw-max)) / 2 + var(--bw-pad)));
  position:relative; overflow:clip;
  background:var(--bw-bg); color:var(--bw-text);
  padding-block:clamp(5rem,10vw,9rem) clamp(4rem,8vw,7rem);
}
.bwm-in{ max-width:var(--bw-max); margin-inline:auto; padding-inline:var(--bw-pad); }

/* ---- heading ---- */
.bwm-head{ display:grid; grid-template-columns:minmax(0,1fr); row-gap:1.25rem; margin-bottom:clamp(4rem,9vw,8rem); }
.bwm-eye{
  margin:0; font:500 12px/1 var(--bw-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--bw-accent-2);
}
.bwm .bwm-head h2{
  margin:0; color:var(--bw-text);
  font-size:clamp(2.6rem,6.2vw,5.8rem); font-weight:600; line-height:.96; letter-spacing:-.04em;
}
.bwm .bwm-head h2 span{ display:block; }
.bwm .bwm-head h2 span + span{ color:var(--bw-muted); }
.bwm-lede{ margin:0; max-width:40ch; color:var(--bw-soft); font-size:clamp(1.08rem,1.45vw,1.3rem); line-height:1.5; }
@media (min-width:1024px){
  .bwm-head{ grid-template-columns:minmax(0,8fr) minmax(0,4fr); column-gap:clamp(32px,5vw,80px); align-items:end; }
  .bwm-eye{ grid-column:1 / -1; }
  .bwm-lede{ padding-bottom:.6rem; }
}

/* ---- a scene ---- */
.bws{ position:relative; display:grid; grid-template-columns:minmax(0,1fr); row-gap:clamp(2rem,4vw,3rem); }
.bws + .bws{ margin-top:clamp(5rem,9vw,8rem); }
.bws-t{ margin:0; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.bwm .bws-t span{
  display:block; color:var(--bw-text);
  font-size:clamp(3rem,13vw,4.4rem); font-weight:600; line-height:.92; letter-spacing:-.045em;
}
.bws-s{ margin:1.3rem 0 0; max-width:32ch; color:var(--bw-soft); font-size:clamp(1.08rem,1.5vw,1.38rem); line-height:1.45; }
.bws-list{ list-style:none; margin:1.9rem 0 0; padding:0; display:flex; flex-wrap:wrap; align-items:baseline; row-gap:.5rem; }
.bws-list li{ display:inline-flex; align-items:baseline; }
.bws-list li:not(:last-child)::after{ content:"/"; margin:0 .7rem; color:rgba(255,255,255,.2); }
.bws-list a, .bws-list span{
  color:var(--bw-text); text-decoration:none; cursor:pointer;
  font-size:clamp(1.02rem,1.3vw,1.2rem); font-weight:500; line-height:1.35;
  background:linear-gradient(var(--bw-accent-2),var(--bw-accent-2)) 0 100% / 0 1px no-repeat;
  transition:color .3s var(--bw-e), background-size .35s var(--bw-e);
}
.bws-list span{ cursor:default; }
.bws-list a:hover, .bws-list a:focus-visible, .bws-list span:hover, .bws-list span:focus-visible,
.bws-list .is-hl{ color:var(--bw-accent-2); background-size:100% 1px; }
.bws-list a:focus-visible, .bws-list span:focus-visible{ outline:2px solid var(--bw-accent-2); outline-offset:4px; border-radius:2px; }
.bws-cta{
  display:inline-flex; align-items:center; gap:10px; margin-top:2.3rem; padding:14px 20px;
  background:var(--bw-accent); color:#fff; border-radius:6px; text-decoration:none;
  font:600 .98rem/1.1 var(--font-body,system-ui,sans-serif);
  transition:background .3s var(--bw-e);
}
.bws-cta:hover, .bws-cta:focus-visible{ background:#6A84FA; color:#fff; }
.bws-cta:focus-visible{ outline:2px solid var(--bw-accent-2); outline-offset:3px; }
.bws-arr{ width:17px; height:17px; flex:none; transition:transform .3s var(--bw-e); }
.bws-cta:hover .bws-arr{ transform:translateX(3px); }
[dir="rtl"] .bws-arr{ transform:scaleX(-1); }
[dir="rtl"] .bws-cta:hover .bws-arr{ transform:scaleX(-1) translateX(3px); }

.bws-vis{ position:relative; direction:ltr; min-width:0; }
.bws-sample{
  position:absolute; left:0; bottom:-30px;
  font:500 10.5px/1 var(--bw-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--bw-muted);
}
[dir="rtl"] .bws-sample{ left:auto; right:0; }

/* wide screens: three different compositions */
@media (min-width:1024px){
  .bws{ grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(24px,2.6vw,44px); align-items:center; }
  .bwm .bws-t span{ font-size:clamp(4.2rem,8.2vw,8.4rem); }

  /* Digital: text left, the devices run off the right edge */
  .bws--digital .bws-copy{ grid-column:1 / span 5; }
  .bws--digital .bws-vis{ grid-column:6 / -1; margin-inline-end:calc(-1 * var(--bw-bleed)); }

  /* IT & Netzwerk: a wide title row, the whole network below */
  .bws--it .bws-copy{
    grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    column-gap:clamp(32px,5vw,80px); align-items:end;
  }
  .bws--it .bws-t{ grid-row:1 / span 3; align-self:end; }
  .bws--it .bws-s{ margin-top:0; }
  .bws--it .bws-cta{ justify-self:start; }
  .bws--it .bws-vis{ grid-column:1 / -1; margin-top:clamp(1rem,3vw,2.5rem); }

  /* Sicherheit: cameras left, text right */
  .bws--sec .bws-vis{ grid-column:1 / span 7; grid-row:1; }
  .bws--sec .bws-copy{ grid-column:8 / -1; grid-row:1; }
  .bwm .bws--sec .bws-t span{ font-size:clamp(3.6rem,6.3vw,6.6rem); }
}

/* ---- building up (script on) ---- */
.bwm.is-js .bws-t span{ transform:translateY(104%); transition:transform 1s cubic-bezier(.16,.8,.2,1); }
.bwm.is-js .bws.is-in .bws-t span{ transform:none; }
.bwm.is-js .bws-s, .bwm.is-js .bws-list, .bwm.is-js .bws-cta{
  opacity:0; transform:translateY(14px); transition:opacity .7s var(--bw-e), transform .7s var(--bw-e);
}
.bwm.is-js .bws.is-in .bws-s{ opacity:1; transform:none; transition-delay:.18s; }
.bwm.is-js .bws.is-in .bws-list{ opacity:1; transform:none; transition-delay:.28s; }
.bwm.is-js .bws.is-in .bws-cta{ opacity:1; transform:none; transition-delay:.38s; }
.bwm.is-js .bws-vis{ opacity:0; transform:translateY(24px); transition:opacity .9s var(--bw-e) .15s, transform .9s var(--bw-e) .15s; }
.bwm.is-js .bws.is-in .bws-vis{ opacity:1; transform:none; }

/* ---- highlight: the rest of the picture steps back ---- */
.bws [data-part]{ transition:opacity .35s var(--bw-e), filter .35s var(--bw-e); }
.bwm .bws.has-hl [data-part]:not(.is-hl){ opacity:.28; filter:saturate(.4); }

/* =============================================================================
   01 Digital — a client site in the browser, our platform on the phone.
   ============================================================================= */
.dv{ position:relative; aspect-ratio:16 / 11; }
.dv-browser{
  position:absolute; top:0; right:0; width:86%;
  background:#fff; border-radius:10px 10px 5px 5px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 40px 80px -40px rgba(0,0,0,.8);
}
.dv-browser .bpx-bar{ height:34px; }
.dv-view{ aspect-ratio:900 / 540; overflow:hidden; background:#0E1B2C; }
.dv-view img{ display:block; width:100%; height:auto; max-width:none; }
.bwm.is-js .dv-view img{ animation:dv-read 18s var(--bw-e) infinite; animation-play-state:paused; }
.bwm.is-js .bws.is-live .dv-view img{ animation-play-state:running; }
@keyframes dv-read{
  0%, 14%  { transform:translateY(0); }
  46%, 62% { transform:translateY(-31%); }
  88%, 100%{ transform:translateY(0); }
}
.dv-phone{
  position:absolute; left:0; bottom:4%; width:24%; aspect-ratio:390 / 780;
  border:7px solid #1B222B; border-radius:28px; overflow:hidden; background:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 30px 60px -24px rgba(0,0,0,.85);
}
.dv-phone img{ display:block; width:100%; height:100%; max-width:none; object-fit:cover; object-position:top; }

/* =============================================================================
   02 IT & Netzwerk, 03 Sicherheit — one photograph each (CC0, graded to sit
   in the stage: warm tones pulled back, light falling off toward the edges).
   ============================================================================= */
.bws-photo{ position:relative; margin:0; overflow:hidden; border-radius:12px; background:var(--bw-panel); }
.bws-photo::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px var(--bw-line); pointer-events:none; }
.bws-photo--it{ aspect-ratio:12 / 5; }
.bws-photo--sec{ aspect-ratio:4 / 3; }
.bws-photo img{ display:block; width:100%; height:100%; max-width:none; object-fit:cover; }
/* the photo settles as its scene comes in */
.bwm.is-js .bws-photo img{ transform:scale(1.045); transition:transform 1.6s var(--bw-e) .1s; }
.bwm.is-js .bws.is-in .bws-photo img{ transform:none; }

/* =============================================================================
   Phones and small tablets
   ============================================================================= */
@media (max-width:759px){
  .bws-vis{ margin-top:.5rem; }
  /* the phone overlaps the browser's lower edge and stands below it */
  .dv{ aspect-ratio:auto; display:grid; padding-bottom:28vw; }
  .dv-browser{ position:relative; width:100%; }
  .dv-phone{ position:absolute; left:auto; right:4%; top:auto; bottom:0; width:30%; border-width:5px; border-radius:20px; }
  .bws-photo--it{ aspect-ratio:4 / 3; }
}
@media (min-width:760px) and (max-width:1023px){
  .bwm .bws-t span{ font-size:clamp(4rem,11vw,6.5rem); }
}

/* Arabic joins its letters: no tracking */
:lang(ar) .bwm{ --bw-mono:var(--font-body,system-ui,sans-serif); }
:lang(ar) .bwm *{ letter-spacing:0 !important; }

/* ---- reduced motion: the finished picture, nothing moving ---- */
@media (prefers-reduced-motion:reduce){
  .bwm *, .bwm *::before, .bwm *::after{ transition:none !important; animation:none !important; }
  .bwm.is-js .bws-t span, .bwm.is-js .bws-s, .bwm.is-js .bws-list, .bwm.is-js .bws-cta, .bwm.is-js .bws-vis{ opacity:1 !important; transform:none !important; }
  .bwm.is-js .bws-photo img{ transform:none !important; }
}