/* =====================================================================
   ProBit · site-fx.css — Design-System "Signalfluss" "Signalfluss" (Tag 8)
   Ergaenzt homepage.css, ersetzt es nicht. Nutzt ausschliesslich Tokens
   aus tokens.css (G15/G16). Schrift: Barlow (self-hosted, css/fonts.css).

   Grundsatz: FAIL-VISIBLE. Jeder Baustein ist im Grundzustand sichtbar;
   Animationen sind nur Zugabe. Faellt JS oder eine Animation aus, bleibt
   die Seite vollstaendig lesbar.
   ===================================================================== */

:root{
  --pb-fx-ease: cubic-bezier(.22,.61,.36,1);
  --pb-signal:  #6fe3a4;                 /* Status-Gruen, wie eine SPS-LED */
  --pb-mono: ui-monospace,"Cascadia Mono","Segoe UI Mono",Consolas,monospace;
}

/* ---------------------------------------------------------------------
   1) SCROLL-FORTSCHRITT — duenne Cyan-Linie am oberen Rand
   --------------------------------------------------------------------- */
.pb-progress{
  position:fixed; top:0; left:0; height:3px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--pb-cyan),var(--pb-signal));
  z-index:9999; pointer-events:none;
}

/* ---------------------------------------------------------------------
   2) HERO — Imagefilm + Leiterbahnen-Overlay
   --------------------------------------------------------------------- */
/* Hero-Hoehe ist startseiten-spezifisch und steht in homepage.css. */
.pb-hero__traces{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:1; pointer-events:none; opacity:.7;
  mix-blend-mode:screen;
}
.pb-hero__traces.is-on{ animation:pb-fx-sweep 1.8s var(--pb-fx-ease); }
@keyframes pb-fx-sweep{
  from{opacity:0; clip-path:inset(0 100% 0 0)}
  to  {opacity:.7; clip-path:inset(0 0 0 0)}
}
/* Scrim + Text muessen ueber dem Canvas liegen */
.pb-hero__scrim{ z-index:2 }
.pb-hero__inner{ position:relative; z-index:3 }

/* Headline: Woerter steigen gestaffelt ein (Grundzustand sichtbar) */
.pb-hero__title .pb-w{ display:inline-block; animation:pb-fx-rise .8s var(--pb-fx-ease) backwards }
@keyframes pb-fx-rise{ from{opacity:0; transform:translateY(.4em)} to{opacity:1; transform:none} }

.pb-hero__sub, .pb-hero__cta, .pb-hero__sig{ animation:pb-fx-rise .8s var(--pb-fx-ease) backwards }
.pb-hero__sub{ animation-delay:.45s }
.pb-hero__cta{ animation-delay:.58s }
.pb-hero__sig{ animation-delay:.70s }

/* Marken-Signatur unter den Buttons */
.pb-hero__sig{
  font-family:var(--pb-mono); font-size:.82rem; color:#9dc0da;
  margin:var(--pb-space-5) 0 0; padding-left:14px;
  border-left:2px solid var(--pb-cyan); max-width:46ch;
}
/* Zaehler-Pille am Karriere-Button */
.pb-btn .pb-count{
  font-family:var(--pb-mono); font-size:.78rem; font-weight:700;
  background:var(--pb-signal); color:#06301c;
  padding:2px 8px; border-radius:3px; margin-left:2px;
}

/* Magnetische Buttons (JS setzt --mdx/--mdy) */
.pb-btn{ transition:transform 220ms var(--pb-fx-ease), background var(--pb-transition), color var(--pb-transition), border-color var(--pb-transition) }
.pb-btn.is-magnetic{ transform:translate(var(--mdx,0),var(--mdy,0)) }

/* ---------------------------------------------------------------------
   3) TECH-LAUFBAND — belegte Technologien aus den eigenen Stellenprofilen
   --------------------------------------------------------------------- */
.pb-ticker{
  background:var(--pb-navy); color:#fff; overflow:hidden;
  border-block:1px solid rgba(255,255,255,.09);
  padding-block:.85rem; position:relative;
}
.pb-ticker::before,.pb-ticker::after{
  content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none;
}
.pb-ticker::before{ left:0;  background:linear-gradient(90deg,var(--pb-navy),transparent) }
.pb-ticker::after { right:0; background:linear-gradient(270deg,var(--pb-navy),transparent) }
.pb-ticker__row{ display:flex; width:max-content; animation:pb-fx-marquee 38s linear infinite }
.pb-ticker:hover .pb-ticker__row{ animation-play-state:paused }
@keyframes pb-fx-marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.pb-ticker__item{
  font-family:var(--pb-mono); font-size:.86rem; letter-spacing:.06em;
  color:#b9d3e6; padding-inline:1.6rem; white-space:nowrap;
  display:inline-flex; align-items:center; gap:.9rem;
}
.pb-ticker__item::after{
  content:""; width:7px; height:7px; background:var(--pb-cyan); flex:none;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);   /* Bit-Motiv */
}

/* ---------------------------------------------------------------------
   4) BEWEIS-BAND — Kennzahlen wie ein Messwert-Panel
   --------------------------------------------------------------------- */
.pb-proof{ background:var(--pb-navy-800); color:#fff }
.pb-proof__grid{
  /* Tag 9: .pb-proof traegt den Gutter, also ist das Raster um zwei Gutter
     schmaler - dadurch stehen die Kennzahlen-Zellen exakt auf der Kante
     der Kacheln darunter (vorher 32px versetzt). */
  max-width:calc(var(--pb-container) - 2 * var(--pb-gutter)); margin-inline:auto;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
  gap:1px; background:rgba(255,255,255,.10);
}
/* Seitlicher Innenabstand — sonst kleben die Zellen am Bildschirmrand */
.pb-proof{ padding-inline:var(--pb-gutter) }
.pb-proof__cell{
  background:var(--pb-navy-800); padding:1.9rem clamp(1rem,2.4vw,2rem);
  min-width:0; overflow-wrap:break-word;
}
.pb-proof__num{
  font-weight:700; font-size:clamp(1.9rem,3.4vw,2.8rem); line-height:1;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
  display:flex; align-items:baseline; gap:.06em;
}
.pb-proof__num small{ font-size:.5em; color:var(--pb-cyan-bright); font-weight:700 }
.pb-proof__cap{
  font-family:var(--pb-mono); font-size:.7rem; letter-spacing:.13em;
  text-transform:uppercase; color:#9dc0da; margin-top:.6rem;
}
.pb-proof__led{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--pb-signal); margin-right:7px; vertical-align:middle;
  box-shadow:0 0 0 0 rgba(111,227,164,.7); animation:pb-fx-pulse 2.4s infinite;
}
@keyframes pb-fx-pulse{ 70%{box-shadow:0 0 0 9px rgba(111,227,164,0)} 100%{box-shadow:0 0 0 0 rgba(111,227,164,0)} }

/* ---------------------------------------------------------------------
   5) KACHELN — 3D-Neigung + Cursor-Spotlight (ergaenzt homepage.css)
   --------------------------------------------------------------------- */
.pb-tiles{ perspective:1100px }
.pb-tile{
  transform-style:preserve-3d;
  transition:transform 260ms var(--pb-fx-ease), box-shadow 260ms var(--pb-fx-ease);
}
.pb-tile.is-tilt{
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-5px);
  box-shadow:var(--pb-shadow-lg);
}
.pb-tile__glow{
  position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0;
  transition:opacity 260ms var(--pb-fx-ease);
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
             rgba(79,195,239,.28), transparent 62%);
}
.pb-tile:hover .pb-tile__glow,
.pb-tile:focus-visible .pb-tile__glow{ opacity:1 }

/* ---------------------------------------------------------------------
   6) KARRIERE — eigener Block mit den offenen Stellen
   --------------------------------------------------------------------- */
.pb-career{ background:var(--pb-navy); color:#fff; position:relative; overflow:hidden }
.pb-career::before{                       /* technisches Raster, weich maskiert */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg,rgba(41,163,224,.10) 1px,transparent 1px) 0 0/52px 52px,
    linear-gradient(rgba(41,163,224,.10) 1px,transparent 1px) 0 0/52px 52px;
  -webkit-mask-image:radial-gradient(78% 62% at 80% 26%,#000,transparent 72%);
          mask-image:radial-gradient(78% 62% at 80% 26%,#000,transparent 72%);
}
.pb-career{ padding-block:clamp(3rem,7vw,5.5rem) }
.pb-career__inner{
  position:relative; z-index:1; max-width:var(--pb-container);
  margin-inline:auto; padding-inline:var(--pb-gutter);
}
.pb-career__eyebrow{
  font-family:var(--pb-mono); font-size:.74rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--pb-cyan-bright);
  display:inline-flex; align-items:center; gap:.6em;
}
.pb-career__eyebrow::before{
  content:""; width:9px; height:9px; background:var(--pb-cyan); flex:none;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.pb-career__title{
  font-size:clamp(1.9rem,4vw,2.9rem); font-weight:700; line-height:1.1;
  letter-spacing:-.02em; margin:var(--pb-space-4) 0 var(--pb-space-4);
}
.pb-career__lead{ color:#c3d9ea; margin:0 0 var(--pb-space-6) }

.pb-joblist{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px }
.pb-jobmini{
  display:block; text-decoration:none; color:#fff; min-width:0;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-left:3px solid var(--pb-cyan); border-radius:var(--pb-radius-sm);
  padding:1.4rem 1.4rem 1.2rem;
  transition:transform 260ms var(--pb-fx-ease), background 260ms, border-left-color 260ms;
  overflow-wrap:break-word;
}
.pb-jobmini:hover,.pb-jobmini:focus-visible{
  transform:translateX(5px); background:rgba(41,163,224,.12);
  border-left-color:var(--pb-signal);
}
.pb-jobmini__area{
  font-family:var(--pb-mono); font-size:.68rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--pb-cyan-bright);
}
.pb-jobmini__title{ font-size:1.05rem; font-weight:700; margin:.6rem 0 .8rem; line-height:1.3 }
.pb-jobmini__pay{
  font-family:var(--pb-mono); font-size:.85rem; color:var(--pb-signal);
  font-variant-numeric:tabular-nums;
}
.pb-jobmini__meta{ font-size:.78rem; color:#a5c2d8; margin-top:.25rem }
.pb-jobmini__go{
  margin-top:1rem; font-size:.85rem; font-weight:700; color:var(--pb-cyan-bright);
  display:flex; align-items:center; gap:.5rem;
}
.pb-jobmini__go svg{ width:16px; height:16px; transition:transform 250ms var(--pb-fx-ease) }
.pb-jobmini:hover .pb-jobmini__go svg{ transform:translateX(4px) }
.pb-career__all{ margin-top:var(--pb-space-6) }

/* Body-Text im dunklen Block: Theme-Linkfarben neutralisieren */
.pb-career a{ text-decoration:none }

/* ---------------------------------------------------------------------
   7) SCROLL-REVEAL — versteckt wird NUR, wenn JS es aktiviert
   --------------------------------------------------------------------- */
.pb-rev.is-armed{
  opacity:0; transform:translateY(20px);
  transition:opacity .7s var(--pb-fx-ease), transform .7s var(--pb-fx-ease);
}
.pb-rev.is-armed.is-in{ opacity:1; transform:none }

/* ---------------------------------------------------------------------
   8) Reduced Motion — alles ruhig, aber vollstaendig sichtbar
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .pb-hero__traces,.pb-hero__title .pb-w,.pb-hero__sub,.pb-hero__cta,.pb-hero__sig{ animation:none }
  .pb-ticker__row{ animation:none; width:auto; flex-wrap:wrap; justify-content:center }
  .pb-proof__led{ animation:none }
  .pb-rev,.pb-rev.is-armed{ opacity:1; transform:none }
  .pb-tile.is-tilt{ transform:translateY(-5px) }
  .pb-progress{ display:none }
}

@media (max-width:720px){
  .pb-proof__grid{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)) }
  .pb-joblist{ grid-template-columns:1fr }
  .pb-hero__sig{ font-size:.76rem }
}

/* =====================================================================
   9) SPEZIFITAETS-KORREKTUR  (wichtig!)
   Das Theme setzt Schriftgroessen ueber ID-Selektoren (`#page p`,
   `#page h1` …). Eine Klassen-Regel verliert dagegen IMMER, egal wie
   spaet sie geladen wird. Folge vor diesem Fix: die Kennzahlen des
   Beweis-Bands rendertem mit 19px statt 43px — das Band war visuell
   wirkungslos, die H1 blieb bei 35px und damit fast so gross wie H2.
   Daher hier dieselben Regeln noch einmal mit `#page`-Prefix.
   Merke: in diesem Theme brauchen p/h1/h2/h3 IMMER den Prefix.
   ===================================================================== */
#page .pb-hero__title{
  font-size:var(--pb-fs-display); font-weight:700;
  line-height:1.06; letter-spacing:-.025em;
}
#page .pb-proof__num{
  font-size:clamp(2rem,3.6vw,2.9rem); font-weight:700; line-height:1;
  letter-spacing:-.03em;
}
#page .pb-proof__num.is-word{ font-size:clamp(1.4rem,2.2vw,1.8rem) }
#page .pb-proof__cap{
  font-family:var(--pb-mono); font-size:.72rem; letter-spacing:.13em;
  text-transform:uppercase; color:#9dc0da; line-height:1.4;
}
#page .pb-hero__sig{
  font-family:var(--pb-mono); font-size:.82rem; line-height:1.5; color:#9dc0da;
}
#page .pb-career__title{
  font-size:var(--pb-fs-section); font-weight:700;
  line-height:1.08; letter-spacing:-.025em;
}
#page .pb-career__eyebrow{
  font-family:var(--pb-mono); font-size:.75rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--pb-cyan-bright); line-height:1.4;
}
#page .pb-career__lead{ font-size:var(--pb-fs-base); line-height:var(--pb-lh-body) }

/* Hero-Lede etwas zurueckgenommen, damit die H1 klar dominiert */
#page .pb-hero__sub{ font-size:clamp(1rem,1.5vw,1.15rem); line-height:1.6 }

/* Beide Sektions-Ueberschriften auf EINE Stufe: `.pb-head__title` stand auf
   31px, `.pb-career__title` auf 48px — zwei H2 derselben Ebene in zwei
   Groessen lassen die Seite unausgewogen wirken. Jetzt identisch skaliert. */
#page .pb-head__title{
  font-size:var(--pb-fs-section); font-weight:700;
  line-height:1.08; letter-spacing:-.025em;
}
/* Sektions-Innenabstaende auf EINEN Rhythmus (waren 96/120/80/80 = unruhig).
   #page-Prefix noetig, weil homepage.css hoehere Spezifitaet mitbringt. */
#page .pb-section,
#page .pb-values,
#page .pb-career,
#page .pb-cta{
  padding-block:var(--pb-rhythm);
}

/* =====================================================================
   10) SCROLL-STORY (NUR STARTSEITE)
   Tag 9: `.pb-flow` heisst auf /leistungsuebersicht/ ein voellig anderes
   Bauteil (waagrechte Ablauf-Leiste). Seit site-fx site-weit laedt (H-09),
   faerbten diese Regeln dort den Streifen navy ein, liessen ihn per 100vw
   ausbrechen und setzten die Textfarbe auf Hellblau -> gezerrter dunkler
   Balken mit unlesbarem Text. Alle Regeln dieses Bauteils daher auf `.home`
   begrenzt; die Scroll-Story existiert nur in Seite 617.
   ALT-Kopf: "So entsteht Ihre Anlage"
   Setzt das Leiterbahn-Motiv des Heros vertikal fort: eine Signalspur
   laeuft durch die Sektion, die Knoten (Bit-Motiv) zuenden nacheinander,
   waehrend der Besucher scrollt. Inhalte = die 5 echten Prozessschritte
   von der Leistungsuebersicht.
   FAIL-VISIBLE: alle Schritte sind lesbar, auch ohne JS/Animation —
   `.is-active` steuert ausschliesslich die Hervorhebung.
   ===================================================================== */
/* overflow:CLIP statt hidden — `hidden` macht das Element zum Scroll-Container
   und setzt damit `position:sticky` bei .pb-flow__aside ausser Kraft (die linke
   Spalte klebte nicht, was das Springen verstaerkte). `clip` beschneidet
   genauso, erzeugt aber keinen Scrollport, also bleibt sticky funktionsfaehig. */
.home .pb-flow{ background:var(--pb-navy-800); color:#fff; position:relative; overflow:clip }
.home .pb-flow__inner{
  max-width:var(--pb-container); margin-inline:auto;
  padding-inline:var(--pb-gutter);
  display:grid; grid-template-columns:minmax(0,34%) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem);
}
/* Linke Spalte bleibt stehen, waehrend rechts die Schritte durchlaufen */
.home .pb-flow__aside{ position:sticky; top:120px; align-self:start; min-width:0 }
.home #page .pb-flow__eyebrow{
  font-family:var(--pb-mono); font-size:.75rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--pb-cyan-bright);
  display:inline-flex; align-items:center; gap:.6em; line-height:1.4;
}
.home #page .pb-flow__eyebrow::before{
  content:""; width:9px; height:9px; background:var(--pb-cyan); flex:none;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.home #page .pb-flow__title{
  font-size:var(--pb-fs-section); font-weight:700; line-height:1.08;
  letter-spacing:-.025em; margin:var(--pb-space-4) 0 var(--pb-space-4);
}
.home #page .pb-flow__lead{ color:#c3d9ea; font-size:var(--pb-fs-base); line-height:var(--pb-lh-body) }
/* Fortschrittsanzeige 01 / 05 */
.home .pb-flow__counter{
  font-family:var(--pb-mono); font-variant-numeric:tabular-nums;
  margin-top:var(--pb-space-6); display:flex; align-items:baseline; gap:.35rem;
}
.home .pb-flow__counter b{ font-size:2.6rem; font-weight:700; color:var(--pb-cyan-bright); line-height:1 }
.home .pb-flow__counter span{ font-size:1rem; color:#7fa3c0 }

/* Rechte Spalte: Signalspur + Stationen */
.home .pb-flow__steps{ position:relative; padding-left:38px; min-width:0 }
.home .pb-flow__steps::before{           /* ruhende Spur */
  content:""; position:absolute; left:9px; top:14px; bottom:14px; width:2px;
  background:rgba(255,255,255,.14);
}
.home .pb-flow__steps::after{            /* geladener Teil, JS setzt --fill */
  content:""; position:absolute; left:9px; top:14px; width:2px;
  height:calc((100% - 28px) * var(--fill,0));
  background:linear-gradient(180deg,var(--pb-cyan),var(--pb-signal));
  transition:height .25s linear;
}
.home .pb-flow__step{
  position:relative; padding:0 0 clamp(2.5rem,5vw,3.5rem);
  min-width:0; overflow-wrap:break-word;
  /* .72 statt .5: auch eine noch nicht erreichte Station muss gut lesbar
     sein — die Hervorhebung ist Betonung, kein Ein-/Ausschalter. */
  opacity:.72; transition:opacity .45s var(--pb-fx-ease);
}
.home .pb-flow__step:last-child{ padding-bottom:0 }
.home .pb-flow__step.is-active{ opacity:1 }
.home .pb-flow__step::before{            /* Knoten = Bit */
  content:""; position:absolute; left:-38px; top:9px; width:20px; height:20px;
  background:var(--pb-navy-800); border:2px solid rgba(255,255,255,.22);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  transition:background .45s var(--pb-fx-ease), transform .45s var(--pb-fx-ease);
}
.home .pb-flow__step.is-active::before{
  background:var(--pb-signal); border-color:var(--pb-signal); transform:scale(1.25);
}
.home .pb-flow__num{
  font-family:var(--pb-mono); font-size:.78rem; letter-spacing:.16em;
  color:var(--pb-cyan-bright); font-weight:700;
}
.home #page .pb-flow__step h3{
  font-size:clamp(1.25rem,2.2vw,1.65rem); font-weight:700; line-height:1.2;
  letter-spacing:-.015em; margin:.5rem 0 .6rem; color:#fff;
}
.home #page .pb-flow__step p{
  font-size:var(--pb-fs-base); line-height:var(--pb-lh-body); color:#c3d9ea; margin:0;
}

@media (max-width:900px){
  .home .pb-flow__inner{ grid-template-columns:1fr; gap:var(--pb-space-6) }
  .home .pb-flow__aside{ position:static }
  .home .pb-flow__counter{ display:none }          /* ohne Sticky sinnlos */
  .home .pb-flow__step{ opacity:1 }                /* mobil alles gleich lesbar */
}
@media (prefers-reduced-motion:reduce){
  .home .pb-flow__step{ opacity:1 }
  .home .pb-flow__steps::after{ transition:none }
}

/* ---------------------------------------------------------------------
   WEITER GEHT ES IN `site-fx-korrekturen.css`
   Ab hier folgten die Sammel-Korrekturen, das site-weite Design-Konzept,
   die Absatz-Margins, die Hover-Kontraste und die Lede-Regel. Sie sind am
   2026-09-07 wegen G1 in eine eigene Datei gewandert und werden direkt
   nach dieser hier geladen - die Kaskade ist unveraendert.
   --------------------------------------------------------------------- */


/* =====================================================================
   SEITENTITEL-BAND ("Pagebar")   - erzeugt von js/site-fx.js
   Faehrt an der oberen Bildschirmkante ein, sobald der Seiten-Hero
   weggescrollt ist, und zeigt den Seitentitel im schmalen Navy-Band mit
   fliegenden Bits. Nur Unterseiten (`.pb-page-hero`), Startseite ohne Band.

   ⚠️ DER VERSATZ HAENGT AN DER BREITE - NICHT FEST VERDRAHTEN.
   `harrison-child/style.css:46` macht die Kopfzeile **erst ab 960 px**
   `position: fixed` (mit `z-index: 1000`); darunter laeuft sie als normales
   Element im Textfluss mit weg. Beide Fehler wurden schon gemacht:
     - Versatz IMMER gesetzt  -> im schmalen Fenster haengt das Band frei
       ueber den Resten der Kopfzeile (Befund Tag 13);
     - Versatz NIE gesetzt    -> ab 960 px verschwindet das Band hinter der
       fixierten Kopfzeile und ist gar nicht mehr zu sehen (Befund Tag 13).
   `--pb-headh` wird deshalb von `js/site-fx.js` zur LAUFZEIT gesetzt: Hoehe
   der Kopfzeile, aber nur wenn deren berechnete `position` gerade `fixed`
   oder `sticky` ist, sonst 0 - und bei Groessenaenderung neu.
   Vorgabewert 0px, weil das der harmlosere Ausfall ist: ohne JS liegt das
   Band im Zweifel unsichtbar hinter der Kopfzeile statt frei in der Seite.
   ===================================================================== */
:root { --pb-headh: 0px; }

.pb-pagebar {
  position: fixed;
  top: var(--pb-headh);
  left: 0;
  width: var(--pb-bleed-w, 100%);
  height: 52px;
  z-index: 999;                      /* unter der Kopfzeile (1000) */
  background: var(--pb-navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  overflow: hidden;                  /* beschneidet die Bits aufs Band */
  pointer-events: none;              /* faengt keine Klicks ab */
  transform: translateY(-101%);
  transition: transform 260ms var(--pb-fx-ease);
}
.pb-pagebar.is-on { transform: none; }

.pb-pagebar__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: var(--pb-container);
  margin: 0 auto;
  padding-inline: var(--pb-gutter);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pb-pagebar__dot {
  width: 9px; height: 9px; flex: none;
  background: var(--pb-cyan);
  transform: rotate(-15deg);
}
.pb-pagebar__title {
  color: #fff;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Die Bits sitzen im Hero auf 100px Hoehe - im 52px-Band muessen sie
   kleiner und hoeher liegen, sonst sieht man nur ihre Unterkante. */
.pb-pagebar__bits {
  position: absolute;
  inset: 0 0 auto auto;
  right: 6%;
  top: 50%;
  height: auto;
  transform: translateY(-50%) scale(0.55);
  transform-origin: right center;
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .pb-pagebar { transition: none; }
}
@media (max-width: 700px) {
  .pb-pagebar { height: 46px; }
  .pb-pagebar__title { font-size: 0.95rem; }
  .pb-pagebar__bits { display: none; }   /* auf schmalen Schirmen nur Titel */
}