/* =====================================================================
   ProBit Startseite — Redesign (Hero + Sektionen)
   Nutzt tokens.css. Nur Front-Page. Angelegt 2026-07-01.
   Akzent = --pb-accent (aktuell Cyan). Zentral in tokens.css umschaltbar.
   ===================================================================== */

/* --- HERO (Full-Viewport, Hintergrund-Imagefilm) ------------------- */
/* Header-Clearance + Gap über dem Hero entfernen → Hero randlos unter Header */
/* .site hat im Parent overflow:hidden + max-width → clippt Vollbreiten-Ausbruch.
   Auf der Home lösen, damit der Hero 100vw ausbrechen kann (Box für Inhalt bleibt). */
body.home { overflow-x: hidden; }
.home #page { padding-top: 0; overflow: visible; }
.home .site-main { margin-top: 0; }

/* Inhaltsbereich full-width: grauen 1350er-Rahmen entfernen,
   Content aber lesbar zentriert (max 1240px) → einheitlich mit Hero/Footer */
.home #page.site { max-width: none; }
.home .site-content { background: #fff; }
.home .site-main { max-width: 1240px; }

.home .pb-hero {
  position: relative;
  width: var(--pb-bleed-w);
  margin-left: var(--pb-bleed-m);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--pb-navy);
  color: #fff;
}
.pb-hero__bgvideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;   /* Das alte Wasserzeichen oben ist per delogo entfernt
                                    (geprueft) — der Ausschnitt darf daher hoeher liegen.
                                    Weil der Hero jetzt 641px hoch ist, betraegt der Ueberschuss
                                    nur noch 79px — der Ausschnitt kann daher weit nach oben,
                                    ohne dass die EINDREHENDE Logo-Fassung (Original-y 139, der
                                    hoechste Punkt der Sequenz) an die Navigation stoesst.
                                    Bei 75%: Drehung 40px unter der Nav, Logo y 221,
                                    Abspann y 398 — Sequenz sitzt hoeher, bleibt aber frei. */
  z-index: 0;
}
.pb-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Kontrast-Scrim auf die Headline (oben links) fokussiert; unterer/mittlerer
     Bereich bleibt hell → die im Video eingebrannten Captions kommen durch. */
  background:
    radial-gradient(120% 62% at 20% 30%, rgba(9,31,56,0.90) 0%, rgba(9,31,56,0.60) 34%, rgba(9,31,56,0.18) 66%, rgba(9,31,56,0) 90%);
}
.pb-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  /* Tag 9: Hero-Text startet auf derselben Kante wie alle Sektionen darunter
     (vorher x=79 gegen x=145 - die H1 stand als einziges Element versetzt).
     Linksbuendig bleibt es: der Text ist auf 560px begrenzt, Mitte/rechts
     bleibt frei fuer die Video-Marke am Ende der Schleife. */
  max-width: var(--pb-container);
  margin-inline: auto;
  padding: clamp(5rem, 12vh, 9rem) var(--pb-gutter) clamp(3rem, 8vh, 6rem);
}
.pb-hero__text { max-width: 560px; }
.pb-hero__eyebrow {
  margin: 0 0 1rem;
  color: var(--pb-accent-on-navy);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.pb-hero__title {
  margin: 0;
  color: #fff;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: var(--pb-lh-tight);
  font-weight: 600;
  text-shadow: 0 2px 20px rgba(4,16,32,0.55), 0 1px 3px rgba(4,16,32,0.5);
}
.pb-hero__title span { color: var(--pb-accent-on-navy); }
.pb-hero__eyebrow,
.pb-hero__sub { text-shadow: 0 1px 8px rgba(4,16,32,0.5); }
.pb-hero__sub {
  margin: 1.25rem 0 0;
  max-width: 44ch;
  color: #dbe4ef;
  font-size: var(--pb-fs-md);
  line-height: var(--pb-lh-snug);
}
.pb-hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }

.pb-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.9rem 1.7rem;
  border: 0;
  border-radius: var(--pb-radius-sm);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--pb-transition), color var(--pb-transition), border-color var(--pb-transition);
}
.pb-btn--primary { background: var(--pb-accent); color: #04223b; }
.pb-btn--primary:hover,
.pb-btn--primary:focus-visible { background: var(--pb-accent-on-navy); color: #04223b; }
.pb-btn--ghost { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.5); color: #fff; }
.pb-btn--ghost:hover,
.pb-btn--ghost:focus-visible { border-color: var(--pb-accent-on-navy); color: var(--pb-accent-on-navy); }

/* Kontrast-Prinzip: Primär-Button auf HELLEM Grund (CTA-Band) = Navy + weiß + Cyan-Pfeil.
   Auf dunklem Grund (Hero-Video) bleibt der Cyan-Button. */
.home .pb-cta .pb-btn--primary { background: var(--pb-navy); color: #fff; }
.home .pb-cta .pb-btn--primary:hover,
.home .pb-cta .pb-btn--primary:focus-visible { background: var(--pb-navy-800); color: #fff; }
.home .pb-cta .pb-btn--primary::after { content: "\203A"; color: var(--pb-cyan-bright); font-weight: 700; font-size: 1.15em; line-height: 1; }

.pb-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255,255,255,0.85);
  animation: pb-bob 1.8s ease-in-out infinite;
}
@keyframes pb-bob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .pb-hero__scroll { animation: none; } }

@media (max-width: 900px) {
  .home .pb-hero { min-height: 88vh; min-height: 88svh; }
  .pb-hero__sub { max-width: none; }
}

/* --- Header: transparent über dem Hero, solid beim Scrollen -------- */
/* ⚠️ MASSIV IST DER NORMALFALL (Tag 14). Bis zum Go-Live stand die
   transparente Fassung als Standard hier, und `.pb-scrolled` sollte sie
   beim Scrollen auf Navy umschalten - nur setzte KEINE Zeile JavaScript diese
   Klasse. Folge: nach dem Hero weisse Navigationsschrift auf den hellen
   Sektionen, gemessen rund 1,6 : 1, praktisch unlesbar.
   Jetzt umgekehrt und ausfallsicher:
     - ohne JS (kein `html.pb-js`)       -> massiv navy, immer lesbar;
     - mit JS, ueber dem Hero            -> transparent (Wirkung ueber dem Video);
     - mit JS, Hero vorbei (.pb-scrolled) -> massiv navy.
   `pb-js` setzt inc/kopfzeile.php im <head> (vor dem ersten Zeichnen, sonst
   blendet die Kopfzeile beim Laden sichtbar um), `pb-scrolled` setzt
   `kopfzeileStartseite()` in js/site-fx.js. */
@media (min-width: 960px) {
  .home .site-header {
    background: var(--pb-navy);
    box-shadow: 0 2px 18px rgba(0,0,0,0.28);
    transition: background var(--pb-transition), box-shadow var(--pb-transition);
  }
  html.pb-js .home .site-header:not(.pb-scrolled) {
    background: linear-gradient(180deg, rgba(9,31,56,0.55) 0%, rgba(9,31,56,0) 100%);
    box-shadow: none;
  }
}

/* --- Sektion „Unsere Kompetenzen" ---------------------------------- */
.home .site-main > .wp-block-heading {
  color: var(--pb-heading);
}
.home h2.wp-block-heading {
  font-size: var(--pb-fs-xl);
  font-weight: 600;
  position: relative;
  padding-bottom: 0.6rem;
}
.home h2.wp-block-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 3px;
  background: var(--pb-accent);
}

/* --- Sektions-System (Home): Full-Width-Bänder, einheitlicher Container ---
   Alle Inhalte liegen in randlosen Sektionen; der Inhalt sitzt in EINEM
   konsistenten Container (max 1200) und füllt die Sektion → kein „Schweben". */
.home .site-main { padding: 0; margin: 0; max-width: none; }
.home .pb-section {
  width: var(--pb-bleed-w);
  margin-left: var(--pb-bleed-m);
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}
.home .pb-section--light { background: #fff; }
.home .pb-container {
  width: 100%;
  max-width: var(--pb-container);
  margin: 0 auto;
  padding: 0 var(--pb-gutter);
}
.home .pb-head { max-width: 660px; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.home .pb-head__eyebrow {
  margin: 0 0 0.8rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pb-cyan-ink);
}
.home .pb-head__title { margin: 0; color: var(--pb-navy); font-size: var(--pb-fs-xl); font-weight: 600; }
.home .pb-head__lead { margin: 0.9rem 0 0; color: var(--pb-text-muted); font-size: var(--pb-fs-md); line-height: 1.5; }

/* --- Kompetenz-Kacheln → Bild-Overlay Hero-Tiles (custom) --------- */
.home .pb-section-lead {
  max-width: 64ch;
  margin: 0.4rem 0 2.5rem;
  color: var(--pb-text-muted);
  font-size: var(--pb-fs-md);
  line-height: 1.5;
}
.home .pb-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1rem;
}
@media (min-width: 980px) {
  .home .pb-tiles { grid-template-columns: repeat(3, 1fr); }
}
.home .pb-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 4 / 5;
  border-radius: var(--pb-radius-md);
  overflow: hidden;
  box-shadow: var(--pb-shadow-md);
  text-decoration: none;
  color: #fff;
  transition: transform var(--pb-transition), box-shadow var(--pb-transition);
}
.home .pb-tile:hover,
.home .pb-tile:focus-visible { transform: translateY(-5px); box-shadow: var(--pb-shadow-lg); }
.home .pb-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.home .pb-tile:hover .pb-tile__img,
.home .pb-tile:focus-visible .pb-tile__img { transform: scale(1.06); }
.home .pb-tile__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(8,26,48,0.95) 8%, rgba(8,26,48,0.5) 42%, rgba(8,26,48,0) 68%);
  transition: background 0.3s ease;
}
.home .pb-tile:hover .pb-tile__overlay,
.home .pb-tile:focus-visible .pb-tile__overlay {
  background: linear-gradient(0deg, rgba(8,26,48,0.97) 12%, rgba(8,26,48,0.58) 50%, rgba(28,111,168,0.18) 82%);
}
.home .pb-tile__body { position: relative; z-index: 1; padding: 1.5rem 1.35rem; }
.home .pb-tile__eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pb-cyan-bright);
  margin-bottom: 0.5rem;
}
.home .pb-tile__title {
  display: block;
  font-size: 1.24rem;
  font-weight: 600;
  line-height: 1.25;
  min-height: 2.5em;   /* 2 Zeilen reservieren → Labels/Titel reihenweise auf einer Linie */
}
.home .pb-tile__desc {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.94rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
  min-height: 4.5em;   /* 3 Zeilen reservieren → „mehr" bündig */
}
@media (max-width: 560px) {
  .home .pb-tile__title,
  .home .pb-tile__desc { min-height: 0; }   /* einspaltig: keine Reservierung nötig */
}
.home .pb-tile__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-weight: 600;
  color: var(--pb-cyan-bright);
}
.home .pb-tile__more svg { transition: transform var(--pb-transition); }
.home .pb-tile:hover .pb-tile__more svg,
.home .pb-tile:focus-visible .pb-tile__more svg { transform: translateX(3px); }

/* --- Philosophie & Werte → Full-Width Navy-Band ------------------- */
.home .pb-values {
  width: var(--pb-bleed-w);
  margin-left: var(--pb-bleed-m);
  background-color: var(--pb-navy);
  /* JPG-Fallback (Browser ohne image-set) */
  background-image:
    linear-gradient(rgba(9,31,56,0.62), rgba(9,28,52,0.74)),
    url("/wp-content/uploads/2020/01/ProBit_roboterzelle_72dpi_1176x882px_shutterstock_407758888_Praphan_Jampala.jpg");
  /* WebP bevorzugt, JPG als Fallback innerhalb image-set */
  background-image:
    linear-gradient(rgba(9,31,56,0.62), rgba(9,28,52,0.74)),
    -webkit-image-set(
      url("/wp-content/uploads/2020/01/ProBit_roboterzelle_72dpi_1176x882px_shutterstock_407758888_Praphan_Jampala.webp") type("image/webp"),
      url("/wp-content/uploads/2020/01/ProBit_roboterzelle_72dpi_1176x882px_shutterstock_407758888_Praphan_Jampala.jpg") type("image/jpeg"));
  background-image:
    linear-gradient(rgba(9,31,56,0.62), rgba(9,28,52,0.74)),
    image-set(
      url("/wp-content/uploads/2020/01/ProBit_roboterzelle_72dpi_1176x882px_shutterstock_407758888_Praphan_Jampala.webp") type("image/webp"),
      url("/wp-content/uploads/2020/01/ProBit_roboterzelle_72dpi_1176x882px_shutterstock_407758888_Praphan_Jampala.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: #fff;
  padding: clamp(4.5rem, 10vw, 7.5rem) 2rem;
  position: relative;
  overflow: hidden;
}
.home .pb-values::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--pb-cyan);
}
.home .pb-values__inner {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.home .pb-values__eyebrow {
  margin: 0 0 1.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pb-cyan-bright);
}
.home .pb-values__statement {
  margin: 0 0 1.7rem;
  font-size: clamp(1.4rem, 2.6vw, 2.15rem);
  line-height: 1.4;
  font-weight: 500;
  color: #fff;
  text-shadow: 0 2px 16px rgba(4,16,32,0.6);
}
.home .pb-values__quote {
  margin: 0;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  font-weight: 600;
  color: var(--pb-cyan-bright);
  text-shadow: 0 2px 14px rgba(4,16,32,0.6);
}
.home .pb-values__eyebrow { text-shadow: 0 1px 10px rgba(4,16,32,0.6); }
.home .pb-values__cta { margin-top: 2.2rem; }
.home .pb-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  margin-top: clamp(2.2rem, 4vw, 3rem);
}
.home .pb-stat__num {
  display: block;
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  font-weight: 700;
  line-height: 1;
  color: var(--pb-cyan-bright);
  text-shadow: 0 2px 14px rgba(4,16,32,0.5);
}
.home .pb-stat__label {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.9rem;
  color: #c3d2e4;
}

/* --- Jobs/News-Widgets ausblenden (durch CTA-+-Karriere-Band ersetzt) --- */
.home .after-pages-widget-area { display: none; }

/* --- CTA + Karriere-Band ----------------------------------------- */
.home .pb-cta {
  width: var(--pb-bleed-w);
  margin-left: var(--pb-bleed-m);
  background: var(--pb-surface-alt);
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.home .pb-cta__inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.home .pb-cta__title {
  margin: 0;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 600;
  color: var(--pb-navy);
  line-height: 1.25;
}
.home .pb-cta__text {
  margin: 0.6rem 0 1.4rem;
  color: var(--pb-text-muted);
  font-size: var(--pb-fs-base);
  line-height: 1.55;
}
.home .pb-cta__career {
  border-left: 3px solid var(--pb-cyan);
  padding-left: 1.6rem;
}
.home .pb-cta__career-eyebrow { margin: 0; font-weight: 600; color: var(--pb-navy); font-size: 1.1rem; }
.home .pb-cta__career-text { margin: 0.4rem 0 0.8rem; color: var(--pb-text-muted); font-size: 0.95rem; line-height: 1.5; }
.home .pb-cta__career-link { color: var(--pb-cyan-ink); font-weight: 600; text-decoration: none; }
.home .pb-cta__career-link:hover,
.home .pb-cta__career-link:focus-visible { color: var(--pb-navy); }
@media (max-width: 760px) {
  .home .pb-cta__inner { grid-template-columns: 1fr; }
  .home .pb-cta__career { border-left: none; border-top: 3px solid var(--pb-cyan); padding-left: 0; padding-top: 1.5rem; }
}


/* ---------------------------------------------------------------------
   Hero-Hoehe: an die BREITE gekoppelt (50vw), nicht nur an die Hoehe.
   Grund: `object-fit: cover` skaliert das Video auf die Hero-BREITE. Bei einem
   breiten Fenster wird es dadurch viel hoeher als der Hero und oben/unten
   massiv beschnitten — gemessen bei 1920px Breite: Video 1080px hoch, Hero
   641px, oben 329px weg, nur 59% des Bildes sichtbar. Das ruhende Logo landete
   dadurch exakt auf Hoehe der Navigation. Mit 50vw bleibt das Verhaeltnis
   Hero:Video konstant (~89% sichtbar), unabhaengig von der Fensterbreite;
   92vh deckelt es, damit der Hero nie ueber den Bildschirm hinauswaechst.
   Frueher (Tag 8): war 100svh — der Besucher musste erst scrollen, um zu
   erfahren, was die Firma macht, und das Kennzahlen-Band lag unter der Kante.
   Auf ~72vh gekuerzt: das Video bleibt Buehne, aber die naechste Sektion ist
   angeschnitten sichtbar und zieht weiter.
   Steht bewusst HIER und nicht in site-fx.css: site-fx ist das site-weite
   System und laedt frueher — eine gleich spezifische Regel dort wuerde von
   `.home .pb-hero{min-height:100svh}` weiter oben in dieser Datei geschlagen.
   --------------------------------------------------------------------- */
.home .pb-hero.pb-hero--full{ min-height:min(92vh,50vw) }
@media (max-width:900px){ .home .pb-hero.pb-hero--full{ min-height:min(84vh,620px) } }

/* ---------------------------------------------------------------------
   HEADER-LESBARKEIT ueber dem Imagefilm (Tag 8)
   Problem (User-Screenshot): Logo und Navigation standen ohne eigenen
   Hintergrund direkt auf dem Video. Lief gerade eine helle Szene — oder das
   eingebrannte Branding des Films — durch, kollidierten Website-Logo und
   Video-Logo, und die Navigation war kaum zu lesen.
   Zwei Massnahmen: (1) das Branding-Outro wurde aus dem Loop geschnitten
   (probit_imagefilm_hero_v2.mp4), (2) dieser Verlauf sichert die
   Lesbarkeit unabhaengig davon, welche Szene gerade laeuft.
   Nur solange der Header transparent ist — ab .pb-scrolled uebernimmt
   der solide Header-Hintergrund.
   --------------------------------------------------------------------- */
.home .pb-hero::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:190px;
  z-index:2;                      /* ueber Video + Leiterbahnen, unter Text */
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(6,20,36,.88) 0%,
    rgba(6,20,36,.62) 42%,
    rgba(6,20,36,.22) 76%,
    rgba(6,20,36,0) 100%);
  transition:opacity var(--pb-transition);
}
/* Sobald der Header solide wird, ist der Verlauf ueberfluessig. */
.home.pb-header-solid .pb-hero::before{ opacity:0 }

/* Logo und Navigation heben sich zusaetzlich leicht ab. */
/* Nur solange die Kopfzeile transparent ist - also nur mit JS (siehe oben). */
html.pb-js .home .site-header:not(.pb-scrolled) .site-title img,
html.pb-js .home .site-header:not(.pb-scrolled) .custom-logo,
html.pb-js .home .site-header:not(.pb-scrolled) .site-branding svg{
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));
}
html.pb-js .home .site-header:not(.pb-scrolled) .main-navigation a{
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}

/* Klare Schichtung im Hero, damit nichts von der DOM-Reihenfolge abhaengt:
   0 Video · 1 Leiterbahnen + Scrim · 2 Header-Verlauf · 3 Text.
   (Der Text stand vorher ebenfalls auf 2 und gewann nur, weil er spaeter im
   DOM kommt — bei der kleinsten Umstellung waere er verschwunden.) */
.home .pb-hero__inner{ position:relative; z-index:3 }