/* ===================================================================== ProBit - site-fx: KORREKTUREN & SITE-WEITE KONSISTENZ Fortsetzung von `site-fx.css`, abgetrennt am 2026-09-07 wegen G1 (die Datei stand bei 28,9 KB = 94 % des 30-KB-Limits). ⚠️ DIE LADEREIHENFOLGE IST BINDEND: diese Datei MUSS direkt nach `site-fx.css` und VOR den seitenspezifischen Dateien geladen werden (Enqueue-Handle `pb-site-fx-korrekturen`, Abhaengigkeit `pb-site-fx`). Mehrere Regeln hier stehen mit Theme-Regeln bei GLEICHER Spezifitaet - dann entscheidet allein die Reihenfolge. Wird sie vertauscht, verliert z. B. die H2-Breite gegen `subpages.css` (Befund vom 04.09.). Inhalt: die Sammel-Korrekturen aus den User-Runden, das durchgaengige Design-Konzept ueber alle Seiten, die Absatz-Margins gegen `#page p`, die Hover-Kontraste und die Lede-Regel ueber vollbreitem Inhalt. Neue Korrekturen dieser Art gehoeren HIER hinein, nicht in site-fx.css. ===================================================================== */ /* ===================================================================== 11) KORREKTUREN (User-Screenshot 2026-08-25) ===================================================================== */ /* a) VOLLE BREITE für die neuen Sektionen. Hero und .pb-section brechen per 100vw aus dem Theme-Container aus, meine neuen Baender taten das nicht -> helle Streifen links/rechts (gemessen: .pb-career 1361px bei 1425px Viewport). Gleicher Mechanismus wie im Theme; der Scrollbar-Ueberstand wird von html{overflow-x:clip} sauber gekappt. */ .pb-ticker, .pb-proof, .home .pb-flow, .pb-career{ width:var(--pb-bleed-w); margin-left:var(--pb-bleed-m); margin-right:var(--pb-bleed-m); max-width:none; } /* b) JOBKARTEN: die Textbausteine sind und rendern als INLINE — dadurch liefen Bereich, Titel, Gehalt und Meta in EINER Zeile ineinander ("ElektroanlagenbauElektroanlagentechniker ab 3.100,-"), Margins blieben wirkungslos und `overflow-wrap` zerriss die Woerter mitten im Wort. Als Bloecke steht jede Angabe auf eigener Zeile und der Umbruch faellt zwischen die Woerter. */ .pb-jobmini__area, .pb-jobmini__title, .pb-jobmini__pay, .pb-jobmini__meta{ display:block } .pb-jobmini__area{ margin-bottom:.55rem } .pb-jobmini__title{ margin:0 0 .7rem } .pb-jobmini__pay{ margin-bottom:.15rem } /* c) Karten etwas breiter, damit lange Komposita ohne Notumbruch passen. */ .pb-joblist{ grid-template-columns:repeat(auto-fill,minmax(310px,1fr)) } /* ===================================================================== 12) DURCHGAENGIGES KONZEPT — dieselbe Handschrift auf ALLEN Seiten Bisher hatten Startseite ("Signalfluss") und Unterseiten ("Bit-System") unterschiedliche Ausgangspunkte. Diese Sektion zieht die gemeinsamen Merkmale ueber die gesamte Site: Leiterbahnen im Hero, Mono-Labels mit Bit-Raute, Signal-Akzent, Karten-Spotlight. ===================================================================== */ /* --- a) Unterseiten-Hero bekommt die Leiterbahnen ------------------- */ .pb-page-hero{ position:relative; isolation:isolate } .pb-page-hero .pb-hero__traces{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.42; /* dezenter als auf der Startseite */ mix-blend-mode:screen; } .pb-page-hero__inner{ position:relative; z-index:2 } /* --- b) Eine Label-Sprache fuer die ganze Site ---------------------- */ /* Eyebrows waren je Seite unterschiedlich gesetzt. Ab hier ueberall: Monospace, gesperrt, Versalien, davor die Bit-Raute als Marken-Atom. */ #page .pb-page-hero__eyebrow, #page .pb-head__eyebrow, #page .pb-values__eyebrow, #page .pb-article__cat, #page .pb-sec-h{ font-family:var(--pb-mono); font-size:.75rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; display:inline-flex; align-items:center; gap:.65em; line-height:1.4; color:var(--pb-accent-on-navy); } #page .pb-head__eyebrow{ color:var(--pb-cyan-ink) } /* auf hellem Grund */ #page .pb-page-hero__eyebrow::before, #page .pb-head__eyebrow::before, #page .pb-values__eyebrow::before, #page .pb-article__cat::before{ content:""; width:9px; height:9px; background:var(--pb-cyan); flex:none; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); } /* .pb-sec-h bringt seinen Punkt schon selbst mit */ #page .pb-sec-h::before{ content:none } /* --- c) Karten-Spotlight site-weit ---------------------------------- */ /* Dieselbe Reaktion auf den Cursor wie auf der Startseite — Karten fuehlen sich ueberall gleich an. Rein additiv: ohne JS passiert nichts. */ .pb-jobcard, .pb-newsrow, .pb-card{ position:relative; overflow:hidden } .pb-tile__glow{ border-radius:inherit } /* --- d) Signal-Akzent fuer "aktiv/erreichbar" ----------------------- */ /* Ein einziges Statusgruen fuer die ganze Site (Stellenzaehler, erreichte Stationen, Live-Punkte) — nicht pro Seite neu erfunden. */ .pb-signal-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--pb-signal); vertical-align:middle; } /* Beitrags-Kicker (News + Stellenanzeigen) steht auf hellem Grund. Der Hero-Beitrag bleibt redaktionell schmal — durchgaengig ist die LABEL-SPRACHE, nicht ein erzwungener Hero auf jeder Seite. */ #page .pb-article__cat{ color:var(--pb-cyan-ink) } /* --------------------------------------------------------------------- 9b) TOP-MARGINS AUF

— `#page p{margin-block-start:0}` schlaegt alles `style.css:92` (Agentur-Altbestand) setzt per ID-Selektor `#page p{ margin-block-start:0; margin-bottom:.7em }`. Damit kommt bei KEINEM Absatz eine per Klasse gesetzte `margin-top` an — gemessen: `.pb-hero__sig` sollte 24px Abstand haben und hatte -2px (Ueberlappung mit den Buttons), `.pb-career__all` sollte 36px haben und hatte 0. `#page .klasse` (1,1,0) schlaegt `#page p` (1,0,1) → Prefix noetig. ⚠️ Der Fehler ist systemisch: JEDER `p.pb-*` bezieht seine Abstaende heute aus der Theme-Regel, nicht aus der Komponente. Hier bewusst nur die Stellen korrigiert, an denen der Abstand nachweislich falsch ist — ein Umbau des Absatz-Modells gehoert hinter den Go-Live (Backlog D-01). --------------------------------------------------------------------- */ /* Marken-Signatur ist eine eigenstaendige Aussage, keine Button-Fussnote. */ #page .pb-hero__sig{ margin:var(--pb-space-6) 0 0 } /* Der Sektions-CTA schliesst den Karriere-Block ab. Klebte er am Raster (gemessen 0px gegen 14px Raster-Gap), las er sich als vierte, kaputte Karte statt als Handlungsaufforderung. */ #page .pb-career__all{ margin:var(--pb-space-7) 0 0 } /* --------------------------------------------------------------------- 9c) HOVER DARF DEN KONTRAST NIE SENKEN Das Parent-Theme faerbt jeden Link per `a:hover{color:var(--link-hover-color)}` (= #055089). Auf dem dunklen Karriere-Block ergibt das gemessene 1,47:1 — die Stellenbezeichnung verschwindet genau in dem Moment, in dem der Besucher sie anklicken will. `a:hover` (0,1,1) schlaegt `.pb-jobmini` (0,1,0), deshalb hier explizit zurueckgeholt. Der Hover bleibt spuerbar: Titel weiss (12,9:1), und das Signal wandert dorthin, wo es hingehoert — auf die Aktionszeile. --------------------------------------------------------------------- */ .pb-hero a:not(.pb-btn):is(:hover,:focus,:active), .pb-page-hero a:not(.pb-btn):is(:hover,:focus,:active), .pb-career a:not(.pb-btn):is(:hover,:focus,:active), .pb-cta a:not(.pb-btn):is(:hover,:focus,:active){ color:#fff } .pb-jobmini:hover .pb-jobmini__go, .pb-jobmini:focus-visible .pb-jobmini__go{ color:var(--pb-signal) } /* ===================================================================== LEDE UEBER VOLLBREITEM INHALT (Tag 11, aus jobs.css hierher gezogen) Befund (gemessen @1440): Auf den Seiten, deren Inhalt aus vollbreiten Bausteinen besteht, standen Ueberschrift und Einleitung in der Lesespalte (680px), die Bausteine darunter auf 1136px: /leistungsuebersicht/ Text 145-825 Slider/Ablauf/Felder 145-1281 /ueber-uns/ Text 145-825 Saeulen/Timeline/GF 145-1281 /jobangebote/ Text 145-825 Kartenraster 145-1281 Das liest sich als rechts abgeschnittener Block, nicht als Kopf - und erzwingt zusaetzlich Umbrueche in H2, die einzeilig passen wuerden. Der Kopf steht deshalb auf der Kante des Bausteins darunter; damit die laengere Zeile lesbar bleibt, wird der Lede eine Stufe groesser und etwas enger gesetzt (--pb-fs-lede, 23px/1.5 statt 19px/1.7). NICHT betroffen und bewusst unveraendert: - Rechtstexte (Impressum, Datenschutz) und Einzelbeitraege -> dort wird wirklich gelesen, die Lesespalte bleibt. - /referenzen/ und /kontakt/ -> haben gar keine direkten Textkinder in `.entry-content`, ihr Text steckt in den Bausteinen (geprueft). `#page`-Prefix noetig: `#page p{font-size:1.2rem}` schlaegt Klassen. ===================================================================== */ /* `#page`-Prefix ist hier PFLICHT: ohne ihn steht diese Regel mit `body:not(.home) .entry-content > h2` aus subpages.css bei exakt gleicher Spezifitaet (0,2,2), und die Ladereihenfolge entscheidet - subpages.css laedt spaeter und gewann. Gemessen: die Absaetze sassen danach auf 1136px, die H2 blieb auf 680px stehen. */ body.page-jobangebote #page .entry-content > h2, body.page-jobangebote #page .entry-content > p, body.page-leistungsuebersicht #page .entry-content > h2, body.page-leistungsuebersicht #page .entry-content > p, body.page-ueber-uns #page .entry-content > h2, body.page-ueber-uns #page .entry-content > p { max-width: none; } body.page-jobangebote #page .entry-content > p, body.page-leistungsuebersicht #page .entry-content > p, body.page-ueber-uns #page .entry-content > p { font-size: var(--pb-fs-lede); line-height: 1.5; max-width: none; } /* Karriere-Block: derselbe Fall auf dunklem Grund. Titel und Lede trugen eigene Kappungen (20ch / 56ch) und standen damit als schmaler Block ueber einem 1136px breiten Kartenraster. Jetzt gleiche Kante, gleiche Lede-Stufe. */ #page .pb-career__lead { font-size: var(--pb-fs-lede); line-height: 1.5; max-width: none; } /* ===================================================================== JOB-BUTTONS: FARBKONZEPT WIEDERHERSTELLEN (Tag 12, User-Befund) Gemessen: beide Knoepfe auf den Stellenseiten kamen mit `color:#1c6fa8` und `text-decoration:underline` heraus - sie sahen aus wie Links, nicht wie Buttons. Ihre eigenen Regeln setzen sehr wohl `color:var(--pb-blue)` und `text-decoration:none`, verlieren aber gegen body:not(.home) .entry-content a:not(.wp-block-button__link) (0,3,1) aus subpages.css. Deshalb hier mit `#page`-Prefix (1,x,y). Geprueft: betroffen sind NUR diese beiden. Die uebrigen unterstrichenen Links auf den Seiten sind die Datenschutz-/Impressum-Verweise im Consent-Banner - dort ist die Unterstreichung richtig. Farbkonzept (seit Tag 4): Cyan auf DUNKEL, Navy+weiss auf HELL. - "Jetzt bewerben" sitzt im dunklen Fakten-Band -> Cyan + Navy-Text - "Alle offenen Stellen" sitzt auf hellem Canvas -> Navy + weisser Text Bisher trugen beide Cyan; auf dem hellen Grund war das der Bruch. ===================================================================== */ #page .pb-jobfacts__apply, #page .pb-jobfacts__apply:hover, #page .pb-jobfacts__apply:focus-visible { color: var(--pb-blue); /* #002F66 auf #29a3e0 = 4,6:1 */ text-decoration: none; } #page .pb-btn-cyan, #page .pb-btn-cyan:hover, #page .pb-btn-cyan:focus-visible { background: var(--pb-navy); color: #fff; /* 14,9:1 */ text-decoration: none; } #page .pb-btn-cyan:hover, #page .pb-btn-cyan:focus-visible { background: var(--pb-blue); } /* Der Pfeil bleibt der Marken-Akzent, wie bei den uebrigen hellen Buttons. */ #page .pb-btn-cyan svg { color: var(--pb-cyan-bright); }